diff --git a/src/components/notification/notification.tsx b/src/components/notification/notification.tsx
new file mode 100644
index 00000000..c47a9b7c
--- /dev/null
+++ b/src/components/notification/notification.tsx
@@ -0,0 +1,98 @@
+import { Fragment, useState, useEffect } from 'react';
+import { motion } from 'framer-motion';
+import { Transition } from '@headlessui/react';
+import { BiSolidErrorAlt, BiCheck, BiInfoCircle } from 'react-icons/bi';
+import { XMarkIcon } from '@heroicons/react/20/solid'
+import { toastAnimationAppear } from '../../utils/animation/toastAnimation';
+export default function Notification({  onDismiss, timer, type, message })  {
+    const [show, setShow] = useState(true);
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      dismissToast();
+    }, timer);
+
+    return () => clearTimeout(timeout);
+  }, [timer]);
+
+  const dismissToast = () => {
+    setShow(false);
+    setTimeout(() => {
+      onDismiss();
+    }, 300);
+  };
+
+  const getIcon = () => {
+    switch (type) {
+      case 'error':
+        return <BiSolidErrorAlt className="h-6 w-6 " aria-hidden="true" />;
+      case 'success':
+        return <BiCheck className="h-6 w-6 text-white" aria-hidden="true" />;
+      case 'info':
+        return <BiInfoCircle className="h-6 w-6 text-white" aria-hidden="true" />;
+      default:
+        return null;
+    }
+  };
+
+  const getToastClassName = () => {
+    switch (type) {
+      case 'error':
+        return 'bg-red-700 text-white';
+      case 'success':
+        return 'bg-green-700 text-white'; // Assuming you have a success class
+      case 'info':
+        return 'bg-blue-700 text-white';
+      default:
+        return 'bg-gray-700 text-white';
+    }
+  };
+
+  return (
+ 
+    <motion.div 
+      initial={"hidden"}
+      animate={"visible"}
+      exit={"exit"}
+      variants={toastAnimationAppear}
+      >
+
+
+
+    
+    <Transition
+      show={show}
+      as={Fragment}
+      enter="transform ease-out duration-300 transition"
+      enterFrom="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
+      enterTo="translate-y-0 opacity-100 sm:translate-x-0"
+      leave="transition ease-in duration-100"
+      leaveFrom="opacity-100"
+      leaveTo="opacity-0"
+    >
+      <div className={`pointer-events-auto  fixed bottom-20 right-4 z-50 w-full max-w-sm overflow-hidden rounded-lg ${getToastClassName()}`}>
+        <div className="p-4">
+          <div className="flex items-start">
+            <div className="flex-shrink-0">{getIcon()}</div>
+            <div className="ml-3 w-0 flex-1 pt-0.5">
+              <p className="text-sm font-medium ">{message}</p>
+            </div>
+            <div className="ml-4 flex flex-shrink-0">
+              <button
+                type="button"
+                className="inline-flex rounded-md  focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                onClick={dismissToast}
+              >
+                <span className="sr-only">Close</span>
+                <XMarkIcon className="h-5 w-5" aria-hidden="true" />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Transition>
+    </motion.div>
+      
+
+  );
+};
+
diff --git a/src/components/sideMenu/sideMenu.tsx b/src/components/sideMenu/sideMenu.tsx
index 3f444d09..ba953ee9 100644
--- a/src/components/sideMenu/sideMenu.tsx
+++ b/src/components/sideMenu/sideMenu.tsx
@@ -18,7 +18,7 @@ const SideMenu: React.FC<SideMenuProps> = ({ menuItems, onMenuItemClick }) => {
     };
 
     return (
-        <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="bg-gray-800  fixed 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 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"
@@ -31,7 +31,6 @@ const SideMenu: React.FC<SideMenuProps> = ({ menuItems, onMenuItemClick }) => {
                 </Link>
             </div>
             <ul className="pl-2 flex-1">
-                {" "}
                 {/* Use flex-1 to make this part flexible */}
                 {menuItems.map((menuItem, index) => (
                     <li key={index} className="my-2 mx-2">
diff --git a/src/components/toast/Toast.tsx b/src/components/toast/Toast.tsx
deleted file mode 100644
index cd6d2dcc..00000000
--- a/src/components/toast/Toast.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import { useEffect, useState } from "react";
-import { AiOutlineClose } from "react-icons/ai";
-import { BiSolidErrorAlt, BiCheck, BiInfoCircle } from "react-icons/bi";
-import { AnimatePresence, motion } from "framer-motion";
-import { toastAnimationAppear } from "../../utils/animation/toastAnimation";
-import { IToast } from "../../interfaces/IToast";
-
-function Toast({ message, timer, type, onDismiss }: IToast) {
-    const [show, setShow] = useState(true);
-
-    useEffect(() => {
-        const timeout = setTimeout(() => {
-            dismissToast();
-        }, timer);
-
-        return () => clearTimeout(timeout);
-    }, [timer]);
-
-    const dismissToast = () => {
-        setShow(false);
-        setTimeout(() => {
-            onDismiss();
-        }, 300);
-    };
-
-    const getIcon = () => {
-        switch (type) {
-            case "error":
-                return <BiSolidErrorAlt />;
-            case "success":
-                return <BiCheck />;
-            case "info":
-                return <BiInfoCircle />;
-            default:
-                return null;
-        }
-    };
-
-    const getToastClassName = () => {
-        switch (type) {
-            case "error":
-                return "bg-red-700 text-white";
-            case "success":
-                return "bg-success text-white";
-            case "info":
-                return "bg-blue-700 text-white";
-            default:
-                return "bg-gray-700 text-white";
-        }
-    };
-
-    return (
-        <AnimatePresence>
-            {show && (
-                <motion.div
-                    initial="hidden"
-                    animate="visible"
-                    exit="exit"
-                    variants={toastAnimationAppear}
-                    onClick={dismissToast}
-                >
-                    <div
-                        className={`absolute bottom-20 right-5 px-4 py-2 rounded-lg shadow-lg  ${getToastClassName()}`}
-                    >
-                        {getIcon()}
-                        <div className="flex-1 mx-2 pr-2 overflow-hidden">
-                            {message}
-                        </div>
-                        <button className="ml-2" onClick={dismissToast}>
-                            <AiOutlineClose />
-                        </button>
-                    </div>
-                </motion.div>
-            )}
-        </AnimatePresence>
-    );
-}
-
-export default Toast;
diff --git a/src/components/videoPlayer/videoPlayer.tsx b/src/components/videoPlayer/videoPlayer.tsx
index f53bb8a2..e68260c8 100644
--- a/src/components/videoPlayer/videoPlayer.tsx
+++ b/src/components/videoPlayer/videoPlayer.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from "react";
 import ReactPlayer from "react-player";
 import { useWindowDimensions } from "../../utils/WindowSize";
-import Toast from "../toast/Toast";
+import Toast from "../notification/notification";
 import { IVideoPlayer } from "../../interfaces/IVideoPlayer";
 import StreamPlaceholder from "./placeholderStream";
 import { invoke } from "@tauri-apps/api";
diff --git a/src/views/Server.tsx b/src/views/Server.tsx
index 35782ddf..a017da51 100644
--- a/src/views/Server.tsx
+++ b/src/views/Server.tsx
@@ -5,7 +5,8 @@ import { createPortal } from "react-dom";
 import Titlebar from "../components/titlebar/titlebar";
 import RtmpConnInfo from "./ServerInfoView/RtmpServerInfo";
 import HLsConnInfo from "./ServerInfoView/HlsServerInfo";
-import Toast from "../components/toast/Toast";
+import Notification from "../components/notification/notification";
+
 export default function ServerInfo() {
     const [error, setError] = useState<string | null>(null);
     const [currentSetting, setCurrentSetting] = useState("RTSP"); // Initially show the "API Setting" component
@@ -18,7 +19,7 @@ export default function ServerInfo() {
         { label: "SRT" }
     ].sort((a, b) => a.label.localeCompare(b.label));
 
-    function handleDismissErrorToast() {
+    function handleDismissErrorNotification() {
         setError(null);
     }
 
@@ -45,16 +46,21 @@ export default function ServerInfo() {
                         <div className="mx-auto mt-24">
                             {currentSetting === "HLS" && <HLsConnInfo />}
                         </div>
-                        {error && (
-                            <Toast
+                       
+                    </div>
+                   
+                </div>
+                {error && (
+                   
+                            <Notification
                                 message={error}
                                 timer={5000}
                                 type={"error"}
-                                onDismiss={handleDismissErrorToast}
+                                onDismiss={handleDismissErrorNotification}
                             />
+                           
                         )}
-                    </div>
-                </div>
+                        
             </div>
         </>
     );
diff --git a/src/views/Settings.tsx b/src/views/Settings.tsx
index 31ac0718..25a0dca5 100644
--- a/src/views/Settings.tsx
+++ b/src/views/Settings.tsx
@@ -20,7 +20,7 @@ import {
     IRecordSettings
 } from "../interfaces/IServer";
 import SideMenu from "../components/sideMenu/sideMenu";
-import Toast from "../components/toast/Toast";
+import Notification from "../components/notification/notification";
 import SrtSetting from "./serverSetting/SrtSetting";
 import SuccessAlert from "../components/alert/sucessAlert";
 import RecordSetting from "./serverSetting/RecordSetting";
@@ -363,7 +363,7 @@ export default function Setting() {
                             }
                         />
                     </div>
-                    <div className="w-3/4 mx-auto mt-4 mr-56">
+                    <div className="w-3/4 mx-auto mt-4 ">
                         <div className="mx-auto z-auto mt-24">
                             {successMessage && (
                                 <SuccessAlert
@@ -457,16 +457,18 @@ export default function Setting() {
                             )}
                         </div>
                     </div>
+                    
                 </div>
-                {error && (
-                    <Toast
-                        message={error}
-                        timer={5000}
-                        type={"error"}
-                        onDismiss={handleDismissErrorToast}
-                    />
-                )}
+                
             </div>
+            {error && (
+                            <Notification
+                                message={error}
+                                timer={5000}
+                                type={"error"}
+                                onDismiss={handleDismissErrorToast}
+                            />
+                        )}
         </>
     );
 }
diff --git a/src/views/appSetting/appSetting.tsx b/src/views/appSetting/appSetting.tsx
index 009b0671..de3efde8 100644
--- a/src/views/appSetting/appSetting.tsx
+++ b/src/views/appSetting/appSetting.tsx
@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
 import { motion } from "framer-motion";
-import Toast from"../../components/toast/Toast";
+import Toast from"../../components/notification/notification";
 import Dropdown from "../../components/dropdowns/dropdown";
 import { invoke } from "@tauri-apps/api";
 import SuccessAlert from "../../components/alert/sucessAlert";
diff --git a/src/views/serverSetting/RecordSetting.tsx b/src/views/serverSetting/RecordSetting.tsx
index 76ceac14..c65ec4ad 100644
--- a/src/views/serverSetting/RecordSetting.tsx
+++ b/src/views/serverSetting/RecordSetting.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { motion } from "framer-motion";
 import { fadeIn } from "../../utils/animation/screenAnimation";
-import Toast from "../../components/toast/Toast";
+import Toast from "../../components/notification/notification";
 import Toggle from "../../components/toggle/toggle";
 
 export default function RecordSetting({ settings, onSave, patchSetting }) {
diff --git a/src/views/serverSetting/webrtcSetting.tsx b/src/views/serverSetting/webrtcSetting.tsx
index b866107f..7a48a1b7 100644
--- a/src/views/serverSetting/webrtcSetting.tsx
+++ b/src/views/serverSetting/webrtcSetting.tsx
@@ -4,6 +4,7 @@ import { fadeIn } from "../../utils/animation/screenAnimation";
 import { ICEServer } from "../../interfaces/IServer";
 import Toggle from "../../components/toggle/toggle";
 
+
 export default function WebrtcSetting({ settings, onSave, patchSetting }) {
     const [webrtc, setWebrtc] = useState(settings.webrtc || true);
      
@@ -136,269 +137,207 @@ export default function WebrtcSetting({ settings, onSave, patchSetting }) {
         onSave(updatedSettings);
         patchSetting(updatedSettings);
     };
+   
+    const renderWebrtcSectionAddress = () => (
+             <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 bg-window-dark-800">
+      <div>
+        <h2 className="text-base font-semibold leading-7 text-white">Webrtc Address</h2>
+        <p className="mt-1 text-sm leading-6 text-gray-400">
+             
+        </p>
+      </div>
+          <div className="col-span-1 ">
+            <div className="flex flex-col align-baseline items-end">
+              <label className="my-2">Webrtc:</label>
+              <label className="mt-4 mb-3">Webrtc Address:</label>
+              </div>
+          </div>
+          <div className=" flex flex-col">
+            <Toggle
+              className="my-3"
+              value={webrtc.toString()}
+              enabled={webrtc}
+              onChange={handleWebrtc}
+            />
+            <input
+              type="text"
+              className="my-2 h-8  border border-gray-300 rounded-md focus:outline-none focus:border-blue-500 mx-2"
+              value={webrtcAddress}
+              onChange={handleWebrtcAddress}
+            />
+               </div>
+
+        </div>
+        );
 
-    return (
+        const renderWebrtcSectionSecurity = () => (
+            <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 bg-window-dark-800">
+     <div>
+       <h2 className="text-base font-semibold leading-7 text-white">Security</h2>
+       <p className="mt-1 text-sm leading-6 text-gray-400">
+            
+       </p>
+     </div>
+         <div className="col-span-1 ">
+           <div className="flex flex-col align-baseline items-end">
+           <label className="my-3">Webrtc Encryption:</label>
+              <label className="mt-4 mb-3">Webrtc Server Key:</label>
+              <label className="mt-6 mb-4">Webrtc Server Certificate:</label>
+              <label className="mt-5 mb-3">Webrtc Allow Origin:</label>
+              <label className="mt-8 mb-6">Webrtc Trusted Proxies:</label>
+             </div>
+         </div>
+         <div className=" flex flex-col">
+         <Toggle
+              className="my-3"
+              value={webrtcEncryption.toString()}
+              enabled={webrtcEncryption}
+              onChange={handleWebrtcEncryption}
+            />
+            <input
+              type="text"
+              className="my-2 h-8  border border-gray-300 rounded-md focus:outline-none focus:border-blue-500 mx-2"
+              value={webrtcKey}
+              onChange={handleWebrtcKey}
+            />
+            <input
+              type="text"
+              className="my-3 h-8  border border-gray-300 rounded-md focus:outline-none focus:border-blue-500 mx-2"
+              value={webrtcCert}
+              onChange={handleWebrtcCert}
+            />
+            <input
+              type="text"
+              className="my-2 h-8  border border-gray-300 rounded-md focus:outline-none focus:border-blue-500 mx-2"
+              value={webrtcAllowOrigin}
+              onChange={handleWebrtcAllowOrigin}
+            />
+            <textarea
+              name="webrtcTrustedProxies"
+              className="resize-none my-2 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500 mx-2"
+              value={webrtcTrustedProxies}
+              onChange={handleWebrtcTrustedProxies}
+            />
+              </div>
+
+       </div>
+       );
+
+       const renderWebrtcSectionICEServers = () => (
+        <div className="grid max-w-7xl w-full grid-cols-1 gap-x-8 gap-y-10 px-4 py-16 sm:px-6 md:grid-cols-3 lg:px-8 bg-window-dark-800">
+          <div className="col-span-3">
+            <h2 className="text-base font-semibold leading-7 text-white mb-4">ICE Servers</h2>
+          </div>
+          <div className="col-span-1 grid grid-rows-5 gap-y-2">
+            <label className="mt-16 mb-2">Webrtc ICE Servers:</label>
+            <label className="mb-2">Webrtc ICE Servers2:</label>
+            <label className="mb-2">Webrtc ICE Host NAT 1 To 1 IPs:</label>
+            <label className="mb-2">Webrtc ICE UDP Mux Address:</label>
+            <label className="mb-2">Webrtc ICE TCP Mux Address:</label>
+          </div>
+          <div className="col-span-2 grid grid-cols-2 gap-x-4">
+            <textarea
+              name="webrtcICEServers"
+              className="resize-none my-2 h-40 col-span-2 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500 mx-2"
+              value={webrtcICEServers}
+              onChange={handleWebrtcICEServers}
+            />
+            <div className="grid grid-cols-2 gap-x-4">
+              <div className="flex flex-col my-2">
+                <label className="my-2">URL:</label>
+                <input
+                  title="url"
+                  type="text"
+                  className="my-2 h-8 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500"
+                  value={webrtcICEServers2.url}
+                  onChange={handleWebrtcICEServers2}
+                />
+              </div>
+              <div className="flex flex-col my-2">
+                <label className="my-2">Username:</label>
+                <input
+                  title="username"
+                  type="text"
+                  className="my-2 h-8 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500"
+                  value={webrtcICEServers2.username}
+                  onChange={handleWebrtcICEServers2}
+                />
+              </div>
+              <div className="flex flex-col my-2">
+                <label className="my-2">Password:</label>
+                <input
+                  title="password"
+                  type="text"
+                  className="my-2 h-8 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500"
+                  value={webrtcICEServers2.password}
+                  onChange={handleWebrtcICEServers2}
+                />
+              </div>
+            </div>
+            <textarea
+              name="webrtcICEHostNAT1To1IPs"
+              className="resize-none my-2 h-16 col-span-2 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500 mx-2"
+              value={webrtcICEHostNAT1To1IPs}
+              onChange={handleWebrtcICEHostNAT1To1IPs}
+            />
+            <input
+              type="text"
+              className="my-2 h-8 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500 mx-2"
+              value={webrtcICEUDPMuxAddress}
+              onChange={handleWebrtcICEUDPMuxAddress}
+            />
+            <input
+              type="text"
+              className="my-3 h-8 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500 mx-2"
+              value={webrtcICETCPMuxAddress}
+              onChange={handleWebrtcICETCPMuxAddress}
+            />
+          </div>
+        </div>
+      );
+      
+      
+      
+      
+    
+      
+      return (
         <>
-              <div className="w-full h-full flex justify-center items-center">
+    <div className="w-fit mx-auto h-full flex justify-center items-start">
       <motion.div
         variants={fadeIn}
         initial="hidden"
         animate="visible"
         exit="exit"
-        className="w-full max-w-2xl p-8 ml-20  rounded-md"
+        className="w-full max-w-2xl rounded-md"
       >
-                    {settings && (
-                        
-                        <div className="space-y-6">
-                        <h2 className="text-center font-bold text-3xl">Webrtc Setting</h2>
-                       {/* <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-12">
-                                <div className="col-span-1">
-                                    <div className="flex flex-col align-baseline text-justify items-end">
-                                        <label className="my-2">Webrtc:</label>
-                                        <label className="mt-4 mb-3">
-                                            Webrtc Address:
-                                        </label>
-                                        <label className="my-3">
-                                            Webrtc Encryption:
-                                        </label>
-
-                                        <label className="mt-4 mb-3">
-                                            Webrtc Server Key:
-                                        </label>
-                                        <label className="mt-6 mb-4">
-                                            Webrtc Server Certificate:
-                                        </label>
-                                        <label className="mt-5 mb-3">
-                                            Webrtc Allow Origin:
-                                        </label>
-                                        <label className="mt-8 mb-6">
-                                            Webrtc Trusted Proxies:
-                                        </label>
-                                        <label className="mt-8 mb-3">
-                                            Webrtc ICE Servers:
-                                        </label>
-                                        <label className="mt-5 mb-32">
-                                            Webrtc ICE Servers2:
-                                        </label>
-                                        <label className="mt-4
-                                         mb-5">
-                                            Webrtc ICE Host NAT 1 To 1 IPs:
-                                        </label>
-                                        <label className="mt-7 mb-5">
-                                            Webrtc ICE UDP Mux Address:
-                                        </label>
-                                        <label className="mt-5 mb-3">
-                                            Webrtc ICE TCP Mux Address:
-                                        </label>
-                                    </div>
-                                </div>
-                                <div className="flex flex-col space-y-4">
-                                    <div className="flex flex-col">
-                                        <Toggle
-                                            className="my-3"
-                                            value={webrtc.toString()}
-                                            enabled={webrtc}
-                                            onChange={handleWebrtc}
-                                        />
-
-                                        <input
-                                            type="text"
-                                            className="my- h-8  border border-gray-300 rounded-md focus:outline-none focus:border-blue-500 mx-2"
-                                            value={webrtcAddress}
-                                            onChange={handleWebrtcAddress}
-                                        />
-                                        <Toggle
-                                            className="my-3"
-                                            value={webrtcEncryption.toString()}
-                                            enabled={webrtcEncryption}
-                                            onChange={handleWebrtcEncryption}
-                                        />
-                                        <input
-                                            type="text"
-                                            className="my-2 h-8  border border-gray-300 rounded-md focus:outline-none focus:border-blue-500 mx-2"
-                                            value={webrtcKey}
-                                            onChange={handleWebrtcKey}
-                                        />
-                                        <input
-                                            type="text"
-                                            className="my-3 h-8  border border-gray-300 rounded-md focus:outline-none focus:border-blue-500 mx-2"
-                                            value={webrtcCert}
-                                            onChange={handleWebrtcCert}
-                                        />
-                                        <input
-                                            type="text"
-                                            className="my-2 h-8  border border-gray-300 rounded-md focus:outline-none focus:border-blue-500 mx-2"
-                                            value={webrtcAllowOrigin}
-                                            onChange={handleWebrtcAllowOrigin}
-                                        />
-                                        <textarea
-                                            name="webrtcTrustedProxies"
-                                            className="resize-none my-2 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500 mx-2"
-                                            value={webrtcTrustedProxies}
-                                            onChange={
-                                                handleWebrtcTrustedProxies
-                                            }
-                                        />
-                                        <textarea
-                                            name="webrtcICEServers"
-                                            className="resize-none my-2 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500 mx-2"
-                                            value={webrtcICEServers}
-                                            onChange={handleWebrtcICEServers}
-                                        />
-                                        <div className="my-6 mx-2">
-                                            <label className="my-2 mx-2">
-                                                URL:
-                                            </label>
-                                            <input
-                                                title="url"
-                                                type="text"
-                                                className="s my-2 h-8  border border-gray-300 rounded-md focus:outline-none focus:border-blue-500 mx-2"
-                                                value={webrtcICEServers2.url}
-                                                onChange={
-                                                    handleWebrtcICEServers2
-                                                }
-                                            />
-                                            <label className="my-2 mx-2">
-                                                Username:
-                                            </label>
-                                            <input
-                                                title="username"
-                                                type="text"
-                                                className="my-2 h-8  border border-gray-300 rounded-md focus:outline-none focus:border-blue-500 mx-2"
-                                                value={
-                                                    webrtcICEServers2.username
-                                                }
-                                                onChange={
-                                                    handleWebrtcICEServers2
-                                                }
-                                            />
-                                            <label className="my-2 mx-2">
-                                                Password:
-                                            </label>
-                                            <input
-                                                title="password"
-                                                type="text"
-                                                className="my-2 h-8  border border-gray-300 rounded-md focus:outline-none focus:border-blue-500 mx-2"
-                                                value={
-                                                    webrtcICEServers2.password
-                                                }
-                                                onChange={
-                                                    handleWebrtcICEServers2
-                                                }
-                                            />
-                                        </div>
-                                        <textarea
-                                            name="webrtcICEHostNAT1To1IPs"
-                                            className="resize-none my-2 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500 mx-2"
-                                            value={webrtcICEHostNAT1To1IPs}
-                                            onChange={
-                                                handleWebrtcICEHostNAT1To1IPs
-                                            }
-                                        />
-                                        <input
-                                            type="text"
-                                            className="my-2 h-8  border border-gray-300 rounded-md focus:outline-none focus:border-blue-500 mx-2"
-                                            value={webrtcICEUDPMuxAddress}
-                                            onChange={
-                                                handleWebrtcICEUDPMuxAddress
-                                            }
-                                        />
-                                        <input
-                                            type="text"
-                                            className="my-3 h-8  border border-gray-300 rounded-md focus:outline-none focus:border-blue-500 mx-2"
-                                            value={webrtcICETCPMuxAddress}
-                                            onChange={
-                                                handleWebrtcICETCPMuxAddress
-                                            }
-                                        />
-                                    </div>
-                                </div>
-                            </div>
-                            <div className="my-6 flex justify-end fixed bottom-0 right-0">
-                                <button
-                                    type="button"
-                                    className="dark:text-text-dark text-text-light bg-accent-color1-700 hover:bg-accent-color1-800 ml-4 font-bold py-2 px-4 rounded"
-                                >
-                                    Cancel
-                                </button>
-                                <button
-                                    type="button"
-                                    className="dark:text-text-dark text-text-light bg-accent-color1-700 hover:bg-accent-color1-800 mx-4 font-bold py-2 px-4 rounded"
-                                    onClick={handleSaveConfig}
-                                >
-                                    Apply
-                                </button>
-                            </div>
-                        </div>
-                        
-                    )}
-                </motion.div>
+        {settings && (
+          <div className=" w-full">
+            <h2 className="text-center mb-4 font-bold text-3xl">Webrtc Setting</h2>
+            <div className="divide-y divide-window-dark-500">
+            {renderWebrtcSectionAddress()}
+            {renderWebrtcSectionSecurity()}
+            {renderWebrtcSectionICEServers()}
             </div>
-        </>
-    );
-}
+            <div className="my-6 flex justify-end fixed bottom-0 right-0">
+              <button
+                type="button"
+                className="dark:text-text-dark text-text-light bg-accent-color1-700 hover:bg-accent-color1-800 ml-4 font-bold py-2 px-4 rounded"
+              >
+                Cancel
+              </button>
+              <button
+                type="button"
+                className="dark:text-text-dark text-text-light bg-accent-color1-700 hover:bg-accent-color1-800 mx-4 font-bold py-2 px-4 rounded"
+                onClick={handleSaveConfig}
+              >
+                Apply
+              </button>
+            </div>
+          </div>
+        )}
+      </motion.div>
+    </div>
+  </>
+      );
+    }
\ No newline at end of file