diff --git a/templates/base.html b/templates/base.html
index a48c716..ab0d3c2 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -5,54 +5,85 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{% block title %}AS215085 - Network tools{% endblock %}</title>
     <link rel="icon" type="image/png" href="/static/img/favicon.png">
-    <script src="/static/js/bootstrap.bundle.min.js"></script>
+    
     <link href="/static/css/bootstrap.min.css" rel="stylesheet">
     <link href="/static/css/style.css" rel="stylesheet">
 </head>
 <body>
-    <header>
-        <div class="header-content">
-            <a href="/"> <img src="/static/img/as215085-logo.png" alt="AS215085 Logo" style="height: 120px; opacity: 1;!important"> </a>
-            <h2><b>{{ hostname }}</b></h2>
-            <p><b>Proudly delivering the backbone for PixelHosting's services</b></p>
-        </div>
-    </header>
-    <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #07AAF9;">
+
+    <nav class="navbar fixed-top d-lg-none mobile-header">
         <div class="container-fluid">
-            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
+            <a class="navbar-brand" href="/">
+                <img src="/static/img/as215085-logo.png" alt="AS215085 Logo">
+            </a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebarNav" aria-controls="sidebarNav">
                 <span class="navbar-toggler-icon"></span>
             </button>
-            <div class="collapse navbar-collapse" id="navbarNav">
-                <ul class="navbar-nav justify-content-center w-100">
-                    <li class="nav-item"><a class="nav-link text-white" href="/">Home</a></li>
-                    <li class="nav-item"><a class="nav-link text-white" href="/bgp">BGP summary</a></li>
-					<li class="nav-item"><a class="nav-link text-white" href="/bgp/history">BGP route history</a></li>
-					<li class="nav-item"><a class="nav-link text-white" href="/bgp/dampened">BGP dampening</a></li>
-                    <li class="nav-item"><a class="nav-link text-white" href="/bgp-route">BGP route lookup</a></li>
-                    <li class="nav-item"><a class="nav-link text-white" href="/visual-route">BGP route visualizer</a></li>
-                    <li class="nav-item"><a class="nav-link text-white" href="/rpki">RPKI lookup</a></li>
-                    <li class="nav-item"><a class="nav-link text-white" href="/arp">ARP table</a></li>
-                    <li class="nav-item"><a class="nav-link text-white" href="/neighbors">Neighbor table</a></li>
-                    <li class="nav-item"><a class="nav-link text-white" href="/interfaces">Interface table</a></li>
-                    <li class="nav-item"><a class="nav-link text-white" href="/firewall">Firewall summary</a></li>
-                    <li class="nav-item"><a class="nav-link text-white" href="/stats">Stats</a></li>
+        </div>
+    </nav>
+
+    <nav class="sidebar offcanvas-lg offcanvas-start" tabindex="-1" id="sidebarNav">
+        <div class="offcanvas-header d-lg-none">
+            <h5 class="offcanvas-title" id="sidebarNavLabel">Menu</h5>
+            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#sidebarNav" aria-label="Close"></button>
+        </div>
+        
+        <div class="offcanvas-body p-0 d-flex flex-column">
+            <div>
+                <div class="sidebar-header">
+                    <div class="vyos-info">
+                        <img src="/static/img/vyos-logo.svg" alt="VyOS Logo" class="vyos-logo">
+                    </div>
+                    <p class="sidebar-version">Version: {{ vyos_version }}</p>
+                    <p class="sidebar-hostname">{{ hostname }}</p>
+                </div>
+
+                <ul class="nav flex-column">
+                    <li class="nav-item"><a class="nav-link" href="/"><img src="/static/img/menu/home.png" class="nav-icon"><span>Home</span></a></li>
+                    <li class="nav-item"><a class="nav-link" href="/bgp"><img src="/static/img/menu/wired.png" class="nav-icon"><span>BGP Summary</span></a></li>
+                    <li class="nav-item"><a class="nav-link" href="/bgp/history"><img src="/static/img/graph.png" class="nav-icon"><span>BGP History</span></a></li>
+                    <li class="nav-item"><a class="nav-link" href="/bgp/dampened"><img src="/static/img/menu/graph-down.png" class="nav-icon"><span>BGP Dampening</span></a></li>
+                    <li class="nav-item"><a class="nav-link" href="/bgp-route"><img src="/static/img/menu/loupe.png" class="nav-icon"><span>BGP Route Lookup</span></a></li>
+					<li class="nav-item"><a class="nav-link" href="/dhcpv6-leases"><img src="/static/img/menu/dhcp.png" class="nav-icon"><span>DHCPV6 lease Lookup</span></a></li>
+                    <li class="nav-item"><a class="nav-link" href="/visual-route"><img src="/static/img/menu/strategy.png" class="nav-icon"><span>BGP Visualizer</span></a></li>
+                    <li class="nav-item"><a class="nav-link" href="/rpki"><img src="/static/img/menu/shield.png" class="nav-icon"><span>RPKI Lookup</span></a></li>
+                    <li class="nav-item"><a class="nav-link" href="/arp"><img src="/static/img/menu/cable.png" class="nav-icon"><span>ARP Table</span></a></li>
+                    <li class="nav-item"><a class="nav-link" href="/neighbors"><img src="/static/img/menu/cable.png" class="nav-icon"><span>Neighbor Table</span></a></li>
+                    <li class="nav-item"><a class="nav-link" href="/interfaces"><img src="/static/img/menu/sitemap.png" class="nav-icon"><span>Interface Table</span></a></li>
+                    <li class="nav-item"><a class="nav-link" href="/firewall"><img src="/static/img/menu/firewall.png" class="nav-icon"><span>Firewall</span></a></li>
+                    <li class="nav-item"><a class="nav-link" href="/stats"><img src="/static/img/menu/pie-chart.png" class="nav-icon"><span>Stats</span></a></li>
                 </ul>
             </div>
+            
+            <div class="sidebar-footer">
+                <button id="sidebar-toggle" class="btn">
+                    <img src="/static/img/menu/left-arrow.png" class="nav-icon">
+                </button>
+            </div>
         </div>
     </nav>
-    <main>
-        {% block content %}
-        {% endblock %}
-    </main>
-    <footer>
-        <p>&copy; 2020 - <span id="year"></span> AS215085 (PixelHosting). All rights reserved.</p>
-        <script> document.getElementById("year").textContent = new Date().getFullYear(); </script>
-    </footer>
-    <script src="/static/js/materialize.min.js"></script>
-    <div id="progress">
-        <span id="progress-value">&#x2191;</span>
+
+    <div class="main-content-wrapper">
+        <header class="page-header">
+		    <div class="page-header-content">
+		        <a href="/"> <img src="/static/img/as215085-logo.png" alt="AS215085 Logo" style="height: 120px; opacity: 1;!important"> </a>
+			    <p><b>Proudly delivering the backbone for PixelHosting’s services</b></p>
+                {% block page_header %}{% endblock %}
+			</div>
+        </header>
+        
+        <main class="container-fluid py-4">
+		    <div class="main-content-wrapper1">
+                {% block content %}
+                {% endblock %}
+			</div>
+        </main>
+        
+        <footer>
+            <p>&copy; 2020 - <span id="year"></span> AS215085 (PixelHosting). All rights reserved.</p>
+        </footer>
     </div>
-    <script src="/static/js/back_to_top.js"></script>
+    
     <div id="notificationModal" class="modal-overlay" style="display: none;">
         <div class="modal-content">
             <h4 id="notificationTitle">Notification</h4>
@@ -72,5 +103,29 @@
             </div>
         </div>
     </div>
+	
+    <script src="/static/js/bootstrap.bundle.min.js"></script>
+    <script>
+        document.getElementById("year").textContent = new Date().getFullYear();
+
+        const sidebarToggle = document.getElementById('sidebar-toggle');
+        const body = document.body;
+
+        const applySidebarState = () => {
+            if (localStorage.getItem('sidebar-collapsed') === 'true') {
+                body.classList.add('sidebar-collapsed');
+            } else {
+                body.classList.remove('sidebar-collapsed');
+            }
+        };
+
+        sidebarToggle.addEventListener('click', () => {
+            body.classList.toggle('sidebar-collapsed');
+            const isCollapsed = body.classList.contains('sidebar-collapsed');
+            localStorage.setItem('sidebar-collapsed', isCollapsed);
+        });
+
+        document.addEventListener('DOMContentLoaded', applySidebarState);
+    </script>
 </body>
-</html>
+</html>
\ No newline at end of file
