diff --git a/apps/login/app/layout.tsx b/apps/login/app/layout.tsx
index 65b9d41fbe1..ddde9f36bf3 100644
--- a/apps/login/app/layout.tsx
+++ b/apps/login/app/layout.tsx
@@ -62,16 +62,6 @@ export default async function RootLayout({
                       {children}
                     </div>
                   </div>
-
-                  <div
-                    className={`rounded-lg bg-vc-border-gradient dark:bg-dark-vc-border-gradient p-px shadow-lg shadow-black/5 dark:shadow-black/20 ${
-                      showNav ? "" : "max-w-[440px] w-full fixed bottom-4"
-                    }`}
-                  >
-                    <div className="rounded-lg bg-background-light-400 dark:bg-background-dark-500">
-                      <Byline />
-                    </div>
-                  </div>
                 </div>
               </div>
             </div>
diff --git a/apps/login/ui/Byline.tsx b/apps/login/ui/Byline.tsx
deleted file mode 100644
index bbaa55efad7..00000000000
--- a/apps/login/ui/Byline.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import Theme from "./Theme";
-
-export default function Byline() {
-  return (
-    <div className="flex items-center justify-between w-full p-3.5 lg:px-5 lg:py-3">
-      <div className="flex items-center space-x-1.5">
-        <div className="text-sm text-gray-600">By</div>
-        <div className="text-sm font-semibold">ZITADEL</div>
-      </div>
-      <Theme />
-    </div>
-  );
-}
diff --git a/apps/login/ui/GlobalNav.tsx b/apps/login/ui/GlobalNav.tsx
index 89d0d10eb48..d24864ff0d3 100644
--- a/apps/login/ui/GlobalNav.tsx
+++ b/apps/login/ui/GlobalNav.tsx
@@ -7,6 +7,7 @@ import { useSelectedLayoutSegment, usePathname } from "next/navigation";
 import clsx from "clsx";
 import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/solid";
 import { useState } from "react";
+import Theme from "./Theme";
 
 export function GlobalNav() {
   const [isOpen, setIsOpen] = useState(false);
@@ -29,27 +30,34 @@ export function GlobalNav() {
           </h2>
         </Link>
       </div>
-      <button
-        type="button"
-        className="group absolute right-0 top-0 flex h-14 items-center space-x-2 px-4 lg:hidden"
-        onClick={() => setIsOpen(!isOpen)}
-      >
-        <div className="font-medium text-text-light-secondary-500 group-hover:text-text-light-500 dark:text-text-dark-secondary-500 dark:group-hover:text-text-dark-500">
-          Menu
-        </div>
-        {isOpen ? (
-          <XMarkIcon className="block w-6 " />
-        ) : (
-          <Bars3Icon className="block w-6 " />
-        )}
-      </button>
+
+      <div className="absolute right-0 top-0 flex flex-row items-center lg:hidden">
+        <Theme />
+        <button
+          type="button"
+          className="group flex h-14 items-center space-x-2 px-4"
+          onClick={() => setIsOpen(!isOpen)}
+        >
+          <div className="font-medium text-text-light-secondary-500 group-hover:text-text-light-500 dark:text-text-dark-secondary-500 dark:group-hover:text-text-dark-500">
+            Menu
+          </div>
+          {isOpen ? (
+            <XMarkIcon className="block w-6 " />
+          ) : (
+            <Bars3Icon className="block w-6 " />
+          )}
+        </button>
+      </div>
 
       <div
-        className={clsx("overflow-y-auto lg:static lg:block", {
-          "fixed inset-x-0 bottom-0 top-14 mt-px bg-white/80 dark:bg-black/80 backdrop-blur-lg":
-            isOpen,
-          hidden: !isOpen,
-        })}
+        className={clsx(
+          "overflow-y-auto lg:static lg:flex lg:flex-col justify-between h-full",
+          {
+            "fixed inset-x-0 bottom-0 top-14 mt-px bg-white/80 dark:bg-black/80 backdrop-blur-lg":
+              isOpen,
+            hidden: !isOpen,
+          }
+        )}
       >
         <nav
           className={`space-y-6 px-4 py-5 ${
@@ -72,6 +80,10 @@ export function GlobalNav() {
             );
           })}
         </nav>
+
+        <div className="flex flex-row p-4">
+          <Theme />
+        </div>
       </div>
     </div>
   );
diff --git a/apps/login/ui/Theme.tsx b/apps/login/ui/Theme.tsx
index 7f52e2c6284..126d9403ff4 100644
--- a/apps/login/ui/Theme.tsx
+++ b/apps/login/ui/Theme.tsx
@@ -2,6 +2,7 @@
 
 import React, { useEffect, useState } from "react";
 import { useTheme } from "next-themes";
+import { MoonIcon, SunIcon } from "@heroicons/react/24/outline";
 
 function Theme() {
   const { resolvedTheme, setTheme } = useTheme();
@@ -28,7 +29,7 @@ function Theme() {
         }`}
         onClick={() => setTheme("dark")}
       >
-        <i className="flex-shrink-0 text-xl rounded-full las la-moon"></i>
+        <MoonIcon className="h-4 w-4 flex-shrink-0 text-xl rounded-full" />
       </button>
       <button
         className={`h-8 w-8 rounded-full flex flex-row items-center justify-center hover:opacity-100 transition-all ${
@@ -36,7 +37,7 @@ function Theme() {
         }`}
         onClick={() => setTheme("light")}
       >
-        <i className="flex-shrink-0 text-xl rounded-full las la-sun"></i>
+        <SunIcon className="h-6 w-6 flex-shrink-0 text-xl rounded-full" />
       </button>
     </div>
   );