diff --git a/src/app.css b/src/app.css
index 07d00c8..14a18ea 100644
--- a/src/app.css
+++ b/src/app.css
@@ -65,11 +65,21 @@
 }
 
 /* Base styles */
+html,
 body {
-  min-height: 100vh;
+  height: 100%;
   margin: 0;
+  padding: 0;
+  overflow-x: hidden;
   background-color: var(--color-primary);
   color: var(--color-text);
+  overscroll-behavior: none;
+}
+
+#app {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
 #svelte {
diff --git a/src/app.html b/src/app.html
index f2da757..68cc404 100644
--- a/src/app.html
+++ b/src/app.html
@@ -3,10 +3,10 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%sveltekit.assets%/favicon.png" />
-    <meta name="viewport" content="width=device-width" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
     %sveltekit.head%
   </head>
   <body>
-    <div>%sveltekit.body%</div>
+    <div id="app">%sveltekit.body%</div>
   </body>
 </html>
diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
index 67cd45b..0c3837d 100644
--- a/src/lib/components/Footer.svelte
+++ b/src/lib/components/Footer.svelte
@@ -47,5 +47,6 @@ footer {
   left: 0;
   right: 0;
   width: 100%;
+  margin-top: auto;
 }
 </style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 4168fc5..62089e5 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -24,7 +24,7 @@ onMount(() => {
 });
 </script>
 
-<div class="flex min-h-screen flex-col">
+<div class="flex min-h-screen flex-col overflow-hidden">
   <Header />
 
   <main
@@ -38,11 +38,15 @@ onMount(() => {
 
 <style>
 /* Global styles that can't be handled with Tailwind directly */
+:global(html),
 :global(body) {
   overflow-x: hidden;
   max-width: 100vw;
   margin: 0;
   padding: 0;
+  overscroll-behavior-y: none;
+  position: relative;
+  height: 100%;
 }
 
 :global(.container) {
