diff --git a/app/(authenticated)/chunithm/page.tsx b/app/(authenticated)/chunithm/page.tsx
index 7af267d..81a94dc 100644
--- a/app/(authenticated)/chunithm/page.tsx
+++ b/app/(authenticated)/chunithm/page.tsx
@@ -1,9 +1,19 @@
 import ChunithmScorePlaylog from "@/components/scoreplaylog/page";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 const ChunithmPage = () => {
   return (
     <div className="p-10">
-      <ChunithmScorePlaylog />
+      <Tabs defaultValue="account">
+        <TabsList>
+          <TabsTrigger value="scores">Scores</TabsTrigger>
+          <TabsTrigger value="customize">Customize</TabsTrigger>
+        </TabsList>
+        <TabsContent value="scores">
+          <ChunithmScorePlaylog />
+        </TabsContent>
+        <TabsContent value="customize">Change your password here.</TabsContent>
+      </Tabs>
     </div>
   );
 };
diff --git a/app/globals.css b/app/globals.css
index 18afb7a..fe889b7 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -75,3 +75,271 @@
     }
   }
 
+
+  g,
+video {
+  max-width: revert;
+  height: revert;
+}
+
+.rainbow-text {
+  background: linear-gradient(
+    to left,
+    violet,
+    indigo,
+    blue,
+    green,
+    yellow,
+    orange,
+    red
+  );
+  -webkit-background-clip: text;
+  color: transparent;
+  background-clip: text;
+  color: transparent;
+}
+
+/*
+* CHUSAN AVATAR
+*/
+
+.avatar_group {
+  width: 420px;
+  height: 330px;
+  margin: 0px auto 0px auto;
+  /* background-color: red; */
+  position: relative;
+}
+
+/* Mobile Styles */
+@media screen and (max-width: 480px) {
+  .avatar_group {
+    width: 100%; /* Adjust width for mobile */
+    height: auto; /* Adjust height as needed */
+    /* You can also adjust other properties as needed */
+  }
+}
+/* アバター土台 */
+.avatar_base {
+  width: 272px;
+  height: 330px;
+  padding: 10px 0 0 0;
+  position: relative;
+  margin: 0px auto 0px auto;
+  overflow: hidden;
+}
+
+/* 背景 */
+.avatar_back {
+  display: block;
+  width: 272px;
+  height: 330px;
+  position: absolute;
+  top: 25px;
+  z-index: 100;
+}
+
+/* 右足 */
+.avatar_skinfoot_r {
+  display: block;
+  width: 42px;
+  height: 52px;
+  position: absolute;
+  overflow: hidden;
+  z-index: 101;
+  top: 280px;
+  left: 84px;
+}
+.avatar_skinfoot_r img {
+  transform: translate(0px, -204px);
+}
+
+/* 左足 */
+.avatar_skinfoot_l {
+  display: block;
+  width: 42px;
+  height: 52px;
+  position: absolute;
+  overflow: hidden;
+  z-index: 102;
+  top: 280px;
+  left: 147px;
+}
+.avatar_skinfoot_l img {
+  transform: translate(-42px, -204px);
+}
+
+/* デフォルト髪の毛 */
+.avatar_hair {
+  display: block;
+  width: 46px;
+  height: 78px;
+  position: absolute;
+  overflow: hidden;
+  z-index: 103;
+  top: 21px;
+  left: 110px;
+}
+.avatar_hair img {
+  transform: translate(0px, 0px);
+}
+
+/* 体色 */
+.avatar_skin {
+  display: block;
+  width: 128px;
+  height: 204px;
+  position: absolute;
+  overflow: hidden;
+  z-index: 104;
+  top: 93px;
+  left: 72px;
+}
+.avatar_skin img {
+  transform: translate(0px, 0px);
+}
+
+/* 衣装 */
+.avatar_wear {
+  display: block;
+  width: 258px;
+  height: 218px;
+  position: absolute;
+  overflow: hidden;
+  z-index: 105;
+  top: 106px;
+  left: 7px;
+}
+
+.avatar_wear img {
+  transform: translate(0px, 0px);
+}
+
+/* 表情 */
+.avatar_face {
+  display: block;
+  width: 58px;
+  height: 64px;
+  position: absolute;
+  overflow: hidden;
+  z-index: 106;
+  top: 100px;
+  left: 107px;
+}
+
+.avatar_face img {
+  transform: translate(0px, 0px);
+}
+
+/* 表情 */
+.avatar_face_static {
+  display: block;
+  width: 58px;
+  height: 64px;
+  position: absolute;
+  overflow: hidden;
+  z-index: 106;
+  top: 100px;
+  left: 107px;
+}
+
+.avatar_face img {
+  transform: translate(0px, 0px);
+}
+/* フェイスカバー */
+.avatar_face {
+  display: block;
+  width: 116px;
+  height: 104px;
+  position: absolute;
+  overflow: hidden;
+  z-index: 107;
+  top: 96px;
+  left: 78px;
+}
+
+.avatar_faceCover img {
+  transform: translate(0px, 0px);
+}
+
+/* 頭 */
+.avatar_head {
+  display: block;
+  width: 200px;
+  height: 150px;
+  position: absolute;
+  overflow: hidden;
+  z-index: 108;
+  top: 28px;
+  left: 37px;
+}
+
+.avatar_head img {
+  transform: translate(0px, 0px);
+}
+
+/* 右手 */
+.avatar_hand_r {
+  display: block;
+  width: 36px;
+  height: 72px;
+  position: absolute;
+  overflow: hidden;
+  z-index: 108;
+  top: 178px;
+  left: 52px;
+}
+
+.avatar_hand_r img {
+  transform: translate(0px, 0px);
+}
+
+/* 左手 */
+.avatar_hand_l {
+  display: block;
+  width: 36px;
+  height: 72px;
+  position: absolute;
+  overflow: hidden;
+  z-index: 109;
+  top: 178px;
+  left: 184px;
+}
+
+.avatar_hand_l img {
+  transform: translate(0px, 0px);
+}
+
+/* 右アイテム */
+.avatar_item_r {
+  display: block;
+  width: 100px;
+  height: 272px;
+  position: absolute;
+  overflow: hidden;
+  z-index: 109;
+  transform: rotate(-5deg);
+  top: 50px;
+  left: 9px;
+}
+
+.avatar_item_r img {
+  transform: translate(0px, 0px);
+}
+
+/* 左アイテム */
+.avatar_item_l {
+  display: block;
+  width: 100px;
+  height: 272px;
+  position: absolute;
+  overflow: hidden;
+  z-index: 110;
+  transform: rotate(5deg);
+  top: 50px;
+  left: 163px;
+}
+
+.avatar_item_l img {
+  transform: translate(-100px, 0px);
+}
diff --git a/bun.lockb b/bun.lockb
index 9cebbf6..725f4a6 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/components/scoreplaylog/colums.tsx b/components/scoreplaylog/colums.tsx
index b5c9e9b..3caad4d 100644
--- a/components/scoreplaylog/colums.tsx
+++ b/components/scoreplaylog/colums.tsx
@@ -19,6 +19,7 @@ import { ArrowUpDown, MoreHorizontalIcon } from "lucide-react";
 import { chuni_score_playlog } from "@/prisma/schemas/artemis/generated/artemis";
 import { chuni_static_music } from "@/prisma/schemas/artemis/generated/artemis";
 import { getGrade } from "@/lib/helpers";
+import { Skeleton } from "../ui/skeleton";
 
 type chunithm = chuni_score_playlog &
   chuni_static_music & { playCount: number };
@@ -30,9 +31,12 @@ export const columns: ColumnDef<chunithm>[] = [
 
     cell: ({ row }) => {
       const jacketPath = row.original.jacketPath?.replace(".dds", ".png");
+      const [isLoading, setIsLoading] = useState(true);
       return (
-        <div className="font-medium w-[200px] truncate">
-          {jacketPath && (
+        <div className="font-medium w-[300px] truncate">
+          {isLoading || !jacketPath ? (
+            <Skeleton className="w-8 h-8 inline-block mr-2" />
+          ) : (
             // eslint-disable-next-line @next/next/no-img-element
             <img
               src={`/jacketArt/${jacketPath}`}
@@ -40,7 +44,7 @@ export const columns: ColumnDef<chunithm>[] = [
               className="w-8 h-8 inline-block mr-2"
             />
           )}
-          {row.original.title}
+          <div className="flex-1">{row.original.title}</div>
         </div>
       );
     },
diff --git a/package.json b/package.json
index bb8dd73..c345b9f 100644
--- a/package.json
+++ b/package.json
@@ -90,6 +90,8 @@
     "eslint": "^8",
     "eslint-config-next": "14.2.4",
     "postcss": "^8",
+    "prettier": "^3.3.3",
+    "prettier-plugin-tailwindcss": "^0.6.5",
     "tailwindcss": "^3.4.1",
     "typescript": "^5.5.2"
   }
diff --git a/prettier.config.json b/prettier.config.json
new file mode 100644
index 0000000..b4bfed3
--- /dev/null
+++ b/prettier.config.json
@@ -0,0 +1,3 @@
+{
+  "plugins": ["prettier-plugin-tailwindcss"]
+}