diff --git a/app/(authenticated)/chunithm/page.tsx b/app/(authenticated)/chunithm/page.tsx
index 7ba51b0..c2bea48 100644
--- a/app/(authenticated)/chunithm/page.tsx
+++ b/app/(authenticated)/chunithm/page.tsx
@@ -1,4 +1,5 @@
 "use server";
+//https://github.com/vercel/next.js/discussions/63862
 
 import React from "react";
 import { getAllAvatarParts } from "@/lib/api";
@@ -6,16 +7,37 @@ 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");
+// the number is the category id for the specific part
 
-  const avatarParts = await getAllAvatarParts();
+const getAvatarHeadAccessories = async () => {
+  const avatarParts = await getAllAvatarParts(2);
+  return { avatarParts };
+};
+
+const getAvatarFaceAccessories = async () => {
+  const avatarParts = await getAllAvatarParts(3);
+  return { avatarParts };
+};
+
+const getAvatarItemAccessories = async () => {
+  const avatarParts = await getAllAvatarParts(5);
+  return { avatarParts };
+};
+const getAvatarBackAccessories = async () => {
+  const avatarParts = await getAllAvatarParts(7);
+  return { avatarParts };
+};
+const getAvatarWearAccessories = async () => {
+  const avatarParts = await getAllAvatarParts(1);
   return { avatarParts };
 };
 
 const Page = async () => {
-  console.log("Executed on the server side");
-  const avatarPartsData = await getAvatarParts();
+  const AvatarHeadAccessories = await getAvatarHeadAccessories();
+  const AvatarFaceAccessories = await getAvatarFaceAccessories();
+  const AvatarItemAccessories = await getAvatarItemAccessories();
+  const AvatarBackAccessories = await getAvatarBackAccessories();
+  const AvatarWearAccessories = await getAvatarWearAccessories();
 
   return (
     <div className="p-10">
@@ -29,7 +51,13 @@ const Page = async () => {
         </TabsContent>
         <TabsContent value="customize">
           <div className="p-10">
-            <AvatarCustomization avatarSelectionData={avatarPartsData} />
+            <AvatarCustomization
+              avatarHeadSelectionData={AvatarHeadAccessories}
+              avatarFaceSelectionData={AvatarFaceAccessories}
+              avatarItemSelectionData={AvatarItemAccessories}
+              avatarBackSelectionData={AvatarBackAccessories}
+              avatarWearSelectionData={AvatarWearAccessories}
+            />
           </div>
         </TabsContent>
       </Tabs>
diff --git a/components/avatarcustomization/page.tsx b/components/avatarcustomization/page.tsx
index 6ad2222..01bae59 100644
--- a/components/avatarcustomization/page.tsx
+++ b/components/avatarcustomization/page.tsx
@@ -35,13 +35,30 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { toast } from "../ui/use-toast";
 
 type AvatarSelectionProps = {
-  avatarSelectionData: {
+  avatarHeadSelectionData: {
+    avatarParts: chunithm_avatar[];
+  };
+
+  avatarFaceSelectionData: {
+    avatarParts: chunithm_avatar[];
+  };
+  avatarItemSelectionData: {
+    avatarParts: chunithm_avatar[];
+  };
+  avatarBackSelectionData: {
+    avatarParts: chunithm_avatar[];
+  };
+  avatarWearSelectionData: {
     avatarParts: chunithm_avatar[];
   };
 };
 
 export const AvatarCustomization: FC<AvatarSelectionProps> = ({
-  avatarSelectionData,
+  avatarHeadSelectionData,
+  avatarFaceSelectionData,
+  avatarItemSelectionData,
+  avatarBackSelectionData,
+  avatarWearSelectionData,
 }) => {
   const FormSchema = z.object({
     AvatarHeadAccessory: z.number({
@@ -98,7 +115,7 @@ export const AvatarCustomization: FC<AvatarSelectionProps> = ({
                         )}
                       >
                         {field.value
-                          ? avatarSelectionData.avatarParts.find(
+                          ? avatarHeadSelectionData.avatarParts.find(
                               (part) => part.avatarAccessoryId === field.value
                             )?.name
                           : "Select Avatar Head Item"}
@@ -111,9 +128,9 @@ export const AvatarCustomization: FC<AvatarSelectionProps> = ({
                       {/* bugged  */}
                       {/* <CommandInput placeholder="Search Avatar Head Parts..." /> */}
                       <CommandList>
-                        <CommandEmpty>No language found.</CommandEmpty>
+                        <CommandEmpty>No avatar part found.</CommandEmpty>
                         <CommandGroup>
-                          {avatarSelectionData.avatarParts.map((part) => (
+                          {avatarHeadSelectionData.avatarParts.map((part) => (
                             <CommandItem
                               value={part.name ?? ""}
                               key={part.avatarAccessoryId}
@@ -163,7 +180,7 @@ export const AvatarCustomization: FC<AvatarSelectionProps> = ({
                         )}
                       >
                         {field.value
-                          ? avatarSelectionData.avatarParts.find(
+                          ? avatarFaceSelectionData.avatarParts.find(
                               (part) => part.avatarAccessoryId === field.value
                             )?.name
                           : "Select Avatar Face Item"}
@@ -178,7 +195,7 @@ export const AvatarCustomization: FC<AvatarSelectionProps> = ({
                       <CommandList>
                         <CommandEmpty>No language found.</CommandEmpty>
                         <CommandGroup>
-                          {avatarSelectionData.avatarParts.map((part) => (
+                          {avatarFaceSelectionData.avatarParts.map((part) => (
                             <CommandItem
                               value={part.name ?? ""}
                               key={part.avatarAccessoryId}
@@ -228,7 +245,7 @@ export const AvatarCustomization: FC<AvatarSelectionProps> = ({
                         )}
                       >
                         {field.value
-                          ? avatarSelectionData.avatarParts.find(
+                          ? avatarItemSelectionData.avatarParts.find(
                               (part) => part.avatarAccessoryId === field.value
                             )?.name
                           : "Select Avatar Head Item"}
@@ -241,9 +258,9 @@ export const AvatarCustomization: FC<AvatarSelectionProps> = ({
                       {/* bugged  */}
                       {/* <CommandInput placeholder="Search Avatar Head Parts..." /> */}
                       <CommandList>
-                        <CommandEmpty>No language found.</CommandEmpty>
+                        <CommandEmpty>No avatar part found.</CommandEmpty>
                         <CommandGroup>
-                          {avatarSelectionData.avatarParts.map((part) => (
+                          {avatarItemSelectionData.avatarParts.map((part) => (
                             <CommandItem
                               value={part.name ?? ""}
                               key={part.avatarAccessoryId}
@@ -293,7 +310,7 @@ export const AvatarCustomization: FC<AvatarSelectionProps> = ({
                         )}
                       >
                         {field.value
-                          ? avatarSelectionData.avatarParts.find(
+                          ? avatarBackSelectionData.avatarParts.find(
                               (part) => part.avatarAccessoryId === field.value
                             )?.name
                           : "Select Avatar Back Item"}
@@ -306,9 +323,9 @@ export const AvatarCustomization: FC<AvatarSelectionProps> = ({
                       {/* bugged  */}
                       {/* <CommandInput placeholder="Search Avatar Head Parts..." /> */}
                       <CommandList>
-                        <CommandEmpty>No language found.</CommandEmpty>
+                        <CommandEmpty>No avatar part found.</CommandEmpty>
                         <CommandGroup>
-                          {avatarSelectionData.avatarParts.map((part) => (
+                          {avatarBackSelectionData.avatarParts.map((part) => (
                             <CommandItem
                               value={part.name ?? ""}
                               key={part.avatarAccessoryId}
@@ -358,7 +375,7 @@ export const AvatarCustomization: FC<AvatarSelectionProps> = ({
                         )}
                       >
                         {field.value
-                          ? avatarSelectionData.avatarParts.find(
+                          ? avatarWearSelectionData.avatarParts.find(
                               (part) => part.avatarAccessoryId === field.value
                             )?.name
                           : "Select Avatar Body Item"}
@@ -371,9 +388,9 @@ export const AvatarCustomization: FC<AvatarSelectionProps> = ({
                       {/* bugged  */}
                       {/* <CommandInput placeholder="Search Avatar Head Parts..." /> */}
                       <CommandList>
-                        <CommandEmpty>No language found.</CommandEmpty>
+                        <CommandEmpty>No avatar part found.</CommandEmpty>
                         <CommandGroup>
-                          {avatarSelectionData.avatarParts.map((part) => (
+                          {avatarWearSelectionData.avatarParts.map((part) => (
                             <CommandItem
                               value={part.name ?? ""}
                               key={part.avatarAccessoryId}
diff --git a/lib/api.ts b/lib/api.ts
index a8f5153..ad35d1d 100644
--- a/lib/api.ts
+++ b/lib/api.ts
@@ -181,7 +181,7 @@ export async function getAllAimeCards() {
 }
 
 
-export async function getAllAvatarParts() {
+export async function getAllAvatarParts(category: number) {
   const { user } = await getAuth();
 
   if (!user || !user.accessCode) {
@@ -190,7 +190,7 @@ export async function getAllAvatarParts() {
 
   const avatarParts = await artemis.chuni_static_avatar.findMany({
     where: {
-      category: 1
+      category: category
         },
         select: {
           id: true,