diff --git a/apps/embed/src/embeds/TopTracksEmbedPage.tsx b/apps/embed/src/embeds/TopTracksEmbedPage.tsx
index 667b74e5..4307acb0 100644
--- a/apps/embed/src/embeds/TopTracksEmbedPage.tsx
+++ b/apps/embed/src/embeds/TopTracksEmbedPage.tsx
@@ -1,3 +1,4 @@
+import { v4 } from "uuid";
 import Header from "../components/Header";
 import type { Profile } from "../types/profile";
 import type { Track } from "../types/track";
@@ -12,6 +13,51 @@ export function TopTracksEmbedPage(props: TopTracksEmbedPageProps) {
     <div className="p-[15px]">
       <Header profile={props.profile} />
       <h2 className="m-[0px]">Top Tracks</h2>
+
+      <div className="w-full overflow-x-auto">
+        <table className="table-borderless table">
+          <tbody>
+            {props.tracks.map((track, index) => (
+              <tr key={v4()}>
+                <td>
+                  <div className="flex flex-row items-center">
+                    <div className="mr-[20px] min-w-[30px]">{index + 1}</div>
+                    <a
+                      href={`https://rocksky.app/${track.uri?.split("at://")[1]?.replace("app.rocksky.", "")}`}
+                      target="_blank"
+                      className="flex flex-row items-center no-underline text-inherit"
+                    >
+                      {track.albumArt && (
+                        <img
+                          className="max-w-[60px] max-h-[60px] mr-[20px] rounded-[5px]"
+                          src={track.albumArt!}
+                        />
+                      )}
+                      {!track.albumArt && (
+                        <div className="w-[60px] h-[60px] bg-[var(--color-avatar-background)] flex items-center justify-center mr-[20px]">
+                          <div className="h-[30px] w-[30px]"></div>
+                        </div>
+                      )}
+                      <div>
+                        <div>{track.title}</div>
+                        <a
+                          href={`https://rocksky.app/${track.artistUri.split("at://")[1]?.replace("app.rocksky.", "")}`}
+                          target="_blank"
+                          className="no-underline text-inherit"
+                        >
+                          <div className="font-rockford-light opacity-60">
+                            {track.albumArtist}
+                          </div>
+                        </a>
+                      </div>
+                    </a>
+                  </div>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
     </div>
   );
 }
diff --git a/apps/embed/src/xrpc/getTopTracks.ts b/apps/embed/src/xrpc/getTopTracks.ts
index 439a8d56..3fbc4244 100644
--- a/apps/embed/src/xrpc/getTopTracks.ts
+++ b/apps/embed/src/xrpc/getTopTracks.ts
@@ -1,11 +1,15 @@
 import { ROCKSKY_API_URL } from "../consts";
+import getLastDays from "../lib/getLastDays";
 import type { Track } from "../types/track";
 
 export default async function getTopAlbums(handle: string) {
+  const [start, end] = getLastDays(7);
   const url = new URL(
     `${ROCKSKY_API_URL}/xrpc/app.rocksky.actor.getActorSongs`,
   );
   url.searchParams.append("did", handle);
+  url.searchParams.append("startDate", start.toISOString());
+  url.searchParams.append("endDate", end.toISOString());
   url.searchParams.append("limit", "20");
 
   const res = await fetch(url);