diff --git a/app/src/components/GameRoutes.tsx b/app/src/components/GameRoutes.tsx
index 46dc728e..f4a257e9 100644
--- a/app/src/components/GameRoutes.tsx
+++ b/app/src/components/GameRoutes.tsx
@@ -11,10 +11,11 @@ import {
 } from "contexts/CurrentPlayer"
 import { NotificationContext } from "contexts/Notification"
 import {
+  CurrentGameSubDocument,
   CurrentPlayerDocument,
   CurrentPlayerQuery,
   GameByJoinCodeDocument,
-  useCurrentGameSubscription,
+  useCurrentGameQuery,
   useJoinGameMutation,
 } from "generated/graphql"
 import CardSubmission from "pages/CardSubmission"
@@ -158,12 +159,21 @@ function CurrentGameProvider(props: {
   joinCode: string
   children: React.ReactNode
 }) {
-  const { data, loading } = useCurrentGameSubscription({
+  const { data, loading, subscribeToMore } = useCurrentGameQuery({
     variables: {
       joinCode: props.joinCode,
     },
   })
 
+  React.useEffect(() => {
+    return subscribeToMore({
+      variables: {
+        joinCode: props.joinCode,
+      },
+      document: CurrentGameSubDocument,
+    })
+  }, [data?.games[0]])
+
   if (!loading && !data?.games[0]) {
     return <Redirect to={routes.root}></Redirect>
   }
diff --git a/app/src/components/ScreenCard.tsx b/app/src/components/ScreenCard.tsx
index 81f6c1dc..38ef854f 100644
--- a/app/src/components/ScreenCard.tsx
+++ b/app/src/components/ScreenCard.tsx
@@ -6,15 +6,13 @@ import BowlCard from "components/BowlCard"
 import PlayerChip from "components/PlayerChip"
 import { CurrentGameContext } from "contexts/CurrentGame"
 import {
-  CurrentGameSubscription,
+  CurrentGameQuery,
   useAcceptCardMutation,
   useRejectCardMutation,
 } from "generated/graphql"
 import * as React from "react"
 
-function ScreenCard(props: {
-  card: CurrentGameSubscription["games"][0]["cards"][0]
-}) {
+function ScreenCard(props: { card: CurrentGameQuery["games"][0]["cards"][0] }) {
   const currentGame = React.useContext(CurrentGameContext)
   const [acceptCard] = useAcceptCardMutation()
   const [rejectCard] = useRejectCardMutation()
diff --git a/app/src/contexts/CurrentGame.ts b/app/src/contexts/CurrentGame.ts
index 390d4265..191ad01c 100644
--- a/app/src/contexts/CurrentGame.ts
+++ b/app/src/contexts/CurrentGame.ts
@@ -1,11 +1,11 @@
 import {
-  CurrentGameSubscription,
+  CurrentGameQuery,
   GameCardPlayStyleEnum,
   GameStateEnum,
 } from "generated/graphql"
 import { createContext } from "react"
 
-export type CurrentGameContextType = CurrentGameSubscription["games"][0]
+export type CurrentGameContextType = CurrentGameQuery["games"][0] 
 
 export const CurrentGameContext = createContext<CurrentGameContextType>({
   id: "",
diff --git a/app/src/graphql/operations.graphql b/app/src/graphql/operations.graphql
index d1788108..2e2d5c53 100644
--- a/app/src/graphql/operations.graphql
+++ b/app/src/graphql/operations.graphql
@@ -18,7 +18,53 @@ query CurrentPlayer($clientUuid: uuid!, $joinCode: String!) {
   }
 }
 
-subscription CurrentGame($joinCode: String!) {
+query CurrentGame($joinCode: String!) {
+  games(where: { join_code: { _eq: $joinCode } }) {
+    id
+    join_code
+    starting_letter
+    seconds_per_turn
+    num_entries_per_player
+    allow_card_skips
+    screen_cards
+    card_play_style
+    state
+    host {
+      id
+      username
+    }
+    rounds(order_by: { order_sequence: asc }) {
+      id
+      value
+    }
+    cards(
+      where: {
+        _or: [{ is_allowed: { _is_null: true } }, { is_allowed: { _eq: true } }]
+      }
+    ) {
+      id
+      word
+      player_id
+      is_allowed
+    }
+    players {
+      id
+      client_uuid
+      username
+      team
+      team_sequence
+    }
+    turns(order_by: { sequential_id: asc }) {
+      id
+      player_id
+      started_at
+      completed_card_ids
+      seconds_per_turn_override
+    }
+  }
+}
+
+subscription CurrentGameSub($joinCode: String!) {
   games(where: { join_code: { _eq: $joinCode } }) {
     id
     join_code
diff --git a/app/src/lib/score.ts b/app/src/lib/score.ts
index be4cbd0d..f7793a2b 100644
--- a/app/src/lib/score.ts
+++ b/app/src/lib/score.ts
@@ -1,11 +1,11 @@
-import { CurrentGameSubscription } from "generated/graphql"
+import { CurrentGameQuery } from "generated/graphql"
 import { Team } from "lib/team"
 import { filter, flatMap } from "lodash"
 
 export function teamScore(
   team: Team,
-  turns: CurrentGameSubscription["games"][0]["turns"],
-  players: CurrentGameSubscription["games"][0]["players"]
+  turns: CurrentGameQuery["games"][0]["turns"],
+  players: CurrentGameQuery["games"][0]["players"]
 ) {
   const teamPlayerIds = filter(players, (player) => player.team === team).map(
     (player) => player.id
diff --git a/app/src/lib/team.ts b/app/src/lib/team.ts
index 388ee73c..b4528f5d 100644
--- a/app/src/lib/team.ts
+++ b/app/src/lib/team.ts
@@ -1,4 +1,4 @@
-import { CurrentGameSubscription } from "generated/graphql"
+import { CurrentGameQuery } from "generated/graphql"
 import { cloneDeep, filter, find, remove, shuffle } from "lodash"
 
 export enum Team {
@@ -25,7 +25,7 @@ function addTeamAndSequence(players: Players, team: Team) {
 // > [1, 2, 3, 4] (first half will always be equal or 1 longer)
 // [1,2,3,4,5,6,7].splice(Math.ceil(7/ 2), 7)
 // > [5, 6, 7]
-type Player = CurrentGameSubscription["games"][0]["players"][0]
+type Player = CurrentGameQuery["games"][0]["players"][0]
 type Players = Array<Player>
 export function teamsWithSequence(players: Players) {
   const shuffledPlayers = shuffle(players)
diff --git a/app/src/lib/turn.ts b/app/src/lib/turn.ts
index c7843e57..95c0ec01 100644
--- a/app/src/lib/turn.ts
+++ b/app/src/lib/turn.ts
@@ -1,4 +1,4 @@
-import { CurrentGameSubscription } from "generated/graphql"
+import { CurrentGameQuery } from "generated/graphql"
 import { Team } from "lib/team"
 import {
   countBy,
@@ -20,8 +20,8 @@ export enum ActiveTurnPlayState {
 }
 
 export function nextPlayerForSameTeam(
-  activePlayer: CurrentGameSubscription["games"][0]["players"][0],
-  players: CurrentGameSubscription["games"][0]["players"]
+  activePlayer: CurrentGameQuery["games"][0]["players"][0],
+  players: CurrentGameQuery["games"][0]["players"]
 ) {
   const sameTeamPlayers = filter(
     players,
@@ -37,9 +37,9 @@ export function nextPlayerForSameTeam(
 }
 
 export function nextPlayerForNextTeam(
-  activePlayer: CurrentGameSubscription["games"][0]["players"][0] | null,
-  turns: CurrentGameSubscription["games"][0]["turns"],
-  players: CurrentGameSubscription["games"][0]["players"]
+  activePlayer: CurrentGameQuery["games"][0]["players"][0] | null,
+  turns: CurrentGameQuery["games"][0]["turns"],
+  players: CurrentGameQuery["games"][0]["players"]
 ) {
   if (!activePlayer) {
     return sortBy(players, ["team_sequence"])[0]
@@ -72,15 +72,13 @@ export function nextPlayerForNextTeam(
   return nextPlayerFromNextTeamToPlay
 }
 
-export function completedCardIds(
-  turns: CurrentGameSubscription["games"][0]["turns"]
-) {
+export function completedCardIds(turns: CurrentGameQuery["games"][0]["turns"]) {
   return flatMap(turns, (turn) => turn.completed_card_ids)
 }
 
 export function drawableCards(
-  turns: CurrentGameSubscription["games"][0]["turns"],
-  cards: CurrentGameSubscription["games"][0]["cards"]
+  turns: CurrentGameQuery["games"][0]["turns"],
+  cards: CurrentGameQuery["games"][0]["cards"]
 ) {
   const allCompletedCardIds = flatMap(turns, (turn) => turn.completed_card_ids)
 
@@ -104,7 +102,7 @@ export function drawableCards(
 }
 
 export function drawableCardsWithoutCompletedCardsInActiveTurn(
-  cards: CurrentGameSubscription["games"][0]["cards"],
+  cards: CurrentGameQuery["games"][0]["cards"],
   completedCardIdsInActiveTurn: Array<number>
 ) {
   return reject(cards, (card) => completedCardIdsInActiveTurn.includes(card.id))
diff --git a/app/src/pages/Lobby/index.tsx b/app/src/pages/Lobby/index.tsx
index 4dec72ba..3a6c955c 100644
--- a/app/src/pages/Lobby/index.tsx
+++ b/app/src/pages/Lobby/index.tsx
@@ -41,13 +41,13 @@ function Lobby() {
   const location = useLocation()
   const [hideShare, setHideShare] = React.useState(false)
   const [updateGameSettings] = useUpdateGameSettingsMutation()
-  const [cardPlayStyle, setCardPlayStyle] = React.useState(
-    GameCardPlayStyleEnum.PlayersSubmitWords
-  )
+  // const [cardPlayStyle, setCardPlayStyle] = React.useState(
+  //   GameCardPlayStyleEnum.PlayersSubmitWords
+  // )
 
-  React.useEffect(() => {
-    setCardPlayStyle(currentGame.card_play_style)
-  }, [currentGame.card_play_style])
+  // React.useEffect(() => {
+  //   setCardPlayStyle(currentGame.card_play_style)
+  // }, [currentGame.card_play_style])
 
   const [wordList, setWordList] = React.useState("")
   const debouncedSetWordList = React.useRef(
@@ -94,9 +94,9 @@ function Lobby() {
         <>
           <div className={classes.section}>
             <SettingsSection
-              cardPlayStyle={cardPlayStyle}
+              cardPlayStyle={currentGame.card_play_style}
               setCardPlayStyle={(value) => {
-                setCardPlayStyle(value as GameCardPlayStyleEnum)
+                // setCardPlayStyle(value as GameCardPlayStyleEnum)
                 updateGameSettings({
                   variables: {
                     id: currentGame.id,
@@ -104,6 +104,12 @@ function Lobby() {
                       card_play_style: value as GameCardPlayStyleEnum,
                     },
                   },
+                  optimisticResponse: {
+                    update_games_by_pk: {
+                      ...currentGame,
+                      card_play_style: value as GameCardPlayStyleEnum,
+                    },
+                  },
                 })
               }}
               debouncedSetWordList={debouncedSetWordList}
@@ -129,7 +135,7 @@ function Lobby() {
             </Grid>
             <WaitingRoom
               wordList={wordList}
-              cardPlayStyle={cardPlayStyle}
+              cardPlayStyle={currentGame.card_play_style}
             ></WaitingRoom>
           </Grid>
         </Grid>
@@ -139,7 +145,9 @@ function Lobby() {
         <>
           <Divider variant="middle"></Divider>
           <div className={classes.section}>
-            <SettingsSection cardPlayStyle={cardPlayStyle}></SettingsSection>
+            <SettingsSection
+              cardPlayStyle={currentGame.card_play_style}
+            ></SettingsSection>
           </div>
         </>
       )}
diff --git a/app/src/pages/Play/HostControls.tsx b/app/src/pages/Play/HostControls.tsx
index 7dab6a62..46946430 100644
--- a/app/src/pages/Play/HostControls.tsx
+++ b/app/src/pages/Play/HostControls.tsx
@@ -3,7 +3,7 @@ import { grey } from "@material-ui/core/colors"
 import PlayerChip from "components/PlayerChip"
 import { CurrentGameContext } from "contexts/CurrentGame"
 import {
-  CurrentGameSubscription,
+  CurrentGameQuery,
   useEndCurrentTurnAndStartNextTurnMutation,
 } from "generated/graphql"
 import { useTitleStyle } from "index"
@@ -12,8 +12,8 @@ import { nextPlayerForNextTeam, nextPlayerForSameTeam } from "lib/turn"
 import * as React from "react"
 
 function HostControls(props: {
-  activeTurn: CurrentGameSubscription["games"][0]["turns"][0]
-  activePlayer: CurrentGameSubscription["games"][0]["players"][0]
+  activeTurn: CurrentGameQuery["games"][0]["turns"][0]
+  activePlayer: CurrentGameQuery["games"][0]["players"][0]
   currentRoundId: number
 }) {
   const currentGame = React.useContext(CurrentGameContext)
diff --git a/app/src/pages/Play/TeamContent.tsx b/app/src/pages/Play/TeamContent.tsx
index ae5cad3d..ab0e8e83 100644
--- a/app/src/pages/Play/TeamContent.tsx
+++ b/app/src/pages/Play/TeamContent.tsx
@@ -2,13 +2,13 @@ import { Box, Grid } from "@material-ui/core"
 import PlayerChip from "components/PlayerChip"
 import { CurrentGameContext } from "contexts/CurrentGame"
 import { CurrentPlayerContext } from "contexts/CurrentPlayer"
-import { CurrentGameSubscription } from "generated/graphql"
+import { CurrentGameQuery } from "generated/graphql"
 import { nextPlayerForNextTeam } from "lib/turn"
 import * as React from "react"
 
 type Props = {
-  activePlayer: CurrentGameSubscription["games"][0]["players"][0]
-  activeTurn: CurrentGameSubscription["games"][0]["turns"][0]
+  activePlayer: CurrentGameQuery["games"][0]["players"][0]
+  activeTurn: CurrentGameQuery["games"][0]["turns"][0]
 }
 
 export function YourTeamTurnContent(props: Props) {
diff --git a/app/src/pages/Play/YourTurnContent.tsx b/app/src/pages/Play/YourTurnContent.tsx
index d477c3f4..38439353 100644
--- a/app/src/pages/Play/YourTurnContent.tsx
+++ b/app/src/pages/Play/YourTurnContent.tsx
@@ -13,7 +13,7 @@ import BowlCard from "components/BowlCard"
 import PlayerChip from "components/PlayerChip"
 import { CurrentGameContext } from "contexts/CurrentGame"
 import {
-  CurrentGameSubscription,
+  CurrentGameQuery,
   Rounds,
   useEndCurrentTurnAndStartNextTurnMutation,
   useStartTurnMutation,
@@ -47,10 +47,10 @@ const GreenCheckbox = withStyles({
 })((props: CheckboxProps) => <Checkbox color="default" {...props} />)
 
 function YourTurnContent(props: {
-  yourTeamPlayers: CurrentGameSubscription["games"][0]["players"]
-  cardsInBowl: CurrentGameSubscription["games"][0]["cards"]
-  activePlayer: CurrentGameSubscription["games"][0]["players"][0]
-  activeTurn: CurrentGameSubscription["games"][0]["turns"][0]
+  yourTeamPlayers: CurrentGameQuery["games"][0]["players"]
+  cardsInBowl: CurrentGameQuery["games"][0]["cards"]
+  activePlayer: CurrentGameQuery["games"][0]["players"][0]
+  activeTurn: CurrentGameQuery["games"][0]["turns"][0]
   activeTurnPlayState: ActiveTurnPlayState
   secondsLeft: number
   currentRoundId: Rounds["id"]
@@ -67,7 +67,7 @@ function YourTurnContent(props: {
   const [skippingTurn, setSkippingTurn] = React.useState(false)
 
   const [activeCard, setActiveCard] = React.useState<
-    CurrentGameSubscription["games"][0]["cards"][0] | null
+    CurrentGameQuery["games"][0]["cards"][0] | null
   >(null)
 
   const [shownCardsInActiveTurn, setShownCardsInActiveTurn] = React.useState<