diff --git a/frontend/.env.example b/frontend/.env.example
new file mode 100644
index 0000000..64f120c
--- /dev/null
+++ b/frontend/.env.example
@@ -0,0 +1,11 @@
+# Frontend Environment Variables
+
+# API Base URL (optional)
+# - For local development: leave empty or don't set (will use /api)
+# - For production with separate backend: set to full URL
+# Example: https://api.yourdomain.com/api
+VITE_API_BASE_URL=
+
+# Note: When set, this URL is also used for WebSocket connections
+# http:// will be converted to ws://
+# https:// will be converted to wss://
diff --git a/frontend/src/hooks/useWebSocket.ts b/frontend/src/hooks/useWebSocket.ts
index 6064d74..5db8b09 100644
--- a/frontend/src/hooks/useWebSocket.ts
+++ b/frontend/src/hooks/useWebSocket.ts
@@ -47,8 +47,19 @@ export function useWebSocket(roomId: string | null, options?: UseWebSocketOption
       wsRef.current.close()
     }
 
-    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
-    const wsUrl = `${protocol}//${window.location.host}/api/ws/${roomId}?token=${token}`
+    // Build WebSocket URL - use env variable or default to current host
+    const apiBaseUrl = import.meta.env.VITE_API_BASE_URL
+    let wsUrl: string
+
+    if (apiBaseUrl && apiBaseUrl.startsWith('http')) {
+      // Convert http(s) to ws(s)
+      const wsBase = apiBaseUrl.replace(/^http/, 'ws')
+      wsUrl = `${wsBase}/ws/${roomId}?token=${token}`
+    } else {
+      // Default: use current host
+      const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
+      wsUrl = `${protocol}//${window.location.host}/api/ws/${roomId}?token=${token}`
+    }
 
     setConnectionStatus('connecting')
     const ws = new WebSocket(wsUrl)
diff --git a/frontend/src/services/api.ts b/frontend/src/services/api.ts
index 26cb717..5f07f56 100644
--- a/frontend/src/services/api.ts
+++ b/frontend/src/services/api.ts
@@ -1,6 +1,7 @@
 import axios, { type AxiosError, type InternalAxiosRequestConfig } from 'axios'
 
-const API_BASE_URL = '/api'
+// API Base URL: use environment variable or default to relative path
+const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || '/api'
 
 // Create axios instance
 const api = axios.create({