diff --git a/src/lib/components/Actions.svelte b/src/lib/components/Actions.svelte
index 51c7f87b..7f5b64dc 100644
--- a/src/lib/components/Actions.svelte
+++ b/src/lib/components/Actions.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+  import { Button } from '$/components/ui/button';
+  import { Separator } from '$/components/ui/separator';
+  import { Switch } from '$/components/ui/switch';
   import { browser } from '$app/environment';
   import Card from '$lib/components/Card/Card.svelte';
   import { waitForRender } from '$lib/util/autoSync';
@@ -9,9 +12,6 @@
   import { version as FAVersion } from '@fortawesome/fontawesome-free/package.json';
   import dayjs from 'dayjs';
   import { toBase64 } from 'js-base64';
-  import { Button } from './ui/Button';
-  import { Separator } from './ui/separator';
-  import { Switch } from './ui/switch';
 
   const FONT_AWESOME_URL = `https://cdnjs.cloudflare.com/ajax/libs/font-awesome/${FAVersion}/css/all.min.css`;
 
diff --git a/src/lib/components/Card/Tabs.svelte b/src/lib/components/Card/Tabs.svelte
index 950c8000..535a9e31 100644
--- a/src/lib/components/Card/Tabs.svelte
+++ b/src/lib/components/Card/Tabs.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-  import { Separator } from '$lib/components/ui/separator';
+  import { Button } from '$/components/ui/button';
+  import { Separator } from '$/components/ui/separator';
   import type { Tab } from '$lib/types';
   import { fade } from 'svelte/transition';
-  import { Button } from '../ui/button';
 
   let {
     tabs,
diff --git a/src/lib/components/DropdownNavMenu.svelte b/src/lib/components/DropdownNavMenu.svelte
index 07765ccf..e4323300 100644
--- a/src/lib/components/DropdownNavMenu.svelte
+++ b/src/lib/components/DropdownNavMenu.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import * as Popover from '$lib/components/ui/popover/index.js';
+  import * as Popover from '$/components/ui/popover';
 
   interface Props {
     links: { title: string; href: string }[];
diff --git a/src/lib/components/ExpandableBoxes.svelte b/src/lib/components/ExpandableBoxes.svelte
new file mode 100644
index 00000000..78617d2a
--- /dev/null
+++ b/src/lib/components/ExpandableBoxes.svelte
@@ -0,0 +1,67 @@
+<script>
+  import { flip } from 'svelte/animate';
+  import { quintOut } from 'svelte/easing';
+  import { crossfade, scale } from 'svelte/transition';
+
+  // Setup crossfade transition
+  const [send, receive] = crossfade({
+    duration: 400,
+    easing: quintOut,
+    fallback(node, params) {
+      return scale(node, {
+        start: 0.8,
+        duration: 300,
+        easing: quintOut
+      });
+    }
+  });
+
+  // Sample data - replace with your actual data
+  export let items = [
+    { id: 1, title: 'Box 1', content: 'Content 1' },
+    { id: 2, title: 'Box 2', content: 'Content 2' }
+  ];
+
+  // Track which items are expanded (using Set)
+  let expandedIds = new Set();
+
+  function toggleExpand(id) {
+    // If already expanded, remove it, otherwise add it
+    if (expandedIds.has(id)) {
+      expandedIds.delete(id);
+    } else {
+      expandedIds.add(id);
+    }
+    expandedIds = new Set(expandedIds); // Replace the entire Set to trigger reactivity
+  }
+
+  $: expandedItems = items.filter((item) => expandedIds.has(item.id));
+  $: collapsedItems = items.filter((item) => !expandedIds.has(item.id));
+</script>
+
+<div class="flex flex-col gap-4">
+  <!-- Combined list approach -->
+  <div class="grid grid-cols-[repeat(auto-fit,minmax(150px,1fr))] gap-4">
+    {#each items as item (item.id)}
+      {@const isExpanded = expandedIds.has(item.id)}
+      <div
+        class="duration-400 ease-[cubic-bezier(0.22,1,0.36,1)] w-full min-w-0 transition-all {isExpanded
+          ? 'order-first col-span-full'
+          : ''}"
+        animate:flip={{ duration: 400 }}>
+        <button
+          class="flex h-full w-full min-w-0 flex-col rounded-lg bg-neutral-100 p-4 text-left shadow-md transition-all duration-200 hover:-translate-y-0.5 hover:bg-neutral-200 {isExpanded
+            ? 'bg-blue-50 p-6 shadow-lg'
+            : ''}"
+          in:receive={{ key: item.id }}
+          out:send={{ key: item.id }}
+          on:click={() => toggleExpand(item.id)}>
+          <h3 class="m-0 mb-2 overflow-hidden text-ellipsis whitespace-nowrap">{item.title}</h3>
+          {#if isExpanded}
+            <p class="m-0">{item.content}</p>
+          {/if}
+        </button>
+      </div>
+    {/each}
+  </div>
+</div>
diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index 70e04bcc..c984dc6d 100644
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -7,15 +7,15 @@
 </script>
 
 <script lang="ts">
+  import { Button } from '$/components/ui/button';
+  import { Separator } from '$/components/ui/separator';
+  import { Switch } from '$/components/ui/switch';
   import { env } from '$lib/util/env';
   import { dismissPromotion, getActivePromotion } from '$lib/util/promos/promo';
   import { stateStore } from '$lib/util/state';
   import { MCBaseURL } from '$lib/util/util';
   import type { ComponentProps } from 'svelte';
   import DropdownNavMenu from './DropdownNavMenu.svelte';
-  import { Button } from './ui/button';
-  import { Separator } from './ui/separator';
-  import { Switch } from './ui/switch';
 
   const { isEnabledMermaidChartLinks } = env;
 
diff --git a/src/lib/components/Preset.svelte b/src/lib/components/Preset.svelte
index 9413dfd3..bbbdbe47 100644
--- a/src/lib/components/Preset.svelte
+++ b/src/lib/components/Preset.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
+  import { Button } from '$/components/ui/button';
   import Card from '$lib/components/Card/Card.svelte';
   import { updateCode } from '$lib/util/state';
   import { logEvent } from '$lib/util/stats';
-  import { Button } from './ui/button';
 
   const samples = {
     Flow: `flowchart TD
diff --git a/src/routes/edit/+page.svelte b/src/routes/edit/+page.svelte
index 3b43b277..b3b89a29 100644
--- a/src/routes/edit/+page.svelte
+++ b/src/routes/edit/+page.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
+  import { Button } from '$/components/ui/button';
+  import * as Resizable from '$/components/ui/resizable';
   import Actions from '$lib/components/Actions.svelte';
   import Card from '$lib/components/Card/Card.svelte';
   import Editor from '$lib/components/Editor.svelte';
   import Navbar from '$lib/components/Navbar.svelte';
   import Preset from '$lib/components/Preset.svelte';
-  import { Button } from '$lib/components/ui/button';
-  import * as Resizable from '$lib/components/ui/resizable/index.js';
   import View from '$lib/components/View.svelte';
   import type { DocumentationConfig, EditorMode, Tab, ValidatedState } from '$lib/types';
   import { stateStore, updateCodeStore } from '$lib/util/state';