diff --git a/hub/services/static/js/nav.js b/hub/services/static/js/nav.js
deleted file mode 100644
index e756e98..0000000
--- a/hub/services/static/js/nav.js
+++ /dev/null
@@ -1,96 +0,0 @@
-document.addEventListener('DOMContentLoaded', function () {
-    // Mobile navigation toggle functionality
-    const navToggle = document.getElementById('navToggle');
-    const navMenu = document.getElementById('navMenu');
-    const headerNav = document.getElementById('headerNav');
-    const topLine = document.getElementById('topLine');
-    const middleLine = document.getElementById('middleLine');
-    const bottomLine = document.getElementById('bottomLine');
-
-    let isMenuOpen = false;
-
-    // Toggle mobile menu
-    navToggle.addEventListener('click', function () {
-        isMenuOpen = !isMenuOpen;
-
-        // Toggle menu visibility classes
-        if (isMenuOpen) {
-            navMenu.classList.remove('nav__menu-hidden');
-            navMenu.classList.add('nav__menu-active');
-            navToggle.setAttribute('aria-expanded', 'true');
-
-            // Animate hamburger to X
-            topLine.classList.add('svg-line-top');
-            middleLine.classList.add('svg-line-center');
-            bottomLine.classList.add('svg-line-bottom');
-        } else {
-            navMenu.classList.remove('nav__menu-active');
-            navMenu.classList.add('nav__menu-hidden');
-            navToggle.setAttribute('aria-expanded', 'false');
-
-            // Animate X back to hamburger
-            topLine.classList.remove('svg-line-top');
-            middleLine.classList.remove('svg-line-center');
-            bottomLine.classList.remove('svg-line-bottom');
-        }
-    });
-
-    // Close menu when clicking on menu items (mobile)
-    const menuItems = navMenu.querySelectorAll('.menu__item-link');
-    menuItems.forEach(function (item) {
-        item.addEventListener('click', function () {
-            if (window.innerWidth < 992 && isMenuOpen) {
-                // Trigger the toggle to close menu
-                navToggle.click();
-            }
-        });
-    });
-
-    // Header scroll behavior
-    let isAtTop = true;
-
-    function handleScroll() {
-        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-        const newAtTop = scrollTop <= 200;
-
-        if (newAtTop !== isAtTop) {
-            isAtTop = newAtTop;
-
-            if (isAtTop) {
-                headerNav.classList.remove('header-nav--fixed');
-                headerNav.classList.add('header-nav--top');
-            } else {
-                headerNav.classList.remove('header-nav--top');
-                headerNav.classList.add('header-nav--fixed');
-            }
-        }
-    }
-
-    // Throttle scroll events for better performance
-    let scrollThrottle = false;
-    window.addEventListener('scroll', function () {
-        if (!scrollThrottle) {
-            requestAnimationFrame(function () {
-                handleScroll();
-                scrollThrottle = false;
-            });
-            scrollThrottle = true;
-        }
-    });
-
-    // Handle window resize to ensure proper menu state
-    window.addEventListener('resize', function () {
-        if (window.innerWidth >= 992 && isMenuOpen) {
-            // Reset menu state on desktop
-            isMenuOpen = false;
-            navMenu.classList.remove('nav__menu-active');
-            navMenu.classList.add('nav__menu-hidden');
-            navToggle.setAttribute('aria-expanded', 'false');
-
-            // Reset hamburger animation
-            topLine.classList.remove('svg-line-top');
-            middleLine.classList.remove('svg-line-center');
-            bottomLine.classList.remove('svg-line-bottom');
-        }
-    });
-});
\ No newline at end of file
diff --git a/hub/services/templates/base.html b/hub/services/templates/base.html
index dcc291b..9a0bee3 100644
--- a/hub/services/templates/base.html
+++ b/hub/services/templates/base.html
@@ -23,9 +23,10 @@
     <script defer data-api="/api/event" data-domain="servala.com" src="/js/script.js"></script>
     {% endif %}
     <script defer src="{% static "js/htmx204.min.js" %}"></script>
+    <script defer src="{% static "js/alpine-collapse.min.js" %}"></script>
+    <script defer src="{% static "js/servala-main.js" %}"></script>
     <script defer src="{% static "js/bootstrap.bundle.min.js" %}"></script>
     <script defer src="{% static "js/servala-addons.js" %}"></script>
-    <script defer src="{% static "js/nav.js" %}"></script>
     {% block extra_js %}{% endblock %}
 </head>
 <body>
@@ -40,8 +41,43 @@
           </div>
         </div>
         
-        <header class="site-header position-relative">
-          <div class="header-nav header-nav--top" id="headerNav">
+        <header class="site-header position-relative" 
+                x-data="{ 
+                    isMenuOpen: false, 
+                    isAtTop: true,
+                    toggleMenu() {
+                        this.isMenuOpen = !this.isMenuOpen;
+                    },
+                    closeMenu() {
+                        if (window.innerWidth < 992 && this.isMenuOpen) {
+                            this.isMenuOpen = false;
+                        }
+                    },
+                    handleScroll() {
+                        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+                        this.isAtTop = scrollTop <= 200;
+                    }
+                }"
+                x-init="
+                    let scrollThrottle = false;
+                    window.addEventListener('scroll', () => {
+                        if (!scrollThrottle) {
+                            requestAnimationFrame(() => {
+                                handleScroll();
+                                scrollThrottle = false;
+                            });
+                            scrollThrottle = true;
+                        }
+                    });
+                    window.addEventListener('resize', () => {
+                        if (window.innerWidth >= 992 && isMenuOpen) {
+                            isMenuOpen = false;
+                        }
+                    });
+                ">
+          <div class="header-nav" 
+               :class="isAtTop ? 'header-nav--top' : 'header-nav--fixed'" 
+               id="headerNav">
             <div class="container-xl mx-auto px-3 px-lg-0 position-relative">
               <div class="nav__wrapper d-flex justify-content-between align-items-center">
                 <div class="nav__brand logo">
@@ -49,27 +85,40 @@
                     <img src="{% static "img/header-logo.png" %}" alt="Servala Logo" width="191" height="43">
                   </a>
                 </div>
-                <div class="nav__menu nav__menu-hidden" id="navMenu">
+                <div class="nav__menu" 
+                     :class="isMenuOpen ? 'nav__menu-active' : 'nav__menu-hidden'" 
+                     id="navMenu">
                   <nav class="navbar d-lg-flex justify-content-lg-end align-items-lg-center">
                     <ul class="navbar__menu menu mr-lg-27">
-                        <li class="menu__item"><a class="menu__item-link" href="{% url 'services:homepage' %}">Home</a></li>
-                        <li class="menu__item"><a class="menu__item-link" href="{% url 'services:service_list' %}">Services</a></li>
-                        <li class="menu__item"><a class="menu__item-link" href="{% url 'services:provider_list' %}">Cloud Provider</a></li>
-                        <li class="menu__item"><a class="menu__item-link" href="{% url 'services:partner_list' %}">Partner</a></li>
-                        <li class="menu__item"><a class="menu__item-link" href="{% url 'services:article_list' %}">Articles</a></li>
-                        <li class="menu__item"><a class="menu__item-link" href="{% url 'services:about' %}">About</a></li>
+                        <li class="menu__item"><a class="menu__item-link" href="{% url 'services:homepage' %}" @click="closeMenu()">Home</a></li>
+                        <li class="menu__item"><a class="menu__item-link" href="{% url 'services:service_list' %}" @click="closeMenu()">Services</a></li>
+                        <li class="menu__item"><a class="menu__item-link" href="{% url 'services:provider_list' %}" @click="closeMenu()">Cloud Provider</a></li>
+                        <li class="menu__item"><a class="menu__item-link" href="{% url 'services:partner_list' %}" @click="closeMenu()">Partner</a></li>
+                        <li class="menu__item"><a class="menu__item-link" href="{% url 'services:article_list' %}" @click="closeMenu()">Articles</a></li>
+                        <li class="menu__item"><a class="menu__item-link" href="{% url 'services:about' %}" @click="closeMenu()">About</a></li>
                     </ul>
                     <ul class="menu-cta mb-0">
-                      <li class="mr-17"><a class="btn btn-outline-light btn-outline-primary" href="{% url 'services:contact' %}" role="button">Contact</a></li>
+                      <li class="mr-17"><a class="btn btn-outline-light btn-outline-primary" href="{% url 'services:contact' %}" role="button" @click="closeMenu()">Contact</a></li>
                     </ul>
                   </nav>
                 </div>
                 <div class="nav__toggle">
-                  <button id="navToggle" name="menu" class="nav__button" role="button" aria-expanded="false" aria-controls="navMenu">
+                  <button @click="toggleMenu()" 
+                          name="menu" 
+                          class="nav__button" 
+                          role="button" 
+                          :aria-expanded="isMenuOpen.toString()" 
+                          aria-controls="navMenu">
                     <svg class="nav__button-svg" width="22" height="24">
-                      <line class="button-svg__line" id="topLine" x1="0" x2="22" y1="6" y2="6"></line>
-                      <line class="button-svg__line" id="middleLine" x1="0" x2="22" y1="12" y2="12"></line>
-                      <line class="button-svg__line" id="bottomLine" x1="0" x2="22" y1="18" y2="18"></line>
+                      <line class="button-svg__line" 
+                            :class="isMenuOpen ? 'svg-line-top' : ''" 
+                            x1="0" x2="22" y1="6" y2="6"></line>
+                      <line class="button-svg__line" 
+                            :class="isMenuOpen ? 'svg-line-center' : ''" 
+                            x1="0" x2="22" y1="12" y2="12"></line>
+                      <line class="button-svg__line" 
+                            :class="isMenuOpen ? 'svg-line-bottom' : ''" 
+                            x1="0" x2="22" y1="18" y2="18"></line>
                     </svg>
                   </button>
                 </div>