diff --git a/modules/mainHeader/AppHeader/AppHeader.scss b/modules/mainHeader/AppHeader/AppHeader.scss
index 8270204..642ae80 100755
--- a/modules/mainHeader/AppHeader/AppHeader.scss
+++ b/modules/mainHeader/AppHeader/AppHeader.scss
@@ -28,7 +28,8 @@
     padding: var(--spacing-28) var(--spacing-16);
 
     @media (--screen-md-min) {
-      padding: var(--spacing-24) var(--spacing-48);
+      padding: var(--spacing-24) var(--spacing-80) var(--spacing-24)
+        var(--spacing-48); // Spacing 80 aligns the theme button with the social links
     }
   }
 
diff --git a/modules/mainHeader/AppHeader/AppHeader.tsx b/modules/mainHeader/AppHeader/AppHeader.tsx
index 4e1ea20..b9d91a2 100755
--- a/modules/mainHeader/AppHeader/AppHeader.tsx
+++ b/modules/mainHeader/AppHeader/AppHeader.tsx
@@ -2,8 +2,8 @@ import { useMemo } from 'react';
 import cn from 'classnames';
 
 import { useWindowScroll, useScrollDirection } from 'hooks';
-import { Navbar } from 'modules/mainHeader/Navbar';
 import { AppLink } from 'components/AppLink';
+import { ThemeToggle } from 'modules/mainHeader/ThemeToggle';
 
 export const AppHeader: React.FC = () => {
   const { y: scrollPosY } = useWindowScroll();
@@ -27,8 +27,7 @@ export const AppHeader: React.FC = () => {
         <h1 className="main-header__logo">
           <AppLink to="/">konsila Systemberatung</AppLink>
         </h1>
-
-        <Navbar />
+        <ThemeToggle />
       </div>
     </header>
   );