diff --git a/attached_assets/image_1762646832779.png b/attached_assets/image_1762646832779.png
new file mode 100644
index 0000000..67c2bda
Binary files /dev/null and b/attached_assets/image_1762646832779.png differ
diff --git a/static/css/styles.css b/static/css/styles.css
index c0ba151..bdef829 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -65,29 +65,26 @@ body::after {
 .navbar-inner {
     display: flex;
     align-items: center;
-    padding: 12px 24px;
-    background: rgba(0, 0, 0, 0.5);
-    backdrop-filter: blur(12px);
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    border-radius: 16px;
+    padding: 16px 32px;
+    background: transparent;
 }
 
 .navbar-logo {
     display: flex;
     align-items: center;
-    padding-right: 20px;
-    border-right: 1px solid rgba(255, 255, 255, 0.1);
+    padding-right: 24px;
+    border-right: 1px solid rgba(255, 255, 255, 0.15);
     margin-right: auto;
 }
 
 .navbar-logo img {
-    height: 36px;
+    height: 40px;
     display: block;
 }
 
 .navbar-links {
     display: flex;
-    gap: 8px;
+    gap: 32px;
     align-items: center;
     position: absolute;
     left: 50%;
@@ -95,19 +92,20 @@ body::after {
 }
 
 .navbar-links a {
-    color: #d1d5db;
+    color: #9ca3af;
     text-decoration: none;
     font-family: var(--font-body);
     font-weight: 500;
-    font-size: 14px;
-    padding: 8px 16px;
-    border-radius: 8px;
-    transition: all 0.2s ease;
+    font-size: 15px;
+    transition: color 0.2s ease;
 }
 
 .navbar-links a:hover {
     color: #ffffff;
-    background: rgba(255, 255, 255, 0.1);
+}
+
+.navbar-links a.active {
+    color: #3b82f6;
 }
 
 .menu-button {
diff --git a/templates/base.html b/templates/base.html
index 99412f9..52c702f 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -44,22 +44,30 @@
     <script>
         const menuButton = document.querySelector('.menu-button');
         const navSide = document.querySelector('.nav-side');
-        const navLinks = document.querySelectorAll('.nav-side a'); // Select all links inside nav-side
+        const navLinks = document.querySelectorAll('.nav-side a');
 
         menuButton.addEventListener('click', () => {
             if (navSide.style.display === 'none' || navSide.style.display === '') {
-                navSide.style.display = 'flex'; // Show the nav-side with flex
+                navSide.style.display = 'flex';
             } else {
-                navSide.style.display = 'none'; // Hide the nav-side
+                navSide.style.display = 'none';
             }
         });
 
-        // Add event listeners to each link
         navLinks.forEach(link => {
             link.addEventListener('click', () => {
-                navSide.style.display = 'none'; // Hide the nav-side
+                navSide.style.display = 'none';
             });
         });
+
+        // Highlight active page
+        const currentPath = window.location.pathname;
+        const navbarLinks = document.querySelectorAll('.navbar-links a');
+        navbarLinks.forEach(link => {
+            if (link.getAttribute('href') === currentPath) {
+                link.classList.add('active');
+            }
+        });
     </script>
     <!-- This is where child templates will insert their content -->
     {% block content %}