diff --git a/apps/client/src/widgets/type_widgets/options/sync.tsx b/apps/client/src/widgets/type_widgets/options/sync.tsx
index 8c0b813de8..0cb0905cf7 100644
--- a/apps/client/src/widgets/type_widgets/options/sync.tsx
+++ b/apps/client/src/widgets/type_widgets/options/sync.tsx
@@ -1,12 +1,11 @@
 import { SyncTestResponse } from "@triliumnext/commons";
-import { useRef } from "preact/hooks";
+import { useState } from "preact/hooks";
 
 import { t } from "../../../services/i18n";
 import server from "../../../services/server";
 import toast from "../../../services/toast";
-import Button from "../../react/Button";
 import FormTextBox from "../../react/FormTextBox";
-import { useTriliumOptions } from "../../react/hooks";
+import { useTriliumOption } from "../../react/hooks";
 import OptionsRow, { OptionsRowWithButton } from "./components/OptionsRow";
 import OptionsSection from "./components/OptionsSection";
 import TimeSelector from "./components/TimeSelector";
@@ -16,37 +15,30 @@ export default function SyncOptions() {
 }
 
 export function SyncConfiguration() {
-    const [ options, setOptions ] = useTriliumOptions("syncServerHost", "syncProxy");
-    const syncServerHost = useRef(options.syncServerHost);
-    const syncProxy = useRef(options.syncProxy);
+    const [syncServerHost, setSyncServerHost] = useTriliumOption("syncServerHost");
+    const [syncProxy, setSyncProxy] = useTriliumOption("syncProxy");
+    const [localHost, setLocalHost] = useState(syncServerHost);
+    const [localProxy, setLocalProxy] = useState(syncProxy);
 
     return (
         <OptionsSection helpUrl="cbkrhQjrkKrh">
-            <form onSubmit={(e) => {
-                setOptions({
-                    syncServerHost: syncServerHost.current,
-                    syncProxy: syncProxy.current
-                });
-                e.preventDefault();
-            }}>
-                <OptionsRow name="sync-server-host" label={t("sync_2.server_address")} description={t("sync_2.server_address_description")} stacked>
-                    <FormTextBox
-                        placeholder="https://<host>:<port>"
-                        currentValue={syncServerHost.current} onChange={(newValue) => syncServerHost.current = newValue}
-                    />
-                </OptionsRow>
+            <OptionsRow name="sync-server-host" label={t("sync_2.server_address")} description={t("sync_2.server_address_description")} stacked>
+                <FormTextBox
+                    placeholder="https://<host>:<port>"
+                    currentValue={localHost}
+                    onChange={setLocalHost}
+                    onBlur={setSyncServerHost}
+                />
+            </OptionsRow>
 
-                <OptionsRow name="sync-proxy" label={t("sync_2.proxy_label")} description={t("sync_2.proxy_description")} stacked>
-                    <FormTextBox
-                        placeholder="https://<host>:<port>"
-                        currentValue={syncProxy.current} onChange={(newValue) => syncProxy.current = newValue}
-                    />
-                </OptionsRow>
-
-                <OptionsRow name="save-sync-config" centered>
-                    <Button text={t("sync_2.save")} kind="primary" />
-                </OptionsRow>
-            </form>
+            <OptionsRow name="sync-proxy" label={t("sync_2.proxy_label")} description={t("sync_2.proxy_description")} stacked>
+                <FormTextBox
+                    placeholder="https://<host>:<port>"
+                    currentValue={localProxy}
+                    onChange={setLocalProxy}
+                    onBlur={setSyncProxy}
+                />
+            </OptionsRow>
 
             <OptionsRow name="sync-server-timeout" label={t("sync_2.timeout")} description={t("sync_2.timeout_description")}>
                 <TimeSelector