diff --git a/app/(sharing)/[token]/[id]/page.tsx b/app/(sharing)/[token]/[id]/page.tsx
index bb3b96d..ccaa765 100644
--- a/app/(sharing)/[token]/[id]/page.tsx
+++ b/app/(sharing)/[token]/[id]/page.tsx
@@ -2,7 +2,13 @@ import { getAuth } from "@/auth/queries/getauth";
 import { generatePlaylogId, getSongsWithTitles } from "@/lib/api";
 import { shareScore } from "../token";
 import { getDifficultyClass, getDifficultyText, getGrade } from "@/lib/helpers";
-import { type chuni_score_playlog } from "@/prisma/schemas/artemis/generated/artemis";
+import {
+  type chuni_score_playlog,
+  chuni_static_music,
+} from "@/prisma/schemas/artemis/generated/artemis";
+
+type chunithm = chuni_score_playlog &
+  chuni_static_music & { playCount: number };
 
 export default async function Share({
   params,
@@ -31,83 +37,90 @@ export default async function Share({
   const playlogIds = await generatePlaylogId(playlogId);
 
   // Filter songsData to match the playlogIds
-  const matchedSongs: chuni_score_playlog[] = songsData.filter((song) =>
+  const chunithm: chunithm[] = songsData.filter((song) =>
     playlogIds.includes(song.id)
   );
   return (
-    <div className="h-screen grid w-full gap-4 bg-red-200 grid-cols-8 grid-rows-9 rounded-lg shadow-md">
-      <div className="col-span-2 row-span-1 row-start-2 col-start-2 bg-white rounded-lg shadow-md flex items-center justify-center">
-        {matchedSongs.map((song) => (
-          <div
-            key={song.id}
-            className="flex justify-center items-center w-full"
-          >
-            <div className=" w-full p-4">
-              <div className="bg-[#FE176E] rounded-xl w-full text-center uppercase font-medium ">
-                <span className=" text-white font-bold text-xl ">
-                  {song.isNewRecord && "NEW RECORD!!"}
-                </span>
-              </div>
-              <p className="text-center p-5 font-bold  text-4xl">
-                {" "}
-                {song.score?.toLocaleString()}
-              </p>
-            </div>
+    <div className="flex flex-col items-center justify-center space-y-4 p-4  dark:text-black">
+      <div className="w-full p-4 bg-white dark:text-black rounded-sm">
+        {chunithm.map((song) => (
+          <div key={song.id} className="w-full">
+            <span className="text-black text-center font-bold text-xl">
+              {song.isNewRecord && "NEW RECORD!!"}
+            </span>
+            <span className="text-black text-center font-bold text-xl">
+              Song: {song.title}
+            </span>
           </div>
         ))}
       </div>
 
-      <div className="col-span-4 row-span-4 row-start-2 bg-white rounded-lg shadow-md flex flex-col justify-start items-center p-4">
-        {matchedSongs.map((song) => (
+      <div className="w-full p-4 bg-white dark:text-black rounded-sm">
+        {chunithm.map((song) => (
           <div key={song.id} className="w-full">
-            <div className="bg-[#FE176E] rounded-xl w-full text-center uppercase font-medium">
-              <span className="text-white font-bold text-xl">
-                {song.isNewRecord && "NEW!!"}
-              </span>
-            </div>
-            <div className=" flex items-center justify-center">
-              <span className=" text-black  text-center p-5 font-bold text-8xl">
-                {getGrade(song.score ?? 0)}
-              </span>
-            </div>
+            <span className="text-black text-center font-bold text-xl">
+              {song.isNewRecord && "NEW RECORD!!"}
+            </span>
+            <span className="text-black text-center font-bold text-xl">
+              Artist: {song.artist}
+            </span>
           </div>
         ))}
       </div>
 
-      <div className="col-span-1 col-start-3 row-span-1 row-start-3 bg-white rounded-lg shadow-md flex items-center justify-center">
-        {matchedSongs.map((song) => (
+      <div className="w-full p-4 bg-white dark:text-black rounded-sm">
+        {chunithm.map((song) => (
           <div key={song.id} className="w-full">
-            <div className=" flex flex-col items-center justify-center">
-              <span className=" text-black   text-center p-5 font-bold text-xl">
-                {song.isFullCombo && "FULL COMBO"}
-              </span>
-              <span className=" text-black   text-center font-medium text-xl">
-                Max combo: {song.maxCombo}
-              </span>
-            </div>
+            <span className="text-black text-center font-bold text-xl">
+              {song.isNewRecord && "NEW RECORD!!"}
+            </span>
+            <span className="text-black text-center font-bold text-xl">
+              Score: {song.score?.toLocaleString()}
+            </span>
           </div>
         ))}
       </div>
-      <div className="col-span-1 col-start-3 row-span-3 bg-white rounded-lg shadow-md flex items-center justify-center">
-        {matchedSongs.map((song) => (
-          <div key={song.id} className="w-full p-5">
-            <div className=" flex flex-col items-center justify-center ">
-              <span className="text-white rounded-md shadow-[inset_0px_3px_6px_0px_#1a202c] bg-[#58329F] w-full text-center p-2 font-bold text-md ">
+
+      <div className="w-full p-4 bg-white dark:text-black rounded-sm">
+        {chunithm.map((song) => (
+          <div key={song.id} className="w-full">
+            <span className="text-black text-center font-bold text-xl">
+              Rank: {getGrade(song.score ?? 0)}
+            </span>
+          </div>
+        ))}
+      </div>
+
+      <div className="w-full p-4 bg-white dark:text-black rounded-sm">
+        {chunithm.map((song) => (
+          <div key={song.id} className="w-full">
+            <span className="text-black text-center font-bold text-xl">
+              {song.isFullCombo && "FULL COMBO"}
+            </span>
+            <span className="text-black text-center font-bold text-xl">
+              Max combo: {song.maxCombo}
+            </span>
+          </div>
+        ))}
+      </div>
+
+      <div className="w-full p-4 bg-white  dark:text-black rounded-sm">
+        {chunithm.map((song) => (
+          <div key={song.id} className="w-full">
+            <div className="flex flex-col items-center justify-center">
+              <span className="text-white rounded-md shadow-[inset_0px_3px_6px_0px_#1a202c] bg-[#58329F] w-full text-center p-2 font-bold text-md">
                 Judge Justice: {song.judgeJustice}
               </span>
               <span className="text-white rounded-md shadow-[inset_0px_3px_6px_0px_#1a202c] bg-[#58329F] w-full text-center p-2 font-bold text-md m-5">
                 Judge Attack: {song.judgeAttack}
               </span>
-              <span className="text-white  rounded-md shadow-[inset_0px_3px_6px_0px_#1a202c] bg-[#58329F] w-full text-center p-2 font-bold text-md">
+              <span className="text-white rounded-md shadow-[inset_0px_3px_6px_0px_#1a202c] bg-[#58329F] w-full text-center p-2 font-bold text-md">
                 Miss: {song.judgeGuilty}
               </span>
             </div>
           </div>
         ))}
       </div>
-      <div className="col-span-4 col-start-4 row-span-1 bg-white rounded-lg shadow-md flex items-center justify-center">
-        <p>Edamame</p>
-      </div>
     </div>
   );
 }
diff --git a/components/scoreplaylog/colums.tsx b/components/scoreplaylog/colums.tsx
index f1fe2d4..f5ae304 100644
--- a/components/scoreplaylog/colums.tsx
+++ b/components/scoreplaylog/colums.tsx
@@ -21,10 +21,10 @@ 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";
 
-type includesPlayCount = chuni_score_playlog &
+type chunithm = chuni_score_playlog &
   chuni_static_music & { playCount: number };
 
-export const columns: ColumnDef<includesPlayCount>[] = [
+export const columns: ColumnDef<chunithm>[] = [
   {
     accessorKey: "title",
     header: "Title",