diff --git a/src/app.postcss b/src/app.postcss
index 14a20bcb..eed22e4b 100644
--- a/src/app.postcss
+++ b/src/app.postcss
@@ -4,77 +4,52 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
 @layer base {
   :root {
     --background: 0 0% 100%;
     --foreground: 222.2 84% 4.9%;
-
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-
     --card: 0 0% 100%;
     --card-foreground: 222.2 84% 4.9%;
-
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-
-    --primary: 344 100% 61%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 222.2 47.4% 11.2%;
     --primary-foreground: 210 40% 98%;
-
-    --secondary: 248 24% 14%;
-    --secondary-foreground: 0 0% 100%;
-
+    --secondary: 338 100% 44%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
     --accent: 210 40% 96.1%;
     --accent-foreground: 222.2 47.4% 11.2%;
-
-    --destructive: 0 72.2% 50.6%;
+    --destructive: 0 72.22% 50.59%;
     --destructive-foreground: 210 40% 98%;
-
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
     --ring: 222.2 84% 4.9%;
-
-    --radius: 0.5rem;
+    --radius: 0.75rem;
   }
-
   .dark {
     --background: 222.2 84% 4.9%;
     --foreground: 210 40% 98%;
-
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-
     --card: 222.2 84% 4.9%;
     --card-foreground: 210 40% 98%;
-
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-
-    --primary: 344 100% 61%;
-    --primary-foreground: 210 40% 98%;
-
-    --secondary: 248 24% 14%;
-    --secondary-foreground: 0 0% 100%;
-
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 338 100% 44%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
     --accent: 217.2 32.6% 17.5%;
     --accent-foreground: 210 40% 98%;
-
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 210 40% 98%;
-
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
     --ring: 212.7 26.8% 83.9%;
   }
 }
 
-body {
-  font-family: 'Recursive Variable', sans-serif;
-}
-
 @layer base {
   * {
     @apply border-border;
@@ -84,6 +59,10 @@ body {
   }
 }
 
+body {
+  font-family: 'Recursive Variable', sans-serif;
+}
+
 .d {
   @apply border border-red-500;
 }
diff --git a/src/lib/components/Actions.svelte b/src/lib/components/Actions.svelte
index 9400af16..51c7f87b 100644
--- a/src/lib/components/Actions.svelte
+++ b/src/lib/components/Actions.svelte
@@ -10,6 +10,8 @@
   import dayjs from 'dayjs';
   import { toBase64 } from 'js-base64';
   import { Button } from './ui/Button';
+  import { Separator } from './ui/separator';
+  import { Switch } from './ui/switch';
 
   const FONT_AWESOME_URL = `https://cdnjs.cloudflare.com/ajax/libs/font-awesome/${FAVersion}/css/all.min.css`;
 
@@ -51,11 +53,11 @@ ${svgString}`);
     const box: DOMRect = svg.getBoundingClientRect();
     canvas.width = box.width;
     canvas.height = box.height;
-    if (imagemodeselected === 'width') {
+    if (imageModeFinal === 'width') {
       const ratio = box.height / box.width;
       canvas.width = userimagesize;
       canvas.height = userimagesize * ratio;
-    } else if (imagemodeselected === 'height') {
+    } else if (imageModeFinal === 'height') {
       const ratio = box.width / box.height;
       canvas.width = userimagesize * ratio;
       canvas.height = userimagesize;
@@ -170,7 +172,11 @@ ${svgString}`);
   let svgUrl: string | undefined = $state();
   let krokiUrl: string | undefined = $state();
   let mdCode: string | undefined = $state();
-  let imagemodeselected = $state('auto');
+  let isAutoImageMode = $state(true);
+  let manualSizingMode: 'width' | 'height' = $state('width');
+  let imageModeFinal: 'auto' | 'width' | 'height' = $derived(
+    isAutoImageMode ? 'auto' : manualSizingMode
+  );
   let userimagesize = $state(1080);
 
   let isNetlify = $state(false);
@@ -198,53 +204,58 @@ ${svgString}`);
   </div>
 {/snippet}
 
-<Card title="Actions" isOpen={false} icon="fas fa-share-nodes">
-  <div class="m-2 flex flex-wrap gap-2">
+<Card title="Actions" isOpen={!false} icon="fas fa-share-nodes">
+  <div class="m-2 flex flex-col gap-2">
     {#if isClipboardAvailable()}
       <Button class="action-btn w-full" onclick={onCopyClipboard}>
         <i class="far fa-copy mr-2"></i> Copy Image to clipboard
       </Button>
     {/if}
 
-    <div class="flex w-full items-center gap-2">
+    <div class="flex w-full items-center gap-2 py-2">
       PNG size
-      <label for="autosize">
-        <input type="radio" value="auto" id="autosize" bind:group={imagemodeselected} /> Auto
-      </label>
+      <Separator orientation="vertical" />
+      <span class="flex items-center gap-2">
+        Auto
+        <Switch id="autosize" bind:checked={isAutoImageMode} />
+      </span>
 
-      <label for="width">
-        <input type="radio" value="width" id="width" bind:group={imagemodeselected} /> Width
-      </label>
+      {#if !isAutoImageMode}
+        <Separator orientation="vertical" />
+        <div class="flex flex-grow justify-between">
+          <label for="width">
+            <input type="radio" value="width" id="width" bind:group={manualSizingMode} /> Width
+          </label>
 
-      <label for="height">
-        <input type="radio" value="height" id="height" bind:group={imagemodeselected} /> Height
-      </label>
+          <label for="height">
+            <input type="radio" value="height" id="height" bind:group={manualSizingMode} /> Height
+          </label>
 
-      {#if imagemodeselected !== 'auto'}
-        <input
-          id="height"
-          class="input"
-          type="number"
-          min="3"
-          max="10000"
-          bind:value={userimagesize} />
+          <input class="input" type="number" min="3" max="10000" bind:value={userimagesize} />
+        </div>
+      {/if}
+    </div>
+    <div class="flex gap-2">
+      {@render dualActionButton('PNG', onDownloadPNG, iUrl)}
+      {@render dualActionButton('SVG', onDownloadSVG, svgUrl)}
+
+      {#if krokiRendererUrl}
+        <a target="_blank" rel="noreferrer" class="flex-grow" href={krokiUrl}>
+          <Button class="action-btn w-full">
+            <i class="fas fa-external-link-alt mr-2"></i> Kroki
+          </Button>
+        </a>
       {/if}
     </div>
 
-    {@render dualActionButton('PNG', onDownloadPNG, iUrl)}
-    {@render dualActionButton('SVG', onDownloadSVG, svgUrl)}
-
-    {#if krokiRendererUrl}
-      <a target="_blank" rel="noreferrer" class="flex-grow" href={krokiUrl}>
-        <Button class="action-btn w-full">
-          <i class="fas fa-external-link-alt mr-2"></i> Kroki
-        </Button>
-      </a>
-    {/if}
-
     {#if rendererUrl}
       <div class="flex w-full items-center gap-2">
-        <input class="input" id="markdown" type="text" value={mdCode} onclick={onCopyMarkdown} />
+        <input
+          class="input flex-grow"
+          id="markdown"
+          type="text"
+          value={mdCode}
+          onclick={onCopyMarkdown} />
         <label for="markdown">
           <Button class="btn btn-primary btn-md flex-auto" onclick={onCopyMarkdown}>
             Copy Markdown
@@ -255,7 +266,7 @@ ${svgString}`);
 
     <div class="flex w-full items-center gap-2">
       <input
-        class="input"
+        class="input flex-grow"
         id="gist"
         type="text"
         bind:value={gistURL}
diff --git a/src/lib/components/Card/Tabs.svelte b/src/lib/components/Card/Tabs.svelte
index 360ccb36..950c8000 100644
--- a/src/lib/components/Card/Tabs.svelte
+++ b/src/lib/components/Card/Tabs.svelte
@@ -33,7 +33,7 @@
       <Button
         role="tab"
         variant="ghost"
-        class={activeTabID === tab.id ? 'rounded-b-none border-b-2 border-b-secondary/50' : ''}
+        class={activeTabID === tab.id ? 'rounded-b-none border-b-2 border-b-primary/50' : ''}
         onclick={toggleTabs(tab)}
         onkeypress={toggleTabs(tab)}>
         <i class={tab.icon}></i>
diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index e7a91ae5..70e04bcc 100644
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -102,6 +102,7 @@
       {#if isEnabledMermaidChartLinks}
         <Switch
           id="editorMode"
+          class="data-[state=checked]:bg-secondary"
           checked={isReferral}
           onclick={() => {
             logEvent('playgroundToggle', { isReferred: isReferral });
diff --git a/src/lib/components/Preset.svelte b/src/lib/components/Preset.svelte
index 01701e0f..9413dfd3 100644
--- a/src/lib/components/Preset.svelte
+++ b/src/lib/components/Preset.svelte
@@ -225,7 +225,6 @@ packet-beta
   <div class="flex h-fit flex-wrap gap-2 p-2">
     {#each diagramOrder as sample}
       <Button
-        variant="secondary"
         size="sm"
         class="w-fit min-w-20 flex-grow normal-case"
         onclick={() => loadSampleDiagram(sample)}>