diff --git a/src/components/Index/FestivalSetContext.tsx b/src/components/Index/FestivalSetContext.tsx
new file mode 100644
index 0000000..f6906c4
--- /dev/null
+++ b/src/components/Index/FestivalSetContext.tsx
@@ -0,0 +1,90 @@
+import { createContext, useContext, ReactNode, useMemo } from "react";
+import { FestivalSet } from "@/services/queries";
+
+interface FestivalSetContextValue {
+  set: FestivalSet;
+  userVote?: number;
+  userKnowledge?: boolean;
+  votingLoading?: boolean;
+  onVote: (
+    setId: string,
+    voteType: number,
+  ) => Promise<{ requiresAuth: boolean }>;
+  onKnowledgeToggle: (setId: string) => Promise<{ requiresAuth: boolean }>;
+  onAuthRequired: () => void;
+  use24Hour?: boolean;
+
+  // Computed helpers
+  isMultiArtist: boolean;
+  getVoteCount: (voteType: number) => number;
+}
+
+const FestivalSetContext = createContext<FestivalSetContextValue | null>(null);
+
+interface FestivalSetProviderProps {
+  children: ReactNode;
+  set: FestivalSet;
+  userVote?: number;
+  userKnowledge?: boolean;
+  votingLoading?: boolean;
+  onVote: (
+    setId: string,
+    voteType: number,
+  ) => Promise<{ requiresAuth: boolean }>;
+  onKnowledgeToggle: (setId: string) => Promise<{ requiresAuth: boolean }>;
+  onAuthRequired: () => void;
+  use24Hour?: boolean;
+}
+
+export function FestivalSetProvider({
+  children,
+  set,
+  userVote,
+  userKnowledge,
+  votingLoading,
+  onVote,
+  onKnowledgeToggle,
+  onAuthRequired,
+  use24Hour = false,
+}: FestivalSetProviderProps) {
+  const isMultiArtist = set.artists.length > 1;
+
+  const voteCounts = useMemo(() => {
+    const counts: Record<number, number> = {};
+    for (const vc of set.votes) {
+      counts[vc.vote_type] = (counts[vc.vote_type] || 0) + 1;
+    }
+    return counts;
+  }, [set.votes]);
+
+  function getVoteCount(voteType: number) {
+    return voteCounts[voteType] || 0;
+  }
+
+  const contextValue: FestivalSetContextValue = {
+    set,
+    userVote,
+    userKnowledge,
+    votingLoading,
+    onVote,
+    onKnowledgeToggle,
+    onAuthRequired,
+    use24Hour,
+    isMultiArtist,
+    getVoteCount,
+  };
+
+  return (
+    <FestivalSetContext.Provider value={contextValue}>
+      {children}
+    </FestivalSetContext.Provider>
+  );
+}
+
+export function useFestivalSet() {
+  const context = useContext(FestivalSetContext);
+  if (!context) {
+    throw new Error("useFestivalSet must be used within a FestivalSetProvider");
+  }
+  return context;
+}
diff --git a/src/components/Index/GenreBadge.tsx b/src/components/Index/GenreBadge.tsx
index 91d4e90..8a7c7d9 100644
--- a/src/components/Index/GenreBadge.tsx
+++ b/src/components/Index/GenreBadge.tsx
@@ -3,9 +3,10 @@ import { useGenres } from "@/hooks/queries/useGenresQuery";
 
 interface GenreBadgeProps {
   genreId: string;
+  size?: "default" | "sm";
 }
 
-export function GenreBadge({ genreId }: GenreBadgeProps) {
+export function GenreBadge({ genreId, size = "default" }: GenreBadgeProps) {
   const { genres, loading, error } = useGenres();
 
   if (loading || error) return null;
@@ -16,7 +17,9 @@ export function GenreBadge({ genreId }: GenreBadgeProps) {
   return (
     <Badge
       variant="secondary"
-      className="bg-purple-600/50 text-purple-100 mb-2"
+      className={`bg-purple-600/50 text-purple-100 ${
+        size === "sm" ? "text-xs px-2 py-1" : ""
+      }`}
     >
       {genre.name}
     </Badge>
diff --git a/src/components/Index/MultiArtistSetCard.tsx b/src/components/Index/MultiArtistSetCard.tsx
new file mode 100644
index 0000000..cfd29f7
--- /dev/null
+++ b/src/components/Index/MultiArtistSetCard.tsx
@@ -0,0 +1,30 @@
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { SetHeader } from "./shared/SetHeader";
+import { SetImage } from "./shared/SetImage";
+import { SetMetadata } from "./shared/SetMetadata";
+import { SetDescription } from "./shared/SetDescription";
+import { SetVotingButtons } from "./shared/SetVotingButtons";
+
+export function MultiArtistSetCard() {
+  return (
+    <Card className="bg-white/10 backdrop-blur-md border-purple-400/30 hover:bg-white/15 transition-all duration-300 overflow-hidden">
+      <CardHeader className="pb-4">
+        {/* Set Image with Mixed Artists */}
+        <SetImage />
+
+        <div className="flex items-start justify-between">
+          <div className="flex-1">
+            <SetHeader />
+            <SetMetadata />
+          </div>
+        </div>
+
+        <SetDescription />
+      </CardHeader>
+
+      <CardContent>
+        <SetVotingButtons />
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/src/components/Index/MultiArtistSetListItem.tsx b/src/components/Index/MultiArtistSetListItem.tsx
new file mode 100644
index 0000000..c0a7a6b
--- /dev/null
+++ b/src/components/Index/MultiArtistSetListItem.tsx
@@ -0,0 +1,50 @@
+import { SetHeader } from "./shared/SetHeader";
+import { SetImage } from "./shared/SetImage";
+import { SetMetadata } from "./shared/SetMetadata";
+import { SetDescription } from "./shared/SetDescription";
+import { SetVotingButtons } from "./shared/SetVotingButtons";
+
+export function MultiArtistSetListItem() {
+  return (
+    <div
+      className="bg-white/10 backdrop-blur-md border-purple-400/30 hover:bg-white/15 transition-all duration-300 rounded-lg p-4"
+      data-testid="artist-item"
+    >
+      {/* Mobile Layout (sm and below) */}
+      <div className="block md:hidden space-y-3">
+        <div className="flex items-start gap-3 relative">
+          <SetImage size="sm" />
+          <div className="flex-1 min-w-0">
+            <SetHeader size="sm" />
+            <SetMetadata />
+          </div>
+        </div>
+
+        <SetDescription className="text-purple-200 text-sm" />
+
+        <SetVotingButtons size="sm" layout="horizontal" />
+      </div>
+
+      {/* Desktop Layout (md and above) */}
+      <div className="hidden md:flex items-center gap-4 relative">
+        <SetImage size="md" />
+
+        <div className="flex-1 min-w-0">
+          <div className="flex items-start justify-between mb-2">
+            <div className="flex-1 min-w-0">
+              <SetHeader size="sm" />
+
+              <SetMetadata />
+            </div>
+          </div>
+
+          <SetDescription className="text-purple-200 text-sm mb-2" />
+        </div>
+
+        <div className="flex items-center gap-2 flex-shrink-0">
+          <SetVotingButtons size="sm" layout="horizontal" />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Index/SetCard.tsx b/src/components/Index/SetCard.tsx
deleted file mode 100644
index 6c05cb6..0000000
--- a/src/components/Index/SetCard.tsx
+++ /dev/null
@@ -1,298 +0,0 @@
-import { Link } from "react-router-dom";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { Star, Heart, X, MapPin, Clock, Eye, EyeOff } from "lucide-react";
-import { ArtistImageLoader } from "@/components/ArtistImageLoader";
-import { useToast } from "@/hooks/use-toast";
-import { formatTimeRange } from "@/lib/timeUtils";
-import { FestivalSet } from "@/services/queries";
-import { GenreBadge } from "./GenreBadge";
-
-interface ArtistCardProps {
-  set: FestivalSet;
-  userVote?: number;
-  userKnowledge?: boolean;
-  votingLoading?: boolean;
-  onVote: (
-    setId: string,
-    voteType: number,
-  ) => Promise<{ requiresAuth: boolean }>;
-  onKnowledgeToggle: (setId: string) => Promise<{ requiresAuth: boolean }>;
-  onAuthRequired: () => void;
-  use24Hour?: boolean;
-}
-
-export const SetCard = ({
-  set,
-  userVote,
-  userKnowledge,
-  votingLoading,
-  onVote,
-  onKnowledgeToggle,
-  onAuthRequired,
-  use24Hour = false,
-}: ArtistCardProps) => {
-  const { toast } = useToast();
-
-  const handleVote = async (voteType: number) => {
-    const result = await onVote(set.id, voteType);
-    if (result.requiresAuth) {
-      onAuthRequired();
-    }
-  };
-
-  const handleKnowledgeToggle = async () => {
-    const result = await onKnowledgeToggle(set.id);
-    if (result.requiresAuth) {
-      onAuthRequired();
-    } else {
-      // Show toast notification
-      const newKnowledgeState = !userKnowledge;
-      toast({
-        title: `${set.name} is ${newKnowledgeState ? "known" : "unknown"}`,
-        duration: 2000,
-      });
-    }
-  };
-
-  const getVoteCount = (voteType: number) => {
-    return set.votes.filter((vote) => vote.vote_type === voteType).length;
-  };
-
-  const getSocialPlatformLogo = (url: string) => {
-    if (url.includes("spotify.com")) {
-      return {
-        logo: "https://storage.googleapis.com/pr-newsroom-wp/1/2023/05/Spotify_Primary_Logo_RGB_Green.png",
-        platform: "Spotify",
-        color: "text-green-400 hover:text-green-300",
-      };
-    }
-    if (url.includes("soundcloud.com")) {
-      return {
-        logo: "https://d21buns5ku92am.cloudfront.net/26628/documents/54546-1717072325-sc-logo-cloud-black-7412d7.svg",
-        platform: "SoundCloud",
-        color: "text-orange-400 hover:text-orange-300",
-      };
-    }
-    return null;
-  };
-
-  return (
-    <Card className="bg-white/10 backdrop-blur-md border-purple-400/30 hover:bg-white/15 transition-all duration-300 overflow-hidden">
-      <CardHeader className="pb-4">
-        {/* Artist Image - clickable for details */}
-        <Link to={`./sets/${set.slug}`} className="block">
-          <ArtistImageLoader
-            src={set.artists[0]?.image_url}
-            alt={set.name}
-            className="aspect-square w-full mb-4 overflow-hidden rounded-lg hover:opacity-90 transition-opacity cursor-pointer"
-          />
-        </Link>
-
-        <div className="flex items-start justify-between">
-          <div className="flex-1">
-            <div className="flex items-center gap-2 mb-2">
-              <CardTitle className="text-white text-xl">{set.name}</CardTitle>
-
-              {/* Knowledge Toggle */}
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={handleKnowledgeToggle}
-                className={`p-1 h-6 w-6 ${
-                  userKnowledge
-                    ? "text-purple-400 hover:text-purple-300"
-                    : "text-purple-600 hover:text-purple-500"
-                }`}
-                title={userKnowledge ? "I know this artist" : "Mark as known"}
-              >
-                {userKnowledge ? (
-                  <Eye className="h-3 w-3" />
-                ) : (
-                  <EyeOff className="h-3 w-3" />
-                )}
-              </Button>
-
-              {/* Social Links - small icons next to name */}
-              {set.artists[0]?.spotify_url &&
-                getSocialPlatformLogo(set.artists[0]?.spotify_url) && (
-                  <Button
-                    asChild
-                    variant="secondary"
-                    size="sm"
-                    className={`p-1 h-6 w-6 bg-white/20 hover:bg-white/30 backdrop-blur-sm border-0 ${
-                      getSocialPlatformLogo(set.artists[0]?.spotify_url)?.color
-                    }`}
-                    title={`Open in ${
-                      getSocialPlatformLogo(set.artists[0]?.spotify_url)
-                        ?.platform
-                    }`}
-                  >
-                    <a
-                      href={set.artists[0]?.spotify_url}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                    >
-                      <img
-                        src={
-                          getSocialPlatformLogo(set.artists[0]?.spotify_url)
-                            ?.logo
-                        }
-                        alt={`${
-                          getSocialPlatformLogo(set.artists[0]?.spotify_url)
-                            ?.platform
-                        } logo`}
-                        className="h-3 w-3 object-contain"
-                      />
-                    </a>
-                  </Button>
-                )}
-              {set.artists[0]?.soundcloud_url &&
-                getSocialPlatformLogo(set.artists[0]?.soundcloud_url) && (
-                  <Button
-                    asChild
-                    variant="secondary"
-                    size="sm"
-                    className={`p-1 h-6 w-6 bg-white/20 hover:bg-white/30 backdrop-blur-sm border-0 ${
-                      getSocialPlatformLogo(set.artists[0]?.soundcloud_url)
-                        ?.color
-                    }`}
-                    title={`Open in ${
-                      getSocialPlatformLogo(set.artists[0]?.soundcloud_url)
-                        ?.platform
-                    }`}
-                  >
-                    <a
-                      href={set.artists[0]?.soundcloud_url}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                    >
-                      <img
-                        src={
-                          getSocialPlatformLogo(set.artists[0]?.soundcloud_url)
-                            ?.logo
-                        }
-                        alt={`${
-                          getSocialPlatformLogo(set.artists[0]?.soundcloud_url)
-                            ?.platform
-                        } logo`}
-                        className="h-3 w-3 object-contain"
-                      />
-                    </a>
-                  </Button>
-                )}
-            </div>
-
-            {set.artists
-              ?.flatMap((a) => a.artist_music_genres || [])
-              .filter(
-                (genre, index, self) =>
-                  self.findIndex(
-                    (g) => g.music_genre_id === genre.music_genre_id,
-                  ) === index,
-              )
-              .map((genre) => (
-                <GenreBadge
-                  key={genre.music_genre_id}
-                  genreId={genre.music_genre_id}
-                />
-              ))}
-
-            {/* Stage and Time Information */}
-            <div className="flex flex-wrap gap-2 mb-2">
-              {set.stages?.name && (
-                <div className="flex items-center gap-1 text-sm text-purple-200">
-                  <MapPin className="h-3 w-3" />
-                  <span>{set.stages.name}</span>
-                </div>
-              )}
-              {formatTimeRange(set.time_start, set.time_end, use24Hour) && (
-                <div className="flex items-center gap-1 text-sm text-purple-200">
-                  <Clock className="h-3 w-3" />
-                  <span>
-                    {formatTimeRange(set.time_start, set.time_end, use24Hour)}
-                  </span>
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-
-        {set.description && (
-          <CardDescription className="text-purple-200 text-sm leading-relaxed">
-            {set.description}
-          </CardDescription>
-        )}
-      </CardHeader>
-
-      <CardContent>
-        {/* Voting System */}
-        <div className="space-y-3">
-          <div className="flex items-center gap-2">
-            <Button
-              variant={userVote === 2 ? "default" : "outline"}
-              size="default"
-              onClick={() => handleVote(2)}
-              disabled={votingLoading}
-              className={`flex-1 ${
-                userVote === 2
-                  ? "bg-orange-600 hover:bg-orange-700"
-                  : "border-orange-400 text-orange-400 hover:bg-orange-400 hover:text-white"
-              }`}
-            >
-              <Star className="h-4 w-4 mr-2" />
-              Must go ({getVoteCount(2)})
-            </Button>
-            {votingLoading && (
-              <div className="h-4 w-4 animate-spin rounded-full border-2 border-orange-400 border-t-transparent" />
-            )}
-          </div>
-          <div className="flex items-center gap-2">
-            <Button
-              variant={userVote === 1 ? "default" : "outline"}
-              size="default"
-              onClick={() => handleVote(1)}
-              disabled={votingLoading}
-              className={`flex-1 ${
-                userVote === 1
-                  ? "bg-blue-600 hover:bg-blue-700"
-                  : "border-blue-400 text-blue-400 hover:bg-blue-400 hover:text-white"
-              }`}
-            >
-              <Heart className="h-4 w-4 mr-2" />
-              Interested ({getVoteCount(1)})
-            </Button>
-            {votingLoading && (
-              <div className="h-4 w-4 animate-spin rounded-full border-2 border-blue-400 border-t-transparent" />
-            )}
-          </div>
-          <div className="flex items-center gap-2">
-            <Button
-              variant={userVote === -1 ? "default" : "outline"}
-              size="default"
-              onClick={() => handleVote(-1)}
-              disabled={votingLoading}
-              className={`flex-1 ${
-                userVote === -1
-                  ? "bg-gray-600 hover:bg-gray-700"
-                  : "border-gray-400 text-gray-400 hover:bg-gray-400 hover:text-white"
-              }`}
-            >
-              <X className="h-4 w-4 mr-2" />
-              Won't go ({getVoteCount(-1)})
-            </Button>
-            {votingLoading && (
-              <div className="h-4 w-4 animate-spin rounded-full border-2 border-gray-400 border-t-transparent" />
-            )}
-          </div>
-        </div>
-      </CardContent>
-    </Card>
-  );
-};
diff --git a/src/components/Index/SetListItem.tsx b/src/components/Index/SetListItem.tsx
deleted file mode 100644
index b851bdb..0000000
--- a/src/components/Index/SetListItem.tsx
+++ /dev/null
@@ -1,492 +0,0 @@
-import { Link } from "react-router-dom";
-import { Button } from "@/components/ui/button";
-import { Star, Heart, X, MapPin, Clock, Eye, EyeOff } from "lucide-react";
-import { useToast } from "@/hooks/use-toast";
-import { formatTimeRange } from "@/lib/timeUtils";
-import { User } from "@supabase/supabase-js";
-import { FestivalSet } from "@/services/queries";
-import { ArtistImageLoader } from "../ArtistImageLoader";
-import { GenreBadge } from "./GenreBadge";
-
-interface SetListItemProps {
-  set: FestivalSet;
-  userVote?: number;
-  userKnowledge?: boolean;
-  votingLoading?: boolean;
-  onVote: (
-    setId: string,
-    voteType: number,
-  ) => Promise<{ requiresAuth: boolean }>;
-  onKnowledgeToggle: (setId: string) => Promise<{ requiresAuth: boolean }>;
-  onAuthRequired: () => void;
-  user?: User;
-  use24Hour?: boolean;
-}
-
-export function SetListItem({
-  set,
-  userVote,
-  userKnowledge,
-  votingLoading,
-  onVote,
-  onKnowledgeToggle,
-  onAuthRequired,
-  use24Hour = false,
-}: SetListItemProps) {
-  const { toast } = useToast();
-
-  const handleVote = async (voteType: number) => {
-    const result = await onVote(set.id, voteType);
-    if (result.requiresAuth) {
-      onAuthRequired();
-    }
-  };
-
-  const handleKnowledgeToggle = async () => {
-    const result = await onKnowledgeToggle(set.id);
-    if (result.requiresAuth) {
-      onAuthRequired();
-    } else {
-      // Show toast notification
-      const newKnowledgeState = !userKnowledge;
-      toast({
-        title: `${set.name} is ${newKnowledgeState ? "known" : "unknown"}`,
-        duration: 2000,
-      });
-    }
-  };
-
-  const getVoteCount = (voteType: number) => {
-    return set.votes.filter((vote) => vote.vote_type === voteType).length;
-  };
-
-  const getSocialPlatformLogo = (url: string) => {
-    if (url.includes("spotify.com")) {
-      return {
-        logo: "https://storage.googleapis.com/pr-newsroom-wp/1/2023/05/Spotify_Primary_Logo_RGB_Green.png",
-        platform: "Spotify",
-        color: "text-green-400 hover:text-green-300",
-      };
-    }
-    if (url.includes("soundcloud.com")) {
-      return {
-        logo: "https://d21buns5ku92am.cloudfront.net/26628/documents/54546-1717072325-sc-logo-cloud-black-7412d7.svg",
-        platform: "SoundCloud",
-        color: "text-orange-400 hover:text-orange-300",
-      };
-    }
-    return null;
-  };
-
-  return (
-    <div
-      className="bg-white/10 backdrop-blur-md border-purple-400/30 hover:bg-white/15 transition-all duration-300 rounded-lg p-4"
-      data-testid="artist-item"
-    >
-      {/* Mobile Layout (sm and below) */}
-      <div className="block md:hidden space-y-3">
-        {/* Top Row: Image + Basic Info */}
-        <div className="flex items-start gap-3 relative">
-          <Link to={`./sets/${set.slug}`} className="flex-shrink-0">
-            <ArtistImageLoader
-              src={set.artists[0]?.image_url}
-              alt={set.name}
-              className="w-12 h-12 rounded-lg overflow-hidden hover:opacity-90 transition-opacity cursor-pointer"
-            />
-          </Link>
-          <div className="flex-1 min-w-0">
-            <div className="flex items-center gap-2 mb-1">
-              <h3 className="text-white text-base font-semibold truncate">
-                {set.name}
-              </h3>
-
-              {/* Knowledge Toggle */}
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={handleKnowledgeToggle}
-                className={`p-1 h-6 w-6 ${
-                  userKnowledge
-                    ? "text-purple-400 hover:text-purple-300"
-                    : "text-purple-600 hover:text-purple-500"
-                }`}
-                title={userKnowledge ? "I know this artist" : "Mark as known"}
-              >
-                {userKnowledge ? (
-                  <Eye className="h-3 w-3" />
-                ) : (
-                  <EyeOff className="h-3 w-3" />
-                )}
-              </Button>
-
-              {/* Social Links - small icons next to name */}
-              {set.artists[0]?.spotify_url &&
-                getSocialPlatformLogo(set.artists[0]?.spotify_url) && (
-                  <Button
-                    asChild
-                    variant="secondary"
-                    size="sm"
-                    className={`p-1 h-6 w-6 bg-white/20 hover:bg-white/30 backdrop-blur-sm border-0 ${
-                      getSocialPlatformLogo(set.artists[0]?.spotify_url)?.color
-                    }`}
-                    title={`Open in ${
-                      getSocialPlatformLogo(set.artists[0]?.spotify_url)
-                        ?.platform
-                    }`}
-                  >
-                    <a
-                      href={set.artists[0]?.spotify_url}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                    >
-                      <img
-                        src={
-                          getSocialPlatformLogo(set.artists[0]?.spotify_url)
-                            ?.logo
-                        }
-                        alt={`${
-                          getSocialPlatformLogo(set.artists[0]?.spotify_url)
-                            ?.platform
-                        } logo`}
-                        className="h-3 w-3 object-contain"
-                      />
-                    </a>
-                  </Button>
-                )}
-              {set.artists[0]?.soundcloud_url &&
-                getSocialPlatformLogo(set.artists[0]?.soundcloud_url) && (
-                  <Button
-                    asChild
-                    variant="secondary"
-                    size="sm"
-                    className={`p-1 h-6 w-6 bg-white/20 hover:bg-white/30 backdrop-blur-sm border-0 ${
-                      getSocialPlatformLogo(set.artists[0]?.soundcloud_url)
-                        ?.color
-                    }`}
-                    title={`Open in ${
-                      getSocialPlatformLogo(set.artists[0]?.soundcloud_url)
-                        ?.platform
-                    }`}
-                  >
-                    <a
-                      href={set.artists[0]?.soundcloud_url}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                    >
-                      <img
-                        src={
-                          getSocialPlatformLogo(set.artists[0]?.soundcloud_url)
-                            ?.logo
-                        }
-                        alt={`${
-                          getSocialPlatformLogo(set.artists[0]?.soundcloud_url)
-                            ?.platform
-                        } logo`}
-                        className="h-3 w-3 object-contain"
-                      />
-                    </a>
-                  </Button>
-                )}
-            </div>
-
-            <div className="flex flex-wrap items-center gap-1 mt-1">
-              {set.artists
-                ?.flatMap((a) => a.artist_music_genres || [])
-                .filter(
-                  (genre, index, self) =>
-                    self.findIndex(
-                      (g) => g.music_genre_id === genre.music_genre_id,
-                    ) === index,
-                )
-                .map((genre) => (
-                  <GenreBadge
-                    key={genre.music_genre_id}
-                    genreId={genre.music_genre_id}
-                  />
-                ))}
-              {set.stages?.name && (
-                <div className="flex items-center gap-1 text-xs text-purple-200">
-                  <MapPin className="h-3 w-3" />
-                  <span>{set.stages.name}</span>
-                </div>
-              )}
-              {formatTimeRange(set.time_start, set.time_end, use24Hour) && (
-                <div className="flex items-center gap-1 text-xs text-purple-200">
-                  <Clock className="h-3 w-3" />
-                  <span>
-                    {formatTimeRange(set.time_start, set.time_end, use24Hour)}
-                  </span>
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-
-        {/* Description */}
-        {set.description && (
-          <p className="text-purple-200 text-sm line-clamp-2">
-            {set.description}
-          </p>
-        )}
-
-        {/* Voting Buttons */}
-        <div className="flex flex-wrap gap-2">
-          <Button
-            variant={userVote === 2 ? "default" : "outline"}
-            size="sm"
-            onClick={() => handleVote(2)}
-            disabled={votingLoading}
-            className={`text-xs ${
-              userVote === 2
-                ? "bg-orange-600 hover:bg-orange-700"
-                : "border-orange-400 text-orange-400 hover:bg-orange-400 hover:text-white"
-            }`}
-            title="Must go"
-          >
-            <Star className="h-3 w-3 mr-1" />
-            {getVoteCount(2)}
-          </Button>
-          <Button
-            variant={userVote === 1 ? "default" : "outline"}
-            size="sm"
-            onClick={() => handleVote(1)}
-            disabled={votingLoading}
-            className={`text-xs ${
-              userVote === 1
-                ? "bg-blue-600 hover:bg-blue-700"
-                : "border-blue-400 text-blue-400 hover:bg-blue-400 hover:text-white"
-            }`}
-            title="Interested"
-          >
-            <Heart className="h-3 w-3 mr-1" />
-            {getVoteCount(1)}
-          </Button>
-          <Button
-            variant={userVote === -1 ? "default" : "outline"}
-            size="sm"
-            onClick={() => handleVote(-1)}
-            disabled={votingLoading}
-            className={`text-xs ${
-              userVote === -1
-                ? "bg-gray-600 hover:bg-gray-700"
-                : "border-gray-400 text-gray-400 hover:bg-gray-400 hover:text-white"
-            }`}
-            title="Won't go"
-          >
-            <X className="h-3 w-3 mr-1" />
-            {getVoteCount(-1)}
-          </Button>
-          {votingLoading && (
-            <div className="h-4 w-4 animate-spin rounded-full border-2 border-purple-400 border-t-transparent" />
-          )}
-        </div>
-      </div>
-
-      {/* Desktop Layout (md and above) */}
-      <div className="hidden md:flex items-center gap-4 relative">
-        {/* Artist Image - clickable for details */}
-        <Link to={`./sets/${set.slug}`} className="flex-shrink-0">
-          <ArtistImageLoader
-            src={set.artists[0]?.image_url}
-            alt={set.name}
-            className="w-16 h-16 rounded-lg overflow-hidden hover:opacity-90 transition-opacity cursor-pointer"
-          />
-        </Link>
-
-        {/* Main Content */}
-        <div className="flex-1 min-w-0">
-          <div className="flex items-start justify-between mb-2">
-            <div className="flex-1 min-w-0">
-              <div className="flex items-center gap-2 mb-1">
-                <h3 className="text-white text-lg font-semibold truncate">
-                  {set.name}
-                </h3>
-
-                {/* Knowledge Toggle */}
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={handleKnowledgeToggle}
-                  className={`p-1 h-6 w-6 ${
-                    userKnowledge
-                      ? "text-purple-400 hover:text-purple-300"
-                      : "text-purple-600 hover:text-purple-500"
-                  }`}
-                  title={userKnowledge ? "I know this artist" : "Mark as known"}
-                >
-                  {userKnowledge ? (
-                    <Eye className="h-3 w-3" />
-                  ) : (
-                    <EyeOff className="h-3 w-3" />
-                  )}
-                </Button>
-
-                {/* Social Links - small icons next to name */}
-                {set.artists[0]?.spotify_url &&
-                  getSocialPlatformLogo(set.artists[0]?.spotify_url) && (
-                    <Button
-                      asChild
-                      variant="secondary"
-                      size="sm"
-                      className={`p-1 h-6 w-6 bg-white/20 hover:bg-white/30 backdrop-blur-sm border-0 ${
-                        getSocialPlatformLogo(set.artists[0]?.spotify_url)
-                          ?.color
-                      }`}
-                      title={`Open in ${
-                        getSocialPlatformLogo(set.artists[0]?.spotify_url)
-                          ?.platform
-                      }`}
-                    >
-                      <a
-                        href={set.artists[0]?.spotify_url}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                      >
-                        <img
-                          src={
-                            getSocialPlatformLogo(set.artists[0]?.spotify_url)
-                              ?.logo
-                          }
-                          alt={`${
-                            getSocialPlatformLogo(set.artists[0]?.spotify_url)
-                              ?.platform
-                          } logo`}
-                          className="h-3 w-3 object-contain"
-                        />
-                      </a>
-                    </Button>
-                  )}
-                {set.artists[0]?.soundcloud_url &&
-                  getSocialPlatformLogo(set.artists[0]?.soundcloud_url) && (
-                    <Button
-                      asChild
-                      variant="secondary"
-                      size="sm"
-                      className={`p-1 h-6 w-6 bg-white/20 hover:bg-white/30 backdrop-blur-sm border-0 ${
-                        getSocialPlatformLogo(set.artists[0]?.soundcloud_url)
-                          ?.color
-                      }`}
-                      title={`Open in ${
-                        getSocialPlatformLogo(set.artists[0]?.soundcloud_url)
-                          ?.platform
-                      }`}
-                    >
-                      <a
-                        href={set.artists[0]?.soundcloud_url}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                      >
-                        <img
-                          src={
-                            getSocialPlatformLogo(
-                              set.artists[0]?.soundcloud_url,
-                            )?.logo
-                          }
-                          alt={`${
-                            getSocialPlatformLogo(
-                              set.artists[0]?.soundcloud_url,
-                            )?.platform
-                          } logo`}
-                          className="h-3 w-3 object-contain"
-                        />
-                      </a>
-                    </Button>
-                  )}
-              </div>
-
-              <div className="flex items-center gap-2 mt-1">
-                {set.artists
-                  ?.flatMap((a) => a.artist_music_genres || [])
-                  .filter(
-                    (genre, index, self) =>
-                      self.findIndex(
-                        (g) => g.music_genre_id === genre.music_genre_id,
-                      ) === index,
-                  )
-                  .map((genre) => (
-                    <GenreBadge
-                      key={genre.music_genre_id}
-                      genreId={genre.music_genre_id}
-                    />
-                  ))}
-                {set.stages?.name && (
-                  <div className="flex items-center gap-1 text-xs text-purple-200">
-                    <MapPin className="h-3 w-3" />
-                    <span>{set.stages.name}</span>
-                  </div>
-                )}
-                {formatTimeRange(set.time_start, set.time_end, use24Hour) && (
-                  <div className="flex items-center gap-1 text-xs text-purple-200">
-                    <Clock className="h-3 w-3" />
-                    <span>
-                      {formatTimeRange(set.time_start, set.time_end, use24Hour)}
-                    </span>
-                  </div>
-                )}
-              </div>
-            </div>
-          </div>
-
-          {set.description && (
-            <p className="text-purple-200 text-sm line-clamp-2 mb-2">
-              {set.description}
-            </p>
-          )}
-        </div>
-
-        {/* Actions */}
-        <div className="flex items-center gap-2 flex-shrink-0">
-          {/* Voting System */}
-          <Button
-            variant={userVote === 2 ? "default" : "outline"}
-            size="sm"
-            onClick={() => handleVote(2)}
-            disabled={votingLoading}
-            className={
-              userVote === 2
-                ? "bg-orange-600 hover:bg-orange-700"
-                : "border-orange-400 text-orange-400 hover:bg-orange-400 hover:text-white"
-            }
-            title="Must go"
-          >
-            <Star className="h-3 w-3 mr-1" />
-            {getVoteCount(2)}
-          </Button>
-          <Button
-            variant={userVote === 1 ? "default" : "outline"}
-            size="sm"
-            onClick={() => handleVote(1)}
-            disabled={votingLoading}
-            className={
-              userVote === 1
-                ? "bg-blue-600 hover:bg-blue-700"
-                : "border-blue-400 text-blue-400 hover:bg-blue-400 hover:text-white"
-            }
-            title="Interested"
-          >
-            <Heart className="h-3 w-3 mr-1" />
-            {getVoteCount(1)}
-          </Button>
-          <Button
-            variant={userVote === -1 ? "default" : "outline"}
-            size="sm"
-            onClick={() => handleVote(-1)}
-            disabled={votingLoading}
-            className={
-              userVote === -1
-                ? "bg-gray-600 hover:bg-gray-700"
-                : "border-gray-400 text-gray-400 hover:bg-gray-400 hover:text-white"
-            }
-            title="Won't go"
-          >
-            <X className="h-3 w-3 mr-1" />
-            {getVoteCount(-1)}
-          </Button>
-          {votingLoading && (
-            <div className="h-4 w-4 animate-spin rounded-full border-2 border-purple-400 border-t-transparent" />
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/components/Index/SetsPanel.tsx b/src/components/Index/SetsPanel.tsx
index c0c5a57..d7d2399 100644
--- a/src/components/Index/SetsPanel.tsx
+++ b/src/components/Index/SetsPanel.tsx
@@ -3,32 +3,31 @@ import { User } from "@supabase/supabase-js";
 import { useOfflineVoting } from "@/hooks/useOfflineVoting";
 import { FestivalSet } from "@/services/queries";
 
-import { SetCard } from "./SetCard";
-import { SetListItem } from "./SetListItem";
 import { EmptyArtistsState } from "./EmptyArtistsState";
+import { FestivalSetProvider } from "./FestivalSetContext";
+import { SingleArtistSetListItem } from "./SingleArtistSetListItem";
+import { MultiArtistSetListItem } from "./MultiArtistSetListItem";
 
 export function SetsPanel({
   sets,
-  isGrid,
   user,
   use24Hour,
   openAuthDialog,
   onLockSort,
 }: {
   sets: Array<FestivalSet>;
-  isGrid: boolean;
   user: User | null;
   use24Hour: boolean;
   openAuthDialog(): void;
   onLockSort: () => void;
 }) {
-  const handleVoteWithLock = async (setId: string, voteType: number) => {
+  async function handleVoteWithLock(setId: string, voteType: number) {
     const result = await handleVote(setId, voteType);
     if (!result.requiresAuth) {
       onLockSort();
     }
     return result;
-  };
+  }
 
   const { userVotes, votingLoading, handleVote } = useOfflineVoting(
     user,
@@ -39,35 +38,10 @@ export function SetsPanel({
     return <EmptyArtistsState />;
   }
 
-  if (isGrid) {
-    return (
-      <div
-        className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"
-        data-testid="artists-grid"
-      >
-        {sets.map((set) => (
-          <SetCard
-            key={set.id}
-            set={set}
-            userVote={userVotes[set.id]}
-            userKnowledge={false}
-            votingLoading={votingLoading[set.id]}
-            onVote={handleVoteWithLock}
-            onKnowledgeToggle={async (_: string) => ({
-              requiresAuth: !user,
-            })}
-            onAuthRequired={openAuthDialog}
-            use24Hour={use24Hour}
-          />
-        ))}
-      </div>
-    );
-  }
-
   return (
     <div className="space-y-4" data-testid="artists-list">
       {sets.map((set) => (
-        <SetListItem
+        <FestivalSetProvider
           key={set.id}
           set={set}
           userVote={userVotes[set.id]}
@@ -79,7 +53,13 @@ export function SetsPanel({
           })}
           onAuthRequired={openAuthDialog}
           use24Hour={use24Hour}
-        />
+        >
+          {set.artists.length > 1 ? (
+            <MultiArtistSetListItem />
+          ) : (
+            <SingleArtistSetListItem />
+          )}
+        </FestivalSetProvider>
       ))}
     </div>
   );
diff --git a/src/components/Index/SingleArtistSetCard.tsx b/src/components/Index/SingleArtistSetCard.tsx
new file mode 100644
index 0000000..217a9f9
--- /dev/null
+++ b/src/components/Index/SingleArtistSetCard.tsx
@@ -0,0 +1,29 @@
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { SetHeader } from "./shared/SetHeader";
+import { SetImage } from "./shared/SetImage";
+import { SetMetadata } from "./shared/SetMetadata";
+import { SetDescription } from "./shared/SetDescription";
+import { SetVotingButtons } from "./shared/SetVotingButtons";
+
+export function SingleArtistSetCard() {
+  return (
+    <Card className="bg-white/10 backdrop-blur-md border-purple-400/30 hover:bg-white/15 transition-all duration-300 overflow-hidden">
+      <CardHeader className="pb-4">
+        <SetImage />
+
+        <div className="flex items-start justify-between">
+          <div className="flex-1">
+            <SetHeader />
+            <SetMetadata />
+          </div>
+        </div>
+
+        <SetDescription />
+      </CardHeader>
+
+      <CardContent>
+        <SetVotingButtons />
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/src/components/Index/SingleArtistSetListItem.tsx b/src/components/Index/SingleArtistSetListItem.tsx
new file mode 100644
index 0000000..626a790
--- /dev/null
+++ b/src/components/Index/SingleArtistSetListItem.tsx
@@ -0,0 +1,51 @@
+import { SetHeader } from "./shared/SetHeader";
+import { SetImage } from "./shared/SetImage";
+import { SetMetadata } from "./shared/SetMetadata";
+import { SetDescription } from "./shared/SetDescription";
+import { SetVotingButtons } from "./shared/SetVotingButtons";
+
+export function SingleArtistSetListItem() {
+  return (
+    <div
+      className="bg-white/10 backdrop-blur-md border-purple-400/30 hover:bg-white/15 transition-all duration-300 rounded-lg p-4"
+      data-testid="artist-item"
+    >
+      {/* Mobile Layout (sm and below) */}
+      <div className="block md:hidden space-y-3">
+        <div className="flex items-start gap-3 relative">
+          <SetImage size="sm" />
+          <div className="flex-1 min-w-0">
+            <SetHeader size="sm" />
+
+            <SetMetadata />
+          </div>
+        </div>
+
+        <SetDescription className="text-purple-200 text-sm" />
+
+        <SetVotingButtons size="sm" layout="horizontal" />
+      </div>
+
+      {/* Desktop Layout (md and above) */}
+      <div className="hidden md:flex items-center gap-4 relative">
+        <SetImage size="md" />
+
+        <div className="flex-1 min-w-0">
+          <div className="flex items-start justify-between mb-2">
+            <div className="flex-1 min-w-0">
+              <SetHeader size="sm" />
+
+              <SetMetadata />
+            </div>
+          </div>
+
+          <SetDescription className="text-purple-200 text-sm line-clamp-2 mb-2" />
+        </div>
+
+        <div className="flex items-center gap-2 flex-shrink-0">
+          <SetVotingButtons size="sm" layout="horizontal" />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Index/shared/MultiArtistInfo.tsx b/src/components/Index/shared/MultiArtistInfo.tsx
new file mode 100644
index 0000000..018df8a
--- /dev/null
+++ b/src/components/Index/shared/MultiArtistInfo.tsx
@@ -0,0 +1,29 @@
+import { SocialPlatformLinkList } from "./SocialPlatformLinkList";
+
+interface Artist {
+  id: string;
+  name: string;
+  spotify_url?: string | null;
+  soundcloud_url?: string | null;
+}
+
+interface MultiArtistInfoProps {
+  artists: Artist[];
+  size?: "sm" | "md";
+}
+
+export function MultiArtistInfo({
+  artists,
+  size = "md",
+}: MultiArtistInfoProps) {
+  return (
+    <div className="flex gap-4">
+      {artists.map((artist) => (
+        <div key={artist.id} className="flex items-center gap-2">
+          <span className="text-xs text-purple-200 mr-1">{artist.name}</span>
+          <SocialPlatformLinkList artist={artist} size={size} />
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/src/components/Index/shared/SetDescription.tsx b/src/components/Index/shared/SetDescription.tsx
new file mode 100644
index 0000000..a128b26
--- /dev/null
+++ b/src/components/Index/shared/SetDescription.tsx
@@ -0,0 +1,35 @@
+import { CardDescription } from "@/components/ui/card";
+import { MultiArtistInfo } from "./MultiArtistInfo";
+import { useFestivalSet } from "../FestivalSetContext";
+
+interface SetDescriptionProps {
+  className?: string;
+}
+
+export function SetDescription({
+  className = "text-purple-200 text-sm leading-relaxed",
+}: SetDescriptionProps) {
+  const { set, isMultiArtist } = useFestivalSet();
+
+  if (isMultiArtist) {
+    return (
+      <CardDescription className={className}>
+        <div className="space-y-3">
+          <div>{set.description}</div>
+          <div className="flex gap-4 items-center">
+            <span className="font-medium">Artists:</span>{" "}
+            <MultiArtistInfo artists={set.artists} />
+          </div>
+        </div>
+      </CardDescription>
+    );
+  }
+
+  if (set.description) {
+    return (
+      <CardDescription className={className}>{set.description}</CardDescription>
+    );
+  }
+
+  return null;
+}
diff --git a/src/components/Index/shared/SetHeader.tsx b/src/components/Index/shared/SetHeader.tsx
new file mode 100644
index 0000000..ba6e82d
--- /dev/null
+++ b/src/components/Index/shared/SetHeader.tsx
@@ -0,0 +1,74 @@
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { CardTitle } from "@/components/ui/card";
+import { Eye, EyeOff, Users } from "lucide-react";
+import { SocialPlatformLinkList } from "./SocialPlatformLinkList";
+import { useFestivalSet } from "../FestivalSetContext";
+
+interface SetHeaderProps {
+  size?: "sm" | "lg";
+}
+
+export function SetHeader({ size = "lg" }: SetHeaderProps) {
+  const {
+    set,
+    userKnowledge,
+    onKnowledgeToggle,
+    onAuthRequired,
+    isMultiArtist,
+  } = useFestivalSet();
+
+  async function handleKnowledgeToggle() {
+    const result = await onKnowledgeToggle(set.id);
+    if (result.requiresAuth) {
+      onAuthRequired();
+    }
+  }
+  const titleClass =
+    size === "sm"
+      ? "text-white text-lg font-semibold truncate"
+      : "text-white text-xl";
+
+  return (
+    <div className="flex items-center gap-2 mb-2">
+      <CardTitle className={titleClass}>{set.name}</CardTitle>
+
+      {isMultiArtist && (
+        <Badge
+          variant="secondary"
+          className="bg-purple-600/50 text-purple-100 text-xs"
+        >
+          <Users className="h-3 w-3 mr-1" />
+          {set.artists.length}
+        </Badge>
+      )}
+
+      {/* Knowledge Toggle */}
+      <Button
+        variant="ghost"
+        size="sm"
+        onClick={handleKnowledgeToggle}
+        className={`p-1 h-6 w-6 ${
+          userKnowledge
+            ? "text-purple-400 hover:text-purple-300"
+            : "text-purple-600 hover:text-purple-500"
+        }`}
+        title={userKnowledge ? "I know this artist" : "Mark as known"}
+      >
+        {userKnowledge ? (
+          <Eye className="h-3 w-3" />
+        ) : (
+          <EyeOff className="h-3 w-3" />
+        )}
+      </Button>
+
+      {/* Social Platform Links */}
+      {!isMultiArtist && set.artists.length > 0 && (
+        <SocialPlatformLinkList
+          artist={set.artists[0]}
+          size={size === "sm" ? "sm" : "md"}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/src/components/Index/shared/SetImage.tsx b/src/components/Index/shared/SetImage.tsx
new file mode 100644
index 0000000..0b2850b
--- /dev/null
+++ b/src/components/Index/shared/SetImage.tsx
@@ -0,0 +1,39 @@
+import { Link } from "react-router-dom";
+import { ArtistImageLoader } from "@/components/ArtistImageLoader";
+import { MixedArtistImage } from "@/components/SetDetail/MixedArtistImage";
+import { useFestivalSet } from "../FestivalSetContext";
+
+interface SetImageProps {
+  className?: string;
+  size?: "sm" | "md" | "lg";
+}
+
+export function SetImage({ className = "", size = "lg" }: SetImageProps) {
+  const { set, isMultiArtist } = useFestivalSet();
+
+  const sizeClasses = {
+    sm: "w-12 h-12",
+    md: "w-16 h-16",
+    lg: "aspect-square w-full mb-4",
+  };
+
+  const containerClass = `${sizeClasses[size]} ${className} overflow-hidden rounded-lg hover:opacity-90 transition-opacity cursor-pointer`;
+
+  return (
+    <Link to={`./sets/${set.slug}`} className="block flex-shrink-0">
+      {isMultiArtist ? (
+        <MixedArtistImage
+          artists={set.artists}
+          setName={set.name}
+          className={containerClass}
+        />
+      ) : (
+        <ArtistImageLoader
+          src={set.artists[0]?.image_url}
+          alt={set.name}
+          className={containerClass}
+        />
+      )}
+    </Link>
+  );
+}
diff --git a/src/components/Index/shared/SetMetadata.tsx b/src/components/Index/shared/SetMetadata.tsx
new file mode 100644
index 0000000..bf8e592
--- /dev/null
+++ b/src/components/Index/shared/SetMetadata.tsx
@@ -0,0 +1,54 @@
+import { MapPin, Clock } from "lucide-react";
+import { formatTimeRange } from "@/lib/timeUtils";
+import { GenreBadge } from "../GenreBadge";
+import { useFestivalSet } from "../FestivalSetContext";
+
+export function SetMetadata() {
+  const { set, use24Hour } = useFestivalSet();
+  const uniqueGenres = set.artists
+    ?.flatMap((a) => a.artist_music_genres || [])
+    .filter(
+      (genre, index, self) =>
+        self.findIndex((g) => g.music_genre_id === genre.music_genre_id) ===
+        index,
+    );
+
+  const timeRangeFormatted = formatTimeRange(
+    set.time_start,
+    set.time_end,
+    use24Hour,
+  );
+
+  return (
+    <div className="flex items-center flex-wrap gap-2">
+      {/* Genres */}
+      {uniqueGenres.length > 0 && (
+        <div className="flex flex-wrap gap-1 items-center">
+          {uniqueGenres?.map((genre) => (
+            <GenreBadge
+              key={genre.music_genre_id}
+              genreId={genre.music_genre_id}
+              size="sm"
+            />
+          ))}
+        </div>
+      )}
+
+      {/* Stage and Time Information */}
+      <div className="flex flex-wrap gap-2 items-center">
+        {set.stages?.name && (
+          <div className="flex items-center gap-1 text-purple-200 text-xs">
+            <MapPin className="h-3 w-3" />
+            <span>{set.stages.name}</span>
+          </div>
+        )}
+        {timeRangeFormatted && (
+          <div className="flex items-center gap-1 text-sm text-purple-200">
+            <Clock className="h-3 w-3" />
+            <span>{timeRangeFormatted}</span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Index/shared/SetVotingButtons.tsx b/src/components/Index/shared/SetVotingButtons.tsx
new file mode 100644
index 0000000..4e9983e
--- /dev/null
+++ b/src/components/Index/shared/SetVotingButtons.tsx
@@ -0,0 +1,100 @@
+import { Button } from "@/components/ui/button";
+import { Star, Heart, X } from "lucide-react";
+import { useFestivalSet } from "../FestivalSetContext";
+
+interface SetVotingButtonsProps {
+  size?: "sm" | "default";
+  layout?: "horizontal" | "vertical";
+}
+
+export function SetVotingButtons({
+  size = "default",
+  layout = "vertical",
+}: SetVotingButtonsProps) {
+  const { set, userVote, votingLoading, onVote, onAuthRequired, getVoteCount } =
+    useFestivalSet();
+
+  const handleVote = async (voteType: number) => {
+    const result = await onVote(set.id, voteType);
+    if (result.requiresAuth) {
+      onAuthRequired();
+    }
+  };
+  const containerClass =
+    layout === "horizontal" ? "flex items-center gap-2" : "space-y-3";
+
+  const buttonClass = layout === "horizontal" ? "" : "flex-1";
+
+  return (
+    <div className={containerClass}>
+      <div className="flex items-center gap-2">
+        <Button
+          variant={userVote === 2 ? "default" : "outline"}
+          size={size}
+          onClick={() => handleVote(2)}
+          disabled={votingLoading}
+          className={`${buttonClass} ${
+            userVote === 2
+              ? "bg-orange-600 hover:bg-orange-700"
+              : "border-orange-400 text-orange-400 hover:bg-orange-400 hover:text-white"
+          }`}
+          title="Must go"
+        >
+          <Star className="h-4 w-4 mr-2" />
+          {layout === "horizontal"
+            ? getVoteCount(2)
+            : `Must go (${getVoteCount(2)})`}
+        </Button>
+        {votingLoading && (
+          <div className="h-4 w-4 animate-spin rounded-full border-2 border-orange-400 border-t-transparent" />
+        )}
+      </div>
+
+      <div className="flex items-center gap-2">
+        <Button
+          variant={userVote === 1 ? "default" : "outline"}
+          size={size}
+          onClick={() => handleVote(1)}
+          disabled={votingLoading}
+          className={`${buttonClass} ${
+            userVote === 1
+              ? "bg-blue-600 hover:bg-blue-700"
+              : "border-blue-400 text-blue-400 hover:bg-blue-400 hover:text-white"
+          }`}
+          title="Interested"
+        >
+          <Heart className="h-4 w-4 mr-2" />
+          {layout === "horizontal"
+            ? getVoteCount(1)
+            : `Interested (${getVoteCount(1)})`}
+        </Button>
+        {votingLoading && (
+          <div className="h-4 w-4 animate-spin rounded-full border-2 border-blue-400 border-t-transparent" />
+        )}
+      </div>
+
+      <div className="flex items-center gap-2">
+        <Button
+          variant={userVote === -1 ? "default" : "outline"}
+          size={size}
+          onClick={() => handleVote(-1)}
+          disabled={votingLoading}
+          className={`${buttonClass} ${
+            userVote === -1
+              ? "bg-gray-600 hover:bg-gray-700"
+              : "border-gray-400 text-gray-400 hover:bg-gray-400 hover:text-white"
+          }`}
+          title="Won't go"
+        >
+          <X className="h-4 w-4 mr-2" />
+          {layout === "horizontal"
+            ? getVoteCount(-1)
+            : `Won't go (${getVoteCount(-1)})`}
+        </Button>
+        {votingLoading && (
+          <div className="h-4 w-4 animate-spin rounded-full border-2 border-gray-400 border-t-transparent" />
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Index/shared/SocialPlatformLink.tsx b/src/components/Index/shared/SocialPlatformLink.tsx
new file mode 100644
index 0000000..71e0061
--- /dev/null
+++ b/src/components/Index/shared/SocialPlatformLink.tsx
@@ -0,0 +1,41 @@
+import { Button } from "@/components/ui/button";
+import { getSocialPlatformLogo } from "./SocialPlatformUtils";
+
+interface SocialPlatformLinkProps {
+  url: string;
+  artistName: string;
+  size?: "sm" | "md";
+}
+
+export function SocialPlatformLink({
+  url,
+  artistName,
+  size = "md",
+}: SocialPlatformLinkProps) {
+  const platformInfo = getSocialPlatformLogo(url);
+
+  if (!platformInfo) {
+    return null;
+  }
+
+  const buttonSize = size === "sm" ? "h-5 w-5" : "h-6 w-6";
+  const imageSize = size === "sm" ? "h-2.5 w-2.5" : "h-3 w-3";
+
+  return (
+    <Button
+      asChild
+      variant="secondary"
+      size="sm"
+      className={`p-1 ${buttonSize} bg-white/20 hover:bg-white/30 backdrop-blur-sm border-0 ${platformInfo.color}`}
+      title={`Open ${artistName} in ${platformInfo.platform}`}
+    >
+      <a href={url} target="_blank" rel="noopener noreferrer">
+        <img
+          src={platformInfo.logo}
+          alt={`${platformInfo.platform} logo`}
+          className={`${imageSize} object-contain`}
+        />
+      </a>
+    </Button>
+  );
+}
diff --git a/src/components/Index/shared/SocialPlatformLinkList.tsx b/src/components/Index/shared/SocialPlatformLinkList.tsx
new file mode 100644
index 0000000..12dae31
--- /dev/null
+++ b/src/components/Index/shared/SocialPlatformLinkList.tsx
@@ -0,0 +1,37 @@
+import { SocialPlatformLink } from "./SocialPlatformLink";
+
+interface Artist {
+  id: string;
+  name: string;
+  spotify_url?: string | null;
+  soundcloud_url?: string | null;
+}
+
+interface SocialPlatformLinkListProps {
+  artist: Artist;
+  size?: "sm" | "md";
+}
+
+export function SocialPlatformLinkList({
+  artist,
+  size = "md",
+}: SocialPlatformLinkListProps) {
+  return (
+    <div className="flex items-center gap-1">
+      {artist.spotify_url && (
+        <SocialPlatformLink
+          url={artist.spotify_url}
+          artistName={artist.name}
+          size={size}
+        />
+      )}
+      {artist.soundcloud_url && (
+        <SocialPlatformLink
+          url={artist.soundcloud_url}
+          artistName={artist.name}
+          size={size}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/src/components/Index/shared/SocialPlatformUtils.tsx b/src/components/Index/shared/SocialPlatformUtils.tsx
new file mode 100644
index 0000000..9d8cffd
--- /dev/null
+++ b/src/components/Index/shared/SocialPlatformUtils.tsx
@@ -0,0 +1,19 @@
+import socialPlatformLogos from "./social-platform-logos.json";
+
+export function getSocialPlatformLogo(url: string) {
+  if (url.includes("spotify.com")) {
+    return {
+      logo: socialPlatformLogos.spotify.logo,
+      platform: "Spotify",
+      color: "text-green-400 hover:text-green-300",
+    };
+  }
+  if (url.includes("soundcloud.com")) {
+    return {
+      logo: socialPlatformLogos.soundcloud.logo,
+      platform: "SoundCloud",
+      color: "text-orange-400 hover:text-orange-300",
+    };
+  }
+  return null;
+}
diff --git a/src/components/Index/shared/social-platform-logos.json b/src/components/Index/shared/social-platform-logos.json
new file mode 100644
index 0000000..0bae194
--- /dev/null
+++ b/src/components/Index/shared/social-platform-logos.json
@@ -0,0 +1,8 @@
+{
+  "spotify": {
+    "logo": "https://storage.googleapis.com/pr-newsroom-wp/1/2023/05/Spotify_Primary_Logo_RGB_Green.png"
+  },
+  "soundcloud": {
+    "logo": "https://d21buns5ku92am.cloudfront.net/26628/documents/54546-1717072325-sc-logo-cloud-black-7412d7.svg"
+  }
+}
diff --git a/src/components/SetDetail/IndividualArtistCard.tsx b/src/components/SetDetail/IndividualArtistCard.tsx
new file mode 100644
index 0000000..282cbec
--- /dev/null
+++ b/src/components/SetDetail/IndividualArtistCard.tsx
@@ -0,0 +1,106 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { ExternalLink, Music, Play } from "lucide-react";
+import { Artist } from "@/services/queries";
+import { GenreBadge } from "../Index/GenreBadge";
+import { ArtistImageLoader } from "../ArtistImageLoader";
+
+interface IndividualArtistCardProps {
+  artist: Artist;
+  showFullDetails?: boolean;
+}
+
+export function IndividualArtistCard({
+  artist,
+  showFullDetails = false,
+}: IndividualArtistCardProps) {
+  return (
+    <Card className="bg-white/5 backdrop-blur-sm border-purple-400/20">
+      {/* Artist Image */}
+      <div className="aspect-square overflow-hidden rounded-t-lg">
+        <ArtistImageLoader
+          src={artist.image_url}
+          alt={artist.name}
+          className="w-full h-full object-cover transition-transform hover:scale-105"
+        />
+      </div>
+
+      <CardHeader className="pb-3">
+        <CardTitle className="text-lg font-bold text-white">
+          {artist.name}
+        </CardTitle>
+
+        {/* Genres */}
+        <div className="flex flex-wrap gap-1">
+          {artist.artist_music_genres
+            ?.slice(0, showFullDetails ? undefined : 2)
+            .map((genre) => (
+              <GenreBadge
+                key={genre.music_genre_id}
+                genreId={genre.music_genre_id}
+                size="sm"
+              />
+            ))}
+          {!showFullDetails &&
+            artist.artist_music_genres &&
+            artist.artist_music_genres.length > 2 && (
+              <Badge
+                variant="outline"
+                className="text-xs border-purple-400/50 text-purple-300"
+              >
+                +{artist.artist_music_genres.length - 2}
+              </Badge>
+            )}
+        </div>
+      </CardHeader>
+
+      <CardContent className="pt-0">
+        {/* Description (only if showFullDetails) */}
+        {showFullDetails && artist.description && (
+          <p className="text-purple-200 text-sm mb-3 line-clamp-3">
+            {artist.description}
+          </p>
+        )}
+
+        {/* External Links */}
+        <div className="flex flex-wrap gap-2">
+          {artist.spotify_url && (
+            <Button
+              asChild
+              size="sm"
+              className="bg-green-600 hover:bg-green-700 text-xs"
+            >
+              <a
+                href={artist.spotify_url}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <Play className="h-3 w-3 mr-1" />
+                Spotify
+                <ExternalLink className="h-3 w-3 ml-1" />
+              </a>
+            </Button>
+          )}
+          {artist.soundcloud_url && (
+            <Button
+              asChild
+              size="sm"
+              className="bg-orange-600 hover:bg-orange-700 text-xs"
+            >
+              <a
+                href={artist.soundcloud_url}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <Music className="h-3 w-3 mr-1" />
+                SoundCloud
+                <ExternalLink className="h-3 w-3 ml-1" />
+              </a>
+            </Button>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/src/components/SetDetail/MixedArtistImage.tsx b/src/components/SetDetail/MixedArtistImage.tsx
new file mode 100644
index 0000000..529cf9a
--- /dev/null
+++ b/src/components/SetDetail/MixedArtistImage.tsx
@@ -0,0 +1,149 @@
+import { Artist } from "@/services/queries";
+import { ArtistImageLoader } from "../ArtistImageLoader";
+
+interface MixedArtistImageProps {
+  artists: Artist[];
+  setName: string;
+  className?: string;
+}
+
+export function MixedArtistImage({
+  artists,
+  setName,
+  className = "",
+}: MixedArtistImageProps) {
+  const artistsWithImages = artists.filter((artist) => artist.image_url);
+
+  // If no images available, show placeholder
+  if (artistsWithImages.length === 0) {
+    return (
+      <div
+        className={`bg-gradient-to-br from-purple-600 to-blue-600 flex items-center justify-center ${className}`}
+      >
+        <div className="text-white text-center p-4">
+          <div className="text-2xl font-bold mb-2">🎵</div>
+          {/* <div className="text-sm font-medium">{setName}</div> */}
+        </div>
+      </div>
+    );
+  }
+
+  // Single image - just show it
+  if (artistsWithImages.length === 1) {
+    return (
+      <ArtistImageLoader
+        src={artistsWithImages[0].image_url}
+        alt={setName}
+        className={className}
+      />
+    );
+  }
+
+  // Two images - split vertically
+  if (artistsWithImages.length === 2) {
+    return (
+      <div className={`relative overflow-hidden ${className}`}>
+        <div className="absolute inset-0 flex">
+          <div className="w-1/2">
+            <ArtistImageLoader
+              src={artistsWithImages[0].image_url}
+              alt={artistsWithImages[0].name}
+              className="w-full h-full object-cover"
+            />
+          </div>
+          <div className="w-1/2">
+            <ArtistImageLoader
+              src={artistsWithImages[1].image_url}
+              alt={artistsWithImages[1].name}
+              className="w-full h-full object-cover"
+            />
+          </div>
+        </div>
+        {/* Overlay with set name */}
+        {/* <div className="absolute inset-0 bg-black/20 flex items-end">
+          <div className="w-full bg-gradient-to-t from-black/60 to-transparent p-3">
+            <div className="text-white text-sm font-medium text-center">
+              {setName}
+            </div>
+          </div>
+        </div> */}
+      </div>
+    );
+  }
+
+  // Three images - one large, two small
+  if (artistsWithImages.length === 3) {
+    return (
+      <div className={`relative overflow-hidden ${className}`}>
+        <div className="absolute inset-0 flex">
+          {/* Main image takes left 2/3 */}
+          <div className="w-2/3">
+            <ArtistImageLoader
+              src={artistsWithImages[0].image_url}
+              alt={artistsWithImages[0].name}
+              className="w-full h-full object-cover"
+            />
+          </div>
+          {/* Two smaller images stack on right 1/3 */}
+          <div className="w-1/3 flex flex-col">
+            <div className="h-1/2">
+              <ArtistImageLoader
+                src={artistsWithImages[1].image_url}
+                alt={artistsWithImages[1].name}
+                className="w-full h-full object-cover"
+              />
+            </div>
+            <div className="h-1/2">
+              <ArtistImageLoader
+                src={artistsWithImages[2].image_url}
+                alt={artistsWithImages[2].name}
+                className="w-full h-full object-cover"
+              />
+            </div>
+          </div>
+        </div>
+        {/* Overlay with set name */}
+        {/* <div className="absolute inset-0 bg-black/20 flex items-end">
+          <div className="w-full bg-gradient-to-t from-black/60 to-transparent p-3">
+            <div className="text-white text-sm font-medium text-center">
+              {setName}
+            </div>
+          </div>
+        </div> */}
+      </div>
+    );
+  }
+
+  // Four or more images - 2x2 grid with overflow indicator
+  return (
+    <div className={`relative overflow-hidden ${className}`}>
+      <div className="absolute inset-0 grid grid-cols-2 grid-rows-2">
+        {artistsWithImages.slice(0, 4).map((artist, index) => (
+          <div key={artist.id} className="relative">
+            <ArtistImageLoader
+              src={artist.image_url}
+              alt={artist.name}
+              className="w-full h-full object-cover"
+            />
+            {/* Show count overlay on last image if more than 4 */}
+            {index === 3 && artistsWithImages.length > 4 && (
+              <div className="absolute inset-0 bg-black/60 flex items-center justify-center">
+                <div className="text-white text-lg font-bold">
+                  +{artistsWithImages.length - 4}
+                </div>
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+      {/* Overlay with set name */}
+      {/* <div className="absolute inset-0 bg-black/20 flex items-end">
+        <div className="w-full bg-gradient-to-t from-black/60 to-transparent p-3">
+          <div className="text-white text-sm font-medium text-center">
+            {setName}
+          </div>
+        </div>
+      </div> */}
+    </div>
+  );
+}
diff --git a/src/components/SetDetail/MultiArtistSetInfoCard.tsx b/src/components/SetDetail/MultiArtistSetInfoCard.tsx
new file mode 100644
index 0000000..2fe9e4b
--- /dev/null
+++ b/src/components/SetDetail/MultiArtistSetInfoCard.tsx
@@ -0,0 +1,139 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Clock, MapPin, Users } from "lucide-react";
+import { ArtistVotingButtons } from "./SetVotingButtons";
+import { FestivalSet } from "@/services/queries";
+import { formatTimeRange } from "@/lib/timeUtils";
+import { GenreBadge } from "../Index/GenreBadge";
+import { IndividualArtistCard } from "./IndividualArtistCard";
+
+interface MultiArtistSetInfoCardProps {
+  set: FestivalSet;
+  userVote: number | null;
+  netVoteScore: number;
+  onVote: (voteType: number) => void;
+  getVoteCount: (voteType: number) => number;
+  use24Hour?: boolean;
+}
+
+export function MultiArtistSetInfoCard({
+  set,
+  userVote,
+  netVoteScore,
+  onVote,
+  getVoteCount,
+  use24Hour = false,
+}: MultiArtistSetInfoCardProps) {
+  const allGenres = set.artists.flatMap(
+    (artist) => artist.artist_music_genres || [],
+  );
+  const uniqueGenres = allGenres.filter(
+    (genre, index, self) =>
+      index ===
+      self.findIndex((g) => g.music_genre_id === genre.music_genre_id),
+  );
+
+  return (
+    <div className="lg:col-span-2 space-y-6">
+      {/* Main Set Info Card */}
+      <Card className="bg-white/10 backdrop-blur-md border-purple-400/30">
+        <CardHeader>
+          <div className="flex items-start justify-between">
+            <div className="flex-1">
+              <CardTitle className="text-3xl font-bold text-white mb-2">
+                {set.name}
+              </CardTitle>
+
+              {/* Set Summary */}
+              <div className="mb-4">
+                <div className="flex items-center gap-2 mb-2">
+                  <Users className="h-4 w-4 text-purple-200" />
+                  <span className="text-sm text-purple-200 font-medium">
+                    {set.artists.length} Artists
+                  </span>
+                </div>
+              </div>
+
+              {/* Genres */}
+              <div className="flex flex-wrap gap-2 mb-4">
+                {uniqueGenres.map((genre) => (
+                  <GenreBadge
+                    key={genre.music_genre_id}
+                    genreId={genre.music_genre_id}
+                  />
+                ))}
+                {netVoteScore !== 0 && (
+                  <Badge
+                    variant="outline"
+                    className={`${
+                      netVoteScore > 0
+                        ? "border-green-400 text-green-400"
+                        : "border-red-400 text-red-400"
+                    }`}
+                  >
+                    Score: {netVoteScore > 0 ? "+" : ""}
+                    {netVoteScore}
+                  </Badge>
+                )}
+              </div>
+
+              {/* Performance Information */}
+              <div className="flex flex-wrap gap-4 mb-4 text-purple-200">
+                {set.stages?.name && (
+                  <div className="flex items-center gap-2">
+                    <MapPin className="h-4 w-4" />
+                    <span className="text-sm">{set.stages.name}</span>
+                  </div>
+                )}
+                {formatTimeRange(set.time_start, set.time_end, use24Hour) && (
+                  <div className="flex items-center gap-2">
+                    <Clock className="h-4 w-4" />
+                    <span className="text-sm">
+                      {formatTimeRange(set.time_start, set.time_end, use24Hour)}
+                    </span>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+          {set.description && (
+            <CardDescription className="text-purple-200 text-lg leading-relaxed">
+              {set.description}
+            </CardDescription>
+          )}
+        </CardHeader>
+        <CardContent>
+          {/* Voting System */}
+          <ArtistVotingButtons
+            userVote={userVote}
+            onVote={onVote}
+            getVoteCount={getVoteCount}
+          />
+        </CardContent>
+      </Card>
+
+      {/* Individual Artist Cards */}
+      <div>
+        <h3 className="text-xl font-bold text-white mb-4 flex items-center gap-2">
+          <Users className="h-5 w-5" />
+          Artists in this Set
+        </h3>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {set.artists.map((artist) => (
+            <IndividualArtistCard
+              key={artist.id}
+              artist={artist}
+              showFullDetails={false}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/SetDetail/SetInfoCard.tsx b/src/components/SetDetail/SetInfoCard.tsx
index 4f1f501..459a5c3 100644
--- a/src/components/SetDetail/SetInfoCard.tsx
+++ b/src/components/SetDetail/SetInfoCard.tsx
@@ -7,14 +7,14 @@ import {
 } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
-import { ExternalLink, Music, Play, Clock, MapPin } from "lucide-react";
+import { Clock, MapPin, ExternalLink, Music, Play } from "lucide-react";
 import { ArtistVotingButtons } from "./SetVotingButtons";
-import { Artist } from "@/services/queries";
+import { FestivalSet } from "@/services/queries";
 import { formatTimeRange } from "@/lib/timeUtils";
 import { GenreBadge } from "../Index/GenreBadge";
 
-interface ArtistInfoCardProps {
-  artist: Artist;
+interface SetInfoCardProps {
+  set: FestivalSet;
   userVote: number | null;
   netVoteScore: number;
   onVote: (voteType: number) => void;
@@ -22,14 +22,15 @@ interface ArtistInfoCardProps {
   use24Hour?: boolean;
 }
 
-export const ArtistInfoCard = ({
-  artist,
+export function SetInfoCard({
+  set,
   userVote,
   netVoteScore,
   onVote,
   getVoteCount,
   use24Hour = false,
-}: ArtistInfoCardProps) => {
+}: SetInfoCardProps) {
+  const artist = set.artists[0];
   return (
     <div className="lg:col-span-2">
       <Card className="bg-white/10 backdrop-blur-md border-purple-400/30 h-full">
@@ -37,7 +38,7 @@ export const ArtistInfoCard = ({
           <div className="flex items-start justify-between">
             <div className="flex-1">
               <CardTitle className="text-3xl font-bold text-white mb-2">
-                {artist.name}
+                {set.name}
               </CardTitle>
               <div className="flex flex-wrap gap-2 mb-4">
                 {artist.artist_music_genres?.map((genre) => (
@@ -63,34 +64,26 @@ export const ArtistInfoCard = ({
 
               {/* Performance Information */}
               <div className="flex flex-wrap gap-4 mb-4 text-purple-200">
-                {artist.stage && (
+                {set.stages?.name && (
                   <div className="flex items-center gap-2">
                     <MapPin className="h-4 w-4" />
-                    <span className="text-sm">{artist.stage}</span>
+                    <span className="text-sm">{set.stages.name}</span>
                   </div>
                 )}
-                {formatTimeRange(
-                  artist.time_start,
-                  artist.time_end,
-                  use24Hour,
-                ) && (
+                {formatTimeRange(set.time_start, set.time_end, use24Hour) && (
                   <div className="flex items-center gap-2">
                     <Clock className="h-4 w-4" />
                     <span className="text-sm">
-                      {formatTimeRange(
-                        artist.time_start,
-                        artist.time_end,
-                        use24Hour,
-                      )}
+                      {formatTimeRange(set.time_start, set.time_end, use24Hour)}
                     </span>
                   </div>
                 )}
               </div>
             </div>
           </div>
-          {artist.description && (
+          {(set.description || artist.description) && (
             <CardDescription className="text-purple-200 text-lg leading-relaxed">
-              {artist.description}
+              {set.description || artist.description}
             </CardDescription>
           )}
         </CardHeader>
@@ -137,4 +130,4 @@ export const ArtistInfoCard = ({
       </Card>
     </div>
   );
-};
+}
diff --git a/src/components/SetDetail/SetVotingButtons.tsx b/src/components/SetDetail/SetVotingButtons.tsx
index 128da05..8089bce 100644
--- a/src/components/SetDetail/SetVotingButtons.tsx
+++ b/src/components/SetDetail/SetVotingButtons.tsx
@@ -7,11 +7,11 @@ interface ArtistVotingButtonsProps {
   getVoteCount: (voteType: number) => number;
 }
 
-export const ArtistVotingButtons = ({
+export function ArtistVotingButtons({
   userVote,
   onVote,
   getVoteCount,
-}: ArtistVotingButtonsProps) => {
+}: ArtistVotingButtonsProps) {
   return (
     <div className="flex items-center gap-4 mb-6">
       <Button
@@ -52,4 +52,4 @@ export const ArtistVotingButtons = ({
       </Button>
     </div>
   );
-};
+}
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
index dc3b01d..b42ae32 100644
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -48,7 +48,7 @@ const CardDescription = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => (
-  <p
+  <div
     ref={ref}
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
diff --git a/src/pages/EditionView.tsx b/src/pages/EditionView.tsx
index bb93612..36c5b8b 100644
--- a/src/pages/EditionView.tsx
+++ b/src/pages/EditionView.tsx
@@ -106,15 +106,12 @@ export default function EditionView() {
     );
   }
 
-  // This loading check is no longer needed since we handle it earlier
-  // with the new context loading state
-
-  const handleVoteAction = async (artistId: string, voteType: number) => {
+  async function handleVoteAction(artistId: string, voteType: number) {
     const result = await handleVote(artistId, voteType);
     if (result.requiresAuth) {
       setShowAuthDialog(true);
     }
-  };
+  }
 
   return (
     <div className="min-h-screen bg-app-gradient">
@@ -137,7 +134,6 @@ export default function EditionView() {
             {urlState.mainView === "list" && (
               <SetsPanel
                 sets={filteredAndSortedSets}
-                isGrid={false}
                 user={user}
                 use24Hour={urlState.use24Hour}
                 openAuthDialog={() => setShowAuthDialog(true)}
diff --git a/src/pages/SetDetails.tsx b/src/pages/SetDetails.tsx
index 8b7c675..c20b3dc 100644
--- a/src/pages/SetDetails.tsx
+++ b/src/pages/SetDetails.tsx
@@ -1,7 +1,9 @@
 import { useParams } from "react-router-dom";
 import { AppHeader } from "@/components/AppHeader";
 import { ArtistImageCard } from "@/components/SetDetail/SetImageCard";
-import { ArtistInfoCard } from "@/components/SetDetail/SetInfoCard";
+import { MixedArtistImage } from "@/components/SetDetail/MixedArtistImage";
+import { SetInfoCard } from "@/components/SetDetail/SetInfoCard";
+import { MultiArtistSetInfoCard } from "@/components/SetDetail/MultiArtistSetInfoCard";
 import { ArtistNotFoundState } from "@/components/SetDetail/SetNotFoundState";
 import { ArtistLoadingState } from "@/components/SetDetail/SetLoadingState";
 import { SetGroupVoting } from "@/components/SetDetail/SetGroupVoting";
@@ -31,36 +33,58 @@ export function SetDetails() {
     return <ArtistNotFoundState />;
   }
 
-  const artist = currentSet.artists[0];
+  const isMultiArtistSet = currentSet.artists.length > 1;
+  const primaryArtist = currentSet.artists[0];
 
   return (
     <div className="min-h-screen bg-app-gradient">
       <div className="container mx-auto px-4 py-8">
         <AppHeader showBackButton backTo="/" backLabel="Back to Artists" />
 
-        {/* Artist Header */}
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-8">
-          <ArtistImageCard
-            imageUrl={artist.image_url}
-            artistName={currentSet.name}
-          />
+        {/* Set Header */}
+        {isMultiArtistSet ? (
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-8">
+            {/* Mixed Image for Multi-Artist Sets */}
+            <MixedArtistImage
+              artists={currentSet.artists}
+              setName={currentSet.name}
+              className="aspect-square rounded-lg"
+            />
 
-          <ArtistInfoCard
-            artist={artist}
-            userVote={userVote}
-            netVoteScore={netVoteScore}
-            onVote={handleVote}
-            getVoteCount={getVoteCount}
-            use24Hour={urlState.use24Hour}
-          />
-        </div>
+            <MultiArtistSetInfoCard
+              set={currentSet}
+              userVote={userVote}
+              netVoteScore={netVoteScore}
+              onVote={handleVote}
+              getVoteCount={getVoteCount}
+              use24Hour={urlState.use24Hour}
+            />
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-8">
+            {/* Single Artist Image */}
+            <ArtistImageCard
+              imageUrl={primaryArtist.image_url}
+              artistName={currentSet.name}
+            />
+
+            <SetInfoCard
+              set={currentSet}
+              userVote={userVote}
+              netVoteScore={netVoteScore}
+              onVote={handleVote}
+              getVoteCount={getVoteCount}
+              use24Hour={urlState.use24Hour}
+            />
+          </div>
+        )}
 
-        {/* Artist Group Voting Section */}
+        {/* Set Group Voting Section */}
         <div className="mb-8">
           <SetGroupVoting setId={currentSet.id} />
         </div>
 
-        {/* Artist Notes Section */}
+        {/* Set Notes Section */}
         <div className="mb-8">
           <ArtistNotes artistId={currentSet.id} userId={user?.id || null} />
         </div>