diff --git a/src/app/components/templates/sidebar.php b/src/app/components/templates/sidebar.php
index 44a567630b9117d6367663bc01b4eb9e95da82b8..2bd988f86ff24e0bca6f4d9963e5342af2a5ca49 100644
--- a/src/app/components/templates/sidebar.php
+++ b/src/app/components/templates/sidebar.php
@@ -5,7 +5,7 @@
         <sidebar>
             <div id="spacer"></div>
             <ul>
-                <li>1</li>
+                <li>awaalll</li>
                 <li>2</li>
                 <li>1</li>
                 <li>2</li>
diff --git a/src/public/styles/home/home.css b/src/public/styles/home/home.css
index 3abbd23a66f8205ff5c614515f46a03223cdb35f..e5d3737f7ac51b24d19861d8a116757078b5db03 100644
--- a/src/public/styles/home/home.css
+++ b/src/public/styles/home/home.css
@@ -7,7 +7,7 @@ body {
 
 div#wrapper {
     position: absolute;
-    top: 10%;
+    top: var(--navbar-height);
 
     display: grid;
     grid-template-columns: 1fr 5fr;
@@ -25,7 +25,7 @@ div#card-container {
     width: 100%;
     max-height: 100%;
 
-    background-color: green;
+    background-color: var(--color-theme-base);
 
     overflow-y: scroll;
 }
\ No newline at end of file
diff --git a/src/public/styles/styles.css b/src/public/styles/styles.css
index 8233883e2ee082475feeca400ebcfaae181fdf76..d74c86bce58647ccdeaf23b528631157665307ee 100644
--- a/src/public/styles/styles.css
+++ b/src/public/styles/styles.css
@@ -4,8 +4,11 @@
     --color-theme-3: #EFD595;
     --color-theme-base: #FFFFFF;
     --color-text: #000000;
+    --color-border: #d9d9d9;
 
     margin: 0;
     box-sizing: border-box;
 
+
+    --navbar-height: 5%;
 }
\ No newline at end of file
diff --git a/src/public/styles/templates/navbar.css b/src/public/styles/templates/navbar.css
index 92bf7963b44d0433926d3eb6bd8f1a7f4aea6ebe..820b540b718f5898246028e563e3439090be528d 100644
--- a/src/public/styles/templates/navbar.css
+++ b/src/public/styles/templates/navbar.css
@@ -5,11 +5,13 @@ navbar {
     left: 0;
 
     width: 100%;
-    height: 10%;
+    height: var(--navbar-height);
 
     float: left;
 
     z-index: 10;
+
+    border: 0.1px solid var(--color-border);
 }
 
 navbar nav {
@@ -24,7 +26,7 @@ navbar nav {
 }
 
 navbar #background {
-    background-color: var(--color-theme-2);
+    background-color: var(--color-theme-base);
 
     position: relative;
     top: -100%;
diff --git a/src/public/styles/templates/sidebar.css b/src/public/styles/templates/sidebar.css
index fee4c35d8e9c5a83d3976f686c5f0ddd8c2409a3..9411a8b4a43e959d910b838d785cc4f6d94a26ff 100644
--- a/src/public/styles/templates/sidebar.css
+++ b/src/public/styles/templates/sidebar.css
@@ -1,18 +1,19 @@
 sidebar {
     position: fixed;
-    top: 10%;
     
     float: left;
 
     width: calc(1/6*100%);
     height:100%;
 
-    background-color: var(--color-theme-3);
+    background-color: var(--color-theme-base);
 
     overflow-y: scroll;
 
     -ms-overflow-style: none;
     scrollbar-width: none;
+
+    border-right: 0.1px solid var(--color-border);
 }
 
 sidebar::-webkit-scrollbar {