diff --git a/src/app/components/Header/index.tsx b/src/app/components/Header/index.tsx
index ae5b35d..100bc3b 100644
--- a/src/app/components/Header/index.tsx
+++ b/src/app/components/Header/index.tsx
@@ -35,7 +35,6 @@ export const Header = () => {
 		<Navbar className="mb-2">
 			<NavbarBrand>
 				<p className="font-bold text-inherit">Toogether</p>
-				<ThemeSwitcher />
 			</NavbarBrand>
 			<NavbarContent as="div" justify="end">
 				<Dropdown placement="bottom-end">
@@ -66,6 +65,7 @@ export const Header = () => {
 						</DropdownItem>
 					</DropdownMenu>
 				</Dropdown>
+				<ThemeSwitcher />
 			</NavbarContent>
 		</Navbar>
 	);
diff --git a/src/app/components/ThemeSwitcher/ThemeSwitcher.tsx b/src/app/components/ThemeSwitcher/ThemeSwitcher.tsx
index 64bf4b8..e418097 100644
--- a/src/app/components/ThemeSwitcher/ThemeSwitcher.tsx
+++ b/src/app/components/ThemeSwitcher/ThemeSwitcher.tsx
@@ -14,7 +14,7 @@ export const ThemeSwitcher = () => {
 
 	return (
 		<button
-			className={`fixed bottom-4 right-4 rounded-lg ${theme === "light" ? "bg-black" : "bg-white"
+			className={`backdrop-blur-sm rounded-lg ${theme === "light" ? "bg-black/10" : "bg-white/10"
 				} p-2`}
 			onClick={() => setTheme(theme === "light" ? "dark" : "light")}
 		>