diff --git a/public/style.css b/public/style.css
index 163e8cc..b4d8862 100644
--- a/public/style.css
+++ b/public/style.css
@@ -104,8 +104,8 @@ body {
 
 #game-board {
   position: relative;
-  width: calc(14 * 30px);
-  height: calc(14 * 30px);
+  width: 82svw;
+  height: 82svw;
   background-color: var(--color-bg-tertiary);
   border: 2px solid var(--color-neutral-700);
 }
@@ -120,17 +120,17 @@ body {
   background-image:
     linear-gradient(to right, var(--color-neutral-400) 1px, transparent 1px),
     linear-gradient(to bottom, var(--color-neutral-400) 1px, transparent 1px);
-  background-size: 30px 30px;
+  background-size: 7.142857142857142% 7.142857142857142%;
   background-position: -1px -1px;
   pointer-events: none;
 }
 
 .intersection {
   position: absolute;
-  width: 30px;
-  height: 30px;
-  margin-left: -15px;
-  margin-top: -15px;
+  width: 6.6666666666%;
+  height: 6.6666666666%;
+  margin-left: -3.3333333333%;
+  margin-top: -3.3333333333%;
   display: flex;
   justify-content: center;
   align-items: center;
diff --git a/src/view/board-renderer.ts b/src/view/board-renderer.ts
index a847451..c473dd4 100644
--- a/src/view/board-renderer.ts
+++ b/src/view/board-renderer.ts
@@ -17,8 +17,8 @@ export function renderGameBoardHtml(
       }
 
       // Calculate top and left for absolute positioning, offset by half the intersection div size
-      const top = row * 30;
-      const left = col * 30;
+      const top = row * 7.142857142857142;
+      const left = col * 7.142857142857142;
 
       // HTMX attributes for making a move
       const wsAttrs = isPlayerToPlay && !stone ? `ws-send="click"` : '';
@@ -29,7 +29,7 @@ export function renderGameBoardHtml(
                     class="intersection" 
                     data-row="${row}" 
                     data-col="${col}"
-                    style="top: ${top}px; left: ${left}px;"
+                    style="top: ${top}%; left: ${left}%;"
                     ${wsAttrs}
                 >
                     ${stoneHtml}