styled userbox page and removed sticky nav

components/(customization)/avatarcustomization/page.tsx

@@ -216,7 +216,17 @@ export const AvatarCustomization: FC<AvatarSelectionProps> = ({
   };
 
   return (
-    <main className="flex">
+    <main className="flex flex-col items-center space-y-6">
+      {/* Avatar Customization Section */}
+      <div className="w-full flex justify-center">
+        <div className="avatar_base">
+          {Object.entries(AvatarTextures).map(([key, { className, src }]) => (
+            <div className={className} key={key}>
+              <img src={src} alt={""} />
+            </div>
+          ))}
+        </div>
+      </div>
       <div>
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
@@ -546,15 +556,6 @@ export const AvatarCustomization: FC<AvatarSelectionProps> = ({
         </Form>
       </div>
       {/* Avatar Customization Section */}
-      <div className="w-1/2 flex flex-col items-center">
-        <div className="avatar_base">
-          {Object.entries(AvatarTextures).map(([key, { className, src }]) => (
-            <div className={className} key={key}>
-              <img src={src} alt={""} />
-            </div>
-          ))}
-        </div>
-      </div>
     </main>
   );
 };

components/(customization)/mapiconcustomization/page.tsx

@@ -104,7 +104,17 @@ export const MapIconCustomization: FC<SystemVoiceSelectionProps> = ({
   };
 
   return (
-    <main className="flex">
+    <main className="flex flex-col items-center space-y-6">
+      {/* Avatar Customization Section */}
+      <div className="w-full flex justify-center">
+        <div className="">
+          {Object.entries(AvatarTextures).map(([key, { src }]) => (
+            <div>
+              <img className="w-[100px]" src={src} alt={""} />
+            </div>
+          ))}
+        </div>
+      </div>
       <Form {...form}>
         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
           <FormField
@@ -173,13 +183,6 @@ export const MapIconCustomization: FC<SystemVoiceSelectionProps> = ({
           </div>
         </form>
       </Form>
-      <div className="w-1/2 flex flex-col items-center">
-        {Object.entries(AvatarTextures).map(([key, { src }]) => (
-          <div className="" key={key}>
-            <img src={src} alt="" className=" w-300 h-32 object-contain" />
-          </div>
-        ))}
-      </div>
     </main>
   );
 };

components/(customization)/nameplatecustomization/page.tsx

@@ -104,7 +104,17 @@ export const NameplateCustomization: FC<AvatarSelectionProps> = ({
   };
 
   return (
-    <main className="flex">
+    <main className="flex flex-col items-center space-y-6">
+      {/* Avatar Customization Section */}
+      <div className="w-full flex justify-center">
+        <div className="">
+          {Object.entries(AvatarTextures).map(([key, { src }]) => (
+            <div>
+              <img className="w-[300px]" src={src} alt={""} />
+            </div>
+          ))}
+        </div>
+      </div>
       <Form {...form}>
         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
           <FormField
@@ -175,13 +185,6 @@ export const NameplateCustomization: FC<AvatarSelectionProps> = ({
           </div>
         </form>
       </Form>
-      <div className="w-1/2 flex flex-col items-center">
-        {Object.entries(AvatarTextures).map(([key, { src }]) => (
-          <div className="" key={key}>
-            <img src={src} alt="" className=" w-300 h-32 object-contain" />
-          </div>
-        ))}
-      </div>
     </main>
   );
 };

components/(customization)/systemvoicecustomization/page.tsx

@@ -107,7 +107,17 @@ export const SystemVoiceCustomization: FC<SystemVoiceSelectionProps> = ({
   };
 
   return (
-    <main className="flex">
+    <main className="flex flex-col items-center space-y-6">
+      {/* Avatar Customization Section */}
+      <div className="w-full flex justify-center">
+        <div className="">
+          {Object.entries(AvatarTextures).map(([key, { src }]) => (
+            <div>
+              <img className="w-[200px]" src={src} alt={""} />
+            </div>
+          ))}
+        </div>
+      </div>
       <Form {...form}>
         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
           <FormField
@@ -178,13 +188,6 @@ export const SystemVoiceCustomization: FC<SystemVoiceSelectionProps> = ({
           </div>
         </form>
       </Form>
-      <div className="w-1/2 flex flex-col items-center">
-        {Object.entries(AvatarTextures).map(([key, { src }]) => (
-          <div className="" key={key}>
-            <img src={src} alt="" className=" w-300 h-32 object-contain" />
-          </div>
-        ))}
-      </div>
     </main>
   );
 };

components/(customization)/trophycustomization/page.tsx

@@ -87,7 +87,9 @@ export const TrophyCustomization: FC<AvatarSelectionProps> = ({
   }
 
   return (
-    <main className="flex">
+    <main className="flex flex-col items-center space-y-6">
+      {/* Avatar Customization Section */}
+
       <div>
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
@@ -105,12 +107,12 @@ export const TrophyCustomization: FC<AvatarSelectionProps> = ({
                           role="combobox"
                           className={cn(
                             "w-[300px] justify-between",
-                            !field.value && "text-muted-foreground"
+                            !field.value && "text-muted-foreground",
                           )}
                         >
                           {field.value
                             ? playerTrophySelectionData.statictrophies.find(
-                                (part) => part.id === field.value
+                                (part) => part.id === field.value,
                               )?.str
                             : "Select Trophy"}
                           <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
@@ -136,12 +138,12 @@ export const TrophyCustomization: FC<AvatarSelectionProps> = ({
                                       "mr-2 h-4 w-4",
                                       part.id === field.value
                                         ? "opacity-100"
-                                        : "opacity-0"
+                                        : "opacity-0",
                                     )}
                                   />
                                   {part.str}
                                 </CommandItem>
-                              )
+                              ),
                             )}
                           </CommandGroup>
                         </CommandList>

components/navigationbar/desktopNavBar.tsx

@@ -2,7 +2,6 @@
 import Link from "next/link";
 
 import { usePathname } from "next/navigation";
-import { ModeToggle } from "../darkmode";
 
 const NAV_ITEMS = [
   { href: "/home", label: "Home" },

components/navigationbar/navigationbar.tsx

@@ -23,7 +23,7 @@ const HeaderNavigation = async () => {
   return (
     <>
       {user && (
-        <header className="sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6">
+        <header className="top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6">
           <NavigationMenuDesktop />
           <Sheet>
             <SheetTrigger asChild>
@@ -81,7 +81,7 @@ const HeaderNavigation = async () => {
                 )}
                 <DropdownMenuSeparator />
                 <form action={signOut}>
-                  <Button className="bg-transparent text-primary hover:bg-transparent pl-2  font-normal">
+                  <Button className="bg-transparent pl-2 font-normal text-primary hover:bg-transparent">
                     Logout
                   </Button>
                 </form>