diff --git a/public/fog-texture.png b/public/fog-texture.png
new file mode 100644
index 0000000..d27890a
Binary files /dev/null and b/public/fog-texture.png differ
diff --git a/src/app/globals.css b/src/app/globals.css
index ad986c8..920a1e8 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -189,6 +189,7 @@
     letter-spacing: var(--tracking-normal);
     background-color: transparent;
     min-height: 100vh;
+    min-height: 100dvh;
     overflow-x: hidden;
   }
 
diff --git a/src/components/Dashboard.tsx b/src/components/Dashboard.tsx
index 0c4af80..1b6a3da 100644
--- a/src/components/Dashboard.tsx
+++ b/src/components/Dashboard.tsx
@@ -219,7 +219,7 @@ export function Dashboard({ user }: DashboardProps) {
     <div className="min-h-screen">
       <UserHeader user={user} preferences={preferences} />
 
-      <main className="container mx-auto px-4 py-8">
+      <main className="container mx-auto px-4 py-8 pb-24 sm:pb-8">
         {preferences && (
           <>
             {/* Floating Log Button */}
diff --git a/src/components/UsageCalendar.tsx b/src/components/UsageCalendar.tsx
index a9b1974..db17c04 100644
--- a/src/components/UsageCalendar.tsx
+++ b/src/components/UsageCalendar.tsx
@@ -213,7 +213,7 @@ export function UsageCalendar({ usageData, onDataUpdate, religion, onReligionUpd
   return (
     <>
       <Card className="bg-card/80 backdrop-blur-xl shadow-xl drop-shadow-lg hover-lift transition-all duration-300 border-white/10 overflow-hidden">
-        <CardContent className="p-1 sm:p-6">
+        <CardContent className="p-3 sm:p-6">
           <div className="flex flex-col lg:flex-row gap-4">
             {/* Calendar */}
             <div className="w-full lg:w-auto overflow-x-auto block">