diff --git a/ui/src/components/sidebar/settings.tsx b/ui/src/components/sidebar/settings.tsx
index d7b4218..54ae80f 100644
--- a/ui/src/components/sidebar/settings.tsx
+++ b/ui/src/components/sidebar/settings.tsx
@@ -32,11 +32,11 @@ import USBConfigDialog from "@components/USBConfigDialog";
 import { UsbConfigState } from "@/hooks/stores"
 
 export function SettingsItem({
-                               title,
-                               description,
-                               children,
-                               className,
-                             }: {
+  title,
+  description,
+  children,
+  className,
+}: {
   title: string;
   description: string | React.ReactNode;
   children?: React.ReactNode;
@@ -44,13 +44,13 @@ export function SettingsItem({
   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>
+    <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>
   );
 }
 
@@ -68,7 +68,7 @@ function generateHex(min: number, max: number) {
 }
 
 const defaultEdid =
-    "00ffffffffffff0052620188008888881c150103800000780a0dc9a05747982712484c00000001010101010101010101010101010101023a801871382d40582c4500c48e2100001e011d007251d01e206e285500c48e2100001e000000fc00543734392d6648443732300a20000000fd00147801ff1d000a202020202020017b";
+  "00ffffffffffff0052620188008888881c150103800000780a0dc9a05747982712484c00000001010101010101010101010101010101023a801871382d40582c4500c48e2100001e011d007251d01e206e285500c48e2100001e000000fc00543734392d6648443732300a20000000fd00147801ff1d000a202020202020017b";
 const edids = [
   {
     value: defaultEdid,
@@ -76,17 +76,17 @@ const edids = [
   },
   {
     value:
-        "00FFFFFFFFFFFF00047265058A3F6101101E0104A53420783FC125A8554EA0260D5054BFEF80714F8140818081C081008B009500B300283C80A070B023403020360006442100001A000000FD00304C575716010A202020202020000000FC0042323436574C0A202020202020000000FF0054384E4545303033383532320A01F802031CF14F90020304050607011112131415161F2309070783010000011D8018711C1620582C250006442100009E011D007251D01E206E28550006442100001E8C0AD08A20E02D10103E9600064421000018C344806E70B028401720A80406442100001E00000000000000000000000000000000000000000000000000000096",
+      "00FFFFFFFFFFFF00047265058A3F6101101E0104A53420783FC125A8554EA0260D5054BFEF80714F8140818081C081008B009500B300283C80A070B023403020360006442100001A000000FD00304C575716010A202020202020000000FC0042323436574C0A202020202020000000FF0054384E4545303033383532320A01F802031CF14F90020304050607011112131415161F2309070783010000011D8018711C1620582C250006442100009E011D007251D01E206E28550006442100001E8C0AD08A20E02D10103E9600064421000018C344806E70B028401720A80406442100001E00000000000000000000000000000000000000000000000000000096",
     label: "Acer B246WL, 1920x1200",
   },
   {
     value:
-        "00FFFFFFFFFFFF0006B3872401010101021F010380342078EA6DB5A7564EA0250D5054BF6F00714F8180814081C0A9409500B300D1C0283C80A070B023403020360006442100001A000000FD00314B1E5F19000A202020202020000000FC00504132343851560A2020202020000000FF004D314C4D51533035323135370A014D02032AF14B900504030201111213141F230907078301000065030C001000681A00000101314BE6E2006A023A801871382D40582C450006442100001ECD5F80B072B0374088D0360006442100001C011D007251D01E206E28550006442100001E8C0AD08A20E02D10103E960006442100001800000000000000000000000000DC",
+      "00FFFFFFFFFFFF0006B3872401010101021F010380342078EA6DB5A7564EA0250D5054BF6F00714F8180814081C0A9409500B300D1C0283C80A070B023403020360006442100001A000000FD00314B1E5F19000A202020202020000000FC00504132343851560A2020202020000000FF004D314C4D51533035323135370A014D02032AF14B900504030201111213141F230907078301000065030C001000681A00000101314BE6E2006A023A801871382D40582C450006442100001ECD5F80B072B0374088D0360006442100001C011D007251D01E206E28550006442100001E8C0AD08A20E02D10103E960006442100001800000000000000000000000000DC",
     label: "ASUS PA248QV, 1920x1200",
   },
   {
     value:
-        "00FFFFFFFFFFFF0010AC132045393639201E0103803C22782ACD25A3574B9F270D5054A54B00714F8180A9C0D1C00101010101010101023A801871382D40582C450056502100001E000000FF00335335475132330A2020202020000000FC0044454C4C204432373231480A20000000FD00384C1E5311000A202020202020018102031AB14F90050403020716010611121513141F65030C001000023A801871382D40582C450056502100001E011D8018711C1620582C250056502100009E011D007251D01E206E28550056502100001E8C0AD08A20E02D10103E960056502100001800000000000000000000000000000000000000000000000000000000004F",
+      "00FFFFFFFFFFFF0010AC132045393639201E0103803C22782ACD25A3574B9F270D5054A54B00714F8180A9C0D1C00101010101010101023A801871382D40582C450056502100001E000000FF00335335475132330A2020202020000000FC0044454C4C204432373231480A20000000FD00384C1E5311000A202020202020018102031AB14F90050403020716010611121513141F65030C001000023A801871382D40582C450056502100001E011D8018711C1620582C250056502100009E011D007251D01E206E28550056502100001E8C0AD08A20E02D10103E960056502100001800000000000000000000000000000000000000000000000000000000004F",
     label: "DELL D2721H, 1920x1080",
   },
 ];
@@ -208,19 +208,19 @@ export default function SettingsSidebar() {
   }
 
   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],
+    (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 getCloudState = useCallback(() => {
@@ -235,7 +235,7 @@ export default function SettingsSidebar() {
     send("deregisterDevice", {}, resp => {
       if ("error" in resp) {
         notifications.error(
-            `Failed to de-register device: ${resp.error.data || "Unknown error"}`,
+          `Failed to de-register device: ${resp.error.data || "Unknown error"}`,
         );
         return;
       }
@@ -248,7 +248,7 @@ export default function SettingsSidebar() {
     send("setStreamQualityFactor", { factor: Number(factor) }, resp => {
       if ("error" in resp) {
         notifications.error(
-            `Failed to set stream quality: ${resp.error.data || "Unknown error"}`,
+          `Failed to set stream quality: ${resp.error.data || "Unknown error"}`,
         );
         return;
       }
@@ -260,7 +260,7 @@ export default function SettingsSidebar() {
     send("setAutoUpdateState", { enabled }, resp => {
       if ("error" in resp) {
         notifications.error(
-            `Failed to set auto-update: ${resp.error.data || "Unknown error"}`,
+          `Failed to set auto-update: ${resp.error.data || "Unknown error"}`,
         );
         return;
       }
@@ -272,7 +272,7 @@ export default function SettingsSidebar() {
     send("setDevChannelState", { enabled }, resp => {
       if ("error" in resp) {
         notifications.error(
-            `Failed to set dev channel state: ${resp.error.data || "Unknown error"}`,
+          `Failed to set dev channel state: ${resp.error.data || "Unknown error"}`,
         );
         return;
       }
@@ -299,7 +299,7 @@ export default function SettingsSidebar() {
     send("setJigglerState", { enabled }, resp => {
       if ("error" in resp) {
         notifications.error(
-            `Failed to set jiggler state: ${resp.error.data || "Unknown error"}`,
+          `Failed to set jiggler state: ${resp.error.data || "Unknown error"}`,
         );
         return;
       }
@@ -324,21 +324,21 @@ export default function SettingsSidebar() {
   };
 
   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],
+    (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 handleBacklightSettingsChange = (settings: BacklightSettings) => {
@@ -356,7 +356,7 @@ export default function SettingsSidebar() {
     send("setBacklightSettings", { params: settings.backlightSettings }, resp => {
       if ("error" in resp) {
         notifications.error(
-            `Failed to set backlight settings: ${resp.error.data || "Unknown error"}`,
+          `Failed to set backlight settings: ${resp.error.data || "Unknown error"}`,
         );
         return;
       }
@@ -368,7 +368,7 @@ export default function SettingsSidebar() {
     send("setSSHKeyState", { sshKey }, resp => {
       if ("error" in resp) {
         notifications.error(
-            `Failed to update SSH key: ${resp.error.data || "Unknown error"}`,
+          `Failed to update SSH key: ${resp.error.data || "Unknown error"}`,
         );
         return;
       }
@@ -424,7 +424,7 @@ export default function SettingsSidebar() {
       const receivedEdid = resp.result as string;
 
       const matchingEdid = edids.find(
-          x => x.value.toLowerCase() === receivedEdid.toLowerCase(),
+        x => x.value.toLowerCase() === receivedEdid.toLowerCase(),
       );
 
       if (matchingEdid) {
@@ -441,7 +441,7 @@ export default function SettingsSidebar() {
     send("getBacklightSettings", {}, resp => {
       if ("error" in resp) {
         notifications.error(
-            `Failed to get backlight settings: ${resp.error.data || "Unknown error"}`,
+          `Failed to get backlight settings: ${resp.error.data || "Unknown error"}`,
         );
         return;
       }
@@ -478,8 +478,8 @@ export default function SettingsSidebar() {
   const getDevice = useCallback(async () => {
     try {
       const status = await api
-          .GET(`${SIGNAL_API}/device`)
-          .then(res => res.json() as Promise<LocalDevice>);
+        .GET(`${SIGNAL_API}/device`)
+        .then(res => res.json() as Promise<LocalDevice>);
       setLocalDevice(status);
     } catch (error) {
       notifications.error("Failed to get authentication status");
@@ -524,8 +524,8 @@ export default function SettingsSidebar() {
       localStorage.removeItem("theme");
       // Check system preference
       const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches
-          ? "dark"
-          : "light";
+        ? "dark"
+        : "light";
       root.classList.remove("light", "dark");
       root.classList.add(systemTheme);
     } else {
@@ -539,7 +539,7 @@ export default function SettingsSidebar() {
     send("resetConfig", {}, resp => {
       if ("error" in resp) {
         notifications.error(
-            `Failed to reset configuration: ${resp.error.data || "Unknown error"}`,
+          `Failed to reset configuration: ${resp.error.data || "Unknown error"}`,
         );
         return;
       }
@@ -548,621 +548,621 @@ export default function SettingsSidebar() {
   }, [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} />
       <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()}
+        className="h-full px-4 py-2 space-y-4 overflow-y-scroll bg-white dark:bg-slate-900"
+        ref={sidebarRef}
       >
-        <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..."
-                    )
-                  }
-              />
-              <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">
+          <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 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 dark:invert"
-                            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 dark:invert" 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>
+              <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" />
-          <div className="pb-2 space-y-4">
-            <SectionHeader
-                title="Video"
-                description="Configure display settings and EDID for optimal compatibility"
-            />
+          <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="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"
-                  />
-
+              <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-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
+                    <div className="flex items-center px-4 py-3 group gap-x-4">
+                      <img
+                        className="w-6 shrink-0 dark:invert"
+                        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>
-                          <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>
+                          <p className="text-xs leading-none text-slate-800 dark:text-slate-300">
+                            Most convenient
+                          </p>
                         </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"
-                          />
+                        <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 dark:invert" 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>
-
-                  {!isAdopted ? (
-                      <div>
-                        <LinkButton
-                            to={
-                                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"
-                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="Hardware"
-                description="Configure the JetKVM Hardware"
-            />
-          </div>
-          <SettingsItem title="Display Brightness" description="Set the brightness of the display">
-            <SelectMenuBasic
-                size="SM"
-                label=""
-                value={settings.backlightSettings.max_brightness.toString()}
-                options={[
-                  { value: "0", label: "Off" },
-                  { value: "10", label: "Low" },
-                  { value: "35", label: "Medium" },
-                  { value: "64", label: "High" },
-                ]}
-                onChange={e => {
-                  settings.backlightSettings.max_brightness = parseInt(e.target.value)
-                  handleBacklightSettingsChange(settings.backlightSettings);
-                }}
-            />
-          </SettingsItem>
-          {settings.backlightSettings.max_brightness != 0 && (
-              <>
-                <SettingsItem title="Dim Display After" description="Set how long to wait before dimming the display">
-                  <SelectMenuBasic
-                      size="SM"
-                      label=""
-                      value={settings.backlightSettings.dim_after.toString()}
-                      options={[
-                        { value: "0", label: "Never" },
-                        { value: "60", label: "1 Minute" },
-                        { value: "300", label: "5 Minutes" },
-                        { value: "600", label: "10 Minutes" },
-                        { value: "1800", label: "30 Minutes" },
-                        { value: "3600", label: "1 Hour" },
-                      ]}
-                      onChange={e => {
-                        settings.backlightSettings.dim_after = parseInt(e.target.value)
-                        handleBacklightSettingsChange(settings.backlightSettings);
-                      }}
-                  />
-                </SettingsItem>
-                <SettingsItem title="Turn off Display After" description="Set how long to wait before turning off the display">
-                  <SelectMenuBasic
-                      size="SM"
-                      label=""
-                      value={settings.backlightSettings.off_after.toString()}
-                      options={[
-                        { value: "0", label: "Never" },
-                        { value: "300", label: "5 Minutes" },
-                        { value: "600", label: "10 Minutes" },
-                        { value: "1800", label: "30 Minutes" },
-                        { value: "3600", label: "1 Hour" },
-                      ]}
-                      onChange={e => {
-                        settings.backlightSettings.off_after = parseInt(e.target.value)
-                        handleBacklightSettingsChange(settings.backlightSettings);
-                      }}
-                  />
-                </SettingsItem>
-              </>
-          )}
-          <p className="text-xs text-slate-600 dark:text-slate-400">
-            The display will wake up when the connection state changes, or when touched.
-          </p>
-          <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>
-              )}
-              <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.developerMode && (
-                  <SettingsItem
-                      title="Set USB Device Emulation"
-                      description="Select a Preconfigured USB Device"
-                  >
-                    <SelectMenuBasic
-                        size="SM"
-                        label=""
-                        fullWidth
-                        value={usbConfigProduct}
-                        onChange={e => {
-                          if (e.target.value === "custom") {
-                            setUsbConfigProduct(e.target.value);
-                          } else {
-                            handleUsbConfigChange(e.target.value as string);
-                          }
-                        }}
-                        options={[...usbConfigs, { value: "custom", label: "Custom" }]}
-                    />
-                  </SettingsItem>
-              )}
-              {usbConfigProduct === "custom" && (
-                  <SettingsItem
-                      title="USB Config"
-                      description="Set Custom USB Descriptors"
-                  >
-                    <Button
-                        size="SM"
-                        theme="light"
-                        text="Update USB Config"
-                        onClick={() => {
-                          setUsbConfigModalView("updateUsbConfig")
-                          setIsUsbConfigDialogOpen(true);
-                        }}
-                    />
-                  </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>
-              )}
+                </button>
+              </div>
             </div>
           </div>
         </div>
-        <USBConfigDialog
-            open={isUsbConfigDialogOpen}
-            setOpen={x => {
-              // Revalidate the current route to refresh the local device status and dependent UI components
-              revalidator.revalidate();
-              setIsUsbConfigDialogOpen(x);
-            }}
+        <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={
+                      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"
         />
-        <LocalAuthPasswordDialog
-            open={isLocalAuthDialogOpen}
-            setOpen={x => {
-              // Revalidate the current route to refresh the local device status and dependent UI components
-              revalidator.revalidate();
-              setIsLocalAuthDialogOpen(x);
+        <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="Hardware"
+            description="Configure the JetKVM Hardware"
+          />
+        </div>
+        <SettingsItem title="Display Brightness" description="Set the brightness of the display">
+          <SelectMenuBasic
+            size="SM"
+            label=""
+            value={settings.backlightSettings.max_brightness.toString()}
+            options={[
+              { value: "0", label: "Off" },
+              { value: "10", label: "Low" },
+              { value: "35", label: "Medium" },
+              { value: "64", label: "High" },
+            ]}
+            onChange={e => {
+              settings.backlightSettings.max_brightness = parseInt(e.target.value)
+              handleBacklightSettingsChange(settings.backlightSettings);
+            }}
+          />
+        </SettingsItem>
+        {settings.backlightSettings.max_brightness != 0 && (
+          <>
+          <SettingsItem title="Dim Display After" description="Set how long to wait before dimming the display">
+            <SelectMenuBasic
+              size="SM"
+              label=""
+              value={settings.backlightSettings.dim_after.toString()}
+              options={[
+                { value: "0", label: "Never" },
+                { value: "60", label: "1 Minute" },
+                { value: "300", label: "5 Minutes" },
+                { value: "600", label: "10 Minutes" },
+                { value: "1800", label: "30 Minutes" },
+                { value: "3600", label: "1 Hour" },
+              ]}
+              onChange={e => {
+                settings.backlightSettings.dim_after = parseInt(e.target.value)
+                handleBacklightSettingsChange(settings.backlightSettings);
+              }}
+            />
+          </SettingsItem>
+          <SettingsItem title="Turn off Display After" description="Set how long to wait before turning off the display">
+            <SelectMenuBasic
+              size="SM"
+              label=""
+              value={settings.backlightSettings.off_after.toString()}
+              options={[
+                { value: "0", label: "Never" },
+                { value: "300", label: "5 Minutes" },
+                { value: "600", label: "10 Minutes" },
+                { value: "1800", label: "30 Minutes" },
+                { value: "3600", label: "1 Hour" },
+              ]}
+              onChange={e => {
+                settings.backlightSettings.off_after = parseInt(e.target.value)
+                handleBacklightSettingsChange(settings.backlightSettings);
+              }}
+            />
+          </SettingsItem>
+          </>
+        )}
+        <p className="text-xs text-slate-600 dark:text-slate-400">
+          The display will wake up when the connection state changes, or when touched.
+        </p>
+        <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>
+            )}
+            <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.developerMode && (
+              <SettingsItem
+                title="Set USB Device Emulation"
+                description="Select a Preconfigured USB Device"
+              >
+                <SelectMenuBasic
+                  size="SM"
+                  label=""
+                  fullWidth
+                  value={usbConfigProduct}
+                  onChange={e => {
+                    if (e.target.value === "custom") {
+                      setUsbConfigProduct(e.target.value);
+                    } else {
+                      handleUsbConfigChange(e.target.value as string);
+                    }
+                  }}
+                  options={[...usbConfigs, { value: "custom", label: "Custom" }]}
+                />
+              </SettingsItem>
+            )}
+            {usbConfigProduct === "custom" && (
+              <SettingsItem
+                title="USB Config"
+                description="Set Custom USB Descriptors"
+              >
+                <Button
+                  size="SM"
+                  theme="light"
+                  text="Update USB Config"
+                  onClick={() => {
+                    setUsbConfigModalView("updateUsbConfig")
+                    setIsUsbConfigDialogOpen(true);
+                  }}
+                />
+              </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>
+      <USBConfigDialog
+        open={isUsbConfigDialogOpen}
+        setOpen={x => {
+          // Revalidate the current route to refresh the local device status and dependent UI components
+          revalidator.revalidate();
+          setIsUsbConfigDialogOpen(x);
+        }}
+      />
+      <LocalAuthPasswordDialog
+        open={isLocalAuthDialogOpen}
+        setOpen={x => {
+          // Revalidate the current route to refresh the local device status and dependent UI components
+          revalidator.revalidate();
+          setIsLocalAuthDialogOpen(x);
+        }}
+      />
+    </div>
   );
 }