From a3d638ed51e46c8491364eeda3238a1925be8af7 Mon Sep 17 00:00:00 2001
From: Falak Zahra <falak.zahra16@gmail.com>
Date: Fri, 27 Sep 2024 21:34:27 -0600
Subject: [PATCH 1/8] Install sass npm package and rename all css files to scss

---
 package-lock.json                             | 629 ++++++++++++++----
 package.json                                  |   1 +
 ...tedNavBar.css => AuthenticatedNavBar.scss} |   0
 src/components/AuthenticatedNavBar.tsx        |   2 +-
 .../{ListItem.css => ListItem.scss}           |   0
 src/components/ListItem.tsx                   |   2 +-
 .../{SingleList.css => SingleList.scss}       |   0
 src/components/SingleList.tsx                 |   7 +-
 src/{index.css => index.scss}                 |   0
 src/index.tsx                                 |   3 +-
 src/views/{Home.css => Home.scss}             |   0
 src/views/Home.tsx                            |   2 +-
 src/views/{Layout.css => Layout.scss}         |   0
 src/views/Layout.tsx                          |   2 +-
 14 files changed, 525 insertions(+), 123 deletions(-)
 rename src/components/{AuthenticatedNavBar.css => AuthenticatedNavBar.scss} (100%)
 rename src/components/{ListItem.css => ListItem.scss} (100%)
 rename src/components/{SingleList.css => SingleList.scss} (100%)
 rename src/{index.css => index.scss} (100%)
 rename src/views/{Home.css => Home.scss} (100%)
 rename src/views/{Layout.css => Layout.scss} (100%)

diff --git a/package-lock.json b/package-lock.json
index e380781..732ce16 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -33,6 +33,7 @@
 				"jsdom": "^24.1.1",
 				"lint-staged": "^15.2.9",
 				"prettier": "^3.3.3",
+				"sass-embedded": "^1.79.3",
 				"typescript-eslint": "^8.2.0",
 				"vite": "^5.3.5",
 				"vite-plugin-pwa": "^0.20.1",
@@ -1980,6 +1981,12 @@
 				"node": ">=6.9.0"
 			}
 		},
+		"node_modules/@bufbuild/protobuf": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/@bufbuild/protobuf/-/protobuf-2.1.0.tgz",
+			"integrity": "sha512-+2Mx67Y3skJ4NCD/qNSdBJNWtu6x6Qr53jeNg+QcwiL6mt0wK+3jwHH2x1p7xaYH6Ve2JKOVn0OxU35WsmqI9A==",
+			"dev": true
+		},
 		"node_modules/@esbuild/aix-ppc64": {
 			"version": "0.21.5",
 			"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
@@ -3321,224 +3328,208 @@
 			}
 		},
 		"node_modules/@rollup/rollup-android-arm-eabi": {
-			"version": "4.18.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.18.0.tgz",
-			"integrity": "sha512-Tya6xypR10giZV1XzxmH5wr25VcZSncG0pZIjfePT0OVBvqNEurzValetGNarVrGiq66EBVAFn15iYX4w6FKgQ==",
+			"version": "4.22.5",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.22.5.tgz",
+			"integrity": "sha512-SU5cvamg0Eyu/F+kLeMXS7GoahL+OoizlclVFX3l5Ql6yNlywJJ0OuqTzUx0v+aHhPHEB/56CT06GQrRrGNYww==",
 			"cpu": [
 				"arm"
 			],
 			"dev": true,
-			"license": "MIT",
 			"optional": true,
 			"os": [
 				"android"
 			]
 		},
 		"node_modules/@rollup/rollup-android-arm64": {
-			"version": "4.18.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.18.0.tgz",
-			"integrity": "sha512-avCea0RAP03lTsDhEyfy+hpfr85KfyTctMADqHVhLAF3MlIkq83CP8UfAHUssgXTYd+6er6PaAhx/QGv4L1EiA==",
+			"version": "4.22.5",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.22.5.tgz",
+			"integrity": "sha512-S4pit5BP6E5R5C8S6tgU/drvgjtYW76FBuG6+ibG3tMvlD1h9LHVF9KmlmaUBQ8Obou7hEyS+0w+IR/VtxwNMQ==",
 			"cpu": [
 				"arm64"
 			],
 			"dev": true,
-			"license": "MIT",
 			"optional": true,
 			"os": [
 				"android"
 			]
 		},
 		"node_modules/@rollup/rollup-darwin-arm64": {
-			"version": "4.18.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.18.0.tgz",
-			"integrity": "sha512-IWfdwU7KDSm07Ty0PuA/W2JYoZ4iTj3TUQjkVsO/6U+4I1jN5lcR71ZEvRh52sDOERdnNhhHU57UITXz5jC1/w==",
+			"version": "4.22.5",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.22.5.tgz",
+			"integrity": "sha512-250ZGg4ipTL0TGvLlfACkIxS9+KLtIbn7BCZjsZj88zSg2Lvu3Xdw6dhAhfe/FjjXPVNCtcSp+WZjVsD3a/Zlw==",
 			"cpu": [
 				"arm64"
 			],
 			"dev": true,
-			"license": "MIT",
 			"optional": true,
 			"os": [
 				"darwin"
 			]
 		},
 		"node_modules/@rollup/rollup-darwin-x64": {
-			"version": "4.18.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.18.0.tgz",
-			"integrity": "sha512-n2LMsUz7Ynu7DoQrSQkBf8iNrjOGyPLrdSg802vk6XT3FtsgX6JbE8IHRvposskFm9SNxzkLYGSq9QdpLYpRNA==",
+			"version": "4.22.5",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.22.5.tgz",
+			"integrity": "sha512-D8brJEFg5D+QxFcW6jYANu+Rr9SlKtTenmsX5hOSzNYVrK5oLAEMTUgKWYJP+wdKyCdeSwnapLsn+OVRFycuQg==",
 			"cpu": [
 				"x64"
 			],
 			"dev": true,
-			"license": "MIT",
 			"optional": true,
 			"os": [
 				"darwin"
 			]
 		},
 		"node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-			"version": "4.18.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.18.0.tgz",
-			"integrity": "sha512-C/zbRYRXFjWvz9Z4haRxcTdnkPt1BtCkz+7RtBSuNmKzMzp3ZxdM28Mpccn6pt28/UWUCTXa+b0Mx1k3g6NOMA==",
+			"version": "4.22.5",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.22.5.tgz",
+			"integrity": "sha512-PNqXYmdNFyWNg0ma5LdY8wP+eQfdvyaBAojAXgO7/gs0Q/6TQJVXAXe8gwW9URjbS0YAammur0fynYGiWsKlXw==",
 			"cpu": [
 				"arm"
 			],
 			"dev": true,
-			"license": "MIT",
 			"optional": true,
 			"os": [
 				"linux"
 			]
 		},
 		"node_modules/@rollup/rollup-linux-arm-musleabihf": {
-			"version": "4.18.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.18.0.tgz",
-			"integrity": "sha512-l3m9ewPgjQSXrUMHg93vt0hYCGnrMOcUpTz6FLtbwljo2HluS4zTXFy2571YQbisTnfTKPZ01u/ukJdQTLGh9A==",
+			"version": "4.22.5",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.22.5.tgz",
+			"integrity": "sha512-kSSCZOKz3HqlrEuwKd9TYv7vxPYD77vHSUvM2y0YaTGnFc8AdI5TTQRrM1yIp3tXCKrSL9A7JLoILjtad5t8pQ==",
 			"cpu": [
 				"arm"
 			],
 			"dev": true,
-			"license": "MIT",
 			"optional": true,
 			"os": [
 				"linux"
 			]
 		},
 		"node_modules/@rollup/rollup-linux-arm64-gnu": {
-			"version": "4.18.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.18.0.tgz",
-			"integrity": "sha512-rJ5D47d8WD7J+7STKdCUAgmQk49xuFrRi9pZkWoRD1UeSMakbcepWXPF8ycChBoAqs1pb2wzvbY6Q33WmN2ftw==",
+			"version": "4.22.5",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.22.5.tgz",
+			"integrity": "sha512-oTXQeJHRbOnwRnRffb6bmqmUugz0glXaPyspp4gbQOPVApdpRrY/j7KP3lr7M8kTfQTyrBUzFjj5EuHAhqH4/w==",
 			"cpu": [
 				"arm64"
 			],
 			"dev": true,
-			"license": "MIT",
 			"optional": true,
 			"os": [
 				"linux"
 			]
 		},
 		"node_modules/@rollup/rollup-linux-arm64-musl": {
-			"version": "4.18.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.18.0.tgz",
-			"integrity": "sha512-be6Yx37b24ZwxQ+wOQXXLZqpq4jTckJhtGlWGZs68TgdKXJgw54lUUoFYrg6Zs/kjzAQwEwYbp8JxZVzZLRepQ==",
+			"version": "4.22.5",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.22.5.tgz",
+			"integrity": "sha512-qnOTIIs6tIGFKCHdhYitgC2XQ2X25InIbZFor5wh+mALH84qnFHvc+vmWUpyX97B0hNvwNUL4B+MB8vJvH65Fw==",
 			"cpu": [
 				"arm64"
 			],
 			"dev": true,
-			"license": "MIT",
 			"optional": true,
 			"os": [
 				"linux"
 			]
 		},
 		"node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
-			"version": "4.18.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.18.0.tgz",
-			"integrity": "sha512-hNVMQK+qrA9Todu9+wqrXOHxFiD5YmdEi3paj6vP02Kx1hjd2LLYR2eaN7DsEshg09+9uzWi2W18MJDlG0cxJA==",
+			"version": "4.22.5",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.22.5.tgz",
+			"integrity": "sha512-TMYu+DUdNlgBXING13rHSfUc3Ky5nLPbWs4bFnT+R6Vu3OvXkTkixvvBKk8uO4MT5Ab6lC3U7x8S8El2q5o56w==",
 			"cpu": [
 				"ppc64"
 			],
 			"dev": true,
-			"license": "MIT",
 			"optional": true,
 			"os": [
 				"linux"
 			]
 		},
 		"node_modules/@rollup/rollup-linux-riscv64-gnu": {
-			"version": "4.18.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.18.0.tgz",
-			"integrity": "sha512-ROCM7i+m1NfdrsmvwSzoxp9HFtmKGHEqu5NNDiZWQtXLA8S5HBCkVvKAxJ8U+CVctHwV2Gb5VUaK7UAkzhDjlg==",
+			"version": "4.22.5",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.22.5.tgz",
+			"integrity": "sha512-PTQq1Kz22ZRvuhr3uURH+U/Q/a0pbxJoICGSprNLAoBEkyD3Sh9qP5I0Asn0y0wejXQBbsVMRZRxlbGFD9OK4A==",
 			"cpu": [
 				"riscv64"
 			],
 			"dev": true,
-			"license": "MIT",
 			"optional": true,
 			"os": [
 				"linux"
 			]
 		},
 		"node_modules/@rollup/rollup-linux-s390x-gnu": {
-			"version": "4.18.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.18.0.tgz",
-			"integrity": "sha512-0UyyRHyDN42QL+NbqevXIIUnKA47A+45WyasO+y2bGJ1mhQrfrtXUpTxCOrfxCR4esV3/RLYyucGVPiUsO8xjg==",
+			"version": "4.22.5",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.22.5.tgz",
+			"integrity": "sha512-bR5nCojtpuMss6TDEmf/jnBnzlo+6n1UhgwqUvRoe4VIotC7FG1IKkyJbwsT7JDsF2jxR+NTnuOwiGv0hLyDoQ==",
 			"cpu": [
 				"s390x"
 			],
 			"dev": true,
-			"license": "MIT",
 			"optional": true,
 			"os": [
 				"linux"
 			]
 		},
 		"node_modules/@rollup/rollup-linux-x64-gnu": {
-			"version": "4.18.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.18.0.tgz",
-			"integrity": "sha512-xuglR2rBVHA5UsI8h8UbX4VJ470PtGCf5Vpswh7p2ukaqBGFTnsfzxUBetoWBWymHMxbIG0Cmx7Y9qDZzr648w==",
+			"version": "4.22.5",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.22.5.tgz",
+			"integrity": "sha512-N0jPPhHjGShcB9/XXZQWuWBKZQnC1F36Ce3sDqWpujsGjDz/CQtOL9LgTrJ+rJC8MJeesMWrMWVLKKNR/tMOCA==",
 			"cpu": [
 				"x64"
 			],
 			"dev": true,
-			"license": "MIT",
 			"optional": true,
 			"os": [
 				"linux"
 			]
 		},
 		"node_modules/@rollup/rollup-linux-x64-musl": {
-			"version": "4.18.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.18.0.tgz",
-			"integrity": "sha512-LKaqQL9osY/ir2geuLVvRRs+utWUNilzdE90TpyoX0eNqPzWjRm14oMEE+YLve4k/NAqCdPkGYDaDF5Sw+xBfg==",
+			"version": "4.22.5",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.22.5.tgz",
+			"integrity": "sha512-uBa2e28ohzNNwjr6Uxm4XyaA1M/8aTgfF2T7UIlElLaeXkgpmIJ2EitVNQxjO9xLLLy60YqAgKn/AqSpCUkE9g==",
 			"cpu": [
 				"x64"
 			],
 			"dev": true,
-			"license": "MIT",
 			"optional": true,
 			"os": [
 				"linux"
 			]
 		},
 		"node_modules/@rollup/rollup-win32-arm64-msvc": {
-			"version": "4.18.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.18.0.tgz",
-			"integrity": "sha512-7J6TkZQFGo9qBKH0pk2cEVSRhJbL6MtfWxth7Y5YmZs57Pi+4x6c2dStAUvaQkHQLnEQv1jzBUW43GvZW8OFqA==",
+			"version": "4.22.5",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.22.5.tgz",
+			"integrity": "sha512-RXT8S1HP8AFN/Kr3tg4fuYrNxZ/pZf1HemC5Tsddc6HzgGnJm0+Lh5rAHJkDuW3StI0ynNXukidROMXYl6ew8w==",
 			"cpu": [
 				"arm64"
 			],
 			"dev": true,
-			"license": "MIT",
 			"optional": true,
 			"os": [
 				"win32"
 			]
 		},
 		"node_modules/@rollup/rollup-win32-ia32-msvc": {
-			"version": "4.18.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.18.0.tgz",
-			"integrity": "sha512-Txjh+IxBPbkUB9+SXZMpv+b/vnTEtFyfWZgJ6iyCmt2tdx0OF5WhFowLmnh8ENGNpfUlUZkdI//4IEmhwPieNg==",
+			"version": "4.22.5",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.22.5.tgz",
+			"integrity": "sha512-ElTYOh50InL8kzyUD6XsnPit7jYCKrphmddKAe1/Ytt74apOxDq5YEcbsiKs0fR3vff3jEneMM+3I7jbqaMyBg==",
 			"cpu": [
 				"ia32"
 			],
 			"dev": true,
-			"license": "MIT",
 			"optional": true,
 			"os": [
 				"win32"
 			]
 		},
 		"node_modules/@rollup/rollup-win32-x64-msvc": {
-			"version": "4.18.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.18.0.tgz",
-			"integrity": "sha512-UOo5FdvOL0+eIVTgS4tIdbW+TtnBLWg1YBCcU2KWM7nuNwRz9bksDX1bekJJCpu25N1DVWaCwnT39dVQxzqS8g==",
+			"version": "4.22.5",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.22.5.tgz",
+			"integrity": "sha512-+lvL/4mQxSV8MukpkKyyvfwhH266COcWlXE/1qxwN08ajovta3459zrjLghYMgDerlzNwLAcFpvU+WWE5y6nAQ==",
 			"cpu": [
 				"x64"
 			],
 			"dev": true,
-			"license": "MIT",
 			"optional": true,
 			"os": [
 				"win32"
@@ -3976,11 +3967,10 @@
 			}
 		},
 		"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,
-			"license": "MIT"
+			"version": "1.0.6",
+			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
+			"integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
+			"dev": true
 		},
 		"node_modules/@types/json-schema": {
 			"version": "7.0.15",
@@ -4823,6 +4813,12 @@
 				"node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
 			}
 		},
+		"node_modules/buffer-builder": {
+			"version": "0.2.0",
+			"resolved": "https://registry.npmjs.org/buffer-builder/-/buffer-builder-0.2.0.tgz",
+			"integrity": "sha512-7VPMEPuYznPSoR21NE1zvd2Xna6c/CloiZCfcMXR1Jny6PjX0N4Nsa38zcBFo/FMK+BlA+FLKbJCQ0i2yxp+Xg==",
+			"dev": true
+		},
 		"node_modules/buffer-from": {
 			"version": "1.1.2",
 			"resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
@@ -5068,6 +5064,12 @@
 			"integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
 			"dev": true
 		},
+		"node_modules/colorjs.io": {
+			"version": "0.5.2",
+			"resolved": "https://registry.npmjs.org/colorjs.io/-/colorjs.io-0.5.2.tgz",
+			"integrity": "sha512-twmVoizEW7ylZSN32OgKdXRmo1qg+wT5/6C3xu5b9QsWzSFAhHLn2xd8ro0diCsKfCj1RdaTP/nrcW+vAoQPIw==",
+			"dev": true
+		},
 		"node_modules/combined-stream": {
 			"version": "1.0.8",
 			"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -6840,6 +6842,12 @@
 				"node": ">= 4"
 			}
 		},
+		"node_modules/immutable": {
+			"version": "4.3.7",
+			"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.7.tgz",
+			"integrity": "sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==",
+			"dev": true
+		},
 		"node_modules/import-fresh": {
 			"version": "3.3.0",
 			"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -8075,7 +8083,6 @@
 					"url": "https://github.com/sponsors/ai"
 				}
 			],
-			"license": "MIT",
 			"bin": {
 				"nanoid": "bin/nanoid.cjs"
 			},
@@ -8448,11 +8455,10 @@
 			}
 		},
 		"node_modules/picocolors": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
-			"integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==",
-			"dev": true,
-			"license": "ISC"
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz",
+			"integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==",
+			"dev": true
 		},
 		"node_modules/picomatch": {
 			"version": "4.0.2",
@@ -8490,9 +8496,9 @@
 			}
 		},
 		"node_modules/postcss": {
-			"version": "8.4.39",
-			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.39.tgz",
-			"integrity": "sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==",
+			"version": "8.4.47",
+			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz",
+			"integrity": "sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==",
 			"dev": true,
 			"funding": [
 				{
@@ -8508,11 +8514,10 @@
 					"url": "https://github.com/sponsors/ai"
 				}
 			],
-			"license": "MIT",
 			"dependencies": {
 				"nanoid": "^3.3.7",
-				"picocolors": "^1.0.1",
-				"source-map-js": "^1.2.0"
+				"picocolors": "^1.1.0",
+				"source-map-js": "^1.2.1"
 			},
 			"engines": {
 				"node": "^10 || ^12 || >=14"
@@ -9020,13 +9025,12 @@
 			}
 		},
 		"node_modules/rollup": {
-			"version": "4.18.0",
-			"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.18.0.tgz",
-			"integrity": "sha512-QmJz14PX3rzbJCN1SG4Xe/bAAX2a6NpCP8ab2vfu2GiUr8AQcr2nCV/oEO3yneFarB67zk8ShlIyWb2LGTb3Sg==",
+			"version": "4.22.5",
+			"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.22.5.tgz",
+			"integrity": "sha512-WoinX7GeQOFMGznEcWA1WrTQCd/tpEbMkc3nuMs9BT0CPjMdSjPMTVClwWd4pgSQwJdP65SK9mTCNvItlr5o7w==",
 			"dev": true,
-			"license": "MIT",
 			"dependencies": {
-				"@types/estree": "1.0.5"
+				"@types/estree": "1.0.6"
 			},
 			"bin": {
 				"rollup": "dist/bin/rollup"
@@ -9036,22 +9040,22 @@
 				"npm": ">=8.0.0"
 			},
 			"optionalDependencies": {
-				"@rollup/rollup-android-arm-eabi": "4.18.0",
-				"@rollup/rollup-android-arm64": "4.18.0",
-				"@rollup/rollup-darwin-arm64": "4.18.0",
-				"@rollup/rollup-darwin-x64": "4.18.0",
-				"@rollup/rollup-linux-arm-gnueabihf": "4.18.0",
-				"@rollup/rollup-linux-arm-musleabihf": "4.18.0",
-				"@rollup/rollup-linux-arm64-gnu": "4.18.0",
-				"@rollup/rollup-linux-arm64-musl": "4.18.0",
-				"@rollup/rollup-linux-powerpc64le-gnu": "4.18.0",
-				"@rollup/rollup-linux-riscv64-gnu": "4.18.0",
-				"@rollup/rollup-linux-s390x-gnu": "4.18.0",
-				"@rollup/rollup-linux-x64-gnu": "4.18.0",
-				"@rollup/rollup-linux-x64-musl": "4.18.0",
-				"@rollup/rollup-win32-arm64-msvc": "4.18.0",
-				"@rollup/rollup-win32-ia32-msvc": "4.18.0",
-				"@rollup/rollup-win32-x64-msvc": "4.18.0",
+				"@rollup/rollup-android-arm-eabi": "4.22.5",
+				"@rollup/rollup-android-arm64": "4.22.5",
+				"@rollup/rollup-darwin-arm64": "4.22.5",
+				"@rollup/rollup-darwin-x64": "4.22.5",
+				"@rollup/rollup-linux-arm-gnueabihf": "4.22.5",
+				"@rollup/rollup-linux-arm-musleabihf": "4.22.5",
+				"@rollup/rollup-linux-arm64-gnu": "4.22.5",
+				"@rollup/rollup-linux-arm64-musl": "4.22.5",
+				"@rollup/rollup-linux-powerpc64le-gnu": "4.22.5",
+				"@rollup/rollup-linux-riscv64-gnu": "4.22.5",
+				"@rollup/rollup-linux-s390x-gnu": "4.22.5",
+				"@rollup/rollup-linux-x64-gnu": "4.22.5",
+				"@rollup/rollup-linux-x64-musl": "4.22.5",
+				"@rollup/rollup-win32-arm64-msvc": "4.22.5",
+				"@rollup/rollup-win32-ia32-msvc": "4.22.5",
+				"@rollup/rollup-win32-x64-msvc": "4.22.5",
 				"fsevents": "~2.3.2"
 			}
 		},
@@ -9086,6 +9090,15 @@
 				"queue-microtask": "^1.2.2"
 			}
 		},
+		"node_modules/rxjs": {
+			"version": "7.8.1",
+			"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
+			"integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
+			"dev": true,
+			"dependencies": {
+				"tslib": "^2.1.0"
+			}
+		},
 		"node_modules/safe-array-concat": {
 			"version": "1.1.2",
 			"resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.2.tgz",
@@ -9150,6 +9163,384 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/sass-embedded": {
+			"version": "1.79.3",
+			"resolved": "https://registry.npmjs.org/sass-embedded/-/sass-embedded-1.79.3.tgz",
+			"integrity": "sha512-zUve2qCn6uSOMZnZazLzrDWq//OQWFle5G45vJjv3B/ADIA3TXVgqHqN3u7D2vGajOGREz0HN5nhliSoKmQqZA==",
+			"dev": true,
+			"dependencies": {
+				"@bufbuild/protobuf": "^2.0.0",
+				"buffer-builder": "^0.2.0",
+				"colorjs.io": "^0.5.0",
+				"immutable": "^4.0.0",
+				"rxjs": "^7.4.0",
+				"supports-color": "^8.1.1",
+				"varint": "^6.0.0"
+			},
+			"bin": {
+				"sass": "dist/bin/sass.js"
+			},
+			"engines": {
+				"node": ">=16.0.0"
+			},
+			"optionalDependencies": {
+				"sass-embedded-android-arm": "1.79.3",
+				"sass-embedded-android-arm64": "1.79.3",
+				"sass-embedded-android-ia32": "1.79.3",
+				"sass-embedded-android-riscv64": "1.79.3",
+				"sass-embedded-android-x64": "1.79.3",
+				"sass-embedded-darwin-arm64": "1.79.3",
+				"sass-embedded-darwin-x64": "1.79.3",
+				"sass-embedded-linux-arm": "1.79.3",
+				"sass-embedded-linux-arm64": "1.79.3",
+				"sass-embedded-linux-ia32": "1.79.3",
+				"sass-embedded-linux-musl-arm": "1.79.3",
+				"sass-embedded-linux-musl-arm64": "1.79.3",
+				"sass-embedded-linux-musl-ia32": "1.79.3",
+				"sass-embedded-linux-musl-riscv64": "1.79.3",
+				"sass-embedded-linux-musl-x64": "1.79.3",
+				"sass-embedded-linux-riscv64": "1.79.3",
+				"sass-embedded-linux-x64": "1.79.3",
+				"sass-embedded-win32-arm64": "1.79.3",
+				"sass-embedded-win32-ia32": "1.79.3",
+				"sass-embedded-win32-x64": "1.79.3"
+			}
+		},
+		"node_modules/sass-embedded-android-arm": {
+			"version": "1.79.3",
+			"resolved": "https://registry.npmjs.org/sass-embedded-android-arm/-/sass-embedded-android-arm-1.79.3.tgz",
+			"integrity": "sha512-rrdaVDkKBLUqzdqlBFamUbeuLG+8r/QLXHIgz4qPhIDqceJH6ds0Vzrae9Ef6DhYfMatOg2xiScdatwQ8Yl/hA==",
+			"cpu": [
+				"arm"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"android"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded-android-arm64": {
+			"version": "1.79.3",
+			"resolved": "https://registry.npmjs.org/sass-embedded-android-arm64/-/sass-embedded-android-arm64-1.79.3.tgz",
+			"integrity": "sha512-Wqm/WKHIDQl7w7eIQRO/GQ7EXfnwNpipCyJL7Xtb15vSAV64J4/0D/esy6GOPlVG+qcu8/XN8NV7Bf5wZ2ExUw==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"android"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded-android-ia32": {
+			"version": "1.79.3",
+			"resolved": "https://registry.npmjs.org/sass-embedded-android-ia32/-/sass-embedded-android-ia32-1.79.3.tgz",
+			"integrity": "sha512-6rDmH0O7hjBP04/xBAFzSYYMU/7MrQYCak4541BZIbIfa2uw0x/8+mB7lZjdgFsBrFjcpdVCPhZPUE6Y50c00A==",
+			"cpu": [
+				"ia32"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"android"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded-android-riscv64": {
+			"version": "1.79.3",
+			"resolved": "https://registry.npmjs.org/sass-embedded-android-riscv64/-/sass-embedded-android-riscv64-1.79.3.tgz",
+			"integrity": "sha512-B/PgB0AfTCvOlF1g89raJTwTXIUQUM3OXDWqEKIlJEZM1Yao91i8ZkyrFkDMzT4G5sETy4o8pgK+qE9+7bFlug==",
+			"cpu": [
+				"riscv64"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"android"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded-android-x64": {
+			"version": "1.79.3",
+			"resolved": "https://registry.npmjs.org/sass-embedded-android-x64/-/sass-embedded-android-x64-1.79.3.tgz",
+			"integrity": "sha512-a5cpo9Yw4xnX32Uo3WfMZLaTVnI/h2n7U3K3eTygyj707yhGkUB0i+qxldzCw8MmKivIu9irG6O4kmnRjW6f7g==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"android"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded-darwin-arm64": {
+			"version": "1.79.3",
+			"resolved": "https://registry.npmjs.org/sass-embedded-darwin-arm64/-/sass-embedded-darwin-arm64-1.79.3.tgz",
+			"integrity": "sha512-imafD0nlVz5FJhqBqxUbG5rK4E3cu1GxhMZ5VhKm0k4t5jFQo+3OjN7sHT4Ee2Mk1g8sjr5dtq5enDU4fs6lXA==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded-darwin-x64": {
+			"version": "1.79.3",
+			"resolved": "https://registry.npmjs.org/sass-embedded-darwin-x64/-/sass-embedded-darwin-x64-1.79.3.tgz",
+			"integrity": "sha512-pjciT1FcMUMA4rWdpyZYSwMOvxk5JP7R6vy7TzvqkUEqXxP9FTflYnAiwgYUDVTpngHHqRxTjdyW+e+h2L9dHw==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded-linux-arm": {
+			"version": "1.79.3",
+			"resolved": "https://registry.npmjs.org/sass-embedded-linux-arm/-/sass-embedded-linux-arm-1.79.3.tgz",
+			"integrity": "sha512-n0bDtzABPE5YaL9wSLxNPiQMl1zArsGblHJyED6fEHz41m+OkCTopfO8IVjcf+MBrK/j11gonxiIGWO+fNOxvg==",
+			"cpu": [
+				"arm"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded-linux-arm64": {
+			"version": "1.79.3",
+			"resolved": "https://registry.npmjs.org/sass-embedded-linux-arm64/-/sass-embedded-linux-arm64-1.79.3.tgz",
+			"integrity": "sha512-ODo8ghwk6KHxchgwxq4CwgfYwWdreEbsQoukeEgRKxHcuLB9XF6tol9pGlfrc8sYox48Vp5WDCZuzgoo6rJ6tg==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded-linux-ia32": {
+			"version": "1.79.3",
+			"resolved": "https://registry.npmjs.org/sass-embedded-linux-ia32/-/sass-embedded-linux-ia32-1.79.3.tgz",
+			"integrity": "sha512-oC3rUyIE6mEm2etsc4CuNu6IVmB6CoSM4KsubxzCD3S37QFXq8wYbI0t9iiDdTkKb5Iu+vUyhn+tYJRVHg0tvw==",
+			"cpu": [
+				"ia32"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded-linux-musl-arm": {
+			"version": "1.79.3",
+			"resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-arm/-/sass-embedded-linux-musl-arm-1.79.3.tgz",
+			"integrity": "sha512-TOUYMtDs9xoMsJSEEr7NjtcVCqVpg1eSOQHXXruJ1kiYfxwmHrCYTjTLoefbZ29mWqIq8NUaXJG4rZNDK6NzRA==",
+			"cpu": [
+				"arm"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded-linux-musl-arm64": {
+			"version": "1.79.3",
+			"resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-arm64/-/sass-embedded-linux-musl-arm64-1.79.3.tgz",
+			"integrity": "sha512-Q9/5lsrK/JnQci3DwxZ9PGIIrRxuo/bySv+gbyVp8Kb7gdkZcEsY7HkxaBJfwVEwpZSGAyCviyZDHDMILjliOw==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded-linux-musl-ia32": {
+			"version": "1.79.3",
+			"resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-ia32/-/sass-embedded-linux-musl-ia32-1.79.3.tgz",
+			"integrity": "sha512-T2uERh3gs9eWUzdkDadPuYbelQJQLZyX8myutUd4fxyrQ7ToQRBwcMoynEjl48DBHnM0oRiJUHrV9uFuJ+fmRA==",
+			"cpu": [
+				"ia32"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded-linux-musl-riscv64": {
+			"version": "1.79.3",
+			"resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-riscv64/-/sass-embedded-linux-musl-riscv64-1.79.3.tgz",
+			"integrity": "sha512-XTuYtTBPFeEjydS2GsIUkMztzXIiz13noknE7m1yAbVxOchu9jD9FCLAdK9pVPPki+9BiLSxsutYwOcQn8atqQ==",
+			"cpu": [
+				"riscv64"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded-linux-musl-x64": {
+			"version": "1.79.3",
+			"resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-x64/-/sass-embedded-linux-musl-x64-1.79.3.tgz",
+			"integrity": "sha512-gDHfaPlxT/XQTMbfb2y+U6zDMuI8pfapVXTYlUrgYhKH2KoICclIvahhjFii5i5+1dHpfGzjgYKBqI3nvZsYFg==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded-linux-riscv64": {
+			"version": "1.79.3",
+			"resolved": "https://registry.npmjs.org/sass-embedded-linux-riscv64/-/sass-embedded-linux-riscv64-1.79.3.tgz",
+			"integrity": "sha512-NONTa//1ZfxA87+Zjp3rabL+Z9gM67FJBdktRKXXMBAce5i8eCj/eqJGUOGPjYxtvxtQw77cex0qMr9SZnX6ww==",
+			"cpu": [
+				"riscv64"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded-linux-x64": {
+			"version": "1.79.3",
+			"resolved": "https://registry.npmjs.org/sass-embedded-linux-x64/-/sass-embedded-linux-x64-1.79.3.tgz",
+			"integrity": "sha512-drlUqMMw222+f/T5sNrIAv+z0vQwLkO4zAlDmf4biLdWIloPP/3plTodAkMyfagNcvA8jG2jN414pJXBI3zK6w==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded-win32-arm64": {
+			"version": "1.79.3",
+			"resolved": "https://registry.npmjs.org/sass-embedded-win32-arm64/-/sass-embedded-win32-arm64-1.79.3.tgz",
+			"integrity": "sha512-gYz0IUb0fLkHUbhq+HR52wvQfG75Zu1s48/v48TqC+b04H/01k2eiawp/Ec1f+lhpIL/pr5+n5jWR6CjkxPdnQ==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded-win32-ia32": {
+			"version": "1.79.3",
+			"resolved": "https://registry.npmjs.org/sass-embedded-win32-ia32/-/sass-embedded-win32-ia32-1.79.3.tgz",
+			"integrity": "sha512-fbDTyzbqRc+xCWZ+YHSDt2WvGk5PW2K0SjyHuwes/Fls1+wdO4iHIukE/pD+HSWytYrtCqhe7EFq5Ug5HxGTLg==",
+			"cpu": [
+				"ia32"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded-win32-x64": {
+			"version": "1.79.3",
+			"resolved": "https://registry.npmjs.org/sass-embedded-win32-x64/-/sass-embedded-win32-x64-1.79.3.tgz",
+			"integrity": "sha512-vvfr6wyCaHvdQbGS8UkYab6DXc1FKJRYFT5aFE3QTVqbzCqmJ5tf80E4+gvB99nljLtMjwKR1d332iWI9KDLhw==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded/node_modules/supports-color": {
+			"version": "8.1.1",
+			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+			"integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+			"dev": true,
+			"dependencies": {
+				"has-flag": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/supports-color?sponsor=1"
+			}
+		},
 		"node_modules/saxes": {
 			"version": "6.0.0",
 			"resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
@@ -9357,11 +9748,10 @@
 			}
 		},
 		"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==",
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+			"integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
 			"dev": true,
-			"license": "BSD-3-Clause",
 			"engines": {
 				"node": ">=0.10.0"
 			}
@@ -10223,15 +10613,21 @@
 				"requires-port": "^1.0.0"
 			}
 		},
+		"node_modules/varint": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/varint/-/varint-6.0.0.tgz",
+			"integrity": "sha512-cXEIW6cfr15lFv563k4GuVuW/fiwjknytD37jIOLSdSWuOI6WnO/oKwmP2FQTU2l01LP8/M5TSAJpzUaGe3uWg==",
+			"dev": true
+		},
 		"node_modules/vite": {
-			"version": "5.3.5",
-			"resolved": "https://registry.npmjs.org/vite/-/vite-5.3.5.tgz",
-			"integrity": "sha512-MdjglKR6AQXQb9JGiS7Rc2wC6uMjcm7Go/NHNO63EwiJXfuk9PgqiP/n5IDJCziMkfw9n4Ubp7lttNwz+8ZVKA==",
+			"version": "5.4.8",
+			"resolved": "https://registry.npmjs.org/vite/-/vite-5.4.8.tgz",
+			"integrity": "sha512-FqrItQ4DT1NC4zCUqMB4c4AZORMKIa0m8/URVCZ77OZ/QSNeJ54bU1vrFADbDsuwfIPcgknRkmqakQcgnL4GiQ==",
 			"dev": true,
 			"dependencies": {
 				"esbuild": "^0.21.3",
-				"postcss": "^8.4.39",
-				"rollup": "^4.13.0"
+				"postcss": "^8.4.43",
+				"rollup": "^4.20.0"
 			},
 			"bin": {
 				"vite": "bin/vite.js"
@@ -10250,6 +10646,7 @@
 				"less": "*",
 				"lightningcss": "^1.21.0",
 				"sass": "*",
+				"sass-embedded": "*",
 				"stylus": "*",
 				"sugarss": "*",
 				"terser": "^5.4.0"
@@ -10267,6 +10664,9 @@
 				"sass": {
 					"optional": true
 				},
+				"sass-embedded": {
+					"optional": true
+				},
 				"stylus": {
 					"optional": true
 				},
@@ -10833,11 +11233,10 @@
 			}
 		},
 		"node_modules/workbox-build/node_modules/rollup": {
-			"version": "2.79.1",
-			"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz",
-			"integrity": "sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==",
+			"version": "2.79.2",
+			"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.2.tgz",
+			"integrity": "sha512-fS6iqSPZDs3dr/y7Od6y5nha8dW1YnbgtsyotCVvoFGKbERG++CVRFv1meyGDE1SNItQA8BrnCw7ScdAhRJ3XQ==",
 			"dev": true,
-			"license": "MIT",
 			"bin": {
 				"rollup": "dist/bin/rollup"
 			},
diff --git a/package.json b/package.json
index 5d4cda1..3174845 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
 		"jsdom": "^24.1.1",
 		"lint-staged": "^15.2.9",
 		"prettier": "^3.3.3",
+		"sass-embedded": "^1.79.3",
 		"typescript-eslint": "^8.2.0",
 		"vite": "^5.3.5",
 		"vite-plugin-pwa": "^0.20.1",
diff --git a/src/components/AuthenticatedNavBar.css b/src/components/AuthenticatedNavBar.scss
similarity index 100%
rename from src/components/AuthenticatedNavBar.css
rename to src/components/AuthenticatedNavBar.scss
diff --git a/src/components/AuthenticatedNavBar.tsx b/src/components/AuthenticatedNavBar.tsx
index 6441ee5..bdc2f87 100644
--- a/src/components/AuthenticatedNavBar.tsx
+++ b/src/components/AuthenticatedNavBar.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { NavLink } from "react-router-dom";
 import { SignOutButton } from "../api";
 
-import "./AuthenticatedNavBar.css";
+import "./AuthenticatedNavBar.scss";
 
 export function AuthenticatedNavBar() {
 	return (
diff --git a/src/components/ListItem.css b/src/components/ListItem.scss
similarity index 100%
rename from src/components/ListItem.css
rename to src/components/ListItem.scss
diff --git a/src/components/ListItem.tsx b/src/components/ListItem.tsx
index 6520e95..b81a2b9 100644
--- a/src/components/ListItem.tsx
+++ b/src/components/ListItem.tsx
@@ -1,4 +1,4 @@
-import "./ListItem.css";
+import "./ListItem.scss";
 import { updateItem, deleteItem, ListItem } from "../api";
 import { useState } from "react";
 import toast from "react-hot-toast";
diff --git a/src/components/SingleList.css b/src/components/SingleList.scss
similarity index 100%
rename from src/components/SingleList.css
rename to src/components/SingleList.scss
diff --git a/src/components/SingleList.tsx b/src/components/SingleList.tsx
index a195d4c..805d4f4 100644
--- a/src/components/SingleList.tsx
+++ b/src/components/SingleList.tsx
@@ -1,7 +1,8 @@
-import './SingleList.css';
-import * as api from '../api/firebase';
+import "./SingleList.scss";
+import * as api from "../api/firebase";
+import Button from "react-bootstrap/Button";
 
-interface Props extends Pick<api.List, 'name' | 'path'> {
+interface Props extends Pick<api.List, "name" | "path"> {
 	setListPath: (path: string) => void;
 }
 
diff --git a/src/index.css b/src/index.scss
similarity index 100%
rename from src/index.css
rename to src/index.scss
diff --git a/src/index.tsx b/src/index.tsx
index bdf1e7d..2012547 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -3,7 +3,8 @@ import { createRoot } from "react-dom/client";
 import { BrowserRouter as Router } from "react-router-dom";
 import { App } from "./App";
 
-import "./index.css";
+import "bootstrap/dist/css/bootstrap.min.css";
+import "./index.scss";
 
 const root = createRoot(document.getElementById("root") as HTMLElement);
 root.render(
diff --git a/src/views/Home.css b/src/views/Home.scss
similarity index 100%
rename from src/views/Home.css
rename to src/views/Home.scss
diff --git a/src/views/Home.tsx b/src/views/Home.tsx
index 4c46603..8f5dc88 100644
--- a/src/views/Home.tsx
+++ b/src/views/Home.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import "./Home.css";
+import "./Home.scss";
 import { SingleList, CreateList } from "../components";
 import { List, User } from "../api/firebase";
 
diff --git a/src/views/Layout.css b/src/views/Layout.scss
similarity index 100%
rename from src/views/Layout.css
rename to src/views/Layout.scss
diff --git a/src/views/Layout.tsx b/src/views/Layout.tsx
index 0a65806..c2319e2 100644
--- a/src/views/Layout.tsx
+++ b/src/views/Layout.tsx
@@ -3,7 +3,7 @@ import { Outlet } from "react-router-dom";
 import { SignInButton, User } from "../api";
 import { AuthenticatedNavBar } from "../components";
 
-import "./Layout.css";
+import "./Layout.scss";
 
 interface Props {
 	user: User | null;

From b9d057fb7af17961c413e75a8a2e87e43e8eb194 Mon Sep 17 00:00:00 2001
From: Falak Zahra <falak.zahra16@gmail.com>
Date: Fri, 27 Sep 2024 22:08:07 -0600
Subject: [PATCH 2/8] Restart pipeline


From c2fd7b3439d8a1e6e2621e328d151841ad92a528 Mon Sep 17 00:00:00 2001
From: Falak Zahra <falak.zahra16@gmail.com>
Date: Fri, 27 Sep 2024 22:11:55 -0600
Subject: [PATCH 3/8] Remove unwanted bootstrap imports

---
 src/components/SingleList.tsx | 1 -
 src/index.tsx                 | 1 -
 2 files changed, 2 deletions(-)

diff --git a/src/components/SingleList.tsx b/src/components/SingleList.tsx
index 805d4f4..5d2131f 100644
--- a/src/components/SingleList.tsx
+++ b/src/components/SingleList.tsx
@@ -1,6 +1,5 @@
 import "./SingleList.scss";
 import * as api from "../api/firebase";
-import Button from "react-bootstrap/Button";
 
 interface Props extends Pick<api.List, "name" | "path"> {
 	setListPath: (path: string) => void;
diff --git a/src/index.tsx b/src/index.tsx
index 2012547..ab1683b 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -3,7 +3,6 @@ import { createRoot } from "react-dom/client";
 import { BrowserRouter as Router } from "react-router-dom";
 import { App } from "./App";
 
-import "bootstrap/dist/css/bootstrap.min.css";
 import "./index.scss";
 
 const root = createRoot(document.getElementById("root") as HTMLElement);

From f5ebf6cce5af6233e2ae3bfead5556cd363097f3 Mon Sep 17 00:00:00 2001
From: Falak Zahra <falak.zahra16@gmail.com>
Date: Sat, 28 Sep 2024 14:28:21 -0600
Subject: [PATCH 4/8] Add nesting to CSS selectors in AuthenticatedNavBar.scss

---
 src/components/AuthenticatedNavBar.scss | 40 ++++++++++++-------------
 src/components/AuthenticatedNavBar.tsx  |  8 ++---
 2 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/components/AuthenticatedNavBar.scss b/src/components/AuthenticatedNavBar.scss
index 21cb43a..d99d2f6 100644
--- a/src/components/AuthenticatedNavBar.scss
+++ b/src/components/AuthenticatedNavBar.scss
@@ -9,27 +9,27 @@
 	place-content: center;
 	position: fixed;
 	width: 100%;
-}
 
-.Nav-container {
-	display: flex;
-	flex-direction: row;
-	justify-content: space-evenly;
-	width: min(72ch, 100%);
-}
+	&__container {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-evenly;
+		width: min(72ch, 100%);
+	}
 
-.Nav-link {
-	--color-text: var(--color-accent);
-	color: var(--color-text);
-	font-size: 1.4em;
-	flex: 0 1 auto;
-	line-height: 1;
-	padding: 0.8rem;
-	text-align: center;
-	text-underline-offset: 0.1em;
-}
+	&__link {
+		--color-text: var(--color-accent);
+		color: var(--color-text);
+		font-size: 1.4em;
+		flex: 0 1 auto;
+		line-height: 1;
+		padding: 0.8rem;
+		text-align: center;
+		text-underline-offset: 0.1em;
 
-.Nav-link.active {
-	text-decoration-thickness: 0.22em;
-	text-underline-offset: 0.1em;
+		&.active {
+			text-decoration-thickness: 0.22em;
+			text-underline-offset: 0.1em;
+		}
+	}
 }
diff --git a/src/components/AuthenticatedNavBar.tsx b/src/components/AuthenticatedNavBar.tsx
index bdc2f87..8a92630 100644
--- a/src/components/AuthenticatedNavBar.tsx
+++ b/src/components/AuthenticatedNavBar.tsx
@@ -7,17 +7,17 @@ import "./AuthenticatedNavBar.scss";
 export function AuthenticatedNavBar() {
 	return (
 		<nav className="Nav">
-			<div className="Nav-container">
+			<div className="Nav__container">
 				<SignOutButton />
-				<NavLink to="/" className="Nav-link" aria-label="Home">
+				<NavLink to="/" className="Nav__link" aria-label="Home">
 					Home
 				</NavLink>
-				<NavLink to="/list" className="Nav-link" aria-label="List">
+				<NavLink to="/list" className="Nav__link" aria-label="List">
 					List
 				</NavLink>
 				<NavLink
 					to="/manage-list"
-					className="Nav-link"
+					className="Nav__link"
 					aria-label="Manage List"
 				>
 					Manage List

From 6a05c04577d0a53d6beca7c4883dbeccb954328d Mon Sep 17 00:00:00 2001
From: Falak Zahra <falak.zahra16@gmail.com>
Date: Sat, 28 Sep 2024 14:55:28 -0600
Subject: [PATCH 5/8] Add a variables.scss file with some placeholders for
 colours.

---
 src/styles/variables.scss | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 src/styles/variables.scss

diff --git a/src/styles/variables.scss b/src/styles/variables.scss
new file mode 100644
index 0000000..a3a2374
--- /dev/null
+++ b/src/styles/variables.scss
@@ -0,0 +1,5 @@
+// ====== COLOURS ========
+$primary-blue: #e3f2fd;
+$secondary-blue: #2d4b77;
+$white: #fff;
+$grey: #525252;

From 97e5bbd96c46b15c234cc878a57205879f1caef8 Mon Sep 17 00:00:00 2001
From: Falak Zahra <falak.zahra16@gmail.com>
Date: Sat, 28 Sep 2024 14:56:50 -0600
Subject: [PATCH 6/8] Convert the variables file into a partial

---
 src/styles/{variables.scss => _variables.scss} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/styles/{variables.scss => _variables.scss} (100%)

diff --git a/src/styles/variables.scss b/src/styles/_variables.scss
similarity index 100%
rename from src/styles/variables.scss
rename to src/styles/_variables.scss

From fceec4b702b8b28b5e3ca45a426843ed44f80e36 Mon Sep 17 00:00:00 2001
From: Brianna <104288486+bbland1@users.noreply.github.com>
Date: Sat, 28 Sep 2024 23:47:10 -0400
Subject: [PATCH 7/8] Bb/bootstrap integration (#45)

* feat: add bootstrap & react-bootstrap to application

* style: changing all buttons to react-bootstrap buttons

* style: change all forms over to react-bootstrap

* fix: adding clearing func & button to filter list b/c react-bootstrap doesn't utilize input="search"

* fix: correcting the import statements for react-bootstrap to the preferred

* style: update navbar to use react-bootstrap

* fix:  update navbar to use Nav.Link `react-bootstrap` components

* fix: putting back bg-color from css classes and making sure nav bar sticks to bottom

* fix: main area fo page scrolls on long list now
---
 index.html                             |   6 +
 package-lock.json                      | 240 ++++++++++++++++++++++++-
 package.json                           |   2 +
 src/api/useAuth.tsx                    |   9 +-
 src/components/AuthenticatedNavBar.tsx |  29 +--
 src/components/CreateList.tsx          |  41 ++---
 src/components/FilterListInput.tsx     |  22 ++-
 src/components/ListItem.tsx            |  28 +--
 src/components/SingleList.tsx          |   9 +-
 src/components/forms/AddItemForm.tsx   | 141 ++++++++-------
 src/components/forms/ShareListForm.tsx |  22 +--
 src/index.tsx                          |   1 +
 src/views/Layout.tsx                   |  22 ++-
 src/views/authenticated/List.tsx       |  40 +++--
 14 files changed, 438 insertions(+), 174 deletions(-)

diff --git a/index.html b/index.html
index 8b17180..830eb28 100644
--- a/index.html
+++ b/index.html
@@ -11,6 +11,12 @@
 			content="A smart shopping list that learns your purchase habits and makes suggestions, so you don't forget to buy what's important."
 		/>
 		<link rel="icon" type="image/svg+xml" href="/src/favicon.ico" />
+		<link
+			rel="stylesheet"
+			href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
+			integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
+			crossorigin="anonymous"
+		/>
 		<meta name="color-scheme" content="dark light" />
 		<title>Smart Shopping List</title>
 		<script type="module" src="/src/index.tsx" async></script>
diff --git a/package-lock.json b/package-lock.json
index e380781..c3cadbd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,10 +7,12 @@
 			"name": "smart-shopping-list-next",
 			"dependencies": {
 				"@the-collab-lab/shopping-list-utils": "^2.2.0",
+				"bootstrap": "^5.3.3",
 				"firebase": "^10.12.5",
 				"fp-ts": "^2.16.9",
 				"io-ts": "^2.2.21",
 				"react": "^18.3.1",
+				"react-bootstrap": "^2.10.4",
 				"react-dom": "^18.3.1",
 				"react-hot-toast": "^2.4.1",
 				"react-router-dom": "^6.26.0"
@@ -1919,7 +1921,6 @@
 			"version": "7.24.7",
 			"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.7.tgz",
 			"integrity": "sha512-UwgBRMjJP+xv857DCngvqXI3Iq6J4v0wXmwc6sapg+zyhbwmQX67LUEFrkK5tbyJ30jGuG3ZvWpBiB9LCy1kWw==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"regenerator-runtime": "^0.14.0"
@@ -3156,6 +3157,16 @@
 				"node": ">= 8"
 			}
 		},
+		"node_modules/@popperjs/core": {
+			"version": "2.11.8",
+			"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+			"integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+			"license": "MIT",
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/popperjs"
+			}
+		},
 		"node_modules/@protobufjs/aspromise": {
 			"version": "1.1.2",
 			"resolved": "https://registry.npmjs.org/@protobufjs/aspromise/-/aspromise-1.1.2.tgz",
@@ -3210,6 +3221,21 @@
 			"resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz",
 			"integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw=="
 		},
+		"node_modules/@react-aria/ssr": {
+			"version": "3.9.5",
+			"resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.5.tgz",
+			"integrity": "sha512-xEwGKoysu+oXulibNUSkXf8itW0npHHTa6c4AyYeZIJyRoegeteYuFpZUBPtIDE8RfHdNsSmE1ssOkxRnwbkuQ==",
+			"license": "Apache-2.0",
+			"dependencies": {
+				"@swc/helpers": "^0.5.0"
+			},
+			"engines": {
+				"node": ">= 12"
+			},
+			"peerDependencies": {
+				"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+			}
+		},
 		"node_modules/@remix-run/router": {
 			"version": "1.19.0",
 			"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.0.tgz",
@@ -3218,6 +3244,48 @@
 				"node": ">=14.0.0"
 			}
 		},
+		"node_modules/@restart/hooks": {
+			"version": "0.4.16",
+			"resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.16.tgz",
+			"integrity": "sha512-f7aCv7c+nU/3mF7NWLtVVr0Ra80RqsO89hO72r+Y/nvQr5+q0UFGkocElTH6MJApvReVh6JHUFYn2cw1WdHF3w==",
+			"license": "MIT",
+			"dependencies": {
+				"dequal": "^2.0.3"
+			},
+			"peerDependencies": {
+				"react": ">=16.8.0"
+			}
+		},
+		"node_modules/@restart/ui": {
+			"version": "1.8.0",
+			"resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.8.0.tgz",
+			"integrity": "sha512-xJEOXUOTmT4FngTmhdjKFRrVVF0hwCLNPdatLCHkyS4dkiSK12cEu1Y0fjxktjJrdst9jJIc5J6ihMJCoWEN/g==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/runtime": "^7.21.0",
+				"@popperjs/core": "^2.11.6",
+				"@react-aria/ssr": "^3.5.0",
+				"@restart/hooks": "^0.4.9",
+				"@types/warning": "^3.0.0",
+				"dequal": "^2.0.3",
+				"dom-helpers": "^5.2.0",
+				"uncontrollable": "^8.0.1",
+				"warning": "^4.0.3"
+			},
+			"peerDependencies": {
+				"react": ">=16.14.0",
+				"react-dom": ">=16.14.0"
+			}
+		},
+		"node_modules/@restart/ui/node_modules/uncontrollable": {
+			"version": "8.0.4",
+			"resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-8.0.4.tgz",
+			"integrity": "sha512-ulRWYWHvscPFc0QQXvyJjY6LIXU56f0h8pQFvhxiKk5V1fcI8gp9Ht9leVAhrVjzqMw0BgjspBINx9r6oyJUvQ==",
+			"license": "MIT",
+			"peerDependencies": {
+				"react": ">=16.14.0"
+			}
+		},
 		"node_modules/@rollup/plugin-node-resolve": {
 			"version": "15.2.3",
 			"resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-15.2.3.tgz",
@@ -3792,6 +3860,15 @@
 				"@svgr/core": "*"
 			}
 		},
+		"node_modules/@swc/helpers": {
+			"version": "0.5.13",
+			"resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.13.tgz",
+			"integrity": "sha512-UoKGxQ3r5kYI9dALKJapMmuK+1zWM/H17Z1+iwnNmzcJRnfFuevZs375TA5rW31pu4BS4NoSy1fRsexDXfWn5w==",
+			"license": "Apache-2.0",
+			"dependencies": {
+				"tslib": "^2.4.0"
+			}
+		},
 		"node_modules/@testing-library/dom": {
 			"version": "10.4.0",
 			"resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz",
@@ -4001,14 +4078,12 @@
 			"version": "15.7.12",
 			"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
 			"integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==",
-			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/@types/react": {
 			"version": "18.3.4",
 			"resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.4.tgz",
 			"integrity": "sha512-J7W30FTdfCxDDjmfRM+/JqLHBIyl7xUIp9kwK637FGmY7+mkSFSe6L4jpZzhj5QMfLssSDP4/i75AKkrdC7/Jw==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@types/prop-types": "*",
@@ -4025,6 +4100,15 @@
 				"@types/react": "*"
 			}
 		},
+		"node_modules/@types/react-transition-group": {
+			"version": "4.4.11",
+			"resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.11.tgz",
+			"integrity": "sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/react": "*"
+			}
+		},
 		"node_modules/@types/resolve": {
 			"version": "1.20.2",
 			"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
@@ -4039,6 +4123,12 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/@types/warning": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.3.tgz",
+			"integrity": "sha512-D1XC7WK8K+zZEveUPY+cf4+kgauk8N4eHr/XIHXGlGYkHLud6hK9lYfZk1ry1TNh798cZUCgb6MqGEG8DkJt6Q==",
+			"license": "MIT"
+		},
 		"node_modules/@typescript-eslint/eslint-plugin": {
 			"version": "8.2.0",
 			"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.2.0.tgz",
@@ -4766,6 +4856,25 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/bootstrap": {
+			"version": "5.3.3",
+			"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz",
+			"integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/twbs"
+				},
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/bootstrap"
+				}
+			],
+			"license": "MIT",
+			"peerDependencies": {
+				"@popperjs/core": "^2.11.8"
+			}
+		},
 		"node_modules/brace-expansion": {
 			"version": "1.1.11",
 			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -4958,6 +5067,12 @@
 				"node": ">= 16"
 			}
 		},
+		"node_modules/classnames": {
+			"version": "2.5.1",
+			"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+			"integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
+			"license": "MIT"
+		},
 		"node_modules/cli-cursor": {
 			"version": "5.0.0",
 			"resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-5.0.0.tgz",
@@ -5422,7 +5537,6 @@
 			"version": "2.0.3",
 			"resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
 			"integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
-			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=6"
@@ -5461,6 +5575,16 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/dom-helpers": {
+			"version": "5.2.1",
+			"resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+			"integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/runtime": "^7.8.7",
+				"csstype": "^3.0.2"
+			}
+		},
 		"node_modules/dot-case": {
 			"version": "3.0.4",
 			"resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
@@ -6911,6 +7035,15 @@
 				"node": ">= 0.4"
 			}
 		},
+		"node_modules/invariant": {
+			"version": "2.2.4",
+			"resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+			"integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+			"license": "MIT",
+			"dependencies": {
+				"loose-envify": "^1.0.0"
+			}
+		},
 		"node_modules/io-ts": {
 			"version": "2.2.21",
 			"resolved": "https://registry.npmjs.org/io-ts/-/io-ts-2.2.21.tgz",
@@ -8147,7 +8280,6 @@
 			"version": "4.1.1",
 			"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
 			"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=0.10.0"
@@ -8588,7 +8720,6 @@
 			"version": "15.8.1",
 			"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
 			"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"loose-envify": "^1.4.0",
@@ -8596,11 +8727,29 @@
 				"react-is": "^16.13.1"
 			}
 		},
+		"node_modules/prop-types-extra": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
+			"integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
+			"license": "MIT",
+			"dependencies": {
+				"react-is": "^16.3.2",
+				"warning": "^4.0.0"
+			},
+			"peerDependencies": {
+				"react": ">=0.14.0"
+			}
+		},
+		"node_modules/prop-types-extra/node_modules/react-is": {
+			"version": "16.13.1",
+			"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+			"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+			"license": "MIT"
+		},
 		"node_modules/prop-types/node_modules/react-is": {
 			"version": "16.13.1",
 			"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
 			"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/protobufjs": {
@@ -8693,6 +8842,36 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/react-bootstrap": {
+			"version": "2.10.4",
+			"resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.10.4.tgz",
+			"integrity": "sha512-W3398nBM2CBfmGP2evneEO3ZZwEMPtHs72q++eNw60uDGDAdiGn0f9yNys91eo7/y8CTF5Ke1C0QO8JFVPU40Q==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/runtime": "^7.24.7",
+				"@restart/hooks": "^0.4.9",
+				"@restart/ui": "^1.6.9",
+				"@types/react-transition-group": "^4.4.6",
+				"classnames": "^2.3.2",
+				"dom-helpers": "^5.2.1",
+				"invariant": "^2.2.4",
+				"prop-types": "^15.8.1",
+				"prop-types-extra": "^1.1.0",
+				"react-transition-group": "^4.4.5",
+				"uncontrollable": "^7.2.1",
+				"warning": "^4.0.3"
+			},
+			"peerDependencies": {
+				"@types/react": ">=16.14.8",
+				"react": ">=16.14.0",
+				"react-dom": ">=16.14.0"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/react-dom": {
 			"version": "18.3.1",
 			"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
@@ -8729,6 +8908,12 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"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==",
+			"license": "MIT"
+		},
 		"node_modules/react-refresh": {
 			"version": "0.14.2",
 			"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",
@@ -8769,6 +8954,22 @@
 				"react-dom": ">=16.8"
 			}
 		},
+		"node_modules/react-transition-group": {
+			"version": "4.4.5",
+			"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+			"integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+			"license": "BSD-3-Clause",
+			"dependencies": {
+				"@babel/runtime": "^7.5.5",
+				"dom-helpers": "^5.0.1",
+				"loose-envify": "^1.4.0",
+				"prop-types": "^15.6.2"
+			},
+			"peerDependencies": {
+				"react": ">=16.6.0",
+				"react-dom": ">=16.6.0"
+			}
+		},
 		"node_modules/redent": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
@@ -8829,7 +9030,6 @@
 			"version": "0.14.1",
 			"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
 			"integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
-			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/regenerator-transform": {
@@ -10077,6 +10277,21 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
+		"node_modules/uncontrollable": {
+			"version": "7.2.1",
+			"resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
+			"integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/runtime": "^7.6.3",
+				"@types/react": ">=16.9.11",
+				"invariant": "^2.2.4",
+				"react-lifecycles-compat": "^3.0.4"
+			},
+			"peerDependencies": {
+				"react": ">=15.0.0"
+			}
+		},
 		"node_modules/undici": {
 			"version": "5.28.4",
 			"resolved": "https://registry.npmjs.org/undici/-/undici-5.28.4.tgz",
@@ -10422,6 +10637,15 @@
 				"node": ">=18"
 			}
 		},
+		"node_modules/warning": {
+			"version": "4.0.3",
+			"resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+			"integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+			"license": "MIT",
+			"dependencies": {
+				"loose-envify": "^1.0.0"
+			}
+		},
 		"node_modules/webidl-conversions": {
 			"version": "7.0.0",
 			"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
diff --git a/package.json b/package.json
index 5d4cda1..0d19963 100644
--- a/package.json
+++ b/package.json
@@ -8,10 +8,12 @@
 	},
 	"dependencies": {
 		"@the-collab-lab/shopping-list-utils": "^2.2.0",
+		"bootstrap": "^5.3.3",
 		"firebase": "^10.12.5",
 		"fp-ts": "^2.16.9",
 		"io-ts": "^2.2.21",
 		"react": "^18.3.1",
+		"react-bootstrap": "^2.10.4",
 		"react-dom": "^18.3.1",
 		"react-hot-toast": "^2.4.1",
 		"react-router-dom": "^6.26.0"
diff --git a/src/api/useAuth.tsx b/src/api/useAuth.tsx
index c15426e..2ff0b27 100644
--- a/src/api/useAuth.tsx
+++ b/src/api/useAuth.tsx
@@ -3,6 +3,7 @@ import { auth } from "./config.js";
 import { GoogleAuthProvider, signInWithPopup } from "firebase/auth";
 import { addUserToDatabase, User } from "./firebase";
 import toast from "react-hot-toast";
+import Button from "react-bootstrap/Button";
 
 /**
  * A button that signs the user in using Google OAuth. When clicked,
@@ -10,12 +11,12 @@ import toast from "react-hot-toast";
  * After the user signs in, they are redirected back to the app.
  */
 export const SignInButton = () => (
-	<button
+	<Button
 		type="button"
 		onClick={() => signInWithPopup(auth, new GoogleAuthProvider())}
 	>
 		Sign In
-	</button>
+	</Button>
 );
 
 /**
@@ -23,7 +24,7 @@ export const SignInButton = () => (
  */
 export const SignOutButton = () => {
 	return (
-		<button
+		<Button
 			type="button"
 			onClick={() => {
 				auth.signOut().catch((error) => {
@@ -33,7 +34,7 @@ export const SignOutButton = () => {
 			}}
 		>
 			Sign Out
-		</button>
+		</Button>
 	);
 };
 
diff --git a/src/components/AuthenticatedNavBar.tsx b/src/components/AuthenticatedNavBar.tsx
index 6441ee5..9bec6ac 100644
--- a/src/components/AuthenticatedNavBar.tsx
+++ b/src/components/AuthenticatedNavBar.tsx
@@ -1,28 +1,37 @@
 import React from "react";
 import { NavLink } from "react-router-dom";
 import { SignOutButton } from "../api";
+import Navbar from "react-bootstrap/Navbar";
+import Container from "react-bootstrap/Container";
+import Nav from "react-bootstrap/Nav";
 
 import "./AuthenticatedNavBar.css";
 
 export function AuthenticatedNavBar() {
 	return (
-		<nav className="Nav">
-			<div className="Nav-container">
+		<Navbar expand="lg" fixed="bottom" className="Nav">
+			<Container className="d-flex justify-content-around Nav-container">
 				<SignOutButton />
-				<NavLink to="/" className="Nav-link" aria-label="Home">
+				<Nav.Link as={NavLink} to="/" className="Nav-link" aria-label="Home">
 					Home
-				</NavLink>
-				<NavLink to="/list" className="Nav-link" aria-label="List">
+				</Nav.Link>
+				<Nav.Link
+					as={NavLink}
+					to="/list"
+					className="Nav-link"
+					aria-label="List"
+				>
 					List
-				</NavLink>
-				<NavLink
+				</Nav.Link>
+				<Nav.Link
+					as={NavLink}
 					to="/manage-list"
 					className="Nav-link"
 					aria-label="Manage List"
 				>
 					Manage List
-				</NavLink>
-			</div>
-		</nav>
+				</Nav.Link>
+			</Container>
+		</Navbar>
 	);
 }
diff --git a/src/components/CreateList.tsx b/src/components/CreateList.tsx
index 6ff970e..edb93a0 100644
--- a/src/components/CreateList.tsx
+++ b/src/components/CreateList.tsx
@@ -2,6 +2,9 @@ import { ChangeEvent, FormEvent, useState } from "react";
 import { createList, User } from "../api";
 import { useNavigate } from "react-router-dom";
 import toast from "react-hot-toast";
+import Button from "react-bootstrap/Button";
+import Form from "react-bootstrap/Form";
+import InputGroup from "react-bootstrap/InputGroup";
 
 interface Props {
 	user: User;
@@ -42,25 +45,23 @@ export function CreateList({ user, setListPath }: Props) {
 	};
 
 	return (
-		<>
-			<li>
-				<form onSubmit={handleSubmit}>
-					<h3>Create New Shopping List</h3>
-					<label htmlFor="newListName">Name Your List</label>
-					<br />
-					<input
-						type="text"
-						value={inputValue}
-						onChange={handleChange}
-						name="newListName"
-						id="newListName"
-						aria-label="Shopping List Name"
-						aria-required="true" // Indicates that this field is required
-					/>
-					<br />
-					<button aria-label="Create new shopping list">Create List</button>
-				</form>
-			</li>
-		</>
+		<Form onSubmit={handleSubmit}>
+			<h3>Create New Shopping List</h3>
+			<Form.Label htmlFor="newListName">Name Your List</Form.Label>
+			<InputGroup>
+				<br />
+				<Form.Control
+					type="text"
+					value={inputValue}
+					onChange={handleChange}
+					name="newListName"
+					id="newListName"
+					aria-label="Shopping List Name"
+					aria-required="true" // Indicates that this field is required
+				/>
+				<br />
+				<Button aria-label="Create new shopping list">Create List</Button>
+			</InputGroup>
+		</Form>
 	);
 }
diff --git a/src/components/FilterListInput.tsx b/src/components/FilterListInput.tsx
index 6ebe5ef..bed95fa 100644
--- a/src/components/FilterListInput.tsx
+++ b/src/components/FilterListInput.tsx
@@ -1,4 +1,7 @@
 import { ChangeEvent, FormEvent } from "react";
+import Button from "react-bootstrap/Button";
+import Form from "react-bootstrap/Form";
+import InputGroup from "react-bootstrap/InputGroup";
 
 interface FilterListProps {
 	searchTerm: string;
@@ -17,19 +20,24 @@ export function FilterListInput({
 		e.preventDefault();
 	};
 
+	const handleClear = () => {
+		setSearchTerm("");
+	};
+
 	return (
-		<form onSubmit={handleSubmit}>
-			<label htmlFor="filterList">
-				Filter List:
-				<input
-					type="search"
+		<Form onSubmit={handleSubmit}>
+			<InputGroup>
+				<Form.Label htmlFor="filterList">Filter List:</Form.Label>
+				<Form.Control
+					type="text"
 					onChange={handleChange}
 					value={searchTerm}
 					id="filterList"
 					aria-label="Filter items in the list"
 					placeholder="Search items..."
 				/>
-			</label>
-		</form>
+				<Button onClick={handleClear}>x</Button>
+			</InputGroup>
+		</Form>
 	);
 }
diff --git a/src/components/ListItem.tsx b/src/components/ListItem.tsx
index 6520e95..7f72aab 100644
--- a/src/components/ListItem.tsx
+++ b/src/components/ListItem.tsx
@@ -3,6 +3,8 @@ import { updateItem, deleteItem, ListItem } from "../api";
 import { useState } from "react";
 import toast from "react-hot-toast";
 import { moreThan24HoursPassed, getDaysBetweenDates } from "../utils";
+import Button from "react-bootstrap/Button";
+import Form from "react-bootstrap/Form";
 
 interface Props {
 	item: ListItem;
@@ -97,24 +99,22 @@ export function ListItemCheckBox({ item, listPath }: Props) {
 
 	return (
 		<div className="ListItem">
-			<label htmlFor={`checkbox-${item.id}`}>
-				<input
-					type="checkbox"
-					id={`checkbox-${item.id}`}
-					aria-label={`Mark ${item.name} as purchased.`}
-					value={item.id}
-					checked={isChecked}
-					onChange={handleCheckChange}
-					aria-checked={isChecked}
-					disabled={isChecked}
-				/>
-				{item.name}
-			</label>
+			<Form.Check
+				type="checkbox"
+				id={`checkbox-${item.id}`}
+				aria-label={`Mark ${item.name} as purchased.`}
+				value={item.id}
+				checked={isChecked}
+				onChange={handleCheckChange}
+				aria-checked={isChecked}
+				disabled={isChecked}
+				label={item.name}
+			/>
 
 			<span>
 				{getUrgencyStatus(item)}
 
-				<button onClick={() => deleteItemHandler()}>Delete Item</button>
+				<Button onClick={() => deleteItemHandler()}>Delete Item</Button>
 			</span>
 		</div>
 	);
diff --git a/src/components/SingleList.tsx b/src/components/SingleList.tsx
index a195d4c..4767c48 100644
--- a/src/components/SingleList.tsx
+++ b/src/components/SingleList.tsx
@@ -1,7 +1,8 @@
-import './SingleList.css';
-import * as api from '../api/firebase';
+import "./SingleList.css";
+import * as api from "../api/firebase";
+import Button from "react-bootstrap/Button";
 
-interface Props extends Pick<api.List, 'name' | 'path'> {
+interface Props extends Pick<api.List, "name" | "path"> {
 	setListPath: (path: string) => void;
 }
 
@@ -12,7 +13,7 @@ export function SingleList({ name, path, setListPath }: Props) {
 
 	return (
 		<li className="SingleList">
-			<button onClick={handleClick}>{name}</button>
+			<Button onClick={handleClick}>{name}</Button>
 		</li>
 	);
 }
diff --git a/src/components/forms/AddItemForm.tsx b/src/components/forms/AddItemForm.tsx
index 59d17cb..c438066 100644
--- a/src/components/forms/AddItemForm.tsx
+++ b/src/components/forms/AddItemForm.tsx
@@ -2,6 +2,8 @@ import { ChangeEvent, FormEvent, useState } from "react";
 import { addItem, ListItem } from "../../api";
 import { validateItemName } from "../../utils";
 import toast from "react-hot-toast";
+import Button from "react-bootstrap/Button";
+import Form from "react-bootstrap/Form";
 
 import { useNavigate } from "react-router-dom";
 
@@ -90,73 +92,80 @@ export function AddItemForm({ listPath, data: unfilteredListItems }: Props) {
 
 	return (
 		<section>
-			<form onSubmit={(e) => handleSubmit(e, listPath)}>
-				<h3>First, add your item!</h3>
-				<label htmlFor="item-name">
-					Item:
-					<input
-						id="item-name"
-						type="text"
-						name="item"
-						value={itemName}
-						onChange={handleItemNameTextChange}
-						aria-label="Enter the item name"
-						aria-required
-					/>
-				</label>
-				<br />
-				<h3>Next, pick when you plan on buying this item again!</h3>
-				<fieldset>
-					<legend>When to buy:</legend>
-					<label htmlFor={PurchaseTime.soon}>
-						<input
-							type="radio"
-							id={PurchaseTime.soon}
-							name="when-to-buy"
-							value={PurchaseTime.soon}
-							required
-							onChange={() => handleNextPurchaseChange(PurchaseTime.soon)}
-							checked={itemNextPurchaseTimeline === PurchaseTime.soon}
-							aria-label={`Set buy to soon, within ${purchaseTimelines[PurchaseTime.soon]} days`}
+			{listPath && (
+				<>
+					<Form onSubmit={(e) => handleSubmit(e, listPath)}>
+						<h3>First, add your item!</h3>
+						<Form.Label htmlFor="item-name">Item:</Form.Label>
+						<Form.Control
+							id="item-name"
+							type="text"
+							name="item"
+							value={itemName}
+							onChange={handleItemNameTextChange}
+							aria-label="Enter the item name"
+							aria-required
 						/>
-						Soon -- Within {purchaseTimelines[PurchaseTime.soon]} days!
-					</label>
-					<br />
-					<label htmlFor={PurchaseTime.kindOfSoon}>
-						<input
-							type="radio"
-							id={PurchaseTime.kindOfSoon}
-							name="when-to-buy"
-							value={PurchaseTime.kindOfSoon}
-							required
-							onChange={() => handleNextPurchaseChange(PurchaseTime.kindOfSoon)}
-							checked={itemNextPurchaseTimeline === PurchaseTime.kindOfSoon}
-							aria-label={`Set buy to kind of soon, within ${purchaseTimelines[PurchaseTime.kindOfSoon]} days`}
-						/>
-						Kind of soon -- Within {purchaseTimelines[PurchaseTime.kindOfSoon]}{" "}
-						days!
-					</label>
-					<br />
-					<label htmlFor={PurchaseTime.notSoon}>
-						<input
-							type="radio"
-							id={PurchaseTime.notSoon}
-							name="when-to-buy"
-							value={PurchaseTime.notSoon}
-							required
-							onChange={() => handleNextPurchaseChange(PurchaseTime.notSoon)}
-							checked={itemNextPurchaseTimeline === PurchaseTime.notSoon}
-							aria-label={`Set buy to not soon, within ${purchaseTimelines[PurchaseTime.notSoon]} days`}
-						/>
-						Not soon -- Within {purchaseTimelines[PurchaseTime.notSoon]} days!
-					</label>
-				</fieldset>
-				<button type="submit" aria-label="Add item to shopping list">
-					Submit Item
-				</button>
-			</form>
-			<h4>Let&apos;s go look at your list!</h4>
-			<button onClick={navigateToListPage}>{"View List"}</button>
+						<br />
+						<h3>Next, pick when you plan on buying this item again!</h3>
+						<fieldset className="border border-2 rounded-1 p-2 mb-4">
+							<legend className="fs-2 float-none w-auto p-2">
+								When to buy:
+							</legend>
+							<Form.Check
+								type="radio"
+								className="mb-3 ms-3"
+								id={PurchaseTime.soon}
+								name="when-to-buy"
+								value={PurchaseTime.soon}
+								required
+								onChange={() => handleNextPurchaseChange(PurchaseTime.soon)}
+								checked={itemNextPurchaseTimeline === PurchaseTime.soon}
+								aria-label={`Set buy to soon, within ${purchaseTimelines[PurchaseTime.soon]} days`}
+								label={`Soon -- Within ${purchaseTimelines[PurchaseTime.soon]} days!`}
+							/>
+							<Form.Check
+								type="radio"
+								className="mb-3 ms-3"
+								id={PurchaseTime.kindOfSoon}
+								name="when-to-buy"
+								value={PurchaseTime.kindOfSoon}
+								required
+								onChange={() =>
+									handleNextPurchaseChange(PurchaseTime.kindOfSoon)
+								}
+								checked={itemNextPurchaseTimeline === PurchaseTime.kindOfSoon}
+								aria-label={`Set buy to kind of soon, within ${purchaseTimelines[PurchaseTime.kindOfSoon]} days`}
+								label={`Kind of soon -- Within
+											${purchaseTimelines[PurchaseTime.kindOfSoon]} days!`}
+							/>
+							<Form.Check
+								type="radio"
+								className="mb-3 ms-3"
+								id={PurchaseTime.notSoon}
+								name="when-to-buy"
+								value={PurchaseTime.notSoon}
+								required
+								onChange={() => handleNextPurchaseChange(PurchaseTime.notSoon)}
+								checked={itemNextPurchaseTimeline === PurchaseTime.notSoon}
+								aria-label={`Set buy to not soon, within ${purchaseTimelines[PurchaseTime.notSoon]} days`}
+								label={`Not soon -- Within ${purchaseTimelines[PurchaseTime.notSoon]} days!`}
+							/>
+						</fieldset>
+						<Button
+							type="submit"
+							aria-label="Add item to shopping list"
+							className="mb-3"
+						>
+							Submit Item
+						</Button>
+					</Form>
+					<h4>Let&apos;s go look at your list!</h4>
+					<Button onClick={navigateToListPage} className="my-3">
+						{"View List"}
+					</Button>
+				</>
+			)}
 		</section>
 	);
 }
diff --git a/src/components/forms/ShareListForm.tsx b/src/components/forms/ShareListForm.tsx
index e6462c7..6b87be5 100644
--- a/src/components/forms/ShareListForm.tsx
+++ b/src/components/forms/ShareListForm.tsx
@@ -1,6 +1,9 @@
 import { ChangeEvent, FormEvent, useState } from "react";
 import { shareList } from "../../api";
 import { getUser } from "../ProtectedRoute";
+import Button from "react-bootstrap/Button";
+import Form from "react-bootstrap/Form";
+import { InputGroup } from "react-bootstrap";
 
 import toast from "react-hot-toast";
 
@@ -40,10 +43,10 @@ const ShareListForm = ({ listPath }: Props) => {
 	};
 
 	return (
-		<form onSubmit={(e) => handleInvite(e, listPath)}>
-			<label htmlFor="recipient-email">
-				Recipient Email:
-				<input
+		<Form onSubmit={(e) => handleInvite(e, listPath)}>
+			<Form.Label htmlFor="recipient-email">Recipient Email:</Form.Label>
+			<InputGroup>
+				<Form.Control
 					id="recipient-email"
 					type="email"
 					name="recipient-email"
@@ -54,12 +57,11 @@ const ShareListForm = ({ listPath }: Props) => {
 					aria-label="Enter the user email address to share list"
 					aria-required
 				/>
-			</label>
-			<br />
-			<button type="submit" aria-label="submits form to share shopping list">
-				Invite User
-			</button>
-		</form>
+				<Button type="submit" aria-label="submits form to share shopping list">
+					Invite User
+				</Button>
+			</InputGroup>
+		</Form>
 	);
 };
 
diff --git a/src/index.tsx b/src/index.tsx
index bdf1e7d..d65630e 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -3,6 +3,7 @@ import { createRoot } from "react-dom/client";
 import { BrowserRouter as Router } from "react-router-dom";
 import { App } from "./App";
 
+import "bootstrap/dist/css/bootstrap.min.css";
 import "./index.css";
 
 const root = createRoot(document.getElementById("root") as HTMLElement);
diff --git a/src/views/Layout.tsx b/src/views/Layout.tsx
index 0a65806..ddd2fca 100644
--- a/src/views/Layout.tsx
+++ b/src/views/Layout.tsx
@@ -11,17 +11,15 @@ interface Props {
 
 export function Layout({ user }: Props) {
 	return (
-		<>
-			<div className="Layout">
-				<header className="Layout-header">
-					<h1>Smart shopping list</h1>
-				</header>
-				<main className="Layout-main">
-					<Outlet />
-					{!user && <SignInButton />}
-				</main>
-				{user && <AuthenticatedNavBar />}
-			</div>
-		</>
+		<div className="Layout vh-100">
+			<header className="Layout-header">
+				<h1>Smart shopping list</h1>
+			</header>
+			<main className="Layout-main overflow-scroll">
+				<Outlet />
+				{!user && <SignInButton />}
+			</main>
+			{user && <AuthenticatedNavBar />}
+		</div>
 	);
 }
diff --git a/src/views/authenticated/List.tsx b/src/views/authenticated/List.tsx
index b48a442..0df89e1 100644
--- a/src/views/authenticated/List.tsx
+++ b/src/views/authenticated/List.tsx
@@ -3,6 +3,7 @@ import { ListItemCheckBox } from "../../components/ListItem";
 import { FilterListInput } from "../../components/FilterListInput";
 import { ListItem, comparePurchaseUrgency } from "../../api";
 import { useNavigate } from "react-router-dom";
+import Button from "react-bootstrap/Button";
 
 interface Props {
 	data: ListItem[];
@@ -44,12 +45,12 @@ export function List({ data: unfilteredListItems, listPath }: Props) {
 						<br />
 						Let’s get started by adding your first item!
 					</h3>
-					<button
+					<Button
 						onClick={() => navigate("/manage-list")}
 						aria-label="Start adding items to your list"
 					>
 						{"Get started!"}
-					</button>
+					</Button>
 				</section>
 			</>
 		);
@@ -59,26 +60,27 @@ export function List({ data: unfilteredListItems, listPath }: Props) {
 	return (
 		<>
 			<Header />
-			<div>
-				<section>
-					{unfilteredListItems.length > 0 && (
-						<FilterListInput
-							searchTerm={searchTerm}
-							setSearchTerm={setSearchTerm}
-						/>
-					)}
-					<h3>Want to add more items to your list?</h3>
-					<button
-						onClick={() => navigate("/manage-list")}
-						aria-label="Navigate to add more items to your list"
-					>
-						{"Add items"}
-					</button>
-				</section>
+
+			<section className="sticky-top bg-dark">
+				{unfilteredListItems.length > 0 && (
+					<FilterListInput
+						searchTerm={searchTerm}
+						setSearchTerm={setSearchTerm}
+					/>
+				)}
+				<h3>Want to add more items to your list?</h3>
+				<Button
+					onClick={() => navigate("/manage-list")}
+					aria-label="Navigate to add more items to your list"
+				>
+					{"Add items"}
+				</Button>
+			</section>
+			<section>
 				{filteredListItems.map((item) => (
 					<ListItemCheckBox key={item.id} item={item} listPath={listPath} />
 				))}
-			</div>
+			</section>
 		</>
 	);
 }

From a97e76bebf65e3183e8d9b0dc3ff3496d440a564 Mon Sep 17 00:00:00 2001
From: Brianna <104288486+bbland1@users.noreply.github.com>
Date: Sun, 29 Sep 2024 21:18:24 -0400
Subject: [PATCH 8/8] A way for an new user to understand how the app functions
 (#41)

* feat: adding sample list route & page

* mod: change SampleList to about

* mod: a text version/skeleton of the about page of the application

* feat: added an unauthenticated home context with way to navigate to about page with button

* feat: added unauthenticated nav bar for another option on getting to about page

* feat: added links for app creators

* fix: fixed a few typos and add name to the place holder

* feat: created Authenticated/Unauthenticated home components

* feat: update vite config to utilize the svgr plugin for the svg logo used on about

* feat: making it so the sign in button can change the value in the label based on if needs to sign  up or in

* feat: added links to mentors and added link to the collab lab

* fix: removed bullet point from the create list form label

* fix: fixing some buttons and styling issues weird messed up in resolving merge conflicts

* fix: fixing the new UnauthenticatedNavBar to use the correct bootstrap comp since didn't get them in conflict resolve

* fix: if signing up or out from about page properly redirects to home page since it is not a protected route it was just staying on about

* mod: added name to layout

* fix: scroll bars on bottom of all pages because the page wasn't extend to the view fully and they were always showing
---
 index.html                                    |   2 +-
 src/App.tsx                                   |   6 +-
 src/api/useAuth.tsx                           |  62 +++++++--
 src/components/CreateList.tsx                 |  38 +++---
 .../{AuthenticatedNavBar.css => NavBar.css}   |   0
 .../AuthenticatedNavBar.tsx                   |   4 +-
 src/components/index.ts                       |   3 +-
 .../unauthenticated/UnauthenticatedNavBar.tsx |  27 ++++
 src/icons/GithubLogo.svg                      |  10 ++
 src/icons/LinkedInLogo.svg                    |  10 ++
 src/views/Home.tsx                            |  27 +---
 src/views/Layout.tsx                          |  38 ++++--
 src/views/authenticated/AuthenticatedHome.tsx |  34 +++++
 src/views/index.ts                            |   3 +
 src/views/unauthenticated/About.tsx           | 123 ++++++++++++++++++
 .../unauthenticated/UnauthenticatedHome.tsx   |  37 ++++++
 vite.config.js                                |   5 +-
 17 files changed, 360 insertions(+), 69 deletions(-)
 rename src/components/{AuthenticatedNavBar.css => NavBar.css} (100%)
 rename src/components/{ => authenticated}/AuthenticatedNavBar.tsx (91%)
 create mode 100644 src/components/unauthenticated/UnauthenticatedNavBar.tsx
 create mode 100644 src/icons/GithubLogo.svg
 create mode 100644 src/icons/LinkedInLogo.svg
 create mode 100644 src/views/authenticated/AuthenticatedHome.tsx
 create mode 100644 src/views/unauthenticated/About.tsx
 create mode 100644 src/views/unauthenticated/UnauthenticatedHome.tsx

diff --git a/index.html b/index.html
index 830eb28..b8b10cd 100644
--- a/index.html
+++ b/index.html
@@ -18,7 +18,7 @@
 			crossorigin="anonymous"
 		/>
 		<meta name="color-scheme" content="dark light" />
-		<title>Smart Shopping List</title>
+		<title>GrocerEase</title>
 		<script type="module" src="/src/index.tsx" async></script>
 	</head>
 	<body>
diff --git a/src/App.tsx b/src/App.tsx
index 2b4f35f..5ac74d9 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,8 +1,10 @@
+/// <reference types="vite-plugin-svgr/client" />
+
 import React from "react";
 
 import { Routes, Route } from "react-router-dom";
 
-import { Home, Layout, List, ManageList, PageNotFound } from "./views";
+import { Home, Layout, List, ManageList, PageNotFound, About } from "./views";
 
 import { useFindUser, useShoppingListData, useShoppingLists } from "./api";
 
@@ -74,6 +76,8 @@ export function App() {
 						/>
 					</Route>
 
+					<Route path="/about" element={<About />}></Route>
+
 					{/* a catch all route for if someone tries to manually navigate to something not created yet */}
 					<Route path="*" element={<PageNotFound />} />
 				</Route>
diff --git a/src/api/useAuth.tsx b/src/api/useAuth.tsx
index 2ff0b27..172b4bb 100644
--- a/src/api/useAuth.tsx
+++ b/src/api/useAuth.tsx
@@ -4,34 +4,72 @@ import { GoogleAuthProvider, signInWithPopup } from "firebase/auth";
 import { addUserToDatabase, User } from "./firebase";
 import toast from "react-hot-toast";
 import Button from "react-bootstrap/Button";
+import { useLocation, useNavigate } from "react-router-dom";
 
 /**
  * A button that signs the user in using Google OAuth. When clicked,
  * the button redirects the user to the Google OAuth sign-in page.
  * After the user signs in, they are redirected back to the app.
  */
-export const SignInButton = () => (
-	<Button
-		type="button"
-		onClick={() => signInWithPopup(auth, new GoogleAuthProvider())}
-	>
-		Sign In
-	</Button>
-);
+
+type SignInButtonProps = {
+	isSignIn?: boolean;
+};
+
+export const SignInButton = ({ isSignIn = true }: SignInButtonProps) => {
+	const location = useLocation();
+	const navigate = useNavigate();
+
+	return (
+		<Button
+			type="button"
+			onClick={() => {
+				signInWithPopup(auth, new GoogleAuthProvider())
+					.then(() => {
+						if (location.pathname === "/about") {
+							navigate("/");
+						}
+					})
+					.catch((error) => {
+						console.error(error);
+						toast.error(
+							"An error occurred while signing in. Please try again.",
+						);
+					});
+			}}
+			className="m-2"
+		>
+			{isSignIn ? "Sign In" : "Sign Up"}
+		</Button>
+	);
+};
 
 /**
  * A button that signs the user out of the app using Firebase Auth.
  */
 export const SignOutButton = () => {
+	const location = useLocation();
+	const navigate = useNavigate();
+
 	return (
 		<Button
 			type="button"
 			onClick={() => {
-				auth.signOut().catch((error) => {
-					console.error(error);
-					toast.error("An error occurred while signing out. Please try again.");
-				});
+				auth
+					.signOut()
+					.then(() => {
+						if (location.pathname === "/about") {
+							navigate("/");
+						}
+					})
+					.catch((error) => {
+						console.error(error);
+						toast.error(
+							"An error occurred while signing out. Please try again.",
+						);
+					});
 			}}
+			className="m-2"
 		>
 			Sign Out
 		</Button>
diff --git a/src/components/CreateList.tsx b/src/components/CreateList.tsx
index edb93a0..27d641b 100644
--- a/src/components/CreateList.tsx
+++ b/src/components/CreateList.tsx
@@ -45,23 +45,25 @@ export function CreateList({ user, setListPath }: Props) {
 	};
 
 	return (
-		<Form onSubmit={handleSubmit}>
-			<h3>Create New Shopping List</h3>
-			<Form.Label htmlFor="newListName">Name Your List</Form.Label>
-			<InputGroup>
-				<br />
-				<Form.Control
-					type="text"
-					value={inputValue}
-					onChange={handleChange}
-					name="newListName"
-					id="newListName"
-					aria-label="Shopping List Name"
-					aria-required="true" // Indicates that this field is required
-				/>
-				<br />
-				<Button aria-label="Create new shopping list">Create List</Button>
-			</InputGroup>
-		</Form>
+		<>
+			<Form onSubmit={handleSubmit}>
+				<h3>Create New Shopping List</h3>
+				<Form.Label htmlFor="newListName">Name Your List</Form.Label>
+				<InputGroup>
+					<br />
+					<Form.Control
+						type="text"
+						value={inputValue}
+						onChange={handleChange}
+						name="newListName"
+						id="newListName"
+						aria-label="Shopping List Name"
+						aria-required="true" // Indicates that this field is required
+					/>
+					<br />
+					<Button aria-label="Create new shopping list">Create List</Button>
+				</InputGroup>
+			</Form>
+		</>
 	);
 }
diff --git a/src/components/AuthenticatedNavBar.css b/src/components/NavBar.css
similarity index 100%
rename from src/components/AuthenticatedNavBar.css
rename to src/components/NavBar.css
diff --git a/src/components/AuthenticatedNavBar.tsx b/src/components/authenticated/AuthenticatedNavBar.tsx
similarity index 91%
rename from src/components/AuthenticatedNavBar.tsx
rename to src/components/authenticated/AuthenticatedNavBar.tsx
index 9bec6ac..735c206 100644
--- a/src/components/AuthenticatedNavBar.tsx
+++ b/src/components/authenticated/AuthenticatedNavBar.tsx
@@ -1,11 +1,11 @@
 import React from "react";
 import { NavLink } from "react-router-dom";
-import { SignOutButton } from "../api";
+import { SignOutButton } from "../../api";
 import Navbar from "react-bootstrap/Navbar";
 import Container from "react-bootstrap/Container";
 import Nav from "react-bootstrap/Nav";
 
-import "./AuthenticatedNavBar.css";
+import "../NavBar.css";
 
 export function AuthenticatedNavBar() {
 	return (
diff --git a/src/components/index.ts b/src/components/index.ts
index 50121f3..73f3d4b 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -2,5 +2,6 @@ export * from "./ListItem";
 export * from "./SingleList";
 export * from "./CreateList";
 export * from "./ProtectedRoute";
-export * from "./AuthenticatedNavBar";
+export * from "./authenticated/AuthenticatedNavBar";
 export * from "./forms/ShareListForm";
+export * from "./unauthenticated/UnauthenticatedNavBar";
diff --git a/src/components/unauthenticated/UnauthenticatedNavBar.tsx b/src/components/unauthenticated/UnauthenticatedNavBar.tsx
new file mode 100644
index 0000000..056ea79
--- /dev/null
+++ b/src/components/unauthenticated/UnauthenticatedNavBar.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import { NavLink } from "react-router-dom";
+import Navbar from "react-bootstrap/Navbar";
+import Container from "react-bootstrap/Container";
+import Nav from "react-bootstrap/Nav";
+
+import "../NavBar.css";
+
+export function UnauthenticatedNavBar() {
+	return (
+		<Navbar expand="lg" fixed="bottom" className="Nav">
+			<Container className="d-flex justify-content-around Nav-container">
+				<Nav.Link as={NavLink} to="/" className="Nav-link" aria-label="Home">
+					Home
+				</Nav.Link>
+				<Nav.Link
+					as={NavLink}
+					to="/about"
+					className="Nav-link"
+					aria-label="About"
+				>
+					About
+				</Nav.Link>
+			</Container>
+		</Navbar>
+	);
+}
diff --git a/src/icons/GithubLogo.svg b/src/icons/GithubLogo.svg
new file mode 100644
index 0000000..631c5d4
--- /dev/null
+++ b/src/icons/GithubLogo.svg
@@ -0,0 +1,10 @@
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							x="0px"
+							y="0px"
+							width="35"
+							height="35"
+							viewBox="0 0 50 50"
+						>
+							<path d="M 25 2 C 12.311335 2 2 12.311335 2 25 C 2 37.688665 12.311335 48 25 48 C 37.688665 48 48 37.688665 48 25 C 48 12.311335 37.688665 2 25 2 z M 25 4 C 36.607335 4 46 13.392665 46 25 C 46 25.071371 45.994849 25.141688 45.994141 25.212891 C 45.354527 25.153853 44.615508 25.097776 43.675781 25.064453 C 42.347063 25.017336 40.672259 25.030987 38.773438 25.125 C 38.843852 24.634651 38.893205 24.137377 38.894531 23.626953 C 38.991361 21.754332 38.362521 20.002464 37.339844 18.455078 C 37.586913 17.601352 37.876747 16.515218 37.949219 15.283203 C 38.031819 13.878925 37.910599 12.321765 36.783203 11.269531 L 36.494141 11 L 36.099609 11 C 33.416539 11 31.580023 12.12321 30.457031 13.013672 C 28.835529 12.386022 27.01222 12 25 12 C 22.976367 12 21.135525 12.391416 19.447266 13.017578 C 18.324911 12.126691 16.486785 11 13.800781 11 L 13.408203 11 L 13.119141 11.267578 C 12.020956 12.287321 11.919778 13.801759 11.988281 15.199219 C 12.048691 16.431506 12.321732 17.552142 12.564453 18.447266 C 11.524489 20.02486 10.900391 21.822018 10.900391 23.599609 C 10.900391 24.111237 10.947969 24.610071 11.017578 25.101562 C 9.2118173 25.017808 7.6020996 25.001668 6.3242188 25.046875 C 5.3845143 25.080118 4.6454422 25.135713 4.0058594 25.195312 C 4.0052628 25.129972 4 25.065482 4 25 C 4 13.392665 13.392665 4 25 4 z M 14.396484 13.130859 C 16.414067 13.322043 17.931995 14.222972 18.634766 14.847656 L 19.103516 15.261719 L 19.681641 15.025391 C 21.263092 14.374205 23.026984 14 25 14 C 26.973016 14 28.737393 14.376076 30.199219 15.015625 L 30.785156 15.273438 L 31.263672 14.847656 C 31.966683 14.222758 33.487184 13.321554 35.505859 13.130859 C 35.774256 13.575841 36.007486 14.208668 35.951172 15.166016 C 35.883772 16.311737 35.577304 17.559658 35.345703 18.300781 L 35.195312 18.783203 L 35.494141 19.191406 C 36.483616 20.540691 36.988121 22.000937 36.902344 23.544922 L 36.900391 23.572266 L 36.900391 23.599609 C 36.900391 26.095064 36.00178 28.092339 34.087891 29.572266 C 32.174048 31.052199 29.152663 32 24.900391 32 C 20.648118 32 17.624827 31.052192 15.710938 29.572266 C 13.797047 28.092339 12.900391 26.095064 12.900391 23.599609 C 12.900391 22.134903 13.429308 20.523599 14.40625 19.191406 L 14.699219 18.792969 L 14.558594 18.318359 C 14.326866 17.530484 14.042825 16.254103 13.986328 15.101562 C 13.939338 14.14294 14.166221 13.537027 14.396484 13.130859 z M 8.8847656 26.021484 C 9.5914575 26.03051 10.40146 26.068656 11.212891 26.109375 C 11.290419 26.421172 11.378822 26.727898 11.486328 27.027344 C 8.178972 27.097092 5.7047309 27.429674 4.1796875 27.714844 C 4.1152068 27.214494 4.0638483 26.710021 4.0351562 26.199219 C 5.1622058 26.092262 6.7509972 25.994233 8.8847656 26.021484 z M 41.115234 26.037109 C 43.247527 26.010033 44.835728 26.108156 45.962891 26.214844 C 45.934234 26.718328 45.883749 27.215664 45.820312 27.708984 C 44.24077 27.41921 41.699674 27.086688 38.306641 27.033203 C 38.411945 26.739677 38.499627 26.438219 38.576172 26.132812 C 39.471291 26.084833 40.344564 26.046896 41.115234 26.037109 z M 11.912109 28.019531 C 12.508849 29.215327 13.361516 30.283019 14.488281 31.154297 C 16.028825 32.345531 18.031623 33.177838 20.476562 33.623047 C 20.156699 33.951698 19.86578 34.312595 19.607422 34.693359 L 19.546875 34.640625 C 19.552375 34.634325 19.04975 34.885878 18.298828 34.953125 C 17.547906 35.020374 16.621615 35 15.800781 35 C 14.575781 35 14.03621 34.42121 13.173828 33.367188 C 12.696283 32.72356 12.114101 32.202331 11.548828 31.806641 C 10.970021 31.401475 10.476259 31.115509 9.8652344 31.013672 L 9.7832031 31 L 9.6992188 31 C 9.2325521 31 8.7809835 31.03379 8.359375 31.515625 C 8.1485707 31.756544 8.003277 32.202561 8.0976562 32.580078 C 8.1920352 32.957595 8.4308563 33.189581 8.6445312 33.332031 C 10.011254 34.24318 10.252795 36.046511 11.109375 37.650391 C 11.909298 39.244315 13.635662 40 15.400391 40 L 18 40 L 18 44.802734 C 10.967811 42.320535 5.6646795 36.204613 4.3320312 28.703125 C 5.8629338 28.414776 8.4265387 28.068108 11.912109 28.019531 z M 37.882812 28.027344 C 41.445538 28.05784 44.08105 28.404061 45.669922 28.697266 C 44.339047 36.201504 39.034072 42.31987 32 44.802734 L 32 39.599609 C 32 38.015041 31.479642 36.267712 30.574219 34.810547 C 30.299322 34.368135 29.975945 33.949736 29.615234 33.574219 C 31.930453 33.11684 33.832364 32.298821 35.3125 31.154297 C 36.436824 30.284907 37.287588 29.220424 37.882812 28.027344 z M 23.699219 34.099609 L 26.5 34.099609 C 27.312821 34.099609 28.180423 34.7474 28.875 35.865234 C 29.569577 36.983069 30 38.484177 30 39.599609 L 30 45.398438 C 28.397408 45.789234 26.72379 46 25 46 C 23.27621 46 21.602592 45.789234 20 45.398438 L 20 39.599609 C 20 38.508869 20.467828 37.011307 21.208984 35.888672 C 21.950141 34.766037 22.886398 34.099609 23.699219 34.099609 z M 12.308594 35.28125 C 13.174368 36.179258 14.222525 37 15.800781 37 C 16.579948 37 17.552484 37.028073 18.476562 36.945312 C 18.479848 36.945018 18.483042 36.943654 18.486328 36.943359 C 18.36458 37.293361 18.273744 37.645529 18.197266 38 L 15.400391 38 C 14.167057 38 13.29577 37.55443 12.894531 36.751953 L 12.886719 36.738281 L 12.880859 36.726562 C 12.716457 36.421191 12.500645 35.81059 12.308594 35.28125 z"></path>
+						</svg>
\ No newline at end of file
diff --git a/src/icons/LinkedInLogo.svg b/src/icons/LinkedInLogo.svg
new file mode 100644
index 0000000..2d42e98
--- /dev/null
+++ b/src/icons/LinkedInLogo.svg
@@ -0,0 +1,10 @@
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							x="0px"
+							y="0px"
+							width="35"
+							height="35"
+							viewBox="0 0 50 50"
+						>
+							<path d="M 9 4 C 6.2504839 4 4 6.2504839 4 9 L 4 41 C 4 43.749516 6.2504839 46 9 46 L 41 46 C 43.749516 46 46 43.749516 46 41 L 46 9 C 46 6.2504839 43.749516 4 41 4 L 9 4 z M 9 6 L 41 6 C 42.668484 6 44 7.3315161 44 9 L 44 41 C 44 42.668484 42.668484 44 41 44 L 9 44 C 7.3315161 44 6 42.668484 6 41 L 6 9 C 6 7.3315161 7.3315161 6 9 6 z M 14 11.011719 C 12.904779 11.011719 11.919219 11.339079 11.189453 11.953125 C 10.459687 12.567171 10.011719 13.484511 10.011719 14.466797 C 10.011719 16.333977 11.631285 17.789609 13.691406 17.933594 A 0.98809878 0.98809878 0 0 0 13.695312 17.935547 A 0.98809878 0.98809878 0 0 0 14 17.988281 C 16.27301 17.988281 17.988281 16.396083 17.988281 14.466797 A 0.98809878 0.98809878 0 0 0 17.986328 14.414062 C 17.884577 12.513831 16.190443 11.011719 14 11.011719 z M 14 12.988281 C 15.392231 12.988281 15.94197 13.610038 16.001953 14.492188 C 15.989803 15.348434 15.460091 16.011719 14 16.011719 C 12.614594 16.011719 11.988281 15.302225 11.988281 14.466797 C 11.988281 14.049083 12.140703 13.734298 12.460938 13.464844 C 12.78117 13.19539 13.295221 12.988281 14 12.988281 z M 11 19 A 1.0001 1.0001 0 0 0 10 20 L 10 39 A 1.0001 1.0001 0 0 0 11 40 L 17 40 A 1.0001 1.0001 0 0 0 18 39 L 18 33.134766 L 18 20 A 1.0001 1.0001 0 0 0 17 19 L 11 19 z M 20 19 A 1.0001 1.0001 0 0 0 19 20 L 19 39 A 1.0001 1.0001 0 0 0 20 40 L 26 40 A 1.0001 1.0001 0 0 0 27 39 L 27 29 C 27 28.170333 27.226394 27.345035 27.625 26.804688 C 28.023606 26.264339 28.526466 25.940057 29.482422 25.957031 C 30.468166 25.973981 30.989999 26.311669 31.384766 26.841797 C 31.779532 27.371924 32 28.166667 32 29 L 32 39 A 1.0001 1.0001 0 0 0 33 40 L 39 40 A 1.0001 1.0001 0 0 0 40 39 L 40 28.261719 C 40 25.300181 39.122788 22.95433 37.619141 21.367188 C 36.115493 19.780044 34.024172 19 31.8125 19 C 29.710483 19 28.110853 19.704889 27 20.423828 L 27 20 A 1.0001 1.0001 0 0 0 26 19 L 20 19 z M 12 21 L 16 21 L 16 33.134766 L 16 38 L 12 38 L 12 21 z M 21 21 L 25 21 L 25 22.560547 A 1.0001 1.0001 0 0 0 26.798828 23.162109 C 26.798828 23.162109 28.369194 21 31.8125 21 C 33.565828 21 35.069366 21.582581 36.167969 22.742188 C 37.266572 23.901794 38 25.688257 38 28.261719 L 38 38 L 34 38 L 34 29 C 34 27.833333 33.720468 26.627107 32.990234 25.646484 C 32.260001 24.665862 31.031834 23.983076 29.517578 23.957031 C 27.995534 23.930001 26.747519 24.626988 26.015625 25.619141 C 25.283731 26.611293 25 27.829667 25 29 L 25 38 L 21 38 L 21 21 z"></path>
+						</svg>
\ No newline at end of file
diff --git a/src/views/Home.tsx b/src/views/Home.tsx
index 4c46603..2c74636 100644
--- a/src/views/Home.tsx
+++ b/src/views/Home.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import "./Home.css";
-import { SingleList, CreateList } from "../components";
-import { List, User } from "../api/firebase";
+import { List, User } from "../api";
+import { AuthenticatedHome, UnauthenticatedHome } from "../views";
 
 interface Props {
 	data: List[];
@@ -12,24 +12,11 @@ interface Props {
 export function Home({ data, setListPath, user }: Props) {
 	return (
 		<>
-			<div className="Home">
-				<p>
-					Hello from the home (<code>/</code>) page!
-				</p>
-				{user && (
-					<ul>
-						{data.map((list, index) => (
-							<SingleList
-								key={index}
-								name={list.name}
-								path={list.path}
-								setListPath={setListPath}
-							/>
-						))}
-						<CreateList user={user} setListPath={setListPath} />
-					</ul>
-				)}
-			</div>
+			{user ? (
+				<AuthenticatedHome data={data} setListPath={setListPath} user={user} />
+			) : (
+				<UnauthenticatedHome />
+			)}
 		</>
 	);
 }
diff --git a/src/views/Layout.tsx b/src/views/Layout.tsx
index ddd2fca..ef4d0d2 100644
--- a/src/views/Layout.tsx
+++ b/src/views/Layout.tsx
@@ -1,7 +1,8 @@
 import React from "react";
-import { Outlet } from "react-router-dom";
-import { SignInButton, User } from "../api";
-import { AuthenticatedNavBar } from "../components";
+import { Outlet, useNavigate } from "react-router-dom";
+import { User } from "../api";
+import { AuthenticatedNavBar, UnauthenticatedNavBar } from "../components";
+import Button from "react-bootstrap/Button";
 
 import "./Layout.css";
 
@@ -10,16 +11,27 @@ interface Props {
 }
 
 export function Layout({ user }: Props) {
+	const navigate = useNavigate();
 	return (
-		<div className="Layout vh-100">
-			<header className="Layout-header">
-				<h1>Smart shopping list</h1>
-			</header>
-			<main className="Layout-main overflow-scroll">
-				<Outlet />
-				{!user && <SignInButton />}
-			</main>
-			{user && <AuthenticatedNavBar />}
-		</div>
+		<>
+			<div className="Layout vh-100">
+				<header className="Layout-header">
+					<h1>GrocerEase</h1>
+				</header>
+				<main className="Layout-main overflow-auto">
+					{user && (
+						<Button
+							onClick={() => navigate("/about")}
+							aria-label="Navigate to the about application page."
+							className="m-2"
+						>
+							about
+						</Button>
+					)}
+					<Outlet />
+				</main>
+				{user ? <AuthenticatedNavBar /> : <UnauthenticatedNavBar />}
+			</div>
+		</>
 	);
 }
diff --git a/src/views/authenticated/AuthenticatedHome.tsx b/src/views/authenticated/AuthenticatedHome.tsx
new file mode 100644
index 0000000..d3fb293
--- /dev/null
+++ b/src/views/authenticated/AuthenticatedHome.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import { SingleList, CreateList } from "../../components";
+import { List, User } from "../../api";
+
+interface Props {
+	data: List[];
+	setListPath: (path: string) => void;
+	user: User | null;
+}
+
+export function AuthenticatedHome({ data, setListPath, user }: Props) {
+	return (
+		<>
+			<p>
+				Hello from the home (<code>/</code>) page!
+			</p>
+			{user && (
+				<>
+					<ul>
+						{data.map((list, index) => (
+							<SingleList
+								key={index}
+								name={list.name}
+								path={list.path}
+								setListPath={setListPath}
+							/>
+						))}
+					</ul>
+					<CreateList user={user} setListPath={setListPath} />
+				</>
+			)}
+		</>
+	);
+}
diff --git a/src/views/index.ts b/src/views/index.ts
index 26ee7f1..e54ac8d 100644
--- a/src/views/index.ts
+++ b/src/views/index.ts
@@ -3,3 +3,6 @@ export * from "./Home";
 export * from "./Layout";
 export * from "./authenticated/List";
 export * from "./unauthenticated/PageNotFound";
+export * from "./unauthenticated/About";
+export * from "./unauthenticated/UnauthenticatedHome";
+export * from "./authenticated/AuthenticatedHome";
diff --git a/src/views/unauthenticated/About.tsx b/src/views/unauthenticated/About.tsx
new file mode 100644
index 0000000..8e6e442
--- /dev/null
+++ b/src/views/unauthenticated/About.tsx
@@ -0,0 +1,123 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import LinkedInLogo from "../../icons/LinkedInLogo.svg?react";
+import GithubLogo from "../../icons/GithubLogo.svg?react";
+import { SignInButton } from "../../api";
+
+export function About() {
+	return (
+		<div>
+			<section>
+				<h2>How it works</h2>
+				<SignInButton isSignIn={false} />
+				<ul>
+					<li>
+						Create a list for different stores or different grouping of items.
+					</li>
+					<li>Select a list that you&apos;d like to add items on.</li>
+					<li>
+						Open the list manager, to start adding items and choosing when you
+						will need to restock next.
+					</li>
+					<li>
+						Now that your new list has items you can start checking off items as
+						you shop!
+						<ul>
+							<li>
+								Each time an item is marked purchase the application evaluates
+								your shopping habits! Supporting you by adjusting your next
+								purchase predictions base on when your previous shopping
+								history!
+							</li>
+						</ul>
+					</li>
+					<li>
+						If someone else needs to be let into to the shopping time you can
+						easily share specific lists with with in the list manager so they
+						can see and mark items as purchased too!
+					</li>
+				</ul>
+			</section>
+			<section>
+				<h2>Creators</h2>
+				<div>
+					<span>Maha Ahmed</span>
+					<Link to="https://www.linkedin.com/in/maha-ahmed3/" target="_blank">
+						<LinkedInLogo width="25" height="25" />
+					</Link>
+					<Link to="https://github.com/eternalmaha" target="_blank">
+						<GithubLogo width="25" height="25" />
+					</Link>
+				</div>
+				<div>
+					<span>Brianna Bland</span>
+					<Link to="https://www.linkedin.com/in/bbland1/" target="_blank">
+						<LinkedInLogo width="25" height="25" />
+					</Link>
+					<Link to="https://github.com/bbland1" target="_blank">
+						<GithubLogo width="25" height="25" />
+					</Link>
+				</div>
+				<div>
+					<span>Falak Zahra</span>
+					<Link to="https://www.linkedin.com/in/falak-zahra/" target="_blank">
+						<LinkedInLogo width="25" height="25" />
+					</Link>
+					<Link to="https://github.com/zahrafalak" target="_blank">
+						<GithubLogo width="25" height="25" />
+					</Link>
+				</div>
+				<div>
+					<span>Ross Clettenberg</span>
+					<Link
+						to="https://www.linkedin.com/in/ross-clettenberg/"
+						target="_blank"
+					>
+						<LinkedInLogo width="25" height="25" />
+					</Link>
+					<Link to="https://github.com/RossaMania" target="_blank">
+						<GithubLogo width="25" height="25" />
+					</Link>
+				</div>
+			</section>
+			<section>
+				<h2>Thank you</h2>
+				<p>Mentors:</p>
+				<div>
+					<span>Alex D.</span>
+					<Link to="https://www.linkedin.com/in/dantonioa/" target="_blank">
+						<LinkedInLogo width="25" height="25" />
+					</Link>
+					<Link to="https://github.com/alex-andria" target="_blank">
+						<GithubLogo width="25" height="25" />
+					</Link>
+				</div>
+				<div>
+					<span>Aditya Dalal</span>
+					<Link to="https://www.linkedin.com/in/adityadalal/" target="_blank">
+						<LinkedInLogo width="25" height="25" />
+					</Link>
+					<Link to="https://github.com/adidalal" target="_blank">
+						<GithubLogo width="25" height="25" />
+					</Link>
+				</div>
+				<div>
+					<span>Tanner Gill</span>
+					<Link to="https://www.linkedin.com/in/tanner-gill/" target="_blank">
+						<LinkedInLogo width="25" height="25" />
+					</Link>
+					<Link to="https://github.com/tannaurus" target="_blank">
+						<GithubLogo width="25" height="25" />
+					</Link>
+				</div>
+				<p>
+					The entire{" "}
+					<a href="https://the-collab-lab.codes/developers/" target="_blank">
+						The Collab Lab
+					</a>
+					.
+				</p>
+			</section>
+		</div>
+	);
+}
diff --git a/src/views/unauthenticated/UnauthenticatedHome.tsx b/src/views/unauthenticated/UnauthenticatedHome.tsx
new file mode 100644
index 0000000..b23874c
--- /dev/null
+++ b/src/views/unauthenticated/UnauthenticatedHome.tsx
@@ -0,0 +1,37 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import { SignInButton } from "../../api";
+import Button from "react-bootstrap/Button";
+
+export function UnauthenticatedHome() {
+	const navigate = useNavigate();
+
+	return (
+		<div className="Home">
+			<h2>Welcome to GrocerEase</h2>
+			<p>
+				The next best thing to having someone else do the shopping for you!
+				Create and manage smart lists, while it learns your shopping habits to
+				let you know exactly when you will need to buy that next batch of toilet
+				paper!
+			</p>
+
+			<article>
+				<p>New to GrocerEase:</p>
+				<Button
+					onClick={() => navigate("/about")}
+					aria-label="Navigate to the about application page."
+					className="m-2"
+				>
+					Learn More
+				</Button>
+				<SignInButton isSignIn={false} />
+			</article>
+
+			<article>
+				<p>Welcome Back:</p>
+				<SignInButton />
+			</article>
+		</div>
+	);
+}
diff --git a/vite.config.js b/vite.config.js
index fe66119..cffdeab 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -59,7 +59,10 @@ export default defineConfig(({ mode }) => ({
 	plugins: [
 		mode === "development" && eslint(),
 		react(),
-		svgr({ exportAsDefault: true }),
+		svgr({
+			exportAsDefault: true,
+			dimensions: false,
+		}),
 		VitePWA(PWAConfig),
 	],
 	server: { open: true, port: 3000 },