diff --git a/apps/frontend/src/components/board/BoardView.tsx b/apps/frontend/src/components/board/BoardView.tsx
index 76b509d..630d05e 100644
--- a/apps/frontend/src/components/board/BoardView.tsx
+++ b/apps/frontend/src/components/board/BoardView.tsx
@@ -14,14 +14,25 @@ const BoardView: FunctionComponent<{
   boardViewModel: BoardViewModel;
   revert: boolean;
   onPitSelect: (index: number, pit: Pit) => void;
-}> = ({ game, context, boardId, boardViewModel, revert, onPitSelect: onPitSelect }) => {
+}> = ({ game, context, boardId, boardViewModel, revert, onPitSelect }) => {
   const mancalaGame = game?.mancalaGame;
   const theme = context.themeManager.theme;
 
-  const createPitView = (key: any, pit: Pit, pitViewModel: PitViewModel) => {
-    return <PitView key={key} pitViewModel={pitViewModel} onClick={() => onPitSelect(pit.index, pit)} context={context} />;
-  };
-  const createPitViewList = (pits: Pit[]) => pits.map((pit, index) => createPitView(index, pit, boardViewModel.pits[pit.index]));
+  // Compute pit width based on viewport (each column is 11vw)
+  const pitWidth = typeof window !== "undefined" ? window.innerWidth * 0.11 : 100;
+
+  const createPitView = (key: any, pit: Pit, pitViewModel: PitViewModel) => (
+    <PitView
+      key={key}
+      pitViewModel={pitViewModel}
+      context={context}
+      onClick={() => onPitSelect(pit.index, pit)}
+      fontSize={pitWidth / 6}
+    />
+  );
+
+  const createPitViewList = (pits: Pit[]) =>
+    pits.map((pit, index) => createPitView(index, pit, boardViewModel.pits[pit.index]));
 
   const player1Pits = createPitViewList(mancalaGame?.board.player1Pits);
   const player2Pits = createPitViewList(mancalaGame?.board.player2Pits);
@@ -29,6 +40,7 @@ const BoardView: FunctionComponent<{
   const player2BankIndex = mancalaGame?.board.player2BankIndex();
   const player1BankViewModel = boardViewModel.pits[player1BankIndex];
   const player2BankViewModel = boardViewModel.pits[player2BankIndex];
+
   return (
     <div className="board" style={{ background: theme.boardColor }}>
       <StoreView
@@ -36,12 +48,14 @@ const BoardView: FunctionComponent<{
         pitViewModel={revert ? player2BankViewModel : player1BankViewModel}
         gridColumn="8 / 9"
         gridRow="1 / 3"
+        fontSize={pitWidth / 6}
       />
       <StoreView
         context={context}
         pitViewModel={revert ? player1BankViewModel : player2BankViewModel}
         gridColumn="1 / 2"
         gridRow="1 / 3"
+        fontSize={pitWidth / 6}
       />
       {revert ? player1Pits?.reverse() : player2Pits?.reverse()}
       {revert ? player2Pits : player1Pits}
diff --git a/apps/frontend/src/components/board/PitView.tsx b/apps/frontend/src/components/board/PitView.tsx
index 71c4fc4..052e9c4 100644
--- a/apps/frontend/src/components/board/PitView.tsx
+++ b/apps/frontend/src/components/board/PitView.tsx
@@ -1,58 +1,83 @@
 import * as React from "react";
 import { FunctionComponent } from "react";
-import { getColorByBrightness } from "@mancala/core";
+import { getColorByBrightness, PitViewModel } from "@mancala/core";
 import { Context } from "../../context/context";
 import Util from "../../util/Util";
-import { PitViewModel } from "@mancala/core";
 import StoneView from "./StoneView";
 
-const PitView: FunctionComponent<{
-    pitViewModel: PitViewModel;
-    onClick: () => void;
-    context: Context;
-}> = ({ pitViewModel, onClick, context }) => {
-    const textColor = getColorByBrightness(
-        pitViewModel.pitColor,
-        context.themeManager.theme.textColor,
-        context.themeManager.theme.textLightColor
-    );
-    const stones = [...Util.range(pitViewModel.stoneCount)].map((i, index) => (
-        <StoneView key={index} color={pitViewModel.stoneColor} />
-    ));
+interface PitViewProps {
+  pitViewModel: PitViewModel;
+  context: Context;
+  onClick: () => void;
+  fontSize: number;
+}
 
-    return (
-        <div className="pit" onClick={onClick} style={{ background: pitViewModel.pitColor }}>
-            {stones}
-            <span className="stone-count">{pitViewModel.stoneCount}</span>
-            <style jsx>{`
-                .pit {
-                    margin: 5px;
-                    padding: 5px;
-                    border-radius: 10vw;
-                    transition: background-color 0.5s;
-                    display: flex;
-                    align-items: center;
-                    align-content: center;
-                    justify-content: center;
-                    justify-items: center;
-                    flex-wrap: wrap;
-                    position: relative;
-                }
-                .stone-count {
-                    position: absolute;
-                    bottom: 1.0vw;
-                    left: 50%;
-                    transform: translateX(-50%);
-                    font-family: monospace;
-                    font-size: 1.5vw;
-                    font-weight: bold;
-                    color: ${textColor};
+const PitView: FunctionComponent<PitViewProps> = ({ pitViewModel, context, onClick, fontSize }) => {
+  const textColor = getColorByBrightness(
+    pitViewModel.pitColor,
+    context.themeManager.theme.textColor,
+    context.themeManager.theme.textLightColor
+  );
 
-                    pointer-events: none;
-                }
-            `}</style>
-        </div>
-    );
+  const stones = [...Util.range(pitViewModel.stoneCount)].map((i, index) => (
+    <StoneView key={index} color={pitViewModel.stoneColor} />
+  ));
+
+  return (
+    <div
+      className="pit"
+      onClick={onClick}
+      style={{
+        background: pitViewModel.pitColor,
+        position: "relative",
+      }}
+    >
+      {stones}
+      {pitViewModel.stoneCount > 0 && (
+        <span
+          className="stone-count"
+          style={{
+            color: textColor,
+            position: "absolute",
+            bottom: fontSize / 2,
+            left: "50%",
+            transform: "translateX(-50%)",
+            fontFamily: "monospace",
+            fontWeight: "bold",
+            fontSize: fontSize,
+            pointerEvents: "none",
+          }}
+        >
+          {pitViewModel.stoneCount}
+        </span>
+      )}
+      <style jsx>{`
+        .pit {
+          margin: 5px;
+          padding: 5px;
+          border-radius: 10vw;
+          transition: background-color 0.5s;
+          display: flex;
+          align-items: center;
+          align-content: center;
+          justify-content: center;
+          justify-items: center;
+          flex-wrap: wrap;
+          position: relative;
+        }
+        .stone-count {
+          position: absolute;
+          bottom: 1.0vw;
+          left: 50%;
+          transform: translateX(-50%);
+          font-family: monospace;
+          font-size: 1.5vw;
+          font-weight: bold;
+          pointer-events: none;
+        }
+      `}</style>
+    </div>
+  );
 };
 
 export default PitView;
\ No newline at end of file
diff --git a/apps/mobile/src/components/board/BoardView.tsx b/apps/mobile/src/components/board/BoardView.tsx
index 54fb4e1..d42a00c 100644
--- a/apps/mobile/src/components/board/BoardView.tsx
+++ b/apps/mobile/src/components/board/BoardView.tsx
@@ -17,9 +17,9 @@ const BoardView: FunctionComponent<{
   boardViewModel: BoardViewModel;
   revert: boolean;
   onPitSelect: (index: number, pit: Pit) => void;
-}> = ({ game, context, boardId, boardViewModel, revert, onPitSelect: onPitSelect }) => {
+}> = ({ game, context, boardId, boardViewModel, revert, onPitSelect }) => {
   const windowWidth = Dimensions.get('window').width;
-  const windowHeight = Dimensions.get('window').height;
+  const windowHeight = Dimensions.get('window').height; // Currently unused but kept for potential future use
 
   const boardMargin = 0;
   const boardPadding = 10;
@@ -33,19 +33,22 @@ const BoardView: FunctionComponent<{
 
   const createPitView = (key: any, pit: Pit, pitViewModel: PitViewModel) => {
     const stones = [...Util.range(pitViewModel.stoneCount)].map((i, index) => (
-      <StoneView key={index} color={pitViewModel.stoneColor} style={{width: pitWidth / 10, height: pitWidth / 10}}/>
+      <StoneView key={index} color={pitViewModel.stoneColor} style={{ width: pitWidth / 10, height: pitWidth / 10 }} />
     ));
-    return <PitView 
-    key={key} 
-    pitViewModel={pitViewModel} 
-    onClick={() => onPitSelect(pit.index, pit)}
-    style={{width: pitWidth, height: pitWidth}} 
-    context={context}
-    fontSize={pitWidth / 5}
-  > 
-      {stones}
-    </PitView>;
+    return (
+      <PitView
+        key={key}
+        pitViewModel={pitViewModel}
+        context={context}
+        onClick={() => onPitSelect(pit.index, pit)}
+        style={{ width: pitWidth, height: pitWidth }}
+        fontSize={pitWidth / 5} // keep original divisor as per revert request
+      >
+        {stones}
+      </PitView>
+    );
   };
+
   const createPitViewList = (pits: Pit[]) => pits.map((pit, index) => createPitView(index, pit, boardViewModel.pits[pit.index]));
 
   const player1Pits = createPitViewList(mancalaGame?.board.player1Pits);
@@ -57,52 +60,60 @@ const BoardView: FunctionComponent<{
 
   const primaryStoreViewModel = revert ? player1BankViewModel : player2BankViewModel;
   const secondaryStoreViewModel = revert ? player2BankViewModel : player1BankViewModel;
+
   const stonesPrimaryStore = [...Util.range(primaryStoreViewModel.stoneCount)].map((i, index) => (
-    <StoneView key={index} color={primaryStoreViewModel.stoneColor} style={{width: pitWidth / 10, height: pitWidth / 10}}/>
+    <StoneView key={index} color={primaryStoreViewModel.stoneColor} style={{ width: pitWidth / 10, height: pitWidth / 10 }} />
   ));
+
   const stonesSecondaryStore = [...Util.range(secondaryStoreViewModel.stoneCount)].map((i, index) => (
-    <StoneView key={index} color={secondaryStoreViewModel.stoneColor} style={{width: pitWidth / 10, height: pitWidth / 10}} />
+    <StoneView key={index} color={secondaryStoreViewModel.stoneColor} style={{ width: pitWidth / 10, height: pitWidth / 10 }} />
   ));
 
   return (
-    <View style={{
-      backgroundColor: theme.boardColor,
-      padding: boardPadding,
-      borderRadius: 20,
-      flexDirection: "row",
-      gap: gap,
-      height: "auto",
-    }}>
+    <View
+      style={{
+        backgroundColor: theme.boardColor,
+        padding: boardPadding,
+        borderRadius: 20,
+        flexDirection: "row",
+        gap: gap,
+        height: "auto",
+      }}
+    >
       <StoreView
         context={context}
         pitViewModel={primaryStoreViewModel}
-        style={{width: pitWidth, height: pitWidth * 2 + gap}}
+        style={{ width: pitWidth, height: pitWidth * 2 + gap }}
         fontSize={pitWidth / 5}
       >
         {stonesPrimaryStore}
       </StoreView>
-      <View style={{flex: 6}}>
-        <View style={{
-          flexDirection: "row",
-          width: '100%',
-          flex: 1,
-          gap: gap
-        }}>
+      <View style={{ flex: 6 }}>
+        <View
+          style={{
+            flexDirection: "row",
+            width: "100%",
+            flex: 1,
+            gap: gap,
+          }}
+        >
           {revert ? player1Pits?.reverse() : player2Pits?.reverse()}
         </View>
-        <View style={{
-          flexDirection: "row",
-          width: '100%',
-          flex: 1,
-          gap: gap
-        }}>
+        <View
+          style={{
+            flexDirection: "row",
+            width: "100%",
+            flex: 1,
+            gap: gap,
+          }}
+        >
           {revert ? player2Pits : player1Pits}
         </View>
       </View>
       <StoreView
         context={context}
         pitViewModel={secondaryStoreViewModel}
-        style={{width: pitWidth, height: pitWidth * 2 + gap}}
+        style={{ width: pitWidth, height: pitWidth * 2 + gap }}
         fontSize={pitWidth / 5}
       >
         {stonesSecondaryStore}
diff --git a/apps/mobile/src/components/board/PitView.tsx b/apps/mobile/src/components/board/PitView.tsx
index 7a9c004..c4da6a4 100644
--- a/apps/mobile/src/components/board/PitView.tsx
+++ b/apps/mobile/src/components/board/PitView.tsx
@@ -3,55 +3,50 @@ import { FunctionComponent } from "react";
 import { PitViewModel, getColorByBrightness } from "@mancala/core";
 import { Context } from "../../context/context";
 import { Pressable, View, ViewStyle, Text } from "react-native";
+import Util from "../../util/Util";
+import StoneView from "./StoneView";
 
-const PitView: FunctionComponent<{
-    pitViewModel: PitViewModel;
-    context: Context;
-    onClick: () => void;
-    style: ViewStyle,
-    fontSize: number;
-    children: React.ReactNode
-}> = ({ pitViewModel, context, onClick, style, fontSize, children }) => {
-    const textColor = getColorByBrightness(
-        pitViewModel.pitColor,
-        context.themeManager.theme.textColor,
-        context.themeManager.theme.textLightColor
-    );
+interface PitViewProps {
+  pitViewModel: PitViewModel;
+  context: Context;
+  onClick: () => void;
+  style: ViewStyle;
+  fontSize: number;
+}
 
-    return (
-        <View style={[style, {
-            backgroundColor: pitViewModel.pitColor,
-            borderRadius: 100,
-            position: 'relative'
-        }]}>
-            <Pressable onPress={onClick} style={{
-                width: "100%",
-                height: "100%",
-                padding: 5,
-                display: 'flex',
-                alignItems: 'center',
-                alignContent: 'center',
-                justifyContent: 'center',
-                flexDirection: "row",
-                flexWrap: "wrap"
-            }}>
-                {children}
-            </Pressable>
-            {pitViewModel.stoneCount > 0 && (
-                <Text style={{
-                    color: textColor,
-                    position: 'absolute',
-                    bottom: fontSize / 2,
-                    alignSelf: 'center',
-                    fontFamily: 'monospace',
-                    fontWeight: 'bold',
-                    fontSize: fontSize
-                }}>
-                    {pitViewModel.stoneCount}
-                </Text>
-            )}
-        </View>
-    );
+const PitView: FunctionComponent<PitViewProps> = ({ pitViewModel, context, onClick, style, fontSize }) => {
+  const textColor = getColorByBrightness(
+    pitViewModel.pitColor,
+    context.themeManager.theme.textColor,
+    context.themeManager.theme.textLightColor
+  );
+
+  const stones = [...Util.range(pitViewModel.stoneCount)].map((i, index) => (
+    <StoneView key={index} color={pitViewModel.stoneColor} style={{ width: style.width ? style.width / 10 : 10, height: style.width ? style.width / 10 : 10 }} />
+  ));
+
+  return (
+    <View style={[style, { backgroundColor: pitViewModel.pitColor, borderRadius: 100, position: "relative" }] }>
+      <Pressable onPress={onClick} style={{ width: "100%", height: "100%", padding: 5, display: "flex", alignItems: "center", alignContent: "center", justifyContent: "center", flexDirection: "row", flexWrap: "wrap" }}>
+        {stones}
+      </Pressable>
+      {pitViewModel.stoneCount > 0 && (
+        <Text
+          style={{
+            color: textColor,
+            position: "absolute",
+            bottom: fontSize / 2,
+            alignSelf: "center",
+            fontFamily: "monospace",
+            fontWeight: "bold",
+            fontSize: fontSize,
+          }}
+        >
+          {pitViewModel.stoneCount}
+        </Text>
+      )}
+    </View>
+  );
 };
 
 export default PitView;
\ No newline at end of file