diff --git a/public/images/csc-icon.svg b/public/images/csc-icon.svg
new file mode 100644
index 0000000..733f488
--- /dev/null
+++ b/public/images/csc-icon.svg
@@ -0,0 +1,9 @@
+<svg width="175" height="76" viewBox="0 0 175 76" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M31.3226 0.526582C17.4935 3.13665 6.39763 12.7205 2.0327 25.8116C-1.14921 35.3954 -0.578098 45.3055 3.62366 54.1145C5.86731 58.8044 8.23335 61.9447 12.2719 65.819C22.7967 75.7291 38.5023 78.7062 52.0866 73.3637L54.2079 72.5073L58.3689 73.9347C72.4427 78.5838 86.8837 75.2805 97.2861 64.9626C104.67 57.6625 107.974 49.9547 108.831 37.8424C109.035 34.8245 109.524 31.3172 109.891 30.0937C111.074 26.1786 113.4 22.3043 116.5 19.1233L119.396 16.1054L121.069 17.4104C124.944 20.4691 128.738 26.9535 129.921 32.5407C131.145 38.3317 130.084 45.3871 127.106 51.0966C125.475 54.1553 119.682 60.0279 116.663 61.6592C115.439 62.3117 113.155 63.2497 111.605 63.7391L108.831 64.6363L111.278 66.8793C114.501 69.7749 119.56 72.6296 124.169 74.0978C137.917 78.5431 152.317 75.0766 162.556 64.9626C169.246 58.3558 172.959 50.4033 173.938 40.6155C174.549 34.2943 172.51 25.363 168.961 19.1233C166.717 15.1674 161.781 9.74337 158.028 7.05174C147.87 -0.207499 134.612 -2.00192 122.782 2.321L119.519 3.50368L117.112 2.52491C112.543 0.689709 109.443 0.159538 103.364 0.159538C97.1229 0.159538 94.4713 0.648929 88.9642 2.76961C80.3159 6.11375 72.0348 14.1479 68.4041 22.7937C66.5684 27.1574 65.6302 31.4395 65.2222 37.4345C65.0183 40.4524 64.5695 43.9597 64.2024 45.1832C63.1009 49.3429 60.8165 53.258 57.6346 56.5614L54.6566 59.6609L53.5144 59.0083C51.6787 57.948 47.8849 53.1765 46.2939 49.9547C44.4174 46.1211 43.6015 42.5731 43.6015 38.0463C43.6015 33.3563 44.4174 29.9714 46.5387 25.6077C49.5166 19.5719 56.0028 14.0255 62.1627 12.1495C63.0602 11.9048 64.0392 11.5786 64.3656 11.497C64.8143 11.3747 64.6511 10.9668 63.7536 10.0696C60.4901 6.60314 53.1881 2.60648 47.4769 1.09753C43.1936 -0.00358955 35.5652 -0.289063 31.3226 0.526582ZM42.5409 11.1707C43.0304 11.3747 42.7041 12.0272 40.9499 14.2702C35.0348 21.8557 32.1385 30.9501 32.7096 40.2485C33.2399 48.6089 36.6666 57.01 41.8882 62.8011C42.6633 63.6575 43.1936 64.4732 43.0712 64.5955C42.9488 64.7586 41.1947 64.9626 39.2366 65.0441C26.4682 65.7374 14.5156 56.7653 11.6192 44.3675C10.7218 40.6155 10.8034 34.9876 11.7824 31.1541C14.1484 21.8149 21.7361 14.1886 31.0371 11.7417C33.9334 11.0076 41.1131 10.6406 42.5409 11.1707ZM107.811 11.1707C108.3 11.3747 107.974 12.0272 106.22 14.2702C100.917 21.0808 97.8572 29.6043 97.8572 37.72C97.8572 41.6351 96.7558 46.2027 94.9201 50.077C93.5739 52.891 92.5948 54.196 89.7393 57.0508C86.8837 59.9056 85.5783 60.8843 82.7635 62.2301C77.6643 64.6771 71.5453 65.6966 66.7724 64.9218L65.263 64.6363L67.0171 62.5564C72.7691 55.7865 75.4207 48.6497 76.1957 37.8424C76.8484 28.8295 78.7658 24.3026 84.1913 18.8786C89.6169 13.4546 95.4912 11.0076 103.242 10.9668C105.404 10.9261 107.444 11.0484 107.811 11.1707ZM142.2 11.5378C150.155 13.4138 156.6 18.6339 160.312 26.2194C164.065 33.8865 164.025 42.0837 160.19 50.077C158.844 52.891 157.865 54.196 155.009 57.0508C152.154 59.9056 150.848 60.8843 148.034 62.2301C142.934 64.6771 136.815 65.6966 132.042 64.9218L130.533 64.6363L132.287 62.5564C139.018 54.6446 142.282 44.0005 141.099 33.8865C140.201 26.3418 136.897 18.5931 132.491 13.6177C130.819 11.7825 130.615 11.3747 131.186 11.2115C132.858 10.7629 139.875 10.9668 142.2 11.5378Z" fill="url(#paint0_linear)"/>
+<defs>
+<linearGradient id="paint0_linear" x1="-19.8935" y1="117.914" x2="316.186" y2="-16.9617" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1481E3"/>
+<stop offset="1" stop-color="#4ED4B2"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/public/vercel.svg b/public/vercel.svg
deleted file mode 100644
index d2f8422..0000000
--- a/public/vercel.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>
\ No newline at end of file
diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
new file mode 100644
index 0000000..f5f130e
--- /dev/null
+++ b/src/app/admin/page.tsx
@@ -0,0 +1,7 @@
+export default function Home() {
+	return (
+		<main className="flex min-h-screen flex-col items-center justify-between p-24">
+			<h2 className="text-4xl font-bold">Admin Page</h2>
+		</main>
+	);
+}
diff --git a/src/app/catalogue/page.tsx b/src/app/catalogue/page.tsx
new file mode 100644
index 0000000..ff654e4
--- /dev/null
+++ b/src/app/catalogue/page.tsx
@@ -0,0 +1,7 @@
+export default function Home() {
+	return (
+		<main className="flex min-h-screen flex-col items-center justify-between p-24">
+			<h2 className="text-4xl font-bold">Library page</h2>
+		</main>
+	);
+}
diff --git a/src/app/favicon.ico b/src/app/favicon.ico
index 718d6fe..2efc9c3 100644
Binary files a/src/app/favicon.ico and b/src/app/favicon.ico differ
diff --git a/src/app/globals.css b/src/app/globals.css
index c713ed8..610cc42 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -4,17 +4,20 @@
 
 :root {
 	--foreground-rgb: 0, 0, 0;
-	--background-start-rgb: 214, 219, 220;
-	--background-end-rgb: 255, 255, 255;
+	--background-start-rgb: 255, 255, 255;
+	--background-end-rgb: 214, 219, 220;
+	/* --background-end-rgb: 255, 255, 255; */
 }
 
+/* This breaks navbar. Website still complies to system theme
 @media (prefers-color-scheme: dark) {
 	:root {
 		--foreground-rgb: 255, 255, 255;
 		--background-start-rgb: 0, 0, 0;
 		--background-end-rgb: 0, 0, 0;
 	}
-}
+} 
+*/
 
 body {
 	color: rgb(var(--foreground-rgb));
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 270a566..3961d98 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,12 +1,11 @@
 import type { Metadata } from "next";
-import { Inter } from "next/font/google";
 import "./globals.css";
-
-const inter = Inter({ subsets: ["latin"] });
+import Image from "next/image";
 
 export const metadata: Metadata = {
-	title: "Create Next App",
-	description: "Generated by create next app",
+	title: "CSC Librarian",
+	description: "A simple library management system for UW CSC",
+	lang: "en",
 };
 
 export default function RootLayout({
@@ -16,7 +15,63 @@ export default function RootLayout({
 }>) {
 	return (
 		<html lang="en">
-			<body className={inter.className}>{children}</body>
+			<body className={"font-mono"}>
+				{navbar}
+				{children}
+			</body>
 		</html>
 	);
 }
+
+const navbarButtonClasses =
+	"block rounded px-3 py-2 text-gray-900 hover:bg-gray-100 md:border-0 md:p-0 md:hover:bg-transparent md:hover:text-blue-700 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent md:dark:hover:text-blue-500";
+
+const navbar = (
+	<nav className="fixed start-0 top-0 z-20 w-full border-b border-gray-200 bg-white dark:border-gray-600 dark:bg-gray-900">
+		<div className="mx-auto flex max-w-screen-xl flex-wrap items-center justify-between p-4">
+			<a href="/" className="flex items-center space-x-3 rtl:space-x-reverse">
+				<Image
+					src="/images/csc-icon.svg"
+					className="h-8"
+					alt="CSC Logo"
+					width={70}
+					height={16}
+				/>
+				<span className="self-center whitespace-nowrap text-2xl font-semibold dark:text-white">
+					Librarian
+				</span>
+			</a>
+			<button
+				data-collapse-toggle="navbar-default"
+				type="button"
+				className="inline-flex h-10 w-10 items-center justify-center rounded-lg p-2 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 md:hidden dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
+				aria-controls="navbar-default"
+				aria-expanded="false"
+			></button>
+			<div className="hidden w-full md:block md:w-auto" id="navbar-default">
+				<ul className="mt-4 flex flex-col rounded-lg border border-gray-100 bg-gray-50 p-4 font-medium md:mt-0 md:flex-row md:space-x-8 md:border-0 md:bg-white md:p-0 rtl:space-x-reverse dark:border-gray-700 dark:bg-gray-800 md:dark:bg-gray-900">
+					<li>
+						<a href="/" className={navbarButtonClasses}>
+							Home
+						</a>
+					</li>
+					<li>
+						<a href="catalogue" className={navbarButtonClasses}>
+							Catalogue
+						</a>
+					</li>
+					<li>
+						<a href="modify" className={navbarButtonClasses}>
+							Modify
+						</a>
+					</li>
+					<li>
+						<a href="admin" className={navbarButtonClasses}>
+							Admin
+						</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</nav>
+);
diff --git a/src/app/modify/page.tsx b/src/app/modify/page.tsx
new file mode 100644
index 0000000..d2d4e32
--- /dev/null
+++ b/src/app/modify/page.tsx
@@ -0,0 +1,7 @@
+export default function Home() {
+	return (
+		<main className="flex min-h-screen flex-col items-center justify-between p-24">
+			<h2 className="text-4xl font-bold">Modify page</h2>
+		</main>
+	);
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 956b645..f0e7bc5 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,113 +1,7 @@
-import Image from "next/image";
-
 export default function Home() {
 	return (
 		<main className="flex min-h-screen flex-col items-center justify-between p-24">
-			<div className="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex">
-				<p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
-					Get started by editing&nbsp;
-					<code className="font-mono font-bold">src/app/page.tsx</code>
-				</p>
-				<div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
-					<a
-						className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
-						href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-						target="_blank"
-						rel="noopener noreferrer"
-					>
-						By{" "}
-						<Image
-							src="/vercel.svg"
-							alt="Vercel Logo"
-							className="dark:invert"
-							width={100}
-							height={24}
-							priority
-						/>
-					</a>
-				</div>
-			</div>
-
-			<div className="relative z-[-1] flex place-items-center before:absolute before:h-[300px] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-full after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 sm:before:w-[480px] sm:after:w-[240px] before:lg:h-[360px]">
-				<Image
-					className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
-					src="/next.svg"
-					alt="Next.js Logo"
-					width={180}
-					height={37}
-					priority
-				/>
-			</div>
-
-			<div className="mb-32 grid text-center lg:mb-0 lg:w-full lg:max-w-5xl lg:grid-cols-4 lg:text-left">
-				<a
-					href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-					className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-					target="_blank"
-					rel="noopener noreferrer"
-				>
-					<h2 className={"mb-3 text-2xl font-semibold"}>
-						Docs{" "}
-						<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-							-&gt;
-						</span>
-					</h2>
-					<p className={"m-0 max-w-[30ch] text-sm opacity-50"}>
-						Find in-depth information about Next.js features and API.
-					</p>
-				</a>
-
-				<a
-					href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-					className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-					target="_blank"
-					rel="noopener noreferrer"
-				>
-					<h2 className={"mb-3 text-2xl font-semibold"}>
-						Learn{" "}
-						<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-							-&gt;
-						</span>
-					</h2>
-					<p className={"m-0 max-w-[30ch] text-sm opacity-50"}>
-						Learn about Next.js in an interactive course with&nbsp;quizzes!
-					</p>
-				</a>
-
-				<a
-					href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-					className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-					target="_blank"
-					rel="noopener noreferrer"
-				>
-					<h2 className={"mb-3 text-2xl font-semibold"}>
-						Templates{" "}
-						<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-							-&gt;
-						</span>
-					</h2>
-					<p className={"m-0 max-w-[30ch] text-sm opacity-50"}>
-						Explore starter templates for Next.js.
-					</p>
-				</a>
-
-				<a
-					href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-					className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-					target="_blank"
-					rel="noopener noreferrer"
-				>
-					<h2 className={"mb-3 text-2xl font-semibold"}>
-						Deploy{" "}
-						<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-							-&gt;
-						</span>
-					</h2>
-					<p className={"m-0 max-w-[30ch] text-balance text-sm opacity-50"}>
-						Instantly deploy your Next.js site to a shareable URL with Vercel.
-					</p>
-				</a>
-			</div>
+			<h2 className="text-4xl font-bold">Beep Boop</h2>
 		</main>
 	);
 }