diff --git a/src/App.vue b/src/App.vue
index 77a3167..a086b12 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,16 +3,16 @@
     <!-- 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">
-          <div class="text-center sm:text-left">
+      <header class="mb-6 sm:mb-8">
+        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-6 mb-6">
+          <div class="text-center sm:text-left w-full sm:w-auto">
             <router-link to="/" class="block group" title="Spritesheet Generator - Create professional spritesheets" aria-label="Go to homepage">
-              <span 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 group-hover:opacity-80 transition-opacity">Spritesheet generator</span>
+              <span class="inline-block text-3xl sm:text-4xl lg: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-2 sm:mb-3 group-hover:opacity-80 transition-opacity">Spritesheet generator</span>
             </router-link>
             <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>
-          <div class="flex flex-col items-center sm:items-end gap-3">
-            <nav class="flex flex-wrap items-center justify-center gap-3">
+          <div class="flex flex-col items-center sm:items-end gap-3 w-full sm:w-auto">
+            <nav class="flex flex-wrap items-center justify-center sm:justify-end gap-2 sm:gap-3">
               <a href="https://gitea.adhd.sh/root/spritesheet-generator" target="_blank" rel="noopener noreferrer" class="btn btn-secondary hover:shadow-md" data-rybbit-event="source-link" title="View source code on Gitea" aria-label="View source code repository">
                 <i class="fab fa-github"></i>
                 <span class="font-medium">Source</span>
@@ -31,14 +31,14 @@
               </a>
               <dark-mode-toggle />
             </nav>
-            <div class="flex gap-4 text-sm font-medium text-gray-600 dark:text-gray-400">
-              <router-link to="/" class="hover:text-gray-900 dark:hover:text-white transition-colors" title="Spritesheet Generator Home" aria-label="Navigate to home page">Home</router-link>
-              <router-link to="/blog" class="hover:text-gray-900 dark:hover:text-white transition-colors" title="Read our blog posts" aria-label="Navigate to blog">Blog</router-link>
-              <router-link to="/about" class="hover:text-gray-900 dark:hover:text-white transition-colors" title="Learn more about us" aria-label="Navigate to about page">About Us</router-link>
-              <router-link to="/contact" class="hover:text-gray-900 dark:hover:text-white transition-colors" title="Get in touch with us" aria-label="Navigate to contact page">Contact</router-link>
-              <router-link to="/faq" class="hover:text-gray-900 dark:hover:text-white transition-colors" title="Frequently Asked Questions" aria-label="Navigate to FAQ page">FAQ</router-link>
-              <router-link to="/privacy-policy" class="hover:text-gray-900 dark:hover:text-white transition-colors" title="Read our privacy policy" aria-label="Navigate to privacy policy">Privacy Policy</router-link>
-              <a href="/sitemap.xml" target="_blank" rel="noopener noreferrer" class="hover:text-gray-900 dark:hover:text-white transition-colors" title="View XML sitemap" aria-label="View sitemap">Sitemap</a>
+            <div class="flex flex-wrap items-center justify-center sm:justify-end gap-3 sm:gap-4 text-xs sm:text-sm font-medium text-gray-600 dark:text-gray-400">
+              <router-link to="/" class="hover:text-gray-900 dark:hover:text-white transition-colors whitespace-nowrap" title="Spritesheet Generator Home" aria-label="Navigate to home page">Home</router-link>
+              <router-link to="/blog" class="hover:text-gray-900 dark:hover:text-white transition-colors whitespace-nowrap" title="Read our blog posts" aria-label="Navigate to blog">Blog</router-link>
+              <router-link to="/about" class="hover:text-gray-900 dark:hover:text-white transition-colors whitespace-nowrap" title="Learn more about us" aria-label="Navigate to about page">About Us</router-link>
+              <router-link to="/contact" class="hover:text-gray-900 dark:hover:text-white transition-colors whitespace-nowrap" title="Get in touch with us" aria-label="Navigate to contact page">Contact</router-link>
+              <router-link to="/faq" class="hover:text-gray-900 dark:hover:text-white transition-colors whitespace-nowrap" title="Frequently Asked Questions" aria-label="Navigate to FAQ page">FAQ</router-link>
+              <router-link to="/privacy-policy" class="hover:text-gray-900 dark:hover:text-white transition-colors whitespace-nowrap" title="Read our privacy policy" aria-label="Navigate to privacy policy">Privacy Policy</router-link>
+              <a href="/sitemap.xml" target="_blank" rel="noopener noreferrer" class="hover:text-gray-900 dark:hover:text-white transition-colors whitespace-nowrap" title="View XML sitemap" aria-label="View sitemap">Sitemap</a>
             </div>
           </div>
         </div>