diff --git a/package.json b/package.json
index fcd1cd9..ec33768 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mancala-frontend",
-  "version": "0.1.3-beta.5",
+  "version": "0.1.3-beta.6",
   "description": "",
   "main": "index.js",
   "scripts": {
diff --git a/src/components/BoardView.tsx b/src/components/BoardView.tsx
index a64cf3f..38c7cda 100644
--- a/src/components/BoardView.tsx
+++ b/src/components/BoardView.tsx
@@ -14,6 +14,7 @@ const BallView: FunctionComponent<{ color: string }> = ({ color }) => {
         width: "1vw",
         height: "1vw",
         borderRadius: "10vw",
+        transition: "background-color 0.5s",
       }}
     ></div>
   );
@@ -43,6 +44,7 @@ const HoleView: FunctionComponent<{
         margin: "5px",
         padding: "5px",
         borderRadius: "10vw",
+        transition: "background-color 0.5s",
         display: "flex",
         alignItems: "center",
         alignContent: "center",
@@ -138,6 +140,7 @@ const BoardView: FunctionComponent<{
         gridTemplateColumns: "repeat(8, 11vw)",
         gridTemplateRows: "repeat(2, 11vw)",
         borderRadius: "3vw",
+        transition: "background-color 0.5s",
         background: isUserTurn
           ? theme.boardColor
           : theme.boardColorWhenPlayerTurn,