diff --git a/docker-compose.yml b/docker-compose.yml
index f0dbbdb..614dd13 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -27,9 +27,10 @@ services:
       - 'traefik.http.routers.youtubepedia.entrypoints=websecure'
       - 'traefik.http.routers.youtubepedia.tls.certresolver=letsencrypt'
       - 'traefik.http.services.youtubepedia.loadbalancer.server.port=3000'
-      - 'traefik.http.middlewares.sio.headers.customrequestheaders.Upgrade=websocket'
-      - 'traefik.http.middlewares.sio.headers.customrequestheaders.Connection=Upgrade'
-      - 'traefik.http.routers.youtubepedia.middlewares=sio@docker'
+      # Updated WebSocket middleware configuration
+      - 'traefik.http.middlewares.youtubepedia-ws.headers.customrequestheaders.Upgrade=websocket'
+      - 'traefik.http.middlewares.youtubepedia-ws.headers.customrequestheaders.Connection=Upgrade'
+      - 'traefik.http.routers.youtubepedia.middlewares=youtubepedia-ws'
 
 networks:
   proxy:
diff --git a/src/lib/server/socket.ts b/src/lib/server/socket.ts
index 6b90ac5..690c42d 100644
--- a/src/lib/server/socket.ts
+++ b/src/lib/server/socket.ts
@@ -17,7 +17,10 @@ export const initSocketIO = (httpServer: HTTPServer): Promise<Server> => {
 						methods: ['GET', 'POST'],
 						credentials: true
 					},
-					transports: ['websocket', 'polling']
+					transports: ['websocket', 'polling'],
+					// Add ping timeout and interval settings
+					pingTimeout: 60000,
+					pingInterval: 25000
 				});
 
 				io.on('connection', (socket) => {
@@ -29,8 +32,13 @@ export const initSocketIO = (httpServer: HTTPServer): Promise<Server> => {
 						console.log(`User ${userId} joined their room`);
 					}
 
-					socket.on('disconnect', () => {
-						console.log('Client disconnected', socket.id);
+					// Add error handling
+					socket.on('error', (error) => {
+						console.error('Socket error:', error);
+					});
+
+					socket.on('disconnect', (reason) => {
+						console.log(`Client disconnected (${reason})`, socket.id);
 					});
 				});
 
diff --git a/src/lib/socket.ts b/src/lib/socket.ts
index 3a70b57..34fa8c1 100644
--- a/src/lib/socket.ts
+++ b/src/lib/socket.ts
@@ -3,13 +3,19 @@ import { io, type Socket } from 'socket.io-client';
 
 export const initSocket = (userId: string): Socket | null => {
 	if (browser) {
-		const socketUrl = `${window.location.protocol}//${window.location.hostname}:3001`;
+		// Determine the socket URL based on the current environment
+		const socketUrl = browser
+			? // In production, use the same origin as the web app
+				window.location.origin
+			: // In development, use explicit port
+				`${window.location.protocol}//${window.location.hostname}:3001`;
 
 		const socket = io(socketUrl, {
 			auth: { userId },
 			reconnection: true,
 			reconnectionDelay: 1000,
-			reconnectionAttempts: 5
+			reconnectionAttempts: 5,
+			path: '/socket.io' // Explicitly set the socket.io path
 		});
 
 		socket.on('connect', () => {
@@ -17,7 +23,15 @@ export const initSocket = (userId: string): Socket | null => {
 		});
 
 		socket.on('connect_error', (error) => {
-			console.error('Socket connection error:', error);
+			console.error('Socket connection error:', error.message);
+			// Add more detailed error logging
+			if (error instanceof Error) {
+				console.error('Error details:', {
+					message: error.message,
+					name: error.name,
+					stack: error.stack
+				});
+			}
 		});
 
 		return socket;