diff --git a/components/avatarcustomization/avatar.ts b/components/avatarcustomization/avatar.ts
new file mode 100644
index 0000000..e69de29
diff --git a/components/avatarcustomization/page.tsx b/components/avatarcustomization/page.tsx
index 6996a25..490e336 100644
--- a/components/avatarcustomization/page.tsx
+++ b/components/avatarcustomization/page.tsx
@@ -32,15 +32,10 @@ import {
 import { toast } from "@/components/ui/use-toast";
 
 const AvatarParts = [
-  { label: "English", value: "en" },
-  { label: "French", value: "fr" },
-  { label: "German", value: "de" },
-  { label: "Spanish", value: "es" },
-  { label: "Portuguese", value: "pt" },
-  { label: "Russian", value: "ru" },
-  { label: "Japanese", value: "ja" },
-  { label: "Korean", value: "ko" },
-  { label: "Chinese", value: "zh" },
+  { label: "Head", value: "avatarHead", src: "/path/to/head.png" },
+  { label: "Body", value: "avatarBody", src: "/path/to/body.png" },
+  { label: "Face", value: "avatarFace", src: "/path/to/face.png" },
+  { label: "Back", value: "avatarBack", src: "/path/to/back.png" },
 ] as const;
 
 const FormSchema = z.object({
@@ -75,250 +70,95 @@ export function AvatarCustomization() {
   }
 
   return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6 ">
-        <FormField
-          control={form.control}
-          name="AvatarHead"
-          render={({ field }) => (
-            <FormItem className="flex flex-col">
-              <FormLabel>Avatar Head Item</FormLabel>
-              <Popover>
-                <PopoverTrigger asChild>
-                  <FormControl>
-                    <Button
-                      variant="outline"
-                      role="combobox"
-                      className={cn(
-                        "w-[200px] justify-between",
-                        !field.value && "text-muted-foreground"
-                      )}
-                    >
-                      {field.value
-                        ? AvatarParts.find((part) => part.value === field.value)
-                            ?.label
-                        : "Select head item"}
-                      <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                    </Button>
-                  </FormControl>
-                </PopoverTrigger>
-                <PopoverContent className="w-[200px] p-0">
-                  <Command>
-                    <CommandInput placeholder="Search head item..." />
-                    <CommandList>
-                      <CommandEmpty>No head item found.</CommandEmpty>
-                      <CommandGroup>
-                        {AvatarParts.map((part) => (
-                          <CommandItem
-                            value={part.label}
-                            key={part.value}
-                            onSelect={() => {
-                              form.setValue("AvatarHead", part.value);
-                            }}
-                          >
-                            <Check
-                              className={cn(
-                                "mr-2 h-4 w-4",
-                                part.value === field.value
-                                  ? "opacity-100"
-                                  : "opacity-0"
-                              )}
-                            />
-                            {part.label}
-                          </CommandItem>
-                        ))}
-                      </CommandGroup>
-                    </CommandList>
-                  </Command>
-                </PopoverContent>
-              </Popover>
-
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name="AvatarBody"
-          render={({ field }) => (
-            <FormItem className="flex flex-col">
-              <FormLabel>Avatar Body Item</FormLabel>
-              <Popover>
-                <PopoverTrigger asChild>
-                  <FormControl>
-                    <Button
-                      variant="outline"
-                      role="combobox"
-                      className={cn(
-                        "w-[200px] justify-between",
-                        !field.value && "text-muted-foreground"
-                      )}
-                    >
-                      {field.value
-                        ? AvatarParts.find((part) => part.value === field.value)
-                            ?.label
-                        : "Select body item"}
-                      <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                    </Button>
-                  </FormControl>
-                </PopoverTrigger>
-                <PopoverContent className="w-[200px] p-0">
-                  <Command>
-                    <CommandInput placeholder="Search body item..." />
-                    <CommandList>
-                      <CommandEmpty>No body item found.</CommandEmpty>
-                      <CommandGroup>
-                        {AvatarParts.map((part) => (
-                          <CommandItem
-                            value={part.label}
-                            key={part.value}
-                            onSelect={() => {
-                              form.setValue("AvatarBody", part.value);
-                            }}
-                          >
-                            <Check
-                              className={cn(
-                                "mr-2 h-4 w-4",
-                                part.value === field.value
-                                  ? "opacity-100"
-                                  : "opacity-0"
-                              )}
-                            />
-                            {part.label}
-                          </CommandItem>
-                        ))}
-                      </CommandGroup>
-                    </CommandList>
-                  </Command>
-                </PopoverContent>
-              </Popover>
-
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name="AvatarFace"
-          render={({ field }) => (
-            <FormItem className="flex flex-col">
-              <FormLabel>Avatar Face Item</FormLabel>
-              <Popover>
-                <PopoverTrigger asChild>
-                  <FormControl>
-                    <Button
-                      variant="outline"
-                      role="combobox"
-                      className={cn(
-                        "w-[200px] justify-between",
-                        !field.value && "text-muted-foreground"
-                      )}
-                    >
-                      {field.value
-                        ? AvatarParts.find((part) => part.value === field.value)
-                            ?.label
-                        : "Select face item"}
-                      <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                    </Button>
-                  </FormControl>
-                </PopoverTrigger>
-                <PopoverContent className="w-[200px] p-0">
-                  <Command>
-                    <CommandInput placeholder="Search face item..." />
-                    <CommandList>
-                      <CommandEmpty>No face item found.</CommandEmpty>
-                      <CommandGroup>
-                        {AvatarParts.map((part) => (
-                          <CommandItem
-                            value={part.label}
-                            key={part.value}
-                            onSelect={() => {
-                              form.setValue("AvatarFace", part.value);
-                            }}
-                          >
-                            <Check
-                              className={cn(
-                                "mr-2 h-4 w-4",
-                                part.value === field.value
-                                  ? "opacity-100"
-                                  : "opacity-0"
-                              )}
-                            />
-                            {part.label}
-                          </CommandItem>
-                        ))}
-                      </CommandGroup>
-                    </CommandList>
-                  </Command>
-                </PopoverContent>
-              </Popover>
-
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name="AvatarBack"
-          render={({ field }) => (
-            <FormItem className="flex flex-col">
-              <FormLabel>Avatar Back Item</FormLabel>
-              <Popover>
-                <PopoverTrigger asChild>
-                  <FormControl>
-                    <Button
-                      variant="outline"
-                      role="combobox"
-                      className={cn(
-                        "w-[200px] justify-between",
-                        !field.value && "text-muted-foreground"
-                      )}
-                    >
-                      {field.value
-                        ? AvatarParts.find((part) => part.value === field.value)
-                            ?.label
-                        : "Select back item"}
-                      <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                    </Button>
-                  </FormControl>
-                </PopoverTrigger>
-                <PopoverContent className="w-[200px] p-0">
-                  <Command>
-                    <CommandInput placeholder="Search back item..." />
-                    <CommandList>
-                      <CommandEmpty>No back item found.</CommandEmpty>
-                      <CommandGroup>
-                        {AvatarParts.map((part) => (
-                          <CommandItem
-                            value={part.label}
-                            key={part.value}
-                            onSelect={() => {
-                              form.setValue("AvatarBack", part.value);
-                            }}
-                          >
-                            <Check
-                              className={cn(
-                                "mr-2 h-4 w-4",
-                                part.value === field.value
-                                  ? "opacity-100"
-                                  : "opacity-0"
-                              )}
-                            />
-                            {part.label}
-                          </CommandItem>
-                        ))}
-                      </CommandGroup>
-                    </CommandList>
-                  </Command>
-                </PopoverContent>
-              </Popover>
-
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <Button type="submit">Submit</Button>
-      </form>
-    </Form>
+    <div className="bg-red-500 rounded-sm mx-auto">
+      <div className="flex flex-col md:flex-row justify-center items-center">
+        <div className="avatar_group w-full md:w-1/2 flex justify-center items-center">
+          <div className="avatar_base">
+            {AvatarParts.map(({ value, src }) => (
+              <div className={value} key={value}>
+                <img src={src} alt={value} />
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+          {AvatarParts.map((part) => (
+            <FormField
+              key={part.value}
+              control={form.control}
+              name={part.value as keyof z.infer<typeof FormSchema>}
+              render={({ field }) => (
+                <FormItem className="flex flex-col">
+                  <FormLabel>{`Avatar ${part.label} Item`}</FormLabel>
+                  <Popover>
+                    <PopoverTrigger asChild>
+                      <FormControl>
+                        <Button
+                          variant="outline"
+                          role="combobox"
+                          className={cn(
+                            "w-[200px] justify-between",
+                            !field.value && "text-muted-foreground"
+                          )}
+                        >
+                          {field.value
+                            ? AvatarParts.find(
+                                (item) => item.value === field.value
+                              )?.label
+                            : `Select ${part.label.toLowerCase()} item`}
+                          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                        </Button>
+                      </FormControl>
+                    </PopoverTrigger>
+                    <PopoverContent className="w-[200px] p-0">
+                      <Command>
+                        <CommandInput
+                          placeholder={`Search ${part.label.toLowerCase()} item...`}
+                        />
+                        <CommandList>
+                          <CommandEmpty>
+                            No {part.label.toLowerCase()} item found.
+                          </CommandEmpty>
+                          <CommandGroup>
+                            {AvatarParts.map((item) => (
+                              <CommandItem
+                                value={item.value}
+                                key={item.value}
+                                onSelect={() => {
+                                  form.setValue(
+                                    part.value as keyof z.infer<
+                                      typeof FormSchema
+                                    >,
+                                    item.value
+                                  );
+                                }}
+                              >
+                                <Check
+                                  className={cn(
+                                    "mr-2 h-4 w-4",
+                                    item.value === field.value
+                                      ? "opacity-100"
+                                      : "opacity-0"
+                                  )}
+                                />
+                                {item.label}
+                              </CommandItem>
+                            ))}
+                          </CommandGroup>
+                        </CommandList>
+                      </Command>
+                    </PopoverContent>
+                  </Popover>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          ))}
+          <Button type="submit">Submit</Button>
+        </form>
+      </Form>
+    </div>
   );
 }
diff --git a/components/scoreplaylog/colums.tsx b/components/scoreplaylog/colums.tsx
index fa23424..f05e7fe 100644
--- a/components/scoreplaylog/colums.tsx
+++ b/components/scoreplaylog/colums.tsx
@@ -34,10 +34,9 @@ export const columns: ColumnDef<chunithm>[] = [
       const [isLoading, setIsLoading] = useState(true);
       return (
         <div className="font-medium w-[300px] truncate flex items-center">
-          {isLoading || !jacketPath ? (
+          {!jacketPath ? (
             <Skeleton className="w-8 h-8 inline-block mr-2" />
           ) : (
-            // eslint-disable-next-line @next/next/no-img-element
             <img
               src={`/jacketArt/${jacketPath}`}
               alt="Jacket"
diff --git a/lib/api.ts b/lib/api.ts
index 6b307d5..7077690 100644
--- a/lib/api.ts
+++ b/lib/api.ts
@@ -180,6 +180,31 @@ export async function getAllAimeCards() {
   return aimeUser;
 }
 
+
+
+export async function getAvatarParts(avatarAccessoryId: number) {
+  const { user } = await getAuth();
+
+  if (!user || !user.accessCode) {
+    throw new Error("User is not authenticated or accessCode is missing");
+  }
+
+  const avatarParts = await artemis.chuni_static_avatar.findMany({
+    where: {
+      avatarAccessoryId: avatarAccessoryId,
+        },
+        select: {
+          name: true,
+          category: true, 
+          version: true, 
+          iconPath: true, 
+          texturePath: true,
+        }
+  });
+  return avatarParts;
+}
+
+
 export async function verifyAimeCodeAgainstArtemis() {
   const { user } = await getAuth();