diff --git a/app/(sharing)/[token]/[id]/page.tsx b/app/(sharing)/[token]/[id]/page.tsx
index 45cb41e..bb3b96d 100644
--- a/app/(sharing)/[token]/[id]/page.tsx
+++ b/app/(sharing)/[token]/[id]/page.tsx
@@ -1,7 +1,8 @@
 import { getAuth } from "@/auth/queries/getauth";
 import { generatePlaylogId, getSongsWithTitles } from "@/lib/api";
 import { shareScore } from "../token";
-import { getDifficultyClass, getDifficultyText } from "@/lib/helpers";
+import { getDifficultyClass, getDifficultyText, getGrade } from "@/lib/helpers";
+import { type chuni_score_playlog } from "@/prisma/schemas/artemis/generated/artemis";
 
 export default async function Share({
   params,
@@ -30,32 +31,81 @@ export default async function Share({
   const playlogIds = await generatePlaylogId(playlogId);
 
   // Filter songsData to match the playlogIds
-  const matchedSongs = songsData.filter((song) => playlogIds.includes(song.id));
+  const matchedSongs: chuni_score_playlog[] = 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-pink-200 rounded-lg shadow-md flex items-center justify-center">
+    <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">
-            <div className="text-white text-lg">
-              <p>Score: {song.score}</p>
+          <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>
         ))}
       </div>
 
-      <div className="col-span-4 row-span-4  row-start-2  bg-lime-200 rounded-lg shadow-md flex items-center justify-center">
-        <p>Broccoli</p>
+      <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 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>
+          </div>
+        ))}
       </div>
 
-      <div className="col-span-2 col-start-2 row-span-3 row-start-3  bg-yellow-200 rounded-lg shadow-md flex items-center justify-center">
-        <p>Tamago</p>
+      <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 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>
+          </div>
+        ))}
       </div>
-
-      <div className="col-span-2 col-start-2 row-span-2  bg-yellow-200 rounded-lg shadow-md flex items-center justify-center">
-        <p>Pork</p>
+      <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 ">
+                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">
+                Miss: {song.judgeGuilty}
+              </span>
+            </div>
+          </div>
+        ))}
       </div>
-
-      <div className="col-span-4 col-start-4 row-span-1 bg-green-200 rounded-lg shadow-md flex items-center justify-center">
+      <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 1b30b6a..1006671 100644
--- a/components/scoreplaylog/colums.tsx
+++ b/components/scoreplaylog/colums.tsx
@@ -16,37 +16,33 @@ import { Badge } from "@/components/ui/badge";
 import { useState } from "react";
 import { useRouter } from "next/navigation";
 import { generateShareToken } from "@/app/(sharing)/[token]/token";
-export type Song = {
-  title: string;
-  artist: string;
-  score?: number | null;
-  userPlayDate: string | null;
-  isFullCombo: boolean | null;
-  isAllJustice: boolean | null;
-  id: number;
-};
 
-export const columns: ColumnDef<Song>[] = [
+import { chuni_score_playlog } from "@/prisma/schemas/artemis/generated/artemis";
+import { chuni_static_music } from "@/prisma/schemas/artemis/generated/artemis";
+
+export const columns: ColumnDef<chuni_score_playlog & chuni_static_music>[] = [
   {
     accessorKey: "title",
     header: "Title",
     cell: ({ row }) => (
       <div>
-        <div className="font-medium ">
+        <div className="font-medium">
           {row.original.title}
           <span className="space-x-2 pl-2">
             {row.original.isFullCombo && (
               <Badge className="rounded-sm">Full Combo</Badge>
             )}
             {row.original.isAllJustice && (
-              <Badge className="rounded-sm  bg-yellow-500 text-black">
+              <Badge className="rounded-sm bg-yellow-500 text-black">
                 All Justice
               </Badge>
             )}
+            {row.original.isNewRecord && (
+              <Badge className="rounded-sm bg-pink-400 text-white">New!!</Badge>
+            )}
           </span>
         </div>
-
-        <div className="text-sm text-muted-foreground truncate inline-block w-[200px] ">
+        <div className="text-sm text-muted-foreground truncate inline-block w-[200px]">
           {row.original.artist}
         </div>
       </div>
@@ -68,14 +64,13 @@ export const columns: ColumnDef<Song>[] = [
       const song = row.original;
       const [error, setError] = useState<string>("");
       const router = useRouter();
-      
-      
+
       const handleGenerateShareToken = async () => {
         const { token, error } = await generateShareToken(row.original.id);
         if (error) {
           setError(error);
         } else {
-          const newTab = window.open(`/${token}/${row.original.id}`, '_blank');
+          const newTab = window.open(`/${token}/${row.original.id}`, "_blank");
           if (newTab) {
             newTab.focus();
           } else {
@@ -96,7 +91,9 @@ export const columns: ColumnDef<Song>[] = [
           <DropdownMenuContent align="end">
             <DropdownMenuLabel>Actions</DropdownMenuLabel>
             <DropdownMenuItem
-              onClick={() => navigator.clipboard.writeText(song.title)}
+              onClick={() =>
+                song.title && navigator.clipboard.writeText(song.title)
+              }
             >
               Copy song title
             </DropdownMenuItem>