diff --git a/frontend/app/shows/[id]/page.tsx b/frontend/app/shows/[id]/page.tsx
index c50576d..e26b05e 100644
--- a/frontend/app/shows/[id]/page.tsx
+++ b/frontend/app/shows/[id]/page.tsx
@@ -1,6 +1,7 @@
+
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
-import { ArrowLeft, Calendar, MapPin, Music2 } from "lucide-react"
+import { ArrowLeft, Calendar, MapPin, Music2, Disc, PlayCircle, ExternalLink } from "lucide-react"
 import Link from "next/link"
 import { CommentSection } from "@/components/social/comment-section"
 import { EntityRating } from "@/components/social/entity-rating"
@@ -24,6 +25,7 @@ async function getShow(id: string) {
     }
 }
 
+
 export default async function ShowDetailPage({ params }: { params: Promise<{ id: string }> }) {
     const { id } = await params
     const show = await getShow(id)
@@ -32,6 +34,35 @@ export default async function ShowDetailPage({ params }: { params: Promise<{ id:
         notFound()
     }
 
+    // Group by set
+    const sets: Record<string, any[]> = {};
+    if (show.performances) {
+        show.performances.forEach((perf: any) => {
+            const setName = perf.set_name || "Set 1"; // Default to Set 1 if missing
+            if (!sets[setName]) sets[setName] = [];
+            sets[setName].push(perf);
+        });
+    }
+
+    // Sort keys: Set 1, Set 2, Set 3, Encore, Encore 2...
+    const sortedKeys = Object.keys(sets).sort((a, b) => {
+        const aLower = a.toLowerCase();
+        const bLower = b.toLowerCase();
+
+        // Encore always last
+        if (aLower.includes("encore") && !bLower.includes("encore")) return 1;
+        if (!aLower.includes("encore") && bLower.includes("encore")) return -1;
+
+        // If both have Set, compare numbers
+        if (aLower.includes("set") && bLower.includes("set")) {
+            const aNum = parseInt(a.replace(/\D/g, "") || "0");
+            const bNum = parseInt(b.replace(/\D/g, "") || "0");
+            return aNum - bNum;
+        }
+
+        return a.localeCompare(b);
+    });
+
     return (
         <div className="flex flex-col gap-6">
             <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
@@ -59,12 +90,36 @@ export default async function ShowDetailPage({ params }: { params: Promise<{ id:
                                 ))}
                             </div>
                         )}
-                        {show.tour && (
-                            <p className="text-muted-foreground flex items-center gap-2 mt-2">
-                                <Music2 className="h-4 w-4" />
-                                {show.tour.name}
-                            </p>
-                        )}
+                        <div className="flex items-center flex-wrap gap-4 mt-2">
+                            {show.tour && (
+                                <p className="text-muted-foreground flex items-center gap-2">
+                                    <Music2 className="h-4 w-4" />
+                                    {show.tour.name}
+                                </p>
+                            )}
+
+                            {/* Audio Links */}
+                            {(show.bandcamp_link || show.nugs_link) && (
+                                <div className="flex items-center gap-2">
+                                    {show.bandcamp_link && (
+                                        <a href={show.bandcamp_link} target="_blank" rel="noopener noreferrer">
+                                            <Button variant="outline" size="sm" className="h-7 text-xs gap-1.5">
+                                                <Disc className="h-3.5 w-3.5" />
+                                                Bandcamp
+                                            </Button>
+                                        </a>
+                                    )}
+                                    {show.nugs_link && (
+                                        <a href={show.nugs_link} target="_blank" rel="noopener noreferrer">
+                                            <Button variant="outline" size="sm" className="h-7 text-xs gap-1.5">
+                                                <PlayCircle className="h-3.5 w-3.5" />
+                                                Nugs.net
+                                            </Button>
+                                        </a>
+                                    )}
+                                </div>
+                            )}
+                        </div>
                     </div>
                 </div>
                 <div className="flex items-center gap-4">
@@ -89,45 +144,66 @@ export default async function ShowDetailPage({ params }: { params: Promise<{ id:
                         </CardHeader>
                         <CardContent>
                             {show.performances && show.performances.length > 0 ? (
-                                <div className="space-y-2">
-                                    {show.performances.map((perf: any) => (
-                                        <div key={perf.id} className="flex items-center justify-between group py-1 hover:bg-muted/50 rounded px-2 -mx-2">
-                                            <div className="flex items-center gap-2">
-                                                <span className="text-muted-foreground w-6 text-right text-sm font-mono">{perf.position}.</span>
-                                                <div className="font-medium">
-                                                    {perf.song?.title || "Unknown Song"}
-                                                    {perf.segue && <span className="ml-1 text-muted-foreground">&gt;</span>}
-                                                </div>
+                                <div>
+                                    {sortedKeys.map((setName) => (
+                                        <div key={setName} className="mb-6 last:mb-0">
+                                            <h3 className="font-semibold text-sm uppercase tracking-wider text-muted-foreground mb-3 pl-2 border-b pb-1">
+                                                {setName}
+                                            </h3>
+                                            <div className="space-y-1">
+                                                {sets[setName].map((perf: any) => (
+                                                    <div key={perf.id} className="flex flex-col group py-1.5 hover:bg-muted/50 rounded px-2 -mx-2 transition-colors">
+                                                        <div className="flex items-center justify-between">
+                                                            <div className="flex items-center gap-3">
+                                                                <span className="text-muted-foreground/60 w-6 text-right text-xs font-mono">{perf.position}.</span>
+                                                                <div className="font-medium flex items-center gap-2">
+                                                                    {perf.track_url ? (
+                                                                        <a href={perf.track_url} target="_blank" rel="noopener noreferrer" className="flex items-center gap-2 hover:underline group/link">
+                                                                            <PlayCircle className="h-3.5 w-3.5 text-primary opacity-70 group-hover/link:opacity-100" />
+                                                                            <span>{perf.song?.title || "Unknown Song"}</span>
+                                                                        </a>
+                                                                    ) : (
+                                                                        <span>{perf.song?.title || "Unknown Song"}</span>
+                                                                    )}
+                                                                    {perf.segue && <span className="ml-1 text-muted-foreground">&gt;</span>}
+                                                                </div>
 
-                                                {/* Nicknames */}
-                                                {perf.nicknames && perf.nicknames.length > 0 && (
-                                                    <div className="flex gap-1 ml-2">
-                                                        {perf.nicknames.map((nick: any) => (
-                                                            <span key={nick.id} className="text-xs bg-yellow-100 text-yellow-800 px-1.5 py-0.5 rounded-full border border-yellow-200" title={nick.description}>
-                                                                "{nick.nickname}"
-                                                            </span>
-                                                        ))}
+                                                                {/* Nicknames */}
+                                                                {perf.nicknames && perf.nicknames.length > 0 && (
+                                                                    <div className="flex gap-1 ml-2">
+                                                                        {perf.nicknames.map((nick: any) => (
+                                                                            <span key={nick.id} className="text-[10px] bg-yellow-100/80 text-yellow-800 px-1.5 py-0.5 rounded-full border border-yellow-200" title={nick.description}>
+                                                                                "{nick.nickname}"
+                                                                            </span>
+                                                                        ))}
+                                                                    </div>
+                                                                )}
+
+                                                                {/* Suggest Nickname Button */}
+                                                                <div className="opacity-0 group-hover:opacity-100 transition-opacity">
+                                                                    <SuggestNicknameDialog
+                                                                        performanceId={perf.id}
+                                                                        songTitle={perf.song?.title || "Song"}
+                                                                    />
+                                                                </div>
+                                                            </div>
+
+                                                            {/* Rating Column */}
+                                                            <SocialWrapper type="ratings">
+                                                                <EntityRating
+                                                                    entityType="performance"
+                                                                    entityId={perf.id}
+                                                                    compact={true}
+                                                                />
+                                                            </SocialWrapper>
+                                                        </div>
+                                                        {perf.notes && (
+                                                            <div className="text-xs text-muted-foreground ml-9 italic mt-0.5">
+                                                                {perf.notes}
+                                                            </div>
+                                                        )}
                                                     </div>
-                                                )}
-
-                                                {/* Suggest Nickname Button */}
-                                                <div className="opacity-0 group-hover:opacity-100 transition-opacity">
-                                                    <SuggestNicknameDialog
-                                                        performanceId={perf.id}
-                                                        songTitle={perf.song?.title || "Song"}
-                                                    />
-                                                </div>
-                                            </div>
-
-                                            {/* Rating Column */}
-                                            <div className="flex items-center">
-                                                <SocialWrapper type="ratings">
-                                                    <EntityRating
-                                                        entityType="performance"
-                                                        entityId={perf.id}
-                                                        compact={true}
-                                                    />
-                                                </SocialWrapper>
+                                                ))}
                                             </div>
                                         </div>
                                     ))}