diff --git a/client/package-lock.json b/client/package-lock.json
index 2e0cc74..68ee313 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -279,6 +279,11 @@
       "resolved": "https://registry.npmjs.org/vue-async-computed/-/vue-async-computed-3.8.2.tgz",
       "integrity": "sha512-If5roOhp/x0WWd0TWRD77YsuFoiIw3MbkcRlIB/FE3TqQCPje52eQp5CV5NN/7B0VAyPuGX5JQa+rc9AOcGAYw=="
     },
+    "vue-directive-long-press": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/vue-directive-long-press/-/vue-directive-long-press-1.1.0.tgz",
+      "integrity": "sha512-OHhR4N1kuuKaK87SPmqkcm5Y81HjXgv5DfWr96flIkTYveWps1AozKiNrabsIirq+ibSZWFr3IUr0en+Ce3fAA=="
+    },
     "vue-router": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.2.0.tgz",
diff --git a/client/package.json b/client/package.json
index a5c1510..9d19137 100644
--- a/client/package.json
+++ b/client/package.json
@@ -16,6 +16,7 @@
     "tslib": "^2.0.0",
     "vue": "^2.6.11",
     "vue-async-computed": "^3.8.2",
+    "vue-directive-long-press": "^1.1.0",
     "vue-router": "^3.2.0",
     "vuex": "^3.4.0"
   }
diff --git a/client/src/App.vue b/client/src/App.vue
index 0e3ecf1..78dadc6 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -7,11 +7,13 @@
 <script lang="ts">
 import Vue from 'vue'
 import { authStore } from './state/AuthStore';
+import { formatStore, LayoutFormFactor } from './state/FormatStore';
 import { FALLBACK_USER_PICTURE } from './parse/fallbacks';
 
 export default Vue.extend({
   created() {
     this.loadAuthInfo();
+    this.initFormat();
   },
 
   methods: {
@@ -25,9 +27,28 @@ export default Vue.extend({
         });
       }
     },
+
+    initFormat() {
+      this.updateFormFactor();
+
+      window.addEventListener('resize', () => {
+        this.updateFormFactor();
+      });
+    },
+
+    updateFormFactor() {
+      const layout = getLayoutFormFactor();
+      if (layout != formatStore.layout) {
+        formatStore.setLayout(layout);
+      }
+    },
   },
 });
 
+function getLayoutFormFactor(): LayoutFormFactor {
+  return window.innerWidth >= 768 ? 'desktop' : 'mobile';
+}
+
 interface SourceUserInfo {
   name: string;
   picture: string;
diff --git a/client/src/shims/shims-longpress.d.ts b/client/src/shims/shims-longpress.d.ts
new file mode 100644
index 0000000..c910742
--- /dev/null
+++ b/client/src/shims/shims-longpress.d.ts
@@ -0,0 +1 @@
+declare module 'vue-directive-long-press';
diff --git a/client/src/state/FormatStore.ts b/client/src/state/FormatStore.ts
new file mode 100644
index 0000000..2e3cb62
--- /dev/null
+++ b/client/src/state/FormatStore.ts
@@ -0,0 +1,29 @@
+import { vuexModule } from './vuex/vuexModule';
+import { rootStore } from './store';
+
+export const formatStore = vuexModule(
+  rootStore,
+  'format',
+  {
+    layout: 'desktop',
+  } as FormatState,
+  {
+    mutations: {
+      setLayout(state: FormatState, layout: LayoutFormFactor) {
+        state.layout = layout;
+      },
+    },
+
+    getters: {},
+
+    actions: {},
+  }
+)
+
+export interface FormatState {
+  layout: LayoutFormFactor;
+}
+
+export type LayoutFormFactor = 'mobile' | 'desktop';
+
+export type FormatStore = typeof formatStore;
diff --git a/client/src/ui/Replay.vue b/client/src/ui/Replay.vue
index 3a72cb7..e325368 100644
--- a/client/src/ui/Replay.vue
+++ b/client/src/ui/Replay.vue
@@ -5,25 +5,23 @@
       @mousedown="onBubbleMouseDown"
       >
     <template v-if="status == 'loaded'">
-      <ControlsRow />
-      <div class="main">
-        <PlayerSelector class="table" />
-        <DraftPicker v-if="showDraftPicker" class="picker" />
-        <CardGrid v-else class="grid" />
-      </div>
+      <ReplayMobile
+          v-if="formatStore.layout == 'mobile'"
+          :showDraftPicker="showDraftPicker"
+          />
+      <ReplayDesktop v-else :showDraftPicker="showDraftPicker" />
     </template>
   </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
-import ControlsRow from './replay/ControlsRow.vue';
-import PlayerSelector from './replay/player_selector/PlayerSelector.vue';
-import CardGrid from './replay/CardGrid.vue';
-import DraftPicker from './replay/DraftPicker.vue';
+import ReplayDesktop from './replay/ReplayDesktop.vue';
+import ReplayMobile from './replay/ReplayMobile.vue';
 
 import { rootStore } from '../state/store';
 import { authStore } from '../state/AuthStore';
+import { formatStore, FormatStore } from '../state/FormatStore';
 import { replayStore } from '../state/ReplayStore';
 import { draftStore, DraftStore } from '../state/DraftStore';
 import { applyReplayUrlState, parseDraftUrl, pushDraftUrlFromState } from '../router/url_manipulation';
@@ -38,10 +36,8 @@ import { isAuthedUserSelected } from './replay/isAuthedUserSelected';
 
 export default Vue.extend({
   components: {
-    ControlsRow,
-    PlayerSelector,
-    DraftPicker,
-    CardGrid,
+    ReplayMobile,
+    ReplayDesktop,
   },
 
   data() {
@@ -75,8 +71,8 @@ export default Vue.extend({
   },
 
   computed: {
-    draftStore(): DraftStore {
-      return draftStore;
+    formatStore(): FormatStore {
+      return formatStore;
     },
 
     showDraftPicker(): boolean {
@@ -160,23 +156,5 @@ export default Vue.extend({
 <style scoped>
 ._replay {
   height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-.main {
-  display: flex;
-  flex: 1;
-  flex-direction: row;
-  overflow: hidden;
-}
-
-.table {
-  width: 300px;
-  flex: 0 0 auto;
-}
-
-.grid, .picker {
-  flex: 1;
 }
 </style>
diff --git a/client/src/ui/replay/ControlsRow.vue b/client/src/ui/replay/ControlsRow.vue
index c08a7bf..1b2f797 100644
--- a/client/src/ui/replay/ControlsRow.vue
+++ b/client/src/ui/replay/ControlsRow.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="_controls-row">
     <div class="start">
-      <TimelineButton class="timeline-btn" />
+      <TimelineButton class="timeline-btn" popoverAlignment="left below" />
       <button
           v-if="draftStore.isFilteredDraft"
           @click="onPicksClick"
diff --git a/client/src/ui/replay/DraftPicker.vue b/client/src/ui/replay/DraftPicker.vue
index 45b4d93..aba8254 100644
--- a/client/src/ui/replay/DraftPicker.vue
+++ b/client/src/ui/replay/DraftPicker.vue
@@ -14,7 +14,7 @@
       </div>
       <div v-else class="no-picks">You don't have any picks (yet)</div>
     </div>
-    <DeckBuilderMain class="pool" :horizontal="true" />
+    <DeckBuilderMain v-if="showDeckBuilder" class="pool" :horizontal="true" />
   </div>
 </template>
 
@@ -39,6 +39,13 @@ export default Vue.extend({
     DeckBuilderMain,
   },
 
+  props: {
+    showDeckBuilder: {
+      type: Boolean,
+      required: true,
+    },
+  },
+
   created() {
     deckBuilderStore.setSelectedSeat(this.currentSeat.position);
   },
diff --git a/client/src/ui/replay/ReplayDesktop.vue b/client/src/ui/replay/ReplayDesktop.vue
new file mode 100644
index 0000000..1e65692
--- /dev/null
+++ b/client/src/ui/replay/ReplayDesktop.vue
@@ -0,0 +1,70 @@
+<!--
+
+Root component for desktop layout
+
+-->
+
+<template>
+  <div class="_replay-desktop">
+    <ControlsRow />
+    <div class="main">
+      <PlayerSelector class="table" />
+      <DraftPicker
+          v-if="showDraftPicker"
+          class="picker"
+          :showDeckBuilder="true"
+          />
+      <CardGrid v-else class="grid" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import ControlsRow from './ControlsRow.vue';
+import PlayerSelector from './player_selector/PlayerSelector.vue';
+import CardGrid from './CardGrid.vue';
+import DraftPicker from './DraftPicker.vue';
+
+export default Vue.extend({
+  components: {
+    DraftPicker,
+    CardGrid,
+    ControlsRow,
+    PlayerSelector,
+  },
+
+  props: {
+    showDraftPicker: {
+      type: Boolean,
+      required: true,
+    },
+  },
+})
+
+</script>
+
+<style scoped>
+._replay-desktop {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.main {
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  overflow: hidden;
+}
+
+.table {
+  width: 300px;
+  flex: 0 0 auto;
+}
+
+.grid, .picker {
+  flex: 1;
+}
+</style>
+
diff --git a/client/src/ui/replay/ReplayMobile.vue b/client/src/ui/replay/ReplayMobile.vue
new file mode 100644
index 0000000..dc74714
--- /dev/null
+++ b/client/src/ui/replay/ReplayMobile.vue
@@ -0,0 +1,199 @@
+<!--
+
+An interface for mobile use
+
+-->
+
+<template>
+  <div class="_replay-mobile">
+    <div class="title-bar">
+      {{ draftStore.draftName }}
+    </div>
+
+    <template>
+      <DraftPicker
+          v-if="showDraftPicker"
+          class="main-content picker"
+          :showDeckBuilder="false"
+          />
+      <CardGrid v-else class="main-content grid" />
+    </template>
+
+    <div class="footer">
+
+      <img class="icon" :src="selectedUserIcon">
+
+      <div class="footer-center">
+        <button
+            v-long-press="400"
+            @click="onPrevClick"
+            @long-press-start="onPrevLongPress"
+            @contextmenu.prevent
+            class="left-button"
+            >
+          Prev
+        </button>
+        <TimelineButton
+            class="timeline-button"
+            popover-alignment="center above" />
+        <button
+            v-long-press="400"
+            @click="onNextClick"
+            @long-press-start="onNextLongPress"
+            @contextmenu.prevent
+            class="right-button"
+            >
+          Next
+        </button>
+      </div>
+
+      <div class="footer-right"></div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import LongPress from 'vue-directive-long-press';
+
+import CardGrid from './CardGrid.vue';
+import DraftPicker from './DraftPicker.vue';
+import TimelineButton from './controls_row/TimelineButton.vue';
+
+import { draftStore, DraftStore } from '../../state/DraftStore';
+import { replayStore } from '../../state/ReplayStore';
+
+import { pushDraftUrlRelative, pushDraftUrlFromState } from '../../router/url_manipulation';
+import { FALLBACK_USER_PICTURE } from '../../parse/fallbacks';
+
+
+export default Vue.extend({
+  components: {
+    DraftPicker,
+    CardGrid,
+    TimelineButton,
+  },
+
+  directives: {
+    'long-press': LongPress
+  },
+
+  props: {
+    showDraftPicker: {
+      type: Boolean,
+      required: true,
+    },
+  },
+
+  computed: {
+
+    draftStore(): DraftStore {
+      return draftStore;
+    },
+
+    selectedUserIcon(): string {
+      if (replayStore.selection == null) {
+        // TODO Fill this in with something that makes more sense
+        return FALLBACK_USER_PICTURE;
+      } else if (replayStore.selection.type == 'pack') {
+        // TODO Fill this in with something that makes more sense
+        return FALLBACK_USER_PICTURE;
+      } else {
+        return replayStore.draft.seats[replayStore.selection.id].player.iconUrl;
+      }
+    },
+  },
+
+  methods: {
+    onPrevClick() {
+      replayStore.goBack();
+      pushDraftUrlFromState(this, draftStore, replayStore);
+    },
+
+    onPrevLongPress() {
+      pushDraftUrlRelative(this, {
+        eventIndex: 0,
+      });
+    },
+
+    onNextClick() {
+      replayStore.goNext();
+      pushDraftUrlFromState(this, draftStore, replayStore);
+    },
+
+    onNextLongPress() {
+      pushDraftUrlRelative(this, {
+        eventIndex: replayStore.events.length,
+      });
+    },
+
+  }
+})
+</script>
+
+<style scoped>
+._replay-mobile {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.title-bar {
+  text-align: center;
+  background: #fff;
+  color: #000;
+  border-bottom: 1px solid #eaeaea;
+  padding: 10px 0;
+}
+
+.main-content {
+  flex: 1;
+}
+
+.footer {
+  display: flex;
+  align-items: center;
+  background: #ffffff;
+  border-top: 1px solid #eaeaea;
+  padding: 7px 0;
+}
+
+.icon {
+  width: 35px;
+  height: 35px;
+  box-sizing: border-box;
+  border: 1px solid #c7c7c7;
+  border-radius: 35px;
+  margin: 0 7px;
+}
+
+.footer-center {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.left-button, .right-button {
+  padding: 5px 10px;
+  min-width: 52px;
+  text-align: center;
+  user-select: none;
+  cursor: default;
+  font-size: 14px;
+  font-family: inherit;
+  border: 1px solid #c7c7c7;
+  border-radius: 5px;
+  color: inherit;
+}
+
+.timeline-button {
+  margin-left: 6px;
+  margin-right: 6px;
+}
+
+.footer-right {
+  width: 45px;
+}
+
+</style>
diff --git a/client/src/ui/replay/controls_row/TimelineButton.vue b/client/src/ui/replay/controls_row/TimelineButton.vue
index 67089be..fe86a53 100644
--- a/client/src/ui/replay/controls_row/TimelineButton.vue
+++ b/client/src/ui/replay/controls_row/TimelineButton.vue
@@ -14,6 +14,7 @@ the timeline.
       >
     <button
         class="button"
+        ref="button"
         @click="onButtonClick"
         >
       <div class="location-p1">{{ labels[0] }}</div>
@@ -24,12 +25,13 @@ the timeline.
     <TimelineSelector
         v-if="timelineOpen"
         class="popover"
+        :class="popoverClasses"
         />
   </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import Vue, { VueConstructor } from 'vue';
 import TimelineSelector from './TimelineSelector.vue';
 import { globalClickTracker, UnhandledClickListener } from '../../infra/globalClickTracker';
 import { TimelineEvent } from '../../../draft/TimelineEvent';
@@ -44,11 +46,22 @@ import { checkNotNil } from '../../../util/checkNotNil';
 import { eventToString } from '../../../state/util/eventToString';
 
 
-export default Vue.extend({
+export default (Vue as VueConstructor<Vue & {
+  $refs: {
+    button: HTMLElement
+  },
+}>).extend({
   components: {
     TimelineSelector,
   },
 
+  props: {
+    popoverAlignment: {
+      type: String,
+      required: true,
+    },
+  },
+
   data() {
     return {
       timelineOpen: false,
@@ -100,6 +113,17 @@ export default Vue.extend({
 
       }
     },
+
+    popoverClasses(): string[] {
+      if (this.popoverAlignment == 'left below') {
+        return ['left-below'];
+      } else if (this.popoverAlignment == 'center above') {
+        return ['center-above'];
+      } else {
+        throw new Error(
+            `Unrecognized popoverAlignment: ${this.popoverAlignment}`);
+      }
+    },
   },
 
   created() {
@@ -200,14 +224,22 @@ function getMostRecentPickEvent(store: ReplayStore, seatId: number) {
 
 .popover {
   position: absolute;
-  top: calc(100% + 5px);
-  left: 0;
   width: 300px;
-  height: calc(100vh - 70px);
+  height: calc(100vh - 100px);
   background-color: #FFF;
   border-radius: 5px;
   box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3);
   border: 1px solid #ccc;
 }
 
+.center-above {
+  bottom: calc(100% + 5px);
+  left: calc(50% - 150px);
+}
+
+.left-below {
+  left: 0;
+  top: calc(100% + 5px);
+}
+
 </style>
diff --git a/vue.tmpl b/vue.tmpl
index b7b1445..04e1586 100644
--- a/vue.tmpl
+++ b/vue.tmpl
@@ -2,6 +2,7 @@
 <head>
   <title>DraftSim</title>
   <link href="/static/favicon.png" rel="icon">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>
 <body>
 <div id="app"></div>