diff --git a/package-lock.json b/package-lock.json
index 8c35d04..2df5720 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
       "version": "0.0.1",
       "dependencies": {
         "@intechstudio/grid-protocol": "1.20260828.1315",
-        "@intechstudio/grid-uikit": "1.20260825.1204",
+        "@intechstudio/grid-uikit": "1.20260922.1223",
         "@melt-ui/svelte": "^0.86.6",
         "firebase": "^12.2.1",
         "marked": "^12.0.2",
@@ -1255,9 +1255,9 @@
       }
     },
     "node_modules/@intechstudio/grid-uikit": {
-      "version": "1.20260825.1204",
-      "resolved": "https://registry.npmjs.org/@intechstudio/grid-uikit/-/grid-uikit-1.20260825.1204.tgz",
-      "integrity": "sha512-hLfy/dVbIDTTU/R6Gl3Kkn2K5MsSO97Xww9mx67AHmI8XImH6hA1VxJ/Gu3wki26azPfwW/f28n9nc/KfBSYfQ==",
+      "version": "1.20260922.1223",
+      "resolved": "https://registry.npmjs.org/@intechstudio/grid-uikit/-/grid-uikit-1.20260922.1223.tgz",
+      "integrity": "sha512-GEJICGrecYwLgCBLA+6Luz03O1Jrej13OoHN7mEohpkgsQV2+FW8TTYuSL4Z1eDfbY8Bs1JCrX3IgzXFrg6fCA==",
       "dependencies": {
         "@melt-ui/svelte": "^0.86.6",
         "color-convert": "^2.0.1",
diff --git a/package.json b/package.json
index 9b9585e..ae8a0dc 100644
--- a/package.json
+++ b/package.json
@@ -37,7 +37,7 @@
   "type": "module",
   "dependencies": {
     "@intechstudio/grid-protocol": "1.20260828.1315",
-    "@intechstudio/grid-uikit": "1.20260825.1204",
+    "@intechstudio/grid-uikit": "1.20260922.1223",
     "@melt-ui/svelte": "^0.86.6",
     "firebase": "^12.2.1",
     "marked": "^12.0.2",
diff --git a/src/lib/actions/tooltip.ts b/src/lib/actions/tooltip.ts
deleted file mode 100644
index bce7fdb..0000000
--- a/src/lib/actions/tooltip.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import type { Action } from "svelte/action";
-import { MoltenTooltip } from "@intechstudio/grid-uikit";
-import { mount } from "svelte";
-
-export const tooltip: Action<HTMLElement, any> = (
-  node: HTMLElement,
-  options: any,
-): any => {
-  if (typeof options === "undefined") {
-    return;
-  }
-
-  const sibling = document.createElement("div");
-  node.parentNode?.insertBefore(sibling, node.nextSibling);
-
-  options.referenceElement = node;
-
-  setTimeout(() => {
-    mount(MoltenTooltip, { target: sibling, props: options });
-  });
-
-  return {
-    destroy() {
-      sibling.remove();
-    },
-  };
-};
diff --git a/src/lib/components/tree/ConfigTree.svelte b/src/lib/components/tree/ConfigTree.svelte
index 641d384..0116a48 100644
--- a/src/lib/components/tree/ConfigTree.svelte
+++ b/src/lib/components/tree/ConfigTree.svelte
@@ -24,7 +24,11 @@
   import { TreeItemType } from "./TreeNode.svelte";
   import type { AbstractFolderData, AbstractTreeNode } from "./TreeNode.svelte";
   import type { TreeProperties } from "./TreeComponent.svelte";
-  import type { ContextMenuOptions } from "@intechstudio/grid-uikit";
+  import {
+    type ContextMenuOptions,
+    MoltenInput,
+    IconButton,
+  } from "@intechstudio/grid-uikit";
 
   import TreeFolder from "./TreeFolder.svelte";
 
@@ -174,18 +178,38 @@
     return { root, filteredConfigs };
   }
 
-  function handleDeleteVirtualDirectory(title: string) {
+  async function handleDeleteVirtualDirectory(title: string) {
     const cm = get(config_manager);
 
-    for (const config of configs) {
-      if (config.virtualPath?.includes(title)) {
-        const newPath = config.virtualPath
-          .split("/")
-          .filter((e: string) => e !== title)
+    const affected = configs.filter((c) =>
+      (c.virtualPath?.split("/") ?? []).includes(title),
+    );
+    try {
+      for (const config of affected) {
+        const newPath = config
+          .virtualPath!.split("/")
+          .filter((e) => e !== title)
           .join("/");
-        config.virtualPath = newPath === "" ? undefined : newPath;
-        cm?.saveConfig(config, false);
+        await cm?.saveConfig(
+          { ...config, virtualPath: newPath === "" ? undefined : newPath },
+          false,
+        );
       }
+      parentIframeCommunication({
+        windowPostMessageName: "sendLogMessage",
+        dataForParent: {
+          type: "success",
+          message: `Deleted virtual directory '${title}'`,
+        },
+      });
+    } catch (e) {
+      parentIframeCommunication({
+        windowPostMessageName: "sendLogMessage",
+        dataForParent: {
+          type: "fail",
+          message: `Failed to delete virtual directory '${title}'. ${e}`,
+        },
+      });
     }
   }
 
@@ -233,23 +257,263 @@
     });
   }
 
+  function handleContextMenu(node: AbstractTreeNode<any>) {
+    const config = (get(node).data as Tree.ItemData).item;
+    selected_config.set(config);
+  }
+
+  // ── Inline rename ──────────────────────────────────────────────────────────
+
+  let renamingConfigId: string | null = null;
+  let renameValue = "";
+  let renameInProgress = false;
+  let renameError: string | null = null;
+  let renameInput: MoltenInput;
+  // Set once confirmRename's save resolves, holding the name we're waiting to
+  // see land back in `configs`. saveConfig's promise only resolves once the
+  // write completes, not once the file-watcher-driven reload reports it back
+  // to us - closing the inline editor right away would flash the old name
+  // for a moment. The reactive block below watches for it to land and only
+  // then exits edit mode.
+  let pendingRenameName: string | null = null;
+  let pendingRenameTimeout: ReturnType<typeof setTimeout> | undefined;
+
+  async function startRename(config: Config) {
+    renamingConfigId = config.id;
+    renameValue = config.name;
+    renameError = null;
+    await tick();
+    renameInput?.focus();
+  }
+
+  function cancelRename() {
+    clearTimeout(pendingRenameTimeout);
+    renamingConfigId = null;
+    renameValue = "";
+    renameError = null;
+    pendingRenameName = null;
+  }
+
+  async function confirmRename(config: Config) {
+    if (renamingConfigId !== config.id) return;
+    const newName = renameValue.trim();
+    if (!newName || newName === config.name) {
+      cancelRename();
+      return;
+    }
+    renameInProgress = true;
+    renameError = null;
+    try {
+      const cm = get(config_manager);
+      await cm?.saveConfig({ ...config, name: newName }, false);
+      parentIframeCommunication({
+        windowPostMessageName: "sendLogMessage",
+        dataForParent: {
+          type: "success",
+          message: `Config '${newName}' saved`,
+        },
+      });
+      pendingRenameName = newName;
+      clearTimeout(pendingRenameTimeout);
+      // Safety net: if the reload never lands (e.g. watcher hiccup), don't
+      // leave the editor stuck open forever.
+      pendingRenameTimeout = setTimeout(() => {
+        if (renamingConfigId === config.id) cancelRename();
+      }, 5000);
+    } catch (e) {
+      renameError = String(e);
+      parentIframeCommunication({
+        windowPostMessageName: "sendLogMessage",
+        dataForParent: {
+          type: "fail",
+          message: `Failed to rename '${config.name}'. ${e}`,
+        },
+      });
+    } finally {
+      renameInProgress = false;
+    }
+  }
+
+  $: if (
+    renamingConfigId &&
+    pendingRenameName &&
+    configs.find((c) => c.id === renamingConfigId)?.name === pendingRenameName
+  ) {
+    cancelRename();
+  }
+
+  // ── Inline rename (virtual directory) ─────────────────────────────────────
+  // A virtual directory is just a shared segment string in each config's
+  // virtualPath (see buildVirtualFolders in ./ConfigTree.ts) - there's no
+  // single entity to rename, so this rewrites that segment on every config
+  // that has it, the same way handleDeleteVirtualDirectory removes it.
+
+  let renamingFolderTitle: string | null = null;
+  let renameFolderValue = "";
+  let renameFolderInProgress = false;
+  let renameFolderError: string | null = null;
+  let renameFolderInput: MoltenInput;
+  let folderRenameSaved = false;
+  let folderRenameTimeout: ReturnType<typeof setTimeout> | undefined;
+
+  async function startRenameFolder(title: string) {
+    renamingFolderTitle = title;
+    renameFolderValue = title;
+    renameFolderError = null;
+    folderRenameSaved = false;
+    await tick();
+    renameFolderInput?.focus();
+  }
+
+  function cancelRenameFolder() {
+    clearTimeout(folderRenameTimeout);
+    renamingFolderTitle = null;
+    renameFolderValue = "";
+    renameFolderError = null;
+    folderRenameSaved = false;
+  }
+
+  async function confirmRenameFolder(oldTitle: string) {
+    if (renamingFolderTitle !== oldTitle) return;
+    const newTitle = renameFolderValue.trim();
+    if (!newTitle || newTitle === oldTitle) {
+      cancelRenameFolder();
+      return;
+    }
+    renameFolderInProgress = true;
+    renameFolderError = null;
+    try {
+      const cm = get(config_manager);
+      const affected = configs.filter((c) =>
+        c.virtualPath?.split("/").includes(oldTitle),
+      );
+      // Sequential rather than Promise.all: each save round-trips through
+      // grid-editor's file watcher, and there's no need to have several
+      // in flight at once for a rename that isn't performance-sensitive.
+      for (const config of affected) {
+        const newPath = config
+          .virtualPath!.split("/")
+          .map((segment) => (segment === oldTitle ? newTitle : segment))
+          .join("/");
+        await cm?.saveConfig({ ...config, virtualPath: newPath }, false);
+      }
+      parentIframeCommunication({
+        windowPostMessageName: "sendLogMessage",
+        dataForParent: {
+          type: "success",
+          message: `Renamed virtual directory '${oldTitle}' to '${newTitle}' (${affected.length} config${affected.length === 1 ? "" : "s"})`,
+        },
+      });
+      folderRenameSaved = true;
+      clearTimeout(folderRenameTimeout);
+      // Safety net: if the reload never lands, don't leave the editor stuck
+      // open forever.
+      folderRenameTimeout = setTimeout(() => {
+        if (renamingFolderTitle === oldTitle) cancelRenameFolder();
+      }, 5000);
+    } catch (e) {
+      renameFolderError = String(e);
+      parentIframeCommunication({
+        windowPostMessageName: "sendLogMessage",
+        dataForParent: {
+          type: "fail",
+          message: `Failed to rename virtual directory '${oldTitle}'. ${e}`,
+        },
+      });
+    } finally {
+      renameFolderInProgress = false;
+    }
+  }
+
+  $: if (
+    renamingFolderTitle &&
+    folderRenameSaved &&
+    !configs.some((c) =>
+      c.virtualPath?.split("/").includes(renamingFolderTitle!),
+    )
+  ) {
+    cancelRenameFolder();
+  }
+
+  // Both rename inputs sit inside melt-ui's tree item <button> (see
+  // TreeChild.svelte), which handles Space/Enter/arrow keys for tree
+  // navigation. stopPropagation on the wrapping row keeps that JS listener
+  // from firing, but Space also triggers a native browser default action -
+  // the input is invalidly nested inside a <button>, and Chromium treats
+  // Space as "activate the nearest button ancestor", moving focus there and
+  // closing the editor via blur. Only preventDefault() can stop a native
+  // default action, but doing that also blocks the browser's own "insert
+  // this character" default - so for Space specifically, prevent it and
+  // insert the character ourselves, preserving cursor position.
+  function handleRenameKeydown(
+    e: CustomEvent<KeyboardEvent>,
+    getValue: () => string,
+    setValue: (value: string) => void,
+    onConfirm: () => void,
+    onCancel: () => void,
+  ) {
+    const native = e.detail;
+    if (native.key === "Enter") {
+      onConfirm();
+    } else if (native.key === "Escape") {
+      onCancel();
+    } else if (native.key === " ") {
+      native.preventDefault();
+      const input = native.target as HTMLInputElement;
+      const value = getValue();
+      const start = input.selectionStart ?? value.length;
+      const end = input.selectionEnd ?? value.length;
+      setValue(value.slice(0, start) + " " + value.slice(end));
+      tick().then(() => input.setSelectionRange(start + 1, start + 1));
+    }
+  }
+
   function getfolderCtxOptions(
     level: number,
     child: AbstractTreeNode<any>,
   ): ContextMenuOptions {
     const { title } = get(child).data as AbstractFolderData;
+    const isDisabled = () =>
+      level === 0 ||
+      get(child).children.some(
+        (e) =>
+          get(e).type === TreeItemType.ITEM &&
+          (get(e).data as Tree.ItemData).item.syncStatus !== "local",
+      );
     return {
       items: [
+        {
+          text: [`Rename virtual directory`, ``],
+          handler: () => startRenameFolder(title),
+          isDisabled,
+        },
         {
           text: [`Delete virtual directory`, ``],
           handler: () => handleDeleteVirtualDirectory(title),
-          isDisabled: () =>
-            level === 0 ||
-            get(child).children.some(
-              (e) =>
-                get(e).type === TreeItemType.ITEM &&
-                (get(e).data as Tree.ItemData).item.syncStatus !== "local",
-            ),
+          isDisabled,
+        },
+      ],
+    };
+  }
+
+  function getItemCtxOptions(node: AbstractTreeNode<any>): ContextMenuOptions {
+    const { item } = get(node).data as Tree.ItemData;
+    return {
+      items: [
+        {
+          text: [`Show in folder`, ``],
+          handler: () => get(config_manager)?.showConfigInFolder(item),
+          isDisabled: () => !get(config_manager)?.hasLocalFile(item),
+        },
+        {
+          text: [`Rename`, ``],
+          handler: () => startRename(item),
+          isDisabled: () => !item.isEditable,
+        },
+        {
+          text: [`Delete`, ``],
+          handler: () => get(config_manager)?.deleteConfig(item),
+          isDisabled: () => !item.isEditable,
         },
       ],
     };
@@ -281,16 +545,44 @@
 <TreeComponent {...treeProps} on:expandedChange={handleExpandedChange}>
   <svelte:fragment slot="folder" let:item let:expanded let:level>
     {@const data = getFolderData(item)}
-    <TreeFolder
-      {item}
-      {level}
-      {expanded}
-      ctxOptions={getfolderCtxOptions(level, item)}
-    >
-      <span slot="title-label"
-        >{@html `${highlightMatches(data.title, $filter_value)} (${getItemCount(item)})`}</span
+    {#if renamingFolderTitle === data.title}
+      <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+      <div class="rename-row" on:keydown|stopPropagation>
+        <MoltenInput
+          bind:this={renameFolderInput}
+          bind:target={renameFolderValue}
+          on:blur={() => confirmRenameFolder(data.title)}
+          on:keydown={(e) =>
+            handleRenameKeydown(
+              e,
+              () => renameFolderValue,
+              (v) => (renameFolderValue = v),
+              () => confirmRenameFolder(data.title),
+              cancelRenameFolder,
+            )}
+        />
+        <IconButton
+          onMouseDown={(e) => e.preventDefault()}
+          onClick={cancelRenameFolder}
+          iconPath="close"
+          tooltipText="Cancel"
+        />
+      </div>
+      {#if renameFolderError}
+        <p class="rename-error">{renameFolderError}</p>
+      {/if}
+    {:else}
+      <TreeFolder
+        {item}
+        {level}
+        {expanded}
+        ctxOptions={getfolderCtxOptions(level, item)}
       >
-    </TreeFolder>
+        <span slot="title-label"
+          >{@html `${highlightMatches(data.title, $filter_value)} (${getItemCount(item)})`}</span
+        >
+      </TreeFolder>
+    {/if}
   </svelte:fragment>
 
   <svelte:fragment
@@ -302,23 +594,75 @@
     let:itemProps
   >
     {@const data = getItemData(item)}
-    <ProfileCloudTreeItem
-      {itemFunction}
-      {itemProps}
-      {item}
-      compatible={data.compatible}
-      selected={data.item.id === $selected_config?.id}
-      {expanded}
-      on:drag-start={() => handleDragStart(item)}
-      on:drag-end={() => handleDragEnd(item)}
-      on:click={() => handleClick(item)}
-    >
-      <div slot="button-label">
-        {@html highlightMatches(data.item.name, $filter_value)}
-      </div>
-      <div slot="type-label">
-        {@html highlightMatches(data.item.type, $filter_value)}
+    {#if renamingConfigId === data.item.id}
+      <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+      <div class="rename-row" on:keydown|stopPropagation>
+        <MoltenInput
+          bind:this={renameInput}
+          bind:target={renameValue}
+          on:blur={() => confirmRename(data.item)}
+          on:keydown={(e) =>
+            handleRenameKeydown(
+              e,
+              () => renameValue,
+              (v) => (renameValue = v),
+              () => confirmRename(data.item),
+              cancelRename,
+            )}
+        />
+        <IconButton
+          onMouseDown={(e) => e.preventDefault()}
+          onClick={cancelRename}
+          iconPath="close"
+          tooltipText="Cancel"
+        />
       </div>
-    </ProfileCloudTreeItem>
+      {#if renameError}
+        <p class="rename-error">{renameError}</p>
+      {/if}
+    {:else}
+      <ProfileCloudTreeItem
+        {itemFunction}
+        {itemProps}
+        {item}
+        compatible={data.compatible}
+        selected={data.item.id === $selected_config?.id}
+        {expanded}
+        ctxOptions={getItemCtxOptions(item)}
+        on:drag-start={() => handleDragStart(item)}
+        on:drag-end={() => handleDragEnd(item)}
+        on:click={() => handleClick(item)}
+        on:contextmenu={() => handleContextMenu(item)}
+      >
+        <div slot="button-label">
+          {@html highlightMatches(data.item.name, $filter_value)}
+        </div>
+        <div slot="type-label">
+          {@html highlightMatches(data.item.type, $filter_value)}
+        </div>
+      </ProfileCloudTreeItem>
+    {/if}
   </svelte:fragment>
 </TreeComponent>
+
+<style>
+  .rename-row {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    width: 100%;
+    padding: 0.25rem;
+  }
+
+  .rename-row > :global(:first-child) {
+    flex-grow: 1;
+    min-width: 0;
+  }
+
+  .rename-error {
+    color: var(--error);
+    font-size: 0.75rem;
+    padding: 0 0.25rem;
+    margin: 0;
+  }
+</style>
diff --git a/src/lib/components/tree/ProfileCloudTreeItem.svelte b/src/lib/components/tree/ProfileCloudTreeItem.svelte
index 0b22b29..2b9b776 100644
--- a/src/lib/components/tree/ProfileCloudTreeItem.svelte
+++ b/src/lib/components/tree/ProfileCloudTreeItem.svelte
@@ -14,7 +14,11 @@
   } from "./TreeNode.svelte";
   import { createEventDispatcher } from "svelte";
 
-  import { SvgIcon } from "@intechstudio/grid-uikit";
+  import {
+    SvgIcon,
+    contextTarget,
+    type ContextMenuOptions,
+  } from "@intechstudio/grid-uikit";
   const dispatch = createEventDispatcher();
 
   export let selected: boolean;
@@ -23,6 +27,7 @@
   export let item: AbstractTreeNode<WithProfileCloudData>;
   export let itemProps: any;
   export let itemFunction: any;
+  export let ctxOptions: ContextMenuOptions = { items: [] };
 
   type WithProfileCloudData<T = unknown> = T & ProfileCloudCardData;
 
@@ -40,13 +45,19 @@
   function handleClick(e: MouseEvent) {
     dispatch("click");
   }
+
+  function handleContextMenu(e: MouseEvent) {
+    dispatch("contextmenu");
+  }
 </script>
 
 <button
   id={$item.id}
   class="{selected ? 'border-selected' : 'border-unselected'} button"
   draggable="true"
+  use:contextTarget={ctxOptions}
   on:click={handleClick}
+  on:contextmenu={handleContextMenu}
   on:dragstart={handleDragStart}
   on:dragend={handleDragEnd}
 >
diff --git a/src/lib/configmanager/ConfigManager.ts b/src/lib/configmanager/ConfigManager.ts
index 3e9dafb..faf18d6 100644
--- a/src/lib/configmanager/ConfigManager.ts
+++ b/src/lib/configmanager/ConfigManager.ts
@@ -29,6 +29,8 @@ export interface ConfigManager {
   changeCloudVisibility(config: Config, visibility: boolean): Promise<void>;
   getCurrentOwnerId(): string | null | undefined;
   getConfigCloudId(config: Config): string | undefined;
+  hasLocalFile(config: Config): boolean;
+  showConfigInFolder(config: Config): Promise<void>;
   configs: Readable<Config[]>;
 }
 
@@ -239,13 +241,8 @@ export function createConfigManager(observer: {
     }
 
     let cloudId = appConfigs?.cloud?.id;
-    let configCreated = false;
-    let configError = false;
     let errorDetail = undefined;
     if (currentOwnerId != null && (createMissingConfigs || cloudId)) {
-      if (createMissingConfigs || !cloudId) {
-        configCreated = true;
-      }
       cloudId = cloudId ?? doc(configsCollection).id;
       let configRef = doc(configsCollection, cloudId);
 
@@ -279,34 +276,18 @@ export function createConfigManager(observer: {
         windowPostMessageName: "configImportCommunication",
 
         dataForParent: data,
-      })
-        .then((result) => {
-          configCreated = true;
-        })
-        .catch((e) => {
-          configError = true;
-          errorDetail = e.data;
-        });
-    }
-    if (configCreated) {
-      parentIframeCommunication({
-        windowPostMessageName: "sendLogMessage",
-        dataForParent: {
-          type: "success",
-          message: `Config ${config.name} imported successfully`,
-        },
-      });
-      return Promise.resolve();
-    } else if (configError) {
-      console.warn(errorDetail);
-      parentIframeCommunication({
-        windowPostMessageName: "sendLogMessage",
-        dataForParent: {
-          type: "fail",
-          message: `Config ${config.name} import failed. ${errorDetail}`,
-        },
+      }).catch((e) => {
+        errorDetail = e.data;
       });
     }
+    // No user-facing message here: this is the atomic per-config save. A
+    // batch operation (e.g. renaming a virtual directory) calls this once
+    // per affected config, and the caller - which knows whether it's one
+    // save or many - is responsible for reporting a single result to the
+    // user once its whole transaction settles, not one message per file.
+    if (errorDetail !== undefined) {
+      throw new Error(String(errorDetail));
+    }
   }
 
   async function changeCloudVisibility(config: Config, visibility: boolean) {
@@ -330,6 +311,20 @@ export function createConfigManager(observer: {
     return appConfigIdToConfigMap.get(config.id)?.cloud?.id;
   }
 
+  function hasLocalFile(config: Config): boolean {
+    return appConfigIdToConfigMap.get(config.id)?.local !== undefined;
+  }
+
+  async function showConfigInFolder(config: Config) {
+    const localConfig = appConfigIdToConfigMap.get(config.id)?.local;
+    if (!localConfig) return;
+
+    await parentIframeCommunication({
+      windowPostMessageName: "showConfigInFolder",
+      dataForParent: { config: localConfig },
+    });
+  }
+
   return {
     cancel,
     deleteConfig,
@@ -338,6 +333,8 @@ export function createConfigManager(observer: {
     changeCloudVisibility,
     getCurrentOwnerId,
     getConfigCloudId,
+    hasLocalFile,
+    showConfigInFolder,
     configs: derived(configs, ($configs) => {
       return $configs.map((item) => Object.freeze({ ...item }));
     }),
diff --git a/src/routes/BrowserLayout.svelte b/src/routes/BrowserLayout.svelte
index a6242b3..b012dbb 100644
--- a/src/routes/BrowserLayout.svelte
+++ b/src/routes/BrowserLayout.svelte
@@ -9,9 +9,12 @@
     type ConfigManager,
     createConfigManager,
   } from "../lib/configmanager/ConfigManager";
-  import { tooltip } from "../lib/actions/tooltip";
   import ConfigCardBrowser from "./ConfigCardBrowser.svelte";
-  import { MeltCheckbox, MoltenPushButton } from "@intechstudio/grid-uikit";
+  import {
+    MeltCheckbox,
+    MoltenPushButton,
+    tooltip,
+  } from "@intechstudio/grid-uikit";
   import configuration from "../../Configuration.json";
 
   let selectedConfigIndex: number | undefined = undefined;
diff --git a/src/routes/ConfigCardBrowser.svelte b/src/routes/ConfigCardBrowser.svelte
index f7117f5..70377a6 100644
--- a/src/routes/ConfigCardBrowser.svelte
+++ b/src/routes/ConfigCardBrowser.svelte
@@ -1,14 +1,12 @@
 <script lang="ts">
-  import { tooltip } from "../lib/actions/tooltip";
   import {
     createEventDispatcher,
     getContext,
     onDestroy,
     onMount,
   } from "svelte";
-  import { SvgIcon } from "@intechstudio/grid-uikit";
+  import { SvgIcon, IconButton, tooltip } from "@intechstudio/grid-uikit";
   import type { Config } from "../lib/schemas";
-  import { applyFocus } from "../lib/utils";
   import { doc, getDoc } from "firebase/firestore";
   import { userCollection } from "../lib/collections";
 
@@ -24,9 +22,6 @@
 
   const display = getContext("display");
 
-  let deleteConfirmFlag = false;
-  let overwriteApplyFlag = false;
-
   let configOwner: string = "";
   onMount(() => {
     if (data.owner) {
@@ -106,63 +101,32 @@
         }}
         value={data.name}
       />
-      <div class="actions-row">
+      <div class="actions-row" on:click|stopPropagation>
         {#if data.isEditable}
-          {#if deleteConfirmFlag == false}
-            <button
-              class="icon-button"
-              on:click|stopPropagation={() => {
-                deleteConfirmFlag = true;
-              }}
-              use:tooltip={{
-                instant: true,
-                text: "Delete",
-              }}
-            >
-              <SvgIcon fill="var(--foreground-muted)" iconPath="delete" />
-            </button>
-          {:else}
-            <button
-              use:applyFocus
-              on:blur|stopPropagation={() => {
-                deleteConfirmFlag = false;
-              }}
-              on:click|stopPropagation={() => {
-                dispatchEvent("delete-config");
-                deleteConfirmFlag = false;
-              }}
-              class="confirm-delete">confirm</button
-            >
-          {/if}
-          {#if overwriteApplyFlag == false}
-            <button
-              class="icon-button"
-              on:click|stopPropagation={() => {
-                overwriteApplyFlag = true;
-              }}
-              use:tooltip={{
-                instant: true,
-                text: "Overwrite",
-              }}
-            >
-              <SvgIcon
-                fill="var(--foreground-muted)"
-                iconPath="overwrite_profile"
-              />
-            </button>
-          {:else}
-            <button
-              use:applyFocus
-              on:blur={() => {
-                overwriteApplyFlag = false;
-              }}
-              on:click|stopPropagation={() => {
-                dispatchEvent("overwrite-profile");
-                overwriteApplyFlag = false;
-              }}
-              class="confirm-apply">apply</button
-            >
-          {/if}
+          <IconButton
+            iconPath="deleteIcon"
+            tooltipText="Delete"
+            tooltipExtendedText={`Delete '${data.name}'?`}
+            tooltipButtons={[
+              { label: "Cancel", handler: undefined },
+              {
+                label: "Confirm",
+                handler: () => dispatchEvent("delete-config"),
+              },
+            ]}
+          />
+          <IconButton
+            iconPath="overwrite_profile"
+            tooltipText="Overwrite"
+            tooltipExtendedText={`Overwrite '${data.name}'?`}
+            tooltipButtons={[
+              { label: "Cancel", handler: undefined },
+              {
+                label: "Confirm",
+                handler: () => dispatchEvent("overwrite-profile"),
+              },
+            ]}
+          />
         {/if}
         <slot name="link-button" />
         <slot name="sync-config-button" />
@@ -331,20 +295,6 @@
     cursor: pointer;
   }
 
-  .confirm-delete {
-    background-color: #dc2626;
-    border-radius: 0.25rem;
-    padding: 0.125rem 0.25rem;
-    font-size: 0.75rem;
-  }
-
-  .confirm-apply {
-    background-color: #059669;
-    border-radius: 0.25rem;
-    padding: 0.125rem 0.25rem;
-    font-size: 0.75rem;
-  }
-
   .description-section {
     padding-top: 0.5rem;
     color: var(--foreground-muted);
diff --git a/src/routes/ConfigCardDisplay.svelte b/src/routes/ConfigCardDisplay.svelte
index 153b7ab..4a4e80f 100644
--- a/src/routes/ConfigCardDisplay.svelte
+++ b/src/routes/ConfigCardDisplay.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
-  import { tooltip } from "./../lib/actions/tooltip";
   import { createEventDispatcher } from "svelte";
   import type { Config } from "../lib/schemas";
-  import { applyFocus } from "../lib/utils";
   import { doc, getDoc } from "firebase/firestore";
   import { userCollection } from "../lib/collections";
   import ConfigDescription from "./ConfigDescription.svelte";
@@ -15,14 +13,13 @@
     BlockRow,
     BlockTitle,
     SvgIcon,
+    IconButton,
+    tooltip,
   } from "@intechstudio/grid-uikit";
   const dispatchEvent = createEventDispatcher();
 
   export let data: Config | undefined;
 
-  let deleteConfirmFlag = false;
-  let overwriteApplyFlag = false;
-
   let configOwner: string = "";
 
   function handleSelectedConfigChange(config: Config) {
@@ -66,61 +63,27 @@
       </div>
 
       {#if data.isEditable}
-        {#if deleteConfirmFlag == false}
-          <button
-            class="icon-button"
-            on:click|stopPropagation={() => {
-              deleteConfirmFlag = true;
-            }}
-            use:tooltip={{
-              instant: true,
-              text: "Delete",
-            }}
-          >
-            <SvgIcon fill="var(--foreground-muted)" iconPath="deleteIcon" />
-          </button>
-        {:else}
-          <button
-            use:applyFocus
-            on:blur|stopPropagation={() => {
-              deleteConfirmFlag = false;
-            }}
-            on:click|stopPropagation={() => {
-              dispatchEvent("delete-config");
-              deleteConfirmFlag = false;
-            }}
-            class="confirm-delete">confirm</button
-          >
-        {/if}
-        {#if overwriteApplyFlag == false}
-          <button
-            class="icon-button"
-            on:click|stopPropagation={() => {
-              overwriteApplyFlag = true;
-            }}
-            use:tooltip={{
-              instant: true,
-              text: "Overwrite",
-            }}
-          >
-            <SvgIcon
-              fill="var(--foreground-muted)"
-              iconPath="overwrite_profile"
-            />
-          </button>
-        {:else}
-          <button
-            use:applyFocus
-            on:blur={() => {
-              overwriteApplyFlag = false;
-            }}
-            on:click|stopPropagation={() => {
-              dispatchEvent("overwrite-profile");
-              overwriteApplyFlag = false;
-            }}
-            class="confirm-apply">apply</button
-          >
-        {/if}
+        <IconButton
+          iconPath="deleteIcon"
+          tooltipText="Delete"
+          tooltipExtendedText={`Delete '${data.name}'?`}
+          tooltipButtons={[
+            { label: "Cancel", handler: undefined },
+            { label: "Confirm", handler: () => dispatchEvent("delete-config") },
+          ]}
+        />
+        <IconButton
+          iconPath="overwrite_profile"
+          tooltipText="Overwrite"
+          tooltipExtendedText={`Overwrite '${data.name}'?`}
+          tooltipButtons={[
+            { label: "Cancel", handler: undefined },
+            {
+              label: "Confirm",
+              handler: () => dispatchEvent("overwrite-profile"),
+            },
+          ]}
+        />
       {/if}
       <slot name="link-button" />
       <slot name="sync-config-button" />
@@ -261,20 +224,6 @@
     cursor: pointer;
   }
 
-  .confirm-delete {
-    background-color: #dc2626;
-    border-radius: 0.25rem;
-    padding: 0 0.25rem;
-    font-size: 0.75rem;
-  }
-
-  .confirm-apply {
-    background-color: #059669;
-    border-radius: 0.25rem;
-    padding: 0 0.25rem;
-    font-size: 0.75rem;
-  }
-
   .accessibility-actions {
     display: flex;
     align-items: center;
diff --git a/src/routes/EditorLayout.svelte b/src/routes/EditorLayout.svelte
index 64ce86a..14e95c8 100644
--- a/src/routes/EditorLayout.svelte
+++ b/src/routes/EditorLayout.svelte
@@ -11,19 +11,17 @@
   } from "./EditorLayout";
   import { get } from "svelte/store";
   import ConfigTree from "../lib/components/tree/ConfigTree.svelte";
-  import { tooltip } from "./../lib/actions/tooltip";
   import ConfigurationSave, {
     ConfigurationSaveType,
   } from "./ConfigurationSave.svelte";
   import { onDestroy, onMount } from "svelte";
   import { userAccountService } from "../lib/stores";
-  import { SvgIcon } from "@intechstudio/grid-uikit";
+  import { SvgIcon, IconButton, tooltip } from "@intechstudio/grid-uikit";
   import {
     type Config,
     LocalConfigSchema,
     BaseConfigSchema,
   } from "../lib/schemas";
-  import { fade } from "svelte/transition";
   import { Toggle } from "@intechstudio/grid-uikit";
   import {
     parentIframeCommunication,
@@ -58,8 +56,6 @@
   let scrollToSelectedConfigTrigger = 0;
   let pendingNewConfigScroll = false; // this helps new configs to scroll into view upon creation
 
-  let linkFlag: string | undefined = undefined;
-
   let usernameInput = {
     element: null as HTMLInputElement | null,
     value: null,
@@ -211,15 +207,21 @@
       config.createdAt = new Date();
       const cm = get(config_manager);
       pendingNewConfigScroll = true;
-      cm?.saveConfig(config, true).then((e) => {
-        filter_value.set(new FilterValue());
+      await cm?.saveConfig(config, true);
+      filter_value.set(new FilterValue());
+      parentIframeCommunication({
+        windowPostMessageName: "sendLogMessage",
+        dataForParent: {
+          type: "success",
+          message: `Config '${name}' saved`,
+        },
       });
     } catch (e: any) {
       parentIframeCommunication({
         windowPostMessageName: "sendLogMessage",
         dataForParent: {
           type: "fail",
-          message: e.data,
+          message: e?.data ?? e?.message ?? String(e),
         },
       });
     }
@@ -279,7 +281,24 @@
         });
         return;
       }
-      cm?.saveConfig(newConfig, false);
+      try {
+        await cm?.saveConfig(newConfig, false);
+        parentIframeCommunication({
+          windowPostMessageName: "sendLogMessage",
+          dataForParent: {
+            type: "success",
+            message: `Config '${newConfig.name}' saved`,
+          },
+        });
+      } catch (e) {
+        parentIframeCommunication({
+          windowPostMessageName: "sendLogMessage",
+          dataForParent: {
+            type: "fail",
+            message: `Failed to overwrite '${newConfig.name}'. ${e}`,
+          },
+        });
+      }
     }
   }
 
@@ -415,7 +434,24 @@
       description: newDescription,
     };
     const cm = get(config_manager);
-    cm?.saveConfig(newConfig, false);
+    try {
+      await cm?.saveConfig(newConfig, false);
+      parentIframeCommunication({
+        windowPostMessageName: "sendLogMessage",
+        dataForParent: {
+          type: "success",
+          message: `Config '${newConfig.name}' saved`,
+        },
+      });
+    } catch (e) {
+      parentIframeCommunication({
+        windowPostMessageName: "sendLogMessage",
+        dataForParent: {
+          type: "fail",
+          message: `Failed to save '${newConfig.name}'. ${e}`,
+        },
+      });
+    }
     provideSelectedConfigForEditor(newConfig);
     submitAnalytics({
       eventName: "Cloud Action",
@@ -439,7 +475,24 @@
       name: value,
     };
     const cm = get(config_manager);
-    cm?.saveConfig(newConfig, false);
+    try {
+      await cm?.saveConfig(newConfig, false);
+      parentIframeCommunication({
+        windowPostMessageName: "sendLogMessage",
+        dataForParent: {
+          type: "success",
+          message: `Config '${newConfig.name}' saved`,
+        },
+      });
+    } catch (e) {
+      parentIframeCommunication({
+        windowPostMessageName: "sendLogMessage",
+        dataForParent: {
+          type: "fail",
+          message: `Failed to save '${newConfig.name}'. ${e}`,
+        },
+      });
+    }
     submitAnalytics({
       eventName: "Cloud Action",
       payload: {
@@ -461,7 +514,24 @@
       virtualPath: value,
     };
     const cm = get(config_manager);
-    cm?.saveConfig(newConfig, false);
+    try {
+      await cm?.saveConfig(newConfig, false);
+      parentIframeCommunication({
+        windowPostMessageName: "sendLogMessage",
+        dataForParent: {
+          type: "success",
+          message: `Config '${newConfig.name}' saved`,
+        },
+      });
+    } catch (e) {
+      parentIframeCommunication({
+        windowPostMessageName: "sendLogMessage",
+        dataForParent: {
+          type: "fail",
+          message: `Failed to save '${newConfig.name}'. ${e}`,
+        },
+      });
+    }
 
     submitAnalytics({
       eventName: "Cloud Action",
@@ -488,10 +558,13 @@
     }
     createCloudConfigLink(config)
       .then((res) => {
-        linkFlag = config.id;
-        setTimeout(() => {
-          linkFlag = undefined;
-        }, 1750);
+        parentIframeCommunication({
+          windowPostMessageName: "sendLogMessage",
+          dataForParent: {
+            type: "success",
+            message: `Link for '${config.name}' copied to clipboard!`,
+          },
+        });
         provideSelectedConfigForEditor(undefined);
       })
       .catch((e) => {
@@ -513,6 +586,62 @@
     });
   }
 
+  async function handleSyncConfig(config: Config | undefined) {
+    if (typeof config === "undefined") {
+      return;
+    }
+
+    if (
+      config.isEditable &&
+      config.syncStatus === "local" &&
+      !$userAccountService.account
+    ) {
+      loginToProfileCloud();
+      return;
+    }
+    let configToSave = config;
+    if (!configToSave.isEditable) {
+      configToSave = {
+        ...configToSave,
+        name: `Copy of ${configToSave.name}`,
+        owner: undefined,
+        id: "",
+      };
+    }
+    const cm = get(config_manager);
+    pendingNewConfigScroll = true;
+    const action = !config.isEditable
+      ? "Created a copy of"
+      : config.syncStatus === "cloud"
+        ? "Downloaded"
+        : "Uploaded";
+    try {
+      await cm?.saveConfig(configToSave, true);
+      parentIframeCommunication({
+        windowPostMessageName: "sendLogMessage",
+        dataForParent: {
+          type: "success",
+          message: `${action} '${configToSave.name}'`,
+        },
+      });
+    } catch (e) {
+      parentIframeCommunication({
+        windowPostMessageName: "sendLogMessage",
+        dataForParent: {
+          type: "fail",
+          message: `Failed to sync '${configToSave.name}'. ${e}`,
+        },
+      });
+    }
+    provideSelectedConfigForEditor(undefined);
+    submitAnalytics({
+      eventName: "Cloud Action",
+      payload: {
+        click: "Sync config",
+      },
+    });
+  }
+
   let publicToggleValue = $selected_config?.public;
 
   let lastid = $selected_config?.id;
@@ -624,31 +753,18 @@
               )}
               {#if config?.syncStatus != "local"}
                 {#key config?.public}
-                  <button
-                    class="icon-button"
+                  <IconButton
+                    iconPath="link"
                     disabled={!config?.public}
-                    on:click|stopPropagation={() => {
+                    tooltipText={config?.public
+                      ? "Link"
+                      : "Only public config can be linked"}
+                    tooltipDelay={0}
+                    stopPropagation
+                    onClick={() => {
                       handleLink();
                     }}
-                    use:tooltip={{
-                      instant: true,
-                      text: config?.public
-                        ? "Link"
-                        : "Only public config can be linked",
-                    }}
-                  >
-                    <SvgIcon iconPath="link" fill="var(--foreground-muted)" />
-                    {#if linkFlag == config?.id}
-                      <div
-                        transition:fade|global={{
-                          duration: 100,
-                        }}
-                        class="popup"
-                      >
-                        Copied to clipboard!
-                      </div>
-                    {/if}
-                  </button>
+                  />
                 {/key}
               {/if}
             </svelte:fragment>
@@ -656,63 +772,36 @@
               {@const config = configs.find(
                 (e) => e.id === $selected_config?.id,
               )}
-              {#if config?.syncStatus != "synced"}
-                {#key config?.id}
-                  <button
-                    on:click|stopPropagation={async () => {
-                      if (typeof config === "undefined") {
-                        return;
-                      }
-
-                      if (
-                        config.isEditable &&
-                        config.syncStatus === "local" &&
-                        !$userAccountService.account
-                      ) {
-                        loginToProfileCloud();
-                        return;
-                      }
-                      let configToSave = config;
-                      if (!configToSave.isEditable) {
-                        configToSave = {
-                          ...configToSave,
-                          name: `Copy of ${configToSave.name}`,
-                          owner: undefined,
-                          id: "",
-                        };
-                      }
-                      const cm = get(config_manager);
-                      pendingNewConfigScroll = true;
-                      cm?.saveConfig(configToSave, true);
-                      provideSelectedConfigForEditor(undefined);
-                      submitAnalytics({
-                        eventName: "Cloud Action",
-                        payload: {
-                          click: "Sync config",
-                        },
-                      });
-                    }}
-                    class="icon-button"
-                    use:tooltip={{
-                      instant: true,
-                      text: !config?.isEditable
-                        ? "Create a copy"
-                        : config.syncStatus === "cloud"
-                          ? "Download"
-                          : "Upload",
-                    }}
-                  >
-                    <SvgIcon
-                      fill="var(--foreground-muted)"
-                      iconPath={!config?.isEditable
-                        ? "importIcon"
-                        : config.syncStatus === "cloud"
-                          ? "download"
-                          : "move_to_cloud_02"}
-                    />
-                  </button>
-                {/key}
-              {/if}
+              {#key config?.id}
+                <IconButton
+                  iconPath="importIcon"
+                  tooltipText="Create a copy"
+                  tooltipDelay={0}
+                  stopPropagation
+                  disabled={!config || config.isEditable}
+                  onClick={() => handleSyncConfig(config)}
+                />
+                <IconButton
+                  iconPath="download"
+                  tooltipText="Download"
+                  tooltipDelay={0}
+                  stopPropagation
+                  disabled={!config ||
+                    !config.isEditable ||
+                    config.syncStatus !== "cloud"}
+                  onClick={() => handleSyncConfig(config)}
+                />
+                <IconButton
+                  iconPath="move_to_cloud_02"
+                  tooltipText="Upload"
+                  tooltipDelay={0}
+                  stopPropagation
+                  disabled={!config ||
+                    !config.isEditable ||
+                    config.syncStatus !== "local"}
+                  onClick={() => handleSyncConfig(config)}
+                />
+              {/key}
             </svelte:fragment>
             <svelte:fragment slot="import-config-browser-button">
               <DisplayOnWeb>
@@ -823,29 +912,4 @@
     height: 100%;
     width: 100%;
   }
-
-  .icon-button {
-    display: flex;
-    align-items: center;
-    position: relative;
-    background: transparent;
-    border: none;
-    cursor: pointer;
-  }
-
-  .icon-button:disabled {
-    opacity: 0.4;
-    cursor: default;
-  }
-
-  div.popup {
-    display: block;
-    position: absolute;
-    margin-top: 1.75rem;
-    top: 0;
-    color: var(--foreground-muted);
-    background-color: var(--popover-background);
-    border-radius: 0.5rem;
-    padding: 0.5rem;
-  }
 </style>
diff --git a/src/routes/UserLogin.svelte b/src/routes/UserLogin.svelte
index 34b638e..993155f 100644
--- a/src/routes/UserLogin.svelte
+++ b/src/routes/UserLogin.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { tooltip } from "../lib/actions/tooltip";
   import { onDestroy } from "svelte";
   import { userAccountService } from "../lib/stores";
   import { doc, getDoc, writeBatch } from "firebase/firestore";
@@ -17,7 +16,7 @@
   import {
     MoltenPushButton,
     MoltenInput,
-    SvgIcon,
+    IconButton,
   } from "@intechstudio/grid-uikit";
 
   import {
@@ -131,8 +130,11 @@
     </BlockBody>
     <BlockRow>
       <MoltenInput bind:target={nameFieldValue} />
-      <button
-        on:click={() => {
+      <IconButton
+        iconPath="save_as_02"
+        tooltipText="Save"
+        tooltipDelay={0}
+        onClick={() => {
           usernameInput.active = false;
           setUserName(usernameInput.value ?? "");
           submitAnalytics({
@@ -142,13 +144,7 @@
             },
           });
         }}
-        use:tooltip={{
-          instant: true,
-          text: "Save",
-        }}
-      >
-        <SvgIcon iconPath={"save_as_02"} fill="var(--foreground-muted)" />
-      </button>
+      />
     </BlockRow>
     <div style="color: {usernameInput.valid ? '#10b981' : '#f59e0b'}">
       {usernameSelectionFeedback(usernameInput)}
@@ -159,8 +155,11 @@
       ><BlockBody>
         Logged in as {usernameInput.value ?? ""}
       </BlockBody>
-      <button
-        on:click={() => {
+      <IconButton
+        iconPath="log_out"
+        tooltipText="Logout"
+        tooltipDelay={0}
+        onClick={() => {
           logoutFromProfileCloud();
           submitAnalytics({
             eventName: "Cloud Action",
@@ -169,13 +168,7 @@
             },
           });
         }}
-        use:tooltip={{
-          instant: true,
-          text: "Logout",
-        }}
-      >
-        <SvgIcon iconPath={"log_out"} fill="var(--foreground-muted)" />
-      </button>
+      />
     </BlockRow></Block
   >
 {/if}