diff --git a/src/Home.tsx b/src/Home.tsx
index 10ec01a..d80f116 100644
--- a/src/Home.tsx
+++ b/src/Home.tsx
@@ -22,6 +22,7 @@ import { Menu, MenuButton, MenuItem } from "@szhsin/react-menu";
 import "@szhsin/react-menu/dist/index.css";
 import "@szhsin/react-menu/dist/transitions/slide.css";
 import { getColorByLuminance } from "./util/ColorUtil";
+import { Theme } from "./theme/Theme";
 
 type ConnectionState = "connecting" | "error" | "connected" | "reconnecting";
 
@@ -45,6 +46,8 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
 
   const [pitAnimator, setPitAnimator] = useState<PitAnimator>();
 
+  const [theme, setTheme] = useState<Theme | undefined>(undefined);
+
   const onConnectionDone = () => {
     setConnetionState("connected");
   };
@@ -111,6 +114,7 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
   };
 
   React.useEffect(() => {
+    setTheme(context.themeManager.theme);
     const pitAnimator = new PitAnimator(context, updateBoardViewModel);
     setPitAnimator(pitAnimator);
     listenMessages(pitAnimator);
@@ -121,8 +125,9 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
   }, []);
 
   React.useEffect(() => {
-    context.themeManager.onThemeChange = () => {
-      updateBoardViewModel(pitAnimator.getBoardViewModelFromGame(game));
+    context.themeManager.onThemeChange = (theme) => {
+      setTheme(theme);
+      pitAnimator && updateBoardViewModel(pitAnimator.getBoardViewModelFromGame(game));
     };
   }, [boardViewModel]);
 
@@ -206,7 +211,7 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
         display: "flex",
         flexDirection: "column",
         alignItems: "center",
-        background: context.themeManager.theme.background,
+        background: theme?.background,
         flex: "1",
       }}
     >