diff --git a/hosting/src/app/(protected)/forms/form-elements/page.tsx b/hosting/src/app/(protected)/forms/form-elements/page.tsx
index 8fb2e0e9..0fe1640f 100644
--- a/hosting/src/app/(protected)/forms/form-elements/page.tsx
+++ b/hosting/src/app/(protected)/forms/form-elements/page.tsx
@@ -43,9 +43,11 @@ const FormElementsPage = () => {
         </ContentCard>
 
         <ContentCard title="Toggle switch input">
-          <Switcher />
-          <Switcher style="rounded" />
-          <Switcher onIcon="i-ic-round-check" offIcon="i-ic-round-close" />
+          <div className="flex flex-col gap-4">
+            <Switcher />
+            <Switcher style="rounded" />
+            <Switcher onIcon="i-ic-round-check" offIcon="i-ic-round-close" />
+          </div>
         </ContentCard>
 
         <ContentCard title="Time and date">
diff --git a/hosting/src/components/Form/Switcher.tsx b/hosting/src/components/Form/Switcher.tsx
index a34dc81a..d01ee698 100644
--- a/hosting/src/components/Form/Switcher.tsx
+++ b/hosting/src/components/Form/Switcher.tsx
@@ -34,16 +34,20 @@ export function Switcher({
         return (
           <>
             <div
-              className={`h-5 w-14 rounded-full shadow-inner transition ${
+              className={`h-5 w-14 rounded-full transition ${
                 enabled ? "bg-primary dark:bg-primary" : "bg-meta-9 dark:bg-[#5A616B]"
               }`}
             ></div>
             <div
-              className={`dot absolute -top-1 left-0 flex h-7 w-7 items-center justify-center rounded-full bg-white dark:bg-[#b0b0b0] transition-transform ${
+              className={`dot shadow-md absolute -top-1 left-0 flex h-7 w-7 items-center justify-center rounded-full bg-white dark:bg-[#b0b0b0] transition-transform ${
                 enabled ? "translate-x-full" : ""
               }`}
             >
-              {onIcon && offIcon && <span className={clsx("w-[16px] h-[16px]", enabled ? onIcon : offIcon)} />}
+              {onIcon && offIcon && (
+                <span
+                  className={clsx("w-[16px] h-[16px] text-black dark:text-[#5A616B]", enabled ? onIcon : offIcon)}
+                />
+              )}
             </div>
           </>
         );
@@ -61,7 +65,11 @@ export function Switcher({
                 enabled ? "translate-x-full" : ""
               }`}
             >
-              {onIcon && offIcon && <span className={clsx("w-[16px] h-[16px]", enabled ? onIcon : offIcon)} />}
+              {onIcon && offIcon && (
+                <span
+                  className={clsx("w-[16px] h-[16px] text-black dark:text-[#5A616B]", enabled ? onIcon : offIcon)}
+                />
+              )}
             </div>
           </>
         );
@@ -69,7 +77,7 @@ export function Switcher({
   };
 
   return (
-    <div className={`flex items-center mb-2 ${disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"}`}>
+    <div className={`flex items-center ${disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"}`}>
       <label className="flex items-center select-none">
         <div className="relative">
           <input type="checkbox" className="sr-only" onChange={handleToggle} checked={enabled} disabled={disabled} />
diff --git a/hosting/src/components/Header/DarkModeSwitcher.tsx b/hosting/src/components/Header/DarkModeSwitcher.tsx
index 9e30ae83..529584af 100644
--- a/hosting/src/components/Header/DarkModeSwitcher.tsx
+++ b/hosting/src/components/Header/DarkModeSwitcher.tsx
@@ -11,15 +11,13 @@ const DarkModeSwitcher = () => {
   };
 
   return (
-    <li>
-      <Switcher
-        style="default"
-        defaultChecked={colorMode === "dark"}
-        onChange={handleColorModeToggle}
-        onIcon="i-ri-moon-clear-fill text-white"
-        offIcon="i-ri-sun-line"
-      />
-    </li>
+    <Switcher
+      style="default"
+      defaultChecked={colorMode === "dark"}
+      onChange={handleColorModeToggle}
+      onIcon="i-ri-moon-clear-fill text-white"
+      offIcon="i-ri-sun-line"
+    />
   );
 };
 
diff --git a/hosting/src/components/Header/DropdownUser.tsx b/hosting/src/components/Header/DropdownUser.tsx
index c09699f5..97bd6e8f 100644
--- a/hosting/src/components/Header/DropdownUser.tsx
+++ b/hosting/src/components/Header/DropdownUser.tsx
@@ -23,7 +23,7 @@ function DropdownItem({href, icon, label}: DropdownItemProps) {
         href={href}
         className="flex items-center gap-3.5 text-sm font-medium duration-300 ease-in-out hover:text-primary lg:text-base"
       >
-        <span className={clsx("w-[20px] h-[20px]", icon)} />
+        <span className={clsx("w-[24px] h-[24px]", icon)} />
         {label}
       </Link>
     </li>
@@ -66,12 +66,12 @@ export default function DropdownUser({displayName, avatar}: DropdownUserProps) {
           <span className="block text-sm font-medium text-black dark:text-white">{displayName}</span>
         </span>
 
-        <span className="h-12 w-12 rounded-full">
-          <Suspense fallback={<PlaceholderAvatar size={64} />}>
-            <UserAvatar src={avatar} size={64} />
+        <span className="rounded-full">
+          <Suspense fallback={<PlaceholderAvatar size={40} />}>
+            <UserAvatar src={avatar} size={40} />
           </Suspense>
         </span>
-        <span className="i-ic-round-keyboard-arrow-down w-[20px] h-[20px]" />
+        <span className="i-ic-round-keyboard-arrow-down w-[24px] h-[24px]" />
       </Link>
 
       {/* <!-- Dropdown Start --> */}
@@ -91,7 +91,7 @@ export default function DropdownUser({displayName, avatar}: DropdownUserProps) {
           onClick={signout}
           className="flex items-center gap-3.5 px-6 py-4 text-sm font-medium duration-300 ease-in-out hover:text-primary lg:text-base"
         >
-          <span className="i-ic-outline-logout w-[20px] h-[20px]" />
+          <span className="i-ic-outline-logout w-[24px] h-[24px]" />
           Log Out
         </button>
       </div>
diff --git a/hosting/src/components/Header/index.tsx b/hosting/src/components/Header/index.tsx
index 0f262f02..37b5e5d6 100644
--- a/hosting/src/components/Header/index.tsx
+++ b/hosting/src/components/Header/index.tsx
@@ -72,7 +72,7 @@ const Header = (props: {sidebarOpen: string | boolean | undefined; setSidebarOpe
           </form> */}
         </div>
 
-        <div className="flex items-center gap-3 2xsm:gap-7">
+        <div className="flex items-center gap-2 2xsm:gap-4">
           <ul className="flex items-center gap-2 2xsm:gap-4">
             <DarkModeSwitcher />
           </ul>