diff --git a/src/MancalaApp.tsx b/src/MancalaApp.tsx
index ba62f58..03b46a4 100644
--- a/src/MancalaApp.tsx
+++ b/src/MancalaApp.tsx
@@ -90,7 +90,7 @@ const MancalaApp: FunctionComponent = () => {
                 </Routes>
             </BrowserRouter>
             <FloatingPanel context={context} color={floatingPanelColor} visible={showConnectionState}>
-                <span style={{ color: textColorOnBoard }}>{connectionStateText()}</span>
+                <span style={{ color: textColorOnBoard, transition: 'color 0.5s;' }}>{connectionStateText()}</span>
             </FloatingPanel>
         </>
     );
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 6c09a2c..48c79c8 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -18,7 +18,7 @@ const Button: FunctionComponent<{
     <button
       onClick={onClick}
       style={{
-        background: color,
+        backgroundColor: color,
         color: textColor,
       }}
     >
@@ -28,6 +28,8 @@ const Button: FunctionComponent<{
           padding: 10px;
           border: none;
           border-radius: 30px;
+          transition: color 0.5s; 
+          transition: background-color 0.5s; 
         }
       `}</style>
       {text}
diff --git a/src/components/CircularPanel.tsx b/src/components/CircularPanel.tsx
index 83d7dec..44ce01b 100644
--- a/src/components/CircularPanel.tsx
+++ b/src/components/CircularPanel.tsx
@@ -11,6 +11,7 @@ const CircularPanel: FunctionComponent<{
             div {
               padding: 10px 20px;
               border-radius: 30px;
+              transition: background-color 0.5s;
             }
           `}
       </style>
diff --git a/src/components/InfoPanel.tsx b/src/components/InfoPanel.tsx
index 5ccbafc..59545fb 100644
--- a/src/components/InfoPanel.tsx
+++ b/src/components/InfoPanel.tsx
@@ -99,7 +99,7 @@ const InfoPanel: FunctionComponent<{
     if (text) {
       return (
         <CircularPanel style={style} color={containerColor}>
-          <h4 style={{ margin: "0", color: textColor }}>
+          <h4 style={{ margin: "0", color: textColor, transition: 'color 0.5s' }}>
             {text}
           </h4>
         </CircularPanel>
diff --git a/src/components/PageContainer.tsx b/src/components/PageContainer.tsx
index 82233f4..7d08f57 100644
--- a/src/components/PageContainer.tsx
+++ b/src/components/PageContainer.tsx
@@ -14,6 +14,7 @@ const PageContainer: FunctionComponent<{ theme: Theme }> = (props) => {
                     align-items: center;
                     flex: 1;
                     min-height: 400px;
+                    transition: background-color 0.5s;
                 }
             `}</style>
             {props.children}
diff --git a/src/components/UserStatus.tsx b/src/components/UserStatus.tsx
index 2a0489c..82882ff 100644
--- a/src/components/UserStatus.tsx
+++ b/src/components/UserStatus.tsx
@@ -22,7 +22,7 @@ const UserStatus: FunctionComponent<{
     );
     return (
         <div style={style} className={layoutMode === "right" ? "flex-rtl" : "flex-ltr"}>
-            <span style={{color: textColorOnBoard}} className='text'>{user.isAnonymous ? context.texts.Anonymous : user.name}</span>
+            <span style={{color: textColorOnBoard, transition: 'color 0.5s'}} className='text'>{user.isAnonymous ? context.texts.Anonymous : user.name}</span>
             <Space width='5px' />
             <div className={"circle " + (user.isOnline ? "online" : "offline")}></div>
             <style jsx>{`
@@ -39,6 +39,8 @@ const UserStatus: FunctionComponent<{
                     min-height: 15px;
                     border-radius: 15px;
                     border: 2px solid ${context.themeManager.theme.boardColor};
+                    transition: background-color 0.5s;
+                    transition: color 0.5s;
                 }
                 .flex-rtl {
                     display: flex;
diff --git a/src/components/board/StoreView.tsx b/src/components/board/StoreView.tsx
index 58f762e..db5dd3d 100644
--- a/src/components/board/StoreView.tsx
+++ b/src/components/board/StoreView.tsx
@@ -29,7 +29,7 @@ const StoreView: FunctionComponent<{
         gridRow: gridRow
       }}>
       {stones}
-      <span className="store-stone-count-text" style={{ color: textColor }}>
+      <span className="store-stone-count-text" style={{ color: textColor, transition: 'color 0.5s' }}>
         {stones.length}
       </span>
       <style jsx>{`
@@ -42,6 +42,7 @@ const StoreView: FunctionComponent<{
             align-content: center;
             flex-wrap: wrap;
             position: relative;
+            transition: background-color 0.5s;
           }
           .store-stone-count-text {
             position: absolute;
diff --git a/src/components/headerbar/HeaderBar.tsx b/src/components/headerbar/HeaderBar.tsx
index 826c4c2..683f8c2 100644
--- a/src/components/headerbar/HeaderBar.tsx
+++ b/src/components/headerbar/HeaderBar.tsx
@@ -13,6 +13,7 @@ const HeaderBar: FunctionComponent<{ color?: string }> = ({children, color }) =>
                 align-items: center;
                 justify-content: space-between;
                 align-self: stretch;
+                transition: background-color 0.5s;
             }
             `}</style>
         </div>)
diff --git a/src/components/headerbar/HeaderbarTitle.tsx b/src/components/headerbar/HeaderbarTitle.tsx
index 2da3039..25174e5 100644
--- a/src/components/headerbar/HeaderbarTitle.tsx
+++ b/src/components/headerbar/HeaderbarTitle.tsx
@@ -4,7 +4,7 @@ import { Context } from '../../context/context';
 
 const HeaderbarTitle: FunctionComponent<{ title: string, color: string }> = ({ title, color }) => {
     return (
-        <h1 style={{ color: color }} className="header-bar-title">
+        <h1 style={{ color: color, transition: 'color 0.5s' }} className="header-bar-title">
             {title}
             <style jsx>{`
             .header-bar-title {