diff --git a/AppImage/components/network-metrics.tsx b/AppImage/components/network-metrics.tsx
index 7f4da28..5135d1a 100644
--- a/AppImage/components/network-metrics.tsx
+++ b/AppImage/components/network-metrics.tsx
@@ -206,7 +206,7 @@ export function NetworkMetrics() {
   return (
     <div className="space-y-6">
       {/* Network Overview Cards */}
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6">
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 lg:gap-6">
         <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">Network Traffic</CardTitle>
@@ -216,11 +216,11 @@ export function NetworkMetrics() {
             <div className="flex flex-col gap-2">
               <div className="flex items-center justify-between">
                 <span className="text-sm text-muted-foreground">Received:</span>
-                <span className="text-xl font-bold text-green-500">↓ {trafficInFormatted}</span>
+                <span className="text-base lg:text-xl font-bold text-green-500">↓ {trafficInFormatted}</span>
               </div>
               <div className="flex items-center justify-between">
                 <span className="text-sm text-muted-foreground">Sent:</span>
-                <span className="text-xl font-bold text-blue-500">↑ {trafficOutFormatted}</span>
+                <span className="text-base lg:text-xl font-bold text-blue-500">↑ {trafficOutFormatted}</span>
               </div>
             </div>
             <p className="text-xs text-muted-foreground mt-2">Total data transferred</p>
@@ -233,7 +233,7 @@ export function NetworkMetrics() {
             <Network className="h-4 w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold text-foreground">
+            <div className="text-xl lg:text-2xl font-bold text-foreground">
               {(networkData.physical_active_count ?? 0) + (networkData.bridge_active_count ?? 0)}
             </div>
             <div className="flex flex-wrap items-center gap-2 mt-2">
@@ -256,7 +256,7 @@ export function NetworkMetrics() {
             <Router className="h-4 w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold text-green-500">Active</div>
+            <div className="text-xl lg:text-2xl font-bold text-green-500">Active</div>
             <div className="flex items-center gap-2 mt-2">
               <Badge variant="outline" className="bg-green-500/10 text-green-500 border-green-500/20 text-xs">
                 Protected
@@ -272,7 +272,7 @@ export function NetworkMetrics() {
             <Activity className="h-4 w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold text-foreground mb-2">
+            <div className="text-xl lg:text-2xl font-bold text-foreground mb-2">
               <Badge variant="outline" className={healthColor}>
                 {healthStatus}
               </Badge>
diff --git a/AppImage/components/storage-metrics.tsx b/AppImage/components/storage-metrics.tsx
index 6cda43c..abc5c0a 100644
--- a/AppImage/components/storage-metrics.tsx
+++ b/AppImage/components/storage-metrics.tsx
@@ -109,14 +109,14 @@ export function StorageMetrics() {
   return (
     <div className="space-y-6">
       {/* Storage Overview Cards */}
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 lg:gap-6">
         <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">Total Storage</CardTitle>
             <HardDrive className="h-4 w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold text-foreground">{storageData.total.toFixed(1)} GB</div>
+            <div className="text-xl lg:text-2xl font-bold text-foreground">{storageData.total.toFixed(1)} GB</div>
             <Progress value={usagePercent} className="mt-2" />
             <p className="text-xs text-muted-foreground mt-2">
               {storageData.used.toFixed(1)} GB used • {storageData.available.toFixed(1)} GB available
@@ -130,7 +130,7 @@ export function StorageMetrics() {
             <Database className="h-4 w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold text-foreground">{storageData.used.toFixed(1)} GB</div>
+            <div className="text-xl lg:text-2xl font-bold text-foreground">{storageData.used.toFixed(1)} GB</div>
             <Progress value={usagePercent} className="mt-2" />
             <p className="text-xs text-muted-foreground mt-2">{usagePercent.toFixed(1)}% of total space</p>
           </CardContent>
@@ -144,7 +144,7 @@ export function StorageMetrics() {
             </CardTitle>
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold text-foreground">{storageData.available.toFixed(1)} GB</div>
+            <div className="text-xl lg:text-2xl font-bold text-foreground">{storageData.available.toFixed(1)} GB</div>
             <div className="flex items-center mt-2">
               <Badge variant="outline" className="bg-green-500/10 text-green-500 border-green-500/20">
                 {((storageData.available / storageData.total) * 100).toFixed(1)}% Free
@@ -162,7 +162,7 @@ export function StorageMetrics() {
             </CardTitle>
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold text-foreground">{storageData.disks.length}</div>
+            <div className="text-xl lg:text-2xl font-bold text-foreground">{storageData.disks.length}</div>
             <div className="flex items-center space-x-2 mt-2">
               <Badge variant="outline" className="bg-green-500/10 text-green-500 border-green-500/20">
                 {storageData.disks.filter((d) => d.health === "healthy").length} Healthy
diff --git a/AppImage/components/system-overview.tsx b/AppImage/components/system-overview.tsx
index bbdabe2..d5fa6ab 100644
--- a/AppImage/components/system-overview.tsx
+++ b/AppImage/components/system-overview.tsx
@@ -443,14 +443,14 @@ export function SystemOverview() {
   return (
     <div className="space-y-6">
       {/* Key Metrics Cards */}
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 lg:gap-6">
         <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">CPU Usage</CardTitle>
             <Cpu className="h-4 w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold text-foreground">{systemData.cpu_usage}%</div>
+            <div className="text-xl lg:text-2xl font-bold text-foreground">{systemData.cpu_usage}%</div>
             <Progress value={systemData.cpu_usage} className="mt-2 [&>div]:bg-blue-500" />
             <p className="text-xs text-muted-foreground mt-2">Real-time usage</p>
           </CardContent>
@@ -462,7 +462,7 @@ export function SystemOverview() {
             <MemoryStick className="h-4 w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold text-foreground">{systemData.memory_used.toFixed(1)} GB</div>
+            <div className="text-xl lg:text-2xl font-bold text-foreground">{systemData.memory_used.toFixed(1)} GB</div>
             <Progress value={systemData.memory_usage} className="mt-2 [&>div]:bg-blue-500" />
             <p className="text-xs text-muted-foreground mt-2">
               <span className="text-green-500 font-medium">{systemData.memory_usage.toFixed(1)}%</span> of{" "}
@@ -477,7 +477,7 @@ export function SystemOverview() {
             <Thermometer className="h-4 w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold text-foreground">
+            <div className="text-xl lg:text-2xl font-bold text-foreground">
               {systemData.temperature === 0 ? "N/A" : `${systemData.temperature}°C`}
             </div>
             <div className="flex items-center mt-2">
@@ -497,7 +497,7 @@ export function SystemOverview() {
             <Server className="h-4 w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold text-foreground">{vmStats.running}</div>
+            <div className="text-xl lg:text-2xl font-bold text-foreground">{vmStats.running}</div>
             <div className="mt-2 flex flex-wrap gap-1">
               <Badge variant="outline" className="bg-green-500/10 text-green-500 border-green-500/20">
                 {vmStats.running} Running