diff --git a/templates/backend/base.html b/templates/backend/base.html
index 63913c1..09f226f 100644
--- a/templates/backend/base.html
+++ b/templates/backend/base.html
@@ -1 +1,35 @@
-{% extends "base.html" %}
\ No newline at end of file
+{% extends "base.html" %}
+
+{% block sidebar %}
+    <div class="flex flex-col gap-4 w-full">
+        <div class="flex flex-col gap-1">
+            <div class="text-neutral border-b border-neutral font-bold text-sm opacity-40 mb-2">Members</div>
+            <a class="flex flex-row gap-2 items-center hover:bg-neutral-content rounded-md p-2 cursor-default hover:cursor-pointer">
+                <i class="fa-solid fa-users"></i>
+                <span>Members</span>
+            </a>
+            <a class="flex flex-row gap-2 items-center hover:bg-neutral-content rounded-md p-2">
+                <i class="fa-solid fa-users"></i>
+                <span>Members</span>
+            </a>
+        </div>
+
+        <div>
+            <div>Members</div>
+            <a>
+                <i class="fa-solid fa-users"></i>
+                <span>Members</span>
+            </a>
+        </div>
+    </div>
+
+
+    <ul class="menu bg-base-200 rounded-box w-56">
+        <li class="menu-title">Members</li>
+        <li class="menu-active">
+            <a>
+                <i class="fa-solid fa-users w-5 h-5 mr-2 self-center"></i>Members
+            </a>
+        </li>
+    </ul>
+{% endblock sidebar %}
\ No newline at end of file
diff --git a/templates/base.html b/templates/base.html
index 3640d3a..1b246a6 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -25,7 +25,28 @@
     </head>
 
     <body>
-        <div class="navbar bg-base-200 shadow-sm">
+        <header id="site-header" class="sticky top-0 z-50 bg-white shadow transition-all duration-300">
+            <div class="mx-auto max-w-6xl px-6 py-4 flex items-center justify-between transition-all duration-300">
+                <h1 class="text-2xl font-bold tracking-tight transition-all duration-300">MY LOGO</h1>
+
+                <nav class="flex items-center space-x-6 text-lg">
+                    <a href="#" class="hover:text-blue-600 transition-colors">Home</a>
+                    <a href="#" class="hover:text-blue-600 transition-colors">About</a>
+                    <a href="#" class="hover:text-blue-600 transition-colors">Contact</a>
+                </nav>
+            </div>
+        </header>
+
+        <main class="mx-auto max-w-6xl px-6 pt-8 space-y-8">
+            <p class="text-gray-700">
+                Scroll down to see the navbar shrink
+            </p>
+
+            <div class="h-[2000px] bg-gray-200 rounded-lg"></div>
+        </main>
+
+
+        {% comment %}<div class="navbar bg-base-200 shadow-sm sticky top-0 z-10">
             <div class="flex-1">
                 <label for="drawer-button" aria-label="open sidebar" class="btn btn-square btn-outline lg:hidden">
                     <!-- Sidebar toggle icon -->
@@ -58,12 +79,34 @@
                 {% block content %}PAGE CONTENT{% endblock content %}
             </div>
 
-            <div class="drawer-side">
+            <div class="drawer-side z-0">
                 <label for="drawer-button" aria-label="close sidebar" class="drawer-overlay"></label>
                 <div class="flex min-h-full flex-col items-start bg-base-200 py-4 px-8">
                     {% block sidebar %}SIDEBAR CONTENT{% endblock sidebar %}
                 </div>
             </div>
-        </div>
+        </div>{% endcomment %}
     </body>
+
+    <script>
+        document.addEventListener("DOMContentLoaded", () => {
+            const header = document.getElementById("site-header");
+            let lastScrollY = window.scrollY;
+            const threshold = 40; // Amount to scroll before shrinking
+
+            const onScroll = () => {
+                const current = window.scrollY;
+
+                if (current > threshold) {
+                    header.classList.add("navbar-small");
+                } else {
+                    header.classList.remove("navbar-small");
+                }
+
+                lastScrollY = current;
+            };
+
+            window.addEventListener("scroll", onScroll, {passive: true});
+        });
+    </script>
 </html>
\ No newline at end of file
diff --git a/templates/members/member_filter.html b/templates/members/member_filter.html
index 008ef0b..6ceae66 100644
--- a/templates/members/member_filter.html
+++ b/templates/members/member_filter.html
@@ -1,3 +1,5 @@
 {% extends "backend/base.html" %}
 
-{% block content %}test <i class="fa-solid fa-hockey-puck"></i>{% endblock content %}
\ No newline at end of file
+{% block content %}
+    <div class="h-full">1</div>
+{% endblock content %}
\ No newline at end of file
diff --git a/theme/static_src/src/styles.css b/theme/static_src/src/styles.css
index e8b2e53..f46af46 100644
--- a/theme/static_src/src/styles.css
+++ b/theme/static_src/src/styles.css
@@ -19,4 +19,21 @@
 @theme {
     --font-jersey: Graduate, sans-serif;
     --font-sans: Open Sans, Noto Sans, Barlow Semi Condensed, Ubuntu, Fira Sans, Catamaran, Cabin, Roboto, sans-serif;
+}
+
+@layer utilities {
+    .navbar-small {
+    }
+
+    .navbar-small > div {
+        @apply py-1;
+    }
+
+    .navbar-small h1 {
+        @apply text-lg;
+    }
+
+    .navbar-small nav {
+        @apply text-base;
+    }
 }
\ No newline at end of file
