From f9986b319d6e82453459a661609296b7c99a5dff Mon Sep 17 00:00:00 2001
From: root <root@adhd.sh>
Date: Wed, 26 Nov 2025 14:04:21 +0100
Subject: [PATCH] [FEAT] More UI enhancements

---
 src/App.vue                                 |  78 +++++-----
 src/assets/main.css                         |  54 +++++++
 src/components/SpriteCanvas.vue             | 125 +++++++++-------
 src/components/SpritePreview.vue            | 152 ++++++++++----------
 src/components/utilities/DarkModeToggle.vue |   2 +-
 5 files changed, 244 insertions(+), 167 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index b8e999f..422dea3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,17 +1,17 @@
 <template>
-  <div class="min-h-screen lg:h-screen flex flex-col p-4 sm:p-8 bg-slate-50 dark:bg-gray-950 transition-colors duration-300">
-    <div class="flex flex-col flex-1 lg:overflow-hidden">
-      <header class="mb-4 sm:mb-3">
-        <div class="flex flex-col sm:flex-row justify-between items-center gap-4 mb-6">
+  <div class="min-h-screen flex flex-col p-4 sm:p-8 bg-slate-50 dark:bg-gray-950 transition-colors duration-300" :class="{ 'lg:h-screen': layers.some(l => l.sprites.length) }">
+    <div class="flex flex-col flex-1" :class="{ 'lg:overflow-hidden': layers.some(l => l.sprites.length) }">
+      <header class="mb-6 sm:mb-5">
+        <div class="flex flex-col sm:flex-row justify-between items-center gap-6 mb-8">
           <div class="text-center sm:text-left">
-            <h1 class="text-3xl sm:text-5xl font-bold text-gray-900 dark:text-gray-100 tracking-tight mb-2">Spritesheet generator</h1>
-            <p class="text-sm sm:text-base text-gray-600 dark:text-gray-400">Create professional spritesheets for your game development projects</p>
+            <h1 class="text-3xl sm:text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-gray-900 to-gray-700 dark:from-white dark:to-gray-300 tracking-tight mb-3">Spritesheet generator</h1>
+            <p class="text-sm sm:text-base text-gray-600 dark:text-gray-400 font-medium">Create professional spritesheets for your game development projects</p>
           </div>
-          <nav class="flex flex-wrap items-center justify-center gap-2">
+          <nav class="flex flex-wrap items-center justify-center gap-3">
             <a
               href="https://gitea.adhd.sh/root/spritesheet-generator"
               target="_blank"
-              class="inline-flex items-center gap-2 px-4 py-2 bg-white/80 hover:bg-white dark:bg-gray-800/80 dark:hover:bg-gray-800 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:shadow-md transition-all"
+              class="btn btn-secondary hover:shadow-md"
               data-rybbit-event="source-link"
             >
               <i class="fab fa-github"></i>
@@ -20,7 +20,7 @@
             <a
               href="https://discord.gg/JTev3nzeDa"
               target="_blank"
-              class="inline-flex items-center gap-2 px-4 py-2 bg-white/80 hover:bg-white dark:bg-gray-800/80 dark:hover:bg-gray-800 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:shadow-md transition-all"
+              class="btn btn-secondary hover:shadow-md"
               data-rybbit-event="discord-link"
             >
               <i class="fab fa-discord"></i>
@@ -29,7 +29,7 @@
             <a
               href="#"
               @click.prevent="openHelpModal"
-              class="inline-flex items-center gap-2 px-4 py-2 bg-white/80 hover:bg-white dark:bg-gray-800/80 dark:hover:bg-gray-800 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:shadow-md transition-all"
+              class="btn btn-secondary hover:shadow-md"
               data-rybbit-event="help-link"
             >
               <i class="fas fa-question-circle"></i>
@@ -38,7 +38,7 @@
             <a
               href="#"
               @click.prevent="openFeedbackModal"
-              class="inline-flex items-center gap-2 px-4 py-2 bg-white/80 hover:bg-white dark:bg-gray-800/80 dark:hover:bg-gray-800 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:shadow-md transition-all"
+              class="btn btn-secondary hover:shadow-md"
               data-rybbit-event="feedback-link"
             >
               <i class="fas fa-comment-dots"></i>
@@ -49,7 +49,7 @@
         </div>
       </header>
 
-      <div class="flex-shrink-0 p-3 mb-3 bg-gradient-to-r from-blue-50 to-purple-50 dark:from-gray-800 dark:to-gray-700 border border-blue-200 dark:border-gray-600 rounded-2xl">
+      <div class="flex-shrink-0 p-4 mb-6 bg-gradient-to-r from-blue-50 to-purple-50 dark:from-gray-800 dark:to-gray-700 border border-blue-100 dark:border-gray-600 rounded-2xl shadow-sm">
         <div class="flex flex-col sm:flex-row items-center justify-between gap-2">
           <div class="flex items-center gap-2 text-center sm:text-left">
             <i class="text-lg text-blue-600 dark:text-blue-400 fas fa-ad"></i>
@@ -71,9 +71,9 @@
         </div>
       </div>
 
-      <main class="flex flex-col flex-1 bg-white/90 dark:bg-gray-800/90 backdrop-blur-sm rounded-3xl shadow-xl border border-gray-200/50 dark:border-gray-700/50 lg:overflow-hidden transition-all duration-300">
+      <main class="flex flex-col flex-1 bg-white/80 dark:bg-gray-900/80 backdrop-blur-md rounded-3xl shadow-2xl border border-gray-200/50 dark:border-gray-700/50 transition-all duration-300" :class="{ 'lg:overflow-hidden': layers.some(l => l.sprites.length) }">
         <!-- Welcome state -->
-        <div v-if="!layers.some(l => l.sprites.length)" class="p-6 sm:p-10 overflow-y-auto">
+        <div v-if="!layers.some(l => l.sprites.length)" class="p-6 sm:p-10">
           <div class="mb-8">
             <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-1">Upload sprites or single image</h2>
             <p class="text-sm text-gray-600 dark:text-gray-400">Drag and drop images or import from JSON</p>
@@ -115,7 +115,7 @@
         <div v-if="layers.some(l => l.sprites.length)" class="flex flex-col flex-1 lg:grid lg:grid-cols-[380px_1fr] xl:grid-cols-[420px_1fr] lg:overflow-hidden">
           <!-- Left sidebar - Controls -->
           <div class="p-6 bg-gray-50/50 dark:bg-gray-900/30 border-b lg:border-b-0 lg:border-r border-gray-200 dark:border-gray-700 lg:overflow-y-auto lg:overflow-x-auto">
-            <div class="space-y-6">
+            <div class="space-y-8">
               <!-- Upload Section -->
               <section>
                 <div class="flex items-center justify-between mb-3">
@@ -123,15 +123,15 @@
                     <i class="text-sm text-gray-700 dark:text-gray-300 fas fa-upload"></i>
                     Upload
                   </h3>
-                  <button @click="openJSONImportDialog" class="flex items-center gap-1.5 px-3 py-1.5 bg-gray-700 hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700 text-xs font-medium text-white rounded-lg transition-all cursor-pointer" data-rybbit-event="import-json">
+                  <button @click="openJSONImportDialog" class="btn btn-dark btn-sm" data-rybbit-event="import-json">
                     <i class="text-xs fas fa-file-import"></i>
                     <span>JSON</span>
                   </button>
                 </div>
-                <div class="p-4 text-center border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-xl hover:border-gray-500 dark:hover:border-gray-400 transition-colors cursor-pointer" @click="openFileDialog">
-                  <i class="fas fa-plus-circle text-2xl text-gray-700 dark:text-gray-300 mb-2"></i>
-                  <p class="text-xs text-gray-600 dark:text-gray-400">Add sprites</p>
-                </div>
+                <button class="w-full p-6 text-center border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-xl hover:border-gray-500 dark:hover:border-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-all cursor-pointer focus:outline-none focus:ring-2 focus:ring-gray-500 group" @click="openFileDialog">
+                  <i class="fas fa-plus-circle text-3xl text-gray-400 dark:text-gray-500 group-hover:text-gray-600 dark:group-hover:text-gray-300 mb-3 transition-colors"></i>
+                  <p class="text-sm font-medium text-gray-600 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-gray-200 transition-colors">Add sprites</p>
+                </button>
                 <input ref="uploadInput" type="file" multiple accept="image/*" class="hidden" @change="handleUploadChange" />
                 <input ref="jsonFileInput" type="file" accept=".json,application/json" class="hidden" @change="handleJSONFileChange" />
               </section>
@@ -143,7 +143,7 @@
                     <i class="text-sm text-gray-700 dark:text-gray-300 fas fa-layer-group"></i>
                     Layers
                   </h3>
-                  <button @click="addLayer()" class="flex items-center gap-1.5 px-3 py-1.5 bg-gray-700 hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700 text-xs font-medium text-white rounded-lg transition-all cursor-pointer">
+                  <button @click="addLayer()" class="btn btn-dark btn-sm">
                     <i class="text-xs fas fa-plus"></i>
                     <span>Add</span>
                   </button>
@@ -155,7 +155,7 @@
                     class="flex items-center gap-2 px-3 py-2 bg-white dark:bg-gray-800 border rounded-lg transition-all"
                     :class="[layer.id === activeLayerId ? 'border-gray-800 ring-1 ring-gray-800 dark:border-gray-400 dark:ring-gray-400' : 'border-gray-200 dark:border-gray-700', !layer.visible ? 'opacity-50' : '']"
                   >
-                    <button @click.stop="layer.visible = !layer.visible" class="p-1.5 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors cursor-pointer" :title="layer.visible ? 'Hide layer' : 'Show layer'">
+                    <button @click.stop="layer.visible = !layer.visible" class="btn btn-ghost btn-icon-sm rounded" :title="layer.visible ? 'Hide layer' : 'Show layer'">
                       <i :class="layer.visible ? 'text-sm text-gray-800 dark:text-gray-200 fas fa-eye' : 'text-sm text-gray-400 dark:text-gray-500 fas fa-eye-slash'"></i>
                     </button>
                     <input
@@ -173,16 +173,16 @@
                       {{ layer.name }}
                       <span v-if="layer.sprites.length" class="ml-1 text-xs opacity-60">({{ layer.sprites.length }})</span>
                     </button>
-                    <button v-if="editingLayerId !== layer.id" @click="startEditingLayer(layer.id, layer.name)" class="p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors cursor-pointer" title="Rename">
+                    <button v-if="editingLayerId !== layer.id" @click="startEditingLayer(layer.id, layer.name)" class="btn btn-ghost btn-icon-xs rounded" title="Rename">
                       <i class="text-xs text-gray-600 dark:text-gray-400 fas fa-pen"></i>
                     </button>
-                    <button @click="moveLayer(layer.id, 'up')" class="p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors cursor-pointer" title="Move up">
+                    <button @click="moveLayer(layer.id, 'up')" class="btn btn-ghost btn-icon-xs rounded" title="Move up">
                       <i class="text-xs text-gray-600 dark:text-gray-400 fas fa-chevron-up"></i>
                     </button>
-                    <button @click="moveLayer(layer.id, 'down')" class="p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors cursor-pointer" title="Move down">
+                    <button @click="moveLayer(layer.id, 'down')" class="btn btn-ghost btn-icon-xs rounded" title="Move down">
                       <i class="text-xs text-gray-600 dark:text-gray-400 fas fa-chevron-down"></i>
                     </button>
-                    <button v-if="layers.length > 1" @click="removeLayer(layer.id)" class="p-1 text-red-600 dark:text-red-400 hover:bg-red-100 dark:hover:bg-red-900/30 rounded transition-colors cursor-pointer" title="Delete">
+                    <button v-if="layers.length > 1" @click="removeLayer(layer.id)" class="btn btn-danger btn-icon-xs rounded" title="Delete">
                       <i class="text-xs fas fa-trash"></i>
                     </button>
                   </div>
@@ -198,7 +198,7 @@
                 <div class="space-y-3">
                   <div class="flex items-center justify-between px-3 py-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg">
                     <label for="columns" class="text-sm font-medium text-gray-700 dark:text-gray-200">Columns</label>
-                    <input id="columns" type="number" v-model.number="columns" min="1" max="10" class="w-16 px-2 py-1 text-sm border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 rounded outline-none focus:ring-2 focus:ring-gray-500" />
+                    <input id="columns" type="number" v-model.number="columns" min="1" max="10" class="input-field w-16" />
                   </div>
 
                   <div class="px-3 py-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg">
@@ -212,7 +212,7 @@
                         v-model.number="settingsStore.manualCellWidth"
                         min="1"
                         max="2048"
-                        class="w-full min-w-0 px-2 py-1 text-sm border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 rounded outline-none focus:ring-2 focus:ring-gray-500"
+                        class="input-field w-full min-w-0"
                         placeholder="W"
                       />
                       <span class="flex-shrink-0 text-gray-500 dark:text-gray-400">×</span>
@@ -221,7 +221,7 @@
                         v-model.number="settingsStore.manualCellHeight"
                         min="1"
                         max="2048"
-                        class="w-full min-w-0 px-2 py-1 text-sm border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 rounded outline-none focus:ring-2 focus:ring-gray-500"
+                        class="input-field w-full min-w-0"
                         placeholder="H"
                       />
                     </div>
@@ -237,22 +237,22 @@
                   Align
                 </h3>
                 <div class="grid grid-cols-3 gap-2">
-                  <button @click="alignSprites('left')" class="px-3 py-2 text-xs font-medium text-gray-700 dark:text-gray-100 bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-700 rounded-lg transition-all cursor-pointer" title="Left">
+                  <button @click="alignSprites('left')" class="btn btn-secondary btn-sm" title="Left">
                     <i class="fas fa-arrow-left"></i>
                   </button>
-                  <button @click="alignSprites('center')" class="px-3 py-2 text-xs font-medium text-gray-700 dark:text-gray-100 bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-700 rounded-lg transition-all cursor-pointer" title="Center">
+                  <button @click="alignSprites('center')" class="btn btn-secondary btn-sm" title="Center">
                     <i class="fas fa-arrows-left-right"></i>
                   </button>
-                  <button @click="alignSprites('right')" class="px-3 py-2 text-xs font-medium text-gray-700 dark:text-gray-100 bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-700 rounded-lg transition-all cursor-pointer" title="Right">
+                  <button @click="alignSprites('right')" class="btn btn-secondary btn-sm" title="Right">
                     <i class="fas fa-arrow-right"></i>
                   </button>
-                  <button @click="alignSprites('top')" class="px-3 py-2 text-xs font-medium text-gray-700 dark:text-gray-100 bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-700 rounded-lg transition-all cursor-pointer" title="Top">
+                  <button @click="alignSprites('top')" class="btn btn-secondary btn-sm" title="Top">
                     <i class="fas fa-arrow-up"></i>
                   </button>
-                  <button @click="alignSprites('middle')" class="px-3 py-2 text-xs font-medium text-gray-700 dark:text-gray-100 bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-700 rounded-lg transition-all cursor-pointer" title="Middle">
+                  <button @click="alignSprites('middle')" class="btn btn-secondary btn-sm" title="Middle">
                     <i class="fas fa-arrows-up-down"></i>
                   </button>
-                  <button @click="alignSprites('bottom')" class="px-3 py-2 text-xs font-medium text-gray-700 dark:text-gray-100 bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-700 rounded-lg transition-all cursor-pointer" title="Bottom">
+                  <button @click="alignSprites('bottom')" class="btn btn-secondary btn-sm" title="Bottom">
                     <i class="fas fa-arrow-down"></i>
                   </button>
                 </div>
@@ -265,19 +265,19 @@
                   Export
                 </h3>
                 <div class="grid grid-cols-2 gap-2">
-                  <button @click="downloadSpritesheet" class="flex items-center justify-center gap-1.5 px-3 py-2 text-xs font-medium text-white bg-gray-700 hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700 rounded-lg transition-all cursor-pointer" data-rybbit-event="download-spritesheet">
+                  <button @click="downloadSpritesheet" class="btn btn-dark btn-sm" data-rybbit-event="download-spritesheet">
                     <i class="fas fa-image"></i>
                     <span>PNG</span>
                   </button>
-                  <button @click="exportSpritesheetJSON" class="flex items-center justify-center gap-1.5 px-3 py-2 text-xs font-medium text-white bg-gray-700 hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700 rounded-lg transition-all cursor-pointer" data-rybbit-event="export-json">
+                  <button @click="exportSpritesheetJSON" class="btn btn-dark btn-sm" data-rybbit-event="export-json">
                     <i class="fas fa-file-code"></i>
                     <span>JSON</span>
                   </button>
-                  <button @click="openGifFpsModal" class="flex items-center justify-center gap-1.5 px-3 py-2 text-xs font-medium text-white bg-gray-700 hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700 rounded-lg transition-all cursor-pointer" data-rybbit-event="download-gif">
+                  <button @click="openGifFpsModal" class="btn btn-dark btn-sm" data-rybbit-event="download-gif">
                     <i class="fas fa-film"></i>
                     <span>GIF</span>
                   </button>
-                  <button @click="downloadAsZip" class="flex items-center justify-center gap-1.5 px-3 py-2 text-xs font-medium text-white bg-gray-700 hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700 rounded-lg transition-all cursor-pointer" data-rybbit-event="download-zip">
+                  <button @click="downloadAsZip" class="btn btn-dark btn-sm" data-rybbit-event="download-zip">
                     <i class="fas fa-file-archive"></i>
                     <span>ZIP</span>
                   </button>
diff --git a/src/assets/main.css b/src/assets/main.css
index ddcae0b..d4c8126 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -37,3 +37,57 @@ html.dark {
     touch-action: manipulation; /* Improve touch responsiveness */
   }
 }
+
+@layer components {
+  .btn {
+    @apply inline-flex items-center justify-center gap-2 px-4 py-2 text-sm rounded-lg transition-all cursor-pointer font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed active:scale-95;
+  }
+
+  .btn-primary {
+    @apply bg-gray-900 text-white hover:bg-gray-800 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-200;
+  }
+
+  .btn-secondary {
+    @apply bg-white text-gray-700 border border-gray-200 hover:bg-gray-50 hover:shadow-sm dark:bg-gray-800 dark:text-gray-200 dark:border-gray-700 dark:hover:bg-gray-700;
+  }
+
+  .btn-ghost {
+    @apply text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800;
+  }
+
+  .btn-danger {
+    @apply text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/30;
+  }
+
+  .btn-dark {
+    @apply bg-gray-700 text-white hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700;
+  }
+
+  .btn-sm {
+    @apply px-3 py-1.5 text-xs;
+  }
+
+  .btn-md {
+    @apply px-4 py-2 text-sm;
+  }
+
+  .btn-icon {
+    @apply p-2;
+  }
+
+  .btn-icon-sm {
+    @apply p-1.5;
+  }
+
+  .btn-icon-xs {
+    @apply p-1;
+  }
+
+  .input-field {
+    @apply px-2 py-1 text-sm border border-gray-300 rounded outline-none focus:ring-2 focus:ring-gray-500 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100;
+  }
+
+  .card {
+    @apply bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg;
+  }
+}
diff --git a/src/components/SpriteCanvas.vue b/src/components/SpriteCanvas.vue
index e0c2637..a04d677 100644
--- a/src/components/SpriteCanvas.vue
+++ b/src/components/SpriteCanvas.vue
@@ -18,68 +18,85 @@
   </Teleport>
 
   <div class="space-y-6 w-full max-w-full overflow-hidden">
-    <div class="bg-cyan-500 dark:bg-cyan-600 rounded-xl p-4 shadow-lg border border-cyan-400/50 dark:border-cyan-500/50">
-      <div class="flex items-start gap-3">
-        <i class="fas fa-lightbulb text-yellow-300 text-xl mt-0.5 flex-shrink-0"></i>
-        <div class="min-w-0">
-          <h4 class="font-semibold text-white mb-1">Tip from developer</h4>
-          <p class="text-cyan-50 text-sm">Right-click any sprite to open the context menu for quick actions: add, replace, or remove sprites.</p>
-        </div>
-      </div>
+    <div class="bg-cyan-50 dark:bg-cyan-900/20 rounded-lg p-3 border border-cyan-100 dark:border-cyan-800/50 flex items-start gap-3">
+      <i class="fas fa-info-circle text-cyan-600 dark:text-cyan-400 mt-0.5 flex-shrink-0"></i>
+      <p class="text-sm text-cyan-800 dark:text-cyan-200">
+        <span class="font-semibold">Tip:</span> Right-click any sprite to open the context menu for quick actions: add, replace, or remove sprites.
+      </p>
     </div>
 
-    <section class="w-full">
-      <h3 class="text-lg font-bold text-gray-800 dark:text-gray-100 mb-4 flex items-center gap-2">
-        <i class="fas fa-cog text-blue-600 dark:text-blue-400"></i>
-        Canvas options
-      </h3>
-      <div class="flex flex-wrap gap-4">
-        <label class="flex items-center gap-2 px-4 py-2.5 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-600 cursor-pointer hover:border-blue-400 dark:hover:border-blue-500 transition-all">
-          <input id="pixel-perfect" type="checkbox" v-model="settingsStore.pixelPerfect" class="w-4 h-4 rounded" />
-          <span class="text-sm font-medium dark:text-gray-200">Pixel Perfect</span>
-        </label>
-        <label class="flex items-center gap-2 px-4 py-2.5 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-600 cursor-pointer hover:border-blue-400 dark:hover:border-blue-500 transition-all">
-          <input id="allow-cell-swap" type="checkbox" v-model="allowCellSwap" class="w-4 h-4 rounded" />
-          <span class="text-sm font-medium dark:text-gray-200">Cell Swapping</span>
-        </label>
-        <label class="flex items-center gap-2 px-4 py-2.5 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-600 cursor-pointer hover:border-blue-400 dark:hover:border-blue-500 transition-all">
-          <input id="show-all-sprites" type="checkbox" v-model="showAllSprites" class="w-4 h-4 rounded" />
-          <span class="text-sm font-medium dark:text-gray-200">Compare Sprites</span>
-        </label>
-        <label class="flex items-center gap-2 px-4 py-2.5 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-600 cursor-pointer hover:border-blue-400 dark:hover:border-blue-500 transition-all">
-          <input id="negative-spacing" type="checkbox" v-model="settingsStore.negativeSpacingEnabled" class="w-4 h-4 rounded" />
-          <span class="text-sm font-medium dark:text-gray-200">Negative Spacing</span>
-        </label>
-        <label class="flex items-center gap-2 px-4 py-2.5 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-600 cursor-pointer hover:border-blue-400 dark:hover:border-blue-500 transition-all">
-          <input id="checkerboard" type="checkbox" v-model="settingsStore.checkerboardEnabled" class="w-4 h-4 rounded" />
-          <span class="text-sm font-medium dark:text-gray-200">Checkerboard</span>
-        </label>
-        <div class="flex items-center gap-2 px-4 py-2.5 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-600">
-          <label for="bg-color" class="text-sm font-medium dark:text-gray-200">Background:</label>
-          <select id="bg-color" v-model="bgSelectValue" class="px-3 py-1.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 dark:text-gray-200 text-sm focus:ring-2 focus:ring-blue-500 outline-none transition-all">
-            <option value="transparent">Transparent</option>
-            <option value="#ffffff">White</option>
-            <option value="#000000">Black</option>
-            <option value="#f9fafb">Light Gray</option>
-            <option value="custom">Custom</option>
-          </select>
-          <input v-if="bgSelectValue === 'custom'" type="color" v-model="customColor" @input="settingsStore.setBackgroundColor(customColor)" class="w-10 h-10 border-2 border-gray-300 dark:border-gray-600 rounded-lg cursor-pointer" />
+    <section class="w-full bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-1 shadow-sm">
+      <div class="flex flex-wrap items-center gap-1">
+        <!-- Toggles Group -->
+        <div class="flex items-center gap-1 p-1">
+          <label class="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer transition-colors" title="Pixel Perfect">
+            <input id="pixel-perfect" type="checkbox" v-model="settingsStore.pixelPerfect" class="w-4 h-4 rounded text-blue-600 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600" />
+            <span class="text-sm font-medium text-gray-700 dark:text-gray-200">Pixel Perfect</span>
+          </label>
+          <label class="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer transition-colors" title="Cell Swapping">
+            <input id="allow-cell-swap" type="checkbox" v-model="allowCellSwap" class="w-4 h-4 rounded text-blue-600 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600" />
+            <span class="text-sm font-medium text-gray-700 dark:text-gray-200">Swap</span>
+          </label>
+          <label class="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer transition-colors" title="Compare Sprites">
+            <input id="show-all-sprites" type="checkbox" v-model="showAllSprites" class="w-4 h-4 rounded text-blue-600 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600" />
+            <span class="text-sm font-medium text-gray-700 dark:text-gray-200">Compare</span>
+          </label>
         </div>
-        <div class="flex items-center gap-2 px-4 py-2.5 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-600">
-          <span class="text-sm font-medium dark:text-gray-200 mr-1">Zoom:</span>
-          <button @click="zoomIn" class="p-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-100 rounded transition-all" title="Zoom In">
-            <i class="fas fa-plus text-xs"></i>
-          </button>
-          <button @click="zoomOut" class="p-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-100 rounded transition-all" title="Zoom Out">
+
+        <div class="w-px h-6 bg-gray-200 dark:bg-gray-700 mx-1"></div>
+
+        <!-- Spacing & Grid Group -->
+        <div class="flex items-center gap-1 p-1">
+          <label class="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer transition-colors" title="Negative Spacing">
+            <input id="negative-spacing" type="checkbox" v-model="settingsStore.negativeSpacingEnabled" class="w-4 h-4 rounded text-blue-600 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600" />
+            <span class="text-sm font-medium text-gray-700 dark:text-gray-200">Spacing</span>
+          </label>
+          <label class="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer transition-colors" title="Checkerboard Background">
+            <input id="checkerboard" type="checkbox" v-model="settingsStore.checkerboardEnabled" class="w-4 h-4 rounded text-blue-600 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600" />
+            <span class="text-sm font-medium text-gray-700 dark:text-gray-200">Grid</span>
+          </label>
+        </div>
+
+        <div class="w-px h-6 bg-gray-200 dark:bg-gray-700 mx-1"></div>
+
+        <!-- Background Color -->
+        <div class="flex items-center gap-2 px-3 py-2">
+          <label for="bg-color" class="text-sm font-medium text-gray-600 dark:text-gray-400">Bg:</label>
+          <div class="flex items-center gap-2">
+            <select id="bg-color" v-model="bgSelectValue" class="px-2 py-1 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 dark:text-gray-200 text-sm focus:ring-2 focus:ring-blue-500 outline-none transition-all cursor-pointer hover:border-gray-400 dark:hover:border-gray-500">
+              <option value="transparent">Transparent</option>
+              <option value="#ffffff">White</option>
+              <option value="#000000">Black</option>
+              <option value="#f9fafb">Light Gray</option>
+              <option value="custom">Custom</option>
+            </select>
+            <div v-if="bgSelectValue === 'custom'" class="relative w-6 h-6 rounded-full overflow-hidden border border-gray-300 dark:border-gray-600 shadow-sm">
+              <input type="color" v-model="customColor" @input="settingsStore.setBackgroundColor(customColor)" class="absolute -top-2 -left-2 w-10 h-10 cursor-pointer p-0 border-0" />
+            </div>
+          </div>
+        </div>
+
+        <div class="flex-1"></div>
+
+        <!-- Zoom Controls -->
+        <div class="flex items-center bg-gray-100 dark:bg-gray-700 rounded-lg p-1 mr-1">
+          <button @click="zoomOut" class="p-1.5 hover:bg-white dark:hover:bg-gray-600 text-gray-600 dark:text-gray-300 rounded-md transition-all" title="Zoom Out">
             <i class="fas fa-minus text-xs"></i>
           </button>
-          <button @click="resetZoom" class="p-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-100 rounded transition-all" title="Reset Zoom">
+          <span class="px-2 text-xs font-mono text-gray-600 dark:text-gray-300 min-w-[3ch] text-center">{{ Math.round(zoom * 100) }}%</span>
+          <button @click="zoomIn" class="p-1.5 hover:bg-white dark:hover:bg-gray-600 text-gray-600 dark:text-gray-300 rounded-md transition-all" title="Zoom In">
+            <i class="fas fa-plus text-xs"></i>
+          </button>
+          <div class="w-px h-4 bg-gray-300 dark:bg-gray-600 mx-1"></div>
+          <button @click="resetZoom" class="p-1.5 hover:bg-white dark:hover:bg-gray-600 text-gray-600 dark:text-gray-300 rounded-md transition-all" title="Reset Zoom">
             <i class="fas fa-expand text-xs"></i>
           </button>
         </div>
-        <label class="flex items-center gap-2 px-4 py-2.5 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-600 cursor-pointer hover:border-blue-400 dark:hover:border-blue-500 transition-all">
-          <input id="show-offset-labels" type="checkbox" v-model="showOffsetLabels" class="w-4 h-4 rounded" />
-          <span class="text-sm font-medium dark:text-gray-200">Show Offset Labels</span>
+
+        <!-- Offset Labels Toggle -->
+        <label class="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer transition-colors border-l border-gray-100 dark:border-gray-700" title="Show Offset Labels">
+          <input id="show-offset-labels" type="checkbox" v-model="showOffsetLabels" class="w-4 h-4 rounded text-blue-600 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600" />
+          <span class="text-sm font-medium text-gray-700 dark:text-gray-200">Labels</span>
         </label>
       </div>
     </section>
diff --git a/src/components/SpritePreview.vue b/src/components/SpritePreview.vue
index b97ef84..2c60bbd 100644
--- a/src/components/SpritePreview.vue
+++ b/src/components/SpritePreview.vue
@@ -83,121 +83,127 @@
       </div>
 
       <div class="lg:w-80 xl:w-96 flex-shrink-0">
-        <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4 space-y-4">
-          <div class="space-y-3">
-            <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wide">Playback</h3>
+        <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm overflow-hidden">
+          <!-- Playback Controls -->
+          <div class="p-4 border-b border-gray-100 dark:border-gray-700">
+            <h3 class="text-xs font-bold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-3">Playback</h3>
             <div class="flex items-center gap-2">
-              <button @click="togglePlayback" class="flex items-center justify-center gap-1.5 bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md transition-colors cursor-pointer flex-1">
-                <span v-if="isPlaying" class="flex items-center gap-1.5">
-                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">
-                    <path fill-rule="evenodd" d="M6.75 5.25a.75.75 0 01.75-.75H9a.75.75 0 01.75.75v13.5a.75.75 0 01-.75.75H7.5a.75.75 0 01-.75-.75V5.25zm7.5 0A.75.75 0 0115 4.5h1.5a.75.75 0 01.75.75v13.5a.75.75 0 01-.75.75H15a.75.75 0 01-.75-.75V5.25z" clip-rule="evenodd" />
-                  </svg>
+              <button @click="togglePlayback" class="flex items-center justify-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2.5 rounded-lg transition-all cursor-pointer flex-1 shadow-sm active:scale-95">
+                <span v-if="isPlaying" class="flex items-center gap-2 font-medium">
+                  <i class="fas fa-pause"></i>
                   Pause
                 </span>
-                <span v-else class="flex items-center gap-1.5">
-                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">
-                    <path fill-rule="evenodd" d="M4.5 5.653c0-1.426 1.529-2.33 2.779-1.643l11.54 6.348c1.295.712 1.295 2.573 0 3.285L7.28 19.991c-1.25.687-2.779-.217-2.779-1.643V5.653z" clip-rule="evenodd" />
-                  </svg>
+                <span v-else class="flex items-center gap-2 font-medium">
+                  <i class="fas fa-play"></i>
                   Play
                 </span>
               </button>
-              <button @click="previousFrame" class="bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 p-2 rounded-md transition-colors duration-200 cursor-pointer" :disabled="isPlaying" :class="{ 'opacity-50 cursor-not-allowed': isPlaying }">
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 dark:text-gray-200">
-                  <path fill-rule="evenodd" d="M11.78 5.22a.75.75 0 01.75.75v12.06l4.72-4.72a.75.75 0 111.06 1.06l-6 6a.75.75 0 01-1.06 0l-6-6a.75.75 0 011.06-1.06l4.72 4.72V5.97a.75.75 0 01.75-.75z" clip-rule="evenodd" transform="rotate(90 12 12)" />
-                </svg>
+              <button @click="previousFrame" class="btn btn-secondary btn-icon rounded-lg" :disabled="isPlaying" :class="{ 'opacity-50 cursor-not-allowed': isPlaying }">
+                <i class="fas fa-step-backward"></i>
               </button>
-              <button @click="nextFrame" class="bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 p-2 rounded-md transition-colors duration-200 cursor-pointer" :disabled="isPlaying" :class="{ 'opacity-50 cursor-not-allowed': isPlaying }">
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 dark:text-gray-200">
-                  <path fill-rule="evenodd" d="M11.78 5.22a.75.75 0 01.75.75v12.06l4.72-4.72a.75.75 0 111.06 1.06l-6 6a.75.75 0 01-1.06 0l-6-6a.75.75 0 011.06-1.06l4.72 4.72V5.97a.75.75 0 01.75-.75z" clip-rule="evenodd" transform="rotate(-90 12 12)" />
-                </svg>
+              <button @click="nextFrame" class="btn btn-secondary btn-icon rounded-lg" :disabled="isPlaying" :class="{ 'opacity-50 cursor-not-allowed': isPlaying }">
+                <i class="fas fa-step-forward"></i>
               </button>
             </div>
           </div>
 
-          <!-- Sliders -->
-          <div class="space-y-3">
-            <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wide">Controls</h3>
-
+          <!-- Animation Settings -->
+          <div class="p-4 border-b border-gray-100 dark:border-gray-700 space-y-5">
+            <h3 class="text-xs font-bold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-1">Animation</h3>
+            
             <!-- Frame Navigation -->
-            <div class="space-y-1">
+            <div class="space-y-2">
               <div class="flex justify-between items-center">
-                <span class="text-xs font-medium text-gray-600 dark:text-gray-400">Frame</span>
-                <span class="text-xs font-mono text-gray-700 dark:text-gray-300">{{ visibleFrameNumber }}/{{ visibleFramesCount }}</span>
+                <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Frame</span>
+                <span class="text-xs font-mono text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-700 px-2 py-0.5 rounded">{{ visibleFrameNumber }} / {{ visibleFramesCount }}</span>
               </div>
-              <input type="range" min="0" :max="visibleFrames.length - 1" :value="visibleFrameIndex" @input="handleSliderInput" class="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer accent-blue-500" :disabled="isPlaying" :class="{ 'opacity-50': isPlaying }" />
+              <input type="range" min="0" :max="visibleFrames.length - 1" :value="visibleFrameIndex" @input="handleSliderInput" class="w-full h-1.5 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer accent-blue-600" :disabled="isPlaying" :class="{ 'opacity-50': isPlaying }" />
             </div>
 
             <!-- FPS Control -->
-            <div class="space-y-1">
+            <div class="space-y-2">
               <div class="flex justify-between items-center">
-                <span class="text-xs font-medium text-gray-600 dark:text-gray-400">FPS</span>
-                <span class="text-xs font-mono text-gray-700 dark:text-gray-300">{{ fps }}</span>
+                <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Speed (FPS)</span>
+                <span class="text-xs font-mono text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-700 px-2 py-0.5 rounded">{{ fps }}</span>
               </div>
-              <input type="range" min="1" max="60" v-model.number="fps" class="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer accent-blue-500" />
-            </div>
-
-            <!-- Zoom Control -->
-            <div class="space-y-1">
-              <div class="flex justify-between items-center">
-                <span class="text-xs font-medium text-gray-600 dark:text-gray-400">Zoom</span>
-                <span class="text-xs font-mono text-gray-700 dark:text-gray-300">{{ Math.round(zoom * 100) }}%</span>
-              </div>
-              <input type="range" min="0.5" max="5" step="0.1" v-model.number="zoom" class="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer accent-blue-500" />
+              <input type="range" min="1" max="60" v-model.number="fps" class="w-full h-1.5 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer accent-blue-600" />
             </div>
           </div>
 
-          <!-- Options -->
-          <div class="space-y-3">
-            <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wide">Options</h3>
+          <!-- View Options -->
+          <div class="p-4 space-y-5">
+            <h3 class="text-xs font-bold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-1">View Options</h3>
+
+            <!-- Zoom Control -->
             <div class="space-y-2">
-              <label class="flex items-center gap-2 cursor-pointer">
-                <input type="checkbox" v-model="isDraggable" class="w-4 h-4 text-blue-500 focus:ring-blue-400 rounded border-gray-300 dark:border-gray-600 dark:bg-gray-700" />
-                <span class="text-sm dark:text-gray-200">Reposition</span>
+              <div class="flex justify-between items-center">
+                <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Zoom</span>
+                <span class="text-xs font-mono text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-700 px-2 py-0.5 rounded">{{ Math.round(zoom * 100) }}%</span>
+              </div>
+              <input type="range" min="0.5" max="5" step="0.1" v-model.number="zoom" class="w-full h-1.5 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer accent-blue-600" />
+            </div>
+
+            <!-- Toggles -->
+            <div class="space-y-3 pt-2">
+              <label class="flex items-center justify-between cursor-pointer group">
+                <span class="text-sm text-gray-700 dark:text-gray-300 group-hover:text-gray-900 dark:group-hover:text-gray-100 transition-colors">Pixel perfect</span>
+                <div class="relative inline-flex items-center cursor-pointer">
+                  <input type="checkbox" v-model="settingsStore.pixelPerfect" class="sr-only peer">
+                  <div class="w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
+                </div>
               </label>
 
-              <label class="flex items-center gap-2 cursor-pointer ml-4" :class="{ 'opacity-50 cursor-not-allowed': !isDraggable }">
-                <input type="checkbox" v-model="repositionAllLayers" class="w-4 h-4 text-blue-500 focus:ring-blue-400 rounded border-gray-300 dark:border-gray-600 dark:bg-gray-700" :disabled="!isDraggable" />
-                <span class="text-sm dark:text-gray-200">All layers</span>
+              <label class="flex items-center justify-between cursor-pointer group">
+                <span class="text-sm text-gray-700 dark:text-gray-300 group-hover:text-gray-900 dark:group-hover:text-gray-100 transition-colors">Reposition mode</span>
+                <div class="relative inline-flex items-center cursor-pointer">
+                  <input type="checkbox" v-model="isDraggable" class="sr-only peer">
+                  <div class="w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
+                </div>
               </label>
 
-              <label class="flex items-center gap-2 cursor-pointer">
-                <input type="checkbox" v-model="showAllSprites" class="w-4 h-4 text-blue-500 focus:ring-blue-400 rounded border-gray-300 dark:border-gray-600 dark:bg-gray-700" />
-                <span class="text-sm dark:text-gray-200">Compare sprites</span>
-              </label>
+              <div class="pl-4 border-l-2 border-gray-100 dark:border-gray-700 transition-all" :class="{ 'opacity-50 pointer-events-none': !isDraggable }">
+                <label class="flex items-center justify-between cursor-pointer group">
+                  <span class="text-sm text-gray-600 dark:text-gray-400 group-hover:text-gray-800 dark:group-hover:text-gray-200 transition-colors">Apply to all layers</span>
+                  <input type="checkbox" v-model="repositionAllLayers" class="w-4 h-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" :disabled="!isDraggable" />
+                </label>
+              </div>
 
-              <label class="flex items-center gap-2 cursor-pointer">
-                <input type="checkbox" v-model="settingsStore.pixelPerfect" class="w-4 h-4 text-blue-500 focus:ring-blue-400 rounded border-gray-300 dark:border-gray-600 dark:bg-gray-700" />
-                <span class="text-sm dark:text-gray-200">Pixel perfect</span>
+              <label class="flex items-center justify-between cursor-pointer group">
+                <span class="text-sm text-gray-700 dark:text-gray-300 group-hover:text-gray-900 dark:group-hover:text-gray-100 transition-colors">Compare sprites</span>
+                <div class="relative inline-flex items-center cursor-pointer">
+                  <input type="checkbox" v-model="showAllSprites" class="sr-only peer">
+                  <div class="w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
+                </div>
               </label>
             </div>
           </div>
 
           <!-- Current frame offset display -->
-          <div v-if="currentFrameSprite" class="p-2 bg-gray-100 dark:bg-gray-700 rounded-md border border-gray-200 dark:border-gray-600">
-            <div class="flex items-center justify-between">
-              <span class="text-xs font-medium text-gray-600 dark:text-gray-400">Offset</span>
-              <span class="text-xs font-mono font-semibold text-cyan-600 dark:text-cyan-400">x: {{ currentFrameSprite.x }}, y: {{ currentFrameSprite.y }}</span>
+          <div v-if="currentFrameSprite" class="px-4 pb-4">
+            <div class="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg border border-gray-100 dark:border-gray-700 flex items-center justify-between">
+              <span class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">Offset</span>
+              <span class="text-xs font-mono font-bold text-gray-700 dark:text-gray-200">X: {{ currentFrameSprite.x }} <span class="text-gray-300 dark:text-gray-600 mx-1">|</span> Y: {{ currentFrameSprite.y }}</span>
             </div>
           </div>
 
           <!-- Frame Selection (when Compare sprites is enabled) -->
-          <div v-if="showAllSprites" class="space-y-2">
-            <div class="flex items-center justify-between">
-              <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wide">Frames</h3>
+          <div v-if="showAllSprites" class="border-t border-gray-100 dark:border-gray-700 p-4">
+            <div class="flex items-center justify-between mb-3">
+              <h3 class="text-xs font-bold text-gray-400 dark:text-gray-500 uppercase tracking-wider">Visible Frames</h3>
               <div class="flex gap-1">
-                <button @click="showAllFrames" class="px-2 py-1 text-xs bg-blue-500 hover:bg-blue-600 text-white rounded transition-colors">All</button>
-                <button @click="hideAllFrames" class="px-2 py-1 text-xs bg-gray-500 hover:bg-gray-600 text-white rounded transition-colors">None</button>
+                <button @click="showAllFrames" class="px-2 py-1 text-[10px] font-medium bg-blue-50 text-blue-600 hover:bg-blue-100 dark:bg-blue-900/30 dark:text-blue-300 dark:hover:bg-blue-900/50 rounded transition-colors">All</button>
+                <button @click="hideAllFrames" class="px-2 py-1 text-[10px] font-medium bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-400 dark:hover:bg-gray-600 rounded transition-colors">None</button>
               </div>
             </div>
-            <div class="rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-800">
-              <div class="max-h-[180px] overflow-y-auto">
-                <div class="space-y-0.5 p-1">
-                  <div v-for="(sprite, index) in compositeFrames" :key="sprite.id" class="flex items-center gap-2 px-2 py-1.5 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer rounded" @click="toggleHiddenFrame(index)">
-                    <input type="checkbox" :checked="!hiddenFrames.includes(index)" class="w-3.5 h-3.5 text-blue-500 focus:ring-blue-400 rounded border-gray-300 dark:border-gray-600 dark:bg-gray-700" @click.stop @change="toggleHiddenFrame(index)" />
-                    <div class="w-8 h-8 bg-gray-100 dark:bg-gray-700 rounded flex items-center justify-center overflow-hidden flex-shrink-0">
+            <div class="bg-gray-50 dark:bg-gray-900/50 rounded-lg border border-gray-200 dark:border-gray-700 p-2">
+              <div class="max-h-[150px] overflow-y-auto pr-1 custom-scrollbar">
+                <div class="space-y-1">
+                  <div v-for="(sprite, index) in compositeFrames" :key="sprite.id" class="flex items-center gap-3 px-2 py-1.5 hover:bg-white dark:hover:bg-gray-700 cursor-pointer rounded-md transition-colors group" @click="toggleHiddenFrame(index)">
+                    <input type="checkbox" :checked="!hiddenFrames.includes(index)" class="w-4 h-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" @click.stop @change="toggleHiddenFrame(index)" />
+                    <div class="w-8 h-8 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded flex items-center justify-center overflow-hidden flex-shrink-0 shadow-sm">
                       <img :src="sprite.url" class="max-w-full max-h-full object-contain" :style="settingsStore.pixelPerfect ? { 'image-rendering': 'pixelated' } : {}" />
                     </div>
-                    <span class="text-xs dark:text-gray-200">{{ index + 1 }}</span>
+                    <span class="text-xs font-mono text-gray-600 dark:text-gray-300 group-hover:text-gray-900 dark:group-hover:text-gray-100">Frame {{ index + 1 }}</span>
                   </div>
                 </div>
               </div>
diff --git a/src/components/utilities/DarkModeToggle.vue b/src/components/utilities/DarkModeToggle.vue
index 0e6a8fb..f8fc687 100644
--- a/src/components/utilities/DarkModeToggle.vue
+++ b/src/components/utilities/DarkModeToggle.vue
@@ -1,7 +1,7 @@
 <template>
   <button
     @click="settingsStore.toggleDarkMode()"
-    class="inline-flex items-center gap-2 px-8 py-3 bg-white/80 hover:bg-white dark:bg-gray-800/80 dark:hover:bg-gray-800 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:shadow-md transition-all"
+    class="btn btn-secondary"
     aria-label="Toggle dark mode"
     data-rybbit-event="toggle-dark-mode"
   >