diff --git a/src/lib/components/TrackCard.svelte b/src/lib/components/TrackCard.svelte
index 625b362..a2e5dbc 100644
--- a/src/lib/components/TrackCard.svelte
+++ b/src/lib/components/TrackCard.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  export let id: number;
   export let title: string;
   export let version: number;
   export let producerUsername: string;
@@ -19,8 +20,15 @@
 
 <article>
   <hgroup>
-    <h2>{title} <sup>(v{version})</sup></h2>
-    <h3>by {producerUsername}</h3>
+    <h2>
+      <a href="/track/{id}" class="contrast track-title">
+        {title} <sup>(v{version})</sup>
+      </a>
+    </h2>
+
+    <h3>
+      by <a href="/user/{producerUsername}" class="secondary">{producerUsername}</a>
+    </h3>
   </hgroup>
 
   This is a track card.
@@ -52,6 +60,10 @@
 </article>
 
 <style>
+  .track-title {
+    text-decoration: none;
+  }
+
   .comment-headline {
     display: flex;
     justify-content: space-between;
diff --git a/src/lib/server/db/prisma.ts b/src/lib/server/db/prisma.ts
index 175d8a3..a73e85d 100644
--- a/src/lib/server/db/prisma.ts
+++ b/src/lib/server/db/prisma.ts
@@ -11,6 +11,7 @@ export class DatabasePrisma implements Database {
   listTracksForTrackCard = async (producerId: string) => {
     const tracks = await this.client.track.findMany({
       select: {
+        id: true,
         title: true,
         producer: {
           select: {
@@ -45,6 +46,7 @@ export class DatabasePrisma implements Database {
 
     const res = tracks.map((track) => {
       return {
+        id: track.id,
         title: track.title,
         version: track._count.versions,
         producer: track.producer.username,
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 1dd8b28..e2c9f26 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -16,6 +16,7 @@
 
   {#each data.tracks as track}
     <TrackCard
+      id={track.id}
       title={track.title}
       version={track.version}
       producerUsername={track.producer}