diff --git a/pyproject.toml b/pyproject.toml
index 9a07a3b..bb3e291 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -1,7 +1,7 @@
 [project]
 name = "rgthree-comfy"
 description = "Making ComfyUI more comfortable."
-version = "1.0.2511081814"
+version = "1.0.2511082218"
 license = { file = "LICENSE" }
 dependencies = []
 
diff --git a/src_web/comfyui/comfy_ui_bar.ts b/src_web/comfyui/comfy_ui_bar.ts
index 5a21040..af79cc9 100644
--- a/src_web/comfyui/comfy_ui_bar.ts
+++ b/src_web/comfyui/comfy_ui_bar.ts
@@ -1,14 +1,12 @@
 import {app} from "scripts/app.js";
-import {ComfyButtonGroup} from "scripts/ui/components/buttonGroup.js";
-import {ComfyButton} from "scripts/ui/components/button.js";
 import {iconGear, iconStarFilled, logoRgthreeAsync} from "rgthree/common/media/svgs.js";
-import {createElement, empty, query} from "rgthree/common/utils_dom.js";
+import {$el, empty} from "rgthree/common/utils_dom.js";
 import {SERVICE as BOOKMARKS_SERVICE} from "./services/bookmarks_services.js";
 import {SERVICE as CONFIG_SERVICE} from "./services/config_service.js";
-import {ComfyPopup} from "scripts/ui/components/popup.js";
 import {RgthreeConfigDialog} from "./config.js";
+import {wait} from "rgthree/common/shared_utils.js";
 
-let rgthreeButtonGroup: ComfyButtonGroup | null = null;
+let rgthreeButtonGroup: RgthreeComfyButtonGroup | null = null;
 
 function addRgthreeTopBarButtons() {
   if (!CONFIG_SERVICE.getFeatureValue("comfy_top_bar_menu.enabled")) {
@@ -23,30 +21,33 @@ function addRgthreeTopBarButtons() {
 
   const buttons = [];
 
-  const rgthreeButton = new ComfyButton({
-    icon: "rgthree",
+  const rgthreeButton = new RgthreeComfyButton({
+    icon: "<svg></svg>",
     tooltip: "rgthree-comfy",
+    primary: true,
     // content: 'rgthree-comfy',
-    app,
+    // app,
     enabled: true,
     classList: "comfyui-button comfyui-menu-mobile-collapse primary",
   });
   buttons.push(rgthreeButton);
-  rgthreeButton.iconElement.style.width = "1.2rem";
-  logoRgthreeAsync().then((t) => { rgthreeButton.iconElement.innerHTML = t;});
+  logoRgthreeAsync().then((t) => {
+    rgthreeButton.setIcon(t);
+  });
+
   rgthreeButton.withPopup(
-    new ComfyPopup(
-      {target: rgthreeButton.element, classList: "rgthree-top-menu"},
-      createElement("menu", {
+    new RgthreeComfyPopup(
+      {target: rgthreeButton.element},
+      $el("menu.rgthree-menu.rgthree-top-menu", {
         children: [
-          createElement("li", {
-            child: createElement("button.rgthree-button-reset", {
+          $el("li", {
+            child: $el("button.rgthree-button-reset", {
               html: iconGear + "Settings (rgthree-comfy)",
               onclick: () => new RgthreeConfigDialog().show(),
             }),
           }),
-          createElement("li", {
-            child: createElement("button.rgthree-button-reset", {
+          $el("li", {
+            child: $el("button.rgthree-button-reset", {
               html: iconStarFilled + "Star on Github",
               onclick: () => window.open("https://github.com/rgthree/rgthree-comfy", "_blank"),
             }),
@@ -58,29 +59,29 @@ function addRgthreeTopBarButtons() {
   );
 
   if (CONFIG_SERVICE.getFeatureValue("comfy_top_bar_menu.button_bookmarks.enabled")) {
-    const bookmarksListEl = createElement("menu");
+    const bookmarksListEl = $el("menu.rgthree-menu.rgthree-top-menu");
     bookmarksListEl.appendChild(
-      createElement("li.rgthree-message", {
-        child: createElement("span", {text: "No bookmarks in current workflow."}),
+      $el("li.rgthree-message", {
+        child: $el("span", {text: "No bookmarks in current workflow."}),
       }),
     );
-    const bookmarksButton = new ComfyButton({
+    const bookmarksButton = new RgthreeComfyButton({
       icon: "bookmark",
       tooltip: "Workflow Bookmarks (rgthree-comfy)",
-      app,
+      // app,
     });
-    const bookmarksPopup = new ComfyPopup(
-      {target: bookmarksButton.element, classList: "rgthree-top-menu"},
+    const bookmarksPopup = new RgthreeComfyPopup(
+      {target: bookmarksButton.element, modal: false},
       bookmarksListEl,
     );
-    bookmarksPopup.addEventListener("open", () => {
+    bookmarksPopup.onOpen(() => {
       const bookmarks = BOOKMARKS_SERVICE.getCurrentBookmarks();
       empty(bookmarksListEl);
       if (bookmarks.length) {
         for (const b of bookmarks) {
           bookmarksListEl.appendChild(
-            createElement("li", {
-              child: createElement("button.rgthree-button-reset", {
+            $el("li", {
+              child: $el("button.rgthree-button-reset", {
                 text: `[${b.shortcutKey}] ${b.title}`,
                 onclick: () => {
                   b.canvasToBookmark();
@@ -91,18 +92,18 @@ function addRgthreeTopBarButtons() {
         }
       } else {
         bookmarksListEl.appendChild(
-          createElement("li.rgthree-message", {
-            child: createElement("span", {text: "No bookmarks in current workflow."}),
+          $el("li.rgthree-message", {
+            child: $el("span", {text: "No bookmarks in current workflow."}),
           }),
         );
       }
-      bookmarksPopup.update();
+      // bookmarksPopup.update();
     });
     bookmarksButton.withPopup(bookmarksPopup, "hover");
     buttons.push(bookmarksButton);
   }
 
-  rgthreeButtonGroup = new ComfyButtonGroup(...buttons);
+  rgthreeButtonGroup = new RgthreeComfyButtonGroup(...buttons);
   app.menu?.settingsGroup.element.before(rgthreeButtonGroup.element);
 }
 
@@ -118,3 +119,146 @@ app.registerExtension({
     }) as EventListener);
   },
 });
+
+// The following are rough hacks since ComfyUI took away their button/buttongroup/popup
+// functionality. TODO: Find a better spot to add rgthree controls to the UI, I suppose.
+
+class RgthreeComfyButtonGroup {
+  element = $el("div.rgthree-comfybar-top-button-group");
+  buttons: RgthreeComfyButton[];
+
+  constructor(...buttons: RgthreeComfyButton[]) {
+    this.buttons = buttons;
+    this.update();
+  }
+
+  insert(button: RgthreeComfyButton, index: number) {
+    this.buttons.splice(index, 0, button);
+    this.update();
+  }
+
+  append(button: RgthreeComfyButton) {
+    this.buttons.push(button);
+    this.update();
+  }
+
+  remove(indexOrButton: RgthreeComfyButton | number) {
+    if (typeof indexOrButton !== "number") {
+      indexOrButton = this.buttons.indexOf(indexOrButton);
+    }
+    if (indexOrButton > -1) {
+      const btn = this.buttons.splice(indexOrButton, 1);
+      this.update();
+      return btn;
+    }
+    return null;
+  }
+
+  update() {
+    this.element.replaceChildren(...this.buttons.map((b) => b["element"] ?? b));
+  }
+}
+
+interface RgthreeComfyButtonOptions {
+  icon?: string;
+  primary?: boolean;
+  overIcon?: string;
+  iconSize?: number;
+  content?: string | HTMLElement;
+  tooltip?: string;
+  enabled?: boolean;
+  action?: (e: Event, btn: RgthreeComfyButton) => void;
+  classList?: string;
+  visibilitySetting?: {id: string; showValue: any};
+  // app?: ComfyApp;
+}
+
+class RgthreeComfyButton {
+  element = $el("button.rgthree-comfybar-top-button.rgthree-button-reset.rgthree-button");
+  iconElement = $el("span.rgthree-button-icon");
+  constructor(opts: RgthreeComfyButtonOptions) {
+    opts.icon && this.setIcon(opts.icon);
+    opts.tooltip && this.element.setAttribute("title", opts.tooltip);
+    opts.primary && this.element.classList.add("-primary");
+  }
+
+  setIcon(iconOrMarkup: string) {
+    const markup = iconOrMarkup.startsWith("<")
+      ? iconOrMarkup
+      : `<i class="mdi mdi-${iconOrMarkup}"></i>`;
+    this.iconElement.innerHTML = markup;
+    if (!this.iconElement.parentElement) {
+      this.element.appendChild(this.iconElement);
+    }
+  }
+
+  withPopup(popup: RgthreeComfyPopup, trigger: "click" | "hover") {
+    if (trigger === "click") {
+      this.element.addEventListener("click", () => {
+        popup.open();
+      });
+    }
+    if (trigger === "hover") {
+      this.element.addEventListener("pointerenter", () => {
+        popup.open();
+      });
+    }
+  }
+}
+
+interface RgthreeComfyPopupOptions {
+  target: HTMLElement;
+  classList?: string;
+  modal?: boolean;
+}
+
+class RgthreeComfyPopup {
+  element: HTMLElement;
+  target?: HTMLElement;
+  onOpenFn: (() => Promise<void> | void) | null = null;
+  opts: RgthreeComfyPopupOptions;
+
+  onWindowClickBound = this.onWindowClick.bind(this);
+
+  constructor(opts: RgthreeComfyPopupOptions, element: HTMLElement) {
+    this.element = element;
+    this.opts = opts;
+    opts.target && (this.target = opts.target);
+    opts.modal && this.element.classList.add("-modal");
+  }
+
+  async open() {
+    if (!this.target) {
+      throw new Error("No target for RgthreeComfyPopup");
+    }
+    if (this.onOpenFn) {
+      await this.onOpenFn();
+    }
+    await wait(16);
+    const rect = this.target.getBoundingClientRect();
+    this.element.setAttribute("state", "measuring");
+    document.body.appendChild(this.element);
+    this.element.style.position = "fixed";
+    this.element.style.left = `${rect.left}px`;
+    this.element.style.top = `${rect.top + rect.height}px`;
+    this.element.setAttribute("state", "open");
+    if (this.opts.modal) {
+      document.body.classList.add("rgthree-modal-menu-open");
+    }
+    window.addEventListener("click", this.onWindowClickBound);
+  }
+
+  close() {
+    this.element.remove();
+    document.body.classList.remove("rgthree-modal-menu-open");
+    window.removeEventListener("click", this.onWindowClickBound);
+  }
+
+  onOpen(fn: (() => void) | null) {
+    this.onOpenFn = fn;
+  }
+
+  onWindowClick() {
+    this.close();
+  }
+}
diff --git a/src_web/common/css/buttons.scss b/src_web/common/css/buttons.scss
index 85f4c0c..569d380 100644
--- a/src_web/common/css/buttons.scss
+++ b/src_web/common/css/buttons.scss
@@ -7,8 +7,10 @@
   color: inherit;
   padding: 0;
   margin: 0;
-
 }
+
+$borderRadius:  0.33rem;
+
 :not(#fakeid) .rgthree-button {
   --padding-top: 7px;
   --padding-bottom: 9px;
@@ -16,7 +18,7 @@
   position: relative;
   cursor: pointer;
   border: 0;
-  border-radius: 0.25rem;
+  border-radius: $borderRadius;
   background: rgba(0, 0, 0, 0.5);
   color: white;
   font-family: system-ui, sans-serif;
@@ -39,7 +41,7 @@
     content: "";
     display: block;
     position: absolute;
-    border-radius: 0.25rem;
+    border-radius: $borderRadius;
     left: 0;
     top: 0;
     width: 100%;
@@ -103,4 +105,52 @@
   &[disabled]::after {
     display: none;
   }
+}
+
+:not(#fakeid) .rgthree-comfybar-top-button-group {
+  font-size: 0;
+  flex: 1 1 auto;
+  display: flex;
+  align-items: stretch;
+
+  .rgthree-comfybar-top-button {
+    margin: 0;
+    flex: 1 1;
+    height: 36px;
+    padding: 0 12px;
+    border-radius: 0;
+    background: var(--p-button-secondary-background);
+    color: var(--p-button-secondary-color);
+
+    &.-primary {
+      background: var(--p-button-primary-background);
+      color: var(--p-button-primary-color);
+    }
+
+    &::before,
+    &::after {
+      border-radius: 0;
+    }
+
+
+    svg {
+      fill: currentColor;
+      width: 28px;
+      height: 28px;
+    }
+  }
+
+  .rgthree-comfybar-top-button:first-of-type,
+  .rgthree-comfybar-top-button:first-of-type::before,
+  .rgthree-comfybar-top-button:first-of-type::after {
+    border-top-left-radius: 0.33rem;
+    border-bottom-left-radius: 0.33rem;
+
+  }
+  .rgthree-comfybar-top-button:last-of-type,
+  .rgthree-comfybar-top-button:last-of-type::before,
+  .rgthree-comfybar-top-button:last-of-type::after {
+    border-top-right-radius: 0.33rem;
+    border-bottom-right-radius: 0.33rem;
+  }
 }
\ No newline at end of file
diff --git a/src_web/common/css/menu.scss b/src_web/common/css/menu.scss
index 7a88659..31b661a 100644
--- a/src_web/common/css/menu.scss
+++ b/src_web/common/css/menu.scss
@@ -50,59 +50,73 @@
   color: var(--content-fg);
   display: flex;
   flex-direction: column;
+  list-style: none;
+  padding: 0;
+  margin: 0;
   * {
     box-sizing: inherit;
   }
 
-  menu {
+
+  > li:not(#fakeid) {
     list-style: none;
     padding: 0;
     margin: 0;
+    position: relative;
+    z-index: 2;
 
-    > li:not(#fakeid) {
-      list-style: none;
-      padding: 0;
-      margin: 0;
+    > button {
+      cursor: pointer;
+      padding: 8px 12px 8px 8px;
+      width: 100%;
+      text-align: start;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: start;
 
-      > button {
-        cursor: pointer;
-        padding: 8px 12px 8px 8px;
-        width: 100%;
-        text-align: start;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: start;
-
-        &:hover {
-          background-color: var(--comfy-input-bg);
-        }
-
-        svg {
-          height: 16px;
-          width: auto;
-          margin-inline-end: 0.6em;
-
-          &.github-star {
-            fill: rgb(227, 179, 65);
-          }
-        }
+      &:hover {
+        background-color: var(--comfy-input-bg);
       }
 
-      &.rgthree-message {
-        // ComfyUI's code has strange behavior that that always puts the popupat to if its less than
-        // 30px... we'll force our message to be at least 32px tall so it won't do that unless it's
-        // actually on the bottom.
-        min-height: 32px;
-        > span {
-          padding: 8px 12px;
-          display: block;
-          width: 100%;
-          text-align: center;
-          font-style: italic;
-          font-size: 12px;
+      svg {
+        height: 16px;
+        width: auto;
+        margin-inline-end: 0.6em;
+
+        &.github-star {
+          fill: rgb(227, 179, 65);
         }
       }
     }
+
+    &.rgthree-message {
+      // ComfyUI's code has strange behavior that that always puts the popupat to if its less than
+      // 30px... we'll force our message to be at least 32px tall so it won't do that unless it's
+      // actually on the bottom.
+      min-height: 32px;
+      > span {
+        padding: 8px 12px;
+        display: block;
+        width: 100%;
+        text-align: center;
+        font-style: italic;
+        font-size: 12px;
+      }
+    }
+  }
+
+  &.-modal::after {
+    content: '';
+    display: block;
+    position: fixed;
+    z-index: 1;
+    inset: 0;
+    background: #0001;
   }
 }
+
+body.rgthree-modal-menu-open > *:not(.rgthree-menu):not(.rgthree-top-messages-container) {
+  filter: blur(2px);
+}
+
diff --git a/web/comfyui/comfy_ui_bar.js b/web/comfyui/comfy_ui_bar.js
index 176f100..a95fb0f 100644
--- a/web/comfyui/comfy_ui_bar.js
+++ b/web/comfyui/comfy_ui_bar.js
@@ -1,12 +1,10 @@
 import { app } from "../../scripts/app.js";
-import { ComfyButtonGroup } from "../../scripts/ui/components/buttonGroup.js";
-import { ComfyButton } from "../../scripts/ui/components/button.js";
 import { iconGear, iconStarFilled, logoRgthreeAsync } from "../../rgthree/common/media/svgs.js";
-import { createElement, empty } from "../../rgthree/common/utils_dom.js";
+import { $el, empty } from "../../rgthree/common/utils_dom.js";
 import { SERVICE as BOOKMARKS_SERVICE } from "./services/bookmarks_services.js";
 import { SERVICE as CONFIG_SERVICE } from "./services/config_service.js";
-import { ComfyPopup } from "../../scripts/ui/components/popup.js";
 import { RgthreeConfigDialog } from "./config.js";
+import { wait } from "../../rgthree/common/shared_utils.js";
 let rgthreeButtonGroup = null;
 function addRgthreeTopBarButtons() {
     var _a, _b, _c;
@@ -21,26 +19,27 @@ function addRgthreeTopBarButtons() {
         return;
     }
     const buttons = [];
-    const rgthreeButton = new ComfyButton({
-        icon: "rgthree",
+    const rgthreeButton = new RgthreeComfyButton({
+        icon: "<svg></svg>",
         tooltip: "rgthree-comfy",
-        app,
+        primary: true,
         enabled: true,
         classList: "comfyui-button comfyui-menu-mobile-collapse primary",
     });
     buttons.push(rgthreeButton);
-    rgthreeButton.iconElement.style.width = "1.2rem";
-    logoRgthreeAsync().then((t) => { rgthreeButton.iconElement.innerHTML = t; });
-    rgthreeButton.withPopup(new ComfyPopup({ target: rgthreeButton.element, classList: "rgthree-top-menu" }, createElement("menu", {
+    logoRgthreeAsync().then((t) => {
+        rgthreeButton.setIcon(t);
+    });
+    rgthreeButton.withPopup(new RgthreeComfyPopup({ target: rgthreeButton.element }, $el("menu.rgthree-menu.rgthree-top-menu", {
         children: [
-            createElement("li", {
-                child: createElement("button.rgthree-button-reset", {
+            $el("li", {
+                child: $el("button.rgthree-button-reset", {
                     html: iconGear + "Settings (rgthree-comfy)",
                     onclick: () => new RgthreeConfigDialog().show(),
                 }),
             }),
-            createElement("li", {
-                child: createElement("button.rgthree-button-reset", {
+            $el("li", {
+                child: $el("button.rgthree-button-reset", {
                     html: iconStarFilled + "Star on Github",
                     onclick: () => window.open("https://github.com/rgthree/rgthree-comfy", "_blank"),
                 }),
@@ -48,23 +47,22 @@ function addRgthreeTopBarButtons() {
         ],
     })), "click");
     if (CONFIG_SERVICE.getFeatureValue("comfy_top_bar_menu.button_bookmarks.enabled")) {
-        const bookmarksListEl = createElement("menu");
-        bookmarksListEl.appendChild(createElement("li.rgthree-message", {
-            child: createElement("span", { text: "No bookmarks in current workflow." }),
+        const bookmarksListEl = $el("menu.rgthree-menu.rgthree-top-menu");
+        bookmarksListEl.appendChild($el("li.rgthree-message", {
+            child: $el("span", { text: "No bookmarks in current workflow." }),
         }));
-        const bookmarksButton = new ComfyButton({
+        const bookmarksButton = new RgthreeComfyButton({
             icon: "bookmark",
             tooltip: "Workflow Bookmarks (rgthree-comfy)",
-            app,
         });
-        const bookmarksPopup = new ComfyPopup({ target: bookmarksButton.element, classList: "rgthree-top-menu" }, bookmarksListEl);
-        bookmarksPopup.addEventListener("open", () => {
+        const bookmarksPopup = new RgthreeComfyPopup({ target: bookmarksButton.element, modal: false }, bookmarksListEl);
+        bookmarksPopup.onOpen(() => {
             const bookmarks = BOOKMARKS_SERVICE.getCurrentBookmarks();
             empty(bookmarksListEl);
             if (bookmarks.length) {
                 for (const b of bookmarks) {
-                    bookmarksListEl.appendChild(createElement("li", {
-                        child: createElement("button.rgthree-button-reset", {
+                    bookmarksListEl.appendChild($el("li", {
+                        child: $el("button.rgthree-button-reset", {
                             text: `[${b.shortcutKey}] ${b.title}`,
                             onclick: () => {
                                 b.canvasToBookmark();
@@ -74,16 +72,15 @@ function addRgthreeTopBarButtons() {
                 }
             }
             else {
-                bookmarksListEl.appendChild(createElement("li.rgthree-message", {
-                    child: createElement("span", { text: "No bookmarks in current workflow." }),
+                bookmarksListEl.appendChild($el("li.rgthree-message", {
+                    child: $el("span", { text: "No bookmarks in current workflow." }),
                 }));
             }
-            bookmarksPopup.update();
         });
         bookmarksButton.withPopup(bookmarksPopup, "hover");
         buttons.push(bookmarksButton);
     }
-    rgthreeButtonGroup = new ComfyButtonGroup(...buttons);
+    rgthreeButtonGroup = new RgthreeComfyButtonGroup(...buttons);
     (_c = app.menu) === null || _c === void 0 ? void 0 : _c.settingsGroup.element.before(rgthreeButtonGroup.element);
 }
 app.registerExtension({
@@ -98,3 +95,103 @@ app.registerExtension({
         }));
     },
 });
+class RgthreeComfyButtonGroup {
+    constructor(...buttons) {
+        this.element = $el("div.rgthree-comfybar-top-button-group");
+        this.buttons = buttons;
+        this.update();
+    }
+    insert(button, index) {
+        this.buttons.splice(index, 0, button);
+        this.update();
+    }
+    append(button) {
+        this.buttons.push(button);
+        this.update();
+    }
+    remove(indexOrButton) {
+        if (typeof indexOrButton !== "number") {
+            indexOrButton = this.buttons.indexOf(indexOrButton);
+        }
+        if (indexOrButton > -1) {
+            const btn = this.buttons.splice(indexOrButton, 1);
+            this.update();
+            return btn;
+        }
+        return null;
+    }
+    update() {
+        this.element.replaceChildren(...this.buttons.map((b) => { var _a; return (_a = b["element"]) !== null && _a !== void 0 ? _a : b; }));
+    }
+}
+class RgthreeComfyButton {
+    constructor(opts) {
+        this.element = $el("button.rgthree-comfybar-top-button.rgthree-button-reset.rgthree-button");
+        this.iconElement = $el("span.rgthree-button-icon");
+        opts.icon && this.setIcon(opts.icon);
+        opts.tooltip && this.element.setAttribute("title", opts.tooltip);
+        opts.primary && this.element.classList.add("-primary");
+    }
+    setIcon(iconOrMarkup) {
+        const markup = iconOrMarkup.startsWith("<")
+            ? iconOrMarkup
+            : `<i class="mdi mdi-${iconOrMarkup}"></i>`;
+        this.iconElement.innerHTML = markup;
+        if (!this.iconElement.parentElement) {
+            this.element.appendChild(this.iconElement);
+        }
+    }
+    withPopup(popup, trigger) {
+        if (trigger === "click") {
+            this.element.addEventListener("click", () => {
+                popup.open();
+            });
+        }
+        if (trigger === "hover") {
+            this.element.addEventListener("pointerenter", () => {
+                popup.open();
+            });
+        }
+    }
+}
+class RgthreeComfyPopup {
+    constructor(opts, element) {
+        this.onOpenFn = null;
+        this.onWindowClickBound = this.onWindowClick.bind(this);
+        this.element = element;
+        this.opts = opts;
+        opts.target && (this.target = opts.target);
+        opts.modal && this.element.classList.add("-modal");
+    }
+    async open() {
+        if (!this.target) {
+            throw new Error("No target for RgthreeComfyPopup");
+        }
+        if (this.onOpenFn) {
+            await this.onOpenFn();
+        }
+        await wait(16);
+        const rect = this.target.getBoundingClientRect();
+        this.element.setAttribute("state", "measuring");
+        document.body.appendChild(this.element);
+        this.element.style.position = "fixed";
+        this.element.style.left = `${rect.left}px`;
+        this.element.style.top = `${rect.top + rect.height}px`;
+        this.element.setAttribute("state", "open");
+        if (this.opts.modal) {
+            document.body.classList.add("rgthree-modal-menu-open");
+        }
+        window.addEventListener("click", this.onWindowClickBound);
+    }
+    close() {
+        this.element.remove();
+        document.body.classList.remove("rgthree-modal-menu-open");
+        window.removeEventListener("click", this.onWindowClickBound);
+    }
+    onOpen(fn) {
+        this.onOpenFn = fn;
+    }
+    onWindowClick() {
+        this.close();
+    }
+}
diff --git a/web/comfyui/rgthree.css b/web/comfyui/rgthree.css
index d04326a..a0493eb 100644
--- a/web/comfyui/rgthree.css
+++ b/web/comfyui/rgthree.css
@@ -139,7 +139,7 @@
   position: relative;
   cursor: pointer;
   border: 0;
-  border-radius: 0.25rem;
+  border-radius: 0.33rem;
   background: rgba(0, 0, 0, 0.5);
   color: white;
   font-family: system-ui, sans-serif;
@@ -161,7 +161,7 @@
   content: "";
   display: block;
   position: absolute;
-  border-radius: 0.25rem;
+  border-radius: 0.33rem;
   left: 0;
   top: 0;
   width: 100%;
@@ -212,6 +212,46 @@
   display: none;
 }
 
+:not(#fakeid) .rgthree-comfybar-top-button-group {
+  font-size: 0;
+  flex: 1 1 auto;
+  display: flex;
+  align-items: stretch;
+}
+:not(#fakeid) .rgthree-comfybar-top-button-group .rgthree-comfybar-top-button {
+  margin: 0;
+  flex: 1 1;
+  height: 36px;
+  padding: 0 12px;
+  border-radius: 0;
+  background: var(--p-button-secondary-background);
+  color: var(--p-button-secondary-color);
+}
+:not(#fakeid) .rgthree-comfybar-top-button-group .rgthree-comfybar-top-button.-primary {
+  background: var(--p-button-primary-background);
+  color: var(--p-button-primary-color);
+}
+:not(#fakeid) .rgthree-comfybar-top-button-group .rgthree-comfybar-top-button::before, :not(#fakeid) .rgthree-comfybar-top-button-group .rgthree-comfybar-top-button::after {
+  border-radius: 0;
+}
+:not(#fakeid) .rgthree-comfybar-top-button-group .rgthree-comfybar-top-button svg {
+  fill: currentColor;
+  width: 28px;
+  height: 28px;
+}
+:not(#fakeid) .rgthree-comfybar-top-button-group .rgthree-comfybar-top-button:first-of-type,
+:not(#fakeid) .rgthree-comfybar-top-button-group .rgthree-comfybar-top-button:first-of-type::before,
+:not(#fakeid) .rgthree-comfybar-top-button-group .rgthree-comfybar-top-button:first-of-type::after {
+  border-top-left-radius: 0.33rem;
+  border-bottom-left-radius: 0.33rem;
+}
+:not(#fakeid) .rgthree-comfybar-top-button-group .rgthree-comfybar-top-button:last-of-type,
+:not(#fakeid) .rgthree-comfybar-top-button-group .rgthree-comfybar-top-button:last-of-type::before,
+:not(#fakeid) .rgthree-comfybar-top-button-group .rgthree-comfybar-top-button:last-of-type::after {
+  border-top-right-radius: 0.33rem;
+  border-bottom-right-radius: 0.33rem;
+}
+
 .rgthree-dialog {
   outline: 0;
   border: 0;
@@ -381,21 +421,21 @@ body.rgthree-dialog-open > *:not(.rgthree-dialog):not(.rgthree-top-messages-cont
   color: var(--content-fg);
   display: flex;
   flex-direction: column;
+  list-style: none;
+  padding: 0;
+  margin: 0;
 }
 .rgthree-top-menu * {
   box-sizing: inherit;
 }
-.rgthree-top-menu menu {
+.rgthree-top-menu > li:not(#fakeid) {
   list-style: none;
   padding: 0;
   margin: 0;
+  position: relative;
+  z-index: 2;
 }
-.rgthree-top-menu menu > li:not(#fakeid) {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-.rgthree-top-menu menu > li:not(#fakeid) > button {
+.rgthree-top-menu > li:not(#fakeid) > button {
   cursor: pointer;
   padding: 8px 12px 8px 8px;
   width: 100%;
@@ -405,21 +445,21 @@ body.rgthree-dialog-open > *:not(.rgthree-dialog):not(.rgthree-top-messages-cont
   align-items: center;
   justify-content: start;
 }
-.rgthree-top-menu menu > li:not(#fakeid) > button:hover {
+.rgthree-top-menu > li:not(#fakeid) > button:hover {
   background-color: var(--comfy-input-bg);
 }
-.rgthree-top-menu menu > li:not(#fakeid) > button svg {
+.rgthree-top-menu > li:not(#fakeid) > button svg {
   height: 16px;
   width: auto;
   margin-inline-end: 0.6em;
 }
-.rgthree-top-menu menu > li:not(#fakeid) > button svg.github-star {
+.rgthree-top-menu > li:not(#fakeid) > button svg.github-star {
   fill: rgb(227, 179, 65);
 }
-.rgthree-top-menu menu > li:not(#fakeid).rgthree-message {
+.rgthree-top-menu > li:not(#fakeid).rgthree-message {
   min-height: 32px;
 }
-.rgthree-top-menu menu > li:not(#fakeid).rgthree-message > span {
+.rgthree-top-menu > li:not(#fakeid).rgthree-message > span {
   padding: 8px 12px;
   display: block;
   width: 100%;
@@ -427,6 +467,18 @@ body.rgthree-dialog-open > *:not(.rgthree-dialog):not(.rgthree-top-messages-cont
   font-style: italic;
   font-size: 12px;
 }
+.rgthree-top-menu.-modal::after {
+  content: "";
+  display: block;
+  position: fixed;
+  z-index: 1;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.0666666667);
+}
+
+body.rgthree-modal-menu-open > *:not(.rgthree-menu):not(.rgthree-top-messages-container) {
+  filter: blur(2px);
+}
 
 .rgthree-dialog.-settings {
   width: 100%;
diff --git a/web/common/css/buttons.css b/web/common/css/buttons.css
index d74ebaa..2c9f13c 100644
--- a/web/common/css/buttons.css
+++ b/web/common/css/buttons.css
@@ -16,7 +16,7 @@
   position: relative;
   cursor: pointer;
   border: 0;
-  border-radius: 0.25rem;
+  border-radius: 0.33rem;
   background: rgba(0, 0, 0, 0.5);
   color: white;
   font-family: system-ui, sans-serif;
@@ -38,7 +38,7 @@
   content: "";
   display: block;
   position: absolute;
-  border-radius: 0.25rem;
+  border-radius: 0.33rem;
   left: 0;
   top: 0;
   width: 100%;
@@ -88,3 +88,43 @@
 :not(#fakeid) .rgthree-button[disabled]::before, :not(#fakeid) .rgthree-button[disabled]::after {
   display: none;
 }
+
+:not(#fakeid) .rgthree-comfybar-top-button-group {
+  font-size: 0;
+  flex: 1 1 auto;
+  display: flex;
+  align-items: stretch;
+}
+:not(#fakeid) .rgthree-comfybar-top-button-group .rgthree-comfybar-top-button {
+  margin: 0;
+  flex: 1 1;
+  height: 36px;
+  padding: 0 12px;
+  border-radius: 0;
+  background: var(--p-button-secondary-background);
+  color: var(--p-button-secondary-color);
+}
+:not(#fakeid) .rgthree-comfybar-top-button-group .rgthree-comfybar-top-button.-primary {
+  background: var(--p-button-primary-background);
+  color: var(--p-button-primary-color);
+}
+:not(#fakeid) .rgthree-comfybar-top-button-group .rgthree-comfybar-top-button::before, :not(#fakeid) .rgthree-comfybar-top-button-group .rgthree-comfybar-top-button::after {
+  border-radius: 0;
+}
+:not(#fakeid) .rgthree-comfybar-top-button-group .rgthree-comfybar-top-button svg {
+  fill: currentColor;
+  width: 28px;
+  height: 28px;
+}
+:not(#fakeid) .rgthree-comfybar-top-button-group .rgthree-comfybar-top-button:first-of-type,
+:not(#fakeid) .rgthree-comfybar-top-button-group .rgthree-comfybar-top-button:first-of-type::before,
+:not(#fakeid) .rgthree-comfybar-top-button-group .rgthree-comfybar-top-button:first-of-type::after {
+  border-top-left-radius: 0.33rem;
+  border-bottom-left-radius: 0.33rem;
+}
+:not(#fakeid) .rgthree-comfybar-top-button-group .rgthree-comfybar-top-button:last-of-type,
+:not(#fakeid) .rgthree-comfybar-top-button-group .rgthree-comfybar-top-button:last-of-type::before,
+:not(#fakeid) .rgthree-comfybar-top-button-group .rgthree-comfybar-top-button:last-of-type::after {
+  border-top-right-radius: 0.33rem;
+  border-bottom-right-radius: 0.33rem;
+}
diff --git a/web/common/css/menu.css b/web/common/css/menu.css
index 97cd66a..426469e 100644
--- a/web/common/css/menu.css
+++ b/web/common/css/menu.css
@@ -43,21 +43,21 @@
   color: var(--content-fg);
   display: flex;
   flex-direction: column;
+  list-style: none;
+  padding: 0;
+  margin: 0;
 }
 .rgthree-top-menu * {
   box-sizing: inherit;
 }
-.rgthree-top-menu menu {
+.rgthree-top-menu > li:not(#fakeid) {
   list-style: none;
   padding: 0;
   margin: 0;
+  position: relative;
+  z-index: 2;
 }
-.rgthree-top-menu menu > li:not(#fakeid) {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-.rgthree-top-menu menu > li:not(#fakeid) > button {
+.rgthree-top-menu > li:not(#fakeid) > button {
   cursor: pointer;
   padding: 8px 12px 8px 8px;
   width: 100%;
@@ -67,21 +67,21 @@
   align-items: center;
   justify-content: start;
 }
-.rgthree-top-menu menu > li:not(#fakeid) > button:hover {
+.rgthree-top-menu > li:not(#fakeid) > button:hover {
   background-color: var(--comfy-input-bg);
 }
-.rgthree-top-menu menu > li:not(#fakeid) > button svg {
+.rgthree-top-menu > li:not(#fakeid) > button svg {
   height: 16px;
   width: auto;
   margin-inline-end: 0.6em;
 }
-.rgthree-top-menu menu > li:not(#fakeid) > button svg.github-star {
+.rgthree-top-menu > li:not(#fakeid) > button svg.github-star {
   fill: rgb(227, 179, 65);
 }
-.rgthree-top-menu menu > li:not(#fakeid).rgthree-message {
+.rgthree-top-menu > li:not(#fakeid).rgthree-message {
   min-height: 32px;
 }
-.rgthree-top-menu menu > li:not(#fakeid).rgthree-message > span {
+.rgthree-top-menu > li:not(#fakeid).rgthree-message > span {
   padding: 8px 12px;
   display: block;
   width: 100%;
@@ -89,3 +89,15 @@
   font-style: italic;
   font-size: 12px;
 }
+.rgthree-top-menu.-modal::after {
+  content: "";
+  display: block;
+  position: fixed;
+  z-index: 1;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.0666666667);
+}
+
+body.rgthree-modal-menu-open > *:not(.rgthree-menu):not(.rgthree-top-messages-container) {
+  filter: blur(2px);
+}