diff --git a/index.html b/index.html
index 07f29df3..431aee46 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" style="font-size:0.85rem">
   <head>
     <meta charset="UTF-8">
     <title>ComfyUI</title>
@@ -9,6 +9,7 @@
   </head>
   <body class="litegraph grid">
     <div id="vue-app"></div>
+    <div id="modals"></div>
     <div id="comfy-user-selection" class="comfy-user-selection" style="display: none;">
       <main class="comfy-user-selection-inner">
         <h1>ComfyUI</h1>
diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index 6116f842..52c85678 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -76,38 +76,6 @@ body {
   +------------------+------------------+------------------+
 */
 
-.comfyui-body-top {
-  order: -5;
-  /* Span across all columns */
-  grid-column: 1/-1;
-  /* Position at the first row */
-  grid-row: 1;
-  /* Top menu bar dropdown needs to be above of graph canvas splitter overlay which is z-index: 999 */
-  z-index: 1000;
-  display: flex;
-  flex-direction: column;
-}
-
-.comfyui-body-left {
-  order: -4;
-  /* Position in the first column */
-  grid-column: 1;
-  /* Position below the top element */
-  grid-row: 2;
-  z-index: 10;
-  display: flex;
-}
-
-.graph-canvas-container {
-  width: 100%;
-  height: 100%;
-  order: -3;
-  grid-column: 2;
-  grid-row: 2;
-  position: relative;
-  overflow: hidden;
-}
-
 #graph-canvas {
   width: 100%;
   height: 100%;
@@ -702,7 +670,6 @@ audio.comfy-audio.empty-audio-widget {
   left: 0;
   width: 100%;
   height: 100%;
-  pointer-events: none;
 }
 
 /* Set auto complete panel's width as it is not accessible within vue-root */
diff --git a/src/components/appMenu/AppMenu.vue b/src/components/appMenu/AppMenu.vue
index ac5c189c..c1425578 100644
--- a/src/components/appMenu/AppMenu.vue
+++ b/src/components/appMenu/AppMenu.vue
@@ -73,7 +73,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, nextTick, onMounted, ref, watch } from 'vue'
+import { computed, nextTick, onMounted, onBeforeUnmount, ref, watch } from 'vue'
 import Panel from 'primevue/panel'
 import Divider from 'primevue/divider'
 import SplitButton from 'primevue/splitbutton'
@@ -192,10 +192,12 @@ const setInitialPosition = () => {
     y.value = screenHeight - menuHeight - 10 // 10px margin from bottom
   }
 }
-onMounted(setInitialPosition)
+
 watch(visible, (newVisible) => {
   if (newVisible) {
-    nextTick(setInitialPosition)
+    nextTick(() => {
+      setInitialPosition()
+    })
   }
 })
 
@@ -214,7 +216,14 @@ const adjustMenuPosition = () => {
   }
 }
 
-useEventListener(window, 'resize', adjustMenuPosition)
+onMounted(() => {
+  setInitialPosition()
+  window.addEventListener('resize', adjustMenuPosition)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', adjustMenuPosition)
+})
 </script>
 
 <style scoped>
diff --git a/src/components/graph/GraphCanvas.vue b/src/components/graph/GraphCanvas.vue
index 630b1da2..fd2f4b95 100644
--- a/src/components/graph/GraphCanvas.vue
+++ b/src/components/graph/GraphCanvas.vue
@@ -1,21 +1,22 @@
 <template>
-  <teleport to=".graph-canvas-container">
-    <LiteGraphCanvasSplitterOverlay v-if="betaMenuEnabled">
-      <template #side-bar-panel>
-        <SideToolbar />
-      </template>
-    </LiteGraphCanvasSplitterOverlay>
+  <div
+    :class="[
+      betaMenuEnabled
+        ? 'left-12 top-10 w-[calc(100vw-3.0rem)] h-[calc(100vh-2.5rem)]'
+        : 'left-0 top-0 w-full h-full'
+    ]"
+    class="graph-canvas-container absolute overflow-hidden"
+  >
     <TitleEditor />
     <canvas ref="canvasRef" id="graph-canvas" tabindex="1" />
-  </teleport>
+  </div>
+
   <NodeSearchboxPopover />
   <NodeTooltip />
 </template>
 
 <script setup lang="ts">
 import TitleEditor from '@/components/graph/TitleEditor.vue'
-import SideToolbar from '@/components/sidebar/SideToolbar.vue'
-import LiteGraphCanvasSplitterOverlay from '@/components/LiteGraphCanvasSplitterOverlay.vue'
 import NodeSearchboxPopover from '@/components/searchbox/NodeSearchBoxPopover.vue'
 import NodeTooltip from '@/components/graph/NodeTooltip.vue'
 import { ref, computed, onUnmounted, onMounted, watchEffect } from 'vue'
@@ -46,12 +47,14 @@ import { ComfyModelDef } from '@/stores/modelStore'
 import { useModelToNodeStore } from '@/stores/modelToNodeStore'
 
 const emit = defineEmits(['ready'])
+
 const canvasRef = ref<HTMLCanvasElement | null>(null)
 const settingStore = useSettingStore()
 const nodeDefStore = useNodeDefStore()
 const workspaceStore = useWorkspaceStore()
 const canvasStore = useCanvasStore()
 const modelToNodeStore = useModelToNodeStore()
+
 const betaMenuEnabled = computed(
   () => settingStore.get('Comfy.UseNewMenu') !== 'Disabled'
 )
@@ -111,6 +114,7 @@ onMounted(async () => {
 
   workspaceStore.spinner = true
   await comfyApp.setup(canvasRef.value)
+
   canvasStore.canvas = comfyApp.canvas
   workspaceStore.spinner = false
 
diff --git a/src/components/sidebar/SideToolbar.vue b/src/components/sidebar/SideToolbar.vue
index 69984d2b..38b880d5 100644
--- a/src/components/sidebar/SideToolbar.vue
+++ b/src/components/sidebar/SideToolbar.vue
@@ -1,6 +1,9 @@
 <template>
-  <teleport :to="teleportTarget">
-    <nav :class="'side-tool-bar-container' + (isSmall ? ' small-sidebar' : '')">
+  <div
+    class="SideToolbar side-tool-bar-container bg-zinc-950 flex-1 py-1 fixed z-[500] w-12 top-10 h-[calc(100vh-2.5rem)] flex flex-col items-center justify-between"
+    :class="isSmall ? ' small-sidebar' : ''"
+  >
+    <nav class="flex flex-col items-center space-y-1">
       <SidebarIcon
         v-for="tab in tabs"
         :key="tab.id"
@@ -11,27 +14,39 @@
         :class="tab.id + '-tab-button'"
         @click="onTabClick(tab)"
       />
-      <div class="side-tool-bar-end">
-        <SidebarThemeToggleIcon />
-        <SidebarSettingsToggleIcon />
-      </div>
     </nav>
-  </teleport>
-  <div v-if="selectedTab" class="sidebar-content-container">
-    <component v-if="selectedTab.type === 'vue'" :is="selectedTab.component" />
-    <div
-      v-else
-      :ref="
-        (el) => {
-          if (el)
-            mountCustomTab(
-              selectedTab as CustomSidebarTabExtension,
-              el as HTMLElement
-            )
-        }
-      "
-    ></div>
+    <div class="flex-1">
+      <!-- dummy -->
+    </div>
+    <nav class="flex-1 flex flex-col items-center justify-end space-y-1">
+      <SidebarThemeToggleIcon />
+      <SidebarSettingsToggleIcon />
+    </nav>
   </div>
+
+  <teleport to="#modals">
+    <div
+      v-if="selectedTab"
+      class="duration-300 fixed z-50 left-11 top-10 w-84 h-[calc(100vh-2.5rem)]"
+    >
+      <component
+        v-if="selectedTab.type === 'vue'"
+        :is="selectedTab.component"
+      />
+      <div
+        v-else
+        :ref="
+          (el) => {
+            if (el)
+              mountCustomTab(
+                selectedTab as CustomSidebarTabExtension,
+                el as HTMLElement
+              )
+          }
+        "
+      ></div>
+    </div>
+  </teleport>
 </template>
 
 <script setup lang="ts">
@@ -49,12 +64,6 @@ import {
 const workspaceStore = useWorkspaceStore()
 const settingStore = useSettingStore()
 
-const teleportTarget = computed(() =>
-  settingStore.get('Comfy.Sidebar.Location') === 'left'
-    ? '.comfyui-body-left'
-    : '.comfyui-body-right'
-)
-
 const isSmall = computed(
   () => settingStore.get('Comfy.Sidebar.Size') === 'small'
 )
@@ -81,39 +90,18 @@ onBeforeUnmount(() => {
 })
 </script>
 
-<style>
-:root {
-  --sidebar-width: 64px;
-  --sidebar-icon-size: 1.5rem;
-}
-:root .small-sidebar {
-  --sidebar-width: 40px;
-  --sidebar-icon-size: 1rem;
-}
-</style>
-
 <style scoped>
 .side-tool-bar-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  pointer-events: auto;
-
-  width: var(--sidebar-width);
-  height: 100%;
-
+  /*
   background-color: var(--comfy-menu-bg);
-  color: var(--fg-color);
-}
-
-.side-tool-bar-end {
-  align-self: flex-end;
-  margin-top: auto;
+  color: var(--comfyui-text-color);
+  */
 }
 
 .sidebar-content-container {
   height: 100%;
   overflow-y: auto;
+  background-color: var(--comfy-menu-bg);
+  color: var(--fg-color);
 }
 </style>
diff --git a/src/components/sidebar/SidebarIcon.vue b/src/components/sidebar/SidebarIcon.vue
index 76316a8a..356b0e9f 100644
--- a/src/components/sidebar/SidebarIcon.vue
+++ b/src/components/sidebar/SidebarIcon.vue
@@ -12,6 +12,7 @@
         'aria-label': props.tooltip
       }
     }"
+    class="w-10 h-10 bg-zinc-900/50"
     @click="emit('click', $event)"
     v-tooltip="{ value: props.tooltip, showDelay: 300, hideDelay: 300 }"
   >
@@ -54,32 +55,3 @@ const overlayValue = computed(() =>
 )
 const shouldShowBadge = computed(() => !!overlayValue.value)
 </script>
-
-<style>
-.side-bar-button-icon {
-  font-size: var(--sidebar-icon-size) !important;
-}
-
-.side-bar-button-selected .side-bar-button-icon {
-  font-size: var(--sidebar-icon-size) !important;
-  font-weight: bold;
-}
-</style>
-
-<style scoped>
-.side-bar-button {
-  width: var(--sidebar-width);
-  height: var(--sidebar-width);
-  border-radius: 0;
-}
-
-.comfyui-body-left .side-bar-button.side-bar-button-selected,
-.comfyui-body-left .side-bar-button.side-bar-button-selected:hover {
-  border-left: 4px solid var(--p-button-text-primary-color);
-}
-
-.comfyui-body-right .side-bar-button.side-bar-button-selected,
-.comfyui-body-right .side-bar-button.side-bar-button-selected:hover {
-  border-right: 4px solid var(--p-button-text-primary-color);
-}
-</style>
diff --git a/src/components/sidebar/tabs/QueueSidebarTab.vue b/src/components/sidebar/tabs/QueueSidebarTab.vue
index d3c0336c..f90aa893 100644
--- a/src/components/sidebar/tabs/QueueSidebarTab.vue
+++ b/src/components/sidebar/tabs/QueueSidebarTab.vue
@@ -74,7 +74,7 @@
           style="width: 50px; left: 50%; transform: translateX(-50%)"
         />
       </div>
-      <div v-else>
+      <div v-else class="bg-zinc-900 h-full">
         <NoResultsPlaceholder
           icon="pi pi-info-circle"
           :title="$t('noTasksFound')"
diff --git a/src/components/sidebar/tabs/SidebarTabTemplate.vue b/src/components/sidebar/tabs/SidebarTabTemplate.vue
index 3dd85e9a..518e8188 100644
--- a/src/components/sidebar/tabs/SidebarTabTemplate.vue
+++ b/src/components/sidebar/tabs/SidebarTabTemplate.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="comfy-vue-side-bar-container">
-    <Toolbar class="comfy-vue-side-bar-header">
+    <Toolbar class="comfy-vue-side-bar-header h-12">
       <template #start>
         <span class="comfy-vue-side-bar-header-span">{{
           props.title.toUpperCase()
@@ -42,7 +42,6 @@ const props = defineProps({
   border-top: none;
   border-radius: 0;
   padding: 0.25rem 1rem;
-  min-height: 2.5rem;
 }
 
 .comfy-vue-side-bar-header-span {
diff --git a/src/components/topbar/TopMenubar.vue b/src/components/topbar/TopMenubar.vue
index 086545ca..9fe03a93 100644
--- a/src/components/topbar/TopMenubar.vue
+++ b/src/components/topbar/TopMenubar.vue
@@ -1,22 +1,22 @@
 <template>
-  <teleport to=".comfyui-body-top">
-    <div class="comfyui-menu flex items-center" v-show="betaMenuEnabled">
-      <h1 class="comfyui-logo mx-2">ComfyUI</h1>
-      <Menubar
-        :model="items"
-        class="top-menubar border-none p-0 bg-transparent"
-        :pt="{
-          rootList: 'gap-0 flex-nowrap'
-        }"
-      />
-      <Divider layout="vertical" class="mx-2" />
-      <WorkflowTabs
-        v-if="workflowTabsPosition === 'Topbar'"
-        class="flex-grow"
-      />
-      <div class="comfyui-menu-right" ref="menuRight"></div>
-    </div>
-  </teleport>
+  <header class="TopMenubar comfyui-body-top h-10 drop-shadow-2xl">
+    <h1 class="comfyui-logo select-none mx-2 text-base">ComfyUI</h1>
+
+    <Divider layout="vertical" class="mx-2" />
+
+    <Menubar
+      :model="items"
+      class="top-menubar text-xs font-semibold border-none p-0 bg-transparent"
+      :pt="{
+        rootList: 'gap-0 flex-nowrap'
+      }"
+    />
+
+    <Divider layout="vertical" class="mx-2" />
+
+    <WorkflowTabs v-if="workflowTabsPosition === 'Topbar'" class="flex-grow" />
+    <div class="comfyui-menu-right" ref="menuRight"></div>
+  </header>
 </template>
 
 <script setup lang="ts">
@@ -32,13 +32,11 @@ const settingStore = useSettingStore()
 const workflowTabsPosition = computed(() =>
   settingStore.get('Comfy.Workflow.WorkflowTabsPosition')
 )
-const betaMenuEnabled = computed(
-  () => settingStore.get('Comfy.UseNewMenu') !== 'Disabled'
-)
 const menuItemsStore = useMenuItemStore()
 const items = menuItemsStore.menuItems
 
 const menuRight = ref<HTMLDivElement | null>(null)
+
 // Menu-right holds legacy topbar elements attached by custom scripts
 onMounted(() => {
   if (menuRight.value) {
@@ -48,23 +46,12 @@ onMounted(() => {
 </script>
 
 <style scoped>
-.comfyui-menu {
-  width: 100vw;
-  background: var(--comfy-menu-bg);
-  color: var(--fg-color);
-  font-family: Arial, Helvetica, sans-serif;
-  font-size: 0.8em;
-  box-sizing: border-box;
-  z-index: 1000;
-  order: 0;
-  grid-column: 1/-1;
-  max-height: 90vh;
-}
-
-.comfyui-logo {
-  font-size: 1.2em;
-  user-select: none;
-  cursor: default;
+.TopMenubar {
+  @apply border-b-2 border-red-900 text-sm;
+  @apply w-full flex items-center z-[1000];
+  @apply text-white;
+  background-color: var(--comfyui-bg-color);
+  color: var(--comfyui-text-color);
 }
 </style>
 
diff --git a/src/scripts/app.ts b/src/scripts/app.ts
index 3a4a90e1..f5fff9aa 100644
--- a/src/scripts/app.ts
+++ b/src/scripts/app.ts
@@ -128,8 +128,6 @@ export class ComfyApp {
   ctx: CanvasRenderingContext2D
   widgets: Record<string, ComfyWidgetConstructor>
   workflowManager: ComfyWorkflowManager
-  bodyTop: HTMLElement
-  bodyLeft: HTMLElement
   bodyRight: HTMLElement
   bodyBottom: HTMLElement
   canvasContainer: HTMLElement
@@ -146,13 +144,10 @@ export class ComfyApp {
     this.ui = new ComfyUI(this)
     this.logging = new ComfyLogging(this)
     this.workflowManager = new ComfyWorkflowManager(this)
-    this.bodyTop = $el('div.comfyui-body-top', { parent: document.body })
-    this.bodyLeft = $el('div.comfyui-body-left', { parent: document.body })
+
     this.bodyRight = $el('div.comfyui-body-right', { parent: document.body })
     this.bodyBottom = $el('div.comfyui-body-bottom', { parent: document.body })
-    this.canvasContainer = $el('div.graph-canvas-container', {
-      parent: document.body
-    })
+
     this.menu = new ComfyAppMenu(this)
 
     /**
@@ -1831,6 +1826,8 @@ export class ComfyApp {
    */
   async setup(canvasEl: HTMLCanvasElement) {
     this.canvasEl = canvasEl
+    this.canvasContainer = canvasEl.parentElement
+
     await this.#setUser()
 
     this.resizeCanvas()
@@ -1862,9 +1859,9 @@ export class ComfyApp {
     // Ensure the canvas fills the window
     this.resizeCanvas()
     window.addEventListener('resize', () => this.resizeCanvas())
+
     const ro = new ResizeObserver(() => this.resizeCanvas())
-    ro.observe(this.bodyTop)
-    ro.observe(this.bodyLeft)
+
     ro.observe(this.bodyRight)
     ro.observe(this.bodyBottom)
 
diff --git a/src/views/GraphView.vue b/src/views/GraphView.vue
index 47b4a07a..d100d261 100644
--- a/src/views/GraphView.vue
+++ b/src/views/GraphView.vue
@@ -1,7 +1,4 @@
 <template>
-  <!-- Top menu bar needs to load before the GraphCanvas as it needs to host
-  the menu buttons added by legacy extension scripts.-->
-  <TopMenubar />
   <GraphCanvas />
   <GlobalToast />
   <UnloadWindowConfirmDialog />
@@ -43,7 +40,6 @@ import UnloadWindowConfirmDialog from '@/components/dialog/UnloadWindowConfirmDi
 import BrowserTabTitle from '@/components/BrowserTabTitle.vue'
 import AppMenu from '@/components/appMenu/AppMenu.vue'
 import WorkflowsSidebarTab from '@/components/sidebar/tabs/WorkflowsSidebarTab.vue'
-import TopMenubar from '@/components/topbar/TopMenubar.vue'
 import { setupAutoQueueHandler } from '@/services/autoQueueService'
 
 setupAutoQueueHandler()
diff --git a/src/views/layouts/LayoutDefault.vue b/src/views/layouts/LayoutDefault.vue
index 331f71a3..ebc3c096 100644
--- a/src/views/layouts/LayoutDefault.vue
+++ b/src/views/layouts/LayoutDefault.vue
@@ -1,5 +1,24 @@
 <template>
-  <main class="w-full min-h-screen overflow-hidden relative">
-    <router-view />
+  <main class="LayoutDefault w-full min-h-screen flex flex-col relative">
+    <TopMenubar v-if="betaMenuEnabled" />
+    <SideToolbar v-if="betaMenuEnabled" />
+
+    <div class="RouterWrapper flex-1 overflow-hidden">
+      <router-view />
+    </div>
   </main>
 </template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useSettingStore } from '@/stores/settingStore'
+import TopMenubar from '@/components/topbar/TopMenubar.vue'
+import SideToolbar from '@/components/sidebar/SideToolbar.vue'
+import LiteGraphCanvasSplitterOverlay from '@/components/LiteGraphCanvasSplitterOverlay.vue'
+
+const settingStore = useSettingStore()
+
+const betaMenuEnabled = computed(
+  () => settingStore.get('Comfy.UseNewMenu') !== 'Disabled'
+)
+</script>
