diff --git a/src/App.css b/src/App.css
index 43e2483a..ea02fe9c 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1098,102 +1098,102 @@ a:hover {
             width: 210px;
         }
     }
+}
+
+.instructions-modals-container {
+    .modal {
+        .modal-dialog {
+            width: 100%;
+        }
+        .modal-body {
+            box-sizing: border-box !important;
+            max-height: 80vh;
+            overflow-y: scroll;
+            display: flex;
+            justify-content: center;
+            padding: 24px 36px;
+            width: 100%;
 
-    .instructions-modals-container {
-        .modal {
-            .modal-dialog {
+            .modal-body-content {
+                display: flex;
+                flex-direction: column;
                 width: 100%;
             }
-            .modal-body {
-                box-sizing: border-box !important;
-                max-height: 80vh;
-                overflow-y: scroll;
+            .section {
                 display: flex;
-                justify-content: center;
-                padding: 24px 36px;
-                width: 100%;
+                flex-direction: column;
+                /* margin-bottom: 20px; */
 
-                .modal-body-content {
-                    display: flex;
-                    flex-direction: column;
-                    width: 100%;
+                .section-content {
+                    padding: 0px 55px;
                 }
-                .section {
-                    display: flex;
-                    flex-direction: column;
-                    /* margin-bottom: 20px; */
 
-                    .section-content {
-                        padding: 0px 55px;
-                    }
+                h3 {
+                    font-size: 1.25rem;
+                    font-weight: 600;
+                    margin-bottom: 4px;
+                }
 
-                    h3 {
-                        font-size: 1.25rem;
-                        font-weight: 600;
-                        margin-bottom: 4px;
-                    }
+                hr {
+                    color: #cdcdcd;
+                    border-width: 1px;
+                    margin: 0px;
+                }
+                hr.header {
+                    color: #b0b0b0;
+                    border-width: 2px;
+                }
 
-                    hr {
-                        color: #cdcdcd;
-                        border-width: 1px;
-                        margin: 0px;
-                    }
-                    hr.header {
-                        color: #b0b0b0;
-                        border-width: 2px;
-                    }
+                .block {
+                    flex: 1;
+                    display: flex;
+                    margin: 32px 0px;
+                    min-height: 120px;
+                }
+                .block.with-image {
+                    justify-content: center;
+                    height: auto;
 
-                    .block {
-                        flex: 1;
+                    .image-container.two-image {
                         display: flex;
-                        margin: 32px 0px;
-                        min-height: 120px;
+                        flex-direction: column;
                     }
-                    .block.with-image {
-                        justify-content: center;
-                        height: auto;
 
-                        .image-container.two-image {
-                            display: flex;
-                            flex-direction: column;
-                        }
+                    img {
+                        width: 250px;
+                        height: fit-content;
+                        margin: auto 0px;
+                        border: 2px solid #ebebeb;
+                        object-fit: contain;
+                    }
 
-                        img {
-                            width: 250px;
-                            height: fit-content;
-                            margin: auto 0px;
-                            border: 2px solid #ebebeb;
-                            object-fit: contain;
-                        }
+                    .text {
+                        display: flex;
+                        width: 300px;
+                        flex-direction: column;
+                        justify-content: space-evenly;
+                        margin-left: 60px;
 
-                        .text {
-                            display: flex;
-                            width: 300px;
-                            flex-direction: column;
-                            justify-content: space-evenly;
-                            margin-left: 60px;
-
-                            p {
-                                margin-bottom: 0px;
-
-                                span.text-button-example {
-                                    display: inline-flex;
-                                    justify-content: center;
-                                    background-color: #efefef;
-                                    width: 25px;
-                                    height: 25px;
-                                    border-radius: 10px 0px 0px 10px;
-                                    border: 1px solid lightgray;
-
-                                    b {
-                                        line-height: 20px;
-                                        margin: auto auto 5px;
-                                    }
-                                }
-                                span.text-button-example.right {
-                                    border-radius: 0px 10px 10px 0px;
+                        p {
+                            margin-bottom: 0px;
+
+                            span.text-button-example {
+                                display: inline-flex;
+                                justify-content: center;
+                                background-color: #efefef;
+                                width: 25px;
+                                height: 25px;
+                                border-radius: 10px 0px 0px 10px;
+                                border: 2px solid lightgray;
+
+                                b {
+                                    line-height: 20px;
+                                    margin: auto auto 5px;
                                 }
                             }
+                            span.text-button-example.right {
+                                border-radius: 0px 10px 10px 0px;
+                            }
                         }
                     }
                 }
diff --git a/src/App.tsx b/src/App.tsx
index f9b4f07a..da2256be 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -25,6 +25,7 @@ import legend from './legend.png';
 import { ExportDropdown } from './ui/ExportDropdown';
 import { GenomeViewModal } from './ui/GenomeViewModal';
 import { VariantViewModal } from './ui/VariantViewModal';
+import { NavigationButtons } from './ui/NavigationButtons';
 
 import 'bootstrap/dist/css/bootstrap.min.css';
 import * as bootstrap from 'bootstrap/dist/js/bootstrap.bundle.min';
@@ -1134,69 +1135,7 @@ function App(props: RouteComponentProps) {
                                 }}
                             />
                         )}
-                        <div className="navigation-buttons">
-                            <div className="navigation-button-container split navigation-button-genome">
-                                <button
-                                    className="navigation-button split-left"
-                                    tabIndex={1}
-                                    onClick={() => {
-                                        setTimeout(
-                                            () =>
-                                                document
-                                                    .getElementById('gosling-panel')
-                                                    ?.scrollTo({ top: 0, behavior: 'smooth' }),
-                                            0
-                                        );
-                                    }}
-                                >
-                                    Genome View
-                                </button>
-                                <button
-                                    className="navigation-button split-right"
-                                    tabIndex={1}
-                                    data-bs-toggle="modal"
-                                    data-bs-target="#genome-view-modal"
-                                >
-                                    <svg className="button question-mark" viewBox={ICONS.QUESTION_CIRCLE_FILL.viewBox}>
-                                        <title>Question Mark</title>
-                                        {ICONS.QUESTION_CIRCLE_FILL.path.map(p => (
-                                            <path fill="currentColor" key={p} d={p} />
-                                        ))}
-                                    </svg>
-                                </button>
-                            </div>
-                            <div className="navigation-button-container split navigation-button-variant">
-                                <button
-                                    className="navigation-button split-left"
-                                    tabIndex={1}
-                                    onClick={() => {
-                                        setTimeout(() => {
-                                            document.getElementById('variant-view')?.scrollIntoView({
-                                                block: 'start',
-                                                inline: 'nearest',
-                                                behavior: 'smooth'
-                                            }),
-                                                0;
-                                        });
-                                    }}
-                                >
-                                    Variant View
-                                </button>
-                                <button
-                                    className="navigation-button split-right"
-                                    tabIndex={1}
-                                    data-bs-toggle="modal"
-                                    data-bs-target="#variant-view-modal"
-                                >
-                                    <svg className="button question-mark" viewBox={ICONS.QUESTION_CIRCLE_FILL.viewBox}>
-                                        <title>Question Mark</title>
-                                        {ICONS.QUESTION_CIRCLE_FILL.path.map(p => (
-                                            <path fill="currentColor" key={p} d={p} />
-                                        ))}
-                                    </svg>
-                                </button>
-                            </div>
-                        </div>
+                        <NavigationButtons isMinimalMode={isMinimalMode} />
                         {
                             // External links and export buttons
                             isMinimalMode ? (
@@ -1653,13 +1592,10 @@ function App(props: RouteComponentProps) {
                     </svg>
                 </button>
                 <div id="hidden-gosling" style={{ visibility: 'collapse', position: 'fixed' }} />
-
-                {isMinimalMode && (
-                    <div className="instructions-modals-container">
-                        <GenomeViewModal />
-                        <VariantViewModal />
-                    </div>
-                )}
+                <div className="instructions-modals-container">
+                    <GenomeViewModal />
+                    <VariantViewModal />
+                </div>
             </div>
         </ErrorBoundary>
     );
diff --git a/src/ui/NavigationButtons.tsx b/src/ui/NavigationButtons.tsx
new file mode 100644
index 00000000..a69a5b0d
--- /dev/null
+++ b/src/ui/NavigationButtons.tsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import { ICONS } from '../icon';
+
+export const NavigationButtons = () => {
+    return (
+        <div className="navigation-buttons">
+            <div className="navigation-button-container split navigation-button-genome">
+                <button
+                    className="navigation-button split-left"
+                    tabIndex={1}
+                    onClick={() => {
+                        setTimeout(
+                            () => document.getElementById('gosling-panel')?.scrollTo({ top: 0, behavior: 'smooth' }),
+                            0
+                        );
+                    }}
+                >
+                    Genome View
+                </button>
+                <button
+                    className="navigation-button split-right"
+                    tabIndex={1}
+                    data-bs-toggle="modal"
+                    data-bs-target="#genome-view-modal"
+                >
+                    <svg className="button question-mark" viewBox={ICONS.QUESTION_CIRCLE_FILL.viewBox}>
+                        <title>Question Mark</title>
+                        {ICONS.QUESTION_CIRCLE_FILL.path.map(p => (
+                            <path fill="currentColor" key={p} d={p} />
+                        ))}
+                    </svg>
+                </button>
+            </div>
+            <div className="navigation-button-container split navigation-button-variant">
+                <button
+                    className="navigation-button split-left"
+                    tabIndex={1}
+                    onClick={() => {
+                        setTimeout(() => {
+                            document.getElementById('variant-view')?.scrollIntoView({
+                                block: 'start',
+                                inline: 'nearest',
+                                behavior: 'smooth'
+                            }),
+                                0;
+                        });
+                    }}
+                >
+                    Variant View
+                </button>
+                <button
+                    className="navigation-button split-right"
+                    tabIndex={1}
+                    data-bs-toggle="modal"
+                    data-bs-target="#variant-view-modal"
+                >
+                    <svg className="button question-mark" viewBox={ICONS.QUESTION_CIRCLE_FILL.viewBox}>
+                        <title>Question Mark</title>
+                        {ICONS.QUESTION_CIRCLE_FILL.path.map(p => (
+                            <path fill="currentColor" key={p} d={p} />
+                        ))}
+                    </svg>
+                </button>
+            </div>
+        </div>
+    );
+};