diff --git a/src/components/layout/legal/CookieConsentBanner.tsx b/src/components/layout/legal/CookieConsentBanner.tsx
index fb0502fa..c8d040a6 100644
--- a/src/components/layout/legal/CookieConsentBanner.tsx
+++ b/src/components/layout/legal/CookieConsentBanner.tsx
@@ -18,12 +18,12 @@ export function CookieConsentBanner() {
           <div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center justify-between">
             <div className="flex-1">
               <h3 className="font-semibold text-lg mb-2">Cookie Consent</h3>
-              <p className="text-sm text-muted-foreground mb-3">
+              <p className="text-sm text-paper-muted-foreground mb-3">
                 We use essential cookies to make our app work properly and
                 remember your preferences like sidebar state. We respect your
                 privacy and don't use any tracking or analytics cookies.
               </p>
-              <p className="text-xs text-muted-foreground">
+              <p className="text-xs text-paper-muted-foreground">
                 By clicking "Accept", you agree to our use of essential cookies.
                 Learn more in our{" "}
                 <a href="/privacy" className="underline hover:text-primary">
diff --git a/src/components/layout/legal/CookiePreferencesDialog.tsx b/src/components/layout/legal/CookiePreferencesDialog.tsx
index 5458aab7..01aabe1c 100644
--- a/src/components/layout/legal/CookiePreferencesDialog.tsx
+++ b/src/components/layout/legal/CookiePreferencesDialog.tsx
@@ -76,14 +76,14 @@ export function CookiePreferencesDialog({
       <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
         <DialogHeader>
           <DialogTitle>Cookie Preferences</DialogTitle>
-          <DialogDescription>
+          <DialogDescription className="text-paper-muted-foreground">
             Manage your cookie settings and privacy preferences. You can control
             which types of cookies are stored on your device.
           </DialogDescription>
         </DialogHeader>
 
         <div className="space-y-6">
-          <p className="text-sm text-muted-foreground">
+          <p className="text-sm text-paper-muted-foreground">
             Manage your cookie preferences below. You can change these settings
             at any time.
           </p>
@@ -96,7 +96,7 @@ export function CookiePreferencesDialog({
               >
                 <div className="flex-1 space-y-2">
                   <h4 className="font-medium">{category.title}</h4>
-                  <p className="text-sm text-muted-foreground">
+                  <p className="text-sm text-paper-muted-foreground">
                     {category.description}
                   </p>
                 </div>
diff --git a/src/index.css b/src/index.css
index 7e14efd0..fc8a62c0 100644
--- a/src/index.css
+++ b/src/index.css
@@ -47,6 +47,7 @@
     --accent-foreground: 0 0% 100%;
     --accent-hover: 272.1 71.7% 47.1%; /* purple-700 */
     --accent-soft: 271.5 81.3% 55.9% / 0.4; /* bg-purple-600/40 */
+    --accent-soft-foreground: 270 95.2% 75.3%; /* purple-400 */
 
     --destructive: 0 90.6% 70.8%; /* red-400 */
     --destructive-foreground: 221 39% 11%; /* gray-900 — red-400 is too light for a white foreground */
diff --git a/src/lib/timeUtils.ts b/src/lib/timeUtils.ts
index f17d83bf..bddbd6d7 100644
--- a/src/lib/timeUtils.ts
+++ b/src/lib/timeUtils.ts
@@ -166,6 +166,18 @@ export function combineDateAndTime(
   return `${datePart} ${timePart}`;
 }
 
+export function formatDateOnly(
+  dateTime: string | null,
+  timezone?: string,
+): string | null {
+  if (!dateTime) return null;
+  const date = parseISO(dateTime);
+  if (!isValid(date)) return null;
+  const dateFormat = "MMM d, yyyy";
+  if (timezone) return formatInTimeZone(date, timezone, dateFormat);
+  return format(date, dateFormat);
+}
+
 export function formatDayOnly(
   dateTime: string | null,
   timezone?: string,
diff --git a/src/pages/EditionView/tabs/VoteTab/EmptyArtistsState.tsx b/src/pages/EditionView/tabs/VoteTab/EmptyArtistsState.tsx
index 5bdeabf9..95e2f4c4 100644
--- a/src/pages/EditionView/tabs/VoteTab/EmptyArtistsState.tsx
+++ b/src/pages/EditionView/tabs/VoteTab/EmptyArtistsState.tsx
@@ -10,31 +10,33 @@ import {
 export function EmptyArtistsState() {
   return (
     <div className="flex items-center justify-center py-16">
-      <Card className="bg-white/10 backdrop-blur-md border-purple-400/30 max-w-md mx-auto text-center">
+      <Card className="bg-surface-raised backdrop-blur-md border max-w-md mx-auto text-center">
         <CardHeader>
           <div className="flex justify-center mb-4">
             <div className="relative">
-              <Music className="h-16 w-16 text-purple-400" />
-              <Sparkles className="h-6 w-6 text-yellow-400 absolute -top-1 -right-1" />
+              <Music className="h-16 w-16 text-accent-soft-foreground" />
+              <Sparkles className="h-6 w-6 text-notice absolute -top-1 -right-1" />
             </div>
           </div>
-          <CardTitle className="text-white text-2xl">No Artists Yet</CardTitle>
-          <CardDescription className="text-purple-200">
+          <CardTitle className="text-foreground text-2xl">
+            No Artists Yet
+          </CardTitle>
+          <CardDescription className="text-muted-foreground">
             Be the first to add artists to the Boom Festival voting list!
           </CardDescription>
         </CardHeader>
         <CardContent>
           <div className="space-y-4">
-            <div className="flex items-center gap-3 text-sm text-purple-200">
-              <Users className="h-4 w-4 text-purple-400" />
+            <div className="flex items-center gap-3 text-sm text-muted-foreground">
+              <Users className="h-4 w-4 text-accent-soft-foreground" />
               <span>Connect with fellow festival-goers</span>
             </div>
-            <div className="flex items-center gap-3 text-sm text-purple-200">
-              <Music className="h-4 w-4 text-purple-400" />
+            <div className="flex items-center gap-3 text-sm text-muted-foreground">
+              <Music className="h-4 w-4 text-accent-soft-foreground" />
               <span>Discover new electronic artists</span>
             </div>
-            <div className="flex items-center gap-3 text-sm text-purple-200">
-              <Sparkles className="h-4 w-4 text-purple-400" />
+            <div className="flex items-center gap-3 text-sm text-muted-foreground">
+              <Sparkles className="h-4 w-4 text-accent-soft-foreground" />
               <span>Vote for your favorites</span>
             </div>
           </div>
diff --git a/src/pages/EditionView/tabs/VoteTab/MultiArtistSetCard.tsx b/src/pages/EditionView/tabs/VoteTab/MultiArtistSetCard.tsx
index 334f35b3..f4993494 100644
--- a/src/pages/EditionView/tabs/VoteTab/MultiArtistSetCard.tsx
+++ b/src/pages/EditionView/tabs/VoteTab/MultiArtistSetCard.tsx
@@ -7,7 +7,7 @@ import { SetVotingButtons } from "./SetCard/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">
+    <Card className="bg-surface-raised backdrop-blur-md border hover:bg-surface-active transition-all duration-300 overflow-hidden">
       <CardHeader className="pb-4">
         {/* Set Image with Mixed Artists */}
         <SetImage />
diff --git a/src/pages/EditionView/tabs/VoteTab/SetCard/MultiArtistInfo.tsx b/src/pages/EditionView/tabs/VoteTab/SetCard/MultiArtistInfo.tsx
index 018df8a9..e6e65d97 100644
--- a/src/pages/EditionView/tabs/VoteTab/SetCard/MultiArtistInfo.tsx
+++ b/src/pages/EditionView/tabs/VoteTab/SetCard/MultiArtistInfo.tsx
@@ -20,7 +20,9 @@ export function MultiArtistInfo({
     <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>
+          <span className="text-xs text-muted-foreground mr-1">
+            {artist.name}
+          </span>
           <SocialPlatformLinkList artist={artist} size={size} />
         </div>
       ))}
diff --git a/src/pages/EditionView/tabs/VoteTab/SetCard/SetDescription.tsx b/src/pages/EditionView/tabs/VoteTab/SetCard/SetDescription.tsx
index ba277fcf..30c1b647 100644
--- a/src/pages/EditionView/tabs/VoteTab/SetCard/SetDescription.tsx
+++ b/src/pages/EditionView/tabs/VoteTab/SetCard/SetDescription.tsx
@@ -8,7 +8,7 @@ interface SetDescriptionProps {
 }
 
 export function SetDescription({
-  className = "text-purple-200 text-sm leading-relaxed",
+  className = "text-muted-foreground text-sm leading-relaxed",
 }: SetDescriptionProps) {
   const { set } = useFestivalSet();
   const isMultiArtist = set.artists.length > 1;
diff --git a/src/pages/EditionView/tabs/VoteTab/SetCard/SetHeader.tsx b/src/pages/EditionView/tabs/VoteTab/SetCard/SetHeader.tsx
index b12870a2..945f3b3b 100644
--- a/src/pages/EditionView/tabs/VoteTab/SetCard/SetHeader.tsx
+++ b/src/pages/EditionView/tabs/VoteTab/SetCard/SetHeader.tsx
@@ -14,8 +14,8 @@ export function SetHeader({ size = "lg" }: SetHeaderProps) {
 
   const titleClass =
     size === "sm"
-      ? "text-white text-lg font-semibold truncate"
-      : "text-white text-xl";
+      ? "text-foreground text-lg font-semibold truncate"
+      : "text-foreground text-xl";
 
   return (
     <div className="flex items-center gap-2 mb-2">
@@ -24,7 +24,7 @@ export function SetHeader({ size = "lg" }: SetHeaderProps) {
       {isMultiArtist && (
         <Badge
           variant="secondary"
-          className="bg-purple-600/50 text-purple-100 text-xs"
+          className="bg-accent-soft text-foreground text-xs"
         >
           <Users className="h-3 w-3 mr-1" />
           {set.artists.length}
diff --git a/src/pages/EditionView/tabs/VoteTab/SetCard/SetMetadata.tsx b/src/pages/EditionView/tabs/VoteTab/SetCard/SetMetadata.tsx
index c078e286..d6a506e0 100644
--- a/src/pages/EditionView/tabs/VoteTab/SetCard/SetMetadata.tsx
+++ b/src/pages/EditionView/tabs/VoteTab/SetCard/SetMetadata.tsx
@@ -55,7 +55,7 @@ export function SetMetadata() {
           <StageBadgeById stageId={set.stage_id} />
         )}
         {timeRangeFormatted && (
-          <div className="flex items-center gap-1 text-sm text-purple-200">
+          <div className="flex items-center gap-1 text-sm text-muted-foreground">
             <Clock className="h-3 w-3" />
             <span>{timeRangeFormatted}</span>
           </div>
@@ -67,7 +67,7 @@ export function SetMetadata() {
           </div>
         )}
         {(timeRangeFormatted || dayOnlyFormatted) && (
-          <span className="text-xs text-purple-200/60">
+          <span className="text-xs text-muted-foreground/60">
             {festival.timezone}
           </span>
         )}
diff --git a/src/pages/EditionView/tabs/VoteTab/SetCard/SocialPlatformLink.tsx b/src/pages/EditionView/tabs/VoteTab/SetCard/SocialPlatformLink.tsx
index 71e00618..58a6ad5b 100644
--- a/src/pages/EditionView/tabs/VoteTab/SetCard/SocialPlatformLink.tsx
+++ b/src/pages/EditionView/tabs/VoteTab/SetCard/SocialPlatformLink.tsx
@@ -26,7 +26,7 @@ export function SocialPlatformLink({
       asChild
       variant="secondary"
       size="sm"
-      className={`p-1 ${buttonSize} bg-white/20 hover:bg-white/30 backdrop-blur-sm border-0 ${platformInfo.color}`}
+      className={`p-1 ${buttonSize} bg-surface-active hover:bg-foreground/30 backdrop-blur-sm border-0 ${platformInfo.color}`}
       title={`Open ${artistName} in ${platformInfo.platform}`}
     >
       <a href={url} target="_blank" rel="noopener noreferrer">
diff --git a/src/pages/EditionView/tabs/VoteTab/SetListItem.tsx b/src/pages/EditionView/tabs/VoteTab/SetListItem.tsx
index 5594e4e5..f0fe6b48 100644
--- a/src/pages/EditionView/tabs/VoteTab/SetListItem.tsx
+++ b/src/pages/EditionView/tabs/VoteTab/SetListItem.tsx
@@ -7,7 +7,7 @@ import { SetActionButtons } from "./SetCard/SetActionButtons";
 export function SetListItem() {
   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"
+      className="bg-surface-raised backdrop-blur-md border hover:bg-surface-active transition-all duration-300 rounded-lg p-4"
       data-testid="artist-item"
     >
       {/* Mobile Layout (sm and below) */}
@@ -20,7 +20,7 @@ export function SetListItem() {
           </div>
         </div>
 
-        <SetDescription className="text-purple-200 text-sm" />
+        <SetDescription className="text-muted-foreground text-sm" />
 
         <div className="self-end">
           <SetActionButtons size="sm" layout="horizontal" />
diff --git a/src/pages/EditionView/tabs/VoteTab/SingleArtistSetCard.tsx b/src/pages/EditionView/tabs/VoteTab/SingleArtistSetCard.tsx
index f7979ac5..14cdcd54 100644
--- a/src/pages/EditionView/tabs/VoteTab/SingleArtistSetCard.tsx
+++ b/src/pages/EditionView/tabs/VoteTab/SingleArtistSetCard.tsx
@@ -7,7 +7,7 @@ import { SetVotingButtons } from "./SetCard/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">
+    <Card className="bg-surface-raised backdrop-blur-md border hover:bg-surface-active transition-all duration-300 overflow-hidden">
       <CardHeader className="pb-4">
         <SetImage />
 
diff --git a/src/pages/EditionView/tabs/VoteTab/filters/DesktopFilters.tsx b/src/pages/EditionView/tabs/VoteTab/filters/DesktopFilters.tsx
index 1acf6a2e..e2a709a2 100644
--- a/src/pages/EditionView/tabs/VoteTab/filters/DesktopFilters.tsx
+++ b/src/pages/EditionView/tabs/VoteTab/filters/DesktopFilters.tsx
@@ -39,10 +39,14 @@ export function DesktopFilters({
       {/* Stage Filter */}
       {canShowStage && (
         <div>
-          <h4 className="text-sm font-medium text-purple-200 mb-2">Stages</h4>
+          <h4 className="text-sm font-medium text-muted-foreground mb-2">
+            Stages
+          </h4>
           <div className="flex flex-wrap gap-2">
             {stagesLoading ? (
-              <div className="text-sm text-purple-300">Loading stages...</div>
+              <div className="text-sm text-subtle-foreground">
+                Loading stages...
+              </div>
             ) : (
               stages.map((stage) => (
                 <Button
@@ -54,8 +58,8 @@ export function DesktopFilters({
                   onClick={() => handleStageToggle(stage.id)}
                   className={
                     state.stages.includes(stage.id)
-                      ? "bg-purple-600 hover:bg-purple-700"
-                      : "border-purple-400 text-purple-400 hover:bg-purple-400 hover:text-white"
+                      ? "bg-accent text-accent-foreground hover:bg-accent-hover"
+                      : "border-ring text-ring hover:bg-ring hover:text-foreground"
                   }
                 >
                   {stage.name}
diff --git a/src/pages/EditionView/tabs/VoteTab/filters/FestivalModeToggle.tsx b/src/pages/EditionView/tabs/VoteTab/filters/FestivalModeToggle.tsx
deleted file mode 100644
index 9d17f647..00000000
--- a/src/pages/EditionView/tabs/VoteTab/filters/FestivalModeToggle.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import { useState, useEffect } from "react";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { Calendar, CalendarDays, Info } from "lucide-react";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-
-interface FestivalModeToggleProps {
-  onModeChange: (isFestivalMode: boolean) => void;
-}
-
-export function FestivalModeToggle({ onModeChange }: FestivalModeToggleProps) {
-  const [isFestivalMode, setIsFestivalMode] = useState(() => {
-    const saved = localStorage.getItem("festival-mode");
-    if (saved !== null) return JSON.parse(saved);
-
-    // Auto-detect based on current date (example festival dates)
-    const now = new Date();
-    const festivalStart = new Date("2024-07-20"); // Example dates
-    const festivalEnd = new Date("2024-07-27");
-    return now >= festivalStart && now <= festivalEnd;
-  });
-
-  useEffect(() => {
-    localStorage.setItem("festival-mode", JSON.stringify(isFestivalMode));
-    onModeChange(isFestivalMode);
-  }, [isFestivalMode, onModeChange]);
-
-  function toggleMode() {
-    setIsFestivalMode(!isFestivalMode);
-  }
-
-  return (
-    <div className="flex items-center gap-3">
-      <div className="flex items-center gap-2">
-        <Button
-          variant={isFestivalMode ? "default" : "outline"}
-          size="sm"
-          onClick={toggleMode}
-          className={
-            isFestivalMode
-              ? "bg-orange-600 hover:bg-orange-700 text-white border-orange-600"
-              : "border-purple-400 text-purple-400 hover:bg-purple-400 hover:text-white"
-          }
-        >
-          {isFestivalMode ? (
-            <CalendarDays className="h-4 w-4 mr-2" />
-          ) : (
-            <Calendar className="h-4 w-4 mr-2" />
-          )}
-          {isFestivalMode ? "Festival Mode" : "Planning Mode"}
-        </Button>
-
-        {isFestivalMode && (
-          <Badge
-            variant="secondary"
-            className="bg-orange-100 text-orange-800 border-orange-200"
-          >
-            Live
-          </Badge>
-        )}
-      </div>
-
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button variant="ghost" size="sm" className="p-1 h-6 w-6">
-            <Info className="h-3 w-3 text-purple-400" />
-          </Button>
-        </TooltipTrigger>
-        <TooltipContent side="bottom" className="max-w-xs">
-          <div className="space-y-1 text-xs">
-            <p>
-              <strong>Festival Mode:</strong> Timeline view recommended for live
-              schedule tracking
-            </p>
-            <p>
-              <strong>Planning Mode:</strong> Artists list with sorting for
-              pre-festival planning
-            </p>
-          </div>
-        </TooltipContent>
-      </Tooltip>
-    </div>
-  );
-}
diff --git a/src/pages/EditionView/tabs/VoteTab/filters/MobileFilters.tsx b/src/pages/EditionView/tabs/VoteTab/filters/MobileFilters.tsx
index 46a8dc96..31282d30 100644
--- a/src/pages/EditionView/tabs/VoteTab/filters/MobileFilters.tsx
+++ b/src/pages/EditionView/tabs/VoteTab/filters/MobileFilters.tsx
@@ -47,23 +47,25 @@ export function MobileFilters({
       {/* Stage Filter Select */}
       {canShowStage && (
         <div>
-          <h4 className="text-sm font-medium text-purple-200 mb-2">Stage</h4>
+          <h4 className="text-sm font-medium text-muted-foreground mb-2">
+            Stage
+          </h4>
           <Select
             value={state.stages.length === 1 ? state.stages[0] : "all"}
             onValueChange={handleStageSelect}
           >
-            <SelectTrigger className="w-full bg-white/10 border-purple-400/30 text-purple-100">
+            <SelectTrigger className="w-full bg-surface-raised border-border text-popover-foreground">
               <SelectValue placeholder="All Stages" />
             </SelectTrigger>
-            <SelectContent className="bg-gray-800 border-purple-400/30">
-              <SelectItem value="all" className="text-purple-100">
+            <SelectContent className="bg-popover border">
+              <SelectItem value="all" className="text-popover-foreground">
                 All Stages
               </SelectItem>
               {stagesLoading ? (
                 <SelectItem
                   value="loading"
                   disabled
-                  className="text-purple-300"
+                  className="text-subtle-foreground"
                 >
                   Loading stages...
                 </SelectItem>
@@ -72,7 +74,7 @@ export function MobileFilters({
                   <SelectItem
                     key={stage.id}
                     value={stage.id}
-                    className="text-purple-100"
+                    className="text-popover-foreground"
                   >
                     {stage.name}
                   </SelectItem>
@@ -85,23 +87,25 @@ export function MobileFilters({
 
       {/* Genre Filter Select */}
       <div>
-        <h4 className="text-sm font-medium text-purple-200 mb-2">Genre</h4>
+        <h4 className="text-sm font-medium text-muted-foreground mb-2">
+          Genre
+        </h4>
         <Select
           value={state.genres.length === 1 ? state.genres[0] : "all"}
           onValueChange={handleGenreSelect}
         >
-          <SelectTrigger className="w-full bg-white/10 border-purple-400/30 text-purple-100">
+          <SelectTrigger className="w-full bg-surface-raised border-border text-popover-foreground">
             <SelectValue placeholder="All Genres" />
           </SelectTrigger>
-          <SelectContent className="bg-gray-800 border-purple-400/30">
-            <SelectItem value="all" className="text-purple-100">
+          <SelectContent className="bg-popover border">
+            <SelectItem value="all" className="text-popover-foreground">
               All Genres
             </SelectItem>
             {genres.map((genre) => (
               <SelectItem
                 key={genre.id}
                 value={genre.id}
-                className="text-purple-100"
+                className="text-popover-foreground"
               >
                 {genre.name}
               </SelectItem>
@@ -112,7 +116,7 @@ export function MobileFilters({
 
       {/* Rating Filter */}
       <div>
-        <h4 className="text-sm font-medium text-purple-200 mb-2">
+        <h4 className="text-sm font-medium text-muted-foreground mb-2">
           Minimum Rating
         </h4>
         <Select
@@ -121,20 +125,20 @@ export function MobileFilters({
             onStateChange({ minRating: parseInt(value) })
           }
         >
-          <SelectTrigger className="w-full bg-white/10 border-purple-400/30 text-purple-100">
+          <SelectTrigger className="w-full bg-surface-raised border-border text-popover-foreground">
             <SelectValue />
           </SelectTrigger>
-          <SelectContent className="bg-gray-800 border-purple-400/30">
-            <SelectItem value="0" className="text-purple-100">
+          <SelectContent className="bg-popover border">
+            <SelectItem value="0" className="text-popover-foreground">
               Any Rating
             </SelectItem>
-            <SelectItem value="1" className="text-purple-100">
+            <SelectItem value="1" className="text-popover-foreground">
               1+ Rating
             </SelectItem>
-            <SelectItem value="2" className="text-purple-100">
+            <SelectItem value="2" className="text-popover-foreground">
               2+ Rating
             </SelectItem>
-            <SelectItem value="3" className="text-purple-100">
+            <SelectItem value="3" className="text-popover-foreground">
               3+ Rating
             </SelectItem>
           </SelectContent>
diff --git a/src/pages/EditionView/tabs/VoteTab/filters/SortControls.tsx b/src/pages/EditionView/tabs/VoteTab/filters/SortControls.tsx
index 8ae24b34..e3d626e1 100644
--- a/src/pages/EditionView/tabs/VoteTab/filters/SortControls.tsx
+++ b/src/pages/EditionView/tabs/VoteTab/filters/SortControls.tsx
@@ -41,24 +41,24 @@ export function SortControls({ sort, onSortChange }: SortControlsProps) {
 
   return (
     <div className="flex items-center gap-2">
-      <SortAsc className="h-4 w-4 text-purple-300 hidden sm:block" />
+      <SortAsc className="h-4 w-4 text-subtle-foreground hidden sm:block" />
       <Select value={sort} onValueChange={onSortChange}>
-        <SelectTrigger className="w-10 sm:w-44 bg-white/10 border-purple-400/30 text-purple-100">
+        <SelectTrigger className="w-10 sm:w-44 bg-surface-raised border-border text-popover-foreground">
           <div className="hidden sm:block">
             <SelectValue />
           </div>
           <div className="block sm:hidden">
-            <CurrentSortIcon className="h-4 w-4 text-purple-300" />
+            <CurrentSortIcon className="h-4 w-4 text-subtle-foreground" />
           </div>
         </SelectTrigger>
-        <SelectContent className="bg-gray-800 border-purple-400/30">
+        <SelectContent className="bg-popover border">
           {SORT_OPTIONS.map((option) => {
             const Icon = SORT_ICONS[option.value as keyof typeof SORT_ICONS];
             return (
               <SelectItem
                 key={option.value}
                 value={option.value}
-                className="text-purple-100"
+                className="text-popover-foreground"
               >
                 <div className="flex items-center gap-2">
                   <Icon className="h-4 w-4" />
@@ -74,44 +74,50 @@ export function SortControls({ sort, onSortChange }: SortControlsProps) {
         <PopoverTrigger asChild>
           <button
             type="button"
-            className="p-1 hover:bg-white/10 rounded transition-colors hidden sm:block"
+            className="p-1 hover:bg-surface-raised rounded transition-colors hidden sm:block"
             title="Click for sorting help"
           >
-            <HelpCircle className="h-4 w-4 text-purple-300 hover:text-purple-200" />
+            <HelpCircle className="h-4 w-4 text-subtle-foreground hover:text-muted-foreground" />
           </button>
         </PopoverTrigger>
-        <PopoverContent className="bg-gray-800 border-purple-400/30 text-purple-100 w-80">
+        <PopoverContent className="bg-popover border text-popover-foreground w-80">
           <div className="space-y-3">
-            <h3 className="font-semibold text-purple-200 mb-2">
+            <h3 className="font-semibold text-muted-foreground mb-2">
               Sort Options Explained
             </h3>
 
             <div className="space-y-2 text-sm">
               <div className="flex items-center gap-2">
-                <ArrowUpAZ className="h-4 w-4 text-purple-300" />
+                <ArrowUpAZ className="h-4 w-4 text-subtle-foreground" />
                 <div>
-                  <strong className="text-purple-300">Name (A-Z):</strong>
-                  <p className="text-purple-100/80">
+                  <strong className="text-subtle-foreground">
+                    Name (A-Z):
+                  </strong>
+                  <p className="text-popover-foreground/80">
                     Sort artists alphabetically from A to Z
                   </p>
                 </div>
               </div>
 
               <div className="flex items-center gap-2">
-                <ArrowDownAZ className="h-4 w-4 text-purple-300" />
+                <ArrowDownAZ className="h-4 w-4 text-subtle-foreground" />
                 <div>
-                  <strong className="text-purple-300">Name (Z-A):</strong>
-                  <p className="text-purple-100/80">
+                  <strong className="text-subtle-foreground">
+                    Name (Z-A):
+                  </strong>
+                  <p className="text-popover-foreground/80">
                     Sort artists alphabetically from Z to A
                   </p>
                 </div>
               </div>
 
               <div className="flex items-center gap-2">
-                <Star className="h-4 w-4 text-purple-300" />
+                <Star className="h-4 w-4 text-subtle-foreground" />
                 <div>
-                  <strong className="text-purple-300">Highest Rated:</strong>
-                  <p className="text-purple-100/80">
+                  <strong className="text-subtle-foreground">
+                    Highest Rated:
+                  </strong>
+                  <p className="text-popover-foreground/80">
                     Sort by weighted average rating based on votes (Must go = 2
                     points, Interested = 1 point, Won't go = -1 point)
                   </p>
@@ -119,10 +125,12 @@ export function SortControls({ sort, onSortChange }: SortControlsProps) {
               </div>
 
               <div className="flex items-center gap-2">
-                <TrendingUp className="h-4 w-4 text-purple-300" />
+                <TrendingUp className="h-4 w-4 text-subtle-foreground" />
                 <div>
-                  <strong className="text-purple-300">Most Popular:</strong>
-                  <p className="text-purple-100/80">
+                  <strong className="text-subtle-foreground">
+                    Most Popular:
+                  </strong>
+                  <p className="text-popover-foreground/80">
                     Sort by weighted popularity score (Must go = 2 points,
                     Interested = 1 point)
                   </p>
@@ -130,10 +138,10 @@ export function SortControls({ sort, onSortChange }: SortControlsProps) {
               </div>
 
               <div className="flex items-center gap-2">
-                <Calendar className="h-4 w-4 text-purple-300" />
+                <Calendar className="h-4 w-4 text-subtle-foreground" />
                 <div>
-                  <strong className="text-purple-300">By Date:</strong>
-                  <p className="text-purple-100/80">
+                  <strong className="text-subtle-foreground">By Date:</strong>
+                  <p className="text-popover-foreground/80">
                     Sort by estimated performance date (earliest performances
                     first)
                   </p>
diff --git a/src/pages/EditionView/tabs/VoteTab/filters/TimeFormatToggle.tsx b/src/pages/EditionView/tabs/VoteTab/filters/TimeFormatToggle.tsx
deleted file mode 100644
index 916e3637..00000000
--- a/src/pages/EditionView/tabs/VoteTab/filters/TimeFormatToggle.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { Clock } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-
-interface TimeFormatToggleProps {
-  use24Hour: boolean;
-  onChange: (use24Hour: boolean) => void;
-}
-
-export function TimeFormatToggle({
-  use24Hour,
-  onChange,
-}: TimeFormatToggleProps) {
-  return (
-    <TooltipProvider>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={() => onChange(!use24Hour)}
-            className={`flex items-center gap-2 ${
-              use24Hour
-                ? "bg-purple-600/50 text-purple-100 hover:bg-purple-600/60"
-                : "text-purple-300 hover:text-purple-100"
-            }`}
-          >
-            <Clock className="h-4 w-4" />
-            <span className="text-sm font-medium">
-              {use24Hour ? "24h" : "12h"}
-            </span>
-          </Button>
-        </TooltipTrigger>
-        <TooltipContent>
-          <p>Switch to {use24Hour ? "12-hour" : "24-hour"} time format</p>
-        </TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
-  );
-}
diff --git a/src/pages/EditionView/tabs/VoteTab/filters/VotePerspectiveToggle.tsx b/src/pages/EditionView/tabs/VoteTab/filters/VotePerspectiveToggle.tsx
index cb4ca474..8b8f493d 100644
--- a/src/pages/EditionView/tabs/VoteTab/filters/VotePerspectiveToggle.tsx
+++ b/src/pages/EditionView/tabs/VoteTab/filters/VotePerspectiveToggle.tsx
@@ -21,12 +21,12 @@ export function VotePerspectiveToggle({
           onScopeChange(value);
         }
       }}
-      className="rounded-md border border-purple-400/30 p-0.5"
+      className="rounded-md border p-0.5"
     >
       <ToggleGroupItem
         value="everyone"
         size="sm"
-        className="text-purple-300 data-[state=on]:bg-purple-600/30 data-[state=on]:text-purple-100"
+        className="text-subtle-foreground data-[state=on]:bg-accent-soft data-[state=on]:text-foreground"
         aria-label="Rate by everyone's votes"
       >
         Everyone
@@ -34,7 +34,7 @@ export function VotePerspectiveToggle({
       <ToggleGroupItem
         value="group"
         size="sm"
-        className="text-purple-300 data-[state=on]:bg-purple-600/30 data-[state=on]:text-purple-100"
+        className="text-subtle-foreground data-[state=on]:bg-accent-soft data-[state=on]:text-foreground"
         aria-label={`Rate by ${groupName}'s votes`}
       >
         {groupName}
diff --git a/src/pages/ExploreSetPage/ExplorationProgress.tsx b/src/pages/ExploreSetPage/ExplorationProgress.tsx
index 90271332..264ee7f0 100644
--- a/src/pages/ExploreSetPage/ExplorationProgress.tsx
+++ b/src/pages/ExploreSetPage/ExplorationProgress.tsx
@@ -13,11 +13,11 @@ export function ExplorationProgress({
 
   return (
     <div className="flex items-center space-x-2">
-      <span className="text-sm text-white/80">
+      <span className="text-sm text-foreground/80">
         {current} of {total}
       </span>
       <div className="w-20">
-        <Progress value={percentage} className="h-2 bg-white/20" />
+        <Progress value={percentage} className="h-2 bg-surface-active" />
       </div>
     </div>
   );
diff --git a/src/pages/ExploreSetPage/SetExploreCard.tsx b/src/pages/ExploreSetPage/SetExploreCard.tsx
index f09916bf..f54d6c92 100644
--- a/src/pages/ExploreSetPage/SetExploreCard.tsx
+++ b/src/pages/ExploreSetPage/SetExploreCard.tsx
@@ -63,7 +63,7 @@ export function SetExploreCard({
           )}
 
           {/* Content */}
-          <div className="relative h-full flex flex-col justify-between p-6 text-white">
+          <div className="relative h-full flex flex-col justify-between p-6 text-foreground">
             {/* Header Info */}
             <SetCardHeader
               stageId={set.stage_id || undefined}
@@ -98,7 +98,7 @@ export function SetExploreCard({
 
             {/* Footer */}
             <div className="text-center">
-              <p className="text-sm text-gray-400">
+              <p className="text-sm text-subtle-foreground">
                 Swipe or tap buttons to vote
               </p>
             </div>
diff --git a/src/pages/ExploreSetPage/SetExploreCard/PrimaryArtistDisplay.tsx b/src/pages/ExploreSetPage/SetExploreCard/PrimaryArtistDisplay.tsx
index c8a652f5..9da19732 100644
--- a/src/pages/ExploreSetPage/SetExploreCard/PrimaryArtistDisplay.tsx
+++ b/src/pages/ExploreSetPage/SetExploreCard/PrimaryArtistDisplay.tsx
@@ -14,7 +14,7 @@ export function PrimaryArtistDisplay({
 }: PrimaryArtistDisplayProps) {
   return (
     <div className="text-center space-y-2">
-      <div className="w-20 h-20 mx-auto rounded-full overflow-hidden border-4 border-white/20">
+      <div className="w-20 h-20 mx-auto rounded-full overflow-hidden border-4 border-surface-active">
         {artist.image_url ? (
           <img
             src={artist.image_url}
@@ -23,7 +23,7 @@ export function PrimaryArtistDisplay({
           />
         ) : (
           <div className="w-full h-full bg-gradient-to-br from-purple-600 to-pink-600 flex items-center justify-center">
-            <Users className="h-8 w-8 text-white" />
+            <Users className="h-8 w-8 text-foreground" />
           </div>
         )}
       </div>
diff --git a/src/pages/ExploreSetPage/SetExploreCard/SetCardHeader.tsx b/src/pages/ExploreSetPage/SetExploreCard/SetCardHeader.tsx
index e67a56b8..d0ae1d43 100644
--- a/src/pages/ExploreSetPage/SetExploreCard/SetCardHeader.tsx
+++ b/src/pages/ExploreSetPage/SetExploreCard/SetCardHeader.tsx
@@ -40,7 +40,7 @@ export function SetCardHeader({ stageId, timeStart }: SetCardHeaderProps) {
         {dateLabel && (
           <Badge
             variant="secondary"
-            className="bg-purple-600/80 text-white border-0"
+            className="bg-accent/80 text-foreground border-0"
           >
             {dateLabel}
           </Badge>
diff --git a/src/pages/ExploreSetPage/SetExploreCard/SoundCloudBadge.tsx b/src/pages/ExploreSetPage/SetExploreCard/SoundCloudBadge.tsx
index 9d4288ca..f0f426d7 100644
--- a/src/pages/ExploreSetPage/SetExploreCard/SoundCloudBadge.tsx
+++ b/src/pages/ExploreSetPage/SetExploreCard/SoundCloudBadge.tsx
@@ -29,7 +29,7 @@ export function SoundCloudBadge({
   }
 
   return (
-    <div className="inline-flex items-center gap-1 px-2 py-1 rounded-full bg-gray-600/20 border border-gray-500/30 text-gray-400 text-xs">
+    <div className="inline-flex items-center gap-1 px-2 py-1 rounded-full bg-gray-600/20 border border-gray-500/30 text-subtle-foreground text-xs">
       <svg
         className="w-3 h-3"
         viewBox="0 0 24 24"
diff --git a/src/pages/ExploreSetPage/SetExploreCard/SupportingArtists.tsx b/src/pages/ExploreSetPage/SetExploreCard/SupportingArtists.tsx
index 1c50be70..6c5270de 100644
--- a/src/pages/ExploreSetPage/SetExploreCard/SupportingArtists.tsx
+++ b/src/pages/ExploreSetPage/SetExploreCard/SupportingArtists.tsx
@@ -16,7 +16,7 @@ export function SupportingArtists({ artists }: SupportingArtistsProps) {
 
   return (
     <div className="space-y-2">
-      <p className="text-center text-sm text-gray-400">
+      <p className="text-center text-sm text-subtle-foreground">
         {artists.length === 1 ? "With" : "With"}
       </p>
       <div className="flex flex-wrap gap-2 justify-center">
@@ -24,7 +24,7 @@ export function SupportingArtists({ artists }: SupportingArtistsProps) {
           <Badge
             key={artist.id}
             variant="outline"
-            className="bg-white/10 text-white border-white/20 text-xs"
+            className="bg-surface-raised text-foreground border-surface-active text-xs"
           >
             {artist.name}
           </Badge>
@@ -32,7 +32,7 @@ export function SupportingArtists({ artists }: SupportingArtistsProps) {
         {artists.length > 3 && (
           <Badge
             variant="outline"
-            className="bg-white/10 text-white border-white/20 text-xs"
+            className="bg-surface-raised text-foreground border-surface-active text-xs"
           >
             +{artists.length - 3} more
           </Badge>
diff --git a/src/pages/ExploreSetPage/VotingActions.tsx b/src/pages/ExploreSetPage/VotingActions.tsx
index 833bce77..096089dc 100644
--- a/src/pages/ExploreSetPage/VotingActions.tsx
+++ b/src/pages/ExploreSetPage/VotingActions.tsx
@@ -46,8 +46,8 @@ export function VotingActions({
           variant="outline"
           className={`h-16 w-16 rounded-full transition-all duration-100 ${
             isLeftDrag
-              ? `bg-gray-500 border-gray-500 text-white shadow-lg`
-              : "border-gray-500 hover:bg-gray-500 hover:border-gray-500 text-gray-500 hover:text-white"
+              ? `bg-vote-skip border-vote-skip text-foreground shadow-lg`
+              : "border-vote-skip hover:bg-vote-skip hover:border-vote-skip text-vote-skip hover:text-foreground"
           }`}
           onClick={() => onVote(wontGoConfig.value)}
         >
@@ -59,7 +59,7 @@ export function VotingActions({
       <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
         <Button
           variant="ghost"
-          className="text-white/60 hover:text-white"
+          className="text-foreground/60 hover:text-foreground"
           onClick={onSkip}
         >
           Skip
@@ -78,7 +78,7 @@ export function VotingActions({
         <Button
           size="lg"
           variant="outline"
-          className="h-16 w-16 rounded-full border-orange-500 hover:bg-orange-500 hover:border-orange-500 text-orange-500 hover:text-white"
+          className="h-16 w-16 rounded-full border-vote-must hover:bg-vote-must hover:border-vote-must text-vote-must hover:text-foreground"
           onClick={() => onVote(mustGoConfig.value)}
         >
           <MustGoIcon className="h-6 w-6" />
@@ -100,8 +100,8 @@ export function VotingActions({
           variant="outline"
           className={`h-16 w-16 rounded-full transition-all duration-100 ${
             isRightDrag
-              ? `bg-blue-500 border-blue-500 text-white shadow-lg`
-              : "border-blue-500 hover:bg-blue-500 hover:border-blue-500 text-blue-500 hover:text-white"
+              ? `bg-vote-interested border-vote-interested text-foreground shadow-lg`
+              : "border-vote-interested hover:bg-vote-interested hover:border-vote-interested text-vote-interested hover:text-foreground"
           }`}
           onClick={() => onVote(interestedConfig.value)}
         >
diff --git a/src/pages/ExploreSetPage/components/EmptyState.tsx b/src/pages/ExploreSetPage/components/EmptyState.tsx
index b397659c..166dbe65 100644
--- a/src/pages/ExploreSetPage/components/EmptyState.tsx
+++ b/src/pages/ExploreSetPage/components/EmptyState.tsx
@@ -8,7 +8,7 @@ export function EmptyState() {
   });
   return (
     <div className="min-h-screen bg-gradient-to-b from-purple-900 to-black flex flex-col items-center justify-center p-4">
-      <div className="text-white text-center">
+      <div className="text-foreground text-center">
         <h1 className="text-2xl font-bold mb-4">No Sets Available</h1>
         <p className="mb-6">
           You have explored all available sets in this edition
diff --git a/src/pages/ExploreSetPage/components/ExplorePageHeader.tsx b/src/pages/ExploreSetPage/components/ExplorePageHeader.tsx
index 3e16adbe..6e9eef85 100644
--- a/src/pages/ExploreSetPage/components/ExplorePageHeader.tsx
+++ b/src/pages/ExploreSetPage/components/ExplorePageHeader.tsx
@@ -28,7 +28,7 @@ export function ExplorePageHeader({
           asChild
           variant="ghost"
           size="sm"
-          className="text-white hover:bg-white/20 flex items-center "
+          className="text-foreground hover:bg-surface-active flex items-center "
         >
           <Link
             from="/festivals/$festivalSlug/editions/$editionSlug/explore"
@@ -40,7 +40,7 @@ export function ExplorePageHeader({
         </Button>
       </div>
 
-      <div className="text-center text-white">
+      <div className="text-center text-foreground">
         <h1 className="font-semibold">{editionName}</h1>
         <ExplorationProgress current={currentIndex + 1} total={totalSets} />
       </div>
diff --git a/src/pages/ExploreSetPage/components/LoadingState.tsx b/src/pages/ExploreSetPage/components/LoadingState.tsx
index 5ffd9444..a3cdccc5 100644
--- a/src/pages/ExploreSetPage/components/LoadingState.tsx
+++ b/src/pages/ExploreSetPage/components/LoadingState.tsx
@@ -1,7 +1,7 @@
 export function LoadingState() {
   return (
     <div className="min-h-screen bg-gradient-to-b from-purple-900 to-black flex items-center justify-center">
-      <div className="text-white text-xl">Loading sets...</div>
+      <div className="text-foreground text-xl">Loading sets...</div>
     </div>
   );
 }
diff --git a/src/pages/ExploreSetPage/components/ProgressInfoTooltip.tsx b/src/pages/ExploreSetPage/components/ProgressInfoTooltip.tsx
index 278d32fa..1f532b2b 100644
--- a/src/pages/ExploreSetPage/components/ProgressInfoTooltip.tsx
+++ b/src/pages/ExploreSetPage/components/ProgressInfoTooltip.tsx
@@ -25,13 +25,13 @@ export function ProgressInfoTooltip({
         <Button
           variant="ghost"
           size="icon"
-          className="text-white/60 hover:text-white hover:bg-white/20"
+          className="text-foreground/60 hover:text-foreground hover:bg-surface-active"
         >
           <Info className="h-4 w-4" />
         </Button>
       </PopoverTrigger>
       <PopoverContent
-        className="bg-gray-900 border-gray-700 text-white px-3 py-2 rounded-sm shadow-md"
+        className="bg-popover border border-border text-popover-foreground px-3 py-2 rounded-sm shadow-md"
         side="bottom"
         align="end"
       >
@@ -39,24 +39,28 @@ export function ProgressInfoTooltip({
           <h4 className="font-semibold text-sm">Progress Details</h4>
           <div className="space-y-2 text-sm">
             <div className="flex justify-between">
-              <span className="text-gray-400 mr-1">Already voted:</span>
+              <span className="text-subtle-foreground mr-1">
+                Already voted:
+              </span>
               <span>{votedCount}</span>
             </div>
             <div className="flex justify-between">
-              <span className="text-gray-400 mr-1">Skipped:</span>
+              <span className="text-subtle-foreground mr-1">Skipped:</span>
               <span>{skippedCount}</span>
             </div>
             <div className="flex justify-between">
-              <span className="text-gray-400 mr-1">No SoundCloud:</span>
+              <span className="text-subtle-foreground mr-1">
+                No SoundCloud:
+              </span>
               <span>{nonExplorableCount}</span>
             </div>
-            <div className="border-t border-gray-700 pt-2 mt-2">
+            <div className="border-t border-border pt-2 mt-2">
               <div className="flex justify-between">
-                <span className="text-gray-400 mr-1">Current:</span>
+                <span className="text-subtle-foreground mr-1">Current:</span>
                 <span>{current}</span>
               </div>
               <div className="flex justify-between mt-1">
-                <span className="text-gray-400 mr-1">Total:</span>
+                <span className="text-subtle-foreground mr-1">Total:</span>
                 <span>{total}</span>
               </div>
             </div>
diff --git a/src/pages/SetDetails/IndividualArtistCard.tsx b/src/pages/SetDetails/IndividualArtistCard.tsx
index 7b9c7d84..d2d5f815 100644
--- a/src/pages/SetDetails/IndividualArtistCard.tsx
+++ b/src/pages/SetDetails/IndividualArtistCard.tsx
@@ -17,7 +17,7 @@ export function IndividualArtistCard({
   showFullDetails = false,
 }: IndividualArtistCardProps) {
   return (
-    <Card className="bg-white/5 backdrop-blur-sm border-purple-400/20">
+    <Card className="bg-surface backdrop-blur-sm border">
       {/* Artist Image */}
       <div className="aspect-square overflow-hidden rounded-t-lg">
         <ArtistImageLoader
@@ -28,7 +28,7 @@ export function IndividualArtistCard({
       </div>
 
       <CardHeader className="pb-3">
-        <CardTitle className="text-lg font-bold text-white">
+        <CardTitle className="text-lg font-bold text-foreground">
           {artist.name}
         </CardTitle>
 
@@ -48,7 +48,7 @@ export function IndividualArtistCard({
             artist.artist_music_genres.length > 2 && (
               <Badge
                 variant="outline"
-                className="text-xs border-purple-400/50 text-purple-300"
+                className="text-xs border-strong text-subtle-foreground"
               >
                 +{artist.artist_music_genres.length - 2}
               </Badge>
@@ -62,7 +62,7 @@ export function IndividualArtistCard({
           <div className="mb-3">
             <MarkdownText
               content={artist.description}
-              className="prose-sm prose-invert text-purple-200 line-clamp-3"
+              className="prose-sm prose-invert text-muted-foreground line-clamp-3"
             />
           </div>
         )}
diff --git a/src/pages/SetDetails/MixedArtistImage.tsx b/src/pages/SetDetails/MixedArtistImage.tsx
index 01117f73..2fa8d014 100644
--- a/src/pages/SetDetails/MixedArtistImage.tsx
+++ b/src/pages/SetDetails/MixedArtistImage.tsx
@@ -20,7 +20,7 @@ export function MixedArtistImage({
       <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-foreground text-center p-4">
           <div className="text-2xl font-bold mb-2">🎵</div>
           {/* <div className="text-sm font-medium">{setName}</div> */}
         </div>
@@ -128,7 +128,7 @@ export function MixedArtistImage({
             {/* 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">
+                <div className="text-foreground text-lg font-bold">
                   +{artistsWithImages.length - 4}
                 </div>
               </div>
diff --git a/src/pages/SetDetails/MultiArtistSetInfoCard.tsx b/src/pages/SetDetails/MultiArtistSetInfoCard.tsx
index 200fccfb..238e3df3 100644
--- a/src/pages/SetDetails/MultiArtistSetInfoCard.tsx
+++ b/src/pages/SetDetails/MultiArtistSetInfoCard.tsx
@@ -57,19 +57,19 @@ export function MultiArtistSetInfoCard({
   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">
+      <Card className="bg-surface-raised backdrop-blur-md border">
         <CardHeader>
           <div className="flex items-start justify-between">
             <div className="flex-1">
-              <CardTitle className="text-3xl font-bold text-white mb-2">
+              <CardTitle className="text-3xl font-bold text-foreground 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">
+                  <Users className="h-4 w-4 text-muted-foreground" />
+                  <span className="text-sm text-muted-foreground font-medium">
                     {set.artists.length} Artists
                   </span>
                 </div>
@@ -99,7 +99,7 @@ export function MultiArtistSetInfoCard({
               </div>
 
               {/* Performance Information */}
-              <div className="flex flex-wrap gap-4 mb-4 text-purple-200">
+              <div className="flex flex-wrap gap-4 mb-4 text-muted-foreground">
                 {canShowStage && <StagePin stageId={set.stage_id} />}
                 {timeRangeFormatted && (
                   <div className="flex items-center gap-2">
@@ -120,7 +120,7 @@ export function MultiArtistSetInfoCard({
             </div>
           </div>
           {set.description && (
-            <CardDescription className="text-purple-200 text-lg leading-relaxed">
+            <CardDescription className="text-muted-foreground text-lg leading-relaxed">
               <MarkdownText
                 content={set.description}
                 className="prose-sm prose-invert"
@@ -135,7 +135,7 @@ export function MultiArtistSetInfoCard({
 
       {/* Individual Artist Cards */}
       <div>
-        <h3 className="text-xl font-bold text-white mb-4 flex items-center gap-2">
+        <h3 className="text-xl font-bold text-foreground mb-4 flex items-center gap-2">
           <Users className="h-5 w-5" />
           Artists in this Set
         </h3>
diff --git a/src/pages/SetDetails/SetGroupVoting.tsx b/src/pages/SetDetails/SetGroupVoting.tsx
index fa2b48d3..7429b130 100644
--- a/src/pages/SetDetails/SetGroupVoting.tsx
+++ b/src/pages/SetDetails/SetGroupVoting.tsx
@@ -54,25 +54,25 @@ function SetGroupVotingContent({
   const activeGroup = groups.find((g) => g.id === activeGroupId);
 
   return (
-    <Card className="bg-white/10 backdrop-blur-md border-purple-400/30">
+    <Card className="bg-surface-raised backdrop-blur-md border">
       <CardHeader>
-        <CardTitle className="text-white flex items-center gap-2">
+        <CardTitle className="text-foreground flex items-center gap-2">
           <Users className="h-5 w-5" />
           Group Voting
         </CardTitle>
         {activeGroup && (
-          <p className="text-purple-200 text-sm">
+          <p className="text-muted-foreground text-sm">
             How {activeGroup.name} voted on this artist
           </p>
         )}
       </CardHeader>
       <CardContent>
         {loading ? (
-          <div className="text-center py-4 text-purple-200">
+          <div className="text-center py-4 text-muted-foreground">
             Loading votes...
           </div>
         ) : groupVotes.length === 0 ? (
-          <div className="text-center py-4 text-purple-200">
+          <div className="text-center py-4 text-muted-foreground">
             No one in this group has voted on this artist yet.
           </div>
         ) : (
@@ -110,7 +110,7 @@ function SetGroupVotingContent({
 
             {/* Individual Votes */}
             <div className="space-y-2">
-              <h4 className="text-white font-medium text-sm mb-2">
+              <h4 className="text-foreground font-medium text-sm mb-2">
                 Individual Votes:
               </h4>
               {groupVotes.map((vote) => {
@@ -119,9 +119,9 @@ function SetGroupVotingContent({
                 return (
                   <div
                     key={vote.user_id}
-                    className="flex items-center justify-between py-2 px-3 rounded-lg bg-white/5"
+                    className="flex items-center justify-between py-2 px-3 rounded-lg bg-surface"
                   >
-                    <span className="text-purple-200">
+                    <span className="text-muted-foreground">
                       {vote.username || "Unknown User"}
                     </span>
                     <Badge
diff --git a/src/pages/SetDetails/SetImageCard.tsx b/src/pages/SetDetails/SetImageCard.tsx
index 54a37170..9ef75fdd 100644
--- a/src/pages/SetDetails/SetImageCard.tsx
+++ b/src/pages/SetDetails/SetImageCard.tsx
@@ -12,7 +12,7 @@ export function ArtistImageCard({
 }: ArtistImageCardProps) {
   return (
     <div className="lg:col-span-1">
-      <Card className="bg-white/10 backdrop-blur-md border-purple-400/30">
+      <Card className="bg-surface-raised backdrop-blur-md border">
         <CardContent className="p-6">
           <ArtistImageLoader
             src={imageUrl}
diff --git a/src/pages/SetDetails/SetInfoCard.tsx b/src/pages/SetDetails/SetInfoCard.tsx
index af22bdc7..f1dd0652 100644
--- a/src/pages/SetDetails/SetInfoCard.tsx
+++ b/src/pages/SetDetails/SetInfoCard.tsx
@@ -48,11 +48,11 @@ export function SetInfoCard({
       : null;
   return (
     <div className="lg:col-span-2">
-      <Card className="bg-white/10 backdrop-blur-md border-purple-400/30 h-full">
+      <Card className="bg-surface-raised backdrop-blur-md border h-full">
         <CardHeader>
           <div className="flex items-start justify-between">
             <div className="flex-1">
-              <CardTitle className="text-3xl font-bold text-white mb-2">
+              <CardTitle className="text-3xl font-bold text-foreground mb-2">
                 {set.name}
               </CardTitle>
               <div className="flex flex-wrap gap-2 mb-4">
@@ -78,7 +78,7 @@ export function SetInfoCard({
               </div>
 
               {/* Performance Information */}
-              <div className="flex flex-wrap gap-4 mb-4 text-purple-200">
+              <div className="flex flex-wrap gap-4 mb-4 text-muted-foreground">
                 {canShowStage && <StagePin stageId={set.stage_id} />}
                 {timeRangeFormatted && (
                   <div className="flex items-center gap-2">
@@ -99,7 +99,7 @@ export function SetInfoCard({
             </div>
           </div>
           {(set.description || artist.description) && (
-            <CardDescription className="text-purple-200 text-lg leading-relaxed">
+            <CardDescription className="text-muted-foreground text-lg leading-relaxed">
               <MarkdownText
                 content={set.description || artist.description || ""}
                 className="prose-sm prose-invert"
diff --git a/src/pages/SetDetails/SetNotes.tsx b/src/pages/SetDetails/SetNotes.tsx
index 23411b19..265ac4e2 100644
--- a/src/pages/SetDetails/SetNotes.tsx
+++ b/src/pages/SetDetails/SetNotes.tsx
@@ -25,13 +25,13 @@ export function SetNotes({ setId, userId }: SetNotesProps) {
 
   if (!userId) {
     return (
-      <Card className="bg-white/10 backdrop-blur-md border-purple-400/30">
+      <Card className="bg-surface-raised backdrop-blur-md border">
         <CardHeader>
-          <CardTitle className="flex items-center space-x-2 text-white">
+          <CardTitle className="flex items-center space-x-2 text-foreground">
             <StickyNote className="h-5 w-5" />
             <span>Group Notes</span>
           </CardTitle>
-          <CardDescription className="text-purple-200">
+          <CardDescription className="text-muted-foreground">
             Sign in to add notes and see notes from group members
           </CardDescription>
         </CardHeader>
@@ -40,15 +40,15 @@ export function SetNotes({ setId, userId }: SetNotesProps) {
   }
 
   return (
-    <Card className="bg-white/10 backdrop-blur-md border-purple-400/30">
+    <Card className="bg-surface-raised backdrop-blur-md border">
       <CardHeader>
         <div className="flex items-center justify-between">
           <div>
-            <CardTitle className="flex items-center space-x-2 text-white">
+            <CardTitle className="flex items-center space-x-2 text-foreground">
               <StickyNote className="h-5 w-5" />
               <span>Group Notes</span>
             </CardTitle>
-            <CardDescription className="text-purple-200">
+            <CardDescription className="text-muted-foreground">
               Notes from you and group members about this artist
             </CardDescription>
           </div>
@@ -77,10 +77,10 @@ export function SetNotes({ setId, userId }: SetNotesProps) {
               </div>
             )}
 
-            <div className="text-center py-4 border-t border-purple-400/20">
+            <div className="text-center py-4 border-t border-border">
               <Button
                 onClick={() => setIsEditing(true)}
-                className="bg-purple-600 hover:bg-purple-700"
+                className="bg-accent text-accent-foreground hover:bg-accent-hover"
               >
                 <Edit3 className="h-4 w-4 mr-2" />
                 Add Note
diff --git a/src/pages/SetDetails/notes/CreateNoteForm.tsx b/src/pages/SetDetails/notes/CreateNoteForm.tsx
index 3b2dc9a8..1f410aa1 100644
--- a/src/pages/SetDetails/notes/CreateNoteForm.tsx
+++ b/src/pages/SetDetails/notes/CreateNoteForm.tsx
@@ -23,13 +23,13 @@ export function CreateNoteForm({
         value={noteContent}
         onChange={(e) => setNoteContent(e.target.value)}
         placeholder="Add your thoughts about this artist..."
-        className="min-h-[120px] bg-white/5 border-purple-400/30 text-white placeholder:text-purple-300"
+        className="min-h-[120px] bg-surface border text-foreground placeholder:text-subtle-foreground"
       />
       <div className="flex items-center space-x-2">
         <Button
           onClick={handleSave}
           disabled={mutation.isPending || !noteContent.trim()}
-          className="bg-purple-600 hover:bg-purple-700"
+          className="bg-accent text-accent-foreground hover:bg-accent-hover"
         >
           <SaveIcon className="h-4 w-4 mr-2" />
           {mutation.isPending ? "Saving..." : "Save Note"}
@@ -38,7 +38,7 @@ export function CreateNoteForm({
           variant="outline"
           onClick={handleCancel}
           disabled={mutation.isPending}
-          className="border-purple-400 text-purple-400 hover:bg-purple-400 hover:text-white"
+          className="border-ring text-ring hover:bg-ring hover:text-foreground"
         >
           <XIcon className="h-4 w-4 mr-2" />
           Cancel
diff --git a/src/pages/SetDetails/notes/SetNoteItem.tsx b/src/pages/SetDetails/notes/SetNoteItem.tsx
index 544728db..c7249078 100644
--- a/src/pages/SetDetails/notes/SetNoteItem.tsx
+++ b/src/pages/SetDetails/notes/SetNoteItem.tsx
@@ -3,6 +3,7 @@ import { confirm } from "@/hooks/use-confirm";
 import { SetNote } from "@/api/artist-notes/types";
 import { useDeleteNoteMutation } from "@/api/artist-notes/useDeleteNoteMutation";
 import { Trash2Icon } from "lucide-react";
+import { formatDateOnly } from "@/lib/timeUtils";
 
 export function SetNoteItem({
   isOwn,
@@ -14,9 +15,9 @@ export function SetNoteItem({
   const deleteNoteMutation = useDeleteNoteMutation();
 
   return (
-    <div className="bg-white/5 rounded-lg p-4 border border-purple-400/20">
+    <div className="bg-surface rounded-lg p-4 border">
       <div className="flex items-start justify-between mb-2">
-        <div className="text-sm text-purple-300">
+        <div className="text-sm text-subtle-foreground">
           By: {note.author_username || note.author_email || "Unknown User"}
         </div>
         {isOwn && (
@@ -24,18 +25,18 @@ export function SetNoteItem({
             variant="outline"
             size="sm"
             onClick={handleDelete}
-            className="border-red-400/50 text-red-400 hover:bg-red-400 hover:text-white"
+            className="border-destructive/50 text-destructive hover:bg-destructive hover:text-destructive-foreground"
             disabled={deleteNoteMutation.isPending}
           >
             <Trash2Icon className="h-4 w-4" />
           </Button>
         )}
       </div>
-      <div className="text-white whitespace-pre-wrap break-words mb-2">
+      <div className="text-foreground whitespace-pre-wrap break-words mb-2">
         {note.note_content}
       </div>
-      <div className="text-xs text-purple-400">
-        {new Date(note.updated_at).toLocaleDateString()}
+      <div className="text-xs text-accent-soft-foreground">
+        {formatDateOnly(note.updated_at)}
       </div>
     </div>
   );
diff --git a/tailwind.config.ts b/tailwind.config.ts
index a6448ada..507f4bf8 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -84,6 +84,7 @@ export default {
           foreground: "hsl(var(--accent-foreground))",
           hover: "hsl(var(--accent-hover))",
           soft: "hsl(var(--accent-soft))",
+          "soft-foreground": "hsl(var(--accent-soft-foreground))",
         },
         popover: {
           DEFAULT: "hsl(var(--popover))",