diff --git a/ui/src/components/sidebar/settings.tsx b/ui/src/components/sidebar/settings.tsx
index 5f58338..c3a216c 100644
--- a/ui/src/components/sidebar/settings.tsx
+++ b/ui/src/components/sidebar/settings.tsx
@@ -1,988 +1,991 @@
 import SidebarHeader from "@components/SidebarHeader";
 import {
-  useLocalAuthModalStore,
-  useSettingsStore,
-  useUiStore,
-  useUpdateStore,
+    useLocalAuthModalStore,
+    useSettingsStore,
+    useUiStore,
+    useUpdateStore,
 } from "@/hooks/stores";
-import { Checkbox } from "@components/Checkbox";
-import { Button, LinkButton } from "@components/Button";
-import { TextAreaWithLabel } from "@components/TextArea";
-import { SectionHeader } from "@components/SectionHeader";
-import { GridCard } from "@components/Card";
-import { InputFieldWithLabel } from "@components/InputField";
-import { CheckCircleIcon } from "@heroicons/react/20/solid";
-import { cx } from "@/cva.config";
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import { isOnDevice } from "@/main";
+import {Checkbox} from "@components/Checkbox";
+import {Button, LinkButton} from "@components/Button";
+import {TextAreaWithLabel} from "@components/TextArea";
+import {SectionHeader} from "@components/SectionHeader";
+import {GridCard} from "@components/Card";
+import {InputFieldWithLabel} from "@components/InputField";
+import {CheckCircleIcon} from "@heroicons/react/20/solid";
+import {cx} from "@/cva.config";
+import React, {useCallback, useEffect, useRef, useState} from "react";
+import {isOnDevice} from "@/main";
 import PointingFinger from "@/assets/pointing-finger.svg";
 import MouseIcon from "@/assets/mouse-icon.svg";
-import { useJsonRpc } from "@/hooks/useJsonRpc";
-import { SelectMenuBasic } from "../SelectMenuBasic";
-import { SystemVersionInfo } from "@components/UpdateDialog";
+import {useJsonRpc} from "@/hooks/useJsonRpc";
+import {SelectMenuBasic} from "../SelectMenuBasic";
+import {SystemVersionInfo} from "@components/UpdateDialog";
 import notifications from "@/notifications";
 import api from "../../api";
 import LocalAuthPasswordDialog from "@/components/LocalAuthPasswordDialog";
-import { LocalDevice } from "@routes/devices.$id";
-import { useRevalidator } from "react-router-dom";
-import { ShieldCheckIcon } from "@heroicons/react/20/solid";
+import {LocalDevice} from "@routes/devices.$id";
+import {useRevalidator} from "react-router-dom";
+import {ShieldCheckIcon} from "@heroicons/react/20/solid";
 
 export function SettingsItem({
-                               title,
-                               description,
-                               children,
-                               className,
-                             }: {
-  title: string;
-  description: string | React.ReactNode;
-  children?: React.ReactNode;
-  className?: string;
-  name?: string;
+   title,
+   description,
+   children,
+   className,
+}: {
+    title: string;
+    description: string | React.ReactNode;
+    children?: React.ReactNode;
+    className?: string;
+    name?: string;
 }) {
-  return (
-      <label className={cx("flex items-center justify-between gap-x-4 rounded", className)}>
-        <div className="space-y-0.5">
-          <h3 className="text-base font-semibold text-black dark:text-white">{title}</h3>
-          <p className="text-sm text-slate-700 dark:text-slate-300">{description}</p>
-        </div>
-        {children ? <div>{children}</div> : null}
-      </label>
-  );
+    return (
+        <label className={cx("flex items-center justify-between gap-x-4 rounded", className)}>
+            <div className="space-y-0.5">
+                <h3 className="text-base font-semibold text-black dark:text-white">{title}</h3>
+                <p className="text-sm text-slate-700 dark:text-slate-300">{description}</p>
+            </div>
+            {children ? <div>{children}</div> : null}
+        </label>
+    );
 }
 
 const defaultEdid =
     "00ffffffffffff0052620188008888881c150103800000780a0dc9a05747982712484c00000001010101010101010101010101010101023a801871382d40582c4500c48e2100001e011d007251d01e206e285500c48e2100001e000000fc00543734392d6648443732300a20000000fd00147801ff1d000a202020202020017b";
 const edids = [
-  {
-    value: defaultEdid,
-    label: "JetKVM Default",
-  },
-  {
-    value:
-        "00FFFFFFFFFFFF00047265058A3F6101101E0104A53420783FC125A8554EA0260D5054BFEF80714F8140818081C081008B009500B300283C80A070B023403020360006442100001A000000FD00304C575716010A202020202020000000FC0042323436574C0A202020202020000000FF0054384E4545303033383532320A01F802031CF14F90020304050607011112131415161F2309070783010000011D8018711C1620582C250006442100009E011D007251D01E206E28550006442100001E8C0AD08A20E02D10103E9600064421000018C344806E70B028401720A80406442100001E00000000000000000000000000000000000000000000000000000096",
-    label: "Acer B246WL, 1920x1200",
-  },
-  {
-    value:
-        "00FFFFFFFFFFFF0006B3872401010101021F010380342078EA6DB5A7564EA0250D5054BF6F00714F8180814081C0A9409500B300D1C0283C80A070B023403020360006442100001A000000FD00314B1E5F19000A202020202020000000FC00504132343851560A2020202020000000FF004D314C4D51533035323135370A014D02032AF14B900504030201111213141F230907078301000065030C001000681A00000101314BE6E2006A023A801871382D40582C450006442100001ECD5F80B072B0374088D0360006442100001C011D007251D01E206E28550006442100001E8C0AD08A20E02D10103E960006442100001800000000000000000000000000DC",
-    label: "ASUS PA248QV, 1920x1200",
-  },
-  {
-    value:
-        "00FFFFFFFFFFFF0010AC132045393639201E0103803C22782ACD25A3574B9F270D5054A54B00714F8180A9C0D1C00101010101010101023A801871382D40582C450056502100001E000000FF00335335475132330A2020202020000000FC0044454C4C204432373231480A20000000FD00384C1E5311000A202020202020018102031AB14F90050403020716010611121513141F65030C001000023A801871382D40582C450056502100001E011D8018711C1620582C250056502100009E011D007251D01E206E28550056502100001E8C0AD08A20E02D10103E960056502100001800000000000000000000000000000000000000000000000000000000004F",
-    label: "DELL D2721H, 1920x1080",
-  },
+    {
+        value: defaultEdid,
+        label: "JetKVM Default",
+    },
+    {
+        value:
+            "00FFFFFFFFFFFF00047265058A3F6101101E0104A53420783FC125A8554EA0260D5054BFEF80714F8140818081C081008B009500B300283C80A070B023403020360006442100001A000000FD00304C575716010A202020202020000000FC0042323436574C0A202020202020000000FF0054384E4545303033383532320A01F802031CF14F90020304050607011112131415161F2309070783010000011D8018711C1620582C250006442100009E011D007251D01E206E28550006442100001E8C0AD08A20E02D10103E9600064421000018C344806E70B028401720A80406442100001E00000000000000000000000000000000000000000000000000000096",
+        label: "Acer B246WL, 1920x1200",
+    },
+    {
+        value:
+            "00FFFFFFFFFFFF0006B3872401010101021F010380342078EA6DB5A7564EA0250D5054BF6F00714F8180814081C0A9409500B300D1C0283C80A070B023403020360006442100001A000000FD00314B1E5F19000A202020202020000000FC00504132343851560A2020202020000000FF004D314C4D51533035323135370A014D02032AF14B900504030201111213141F230907078301000065030C001000681A00000101314BE6E2006A023A801871382D40582C450006442100001ECD5F80B072B0374088D0360006442100001C011D007251D01E206E28550006442100001E8C0AD08A20E02D10103E960006442100001800000000000000000000000000DC",
+        label: "ASUS PA248QV, 1920x1200",
+    },
+    {
+        value:
+            "00FFFFFFFFFFFF0010AC132045393639201E0103803C22782ACD25A3574B9F270D5054A54B00714F8180A9C0D1C00101010101010101023A801871382D40582C450056502100001E000000FF00335335475132330A2020202020000000FC0044454C4C204432373231480A20000000FD00384C1E5311000A202020202020018102031AB14F90050403020716010611121513141F65030C001000023A801871382D40582C450056502100001E011D8018711C1620582C250056502100009E011D007251D01E206E28550056502100001E8C0AD08A20E02D10103E960056502100001800000000000000000000000000000000000000000000000000000000004F",
+        label: "DELL D2721H, 1920x1080",
+    },
 ];
 
 export default function SettingsSidebar() {
-  const setSidebarView = useUiStore(state => state.setSidebarView);
-  const settings = useSettingsStore();
-  const [send] = useJsonRpc();
-  const [streamQuality, setStreamQuality] = useState("1");
-  const [autoUpdate, setAutoUpdate] = useState(true);
-  const [devChannel, setDevChannel] = useState(false);
-  const [jiggler, setJiggler] = useState(false);
-  const [edid, setEdid] = useState<string | null>(null);
-  const [customEdidValue, setCustomEdidValue] = useState<string | null>(null);
+    const setSidebarView = useUiStore(state => state.setSidebarView);
+    const settings = useSettingsStore();
+    const [send] = useJsonRpc();
+    const [streamQuality, setStreamQuality] = useState("1");
+    const [autoUpdate, setAutoUpdate] = useState(true);
+    const [devChannel, setDevChannel] = useState(false);
+    const [jiggler, setJiggler] = useState(false);
+    const [edid, setEdid] = useState<string | null>(null);
+    const [customEdidValue, setCustomEdidValue] = useState<string | null>(null);
 
-  const [isAdopted, setAdopted] = useState(false);
-  const [deviceId, setDeviceId] = useState<string | null>(null);
+    const [isAdopted, setAdopted] = useState(false);
+    const [deviceId, setDeviceId] = useState<string | null>(null);
 
-  const [sshKey, setSSHKey] = useState<string>("");
-  const [localDevice, setLocalDevice] = useState<LocalDevice | null>(null);
+    const [sshKey, setSSHKey] = useState<string>("");
+    const [localDevice, setLocalDevice] = useState<LocalDevice | null>(null);
 
-  const sidebarRef = useRef<HTMLDivElement>(null);
+    const sidebarRef = useRef<HTMLDivElement>(null);
 
-  const hideCursor = useSettingsStore(state => state.isCursorHidden);
-  const setHideCursor = useSettingsStore(state => state.setCursorVisibility);
-  const setDeveloperMode = useSettingsStore(state => state.setDeveloperMode);
+    const hideCursor = useSettingsStore(state => state.isCursorHidden);
+    const setHideCursor = useSettingsStore(state => state.setCursorVisibility);
+    const setDeveloperMode = useSettingsStore(state => state.setDeveloperMode);
 
-  const [currentVersions, setCurrentVersions] = useState<{
-    appVersion: string;
-    systemVersion: string;
-  } | null>(null);
+    const [currentVersions, setCurrentVersions] = useState<{
+        appVersion: string;
+        systemVersion: string;
+    } | null>(null);
 
-  const [usbEmulationEnabled, setUsbEmulationEnabled] = useState(false);
-  const getUsbEmulationState = useCallback(() => {
-    send("getUsbEmulationState", {}, resp => {
-      if ("error" in resp) return;
-      setUsbEmulationEnabled(resp.result as boolean);
-    });
-  }, [send]);
-
-  const [usbConfig, setUsbConfig] = useState({
-    usb_product_id: '',
-    usb_vendor_id: '',
-    usb_serial_number: '',
-    usb_manufacturer: '',
-    usb_name: '',
-  })
-
-  const handleUsbEmulationToggle = useCallback(
-      (enabled: boolean) => {
-        send("setUsbEmulationState", { enabled: enabled }, resp => {
-          if ("error" in resp) {
-            notifications.error(
-                `Failed to ${enabled ? "enable" : "disable"} USB emulation: ${resp.error.data || "Unknown error"}`,
-            );
-            return;
-          }
-          setUsbEmulationEnabled(enabled);
-          getUsbEmulationState();
+    const [usbEmulationEnabled, setUsbEmulationEnabled] = useState(false);
+    const getUsbEmulationState = useCallback(() => {
+        send("getUsbEmulationState", {}, resp => {
+            if ("error" in resp) return;
+            setUsbEmulationEnabled(resp.result as boolean);
         });
-      },
-      [getUsbEmulationState, send],
-  );
+    }, [send]);
 
-  const getCloudState = useCallback(() => {
-    send("getCloudState", {}, resp => {
-      if ("error" in resp) return console.error(resp.error);
-      const cloudState = resp.result as { connected: boolean };
-      setAdopted(cloudState.connected);
-    });
-  }, [send]);
+    const [usbConfig, setUsbConfig] = useState({
+        usb_product_id: '',
+        usb_vendor_id: '',
+        usb_serial_number: '',
+        usb_manufacturer: '',
+        usb_name: '',
+    })
 
-  const deregisterDevice = async () => {
-    send("deregisterDevice", {}, resp => {
-      if ("error" in resp) {
-        notifications.error(
-            `Failed to de-register device: ${resp.error.data || "Unknown error"}`,
-        );
-        return;
-      }
-      getCloudState();
-      return;
-    });
-  };
+    const handleUsbEmulationToggle = useCallback(
+        (enabled: boolean) => {
+            send("setUsbEmulationState", {enabled: enabled}, resp => {
+                if ("error" in resp) {
+                    notifications.error(
+                        `Failed to ${enabled ? "enable" : "disable"} USB emulation: ${resp.error.data || "Unknown error"}`,
+                    );
+                    return;
+                }
+                setUsbEmulationEnabled(enabled);
+                getUsbEmulationState();
+            });
+        },
+        [getUsbEmulationState, send],
+    );
 
-  const handleStreamQualityChange = (factor: string) => {
-    send("setStreamQualityFactor", { factor: Number(factor) }, resp => {
-      if ("error" in resp) {
-        notifications.error(
-            `Failed to set stream quality: ${resp.error.data || "Unknown error"}`,
-        );
-        return;
-      }
-      setStreamQuality(factor);
-    });
-  };
-
-  const handleAutoUpdateChange = (enabled: boolean) => {
-    send("setAutoUpdateState", { enabled }, resp => {
-      if ("error" in resp) {
-        notifications.error(
-            `Failed to set auto-update: ${resp.error.data || "Unknown error"}`,
-        );
-        return;
-      }
-      setAutoUpdate(enabled);
-    });
-  };
-
-  const handleDevChannelChange = (enabled: boolean) => {
-    send("setDevChannelState", { enabled }, resp => {
-      if ("error" in resp) {
-        notifications.error(
-            `Failed to set dev channel state: ${resp.error.data || "Unknown error"}`,
-        );
-        return;
-      }
-      setDevChannel(enabled);
-    });
-  };
-
-  const handleJigglerChange = (enabled: boolean) => {
-    send("setJigglerState", { enabled }, resp => {
-      if ("error" in resp) {
-        notifications.error(
-            `Failed to set jiggler state: ${resp.error.data || "Unknown error"}`,
-        );
-        return;
-      }
-      setJiggler(enabled);
-    });
-  };
-
-  const handleEDIDChange = (newEdid: string) => {
-    send("setEDID", { edid: newEdid }, resp => {
-      if ("error" in resp) {
-        notifications.error(`Failed to set EDID: ${resp.error.data || "Unknown error"}`);
-        return;
-      }
-
-      // Update the EDID value in the UI
-      setEdid(newEdid);
-    });
-  };
-
-  const handleUsbConfigChange = useCallback((usbConfig: object) => {
-    send("setUsbConfig", { usbConfig }, resp => {
-      if ("error" in resp) {
-        notifications.error(
-            `Failed to update USB Config: ${resp.error.data || "Unknown error"}`,
-        );
-        return;
-      }
-    });
-  }, [send, usbConfig]);
-
-  const handleSSHKeyChange = (newKey: string) => {
-    setSSHKey(newKey);
-  };
-
-  const handleDevModeChange = useCallback(
-      (developerMode: boolean) => {
-        send("setDevModeState", { enabled: developerMode }, resp => {
-          if ("error" in resp) {
-            notifications.error(
-                `Failed to set dev mode: ${resp.error.data || "Unknown error"}`,
-            );
-            return;
-          }
-          setDeveloperMode(developerMode);
-          setTimeout(() => {
-            sidebarRef.current?.scrollTo({ top: 5000, behavior: "smooth" });
-          }, 0);
+    const getCloudState = useCallback(() => {
+        send("getCloudState", {}, resp => {
+            if ("error" in resp) return console.error(resp.error);
+            const cloudState = resp.result as { connected: boolean };
+            setAdopted(cloudState.connected);
         });
-      },
-      [send, setDeveloperMode],
-  );
+    }, [send]);
 
-  const handleUpdateSSHKey = useCallback(() => {
-    send("setSSHKeyState", { sshKey }, resp => {
-      if ("error" in resp) {
-        notifications.error(
-            `Failed to update SSH key: ${resp.error.data || "Unknown error"}`,
-        );
-        return;
-      }
-      notifications.success("SSH key updated successfully");
-    });
-  }, [send, sshKey]);
+    const deregisterDevice = async () => {
+        send("deregisterDevice", {}, resp => {
+            if ("error" in resp) {
+                notifications.error(
+                    `Failed to de-register device: ${resp.error.data || "Unknown error"}`,
+                );
+                return;
+            }
+            getCloudState();
+            return;
+        });
+    };
 
-  const handleUsbProductIdChange = (productId: string) => {
-    setUsbConfig({... usbConfig, usb_product_id: productId})
-  };
+    const handleStreamQualityChange = (factor: string) => {
+        send("setStreamQualityFactor", {factor: Number(factor)}, resp => {
+            if ("error" in resp) {
+                notifications.error(
+                    `Failed to set stream quality: ${resp.error.data || "Unknown error"}`,
+                );
+                return;
+            }
+            setStreamQuality(factor);
+        });
+    };
 
-  const handleUsbVendorIdChange = (vendorId: string) => {
-    setUsbConfig({... usbConfig, usb_vendor_id: vendorId})
-  };
+    const handleAutoUpdateChange = (enabled: boolean) => {
+        send("setAutoUpdateState", {enabled}, resp => {
+            if ("error" in resp) {
+                notifications.error(
+                    `Failed to set auto-update: ${resp.error.data || "Unknown error"}`,
+                );
+                return;
+            }
+            setAutoUpdate(enabled);
+        });
+    };
 
-  const handleUsbSerialChange = (serialNumber: string) => {
-    setUsbConfig({... usbConfig, usb_serial_number: serialNumber})
-  };
+    const handleDevChannelChange = (enabled: boolean) => {
+        send("setDevChannelState", {enabled}, resp => {
+            if ("error" in resp) {
+                notifications.error(
+                    `Failed to set dev channel state: ${resp.error.data || "Unknown error"}`,
+                );
+                return;
+            }
+            setDevChannel(enabled);
+        });
+    };
 
-  const handleUsbName = (name: string) => {
-    setUsbConfig({... usbConfig, usb_name: name})
-  };
+    const handleJigglerChange = (enabled: boolean) => {
+        send("setJigglerState", {enabled}, resp => {
+            if ("error" in resp) {
+                notifications.error(
+                    `Failed to set jiggler state: ${resp.error.data || "Unknown error"}`,
+                );
+                return;
+            }
+            setJiggler(enabled);
+        });
+    };
 
-  const handleUsbManufacturer = (manufacturer: string) => {
-    setUsbConfig({... usbConfig, usb_manufacturer: manufacturer})
-  };
+    const handleEDIDChange = (newEdid: string) => {
+        send("setEDID", {edid: newEdid}, resp => {
+            if ("error" in resp) {
+                notifications.error(`Failed to set EDID: ${resp.error.data || "Unknown error"}`);
+                return;
+            }
 
-  const { setIsUpdateDialogOpen, setModalView, otaState } = useUpdateStore();
-  const handleCheckForUpdates = () => {
-    if (otaState.updating) {
-      setModalView("updating");
-      setIsUpdateDialogOpen(true);
-    } else {
-      setModalView("loading");
-      setIsUpdateDialogOpen(true);
-    }
-  };
+            // Update the EDID value in the UI
+            setEdid(newEdid);
+        });
+    };
 
-  useEffect(() => {
-    getCloudState();
+    const handleUsbConfigChange = useCallback((usbConfig: object) => {
+        send("setUsbConfig", {usbConfig}, resp => {
+            if ("error" in resp) {
+                notifications.error(
+                    `Failed to update USB Config: ${resp.error.data || "Unknown error"}`,
+                );
+                return;
+            }
+        });
+    }, [send]);
 
-    send("getDeviceID", {}, async resp => {
-      if ("error" in resp) return console.error(resp.error);
-      setDeviceId(resp.result as string);
+    const handleSSHKeyChange = (newKey: string) => {
+        setSSHKey(newKey);
+    };
+
+    const handleDevModeChange = useCallback(
+        (developerMode: boolean) => {
+            send("setDevModeState", {enabled: developerMode}, resp => {
+                if ("error" in resp) {
+                    notifications.error(
+                        `Failed to set dev mode: ${resp.error.data || "Unknown error"}`,
+                    );
+                    return;
+                }
+                setDeveloperMode(developerMode);
+                setTimeout(() => {
+                    sidebarRef.current?.scrollTo({top: 5000, behavior: "smooth"});
+                }, 0);
+            });
+        },
+        [send, setDeveloperMode],
+    );
+
+    const handleUpdateSSHKey = useCallback(() => {
+        send("setSSHKeyState", {sshKey}, resp => {
+            if ("error" in resp) {
+                notifications.error(
+                    `Failed to update SSH key: ${resp.error.data || "Unknown error"}`,
+                );
+                return;
+            }
+            notifications.success("SSH key updated successfully");
+        });
+    }, [send, sshKey]);
+
+    const handleUsbProductIdChange = (productId: string) => {
+        setUsbConfig({...usbConfig, usb_product_id: productId})
+    };
+
+    const handleUsbVendorIdChange = (vendorId: string) => {
+        setUsbConfig({...usbConfig, usb_vendor_id: vendorId})
+    };
+
+    const handleUsbSerialChange = (serialNumber: string) => {
+        setUsbConfig({...usbConfig, usb_serial_number: serialNumber})
+    };
+
+    const handleUsbName = (name: string) => {
+        setUsbConfig({...usbConfig, usb_name: name})
+    };
+
+    const handleUsbManufacturer = (manufacturer: string) => {
+        setUsbConfig({...usbConfig, usb_manufacturer: manufacturer})
+    };
+
+    const {setIsUpdateDialogOpen, setModalView, otaState} = useUpdateStore();
+    const handleCheckForUpdates = () => {
+        if (otaState.updating) {
+            setModalView("updating");
+            setIsUpdateDialogOpen(true);
+        } else {
+            setModalView("loading");
+            setIsUpdateDialogOpen(true);
+        }
+    };
+
+    useEffect(() => {
+        getCloudState();
+
+        send("getDeviceID", {}, async resp => {
+            if ("error" in resp) return console.error(resp.error);
+            setDeviceId(resp.result as string);
+        });
+
+        send("getJigglerState", {}, resp => {
+            if ("error" in resp) return;
+            setJiggler(resp.result as boolean);
+        });
+
+        send("getAutoUpdateState", {}, resp => {
+            if ("error" in resp) return;
+            setAutoUpdate(resp.result as boolean);
+        });
+
+        send("getDevChannelState", {}, resp => {
+            if ("error" in resp) return;
+            setDevChannel(resp.result as boolean);
+        });
+
+        send("getStreamQualityFactor", {}, resp => {
+            if ("error" in resp) return;
+            setStreamQuality(String(resp.result));
+        });
+
+        send("getEDID", {}, resp => {
+            if ("error" in resp) {
+                notifications.error(`Failed to get EDID: ${resp.error.data || "Unknown error"}`);
+                return;
+            }
+
+            const receivedEdid = resp.result as string;
+
+            const matchingEdid = edids.find(
+                x => x.value.toLowerCase() === receivedEdid.toLowerCase(),
+            );
+
+            if (matchingEdid) {
+                // EDID is stored in uppercase in the UI
+                setEdid(matchingEdid.value.toUpperCase());
+                // Reset custom EDID value
+                setCustomEdidValue(null);
+            } else {
+                setEdid("custom");
+                setCustomEdidValue(receivedEdid);
+            }
+        });
+
+        send("getDevModeState", {}, resp => {
+            if ("error" in resp) return;
+            const result = resp.result as { enabled: boolean };
+            setDeveloperMode(result.enabled);
+        });
+
+        send("getSSHKeyState", {}, resp => {
+            if ("error" in resp) return;
+            setSSHKey(resp.result as string);
+        });
+
+        send("getUpdateStatus", {}, resp => {
+            if ("error" in resp) return;
+            const result = resp.result as SystemVersionInfo;
+            setCurrentVersions({
+                appVersion: result.local.appVersion,
+                systemVersion: result.local.systemVersion,
+            });
+        });
+
+        send("getUsbEmulationState", {}, resp => {
+            if ("error" in resp) return;
+            setUsbEmulationEnabled(resp.result as boolean);
+        });
+    }, [getCloudState, send, setDeveloperMode, setHideCursor, setJiggler]);
+
+    const getDevice = useCallback(async () => {
+        try {
+            const status = await api
+                .GET(`${import.meta.env.VITE_SIGNAL_API}/device`)
+                .then(res => res.json() as Promise<LocalDevice>);
+            setLocalDevice(status);
+        } catch (error) {
+            notifications.error("Failed to get authentication status");
+        }
+    }, []);
+
+    const {setModalView: setLocalAuthModalView} = useLocalAuthModalStore();
+    const [isLocalAuthDialogOpen, setIsLocalAuthDialogOpen] = useState(false);
+
+    useEffect(() => {
+        if (isOnDevice) getDevice();
+    }, [getDevice]);
+
+    useEffect(() => {
+        if (!isOnDevice) return;
+        // Refresh device status when the local auth dialog is closed
+        if (!isLocalAuthDialogOpen) {
+            getDevice();
+        }
+    }, [getDevice, isLocalAuthDialogOpen]);
+
+    const revalidator = useRevalidator();
+
+    const [currentTheme, setCurrentTheme] = useState(() => {
+        return localStorage.theme || "system";
     });
 
-    send("getJigglerState", {}, resp => {
-      if ("error" in resp) return;
-      setJiggler(resp.result as boolean);
-    });
+    const handleThemeChange = useCallback((value: string) => {
+        const root = document.documentElement;
 
-    send("getAutoUpdateState", {}, resp => {
-      if ("error" in resp) return;
-      setAutoUpdate(resp.result as boolean);
-    });
+        if (value === "system") {
+            localStorage.removeItem("theme");
+            // Check system preference
+            const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches
+                ? "dark"
+                : "light";
+            root.classList.remove("light", "dark");
+            root.classList.add(systemTheme);
+        } else {
+            localStorage.theme = value;
+            root.classList.remove("light", "dark");
+            root.classList.add(value);
+        }
+    }, []);
 
-    send("getDevChannelState", {}, resp => {
-      if ("error" in resp) return;
-      setDevChannel(resp.result as boolean);
-    });
+    const handleResetConfig = useCallback(() => {
+        send("resetConfig", {}, resp => {
+            if ("error" in resp) {
+                notifications.error(
+                    `Failed to reset configuration: ${resp.error.data || "Unknown error"}`,
+                );
+                return;
+            }
+            notifications.success("Configuration reset to default successfully");
+        });
+    }, [send]);
 
-    send("getStreamQualityFactor", {}, resp => {
-      if ("error" in resp) return;
-      setStreamQuality(String(resp.result));
-    });
-
-    send("getEDID", {}, resp => {
-      if ("error" in resp) {
-        notifications.error(`Failed to get EDID: ${resp.error.data || "Unknown error"}`);
-        return;
-      }
-
-      const receivedEdid = resp.result as string;
-
-      const matchingEdid = edids.find(
-          x => x.value.toLowerCase() === receivedEdid.toLowerCase(),
-      );
-
-      if (matchingEdid) {
-        // EDID is stored in uppercase in the UI
-        setEdid(matchingEdid.value.toUpperCase());
-        // Reset custom EDID value
-        setCustomEdidValue(null);
-      } else {
-        setEdid("custom");
-        setCustomEdidValue(receivedEdid);
-      }
-    });
-
-    send("getDevModeState", {}, resp => {
-      if ("error" in resp) return;
-      const result = resp.result as { enabled: boolean };
-      setDeveloperMode(result.enabled);
-    });
-
-    send("getSSHKeyState", {}, resp => {
-      if ("error" in resp) return;
-      setSSHKey(resp.result as string);
-    });
-
-    send("getUpdateStatus", {}, resp => {
-      if ("error" in resp) return;
-      const result = resp.result as SystemVersionInfo;
-      setCurrentVersions({
-        appVersion: result.local.appVersion,
-        systemVersion: result.local.systemVersion,
-      });
-    });
-
-    send("getUsbEmulationState", {}, resp => {
-      if ("error" in resp) return;
-      setUsbEmulationEnabled(resp.result as boolean);
-    });
-  }, [getCloudState, send, setDeveloperMode, setHideCursor, setJiggler]);
-
-  const getDevice = useCallback(async () => {
-    try {
-      const status = await api
-          .GET(`${import.meta.env.VITE_SIGNAL_API}/device`)
-          .then(res => res.json() as Promise<LocalDevice>);
-      setLocalDevice(status);
-    } catch (error) {
-      notifications.error("Failed to get authentication status");
-    }
-  }, []);
-
-  const { setModalView: setLocalAuthModalView } = useLocalAuthModalStore();
-  const [isLocalAuthDialogOpen, setIsLocalAuthDialogOpen] = useState(false);
-
-  useEffect(() => {
-    if (isOnDevice) getDevice();
-  }, [getDevice]);
-
-  useEffect(() => {
-    if (!isOnDevice) return;
-    // Refresh device status when the local auth dialog is closed
-    if (!isLocalAuthDialogOpen) {
-      getDevice();
-    }
-  }, [getDevice, isLocalAuthDialogOpen]);
-
-  const revalidator = useRevalidator();
-
-  const [currentTheme, setCurrentTheme] = useState(() => {
-    return localStorage.theme || "system";
-  });
-
-  const handleThemeChange = useCallback((value: string) => {
-    const root = document.documentElement;
-
-    if (value === "system") {
-      localStorage.removeItem("theme");
-      // Check system preference
-      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches
-          ? "dark"
-          : "light";
-      root.classList.remove("light", "dark");
-      root.classList.add(systemTheme);
-    } else {
-      localStorage.theme = value;
-      root.classList.remove("light", "dark");
-      root.classList.add(value);
-    }
-  }, []);
-
-  const handleResetConfig = useCallback(() => {
-    send("resetConfig", {}, resp => {
-      if ("error" in resp) {
-        notifications.error(
-            `Failed to reset configuration: ${resp.error.data || "Unknown error"}`,
-        );
-        return;
-      }
-      notifications.success("Configuration reset to default successfully");
-    });
-  }, [send]);
-
-  return (
-      <div
-          className="grid h-full shadow-sm grid-rows-headerBody"
-          // Prevent the keyboard entries from propagating to the document where they are listened for and sent to the KVM
-          onKeyDown={e => e.stopPropagation()}
-          onKeyUp={e => e.stopPropagation()}
-      >
-        <SidebarHeader title="Settings" setSidebarView={setSidebarView} />
+    return (
         <div
-            className="h-full px-4 py-2 space-y-4 overflow-y-scroll bg-white dark:bg-slate-900"
-            ref={sidebarRef}
+            className="grid h-full shadow-sm grid-rows-headerBody"
+            // Prevent the keyboard entries from propagating to the document where they are listened for and sent to the KVM
+            onKeyDown={e => e.stopPropagation()}
+            onKeyUp={e => e.stopPropagation()}
         >
-          <div className="space-y-4">
-            <div className="flex items-center justify-between mt-2 gap-x-2">
-              <SettingsItem
-                  title="Check for Updates"
-                  description={
-                    currentVersions ? (
-                        <>
-                          App: {currentVersions.appVersion}
-                          <br />
-                          System: {currentVersions.systemVersion}
-                        </>
-                    ) : (
-                        "Loading current versions..."
-                    )
-                  }
-              />
-              <div>
-                <Button
-                    size="SM"
-                    theme="light"
-                    text="Check for Updates"
-                    onClick={handleCheckForUpdates}
-                />
-              </div>
-            </div>
-            <div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20" />
-            <SectionHeader
-                title="Mouse"
-                description="Customize mouse behavior and interaction settings"
-            />
-
-            <div className="space-y-4">
-              <SettingsItem
-                  title="Hide Cursor"
-                  description="Hide the cursor when sending mouse movements"
-              >
-                <Checkbox
-                    checked={hideCursor}
-                    onChange={e => {
-                      setHideCursor(e.target.checked);
-                    }}
-                />
-              </SettingsItem>
-              <SettingsItem
-                  title="Jiggler"
-                  description="Simulate movement of a computer mouse. Prevents sleep mode, standby mode or the screensaver from activating"
-              >
-                <Checkbox
-                    checked={jiggler}
-                    onChange={e => {
-                      handleJigglerChange(e.target.checked);
-                    }}
-                />
-              </SettingsItem>
-              <div className="space-y-4">
-                <SettingsItem title="Modes" description="Choose the mouse input mode" />
-                <div className="flex items-center gap-4">
-                  <button
-                      className="block group grow"
-                      onClick={() => console.log("Absolute mouse mode clicked")}
-                  >
-                    <GridCard>
-                      <div className="flex items-center px-4 py-3 group gap-x-4">
-                        <img
-                            className="w-6 shrink-0"
-                            src={PointingFinger}
-                            alt="Finger touching a screen"
-                        />
-                        <div className="flex items-center justify-between grow">
-                          <div className="text-left">
-                            <h3 className="text-sm font-semibold text-black dark:text-white">
-                              Absolute
-                            </h3>
-                            <p className="text-xs leading-none text-slate-800 dark:text-slate-300">
-                              Most convenient
-                            </p>
-                          </div>
-                          <CheckCircleIcon className="w-4 h-4 text-blue-700 dark:text-blue-500" />
-                        </div>
-                      </div>
-                    </GridCard>
-                  </button>
-                  <button
-                      className="block opacity-50 cursor-not-allowed group grow"
-                      disabled
-                  >
-                    <GridCard>
-                      <div className="flex items-center px-4 py-3 gap-x-4">
-                        <img className="w-6 shrink-0" src={MouseIcon} alt="Mouse icon" />
-                        <div className="flex items-center justify-between grow">
-                          <div className="text-left">
-                            <h3 className="text-sm font-semibold text-black dark:text-white">
-                              Relative
-                            </h3>
-                            <p className="text-xs leading-none text-slate-800 dark:text-slate-300">
-                              Coming soon
-                            </p>
-                          </div>
-                        </div>
-                      </div>
-                    </GridCard>
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20" />
-          <div className="pb-2 space-y-4">
-            <SectionHeader
-                title="Video"
-                description="Configure display settings and EDID for optimal compatibility"
-            />
-            <div className="space-y-4">
-              <SettingsItem
-                  title="Stream Quality"
-                  description="Adjust the quality of the video stream"
-              >
-                <SelectMenuBasic
-                    size="SM"
-                    label=""
-                    value={streamQuality}
-                    options={[
-                      { value: "1", label: "High" },
-                      { value: "0.5", label: "Medium" },
-                      { value: "0.1", label: "Low" },
-                    ]}
-                    onChange={e => handleStreamQualityChange(e.target.value)}
-                />
-              </SettingsItem>
-              <SettingsItem
-                  title="EDID"
-                  description="Adjust the EDID settings for the display"
-              >
-                <SelectMenuBasic
-                    size="SM"
-                    label=""
-                    fullWidth
-                    value={customEdidValue ? "custom" : edid || "asd"}
-                    onChange={e => {
-                      if (e.target.value === "custom") {
-                        setEdid("custom");
-                        setCustomEdidValue("");
-                      } else {
-                        handleEDIDChange(e.target.value as string);
-                      }
-                    }}
-                    options={[...edids, { value: "custom", label: "Custom" }]}
-                />
-              </SettingsItem>
-              {customEdidValue !== null && (
-                  <>
-                    <SettingsItem
-                        title="Custom EDID"
-                        description="EDID details video mode compatibility. Default settings works in most cases, but unique UEFI/BIOS might need adjustments."
-                    />
-                    <TextAreaWithLabel
-                        label="EDID File"
-                        placeholder="00F..."
-                        rows={3}
-                        value={customEdidValue}
-                        onChange={e => setCustomEdidValue(e.target.value)}
-                    />
-                    <div className="flex justify-start gap-x-2">
-                      <Button
-                          size="MD"
-                          theme="primary"
-                          text="Set Custom EDID"
-                          onClick={() => handleEDIDChange(customEdidValue)}
-                      />
-                      <Button
-                          size="MD"
-                          theme="light"
-                          text="Restore to default"
-                          onClick={() => {
-                            setCustomEdidValue(null);
-                            handleEDIDChange(defaultEdid);
-                          }}
-                      />
-                    </div>
-                  </>
-              )}
-            </div>
-          </div>
-          {isOnDevice && (
-              <>
-                <div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20" />
-                <div className="pb-4 space-y-4">
-                  <SectionHeader
-                      title="JetKVM Cloud"
-                      description="Connect your device to the cloud for secure remote access and management"
-                  />
-
-                  <GridCard>
-                    <div className="flex items-start p-4 gap-x-4">
-                      <ShieldCheckIcon className="w-8 h-8 mt-1 text-blue-600 shrink-0 dark:text-blue-500" />
-                      <div className="space-y-3">
-                        <div className="space-y-2">
-                          <h3 className="text-base font-bold text-slate-900 dark:text-white">
-                            Cloud Security
-                          </h3>
-                          <div>
-                            <ul className="space-y-1 text-xs text-slate-700 dark:text-slate-300">
-                              <li>• End-to-end encryption using WebRTC (DTLS and SRTP)</li>
-                              <li>• Zero Trust security model</li>
-                              <li>• OIDC (OpenID Connect) authentication</li>
-                              <li>• All streams encrypted in transit</li>
-                            </ul>
-                          </div>
-
-                          <div className="text-xs text-slate-700 dark:text-slate-300">
-                            All cloud components are open-source and available on{" "}
-                            <a
-                                href="https://github.com/jetkvm"
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                className="font-medium text-blue-600 hover:text-blue-800 dark:text-blue-500 dark:hover:text-blue-400"
-                            >
-                              GitHub
-                            </a>
-                            .
-                          </div>
-                        </div>
-                        <hr className="block w-full dark:border-slate-600" />
-
-                        <div>
-                          <LinkButton
-                              to="https://jetkvm.com/docs/networking/remote-access"
-                              size="SM"
-                              theme="light"
-                              text="Learn about our cloud security"
-                          />
-                        </div>
-                      </div>
-                    </div>
-                  </GridCard>
-
-                  {!isAdopted ? (
-                      <div>
-                        <LinkButton
-                            to={
-                                import.meta.env.VITE_CLOUD_APP +
-                                "/signup?deviceId=" +
-                                deviceId +
-                                `&returnTo=${location.href}adopt`
+            <SidebarHeader title="Settings" setSidebarView={setSidebarView}/>
+            <div
+                className="h-full px-4 py-2 space-y-4 overflow-y-scroll bg-white dark:bg-slate-900"
+                ref={sidebarRef}
+            >
+                <div className="space-y-4">
+                    <div className="flex items-center justify-between mt-2 gap-x-2">
+                        <SettingsItem
+                            title="Check for Updates"
+                            description={
+                                currentVersions ? (
+                                    <>
+                                        App: {currentVersions.appVersion}
+                                        <br/>
+                                        System: {currentVersions.systemVersion}
+                                    </>
+                                ) : (
+                                    "Loading current versions..."
+                                )
                             }
-                            size="MD"
-                            theme="primary"
-                            text="Adopt KVM to Cloud account"
                         />
-                      </div>
-                  ) : (
-                      <div>
-                        <div className="space-y-2">
-                          <p className="text-sm text-slate-600 dark:text-slate-300">
-                            Your device is adopted to JetKVM Cloud
-                          </p>
-                          <div>
+                        <div>
                             <Button
-                                size="MD"
+                                size="SM"
                                 theme="light"
-                                text="De-register from Cloud"
-                                className="text-red-600"
-                                onClick={() => {
-                                  if (deviceId) {
-                                    if (
-                                        window.confirm(
-                                            "Are you sure you want to de-register this device?",
-                                        )
-                                    ) {
-                                      deregisterDevice();
-                                    }
-                                  } else {
-                                    notifications.error("No device ID available");
-                                  }
+                                text="Check for Updates"
+                                onClick={handleCheckForUpdates}
+                            />
+                        </div>
+                    </div>
+                    <div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20"/>
+                    <SectionHeader
+                        title="Mouse"
+                        description="Customize mouse behavior and interaction settings"
+                    />
+
+                    <div className="space-y-4">
+                        <SettingsItem
+                            title="Hide Cursor"
+                            description="Hide the cursor when sending mouse movements"
+                        >
+                            <Checkbox
+                                checked={hideCursor}
+                                onChange={e => {
+                                    setHideCursor(e.target.checked);
                                 }}
                             />
-                          </div>
-                        </div>
-                      </div>
-                  )}
-                </div>
-              </>
-          )}
-          <div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20" />
-          {isOnDevice ? (
-              <>
-                <div className="pb-2 space-y-4">
-                  <SectionHeader
-                      title="Local Access"
-                      description="Manage the mode of local access to the device"
-                  />
-
-                  <div className="space-y-4">
-                    <SettingsItem
-                        title="Authentication Mode"
-                        description={`Current mode: ${localDevice?.authMode === "password" ? "Password protected" : "No password"}`}
-                    >
-                      {localDevice?.authMode === "password" ? (
-                          <Button
-                              size="SM"
-                              theme="light"
-                              text="Disable Protection"
-                              onClick={() => {
-                                setLocalAuthModalView("deletePassword");
-                                setIsLocalAuthDialogOpen(true);
-                              }}
-                          />
-                      ) : (
-                          <Button
-                              size="SM"
-                              theme="light"
-                              text="Enable Password"
-                              onClick={() => {
-                                setLocalAuthModalView("createPassword");
-                                setIsLocalAuthDialogOpen(true);
-                              }}
-                          />
-                      )}
-                    </SettingsItem>
-
-                    {localDevice?.authMode === "password" && (
-                        <SettingsItem
-                            title="Change Password"
-                            description="Update your device access password"
-                        >
-                          <Button
-                              size="SM"
-                              theme="light"
-                              text="Change Password"
-                              onClick={() => {
-                                setLocalAuthModalView("updatePassword");
-                                setIsLocalAuthDialogOpen(true);
-                              }}
-                          />
                         </SettingsItem>
-                    )}
-                  </div>
+                        <SettingsItem
+                            title="Jiggler"
+                            description="Simulate movement of a computer mouse. Prevents sleep mode, standby mode or the screensaver from activating"
+                        >
+                            <Checkbox
+                                checked={jiggler}
+                                onChange={e => {
+                                    handleJigglerChange(e.target.checked);
+                                }}
+                            />
+                        </SettingsItem>
+                        <div className="space-y-4">
+                            <SettingsItem title="Modes" description="Choose the mouse input mode"/>
+                            <div className="flex items-center gap-4">
+                                <button
+                                    className="block group grow"
+                                    onClick={() => console.log("Absolute mouse mode clicked")}
+                                >
+                                    <GridCard>
+                                        <div className="flex items-center px-4 py-3 group gap-x-4">
+                                            <img
+                                                className="w-6 shrink-0"
+                                                src={PointingFinger}
+                                                alt="Finger touching a screen"
+                                            />
+                                            <div className="flex items-center justify-between grow">
+                                                <div className="text-left">
+                                                    <h3 className="text-sm font-semibold text-black dark:text-white">
+                                                        Absolute
+                                                    </h3>
+                                                    <p className="text-xs leading-none text-slate-800 dark:text-slate-300">
+                                                        Most convenient
+                                                    </p>
+                                                </div>
+                                                <CheckCircleIcon className="w-4 h-4 text-blue-700 dark:text-blue-500"/>
+                                            </div>
+                                        </div>
+                                    </GridCard>
+                                </button>
+                                <button
+                                    className="block opacity-50 cursor-not-allowed group grow"
+                                    disabled
+                                >
+                                    <GridCard>
+                                        <div className="flex items-center px-4 py-3 gap-x-4">
+                                            <img className="w-6 shrink-0" src={MouseIcon} alt="Mouse icon"/>
+                                            <div className="flex items-center justify-between grow">
+                                                <div className="text-left">
+                                                    <h3 className="text-sm font-semibold text-black dark:text-white">
+                                                        Relative
+                                                    </h3>
+                                                    <p className="text-xs leading-none text-slate-800 dark:text-slate-300">
+                                                        Coming soon
+                                                    </p>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </GridCard>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
                 </div>
-                <div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20" />
-              </>
-          ) : null}
-          <div className="pb-2 space-y-4">
-            <SectionHeader
-                title="Updates"
-                description="Manage software updates and version information"
-            />
-
-            <div className="space-y-4">
-              <SettingsItem
-                  title="Auto Update"
-                  description="Automatically update the device to the latest version"
-              >
-                <Checkbox
-                    checked={autoUpdate}
-                    onChange={e => {
-                      handleAutoUpdateChange(e.target.checked);
-                    }}
-                />
-              </SettingsItem>
-              <SettingsItem
-                  title="Dev Channel Updates"
-                  description="Receive early updates from the development channel"
-              >
-                <Checkbox
-                    checked={devChannel}
-                    onChange={e => {
-                      handleDevChannelChange(e.target.checked);
-                    }}
-                />
-              </SettingsItem>
-            </div>
-          </div>
-          <div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20" />
-
-          <SectionHeader
-              title="Appearance"
-              description="Customize the look and feel of the application"
-          />
-          <SettingsItem title="Theme" description="Choose your preferred color theme">
-            <SelectMenuBasic
-                size="SM"
-                label=""
-                value={currentTheme}
-                options={[
-                  { value: "system", label: "System" },
-                  { value: "light", label: "Light" },
-                  { value: "dark", label: "Dark" },
-                ]}
-                onChange={e => {
-                  setCurrentTheme(e.target.value);
-                  handleThemeChange(e.target.value);
-                }}
-            />
-          </SettingsItem>
-          <div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20" />
-          <div className="pb-2 space-y-4">
-            <SectionHeader
-                title="Advanced"
-                description="Access additional settings for troubleshooting and customization"
-            />
-
-            <div className="pb-4 space-y-4">
-              <SettingsItem
-                  title="Developer Mode"
-                  description="Enable advanced features for developers"
-              >
-                <Checkbox
-                    checked={settings.developerMode}
-                    onChange={e => handleDevModeChange(e.target.checked)}
-                />
-              </SettingsItem>
-
-              {settings.developerMode && (
-                  <div className="space-y-4">
-                    <TextAreaWithLabel
-                        label="SSH Public Key"
-                        value={sshKey || ""}
-                        rows={3}
-                        onChange={e => handleSSHKeyChange(e.target.value)}
-                        placeholder="Enter your SSH public key"
+                <div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20"/>
+                <div className="pb-2 space-y-4">
+                    <SectionHeader
+                        title="Video"
+                        description="Configure display settings and EDID for optimal compatibility"
                     />
-                    <p className="text-xs text-slate-600 dark:text-slate-400">
-                      The default SSH user is <strong>root</strong>.
-                    </p>
-                    <div className="flex items-center gap-x-2">
-                      <Button
-                          size="SM"
-                          theme="primary"
-                          text="Update SSH Key"
-                          onClick={handleUpdateSSHKey}
-                      />
+                    <div className="space-y-4">
+                        <SettingsItem
+                            title="Stream Quality"
+                            description="Adjust the quality of the video stream"
+                        >
+                            <SelectMenuBasic
+                                size="SM"
+                                label=""
+                                value={streamQuality}
+                                options={[
+                                    {value: "1", label: "High"},
+                                    {value: "0.5", label: "Medium"},
+                                    {value: "0.1", label: "Low"},
+                                ]}
+                                onChange={e => handleStreamQualityChange(e.target.value)}
+                            />
+                        </SettingsItem>
+                        <SettingsItem
+                            title="EDID"
+                            description="Adjust the EDID settings for the display"
+                        >
+                            <SelectMenuBasic
+                                size="SM"
+                                label=""
+                                fullWidth
+                                value={customEdidValue ? "custom" : edid || "asd"}
+                                onChange={e => {
+                                    if (e.target.value === "custom") {
+                                        setEdid("custom");
+                                        setCustomEdidValue("");
+                                    } else {
+                                        handleEDIDChange(e.target.value as string);
+                                    }
+                                }}
+                                options={[...edids, {value: "custom", label: "Custom"}]}
+                            />
+                        </SettingsItem>
+                        {customEdidValue !== null && (
+                            <>
+                                <SettingsItem
+                                    title="Custom EDID"
+                                    description="EDID details video mode compatibility. Default settings works in most cases, but unique UEFI/BIOS might need adjustments."
+                                />
+                                <TextAreaWithLabel
+                                    label="EDID File"
+                                    placeholder="00F..."
+                                    rows={3}
+                                    value={customEdidValue}
+                                    onChange={e => setCustomEdidValue(e.target.value)}
+                                />
+                                <div className="flex justify-start gap-x-2">
+                                    <Button
+                                        size="MD"
+                                        theme="primary"
+                                        text="Set Custom EDID"
+                                        onClick={() => handleEDIDChange(customEdidValue)}
+                                    />
+                                    <Button
+                                        size="MD"
+                                        theme="light"
+                                        text="Restore to default"
+                                        onClick={() => {
+                                            setCustomEdidValue(null);
+                                            handleEDIDChange(defaultEdid);
+                                        }}
+                                    />
+                                </div>
+                            </>
+                        )}
                     </div>
-                  </div>
-              )}
-              {settings.developerMode && (
-                  <div className="space-y-4">
-                    <InputFieldWithLabel
-                        label="USB Vendor Id"
-                        value={usbConfig.usb_vendor_id || ""}
-                        onChange={e => handleUsbVendorIdChange(e.target.value)}
-                        placeholder="Enter USB Vendor Id"
-                    />
-                    <InputFieldWithLabel
-                        label="USB Product Id"
-                        value={usbConfig.usb_product_id || ""}
-                        onChange={e => handleUsbProductIdChange(e.target.value)}
-                        placeholder="Enter USB Product Id"
-                    />
-                    <InputFieldWithLabel
-                        label="USB Serial Number"
-                        value={usbConfig.usb_serial_number || ""}
-                        onChange={e => handleUsbSerialChange(e.target.value)}
-                        placeholder="Enter USB Serial Number"
-                    />
-                    <InputFieldWithLabel
-                        label="USB Name"
-                        value={usbConfig.usb_name || ""}
-                        onChange={e => handleUsbName(e.target.value)}
-                        placeholder="Enter USB Name"
-                    />
-                    <InputFieldWithLabel
-                        label="USB Manufacturer"
-                        value={usbConfig.usb_manufacturer || ""}
-                        onChange={e => handleUsbManufacturer(e.target.value)}
-                        placeholder="Enter USB Manufacturer"
-                    />
-                    <div className="flex items-center gap-x-2">
-                      <Button
-                          size="SM"
-                          theme="primary"
-                          text="Update USB Config"
-                          onClick={() => {
-                            if (Object.values(usbConfig).every(function(i) { return Boolean(i); })) {
-                              handleUsbConfigChange(usbConfig);
-                              notifications.success("Successfully updated USB Config")
-                            } else {
-                              notifications.error("Failed to update USB config");
-                            }
-                          }}
-                      />
-                    </div>
-                  </div>
-              )}
-              <SettingsItem
-                  title="Troubleshooting Mode"
-                  description="Diagnostic tools and additional controls for troubleshooting and development purposes"
-              >
-                <Checkbox
-                    defaultChecked={settings.debugMode}
-                    onChange={e => {
-                      settings.setDebugMode(e.target.checked);
-                    }}
-                />
-              </SettingsItem>
+                </div>
+                {isOnDevice && (
+                    <>
+                        <div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20"/>
+                        <div className="pb-4 space-y-4">
+                            <SectionHeader
+                                title="JetKVM Cloud"
+                                description="Connect your device to the cloud for secure remote access and management"
+                            />
 
-              {settings.debugMode && (
-                  <>
-                    <SettingsItem
-                        title="USB Emulation"
-                        description="Control the USB emulation state"
-                    >
-                      <Button
-                          size="SM"
-                          theme="light"
-                          text={
-                            usbEmulationEnabled
-                                ? "Disable USB Emulation"
-                                : "Enable USB Emulation"
-                          }
-                          onClick={() => handleUsbEmulationToggle(!usbEmulationEnabled)}
-                      />
-                    </SettingsItem>
-                  </>
-              )}
-              {settings.debugMode && (
-                  <SettingsItem
-                      title="Reset Configuration"
-                      description="Reset the configuration file to its default state. This will log you out of the device."
-                  >
-                    <Button
+                            <GridCard>
+                                <div className="flex items-start p-4 gap-x-4">
+                                    <ShieldCheckIcon
+                                        className="w-8 h-8 mt-1 text-blue-600 shrink-0 dark:text-blue-500"/>
+                                    <div className="space-y-3">
+                                        <div className="space-y-2">
+                                            <h3 className="text-base font-bold text-slate-900 dark:text-white">
+                                                Cloud Security
+                                            </h3>
+                                            <div>
+                                                <ul className="space-y-1 text-xs text-slate-700 dark:text-slate-300">
+                                                    <li>• End-to-end encryption using WebRTC (DTLS and SRTP)</li>
+                                                    <li>• Zero Trust security model</li>
+                                                    <li>• OIDC (OpenID Connect) authentication</li>
+                                                    <li>• All streams encrypted in transit</li>
+                                                </ul>
+                                            </div>
+
+                                            <div className="text-xs text-slate-700 dark:text-slate-300">
+                                                All cloud components are open-source and available on{" "}
+                                                <a
+                                                    href="https://github.com/jetkvm"
+                                                    target="_blank"
+                                                    rel="noopener noreferrer"
+                                                    className="font-medium text-blue-600 hover:text-blue-800 dark:text-blue-500 dark:hover:text-blue-400"
+                                                >
+                                                    GitHub
+                                                </a>
+                                                .
+                                            </div>
+                                        </div>
+                                        <hr className="block w-full dark:border-slate-600"/>
+
+                                        <div>
+                                            <LinkButton
+                                                to="https://jetkvm.com/docs/networking/remote-access"
+                                                size="SM"
+                                                theme="light"
+                                                text="Learn about our cloud security"
+                                            />
+                                        </div>
+                                    </div>
+                                </div>
+                            </GridCard>
+
+                            {!isAdopted ? (
+                                <div>
+                                    <LinkButton
+                                        to={
+                                            import.meta.env.VITE_CLOUD_APP +
+                                            "/signup?deviceId=" +
+                                            deviceId +
+                                            `&returnTo=${location.href}adopt`
+                                        }
+                                        size="MD"
+                                        theme="primary"
+                                        text="Adopt KVM to Cloud account"
+                                    />
+                                </div>
+                            ) : (
+                                <div>
+                                    <div className="space-y-2">
+                                        <p className="text-sm text-slate-600 dark:text-slate-300">
+                                            Your device is adopted to JetKVM Cloud
+                                        </p>
+                                        <div>
+                                            <Button
+                                                size="MD"
+                                                theme="light"
+                                                text="De-register from Cloud"
+                                                className="text-red-600"
+                                                onClick={() => {
+                                                    if (deviceId) {
+                                                        if (
+                                                            window.confirm(
+                                                                "Are you sure you want to de-register this device?",
+                                                            )
+                                                        ) {
+                                                            deregisterDevice();
+                                                        }
+                                                    } else {
+                                                        notifications.error("No device ID available");
+                                                    }
+                                                }}
+                                            />
+                                        </div>
+                                    </div>
+                                </div>
+                            )}
+                        </div>
+                    </>
+                )}
+                <div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20"/>
+                {isOnDevice ? (
+                    <>
+                        <div className="pb-2 space-y-4">
+                            <SectionHeader
+                                title="Local Access"
+                                description="Manage the mode of local access to the device"
+                            />
+
+                            <div className="space-y-4">
+                                <SettingsItem
+                                    title="Authentication Mode"
+                                    description={`Current mode: ${localDevice?.authMode === "password" ? "Password protected" : "No password"}`}
+                                >
+                                    {localDevice?.authMode === "password" ? (
+                                        <Button
+                                            size="SM"
+                                            theme="light"
+                                            text="Disable Protection"
+                                            onClick={() => {
+                                                setLocalAuthModalView("deletePassword");
+                                                setIsLocalAuthDialogOpen(true);
+                                            }}
+                                        />
+                                    ) : (
+                                        <Button
+                                            size="SM"
+                                            theme="light"
+                                            text="Enable Password"
+                                            onClick={() => {
+                                                setLocalAuthModalView("createPassword");
+                                                setIsLocalAuthDialogOpen(true);
+                                            }}
+                                        />
+                                    )}
+                                </SettingsItem>
+
+                                {localDevice?.authMode === "password" && (
+                                    <SettingsItem
+                                        title="Change Password"
+                                        description="Update your device access password"
+                                    >
+                                        <Button
+                                            size="SM"
+                                            theme="light"
+                                            text="Change Password"
+                                            onClick={() => {
+                                                setLocalAuthModalView("updatePassword");
+                                                setIsLocalAuthDialogOpen(true);
+                                            }}
+                                        />
+                                    </SettingsItem>
+                                )}
+                            </div>
+                        </div>
+                        <div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20"/>
+                    </>
+                ) : null}
+                <div className="pb-2 space-y-4">
+                    <SectionHeader
+                        title="Updates"
+                        description="Manage software updates and version information"
+                    />
+
+                    <div className="space-y-4">
+                        <SettingsItem
+                            title="Auto Update"
+                            description="Automatically update the device to the latest version"
+                        >
+                            <Checkbox
+                                checked={autoUpdate}
+                                onChange={e => {
+                                    handleAutoUpdateChange(e.target.checked);
+                                }}
+                            />
+                        </SettingsItem>
+                        <SettingsItem
+                            title="Dev Channel Updates"
+                            description="Receive early updates from the development channel"
+                        >
+                            <Checkbox
+                                checked={devChannel}
+                                onChange={e => {
+                                    handleDevChannelChange(e.target.checked);
+                                }}
+                            />
+                        </SettingsItem>
+                    </div>
+                </div>
+                <div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20"/>
+
+                <SectionHeader
+                    title="Appearance"
+                    description="Customize the look and feel of the application"
+                />
+                <SettingsItem title="Theme" description="Choose your preferred color theme">
+                    <SelectMenuBasic
                         size="SM"
-                        theme="light"
-                        text="Reset Config"
-                        onClick={() => {
-                          handleResetConfig();
-                          window.location.reload();
+                        label=""
+                        value={currentTheme}
+                        options={[
+                            {value: "system", label: "System"},
+                            {value: "light", label: "Light"},
+                            {value: "dark", label: "Dark"},
+                        ]}
+                        onChange={e => {
+                            setCurrentTheme(e.target.value);
+                            handleThemeChange(e.target.value);
                         }}
                     />
-                  </SettingsItem>
-              )}
+                </SettingsItem>
+                <div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20"/>
+                <div className="pb-2 space-y-4">
+                    <SectionHeader
+                        title="Advanced"
+                        description="Access additional settings for troubleshooting and customization"
+                    />
+
+                    <div className="pb-4 space-y-4">
+                        <SettingsItem
+                            title="Developer Mode"
+                            description="Enable advanced features for developers"
+                        >
+                            <Checkbox
+                                checked={settings.developerMode}
+                                onChange={e => handleDevModeChange(e.target.checked)}
+                            />
+                        </SettingsItem>
+
+                        {settings.developerMode && (
+                            <div className="space-y-4">
+                                <TextAreaWithLabel
+                                    label="SSH Public Key"
+                                    value={sshKey || ""}
+                                    rows={3}
+                                    onChange={e => handleSSHKeyChange(e.target.value)}
+                                    placeholder="Enter your SSH public key"
+                                />
+                                <p className="text-xs text-slate-600 dark:text-slate-400">
+                                    The default SSH user is <strong>root</strong>.
+                                </p>
+                                <div className="flex items-center gap-x-2">
+                                    <Button
+                                        size="SM"
+                                        theme="primary"
+                                        text="Update SSH Key"
+                                        onClick={handleUpdateSSHKey}
+                                    />
+                                </div>
+                            </div>
+                        )}
+                        {settings.developerMode && (
+                            <div className="space-y-4">
+                                <InputFieldWithLabel
+                                    label="USB Vendor Id"
+                                    value={usbConfig.usb_vendor_id || ""}
+                                    onChange={e => handleUsbVendorIdChange(e.target.value)}
+                                    placeholder="Enter USB Vendor Id"
+                                />
+                                <InputFieldWithLabel
+                                    label="USB Product Id"
+                                    value={usbConfig.usb_product_id || ""}
+                                    onChange={e => handleUsbProductIdChange(e.target.value)}
+                                    placeholder="Enter USB Product Id"
+                                />
+                                <InputFieldWithLabel
+                                    label="USB Serial Number"
+                                    value={usbConfig.usb_serial_number || ""}
+                                    onChange={e => handleUsbSerialChange(e.target.value)}
+                                    placeholder="Enter USB Serial Number"
+                                />
+                                <InputFieldWithLabel
+                                    label="USB Name"
+                                    value={usbConfig.usb_name || ""}
+                                    onChange={e => handleUsbName(e.target.value)}
+                                    placeholder="Enter USB Name"
+                                />
+                                <InputFieldWithLabel
+                                    label="USB Manufacturer"
+                                    value={usbConfig.usb_manufacturer || ""}
+                                    onChange={e => handleUsbManufacturer(e.target.value)}
+                                    placeholder="Enter USB Manufacturer"
+                                />
+                                <div className="flex items-center gap-x-2">
+                                    <Button
+                                        size="SM"
+                                        theme="primary"
+                                        text="Update USB Config"
+                                        onClick={() => {
+                                            if (Object.values(usbConfig).every(function (i) {
+                                                return Boolean(i);
+                                            })) {
+                                                handleUsbConfigChange(usbConfig);
+                                                notifications.success("Successfully updated USB Config")
+                                            } else {
+                                                notifications.error("Failed to update USB config");
+                                            }
+                                        }}
+                                    />
+                                </div>
+                            </div>
+                        )}
+                        <SettingsItem
+                            title="Troubleshooting Mode"
+                            description="Diagnostic tools and additional controls for troubleshooting and development purposes"
+                        >
+                            <Checkbox
+                                defaultChecked={settings.debugMode}
+                                onChange={e => {
+                                    settings.setDebugMode(e.target.checked);
+                                }}
+                            />
+                        </SettingsItem>
+
+                        {settings.debugMode && (
+                            <>
+                                <SettingsItem
+                                    title="USB Emulation"
+                                    description="Control the USB emulation state"
+                                >
+                                    <Button
+                                        size="SM"
+                                        theme="light"
+                                        text={
+                                            usbEmulationEnabled
+                                                ? "Disable USB Emulation"
+                                                : "Enable USB Emulation"
+                                        }
+                                        onClick={() => handleUsbEmulationToggle(!usbEmulationEnabled)}
+                                    />
+                                </SettingsItem>
+                            </>
+                        )}
+                        {settings.debugMode && (
+                            <SettingsItem
+                                title="Reset Configuration"
+                                description="Reset the configuration file to its default state. This will log you out of the device."
+                            >
+                                <Button
+                                    size="SM"
+                                    theme="light"
+                                    text="Reset Config"
+                                    onClick={() => {
+                                        handleResetConfig();
+                                        window.location.reload();
+                                    }}
+                                />
+                            </SettingsItem>
+                        )}
+                    </div>
+                </div>
             </div>
-          </div>
+            <LocalAuthPasswordDialog
+                open={isLocalAuthDialogOpen}
+                setOpen={x => {
+                    // Revalidate the current route to refresh the local device status and dependent UI components
+                    revalidator.revalidate();
+                    setIsLocalAuthDialogOpen(x);
+                }}
+            />
         </div>
-        <LocalAuthPasswordDialog
-            open={isLocalAuthDialogOpen}
-            setOpen={x => {
-              // Revalidate the current route to refresh the local device status and dependent UI components
-              revalidator.revalidate();
-              setIsLocalAuthDialogOpen(x);
-            }}
-        />
-      </div>
-  );
+    );
 }
\ No newline at end of file