diff --git a/src/apps/golf/components/GolfGame.module.css b/src/apps/golf/components/GolfGame.module.css
index 960bcba..ff38050 100644
--- a/src/apps/golf/components/GolfGame.module.css
+++ b/src/apps/golf/components/GolfGame.module.css
@@ -175,8 +175,17 @@
 }
 
 .playerInfo.active {
-  background: rgba(144, 238, 144, 0.2);
+  background: rgba(144, 238, 144, 0.25);
   border: 1px solid #90ee90;
+  box-shadow: 0 0 12px rgba(144, 238, 144, 0.3);
+}
+
+.turnLabel {
+  font-size: 0.7rem;
+  color: #90ee90;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-weight: 500;
 }
 
 .score {
@@ -245,8 +254,15 @@
 }
 
 .card.selected {
-  border: 3px solid #90ee90;
-  transform: scale(1.05);
+  border: 3px solid #ffd700;
+  transform: scale(1.08);
+  box-shadow: 0 0 16px rgba(255, 215, 0, 0.5);
+  animation: selectedPulse 1.2s ease-in-out infinite;
+}
+
+@keyframes selectedPulse {
+  0%, 100% { box-shadow: 0 0 12px rgba(255, 215, 0, 0.4); }
+  50% { box-shadow: 0 0 24px rgba(255, 215, 0, 0.8); }
 }
 
 .card.clickable,
@@ -338,6 +354,17 @@
   color: rgba(255, 255, 255, 0.5);
 }
 
+.emptyPileReserved {
+  width: 80px;
+  height: 120px;
+  visibility: hidden;
+}
+
+.drawnCardWrapper .card {
+  border: 2px solid #ffd700;
+  box-shadow: 0 0 16px rgba(255, 215, 0, 0.4);
+}
+
 .playerArea {
   background: rgba(255, 255, 255, 0.1);
   padding: 2rem;
@@ -397,6 +424,20 @@
   transition: transform 0.1s ease;
 }
 
+.actionButtonDisabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.actionButtonDisabled:hover {
+  background: rgba(255, 255, 255, 0.2);
+  border-color: rgba(255, 255, 255, 0.3);
+}
+
+.actionButtonDisabled:active {
+  transform: none;
+}
+
 .knockButton {
   background: #ff6b6b;
   color: white;
@@ -609,9 +650,9 @@
   }
 
   .card.selected {
-    border: 3px solid #90ee90;
-    transform: scale(1.08);
-    box-shadow: 0 0 20px rgba(144, 238, 144, 0.5);
+    border: 3px solid #ffd700;
+    transform: scale(1.1);
+    box-shadow: 0 0 24px rgba(255, 215, 0, 0.6);
   }
 
   .cardRank {
@@ -641,6 +682,11 @@
     height: 100px;
   }
 
+  .emptyPileReserved {
+    width: 70px;
+    height: 100px;
+  }
+
   .playerArea {
     padding: 1rem;
     width: 100%;
@@ -842,6 +888,11 @@
     height: 80px;
   }
 
+  .emptyPileReserved {
+    width: 55px;
+    height: 80px;
+  }
+
   .cardGrid {
     max-width: 130px;
     gap: 0.6rem;
diff --git a/src/apps/golf/components/GolfGame.tsx b/src/apps/golf/components/GolfGame.tsx
index 2510ccb..33327ac 100644
--- a/src/apps/golf/components/GolfGame.tsx
+++ b/src/apps/golf/components/GolfGame.tsx
@@ -38,6 +38,7 @@ const GolfGame = ({ onGameIdChange, onPlayerIdChange, onPlayerNameChange, onConn
   const {
     gameState,
     roomState,
+    playerId,
     roomCode,
     selectedCardIndex,
     isInLobby,
@@ -345,17 +346,26 @@ const GolfGame = ({ onGameIdChange, onPlayerIdChange, onPlayerNameChange, onConn
           <div className={styles.gameHeaderInfo}>
             <h2>Room: {gameState.id}</h2>
             <div className={styles.playerList}>
-              {gameState.players.map((player, index) => (
-                <div
-                  key={player.id}
-                  className={`${styles.playerInfo} ${index === gameState.currentPlayerIndex ? styles.active : ''}`}
-                >
-                  <span>{getDisplayName(player)}</span>
-                  {gameState.gamePhase === 'ended' && (
-                    <span className={styles.score}>Score: {player.score}</span>
-                  )}
-                </div>
-              ))}
+              {gameState.players.map((player, index) => {
+                const isActivePlayer = index === gameState.currentPlayerIndex && gameState.gamePhase === 'playing'
+                return (
+                  <div
+                    key={player.id}
+                    className={`${styles.playerInfo} ${isActivePlayer ? styles.active : ''}`}
+                  >
+                    <span>{getDisplayName(player)}</span>
+                    {isActivePlayer && player.id !== playerId && (
+                      <span className={styles.turnLabel}>their turn</span>
+                    )}
+                    {isActivePlayer && player.id === playerId && (
+                      <span className={styles.turnLabel}>your turn</span>
+                    )}
+                    {gameState.gamePhase === 'ended' && (
+                      <span className={styles.score}>Score: {player.score}</span>
+                    )}
+                  </div>
+                )
+              })}
             </div>
           </div>
           {currentGamePermalink && (
@@ -541,12 +551,16 @@ const GolfGame = ({ onGameIdChange, onPlayerIdChange, onPlayerNameChange, onConn
                 )}
               </div>
 
-              {gameState.drawnCard && isMyTurn && (
-                <div className={styles.pile}>
-                  <h3>Drawn Card</h3>
-                  {renderCard(gameState.drawnCard, -2, true, false)}
-                </div>
-              )}
+              <div className={styles.pile}>
+                <h3>{gameState.drawnCard && isMyTurn ? 'Drawn Card' : '\u00A0'}</h3>
+                {gameState.drawnCard && isMyTurn ? (
+                  <div className={styles.drawnCardWrapper}>
+                    {renderCard(gameState.drawnCard, -2, true, false)}
+                  </div>
+                ) : (
+                  <div className={styles.emptyPileReserved} />
+                )}
+              </div>
             </div>
           </div>
 
@@ -573,7 +587,11 @@ const GolfGame = ({ onGameIdChange, onPlayerIdChange, onPlayerNameChange, onConn
                   </>
                 ) : (
                   <>
-                    <button onClick={swapCard} className={styles.actionButton}>
+                    <button
+                      onClick={swapCard}
+                      className={`${styles.actionButton} ${selectedCardIndex === null ? styles.actionButtonDisabled : ''}`}
+                      disabled={selectedCardIndex === null}
+                    >
                       Swap Card
                     </button>
                     <button onClick={discardDrawn} className={styles.actionButton}>
diff --git a/src/plugins/__tests__/golfNetworkPlugin.auth.test.ts b/src/plugins/__tests__/golfNetworkPlugin.auth.test.ts
new file mode 100644
index 0000000..d1d38d9
--- /dev/null
+++ b/src/plugins/__tests__/golfNetworkPlugin.auth.test.ts
@@ -0,0 +1,276 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { GolfNetworkPlugin } from '../golfNetworkPlugin'
+import type { NetworkContext } from '@/types/network'
+
+// Mock localStorage
+const localStorageMock = (() => {
+  let store: Record<string, string> = {}
+
+  return {
+    getItem: (key: string) => store[key] || null,
+    setItem: (key: string, value: string) => {
+      store[key] = value
+    },
+    removeItem: (key: string) => {
+      delete store[key]
+    },
+    clear: () => {
+      store = {}
+    }
+  }
+})()
+
+Object.defineProperty(globalThis, 'localStorage', {
+  value: localStorageMock
+})
+
+describe('GolfNetworkPlugin - Authentication', () => {
+  let plugin: GolfNetworkPlugin
+  let mockContext: NetworkContext
+  let sentMessages: unknown[]
+
+  beforeEach(() => {
+    // Clear localStorage
+    localStorageMock.clear()
+
+    // Reset sent messages
+    sentMessages = []
+
+    // Create mock context
+    mockContext = {
+      send: vi.fn((msg) => {
+        sentMessages.push(msg)
+      }),
+      broadcast: vi.fn(),
+      getConnectionId: vi.fn(() => 'test-connection'),
+      getGameState: vi.fn(() => ({
+        playerId: null,
+        gameState: null,
+        roomState: null,
+        gameContext: null,
+        isInLobby: true
+      })) as NetworkContext['getGameState'],
+      updateGameState: vi.fn(),
+      isConnected: vi.fn(() => true)
+    }
+
+    // Create plugin with callbacks
+    plugin = new GolfNetworkPlugin({
+      onRoomJoined: vi.fn(),
+      onGameJoined: vi.fn(),
+      onGameStateUpdate: vi.fn(),
+      onRoomStateUpdate: vi.fn(),
+      onNotification: vi.fn(),
+      onGameEnded: vi.fn(),
+      onNewGameStarted: vi.fn()
+    })
+  })
+
+  describe('onConnect', () => {
+    it('should send authenticate message with empty token for new session', () => {
+      // Call onConnect
+      plugin.onConnect(mockContext)
+
+      // Verify authenticate message was sent
+      expect(sentMessages).toHaveLength(1)
+      expect(sentMessages[0]).toMatchObject({
+        type: 'authenticate',
+        sessionToken: ''
+      })
+    })
+
+    it('should send authenticate message with stored token for reconnection', () => {
+      // Store a token in localStorage
+      const storedToken = 'test-session-token-12345'
+      localStorage.setItem('golf_session_token', storedToken)
+
+      // Call onConnect
+      plugin.onConnect(mockContext)
+
+      // Verify authenticate message was sent with stored token
+      expect(sentMessages).toHaveLength(1)
+      expect(sentMessages[0]).toMatchObject({
+        type: 'authenticate',
+        sessionToken: storedToken
+      })
+    })
+  })
+
+  describe('handleAuthenticated', () => {
+    it('should store session token from authenticated message', () => {
+      const handlers = plugin.getMessageHandlers()
+      const authenticatedHandler = handlers['authenticated']
+
+      // Simulate authenticated message
+      const message = {
+        type: 'authenticated',
+        sessionToken: 'new-token-67890',
+        reconnected: false,
+        timestamp: Date.now()
+      }
+
+      authenticatedHandler(message, mockContext)
+
+      // Verify token was stored
+      const storedToken = localStorage.getItem('golf_session_token')
+      expect(storedToken).toBe('new-token-67890')
+    })
+
+    it('should handle reconnection flag', () => {
+      const handlers = plugin.getMessageHandlers()
+      const authenticatedHandler = handlers['authenticated']
+
+      // Simulate reconnected session
+      const message = {
+        type: 'authenticated',
+        sessionToken: 'existing-token-abc',
+        reconnected: true,
+        timestamp: Date.now()
+      }
+
+      authenticatedHandler(message, mockContext)
+
+      // Verify token was stored
+      const storedToken = localStorage.getItem('golf_session_token')
+      expect(storedToken).toBe('existing-token-abc')
+    })
+  })
+
+  describe('error handling', () => {
+    it('should clear session token on authentication error', () => {
+      // Store a token first
+      localStorage.setItem('golf_session_token', 'invalid-token')
+
+      const handlers = plugin.getMessageHandlers()
+      const errorHandler = handlers['error']
+
+      // Simulate authentication error
+      const errorMessage = {
+        type: 'error',
+        message: 'Invalid session token',
+        timestamp: Date.now()
+      }
+
+      errorHandler(errorMessage, mockContext)
+
+      // Verify token was cleared
+      const storedToken = localStorage.getItem('golf_session_token')
+      expect(storedToken).toBeNull()
+    })
+
+    it('should clear session token on unauthenticated error', () => {
+      // Store a token first
+      localStorage.setItem('golf_session_token', 'expired-token')
+
+      const handlers = plugin.getMessageHandlers()
+      const errorHandler = handlers['error']
+
+      // Simulate unauthenticated error
+      const errorMessage = {
+        type: 'error',
+        message: 'Unauthenticated: please authenticate first',
+        timestamp: Date.now()
+      }
+
+      errorHandler(errorMessage, mockContext)
+
+      // Verify token was cleared
+      const storedToken = localStorage.getItem('golf_session_token')
+      expect(storedToken).toBeNull()
+    })
+
+    it('should not clear session token on non-auth errors', () => {
+      // Store a token first
+      localStorage.setItem('golf_session_token', 'valid-token')
+
+      const handlers = plugin.getMessageHandlers()
+      const errorHandler = handlers['error']
+
+      // Simulate non-authentication error
+      const errorMessage = {
+        type: 'error',
+        message: 'Room not found',
+        timestamp: Date.now()
+      }
+
+      errorHandler(errorMessage, mockContext)
+
+      // Verify token was NOT cleared
+      const storedToken = localStorage.getItem('golf_session_token')
+      expect(storedToken).toBe('valid-token')
+    })
+  })
+
+  describe('full authentication flow', () => {
+    it('should complete new session flow', () => {
+      // 1. Connect (no stored token)
+      plugin.onConnect(mockContext)
+
+      // Verify authenticate was sent with empty token
+      expect(sentMessages).toHaveLength(1)
+      expect(sentMessages[0]).toMatchObject({
+        type: 'authenticate',
+        sessionToken: ''
+      })
+
+      // 2. Receive authenticated response
+      const handlers = plugin.getMessageHandlers()
+      const authenticatedHandler = handlers['authenticated']
+
+      const authResponse = {
+        type: 'authenticated',
+        sessionToken: 'new-session-abc123',
+        reconnected: false,
+        timestamp: Date.now()
+      }
+
+      authenticatedHandler(authResponse, mockContext)
+
+      // Verify token was stored
+      expect(localStorage.getItem('golf_session_token')).toBe('new-session-abc123')
+    })
+
+    it('should complete reconnection flow', () => {
+      // 1. Store token from previous session
+      localStorage.setItem('golf_session_token', 'existing-session-xyz789')
+
+      // 2. Reconnect
+      plugin.onConnect(mockContext)
+
+      // Verify authenticate was sent with stored token
+      expect(sentMessages).toHaveLength(1)
+      expect(sentMessages[0]).toMatchObject({
+        type: 'authenticate',
+        sessionToken: 'existing-session-xyz789'
+      })
+
+      // 3. Receive reconnected response
+      const handlers = plugin.getMessageHandlers()
+      const authenticatedHandler = handlers['authenticated']
+
+      const authResponse = {
+        type: 'authenticated',
+        sessionToken: 'existing-session-xyz789',
+        reconnected: true,
+        timestamp: Date.now()
+      }
+
+      authenticatedHandler(authResponse, mockContext)
+
+      // Verify token is still stored
+      expect(localStorage.getItem('golf_session_token')).toBe('existing-session-xyz789')
+    })
+  })
+
+  describe('message validation', () => {
+    it('should accept authenticated message type', () => {
+      const message = {
+        type: 'authenticated',
+        sessionToken: 'test',
+        timestamp: Date.now()
+      }
+
+      expect(plugin.validateMessage(message)).toBe(true)
+    })
+  })
+})