diff --git a/hosting/src/app/(protected)/settings/page.tsx b/hosting/src/app/(protected)/settings/page.tsx
index d610ad5d..a050eb8b 100644
--- a/hosting/src/app/(protected)/settings/page.tsx
+++ b/hosting/src/app/(protected)/settings/page.tsx
@@ -1,5 +1,6 @@
 "use client";
 import PageHeader from "@/components/common/PageHeader";
+import DarkModeSwitcher from "@/components/Header/DarkModeSwitcher";
 import {useAuthentication} from "@/hooks/useAuthentication";
 import {useTanamUser} from "@/hooks/useTanamUser";
 import Image from "next/image";
@@ -67,6 +68,7 @@ export default function Settings() {
               </div>
             </div>
           </div>
+
           <div className="col-span-5 xl:col-span-2">
             <div className="rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
               <div className="border-b border-stroke px-7 py-4 dark:border-strokedark">
@@ -124,6 +126,24 @@ export default function Settings() {
               </div>
             </div>
           </div>
+
+          <div className="col-span-5 xl:col-span-2">
+            <div className="rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
+              <div className="border-b border-stroke px-7 py-4 dark:border-strokedark">
+                <h3 className="font-medium text-black dark:text-white">System</h3>
+              </div>
+              <div className="p-7">
+                <div className="mb-4 flex items-center gap-3">
+                  <label className="mb-3 block text-sm font-medium text-black dark:text-white" htmlFor="emailAddress">
+                    Dark mode
+                  </label>
+                  <div className="relative">
+                    <DarkModeSwitcher />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </>
diff --git a/hosting/src/components/Header/index.tsx b/hosting/src/components/Header/index.tsx
index 195909ce..52880fa4 100644
--- a/hosting/src/components/Header/index.tsx
+++ b/hosting/src/components/Header/index.tsx
@@ -1,4 +1,3 @@
-import DarkModeSwitcher from "@/components/Header/DarkModeSwitcher";
 import DropdownUser from "@/components/Header/DropdownUser";
 import Image from "next/image";
 import Link from "next/link";
@@ -71,9 +70,6 @@ const Header = (props: {sidebarOpen: string | boolean | undefined; setSidebarOpe
         </div>
 
         <div className="flex items-center gap-2 2xsm:gap-4">
-          <ul className="flex items-center gap-2 2xsm:gap-4">
-            <DarkModeSwitcher />
-          </ul>
           <DropdownUser />
         </div>
       </div>