diff --git a/client/src/components/Playground.vue b/client/src/components/Playground.vue
index 86a951a..7638b4d 100644
--- a/client/src/components/Playground.vue
+++ b/client/src/components/Playground.vue
@@ -1,16 +1,16 @@
 <template>
   <div class="playground__container">
     <div class="playground__area">
-      <div class="playground__sources">
+      <div class="playground__sources" :class="{ 'playground__sources__show': showSources }">
         <SourceCard v-for="source in sources" :key="source.id" :source="source" :selectable="selectable"
           :selected="selection == source.id" @click="selectSource(source)" :badge="badgeMap[source.id]"
           :disabled="disabledMap[source.id]" />
       </div>
       <div class="playground__spacer" />
-      <div class="playground__quote">
+      <div class="playground__quote" :class="{ 'playground__quote__show': showQuote}">
         <QuoteCard :quote="quote" />
       </div>
-      <div class="playground__skip">
+      <div class="playground__skip" :class="{ 'playground__skip__show': showSkipButton }">
         <SkipButton :selectable="selectable" :disabled="!selectable" :selected="selection === '-'"
           @click="selectSource({ id: '-', name: '' })" />
       </div>
@@ -46,6 +46,9 @@ const selectSource = async (source: Source): Promise<void> => {
 
 const game = useGameinfoStore()
 const playerListShowCheckbox = computed(() => game.state === 'play' && game.phase === 'select-quote')
+const showSources = computed(() => ['select-quote', 'reveal-show-count', 'reveal-source'].indexOf(game.phase) >= 0)
+const showQuote = showSources
+const showSkipButton = computed(() => game.phase === 'select-quote')
 const badgeMap = computed(() => {
   const badgeMap = {}
   if (game.phase === 'reveal-show-count') {
@@ -85,9 +88,14 @@ const disabledMap = computed(() => {
 
   &__sources {
     display: flex;
+    visibility: hidden;
     flex-wrap: wrap;
     justify-content: space-around;
     gap: 24px 36px;
+
+    &__show {
+      visibility: visible;
+    }
   }
 
   &__spacer {
@@ -96,12 +104,22 @@ const disabledMap = computed(() => {
 
   &__quote {
     display: flex;
+    visibility: hidden;
     justify-content: center;
     flex-grow: 4;
+
+    &__show {
+      visibility: visible;
+    }
   }
 
   &__skip {
+    visibility: hidden;
     align-self: flex-end;
+
+    &__show {
+      visibility: visible;
+    }
   }
 
   &__players-list {