diff --git a/ui/src/App.vue b/ui/src/App.vue
index f58f1a5..b44821e 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -1,139 +1,77 @@
 <script setup>
-import { computed, onMounted, onUnmounted, ref, watch, defineAsyncComponent, h } from 'vue'
-import { list as langList, setI18nLanguage, loadLocaleMessages } from './config/lang.js'
+import { computed, onMounted, ref, watch, defineAsyncComponent } from 'vue'
+import { setI18nLanguage, loadLocaleMessages } from './config/lang.js'
 import { useAppStore } from './stores/app'
 import LoadingCard from '@/components/Loading.vue'
-import InfoCard from '@/components/Information.vue'
-import ThemeToggle from '@/components/ThemeToggle.vue'
-import LanguageSelector from '@/components/LanguageSelector.vue'
 import Toast from '@/components/Toast.vue'
-import AdminPanel from '@/components/Admin.vue'
+import Sidebar from '@/components/layout/Sidebar.vue'
+import MobileHeader from '@/components/layout/MobileHeader.vue'
 
 // Lazy load heavy components
-const SpeedtestCard = defineAsyncComponent({
-  loader: () => import('@/components/Speedtest.vue'),
-  delay: 300,
-  timeout: 10000,
-  loadingComponent: () => h('div', { class: 'flex items-center justify-center p-8' }, [
-    h('div', { class: 'w-8 h-8 border-4 border-primary-500 border-t-transparent rounded-full animate-spin' })
-  ])
-})
-
-const UtilitiesCard = defineAsyncComponent({
-  loader: () => import('@/components/Utilities.vue'),
-  delay: 300,
-  timeout: 10000,
-  loadingComponent: () => h('div', { class: 'flex items-center justify-center p-8' }, [
-    h('div', { class: 'w-8 h-8 border-4 border-primary-500 border-t-transparent rounded-full animate-spin' })
-  ])
-})
-
-const TrafficCard = defineAsyncComponent({
-  loader: () => import('@/components/TrafficDisplay.vue'),
-  delay: 300,
-  timeout: 10000,
-  loadingComponent: () => h('div', { class: 'flex items-center justify-center p-8' }, [
-    h('div', { class: 'w-8 h-8 border-4 border-primary-500 border-t-transparent rounded-full animate-spin' })
-  ])
-})
-
-const NodeListCard = defineAsyncComponent({
-  loader: () => import('@/components/Utilities/NodeList.vue'),
-  delay: 300,
-  timeout: 10000,
-  loadingComponent: () => h('div', { class: 'flex items-center justify-center p-8' }, [
-    h('div', { class: 'w-8 h-8 border-4 border-primary-500 border-t-transparent rounded-full animate-spin' })
-  ])
-})
+const InfoCard = defineAsyncComponent(() => import('@/components/Information.vue'))
+const AdminPanel = defineAsyncComponent(() => import('@/components/Admin.vue'))
+const TrafficCard = defineAsyncComponent(() => import('@/components/TrafficDisplay.vue'))
+
+// Lazy load tool components
+const PingComponent = defineAsyncComponent(() => import('@/components/Utilities/Ping.vue'))
+const Ping6Component = defineAsyncComponent(() => import('@/components/Utilities/Ping6.vue'))
+const MTRComponent = defineAsyncComponent(() => import('@/components/Utilities/MTR.vue'))
+const MTR6Component = defineAsyncComponent(() => import('@/components/Utilities/MTR6.vue'))
+const TracerouteComponent = defineAsyncComponent(() => import('@/components/Utilities/Traceroute.vue'))
+const Traceroute6Component = defineAsyncComponent(() => import('@/components/Utilities/Traceroute6.vue'))
+const IPerf3Component = defineAsyncComponent(() => import('@/components/Utilities/IPerf3.vue'))
+const SpeedtestComponent = defineAsyncComponent(() => import('@/components/Utilities/SpeedtestNet.vue'))
+const ShellComponent = defineAsyncComponent(() => import('@/components/Utilities/Shell.vue'))
+
+// Lazy load speedtest components
+const LibrespeedComponent = defineAsyncComponent(() => import('@/components/Speedtest/Librespeed.vue'))
+const FileSpeedtestComponent = defineAsyncComponent(() => import('@/components/Speedtest/FileSpeedtest.vue'))
 
 const appStore = useAppStore()
-const activeTab = ref('info')
+const currentView = ref('info')
 const adminMode = ref(false)
-const tabContainer = ref(null)
-const tabNavigation = ref(null)
-const showFab = ref(false)
-
-// Use store theme and language
-const isDark = computed(() => appStore.theme === 'dark')
-const currentLangCode = computed(() => appStore.language)
-
-const tabs = [
-  { id: 'info', label: 'Network Information', icon: 'M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9' },
-  { id: 'tools', label: 'Network Tools', icon: 'M15 12a3 3 0 11-6 0 3 3 0 016 0zM2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z' },
-  { id: 'speedtest', label: 'Speed Test', icon: 'M13 10V3L4 14h7v7l9-11h-7z' },
-  { id: 'traffic', label: 'Traffic Monitor', icon: 'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z' }
-]
-
-const filteredTabs = computed(() => {
-  if (!appStore.config.feature_iface_traffic) {
-    return tabs.filter(tab => tab.id !== 'traffic')
-  }
-  return tabs
-})
-
-const tabIndex = computed(() => {
-  return filteredTabs.value.findIndex(tab => tab.id === activeTab.value)
-})
 
-const currentLang = computed(() => {
-  for (const lang of langList) {
-    if (lang.value === currentLangCode.value) {
-      return lang
-    }
-  }
-  return null
-})
-
-const handleLangChange = async (newLang) => {
-  appStore.setLanguage(newLang)
-  await loadLocaleMessages(newLang)
-  setI18nLanguage(newLang)
-}
-
-const toggleTheme = () => {
-  const newTheme = appStore.theme === 'dark' ? 'light' : 'dark'
-  appStore.setTheme(newTheme)
-  
-  // Update html and body classes for overscroll background
-  if (newTheme === 'dark') {
-    document.documentElement.classList.add('dark')
-    document.body.classList.add('dark')
-    document.getElementById('app')?.classList.add('dark')
-  } else {
-    document.documentElement.classList.remove('dark')
-    document.body.classList.remove('dark')
-    document.getElementById('app')?.classList.remove('dark')
-  }
-}
-
-const changeTab = (tabId) => {
-  activeTab.value = tabId
-  // 延迟一下让动画开始，然后滚动到tab导航位置
-  setTimeout(() => {
-    if (tabNavigation.value) {
-      const rect = tabNavigation.value.getBoundingClientRect()
-      const scrollTop = window.pageYOffset + rect.top - 100 // 留100px的顶部空间
-      window.scrollTo({
-        top: scrollTop,
-        behavior: 'smooth'
-      })
-    }
-  }, 50)
-}
-
-const handleScroll = () => {
-  if (window.scrollY > 200) {
-    showFab.value = true
-  } else {
-    showFab.value = false
-  }
-}
-
-const scrollToTop = () => {
-  window.scrollTo({
-    top: 0,
-    behavior: 'smooth'
-  })
+// Component map for dynamic rendering
+const componentMap = {
+  info: InfoCard,
+  ping: PingComponent,
+  ping6: Ping6Component,
+  mtr: MTRComponent,
+  mtr6: MTR6Component,
+  traceroute: TracerouteComponent,
+  traceroute6: Traceroute6Component,
+  iperf3: IPerf3Component,
+  speedtest: SpeedtestComponent,
+  librespeed: LibrespeedComponent,
+  filespeed: FileSpeedtestComponent,
+  shell: ShellComponent,
+  traffic: TrafficCard
+}
+
+// View metadata
+const viewMeta = {
+  info: { title: 'Network Information', desc: 'View server network configuration and status' },
+  ping: { title: 'Ping Test', desc: 'Test connectivity to a host using ICMP' },
+  ping6: { title: 'Ping IPv6 Test', desc: 'Test IPv6 connectivity using ICMPv6' },
+  mtr: { title: 'MTR Analysis', desc: 'Analyze network path with packet loss and latency' },
+  mtr6: { title: 'MTR IPv6 Analysis', desc: 'Analyze IPv6 network path' },
+  traceroute: { title: 'Traceroute', desc: 'Trace the route packets take to a host' },
+  traceroute6: { title: 'Traceroute IPv6', desc: 'Trace IPv6 route to destination' },
+  iperf3: { title: 'IPerf3 Bandwidth Test', desc: 'Measure network bandwidth performance' },
+  speedtest: { title: 'Speedtest.net', desc: 'Test internet speed via Speedtest.net' },
+  librespeed: { title: 'Librespeed Test', desc: 'Test speed with Librespeed' },
+  filespeed: { title: 'File Speed Test', desc: 'Test download speed with file transfer' },
+  shell: { title: 'Shell Terminal', desc: 'Interactive command shell' },
+  traffic: { title: 'Traffic Monitor', desc: 'Monitor network interface traffic in real-time' }
+}
+
+const currentComponent = computed(() => componentMap[currentView.value] || InfoCard)
+const viewTitle = computed(() => viewMeta[currentView.value]?.title || 'Network Tools')
+const viewDescription = computed(() => viewMeta[currentView.value]?.desc || '')
+
+const handleNavigate = (viewId) => {
+  currentView.value = viewId
+  adminMode.value = false
 }
 
 const toggleAdminMode = () => {
@@ -144,11 +82,9 @@ const goBackToMain = () => {
   adminMode.value = false
 }
 
-// 设置页面标题（favicon由后端处理）
+// Page title update
 const updatePageInfo = () => {
   if (!appStore.config) return
-  
-  // 设置页面标题（如果后端没有注入的话）
   const title = appStore.config.app_title || appStore.config.location || 'Network Diagnostic Tools'
   if (document.title === 'Looking glass server') {
     document.title = title
@@ -158,7 +94,7 @@ const updatePageInfo = () => {
 onMounted(async () => {
   // Initialize the app store and wait for session ID
   await appStore.initialize()
-  
+
   // Load stored language
   await loadLocaleMessages(appStore.language)
   setI18nLanguage(appStore.language)
@@ -166,253 +102,71 @@ onMounted(async () => {
   // Update page info when config is loaded
   updatePageInfo()
 
-  // Set initial theme classes for overscroll background
+  // Set initial theme classes
   if (appStore.theme === 'dark') {
     document.documentElement.classList.add('dark')
     document.body.classList.add('dark')
-    document.getElementById('app')?.classList.add('dark')
-  } else {
-    document.documentElement.classList.remove('dark')
-    document.body.classList.remove('dark')
-    document.getElementById('app')?.classList.remove('dark')
   }
-
-  window.addEventListener('scroll', handleScroll)
 })
 
-// Watch for config changes to update page info
+// Watch for config changes
 watch(() => appStore.config, () => {
   updatePageInfo()
 }, { deep: true })
-
-onUnmounted(() => {
-  window.removeEventListener('scroll', handleScroll)
-})
 </script>
 
 <template>
-  <div class="min-h-screen bg-gradient-to-br from-primary-50 via-white to-primary-100 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900 transition-all duration-500" style="min-height: 100vh; min-height: 100dvh;">
-    <!-- Enhanced floating decorative elements -->
-    <div class="fixed inset-0 overflow-hidden pointer-events-none">
-      <div class="absolute -top-40 -right-40 w-96 h-96 bg-gradient-to-r from-primary-200/40 to-blue-300/30 dark:from-primary-800/20 dark:to-blue-900/10 rounded-full mix-blend-multiply filter blur-3xl opacity-70 animate-pulse-slow"></div>
-      <div class="absolute -bottom-40 -left-40 w-96 h-96 bg-gradient-to-r from-blue-200/40 to-primary-300/30 dark:from-blue-800/20 dark:to-primary-900/10 rounded-full mix-blend-multiply filter blur-3xl opacity-70 animate-pulse-slow" style="animation-delay: 2s;"></div>
-      <div class="absolute top-1/3 right-1/4 w-64 h-64 bg-gradient-to-r from-primary-100/30 to-sky-200/20 dark:from-primary-900/10 dark:to-sky-900/5 rounded-full mix-blend-multiply filter blur-2xl opacity-50 animate-pulse-slow" style="animation-delay: 4s;"></div>
-      <div class="absolute bottom-1/3 left-1/4 w-80 h-80 bg-gradient-to-r from-sky-100/30 to-primary-200/20 dark:from-sky-900/10 dark:to-primary-900/5 rounded-full mix-blend-multiply filter blur-2xl opacity-40 animate-pulse-slow" style="animation-delay: 6s;"></div>
-    </div>
-
-    <!-- Main container -->
-    <div class="relative z-10 min-h-screen">
-      <!-- Header -->
-      <header class="pt-8 pb-6 px-4">
-        <div class="max-w-6xl mx-auto text-center">
-          <!-- Logo/Icon -->
-          <div 
-            class="inline-flex items-center justify-center mb-4 animate-scale-in"
-            :class="[
-              appStore.config?.logo && (appStore.config.logo_type === 'text' || appStore.config.logo_type === 'emoji') 
-                ? 'min-w-14 h-14 px-4 py-2 bg-gradient-to-br from-primary-500 to-primary-600 rounded-xl shadow-lg shadow-primary-500/25' 
-                : appStore.config?.logo && (appStore.config.logo_type === 'svg' || appStore.config.logo_type === 'url' || appStore.config.logo_type === 'base64')
-                ? 'w-14 h-14'
-                : 'w-14 h-14 bg-gradient-to-br from-primary-500 to-primary-600 rounded-xl shadow-lg shadow-primary-500/25'
-            ]"
-          >
-            <!-- 根据logo类型显示不同内容 -->
-            <template v-if="appStore.config?.logo">
-              <!-- URL类型或base64图片 -->
-              <img 
-                v-if="appStore.config.logo_type === 'url' || appStore.config.logo_type === 'base64'"
-                :src="appStore.config.logo" 
-                alt="Logo" 
-                class="w-12 h-12 object-contain"
-                @error="($event) => $event.target.style.display = 'none'"
-              />
-              <!-- SVG类型 -->
-              <div 
-                v-else-if="appStore.config.logo_type === 'svg'"
-                class="w-12 h-12 flex items-center justify-center"
-                v-html="appStore.config.logo"
-              ></div>
-              <!-- Emoji类型 -->
-              <span 
-                v-else-if="appStore.config.logo_type === 'emoji'"
-                class="text-2xl"
-              >{{ appStore.config.logo }}</span>
-              <!-- 纯文本类型 - 智能适配 -->
-              <span 
-                v-else
-                class="font-bold text-white text-center leading-tight px-1"
-                :class="appStore.config.logo.length > 8 ? 'text-xs' : appStore.config.logo.length > 5 ? 'text-sm' : 'text-base'"
-              >{{ appStore.config.logo }}</span>
-            </template>
-            <!-- 默认SVG图标 -->
-            <svg 
-              v-else
-              class="w-7 h-7 text-white" 
-              fill="none" 
-              stroke="currentColor" 
-              stroke-width="2" 
-              viewBox="0 0 24 24"
-            >
-              <path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9v-9m0-9v9"/>
-            </svg>
-          </div>
-
-          <!-- Title and subtitle -->
-          <div class="space-y-3 animate-fade-in">
-            <h1 class="text-2xl md:text-3xl lg:text-4xl font-bold bg-gradient-to-r from-primary-600 via-primary-500 to-blue-600 bg-clip-text text-transparent tracking-tight">
-              {{ appStore.config?.app_title || 'Network Diagnostic Tools' }}
-            </h1>
-            <p class="text-base md:text-lg text-gray-600 dark:text-gray-300 font-medium max-w-2xl mx-auto">
-              {{ appStore.config?.location || 'Professional Looking Glass Server' }}
+  <div class="app-container h-screen flex bg-gray-50 dark:bg-gray-900">
+    <!-- Desktop Sidebar -->
+    <Sidebar
+      class="hidden md:flex flex-shrink-0"
+      :current-view="currentView"
+      :admin-mode="adminMode"
+      @navigate="handleNavigate"
+      @toggle-admin="toggleAdminMode"
+    />
+
+    <!-- Mobile Header -->
+    <MobileHeader
+      class="md:hidden"
+      :current-view="currentView"
+      :admin-mode="adminMode"
+      @navigate="handleNavigate"
+      @toggle-admin="toggleAdminMode"
+    />
+
+    <!-- Main Content Area -->
+    <main class="flex-1 overflow-auto md:pt-0 pt-14">
+      <!-- Loading State -->
+      <div v-if="appStore.connecting" class="flex items-center justify-center h-full">
+        <LoadingCard />
+      </div>
+
+      <!-- Admin Panel -->
+      <div v-else-if="adminMode" class="h-full">
+        <AdminPanel @back="goBackToMain" />
+      </div>
+
+      <!-- Main Content -->
+      <div v-else class="h-full">
+        <div class="max-w-5xl mx-auto px-4 md:px-6 py-6">
+          <!-- Page Header -->
+          <div class="mb-6">
+            <h2 class="text-xl font-semibold text-gray-900 dark:text-white">
+              {{ viewTitle }}
+            </h2>
+            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
+              {{ viewDescription }}
             </p>
-            
-            <!-- Status indicator -->
-            <div class="inline-flex items-center px-3 py-1.5 bg-white/70 dark:bg-gray-800/70 backdrop-blur-sm rounded-full border border-primary-200/50 dark:border-primary-700/50 shadow-lg">
-              <div class="w-2 h-2 bg-green-500 rounded-full mr-2 animate-pulse"></div>
-              <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Server Online</span>
-            </div>
           </div>
-        </div>
-      </header>
-
-      <!-- Main content area -->
-      <main class="pb-8">
-        <!-- Admin Panel -->
-        <AdminPanel v-if="adminMode" @back="goBackToMain" />
-        
-        <!-- Normal Application -->
-        <template v-else>
-          <LoadingCard v-if="appStore.connecting" />
-          <template v-else>
-            <div class="max-w-7xl mx-auto space-y-4 md:space-y-6 px-4">
-              <!-- Node List Card with enhanced mobile spacing -->
-              <div class="animate-slide-up">
-                <div class="bg-white/90 dark:bg-gray-800/90 backdrop-blur-sm rounded-xl shadow-lg border border-primary-200/30 dark:border-primary-700/30 overflow-hidden p-4 md:p-6">
-                  <div class="mb-3 md:mb-4">
-                    <h2 class="text-lg md:text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">Looking Glass Nodes Configuration</h2>
-                    <p class="text-sm text-gray-600 dark:text-gray-400">Select and test connectivity to different network nodes</p>
-                  </div>
-                  <NodeListCard />
-                </div>
-              </div>
-              <!-- Tab Navigation with improved mobile layout -->
-              <div ref="tabNavigation" class="animate-slide-up mt-6 md:mt-8" style="animation-delay: 0.1s;">
-                <div class="bg-white/60 dark:bg-gray-800/60 backdrop-blur-lg rounded-2xl shadow-lg border border-primary-200/30 dark:border-primary-700/30 p-2">
-                  <!-- Mobile: Scrollable horizontal tabs -->
-                  <div class="md:hidden overflow-x-auto">
-                    <div class="flex gap-2 min-w-max px-1">
-                      <button
-                        v-for="tab in filteredTabs"
-                        :key="tab.id"
-                        @click="changeTab(tab.id)"
-                        class="flex items-center space-x-2 px-3 py-2 rounded-xl font-medium transition-all duration-200 group whitespace-nowrap flex-shrink-0"
-                        :class="activeTab === tab.id 
-                          ? 'bg-gradient-to-r from-primary-500 to-primary-600 text-white shadow-lg' 
-                          : 'bg-white/50 dark:bg-gray-700/50 text-gray-700 dark:text-gray-300 hover:bg-white/80 dark:hover:bg-gray-700/80'"
-                      >
-                        <svg class="w-4 h-4 transition-transform duration-200" :class="activeTab === tab.id ? 'rotate-12' : 'group-hover:rotate-6'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="tab.icon"></path>
-                        </svg>
-                        <span class="text-sm">{{ tab.label }}</span>
-                      </button>
-                    </div>
-                  </div>
-                  <!-- Desktop: Regular flex layout -->
-                  <div class="hidden md:flex gap-2">
-                    <button
-                      v-for="tab in filteredTabs"
-                      :key="tab.id"
-                      @click="changeTab(tab.id)"
-                      class="flex items-center space-x-2 px-4 py-2.5 rounded-xl font-medium transition-all duration-200 group"
-                      :class="activeTab === tab.id 
-                        ? 'bg-gradient-to-r from-primary-500 to-primary-600 text-white shadow-lg' 
-                        : 'bg-white/50 dark:bg-gray-700/50 text-gray-700 dark:text-gray-300 hover:bg-white/80 dark:hover:bg-gray-700/80'"
-                    >
-                      <svg class="w-5 h-5 transition-transform duration-200" :class="activeTab === tab.id ? 'rotate-12' : 'group-hover:rotate-6'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="tab.icon"></path>
-                      </svg>
-                      <span>{{ tab.label }}</span>
-                    </button>
-                  </div>
-                </div>
-              </div>
-              
-              <!-- Tab Content with improved mobile spacing and dynamic height -->
-              <div class="relative mt-4 md:mt-6 overflow-hidden">
-                <div 
-                  class="flex transition-transform duration-300 ease-out"
-                  :style="{ transform: `translateX(-${tabIndex * 100}%)` }"
-                >
-                  <div 
-                    v-for="(tab, index) in filteredTabs" 
-                    :key="tab.id"
-                    class="w-full flex-shrink-0 px-1 md:px-0"
-                    :style="{ order: index }"
-                  >
-                    <InfoCard v-if="tab.id === 'info'" />
-                    <UtilitiesCard v-else-if="tab.id === 'tools'" />
-                    <SpeedtestCard v-else-if="tab.id === 'speedtest'" />
-                    <TrafficCard v-else-if="tab.id === 'traffic'" />
-                  </div>
-                </div>
-              </div>
-            </div>
-          </template>
-        </template>
-      </main>
-
-      <!-- Footer -->
-      <footer class="pb-8 px-4">
-        <div class="max-w-7xl mx-auto text-center">
-          <div class="inline-flex items-center justify-center space-x-2 text-sm text-gray-500 dark:text-gray-400">
-            <span>Powered by</span>
-            <a 
-              href="https://github.com/catcat-blog/NetMirror" 
-              target="_blank"
-              class="font-medium text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300 transition-colors duration-200"
-            >
-              NetMirror - Another Looking Glass Server
-            </a>
-          </div>
-        </div>
-      </footer>
-    </div>
-
-    <!-- Admin Button (Always Visible) -->
-    <button
-      @click="toggleAdminMode"
-      class="fixed bottom-8 right-8 z-50 w-12 h-12 flex items-center justify-center bg-white dark:bg-gray-700 rounded-full shadow-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-all duration-200 transform hover:scale-110 border border-gray-200 dark:border-gray-600"
-      :class="adminMode ? 'ring-2 ring-primary-500' : ''"
-      title="Admin Panel"
-    >
-      <svg class="w-5 h-5 text-gray-600 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
-      </svg>
-    </button>
-
-    <!-- Floating Action Button Group (scroll to top, theme) -->
-    <div class="fixed bottom-8 right-24 z-50">
-      <transition
-        enter-active-class="transition-all duration-300 ease-out"
-        enter-from-class="opacity-0 translate-y-4"
-        enter-to-class="opacity-100 translate-y-0"
-        leave-active-class="transition-all duration-200 ease-in"
-        leave-from-class="opacity-100 translate-y-0"
-        leave-to-class="opacity-0 translate-y-4"
-      >
-        <div v-if="showFab" class="flex items-center space-x-2">
-          <!-- Theme Toggle -->
-          <div class="w-12 h-12 flex items-center justify-center bg-white dark:bg-gray-700 rounded-full shadow-lg border border-gray-200 dark:border-gray-600">
-            <ThemeToggle :is-dark="isDark" @toggle="toggleTheme" />
+
+          <!-- Dynamic Component -->
+          <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
+            <component :is="currentComponent" />
           </div>
-          <!-- Scroll to Top -->
-          <button @click="scrollToTop" class="w-12 h-12 flex items-center justify-center bg-white dark:bg-gray-700 rounded-full shadow-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-all duration-200 transform hover:scale-110 border border-gray-200 dark:border-gray-600">
-            <svg class="w-5 h-5 text-gray-600 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path></svg>
-          </button>
         </div>
-      </transition>
-    </div>
+      </div>
+    </main>
 
     <!-- Toast Notifications -->
     <Toast />
@@ -420,127 +174,30 @@ onUnmounted(() => {
 </template>
 
 <style>
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
-
+/* Base styles - using system fonts for performance */
 html {
   scroll-behavior: smooth;
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
 }
 
 body {
   margin: 0;
   padding: 0;
-  line-height: 1.6;
+  line-height: 1.5;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-/* Enhanced animations */
-@keyframes fadeIn {
-  0% { opacity: 0; transform: translateY(20px); }
-  100% { opacity: 1; transform: translateY(0); }
-}
-
-@keyframes slideUp {
-  0% { opacity: 0; transform: translateY(30px); }
-  100% { opacity: 1; transform: translateY(0); }
-}
-
-@keyframes scaleIn {
-  0% { opacity: 0; transform: scale(0.9); }
-  100% { opacity: 1; transform: scale(1); }
-}
-
-@keyframes pulse-slow {
-  0%, 100% { opacity: 0.4; }
-  50% { opacity: 0.8; }
-}
-
-@keyframes bounce-gentle {
-  0%, 100% { 
-    transform: translateY(0);
-    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
-  }
-  50% { 
-    transform: translateY(-5px);
-    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
-  }
-}
-
-@keyframes slide-in-left {
-  0% { opacity: 0; transform: translateX(-20px); }
-  100% { opacity: 1; transform: translateX(0); }
-}
-
-@keyframes slide-in-right {
-  0% { opacity: 0; transform: translateX(20px); }
-  100% { opacity: 1; transform: translateX(0); }
-}
-
-@keyframes shake {
-  0%, 100% { transform: translateX(0); }
-  10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
-  20%, 40%, 60%, 80% { transform: translateX(2px); }
+/* App container */
+.app-container {
+  min-height: 100vh;
+  min-height: 100dvh;
 }
 
-.animate-fade-in {
-  animation: fadeIn 0.8s ease-out;
-}
-
-.animate-slide-up {
-  animation: slideUp 0.6s ease-out both;
-}
-
-.animate-scale-in {
-  animation: scaleIn 0.5s ease-out;
-}
-
-.animate-pulse-slow {
-  animation: pulse-slow 4s ease-in-out infinite;
-}
-
-.animate-bounce-gentle {
-  animation: bounce-gentle 2s ease-in-out infinite;
-}
-
-.animate-slide-in-left {
-  animation: slide-in-left 0.6s ease-out;
-}
-
-.animate-slide-in-right {
-  animation: slide-in-right 0.6s ease-out;
-}
-
-.animate-shake {
-  animation: shake 0.5s ease-in-out;
-}
-
-/* Mobile-friendly line clamping */
-.line-clamp-2 {
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-/* Mobile touch improvements */
-@media (hover: none) {
-  .group:hover .group-hover\:opacity-100 {
-    opacity: 1;
-  }
-  .group:hover .group-hover\:scale-110 {
-    transform: scale(1.1);
-  }
-  .group:hover .group-hover\:rotate-12 {
-    transform: rotate(12deg);
-  }
-}
-
-/* Custom scrollbar */
+/* Scrollbar styling */
 ::-webkit-scrollbar {
   width: 8px;
+  height: 8px;
 }
 
 ::-webkit-scrollbar-track {
@@ -548,49 +205,30 @@ body {
 }
 
 ::-webkit-scrollbar-thumb {
-  background: rgba(59, 130, 246, 0.3);
+  background: rgba(156, 163, 175, 0.4);
   border-radius: 4px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: rgba(59, 130, 246, 0.5);
+  background: rgba(156, 163, 175, 0.6);
 }
 
 .dark ::-webkit-scrollbar-thumb {
-  background: rgba(147, 197, 253, 0.3);
+  background: rgba(75, 85, 99, 0.5);
 }
 
 .dark ::-webkit-scrollbar-thumb:hover {
-  background: rgba(147, 197, 253, 0.5);
-}
-
-/* Enhanced glassmorphism/acrylic effect */
-.glass-effect {
-  background: rgba(255, 255, 255, 0.6);
-  backdrop-filter: blur(12px) saturate(180%);
-  -webkit-backdrop-filter: blur(12px) saturate(180%);
-}
-
-.dark .glass-effect {
-  background: rgba(31, 41, 55, 0.6);
+  background: rgba(75, 85, 99, 0.7);
 }
 
-/* Tab transitions */
-.tab-enter-active {
-  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-.tab-leave-active {
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-}
-
-.tab-enter-from {
-  opacity: 0;
-  transform: translateY(20px);
+/* Simple fade transition */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.15s ease;
 }
 
-.tab-leave-to {
+.fade-enter-from,
+.fade-leave-to {
   opacity: 0;
-  transform: translateY(-20px);
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/ui/src/assets/base.css b/ui/src/assets/base.css
index 0e1de19..c64f0a9 100644
--- a/ui/src/assets/base.css
+++ b/ui/src/assets/base.css
@@ -2,7 +2,7 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap");
+/* Using system fonts for fast loading - no external fonts */
 
 * {
   box-sizing: border-box;
@@ -10,53 +10,45 @@
 
 html {
   scroll-behavior: smooth;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-  /* Fix overscroll bounce background color */
-  background-color: #f0f7ff;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  background-color: #f9fafb;
 }
 
 html.dark {
-  background-color: #0f172a;
+  background-color: #111827;
 }
 
 body {
   margin: 0;
   padding: 0;
-  line-height: 1.6;
+  line-height: 1.5;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  /* Fix overscroll bounce background color */
-  background-color: #f0f7ff;
+  background-color: #f9fafb;
   overscroll-behavior: none;
 }
 
 body.dark {
-  background-color: #0f172a;
+  background-color: #111827;
 }
 
 #app {
   min-height: 100vh;
   min-height: 100dvh;
-  /* Fix overscroll bounce background color */
-  background: linear-gradient(to bottom right, #f0f7ff, #ffffff, #f0f7ff);
 }
 
-#app.dark {
-  background: linear-gradient(to bottom right, #0f172a, #1e293b, #0f172a);
-}
-
-/* Custom scrollbar */
+/* Custom scrollbar - minimal style */
 ::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
+  width: 8px;
+  height: 8px;
 }
 
 ::-webkit-scrollbar-track {
-  @apply bg-gray-100/50 dark:bg-gray-800/50;
+  background: transparent;
 }
 
 ::-webkit-scrollbar-thumb {
-  @apply bg-gray-300 dark:bg-gray-600 rounded-full border-2 border-transparent bg-clip-content;
+  @apply bg-gray-300 dark:bg-gray-600 rounded;
 }
 
 ::-webkit-scrollbar-thumb:hover {
@@ -78,7 +70,7 @@ body.dark {
 
 /* ApexCharts dark mode fixes */
 .apexcharts-tooltip {
-  @apply !bg-gray-800/80 !backdrop-blur-sm !border-gray-600;
+  @apply !bg-gray-800/90 !border-gray-600;
 }
 
 .apexcharts-tooltip-title,
@@ -86,10 +78,10 @@ body.dark {
   @apply !text-white;
 }
 
-/* Transitions */
+/* Simple transitions */
 .fade-enter-active,
 .fade-leave-active {
-  transition: opacity 0.3s ease;
+  transition: opacity 0.15s ease;
 }
 
 .fade-enter-from,
@@ -97,40 +89,19 @@ body.dark {
   opacity: 0;
 }
 
-.slide-up-enter-active,
-.slide-up-leave-active {
-  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+.slide-enter-active,
+.slide-leave-active {
+  transition: transform 0.2s ease, opacity 0.2s ease;
 }
 
-.slide-up-enter-from {
+.slide-enter-from {
   opacity: 0;
-  transform: translateY(30px);
+  transform: translateY(8px);
 }
 
-.slide-up-leave-to {
+.slide-leave-to {
   opacity: 0;
-  transform: translateY(-30px);
-}
-
-/* Loading animations */
-@keyframes shimmer {
-  0% {
-    background-position: -200px 0;
-  }
-  100% {
-    background-position: calc(200px + 100%) 0;
-  }
-}
-
-.shimmer {
-  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
-  background-size: 200px 100%;
-  animation: shimmer 1.5s infinite;
-}
-
-.dark .shimmer {
-  background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
-  background-size: 200px 100%;
+  transform: translateY(-8px);
 }
 
 /* Focus styles */
@@ -140,27 +111,22 @@ body.dark {
 
 /* Button styles */
 .btn-primary {
-  @apply bg-primary-500 hover:bg-primary-600 text-white font-medium py-2 px-4 rounded-lg transition-all duration-200 focus-ring shadow-md hover:shadow-lg hover:-translate-y-0.5;
+  @apply bg-primary-500 hover:bg-primary-600 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-150 focus-ring;
 }
 
 .btn-secondary {
-  @apply bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-900 dark:text-white font-medium py-2 px-4 rounded-lg transition-all duration-200 focus-ring shadow-md hover:shadow-lg hover:-translate-y-0.5;
+  @apply bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-900 dark:text-white font-medium py-2 px-4 rounded-lg transition-colors duration-150 focus-ring;
 }
 
 /* Card styles */
 .card-base {
-  @apply bg-white/60 dark:bg-gray-800/60 backdrop-blur-xl rounded-2xl shadow-lg border border-white/20 dark:border-gray-700/50 overflow-hidden transition-all duration-300;
+  @apply bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden;
 }
 
 .card-header {
-  @apply px-6 py-4;
+  @apply px-5 py-4 border-b border-gray-100 dark:border-gray-700;
 }
 
 .card-body {
-  @apply p-6;
-}
-
-/* Utility classes */
-.text-gradient {
-  @apply bg-gradient-to-r from-primary-600 to-purple-600 bg-clip-text text-transparent;
+  @apply p-5;
 }
diff --git a/ui/src/components/Loading.vue b/ui/src/components/Loading.vue
index 0f92981..51e8341 100644
--- a/ui/src/components/Loading.vue
+++ b/ui/src/components/Loading.vue
@@ -1,20 +1,9 @@
 <script setup>
-import { ref, onMounted } from 'vue'
-import { useMotion } from '@vueuse/motion'
-
-const cardRef = ref()
-const { apply } = useMotion(cardRef, {
-  initial: { opacity: 0, y: 20 },
-  enter: { opacity: 1, y: 0, transition: { duration: 500 } }
-})
-
-onMounted(() => {
-  apply()
-})
+// Simple loading component - no external dependencies
 </script>
 
 <template>
-  <div ref="cardRef" class="max-w-md mx-auto">
+  <div class="max-w-md mx-auto p-4">
     <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl border border-gray-200 dark:border-gray-700 p-8">
       <div class="text-center">
         <div class="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-r from-primary-500 to-primary-600 rounded-2xl mb-6">
@@ -22,10 +11,10 @@ onMounted(() => {
         </div>
         <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Connecting...</h3>
         <p class="text-gray-600 dark:text-gray-400 mb-6">Establishing connection to the server</p>
-        
+
         <!-- Progress bar -->
-        <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
-          <div class="bg-gradient-to-r from-primary-500 to-primary-600 h-2 rounded-full animate-pulse" style="width: 100%"></div>
+        <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 overflow-hidden">
+          <div class="bg-gradient-to-r from-primary-500 to-primary-600 h-2 rounded-full w-full animate-pulse"></div>
         </div>
       </div>
     </div>
diff --git a/ui/src/components/layout/MobileHeader.vue b/ui/src/components/layout/MobileHeader.vue
new file mode 100644
index 0000000..d3d7dbd
--- /dev/null
+++ b/ui/src/components/layout/MobileHeader.vue
@@ -0,0 +1,277 @@
+<script setup>
+import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
+import { useAppStore } from '@/stores/app'
+import { useNodesStore } from '@/stores/nodes'
+import NavGroup from './NavGroup.vue'
+
+const emit = defineEmits(['navigate', 'toggleAdmin'])
+
+const props = defineProps({
+  currentView: { type: String, default: 'info' },
+  adminMode: { type: Boolean, default: false }
+})
+
+const appStore = useAppStore()
+const nodesStore = useNodesStore()
+
+const isMenuOpen = ref(false)
+const isDark = computed(() => appStore.theme === 'dark')
+
+const nodes = computed(() => nodesStore.nodes || [])
+const selectedNode = computed(() => nodesStore.selectedNode)
+const currentNodeName = computed(() => {
+  if (selectedNode.value) return selectedNode.value.name
+  return appStore.config?.name || 'Select Node'
+})
+
+const selectNode = (node) => {
+  nodesStore.selectNode(node)
+}
+
+const toggleMenu = () => {
+  isMenuOpen.value = !isMenuOpen.value
+}
+
+const closeMenu = () => {
+  isMenuOpen.value = false
+}
+
+const toggleTheme = () => {
+  const newTheme = appStore.theme === 'dark' ? 'light' : 'dark'
+  appStore.setTheme(newTheme)
+  document.documentElement.classList.toggle('dark', newTheme === 'dark')
+  document.body.classList.toggle('dark', newTheme === 'dark')
+}
+
+// Navigation groups with feature flag support
+const navGroups = computed(() => {
+  const config = appStore.config || {}
+
+  const groups = [
+    {
+      id: 'info',
+      icon: 'globe',
+      label: 'Server Info',
+      items: [
+        { id: 'info', label: 'Network Information', icon: 'M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z' }
+      ]
+    },
+    {
+      id: 'connectivity',
+      icon: 'signal',
+      label: 'Connectivity',
+      items: [
+        { id: 'ping', label: 'Ping', icon: 'M5.636 18.364a9 9 0 010-12.728m12.728 0a9 9 0 010 12.728m-9.9-2.829a5 5 0 010-7.07m7.072 0a5 5 0 010 7.07M13 12a1 1 0 11-2 0 1 1 0 012 0z', flag: 'feature_ping' },
+        { id: 'ping6', label: 'Ping IPv6', icon: 'M5.636 18.364a9 9 0 010-12.728m12.728 0a9 9 0 010 12.728m-9.9-2.829a5 5 0 010-7.07m7.072 0a5 5 0 010 7.07M13 12a1 1 0 11-2 0 1 1 0 012 0z', flag: 'feature_ping6' }
+      ]
+    },
+    {
+      id: 'path',
+      icon: 'route',
+      label: 'Path Analysis',
+      items: [
+        { id: 'mtr', label: 'MTR', icon: 'M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5', flag: 'feature_mtr' },
+        { id: 'mtr6', label: 'MTR IPv6', icon: 'M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5', flag: 'feature_mtr6' },
+        { id: 'traceroute', label: 'Traceroute', icon: 'M9 6.75V15m6-6v8.25m.503 3.498l4.875-2.437c.381-.19.622-.58.622-1.006V4.82c0-.836-.88-1.38-1.628-1.006l-3.869 1.934c-.317.159-.69.159-1.006 0L9.503 3.252a1.125 1.125 0 00-1.006 0L3.622 5.689C3.24 5.88 3 6.27 3 6.695V19.18c0 .836.88 1.38 1.628 1.006l3.869-1.934c.317-.159.69-.159 1.006 0l4.994 2.497c.317.158.69.158 1.006 0z', flag: 'feature_traceroute' },
+        { id: 'traceroute6', label: 'Traceroute IPv6', icon: 'M9 6.75V15m6-6v8.25m.503 3.498l4.875-2.437c.381-.19.622-.58.622-1.006V4.82c0-.836-.88-1.38-1.628-1.006l-3.869 1.934c-.317.159-.69.159-1.006 0L9.503 3.252a1.125 1.125 0 00-1.006 0L3.622 5.689C3.24 5.88 3 6.27 3 6.695V19.18c0 .836.88 1.38 1.628 1.006l3.869-1.934c.317-.159.69-.159 1.006 0l4.994 2.497c.317.158.69.158 1.006 0z', flag: 'feature_traceroute6' }
+      ]
+    },
+    {
+      id: 'performance',
+      icon: 'zap',
+      label: 'Performance',
+      items: [
+        { id: 'iperf3', label: 'IPerf3', icon: 'M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z', flag: 'feature_iperf3' },
+        { id: 'speedtest', label: 'Speedtest', icon: 'M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z', flag: 'feature_speedtest_net' },
+        { id: 'librespeed', label: 'Librespeed', icon: 'M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z', flag: 'feature_librespeed' },
+        { id: 'filespeed', label: 'File Speed', icon: 'M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m.75 12l3 3m0 0l3-3m-3 3v-6m-1.5-9H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z', flag: 'feature_file_speedtest' }
+      ]
+    },
+    {
+      id: 'system',
+      icon: 'terminal',
+      label: 'System',
+      items: [
+        { id: 'shell', label: 'Shell', icon: 'M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z', flag: 'feature_shell' },
+        { id: 'traffic', label: 'Traffic Monitor', icon: 'M7.5 14.25v2.25m3-4.5v4.5m3-6.75v6.75m3-9v9M6 20.25h12A2.25 2.25 0 0020.25 18V6A2.25 2.25 0 0018 3.75H6A2.25 2.25 0 003.75 6v12A2.25 2.25 0 006 20.25z', flag: 'feature_iface_traffic' }
+      ]
+    }
+  ]
+
+  return groups.map(group => ({
+    ...group,
+    items: group.items.filter(item => {
+      if (!item.flag) return true
+      return config[item.flag] !== false
+    })
+  })).filter(group => group.items.length > 0)
+})
+
+const isActive = (id) => props.currentView === id
+
+const handleNavigate = (id) => {
+  emit('navigate', id)
+  closeMenu()
+}
+
+// Close menu on escape key
+const handleKeydown = (e) => {
+  if (e.key === 'Escape' && isMenuOpen.value) {
+    closeMenu()
+  }
+}
+
+// Prevent body scroll when menu is open
+watch(isMenuOpen, (open) => {
+  if (open) {
+    document.body.style.overflow = 'hidden'
+  } else {
+    document.body.style.overflow = ''
+  }
+})
+
+onMounted(() => {
+  document.addEventListener('keydown', handleKeydown)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', handleKeydown)
+  document.body.style.overflow = ''
+})
+</script>
+
+<template>
+  <div class="mobile-header">
+    <!-- Header Bar -->
+    <header class="fixed top-0 left-0 right-0 z-40 h-14 bg-white/95 dark:bg-gray-900/95 border-b border-gray-200 dark:border-gray-800 px-4 flex items-center justify-between">
+      <!-- Hamburger Button -->
+      <button
+        @click="toggleMenu"
+        class="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-150"
+        aria-label="Toggle menu"
+      >
+        <svg class="w-5 h-5 text-gray-600 dark:text-gray-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+          <path v-if="!isMenuOpen" stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+          <path v-else stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+        </svg>
+      </button>
+
+      <!-- Title -->
+      <div class="flex-1 text-center">
+        <h1 class="text-sm font-semibold text-gray-900 dark:text-white truncate px-4">
+          {{ appStore.config?.app_title || 'NetMirror' }}
+        </h1>
+      </div>
+
+      <!-- Theme Toggle -->
+      <button
+        @click="toggleTheme"
+        class="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-150"
+        aria-label="Toggle theme"
+      >
+        <svg v-if="isDark" class="w-5 h-5 text-gray-600 dark:text-gray-400" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
+        </svg>
+        <svg v-else class="w-5 h-5 text-gray-600 dark:text-gray-400" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" />
+        </svg>
+      </button>
+    </header>
+
+    <!-- Overlay -->
+    <transition
+      enter-active-class="transition-opacity duration-200"
+      enter-from-class="opacity-0"
+      enter-to-class="opacity-100"
+      leave-active-class="transition-opacity duration-150"
+      leave-from-class="opacity-100"
+      leave-to-class="opacity-0"
+    >
+      <div
+        v-if="isMenuOpen"
+        class="fixed inset-0 z-40 bg-black/50"
+        style="top: 56px"
+        @click="closeMenu"
+      ></div>
+    </transition>
+
+    <!-- Slide Menu -->
+    <transition
+      enter-active-class="transition-transform duration-200 ease-out"
+      enter-from-class="-translate-x-full"
+      enter-to-class="translate-x-0"
+      leave-active-class="transition-transform duration-150 ease-in"
+      leave-from-class="translate-x-0"
+      leave-to-class="-translate-x-full"
+    >
+      <div
+        v-if="isMenuOpen"
+        class="fixed left-0 z-50 w-72 bg-white dark:bg-gray-900 shadow-xl overflow-y-auto"
+        style="top: 56px; bottom: 0"
+      >
+        <!-- Node Selector -->
+        <div class="px-4 py-3 border-b border-gray-100 dark:border-gray-800">
+          <p class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">Current Node</p>
+          <div class="space-y-1">
+            <button
+              v-for="node in nodes"
+              :key="node.url"
+              @click="selectNode(node)"
+              class="w-full flex items-center px-3 py-2 text-sm rounded-lg transition-colors duration-150"
+              :class="selectedNode?.url === node.url
+                ? 'bg-primary-50 dark:bg-primary-900/20 text-primary-700 dark:text-primary-300'
+                : 'hover:bg-gray-50 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-300'"
+            >
+              <div class="w-2 h-2 rounded-full mr-2 flex-shrink-0"
+                :class="selectedNode?.url === node.url ? 'bg-primary-500' : 'bg-gray-300 dark:bg-gray-600'"
+              ></div>
+              <span class="truncate">{{ node.name }}</span>
+            </button>
+          </div>
+        </div>
+
+        <!-- Navigation -->
+        <nav class="px-3 py-3 space-y-1">
+          <NavGroup
+            v-for="group in navGroups"
+            :key="group.id"
+            :label="group.label"
+            :icon="group.icon"
+          >
+            <button
+              v-for="item in group.items"
+              :key="item.id"
+              @click="handleNavigate(item.id)"
+              class="w-full flex items-center space-x-2.5 px-3 py-2.5 text-sm rounded-lg transition-all duration-150"
+              :class="isActive(item.id)
+                ? 'bg-primary-50 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300 font-medium'
+                : 'text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-gray-200'"
+            >
+              <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" :d="item.icon" />
+              </svg>
+              <span>{{ item.label }}</span>
+            </button>
+          </NavGroup>
+        </nav>
+
+        <!-- Footer -->
+        <div class="px-3 py-3 border-t border-gray-100 dark:border-gray-800 mt-auto">
+          <button
+            @click="$emit('toggleAdmin'); closeMenu()"
+            class="w-full flex items-center space-x-2.5 px-3 py-2.5 text-sm rounded-lg transition-all duration-150"
+            :class="adminMode
+              ? 'bg-primary-50 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300 font-medium'
+              : 'text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-gray-200'"
+          >
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" />
+              <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+            </svg>
+            <span>Admin Panel</span>
+          </button>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
diff --git a/ui/src/components/layout/NavGroup.vue b/ui/src/components/layout/NavGroup.vue
new file mode 100644
index 0000000..4c6ac1f
--- /dev/null
+++ b/ui/src/components/layout/NavGroup.vue
@@ -0,0 +1,69 @@
+<script setup>
+import { ref } from 'vue'
+
+const props = defineProps({
+  label: { type: String, required: true },
+  icon: { type: String, default: '' },
+  defaultOpen: { type: Boolean, default: true }
+})
+
+const isOpen = ref(props.defaultOpen)
+
+const toggle = () => {
+  isOpen.value = !isOpen.value
+}
+
+// SVG path data for common icons
+const iconPaths = {
+  globe: 'M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9',
+  signal: 'M9.348 14.651a3.75 3.75 0 010-5.303m5.304 0a3.75 3.75 0 010 5.303m-7.425 2.122a6.75 6.75 0 010-9.546m9.546 0a6.75 6.75 0 010 9.546M5.106 18.894c-3.808-3.808-3.808-9.98 0-13.789m13.788 0c3.808 3.808 3.808 9.981 0 13.79M12 12h.008v.007H12V12zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z',
+  route: 'M9 6.75V15m6-6v8.25m.503 3.498l4.875-2.437c.381-.19.622-.58.622-1.006V4.82c0-.836-.88-1.38-1.628-1.006l-3.869 1.934c-.317.159-.69.159-1.006 0L9.503 3.252a1.125 1.125 0 00-1.006 0L3.622 5.689C3.24 5.88 3 6.27 3 6.695V19.18c0 .836.88 1.38 1.628 1.006l3.869-1.934c.317-.159.69-.159 1.006 0l4.994 2.497c.317.158.69.158 1.006 0z',
+  zap: 'M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z',
+  terminal: 'M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z',
+  cog: 'M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z M15 12a3 3 0 11-6 0 3 3 0 016 0z'
+}
+</script>
+
+<template>
+  <div class="nav-group">
+    <!-- Group Header -->
+    <button
+      @click="toggle"
+      class="w-full flex items-center justify-between px-3 py-2 text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 transition-colors duration-150"
+    >
+      <div class="flex items-center space-x-2">
+        <svg
+          v-if="iconPaths[icon]"
+          class="w-4 h-4"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.5"
+          viewBox="0 0 24 24"
+        >
+          <path stroke-linecap="round" stroke-linejoin="round" :d="iconPaths[icon]" />
+        </svg>
+        <span>{{ label }}</span>
+      </div>
+      <svg
+        class="w-3.5 h-3.5 transition-transform duration-150"
+        :class="{ 'rotate-180': isOpen }"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        viewBox="0 0 24 24"
+      >
+        <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
+      </svg>
+    </button>
+
+    <!-- Group Items -->
+    <div
+      class="overflow-hidden transition-all duration-150"
+      :class="isOpen ? 'max-h-96 opacity-100' : 'max-h-0 opacity-0'"
+    >
+      <div class="py-1 space-y-0.5">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/ui/src/components/layout/Sidebar.vue b/ui/src/components/layout/Sidebar.vue
new file mode 100644
index 0000000..f8fd06e
--- /dev/null
+++ b/ui/src/components/layout/Sidebar.vue
@@ -0,0 +1,310 @@
+<script setup>
+import { computed, ref, onMounted, onUnmounted } from 'vue'
+import { useAppStore } from '@/stores/app'
+import { useNodesStore } from '@/stores/nodes'
+import NavGroup from './NavGroup.vue'
+
+const emit = defineEmits(['navigate', 'toggleAdmin'])
+
+const props = defineProps({
+  currentView: { type: String, default: 'info' },
+  adminMode: { type: Boolean, default: false }
+})
+
+const appStore = useAppStore()
+const nodesStore = useNodesStore()
+
+const isDark = computed(() => appStore.theme === 'dark')
+
+// Node selection dropdown
+const showNodeDropdown = ref(false)
+const nodeDropdownRef = ref(null)
+
+const nodes = computed(() => nodesStore.nodes || [])
+const selectedNode = computed(() => nodesStore.selectedNode)
+const currentNodeName = computed(() => {
+  if (selectedNode.value) return selectedNode.value.name
+  return appStore.config?.name || 'Select Node'
+})
+
+const selectNode = (node) => {
+  nodesStore.selectNode(node)
+  showNodeDropdown.value = false
+}
+
+const toggleTheme = () => {
+  const newTheme = appStore.theme === 'dark' ? 'light' : 'dark'
+  appStore.setTheme(newTheme)
+  document.documentElement.classList.toggle('dark', newTheme === 'dark')
+  document.body.classList.toggle('dark', newTheme === 'dark')
+}
+
+// Close dropdown on outside click
+const handleClickOutside = (e) => {
+  if (nodeDropdownRef.value && !nodeDropdownRef.value.contains(e.target)) {
+    showNodeDropdown.value = false
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside)
+})
+
+// Navigation groups with feature flag support
+const navGroups = computed(() => {
+  const config = appStore.config || {}
+
+  const groups = [
+    {
+      id: 'info',
+      icon: 'globe',
+      label: 'Server Info',
+      items: [
+        { id: 'info', label: 'Network Information', icon: 'M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z' }
+      ]
+    },
+    {
+      id: 'connectivity',
+      icon: 'signal',
+      label: 'Connectivity',
+      items: [
+        { id: 'ping', label: 'Ping', icon: 'M5.636 18.364a9 9 0 010-12.728m12.728 0a9 9 0 010 12.728m-9.9-2.829a5 5 0 010-7.07m7.072 0a5 5 0 010 7.07M13 12a1 1 0 11-2 0 1 1 0 012 0z', flag: 'feature_ping' },
+        { id: 'ping6', label: 'Ping IPv6', icon: 'M5.636 18.364a9 9 0 010-12.728m12.728 0a9 9 0 010 12.728m-9.9-2.829a5 5 0 010-7.07m7.072 0a5 5 0 010 7.07M13 12a1 1 0 11-2 0 1 1 0 012 0z', flag: 'feature_ping6' }
+      ]
+    },
+    {
+      id: 'path',
+      icon: 'route',
+      label: 'Path Analysis',
+      items: [
+        { id: 'mtr', label: 'MTR', icon: 'M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5', flag: 'feature_mtr' },
+        { id: 'mtr6', label: 'MTR IPv6', icon: 'M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5', flag: 'feature_mtr6' },
+        { id: 'traceroute', label: 'Traceroute', icon: 'M9 6.75V15m6-6v8.25m.503 3.498l4.875-2.437c.381-.19.622-.58.622-1.006V4.82c0-.836-.88-1.38-1.628-1.006l-3.869 1.934c-.317.159-.69.159-1.006 0L9.503 3.252a1.125 1.125 0 00-1.006 0L3.622 5.689C3.24 5.88 3 6.27 3 6.695V19.18c0 .836.88 1.38 1.628 1.006l3.869-1.934c.317-.159.69-.159 1.006 0l4.994 2.497c.317.158.69.158 1.006 0z', flag: 'feature_traceroute' },
+        { id: 'traceroute6', label: 'Traceroute IPv6', icon: 'M9 6.75V15m6-6v8.25m.503 3.498l4.875-2.437c.381-.19.622-.58.622-1.006V4.82c0-.836-.88-1.38-1.628-1.006l-3.869 1.934c-.317.159-.69.159-1.006 0L9.503 3.252a1.125 1.125 0 00-1.006 0L3.622 5.689C3.24 5.88 3 6.27 3 6.695V19.18c0 .836.88 1.38 1.628 1.006l3.869-1.934c.317-.159.69-.159 1.006 0l4.994 2.497c.317.158.69.158 1.006 0z', flag: 'feature_traceroute6' }
+      ]
+    },
+    {
+      id: 'performance',
+      icon: 'zap',
+      label: 'Performance',
+      items: [
+        { id: 'iperf3', label: 'IPerf3', icon: 'M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z', flag: 'feature_iperf3' },
+        { id: 'speedtest', label: 'Speedtest', icon: 'M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z', flag: 'feature_speedtest_net' },
+        { id: 'librespeed', label: 'Librespeed', icon: 'M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z', flag: 'feature_librespeed' },
+        { id: 'filespeed', label: 'File Speed', icon: 'M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m.75 12l3 3m0 0l3-3m-3 3v-6m-1.5-9H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z', flag: 'feature_file_speedtest' }
+      ]
+    },
+    {
+      id: 'system',
+      icon: 'terminal',
+      label: 'System',
+      items: [
+        { id: 'shell', label: 'Shell', icon: 'M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z', flag: 'feature_shell' },
+        { id: 'traffic', label: 'Traffic Monitor', icon: 'M7.5 14.25v2.25m3-4.5v4.5m3-6.75v6.75m3-9v9M6 20.25h12A2.25 2.25 0 0020.25 18V6A2.25 2.25 0 0018 3.75H6A2.25 2.25 0 003.75 6v12A2.25 2.25 0 006 20.25z', flag: 'feature_iface_traffic' }
+      ]
+    }
+  ]
+
+  // Filter items based on feature flags
+  return groups.map(group => ({
+    ...group,
+    items: group.items.filter(item => {
+      if (!item.flag) return true
+      return config[item.flag] !== false
+    })
+  })).filter(group => group.items.length > 0)
+})
+
+const isActive = (id) => props.currentView === id
+
+const handleNavigate = (id) => {
+  emit('navigate', id)
+}
+</script>
+
+<template>
+  <aside class="sidebar flex flex-col w-60 h-full bg-white/95 dark:bg-gray-900/95 border-r border-gray-200 dark:border-gray-800">
+    <!-- Logo & Title -->
+    <div class="flex-shrink-0 px-4 py-5 border-b border-gray-100 dark:border-gray-800">
+      <div class="flex items-center space-x-3">
+        <!-- Logo -->
+        <div
+          class="flex-shrink-0 w-9 h-9 flex items-center justify-center rounded-lg bg-gradient-to-br from-primary-500 to-primary-600 shadow-sm"
+        >
+          <template v-if="appStore.config?.logo">
+            <img
+              v-if="appStore.config.logo_type === 'url' || appStore.config.logo_type === 'base64'"
+              :src="appStore.config.logo"
+              alt="Logo"
+              class="w-6 h-6 object-contain"
+            />
+            <div
+              v-else-if="appStore.config.logo_type === 'svg'"
+              class="w-6 h-6 flex items-center justify-center text-white"
+              v-html="appStore.config.logo"
+            ></div>
+            <span
+              v-else-if="appStore.config.logo_type === 'emoji'"
+              class="text-lg"
+            >{{ appStore.config.logo }}</span>
+            <span
+              v-else
+              class="text-xs font-bold text-white"
+            >{{ appStore.config.logo.slice(0, 2) }}</span>
+          </template>
+          <svg
+            v-else
+            class="w-5 h-5 text-white"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            viewBox="0 0 24 24"
+          >
+            <path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9v-9m0-9v9"/>
+          </svg>
+        </div>
+        <!-- Title -->
+        <div class="flex-1 min-w-0">
+          <h1 class="text-sm font-semibold text-gray-900 dark:text-white truncate">
+            {{ appStore.config?.app_title || 'NetMirror' }}
+          </h1>
+          <p class="text-xs text-gray-500 dark:text-gray-400 truncate">
+            {{ appStore.config?.location || 'Looking Glass' }}
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <!-- Node Selector -->
+    <div class="flex-shrink-0 px-3 py-3 border-b border-gray-100 dark:border-gray-800" ref="nodeDropdownRef">
+      <div class="relative">
+        <button
+          @click.stop="showNodeDropdown = !showNodeDropdown"
+          class="w-full flex items-center justify-between px-3 py-2 text-sm bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-700 transition-colors duration-150"
+        >
+          <div class="flex items-center space-x-2 min-w-0">
+            <div class="w-2 h-2 rounded-full bg-green-500 flex-shrink-0"></div>
+            <span class="text-gray-700 dark:text-gray-300 truncate">{{ currentNodeName }}</span>
+          </div>
+          <svg class="w-4 h-4 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l4-4 4 4m0 6l-4 4-4-4" />
+          </svg>
+        </button>
+
+        <!-- Dropdown -->
+        <div
+          v-if="showNodeDropdown && nodes.length > 0"
+          class="absolute z-50 mt-1 w-full bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 py-1 max-h-64 overflow-auto"
+        >
+          <button
+            v-for="node in nodes"
+            :key="node.url"
+            @click="selectNode(node)"
+            class="w-full flex items-center px-3 py-2 text-sm hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-150"
+            :class="selectedNode?.url === node.url ? 'bg-primary-50 dark:bg-primary-900/20' : ''"
+          >
+            <div class="flex-1 min-w-0 text-left">
+              <div class="text-gray-900 dark:text-white truncate">{{ node.name }}</div>
+              <div class="text-xs text-gray-500 dark:text-gray-400 truncate">{{ node.location }}</div>
+            </div>
+            <svg
+              v-if="selectedNode?.url === node.url"
+              class="w-4 h-4 text-primary-500 flex-shrink-0 ml-2"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+            >
+              <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Navigation -->
+    <nav class="flex-1 overflow-y-auto px-3 py-3 space-y-1">
+      <NavGroup
+        v-for="group in navGroups"
+        :key="group.id"
+        :label="group.label"
+        :icon="group.icon"
+      >
+        <button
+          v-for="item in group.items"
+          :key="item.id"
+          @click="handleNavigate(item.id)"
+          class="w-full flex items-center space-x-2.5 px-3 py-2 text-sm rounded-lg transition-all duration-150"
+          :class="isActive(item.id)
+            ? 'bg-primary-50 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300 font-medium'
+            : 'text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-gray-200'"
+        >
+          <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" :d="item.icon" />
+          </svg>
+          <span>{{ item.label }}</span>
+        </button>
+      </NavGroup>
+    </nav>
+
+    <!-- Footer -->
+    <div class="flex-shrink-0 px-3 py-3 border-t border-gray-100 dark:border-gray-800 space-y-1">
+      <!-- Admin Button -->
+      <button
+        @click="$emit('toggleAdmin')"
+        class="w-full flex items-center space-x-2.5 px-3 py-2 text-sm rounded-lg transition-all duration-150"
+        :class="adminMode
+          ? 'bg-primary-50 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300 font-medium'
+          : 'text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-gray-200'"
+      >
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" />
+          <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+        </svg>
+        <span>Admin Panel</span>
+      </button>
+
+      <!-- Theme Toggle -->
+      <button
+        @click="toggleTheme"
+        class="w-full flex items-center space-x-2.5 px-3 py-2 text-sm text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-gray-200 rounded-lg transition-all duration-150"
+      >
+        <!-- Sun icon -->
+        <svg v-if="isDark" class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
+        </svg>
+        <!-- Moon icon -->
+        <svg v-else class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" />
+        </svg>
+        <span>{{ isDark ? 'Light Mode' : 'Dark Mode' }}</span>
+      </button>
+    </div>
+  </aside>
+</template>
+
+<style scoped>
+.sidebar {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(156, 163, 175, 0.3) transparent;
+}
+
+.sidebar::-webkit-scrollbar {
+  width: 4px;
+}
+
+.sidebar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.sidebar::-webkit-scrollbar-thumb {
+  background: rgba(156, 163, 175, 0.3);
+  border-radius: 2px;
+}
+
+.sidebar::-webkit-scrollbar-thumb:hover {
+  background: rgba(156, 163, 175, 0.5);
+}
+</style>
diff --git a/ui/tailwind.config.js b/ui/tailwind.config.js
index 6c1b58a..400a88e 100644
--- a/ui/tailwind.config.js
+++ b/ui/tailwind.config.js
@@ -31,11 +31,9 @@ export default {
         },
       },
       animation: {
-        "fade-in": "fadeIn 0.5s ease-in-out",
-        "slide-up": "slideUp 0.3s ease-out",
-        "slide-down": "slideDown 0.3s ease-out",
-        "scale-in": "scaleIn 0.2s ease-out",
-        "pulse-slow": "pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite",
+        "fade-in": "fadeIn 0.3s ease-out",
+        "slide-up": "slideUp 0.2s ease-out",
+        "slide-down": "slideDown 0.2s ease-out",
       },
       keyframes: {
         fadeIn: {
@@ -43,17 +41,13 @@ export default {
           "100%": { opacity: "1" },
         },
         slideUp: {
-          "0%": { transform: "translateY(10px)", opacity: "0" },
+          "0%": { transform: "translateY(8px)", opacity: "0" },
           "100%": { transform: "translateY(0)", opacity: "1" },
         },
         slideDown: {
-          "0%": { transform: "translateY(-10px)", opacity: "0" },
+          "0%": { transform: "translateY(-8px)", opacity: "0" },
           "100%": { transform: "translateY(0)", opacity: "1" },
         },
-        scaleIn: {
-          "0%": { transform: "scale(0.95)", opacity: "0" },
-          "100%": { transform: "scale(1)", opacity: "1" },
-        },
       },
       backdropBlur: {
         xs: "2px",