diff --git a/src/app/App.tsx b/src/app/App.tsx
index fbe67409..e2c4905e 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -4,7 +4,7 @@
 import 'react-splitter-layout/lib/index.css';
 import './app.scss';
 import { Button, Classes, Spinner } from '@blueprintjs/core';
-import { Manual } from '@blueprintjs/icons';
+import { Console, Manual } from '@blueprintjs/icons';
 import React, { useEffect, useState } from 'react';
 
 type SideView = 'off' | 'docs';
@@ -70,14 +70,81 @@ const Docs: React.FunctionComponent = () => {
     );
 };
 
+/**
+ * HACK: react-splitter-layout is an uncontrolled component, so there is no
+ * clean way to reset its size programmatically.
+ */
+function resetSplitterSize(className: string, defaultSize: number): void {
+    const container = document.querySelector<HTMLElement>(className);
+
+    if (!container) {
+        return;
+    }
+
+    const fiberKey = Object.keys(container).find((k) => k.startsWith('__reactFiber'));
+    if (!fiberKey) {
+        return;
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    let fiber: any = (container as any)[fiberKey];
+    while (fiber && !fiber.stateNode?.handleMouseMove) {
+        fiber = fiber.return;
+    }
+
+    fiber?.stateNode?.setState({ secondaryPaneSize: defaultSize });
+}
+
 const App: React.FunctionComponent = () => {
     const i18n = useI18n();
     const { isDarkMode } = useTernaryDarkMode();
     const [sideView, setSideView] = useState<SideView>('off');
     const [isDragging, setIsDragging] = useState(false);
 
-    const [docsSplit, setDocsSplit] = useLocalStorage('app-docs-split', 30);
-    const [terminalSplit, setTerminalSplit] = useLocalStorage('app-terminal-split', 30);
+    const defaultDocsSplit = 30;
+    const [docsSplit, setDocsSplit] = useLocalStorage(
+        'app-docs-split',
+        defaultDocsSplit,
+    );
+
+    const resetDocsSplit = () => {
+        setDocsSplit(defaultDocsSplit);
+        resetSplitterSize(
+            '.splitter-layout.pb-show-docs, .splitter-layout.pb-hide-docs',
+            defaultDocsSplit,
+        );
+    };
+
+    const docsOnClick = () => {
+        if (sideView === 'docs' && docsSplit < 10) {
+            resetDocsSplit();
+        } else {
+            setSideView(sideView === 'docs' ? 'off' : 'docs');
+        }
+    };
+
+    const defaultTerminalSplit = 30;
+    const [terminalSplit, setTerminalSplit] = useLocalStorage(
+        'app-terminal-split',
+        defaultTerminalSplit,
+    );
+    const [terminalVisible, setTerminalVisible] = useState(true);
+
+    const resetTerminalSplit = () => {
+        setTerminalSplit(defaultTerminalSplit);
+        resetSplitterSize(
+            '.splitter-layout.pb-show-terminal, .splitter-layout.pb-hide-terminal',
+            defaultTerminalSplit,
+        );
+    };
+
+    const terminalOnClick = () => {
+        if (terminalVisible && terminalSplit < 10) {
+            resetTerminalSplit();
+        } else {
+            setTerminalVisible(!terminalVisible);
+        }
+    };
 
     // Classes.DARK has to be applied to body element, otherwise it won't
     // affect portals
@@ -128,6 +195,11 @@ const App: React.FunctionComponent = () => {
                     >
                         <SplitterLayout
                             vertical={true}
+                            customClassName={
+                                terminalVisible
+                                    ? 'pb-show-terminal'
+                                    : 'pb-hide-terminal'
+                            }
                             percentage={true}
                             secondaryInitialSize={terminalSplit}
                             onSecondaryPaneSizeChange={setTerminalSplit}
@@ -142,22 +214,30 @@ const App: React.FunctionComponent = () => {
                                 >
                                     <Editor />
                                 </React.Suspense>
-                                <Button
-                                    className="pb-app-doc-button"
-                                    minimal
-                                    large
-                                    icon={<Manual />}
-                                    title={
-                                        sideView === 'docs'
-                                            ? i18n.translate('docs.hide')
-                                            : i18n.translate('docs.show')
-                                    }
-                                    onClick={() =>
-                                        setSideView(
-                                            sideView === 'docs' ? 'off' : 'docs',
-                                        )
-                                    }
-                                />
+                                <div className="pb-app-side-view-buttons">
+                                    <Button
+                                        large
+                                        intent="primary"
+                                        icon={<Console />}
+                                        title={
+                                            terminalVisible
+                                                ? i18n.translate('terminal.hide')
+                                                : i18n.translate('terminal.show')
+                                        }
+                                        onClick={terminalOnClick}
+                                    />
+                                    <Button
+                                        large
+                                        intent="primary"
+                                        icon={<Manual />}
+                                        title={
+                                            sideView === 'docs'
+                                                ? i18n.translate('docs.hide')
+                                                : i18n.translate('docs.show')
+                                        }
+                                        onClick={docsOnClick}
+                                    />
+                                </div>
                             </main>
                             <aside
                                 className="pb-app-terminal"
diff --git a/src/app/app.scss b/src/app/app.scss
index 97c7318f..069bf2cb 100644
--- a/src/app/app.scss
+++ b/src/app/app.scss
@@ -79,11 +79,19 @@
     }
 }
 
-.pb-app-doc-button {
+.pb-app-side-view-buttons {
     position: absolute;
     bottom: bp.$pt-grid-size;
     right: bp.$pt-grid-size;
     z-index: bp.$pt-z-index-overlay;
+    display: flex;
+    flex-direction: row;
+    gap: bp.$pt-grid-size * 0.5;
+
+    // match toolbar button appearance: no box-shadow border or active-state shadow
+    & * {
+        box-shadow: unset !important;
+    }
 }
 
 $splitter-background-color: bp.$light-gray2;
@@ -203,3 +211,14 @@ div.pb-hide-docs > :not(.layout-pane-primary) {
     width: 0 !important;
     min-width: 0 !important;
 }
+
+// hide the terminal and resize separator
+// Same approach as docs: keep the terminal in the DOM to preserve its content,
+// but collapse the secondary pane to zero height.
+div.pb-hide-terminal > :not(.layout-pane-primary) {
+    visibility: hidden;
+    pointer-events: none;
+    flex-basis: 0 !important;
+    height: 0 !important;
+    min-height: 0 !important;
+}
diff --git a/src/app/translations/en.json b/src/app/translations/en.json
index e5f384f1..93d96d72 100644
--- a/src/app/translations/en.json
+++ b/src/app/translations/en.json
@@ -8,5 +8,9 @@
     "docs": {
         "show": "Show documentation",
         "hide": "Hide documentation"
+    },
+    "terminal": {
+        "show": "Show terminal",
+        "hide": "Hide terminal"
     }
 }