diff --git a/app/(authenticated)/chunithm/page.tsx b/app/(authenticated)/chunithm/page.tsx
index 7f9c446..7ba51b0 100644
--- a/app/(authenticated)/chunithm/page.tsx
+++ b/app/(authenticated)/chunithm/page.tsx
@@ -1,8 +1,22 @@
-import { AvatarCustomization } from "@/components/avatarcustomization/page";
-import ChunithmScorePlaylog from "@/components/scoreplaylog/page";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+"use server";
+
+import React from "react";
+import { getAllAvatarParts } from "@/lib/api";
+import { AvatarCustomization } from "@/components/avatarcustomization/page";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import ChunithmScorePlaylog from "@/components/scoreplaylog/page";
+
+const getAvatarParts = async () => {
+  console.log("Executed on the server side");
+
+  const avatarParts = await getAllAvatarParts();
+  return { avatarParts };
+};
+
+const Page = async () => {
+  console.log("Executed on the server side");
+  const avatarPartsData = await getAvatarParts();
 
-const ChunithmPage = () => {
   return (
     <div className="p-10">
       <Tabs defaultValue="scores">
@@ -15,7 +29,7 @@ const ChunithmPage = () => {
         </TabsContent>
         <TabsContent value="customize">
           <div className="p-10">
-            <AvatarCustomization />
+            <AvatarCustomization avatarSelectionData={avatarPartsData} />
           </div>
         </TabsContent>
       </Tabs>
@@ -23,4 +37,4 @@ const ChunithmPage = () => {
   );
 };
 
-export default ChunithmPage;
+export default Page;
diff --git a/components/avatarcustomization/page.tsx b/components/avatarcustomization/page.tsx
index 7e3971e..6ad2222 100644
--- a/components/avatarcustomization/page.tsx
+++ b/components/avatarcustomization/page.tsx
@@ -1,5 +1,424 @@
-import React from "react";
+"use client";
 
-export const AvatarCustomization = () => {
-  return <div>AvatarCustomization</div>;
+import React, { FC, useEffect, useState } from "react";
+import { chuni_static_avatar } from "@/prisma/schemas/artemis/generated/artemis";
+import { Check, ChevronsUpDown } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { z } from "zod";
+type chunithm_avatar = chuni_static_avatar;
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { toast } from "../ui/use-toast";
+
+type AvatarSelectionProps = {
+  avatarSelectionData: {
+    avatarParts: chunithm_avatar[];
+  };
 };
+
+export const AvatarCustomization: FC<AvatarSelectionProps> = ({
+  avatarSelectionData,
+}) => {
+  const FormSchema = z.object({
+    AvatarHeadAccessory: z.number({
+      required_error: "Please select a language.",
+    }),
+    AvatarFaceAccessory: z.number({
+      required_error: "Please select a language.",
+    }),
+    AvatarItemAccessory: z.number({
+      required_error: "Please select a language.",
+    }),
+    AvatarBackAccessory: z.number({
+      required_error: "Please select a language.",
+    }),
+    AvatarWearAccessory: z.number({
+      required_error: "Please select a language.",
+    }),
+  });
+
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+  });
+
+  function onSubmit(data: z.infer<typeof FormSchema>) {
+    toast({
+      title: "You submitted the following values:",
+      description: (
+        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
+        </pre>
+      ),
+    });
+  }
+
+  return (
+    <main>
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+          <FormField
+            control={form.control}
+            name="AvatarHeadAccessory"
+            render={({ field }) => (
+              <FormItem className="flex flex-col">
+                <FormLabel>Avatar Head Item</FormLabel>
+                <Popover>
+                  <PopoverTrigger asChild>
+                    <FormControl>
+                      <Button
+                        variant="outline"
+                        role="combobox"
+                        className={cn(
+                          "w-[300px] justify-between",
+                          !field.value && "text-muted-foreground"
+                        )}
+                      >
+                        {field.value
+                          ? avatarSelectionData.avatarParts.find(
+                              (part) => part.avatarAccessoryId === field.value
+                            )?.name
+                          : "Select Avatar Head Item"}
+                        <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                      </Button>
+                    </FormControl>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-[300px] p-0">
+                    <Command>
+                      {/* bugged  */}
+                      {/* <CommandInput placeholder="Search Avatar Head Parts..." /> */}
+                      <CommandList>
+                        <CommandEmpty>No language found.</CommandEmpty>
+                        <CommandGroup>
+                          {avatarSelectionData.avatarParts.map((part) => (
+                            <CommandItem
+                              value={part.name ?? ""}
+                              key={part.avatarAccessoryId}
+                              onSelect={() => {
+                                form.setValue(
+                                  "AvatarHeadAccessory",
+                                  part.avatarAccessoryId!
+                                );
+                              }}
+                            >
+                              <Check
+                                className={cn(
+                                  "mr-2 h-4 w-4",
+                                  part.avatarAccessoryId === field.value
+                                    ? "opacity-100"
+                                    : "opacity-0"
+                                )}
+                              />
+                              {part.name}
+                            </CommandItem>
+                          ))}
+                        </CommandGroup>
+                      </CommandList>
+                    </Command>
+                  </PopoverContent>
+                </Popover>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="AvatarFaceAccessory"
+            render={({ field }) => (
+              <FormItem className="flex flex-col">
+                <FormLabel>Avatar Face Item</FormLabel>
+                <Popover>
+                  <PopoverTrigger asChild>
+                    <FormControl>
+                      <Button
+                        variant="outline"
+                        role="combobox"
+                        className={cn(
+                          "w-[300px] justify-between",
+                          !field.value && "text-muted-foreground"
+                        )}
+                      >
+                        {field.value
+                          ? avatarSelectionData.avatarParts.find(
+                              (part) => part.avatarAccessoryId === field.value
+                            )?.name
+                          : "Select Avatar Face Item"}
+                        <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                      </Button>
+                    </FormControl>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-[300px] p-0">
+                    <Command>
+                      {/* bugged  */}
+                      {/* <CommandInput placeholder="Search Avatar Head Parts..." /> */}
+                      <CommandList>
+                        <CommandEmpty>No language found.</CommandEmpty>
+                        <CommandGroup>
+                          {avatarSelectionData.avatarParts.map((part) => (
+                            <CommandItem
+                              value={part.name ?? ""}
+                              key={part.avatarAccessoryId}
+                              onSelect={() => {
+                                form.setValue(
+                                  "AvatarFaceAccessory",
+                                  part.avatarAccessoryId!
+                                );
+                              }}
+                            >
+                              <Check
+                                className={cn(
+                                  "mr-2 h-4 w-4",
+                                  part.avatarAccessoryId === field.value
+                                    ? "opacity-100"
+                                    : "opacity-0"
+                                )}
+                              />
+                              {part.name}
+                            </CommandItem>
+                          ))}
+                        </CommandGroup>
+                      </CommandList>
+                    </Command>
+                  </PopoverContent>
+                </Popover>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="AvatarItemAccessory"
+            render={({ field }) => (
+              <FormItem className="flex flex-col">
+                <FormLabel>Avatar Hand Item</FormLabel>
+                <Popover>
+                  <PopoverTrigger asChild>
+                    <FormControl>
+                      <Button
+                        variant="outline"
+                        role="combobox"
+                        className={cn(
+                          "w-[300px] justify-between",
+                          !field.value && "text-muted-foreground"
+                        )}
+                      >
+                        {field.value
+                          ? avatarSelectionData.avatarParts.find(
+                              (part) => part.avatarAccessoryId === field.value
+                            )?.name
+                          : "Select Avatar Head Item"}
+                        <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                      </Button>
+                    </FormControl>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-[300px] p-0">
+                    <Command>
+                      {/* bugged  */}
+                      {/* <CommandInput placeholder="Search Avatar Head Parts..." /> */}
+                      <CommandList>
+                        <CommandEmpty>No language found.</CommandEmpty>
+                        <CommandGroup>
+                          {avatarSelectionData.avatarParts.map((part) => (
+                            <CommandItem
+                              value={part.name ?? ""}
+                              key={part.avatarAccessoryId}
+                              onSelect={() => {
+                                form.setValue(
+                                  "AvatarItemAccessory",
+                                  part.avatarAccessoryId!
+                                );
+                              }}
+                            >
+                              <Check
+                                className={cn(
+                                  "mr-2 h-4 w-4",
+                                  part.avatarAccessoryId === field.value
+                                    ? "opacity-100"
+                                    : "opacity-0"
+                                )}
+                              />
+                              {part.name}
+                            </CommandItem>
+                          ))}
+                        </CommandGroup>
+                      </CommandList>
+                    </Command>
+                  </PopoverContent>
+                </Popover>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="AvatarBackAccessory"
+            render={({ field }) => (
+              <FormItem className="flex flex-col">
+                <FormLabel>Avatar Back Item</FormLabel>
+                <Popover>
+                  <PopoverTrigger asChild>
+                    <FormControl>
+                      <Button
+                        variant="outline"
+                        role="combobox"
+                        className={cn(
+                          "w-[300px] justify-between",
+                          !field.value && "text-muted-foreground"
+                        )}
+                      >
+                        {field.value
+                          ? avatarSelectionData.avatarParts.find(
+                              (part) => part.avatarAccessoryId === field.value
+                            )?.name
+                          : "Select Avatar Back Item"}
+                        <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                      </Button>
+                    </FormControl>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-[300px] p-0">
+                    <Command>
+                      {/* bugged  */}
+                      {/* <CommandInput placeholder="Search Avatar Head Parts..." /> */}
+                      <CommandList>
+                        <CommandEmpty>No language found.</CommandEmpty>
+                        <CommandGroup>
+                          {avatarSelectionData.avatarParts.map((part) => (
+                            <CommandItem
+                              value={part.name ?? ""}
+                              key={part.avatarAccessoryId}
+                              onSelect={() => {
+                                form.setValue(
+                                  "AvatarBackAccessory",
+                                  part.avatarAccessoryId!
+                                );
+                              }}
+                            >
+                              <Check
+                                className={cn(
+                                  "mr-2 h-4 w-4",
+                                  part.avatarAccessoryId === field.value
+                                    ? "opacity-100"
+                                    : "opacity-0"
+                                )}
+                              />
+                              {part.name}
+                            </CommandItem>
+                          ))}
+                        </CommandGroup>
+                      </CommandList>
+                    </Command>
+                  </PopoverContent>
+                </Popover>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="AvatarWearAccessory"
+            render={({ field }) => (
+              <FormItem className="flex flex-col">
+                <FormLabel>Avatar Body Item</FormLabel>
+                <Popover>
+                  <PopoverTrigger asChild>
+                    <FormControl>
+                      <Button
+                        variant="outline"
+                        role="combobox"
+                        className={cn(
+                          "w-[300px] justify-between",
+                          !field.value && "text-muted-foreground"
+                        )}
+                      >
+                        {field.value
+                          ? avatarSelectionData.avatarParts.find(
+                              (part) => part.avatarAccessoryId === field.value
+                            )?.name
+                          : "Select Avatar Body Item"}
+                        <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                      </Button>
+                    </FormControl>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-[300px] p-0">
+                    <Command>
+                      {/* bugged  */}
+                      {/* <CommandInput placeholder="Search Avatar Head Parts..." /> */}
+                      <CommandList>
+                        <CommandEmpty>No language found.</CommandEmpty>
+                        <CommandGroup>
+                          {avatarSelectionData.avatarParts.map((part) => (
+                            <CommandItem
+                              value={part.name ?? ""}
+                              key={part.avatarAccessoryId}
+                              onSelect={() => {
+                                form.setValue(
+                                  "AvatarWearAccessory",
+                                  part.avatarAccessoryId!
+                                );
+                              }}
+                            >
+                              <Check
+                                className={cn(
+                                  "mr-2 h-4 w-4",
+                                  part.avatarAccessoryId === field.value
+                                    ? "opacity-100"
+                                    : "opacity-0"
+                                )}
+                              />
+                              {part.name}
+                            </CommandItem>
+                          ))}
+                        </CommandGroup>
+                      </CommandList>
+                    </Command>
+                  </PopoverContent>
+                </Popover>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <Button type="submit">Submit</Button>
+        </form>
+      </Form>
+    </main>
+  );
+};
+
+{
+  /* <div>State is: {state}</div>
+      <div>Server data:</div>
+      <div></div>
+      <ul>
+        {avatarSelectionData.avatarParts.map((part) => (
+          <li key={part.avatarAccessoryId}>{part.name}</li>
+        ))}
+      </ul> */
+}
diff --git a/lib/api.ts b/lib/api.ts
index ac9ee9b..a8f5153 100644
--- a/lib/api.ts
+++ b/lib/api.ts
@@ -181,7 +181,7 @@ export async function getAllAimeCards() {
 }
 
 
-export async function getAvatarPart() {
+export async function getAllAvatarParts() {
   const { user } = await getAuth();
 
   if (!user || !user.accessCode) {
@@ -193,6 +193,7 @@ export async function getAvatarPart() {
       category: 1
         },
         select: {
+          id: true,
           name: true,
           avatarAccessoryId: true, 
           category: true,