diff --git a/CLAUDE.md b/CLAUDE.md
index 2efee5b8..b482d326 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -112,6 +112,7 @@ src/
 - **React Router**: Use future flags `v7_startTransition` and `v7_relativeSplatPath` in BrowserRouter to prepare for v7 upgrade
 - **Component Extraction**: When a section of JSX + logic becomes substantial (>30 lines) or reusable, extract it into a separate component. Place in appropriate directory: page-specific components in `components/PageName/`, reusable ones in `components/`
 - **Forms**: ALL forms must use react-hook-form with proper validation. Never use plain HTML forms or manual state management for form inputs. Use @hookform/resolvers for validation schemas when needed.
+- **Long Components**: Break long components (>150 lines) into smaller focused pieces. Follow the FilterSortControls pattern of primary controls + expandable sections.
 
 ### Important Notes
 
@@ -126,3 +127,7 @@ src/
 - try to use mutation.mutate(variables, {onSuccess, onError}) instead of try{await mutation.mutateAsync(variables)}catch(err){}
 
 - don't add comments unless really necessary
+
+## Git Workflow
+
+- **Auto-commit Rule**: For every user message that requests code changes, automatically commit the changes after implementation with an appropriate commit message
diff --git a/MUTATE_ASYNC_CONVERSION_PLAN.md b/MUTATE_ASYNC_CONVERSION_PLAN.md
new file mode 100644
index 00000000..af452e57
--- /dev/null
+++ b/MUTATE_ASYNC_CONVERSION_PLAN.md
@@ -0,0 +1,150 @@
+# MutateAsync to Mutate Conversion Plan
+
+## Overview
+
+This document outlines the plan to convert all `mutateAsync` usage to regular `mutate` calls throughout the codebase, following the project convention that prefers `mutation.mutate(variables, {onSuccess, onError})` over `try{await mutation.mutateAsync(variables)}catch(err){}`.
+
+## Current Status
+
+Found **15 files** with `mutateAsync` usage across **16 instances**:
+
+## Files to Convert
+
+### 1. **Offline Operations** (2 files)
+- `src/hooks/useOfflineVoting.ts:34`
+- `src/hooks/useOfflineNotes.ts:26` 
+- `src/hooks/useOfflineNotes.ts:41`
+
+### 2. **Admin Components** (8 files)
+- `src/components/Admin/FestivalManagementTable.tsx:45`
+- `src/components/Admin/FestivalLogoDialog.tsx:45`
+- `src/components/Admin/FestivalLogoDialog.tsx:78`
+- `src/components/Admin/FestivalEditionManagement.tsx:171`
+- `src/components/Admin/FestivalEditionManagement.tsx:176`
+- `src/components/Admin/FestivalDialog.tsx:143`
+- `src/components/Admin/FestivalDialog.tsx:148`
+- `src/components/Admin/StageManagement.tsx:87`
+- `src/components/Admin/StageManagement.tsx:92`
+- `src/components/Admin/StageManagement.tsx:117`
+- `src/components/Admin/SetFormDialog.tsx:174`
+- `src/components/Admin/SetFormDialog.tsx:180`
+- `src/components/Admin/SetFormDialog.tsx:193`
+- `src/components/Admin/SetFormDialog.tsx:204`
+
+### 3. **Pages** (1 file)
+- `src/pages/GroupDetail.tsx:268`
+
+### 4. **Utilities** (2 files)
+- `src/components/Index/useInviteValidation.ts:67`
+- `src/hooks/queries/knowledge/useKnowledge.ts:147`
+
+## Conversion Patterns
+
+### Pattern 1: Simple Try-Catch → onSuccess/onError
+
+**Before:**
+```typescript
+try {
+  await mutation.mutateAsync(variables);
+  // success logic
+} catch (error) {
+  // error handling
+}
+```
+
+**After:**
+```typescript
+mutation.mutate(variables, {
+  onSuccess: () => {
+    // success logic
+  },
+  onError: (error) => {
+    // error handling
+  }
+});
+```
+
+### Pattern 2: Complex Sequential Operations
+
+**Before:**
+```typescript
+try {
+  const result = await mutation1.mutateAsync(data1);
+  await mutation2.mutateAsync({ id: result.id, ...data2 });
+  // success logic
+} catch (error) {
+  // error handling
+}
+```
+
+**After:**
+```typescript
+mutation1.mutate(data1, {
+  onSuccess: (result) => {
+    mutation2.mutate({ id: result.id, ...data2 }, {
+      onSuccess: () => {
+        // success logic
+      },
+      onError: (error) => {
+        // error handling
+      }
+    });
+  },
+  onError: (error) => {
+    // error handling
+  }
+});
+```
+
+### Pattern 3: Multiple Sequential Mutations
+
+For files like `SetFormDialog.tsx` with multiple sequential mutations, we'll need to chain them using nested `onSuccess` callbacks or create helper functions.
+
+## Conversion Priority
+
+### **High Priority** (Simple conversions)
+1. `useOfflineVoting.ts` - Single mutation
+2. `useOfflineNotes.ts` - Two simple mutations  
+3. `FestivalManagementTable.tsx` - Single deletion
+4. `StageManagement.tsx` - Create/Update/Delete operations
+5. `GroupDetail.tsx` - Single remove member operation
+6. `useInviteValidation.ts` - Single invite mutation
+7. `useKnowledge.ts` - Single toggle mutation
+
+### **Medium Priority** (Moderate complexity)
+8. `FestivalLogoDialog.tsx` - Upload then update operations
+9. `FestivalEditionManagement.tsx` - Create/Update with form reset
+10. `FestivalDialog.tsx` - Create/Update with cleanup
+
+### **Low Priority** (Complex sequential operations)
+11. `SetFormDialog.tsx` - Multiple chained mutations with loops
+
+## Benefits of Conversion
+
+1. **Consistency** - Aligns with project conventions
+2. **Better Error Handling** - Centralized in mutation hooks
+3. **Cleaner Code** - No try-catch blocks needed
+4. **Loading States** - Automatic `isPending` management
+5. **Success Handling** - Cleaner success callback patterns
+
+## Implementation Steps
+
+1. **Phase 1**: Convert simple single-mutation files (High Priority)
+2. **Phase 2**: Convert moderate complexity files (Medium Priority)  
+3. **Phase 3**: Refactor complex sequential operations (Low Priority)
+4. **Phase 4**: Test all conversions and ensure functionality remains identical
+
+## Testing Strategy
+
+- Verify each conversion maintains identical behavior
+- Test error scenarios to ensure proper error handling
+- Confirm loading states work correctly
+- Check that success/cleanup logic executes as expected
+
+## Completion Criteria
+
+- [ ] All 16 `mutateAsync` instances converted to `mutate`
+- [ ] No remaining `mutateAsync` usage in codebase
+- [ ] All functionality verified to work identically
+- [ ] Consistent error handling patterns across all mutations
+- [ ] Code follows project conventions for mutation usage
\ No newline at end of file
diff --git a/src/components/AppHeader.tsx b/src/components/AppHeader.tsx
index 187664f2..62c073d0 100644
--- a/src/components/AppHeader.tsx
+++ b/src/components/AppHeader.tsx
@@ -1,13 +1,9 @@
-import { ReactNode } from "react";
-import { Link, useNavigate } from "react-router-dom";
-import { Button } from "@/components/ui/button";
+import { ReactNode, useRef } from "react";
+import { useNavigate } from "react-router-dom";
 import { TooltipProvider } from "@/components/ui/tooltip";
-import { Music, Heart, LogIn } from "lucide-react";
-import { useIsMobile } from "@/hooks/use-mobile";
-import { Navigation } from "./AppHeader/Navigation";
-import { UserMenu } from "./AppHeader/UserMenu";
-import { AdminActions } from "./AppHeader/AdminActions";
-import { useAuth } from "@/contexts/AuthContext";
+import { useScrollVisibility } from "@/hooks/useScrollVisibility";
+import { TopBar } from "./AppHeader/TopBar";
+import { TitleSection } from "./AppHeader/TitleSection";
 
 interface AppHeaderProps {
   // Navigation
@@ -17,12 +13,9 @@ interface AppHeaderProps {
 
   // Page content
   title?: string;
+  logoUrl?: string | null;
   subtitle?: string;
   description?: string;
-  logoUrl?: string | null;
-
-  // Actions
-  actions?: ReactNode;
 
   // Navigation options
   showGroupsButton?: boolean;
@@ -35,140 +28,39 @@ export function AppHeader({
   showBackButton = false,
   backLabel = "Back",
   title,
-  subtitle,
-  description,
+  // subtitle,
+  // description,
   logoUrl,
-  actions,
+  // actions,
   showGroupsButton = false,
-  children,
+  // children,
 }: AppHeaderProps) {
   const navigate = useNavigate();
-  const { user, profile, signOut, showAuthDialog } = useAuth();
-  const isMobile = useIsMobile();
+
+  // Track visibility of title section for festival context in top bar
+  const titleRef = useRef<HTMLDivElement>(null);
+  const isTitleVisible = useScrollVisibility(titleRef);
 
   function handleBackClick() {
     navigate(-1);
   }
 
-  function getGreeting() {
-    const hour = new Date().getHours();
-    if (hour < 12) return "Good morning";
-    if (hour < 18) return "Good afternoon";
-    return "Good evening";
-  }
-
-  const displayName =
-    profile?.username || user?.email?.split("@")[0] || "there";
-
   return (
     <TooltipProvider>
-      <div className="mb-8">
-        {/* Top Bar - App Branding, User Identity & Navigation */}
-        <div className="flex items-center justify-between mb-6 pb-6 border-b border-purple-400/20">
-          {/* Left Side - Branding */}
-          <div className="flex items-center gap-4">
-            <Link to="/">
-              <div className="flex items-center gap-3">
-                <Music className="h-6 w-6 text-purple-400" />
-                <h1 className="text-2xl font-bold text-white">UpLine</h1>
-              </div>
-            </Link>
-
-            {/* User Greeting - Desktop Only */}
-            {user && !isMobile && (
-              <div className="flex items-center gap-3 pl-4 border-l border-purple-400/20">
-                <span className="text-purple-200 text-sm">
-                  {getGreeting()}, {displayName}! 🎶
-                </span>
-              </div>
-            )}
-          </div>
-
-          {/* Right Side - Navigation & User Actions */}
-          <div className="flex items-center gap-4">
-            {/* Navigation Buttons */}
-            <Navigation
-              showBackButton={showBackButton}
-              backLabel={backLabel}
-              showGroupsButton={showGroupsButton}
-              isMobile={isMobile}
-              onBackClick={handleBackClick}
-            />
-
-            {/* Admin Actions */}
-            {user && (
-              <div className="flex items-center gap-3">
-                <AdminActions userId={user.id} isMobile={isMobile} />
-              </div>
-            )}
-
-            {/* Authentication - User Menu or Sign In */}
-            <div className="flex items-center">
-              {user ? (
-                <UserMenu
-                  user={user}
-                  profile={profile || undefined}
-                  onSignOut={signOut}
-                  isMobile={isMobile}
-                />
-              ) : (
-                <Button
-                  onClick={() => showAuthDialog()}
-                  size={isMobile ? "sm" : "default"}
-                  className="bg-purple-600 hover:bg-purple-700 text-white font-medium rounded-full px-6"
-                >
-                  <LogIn className="h-4 w-4" />
-                  <span className={isMobile ? "ml-1" : "ml-2"}>
-                    {isMobile ? "Sign In" : "Sign In / Sign Up"}
-                  </span>
-                </Button>
-              )}
-            </div>
-          </div>
+      <div>
+        <TopBar
+          showBackButton={showBackButton}
+          backLabel={backLabel}
+          showGroupsButton={showGroupsButton}
+          onBackClick={handleBackClick}
+          isTitleVisible={isTitleVisible}
+          logoUrl={logoUrl}
+          title={title}
+        />
+
+        <div className="pt-16 md:pt-20" ref={titleRef}>
+          <TitleSection title={title} logoUrl={logoUrl} />
         </div>
-
-        {/* Page Content Section */}
-        {(title || subtitle || description || children) && (
-          <div className="text-center space-y-4">
-            {title && (
-              <div className="flex items-center justify-center gap-3 mb-6">
-                {logoUrl ? (
-                  <img
-                    src={logoUrl}
-                    alt={`${title} logo`}
-                    className="h-40 w-auto max-w-sm object-contain rounded"
-                  />
-                ) : (
-                  <>
-                    <Music className="h-8 w-8 text-purple-400 animate-pulse" />
-                    <h2 className="text-4xl font-bold text-white tracking-tight">
-                      {title}
-                    </h2>
-                    <Heart className="h-8 w-8 text-pink-400 animate-pulse" />
-                  </>
-                )}
-              </div>
-            )}
-
-            {subtitle && (
-              <p className="text-xl text-purple-200 font-medium mb-4">
-                {subtitle}
-              </p>
-            )}
-
-            {description && (
-              <p className="text-purple-300 mb-6 max-w-2xl mx-auto leading-relaxed">
-                {description}
-              </p>
-            )}
-
-            {actions && (
-              <div className="flex justify-center mb-8">{actions}</div>
-            )}
-
-            {children}
-          </div>
-        )}
       </div>
     </TooltipProvider>
   );
diff --git a/src/components/AppHeader/AppBranding.tsx b/src/components/AppHeader/AppBranding.tsx
new file mode 100644
index 00000000..f36925ab
--- /dev/null
+++ b/src/components/AppHeader/AppBranding.tsx
@@ -0,0 +1,43 @@
+import { Link } from "react-router-dom";
+import { Music } from "lucide-react";
+import { useAuth } from "@/contexts/AuthContext";
+import { useFestivalEdition } from "@/contexts/FestivalEditionContext";
+
+interface AppBrandingProps {
+  isMobile: boolean;
+}
+
+export function AppBranding({ isMobile }: AppBrandingProps) {
+  const { user, profile } = useAuth();
+  const { basePath } = useFestivalEdition();
+
+  function getGreeting() {
+    const hour = new Date().getHours();
+    if (hour < 12) return "Good morning";
+    if (hour < 18) return "Good afternoon";
+    return "Good evening";
+  }
+
+  const displayName =
+    profile?.username || user?.email?.split("@")[0] || "there";
+
+  return (
+    <div className="flex items-center gap-4 flex-1">
+      <Link to={basePath}>
+        <div className="flex items-center gap-3">
+          <Music className="h-6 w-6 text-purple-400" />
+          <h1 className="text-xl md:text-2xl font-bold text-white">UpLine</h1>
+        </div>
+      </Link>
+
+      {/* User Greeting - Desktop Only */}
+      {user && !isMobile && (
+        <div className="flex items-center gap-3 pl-4 border-l border-purple-400/20">
+          <span className="text-purple-200 text-sm">
+            {getGreeting()}, {displayName}! 🎶
+          </span>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/AppHeader/FestivalIndicator.tsx b/src/components/AppHeader/FestivalIndicator.tsx
new file mode 100644
index 00000000..72bc364f
--- /dev/null
+++ b/src/components/AppHeader/FestivalIndicator.tsx
@@ -0,0 +1,31 @@
+import { useFestivalEdition } from "@/contexts/FestivalEditionContext";
+
+interface FestivalIndicatorProps {
+  isTitleVisible: boolean;
+  logoUrl?: string | null;
+  title?: string;
+}
+
+export function FestivalIndicator({
+  isTitleVisible,
+  logoUrl,
+  title,
+}: FestivalIndicatorProps) {
+  const { festival } = useFestivalEdition();
+
+  if (isTitleVisible || !logoUrl) {
+    return <div className="flex-1" />;
+  }
+
+  return (
+    <div className="flex-1 flex items-center justify-center">
+      <div className="flex items-center gap-2">
+        <img
+          src={logoUrl}
+          alt={`${festival?.name || title} logo`}
+          className="size-8 md:size-12 object-contain rounded"
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/AppHeader/TitleSection.tsx b/src/components/AppHeader/TitleSection.tsx
new file mode 100644
index 00000000..2b489e14
--- /dev/null
+++ b/src/components/AppHeader/TitleSection.tsx
@@ -0,0 +1,38 @@
+import { forwardRef } from "react";
+import { Music, Heart } from "lucide-react";
+
+interface TitleSectionProps {
+  title?: string;
+  logoUrl?: string | null;
+}
+
+export const TitleSection = forwardRef<HTMLDivElement, TitleSectionProps>(
+  ({ title, logoUrl }, ref) => {
+    if (!title) return null;
+
+    return (
+      <div
+        ref={ref}
+        className="text-center space-y-2 md:space-y-4 mb-4 md:mb-8"
+      >
+        <div className="flex items-center justify-center gap-2 md:gap-3 mb-3 md:mb-6">
+          {logoUrl ? (
+            <img
+              src={logoUrl}
+              alt={`${title} logo`}
+              className="h-20 md:h-32 lg:h-40 w-auto max-w-sm object-contain rounded"
+            />
+          ) : (
+            <>
+              <Music className="h-6 md:h-8 w-6 md:w-8 text-purple-400 animate-pulse md:block hidden" />
+              <h2 className="text-2xl md:text-3xl lg:text-4xl font-bold text-white tracking-tight hidden md:block">
+                {title}
+              </h2>
+              <Heart className="h-6 md:h-8 w-6 md:w-8 text-pink-400 animate-pulse md:block hidden" />
+            </>
+          )}
+        </div>
+      </div>
+    );
+  },
+);
diff --git a/src/components/AppHeader/TopBar.tsx b/src/components/AppHeader/TopBar.tsx
new file mode 100644
index 00000000..2cd90c75
--- /dev/null
+++ b/src/components/AppHeader/TopBar.tsx
@@ -0,0 +1,48 @@
+import { useIsMobile } from "@/hooks/use-mobile";
+import { AppBranding } from "./AppBranding";
+import { FestivalIndicator } from "./FestivalIndicator";
+import { UserActions } from "./UserActions";
+
+interface TopBarProps {
+  showBackButton?: boolean;
+  backLabel?: string;
+  showGroupsButton?: boolean;
+  onBackClick: () => void;
+
+  // Festival context
+  isTitleVisible: boolean;
+  logoUrl?: string | null;
+  title?: string;
+}
+
+export function TopBar({
+  showBackButton = false,
+  backLabel = "Back",
+  showGroupsButton = false,
+  onBackClick,
+  isTitleVisible,
+  logoUrl,
+  title,
+}: TopBarProps) {
+  const isMobile = useIsMobile();
+
+  return (
+    <div className="fixed top-0 left-0 right-0 z-50 backdrop-blur-md border-b border-purple-400/20 flex items-center px-4 py-3 md:py-4">
+      <AppBranding isMobile={isMobile} />
+
+      <FestivalIndicator
+        isTitleVisible={isTitleVisible}
+        logoUrl={logoUrl}
+        title={title}
+      />
+
+      <UserActions
+        showBackButton={showBackButton}
+        backLabel={backLabel}
+        showGroupsButton={showGroupsButton}
+        onBackClick={onBackClick}
+        isMobile={isMobile}
+      />
+    </div>
+  );
+}
diff --git a/src/components/AppHeader/UserActions.tsx b/src/components/AppHeader/UserActions.tsx
new file mode 100644
index 00000000..03bd58e8
--- /dev/null
+++ b/src/components/AppHeader/UserActions.tsx
@@ -0,0 +1,64 @@
+import { Button } from "@/components/ui/button";
+import { LogIn } from "lucide-react";
+import { Navigation } from "./Navigation";
+import { UserMenu } from "./UserMenu";
+import { AdminActions } from "./AdminActions";
+import { useAuth } from "@/contexts/AuthContext";
+
+interface UserActionsProps {
+  showBackButton?: boolean;
+  backLabel?: string;
+  showGroupsButton?: boolean;
+  onBackClick: () => void;
+  isMobile: boolean;
+}
+
+export function UserActions({
+  showBackButton = false,
+  backLabel = "Back",
+  showGroupsButton = false,
+  onBackClick,
+  isMobile,
+}: UserActionsProps) {
+  const { user, profile, signOut, showAuthDialog } = useAuth();
+
+  return (
+    <div className="flex items-center gap-4 justify-end flex-1">
+      <Navigation
+        showBackButton={showBackButton}
+        backLabel={backLabel}
+        showGroupsButton={showGroupsButton}
+        isMobile={isMobile}
+        onBackClick={onBackClick}
+      />
+
+      {user && (
+        <div className="flex items-center gap-3">
+          <AdminActions userId={user.id} isMobile={isMobile} />
+        </div>
+      )}
+
+      <div className="flex items-center">
+        {user ? (
+          <UserMenu
+            user={user}
+            profile={profile || undefined}
+            onSignOut={signOut}
+            isMobile={isMobile}
+          />
+        ) : (
+          <Button
+            onClick={() => showAuthDialog()}
+            size={isMobile ? "sm" : "default"}
+            className="bg-purple-600 hover:bg-purple-700 text-white font-medium rounded-full px-6"
+          >
+            <LogIn className="h-4 w-4" />
+            <span className={isMobile ? "ml-1" : "ml-2"}>
+              {isMobile ? "Sign In" : "Sign In / Sign Up"}
+            </span>
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/AppHeader/UserMenu.tsx b/src/components/AppHeader/UserMenu.tsx
index 50060515..0b9d2256 100644
--- a/src/components/AppHeader/UserMenu.tsx
+++ b/src/components/AppHeader/UserMenu.tsx
@@ -21,12 +21,12 @@ interface UserMenuProps {
   isMobile?: boolean;
 }
 
-export const UserMenu = ({
+export function UserMenu({
   user,
   profile,
   onSignOut,
   isMobile,
-}: UserMenuProps) => {
+}: UserMenuProps) {
   const displayName = profile?.username || user.email?.split("@")[0] || "User";
 
   return (
@@ -92,4 +92,4 @@ export const UserMenu = ({
       </DropdownMenuContent>
     </DropdownMenu>
   );
-};
+}
diff --git a/src/components/Index/filters/DesktopFilters.tsx b/src/components/Index/filters/DesktopFilters.tsx
index 4b80b46e..e43fe5e3 100644
--- a/src/components/Index/filters/DesktopFilters.tsx
+++ b/src/components/Index/filters/DesktopFilters.tsx
@@ -1,14 +1,11 @@
 import { Button } from "@/components/ui/button";
-import { X } from "lucide-react";
 import type { FilterSortState } from "@/hooks/useUrlState";
 import { useStagesByEditionQuery } from "@/hooks/queries/stages/useStagesByEdition";
 
 interface DesktopFiltersProps {
   state: FilterSortState;
   genres: Array<{ id: string; name: string }>;
-  groups: Array<{ id: string; name: string; member_count?: number }>;
   onStateChange: (updates: Partial<FilterSortState>) => void;
-  onClear: () => void;
   editionId: string;
 }
 
@@ -16,7 +13,6 @@ export function DesktopFilters({
   state,
   genres,
   onStateChange,
-  onClear,
   editionId,
 }: DesktopFiltersProps) {
   const { data: stages = [], isLoading: stagesLoading } =
@@ -36,9 +32,6 @@ export function DesktopFilters({
     onStateChange({ genres: newGenres });
   }
 
-  const hasActiveFilters =
-    state.stages.length > 0 || state.genres.length > 0 || state.minRating > 0;
-
   return (
     <div className="space-y-4">
       {/* Stage Filter */}
@@ -114,18 +107,6 @@ export function DesktopFilters({
           ))}
         </div>
       </div>
-
-      {hasActiveFilters && (
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={onClear}
-          className="border-red-400 text-red-400 hover:bg-red-400 hover:text-white"
-        >
-          <X className="h-3 w-3 mr-1" />
-          Clear All Filters
-        </Button>
-      )}
     </div>
   );
 }
diff --git a/src/components/Index/filters/FilterHeader.tsx b/src/components/Index/filters/FilterHeader.tsx
deleted file mode 100644
index 1dc0ae1e..00000000
--- a/src/components/Index/filters/FilterHeader.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { Filter } from "lucide-react";
-import type { FilterSortState } from "@/hooks/useUrlState";
-
-interface FilterHeaderProps {
-  state: FilterSortState;
-  isExpanded: boolean;
-  onToggleExpanded: () => void;
-  isMobile: boolean;
-}
-
-export const FilterHeader = ({
-  state,
-  isExpanded,
-  onToggleExpanded,
-  isMobile,
-}: FilterHeaderProps) => {
-  const hasActiveFilters =
-    state.stages.length > 0 || state.genres.length > 0 || state.minRating > 0;
-
-  return (
-    <div className="flex items-center justify-between">
-      <div className="flex items-center gap-2">
-        <Filter className="h-4 w-4 text-purple-300" />
-        <span className="text-purple-100 font-medium">Filters & Sort</span>
-        {hasActiveFilters && (
-          <Badge
-            variant="secondary"
-            className="bg-purple-600/50 text-purple-100"
-          >
-            {state.stages.length +
-              state.genres.length +
-              (state.minRating > 0 ? 1 : 0)}
-          </Badge>
-        )}
-      </div>
-      {!isMobile && (
-        <Button
-          variant="ghost"
-          size="sm"
-          onClick={onToggleExpanded}
-          className="text-purple-300 hover:text-purple-100"
-        >
-          {isExpanded ? "Hide" : "Show"} Filters
-        </Button>
-      )}
-    </div>
-  );
-};
diff --git a/src/components/Index/filters/FilterSortControls.tsx b/src/components/Index/filters/FilterSortControls.tsx
index 49a356d0..b40ae8b0 100644
--- a/src/components/Index/filters/FilterSortControls.tsx
+++ b/src/components/Index/filters/FilterSortControls.tsx
@@ -1,27 +1,13 @@
 import { useState, useEffect } from "react";
 import type { SortOption, FilterSortState } from "@/hooks/useUrlState";
 import { useGenres } from "@/hooks/queries/genres/useGenres";
-import { useAuth } from "@/contexts/AuthContext";
-import { useUserGroupsQuery } from "@/hooks/queries/groups/useUserGroups";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import {
-  Filter,
-  RefreshCw,
-  Users,
-  Calendar,
-  List,
-  ChevronDown,
-} from "lucide-react";
 import { SortControls } from "./SortControls";
 import { MobileFilters } from "./MobileFilters";
 import { DesktopFilters } from "./DesktopFilters";
+import { GroupFilterDropdown } from "./GroupFilterDropdown";
+import { FilterToggle } from "@/components/common/filters/FilterToggle";
+import { FilterContainer } from "@/components/common/filters/FilterContainer";
+import { RefreshButton } from "./RefreshButton";
 
 interface FilterSortControlsProps {
   state: FilterSortState;
@@ -39,8 +25,6 @@ export function FilterSortControls({
   const [isFiltersExpanded, setIsFiltersExpanded] = useState(false);
   const [isMobile, setIsMobile] = useState(false);
   const { genres } = useGenres();
-  const { user } = useAuth();
-  const { data: groups = [] } = useUserGroupsQuery(user?.id);
 
   useEffect(() => {
     function checkMobile() {
@@ -63,159 +47,45 @@ export function FilterSortControls({
 
   const hasActiveFilters =
     state.stages.length > 0 || state.genres.length > 0 || state.minRating > 0;
-  const hasActiveGroupFilter = state.groupId;
+  const activeFilterCount =
+    state.stages.length + state.genres.length + (state.minRating > 0 ? 1 : 0);
 
-  // Get the current group name for display
-  const currentGroup = groups.find((g) => g.id === state.groupId);
-  const groupDisplayText = currentGroup ? currentGroup.name : "All Votes";
+  const Filters = isMobile ? MobileFilters : DesktopFilters;
 
   return (
     <div className="space-y-4">
-      {/* Primary Controls Row */}
-      <div className="bg-white/10 backdrop-blur-md border border-purple-400/30 rounded-lg p-4">
-        <div className="flex items-center justify-between gap-2">
-          {/* View Toggle - Always prominent */}
-          <div className="flex items-center gap-1 bg-white/10 backdrop-blur-md rounded-lg p-1">
-            <Button
-              variant={state.mainView === "list" ? "default" : "ghost"}
-              size="sm"
-              onClick={() => onStateChange({ mainView: "list" })}
-              className={
-                state.mainView === "list"
-                  ? "bg-purple-600 hover:bg-purple-700 text-white"
-                  : "text-purple-200 hover:text-white hover:bg-white/10"
-              }
-            >
-              <List className="h-4 w-4" />
-              <span className="hidden md:inline ml-2">Artists</span>
-            </Button>
-            <Button
-              variant={state.mainView === "timeline" ? "default" : "ghost"}
-              size="sm"
-              onClick={() => onStateChange({ mainView: "timeline" })}
-              className={
-                state.mainView === "timeline"
-                  ? "bg-purple-600 hover:bg-purple-700 text-white"
-                  : "text-purple-200 hover:text-white hover:bg-white/10"
-              }
-            >
-              <Calendar className="h-4 w-4" />
-              <span className="hidden md:inline ml-2">Timeline</span>
-            </Button>
-          </div>
+      <FilterContainer>
+        <div className="flex items-center gap-2">
+          <SortControls sort={state.sort} onSortChange={handleSortChange} />
 
-          {/* Context-Aware Controls */}
-          <div className="flex items-center gap-2">
-            {/* Sort Controls - Only show in list view */}
-            {state.mainView === "list" && (
-              <SortControls sort={state.sort} onSortChange={handleSortChange} />
-            )}
-
-            {/* Refresh Rankings - Only show when locked */}
-            {state.sortLocked && state.mainView === "list" && (
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={handleRefreshRankings}
-                className="text-orange-300 border-orange-400/50 hover:bg-orange-400/20 hover:text-orange-200 flex items-center gap-2"
-              >
-                <RefreshCw className="h-4 w-4" />
-                <span className="hidden md:inline">Refresh</span>
-              </Button>
-            )}
-
-            {/* Group Filter Dropdown - Always visible */}
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button
-                  variant="outline"
-                  size="sm"
-                  className={`flex items-center gap-2 ${
-                    hasActiveGroupFilter
-                      ? "bg-purple-600/20 border-purple-400 text-purple-200 hover:bg-purple-600/30"
-                      : "border-purple-400/30 text-purple-300 hover:bg-white/10 hover:text-purple-200"
-                  }`}
-                >
-                  <Users className="h-4 w-4" />
-                  <span className="hidden md:inline">{groupDisplayText}</span>
-                  <ChevronDown className="h-3 w-3" />
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent className="bg-gray-800 border-purple-400/30">
-                <DropdownMenuItem
-                  onClick={() => onStateChange({ groupId: undefined })}
-                  className={`text-purple-100 hover:bg-purple-600/30 ${!state.groupId ? "bg-purple-600/20" : ""}`}
-                >
-                  All Votes
-                </DropdownMenuItem>
-                {groups.map((group) => (
-                  <DropdownMenuItem
-                    key={group.id}
-                    onClick={() => onStateChange({ groupId: group.id })}
-                    className={`text-purple-100 hover:bg-purple-600/30 ${state.groupId === group.id ? "bg-purple-600/20" : ""}`}
-                  >
-                    {group.name}
-                    {group.member_count && (
-                      <span className="text-purple-400 ml-2">
-                        ({group.member_count})
-                      </span>
-                    )}
-                  </DropdownMenuItem>
-                ))}
-              </DropdownMenuContent>
-            </DropdownMenu>
+          {state.sortLocked && (
+            <RefreshButton onRefresh={handleRefreshRankings} />
+          )}
 
-            {/* Filters Toggle */}
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={() => setIsFiltersExpanded(!isFiltersExpanded)}
-              className={`flex items-center gap-2 ${
-                isFiltersExpanded
-                  ? "bg-purple-600/50 text-purple-100 hover:bg-purple-600/60"
-                  : "text-purple-300 hover:text-purple-100"
-              }`}
-            >
-              <Filter className="h-4 w-4" />
-              <span className="hidden md:inline">Filters</span>
-              {hasActiveFilters && (
-                <Badge
-                  variant="secondary"
-                  className="bg-purple-800/50 text-purple-100 ml-1"
-                >
-                  {state.stages.length +
-                    state.genres.length +
-                    (state.minRating > 0 ? 1 : 0)}
-                </Badge>
-              )}
-            </Button>
-          </div>
+          <div className="ml-auto" />
+          <GroupFilterDropdown
+            selectedGroupId={state.groupId}
+            onGroupChange={(groupId) => onStateChange({ groupId })}
+          />
+          <FilterToggle
+            isExpanded={isFiltersExpanded}
+            onToggle={() => setIsFiltersExpanded(!isFiltersExpanded)}
+            hasActiveFilters={hasActiveFilters}
+            activeFilterCount={activeFilterCount}
+            onClearFilters={hasActiveFilters ? onClear : undefined}
+          />
         </div>
-      </div>
+      </FilterContainer>
 
-      {/* Other Filters */}
       {isFiltersExpanded && (
-        <div className="bg-white/10 backdrop-blur-md border border-purple-400/30 rounded-lg p-4">
-          {isMobile ? (
-            <MobileFilters
-              state={state}
-              genres={genres}
-              groups={groups}
-              onStateChange={onStateChange}
-              onClear={onClear}
-              editionId={editionId}
-            />
-          ) : (
-            <DesktopFilters
-              state={state}
-              genres={genres}
-              groups={groups}
-              onStateChange={onStateChange}
-              onClear={onClear}
-              editionId={editionId}
-            />
-          )}
-        </div>
+        <FilterContainer>
+          <Filters
+            state={state}
+            genres={genres}
+            onStateChange={onStateChange}
+            editionId={editionId}
+          />
+        </FilterContainer>
       )}
     </div>
   );
diff --git a/src/components/Index/filters/GroupFilterDropdown.tsx b/src/components/Index/filters/GroupFilterDropdown.tsx
new file mode 100644
index 00000000..58e616fb
--- /dev/null
+++ b/src/components/Index/filters/GroupFilterDropdown.tsx
@@ -0,0 +1,73 @@
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Users, ChevronDown } from "lucide-react";
+import { useAuth } from "@/contexts/AuthContext";
+import { useUserGroupsQuery } from "@/hooks/queries/groups/useUserGroups";
+
+interface GroupFilterDropdownProps {
+  selectedGroupId?: string;
+  onGroupChange: (groupId: string | undefined) => void;
+}
+
+export function GroupFilterDropdown({
+  selectedGroupId,
+  onGroupChange,
+}: GroupFilterDropdownProps) {
+  const { user } = useAuth();
+  const { data: groups = [] } = useUserGroupsQuery(user?.id);
+
+  const hasActiveGroupFilter = selectedGroupId;
+  const currentGroup = groups.find((g) => g.id === selectedGroupId);
+  const groupDisplayText = currentGroup ? currentGroup.name : "All Votes";
+
+  if (!user || groups.length === 0) {
+    return null;
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="outline"
+          size="sm"
+          className={`flex items-center gap-2 ${
+            hasActiveGroupFilter
+              ? "bg-purple-600/20 border-purple-400 text-purple-200 hover:bg-purple-600/30"
+              : "border-purple-400/30 text-purple-300 hover:bg-white/10 hover:text-purple-200"
+          }`}
+        >
+          <Users className="h-4 w-4" />
+          <span className="hidden md:inline">{groupDisplayText}</span>
+          <ChevronDown className="h-3 w-3" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="bg-gray-800 border-purple-400/30">
+        <DropdownMenuItem
+          onClick={() => onGroupChange(undefined)}
+          className={`text-purple-100 hover:bg-purple-600/30 ${!selectedGroupId ? "bg-purple-600/20" : ""}`}
+        >
+          All Votes
+        </DropdownMenuItem>
+        {groups.map((group) => (
+          <DropdownMenuItem
+            key={group.id}
+            onClick={() => onGroupChange(group.id)}
+            className={`text-purple-100 hover:bg-purple-600/30 ${selectedGroupId === group.id ? "bg-purple-600/20" : ""}`}
+          >
+            {group.name}
+            {group.member_count && (
+              <span className="text-purple-400 ml-2">
+                ({group.member_count})
+              </span>
+            )}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/src/components/Index/filters/MainViewToggle.tsx b/src/components/Index/filters/MainViewToggle.tsx
deleted file mode 100644
index 037405f0..00000000
--- a/src/components/Index/filters/MainViewToggle.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { Button } from "@/components/ui/button";
-import { List, Calendar } from "lucide-react";
-import type { MainViewOption } from "@/hooks/useUrlState";
-
-interface MainViewToggleProps {
-  mainView: MainViewOption;
-  onMainViewChange: (view: MainViewOption) => void;
-}
-
-export const MainViewToggle = ({
-  mainView,
-  onMainViewChange,
-}: MainViewToggleProps) => {
-  return (
-    <div className="flex items-center gap-1 bg-white/10 backdrop-blur-md rounded-lg p-1">
-      <Button
-        variant={mainView === "list" ? "default" : "ghost"}
-        size="sm"
-        onClick={() => onMainViewChange("list")}
-        className={
-          mainView === "list"
-            ? "bg-purple-600 hover:bg-purple-700 text-white"
-            : "text-purple-200 hover:text-white hover:bg-white/10"
-        }
-      >
-        <List className="h-4 w-4" />
-        <span className="hidden sm:inline ml-2">Artists</span>
-      </Button>
-      <Button
-        variant={mainView === "timeline" ? "default" : "ghost"}
-        size="sm"
-        onClick={() => onMainViewChange("timeline")}
-        className={
-          mainView === "timeline"
-            ? "bg-purple-600 hover:bg-purple-700 text-white"
-            : "text-purple-200 hover:text-white hover:bg-white/10"
-        }
-      >
-        <Calendar className="h-4 w-4" />
-        <span className="hidden sm:inline ml-2">Timeline</span>
-      </Button>
-    </div>
-  );
-};
diff --git a/src/components/Index/filters/MobileFilters.tsx b/src/components/Index/filters/MobileFilters.tsx
index 34724acb..67c50369 100644
--- a/src/components/Index/filters/MobileFilters.tsx
+++ b/src/components/Index/filters/MobileFilters.tsx
@@ -1,4 +1,3 @@
-import { Button } from "@/components/ui/button";
 import {
   Select,
   SelectContent,
@@ -6,16 +5,13 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { X } from "lucide-react";
 import type { FilterSortState } from "@/hooks/useUrlState";
 import { useStagesByEditionQuery } from "@/hooks/queries/stages/useStagesByEdition";
 
 interface MobileFiltersProps {
   state: FilterSortState;
   genres: Array<{ id: string; name: string }>;
-  groups: Array<{ id: string; name: string; member_count?: number }>;
   onStateChange: (updates: Partial<FilterSortState>) => void;
-  onClear: () => void;
   editionId: string;
 }
 
@@ -23,7 +19,6 @@ export function MobileFilters({
   state,
   genres,
   onStateChange,
-  onClear,
   editionId,
 }: MobileFiltersProps) {
   const { data: stages = [], isLoading: stagesLoading } =
@@ -45,9 +40,6 @@ export function MobileFilters({
     }
   }
 
-  const hasActiveFilters =
-    state.stages.length > 0 || state.genres.length > 0 || state.minRating > 0;
-
   return (
     <div className="space-y-4">
       {/* Stage Filter Select */}
@@ -140,18 +132,6 @@ export function MobileFilters({
           </SelectContent>
         </Select>
       </div>
-
-      {hasActiveFilters && (
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={onClear}
-          className="w-full border-red-400 text-red-400 hover:bg-red-400 hover:text-white"
-        >
-          <X className="h-3 w-3 mr-1" />
-          Clear All Filters
-        </Button>
-      )}
     </div>
   );
 }
diff --git a/src/components/Index/filters/RefreshButton.tsx b/src/components/Index/filters/RefreshButton.tsx
new file mode 100644
index 00000000..ab4828eb
--- /dev/null
+++ b/src/components/Index/filters/RefreshButton.tsx
@@ -0,0 +1,20 @@
+import { Button } from "@/components/ui/button";
+import { RefreshCw } from "lucide-react";
+
+interface RefreshButtonProps {
+  onRefresh: () => void;
+}
+
+export function RefreshButton({ onRefresh }: RefreshButtonProps) {
+  return (
+    <Button
+      variant="outline"
+      size="sm"
+      onClick={onRefresh}
+      className="text-orange-300 border-orange-400/50 hover:bg-orange-400/20 hover:text-orange-200 flex items-center gap-2"
+    >
+      <RefreshCw className="h-4 w-4" />
+      <span className="hidden md:inline">Refresh</span>
+    </Button>
+  );
+}
diff --git a/src/components/Index/filters/SortControls.tsx b/src/components/Index/filters/SortControls.tsx
index ba8858b2..8ae24b34 100644
--- a/src/components/Index/filters/SortControls.tsx
+++ b/src/components/Index/filters/SortControls.tsx
@@ -36,14 +36,14 @@ const SORT_ICONS = {
   "date-asc": Calendar,
 } as const;
 
-export const SortControls = ({ sort, onSortChange }: SortControlsProps) => {
+export function SortControls({ sort, onSortChange }: SortControlsProps) {
   const CurrentSortIcon = SORT_ICONS[sort];
 
   return (
     <div className="flex items-center gap-2">
       <SortAsc className="h-4 w-4 text-purple-300 hidden sm:block" />
       <Select value={sort} onValueChange={onSortChange}>
-        <SelectTrigger className="w-10 sm:w-32 bg-white/10 border-purple-400/30 text-purple-100">
+        <SelectTrigger className="w-10 sm:w-44 bg-white/10 border-purple-400/30 text-purple-100">
           <div className="hidden sm:block">
             <SelectValue />
           </div>
@@ -145,4 +145,4 @@ export const SortControls = ({ sort, onSortChange }: SortControlsProps) => {
       </Popover>
     </div>
   );
-};
+}
diff --git a/src/components/Index/shared/SetMetadata.tsx b/src/components/Index/shared/SetMetadata.tsx
index bf8e5922..6e0603ea 100644
--- a/src/components/Index/shared/SetMetadata.tsx
+++ b/src/components/Index/shared/SetMetadata.tsx
@@ -2,9 +2,11 @@ import { MapPin, Clock } from "lucide-react";
 import { formatTimeRange } from "@/lib/timeUtils";
 import { GenreBadge } from "../GenreBadge";
 import { useFestivalSet } from "../FestivalSetContext";
+import { useStageQuery } from "@/hooks/queries/stages/useStageQuery";
 
 export function SetMetadata() {
   const { set, use24Hour } = useFestivalSet();
+  const stageQuery = useStageQuery(set?.stage_id);
   const uniqueGenres = set.artists
     ?.flatMap((a) => a.artist_music_genres || [])
     .filter(
@@ -36,10 +38,10 @@ export function SetMetadata() {
 
       {/* Stage and Time Information */}
       <div className="flex flex-wrap gap-2 items-center">
-        {set.stages?.name && (
+        {stageQuery.data && (
           <div className="flex items-center gap-1 text-purple-200 text-xs">
             <MapPin className="h-3 w-3" />
-            <span>{set.stages.name}</span>
+            <span>{stageQuery.data.name}</span>
           </div>
         )}
         {timeRangeFormatted && (
diff --git a/src/components/Index/shared/StagePin.tsx b/src/components/Index/shared/StagePin.tsx
new file mode 100644
index 00000000..4412d689
--- /dev/null
+++ b/src/components/Index/shared/StagePin.tsx
@@ -0,0 +1,12 @@
+import { useStageQuery } from "@/hooks/queries/stages/useStageQuery";
+import { MapPin } from "lucide-react";
+
+export function StagePin({ stageId }: { stageId: string | null }) {
+  const stageQuery = useStageQuery(stageId);
+  return stageQuery.data ? (
+    <div className="flex items-center gap-2">
+      <MapPin className="h-4 w-4" />
+      <span className="text-sm">{stageQuery.data.name}</span>
+    </div>
+  ) : null;
+}
diff --git a/src/components/Index/useSetFiltering.ts b/src/components/Index/useSetFiltering.ts
index 91c08243..07997b92 100644
--- a/src/components/Index/useSetFiltering.ts
+++ b/src/components/Index/useSetFiltering.ts
@@ -115,9 +115,9 @@ export function useSetFiltering(
         const bFollowers = Math.max(
           ...setB.artists.map((artist) => artist.soundcloud_followers || 0),
         );
-        console.log(
-          `Sorting by followers: ${setA.name} (${aFollowers}) vs ${setB.name} (${bFollowers})`,
-        );
+        // console.log(
+        //   `Sorting by followers: ${setA.name} (${aFollowers}) vs ${setB.name} (${bFollowers})`,
+        // );
         if (aFollowers && bFollowers) {
           return bFollowers - aFollowers;
         } else if (aFollowers) {
diff --git a/src/components/SetDetail/MultiArtistSetInfoCard.tsx b/src/components/SetDetail/MultiArtistSetInfoCard.tsx
index 5eb4ea08..112a9dce 100644
--- a/src/components/SetDetail/MultiArtistSetInfoCard.tsx
+++ b/src/components/SetDetail/MultiArtistSetInfoCard.tsx
@@ -6,12 +6,13 @@ import {
   CardTitle,
 } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
-import { Clock, MapPin, Users } from "lucide-react";
+import { Clock, Users } from "lucide-react";
 import { ArtistVotingButtons } from "./SetVotingButtons";
 import { FestivalSet } from "@/hooks/queries/sets/useSets";
 import { formatTimeRange } from "@/lib/timeUtils";
 import { GenreBadge } from "../Index/GenreBadge";
 import { IndividualArtistCard } from "./IndividualArtistCard";
+import { StagePin } from "@/components/Index/shared/StagePin";
 
 interface MultiArtistSetInfoCardProps {
   set: FestivalSet;
@@ -85,12 +86,7 @@ export function MultiArtistSetInfoCard({
 
               {/* 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>
-                )}
+                <StagePin stageId={set.stage_id} />
                 {formatTimeRange(set.time_start, set.time_end, use24Hour) && (
                   <div className="flex items-center gap-2">
                     <Clock className="h-4 w-4" />
diff --git a/src/components/SetDetail/SetInfoCard.tsx b/src/components/SetDetail/SetInfoCard.tsx
index aaf17094..30522b35 100644
--- a/src/components/SetDetail/SetInfoCard.tsx
+++ b/src/components/SetDetail/SetInfoCard.tsx
@@ -7,11 +7,12 @@ import {
 } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
-import { Clock, MapPin, ExternalLink, Music, Play } from "lucide-react";
+import { Clock, ExternalLink, Music, Play } from "lucide-react";
 import { ArtistVotingButtons } from "./SetVotingButtons";
 import { FestivalSet } from "@/hooks/queries/sets/useSets";
 import { formatTimeRange } from "@/lib/timeUtils";
 import { GenreBadge } from "../Index/GenreBadge";
+import { StagePin } from "@/components/Index/shared/StagePin";
 
 interface SetInfoCardProps {
   set: FestivalSet;
@@ -64,12 +65,7 @@ export function SetInfoCard({
 
               {/* 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>
-                )}
+                <StagePin stageId={set.stage_id} />
                 {formatTimeRange(set.time_start, set.time_end, use24Hour) && (
                   <div className="flex items-center gap-2">
                     <Clock className="h-4 w-4" />
diff --git a/src/components/common/filters/FilterContainer.tsx b/src/components/common/filters/FilterContainer.tsx
new file mode 100644
index 00000000..2f813de0
--- /dev/null
+++ b/src/components/common/filters/FilterContainer.tsx
@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+
+interface FilterContainerProps {
+  children: ReactNode;
+}
+
+export function FilterContainer({ children }: FilterContainerProps) {
+  return (
+    <div className="bg-white/10 backdrop-blur-md border border-purple-400/30 rounded-lg p-4">
+      {children}
+    </div>
+  );
+}
diff --git a/src/components/common/filters/FilterHeader.tsx b/src/components/common/filters/FilterHeader.tsx
new file mode 100644
index 00000000..0e37274e
--- /dev/null
+++ b/src/components/common/filters/FilterHeader.tsx
@@ -0,0 +1,34 @@
+import { Button } from "@/components/ui/button";
+import { Filter, X } from "lucide-react";
+
+interface FilterHeaderProps {
+  hasActiveFilters: boolean;
+  onClearFilters: () => void;
+  title?: string;
+}
+
+export function FilterHeader({
+  hasActiveFilters,
+  onClearFilters,
+  title = "Filters",
+}: FilterHeaderProps) {
+  return (
+    <div className="flex items-center justify-between mb-4">
+      <div className="flex items-center gap-2">
+        <Filter className="h-4 w-4 text-purple-300" />
+        <span className="text-purple-100 font-medium">{title}</span>
+      </div>
+      {hasActiveFilters && (
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={onClearFilters}
+          className="text-red-400 hover:text-red-300 hover:bg-red-400/10"
+        >
+          <X className="h-3 w-3 mr-1" />
+          Clear
+        </Button>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/common/filters/FilterToggle.tsx b/src/components/common/filters/FilterToggle.tsx
new file mode 100644
index 00000000..352c144f
--- /dev/null
+++ b/src/components/common/filters/FilterToggle.tsx
@@ -0,0 +1,64 @@
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Filter, ChevronDown, ChevronUp, X } from "lucide-react";
+
+interface FilterToggleProps {
+  isExpanded: boolean;
+  onToggle: () => void;
+  hasActiveFilters: boolean;
+  activeFilterCount: number;
+  label?: string;
+  onClearFilters?: () => void;
+}
+
+export function FilterToggle({
+  isExpanded,
+  onToggle,
+  hasActiveFilters,
+  activeFilterCount,
+  label = "Filters",
+  onClearFilters,
+}: FilterToggleProps) {
+  return (
+    <div className="flex items-center gap-1">
+      {hasActiveFilters && onClearFilters && (
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={onClearFilters}
+          className="text-red-400 hover:text-red-300 hover:bg-red-400/10"
+        >
+          <X className="h-3 w-3 mr-1" />
+          <span className="hidden sm:inline">Clear</span>
+        </Button>
+      )}
+
+      <Button
+        variant="ghost"
+        size="sm"
+        onClick={onToggle}
+        className={`flex items-center gap-2 ${
+          isExpanded
+            ? "bg-purple-600/50 text-purple-100 hover:bg-purple-600/60"
+            : "text-purple-300 hover:text-purple-100"
+        }`}
+      >
+        {hasActiveFilters && (
+          <Badge
+            variant="secondary"
+            className="bg-purple-800/50 text-purple-100 ml-1"
+          >
+            {activeFilterCount}
+          </Badge>
+        )}
+        <Filter className="h-4 w-4" />
+        <span className="hidden md:inline">{label}</span>
+        {isExpanded ? (
+          <ChevronUp className="h-4 w-4 text-purple-300" />
+        ) : (
+          <ChevronDown className="h-4 w-4 text-purple-300" />
+        )}
+      </Button>
+    </div>
+  );
+}
diff --git a/src/components/legal/CookieConsentBanner.tsx b/src/components/legal/CookieConsentBanner.tsx
index 8205813f..100e917a 100644
--- a/src/components/legal/CookieConsentBanner.tsx
+++ b/src/components/legal/CookieConsentBanner.tsx
@@ -13,7 +13,7 @@ export const CookieConsentBanner = () => {
 
   return (
     <>
-      <div className="fixed bottom-0 left-0 right-0 z-50 p-4">
+      <div className="fixed bottom-0 md:bottom-0 left-0 right-0 z-50 p-4 pb-24 md:pb-4">
         <Card className="mx-auto max-w-4xl p-6 bg-background/95 backdrop-blur border shadow-lg">
           <div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center justify-between">
             <div className="flex-1">
diff --git a/src/components/navigation/MainTabNavigation.tsx b/src/components/navigation/MainTabNavigation.tsx
new file mode 100644
index 00000000..223900a1
--- /dev/null
+++ b/src/components/navigation/MainTabNavigation.tsx
@@ -0,0 +1,119 @@
+import { cn } from "@/lib/utils";
+import { Calendar, List, Map, Info, MessageSquare } from "lucide-react";
+import { NavLink } from "react-router-dom";
+import { useFestivalEdition } from "@/contexts/FestivalEditionContext";
+
+export type MainTab = "sets" | "schedule" | "map" | "info" | "social";
+
+const TAB_CONFIG = {
+  sets: {
+    icon: List,
+    label: "Vote",
+    shortLabel: "Vote",
+    disabled: false,
+  },
+  schedule: {
+    icon: Calendar,
+    label: "Schedule",
+    shortLabel: "Schedule",
+    disabled: false,
+  },
+  map: {
+    icon: Map,
+    label: "Map",
+    shortLabel: "Map",
+    disabled: true,
+  },
+  info: {
+    icon: Info,
+    label: "Info",
+    shortLabel: "Info",
+    disabled: true,
+  },
+  social: {
+    icon: MessageSquare,
+    label: "Social",
+    shortLabel: "Social",
+    disabled: true,
+  },
+} as const;
+
+export function MainTabNavigation() {
+  const { basePath } = useFestivalEdition();
+
+  return (
+    <>
+      {/* Desktop: Horizontal tabs at top */}
+      <div className="hidden md:block mb-6">
+        <div className="bg-white/10 backdrop-blur-md rounded-lg p-2">
+          <div className="flex gap-1 justify-center">
+            {Object.entries(TAB_CONFIG).map(([tabKey, config]) => {
+              const tab = tabKey as MainTab;
+
+              return (
+                <NavLink
+                  key={tab}
+                  to={`${basePath}/${tab}`}
+                  className={({ isActive }) =>
+                    cn(
+                      `
+                    flex items-center justify-center gap-2
+                    px-6 py-3 rounded-lg
+                    transition-all duration-200 active:scale-95`,
+                      isActive
+                        ? "bg-purple-600 text-white shadow-lg"
+                        : "text-purple-200 hover:text-white hover:bg-white/10",
+                      config.disabled ? "cursor-not-allowed opacity-50" : "",
+                    )
+                  }
+                >
+                  <config.icon className="h-5 w-5" />
+                  <span className="font-medium">{config.label}</span>
+                </NavLink>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+
+      {/* Mobile: Fixed bottom navigation */}
+      <div className="md:hidden fixed bottom-0 left-0 right-0 z-50 bg-gray-900/95 backdrop-blur-md border-t border-purple-400/20 safe-area-pb">
+        <div className="flex">
+          {Object.entries(TAB_CONFIG).map(([tabKey, config]) => {
+            const tab = tabKey as MainTab;
+
+            return (
+              <NavLink
+                key={tab}
+                to={`${basePath}/${tab}`}
+                className={({ isActive }) => `
+                  flex-1 flex flex-col items-center justify-center
+                  py-2 px-1 transition-colors duration-200 min-h-16
+                  ${
+                    isActive
+                      ? "text-purple-400"
+                      : "text-gray-400 active:text-purple-300"
+                  }
+                  ${config.disabled ? "cursor-not-allowed opacity-50" : ""}
+                `}
+              >
+                {({ isActive }) => (
+                  <>
+                    <config.icon
+                      className={`h-6 w-6 mb-1 ${isActive ? "text-purple-400" : "text-gray-400"}`}
+                    />
+                    <span
+                      className={`text-xs font-medium text-center leading-tight ${isActive ? "text-purple-400" : "text-gray-400"}`}
+                    >
+                      {config.shortLabel}
+                    </span>
+                  </>
+                )}
+              </NavLink>
+            );
+          })}
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/src/components/router/EditionRoutes.tsx b/src/components/router/EditionRoutes.tsx
new file mode 100644
index 00000000..89e8526b
--- /dev/null
+++ b/src/components/router/EditionRoutes.tsx
@@ -0,0 +1,51 @@
+import { Navigate, Route } from "react-router-dom";
+import EditionView from "@/pages/EditionView";
+import { SetDetails } from "@/pages/SetDetails";
+
+// Tab components
+import { ArtistsTab } from "@/pages/tabs/ArtistsTab";
+import { MapTab } from "@/pages/tabs/MapTab";
+import { InfoTab } from "@/pages/tabs/InfoTab";
+import { SocialTab } from "@/pages/tabs/SocialTab";
+import { ScheduleTabTimeline } from "@/pages/tabs/ScheduleTabTimeline";
+import { ScheduleTabList } from "@/pages/tabs/ScheduleTabList";
+import { ScheduleTab } from "@/pages/tabs/ScheduleTab";
+
+interface EditionRoutesProps {
+  basePath: string;
+  WrapperComponent?: React.ComponentType<any>;
+}
+
+export function createEditionRoutes({
+  basePath,
+  WrapperComponent,
+}: EditionRoutesProps) {
+  const EditionComponent = WrapperComponent
+    ? () => <WrapperComponent component={EditionView} />
+    : EditionView;
+
+  const SetDetailsComponent = WrapperComponent
+    ? () => <WrapperComponent component={SetDetails} />
+    : SetDetails;
+
+  return [
+    <Route key="main" path={basePath} element={<EditionComponent />}>
+      {/* Nested tab routes */}
+      <Route index element={<Navigate to="sets" replace />} />
+      <Route path="sets" element={<ArtistsTab />} />
+      <Route path="map" element={<MapTab />} />
+      <Route path="info" element={<InfoTab />} />
+      <Route path="social" element={<SocialTab />} />
+      <Route path="schedule" element={<ScheduleTab />}>
+        <Route index element={<Navigate to="timeline" replace />} />
+        <Route path="timeline" element={<ScheduleTabTimeline />} />
+        <Route path="list" element={<ScheduleTabList />} />
+      </Route>
+    </Route>,
+    <Route
+      key="sets"
+      path={`${basePath}/sets/:setSlug`}
+      element={<SetDetailsComponent />}
+    />,
+  ];
+}
diff --git a/src/components/router/MainDomainRoutes.tsx b/src/components/router/MainDomainRoutes.tsx
index 3a041a9b..a0e48892 100644
--- a/src/components/router/MainDomainRoutes.tsx
+++ b/src/components/router/MainDomainRoutes.tsx
@@ -3,16 +3,22 @@ import { Routes, Route } from "react-router-dom";
 import { SubdomainRedirect } from "./SubdomainRedirect";
 import FestivalSelection from "@/pages/FestivalSelection";
 import EditionSelection from "@/pages/EditionSelection";
-import { SetDetails } from "@/pages/SetDetails";
-import EditionView from "@/pages/EditionView";
-import Schedule from "@/pages/Schedule";
 import { GlobalRoutes } from "./GlobalRoutes";
+import { createEditionRoutes } from "./EditionRoutes";
+import { useState } from "react";
 
 /**
  * Routes for main domain access (getupline.com)
  * Includes festival selection and full admin interface
  */
 export function MainDomainRoutes() {
+  const [editionRoutes] = useState(
+    createEditionRoutes({
+      basePath: "/festivals/:festivalSlug/editions/:editionSlug",
+      WrapperComponent: SubdomainRedirect,
+    }),
+  );
+
   return (
     <>
       <Routes>
@@ -23,18 +29,8 @@ export function MainDomainRoutes() {
           path="/festivals/:festivalSlug"
           element={<SubdomainRedirect component={EditionSelection} />}
         />
-        <Route
-          path="/festivals/:festivalSlug/editions/:editionSlug"
-          element={<SubdomainRedirect component={EditionView} />}
-        />
-        <Route
-          path="/festivals/:festivalSlug/editions/:editionSlug/sets/:setSlug"
-          element={<SubdomainRedirect component={SetDetails} />}
-        />
-        <Route
-          path="/festivals/:festivalSlug/editions/:editionSlug/schedule"
-          element={<SubdomainRedirect component={Schedule} />}
-        />
+        {/* Edition routes with subdomain redirect wrapper */}
+        {editionRoutes}
 
         <Route path="*" element={<GlobalRoutes />} />
       </Routes>
diff --git a/src/components/router/SubdomainRoutes.tsx b/src/components/router/SubdomainRoutes.tsx
index 6e284144..51b16c19 100644
--- a/src/components/router/SubdomainRoutes.tsx
+++ b/src/components/router/SubdomainRoutes.tsx
@@ -1,27 +1,25 @@
 import { Routes, Route } from "react-router-dom";
-import EditionView from "@/pages/EditionView";
-import Schedule from "@/pages/Schedule";
-import { SetDetails } from "@/pages/SetDetails";
-
-// Legal pages
 import EditionSelection from "@/pages/EditionSelection";
 import { GlobalRoutes } from "./GlobalRoutes";
+import { createEditionRoutes } from "./EditionRoutes";
+import { useState } from "react";
 
 /**
  * Routes for subdomain access (boom-festival.getupline.com)
  * Root path shows edition selection for the festival
  */
 export function SubdomainRoutes() {
+  const [editionRoutes] = useState(() =>
+    createEditionRoutes({
+      basePath: "/editions/:editionSlug",
+    }),
+  );
+
   return (
     <Routes>
       <Route path="/" element={<EditionSelection />} />
       {/* Edition-specific routes */}
-      <Route path="/editions/:editionSlug" element={<EditionView />} />
-      <Route
-        path="/editions/:editionSlug/sets/:setSlug"
-        element={<SetDetails />}
-      />
-      <Route path="/editions/:editionSlug/schedule" element={<Schedule />} />
+      {editionRoutes}
 
       <Route path="*" element={<GlobalRoutes />} />
     </Routes>
diff --git a/src/components/schedule/DateNavigation.tsx b/src/components/schedule/DateNavigation.tsx
deleted file mode 100644
index 492348e8..00000000
--- a/src/components/schedule/DateNavigation.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { Button } from "@/components/ui/button";
-import { Calendar, Clock, ChevronUp } from "lucide-react";
-import { useScheduleData } from "@/hooks/useScheduleData";
-import { useCallback } from "react";
-
-interface DateNavigationProps {
-  onScrollToDate: (dateIndex: number) => void;
-  onScrollToNow: () => void;
-  containerRef: React.RefObject<HTMLDivElement>;
-}
-
-export const DateNavigation = ({
-  onScrollToDate,
-  onScrollToNow,
-  containerRef,
-}: DateNavigationProps) => {
-  const { scheduleDays } = useScheduleData();
-
-  const scrollToTop = useCallback(() => {
-    containerRef.current?.scrollTo({ top: 0, behavior: "smooth" });
-  }, [containerRef]);
-
-  if (scheduleDays.length === 0) return null;
-
-  return (
-    <div className="mb-6 flex flex-wrap items-center justify-between gap-4">
-      {/* Date selection buttons */}
-      <div className="flex flex-wrap gap-2">
-        {scheduleDays.map((day, index) => (
-          <Button
-            key={day.date}
-            onClick={() => onScrollToDate(index)}
-            variant="outline"
-            size="sm"
-            className="border-purple-400/50 text-purple-300 hover:bg-purple-600/50 hover:text-white"
-          >
-            <Calendar className="h-3 w-3 mr-1" />
-            {day.displayDate.split(",")[1]?.trim() || day.displayDate}
-          </Button>
-        ))}
-      </div>
-
-      {/* Control buttons */}
-      <div className="flex gap-2">
-        <Button
-          onClick={onScrollToNow}
-          className="bg-purple-600 hover:bg-purple-700 shadow-lg border border-purple-400/50"
-          aria-label="Scroll to current time"
-        >
-          <Clock className="h-4 w-4 mr-2" />
-          Now
-        </Button>
-
-        <Button
-          onClick={scrollToTop}
-          variant="outline"
-          className="border-purple-400/50 text-purple-300 hover:bg-purple-600/50 hover:text-white"
-          aria-label="Scroll to top"
-        >
-          <ChevronUp className="h-4 w-4 mr-2" />
-          Top
-        </Button>
-      </div>
-    </div>
-  );
-};
diff --git a/src/components/schedule/DayDivider.tsx b/src/components/schedule/DayDivider.tsx
deleted file mode 100644
index c29e9887..00000000
--- a/src/components/schedule/DayDivider.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Separator } from "@/components/ui/separator";
-import { Calendar } from "lucide-react";
-
-interface DayDividerProps {
-  displayDate: string;
-  isFirst?: boolean;
-}
-
-export const DayDivider = ({
-  displayDate,
-  isFirst = false,
-}: DayDividerProps) => {
-  return (
-    <div className={`py-6 ${!isFirst ? "mt-8" : ""}`}>
-      <div className="flex items-center gap-4 mb-6">
-        <Calendar className="h-5 w-5 text-purple-400" />
-        <h2 className="text-2xl font-bold text-white">{displayDate}</h2>
-        <div className="flex-1">
-          <Separator className="bg-purple-400/30" />
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/src/components/schedule/DaySelector.tsx b/src/components/schedule/DaySelector.tsx
deleted file mode 100644
index 8b582f23..00000000
--- a/src/components/schedule/DaySelector.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { Button } from "@/components/ui/button";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import type { ScheduleDay } from "@/hooks/useScheduleData";
-
-interface DaySelectorProps {
-  days: ScheduleDay[];
-  selectedDay: string;
-  onDayChange: (day: string) => void;
-}
-
-export const DaySelector = ({
-  days,
-  selectedDay,
-  onDayChange,
-}: DaySelectorProps) => {
-  if (days.length <= 1) return null;
-
-  return (
-    <div className="mb-6">
-      <ScrollArea className="w-full">
-        <div className="flex gap-2 pb-2">
-          {days.map((day) => (
-            <Button
-              key={day.date}
-              variant={selectedDay === day.date ? "default" : "outline"}
-              onClick={() => onDayChange(day.date)}
-              className={`whitespace-nowrap ${
-                selectedDay === day.date
-                  ? "bg-purple-600 hover:bg-purple-700 text-white"
-                  : "border-purple-400 text-purple-400 hover:bg-purple-400 hover:text-white"
-              }`}
-            >
-              {day.displayDate}
-            </Button>
-          ))}
-        </div>
-      </ScrollArea>
-    </div>
-  );
-};
diff --git a/src/components/schedule/FloatingDateIndicator.tsx b/src/components/schedule/FloatingDateIndicator.tsx
deleted file mode 100644
index bb06ee7d..00000000
--- a/src/components/schedule/FloatingDateIndicator.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { useState, useEffect } from "react";
-import { Badge } from "@/components/ui/badge";
-import { Calendar } from "lucide-react";
-
-interface FloatingDateIndicatorProps {
-  currentDate: string;
-  visible: boolean;
-}
-
-export const FloatingDateIndicator = ({
-  currentDate,
-  visible,
-}: FloatingDateIndicatorProps) => {
-  const [show, setShow] = useState(false);
-
-  useEffect(() => {
-    setShow(visible);
-  }, [visible]);
-
-  if (!show || !currentDate) return null;
-
-  return (
-    <div className="sticky top-0 left-0 right-0 z-50 bg-gradient-to-r from-purple-900/90 to-blue-900/90 backdrop-blur-md border-b border-purple-400/30 py-3">
-      <div className="container mx-auto px-4 flex justify-center">
-        <Badge
-          variant="secondary"
-          className="bg-white/10 text-white border-purple-400/50 px-4 py-2 text-sm font-medium"
-        >
-          <Calendar className="h-4 w-4 mr-2" />
-          {currentDate}
-        </Badge>
-      </div>
-    </div>
-  );
-};
diff --git a/src/components/schedule/ScrollToNow.tsx b/src/components/schedule/ScrollToNow.tsx
deleted file mode 100644
index 928e99d6..00000000
--- a/src/components/schedule/ScrollToNow.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Button } from "@/components/ui/button";
-import { Clock } from "lucide-react";
-
-interface ScrollToNowProps {
-  onClick: () => void;
-  visible?: boolean;
-}
-
-export const ScrollToNow = ({ onClick, visible = true }: ScrollToNowProps) => {
-  if (!visible) return null;
-
-  return (
-    <Button
-      onClick={onClick}
-      className="fixed bottom-20 right-4 z-50 rounded-full h-12 w-12 p-0 bg-purple-600 hover:bg-purple-700 shadow-lg border border-purple-400/50"
-      aria-label="Scroll to current time"
-    >
-      <Clock className="h-5 w-5" />
-    </Button>
-  );
-};
diff --git a/src/components/schedule/TimelineProgress.tsx b/src/components/schedule/TimelineProgress.tsx
deleted file mode 100644
index 60a36694..00000000
--- a/src/components/schedule/TimelineProgress.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { Progress } from "@/components/ui/progress";
-
-interface TimelineProgressProps {
-  currentPosition: number;
-  totalItems: number;
-  visible?: boolean;
-}
-
-export const TimelineProgress = ({
-  currentPosition,
-  totalItems,
-  visible = true,
-}: TimelineProgressProps) => {
-  if (!visible || totalItems === 0) return null;
-
-  const progress = Math.min((currentPosition / totalItems) * 100, 100);
-
-  return (
-    <div className="fixed bottom-4 left-4 right-4 z-40 px-4">
-      <div className="bg-purple-900/90 backdrop-blur-md rounded-lg p-3 shadow-lg border border-purple-400/30">
-        <div className="flex items-center justify-between mb-2">
-          <span className="text-xs text-purple-200">Festival Progress</span>
-          <span className="text-xs text-purple-200">
-            {Math.round(progress)}%
-          </span>
-        </div>
-        <Progress value={progress} className="h-2 bg-purple-800/50" />
-      </div>
-    </div>
-  );
-};
diff --git a/src/components/timeline/DayFilterSelect.tsx b/src/components/timeline/DayFilterSelect.tsx
new file mode 100644
index 00000000..91a72aa9
--- /dev/null
+++ b/src/components/timeline/DayFilterSelect.tsx
@@ -0,0 +1,69 @@
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Calendar } from "lucide-react";
+import { useFestivalEdition } from "@/contexts/FestivalEditionContext";
+import { format, parseISO, isValid } from "date-fns";
+
+interface DayFilterSelectProps {
+  selectedDay: string;
+  onDayChange: (day: string) => void;
+}
+
+export function DayFilterSelect({
+  selectedDay,
+  onDayChange,
+}: DayFilterSelectProps) {
+  const { edition } = useFestivalEdition();
+
+  // Generate day options from edition dates
+  const dayOptions = [];
+  dayOptions.push({ value: "all", label: "All Days" });
+
+  if (edition?.start_date && edition?.end_date) {
+    const startDate = parseISO(edition.start_date);
+    const endDate = parseISO(edition.end_date);
+
+    if (isValid(startDate) && isValid(endDate)) {
+      const currentDate = new Date(startDate);
+      while (currentDate <= endDate) {
+        const dateStr = format(currentDate, "yyyy-MM-dd");
+        const dayLabel = format(currentDate, "EEEE"); // e.g., "Friday"
+        dayOptions.push({
+          value: dateStr,
+          label: dayLabel,
+        });
+        currentDate.setDate(currentDate.getDate() + 1);
+      }
+    }
+  }
+
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center gap-2">
+        <Calendar className="h-3 w-3 text-purple-300" />
+        <label className="text-sm font-medium text-purple-200">Day</label>
+      </div>
+      <Select value={selectedDay} onValueChange={onDayChange}>
+        <SelectTrigger className="bg-white/10 border-purple-400/30 text-purple-100">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent className="bg-gray-800 border-purple-400/30">
+          {dayOptions.map((option) => (
+            <SelectItem
+              key={option.value}
+              value={option.value}
+              className="text-purple-100"
+            >
+              {option.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+}
diff --git a/src/components/timeline/ListFilters.tsx b/src/components/timeline/ListFilters.tsx
new file mode 100644
index 00000000..b3c27962
--- /dev/null
+++ b/src/components/timeline/ListFilters.tsx
@@ -0,0 +1,64 @@
+import { useState } from "react";
+import { DayFilterSelect } from "./DayFilterSelect";
+import { TimeFilterSelect } from "./TimeFilterSelect";
+import { StageFilterButtons } from "./StageFilterButtons";
+import { useTimelineUrlState } from "@/hooks/useTimelineUrlState";
+import { FilterToggle } from "@/components/common/filters/FilterToggle";
+import { FilterContainer } from "@/components/common/filters/FilterContainer";
+
+export function ListFilters() {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const { state, updateState, clearFilters } = useTimelineUrlState();
+  const { selectedDay, selectedTime, selectedStages } = state;
+
+  function handleStageToggle(stageId: string) {
+    const newStages = selectedStages.includes(stageId)
+      ? selectedStages.filter((id) => id !== stageId)
+      : [...selectedStages, stageId];
+    updateState({ selectedStages: newStages });
+  }
+
+  const activeFilterCount =
+    (selectedDay !== "all" ? 1 : 0) +
+    (selectedTime !== "all" ? 1 : 0) +
+    selectedStages.length;
+  const hasActiveFilters = activeFilterCount > 0;
+  const shouldShowFilters = isExpanded;
+
+  return (
+    <FilterContainer>
+      <div className="flex items-center gap-2 flex-wrap">
+        <h3 className="text-purple-100 font-medium">Filters</h3>
+        <div className="ml-auto" />
+
+        <FilterToggle
+          isExpanded={isExpanded}
+          onToggle={() => setIsExpanded(!isExpanded)}
+          hasActiveFilters={hasActiveFilters}
+          activeFilterCount={activeFilterCount}
+          label="Filters"
+          onClearFilters={hasActiveFilters ? clearFilters : undefined}
+        />
+      </div>
+
+      {shouldShowFilters && (
+        <div className="mt-4">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-3 md:gap-4">
+            <DayFilterSelect
+              selectedDay={selectedDay}
+              onDayChange={(day) => updateState({ selectedDay: day })}
+            />
+            <TimeFilterSelect
+              selectedTime={selectedTime}
+              onTimeChange={(time) => updateState({ selectedTime: time })}
+            />
+            <StageFilterButtons
+              selectedStages={selectedStages}
+              onStageToggle={handleStageToggle}
+            />
+          </div>
+        </div>
+      )}
+    </FilterContainer>
+  );
+}
diff --git a/src/components/timeline/ScheduleNavigation.tsx b/src/components/timeline/ScheduleNavigation.tsx
new file mode 100644
index 00000000..48ce88c3
--- /dev/null
+++ b/src/components/timeline/ScheduleNavigation.tsx
@@ -0,0 +1,17 @@
+import { Calendar, List } from "lucide-react";
+import { ScheduleNavigationItem } from "./ScheduleNavigationItem";
+
+export function ScheduleNavigation() {
+  return (
+    <div className="bg-white/10 backdrop-blur-md rounded-lg p-1">
+      <div className="flex items-center justify-center gap-1">
+        <ScheduleNavigationItem
+          view="timeline"
+          label="Timeline View"
+          icon={Calendar}
+        />
+        <ScheduleNavigationItem view="list" label="List View" icon={List} />
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/timeline/ScheduleNavigationItem.tsx b/src/components/timeline/ScheduleNavigationItem.tsx
new file mode 100644
index 00000000..e498bf3e
--- /dev/null
+++ b/src/components/timeline/ScheduleNavigationItem.tsx
@@ -0,0 +1,36 @@
+import { NavLink } from "react-router-dom";
+import { LucideIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { useFestivalEdition } from "@/contexts/FestivalEditionContext";
+
+interface ScheduleNavigationItemProps {
+  view: "timeline" | "list";
+  label: string;
+  icon: LucideIcon;
+}
+
+export function ScheduleNavigationItem({
+  view,
+  label,
+  icon: Icon,
+}: ScheduleNavigationItemProps) {
+  const { basePath } = useFestivalEdition();
+
+  return (
+    <NavLink
+      to={`${basePath}/schedule/${view}`}
+      className={({ isActive }) =>
+        cn(
+          `flex gap-2 items-center justify-center  py-2 md:py-3 rounded-lg
+           w-1/2 md:min-w-[100px] transition-all duration-200 active:scale-95`,
+          isActive
+            ? "bg-purple-600 text-white shadow-lg"
+            : "text-purple-200 hover:text-white hover:bg-white/10",
+        )
+      }
+    >
+      <Icon className="h-4 w-4" />
+      <span className="font-medium">{label}</span>
+    </NavLink>
+  );
+}
diff --git a/src/components/timeline/StageFilterButtons.tsx b/src/components/timeline/StageFilterButtons.tsx
new file mode 100644
index 00000000..33af7eb3
--- /dev/null
+++ b/src/components/timeline/StageFilterButtons.tsx
@@ -0,0 +1,43 @@
+import { Button } from "@/components/ui/button";
+import { MapPin } from "lucide-react";
+import { useStagesByEditionQuery } from "@/hooks/queries/stages/useStagesByEdition";
+import { useFestivalEdition } from "@/contexts/FestivalEditionContext";
+
+interface StageFilterButtonsProps {
+  selectedStages: string[];
+  onStageToggle: (stageId: string) => void;
+}
+
+export function StageFilterButtons({
+  selectedStages,
+  onStageToggle,
+}: StageFilterButtonsProps) {
+  const { edition } = useFestivalEdition();
+  const { data: stages = [] } = useStagesByEditionQuery(edition?.id);
+
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center gap-2">
+        <MapPin className="h-3 w-3 text-purple-300" />
+        <label className="text-sm font-medium text-purple-200">Stages</label>
+      </div>
+      <div className="flex flex-wrap gap-2 max-h-20 overflow-y-auto">
+        {stages.map((stage) => (
+          <Button
+            key={stage.id}
+            variant={selectedStages.includes(stage.id) ? "default" : "outline"}
+            size="sm"
+            onClick={() => onStageToggle(stage.id)}
+            className={
+              selectedStages.includes(stage.id)
+                ? "bg-purple-600 hover:bg-purple-700 text-xs"
+                : "border-purple-400 text-purple-400 hover:bg-purple-400 hover:text-white text-xs"
+            }
+          >
+            {stage.name}
+          </Button>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/timeline/TimeFilterSelect.tsx b/src/components/timeline/TimeFilterSelect.tsx
new file mode 100644
index 00000000..ffd5a766
--- /dev/null
+++ b/src/components/timeline/TimeFilterSelect.tsx
@@ -0,0 +1,47 @@
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Clock } from "lucide-react";
+import type { TimeFilter } from "@/hooks/useTimelineUrlState";
+
+interface TimeFilterSelectProps {
+  selectedTime: TimeFilter;
+  onTimeChange: (time: TimeFilter) => void;
+}
+
+export function TimeFilterSelect({
+  selectedTime,
+  onTimeChange,
+}: TimeFilterSelectProps) {
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center gap-2">
+        <Clock className="h-3 w-3 text-purple-300" />
+        <label className="text-sm font-medium text-purple-200">Time</label>
+      </div>
+      <Select value={selectedTime} onValueChange={onTimeChange}>
+        <SelectTrigger className="bg-white/10 border-purple-400/30 text-purple-100">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent className="bg-gray-800 border-purple-400/30">
+          <SelectItem value="all" className="text-purple-100">
+            All Day
+          </SelectItem>
+          <SelectItem value="morning" className="text-purple-100">
+            Morning (6-12)
+          </SelectItem>
+          <SelectItem value="afternoon" className="text-purple-100">
+            Afternoon (12-18)
+          </SelectItem>
+          <SelectItem value="evening" className="text-purple-100">
+            Evening (18-24)
+          </SelectItem>
+        </SelectContent>
+      </Select>
+    </div>
+  );
+}
diff --git a/src/components/timeline/TimelineControls.tsx b/src/components/timeline/TimelineControls.tsx
new file mode 100644
index 00000000..e2654de2
--- /dev/null
+++ b/src/components/timeline/TimelineControls.tsx
@@ -0,0 +1,55 @@
+import { useState } from "react";
+import { TimelineNavigation } from "./TimelineNavigation";
+import { useTimelineUrlState } from "@/hooks/useTimelineUrlState";
+import { FilterToggle } from "@/components/common/filters/FilterToggle";
+import { FilterContainer } from "@/components/common/filters/FilterContainer";
+
+export function TimelineControls() {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const { state, updateState, clearFilters } = useTimelineUrlState();
+  const { selectedStages } = state;
+
+  function handleStageToggle(stageId: string) {
+    const newStages = selectedStages.includes(stageId)
+      ? selectedStages.filter((id) => id !== stageId)
+      : [...selectedStages, stageId];
+    updateState({ selectedStages: newStages });
+  }
+
+  const activeFilterCount = selectedStages.length;
+  const hasActiveFilters = activeFilterCount > 0;
+
+  return (
+    <FilterContainer>
+      <div className="flex items-center gap-2 flex-wrap">
+        <div className="ml-auto" />
+
+        <FilterToggle
+          isExpanded={isExpanded}
+          onToggle={() => setIsExpanded(!isExpanded)}
+          hasActiveFilters={hasActiveFilters}
+          activeFilterCount={activeFilterCount}
+          label="Navigation"
+          onClearFilters={hasActiveFilters ? clearFilters : undefined}
+        />
+      </div>
+
+      {isExpanded && (
+        <div className="mt-4">
+          <TimelineNavigation
+            selectedStages={selectedStages}
+            onStageToggle={handleStageToggle}
+            onJumpToToday={() => {
+              // TODO: Implement jump to today functionality
+              console.log("Jump to today");
+            }}
+            onJumpToTime={(timeOfDay) => {
+              // TODO: Implement jump to time functionality
+              console.log("Jump to", timeOfDay);
+            }}
+          />
+        </div>
+      )}
+    </FilterContainer>
+  );
+}
diff --git a/src/components/timeline/TimelineNavigation.tsx b/src/components/timeline/TimelineNavigation.tsx
new file mode 100644
index 00000000..6d5fbe3c
--- /dev/null
+++ b/src/components/timeline/TimelineNavigation.tsx
@@ -0,0 +1,82 @@
+import { Button } from "@/components/ui/button";
+import { Clock, Sun, Sunset, Calendar } from "lucide-react";
+import { StageFilterButtons } from "./StageFilterButtons";
+
+interface TimelineNavigationProps {
+  selectedStages: string[];
+  onStageToggle: (stageId: string) => void;
+  onJumpToToday?: () => void;
+  onJumpToTime?: (timeOfDay: "morning" | "afternoon" | "evening") => void;
+}
+
+export function TimelineNavigation({
+  selectedStages,
+  onStageToggle,
+  onJumpToToday,
+  onJumpToTime,
+}: TimelineNavigationProps) {
+  function handleJumpToToday() {
+    onJumpToToday?.();
+  }
+
+  function handleJumpToTime(timeOfDay: "morning" | "afternoon" | "evening") {
+    onJumpToTime?.(timeOfDay);
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* Quick Navigation */}
+      <div>
+        <h4 className="text-sm font-medium text-purple-200 mb-3">
+          Quick Navigation
+        </h4>
+        <div className="flex flex-wrap gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleJumpToToday}
+            className="border-purple-400 text-purple-400 hover:bg-purple-400 hover:text-white"
+          >
+            <Calendar className="h-3 w-3 mr-2" />
+            Jump to Today
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => handleJumpToTime("morning")}
+            className="border-purple-400 text-purple-400 hover:bg-purple-400 hover:text-white"
+          >
+            <Sun className="h-3 w-3 mr-2" />
+            Morning
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => handleJumpToTime("afternoon")}
+            className="border-purple-400 text-purple-400 hover:bg-purple-400 hover:text-white"
+          >
+            <Clock className="h-3 w-3 mr-2" />
+            Afternoon
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => handleJumpToTime("evening")}
+            className="border-purple-400 text-purple-400 hover:bg-purple-400 hover:text-white"
+          >
+            <Sunset className="h-3 w-3 mr-2" />
+            Evening
+          </Button>
+        </div>
+      </div>
+
+      <div>
+        <h4 className="text-sm font-medium text-purple-200 mb-3">Filters</h4>
+        <StageFilterButtons
+          selectedStages={selectedStages}
+          onStageToggle={onStageToggle}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/schedule/VoteButtons.tsx b/src/components/timeline/VoteButtons.tsx
similarity index 100%
rename from src/components/schedule/VoteButtons.tsx
rename to src/components/timeline/VoteButtons.tsx
diff --git a/src/components/schedule/ArtistScheduleBlock.tsx b/src/components/timeline/horizontal/SetBlock.tsx
similarity index 82%
rename from src/components/schedule/ArtistScheduleBlock.tsx
rename to src/components/timeline/horizontal/SetBlock.tsx
index 46119d84..3f52399f 100644
--- a/src/components/schedule/ArtistScheduleBlock.tsx
+++ b/src/components/timeline/horizontal/SetBlock.tsx
@@ -2,19 +2,15 @@ import { Card, CardContent } from "@/components/ui/card";
 import type { ScheduleSet } from "@/hooks/useScheduleData";
 import { SetHeader } from "./SetHeader";
 import { TimeDisplay } from "./TimeDisplay";
-import { VoteButtons } from "./VoteButtons";
+import { VoteButtons } from "../VoteButtons";
 
-interface ArtistScheduleBlockProps {
+interface SetBlockProps {
   set: ScheduleSet;
   userVote?: number;
   onVote?: (setId: string, voteType: number) => void;
 }
 
-export function ArtistScheduleBlock({
-  set,
-  userVote,
-  onVote,
-}: ArtistScheduleBlockProps) {
+export function SetBlock({ set, userVote, onVote }: SetBlockProps) {
   return (
     <Card className="bg-white/10 backdrop-blur-md border-purple-400/30 hover:border-purple-400/50 transition-colors">
       <CardContent className="p-3">
diff --git a/src/components/schedule/SetHeader.tsx b/src/components/timeline/horizontal/SetHeader.tsx
similarity index 100%
rename from src/components/schedule/SetHeader.tsx
rename to src/components/timeline/horizontal/SetHeader.tsx
diff --git a/src/components/schedule/StageLabels.tsx b/src/components/timeline/horizontal/StageLabels.tsx
similarity index 100%
rename from src/components/schedule/StageLabels.tsx
rename to src/components/timeline/horizontal/StageLabels.tsx
diff --git a/src/components/schedule/StageRow.tsx b/src/components/timeline/horizontal/StageRow.tsx
similarity index 92%
rename from src/components/schedule/StageRow.tsx
rename to src/components/timeline/horizontal/StageRow.tsx
index b677f96f..c1ed9ea0 100644
--- a/src/components/schedule/StageRow.tsx
+++ b/src/components/timeline/horizontal/StageRow.tsx
@@ -1,4 +1,4 @@
-import { ArtistScheduleBlock } from "./ArtistScheduleBlock";
+import { SetBlock } from "./SetBlock";
 import type { HorizontalTimelineSet } from "@/lib/timelineCalculator";
 
 interface StageRowProps {
@@ -37,7 +37,7 @@ export function StageRow({
               }}
             >
               <div className="h-full pr-1">
-                <ArtistScheduleBlock
+                <SetBlock
                   set={set}
                   userVote={userVotes[set.id]}
                   onVote={onVote}
diff --git a/src/components/schedule/TimeDisplay.tsx b/src/components/timeline/horizontal/TimeDisplay.tsx
similarity index 100%
rename from src/components/schedule/TimeDisplay.tsx
rename to src/components/timeline/horizontal/TimeDisplay.tsx
diff --git a/src/components/schedule/TimeScale.tsx b/src/components/timeline/horizontal/TimeScale.tsx
similarity index 100%
rename from src/components/schedule/TimeScale.tsx
rename to src/components/timeline/horizontal/TimeScale.tsx
diff --git a/src/components/schedule/ScheduleHorizontalTimelineView.tsx b/src/components/timeline/horizontal/Timeline.tsx
similarity index 50%
rename from src/components/schedule/ScheduleHorizontalTimelineView.tsx
rename to src/components/timeline/horizontal/Timeline.tsx
index dd05651d..40621fd6 100644
--- a/src/components/schedule/ScheduleHorizontalTimelineView.tsx
+++ b/src/components/timeline/horizontal/Timeline.tsx
@@ -5,31 +5,82 @@ import { StageLabels } from "./StageLabels";
 import { TimelineContainer } from "./TimelineContainer";
 import { useFestivalEdition } from "@/contexts/FestivalEditionContext";
 import { useSetsByEditionQuery as useEditionSetsQuery } from "@/hooks/queries/sets/useSetsByEdition";
+import { useTimelineUrlState } from "@/hooks/useTimelineUrlState";
+import { format } from "date-fns";
+import { useStagesByEditionQuery } from "@/hooks/queries/stages/useStagesByEdition";
 
-interface ScheduleHorizontalTimelineViewProps {
+interface TimelineProps {
   userVotes: Record<string, number>;
   onVote: (artistId: string, voteType: number) => void;
 }
 
-export function ScheduleHorizontalTimelineView({
-  userVotes,
-  onVote,
-}: ScheduleHorizontalTimelineViewProps) {
+export function Timeline({ userVotes, onVote }: TimelineProps) {
   const { edition } = useFestivalEdition();
   const { data: editionSets = [], isLoading: setsLoading } =
     useEditionSetsQuery(edition?.id);
-  const { scheduleDays, loading, error } = useScheduleData(editionSets);
+  const stagesQuery = useStagesByEditionQuery(edition?.id);
+
+  const { scheduleDays, loading, error } = useScheduleData(
+    editionSets,
+    stagesQuery.data,
+  );
+  const { state: filters } = useTimelineUrlState();
+  const { selectedDay, selectedTime, selectedStages } = filters;
 
   const timelineData = useMemo(() => {
     if (!edition || !edition.start_date || !edition.end_date) {
       return null;
     }
+
+    // Apply filters to scheduleDays
+    const filteredScheduleDays = scheduleDays.map((day) => {
+      // Filter by day
+      if (selectedDay !== "all") {
+        const dayDate = format(day.date, "yyyy-MM-dd");
+        if (dayDate !== selectedDay) {
+          return { ...day, stages: [] }; // Empty day if not selected
+        }
+      }
+
+      // Filter stages and sets
+      const filteredStages = day.stages
+        .filter((stage) => {
+          // Filter by stage
+          if (selectedStages.length > 0 && !selectedStages.includes(stage.id)) {
+            return false;
+          }
+          return true;
+        })
+        .map((stage) => ({
+          ...stage,
+          sets: stage.sets.filter((set) => {
+            // Filter by time
+            if (selectedTime !== "all" && set.startTime) {
+              const hour = set.startTime.getHours();
+              switch (selectedTime) {
+                case "morning":
+                  return hour >= 6 && hour < 12;
+                case "afternoon":
+                  return hour >= 12 && hour < 18;
+                case "evening":
+                  return hour >= 18 && hour < 24;
+                default:
+                  return true;
+              }
+            }
+            return true;
+          }),
+        }));
+
+      return { ...day, stages: filteredStages };
+    });
+
     return calculateTimelineData(
       new Date(edition.start_date),
       new Date(edition.end_date),
-      scheduleDays,
+      filteredScheduleDays,
     );
-  }, [edition, scheduleDays]);
+  }, [edition, scheduleDays, selectedDay, selectedTime, selectedStages]);
 
   if (loading || setsLoading) {
     return (
diff --git a/src/components/schedule/TimelineContainer.tsx b/src/components/timeline/horizontal/TimelineContainer.tsx
similarity index 100%
rename from src/components/schedule/TimelineContainer.tsx
rename to src/components/timeline/horizontal/TimelineContainer.tsx
diff --git a/src/components/timeline/list/ListSchedule.tsx b/src/components/timeline/list/ListSchedule.tsx
new file mode 100644
index 00000000..23090644
--- /dev/null
+++ b/src/components/timeline/list/ListSchedule.tsx
@@ -0,0 +1,168 @@
+import { useMemo } from "react";
+import { useScheduleData } from "@/hooks/useScheduleData";
+import { useFestivalEdition } from "@/contexts/FestivalEditionContext";
+import { useSetsByEditionQuery as useEditionSetsQuery } from "@/hooks/queries/sets/useSetsByEdition";
+import { isSameDay, format } from "date-fns";
+import { TimeSlotGroup } from "./TimeSlotGroup";
+import type { ScheduleSet } from "@/hooks/useScheduleData";
+import { useTimelineUrlState } from "@/hooks/useTimelineUrlState";
+import { useStagesByEditionQuery } from "@/hooks/queries/stages/useStagesByEdition";
+
+interface ListScheduleProps {
+  userVotes: Record<string, number>;
+  onVote: (artistId: string, voteType: number) => void;
+}
+
+interface TimeSlot {
+  time: Date;
+  sets: (ScheduleSet & { stageName: string })[];
+}
+
+export function ListSchedule({ userVotes, onVote }: ListScheduleProps) {
+  const { edition } = useFestivalEdition();
+  const { data: editionSets = [], isLoading: setsLoading } =
+    useEditionSetsQuery(edition?.id);
+  const stagesQuery = useStagesByEditionQuery(edition?.id);
+  const { scheduleDays, loading, error } = useScheduleData(
+    editionSets,
+    stagesQuery.data,
+  );
+  const { state: filters } = useTimelineUrlState();
+  const { selectedDay, selectedTime, selectedStages } = filters;
+
+  const timeSlots = useMemo(() => {
+    if (!scheduleDays.length) return [];
+
+    // Helper function to check if a set matches the day filter
+    function matchesDay(set: ScheduleSet) {
+      if (selectedDay === "all") return true;
+      if (!set.startTime) return false;
+
+      const setDate = format(set.startTime, "yyyy-MM-dd");
+      return setDate === selectedDay;
+    }
+
+    // Helper function to check if a set matches the time filter
+    function matchesTime(set: ScheduleSet) {
+      if (selectedTime === "all") return true;
+      if (!set.startTime) return false;
+
+      const hour = set.startTime.getHours();
+      switch (selectedTime) {
+        case "morning":
+          return hour >= 6 && hour < 12;
+        case "afternoon":
+          return hour >= 12 && hour < 18;
+        case "evening":
+          return hour >= 18 && hour < 24;
+        default:
+          return true;
+      }
+    }
+
+    // Helper function to check if a set matches the stage filter
+    function matchesStage(stageName: string) {
+      if (selectedStages.length === 0) return true;
+      return selectedStages.includes(stageName);
+    }
+
+    // Collect all unique start times with filtering
+    const allSets: (ScheduleSet & { stageName: string })[] = [];
+
+    scheduleDays.forEach((day) => {
+      day.stages.forEach((stage) => {
+        if (!matchesStage(stage.id)) {
+          console.log("Skipping stage:", stage.name, selectedStages);
+          return;
+        }
+
+        stage.sets.forEach((set) => {
+          if (set.startTime && matchesDay(set) && matchesTime(set)) {
+            allSets.push({
+              ...set,
+              stageName: stage.name,
+            });
+          }
+        });
+      });
+    });
+
+    // Group sets by start time
+    const timeGroups = new Map<
+      string,
+      (ScheduleSet & { stageName: string })[]
+    >();
+
+    allSets.forEach((set) => {
+      if (!set.startTime) return;
+
+      const timeKey = set.startTime.toISOString();
+      if (!timeGroups.has(timeKey)) {
+        timeGroups.set(timeKey, []);
+      }
+      timeGroups.get(timeKey)!.push(set);
+    });
+
+    // Convert to sorted array
+    const slots: TimeSlot[] = Array.from(timeGroups.entries())
+      .map(([timeKey, sets]) => ({
+        time: new Date(timeKey),
+        sets: sets,
+      }))
+      .sort((a, b) => a.time.getTime() - b.time.getTime());
+
+    return slots;
+  }, [scheduleDays, selectedDay, selectedTime, selectedStages]);
+
+  if (loading || setsLoading) {
+    return (
+      <div className="text-center text-purple-300 py-12">
+        <p>Loading schedule...</p>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="text-center text-purple-300 py-12">
+        <p>Error loading schedule.</p>
+      </div>
+    );
+  }
+
+  if (!edition?.published) {
+    return (
+      <div className="text-center text-purple-300 py-12">
+        <p>Schedule not yet published.</p>
+      </div>
+    );
+  }
+
+  if (!timeSlots.length) {
+    return (
+      <div className="text-center text-purple-300 py-12">
+        <p>No scheduled sets found.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {timeSlots.map((slot, index) => {
+        const prevSlot = index > 0 ? timeSlots[index - 1] : null;
+        const showDateHeader =
+          !prevSlot || !isSameDay(slot.time, prevSlot.time);
+
+        return (
+          <TimeSlotGroup
+            key={slot.time.toISOString()}
+            timeSlot={slot}
+            showDateHeader={showDateHeader}
+            userVotes={userVotes}
+            onVote={onVote}
+          />
+        );
+      })}
+    </div>
+  );
+}
diff --git a/src/components/timeline/list/MobileSetCard.tsx b/src/components/timeline/list/MobileSetCard.tsx
new file mode 100644
index 00000000..e43692a7
--- /dev/null
+++ b/src/components/timeline/list/MobileSetCard.tsx
@@ -0,0 +1,62 @@
+import { Card, CardContent } from "@/components/ui/card";
+import { Link } from "react-router-dom";
+import { Clock, MapPin } from "lucide-react";
+import { format, differenceInMinutes } from "date-fns";
+import { VoteButtons } from "../VoteButtons";
+import type { ScheduleSet } from "@/hooks/useScheduleData";
+
+interface MobileSetCardProps {
+  set: ScheduleSet & { stageName: string };
+  userVote?: number;
+  onVote?: (setId: string, voteType: number) => void;
+}
+
+export function MobileSetCard({ set, userVote, onVote }: MobileSetCardProps) {
+  const duration =
+    set.startTime && set.endTime
+      ? differenceInMinutes(set.endTime, set.startTime)
+      : null;
+
+  return (
+    <Card className="bg-white/10 backdrop-blur-md border-purple-400/30 hover:border-purple-400/50 transition-colors">
+      <CardContent className="p-4">
+        {/* Artist name */}
+        <div className="mb-3">
+          <Link
+            to={`./sets/${set.slug}`}
+            className="text-white font-semibold hover:text-purple-300 transition-colors block text-lg"
+          >
+            {set.name}
+          </Link>
+        </div>
+
+        {/* Stage and duration info */}
+        <div className="flex items-center gap-4 mb-3 text-sm text-purple-200">
+          <div className="flex items-center gap-1">
+            <MapPin className="h-3 w-3" />
+            <span>{set.stageName}</span>
+          </div>
+
+          {duration && (
+            <div className="flex items-center gap-1">
+              <Clock className="h-3 w-3" />
+              <span>{duration}min</span>
+            </div>
+          )}
+
+          {set.startTime && set.endTime && (
+            <div className="flex items-center gap-1">
+              <span>
+                {format(set.startTime, "HH:mm")} -{" "}
+                {format(set.endTime, "HH:mm")}
+              </span>
+            </div>
+          )}
+        </div>
+
+        {/* Vote buttons */}
+        <VoteButtons set={set} userVote={userVote} onVote={onVote} />
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/src/components/timeline/list/TimeSlotGroup.tsx b/src/components/timeline/list/TimeSlotGroup.tsx
new file mode 100644
index 00000000..170c779f
--- /dev/null
+++ b/src/components/timeline/list/TimeSlotGroup.tsx
@@ -0,0 +1,89 @@
+import { format } from "date-fns";
+import { Clock, Calendar } from "lucide-react";
+import { MobileSetCard } from "./MobileSetCard";
+import type { ScheduleSet } from "@/hooks/useScheduleData";
+
+interface TimeSlot {
+  time: Date;
+  sets: (ScheduleSet & { stageName: string })[];
+}
+
+interface TimeSlotGroupProps {
+  timeSlot: TimeSlot;
+  showDateHeader: boolean;
+  userVotes: Record<string, number>;
+  onVote: (artistId: string, voteType: number) => void;
+}
+
+export function TimeSlotGroup({
+  timeSlot,
+  showDateHeader,
+  userVotes,
+  onVote,
+}: TimeSlotGroupProps) {
+  return (
+    <div>
+      {showDateHeader && (
+        <div className="flex items-center gap-2 mb-4 px-4 py-2 bg-purple-900/40 rounded-lg backdrop-blur-sm sticky top-0 z-10">
+          <Calendar className="h-4 w-4 text-purple-300" />
+          <h2 className="text-lg font-semibold text-purple-100">
+            {format(timeSlot.time, "EEEE, MMMM d")}
+          </h2>
+        </div>
+      )}
+
+      <div className="relative">
+        {/* Time indicator */}
+        <div className="flex items-center gap-3 mb-3 px-1">
+          <div className="flex items-center gap-2 bg-purple-800/50 px-3 py-1.5 rounded-full">
+            <Clock className="h-3 w-3 text-purple-300" />
+            <span className="text-sm font-medium text-purple-200">
+              {format(timeSlot.time, "HH:mm")}
+            </span>
+          </div>
+          <div className="flex-1 h-px bg-purple-400/20"></div>
+        </div>
+
+        {/* Sets for this time slot */}
+        <div className="space-y-3">
+          {/* Mobile: Stack all sets vertically */}
+          <div className="block md:hidden space-y-3">
+            {timeSlot.sets.map((set) => (
+              <MobileSetCard
+                key={set.id}
+                set={set}
+                userVote={userVotes[set.id]}
+                onVote={onVote}
+              />
+            ))}
+          </div>
+
+          {/* Desktop: Show sets side by side when space allows */}
+          <div className="hidden md:block">
+            {timeSlot.sets.length === 1 ? (
+              // Single set - take full width
+              <MobileSetCard
+                key={timeSlot.sets[0].id}
+                set={timeSlot.sets[0]}
+                userVote={userVotes[timeSlot.sets[0].id]}
+                onVote={onVote}
+              />
+            ) : (
+              // Multiple sets - grid layout
+              <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-3">
+                {timeSlot.sets.map((set) => (
+                  <MobileSetCard
+                    key={set.id}
+                    set={set}
+                    userVote={userVotes[set.id]}
+                    onVote={onVote}
+                  />
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/timeline/list/VerticalArtistScheduleBlock.tsx b/src/components/timeline/list/VerticalArtistScheduleBlock.tsx
new file mode 100644
index 00000000..f2134d5a
--- /dev/null
+++ b/src/components/timeline/list/VerticalArtistScheduleBlock.tsx
@@ -0,0 +1,73 @@
+import { Card, CardContent } from "@/components/ui/card";
+import { Link } from "react-router-dom";
+import { Clock } from "lucide-react";
+import { format } from "date-fns";
+import { VoteButtons } from "../VoteButtons";
+import { useMemo } from "react";
+import { VerticalTimelineSet } from "@/lib/timelineCalculator";
+
+interface VerticalArtistScheduleBlockProps {
+  set: VerticalTimelineSet;
+  userVote?: number;
+  onVote?: (setId: string, voteType: number) => void;
+}
+
+export function VerticalArtistScheduleBlock({
+  set,
+  userVote,
+  onVote,
+}: VerticalArtistScheduleBlockProps) {
+  const height = set.verticalPosition?.height || 60;
+  const isCompact = height < 80;
+  const isVeryCompact = height < 60;
+
+  const timeString = useMemo(() => {
+    if (!set.startTime || !set.endTime) return "";
+
+    if (isVeryCompact) {
+      return format(set.startTime, "H:mm");
+    }
+
+    const start = format(set.startTime, "H");
+    const end = format(set.endTime, "H");
+    const startMinutes = set.startTime.getMinutes();
+    const endMinutes = set.endTime.getMinutes();
+    const startStr = startMinutes === 0 ? start : format(set.startTime, "H:mm");
+    const endStr = endMinutes === 0 ? end : format(set.endTime, "H:mm");
+
+    return `${startStr}-${endStr}`;
+  }, [set.startTime, set.endTime, isVeryCompact]);
+
+  return (
+    <Card className="h-full bg-white/10 backdrop-blur-md border-purple-400/30 hover:border-purple-400/50 transition-colors">
+      <CardContent
+        className={`h-full flex flex-col ${isCompact ? "p-1" : "p-2"}`}
+      >
+        <div className="mb-1">
+          <Link
+            to={`./sets/${set.slug}`}
+            className={`text-white font-semibold hover:text-purple-300 transition-colors block whitespace-nowrap overflow-hidden text-ellipsis ${
+              isVeryCompact ? "text-xs" : isCompact ? "text-xs" : "text-sm"
+            }`}
+            title={set.name}
+          >
+            {set.name}
+          </Link>
+        </div>
+
+        {!isVeryCompact && timeString && (
+          <div className="flex items-center gap-1 mb-2">
+            <Clock className="h-2.5 w-2.5 flex-shrink-0 text-purple-200" />
+            <span className="text-xs text-purple-200 whitespace-nowrap">
+              {timeString}
+            </span>
+          </div>
+        )}
+
+        <div className={`mt-auto ${isCompact ? "" : "mt-2"}`}>
+          <VoteButtons set={set} userVote={userVote} onVote={onVote} />
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/src/components/timeline/list/VerticalStageColumn.tsx b/src/components/timeline/list/VerticalStageColumn.tsx
new file mode 100644
index 00000000..0997eed0
--- /dev/null
+++ b/src/components/timeline/list/VerticalStageColumn.tsx
@@ -0,0 +1,51 @@
+import { VerticalArtistScheduleBlock } from "./VerticalArtistScheduleBlock";
+import type { VerticalTimelineSet } from "@/lib/timelineCalculator";
+
+interface VerticalStageColumnProps {
+  stage: {
+    name: string;
+    sets: VerticalTimelineSet[];
+  };
+  totalHeight: number;
+  userVotes: Record<string, number>;
+  onVote: (artistId: string, voteType: number) => void;
+}
+
+export function VerticalStageColumn({
+  stage,
+  totalHeight,
+  userVotes,
+  onVote,
+}: VerticalStageColumnProps) {
+  return (
+    <div className="flex-shrink-0 flex flex-col">
+      <div
+        className="relative w-32 bg-white/5 rounded-lg border border-purple-400/20 min-w-32"
+        style={{ height: totalHeight }}
+      >
+        {stage.sets.map((set) => {
+          if (!set.verticalPosition) return null;
+
+          return (
+            <div
+              key={set.id}
+              className="absolute w-28 px-1"
+              style={{
+                top: `${set.verticalPosition.top + 20}px`,
+                height: `${set.verticalPosition.height - 4}px`,
+              }}
+            >
+              <div className="h-full">
+                <VerticalArtistScheduleBlock
+                  set={set}
+                  userVote={userVotes[set.id]}
+                  onVote={onVote}
+                />
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/timeline/list/VerticalStageLabels.tsx b/src/components/timeline/list/VerticalStageLabels.tsx
new file mode 100644
index 00000000..42625021
--- /dev/null
+++ b/src/components/timeline/list/VerticalStageLabels.tsx
@@ -0,0 +1,17 @@
+interface VerticalStageLabelsProps {
+  stages: Array<{ name: string }>;
+}
+
+export function VerticalStageLabels({ stages }: VerticalStageLabelsProps) {
+  return (
+    <div className="absolute top-4 left-16 z-20 flex space-x-16">
+      {stages.map((stage) => (
+        <div key={stage.name} className="w-20 flex justify-center">
+          <div className="text-sm font-medium text-white bg-gradient-to-r from-purple-600 to-blue-600 px-2 py-1 rounded">
+            {stage.name}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/src/components/timeline/list/VerticalTimeScale.tsx b/src/components/timeline/list/VerticalTimeScale.tsx
new file mode 100644
index 00000000..ecdf5096
--- /dev/null
+++ b/src/components/timeline/list/VerticalTimeScale.tsx
@@ -0,0 +1,95 @@
+import { format, differenceInMinutes } from "date-fns";
+import { useRef } from "react";
+
+interface VerticalTimeScaleProps {
+  timeSlots: Date[];
+  totalHeight: number;
+  scrollContainerRef?: React.RefObject<HTMLDivElement>;
+}
+
+const dateFormat = "MMMM d";
+
+export function VerticalTimeScale({
+  timeSlots,
+  totalHeight,
+}: VerticalTimeScaleProps) {
+  const timeScaleRef = useRef<HTMLDivElement>(null);
+
+  const dateChanges = timeSlots.reduce(
+    (changes, timeSlot, index) => {
+      if (index === 0) {
+        changes.push({ date: timeSlot, position: 20 });
+      } else {
+        const prevDate = format(timeSlots[index - 1], "yyyy-MM-dd");
+        const currentDate = format(timeSlot, "yyyy-MM-dd");
+        if (prevDate !== currentDate) {
+          const midnightOfNewDate = new Date(timeSlot);
+          midnightOfNewDate.setHours(0, 0, 0, 0);
+
+          const festivalStart = timeSlots[0];
+          const minutesFromStart = differenceInMinutes(
+            midnightOfNewDate,
+            festivalStart,
+          );
+          const position = minutesFromStart * 2 + 20; // 2px per minute
+
+          changes.push({ date: midnightOfNewDate, position });
+        }
+      }
+      return changes;
+    },
+    [] as Array<{ date: Date; position: number }>,
+  );
+
+  return (
+    <div
+      ref={timeScaleRef}
+      className="flex-shrink-0 w-20 relative"
+      style={{ height: totalHeight }}
+    >
+      {/* Date change indicators */}
+      {dateChanges.map((dateChange, index) => {
+        const nextDateChange = dateChanges[index + 1];
+        const fullHeight = nextDateChange
+          ? nextDateChange.position - dateChange.position
+          : totalHeight - dateChange.position;
+
+        const space = 5;
+        const height = fullHeight - space;
+        const top = dateChange.position;
+
+        return (
+          <div
+            key={`date-${index}`}
+            className="absolute left-0 text-xs font-medium text-purple-200 bg-purple-900/60 px-1 py-0.5 border border-purple-400/30 flex items-center justify-center rounded-sm"
+            style={{
+              top: `${top}px`,
+              height: `${Math.max(height, 30)}px`,
+              minHeight: "30px",
+              writingMode: "vertical-rl",
+              textOrientation: "mixed",
+            }}
+          >
+            {format(dateChange.date, dateFormat)}
+          </div>
+        );
+      })}
+
+      {/* Time slots */}
+      {timeSlots.map((timeSlot, index) => (
+        <div
+          key={index}
+          className="absolute flex flex-row items-center text-right"
+          style={{ top: `${index * 120 + 20}px` }}
+        >
+          <div className="text-xs font-medium text-purple-300 mr-2 min-w-[50px]">
+            {format(timeSlot, "HH:mm")}
+          </div>
+          <div className="h-px w-2 bg-purple-400/30"></div>
+        </div>
+      ))}
+
+      <div className="absolute top-0 right-0 bottom-0 w-px bg-purple-400/20"></div>
+    </div>
+  );
+}
diff --git a/src/components/timeline/list/VerticalTimelineContainer.tsx b/src/components/timeline/list/VerticalTimelineContainer.tsx
new file mode 100644
index 00000000..ebd6fee3
--- /dev/null
+++ b/src/components/timeline/list/VerticalTimelineContainer.tsx
@@ -0,0 +1,44 @@
+import { useRef } from "react";
+import { VerticalTimeScale } from "./VerticalTimeScale";
+import { VerticalStageColumn } from "./VerticalStageColumn";
+import type { VerticalTimelineData } from "@/lib/timelineCalculator";
+
+interface VerticalTimelineContainerProps {
+  timelineData: VerticalTimelineData;
+  userVotes: Record<string, number>;
+  onVote: (artistId: string, voteType: number) => void;
+}
+
+export function VerticalTimelineContainer({
+  timelineData,
+  userVotes,
+  onVote,
+}: VerticalTimelineContainerProps) {
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <div className="flex">
+      {/* Time Scale */}
+      <VerticalTimeScale
+        timeSlots={timelineData.timeSlots}
+        totalHeight={timelineData.totalHeight}
+      />
+
+      {/* Stage Columns */}
+      <div
+        ref={scrollContainerRef}
+        className="flex space-x-8 overflow-x-auto overflow-y-hidden pl-4"
+      >
+        {timelineData.stages.map((stage) => (
+          <VerticalStageColumn
+            key={stage.name}
+            stage={stage}
+            totalHeight={timelineData.totalHeight}
+            userVotes={userVotes}
+            onVote={onVote}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/src/contexts/FestivalEditionContext.tsx b/src/contexts/FestivalEditionContext.tsx
index aa85f025..864f1f86 100644
--- a/src/contexts/FestivalEditionContext.tsx
+++ b/src/contexts/FestivalEditionContext.tsx
@@ -13,6 +13,7 @@ interface FestivalEditionContextType {
 
   // Utils
   isContextReady: boolean;
+  basePath: string;
 }
 
 const FestivalEditionContext = createContext<
@@ -41,17 +42,20 @@ function getSlugs(pathname: string) {
     isMainDomain: subdomainInfo.isMainDomain,
   });
 
+  let basePath = "";
   // For main domain, extract festival slug from URL path
   if (pathname.includes("/festivals/")) {
     const match = matchPath({ path: "/festivals/:festivalSlug/*" }, pathname);
     festivalSlug = match?.params.festivalSlug || festivalSlug || "";
     pathname = pathname.replace(`/festivals/${festivalSlug}`, "");
+    basePath = `/festivals/${festivalSlug}`;
   }
 
   if (!pathname.includes("/editions")) {
     console.log("🔍 No editions in pathname, returning:", { festivalSlug });
     return {
       festivalSlug,
+      basePath,
     };
   }
 
@@ -68,6 +72,7 @@ function getSlugs(pathname: string) {
       editionSlug,
     });
     return {
+      basePath: basePath + `/editions/${editionSlug}`,
       festivalSlug,
       editionSlug,
     };
@@ -86,6 +91,7 @@ function getSlugs(pathname: string) {
     pathname,
   });
   return {
+    basePath: basePath + `/editions/${editionSlug}`,
     festivalSlug,
     editionSlug,
   };
@@ -101,7 +107,7 @@ function useParseSlugs() {
 export function FestivalEditionProvider({
   children,
 }: PropsWithChildren<unknown>) {
-  const { festivalSlug, editionSlug } = useParseSlugs();
+  const { festivalSlug, editionSlug, basePath } = useParseSlugs();
 
   const festivalQuery = useFestivalBySlugQuery(festivalSlug);
 
@@ -128,6 +134,7 @@ export function FestivalEditionProvider({
     festival: festival || null,
     edition: edition || null,
     isContextReady,
+    basePath,
   };
 
   return (
diff --git a/src/hooks/queries/sets/useSetBySlug.ts b/src/hooks/queries/sets/useSetBySlug.ts
index 61b0627a..bcb18a86 100644
--- a/src/hooks/queries/sets/useSetBySlug.ts
+++ b/src/hooks/queries/sets/useSetBySlug.ts
@@ -39,7 +39,6 @@ async function fetchSetBySlug(slug: string): Promise<FestivalSet> {
           votes: [],
         }))
         .filter(Boolean) || [],
-    stages: data.stage_id && data.stages ? data.stages : null,
     votes: data.votes || [],
   };
 
diff --git a/src/hooks/queries/sets/useSets.ts b/src/hooks/queries/sets/useSets.ts
index 7903a4b6..82713bab 100644
--- a/src/hooks/queries/sets/useSets.ts
+++ b/src/hooks/queries/sets/useSets.ts
@@ -6,7 +6,6 @@ import { Artist } from "../artists/useArtists";
 export type FestivalSet = Database["public"]["Tables"]["sets"]["Row"] & {
   artists: Artist[];
   votes: { vote_type: number; user_id: string }[];
-  stages?: { name: string } | null;
 };
 
 export type Stage = Database["public"]["Tables"]["stages"]["Row"];
diff --git a/src/hooks/queries/sets/useSetsByEdition.ts b/src/hooks/queries/sets/useSetsByEdition.ts
index 0860bce6..c00d5b8d 100644
--- a/src/hooks/queries/sets/useSetsByEdition.ts
+++ b/src/hooks/queries/sets/useSetsByEdition.ts
@@ -9,7 +9,6 @@ async function fetchSetsByEdition(editionId: string): Promise<FestivalSet[]> {
     .select(
       `
       *,
-      stages (name),
       set_artists (
         artists (
           *,
diff --git a/src/hooks/queries/stages/types.ts b/src/hooks/queries/stages/types.ts
index 60aa7260..df89dff2 100644
--- a/src/hooks/queries/stages/types.ts
+++ b/src/hooks/queries/stages/types.ts
@@ -6,4 +6,5 @@ export type Stage = Database["public"]["Tables"]["stages"]["Row"];
 export const stagesKeys = {
   all: ["stages"] as const,
   byEdition: (editionId: string) => ["stages", { editionId }] as const,
+  byId: (stageId: string) => ["stages", { stageId }] as const,
 };
diff --git a/src/hooks/queries/stages/useStageQuery.ts b/src/hooks/queries/stages/useStageQuery.ts
new file mode 100644
index 00000000..d09de5ec
--- /dev/null
+++ b/src/hooks/queries/stages/useStageQuery.ts
@@ -0,0 +1,30 @@
+import { useQuery } from "@tanstack/react-query";
+import { supabase } from "@/integrations/supabase/client";
+import { Stage, stagesKeys } from "./types";
+
+async function fetchStage(stageId: string): Promise<Stage | null> {
+  const { data, error } = await supabase
+    .from("stages")
+    .select("*")
+    .eq("id", stageId)
+    .eq("archived", false)
+    .single();
+
+  if (error) {
+    if (error.code === "PGRST116") {
+      // No rows returned
+      return null;
+    }
+    throw new Error("Failed to load stage");
+  }
+
+  return data;
+}
+
+export function useStageQuery(stageId: string | undefined | null) {
+  return useQuery({
+    queryKey: stagesKeys.byId(stageId || ""),
+    queryFn: () => fetchStage(stageId!),
+    enabled: !!stageId,
+  });
+}
diff --git a/src/hooks/useScheduleData.ts b/src/hooks/useScheduleData.ts
index 07d36abd..f01117e7 100644
--- a/src/hooks/useScheduleData.ts
+++ b/src/hooks/useScheduleData.ts
@@ -2,6 +2,7 @@ import { useMemo } from "react";
 import { formatDateTime } from "@/lib/timeUtils";
 import { format, startOfDay } from "date-fns";
 import type { FestivalSet } from "@/hooks/queries/sets/useSets";
+import { Stage } from "./queries/stages/types";
 
 export interface ScheduleDay {
   date: string;
@@ -10,15 +11,16 @@ export interface ScheduleDay {
 }
 
 export interface ScheduleStage {
+  id: string;
   name: string;
-  sets: ScheduleSet[]; // Now represents sets, not individual artists
+  sets: ScheduleSet[];
 }
 
 export interface ScheduleArtist {
   id: string;
   name: string;
   slug?: string;
-  stage?: string;
+  stageId?: string;
   startTime?: Date;
   endTime?: Date;
   votes?: { vote_type: number; user_id: string }[];
@@ -36,26 +38,20 @@ export interface ScheduleSet extends ScheduleArtist {
 }
 
 export function useScheduleData(
-  sets?: FestivalSet[],
+  sets: FestivalSet[] | undefined,
+  stages: Array<Stage> | undefined,
   use24Hour: boolean = false,
 ) {
   const loading = false;
   const error = null;
 
   const scheduleDays = useMemo(() => {
-    // Enhanced defensive checks
-    if (!sets) {
-      return [];
-    }
-
-    if (!Array.isArray(sets) || sets.length === 0) {
+    if (!sets || !stages || !Array.isArray(sets) || sets.length === 0) {
       return [];
     }
 
     // Filter sets with performance times and stages
-    const performingSets = sets.filter(
-      (set) => set.time_start && set.stages?.name,
-    );
+    const performingSets = sets.filter((set) => set.time_start && set.stage_id);
 
     // Parse and enhance set data
     const enhancedSets: ScheduleSet[] = performingSets.map((set) => {
@@ -66,7 +62,7 @@ export function useScheduleData(
         id: set.id,
         name: set.name,
         slug: set.slug,
-        stage: set.stages?.name || "",
+        stageId: set.stage_id || "",
         startTime,
         endTime,
         votes: set.votes || [],
@@ -78,6 +74,8 @@ export function useScheduleData(
       };
     });
 
+    console.log({ enhancedSets });
+
     // Group sets by day
     const dayGroups = enhancedSets.reduce(
       (acc, set) => {
@@ -102,36 +100,50 @@ export function useScheduleData(
         // Group by stage
         const stageGroups = daySets.reduce(
           (acc, set) => {
-            const stageName = set.stage || "Main Stage";
-            if (!acc[stageName]) {
-              acc[stageName] = [];
+            const stageId = set.stageId;
+            if (!stageId) {
+              console.log("no stageId", set);
+              return acc;
             }
-            acc[stageName].push(set);
+
+            if (!acc[stageId]) {
+              acc[stageId] = [];
+            }
+
+            acc[stageId].push(set);
             return acc;
           },
           {} as Record<string, ScheduleSet[]>,
         );
 
         // Sort sets within each stage by time
-        const stages: ScheduleStage[] = Object.entries(stageGroups).map(
-          ([stageName, stageSets]) => ({
-            name: stageName,
-            sets: stageSets.sort((a, b) => {
-              if (!a.startTime || !b.startTime) return 0;
-              return a.startTime.getTime() - b.startTime.getTime();
-            }),
-          }),
-        );
+        const scheduleStages: ScheduleStage[] = Object.entries(stageGroups)
+          .map(([stageId, stageSets]) => {
+            const stage = stages.find((s) => s.id === stageId);
+            if (!stage) {
+              return null;
+            }
+
+            return {
+              id: stageId,
+              name: stage?.name,
+              sets: stageSets.sort((a, b) => {
+                if (!a.startTime || !b.startTime) return 0;
+                return a.startTime.getTime() - b.startTime.getTime();
+              }),
+            };
+          })
+          .filter((v: ScheduleStage | null): v is ScheduleStage => !!v);
 
         return {
           date: dateKey,
           displayDate: format(date, "EEEE, MMM d"),
-          stages: stages.sort((a, b) => a.name.localeCompare(b.name)),
+          stages: scheduleStages.sort((a, b) => a.name.localeCompare(b.name)),
         };
       });
 
     return scheduleDays;
-  }, [sets, use24Hour]);
+  }, [sets, use24Hour, stages]);
 
   const allStages = useMemo(() => {
     const stageSet = new Set<string>();
diff --git a/src/hooks/useScrollVisibility.ts b/src/hooks/useScrollVisibility.ts
new file mode 100644
index 00000000..f4425e9a
--- /dev/null
+++ b/src/hooks/useScrollVisibility.ts
@@ -0,0 +1,38 @@
+import { useEffect, useState, RefObject } from "react";
+
+interface UseScrollVisibilityOptions {
+  threshold?: number;
+  rootMargin?: string;
+}
+
+export function useScrollVisibility(
+  elementRef: RefObject<Element>,
+  options: UseScrollVisibilityOptions = {},
+): boolean {
+  const [isVisible, setIsVisible] = useState(true);
+  const { threshold = 0, rootMargin = "0px" } = options;
+
+  useEffect(() => {
+    const element = elementRef.current;
+    if (!element) return;
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        setIsVisible(entry.isIntersecting);
+      },
+      {
+        threshold,
+        rootMargin,
+      },
+    );
+
+    observer.observe(element);
+
+    return () => {
+      observer.unobserve(element);
+      observer.disconnect();
+    };
+  }, [elementRef, threshold, rootMargin]);
+
+  return isVisible;
+}
diff --git a/src/hooks/useTimelineUrlState.ts b/src/hooks/useTimelineUrlState.ts
new file mode 100644
index 00000000..905b6368
--- /dev/null
+++ b/src/hooks/useTimelineUrlState.ts
@@ -0,0 +1,80 @@
+import { useCallback } from "react";
+import { useSearchParams } from "react-router-dom";
+
+export type TimelineView = "horizontal" | "list";
+export type TimeFilter = "all" | "morning" | "afternoon" | "evening";
+
+export interface TimelineState {
+  timelineView: TimelineView;
+  selectedDay: string; // Dynamic based on festival dates
+  selectedTime: TimeFilter;
+  selectedStages: string[];
+}
+
+const defaultState: TimelineState = {
+  timelineView: "list",
+  selectedDay: "all",
+  selectedTime: "all",
+  selectedStages: [],
+};
+
+export function useTimelineUrlState() {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const getStateFromUrl = useCallback((): TimelineState => {
+    return {
+      timelineView:
+        (searchParams.get("view") as TimelineView) || defaultState.timelineView,
+      selectedDay: searchParams.get("day") || defaultState.selectedDay,
+      selectedTime:
+        (searchParams.get("time") as TimeFilter) || defaultState.selectedTime,
+      selectedStages:
+        searchParams.get("stages")?.split(",").filter(Boolean) ||
+        defaultState.selectedStages,
+    };
+  }, [searchParams]);
+
+  const updateTimelineState = useCallback(
+    (updates: Partial<TimelineState>) => {
+      const currentState = getStateFromUrl();
+      const newState = { ...currentState, ...updates };
+
+      const newParams = new URLSearchParams();
+
+      // Only add non-default values to URL
+      if (newState.timelineView !== defaultState.timelineView) {
+        newParams.set("view", newState.timelineView);
+      }
+      if (newState.selectedDay !== defaultState.selectedDay) {
+        newParams.set("day", newState.selectedDay);
+      }
+      if (newState.selectedTime !== defaultState.selectedTime) {
+        newParams.set("time", newState.selectedTime);
+      }
+      if (newState.selectedStages.length > 0) {
+        newParams.set("stages", newState.selectedStages.join(","));
+      }
+
+      setSearchParams(newParams, { replace: true });
+    },
+    [getStateFromUrl, setSearchParams],
+  );
+
+  const clearTimelineFilters = useCallback(() => {
+    const currentState = getStateFromUrl();
+    const newParams = new URLSearchParams();
+
+    // Keep view when clearing filters
+    if (currentState.timelineView !== defaultState.timelineView) {
+      newParams.set("view", currentState.timelineView);
+    }
+
+    setSearchParams(newParams, { replace: true });
+  }, [getStateFromUrl, setSearchParams]);
+
+  return {
+    state: getStateFromUrl(),
+    updateState: updateTimelineState,
+    clearFilters: clearTimelineFilters,
+  };
+}
diff --git a/src/hooks/useUrlState.ts b/src/hooks/useUrlState.ts
index 636ba8c2..b52bb236 100644
--- a/src/hooks/useUrlState.ts
+++ b/src/hooks/useUrlState.ts
@@ -7,14 +7,15 @@ export type SortOption =
   | "rating-desc"
   | "popularity-desc"
   | "date-asc";
-export type MainViewOption = "list" | "timeline";
+export type TimelineView = "horizontal" | "list";
+export type MainTab = "artists" | "timeline" | "map" | "info" | "social";
 
 export interface FilterSortState {
   sort: SortOption;
   stages: string[];
   genres: string[];
   minRating: number;
-  mainView: MainViewOption;
+  timelineView: TimelineView;
   use24Hour: boolean;
   groupId?: string;
   invite?: string;
@@ -27,7 +28,7 @@ const defaultState: FilterSortState = {
   stages: [],
   genres: [],
   minRating: 0,
-  mainView: "list",
+  timelineView: "list",
   use24Hour: true,
   groupId: undefined,
   invite: undefined,
@@ -35,7 +36,7 @@ const defaultState: FilterSortState = {
   votePerspective: undefined,
 };
 
-export const useUrlState = () => {
+export function useUrlState() {
   const [searchParams, setSearchParams] = useSearchParams();
 
   const getStateFromUrl = useCallback((): FilterSortState => {
@@ -50,9 +51,9 @@ export const useUrlState = () => {
       minRating:
         parseInt(searchParams.get("minRating") || "0") ||
         defaultState.minRating,
-      mainView:
-        (searchParams.get("mainView") as MainViewOption) ||
-        defaultState.mainView,
+      timelineView:
+        (searchParams.get("timelineView") as TimelineView) ||
+        defaultState.timelineView,
       use24Hour:
         searchParams.get("use24Hour") === "true" || defaultState.use24Hour,
       groupId: searchParams.get("groupId") || defaultState.groupId,
@@ -84,8 +85,8 @@ export const useUrlState = () => {
       if (newState.minRating > 0) {
         newParams.set("minRating", newState.minRating.toString());
       }
-      if (newState.mainView !== defaultState.mainView) {
-        newParams.set("mainView", newState.mainView);
+      if (newState.timelineView !== defaultState.timelineView) {
+        newParams.set("timelineView", newState.timelineView);
       }
       if (newState.use24Hour !== defaultState.use24Hour) {
         newParams.set("use24Hour", newState.use24Hour.toString());
@@ -125,4 +126,4 @@ export const useUrlState = () => {
     updateUrlState,
     clearFilters,
   };
-};
+}
diff --git a/src/index.css b/src/index.css
index 0378c04e..94919304 100644
--- a/src/index.css
+++ b/src/index.css
@@ -149,4 +149,19 @@
   .bg-app-card-gradient {
     @apply bg-gradient-to-br from-app-accent/40 to-app-button/40;
   }
+
+  /* Hide scrollbars for mobile tab navigation */
+  .scrollbar-hide {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+
+  .scrollbar-hide::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* Safe area padding for mobile bottom navigation */
+  .safe-area-pb {
+    padding-bottom: env(safe-area-inset-bottom);
+  }
 }
diff --git a/src/lib/timelineCalculator.ts b/src/lib/timelineCalculator.ts
index d08b08b4..82f822ce 100644
--- a/src/lib/timelineCalculator.ts
+++ b/src/lib/timelineCalculator.ts
@@ -8,6 +8,13 @@ export interface HorizontalTimelineSet extends ScheduleSet {
   };
 }
 
+export interface VerticalTimelineSet extends ScheduleSet {
+  verticalPosition?: {
+    top: number;
+    height: number;
+  };
+}
+
 export interface TimelineData {
   timeSlots: Date[];
   stages: Array<{
@@ -19,6 +26,17 @@ export interface TimelineData {
   festivalEnd: Date;
 }
 
+export interface VerticalTimelineData {
+  timeSlots: Date[];
+  stages: Array<{
+    name: string;
+    sets: VerticalTimelineSet[];
+  }>;
+  totalHeight: number;
+  festivalStart: Date;
+  festivalEnd: Date;
+}
+
 export function calculateTimelineData(
   festivalStartDate: Date,
   festivalEndDate: Date,
@@ -147,3 +165,79 @@ function calculateLatestSetTime(scheduleDays: ScheduleDay[]) {
 
   return latestTime;
 }
+
+export function calculateVerticalTimelineData(
+  festivalStartDate: Date,
+  festivalEndDate: Date,
+  scheduleDays: ScheduleDay[],
+): VerticalTimelineData | null {
+  if (!scheduleDays || scheduleDays.length === 0) return null;
+
+  if (!festivalStartDate || !festivalEndDate) {
+    return null;
+  }
+
+  const earliestSetTime = calculateEarliestSetTime(scheduleDays);
+  const earliestTime = earliestSetTime || new Date(festivalStartDate);
+
+  const latestSetTime = calculateLatestSetTime(scheduleDays);
+  const latestTime = latestSetTime || new Date(festivalEndDate);
+
+  const timeSlots = [];
+  const totalMinutes = differenceInMinutes(latestTime, earliestTime);
+  const totalHours = Math.ceil(totalMinutes / 60);
+
+  for (let i = 0; i <= totalHours; i++) {
+    const timeSlot = new Date(earliestTime.getTime() + i * 60 * 60 * 1000);
+    timeSlots.push(timeSlot);
+  }
+
+  const allStageGroups: Record<string, VerticalTimelineSet[]> = {};
+
+  scheduleDays.forEach((day) => {
+    day.stages.forEach((stage) => {
+      if (!allStageGroups[stage.name]) {
+        allStageGroups[stage.name] = [];
+      }
+
+      const enhancedSets = stage.sets.map((set): VerticalTimelineSet => {
+        if (!set.startTime || !set.endTime) return set;
+
+        const startMinutes = differenceInMinutes(set.startTime, earliestTime);
+        const duration = differenceInMinutes(set.endTime, set.startTime);
+
+        // Calculate vertical positions (1 minute = 2px)
+        const top = startMinutes * 2;
+        const height = Math.max(duration * 2, 60); // Minimum height of 60px
+
+        return {
+          ...set,
+          verticalPosition: {
+            top,
+            height,
+          },
+        };
+      });
+
+      allStageGroups[stage.name].push(...enhancedSets);
+    });
+  });
+
+  const unifiedStages = Object.entries(allStageGroups)
+    .map(([stageName, sets]) => ({
+      name: stageName,
+      sets: sets.sort((a, b) => {
+        if (!a.startTime || !b.startTime) return 0;
+        return a.startTime.getTime() - b.startTime.getTime();
+      }),
+    }))
+    .sort((a, b) => a.name.localeCompare(b.name));
+
+  return {
+    timeSlots,
+    stages: unifiedStages,
+    totalHeight: totalHours * 120, // 120px per hour
+    festivalStart: earliestTime,
+    festivalEnd: latestTime,
+  };
+}
diff --git a/src/pages/EditionView.tsx b/src/pages/EditionView.tsx
index f1265563..76a54939 100644
--- a/src/pages/EditionView.tsx
+++ b/src/pages/EditionView.tsx
@@ -1,36 +1,13 @@
-import { useAuth } from "@/contexts/AuthContext";
-
-import { FilterSortControls } from "@/components/Index/filters/FilterSortControls";
 import { AppHeader } from "@/components/AppHeader";
-import { useSetFiltering } from "@/components/Index/useSetFiltering";
-import { useOfflineVoting } from "@/hooks/useOfflineVoting";
-import { useUrlState } from "@/hooks/useUrlState";
-import { SetsPanel } from "@/components/Index/SetsPanel";
-import { ScheduleHorizontalTimelineView } from "@/components/schedule/ScheduleHorizontalTimelineView";
+import { MainTabNavigation } from "@/components/navigation/MainTabNavigation";
 import ErrorBoundary from "@/components/ErrorBoundary";
-import { useSetsByEditionQuery } from "@/hooks/queries/sets/useSetsByEdition";
 import { useFestivalEdition } from "@/contexts/FestivalEditionContext";
+import { Outlet } from "react-router-dom";
 
 export default function EditionView() {
-  const { user, showAuthDialog } = useAuth();
-
-  const { state: urlState, updateUrlState, clearFilters } = useUrlState();
-
   // Get festival/edition context
   const { festival, edition, isContextReady } = useFestivalEdition();
 
-  // Fetch sets for the current edition
-  const { data: sets = [], isLoading: setsLoading } = useSetsByEditionQuery(
-    edition?.id,
-  );
-  const { userVotes, handleVote } = useOfflineVoting(user);
-
-  const { filteredAndSortedSets, lockCurrentOrder } = useSetFiltering(
-    sets || [],
-    urlState,
-    edition?.id,
-  );
-
   // Show loading while context is not ready
   if (!isContextReady) {
     return (
@@ -40,56 +17,31 @@ export default function EditionView() {
     );
   }
 
-  if (!festival || !edition || setsLoading) {
+  if (!festival || !edition) {
     return (
       <div className="min-h-screen bg-app-gradient flex items-center justify-center">
-        <div className="text-white text-xl">Loading sets...</div>
+        <div className="text-white text-xl">Loading festival...</div>
       </div>
     );
   }
 
-  async function handleVoteAction(artistId: string, voteType: number) {
-    const result = await handleVote(artistId, voteType);
-    if (result.requiresAuth) {
-      showAuthDialog();
-    }
-  }
-
   return (
     <div className="min-h-screen bg-app-gradient">
-      <div className="container mx-auto px-4 py-8">
+      <div className="container mx-auto px-4 py-4 md:py-8 pb-20 md:pb-8">
         <AppHeader
           title={festival.name}
-          subtitle={edition.name}
-          description={`${filteredAndSortedSets.length} artists available for voting`}
+          // subtitle={edition.name}
+          // description="Festival voting platform"
           logoUrl={festival.logo_url}
-          showGroupsButton={true}
+          showGroupsButton
         />
 
-        <FilterSortControls
-          state={urlState}
-          onStateChange={updateUrlState}
-          onClear={clearFilters}
-          editionId={edition.id}
-        />
+        {/* Main Tab Navigation */}
+        <MainTabNavigation />
 
-        <div className="mt-8">
+        <div className="mt-4 md:mt-8">
           <ErrorBoundary>
-            {urlState.mainView === "list" && (
-              <SetsPanel
-                sets={filteredAndSortedSets}
-                user={user}
-                use24Hour={urlState.use24Hour}
-                openAuthDialog={() => showAuthDialog()}
-                onLockSort={() => lockCurrentOrder(updateUrlState)}
-              />
-            )}
-            {urlState.mainView === "timeline" && (
-              <ScheduleHorizontalTimelineView
-                userVotes={userVotes}
-                onVote={handleVoteAction}
-              />
-            )}
+            <Outlet />
           </ErrorBoundary>
         </div>
       </div>
diff --git a/src/pages/Schedule.tsx b/src/pages/Schedule.tsx
index 3b959a94..15308c77 100644
--- a/src/pages/Schedule.tsx
+++ b/src/pages/Schedule.tsx
@@ -5,8 +5,8 @@ const Schedule = () => {
   const navigate = useNavigate();
 
   useEffect(() => {
-    // Redirect to main page with timeline view
-    navigate("/?mainView=timeline", { replace: true });
+    // Redirect to timeline tab
+    navigate("../timeline", { replace: true, relative: "path" });
   }, [navigate]);
 
   return (
diff --git a/src/pages/tabs/ArtistsTab.tsx b/src/pages/tabs/ArtistsTab.tsx
new file mode 100644
index 00000000..38f96626
--- /dev/null
+++ b/src/pages/tabs/ArtistsTab.tsx
@@ -0,0 +1,52 @@
+import { useAuth } from "@/contexts/AuthContext";
+import { FilterSortControls } from "@/components/Index/filters/FilterSortControls";
+import { useSetFiltering } from "@/components/Index/useSetFiltering";
+import { useUrlState } from "@/hooks/useUrlState";
+import { SetsPanel } from "@/components/Index/SetsPanel";
+import { useSetsByEditionQuery } from "@/hooks/queries/sets/useSetsByEdition";
+import { useFestivalEdition } from "@/contexts/FestivalEditionContext";
+
+export function ArtistsTab() {
+  const { user, showAuthDialog } = useAuth();
+  const { state: urlState, updateUrlState, clearFilters } = useUrlState();
+  const { edition } = useFestivalEdition();
+
+  // Fetch sets for the current edition
+  const { data: sets = [], isLoading: setsLoading } = useSetsByEditionQuery(
+    edition?.id,
+  );
+  const { filteredAndSortedSets, lockCurrentOrder } = useSetFiltering(
+    sets || [],
+    urlState,
+    edition?.id,
+  );
+
+  if (setsLoading) {
+    return (
+      <div className="flex items-center justify-center py-12">
+        <div className="text-white text-xl">Loading artists...</div>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <FilterSortControls
+        state={urlState}
+        onStateChange={updateUrlState}
+        onClear={clearFilters}
+        editionId={edition?.id || ""}
+      />
+
+      <div className="mt-8">
+        <SetsPanel
+          sets={filteredAndSortedSets}
+          user={user}
+          use24Hour={urlState.use24Hour}
+          openAuthDialog={() => showAuthDialog()}
+          onLockSort={() => lockCurrentOrder(updateUrlState)}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/tabs/InfoTab.tsx b/src/pages/tabs/InfoTab.tsx
new file mode 100644
index 00000000..edb2c8d4
--- /dev/null
+++ b/src/pages/tabs/InfoTab.tsx
@@ -0,0 +1,18 @@
+import { useFestivalEdition } from "@/contexts/FestivalEditionContext";
+
+export function InfoTab() {
+  const { edition } = useFestivalEdition();
+
+  return (
+    <>
+      <div className="text-center space-y-2 md:space-y-4">
+        <p className="text-lg md:text-xl text-purple-200 font-medium mb-2 md:mb-4">
+          {edition?.name}
+        </p>
+      </div>
+      <div className="text-center text-purple-300 py-12">
+        <p>Festival info coming soon!</p>
+      </div>
+    </>
+  );
+}
diff --git a/src/pages/tabs/MapTab.tsx b/src/pages/tabs/MapTab.tsx
new file mode 100644
index 00000000..6f5f0704
--- /dev/null
+++ b/src/pages/tabs/MapTab.tsx
@@ -0,0 +1,7 @@
+export function MapTab() {
+  return (
+    <div className="text-center text-purple-300 py-12">
+      <p>Map view coming soon!</p>
+    </div>
+  );
+}
diff --git a/src/pages/tabs/ScheduleTab.tsx b/src/pages/tabs/ScheduleTab.tsx
new file mode 100644
index 00000000..d8612cf1
--- /dev/null
+++ b/src/pages/tabs/ScheduleTab.tsx
@@ -0,0 +1,12 @@
+import { ScheduleNavigation } from "@/components/timeline/ScheduleNavigation";
+import { Outlet } from "react-router-dom";
+
+export function ScheduleTab() {
+  return (
+    <div className="space-y-3 md:space-y-6">
+      <ScheduleNavigation />
+
+      <Outlet />
+    </div>
+  );
+}
diff --git a/src/pages/tabs/ScheduleTabList.tsx b/src/pages/tabs/ScheduleTabList.tsx
new file mode 100644
index 00000000..1f4663aa
--- /dev/null
+++ b/src/pages/tabs/ScheduleTabList.tsx
@@ -0,0 +1,23 @@
+import { ListSchedule } from "@/components/timeline/list/ListSchedule";
+import { ListFilters } from "@/components/timeline/ListFilters";
+import { useAuth } from "@/contexts/AuthContext";
+import { useOfflineVoting } from "@/hooks/useOfflineVoting";
+
+export function ScheduleTabList() {
+  const { user, showAuthDialog } = useAuth();
+  const { userVotes, handleVote } = useOfflineVoting(user);
+
+  async function handleVoteAction(artistId: string, voteType: number) {
+    const result = await handleVote(artistId, voteType);
+    if (result.requiresAuth) {
+      showAuthDialog();
+    }
+  }
+
+  return (
+    <>
+      <ListFilters />
+      <ListSchedule userVotes={userVotes} onVote={handleVoteAction} />
+    </>
+  );
+}
diff --git a/src/pages/tabs/ScheduleTabTimeline.tsx b/src/pages/tabs/ScheduleTabTimeline.tsx
new file mode 100644
index 00000000..127475c6
--- /dev/null
+++ b/src/pages/tabs/ScheduleTabTimeline.tsx
@@ -0,0 +1,17 @@
+import { useAuth } from "@/contexts/AuthContext";
+import { useOfflineVoting } from "@/hooks/useOfflineVoting";
+import { Timeline } from "@/components/timeline/horizontal/Timeline";
+
+export function ScheduleTabTimeline() {
+  const { user, showAuthDialog } = useAuth();
+  const { userVotes, handleVote } = useOfflineVoting(user);
+
+  async function handleVoteAction(artistId: string, voteType: number) {
+    const result = await handleVote(artistId, voteType);
+    if (result.requiresAuth) {
+      showAuthDialog();
+    }
+  }
+
+  return <Timeline userVotes={userVotes} onVote={handleVoteAction} />;
+}
diff --git a/src/pages/tabs/SocialTab.tsx b/src/pages/tabs/SocialTab.tsx
new file mode 100644
index 00000000..0cfcb489
--- /dev/null
+++ b/src/pages/tabs/SocialTab.tsx
@@ -0,0 +1,7 @@
+export function SocialTab() {
+  return (
+    <div className="text-center text-purple-300 py-12">
+      <p>Social feed coming soon!</p>
+    </div>
+  );
+}