diff --git a/app/(authenticated)/chunithm/page.tsx b/app/(authenticated)/chunithm/page.tsx
index 2cbfe09..7f9c446 100644
--- a/app/(authenticated)/chunithm/page.tsx
+++ b/app/(authenticated)/chunithm/page.tsx
@@ -1,3 +1,4 @@
+import { AvatarCustomization } from "@/components/avatarcustomization/page";
 import ChunithmScorePlaylog from "@/components/scoreplaylog/page";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
@@ -12,7 +13,11 @@ const ChunithmPage = () => {
         <TabsContent value="scores">
           <ChunithmScorePlaylog />
         </TabsContent>
-        <TabsContent value="customize">Change your password here.</TabsContent>
+        <TabsContent value="customize">
+          <div className="p-10">
+            <AvatarCustomization />
+          </div>
+        </TabsContent>
       </Tabs>
     </div>
   );
diff --git a/components/avatarcustomization/page.tsx b/components/avatarcustomization/page.tsx
new file mode 100644
index 0000000..6996a25
--- /dev/null
+++ b/components/avatarcustomization/page.tsx
@@ -0,0 +1,324 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Check, ChevronsUpDown } from "lucide-react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+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 { 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" },
+] as const;
+
+const FormSchema = z.object({
+  AvatarHead: z.string({
+    required_error: "Please select a head item.",
+  }),
+  AvatarBody: z.string({
+    required_error: "Please select a body item.",
+  }),
+  AvatarFace: z.string({
+    required_error: "Please select a face item.",
+  }),
+  AvatarBack: z.string({
+    required_error: "Please select a back item.",
+  }),
+});
+
+export function AvatarCustomization() {
+  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 (
+    <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>
+  );
+}