diff --git a/src-tauri/src/server/server_config.rs b/src-tauri/src/server/server_config.rs
index 58f4204a..86e9aff8 100644
--- a/src-tauri/src/server/server_config.rs
+++ b/src-tauri/src/server/server_config.rs
@@ -62,7 +62,7 @@ pub async fn patch_server_config_options(config_data: Value, url: &str) -> Resul
             err.to_string()
         })?;
 
-    debug!("Response: {:?}", response);
+    info!("Response: {:?}", response);
 
     if response.status().is_success() {
         Ok(())
diff --git a/src/components/titlebar/titlebar.tsx b/src/components/titlebar/titlebar.tsx
index 65d55eb3..aa8b5386 100644
--- a/src/components/titlebar/titlebar.tsx
+++ b/src/components/titlebar/titlebar.tsx
@@ -157,7 +157,7 @@ export function Titlebar() {
                                     title="About"
                                     href="#"
                                     onClick={handleOpen}
-                                    className="block justify-start item-center rounded-lg px-4 py-2 dark:text-text-dark text-text-light hover:dark:bg-window-dark-100 hover:bg-window-light-600"
+                                    className="flex justify-start item-center rounded-lg px-4 py-2 dark:text-text-dark text-text-light hover:dark:bg-window-dark-100 hover:bg-window-light-600"
                                 >
                                     <IconInfoCircle
                                         className="flex justify-center item-center dark:text-text-dark text-text-light text-center pr-2"
@@ -169,7 +169,7 @@ export function Titlebar() {
                                 <Link
                                     to="/"
                                     title="Server"
-                                    className="block rounded-lg px-4 py-2 text-md dark:text-text-dark text-text-light hover:dark:bg-window-dark-100 hover:bg-window-light-600"
+                                    className="flex rounded-lg px-4 py-2 text-md dark:text-text-dark text-text-light hover:dark:bg-window-dark-100 hover:bg-window-light-600"
                                 >
                                     <IconServer
                                         className="flex justify-center item-center dark:text-text-dark text-text-light text-center pr-2"
@@ -181,7 +181,7 @@ export function Titlebar() {
                                 <Link
                                     to="/settings"
                                     title="Setting"
-                                    className="block rounded-lg px-4 py-2 text-md dark:text-text-dark text-text-light hover:dark:bg-window-dark-100 hover:bg-window-light-600"
+                                    className="flex rounded-lg px-4 py-2 text-md dark:text-text-dark text-text-light hover:dark:bg-window-dark-100 hover:bg-window-light-600"
                                 >
                                     <IconSettings
                                         size={26}
diff --git a/src/interfaces/IServer.ts b/src/interfaces/IServer.ts
index d638bc38..4011eafd 100644
--- a/src/interfaces/IServer.ts
+++ b/src/interfaces/IServer.ts
@@ -52,7 +52,6 @@ interface IServer {
   hlsTrustedProxies: string[];
   hlsDirectory: string;
   webrtc: boolean;
-  webrtcDisable: boolean;
   webrtcAddress: string;
   webrtcEncryption: boolean;
   webrtcServerKey: string;
@@ -209,7 +208,6 @@ interface IRtmpSettings {
 
 interface IWebrtcSettings {
   webrtc: boolean;
-  webrtcDisable: boolean;
   webrtcAddress: string;
   webrtcEncryption: boolean;
   webrtcServerKey: string;
diff --git a/src/views/Settings.tsx b/src/views/Settings.tsx
index e897eca4..5114bcc5 100644
--- a/src/views/Settings.tsx
+++ b/src/views/Settings.tsx
@@ -80,7 +80,6 @@ export default function Setting() {
     const [webrtcSettings, setWebrtcSettings] = useState<IWebrtcSettings>({
         webrtc: configData?.webrtc || true,
         webrtcAddress: configData?.webrtcAddress || ":8080",
-        webrtcDisable: configData?.webrtcDisable || false,
         webrtcEncryption: configData?.webrtcEncryption || false,
         webrtcServerKey: configData?.webrtcServerKey || "server.key",
         webrtcServerCert: configData?.webrtcServerCert || "server.crt",
@@ -117,7 +116,7 @@ export default function Setting() {
         recordDeleteAfter: configData?.recordDeleteAfter || "24h"
     });
 
-    console.log(apiSettings);
+    console.log(webrtcSettings);
 
     useEffect(() => {
         setError(null);
@@ -212,7 +211,7 @@ export default function Setting() {
                 setWebrtcSettings({
                     webrtc: parsedResponse.webrtc || true,
                     webrtcAddress: parsedResponse.webrtcAddress || ":8080",
-                    webrtcDisable: parsedResponse.webrtcDisable || false,
+
                     webrtcEncryption: parsedResponse.webrtcEncryption || false,
                     webrtcServerKey:
                         parsedResponse.webrtcServerKey || "server.key",
@@ -255,39 +254,41 @@ export default function Setting() {
             });
     }, []);
 
-    async function postSetting(configData) {
+    async function patchSetting(configData) {
         try {
             if (configData == null) {
-                throw new Error("the configuation data is empty");
+                setError(
+                    "ConfigData is empty." 
+                        
+                );
             }
+            
+
             await invoke("patch_server_config_options", {
                 configData: configData,
                 url: "http://127.0.0.1:9997/v3/config/global/patch"
             }).then((response: string) => {
+                
+                console.log("response: " + response);
                 const parsedResponse: IServer = JSON.parse(response);
                 console.log(
-                    "parsed option in post:" + JSON.stringify(parsedResponse)
+                    "parsed option in patch:" + JSON.stringify(parsedResponse)
                 );
                 setConfigData(parsedResponse);
                 setSuccessMessage("Settings saved successfully");
                 // get the updated config
                 const serverUrl = "http://127.0.0.1:9997/v3/config/global/get";
-                invoke("get_server_config_options", { url: serverUrl })
-                    .then((response: string) => {
+                invoke("get_server_config_options", { url: serverUrl }).then(
+                    (response: string) => {
                         const parsedResponse: IServer = JSON.parse(response);
-                        console.log(parsedResponse.metrics);
+                        console.log(parsedResponse.webrtc);
                         setConfigData(parsedResponse);
                         console.log(
                             "new parsed option:" +
                                 JSON.stringify(parsedResponse)
                         );
-                    })
-                    .catch((e) => {
-                        console.error(
-                            "Unable to connect to the server. Please check your connection." +
-                                e.message
-                        );
-                    });
+                    }
+                );
             });
         } catch (e) {
             setError(
@@ -295,6 +296,7 @@ export default function Setting() {
                     e.message
             );
         }
+        console.log("configData: " + JSON.stringify(configData));
     }
 
     const menuItems = [
@@ -354,7 +356,7 @@ export default function Setting() {
                                                 )
                                         );
                                     }}
-                                    postSetting={postSetting}
+                                    patchSetting={patchSetting}
                                 />
                             )}
                             {currentSetting === "Logging Setting" && (
@@ -365,7 +367,7 @@ export default function Setting() {
                                             updatedLoggingSettings
                                         )
                                     }
-                                    postSetting={postSetting}
+                                    patchSetting={patchSetting}
                                 />
                             )}
                             {currentSetting === "HLS Setting" && (
@@ -374,7 +376,7 @@ export default function Setting() {
                                     onSave={(updatedHlsSettings) =>
                                         setHlsSettings(updatedHlsSettings)
                                     }
-                                    postSetting={postSetting}
+                                    patchSetting={patchSetting}
                                 />
                             )}
                             {currentSetting === "RTSP Setting" && (
@@ -383,7 +385,7 @@ export default function Setting() {
                                     onSave={(updatedRtspSettings) =>
                                         setRtspSettings(updatedRtspSettings)
                                     }
-                                    postSetting={postSetting}
+                                    patchSetting={patchSetting}
                                 />
                             )}
                             {currentSetting === "RTMP Setting" && (
@@ -392,7 +394,7 @@ export default function Setting() {
                                     onSave={(updatedRtmpSettings) =>
                                         setRtmpSettings(updatedRtmpSettings)
                                     }
-                                    postSetting={postSetting}
+                                    patchSetting={patchSetting}
                                 />
                             )}
                             {currentSetting === "SRT Setting" && (
@@ -401,7 +403,7 @@ export default function Setting() {
                                     onSave={(updatedSrtSettings) =>
                                         setSrtSettings(updatedSrtSettings)
                                     }
-                                    postSetting={postSetting}
+                                    patchSetting={patchSetting}
                                 />
                             )}
                             {currentSetting === "WebRTC Setting" && (
@@ -410,7 +412,7 @@ export default function Setting() {
                                     onSave={(updatWebRtcSettings) =>
                                         setWebrtcSettings(updatWebRtcSettings)
                                     }
-                                    postSetting={postSetting}
+                                    patchSetting={patchSetting}
                                 />
                             )}
                             {currentSetting === "Record Setting" && (
@@ -419,7 +421,7 @@ export default function Setting() {
                                     onSave={(updatedRecordSettings) =>
                                         setRecordSettings(updatedRecordSettings)
                                     }
-                                    postSetting={postSetting}
+                                    patchSetting={patchSetting}
                                 />
                             )}
                         </div>
diff --git a/src/views/serverSetting/ApiSetting.tsx b/src/views/serverSetting/ApiSetting.tsx
index 31b260ed..b40784f6 100644
--- a/src/views/serverSetting/ApiSetting.tsx
+++ b/src/views/serverSetting/ApiSetting.tsx
@@ -3,7 +3,7 @@ import { motion } from "framer-motion";
 import { fadeIn } from "../../utils/animation/screenAnimation";
 import Checkbox from "../../components/checkBox/checkBox";
 
-export default function ApiSetting({ settings, onSave, postSetting }) {
+export default function ApiSetting({ settings, onSave, patchSetting }) {
     const [apiEnabled, setApiEnabled] = useState(Boolean(settings.api));
     const [apiAddress, setApiAddress] = useState(settings.apiAddress);
     const [metricsEnabled, setMetricsEnabled] = useState(
@@ -79,7 +79,7 @@ export default function ApiSetting({ settings, onSave, postSetting }) {
 
         // Call the onSave prop to save the changes
         onSave(updatedSettings);
-        postSetting(updatedSettings);
+        patchSetting(updatedSettings);
     };
 
     return (
diff --git a/src/views/serverSetting/LoggingSetting.tsx b/src/views/serverSetting/LoggingSetting.tsx
index 4a48183b..0aa66244 100644
--- a/src/views/serverSetting/LoggingSetting.tsx
+++ b/src/views/serverSetting/LoggingSetting.tsx
@@ -3,7 +3,7 @@ import { motion } from "framer-motion";
 import { fadeIn } from "../../utils/animation/screenAnimation";
 import Dropdown from "../../components/dropdowns/dropdown";
 
-export default function LoggingSetting({ settings, onSave, postSetting }) {
+export default function LoggingSetting({ settings, onSave, patchSetting }) {
     const [logLevel, setLogLevel] = useState(settings.logLevel || "info");
 
     const [logDestinations, setLogDestinations] = useState(
@@ -41,7 +41,7 @@ export default function LoggingSetting({ settings, onSave, postSetting }) {
 
         // Call the onSave prop to save the changes
         onSave(updatedSettings);
-        postSetting(updatedSettings);
+        patchSetting(updatedSettings);
     };
 
     return (
diff --git a/src/views/serverSetting/RecordSetting.tsx b/src/views/serverSetting/RecordSetting.tsx
index 73e7bff2..3a3c4e65 100644
--- a/src/views/serverSetting/RecordSetting.tsx
+++ b/src/views/serverSetting/RecordSetting.tsx
@@ -4,7 +4,7 @@ import { fadeIn } from "../../utils/animation/screenAnimation";
 import Checkbox from "../../components/checkBox/checkBox";
 import Toast from "../../components/toast/Toast";
 
-export default function RecordSetting({ settings, onSave, postSetting }) {
+export default function RecordSetting({ settings, onSave, patchSetting }) {
     const [error, setError] = useState<string | null>(null);
     const [record, setRecord] = useState(Boolean(settings.record));
     const [recordPath, setRecordPath] = useState(settings.recordPath);
@@ -83,7 +83,7 @@ export default function RecordSetting({ settings, onSave, postSetting }) {
             recordDeleteAfter: recordDeleteAfter
         };
         onSave(updatedSettings);
-        postSetting(updatedSettings);
+        patchSetting(updatedSettings);
     };
 
     return (
diff --git a/src/views/serverSetting/RtmpSetting.tsx b/src/views/serverSetting/RtmpSetting.tsx
index 8609879e..94f1770a 100644
--- a/src/views/serverSetting/RtmpSetting.tsx
+++ b/src/views/serverSetting/RtmpSetting.tsx
@@ -3,7 +3,7 @@ import { motion } from "framer-motion";
 import { fadeIn } from "../../utils/animation/screenAnimation";
 import Checkbox from "../../components/checkBox/checkBox";
 
-export default function RtmpSetting({ settings, onSave, postSetting }) {
+export default function RtmpSetting({ settings, onSave, patchSetting }) {
     const [rtmp, setRtmp] = useState(settings.rtmp || true);
     const [rtmpDisabled, setRtmpDisabled] = useState(
         settings.rtmpDisabled || false
@@ -74,7 +74,7 @@ export default function RtmpSetting({ settings, onSave, postSetting }) {
             rtmpServerCert: rtmpServerCert
         };
         onSave(updatedSettings);
-        postSetting(updatedSettings);
+        patchSetting(updatedSettings);
     };
 
     return (
diff --git a/src/views/serverSetting/RtspSetting.tsx b/src/views/serverSetting/RtspSetting.tsx
index b1099bee..b7b6add3 100644
--- a/src/views/serverSetting/RtspSetting.tsx
+++ b/src/views/serverSetting/RtspSetting.tsx
@@ -3,7 +3,7 @@ import { motion } from "framer-motion";
 import Checkbox from "../../components/checkBox/checkBox";
 import { fadeIn } from "../../utils/animation/screenAnimation";
 
-export default function RtspSetting({ settings, onSave, postSetting }) {
+export default function RtspSetting({ settings, onSave, patchSetting }) {
     const [rtsp, setRtsp] = useState(settings.rtsp || true);
     const [rtspDisable, setRtspDisable] = useState(
         settings.rtspDisable || false
@@ -102,7 +102,7 @@ export default function RtspSetting({ settings, onSave, postSetting }) {
             multicastRTCPPort: multicastRTCPPort
         };
         onSave(updatedSettings);
-        postSetting(updatedSettings);
+        patchSetting(updatedSettings);
     };
 
     return (
diff --git a/src/views/serverSetting/SrtSetting.tsx b/src/views/serverSetting/SrtSetting.tsx
index a9c4396b..cf3aa65a 100644
--- a/src/views/serverSetting/SrtSetting.tsx
+++ b/src/views/serverSetting/SrtSetting.tsx
@@ -3,7 +3,7 @@ import { motion } from "framer-motion";
 import { fadeIn } from "../../utils/animation/screenAnimation";
 import Checkbox from "../../components/checkBox/checkBox";
 
-export default function SRTSetting({ settings, onSave, postSetting }) {
+export default function SRTSetting({ settings, onSave, patchSetting }) {
     const [srt, setSRT] = useState(Boolean(settings.srt));
     const [srtAddress, setSRTAddress] = useState(settings.srtAddress);
 
@@ -27,7 +27,7 @@ export default function SRTSetting({ settings, onSave, postSetting }) {
             srtAddress: srtAddress
         };
         onSave(updatedSettings);
-        postSetting(updatedSettings);
+        patchSetting(updatedSettings);
     };
 
     return (
diff --git a/src/views/serverSetting/hlsSetting.tsx b/src/views/serverSetting/hlsSetting.tsx
index 1ed240ca..a8fb6b35 100644
--- a/src/views/serverSetting/hlsSetting.tsx
+++ b/src/views/serverSetting/hlsSetting.tsx
@@ -5,7 +5,7 @@ import { fadeIn } from "../../utils/animation/screenAnimation";
 
 import Checkbox from "../../components/checkBox/checkBox";
 
-export default function HlsSetting({ settings, onSave, postSetting }) {
+export default function HlsSetting({ settings, onSave, patchSetting }) {
     const [hlsEnabled, setHlsEnabled] = useState(settings.hls || true);
     const [hlsAddress, setHlsAddress] = useState(
         settings.hlsAddress || ":8888"
@@ -146,7 +146,7 @@ export default function HlsSetting({ settings, onSave, postSetting }) {
             hlsVariant: hlsVariant
         };
         onSave(updatedSettings);
-        postSetting(updatedSettings);
+        patchSetting(updatedSettings);
     };
 
     return (
diff --git a/src/views/serverSetting/webrtcSetting.tsx b/src/views/serverSetting/webrtcSetting.tsx
index 46a67d3b..b2bec9ac 100644
--- a/src/views/serverSetting/webrtcSetting.tsx
+++ b/src/views/serverSetting/webrtcSetting.tsx
@@ -4,11 +4,9 @@ import { fadeIn } from "../../utils/animation/screenAnimation";
 import Checkbox from "../../components/checkBox/checkBox";
 import { ICEServer } from "../../interfaces/IServer";
 
-export default function WebrtcSetting({ settings, onSave, postSetting }) {
-    const [webrtc, setWebrtc] = useState(settings.webrtc || true);
-    const [webrtcDisabled, setWebrtcDisabled] = useState(
-        settings.webrtcDisabled || false
-    );
+export default function WebrtcSetting({ settings, onSave, patchSetting }) {
+    const [webrtc, setWebrtc] = useState(settings.webrtc|| true);
+
     const [webrtcAddress, setWebrtcAddress] = useState(
         settings.webrtcAddress || ":8889"
     );
@@ -16,10 +14,10 @@ export default function WebrtcSetting({ settings, onSave, postSetting }) {
         settings.webrtcEncryption || false
     );
     const [webrtcKey, setWebrtcKey] = useState(
-        settings.webrtcKey || "server.key"
+        settings.webrtcServerKey || "server.key"
     );
     const [webrtcCert, setWebrtcCert] = useState(
-        settings.webrtcCert || "server.crt"
+        settings.webrtcServerCert || "server.crt"
     );
     const [webrtcAllowOrigin, setWebrtcAllowOrigin] = useState(
         settings.webrtcAllowOrigin || "*"
@@ -49,11 +47,9 @@ export default function WebrtcSetting({ settings, onSave, postSetting }) {
 
     const handleWebrtc = () => {
         setWebrtc(!webrtc);
+        
     };
-
-    const handleWebrtcDisabled = () => {
-        setWebrtcDisabled(!webrtcDisabled);
-    };
+    console.log(webrtc);
 
     const handleWebrtcAddress = (event) => {
         setWebrtcAddress(event.target.value);
@@ -100,12 +96,11 @@ export default function WebrtcSetting({ settings, onSave, postSetting }) {
     };
 
     useEffect(() => {
-        setWebrtc(settings.webrtc || true);
-        setWebrtcDisabled(settings.webrtcDisabled || false);
+        setWebrtc(settings.webrtc);
         setWebrtcAddress(settings.webrtcAddress || ":8889");
         setWebrtcEncryption(settings.webrtcEncryption || false);
-        setWebrtcKey(settings.webrtcKey || "server.key");
-        setWebrtcCert(settings.webrtcCert || "server.crt");
+        setWebrtcKey(settings.webrtcServerKey || "server.key");
+        setWebrtcCert(settings.webrtcServerCert || "server.crt");
         setWebrtcAllowOrigin(settings.webrtcAllowOrigin || "*");
         setWebrtcTrustedProxies(settings.webrtcTrustedProxies || []);
         setWebrtcICEServers(settings.webrtcICEServers || null);
@@ -120,17 +115,17 @@ export default function WebrtcSetting({ settings, onSave, postSetting }) {
         setWebrtcICEUDPMuxAddress(settings.webrtcICEUDPMuxAddress || "");
         setWebrtcICETCPMuxAddress(settings.webrtcICETCPMuxAddress || "");
     }, [settings]);
+    console.log(settings);
 
     const handleSaveConfig = () => {
         // Create an updated settings object with the modified logging settings
         const updatedSettings = {
             ...settings,
             webrtc: webrtc,
-            webrtcDisabled: webrtcDisabled,
             webrtcAddress: webrtcAddress,
             webrtcEncryption: webrtcEncryption,
-            webrtcKey: webrtcKey,
-            webrtcCert: webrtcCert,
+            webrtcServerKey: webrtcKey,
+            webrtcServerCert: webrtcCert,
             webrtcAllowOrigin: webrtcAllowOrigin,
             webrtcTrustedProxies: webrtcTrustedProxies,
             webrtcICEServers: webrtcICEServers,
@@ -139,8 +134,9 @@ export default function WebrtcSetting({ settings, onSave, postSetting }) {
             webrtcICEUDPMuxAddress: webrtcICEUDPMuxAddress,
             webrtcICETCPMuxAddress: webrtcICETCPMuxAddress
         };
+        console.log(updatedSettings);
         onSave(updatedSettings);
-        postSetting(updatedSettings);
+        patchSetting(updatedSettings);
     };
 
     return (
@@ -167,9 +163,7 @@ export default function WebrtcSetting({ settings, onSave, postSetting }) {
                                         <label className="my-2">
                                             Webrtc Encryption:
                                         </label>
-                                        <label className="my-2">
-                                            Webrtc Disabled:
-                                        </label>
+
                                         <label className="my-3">
                                             Webrtc Server Key:
                                         </label>
@@ -214,12 +208,6 @@ export default function WebrtcSetting({ settings, onSave, postSetting }) {
                                             value={webrtcAddress}
                                             onChange={handleWebrtcAddress}
                                         />
-                                        <Checkbox
-                                            className="my-3"
-                                            value={webrtcDisabled.toString()}
-                                            checked={webrtcDisabled}
-                                            onChange={handleWebrtcDisabled}
-                                        />
                                         <Checkbox
                                             className="my-3"
                                             value={webrtcEncryption.toString()}