feat(NetworkPage, GeneralPage): move Device Name input to a new position for improved layout

src/app/components/DeviceDetailOverlay.tsx

@@ -94,8 +94,7 @@ export default function DeviceDetailOverlay({
   };
 
   const getDevicePath = (): string[] => {
-    const [type, num] = device.id.split('-');
+    return ['iec', 'devices', device.number];
-    return ['iec', 'devices', type, num];
   };
 
   const getDeviceData = () => {

src/app/components/DevicesPage.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { Printer, HardDrive, Network, Box, ChevronRight, RefreshCw, FolderOpen } from 'lucide-react';
+import { Printer, HardDrive, Network, Box, ChevronRight, RefreshCw, FolderOpen, Computer, Cable, CassetteTape, Plug } from 'lucide-react';
 import DeviceDetailOverlay from './DeviceDetailOverlay';
 import MediaBrowser from './MediaBrowser';
 import { toast } from 'sonner';
@@ -45,77 +45,24 @@ export default function DevicesPage({ config, setConfig, openDeviceId, onClearOp
 
   const devices: Device[] = [];
 
-  // Printer devices
+  if (config.iec?.devices) {
-  if (config.iec?.devices?.printer) {
+    Object.entries(config.iec.devices).forEach(([num, device]: [string, any]) => {
-    Object.entries(config.iec.devices.printer).forEach(([num, device]: [string, any]) => {
+      const type = device.type as Device['type'];
+      const name = device.name || (
+        type === 'drive'    ? `Drive ${num}` :
+        type === 'network'  ? `Network ${num}` :
+        type === 'meatloaf' ? `Meatloaf ${num}` :
+        undefined
+      );
       devices.push({
-        id: `printer-${num}`,
+        id: `${type}-${num}`,
         number: num,
-        type: 'printer',
+        type,
-        name: device.name,
+        name,
-        enabled: device.enabled
-      });
-    });
-  }
-
-  // Drive devices
-  if (config.iec?.devices?.drive) {
-    Object.entries(config.iec.devices.drive).forEach(([key, value]: [string, any]) => {
-      if (key !== 'vdrive' && key !== 'rom') {
-        devices.push({
-          id: `drive-${key}`,
-          number: key,
-          type: 'drive',
-          name: `Drive ${key}`,
-          enabled: value.enabled,
-          base_url: value.base_url,
-          url: value.url,
-          mode: value.mode
-        });
-      }
-    });
-  }
-
-  // Network devices
-  if (config.iec?.devices?.network) {
-    Object.entries(config.iec.devices.network).forEach(([num, device]: [string, any]) => {
-      devices.push({
-        id: `network-${num}`,
-        number: num,
-        type: 'network',
-        name: `Network ${num}`,
-        enabled: device.enabled,
-        base_url: device.base_url,
-        url: device.url
-      });
-    });
-  }
-
-  // Other devices
-  if (config.iec?.devices?.other) {
-    Object.entries(config.iec.devices.other).forEach(([num, device]: [string, any]) => {
-      devices.push({
-        id: `other-${num}`,
-        number: num,
-        type: 'other',
-        name: device.name,
-        enabled: device.enabled
-      });
-    });
-  }
-
-  // Meatloaf devices
-  if (config.iec?.devices?.meatloaf) {
-    Object.entries(config.iec.devices.meatloaf).forEach(([num, device]: [string, any]) => {
-      devices.push({
-        id: `meatloaf-${num}`,
-        number: num,
-        type: 'meatloaf',
-        name: `Meatloaf ${num}`,
         enabled: device.enabled,
         base_url: device.base_url,
         url: device.url,
-        mode: device.mode
+        mode: device.mode,
       });
     });
   }
@@ -137,6 +84,8 @@ export default function DevicesPage({ config, setConfig, openDeviceId, onClearOp
         return <HardDrive className="w-5 h-5" />;
       case 'network':
         return <Network className="w-5 h-5" />;
+      case 'meatloaf':
+        return <Computer className="w-5 h-5" />;
       default:
         return <Box className="w-5 h-5" />;
     }
@@ -177,27 +126,16 @@ export default function DevicesPage({ config, setConfig, openDeviceId, onClearOp
 
   const toggleDeviceEnabled = (device: Device, e: React.MouseEvent) => {
     e.stopPropagation();
-
-    const [type, num] = device.id.split('-');
-    const path = ['iec', 'devices', type, num, 'enabled'];
-
     const newConfig = JSON.parse(JSON.stringify(config));
-    let current = newConfig;
+    newConfig.iec.devices[device.number].enabled = device.enabled ? 0 : 1;
-
-    for (let i = 0; i < path.length - 1; i++) {
-      current = current[path[i]];
-    }
-
-    current[path[path.length - 1]] = device.enabled ? 0 : 1;
     setConfig(newConfig);
-
     toast.success(`Device #${device.number} ${device.enabled ? 'disabled' : 'enabled'}`);
   };
 
   return (
     <div className="p-4">
       {/* Host Settings section moved from GeneralPage */}
-      <h2 className="text-sm text-neutral-500 mb-2">Host Settings</h2>
+      <h2 className="text-sm text-neutral-500 mb-2 flex items-center gap-2"><Computer className="w-4 h-4" /> Host Settings</h2>
       <div className="bg-white border border-neutral-200 rounded-lg divide-y divide-neutral-200 mb-6">
         <div className="p-4">
           <label className="text-sm text-neutral-500 block mb-2">Model</label>
@@ -257,7 +195,7 @@ export default function DevicesPage({ config, setConfig, openDeviceId, onClearOp
         </div>
       </div>
       <div className="flex items-center justify-between mb-3">
-        <h2 className="text-sm text-neutral-500">IEC Devices</h2>
+        <h2 className="text-sm text-neutral-500 flex items-center gap-2"><Cable className="w-4 h-4" /> IEC Devices</h2>
         <button
           onClick={rescanBus}
           disabled={isScanning}
@@ -329,7 +267,7 @@ export default function DevicesPage({ config, setConfig, openDeviceId, onClearOp
 
 
       {/* ── Cassette ── */}
-      <h2 className="text-sm text-neutral-500 pt-4">Cassette</h2>
+      <h2 className="text-sm text-neutral-500 pt-4 flex items-center gap-2"><CassetteTape className="w-4 h-4" /> Cassette</h2>
       <div className="bg-white border border-neutral-200 rounded-lg divide-y divide-neutral-200">
         <div className="p-4 flex items-center justify-between">
           <label className="text-sm text-neutral-500">Enabled</label>
@@ -350,12 +288,33 @@ export default function DevicesPage({ config, setConfig, openDeviceId, onClearOp
         </div> */}
         <div className="p-4">
           <label className="text-sm text-neutral-500 block mb-2">URL</label>
-          <input type="text" value={cassette.url || ''} onChange={(e) => updateSetting(['cassette', 'url'], e.target.value)} className="w-full px-3 py-2 border border-neutral-300 rounded-lg" />
+          <div className="flex gap-2">
+            <input
+              type="text"
+              value={cassette.url || ''}
+              onChange={(e) => updateSetting(['cassette', 'url'], e.target.value)}
+              className="flex-1 px-3 py-2 border border-neutral-300 rounded-lg"
+            />
+            <button
+              onClick={() => setShowCassetteUrlBrowser(true)}
+              className="px-3 py-2 border border-neutral-300 rounded-lg bg-neutral-50 hover:bg-neutral-100"
+            >
+              <FolderOpen className="w-5 h-5" />
+            </button>
+          </div>
         </div>
       </div>
 
+      {showCassetteUrlBrowser && (
+        <MediaBrowser
+          currentPath={cassette.url || '/'}
+          onSelect={(p) => updateSetting(['cassette', 'url'], p)}
+          onClose={() => setShowCassetteUrlBrowser(false)}
+        />
+      )}
+
       {/* ── Hardware ── */}
-      <h2 className="text-sm text-neutral-500 pt-4">User Port</h2>
+      <h2 className="text-sm text-neutral-500 pt-4 flex items-center gap-2"><Plug className="w-4 h-4" /> User Port</h2>
       <div className="bg-white border border-neutral-200 rounded-lg divide-y divide-neutral-200">
         <div className="p-4 flex items-center justify-between">
           <label className="text-sm text-neutral-500">User Port Enabled</label>

src/app/components/GeneralPage.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+import { Settings } from 'lucide-react';
 import { getFileContents } from '../webdav';
 
 interface GeneralPageProps {
@@ -41,9 +42,20 @@ export default function GeneralPage({ config, setConfig }: GeneralPageProps) {
 
   return (
     <div className="p-4 space-y-4">
-      <h2 className="text-sm text-neutral-500">General Settings</h2>
+      <h2 className="text-sm text-neutral-500 flex items-center gap-2"><Settings className="w-4 h-4" /> General Settings</h2>
 
       <div className="bg-white border border-neutral-200 rounded-lg divide-y divide-neutral-200">
+
+        <div className="p-4">
+          <label className="text-sm text-neutral-500 block mb-2">Device Name</label>
+          <input
+            type="text"
+            value={general.devicename || ''}
+            onChange={(e) => updateSetting(['general', 'devicename'], e.target.value)}
+            className="w-full px-3 py-2 border border-neutral-300 rounded-lg"
+          />
+        </div>
+
         <div className="p-4">
           <label className="text-sm text-neutral-500 block mb-2">Appearance</label>
           <select
@@ -108,16 +120,6 @@ export default function GeneralPage({ config, setConfig }: GeneralPageProps) {
           />
         </div>
 
-        <div className="p-4">
-          <label className="text-sm text-neutral-500 block mb-2">Device Name</label>
-          <input
-            type="text"
-            value={general.devicename || ''}
-            onChange={(e) => updateSetting(['general', 'devicename'], e.target.value)}
-            className="w-full px-3 py-2 border border-neutral-300 rounded-lg"
-          />
-        </div>
-
         <div className="p-4 flex items-center justify-between">
           <label className="text-sm text-neutral-500">Rotation Sounds</label>
           <button

src/app/components/IECPage.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { FolderOpen } from 'lucide-react';
+import { Cable, Code2, Cpu, FolderOpen, Link, List, Zap } from 'lucide-react';
 import MediaBrowser from './MediaBrowser';
 
 interface IECPageProps {
@@ -26,7 +26,7 @@ export default function IECPage({ config, setConfig }: IECPageProps) {
 
   return (
     <div className="p-4 space-y-4">
-      <h2 className="text-sm text-neutral-500">IEC Settings</h2>
+      <h2 className="text-sm text-neutral-500 flex items-center gap-2"><Cable className="w-4 h-4" /> IEC Settings</h2>
 
       <div className="bg-white border border-neutral-200 rounded-lg divide-y divide-neutral-200">
         <div className="p-4 flex items-center justify-between">
@@ -108,7 +108,7 @@ export default function IECPage({ config, setConfig }: IECPageProps) {
       )}
       </div>
 
-      <h2 className="text-sm text-neutral-500 pt-4">Drive ROM</h2>
+      <h2 className="text-sm text-neutral-500 pt-4 flex items-center gap-2"><Cpu className="w-4 h-4" /> Drive ROMs</h2>
 
       <div className="bg-white border border-neutral-200 rounded-lg divide-y divide-neutral-200">
         <div className="p-4 flex items-center justify-between">
@@ -169,7 +169,7 @@ export default function IECPage({ config, setConfig }: IECPageProps) {
         />
       )}
 
-      <h2 className="text-sm text-neutral-500 pt-4">Directory Settings</h2>
+      <h2 className="text-sm text-neutral-500 pt-4 flex items-center gap-2"><List className="w-4 h-4" /> Directory Settings</h2>
 
       <div className="bg-white border border-neutral-200 rounded-lg divide-y divide-neutral-200">
         {Object.entries(iec.directory || {}).map(([key, value]) => (
@@ -202,7 +202,7 @@ export default function IECPage({ config, setConfig }: IECPageProps) {
         ))}
       </div>
 
-      <h2 className="text-sm text-neutral-500 pt-4">Hardware Fastloaders</h2>
+      <h2 className="text-sm text-neutral-500 pt-4 flex items-center gap-2"><Zap className="w-4 h-4" /> Hardware Fastloaders</h2>
 
       <div className="bg-white border border-neutral-200 rounded-lg divide-y divide-neutral-200">
         <div className="p-3 bg-neutral-50">
@@ -252,7 +252,7 @@ export default function IECPage({ config, setConfig }: IECPageProps) {
         ))}
       </div>
 
-      <h2 className="text-sm text-neutral-500 pt-4">Software Fastloaders</h2>
+      <h2 className="text-sm text-neutral-500 pt-4 flex items-center gap-2"><Code2 className="w-4 h-4" /> Software Fastloaders</h2>
 
       <div className="bg-white border border-neutral-200 rounded-lg divide-y divide-neutral-200">
         {Object.entries(iec.fastloaders?.software || {}).map(([key, value]) => (
@@ -276,7 +276,7 @@ export default function IECPage({ config, setConfig }: IECPageProps) {
         ))}
       </div>
 
-      <h2 className="text-sm text-neutral-500 pt-4">Chainloaders</h2>
+      <h2 className="text-sm text-neutral-500 pt-4 flex items-center gap-2"><Link className="w-4 h-4" /> Chainloaders</h2>
 
       <div className="bg-white border border-neutral-200 rounded-lg divide-y divide-neutral-200">
         {Object.entries(iec.chainloaders || {}).map(([key, value]) => (

src/app/components/MediaEntry.tsx

@@ -33,7 +33,7 @@ export const IMAGE_EXTS   = new Set(['png', 'jpg', 'jpeg', 'gif', 'bmp', 'webp',
 export const AUDIO_EXTS   = new Set(['sid', 'psid', 'rsid', 'mus', 'vgm']);
 export const ROM_EXTS     = new Set(['bin', 'rom', 'crt']);
 export const TAPE_EXTS    = new Set(['tap', 'htap', 't64', 'tcrt']);
-export const DISK_EXTS    = new Set(['d41', 'd64', 'd71', 'd80', 'd81', 'd82', 'g64', 'g71', 'g81', 'p64', 'p71', 'p81', 'nib']);
+export const DISK_EXTS    = new Set(['c64', 'd41', 'd64', 'd67', 'd71', 'd80', 'd81', 'd82', 'd88', 'f64', 'g41', 'g64', 'g71', 'g81', 'm2i', 'nbz', 'nib', 'p64', 'p71', 'p81', 'scp', 'x64']);
 export const DISC_EXTS    = new Set(['iso', 'img', 'cue']);
 export const HD_EXTS      = new Set(['d1m', 'd2m', 'd4m', 'd90', 'dhd', 'hdd', 'bbt', 'd8b', 'dfi']);
 export const ARCHIVE_EXTS = new Set(['zip', '7z', 'tar', 'gz', 'bz2', 'xz', 'rar', 'arj', 'lzh', 'ace', 'z', 'lha', 'cab', 'lbr', 'arc', 'ark', 'lnx']);

src/app/components/MediaManager.tsx

@@ -738,9 +738,8 @@ export default function MediaManager({ initialPath = '/', rootPath, title, confi
     const newConfig = JSON.parse(JSON.stringify(config));
     if (!newConfig.iec) newConfig.iec = {};
     if (!newConfig.iec.devices) newConfig.iec.devices = {};
-    if (!newConfig.iec.devices[deviceType]) newConfig.iec.devices[deviceType] = {};
+    if (!newConfig.iec.devices[key]) newConfig.iec.devices[key] = { type: deviceType };
-    if (!newConfig.iec.devices[deviceType][key]) newConfig.iec.devices[deviceType][key] = {};
+    const dev = newConfig.iec.devices[key];
-    const dev = newConfig.iec.devices[deviceType][key];
 
     if (mountEntry.name.toLowerCase().endsWith('.lst')) {
       try {
@@ -1305,10 +1304,12 @@ export default function MediaManager({ initialPath = '/', rootPath, title, confi
             <DialogDescription className="truncate">{mountEntry?.name}</DialogDescription>
           </DialogHeader>
           {(() => {
-            const drives = Object.entries(config?.iec?.devices?.drive ?? {})
+            const allDevices = Object.entries(config?.iec?.devices ?? {});
-              .filter(([k]) => k !== 'vdrive' && k !== 'rom')
+            const drives = allDevices
+              .filter(([, v]: [string, any]) => (v as any)?.type === 'drive')
               .map(([k, v]: [string, any]) => ({ type: 'drive' as const, key: k, base_url: v?.base_url as string | undefined, url: v?.url as string | undefined, enabled: !!v?.enabled }));
-            const meatloafs = Object.entries(config?.iec?.devices?.meatloaf ?? {})
+            const meatloafs = allDevices
+              .filter(([, v]: [string, any]) => (v as any)?.type === 'meatloaf')
               .map(([k, v]: [string, any]) => ({ type: 'meatloaf' as const, key: k, base_url: v?.base_url as string | undefined, url: v?.url as string | undefined, enabled: !!v?.enabled }));
             const devices = [...drives, ...meatloafs];
             if (!devices.length)

src/app/components/NetworkPage.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Wifi, Trash2, Scan } from 'lucide-react';
+import { Bluetooth, Globe, Wifi, Trash2, Scan } from 'lucide-react';
 import WiFiScanOverlay from './WiFiScanOverlay';
 import { toast } from 'sonner';
 import { useWs } from '../ws';
@@ -51,7 +51,7 @@ export default function NetworkPage({ config, setConfig }: NetworkPageProps) {
   return (
     <div className="p-4 space-y-4">
       <div className="flex items-center justify-between">
-        <h2 className="text-sm text-neutral-500">Known WiFi Networks</h2>
+        <h2 className="text-sm text-neutral-500 flex items-center gap-2"><Wifi className="w-4 h-4" /> Known WiFi Networks</h2>
         <button
           onClick={() => { wsSend('scan'); setShowWiFiScan(true); }}
           className="flex items-center gap-1 px-3 py-1.5 bg-blue-600 text-white text-sm rounded-lg"
@@ -110,7 +110,7 @@ export default function NetworkPage({ config, setConfig }: NetworkPageProps) {
         />
       )}
 
-      <h2 className="text-sm text-neutral-500 pt-4">Network</h2>
+      <h2 className="text-sm text-neutral-500 pt-4 flex items-center gap-2"><Globe className="w-4 h-4" /> Network</h2>
 
       <div className="bg-white border border-neutral-200 rounded-lg divide-y divide-neutral-200">
         <div className="p-4">
@@ -214,18 +214,9 @@ export default function NetworkPage({ config, setConfig }: NetworkPageProps) {
         </div>
       </div>
 
-      <h2 className="text-sm text-neutral-500 pt-4">Bluetooth</h2>
+      <h2 className="text-sm text-neutral-500 pt-4 flex items-center gap-2"><Bluetooth className="w-4 h-4" /> Bluetooth</h2>
 
       <div className="bg-white border border-neutral-200 rounded-lg divide-y divide-neutral-200">
-        <div className="p-4">
-          <label className="text-sm text-neutral-500 block mb-2">Device Name</label>
-          <input
-            type="text"
-            value={bluetooth.devicename || ''}
-            onChange={(e) => updateSetting(['bluetooth', 'devicename'], e.target.value)}
-            className="w-full px-3 py-2 border border-neutral-300 rounded-lg"
-          />
-        </div>
 
         <div className="p-4 flex items-center justify-between">
           <label className="text-sm text-neutral-500">Enabled</label>
@@ -243,6 +234,17 @@ export default function NetworkPage({ config, setConfig }: NetworkPageProps) {
           </button>
         </div>
         
+        <div className="p-4">
+          <label className="text-sm text-neutral-500 block mb-2">Device Name</label>
+          <input
+            type="text"
+            value={bluetooth.devicename || ''}
+            onChange={(e) => updateSetting(['bluetooth', 'devicename'], e.target.value)}
+            className="w-full px-3 py-2 border border-neutral-300 rounded-lg"
+          />
+        </div>
+
+
         <div className="p-4">
           <label className="text-sm text-neutral-500 block mb-2">Baud Rate</label>
           <input

src/app/components/SearchOverlay.tsx

@@ -121,8 +121,8 @@ export default function SearchOverlay({ config, setConfig, onClose }: SearchOver
 
   const handleMount = (deviceNum: string, result: SearchResult) => {
     const newConfig = JSON.parse(JSON.stringify(config));
-    if (newConfig.iec?.devices?.drive?.[deviceNum]) {
+    if (newConfig.iec?.devices?.[deviceNum]) {
-      newConfig.iec.devices.drive[deviceNum].url = result.path;
+      newConfig.iec.devices[deviceNum].url = result.path;
       setConfig(newConfig);
       toast.success(`Mounted ${result.name} on Device #${deviceNum}`);
       setShowDeviceMenu(null);
@@ -131,10 +131,11 @@ export default function SearchOverlay({ config, setConfig, onClose }: SearchOver
 
   const getAvailableDevices = () => {
     const devices: { number: string; name: string; url?: string }[] = [];
-    if (config.iec?.devices?.drive) {
+    if (config.iec?.devices) {
-      for (const [num, device] of Object.entries(config.iec.devices.drive)) {
+      for (const [num, device] of Object.entries(config.iec.devices)) {
-        if (num !== 'vdrive' && num !== 'rom' && (device as any).enabled) {
+        const d = device as any;
-          devices.push({ number: num, name: `Drive ${num}`, url: (device as any).url });
+        if (d.type === 'drive' && d.enabled) {
+          devices.push({ number: num, name: `Drive ${num}`, url: d.url });
         }
       }
     }

src/app/components/StatusPage.tsx

@@ -27,10 +27,11 @@ export default function StatusPage({ config, setConfig }: StatusPageProps) {
     const [showDeviceOverlay, setShowDeviceOverlay] = useState(false);
   // Find the first enabled device as the active device
   const findActiveDevice = () => {
-    if (config.iec?.devices?.drive) {
+    if (config.iec?.devices) {
-      for (const [num, device] of Object.entries(config.iec.devices.drive)) {
+      for (const [num, device] of Object.entries(config.iec.devices)) {
-        if (num !== 'vdrive' && num !== 'rom' && (device as any).enabled) {
+        const d = device as any;
-          return { number: num, ...device as any, type: 'drive' };
+        if (d.type === 'drive' && d.enabled) {
+          return { number: num, ...d };
         }
       }
     }
@@ -51,8 +52,8 @@ export default function StatusPage({ config, setConfig }: StatusPageProps) {
 
   const switchActiveMedia = (file: string) => {
     const newConfig = JSON.parse(JSON.stringify(config));
-    if (newConfig.iec?.devices?.drive?.[activeDevice!.number]) {
+    if (newConfig.iec?.devices?.[activeDevice!.number]) {
-      newConfig.iec.devices.drive[activeDevice!.number].url = file;
+      newConfig.iec.devices[activeDevice!.number].url = file;
       setConfig(newConfig);
     }
   };
@@ -377,6 +378,13 @@ export default function StatusPage({ config, setConfig }: StatusPageProps) {
       <h2 className="text-sm text-neutral-500 flex items-center gap-2">
         <Computer className="w-4 h-4" />
         System Status
+        <div className="ml-auto flex items-center gap-3">
+          <div className="text-xs text-neutral-500">Uptime</div>
+          <div className="flex items-center gap-1 text-sm">
+            <Clock className="w-3 h-3" />
+            <span>3h 24m</span>
+          </div>
+        </div>
       </h2>
 
       <div className="bg-white border border-neutral-200 rounded-lg p-4">
@@ -421,10 +429,6 @@ export default function StatusPage({ config, setConfig }: StatusPageProps) {
               <Wifi className="w-3 h-3 text-green-600" />
               <span>Connected</span>
             </div>
-            <div className="text-xs text-neutral-500 mt-1">IP Address</div>
-            <div className="text-sm text-neutral-700">192.168.1.100</div>
-            <div className="text-xs text-neutral-500 mt-1">MAC Address</div>
-            <div className="text-sm text-neutral-700">AA:BB:CC:DD:EE:FF</div>
             <div className="text-xs text-neutral-500 mt-1">WebSocket</div>
             <div className="flex items-center gap-1 text-sm">
               {wsStatus === 'connecting'   && <><Loader2 className="w-3 h-3 text-yellow-500 animate-spin" /><span className="text-yellow-600">Connecting</span></>}
@@ -433,11 +437,10 @@ export default function StatusPage({ config, setConfig }: StatusPageProps) {
             </div>
           </div>
           <div>
-            <div className="text-xs text-neutral-500">Uptime</div>
+            <div className="text-xs text-neutral-500 mt-1">IP Address</div>
-            <div className="flex items-center gap-1 text-sm">
+            <div className="text-sm text-neutral-700">192.168.1.100</div>
-              <Clock className="w-3 h-3" />
+            <div className="text-xs text-neutral-500 mt-1">MAC Address</div>
-              <span>3h 24m</span>
+            <div className="text-sm text-neutral-700">AA:BB:CC:DD:EE:FF</div>
-            </div>
           </div>
         </div>
         <div className="flex flex-col gap-2 mt-6">

src/app/components/ToolsPage.tsx

@@ -269,7 +269,7 @@ export default function ToolsPage({ config }: ToolsPageProps) {
 
       </div>
 
-      <h2 className="text-sm text-neutral-500">System Tools</h2>
+      <h2 className="text-sm text-neutral-500 flex items-center gap-2"><Wrench className="w-4 h-4" /> System Tools</h2>
 
       <div className="bg-white border border-neutral-200 rounded-lg divide-y divide-neutral-200">
         <button
@@ -312,7 +312,7 @@ export default function ToolsPage({ config }: ToolsPageProps) {
         </button>
       </div>
 
-      <h2 className="text-sm text-neutral-500 pt-4">Storage Tools</h2>
+      <h2 className="text-sm text-neutral-500 pt-4 flex items-center gap-2"><HardDrive className="w-4 h-4" /> Storage Tools</h2>
 
       <div className="bg-white border border-neutral-200 rounded-lg divide-y divide-neutral-200">
         <button

src/imports/config.json

@@ -137,93 +137,99 @@
       "bbs": 1
     },
     "devices": {
-      "printer": {
+      "4": {
-        "4": {
+        "enabled": 1,
-          "enabled": 1,
+        "type": "printer",
-          "type": "printer",
+        "name": "MPS803"
-          "name": "MPS803"
-        }
       },
-      "drive": {
+      "8": {
-        "8": {
+        "enabled": 1,
-          "enabled": 1,
+        "type": "drive",
-          "url": "/sd",
+        "url": "/sd",
-          "mode": 1
+        "mode": 1
-        },
-        "9": {
-          "enabled": 1,
-          "url": "/",
-          "mode": 1
-        },
-        "10": {
-          "enabled": 1,
-          "url": "/",
-          "mode": 1
-        },
-        "11": {
-          "enabled": 1,
-          "url": "/",
-          "mode": 1
-        },
-        "12": {
-          "enabled": 1,
-          "url": "/",
-          "mode": 1
-        },
-        "13": {
-          "enabled": 1,
-          "url": "/",
-          "mode": 1
-        },
-        "14": {
-          "enabled": 1,
-          "url": "/",
-          "mode": 1
-        },
-        "15": {
-          "enabled": 1,
-          "url": "/",
-          "mode": 1
-        }
       },
-      "network": {
+      "9": {
-        "16": {
+        "enabled": 1,
-          "enabled": 1,
+        "type": "drive",
-          "url": "/sd"
+        "url": "/",
-        },
+        "mode": 1
-        "17": {
-          "enabled": 1,
-          "url": "/"
-        },
-        "18": {
-          "enabled": 1,
-          "url": "/"
-        },
-        "19": {
-          "enabled": 1,
-          "url": "/"
-        }
       },
-      "other": {
+      "10": {
-        "20": {
+        "enabled": 1,
-          "enabled": 1,
+        "type": "drive",
-          "name": "CP/m"
+        "url": "/",
-        },
+        "mode": 1
-        "21": {
-          "enabled": 1,
-          "name": "S.A.M"
-        },
-        "29": {
-          "enabled": 1,
-          "name": "Clock"
-        }
       },
-      "meatloaf": {
+      "11": {
-        "30": {
+        "enabled": 1,
-          "enabled": 1,
+        "type": "drive",
-          "url": "/",
+        "url": "/",
-          "mode": 1
+        "mode": 1
-        }
+      },
+      "12": {
+        "enabled": 1,
+        "type": "drive",
+        "url": "/",
+        "mode": 1
+      },
+      "13": {
+        "enabled": 1,
+        "type": "drive",
+        "url": "/",
+        "mode": 1
+      },
+      "14": {
+        "enabled": 1,
+        "type": "drive",
+        "url": "/",
+        "mode": 1
+      },
+      "15": {
+        "enabled": 1,
+        "type": "drive",
+        "url": "/",
+        "mode": 1
+      },
+      "16": {
+        "enabled": 1,
+        "type": "network",
+        "url": "/sd"
+      },
+      "17": {
+        "enabled": 1,
+        "type": "network",
+        "url": "/"
+      },
+      "18": {
+        "enabled": 1,
+        "type": "network",
+        "url": "/"
+      },
+      "19": {
+        "enabled": 1,
+        "type": "network",
+        "url": "/"
+      },
+      "20": {
+        "enabled": 1,
+        "type": "other",
+        "name": "CP/m"
+      },
+      "21": {
+        "enabled": 1,
+        "type": "other",
+        "name": "S.A.M"
+      },
+      "29": {
+        "enabled": 1,
+        "type": "other",
+        "name": "Clock"
+      },
+      "30": {
+        "enabled": 1,
+        "type": "meatloaf",
+        "url": "/",
+        "mode": 1
       }
     }
   },