diff --git a/internal/template/root.templ b/internal/template/index.templ
similarity index 100%
rename from internal/template/root.templ
rename to internal/template/index.templ
diff --git a/internal/template/layout.templ b/internal/template/layout.templ
index 52edb1c..15e5be3 100644
--- a/internal/template/layout.templ
+++ b/internal/template/layout.templ
@@ -1,10 +1,12 @@
 package template
 
 func layoutLinkClass(isActive bool) string {
+	common := "text-2xl p-2 text-gray-900 decoration-yellow-400 decoration-[0.25rem] hover:bg-gray-200 rounded-lg"
 	if isActive {
-		return "text-xl hover:bg-gray-100 p-1 duration-100 rounded-xl transition-colors text-gray-900"
+		return common + " " + "underline"
 	}
-	return "text-xl hover:bg-gray-100 hover:text-gray-900 p-1 duration-200 rounded-xl transition-colors text-gray-400"
+
+	return common + " " + "hover:underline"
 }
 
 templ Layout(slot templ.Component, user templ.Component, loggedIn bool, path string) {
@@ -22,7 +24,7 @@ templ Layout(slot templ.Component, user templ.Component, loggedIn bool, path str
 					"includeIndicatorStyles": false,
 					"selfRequestsOnly": true,
 					"allowScriptTags": false
-				}'
+			   }'
 			/>
 			<script src="/static/js/htmx.min.js"></script>
 			<script src="/static/js/toast.js"></script>
@@ -30,39 +32,40 @@ templ Layout(slot templ.Component, user templ.Component, loggedIn bool, path str
 			<script src="/static/js/echarts.min.js"></script>
 			<script src="/static/js/dashboard.js" defer></script>
 		</head>
-		<body class="h-screen flex flex-col" hx-headers='{"Csrf-Token": "CSRF_TOKEN"}'>
-			// Header
-			<nav class="flex bg-white items-center gap-2 py-1 px-2 h-12 md:gap-10 md:px-10 md:py-2">
+		<body class="flex flex-col min-h-screen" hx-headers='{"Csrf-Token": "CSRF_TOKEN"}'>
+			<header class="sticky top-0 z-50 bg-white flex items-center gap-2 p-4 border-b-1 border-gray-200">
 				<a href="/" class="flex gap-2 mr-20">
 					<img class="w-6" src="/static/favicon.svg" alt="SpendSparrow logo"/>
 					<span class="text-4xl font-bold font-pirata">SpendSparrow</span>
 				</a>
-				if loggedIn {
-					<a class={ layoutLinkClass(path == "/dashboard") } href="/dashboard">Dashboard</a>
-					<a class={ layoutLinkClass(path == "/transaction") } href="/transaction">Transaction</a>
-					<a class={ layoutLinkClass(path == "/treasurechest") } href="/treasurechest">Treasure Chest</a>
-					<a class={ layoutLinkClass(path == "/account") } href="/account">Account</a>
-				}
 				<div class="ml-auto">
 					@user
 				</div>
-			</nav>
-			<div class="h-12 fixed top-12 mr-4 inset-0 bg-linear-0 from-transparent to-white"></div>
+			</header>
 			// Content
-			<main class="flex-1 overflow-auto">
-				if slot != nil {
-					@slot
+			<div class="flex flex-1">
+				if loggedIn {
+					<aside class="w-64 h-[calc(100vh-4rem)] sticky top-18 border-r-1 border-gray-200 overflow-y-auto p-4">
+						<nav class="flex gap-2 flex-col text-lg mt-5 px-5 pt-2">
+							<a class={ layoutLinkClass(path == "/dashboard") } href="/dashboard">Dashboard</a>
+							<a class={ layoutLinkClass(path == "/transaction") } href="/transaction">Transaction</a>
+							<a class={ layoutLinkClass(path == "/treasurechest") } href="/treasurechest">Treasure Chest</a>
+							<a class={ layoutLinkClass(path == "/account") } href="/account">Account</a>
+						</nav>
+					</aside>
 				}
-			</main>
-			// Footer
-			<!-- </div> -->
+				<main class="flex-1 p-6">
+					if slot != nil {
+						@slot
+					}
+				</main>
+			</div>
 			<div id="toasts" class="fixed bottom-4 right-4 ml-4 max-w-96 flex flex-col gap-2 z-50">
 				<div
 					id="toast"
-					class="transition-all duration-300 opacity-0 px-4 py-2 text-lg hidden text-bold rounded bg-amber-900 text-white"
-				>
-					M
-				</div>
+					class="transition-all duration-300 
+						opacity-0 px-4 py-2 text-lg hidden text-bold rounded bg-amber-900 text-white"
+				></div>
 			</div>
 		</body>
 	</html>
