diff --git a/static/navbar.css b/static/navbar.css
index 325a8b6e06376cddd333fe845c5b6460b22bfea0..bc20eba0abba1c9bb79e3308e173c7974013a18f 100644
--- a/static/navbar.css
+++ b/static/navbar.css
@@ -11,7 +11,7 @@ body{
     background: #C6EBE8;
 }
 .my-nav{
-    top: 0;
+    /* top: 0;
     width: 100%;
     height: 78px;
     background: #C6EBE8;
@@ -20,18 +20,36 @@ body{
     justify-content: space-between;
     position: fixed;
     z-index: 10;
+    transition: all 0.2s linear; */
+    height: 100px; /* Increase the height of the nav container */
+    display: flex;
+    justify-content: space-between;
+    position: fixed;
+    width: 100%;
+    z-index: 10;
     transition: all 0.2s linear;
+    backdrop-filter: blur(5px);
+    background: #C6EBE8;
 }
 .my-nav .icon{
-    flex-basis: 200px;
+    /* flex-basis: 200px;
     margin-top: 10px;
     margin-left: 5px;
     margin-bottom: 7px;
     background-image: url(https://static.igem.wiki/teams/5054/logo-kleur.svg);
     background-position-x: -30px;
     text-decoration: none;
+    background-repeat: no-repeat; */
+    flex-basis: 200px; /* Make sure this is large enough for the logo */
+    height: 100%; /* Ensure the icon container height matches the nav */
+    margin-top: 10px;
+    margin-left: 30px;
+    margin-bottom: 7px;
+    background-image: url(https://static.igem.wiki/teams/5054/logo-kleur.svg);
+    background-size: contain; /* Adjust to contain the entire logo */
+    background-position: center; /* Center the logo */
     background-repeat: no-repeat;
-    overflow: visible
+    overflow: visible; /* Prevent cutting off the logo */
 }
 .my-navbar{
     height: 50px;