diff --git a/client/src/components/ActivityBar/ActivityBar.vue b/client/src/components/ActivityBar/ActivityBar.vue
index 2df107d8850..c7854ed4fd4 100644
--- a/client/src/components/ActivityBar/ActivityBar.vue
+++ b/client/src/components/ActivityBar/ActivityBar.vue
@@ -2,6 +2,7 @@
 import { useUserStore } from "@/stores/userStore";
 import UploadItem from "./Items/UploadItem.vue";
 import ToolBox from "@/components/Panels/ProviderAwareToolBox.vue";
+import FlexPanel from "@/components/Panels/FlexPanel.vue";
 import ActivityItem from "./ActivityItem";
 
 const userStore = useUserStore();
@@ -48,19 +49,15 @@ function onToggleSidebar(toggle) {
                     to="/user" />
             </b-nav>
         </div>
-        <div v-if="sidebarIsActive('search')" key="search" class="left-column">
+        <FlexPanel v-if="sidebarIsActive('search')" key="search" side="left" :collapsible="false">
             <ToolBox />
-        </div>
+        </FlexPanel>
     </div>
 </template>
 
 <style scoped lang="scss">
 @import "theme/blue.scss";
 
-.left-column {
-    width: 15rem;
-}
-
 .activity-bar {
     background: $panel-bg-color;
     width: 4rem;
diff --git a/client/src/components/Form/FormDisplay.vue b/client/src/components/Form/FormDisplay.vue
index 31d209317f4..eebccffebb9 100644
--- a/client/src/components/Form/FormDisplay.vue
+++ b/client/src/components/Form/FormDisplay.vue
@@ -193,9 +193,9 @@ export default {
                 if (!silent && inputId) {
                     const element = this.$el.querySelector(`[id='form-element-${inputId}']`);
                     if (element) {
-                        const centerPanel = document.querySelector(".center-panel");
+                        const centerPanel = document.querySelector("#center");
                         if (centerPanel) {
-                            centerPanel.scrollTo(0, this.getOffsetTop(element));
+                            centerPanel.scrollTo(0, this.getOffsetTop(element) - 50);
                         }
                     }
                 }
diff --git a/client/src/components/Form/FormGeneric.vue b/client/src/components/Form/FormGeneric.vue
index be8ff3124b4..61c821006fc 100644
--- a/client/src/components/Form/FormGeneric.vue
+++ b/client/src/components/Form/FormGeneric.vue
@@ -132,7 +132,7 @@ export default {
         showMessage(message, variant = "success") {
             this.messageText = message;
             this.messageVariant = variant;
-            document.querySelector(".center-panel").scrollTop = 0;
+            document.querySelector("#center").scrollTop = 0;
         },
     },
 };
diff --git a/client/src/components/Login/RegisterForm.vue b/client/src/components/Login/RegisterForm.vue
index 1cac50f5cf0..bd6bcb101f4 100644
--- a/client/src/components/Login/RegisterForm.vue
+++ b/client/src/components/Login/RegisterForm.vue
@@ -60,8 +60,8 @@
                                 >
                             </b-card-body>
                         </b-collapse>
-                        <b-card-footer v-if="showLoginLink" v-localize>
-                            Already have an account?
+                        <b-card-footer v-if="showLoginLink">
+                            <span v-localize>Already have an account?</span>
                             <a
                                 id="login-toggle"
                                 v-localize
diff --git a/client/src/components/Markdown/MarkdownEditor.vue b/client/src/components/Markdown/MarkdownEditor.vue
index 1ea6f7429be..cbdc82b278d 100644
--- a/client/src/components/Markdown/MarkdownEditor.vue
+++ b/client/src/components/Markdown/MarkdownEditor.vue
@@ -1,11 +1,9 @@
 <template>
-    <div>
-        <SidePanel id="left" side="left">
-            <template v-slot:panel>
-                <MarkdownToolBox :steps="steps" @onInsert="onInsert" />
-            </template>
-        </SidePanel>
-        <div id="center" class="workflow-markdown-editor">
+    <div id="columns" class="d-flex">
+        <FlexPanel side="left">
+            <MarkdownToolBox :steps="steps" @onInsert="onInsert" />
+        </FlexPanel>
+        <div id="center" class="overflow-auto w-100">
             <div class="markdown-editor h-100">
                 <div class="unified-panel-header" unselectable="on">
                     <div class="unified-panel-header-inner">
@@ -47,7 +45,7 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faQuestion } from "@fortawesome/free-solid-svg-icons";
 import MarkdownToolBox from "./MarkdownToolBox";
-import SidePanel from "components/Panels/SidePanel";
+import FlexPanel from "components/Panels/FlexPanel";
 import MarkdownHelp from "./MarkdownHelp";
 
 Vue.use(BootstrapVue);
@@ -59,7 +57,7 @@ const FENCE = "```";
 export default {
     components: {
         MarkdownToolBox,
-        SidePanel,
+        FlexPanel,
         FontAwesomeIcon,
         MarkdownHelp,
     },
@@ -74,7 +72,7 @@ export default {
         },
         steps: {
             type: Object,
-            required: true,
+            default: null,
         },
         title: {
             type: String,
diff --git a/client/src/components/PageEditor/PageEditorMarkdown.vue b/client/src/components/PageEditor/PageEditorMarkdown.vue
index d58787ffc13..c378fc1a93e 100644
--- a/client/src/components/PageEditor/PageEditorMarkdown.vue
+++ b/client/src/components/PageEditor/PageEditorMarkdown.vue
@@ -1,32 +1,26 @@
 <template>
-    <div id="columns">
-        <markdown-editor
-            :title="title"
-            :markdown-text="markdownText"
-            :markdown-config="contentData"
-            @onUpdate="onUpdate">
-            <template v-slot:buttons>
-                <b-button
-                    id="save-button"
-                    v-b-tooltip.hover.bottom
-                    title="Save"
-                    variant="link"
-                    role="button"
-                    @click="saveContent(false)">
-                    <font-awesome-icon icon="save" />
-                </b-button>
-                <b-button
-                    id="view-button"
-                    v-b-tooltip.hover.bottom
-                    title="Save & View"
-                    variant="link"
-                    role="button"
-                    @click="saveContent(true)">
-                    <font-awesome-icon icon="eye" />
-                </b-button>
-            </template>
-        </markdown-editor>
-    </div>
+    <markdown-editor :title="title" :markdown-text="markdownText" :markdown-config="contentData" @onUpdate="onUpdate">
+        <template v-slot:buttons>
+            <b-button
+                id="save-button"
+                v-b-tooltip.hover.bottom
+                title="Save"
+                variant="link"
+                role="button"
+                @click="saveContent(false)">
+                <font-awesome-icon icon="save" />
+            </b-button>
+            <b-button
+                id="view-button"
+                v-b-tooltip.hover.bottom
+                title="Save & View"
+                variant="link"
+                role="button"
+                @click="saveContent(true)">
+                <font-awesome-icon icon="eye" />
+            </b-button>
+        </template>
+    </markdown-editor>
 </template>
 
 <script>
diff --git a/client/src/components/Panels/FlexPanel.vue b/client/src/components/Panels/FlexPanel.vue
index 3387d363978..361327e4615 100644
--- a/client/src/components/Panels/FlexPanel.vue
+++ b/client/src/components/Panels/FlexPanel.vue
@@ -4,6 +4,10 @@ import { library } from "@fortawesome/fontawesome-svg-core";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { faChevronLeft, faChevronRight, faGripLinesVertical } from "@fortawesome/free-solid-svg-icons";
 import { useDraggable } from "@vueuse/core";
+import { LastQueue } from "utils/promise-queue";
+import { determineWidth } from "./utilities";
+
+const lastQueue = new LastQueue(10);
 
 library.add({
     faChevronLeft,
@@ -11,7 +15,19 @@ library.add({
     faGripLinesVertical,
 });
 
+const props = defineProps({
+    collapsible: {
+        type: Boolean,
+        default: true,
+    },
+    side: {
+        type: String,
+        default: "right",
+    },
+});
+
 const draggable = ref();
+const root = ref();
 const rangeWidth = [200, 300, 600];
 const panelWidth = ref(rangeWidth[1]);
 const show = ref(true);
@@ -21,11 +37,6 @@ const { position, isDragging } = useDraggable(draggable, {
     exact: true,
 });
 
-watch(position, () => {
-    const newWidth = window.innerWidth - position.value.x;
-    panelWidth.value = Math.max(rangeWidth[0], Math.min(rangeWidth[2], newWidth));
-});
-
 const style = computed(() => {
     return show.value ? { width: `${panelWidth.value}px` } : null;
 });
@@ -33,15 +44,30 @@ const style = computed(() => {
 function toggle() {
     show.value = !show.value;
 }
+
+/** Watch position changes and adjust width accordingly */
+watch(position, () => {
+    lastQueue.enqueue(() => {
+        const rectRoot = root.value.getBoundingClientRect();
+        const rectDraggable = draggable.value.getBoundingClientRect();
+        panelWidth.value = determineWidth(
+            rectRoot,
+            rectDraggable,
+            rangeWidth[0],
+            rangeWidth[2],
+            props.side,
+            position.value.x
+        );
+    });
+});
 </script>
 
 <template>
-    <div class="d-flex">
+    <div v-if="show" :id="side" ref="root" class="d-flex">
         <div class="d-flex flex-column" :style="style">
-            <slot v-if="show" />
-            <div v-else class="flex-fill" />
-            <div class="flex-panel-footer d-flex px-2 p-1" :class="{ 'flex-panel-border': !show }">
-                <div v-if="show">
+            <slot />
+            <div v-if="side === 'right'" class="flex-panel-footer d-flex px-2 py-1">
+                <div id="right-drag">
                     <font-awesome-icon icon="grip-lines-vertical" />
                     <div
                         ref="draggable"
@@ -52,34 +78,81 @@ function toggle() {
                         }" />
                 </div>
                 <div class="flex-fill" />
-                <div>
-                    <font-awesome-icon v-if="show" class="cursor-pointer increase-area" icon="chevron-right" />
-                    <font-awesome-icon v-else class="cursor-pointer increase-area" icon="chevron-left" />
-                    <div class="interaction-area" @click="toggle" />
+                <div v-if="collapsible" class="cursor-pointer">
+                    <font-awesome-icon icon="chevron-right" />
+                    <div id="right-collapse" class="interaction-area" @click="toggle" />
                 </div>
             </div>
+            <div v-else class="flex-panel-footer d-flex px-2 py-1">
+                <div v-if="collapsible" class="cursor-pointer">
+                    <font-awesome-icon icon="chevron-left" />
+                    <div id="left-collapse" class="interaction-area" @click="toggle" />
+                </div>
+                <div class="flex-fill" />
+                <div id="left-drag">
+                    <font-awesome-icon icon="grip-lines-vertical" />
+                    <div
+                        ref="draggable"
+                        class="interaction-area"
+                        :class="{
+                            'cursor-grab': !isDragging,
+                            'cursor-grabbing': isDragging,
+                        }" />
+                </div>
+            </div>
+        </div>
+        <div v-if="isDragging" class="interaction-overlay" />
+    </div>
+    <div v-else>
+        <div v-if="side === 'right'" class="flex-panel-right-expand cursor-pointer px-2 py-1">
+            <font-awesome-icon icon="chevron-left" />
+            <div id="right-expand" class="interaction-area" @click="toggle" />
+        </div>
+        <div v-else class="flex-panel-left-expand cursor-pointer px-2 py-1">
+            <font-awesome-icon icon="chevron-right" />
+            <div id="left-expand" class="interaction-area" @click="toggle" />
         </div>
     </div>
 </template>
 
 <style>
 @import "theme/blue.scss";
-.interaction-area {
-    margin: -1.5rem;
-    padding: 1.5rem;
-    position: absolute;
-}
 .cursor-grab {
     cursor: grab;
 }
 .cursor-grabbing {
     cursor: grabbing;
 }
+.flex-panel-expand {
+    background: $panel-footer-bg-color;
+    border: $border-default;
+    bottom: 0;
+    position: absolute;
+    z-index: 1;
+}
 .flex-panel-footer {
     background: $panel-footer-bg-color;
 }
-.flex-panel-border {
-    border: $border-default;
+.flex-panel-left-expand {
+    @extend .flex-panel-expand;
+    border-top-right-radius: $border-radius-base;
+    left: 0;
+}
+.flex-panel-right-expand {
+    @extend .flex-panel-expand;
     border-top-left-radius: $border-radius-base;
+    right: 0;
+}
+.interaction-area {
+    margin: -1.5rem;
+    padding: 1.5rem;
+    position: absolute;
+    z-index: 2;
+}
+.interaction-overlay {
+    height: 100%;
+    position: fixed;
+    left: 0;
+    width: 100%;
 }
 </style>
diff --git a/client/src/components/Panels/SidePanel.vue b/client/src/components/Panels/SidePanel.vue
deleted file mode 100644
index 6a0f79d260b..00000000000
--- a/client/src/components/Panels/SidePanel.vue
+++ /dev/null
@@ -1,115 +0,0 @@
-<template>
-    <div
-        :id="side"
-        class="unified-panel-outer-wrap"
-        :class="{ 'left-style': side === 'left', 'right-style': side === 'right' }"
-        :style="styles">
-        <slot name="panel">
-            <component :is="currentPanel" v-bind="currentPanelProperties" />
-        </slot>
-        <div class="unified-panel-footer">
-            <div
-                class="panel-collapse"
-                :class="{
-                    left: side === 'left',
-                    right: side === 'right',
-                    hidden: !show,
-                }"
-                @click="toggle" />
-            <div class="drag" @mousedown="dragHandler" />
-        </div>
-    </div>
-</template>
-
-<script>
-const MIN_PANEL_WIDTH = 160;
-const MAX_PANEL_WIDTH = 800;
-
-export default {
-    name: "SidePanel",
-    props: ["currentPanel", "currentPanelProperties", "side"],
-    data() {
-        return {
-            show: true,
-            width: 288,
-        };
-    },
-    computed: {
-        styles() {
-            const styles = {};
-            styles[this.side] = this.show ? "0" : `-${this.width}px`;
-            styles["width"] = this.width + "px";
-            return styles;
-        },
-    },
-    methods: {
-        dragHandler(e) {
-            const self = this;
-            const draggingLeft = this.side === "left";
-
-            const initialX = e.pageX;
-            const initialWidth = this.width;
-
-            function move(e) {
-                const delta = e.pageX - initialX;
-                let newWidth = draggingLeft ? initialWidth + delta : initialWidth - delta;
-                newWidth = Math.min(MAX_PANEL_WIDTH, Math.max(MIN_PANEL_WIDTH, newWidth));
-                self.resize(newWidth);
-            }
-
-            function moved() {
-                document.getElementById("dd-helper").style.display = "none";
-                document.getElementById("dd-helper").removeEventListener("mousemove", move);
-                document.getElementById("dd-helper").removeEventListener("mouseup", moved);
-            }
-
-            document.getElementById("dd-helper").style.display = "block";
-            document.getElementById("dd-helper").addEventListener("mousemove", move);
-            document.getElementById("dd-helper").addEventListener("mouseup", moved);
-        },
-        resize(newWidth) {
-            this.width = newWidth;
-            document.getElementById("center").style[this.side] = newWidth + "px";
-        },
-        toggle() {
-            this.show = !this.show;
-
-            if (this.show) {
-                document.getElementById("center").style.transition = `${this.side} 200ms linear`;
-                document.getElementById("center").style[this.side] = this.width + "px";
-                setTimeout(() => {
-                    document.getElementById("center").style.transition = "";
-                }, 250);
-            } else {
-                document.getElementById("center").style.transition = `${this.side} 200ms linear`;
-                document.getElementById("center").style[this.side] = "0";
-                setTimeout(() => {
-                    document.getElementById("center").style.transition = "";
-                }, 250);
-            }
-        },
-        hide(timeout = 250) {
-            this.show = false;
-            document.getElementById("center").style.transition = `${this.side} 200ms linear`;
-            document.getElementById("center").style[this.side] = "0";
-            setTimeout(() => {
-                document.getElementById("center").style.transition = "";
-            }, timeout);
-        },
-    },
-};
-</script>
-
-<style scoped>
-.collapsed {
-    position: absolute;
-    bottom: 0;
-    margin: 0;
-}
-
-.unified-panel-outer-wrap {
-    transition-property: left, right;
-    transition-duration: 200ms;
-    transition-timing-function: linear;
-}
-</style>
diff --git a/client/src/components/Panels/ToolBox.vue b/client/src/components/Panels/ToolBox.vue
index 8ecdecb2796..650de69982c 100644
--- a/client/src/components/Panels/ToolBox.vue
+++ b/client/src/components/Panels/ToolBox.vue
@@ -5,7 +5,6 @@
                 <nav class="d-flex justify-content-between mx-3 my-2">
                     <h2 v-if="!showAdvanced" id="toolbox-heading" v-localize class="m-1 h-sm">Tools</h2>
                     <h2 v-else id="toolbox-heading" v-localize class="m-1 h-sm">Advanced Tool Search</h2>
-
                     <div class="panel-header-buttons">
                         <b-button-group>
                             <favorites-button v-if="!showAdvanced" :query="query" @onFavorites="onQuery" />
diff --git a/client/src/components/Panels/utilities.js b/client/src/components/Panels/utilities.js
index 2002922f037..cba1ce59364 100644
--- a/client/src/components/Panels/utilities.js
+++ b/client/src/components/Panels/utilities.js
@@ -48,6 +48,19 @@ export function createWhooshQuery(filterSettings, panelView, toolbox) {
     return query;
 }
 
+// Determines width given the root and draggable element, smallest and largest size and the current position
+export function determineWidth(rectRoot, rectDraggable, minWidth, maxWidth, direction, positionX) {
+    let newWidth = null;
+    if (direction === "right") {
+        const offset = rectRoot.left - rectDraggable.left;
+        newWidth = rectRoot.right - positionX - offset;
+    } else {
+        const offset = rectRoot.right - rectDraggable.left;
+        newWidth = positionX - rectRoot.left + offset;
+    }
+    return Math.max(minWidth, Math.min(maxWidth, newWidth));
+}
+
 // Given toolbox and search results, returns filtered tool results
 export function filterTools(tools, results) {
     let toolsResults = [];
diff --git a/client/src/components/Panels/utilities.test.js b/client/src/components/Panels/utilities.test.js
index 9c8cb662781..3203e49a956 100644
--- a/client/src/components/Panels/utilities.test.js
+++ b/client/src/components/Panels/utilities.test.js
@@ -1,7 +1,21 @@
 import toolsList from "components/ToolsView/testData/toolsList";
-import { createWhooshQuery, filterTools, filterToolSections, normalizeTools, searchToolsByKeys } from "./utilities";
+import {
+    createWhooshQuery,
+    determineWidth,
+    filterTools,
+    filterToolSections,
+    normalizeTools,
+    searchToolsByKeys,
+} from "./utilities";
+
+describe("test helpers in tool searching utilities and panel handling", () => {
+    it("panel width determination", () => {
+        const widthA = determineWidth({ left: 10, right: 200 }, { left: 90 }, 20, 200, "right", 160);
+        expect(widthA).toBe(120);
+        const widthB = determineWidth({ left: 30, right: 250 }, { left: 60 }, 30, 500, "left", 180);
+        expect(widthB).toBe(340);
+    });
 
-describe("test helpers in tool searching utilities", () => {
     it("test parsing helper that converts settings to whoosh query", async () => {
         const settings = {
             name: "Filter",
diff --git a/client/src/components/Tool/ToolForm.vue b/client/src/components/Tool/ToolForm.vue
index 1486b0455ce..4b6cabaf5d8 100644
--- a/client/src/components/Tool/ToolForm.vue
+++ b/client/src/components/Tool/ToolForm.vue
@@ -358,7 +358,7 @@ export default {
                         if ([true, "true"].includes(config.enable_tool_recommendations)) {
                             this.showRecommendation = true;
                         }
-                        document.querySelector(".center-panel").scrollTop = 0;
+                        document.querySelector("#center").scrollTop = 0;
                     }
                 },
                 (e) => {
diff --git a/client/src/components/Tour/TourStep.vue b/client/src/components/Tour/TourStep.vue
index a3107060172..0e55e653eb1 100644
--- a/client/src/components/Tour/TourStep.vue
+++ b/client/src/components/Tour/TourStep.vue
@@ -53,7 +53,6 @@ export default {
     methods: {
         createStep() {
             if (this.targetElement) {
-                this.targetElement.scrollIntoView({ behavior: "smooth" });
                 createPopper(this.targetElement, this.$refs["tour-element"], {
                     modifiers: [
                         {
diff --git a/client/src/components/Workflow/Editor/Index.vue b/client/src/components/Workflow/Editor/Index.vue
index f6ba4c59bd7..2cff63b6490 100644
--- a/client/src/components/Workflow/Editor/Index.vue
+++ b/client/src/components/Workflow/Editor/Index.vue
@@ -1,5 +1,5 @@
 <template>
-    <div id="columns" class="workflow-client">
+    <div v-if="isCanvas" id="columns" class="workflow-client d-flex">
         <StateUpgradeModal :state-messages="stateMessages" />
         <StateUpgradeModal
             :state-messages="insertedStateMessages"
@@ -26,142 +26,136 @@
                 <b-form-textarea v-model="saveAsAnnotation" />
             </b-form-group>
         </b-modal>
-        <MarkdownEditor
-            v-if="!isCanvas"
-            :markdown-text="markdownText"
-            :markdown-config="markdownConfig"
-            :title="'Workflow Report: ' + name"
-            :steps="steps"
-            @onUpdate="onReportUpdate">
-            <template v-slot:buttons>
-                <b-button
-                    id="workflow-canvas-button"
-                    v-b-tooltip.hover.bottom
-                    title="Return to Workflow"
-                    variant="link"
-                    role="button"
-                    @click="onEdit">
-                    <span class="fa fa-times" />
-                </b-button>
-            </template>
-        </MarkdownEditor>
-        <div v-show="isCanvas">
-            <SidePanel id="left" side="left">
-                <template v-slot:panel>
-                    <ProviderAwareToolBoxWorkflow
-                        :module-sections="moduleSections"
-                        :data-managers="dataManagers"
-                        :workflows="workflows"
-                        @onInsertTool="onInsertTool"
-                        @onInsertModule="onInsertModule"
-                        @onInsertWorkflow="onInsertWorkflow"
-                        @onInsertWorkflowSteps="onInsertWorkflowSteps" />
-                </template>
-            </SidePanel>
-            <div id="center" class="center-style workflow-center">
+        <FlexPanel side="left">
+            <ProviderAwareToolBoxWorkflow
+                :module-sections="moduleSections"
+                :data-managers="dataManagers"
+                :workflows="workflows"
+                @onInsertTool="onInsertTool"
+                @onInsertModule="onInsertModule"
+                @onInsertWorkflow="onInsertWorkflow"
+                @onInsertWorkflowSteps="onInsertWorkflowSteps" />
+        </FlexPanel>
+        <div id="center" class="workflow-center overflow-auto w-100">
+            <div class="unified-panel-header" unselectable="on">
+                <div class="unified-panel-header-inner">
+                    <span class="sr-only">Workflow Editor</span>
+                    {{ name }}
+                </div>
+            </div>
+            <workflow-graph
+                v-if="!datatypesMapperLoading"
+                :steps="steps"
+                :datatypes-mapper="datatypesMapper"
+                :highlight-id="highlightId"
+                :scroll-to-id="scrollToId"
+                @scrollTo="scrollToId = null"
+                @transform="(value) => (transform = value)"
+                @graph-offset="(value) => (graphOffset = value)"
+                @onUpdate="onUpdate"
+                @onClone="onClone"
+                @onCreate="onInsertTool"
+                @onChange="onChange"
+                @onConnect="onConnect"
+                @onRemove="onRemove"
+                @onUpdateStep="onUpdateStep"
+                @onUpdateStepPosition="onUpdateStepPosition">
+            </workflow-graph>
+        </div>
+        <FlexPanel side="right">
+            <div class="unified-panel workflow-panel">
                 <div class="unified-panel-header" unselectable="on">
                     <div class="unified-panel-header-inner">
-                        <span class="sr-only">Workflow Editor</span>
-                        {{ name }}
+                        <WorkflowOptions
+                            :has-changes="hasChanges"
+                            :has-invalid-connections="hasInvalidConnections"
+                            @onSave="onSave"
+                            @onSaveAs="onSaveAs"
+                            @onRun="onRun"
+                            @onDownload="onDownload"
+                            @onReport="onReport"
+                            @onLayout="onLayout"
+                            @onEdit="onEdit"
+                            @onAttributes="onAttributes"
+                            @onLint="onLint"
+                            @onUpgrade="onUpgrade" />
                     </div>
                 </div>
-                <workflow-graph
-                    v-if="!datatypesMapperLoading"
-                    :steps="steps"
-                    :datatypes-mapper="datatypesMapper"
-                    :highlight-id="highlightId"
-                    :scroll-to-id="scrollToId"
-                    @scrollTo="scrollToId = null"
-                    @transform="(value) => (transform = value)"
-                    @graph-offset="(value) => (graphOffset = value)"
-                    @onUpdate="onUpdate"
-                    @onClone="onClone"
-                    @onCreate="onInsertTool"
-                    @onChange="onChange"
-                    @onConnect="onConnect"
-                    @onRemove="onRemove"
-                    @onUpdateStep="onUpdateStep"
-                    @onUpdateStepPosition="onUpdateStepPosition">
-                </workflow-graph>
-            </div>
-            <SidePanel id="right" side="right">
-                <template v-slot:panel>
-                    <div class="unified-panel workflow-panel">
-                        <div class="unified-panel-header" unselectable="on">
-                            <div class="unified-panel-header-inner">
-                                <WorkflowOptions
-                                    :has-changes="hasChanges"
-                                    :has-invalid-connections="hasInvalidConnections"
-                                    @onSave="onSave"
-                                    @onSaveAs="onSaveAs"
-                                    @onRun="onRun"
-                                    @onDownload="onDownload"
-                                    @onReport="onReport"
-                                    @onLayout="onLayout"
-                                    @onEdit="onEdit"
-                                    @onAttributes="onAttributes"
-                                    @onLint="onLint"
-                                    @onUpgrade="onUpgrade" />
-                            </div>
-                        </div>
-                        <div ref="right-panel" class="unified-panel-body workflow-right p-2">
-                            <div>
-                                <FormTool
-                                    v-if="hasActiveNodeTool"
-                                    :key="activeStep.id"
-                                    :step="activeStep"
-                                    :datatypes="datatypes"
-                                    @onChangePostJobActions="onChangePostJobActions"
-                                    @onAnnotation="onAnnotation"
-                                    @onLabel="onLabel"
-                                    @onUpdateStep="onUpdateStep"
-                                    @onSetData="onSetData" />
-                                <FormDefault
-                                    v-else-if="hasActiveNodeDefault"
-                                    :step="activeStep"
-                                    :datatypes="datatypes"
-                                    @onAnnotation="onAnnotation"
-                                    @onLabel="onLabel"
-                                    @onEditSubworkflow="onEditSubworkflow"
-                                    @onAttemptRefactor="onAttemptRefactor"
-                                    @onUpdateStep="onUpdateStep"
-                                    @onSetData="onSetData" />
-                                <WorkflowAttributes
-                                    v-else-if="showAttributes"
-                                    :id="id"
-                                    :tags="tags"
-                                    :parameters="parameters"
-                                    :annotation-current.sync="annotation"
-                                    :annotation="annotation"
-                                    :name-current.sync="name"
-                                    :name="name"
-                                    :version="version"
-                                    :versions="versions"
-                                    :license="license"
-                                    :creator="creator"
-                                    @onVersion="onVersion"
-                                    @onLicense="onLicense"
-                                    @onCreator="onCreator" />
-                                <WorkflowLint
-                                    v-else-if="showLint"
-                                    :untyped-parameters="parameters"
-                                    :annotation="annotation"
-                                    :creator="creator"
-                                    :license="license"
-                                    :steps="steps"
-                                    :datatypes-mapper="datatypesMapper"
-                                    @onAttributes="onAttributes"
-                                    @onHighlight="onHighlight"
-                                    @onUnhighlight="onUnhighlight"
-                                    @onRefactor="onAttemptRefactor"
-                                    @onScrollTo="onScrollTo" />
-                            </div>
-                        </div>
+                <div ref="right-panel" class="unified-panel-body workflow-right p-2">
+                    <div>
+                        <FormTool
+                            v-if="hasActiveNodeTool"
+                            :key="activeStep.id"
+                            :step="activeStep"
+                            :datatypes="datatypes"
+                            @onChangePostJobActions="onChangePostJobActions"
+                            @onAnnotation="onAnnotation"
+                            @onLabel="onLabel"
+                            @onUpdateStep="onUpdateStep"
+                            @onSetData="onSetData" />
+                        <FormDefault
+                            v-else-if="hasActiveNodeDefault"
+                            :step="activeStep"
+                            :datatypes="datatypes"
+                            @onAnnotation="onAnnotation"
+                            @onLabel="onLabel"
+                            @onEditSubworkflow="onEditSubworkflow"
+                            @onAttemptRefactor="onAttemptRefactor"
+                            @onUpdateStep="onUpdateStep"
+                            @onSetData="onSetData" />
+                        <WorkflowAttributes
+                            v-else-if="showAttributes"
+                            :id="id"
+                            :tags="tags"
+                            :parameters="parameters"
+                            :annotation-current.sync="annotation"
+                            :annotation="annotation"
+                            :name-current.sync="name"
+                            :name="name"
+                            :version="version"
+                            :versions="versions"
+                            :license="license"
+                            :creator="creator"
+                            @onVersion="onVersion"
+                            @onLicense="onLicense"
+                            @onCreator="onCreator" />
+                        <WorkflowLint
+                            v-else-if="showLint"
+                            :untyped-parameters="parameters"
+                            :annotation="annotation"
+                            :creator="creator"
+                            :license="license"
+                            :steps="steps"
+                            :datatypes-mapper="datatypesMapper"
+                            @onAttributes="onAttributes"
+                            @onHighlight="onHighlight"
+                            @onUnhighlight="onUnhighlight"
+                            @onRefactor="onAttemptRefactor"
+                            @onScrollTo="onScrollTo" />
                     </div>
-                </template>
-            </SidePanel>
-        </div>
+                </div>
+            </div>
+        </FlexPanel>
     </div>
+    <MarkdownEditor
+        v-else
+        :markdown-text="markdownText"
+        :markdown-config="markdownConfig"
+        :title="'Workflow Report: ' + name"
+        :steps="steps"
+        @onUpdate="onReportUpdate">
+        <template v-slot:buttons>
+            <b-button
+                id="workflow-canvas-button"
+                v-b-tooltip.hover.bottom
+                title="Return to Workflow"
+                variant="link"
+                role="button"
+                @click="onEdit">
+                <span class="fa fa-times" />
+            </b-button>
+        </template>
+    </MarkdownEditor>
 </template>
 
 <script>
@@ -176,7 +170,7 @@ import FormDefault from "@/components/Workflow/Editor/Forms/FormDefault.vue";
 import FormTool from "@/components/Workflow/Editor/Forms/FormTool.vue";
 import MarkdownEditor from "@/components/Markdown/MarkdownEditor.vue";
 import ProviderAwareToolBoxWorkflow from "@/components/Panels/ProviderAwareToolBoxWorkflow.vue";
-import SidePanel from "@/components/Panels/SidePanel.vue";
+import FlexPanel from "@/components/Panels/FlexPanel.vue";
 import { getAppRoot } from "@/onload/loadConfig";
 import reportDefault from "./reportDefault";
 import WorkflowLint from "./Lint.vue";
@@ -199,7 +193,7 @@ import { useDatatypesMapper } from "@/composables/datatypesMapper";
 export default {
     components: {
         MarkdownEditor,
-        SidePanel,
+        FlexPanel,
         StateUpgradeModal,
         ProviderAwareToolBoxWorkflow,
         FormDefault,
@@ -732,9 +726,6 @@ export default {
 };
 </script>
 <style scoped>
-.workflow-markdown-editor {
-    right: 0px !important;
-}
 .reset-wheel {
     position: absolute;
     left: 1rem;
diff --git a/client/src/entry/analysis/modules/Admin.vue b/client/src/entry/analysis/modules/Admin.vue
index 452f4698540..658250404fc 100644
--- a/client/src/entry/analysis/modules/Admin.vue
+++ b/client/src/entry/analysis/modules/Admin.vue
@@ -1,38 +1,27 @@
+<script setup>
+import { computed } from "vue";
+import { useConfig } from "@/composables/config";
+import AdminPanel from "@/components/admin/AdminPanel.vue";
+import FlexPanel from "@/components/Panels/FlexPanel.vue";
+
+const { config, isLoaded } = useConfig();
+
+const panelProperties = computed(() => {
+    return {
+        enableQuotas: config.value.enable_quotas,
+        isToolshedInstalled: config.value.tool_shed_urls && config.value.tool_shed_urls.length > 0,
+        versionMajor: config.value.version_major,
+    };
+});
+</script>
+
 <template>
-    <div id="columns">
-        <SidePanel side="left" :current-panel="getAdminPanel()" :current-panel-properties="panelProperties" />
-        <div id="center" class="center-style">
-            <div class="center-container">
-                <div class="center-panel" style="display: block">
-                    <router-view :key="$route.fullPath" />
-                </div>
-            </div>
+    <div v-if="isLoaded" id="columns" class="d-flex">
+        <FlexPanel side="left">
+            <AdminPanel v-bind="panelProperties" />
+        </FlexPanel>
+        <div id="center" class="overflow-auto p-3 w-100">
+            <router-view :key="$route.fullPath" />
         </div>
     </div>
 </template>
-<script>
-import { getGalaxyInstance } from "app";
-import AdminPanel from "components/admin/AdminPanel";
-import SidePanel from "components/Panels/SidePanel";
-
-export default {
-    components: {
-        SidePanel,
-    },
-    computed: {
-        panelProperties() {
-            const config = getGalaxyInstance().config;
-            return {
-                enableQuotas: config.enable_quotas,
-                isToolshedInstalled: config.tool_shed_urls && config.tool_shed_urls.length > 0,
-                versionMajor: config.version_major,
-            };
-        },
-    },
-    methods: {
-        getAdminPanel() {
-            return AdminPanel;
-        },
-    },
-};
-</script>
diff --git a/client/src/entry/analysis/modules/Analysis.vue b/client/src/entry/analysis/modules/Analysis.vue
index 0664471c2f7..1f8be897aea 100644
--- a/client/src/entry/analysis/modules/Analysis.vue
+++ b/client/src/entry/analysis/modules/Analysis.vue
@@ -1,14 +1,13 @@
-<script setup lang="ts">
+<script setup>
+import { computed, ref, onMounted, onUnmounted } from "vue";
+import { useRoute, useRouter } from "vue-router/composables";
+import { useUserStore } from "@/stores/userStore";
 import HistoryIndex from "@/components/History/Index.vue";
 import ActivityBar from "@/components/ActivityBar/ActivityBar.vue";
-import ToolBox from "@/components/Panels/ProviderAwareToolBox.vue";
-import SidePanel from "@/components/Panels/SidePanel.vue";
+import ToolBox from "@/components/Panels/ProviderAwareToolBox";
 import DragAndDropModal from "@/components/Upload/DragAndDropModal.vue";
 import FlexPanel from "@/components/Panels/FlexPanel.vue";
 import CenterFrame from "./CenterFrame.vue";
-import { useRoute, useRouter } from "vue-router/composables";
-import { computed, ref, onMounted, onUnmounted } from "vue";
-import { useUserStore } from "@/stores/userStore";
 
 const route = useRoute();
 const router = useRouter();
@@ -49,8 +48,11 @@ onUnmounted(() => {
 });
 </script>
 <template>
-    <div v-if="showActivityBar" id="columns" class="d-flex">
-        <ActivityBar v-if="showPanels" />
+    <div id="columns" class="d-flex">
+        <ActivityBar v-if="showPanels && showActivityBar" />
+        <FlexPanel v-if="showPanels && !showActivityBar" side="left">
+            <ToolBox />
+        </FlexPanel>
         <div id="center" class="overflow-auto p-3 w-100">
             <CenterFrame v-show="showCenter" id="galaxy_main" @load="onLoad" />
             <router-view v-show="!showCenter" :key="$route.fullPath" class="h-100" />
@@ -60,17 +62,4 @@ onUnmounted(() => {
         </FlexPanel>
         <DragAndDropModal />
     </div>
-    <div v-else id="columns">
-        <SidePanel v-if="showPanels" side="left" :current-panel="ToolBox" :current-panel-properties="{}" />
-        <div id="center" class="center-style">
-            <div class="center-container">
-                <CenterFrame v-show="showCenter" id="galaxy_main" @load="onLoad" />
-                <div v-show="!showCenter" class="center-panel" style="display: block">
-                    <router-view :key="$route.fullPath" class="h-100" />
-                </div>
-            </div>
-        </div>
-        <SidePanel v-if="showPanels" side="right" :current-panel="HistoryIndex" :current-panel-properties="{}" />
-        <DragAndDropModal />
-    </div>
 </template>
diff --git a/client/src/entry/analysis/modules/Login.vue b/client/src/entry/analysis/modules/Login.vue
index 381bcf6bf9a..e3581f5d888 100644
--- a/client/src/entry/analysis/modules/Login.vue
+++ b/client/src/entry/analysis/modules/Login.vue
@@ -1,30 +1,24 @@
 <template>
-    <div id="columns">
-        <div id="center" class="center-style">
-            <div class="center-container">
-                <div class="center-panel" style="display: block">
-                    <ChangePassword
-                        v-if="hasToken"
-                        :expired-user="$route.query.expired_user"
-                        :message-text="$route.query.message"
-                        :message-variant="$route.query.status"
-                        :token="$route.query.token" />
-                    <LoginIndex
-                        v-else
-                        :allow-user-creation="config.allow_user_creation"
-                        :enable-oidc="config.enable_oidc"
-                        :mailing-join-addr="config.mailing_join_addr"
-                        :prefer-custos-login="config.prefer_custos_login"
-                        :redirect="$route.query.redirect"
-                        :registration-warning-message="config.registration_warning_message"
-                        :server-mail-configured="config.server_mail_configured"
-                        :session-csrf-token="sessionCsrfToken"
-                        :show-welcome-with-login="config.show_welcome_with_login"
-                        :terms-url="config.terms_url"
-                        :welcome-url="config.welcome_url" />
-                </div>
-            </div>
-        </div>
+    <div class="overflow-auto m-3">
+        <ChangePassword
+            v-if="hasToken"
+            :expired-user="$route.query.expired_user"
+            :message-text="$route.query.message"
+            :message-variant="$route.query.status"
+            :token="$route.query.token" />
+        <LoginIndex
+            v-else
+            :allow-user-creation="config.allow_user_creation"
+            :enable-oidc="config.enable_oidc"
+            :mailing-join-addr="config.mailing_join_addr"
+            :prefer-custos-login="config.prefer_custos_login"
+            :redirect="$route.query.redirect"
+            :registration-warning-message="config.registration_warning_message"
+            :server-mail-configured="config.server_mail_configured"
+            :session-csrf-token="sessionCsrfToken"
+            :show-welcome-with-login="config.show_welcome_with_login"
+            :terms-url="config.terms_url"
+            :welcome-url="config.welcome_url" />
     </div>
 </template>
 
diff --git a/client/src/style/scss/base.scss b/client/src/style/scss/base.scss
index 39e692fb43a..2a3cb110d1c 100644
--- a/client/src/style/scss/base.scss
+++ b/client/src/style/scss/base.scss
@@ -80,7 +80,6 @@ body {
 }
 
 // ==== Page layout styles ====
-
 .full-content {
     @extend .m-0;
     @extend .p-0;
@@ -127,58 +126,6 @@ body {
     display: none;
 }
 
-// ==== Panel layout styles ====
-
-.left-style,
-.right-style {
-    @extend .position-absolute;
-    @extend .h-100;
-}
-.left-style {
-    @extend .unified-panel;
-    left: 0px;
-    width: $panel-width;
-    overflow: unset !important;
-}
-.right-style {
-    @extend .unified-panel;
-    right: 0px;
-    width: $panel-width;
-    overflow: unset !important;
-}
-.right-style > .unified-panel-footer {
-    .drag {
-        left: 0;
-    }
-}
-.center-style {
-    @extend .position-absolute;
-    @extend .h-100;
-    left: $panel-width;
-    right: $panel-width;
-    .center-container {
-        @extend .position-absolute;
-        @extend .w-100;
-        @extend .h-100;
-        .center-panel {
-            @extend .position-absolute;
-            @extend .w-100;
-            @extend .h-100;
-            @extend .overflow-auto;
-            display: none;
-            padding: $margin-h $margin-v;
-            background: $white;
-        }
-    }
-    // Replaces unnecessary if/then logic in base_panels.mako
-    &:first-child {
-        left: 0;
-    }
-    &:last-child {
-        right: 0;
-    }
-}
-
 // ==== Unified panel styles ====
 .unified-panel {
     display: flex;
@@ -245,84 +192,8 @@ body {
     @extend .overflow-auto;
     flex: 1;
 }
-.unified-panel-body-background {
-    background: none repeat scroll 0 0 $panel-bg-color;
-}
-.unified-panel-footer {
-    @extend .unselectable;
-    position: relative;
-    height: $panel_footer_height;
-    line-height: $panel_footer_height;
-    width: 100%;
-    background: $panel-footer-bg-color;
-    color: $panel-header-text-color;
-    a {
-        color: $panel-header-text-color;
-    }
-    .drag {
-        position: absolute;
-        top: 0;
-        right: 0;
-        padding: 0 5px;
-        text-align: center;
-        height: $panel_footer_height;
-        width: $panel_footer_height - 5;
-        background-image: url(../../assets/images/visualization/draggable_horizontal.png);
-        background-repeat: no-repeat;
-        background-position: 50% 50%;
-        cursor: col-resize;
-    }
-}
-
-// Needs to be outside panel to show when hidden
-.panel-collapse {
-    @extend .fa;
-    $border-color: darken($panel-footer-bg-color, 20%);
-    font-size: 4/3em;
-    cursor: pointer;
-    display: block;
-    position: fixed;
-    text-align: center;
-    height: $panel_footer_height;
-    line-height: $panel_footer_height;
-    width: $panel_footer_height;
-    background: $panel-footer-bg-color;
-    border: solid $panel-footer-bg-color 1px;
-    z-index: 1;
-    &.right {
-        right: 0;
-        border-top-left-radius: $border-radius-base;
-        line-height: inherit;
-        &:before {
-            content: "\f054";
-        }
-        &.hidden:before {
-            content: "\f053";
-        }
-        &.hidden {
-            border-top-color: $border-color;
-            border-left-color: $border-color;
-        }
-    }
-    &.left {
-        left: 0;
-        border-top-right-radius: $border-radius-base;
-        line-height: inherit;
-        &:before {
-            content: "\f053";
-        }
-        &.hidden:before {
-            content: "\f054";
-        }
-        &.hidden {
-            border-top-color: $border-color;
-            border-right-color: $border-color;
-        }
-    }
-}
 
 // State colors
-
 $galaxy-state-border: (
     "new": $state-default-border,
     "upload": $state-info-border,
@@ -396,7 +267,6 @@ $galaxy-state-bg: (
 }
 
 // Button styles
-
 button {
     @extend .btn;
     @extend .btn-secondary;
diff --git a/client/src/style/scss/toolshed.scss b/client/src/style/scss/toolshed.scss
index 1be1c16cc9e..72a4c8b6885 100644
--- a/client/src/style/scss/toolshed.scss
+++ b/client/src/style/scss/toolshed.scss
@@ -20,7 +20,7 @@
     }
 }
 
-.masthead-toolshed {
+.masthead-simple {
     background-color: $brand-dark;
     height: $masthead-height;
     .navbar-brand {
diff --git a/client/src/utils/navigation/navigation.yml b/client/src/utils/navigation/navigation.yml
index 93776bf1cac..b1eab9f93bd 100644
--- a/client/src/utils/navigation/navigation.yml
+++ b/client/src/utils/navigation/navigation.yml
@@ -12,10 +12,10 @@ _:  # global stuff
     editable_text: '.editable-text'
     tooltip_balloon: '.tooltip'
     tooltip_inner: .tooltip-inner
-    left_panel_drag: '#left > .unified-panel-footer > .drag'
-    left_panel_collapse: '#left > .unified-panel-footer > .panel-collapse'
-    right_panel_drag: '#right > .unified-panel-footer > .drag'
-    right_panel_collapse: '#right > .unified-panel-footer > .panel-collapse'
+    left_panel_drag: '#left-drag'
+    left_panel_collapse: '#left-collapse'
+    right_panel_drag: '#right-drag'
+    right_panel_collapse: '#right-collapse'
     by_attribute: '${scope} [${name}="${value}"]'
 
   messages:
diff --git a/config/plugins/tours/core.deferred.yaml b/config/plugins/tours/core.deferred.yaml
index 56caba6767e..b3d80b40660 100644
--- a/config/plugins/tours/core.deferred.yaml
+++ b/config/plugins/tours/core.deferred.yaml
@@ -65,7 +65,7 @@ steps:
 
     - title: State Indicator
       component: history_panel.item(hid=1,state=deferred).state_icon
-      intro: This cloud icon indicates the dataset is deferred. Click to exapnd the dataset.
+      intro: This cloud icon indicates the dataset is deferred. Click to expand the dataset.
       postclick: true
 
     - title: A Note About Datatype/Format
diff --git a/config/plugins/tours/core.galaxy_ui.yaml b/config/plugins/tours/core.galaxy_ui.yaml
index 0169c5cd4fe..917054d6143 100644
--- a/config/plugins/tours/core.galaxy_ui.yaml
+++ b/config/plugins/tours/core.galaxy_ui.yaml
@@ -118,8 +118,23 @@ steps:
       intro: "By clicking the reload button, you can re-run your tool again (e.g. with different parameters or on another dataset)."
 
     - title: "Panel collapse"
-      element: "#left > div.unified-panel-footer > div.panel-collapse.left"
-      intro: "To extend the view for your main Galaxy page in the middle, you can collapse the tool panel on the left hand side. Clicking the panel arrow on the right hand side, collapses the history."
+      element: "#left-collapse"
+      intro: "To extend the view for your main Galaxy page in the middle, you can collapse the tool panel on the left hand side."
+      postclick: true
+
+    - title: "Panel expand"
+      element: "#left-expand"
+      intro: "Click on the expansion icon to restore the panel."
+      postclick: true
+
+    - title: "Panel collapse"
+      element: "#right-collapse"
+      intro: "Clicking the panel arrow on the right hand side, collapses the history."
+      postclick: true
+
+    - title: "Panel expand"
+      element: "#right-expand"
+      intro: "Click on the expansion icon to restore the panel."
       postclick: true
 
     - title: "Top panel"
diff --git a/lib/tool_shed/webapp/templates/base/base_panels.mako b/lib/tool_shed/webapp/templates/base/base_panels.mako
index b36491f8f84..39af7517f31 100644
--- a/lib/tool_shed/webapp/templates/base/base_panels.mako
+++ b/lib/tool_shed/webapp/templates/base/base_panels.mako
@@ -3,7 +3,6 @@
 
 <%
     self.has_left_panel = hasattr( self, 'left_panel' )
-    self.has_right_panel = hasattr( self, 'right_panel' )
     self.message_box_visible = app.config.message_box_visible
     self.show_inactivity_warning = False
     self.overlay_visible=False
@@ -171,30 +170,17 @@
 
             ${self.overlay(visible=self.overlay_visible)}
 
-            <div id="columns">
+            <div id="columns" class="d-flex">
                 %if self.has_left_panel:
                     <div id="left">
                         ${self.left_panel()}
-                        <div class="unified-panel-footer">
-                            <div id="left-panel-collapse" class="panel-collapse left"></div>
-                            <div id="left-panel-drag" class="drag"></div>
-                        </div>
-                    </div><!--end left-->
+                    </div>
                 %endif
                 <div id="center" class="inbound">
                     ${self.center_panel()}
-                </div><!--end center-->
-                %if self.has_right_panel:
-                    <div id="right">
-                        ${self.right_panel()}
-                        <div class="unified-panel-footer">
-                            <div id="right-panel-collapse" class="panel-collapse right"></div>
-                            <div id="right-panel-drag" class="drag"></div>
-                        </div>
-                    </div><!--end right-->
-                %endif
-            </div><!--end columns-->
-        </div><!--end everything-->
+                </div>
+            </div>
+        </div>
 
         <div id='dd-helper' style="display: none;"></div>
         ## Allow other body level elements
diff --git a/lib/tool_shed/webapp/templates/message.mako b/lib/tool_shed/webapp/templates/message.mako
index b2aca8d0199..f3a77429b05 100644
--- a/lib/tool_shed/webapp/templates/message.mako
+++ b/lib/tool_shed/webapp/templates/message.mako
@@ -22,7 +22,6 @@
 <%def name="init()">
 <%
     self.has_left_panel=False
-    self.has_right_panel=False
     self.active_view=active_view
     self.message_box_visible=False
 %>
diff --git a/lib/tool_shed/webapp/templates/webapps/tool_shed/admin/index.mako b/lib/tool_shed/webapp/templates/webapps/tool_shed/admin/index.mako
index fdd53b539f9..0b7aa4bfe7e 100644
--- a/lib/tool_shed/webapp/templates/webapps/tool_shed/admin/index.mako
+++ b/lib/tool_shed/webapp/templates/webapps/tool_shed/admin/index.mako
@@ -18,7 +18,6 @@
     ${parent.init()}
     <%
         self.has_left_panel=True
-        self.has_right_panel=False
         self.active_view="tools"
     %>
     %if trans.app.config.require_login and not trans.user:
@@ -34,7 +33,7 @@
     <div class="unified-panel-header" unselectable="on">
         <div class='unified-panel-header-inner'>Administration</div>
     </div>
-    <div class="unified-panel-body">
+    <div style="padding: 0.5rem;">
         <div class="toolMenu">
             <div class="toolSectionList">
                 <div class="toolSectionTitle">
@@ -102,5 +101,5 @@
     <%
         center_url = h.url_for(controller='admin', action='center' )
     %>
-    <iframe name="galaxy_main" id="galaxy_main" frameborder="0" style="position: absolute; width: 100%; height: 100%;" src="${center_url}"> </iframe>
+    <iframe name="galaxy_main" id="galaxy_main" frameborder="0" style="position: absolute; width: 75%; height: 100%;" src="${center_url}"> </iframe>
 </%def>
diff --git a/lib/tool_shed/webapp/templates/webapps/tool_shed/base_panels.mako b/lib/tool_shed/webapp/templates/webapps/tool_shed/base_panels.mako
index ea8a4275604..fde88dc4aae 100644
--- a/lib/tool_shed/webapp/templates/webapps/tool_shed/base_panels.mako
+++ b/lib/tool_shed/webapp/templates/webapps/tool_shed/base_panels.mako
@@ -56,7 +56,7 @@
     %endif
 
     ## start main tag
-    <nav id="masthead" class="masthead-toolshed navbar navbar-expand navbar-fixed-top justify-content-center navbar-dark">
+    <nav id="masthead" class="masthead-simple navbar navbar-expand navbar-fixed-top justify-content-center navbar-dark">
 
         ## Logo, layered over tabs to be clickable
         <a href="${h.url_for( app.config.get( 'logo_url', '/' ) )}" aria-label="homepage" class="navbar-brand">
diff --git a/lib/tool_shed/webapp/templates/webapps/tool_shed/index.mako b/lib/tool_shed/webapp/templates/webapps/tool_shed/index.mako
index 7b3d776af14..3edd24d5381 100644
--- a/lib/tool_shed/webapp/templates/webapps/tool_shed/index.mako
+++ b/lib/tool_shed/webapp/templates/webapps/tool_shed/index.mako
@@ -15,7 +15,6 @@
     ${parent.init()}
     <%
         self.has_left_panel=True
-        self.has_right_panel=False
         self.active_view="tools"
     %>
     %if trans.app.config.require_login and not trans.user:
@@ -31,7 +30,7 @@
     <div class="unified-panel-header" unselectable="on">
         <div class='unified-panel-header-inner'>${trans.app.shed_counter.unique_valid_tools | h} valid tools on ${util.unicodify( trans.app.shed_counter.generation_time ) | h}</div>
     </div>
-    <div class="unified-panel-body">
+    <div style="padding: 0.5rem;">
         <div class="toolMenu">
             <div class="toolSectionList">
                 %if user_id or repository_id:
@@ -158,5 +157,5 @@
         else:
             center_url = h.url_for( controller='repository', action='browse_categories', message=message, status=status )
     %>
-    <iframe name="galaxy_main" id="galaxy_main" frameborder="0" style="position: absolute; width: 100%; height: 100%;" src="${center_url}"></iframe>
+    <iframe name="galaxy_main" id="galaxy_main" frameborder="0" style="position: absolute; width: 75%; height: 100%;" src="${center_url}"></iframe>
 </%def>
diff --git a/lib/tool_shed/webapp/templates/webapps/tool_shed/user/login.mako b/lib/tool_shed/webapp/templates/webapps/tool_shed/user/login.mako
index 919d0e4b5d3..e2cc738402f 100644
--- a/lib/tool_shed/webapp/templates/webapps/tool_shed/user/login.mako
+++ b/lib/tool_shed/webapp/templates/webapps/tool_shed/user/login.mako
@@ -12,7 +12,6 @@ def inherit(context):
 <%def name="init()">
 <%
     self.has_left_panel=False
-    self.has_right_panel=False
     self.active_view=active_view
     self.message_box_visible=False
 %>
diff --git a/lib/tool_shed/webapp/templates/webapps/tool_shed/user/logout.mako b/lib/tool_shed/webapp/templates/webapps/tool_shed/user/logout.mako
index 5d388a2c241..28be45ce8d2 100644
--- a/lib/tool_shed/webapp/templates/webapps/tool_shed/user/logout.mako
+++ b/lib/tool_shed/webapp/templates/webapps/tool_shed/user/logout.mako
@@ -14,7 +14,6 @@ def inherit(context):
 <%def name="init()">
 <%
     self.has_left_panel=False
-    self.has_right_panel=False
     self.message_box_visible=False
     self.active_view="user"
     self.overlay_visible=False
diff --git a/lib/tool_shed/webapp/templates/webapps/tool_shed/user/register.mako b/lib/tool_shed/webapp/templates/webapps/tool_shed/user/register.mako
index e6e4fd01a87..af1137040e9 100644
--- a/lib/tool_shed/webapp/templates/webapps/tool_shed/user/register.mako
+++ b/lib/tool_shed/webapp/templates/webapps/tool_shed/user/register.mako
@@ -4,7 +4,6 @@
 <%def name="init()">
 <%
     self.has_left_panel=False
-    self.has_right_panel=False
     self.active_view="user"
     self.message_box_visible=False
 %>
diff --git a/templates/base/base_panels.mako b/templates/base/base_panels.mako
index ea4410e0c2b..a84daac9eea 100644
--- a/templates/base/base_panels.mako
+++ b/templates/base/base_panels.mako
@@ -142,10 +142,8 @@
             <div id="background"></div>
             
             ## Layer iframes over backgrounds
-            <div id="masthead" class="navbar navbar-fixed-top navbar-inverse">
-                ${self.masthead()}
-            </div>
-            
+            ${self.masthead()}
+
             %if self.message_box_visible:
                 <div id="messagebox" class="alert alert-${app.config.message_box_class} rounded-0 m-0 p-2">
                     ${app.config.message_box_content}
@@ -160,30 +158,22 @@
             
             ${self.overlay(visible=self.overlay_visible)}
             
-            <div id="columns">
+            <div id="columns" class="d-flex">
                 %if self.has_left_panel:
-                    <div id="left">
+                    <div id="left" style="overflow: auto;">
                         ${self.left_panel()}
-                        <div class="unified-panel-footer">
-                            <div id="left-panel-collapse" class="panel-collapse left"></div>
-                            <div id="left-panel-drag" class="drag"></div>
-                        </div>
-                    </div><!--end left-->
+                    </div>
                 %endif
                 <div id="center" class="inbound">
                     ${self.center_panel()}
-                </div><!--end center-->
+                </div>
                 %if self.has_right_panel:
                     <div id="right">
                         ${self.right_panel()}
-                        <div class="unified-panel-footer">
-                            <div id="right-panel-collapse" class="panel-collapse right"></div>
-                            <div id="right-panel-drag" class="drag"></div>
-                        </div>
-                    </div><!--end right-->
+                    </div>
                 %endif
-            </div><!--end columns-->
-        </div><!--end everything-->
+            </div>
+        </div>
 
         <div id='dd-helper' style="display: none;"></div>
         ## Allow other body level elements
diff --git a/templates/webapps/reports/base_panels.mako b/templates/webapps/reports/base_panels.mako
index 5e4b8e7cb0b..42e7b96e4b5 100644
--- a/templates/webapps/reports/base_panels.mako
+++ b/templates/webapps/reports/base_panels.mako
@@ -17,32 +17,16 @@
 
 ## Masthead
 <%def name="masthead()">
-    ## Tab area, fills entire width
-    <div style="position: absolute; top: 0; left: 0; width: 100%; text-align: center">
-        <table class="tab-group" border="0" cellspacing="0" style="margin: auto;">
-            <tr>
-                <%def name="tab( id, display, href, target='_parent', visible=True, extra_class='' )">
-                    <%
-                    cls = "tab"
-                    if extra_class:
-                        cls += " " + extra_class
-                    if self.active_view == id:
-                        cls += " active"
-                    style = ""
-                    if not visible:
-                        style = "display: none;"
-                    %>
-                    <td class="${cls}" style="${style}"><a target="${target}" href="${href}">${display}</a></td>
-                </%def>
-            </tr>
-        </table>
-    </div>
-    ## Logo, layered over tabs to be clickable
-    <a class="navbar-brand" href="${h.url_for( app.config.get( 'logo_url', '/' ) )}">
-        <img class="navbar-brand-image" src="${h.url_for('/static/favicon.svg')}" />
-        <span class="navbar-brand-title">Galaxy Reports</span>
-        %if app.config.brand:
-            <span class='brand'>/ ${app.config.brand}</span>
-        %endif
-    </a>
+    <nav id="masthead" class="masthead-simple navbar navbar-expand navbar-fixed-top justify-content-center navbar-dark">
+        <a href="${h.url_for( app.config.get( 'logo_url', '/' ) )}" aria-label="homepage" class="navbar-brand">
+            <img alt="logo" class="navbar-brand-image" src="${h.url_for('/static/favicon.svg')}">
+            <span class="navbar-brand-title">
+                Reports
+                %if app.config.brand:
+                    / ${app.config.brand}
+                %endif
+            </span>
+        </a>
+         <ul class="navbar-nav"/>
+    </nav>
 </%def>
diff --git a/templates/webapps/reports/index.mako b/templates/webapps/reports/index.mako
index 4489864e802..fab0147712c 100644
--- a/templates/webapps/reports/index.mako
+++ b/templates/webapps/reports/index.mako
@@ -35,7 +35,7 @@
             </a>
         </div>
     </div>
-    <div class="unified-panel-body">
+    <div style="padding: 0.5rem;">
         <div class="toolMenu">
             <div class="toolSectionList">
                 <div class="toolSectionPad"></div>
@@ -121,5 +121,5 @@
 
 <%def name="center_panel()">
     <% center_url = h.url_for( controller='home', action='run_stats' ) %>
-    <iframe name="galaxy_main" id="galaxy_main" frameborder="0" style="position: absolute; width: 100%; height: 100%;" src="${center_url}"> </iframe>
+    <iframe name="galaxy_main" id="galaxy_main" frameborder="0" style="position: absolute; width: 75%; height: 100%;" src="${center_url}"> </iframe>
 </%def>