diff --git a/src/components/sideMenu/sideMenu.tsx b/src/components/sideMenu/sideMenu.tsx
index 6187813a..3f444d09 100644
--- a/src/components/sideMenu/sideMenu.tsx
+++ b/src/components/sideMenu/sideMenu.tsx
@@ -18,10 +18,10 @@ const SideMenu: React.FC<SideMenuProps> = ({ menuItems, onMenuItemClick }) => {
     };
 
     return (
-        <div className="bg-gray-800 h-full min-h-screen w-72 overflow-y-auto flex flex-col">
+        <div className="bg-gray-800  h-full min-h-screen shadow-sm shadow-gray-700 w-72 overflow-y-auto flex flex-col">
             <div className="flex h-24 dark:bg-window-dark-800 bg-window-light-50 justify-start items-center">
                 <Link
-                    className="flex justify-center items-center w-8 mt-12 dark:text-text-dark text-text-light rounded-full hover:dark:bg-window-dark-600 hover:bg-window-light-600"
+                    className="flex justify-center items-center mx-1 w-8 mt-12 dark:text-text-dark text-text-light rounded-full hover:dark:bg-window-dark-600 hover:bg-window-light-600"
                     to="/"
                 >
                     <IconArrowLeft
@@ -38,7 +38,7 @@ const SideMenu: React.FC<SideMenuProps> = ({ menuItems, onMenuItemClick }) => {
                         <button
                             onClick={() => handleMenuItemClick(menuItem)}
                             title={menuItem.label}
-                            className={`w-full rounded-lg text-justify mx-auto py-2 text-md dark:text-text-dark text-text-light hover:dark:bg-window-dark-100 hover:bg-window-light-600 ${
+                            className={`w-full rounded-lg text-justify  mx-auto py-2 text-md dark:text-text-dark text-text-light hover:dark:bg-window-dark-100 hover:bg-window-light-600 ${
                                 clickedButton === menuItem.label
                                     ? "bg-accent-color1-600"
                                     : ""
diff --git a/src/components/toggle/toggle.tsx b/src/components/toggle/toggle.tsx
new file mode 100644
index 00000000..3753f938
--- /dev/null
+++ b/src/components/toggle/toggle.tsx
@@ -0,0 +1,41 @@
+import { Switch } from '@headlessui/react'
+
+function classNames(...classes: string[]) {
+    return classes.filter(Boolean).join(' ')
+}
+
+interface ToggleProps {
+    className?: string;
+    enabled: boolean;
+    value?: string;
+    onChange: (checked: boolean) => void;
+}
+
+export default function Toggle({ enabled, onChange,className,value }: ToggleProps) {
+    return (
+        <Switch
+        checked={enabled}
+        onChange={onChange}
+        value={value}
+        className={`${className} ${" relative inline-flex h-5 w-10 flex-shrink-0 cursor-pointer items-center justify-center outline-none outline-2  border-none focus:outline-accent-color1-700  text-text-dark rounded-full "}`}
+      >
+        <span className="sr-only">Use setting</span>
+        <span aria-hidden="true" className="pointer-events-none absolute h-full w-full rounded-md bg-window-dark-400" />
+        <span
+          aria-hidden="true"
+          className={classNames(
+            enabled ? 'bg-accent-color1-600' : ' bg-window-dark-300',
+            'pointer-events-none absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out'
+          )}
+        />
+        <span
+          aria-hidden="true"
+          className={classNames(
+            enabled ? 'translate-x-5' : 'translate-x-0',
+            'pointer-events-none absolute left-0 inline-block h-5 w-5 transform rounded-full border  bg-window-dark-300  transition-transform duration-200 ease-in-out'
+          )}
+        />
+      </Switch>
+    )
+}
+            
diff --git a/src/views/serverSetting/ApiSetting.tsx b/src/views/serverSetting/ApiSetting.tsx
index c342a1c5..5cae1c3e 100644
--- a/src/views/serverSetting/ApiSetting.tsx
+++ b/src/views/serverSetting/ApiSetting.tsx
@@ -3,6 +3,8 @@ import { motion } from "framer-motion";
 import { fadeIn } from "../../utils/animation/screenAnimation";
 import Checkbox from "../../components/checkBox/checkBox";
 
+import Toggle from "../../components/toggle/toggle";
+
 export default function ApiSetting({ settings, onSave, patchSetting }) {
     const [apiEnabled, setApiEnabled] = useState(Boolean(settings.api));
     const [metricsEnabled, setMetricsEnabled] = useState(
@@ -94,11 +96,11 @@ export default function ApiSetting({ settings, onSave, patchSetting }) {
                             <div className="flex flex-col text-right items-end">
                                 <label className="my-2">API:</label>
                                {/* <!-- <label className="my-2">API Address:</label> --> */}
-                                <label className="my-2">Metrics:</label>
-                                <label className="mt-3.5 mb-2">Metrics Address:</label>
+                                <label className="my-3">Metrics:</label>
+                                <label className="mt-3 mb-4">Metrics Address:</label>
                                 <label className="my-2">Pprof:</label>
                                 <label className="my-4">Pprof Address:</label>
-                                <label className="mt-5 mb-2">Run On Connect:</label>
+                                <label className="mt-5 mb-2.5">Run On Connect:</label>
                                 <label className="mt-5 mb-2">
                                     Run On Connect Restart:
                                 </label>
@@ -106,17 +108,14 @@ export default function ApiSetting({ settings, onSave, patchSetting }) {
                         </div>
                         <div className="col-span-1">
                             <div className="flex flex-col">
-                                <Checkbox
-                                    className="mt-3 my-2"
-                                    value={apiEnabled.toString()}
-                                    checked={apiEnabled}
-                                    onChange={handleApiEnabledChange}
-                                />
+                            <Toggle className="my-2 mt-3" enabled={apiEnabled} onChange={handleApiEnabledChange} />
+
+                           
                             
-                                <Checkbox
+                                <Toggle
                                     className=" mt-4 mb-2"
                                     value={metricsEnabled.toString()}
-                                    checked={metricsEnabled}
+                                    enabled={metricsEnabled}
                                     onChange={handleMetricsChange}
                                 />
                                 <input
@@ -125,10 +124,10 @@ export default function ApiSetting({ settings, onSave, patchSetting }) {
                                     value={metricsAddress}
                                     onChange={handleMetricsAddressChange}
                                 />
-                                <Checkbox
-                                    className="mt-3 mb-2 my-2"
+                                <Toggle
+                                    className="mt-4 mb-2"
                                     value={pprofEnabled.toString()}
-                                    checked={pprofEnabled}
+                                    enabled={pprofEnabled}
                                     onChange={handlePprofChange}
                                 />
                                 <input
@@ -143,10 +142,10 @@ export default function ApiSetting({ settings, onSave, patchSetting }) {
                                     value={runOnConnect}
                                     onChange={handleRunOnConnectChange}
                                 />
-                                <Checkbox
+                                <Toggle
                                     className="mt-3.5 mb-2"
                                     value={runOnConnectRestart.toString()}
-                                    checked={runOnConnectRestart}
+                                    enabled={runOnConnectRestart}
                                     onChange={handleRunOnConnectRestartChange}
                                 />
                             </div>
diff --git a/src/views/serverSetting/RecordSetting.tsx b/src/views/serverSetting/RecordSetting.tsx
index bd72233f..76ceac14 100644
--- a/src/views/serverSetting/RecordSetting.tsx
+++ b/src/views/serverSetting/RecordSetting.tsx
@@ -1,8 +1,8 @@
 import { useEffect, useState } from "react";
 import { motion } from "framer-motion";
 import { fadeIn } from "../../utils/animation/screenAnimation";
-import Checkbox from "../../components/checkBox/checkBox";
 import Toast from "../../components/toast/Toast";
+import Toggle from "../../components/toggle/toggle";
 
 export default function RecordSetting({ settings, onSave, patchSetting }) {
     const [error, setError] = useState<string | null>(null);
@@ -102,45 +102,45 @@ export default function RecordSetting({ settings, onSave, patchSetting }) {
                         <div className="col-span-1">
                             <div className="flex flex-col text-right items-end">
                                 <label className="my-2">Record:</label>
-                                <label className="mt-5 mb-6">Record Path:</label>
-                                <label className="mt-5 mb-3">Record Format:</label>
-                                <label className="mt-7 mb-3">
+                                <label className="mt-5 mb-3">Record Path:</label>
+                                <label className="mt-5 mb-4">Record Format:</label>
+                                <label className="mt-4 mb-3">
                                     Record Segment Duration:
                                 </label>
-                                <label className="my-8">
+                                <label className="mt-5 mb-3">
                                     Record Delete After:
                                 </label>
                             </div>
                         </div>
                         <div className="col-span-1">
                             <div className="flex flex-col">
-                                <Checkbox
+                                <Toggle
                                     className="my-3"
                                     value={record.toString()}
-                                    checked={record}
+                                    enabled={record}
                                     onChange={handleRecordChange}
                                 />
                                 <input
                                     type="text"
-                                    className="my-3 pr-1 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500"
+                                    className="my-3 pr-1 h-8  border border-gray-300 rounded-md focus:outline-none focus:border-blue-500"
                                     value={recordPath}
                                     onChange={handleRecordPathChange}
                                 />
                                 <input
                                     type="text"
-                                    className="my-3 pr-1 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500"
+                                    className="my-3 pr-1 h-8  border border-gray-300 rounded-md focus:outline-none focus:border-blue-500"
                                     value={recordFormat}
                                     onChange={handleRecordFormatChange}
                                 />
                                 <input
                                     type="text"
-                                    className="my-3 pr-1 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500"
+                                    className="my-3 pr-1 h-8  border border-gray-300 rounded-md focus:outline-none focus:border-blue-500"
                                     value={recordSegmentDuration}
                                     onChange={handleRecordSegmentDurationChange}
                                 />
                                 <input
                                     type="text"
-                                    className="my-3  pr-1 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500"
+                                    className="my-3  pr-1 h-8  border border-gray-300 rounded-md focus:outline-none focus:border-blue-500"
                                     value={recordDeleteAfter}
                                     onChange={handleRecordDeleteAfterChange}
                                 />
diff --git a/src/views/serverSetting/webrtcSetting.tsx b/src/views/serverSetting/webrtcSetting.tsx
index 0bd66f23..870dfe7f 100644
--- a/src/views/serverSetting/webrtcSetting.tsx
+++ b/src/views/serverSetting/webrtcSetting.tsx
@@ -148,9 +148,75 @@ export default function WebrtcSetting({ settings, onSave, patchSetting }) {
         className="w-full max-w-2xl p-8 ml-20  rounded-md"
       >
                     {settings && (
+                        
                         <div className="space-y-6">
                         <h2 className="text-center font-bold text-3xl">Webrtc Setting</h2>
-                        <div className="grid grid-cols-2 gap-6">
+                       {/* <div className="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-10 px-4 py-16 sm:px-6 md:grid-cols-3 lg:px-8">
+                        <div>
+                          <h2 className="text-base font-semibold leading-7 text-white">Change password</h2>
+                          <p className="mt-1 text-sm leading-6 text-gray-400">
+                            Update your password associated with your account.
+                          </p>
+                        </div>
+        
+                        <form className="md:col-span-2">
+                          <div className="grid grid-cols-1 gap-x-6 gap-y-8 sm:max-w-xl sm:grid-cols-6">
+                            <div className="col-span-full">
+                              <label htmlFor="current-password" className="block text-sm font-medium leading-6 text-white">
+                                Current password
+                              </label>
+                              <div className="mt-2">
+                                <input
+                                  id="current-password"
+                                  name="current_password"
+                                  type="password"
+                                  autoComplete="current-password"
+                                  className="block w-full rounded-md border-0 bg-white/5 py-1.5 text-white shadow-sm ring-1 ring-inset ring-white/10 focus:ring-2 focus:ring-inset focus:ring-indigo-500 sm:text-sm sm:leading-6"
+                                />
+                              </div>
+                            </div>
+                            <div className="col-span-full">
+                      <label htmlFor="new-password" className="block text-sm font-medium leading-6 text-white">
+                        New password
+                      </label>
+                      <div className="mt-2">
+                        <input
+                          id="new-password"
+                          name="new_password"
+                          type="password"
+                          autoComplete="new-password"
+                          className="block w-full rounded-md border-0 bg-white/5 py-1.5 text-white shadow-sm ring-1 ring-inset ring-white/10 focus:ring-2 focus:ring-inset focus:ring-indigo-500 sm:text-sm sm:leading-6"
+                        />
+                      </div>
+                    </div>
+
+                    <div className="col-span-full">
+                      <label htmlFor="confirm-password" className="block text-sm font-medium leading-6 text-white">
+                        Confirm password
+                      </label>
+                      <div className="mt-2">
+                        <input
+                          id="confirm-password"
+                          name="confirm_password"
+                          type="password"
+                          autoComplete="new-password"
+                          className="block w-full rounded-md border-0 bg-white/5 py-1.5 text-white shadow-sm ring-1 ring-inset ring-white/10 focus:ring-2 focus:ring-inset focus:ring-indigo-500 sm:text-sm sm:leading-6"
+                        />
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="mt-8 flex">
+                    <button
+                     
+                      className="rounded-md bg-indigo-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500"
+                    >
+                      Save
+                    </button>
+                  </div>
+                    </form>*/}
+              
+                        <div className="grid place-content-start grid-cols-2 gap-6">
                                 <div className="col-span-1">
                                     <div className="flex flex-col align-baseline text-justify items-end">
                                         <label className="my-2">Webrtc:</label>
@@ -329,6 +395,7 @@ export default function WebrtcSetting({ settings, onSave, patchSetting }) {
                                 </button>
                             </div>
                         </div>
+                        
                     )}
                 </motion.div>
             </div>