diff --git a/src/lib/components/side-nav.svelte b/src/lib/components/side-nav.svelte
index c48230d45..6a6612f62 100644
--- a/src/lib/components/side-nav.svelte
+++ b/src/lib/components/side-nav.svelte
@@ -2,92 +2,63 @@
   import FeatureGuard from '$lib/components/feature-guard.svelte';
   import IsCloudGuard from '$lib/components/is-cloud-guard.svelte';
   import IsLegacyCloudGuard from '$lib/components/is-legacy-cloud-guard.svelte';
-  import Icon from '$lib/holocene/icon/icon.svelte';
-  import NavContainer from '$lib/holocene/navigation/nav-container.svelte';
-  import NavRow from '$lib/holocene/navigation/nav-row.svelte';
-  import NavTooltip from '$lib/holocene/navigation/nav-tooltip.svelte';
+  import Navigation from '$lib/holocene/navigation/navigation-container.svelte';
+  import NavigationItem from '$lib/holocene/navigation/navigation-item.svelte';
   import { translate } from '$lib/i18n/translate';
   import { inProgressBatchOperation } from '$lib/stores/batch-operations';
-  // import { labsMode } from '$lib/stores/labs-mode';
 
   import type { DescribeNamespaceResponse as Namespace } from '$types';
 
   export let isCloud = false;
   export let activeNamespace: Namespace;
   export let linkList: Partial<Record<string, string>>;
-
-  // $: labsHoverText = `${translate('common.labs')} ${
-  //   $labsMode
-  //     ? `${translate('common.on')} - ${translate('common.experimental')}`
-  //     : translate('common.off')
-  // }`;
-  // $: labsText = `${translate('common.labs')} ${
-  //   $labsMode ? translate('common.on') : translate('common.off')
-  // }`;
 </script>
 
-<NavContainer {isCloud} {linkList} aria-label={translate('common.primary')}>
+<Navigation {isCloud} {linkList} aria-label={translate('common.primary')}>
   <svelte:fragment slot="top">
-    <NavRow link={linkList.workflows} {isCloud} data-testid="workflows-button">
-      <NavTooltip text={translate('common.workflows')}>
-        <div class="nav-icon">
-          <Icon name="workflow" />
-        </div>
-      </NavTooltip>
-      <div class="nav-title">{translate('common.workflows')}</div>
-    </NavRow>
+    <NavigationItem
+      link={linkList.workflows}
+      data-testid="workflows-button"
+      label={translate('common.workflows')}
+      icon="workflow"
+    />
     <IsCloudGuard {isCloud}>
       <FeatureGuard
         enabled={Boolean(activeNamespace?.namespaceInfo?.supportsSchedules)}
       >
-        <NavRow
+        <NavigationItem
           link={linkList.schedules}
-          {isCloud}
           data-testid="schedules-button"
-        >
-          <NavTooltip text={translate('common.schedules')}>
-            <div class="nav-icon">
-              <Icon name="schedules" height={25} width={24} />
-            </div>
-          </NavTooltip>
-          <div class="nav-title">{translate('common.schedules')}</div>
-        </NavRow>
+          label={translate('common.schedules')}
+          icon="schedules"
+        />
       </FeatureGuard>
     </IsCloudGuard>
     <slot name="top" />
     <IsCloudGuard {isCloud}>
-      <NavRow link={linkList.archive} {isCloud} data-testid="archive-button">
-        <NavTooltip text={translate('common.archive')}>
-          <div class="nav-icon">
-            <Icon name="archives" />
-          </div>
-        </NavTooltip>
-        <div class="nav-title">{translate('common.archive')}</div>
-      </NavRow>
+      <NavigationItem
+        link={linkList.archive}
+        data-testid="archive-button"
+        label={translate('common.archive')}
+        icon="archives"
+      />
     </IsCloudGuard>
-    <NavRow link={linkList.batchOperations} {isCloud}>
-      <NavTooltip text={translate('batch.list-page-title')}>
-        <div class="nav-icon">
-          <Icon name="batch-operation" animate={$inProgressBatchOperation} />
-        </div>
-      </NavTooltip>
-      <div class="nav-title">{translate('batch.nav-title')}</div>
-    </NavRow>
+    <NavigationItem
+      link={linkList.batchOperations}
+      label={translate('batch.nav-title')}
+      tooltip={translate('batch.list-page-title')}
+      icon="batch-operation"
+      animate={!!$inProgressBatchOperation}
+    />
   </svelte:fragment>
   <svelte:fragment slot="middle">
     <IsLegacyCloudGuard {isCloud}>
-      <NavRow
+      <NavigationItem
         link={linkList.namespaces}
-        {isCloud}
         data-testid="namespaces-button"
-      >
-        <NavTooltip text={translate('common.namespaces')}>
-          <div class="nav-icon">
-            <Icon name="namespace" />
-          </div>
-        </NavTooltip>
-        <div class="nav-title">{translate('common.namespaces')}</div>
-      </NavRow>
+        label={translate('common.namespaces')}
+        icon="namespace"
+      />
     </IsLegacyCloudGuard>
     <slot name="middle" />
   </svelte:fragment>
@@ -95,52 +66,21 @@
     <slot name="bottom" />
     <slot name="import">
       <IsCloudGuard {isCloud}>
-        <NavRow link={linkList.import} {isCloud} data-testid="import-button">
-          <NavTooltip text={translate('common.import')}>
-            <div class="nav-icon">
-              <Icon name="import" />
-            </div>
-          </NavTooltip>
-          <div class="nav-title">{translate('common.import')}</div>
-        </NavRow>
+        <NavigationItem
+          link={linkList.import}
+          data-testid="import-button"
+          label={translate('common.import')}
+          icon="import"
+        />
       </IsCloudGuard>
     </slot>
     <slot name="feedback">
-      <NavRow link={linkList.feedback} {isCloud} externalLink>
-        <NavTooltip text={translate('common.feedback')}>
-          <div class="nav-icon">
-            <Icon name="feedback" />
-          </div>
-        </NavTooltip>
-        <div class="nav-title">{translate('common.feedback')}</div>
-      </NavRow>
+      <NavigationItem
+        link={linkList.feedback}
+        label={translate('common.feedback')}
+        icon="feedback"
+        external
+      />
     </slot>
-    <!-- <NavRow {isCloud} handleClick={() => ($labsMode = !$labsMode)}>
-      <NavTooltip right text={labsHoverText}>
-        <div class="nav-icon">
-          <Icon name="labs" active={$labsMode} />
-        </div>
-      </NavTooltip>
-      <div class="nav-title flex flex-col leading-3">
-        <div>{labsText}</div>
-        {#if $labsMode}
-          <p class="text-[12px]">
-            {translate('common.experimental')}
-          </p>
-        {/if}
-      </div>
-    </NavRow> -->
   </svelte:fragment>
-</NavContainer>
-
-<style lang="postcss">
-  .nav-icon {
-    @apply ml-2 mr-2 mt-0 h-6 cursor-pointer;
-  }
-
-  .nav-title {
-    width: 100px;
-    overflow: hidden;
-    transition: width 0.15s linear;
-  }
-</style>
+</Navigation>
diff --git a/src/lib/holocene/logo.svelte b/src/lib/holocene/logo.svelte
index 99ebba2b2..1f2e5469a 100644
--- a/src/lib/holocene/logo.svelte
+++ b/src/lib/holocene/logo.svelte
@@ -1,35 +1,25 @@
 <script lang="ts">
   import type { SVGAttributes } from 'svelte/elements';
 
+  import { twMerge as merge } from 'tailwind-merge';
+
   interface $$Props extends SVGAttributes<SVGElement> {
     width?: string;
     height?: string;
-    isCloud: boolean;
-    title?: string;
   }
+
   export let width = '100px';
   export let height = '100px';
-  export let isCloud: boolean;
-  export let title = '';
-
-  let stroke = isCloud ? 'black' : 'white';
 </script>
 
 <svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 100 100"
   {width}
   {height}
-  viewBox="0 0 100 100"
-  xmlns="http://www.w3.org/2000/svg"
-  xmlns:xlink="http://www.w3.org/1999/xlink"
-  version="1.1"
-  role="img"
+  class={merge('fill-current stroke-current', $$restProps.class)}
 >
-  <title>{title}</title>
-  <!-- Generated by Pixelmator Pro 2.1.3 -->
   <path
-    id="Path"
-    d="M65.816 34.224 C63.684 18.251 58.288 4.917 49.999 4.917 41.711 4.917 36.314 18.251 34.182 34.224 18.208 36.357 4.874 41.753 4.874 50.042 4.874 58.33 18.211 63.727 34.182 65.859 36.314 81.83 41.711 95.167 49.999 95.167 58.288 95.167 63.684 81.83 65.816 65.859 81.79 63.727 95.124 58.33 95.124 50.042 95.124 41.753 81.788 36.357 65.816 34.224 Z M33.661 61.206 C18.363 58.997 9.44 53.939 9.44 50.042 9.44 46.144 18.363 41.087 33.661 38.877 33.324 42.56 33.149 46.319 33.149 50.042 33.149 53.764 33.324 57.526 33.661 61.206 Z M49.999 9.483 C53.897 9.483 58.954 18.405 61.164 33.703 57.483 33.367 53.721 33.191 49.999 33.191 46.277 33.191 42.515 33.367 38.835 33.703 41.044 18.405 46.102 9.483 49.999 9.483 Z M66.338 61.206 C65.585 61.316 62.496 61.678 61.715 61.755 61.638 62.539 61.273 65.625 61.166 66.378 58.956 81.676 53.899 90.598 50.001 90.598 46.104 90.598 41.047 81.676 38.837 66.378 38.73 65.625 38.365 62.536 38.288 61.755 37.932 58.129 37.717 54.234 37.717 50.042 37.717 45.85 37.932 41.954 38.288 38.326 41.914 37.97 45.809 37.755 50.001 37.755 54.194 37.755 58.089 37.97 61.715 38.326 62.499 38.403 65.585 38.767 66.338 38.875 81.636 41.085 90.56 46.144 90.56 50.039 90.56 53.935 81.636 58.997 66.338 61.206 Z"
-    {stroke}
-    fill={stroke}
+    d="M66 34C64 18 58 5 50 5S36 18 34 34C18 36 5 42 5 50s13 14 29 16c2 16 8 29 16 29s14-13 16-29c16-2 29-8 29-16S82 36 66 34ZM34 61C18 59 9 54 9 50s9-9 25-11a123 123 0 0 0 0 22ZM50 9c4 0 9 9 11 25a123 123 0 0 0-22 0c2-16 7-25 11-25Zm16 52-4 1-1 4c-2 16-7 25-11 25s-9-9-11-25a218 218 0 0 1-1-16V38a120 120 0 0 1 28 1c16 2 25 7 25 11s-9 9-25 11Z"
   />
 </svg>
diff --git a/src/lib/holocene/navigation/nav-container.svelte b/src/lib/holocene/navigation/nav-container.svelte
deleted file mode 100644
index 5d1acc911..000000000
--- a/src/lib/holocene/navigation/nav-container.svelte
+++ /dev/null
@@ -1,155 +0,0 @@
-<script lang="ts">
-  import { page } from '$app/stores';
-
-  import Icon from '$lib/holocene/icon/icon.svelte';
-  import Logo from '$lib/holocene/logo.svelte';
-  import { translate } from '$lib/i18n/translate';
-  import { navOpen } from '$lib/stores/nav-open';
-
-  export let isCloud = false;
-  export let linkList: Partial<Record<string, string>>;
-
-  function toggleNav() {
-    $navOpen = !$navOpen;
-  }
-
-  $: version = $page.data?.settings?.version ?? '';
-</script>
-
-<nav
-  class="nav-header transition-width"
-  class:cloud={isCloud}
-  data-testid="navigation-header"
-  {...$$restProps}
->
-  <div class="relative h-32 min-h-[84px]">
-    <a
-      href={linkList.home}
-      class="absolute block"
-      style="top: 22px; left: 18px;"
-    >
-      <Logo
-        height="24px"
-        width="24px"
-        {isCloud}
-        title={translate('workflows.recent-workflows-link')}
-      />
-    </a>
-    <button
-      class="nav-toggle"
-      class:open={$navOpen}
-      class:close={!$navOpen}
-      on:click={toggleNav}
-      title={$navOpen ? 'Collapse menu' : 'Expand menu'}
-    >
-      <Icon name={$navOpen ? 'chevron-left' : 'chevron-right'} />
-    </button>
-  </div>
-  <div
-    class="nav-wrapper transition-width"
-    class:open={$navOpen}
-    class:close={!$navOpen}
-  >
-    <div class="nav-section-wrapper">
-      <ul class="nav-section">
-        <slot name="top" />
-      </ul>
-      <hr
-        class="my-8 w-full {isCloud ? 'stroke-slate-200' : 'stroke-slate-700'}"
-      />
-      <ul class="nav-section">
-        <slot name="middle" />
-      </ul>
-    </div>
-    <div class="nav-section-wrapper">
-      <ul class="nav-section">
-        <slot name="bottom" />
-      </ul>
-    </div>
-  </div>
-  <div
-    class="h-4 w-full pb-12 pt-24 text-center text-[10px] {isCloud
-      ? 'text-slate-500'
-      : 'text-slate-300'}"
-  >
-    {#if version}
-      <span class="sr-only">{translate('common.version')}</span>
-    {/if}
-    {version}
-  </div>
-  <slot name="drawer" />
-</nav>
-
-<style lang="postcss">
-  .nav-header {
-    @apply relative flex h-screen flex-col justify-between bg-primary text-white;
-  }
-
-  .nav-header.cloud {
-    @apply surface-primary text-primary;
-  }
-
-  .nav-wrapper {
-    @apply flex w-16 grow flex-col items-center justify-between;
-  }
-
-  .nav-wrapper.open {
-    @apply w-40;
-  }
-
-  .nav-section-wrapper {
-    @apply flex w-full flex-col;
-  }
-
-  .nav-section {
-    @apply flex flex-col gap-2 px-3;
-  }
-
-  .cloud {
-    @apply surface-primary text-primary;
-  }
-
-  .close :global(.nav-title) {
-    width: 0;
-  }
-
-  .open :global(.nav-title) {
-    width: 100px;
-  }
-
-  .open :global(.namespace) {
-    width: 100px;
-  }
-
-  .nav-toggle {
-    @apply transition-left absolute left-[18px] top-[52px] hidden;
-  }
-
-  .nav-header:hover .nav-toggle {
-    @apply block;
-  }
-
-  .nav-header:focus .nav-toggle {
-    @apply block;
-  }
-
-  .nav-toggle.close {
-    left: 18px;
-  }
-
-  .nav-toggle.open {
-    left: 130px;
-  }
-
-  .transition-left {
-    transition:
-      left 0.15s linear,
-      width 0.15s linear;
-  }
-
-  .transition-width {
-    transition:
-      width 0.15s ease-in-out,
-      width 0.15s ease-in-out;
-  }
-</style>
diff --git a/src/lib/holocene/navigation/nav-row.svelte b/src/lib/holocene/navigation/nav-row.svelte
deleted file mode 100644
index a27f21c4a..000000000
--- a/src/lib/holocene/navigation/nav-row.svelte
+++ /dev/null
@@ -1,63 +0,0 @@
-<script lang="ts">
-  export let link: string | null = null;
-  export let isCloud: boolean;
-  export let noFilter = false;
-  export let wrap = false;
-  export let externalLink = false;
-  export let handleClick: () => void = null;
-  let classes = `nav-row ${$$props.class} ${isCloud ? 'cloud' : 'local'}`;
-</script>
-
-<li
-  class={link ? '' : classes}
-  class:noFilter
-  class:wrap
-  class:button={handleClick !== null}
-  data-testid={$$props['data-testid']}
->
-  {#if handleClick !== null}
-    <button on:click={handleClick} class="{classes} text-left">
-      <slot />
-    </button>
-  {:else if link && externalLink}
-    <a href={link} rel="noreferrer" target="_blank" class={classes}>
-      <slot />
-    </a>
-  {:else if link}
-    <a href={link} class={classes}>
-      <slot />
-    </a>
-  {:else}
-    <slot />
-  {/if}
-</li>
-
-<style lang="postcss">
-  .nav-row {
-    @apply flex flex-row items-center whitespace-nowrap rounded-lg py-1 text-sm font-medium;
-  }
-
-  .nav-row.button {
-    @apply py-0;
-  }
-
-  .wrap {
-    @apply whitespace-normal;
-  }
-
-  .local {
-    @apply text-white;
-  }
-
-  .cloud {
-    @apply text-primary;
-  }
-
-  .local:hover {
-    @apply surface-primary text-primary;
-  }
-
-  .cloud:hover {
-    @apply bg-inverse text-white;
-  }
-</style>
diff --git a/src/lib/holocene/navigation/nav-tooltip.svelte b/src/lib/holocene/navigation/nav-tooltip.svelte
deleted file mode 100644
index 29a252cfc..000000000
--- a/src/lib/holocene/navigation/nav-tooltip.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<script lang="ts">
-  import { navOpen } from '$lib/stores/nav-open';
-
-  import Tooltip from '../tooltip.svelte';
-
-  export let props = $$restProps;
-  export let text = $$restProps.text;
-</script>
-
-<Tooltip right hide={$navOpen} {text} {...props}>
-  <slot />
-</Tooltip>
diff --git a/src/lib/holocene/navigation/navigation-container.svelte b/src/lib/holocene/navigation/navigation-container.svelte
new file mode 100644
index 000000000..fde6ff266
--- /dev/null
+++ b/src/lib/holocene/navigation/navigation-container.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+  import { twMerge as merge } from 'tailwind-merge';
+
+  import { page } from '$app/stores';
+
+  import Icon from '$lib/holocene/icon/icon.svelte';
+  import Logo from '$lib/holocene/logo.svelte';
+  import { translate } from '$lib/i18n/translate';
+  import { navOpen } from '$lib/stores/nav-open';
+
+  export let isCloud = false;
+  export let linkList: Partial<Record<string, string>>;
+
+  const toggle = () => ($navOpen = !$navOpen);
+
+  $: version = $page.data?.settings?.version ?? '';
+</script>
+
+<nav
+  class={merge(
+    'group grid h-screen w-16 grid-cols-[2rem] grid-rows-[fit-content(1.5rem)_minmax(3rem,4rem)_1fr_8rem] gap-2 border-r border-subtle px-4 py-5 transition-width dark:surface-primary data-[nav=open]:w-40 data-[nav=open]:grid-cols-[100%]',
+    isCloud ? 'surface-primary' : 'surface-inverse text-white',
+  )}
+  data-nav={$navOpen ? 'open' : 'closed'}
+  data-testid="navigation-header"
+  {...$$restProps}
+>
+  <a href={linkList.home}>
+    <Logo height="24px" width="24px" class="m-1" />
+  </a>
+  <button
+    title={$navOpen ? 'Collapse Navigation' : 'Expand Navigation'}
+    class="mx-[4px] self-start justify-self-end opacity-0 transition-[opacity,transform] group-hover:opacity-100 group-focus:opacity-100 group-data-[nav=open]:rotate-180"
+    on:click={toggle}
+  >
+    <Icon name="chevron-right" />
+  </button>
+  <div role="list">
+    <slot name="top" />
+    <hr class="my-8 border-subtle" />
+    <slot name="middle" />
+  </div>
+  <div class="self-end">
+    <slot name="bottom" />
+    <div
+      class="self-center justify-self-center pb-3 text-center text-[0.6rem] text-secondary"
+    >
+      <span class="sr-only">{translate('common.version')}</span>
+      {version}
+    </div>
+  </div>
+</nav>
diff --git a/src/lib/holocene/navigation/navigation-item.svelte b/src/lib/holocene/navigation/navigation-item.svelte
new file mode 100644
index 000000000..7c71eee16
--- /dev/null
+++ b/src/lib/holocene/navigation/navigation-item.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+  import Icon from '../icon/icon.svelte';
+  import type { IconName } from '../icon/paths';
+
+  export let link: string;
+  export let label: string;
+  export let icon: IconName;
+  export let tooltip = label;
+  export let external = false;
+  export let animate = false;
+
+  $: rel = external ? 'noopener noreferrer' : '';
+  $: target = external ? '_blank' : '';
+</script>
+
+<div role="listitem" data-testid={$$props['data-testid']} class="relative">
+  <a
+    href={link}
+    {rel}
+    {target}
+    class="mb-1 flex items-center gap-2 whitespace-nowrap rounded-lg p-1 text-sm font-medium group-[.surface-inverse]:hover:bg-white group-[.surface-primary]:hover:bg-black group-[.surface-inverse]:hover:text-black group-[.surface-primary]:hover:text-white"
+  >
+    <div
+      class="h-6 w-6 after:absolute after:left-[calc(100%_+_1.5rem)] after:top-0 after:hidden after:h-8 after:items-center after:rounded-md after:bg-slate-800 after:p-1 after:px-2 after:text-xs after:text-white after:content-[attr(data-tooltip)] group-data-[nav=closed]:hover:after:flex"
+      data-tooltip={tooltip}
+    >
+      <Icon name={icon} {animate} />
+    </div>
+    <div class="opacity-0 transition-opacity group-data-[nav=open]:opacity-100">
+      {label}
+    </div>
+  </a>
+</div>
diff --git a/src/lib/holocene/tooltip.svelte b/src/lib/holocene/tooltip.svelte
index 566e24bd9..00dfbaa42 100644
--- a/src/lib/holocene/tooltip.svelte
+++ b/src/lib/holocene/tooltip.svelte
@@ -99,7 +99,7 @@
       class:topLeft
       style={width ? `white-space: pre-wrap; width: ${width}px;` : null}
     >
-      <div class="inline-block rounded-lg bg-slate-800 px-2 py-2">
+      <div class="inline-block rounded-lg bg-primary px-2 py-2">
         {#if copyable}
           <Copyable
             {copySuccessIconTitle}
diff --git a/src/lib/theme/plugin.ts b/src/lib/theme/plugin.ts
index 03c8a6993..2170428ee 100644
--- a/src/lib/theme/plugin.ts
+++ b/src/lib/theme/plugin.ts
@@ -215,6 +215,14 @@ const temporal = plugin(
 
         DEFAULT: css('--color-text-primary'),
       }),
+      extend: {
+        transitionProperty: {
+          width: 'width',
+          height: 'height',
+          left: 'left',
+          right: 'right',
+        },
+      },
       outlineColor: ({ theme }) => ({
         ...theme('colors'),