diff --git a/app/globals.css b/app/globals.css
index b0f8944..4eef66b 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -174,3 +174,22 @@
 .overflow-y-auto::-webkit-scrollbar-thumb:hover {
   @apply bg-gray-500 dark:bg-slate-400;
 }
+
+/* Grid layout optimizations */
+.grid-layout {
+  min-height: 600px;
+  max-height: calc(100vh - 16rem);
+}
+
+@media (max-width: 1024px) {
+  .grid-layout {
+    min-height: auto;
+    max-height: none;
+  }
+}
+
+/* Ensure footer is always visible */
+footer {
+  position: relative;
+  z-index: 10;
+}
diff --git a/app/page.tsx b/app/page.tsx
index f29528b..774bda5 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -97,10 +97,10 @@ export default function Dashboard() {
       </header>
 
       {/* Main Content */}
-      <main className="pt-20 pb-8 px-4">
+      <main className="pt-20 pb-24 px-4">
         <div className="container mx-auto max-w-6xl">
           {/* Single Responsive Layout */}
-          <div className="grid grid-cols-1 lg:grid-cols-2 lg:grid-rows-2 gap-6 lg:h-[calc(100vh-12rem)] lg:max-h-[800px]">
+          <div className="grid grid-cols-1 lg:grid-cols-2 lg:grid-rows-2 gap-6 grid-layout">
             {/* Timer - Always first */}
             <div className="lg:col-span-1 lg:row-span-1 flex flex-col">
               <PomodoroTimer
@@ -133,7 +133,7 @@ export default function Dashboard() {
       </main>
 
       {/* Footer */}
-      <footer className="text-center py-6 text-sm text-[#87A96B]/70 dark:text-gray-400 transition-colors duration-300 space-y-2">
+      <footer className="relative z-10 text-center py-8 text-sm text-[#87A96B]/70 dark:text-gray-400 transition-colors duration-300 space-y-2 bg-white/80 dark:bg-slate-900/80 backdrop-blur-sm border-t border-[#87A96B]/20 dark:border-slate-700">
         <div>Made for parents who code during naptime • by @meimakes</div>
         <div className="flex items-center justify-center gap-3">
           <span className="px-2 py-1 bg-[#87A96B]/10 dark:bg-slate-700 rounded text-xs font-mono">