diff --git a/cmd/chess-client-cli/exit_wasm.go b/cmd/chess-client-cli/exit_wasm.go
index 372b70d..85fd957 100644
--- a/cmd/chess-client-cli/exit_wasm.go
+++ b/cmd/chess-client-cli/exit_wasm.go
@@ -10,10 +10,13 @@ import (
 func handleExit() (restart bool) {
 	display.Println(display.Cyan, "Goodbye!")
 
-	display.Println(display.Yellow, "\n━━━━━━━━━━━━━━━━━━━━━━━━")
+	display.Println(display.Yellow, "\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━")
 	display.Println(display.Yellow, "Session ended.")
-	display.Println(display.Yellow, "Restarting the client.")
-	display.Println(display.Yellow, "━━━━━━━━━━━━━━━━━━━━━━━━\n")
+	display.Println(display.Yellow, "Restarting the client.\n")
+	display.Println(display.Yellow, "For a complete restart:")
+	display.Println(display.White, "• Refresh the page (F5 or Ctrl+R)")
+	display.Println(display.White, "• Or close and reopen this tab")
+	display.Println(display.Yellow, "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n")
 
 	return true
 }
\ No newline at end of file
diff --git a/internal/server/webserver/chess-client-web/style.css b/internal/server/webserver/chess-client-web/style.css
index b217d29..dbf4286 100644
--- a/internal/server/webserver/chess-client-web/style.css
+++ b/internal/server/webserver/chess-client-web/style.css
@@ -73,13 +73,13 @@ body {
 
 main {
     display: grid;
-    grid-template-columns: 1fr 340px;
-    gap: 2rem;
+    grid-template-columns: 1fr clamp(280px, 17.71vw, 340px);
+    gap: clamp(1rem, 2vw, 2rem);
     flex: 1;
     min-height: 0;
     overflow: hidden;
     height: 100%;
-    max-width: 980px;
+    max-width: clamp(800px, 51vw, 980px);
     margin: 0 auto;
     align-items: center;
 }
@@ -88,7 +88,7 @@ main {
     display: flex;
     align-items: center;
     justify-content: center;
-    min-width: 440px;
+    min-width: clamp(360px, 22.92vw, 440px);
     overflow: visible;
     height: 100%;
 }
@@ -97,16 +97,16 @@ main {
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 440px;
-    height: 440px;
-    padding: 20px;
+    width: clamp(360px, 22.92vw, 440px);
+    height: clamp(360px, 22.92vw, 440px);
+    padding: clamp(16px, 1.04vw, 20px);
     position: relative;
 }
 
 .board-wrapper {
     position: relative;
-    width: 400px;
-    height: 400px;
+    width: clamp(328px, 20.83vw, 400px);
+    height: clamp(328px, 20.83vw, 400px);
     margin: 0;
 }
 
@@ -269,13 +269,13 @@ main {
 .info-panel {
     background: var(--host-bg);
     border-radius: 8px;
-    padding: 1rem;
+    padding: clamp(0.75rem, 0.83vw, 1rem);
     display: flex;
     flex-direction: column;
-    gap: 1rem;
+    gap: clamp(0.75rem, 0.83vw, 1rem);
     overflow: hidden;
-    width: 340px;
-    height: 440px;
+    width: clamp(280px, 17.71vw, 340px);
+    height: clamp(360px, 22.92vw, 440px);
     align-self: center;
 }
 
@@ -651,9 +651,9 @@ input[type="range"]::-webkit-slider-thumb {
     }
 
     .board-container {
-        width: 440px;
-        height: 440px;
-        padding: 20px;
+        width: clamp(360px, 45vw, 440px);
+        height: clamp(360px, 45vw, 440px);
+        padding: clamp(16px, 2.04vw, 20px);
         display: flex;
         align-items: center;
         justify-content: center;
@@ -662,8 +662,8 @@ input[type="range"]::-webkit-slider-thumb {
     }
 
     .board-wrapper {
-        width: 400px;
-        height: 400px;
+        width: clamp(328px, 41vw, 400px);
+        height: clamp(328px, 41vw, 400px);
         position: relative;
         margin: 0;
     }
@@ -689,13 +689,13 @@ input[type="range"]::-webkit-slider-thumb {
     }
 
     .info-panel {
-        width: 440px;
-        height: 200px;
+        width: clamp(360px, 45vw, 440px);
+        height: clamp(180px, 20.4vw, 200px);
         display: grid;
-        grid-template-columns: 180px 1fr;
+        grid-template-columns: clamp(150px, 18.4vw, 180px) 1fr;
         grid-template-rows: min-content min-content 1fr;
         gap: 0.5rem 1rem;
-        padding: 1rem;
+        padding: clamp(0.75rem, 1.02vw, 1rem);
         align-self: center;
         overflow: hidden;
         flex-shrink: 0;
@@ -763,12 +763,12 @@ input[type="range"]::-webkit-slider-thumb {
     body {
         overflow-y: auto;
         overflow-x: auto;
-        min-width: 530px;
+        min-width: clamp(440px, 100vw, 530px);
     }
 
     .outer-container {
-        width: 530px;
-        min-width: 530px;
+        width: clamp(440px, 100vw, 530px);
+        min-width: clamp(440px, 100vw, 530px);
         padding: 8px;
         min-height: 100vh;
         height: auto;
@@ -779,8 +779,8 @@ input[type="range"]::-webkit-slider-thumb {
     }
 
     .container {
-        width: 514px;
-        min-width: 514px;
+        width: calc(100% - 16px);
+        min-width: clamp(424px, calc(100vw - 16px), 514px);
         border-radius: 12px;
         min-height: calc(100vh - 16px);
         height: auto;
@@ -794,7 +794,7 @@ input[type="range"]::-webkit-slider-thumb {
 
     .board-container,
     .info-panel {
-        width: 440px;
-        min-width: 440px;
+        width: clamp(360px, 83vw, 440px);
+        min-width: clamp(360px, 83vw, 440px);
     }
 }
\ No newline at end of file