diff --git a/static/css/custom.css b/static/css/custom.css
index 0d3933d..4c77534 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -1,4 +1,5 @@
-body {
+html, body {
+	height: 100%;
 	background-color: #eee;
 	font-family: "Poppins", sans-serif;
 }
\ No newline at end of file
diff --git a/static/js/interact.js b/static/js/interact.js
new file mode 100644
index 0000000..62077c6
--- /dev/null
+++ b/static/js/interact.js
@@ -0,0 +1,25 @@
+function openCategory(DOM) {
+	DOM.parentNode.children[1].classList.remove("hidden");
+}
+
+function closeCategory(DOM) {
+	DOM.parentNode.children[1].classList.add("hidden");
+}
+
+function toggleCategory(DOM) {
+	let classes = DOM.parentNode.children[1].classList;
+	classes[classes.contains("hidden") ? "remove" : "add"]("hidden");
+}
+
+/*
+function postPageLoad() {
+	let ent = document.getElementById("sidenav").children[1].children[0].children[0].children;
+
+	for (let i = 0; i < ent.length; i++) {
+		if (!ent[i].children[0].classList.contains("item"))
+			continue;
+		
+		ent[i].children[0].onclick = toggleCategory(ent[i].children[0]);
+	}
+}
+*/
\ No newline at end of file
diff --git a/templates/layout/dash.html b/templates/layout/dash.html
index 9be7edc..a65d41a 100644
--- a/templates/layout/dash.html
+++ b/templates/layout/dash.html
@@ -10,9 +10,9 @@
 	<title>Husstanden</title>
 {% endif %}
 </head>
-<body>
-    <div class="p-2">
-        <div class="d-flex">
+<body style="height:100%">
+    <div class="p-2" style="height:100%">
+        <div class="d-flex" style="height:100%">
             <div class="col p-2" style="flex:0 0 320px;">
 {% include 'layout/includes/side_nav.html' %}
             </div>
@@ -23,5 +23,6 @@
         </div>
     </div>
 {% include 'layout/includes/boot-body.html' %}
+<script src="{{ url_for('static', filename='js/interact.js') }}"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/templates/layout/includes/side_nav.html b/templates/layout/includes/side_nav.html
index bfcbf65..bb8fdd7 100644
--- a/templates/layout/includes/side_nav.html
+++ b/templates/layout/includes/side_nav.html
@@ -1,4 +1,11 @@
 <style>
+#sidenav-parent {
+	display: flex;
+	flex-direction: column;
+	height:100%;
+	min-height: 100%;
+}
+
 #sidenav {
     background-color: #B507DB;
     border-radius: 4px;
@@ -9,7 +16,7 @@
     flex-direction: column;
 
     max-width: 100%;
-    height: 100%;
+	height: 100%;
 }
 
 #sidenav div {
@@ -17,13 +24,23 @@
     flex-direction: column;
 }
 
-#sidenav a, #sidenav h4 {
+#sidenav h4 {
+	margin-top: 20px;
     color: white;
 }
 
+#sidenav a {
+	color: #e9d9fc;
+	line-height: 1;
+}
+#sidenav a:hover {
+	color: white;
+}
+
 .navlist div, .navlist div > a {
     display: flex;
     flex-grow: 1;
+	text-decoration: none;
 }
 
 .navlist div > a > span {
@@ -39,10 +56,44 @@
 	margin-right: 10px;
 }
 
+.navlist .item {
+	cursor: pointer;
+	padding-top: 3px;
+	padding-bottom: 3px;
+}
+
+#sidenav .flex-column .flex-column {
+	margin-left: 30px;
+	margin-right: 30px;
+}
+
+#sidenav .flex-column .flex-column > div {
+	padding-top: 5px;
+	padding-bottom: 5px;
+	padding-right: 30px;
+	padding-left: 30px;
+}
+
+#sidenav .flex-column .flex-column > div > a {
+	display: list-item;
+	list-style-type: disc;
+}
+
+.page.selected {
+	background-color: #9F07C1;
+	border-radius: 100px;
+}
+
+.downtab {
+
+}
+
 .hidden {
     display: none !important;
+	overflow: hidden !important;
 }
 </style>
+<div id="sidenav-parent">
 <div class="d-flex flex-column" id="sidenav">
     <div class="top">
         <!-- Here be logo area -->
@@ -53,57 +104,58 @@
         <div class="p-2"> <!-- Padding -->
 			<div class="flex-column">
                 <div> <!-- Collection -->
-                    <a href="#dash">
+                    <a class="item" onclick="toggleCategory(this)">
                         <i class="fa fa-chart-bar"></i><span>Dashboard</span>
                         <i class="fas fa-chevron-right"></i>
                     </a>
-                    <div class="hidden"> <!-- Hidden until clicked #dash -->
+                    <div class="downtab hidden">
                         <div class="flex-column">
-                            <div>
-                                <a href="#dash-test">Test</a> <!-- TODO: Add dot prefix -->
+                            <div class="page">
+                                <a href="#dash-test">Test</a>
                             </div>
-                            <div>
+                            <div class="page">
                                 <a href="#dash-demo">Demo</a>
                             </div>
                         </div>
                     </div>
                 </div>
                 <div>
-                    <h4>Title card</h4> <!-- TODO: Padding and such -->
+                    <h4>Title card</h4>
                 </div>
                 <div>
-                    <a href="#bills">
+                    <a class="item" onclick="toggleCategory(this)">
                         <i class="fa fa-chart-bar"></i><span>Bills</span>
                         <i class="fas fa-chevron-right"></i>
                     </a>
-                    <div class="hidden">
-                        <ul>
-                            <li>
+                    <div class="downtab hidden">
+                        <div class="flex-column">
+                            <div class="page">
                                 <a href="#bills-bills">Bills</a>
-                            </li>
-                            <li>
+                            </div>
+                            <div class="page">
                                 <a href="#bills-log">Log</a>
-                            </li>
-                        </ul>
+                            </div>
+                        </div>
                     </div>
                 </div>
                 <div>
-                    <a href="#recieps">
+                    <a class="item" onclick="toggleCategory(this)">
                         <i class="fa fa-chart-bar"></i><span>Recieps</span>
                         <i class="fas fa-chevron-right"></i>
                     </a>
-                    <div class="hidden">
-                        <ul>
-                            <li>
+                    <div class="downtab hidden">
+						<div class="flex-column">
+                            <div class="page">
                                 <a href="#recieps-recieps">Recieps</a>
-                            </li>
-                            <li>
+                            </div>
+                            <div class="page">
                                 <a href="#recieps-log">Log</a>
-                            </li>
-                        </ul>
+                            </div>
+                        </div>
                     </div>
                 </div>
 			</div>
         </div>
     </div>
+</div>
 </div>
\ No newline at end of file
