diff --git a/.prettierrc b/.prettierrc
index a77fdde..8bc6e86 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -3,7 +3,6 @@
 	"singleQuote": true,
 	"trailingComma": "none",
 	"printWidth": 100,
-	"plugins": ["prettier-plugin-svelte"],
-	"pluginSearchDirs": ["."],
+	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
 	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
 }
diff --git a/package-lock.json b/package-lock.json
index f3810be..17fc0f8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
 				"tailwindcss": "^3.3.3"
 			},
 			"devDependencies": {
+				"@iconify-json/heroicons": "^1.1.12",
 				"@sveltejs/adapter-auto": "^2.0.0",
 				"@sveltejs/kit": "^1.20.4",
 				"@typescript-eslint/eslint-plugin": "^5.45.0",
@@ -26,13 +27,15 @@
 				"eslint": "^8.28.0",
 				"eslint-config-prettier": "^8.5.0",
 				"eslint-plugin-svelte": "^2.30.0",
-				"prettier": "^2.8.0",
-				"prettier-plugin-svelte": "^2.10.1",
+				"prettier": "^3.0.2",
+				"prettier-plugin-svelte": "^3.0.3",
+				"prettier-plugin-tailwindcss": "^0.5.3",
 				"prisma": "^5.1.1",
 				"svelte": "^4.0.5",
 				"svelte-check": "^3.4.3",
 				"tslib": "^2.4.1",
 				"typescript": "^5.0.0",
+				"unplugin-icons": "^0.16.5",
 				"vite": "^4.4.2"
 			}
 		},
@@ -68,6 +71,28 @@
 				"node": ">=6.0.0"
 			}
 		},
+		"node_modules/@antfu/install-pkg": {
+			"version": "0.1.1",
+			"resolved": "https://registry.npmjs.org/@antfu/install-pkg/-/install-pkg-0.1.1.tgz",
+			"integrity": "sha512-LyB/8+bSfa0DFGC06zpCEfs89/XoWZwws5ygEa5D+Xsm3OfI+aXQ86VgVG7Acyef+rSZ5HE7J8rrxzrQeM3PjQ==",
+			"dev": true,
+			"dependencies": {
+				"execa": "^5.1.1",
+				"find-up": "^5.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/antfu"
+			}
+		},
+		"node_modules/@antfu/utils": {
+			"version": "0.7.6",
+			"resolved": "https://registry.npmjs.org/@antfu/utils/-/utils-0.7.6.tgz",
+			"integrity": "sha512-pvFiLP2BeOKA/ZOS6jxx4XhKzdVLHDhGlFEaZ2flWWYf2xOqVniqpk38I04DFRyz+L0ASggl7SkItTc+ZLju4w==",
+			"dev": true,
+			"funding": {
+				"url": "https://github.com/sponsors/antfu"
+			}
+		},
 		"node_modules/@esbuild/android-arm": {
 			"version": "0.18.20",
 			"resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz",
@@ -487,6 +512,35 @@
 			"integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
 			"dev": true
 		},
+		"node_modules/@iconify-json/heroicons": {
+			"version": "1.1.12",
+			"resolved": "https://registry.npmjs.org/@iconify-json/heroicons/-/heroicons-1.1.12.tgz",
+			"integrity": "sha512-9tsn/xUU+HX56OngEDRTej4LzVm2qcMVLvEJ+q+1ZJBO4sjMDxycmbHq16HGl1LOeVG21fq4jNZHslVveVCwSQ==",
+			"dev": true,
+			"dependencies": {
+				"@iconify/types": "*"
+			}
+		},
+		"node_modules/@iconify/types": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
+			"integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
+			"dev": true
+		},
+		"node_modules/@iconify/utils": {
+			"version": "2.1.9",
+			"resolved": "https://registry.npmjs.org/@iconify/utils/-/utils-2.1.9.tgz",
+			"integrity": "sha512-mo+A4n3MwLlWlg1SoSO+Dt6pOPWKElk9sSJ6ZpuzbB9OcjxN8RUWxU3ulPwB1nglErWKRam2x4BAohbYF7FiFA==",
+			"dev": true,
+			"dependencies": {
+				"@antfu/install-pkg": "^0.1.1",
+				"@antfu/utils": "^0.7.5",
+				"@iconify/types": "^2.0.0",
+				"debug": "^4.3.4",
+				"kolorist": "^1.8.0",
+				"local-pkg": "^0.4.3"
+			}
+		},
 		"node_modules/@jridgewell/gen-mapping": {
 			"version": "0.3.3",
 			"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
@@ -2138,6 +2192,29 @@
 				"node": ">= 0.6"
 			}
 		},
+		"node_modules/execa": {
+			"version": "5.1.1",
+			"resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
+			"integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
+			"dev": true,
+			"dependencies": {
+				"cross-spawn": "^7.0.3",
+				"get-stream": "^6.0.0",
+				"human-signals": "^2.1.0",
+				"is-stream": "^2.0.0",
+				"merge-stream": "^2.0.0",
+				"npm-run-path": "^4.0.1",
+				"onetime": "^5.1.2",
+				"signal-exit": "^3.0.3",
+				"strip-final-newline": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sindresorhus/execa?sponsor=1"
+			}
+		},
 		"node_modules/express": {
 			"version": "4.18.2",
 			"resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz",
@@ -2397,6 +2474,18 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
+		"node_modules/get-stream": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+			"integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
+			"dev": true,
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
 		"node_modules/glob": {
 			"version": "7.2.3",
 			"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -2532,6 +2621,15 @@
 				"node": ">= 0.8"
 			}
 		},
+		"node_modules/human-signals": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
+			"integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
+			"dev": true,
+			"engines": {
+				"node": ">=10.17.0"
+			}
+		},
 		"node_modules/iconv-lite": {
 			"version": "0.4.24",
 			"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -2699,6 +2797,18 @@
 				"@types/estree": "*"
 			}
 		},
+		"node_modules/is-stream": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
+			"integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
 		"node_modules/isexe": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -2759,6 +2869,12 @@
 			"integrity": "sha512-9pSL5XB4J+ifHP0e0jmmC98OGC1nL8/JjS+fi6mnTlIf//yt/MfVLtKg7S6nCtj/8KTcWX7nRlY0XywoYY1ISQ==",
 			"dev": true
 		},
+		"node_modules/kolorist": {
+			"version": "1.8.0",
+			"resolved": "https://registry.npmjs.org/kolorist/-/kolorist-1.8.0.tgz",
+			"integrity": "sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==",
+			"dev": true
+		},
 		"node_modules/levn": {
 			"version": "0.4.1",
 			"resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -2785,6 +2901,18 @@
 			"resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
 			"integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
 		},
+		"node_modules/local-pkg": {
+			"version": "0.4.3",
+			"resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.4.3.tgz",
+			"integrity": "sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==",
+			"dev": true,
+			"engines": {
+				"node": ">=14"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/antfu"
+			}
+		},
 		"node_modules/locate-character": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
@@ -2858,6 +2986,12 @@
 			"resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
 			"integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w=="
 		},
+		"node_modules/merge-stream": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
+			"integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
+			"dev": true
+		},
 		"node_modules/merge2": {
 			"version": "1.4.1",
 			"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -2916,6 +3050,15 @@
 				"node": ">= 0.6"
 			}
 		},
+		"node_modules/mimic-fn": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+			"integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+			"dev": true,
+			"engines": {
+				"node": ">=6"
+			}
+		},
 		"node_modules/min-indent": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
@@ -3140,6 +3283,18 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/npm-run-path": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
+			"integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
+			"dev": true,
+			"dependencies": {
+				"path-key": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
 		"node_modules/object-assign": {
 			"version": "4.1.1",
 			"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -3183,6 +3338,21 @@
 				"wrappy": "1"
 			}
 		},
+		"node_modules/onetime": {
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
+			"integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+			"dev": true,
+			"dependencies": {
+				"mimic-fn": "^2.1.0"
+			},
+			"engines": {
+				"node": ">=6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
 		"node_modules/optionator": {
 			"version": "0.9.3",
 			"resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.3.tgz",
@@ -3510,30 +3680,102 @@
 			}
 		},
 		"node_modules/prettier": {
-			"version": "2.8.8",
-			"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
-			"integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.2.tgz",
+			"integrity": "sha512-o2YR9qtniXvwEZlOKbveKfDQVyqxbEIWn48Z8m3ZJjBjcCmUy3xZGIv+7AkaeuaTr6yPXJjwv07ZWlsWbEy1rQ==",
 			"dev": true,
 			"bin": {
-				"prettier": "bin-prettier.js"
+				"prettier": "bin/prettier.cjs"
 			},
 			"engines": {
-				"node": ">=10.13.0"
+				"node": ">=14"
 			},
 			"funding": {
 				"url": "https://github.com/prettier/prettier?sponsor=1"
 			}
 		},
 		"node_modules/prettier-plugin-svelte": {
-			"version": "2.10.1",
-			"resolved": "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-2.10.1.tgz",
-			"integrity": "sha512-Wlq7Z5v2ueCubWo0TZzKc9XHcm7TDxqcuzRuGd0gcENfzfT4JZ9yDlCbEgxWgiPmLHkBjfOtpAWkcT28MCDpUQ==",
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-3.0.3.tgz",
+			"integrity": "sha512-dLhieh4obJEK1hnZ6koxF+tMUrZbV5YGvRpf2+OADyanjya5j0z1Llo8iGwiHmFWZVG/hLEw/AJD5chXd9r3XA==",
 			"dev": true,
 			"peerDependencies": {
-				"prettier": "^1.16.4 || ^2.0.0",
+				"prettier": "^3.0.0",
 				"svelte": "^3.2.0 || ^4.0.0-next.0"
 			}
 		},
+		"node_modules/prettier-plugin-tailwindcss": {
+			"version": "0.5.3",
+			"resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.5.3.tgz",
+			"integrity": "sha512-M5K80V21yM+CTm/FEFYRv9/9LyInYbCSXpIoPAKMm8zy89IOwdiA2e4JVbcO7tvRtAQWz32zdj7/WKcsmFyAVg==",
+			"dev": true,
+			"engines": {
+				"node": ">=14.21.3"
+			},
+			"peerDependencies": {
+				"@ianvs/prettier-plugin-sort-imports": "*",
+				"@prettier/plugin-pug": "*",
+				"@shopify/prettier-plugin-liquid": "*",
+				"@shufo/prettier-plugin-blade": "*",
+				"@trivago/prettier-plugin-sort-imports": "*",
+				"prettier": "^3.0",
+				"prettier-plugin-astro": "*",
+				"prettier-plugin-css-order": "*",
+				"prettier-plugin-import-sort": "*",
+				"prettier-plugin-jsdoc": "*",
+				"prettier-plugin-organize-attributes": "*",
+				"prettier-plugin-organize-imports": "*",
+				"prettier-plugin-style-order": "*",
+				"prettier-plugin-svelte": "*"
+			},
+			"peerDependenciesMeta": {
+				"@ianvs/prettier-plugin-sort-imports": {
+					"optional": true
+				},
+				"@prettier/plugin-pug": {
+					"optional": true
+				},
+				"@shopify/prettier-plugin-liquid": {
+					"optional": true
+				},
+				"@shufo/prettier-plugin-blade": {
+					"optional": true
+				},
+				"@trivago/prettier-plugin-sort-imports": {
+					"optional": true
+				},
+				"prettier-plugin-astro": {
+					"optional": true
+				},
+				"prettier-plugin-css-order": {
+					"optional": true
+				},
+				"prettier-plugin-import-sort": {
+					"optional": true
+				},
+				"prettier-plugin-jsdoc": {
+					"optional": true
+				},
+				"prettier-plugin-marko": {
+					"optional": true
+				},
+				"prettier-plugin-organize-attributes": {
+					"optional": true
+				},
+				"prettier-plugin-organize-imports": {
+					"optional": true
+				},
+				"prettier-plugin-style-order": {
+					"optional": true
+				},
+				"prettier-plugin-svelte": {
+					"optional": true
+				},
+				"prettier-plugin-twig-melody": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/prisma": {
 			"version": "5.1.1",
 			"resolved": "https://registry.npmjs.org/prisma/-/prisma-5.1.1.tgz",
@@ -3931,6 +4173,12 @@
 			"resolved": "https://registry.npmjs.org/sift/-/sift-16.0.1.tgz",
 			"integrity": "sha512-Wv6BjQ5zbhW7VFefWusVP33T/EM0vYikCaQ2qR8yULbsilAT8/wQaXvuQ3ptGLpoKx+lihJE3y2UTgKDyyNHZQ=="
 		},
+		"node_modules/signal-exit": {
+			"version": "3.0.7",
+			"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
+			"integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
+			"dev": true
+		},
 		"node_modules/sirv": {
 			"version": "2.0.3",
 			"resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.3.tgz",
@@ -4035,6 +4283,15 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/strip-final-newline": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
+			"integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
+			"dev": true,
+			"engines": {
+				"node": ">=6"
+			}
+		},
 		"node_modules/strip-indent": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
@@ -4539,6 +4796,60 @@
 				"node": ">= 0.8"
 			}
 		},
+		"node_modules/unplugin": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.4.0.tgz",
+			"integrity": "sha512-5x4eIEL6WgbzqGtF9UV8VEC/ehKptPXDS6L2b0mv4FRMkJxRtjaJfOWDd6a8+kYbqsjklix7yWP0N3SUepjXcg==",
+			"dev": true,
+			"dependencies": {
+				"acorn": "^8.9.0",
+				"chokidar": "^3.5.3",
+				"webpack-sources": "^3.2.3",
+				"webpack-virtual-modules": "^0.5.0"
+			}
+		},
+		"node_modules/unplugin-icons": {
+			"version": "0.16.5",
+			"resolved": "https://registry.npmjs.org/unplugin-icons/-/unplugin-icons-0.16.5.tgz",
+			"integrity": "sha512-laCCqMWfng1XZgB9yowGfjBdDhtmz8t8zVnhzRNEMhBNdy26QrVewVmdXk/zsiAQYnEWvIxTjvW1nQXrxdd2+w==",
+			"dev": true,
+			"dependencies": {
+				"@antfu/install-pkg": "^0.1.1",
+				"@antfu/utils": "^0.7.5",
+				"@iconify/utils": "^2.1.7",
+				"debug": "^4.3.4",
+				"kolorist": "^1.8.0",
+				"local-pkg": "^0.4.3",
+				"unplugin": "^1.3.2"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/antfu"
+			},
+			"peerDependencies": {
+				"@svgr/core": ">=7.0.0",
+				"@svgx/core": "^1.0.1",
+				"@vue/compiler-sfc": "^3.0.2 || ^2.7.0",
+				"vue-template-compiler": "^2.6.12",
+				"vue-template-es2015-compiler": "^1.9.0"
+			},
+			"peerDependenciesMeta": {
+				"@svgr/core": {
+					"optional": true
+				},
+				"@svgx/core": {
+					"optional": true
+				},
+				"@vue/compiler-sfc": {
+					"optional": true
+				},
+				"vue-template-compiler": {
+					"optional": true
+				},
+				"vue-template-es2015-compiler": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/update-browserslist-db": {
 			"version": "1.0.11",
 			"resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.11.tgz",
@@ -4673,6 +4984,21 @@
 				"node": ">=12"
 			}
 		},
+		"node_modules/webpack-sources": {
+			"version": "3.2.3",
+			"resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz",
+			"integrity": "sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==",
+			"dev": true,
+			"engines": {
+				"node": ">=10.13.0"
+			}
+		},
+		"node_modules/webpack-virtual-modules": {
+			"version": "0.5.0",
+			"resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.5.0.tgz",
+			"integrity": "sha512-kyDivFZ7ZM0BVOUteVbDFhlRt7Ah/CSPwJdi8hBpkK7QLumUqdLtVfm/PX/hkcnrvr0i77fO5+TjZ94Pe+C9iw==",
+			"dev": true
+		},
 		"node_modules/whatwg-url": {
 			"version": "11.0.0",
 			"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-11.0.0.tgz",
diff --git a/package.json b/package.json
index c14cb14..a7569bb 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
 		"format": "prettier --plugin-search-dir . --write ."
 	},
 	"devDependencies": {
+		"@iconify-json/heroicons": "^1.1.12",
 		"@sveltejs/adapter-auto": "^2.0.0",
 		"@sveltejs/kit": "^1.20.4",
 		"@typescript-eslint/eslint-plugin": "^5.45.0",
@@ -19,13 +20,15 @@
 		"eslint": "^8.28.0",
 		"eslint-config-prettier": "^8.5.0",
 		"eslint-plugin-svelte": "^2.30.0",
-		"prettier": "^2.8.0",
-		"prettier-plugin-svelte": "^2.10.1",
+		"prettier": "^3.0.2",
+		"prettier-plugin-svelte": "^3.0.3",
+		"prettier-plugin-tailwindcss": "^0.5.3",
 		"prisma": "^5.1.1",
 		"svelte": "^4.0.5",
 		"svelte-check": "^3.4.3",
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",
+		"unplugin-icons": "^0.16.5",
 		"vite": "^4.4.2"
 	},
 	"type": "module",
diff --git a/src/app.css b/src/app.css
index b5c61c9..550130e 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,3 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+html {
+	@apply bg-gray-900;
+}
diff --git a/src/app.d.ts b/src/app.d.ts
index f59b884..6c1e9ee 100644
--- a/src/app.d.ts
+++ b/src/app.d.ts
@@ -1,3 +1,5 @@
+import 'unplugin-icons/types/svelte';
+
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces
 declare global {
diff --git a/src/lib/CourseListItem.svelte b/src/lib/CourseListItem.svelte
new file mode 100644
index 0000000..352daf2
--- /dev/null
+++ b/src/lib/CourseListItem.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+	import type { Course } from '@prisma/client';
+
+	export let course: Course;
+
+	const filterWords = ['II', 'III', 'IV', 'VI', 'VII', 'IX', 'XI'];
+
+	const convertToTitleCase = (courseTitle: string) =>
+		courseTitle
+			.trim()
+			.split(' ')
+			.map((w) => {
+				if (!w) {
+					return w;
+				}
+
+				if (filterWords.includes(w)) {
+					return w;
+				}
+
+				return w[0].toUpperCase() + w.slice(1).toLowerCase();
+			})
+			.join(' ');
+
+	$: courseTitle = convertToTitleCase(course.expandedTitle ? course.expandedTitle : course.title);
+	$: courseCredits = course.credits > 0 ? `${course.credits} credits` : `Credits by arrangment`;
+</script>
+
+<div class="flex grow items-center rounded-md border border-gray-700 bg-gray-800 p-2">
+	<div class="flex min-w-0 grow gap-2">
+		<h3 class="text-base text-gray-300">{course.courseString}</h3>
+		<h3 class="text-base text-gray-300">•</h3>
+		<h3
+			class="grow overflow-hidden text-ellipsis whitespace-nowrap text-base font-bold text-gray-300"
+			title={course.title}
+		>
+			{courseTitle}
+		</h3>
+		<h3 class="whitespace-nowrap text-base text-gray-300">
+			{courseCredits}
+		</h3>
+		<div class="flex items-center justify-center gap-1 rounded-full bg-[#A7F3D0] px-2 py-1">
+			<span class="h-2 w-2 rounded-full bg-[#065F46]"></span>
+			<p class="text-xs text-[#065F46]">{course.openSections}/4</p>
+		</div>
+	</div>
+</div>
diff --git a/src/lib/Navbar.svelte b/src/lib/Navbar.svelte
new file mode 100644
index 0000000..a2cfffe
--- /dev/null
+++ b/src/lib/Navbar.svelte
@@ -0,0 +1,66 @@
+<script lang="ts">
+	import HeroiconsMagnifyingGlass20Solid from '~icons/heroicons/magnifying-glass-20-solid';
+	import { browser } from '$app/environment';
+
+	// Mac detection, via: https://stackoverflow.com/a/29035153/6525260
+	$: isMac =
+		browser &&
+		(/mac/i.test(
+			// @ts-expect-error
+			window.navigator.userAgentData
+				? // @ts-expect-error
+				  window.navigator.userAgentData.platform
+				: window.navigator.platform
+		) ||
+			false);
+
+	$: shortcut = browser ? `(${isMac ? '⌘' : '^'} + K)` : '';
+
+	let inputEl: HTMLInputElement | undefined;
+	let isInputFocused = false;
+
+	// Focus on input when Cmd/Ctrl + K is pressed
+	$: handleKeyDown = (event: KeyboardEvent) => {
+		if (event.key === 'k' && (isMac ? event.metaKey : event.ctrlKey)) {
+			inputEl?.focus();
+		} else if (isInputFocused && event.key === 'Escape') {
+			inputEl?.blur();
+		}
+	};
+
+	const onInputFocus = () => {
+		isInputFocused = true;
+	};
+
+	const onInputBlur = () => {
+		isInputFocused = false;
+	};
+</script>
+
+<svelte:window on:keydown={handleKeyDown} />
+
+<div
+	class="sticky top-0 flex h-16 w-full items-center gap-2 border-b border-b-gray-700 bg-gray-900 px-6 py-2"
+>
+	<div class="relative grow">
+		<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center p-2">
+			<HeroiconsMagnifyingGlass20Solid class="text-primary" />
+		</div>
+		<input
+			bind:this={inputEl}
+			on:focus={onInputFocus}
+			on:blur={onInputBlur}
+			type="text"
+			class="border-transparent block h-10 w-full overflow-hidden rounded border bg-gray-900 pl-10 text-sm text-gray-300 caret-gray-300 outline-none
+						transition-all duration-150
+            placeholder:text-sm placeholder:text-gray-500
+					  focus:border focus:border-gray-500 focus:bg-gray-800 focus:ring-gray-500"
+			placeholder="search courses, professors, subjects {shortcut}"
+		/>
+	</div>
+	<button
+		class="flex h-10 items-center justify-center rounded bg-primary px-4 py-2 text-base font-bold text-gray-300 transition-transform
+		       focus:outline-none focus:ring focus:ring-primary focus:ring-offset-2 focus:ring-offset-gray-900
+					 active:scale-95">Open Planner</button
+	>
+</div>
diff --git a/src/lib/sidebar/Sidebar.svelte b/src/lib/sidebar/Sidebar.svelte
new file mode 100644
index 0000000..73e45fe
--- /dev/null
+++ b/src/lib/sidebar/Sidebar.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+	import HeroiconsAcademicCap from '~icons/heroicons/academic-cap';
+	import HeroiconsBookOpen from '~icons/heroicons/book-open';
+	import HeroiconsBuildingLibrary from '~icons/heroicons/building-library';
+	import HeroiconsCalculator from '~icons/heroicons/calculator';
+	import HeroiconsCalendarDays from '~icons/heroicons/calendar-days';
+	import HeroiconsChevronRight from '~icons/heroicons/chevron-right';
+	import HeroiconsGlobeEuropeAfrica from '~icons/heroicons/globe-europe-africa';
+	import HeroiconsMapPin from '~icons/heroicons/map-pin';
+	import HeroiconsSquare3Stack3d from '~icons/heroicons/square-3-stack-3d';
+	import HeroiconsUserGroup from '~icons/heroicons/user-group';
+	import SidebarItem from './SidebarItem.svelte';
+</script>
+
+<div
+	class="sticky top-0 flex h-screen overflow-y-auto w-60 shrink-0 flex-col border-r border-r-gray-700"
+>
+	<div class="flex grow flex-col gap-8 px-4 py-6">
+		<div class="flex gap-3">
+			<div class="flex items-center justify-center rounded-full bg-gray-800 p-2">
+				<HeroiconsBookOpen class="text-primary" />
+			</div>
+			<h1 class="text-3xl font-bold text-gray-300">RCV</h1>
+		</div>
+		<div class="flex grow flex-col gap-2">
+			<p class="text-sm uppercase text-gray-500">Filter</p>
+			<SidebarItem icon={HeroiconsAcademicCap} text="Campus" />
+			<SidebarItem icon={HeroiconsMapPin} text="Location" />
+			<SidebarItem icon={HeroiconsBuildingLibrary} text="School" />
+			<SidebarItem icon={HeroiconsGlobeEuropeAfrica} text="Core Code" />
+			<SidebarItem icon={HeroiconsCalculator} text="Subject" />
+			<SidebarItem icon={HeroiconsUserGroup} text="Class mode" />
+			<SidebarItem icon={HeroiconsSquare3Stack3d} text="Class level" />
+		</div>
+	</div>
+	<div class="flex items-center gap-2 border-t border-t-gray-700 p-4">
+		<HeroiconsCalendarDays class="text-primary" />
+		<p class="grow text-base text-gray-300">Spring 2023</p>
+		<HeroiconsChevronRight class="text-gray-300" />
+	</div>
+</div>
diff --git a/src/lib/sidebar/SidebarItem.svelte b/src/lib/sidebar/SidebarItem.svelte
new file mode 100644
index 0000000..996a3ba
--- /dev/null
+++ b/src/lib/sidebar/SidebarItem.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { ComponentType, SvelteComponent } from 'svelte';
+	import HeroiconsChevronRight from '~icons/heroicons/chevron-right';
+
+	export let icon: ComponentType<SvelteComponent>;
+	export let text: string;
+</script>
+
+<div class="flex items-center gap-2 py-3">
+	<slot name="icon" class="text-primary" />
+	<svelte:component this={icon} class="text-primary" />
+	<p class="grow text-base text-gray-300">{text}</p>
+	<HeroiconsChevronRight class="text-gray-300" />
+</div>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 2e511e0..2a07ba1 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,5 +1,14 @@
-<script>
+<script lang="ts">
+	import Navbar from '$lib/Navbar.svelte';
+	import Sidebar from '$lib/sidebar/Sidebar.svelte';
 	import '../app.css';
 </script>
 
-<slot />
+<div class="flex">
+	<Sidebar />
+
+	<div class="grow">
+		<Navbar />
+		<slot />
+	</div>
+</div>
diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts
new file mode 100644
index 0000000..b20786b
--- /dev/null
+++ b/src/routes/+page.server.ts
@@ -0,0 +1,10 @@
+import prisma from '$lib/server/prisma.js';
+import { logger } from '$lib/server/logger';
+
+/** @type {import('./$types').PageServerLoad} */
+export async function load() {
+	logger.info(`Requested all courses`);
+	const courses = await prisma.course.findMany();
+
+	return { courses };
+}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index a8beed5..36d1435 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1 +1,20 @@
-<div />
+<script lang="ts">
+	import CourseListItem from '$lib/CourseListItem.svelte';
+	import type { PageData } from './$types';
+
+	export let data: PageData;
+</script>
+
+<div class="flex flex-col p-4">
+	<div class="flex w-[600px] shrink flex-col gap-3 px-4">
+		<div class="flex flex-col gap-2">
+			<h3 class="text-2xl font-bold text-primary">Course List</h3>
+			<h4 class="overflow-hidden text-ellipsis whitespace-nowrap text-sm text-gray-500">
+				Click any course to expand sections, or filter using the categories on the left.
+			</h4>
+		</div>
+		{#each data.courses as course}
+			<CourseListItem {course} />
+		{/each}
+	</div>
+</div>
diff --git a/tailwind.config.js b/tailwind.config.js
index bfe0bc2..475871c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -2,6 +2,24 @@
 export default {
 	content: ['./src/**/*.{html,js,svelte,ts}'],
 	theme: {
+		colors: {
+			transparent: 'transparent',
+			// Rutgers red
+			primary: '#CA0037',
+			// True gray from Figma extended tailwind color palette
+			gray: {
+				10: '#F5F5F5',
+				50: '#FAFAFA',
+				200: '#E5E5E5',
+				300: '#D4D4D4',
+				400: '#A3A3A3',
+				500: '#737373',
+				600: '#525252',
+				700: '#404040',
+				800: '#262626',
+				900: '#171717'
+			}
+		},
 		extend: {}
 	},
 	plugins: []
diff --git a/vite.config.ts b/vite.config.ts
index bbf8c7d..8911bd4 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,6 +1,12 @@
 import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
+import Icons from 'unplugin-icons/vite';
 
 export default defineConfig({
-	plugins: [sveltekit()]
+	plugins: [
+		sveltekit(),
+		Icons({
+			compiler: 'svelte'
+		})
+	]
 });