diff --git a/AppImage/app/globals.css b/AppImage/app/globals.css
index 2cfb3a7..f08e712 100644
--- a/AppImage/app/globals.css
+++ b/AppImage/app/globals.css
@@ -4,7 +4,6 @@
 @custom-variant dark (&:is(.dark *));
 
 :root {
-  /* Proxmox light theme colors */
   --background: oklch(1 0 0);
   --foreground: oklch(0.145 0 0);
   --card: oklch(1 0 0);
@@ -32,10 +31,11 @@
   --radius: 0.625rem;
   --sidebar: oklch(0.985 0 0);
   --sidebar-foreground: oklch(0.145 0 0);
+  --header-bg: oklch(1 0 0);
+  --header-foreground: oklch(0.145 0 0);
 }
 
 .dark {
-  /* Proxmox dark theme with proper gray background (#2b2f36) */
   --background: oklch(0.205 0.005 240); /* Proxmox dark gray #2b2f36 */
   --foreground: oklch(0.985 0 0);
   --card: oklch(0.235 0.005 240); /* Slightly lighter gray for cards #363c45 */
@@ -55,12 +55,15 @@
   --border: oklch(0.335 0.005 240); /* More visible borders */
   --input: oklch(0.285 0.005 240);
   --ring: oklch(0.439 0 0);
-  /* Updated chart colors to be more vibrant and visible in dark mode */
   --chart-1: oklch(0.65 0.2 220); /* Bright Blue */
   --chart-2: oklch(0.65 0.2 140); /* Bright Green */
   --chart-3: oklch(0.7 0.2 50); /* Bright Yellow */
   --chart-4: oklch(0.65 0.2 300); /* Bright Purple */
   --chart-5: oklch(0.65 0.2 20); /* Bright Orange */
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
   --sidebar: oklch(0.205 0 0);
   --sidebar-foreground: oklch(0.985 0 0);
   --sidebar-primary: oklch(0.488 0.243 264.376);
@@ -69,12 +72,13 @@
   --sidebar-accent-foreground: oklch(0.985 0 0);
   --sidebar-border: oklch(0.285 0.005 240);
   --sidebar-ring: oklch(0.439 0 0);
-  /* Header is black only in dark mode */
   --header-bg: oklch(0 0 0);
   --header-foreground: oklch(1 0 0);
 }
 
 @theme inline {
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --color-card: var(--card);
@@ -111,9 +115,6 @@
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
-  /* Custom header colors */
-  --color-header-bg: var(--header-bg);
-  --color-header-foreground: var(--header-foreground);
 }
 
 @layer base {
@@ -123,80 +124,78 @@
   body {
     @apply bg-background text-foreground;
   }
-}
+  .header-bg {
+    background-color: var(--header-bg);
+    color: var(--header-foreground);
+    backdrop-filter: none; /* Remove any blur effects */
+  }
+  /* Custom scrollbar with better contrast */
+  ::-webkit-scrollbar {
+    width: 6px;
+  }
 
-/* Header styling that adapts to theme */
-.header-bg {
-  background-color: var(--header-bg);
-  color: var(--header-foreground);
-}
+  ::-webkit-scrollbar-track {
+    background: var(--background);
+  }
 
-/* Custom scrollbar with better contrast */
-::-webkit-scrollbar {
-  width: 6px;
-}
+  ::-webkit-scrollbar-thumb {
+    background: var(--muted);
+    border-radius: 3px;
+  }
 
-::-webkit-scrollbar-track {
-  background: var(--background);
-}
+  ::-webkit-scrollbar-thumb:hover {
+    background: var(--muted-foreground);
+  }
 
-::-webkit-scrollbar-thumb {
-  background: var(--muted);
-  border-radius: 3px;
-}
+  /* Better contrast for dark mode content */
+  .dark .metric-card {
+    background: var(--card);
+    border: 1px solid var(--border);
+  }
 
-::-webkit-scrollbar-thumb:hover {
-  background: var(--muted-foreground);
-}
+  .dark .metric-value {
+    color: var(--foreground);
+    font-weight: 600;
+  }
 
-/* Better contrast for dark mode content */
-.dark .metric-card {
-  background: var(--card);
-  border: 1px solid var(--border);
-}
+  .dark .metric-label {
+    color: var(--muted-foreground);
+  }
 
-.dark .metric-value {
-  color: var(--foreground);
-  font-weight: 600;
-}
+  /* Fix chart axis visibility in dark mode */
+  .dark .recharts-cartesian-axis-tick-value {
+    fill: var(--muted-foreground) !important;
+  }
 
-.dark .metric-label {
-  color: var(--muted-foreground);
-}
+  .dark .recharts-text {
+    fill: var(--muted-foreground) !important;
+  }
 
-/* Fix chart axis visibility in dark mode */
-.dark .recharts-cartesian-axis-tick-value {
-  fill: var(--muted-foreground) !important;
-}
+  /* Improve server info layout in header - clean design without transparency */
+  .server-info {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.25rem 0.75rem;
+    border-radius: 0.375rem;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+  }
 
-.dark .recharts-text {
-  fill: var(--muted-foreground) !important;
-}
+  .dark .server-info {
+    border: 1px solid rgba(255, 255, 255, 0.1);
+  }
 
-/* Improve server info layout in header - clean design without transparency */
-.server-info {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.25rem 0.75rem;
-  border-radius: 0.375rem;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-}
+  /* Better spacing for VM/LXC badges */
+  .vm-badges {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+    align-items: center;
+  }
 
-.dark .server-info {
-  border: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-/* Better spacing for VM/LXC badges */
-.vm-badges {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.25rem;
-  align-items: center;
-}
-
-.vm-badge {
-  font-size: 0.75rem;
-  padding: 0.125rem 0.5rem;
-  white-space: nowrap;
+  .vm-badge {
+    font-size: 0.75rem;
+    padding: 0.125rem 0.5rem;
+    white-space: nowrap;
+  }
 }
diff --git a/AppImage/app/layout.tsx b/AppImage/app/layout.tsx
index 27a5ad7..f4009cc 100644
--- a/AppImage/app/layout.tsx
+++ b/AppImage/app/layout.tsx
@@ -9,21 +9,8 @@ import "./globals.css"
 
 export const metadata: Metadata = {
   title: "ProxMenux Monitor",
-  description: "Proxmox System Dashboard and Monitor",
+  description: "Proxmox System Dashboard",
   generator: "v0.app",
-  manifest: "/manifest.json",
-  icons: {
-    icon: [
-      { url: "/favicon-16x16.png", sizes: "16x16", type: "image/png" },
-      { url: "/favicon-32x32.png", sizes: "32x32", type: "image/png" },
-    ],
-    apple: [{ url: "/apple-touch-icon.png", sizes: "180x180", type: "image/png" }],
-  },
-  viewport: "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no",
-  themeColor: [
-    { media: "(prefers-color-scheme: light)", color: "#ffffff" },
-    { media: "(prefers-color-scheme: dark)", color: "#1a1a1a" },
-  ],
 }
 
 export default function RootLayout({
@@ -33,13 +20,13 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <body className={`${GeistSans.variable} ${GeistMono.variable} antialiased`}>
-        <Suspense fallback={<div>Loading...</div>}>
+      <body className={`font-sans ${GeistSans.variable} ${GeistMono.variable}`}>
+        <Suspense fallback={null}>
           <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
             {children}
           </ThemeProvider>
-          <Analytics />
         </Suspense>
+        <Analytics />
       </body>
     </html>
   )
diff --git a/AppImage/app/page.tsx b/AppImage/app/page.tsx
index 47629db..c6d59e1 100644
--- a/AppImage/app/page.tsx
+++ b/AppImage/app/page.tsx
@@ -1,6 +1,6 @@
-import { ProxmoxDashboard } from "../components/proxmox-dashboard"
+import { ProxmoxDashboard } from "../AppImage/components/proxmox-dashboard"
 
-export default function Home() {
+export default function Page() {
   return (
     <main className="min-h-screen bg-background">
       <ProxmoxDashboard />
diff --git a/AppImage/components/network-metrics.tsx b/AppImage/components/network-metrics.tsx
index 3144de8..8d3a714 100644
--- a/AppImage/components/network-metrics.tsx
+++ b/AppImage/components/network-metrics.tsx
@@ -1,7 +1,7 @@
 "use client"
 
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
-import { Badge } from "@/components/ui/badge"
+import { Card, CardContent, CardHeader, CardTitle } from "./ui/card"
+import { Badge } from "./ui/badge"
 import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, AreaChart, Area } from "recharts"
 import { Wifi, Globe, Shield, Activity, Network, Router } from "lucide-react"
 
@@ -80,9 +80,11 @@ export function NetworkMetrics() {
         </Card>
 
         <Card className="bg-card border-border">
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium text-muted-foreground">Latency</CardTitle>
-            <Globe className="h-4 w-4 text-muted-foreground" />
+          <CardHeader>
+            <CardTitle className="text-foreground flex items-center">
+              <Globe className="h-5 w-5 mr-2" />
+              Latency
+            </CardTitle>
           </CardHeader>
           <CardContent>
             <div className="text-2xl font-bold text-foreground">12ms</div>
diff --git a/AppImage/components/storage-metrics.tsx b/AppImage/components/storage-metrics.tsx
index 5299789..b22a03f 100644
--- a/AppImage/components/storage-metrics.tsx
+++ b/AppImage/components/storage-metrics.tsx
@@ -1,8 +1,8 @@
 "use client"
 
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
-import { Progress } from "@/components/ui/progress"
-import { Badge } from "@/components/ui/badge"
+import { Card, CardContent, CardHeader, CardTitle } from "./ui/card"
+import { Progress } from "./ui/progress"
+import { Badge } from "./ui/badge"
 import { ResponsiveContainer, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip } from "recharts"
 import { HardDrive, Database, Archive, AlertTriangle, CheckCircle, Activity } from "lucide-react"
 
diff --git a/AppImage/components/system-logs.tsx b/AppImage/components/system-logs.tsx
index b8c9a07..5ef052b 100644
--- a/AppImage/components/system-logs.tsx
+++ b/AppImage/components/system-logs.tsx
@@ -1,11 +1,11 @@
 "use client"
 
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
-import { Badge } from "@/components/ui/badge"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
-import { ScrollArea } from "@/components/ui/scroll-area"
+import { Card, CardContent, CardHeader, CardTitle } from "./ui/card"
+import { Badge } from "./ui/badge"
+import { Button } from "./ui/button"
+import { Input } from "./ui/input"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select"
+import { ScrollArea } from "./ui/scroll-area"
 import { FileText, Search, Download, AlertTriangle, Info, CheckCircle, XCircle } from "lucide-react"
 import { useState } from "react"
 
diff --git a/AppImage/components/system-overview.tsx b/AppImage/components/system-overview.tsx
index a4f0127..5c9b319 100644
--- a/AppImage/components/system-overview.tsx
+++ b/AppImage/components/system-overview.tsx
@@ -1,8 +1,8 @@
 "use client"
 
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
-import { Progress } from "@/components/ui/progress"
-import { Badge } from "@/components/ui/badge"
+import { Card, CardContent, CardHeader, CardTitle } from "./ui/card"
+import { Progress } from "./ui/progress"
+import { Badge } from "./ui/badge"
 import { XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, AreaChart, Area } from "recharts"
 import { Cpu, MemoryStick, Thermometer, Users, Activity, Server, Zap } from "lucide-react"
 
diff --git a/AppImage/components/theme-toggle.tsx b/AppImage/components/theme-toggle.tsx
index 68eccf5..eb4c91c 100644
--- a/AppImage/components/theme-toggle.tsx
+++ b/AppImage/components/theme-toggle.tsx
@@ -2,7 +2,7 @@
 import { Moon, Sun } from "lucide-react"
 import { useTheme } from "next-themes"
 
-import { Button } from "@/components/ui/button"
+import { Button } from "./ui/button"
 
 export function ThemeToggle() {
   const { theme, setTheme } = useTheme()
diff --git a/AppImage/components/virtual-machines.tsx b/AppImage/components/virtual-machines.tsx
index 890cb5d..8a8ea83 100644
--- a/AppImage/components/virtual-machines.tsx
+++ b/AppImage/components/virtual-machines.tsx
@@ -1,8 +1,8 @@
 "use client"
 
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
-import { Badge } from "@/components/ui/badge"
-import { Progress } from "@/components/ui/progress"
+import { Card, CardContent, CardHeader, CardTitle } from "./ui/card"
+import { Badge } from "./ui/badge"
+import { Progress } from "./ui/progress"
 import { Server, Play, Square, RotateCcw, Monitor, Cpu, MemoryStick } from "lucide-react"
 
 const virtualMachines = [