possible ui fix

app/(auth)/signup/page.tsx

+import { Icons } from '@/components/icons'
 import { GameUnityLogo } from '@/components/logo'
 import { buttonVariants } from '@/components/ui/button'
 import { UserAuthForm } from '@/components/user-auth-form'
@@ -12,6 +13,18 @@ export const metadata = {
 export default function SignupPage() {
     return (
         <div className="container grid h-screen w-screen flex-col items-center justify-center lg:max-w-none lg:grid-cols-2 lg:px-0">
+            <Link
+                href="/"
+                className={cn(
+                    buttonVariants({ variant: "ghost" }),
+                    "absolute left-4 top-4 md:left-8 md:top-8"
+                )}
+            >
+                <>
+                    <Icons.chevronLeft />
+                    Back
+                </>
+            </Link>
             <Link
                 href="/login"
                 className={cn(

app/globals.css

@@ -51,16 +51,16 @@
 
   /* Same for Dark-Mode */
   .dark {
-    --background: 224 71% 4%;
+    --background: 0 0% 0%;
     --foreground: 213 31% 91%;
 
     --muted: 223 47% 11%;
     --muted-foreground: 215.4 16.3% 56.9%;
 
-    --popover: 224 71% 4%;
+    --popover: 0 0% 0%;
     --popover-foreground: 215 20.2% 65.1%;
 
-    --card: 224 71% 4%;
+    --card: 0 0% 0%;
     --card-foreground: 213 31% 91%;
 
     --border: 216 34% 17%;

components/nav-header.tsx

@@ -21,23 +21,24 @@ export const Header = ({ user }: { user: User | undefined }) => {
 
                 <SearchInput className="p-3 w-3/6 2xl:w-2/6" />
 
-                {user &&
-                    <div className="hidden md:block">
-                        <UserAccountDropdown
-                            user={{
-                                name: user.name,
-                                image: user.image,
-                                username: user.username,
-                            }}
-                        />
-                    </div>
-                }
+                <div className="w-12">
+                    {user &&
+                        <div className="hidden md:block">
+                            <UserAccountDropdown
+                                user={{
+                                    name: user.name,
+                                    image: user.image,
+                                    username: user.username,
+                                }}
+                            />
+                        </div>
+                    }
 
-                <div className="md:hidden">
-                    <MobileSheet user={user} />
+                    <div className="md:hidden">
+                        <MobileSheet user={user} />
+                    </div>
                 </div>
             </div>
-
         </header>
     )
 }
\ No newline at end of file

components/nav-mobile-sheet.tsx

@@ -24,7 +24,7 @@ export const MobileSheet = ({ user }: { user: User | undefined }) => {
     return (
         <Sheet>
             <SheetTrigger asChild>
-                <div className={cn(buttonVariants({ variant: "ghost", size: "logo" }), "w-12 cursor-pointer")}>
+                <div className={cn(buttonVariants({ variant: "ghost", size: "logo" }), "cursor-pointer")}>
                     {user ?
                         <UserAvatar
                             user={{ username: user.username ?? null, image: user.image ?? null }}

components/profile/components/edit-profile-modal.tsx

@@ -23,7 +23,7 @@ import { checkURL } from "@/lib/utils"
 import { zodResolver } from "@hookform/resolvers/zod"
 import Image from "next/image"
 import { useRouter } from "next/navigation"
-import { use, useEffect, useRef, useState } from "react"
+import { useEffect, useRef, useState } from "react"
 import { useForm } from "react-hook-form"
 import { z } from "zod"
 import { useUpdateProfile } from "../hooks/use-update-profile"

components/user-nav.tsx

@@ -24,7 +24,7 @@ export function UserAccountDropdown({ user }: UserAccountNavProps) {
     return (
         <DropdownMenu>
             <DropdownMenuTrigger>
-                <div className={cn(buttonVariants({ variant: "ghost", size: "logo" }), "w-12")}>
+                <div className={cn(buttonVariants({ variant: "ghost", size: "logo" }))}>
                     <UserAvatar
                         user={{ username: user.username ? user.username : "", image: user.image || null }}
                         className="h-8 w-8 shadow-none focus:shadow-none"