diff --git a/src/App.vue b/src/App.vue
index ec6988b..7e7d1f0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,7 @@
 <template>
   <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) && $route.name === 'home' }">
+    <!-- Decorative gradient blur in top-right corner -->
+    <div class="fixed top-0 right-0 w-[600px] h-[600px] bg-gradient-to-bl from-blue-400/40 via-purple-400/30 to-transparent dark:from-blue-400/30 dark:via-purple-400/20 blur-3xl pointer-events-none -translate-y-32 translate-x-32"></div>
     <div class="flex flex-col flex-1" :class="{ 'lg:overflow-hidden': layers.some(l => l.sprites.length) && $route.name === 'home' }">
       <header class="mb-6 sm:mb-5">
         <div class="flex flex-col sm:flex-row justify-between items-center gap-6 mb-8">