diff --git a/web/src/App.tsx b/web/src/App.tsx
index 8bf0c8a..0d5f429 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -12,18 +12,13 @@ import Wallet from './wallet/Wallet';
 import useAccount from './wallet/useAccount';
 import Banner from './Banner';
 import Grid from '@material-ui/core/Grid';
-import CircularProgress from '@material-ui/core/CircularProgress';
 import GameTicker from './components/GameTicker';
 
 const config = envConfig();
 
 export const App: React.FC = () => {
   const [client, setClient] = useState<SecretJS.SigningCosmWasmClient | undefined>();
-  const [game, setGame] = useLocalStorage<Game.Game | null | undefined>(
-    'game',
-    undefined,
-    Game.defaults,
-  );
+  const [game, setGame] = useLocalStorage<Game.Game | undefined>('game', undefined, Game.defaults);
   const account = useAccount(client, game);
   const lowBalance = account && account.balance < 11;
   const { enqueueSnackbar } = useSnackbar();
@@ -59,7 +54,6 @@ export const App: React.FC = () => {
           />
         </GameTicker>
       )}
-      {game === null && <CircularProgress />}
       {game === undefined && client && (
         <Grid container direction="column" justify="center" alignItems="center" spacing={1}>
           <Grid item xs={12}>
@@ -110,17 +104,17 @@ const playGame = async (
   enqueueSnackbar: Function,
   locator?: string,
 ) => {
-  setGame(null, false);
-
   const game = Game.create(contract, privateGame, locator);
+  setGame(game);
   const method = privateGame ? 'private_game' : 'join_game';
   try {
-    await client.execute(contract, { [method]: { locator: game.locator } }, undefined, [
+    const res = await client.execute(contract, { [method]: { locator: game.locator } }, undefined, [
       {
         amount: '10000000',
         denom: 'uscrt',
       },
     ]);
+    console.log('txn', res.transactionHash);
   } catch (e) {
     if (e.message !== 'ciphertext not set') {
       setGame(undefined);
@@ -129,7 +123,6 @@ const playGame = async (
       return;
     }
   }
-  setGame(game);
 };
 
 const routeUrl = (
diff --git a/web/src/GamePlaying.tsx b/web/src/GamePlaying.tsx
index 1059228..2f50212 100644
--- a/web/src/GamePlaying.tsx
+++ b/web/src/GamePlaying.tsx
@@ -75,6 +75,11 @@ const GamePlaying = (props: Props) => {
     }
   };
 
+  if (game.stage === Game.Stage.Creating) {
+    return <CircularProgress />;
+    // TODO: Leaving game is not getting created
+  }
+
   let displayContent: DisplayContent = DisplayContent.PickHandsign;
   if (pickedRound === game.round) {
     displayContent = DisplayContent.Loading;
diff --git a/web/src/game.ts b/web/src/game.ts
index 3dbe75b..bb91777 100644
--- a/web/src/game.ts
+++ b/web/src/game.ts
@@ -35,6 +35,7 @@ interface TickUpdate {
 }
 
 enum Stage {
+  Creating = 'CREATING',
   Lobby = 'LOBBY',
   GameOn = 'GAME_ON',
   Over = 'OVER',
@@ -56,7 +57,7 @@ const defaults = Object.freeze({
   privateGame: false,
   locator: '',
   playerNumber: undefined,
-  stage: Stage.Lobby,
+  stage: Stage.Creating,
   round: 1,
   won: false,
   wins: 0,
@@ -72,7 +73,7 @@ const defaults = Object.freeze({
 const create = (contract: string, privateGame: boolean, joinLocator?: string): Game => {
   let locator = joinLocator;
   let playerNumber: number | undefined;
-  let stage = Stage.Lobby;
+  let stage = Stage.Creating;
   if (!locator) {
     const randomLocator = new Uint8Array(32);
     crypto.getRandomValues(randomLocator);
@@ -114,11 +115,14 @@ const tick = async (
     winDeadlineSeconds: game.winDeadlineSeconds,
     lossDeadlineSeconds: game.lossDeadlineSeconds,
   };
-  if (game.stage === Stage.Lobby) {
+  if (game.stage === Stage.Creating || game.stage === Stage.Lobby) {
     const lobby = await client.queryContractSmart(game.contract, {
       game_lobby: { locator: game.locator },
     });
-    if (!lobby.game_started) return;
+    if (!lobby.game_started) {
+      if (game.stage === Stage.Creating) return { ...game, stage: Stage.Lobby };
+      return;
+    }
 
     let playerNumber = update.playerNumber;
     if (playerNumber === undefined) {
diff --git a/web/src/wallet/Wallet.tsx b/web/src/wallet/Wallet.tsx
index f82f723..f0c5c4a 100644
--- a/web/src/wallet/Wallet.tsx
+++ b/web/src/wallet/Wallet.tsx
@@ -71,7 +71,7 @@ const Wallet = (props: Props) => {
                   Get funds
                 </Button>
               )}
-              <Typography variant="body1" color="textPrimary" component="p">
+              <Typography variant="body1" color="textPrimary" component="div">
                 {!account?.loading && (
                   <CircularProgress color="secondary" size="1rem" className={classes.progress} />
                 )}