diff --git a/package-lock.json b/package-lock.json
index 5704692..8b20b51 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,8 +8,12 @@
       "name": "equipmenttracker-frontend",
       "version": "0.0.0",
       "dependencies": {
+        "@reduxjs/toolkit": "^1.9.7",
+        "@tanstack/react-query": "^5.8.3",
         "react": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "react-dom": "^18.2.0",
+        "react-redux": "^8.1.3",
+        "react-router-dom": "^6.18.0"
       },
       "devDependencies": {
         "@types/react": "^18.2.15",
@@ -342,6 +346,17 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.23.2",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.2.tgz",
+      "integrity": "sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==",
+      "dependencies": {
+        "regenerator-runtime": "^0.14.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/template": {
       "version": "7.22.15",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.15.tgz",
@@ -930,6 +945,71 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@reduxjs/toolkit": {
+      "version": "1.9.7",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.9.7.tgz",
+      "integrity": "sha512-t7v8ZPxhhKgOKtU+uyJT13lu4vL7az5aFi4IdoDs/eS548edn2M8Ik9h8fxgvMjGoAUVFSt6ZC1P5cWmQ014QQ==",
+      "dependencies": {
+        "immer": "^9.0.21",
+        "redux": "^4.2.1",
+        "redux-thunk": "^2.4.2",
+        "reselect": "^4.1.8"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.0 || ^18",
+        "react-redux": "^7.2.1 || ^8.0.2"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-redux": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@remix-run/router": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.11.0.tgz",
+      "integrity": "sha512-BHdhcWgeiudl91HvVa2wxqZjSHbheSgIiDvxrF1VjFzBzpTtuDPkOdOi3Iqvc08kXtFkLjhbS+ML9aM8mJS+wQ==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@tanstack/query-core": {
+      "version": "5.8.3",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.8.3.tgz",
+      "integrity": "sha512-SWFMFtcHfttLYif6pevnnMYnBvxKf3C+MHMH7bevyYfpXpTMsLB9O6nNGBdWSoPwnZRXFNyNeVZOw25Wmdasow==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/react-query": {
+      "version": "5.8.3",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.8.3.tgz",
+      "integrity": "sha512-EDRrsMgUtKM+SjVmhDYBd4jwWWyHAw3kCaurKLIO90OfPQr/UhpwcqM2l/eQOaUYon9lfDB2ejQi1edHK7zEdA==",
+      "dependencies": {
+        "@tanstack/query-core": "5.8.3"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0",
+        "react-native": "*"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.3",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.3.tgz",
@@ -971,6 +1051,15 @@
         "@babel/types": "^7.20.7"
       }
     },
+    "node_modules/@types/hoist-non-react-statics": {
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz",
+      "integrity": "sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==",
+      "dependencies": {
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.14",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.14.tgz",
@@ -980,14 +1069,12 @@
     "node_modules/@types/prop-types": {
       "version": "15.7.9",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.9.tgz",
-      "integrity": "sha512-n1yyPsugYNSmHgxDFjicaI2+gCNjsBck8UX9kuofAKlc0h1bL+20oSF72KeNaW2DUlesbEVCFgyV2dPGTiY42g==",
-      "dev": true
+      "integrity": "sha512-n1yyPsugYNSmHgxDFjicaI2+gCNjsBck8UX9kuofAKlc0h1bL+20oSF72KeNaW2DUlesbEVCFgyV2dPGTiY42g=="
     },
     "node_modules/@types/react": {
       "version": "18.2.31",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.31.tgz",
       "integrity": "sha512-c2UnPv548q+5DFh03y8lEDeMfDwBn9G3dRwfkrxQMo/dOtRHUUO57k6pHvBIfH/VF4Nh+98mZ5aaSe+2echD5g==",
-      "dev": true,
       "dependencies": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -998,7 +1085,7 @@
       "version": "18.2.14",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.14.tgz",
       "integrity": "sha512-V835xgdSVmyQmI1KLV2BEIUgqEuinxp9O4G6g3FqO/SqLac049E53aysv0oEFD2kHfejeKU+ZqL2bcFWj9gLAQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@types/react": "*"
       }
@@ -1006,8 +1093,7 @@
     "node_modules/@types/scheduler": {
       "version": "0.16.5",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.5.tgz",
-      "integrity": "sha512-s/FPdYRmZR8SjLWGMCuax7r3qCWQw9QKHzXVukAuuIJkXkDRwp+Pu5LMIVFi0Fxbav35WURicYr8u1QsoybnQw==",
-      "dev": true
+      "integrity": "sha512-s/FPdYRmZR8SjLWGMCuax7r3qCWQw9QKHzXVukAuuIJkXkDRwp+Pu5LMIVFi0Fxbav35WURicYr8u1QsoybnQw=="
     },
     "node_modules/@types/semver": {
       "version": "7.5.4",
@@ -1015,6 +1101,11 @@
       "integrity": "sha512-MMzuxN3GdFwskAnb6fz0orFvhfqi752yjaXylr0Rp4oDg5H0Zn1IuyRhDVvYOwAXoJirx2xuS16I3WjxnAIHiQ==",
       "dev": true
     },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
+      "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA=="
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "6.8.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.8.0.tgz",
@@ -1449,8 +1540,7 @@
     "node_modules/csstype": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
-      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==",
-      "dev": true
+      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
     },
     "node_modules/debug": {
       "version": "4.3.4",
@@ -2040,6 +2130,19 @@
         "node": ">=4"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/hoist-non-react-statics/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/ignore": {
       "version": "5.2.4",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
@@ -2049,6 +2152,15 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immer": {
+      "version": "9.0.21",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.21.tgz",
+      "integrity": "sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -2538,6 +2650,49 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-is": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+    },
+    "node_modules/react-redux": {
+      "version": "8.1.3",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.1.3.tgz",
+      "integrity": "sha512-n0ZrutD7DaX/j9VscF+uTALI3oUPa/pO4Z3soOBIjuRn/FzVu6aehhysxZCLi6y7duMf52WNZGMl7CtuK5EnRw==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.1",
+        "@types/hoist-non-react-statics": "^3.3.1",
+        "@types/use-sync-external-store": "^0.0.3",
+        "hoist-non-react-statics": "^3.3.2",
+        "react-is": "^18.0.0",
+        "use-sync-external-store": "^1.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8 || ^17.0 || ^18.0",
+        "@types/react-dom": "^16.8 || ^17.0 || ^18.0",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0",
+        "react-native": ">=0.59",
+        "redux": "^4 || ^5.0.0-beta.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        },
+        "redux": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.14.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz",
@@ -2547,6 +2702,62 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.18.0.tgz",
+      "integrity": "sha512-vk2y7Dsy8wI02eRRaRmOs9g2o+aE72YCx5q9VasT1N9v+lrdB79tIqrjMfByHiY5+6aYkH2rUa5X839nwWGPDg==",
+      "dependencies": {
+        "@remix-run/router": "1.11.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.18.0.tgz",
+      "integrity": "sha512-Ubrue4+Ercc/BoDkFQfc6og5zRQ4A8YxSO3Knsne+eRbZ+IepAsK249XBH/XaFuOYOYr3L3r13CXTLvYt5JDjw==",
+      "dependencies": {
+        "@remix-run/router": "1.11.0",
+        "react-router": "6.18.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
+    "node_modules/redux": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
+      "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
+      "dependencies": {
+        "@babel/runtime": "^7.9.2"
+      }
+    },
+    "node_modules/redux-thunk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.2.tgz",
+      "integrity": "sha512-+P3TjtnP0k/FEjcBL5FZpoovtvrTNT/UXd4/sluaSyrURlSlhLSzEdfsTBW7WsKB6yPvgd7q/iZPICFjW4o57Q==",
+      "peerDependencies": {
+        "redux": "^4"
+      }
+    },
+    "node_modules/regenerator-runtime": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
+      "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
+    },
+    "node_modules/reselect": {
+      "version": "4.1.8",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.8.tgz",
+      "integrity": "sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ=="
+    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -2851,6 +3062,14 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
+      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/vite": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.0.tgz",
diff --git a/package.json b/package.json
index d2ffc90..46cfb72 100644
--- a/package.json
+++ b/package.json
@@ -10,8 +10,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@reduxjs/toolkit": "^1.9.7",
+    "@tanstack/react-query": "^5.8.3",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-redux": "^8.1.3",
+    "react-router-dom": "^6.18.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",
diff --git a/src/App.tsx b/src/App.tsx
index afe48ac..0626e10 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,35 +1,26 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
-import './App.css'
+import LandingPage from "./Pages/LandingPage/LandingPage";
+import { createHashRouter, RouterProvider } from "react-router-dom";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { Provider } from "react-redux";
+import "./App.css";
+import store from "./Components/Plugins/Redux/Store/Store";
 
-function App() {
-  const [count, setCount] = useState(0)
+const queryClient = new QueryClient();
 
+const router = createHashRouter([
+  {
+    path: "/",
+    element: <LandingPage />,
+    errorElement: <></>,
+  },
+]);
+
+export default function App() {
   return (
-    <>
-      <div>
-        <a href="https://vitejs.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-    </>
-  )
+    <Provider store={store}>
+      <QueryClientProvider client={queryClient}>
+        <RouterProvider router={router} />
+      </QueryClientProvider>
+    </Provider>
+  );
 }
-
-export default App
diff --git a/src/Components/Buttons/Button.tsx b/src/Components/Buttons/Button.tsx
new file mode 100644
index 0000000..2ab15c5
--- /dev/null
+++ b/src/Components/Buttons/Button.tsx
@@ -0,0 +1,64 @@
+import React, { useState } from "react";
+import styles from "../styles";
+import { colors } from "../styles";
+
+export interface props {
+  onClick: React.MouseEventHandler<HTMLButtonElement>;
+  label?: string;
+  type: "light" | "dark";
+  children?: React.ReactNode;
+}
+export default function Button(props: props) {
+  const [clicked, setClicked] = useState(false);
+  return (
+    <div>
+      <button
+        onMouseDown={() => {
+          if (!clicked) {
+            props.onClick;
+            setClicked(true);
+          }
+        }}
+        onMouseUp={() => setClicked(false)}
+        onMouseLeave={() => setClicked(false)}
+        style={{
+          borderRadius: 24,
+          minWidth: "15vw",
+          borderColor: colors.button_border,
+          borderStyle: "solid",
+          borderWidth: 2,
+          paddingBottom: "2vh",
+          paddingTop: "2vh",
+          paddingRight: "5vw",
+          paddingLeft: "5vw",
+          marginBottom: "0.5vh",
+          marginTop: "0.5vh",
+          backgroundColor:
+            props.type == "light"
+              ? clicked
+                ? colors.button_dark
+                : colors.button_light
+              : clicked
+              ? colors.button_light
+              : colors.button_dark,
+        }}
+      >
+        <p
+          style={{
+            ...(props.type == "light"
+              ? clicked
+                ? styles.text_light
+                : styles.text_dark
+              : clicked
+              ? styles.text_dark
+              : styles.text_light),
+            ...styles.text_M,
+          }}
+        >
+          {props.label}
+        </p>
+        {props.children}
+      </button>
+    </div>
+  );
+}
diff --git a/src/Components/Plugins/Redux/Store/Store.tsx b/src/Components/Plugins/Redux/Store/Store.tsx
new file mode 100644
index 0000000..8b8a1ec
--- /dev/null
+++ b/src/Components/Plugins/Redux/Store/Store.tsx
@@ -0,0 +1,12 @@
+import { configureStore } from "@reduxjs/toolkit";
+
+const store = configureStore({
+  reducer: {},
+});
+
+export default store;
+
+// Infer the `RootState` and `AppDispatch` types from the store itself
+export type RootState = ReturnType<typeof store.getState>;
+// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
+export type AppDispatch = typeof store.dispatch;
diff --git a/src/Components/styles.tsx b/src/Components/styles.tsx
new file mode 100644
index 0000000..b2c5ef0
--- /dev/null
+++ b/src/Components/styles.tsx
@@ -0,0 +1,69 @@
+export const colors = {
+  background: "#FFFFFF",
+  header_color: "#141762",
+  font_dark: "#141762",
+  font_light: "#FFFFFF",
+  button_dark: "#141762",
+  button_light: "#FFFFFF",
+  button_border: "#141762",
+  red: "#a44141",
+  orange: "#c57331",
+  green: "#80b28a",
+};
+const styles: { [key: string]: React.CSSProperties } = {
+  background: {
+    backgroundColor: colors.background,
+    position: "fixed",
+    top: 0,
+    left: 0,
+    height: "100%",
+    width: "100%",
+    minHeight: "100%",
+    minWidth: "100%",
+  },
+  text_dark: {
+    color: colors.font_dark,
+    fontWeight: "bold",
+  },
+  text_light: {
+    color: colors.font_light,
+    fontWeight: "bold",
+  },
+  text_red: {
+    color: colors.red,
+    fontWeight: "bold",
+  },
+  text_orange: {
+    color: colors.orange,
+    fontWeight: "bold",
+  },
+  text_green: {
+    color: colors.green,
+    fontWeight: "bold",
+  },
+  text_XL: {
+    fontSize: "clamp(1vw, 4rem, 2vw)",
+  },
+  text_L: {
+    fontSize: "clamp(1vw, 2rem, 2vw)",
+  },
+  text_M: {
+    fontSize: "clamp(1vw, 1rem, 2vw)",
+  },
+  text_S: {
+    fontSize: "clamp(1vw, 0.5rem, 2vw)",
+  },
+  text_XS: {
+    fontSize: "clamp(1vw, 0.2rem, 2vw)",
+  },
+  flex_row: {
+    display: "flex",
+    flexDirection: "row",
+  },
+  flex_column: {
+    display: "flex",
+    flexDirection: "column",
+  },
+};
+
+export default styles;
diff --git a/src/Pages/LandingPage/LandingPage.tsx b/src/Pages/LandingPage/LandingPage.tsx
new file mode 100644
index 0000000..3aca3b6
--- /dev/null
+++ b/src/Pages/LandingPage/LandingPage.tsx
@@ -0,0 +1,57 @@
+import Button from "../../Components/Buttons/Button";
+import styles from "../../Components/styles";
+import citc_logo from "../../assets/citc_logo.jpg";
+export default function LandingPage() {
+  return (
+    <div style={styles.background}>
+      <div
+        style={{
+          ...styles.flex_row,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          height: "100%",
+          width: "100%",
+          minHeight: "100%",
+          minWidth: "100%",
+        }}
+      >
+        <div style={{ maxWidth: "50%", height: "auto", flex: 1 }}>
+          <img style={{ maxWidth: "50%", height: "auto" }} src={citc_logo} />
+        </div>
+        <div
+          style={{
+            maxWidth: "50%",
+            height: "auto",
+            flex: 1,
+          }}
+        >
+          <div
+            style={{
+              minWidth: "30vw",
+              borderRadius: 4,
+              borderColor: "grey",
+              borderStyle: "solid",
+              borderWidth: 1,
+              padding: 16,
+              margin: 64,
+              paddingBottom: "16vh",
+              paddingTop: "16vh",
+            }}
+          >
+            <p style={{ ...styles.text_dark, ...styles.text_L }}>
+              CITC EQUIPMENT
+              <br />
+              TRACKER
+            </p>
+            <div style={{ ...styles.flex_column }}>
+              <Button type={"light"} label={"Login"} onClick={() => {}} />
+              <Button type={"dark"} label={"Register"} onClick={() => {}} />
+            </div>
+          </div>
+        </div>
+      </div>
+      <p>heh</p>
+    </div>
+  );
+}
diff --git a/src/assets/citc_logo.jpg b/src/assets/citc_logo.jpg
new file mode 100644
index 0000000..a2a23c8
Binary files /dev/null and b/src/assets/citc_logo.jpg differ
diff --git a/src/main.tsx b/src/main.tsx
index 3d7150d..eb0a604 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,10 +1,5 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
-import './index.css'
+import ReactDOM from "react-dom/client";
+import App from "./App.tsx";
+import "./index.css";
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-)
+ReactDOM.createRoot(document.getElementById("root")!).render(<App />);