diff --git a/app/(sharing)/[token]/[id]/page.tsx b/app/(sharing)/[token]/[id]/page.tsx
index 61975a2..50f132c 100644
--- a/app/(sharing)/[token]/[id]/page.tsx
+++ b/app/(sharing)/[token]/[id]/page.tsx
@@ -1,6 +1,7 @@
 import { getAuth } from "@/auth/queries/getauth";
 import { generatePlaylogId, getSongsWithTitles } from "@/lib/api";
 import { shareScore } from "../token";
+import { getDifficultyClass, getDifficultyText } from "@/lib/helpers";
 
 export default async function Share({
   params,
@@ -13,19 +14,14 @@ export default async function Share({
   const tokenResult = await shareScore(token);
 
   if (tokenResult.error) {
-
     return <p>{tokenResult.error}</p>;
   }
 
+  const { user } = await getAuth();
 
- const { user } = await getAuth();
-
- 
- if (!user?.UserId) {
-  return {
-    error:"no user id"
+  if (!user?.UserId) {
+    return <p>Error: No user ID found.</p>;
   }
-}
 
   const userId = user?.UserId;
   const playlogId = parseInt(id);
@@ -33,17 +29,38 @@ export default async function Share({
   const songsData = await getSongsWithTitles(userId);
   const playlogIds = await generatePlaylogId(playlogId);
 
-  const matchSongToPlaylogId = songsData.filter((song) =>
-    playlogIds.includes(song.id)
-  );
-
-  const songTitles = matchSongToPlaylogId.map((song) => song.title);
-
+  // Filter songsData to match the playlogIds
+  const matchedSongs = songsData.filter((song) => playlogIds.includes(song.id));
   return (
-    <ul>
-      {songTitles.map((title) => (
-        <li key={title}>{title}</li>
+    <div className="flex justify-center items-center h-screen">
+      {matchedSongs.map((song) => (
+        <div
+          key={song.id}
+          className="bg-slate-500  h-200 w-400 flex justify-center items-center"
+        >
+          <div className="text-white text-lg">
+            <p>{song.title}</p>
+            <p>Artist: {song.artist}</p>
+            <p>Genre: {song.genre}</p>
+            <p>diff: {song.chartlevel}</p>
+
+            <p>Level: {song.level}</p>
+
+            <p>Full Combo: {song.isFullCombo ? "Yes" : "No"}</p>
+            <p>Score: {song.score}</p>
+
+            <div>
+              <span
+                className={`justify-center rounded-sm text-center text-sm font-bold ${getDifficultyClass(
+                  song.chartId
+                )} text-white`}
+              >
+                {getDifficultyText(song.chartId)}
+              </span>
+            </div>
+          </div>
+        </div>
       ))}
-    </ul>
+    </div>
   );
 }
diff --git a/lib/api.ts b/lib/api.ts
index afc4972..5046855 100644
--- a/lib/api.ts
+++ b/lib/api.ts
@@ -2,91 +2,111 @@
 
 import { getAuth } from "@/auth/queries/getauth";
 import { artemis, daphnis } from "@/lib/prisma";
-import type * as Prisma from '@prisma/client';
+import type * as Prisma from "@prisma/client";
 
 type ChuniScorePlaylog = Prisma.PrismaClient;
 type ChuniStaticMusic = Prisma.PrismaClient;
+
 type LinkSharingToken = {
   playlogId: number;
 };
 
 export async function getSongsWithTitles(userId: number) {
   try {
-    const songs: ChuniScorePlaylog[] = await artemis.chuni_score_playlog.findMany({
-      where: {
-        user: userId,
-      },
-      orderBy: {
-        userPlayDate: "desc",
-      },
-      select: {
-        id: true,
-        maxCombo: true,
-        userPlayDate: true,
-        isFullCombo: true,
-        playerRating: true,
-        isAllJustice: true,
-        score: true,
-        judgeHeaven: true,
-        judgeGuilty: true,
-        judgeJustice: true,
-        judgeAttack: true,
-        judgeCritical: true,
-        isClear: true,
-        skillId: true,
-        skillEffect: true,
-        skillLevel: true,
-        isNewRecord: true,
-        musicId: true,
-        level: true,
-        rateAir: true,
-        rateHold: true,
-        rateFlick: true,
-        rateSlide: true,
-        rateTap: true,
-        romVersion: true,
-        eventId: true,
-        characterId: true,
-        charaIllustId: true,
-        track: true,
-        isContinue: true,
-        isFreeToPlay: true,
-        playKind: true,
-        playDate: true,
-        orderId: true,
-        sortNumber: true,
-        user: true,
-        placeId: true,
-        ticketId: true,
-      },
-    });
+    // Fetch songs played by the user
+    const songs: ChuniScorePlaylog[] =
+      await artemis.chuni_score_playlog.findMany({
+        where: {
+          user: userId,
+        },
+        orderBy: {
+          userPlayDate: "desc",
+        },
+        select: {
+          id: true,
+          maxCombo: true,
+          userPlayDate: true,
+          isFullCombo: true,
+          playerRating: true,
+          isAllJustice: true,
+          score: true,
+          judgeHeaven: true,
+          judgeGuilty: true,
+          judgeJustice: true,
+          judgeAttack: true,
+          judgeCritical: true,
+          isClear: true,
+          skillId: true,
+          skillEffect: true,
+          skillLevel: true,
+          isNewRecord: true,
+          musicId: true,
+          level: true,
+          rateAir: true,
+          rateHold: true,
+          rateFlick: true,
+          rateSlide: true,
+          rateTap: true,
+          romVersion: true,
+          eventId: true,
+          characterId: true,
+          charaIllustId: true,
+          track: true,
+          isContinue: true,
+          isFreeToPlay: true,
+          playKind: true,
+          playDate: true,
+          orderId: true,
+          sortNumber: true,
+          user: true,
+          placeId: true,
+          ticketId: true,
+        },
+      });
 
+    // Extract unique musicIds from the fetched songs
     const musicIds = songs
       .map((song) => song.musicId)
       .filter((id) => id !== null) as number[];
 
-    const staticMusicInfo: ChuniStaticMusic[] = await artemis.chuni_static_music.findMany({
-      where: {
-        songId: {
-          in: musicIds,
+    // Fetch static music information for the extrcted musicIds
+    const staticMusicInfo: ChuniStaticMusic[] =
+      await artemis.chuni_static_music.findMany({
+        where: {
+          songId: {
+            in: musicIds,
+          },
         },
-      },
-      select: {
-        songId: true,
-        title: true,
-        artist: true,
-      },
-    });
+        select: {
+          songId: true,
+          title: true,
+          artist: true,
+          chartId: true,
+          level: true,
+          genre: true,
+          worldsEndTag: true,
+        },
+      });
 
-    const songsWithTitles = songs.map((song) => ({
-      ...song,
-      title:
-        staticMusicInfo.find((title) => title.songId === song.musicId)?.title ||
-        "Unknown Title",
-      artist:
-        staticMusicInfo.find((artist) => artist.songId === song.musicId)
-          ?.artist || "Unknown Artist",
-    }));
+    // Map each song with its corresponding static music information
+    const songsWithTitles = songs.map((song) => {
+      // Find static info corresponding to the song's musicId and level (chartId)
+      const staticInfo = staticMusicInfo.find(
+        (chuniStatiMusic) =>
+          chuniStatiMusic.songId === song.musicId &&
+          chuniStatiMusic.chartId === song.level
+      );
+
+      // Return mapped song with title, artist, genre, and correct level
+      return {
+        ...song,
+        title: staticInfo?.title || "Unknown Title",
+        artist: staticInfo?.artist || "Unknown Artist",
+        genre: staticInfo?.genre || "Unknown Genre",
+        level: staticInfo?.level || "Unknown Level",
+        chartlevel: song.level || "unkownlevel",
+      };
+    });
 
     return songsWithTitles;
   } catch (error) {
@@ -97,14 +117,14 @@ export async function getSongsWithTitles(userId: number) {
 
 export async function generatePlaylogId(playlogid: number) {
   try {
-    const tokens = await daphnis.linkSharingToken.findMany({
+    const tokens = (await daphnis.linkSharingToken.findMany({
       where: {
         playlogId: playlogid,
       },
       select: {
         playlogId: true,
       },
-    }) as LinkSharingToken[];
+    })) as LinkSharingToken[];
 
     const playlogIds: number[] = tokens.map((token) => token.playlogId);
 
diff --git a/lib/helpers.ts b/lib/helpers.ts
new file mode 100644
index 0000000..bbf37de
--- /dev/null
+++ b/lib/helpers.ts
@@ -0,0 +1,53 @@
+export const getDifficultyClass = (level: number) => {
+  switch (level) {
+    case 0:
+      return "bg-green-500"; // Green for basic
+    case 1:
+      return "bg-yellow-500"; // Yellow for advance
+    case 2:
+      return "bg-red-500"; // Red for expert
+    case 3:
+      return "bg-purple-500"; // Purple for master
+    case 4:
+      return "bg-yellow-500"; // Example of gradient background
+    case 5:
+      return "bg-black"; // Black for worlds end
+    default:
+      return "bg-gray-500"; // Default to gray background for unknown difficulty
+  }
+};
+
+export const getDifficultyText = (chartId: number) => {
+  switch (chartId) {
+    case 0:
+      return "EASY"; // Text for difficulty
+    case 1:
+      return "ADVANCE";
+    case 2:
+      return "EXPERT";
+    case 3:
+      return "MASTER";
+    case 4:
+      return "ULTIMA";
+    case 5:
+      return "WORLDS END";
+  }
+};
+
+export const getGrade = (score: number) => {
+  if (score >= 1009000) return "SSS+";
+  if (score >= 1007500 && score <= 1008999) return "SSS";
+  if (score >= 1005000 && score <= 1007499) return "SS+";
+  if (score >= 1000000 && score <= 1004999) return "SS";
+  if (score >= 990000 && score <= 999999) return "S+";
+  if (score >= 975000 && score <= 990000) return "S";
+  if (score >= 950000 && score <= 974999) return "AAA";
+  if (score >= 925000 && score <= 949999) return "AA";
+  if (score >= 900000 && score <= 924999) return "A";
+  if (score >= 800000 && score <= 899999) return "BBB";
+  if (score >= 700000 && score <= 799999) return "BB";
+  if (score >= 600000 && score <= 699999) return "B";
+  if (score >= 500000 && score <= 599999) return "C";
+  if (score < 500000) return "D";
+  return "";
+};