diff --git a/app/public/style.css b/app/public/style.css
index bff2cf5..6d53d1b 100644
--- a/app/public/style.css
+++ b/app/public/style.css
@@ -51,6 +51,14 @@
 
 body {
     font-family: 'Phantom Sans', sans-serif !important;
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    margin: 0;
+}
+
+.main-content {
+    flex: 1;
 }
 
 body.dark-mode {
@@ -129,9 +137,9 @@ a:hover {
 .footer {
     z-index: 42060;
     background-color: var(--sunken);
-    position: fixed;
-    bottom: 0;
-    width: 100%
+    width: 100%;
+    padding: 14px 16px;
+    text-align: center;
 }
 
 .footer-text {
diff --git a/app/views/layout.erb b/app/views/layout.erb
index 71dba71..783b9a5 100644
--- a/app/views/layout.erb
+++ b/app/views/layout.erb
@@ -39,15 +39,17 @@
       <i class="fa-solid fa-moon"></i>
     </button>
   </nav>
-  <div style="margin-top: 64px">
-    <% if @error %>
-      <div class="container">
-        <div class="card" style="background: var(--orange); margin-bottom: var(--spacing-2); color: var(--white)">
-          <b>error:</b> <%= @error %>
+  <div class="main-content">
+    <div style="margin-top: 64px">
+      <% if @error %>
+        <div class="container">
+          <div class="card" style="background: var(--orange); margin-bottom: var(--spacing-2); color: var(--white)">
+            <b>error:</b> <%= @error %>
+          </div>
         </div>
-      </div>
-    <% end %>
-    <%= yield %>
+      <% end %>
+      <%= yield %>
+    </div>
   </div>
   <div class="footer">
     <div class="footer-text">