diff --git a/app/routes/leagues/$leagueId.draft.$seasonId.tsx b/app/routes/leagues/$leagueId.draft.$seasonId.tsx
index 50211fe..6ee47a1 100644
--- a/app/routes/leagues/$leagueId.draft.$seasonId.tsx
+++ b/app/routes/leagues/$leagueId.draft.$seasonId.tsx
@@ -142,15 +142,49 @@ export default function DraftRoom() {
     };
   }, [on, off]);
 
-  // Calculate current team on the clock
-  const currentDraftSlot = draftSlots[(currentPick - 1) % draftSlots.length];
+  // Calculate current round
   const currentRound = Math.ceil(currentPick / draftSlots.length);
 
+  // Generate snake draft grid structure
+  const generateDraftGrid = () => {
+    const teamCount = draftSlots.length;
+    const rounds = season.draftRounds;
+    const grid: Array<Array<{ pickNumber: number; round: number; pickInRound: number; teamId: string; pick?: any }>> = [];
+
+    for (let round = 1; round <= rounds; round++) {
+      const roundPicks = [];
+      const isOddRound = round % 2 === 1;
+      
+      for (let i = 0; i < teamCount; i++) {
+        const pickInRound = i + 1;
+        const teamIndex = isOddRound ? i : teamCount - 1 - i;
+        const pickNumber = (round - 1) * teamCount + pickInRound;
+        const teamId = draftSlots[teamIndex]?.team.id;
+        
+        // Find if this pick has been made
+        const pick = picks.find((p: any) => p.pickNumber === pickNumber);
+        
+        roundPicks.push({
+          pickNumber,
+          round,
+          pickInRound,
+          teamId,
+          pick,
+        });
+      }
+      grid.push(roundPicks);
+    }
+    
+    return grid;
+  };
+
+  const draftGrid = generateDraftGrid();
+
   return (
     <div className="min-h-screen bg-background">
       {/* Standalone Header - No Main Nav */}
       <div className="border-b bg-card">
-        <div className="container mx-auto p-4">
+        <div className="w-full px-4 py-4">
           <div className="flex items-center justify-between">
             <div>
               <h1 className="text-3xl font-bold">
@@ -184,66 +218,122 @@ export default function DraftRoom() {
       </div>
 
       {/* Main Content */}
-      <div className="container mx-auto p-4">
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-        {/* Left Column: Draft Board */}
-        <div className="lg:col-span-2">
+      <div className="w-full px-4 py-4">
+        {/* Draft Grid - Horizontally Scrollable */}
+        <div className="mb-6">
           <Card className="p-4">
-            <h2 className="text-xl font-semibold mb-4">Draft Board</h2>
-            
-            {/* Current Pick */}
-            {currentDraftSlot && (
-              <div className="mb-6 p-4 bg-blue-50 border-2 border-blue-500 rounded-lg">
-                <div className="flex items-center justify-between">
-                  <div>
-                    <p className="text-sm text-gray-600">Now Picking:</p>
-                    <p className="text-2xl font-bold">{currentDraftSlot.team.name}</p>
-                  </div>
-                  <Badge variant="default" className="text-lg px-4 py-2">
-                    Pick #{currentPick}
-                  </Badge>
+            <h2 className="text-xl font-semibold mb-4">Draft Grid</h2>
+            <div className="overflow-x-auto">
+              <div className="w-full">
+                {/* Team Headers */}
+                <div className="flex gap-2 mb-2">
+                  {draftSlots.map((slot) => (
+                    <div
+                      key={slot.id}
+                      className="flex-1 min-w-32 text-center"
+                    >
+                      <div className="font-semibold text-sm truncate px-2">
+                        {slot.team.name}
+                      </div>
+                      <div className="text-xs text-muted-foreground">
+                        Pick {slot.draftOrder}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+
+                {/* Draft Grid Rows */}
+                <div className="space-y-2">
+                  {draftGrid.map((roundPicks, roundIndex) => {
+                    const round = roundIndex + 1;
+                    const isEvenRound = round % 2 === 0;
+                    const displayPicks = isEvenRound ? [...roundPicks].reverse() : roundPicks;
+                    
+                    return (
+                    <div key={roundIndex} className="flex gap-2">
+                      {displayPicks.map((cell) => {
+                        const isCurrent = cell.pickNumber === currentPick;
+                        const isPicked = !!cell.pick;
+                        
+                        return (
+                          <div
+                            key={cell.pickNumber}
+                            className={`flex-1 min-w-32 h-20 border-2 rounded-lg p-2 transition-all ${
+                              isCurrent
+                                ? "border-blue-500 bg-blue-50 dark:bg-blue-950 shadow-lg"
+                                : isPicked
+                                ? "border-green-500 bg-green-50 dark:bg-green-950"
+                                : "border-gray-300 bg-white dark:bg-gray-900"
+                            }`}
+                          >
+                            <div className="text-xs font-mono text-muted-foreground mb-1">
+                              {cell.round}.{String(cell.pickInRound).padStart(2, "0")}
+                            </div>
+                            {isPicked ? (
+                              <div className="text-xs">
+                                <div className="font-semibold truncate">
+                                  {cell.pick.participant.name}
+                                </div>
+                                <div className="text-muted-foreground truncate">
+                                  {cell.pick.sport.name}
+                                </div>
+                              </div>
+                            ) : isCurrent ? (
+                              <div className="text-xs font-semibold text-blue-600 dark:text-blue-400">
+                                On Clock
+                              </div>
+                            ) : null}
+                          </div>
+                        );
+                      })}
+                    </div>
+                    );
+                  })}
                 </div>
               </div>
-            )}
+            </div>
+          </Card>
+        </div>
 
-            {/* Recent Picks */}
-            <div className="space-y-2">
-              <h3 className="font-semibold mb-2">Recent Picks</h3>
-              {picks.length === 0 ? (
-                <p className="text-gray-500 text-sm">No picks yet...</p>
-              ) : (
-                <div className="space-y-2">
-                  {picks
-                    .slice()
-                    .reverse()
-                    .slice(0, 10)
-                    .map((pick: any) => (
-                      <div
-                        key={pick.id}
-                        className="flex items-center justify-between p-3 bg-gray-50 rounded-lg"
-                      >
-                        <div className="flex items-center gap-3">
-                          <Badge variant="outline">#{pick.pickNumber}</Badge>
-                          <div>
-                            <p className="font-semibold">
-                              {pick.participant.name}
-                            </p>
-                            <p className="text-sm text-gray-600">
-                              {pick.sport.name}
-                            </p>
-                          </div>
-                        </div>
-                        <div className="text-right">
-                          <p className="font-medium">{pick.team.name}</p>
-                          <p className="text-xs text-gray-500">
-                            Round {pick.round}
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {/* Recent Picks */}
+        <div>
+          <Card className="p-4">
+            <h2 className="text-xl font-semibold mb-4">Recent Picks</h2>
+            {picks.length === 0 ? (
+              <p className="text-muted-foreground text-sm">No picks yet...</p>
+            ) : (
+              <div className="space-y-2 max-h-96 overflow-y-auto">
+                {picks
+                  .slice()
+                  .reverse()
+                  .slice(0, 10)
+                  .map((pick: any) => (
+                    <div
+                      key={pick.id}
+                      className="flex items-center justify-between p-3 bg-muted rounded-lg"
+                    >
+                      <div className="flex items-center gap-3">
+                        <Badge variant="outline">#{pick.pickNumber}</Badge>
+                        <div>
+                          <p className="font-semibold">
+                            {pick.participant.name}
+                          </p>
+                          <p className="text-sm text-muted-foreground">
+                            {pick.sport.name}
                           </p>
                         </div>
                       </div>
-                    ))}
-                </div>
-              )}
-            </div>
+                      <div className="text-right">
+                        <p className="font-medium">{pick.team.name}</p>
+                        <p className="text-xs text-muted-foreground">
+                          Round {pick.round}
+                        </p>
+                      </div>
+                    </div>
+                  ))}
+              </div>
+            )}
           </Card>
         </div>