Update AppImagen

AppImage/components/hardware.tsx

@@ -636,7 +636,7 @@ export default function Hardware() {
                 <div
                   key={index}
                   onClick={() => handleGPUClick(gpu)}
-                  className="cursor-pointer rounded-lg border border-border/30 bg-muted/60 p-4 transition-colors hover:bg-muted/70"
+                  className="cursor-pointer rounded-lg border border-white/10 bg-white/5 hover:bg-white/10 dark:bg-white/5 dark:hover:bg-white/10 p-4 transition-colors"
                 >
                   <div className="mb-3 flex items-center justify-between">
                     <span className="font-medium text-sm">{gpu.name}</span>
@@ -1021,7 +1021,7 @@ export default function Hardware() {
               <div
                 key={index}
                 onClick={() => setSelectedPCIDevice(device)}
-                className="cursor-pointer rounded-lg border border-border/30 bg-muted/60 p-3 transition-colors hover:bg-muted/70"
+                className="cursor-pointer rounded-lg border border-white/10 bg-white/5 hover:bg-white/10 dark:bg-white/5 dark:hover:bg-white/10 p-3 transition-colors"
               >
                 <div className="flex items-center justify-between gap-2 mb-2">
                   <Badge className={`${getDeviceTypeColor(device.type)} text-xs shrink-0`}>{device.type}</Badge>
@@ -1210,7 +1210,7 @@ export default function Hardware() {
                 <div
                   key={index}
                   onClick={() => setSelectedUPS(ups)}
-                  className="cursor-pointer rounded-lg border border-border/30 bg-muted/60 p-4 transition-colors hover:bg-muted/70"
+                  className="cursor-pointer rounded-lg border border-white/10 bg-white/5 hover:bg-white/10 dark:bg-white/5 dark:hover:bg-white/10 p-4 transition-colors"
                 >
                   <div className="flex items-center justify-between mb-4">
                     <div className="flex-1 min-w-0">
@@ -1480,7 +1480,7 @@ export default function Hardware() {
                   <div
                     key={index}
                     onClick={() => setSelectedNetwork(device)}
-                    className="cursor-pointer rounded-lg border border-border/30 bg-muted/60 p-3 transition-colors hover:bg-muted/70"
+                    className="cursor-pointer rounded-lg border border-white/10 bg-white/5 hover:bg-white/10 dark:bg-white/5 dark:hover:bg-white/10 p-3 transition-colors"
                   >
                     <div className="flex items-center justify-between gap-2 mb-1">
                       <span className="text-sm font-medium line-clamp-2 break-words flex-1">{device.device}</span>
@@ -1563,7 +1563,7 @@ export default function Hardware() {
               <div
                 key={index}
                 onClick={() => setSelectedDisk(device)}
-                className="cursor-pointer rounded-lg border border-border/30 bg-muted/60 p-3 transition-colors hover:bg-muted/70"
+                className="cursor-pointer rounded-lg border border-white/10 bg-white/5 hover:bg-white/10 dark:bg-white/5 dark:hover:bg-white/10 p-3 transition-colors"
               >
                 <div className="flex items-center justify-between gap-2 mb-2">
                   <span className="text-sm font-medium truncate flex-1">{device.name}</span>

AppImage/components/storage-overview.tsx

@@ -644,7 +644,7 @@ export function StorageOverview() {
             {storageData.disks.map((disk) => (
               <div
                 key={disk.name}
-                className="border-2 border-accent/20 rounded-lg p-4 cursor-pointer bg-accent/10 hover:bg-accent/20 transition-colors"
+                className="border border-white/10 rounded-lg p-4 cursor-pointer bg-white/5 hover:bg-white/10 dark:bg-white/5 dark:hover:bg-white/10 transition-colors"
                 onClick={() => handleDiskClick(disk)}
               >
                 <div className="space-y-2 mb-3">

AppImage/components/system-logs.tsx

@@ -866,7 +866,7 @@ export function SystemLogs() {
                   {displayedLogs.map((log, index) => (
                     <div
                       key={index}
-                      className="flex flex-col md:flex-row md:items-start space-y-2 md:space-y-0 md:space-x-4 p-3 rounded-lg bg-muted/30 border border-border/50 hover:bg-muted/50 transition-colors cursor-pointer"
+                      className="flex flex-col md:flex-row md:items-start space-y-2 md:space-y-0 md:space-x-4 p-3 rounded-lg border border-white/10 bg-white/5 hover:bg-white/10 dark:bg-white/5 dark:hover:bg-white/10 transition-colors cursor-pointer"
                       onClick={() => {
                         if (log.isEvent) {
                           setSelectedEvent(log.eventData)
@@ -958,7 +958,7 @@ export function SystemLogs() {
                   {backups.map((backup, index) => (
                     <div
                       key={index}
-                      className="flex items-start space-x-4 p-3 rounded-lg bg-muted/30 border border-border/50 hover:bg-muted/50 transition-colors cursor-pointer"
+                      className="flex items-start space-x-4 p-3 rounded-lg border border-white/10 bg-white/5 hover:bg-white/10 dark:bg-white/5 dark:hover:bg-white/10 transition-colors cursor-pointer"
                       onClick={() => {
                         setSelectedBackup(backup)
                         setIsBackupModalOpen(true)
@@ -1011,7 +1011,7 @@ export function SystemLogs() {
                   {notifications.map((notification, index) => (
                     <div
                       key={index}
-                      className="flex flex-col md:flex-row md:items-start space-y-2 md:space-y-0 md:space-x-4 p-3 rounded-lg bg-muted/30 border border-border/50 hover:bg-muted/50 transition-colors cursor-pointer overflow-hidden w-full"
+                      className="flex flex-col md:flex-row md:items-start space-y-2 md:space-y-0 md:space-x-4 p-3 rounded-lg border border-white/10 bg-white/5 hover:bg-white/10 dark:bg-white/5 dark:hover:bg-white/10 transition-colors cursor-pointer overflow-hidden w-full"
                       onClick={() => {
                         setSelectedNotification(notification)
                         setIsNotificationModalOpen(true)

AppImage/components/virtual-machines.tsx

@@ -596,18 +596,11 @@ export function VirtualMachines() {
                       onClick={() => handleVMClick(vm)}
                     >
                       <div className="flex items-center gap-3">
-                        {/* Status circle with play/stop icon */}
-                        <div
-                          className={`flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center ${
-                            vm.status === "running" ? "bg-green-500/20 text-green-500" : "bg-red-500/20 text-red-500"
-                          }`}
-                        >
                         {vm.status === "running" ? (
-                            <Play className="h-4 w-4 fill-current" />
+                          <Play className="h-5 w-5 text-green-500 fill-current flex-shrink-0" />
                         ) : (
-                            <Square className="h-4 w-4 fill-current" />
+                          <Square className="h-5 w-5 text-red-500 fill-current flex-shrink-0" />
                         )}
-                        </div>
 
                         <Badge variant="outline" className={`text-xs flex-shrink-0 ${typeBadge.color}`}>
                           {typeBadge.label}
@@ -620,11 +613,7 @@ export function VirtualMachines() {
                           </div>
                         </div>
 
-                        {/* Status icons */}
                         <div className="flex items-center gap-2 flex-shrink-0">
-                          {/* Network icon - always green */}
-                          <Network className="h-4 w-4 text-green-500" />
-
                           {/* CPU icon - color based on usage */}
                           <Cpu className={`h-4 w-4 ${getIconColor(Number.parseFloat(cpuPercent))}`} />