From ca981663112a2c6bf0c4b05d7aeaf4bb1cbd606b Mon Sep 17 00:00:00 2001
From: Luke Bowsher <lukebowsher@MacBookPro.lan>
Date: Sun, 22 Mar 2026 14:07:20 -0400
Subject: [PATCH] fix: deduplicate nav bars, centralize layout, and clean up UI
 inconsistencies
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove duplicate nav (ThemeToggle + AuthButtonServer) from team page, replace with breadcrumb
- Remove duplicate "Home" header from new-league page
- Move min-h-screen bg-background to body in layout.tsx, remove from 10 pages
- Update loading skeletons to match current page structure (no fake nav placeholders)
- Replace raw input/button in search-component with shadcn components + Enter key support
- Fix getSession() → getUser() in one-tap-component.tsx
- Replace all text-liquid-lava with semantic tokens (text-primary, text-accent, etc.)

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 app/draft/[id]/draft-info-panel.tsx           |  2 +-
 app/draft/[id]/draft-queue.tsx                |  2 +-
 app/draft/[id]/error.tsx                      |  2 +-
 app/draft/[id]/loading.tsx                    | 74 ++++++++-----------
 app/draft/[id]/page.tsx                       | 28 +++----
 app/error.tsx                                 |  2 +-
 app/layout.tsx                                |  2 +-
 app/league/[id]/error.tsx                     |  2 +-
 app/league/[id]/league-home.tsx               |  4 +-
 app/league/[id]/loading.tsx                   | 43 ++++-------
 app/league/[id]/page.tsx                      | 44 +++++------
 app/league/[id]/team/[teamid]/page.tsx        | 50 ++++---------
 .../[id]/team/[teamid]/search-component.tsx   | 18 +++--
 app/login/loading.tsx                         |  4 +-
 app/login/one-tap-component.tsx               |  6 +-
 app/new-league/league-creator.tsx             | 18 ++---
 app/rankings/ncaa/rankings-page.tsx           |  4 +-
 17 files changed, 122 insertions(+), 183 deletions(-)

diff --git a/app/draft/[id]/draft-info-panel.tsx b/app/draft/[id]/draft-info-panel.tsx
index 3ff2f05..d257109 100644
--- a/app/draft/[id]/draft-info-panel.tsx
+++ b/app/draft/[id]/draft-info-panel.tsx
@@ -214,7 +214,7 @@ export default function DraftInfoPanel({
                                 checked={autoPickEnabled}
                                 onChange={onToggleAutoPick}
                                 disabled={isPending}
-                                className="h-4 w-4 text-liquid-lava rounded focus:ring-liquid-lava"
+                                className="h-4 w-4 accent-primary rounded"
                             />
                         </div>
                     </CardContent>
diff --git a/app/draft/[id]/draft-queue.tsx b/app/draft/[id]/draft-queue.tsx
index 8aec142..17e4d76 100644
--- a/app/draft/[id]/draft-queue.tsx
+++ b/app/draft/[id]/draft-queue.tsx
@@ -227,7 +227,7 @@ export default function DraftQueue({ teamId, draftId }: DraftQueueProps) {
                                                     
                                                     <button
                                                         onClick={() => removeFromQueue(queueItem.id)}
-                                                        className="flex-shrink-0 p-1 text-dusty-grey hover:text-liquid-lava transition-colors"
+                                                        className="flex-shrink-0 p-1 text-muted-foreground hover:text-destructive transition-colors"
                                                         aria-label="Remove from queue"
                                                     >
                                                         <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
diff --git a/app/draft/[id]/error.tsx b/app/draft/[id]/error.tsx
index 8842284..eda09f6 100644
--- a/app/draft/[id]/error.tsx
+++ b/app/draft/[id]/error.tsx
@@ -17,7 +17,7 @@ export default function DraftError({
   }, [error]);
 
   return (
-    <div className="min-h-screen bg-background flex items-center justify-center p-4">
+    <div className="flex items-center justify-center p-4">
       <div className="max-w-md w-full text-center">
         <Card className="p-8">
           <CardContent className="p-0">
diff --git a/app/draft/[id]/loading.tsx b/app/draft/[id]/loading.tsx
index 1182901..c6530d6 100644
--- a/app/draft/[id]/loading.tsx
+++ b/app/draft/[id]/loading.tsx
@@ -1,51 +1,41 @@
 export default function DraftLoading() {
   return (
-    <div className="min-h-screen bg-background">
-      <div className="w-full max-w-7xl mx-auto px-4">
-        {/* Header skeleton */}
-        <header className="flex justify-between items-center py-6 border-b border-border">
-          <div className="h-6 w-32 bg-card rounded animate-pulse"></div>
-          <div className="h-6 w-48 bg-card rounded animate-pulse"></div>
-          <div className="flex items-center gap-4">
-            <div className="h-8 w-8 bg-card rounded animate-pulse"></div>
-            <div className="h-8 w-24 bg-card rounded animate-pulse"></div>
-          </div>
-        </header>
+    <div className="w-full max-w-[1600px] mx-auto px-4">
+      <div className="py-6">
+        <div className="h-8 w-48 bg-card rounded animate-pulse"></div>
+      </div>
 
-        <main className="py-6">
-          {/* Draft room skeleton */}
-          <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
-            {/* Player list skeleton */}
-            <div className="lg:col-span-2 bg-card rounded-lg p-4 border border-border">
-              <div className="h-8 w-48 bg-muted rounded animate-pulse mb-4"></div>
-              <div className="space-y-3">
-                {[...Array(8)].map((_, i) => (
-                  <div key={i} className="h-12 bg-muted rounded animate-pulse"></div>
-                ))}
-              </div>
-            </div>
+      {/* Draft room skeleton */}
+      <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
+        {/* Player list skeleton */}
+        <div className="lg:col-span-2 bg-card rounded-lg p-4 border border-border">
+          <div className="h-8 w-48 bg-muted rounded animate-pulse mb-4"></div>
+          <div className="space-y-3">
+            {[...Array(8)].map((_, i) => (
+              <div key={i} className="h-12 bg-muted rounded animate-pulse"></div>
+            ))}
+          </div>
+        </div>
 
-            {/* Draft order skeleton */}
-            <div className="bg-card rounded-lg p-4 border border-border">
-              <div className="h-8 w-32 bg-muted rounded animate-pulse mb-4"></div>
-              <div className="space-y-2">
-                {[...Array(6)].map((_, i) => (
-                  <div key={i} className="h-10 bg-muted rounded animate-pulse"></div>
-                ))}
-              </div>
-            </div>
+        {/* Draft order skeleton */}
+        <div className="bg-card rounded-lg p-4 border border-border">
+          <div className="h-8 w-32 bg-muted rounded animate-pulse mb-4"></div>
+          <div className="space-y-2">
+            {[...Array(6)].map((_, i) => (
+              <div key={i} className="h-10 bg-muted rounded animate-pulse"></div>
+            ))}
+          </div>
+        </div>
 
-            {/* Queue skeleton */}
-            <div className="bg-card rounded-lg p-4 border border-border">
-              <div className="h-8 w-24 bg-muted rounded animate-pulse mb-4"></div>
-              <div className="space-y-2">
-                {[...Array(4)].map((_, i) => (
-                  <div key={i} className="h-10 bg-muted rounded animate-pulse"></div>
-                ))}
-              </div>
-            </div>
+        {/* Queue skeleton */}
+        <div className="bg-card rounded-lg p-4 border border-border">
+          <div className="h-8 w-24 bg-muted rounded animate-pulse mb-4"></div>
+          <div className="space-y-2">
+            {[...Array(4)].map((_, i) => (
+              <div key={i} className="h-10 bg-muted rounded animate-pulse"></div>
+            ))}
           </div>
-        </main>
+        </div>
       </div>
     </div>
   );
diff --git a/app/draft/[id]/page.tsx b/app/draft/[id]/page.tsx
index 0211f98..14ec0b3 100644
--- a/app/draft/[id]/page.tsx
+++ b/app/draft/[id]/page.tsx
@@ -50,13 +50,13 @@ export default async function DraftPage({
     
     if (!userTeam && !isCommissioner) {
         return (
-            <div className="min-h-screen bg-background flex flex-col items-center justify-center p-4">
+            <div className="flex flex-col items-center justify-center p-4">
                 <h1 className="text-2xl font-bold text-foreground mb-4">
                     You don&apos;t have access to this draft
                 </h1>
-                <Link 
-                    href="/" 
-                    className="text-liquid-lava hover:opacity-80 transition-opacity font-medium"
+                <Link
+                    href="/"
+                    className="text-accent hover:opacity-80 transition-opacity font-medium"
                 >
                     Go Back to Home
                 </Link>
@@ -110,16 +110,14 @@ export default async function DraftPage({
     }
 
     return (
-        <div className="min-h-screen bg-background">
-            <div className="w-full max-w-[1600px] mx-auto px-4">
-                <div className="py-6">
-                    <h1 className="text-xl font-bold text-foreground">
-                        {draftSettings.leagues.name} Draft
-                    </h1>
-                </div>
+        <div className="w-full max-w-[1600px] mx-auto px-4">
+            <div className="py-6">
+                <h1 className="text-xl font-bold text-foreground">
+                    {draftSettings.leagues.name} Draft
+                </h1>
+            </div>
 
-                <main>
-                    <DraftRoom
+            <DraftRoom
                         draftSettings={draftSettings}
                         currentTeam={currentTeam}
                         isCommissioner={isCommissioner}
@@ -127,9 +125,7 @@ export default async function DraftPage({
                         userRankings={userRankings}
                         userTeamSettings={userTeamSettings}
                         ncaaTeamInfo={ncaaTeamInfo}
-                    />
-                </main>
-            </div>
+                />
         </div>
     );
 }
\ No newline at end of file
diff --git a/app/error.tsx b/app/error.tsx
index 0cfd5b8..be7ef0e 100644
--- a/app/error.tsx
+++ b/app/error.tsx
@@ -17,7 +17,7 @@ export default function Error({
   }, [error]);
 
   return (
-    <div className="min-h-screen bg-background flex items-center justify-center p-4">
+    <div className="flex items-center justify-center p-4">
       <div className="max-w-md w-full text-center">
         <Card className="p-8">
           <CardContent className="p-0">
diff --git a/app/layout.tsx b/app/layout.tsx
index 08bfc6c..5bbfa7f 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -23,7 +23,7 @@ export default function RootLayout({
   return (
     <html lang="en" className={cn("font-sans", geist.variable)}>
       <ThemeInitializer />
-      <body className={inter.className}>
+      <body className={`${inter.className} min-h-screen bg-background`}>
         <a href="#main-content" className="sr-only focus:not-sr-only focus:fixed focus:top-2 focus:left-2 focus:z-[100] focus:px-4 focus:py-2 focus:bg-primary focus:text-primary-foreground focus:rounded-md focus:text-sm">
           Skip to content
         </a>
diff --git a/app/league/[id]/error.tsx b/app/league/[id]/error.tsx
index bb6f2f1..d15fa6f 100644
--- a/app/league/[id]/error.tsx
+++ b/app/league/[id]/error.tsx
@@ -17,7 +17,7 @@ export default function LeagueError({
   }, [error]);
 
   return (
-    <div className="min-h-screen bg-background flex items-center justify-center p-4">
+    <div className="flex items-center justify-center p-4">
       <div className="max-w-md w-full text-center">
         <Card className="p-8">
           <CardContent className="p-0">
diff --git a/app/league/[id]/league-home.tsx b/app/league/[id]/league-home.tsx
index 540c3e0..1d5d62a 100644
--- a/app/league/[id]/league-home.tsx
+++ b/app/league/[id]/league-home.tsx
@@ -220,7 +220,7 @@ export default function LeagueHome({ teams, league_id, league, draftSettings, is
                             <div className="space-y-2">
                                 <Link
                                     href={`${league_id}/team/${team.id}`}
-                                    className="text-lg font-bold text-foreground hover:text-liquid-lava transition-colors"
+                                    className="text-lg font-bold text-foreground hover:text-primary transition-colors"
                                 >
                                     {team.name}
                                 </Link>
@@ -242,7 +242,7 @@ export default function LeagueHome({ teams, league_id, league, draftSettings, is
                                         {Number(team.weeklyScores[week] || 0).toFixed(1)}
                                     </span>
                                 ))}
-                                <span className="w-20 text-center text-liquid-lava font-bold text-lg">
+                                <span className="w-20 text-center text-primary font-bold text-lg">
                                     {Number(team.totalScore).toFixed(1)}
                                 </span>
                             </div>
diff --git a/app/league/[id]/loading.tsx b/app/league/[id]/loading.tsx
index 77f7416..3266835 100644
--- a/app/league/[id]/loading.tsx
+++ b/app/league/[id]/loading.tsx
@@ -1,34 +1,21 @@
 export default function LeagueLoading() {
   return (
-    <div className="min-h-screen bg-background">
-      <div className="w-full max-w-6xl mx-auto px-4">
-        {/* Header skeleton */}
-        <header className="flex justify-between items-center py-6 border-b border-border">
-          <div className="h-8 w-48 bg-card rounded animate-pulse"></div>
-          <div className="flex items-center gap-4">
-            <div className="h-8 w-8 bg-card rounded animate-pulse"></div>
-            <div className="h-8 w-24 bg-card rounded animate-pulse"></div>
-          </div>
-        </header>
-
-        <main className="py-6">
-          {/* League header skeleton */}
-          <div className="mb-8">
-            <div className="h-10 w-64 bg-card rounded animate-pulse mb-2"></div>
-            <div className="h-5 w-32 bg-card rounded animate-pulse"></div>
-          </div>
+    <div className="w-full max-w-4xl mx-auto px-4">
+      <div className="py-6">
+        <div className="h-8 w-48 bg-card rounded animate-pulse"></div>
+      </div>
 
-          {/* Teams grid skeleton */}
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-            {[...Array(6)].map((_, i) => (
-              <div key={i} className="bg-card rounded-lg p-4 border border-border">
-                <div className="h-6 w-32 bg-muted rounded animate-pulse mb-3"></div>
-                <div className="h-4 w-24 bg-muted rounded animate-pulse mb-2"></div>
-                <div className="h-4 w-20 bg-muted rounded animate-pulse"></div>
-              </div>
-            ))}
-          </div>
-        </main>
+      <div className="bg-card rounded-xl p-6 shadow-lg">
+        {/* Teams grid skeleton */}
+        <div className="space-y-4">
+          {[...Array(6)].map((_, i) => (
+            <div key={i} className="flex items-center gap-4 p-3 rounded-lg border border-border">
+              <div className="h-6 w-32 bg-muted rounded animate-pulse"></div>
+              <div className="h-4 w-24 bg-muted rounded animate-pulse"></div>
+              <div className="ml-auto h-6 w-16 bg-muted rounded animate-pulse"></div>
+            </div>
+          ))}
+        </div>
       </div>
     </div>
   );
diff --git a/app/league/[id]/page.tsx b/app/league/[id]/page.tsx
index 8a3b116..26a54df 100644
--- a/app/league/[id]/page.tsx
+++ b/app/league/[id]/page.tsx
@@ -21,13 +21,13 @@ export default async function League(props: { params: Promise<{ id: LeagueID }>
     const leagueId = params.id;
     if (!leagueId) {
         return (
-            <div className="min-h-screen bg-background flex flex-col items-center justify-center p-4">
+            <div className="flex flex-col items-center justify-center p-4">
                 <h1 className="text-2xl font-bold text-foreground mb-4">
                     Error: Invalid League
                 </h1>
-                <Link 
-                    href="/" 
-                    className="text-liquid-lava hover:opacity-80 transition-opacity font-medium"
+                <Link
+                    href="/"
+                    className="text-accent hover:opacity-80 transition-opacity font-medium"
                 >
                     Go Back to Home
                 </Link>
@@ -211,26 +211,22 @@ export default async function League(props: { params: Promise<{ id: LeagueID }>
     const isCommissioner = user.id === leagueData.commish;
 
     return (
-        <div className="min-h-screen bg-background">
-            <div className="w-full max-w-4xl mx-auto px-4">
-                <div className="py-6">
-                    <h1 className="text-xl font-bold text-foreground">
-                        {leagueData.name}
-                    </h1>
-                </div>
-
-                <main>
-                    <div className="bg-card rounded-xl p-6 shadow-lg">
-                        <LeagueHome
-                            teams={teams}
-                            league_id={params.id}
-                            league={leagueData}
-                            draftSettings={draftSettingsData}
-                            isCommissioner={isCommissioner}
-                            weeks={sortedWeeks}
-                        />
-                    </div>
-                </main>
+        <div className="w-full max-w-4xl mx-auto px-4">
+            <div className="py-6">
+                <h1 className="text-xl font-bold text-foreground">
+                    {leagueData.name}
+                </h1>
+            </div>
+
+            <div className="bg-card rounded-xl p-6 shadow-lg">
+                <LeagueHome
+                    teams={teams}
+                    league_id={params.id}
+                    league={leagueData}
+                    draftSettings={draftSettingsData}
+                    isCommissioner={isCommissioner}
+                    weeks={sortedWeeks}
+                />
             </div>
         </div>
     );
diff --git a/app/league/[id]/team/[teamid]/page.tsx b/app/league/[id]/team/[teamid]/page.tsx
index 34b1af4..0dd4865 100644
--- a/app/league/[id]/team/[teamid]/page.tsx
+++ b/app/league/[id]/team/[teamid]/page.tsx
@@ -3,8 +3,6 @@
 // league/[id]/team/[teamid]/page.tsx
 import { createClient } from "../../../../utils/supabase/server";
 import { redirect } from 'next/navigation';
-import AuthButtonServer from '../../../../auth-button-server';
-import ThemeToggle from '../../../../theme-toggle';
 import Link from 'next/link';
 import OneTeam from './one-team';
 import SearchPage from './search-page';
@@ -27,13 +25,11 @@ export default async function Team(props: { params: Promise<{ teamid: TeamID }>
     const teamId = params.teamid;
     if (!teamId) {
         return (
-            <div className="min-h-screen bg-background">
-                <div className="max-w-xl mx-auto p-6">
-                    <h1 className="text-foreground text-2xl font-bold mb-4">Error, invalid team</h1>
-                    <Link href="/" className="text-accent hover:opacity-80 transition-opacity">
-                        Go Back to Home
-                    </Link>
-                </div>
+            <div className="max-w-xl mx-auto p-6">
+                <h1 className="text-foreground text-2xl font-bold mb-4">Error, invalid team</h1>
+                <Link href="/" className="text-accent hover:opacity-80 transition-opacity">
+                    Go Back to Home
+                </Link>
             </div>
         );
     }
@@ -147,32 +143,16 @@ export default async function Team(props: { params: Promise<{ teamid: TeamID }>
     const isCommissioner = user.id === team.leagues?.commish;
     const isAuthorized = isOwner || isCommissioner;
 
-    const baseLayout = (content: React.ReactNode) => (
-        <div className="min-h-screen bg-background">
-            <div className="max-w-xl mx-auto">
-                <nav className="flex justify-between items-center px-6 py-4 border-b border-border">
-                    <Link href="/" className="text-lg font-bold text-foreground hover:text-accent transition-colors">
-                        Home
-                    </Link>
-                    <Link 
-                        href={`/league/${team.leagues?.id}`} 
-                        className="text-lg font-bold text-foreground hover:text-accent transition-colors"
-                    >
-                        League Home
+    return (
+        <div className="w-full max-w-xl mx-auto px-4">
+            <div className="py-6">
+                <div className="flex items-center gap-2 text-sm text-muted-foreground mb-4">
+                    <Link href={`/league/${team.leagues?.id}`} className="hover:text-foreground transition-colors">
+                        {team.leagues?.name || 'League'}
                     </Link>
-                    <div className="flex items-center gap-4">
-                        <ThemeToggle />
-                        <AuthButtonServer />
-                    </div>
-                </nav>
-                {content}
-            </div>
-        </div>
-    );
-
-    const mainContent = (
-        <div className="p-6">
-            <div className="mb-6">
+                    <span>/</span>
+                    <span className="text-foreground">{team.name}</span>
+                </div>
                 <TeamHeader team={team} isAuthorized={isAuthorized} isOwner={isOwner} isCommissioner={isCommissioner} />
                 <h2 className="text-muted-foreground">{teamData.owner?.full_name || 'Unclaimed'}</h2>
             </div>
@@ -201,6 +181,4 @@ export default async function Team(props: { params: Promise<{ teamid: TeamID }>
             )}
         </div>
     );
-
-    return baseLayout(mainContent);
 }
\ No newline at end of file
diff --git a/app/league/[id]/team/[teamid]/search-component.tsx b/app/league/[id]/team/[teamid]/search-component.tsx
index f5ee7bc..493a87f 100644
--- a/app/league/[id]/team/[teamid]/search-component.tsx
+++ b/app/league/[id]/team/[teamid]/search-component.tsx
@@ -1,5 +1,8 @@
 "use client";
 import React, { useState } from 'react';
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Search } from 'lucide-react';
 
 interface SearchComponentProps {
   onSearch: (searchTerm: string) => void;
@@ -15,22 +18,21 @@ const SearchComponent: React.FC<SearchComponentProps> = ({ onSearch }) => {
   return (
     <div className='bg-card border border-border p-3 rounded-lg my-4'>
       <div className="flex items-center gap-2">
-        <input
-          className='flex-grow bg-inherit text-foreground placeholder:text-muted-foreground focus:outline-none'
+        <Input
+          className='flex-grow bg-inherit border-0 focus-visible:ring-0'
           type="text"
           value={searchTerm}
           onChange={(e) => setSearchTerm(e.target.value)}
+          onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
           placeholder="Search for players..."
         />
-        <button 
-          onClick={handleSearch}
-          className="px-4 py-1 bg-accent text-white rounded-md hover:opacity-90 transition-opacity"
-        >
+        <Button onClick={handleSearch} size="sm">
+          <Search size={16} />
           Search
-        </button>
+        </Button>
       </div>
     </div>
   );
 };
 
-export default SearchComponent;
\ No newline at end of file
+export default SearchComponent;
diff --git a/app/login/loading.tsx b/app/login/loading.tsx
index 1b78977..ca35d1c 100644
--- a/app/login/loading.tsx
+++ b/app/login/loading.tsx
@@ -1,6 +1,6 @@
 export default function LoginLoading() {
   return (
-    <div className="min-h-screen bg-background flex items-center justify-center p-4">
+    <div className="flex items-center justify-center p-4">
       <div className="max-w-md w-full">
         <div className="bg-card rounded-lg p-8 border border-border">
           {/* Logo skeleton */}
@@ -10,7 +10,7 @@ export default function LoginLoading() {
           <div className="space-y-4">
             <div className="h-12 bg-muted rounded animate-pulse"></div>
             <div className="h-12 bg-muted rounded animate-pulse"></div>
-            <div className="h-12 bg-liquid-lava/20 rounded animate-pulse"></div>
+            <div className="h-12 bg-primary/20 rounded animate-pulse"></div>
           </div>
 
           {/* Divider skeleton */}
diff --git a/app/login/one-tap-component.tsx b/app/login/one-tap-component.tsx
index 1a8f553..80879d8 100644
--- a/app/login/one-tap-component.tsx
+++ b/app/login/one-tap-component.tsx
@@ -29,11 +29,11 @@ const OneTapComponent = ({ redirectPath }: { redirectPath?: string }) => {
       console.log('Nonce: ', nonce, hashedNonce)
 
       // check if there's already an existing session before initializing the one-tap UI
-      const { data, error } = await supabase.auth.getSession()
+      const { data: { user }, error } = await supabase.auth.getUser()
       if (error) {
-        console.error('Error getting session', error)
+        console.error('Error getting user', error)
       }
-      if (data.session) {
+      if (user) {
         router.push(redirectPath || '/')
         return
       }
diff --git a/app/new-league/league-creator.tsx b/app/new-league/league-creator.tsx
index b2958db..0c6b702 100644
--- a/app/new-league/league-creator.tsx
+++ b/app/new-league/league-creator.tsx
@@ -1,5 +1,4 @@
 "use client";
-import Link from 'next/link';
 import { useState } from 'react';
 import { addLeague } from './league-action';
 import { Button } from "@/components/ui/button";
@@ -10,14 +9,8 @@ export default function LeagueCreator() {
     const [draftEnabled, setDraftEnabled] = useState(true);
 
     return (
-        <div className="w-full max-w-xl mx-auto">
-            <div className="flex justify-between px-4 py-6 border-slate-grey border border-t-0">
-                <Link className="text-xl font-bold hover:text-liquid-lava transition-colors" href={'/'}>
-                    Home
-                </Link>
-            </div>
-            <div>
-                <form className="flex-wrap border-slate-grey border border-t-0 p-6" action={addLeague}>
+        <div className="w-full max-w-xl mx-auto px-4 py-6">
+            <form className="space-y-4" action={addLeague}>
                     <fieldset className="flex flex-col space-y-4">
                         <legend className="text-2xl font-bold mb-6">Create a New League</legend>
 
@@ -96,14 +89,14 @@ export default function LeagueCreator() {
                         </div>
 
                         {/* Draft Settings */}
-                        <div className="mt-8 border-t border-slate-grey pt-6">
+                        <div className="mt-8 border-t border-border pt-6">
                             <div className="flex items-center space-x-2 mb-4">
                                 <input
                                     type="checkbox"
                                     id="EnableDraft"
                                     checked={draftEnabled}
                                     onChange={(e) => setDraftEnabled(e.target.checked)}
-                                    className="h-4 w-4 text-liquid-lava rounded focus:ring-liquid-lava"
+                                    className="h-4 w-4 accent-primary rounded"
                                 />
                                 <Label htmlFor="EnableDraft" className="text-lg font-semibold">
                                     Enable Draft
@@ -172,7 +165,7 @@ export default function LeagueCreator() {
                                             id="AutoPickEnabled"
                                             name="AutoPickEnabled"
                                             defaultChecked={true}
-                                            className="h-4 w-4 text-liquid-lava rounded focus:ring-liquid-lava"
+                                            className="h-4 w-4 accent-primary rounded"
                                         />
                                         <Label htmlFor="AutoPickEnabled" className="text-muted-foreground">
                                             Enable Auto-Pick when time expires
@@ -190,7 +183,6 @@ export default function LeagueCreator() {
                         </Button>
                     </fieldset>
                 </form>
-            </div>
         </div>
         );
 }
diff --git a/app/rankings/ncaa/rankings-page.tsx b/app/rankings/ncaa/rankings-page.tsx
index 3f045de..17ecb00 100644
--- a/app/rankings/ncaa/rankings-page.tsx
+++ b/app/rankings/ncaa/rankings-page.tsx
@@ -237,8 +237,7 @@ export default function RankingsPage({
   }, []);
 
   return (
-    <div className="min-h-screen bg-background">
-      <div className="max-w-6xl mx-auto px-4 py-6">
+    <div className="max-w-6xl mx-auto px-4 py-6">
         <div className="mb-6">
           <h1 className="text-2xl font-bold text-foreground">NCAA Rankings</h1>
           <p className="text-sm text-muted-foreground mt-1">
@@ -370,7 +369,6 @@ export default function RankingsPage({
             />
           </TabsContent>
         </Tabs>
-      </div>
     </div>
   );
 }