diff --git a/packages/panel/src/components/Panel.svelte b/packages/panel/src/components/Panel.svelte
index b42c6ea3d7..fff855d1e9 100644
--- a/packages/panel/src/components/Panel.svelte
+++ b/packages/panel/src/components/Panel.svelte
@@ -121,7 +121,7 @@
 
     .header {
       flex-shrink: 0;
-      padding: 0 2rem 0 2.5rem;
+      padding: 0 2.5rem 0 2.5rem;
       min-height: 0;
       height: 4rem;
       color: var(--theme-content-accent-color);
diff --git a/packages/theme/styles/_colors.scss b/packages/theme/styles/_colors.scss
index 1f100a6aa6..941b6e898c 100644
--- a/packages/theme/styles/_colors.scss
+++ b/packages/theme/styles/_colors.scss
@@ -46,6 +46,8 @@
   --primary-color-pink: #FA8DA1;
 
   --highlight-red: #F96E50;
+  --highlight-red-hover: #ff967e;
+  --highlight-red-press: #f96f50bd;
 }
 
 /* Dark Theme */
diff --git a/packages/theme/styles/common.scss b/packages/theme/styles/common.scss
index 23d8412979..f04f268a7a 100644
--- a/packages/theme/styles/common.scss
+++ b/packages/theme/styles/common.scss
@@ -52,6 +52,61 @@
   padding: 0 1.75rem;
   height: 4rem;
 }
+.antiNav-element {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  margin: 0 1rem;
+  height: 2.25rem;
+  border-radius: .5rem;
+  user-select: none;
+  cursor: pointer;
+
+  .an-element__icon {
+    min-width: 1rem;
+    color: var(--theme-content-trans-color);
+    margin: 0 1.125rem 0 .625rem;
+    &.sub { margin: 0 .5rem 0 2.75rem }
+  }
+  .an-element__label {
+    flex-grow: 1;
+    margin-right: .75rem;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    user-select: none;
+    font-weight: 400;
+    color: var(--theme-content-color);
+    &.title {
+      font-weight: 500;
+      color: var(--theme-caption-color);
+    }
+  }
+  .an-element__tool {
+    margin-right: .75rem;
+    visibility: hidden;
+  }
+  .an-element__counter {
+    margin-right: .75rem;
+    font-weight: 600;
+    font-size: .75rem;
+    color: var(--theme-caption-color);
+  }
+
+  &:hover, &.hovered {
+    background-color: var(--theme-button-bg-enabled);
+    .an-element__tool { visibility: visible; }
+  }
+  &.selected {
+    background-color: var(--theme-menu-selection);
+    &:hover { background-color: var(--theme-button-bg-enabled); }
+  }
+
+  &__dropbox {
+    height: auto;
+    margin-bottom: .5rem;
+  }
+}
 .antiNav-divider {
   flex-shrink: 0;
   margin: 1.5rem 0;
diff --git a/packages/theme/styles/popups.scss b/packages/theme/styles/popups.scss
index 0d86720593..91f3d13b97 100644
--- a/packages/theme/styles/popups.scss
+++ b/packages/theme/styles/popups.scss
@@ -78,6 +78,13 @@
       background-color: var(--theme-button-bg-pressed);
       z-index: 1;
     }
+
+    &.redlight {
+      color: var(--highlight-red);
+      &:hover { color: var(--highlight-red-hover); }
+      &:active { color: var(--highlight-red-press); }
+      &:focus { color: var(--highlight-red-press); }
+    }
   }
   .ap-check {
     margin-left: 1rem;
diff --git a/plugins/inventory-assets/assets/icons.svg b/plugins/inventory-assets/assets/icons.svg
index 9e77c4644e..b944f924c2 100644
--- a/plugins/inventory-assets/assets/icons.svg
+++ b/plugins/inventory-assets/assets/icons.svg
@@ -9,6 +9,10 @@
     <path d="M2.5,9.8l3.7,3.7c0,0,0,0,0,0c0.6,0.6,1.6,0.6,2.2,0l5.5-5.5C13.9,8,14,7.8,14,7.7V2.5C14,2.2,13.8,2,13.5,2H8.3 C8.1,2,8,2.1,7.9,2.1L2.5,7.6C2.2,7.9,2,8.3,2,8.7C2,9.1,2.2,9.5,2.5,9.8z M3.2,8.3L8.5,3H13v4.5l-5.3,5.3c-0.2,0.2-0.6,0.2-0.8,0 L3.2,9.1C3.1,9,3,8.9,3,8.7S3.1,8.4,3.2,8.3z"/>
   </symbol>
   <symbol id="variant" viewBox="0 0 24 24">
-    <path d="M16,16c-1.3,0-2.4,0.8-2.8,2H9c-1.5,0-2.4,0-2.7-0.3S6,16.5,6,15v-3.2C6.7,12,7.7,12,9,12h4.2c0.4,1.2,1.5,2,2.8,2 c1.7,0,3-1.3,3-3s-1.3-3-3-3c-1.3,0-2.4,0.8-2.8,2H9c-1.5,0-2.4,0-2.7-0.3C6.1,9.5,6,8.8,6,7.8C7.2,7.4,8,6.3,8,5c0-1.7-1.3-3-3-3 S2,3.3,2,5c0,1.3,0.8,2.4,2,2.8C4,7.9,4,7.9,4,8h0v7c0,2.1,0,3.2,0.9,4.1S6.9,20,9,20h4.2c0.4,1.2,1.5,2,2.8,2c1.7,0,3-1.3,3-3 S17.7,16,16,16z M16,10c0.6,0,1,0.4,1,1s-0.4,1-1,1s-1-0.4-1-1S15.4,10,16,10z M5,4c0.6,0,1,0.4,1,1S5.6,6,5,6S4,5.6,4,5S4.4,4,5,4z M16,20c-0.6,0-1-0.4-1-1s0.4-1,1-1s1,0.4,1,1S16.6,20,16,20z"/>
+    <g fill="var(--duotone-color)">
+      <path d="M16,11L16,11c0,1.1-0.9,2-2,2l0,0c-1.1,0-2-0.9-2-2l0,0c0-1.1,0.9-2,2-2l0,0C15.1,9,16,9.9,16,11z"/>
+      <path d="M20,19L20,19c0,1.1-0.9,2-2,2l0,0c-1.1,0-2-0.9-2-2l0,0c0-1.1,0.9-2,2-2l0,0C19.1,17,20,17.9,20,19z"/>
+    </g>
+    <path d="M18,16.4c-1.2,0-2.3,0.9-2.5,2H9c-1.8,0-2.6,0-3-0.4c-0.4-0.4-0.4-1.2-0.4-3v-3.8c0.7,0.4,1.8,0.4,3.4,0.4h2.5 c0.3,1.1,1.3,2,2.5,2c1.4,0,2.6-1.2,2.6-2.6S15.4,8.4,14,8.4c-1.2,0-2.3,0.9-2.5,2H9c-1.8,0-2.6,0-3-0.4C5.6,9.6,5.6,8.8,5.6,7V4 H4.4v11c0,2,0,3.1,0.8,3.8C5.9,19.6,7,19.6,9,19.6h6.5c0.3,1.1,1.3,2,2.5,2c1.4,0,2.6-1.2,2.6-2.6S19.4,16.4,18,16.4z M14,9.6 c0.8,0,1.4,0.6,1.4,1.4s-0.6,1.4-1.4,1.4s-1.4-0.6-1.4-1.4S13.2,9.6,14,9.6z M18,20.4c-0.8,0-1.4-0.6-1.4-1.4s0.6-1.4,1.4-1.4 s1.4,0.6,1.4,1.4S18.8,20.4,18,20.4z"/>
   </symbol>
 </svg>
diff --git a/plugins/inventory-resources/src/components/CreateCategory.svelte b/plugins/inventory-resources/src/components/CreateCategory.svelte
index 33731a4153..5cf6c7a510 100644
--- a/plugins/inventory-resources/src/components/CreateCategory.svelte
+++ b/plugins/inventory-resources/src/components/CreateCategory.svelte
@@ -68,6 +68,7 @@
   <Grid column={1} rowGap={1.5}>
     <EditBox
       label={inventory.string.Category}
+      icon={inventory.icon.Categories}
       bind:value={name}
       placeholder={inventory.string.Category}
       maxWidth={'16rem'}
diff --git a/plugins/inventory-resources/src/components/CreateProduct.svelte b/plugins/inventory-resources/src/components/CreateProduct.svelte
index 5cd896f2f1..e12e2cd292 100644
--- a/plugins/inventory-resources/src/components/CreateProduct.svelte
+++ b/plugins/inventory-resources/src/components/CreateProduct.svelte
@@ -80,6 +80,7 @@
   <Grid column={1} rowGap={1.75}>
     <EditBox
       label={inventory.string.Product}
+      icon={inventory.icon.Products}
       bind:value={doc.name}
       placeholder={inventory.string.Product}
       maxWidth={'16rem'}
diff --git a/plugins/inventory-resources/src/components/VariantPresenter.svelte b/plugins/inventory-resources/src/components/VariantPresenter.svelte
index f10a1ae8c7..26bf66f355 100644
--- a/plugins/inventory-resources/src/components/VariantPresenter.svelte
+++ b/plugins/inventory-resources/src/components/VariantPresenter.svelte
@@ -20,7 +20,7 @@
 </script>
 
 {#if value}
-  <div class="sm-tool-icon">
+  <div class="overflow-label sm-tool-icon">
     {value.name}
   </div>
 {/if}
diff --git a/plugins/setting-resources/src/components/CategoryElement.svelte b/plugins/setting-resources/src/components/CategoryElement.svelte
index 01a8fb3b74..0a6c4b7475 100644
--- a/plugins/setting-resources/src/components/CategoryElement.svelte
+++ b/plugins/setting-resources/src/components/CategoryElement.svelte
@@ -19,53 +19,24 @@
 
   export let icon: Asset | undefined = undefined
   export let label: IntlString | undefined = undefined
+  export let selected: boolean = false
 
   const dispatch = createEventDispatcher()
 </script>
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
-  class="flex-row-center container"
+  class="antiNav-element" class:selected
   on:click|stopPropagation={() => {
     dispatch('click')
   }}
 >
-  <div class="icon">
+  <div class="an-element__icon">
     {#if icon}
       <Icon {icon} size={'small'} />
     {/if}
   </div>
-  <span>
+  <span class="an-element__label title">
     {#if label}<Label {label} />{:else}{label}{/if}
   </span>
 </div>
-
-<style lang="scss">
-  .container {
-    margin: 0 1rem;
-    padding-left: .625rem;
-    padding-right: .75rem;
-    min-height: 2.25rem;
-    font-weight: 500;
-    color: var(--theme-caption-color);
-    border-radius: .5rem;
-    user-select: none;
-    cursor: pointer;
-
-    .icon {
-      margin-right: 1rem;
-      width: 1rem;
-      min-width: 1rem;
-      height: 1rem;
-      border-radius: .25rem;
-    }
-    span {
-      flex-grow: 1;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-
-    &:hover { background-color: var(--theme-button-bg-enabled); }
-  }
-</style>
diff --git a/plugins/setting-resources/src/components/Settings.svelte b/plugins/setting-resources/src/components/Settings.svelte
index c4bfd9d1a8..599fc6f423 100644
--- a/plugins/setting-resources/src/components/Settings.svelte
+++ b/plugins/setting-resources/src/components/Settings.svelte
@@ -41,44 +41,34 @@
   }
 </script>
 
-<div class="container">
-<div class="antiPanel-navigator filled indent">
-  <div class="flex-between navheader-container">
-    <span class="fs-title overflow-label">
-      <Label label={setting.string.Settings}/>
-    </span>
-  </div>
-  {#each categories as category}
-    <CategoryElement icon={category.icon} label={category.label} on:click={() => { selectCategory(category.name) }}/>
-  {/each}
-  <div class="signout">
-    <CategoryElement icon={setting.icon.Signout} label={setting.string.Signout} on:click={signOut}/>
-  </div>
-</div>    
+<div class="flex h-full">
+  <div class="antiPanel-navigator filled indent">
+    <div class="antiNav-header">
+      <span class="fs-title overflow-label">
+        <Label label={setting.string.Settings}/>
+      </span>
+    </div>
+    {#each categories as category}
+      <CategoryElement icon={category.icon} label={category.label} selected={category.name === categoryId} on:click={() => { selectCategory(category.name) }}/>
+    {/each}
+    <div class="signout">
+      <CategoryElement icon={setting.icon.Signout} label={setting.string.Signout} on:click={signOut}/>
+    </div>
+  </div>    
 
-<div class="antiPanel-component filled">
-  {#if category}
-    <Component is={category.component} />
-  {/if}
-</div>
+  <div class="antiPanel-component filled">
+    {#if category}
+      <Component is={category.component} />
+    {/if}
+  </div>
 </div>
 
 <style lang="scss">
-  .container {
-    display: flex;
-    height: 100%;
-    background: var(--theme-menu-color); 
-   
-    .signout {
-      display: flex;        
-      flex-direction: column-reverse;
-      flex-grow: 1;
-      margin-bottom: 2rem;
-    }
-  }
-  .navheader-container {
-    padding: 0 1.75rem;
-    height: 4rem;
+  .signout {
+    display: flex;        
+    flex-direction: column-reverse;
+    flex-grow: 1;
+    margin-bottom: 2rem;
   }
 </style>
 
diff --git a/plugins/task-resources/src/components/state/StatesPopup.svelte b/plugins/task-resources/src/components/state/StatesPopup.svelte
index aa50b22eb1..14c61850db 100644
--- a/plugins/task-resources/src/components/state/StatesPopup.svelte
+++ b/plugins/task-resources/src/components/state/StatesPopup.svelte
@@ -38,46 +38,27 @@
   )
 </script>
 
-<div class="flex-col statuses-container">
+<div class="antiPopup">
+  <div class="ap-space" />
   {#each states as state}
-    <div
-      class="flex-row-center state"
+    <button
+      class="ap-menuItem ap-woScroll flex-row-center"
       on:click={() => {
         dispatch('close', state)
       }}
     >
       <div class="color" style="background-color: {getPlatformColor(state.color)}" />
       {state.title}
-    </div>
+    </button>
   {/each}
+  <div class="ap-space" />
 </div>
 
 <style lang="scss">
-  .statuses-container {
-    padding: 0.5rem;
-    max-height: 100%;
-    min-width: 10rem;
-    color: var(--theme-caption-color);
-    background-color: var(--theme-button-bg-focused);
-    border: 1px solid var(--theme-button-border-enabled);
-    border-radius: 0.75rem;
-    user-select: none;
-    filter: drop-shadow(0 1.5rem 4rem rgba(0, 0, 0, 0.35));
-
-    .state {
-      padding: 0.5rem;
-      border-radius: 0.5rem;
-      cursor: pointer;
-
-      &:hover {
-        background-color: var(--theme-button-bg-hovered);
-      }
-      .color {
-        margin-right: 0.75rem;
-        width: 1rem;
-        height: 1rem;
-        border-radius: 0.25rem;
-      }
-    }
+  .color {
+    margin-right: .75rem;
+    width: 1rem;
+    height: 1rem;
+    border-radius: .25rem;
   }
 </style>
diff --git a/plugins/task-resources/src/components/state/StatusesPopup.svelte b/plugins/task-resources/src/components/state/StatusesPopup.svelte
index 718082e6aa..97fcd3506b 100644
--- a/plugins/task-resources/src/components/state/StatusesPopup.svelte
+++ b/plugins/task-resources/src/components/state/StatusesPopup.svelte
@@ -23,16 +23,18 @@
   const dispatch = createEventDispatcher()
 </script>
 
-<div class="flex-col popup">
-  <div class="flex-row-center red-color menu-item" on:click={() => { dispatch('close'); onDelete() }}>
+<div class="antiPopup">
+  <div class="ap-space" />
+  <div class="ap-menuItem ap-woScroll flex-row-center redlight" on:click={() => { dispatch('close'); onDelete() }}>
     <div class="mr-3">
       <Delete size={'small'} />
     </div>
-    <div class="flex-grow"><Label label={task.string.Delete} /></div>
+    <Label label={task.string.Delete} />
   </div>
+  <div class="ap-space" />
 </div>
 
-<style lang="scss">
+<!-- <style lang="scss">
   .popup {
     padding: .5rem;
     min-width: 12rem;
@@ -51,4 +53,4 @@
 
     &:hover { background-color: var(--theme-button-bg-hovered); }
   }
-</style>
+</style> -->
diff --git a/plugins/workbench-resources/src/components/Navigator.svelte b/plugins/workbench-resources/src/components/Navigator.svelte
index cbce48ca0b..21d6ac5c63 100644
--- a/plugins/workbench-resources/src/components/Navigator.svelte
+++ b/plugins/workbench-resources/src/components/Navigator.svelte
@@ -57,9 +57,8 @@
       specBottomCount = bottomSpecials.length
     }
     if (model.spaces) spModelCount = model.spaces.length
-    showDivider = (specTopCount > 0) ?? false
-  
     shownSpaces = spaces.filter(sp => !sp.archived)
+    showDivider = (specTopCount > 0 && specBottomCount + spModelCount > 0) ? true : false
   }
 
   $: if (model) update(model, spaces)
diff --git a/plugins/workbench-resources/src/components/navigator/SpecialElement.svelte b/plugins/workbench-resources/src/components/navigator/SpecialElement.svelte
index 3bf2517f69..a9ef3c932e 100644
--- a/plugins/workbench-resources/src/components/navigator/SpecialElement.svelte
+++ b/plugins/workbench-resources/src/components/navigator/SpecialElement.svelte
@@ -29,75 +29,25 @@
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
-  class="flex-row-center container" class:selected={selected}
+  class="antiNav-element" class:selected
   on:click|stopPropagation={() => {
     dispatch('click')
   }}
 >
-  <div class="icon">
+  <div class="an-element__icon">
     {#if icon}
       <Icon {icon} size={'small'} />
     {/if}
   </div>
-  <span>
+  <span class="an-element__label title">
     {#if label}<Label {label} />{:else}{label}{/if}
   </span>
   {#each actions as action}
-    <div class="tool">
+    <div class="an-element__tool">
       <ActionIcon label={action.label} icon={action.icon} size={'small'} action={action.action} />
     </div>
   {/each}
   {#if notifications > 0}
-    <div class="counter">{notifications}</div>
+    <div class="an-element__counter">{notifications}</div>
   {/if}
 </div>
-
-<style lang="scss">
-  .container {
-    margin: 0 16px;
-    padding-left: 10px;
-    padding-right: 12px;
-    min-height: 36px;
-    font-weight: 500;
-    color: var(--theme-caption-color);
-    border-radius: 8px;
-    user-select: none;
-    cursor: pointer;
-
-    .icon {
-      margin-right: 18px;
-      width: 16px;
-      min-width: 16px;
-      height: 16px;
-      border-radius: 4px;
-      opacity: 0.3;
-    }
-    span {
-      flex-grow: 1;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-    .tool {
-      margin-left: 12px;
-      visibility: hidden;
-    }
-    .counter {
-      margin-left: 12px;
-      font-weight: 600;
-      font-size: 12px;
-      line-height: 100%;
-    }
-
-    &.selected {
-      background-color: var(--theme-button-bg-enabled);
-    }
-
-    &:hover {
-      background-color: var(--theme-button-bg-enabled);
-      .tool {
-        visibility: visible;
-      }
-    }
-  }
-</style>
diff --git a/plugins/workbench-resources/src/components/navigator/TreeElement.svelte b/plugins/workbench-resources/src/components/navigator/TreeElement.svelte
index 9b65fe6ab9..8b19a69748 100644
--- a/plugins/workbench-resources/src/components/navigator/TreeElement.svelte
+++ b/plugins/workbench-resources/src/components/navigator/TreeElement.svelte
@@ -43,31 +43,28 @@
   }
 </script>
 
-<div
-  class="container"
-  class:selected
-  class:hovered
+<div class="antiNav-element" class:selected class:hovered
   on:click|stopPropagation={() => {
     if (node && !icon) collapsed = !collapsed
     dispatch('click')
   }}
 >
-  <div class="icon" class:sub={!node}>
+  <div class="an-element__icon" class:sub={!node}>
     {#if icon}
       <Icon {icon} size={'small'} />
     {:else if collapsed}<Collapsed size={'small'} />{:else}<Expanded size={'small'} />{/if}
   </div>
-  <span class="label" class:sub={node}>
+  <span class="an-element__label" class:title={node}>
     {#if label}<Label {label} />{:else}{title}{/if}
   </span>
   {#if node === false}
-    <div class="tool" on:click|stopPropagation={onMenuClick}>
+    <div class="an-element__tool" on:click|stopPropagation={onMenuClick}>
       <IconMoreV size={'small'} />
     </div>
   {:else}
     {#await actions() then actionItems}
       {#if actionItems.length === 1}
-        <div class="tool">
+        <div class="an-element__tool">
           <ActionIcon
             label={actionItems[0].label}
             icon={actionItems[0].icon}
@@ -78,81 +75,16 @@
           />
         </div>
       {:else if actionItems.length > 1}
-        <div class="tool" on:click|stopPropagation={onMenuClick}>
+        <div class="an-element__tool" on:click|stopPropagation={onMenuClick}>
           <IconMoreV size={'small'} />
         </div>
       {/if}
     {/await}
   {/if}
   {#if notifications > 0 && collapsed}
-    <div class="counter">{notifications}</div>
+    <div class="an-element__counter">{notifications}</div>
   {/if}
 </div>
 {#if node && !icon && !collapsed}
-  <div class="dropbox"><slot /></div>
+  <div class="antiNav-element__dropbox"><slot /></div>
 {/if}
-
-<style lang="scss">
-  .container {
-    display: flex;
-    align-items: center;
-    margin: 0 1rem;
-    height: 2.25rem;
-    border-radius: 0.5rem;
-    user-select: none;
-    cursor: pointer;
-
-    .icon {
-      min-width: 1rem;
-      color: var(--theme-content-trans-color);
-      margin: 0 1.125rem 0 0.625rem;
-      &.sub {
-        margin: 0 0.5rem 0 2.75rem;
-      }
-    }
-    .label {
-      flex-grow: 1;
-      margin-right: 0.75rem;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      user-select: none;
-      font-weight: 400;
-      color: var(--theme-content-color);
-      &.sub {
-        font-weight: 500;
-        color: var(--theme-caption-color);
-      }
-    }
-    .tool {
-      margin-right: 0.75rem;
-      visibility: hidden;
-    }
-    .counter {
-      margin-right: 0.75rem;
-      font-weight: 600;
-      font-size: 0.75rem;
-      color: var(--theme-caption-color);
-    }
-
-    &:hover,
-    &.hovered {
-      background-color: var(--theme-button-bg-enabled);
-      .tool {
-        visibility: visible;
-      }
-    }
-
-    &.selected {
-      background-color: var(--theme-menu-selection);
-      &:hover {
-        background-color: var(--theme-button-bg-enabled);
-      }
-    }
-  }
-
-  .dropbox {
-    height: auto;
-    margin-bottom: 0.5rem;
-  }
-</style>