diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml
index e79c6bc5..58fede86 100644
--- a/.github/workflows/ci.yaml
+++ b/.github/workflows/ci.yaml
@@ -49,9 +49,9 @@ jobs:
             - name: End-to-end test
               run: npx playwright test -c e2e/playci.config.ts
 ### Uncomment when you need to re-extract snapshots
-#            - name: Extract snapshots
-#              if: always()
-#              uses: actions/upload-artifact@v4
-#              with:
-#                  name: ci_actual_snapshots
-#                  path: e2e/results/manual/output
+            - name: Extract snapshots
+              if: always()
+              uses: actions/upload-artifact@v4
+              with:
+                  name: ci_actual_snapshots
+                  path: e2e/results/manual/output
diff --git a/package-lock.json b/package-lock.json
index 22fbb4b6..2f9ee1c8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
             "version": "0.4.0",
             "hasInstallScript": true,
             "dependencies": {
+                "@phosphor-icons/vue": "^2.2.1",
                 "axios": "^1.12.0",
                 "bigint-isqrt": "^0.3.2",
                 "bigint-mod-arith": "^3.3.1",
@@ -846,6 +847,18 @@
             "integrity": "sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==",
             "dev": true
         },
+        "node_modules/@phosphor-icons/vue": {
+            "version": "2.2.1",
+            "resolved": "https://registry.npmjs.org/@phosphor-icons/vue/-/vue-2.2.1.tgz",
+            "integrity": "sha512-3RNg1utc2Z5RwPKWFkW3eXI/0BfQAwXgtFxPUPeSzi55jGYUq16b+UqcgbKLazWFlwg5R92OCLKjDiJjeiJcnA==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=14"
+            },
+            "peerDependencies": {
+                "vue": ">=3.2.39"
+            }
+        },
         "node_modules/@pkgjs/parseargs": {
             "version": "0.11.0",
             "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -6443,6 +6456,12 @@
             "integrity": "sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==",
             "dev": true
         },
+        "@phosphor-icons/vue": {
+            "version": "2.2.1",
+            "resolved": "https://registry.npmjs.org/@phosphor-icons/vue/-/vue-2.2.1.tgz",
+            "integrity": "sha512-3RNg1utc2Z5RwPKWFkW3eXI/0BfQAwXgtFxPUPeSzi55jGYUq16b+UqcgbKLazWFlwg5R92OCLKjDiJjeiJcnA==",
+            "requires": {}
+        },
         "@pkgjs/parseargs": {
             "version": "0.11.0",
             "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
diff --git a/package.json b/package.json
index 4a4010d8..7187a67a 100644
--- a/package.json
+++ b/package.json
@@ -86,6 +86,7 @@
         "postinstall": "git config --local include.path ../.gitconfig && python3 -m venv .venv && cd tools && node pyrun.mjs python -m pip install -U pip && node pyrun.mjs pip install -r requirements.txt"
     },
     "dependencies": {
+        "@phosphor-icons/vue": "^2.2.1",
         "axios": "^1.12.0",
         "bigint-isqrt": "^0.3.2",
         "bigint-mod-arith": "^3.3.1",
diff --git a/src/App.vue b/src/App.vue
index 2f8239a6..13bec8ce 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -11,7 +11,7 @@
 </script>
 
 <!-- Global styles. This style tag is explicitly unscoped. -->
-<style>
+<style lang="scss">
     #container {
         display: flex;
         flex-direction: column;
@@ -86,6 +86,8 @@
         --ns-font-weight-medium: 500;
 
         /* Dimensions */
+        /* TODO: compute this dynamically */
+        --ns-mobile-navbar-height: 45px;
         --ns-desktop-navbar-height: 76px;
         --ns-desktop-tab-width: 300px;
         --ns-specimen-card-width: 216px;
@@ -106,8 +108,8 @@
         // Large devices (desktops)
         @media (min-width: $desktop-breakpoint) { ... }
         */
-        --ns-breakpoint-mobile: $mobile-breakpoint;
-        --ns-breakpoint-tablet: $tablet-breakpoint;
+        --ns-breakpoint-mobile: #{$mobile-breakpoint};
+        --ns-breakpoint-tablet: #{$tablet-breakpoint};
         /* Not actually used at the moment:
           --ns-breakpoint-desktop: 1200px;
          */
diff --git a/src/components/SpecimenBar.vue b/src/components/SpecimenBar.vue
index 76472815..6e77e445 100644
--- a/src/components/SpecimenBar.vue
+++ b/src/components/SpecimenBar.vue
@@ -4,7 +4,7 @@
             <label>
                 Specimen name
                 <input
-                    id="spec-name"
+                    class="spec-name"
                     type="text"
                     :value="specimen.name"
                     @keyup.enter="blurName()"
@@ -117,7 +117,11 @@
     }
 
     function blurName() {
-        window.document.getElementById('spec-name')?.blur()
+        for (const input of Array.from(
+            document.getElementsByClassName('spec-name')
+        ) as HTMLInputElement[]) {
+            input.blur()
+        }
     }
 
     function refresh() {
diff --git a/src/components/Tab.vue b/src/components/Tab.vue
index fa69ab0b..055915af 100644
--- a/src/components/Tab.vue
+++ b/src/components/Tab.vue
@@ -309,8 +309,7 @@
         display: none;
     }
     .tab {
-        width: 300px;
-        height: fit-content;
+        width: 100%;
     }
     .content {
         padding: 0px 16px 16px 16px;
diff --git a/src/views/Scope.vue b/src/views/Scope.vue
index 7403f98f..bb27efba 100644
--- a/src/views/Scope.vue
+++ b/src/views/Scope.vue
@@ -47,6 +47,40 @@ visualizers you can select.
             id="specimen-bar-desktop"
             :specimen
             @update-specimen-name="handleSpecimenUpdate" />
+        <div id="phone-opener-container">
+            <button
+                aria-controls="sequenceTab"
+                :aria-expanded="Boolean(sequenceTabOpen)"
+                class="phone-opener"
+                type="button"
+                @click="
+                    () => {
+                        sequenceTabOpen = !sequenceTabOpen
+                        visualizerTabOpen = false
+                    }
+                ">
+                <PhDna
+                    alt="Toggle sequence tab"
+                    :size="24"
+                    color="currentColor" />
+            </button>
+            <button
+                aria-controls="visualizerTab"
+                :aria-expanded="Boolean(visualizerTabOpen)"
+                class="phone-opener"
+                type="button"
+                @click="
+                    () => {
+                        visualizerTabOpen = !visualizerTabOpen
+                        sequenceTabOpen = false
+                    }
+                ">
+                <PhMicroscope
+                    alt="Toggle visualizer tab"
+                    :size="24"
+                    color="currentColor" />
+            </button>
+        </div>
     </NavBar>
     <div id="specimen-container">
         <SwitcherModal
@@ -70,10 +104,11 @@ visualizers you can select.
                     changeVisualizerOpen = false
                 }
             " />
-        <tab
+        <Tab
             id="sequenceTab"
             class="tab docked"
             docked="top-right"
+            :class="{visible: sequenceTabOpen}"
             :last-coords-x="Math.floor(tabWidth / 3)"
             :last-coords-y="Math.floor(tabWidth / 3)">
             <ParamEditor
@@ -87,10 +122,11 @@ visualizers you can select.
                         updateURL()
                     }
                 " />
-        </tab>
-        <tab
-            id="visualiserTab"
+        </Tab>
+        <Tab
+            id="visualizerTab"
             class="tab docked"
+            :class="{visible: visualizerTabOpen}"
             docked="bottom-right"
             last-dropzone="bottom-right"
             :last-coords-x="Math.floor((2 * tabWidth) / 3)"
@@ -105,7 +141,7 @@ visualizers you can select.
                         updateURL()
                     }
                 " />
-        </tab>
+        </Tab>
         <SpecimenBar
             id="specimen-bar-phone"
             class="specimen-bar"
@@ -162,6 +198,7 @@ visualizers you can select.
 </template>
 
 <script lang="ts">
+    import {PhDna, PhMicroscope} from '@phosphor-icons/vue'
     import NavBar from './minor/NavBar.vue'
     import SpecimenBar from '../components/SpecimenBar.vue'
     import {clearErrorOverlay} from '@/shared/alertMessage'
@@ -294,6 +331,7 @@ visualizers you can select.
      * Used when the window is resized.
      */
     export function positionAndSizeAllTabs(): void {
+        if (isMobile()) return
         // First reset the "empty" classes and recompute them, just in case:
         document
             .querySelectorAll('.dropzone')
@@ -372,6 +410,9 @@ visualizers you can select.
     const changeSequenceOpen = ref(false)
     const changeVisualizerOpen = ref(false)
 
+    const sequenceTabOpen = ref(false)
+    const visualizerTabOpen = ref(false)
+
     const router = useRouter()
     const route = useRoute()
 
@@ -619,6 +660,23 @@ visualizers you can select.
 
 <style scoped lang="scss">
     // mobile styles
+    #phone-opener-container {
+        align-items: center;
+        display: flex;
+        gap: 0.5em;
+        margin-right: 0.5em;
+    }
+
+    .phone-opener {
+        /* remove button styles */
+        background: none;
+        border-style: none;
+
+        /* center contents */
+        display: inline-flex;
+        align-items: center;
+    }
+
     .navbar {
         display: unset;
     }
@@ -626,6 +684,7 @@ visualizers you can select.
         display: none;
     }
     #main {
+        flex: 1;
         display: flex;
         height: 100%;
     }
@@ -636,6 +695,10 @@ visualizers you can select.
         min-height: fit-content;
         padding-left: auto;
         padding-right: auto;
+
+        @media (max-width: $mobile-breakpoint) {
+            flex: 1;
+        }
     }
     #canvas-container {
         flex: 1;
@@ -647,7 +710,6 @@ visualizers you can select.
         order: 1;
         z-index: -1;
         border-bottom: 1px solid var(--ns-color-black);
-        height: 300px;
         width: 100%;
     }
     .dropzone-container {
@@ -662,27 +724,48 @@ visualizers you can select.
         display: none;
     }
     #sequenceTab {
-        width: 100%;
-        padding-left: auto;
-        padding-right: auto;
         order: 3;
-        border-bottom: 1px solid var(--ns-color-black);
-        height: fit-content;
     }
-    #visualiserTab {
+    #visualizerTab {
         width: 100%;
         padding-left: auto;
         padding-right: auto;
         order: 4;
         border-bottom: 1px solid var(--ns-color-black);
-        height: fit-content;
     }
     #specimen-bar-phone {
         order: 2;
-        padding-left: auto;
-        padding-right: auto;
+        padding: 8px;
         border-bottom: 1px solid var(--ns-color-black);
+        position: fixed;
+        bottom: 0;
+        z-index: 1;
+        left: 0;
+        background: var(--ns-color-white);
+
+        /* align with label */
+        :deep(.spec-name) {
+            padding-left: 0;
+        }
+    }
+
+    @media (max-width: $mobile-breakpoint) {
+        .tab {
+            background: var(--ns-color-white);
+            bottom: 0;
+            height: 0;
+            overflow: hidden;
+            position: absolute;
+            transition: height 150ms ease-in-out;
+            z-index: 2;
+
+            &.visible {
+                height: calc(0.5 * (100vh - var(--ns-mobile-navbar-height)));
+                overflow: auto;
+            }
+        }
     }
+
     // tablet & desktop styles
     @media (min-width: $tablet-breakpoint) {
         #specimen-bar-desktop {
@@ -696,7 +779,8 @@ visualizers you can select.
             border: 0px;
         }
         #sequenceTab,
-        #visualiserTab {
+        #visualizerTab {
+            display: block;
             width: var(--ns-desktop-tab-width);
         }
         #specimen-container {
@@ -708,7 +792,6 @@ visualizers you can select.
         }
 
         #canvas-container {
-            height: unset;
             order: unset;
             flex: 1;
             position: relative;
@@ -773,8 +856,17 @@ visualizers you can select.
 
         .tab {
             width: 300px;
-            position: absolute;
             order: unset;
+            height: fit-content;
+            position: absolute;
+
+            padding-left: auto;
+            padding-right: auto;
+            border-bottom: 1px solid var(--ns-color-black);
+        }
+
+        #phone-opener-container {
+            display: none;
         }
     }
 </style>
diff --git a/src/views/minor/NavBar.vue b/src/views/minor/NavBar.vue
index 1da36c04..43d38f07 100644
--- a/src/views/minor/NavBar.vue
+++ b/src/views/minor/NavBar.vue
@@ -1,21 +1,20 @@
 <template>
     <header>
         <nav>
-            <div id="navbar-main">
-                <a href="/doc/doc/about/">
-                    <img :src="LogoWithMicroscope" alt="A microscope icon.">
-                </a>
-                <button
-                    id="navbar-toggler"
-                    type="button"
-                    aria-controls="navbarSupportedContent"
-                    :aria-expanded="menuOpen"
-                    aria-label="Toggle navigation."
-                    @click="toggleMenu">
-                    <span class="material-icons-sharp">menu</span>
-                </button>
-            </div>
+            <a id="logo" href="/doc/doc/about/">
+                <img :src="LogoWithMicroscope" alt="A microscope icon.">
+            </a>
+
             <slot class="specimen-bar" />
+            <button
+                id="navbar-toggler"
+                type="button"
+                aria-controls="navbarSupportedContent"
+                :aria-expanded="menuOpen"
+                aria-label="Toggle navigation."
+                @click="toggleMenu">
+                <span class="material-icons-sharp">menu</span>
+            </button>
             <div class="burger-menu">
                 <div id="navbar-links" :class="{open: menuOpen}">
                     <RouterLink
@@ -90,23 +89,17 @@
 <style scoped lang="scss">
     nav {
         display: flex;
-        flex-direction: column;
-        justify-content: center;
+        justify-content: space-between;
         padding: 8px 16px 8px 16px;
         border-bottom: 1px solid var(--ns-color-black);
+        position: relative;
 
-        #navbar-main {
+        #navbar-toggler {
+            background: none;
+            border: none;
             display: flex;
-            flex-direction: row;
-            justify-content: space-between;
-
-            #navbar-toggler {
-                background: none;
-                border: none;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-            }
+            justify-content: center;
+            align-items: center;
         }
 
         .close {
@@ -116,11 +109,13 @@
         }
 
         .burger-menu {
+            background-color: var(--ns-color-white);
             color: var(--ns-color-black);
             display: flex;
             flex-direction: row;
             justify-content: space-between;
             align-items: center;
+
             &.open {
                 .material-icons-sharp {
                     display: block;
@@ -132,17 +127,30 @@
             width: 100%;
             display: none;
             flex-direction: column;
-            margin-top: 8px;
             color: var(--ns-color-black);
             &.open {
                 display: flex;
                 z-index: 1000;
             }
 
+            @media (max-width: $mobile-breakpoint) {
+                /* should not push content down */
+                background-color: var(--ns-color-white);
+                position: absolute;
+                top: 100%;
+                left: 0;
+                width: 100%;
+                padding: 0.2em 0.5em;
+            }
+
             @media (min-width: $mobile-breakpoint) {
                 display: flex;
             }
 
+            @media (min-width: $tablet-breakpoint) {
+                margin-top: 8px;
+            }
+
             .help-popper {
                 cursor: pointer;
                 font-family: var(--ns-font-display);
@@ -226,13 +234,16 @@
                 font-family: var(--ns-font-display);
                 font-size: var(--ns-size-display);
                 color: var(--ns-color-black);
-                margin-top: 8px;
-                padding-left: 0.5em;
                 padding-right: 0.5em;
-                padding-top: 0.2ex;
                 padding-bottom: 0.2ex;
                 text-decoration: none;
 
+                @media (min-width: $tablet-breakpoint) {
+                    margin-top: 8px;
+                    padding-top: 0.2ex;
+                    padding-left: 0.5em;
+                }
+
                 &:focus,
                 &:hover {
                     text-decoration: underline;
@@ -245,8 +256,16 @@
         }
     }
     #logo {
+        @media (max-width: $mobile-breakpoint) {
+            margin-right: auto;
+        }
+
         img {
-            height: 32px;
+            height: 24px;
+
+            @media (min-width: $tablet-breakpoint) {
+                height: 35px;
+            }
         }
     }
     .specimen-bar {
@@ -259,10 +278,9 @@
             align-items: center;
             flex-direction: row;
             height: var(--ns-desktop-navbar-height);
-            #navbar-main {
-                #navbar-toggler {
-                    display: none;
-                }
+
+            #navbar-toggler {
+                display: none;
             }
 
             #navbar-links {