diff --git a/website/package-lock.json b/website/package-lock.json
index e7300a9d4..4df98f70a 100644
--- a/website/package-lock.json
+++ b/website/package-lock.json
@@ -9,7 +9,6 @@
             "version": "0.0.1",
             "dependencies": {
                 "@docsearch/js": "^3.9.0",
-                "@internationalized/date": "^3.8.2",
                 "@mapbox/sphericalmercator": "^2.0.1",
                 "@mapbox/tilebelt": "^2.0.2",
                 "@maplibre/maplibre-gl-geocoder": "^1.9.4",
@@ -28,6 +27,7 @@
                 "tailwind-merge": "^3.3.0"
             },
             "devDependencies": {
+                "@internationalized/date": "^3.12.0",
                 "@lucide/svelte": "^0.544.0",
                 "@sveltejs/adapter-static": "^3.0.8",
                 "@sveltejs/enhanced-img": "^0.6.0",
@@ -44,7 +44,7 @@
                 "@types/sortablejs": "^1.15.8",
                 "@typescript-eslint/eslint-plugin": "^8.33.1",
                 "@typescript-eslint/parser": "^8.33.1",
-                "bits-ui": "^2.14.4",
+                "bits-ui": "^2.17.2",
                 "eslint": "^9.28.0",
                 "eslint-config-prettier": "^10.1.5",
                 "eslint-plugin-svelte": "^3.9.1",
@@ -1884,16 +1884,6 @@
                 }
             }
         },
-        "node_modules/@emnapi/core": {
-            "version": "1.9.2",
-            "dev": true,
-            "license": "MIT",
-            "optional": true,
-            "dependencies": {
-                "@emnapi/wasi-threads": "1.2.1",
-                "tslib": "^2.4.0"
-            }
-        },
         "node_modules/@emnapi/runtime": {
             "version": "1.9.2",
             "dev": true,
@@ -1903,15 +1893,6 @@
                 "tslib": "^2.4.0"
             }
         },
-        "node_modules/@emnapi/wasi-threads": {
-            "version": "1.2.1",
-            "dev": true,
-            "license": "MIT",
-            "optional": true,
-            "dependencies": {
-                "tslib": "^2.4.0"
-            }
-        },
         "node_modules/@esbuild/aix-ppc64": {
             "version": "0.27.7",
             "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.7.tgz",
@@ -3170,6 +3151,9 @@
         },
         "node_modules/@internationalized/date": {
             "version": "3.12.0",
+            "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.12.0.tgz",
+            "integrity": "sha512-/PyIMzK29jtXaGU23qTvNZxvBXRtKbNnGDFD+PY6CZw/Y8Ex8pFUzkuCJCG9aOqmShjqhS9mPqP6Dk5onQY8rQ==",
+            "dev": true,
             "license": "Apache-2.0",
             "dependencies": {
                 "@swc/helpers": "^0.5.0"
@@ -3366,23 +3350,6 @@
                 "pbf": "bin/pbf"
             }
         },
-        "node_modules/@napi-rs/wasm-runtime": {
-            "version": "1.1.2",
-            "dev": true,
-            "license": "MIT",
-            "optional": true,
-            "dependencies": {
-                "@tybys/wasm-util": "^0.10.1"
-            },
-            "funding": {
-                "type": "github",
-                "url": "https://github.com/sponsors/Brooooooklyn"
-            },
-            "peerDependencies": {
-                "@emnapi/core": "^1.7.1",
-                "@emnapi/runtime": "^1.7.1"
-            }
-        },
         "node_modules/@polka/url": {
             "version": "1.0.0-next.29",
             "dev": true,
@@ -3922,6 +3889,7 @@
         },
         "node_modules/@swc/helpers": {
             "version": "0.5.21",
+            "dev": true,
             "license": "Apache-2.0",
             "dependencies": {
                 "tslib": "^2.8.0"
@@ -4203,15 +4171,6 @@
                 "vite": "^5.2.0 || ^6 || ^7 || ^8"
             }
         },
-        "node_modules/@tybys/wasm-util": {
-            "version": "0.10.1",
-            "dev": true,
-            "license": "MIT",
-            "optional": true,
-            "dependencies": {
-                "tslib": "^2.4.0"
-            }
-        },
         "node_modules/@types/cookie": {
             "version": "0.6.0",
             "dev": true,
diff --git a/website/package.json b/website/package.json
index c9b5a0568..a5110d5f9 100644
--- a/website/package.json
+++ b/website/package.json
@@ -14,6 +14,7 @@
         "format": "prettier --write . --config ../.prettierrc --ignore-path ../.prettierignore --ignore-path ./.gitignore"
     },
     "devDependencies": {
+        "@internationalized/date": "^3.12.0",
         "@lucide/svelte": "^0.544.0",
         "@sveltejs/adapter-static": "^3.0.8",
         "@sveltejs/enhanced-img": "^0.6.0",
@@ -30,7 +31,7 @@
         "@types/sortablejs": "^1.15.8",
         "@typescript-eslint/eslint-plugin": "^8.33.1",
         "@typescript-eslint/parser": "^8.33.1",
-        "bits-ui": "^2.14.4",
+        "bits-ui": "^2.17.2",
         "eslint": "^9.28.0",
         "eslint-config-prettier": "^10.1.5",
         "eslint-plugin-svelte": "^3.9.1",
@@ -59,7 +60,6 @@
     "type": "module",
     "dependencies": {
         "@docsearch/js": "^3.9.0",
-        "@internationalized/date": "^3.8.2",
         "@mapbox/sphericalmercator": "^2.0.1",
         "@mapbox/tilebelt": "^2.0.2",
         "@maplibre/maplibre-gl-geocoder": "^1.9.4",
diff --git a/website/src/lib/components/GPXStatistics.svelte b/website/src/lib/components/GPXStatistics.svelte
index 8ead6658c..484351eca 100644
--- a/website/src/lib/components/GPXStatistics.svelte
+++ b/website/src/lib/components/GPXStatistics.svelte
@@ -33,7 +33,7 @@
 <Card.Root
     class="h-full {orientation === 'vertical'
         ? 'min-w-40 sm:min-w-44'
-        : 'w-full h-fit my-1'} border-none shadow-none p-0 text-sm sm:text-base bg-transparent"
+        : 'w-full h-fit my-1'} ring-0 p-0 text-sm sm:text-base bg-transparent"
 >
     <Card.Content class="h-full p-0">
         <div
diff --git a/website/src/lib/components/Menu.svelte b/website/src/lib/components/Menu.svelte
index 29d4b00fe..2251034d1 100644
--- a/website/src/lib/components/Menu.svelte
+++ b/website/src/lib/components/Menu.svelte
@@ -389,7 +389,7 @@
                 <Menubar.Content class="border-none">
                     <Menubar.Sub>
                         <Menubar.SubTrigger>
-                            <Ruler size="16" class="mr-2" />{i18n._('menu.distance_units')}
+                            <Ruler size="16" />{i18n._('menu.distance_units')}
                         </Menubar.SubTrigger>
                         <Menubar.SubContent>
                             <Menubar.RadioGroup bind:value={$distanceUnits}>
@@ -407,7 +407,7 @@
                     </Menubar.Sub>
                     <Menubar.Sub>
                         <Menubar.SubTrigger>
-                            <Zap size="16" class="mr-2" />{i18n._('menu.velocity_units')}
+                            <Zap size="16" />{i18n._('menu.velocity_units')}
                         </Menubar.SubTrigger>
                         <Menubar.SubContent>
                             <Menubar.RadioGroup bind:value={$velocityUnits}>
@@ -422,7 +422,7 @@
                     </Menubar.Sub>
                     <Menubar.Sub>
                         <Menubar.SubTrigger>
-                            <Thermometer size="16" class="mr-2" />{i18n._('menu.temperature_units')}
+                            <Thermometer size="16" />{i18n._('menu.temperature_units')}
                         </Menubar.SubTrigger>
                         <Menubar.SubContent>
                             <Menubar.RadioGroup bind:value={$temperatureUnits}>
@@ -438,7 +438,7 @@
                     <Menubar.Separator />
                     <Menubar.Sub>
                         <Menubar.SubTrigger>
-                            <Languages size="16" class="mr-2" />
+                            <Languages size="16" />
                             {i18n._('menu.language')}
                         </Menubar.SubTrigger>
                         <Menubar.SubContent>
@@ -454,9 +454,9 @@
                     <Menubar.Sub>
                         <Menubar.SubTrigger>
                             {#if mode.current === 'light' || !mode.current}
-                                <Sun size="16" class="mr-2" />
+                                <Sun size="16" />
                             {:else}
-                                <Moon size="16" class="mr-2" />
+                                <Moon size="16" />
                             {/if}
                             {i18n._('menu.mode')}
                         </Menubar.SubTrigger>
@@ -479,7 +479,7 @@
                     <Menubar.Separator />
                     <Menubar.Sub>
                         <Menubar.SubTrigger>
-                            <PersonStanding size="16" class="mr-2" />
+                            <PersonStanding size="16" />
                             {i18n._('menu.street_view_source')}
                         </Menubar.SubTrigger>
                         <Menubar.SubContent>
@@ -500,12 +500,12 @@
                 </Menubar.Content>
             </Menubar.Menu>
         </Menubar.Root>
-        <div class="h-fit flex flex-row items-center ml-1 gap-1">
+        <div class="h-fit flex flex-row items-center">
             <Button
                 variant="ghost"
                 href="./help"
                 target="_blank"
-                class="cursor-default h-fit rounded-sm px-3 py-0.5"
+                class="cursor-default h-fit rounded-md px-3 py-0.5"
                 aria-label={i18n._('menu.help')}
             >
                 <BookOpenText size="18" class="md:hidden" />
@@ -517,7 +517,7 @@
                 variant="ghost"
                 href="https://opencollective.com/gpxstudio"
                 target="_blank"
-                class="cursor-default h-fit rounded-sm font-bold text-support hover:text-support px-3 py-0.5"
+                class="cursor-default h-fit rounded-md font-bold text-support hover:text-support px-3 py-0.5"
                 aria-label={i18n._('menu.donate')}
             >
                 <HeartHandshake size="18" class="md:hidden" />
diff --git a/website/src/lib/components/collapsible-tree/CollapsibleTreeNode.svelte b/website/src/lib/components/collapsible-tree/CollapsibleTreeNode.svelte
index f9ade45dd..a9d33139c 100644
--- a/website/src/lib/components/collapsible-tree/CollapsibleTreeNode.svelte
+++ b/website/src/lib/components/collapsible-tree/CollapsibleTreeNode.svelte
@@ -35,7 +35,7 @@
             <Button
                 variant="ghost"
                 size="icon"
-                class="w-full flex flex-row gap-1 {side === 'right'
+                class="w-full flex flex-row gap-1 border-none {side === 'right'
                     ? 'justify-between'
                     : 'justify-start pl-1'} h-fit {nohover
                     ? 'hover:bg-background'
@@ -62,7 +62,7 @@
         <Button
             variant="ghost"
             size="icon"
-            class="w-full flex flex-row gap-1 {side === 'right'
+            class="w-full flex flex-row gap-1 border-none {side === 'right'
                 ? 'justify-between'
                 : 'justify-start pl-1'} h-fit {nohover ? 'hover:bg-background' : ''}"
         >
diff --git a/website/src/lib/components/elevation-profile/ElevationProfile.svelte b/website/src/lib/components/elevation-profile/ElevationProfile.svelte
index c9e61405c..fea79a50c 100644
--- a/website/src/lib/components/elevation-profile/ElevationProfile.svelte
+++ b/website/src/lib/components/elevation-profile/ElevationProfile.svelte
@@ -81,20 +81,18 @@
                     </ButtonWithTooltip>
                 </Popover.Trigger>
                 <Popover.Content
-                    class="w-fit p-0 flex flex-col"
+                    class="w-fit p-0 flex flex-col gap-0 overflow-hidden"
                     side="top"
                     align="end"
                     sideOffset={-32}
                 >
                     <ToggleGroup.Root
-                        class="flex flex-col items-start gap-0 p-1 w-full border-none"
+                        class="flex flex-col w-full border-none"
                         type="single"
+                        size="sm"
                         bind:value={$elevationFill}
                     >
-                        <ToggleGroup.Item
-                            class="p-0 pr-1.5 h-6 w-full gap-1.5 rounded flex justify-start data-[state=on]:bg-background data-[state=on]:hover:bg-accent hover:bg-accent hover:text-foreground"
-                            value="slope"
-                        >
+                        <ToggleGroup.Item value="slope" class="w-full flex flex-row justify-start">
                             <div class="w-6 flex justify-center items-center">
                                 {#if $elevationFill === 'slope'}
                                     <Circle class="size-1.5 fill-current text-current" />
@@ -104,9 +102,8 @@
                             {i18n._('quantities.slope')}
                         </ToggleGroup.Item>
                         <ToggleGroup.Item
-                            class="p-0 pr-1.5 h-6 w-full gap-1.5 rounded flex justify-start data-[state=on]:bg-background data-[state=on]:hover:bg-accent hover:bg-accent hover:text-foreground"
                             value="surface"
-                            variant="outline"
+                            class="w-full flex flex-row justify-start"
                         >
                             <div class="w-6 flex justify-center items-center">
                                 {#if $elevationFill === 'surface'}
@@ -117,9 +114,8 @@
                             {i18n._('quantities.surface')}
                         </ToggleGroup.Item>
                         <ToggleGroup.Item
-                            class="p-0 pr-1.5 h-6 w-full gap-1.5 rounded flex justify-start data-[state=on]:bg-background data-[state=on]:hover:bg-accent hover:bg-accent hover:text-foreground"
                             value="highway"
-                            variant="outline"
+                            class="w-full flex flex-row justify-start"
                         >
                             <div class="w-6 flex justify-center items-center">
                                 {#if $elevationFill === 'highway'}
@@ -132,14 +128,12 @@
                     </ToggleGroup.Root>
                     <Separator />
                     <ToggleGroup.Root
-                        class="flex flex-col items-start gap-0 p-1"
+                        class="flex flex-col gap-0"
                         type="multiple"
+                        size="sm"
                         bind:value={$additionalDatasets}
                     >
-                        <ToggleGroup.Item
-                            class="p-0 pr-1.5 h-6 w-full gap-1.5 rounded flex justify-start data-[state=on]:bg-background data-[state=on]:hover:bg-accent hover:bg-accent hover:text-foreground"
-                            value="speed"
-                        >
+                        <ToggleGroup.Item value="speed" class="w-full flex flex-row justify-start">
                             <div class="w-6 flex justify-center items-center">
                                 {#if $additionalDatasets.includes('speed')}
                                     <Check size="14" />
@@ -150,10 +144,7 @@
                                 ? i18n._('quantities.speed')
                                 : i18n._('quantities.pace')}
                         </ToggleGroup.Item>
-                        <ToggleGroup.Item
-                            class="p-0 pr-1.5 h-6 w-full gap-1.5 rounded flex justify-start data-[state=on]:bg-background data-[state=on]:hover:bg-accent hover:bg-accent hover:text-foreground"
-                            value="hr"
-                        >
+                        <ToggleGroup.Item value="hr" class="w-full flex flex-row justify-start">
                             <div class="w-6 flex justify-center items-center">
                                 {#if $additionalDatasets.includes('hr')}
                                     <Check size="14" />
@@ -162,10 +153,7 @@
                             <HeartPulse size="15" />
                             {i18n._('quantities.heartrate')}
                         </ToggleGroup.Item>
-                        <ToggleGroup.Item
-                            class="p-0 pr-1.5 h-6 w-full gap-1.5 rounded flex justify-start data-[state=on]:bg-background data-[state=on]:hover:bg-accent hover:bg-accent hover:text-foreground"
-                            value="cad"
-                        >
+                        <ToggleGroup.Item value="cad" class="w-full flex flex-row justify-start">
                             <div class="w-6 flex justify-center items-center">
                                 {#if $additionalDatasets.includes('cad')}
                                     <Check size="14" />
@@ -174,10 +162,7 @@
                             <Orbit size="15" />
                             {i18n._('quantities.cadence')}
                         </ToggleGroup.Item>
-                        <ToggleGroup.Item
-                            class="p-0 pr-1.5 h-6 w-full gap-1.5 rounded flex justify-start data-[state=on]:bg-background data-[state=on]:hover:bg-accent hover:bg-accent hover:text-foreground"
-                            value="atemp"
-                        >
+                        <ToggleGroup.Item value="atemp" class="w-full flex flex-row justify-start">
                             <div class="w-6 flex justify-center items-center">
                                 {#if $additionalDatasets.includes('atemp')}
                                     <Check size="14" />
@@ -186,10 +171,7 @@
                             <Thermometer size="15" />
                             {i18n._('quantities.temperature')}
                         </ToggleGroup.Item>
-                        <ToggleGroup.Item
-                            class="p-0 pr-1.5 h-6 w-full gap-1.5 rounded flex justify-start data-[state=on]:bg-background data-[state=on]:hover:bg-accent hover:bg-accent hover:text-foreground"
-                            value="power"
-                        >
+                        <ToggleGroup.Item value="power" class="w-full flex flex-row justify-start">
                             <div class="w-6 flex justify-center items-center">
                                 {#if $additionalDatasets.includes('power')}
                                     <Check size="14" />
diff --git a/website/src/lib/components/file-list/FileListNodeLabel.svelte b/website/src/lib/components/file-list/FileListNodeLabel.svelte
index 16b0c6724..77d5aa66a 100644
--- a/website/src/lib/components/file-list/FileListNodeLabel.svelte
+++ b/website/src/lib/components/file-list/FileListNodeLabel.svelte
@@ -114,10 +114,10 @@
     <ContextMenu.Trigger class="grow truncate">
         <Button
             variant="ghost"
-            class="relative w-full p-0 overflow-hidden focus-visible:ring-0 focus-visible:ring-offset-0 {orientation ===
+            class="relative w-full p-0 overflow-hidden border-none focus-visible:ring-0 focus-visible:ring-offset-0 flex flex-row {orientation ===
             'vertical'
-                ? 'h-fit'
-                : 'h-9 px-1.5 shadow-md'} pointer-events-auto"
+                ? 'h-7'
+                : 'h-9 px-1.5'} pointer-events-auto"
         >
             {#if item instanceof ListFileItem || item instanceof ListTrackItem}
                 <MetadataDialog bind:open={openEditMetadata} {node} {item} />
@@ -126,7 +126,7 @@
             {#if item.level === ListLevel.FILE || item.level === ListLevel.TRACK}
                 <div
                     class="absolute {orientation === 'vertical'
-                        ? 'top-0 bottom-0 right-1 w-1'
+                        ? 'top-0 bottom-0 right-0 w-1'
                         : 'top-0 h-1 left-0 right-0'}"
                     style="background:linear-gradient(to {orientation === 'vertical'
                         ? 'bottom'
@@ -139,7 +139,7 @@
                 ></div>
             {/if}
             <span
-                class="w-full text-left truncate py-1 flex flex-row items-center {hidden
+                class="grow text-left truncate ml-1 flex flex-row items-center {hidden
                     ? 'text-muted-foreground'
                     : ''} {$cut && $copied?.some((i) => i.getFullId() === item.getFullId())
                     ? 'text-muted-foreground'
diff --git a/website/src/lib/components/map/gpx-layer/CopyCoordinates.svelte b/website/src/lib/components/map/gpx-layer/CopyCoordinates.svelte
index a76c08403..11d25c256 100644
--- a/website/src/lib/components/map/gpx-layer/CopyCoordinates.svelte
+++ b/website/src/lib/components/map/gpx-layer/CopyCoordinates.svelte
@@ -16,7 +16,6 @@
 </script>
 
 <Button
-    size="sm"
     class="justify-start {className}"
     variant="outline"
     onclick={() => {
diff --git a/website/src/lib/components/map/gpx-layer/TrackpointPopup.svelte b/website/src/lib/components/map/gpx-layer/TrackpointPopup.svelte
index b268be5b3..abd5bc0ad 100644
--- a/website/src/lib/components/map/gpx-layer/TrackpointPopup.svelte
+++ b/website/src/lib/components/map/gpx-layer/TrackpointPopup.svelte
@@ -39,7 +39,6 @@
         />
         {#if trackpoint.fileId === undefined}
             <Button
-                size="sm"
                 variant="outline"
                 class="justify-start"
                 href={`https://www.openstreetmap.org/edit?#map=${(($map?.getZoom() ?? 17) + 1).toFixed(0)}/${trackpoint.item.getLatitude().toFixed(5)}/${trackpoint.item.getLongitude().toFixed(5)}`}
diff --git a/website/src/lib/components/map/gpx-layer/WaypointPopup.svelte b/website/src/lib/components/map/gpx-layer/WaypointPopup.svelte
index 23d77c028..8915e4dcb 100644
--- a/website/src/lib/components/map/gpx-layer/WaypointPopup.svelte
+++ b/website/src/lib/components/map/gpx-layer/WaypointPopup.svelte
@@ -88,7 +88,6 @@
             <CopyCoordinates coordinates={waypoint.item.attributes} />
             {#if $currentTool === Tool.WAYPOINT && selected}
                 <Button
-                    class="p-1 has-[>svg]:px-2 h-8"
                     variant="outline"
                     onclick={() => {
                         if (waypoint.fileId) {
diff --git a/website/src/lib/components/map/layer-control/CustomLayers.svelte b/website/src/lib/components/map/layer-control/CustomLayers.svelte
index 9789b67ad..6f7a94f2b 100644
--- a/website/src/lib/components/map/layer-control/CustomLayers.svelte
+++ b/website/src/lib/components/map/layer-control/CustomLayers.svelte
@@ -232,120 +232,127 @@
 
 <div class="flex flex-col">
     {#if $customBasemapOrder.length > 0}
-        <div class="flex flex-row items-center gap-1 font-semibold mb-2">
-            <Map size="16" />
-            {i18n._('layers.label.basemaps')}
-            <div class="grow">
-                <Separator />
+        <div class="px-3 py-2">
+            <div class="flex flex-row items-center gap-1 font-semibold mb-2">
+                <Map size="16" />
+                {i18n._('layers.label.basemaps')}
+            </div>
+            <div
+                class="ml-1.5 flex flex-col gap-1"
+                use:dndzone={{
+                    items: customBasemapItems,
+                    type: 'basemap',
+                    dropTargetStyle: {},
+                    transformDraggedElement: (element) => {
+                        if (element) {
+                            element.style.opacity = '0.5';
+                        }
+                    },
+                }}
+                onconsider={(e) => {
+                    customBasemapItems = e.detail.items;
+                }}
+                onfinalize={(e) => {
+                    customBasemapItems = e.detail.items;
+                    $customBasemapOrder = customBasemapItems.map((item) => item.id);
+                    $selectedBasemapTree.basemaps['custom'] = customBasemapItems.reduce(
+                        (acc, item) => {
+                            acc[item.id] = true;
+                            return acc;
+                        },
+                        {}
+                    );
+                }}
+            >
+                {#each customBasemapItems as item (item.id)}
+                    <div class="flex flex-row items-center gap-1">
+                        <Move size="12" />
+                        <span class="grow">{item.name}</span>
+                        <Button
+                            variant="outline"
+                            size="icon-sm"
+                            onclick={() => (selectedLayerId = item.id)}
+                            class="p-1 h-7"
+                        >
+                            <Pencil size="16" />
+                        </Button>
+                        <Button
+                            variant="outline"
+                            size="icon-sm"
+                            onclick={() => deleteLayer(item.id)}
+                            class="p-1 h-7"
+                        >
+                            <Trash2 size="16" />
+                        </Button>
+                    </div>
+                {/each}
             </div>
         </div>
+        <Separator />
     {/if}
-    <div
-        class="ml-1.5 flex flex-col gap-1 {$customBasemapOrder.length > 0 ? 'mb-2' : ''}"
-        use:dndzone={{
-            items: customBasemapItems,
-            type: 'basemap',
-            dropTargetStyle: {},
-            transformDraggedElement: (element) => {
-                if (element) {
-                    element.style.opacity = '0.5';
-                }
-            },
-        }}
-        onconsider={(e) => {
-            customBasemapItems = e.detail.items;
-        }}
-        onfinalize={(e) => {
-            customBasemapItems = e.detail.items;
-            $customBasemapOrder = customBasemapItems.map((item) => item.id);
-            $selectedBasemapTree.basemaps['custom'] = customBasemapItems.reduce((acc, item) => {
-                acc[item.id] = true;
-                return acc;
-            }, {});
-        }}
-    >
-        {#each customBasemapItems as item (item.id)}
-            <div class="flex flex-row items-center gap-2">
-                <Move size="12" />
-                <span class="grow">{item.name}</span>
-                <Button
-                    variant="outline"
-                    size="icon-sm"
-                    onclick={() => (selectedLayerId = item.id)}
-                    class="p-1 h-7"
-                >
-                    <Pencil size="16" />
-                </Button>
-                <Button
-                    variant="outline"
-                    size="icon-sm"
-                    onclick={() => deleteLayer(item.id)}
-                    class="p-1 h-7"
-                >
-                    <Trash2 size="16" />
-                </Button>
-            </div>
-        {/each}
-    </div>
     {#if $customOverlayOrder.length > 0}
-        <div class="flex flex-row items-center gap-1 font-semibold mb-2">
-            <Layers2 size="16" />
-            {i18n._('layers.label.overlays')}
-            <div class="grow">
-                <Separator />
+        <div class="px-3 py-2">
+            <div class="flex flex-row items-center gap-1 font-semibold mb-2">
+                <Layers2 size="16" />
+                {i18n._('layers.label.overlays')}
+                <div class="grow"></div>
+            </div>
+            <div
+                class="ml-1.5 flex flex-col gap-1"
+                use:dndzone={{
+                    items: customOverlayItems,
+                    type: 'overlay',
+                    dropTargetStyle: {},
+                    transformDraggedElement: (element) => {
+                        if (element) {
+                            element.style.opacity = '0.5';
+                        }
+                    },
+                }}
+                onconsider={(e) => {
+                    customOverlayItems = e.detail.items;
+                }}
+                onfinalize={(e) => {
+                    customOverlayItems = e.detail.items;
+                    $customOverlayOrder = customOverlayItems.map((item) => item.id);
+                    $selectedOverlayTree.overlays['custom'] = customOverlayItems.reduce(
+                        (acc, item) => {
+                            acc[item.id] = true;
+                            return acc;
+                        },
+                        {}
+                    );
+                }}
+            >
+                {#each customOverlayItems as item (item.id)}
+                    <div class="flex flex-row items-center gap-1">
+                        <Move size="12" />
+                        <span class="grow">{item.name}</span>
+                        <Button
+                            variant="outline"
+                            size="icon-sm"
+                            onclick={() => (selectedLayerId = item.id)}
+                            class="p-1 h-7"
+                        >
+                            <Pencil size="16" />
+                        </Button>
+                        <Button
+                            variant="outline"
+                            size="icon-sm"
+                            onclick={() => deleteLayer(item.id)}
+                            class="p-1 h-7"
+                        >
+                            <Trash2 size="16" />
+                        </Button>
+                    </div>
+                {/each}
             </div>
         </div>
+        <Separator />
     {/if}
-    <div
-        class="ml-1.5 flex flex-col gap-1 {$customOverlayOrder.length > 0 ? 'mb-2' : ''}"
-        use:dndzone={{
-            items: customOverlayItems,
-            type: 'overlay',
-            dropTargetStyle: {},
-            transformDraggedElement: (element) => {
-                if (element) {
-                    element.style.opacity = '0.5';
-                }
-            },
-        }}
-        onconsider={(e) => {
-            customOverlayItems = e.detail.items;
-        }}
-        onfinalize={(e) => {
-            customOverlayItems = e.detail.items;
-            $customOverlayOrder = customOverlayItems.map((item) => item.id);
-            $selectedOverlayTree.overlays['custom'] = customOverlayItems.reduce((acc, item) => {
-                acc[item.id] = true;
-                return acc;
-            }, {});
-        }}
-    >
-        {#each customOverlayItems as item (item.id)}
-            <div class="flex flex-row items-center gap-2">
-                <Move size="12" />
-                <span class="grow">{item.name}</span>
-                <Button
-                    variant="outline"
-                    size="icon-sm"
-                    onclick={() => (selectedLayerId = item.id)}
-                    class="p-1 h-7"
-                >
-                    <Pencil size="16" />
-                </Button>
-                <Button
-                    variant="outline"
-                    size="icon-sm"
-                    onclick={() => deleteLayer(item.id)}
-                    class="p-1 h-7"
-                >
-                    <Trash2 size="16" />
-                </Button>
-            </div>
-        {/each}
-    </div>
-    <Card.Root class="py-0 gap-0 shadow-none">
+    <Card.Root class="py-0 gap-0 shadow-none ring-0">
         <Card.Header class="p-3">
-            <Card.Title class="text-base">
+            <Card.Title class="text-sm font-semibold">
                 {#if selectedLayerId}
                     {i18n._('layers.custom_layers.edit')}
                 {:else}
@@ -353,7 +360,7 @@
                 {/if}
             </Card.Title>
         </Card.Header>
-        <Card.Content class="p-3 pt-0">
+        <Card.Content class="px-3 py-2">
             <fieldset class="flex flex-col gap-2">
                 <Label for="name">{i18n._('menu.metadata.name')}</Label>
                 <Input bind:value={name} id="name" class="h-8" />
@@ -410,7 +417,7 @@
                     </div>
                 </RadioGroup.Root>
                 {#if selectedLayerId}
-                    <div class="mt-2 flex flex-row gap-2">
+                    <div class="mt-2 flex flex-row gap-1">
                         <Button variant="outline" onclick={createLayer} class="grow">
                             <Save size="16" />
                             {i18n._('layers.custom_layers.update')}
diff --git a/website/src/lib/components/map/layer-control/LayerControlSettings.svelte b/website/src/lib/components/map/layer-control/LayerControlSettings.svelte
index 4dc0e2efc..71d61a8be 100644
--- a/website/src/lib/components/map/layer-control/LayerControlSettings.svelte
+++ b/website/src/lib/components/map/layer-control/LayerControlSettings.svelte
@@ -121,7 +121,7 @@
                 <Accordion.Root class="flex flex-col" bind:value={accordionValue} type="single">
                     <Accordion.Item value="layer-selection" class="flex flex-col">
                         <Accordion.Trigger>{i18n._('layers.selection')}</Accordion.Trigger>
-                        <Accordion.Content class="grow flex flex-col border rounded">
+                        <Accordion.Content class="grow flex flex-col border rounded-md mb-1.5">
                             <div class="py-2 pl-3 pr-2">
                                 <LayerTree
                                     layerTree={basemapTree}
@@ -152,7 +152,9 @@
                     </Accordion.Item>
                     <Accordion.Item value="overlay-opacity">
                         <Accordion.Trigger>{i18n._('layers.opacity')}</Accordion.Trigger>
-                        <Accordion.Content class="flex flex-col gap-3 overflow-visible">
+                        <Accordion.Content
+                            class="flex flex-col gap-3 overflow-visible border rounded-md px-3 py-2 mb-1.5"
+                        >
                             <div class="flex flex-row gap-6 items-center">
                                 <Label>
                                     {i18n._('layers.custom_layers.overlay')}
@@ -231,10 +233,10 @@
                     <Accordion.Item value="custom-layers">
                         <Accordion.Trigger>{i18n._('layers.custom_layers.title')}</Accordion.Trigger
                         >
-                        <Accordion.Content>
-                            <ScrollArea>
-                                <CustomLayers />
-                            </ScrollArea>
+                        <Accordion.Content
+                            class="flex flex-col overflow-visible border rounded-md p-0 mb-1.5"
+                        >
+                            <CustomLayers />
                         </Accordion.Content>
                     </Accordion.Item>
                     <Accordion.Item value="terrain-source">
diff --git a/website/src/lib/components/map/street-view-control/StreetViewControl.svelte b/website/src/lib/components/map/street-view-control/StreetViewControl.svelte
index 3e5e0f13f..7e8a2edd3 100644
--- a/website/src/lib/components/map/street-view-control/StreetViewControl.svelte
+++ b/website/src/lib/components/map/street-view-control/StreetViewControl.svelte
@@ -53,7 +53,7 @@
 <CustomControl class="w-[29px] h-[29px] shrink-0">
     <ButtonWithTooltip
         variant="ghost"
-        class="w-full h-full"
+        class="w-full h-full border-none rounded-sm"
         side="left"
         label={i18n._('menu.toggle_street_view')}
         onclick={() => {
diff --git a/website/src/lib/components/toolbar/tools/Elevation.svelte b/website/src/lib/components/toolbar/tools/Elevation.svelte
index 0991d5a7f..1217d5cd6 100644
--- a/website/src/lib/components/toolbar/tools/Elevation.svelte
+++ b/website/src/lib/components/toolbar/tools/Elevation.svelte
@@ -17,7 +17,7 @@
 <div class="flex flex-col gap-3 w-full max-w-80 {props.class ?? ''}">
     <Button
         variant="outline"
-        class="whitespace-normal h-fit"
+        class="whitespace-normal h-fit min-h-8 py-1"
         disabled={!validSelection}
         onclick={() => fileActions.addElevationToSelection()}
     >
diff --git a/website/src/lib/components/toolbar/tools/Merge.svelte b/website/src/lib/components/toolbar/tools/Merge.svelte
index 9d62e7d73..bd4cdc519 100644
--- a/website/src/lib/components/toolbar/tools/Merge.svelte
+++ b/website/src/lib/components/toolbar/tools/Merge.svelte
@@ -76,7 +76,7 @@
     {/if}
     <Button
         variant="outline"
-        class="whitespace-normal h-fit"
+        class="whitespace-normal h-fit min-h-8 py-1"
         disabled={(mergeType === MergeType.TRACES && !canMergeTraces) ||
             (mergeType === MergeType.CONTENTS && !canMergeContents)}
         onclick={() => {
diff --git a/website/src/lib/components/toolbar/tools/Time.svelte b/website/src/lib/components/toolbar/tools/Time.svelte
index 9d415314b..1bf2d5797 100644
--- a/website/src/lib/components/toolbar/tools/Time.svelte
+++ b/website/src/lib/components/toolbar/tools/Time.svelte
@@ -185,8 +185,8 @@
 
 <div class="flex flex-col gap-3 w-full max-w-80 {props.class ?? ''}">
     <fieldset class="flex flex-col gap-2">
-        <div class="flex flex-row gap-2 justify-center">
-            <div class="flex flex-col gap-2 grow">
+        <div class="flex flex-row gap-1.5 justify-center">
+            <div class="flex flex-col gap-1 grow">
                 <Label for="speed" class="flex flex-row">
                     <Zap size="16" />
                     {#if $velocityUnits === 'speed'}
@@ -239,7 +239,7 @@
                     {/if}
                 </div>
             </div>
-            <div class="flex flex-col gap-2 grow">
+            <div class="flex flex-col gap-1 grow">
                 <Label for="duration" class="flex flex-row">
                     <Timer size="16" />
                     {i18n._('toolbar.time.total_time')}
@@ -253,57 +253,61 @@
                 />
             </div>
         </div>
-        <Label class="flex flex-row">
-            <CirclePlay size="16" />
-            {i18n._('toolbar.time.start')}
-        </Label>
-        <div class="flex flex-row gap-2">
-            <DatePicker
-                bind:value={startDate}
-                disabled={!canUpdate}
-                locale={i18n.lang}
-                placeholder={i18n._('toolbar.time.pick_date')}
-                class="w-fit grow"
-                onchange={() => {
-                    untrack(() => updateEnd());
-                }}
-            />
-            <Input
-                type="time"
-                step={1}
-                disabled={!canUpdate}
-                bind:value={startTime}
-                class="w-fit"
-                onchange={() => {
-                    untrack(() => updateEnd());
-                }}
-            />
+        <div class="flex flex-col gap-1">
+            <Label class="flex flex-row">
+                <CirclePlay size="16" />
+                {i18n._('toolbar.time.start')}
+            </Label>
+            <div class="flex flex-row gap-1.5">
+                <DatePicker
+                    bind:value={startDate}
+                    disabled={!canUpdate}
+                    locale={i18n.lang}
+                    placeholder={i18n._('toolbar.time.pick_date')}
+                    class="w-fit grow"
+                    onchange={() => {
+                        untrack(() => updateEnd());
+                    }}
+                />
+                <Input
+                    type="time"
+                    step={1}
+                    disabled={!canUpdate}
+                    bind:value={startTime}
+                    class="w-fit"
+                    onchange={() => {
+                        untrack(() => updateEnd());
+                    }}
+                />
+            </div>
         </div>
-        <Label class="flex flex-row">
-            <CircleStop size="16" />
-            {i18n._('toolbar.time.end')}
-        </Label>
-        <div class="flex flex-row gap-2">
-            <DatePicker
-                bind:value={endDate}
-                disabled={!canUpdate}
-                locale={i18n.lang}
-                placeholder={i18n._('toolbar.time.pick_date')}
-                class="w-fit grow"
-                onchange={() => {
-                    untrack(() => updateStart());
-                }}
-            />
-            <Input
-                type="time"
-                step={1}
-                disabled={!canUpdate}
-                bind:value={endTime}
-                class="w-fit"
-                onchange={() => {
-                    untrack(() => updateStart());
-                }}
-            />
+        <div class="flex flex-col gap-1">
+            <Label class="flex flex-row">
+                <CircleStop size="16" />
+                {i18n._('toolbar.time.end')}
+            </Label>
+            <div class="flex flex-row gap-1.5">
+                <DatePicker
+                    bind:value={endDate}
+                    disabled={!canUpdate}
+                    locale={i18n.lang}
+                    placeholder={i18n._('toolbar.time.pick_date')}
+                    class="w-fit grow"
+                    onchange={() => {
+                        untrack(() => updateStart());
+                    }}
+                />
+                <Input
+                    type="time"
+                    step={1}
+                    disabled={!canUpdate}
+                    bind:value={endTime}
+                    class="w-fit"
+                    onchange={() => {
+                        untrack(() => updateStart());
+                    }}
+                />
+            </div>
         </div>
         {#if $gpxStatistics.global.time.moving === 0 || $gpxStatistics.global.time.moving === undefined}
             <div class="mt-0.5 flex flex-row gap-1 items-center">
@@ -314,11 +318,11 @@
             </div>
         {/if}
     </fieldset>
-    <div class="flex flex-row gap-2 items-center">
+    <div class="flex flex-row gap-1.5 items-center">
         <Button
             variant="outline"
             disabled={!canUpdate}
-            class="grow shrink whitespace-normal h-fit"
+            class="grow shrink whitespace-normal h-fit min-h-8 py-1"
             onclick={() => {
                 let effectiveSpeed = getSpeed();
                 if (
diff --git a/website/src/lib/components/toolbar/tools/reduce/Reduce.svelte b/website/src/lib/components/toolbar/tools/reduce/Reduce.svelte
index 3cb2f955b..a652c5f13 100644
--- a/website/src/lib/components/toolbar/tools/reduce/Reduce.svelte
+++ b/website/src/lib/components/toolbar/tools/reduce/Reduce.svelte
@@ -14,7 +14,7 @@
 
     let props: { class?: string } = $props();
 
-    let sliderValue = $state([50]);
+    let sliderValue = $state(50);
     const maxTolerance = 10000;
 
     let validSelection = $derived(
@@ -25,7 +25,7 @@
 
     $effect(() => {
         tolerance.set(
-            minTolerance * 2 ** (sliderValue[0] / (100 / Math.log2(maxTolerance / minTolerance)))
+            minTolerance * 2 ** (sliderValue / (100 / Math.log2(maxTolerance / minTolerance)))
         );
     });
 
@@ -36,7 +36,7 @@
 
 <div class="flex flex-col gap-3 w-full max-w-80 {props.class ?? ''}">
     <div class="p-2">
-        <Slider bind:value={sliderValue} min={0} max={100} step={1} type="multiple" />
+        <Slider bind:value={sliderValue} min={0} max={100} step={1} type="single" />
     </div>
     <Label class="flex flex-row justify-between">
         <span>{i18n._('toolbar.reduce.tolerance')}</span>
diff --git a/website/src/lib/components/toolbar/tools/routing/Routing.svelte b/website/src/lib/components/toolbar/tools/routing/Routing.svelte
index e97564d64..891185b33 100644
--- a/website/src/lib/components/toolbar/tools/routing/Routing.svelte
+++ b/website/src/lib/components/toolbar/tools/routing/Routing.svelte
@@ -191,7 +191,7 @@
             <ButtonWithTooltip
                 label={i18n._('toolbar.routing.reverse.tooltip')}
                 variant="outline"
-                class="gap-1 text-xs"
+                class="gap-1 text-xs px-1.5 py-1.5 h-fit"
                 disabled={!validSelection}
                 onclick={fileActions.reverseSelection}
             >
@@ -200,7 +200,7 @@
             <ButtonWithTooltip
                 label={i18n._('toolbar.routing.route_back_to_start.tooltip')}
                 variant="outline"
-                class="gap-1 text-xs"
+                class="gap-1 text-xs px-1.5 py-1.5 h-fit"
                 disabled={!validSelection}
                 onclick={() => {
                     const selected = selection.getOrderedSelection();
@@ -236,14 +236,14 @@
             <ButtonWithTooltip
                 label={i18n._('toolbar.routing.round_trip.tooltip')}
                 variant="outline"
-                class="gap-1 text-xs"
+                class="gap-1 text-xs px-1.5 py-1.5 h-fit"
                 disabled={!validSelection}
                 onclick={fileActions.createRoundTripForSelection}
             >
                 <Repeat class="size-3" />{i18n._('toolbar.routing.round_trip.button')}
             </ButtonWithTooltip>
         </div>
-        <div class="w-full flex flex-row gap-2 items-end justify-between">
+        <div class="w-full flex flex-row gap-1 items-end justify-between">
             <Help link={getURLForLanguage(i18n.lang, '/help/toolbar/routing')}>
                 {#if !validSelection}
                     {i18n._('toolbar.routing.help_no_file')}
diff --git a/website/src/lib/components/toolbar/tools/waypoint/Waypoint.svelte b/website/src/lib/components/toolbar/tools/waypoint/Waypoint.svelte
index 94a558583..d7f3e6e78 100644
--- a/website/src/lib/components/toolbar/tools/waypoint/Waypoint.svelte
+++ b/website/src/lib/components/toolbar/tools/waypoint/Waypoint.svelte
@@ -161,66 +161,73 @@
 </script>
 
 <div class="flex flex-col gap-3 w-full max-w-96 {props.class ?? ''}">
-    <fieldset class="flex flex-col gap-2">
-        <Label for="name">{i18n._('menu.metadata.name')}</Label>
-        <Input
-            bind:value={name}
-            id="name"
-            class="font-semibold h-8"
-            disabled={!canCreate && !$selectedWaypoint}
-        />
-        <Label for="description">{i18n._('menu.metadata.description')}</Label>
-        <Textarea
-            bind:value={description}
-            id="description"
-            disabled={!canCreate && !$selectedWaypoint}
-            class="min-h-8 h-8 py-1 px-3 text-sm"
-        />
-        <Label for="symbol">{i18n._('toolbar.waypoint.icon')}</Label>
-        <Select.Root bind:value={sym} type="single">
-            <Select.Trigger
-                id="symbol"
-                size="sm"
-                class="w-full"
+    <fieldset class="flex flex-col gap-1.5">
+        <div class="flex flex-col gap-1">
+            <Label for="name">{i18n._('menu.metadata.name')}</Label>
+            <Input
+                bind:value={name}
+                id="name"
+                class="font-semibold"
                 disabled={!canCreate && !$selectedWaypoint}
-            >
-                <span class="flex flex-row gap-1.5 items-center">
-                    {#if symbolKey}
-                        {#if symbols[symbolKey].icon}
-                            {@const Component = symbols[symbolKey].icon}
-                            <Component size="14" />
-                        {/if}
-                        {i18n._(`gpx.symbol.${symbolKey}`)}
-                    {:else}
-                        {sym}
-                    {/if}
-                </span>
-            </Select.Trigger>
-            <Select.Content class="max-h-60 overflow-y-scroll">
-                {#each sortedSymbols as [key, symbol]}
-                    <Select.Item value={symbol.value}>
-                        <span>
-                            {#if symbol.icon}
-                                {@const Component = symbol.icon}
-                                <Component size="14" class="inline-block align-sub" />
-                            {:else}
-                                <span class="w-4 inline-block"></span>
+            />
+        </div>
+        <div class="flex flex-col gap-1">
+            <Label for="description">{i18n._('menu.metadata.description')}</Label>
+            <Textarea
+                bind:value={description}
+                id="description"
+                disabled={!canCreate && !$selectedWaypoint}
+                class="min-h-8 h-8 py-1 px-3 text-sm"
+            />
+        </div>
+        <div class="flex flex-col gap-1">
+            <Label for="symbol">{i18n._('toolbar.waypoint.icon')}</Label>
+            <Select.Root bind:value={sym} type="single">
+                <Select.Trigger
+                    id="symbol"
+                    class="w-full"
+                    disabled={!canCreate && !$selectedWaypoint}
+                >
+                    <span class="flex flex-row gap-1.5 items-center">
+                        {#if symbolKey}
+                            {#if symbols[symbolKey].icon}
+                                {@const Component = symbols[symbolKey].icon}
+                                <Component size="14" />
                             {/if}
-                            {i18n._(`gpx.symbol.${key}`)}
-                        </span>
-                    </Select.Item>
-                {/each}
-            </Select.Content>
-        </Select.Root>
-        <Label for="link">{i18n._('toolbar.waypoint.link')}</Label>
-        <Input
-            bind:value={link}
-            id="link"
-            class="h-8"
-            disabled={!canCreate && !$selectedWaypoint}
-        />
-        <div class="flex flex-row gap-2">
-            <div class="grow flex flex-col gap-2">
+                            {i18n._(`gpx.symbol.${symbolKey}`)}
+                        {:else}
+                            {sym}
+                        {/if}
+                    </span>
+                </Select.Trigger>
+                <Select.Content class="max-h-60">
+                    {#each sortedSymbols as [key, symbol]}
+                        <Select.Item value={symbol.value}>
+                            <span>
+                                {#if symbol.icon}
+                                    {@const Component = symbol.icon}
+                                    <Component size="14" class="inline-block align-sub" />
+                                {:else}
+                                    <span class="w-4 inline-block"></span>
+                                {/if}
+                                {i18n._(`gpx.symbol.${key}`)}
+                            </span>
+                        </Select.Item>
+                    {/each}
+                </Select.Content>
+            </Select.Root>
+        </div>
+        <div class="flex flex-col gap-1">
+            <Label for="link">{i18n._('toolbar.waypoint.link')}</Label>
+            <Input
+                bind:value={link}
+                id="link"
+                class="h-8"
+                disabled={!canCreate && !$selectedWaypoint}
+            />
+        </div>
+        <div class="flex flex-row gap-1.5">
+            <div class="grow flex flex-col gap-1">
                 <Label for="latitude">{i18n._('toolbar.waypoint.latitude')}</Label>
                 <Input
                     bind:value={latitude}
@@ -233,7 +240,7 @@
                     disabled={!canCreate && !$selectedWaypoint}
                 />
             </div>
-            <div class="grow flex flex-col gap-2">
+            <div class="grow flex flex-col gap-1">
                 <Label for="longitude">{i18n._('toolbar.waypoint.longitude')}</Label>
                 <Input
                     bind:value={longitude}
@@ -248,11 +255,11 @@
             </div>
         </div>
     </fieldset>
-    <div class="flex flex-row gap-2 items-center">
+    <div class="flex flex-row gap-1.5 items-center">
         <Button
             variant="outline"
             disabled={!canCreate && !$selectedWaypoint}
-            class="grow whitespace-normal h-fit"
+            class="grow shrink h-fit min-h-8 whitespace-normal py-1"
             onclick={createOrUpdateWaypoint}
         >
             {#if $selectedWaypoint}
diff --git a/website/src/lib/components/ui/accordion/accordion-content.svelte b/website/src/lib/components/ui/accordion/accordion-content.svelte
index cf7045e73..b0617aec2 100644
--- a/website/src/lib/components/ui/accordion/accordion-content.svelte
+++ b/website/src/lib/components/ui/accordion/accordion-content.svelte
@@ -13,10 +13,15 @@
 <AccordionPrimitive.Content
 	bind:ref
 	data-slot="accordion-content"
-	class="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+	class="data-open:animate-accordion-down data-closed:animate-accordion-up text-sm overflow-hidden"
 	{...restProps}
 >
-	<div class={cn("pb-4 pt-0", className)}>
+	<div
+		class={cn(
+			"pt-0 pb-2.5 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4",
+			className
+		)}
+	>
 		{@render children?.()}
 	</div>
 </AccordionPrimitive.Content>
diff --git a/website/src/lib/components/ui/accordion/accordion-item.svelte b/website/src/lib/components/ui/accordion/accordion-item.svelte
index 780545c6a..9d3919ddf 100644
--- a/website/src/lib/components/ui/accordion/accordion-item.svelte
+++ b/website/src/lib/components/ui/accordion/accordion-item.svelte
@@ -12,6 +12,6 @@
 <AccordionPrimitive.Item
 	bind:ref
 	data-slot="accordion-item"
-	class={cn("border-b last:border-b-0", className)}
+	class={cn("not-last:border-b", className)}
 	{...restProps}
 />
diff --git a/website/src/lib/components/ui/accordion/accordion-trigger.svelte b/website/src/lib/components/ui/accordion/accordion-trigger.svelte
index 0027cdd71..2a4655573 100644
--- a/website/src/lib/components/ui/accordion/accordion-trigger.svelte
+++ b/website/src/lib/components/ui/accordion/accordion-trigger.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
 	import { Accordion as AccordionPrimitive } from "bits-ui";
-	import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
 	import { cn, type WithoutChild } from "$lib/utils.js";
+	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
+	import ChevronUpIcon from '@lucide/svelte/icons/chevron-up';
 
 	let {
 		ref = $bindable(null),
@@ -19,14 +20,13 @@
 		data-slot="accordion-trigger"
 		bind:ref
 		class={cn(
-			"focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium outline-none transition-all hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+			"focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-lg py-2.5 text-left text-sm font-medium hover:underline focus-visible:ring-3 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50",
 			className
 		)}
 		{...restProps}
 	>
 		{@render children?.()}
-		<ChevronDownIcon
-			class="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
-		/>
+		<ChevronDownIcon data-slot="accordion-trigger-icon" class="cn-accordion-trigger-icon pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden" />
+		<ChevronUpIcon data-slot="accordion-trigger-icon" class="cn-accordion-trigger-icon pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline" />
 	</AccordionPrimitive.Trigger>
 </AccordionPrimitive.Header>
diff --git a/website/src/lib/components/ui/accordion/accordion.svelte b/website/src/lib/components/ui/accordion/accordion.svelte
index 117ee37f2..b19a3c5c1 100644
--- a/website/src/lib/components/ui/accordion/accordion.svelte
+++ b/website/src/lib/components/ui/accordion/accordion.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
 	import { Accordion as AccordionPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
 		value = $bindable(),
+		class: className,
 		...restProps
 	}: AccordionPrimitive.RootProps = $props();
 </script>
@@ -12,5 +14,6 @@
 	bind:ref
 	bind:value={value as never}
 	data-slot="accordion"
+	class={cn("cn-accordion flex w-full flex-col", className)}
 	{...restProps}
 />
diff --git a/website/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte b/website/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte
index a00569120..7e63004f6 100644
--- a/website/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte
+++ b/website/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte
@@ -1,18 +1,27 @@
 <script lang="ts">
 	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
-	import { buttonVariants } from "$lib/components/ui/button/index.js";
+	import {
+		buttonVariants,
+		type ButtonVariant,
+		type ButtonSize,
+	} from "$lib/components/ui/button/index.js";
 	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
 		class: className,
+		variant = "default",
+		size = "default",
 		...restProps
-	}: AlertDialogPrimitive.ActionProps = $props();
+	}: AlertDialogPrimitive.ActionProps & {
+		variant?: ButtonVariant;
+		size?: ButtonSize;
+	} = $props();
 </script>
 
 <AlertDialogPrimitive.Action
 	bind:ref
 	data-slot="alert-dialog-action"
-	class={cn(buttonVariants(), className)}
+	class={cn(buttonVariants({ variant, size }), "cn-alert-dialog-action", className)}
 	{...restProps}
 />
diff --git a/website/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte b/website/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte
index a7b0cf795..a4ce03c8c 100644
--- a/website/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte
+++ b/website/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte
@@ -1,18 +1,27 @@
 <script lang="ts">
 	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
-	import { buttonVariants } from "$lib/components/ui/button/index.js";
+	import {
+		buttonVariants,
+		type ButtonVariant,
+		type ButtonSize,
+	} from "$lib/components/ui/button/index.js";
 	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
 		class: className,
+		variant = "outline",
+		size = "default",
 		...restProps
-	}: AlertDialogPrimitive.CancelProps = $props();
+	}: AlertDialogPrimitive.CancelProps & {
+		variant?: ButtonVariant;
+		size?: ButtonSize;
+	} = $props();
 </script>
 
 <AlertDialogPrimitive.Cancel
 	bind:ref
 	data-slot="alert-dialog-cancel"
-	class={cn(buttonVariants({ variant: "outline" }), className)}
+	class={cn(buttonVariants({ variant, size }), "cn-alert-dialog-cancel", className)}
 	{...restProps}
 />
diff --git a/website/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte b/website/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte
index 6c3c60460..c9b3eb32d 100644
--- a/website/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte
+++ b/website/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte
@@ -1,27 +1,32 @@
 <script lang="ts">
 	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import AlertDialogPortal from "./alert-dialog-portal.svelte";
 	import AlertDialogOverlay from "./alert-dialog-overlay.svelte";
 	import { cn, type WithoutChild, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
 
 	let {
 		ref = $bindable(null),
 		class: className,
+		size = "default",
 		portalProps,
 		...restProps
 	}: WithoutChild<AlertDialogPrimitive.ContentProps> & {
-		portalProps?: WithoutChildrenOrChild<AlertDialogPrimitive.PortalProps>;
+		size?: "default" | "sm";
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof AlertDialogPortal>>;
 	} = $props();
 </script>
 
-<AlertDialogPrimitive.Portal {...portalProps}>
+<AlertDialogPortal {...portalProps}>
 	<AlertDialogOverlay />
 	<AlertDialogPrimitive.Content
 		bind:ref
 		data-slot="alert-dialog-content"
+		data-size={size}
 		class={cn(
-			"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed left-[50%] top-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+			"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 bg-popover text-popover-foreground ring-foreground/10 gap-4 rounded-xl p-4 ring-1 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 outline-none",
 			className
 		)}
 		{...restProps}
 	/>
-</AlertDialogPrimitive.Portal>
+</AlertDialogPortal>
diff --git a/website/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte b/website/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte
index 2ec67dc2e..5024f3f2f 100644
--- a/website/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte
+++ b/website/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte
@@ -12,6 +12,6 @@
 <AlertDialogPrimitive.Description
 	bind:ref
 	data-slot="alert-dialog-description"
-	class={cn("text-muted-foreground text-sm", className)}
+	class={cn("text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3", className)}
 	{...restProps}
 />
diff --git a/website/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte b/website/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte
index f78b97aba..f4214db37 100644
--- a/website/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte
+++ b/website/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte
@@ -13,7 +13,10 @@
 <div
 	bind:this={ref}
 	data-slot="alert-dialog-footer"
-	class={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+	class={cn(
+		"bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4 flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
+		className
+	)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/website/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte b/website/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte
index c8fa7625f..d6df4d353 100644
--- a/website/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte
+++ b/website/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte
@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="alert-dialog-header"
-	class={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+	class={cn("grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/website/src/lib/components/ui/alert-dialog/alert-dialog-media.svelte b/website/src/lib/components/ui/alert-dialog/alert-dialog-media.svelte
new file mode 100644
index 000000000..3f634f3cb
--- /dev/null
+++ b/website/src/lib/components/ui/alert-dialog/alert-dialog-media.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert-dialog-media"
+	class={cn("bg-muted mb-2 inline-flex size-10 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/website/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte b/website/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte
index a64ee7685..9ffcc858d 100644
--- a/website/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte
+++ b/website/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte
@@ -12,9 +12,6 @@
 <AlertDialogPrimitive.Overlay
 	bind:ref
 	data-slot="alert-dialog-overlay"
-	class={cn(
-		"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-		className
-	)}
+	class={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50", className)}
 	{...restProps}
 />
diff --git a/website/src/lib/components/ui/alert-dialog/alert-dialog-portal.svelte b/website/src/lib/components/ui/alert-dialog/alert-dialog-portal.svelte
index e2272192b..f0a19a8cd 100644
--- a/website/src/lib/components/ui/alert-dialog/alert-dialog-portal.svelte
+++ b/website/src/lib/components/ui/alert-dialog/alert-dialog-portal.svelte
@@ -1,9 +1,7 @@
 <script lang="ts">
 	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
 
-	type $$Props = AlertDialogPrimitive.PortalProps;
+	let { ...restProps }: AlertDialogPrimitive.PortalProps = $props();
 </script>
 
-<AlertDialogPrimitive.Portal {...$$restProps}>
-	<slot />
-</AlertDialogPrimitive.Portal>
+<AlertDialogPrimitive.Portal {...restProps} />
diff --git a/website/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte b/website/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte
index 7ef2b5fbe..652da3312 100644
--- a/website/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte
+++ b/website/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte
@@ -12,6 +12,6 @@
 <AlertDialogPrimitive.Title
 	bind:ref
 	data-slot="alert-dialog-title"
-	class={cn("text-lg font-semibold", className)}
+	class={cn("text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2", className)}
 	{...restProps}
 />
diff --git a/website/src/lib/components/ui/alert-dialog/alert-dialog.svelte b/website/src/lib/components/ui/alert-dialog/alert-dialog.svelte
new file mode 100644
index 000000000..7ea78bb4c
--- /dev/null
+++ b/website/src/lib/components/ui/alert-dialog/alert-dialog.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+
+	let { open = $bindable(false), ...restProps }: AlertDialogPrimitive.RootProps = $props();
+</script>
+
+<AlertDialogPrimitive.Root bind:open {...restProps} />
diff --git a/website/src/lib/components/ui/alert-dialog/index.ts b/website/src/lib/components/ui/alert-dialog/index.ts
index cc281c589..ca81c2a96 100644
--- a/website/src/lib/components/ui/alert-dialog/index.ts
+++ b/website/src/lib/components/ui/alert-dialog/index.ts
@@ -1,4 +1,5 @@
-import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+import Root from "./alert-dialog.svelte";
+import Portal from "./alert-dialog-portal.svelte";
 import Trigger from "./alert-dialog-trigger.svelte";
 import Title from "./alert-dialog-title.svelte";
 import Action from "./alert-dialog-action.svelte";
@@ -8,9 +9,7 @@ import Header from "./alert-dialog-header.svelte";
 import Overlay from "./alert-dialog-overlay.svelte";
 import Content from "./alert-dialog-content.svelte";
 import Description from "./alert-dialog-description.svelte";
-
-const Root = AlertDialogPrimitive.Root;
-const Portal = AlertDialogPrimitive.Portal;
+import Media from "./alert-dialog-media.svelte";
 
 export {
 	Root,
@@ -24,6 +23,7 @@ export {
 	Overlay,
 	Content,
 	Description,
+	Media,
 	//
 	Root as AlertDialog,
 	Title as AlertDialogTitle,
@@ -36,4 +36,5 @@ export {
 	Overlay as AlertDialogOverlay,
 	Content as AlertDialogContent,
 	Description as AlertDialogDescription,
+	Media as AlertDialogMedia,
 };
diff --git a/website/src/lib/components/ui/alert/alert-action.svelte b/website/src/lib/components/ui/alert/alert-action.svelte
new file mode 100644
index 000000000..1877d38c8
--- /dev/null
+++ b/website/src/lib/components/ui/alert/alert-action.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert-action"
+	class={cn("absolute top-2 right-2", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/website/src/lib/components/ui/alert/alert-description.svelte b/website/src/lib/components/ui/alert/alert-description.svelte
index 8b56aed2f..7ee603956 100644
--- a/website/src/lib/components/ui/alert/alert-description.svelte
+++ b/website/src/lib/components/ui/alert/alert-description.svelte
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="alert-description"
 	class={cn(
-		"text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+		"text-muted-foreground text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3",
 		className
 	)}
 	{...restProps}
diff --git a/website/src/lib/components/ui/alert/alert-title.svelte b/website/src/lib/components/ui/alert/alert-title.svelte
index 77e45ad5c..3e339a3ad 100644
--- a/website/src/lib/components/ui/alert/alert-title.svelte
+++ b/website/src/lib/components/ui/alert/alert-title.svelte
@@ -13,7 +13,10 @@
 <div
 	bind:this={ref}
 	data-slot="alert-title"
-	class={cn("col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight", className)}
+	class={cn(
+		"font-medium group-has-[>svg]/alert:col-start-2 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3",
+		className
+	)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/website/src/lib/components/ui/alert/alert.svelte b/website/src/lib/components/ui/alert/alert.svelte
index 2b2eff9a1..abf74873a 100644
--- a/website/src/lib/components/ui/alert/alert.svelte
+++ b/website/src/lib/components/ui/alert/alert.svelte
@@ -2,12 +2,11 @@
 	import { type VariantProps, tv } from "tailwind-variants";
 
 	export const alertVariants = tv({
-		base: "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+		base: "grid gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 group/alert relative w-full",
 		variants: {
 			variant: {
 				default: "bg-card text-card-foreground",
-				destructive:
-					"text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current",
+				destructive: "text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
 			},
 		},
 		defaultVariants: {
@@ -36,9 +35,9 @@
 <div
 	bind:this={ref}
 	data-slot="alert"
+	role="alert"
 	class={cn(alertVariants({ variant }), className)}
 	{...restProps}
-	role="alert"
 >
 	{@render children?.()}
 </div>
diff --git a/website/src/lib/components/ui/alert/index.ts b/website/src/lib/components/ui/alert/index.ts
index 97e21b4ea..071b113c9 100644
--- a/website/src/lib/components/ui/alert/index.ts
+++ b/website/src/lib/components/ui/alert/index.ts
@@ -1,14 +1,17 @@
 import Root from "./alert.svelte";
 import Description from "./alert-description.svelte";
 import Title from "./alert-title.svelte";
+import Action from "./alert-action.svelte";
 export { alertVariants, type AlertVariant } from "./alert.svelte";
 
 export {
 	Root,
 	Description,
 	Title,
+	Action,
 	//
 	Root as Alert,
 	Description as AlertDescription,
 	Title as AlertTitle,
+	Action as AlertAction,
 };
diff --git a/website/src/lib/components/ui/button/button.svelte b/website/src/lib/components/ui/button/button.svelte
index 210547480..89cedcb78 100644
--- a/website/src/lib/components/ui/button/button.svelte
+++ b/website/src/lib/components/ui/button/button.svelte
@@ -4,25 +4,25 @@
 	import { type VariantProps, tv } from "tailwind-variants";
 
 	export const buttonVariants = tv({
-		base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		variants: {
 			variant: {
-				default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
-				destructive:
-					"bg-destructive shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white",
-				outline:
-					"bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border",
-				secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
-				ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+				default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+				outline: "border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+				secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+				ghost: "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+				destructive: "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
 				link: "text-primary underline-offset-4 hover:underline",
 			},
 			size: {
-				default: "h-9 px-4 py-2 has-[>svg]:px-3",
-				sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
-				lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-				icon: "size-9",
-				"icon-sm": "size-8",
-				"icon-lg": "size-10",
+				default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+				xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+				sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+				lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+				icon: "size-8",
+				"icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+				"icon-sm": "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+				"icon-lg": "size-9",
 			},
 		},
 		defaultVariants: {
diff --git a/website/src/lib/components/ui/calendar/calendar-cell.svelte b/website/src/lib/components/ui/calendar/calendar-cell.svelte
index 5f295d642..7ceb5e1d6 100644
--- a/website/src/lib/components/ui/calendar/calendar-cell.svelte
+++ b/website/src/lib/components/ui/calendar/calendar-cell.svelte
@@ -12,7 +12,7 @@
 <CalendarPrimitive.Cell
 	bind:ref
 	class={cn(
-		"size-(--cell-size) relative p-0 text-center text-sm focus-within:z-20 [&:first-child[data-selected]_[data-bits-day]]:rounded-l-md [&:last-child[data-selected]_[data-bits-day]]:rounded-r-md",
+		"relative size-(--cell-size) p-0 text-center text-sm focus-within:z-20 [&:first-child[data-selected]_[data-bits-day]]:rounded-s-(--cell-radius) [&:last-child[data-selected]_[data-bits-day]]:rounded-e-(--cell-radius)",
 		className
 	)}
 	{...restProps}
diff --git a/website/src/lib/components/ui/calendar/calendar-day.svelte b/website/src/lib/components/ui/calendar/calendar-day.svelte
index 32e9c8345..edc8c9d8e 100644
--- a/website/src/lib/components/ui/calendar/calendar-day.svelte
+++ b/website/src/lib/components/ui/calendar/calendar-day.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { buttonVariants } from "$lib/components/ui/button/index.js";
 	import { cn } from "$lib/utils.js";
 	import { Calendar as CalendarPrimitive } from "bits-ui";
 
@@ -13,18 +12,17 @@
 <CalendarPrimitive.Day
 	bind:ref
 	class={cn(
-		buttonVariants({ variant: "ghost" }),
-		"size-(--cell-size) flex select-none flex-col items-center justify-center gap-1 whitespace-nowrap p-0 font-normal leading-none",
+		"flex size-(--cell-size) flex-col items-center justify-center gap-1 rounded-(--cell-radius) p-0 leading-none font-normal whitespace-nowrap select-none",
+		"[&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)",
+		"not-data-selected:hover:bg-accent/50 not-data-selected:hover:text-accent-foreground",
 		"[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground [&[data-today][data-disabled]]:text-muted-foreground",
-		"data-[selected]:bg-primary dark:data-[selected]:hover:bg-accent/50 data-[selected]:text-primary-foreground",
+		"data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:hover:text-foreground",
 		// Outside months
 		"[&[data-outside-month]:not([data-selected])]:text-muted-foreground [&[data-outside-month]:not([data-selected])]:hover:text-accent-foreground",
 		// Disabled
 		"data-[disabled]:text-muted-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
 		// Unavailable
 		"data-[unavailable]:text-muted-foreground data-[unavailable]:line-through",
-		// hover
-		"dark:hover:text-accent-foreground",
 		// focus
 		"focus:border-ring focus:ring-ring/50 focus:relative",
 		// inner spans
diff --git a/website/src/lib/components/ui/calendar/calendar-grid.svelte b/website/src/lib/components/ui/calendar/calendar-grid.svelte
index e0c8627f3..5fbb18fd5 100644
--- a/website/src/lib/components/ui/calendar/calendar-grid.svelte
+++ b/website/src/lib/components/ui/calendar/calendar-grid.svelte
@@ -11,6 +11,6 @@
 
 <CalendarPrimitive.Grid
 	bind:ref
-	class={cn("mt-4 flex w-full border-collapse flex-col gap-1", className)}
+	class={cn("flex w-full border-collapse flex-col", className)}
 	{...restProps}
 />
diff --git a/website/src/lib/components/ui/calendar/calendar-header.svelte b/website/src/lib/components/ui/calendar/calendar-header.svelte
index 5b7e3972f..c39e955d3 100644
--- a/website/src/lib/components/ui/calendar/calendar-header.svelte
+++ b/website/src/lib/components/ui/calendar/calendar-header.svelte
@@ -12,7 +12,7 @@
 <CalendarPrimitive.Header
 	bind:ref
 	class={cn(
-		"h-(--cell-size) flex w-full items-center justify-center gap-1.5 text-sm font-medium",
+		"flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
 		className
 	)}
 	{...restProps}
diff --git a/website/src/lib/components/ui/calendar/calendar-month-select.svelte b/website/src/lib/components/ui/calendar/calendar-month-select.svelte
index e4b536a18..ed75b1d9f 100644
--- a/website/src/lib/components/ui/calendar/calendar-month-select.svelte
+++ b/website/src/lib/components/ui/calendar/calendar-month-select.svelte
@@ -14,11 +14,15 @@
 
 <span
 	class={cn(
-		"has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative flex rounded-md border",
+		"has-focus:border-ring border-input has-focus:ring-ring/50 relative flex rounded-md border shadow-xs has-focus:ring-[3px]",
 		className
 	)}
 >
-	<CalendarPrimitive.MonthSelect bind:ref class="absolute inset-0 opacity-0" {...restProps}>
+	<CalendarPrimitive.MonthSelect
+		bind:ref
+		class="bg-background dark:bg-popover dark:text-popover-foreground absolute inset-0 opacity-0"
+		{...restProps}
+	>
 		{#snippet child({ props, monthItems, selectedMonthItem })}
 			<select {...props} {value} {onchange}>
 				{#each monthItems as monthItem (monthItem.value)}
@@ -33,7 +37,7 @@
 				{/each}
 			</select>
 			<span
-				class="[&>svg]:text-muted-foreground flex h-8 select-none items-center gap-1 rounded-md pl-2 pr-1 text-sm font-medium [&>svg]:size-3.5"
+				class="[&>svg]:text-muted-foreground flex h-(--cell-size) items-center gap-1 rounded-md ps-2 pe-1 text-sm font-medium select-none [&>svg]:size-3.5"
 				aria-hidden="true"
 			>
 				{monthItems.find((item) => item.value === value)?.label || selectedMonthItem.label}
diff --git a/website/src/lib/components/ui/calendar/calendar-month.svelte b/website/src/lib/components/ui/calendar/calendar-month.svelte
index e747fae74..7bdafe72f 100644
--- a/website/src/lib/components/ui/calendar/calendar-month.svelte
+++ b/website/src/lib/components/ui/calendar/calendar-month.svelte
@@ -10,6 +10,6 @@
 	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
 </script>
 
-<div {...restProps} bind:this={ref} class={cn("flex flex-col", className)}>
+<div {...restProps} bind:this={ref} class={cn("flex w-full flex-col gap-4", className)}>
 	{@render children?.()}
 </div>
diff --git a/website/src/lib/components/ui/calendar/calendar-next-button.svelte b/website/src/lib/components/ui/calendar/calendar-next-button.svelte
index d8eb4efa0..82dd739da 100644
--- a/website/src/lib/components/ui/calendar/calendar-next-button.svelte
+++ b/website/src/lib/components/ui/calendar/calendar-next-button.svelte
@@ -23,9 +23,14 @@
 	bind:ref
 	class={cn(
 		buttonVariants({ variant }),
-		"size-(--cell-size) select-none bg-transparent p-0 disabled:opacity-50 rtl:rotate-180",
+		"size-(--cell-size) bg-transparent p-0 select-none disabled:opacity-50 rtl:rotate-180",
 		className
 	)}
-	children={children || Fallback}
 	{...restProps}
-/>
+>
+	{#if children}
+		{@render children?.()}
+	{:else}
+		{@render Fallback()}
+	{/if}
+</CalendarPrimitive.NextButton>
diff --git a/website/src/lib/components/ui/calendar/calendar-prev-button.svelte b/website/src/lib/components/ui/calendar/calendar-prev-button.svelte
index 3e4471a20..383312ea7 100644
--- a/website/src/lib/components/ui/calendar/calendar-prev-button.svelte
+++ b/website/src/lib/components/ui/calendar/calendar-prev-button.svelte
@@ -23,9 +23,14 @@
 	bind:ref
 	class={cn(
 		buttonVariants({ variant }),
-		"size-(--cell-size) select-none bg-transparent p-0 disabled:opacity-50 rtl:rotate-180",
+		"size-(--cell-size) bg-transparent p-0 select-none disabled:opacity-50 rtl:rotate-180",
 		className
 	)}
-	children={children || Fallback}
 	{...restProps}
-/>
+>
+	{#if children}
+		{@render children?.()}
+	{:else}
+		{@render Fallback()}
+	{/if}
+</CalendarPrimitive.PrevButton>
diff --git a/website/src/lib/components/ui/calendar/calendar-year-select.svelte b/website/src/lib/components/ui/calendar/calendar-year-select.svelte
index 38420371c..898c2a4a0 100644
--- a/website/src/lib/components/ui/calendar/calendar-year-select.svelte
+++ b/website/src/lib/components/ui/calendar/calendar-year-select.svelte
@@ -13,11 +13,15 @@
 
 <span
 	class={cn(
-		"has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative flex rounded-md border",
+		"has-focus:border-ring border-input has-focus:ring-ring/50 relative flex rounded-md border shadow-xs has-focus:ring-[3px]",
 		className
 	)}
 >
-	<CalendarPrimitive.YearSelect bind:ref class="absolute inset-0 opacity-0" {...restProps}>
+	<CalendarPrimitive.YearSelect
+		bind:ref
+		class="dark:bg-popover dark:text-popover-foreground absolute inset-0 opacity-0"
+		{...restProps}
+	>
 		{#snippet child({ props, yearItems, selectedYearItem })}
 			<select {...props} {value}>
 				{#each yearItems as yearItem (yearItem.value)}
@@ -32,7 +36,7 @@
 				{/each}
 			</select>
 			<span
-				class="[&>svg]:text-muted-foreground flex h-8 select-none items-center gap-1 rounded-md pl-2 pr-1 text-sm font-medium [&>svg]:size-3.5"
+				class="[&>svg]:text-muted-foreground flex h-(--cell-size) items-center gap-1 rounded-md ps-2 pe-1 text-sm font-medium select-none [&>svg]:size-3.5"
 				aria-hidden="true"
 			>
 				{yearItems.find((item) => item.value === value)?.label || selectedYearItem.label}
diff --git a/website/src/lib/components/ui/calendar/calendar.svelte b/website/src/lib/components/ui/calendar/calendar.svelte
index 29b6fff9a..78952c7f3 100644
--- a/website/src/lib/components/ui/calendar/calendar.svelte
+++ b/website/src/lib/components/ui/calendar/calendar.svelte
@@ -50,7 +50,7 @@ get along, so we shut typescript up by casting `value` to `never`.
 	{weekdayFormat}
 	{disableDaysOutsideMonth}
 	class={cn(
-		"bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+		"p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] bg-background group/calendar in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent",
 		className
 	)}
 	{locale}
diff --git a/website/src/lib/components/ui/card/card-action.svelte b/website/src/lib/components/ui/card/card-action.svelte
index cc36c5665..7c48844a8 100644
--- a/website/src/lib/components/ui/card/card-action.svelte
+++ b/website/src/lib/components/ui/card/card-action.svelte
@@ -13,7 +13,10 @@
 <div
 	bind:this={ref}
 	data-slot="card-action"
-	class={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}
+	class={cn(
+		"cn-card-action col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+		className
+	)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/website/src/lib/components/ui/card/card-content.svelte b/website/src/lib/components/ui/card/card-content.svelte
index bc90b8371..4f60ee3a0 100644
--- a/website/src/lib/components/ui/card/card-content.svelte
+++ b/website/src/lib/components/ui/card/card-content.svelte
@@ -10,6 +10,11 @@
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
-<div bind:this={ref} data-slot="card-content" class={cn("px-6", className)} {...restProps}>
+<div
+	bind:this={ref}
+	data-slot="card-content"
+	class={cn("px-4 group-data-[size=sm]/card:px-3", className)}
+	{...restProps}
+>
 	{@render children?.()}
 </div>
diff --git a/website/src/lib/components/ui/card/card-footer.svelte b/website/src/lib/components/ui/card/card-footer.svelte
index cf4335399..1efff6d98 100644
--- a/website/src/lib/components/ui/card/card-footer.svelte
+++ b/website/src/lib/components/ui/card/card-footer.svelte
@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="card-footer"
-	class={cn("[.border-t]:pt-6 flex items-center px-6", className)}
+	class={cn("bg-muted/50 rounded-b-xl border-t p-4 group-data-[size=sm]/card:p-3 flex items-center", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/website/src/lib/components/ui/card/card-header.svelte b/website/src/lib/components/ui/card/card-header.svelte
index 8a91abbfb..7eb69e12b 100644
--- a/website/src/lib/components/ui/card/card-header.svelte
+++ b/website/src/lib/components/ui/card/card-header.svelte
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="card-header"
 	class={cn(
-		"@container/card-header has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6",
+		"gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]",
 		className
 	)}
 	{...restProps}
diff --git a/website/src/lib/components/ui/card/card-title.svelte b/website/src/lib/components/ui/card/card-title.svelte
index 22586e61f..1523fc52c 100644
--- a/website/src/lib/components/ui/card/card-title.svelte
+++ b/website/src/lib/components/ui/card/card-title.svelte
@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="card-title"
-	class={cn("font-semibold leading-none", className)}
+	class={cn("text-base leading-snug font-medium group-data-[size=sm]/card:text-sm", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/website/src/lib/components/ui/card/card.svelte b/website/src/lib/components/ui/card/card.svelte
index 99448cc9a..2b4f81af8 100644
--- a/website/src/lib/components/ui/card/card.svelte
+++ b/website/src/lib/components/ui/card/card.svelte
@@ -6,17 +6,16 @@
 		ref = $bindable(null),
 		class: className,
 		children,
+		size = "default",
 		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & { size?: "default" | "sm" } = $props();
 </script>
 
 <div
 	bind:this={ref}
 	data-slot="card"
-	class={cn(
-		"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
-		className
-	)}
+	data-size={size}
+	class={cn("ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/website/src/lib/components/ui/checkbox/checkbox.svelte b/website/src/lib/components/ui/checkbox/checkbox.svelte
index 1622e05c3..27b0da689 100644
--- a/website/src/lib/components/ui/checkbox/checkbox.svelte
+++ b/website/src/lib/components/ui/checkbox/checkbox.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { Checkbox as CheckboxPrimitive } from "bits-ui";
-	import CheckIcon from "@lucide/svelte/icons/check";
-	import MinusIcon from "@lucide/svelte/icons/minus";
 	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import CheckIcon from '@lucide/svelte/icons/check';
+	import MinusIcon from '@lucide/svelte/icons/minus';
 
 	let {
 		ref = $bindable(null),
@@ -17,7 +17,7 @@
 	bind:ref
 	data-slot="checkbox"
 	class={cn(
-		"border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive shadow-xs peer flex size-4 shrink-0 items-center justify-center rounded-[4px] border outline-none transition-shadow focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+		"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-colors group-has-disabled/field:opacity-50 focus-visible:ring-3 aria-invalid:ring-3 peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50",
 		className
 	)}
 	bind:checked
@@ -25,11 +25,14 @@
 	{...restProps}
 >
 	{#snippet children({ checked, indeterminate })}
-		<div data-slot="checkbox-indicator" class="text-current transition-none">
+		<div
+			data-slot="checkbox-indicator"
+			class="[&>svg]:size-3.5 grid place-content-center text-current transition-none"
+		>
 			{#if checked}
-				<CheckIcon class="size-3.5" />
+				<CheckIcon  />
 			{:else if indeterminate}
-				<MinusIcon class="size-3.5" />
+				<MinusIcon  />
 			{/if}
 		</div>
 	{/snippet}
diff --git a/website/src/lib/components/ui/context-menu/context-menu-checkbox-item.svelte b/website/src/lib/components/ui/context-menu/context-menu-checkbox-item.svelte
index ccafce222..9ffcfbe79 100644
--- a/website/src/lib/components/ui/context-menu/context-menu-checkbox-item.svelte
+++ b/website/src/lib/components/ui/context-menu/context-menu-checkbox-item.svelte
@@ -1,17 +1,19 @@
 <script lang="ts">
 	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
-	import CheckIcon from "@lucide/svelte/icons/check";
 	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
 	import type { Snippet } from "svelte";
+	import CheckIcon from '@lucide/svelte/icons/check';
 
 	let {
 		ref = $bindable(null),
 		checked = $bindable(false),
 		indeterminate = $bindable(false),
 		class: className,
+		inset,
 		children: childrenProp,
 		...restProps
 	}: WithoutChildrenOrChild<ContextMenuPrimitive.CheckboxItemProps> & {
+		inset?: boolean;
 		children?: Snippet;
 	} = $props();
 </script>
@@ -21,16 +23,17 @@
 	bind:checked
 	bind:indeterminate
 	data-slot="context-menu-checkbox-item"
+	data-inset={inset}
 	class={cn(
-		"data-highlighted:bg-accent data-highlighted:text-accent-foreground outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 pl-8 pr-2 text-sm data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		"focus:bg-accent focus:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}
 >
 	{#snippet children({ checked })}
-		<span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+		<span class="absolute right-2 pointer-events-none">
 			{#if checked}
-				<CheckIcon class="size-4" />
+				<CheckIcon  />
 			{/if}
 		</span>
 		{@render childrenProp?.()}
diff --git a/website/src/lib/components/ui/context-menu/context-menu-content.svelte b/website/src/lib/components/ui/context-menu/context-menu-content.svelte
index e793938cb..5f3242006 100644
--- a/website/src/lib/components/ui/context-menu/context-menu-content.svelte
+++ b/website/src/lib/components/ui/context-menu/context-menu-content.svelte
@@ -1,6 +1,9 @@
 <script lang="ts">
 	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
 	import { cn } from "$lib/utils.js";
+	import ContextMenuPortal from "./context-menu-portal.svelte";
+	import type { ComponentProps } from "svelte";
+	import type { WithoutChildrenOrChild } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -8,18 +11,18 @@
 		class: className,
 		...restProps
 	}: ContextMenuPrimitive.ContentProps & {
-		portalProps?: ContextMenuPrimitive.PortalProps;
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof ContextMenuPortal>>;
 	} = $props();
 </script>
 
-<ContextMenuPrimitive.Portal {...portalProps}>
+<ContextMenuPortal {...portalProps}>
 	<ContextMenuPrimitive.Content
 		bind:ref
 		data-slot="context-menu-content"
 		class={cn(
-			"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 max-h-(--bits-context-menu-content-available-height) origin-(--bits-context-menu-content-transform-origin) z-50 min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border p-1 shadow-md",
+			"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-36 rounded-lg p-1 shadow-md ring-1 duration-100 z-50 overflow-x-hidden overflow-y-auto outline-none",
 			className
 		)}
 		{...restProps}
 	/>
-</ContextMenuPrimitive.Portal>
+</ContextMenuPortal>
diff --git a/website/src/lib/components/ui/context-menu/context-menu-group-heading.svelte b/website/src/lib/components/ui/context-menu/context-menu-group-heading.svelte
index 66a81b36e..0c0f45991 100644
--- a/website/src/lib/components/ui/context-menu/context-menu-group-heading.svelte
+++ b/website/src/lib/components/ui/context-menu/context-menu-group-heading.svelte
@@ -16,6 +16,6 @@
 	bind:ref
 	data-slot="context-menu-group-heading"
 	data-inset={inset}
-	class={cn("text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", className)}
+	class={cn("text-foreground px-2 py-1.5 text-sm font-medium data-inset:ps-8", className)}
 	{...restProps}
 />
diff --git a/website/src/lib/components/ui/context-menu/context-menu-item.svelte b/website/src/lib/components/ui/context-menu/context-menu-item.svelte
index 9193d18da..fccba2830 100644
--- a/website/src/lib/components/ui/context-menu/context-menu-item.svelte
+++ b/website/src/lib/components/ui/context-menu/context-menu-item.svelte
@@ -20,7 +20,7 @@
 	data-inset={inset}
 	data-variant={variant}
 	class={cn(
-		"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:data-highlighted:bg-destructive/10 dark:data-[variant=destructive]:data-highlighted:bg-destructive/20 data-[variant=destructive]:data-highlighted:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled]:pointer-events-none data-[inset]:pl-8 data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}
diff --git a/website/src/lib/components/ui/context-menu/context-menu-label.svelte b/website/src/lib/components/ui/context-menu/context-menu-label.svelte
index 7d050374a..8b9e9c69a 100644
--- a/website/src/lib/components/ui/context-menu/context-menu-label.svelte
+++ b/website/src/lib/components/ui/context-menu/context-menu-label.svelte
@@ -17,7 +17,7 @@
 	bind:this={ref}
 	data-slot="context-menu-label"
 	data-inset={inset}
-	class={cn("text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", className)}
+	class={cn("text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7 data-inset:pl-8", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/website/src/lib/components/ui/context-menu/context-menu-portal.svelte b/website/src/lib/components/ui/context-menu/context-menu-portal.svelte
new file mode 100644
index 000000000..96b1e3e40
--- /dev/null
+++ b/website/src/lib/components/ui/context-menu/context-menu-portal.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+
+	let { ...restProps }: ContextMenuPrimitive.PortalProps = $props();
+</script>
+
+<ContextMenuPrimitive.Portal {...restProps} />
diff --git a/website/src/lib/components/ui/context-menu/context-menu-radio-item.svelte b/website/src/lib/components/ui/context-menu/context-menu-radio-item.svelte
index 7673f0163..ad4e56f91 100644
--- a/website/src/lib/components/ui/context-menu/context-menu-radio-item.svelte
+++ b/website/src/lib/components/ui/context-menu/context-menu-radio-item.svelte
@@ -1,29 +1,33 @@
 <script lang="ts">
 	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
-	import CircleIcon from "@lucide/svelte/icons/circle";
 	import { cn, type WithoutChild } from "$lib/utils.js";
+	import CheckIcon from '@lucide/svelte/icons/check';
 
 	let {
 		ref = $bindable(null),
 		class: className,
+		inset,
 		children: childrenProp,
 		...restProps
-	}: WithoutChild<ContextMenuPrimitive.RadioItemProps> = $props();
+	}: WithoutChild<ContextMenuPrimitive.RadioItemProps> & {
+		inset?: boolean;
+	} = $props();
 </script>
 
 <ContextMenuPrimitive.RadioItem
 	bind:ref
 	data-slot="context-menu-radio-item"
+	data-inset={inset}
 	class={cn(
-		"data-highlighted:bg-accent data-highlighted:text-accent-foreground outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 pl-8 pr-2 text-sm data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		"focus:bg-accent focus:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}
 >
 	{#snippet children({ checked })}
-		<span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+		<span class="absolute right-2 pointer-events-none">
 			{#if checked}
-				<CircleIcon class="size-2 fill-current" />
+				<CheckIcon  />
 			{/if}
 		</span>
 		{@render childrenProp?.({ checked })}
diff --git a/website/src/lib/components/ui/context-menu/context-menu-shortcut.svelte b/website/src/lib/components/ui/context-menu/context-menu-shortcut.svelte
index 7eca8e08b..3305abc24 100644
--- a/website/src/lib/components/ui/context-menu/context-menu-shortcut.svelte
+++ b/website/src/lib/components/ui/context-menu/context-menu-shortcut.svelte
@@ -13,7 +13,7 @@
 <span
 	bind:this={ref}
 	data-slot="context-menu-shortcut"
-	class={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
+	class={cn("text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/website/src/lib/components/ui/context-menu/context-menu-sub-content.svelte b/website/src/lib/components/ui/context-menu/context-menu-sub-content.svelte
index e0245b1c5..fa46397d4 100644
--- a/website/src/lib/components/ui/context-menu/context-menu-sub-content.svelte
+++ b/website/src/lib/components/ui/context-menu/context-menu-sub-content.svelte
@@ -12,9 +12,6 @@
 <ContextMenuPrimitive.SubContent
 	bind:ref
 	data-slot="context-menu-sub-content"
-	class={cn(
-		"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--bits-context-menu-content-transform-origin) z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg",
-		className
-	)}
+	class={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-popover text-popover-foreground min-w-32 rounded-lg border p-1 shadow-lg duration-100", className)}
 	{...restProps}
 />
diff --git a/website/src/lib/components/ui/context-menu/context-menu-sub-trigger.svelte b/website/src/lib/components/ui/context-menu/context-menu-sub-trigger.svelte
index ba00be9f4..af016c559 100644
--- a/website/src/lib/components/ui/context-menu/context-menu-sub-trigger.svelte
+++ b/website/src/lib/components/ui/context-menu/context-menu-sub-trigger.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
-	import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
 	import { cn, type WithoutChild } from "$lib/utils.js";
+	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
 
 	let {
 		ref = $bindable(null),
@@ -19,7 +19,7 @@
 	data-slot="context-menu-sub-trigger"
 	data-inset={inset}
 	class={cn(
-		"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground outline-hidden [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled]:pointer-events-none data-[inset]:pl-8 data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-inset:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}
diff --git a/website/src/lib/components/ui/context-menu/context-menu-sub.svelte b/website/src/lib/components/ui/context-menu/context-menu-sub.svelte
new file mode 100644
index 000000000..a03827b9e
--- /dev/null
+++ b/website/src/lib/components/ui/context-menu/context-menu-sub.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+
+	let { open = $bindable(false), ...restProps }: ContextMenuPrimitive.SubProps = $props();
+</script>
+
+<ContextMenuPrimitive.Sub bind:open {...restProps} />
diff --git a/website/src/lib/components/ui/context-menu/context-menu-trigger.svelte b/website/src/lib/components/ui/context-menu/context-menu-trigger.svelte
index 3efa8575f..f6a1542f1 100644
--- a/website/src/lib/components/ui/context-menu/context-menu-trigger.svelte
+++ b/website/src/lib/components/ui/context-menu/context-menu-trigger.svelte
@@ -1,7 +1,17 @@
 <script lang="ts">
 	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
-	let { ref = $bindable(null), ...restProps }: ContextMenuPrimitive.TriggerProps = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: ContextMenuPrimitive.TriggerProps = $props();
 </script>
 
-<ContextMenuPrimitive.Trigger bind:ref data-slot="context-menu-trigger" {...restProps} />
+<ContextMenuPrimitive.Trigger
+	bind:ref
+	data-slot="context-menu-trigger"
+	class={cn("cn-context-menu-trigger select-none", className)}
+	{...restProps}
+/>
diff --git a/website/src/lib/components/ui/context-menu/context-menu.svelte b/website/src/lib/components/ui/context-menu/context-menu.svelte
new file mode 100644
index 000000000..cfaefb398
--- /dev/null
+++ b/website/src/lib/components/ui/context-menu/context-menu.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+
+	let { open = $bindable(false), ...restProps }: ContextMenuPrimitive.RootProps = $props();
+</script>
+
+<ContextMenuPrimitive.Root bind:open {...restProps} />
diff --git a/website/src/lib/components/ui/context-menu/index.ts b/website/src/lib/components/ui/context-menu/index.ts
index fce816062..cbeaee105 100644
--- a/website/src/lib/components/ui/context-menu/index.ts
+++ b/website/src/lib/components/ui/context-menu/index.ts
@@ -1,5 +1,6 @@
-import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
-
+import Root from "./context-menu.svelte";
+import Sub from "./context-menu-sub.svelte";
+import Portal from "./context-menu-portal.svelte";
 import Trigger from "./context-menu-trigger.svelte";
 import Group from "./context-menu-group.svelte";
 import RadioGroup from "./context-menu-radio-group.svelte";
@@ -13,12 +14,11 @@ import SubContent from "./context-menu-sub-content.svelte";
 import SubTrigger from "./context-menu-sub-trigger.svelte";
 import CheckboxItem from "./context-menu-checkbox-item.svelte";
 import Label from "./context-menu-label.svelte";
-const Sub = ContextMenuPrimitive.Sub;
-const Root = ContextMenuPrimitive.Root;
 
 export {
-	Sub,
 	Root,
+	Sub,
+	Portal,
 	Item,
 	GroupHeading,
 	Label,
@@ -35,6 +35,7 @@ export {
 	//
 	Root as ContextMenu,
 	Sub as ContextMenuSub,
+	Portal as ContextMenuPortal,
 	Item as ContextMenuItem,
 	GroupHeading as ContextMenuGroupHeading,
 	Group as ContextMenuGroup,
diff --git a/website/src/lib/components/ui/dialog/dialog-close.svelte b/website/src/lib/components/ui/dialog/dialog-close.svelte
index 840b2f68b..de68f2f0e 100644
--- a/website/src/lib/components/ui/dialog/dialog-close.svelte
+++ b/website/src/lib/components/ui/dialog/dialog-close.svelte
@@ -1,7 +1,11 @@
 <script lang="ts">
 	import { Dialog as DialogPrimitive } from "bits-ui";
 
-	let { ref = $bindable(null), ...restProps }: DialogPrimitive.CloseProps = $props();
+	let {
+		ref = $bindable(null),
+		type = "button",
+		...restProps
+	}: DialogPrimitive.CloseProps = $props();
 </script>
 
-<DialogPrimitive.Close bind:ref data-slot="dialog-close" {...restProps} />
+<DialogPrimitive.Close bind:ref data-slot="dialog-close" {type} {...restProps} />
diff --git a/website/src/lib/components/ui/dialog/dialog-content.svelte b/website/src/lib/components/ui/dialog/dialog-content.svelte
index a647d5663..c0551ee39 100644
--- a/website/src/lib/components/ui/dialog/dialog-content.svelte
+++ b/website/src/lib/components/ui/dialog/dialog-content.svelte
@@ -1,9 +1,12 @@
 <script lang="ts">
 	import { Dialog as DialogPrimitive } from "bits-ui";
-	import XIcon from "@lucide/svelte/icons/x";
+	import DialogPortal from "./dialog-portal.svelte";
 	import type { Snippet } from "svelte";
 	import * as Dialog from "./index.js";
 	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
+	import { Button } from "$lib/components/ui/button/index.js";
+	import XIcon from '@lucide/svelte/icons/x';
 
 	let {
 		ref = $bindable(null),
@@ -13,31 +16,33 @@
 		showCloseButton = true,
 		...restProps
 	}: WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
-		portalProps?: DialogPrimitive.PortalProps;
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof DialogPortal>>;
 		children: Snippet;
 		showCloseButton?: boolean;
 	} = $props();
 </script>
 
-<Dialog.Portal {...portalProps}>
+<DialogPortal {...portalProps}>
 	<Dialog.Overlay />
 	<DialogPrimitive.Content
 		bind:ref
 		data-slot="dialog-content"
 		class={cn(
-			"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed left-[50%] top-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+			"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-4 rounded-xl p-4 text-sm ring-1 duration-100 sm:max-w-sm fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none",
 			className
 		)}
 		{...restProps}
 	>
 		{@render children?.()}
 		{#if showCloseButton}
-			<DialogPrimitive.Close
-				class="ring-offset-background focus:ring-ring rounded-xs focus:outline-hidden absolute end-4 top-4 opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0"
-			>
-				<XIcon />
-				<span class="sr-only">Close</span>
+			<DialogPrimitive.Close data-slot="dialog-close">
+				{#snippet child({ props })}
+					<Button variant="ghost" class="absolute top-2 right-2" size="icon-sm" {...props}>
+						<XIcon  />
+						<span class="sr-only">Close</span>
+					</Button>
+				{/snippet}
 			</DialogPrimitive.Close>
 		{/if}
 	</DialogPrimitive.Content>
-</Dialog.Portal>
+</DialogPortal>
diff --git a/website/src/lib/components/ui/dialog/dialog-description.svelte b/website/src/lib/components/ui/dialog/dialog-description.svelte
index 38450239a..0102d910e 100644
--- a/website/src/lib/components/ui/dialog/dialog-description.svelte
+++ b/website/src/lib/components/ui/dialog/dialog-description.svelte
@@ -12,6 +12,6 @@
 <DialogPrimitive.Description
 	bind:ref
 	data-slot="dialog-description"
-	class={cn("text-muted-foreground text-sm", className)}
+	class={cn("text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3", className)}
 	{...restProps}
 />
diff --git a/website/src/lib/components/ui/dialog/dialog-footer.svelte b/website/src/lib/components/ui/dialog/dialog-footer.svelte
index e7ff4468e..e23160aee 100644
--- a/website/src/lib/components/ui/dialog/dialog-footer.svelte
+++ b/website/src/lib/components/ui/dialog/dialog-footer.svelte
@@ -1,20 +1,32 @@
 <script lang="ts">
 	import { cn, type WithElementRef } from "$lib/utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { Button } from "$lib/components/ui/button/index.js";
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		children,
+		showCloseButton = false,
 		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		showCloseButton?: boolean;
+	} = $props();
 </script>
 
 <div
 	bind:this={ref}
 	data-slot="dialog-footer"
-	class={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+	class={cn("bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
 	{...restProps}
 >
 	{@render children?.()}
+	{#if showCloseButton}
+		<DialogPrimitive.Close>
+			{#snippet child({ props })}
+				<Button variant="outline" {...props}>Close</Button>
+			{/snippet}
+		</DialogPrimitive.Close>
+	{/if}
 </div>
diff --git a/website/src/lib/components/ui/dialog/dialog-header.svelte b/website/src/lib/components/ui/dialog/dialog-header.svelte
index fc90cd9be..c3ce8a24d 100644
--- a/website/src/lib/components/ui/dialog/dialog-header.svelte
+++ b/website/src/lib/components/ui/dialog/dialog-header.svelte
@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="dialog-header"
-	class={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+	class={cn("gap-2 flex flex-col", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/website/src/lib/components/ui/dialog/dialog-overlay.svelte b/website/src/lib/components/ui/dialog/dialog-overlay.svelte
index f81ad8334..19f69f056 100644
--- a/website/src/lib/components/ui/dialog/dialog-overlay.svelte
+++ b/website/src/lib/components/ui/dialog/dialog-overlay.svelte
@@ -12,9 +12,6 @@
 <DialogPrimitive.Overlay
 	bind:ref
 	data-slot="dialog-overlay"
-	class={cn(
-		"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-		className
-	)}
+	class={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50", className)}
 	{...restProps}
 />
diff --git a/website/src/lib/components/ui/dialog/dialog-portal.svelte b/website/src/lib/components/ui/dialog/dialog-portal.svelte
new file mode 100644
index 000000000..ccfa79caf
--- /dev/null
+++ b/website/src/lib/components/ui/dialog/dialog-portal.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+
+	let { ...restProps }: DialogPrimitive.PortalProps = $props();
+</script>
+
+<DialogPrimitive.Portal {...restProps} />
diff --git a/website/src/lib/components/ui/dialog/dialog-title.svelte b/website/src/lib/components/ui/dialog/dialog-title.svelte
index 067e55ec1..6ff1a4a5e 100644
--- a/website/src/lib/components/ui/dialog/dialog-title.svelte
+++ b/website/src/lib/components/ui/dialog/dialog-title.svelte
@@ -12,6 +12,6 @@
 <DialogPrimitive.Title
 	bind:ref
 	data-slot="dialog-title"
-	class={cn("text-lg font-semibold leading-none", className)}
+	class={cn("text-base leading-none font-medium", className)}
 	{...restProps}
 />
diff --git a/website/src/lib/components/ui/dialog/dialog-trigger.svelte b/website/src/lib/components/ui/dialog/dialog-trigger.svelte
index 9d1e80110..589ee0c3d 100644
--- a/website/src/lib/components/ui/dialog/dialog-trigger.svelte
+++ b/website/src/lib/components/ui/dialog/dialog-trigger.svelte
@@ -1,7 +1,11 @@
 <script lang="ts">
 	import { Dialog as DialogPrimitive } from "bits-ui";
 
-	let { ref = $bindable(null), ...restProps }: DialogPrimitive.TriggerProps = $props();
+	let {
+		ref = $bindable(null),
+		type = "button",
+		...restProps
+	}: DialogPrimitive.TriggerProps = $props();
 </script>
 
-<DialogPrimitive.Trigger bind:ref data-slot="dialog-trigger" {...restProps} />
+<DialogPrimitive.Trigger bind:ref data-slot="dialog-trigger" {type} {...restProps} />
diff --git a/website/src/lib/components/ui/dialog/dialog.svelte b/website/src/lib/components/ui/dialog/dialog.svelte
new file mode 100644
index 000000000..211672c6d
--- /dev/null
+++ b/website/src/lib/components/ui/dialog/dialog.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+
+	let { open = $bindable(false), ...restProps }: DialogPrimitive.RootProps = $props();
+</script>
+
+<DialogPrimitive.Root bind:open {...restProps} />
diff --git a/website/src/lib/components/ui/dialog/index.ts b/website/src/lib/components/ui/dialog/index.ts
index dce1d9dcd..076cef528 100644
--- a/website/src/lib/components/ui/dialog/index.ts
+++ b/website/src/lib/components/ui/dialog/index.ts
@@ -1,5 +1,5 @@
-import { Dialog as DialogPrimitive } from "bits-ui";
-
+import Root from "./dialog.svelte";
+import Portal from "./dialog-portal.svelte";
 import Title from "./dialog-title.svelte";
 import Footer from "./dialog-footer.svelte";
 import Header from "./dialog-header.svelte";
@@ -9,9 +9,6 @@ import Description from "./dialog-description.svelte";
 import Trigger from "./dialog-trigger.svelte";
 import Close from "./dialog-close.svelte";
 
-const Root = DialogPrimitive.Root;
-const Portal = DialogPrimitive.Portal;
-
 export {
 	Root,
 	Title,
diff --git a/website/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-group.svelte b/website/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-group.svelte
new file mode 100644
index 000000000..e0e197187
--- /dev/null
+++ b/website/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-group.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable([]),
+		...restProps
+	}: DropdownMenuPrimitive.CheckboxGroupProps = $props();
+</script>
+
+<DropdownMenuPrimitive.CheckboxGroup
+	bind:ref
+	bind:value
+	data-slot="dropdown-menu-checkbox-group"
+	{...restProps}
+/>
diff --git a/website/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte b/website/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
index e03f94916..a81b48d00 100644
--- a/website/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
+++ b/website/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-	import CheckIcon from "@lucide/svelte/icons/check";
-	import MinusIcon from "@lucide/svelte/icons/minus";
+	import MinusIcon from '@lucide/svelte/icons/minus';
+	import CheckIcon from '@lucide/svelte/icons/check';
 	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
 	import type { Snippet } from "svelte";
 
@@ -23,17 +23,20 @@
 	bind:indeterminate
 	data-slot="dropdown-menu-checkbox-item"
 	class={cn(
-		"focus:bg-accent focus:text-accent-foreground outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 pl-8 pr-2 text-sm data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}
 >
 	{#snippet children({ checked, indeterminate })}
-		<span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+		<span
+			class="absolute right-2 flex items-center justify-center pointer-events-none"
+			data-slot="dropdown-menu-checkbox-item-indicator"
+		>
 			{#if indeterminate}
-				<MinusIcon class="size-4" />
-			{:else}
-				<CheckIcon class={cn("size-4", !checked && "text-transparent")} />
+				<MinusIcon  />
+			{:else if checked}
+				<CheckIcon  />
 			{/if}
 		</span>
 		{@render childrenProp?.()}
diff --git a/website/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte b/website/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
index 907ef7373..261a5b08b 100644
--- a/website/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
+++ b/website/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
@@ -1,27 +1,31 @@
 <script lang="ts">
-	import { cn } from "$lib/utils.js";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import DropdownMenuPortal from "./dropdown-menu-portal.svelte";
 	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import type { ComponentProps } from "svelte";
 
 	let {
 		ref = $bindable(null),
 		sideOffset = 4,
+		align = "start",
 		portalProps,
 		class: className,
 		...restProps
 	}: DropdownMenuPrimitive.ContentProps & {
-		portalProps?: DropdownMenuPrimitive.PortalProps;
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof DropdownMenuPortal>>;
 	} = $props();
 </script>
 
-<DropdownMenuPrimitive.Portal {...portalProps}>
+<DropdownMenuPortal {...portalProps}>
 	<DropdownMenuPrimitive.Content
 		bind:ref
 		data-slot="dropdown-menu-content"
 		{sideOffset}
+		{align}
 		class={cn(
-			"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 max-h-(--bits-dropdown-menu-content-available-height) origin-(--bits-dropdown-menu-content-transform-origin) z-50 min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border p-1 shadow-md outline-none",
+			"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 w-(--bits-dropdown-menu-anchor-width) overflow-x-hidden overflow-y-auto outline-none data-closed:overflow-hidden",
 			className
 		)}
 		{...restProps}
 	/>
-</DropdownMenuPrimitive.Portal>
+</DropdownMenuPortal>
diff --git a/website/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte b/website/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte
index 48d14a916..433540fd2 100644
--- a/website/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte
+++ b/website/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte
@@ -17,6 +17,6 @@
 	bind:ref
 	data-slot="dropdown-menu-group-heading"
 	data-inset={inset}
-	class={cn("px-2 py-1.5 text-sm font-semibold data-[inset]:pl-8", className)}
+	class={cn("px-2 py-1.5 text-sm font-semibold data-[inset]:ps-8", className)}
 	{...restProps}
 />
diff --git a/website/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte b/website/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
index 64bb28310..c425190de 100644
--- a/website/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
+++ b/website/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
@@ -20,7 +20,7 @@
 	data-inset={inset}
 	data-variant={variant}
 	class={cn(
-		"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:data-highlighted:bg-destructive/10 dark:data-[variant=destructive]:data-highlighted:bg-destructive/20 data-[variant=destructive]:data-highlighted:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled]:pointer-events-none data-[inset]:pl-8 data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}
diff --git a/website/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte b/website/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
index f72e477e1..e0c534feb 100644
--- a/website/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
+++ b/website/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
@@ -17,7 +17,7 @@
 	bind:this={ref}
 	data-slot="dropdown-menu-label"
 	data-inset={inset}
-	class={cn("px-2 py-1.5 text-sm font-semibold data-[inset]:pl-8", className)}
+	class={cn("text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7 data-[inset]:pl-8", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/website/src/lib/components/ui/dropdown-menu/dropdown-menu-portal.svelte b/website/src/lib/components/ui/dropdown-menu/dropdown-menu-portal.svelte
new file mode 100644
index 000000000..274cfef78
--- /dev/null
+++ b/website/src/lib/components/ui/dropdown-menu/dropdown-menu-portal.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+	let { ...restProps }: DropdownMenuPrimitive.PortalProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Portal {...restProps} />
diff --git a/website/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte b/website/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
index 513170aa3..c8aa07b1b 100644
--- a/website/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
+++ b/website/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-	import CircleIcon from "@lucide/svelte/icons/circle";
+	import CheckIcon from '@lucide/svelte/icons/check';
 	import { cn, type WithoutChild } from "$lib/utils.js";
 
 	let {
@@ -15,15 +15,18 @@
 	bind:ref
 	data-slot="dropdown-menu-radio-item"
 	class={cn(
-		"focus:bg-accent focus:text-accent-foreground outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 pl-8 pr-2 text-sm data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}
 >
 	{#snippet children({ checked })}
-		<span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+		<span
+			class="absolute right-2 flex items-center justify-center pointer-events-none"
+			data-slot="dropdown-menu-radio-item-indicator"
+		>
 			{#if checked}
-				<CircleIcon class="size-2 fill-current" />
+				<CheckIcon  />
 			{/if}
 		</span>
 		{@render childrenProp?.({ checked })}
diff --git a/website/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte b/website/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
index 697494778..ed7cc85ab 100644
--- a/website/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
+++ b/website/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
@@ -13,7 +13,7 @@
 <span
 	bind:this={ref}
 	data-slot="dropdown-menu-shortcut"
-	class={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
+	class={cn("text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/website/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte b/website/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
index 10e14ca6d..b5750d4df 100644
--- a/website/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
+++ b/website/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
@@ -12,9 +12,6 @@
 <DropdownMenuPrimitive.SubContent
 	bind:ref
 	data-slot="dropdown-menu-sub-content"
-	class={cn(
-		"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--bits-dropdown-menu-content-transform-origin) z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg",
-		className
-	)}
+	class={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-[96px] rounded-lg p-1 shadow-lg ring-1 duration-100 w-auto", className)}
 	{...restProps}
 />
diff --git a/website/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte b/website/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
index f9b286a29..fab0275d5 100644
--- a/website/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
+++ b/website/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-	import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
+	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
 	import { cn } from "$lib/utils.js";
 
 	let {
@@ -19,11 +19,11 @@
 	data-slot="dropdown-menu-sub-trigger"
 	data-inset={inset}
 	class={cn(
-		"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground outline-hidden [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled]:pointer-events-none data-[inset]:pl-8 data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}
 >
 	{@render children?.()}
-	<ChevronRightIcon class="ml-auto size-4" />
+	<ChevronRightIcon class="ml-auto" />
 </DropdownMenuPrimitive.SubTrigger>
diff --git a/website/src/lib/components/ui/dropdown-menu/dropdown-menu-sub.svelte b/website/src/lib/components/ui/dropdown-menu/dropdown-menu-sub.svelte
new file mode 100644
index 000000000..f04458139
--- /dev/null
+++ b/website/src/lib/components/ui/dropdown-menu/dropdown-menu-sub.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+	let { open = $bindable(false), ...restProps }: DropdownMenuPrimitive.SubProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Sub bind:open {...restProps} />
diff --git a/website/src/lib/components/ui/dropdown-menu/dropdown-menu.svelte b/website/src/lib/components/ui/dropdown-menu/dropdown-menu.svelte
new file mode 100644
index 000000000..cb4bc621c
--- /dev/null
+++ b/website/src/lib/components/ui/dropdown-menu/dropdown-menu.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+	let { open = $bindable(false), ...restProps }: DropdownMenuPrimitive.RootProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Root bind:open {...restProps} />
diff --git a/website/src/lib/components/ui/dropdown-menu/index.ts b/website/src/lib/components/ui/dropdown-menu/index.ts
index 1cf9f701c..7850c6a30 100644
--- a/website/src/lib/components/ui/dropdown-menu/index.ts
+++ b/website/src/lib/components/ui/dropdown-menu/index.ts
@@ -1,4 +1,6 @@
-import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+import Root from "./dropdown-menu.svelte";
+import Sub from "./dropdown-menu-sub.svelte";
+import CheckboxGroup from "./dropdown-menu-checkbox-group.svelte";
 import CheckboxItem from "./dropdown-menu-checkbox-item.svelte";
 import Content from "./dropdown-menu-content.svelte";
 import Group from "./dropdown-menu-group.svelte";
@@ -12,15 +14,18 @@ import Trigger from "./dropdown-menu-trigger.svelte";
 import SubContent from "./dropdown-menu-sub-content.svelte";
 import SubTrigger from "./dropdown-menu-sub-trigger.svelte";
 import GroupHeading from "./dropdown-menu-group-heading.svelte";
-const Sub = DropdownMenuPrimitive.Sub;
-const Root = DropdownMenuPrimitive.Root;
+import Portal from "./dropdown-menu-portal.svelte";
 
 export {
+	CheckboxGroup,
 	CheckboxItem,
 	Content,
+	Portal,
 	Root as DropdownMenu,
+	CheckboxGroup as DropdownMenuCheckboxGroup,
 	CheckboxItem as DropdownMenuCheckboxItem,
 	Content as DropdownMenuContent,
+	Portal as DropdownMenuPortal,
 	Group as DropdownMenuGroup,
 	Item as DropdownMenuItem,
 	Label as DropdownMenuLabel,
diff --git a/website/src/lib/components/ui/input/input.svelte b/website/src/lib/components/ui/input/input.svelte
index 960167d7e..fe7db38f2 100644
--- a/website/src/lib/components/ui/input/input.svelte
+++ b/website/src/lib/components/ui/input/input.svelte
@@ -25,9 +25,7 @@
 		bind:this={ref}
 		data-slot={dataSlot}
 		class={cn(
-			"selection:bg-primary dark:bg-input/30 selection:text-primary-foreground border-input ring-offset-background placeholder:text-muted-foreground shadow-xs flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 pt-1.5 text-sm font-medium outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50",
-			"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-			"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+			"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
 			className
 		)}
 		type="file"
@@ -40,9 +38,7 @@
 		bind:this={ref}
 		data-slot={dataSlot}
 		class={cn(
-			"border-input bg-background selection:bg-primary dark:bg-input/30 selection:text-primary-foreground ring-offset-background placeholder:text-muted-foreground shadow-xs flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-			"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-			"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+			"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
 			className
 		)}
 		{type}
diff --git a/website/src/lib/components/ui/kbd/kbd-group.svelte b/website/src/lib/components/ui/kbd/kbd-group.svelte
index 3df93ef76..1676c6732 100644
--- a/website/src/lib/components/ui/kbd/kbd-group.svelte
+++ b/website/src/lib/components/ui/kbd/kbd-group.svelte
@@ -1,10 +1,20 @@
 <script lang="ts">
-	import { cn } from "$lib/utils.js";
+	import { cn, type WithElementRef } from "$lib/utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
-	let { class: className, children, ...restProps }: HTMLAttributes<HTMLElement> = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
 </script>
 
-<kbd data-slot="kbd-group" class={cn("inline-flex items-center gap-1", className)} {...restProps}>
+<kbd
+	bind:this={ref}
+	data-slot="kbd-group"
+	class={cn("gap-1 inline-flex items-center", className)}
+	{...restProps}
+>
 	{@render children?.()}
 </kbd>
diff --git a/website/src/lib/components/ui/kbd/kbd.svelte b/website/src/lib/components/ui/kbd/kbd.svelte
index 5d5b559e8..034ef5a41 100644
--- a/website/src/lib/components/ui/kbd/kbd.svelte
+++ b/website/src/lib/components/ui/kbd/kbd.svelte
@@ -1,16 +1,20 @@
 <script lang="ts">
-	import { cn } from "$lib/utils.js";
+	import { cn, type WithElementRef } from "$lib/utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
-	let { class: className, children, ...restProps }: HTMLAttributes<HTMLElement> = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
 </script>
 
 <kbd
+	bind:this={ref}
 	data-slot="kbd"
 	class={cn(
-		"bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 select-none items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium",
-		"[&_svg:not([class*='size-'])]:size-3",
-		"[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10",
+		"bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-sm px-1 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3 pointer-events-none inline-flex items-center justify-center select-none",
 		className
 	)}
 	{...restProps}
diff --git a/website/src/lib/components/ui/label/label.svelte b/website/src/lib/components/ui/label/label.svelte
index d0afda3da..d5e308632 100644
--- a/website/src/lib/components/ui/label/label.svelte
+++ b/website/src/lib/components/ui/label/label.svelte
@@ -13,7 +13,7 @@
 	bind:ref
 	data-slot="label"
 	class={cn(
-		"flex select-none items-center gap-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50 group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50",
+		"gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed",
 		className
 	)}
 	{...restProps}
diff --git a/website/src/lib/components/ui/menubar/index.ts b/website/src/lib/components/ui/menubar/index.ts
index 57a6cfbfb..2440d7aee 100644
--- a/website/src/lib/components/ui/menubar/index.ts
+++ b/website/src/lib/components/ui/menubar/index.ts
@@ -1,5 +1,7 @@
-import { Menubar as MenubarPrimitive } from "bits-ui";
 import Root from "./menubar.svelte";
+import Menu from "./menubar-menu.svelte";
+import Sub from "./menubar-sub.svelte";
+import RadioGroup from "./menubar-radio-group.svelte";
 import CheckboxItem from "./menubar-checkbox-item.svelte";
 import Content from "./menubar-content.svelte";
 import Item from "./menubar-item.svelte";
@@ -12,10 +14,7 @@ import SubTrigger from "./menubar-sub-trigger.svelte";
 import Trigger from "./menubar-trigger.svelte";
 import Label from "./menubar-label.svelte";
 import GroupHeading from "./menubar-group-heading.svelte";
-
-const Menu = MenubarPrimitive.Menu;
-const Sub = MenubarPrimitive.Sub;
-const RadioGroup = MenubarPrimitive.RadioGroup;
+import Portal from "./menubar-portal.svelte";
 
 export {
 	Root,
@@ -34,6 +33,7 @@ export {
 	RadioGroup,
 	Label,
 	GroupHeading,
+	Portal,
 	//
 	Root as Menubar,
 	CheckboxItem as MenubarCheckboxItem,
@@ -51,4 +51,5 @@ export {
 	RadioGroup as MenubarRadioGroup,
 	Label as MenubarLabel,
 	GroupHeading as MenubarGroupHeading,
+	Portal as MenubarPortal,
 };
diff --git a/website/src/lib/components/ui/menubar/menubar-checkbox-item.svelte b/website/src/lib/components/ui/menubar/menubar-checkbox-item.svelte
index 012d68b98..764568f93 100644
--- a/website/src/lib/components/ui/menubar/menubar-checkbox-item.svelte
+++ b/website/src/lib/components/ui/menubar/menubar-checkbox-item.svelte
@@ -1,18 +1,20 @@
 <script lang="ts">
 	import { Menubar as MenubarPrimitive } from "bits-ui";
-	import CheckIcon from "@lucide/svelte/icons/check";
-	import MinusIcon from "@lucide/svelte/icons/minus";
 	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
 	import type { Snippet } from "svelte";
+	import MinusIcon from '@lucide/svelte/icons/minus';
+	import CheckIcon from '@lucide/svelte/icons/check';
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		checked = $bindable(false),
 		indeterminate = $bindable(false),
+		inset,
 		children: childrenProp,
 		...restProps
 	}: WithoutChildrenOrChild<MenubarPrimitive.CheckboxItemProps> & {
+		inset?: boolean;
 		children?: Snippet;
 	} = $props();
 </script>
@@ -22,18 +24,21 @@
 	bind:checked
 	bind:indeterminate
 	data-slot="menubar-checkbox-item"
+	data-inset={inset}
 	class={cn(
-		"focus:bg-accent focus:text-accent-foreground rounded-xs outline-hidden relative flex cursor-default select-none items-center gap-2 py-1.5 pl-8 pr-2 text-sm data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm data-inset:pl-7 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}
 >
-	{#snippet children({ checked, indeterminate })}
-		<span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+	{#snippet children({ checked: checked, indeterminate: indeterminate })}
+		<span
+			class="left-1.5 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center"
+		>
 			{#if indeterminate}
-				<MinusIcon class="size-4" />
-			{:else}
-				<CheckIcon class={cn("size-4", !checked && "text-transparent")} />
+				<MinusIcon  />
+			{:else if checked}
+				<CheckIcon  />
 			{/if}
 		</span>
 		{@render childrenProp?.()}
diff --git a/website/src/lib/components/ui/menubar/menubar-content.svelte b/website/src/lib/components/ui/menubar/menubar-content.svelte
index d1936228f..855da757a 100644
--- a/website/src/lib/components/ui/menubar/menubar-content.svelte
+++ b/website/src/lib/components/ui/menubar/menubar-content.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
 	import { Menubar as MenubarPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import MenubarPortal from "./menubar-portal.svelte";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
 
 	let {
 		ref = $bindable(null),
@@ -12,22 +14,22 @@
 		portalProps,
 		...restProps
 	}: MenubarPrimitive.ContentProps & {
-		portalProps?: MenubarPrimitive.PortalProps;
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof MenubarPortal>>;
 	} = $props();
 </script>
 
-<MenubarPrimitive.Portal {...portalProps}>
+<MenubarPortal {...portalProps}>
 	<MenubarPrimitive.Content
 		bind:ref
 		data-slot="menubar-content"
-		{sideOffset}
 		{align}
 		{alignOffset}
 		{side}
+		{sideOffset}
 		class={cn(
-			"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--bits-menubar-content-transform-origin) z-50 min-w-[12rem] overflow-hidden rounded-md border p-1 shadow-md",
+			"bg-popover text-popover-foreground ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 z-50 min-w-36 origin-(--bits-menubar-content-transform-origin) overflow-hidden rounded-lg p-1 shadow-md ring-1 duration-100",
 			className
 		)}
 		{...restProps}
 	/>
-</MenubarPrimitive.Portal>
+</MenubarPortal>
diff --git a/website/src/lib/components/ui/menubar/menubar-group-heading.svelte b/website/src/lib/components/ui/menubar/menubar-group-heading.svelte
index 024e74281..c5b8f92cb 100644
--- a/website/src/lib/components/ui/menubar/menubar-group-heading.svelte
+++ b/website/src/lib/components/ui/menubar/menubar-group-heading.svelte
@@ -17,6 +17,6 @@
 	bind:ref
 	data-slot="menubar-group-heading"
 	data-inset={inset}
-	class={cn("px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", className)}
+	class={cn("px-2 py-1.5 text-sm font-medium data-[inset]:ps-8", className)}
 	{...restProps}
 />
diff --git a/website/src/lib/components/ui/menubar/menubar-item.svelte b/website/src/lib/components/ui/menubar/menubar-item.svelte
index 8c20d42f4..17f41b21b 100644
--- a/website/src/lib/components/ui/menubar/menubar-item.svelte
+++ b/website/src/lib/components/ui/menubar/menubar-item.svelte
@@ -19,9 +19,6 @@
 	data-slot="menubar-item"
 	data-inset={inset}
 	data-variant={variant}
-	class={cn(
-		"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled]:pointer-events-none data-[inset]:pl-8 data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-		className
-	)}
+	class={cn("focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive! not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-disabled:opacity-50 data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/menubar-item flex items-center", className)}
 	{...restProps}
 />
diff --git a/website/src/lib/components/ui/menubar/menubar-label.svelte b/website/src/lib/components/ui/menubar/menubar-label.svelte
index 1b36f6c29..4e399ce81 100644
--- a/website/src/lib/components/ui/menubar/menubar-label.svelte
+++ b/website/src/lib/components/ui/menubar/menubar-label.svelte
@@ -18,7 +18,7 @@
 	bind:this={ref}
 	data-slot="menubar-label"
 	data-inset={inset}
-	class={cn("px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", className)}
+	class={cn("px-1.5 py-1 text-sm font-medium data-inset:pl-7", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/website/src/lib/components/ui/menubar/menubar-menu.svelte b/website/src/lib/components/ui/menubar/menubar-menu.svelte
new file mode 100644
index 000000000..fe3cffa9d
--- /dev/null
+++ b/website/src/lib/components/ui/menubar/menubar-menu.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Menubar as MenubarPrimitive } from "bits-ui";
+
+	let { ...restProps }: MenubarPrimitive.MenuProps = $props();
+</script>
+
+<MenubarPrimitive.Menu {...restProps} />
diff --git a/website/src/lib/components/ui/menubar/menubar-portal.svelte b/website/src/lib/components/ui/menubar/menubar-portal.svelte
new file mode 100644
index 000000000..5907ff418
--- /dev/null
+++ b/website/src/lib/components/ui/menubar/menubar-portal.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Menubar as MenubarPrimitive } from "bits-ui";
+
+	let { ...restProps }: MenubarPrimitive.PortalProps = $props();
+</script>
+
+<MenubarPrimitive.Portal {...restProps} />
diff --git a/website/src/lib/components/ui/menubar/menubar-radio-group.svelte b/website/src/lib/components/ui/menubar/menubar-radio-group.svelte
new file mode 100644
index 000000000..e9615a039
--- /dev/null
+++ b/website/src/lib/components/ui/menubar/menubar-radio-group.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Menubar as MenubarPrimitive } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(""),
+		...restProps
+	}: MenubarPrimitive.RadioGroupProps = $props();
+</script>
+
+<MenubarPrimitive.RadioGroup bind:ref bind:value data-slot="menubar-radio-group" {...restProps} />
diff --git a/website/src/lib/components/ui/menubar/menubar-radio-item.svelte b/website/src/lib/components/ui/menubar/menubar-radio-item.svelte
index 3da12d496..f0f5479a5 100644
--- a/website/src/lib/components/ui/menubar/menubar-radio-item.svelte
+++ b/website/src/lib/components/ui/menubar/menubar-radio-item.svelte
@@ -1,29 +1,35 @@
 <script lang="ts">
 	import { Menubar as MenubarPrimitive } from "bits-ui";
-	import CircleIcon from "@lucide/svelte/icons/circle";
 	import { cn, type WithoutChild } from "$lib/utils.js";
+	import CheckIcon from '@lucide/svelte/icons/check';
 
 	let {
 		ref = $bindable(null),
 		class: className,
+		inset,
 		children: childrenProp,
 		...restProps
-	}: WithoutChild<MenubarPrimitive.RadioItemProps> = $props();
+	}: WithoutChild<MenubarPrimitive.RadioItemProps> & {
+		inset?: boolean;
+	} = $props();
 </script>
 
 <MenubarPrimitive.RadioItem
 	bind:ref
 	data-slot="menubar-radio-item"
+	data-inset={inset}
 	class={cn(
-		"focus:bg-accent focus:text-accent-foreground rounded-xs outline-hidden relative flex cursor-default select-none items-center gap-2 py-1.5 pl-8 pr-2 text-sm data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm data-disabled:opacity-50 data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}
 >
 	{#snippet children({ checked })}
-		<span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+		<span
+			class="left-1.5 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center"
+		>
 			{#if checked}
-				<CircleIcon class="size-2 fill-current" />
+				<CheckIcon  />
 			{/if}
 		</span>
 		{@render childrenProp?.({ checked })}
diff --git a/website/src/lib/components/ui/menubar/menubar-shortcut.svelte b/website/src/lib/components/ui/menubar/menubar-shortcut.svelte
index 0e08313d8..4307ac87c 100644
--- a/website/src/lib/components/ui/menubar/menubar-shortcut.svelte
+++ b/website/src/lib/components/ui/menubar/menubar-shortcut.svelte
@@ -13,7 +13,7 @@
 <span
 	bind:this={ref}
 	data-slot="menubar-shortcut"
-	class={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
+	class={cn("text-muted-foreground group-focus/menubar-item:text-accent-foreground text-xs tracking-widest ml-auto", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/website/src/lib/components/ui/menubar/menubar-sub-content.svelte b/website/src/lib/components/ui/menubar/menubar-sub-content.svelte
index cb4d04c0e..52763034c 100644
--- a/website/src/lib/components/ui/menubar/menubar-sub-content.svelte
+++ b/website/src/lib/components/ui/menubar/menubar-sub-content.svelte
@@ -12,9 +12,6 @@
 <MenubarPrimitive.SubContent
 	bind:ref
 	data-slot="menubar-sub-content"
-	class={cn(
-		"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--bits-menubar-content-transform-origin) z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg",
-		className
-	)}
+	class={cn("bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-lg p-1 shadow-lg ring-1 duration-100", className)}
 	{...restProps}
 />
diff --git a/website/src/lib/components/ui/menubar/menubar-sub-trigger.svelte b/website/src/lib/components/ui/menubar/menubar-sub-trigger.svelte
index 4f9f28a3d..bc14b1cd6 100644
--- a/website/src/lib/components/ui/menubar/menubar-sub-trigger.svelte
+++ b/website/src/lib/components/ui/menubar/menubar-sub-trigger.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Menubar as MenubarPrimitive } from "bits-ui";
-	import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
 	import { cn, type WithoutChild } from "$lib/utils.js";
+	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
 
 	let {
 		ref = $bindable(null),
@@ -19,11 +19,11 @@
 	data-slot="menubar-sub-trigger"
 	data-inset={inset}
 	class={cn(
-		"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[inset]:pl-8",
+		"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-none select-none",
 		className
 	)}
 	{...restProps}
 >
 	{@render children?.()}
-	<ChevronRightIcon class="ml-auto size-4" />
+	<ChevronRightIcon class="cn-rtl-flip ml-auto size-4" />
 </MenubarPrimitive.SubTrigger>
diff --git a/website/src/lib/components/ui/menubar/menubar-sub.svelte b/website/src/lib/components/ui/menubar/menubar-sub.svelte
new file mode 100644
index 000000000..82f962edf
--- /dev/null
+++ b/website/src/lib/components/ui/menubar/menubar-sub.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Menubar as MenubarPrimitive } from "bits-ui";
+
+	let { open = $bindable(false), ...restProps }: MenubarPrimitive.SubProps = $props();
+</script>
+
+<MenubarPrimitive.Sub bind:open {...restProps} />
diff --git a/website/src/lib/components/ui/menubar/menubar-trigger.svelte b/website/src/lib/components/ui/menubar/menubar-trigger.svelte
index 1c3dd6a05..054d0e1a2 100644
--- a/website/src/lib/components/ui/menubar/menubar-trigger.svelte
+++ b/website/src/lib/components/ui/menubar/menubar-trigger.svelte
@@ -12,9 +12,6 @@
 <MenubarPrimitive.Trigger
 	bind:ref
 	data-slot="menubar-trigger"
-	class={cn(
-		"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground outline-hidden flex select-none items-center rounded-sm px-2 py-1 text-sm font-medium",
-		className
-	)}
+	class={cn("hover:bg-muted aria-expanded:bg-muted rounded-sm px-1.5 py-[2px] text-sm font-medium flex items-center outline-hidden select-none", className)}
 	{...restProps}
 />
diff --git a/website/src/lib/components/ui/menubar/menubar.svelte b/website/src/lib/components/ui/menubar/menubar.svelte
index 37e02063c..0ddea2663 100644
--- a/website/src/lib/components/ui/menubar/menubar.svelte
+++ b/website/src/lib/components/ui/menubar/menubar.svelte
@@ -12,9 +12,6 @@
 <MenubarPrimitive.Root
 	bind:ref
 	data-slot="menubar"
-	class={cn(
-		"bg-background shadow-xs flex h-9 items-center gap-1 rounded-md border p-1",
-		className
-	)}
+	class={cn("h-8 gap-0.5 rounded-lg border p-[3px] flex items-center", className)}
 	{...restProps}
 />
diff --git a/website/src/lib/components/ui/popover/index.ts b/website/src/lib/components/ui/popover/index.ts
index 9f30922f7..5f1803639 100644
--- a/website/src/lib/components/ui/popover/index.ts
+++ b/website/src/lib/components/ui/popover/index.ts
@@ -1,17 +1,28 @@
-import { Popover as PopoverPrimitive } from "bits-ui";
+import Root from "./popover.svelte";
+import Close from "./popover-close.svelte";
 import Content from "./popover-content.svelte";
+import Description from "./popover-description.svelte";
+import Header from "./popover-header.svelte";
+import Title from "./popover-title.svelte";
 import Trigger from "./popover-trigger.svelte";
-const Root = PopoverPrimitive.Root;
-const Close = PopoverPrimitive.Close;
+import Portal from "./popover-portal.svelte";
 
 export {
 	Root,
 	Content,
+	Description,
+	Header,
+	Title,
 	Trigger,
 	Close,
+	Portal,
 	//
 	Root as Popover,
 	Content as PopoverContent,
+	Description as PopoverDescription,
+	Header as PopoverHeader,
+	Title as PopoverTitle,
 	Trigger as PopoverTrigger,
 	Close as PopoverClose,
+	Portal as PopoverPortal,
 };
diff --git a/website/src/lib/components/ui/popover/popover-close.svelte b/website/src/lib/components/ui/popover/popover-close.svelte
new file mode 100644
index 000000000..c360925ac
--- /dev/null
+++ b/website/src/lib/components/ui/popover/popover-close.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Popover as PopoverPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: PopoverPrimitive.CloseProps = $props();
+</script>
+
+<PopoverPrimitive.Close bind:ref data-slot="popover-close" {...restProps} />
diff --git a/website/src/lib/components/ui/popover/popover-content.svelte b/website/src/lib/components/ui/popover/popover-content.svelte
index 9bced7aa5..dd9a38f8e 100644
--- a/website/src/lib/components/ui/popover/popover-content.svelte
+++ b/website/src/lib/components/ui/popover/popover-content.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
-	import { cn } from "$lib/utils.js";
 	import { Popover as PopoverPrimitive } from "bits-ui";
+	import PopoverPortal from "./popover-portal.svelte";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
 
 	let {
 		ref = $bindable(null),
@@ -10,20 +12,20 @@
 		portalProps,
 		...restProps
 	}: PopoverPrimitive.ContentProps & {
-		portalProps?: PopoverPrimitive.PortalProps;
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof PopoverPortal>>;
 	} = $props();
 </script>
 
-<PopoverPrimitive.Portal {...portalProps}>
+<PopoverPortal {...portalProps}>
 	<PopoverPrimitive.Content
 		bind:ref
 		data-slot="popover-content"
 		{sideOffset}
 		{align}
 		class={cn(
-			"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--bits-popover-content-transform-origin) outline-hidden z-50 w-72 rounded-md border p-4 shadow-md",
+			"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 flex flex-col gap-2.5 rounded-lg p-2.5 text-sm shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 w-72 origin-(--transform-origin) outline-hidden",
 			className
 		)}
 		{...restProps}
 	/>
-</PopoverPrimitive.Portal>
+</PopoverPortal>
diff --git a/website/src/lib/components/ui/popover/popover-description.svelte b/website/src/lib/components/ui/popover/popover-description.svelte
new file mode 100644
index 000000000..c28ab236e
--- /dev/null
+++ b/website/src/lib/components/ui/popover/popover-description.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="popover-description"
+	class={cn("text-muted-foreground", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/website/src/lib/components/ui/popover/popover-header.svelte b/website/src/lib/components/ui/popover/popover-header.svelte
new file mode 100644
index 000000000..69b85b1ae
--- /dev/null
+++ b/website/src/lib/components/ui/popover/popover-header.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="popover-header"
+	class={cn("flex flex-col gap-0.5 text-sm", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/website/src/lib/components/ui/popover/popover-portal.svelte b/website/src/lib/components/ui/popover/popover-portal.svelte
new file mode 100644
index 000000000..dd8265fe8
--- /dev/null
+++ b/website/src/lib/components/ui/popover/popover-portal.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Popover as PopoverPrimitive } from "bits-ui";
+
+	let { ...restProps }: PopoverPrimitive.PortalProps = $props();
+</script>
+
+<PopoverPrimitive.Portal {...restProps} />
diff --git a/website/src/lib/components/ui/popover/popover-title.svelte b/website/src/lib/components/ui/popover/popover-title.svelte
new file mode 100644
index 000000000..ee9f2ff54
--- /dev/null
+++ b/website/src/lib/components/ui/popover/popover-title.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="popover-title"
+	class={cn("font-medium", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/website/src/lib/components/ui/popover/popover.svelte b/website/src/lib/components/ui/popover/popover.svelte
new file mode 100644
index 000000000..6b1aa5f99
--- /dev/null
+++ b/website/src/lib/components/ui/popover/popover.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Popover as PopoverPrimitive } from "bits-ui";
+
+	let { open = $bindable(false), ...restProps }: PopoverPrimitive.RootProps = $props();
+</script>
+
+<PopoverPrimitive.Root bind:open {...restProps} />
diff --git a/website/src/lib/components/ui/radio-group/radio-group-item.svelte b/website/src/lib/components/ui/radio-group/radio-group-item.svelte
index 2cb0710b4..e27c3b0cf 100644
--- a/website/src/lib/components/ui/radio-group/radio-group-item.svelte
+++ b/website/src/lib/components/ui/radio-group/radio-group-item.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { RadioGroup as RadioGroupPrimitive } from "bits-ui";
-	import CircleIcon from "@lucide/svelte/icons/circle";
+	import CircleIcon from '@lucide/svelte/icons/circle';
 	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
 
 	let {
@@ -14,17 +14,15 @@
 	bind:ref
 	data-slot="radio-group-item"
 	class={cn(
-		"border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 shadow-xs aspect-square size-4 shrink-0 rounded-full border outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+		"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 dark:aria-invalid:border-destructive/50 flex size-4 rounded-full focus-visible:ring-3 aria-invalid:ring-3 group/radio-group-item peer relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50",
 		className
 	)}
 	{...restProps}
 >
 	{#snippet children({ checked })}
-		<div data-slot="radio-group-indicator" class="relative flex items-center justify-center">
+		<div data-slot="radio-group-indicator" class="flex size-4 items-center justify-center">
 			{#if checked}
-				<CircleIcon
-					class="fill-primary absolute left-1/2 top-1/2 size-2 -translate-x-1/2 -translate-y-1/2"
-				/>
+				<CircleIcon class="bg-primary-foreground absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full" />
 			{/if}
 		</div>
 	{/snippet}
diff --git a/website/src/lib/components/ui/radio-group/radio-group.svelte b/website/src/lib/components/ui/radio-group/radio-group.svelte
index da2912b04..9d3dd8649 100644
--- a/website/src/lib/components/ui/radio-group/radio-group.svelte
+++ b/website/src/lib/components/ui/radio-group/radio-group.svelte
@@ -14,6 +14,6 @@
 	bind:ref
 	bind:value
 	data-slot="radio-group"
-	class={cn("grid gap-3", className)}
+	class={cn("grid gap-2 w-full", className)}
 	{...restProps}
 />
diff --git a/website/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte b/website/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte
index 412744467..b9518f368 100644
--- a/website/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte
+++ b/website/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte
@@ -14,11 +14,10 @@
 <ScrollAreaPrimitive.Scrollbar
 	bind:ref
 	data-slot="scroll-area-scrollbar"
+	data-orientation={orientation}
 	{orientation}
 	class={cn(
-		"flex touch-none select-none p-px transition-colors",
-		orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent",
-		orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent",
+		"data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent flex touch-none p-px transition-colors select-none",
 		className
 	)}
 	{...restProps}
@@ -26,6 +25,6 @@
 	{@render children?.()}
 	<ScrollAreaPrimitive.Thumb
 		data-slot="scroll-area-thumb"
-		class="bg-border relative flex-1 rounded-full"
+		class="rounded-full bg-border relative flex-1"
 	/>
 </ScrollAreaPrimitive.Scrollbar>
diff --git a/website/src/lib/components/ui/scroll-area/scroll-area.svelte b/website/src/lib/components/ui/scroll-area/scroll-area.svelte
index 38a1847f5..d4d96d0f3 100644
--- a/website/src/lib/components/ui/scroll-area/scroll-area.svelte
+++ b/website/src/lib/components/ui/scroll-area/scroll-area.svelte
@@ -5,6 +5,7 @@
 
 	let {
 		ref = $bindable(null),
+		viewportRef = $bindable(null),
 		class: className,
 		orientation = "vertical",
 		scrollbarXClasses = "",
@@ -15,6 +16,7 @@
 		orientation?: "vertical" | "horizontal" | "both" | undefined;
 		scrollbarXClasses?: string | undefined;
 		scrollbarYClasses?: string | undefined;
+		viewportRef?: HTMLElement | null;
 	} = $props();
 </script>
 
@@ -25,8 +27,9 @@
 	{...restProps}
 >
 	<ScrollAreaPrimitive.Viewport
+		bind:ref={viewportRef}
 		data-slot="scroll-area-viewport"
-		class="ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] focus-visible:outline-1 focus-visible:ring-4"
+		class="cn-scroll-area-viewport focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
 	>
 		{@render children?.()}
 	</ScrollAreaPrimitive.Viewport>
diff --git a/website/src/lib/components/ui/select/index.ts b/website/src/lib/components/ui/select/index.ts
index 9e8d3e903..4dec358b1 100644
--- a/website/src/lib/components/ui/select/index.ts
+++ b/website/src/lib/components/ui/select/index.ts
@@ -1,5 +1,4 @@
-import { Select as SelectPrimitive } from "bits-ui";
-
+import Root from "./select.svelte";
 import Group from "./select-group.svelte";
 import Label from "./select-label.svelte";
 import Item from "./select-item.svelte";
@@ -9,8 +8,7 @@ import Separator from "./select-separator.svelte";
 import ScrollDownButton from "./select-scroll-down-button.svelte";
 import ScrollUpButton from "./select-scroll-up-button.svelte";
 import GroupHeading from "./select-group-heading.svelte";
-
-const Root = SelectPrimitive.Root;
+import Portal from "./select-portal.svelte";
 
 export {
 	Root,
@@ -23,6 +21,7 @@ export {
 	ScrollDownButton,
 	ScrollUpButton,
 	GroupHeading,
+	Portal,
 	//
 	Root as Select,
 	Group as SelectGroup,
@@ -34,4 +33,5 @@ export {
 	ScrollDownButton as SelectScrollDownButton,
 	ScrollUpButton as SelectScrollUpButton,
 	GroupHeading as SelectGroupHeading,
+	Portal as SelectPortal,
 };
diff --git a/website/src/lib/components/ui/select/select-content.svelte b/website/src/lib/components/ui/select/select-content.svelte
index dc16d65dd..bb1e2ac20 100644
--- a/website/src/lib/components/ui/select/select-content.svelte
+++ b/website/src/lib/components/ui/select/select-content.svelte
@@ -1,8 +1,11 @@
 <script lang="ts">
 	import { Select as SelectPrimitive } from "bits-ui";
+	import SelectPortal from "./select-portal.svelte";
 	import SelectScrollUpButton from "./select-scroll-up-button.svelte";
 	import SelectScrollDownButton from "./select-scroll-down-button.svelte";
 	import { cn, type WithoutChild } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
+	import type { WithoutChildrenOrChild } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -10,19 +13,21 @@
 		sideOffset = 4,
 		portalProps,
 		children,
+		preventScroll = true,
 		...restProps
 	}: WithoutChild<SelectPrimitive.ContentProps> & {
-		portalProps?: SelectPrimitive.PortalProps;
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof SelectPortal>>;
 	} = $props();
 </script>
 
-<SelectPrimitive.Portal {...portalProps}>
+<SelectPortal {...portalProps}>
 	<SelectPrimitive.Content
 		bind:ref
 		{sideOffset}
+		{preventScroll}
 		data-slot="select-content"
 		class={cn(
-			"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 max-h-(--bits-select-content-available-height) origin-(--bits-select-content-transform-origin) relative z-50 min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border shadow-md data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+			"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-lg shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 relative isolate z-50 overflow-x-hidden overflow-y-auto",
 			className
 		)}
 		{...restProps}
@@ -30,11 +35,11 @@
 		<SelectScrollUpButton />
 		<SelectPrimitive.Viewport
 			class={cn(
-				"h-(--bits-select-anchor-height) min-w-(--bits-select-anchor-width) w-full scroll-my-1 p-1"
+				"h-(--bits-select-anchor-height) w-full min-w-(--bits-select-anchor-width) scroll-my-1"
 			)}
 		>
 			{@render children?.()}
 		</SelectPrimitive.Viewport>
 		<SelectScrollDownButton />
 	</SelectPrimitive.Content>
-</SelectPrimitive.Portal>
+</SelectPortal>
diff --git a/website/src/lib/components/ui/select/select-group.svelte b/website/src/lib/components/ui/select/select-group.svelte
index 5454fdb39..f666cb222 100644
--- a/website/src/lib/components/ui/select/select-group.svelte
+++ b/website/src/lib/components/ui/select/select-group.svelte
@@ -1,7 +1,17 @@
 <script lang="ts">
 	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
-	let { ref = $bindable(null), ...restProps }: SelectPrimitive.GroupProps = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: SelectPrimitive.GroupProps = $props();
 </script>
 
-<SelectPrimitive.Group data-slot="select-group" {...restProps} />
+<SelectPrimitive.Group
+	bind:ref
+	data-slot="select-group"
+	class={cn("scroll-my-1 p-1", className)}
+	{...restProps}
+/>
diff --git a/website/src/lib/components/ui/select/select-item.svelte b/website/src/lib/components/ui/select/select-item.svelte
index 49dbbd7fa..32fd5ce5c 100644
--- a/website/src/lib/components/ui/select/select-item.svelte
+++ b/website/src/lib/components/ui/select/select-item.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import CheckIcon from "@lucide/svelte/icons/check";
 	import { Select as SelectPrimitive } from "bits-ui";
 	import { cn, type WithoutChild } from "$lib/utils.js";
+	import CheckIcon from '@lucide/svelte/icons/check';
 
 	let {
 		ref = $bindable(null),
@@ -18,15 +18,15 @@
 	{value}
 	data-slot="select-item"
 	class={cn(
-		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground outline-hidden *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default select-none items-center gap-2 rounded-sm py-1.5 pl-2 pr-8 text-sm data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 focus:bg-accent data-highlighted:bg-accent data-highlighted:text-accent-foreground focus:text-accent-foreground relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}
 >
 	{#snippet children({ selected, highlighted })}
-		<span class="absolute right-2 flex size-3.5 items-center justify-center">
+		<span class="absolute end-2 flex size-3.5 items-center justify-center">
 			{#if selected}
-				<CheckIcon class="size-4" />
+				<CheckIcon class="cn-select-item-indicator-icon" />
 			{/if}
 		</span>
 		{#if childrenProp}
diff --git a/website/src/lib/components/ui/select/select-label.svelte b/website/src/lib/components/ui/select/select-label.svelte
index 46960259f..69bcfdfe2 100644
--- a/website/src/lib/components/ui/select/select-label.svelte
+++ b/website/src/lib/components/ui/select/select-label.svelte
@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="select-label"
-	class={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+	class={cn("text-muted-foreground px-1.5 py-1 text-xs", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/website/src/lib/components/ui/select/select-portal.svelte b/website/src/lib/components/ui/select/select-portal.svelte
new file mode 100644
index 000000000..424bcddcc
--- /dev/null
+++ b/website/src/lib/components/ui/select/select-portal.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+
+	let { ...restProps }: SelectPrimitive.PortalProps = $props();
+</script>
+
+<SelectPrimitive.Portal {...restProps} />
diff --git a/website/src/lib/components/ui/select/select-scroll-down-button.svelte b/website/src/lib/components/ui/select/select-scroll-down-button.svelte
index 362920582..94f41cdd5 100644
--- a/website/src/lib/components/ui/select/select-scroll-down-button.svelte
+++ b/website/src/lib/components/ui/select/select-scroll-down-button.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
 	import { Select as SelectPrimitive } from "bits-ui";
 	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
 
 	let {
 		ref = $bindable(null),
@@ -13,8 +13,8 @@
 <SelectPrimitive.ScrollDownButton
 	bind:ref
 	data-slot="select-scroll-down-button"
-	class={cn("flex cursor-default items-center justify-center py-1", className)}
+	class={cn("bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 bottom-0 w-full", className)}
 	{...restProps}
 >
-	<ChevronDownIcon class="size-4" />
+	<ChevronDownIcon  />
 </SelectPrimitive.ScrollDownButton>
diff --git a/website/src/lib/components/ui/select/select-scroll-up-button.svelte b/website/src/lib/components/ui/select/select-scroll-up-button.svelte
index 1aa2300c9..035ea0943 100644
--- a/website/src/lib/components/ui/select/select-scroll-up-button.svelte
+++ b/website/src/lib/components/ui/select/select-scroll-up-button.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import ChevronUpIcon from "@lucide/svelte/icons/chevron-up";
 	import { Select as SelectPrimitive } from "bits-ui";
 	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import ChevronUpIcon from '@lucide/svelte/icons/chevron-up';
 
 	let {
 		ref = $bindable(null),
@@ -13,8 +13,8 @@
 <SelectPrimitive.ScrollUpButton
 	bind:ref
 	data-slot="select-scroll-up-button"
-	class={cn("flex cursor-default items-center justify-center py-1", className)}
+	class={cn("bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 top-0 w-full", className)}
 	{...restProps}
 >
-	<ChevronUpIcon class="size-4" />
+	<ChevronUpIcon  />
 </SelectPrimitive.ScrollUpButton>
diff --git a/website/src/lib/components/ui/select/select-separator.svelte b/website/src/lib/components/ui/select/select-separator.svelte
index 0eac3ebc5..3b24bab67 100644
--- a/website/src/lib/components/ui/select/select-separator.svelte
+++ b/website/src/lib/components/ui/select/select-separator.svelte
@@ -13,6 +13,6 @@
 <Separator
 	bind:ref
 	data-slot="select-separator"
-	class={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+	class={cn("bg-border -mx-1 my-1 h-px pointer-events-none", className)}
 	{...restProps}
 />
diff --git a/website/src/lib/components/ui/select/select-trigger.svelte b/website/src/lib/components/ui/select/select-trigger.svelte
index d405187db..03d06d0fd 100644
--- a/website/src/lib/components/ui/select/select-trigger.svelte
+++ b/website/src/lib/components/ui/select/select-trigger.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Select as SelectPrimitive } from "bits-ui";
-	import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
 	import { cn, type WithoutChild } from "$lib/utils.js";
+	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
 
 	let {
 		ref = $bindable(null),
@@ -19,11 +19,11 @@
 	data-slot="select-trigger"
 	data-size={size}
 	class={cn(
-		"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 shadow-xs flex w-fit select-none items-center justify-between gap-2 whitespace-nowrap rounded-md border bg-transparent px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		"border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}
 >
 	{@render children?.()}
-	<ChevronDownIcon class="size-4 opacity-50" />
+	<ChevronDownIcon class="text-muted-foreground size-4 pointer-events-none" />
 </SelectPrimitive.Trigger>
diff --git a/website/src/lib/components/ui/select/select.svelte b/website/src/lib/components/ui/select/select.svelte
new file mode 100644
index 000000000..05eb6634e
--- /dev/null
+++ b/website/src/lib/components/ui/select/select.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+
+	let {
+		open = $bindable(false),
+		value = $bindable(),
+		...restProps
+	}: SelectPrimitive.RootProps = $props();
+</script>
+
+<SelectPrimitive.Root bind:open bind:value={value as never} {...restProps} />
diff --git a/website/src/lib/components/ui/separator/separator.svelte b/website/src/lib/components/ui/separator/separator.svelte
index 89b2695b5..5fd8a4290 100644
--- a/website/src/lib/components/ui/separator/separator.svelte
+++ b/website/src/lib/components/ui/separator/separator.svelte
@@ -14,7 +14,9 @@
 	bind:ref
 	data-slot={dataSlot}
 	class={cn(
-		"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px",
+		"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px",
+		// this is different in shadcn/ui but self-stretch breaks things for us
+		"data-[orientation=vertical]:h-full",
 		className
 	)}
 	{...restProps}
diff --git a/website/src/lib/components/ui/sheet/index.ts b/website/src/lib/components/ui/sheet/index.ts
index 01d40c80b..28d7da1c7 100644
--- a/website/src/lib/components/ui/sheet/index.ts
+++ b/website/src/lib/components/ui/sheet/index.ts
@@ -1,4 +1,5 @@
-import { Dialog as SheetPrimitive } from "bits-ui";
+import Root from "./sheet.svelte";
+import Portal from "./sheet-portal.svelte";
 import Trigger from "./sheet-trigger.svelte";
 import Close from "./sheet-close.svelte";
 import Overlay from "./sheet-overlay.svelte";
@@ -8,9 +9,6 @@ import Footer from "./sheet-footer.svelte";
 import Title from "./sheet-title.svelte";
 import Description from "./sheet-description.svelte";
 
-const Root = SheetPrimitive.Root;
-const Portal = SheetPrimitive.Portal;
-
 export {
 	Root,
 	Close,
diff --git a/website/src/lib/components/ui/sheet/sheet-content.svelte b/website/src/lib/components/ui/sheet/sheet-content.svelte
index 856922ea3..20957dccb 100644
--- a/website/src/lib/components/ui/sheet/sheet-content.svelte
+++ b/website/src/lib/components/ui/sheet/sheet-content.svelte
@@ -1,58 +1,55 @@
 <script lang="ts" module>
-	import { tv, type VariantProps } from "tailwind-variants";
-	export const sheetVariants = tv({
-		base: "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
-		variants: {
-			side: {
-				top: "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
-				bottom: "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
-				left: "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
-				right: "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
-			},
-		},
-		defaultVariants: {
-			side: "right",
-		},
-	});
-
-	export type Side = VariantProps<typeof sheetVariants>["side"];
+	export type Side = "top" | "right" | "bottom" | "left";
 </script>
 
 <script lang="ts">
 	import { Dialog as SheetPrimitive } from "bits-ui";
-	import XIcon from "@lucide/svelte/icons/x";
 	import type { Snippet } from "svelte";
+	import SheetPortal from "./sheet-portal.svelte";
 	import SheetOverlay from "./sheet-overlay.svelte";
+	import { Button } from "$lib/components/ui/button/index.js";
+	import XIcon from '@lucide/svelte/icons/x';
 	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		side = "right",
+		showCloseButton = true,
 		portalProps,
 		children,
 		...restProps
 	}: WithoutChildrenOrChild<SheetPrimitive.ContentProps> & {
-		portalProps?: SheetPrimitive.PortalProps;
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof SheetPortal>>;
 		side?: Side;
+		showCloseButton?: boolean;
 		children: Snippet;
 	} = $props();
 </script>
 
-<SheetPrimitive.Portal {...portalProps}>
+<SheetPortal {...portalProps}>
 	<SheetOverlay />
 	<SheetPrimitive.Content
 		bind:ref
 		data-slot="sheet-content"
-		class={cn(sheetVariants({ side }), className)}
+		data-side={side}
+		class={cn(
+			"bg-popover text-popover-foreground fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10",
+			className
+		)}
 		{...restProps}
 	>
 		{@render children?.()}
-		<SheetPrimitive.Close
-			class="ring-offset-background focus-visible:ring-ring rounded-xs focus-visible:outline-hidden absolute right-4 top-4 opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none"
-		>
-			<XIcon class="size-4" />
-			<span class="sr-only">Close</span>
-		</SheetPrimitive.Close>
+		{#if showCloseButton}
+			<SheetPrimitive.Close data-slot="sheet-close">
+				{#snippet child({ props })}
+					<Button variant="ghost" class="absolute top-3 right-3" size="icon-sm" {...props}>
+						<XIcon  />
+						<span class="sr-only">Close</span>
+					</Button>
+				{/snippet}
+			</SheetPrimitive.Close>
+		{/if}
 	</SheetPrimitive.Content>
-</SheetPrimitive.Portal>
+</SheetPortal>
diff --git a/website/src/lib/components/ui/sheet/sheet-footer.svelte b/website/src/lib/components/ui/sheet/sheet-footer.svelte
index dd9ed84b0..ad9e07bba 100644
--- a/website/src/lib/components/ui/sheet/sheet-footer.svelte
+++ b/website/src/lib/components/ui/sheet/sheet-footer.svelte
@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="sheet-footer"
-	class={cn("mt-auto flex flex-col gap-2 p-4", className)}
+	class={cn("gap-2 p-4 mt-auto flex flex-col", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/website/src/lib/components/ui/sheet/sheet-header.svelte b/website/src/lib/components/ui/sheet/sheet-header.svelte
index 757a6a566..504465f90 100644
--- a/website/src/lib/components/ui/sheet/sheet-header.svelte
+++ b/website/src/lib/components/ui/sheet/sheet-header.svelte
@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="sheet-header"
-	class={cn("flex flex-col gap-1.5 p-4", className)}
+	class={cn("gap-0.5 p-4 flex flex-col", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/website/src/lib/components/ui/sheet/sheet-overlay.svelte b/website/src/lib/components/ui/sheet/sheet-overlay.svelte
index 345e197bd..8d3384748 100644
--- a/website/src/lib/components/ui/sheet/sheet-overlay.svelte
+++ b/website/src/lib/components/ui/sheet/sheet-overlay.svelte
@@ -12,9 +12,6 @@
 <SheetPrimitive.Overlay
 	bind:ref
 	data-slot="sheet-overlay"
-	class={cn(
-		"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-		className
-	)}
+	class={cn("bg-black/10 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50", className)}
 	{...restProps}
 />
diff --git a/website/src/lib/components/ui/sheet/sheet-portal.svelte b/website/src/lib/components/ui/sheet/sheet-portal.svelte
index 5543a3b38..f3085a3cd 100644
--- a/website/src/lib/components/ui/sheet/sheet-portal.svelte
+++ b/website/src/lib/components/ui/sheet/sheet-portal.svelte
@@ -1,13 +1,7 @@
 <script lang="ts">
 	import { Dialog as SheetPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
 
-	type $$Props = SheetPrimitive.PortalProps;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+	let { ...restProps }: SheetPrimitive.PortalProps = $props();
 </script>
 
-<SheetPrimitive.Portal class={cn(className)} {...$$restProps}>
-	<slot />
-</SheetPrimitive.Portal>
+<SheetPrimitive.Portal {...restProps} />
diff --git a/website/src/lib/components/ui/sheet/sheet-title.svelte b/website/src/lib/components/ui/sheet/sheet-title.svelte
index 9fda327e9..10c17178a 100644
--- a/website/src/lib/components/ui/sheet/sheet-title.svelte
+++ b/website/src/lib/components/ui/sheet/sheet-title.svelte
@@ -12,6 +12,6 @@
 <SheetPrimitive.Title
 	bind:ref
 	data-slot="sheet-title"
-	class={cn("text-foreground font-semibold", className)}
+	class={cn("text-foreground text-base font-medium", className)}
 	{...restProps}
 />
diff --git a/website/src/lib/components/ui/sheet/sheet.svelte b/website/src/lib/components/ui/sheet/sheet.svelte
new file mode 100644
index 000000000..5bf978391
--- /dev/null
+++ b/website/src/lib/components/ui/sheet/sheet.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from "bits-ui";
+
+	let { open = $bindable(false), ...restProps }: SheetPrimitive.RootProps = $props();
+</script>
+
+<SheetPrimitive.Root bind:open {...restProps} />
diff --git a/website/src/lib/components/ui/slider/slider.svelte b/website/src/lib/components/ui/slider/slider.svelte
index b06e110b8..bb6dfdc18 100644
--- a/website/src/lib/components/ui/slider/slider.svelte
+++ b/website/src/lib/components/ui/slider/slider.svelte
@@ -21,31 +21,31 @@ get along, so we shut typescript up by casting `value` to `never`.
 	data-slot="slider"
 	{orientation}
 	class={cn(
-		"relative flex w-full touch-none select-none items-center data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col data-[disabled]:opacity-50",
+		"data-vertical:min-h-40 relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:w-auto data-vertical:flex-col",
 		className
 	)}
 	{...restProps}
 >
-	{#snippet children({ thumbs })}
+	{#snippet children({ thumbItems })}
 		<span
-			data-orientation={orientation}
 			data-slot="slider-track"
+			data-orientation={orientation}
 			class={cn(
-				"bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-1.5"
+				"h-1.5 bg-muted rounded-full data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1 bg-muted relative grow overflow-hidden data-horizontal:w-full data-vertical:h-full"
 			)}
 		>
 			<SliderPrimitive.Range
 				data-slot="slider-range"
 				class={cn(
-					"bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+					"h-full bg-black absolute select-none data-horizontal:h-full data-vertical:w-full"
 				)}
 			/>
 		</span>
-		{#each thumbs as thumb (thumb)}
+		{#each thumbItems as thumb (thumb)}
 			<SliderPrimitive.Thumb
 				data-slot="slider-thumb"
-				index={thumb}
-				class="border-primary bg-background ring-ring/50 focus-visible:outline-hidden block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 disabled:pointer-events-none disabled:opacity-50"
+				index={thumb.index}
+				class="border-ring ring-ring/50 relative size-4 rounded-full border bg-white transition-[color,box-shadow] after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 block shrink-0 select-none disabled:pointer-events-none disabled:opacity-50"
 			/>
 		{/each}
 	{/snippet}
diff --git a/website/src/lib/components/ui/sonner/sonner.svelte b/website/src/lib/components/ui/sonner/sonner.svelte
index 1f50e1e73..34b456de8 100644
--- a/website/src/lib/components/ui/sonner/sonner.svelte
+++ b/website/src/lib/components/ui/sonner/sonner.svelte
@@ -1,6 +1,11 @@
 <script lang="ts">
 	import { Toaster as Sonner, type ToasterProps as SonnerProps } from "svelte-sonner";
 	import { mode } from "mode-watcher";
+	import Loader2Icon from '@lucide/svelte/icons/loader-2';
+	import CircleCheckIcon from '@lucide/svelte/icons/circle-check';
+	import OctagonXIcon from '@lucide/svelte/icons/octagon-x';
+	import InfoIcon from '@lucide/svelte/icons/info';
+	import TriangleAlertIcon from '@lucide/svelte/icons/triangle-alert';
 
 	let { ...restProps }: SonnerProps = $props();
 </script>
@@ -10,4 +15,20 @@
 	class="toaster group"
 	style="--normal-bg: var(--color-popover); --normal-text: var(--color-popover-foreground); --normal-border: var(--color-border);"
 	{...restProps}
-/>
+>
+	{#snippet loadingIcon()}
+		<Loader2Icon class="size-4 animate-spin" />
+	{/snippet}
+	{#snippet successIcon()}
+		<CircleCheckIcon class="size-4" />
+	{/snippet}
+	{#snippet errorIcon()}
+		<OctagonXIcon class="size-4" />
+	{/snippet}
+	{#snippet infoIcon()}
+		<InfoIcon class="size-4" />
+	{/snippet}
+	{#snippet warningIcon()}
+		<TriangleAlertIcon class="size-4" />
+	{/snippet}
+</Sonner>
diff --git a/website/src/lib/components/ui/switch/switch.svelte b/website/src/lib/components/ui/switch/switch.svelte
index 78477dde9..6aa57d5b0 100644
--- a/website/src/lib/components/ui/switch/switch.svelte
+++ b/website/src/lib/components/ui/switch/switch.svelte
@@ -6,24 +6,26 @@
 		ref = $bindable(null),
 		class: className,
 		checked = $bindable(false),
+		size = "default",
 		...restProps
-	}: WithoutChildrenOrChild<SwitchPrimitive.RootProps> = $props();
+	}: WithoutChildrenOrChild<SwitchPrimitive.RootProps> & {
+		size?: "sm" | "default";
+	} = $props();
 </script>
 
 <SwitchPrimitive.Root
 	bind:ref
 	bind:checked
 	data-slot="switch"
+	data-size={size}
 	class={cn(
-		"data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 shadow-xs peer inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent outline-none transition-all focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+		"data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 shrink-0 rounded-full border border-transparent focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] peer group/switch relative inline-flex items-center transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 data-disabled:cursor-not-allowed data-disabled:opacity-50",
 		className
 	)}
 	{...restProps}
 >
 	<SwitchPrimitive.Thumb
 		data-slot="switch-thumb"
-		class={cn(
-			"bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
-		)}
+		class="bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 pointer-events-none block ring-0 transition-transform rtl:data-[state=checked]:translate-x-[calc(-100%)]"
 	/>
 </SwitchPrimitive.Root>
diff --git a/website/src/lib/components/ui/textarea/textarea.svelte b/website/src/lib/components/ui/textarea/textarea.svelte
index 7fcef1a66..2e779ff69 100644
--- a/website/src/lib/components/ui/textarea/textarea.svelte
+++ b/website/src/lib/components/ui/textarea/textarea.svelte
@@ -15,7 +15,7 @@
 	bind:this={ref}
 	data-slot={dataSlot}
 	class={cn(
-		"border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 field-sizing-content shadow-xs flex min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+		"border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors focus-visible:ring-3 aria-invalid:ring-3 md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50",
 		className
 	)}
 	bind:value
diff --git a/website/src/lib/components/ui/toggle-group/toggle-group-item.svelte b/website/src/lib/components/ui/toggle-group/toggle-group-item.svelte
index a22a114cb..f685ae316 100644
--- a/website/src/lib/components/ui/toggle-group/toggle-group-item.svelte
+++ b/website/src/lib/components/ui/toggle-group/toggle-group-item.svelte
@@ -21,12 +21,13 @@
 	data-slot="toggle-group-item"
 	data-variant={ctx.variant || variant}
 	data-size={ctx.size || size}
+	data-spacing={ctx.spacing}
 	class={cn(
+		"group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg shrink-0 focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t",
 		toggleVariants({
 			variant: ctx.variant || variant,
 			size: ctx.size || size,
 		}),
-		"min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l",
 		className
 	)}
 	{value}
diff --git a/website/src/lib/components/ui/toggle-group/toggle-group.svelte b/website/src/lib/components/ui/toggle-group/toggle-group.svelte
index 351fbd88a..98b062bb6 100644
--- a/website/src/lib/components/ui/toggle-group/toggle-group.svelte
+++ b/website/src/lib/components/ui/toggle-group/toggle-group.svelte
@@ -1,12 +1,21 @@
 <script lang="ts" module>
 	import { getContext, setContext } from "svelte";
-	import type { ToggleVariants } from "$lib/components/ui/toggle/index.js";
-	export function setToggleGroupCtx(props: ToggleVariants) {
+	import type { VariantProps } from "tailwind-variants";
+	import { toggleVariants } from "$lib/components/ui/toggle/index.js";
+
+	type ToggleVariants = VariantProps<typeof toggleVariants>;
+
+	interface ToggleGroupContext extends ToggleVariants {
+		spacing?: number;
+		orientation?: "horizontal" | "vertical";
+	}
+
+	export function setToggleGroupCtx(props: ToggleGroupContext) {
 		setContext("toggleGroup", props);
 	}
 
 	export function getToggleGroupCtx() {
-		return getContext<ToggleVariants>("toggleGroup");
+		return getContext<Required<ToggleGroupContext>>("toggleGroup");
 	}
 </script>
 
@@ -19,13 +28,29 @@
 		value = $bindable(),
 		class: className,
 		size = "default",
+		spacing = 0,
+		orientation = "horizontal",
 		variant = "default",
 		...restProps
-	}: ToggleGroupPrimitive.RootProps & ToggleVariants = $props();
+	}: ToggleGroupPrimitive.RootProps &
+		ToggleVariants & {
+			spacing?: number;
+			orientation?: "horizontal" | "vertical";
+		} = $props();
 
 	setToggleGroupCtx({
-		variant,
-		size,
+		get variant() {
+			return variant;
+		},
+		get size() {
+			return size;
+		},
+		get spacing() {
+			return spacing;
+		},
+		get orientation() {
+			return orientation;
+		},
 	});
 </script>
 
@@ -36,11 +61,14 @@ get along, so we shut typescript up by casting `value` to `never`.
 <ToggleGroupPrimitive.Root
 	bind:value={value as never}
 	bind:ref
+	{orientation}
 	data-slot="toggle-group"
 	data-variant={variant}
 	data-size={size}
+	data-spacing={spacing}
+	style={`--gap: ${spacing}`}
 	class={cn(
-		"group/toggle-group data-[variant=outline]:shadow-xs flex w-fit items-center rounded-md",
+		"rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-vertical:flex-col data-vertical:items-stretch",
 		className
 	)}
 	{...restProps}
diff --git a/website/src/lib/components/ui/toggle/toggle.svelte b/website/src/lib/components/ui/toggle/toggle.svelte
index d3b35f026..8e50317e7 100644
--- a/website/src/lib/components/ui/toggle/toggle.svelte
+++ b/website/src/lib/components/ui/toggle/toggle.svelte
@@ -2,17 +2,16 @@
 	import { type VariantProps, tv } from "tailwind-variants";
 
 	export const toggleVariants = tv({
-		base: "hover:bg-muted hover:text-muted-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		base: "hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[state=on]:bg-muted gap-1 rounded-lg text-sm font-medium transition-all [&_svg:not([class*='size-'])]:size-4 group/toggle hover:bg-muted inline-flex items-center justify-center whitespace-nowrap outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		variants: {
 			variant: {
 				default: "bg-transparent",
-				outline:
-					"border-input shadow-xs hover:bg-accent hover:text-accent-foreground border bg-transparent",
+				outline: "border-input hover:bg-muted border bg-transparent",
 			},
 			size: {
-				default: "h-9 min-w-9 px-2",
-				sm: "h-8 min-w-8 px-1.5",
-				lg: "h-10 min-w-10 px-2.5",
+				default: "h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+				sm: "h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+				lg: "h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
 			},
 		},
 		defaultVariants: {
diff --git a/website/src/lib/components/ui/tooltip/index.ts b/website/src/lib/components/ui/tooltip/index.ts
index 313a7f069..171860421 100644
--- a/website/src/lib/components/ui/tooltip/index.ts
+++ b/website/src/lib/components/ui/tooltip/index.ts
@@ -1,10 +1,8 @@
-import { Tooltip as TooltipPrimitive } from "bits-ui";
+import Root from "./tooltip.svelte";
 import Trigger from "./tooltip-trigger.svelte";
 import Content from "./tooltip-content.svelte";
-
-const Root = TooltipPrimitive.Root;
-const Provider = TooltipPrimitive.Provider;
-const Portal = TooltipPrimitive.Portal;
+import Provider from "./tooltip-provider.svelte";
+import Portal from "./tooltip-portal.svelte";
 
 export {
 	Root,
diff --git a/website/src/lib/components/ui/tooltip/tooltip-content.svelte b/website/src/lib/components/ui/tooltip/tooltip-content.svelte
index e495efe5f..0cf069497 100644
--- a/website/src/lib/components/ui/tooltip/tooltip-content.svelte
+++ b/website/src/lib/components/ui/tooltip/tooltip-content.svelte
@@ -1,6 +1,9 @@
 <script lang="ts">
 	import { Tooltip as TooltipPrimitive } from "bits-ui";
 	import { cn } from "$lib/utils.js";
+	import TooltipPortal from "./tooltip-portal.svelte";
+	import type { ComponentProps } from "svelte";
+	import type { WithoutChildrenOrChild } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -9,20 +12,22 @@
 		side = "top",
 		children,
 		arrowClasses,
+		portalProps,
 		...restProps
 	}: TooltipPrimitive.ContentProps & {
 		arrowClasses?: string;
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof TooltipPortal>>;
 	} = $props();
 </script>
 
-<TooltipPrimitive.Portal>
+<TooltipPortal {...portalProps}>
 	<TooltipPrimitive.Content
 		bind:ref
 		data-slot="tooltip-content"
 		{sideOffset}
 		{side}
 		class={cn(
-			"bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--bits-tooltip-content-transform-origin) z-50 w-fit text-balance rounded-md px-3 py-1.5 text-xs",
+			"data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs has-data-[slot=kbd]:pr-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm bg-foreground text-background z-50 w-fit max-w-xs origin-(--bits-tooltip-content-transform-origin)",
 			className
 		)}
 		{...restProps}
@@ -32,11 +37,11 @@
 			{#snippet child({ props })}
 				<div
 					class={cn(
-						"bg-primary z-50 size-2.5 rotate-45 rounded-[2px]",
-						"data-[side=top]:translate-x-1/2 data-[side=top]:translate-y-[calc(-50%_+_2px)]",
-						"data-[side=bottom]:-translate-x-1/2 data-[side=bottom]:-translate-y-[calc(-50%_+_1px)]",
-						"data-[side=right]:translate-x-[calc(50%_+_2px)] data-[side=right]:translate-y-1/2",
-						"data-[side=left]:-translate-y-[calc(50%_-_3px)]",
+						"size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground z-50",
+						"data-[side=top]:translate-x-1/2 data-[side=top]:translate-y-[calc(-50%+2px)]",
+						"data-[side=bottom]:-translate-x-1/2 data-[side=bottom]:-translate-y-[calc(-50%+1px)]",
+						"data-[side=right]:translate-x-[calc(50%+2px)] data-[side=right]:translate-y-1/2",
+						"data-[side=left]:-translate-y-[calc(50%-3px)]",
 						arrowClasses
 					)}
 					{...props}
@@ -44,4 +49,4 @@
 			{/snippet}
 		</TooltipPrimitive.Arrow>
 	</TooltipPrimitive.Content>
-</TooltipPrimitive.Portal>
+</TooltipPortal>
diff --git a/website/src/lib/components/ui/tooltip/tooltip-portal.svelte b/website/src/lib/components/ui/tooltip/tooltip-portal.svelte
new file mode 100644
index 000000000..d234f7d7d
--- /dev/null
+++ b/website/src/lib/components/ui/tooltip/tooltip-portal.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
+
+	let { ...restProps }: TooltipPrimitive.PortalProps = $props();
+</script>
+
+<TooltipPrimitive.Portal {...restProps} />
diff --git a/website/src/lib/components/ui/tooltip/tooltip-provider.svelte b/website/src/lib/components/ui/tooltip/tooltip-provider.svelte
new file mode 100644
index 000000000..6dba9a670
--- /dev/null
+++ b/website/src/lib/components/ui/tooltip/tooltip-provider.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
+
+	let { delayDuration = 0, ...restProps }: TooltipPrimitive.ProviderProps = $props();
+</script>
+
+<TooltipPrimitive.Provider {delayDuration} {...restProps} />
diff --git a/website/src/lib/components/ui/tooltip/tooltip.svelte b/website/src/lib/components/ui/tooltip/tooltip.svelte
new file mode 100644
index 000000000..44bee9f35
--- /dev/null
+++ b/website/src/lib/components/ui/tooltip/tooltip.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
+	import TooltipProvider from "./tooltip-provider.svelte";
+
+	let { open = $bindable(false), ...restProps }: TooltipPrimitive.RootProps = $props();
+</script>
+
+<TooltipProvider>
+	<TooltipPrimitive.Root bind:open {...restProps} />
+</TooltipProvider>
diff --git a/website/src/routes/[[language]]/+page.svelte b/website/src/routes/[[language]]/+page.svelte
index 2c0c4d8c9..c6b5bd855 100644
--- a/website/src/routes/[[language]]/+page.svelte
+++ b/website/src/routes/[[language]]/+page.svelte
@@ -213,12 +213,12 @@
             </h3>
             <p class="md:max-w-3/4">{i18n._('homepage.community_description')}</p>
             <HeartHandshake size="80" class="mt-6 self-center" />
-            <div class="flex flex-row flex-wrap gap-4 justify-center mt-6">
+            <div class="flex flex-row flex-wrap gap-x-4 gap-y-1.5 justify-center mt-6">
                 <Button
                     variant="outline"
                     href="https://opencollective.com/gpxstudio"
                     target="_blank"
-                    class="text-support text-base max-w-full h-auto whitespace-normal"
+                    class="text-support py-1.5 text-base max-w-full h-auto whitespace-normal"
                 >
                     <span>{i18n._('homepage.support_button')}</span>
                     <Heart size="16" fill="var(--support)" color="var(--support)" />
@@ -227,7 +227,7 @@
                     variant="outline"
                     href="https://crowdin.com/project/gpxstudio"
                     target="_blank"
-                    class="text-base max-w-full h-auto whitespace-normal"
+                    class="text-base py-1.5 max-w-full h-auto whitespace-normal"
                 >
                     <Languages size="16" />
                     <span>{i18n._('homepage.translate_button')}</span>
diff --git a/website/src/routes/[[language]]/help/+layout.svelte b/website/src/routes/[[language]]/help/+layout.svelte
index 2d2504231..bc012963e 100644
--- a/website/src/routes/[[language]]/help/+layout.svelte
+++ b/website/src/routes/[[language]]/help/+layout.svelte
@@ -28,7 +28,7 @@
                 <Button
                     variant="link"
                     href={getURLForLanguage(i18n.lang, `/help/${guide}`)}
-                    class="min-h-5 h-fit p-0 w-fit text-muted-foreground hover:text-foreground hover:no-underline font-normal hover:font-semibold items-start whitespace-normal {page
+                    class="min-h-5 h-fit p-0 w-fit border-none text-muted-foreground hover:text-foreground hover:no-underline font-normal hover:font-semibold items-start whitespace-normal {page
                         .params.guide === guide
                         ? 'font-semibold text-foreground'
                         : ''}"
@@ -39,7 +39,7 @@
                     <Button
                         variant="link"
                         href={getURLForLanguage(i18n.lang, `/help/${guide}/${subGuide}`)}
-                        class="min-h-5 h-fit p-0 w-fit text-muted-foreground hover:text-foreground hover:no-underline font-normal hover:font-semibold items-start whitespace-normal ml-3 {page
+                        class="min-h-5 h-fit p-0 w-fit border-none text-muted-foreground hover:text-foreground hover:no-underline font-normal hover:font-semibold items-start whitespace-normal ml-3 {page
                             .params.guide ===
                         guide + '/' + subGuide
                             ? 'font-semibold text-foreground'