diff --git a/apps/frontend/src/components/board/BoardView.tsx b/apps/frontend/src/components/board/BoardView.tsx
index e6ec78c..76b509d 100644
--- a/apps/frontend/src/components/board/BoardView.tsx
+++ b/apps/frontend/src/components/board/BoardView.tsx
@@ -19,7 +19,7 @@ const BoardView: FunctionComponent<{
   const theme = context.themeManager.theme;
 
   const createPitView = (key: any, pit: Pit, pitViewModel: PitViewModel) => {
-    return <PitView key={key} pitViewModel={pitViewModel} onClick={() => onPitSelect(pit.index, pit)} />;
+    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]));
 
diff --git a/apps/frontend/src/components/board/PitView.tsx b/apps/frontend/src/components/board/PitView.tsx
index b2a3398..71c4fc4 100644
--- a/apps/frontend/src/components/board/PitView.tsx
+++ b/apps/frontend/src/components/board/PitView.tsx
@@ -1,5 +1,7 @@
 import * as React from "react";
 import { FunctionComponent } from "react";
+import { getColorByBrightness } from "@mancala/core";
+import { Context } from "../../context/context";
 import Util from "../../util/Util";
 import { PitViewModel } from "@mancala/core";
 import StoneView from "./StoneView";
@@ -7,7 +9,13 @@ import StoneView from "./StoneView";
 const PitView: FunctionComponent<{
     pitViewModel: PitViewModel;
     onClick: () => void;
-}> = ({ pitViewModel, onClick }) => {
+    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} />
     ));
@@ -15,6 +23,7 @@ const PitView: FunctionComponent<{
     return (
         <div className="pit" onClick={onClick} style={{ background: pitViewModel.pitColor }}>
             {stones}
+            <span className="stone-count">{pitViewModel.stoneCount}</span>
             <style jsx>{`
                 .pit {
                     margin: 5px;
@@ -27,6 +36,19 @@ const PitView: FunctionComponent<{
                     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};
+
+                    pointer-events: none;
                 }
             `}</style>
         </div>
diff --git a/apps/frontend/yarn.lock b/apps/frontend/yarn.lock
index 26f1fdb..f71f220 100644
--- a/apps/frontend/yarn.lock
+++ b/apps/frontend/yarn.lock
@@ -2019,10 +2019,10 @@ uuid@^10.0.0:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-10.0.0.tgz#5a95aa454e6e002725c79055fd42aaba30ca6294"
   integrity sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==
 
-uuid@^8.3.2:
-  version "8.3.2"
-  resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
-  integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
+uuid@^11.0.3:
+  version "11.1.1"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-11.1.1.tgz#f6d81d2e1c65d00762e5e29b16c5d2d995e208ad"
+  integrity sha512-vIYxrBCC/N/K+Js3qSN88go7kIfNPssr/hHCesKCQNAjmgvYS2oqr69kIufEG+O4+PfezOH4EbIeHCfFov8ZgQ==
 
 v8-compile-cache@^2.0.0:
   version "2.3.0"