diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index 0106013..f307d5b 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -11,7 +11,7 @@ const AboutPage = () => {
         <Navigation />
         
         {/* Header */}
-        <div className="text-center mb-12">
+        <div className="text-center mb-12 pt-24 sm:pt-20">
           <h1 className="text-4xl sm:text-5xl font-bold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-teal-300">
             About
           </h1>
diff --git a/src/app/debug/page.tsx b/src/app/debug/page.tsx
index d00a52f..dbc466e 100644
--- a/src/app/debug/page.tsx
+++ b/src/app/debug/page.tsx
@@ -3,6 +3,7 @@
 import { useSession, signIn, signOut } from 'next-auth/react';
 import { useEffect, useState } from 'react';
 import Link from 'next/link';
+import Navigation from '../../components/Navigation';
 
 export default function DebugPage() {
   const { data: session, status } = useSession();
@@ -23,9 +24,12 @@ export default function DebugPage() {
   }, []);
 
   return (
-    <div className="min-h-screen bg-gray-900 p-8">
-      <div className="max-w-4xl mx-auto bg-gray-800 rounded-lg p-6 text-white">
-        <h1 className="text-2xl font-bold text-emerald-400 mb-6">Auth Debug Page</h1>
+    <div className="min-h-screen bg-gradient-to-b from-emerald-950 via-green-900 to-emerald-950">
+      <div className="container max-w-7xl mx-auto px-4 py-8">
+        <Navigation />
+        
+        <div className="max-w-4xl mx-auto bg-gray-800/80 rounded-lg p-6 text-white mt-24 sm:mt-20">
+          <h1 className="text-2xl font-bold text-emerald-400 mb-6">Auth Debug Page</h1>
         
         <div className="grid grid-cols-1 gap-6">
           <div className="bg-gray-700 p-4 rounded-lg">
@@ -70,6 +74,7 @@ export default function DebugPage() {
             </div>
           </div>
         </div>
+        </div>
       </div>
     </div>
   );
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 288f1b8..2f72992 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -85,7 +85,7 @@ const Page: React.FC = (): React.ReactElement => {
       <div className="container max-w-7xl mx-auto px-4 py-8">
         <Navigation />
         
-        <div className="text-center mb-8 pt-16 sm:pt-0">
+        <div className="text-center mb-8 pt-24 sm:pt-20">
           <h1 className={`text-4xl sm:text-5xl font-bold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-${theme.primary}-400 to-${theme.secondary}-300`}>
             {APP_CONFIG.title}
           </h1>
diff --git a/src/app/points/page.tsx b/src/app/points/page.tsx
index 2e28997..66bbff7 100644
--- a/src/app/points/page.tsx
+++ b/src/app/points/page.tsx
@@ -311,7 +311,7 @@ export default function PointsPage() {
       <div className="container max-w-7xl mx-auto px-4 py-8">
         <Navigation />
         
-        <div className="text-center mb-8">
+        <div className="text-center mb-8 pt-24 sm:pt-20">
           <h1 className="text-4xl sm:text-5xl font-bold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-teal-300">
             My Points
           </h1>
diff --git a/src/app/sightings/page.tsx b/src/app/sightings/page.tsx
index b0c2e13..9905a7e 100644
--- a/src/app/sightings/page.tsx
+++ b/src/app/sightings/page.tsx
@@ -167,7 +167,7 @@ export default function AnimalsPage() {
       <div className="container max-w-7xl mx-auto px-4 py-8">
         <Navigation />
         
-        <div className="text-center mb-8">
+        <div className="text-center mb-8 pt-24 sm:pt-20">
           <h1 className="text-4xl sm:text-5xl font-bold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-teal-300">
             {APP_CONFIG.title}
           </h1>
diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
index ed6db43..b6d0805 100644
--- a/src/components/Navigation.tsx
+++ b/src/components/Navigation.tsx
@@ -30,17 +30,17 @@ const Navigation = () => {
   const links = [...baseLinks, ...authLinks, ...devLinks]
 
   return (
-    <div className="fixed w-[calc(100%-2rem)] left-4 right-4 top-8 flex justify-between items-center bg-gray-900/50 py-2 px-4 rounded-lg">
-      <nav className="overflow-hidden">
-        <ul className="flex flex-wrap gap-2">
+    <div className="fixed w-[calc(100%-2rem)] left-4 right-4 top-4 md:top-6 flex justify-between items-center bg-gray-900/80 backdrop-blur-sm py-3 px-4 rounded-lg shadow-lg z-50 border border-gray-800/50">
+      <nav className="overflow-x-auto scrollbar-hide">
+        <ul className="flex gap-4 md:gap-6">
           {links.map(({ href, label }) => (
             <li key={href}>
               <Link
                 href={href}
-                className={`text-xs sm:text-sm transition-colors duration-200 ${
+                className={`text-sm md:text-base whitespace-nowrap transition-colors duration-200 ${
                   pathname === href
                     ? 'text-emerald-400 font-bold'
-                    : 'text-emerald-200/70 hover:text-emerald-200'
+                    : 'text-emerald-200/80 hover:text-emerald-200'
                 }`}
               >
                 {label}