diff --git a/.gitignore b/.gitignore
index 4b95c1d0..6d3a7653 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,3 +7,6 @@
 
 # Secret files
 **/*.env
+
+# Mac Files
+**/.DS_Store
\ No newline at end of file
diff --git a/README.md b/README.md
index df3b6863..9f1a8c98 100644
--- a/README.md
+++ b/README.md
@@ -28,6 +28,10 @@ The project is built using [Typescript](https://www.typescriptlang.org/), and sp
 -   [CSS Modules](https://github.com/css-modules/css-modules) (implemented by Vite)
 -   [Bootstrap](https://getbootstrap.com/)
 -   [axios](https://axios-http.com/)
+-   [dotenv](https://www.dotenv.org/)
+-   [React If](https://https://www.npmjs.com/package/react-if/)
+-   [React Toastify](https://fkhadra.github.io/react-toastify/introduction/)
+-   [Socket IO](https://socket.io/) (Client)
 
 **Server (built with [esno](https://www.npmjs.com/package/esno)):**
 
@@ -40,6 +44,12 @@ The project is built using [Typescript](https://www.typescriptlang.org/), and sp
 -   [http-status-codes](https://www.npmjs.com/package/http-status-codes)
 -   [nodemailer](https://www.nodemailer.com/)
 -   [JWT](https://jwt.io/)
+-   [CORS](https://www.npmjs.com/package/cors)
+-   [dotenv](https://www.dotenv.org/)
+-   [Google Auth Library](https://cloud.google.com/nodejs/docs/reference/google-auth-library/latest)
+-   [Google APIs](https://www.npmjs.com/package/googleapis)
+-   [Http Status Codes](https://www.npmjs.com/package/http-status-codes)
+-   [Socket IO](https://socket.io/) (Server)
 
 **Development Utilities:**
 
@@ -69,6 +79,7 @@ Both the server and client utilize a `.env` file.
 | Key  | Usage                          |
 | ---- | ------------------------------ |
 | PORT | Port used for the frontend app |
+| VITE_LOCALHOST | Host used for listening to Server Socket Events |
 
 **Server Variables:**
 
diff --git a/client/package-lock.json b/client/package-lock.json
index 3d881abb..038cc1b5 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -10,12 +10,18 @@
 				"axios": "^1.6.8",
 				"bootstrap": "^5.3.3",
 				"dotenv": "^16.4.5",
+				"is-mobile": "^4.0.0",
+				"konva": "^9.3.9",
 				"react": "^18.3.1",
 				"react-bootstrap": "^2.10.2",
 				"react-dom": "^18.3.1",
 				"react-icons": "^5.2.1",
 				"react-if": "^4.1.5",
+				"react-konva": "^18.2.10",
 				"react-toastify": "^10.0.5",
+				"socket.io-client": "^4.7.5",
+				"use-image": "^1.1.1",
+				"vite": "^5.2.11",
 				"wouter": "^3.1.2"
 			},
 			"devDependencies": {
@@ -24,8 +30,7 @@
 				"@types/react-dom": "^18.3.0",
 				"@vitejs/plugin-react-swc": "^3.6.0",
 				"sass": "^1.77.1",
-				"typescript": "^5.4.5",
-				"vite": "^5.2.11"
+				"typescript": "^5.4.5"
 			}
 		},
 		"node_modules/@babel/runtime": {
@@ -46,7 +51,6 @@
 			"cpu": [
 				"ppc64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"aix"
@@ -62,7 +66,6 @@
 			"cpu": [
 				"arm"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"android"
@@ -78,7 +81,6 @@
 			"cpu": [
 				"arm64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"android"
@@ -94,7 +96,6 @@
 			"cpu": [
 				"x64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"android"
@@ -110,7 +111,6 @@
 			"cpu": [
 				"arm64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"darwin"
@@ -126,7 +126,6 @@
 			"cpu": [
 				"x64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"darwin"
@@ -142,7 +141,6 @@
 			"cpu": [
 				"arm64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"freebsd"
@@ -158,7 +156,6 @@
 			"cpu": [
 				"x64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"freebsd"
@@ -174,7 +171,6 @@
 			"cpu": [
 				"arm"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -190,7 +186,6 @@
 			"cpu": [
 				"arm64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -206,7 +201,6 @@
 			"cpu": [
 				"ia32"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -222,7 +216,6 @@
 			"cpu": [
 				"loong64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -238,7 +231,6 @@
 			"cpu": [
 				"mips64el"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -254,7 +246,6 @@
 			"cpu": [
 				"ppc64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -270,7 +261,6 @@
 			"cpu": [
 				"riscv64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -286,7 +276,6 @@
 			"cpu": [
 				"s390x"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -302,7 +291,6 @@
 			"cpu": [
 				"x64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -318,7 +306,6 @@
 			"cpu": [
 				"x64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"netbsd"
@@ -334,7 +321,6 @@
 			"cpu": [
 				"x64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"openbsd"
@@ -350,7 +336,6 @@
 			"cpu": [
 				"x64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"sunos"
@@ -366,7 +351,6 @@
 			"cpu": [
 				"arm64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"win32"
@@ -382,7 +366,6 @@
 			"cpu": [
 				"ia32"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"win32"
@@ -398,7 +381,6 @@
 			"cpu": [
 				"x64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"win32"
@@ -476,7 +458,6 @@
 			"cpu": [
 				"arm"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"android"
@@ -489,7 +470,6 @@
 			"cpu": [
 				"arm64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"android"
@@ -502,7 +482,6 @@
 			"cpu": [
 				"arm64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"darwin"
@@ -515,7 +494,6 @@
 			"cpu": [
 				"x64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"darwin"
@@ -528,7 +506,6 @@
 			"cpu": [
 				"arm"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -541,7 +518,6 @@
 			"cpu": [
 				"arm"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -554,7 +530,6 @@
 			"cpu": [
 				"arm64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -567,7 +542,6 @@
 			"cpu": [
 				"arm64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -580,7 +554,6 @@
 			"cpu": [
 				"ppc64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -593,7 +566,6 @@
 			"cpu": [
 				"riscv64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -606,7 +578,6 @@
 			"cpu": [
 				"s390x"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -619,7 +590,6 @@
 			"cpu": [
 				"x64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -632,7 +602,6 @@
 			"cpu": [
 				"x64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -645,7 +614,6 @@
 			"cpu": [
 				"arm64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"win32"
@@ -658,7 +626,6 @@
 			"cpu": [
 				"ia32"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"win32"
@@ -671,12 +638,16 @@
 			"cpu": [
 				"x64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"win32"
 			]
 		},
+		"node_modules/@socket.io/component-emitter": {
+			"version": "3.1.2",
+			"resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz",
+			"integrity": "sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA=="
+		},
 		"node_modules/@swc/core": {
 			"version": "1.4.17",
 			"resolved": "https://registry.npmjs.org/@swc/core/-/core-1.4.17.tgz",
@@ -901,14 +872,13 @@
 		"node_modules/@types/estree": {
 			"version": "1.0.5",
 			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
-			"integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
-			"dev": true
+			"integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
 		},
 		"node_modules/@types/node": {
 			"version": "20.12.12",
 			"resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.12.tgz",
 			"integrity": "sha512-eWLDGF/FOSPtAvEqeRAQ4C8LSA7M1I7i0ky1I8U7kD1J5ITyW3AsRhQrKVoWf5pFKZ2kILsEGJhsI9r93PYnOw==",
-			"dev": true,
+			"devOptional": true,
 			"dependencies": {
 				"undici-types": "~5.26.4"
 			}
@@ -936,6 +906,14 @@
 				"@types/react": "*"
 			}
 		},
+		"node_modules/@types/react-reconciler": {
+			"version": "0.28.8",
+			"resolved": "https://registry.npmjs.org/@types/react-reconciler/-/react-reconciler-0.28.8.tgz",
+			"integrity": "sha512-SN9c4kxXZonFhbX4hJrZy37yw9e7EIxcpHCxQv5JUS18wDE5ovkQKlqQEkufdJCCMfuI9BnjUJvhYeJ9x5Ra7g==",
+			"dependencies": {
+				"@types/react": "*"
+			}
+		},
 		"node_modules/@types/react-transition-group": {
 			"version": "4.4.10",
 			"resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.10.tgz",
@@ -965,7 +943,7 @@
 			"version": "3.1.3",
 			"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
 			"integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-			"dev": true,
+			"devOptional": true,
 			"dependencies": {
 				"normalize-path": "^3.0.0",
 				"picomatch": "^2.0.4"
@@ -993,7 +971,7 @@
 			"version": "2.3.0",
 			"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
 			"integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
-			"dev": true,
+			"devOptional": true,
 			"engines": {
 				"node": ">=8"
 			},
@@ -1023,7 +1001,7 @@
 			"version": "3.0.2",
 			"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
 			"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-			"dev": true,
+			"devOptional": true,
 			"dependencies": {
 				"fill-range": "^7.0.1"
 			},
@@ -1035,7 +1013,7 @@
 			"version": "3.6.0",
 			"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
 			"integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
-			"dev": true,
+			"devOptional": true,
 			"dependencies": {
 				"anymatch": "~3.1.2",
 				"braces": "~3.0.2",
@@ -1084,6 +1062,22 @@
 			"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
 			"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
 		},
+		"node_modules/debug": {
+			"version": "4.3.4",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+			"integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+			"dependencies": {
+				"ms": "2.1.2"
+			},
+			"engines": {
+				"node": ">=6.0"
+			},
+			"peerDependenciesMeta": {
+				"supports-color": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/delayed-stream": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -1120,11 +1114,30 @@
 				"url": "https://dotenvx.com"
 			}
 		},
+		"node_modules/engine.io-client": {
+			"version": "6.5.3",
+			"resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.5.3.tgz",
+			"integrity": "sha512-9Z0qLB0NIisTRt1DZ/8U2k12RJn8yls/nXMZLn+/N8hANT3TcYjKFKcwbw5zFQiN4NTde3TSY9zb79e1ij6j9Q==",
+			"dependencies": {
+				"@socket.io/component-emitter": "~3.1.0",
+				"debug": "~4.3.1",
+				"engine.io-parser": "~5.2.1",
+				"ws": "~8.11.0",
+				"xmlhttprequest-ssl": "~2.0.0"
+			}
+		},
+		"node_modules/engine.io-parser": {
+			"version": "5.2.2",
+			"resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.2.tgz",
+			"integrity": "sha512-RcyUFKA93/CXH20l4SoVvzZfrSDMOTUS3bWVpTt2FuFP+XYrL8i8oonHP7WInRyVHXh0n/ORtoeiE1os+8qkSw==",
+			"engines": {
+				"node": ">=10.0.0"
+			}
+		},
 		"node_modules/esbuild": {
 			"version": "0.20.2",
 			"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.20.2.tgz",
 			"integrity": "sha512-WdOOppmUNU+IbZ0PaDiTst80zjnrOkyJNHoKupIcVyU8Lvla3Ugx94VzkQ32Ijqd7UhHJy75gNWDMUekcrSJ6g==",
-			"dev": true,
 			"hasInstallScript": true,
 			"bin": {
 				"esbuild": "bin/esbuild"
@@ -1162,7 +1175,7 @@
 			"version": "7.0.1",
 			"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
 			"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-			"dev": true,
+			"devOptional": true,
 			"dependencies": {
 				"to-regex-range": "^5.0.1"
 			},
@@ -1206,7 +1219,6 @@
 			"version": "2.3.3",
 			"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
 			"integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-			"dev": true,
 			"hasInstallScript": true,
 			"optional": true,
 			"os": [
@@ -1220,7 +1232,7 @@
 			"version": "5.1.2",
 			"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
 			"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-			"dev": true,
+			"devOptional": true,
 			"dependencies": {
 				"is-glob": "^4.0.1"
 			},
@@ -1232,7 +1244,7 @@
 			"version": "4.3.6",
 			"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.6.tgz",
 			"integrity": "sha512-Ju0+lEMyzMVZarkTn/gqRpdqd5dOPaz1mCZ0SH3JV6iFw81PldE/PEB1hWVEA288HPt4WXW8O7AWxB10M+03QQ==",
-			"dev": true
+			"devOptional": true
 		},
 		"node_modules/invariant": {
 			"version": "2.2.4",
@@ -1246,7 +1258,7 @@
 			"version": "2.1.0",
 			"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
 			"integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-			"dev": true,
+			"devOptional": true,
 			"dependencies": {
 				"binary-extensions": "^2.0.0"
 			},
@@ -1258,7 +1270,7 @@
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
 			"integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-			"dev": true,
+			"devOptional": true,
 			"engines": {
 				"node": ">=0.10.0"
 			}
@@ -1267,7 +1279,7 @@
 			"version": "4.0.3",
 			"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
 			"integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-			"dev": true,
+			"devOptional": true,
 			"dependencies": {
 				"is-extglob": "^2.1.1"
 			},
@@ -1275,20 +1287,55 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/is-mobile": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/is-mobile/-/is-mobile-4.0.0.tgz",
+			"integrity": "sha512-mlcHZA84t1qLSuWkt2v0I2l61PYdyQDt4aG1mLIXF5FDMm4+haBCxCPYSr/uwqQNRk1MiTizn0ypEuRAOLRAew=="
+		},
 		"node_modules/is-number": {
 			"version": "7.0.0",
 			"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
 			"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-			"dev": true,
+			"devOptional": true,
 			"engines": {
 				"node": ">=0.12.0"
 			}
 		},
+		"node_modules/its-fine": {
+			"version": "1.2.5",
+			"resolved": "https://registry.npmjs.org/its-fine/-/its-fine-1.2.5.tgz",
+			"integrity": "sha512-fXtDA0X0t0eBYAGLVM5YsgJGsJ5jEmqZEPrGbzdf5awjv0xE7nqv3TVnvtUF060Tkes15DbDAKW/I48vsb6SyA==",
+			"dependencies": {
+				"@types/react-reconciler": "^0.28.0"
+			},
+			"peerDependencies": {
+				"react": ">=18.0"
+			}
+		},
 		"node_modules/js-tokens": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
 			"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
 		},
+		"node_modules/konva": {
+			"version": "9.3.9",
+			"resolved": "https://registry.npmjs.org/konva/-/konva-9.3.9.tgz",
+			"integrity": "sha512-0ACsA2kCGilptQqosTVdu5g1jAeONZI/W/L5U7afeRhoWqSV+HjcuBB+vsFzs64oL/02y+4/jd3K5RL0sLCxbQ==",
+			"funding": [
+				{
+					"type": "patreon",
+					"url": "https://www.patreon.com/lavrton"
+				},
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/konva"
+				},
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/lavrton"
+				}
+			]
+		},
 		"node_modules/loose-envify": {
 			"version": "1.4.0",
 			"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -1324,11 +1371,15 @@
 			"resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
 			"integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw=="
 		},
+		"node_modules/ms": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+			"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+		},
 		"node_modules/nanoid": {
 			"version": "3.3.7",
 			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
 			"integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
-			"dev": true,
 			"funding": [
 				{
 					"type": "github",
@@ -1346,7 +1397,7 @@
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
 			"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-			"dev": true,
+			"devOptional": true,
 			"engines": {
 				"node": ">=0.10.0"
 			}
@@ -1362,14 +1413,13 @@
 		"node_modules/picocolors": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-			"integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
-			"dev": true
+			"integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
 		},
 		"node_modules/picomatch": {
 			"version": "2.3.1",
 			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
 			"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-			"dev": true,
+			"devOptional": true,
 			"engines": {
 				"node": ">=8.6"
 			},
@@ -1381,7 +1431,6 @@
 			"version": "8.4.38",
 			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
 			"integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
-			"dev": true,
 			"funding": [
 				{
 					"type": "opencollective",
@@ -1511,11 +1560,56 @@
 			"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
 			"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
 		},
+		"node_modules/react-konva": {
+			"version": "18.2.10",
+			"resolved": "https://registry.npmjs.org/react-konva/-/react-konva-18.2.10.tgz",
+			"integrity": "sha512-ohcX1BJINL43m4ynjZ24MxFI1syjBdrXhqVxYVDw2rKgr3yuS0x/6m1Y2Z4sl4T/gKhfreBx8KHisd0XC6OT1g==",
+			"funding": [
+				{
+					"type": "patreon",
+					"url": "https://www.patreon.com/lavrton"
+				},
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/konva"
+				},
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/lavrton"
+				}
+			],
+			"dependencies": {
+				"@types/react-reconciler": "^0.28.2",
+				"its-fine": "^1.1.1",
+				"react-reconciler": "~0.29.0",
+				"scheduler": "^0.23.0"
+			},
+			"peerDependencies": {
+				"konva": "^8.0.1 || ^7.2.5 || ^9.0.0",
+				"react": ">=18.0.0",
+				"react-dom": ">=18.0.0"
+			}
+		},
 		"node_modules/react-lifecycles-compat": {
 			"version": "3.0.4",
 			"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
 			"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
 		},
+		"node_modules/react-reconciler": {
+			"version": "0.29.2",
+			"resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.29.2.tgz",
+			"integrity": "sha512-zZQqIiYgDCTP/f1N/mAR10nJGrPD2ZR+jDSEsKWJHYC7Cm2wodlwbR3upZRdC3cjIjSlTLNVyO7Iu0Yy7t2AYg==",
+			"dependencies": {
+				"loose-envify": "^1.1.0",
+				"scheduler": "^0.23.2"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			},
+			"peerDependencies": {
+				"react": "^18.3.1"
+			}
+		},
 		"node_modules/react-toastify": {
 			"version": "10.0.5",
 			"resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-10.0.5.tgz",
@@ -1547,7 +1641,7 @@
 			"version": "3.6.0",
 			"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
 			"integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-			"dev": true,
+			"devOptional": true,
 			"dependencies": {
 				"picomatch": "^2.2.1"
 			},
@@ -1572,7 +1666,6 @@
 			"version": "4.17.2",
 			"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.17.2.tgz",
 			"integrity": "sha512-/9ClTJPByC0U4zNLowV1tMBe8yMEAxewtR3cUNX5BoEpGH3dQEWpJLr6CLp0fPdYRF/fzVOgvDb1zXuakwF5kQ==",
-			"dev": true,
 			"dependencies": {
 				"@types/estree": "1.0.5"
 			},
@@ -1607,7 +1700,7 @@
 			"version": "1.77.1",
 			"resolved": "https://registry.npmjs.org/sass/-/sass-1.77.1.tgz",
 			"integrity": "sha512-OMEyfirt9XEfyvocduUIOlUSkWOXS/LAt6oblR/ISXCTukyavjex+zQNm51pPCOiFKY1QpWvEH1EeCkgyV3I6w==",
-			"dev": true,
+			"devOptional": true,
 			"dependencies": {
 				"chokidar": ">=3.0.0 <4.0.0",
 				"immutable": "^4.0.0",
@@ -1628,11 +1721,36 @@
 				"loose-envify": "^1.1.0"
 			}
 		},
+		"node_modules/socket.io-client": {
+			"version": "4.7.5",
+			"resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.7.5.tgz",
+			"integrity": "sha512-sJ/tqHOCe7Z50JCBCXrsY3I2k03iOiUe+tj1OmKeD2lXPiGH/RUCdTZFoqVyN7l1MnpIzPrGtLcijffmeouNlQ==",
+			"dependencies": {
+				"@socket.io/component-emitter": "~3.1.0",
+				"debug": "~4.3.2",
+				"engine.io-client": "~6.5.2",
+				"socket.io-parser": "~4.2.4"
+			},
+			"engines": {
+				"node": ">=10.0.0"
+			}
+		},
+		"node_modules/socket.io-parser": {
+			"version": "4.2.4",
+			"resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.4.tgz",
+			"integrity": "sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==",
+			"dependencies": {
+				"@socket.io/component-emitter": "~3.1.0",
+				"debug": "~4.3.1"
+			},
+			"engines": {
+				"node": ">=10.0.0"
+			}
+		},
 		"node_modules/source-map-js": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
 			"integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
-			"dev": true,
 			"engines": {
 				"node": ">=0.10.0"
 			}
@@ -1641,7 +1759,7 @@
 			"version": "5.0.1",
 			"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
 			"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-			"dev": true,
+			"devOptional": true,
 			"dependencies": {
 				"is-number": "^7.0.0"
 			},
@@ -1685,7 +1803,16 @@
 			"version": "5.26.5",
 			"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
 			"integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
-			"dev": true
+			"devOptional": true
+		},
+		"node_modules/use-image": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/use-image/-/use-image-1.1.1.tgz",
+			"integrity": "sha512-n4YO2k8AJG/BcDtxmBx8Aa+47kxY5m335dJiCQA5tTeVU4XdhrhqR6wT0WISRXwdMEOv5CSjqekDZkEMiiWaYQ==",
+			"peerDependencies": {
+				"react": ">=16.8.0",
+				"react-dom": ">=16.8.0"
+			}
 		},
 		"node_modules/use-sync-external-store": {
 			"version": "1.2.2",
@@ -1699,7 +1826,6 @@
 			"version": "5.2.11",
 			"resolved": "https://registry.npmjs.org/vite/-/vite-5.2.11.tgz",
 			"integrity": "sha512-HndV31LWW05i1BLPMUCE1B9E9GFbOu1MbenhS58FuK6owSO5qHm7GiCotrNY1YE5rMeQSFBGmT5ZaLEjFizgiQ==",
-			"dev": true,
 			"dependencies": {
 				"esbuild": "^0.20.1",
 				"postcss": "^8.4.38",
@@ -1770,6 +1896,34 @@
 			"peerDependencies": {
 				"react": ">=16.8.0"
 			}
+		},
+		"node_modules/ws": {
+			"version": "8.11.0",
+			"resolved": "https://registry.npmjs.org/ws/-/ws-8.11.0.tgz",
+			"integrity": "sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==",
+			"engines": {
+				"node": ">=10.0.0"
+			},
+			"peerDependencies": {
+				"bufferutil": "^4.0.1",
+				"utf-8-validate": "^5.0.2"
+			},
+			"peerDependenciesMeta": {
+				"bufferutil": {
+					"optional": true
+				},
+				"utf-8-validate": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/xmlhttprequest-ssl": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz",
+			"integrity": "sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==",
+			"engines": {
+				"node": ">=0.4.0"
+			}
 		}
 	}
 }
diff --git a/client/package.json b/client/package.json
index eae230b3..eb6466fe 100644
--- a/client/package.json
+++ b/client/package.json
@@ -6,19 +6,25 @@
 	"scripts": {
 		"build": "vite build",
 		"start": "npm run build && vite preview",
-		"dev": "vite"
+		"dev": "vite --host"
 	},
 	"dependencies": {
 		"@popperjs/core": "^2.11.8",
 		"axios": "^1.6.8",
 		"bootstrap": "^5.3.3",
 		"dotenv": "^16.4.5",
+		"is-mobile": "^4.0.0",
+		"konva": "^9.3.9",
 		"react": "^18.3.1",
 		"react-bootstrap": "^2.10.2",
 		"react-dom": "^18.3.1",
 		"react-icons": "^5.2.1",
 		"react-if": "^4.1.5",
+		"react-konva": "^18.2.10",
 		"react-toastify": "^10.0.5",
+		"socket.io-client": "^4.7.5",
+		"use-image": "^1.1.1",
+		"vite": "^5.2.11",
 		"wouter": "^3.1.2"
 	},
 	"devDependencies": {
@@ -27,7 +33,6 @@
 		"@types/react-dom": "^18.3.0",
 		"@vitejs/plugin-react-swc": "^3.6.0",
 		"sass": "^1.77.1",
-		"typescript": "^5.4.5",
-		"vite": "^5.2.11"
+		"typescript": "^5.4.5"
 	}
 }
diff --git a/client/src/app.tsx b/client/src/app.tsx
index 57a51957..60f5a279 100644
--- a/client/src/app.tsx
+++ b/client/src/app.tsx
@@ -1,32 +1,49 @@
 import { ToastContainer } from 'react-toastify';
-import { Switch, Route, Redirect, useLocation } from 'wouter';
+import { Switch, Route, useLocation } from 'wouter';
 import About from './pages/about/about';
 import Changepassword from './pages/changepassword/changepassword';
 import Forgetpassword from './pages/forgetpassword/forgetpassword';
 import GeneralFeed from './pages/general-feed/general-feed';
-import Home from './pages/home/home';
 import Login from './pages/login/login-component';
 import MyFeed from './pages/my-feed/my-feed';
 import Signup from './pages/signup/signup-component';
 import Test from './pages/test-page/test-page';
 import UserSettings from './pages/user-settings/user-settings';
 import Resetpassword from './pages/resetpassword/resetpassword';
+import ManageAccount from './pages/user-settings/options/manage-account';
+import Messages from './pages/messages/messages-component';
+import Policy from './pages/about/options/policy';
+import Terms from './pages/about/options/terms';
 import { useEffect, useState } from 'react';
-import { Auth } from './lib/auth';
+import { Auth, UserAuthContext } from './lib/auth';
+import Cursors from './components/cursor/cursor';
 
-import './index.css';
 import { Else, If, Then } from 'react-if';
+import { Loader } from './components/loader/loader';
+import PostPage from './pages/post-page/post-page';
+import UserPage from './pages/user-page/user-page';
+import ProfilePage from './pages/profile-page/profile-page';
+import { PlanetMap } from './pages/planet-map/planet-map';
+
+import './index.css';
+import Home from './pages/home/home';
+import PostDetailPage from './pages/post/post';
+import Planets from './pages/planets/planets-component';
+import PlanetFeed from './pages/planet-feed/planet-feed';
 
 export const App = () => {
-	const [authorized, setAuthorized] = useState<boolean | undefined>(undefined);
+	const [loading, setLoading] = useState(true);
+	const [authenticatedUser, setAuthenticatedUser] = useState<any>();
 	const [loc] = useLocation();
 
-	useEffect(() => {
-		Auth.resaveToken();
-	}, []);
+	useEffect(() => void Auth.resaveToken(), []);
 
 	useEffect(() => {
-		Auth.isAuthorized().then((v) => setAuthorized(v === true));
+		setLoading(true);
+		Auth.getAuthenticatedUser().then((user) => {
+			setAuthenticatedUser(user);
+			setLoading(false);
+		});
 	}, [loc]);
 
 	const commonRoutes = (
@@ -34,10 +51,13 @@ export const App = () => {
 			<Route path='/signup' component={Signup} />
 			<Route path='/login' component={Login} />
 			<Route path='/about' component={About} />
+			<Route path='/about/policy' component={Policy} />
+			<Route path='/about/terms' component={Terms} />
 			<Route path='/forgetpassword' component={Forgetpassword} />
 			<Route path='/resetpassword/:token'>{(params) => <Resetpassword token={params.token} />}</Route>
 			<Route path='/test' component={Test} />
-
+			<Route path='/planets' component={Planets} />
+			<Route path='/post/:id'>{(params) => <PostDetailPage id={params.id} />}</Route>
 			<Route>404 Not Found</Route>
 		</>
 	);
@@ -45,35 +65,42 @@ export const App = () => {
 	return (
 		<>
 			<ToastContainer />
+			<Cursors />
 
-			<If condition={authorized === true}>
+			<If condition={loading}>
 				<Then>
-					<Switch>
-						<Route path='/' component={Home} />
-						<Route path='/home' component={Home} />
-						<Route path='/changepassword' component={Changepassword} />
-						<Route path='/feed' component={GeneralFeed} />
-						<Route path='/myfeed' component={MyFeed} />
-						<Route path='/settings' component={UserSettings} />
-						{commonRoutes}
-					</Switch>
+					<Loader />
 				</Then>
 
 				<Else>
-					<If condition={authorized === false}>
+					<If condition={!authenticatedUser}>
 						<Then>
 							<Switch>
 								<Route path='/' component={Login} />
 								{commonRoutes}
-
-								<Route children={<Redirect href='/' />} />
 							</Switch>
 						</Then>
 
 						<Else>
-							<div className='w-100 h-100 d-flex flex-column align-items-center justify-content-center'>
-								<h1 className='display-2 '>Loading...</h1>
-							</div>
+							<UserAuthContext.Provider value={authenticatedUser}>
+								<Switch>
+									<Route path='/' component={PlanetMap} />
+									<Route path='/home' component={PlanetMap} />
+									<Route path='/home-list' component={Home} />
+									<Route path='/changepassword' component={Changepassword} />
+									<Route path='/feed' component={GeneralFeed} />
+									<Route path='/myfeed' component={MyFeed} />
+									<Route path='/post' component={PostPage} />
+									<Route path='/user/:id' component={UserPage} />
+									<Route path='/feed/:planetName/:id' component={PlanetFeed} />
+									<Route path='/profile' component={ProfilePage} />
+									<Route path='/settings' component={UserSettings} />
+									<Route path='/settings/manageAccount' component={ManageAccount} />
+									<Route path='/messages/:id' component={Messages} />
+
+									{commonRoutes}
+								</Switch>
+							</UserAuthContext.Provider>
 						</Else>
 					</If>
 				</Else>
diff --git a/client/src/assets/images/amongus-black.webp b/client/src/assets/images/amongus-black.webp
new file mode 100644
index 00000000..3332c523
Binary files /dev/null and b/client/src/assets/images/amongus-black.webp differ
diff --git a/client/src/assets/images/amongus-blue.webp b/client/src/assets/images/amongus-blue.webp
new file mode 100644
index 00000000..616d62d0
Binary files /dev/null and b/client/src/assets/images/amongus-blue.webp differ
diff --git a/client/src/assets/images/amongus-green.webp b/client/src/assets/images/amongus-green.webp
new file mode 100644
index 00000000..d4323ffb
Binary files /dev/null and b/client/src/assets/images/amongus-green.webp differ
diff --git a/client/src/assets/images/amongus-pink.webp b/client/src/assets/images/amongus-pink.webp
new file mode 100644
index 00000000..0c30a416
Binary files /dev/null and b/client/src/assets/images/amongus-pink.webp differ
diff --git a/client/src/assets/images/amongus-red.webp b/client/src/assets/images/amongus-red.webp
new file mode 100644
index 00000000..e97233cb
Binary files /dev/null and b/client/src/assets/images/amongus-red.webp differ
diff --git a/client/src/assets/images/amongus-white.webp b/client/src/assets/images/amongus-white.webp
new file mode 100644
index 00000000..e694791f
Binary files /dev/null and b/client/src/assets/images/amongus-white.webp differ
diff --git a/client/src/assets/images/amongus-yellow.webp b/client/src/assets/images/amongus-yellow.webp
new file mode 100644
index 00000000..f090ecfe
Binary files /dev/null and b/client/src/assets/images/amongus-yellow.webp differ
diff --git a/client/src/assets/images/icons8-cursor-38.png b/client/src/assets/images/icons8-cursor-38.png
new file mode 100644
index 00000000..7715a690
Binary files /dev/null and b/client/src/assets/images/icons8-cursor-38.png differ
diff --git a/client/src/components/Comment/Comment.module.css b/client/src/components/Comment/Comment.module.css
new file mode 100644
index 00000000..fe6a9945
--- /dev/null
+++ b/client/src/components/Comment/Comment.module.css
@@ -0,0 +1,102 @@
+.link {
+	color: inherit;
+	text-decoration: none;
+}
+
+.commentContainer {
+	font-family: TTOctosquares;
+	max-width: 750px;
+	width: 100%;
+	margin-top: 20px;
+	display: flex;
+	flex-direction: column;
+}
+
+.commentsList {
+	flex-grow: 1;
+}
+
+.commentForm {
+	display: flex;
+	flex-direction: column;
+	margin-top: 20px;
+}
+
+.commentTextArea {
+	width: 100%;
+	min-height: 50px;
+	padding: 10px;
+	font-size: 0.9rem;
+	/* Slightly smaller than the post text */
+	resize: vertical;
+	border: 1px solid #ccc;
+	border-radius: 5px;
+	margin-bottom: 10px;
+	font-family: TTOctosquares;
+}
+
+.commentButton {
+	width: fit-content;
+	align-self: flex-end;
+	padding: 5px 10px;
+	font-size: 1rem;
+	background-color: #007bff;
+	color: #fff;
+	border: none;
+	border-radius: 5px;
+	cursor: pointer;
+	font-family: TTOctosquares;
+}
+
+.postContainer {
+	border-radius: 5px;
+	padding: 10px;
+	margin-bottom: 10px;
+	font-size: 0.8rem;
+	/* Slightly smaller than the post text */
+	font-family: TTOctosquares;
+}
+
+.userContainer {
+	padding: 2px 8px;
+	margin: 2px 0px;
+	width: max-content;
+	text-align: left;
+	font-size: 0.8rem;
+	/* Slightly smaller than the post text */
+}
+
+.paraContainer {
+	padding: 10px;
+	padding-bottom: 5px;
+	margin: 2px 0px;
+	width: 100%;
+	text-align: left;
+	word-break: break-word;
+	font-size: 0.9rem;
+	/* Slightly smaller than the post text */
+}
+
+.postDate {
+	font-size: 0.6em;
+	color: var(--soft-shadow);
+}
+
+.iconsContainer {
+	display: flex;
+	font-size: 1.2rem;
+	/* Slightly smaller than the post icons */
+	gap: 0.75rem;
+}
+
+.iconsContainer button {
+	background-color: transparent;
+	padding: 5px;
+	width: auto;
+	box-shadow: none;
+	border: none;
+}
+
+.share {
+	margin-right: auto;
+}
\ No newline at end of file
diff --git a/client/src/components/Comment/Comment.tsx b/client/src/components/Comment/Comment.tsx
new file mode 100644
index 00000000..d6c224bb
--- /dev/null
+++ b/client/src/components/Comment/Comment.tsx
@@ -0,0 +1,240 @@
+import React, { useEffect, useState } from 'react';
+import { api } from '../../lib/axios';
+import styles from './Comment.module.css';
+import UIBox from '../UIBox/UIBox';
+import { FaRegHeart, FaHeart, FaRegBookmark, FaBookmark, FaRocketchat } from 'react-icons/fa';
+import { RiShareBoxLine } from 'react-icons/ri';
+import { Link } from 'wouter';
+
+interface CommentProps {
+	postId: string;
+}
+
+interface Comment {
+	_id: string;
+	authorId: string;
+	content: string;
+	createdAt: string;
+	userName: string;
+	repost: number;
+	like: number;
+	comment: number;
+	isSaved?: boolean;
+	isLiked?: boolean;
+}
+
+interface UserProp {
+	username: string;
+	userURL: string;
+	imageURL?: string;
+}
+
+const User = (props: UserProp): JSX.Element => {
+	return (
+		<UIBox
+			className={styles.userContainer}
+			curved
+			dark
+			content={
+				<Link href={'/user/' +props.userURL ?? '/'} className={styles.link}>
+					{props.username}
+				</Link>
+			}
+		/>
+	);
+};
+
+const Comment: React.FC<CommentProps> = ({ postId }) => {
+	const [comment, setComment] = useState('');
+	const [comments, setComments] = useState<Comment[]>([]);
+	const [page, setPage] = useState(1);
+	const [hasMore, setHasMore] = useState(true);
+	const [loading, setLoading] = useState(false);
+	const fetchComments = async (page: number) => {
+		setLoading(true);
+		try {
+			const response = await api.get(`/post/${postId}/comment`, {
+				params: { limit: 10, page },
+			});
+			if (response.data.success) {
+				const commentsWithStatus = await Promise.all(
+					response.data.value.map(async (comment: Comment) => {
+						const [savedRes, likedRes] = await Promise.all([
+							api.get(`/post/${comment._id}/save`),
+							api.get(`/post/${comment._id}/like`),
+						]);
+						return {
+							...comment,
+							isSaved: savedRes.data.success ? savedRes.data.value : false,
+							isLiked: likedRes.data.value,
+						};
+					})
+				);
+				setComments((prevComments) => [...prevComments, ...commentsWithStatus]);
+				setHasMore(commentsWithStatus.length === 10); // Assuming 10 is the limit
+			} else {
+				console.error(response.data.statusMessage);
+			}
+		} catch (error) {
+			console.error('Error fetching comments:', error);
+		} finally {
+			setLoading(false);
+		}
+	};
+
+	useEffect(() => {
+		fetchComments(page);
+	}, [page, postId]);
+
+	const handleCommentChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+		setComment(event.target.value);
+	};
+
+	const handleCommentSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+		event.preventDefault();
+		if (comment.trim()) {
+			try {
+				const response = await api.post(`/post/${postId}/comment`, { content: comment });
+				if (response.data.success) {
+					const newComment = response.data.value;
+					const [savedRes, likedRes] = await Promise.all([
+						api.get(`/post/${newComment._id}/save`),
+						api.get(`/post/${newComment._id}/like`),
+					]);
+					newComment.isSaved = savedRes.data.success ? savedRes.data.value : false;
+					newComment.isLiked = likedRes.data.value;
+					const updatedComments = [newComment, ...comments].sort(
+						(a: Comment, b: Comment) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+					);
+					setComments(updatedComments);
+					setComment('');
+				} else {
+					console.error(response.data.statusMessage);
+				}
+			} catch (error) {
+				console.error('Error posting comment:', error);
+			}
+		}
+	};
+
+	const handleBookmark = async (commentId: string, isSaved: boolean) => {
+		try {
+			if (isSaved) {
+				await api.delete(`/post/${commentId}/save`);
+			} else {
+				await api.post(`/post/${commentId}/save`);
+			}
+			setComments((prevComments) =>
+				prevComments.map((comment) =>
+					comment._id === commentId ? { ...comment, isSaved: !isSaved } : comment
+				)
+			);
+		} catch (error) {
+			console.error('Error updating save status:', error);
+		}
+	};
+
+	const handleLike = async (commentId: string, isLiked: boolean) => {
+		try {
+			if (isLiked) {
+				await api.delete(`/post/${commentId}/like`);
+				setComments((prevComments) =>
+					prevComments.map((comment) =>
+						comment._id === commentId ? { ...comment, like: comment.like - 1, isLiked: false } : comment
+					)
+				);
+			} else {
+				await api.post(`/post/${commentId}/like`);
+				setComments((prevComments) =>
+					prevComments.map((comment) =>
+						comment._id === commentId ? { ...comment, like: comment.like + 1, isLiked: true } : comment
+					)
+				);
+			}
+		} catch (error) {
+			console.error('Error updating like status:', error);
+		}
+	};
+
+	function formatDate(dateString: string): string {
+		const date = new Date(dateString);
+		const year = date.getFullYear();
+		const month = date.getMonth() + 1; // Months are zero-indexed
+		const day = date.getDate();
+		const hours = date.getHours();
+		const minutes = date.getMinutes();
+		const seconds = date.getSeconds();
+		return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
+	}
+
+	const loadMoreComments = () => {
+		if (hasMore && !loading) {
+			setPage((prevPage) => prevPage + 1);
+		}
+	};
+
+	return (
+		<div className={styles.commentContainer}>
+			<form onSubmit={handleCommentSubmit} className={styles.commentForm}>
+				<textarea
+					value={comment}
+					onChange={handleCommentChange}
+					className={styles.commentTextArea}
+					placeholder='Write a comment...'
+				/>
+				<button type='submit' className={styles.commentButton}>
+					Submit
+				</button>
+			</form>
+			<div className={styles.commentsList}>
+				{comments.map((comment) => (
+					<div key={comment._id} className={styles.postContainer}>
+						<User username={'@' + comment.userName} userURL={comment.authorId} />
+						<UIBox
+							className={styles.paraContainer}
+							curved
+							content={
+								<>
+									<Link href={comment._id} className={styles.link}>
+										<p>{comment.content}</p>
+										{comment.createdAt ? (
+											<p className={styles.postDate}>{formatDate(comment.createdAt)}</p>
+										) : undefined}
+									</Link>
+									<div className={styles.iconsContainer}>
+										<p>{comment.repost}</p>
+										<button className={styles.share}>
+											<RiShareBoxLine />
+										</button>
+										<button
+											className={styles.book}
+											onClick={() => handleBookmark(comment._id, comment.isSaved ?? false)}
+										>
+											{comment.isSaved ? <FaBookmark /> : <FaRegBookmark />}
+										</button>
+										<button className={styles.comment}>
+											<FaRocketchat />
+										</button>
+										<p>{comment.comment}</p>
+										<button onClick={() => handleLike(comment._id, comment.isLiked ?? false)} className={styles.like}>
+											{comment.isLiked ? <FaHeart /> : <FaRegHeart />}
+										</button>
+										<p>{comment.like}</p>
+									</div>
+								</>
+							}
+						/>
+					</div>
+				))}
+				{hasMore && (
+					<button onClick={loadMoreComments} className={styles.loadMoreButton}>
+						Load More Comments
+					</button>
+				)}
+			</div>
+		</div>
+	);
+};
+
+export default Comment;
+// Test git ingnore file
\ No newline at end of file
diff --git a/client/src/components/Header/Header.module.css b/client/src/components/Header/Header.module.css
index 16a41598..768d7349 100644
--- a/client/src/components/Header/Header.module.css
+++ b/client/src/components/Header/Header.module.css
@@ -14,4 +14,23 @@
     display: flex;
     justify-content: end;
     color: #2196F3 !important;
+}
+
+.logo-header {
+    width: 100%;
+    font-family: Bitsumishi;
+    padding-top: 10px;
+    padding-left: 10px;
+}
+
+@media screen and (max-width: 420px) {
+    .page-title {
+        font-size: 2em;
+    }
+}
+
+@media screen and (max-width: 350px) {
+    .page-title {
+        font-size: 1.6em;
+    }
 }
\ No newline at end of file
diff --git a/client/src/components/Header/Header.tsx b/client/src/components/Header/Header.tsx
index 30d49879..48fc67d3 100644
--- a/client/src/components/Header/Header.tsx
+++ b/client/src/components/Header/Header.tsx
@@ -4,23 +4,49 @@ import { IoArrowBackCircleOutline } from 'react-icons/io5';
 import Container from 'react-bootstrap/Container';
 import Navbar from 'react-bootstrap/Navbar';
 
+/**
+ * The props types for the Header.
+ */
 interface Props {
-	pageName: string
+	pageName?: string;
+	enableLogoHeader?: boolean;
 }
 
+/**
+ * Returns the customized header for the page with the provided properties.
+ *
+ * @param props the props for this header, as seen outlined in the interface.
+ * @param props.pageName (Optional) The name of the page as a string. Needed only if enableLogoHeader is false
+ * @param props.enableLogoHeader (Optional) If true, a header with just the website name will be given.
+ * @requires props.pageName if enableLogoHeader is false unless empty title is needed.
+ * @returns Returns the customized header for the page as a JSX.Element.
+ */
 const Header = (props: Props) => {
 	return (
-		<Navbar expand='lg' className={`${styles.headerContainer}`}>
-			<Container>
-				<Navbar.Text onClick={handlePageReturn}><IoArrowBackCircleOutline className={styles.returnIcon} /></Navbar.Text>
-                <Navbar.Text className={styles.pageTitle}>{props.pageName}</Navbar.Text>			
-			</Container>
-		</Navbar>
+		<>
+			{props.enableLogoHeader ? (
+				<div className={styles.logoHeader}>
+					<h1>sky.net</h1>
+				</div>
+			) : (
+				<Navbar expand='lg' className={`${styles.headerContainer}`}>
+					<Container>
+						<Navbar.Text onClick={handlePageReturn}>
+							<IoArrowBackCircleOutline className={styles.returnIcon} />
+						</Navbar.Text>
+						<Navbar.Text className={styles.pageTitle}>{props.pageName}</Navbar.Text>
+					</Container>
+				</Navbar>
+			)}
+		</>
 	);
 };
 
 export default Header;
 
+/**
+ * Redirects the window back to the previous page.
+ */
 function handlePageReturn() {
 	history.back();
-}
\ No newline at end of file
+}
diff --git a/client/src/components/Hotbar/Hotbar.module.css b/client/src/components/Hotbar/Hotbar.module.css
index 333e1cf2..56efe4c4 100644
--- a/client/src/components/Hotbar/Hotbar.module.css
+++ b/client/src/components/Hotbar/Hotbar.module.css
@@ -4,15 +4,16 @@
 }
 
 .nav-container li a {
-    margin-right: 80px;
-    margin-top: -14px;
-    min-width: 80px;
+    margin-right: 100px;
+    min-width: 90px;
     padding: 1px;
     text-decoration: none;
     text-align: center;
     flex-basis: 100%;
     color: #2196F3;
-    font-family: TTOctosquares;
+    font-family: Fjalla One;
+    font-weight: bold;
+    letter-spacing: 1px;
 }
 
 .nav-container {
@@ -83,18 +84,25 @@
 
 .menu-backdrop {
     position: absolute;
-    /*temporary fix for clear background*/
     background-color: transparent;
     z-index: 3;
     width: 110px;
     border-radius: 50%;
     padding: 50px;
     right: 50%;
-    top: 0px;
+    top: 0;
     transform: translate(50%);
 }
 
-.menu-icon, .close-icon, .menu-sub-icons {
+.nav-container li a p {
+    font-size: 11pt;
+}
+
+.menu-sub-icons {
+    font-size: 3em;
+}
+
+.menu-icon, .close-icon{
     font-size: 4em;
 }
 
@@ -102,7 +110,7 @@
     position: absolute;
     right: 50%;
     top: 0%;
-    width: 140px;
+    width: 150px;
     transform: translateX(-50%);
 }
 
@@ -156,24 +164,24 @@
 
 .back-drop-div {
     pointer-events: none;
-    background-color: rgba(255, 255, 255, 0.4);
+    
     position: absolute;
     right: 50%;
     bottom: 0%;
-    width: 400px;
-    height: 250px;
-    border-radius: 50% 50% 0 0;
-    transform: translateY(50%) translateX(52%);
-    backdrop-filter: blur(1px);
-    border: none;
-    box-shadow: 0px 0px 40px 40px rgba(255, 255, 255, 0.4);
+    width: 100vw;
+    height: 100vh;
+    transform: translateY(50%) translateX(50%);
+    background-color: rgba(255, 255, 255, 0.4);
+    
+    backdrop-filter: blur(10px);
+    mask: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 70%);
 
     opacity: 0;
-    transition: transform .7s, opacity .7s;
+    transition: transform .7s, opacity .3s;
 }
 
 .nav-container input:checked ~ .back-drop-div {
-    opacity: 1;
+    opacity: 1;    
 }
 
 .menu-label {
diff --git a/client/src/components/Hotbar/Hotbar.tsx b/client/src/components/Hotbar/Hotbar.tsx
index 88d4cda7..b23006ad 100644
--- a/client/src/components/Hotbar/Hotbar.tsx
+++ b/client/src/components/Hotbar/Hotbar.tsx
@@ -9,7 +9,8 @@ import { IoMenuSharp } from 'react-icons/io5';
 import { IoCloseCircleOutline } from 'react-icons/io5';
 import { IoIosAddCircle } from 'react-icons/io';
 import { MdFeed } from 'react-icons/md';
-import { AiFillMessage } from 'react-icons/ai';
+// import { AiFillMessage } from 'react-icons/ai';
+import { PiGearFill } from 'react-icons/pi';
 import { MdPeople } from 'react-icons/md';
 
 const Hotbar = () => {
@@ -32,7 +33,6 @@ const Hotbar = () => {
 			<div className={styles.navContainer}>
 				<div className={styles.nav}>
 					<div>
-						{/* <p className={`${styles.menuLabel}`}>menu - menu - menu</p> */}
 						<div className={`${styles.menuContainer}`}>
 							<label htmlFor='label'>
 								<IoMenuSharp id='menu-icon' className={`${styles.menuIcon} active`} />
@@ -41,29 +41,37 @@ const Hotbar = () => {
 						</div>
 						<input type='checkbox' id='label' defaultChecked={isChecked} onClick={toggleMenu} hidden />
 						<div className={styles.backDropDiv}></div>
-							<ul className={styles.submenu}>
+						<ul className={styles.submenu}>
 							<li>
-								<a href='/myfeed'>
-									<MdFeed className={`${styles.menuSubIcons}`} />
-									<p className='text-center'>FEED</p>
+								<a className='d-flex justify-content-center align-items-center' href='#FOLLOWERS'>
+									<div>
+										<MdPeople className={`${styles.menuSubIcons}`} />
+										<p className='text-center'>FOLLOWERS</p>
+									</div>
 								</a>
 							</li>
 							<li>
-								<a href='#POST'>
-									<IoIosAddCircle className={`${styles.menuSubIcons}`} />
-									<p className='text-center'>POST</p>
+								<a className='d-flex justify-content-center align-items-center' href='/myfeed'>
+									<div>
+										<MdFeed className={`${styles.menuSubIcons}`} />
+										<p className='text-center'>FEED</p>
+									</div>
 								</a>
 							</li>
 							<li>
-								<a href='#MESSAGE'>
-									<AiFillMessage className={`${styles.menuSubIcons}`} />
-									<p className='text-center'>MESSAGE</p>
+								<a className='d-flex justify-content-center align-items-center' href='/post'>
+									<div>
+										<IoIosAddCircle className={`${styles.menuSubIcons}`} />
+										<p className='text-center'>POST</p>
+									</div>
 								</a>
 							</li>
 							<li>
-								<a href='#FOLLOWERS'>
-									<MdPeople className={`${styles.menuSubIcons}`} />
-									<p className='text-center'>FOLLOWERS</p>
+								<a className='d-flex justify-content-center align-items-center' href='/settings'>
+									<div>
+										<PiGearFill className={`${styles.menuSubIcons}`} />
+										<p className='text-center'>SETTINGS</p>
+									</div>
 								</a>
 							</li>
 						</ul>
@@ -76,7 +84,7 @@ const Hotbar = () => {
 					<div className={`${styles.circle} ${styles.circleLeft}`}></div>
 					<div className={styles.bar}></div>
 					<div className={`${styles.circle} ${styles.circleRight}`}></div>
-					<a href="/settings">
+					<a href='/profile'>
 						<IoMdPerson className={`${styles.navIcon} ${styles.iconRight} me-2 mt-5`} />
 					</a>
 				</div>
diff --git a/client/src/components/ModalConfirmation/ModalConfirmation.module.css b/client/src/components/ModalConfirmation/ModalConfirmation.module.css
index a1c38195..3d18d8bb 100644
--- a/client/src/components/ModalConfirmation/ModalConfirmation.module.css
+++ b/client/src/components/ModalConfirmation/ModalConfirmation.module.css
@@ -1,5 +1,18 @@
+.modal > div {
+    border: 2px solid black;
+	box-shadow: 4px 5px 0px #000;
+    background-color: var(--signup-background);
+}
+
+.modal, .modal > div {
+    border-radius: 0;
+}
+
 .modal button {
-    box-shadow: none;
+    border-radius: 0;
+    border: 2px solid black;
+    box-shadow: 4px 5px 0px #000;
+    font-family: BabaPro;
 }
 
 .header-font {
@@ -7,11 +20,11 @@
     font-size: 2em;
 }
 
-.body-font {
+.modal-body {
     font-family: TTOctosquares;
     font-size: 14pt;
 }
 
-.footer-font {
+.modal-footer {
     font-family: BabaPro;
 }
\ No newline at end of file
diff --git a/client/src/components/ModalConfirmation/ModalConfirmation.tsx b/client/src/components/ModalConfirmation/ModalConfirmation.tsx
index f710f3c6..f964193a 100644
--- a/client/src/components/ModalConfirmation/ModalConfirmation.tsx
+++ b/client/src/components/ModalConfirmation/ModalConfirmation.tsx
@@ -4,39 +4,49 @@ import Modal from 'react-bootstrap/Modal';
 import Button from 'react-bootstrap/Button';
 
 /**
- *
+ * The props types for the Confirmation Modal.
  */
 interface Props {
-	title: string;
 	header?: JSX.Element;
+	title?: string;
 	body: JSX.Element;
-	footer?: JSX.Element;
 	disableFooter: boolean;
+	footer?: JSX.Element;
 	show: boolean;
-	onHide: () => void;
+	onHide?: () => void;
 	onContinue?: any;
 }
 
 /**
+ * Creates a customized confirmation modal based upon given the properties.
  *
- * @param props
- * @returns
+ * @param props the props for this modal as seen outlined in the interface.
+ * @param props.header (Optional) Header of the modal as a JSX.Element. A default header that contians the title is provided if none is given.
+ * @param props.title (Optional) Title of the modal as a string. Recommended to define if no header is provided.
+ * @param props.body Body of the modal as a JSX.Element.
+ * @param props.disableFooter Hides the default footer if true. A footer should be provided in the next prop.
+ * @param props.footer Footer of the modal as a JSX.Element. A default footer will be provided if none is given.
+ * @param show Boolean variable which dictates if the modal should appear. Changing this variable state must be handled externally.
+ * @param props.onHide The function of type () => void that hides the modal.
+ * @param props.onContinue (Optional) The function that initiates when the continue btn is pressed in the default footer.
+ * @example See user-settings/options/change-password-modal.tsx
+ * @returns The customized modal as a JSX.Element
  */
 const ModalConfirmation = (props: Props) => {
 	return (
 		<>
-			<Modal className={`${styles.modal} p-2`} show={props.show} onHide={props.onHide} centered>
+			<Modal dialogClassName={`${styles.modal} p-2`} show={props.show} onHide={props.onHide} centered>
 				{!props.header ? (
 					<Modal.Header>
-						<Modal.Title className={`${styles.headerFont} w-100 text-center`}>{props.title}</Modal.Title>
+						<Modal.Title className={`${styles.headerFont} w-100 text-center`}>{props.title ? props.title : 'define title prop'}</Modal.Title>
 					</Modal.Header>
 				) : (
 					<div className={`${styles.headerFont} w-100 text-center`}>{props.header}</div>
 				)}
-				<Modal.Body className={`${styles.bodyFont} w-100 text-center`}>{props.body}</Modal.Body>
+				<Modal.Body className={`${styles.modalBody} w-100 text-center`}>{props.body}</Modal.Body>
 				{!props.disableFooter ? (
 					!props.footer ? (
-						<Modal.Footer className={styles.footerFont}>
+						<Modal.Footer className={styles.modalFooter}>
 							<div className='w-100 d-flex justify-content-center'>
 								<Button className='me-3' variant='secondary' onClick={props.onHide}>
 									Close
@@ -47,7 +57,7 @@ const ModalConfirmation = (props: Props) => {
 							</div>
 						</Modal.Footer>
 					) : (
-						<div className={`${styles.footerFont} p-4`}>{props.footer}</div>
+						<div className={`${styles.modalFooter} p-4`}>{props.footer}</div>
 					)
 				) : (
 					<></>
diff --git a/client/src/components/Page/Page.tsx b/client/src/components/Page/Page.tsx
index aa4942d0..57dd0056 100644
--- a/client/src/components/Page/Page.tsx
+++ b/client/src/components/Page/Page.tsx
@@ -5,6 +5,7 @@ import Hotbar from '..//Hotbar/Hotbar';
 
 interface PageProp {
 	content: JSX.Element | JSX.Element[];
+	logoHeader?: boolean;
 	pageName?: string;
 	noHeader?: boolean;
 }
@@ -15,6 +16,7 @@ interface PageProp {
  * @param props.pageName string - (Optional) Name of the page
  * @param props.content JSX.Element | JSX.Element[] - Content that will be added in the middle
  * @param props.noHeader boolean - (Optional) Takes off the header
+ * @param props.logoHeader boolean - (Optional) Gives a header with only website name if true. If false give regular header
  * @returns JSX.Element
  */
 const Page = (props: PageProp) => {
@@ -27,7 +29,7 @@ const Page = (props: PageProp) => {
 				<></>
 			) : (
 				<div className={styles.header}>
-					<Header pageName={props.pageName ? props.pageName : ''} />
+					<Header pageName={props.pageName ? props.pageName : ''} enableLogoHeader={props.logoHeader} />
 				</div>
 			)}
 			<div className={styles.content}>
diff --git a/client/src/components/Post/Post.module.css b/client/src/components/Post/Post.module.css
index e072d210..fbc4abc9 100644
--- a/client/src/components/Post/Post.module.css
+++ b/client/src/components/Post/Post.module.css
@@ -10,27 +10,18 @@
 }
 
 .user-container {
-	background-color: #000;
-	color: white;
 	padding: 2px 8px;
-	border-radius: 10px;
 	margin: 2px 0px;
 	width: max-content;
-	box-shadow: 4px 5px 0px var(--soft-shadow);
 	text-align: left;
 	font-size: 1rem;
 }
 
 .para-container {
-	background: var(--signup-background);
-	color: #000;
 	padding: 10px;
 	padding-bottom: 5px;
-	border-radius: 10px;
 	margin: 2px 0px;
 	width: 100%;
-	border: 2px solid var(--soft-shadow);
-	box-shadow: 4px 5px 0px var(--soft-shadow);
 	text-align: left;
 	word-break: break-word;
 	font-size: 1.1rem;
diff --git a/client/src/components/Post/Post.tsx b/client/src/components/Post/Post.tsx
index 025f64de..389c5262 100644
--- a/client/src/components/Post/Post.tsx
+++ b/client/src/components/Post/Post.tsx
@@ -1,8 +1,9 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import styles from './Post.module.css';
 
 import { Container } from 'react-bootstrap';
+import UIBox from '../UIBox/UIBox';
 
 // Icons
 import { FaRegHeart } from 'react-icons/fa'; //<FaRegHeart />	//Empty heart
@@ -12,18 +13,30 @@ import { FaRegBookmark } from 'react-icons/fa'; //<FaRegBookmark />	//Empty book
 import { FaBookmark } from 'react-icons/fa'; //<FaBookmark />	//Filled bookmark
 import { FaRocketchat } from 'react-icons/fa'; //<FaRocketchat />
 import { Link } from 'wouter';
+import { api } from '../../lib/axios';
+import { toast } from 'react-toastify';
 
 interface PostProp {
 	username: string;
-	userURL: string;
-	text: string;
-	postURL: string;
+	authorId: string;
+	content: string;
+	postId: string;
+	likeCount?: number;
+	commentCount?: number;
+	repostCount?: number;
 	createdAt?: Date;
+	location?: {
+		planetId: string;
+		latitude: number;
+		longitude: number;
+		_id: string;
+	};
+	// media?: Array<Object>;
 }
 
 interface UserProp {
 	username: string;
-	userURL: string;
+	userId: string;
 	imageURL?: string;
 }
 
@@ -31,17 +44,22 @@ interface UserProp {
  * Component representing the user part of the post (image and username).
  *
  * @param props.username - Username of the author of the post (got from the Post's props).
- * @param props.imageURL - (TODO) Will represent the user's profile pictures as an URL or image file.
- * @param props.userURL - (TODO) Will link to the user's profile page.
+ * @param props.userId - Links to the user's profile page.
+ * @param props.imageURL - (TODO) (Optional) Will represent the user's profile pictures as an URL or image file.
  */
 const User = (props: UserProp): JSX.Element => {
 	return (
 		<>
-			<Container className={styles.userContainer}>
-				<Link href={props.userURL ?? '/'} className={styles.link}>
-					{props.username}
-				</Link>
-			</Container>
+			<UIBox
+				className={styles.userContainer}
+				curved
+				dark
+				content={
+					<Link href={'/user/' + props.userId ?? '/'} className={styles.link}>
+						{props.username}
+					</Link>
+				}
+			/>
 		</>
 	);
 };
@@ -49,52 +67,127 @@ const User = (props: UserProp): JSX.Element => {
 /**
  * Post component representing the thumbnail post of an user.
  *
+ * @param props.username string - Username of the author of the post.
+ * @param props.authorId string - ID of the author of the post.
+ * @param props.content string - Text of the post.
+ * @param props.postId string - Id of the post in the database.
+ * @param props.likeCount number - Number of likes of the post.
+ * @param props.commentCount number - Number of comments of the post.
+ * @param props.repostCount number - Number of reposts of the post.
+ * @param props.createdAt Date - (optional) Date in which the post was created.
+ * @param props.Location LocationOject - Location in which the post was created. (planetId: string, latitude: number, longitude: number, _id: string)
  * @param props.username string - Username of the author of the post
  * @param props.text string - Text of the post
- * @param props.postURL string - URL of the complete version of the post with comments and more information
+ * @param props.postId string - URL of the complete version of the post with comments and more information
  * @param props.createdAt Date - (optional) Date in which the post was created
  */
 const Post = (props: PostProp): JSX.Element => {
-	const [bookmarked, setBookmarked] = useState(false);
-	const [liked, setLiked] = useState(false);
-
 	function onShare() {}
 
-	function onBookmark() {
-		setBookmarked(!bookmarked);
-	}
-
 	function onComment() {}
 
-	function onLike() {
-		setLiked(!liked);
-	}
+	const [saved, setSaved] = useState(false);
+
+	useEffect(() => {
+		const fetchSaveStatus = async () => {
+			try {
+				const response = await api.get(`/post/${props.postId}/save`);
+				if (response.data.success) {
+					setSaved(response.data.value);
+				}
+			} catch (error) {
+				console.error('Error fetching save status:', error);
+			}
+		};
+
+		fetchSaveStatus();
+	}, []);
+
+	const onBookmark = async () => {
+		try {
+			if (saved) {
+				await api.delete(`/post/${props.postId}/save`);
+				setSaved(false);
+			} else {
+				const response = await api.post(`/post/${props.postId}/save`);
+				if (response.data.success) {
+					setSaved(true);
+				}
+			}
+		} catch (error) {
+			console.error('Error updating save status:', error);
+		}
+	};
+
+	const [liked, setLiked] = useState(false);
+	const [likeCount, setLikeCount] = useState(props.likeCount ?? 0);
+	useEffect(() => {
+		const fetchLikeStatus = async () => {
+			try {
+				const response = await api.get(`/post/${props.postId}/like`);
+				setLiked(response.data.value);
+				console.log(response.data);
+			} catch (error) {
+				console.error('Error fetching like status:', error);
+			}
+		};
+
+		fetchLikeStatus();
+	}, []);
+
+	const onLike = async () => {
+		try {
+			if (liked) {
+				await api.delete(`/post/${props.postId}/like`);
+				setLikeCount(likeCount - 1);
+				setLiked(false);
+			} else {
+				const response = await api.post(`/post/${props.postId}/like`);
+				if (response.data.success) {
+					setLikeCount(likeCount + 1);
+					setLiked(true);
+				}
+			}
+		} catch (error) {
+			console.error('Error updating like status:', error);
+		}
+	};
 
 	return (
 		<div className={styles.postContainer}>
-			<User username={props.username} userURL={props.userURL} />
-			<div className={styles.paraContainer}>
-				<Link href={props.postURL} className={styles.link}>
-					<p>{props.text}</p>
-					{props.createdAt ? (
-						<p className={styles.postDate}>{props.createdAt.toLocaleDateString()}</p>
-					) : undefined}
-				</Link>
-				<div className={styles.iconsContainer}>
-					<button className={styles.share}>
-						<RiShareBoxLine />
-					</button>
-					<button className={styles.book}>
-						{bookmarked ? <FaBookmark onClick={onBookmark} /> : <FaRegBookmark onClick={onBookmark} />}
-					</button>
-					<button className={styles.comment}>
-						<FaRocketchat />
-					</button>
-					<button onClick={onLike} className={styles.like}>
-						{liked ? <FaHeart /> : <FaRegHeart />}
-					</button>
-				</div>
-			</div>
+			<User username={'@' + props.username} userId={props.authorId} />
+			<UIBox
+				className={styles.paraContainer}
+				curved
+				content={
+					<>
+						<Link href={'/post/' + props.postId} className={styles.link}>
+							<p>{props.content}</p>
+							{props.createdAt ? (
+								<p className={styles.postDate}>{props.createdAt.toLocaleString()}</p>
+							) : undefined}
+						</Link>
+						<div className={styles.iconsContainer}>
+							<p>{props.repostCount}</p>
+							<button className={styles.share}>
+								<RiShareBoxLine />
+							</button>
+							<button className={styles.book}>
+								{saved ? <FaBookmark onClick={onBookmark} /> : <FaRegBookmark onClick={onBookmark} />}
+							</button>
+							<button className={styles.comment}>
+								<FaRocketchat />
+							</button>
+							<p>{props.commentCount}</p>
+
+							<button onClick={onLike} className={styles.like}>
+								{liked ? <FaHeart /> : <FaRegHeart />}
+							</button>
+							<p>{likeCount}</p>
+						</div>
+					</>
+				}
+			/>
 		</div>
 	);
 };
diff --git a/client/src/components/Profile/Profile.module.css b/client/src/components/Profile/Profile.module.css
new file mode 100644
index 00000000..ecf6f80b
--- /dev/null
+++ b/client/src/components/Profile/Profile.module.css
@@ -0,0 +1,49 @@
+.profile-box {
+	width: 100%;
+}
+
+.profile-info-box {
+	font-family: TTOctosquares;
+	width: 100%;
+	color: #2196f3;
+	background-color: #242c38;
+	border-color: #2196f3;
+	box-shadow: 0px 0px 0px #2196f3;
+	padding: 8px;
+}
+
+.username {
+	color: #fff;
+}
+
+h6 {
+	margin-bottom: 0.5rem;
+}
+
+.last-text {
+	margin: 0;
+}
+
+button {
+	border: none;
+	background-color: transparent;
+	padding: 6px;
+}
+
+.bottomButtons {
+	display: flex;
+	width: 100%;
+	justify-content: right;
+}
+
+.buttons {
+	background-color: #242c38;
+	border: 2px solid #2196f3;
+	box-shadow: 4px 5px 0px #355a79;
+}
+
+.line {
+	background-color: #242c38;
+	height: 3px;
+	width: 100vw;
+}
diff --git a/client/src/components/Profile/Profile.tsx b/client/src/components/Profile/Profile.tsx
new file mode 100644
index 00000000..544a9817
--- /dev/null
+++ b/client/src/components/Profile/Profile.tsx
@@ -0,0 +1,72 @@
+import styles from './Profile.module.css';
+
+import UIBox from '../UIBox/UIBox';
+import { Link } from 'wouter';
+
+interface ProfileProp {
+	userId: string;
+	username: string;
+	description?: string;
+	follower: number;
+	following: number;
+	postCount: number;
+	outsideUser?: boolean;
+	className?: string;
+}
+
+/**
+ * Post component representing the thumbnail post of an user.
+ *
+ * @param props.username string - Username of the author of the post
+ * @param props.text string - Text of the post
+ * @param props.postURL string - URL of the complete version of the post with comments and more information
+ * @param props.createdAt Date - (optional) Date in which the post was created
+ */
+const Profile = (props: ProfileProp): JSX.Element => {
+	return (
+		<>
+			<div className={styles.profileBox}>
+				<UIBox
+					content={
+						<>
+							<h3 className={styles.username}>@{props.username}</h3>
+							{props.description ? <p>{props.description}</p> : <></>}
+							<h6>{props.follower} followers</h6>
+							<h6>{props.following} following</h6>
+							<h6 className={styles.lastText}>{props.postCount} posts</h6>
+						</>
+					}
+					className={styles.profileInfoBox}
+					curved
+				/>
+				<div className={styles.bottomButtons}>
+					<button>
+						<Link href={props.outsideUser ? '/#FOLLOW/' + props.userId : '/#EDIT_PROFILE'}>
+							<UIBox
+								className={styles.edit + ' ' + styles.buttons}
+								content={props.outsideUser ? 'Follow' : 'Edit profile'}
+								curved
+								clickable
+								dark
+							/>
+						</Link>
+					</button>
+					<button>
+						<Link href={props.outsideUser ? '/messages/' + props.userId : '/settings'}>
+							<UIBox
+								className={styles.settings + ' ' + styles.buttons}
+								content={props.outsideUser ? 'Message' : '*'}
+								curved
+								clickable
+								dark
+							/>
+						</Link>
+					</button>
+				</div>
+			</div>
+			<div className={styles.line}></div>
+		</>
+	);
+};
+
+export default Profile;
diff --git a/client/src/components/UIBox/UIBox.module.css b/client/src/components/UIBox/UIBox.module.css
new file mode 100644
index 00000000..5f34d01d
--- /dev/null
+++ b/client/src/components/UIBox/UIBox.module.css
@@ -0,0 +1,28 @@
+.curved {
+	border-radius: 10px;
+}
+
+.light-theme-curved {
+	background-color: var(--signup-background);
+	color: #000;
+	border: 2px solid var(--soft-shadow);
+	box-shadow: 4px 5px 0px var(--soft-shadow);
+}
+
+.light-theme-square {
+	background-color: var(--signup-background);
+	color: #000;
+	border: 2px solid #000;
+	box-shadow: 4px 5px 0px #000;
+}
+
+.dark-theme {
+	background-color: #000;
+	color: #fff;
+	box-shadow: 4px 5px 0px var(--soft-shadow);
+}
+
+.clickable:active {
+	box-shadow: 4px 4px var(--signup-button-active) 5;
+	transform: translateY(5px);
+}
diff --git a/client/src/components/UIBox/UIBox.tsx b/client/src/components/UIBox/UIBox.tsx
new file mode 100644
index 00000000..a09feacc
--- /dev/null
+++ b/client/src/components/UIBox/UIBox.tsx
@@ -0,0 +1,38 @@
+import styles from './UIBox.module.css';
+import { Container } from 'react-bootstrap';
+
+interface UIBoxProp {
+	content: JSX.Element | string;
+	curved?: boolean;
+	dark?: boolean;
+	clickable?: boolean;
+	className?: string;
+}
+
+/**
+ * Component representing a general interface box.
+ *
+ * @param props.content - Content inside the UIBox.
+ * @param props.curved - (Optional) Applies a curved border instead of a square one.
+ * @param props.dark - (Optional) Applies a dark theme to the interface box.
+ * @param props.clickable - (Optional) Creates a click animation.
+ * @param props.className - (Optional) Extra className for the component.
+ */
+const UIBox = (props: UIBoxProp): JSX.Element => {
+	let classes = props.className ?? ' ';
+	classes += props.curved ? ' ' + styles.curved : ' ';
+	classes += props.dark
+		? ' ' + styles.darkTheme + ' '
+		: props.curved
+		? ' ' + styles.lightThemeCurved + ' '
+		: ' ' + styles.lightThemeSquare + ' ';
+	classes += props.clickable ? styles.clickable : ' ';
+
+	return (
+		<>
+			<Container className={classes}>{props.content}</Container>
+		</>
+	);
+};
+
+export default UIBox;
diff --git a/client/src/components/cursor/cursor.module.css b/client/src/components/cursor/cursor.module.css
new file mode 100644
index 00000000..971eb63a
--- /dev/null
+++ b/client/src/components/cursor/cursor.module.css
@@ -0,0 +1,59 @@
+  #cursor {
+    width: 40px;
+    height: 40px;
+    border: 1px solid green;
+    border-radius: 50%;
+    position: absolute;
+    transition-duration: 200ms;
+    transition-timing-function: ease-out;
+    animation: cursorAnim 0.5s infinite alternate;
+  }
+
+  #cursor::after {
+    content: "";
+    width: 40px;
+    height: 40px;
+    border: 8px solid green;
+    border-radius: 50%;
+    position: absolute;
+    opacity: 0.5;
+    left: -8px;
+    top: -8px;
+    animation: cursorAnim2 0.5s infinite alternate;
+  }
+
+  .expand {
+    animation: cursorAnim3 0.5s forwards;
+    border: 1px solid greenyellow;
+  }
+
+  @keyframes cursorAnim {
+    from {
+      transform: scale(1);
+    }
+    to {
+      transform: scale(0.6);
+    }
+  }
+
+  @keyframes cursorAnim2 {
+    from {
+      transform: scale(1);
+    }
+    to {
+      transform: scale(0.4);
+    }
+  }
+
+  @keyframes cursorAnim3 {
+    0% {
+      transform: scale(1);
+    }
+    50% {
+      transform: scale(2);
+    }
+    100% {
+      transform: scale(1);
+      /* opacity: 0; */
+    }
+  }
\ No newline at end of file
diff --git a/client/src/components/cursor/cursor.tsx b/client/src/components/cursor/cursor.tsx
new file mode 100644
index 00000000..93af2cf1
--- /dev/null
+++ b/client/src/components/cursor/cursor.tsx
@@ -0,0 +1,21 @@
+import styles from './cursor.module.css';
+
+const Cursors = () => {
+	const cursor = document.querySelector('.cursor');
+	document.addEventListener('mousemove', (e) => {
+		cursor?.setAttribute('style', 'top: ' + (e.pageY - 14) + 'px; left: ' + (e.pageX - 10) + 'px;');
+	});
+	document.addEventListener('click', () => {
+		cursor?.classList.add('expand');
+		setTimeout(() => {
+			cursor?.classList.remove('expand');
+		}, 500);
+	});
+	return (
+		<>
+			<div id='cursor' className={styles.cursor}></div>
+		</>
+	);
+};
+
+export default Cursors;
diff --git a/client/src/components/google-auth-btn/google-auth-btn.tsx b/client/src/components/google-auth-btn/google-auth-btn.tsx
new file mode 100644
index 00000000..5ba382a0
--- /dev/null
+++ b/client/src/components/google-auth-btn/google-auth-btn.tsx
@@ -0,0 +1,43 @@
+import { useEffect, useState } from 'react';
+import { api } from '../../lib/axios';
+import { FcGoogle } from 'react-icons/fc';
+
+interface Props {
+	disabled?: boolean;
+	text?: string;
+	className?: string;
+}
+
+export const GoogleAuthButton = (props: Props) => {
+	const [url, setUrl] = useState('');
+	const [disabled, setDisabled] = useState(true);
+
+	useEffect(() => {
+		if (props.disabled !== undefined) {
+			setDisabled(props.disabled);
+		}
+	}, [props.disabled]);
+
+	useEffect(() => {
+		setDisabled(true);
+		api.post('/user/oauth/google').then((res) => {
+			const url = res.data?.value;
+			if (url) setUrl(url);
+			setDisabled(false);
+		});
+	}, []);
+
+	function onClick() {
+		location.assign(url);
+	}
+
+	return (
+		<button
+			onClick={() => onClick()}
+			disabled={disabled}
+			className={`${props.className} w-100 d-flex gap-2 align-items-center justify-content-center`}>
+			<FcGoogle />
+			{props.text ?? 'Authenticate with Google'}
+		</button>
+	);
+};
diff --git a/client/src/components/loader/loader.module.css b/client/src/components/loader/loader.module.css
new file mode 100644
index 00000000..1abebf94
--- /dev/null
+++ b/client/src/components/loader/loader.module.css
@@ -0,0 +1,56 @@
+.loading-text {
+	font-family: Bitsumishi;
+	text-shadow: #fc0 1px 0 10px;
+	animation: text-shadow-pulse 1s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
+}
+
+.loading-text::before {
+	content: '';
+	transform: translateX(-1.5rem);
+	animation: loading-indicators-left 1.25s infinite;
+}
+
+.loading-text::after {
+	content: '';
+	text-shadow: #fc0 1px 0 10px;
+	transform: translateX(1.5rem);
+	animation: loading-indicators-right 1.25s infinite;
+}
+
+@keyframes text-shadow-pulse {
+	0% {
+		text-shadow: white 0 0 5px;
+	}
+
+	100% {
+		text-shadow: white 0px 0px 30px;
+	}
+}
+
+@keyframes loading-indicators-left {
+	25% {
+		content: '< ';
+	}
+
+	50% {
+		content: '<< ';
+	}
+
+	75% {
+		content: '<<< ';
+	}
+}
+
+@keyframes loading-indicators-right {
+	25% {
+		content: ' >';
+	}
+
+	50% {
+		content: ' >>';
+	}
+
+	75% {
+		content: ' >>>';
+	}
+}
diff --git a/client/src/components/loader/loader.tsx b/client/src/components/loader/loader.tsx
new file mode 100644
index 00000000..91c4d4fa
--- /dev/null
+++ b/client/src/components/loader/loader.tsx
@@ -0,0 +1,19 @@
+import styles from './loader.module.css';
+import { Scrambler } from '../scrambler/scrambler';
+
+export const Loader = () => {
+	const text = 'Loading';
+
+	return (
+		<div
+			className={`position-absolute w-100 h-100 bg-black d-flex flex-column align-items-center justify-content-center z-3`}>
+			<div
+				className={` ${styles.loadingText} d-flex align-items-center justify-content-center position-relative display-3 text-white`}>
+				<span className='opacity-0'>{text}</span>
+				<span className='position-absolute'>
+					<Scrambler text={text} />
+				</span>
+			</div>
+		</div>
+	);
+};
diff --git a/client/src/components/loader/small-loader.module.css b/client/src/components/loader/small-loader.module.css
new file mode 100644
index 00000000..0e3ad9e2
--- /dev/null
+++ b/client/src/components/loader/small-loader.module.css
@@ -0,0 +1,28 @@
+.loader {
+	position: relative;
+	font-family: Bitsumishi;
+}
+
+.loader::before {
+	content: '[';
+	transform: translateX(-0.75rem);
+	animation: back-and-forth-left 1s infinite;
+}
+
+.loader::after {
+	content: ']';
+	transform: translateX(0.75rem);
+	animation: back-and-forth-right 1s infinite;
+}
+
+@keyframes back-and-forth-left {
+	50% {
+		transform: translateX(-1rem);
+	}
+}
+
+@keyframes back-and-forth-right {
+	50% {
+		transform: translateX(1rem);
+	}
+}
diff --git a/client/src/components/loader/small-loader.tsx b/client/src/components/loader/small-loader.tsx
new file mode 100644
index 00000000..83d13760
--- /dev/null
+++ b/client/src/components/loader/small-loader.tsx
@@ -0,0 +1,16 @@
+import { Scrambler } from '../scrambler/scrambler';
+import styles from './small-loader.module.css';
+
+export const SmallLoader = () => {
+	const text = 'Loading';
+
+	return (
+		<span
+			className={`${styles.loader} w-100 h-100 text-black d-flex align-items-center justify-content-center position-relative`}>
+			<span className='opacity-0'>{text}</span>
+			<span className='position-absolute'>
+				<Scrambler text={text} />
+			</span>
+		</span>
+	);
+};
diff --git a/client/src/components/scrambler/scrambler.tsx b/client/src/components/scrambler/scrambler.tsx
new file mode 100644
index 00000000..fb7c77d8
--- /dev/null
+++ b/client/src/components/scrambler/scrambler.tsx
@@ -0,0 +1,33 @@
+import { useEffect, useState } from 'react';
+
+interface Props {
+	text: string;
+	scrambleSpeed?: number;
+	scrambleDelay?: number;
+}
+
+const scrambleChars = ['@', '#', '$', '%', '-', '&', '*', '_'];
+
+export const Scrambler = (props: Props) => {
+	const [text, setText] = useState(props.text);
+
+	useEffect(() => {
+		const scrambleSpeed = props.scrambleSpeed ?? 50;
+		const allScrambleLength = scrambleSpeed * props.text.length;
+
+		const interval = setInterval(async () => {
+			for (let i = 0; i < props.text.length; i++) {
+				const replacement = scrambleChars[Math.floor(Math.random() * scrambleChars.length)];
+				if (i === 0) setText(replacement + props.text.slice(1));
+				else setText(props.text.slice(0, i) + replacement + props.text.slice(i + 1));
+
+				await new Promise((res) => setTimeout(res, scrambleSpeed));
+				setText(props.text);
+			}
+		}, allScrambleLength + (props.scrambleDelay ?? 1000));
+
+		return () => clearInterval(interval);
+	}, [props.scrambleSpeed, props.scrambleDelay, props.text]);
+
+	return <span>{text}</span>;
+};
diff --git a/client/src/environment.ts b/client/src/environment.ts
new file mode 100644
index 00000000..260a7d24
--- /dev/null
+++ b/client/src/environment.ts
@@ -0,0 +1,86 @@
+import { isMobile as mobileCheck } from 'is-mobile';
+
+const LOCAL_DEV = 'development_local';
+const LOCAL_PROD = 'production_local';
+const DEV = 'development';
+const PROD = 'production';
+
+/**
+ * The environment that the client is currently running in.
+ */
+export const NODE_ENV = import.meta.env.VITE_NODE_ENV;
+if (NODE_ENV === undefined) throw 'You must specify a NODE_ENV in the client environment variables.';
+
+/**
+ * The port that the client is currently running on.
+ */
+export const CLIENT_PORT = import.meta.env.VITE_PORT;
+if (!CLIENT_PORT) throw 'You must specify a PORT in the client environment variables.';
+
+/**
+ * Returns whether the client is running in development mode.
+ */
+export const isDev = () => NODE_ENV === LOCAL_DEV || NODE_ENV === DEV;
+
+/**
+ * Returns whether the client is running in production mode.
+ */
+export const isProd = () => NODE_ENV === LOCAL_PROD || NODE_ENV === PROD;
+
+/**
+ * Returns whether the client is running in local mode.
+ */
+export const isLocal = () => NODE_ENV === LOCAL_DEV || NODE_ENV === LOCAL_PROD;
+
+/**
+ * Returns the hostname of the client based on
+ * the NODE_ENV specified in the environment variables.
+ */
+export const getClientHost = () => {
+	switch (NODE_ENV) {
+		case LOCAL_DEV:
+			return `http://127.0.0.1:${CLIENT_PORT}`;
+		case LOCAL_PROD:
+			return `http://127.0.0.1:${CLIENT_PORT}`;
+		case DEV:
+			return 'https://dev.skynetwork.app';
+		case PROD:
+			return 'https://skynetwork.app';
+		default:
+			throw 'Invalid NODE_ENV found in your environment variables!';
+	}
+};
+
+/**
+ * Returns the hostname of the server based on
+ * the NODE_ENV specified in the environment variables.
+ */
+export const getServerHost = () => {
+	let localServerPort = import.meta.env.VITE_SERVER_PORT;
+	if (isLocal() && !localServerPort) {
+		console.warn(
+			'There is no server port specified, but you are running locally, please set SERVER_PORT to the port your backend is running on. (Using 3000 by default)',
+		);
+
+		localServerPort = '3000';
+	}
+
+	switch (NODE_ENV) {
+		case LOCAL_DEV:
+			return `http://127.0.0.1:${localServerPort}`;
+		case LOCAL_PROD:
+			return `http://127.0.0.1:${localServerPort}`;
+		case DEV:
+			return 'https://api.dev.skynetwork.app';
+		case PROD:
+			return 'https://api.skynetwork.app';
+		default:
+			throw 'Invalid NODE_ENV found in your environment variables!';
+	}
+};
+
+/**
+ * Whether the client is running on a mobile device, this
+ * could include a tablet.
+ */
+export const isMobile = mobileCheck({ tablet: true });
diff --git a/client/src/index.css b/client/src/index.css
index 8cbb32e2..ba523db2 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -7,6 +7,9 @@
 	--login-input-focus: #ebe2c2;
 	--login-button-active: #ebe2c2;
 
+    --planets-background: black;
+    --planets-sun-background: yellow;
+
 	--soft-shadow: #b8b199;
 }
 
@@ -31,6 +34,7 @@ body {
 	/*If this margin bottom is doing something else bad please talk to sam. Thank you!*/
 	margin-bottom: 20px;
 	background-color: aliceblue;
+    cursor: url("./assets/images/icons8-cursor-38.png"), auto;
 }
 
 @font-face {
diff --git a/client/src/lib/auth.ts b/client/src/lib/auth.ts
index d6bc0e02..c09b58d1 100644
--- a/client/src/lib/auth.ts
+++ b/client/src/lib/auth.ts
@@ -1,4 +1,8 @@
+import { HttpStatusCode } from 'axios';
 import { api } from './axios';
+import { createContext } from 'react';
+
+export const UserAuthContext = createContext<any>(undefined);
 
 /**
  * Utility namespace for JWT token authorization.
@@ -58,14 +62,46 @@ export namespace Auth {
 		return true;
 	}
 
+	/**
+	 * Queries the API for a new token, with the given search paramters.
+	 * This can be used to obtain a token when logging in from a third party
+	 * authentication provider.
+	 *
+	 * @param params the search parameters to query with (to include an authorization code for example)
+	 */
+	export async function fetchToken(params: URLSearchParams) {
+		try {
+			params.set('token', 'refresh');
+			const res = await api.get('/user/login', { params });
+			const token = res.data?.value;
+			if (typeof token === 'string') return token;
+		} catch {}
+	}
+
+	/**
+	 * Fetches the currently authenticated user from the API,
+	 * if a user is authenticated.
+	 *
+	 * @returns the authenticated user, or undefined if none
+	 */
+	export async function getAuthenticatedUser() {
+		try {
+			const res = await api.get('/user');
+			if (!res.data) return;
+
+			const { value: user } = res.data;
+			return user;
+		} catch {}
+	}
+
 	/**
 	 * Returns whether there is an active and valid token
 	 * currently set.
 	 */
-	export async function isAuthorized() {
+	export async function isAuthenticated() {
 		try {
-			await api.get('/user/login');
-			return true;
+			const res = await api.get('/user/login');
+			return res.status === HttpStatusCode.Ok;
 		} catch {
 			return false;
 		}
diff --git a/client/src/lib/axios.ts b/client/src/lib/axios.ts
index d911b150..089dcd37 100644
--- a/client/src/lib/axios.ts
+++ b/client/src/lib/axios.ts
@@ -1,7 +1,5 @@
 import axios, { AxiosError, HttpStatusCode } from 'axios';
-
-const isLocal = location.hostname === 'localhost' || location.hostname === '127.0.0.1';
-const isDev = import.meta.env.DEV;
+import { getServerHost } from '../environment';
 
 /**
  * API Axios instance to access server API routes.
@@ -10,11 +8,7 @@ const isDev = import.meta.env.DEV;
  * and URL host.
  */
 export const api = axios.create({
-	baseURL: isLocal
-		? 'http://localhost:3000/'
-		: isDev
-		? 'https://api.dev.skynetwork.app'
-		: 'https://api.skynetwork.app',
+	baseURL: getServerHost(),
 });
 
 api.interceptors.response.use(
diff --git a/client/src/lib/create-slug.ts b/client/src/lib/create-slug.ts
new file mode 100644
index 00000000..6ff384ab
--- /dev/null
+++ b/client/src/lib/create-slug.ts
@@ -0,0 +1,10 @@
+/**
+ * Returns the given string with all whitespace dashed out
+ * and in lower case.
+ *
+ * @param s the string to slugify
+ * @returns the slugified string
+ */
+export function createSlug(s: string) {
+	return s.toLowerCase().replace(/\s+/g, '-');
+}
diff --git a/client/src/lib/isUser.ts b/client/src/lib/isUser.ts
new file mode 100644
index 00000000..a3aded40
--- /dev/null
+++ b/client/src/lib/isUser.ts
@@ -0,0 +1,13 @@
+import { api } from "./axios";
+
+/**
+ * FUnction to check if a specific ID is the current user's id.
+ * 
+ * @param userId string - User id you are checking.
+ * @returns boolean - True if the id you are checking is current user's id.
+ */
+export async function isUser(userId: string) {
+    const res = await api.get('/user/');
+    const id = res.data.value._id;
+    return userId == id;
+}
\ No newline at end of file
diff --git a/client/src/lib/with-ref.ts b/client/src/lib/with-ref.ts
new file mode 100644
index 00000000..992dde9a
--- /dev/null
+++ b/client/src/lib/with-ref.ts
@@ -0,0 +1,13 @@
+import { Ref, RefObject } from 'react';
+
+/**
+ * Helper function to use a ref value if it exists.
+ *
+ * @param ref the ref to use
+ * @param cb the operation to perform with the current value
+ */
+export function withRef<T, R>(ref: RefObject<T>, cb: (value: T) => R) {
+	const current = ref.current;
+	if (!current) return;
+	return cb(current);
+}
diff --git a/client/src/pages/about/about.module.css b/client/src/pages/about/about.module.css
index 94f248f2..61f1cbf8 100644
--- a/client/src/pages/about/about.module.css
+++ b/client/src/pages/about/about.module.css
@@ -1,3 +1,30 @@
-ul {
-    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+.about-body {
+    width: 100%;
+    font-family: BabaPro;
+     background-color: var(--signup-background);
+     border: 2px solid black;
+	box-shadow: 4px 5px 0px #000;
+}
+
+.about-body * {   
+    background-color: var(--signup-background);
+}
+
+.about-body h2 {
+    font-size: 16pt;
+}
+
+.group-item-body {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;    
+}
+
+.group-item {    
+    border-color: gray;
+}
+
+.offical-pages-body {
+    font-family: Fjalla One;
 }
\ No newline at end of file
diff --git a/client/src/pages/about/about.tsx b/client/src/pages/about/about.tsx
index 6d591bd3..3c112a7e 100644
--- a/client/src/pages/about/about.tsx
+++ b/client/src/pages/about/about.tsx
@@ -1,17 +1,37 @@
+import styles from './about.module.css';
+
+import { MdOutlineArrowForwardIos } from 'react-icons/md';
+import ListGroup from 'react-bootstrap/ListGroup';
+import Nav from 'react-bootstrap/Nav';
+import Page from '../../components/Page/Page';
+import { DiVim } from 'react-icons/di';
+
 const About = () => {
 	return (
-		<html>
-			<body>
-				Team Name: BBY-07 Team Members:
-				<ul>
-					<li> Ole Lammers </li>
-					<li> Kamal Dolikay </li>
-					<li> Marcus V Lages </li>
-					<li> Tianyou Xie </li>
-					<li> Samarjit Bhogal </li>
-				</ul>
-			</body>
-		</html>
+		<>
+			<Page
+				logoHeader={false}
+				pageName='About'
+				content={
+					<div className={`${styles.aboutBody} card rounded-0 p-4 mt-3`}>
+						<ListGroup variant='flush'>
+							<ListGroup.Item className={`${styles.groupItem}`}>
+								<Nav.Link className={styles.groupItemBody} href='/about/policy'>
+									<h2>Privacy Policy</h2>
+									<MdOutlineArrowForwardIos />
+								</Nav.Link>
+							</ListGroup.Item>
+							<ListGroup.Item className={`${styles.groupItem}`}>
+								<Nav.Link className={styles.groupItemBody} href='/about/terms'>
+									<h2>Terms of Use</h2>
+									<MdOutlineArrowForwardIos />
+								</Nav.Link>
+							</ListGroup.Item>
+						</ListGroup>
+					</div>
+				}
+			/>
+		</>
 	);
 };
 
diff --git a/client/src/pages/about/options/policy.tsx b/client/src/pages/about/options/policy.tsx
new file mode 100644
index 00000000..3d6532a8
--- /dev/null
+++ b/client/src/pages/about/options/policy.tsx
@@ -0,0 +1,160 @@
+import styles from '../about.module.css';
+
+import Page from '../../../components/Page/Page';
+
+const Policy = () => {
+	return (
+		<>
+			<Page
+				logoHeader={false}
+				pageName='Privacy Policy'
+				content={
+					<div className={styles.officalPagesBody}>
+						<h1>Privacy Policy for Sky.Net</h1>
+						<p>
+							At Sky.Net (“the App”), we value your privacy and are committed to protecting your personal
+							information. This Privacy Policy outlines how we collect, use, disclose, and safeguard your
+							information when you use our App. By using Sky.Net, you agree to the collection and use of
+							information in accordance with this policy.
+						</p>
+						<h2>1. Information We Collect</h2>
+						<p>We collect several types of information to provide and improve our service to you:</p>
+						<h3>1.1 Personal Information</h3>
+						<p>
+							When you create an account or use Sky.Net, we may collect personally identifiable
+							information, such as:
+						</p>
+						<ul>
+							<li>Name</li>
+							<li>Email address</li>
+							<li>Profile picture</li>
+							<li>Date of birth</li>
+							<li>Location</li>
+						</ul>
+						<h3>1.2 Usage Data</h3>
+						<p>We collect information on how the App is accessed and used, including:</p>
+						<ul>
+							<li>Your device’s Internet Protocol (IP) address</li>
+							<li>Browser type and version</li>
+							<li>The pages of our App you visit</li>
+							<li>The time and date of your visit</li>
+							<li>The time spent on those pages</li>
+							<li>Unique device identifiers</li>
+							<li>Other diagnostic data</li>
+						</ul>
+						<h3>1.3 Cookies and Tracking Technologies</h3>
+						<p>
+							We use cookies and similar tracking technologies to track activity on our App and hold
+							certain information. Cookies are files with a small amount of data which may include an
+							anonymous unique identifier.
+						</p>
+						<h2>2. How We Use Your Information</h2>
+						<p>Sky.Net uses the collected data for various purposes:</p>
+						<ul>
+							<li>To provide and maintain the App</li>
+							<li>To notify you about changes to our App</li>
+							<li>
+								To allow you to participate in interactive features of our App when you choose to do so
+							</li>
+							<li>To provide customer support</li>
+							<li>To gather analysis or valuable information so that we can improve our App</li>
+							<li>To monitor the usage of our App</li>
+							<li>To detect, prevent, and address technical issues</li>
+						</ul>
+						<h2>3. Sharing Your Information</h2>
+						<p>
+							We do not sell, trade, or otherwise transfer to outside parties your personally identifiable
+							information, except in the following situations:
+						</p>
+						<ul>
+							<li>
+								<strong>With your consent</strong>: We may share your information with third parties if
+								you give us consent to do so.
+							</li>
+							<li>
+								<strong>Compliance with laws</strong>: We may disclose your information where we are
+								legally required to do so to comply with applicable laws, regulations, or legal
+								processes.
+							</li>
+							<li>
+								<strong>Service providers</strong>: We may employ third-party companies and individuals
+								to facilitate our App, provide the App on our behalf, perform App-related services, or
+								assist us in analyzing how our App is used.
+							</li>
+							<li>
+								<strong>Business transfers</strong>: If we are involved in a merger, acquisition, or
+								asset sale, your information may be transferred.
+							</li>
+						</ul>
+						<h2>4. Security of Your Information</h2>
+						<p>
+							The security of your information is important to us. We implement a variety of security
+							measures to maintain the safety of your personal information. However, no method of
+							transmission over the Internet or method of electronic storage is 100% secure, so we cannot
+							guarantee its absolute security.
+						</p>
+						<h2>5. Data Retention</h2>
+						<p>
+							We will retain your personal information only for as long as is necessary for the purposes
+							set out in this Privacy Policy. We will retain and use your information to the extent
+							necessary to comply with our legal obligations, resolve disputes, and enforce our
+							agreements.
+						</p>
+						<h2>6. Your Data Protection Rights</h2>
+						<p>
+							Depending on your jurisdiction, you may have the following rights regarding your personal
+							information:
+						</p>
+						<ul>
+							<li>
+								<strong>The right to access</strong>: You have the right to request copies of your
+								personal data.
+							</li>
+							<li>
+								<strong>The right to rectification</strong>: You have the right to request that we
+								correct any information you believe is inaccurate or complete information you believe is
+								incomplete.
+							</li>
+							<li>
+								<strong>The right to erasure</strong>: You have the right to request that we erase your
+								personal data, under certain conditions.
+							</li>
+							<li>
+								<strong>The right to restrict processing</strong>: You have the right to request that we
+								restrict the processing of your personal data, under certain conditions.
+							</li>
+							<li>
+								<strong>The right to object to processing</strong>: You have the right to object to our
+								processing of your personal data, under certain conditions.
+							</li>
+							<li>
+								<strong>The right to data portability</strong>: You have the right to request that we
+								transfer the data that we have collected to another organization, or directly to you,
+								under certain conditions.
+							</li>
+						</ul>
+						<p>
+							If you make a request, we have one month to respond to you. If you would like to exercise
+							any of these rights, please contact us at our provided contact information.
+						</p>
+						<h2>7. Changes to This Privacy Policy</h2>
+						<p>
+							We may update our Privacy Policy from time to time. We will notify you of any changes by
+							posting the new Privacy Policy on this page. You are advised to review this Privacy Policy
+							periodically for any changes. Changes to this Privacy Policy are effective when they are
+							posted on this page.
+						</p>
+						<p>
+							<strong>
+								By using Sky.Net, you acknowledge that you have read, understood, and agree to be bound
+								by this Privacy Policy.
+							</strong>
+						</p>
+					</div>
+				}
+			/>
+		</>
+	);
+};
+
+export default Policy;
diff --git a/client/src/pages/about/options/terms.tsx b/client/src/pages/about/options/terms.tsx
new file mode 100644
index 00000000..331e5258
--- /dev/null
+++ b/client/src/pages/about/options/terms.tsx
@@ -0,0 +1,127 @@
+import styles from '../about.module.css';
+
+import Page from '../../../components/Page/Page';
+
+const Terms = () => {
+	return (
+		<>
+			<Page
+				logoHeader={false}
+				pageName='Terms of Use'
+				content={
+					<div className={styles.officalPagesBody}>
+						<h1>Terms of Use for Sky.Net</h1>
+						<p>
+							Welcome to Sky.Net (“the App”), a social media platform designed to facilitate
+							interplanetary communication. By accessing or using the App, you agree to comply with and be
+							bound by the following Terms of Use. Please read these terms carefully. If you do not agree
+							with these terms, you should not use the App.
+						</p>
+						<h2>Acceptance of Terms</h2>
+						<p>
+							By creating an account or using Sky.Net, you agree to these Terms of Use and any additional
+							terms applicable to specific features of the App.
+						</p>
+						<h2>Eligibility</h2>
+						<p>
+							You must be at least 13 years old, that is your age relative to your home planet, to use
+							Sky.Net. By using the App, you represent and warrant that you meet this age requirement.
+						</p>
+						<h2>User Accounts</h2>
+						<p>
+							You are responsible for maintaining the confidentiality of your account information and for
+							all activities that occur under your account. You agree to notify us immediately of any
+							unauthorized use of your account.
+						</p>
+						<h2>User Conduct</h2>
+						<p>You agree not to use Sky.Net to:</p>
+						<ul>
+							<li>
+								Post, upload, or distribute any content that is unlawful, harmful, threatening, abusive,
+								harassing, defamatory, vulgar, obscene, or otherwise objectionable.
+							</li>
+							<li>
+								Impersonate any person or entity, or falsely state or otherwise misrepresent your
+								affiliation with a person or entity.
+							</li>
+							<li>Violate any local, state, national, or interplanetary law or regulation.</li>
+							<li>Engage in any activity that could interfere with or disrupt the App.</li>
+						</ul>
+						<h2>Content Ownership and License</h2>
+						<ul>
+							<li>
+								<strong>Your Content</strong>: You retain ownership of all content you post, upload, or
+								otherwise make available through Sky.Net. By doing so, you grant us a worldwide,
+								non-exclusive, royalty-free license to use, distribute, reproduce, modify, adapt,
+								publicly perform, and publicly display such content in connection with the App.
+							</li>
+							<li>
+								<strong>Our Content</strong>: All content available on Sky.Net, except user-generated
+								content, is owned by or licensed to us and is protected by intellectual property laws.
+							</li>
+						</ul>
+						<h2>Privacy</h2>
+						<p>
+							Your privacy is important to us. Please review our
+							<a href='/about/policy'>[Privacy Policy]</a> to understand how we collect, use, and share
+							information about you.
+						</p>
+						<h2>Interplanetary Data Transfer</h2>
+						<p>
+							Given the nature of interplanetary communication, data transfer times and reliability may
+							vary. You acknowledge and accept any potential delays or disruptions in data transmission.
+						</p>
+						<h2>Prohibited Uses</h2>
+						<p>
+							You agree not to use Sky.Net for any commercial purposes without our prior written consent.
+							You also agree not to use the App to collect or harvest any personally identifiable
+							information, including account names, from Sky.Net.
+						</p>
+						<h2>Termination</h2>
+						<p>
+							We reserve the right to terminate or suspend your account and access to Sky.Net at our sole
+							discretion, without notice and without liability, for any reason, including if we believe
+							you have violated these Terms of Use.
+						</p>
+						<h2>Disclaimer of Warranties</h2>
+						<p>
+							Sky.Net is provided on an &quot;as is&quot; and &quot;as available&quot; basis. We make no
+							warranties, express or implied, regarding the App&#39;s operation or your use of the App,
+							including but not limited to warranties of merchantability, fitness for a particular
+							purpose, or non-infringement.
+						</p>
+						<h2>Limitation of Liability</h2>
+						<p>
+							To the maximum extent permitted by law, we shall not be liable for any indirect, incidental,
+							special, consequential, or punitive damages, or any loss of profits or revenues, whether
+							incurred directly or indirectly, or any loss of data, use, goodwill, or other intangible
+							losses, resulting from (a) your use or inability to use Sky.Net; (b) any unauthorized access
+							to or use of our servers and/or any personal information stored therein; (c) any
+							interruption or cessation of transmission to or from Sky.Net; or (d) any bugs, viruses,
+							trojan horses, or the like that may be transmitted to or through the App by any third party.
+						</p>
+						<h2>Governing Law</h2>
+						<p>
+							These Terms of Use are governed by and construed in accordance with the laws of SkyOps,
+							without regard to its conflict of law principles.
+						</p>
+						<h2>Changes to the Terms of Use</h2>
+						<p>
+							We may modify these Terms of Use at any time. We will notify you of any changes by posting
+							the new Terms of Use on Sky.Net. Your continued use of the App after any such changes
+							constitutes your acceptance of the new Terms of Use.
+						</p>
+						<p>
+							<strong>
+								By using Sky.Net, you acknowledge that you have read, understood, and agree to be bound
+								by these Terms of Use.
+							</strong>
+						</p>
+					</div>
+				}
+			/>
+		</>
+	);
+};
+
+export default Terms;
diff --git a/client/src/pages/general-feed/general-feed.tsx b/client/src/pages/general-feed/general-feed.tsx
index def4aad7..2c632bb9 100644
--- a/client/src/pages/general-feed/general-feed.tsx
+++ b/client/src/pages/general-feed/general-feed.tsx
@@ -1,54 +1,54 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { api } from '../../lib/axios';
 
 import Page from '../../components/Page/Page';
 import Post from '../../components/Post/Post';
 
+// PLEASE, CHECK THE PROMISE USE
+// I HAD A PROBLEM WITH USING AWAIT/ASYNC INSIDE ARRAYS
 const GeneralFeed = () => {
-	const displayedPosts: JSX.Element[] = [];
+	const [displayedPosts, setDisplayedPosts] = useState(Array<JSX.Element>());
 
-	// interface Reference {
-	// 	authorId: { username: string; userURL: string };
-	// 	content: string;
-	// 	likeCount: number;
-	// 	commentCount: number;
-	// 	repostCount: number;
-	// 	createdAt: Date;
-	// }
-
-	// const [planets, setPlanets] = useState<Array<Planet>>([]);
 	useEffect(() => {
-		async function fetchPost() {
-			try {
-				const res = await api.post('/post/6646a3b24b2d7d6a935eeea3');
-				console.log(res);
-			} catch (err) {
-				console.log(err);
+		const displayPosts = async function () {
+			let postArray = await fetchPost();
+			if (postArray == undefined) {
+				postArray = [<>Nothing yet...</>];
 			}
-		}
-
-		fetchPost();
+			setDisplayedPosts(postArray);
+		};
+		displayPosts();
 	}, []);
 
-	const dummyPost = (
-		<Post
-			username='@MarcusTheDumbs'
-			text='"It was never bad luck... It was always incompetence"- DARWIN, Charles'
-			postURL='./about'
-			userURL='#USER_URL'
-		/>
-	);
-
-	for (let i = 1; i < 10; i++) {
-		displayedPosts.push({ ...dummyPost, key: i.toString() });
+	async function fetchPost() {
+		try {
+			const postRes = await api.get('/feed');
+			const postArray = postRes.data.value;
+			let postElements: Promise<JSX.Element[]> = Promise.all(
+				postArray.map(async (post: any) => {
+					const authorRes = await api.get('/user/' + post.authorId);
+					const authorData = authorRes.data.value;
+					return (
+						<Post
+							username={authorData.userName}
+							authorId={authorData._id}
+							content={post.content}
+							postId={post._id}
+							likeCount={post.likeCount}
+							commentCount={post.commentCount}
+							repostCount={post.repostCount}
+							key={post._id}
+						/>
+					);
+				}),
+			);
+			return postElements;
+		} catch (err) {
+			console.log(err);
+		}
 	}
 
-	return (
-		<Page
-			pageName='General Feed'
-			content={displayedPosts}
-		/>
-	);
+	return <Page pageName='General Feed' content={displayedPosts} />;
 };
 
 export default GeneralFeed;
diff --git a/client/src/pages/home/home.tsx b/client/src/pages/home/home.tsx
index 71625baf..8f3b7111 100644
--- a/client/src/pages/home/home.tsx
+++ b/client/src/pages/home/home.tsx
@@ -2,6 +2,12 @@ import styles from './home.module.css';
 
 import Page from '../../components/Page/Page';
 import { Link } from 'wouter';
+import React, { useContext, useEffect, useState } from 'react';
+import { Else, If, Then } from 'react-if';
+import { SmallLoader } from '../../components/loader/small-loader';
+import { createSlug } from '../../lib/create-slug';
+import { api } from '../../lib/axios';
+import { UserAuthContext } from '../../lib/auth';
 
 interface PlanetProps {
 	planet: string;
@@ -17,25 +23,55 @@ const Planets = (props: PlanetProps) => {
 };
 
 const Home = () => {
+	const user = useContext(UserAuthContext);
+
+	const [planetsData, setPlanetsData] = useState<any[]>([]);
+	const [homePlanet, setHomePlanet] = useState('');
+
+	useEffect(() => {
+		api.get('/planet').then((res) => {
+			const { value } = res.data;
+			setPlanetsData(value);
+		});
+	}, []);
+
+	useEffect(() => {
+		setHomePlanet(user.location.planetId);
+	}, [user]);
+
 	const mainContainer = (
 		<div className='d-flex align-items-center justify-content-center p-3'>
 			<div className={styles.mainContainer}>
 				<h1 className={styles.title}>Choose your planet</h1>
-				<Planets planet='GENERAL FEED' url='/feed' />
-				<Planets planet='Earth' url='/feed' />
-				<Planets planet='Moon' url='/feed' />
-				<Planets planet='Mercury' url='/feed' />
-				<Planets planet='Venus' url='/feed' />
-				<Planets planet='Mars' url='/feed' />
-				<Planets planet='Jupiter' url='/feed' />
-				<Planets planet='Saturn' url='/feed' />
-				<Planets planet='Uranus' url='/feed' />
-				<Planets planet='Neptune' url='/feed' />
+				<Planets planet='Galactic Feed' url='/feed' />
+				<If condition={planetsData.length === 0}>
+					<Then>
+						<SmallLoader />
+					</Then>
+					<Else>
+						{planetsData.map((planet) => {
+							const name = planet.name;
+							if (typeof name !== 'string') return <></>;
+
+							const slug = createSlug(name);
+							if (typeof slug !== 'string') return <></>;
+
+							console.log(planet);
+
+							return (
+								<Planets
+									planet={homePlanet === planet._id ? `🏠 ${name}` : name}
+									url={`/feed/${slug}/${planet._id}`}
+								/>
+							);
+						})}
+					</Else>
+				</If>
 			</div>
 		</div>
 	);
 
-	return <Page content={mainContainer} noHeader />;
+	return <Page content={mainContainer} logoHeader={true} />;
 };
 
 export default Home;
diff --git a/client/src/pages/login/login-component.tsx b/client/src/pages/login/login-component.tsx
index c9ee9dc7..05898de8 100644
--- a/client/src/pages/login/login-component.tsx
+++ b/client/src/pages/login/login-component.tsx
@@ -1,6 +1,6 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { api } from '../../lib/axios';
-import { useLocation } from 'wouter';
+import { useLocation, useSearch } from 'wouter';
 import { toast } from 'react-toastify';
 import { Auth } from '../../lib/auth';
 import LoginHtml from './login-html';
@@ -11,6 +11,22 @@ const Login = () => {
 
 	const [_, setLocation] = useLocation();
 
+	const [loading, setLoading] = useState(true);
+	const query = useSearch();
+
+	useEffect(() => {
+		const params = new URLSearchParams(query);
+		const externalAuthCode = params.get('code');
+		if (!externalAuthCode) return setLoading(false);
+
+		Auth.fetchToken(params).then((token) => {
+			if (!token) return setLoading(false);
+			Auth.saveToken(token);
+			setLoading(false);
+			setLocation('/home');
+		});
+	}, []);
+
 	const submitForm = async (e: any) => {
 		e.preventDefault();
 
@@ -50,6 +66,7 @@ const Login = () => {
 			setEmail={setEmail}
 			setPassword={setPassword}
 			submitForm={submitForm}
+			loading={loading}
 		/>
 	);
 };
diff --git a/client/src/pages/login/login-html.tsx b/client/src/pages/login/login-html.tsx
index cb3a2656..19c481e5 100644
--- a/client/src/pages/login/login-html.tsx
+++ b/client/src/pages/login/login-html.tsx
@@ -1,9 +1,11 @@
-import { useLocation } from 'wouter';
+import { Link, useLocation } from 'wouter';
 import styles from './login.module.css';
 import logoUrl from '../../assets/images/SkynetLogo.png';
+import { GoogleAuthButton } from '../../components/google-auth-btn/google-auth-btn';
 
-const LoginHtml = ({ email, password, setEmail, setPassword, submitForm }: any) => {
+const LoginHtml = ({ email, password, setEmail, setPassword, submitForm, loading }: any) => {
 	const [_, navigate] = useLocation();
+
 	return (
 		<div className={styles.loginContainer}>
 			<div className='px-4 text-center'>
@@ -31,19 +33,35 @@ const LoginHtml = ({ email, password, setEmail, setPassword, submitForm }: any)
 							value={password}
 							onChange={(e) => setPassword(e.target.value)}
 						/>
-						<div className='mb-3'>
-							<a href='/forgetpassword' className={styles.span}>Forget your password?</a>
-							<button className={`${styles.button}`}>Login</button>
-						</div>
+
+						<button disabled={loading} className={`${styles.button} mb-3`}>
+							Login
+						</button>
 					</form>
-					<div className=''>
-						<span className={styles.span}>New User? Signup Below</span>
+
+					<hr />
+
+					<div className='d-flex flex-column'>
+						<GoogleAuthButton disabled={loading} text='Login with Google' className={styles.button} />
+					</div>
+
+					<hr />
+
+					<div className='mb-4'>
+						<span className={styles.span}>New User? Sign Up Instead</span>
 						<button
+							disabled={loading}
 							onClick={() => navigate('/signup')}
 							className={`${styles.loginButtonLogin} ${styles.button}`}>
 							Sign Up
 						</button>
 					</div>
+
+					<hr />
+
+					<Link href='/forgetpassword' className={`${styles.span} small mb-0`}>
+						Forgot your password?
+					</Link>
 				</div>
 				<div className={`${styles.loginBottomdiv} mt-2`}></div>
 			</div>
diff --git a/client/src/pages/messages/messages-component.tsx b/client/src/pages/messages/messages-component.tsx
new file mode 100644
index 00000000..b7329da1
--- /dev/null
+++ b/client/src/pages/messages/messages-component.tsx
@@ -0,0 +1,96 @@
+import MessagesHtml from './messages-html';
+import { useEffect, useState, useContext } from 'react';
+import { api } from '../../lib/axios';
+import { useParams } from 'wouter';
+import io from 'socket.io-client';
+import { getServerHost } from '../../environment';
+// import { UserAuthContext } from '../../lib/auth';
+
+const Messages = () => {
+	let { id } = useParams();
+	const [message, setMessage] = useState('');
+	const [messages, setMessages] = useState<string[]>([]);
+	const [isChat, setIsChat] = useState(false);
+	// const [socket, setSocket] = useState<any>(null);
+	const [convoID, setConvoID] = useState('');
+	const socket = io(getServerHost());
+	// const user = useContext(UserAuthContext);
+	const [username, setUsername] = useState('');
+
+	useEffect((): any => {
+		const fetchMessages = async () => {
+			let headers = {
+				headers: {
+					Authorization: 'Bearer ' + localStorage.getItem('jwt'),
+				},
+			};
+			const { data: res } = await api.post('/user/getchats', { receiverId: id }, headers);
+
+			try {
+				if (res.success) {
+					setIsChat(true);
+					setMessages(res.message);
+					setConvoID(res.message[0].conversationId);
+					// setSocket(newSocket);
+					socket.emit('sendID', res.message[0].conversationId);
+				}
+			} catch (error) {
+				console.log(error);
+			}
+
+			const friend = await api.get(`/user/${id}`);
+			console.log(friend.data);
+			try {
+				if (friend.data.success) {
+					setUsername(friend.data.value.userName);
+				}
+			} catch (error) {
+				console.log(error);
+			}
+		};
+
+		fetchMessages();
+		return () => socket.close();
+	}, []);
+
+	useEffect(() => {
+		let arr: any;
+		if (socket) {
+			socket.on('receiveMessage', (data: any) => {
+				arr = data;
+			});
+			socket.on('displayMessage', () => {
+				setMessages((prevMessages) => [...prevMessages, arr]);
+			});
+		}
+	}, [socket]);
+
+	const submitForm = async (e: any) => {
+		e.preventDefault();
+		const newMessage = {
+			content: message,
+			receiverId: id,
+		};
+
+		try {
+			const { data: res } = await api.post('/user/chat', newMessage);
+			socket.emit('sendMessage', convoID);
+			setMessage('');
+		} catch (error) {
+			console.log(error);
+		}
+	};
+	return (
+		<MessagesHtml
+			message={message}
+			messages={messages}
+			setMessage={setMessage}
+			submitForm={submitForm}
+			id={id}
+			isChat={isChat}
+			username={username}
+		/>
+	);
+};
+
+export default Messages;
diff --git a/client/src/pages/messages/messages-html.tsx b/client/src/pages/messages/messages-html.tsx
new file mode 100644
index 00000000..0e34fde7
--- /dev/null
+++ b/client/src/pages/messages/messages-html.tsx
@@ -0,0 +1,107 @@
+import { FaVideo } from 'react-icons/fa';
+import { IoCall } from 'react-icons/io5';
+import { IoChevronBackCircleSharp } from 'react-icons/io5';
+import { IoSend } from 'react-icons/io5';
+import { MdOutlineEmojiEmotions } from 'react-icons/md';
+import { RxAvatar } from 'react-icons/rx';
+import { Else, If, Then } from 'react-if';
+
+import styles from './messages.module.css';
+
+const MessagesHtml = ({ message, messages, setMessage, submitForm, id, isChat, username }: any) => {
+	function handlePageReturn() {
+		history.back();
+	}
+	return (
+		<>
+			<div className={`container ${styles.container}`}>
+				<header className='border-bottom lh-1 py-3'>
+					<div className='row flex-nowrap justify-content-between align-items-center'>
+						<div className='col-4 pt-1'>
+							<IoChevronBackCircleSharp size={30} onClick={handlePageReturn} />
+						</div>
+						<div className='col-4 text-center'>
+							<a className='blog-header-logo text-body-emphasis text-decoration-none' href='#'>
+								<RxAvatar size={50} />
+								<h3 className={styles.h3}>{username}</h3>
+							</a>
+						</div>
+						<div className='col-4 d-flex justify-content-end align-items-center'>
+							<FaVideo size={20} />
+							<IoCall size={20} />
+						</div>
+					</div>
+				</header>
+
+				<main className='container'>
+					<div className='row'>
+						{isChat ? (
+							messages.map((message: any, index: number) => {
+								return (
+									<div className='d-inline' key={index}>
+										<If condition={id === message.senderId}>
+											<Then>
+												<div className='d-flex text-body-secondary'>
+													<RxAvatar size={25} />
+													<p className={styles.p} key={index}>
+														{message.content}
+													</p>
+													<br />
+												</div>
+											</Then>
+											<Else>
+												<div className='d-flex justify-content-end '>
+													<RxAvatar size={25} />
+													<p className={styles.p} key={index}>
+														{message.content}
+													</p>
+													<br />
+												</div>
+											</Else>
+										</If>
+									</div>
+								);
+							})
+						) : (
+							<div className='d-flex text-body-secondary'>
+								<p>No Messages to Show</p>
+							</div>
+						)}
+					</div>
+				</main>
+
+				<div className={`container fixed-bottom mb-2 ${styles.lol}`}>
+					<div className='row'>
+						<div className='col-1 themed-grid-col'>
+							<MdOutlineEmojiEmotions size={40} />
+						</div>
+						<div className='col-10 themed-grid-col'>
+							<form onSubmit={submitForm}>
+								<input
+									type='text'
+									className='form-control form-control-lg'
+									id='address'
+									placeholder='Type Here'
+									required
+									value={message}
+									onChange={(e) => setMessage(e.target.value)}
+								/>
+							</form>
+						</div>
+						<div className='col-1 themed-grid-col'>
+							<IoSend size={40} />
+						</div>
+					</div>
+					{/* <button
+						id='myBtn'
+						type='button'
+						className={`${styles.btnDefault} form-control btn btn-block confirm-button`}>
+						Send
+					</button> */}
+				</div>
+			</div>
+		</>
+	);
+};
+
+export default MessagesHtml;
diff --git a/client/src/pages/messages/messages.module.css b/client/src/pages/messages/messages.module.css
new file mode 100644
index 00000000..c2f57dea
--- /dev/null
+++ b/client/src/pages/messages/messages.module.css
@@ -0,0 +1,11 @@
+.container {
+    /* background: #232c38; */
+}
+
+.h3 {
+	font-family: Bitsumishi;
+}
+
+.p {
+    font-family: TTOctosquares;
+}
diff --git a/client/src/pages/my-feed/my-feed.tsx b/client/src/pages/my-feed/my-feed.tsx
index c57b8bd5..d6a69a73 100644
--- a/client/src/pages/my-feed/my-feed.tsx
+++ b/client/src/pages/my-feed/my-feed.tsx
@@ -7,20 +7,17 @@ const MyFeed = () => {
 
 	const dummyPost = (
 		<Post
-			username='@MarcusTheDumbs'
-			text='"It was never bad luck... It was always incompetence"- DARWIN, Charles'
-			postURL='./about'
-			userURL='#USER_URL'
-		/>
+			username='MarcusTheDumbs'
+			content='"It was never bad luck... It was always incompetence"- DARWIN, Charles'
+			postId='66450ab930f716df67e47a02'
+			authorId='#USER_URL' repost={0} like={0} comment={0} />
 	);
 
 	for (let i = 1; i < 10; i++) {
 		displayedPosts.push(dummyPost);
 	}
 
-	return (
-		<Page pageName="My Feed" content={displayedPosts} />
-	);
+	return <Page pageName='My Feed' content={displayedPosts} />;
 };
 
 export default MyFeed;
diff --git a/client/src/pages/planet-feed/planet-feed.module.css b/client/src/pages/planet-feed/planet-feed.module.css
new file mode 100644
index 00000000..e69de29b
diff --git a/client/src/pages/planet-feed/planet-feed.tsx b/client/src/pages/planet-feed/planet-feed.tsx
new file mode 100644
index 00000000..d264eec4
--- /dev/null
+++ b/client/src/pages/planet-feed/planet-feed.tsx
@@ -0,0 +1,57 @@
+import { useEffect, useState } from 'react';
+import { api } from '../../lib/axios';
+
+import Page from '../../components/Page/Page';
+import Post from '../../components/Post/Post';
+import { useParams } from 'wouter';
+
+// PLEASE, CHECK THE PROMISE USE
+// I HAD A PROBLEM WITH USING AWAIT/ASYNC INSIDE ARRAYS
+const PlanetFeed = () => {
+	const [displayedPosts, setDisplayedPosts] = useState(Array<JSX.Element>());
+	let { id } = useParams() ?? '';
+	let { planetName } = useParams() ?? '';
+
+	useEffect(() => {
+		const displayPosts = async function () {
+			let postArray = await fetchPost();
+			if (postArray == undefined) {
+				postArray = [<>Nothing yet...</>];
+			}
+			setDisplayedPosts(postArray);
+		};
+		displayPosts();
+	}, []);
+
+	async function fetchPost() {
+		try {
+			const postRes = await api.get(`/feed/${id}`);
+			const postArray = postRes.data.value;
+			let postElements: Promise<JSX.Element[]> = Promise.all(
+				postArray.map(async (post: any) => {
+					const authorRes = await api.get('/user/' + post.authorId);
+					const authorData = authorRes.data.value;
+					return (
+						<Post
+							username={authorData.userName}
+							authorId={authorData._id}
+							content={post.content}
+							postId={post._id}
+							likeCount={post.likeCount}
+							commentCount={post.commentCount}
+							repostCount={post.repostCount}
+							key={post._id}
+						/>
+					);
+				}),
+			);
+			return postElements;
+		} catch (err) {
+			console.log(err);
+		}
+	}
+
+	return <Page pageName={`${planetName}`} content={displayedPosts} />;
+};
+
+export default PlanetFeed;
diff --git a/client/src/pages/planet-map/center-visual.tsx b/client/src/pages/planet-map/center-visual.tsx
new file mode 100644
index 00000000..02ddbc0b
--- /dev/null
+++ b/client/src/pages/planet-map/center-visual.tsx
@@ -0,0 +1,46 @@
+import Konva from 'konva';
+import { useEffect, useRef, useState } from 'react';
+import { Image } from 'react-konva';
+import useImage from 'use-image';
+import { useLocation } from 'wouter';
+
+import logoUrl from '../../assets/images/SkynetLogo.png';
+import { withRef } from '../../lib/with-ref';
+
+export const CenterVisual = () => {
+	const [_, navigate] = useLocation();
+
+	const imgRef = useRef<Konva.Image>(null);
+	const [img] = useImage(logoUrl);
+	const imageSize = 100;
+
+	const [active, setActive] = useState(false);
+
+	useEffect(() => {
+		withRef(imgRef, (img) => {
+			img.to({ shadowBlur: active ? 15 : 5, duration: 0.25 });
+		});
+
+		document.body.style.cursor = active ? 'pointer' : 'unset';
+	}, [active]);
+
+	const goToFeed = () => navigate('/feed');
+
+	return (
+		<Image
+			ref={imgRef}
+			image={img}
+			width={imageSize}
+			height={imageSize}
+			shadowEnabled
+			strokeEnabled={false}
+			shadowColor='grey'
+			perfectDrawEnabled={false}
+			onMouseEnter={() => setActive(true)}
+			onMouseLeave={() => setActive(false)}
+			onTap={goToFeed}
+			onClick={goToFeed}
+			offset={{ x: imageSize / 2, y: imageSize / 2 }}
+		/>
+	);
+};
diff --git a/client/src/pages/planet-map/decorative-star.tsx b/client/src/pages/planet-map/decorative-star.tsx
new file mode 100644
index 00000000..f6642bde
--- /dev/null
+++ b/client/src/pages/planet-map/decorative-star.tsx
@@ -0,0 +1,20 @@
+import { Circle } from 'react-konva';
+
+interface Props {
+	x: number;
+	y: number;
+}
+
+export const DecorativeStar = (props: Props) => {
+	return (
+		<Circle
+			perfectDrawEnabled={false}
+			fill='white'
+			width={1}
+			height={1}
+			x={props.x}
+			y={props.y}
+			listening={false}
+		/>
+	);
+};
diff --git a/client/src/pages/planet-map/planet-info-card.tsx b/client/src/pages/planet-map/planet-info-card.tsx
new file mode 100644
index 00000000..0a7087ec
--- /dev/null
+++ b/client/src/pages/planet-map/planet-info-card.tsx
@@ -0,0 +1,100 @@
+import Konva from 'konva';
+import { Vector2d } from 'konva/lib/types';
+import { useEffect, useRef, useState } from 'react';
+import { Else, If, Then } from 'react-if';
+import { Group, Rect, Text } from 'react-konva';
+
+import { withRef } from '../../lib/with-ref';
+
+interface Props {
+	planet: unknown;
+	home: boolean;
+	offset: Vector2d;
+	active: boolean;
+	type: 'preview' | 'expanded';
+	onTap: () => void;
+}
+
+export const PlanetInfoCard = (props: Props) => {
+	const planet = props.planet;
+	if (!planet || typeof planet !== 'object') return <></>;
+
+	const name = 'name' in planet ? `${planet.name}` : 'Unknown Planet';
+
+	const groupRef = useRef<Konva.Group>(null);
+	const [activeTextGroup, setActiveTextGroup] = useState<Konva.Group | null>(null);
+
+	const [bgHeight, setBgHeight] = useState(0);
+	const [bgWidth, setBgWidth] = useState(0);
+	const [bgPadding] = useState(20);
+
+	useEffect(() => {
+		withRef(groupRef, (group) => group.to({ opacity: props.active ? 1 : 0, duration: 0.2 }));
+		document.body.style.cursor = props.active ? 'pointer' : 'unset';
+	}, [props.active]);
+
+	const adjustTextBoxSize = () => {
+		const group = activeTextGroup;
+		if (!group) return;
+
+		const groupSize = group.getClientRect();
+		setBgHeight(groupSize.height + bgPadding);
+		setBgWidth(groupSize.width + bgPadding);
+	};
+
+	useEffect(adjustTextBoxSize, [activeTextGroup, bgPadding]);
+
+	const planetName = (additionalProps?: Konva.TextConfig) => (
+		<Text
+			{...additionalProps}
+			text={`${props.home ? '🏠 ' : ''}${name}`}
+			fontFamily='Bitsumishi'
+			fontSize={16}
+			perfectDrawEnabled={false}
+			listening={false}
+			fill='white'
+		/>
+	);
+
+	return (
+		<Group ref={groupRef} opacity={0} offset={{ x: props.offset.x, y: props.offset.y + bgHeight / 2 }}>
+			<Rect
+				width={bgWidth}
+				fill='#5fb7cf'
+				opacity={0.25}
+				cornerRadius={8}
+				height={bgHeight}
+				perfectDrawEnabled={false}
+				listening={props.active}
+				onTap={props.onTap}
+			/>
+
+			<If condition={props.type === 'expanded'}>
+				<Then>
+					<Group
+						ref={(ref) => setActiveTextGroup(ref)}
+						offset={{ y: -bgPadding / 2, x: -bgPadding / 2 }}
+						listening={false}>
+						{planetName({ textDecoration: 'underline' })}
+
+						<Text
+							text={`Click to view the ${name} feed`}
+							y={25}
+							fill='white'
+							perfectDrawEnabled={false}
+							listening={false}
+						/>
+					</Group>
+				</Then>
+				<Else>
+					<Group
+						ref={(ref) => setActiveTextGroup(ref)}
+						offset={{ y: -bgPadding / 2, x: -bgPadding / 2 }}
+						listening={false}>
+						{planetName()}
+					</Group>
+				</Else>
+			</If>
+		</Group>
+	);
+};
diff --git a/client/src/pages/planet-map/planet-map.tsx b/client/src/pages/planet-map/planet-map.tsx
new file mode 100644
index 00000000..5f2648b4
--- /dev/null
+++ b/client/src/pages/planet-map/planet-map.tsx
@@ -0,0 +1,248 @@
+import Konva from 'konva';
+import { Vector2d } from 'konva/lib/types';
+import { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { GiHamburgerMenu } from 'react-icons/gi';
+import { PiCrosshairBold } from 'react-icons/pi';
+import { Layer, Stage } from 'react-konva';
+
+import { UserAuthContext } from '../../lib/auth';
+import { api } from '../../lib/axios';
+import { withRef } from '../../lib/with-ref';
+import { CenterVisual } from './center-visual';
+import { PlanetVisual } from './planet-visual';
+import { SpaceTraveller } from './space-traveller';
+import { StarBackground } from './star-background';
+import { useLocation } from 'wouter';
+
+export const PlanetMap = () => {
+	const stageRef = useRef<Konva.Stage>(null);
+
+	const [_, navigate] = useLocation();
+
+	const [planetData, setPlanetData] = useState<any[]>([]);
+	const [homePlanetId, setHomePlanetId] = useState<string>();
+
+	const minZoom = 0.1;
+	const maxZoom = 10;
+	const [zoom, setZoom] = useState(1);
+
+	const user = useContext(UserAuthContext);
+
+	const getAbsolutePos = (relativePos: Vector2d): Vector2d => {
+		const stage = stageRef.current;
+		if (!stage) return { x: 0, y: 0 };
+
+		const offset = stage.offset();
+		const xOffset = offset.x * (1 - zoom);
+		const yOffset = offset.y * (1 - zoom);
+
+		return {
+			x: relativePos.x - xOffset,
+			y: relativePos.y - yOffset,
+		};
+	};
+
+	const getRelativePos = (absolutePos: Vector2d): Vector2d => {
+		const stage = stageRef.current;
+		if (!stage) return { x: 0, y: 0 };
+
+		const offset = stage.offset();
+		const xOffset = offset.x * (1 - zoom);
+		const yOffset = offset.y * (1 - zoom);
+
+		return {
+			x: absolutePos.x + xOffset,
+			y: absolutePos.y + yOffset,
+		};
+	};
+
+	const [absPanPosition, setAbsPanPosition] = useState<Vector2d>({ x: 0, y: 0 });
+	const relativePanPosition = useMemo<Vector2d>(() => {
+		const stage = stageRef.current;
+		if (!stage) return { x: 0, y: 0 };
+
+		return getRelativePos(absPanPosition);
+	}, [absPanPosition, zoom]);
+
+	const resetPan = () => {
+		withRef(stageRef, (stage) => {
+			stage.to({ ...getAbsolutePos({ x: 0, y: 0 }), duration: 0.2 });
+		});
+	};
+
+	const updatePositionLabel = () => {
+		withRef(stageRef, (ref) => {
+			const x = Math.round(ref.x());
+			const y = Math.round(ref.y());
+			setAbsPanPosition({ x, y });
+		});
+	};
+
+	const updateZoom = () => {
+		const stage = stageRef.current;
+		if (!stage) return;
+
+		const oldZoom = stage.scaleX();
+
+		const userPointer = stage.getPointerPosition();
+		const pointerPos = userPointer ? userPointer : { x: innerWidth / 2, y: innerHeight / 2 };
+
+		const zoomPoint: Vector2d = {
+			x: (pointerPos.x - stage.x()) / oldZoom,
+			y: (pointerPos.y - stage.y()) / oldZoom,
+		};
+
+		stage.to({
+			scaleX: zoom,
+			scaleY: zoom,
+			x: pointerPos.x - zoomPoint.x * zoom,
+			y: pointerPos.y - zoomPoint.y * zoom,
+			duration: 0.1,
+		});
+	};
+
+	const updateZoomFromScroll = (kev: Konva.KonvaEventObject<WheelEvent>) => {
+		kev.evt.preventDefault();
+		const change = kev.evt.deltaY / 1000;
+		const newZoom = zoom + -change;
+		setZoom(Math.max(minZoom, Math.min(maxZoom, newZoom)));
+	};
+
+	useEffect(() => updateZoom(), [zoom]);
+
+	useEffect(
+		() =>
+			withRef(stageRef, (ref) => {
+				ref.on('xChange', updatePositionLabel);
+				ref.on('yChange', updatePositionLabel);
+
+				return () => {
+					ref.off('xChange', updatePositionLabel);
+					ref.off('yChange', updatePositionLabel);
+				};
+			}),
+		[],
+	);
+
+	useEffect(() => {
+		api.get('/planet')
+			.then(({ data: res }) => {
+				const planets = res.value;
+				if (!Array.isArray(planets)) return;
+				setPlanetData(planets);
+			})
+			.catch();
+	}, []);
+
+	useEffect(() => {
+		if (!user) return;
+		setHomePlanetId(user.location.planetId);
+	}, [user]);
+
+	const [secretActive, setSecretActive] = useState(false);
+	function displaySecret() {
+		if (secretActive) return;
+		setSecretActive(true);
+		setTimeout(() => setSecretActive(false), 15_000);
+	}
+
+	useEffect(() => {
+		const secretWord = 'emergency';
+
+		let charIndex = 0;
+		let clicks = 0;
+
+		const checkSecretProgress = () => {
+			if (secretActive) return;
+
+			if (clicks === 20) {
+				displaySecret();
+				clicks = 0;
+			} else if (charIndex === secretWord.length) {
+				displaySecret();
+				charIndex = 0;
+			}
+		};
+
+		const nextChar = (e: KeyboardEvent) => {
+			if (e.key.toLowerCase() === secretWord.charAt(charIndex)) {
+				charIndex++;
+			} else charIndex = 0;
+
+			checkSecretProgress();
+		};
+
+		const nextClick = () => {
+			clicks++;
+			checkSecretProgress();
+		};
+
+		document.addEventListener('keydown', nextChar);
+		document.addEventListener('click', nextClick);
+		return () => {
+			document.removeEventListener('keydown', nextChar);
+			document.removeEventListener('click', nextClick);
+		};
+	}, []);
+
+	return (
+		<>
+			<div className='position-absolute end-0 bottom-0 z-3 p-3 d-flex'>
+				<div className='mt-auto ms-auto d-flex gap-3'>
+					<p className='mb-0 text-dark-emphasis '>
+						X: {-relativePanPosition.x.toFixed(0)}, Y: {relativePanPosition.y.toFixed(0)}, x
+						{zoom.toLocaleString()}
+					</p>
+					<button
+						className='btn btn-outline-dark d-flex align-items-center justify-content-center fs-3'
+						disabled={relativePanPosition.x === 0 && relativePanPosition.y === 0}
+						onClick={() => resetPan()}>
+						<PiCrosshairBold />
+					</button>
+
+					<button
+						className='btn btn-outline-dark d-flex align-items-center justify-content-center fs-3'
+						onClick={() => navigate('/home-list')}>
+						<GiHamburgerMenu />
+					</button>
+				</div>
+			</div>
+
+			<Stage
+				ref={stageRef}
+				onWheel={updateZoomFromScroll}
+				width={innerWidth}
+				height={innerHeight}
+				offset={{ x: -innerWidth / 2, y: -innerHeight / 2 }}
+				style={{ position: 'absolute', background: 'transparent', zIndex: 1 }}
+				draggable>
+				<Layer>
+					<CenterVisual />
+				</Layer>
+
+				<Layer>
+					{planetData.map((v) => {
+						return <PlanetVisual key={v._id} planet={v} home={homePlanetId === v._id} planetId={v._id} />;
+					})}
+				</Layer>
+
+				<Layer offset={{ x: innerWidth / 2, y: innerHeight / 2 }}>
+					<SpaceTraveller active={secretActive} />
+					<SpaceTraveller active={secretActive} />
+					<SpaceTraveller active={secretActive} />
+					<SpaceTraveller active={secretActive} />
+					<SpaceTraveller active={secretActive} />
+					<SpaceTraveller active={secretActive} />
+					<SpaceTraveller active={secretActive} />
+					<SpaceTraveller active={secretActive} />
+					<SpaceTraveller active={secretActive} />
+					<SpaceTraveller active={secretActive} />
+				</Layer>
+			</Stage>
+
+			<Stage width={innerWidth} height={innerHeight} style={{ position: 'absolute', background: 'black' }}>
+				<StarBackground />
+			</Stage>
+		</>
+	);
+};
diff --git a/client/src/pages/planet-map/planet-visual.tsx b/client/src/pages/planet-map/planet-visual.tsx
new file mode 100644
index 00000000..e7d98833
--- /dev/null
+++ b/client/src/pages/planet-map/planet-visual.tsx
@@ -0,0 +1,162 @@
+import Konva from 'konva';
+import { useEffect, useRef, useState } from 'react';
+import { Else, If, Then } from 'react-if';
+import { Circle, Group, Image } from 'react-konva';
+import useImage from 'use-image';
+import { useLocation } from 'wouter';
+
+import { isMobile } from '../../environment';
+import { withRef } from '../../lib/with-ref';
+import { PlanetInfoCard } from './planet-info-card';
+import { createSlug } from '../../lib/create-slug';
+
+interface Props {
+	planet: unknown;
+	planetId: string;
+	home: boolean;
+}
+
+export const PlanetVisual = ({ planet, home, planetId }: Props) => {
+	if (!planet || typeof planet !== 'object' || !('visual' in planet)) return;
+	const name = 'name' in planet && typeof planet.name === 'string' ? planet.name : 'Unknown Planet';
+
+	const conf = planet.visual;
+	if (!conf || typeof conf !== 'object') return;
+
+	const radius = 'radius' in conf && typeof conf.radius === 'number' ? conf.radius : 0;
+	const orbitRadius = 'orbitRadius' in conf && typeof conf.orbitRadius === 'number' ? conf.orbitRadius : 0;
+	const orbitDuration = 'orbitDuration' in conf && typeof conf.orbitDuration === 'number' ? conf.orbitDuration : 300;
+	const imageUrl = 'imageUrl' in conf && typeof conf.imageUrl === 'string' ? conf.imageUrl : '';
+
+	const [_, navigate] = useLocation();
+
+	const planetGroupRef = useRef<Konva.Group>(null);
+	const [planetRef, setPlanetRef] = useState<Konva.Image | Konva.Circle | null>(null);
+	const labelRef = useRef<Konva.Text>(null);
+	const outlineRef = useRef<Konva.Circle>(null);
+
+	const [planetImg, planetImgStatus] = useImage(imageUrl);
+
+	const [active, setActive] = useState(isMobile);
+	const [cardType, setCardType] = useState<'preview' | 'expanded'>(isMobile ? 'preview' : 'expanded');
+
+	const [x, setX] = useState(orbitRadius);
+	const [y, setY] = useState(orbitRadius);
+
+	useEffect(() => {
+		withRef(labelRef, (label) => {
+			label.to({ opacity: active ? 1 : 0, duration: 0.2 });
+		});
+
+		if (planetRef && planetRef.getLayer()) {
+			planetRef.to({ opacity: active ? 1 : 0.8, duration: 0.2 });
+		}
+
+		withRef(outlineRef, (outline) => {
+			outline.to({ radius: active ? (radius + 5) * 1.2 : radius + 5, duration: 0.2 });
+		});
+
+		document.body.style.cursor = active ? 'pointer' : 'unset';
+	}, [active, planetRef]);
+
+	useEffect(() => {
+		const planetGroup = planetGroupRef.current;
+		if (!planetGroup) return;
+
+		// CREDIT:
+		// Orbit was drafted by Colin Cheung (https://jsfiddle.net/ColinCee/a2yu0af6/)
+		// I adapted it for my use-case
+
+		let theta = Math.random() * (2 * Math.PI);
+		const anim = new Konva.Animation((time) => {
+			if (!time) return;
+
+			theta += 1 / (orbitDuration * 2.5);
+			if (theta >= 2 * Math.PI) theta = 0;
+
+			const x = orbitRadius * Math.cos(theta);
+			const y = -orbitRadius * Math.sin(theta);
+
+			setX(x);
+			setY(y);
+		}, planetGroup.getLayer());
+
+		anim.start();
+		return () => void anim.stop();
+	}, []);
+
+	const [imageRatio, setImageRatio] = useState(1);
+
+	useEffect(() => {
+		if (!planetImg) return;
+		const ratio = planetImg.naturalWidth / planetImg.naturalHeight;
+		setImageRatio(ratio);
+	}, [planetImg]);
+
+	const goToFeed = () => navigate(`/feed/${createSlug(name)}/${planetId}`);
+
+	return (
+		<>
+			<Circle
+				stroke={home ? 'green' : 'grey'}
+				strokeWidth={0.1}
+				radius={orbitRadius}
+				listening={false}
+				perfectDrawEnabled={false}
+			/>
+
+			<Group ref={planetGroupRef} x={x} y={y}>
+				<If condition={planetImgStatus === 'loaded'}>
+					<Then>
+						<Image
+							ref={(ref) => setPlanetRef(ref)}
+							offset={{ x: radius * imageRatio, y: radius }}
+							image={planetImg}
+							width={radius * 2 * imageRatio}
+							height={radius * 2}
+							listening={false}
+							perfectDrawEnabled={false}
+						/>
+					</Then>
+					<Else>
+						<Circle
+							ref={(ref) => setPlanetRef(ref)}
+							fill='white'
+							radius={radius}
+							listening={false}
+							perfectDrawEnabled={false}
+						/>
+					</Else>
+				</If>
+
+				<Circle
+					ref={outlineRef}
+					stroke='rgba(148, 148, 148, 0.4)'
+					perfectDrawEnabled={false}
+					strokeWidth={1}
+					radius={radius + 10}
+					onTap={() => {
+						if (!active) {
+							setActive(true);
+							setCardType('preview');
+						} else if (cardType === 'preview') {
+							setCardType('expanded');
+						} else setActive(!active);
+					}}
+					onClick={goToFeed}
+					onMouseEnter={() => setActive(true)}
+					onMouseLeave={() => setActive(false)}
+				/>
+
+				<PlanetInfoCard
+					planet={planet}
+					home={home}
+					offset={{ x: -(radius + 5) * 1.2 - 5, y: 0 }}
+					active={active}
+					type={cardType}
+					onTap={goToFeed}
+				/>
+			</Group>
+		</>
+	);
+};
diff --git a/client/src/pages/planet-map/space-traveller.tsx b/client/src/pages/planet-map/space-traveller.tsx
new file mode 100644
index 00000000..87cc8885
--- /dev/null
+++ b/client/src/pages/planet-map/space-traveller.tsx
@@ -0,0 +1,73 @@
+import Konva from 'konva';
+import { useEffect, useRef, useState } from 'react';
+import { Image } from 'react-konva';
+
+interface Props {
+	active: boolean;
+}
+
+const sprites = import.meta.glob('../../assets/images/amongus-*.webp');
+
+export const SpaceTraveller = (props: Props) => {
+	const ref = useRef<Konva.Image>(null);
+	const [underlyingImage, setUnderlyingImage] = useState<HTMLImageElement>();
+
+	const initSize = 48;
+
+	useEffect(() => {
+		const possibleImages = Object.entries(sprites);
+		const selectedImage = possibleImages[Math.floor(Math.random() * possibleImages.length)];
+		selectedImage[1]().then((mod) => {
+			if (!mod || typeof mod !== 'object' || !('default' in mod)) return;
+
+			const imgUrl = mod.default;
+			if (typeof imgUrl !== 'string') return;
+
+			const img = document.createElement('img');
+			img.src = imgUrl;
+			setUnderlyingImage(img);
+		});
+	}, []);
+
+	useEffect(() => {
+		const img = ref.current;
+		if (!img) return;
+
+		if (!props.active) return;
+
+		const speed = Math.random();
+
+		img.x(-initSize);
+		img.y(Math.random() * innerHeight);
+		img.to({ scaleX: 1, scaleY: 1, duration: 2 });
+
+		const anim = new Konva.Animation((frame) => {
+			if (!frame) return;
+			img.x(img.x() + speed);
+			img.rotate(0.15);
+		}, img.getLayer());
+
+		anim.start();
+
+		return () => {
+			const stopSeconds = 2;
+			img.to({ scaleX: 0, scaleY: 0, duration: stopSeconds });
+			setTimeout(() => anim.stop(), stopSeconds * 1000);
+		};
+	}, [props.active]);
+
+	return (
+		<Image
+			scaleY={0}
+			scaleX={0}
+			listening={false}
+			perfectDrawEnabled={false}
+			shadowColor='white'
+			shadowBlur={10}
+			ref={ref}
+			width={initSize}
+			height={initSize}
+			image={underlyingImage}
+		/>
+	);
+};
diff --git a/client/src/pages/planet-map/star-background.tsx b/client/src/pages/planet-map/star-background.tsx
new file mode 100644
index 00000000..2591b120
--- /dev/null
+++ b/client/src/pages/planet-map/star-background.tsx
@@ -0,0 +1,48 @@
+import Konva from 'konva';
+import { Vector2d } from 'konva/lib/types';
+import { ReactNode, useEffect, useRef, useState } from 'react';
+import { Layer } from 'react-konva';
+
+import { DecorativeStar } from './decorative-star';
+
+interface Props {
+	starAmount?: number;
+}
+
+export const StarBackground = ({ starAmount = 200 }: Props) => {
+	const layerRef = useRef<Konva.Layer>(null);
+	const [stars, setStars] = useState<ReactNode[]>([]);
+
+	useEffect(() => {
+		const randomVector = () => {
+			return {
+				x: Math.random() * innerWidth,
+				y: Math.random() * innerHeight,
+			} satisfies Vector2d;
+		};
+
+		const elements = [];
+
+		for (let i = 0; i < starAmount; i++) {
+			const vect = randomVector();
+			elements.push(<DecorativeStar key={i} {...vect} />);
+		}
+
+		setStars(elements);
+	}, []);
+
+	useEffect(() => {
+		const layer = layerRef.current;
+		if (!layer) return;
+
+		const lockLayer = () => {
+			layer.x(0);
+			layer.y(0);
+		};
+
+		layer.on('drag', lockLayer);
+		return () => void layer.off('drag', lockLayer);
+	}, [layerRef]);
+
+	return <Layer ref={layerRef}>{stars}</Layer>;
+};
diff --git a/client/src/pages/planets/planets-component.tsx b/client/src/pages/planets/planets-component.tsx
new file mode 100644
index 00000000..47a7ec6c
--- /dev/null
+++ b/client/src/pages/planets/planets-component.tsx
@@ -0,0 +1,7 @@
+import PlanetsHtml from './planets-html';
+
+const Planets = () => {
+	return <PlanetsHtml />;
+};
+
+export default Planets;
diff --git a/client/src/pages/planets/planets-html.tsx b/client/src/pages/planets/planets-html.tsx
new file mode 100644
index 00000000..32dba3d3
--- /dev/null
+++ b/client/src/pages/planets/planets-html.tsx
@@ -0,0 +1,38 @@
+import styles from './planets.module.css';
+
+const PlanetsHtml = () => {
+	return (
+		<div className={styles.planetsContainer}>
+			<div className={styles.sun}></div>
+			<div className={`${styles.orbit} ${styles.mercuryOrbit}`}>
+				<div className={`${styles.planet} ${styles.mercury}`}></div>
+			</div>
+			<div className={`${styles.orbit} ${styles.venusOrbit}`}>
+				<div className={`${styles.planet} ${styles.venus}`}></div>
+			</div>
+			<div className={`${styles.orbit} ${styles.earthOrbit}`}>
+				<div className={`${styles.planet} ${styles.earth}`}></div>
+			</div>
+			<div className={`${styles.orbit} ${styles.marsOrbit}`}>
+				<div className={`${styles.planet} ${styles.mars}`}></div>
+			</div>
+			<div className={`${styles.orbit} ${styles.jupiterOrbit}`}>
+				<div className={`${styles.planet} ${styles.jupiter}`}></div>
+			</div>
+			<div className={`${styles.orbit} ${styles.saturnOrbit}`}>
+				<div className={`${styles.planet} ${styles.saturn}`}></div>
+			</div>
+			<div className={`${styles.orbit} ${styles.uranusOrbit}`}>
+				<div className={`${styles.planet} ${styles.uranus}`}></div>
+			</div>
+			<div className={`${styles.orbit} ${styles.neptuneOrbit}`}>
+				<div className={`${styles.planet} ${styles.neptune}`}></div>
+			</div>
+			<div className={`${styles.orbit} ${styles.plutoOrbit}`}>
+				<div className={`${styles.planet} ${styles.pluto}`}></div>
+			</div>
+		</div>
+	);
+};
+
+export default PlanetsHtml;
diff --git a/client/src/pages/planets/planets.module.css b/client/src/pages/planets/planets.module.css
new file mode 100644
index 00000000..a5023931
--- /dev/null
+++ b/client/src/pages/planets/planets.module.css
@@ -0,0 +1,233 @@
+.planets-container {
+    background: var(--planets-background);
+    position: relative;
+    height: 100%;
+    overflow: hidden;
+}
+
+.sun, .planet, .orbit {
+    position: absolute;
+    border-radius: 50%;
+}
+
+.sun {
+    top: 44%;
+    left: 47%;
+    width: 100px;
+    height: 100px;
+    background-color: yellow;
+    animation: rotate 10s infinite linear;
+}
+
+.orbit {
+    top: 50%;
+    left: 50%;
+    border: 1px dashed rgba(255, 255, 255, 0.3);
+}
+
+.mercury-orbit {
+    width: 180px;
+    height: 180px;
+    animation: orbit-mercury 10s infinite linear;
+}
+
+.mercury {
+    top:53px;
+    background-color: gray;
+    width: 10px;
+    height: 10px;
+}
+
+.venus-orbit {
+    width: 280px;
+    height: 280px;
+    animation: orbit-venus 20s infinite linear;
+}
+
+.venus {
+    top:85px;
+    background-color: orange;
+    width: 15px;
+    height: 15px;
+}
+
+.earth-orbit {
+    width: 380px;
+    height: 380px;
+    animation: orbit-earth 30s infinite linear;
+}
+
+.earth {
+    top:117px;
+    background-color: blue;
+    width: 20px;
+    height: 20px;
+}
+
+.mars-orbit {
+    width: 480px;
+    height: 480px;
+    animation: orbit-mars 40s infinite linear;
+}
+
+.mars {
+    top:177px;
+    background-color: red;
+    width: 12px;
+    height: 12px;
+}
+
+.jupiter-orbit {
+    width: 580px;
+    height: 580px;
+    animation: orbit-jupiter 50s infinite linear;
+}
+
+.jupiter {
+    top:152px;
+    background-color: brown;
+    width: 50px;
+    height: 50px;
+}
+
+.saturn-orbit {
+    width: 680px;
+    height: 680px;
+    animation: orbit-saturn 60s infinite linear;
+}
+
+.saturn {
+    top:194px;
+    background-color: gold;
+    width: 45px;
+    height: 45px;
+}
+
+.uranus-orbit {
+    width: 780px;
+    height: 780px;
+    animation: orbit-uranus 70s infinite linear;
+}
+
+.uranus {
+    top:257px;
+    background-color: lightblue;
+    width: 35px;
+    height: 35px;
+}
+
+.neptune-orbit {
+    width: 880px;
+    height: 880px;
+    animation: orbit-neptune 80s infinite linear;
+}
+
+.neptune {
+    top:309px;
+    background-color: darkblue;
+    width: 30px;
+    height: 30px;
+}
+
+.pluto-orbit {
+    width: 980px;
+    height: 980px;
+    animation: orbit-pluto 90s infinite linear;
+}
+
+.pluto {
+    top:420px;
+    background-color: lightgray;
+    width: 8px;
+    height: 8px;
+}
+
+@keyframes rotate {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes orbit-mercury {
+    0% {
+        transform: translate(-50%, -50%) rotate(0deg);
+    }
+    100% {
+        transform: translate(-50%, -50%) rotate(360deg);
+    }
+}
+
+@keyframes orbit-venus {
+    0% {
+        transform: translate(-50%, -50%) rotate(0deg);
+    }
+    100% {
+        transform: translate(-50%, -50%) rotate(360deg);
+    }
+}
+
+@keyframes orbit-earth {
+    0% {
+        transform: translate(-50%, -50%) rotate(0deg);
+    }
+    100% {
+        transform: translate(-50%, -50%) rotate(360deg);
+    }
+}
+
+@keyframes orbit-mars {
+    0% {
+        transform: translate(-50%, -50%) rotate(0deg);
+    }
+    100% {
+        transform: translate(-50%, -50%) rotate(360deg);
+    }
+}
+
+@keyframes orbit-jupiter {
+    0% {
+        transform: translate(-50%, -50%) rotate(0deg);
+    }
+    100% {
+        transform: translate(-50%, -50%) rotate(360deg);
+    }
+}
+
+@keyframes orbit-saturn {
+    0% {
+        transform: translate(-50%, -50%) rotate(0deg);
+    }
+    100% {
+        transform: translate(-50%, -50%) rotate(360deg);
+    }
+}
+
+@keyframes orbit-uranus {
+    0% {
+        transform: translate(-50%, -50%) rotate(0deg);
+    }
+    100% {
+        transform: translate(-50%, -50%) rotate(360deg);
+    }
+}
+
+@keyframes orbit-neptune {
+    0% {
+        transform: translate(-50%, -50%) rotate(0deg);
+    }
+    100% {
+        transform: translate(-50%, -50%) rotate(360deg);
+    }
+}
+
+@keyframes orbit-pluto {
+    0% {
+        transform: translate(-50%, -50%) rotate(0deg);
+    }
+    100% {
+        transform: translate(-50%, -50%) rotate(360deg);
+    }
+}
\ No newline at end of file
diff --git a/client/src/pages/post-page/post-page.module.css b/client/src/pages/post-page/post-page.module.css
new file mode 100644
index 00000000..3c219f01
--- /dev/null
+++ b/client/src/pages/post-page/post-page.module.css
@@ -0,0 +1,52 @@
+.general {
+	font-family: TTOctosquares;
+	width: 100%;
+}
+
+.username {
+	padding: 2px 8px;
+	margin: 2px 0px;
+	width: max-content;
+	text-align: left;
+	font-size: 1rem;
+}
+
+.post {
+	padding: 10px;
+	margin: 2px 0px;
+	text-align: left;
+	word-break: break-word;
+	font-size: 1.1rem;
+}
+
+.text-box {
+	border: none;
+	font-family: TTOctosquares;
+	width: 100%;
+	height: 250px;
+	background-color: inherit;
+	resize: none;
+}
+
+.side-buttons {
+	display: flex;
+	padding: 6px;
+	padding-right: 0px;
+	justify-content: right;
+}
+
+.select {
+	color: #fff;
+	background-color: #000;
+	border-radius: 10px;
+	margin-right: 10px;
+	border: #000;
+	box-shadow: 4px 5px 0px var(--soft-shadow);
+	text-align: center;
+}
+
+.submit {
+	border: none;
+	background-color: transparent;
+	padding: 0px;
+}
diff --git a/client/src/pages/post-page/post-page.tsx b/client/src/pages/post-page/post-page.tsx
new file mode 100644
index 00000000..28321bd6
--- /dev/null
+++ b/client/src/pages/post-page/post-page.tsx
@@ -0,0 +1,128 @@
+import styles from './post-page.module.css';
+import Page from '../../components/Page/Page';
+import UIBox from '../../components/UIBox/UIBox';
+import { useContext, useEffect, useState } from 'react';
+import { api } from '../../lib/axios';
+import { toast } from 'react-toastify';
+import { useLocation } from 'wouter';
+import { UserAuthContext } from '../../lib/auth';
+
+interface PostProps {}
+
+const PostPage = function (props: PostProps) {
+	const user = useContext(UserAuthContext);
+
+	interface Planet {
+		_id: string;
+		name: string;
+	}
+
+	const [planets, setPlanets] = useState<Array<Planet>>([]);
+	const [_, setLocation] = useLocation();
+
+	useEffect(() => {
+		(async function fetchPlanets() {
+			try {
+				const { data: res } = await api.get('/planet');
+				const data = res.value;
+				setPlanets(data);
+			} catch (err) {
+				console.log(err);
+			}
+		})();
+	}, []);
+
+	async function submitPost() {
+		const geoLoc = await new Promise<GeolocationPosition | undefined>((res) => {
+			navigator.geolocation.getCurrentPosition(
+				(p) => res(p),
+				() => res(undefined),
+			);
+		});
+
+		const postContent = document.getElementsByTagName('textarea');
+		const content = postContent[0].value;
+		const planet = document.getElementsByTagName('select');
+		const planetID = planet[0].value;
+
+		const postRequest = {
+			content: content,
+			location: {
+				latitude: geoLoc ? geoLoc.coords.latitude : 0,
+				longitude: geoLoc ? geoLoc.coords.longitude : 0,
+				planetId: planetID,
+			},
+		};
+
+		console.log(postRequest);
+
+		try {
+			const res = await api.post('/post', postRequest);
+			setLocation('/profile');
+			toast.success(res.data.message);
+		} catch (err: any) {
+			toast.error(`${err.response.data.error}`, {
+				position: 'top-right',
+				hideProgressBar: false,
+				closeOnClick: true,
+				pauseOnHover: true,
+				draggable: true,
+				progress: undefined,
+				theme: 'colored',
+			});
+		}
+	}
+
+	return (
+		<>
+			<Page
+				pageName='Post'
+				content={
+					<>
+						<div className={styles.general}>
+							<UIBox
+								className={styles.username}
+								content={user ? `@${user.userName}` : 'Unknown'}
+								curved
+								dark
+							/>
+							<UIBox
+								className={styles.post}
+								content={
+									<textarea
+										id='post'
+										name='post'
+										className={styles.textBox}
+										maxLength={324}
+										placeholder='Share your ideas...'></textarea>
+								}
+								curved
+							/>
+							<div className={styles.sideButtons}>
+								<select
+									name='planets'
+									id='planets'
+									defaultValue={planets[0]?._id}
+									className={styles.select}
+									required>
+									{planets.map((planet: any, index: number) => {
+										return (
+											<option key={index} value={planet._id}>
+												{planet.name}
+											</option>
+										);
+									})}
+								</select>
+								<button className={styles.submit} onClick={submitPost}>
+									<UIBox content='Post' curved dark clickable />
+								</button>
+							</div>
+						</div>
+					</>
+				}
+			/>
+		</>
+	);
+};
+
+export default PostPage;
diff --git a/client/src/pages/post/post.module.css b/client/src/pages/post/post.module.css
new file mode 100644
index 00000000..e69de29b
diff --git a/client/src/pages/post/post.tsx b/client/src/pages/post/post.tsx
new file mode 100644
index 00000000..c6f6f373
--- /dev/null
+++ b/client/src/pages/post/post.tsx
@@ -0,0 +1,94 @@
+import styles from './post.module.css';
+
+import React, { useEffect, useState } from 'react';
+import { api } from '../../lib/axios';
+import Post from '../../components/Post/Post';
+import Page from '../../components/Page/Page';
+import Comment from '../../components/Comment/Comment';
+
+interface Post {
+	_id: string;
+	authorId: string;
+	content: string;
+	likeCount: number;
+	commentCount: number;
+	repostCount: number;
+	location: {
+		planetId: string;
+		latitude: number;
+		longitude: number;
+		_id: string;
+	};
+	media: any[];
+	createdAt: Date;
+	deleted: boolean;
+	userName: string;
+}
+
+interface PostResponse {
+	statusCode: number;
+	statusMessage: string;
+	value: Post;
+	success: boolean;
+}
+
+interface Props {
+	id: string;
+}
+
+const PostDetailPage: React.FC<Props> = ({ id }) => {
+	const [post, setPost] = useState<Post | null>(null);
+	const [error, setError] = useState<string | null>(null);
+
+	useEffect(() => {
+		const fetchPost = async () => {
+			try {
+				const response = await api.get<PostResponse>(`/post/${id}`);
+				if (response.data.success) {
+					setPost(response.data.value);
+				} else {
+					setError(response.data.statusMessage);
+				}
+			} catch (err) {
+				setError('Error fetching the post.');
+			}
+		};
+
+		fetchPost();
+	}, [id]);
+
+	if (error) {
+		return <div>Error: {error}</div>;
+	}
+
+	if (!post) {
+		return <div>Loading...</div>;
+	}
+
+	const postDetail = (
+		<Post
+			username={post.userName}
+			content={post.content}
+			authorId={`${post.authorId}`}
+			postId={`${post._id}`}
+			createdAt={new Date(post.createdAt)}
+			repostCount={post.repostCount}
+			likeCount={post.likeCount}
+			commentCount={post.commentCount}
+		/>
+	);
+
+	return (
+		<Page
+			pageName='Post Detail'
+			content={
+				<>
+					{postDetail}
+					<Comment postId={post._id} />
+				</>
+			}
+		/>
+	);
+};
+
+export default PostDetailPage;
diff --git a/client/src/pages/profile-page/profile-page.module.css b/client/src/pages/profile-page/profile-page.module.css
new file mode 100644
index 00000000..8b137891
--- /dev/null
+++ b/client/src/pages/profile-page/profile-page.module.css
@@ -0,0 +1 @@
+
diff --git a/client/src/pages/profile-page/profile-page.tsx b/client/src/pages/profile-page/profile-page.tsx
new file mode 100644
index 00000000..41e1b47f
--- /dev/null
+++ b/client/src/pages/profile-page/profile-page.tsx
@@ -0,0 +1,87 @@
+import styles from './profile-page.module.css';
+import Page from '../../components/Page/Page';
+import Post from '../../components/Post/Post';
+import Profile from '../../components/Profile/Profile';
+import { api } from '../../lib/axios';
+import { useContext, useEffect, useState } from 'react';
+import { UserAuthContext } from '../../lib/auth';
+
+interface Post {
+	authorId: string;
+	commentCount: number;
+	content: string;
+	createdAt: Date;
+	deleted: false;
+	likeCount: number;
+	location: {
+		planetId: string;
+		latitude: number;
+		longitude: number;
+		_id: string;
+	};
+	media: [];
+	repostCount: number;
+	__v: number;
+	_id: string;
+}
+
+const ProfilePage = () => {
+	const user = useContext(UserAuthContext);
+	const [displayedPosts, setDisplayedPosts] = useState(Array<JSX.Element>());
+
+	useEffect(() => {
+		const displayPosts = async function () {
+			setDisplayedPosts(await getPosts());
+		};
+		displayPosts();
+	}, [user]);
+
+	async function getPosts() {
+		try {
+			if (!user) return;
+			const res = await api.get('/feed/' + user._id);
+			const postArray = res.data.value;
+			let postElements = postArray.map((post: Post) => {
+				return (
+					<Post
+						username={user.userName}
+						authorId={user._id}
+						content={post.content}
+						postId={post._id}
+						likeCount={post.likeCount}
+						commentCount={post.commentCount}
+						repostCount={post.repostCount}
+						key={post._id}
+					/>
+				);
+			});
+			if (postArray.length == 0) {
+				postElements = [<>Nothing yet...</>];
+			}
+			return postElements;
+		} catch (err) {
+			console.log(err);
+		}
+	}
+
+	return (
+		<Page
+			pageName='Profile'
+			content={
+				<>
+					<Profile
+						userId={user._id}
+						username={user.userName}
+						// description='I like eating lettuce and broccoli'
+						follower={user.followerCount}
+						following={user.followingCount}
+						postCount={user.postCount}
+					/>
+					{displayedPosts}
+				</>
+			}
+		/>
+	);
+};
+
+export default ProfilePage;
diff --git a/client/src/pages/signup/signup-html.tsx b/client/src/pages/signup/signup-html.tsx
index f7d23023..15c9d516 100644
--- a/client/src/pages/signup/signup-html.tsx
+++ b/client/src/pages/signup/signup-html.tsx
@@ -1,6 +1,7 @@
 import { useLocation } from 'wouter';
 import styles from './signup.module.css';
 import logoUrl from '../../assets/images/SkynetLogo.png';
+import { GoogleAuthButton } from '../../components/google-auth-btn/google-auth-btn';
 
 const SignupHtml = ({
 	planets,
@@ -72,6 +73,13 @@ const SignupHtml = ({
 							<button className={`${styles.button}`}>SIGN UP</button>
 						</div>
 					</form>
+
+					<hr />
+
+					<GoogleAuthButton className={styles.button} text='Sign Up with Google' />
+
+					<hr />
+
 					<div>
 						<span className={styles.span}>Already a User. Login Below</span>
 						<button
diff --git a/client/src/pages/test-page/test-page.module.css b/client/src/pages/test-page/test-page.module.css
index 3316f867..d5d291b2 100644
--- a/client/src/pages/test-page/test-page.module.css
+++ b/client/src/pages/test-page/test-page.module.css
@@ -1,4 +1,4 @@
 .page-container {
-    max-width: 100vw;
-    padding: 0%;
-}
\ No newline at end of file
+	max-width: 100vw;
+	padding: 0%;
+}
diff --git a/client/src/pages/test-page/test-page.tsx b/client/src/pages/test-page/test-page.tsx
index 60c9823a..982a691a 100644
--- a/client/src/pages/test-page/test-page.tsx
+++ b/client/src/pages/test-page/test-page.tsx
@@ -12,9 +12,9 @@ const Test = () => {
 		<html>
 			<body>
 				<Container className={styles.pageContainer}>
-					<Header pageName='General feed'/>
-					<Post username='@MarcusTheDumbs' text='Testing' postURL='./about'/>
-                    <Hotbar />
+					<Header pageName='General feed' />
+					<Post username='@MarcusTheDumbs' text='Testing' postURL='./about' />
+					<Hotbar />
 				</Container>
 			</body>
 		</html>
diff --git a/client/src/pages/user-page/user-page.module.css b/client/src/pages/user-page/user-page.module.css
new file mode 100644
index 00000000..8b137891
--- /dev/null
+++ b/client/src/pages/user-page/user-page.module.css
@@ -0,0 +1 @@
+
diff --git a/client/src/pages/user-page/user-page.tsx b/client/src/pages/user-page/user-page.tsx
new file mode 100644
index 00000000..1c1bb809
--- /dev/null
+++ b/client/src/pages/user-page/user-page.tsx
@@ -0,0 +1,121 @@
+import styles from './user-page.module.css';
+import Page from '../../components/Page/Page';
+import Post from '../../components/Post/Post';
+import Profile from '../../components/Profile/Profile';
+import { useLocation, useParams } from 'wouter';
+import { useEffect, useState } from 'react';
+import { api } from '../../lib/axios';
+import { isUser } from '../../lib/isUser';
+
+interface Post {
+	authorId: string;
+	commentCount: number;
+	content: string;
+	createdAt: Date;
+	deleted: false;
+	likeCount: number;
+	location: {
+		planetId: string;
+		latitude: number;
+		longitude: number;
+		_id: string;
+	};
+	media: [];
+	repostCount: number;
+	__v: number;
+	_id: string;
+}
+
+const UserPage = () => {
+	const [username, setUsername] = useState('');
+	const [follower, setFollower] = useState(0);
+	const [following, setFollowing] = useState(0);
+	const [postCount, setPostCount] = useState(0);
+	const [displayedPosts, setDisplayedPosts] = useState(Array<JSX.Element>());
+	const [userID, setUserID] = useState('');
+	const [_, navigate] = useLocation();
+	let { id } = useParams() ?? '';
+
+	useEffect(() => {
+		const getUserData = async function () {
+			if (id !== undefined && (await isUser(id))) {
+				navigate('/profile');
+				return;
+			} else {
+				try {
+					if (id == '') return;
+					const res = await api.get('/user/' + id);
+					const data = res.data.value;
+					setUserID(data._id);
+					setUsername(data.userName);
+					setFollower(data.followerCount);
+					setFollowing(data.followingCount);
+					setPostCount(data.postCount);
+					// setDisplayedPosts(await getPosts());
+				} catch (err) {
+					console.log(err);
+				}
+			}
+		};
+
+		getUserData();
+	}, []);
+
+	useEffect(() => {
+		const displayPosts = async function () {
+			setDisplayedPosts(await getPosts());
+		};
+		displayPosts();
+	}, [userID]);
+
+	async function getPosts() {
+		try {
+			if (userID == '') return;
+			const res = await api.get('/feed/' + userID);
+			const postArray = res.data.value;
+			console.log(postArray);
+			let postElements = postArray.map((post: Post) => {
+				return (
+					<Post
+						username={username}
+						authorId={userID}
+						content={post.content}
+						postId={post._id}
+						likeCount={post.likeCount}
+						commentCount={post.commentCount}
+						repostCount={post.repostCount}
+						key={post._id}
+					/>
+				);
+			});
+			if (postArray.length == 0) {
+				postElements = [<>Nothing yet...</>];
+			}
+			return postElements;
+		} catch (err) {
+			console.log(err);
+		}
+	}
+
+	return (
+		<Page
+			pageName={username}
+			content={
+				<>
+					<Profile
+						userId={userID}
+						username={username}
+						// description={'I like eating lettuce and broccoli'}
+						follower={follower}
+						following={following}
+						postCount={postCount}
+						outsideUser
+					/>
+					{displayedPosts}
+				</>
+			}
+		/>
+	);
+};
+
+export default UserPage;
diff --git a/client/src/pages/user-settings/options/change-email.tsx b/client/src/pages/user-settings/options/change-email.tsx
new file mode 100644
index 00000000..3b406aff
--- /dev/null
+++ b/client/src/pages/user-settings/options/change-email.tsx
@@ -0,0 +1,119 @@
+import styles from '../user-settings.module.css';
+
+import ModalConfirmation from '../../../components/ModalConfirmation/ModalConfirmation';
+import Button from 'react-bootstrap/Button';
+
+interface Props {
+	emailBody1: {
+		showEmailBody1: boolean;
+		setEmailBody1: any;
+	};
+	emailBody2: {
+		showEmailBody2: boolean;
+		setEmailBody2: any;
+		changeEmail: any;
+		currEmail: string;
+		setCurrEmail: any;
+		emailInput: string;
+		setEmailInput: any;
+		confEmailInput: string;
+		setConfEmailInput: any;
+	};
+}
+
+const ChangeEmailModal = (props: Props) => {
+	const clearFields = () => {
+        props.emailBody2.setCurrEmail('');
+		props.emailBody2.setEmailInput('');
+		props.emailBody2.setConfEmailInput('');
+	};
+
+	return (
+		<>
+			<ModalConfirmation
+				title='Change Email'
+				show={props.emailBody1.showEmailBody1}
+				body={<p>Are you sure you want to change your Email?</p>}
+				disableFooter={false}
+				footer={
+					<div className='w-100 d-flex justify-content-center'>
+						<Button
+							className='me-3'
+							variant='secondary'
+							onClick={() => {
+								props.emailBody1.setEmailBody1(false);
+							}}>
+							Close
+						</Button>
+						<Button
+							className='ms-3'
+							variant='danger'
+							onClick={() => {
+								props.emailBody1.setEmailBody1(false);
+								props.emailBody2.setEmailBody2(true);
+							}}>
+							Continue
+						</Button>
+					</div>
+				}
+			/>
+
+			<ModalConfirmation
+				title='Change Email'
+				show={props.emailBody2.showEmailBody2}
+				onHide={() => props.emailBody2.setEmailBody2(false)}
+				body={
+					<>
+						<p>What would you like your new email to be?</p>
+						<form onSubmit={props.emailBody2.changeEmail}>
+							<input
+								className={`${styles.confInput} my-2 w-75`}
+								name='currentEmail'
+								placeholder='CURRENT EMAIL'
+								type='text'
+								value={props.emailBody2.currEmail}
+								onChange={(event) => props.emailBody2.setCurrEmail(event.target.value)}
+								required
+							/>
+							<input
+								className={`${styles.confInput} mb-2 w-75`}
+								name='newEmail'
+								placeholder='NEW EMAIL'
+								type='text'
+								value={props.emailBody2.emailInput}
+								onChange={(event) => props.emailBody2.setEmailInput(event.target.value)}
+								required
+							/>
+							<input
+								className={`${styles.confInput} mb-4 w-75`}
+								name='newEmailConf'
+								placeholder='CONFIRM NEW EMAIL'
+								type='text'
+								value={props.emailBody2.confEmailInput}
+								onChange={(event) => props.emailBody2.setConfEmailInput(event.target.value)}
+								required
+							/>
+							<div className='d-flex justify-content-evenly align-items-center'>
+								<button className='btn btn-danger' type='submit'>
+									Change Email
+								</button>
+								<button
+									className='btn btn-secondary'
+									type='button'
+									onClick={() => {
+										props.emailBody2.setEmailBody2(false);
+										clearFields();
+									}}>
+									Cancel
+								</button>
+							</div>
+						</form>
+					</>
+				}
+				disableFooter={true}
+			/>
+		</>
+	);
+};
+
+export default ChangeEmailModal;
diff --git a/client/src/pages/user-settings/options/change-password-modal.tsx b/client/src/pages/user-settings/options/change-password-modal.tsx
new file mode 100644
index 00000000..eee3be1c
--- /dev/null
+++ b/client/src/pages/user-settings/options/change-password-modal.tsx
@@ -0,0 +1,145 @@
+import { useState } from 'react';
+
+import styles from '../user-settings.module.css';
+
+import ModalConfirmation from '../../../components/ModalConfirmation/ModalConfirmation';
+import Button from 'react-bootstrap/Button';
+import logoUrl from '../../../assets/images/SkynetLogo.png';
+
+interface Props {
+	passBody1: {
+		showPassBody1: boolean;
+		setShowPass1: any;
+	};
+	passBody2: {
+		showPassBody2: boolean;
+		setShowPass2: any;
+		changePassword: any;
+		password: string;
+		setPassword: any;
+		newPassword: string;
+		setNewPassword: any;
+		confPassword: string;
+		setConfPassword: any;
+	};
+}
+
+const ChangePasswordModal = (props: Props) => {
+	const clearFields = () => {
+		props.passBody2.setPassword('');
+		props.passBody2.setNewPassword('');
+		props.passBody2.setConfPassword('');
+	};
+
+	return (
+		<>
+			{/* First Modal for password change */}
+			<ModalConfirmation
+				title='Change Password'
+				show={props.passBody1.showPassBody1}
+				onHide={() => props.passBody1.setShowPass1(false)}
+				body={
+					<p>
+						Are you sure you want to change your password?
+						<br />
+						This action cannot be undone.
+					</p>
+				}
+				disableFooter={false}
+				footer={
+					<div className='w-100 d-flex justify-content-center'>
+						<Button
+							className='me-3'
+							variant='secondary'
+							onClick={() => {
+								props.passBody1.setShowPass1(false);
+							}}>
+							Close
+						</Button>
+						<Button
+							className='ms-3'
+							variant='danger'
+							onClick={() => {
+								props.passBody1.setShowPass1(false);
+								props.passBody2.setShowPass2(true);
+							}}>
+							Continue
+						</Button>
+					</div>
+				}
+			/>
+
+			{/* Second Modal for password change */}
+			<ModalConfirmation
+				title='Change Password'
+				show={props.passBody2.showPassBody2}
+				onHide={() => props.passBody2.setShowPass2(false)}
+				disableFooter={true}
+				header={
+					<div className='mt-3'>
+						<img className={`img-fluid w-25`} src={logoUrl} alt='Skynet Logo' />
+						<p>Change Password</p>
+					</div>
+				}
+				body={
+					<>
+						<div className='text-center'>
+							<form onSubmit={props.passBody2.changePassword}>
+								<input
+									className='mb-2'
+									name='password'
+									placeholder='Current Password'
+									type='password'
+									value={props.passBody2.password}
+									onChange={(event) => props.passBody2.setPassword(event.target.value)}
+									required
+								/>
+								<br />
+								<input
+									className='mb-2'
+									name='newpassword'
+									placeholder='New Password'
+									type='password'
+									value={props.passBody2.newPassword}
+									onChange={(event) => props.passBody2.setNewPassword(event.target.value)}
+									required
+								/>
+								<br />
+								<input
+									className='mb-2'
+									name='confirmpassword'
+									placeholder='Confirm New Password'
+									type='password'
+									value={props.passBody2.confPassword}
+									onChange={(event) => props.passBody2.setConfPassword(event.target.value)}
+									required
+								/>
+								<br />
+								<div className='d-flex justify-content-evenly align-items-center my-3'>
+									<div className='text-center'>
+										<button className='btn btn-danger' type='submit'>
+											Change Password
+										</button>
+									</div>
+									<div className='text-center'>
+										<button
+											className='btn btn-secondary'
+											type='button'
+											onClick={() => {
+												props.passBody2.setShowPass2(false);
+												clearFields();
+											}}>
+											Cancel
+										</button>
+									</div>
+								</div>
+							</form>
+						</div>
+					</>
+				}
+			/>
+		</>
+	);
+};
+
+export default ChangePasswordModal;
diff --git a/client/src/pages/user-settings/options/change-password.tsx b/client/src/pages/user-settings/options/change-password.tsx
deleted file mode 100644
index 59258250..00000000
--- a/client/src/pages/user-settings/options/change-password.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-import ModalConfirmation from '../../../components/ModalConfirmation/ModalConfirmation';
-import Button from 'react-bootstrap/Button';
-import logoUrl from '../../../assets/images/SkynetLogo.png';
-
-interface Props {
-    passBody1: {
-        showPassBody1: boolean,
-        setShowPass1: any
-    },
-    passBody2: {
-        showPassBody2: boolean,
-        setShowPass2: any
-        changePassword: any,
-        password: string,
-        setPassword: any,
-        newPassword: string,
-        setNewPassword: any,
-        confPassword: string,
-        setConfPassword: any
-    },
-}
-
-const ChangePasswordModal = (props: Props) => {
-	return (
-		<>
-			{/* First Modal for password change */}
-			<ModalConfirmation
-				title='Change Password'
-				show={props.passBody1.showPassBody1}
-				onHide={() => props.passBody1.setShowPass1(false)}
-				body={
-					<p>
-						Are you sure you want to change your password?
-						<br />
-						This action cannot be undone.
-					</p>
-				}
-				disableFooter={false}
-				footer={
-					<div className='w-100 d-flex justify-content-center'>
-						<Button
-							className='me-3'
-							variant='secondary'
-							onClick={() => {
-								props.passBody1.setShowPass1(false);
-							}}>
-							Close
-						</Button>
-						<Button
-							className='ms-3'
-							variant='danger'
-							onClick={() => {
-								props.passBody1.setShowPass1(false);
-								props.passBody2.setShowPass2(true);
-							}}>
-							Continue
-						</Button>
-					</div>
-				}
-			/>
-
-			{/* Second Modal for password change */}
-			<ModalConfirmation
-				title='Change Password'
-				show={props.passBody2.showPassBody2}
-				onHide={() => props.passBody2.setShowPass2(false)}
-				disableFooter={true}
-				header={
-					<>
-						<img className={`img-fluid w-25`} src={logoUrl} alt='Skynet Logo' />
-						<p>Change Password</p>
-					</>
-				}
-				body={
-					<>
-						<div className='px-4 pb-2 text-center'>
-							<div className='changepassword-form'>
-								<form onSubmit={props.passBody2.changePassword}>
-									<input
-										name='password'
-										placeholder='Current Password'
-										type='password'
-										value={props.passBody2.password}
-										onChange={(event) => props.passBody2.setPassword(event.target.value)}
-										required
-									/>
-									<br />
-									<input
-										name='newpassword'
-										placeholder='New Password'
-										type='password'
-										value={props.passBody2.newPassword}
-										onChange={(event) => props.passBody2.setNewPassword(event.target.value)}
-										required
-									/>
-									<br />
-									<input
-										name='confirmpassword'
-										placeholder='Confirm New Password'
-										type='password'
-										value={props.passBody2.confPassword}
-										onChange={(event) => props.passBody2.setConfPassword(event.target.value)}
-										required
-									/>
-									<br />
-									<div className='text-center mb-3'>
-										<button type='submit' onClick={() => props.passBody2.setShowPass2(false)}>Change Password</button>
-									</div>
-									<div className='text-center'>
-										<button type='button' onClick={() => props.passBody2.setShowPass2(false)}>
-											Cancel
-										</button>
-									</div>
-								</form>
-							</div>
-						</div>
-					</>
-				}
-			/>
-		</>
-	);
-};
-
-export default ChangePasswordModal;
diff --git a/client/src/pages/user-settings/options/change-username.tsx b/client/src/pages/user-settings/options/change-username.tsx
new file mode 100644
index 00000000..87672f5b
--- /dev/null
+++ b/client/src/pages/user-settings/options/change-username.tsx
@@ -0,0 +1,95 @@
+import styles from '../user-settings.module.css';
+
+import ModalConfirmation from '../../../components/ModalConfirmation/ModalConfirmation';
+import Button from 'react-bootstrap/Button';
+
+interface Props {
+	usernameBody1: {
+		showNameBody1: boolean;
+		setNameBody1: any;
+	};
+	usernameBody2: {
+		showNameBody2: boolean;
+		setNameBody2: any;
+		changeUsername: any;
+		nameInput: string;
+		setNameInput: any;
+	};
+}
+
+const ChangeNameModal = (props: Props) => {
+	const clearFields = () => {
+		props.usernameBody2.setNameInput('');
+	};
+
+	return (
+		<>
+			<ModalConfirmation
+				title='Change Username'
+				show={props.usernameBody1.showNameBody1}
+				body={<p>Are you sure you want to change your username?</p>}
+				disableFooter={false}
+				footer={
+					<div className='w-100 d-flex justify-content-center'>
+						<Button
+							className='me-3'
+							variant='secondary'
+							onClick={() => {
+								props.usernameBody1.setNameBody1(false);
+							}}>
+							Close
+						</Button>
+						<Button
+							className='ms-3'
+							variant='danger'
+							onClick={() => {
+								props.usernameBody1.setNameBody1(false);
+								props.usernameBody2.setNameBody2(true);
+							}}>
+							Continue
+						</Button>
+					</div>
+				}
+			/>
+
+			<ModalConfirmation
+				title='Change Username'
+				show={props.usernameBody2.showNameBody2}
+				onHide={() => props.usernameBody2.setNameBody2(false)}
+				body={
+					<>
+						<p>What would you like your new username to be?</p>
+						<form onSubmit={props.usernameBody2.changeUsername}>
+							<input
+								className={`${styles.confInput} mb-5 w-75`}
+								name='newUsername'
+								placeholder='Username'
+								type='text'
+								value={props.usernameBody2.nameInput}
+								onChange={(event) => props.usernameBody2.setNameInput(event.target.value)}
+								required
+							/>
+							<div className='d-flex justify-content-evenly align-items-center'>
+								<button className='btn btn-danger' type='submit'>
+									Change Username
+								</button>
+								<button
+									className='btn btn-secondary'
+									type='button'
+									onClick={() => {
+										props.usernameBody2.setNameBody2(false);
+										clearFields();
+									}}>
+									Cancel
+								</button>
+							</div>
+						</form>
+					</>
+				}
+				disableFooter={true}
+			/>
+		</>
+	);
+};
+
+export default ChangeNameModal;
diff --git a/client/src/pages/user-settings/options/delete-account.tsx b/client/src/pages/user-settings/options/delete-account-modal.tsx
similarity index 64%
rename from client/src/pages/user-settings/options/delete-account.tsx
rename to client/src/pages/user-settings/options/delete-account-modal.tsx
index 9311f384..694fa0ac 100644
--- a/client/src/pages/user-settings/options/delete-account.tsx
+++ b/client/src/pages/user-settings/options/delete-account-modal.tsx
@@ -4,26 +4,29 @@ import ModalConfirmation from '../../../components/ModalConfirmation/ModalConfir
 import Button from 'react-bootstrap/Button';
 
 interface Props {
-    deleteBody1: {
-        showDeleteBody1: boolean,
-        setShowDelete1: any
-    },
-    deleteBody2: {
-        showDeleteBody2: boolean,
-        setShowDelete2: any
-        deleteAccount: any,
-        confInput: string,
-        setConfInput: any
-    },
+	deleteBody1: {
+		showDeleteBody1: boolean;
+		setShowDelete1: any;
+	};
+	deleteBody2: {
+		showDeleteBody2: boolean;
+		setShowDelete2: any;
+		deleteAccount: any;
+		confInput: string;
+		setConfInput: any;
+	};
 }
 
 const DeleteAccountModal = (props: Props) => {
+	const clearFields = () => {
+		props.deleteBody2.setConfInput('');
+	};
+
 	return (
 		<>
 			<ModalConfirmation
 				title='Delete Account'
 				show={props.deleteBody1.showDeleteBody1}
-				onHide={() => props.deleteBody1.setShowDelete1(false)}
 				body={
 					<p>
 						Are you sure you want to delete your account?
@@ -61,20 +64,34 @@ const DeleteAccountModal = (props: Props) => {
 				onHide={() => props.deleteBody2.setShowDelete2(false)}
 				body={
 					<>
-					<p>Type in the following phrase to delete this account:<br/><i><b>I-WANT-TO-DELTE-THIS-ACCOUNT</b></i></p>
+						<p>
+							Type in the following phrase exactly to delete this account:
+							<br />
+							<i>
+								<b>I-WANT-TO-DELETE-THIS-ACCOUNT</b>
+							</i>
+						</p>
 						<form onSubmit={props.deleteBody2.deleteAccount}>
 							<input
-								className='mb-5'
+								className={`${styles.confInput} mb-5 w-75`}
 								name='confirminput'
-								placeholder='"I-WANT-TO-DELTE-THIS-ACCOUNTt"'
+								placeholder='"I-WANT-TO-DELETE-THIS-ACCOUNT"'
 								type='text'
 								value={props.deleteBody2.confInput}
 								onChange={(event) => props.deleteBody2.setConfInput(event.target.value)}
 								required
 							/>
-							<div className='d-flex justify-content-center align-items-center'>
-								<button className={`${styles.deleteBtn} me-3`} type='submit'>DELETE ACCOUNT</button>
-								<button className='ms-3' type='button' onClick={() => props.deleteBody2.setShowDelete2(false)}>
+							<div className='d-flex justify-content-evenly align-items-center'>
+								<button className='btn btn-danger' type='submit'>
+									DELETE ACCOUNT
+								</button>
+								<button
+									className='btn btn-secondary'
+									type='button'
+									onClick={() => {
+										props.deleteBody2.setShowDelete2(false);
+										clearFields();
+									}}>
 									Cancel
 								</button>
 							</div>
diff --git a/client/src/pages/user-settings/options/manage-account.tsx b/client/src/pages/user-settings/options/manage-account.tsx
new file mode 100644
index 00000000..82c8b86a
--- /dev/null
+++ b/client/src/pages/user-settings/options/manage-account.tsx
@@ -0,0 +1,229 @@
+import { useState } from 'react';
+import { toast } from 'react-toastify';
+import { api } from '../../../lib/axios';
+import { useLocation } from 'wouter';
+import { Auth } from '../../../lib/auth';
+
+import styles from '../user-settings.module.css';
+
+import ListGroup from 'react-bootstrap/ListGroup';
+import ChangePasswordModal from '../options/change-password-modal';
+import DeleteAccountModal from '../options/delete-account-modal';
+import ChangeNameModal from './change-username';
+import ChangeEmailModal from './change-email';
+import Page from '../../../components/Page/Page';
+
+const ManageAccount = () => {
+	const [_, setLocation] = useLocation();
+
+	// variables responsible for showing change password modals
+	const [showPassBody1, setShowPass1] = useState(false);
+	const [showPassBody2, setShowPass2] = useState(false);
+
+	// variables responsible for showing delete account modals
+	const [showDeleteBody1, setShowDelete1] = useState(false);
+	const [showDeleteBody2, setShowDelete2] = useState(false);
+
+	// variables responsible for showing change username modals
+	const [showNameBody1, setNameBody1] = useState(false);
+	const [showNameBody2, setNameBody2] = useState(false);
+
+	// variables responsible for showing change email modals
+	const [showEmailBody1, setEmailBody1] = useState(false);
+	const [showEmailBody2, setEmailBody2] = useState(false);
+
+	//variables resposible for grabbing the form fields present in the change password modal
+	const [password, setPassword] = useState('');
+	const [newPassword, setNewPassword] = useState('');
+	const [confirmPassword, setConfirmPassword] = useState('');
+
+	// varriables responsible for grabbing form fields in the delete account modal
+	const [confInput, setConfInput] = useState('');
+
+	// varriables responsible for grabbing form fields in the change password modal
+	const [nameInput, setNameInput] = useState('');
+
+	//variables resposible for grabbing the form fields present in the change email modal
+	const [currEmail, setCurrEmail] = useState('');
+	const [emailInput, setEmailInput] = useState('');
+	const [confEmailInput, setConfEmailInput] = useState('');
+
+	const changePassword = async (event: React.FormEvent<HTMLFormElement>) => {
+		event.preventDefault();
+		try {
+			const response = await api.patch('/user/changepassword', {
+				password: password,
+				newpassword: newPassword,
+				confirmpassword: confirmPassword,
+			});
+			toast.success(response.data.message);
+			wrapUpModal();
+		} catch (error: any) {
+			toast.error(error.response.data.error);
+		}
+	};
+
+	const deleteAccount = async (event: React.FormEvent<HTMLFormElement>) => {
+		event.preventDefault();
+		try {
+			const response = await api.post('/user/deleteaccount/delete', {
+				confirmationInput: confInput,
+			});
+			toast.success(response.data.message);
+			wrapUpModal();
+			logout();
+		} catch (error: any) {
+			toast.error(error.response.data.error);
+		}
+	};
+
+	const changeUsername = async (event: React.FormEvent<HTMLFormElement>) => {
+		event.preventDefault();
+		try {
+			const response = await api.patch('/user/changeUsername', {
+				newUsername: nameInput,
+			});
+			toast.success(response.data.message);
+			wrapUpModal();
+		} catch (error: any) {
+			toast.error(error.response.data.error);
+		}
+	};
+
+	const changeEmail = async (event: React.FormEvent<HTMLFormElement>) => {
+		event.preventDefault();
+		try {
+			const response = await api.patch('/user/changeEmail', {
+				currEmail: currEmail,
+				newEmail: emailInput,
+				confirmEmail: confEmailInput,
+			});
+			toast.success(response.data.message);
+			wrapUpModal();
+		} catch (error: any) {
+			toast.error(error.response.data.error);
+		}
+	};
+
+	const wrapUpModal = () => {
+		setPassword('');
+		setNewPassword('');
+		setConfirmPassword('');
+		setConfInput('');
+		setNameInput('');
+		setCurrEmail('');
+		setEmailInput('');
+		setConfEmailInput('');
+		setShowPass2(false);
+		setShowDelete2(false);
+		setNameBody2(false);
+		setEmailBody2(false);
+	};
+
+	const logout = () => [Auth.loseToken(), setLocation('/login')];
+
+	// defining values for the Change Password Modal
+	const passBody1 = {
+		showPassBody1: showPassBody1,
+		setShowPass1: setShowPass1,
+	};
+	const passBody2 = {
+		showPassBody2: showPassBody2,
+		setShowPass2: setShowPass2,
+		changePassword: changePassword,
+		password: password,
+		setPassword: setPassword,
+		newPassword: newPassword,
+		setNewPassword: setNewPassword,
+		confPassword: confirmPassword,
+		setConfPassword: setConfirmPassword,
+	};
+
+	// defining values for the delete account Modal
+	const deleteBody1 = {
+		showDeleteBody1: showDeleteBody1,
+		setShowDelete1: setShowDelete1,
+	};
+	const deleteBody2 = {
+		showDeleteBody2: showDeleteBody2,
+		setShowDelete2: setShowDelete2,
+		deleteAccount: deleteAccount,
+		confInput: confInput,
+		setConfInput: setConfInput,
+	};
+
+	// defining values for the change username Modal
+	const usernameBody1 = {
+		showNameBody1: showNameBody1,
+		setNameBody1: setNameBody1,
+	};
+	const usernameBody2 = {
+		showNameBody2: showNameBody2,
+		setNameBody2: setNameBody2,
+		changeUsername: changeUsername,
+		nameInput: nameInput,
+		setNameInput: setNameInput,
+	};
+
+	// defining values for the change email Modal
+	const emailBody1 = {
+		showEmailBody1: showEmailBody1,
+		setEmailBody1: setEmailBody1,
+	};
+	const emailBody2 = {
+		showEmailBody2: showEmailBody2,
+		setEmailBody2: setEmailBody2,
+		changeEmail: changeEmail,
+		currEmail: currEmail,
+		setCurrEmail: setCurrEmail,
+		emailInput: emailInput,
+		setEmailInput: setEmailInput,
+		confEmailInput: confEmailInput,
+		setConfEmailInput: setConfEmailInput,
+	};
+
+	return (
+		<>
+			<Page
+				logoHeader={false}
+				pageName='Manage Account'
+				content={
+					<ListGroup variant='flush' className={`${styles.settingBody} mt-3`}>
+						<ListGroup.Item className={`${styles.dangerZone}`}>
+							<h1 className={`${styles.settingTitle} ms-3`}>Danger Zone</h1>
+							<ListGroup variant='flush'>
+								<ListGroup.Item
+									className={`${styles.clickable} ms-5`}
+									onClick={() => setNameBody1(true)}>
+									Change Username
+								</ListGroup.Item>
+								<ListGroup.Item
+									className={`${styles.clickable} ms-5`}
+									onClick={() => setShowPass1(true)}>
+									Change Password
+								</ListGroup.Item>
+								<ListGroup.Item
+									className={`${styles.clickable} ms-5`}
+									onClick={() => setEmailBody1(true)}>
+									Change Email
+								</ListGroup.Item>
+								<ListGroup.Item
+									className={`${styles.clickable} ms-5`}
+									onClick={() => setShowDelete1(true)}>
+									DELETE ACCOUNT
+								</ListGroup.Item>
+							</ListGroup>
+						</ListGroup.Item>
+					</ListGroup>
+				}
+			/>
+
+			<ChangePasswordModal passBody1={passBody1} passBody2={passBody2} />
+			<DeleteAccountModal deleteBody1={deleteBody1} deleteBody2={deleteBody2} />
+			<ChangeNameModal usernameBody1={usernameBody1} usernameBody2={usernameBody2} />
+			<ChangeEmailModal emailBody1={emailBody1} emailBody2={emailBody2} />
+		</>
+	);
+};
+
+export default ManageAccount;
diff --git a/client/src/pages/user-settings/options/your-info.tsx b/client/src/pages/user-settings/options/your-info.tsx
index 074b5de2..8deb016c 100644
--- a/client/src/pages/user-settings/options/your-info.tsx
+++ b/client/src/pages/user-settings/options/your-info.tsx
@@ -1,35 +1,19 @@
-import { api } from '../../../lib/axios';
-import { useState } from 'react';
+import { useContext } from 'react';
 
 import ModalConfirmation from '../../../components/ModalConfirmation/ModalConfirmation';
 import Button from 'react-bootstrap/Button';
+import { UserAuthContext } from '../../../lib/auth';
+import { Else, If, Then } from 'react-if';
 
 interface Props {
-    infoBody: {
-        showInfoBody: boolean,
-        setInfoBody: any
-    }
+	infoBody: {
+		showInfoBody: boolean;
+		setInfoBody: any;
+	};
 }
 
 const YourInfoModal = (props: Props) => {
-	const userInfo = async () => {
-		try {			
-			const response = await api.get('/user/');
-			const data = response.data.value;
-			document.getElementById('username')!.innerHTML = data.userName;
-			document.getElementById('email')!.innerHTML = data.email;
-
-			if (data.bio) {
-				document.getElementById('bio')!.innerHTML = "Bio: " + data.bio;
-			} else {
-				document.getElementById('bio')!.innerHTML = "Follower Count: " + data.followerCount;
-			}		
-
-		} catch (error: any) {
-			console.log('could not get information');
-		}
-	};
-	userInfo();
+	const user = useContext(UserAuthContext);
 
 	return (
 		<>
@@ -38,13 +22,16 @@ const YourInfoModal = (props: Props) => {
 				show={props.infoBody.showInfoBody}
 				onHide={() => props.infoBody.setInfoBody(false)}
 				body={
-					<>
-                        <p>
-							Username: <span id='username'></span><br/>
-							Email: <span id='email'></span><br/>
-							<span id='bio'></span><br/>
-						</p>
-                    </>
+					<If condition={user}>
+						<Then>
+							<p>Username: {user.userName}</p>
+							<p>Email: {user.email ?? 'Authenticated with Provider'}</p>
+							<p>Bio: {user.bio ?? 'No Bio Provided'}</p>
+						</Then>
+						<Else>
+							<p className='text-danger'>An error occured.</p>
+						</Else>
+					</If>
 				}
 				disableFooter={false}
 				footer={
@@ -64,4 +51,4 @@ const YourInfoModal = (props: Props) => {
 	);
 };
 
-export default YourInfoModal;
\ No newline at end of file
+export default YourInfoModal;
diff --git a/client/src/pages/user-settings/user-settings.module.css b/client/src/pages/user-settings/user-settings.module.css
index bf62dc02..d37f6d5f 100644
--- a/client/src/pages/user-settings/user-settings.module.css
+++ b/client/src/pages/user-settings/user-settings.module.css
@@ -1,7 +1,11 @@
 .setting-body {
+    width: 100%;
     font-size: x-large;
     font-family: BabaPro;
-    background-color: aliceblue;
+}
+
+.setting-body p {
+    margin: 0;
 }
 
 .setting-title {
@@ -9,19 +13,63 @@
     font-family: Bitsumishi;
 }
 
+.warning-color {
+    color: red !important;
+}
+
+.danger-zone {
+    border: 2px solid black;
+	box-shadow: 4px 5px 0px #000;
+}
+
 .danger-zone, .danger-zone * {
     background-color: #242C38;
-    color: red;
+    color: red !important;
+}
+
+.group-item-holder {
+    margin-bottom: 30px;
+    margin-left: 5px;
+    margin-right: 5px;
+    font-size: 16pt;
+    border: 2px solid black;
+	box-shadow: 4px 5px 0px #000;
+}
+
+.group-item-holder, .group-item-holder * {
+    color: black;
+    background-color: var(--signup-background);
 }
 
-.group-item, .group-item * {
-    background-color: aliceblue;
+.group-item {    
+    border-color: gray;
+}
+
+.group-item-body {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
 }
 
 .clickable {
     cursor: pointer;
 }
 
-.delete-btn {
-    background-color: red;
+.logout-btn {
+    border: 2px solid black;
+	box-shadow: 4px 5px 0px #000;
+}
+
+.logout-btn h1 {
+    margin: 0;
+}
+
+.logout-btn, .logout-btn > * {
+    background-color: #242C38;
+    color: red;
+}
+
+.conf-input {
+    font-family: Fjalla One;
 }
\ No newline at end of file
diff --git a/client/src/pages/user-settings/user-settings.tsx b/client/src/pages/user-settings/user-settings.tsx
index 0d5dac16..544bda89 100644
--- a/client/src/pages/user-settings/user-settings.tsx
+++ b/client/src/pages/user-settings/user-settings.tsx
@@ -1,104 +1,31 @@
 import { useState } from 'react';
-import { api } from '../../lib/axios';
 import { useLocation } from 'wouter';
-import { toast } from 'react-toastify';
 
 import styles from './user-settings.module.css';
 
 import ListGroup from 'react-bootstrap/ListGroup';
 import Nav from 'react-bootstrap/Nav';
+import { MdOutlineArrowForwardIos } from 'react-icons/md';
 import Page from '../../components/Page/Page';
-import ChangePasswordModal from './options/change-password';
-import DeleteAccountModal from './options/delete-account';
 import YourInfoModal from './options/your-info';
 import { Auth } from '../../lib/auth';
 
 const UserSettings = () => {
 	const [_, setLocation] = useLocation();
 
-	// variables responsible for showing change password modal
-	const [showPassBody1, setShowPass1] = useState(false);
-	const [showPassBody2, setShowPass2] = useState(false);
-
-	// variables responsible for showing delete account modal
-	const [showDeleteBody1, setShowDelete1] = useState(false);
-	const [showDeleteBody2, setShowDelete2] = useState(false);
-
 	// variables responsible for showing your info modal
 	const [showInfoBody, setInfoBody] = useState(false);
 
-	//variables resposible for grabbing the form fields present in the change password modal
-	const [password, setPassword] = useState('');
-	const [newPassword, setNewPassword] = useState('');
-	const [confirmPassword, setConfirmPassword] = useState('');
-
 	// varriables responsible for grabbing form fields in the delete account modal
 	const [confInput, setConfInput] = useState('');
 
-	const changePassword = async (event: React.FormEvent<HTMLFormElement>) => {
-		event.preventDefault();
-		try {
-			const response = await api.patch('/user/changepassword', {
-				password: password,
-				newpassword: newPassword,
-				confirmpassword: confirmPassword,
-			});
-			toast.success('Password changed!');
-		} catch (error: any) {
-			toast.error('Could not change password.');
-		}
-	};
-
-	const deleteAccount = async (event: React.FormEvent<HTMLFormElement>) => {
-		event.preventDefault();
-		if (confInput === 'I-WANT-TO-DELTE-THIS-ACCOUNT') {
-			try {
-				const response = await api.post('/user/deleteaccount/delete');
-				setLocation('/login');
-			} catch (error: any) {
-				alert(error.response.data.message);
-			}
-		} else {
-			toast.error('Invalid Phrase');
-		}
-	};
-
+	// calls loseToken() and logs the user out
 	function logout() {
 		console.log('here');
 		Auth.loseToken();
 		setLocation('/login');
 	}
 
-	// defining values for the Change Password Modal
-	const passBody1 = {
-		showPassBody1: showPassBody1,
-		setShowPass1: setShowPass1,
-	};
-	const passBody2 = {
-		showPassBody2: showPassBody2,
-		setShowPass2: setShowPass2,
-		changePassword: changePassword,
-		password: password,
-		setPassword: setPassword,
-		newPassword: newPassword,
-		setNewPassword: setNewPassword,
-		confPassword: confirmPassword,
-		setConfPassword: setConfirmPassword,
-	};
-
-	// defining values for the delete account Modal
-	const deleteBody1 = {
-		showDeleteBody1: showDeleteBody1,
-		setShowDelete1: setShowDelete1,
-	};
-	const deleteBody2 = {
-		showDeleteBody2: showDeleteBody2,
-		setShowDelete2: setShowDelete2,
-		deleteAccount: deleteAccount,
-		confInput: confInput,
-		setConfInput: setConfInput,
-	};
-
 	//defining values from the info modal
 	const infoBody = {
 		showInfoBody: showInfoBody,
@@ -108,89 +35,100 @@ const UserSettings = () => {
 	return (
 		<>
 			<Page
+				logoHeader={false}
 				pageName='Settings'
 				content={
-					<ListGroup variant='flush' className={`${styles.settingBody}`}>
-						<ListGroup.Item className={styles.groupItem}>
-							<h1 className={`${styles.settingTitle} ms-3`}>Account</h1>
+					<ListGroup variant='flush' className={`${styles.settingBody} mt-3`}>
+						<div className={`${styles.groupItemHolder} card p-4 rounded-0`}>
+							<h1 className={`${styles.settingTitle} ms-1`}>Account</h1>
 							<ListGroup variant='flush'>
-								<ListGroup.Item className={`ms-5`}>
-									<Nav.Link href=''>Followers</Nav.Link>
+								<ListGroup.Item className={`${styles.groupItem} ms-5`}>
+									<Nav.Link className={styles.groupItemBody} href=''>
+										<p>Followers</p>
+										<MdOutlineArrowForwardIos />
+									</Nav.Link>
 								</ListGroup.Item>
-								<ListGroup.Item className={`ms-5`}>
-									<Nav.Link href=''>Following</Nav.Link>
+								<ListGroup.Item className={`${styles.groupItem} ms-5`}>
+									<Nav.Link className={styles.groupItemBody} href=''>
+										<p>Following</p>
+										<MdOutlineArrowForwardIos />
+									</Nav.Link>
 								</ListGroup.Item>
 								<ListGroup.Item
-									className={`${styles.clickable} ms-5`}
+									className={`${styles.clickable} ${styles.groupItem} ms-5`}
 									onClick={() => setInfoBody(true)}>
-									Your Info
-								</ListGroup.Item>
-							</ListGroup>
-						</ListGroup.Item>
-						<ListGroup.Item className={styles.groupItem}>
-							<h1 className={`${styles.settingTitle} ms-3`}>History</h1>
-							<ListGroup variant='flush'>
-								<ListGroup.Item className={`ms-5`}>
-									<Nav.Link href=''>Saved</Nav.Link>
+									<div className={styles.groupItemBody}>
+										<p>Your Info</p>
+										<MdOutlineArrowForwardIos />
+									</div>
 								</ListGroup.Item>
-								<ListGroup.Item className={`ms-5`}>
-									<Nav.Link href=''>Liked</Nav.Link>
-								</ListGroup.Item>
-								<ListGroup.Item className={`ms-5`}>
-									<Nav.Link href=''>Commented Posts</Nav.Link>
+								<ListGroup.Item
+									className={`${styles.clickable} ${styles.groupItem} ms-5`}
+									onClick={() => setLocation('/settings/manageAccount')}>
+									<div className={styles.groupItemBody}>
+										<p className={styles.warningColor}>Manage Account</p>
+										<MdOutlineArrowForwardIos />
+									</div>
 								</ListGroup.Item>
 							</ListGroup>
-						</ListGroup.Item>
-						<ListGroup.Item className={styles.groupItem}>
-							<h1 className={`${styles.settingTitle} ms-3`}>General</h1>
+						</div>
+						<div className={`${styles.groupItemHolder} card p-4 rounded-0`}>
+							<h1 className={`${styles.settingTitle} ms-1`}>History</h1>
 							<ListGroup variant='flush'>
-								<ListGroup.Item className={`ms-5`}>
-									<Nav.Link href=''>About</Nav.Link>
+								<ListGroup.Item className={`${styles.groupItem} ms-5`}>
+									<Nav.Link className={styles.groupItemBody} href=''>
+										<p>Saved</p>
+										<MdOutlineArrowForwardIos />
+									</Nav.Link>
 								</ListGroup.Item>
-								<ListGroup.Item className={`ms-5`}>
-									<Nav.Link href=''>FAQs</Nav.Link>
+								<ListGroup.Item className={`${styles.groupItem} ms-5`}>
+									<Nav.Link className={styles.groupItemBody} href=''>
+										<p>Liked</p>
+										<MdOutlineArrowForwardIos />
+									</Nav.Link>
 								</ListGroup.Item>
-								<ListGroup.Item className={`ms-5`}>
-									<Nav.Link href=''>Support</Nav.Link>
+								<ListGroup.Item className={`${styles.groupItem} ms-5`}>
+									<Nav.Link className={styles.groupItemBody} href=''>
+										<p>Commented Posts</p>
+										<MdOutlineArrowForwardIos />
+									</Nav.Link>
 								</ListGroup.Item>
 							</ListGroup>
-						</ListGroup.Item>
-						<ListGroup.Item className={styles.groupItem}>
-							<div className='w-100 d-flex justify-content-center my-5'>
-								<button className='p-2'>
-									<h1 onClick={logout} className={`${styles.settingTitle}`}>
-										Logout
-									</h1>
-								</button>
-							</div>
-						</ListGroup.Item>
-						<ListGroup.Item className={styles.dangerZone}>
-							<h1 className={`${styles.settingTitle} ms-3`}>Danger Zone</h1>
+						</div>
+						<div className={`${styles.groupItemHolder} card p-4 rounded-0`}>
+							<h1 className={`${styles.settingTitle} ms-1`}>General</h1>
 							<ListGroup variant='flush'>
-								<ListGroup.Item className={`${styles.clickable} ms-5`}>
-									<Nav.Link href=''>Change Username</Nav.Link>
+								<ListGroup.Item className={`${styles.groupItem} ms-5`}>
+									<Nav.Link className={styles.groupItemBody} href='/about'>
+										<p>About</p>
+										<MdOutlineArrowForwardIos />
+									</Nav.Link>
 								</ListGroup.Item>
-								<ListGroup.Item
-									className={`${styles.clickable} ms-5`}
-									onClick={() => setShowPass1(true)}>
-									Change Password
+								<ListGroup.Item className={`${styles.groupItem} ms-5`}>
+									<Nav.Link className={styles.groupItemBody} href=''>
+										<p>FAQs</p>
+										<MdOutlineArrowForwardIos />
+									</Nav.Link>
 								</ListGroup.Item>
-								<ListGroup.Item className={`${styles.clickable} ms-5`}>
-									<Nav.Link href=''>Change Email</Nav.Link>
-								</ListGroup.Item>
-								<ListGroup.Item
-									className={`${styles.clickable} ms-5`}
-									onClick={() => setShowDelete1(true)}>
-									DELETE ACCOUNT
+								<ListGroup.Item className={`${styles.groupItem} ms-5`}>
+									<Nav.Link className={styles.groupItemBody} href=''>
+										<p>Support</p>
+										<MdOutlineArrowForwardIos />
+									</Nav.Link>
 								</ListGroup.Item>
 							</ListGroup>
-						</ListGroup.Item>
+						</div>
+						<div className='w-100 d-flex justify-content-center mb-4'>
+							<button className={`${styles.logoutBtn} py-2 px-3`}>
+								<h1 onClick={logout} className={`${styles.settingTitle}`}>
+									Logout
+								</h1>
+							</button>
+						</div>
 					</ListGroup>
 				}
 			/>
 
-			<ChangePasswordModal passBody1={passBody1} passBody2={passBody2} />
-			<DeleteAccountModal deleteBody1={deleteBody1} deleteBody2={deleteBody2} />
 			<YourInfoModal infoBody={infoBody} />
 		</>
 	);
diff --git a/server/index.ts b/server/index.ts
index 4d470710..1390faad 100644
--- a/server/index.ts
+++ b/server/index.ts
@@ -1,18 +1,41 @@
-import { isDev } from './src/load-env';
-import './src/load-env';
+import './src/environment';
 import express from 'express';
 import createRouter from 'express-file-routing';
 import path from 'path';
 import mongoose from 'mongoose';
 import cors from 'cors';
+import http from 'http';
+import { Server } from 'socket.io';
 
 import { requestLogger } from './src/middlewares/log.js';
+import { getServerHost, SERVER_PORT } from './src/environment';
 
 const PROJECT_ROOT = path.join(__dirname, 'src');
-const PORT = process.env.PORT;
 
 (async () => {
 	const app = express();
+	const server = http.createServer(app);
+	const io = new Server(server, {
+		cors: { origin: '*' } /*cors: { origin: "http://localhost:8000", methods: ['GET', 'POST']}*/,
+	});
+
+	io.on('connection', (socket) => {
+		// console.log('New client connected');
+
+		socket.on('disconnect', () => {
+			// console.log('Client disconnected');
+		});
+
+		socket.on('sendID', (convoID: string) => {
+			socket.join(convoID);
+		});
+
+		socket.on('sendMessage', (convoID: string) => {
+			socket.to(convoID).emit('displayMessage');
+		});
+	});
+
+	app.set('socketio', io);
 
 	app.use(cors());
 
@@ -25,7 +48,7 @@ const PORT = process.env.PORT;
 
 	await createRouter(app, { directory: path.join(PROJECT_ROOT, 'routes') });
 
-	app.listen(PORT, () => {
-		console.log(`Server is running with port "${PORT}". (http://localhost:${PORT})`);
+	server.listen(SERVER_PORT, () => {
+		console.log(`Server is now running. (${getServerHost()})`);
 	});
 })();
diff --git a/server/package-lock.json b/server/package-lock.json
index c01ca6f0..3a759d5c 100644
--- a/server/package-lock.json
+++ b/server/package-lock.json
@@ -9,14 +9,19 @@
 				"bcrypt": "^5.1.1",
 				"cors": "^2.8.5",
 				"dotenv": "^16.4.5",
+				"esno": "^4.7.0",
 				"express": "^4.19.2",
 				"express-file-routing": "^3.0.3",
+				"google-auth-library": "^9.10.0",
+				"googleapis": "^137.1.0",
 				"http-status-codes": "^2.3.0",
 				"joi": "^17.13.1",
 				"jsonwebtoken": "^9.0.2",
 				"mongoose": "^8.3.3",
+				"morgan": "^1.10.0",
 				"nodemailer": "^6.9.13",
-				"picocolors": "^1.0.1"
+				"picocolors": "^1.0.1",
+				"socket.io": "^4.7.5"
 			},
 			"devDependencies": {
 				"@types/bcrypt": "^5.0.2",
@@ -26,8 +31,6 @@
 				"@types/morgan": "^1.9.9",
 				"@types/node": "^20.12.8",
 				"@types/nodemailer": "^6.4.15",
-				"esno": "^4.7.0",
-				"morgan": "^1.10.0",
 				"typescript": "^5.4.5"
 			}
 		},
@@ -38,7 +41,6 @@
 			"cpu": [
 				"ppc64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"aix"
@@ -54,7 +56,6 @@
 			"cpu": [
 				"arm"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"android"
@@ -70,7 +71,6 @@
 			"cpu": [
 				"arm64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"android"
@@ -86,7 +86,6 @@
 			"cpu": [
 				"x64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"android"
@@ -102,7 +101,6 @@
 			"cpu": [
 				"arm64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"darwin"
@@ -118,7 +116,6 @@
 			"cpu": [
 				"x64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"darwin"
@@ -134,7 +131,6 @@
 			"cpu": [
 				"arm64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"freebsd"
@@ -150,7 +146,6 @@
 			"cpu": [
 				"x64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"freebsd"
@@ -166,7 +161,6 @@
 			"cpu": [
 				"arm"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -182,7 +176,6 @@
 			"cpu": [
 				"arm64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -198,7 +191,6 @@
 			"cpu": [
 				"ia32"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -214,7 +206,6 @@
 			"cpu": [
 				"loong64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -230,7 +221,6 @@
 			"cpu": [
 				"mips64el"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -246,7 +236,6 @@
 			"cpu": [
 				"ppc64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -262,7 +251,6 @@
 			"cpu": [
 				"riscv64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -278,7 +266,6 @@
 			"cpu": [
 				"s390x"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -294,7 +281,6 @@
 			"cpu": [
 				"x64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -310,7 +296,6 @@
 			"cpu": [
 				"x64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"netbsd"
@@ -326,7 +311,6 @@
 			"cpu": [
 				"x64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"openbsd"
@@ -342,7 +326,6 @@
 			"cpu": [
 				"x64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"sunos"
@@ -358,7 +341,6 @@
 			"cpu": [
 				"arm64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"win32"
@@ -374,7 +356,6 @@
 			"cpu": [
 				"ia32"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"win32"
@@ -390,7 +371,6 @@
 			"cpu": [
 				"x64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"win32"
@@ -457,6 +437,11 @@
 			"resolved": "https://registry.npmjs.org/@sideway/pinpoint/-/pinpoint-2.0.0.tgz",
 			"integrity": "sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ=="
 		},
+		"node_modules/@socket.io/component-emitter": {
+			"version": "3.1.2",
+			"resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz",
+			"integrity": "sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA=="
+		},
 		"node_modules/@types/bcrypt": {
 			"version": "5.0.2",
 			"resolved": "https://registry.npmjs.org/@types/bcrypt/-/bcrypt-5.0.2.tgz",
@@ -485,11 +470,15 @@
 				"@types/node": "*"
 			}
 		},
+		"node_modules/@types/cookie": {
+			"version": "0.4.1",
+			"resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.4.1.tgz",
+			"integrity": "sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q=="
+		},
 		"node_modules/@types/cors": {
 			"version": "2.8.17",
 			"resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.17.tgz",
 			"integrity": "sha512-8CGDvrBj1zgo2qE+oS3pOCyYNqCPryMWY2bGfwA0dcfopWGgxs+78df0Rs3rc9THP4JkOhLsAa+15VdpAqkcUA==",
-			"dev": true,
 			"dependencies": {
 				"@types/node": "*"
 			}
@@ -552,7 +541,6 @@
 			"version": "20.12.8",
 			"resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.8.tgz",
 			"integrity": "sha512-NU0rJLJnshZWdE/097cdCBbyW1h4hEg0xpovcoAQYHl8dnEyp/NAOiE45pvc+Bd1Dt+2r94v2eGFpQJ4R7g+2w==",
-			"dev": true,
 			"dependencies": {
 				"undici-types": "~5.26.4"
 			}
@@ -678,6 +666,7 @@
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-2.0.0.tgz",
 			"integrity": "sha512-Ci/qENmwHnsYo9xKIcUJN5LeDKdJ6R1Z1j9V/J5wyq8nh/mYPEpIKJbBZXtZjG04HiK7zV/p6Vs9952MrMeUIw==",
+			"deprecated": "This package is no longer supported.",
 			"dependencies": {
 				"delegates": "^1.0.0",
 				"readable-stream": "^3.6.0"
@@ -696,11 +685,37 @@
 			"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
 			"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
 		},
+		"node_modules/base64-js": {
+			"version": "1.5.1",
+			"resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+			"integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/feross"
+				},
+				{
+					"type": "patreon",
+					"url": "https://www.patreon.com/feross"
+				},
+				{
+					"type": "consulting",
+					"url": "https://feross.org/support"
+				}
+			]
+		},
+		"node_modules/base64id": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/base64id/-/base64id-2.0.0.tgz",
+			"integrity": "sha512-lGe34o6EHj9y3Kts9R4ZYs/Gr+6N7MCaMlIFA3F1R2O5/m7K06AxfSeO5530PEERE6/WyEg3lsuyw4GHlPZHog==",
+			"engines": {
+				"node": "^4.5.0 || >= 5.9"
+			}
+		},
 		"node_modules/basic-auth": {
 			"version": "2.0.1",
 			"resolved": "https://registry.npmjs.org/basic-auth/-/basic-auth-2.0.1.tgz",
 			"integrity": "sha512-NF+epuEdnUYVlGuhaxbbq+dvJttwLnGY+YixlXlME5KpQ5W3CnXA5cVTneY3SPbPDRkcjMbifrwmFYcClgOZeg==",
-			"dev": true,
 			"dependencies": {
 				"safe-buffer": "5.1.2"
 			},
@@ -711,8 +726,7 @@
 		"node_modules/basic-auth/node_modules/safe-buffer": {
 			"version": "5.1.2",
 			"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-			"integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-			"dev": true
+			"integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
 		},
 		"node_modules/bcrypt": {
 			"version": "5.1.1",
@@ -727,6 +741,14 @@
 				"node": ">= 10.0.0"
 			}
 		},
+		"node_modules/bignumber.js": {
+			"version": "9.1.2",
+			"resolved": "https://registry.npmjs.org/bignumber.js/-/bignumber.js-9.1.2.tgz",
+			"integrity": "sha512-2/mKyZH9K85bzOEfhXDBFZTGd1CTs+5IHpeFQo9luiBG7hghdC851Pj2WAhb6E3R6b9tZj/XKhbg4fum+Kepug==",
+			"engines": {
+				"node": "*"
+			}
+		},
 		"node_modules/body-parser": {
 			"version": "1.20.2",
 			"resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.2.tgz",
@@ -959,6 +981,63 @@
 				"node": ">= 0.8"
 			}
 		},
+		"node_modules/engine.io": {
+			"version": "6.5.4",
+			"resolved": "https://registry.npmjs.org/engine.io/-/engine.io-6.5.4.tgz",
+			"integrity": "sha512-KdVSDKhVKyOi+r5uEabrDLZw2qXStVvCsEB/LN3mw4WFi6Gx50jTyuxYVCwAAC0U46FdnzP/ScKRBTXb/NiEOg==",
+			"dependencies": {
+				"@types/cookie": "^0.4.1",
+				"@types/cors": "^2.8.12",
+				"@types/node": ">=10.0.0",
+				"accepts": "~1.3.4",
+				"base64id": "2.0.0",
+				"cookie": "~0.4.1",
+				"cors": "~2.8.5",
+				"debug": "~4.3.1",
+				"engine.io-parser": "~5.2.1",
+				"ws": "~8.11.0"
+			},
+			"engines": {
+				"node": ">=10.2.0"
+			}
+		},
+		"node_modules/engine.io-parser": {
+			"version": "5.2.2",
+			"resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.2.tgz",
+			"integrity": "sha512-RcyUFKA93/CXH20l4SoVvzZfrSDMOTUS3bWVpTt2FuFP+XYrL8i8oonHP7WInRyVHXh0n/ORtoeiE1os+8qkSw==",
+			"engines": {
+				"node": ">=10.0.0"
+			}
+		},
+		"node_modules/engine.io/node_modules/cookie": {
+			"version": "0.4.2",
+			"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.2.tgz",
+			"integrity": "sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/engine.io/node_modules/debug": {
+			"version": "4.3.4",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+			"integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+			"dependencies": {
+				"ms": "2.1.2"
+			},
+			"engines": {
+				"node": ">=6.0"
+			},
+			"peerDependenciesMeta": {
+				"supports-color": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/engine.io/node_modules/ms": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+			"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+		},
 		"node_modules/es-define-property": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
@@ -982,7 +1061,6 @@
 			"version": "0.20.2",
 			"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.20.2.tgz",
 			"integrity": "sha512-WdOOppmUNU+IbZ0PaDiTst80zjnrOkyJNHoKupIcVyU8Lvla3Ugx94VzkQ32Ijqd7UhHJy75gNWDMUekcrSJ6g==",
-			"dev": true,
 			"hasInstallScript": true,
 			"bin": {
 				"esbuild": "bin/esbuild"
@@ -1025,7 +1103,6 @@
 			"version": "4.7.0",
 			"resolved": "https://registry.npmjs.org/esno/-/esno-4.7.0.tgz",
 			"integrity": "sha512-81owrjxIxOwqcABt20U09Wn8lpBo9K6ttqbGvQcB3VYNLJyaV1fvKkDtpZd3Rj5BX3WXiGiJCjUevKQGNICzJg==",
-			"dev": true,
 			"dependencies": {
 				"tsx": "^4.7.1"
 			},
@@ -1090,6 +1167,11 @@
 				"express": ">4.1.2"
 			}
 		},
+		"node_modules/extend": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+			"integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
+		},
 		"node_modules/finalhandler": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz",
@@ -1154,7 +1236,6 @@
 			"version": "2.3.3",
 			"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
 			"integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-			"dev": true,
 			"hasInstallScript": true,
 			"optional": true,
 			"os": [
@@ -1176,6 +1257,7 @@
 			"version": "3.0.2",
 			"resolved": "https://registry.npmjs.org/gauge/-/gauge-3.0.2.tgz",
 			"integrity": "sha512-+5J6MS/5XksCuXq++uFRsnUd7Ovu1XenbeuIuNRJxYWjgQbPuFhT14lAvsWfqfAmnwluf1OwMjz39HjfLPci0Q==",
+			"deprecated": "This package is no longer supported.",
 			"dependencies": {
 				"aproba": "^1.0.3 || ^2.0.0",
 				"color-support": "^1.1.2",
@@ -1191,6 +1273,95 @@
 				"node": ">=10"
 			}
 		},
+		"node_modules/gaxios": {
+			"version": "6.6.0",
+			"resolved": "https://registry.npmjs.org/gaxios/-/gaxios-6.6.0.tgz",
+			"integrity": "sha512-bpOZVQV5gthH/jVCSuYuokRo2bTKOcuBiVWpjmTn6C5Agl5zclGfTljuGsQZxwwDBkli+YhZhP4TdlqTnhOezQ==",
+			"dependencies": {
+				"extend": "^3.0.2",
+				"https-proxy-agent": "^7.0.1",
+				"is-stream": "^2.0.0",
+				"node-fetch": "^2.6.9",
+				"uuid": "^9.0.1"
+			},
+			"engines": {
+				"node": ">=14"
+			}
+		},
+		"node_modules/gaxios/node_modules/agent-base": {
+			"version": "7.1.1",
+			"resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.1.tgz",
+			"integrity": "sha512-H0TSyFNDMomMNJQBn8wFV5YC/2eJ+VXECwOadZJT554xP6cODZHPX3H9QMQECxvrgiSOP1pHjy1sMWQVYJOUOA==",
+			"dependencies": {
+				"debug": "^4.3.4"
+			},
+			"engines": {
+				"node": ">= 14"
+			}
+		},
+		"node_modules/gaxios/node_modules/debug": {
+			"version": "4.3.4",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+			"integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+			"dependencies": {
+				"ms": "2.1.2"
+			},
+			"engines": {
+				"node": ">=6.0"
+			},
+			"peerDependenciesMeta": {
+				"supports-color": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/gaxios/node_modules/https-proxy-agent": {
+			"version": "7.0.4",
+			"resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.4.tgz",
+			"integrity": "sha512-wlwpilI7YdjSkWaQ/7omYBMTliDcmCN8OLihO6I9B86g06lMyAoqgoDpV0XqoaPOKj+0DIdAvnsWfyAAhmimcg==",
+			"dependencies": {
+				"agent-base": "^7.0.2",
+				"debug": "4"
+			},
+			"engines": {
+				"node": ">= 14"
+			}
+		},
+		"node_modules/gaxios/node_modules/ms": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+			"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+		},
+		"node_modules/gcp-metadata": {
+			"version": "5.3.0",
+			"resolved": "https://registry.npmjs.org/gcp-metadata/-/gcp-metadata-5.3.0.tgz",
+			"integrity": "sha512-FNTkdNEnBdlqF2oatizolQqNANMrcqJt6AAYt99B3y1aLLC8Hc5IOBb+ZnnzllodEEf6xMBp6wRcBbc16fa65w==",
+			"optional": true,
+			"peer": true,
+			"dependencies": {
+				"gaxios": "^5.0.0",
+				"json-bigint": "^1.0.0"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/gcp-metadata/node_modules/gaxios": {
+			"version": "5.1.3",
+			"resolved": "https://registry.npmjs.org/gaxios/-/gaxios-5.1.3.tgz",
+			"integrity": "sha512-95hVgBRgEIRQQQHIbnxBXeHbW4TqFk4ZDJW7wmVtvYar72FdhRIo1UGOLS2eRAKCPEdPBWu+M7+A33D9CdX9rA==",
+			"optional": true,
+			"peer": true,
+			"dependencies": {
+				"extend": "^3.0.2",
+				"https-proxy-agent": "^5.0.0",
+				"is-stream": "^2.0.0",
+				"node-fetch": "^2.6.9"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
 		"node_modules/get-intrinsic": {
 			"version": "1.2.4",
 			"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
@@ -1210,10 +1381,9 @@
 			}
 		},
 		"node_modules/get-tsconfig": {
-			"version": "4.7.3",
-			"resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.7.3.tgz",
-			"integrity": "sha512-ZvkrzoUA0PQZM6fy6+/Hce561s+faD1rsNwhnO5FelNjyy7EMGJ3Rz1AQ8GYDWjhRs/7dBLOEJvhK8MiEJOAFg==",
-			"dev": true,
+			"version": "4.7.5",
+			"resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.7.5.tgz",
+			"integrity": "sha512-ZCuZCnlqNzjb4QprAzXKdpp/gh6KTxSJuw3IBsPnV/7fV4NxC9ckB+vPTt8w7fJA0TaSD7c55BR47JD6MEDyDw==",
 			"dependencies": {
 				"resolve-pkg-maps": "^1.0.0"
 			},
@@ -1240,6 +1410,81 @@
 				"url": "https://github.com/sponsors/isaacs"
 			}
 		},
+		"node_modules/google-auth-library": {
+			"version": "9.10.0",
+			"resolved": "https://registry.npmjs.org/google-auth-library/-/google-auth-library-9.10.0.tgz",
+			"integrity": "sha512-ol+oSa5NbcGdDqA+gZ3G3mev59OHBZksBTxY/tYwjtcp1H/scAFwJfSQU9/1RALoyZ7FslNbke8j4i3ipwlyuQ==",
+			"dependencies": {
+				"base64-js": "^1.3.0",
+				"ecdsa-sig-formatter": "^1.0.11",
+				"gaxios": "^6.1.1",
+				"gcp-metadata": "^6.1.0",
+				"gtoken": "^7.0.0",
+				"jws": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=14"
+			}
+		},
+		"node_modules/google-auth-library/node_modules/gcp-metadata": {
+			"version": "6.1.0",
+			"resolved": "https://registry.npmjs.org/gcp-metadata/-/gcp-metadata-6.1.0.tgz",
+			"integrity": "sha512-Jh/AIwwgaxan+7ZUUmRLCjtchyDiqh4KjBJ5tW3plBZb5iL/BPcso8A5DlzeD9qlw0duCamnNdpFjxwaT0KyKg==",
+			"dependencies": {
+				"gaxios": "^6.0.0",
+				"json-bigint": "^1.0.0"
+			},
+			"engines": {
+				"node": ">=14"
+			}
+		},
+		"node_modules/google-auth-library/node_modules/jwa": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/jwa/-/jwa-2.0.0.tgz",
+			"integrity": "sha512-jrZ2Qx916EA+fq9cEAeCROWPTfCwi1IVHqT2tapuqLEVVDKFDENFw1oL+MwrTvH6msKxsd1YTDVw6uKEcsrLEA==",
+			"dependencies": {
+				"buffer-equal-constant-time": "1.0.1",
+				"ecdsa-sig-formatter": "1.0.11",
+				"safe-buffer": "^5.0.1"
+			}
+		},
+		"node_modules/google-auth-library/node_modules/jws": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/jws/-/jws-4.0.0.tgz",
+			"integrity": "sha512-KDncfTmOZoOMTFG4mBlG0qUIOlc03fmzH+ru6RgYVZhPkyiy/92Owlt/8UEN+a4TXR1FQetfIpJE8ApdvdVxTg==",
+			"dependencies": {
+				"jwa": "^2.0.0",
+				"safe-buffer": "^5.0.1"
+			}
+		},
+		"node_modules/googleapis": {
+			"version": "137.1.0",
+			"resolved": "https://registry.npmjs.org/googleapis/-/googleapis-137.1.0.tgz",
+			"integrity": "sha512-2L7SzN0FLHyQtFmyIxrcXhgust77067pkkduqkbIpDuj9JzVnByxsRrcRfUMFQam3rQkWW2B0f1i40IwKDWIVQ==",
+			"dependencies": {
+				"google-auth-library": "^9.0.0",
+				"googleapis-common": "^7.0.0"
+			},
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/googleapis-common": {
+			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/googleapis-common/-/googleapis-common-7.2.0.tgz",
+			"integrity": "sha512-/fhDZEJZvOV3X5jmD+fKxMqma5q2Q9nZNSF3kn1F18tpxmA86BcTxAGBQdM0N89Z3bEaIs+HVznSmFJEAmMTjA==",
+			"dependencies": {
+				"extend": "^3.0.2",
+				"gaxios": "^6.0.3",
+				"google-auth-library": "^9.7.0",
+				"qs": "^6.7.0",
+				"url-template": "^2.0.8",
+				"uuid": "^9.0.0"
+			},
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
 		"node_modules/gopd": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
@@ -1251,6 +1496,37 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
+		"node_modules/gtoken": {
+			"version": "7.1.0",
+			"resolved": "https://registry.npmjs.org/gtoken/-/gtoken-7.1.0.tgz",
+			"integrity": "sha512-pCcEwRi+TKpMlxAQObHDQ56KawURgyAf6jtIY046fJ5tIv3zDe/LEIubckAO8fj6JnAxLdmWkUfNyulQ2iKdEw==",
+			"dependencies": {
+				"gaxios": "^6.0.0",
+				"jws": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/gtoken/node_modules/jwa": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/jwa/-/jwa-2.0.0.tgz",
+			"integrity": "sha512-jrZ2Qx916EA+fq9cEAeCROWPTfCwi1IVHqT2tapuqLEVVDKFDENFw1oL+MwrTvH6msKxsd1YTDVw6uKEcsrLEA==",
+			"dependencies": {
+				"buffer-equal-constant-time": "1.0.1",
+				"ecdsa-sig-formatter": "1.0.11",
+				"safe-buffer": "^5.0.1"
+			}
+		},
+		"node_modules/gtoken/node_modules/jws": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/jws/-/jws-4.0.0.tgz",
+			"integrity": "sha512-KDncfTmOZoOMTFG4mBlG0qUIOlc03fmzH+ru6RgYVZhPkyiy/92Owlt/8UEN+a4TXR1FQetfIpJE8ApdvdVxTg==",
+			"dependencies": {
+				"jwa": "^2.0.0",
+				"safe-buffer": "^5.0.1"
+			}
+		},
 		"node_modules/has-property-descriptors": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
@@ -1368,6 +1644,7 @@
 			"version": "1.0.6",
 			"resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
 			"integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+			"deprecated": "This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.",
 			"dependencies": {
 				"once": "^1.3.0",
 				"wrappy": "1"
@@ -1394,6 +1671,17 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/is-stream": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
+			"integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
 		"node_modules/joi": {
 			"version": "17.13.1",
 			"resolved": "https://registry.npmjs.org/joi/-/joi-17.13.1.tgz",
@@ -1406,6 +1694,14 @@
 				"@sideway/pinpoint": "^2.0.0"
 			}
 		},
+		"node_modules/json-bigint": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/json-bigint/-/json-bigint-1.0.0.tgz",
+			"integrity": "sha512-SiPv/8VpZuWbvLSMtTDU8hEfrZWg/mH/nV/b4o0CYbSxu1UIQPLdwKOCIyLQX+VIPO5vrLX3i8qtqFyhdPSUSQ==",
+			"dependencies": {
+				"bignumber.js": "^9.0.0"
+			}
+		},
 		"node_modules/jsonwebtoken": {
 			"version": "9.0.2",
 			"resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-9.0.2.tgz",
@@ -1709,7 +2005,6 @@
 			"version": "1.10.0",
 			"resolved": "https://registry.npmjs.org/morgan/-/morgan-1.10.0.tgz",
 			"integrity": "sha512-AbegBVI4sh6El+1gNwvD5YIck7nSA36weD7xvIxG4in80j/UoK8AEGaWnnz8v1GxonMCltmlNs5ZKbGvl9b1XQ==",
-			"dev": true,
 			"dependencies": {
 				"basic-auth": "~2.0.1",
 				"debug": "2.6.9",
@@ -1725,7 +2020,6 @@
 			"version": "2.3.0",
 			"resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
 			"integrity": "sha512-ikqdkGAAyf/X/gPhXGvfgAytDZtDbr+bkNUJ0N9h5MI/dmdgCs3l6hoHrcUv41sRKew3jIwrp4qQDXiK99Utww==",
-			"dev": true,
 			"dependencies": {
 				"ee-first": "1.1.1"
 			},
@@ -1855,6 +2149,7 @@
 			"version": "5.0.1",
 			"resolved": "https://registry.npmjs.org/npmlog/-/npmlog-5.0.1.tgz",
 			"integrity": "sha512-AqZtDUWOMKs1G/8lwylVjrdYgqA4d9nu8hc+0gzRxlDb1I10+FHBGMXs6aiQHFdCUUlqH99MUMuLfzWDNDtfxw==",
+			"deprecated": "This package is no longer supported.",
 			"dependencies": {
 				"are-we-there-yet": "^2.0.0",
 				"console-control-strings": "^1.1.0",
@@ -1893,7 +2188,6 @@
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz",
 			"integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==",
-			"dev": true,
 			"engines": {
 				"node": ">= 0.8"
 			}
@@ -2005,7 +2299,6 @@
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz",
 			"integrity": "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==",
-			"dev": true,
 			"funding": {
 				"url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
 			}
@@ -2154,6 +2447,107 @@
 			"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
 			"integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ=="
 		},
+		"node_modules/socket.io": {
+			"version": "4.7.5",
+			"resolved": "https://registry.npmjs.org/socket.io/-/socket.io-4.7.5.tgz",
+			"integrity": "sha512-DmeAkF6cwM9jSfmp6Dr/5/mfMwb5Z5qRrSXLpo3Fq5SqyU8CMF15jIN4ZhfSwu35ksM1qmHZDQ/DK5XTccSTvA==",
+			"dependencies": {
+				"accepts": "~1.3.4",
+				"base64id": "~2.0.0",
+				"cors": "~2.8.5",
+				"debug": "~4.3.2",
+				"engine.io": "~6.5.2",
+				"socket.io-adapter": "~2.5.2",
+				"socket.io-parser": "~4.2.4"
+			},
+			"engines": {
+				"node": ">=10.2.0"
+			}
+		},
+		"node_modules/socket.io-adapter": {
+			"version": "2.5.4",
+			"resolved": "https://registry.npmjs.org/socket.io-adapter/-/socket.io-adapter-2.5.4.tgz",
+			"integrity": "sha512-wDNHGXGewWAjQPt3pyeYBtpWSq9cLE5UW1ZUPL/2eGK9jtse/FpXib7epSTsz0Q0m+6sg6Y4KtcFTlah1bdOVg==",
+			"dependencies": {
+				"debug": "~4.3.4",
+				"ws": "~8.11.0"
+			}
+		},
+		"node_modules/socket.io-adapter/node_modules/debug": {
+			"version": "4.3.4",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+			"integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+			"dependencies": {
+				"ms": "2.1.2"
+			},
+			"engines": {
+				"node": ">=6.0"
+			},
+			"peerDependenciesMeta": {
+				"supports-color": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/socket.io-adapter/node_modules/ms": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+			"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+		},
+		"node_modules/socket.io-parser": {
+			"version": "4.2.4",
+			"resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.4.tgz",
+			"integrity": "sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==",
+			"dependencies": {
+				"@socket.io/component-emitter": "~3.1.0",
+				"debug": "~4.3.1"
+			},
+			"engines": {
+				"node": ">=10.0.0"
+			}
+		},
+		"node_modules/socket.io-parser/node_modules/debug": {
+			"version": "4.3.4",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+			"integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+			"dependencies": {
+				"ms": "2.1.2"
+			},
+			"engines": {
+				"node": ">=6.0"
+			},
+			"peerDependenciesMeta": {
+				"supports-color": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/socket.io-parser/node_modules/ms": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+			"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+		},
+		"node_modules/socket.io/node_modules/debug": {
+			"version": "4.3.4",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+			"integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+			"dependencies": {
+				"ms": "2.1.2"
+			},
+			"engines": {
+				"node": ">=6.0"
+			},
+			"peerDependenciesMeta": {
+				"supports-color": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/socket.io/node_modules/ms": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+			"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+		},
 		"node_modules/sparse-bitfield": {
 			"version": "3.0.3",
 			"resolved": "https://registry.npmjs.org/sparse-bitfield/-/sparse-bitfield-3.0.3.tgz",
@@ -2238,13 +2632,12 @@
 			}
 		},
 		"node_modules/tsx": {
-			"version": "4.8.2",
-			"resolved": "https://registry.npmjs.org/tsx/-/tsx-4.8.2.tgz",
-			"integrity": "sha512-hmmzS4U4mdy1Cnzpl/NQiPUC2k34EcNSTZYVJThYKhdqTwuBeF+4cG9KUK/PFQ7KHaAaYwqlb7QfmsE2nuj+WA==",
-			"dev": true,
+			"version": "4.11.0",
+			"resolved": "https://registry.npmjs.org/tsx/-/tsx-4.11.0.tgz",
+			"integrity": "sha512-vzGGELOgAupsNVssAmZjbUDfdm/pWP4R+Kg8TVdsonxbXk0bEpE1qh0yV6/QxUVXaVlNemgcPajGdJJ82n3stg==",
 			"dependencies": {
 				"esbuild": "~0.20.2",
-				"get-tsconfig": "^4.7.3"
+				"get-tsconfig": "^4.7.5"
 			},
 			"bin": {
 				"tsx": "dist/cli.mjs"
@@ -2284,8 +2677,7 @@
 		"node_modules/undici-types": {
 			"version": "5.26.5",
 			"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
-			"integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
-			"dev": true
+			"integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA=="
 		},
 		"node_modules/unpipe": {
 			"version": "1.0.0",
@@ -2295,6 +2687,11 @@
 				"node": ">= 0.8"
 			}
 		},
+		"node_modules/url-template": {
+			"version": "2.0.8",
+			"resolved": "https://registry.npmjs.org/url-template/-/url-template-2.0.8.tgz",
+			"integrity": "sha512-XdVKMF4SJ0nP/O7XIPB0JwAEuT9lDIYnNsK8yGVe43y0AWoKeJNdv3ZNWh7ksJ6KqQFjOO6ox/VEitLnaVNufw=="
+		},
 		"node_modules/util-deprecate": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -2308,6 +2705,18 @@
 				"node": ">= 0.4.0"
 			}
 		},
+		"node_modules/uuid": {
+			"version": "9.0.1",
+			"resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
+			"integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
+			"funding": [
+				"https://github.com/sponsors/broofa",
+				"https://github.com/sponsors/ctavan"
+			],
+			"bin": {
+				"uuid": "dist/bin/uuid"
+			}
+		},
 		"node_modules/vary": {
 			"version": "1.1.2",
 			"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -2349,6 +2758,26 @@
 			"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
 			"integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
 		},
+		"node_modules/ws": {
+			"version": "8.11.0",
+			"resolved": "https://registry.npmjs.org/ws/-/ws-8.11.0.tgz",
+			"integrity": "sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==",
+			"engines": {
+				"node": ">=10.0.0"
+			},
+			"peerDependencies": {
+				"bufferutil": "^4.0.1",
+				"utf-8-validate": "^5.0.2"
+			},
+			"peerDependenciesMeta": {
+				"bufferutil": {
+					"optional": true
+				},
+				"utf-8-validate": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/yallist": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
diff --git a/server/package.json b/server/package.json
index 21188121..e350f3c1 100644
--- a/server/package.json
+++ b/server/package.json
@@ -10,14 +10,19 @@
 		"bcrypt": "^5.1.1",
 		"cors": "^2.8.5",
 		"dotenv": "^16.4.5",
+		"esno": "^4.7.0",
 		"express": "^4.19.2",
 		"express-file-routing": "^3.0.3",
+		"google-auth-library": "^9.10.0",
+		"googleapis": "^137.1.0",
 		"http-status-codes": "^2.3.0",
 		"joi": "^17.13.1",
 		"jsonwebtoken": "^9.0.2",
 		"mongoose": "^8.3.3",
+		"morgan": "^1.10.0",
 		"nodemailer": "^6.9.13",
-		"picocolors": "^1.0.1"
+		"picocolors": "^1.0.1",
+		"socket.io": "^4.7.5"
 	},
 	"devDependencies": {
 		"@types/bcrypt": "^5.0.2",
@@ -27,8 +32,6 @@
 		"@types/morgan": "^1.9.9",
 		"@types/node": "^20.12.8",
 		"@types/nodemailer": "^6.4.15",
-		"esno": "^4.7.0",
-		"morgan": "^1.10.0",
 		"typescript": "^5.4.5"
 	}
 }
diff --git a/server/src/environment.ts b/server/src/environment.ts
new file mode 100644
index 00000000..a1936d99
--- /dev/null
+++ b/server/src/environment.ts
@@ -0,0 +1,82 @@
+import { config } from 'dotenv';
+
+config();
+
+const LOCAL_DEV = 'development_local';
+const LOCAL_PROD = 'production_local';
+const DEV = 'development';
+const PROD = 'production';
+
+/**
+ * The environment that the server is currently running in.
+ */
+export const NODE_ENV = process.env.NODE_ENV;
+if (NODE_ENV === undefined) throw 'You must specify a NODE_ENV in the server environment variables.';
+
+/**
+ * The port that the server is currently running on.
+ */
+export const SERVER_PORT = process.env.PORT;
+if (!SERVER_PORT) throw 'You must specify a PORT in the server environment variables.';
+
+/**
+ * Returns whether the server is running in development mode.
+ */
+export const isDev = () => NODE_ENV === LOCAL_DEV || NODE_ENV === DEV;
+
+/**
+ * Returns whether the server is running in production mode.
+ */
+export const isProd = () => NODE_ENV === LOCAL_PROD || NODE_ENV === PROD;
+
+/**
+ * Returns whether the server is running in local mode.
+ */
+export const isLocal = () => NODE_ENV === LOCAL_DEV || NODE_ENV === LOCAL_PROD;
+
+/**
+ * Returns the hostname of the client based on
+ * the NODE_ENV specified in the environment variables.
+ */
+export const getClientHost = () => {
+	let localClientPort = process.env.CLIENT_PORT;
+	if (isLocal() && !localClientPort) {
+		console.warn(
+			'There is no client port specified, but you are running locally, please set CLIENT_PORT to the port your frontend is running on. (Using 8000 by default)',
+		);
+
+		localClientPort = '8000';
+	}
+
+	switch (NODE_ENV) {
+		case LOCAL_DEV:
+			return `http://127.0.0.1:${localClientPort}`;
+		case LOCAL_PROD:
+			return `http://127.0.0.1:${localClientPort}`;
+		case DEV:
+			return 'https://dev.skynetwork.app';
+		case PROD:
+			return 'https://skynetwork.app';
+		default:
+			throw 'Invalid NODE_ENV found in your environment variables!';
+	}
+};
+
+/**
+ * Returns the hostname of the server based on
+ * the NODE_ENV specified in the environment variables.
+ */
+export const getServerHost = () => {
+	switch (NODE_ENV) {
+		case LOCAL_DEV:
+			return `http://127.0.0.1:${SERVER_PORT}`;
+		case LOCAL_PROD:
+			return `http://127.0.0.1:${SERVER_PORT}`;
+		case DEV:
+			return 'https://api.dev.skynetwork.app';
+		case PROD:
+			return 'https://api.skynetwork.app';
+		default:
+			throw 'Invalid NODE_ENV found in your environment variables!';
+	}
+};
diff --git a/server/src/lib/auth/adapters/basic-jwt.ts b/server/src/lib/auth/adapters/basic-jwt.ts
new file mode 100644
index 00000000..83bc80d2
--- /dev/null
+++ b/server/src/lib/auth/adapters/basic-jwt.ts
@@ -0,0 +1,31 @@
+import jwt from 'jsonwebtoken';
+import mongoose from 'mongoose';
+import { UserModel } from '../../../models/user';
+import { Request } from 'express';
+import { JWT, JWTPayload } from '../../../utils/jwt';
+import { AuthAdapter } from '../auth-adapter';
+
+/**
+ * Allows for creation and verification of JWT
+ * authentication tokens.
+ */
+export class BasicJWTAdapter implements AuthAdapter {
+	public parseToken(req: Request) {
+		const authHeader = req.headers.authorization;
+		if (!authHeader || !authHeader.startsWith('Bearer')) return;
+
+		return authHeader.split(' ')[1];
+	}
+
+	public async verifyToUser(token: string) {
+		try {
+			const payload = jwt.verify(token, JWT.SECRET) as JWTPayload;
+			if (!payload || !('userId' in payload)) return;
+
+			const userId = payload.userId;
+			if (!mongoose.isValidObjectId(userId)) return;
+
+			return await UserModel.findById(userId);
+		} catch {}
+	}
+}
diff --git a/server/src/lib/auth/adapters/google-oauth.ts b/server/src/lib/auth/adapters/google-oauth.ts
new file mode 100644
index 00000000..99f713e8
--- /dev/null
+++ b/server/src/lib/auth/adapters/google-oauth.ts
@@ -0,0 +1,112 @@
+import { google } from 'googleapis';
+import { OAuth2Client } from 'google-auth-library';
+import { UserModel } from '../../../models/user';
+import { Request } from 'express';
+import { AuthAdapter } from '../auth-adapter';
+import { PlanetModel } from '../../../models/planet';
+import { getClientHost, isDev } from '../../../environment';
+
+export class GoogleOAuthAdapter implements AuthAdapter {
+	/**
+	 * The client ID used to access the OAuth client API.
+	 */
+	private static CLIENT_ID: string;
+
+	/**
+	 * The OAuth Secret used to access the OAuth Client API.
+	 */
+	private static SECRET: string;
+
+	/**
+	 * The redirect URL that the OAuth consent screen will redirect to.
+	 */
+	private static REDIRECT_URL: string;
+
+	/**
+	 * Generates a new Google OAuth client and google OAuth API client with the static variables.
+	 */
+	public static generateClients = () => {
+		const authClient = new OAuth2Client({
+			clientId: this.CLIENT_ID,
+			clientSecret: this.SECRET,
+			redirectUri: this.REDIRECT_URL,
+		});
+
+		const googleClient = google.oauth2({ auth: authClient, version: 'v2' });
+
+		return { authClient, googleClient };
+	};
+
+	/**
+	 * Assigns static variables and provides helpful
+	 * errors if any of the setup went wrong.
+	 */
+	static {
+		const id = process.env.GOOGLE_OAUTH_ID;
+		if (typeof id !== 'string') throw 'GOOGLE_OAUTH_ID is not present in environment variables.';
+
+		this.CLIENT_ID = id;
+
+		const secret = process.env.GOOGLE_OAUTH_SECRET;
+		if (typeof secret !== 'string') throw 'GOOGLE_OAUTH_SECRET is not present in environment variables.';
+
+		this.SECRET = secret;
+		this.REDIRECT_URL = `${getClientHost()}/login`;
+	}
+
+	public parseToken(req: Request) {
+		const authCode = req.query.code;
+		if (typeof authCode === 'string') return authCode;
+	}
+
+	public async verifyToUser(token: string) {
+		const googleUser = await this.verifyToGoogleUser(token);
+		if (!googleUser) return;
+
+		const googleId = googleUser.id;
+		if (!googleId) return;
+
+		const foundUser = await UserModel.findOne({ 'sso.id': googleId });
+		if (foundUser) return foundUser;
+
+		const userName = googleUser.name;
+		if (!userName) return;
+
+		const newUser = new UserModel({
+			userName: userName,
+			avatarUrl: googleUser.picture,
+			sso: { provider: 'google', id: googleId },
+			location: {
+				planetId: await PlanetModel.findOne({ name: 'Earth' }),
+				latitude: 0,
+				longitude: 0,
+			},
+		});
+
+		try {
+			await newUser.save();
+			return newUser;
+		} catch (err) {
+			console.log(err);
+		}
+	}
+
+	/**
+	 * Given the specified Google OAuth authentication code,
+	 * returns a Google user.
+	 */
+	private async verifyToGoogleUser(authCode: string) {
+		try {
+			const { authClient, googleClient } = GoogleOAuthAdapter.generateClients();
+			const tokenResponse = await authClient.getToken(authCode);
+
+			const idToken = tokenResponse.tokens.id_token;
+			if (!idToken) return;
+
+			authClient.setCredentials(tokenResponse.tokens);
+			const googleUser = await googleClient.userinfo.get();
+
+			return googleUser.data;
+		} catch {}
+	}
+}
diff --git a/server/src/lib/auth/auth-adapter.ts b/server/src/lib/auth/auth-adapter.ts
new file mode 100644
index 00000000..1d14ed53
--- /dev/null
+++ b/server/src/lib/auth/auth-adapter.ts
@@ -0,0 +1,23 @@
+import { Request } from 'express';
+import { HydratedDocument } from 'mongoose';
+import { IUser } from '../../models/user';
+
+/**
+ * An interface defining a user authorization method.
+ *
+ * An adapter should be stateless, meaning they can
+ * be reused with any number of requests.
+ */
+export interface AuthAdapter {
+	/**
+	 * Parses an authorization token from a given
+	 * Express request object, if one can be found.
+	 */
+	parseToken(req: Request): string | undefined;
+
+	/**
+	 * Verifies an authorization token into a hydrated database user,
+	 * if one exists.
+	 */
+	verifyToUser(token: string): Promise<HydratedDocument<IUser> | undefined | null>;
+}
diff --git a/server/src/lib/auth/auth-worker.ts b/server/src/lib/auth/auth-worker.ts
new file mode 100644
index 00000000..ccdfb339
--- /dev/null
+++ b/server/src/lib/auth/auth-worker.ts
@@ -0,0 +1,52 @@
+import { Request } from 'express';
+import { BasicJWTAdapter } from './adapters/basic-jwt';
+import { GoogleOAuthAdapter } from './adapters/google-oauth';
+import { AuthAdapter } from './auth-adapter';
+
+const registeredAdapters = [new GoogleOAuthAdapter(), new BasicJWTAdapter()];
+
+/**
+ * Request authentication worker to authenticate
+ * request depending on the authentication method.
+ */
+export class AuthWorker {
+	private token?: string;
+
+	/**
+	 * Creates a new worker with the given request and adapter.
+	 */
+	private constructor(private req: Request, private adapter: AuthAdapter, tokenOverride?: string) {
+		this.token = tokenOverride ?? this.adapter.parseToken(this.req);
+	}
+
+	/**
+	 * Authenticates the request this worker was created from. If
+	 * properly authenticated, adds the authenticated user to the request.
+	 *
+	 * @returns whether the request was authenticated
+	 */
+	public async authenticate() {
+		if (!this.token) return false;
+
+		const user = await this.adapter.verifyToUser(this.token);
+		if (!user) return false;
+
+		this.req.user = user;
+		return true;
+	}
+
+	/**
+	 * Automatically selects an adapter based on the given
+	 * request.
+	 */
+	public static fromRequest(req: Request) {
+		let foundToken;
+
+		for (const adapter of registeredAdapters) {
+			foundToken = adapter.parseToken(req);
+			if (foundToken) return new AuthWorker(req, adapter, foundToken);
+		}
+
+		return new AuthWorker(req, registeredAdapters[0]);
+	}
+}
diff --git a/server/src/load-env.ts b/server/src/load-env.ts
deleted file mode 100644
index ebd3de70..00000000
--- a/server/src/load-env.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { config } from 'dotenv';
-
-config();
-
-export const isDev = () => process.env.NODE_ENV === 'development';
diff --git a/server/src/middlewares/auth-protected.ts b/server/src/middlewares/auth-protected.ts
new file mode 100644
index 00000000..bf66a642
--- /dev/null
+++ b/server/src/middlewares/auth-protected.ts
@@ -0,0 +1,16 @@
+import { NextFunction, Request, Response } from 'express';
+import { Resolve } from '../utils/express';
+import { AuthWorker } from '../lib/auth/auth-worker';
+
+/**
+ * Middleware to ensure that the request includes a valid authorization token.
+ * If it does not, it will resolve the request with an unautorized response.
+ */
+export async function authProtected(req: Request, res: Response, next: NextFunction) {
+	const worker = AuthWorker.fromRequest(req);
+
+	const didAuthenticate = await worker.authenticate();
+	if (!didAuthenticate) return Resolve(res).unauthorized('Authentication is required.');
+
+	next();
+}
diff --git a/server/src/middlewares/require-login.ts b/server/src/middlewares/require-login.ts
deleted file mode 100644
index 8c15b823..00000000
--- a/server/src/middlewares/require-login.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { NextFunction, Request, Response } from 'express';
-import { Resolve } from '../utils/express';
-import { AuthToken } from '../utils/auth-token';
-
-/**
- * Middleware to ensure that the request includes a valid authorization token.
- * If it does not, it will resolve the request with an unautorized response.
- */
-export async function requireLogin(req: Request, res: Response, next: NextFunction) {
-	const authHeader = req.headers.authorization;
-	if (!authHeader || !authHeader.startsWith('Bearer'))
-		return Resolve(res).unauthorized('Authentication is required.');
-
-	const [_, token] = authHeader.split(' ');
-
-	const user = await AuthToken.verifyToUser(token);
-	if (!user) return Resolve(res).unauthorized('Invalid token provided.');
-
-	req.user = user;
-	next();
-}
diff --git a/server/src/models/conversation.ts b/server/src/models/conversation.ts
new file mode 100644
index 00000000..8d9f4a02
--- /dev/null
+++ b/server/src/models/conversation.ts
@@ -0,0 +1,22 @@
+import { model, Schema, Types } from 'mongoose';
+import { IMedia } from './media';
+import { ILocation } from './location';
+
+export interface IConversation {
+	senderId: Types.ObjectId;
+	receiverId: Types.ObjectId;
+	createdAt: Date;
+	media: Array<IMedia>;
+	content: string;
+	location: ILocation;
+}
+
+const schema = new Schema<IConversation>(
+	{
+		senderId: { type: 'ObjectId', ref: 'User', required: true },
+		receiverId: { type: 'ObjectId', ref: 'User', required: true },
+	},
+	{ timestamps: { createdAt: true, updatedAt: false } },
+);
+
+export const ConversationModel = model('Conversation', schema);
\ No newline at end of file
diff --git a/server/src/models/deletedUser.ts b/server/src/models/deletedUser.ts
new file mode 100644
index 00000000..a4567dd7
--- /dev/null
+++ b/server/src/models/deletedUser.ts
@@ -0,0 +1,44 @@
+import { model, ObjectId, Schema, Types } from 'mongoose';
+import { ILocation, LocationSchema } from './location';
+import { AuthProvider, SSOSchema } from './user';
+
+interface IDeletedUser {
+	originID: ObjectId;
+	email?: string;
+	password?: string;
+	sso?: { provider: AuthProvider; id: string };
+	userName: string;
+	bio?: string;
+	location: ILocation;
+	birthDate?: Date;
+	avatarUrl?: string;
+	followerCount: number;
+	followingCount: number;
+	postCount: number;
+	admin: boolean;
+	savedPosts: Array<Types.ObjectId>;
+	createdAt: Date;
+}
+
+const schema = new Schema<IDeletedUser>(
+	{
+		originID: { type: Object, required: true },
+		email: { type: 'string' },
+		sso: { type: SSOSchema },
+		password: { type: 'string' },
+		userName: { type: 'string', required: true },
+		bio: { type: 'string' },
+		location: { type: LocationSchema, required: true },
+		birthDate: { type: 'date' },
+		avatarUrl: { type: 'string' },
+		followerCount: { type: 'number', required: true, default: 0 },
+		followingCount: { type: 'number', required: true, default: 0 },
+		postCount: { type: 'number', required: true, default: 0 },
+		savedPosts: { type: ['ObjectId'], required: true, default: [] },
+		admin: { type: 'boolean', required: true, default: false },
+		// createdAt: {type: Date, default: new Date(), expires: 2592000}
+		createdAt: {type: Date, default: new Date()}
+	}
+);
+
+export const DeletedUserModel = model('DeletedUser', schema);
diff --git a/server/src/models/message.ts b/server/src/models/message.ts
index e1f282dc..7c981b78 100644
--- a/server/src/models/message.ts
+++ b/server/src/models/message.ts
@@ -1,10 +1,10 @@
-import { Schema, Types } from 'mongoose';
+import { model, Schema, Types } from 'mongoose';
 import { IMedia, MediaSchema } from './media';
 import { ILocation, LocationSchema } from './location';
 
 export interface IMessage {
+    conversationId: Types.ObjectId,
 	senderId: Types.ObjectId;
-	receiverId: Types.ObjectId;
 	createdAt: Date;
 	media: Array<IMedia>;
 	content: string;
@@ -13,10 +13,10 @@ export interface IMessage {
 
 const schema = new Schema<IMessage>(
 	{
+        conversationId: { type: 'ObjectId', ref: 'Conversation', required: true },
 		senderId: { type: 'ObjectId', ref: 'User', required: true },
-		receiverId: { type: 'ObjectId', ref: 'User', required: true },
 		content: { type: 'string', required: true },
-		location: { type: LocationSchema, required: true },
+		// location: { type: LocationSchema, required: true },
 		media: {
 			required: true,
 			default: [],
@@ -25,3 +25,5 @@ const schema = new Schema<IMessage>(
 	},
 	{ timestamps: { createdAt: true, updatedAt: false } },
 );
+
+export const MessageModel = model('Message', schema);
\ No newline at end of file
diff --git a/server/src/models/planet.ts b/server/src/models/planet.ts
index a51afe6d..08f67c90 100644
--- a/server/src/models/planet.ts
+++ b/server/src/models/planet.ts
@@ -1,11 +1,28 @@
 import { model, Schema } from 'mongoose';
 
+interface IPlanetVisual {
+	radius: number;
+	orbitRadius: number;
+	orbitDuration?: number;
+}
+
 export interface IPlanet {
 	name: string;
+	visual: IPlanetVisual;
 }
 
+const visualSchema = new Schema<IPlanetVisual>(
+	{
+		radius: { type: 'number', required: true },
+		orbitRadius: { type: 'number', required: true },
+		orbitDuration: { type: 'number' },
+	},
+	{ _id: false },
+);
+
 const schema = new Schema<IPlanet>({
 	name: { type: 'string', required: true },
+	visual: { type: visualSchema, required: true },
 });
 
 export const PlanetModel = model('Planet', schema);
diff --git a/server/src/models/user.ts b/server/src/models/user.ts
index d7a83257..119cc6c6 100644
--- a/server/src/models/user.ts
+++ b/server/src/models/user.ts
@@ -1,9 +1,19 @@
 import { model, Schema, Types } from 'mongoose';
 import { ILocation, LocationSchema } from './location';
 
+export enum AuthProvider {
+	GOOGLE = 'google',
+}
+
+interface ISSO {
+	provider: AuthProvider;
+	id: string;
+}
+
 export interface IUser {
-	email: string;
-	password: string;
+	email?: string;
+	password?: string;
+	sso?: { provider: AuthProvider; id: string };
 	userName: string;
 	bio?: string;
 	location: ILocation;
@@ -17,10 +27,16 @@ export interface IUser {
 	createdAt: Date;
 }
 
+export const SSOSchema = new Schema<ISSO>({
+	provider: { type: 'string', required: true },
+	id: { type: 'string', required: true },
+});
+
 const schema = new Schema<IUser>(
 	{
-		email: { type: 'string', required: true },
-		password: { type: 'string', required: true },
+		email: { type: 'string' },
+		sso: { type: SSOSchema },
+		password: { type: 'string' },
 		userName: { type: 'string', required: true },
 		bio: { type: 'string' },
 		location: { type: LocationSchema, required: true },
diff --git a/server/src/routes/feed/[planetOrUserId].ts b/server/src/routes/feed/[planetOrUserId].ts
new file mode 100644
index 00000000..fda6657e
--- /dev/null
+++ b/server/src/routes/feed/[planetOrUserId].ts
@@ -0,0 +1,28 @@
+import { Handler } from 'express';
+import { PostModel } from '../../models/post';
+import { Resolve } from '../../utils/express';
+import { PlanetModel } from '../../models/planet';
+import mongoose from 'mongoose';
+import { UserModel } from '../../models/user';
+
+export const get: Handler = async (req, res) => {
+	const planetOrUserId = req.params.planetOrUserId;
+	if (!mongoose.isValidObjectId(planetOrUserId)) return Resolve(res).badRequest('Invalid planet ID specified.');
+
+	let search;
+	const existingPlanet = await PlanetModel.exists({ _id: planetOrUserId }).lean();
+	if (existingPlanet) search = { 'location.planetId': existingPlanet._id };
+	else {
+		const existingUser = await UserModel.exists({ _id: planetOrUserId }).lean();
+		if (existingUser) search = { authorId: existingUser._id };
+		else return Resolve(res).notFound('No planet or user by the given ID exists.');
+	}
+
+	const rawPage = parseInt(typeof req.query.page === 'string' ? req.query.page : '');
+	const page = Math.max(1, typeof rawPage !== 'number' || isNaN(rawPage) ? 1 : rawPage);
+	const limit = 20;
+	const skip = (page - 1) * limit;
+
+	const latestPosts = await PostModel.find(search).sort({ createdAt: -1 }).skip(skip).limit(limit).lean();
+	Resolve(res).okWith(latestPosts);
+};
diff --git a/server/src/routes/feed/index.ts b/server/src/routes/feed/index.ts
new file mode 100644
index 00000000..6aa5ff6a
--- /dev/null
+++ b/server/src/routes/feed/index.ts
@@ -0,0 +1,13 @@
+import { Handler } from 'express';
+import { PostModel } from '../../models/post';
+import { Resolve } from '../../utils/express';
+
+export const get: Handler = async (req, res) => {
+	const rawPage = parseInt(typeof req.query.page === 'string' ? req.query.page : '');
+	const page = Math.max(1, typeof rawPage !== 'number' || isNaN(rawPage) ? 1 : rawPage);
+	const limit = 20;
+	const skip = (page - 1) * limit;
+
+	const latestPosts = await PostModel.find().sort({ likes: -1, createdAt: -1 }).skip(skip).limit(limit).lean();
+	Resolve(res).okWith(latestPosts);
+};
diff --git a/server/src/routes/post/[id]/comment.ts b/server/src/routes/post/[id]/comment.ts
index 2e478cff..e28724ec 100644
--- a/server/src/routes/post/[id]/comment.ts
+++ b/server/src/routes/post/[id]/comment.ts
@@ -1,5 +1,5 @@
 import { Handler } from 'express';
-import { requireLogin } from '../../../middlewares/require-login';
+import { authProtected } from '../../../middlewares/auth-protected';
 import mongoose from 'mongoose';
 import { assertRequestBody, Resolve } from '../../../utils/express';
 import { PostModel } from '../../../models/post';
@@ -8,6 +8,7 @@ import { ILocation, RawLocationSchema } from '../../../models/location';
 import { IMedia, RawMediaSchema } from '../../../models/media';
 import Joi from 'joi';
 import { CommentRelationship } from '../../../models/comment-relationship';
+import { UserModel } from '../../../models/user';
 
 interface PostBody {
 	content: string;
@@ -23,12 +24,36 @@ export const get: Handler = async (req, res) => {
 	if (isNaN(limit)) limit = 10;
 	limit = Math.max(0, Math.min(limit, 100));
 
+
+	const rawPage = req.query.page;
+	let page = typeof rawPage === 'string' ? parseInt(rawPage) : NaN;
+	if (isNaN(page)) page = 1;
+	page = Math.max(1, page);
+
 	if (!mongoose.isValidObjectId(parentPostId)) return Resolve(res).badRequest('Invalid post ID provided.');
 
-	const relationships = await CommentRelationship.find({ parentPost: parentPostId }).limit(limit);
+	const relationships = await CommentRelationship.find({ parentPost: parentPostId })
+		.sort({ createdAt: -1 })
+		.skip((page - 1) * limit)
+		.limit(limit);
+
 	const comments = await Promise.all(
 		relationships.map(async (v) => {
-			return await PostModel.findById(v.childPost).lean();
+			const comment = await PostModel.findById(v.childPost).lean();
+			if (comment) {
+				const user = await UserModel.findById(comment.authorId).lean();
+				const post = await PostModel.findById(comment._id).lean();
+				if (user && post) {
+					return {
+						...comment,
+						userName: user.userName,
+						repost: post.repostCount,
+						like: post.likeCount,
+						comment: post.commentCount,
+					};
+				}
+			}
+			return comment;
 		}),
 	);
 
@@ -36,7 +61,7 @@ export const get: Handler = async (req, res) => {
 };
 
 export const post: Handler[] = [
-	requireLogin,
+	authProtected,
 	async (req, res) => {
 		const parentPostId = req.params.id;
 		if (!mongoose.isValidObjectId(parentPostId)) return Resolve(res).badRequest('Invalid post ID provided.');
@@ -87,9 +112,23 @@ export const post: Handler[] = [
 				return relationship;
 			});
 
-			Resolve(res).created(commentRelationship, 'Comment created successfully.');
-		} catch {
-			Resolve(res).error('Error occured while trying to create this comment.');
+			// Fetch the newly created comment with user information
+			const newComment = await PostModel.findById(commentRelationship.childPost).lean();
+			if (!newComment) throw new Error('Failed to fetch the newly created comment.');
+			const user = await UserModel.findById(newComment.authorId).lean();
+			if (!user) throw new Error('Failed to fetch the user information of the comment author.');
+			const responseComment = {
+				...newComment,
+				userName: user.userName,
+				repost: newComment.repostCount,
+				like: newComment.likeCount,
+				comment: newComment.commentCount,
+			};
+
+			Resolve(res).created(responseComment, 'Comment created successfully.');
+		} catch (error) {
+			console.error('Error creating comment:', error);
+			Resolve(res).error('Error occurred while trying to create this comment.');
 		} finally {
 			await session.endSession();
 		}
diff --git a/server/src/routes/post/[id]/index.ts b/server/src/routes/post/[id]/index.ts
index eded3550..e55724da 100644
--- a/server/src/routes/post/[id]/index.ts
+++ b/server/src/routes/post/[id]/index.ts
@@ -1,10 +1,11 @@
 import { Handler } from 'express';
 import mongoose from 'mongoose';
-import { requireLogin } from '../../../middlewares/require-login';
+import { authProtected } from '../../../middlewares/auth-protected';
 import { PostModel } from '../../../models/post';
 import { Resolve } from '../../../utils/express';
 import { CommentRelationship } from '../../../models/comment-relationship';
 import { LikeInteraction } from '../../../models/like-interaction';
+import { UserModel } from '../../../models/user';
 
 export const get: Handler = async (req, res) => {
 	const id = req.params.id;
@@ -14,11 +15,20 @@ export const get: Handler = async (req, res) => {
 	if (!post) return Resolve(res).notFound('Invalid post ID provided.');
 
 	if (post.deleted) return Resolve(res).gone('Post has been deleted.');
-	return Resolve(res).okWith(post);
+
+	const user = await UserModel.findById(post.authorId).select('userName');
+	if (!user) return Resolve(res).notFound('User not found.');
+
+	const postWithUser = {
+		...post.toObject(),
+		userName: user.userName
+	};
+
+	return Resolve(res).okWith(postWithUser);
 };
 
 export const del: Handler[] = [
-	requireLogin,
+	authProtected,
 	async (req, res) => {
 		const id = req.params.id;
 		if (!mongoose.isValidObjectId(id)) return Resolve(res).badRequest('Invalid post ID provided.');
diff --git a/server/src/routes/post/[id]/like.ts b/server/src/routes/post/[id]/like.ts
index 56299ab0..f76c9cd4 100644
--- a/server/src/routes/post/[id]/like.ts
+++ b/server/src/routes/post/[id]/like.ts
@@ -1,25 +1,24 @@
 import { Handler } from 'express';
-import { requireLogin } from '../../../middlewares/require-login';
+import { authProtected } from '../../../middlewares/auth-protected';
 import { PostModel } from '../../../models/post';
 import mongoose from 'mongoose';
 import { Resolve } from '../../../utils/express';
 import { LikeInteraction } from '../../../models/like-interaction';
 
 export const get: Handler[] = [
-	requireLogin,
+	authProtected,
 	async (req, res) => {
 		const id = req.params.id;
 		if (!mongoose.isValidObjectId(id)) return Resolve(res).badRequest('Invalid post ID provided.');
 
 		const currentUserId = req.user!.id;
-		const existingInteraction = await LikeInteraction.findOne({ postId: id, userId: currentUserId });
-		if (existingInteraction) Resolve(res).okWith(existingInteraction);
-		else Resolve(res).notFound('Post is not liked.');
+		const existingInteraction = await LikeInteraction.exists({ postId: id, userId: currentUserId });
+		Resolve(res).okWith(!!existingInteraction);
 	},
 ];
 
 export const post: Handler[] = [
-	requireLogin,
+	authProtected,
 	async (req, res) => {
 		const id = req.params.id;
 		if (!mongoose.isValidObjectId(id)) return Resolve(res).badRequest('Invalid post ID provided.');
@@ -60,7 +59,7 @@ export const post: Handler[] = [
 ];
 
 export const del: Handler[] = [
-	requireLogin,
+	authProtected,
 	async (req, res) => {
 		const id = req.params.id;
 		if (!mongoose.isValidObjectId(id)) return Resolve(res).badRequest('Invalid post ID provided.');
@@ -86,7 +85,7 @@ export const del: Handler[] = [
 
 			Resolve(res).okWith(interaction);
 		} catch {
-			Resolve(res).error('Error occured while trying to like this post.');
+			Resolve(res).error('Error occured while trying to unlike this post.');
 		} finally {
 			await session.endSession();
 		}
diff --git a/server/src/routes/post/[id]/save.ts b/server/src/routes/post/[id]/save.ts
index 76740f8b..fb6a17f6 100644
--- a/server/src/routes/post/[id]/save.ts
+++ b/server/src/routes/post/[id]/save.ts
@@ -1,11 +1,11 @@
 import { Handler } from 'express';
-import { requireLogin } from '../../../middlewares/require-login';
+import { authProtected } from '../../../middlewares/auth-protected';
 import mongoose from 'mongoose';
 import { Resolve } from '../../../utils/express';
 import { PostModel } from '../../../models/post';
 
 export const get: Handler[] = [
-	requireLogin,
+	authProtected,
 	async (req, res) => {
 		const id = req.params.id;
 		if (!mongoose.isValidObjectId(id)) return Resolve(res).badRequest('Invalid post ID provided.');
@@ -16,7 +16,7 @@ export const get: Handler[] = [
 ];
 
 export const post: Handler[] = [
-	requireLogin,
+	authProtected,
 	async (req, res) => {
 		const id = req.params.id;
 		if (!mongoose.isValidObjectId(id)) return Resolve(res).badRequest('Invalid post ID provided.');
@@ -37,7 +37,7 @@ export const post: Handler[] = [
 ];
 
 export const del: Handler[] = [
-	requireLogin,
+	authProtected,
 	async (req, res) => {
 		const id = req.params.id;
 		if (!mongoose.isValidObjectId(id)) return Resolve(res).badRequest('Invalid post ID provided.');
diff --git a/server/src/routes/post/index.ts b/server/src/routes/post/index.ts
index ad62c954..c29b1308 100644
--- a/server/src/routes/post/index.ts
+++ b/server/src/routes/post/index.ts
@@ -1,6 +1,6 @@
 import Joi from 'joi';
 import { Handler } from 'express';
-import { requireLogin } from '../../middlewares/require-login';
+import { authProtected } from '../../middlewares/auth-protected';
 import { assertRequestBody, Resolve } from '../../utils/express';
 import { IMedia, RawMediaSchema } from '../../models/media';
 import { ILocation, RawLocationSchema } from '../../models/location';
@@ -15,7 +15,7 @@ interface PostBody {
 }
 
 export const post: Handler[] = [
-	requireLogin,
+	authProtected,
 	async (req, res) => {
 		const body = assertRequestBody(
 			req,
diff --git a/server/src/routes/user/[id].ts b/server/src/routes/user/[id].ts
index 16af1d09..8a3cdb99 100644
--- a/server/src/routes/user/[id].ts
+++ b/server/src/routes/user/[id].ts
@@ -2,14 +2,16 @@ import Joi from 'joi';
 import mongoose from 'mongoose';
 import { Handler } from 'express';
 import { UserModel } from '../../models/user';
-import { requireLogin } from '../../middlewares/require-login';
+import { authProtected } from '../../middlewares/auth-protected';
 import { assertRequestBody, Resolve } from '../../utils/express';
 
 export const get: Handler = async (req, res) => {
 	const id = req.params.id;
 	if (!mongoose.isValidObjectId(id)) return Resolve(res).badRequest('Invalid user ID provided.');
 
-	const user = await UserModel.findById(id).lean().select('-admin -email -password');
+	const user = await UserModel.findById(id)
+		.lean()
+		.select('userName bio location avatarUrl followerCount followingCount postCount createdAt');
 	if (!user) Resolve(res).notFound('No user found by the given ID.');
 	else Resolve(res).okWith(user);
 };
@@ -21,7 +23,7 @@ interface PatchBody {
 }
 
 export const patch: Handler[] = [
-	requireLogin,
+	authProtected,
 	async (req, res) => {
 		const id = req.params.id;
 		if (!mongoose.isValidObjectId(id)) return Resolve(res).badRequest('Invalid user ID provided');
diff --git a/server/src/routes/user/changeEmail.ts b/server/src/routes/user/changeEmail.ts
index 70b416d8..06423434 100644
--- a/server/src/routes/user/changeEmail.ts
+++ b/server/src/routes/user/changeEmail.ts
@@ -1,29 +1,45 @@
 import Joi from 'joi';
 import { Handler } from 'express';
 import { Resolve } from '../../utils/express';
-import { requireLogin } from '../../middlewares/require-login';
+import { authProtected } from '../../middlewares/auth-protected';
 
 interface EmailBody {
-    newEmail: string,
-    confirmEmail: string
+	currEmail: string;
+	newEmail: string;
+	confirmEmail: string;
 }
 
 export const patch: Handler[] = [
-    requireLogin,
-    async (req, res) => {
-        const user = req.user!;
+	authProtected,
+	async (req, res) => {
+		const user = req.user!;
 
-        const emailSchema = Joi.object<EmailBody>({
-			newEmail: Joi.string().trim().email().required(),
-			confirmEmail: Joi.string().trim().email().required()
+		const emailSchema = Joi.object<EmailBody>({
+			currEmail: Joi.string().trim().email().required().equal(user.email).messages({
+				'string.base': 'Email must be a string.',
+				'string.email': 'The current email entered is not a valid email',
+				'any.required': 'Entering the current email is required.',
+				'any.only': 'The current email entered does not match.',
+			}),
+			newEmail: Joi.string().trim().email().required().messages({
+				'string.base': 'Email must be a string.',
+				'string.email': 'The new email entered is not a valid email',
+				'any.required': 'Entering the new email is required.',
+			}),
+			confirmEmail: Joi.string().trim().email().required().equal(Joi.ref('newEmail')).messages({
+				'string.base': 'Email must be a string.',
+				'string.email': 'The confirmed email entered is not a valid email',
+				'any.required': 'Confirming the email is required.',
+				'any.only': 'The confirmed email does not match the new email.',
+			})
 		});
 
-        const bodyValidationResult = emailSchema.validate(req.body);
-		if (bodyValidationResult.error) return res.status(400).json({ error: bodyValidationResult.error.message });
+		const bodyValidationResult = emailSchema.validate(req.body);
+		if (bodyValidationResult.error) return Resolve(res).badRequest(bodyValidationResult.error.message);
 
-        const value = bodyValidationResult.value;
+		const value = bodyValidationResult.value;
+		const result = await user.updateOne({ email: value.newEmail });
 
-        const result = await user.updateOne({ email: value.newEmail });
 		return Resolve(res).okWith(result, 'Email changed successfully.');
-    }
-];
\ No newline at end of file
+	},
+];
diff --git a/server/src/routes/user/changeUsername.ts b/server/src/routes/user/changeUsername.ts
index 8ad3a173..14dfdc9a 100644
--- a/server/src/routes/user/changeUsername.ts
+++ b/server/src/routes/user/changeUsername.ts
@@ -1,27 +1,33 @@
 import Joi from 'joi';
 import { Handler } from 'express';
 import { Resolve } from '../../utils/express';
-import { requireLogin } from '../../middlewares/require-login';
+import { authProtected } from '../../middlewares/auth-protected';
 
 interface UsernameBody {
-    newUsername: string
+	newUsername: string;
 }
 
 export const patch: Handler[] = [
-    requireLogin,
-    async (req, res) => {
-        const user = req.user!;
+	authProtected,
+	async (req, res) => {
+		const user = req.user!;
 
-        const emailSchema = Joi.object<UsernameBody>({
-			newUsername: Joi.string().trim().required()
+		const currUsername = user.userName;
+
+		const emailSchema = Joi.object<UsernameBody>({
+			newUsername: Joi.string().trim().required().invalid(currUsername).messages({
+				'string.base': 'New username must be a string.',
+				'any.required': 'A username is required in order to change your username.',
+				'any.invalid': 'Username entered is already the current username.',
+			}),
 		});
 
-        const bodyValidationResult = emailSchema.validate(req.body);
-		if (bodyValidationResult.error) return res.status(400).json({ error: bodyValidationResult.error.message });
+		const validationResult = emailSchema.validate(req.body);
+		if (validationResult.error) return Resolve(res).badRequest(validationResult.error.message);
 
-        const value = bodyValidationResult.value;
+		const value = validationResult.value;
 
-        const result = await user.updateOne({ userName: value.newUsername });
+		const result = await user.updateOne({ userName: value.newUsername });
 		return Resolve(res).okWith(result, 'Username changed successfully.');
-    }
-];
\ No newline at end of file
+	},
+];
diff --git a/server/src/routes/user/changepassword.ts b/server/src/routes/user/changepassword.ts
index bde47f2e..89fa1302 100644
--- a/server/src/routes/user/changepassword.ts
+++ b/server/src/routes/user/changepassword.ts
@@ -3,7 +3,7 @@ import { Handler } from 'express';
 import { createHash } from '../../utils/bcrypt';
 import { compareToHashed } from '../../utils/bcrypt';
 import { Resolve } from '../../utils/express';
-import { requireLogin } from '../../middlewares/require-login';
+import { authProtected } from '../../middlewares/auth-protected';
 
 interface PostBody {
 	password: string;
@@ -12,7 +12,7 @@ interface PostBody {
 }
 
 export const patch: Handler[] = [
-	requireLogin,
+	authProtected,
 	async (req, res) => {
 		const user = req.user!;
 
@@ -37,10 +37,13 @@ export const patch: Handler[] = [
 
 		const { value: body } = bodyValidationResult;
 
-		const passwordsMatch = await compareToHashed(body.password, user.password);
+		const password = user.password;
+		if (!password) return Resolve(res).forbidden('Password is incorrect.');
+
+		const passwordsMatch = await compareToHashed(body.password, password);
 		if (!passwordsMatch) return Resolve(res).forbidden('Password is incorrect.');
 
 		await user.updateOne({ password: await createHash(body.newpassword) });
 		return Resolve(res).okWith(patch, 'Password changed successfully.');
 	},
-];
\ No newline at end of file
+];
diff --git a/server/src/routes/user/chat.ts b/server/src/routes/user/chat.ts
new file mode 100644
index 00000000..2946ec1e
--- /dev/null
+++ b/server/src/routes/user/chat.ts
@@ -0,0 +1,66 @@
+import Joi from 'joi';
+import { Handler } from 'express';
+import { assertRequestBody, Resolve } from '../../utils/express';
+import { authProtected } from '../../middlewares/auth-protected';
+import { MessageModel } from '../../models/message';
+import { ConversationModel } from '../../models/conversation';
+
+interface PostBody {
+	receiverId: string;
+	content: string;
+}
+
+export const post: Handler[] = [
+    authProtected,
+    async (req, res) => {
+        const user = req.user!;
+        const io = req.app.get('socketio');
+
+        const postSchema = Joi.object<PostBody>({
+			receiverId: Joi.string().trim().required(),
+			content: Joi.string().trim().required(),
+		});
+
+        const bodyValidationResult = postSchema.validate(req.body);
+        if (bodyValidationResult.error) return res.status(400).json({ error: bodyValidationResult.error.message });
+
+        const value = bodyValidationResult.value;
+
+        const converationID = await ConversationModel.findOne({
+            $or: [
+                {senderId: user._id, receiverId: value.receiverId},
+                {receiverId: user._id, senderId: value.receiverId},
+            ]
+        })
+
+        if (converationID == null){
+            const conversation = new ConversationModel({
+                senderId: user._id,
+                receiverId: value.receiverId
+            });
+
+            const convo = await conversation.save();
+            
+            const message = new MessageModel({
+                conversationId: convo._id,
+                senderId: user._id,
+                content: value.content
+            });
+
+            const data = await message.save();
+            io.emit('receiveMessage', data);
+            return Resolve(res).ok('Message saved successfully.');
+        }
+
+        const message = new MessageModel({
+			conversationId: converationID._id,
+            senderId: user._id,
+            content: value.content
+		});
+        
+        const data = await message.save();
+        
+        io.emit('receiveMessage', data);
+        return Resolve(res).okWith(data, 'Message saved successfully.');
+    }
+];
\ No newline at end of file
diff --git a/server/src/routes/user/deleteaccount/delete.ts b/server/src/routes/user/deleteaccount/delete.ts
index 22180986..800f8afe 100644
--- a/server/src/routes/user/deleteaccount/delete.ts
+++ b/server/src/routes/user/deleteaccount/delete.ts
@@ -1,22 +1,70 @@
 import mongoose from 'mongoose';
 import { Handler } from 'express';
-import { requireLogin } from '../../../middlewares/require-login';
+import { authProtected } from '../../../middlewares/auth-protected';
 import { Resolve } from '../../../utils/express';
 import { UserModel } from '../../../models/user';
+import Joi from 'joi';
+import { DeletedUserModel } from '../../../models/deletedUser';
+
+interface deleteBody {
+	confirmationInput: string;
+}
+
+const message = 'I-WANT-TO-DELETE-THIS-ACCOUNT';
 
 export const post: Handler[] = [
-    requireLogin,
-    async (req, res) => {
+	authProtected,
+	async (req, res) => {
+		const userID = req.user!.id;
+		const User = mongoose.model('User', UserModel.schema);
+
+		const deleteSchema = Joi.object<deleteBody>({
+			confirmationInput: Joi.string().uppercase().trim().required().equal(message).messages({
+				'string.base': 'The phrase must not contain any numbers or special characters.',
+				'string.lowercase': 'The phrase must be typed in uppcase',
+				'any.required': 'The identical phrase is required to delete this account.',
+				'any.only': 'The phrase entered does not match.',
+			}),
+		});
+
+		const validationResult = deleteSchema.validate(req.body, { convert: false });
+		if (validationResult.error) return Resolve(res).badRequest(validationResult.error.message);
+
+		const userRef = await User.findById(userID);
+		if (!userRef) return Resolve(res).notFound('User could not be found.');
+
+		const userCopy = userRef;
 
-        console.log(req.user);
-        
-        const userID = req.user?.id;
-        const User = mongoose.model('User', UserModel.schema);
+		await userRef.updateOne({
+			email: null,
+			sso: null,
+			userName: 'deletedUser',
+			password: null,
+			location: null,
+			bio: null,
+			birthDate: null,
+			avatarUrl: null,
+		});
 
-        const user = await UserModel.findById(userID);
-        if (!user) return res.status(404).json({ error: 'No user found by the given ID.' });
+		const deletedUser = new DeletedUserModel({
+			originID: userCopy._id,
+			email: userCopy.email,
+			sso: userCopy.sso,
+			password: userCopy.password,
+			userName: userCopy.userName,
+			bio: userCopy.bio,
+			location: userCopy.location,
+			birthDate: userCopy.birthDate,
+			avatarUrl: userCopy.avatarUrl,
+			followerCount: userCopy.followerCount,
+			followingCount: userCopy.followingCount,
+			postCount: userCopy.postCount,
+			savedPosts: userCopy.savedPosts,
+			admin: userCopy.admin,
+			createdAt: Date.now()
+		});
+		await deletedUser.save();
 
-        const result = await User.findByIdAndDelete(userID);
-        Resolve(res).okWith("Account Deleted!");
-    }
-];
\ No newline at end of file
+		Resolve(res).okWith(userCopy, 'Account deleted successfully.');
+	},
+];
diff --git a/server/src/routes/user/forgetpassword.ts b/server/src/routes/user/forgetpassword.ts
index cf0a1778..c3d2949e 100644
--- a/server/src/routes/user/forgetpassword.ts
+++ b/server/src/routes/user/forgetpassword.ts
@@ -4,7 +4,7 @@ import { UserModel } from '../../models/user';
 import { TokenModel } from '../../models/token';
 import { Resolve } from '../../utils/express';
 import crypto from 'crypto';
-import {sendEmail} from '../../utils/email';
+import { sendEmail } from '../../utils/email';
 
 interface PostBody {
 	email: string;
@@ -20,12 +20,15 @@ export const post: Handler = async (req, res) => {
 	});
 
 	const bodyValidationResult = bodySchema.validate(req.body);
-	if (bodyValidationResult.error) return res.status(400).json({ error: bodyValidationResult.error.message });
-    
-    const { value: body } = bodyValidationResult;
+	if (bodyValidationResult.error) return Resolve(res).badRequest(bodyValidationResult.error.message);
+
+	const { value: body } = bodyValidationResult;
 
 	const existingUser = await UserModel.findOne({ email: body.email });
-	if (!existingUser) return Resolve(res).created(post, 'Sorry, no user with that email exists.');
+	if (!existingUser) return Resolve(res).badRequest('Sorry, no user with that email exists.');
+
+	const submittedEmail = existingUser.email;
+	if (!submittedEmail) return Resolve(res).badRequest('Sorry, no user with that email exists.');
 
 	const resetToken = crypto.randomBytes(32).toString('hex');
 	const passwordResetToken = crypto.createHash('sha256').update(resetToken).digest('hex');
@@ -33,7 +36,7 @@ export const post: Handler = async (req, res) => {
 
 	const token = new TokenModel({
 		userId: existingUser._id,
-		email: body.email,
+		email: submittedEmail,
 		passwordResetToken,
 		passwordResetExpires: new Date(passwordResetExpires),
 	});
@@ -47,15 +50,15 @@ export const post: Handler = async (req, res) => {
 
 	try {
 		await sendEmail({
-			email: existingUser.email,
+			email: submittedEmail,
 			subject: 'Password Reset Request',
-			text: message
+			text: message,
 		});
-		Resolve(res).created(post, 'Password rest link has been sent your email.');
+
+		return Resolve(res).badRequest('Password rest link has been sent your email.');
 	} catch (error) {
-		token.deleteOne();
+		await token.deleteOne();
 		console.log(error);
-		return res.status(500).json({ error: 'There was an error sending the email. Try again later.' });
+		return Resolve(res).error('There was an error sending the email. Try again later.');
 	}
-
-};
\ No newline at end of file
+};
diff --git a/server/src/routes/user/getchats.ts b/server/src/routes/user/getchats.ts
new file mode 100644
index 00000000..15f04e09
--- /dev/null
+++ b/server/src/routes/user/getchats.ts
@@ -0,0 +1,33 @@
+import Joi from 'joi';
+import { Handler } from 'express';
+import { authProtected } from '../../middlewares/auth-protected';
+import { MessageModel } from '../../models/message';
+import { ConversationModel } from '../../models/conversation';
+
+interface PostBody {
+	receiverId: string;
+	content: string;
+}
+
+export const post: Handler[] = [
+    authProtected,
+    async (req, res) => {
+        const user = req.user!;
+
+        const converationID = await ConversationModel.findOne({
+            $or: [
+                {senderId: user._id, receiverId: req.body.receiverId},
+                {receiverId: user._id, senderId: req.body.receiverId},
+            ]
+        })
+
+        if (converationID == null){
+            res.json({success: false})
+            return
+        }
+        
+        const message = await MessageModel.find({conversationId: converationID._id});
+        
+        res.json({success: true, message})
+    }
+];
\ No newline at end of file
diff --git a/server/src/routes/user/index.ts b/server/src/routes/user/index.ts
index a94f330e..01764ccd 100644
--- a/server/src/routes/user/index.ts
+++ b/server/src/routes/user/index.ts
@@ -1,9 +1,9 @@
 import { Handler } from 'express';
-import { requireLogin } from '../../middlewares/require-login';
+import { authProtected } from '../../middlewares/auth-protected';
 import { Resolve } from '../../utils/express';
 
 export const get: Handler[] = [
-	requireLogin,
+	authProtected,
 	(req, res) =>
 		req.user ? Resolve(res).okWith(req.user) : Resolve(res).unauthorized('Failed to authorize a correct user.'),
 ];
diff --git a/server/src/routes/user/login.ts b/server/src/routes/user/login.ts
index c8db9eb9..231731b1 100644
--- a/server/src/routes/user/login.ts
+++ b/server/src/routes/user/login.ts
@@ -3,15 +3,24 @@ import { Handler } from 'express';
 import { UserModel } from '../../models/user';
 import { compareToHashed } from '../../utils/bcrypt';
 import { assertRequestBody, Resolve } from '../../utils/express';
-import { AuthToken } from '../../utils/auth-token';
-import { requireLogin } from '../../middlewares/require-login';
+import { authProtected } from '../../middlewares/auth-protected';
+import { JWT } from '../../utils/jwt';
 
 interface PostBody {
 	email: string;
 	password: string;
 }
 
-export const get: Handler[] = [requireLogin, async (_, res) => Resolve(res).ok()];
+export const get: Handler[] = [
+	authProtected,
+	async (req, res) => {
+		if (!req.user) return Resolve(res).forbidden('Invalid credentials provided.');
+
+		const refreshToken = req.query.token === 'refresh';
+		if (refreshToken) Resolve(res).okWith(JWT.signAs(req.user));
+		else Resolve(res).ok();
+	},
+];
 
 export const post: Handler = async (req, res) => {
 	const body = assertRequestBody(
@@ -26,10 +35,13 @@ export const post: Handler = async (req, res) => {
 	if (!body) return;
 
 	const existingUser = await UserModel.findOne({ email: body.email });
-	if (!existingUser) return Resolve(res).notFound('No user with that email exists.');
+	if (!existingUser) return Resolve(res).forbidden('Invalid credentials provided.');
+
+	const userPassword = existingUser.password;
+	if (!userPassword) return Resolve(res).forbidden('Invalid credentials provided.');
 
-	const passwordsMatch = await compareToHashed(body.password, existingUser.password);
-	if (!passwordsMatch) return Resolve(res).unauthorized('Password is incorrect.');
+	const passwordsMatch = await compareToHashed(body.password, userPassword);
+	if (!passwordsMatch) return Resolve(res).forbidden('Invalid credentials provided.');
 
-	Resolve(res).okWith(AuthToken.signAs(existingUser));
+	Resolve(res).okWith(JWT.signAs(existingUser));
 };
diff --git a/server/src/routes/user/oauth/google.ts b/server/src/routes/user/oauth/google.ts
new file mode 100644
index 00000000..617c5e13
--- /dev/null
+++ b/server/src/routes/user/oauth/google.ts
@@ -0,0 +1,15 @@
+import { Handler } from 'express';
+import { Resolve } from '../../../utils/express';
+import { GoogleOAuthAdapter } from '../../../lib/auth/adapters/google-oauth';
+
+export const post: Handler = async (_, res) => {
+	const { authClient } = GoogleOAuthAdapter.generateClients();
+
+	Resolve(res).okWith(
+		authClient.generateAuthUrl({
+			access_type: 'offline',
+			scope: 'https://www.googleapis.com/auth/userinfo.profile openid',
+			prompt: 'consent',
+		}),
+	);
+};
diff --git a/server/src/routes/user/signup.ts b/server/src/routes/user/signup.ts
index b1879f12..678a3df1 100644
--- a/server/src/routes/user/signup.ts
+++ b/server/src/routes/user/signup.ts
@@ -7,7 +7,7 @@ import { PlanetModel } from '../../models/planet';
 import { assertRequestBody, Resolve } from '../../utils/express';
 import { ILocation, RawLocationSchema } from '../../models/location';
 import { RawDocument } from '../../@types/model';
-import { AuthToken } from '../../utils/auth-token';
+import { JWT } from '../../utils/jwt';
 
 interface PostBody {
 	email: string;
@@ -53,7 +53,7 @@ export const post: Handler = async (req, res) => {
 		});
 
 		await user.save();
-		Resolve(res).okWith(AuthToken.signAs(user));
+		Resolve(res).okWith(JWT.signAs(user));
 	} finally {
 		inflightEmails.delete(body.email);
 	}
diff --git a/server/src/utils/auth-token.ts b/server/src/utils/auth-token.ts
deleted file mode 100644
index 88a0be75..00000000
--- a/server/src/utils/auth-token.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import jwt from 'jsonwebtoken';
-import mongoose, { HydratedDocument } from 'mongoose';
-import { IUser, UserModel } from '../models/user';
-
-/**
- * The interface describing the payload
- * type of the JWT token.
- */
-interface JWTPayload {
-	userId: string;
-}
-
-/**
- * Utilities related to signing and verifying JWT payloads.
- */
-export namespace AuthToken {
-	/**
-	 * Verifies the given token with the JWT secret, and
-	 * resolves it into a hydrated user model.
-	 *
-	 * @param token the token to verify
-	 * @returns the resolved user, or nothing if the token was invalid or contained an invalid payload
-	 */
-	export async function verifyToUser(token: string) {
-		try {
-			const payload = jwt.verify(token, process.env.JWT_SECRET!) as JWTPayload;
-			if (!payload || !('userId' in payload)) return;
-
-			const userId = payload.userId;
-			if (!mongoose.isValidObjectId(userId)) return;
-
-			return await UserModel.findById(userId);
-		} catch {}
-	}
-
-	/**
-	 * Signs a new token with the JWT secret and expiry time.
-	 *
-	 * @param user the user to sign the token with
-	 * @returns the signed token
-	 */
-	export function signAs(user: HydratedDocument<IUser>) {
-		return jwt.sign({ userId: user._id.toString() } satisfies JWTPayload, process.env.JWT_SECRET!, {
-			expiresIn: parseInt(process.env.JWT_TTL!),
-		});
-	}
-}
diff --git a/server/src/utils/jwt.ts b/server/src/utils/jwt.ts
new file mode 100644
index 00000000..c30e450a
--- /dev/null
+++ b/server/src/utils/jwt.ts
@@ -0,0 +1,47 @@
+import jwt from 'jsonwebtoken';
+import { HydratedDocument } from 'mongoose';
+import { IUser } from '../models/user';
+
+/**
+ * The interface describing the payload
+ * type of the JWT token.
+ */
+export interface JWTPayload {
+	userId: string;
+}
+
+/**
+ * Utilities related to signing and verifying JWT payloads.
+ */
+export namespace JWT {
+	const secret = process.env.JWT_SECRET;
+	if (typeof secret !== 'string') throw 'JWT_SECREt is not present in environment variables!';
+
+	const ttlString = process.env.JWT_TTL;
+	if (typeof ttlString !== 'string') throw 'JWT_TTL is not present in environment variables.';
+
+	const ttl = parseInt(ttlString);
+	if (isNaN(ttl)) throw 'The JWT_TTL environment variable is not a number!';
+
+	/**
+	 * The secret used to verify and sign JWT tokens.
+	 */
+	export const SECRET = secret;
+
+	/**
+	 * The time, in minutes, that JWT tokens expire in.
+	 */
+	export const TTL_MINS = ttl;
+
+	/**
+	 * Signs a new token with the JWT secret and expiry time.
+	 *
+	 * @param user the user to sign the token with
+	 * @returns the signed token
+	 */
+	export function signAs(user: HydratedDocument<IUser>) {
+		return jwt.sign({ userId: user._id.toString() } satisfies JWTPayload, secret!, {
+			expiresIn: parseInt(ttlString!),
+		});
+	}
+}