diff --git a/AppImage/components/virtual-machines.tsx b/AppImage/components/virtual-machines.tsx
index c2e7e20..83c420d 100644
--- a/AppImage/components/virtual-machines.tsx
+++ b/AppImage/components/virtual-machines.tsx
@@ -18,12 +18,9 @@ import {
   RotateCcw,
   StopCircle,
   Container,
-  X,
-  Info,
-  ArrowLeft,
 } from "lucide-react"
 import useSWR from "swr"
-import { MetricsView } from "./metrics-dialog"
+import { MetricsDialog } from "./metrics-dialog" // Import MetricsDialog
 
 interface VMData {
   vmid: number
@@ -190,7 +187,6 @@ export function VirtualMachines() {
   const [vmConfigs, setVmConfigs] = useState<Record<number, string>>({})
   const [currentView, setCurrentView] = useState<"main" | "metrics">("main")
   const [selectedMetric, setSelectedMetric] = useState<"cpu" | "memory" | "disk" | "network" | null>(null)
-  const [showDetailsModal, setShowDetailsModal] = useState(false)
 
   useEffect(() => {
     const fetchLXCIPs = async () => {
@@ -724,93 +720,78 @@ export function VirtualMachines() {
           setSelectedMetric(null)
         }}
       >
-        <DialogContent className="max-w-4xl max-h-[95vh] flex flex-col p-0">
+        <DialogContent className="max-w-4xl max-h-[95vh] p-0 flex flex-col overflow-hidden">
           {currentView === "main" ? (
             <>
-              <DialogHeader className="pb-4 border-b border-border px-6 pt-6 sticky top-0 bg-background z-10">
-                <div className="flex items-start justify-between gap-4">
-                  <DialogTitle className="flex flex-col sm:flex-row sm:items-center gap-3 flex-1">
-                    {/* Desktop layout */}
-                    <div className="hidden sm:flex items-center gap-3 flex-wrap">
-                      <div className="flex items-center gap-2">
-                        <Server className="h-5 w-5 flex-shrink-0" />
-                        <span className="text-lg truncate">{selectedVM?.name}</span>
-                        <span className="text-sm text-muted-foreground">ID: {selectedVM?.vmid}</span>
-                      </div>
-                      {selectedVM && (
-                        <>
-                          <Badge variant="outline" className={`${getTypeBadge(selectedVM.type).color} flex-shrink-0`}>
-                            {getTypeBadge(selectedVM.type).icon}
-                            {getTypeBadge(selectedVM.type).label}
-                          </Badge>
-                          <Badge variant="outline" className={`${getStatusColor(selectedVM.status)} flex-shrink-0`}>
-                            {selectedVM.status.toUpperCase()}
-                          </Badge>
-                          {selectedVM.status === "running" && (
-                            <span className="text-sm text-muted-foreground">
-                              Uptime: {formatUptime(selectedVM.uptime)}
-                            </span>
-                          )}
-                        </>
-                      )}
+              <DialogHeader className="pb-4 border-b border-border px-6 pt-6 flex-shrink-0">
+                <DialogTitle className="flex flex-col sm:flex-row sm:items-center gap-3">
+                  {/* Desktop layout */}
+                  <div className="hidden sm:flex items-center gap-3 flex-wrap">
+                    <div className="flex items-center gap-2">
+                      <Server className="h-5 w-5 flex-shrink-0" />
+                      <span className="text-lg truncate">{selectedVM?.name}</span>
+                      <span className="text-sm text-muted-foreground">ID: {selectedVM?.vmid}</span>
                     </div>
+                    {selectedVM && (
+                      <>
+                        <Badge variant="outline" className={`${getTypeBadge(selectedVM.type).color} flex-shrink-0`}>
+                          {getTypeBadge(selectedVM.type).icon}
+                          {getTypeBadge(selectedVM.type).label}
+                        </Badge>
+                        <Badge variant="outline" className={`${getStatusColor(selectedVM.status)} flex-shrink-0`}>
+                          {selectedVM.status.toUpperCase()}
+                        </Badge>
+                        {selectedVM.status === "running" && (
+                          <span className="text-sm text-muted-foreground">
+                            Uptime: {formatUptime(selectedVM.uptime)}
+                          </span>
+                        )}
+                      </>
+                    )}
+                  </div>
 
-                    {/* Mobile layout */}
-                    <div className="flex sm:hidden flex-col gap-2">
-                      <div className="flex items-center gap-2">
-                        <Server className="h-5 w-5 flex-shrink-0" />
-                        <span className="text-lg truncate">{selectedVM?.name}</span>
-                        <span className="text-sm text-muted-foreground">ID: {selectedVM?.vmid}</span>
-                      </div>
-                      {selectedVM && (
-                        <div className="flex items-center gap-2 flex-wrap">
-                          <Badge variant="outline" className={`${getTypeBadge(selectedVM.type).color} flex-shrink-0`}>
-                            {getTypeBadge(selectedVM.type).icon}
-                            {getTypeBadge(selectedVM.type).label}
-                          </Badge>
-                          <Badge variant="outline" className={`${getStatusColor(selectedVM.status)} flex-shrink-0`}>
-                            {selectedVM.status.toUpperCase()}
-                          </Badge>
-                          {selectedVM.status === "running" && (
-                            <span className="text-sm text-muted-foreground">
-                              Uptime: {formatUptime(selectedVM.uptime)}
-                            </span>
-                          )}
-                        </div>
-                      )}
+                  {/* Mobile layout */}
+                  <div className="flex sm:hidden flex-col gap-2">
+                    <div className="flex items-center gap-2">
+                      <Server className="h-5 w-5 flex-shrink-0" />
+                      <span className="text-lg truncate">{selectedVM?.name}</span>
+                      <span className="text-sm text-muted-foreground">ID: {selectedVM?.vmid}</span>
                     </div>
-                  </DialogTitle>
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className="h-8 w-8 rounded-full flex-shrink-0"
-                    onClick={() => {
-                      setSelectedVM(null)
-                      setVMDetails(null)
-                      setCurrentView("main")
-                      setSelectedMetric(null)
-                    }}
-                  >
-                    <X className="h-4 w-4" />
-                  </Button>
-                </div>
+                    {selectedVM && (
+                      <div className="flex items-center gap-2 flex-wrap">
+                        <Badge variant="outline" className={`${getTypeBadge(selectedVM.type).color} flex-shrink-0`}>
+                          {getTypeBadge(selectedVM.type).icon}
+                          {getTypeBadge(selectedVM.type).label}
+                        </Badge>
+                        <Badge variant="outline" className={`${getStatusColor(selectedVM.status)} flex-shrink-0`}>
+                          {selectedVM.status.toUpperCase()}
+                        </Badge>
+                        {selectedVM.status === "running" && (
+                          <span className="text-sm text-muted-foreground">
+                            Uptime: {formatUptime(selectedVM.uptime)}
+                          </span>
+                        )}
+                      </div>
+                    )}
+                  </div>
+                </DialogTitle>
               </DialogHeader>
 
               <div className="flex-1 overflow-y-auto px-6 py-4">
                 <div className="space-y-6">
                   {selectedVM && (
                     <>
-                      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-                        {/* CPU & Memory Card */}
-                        <Card className="bg-card/50 border-border hover:bg-card/80 transition-colors cursor-pointer">
-                          <CardHeader className="pb-3">
-                            <CardTitle className="text-sm font-medium text-muted-foreground uppercase tracking-wide">
-                              CPU & Memory
-                            </CardTitle>
-                          </CardHeader>
-                          <CardContent className="space-y-3">
-                            <div onClick={() => handleMetricClick("cpu")}>
-                              <div className="text-xs text-muted-foreground mb-1">CPU Usage</div>
+                      <div>
+                        <h3 className="text-sm font-semibold text-muted-foreground mb-3 uppercase tracking-wide">
+                          Basic Information
+                        </h3>
+                        <div className="grid grid-cols-2 lg:grid-cols-3 gap-4">
+                          <div>
+                            <div className="text-xs text-muted-foreground mb-1">CPU Usage</div>
+                            <div
+                              className="cursor-pointer hover:opacity-80 transition-opacity"
+                              onClick={() => handleMetricClick("cpu")}
+                            >
                               <div className={`font-semibold mb-1 ${getUsageColor(selectedVM.cpu * 100)}`}>
                                 {(selectedVM.cpu * 100).toFixed(1)}%
                               </div>
@@ -819,8 +800,13 @@ export function VirtualMachines() {
                                 className={`h-1.5 ${getModalProgressColor(selectedVM.cpu * 100)}`}
                               />
                             </div>
-                            <div onClick={() => handleMetricClick("memory")}>
-                              <div className="text-xs text-muted-foreground mb-1">Memory</div>
+                          </div>
+                          <div>
+                            <div className="text-xs text-muted-foreground mb-1">Memory</div>
+                            <div
+                              className="cursor-pointer hover:opacity-80 transition-opacity"
+                              onClick={() => handleMetricClick("memory")}
+                            >
                               <div
                                 className={`font-semibold mb-1 ${getUsageColor((selectedVM.mem / selectedVM.maxmem) * 100)}`}
                               >
@@ -832,19 +818,13 @@ export function VirtualMachines() {
                                 className={`h-1.5 ${getModalProgressColor((selectedVM.mem / selectedVM.maxmem) * 100)}`}
                               />
                             </div>
-                          </CardContent>
-                        </Card>
-
-                        {/* Disk Usage Card */}
-                        <Card className="bg-card/50 border-border hover:bg-card/80 transition-colors cursor-pointer">
-                          <CardHeader className="pb-3">
-                            <CardTitle className="text-sm font-medium text-muted-foreground uppercase tracking-wide">
-                              Disk Usage
-                            </CardTitle>
-                          </CardHeader>
-                          <CardContent>
-                            <div onClick={() => handleMetricClick("disk")}>
-                              <div className="text-xs text-muted-foreground mb-1">Storage</div>
+                          </div>
+                          <div>
+                            <div className="text-xs text-muted-foreground mb-1">Disk</div>
+                            <div
+                              className="cursor-pointer hover:opacity-80 transition-opacity"
+                              onClick={() => handleMetricClick("disk")}
+                            >
                               <div
                                 className={`font-semibold mb-1 ${getUsageColor((selectedVM.disk / selectedVM.maxdisk) * 100)}`}
                               >
@@ -856,128 +836,199 @@ export function VirtualMachines() {
                                 className={`h-1.5 ${getModalProgressColor((selectedVM.disk / selectedVM.maxdisk) * 100)}`}
                               />
                             </div>
-                          </CardContent>
-                        </Card>
-
-                        {/* Disk I/O Card */}
-                        <Card className="bg-card/50 border-border hover:bg-card/80 transition-colors cursor-pointer">
-                          <CardHeader className="pb-3">
-                            <CardTitle className="text-sm font-medium text-muted-foreground uppercase tracking-wide">
-                              Disk I/O
-                            </CardTitle>
-                          </CardHeader>
-                          <CardContent>
-                            <div onClick={() => handleMetricClick("disk")}>
-                              <div className="space-y-2">
-                                <div className="flex items-center justify-between">
-                                  <span className="text-xs text-muted-foreground">Read</span>
-                                  <span className="text-sm font-semibold text-green-500">
-                                    {((selectedVM.diskread || 0) / 1024 ** 2).toFixed(2)} MB
-                                  </span>
-                                </div>
-                                <div className="flex items-center justify-between">
-                                  <span className="text-xs text-muted-foreground">Write</span>
-                                  <span className="text-sm font-semibold text-blue-500">
-                                    {((selectedVM.diskwrite || 0) / 1024 ** 2).toFixed(2)} MB
-                                  </span>
-                                </div>
+                          </div>
+                          <div>
+                            <div className="text-xs text-muted-foreground mb-1">Disk I/O</div>
+                            <div
+                              className="cursor-pointer hover:opacity-80 transition-opacity"
+                              onClick={() => handleMetricClick("disk")}
+                            >
+                              <div className="text-sm text-green-500 flex items-center gap-1">
+                                <span>↓</span>
+                                <span>{((selectedVM.diskread || 0) / 1024 ** 2).toFixed(2)} MB</span>
+                              </div>
+                              <div className="text-sm text-blue-500 flex items-center gap-1">
+                                <span>↑</span>
+                                <span>{((selectedVM.diskwrite || 0) / 1024 ** 2).toFixed(2)} MB</span>
                               </div>
                             </div>
-                          </CardContent>
-                        </Card>
-
-                        {/* Network I/O Card */}
-                        <Card className="bg-card/50 border-border hover:bg-card/80 transition-colors cursor-pointer">
-                          <CardHeader className="pb-3">
-                            <CardTitle className="text-sm font-medium text-muted-foreground uppercase tracking-wide">
-                              Network I/O
-                            </CardTitle>
-                          </CardHeader>
-                          <CardContent>
-                            <div onClick={() => handleMetricClick("network")}>
-                              <div className="space-y-2">
-                                <div className="flex items-center justify-between">
-                                  <span className="text-xs text-muted-foreground">Download</span>
-                                  <span className="text-sm font-semibold text-green-500">
-                                    {((selectedVM.netin || 0) / 1024 ** 2).toFixed(2)} MB
-                                  </span>
-                                </div>
-                                <div className="flex items-center justify-between">
-                                  <span className="text-xs text-muted-foreground">Upload</span>
-                                  <span className="text-sm font-semibold text-blue-500">
-                                    {((selectedVM.netout || 0) / 1024 ** 2).toFixed(2)} MB
-                                  </span>
-                                </div>
+                          </div>
+                          <div>
+                            <div className="text-xs text-muted-foreground mb-1">Network I/O</div>
+                            <div
+                              className="cursor-pointer hover:opacity-80 transition-opacity"
+                              onClick={() => handleMetricClick("network")}
+                            >
+                              <div className="text-sm text-green-500 flex items-center gap-1">
+                                <span>↓</span>
+                                <span>{((selectedVM.netin || 0) / 1024 ** 2).toFixed(2)} MB</span>
+                              </div>
+                              <div className="text-sm text-blue-500 flex items-center gap-1">
+                                <span>↑</span>
+                                <span>{((selectedVM.netout || 0) / 1024 ** 2).toFixed(2)} MB</span>
                               </div>
                             </div>
-                          </CardContent>
-                        </Card>
+                          </div>
+                        </div>
+                      </div>
 
-                        <Card className="bg-card/50 border-border md:col-span-2 lg:col-span-1">
-                          <CardHeader className="pb-3">
-                            <CardTitle className="text-sm font-medium text-muted-foreground uppercase tracking-wide flex items-center justify-between">
-                              Resources
-                              <Button
-                                variant="ghost"
-                                size="sm"
-                                className="h-7 text-xs"
-                                onClick={() => setShowDetailsModal(true)}
+                      <div>
+                        <h3 className="text-sm font-semibold text-muted-foreground mb-3 uppercase tracking-wide">
+                          Resources
+                        </h3>
+                        <div className="grid grid-cols-2 lg:grid-cols-3 gap-4">
+                          {vmDetails?.config.cores && (
+                            <div>
+                              <div className="text-xs text-muted-foreground mb-1">CPU Cores</div>
+                              <div className="font-semibold text-blue-500">{vmDetails.config.cores}</div>
+                            </div>
+                          )}
+                          {vmDetails?.config.sockets && (
+                            <div>
+                              <div className="text-xs text-muted-foreground mb-1">CPU Sockets</div>
+                              <div className="font-semibold text-foreground">{vmDetails.config.sockets}</div>
+                            </div>
+                          )}
+                          {vmDetails?.config.memory && (
+                            <div>
+                              <div className="text-xs text-muted-foreground mb-1">Memory</div>
+                              <div className="font-semibold text-blue-500">{vmDetails.config.memory} MB</div>
+                            </div>
+                          )}
+                          {vmDetails?.config.swap && (
+                            <div>
+                              <div className="text-xs text-muted-foreground mb-1">Swap</div>
+                              <div className="font-semibold text-foreground">{vmDetails.config.swap} MB</div>
+                            </div>
+                          )}
+                          {vmDetails?.config.rootfs && (
+                            <div className="col-span-2 lg:col-span-3">
+                              <div className="text-xs text-muted-foreground mb-1">Root Filesystem</div>
+                              <div className="font-medium text-foreground text-sm break-all font-mono">
+                                {vmDetails.config.rootfs}
+                              </div>
+                            </div>
+                          )}
+                          {Object.keys(vmDetails?.config || {})
+                            .filter((key) => key.match(/^(scsi|sata|ide|virtio)\d+$/))
+                            .map((diskKey) => (
+                              <div key={diskKey} className="col-span-2 lg:col-span-3">
+                                <div className="text-xs text-muted-foreground mb-1">
+                                  {diskKey.toUpperCase().replace(/(\d+)/, " $1")}
+                                </div>
+                                <div className="font-medium text-foreground text-sm break-all font-mono">
+                                  {vmDetails?.config[diskKey]}
+                                </div>
+                              </div>
+                            ))}
+                        </div>
+                      </div>
+
+                      <div>
+                        <h3 className="text-sm font-semibold text-muted-foreground mb-3 uppercase tracking-wide">
+                          Network
+                        </h3>
+                        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                          {Object.keys(vmDetails?.config || {})
+                            .filter((key) => key.match(/^net\d+$/))
+                            .map((netKey) => (
+                              <div key={netKey} className="col-span-1">
+                                <div className="text-xs text-muted-foreground mb-1">
+                                  Network Interface {netKey.replace("net", "")}
+                                </div>
+                                <div className="font-medium text-green-500 text-sm break-all font-mono">
+                                  {vmDetails?.config[netKey]}
+                                </div>
+                              </div>
+                            ))}
+                          {vmDetails?.config.nameserver && (
+                            <div>
+                              <div className="text-xs text-muted-foreground mb-1">DNS Nameserver</div>
+                              <div className="font-medium text-foreground font-mono">{vmDetails.config.nameserver}</div>
+                            </div>
+                          )}
+                          {vmDetails?.config.searchdomain && (
+                            <div>
+                              <div className="text-xs text-muted-foreground mb-1">Search Domain</div>
+                              <div className="font-medium text-foreground">{vmDetails.config.searchdomain}</div>
+                            </div>
+                          )}
+                          {vmDetails?.config.hostname && (
+                            <div>
+                              <div className="text-xs text-muted-foreground mb-1">Hostname</div>
+                              <div className="font-medium text-foreground">{vmDetails.config.hostname}</div>
+                            </div>
+                          )}
+                        </div>
+                      </div>
+
+                      <div>
+                        <h3 className="text-sm font-semibold text-muted-foreground mb-3 uppercase tracking-wide">
+                          Options
+                        </h3>
+                        <div className="grid grid-cols-2 lg:grid-cols-3 gap-4">
+                          {vmDetails?.config.onboot !== undefined && (
+                            <div>
+                              <div className="text-xs text-muted-foreground mb-1">Start on Boot</div>
+                              <Badge
+                                variant="outline"
+                                className={
+                                  vmDetails.config.onboot
+                                    ? "bg-green-500/10 text-green-500 border-green-500/20"
+                                    : "bg-red-500/10 text-red-500 border-red-500/20"
+                                }
                               >
-                                <Info className="h-3 w-3 mr-1" />
-                                More Info
-                              </Button>
-                            </CardTitle>
-                          </CardHeader>
-                          <CardContent className="space-y-2">
-                            {vmDetails?.config.cores && (
-                              <div className="flex items-center justify-between">
-                                <span className="text-xs text-muted-foreground">CPU Cores</span>
-                                <span className="text-sm font-semibold text-blue-500">{vmDetails.config.cores}</span>
-                              </div>
-                            )}
-                            {vmDetails?.config.sockets && (
-                              <div className="flex items-center justify-between">
-                                <span className="text-xs text-muted-foreground">CPU Sockets</span>
-                                <span className="text-sm font-semibold">{vmDetails.config.sockets}</span>
-                              </div>
-                            )}
-                            {vmDetails?.config.memory && (
-                              <div className="flex items-center justify-between">
-                                <span className="text-xs text-muted-foreground">Memory</span>
-                                <span className="text-sm font-semibold text-blue-500">
-                                  {vmDetails.config.memory} MB
-                                </span>
-                              </div>
-                            )}
-                            {vmDetails?.config.swap && (
-                              <div className="flex items-center justify-between">
-                                <span className="text-xs text-muted-foreground">Swap</span>
-                                <span className="text-sm font-semibold">{vmDetails.config.swap} MB</span>
-                              </div>
-                            )}
-                            {selectedVM.type === "lxc" && vmDetails?.config && (
-                              <div className="flex items-center justify-between">
-                                <span className="text-xs text-muted-foreground">IP Address</span>
-                                <span
-                                  className={`text-sm font-semibold ${
-                                    extractIPFromConfig(vmDetails.config) === "DHCP"
-                                      ? "text-yellow-500"
-                                      : "text-green-500"
-                                  }`}
-                                >
-                                  {extractIPFromConfig(vmDetails.config)}
-                                </span>
-                              </div>
-                            )}
-                          </CardContent>
-                        </Card>
+                                {vmDetails.config.onboot ? "Yes" : "No"}
+                              </Badge>
+                            </div>
+                          )}
+                          {vmDetails?.config.unprivileged !== undefined && (
+                            <div>
+                              <div className="text-xs text-muted-foreground mb-1">Unprivileged</div>
+                              <Badge
+                                variant="outline"
+                                className={
+                                  vmDetails.config.unprivileged
+                                    ? "bg-green-500/10 text-green-500 border-green-500/20"
+                                    : "bg-yellow-500/10 text-yellow-500 border-yellow-500/20"
+                                }
+                              >
+                                {vmDetails.config.unprivileged ? "Yes" : "No"}
+                              </Badge>
+                            </div>
+                          )}
+                          {vmDetails?.config.ostype && (
+                            <div>
+                              <div className="text-xs text-muted-foreground mb-1">OS Type</div>
+                              <div className="font-medium text-foreground">{vmDetails.config.ostype}</div>
+                            </div>
+                          )}
+                          {vmDetails?.config.arch && (
+                            <div>
+                              <div className="text-xs text-muted-foreground mb-1">Architecture</div>
+                              <div className="font-medium text-foreground">{vmDetails.config.arch}</div>
+                            </div>
+                          )}
+                          {vmDetails?.config.boot && (
+                            <div>
+                              <div className="text-xs text-muted-foreground mb-1">Boot Order</div>
+                              <div className="font-medium text-foreground">{vmDetails.config.boot}</div>
+                            </div>
+                          )}
+                          {vmDetails?.config.features && (
+                            <div className="col-span-2 lg:col-span-3">
+                              <div className="text-xs text-muted-foreground mb-1">Features</div>
+                              <div className="font-medium text-foreground text-sm">{vmDetails.config.features}</div>
+                            </div>
+                          )}
+                        </div>
                       </div>
                     </>
                   )}
                 </div>
               </div>
 
-              <div className="border-t border-border bg-background px-6 py-4 sticky bottom-0">
+              <div className="border-t border-border bg-background px-6 py-4 flex-shrink-0">
                 <h3 className="text-sm font-semibold text-muted-foreground mb-3 uppercase tracking-wide">
                   Control Actions
                 </h3>
@@ -1017,201 +1068,18 @@ export function VirtualMachines() {
                 </div>
               </div>
             </>
-          ) : (
-            selectedVM &&
-            selectedMetric && (
-              <MetricsView
-                vmid={selectedVM.vmid}
-                vmName={selectedVM.name}
-                vmType={selectedVM.type as "qemu" | "lxc"}
-                metricType={selectedMetric}
-                onBack={handleBackToMain}
-              />
-            )
-          )}
-        </DialogContent>
-      </Dialog>
-
-      <Dialog open={showDetailsModal} onOpenChange={setShowDetailsModal}>
-        <DialogContent className="max-w-4xl max-h-[90vh] flex flex-col p-0">
-          <DialogHeader className="pb-4 border-b border-border px-6 pt-6 sticky top-0 bg-background z-10">
-            <div className="flex items-center justify-between gap-4">
-              <DialogTitle className="flex items-center gap-3">
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="h-8 w-8 rounded-full"
-                  onClick={() => setShowDetailsModal(false)}
-                >
-                  <ArrowLeft className="h-4 w-4" />
-                </Button>
-                <span>{selectedVM?.type === "lxc" ? "Container" : "Virtual Machine"} Configuration</span>
-              </DialogTitle>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="h-8 w-8 rounded-full flex-shrink-0"
-                onClick={() => setShowDetailsModal(false)}
-              >
-                <X className="h-4 w-4" />
-              </Button>
-            </div>
-          </DialogHeader>
-
-          <div className="flex-1 overflow-y-auto px-6 py-4">
-            <div className="space-y-6">
-              {/* Hardware/Resources Section */}
-              <div>
-                <h3 className="text-sm font-semibold text-muted-foreground mb-3 uppercase tracking-wide">
-                  {selectedVM?.type === "lxc" ? "Resources" : "Hardware"}
-                </h3>
-                <div className="grid grid-cols-2 lg:grid-cols-3 gap-4">
-                  {vmDetails?.config.cores && (
-                    <div>
-                      <div className="text-xs text-muted-foreground mb-1">CPU Cores</div>
-                      <div className="font-semibold text-blue-500">{vmDetails.config.cores}</div>
-                    </div>
-                  )}
-                  {vmDetails?.config.sockets && (
-                    <div>
-                      <div className="text-xs text-muted-foreground mb-1">CPU Sockets</div>
-                      <div className="font-semibold text-foreground">{vmDetails.config.sockets}</div>
-                    </div>
-                  )}
-                  {vmDetails?.config.memory && (
-                    <div>
-                      <div className="text-xs text-muted-foreground mb-1">Memory</div>
-                      <div className="font-semibold text-blue-500">{vmDetails.config.memory} MB</div>
-                    </div>
-                  )}
-                  {vmDetails?.config.swap && (
-                    <div>
-                      <div className="text-xs text-muted-foreground mb-1">Swap</div>
-                      <div className="font-semibold text-foreground">{vmDetails.config.swap} MB</div>
-                    </div>
-                  )}
-                  {vmDetails?.config.rootfs && (
-                    <div className="col-span-2 lg:col-span-3">
-                      <div className="text-xs text-muted-foreground mb-1">Root Filesystem</div>
-                      <div className="font-medium text-foreground text-sm break-all font-mono">
-                        {vmDetails.config.rootfs}
-                      </div>
-                    </div>
-                  )}
-                  {Object.keys(vmDetails?.config || {})
-                    .filter((key) => key.match(/^(scsi|sata|ide|virtio)\d+$/))
-                    .map((diskKey) => (
-                      <div key={diskKey} className="col-span-2 lg:col-span-3">
-                        <div className="text-xs text-muted-foreground mb-1">
-                          {diskKey.toUpperCase().replace(/(\d+)/, " $1")}
-                        </div>
-                        <div className="font-medium text-foreground text-sm break-all font-mono">
-                          {vmDetails?.config[diskKey]}
-                        </div>
-                      </div>
-                    ))}
-                </div>
-              </div>
-
-              {/* Network Section */}
-              <div>
-                <h3 className="text-sm font-semibold text-muted-foreground mb-3 uppercase tracking-wide">Network</h3>
-                <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-                  {Object.keys(vmDetails?.config || {})
-                    .filter((key) => key.match(/^net\d+$/))
-                    .map((netKey) => (
-                      <div key={netKey} className="col-span-1">
-                        <div className="text-xs text-muted-foreground mb-1">
-                          Network Interface {netKey.replace("net", "")}
-                        </div>
-                        <div className="font-medium text-green-500 text-sm break-all font-mono">
-                          {vmDetails?.config[netKey]}
-                        </div>
-                      </div>
-                    ))}
-                  {vmDetails?.config.nameserver && (
-                    <div>
-                      <div className="text-xs text-muted-foreground mb-1">DNS Nameserver</div>
-                      <div className="font-medium text-foreground font-mono">{vmDetails.config.nameserver}</div>
-                    </div>
-                  )}
-                  {vmDetails?.config.searchdomain && (
-                    <div>
-                      <div className="text-xs text-muted-foreground mb-1">Search Domain</div>
-                      <div className="font-medium text-foreground">{vmDetails.config.searchdomain}</div>
-                    </div>
-                  )}
-                  {vmDetails?.config.hostname && (
-                    <div>
-                      <div className="text-xs text-muted-foreground mb-1">Hostname</div>
-                      <div className="font-medium text-foreground">{vmDetails.config.hostname}</div>
-                    </div>
-                  )}
-                </div>
-              </div>
-
-              {/* Options Section */}
-              <div>
-                <h3 className="text-sm font-semibold text-muted-foreground mb-3 uppercase tracking-wide">Options</h3>
-                <div className="grid grid-cols-2 lg:grid-cols-3 gap-4">
-                  {vmDetails?.config.onboot !== undefined && (
-                    <div>
-                      <div className="text-xs text-muted-foreground mb-1">Start on Boot</div>
-                      <Badge
-                        variant="outline"
-                        className={
-                          vmDetails.config.onboot
-                            ? "bg-green-500/10 text-green-500 border-green-500/20"
-                            : "bg-red-500/10 text-red-500 border-red-500/20"
-                        }
-                      >
-                        {vmDetails.config.onboot ? "Yes" : "No"}
-                      </Badge>
-                    </div>
-                  )}
-                  {vmDetails?.config.unprivileged !== undefined && (
-                    <div>
-                      <div className="text-xs text-muted-foreground mb-1">Unprivileged</div>
-                      <Badge
-                        variant="outline"
-                        className={
-                          vmDetails.config.unprivileged
-                            ? "bg-green-500/10 text-green-500 border-green-500/20"
-                            : "bg-yellow-500/10 text-yellow-500 border-yellow-500/20"
-                        }
-                      >
-                        {vmDetails.config.unprivileged ? "Yes" : "No"}
-                      </Badge>
-                    </div>
-                  )}
-                  {vmDetails?.config.ostype && (
-                    <div>
-                      <div className="text-xs text-muted-foreground mb-1">OS Type</div>
-                      <div className="font-medium text-foreground">{vmDetails.config.ostype}</div>
-                    </div>
-                  )}
-                  {vmDetails?.config.arch && (
-                    <div>
-                      <div className="text-xs text-muted-foreground mb-1">Architecture</div>
-                      <div className="font-medium text-foreground">{vmDetails.config.arch}</div>
-                    </div>
-                  )}
-                  {vmDetails?.config.boot && (
-                    <div>
-                      <div className="text-xs text-muted-foreground mb-1">Boot Order</div>
-                      <div className="font-medium text-foreground">{vmDetails.config.boot}</div>
-                    </div>
-                  )}
-                  {vmDetails?.config.features && (
-                    <div className="col-span-2 lg:col-span-3">
-                      <div className="text-xs text-muted-foreground mb-1">Features</div>
-                      <div className="font-medium text-foreground text-sm">{vmDetails.config.features}</div>
-                    </div>
-                  )}
-                </div>
-              </div>
-            </div>
-          </div>
+          ) : currentView === "metrics" && selectedMetric ? (
+            <MetricsDialog
+              vmid={selectedVM?.vmid || 0}
+              vmName={selectedVM?.name || ""}
+              vmType={selectedVM?.type || "qemu"}
+              metric={selectedMetric}
+              onBack={() => {
+                setCurrentView("main")
+                setSelectedMetric(null)
+              }}
+            />
+          ) : null}
         </DialogContent>
       </Dialog>
     </div>