diff --git a/components/footer.tsx b/components/footer.tsx
index b593008..cec7914 100644
--- a/components/footer.tsx
+++ b/components/footer.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 
 export default function Footer() {
   return (
-    <footer className="mt-5 mb-2">
+    <footer className="footer">
       <p>i.A. des Freundeskreis des VCP Rosenfeld</p>
       <p>
         Hier sollte es irgendwann ein Impressum, Datenschutzhinweise usw. geben.
diff --git a/components/wizard/index.tsx b/components/wizard/index.tsx
index fdc82ef..07839cc 100644
--- a/components/wizard/index.tsx
+++ b/components/wizard/index.tsx
@@ -53,14 +53,14 @@ function WizardInternal() {
 
   return (
     <form
-      className="w-full max-w-lg"
+      className="form"
       onSubmit={(event) => {
         event.preventDefault()
         onSubmit()
       }}
     >
       {dataStoredLoaded && (
-        <p className="my-12">
+        <p className="mb-12">
           Gespeicherte Daten wurden aus Deinem Browser geladen.{' '}
           <a className="link" onClick={forgetData} href="">
             Daten wieder vergessen
diff --git a/pages/index.tsx b/pages/index.tsx
index 9589210..3577e1a 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -6,14 +6,14 @@ import Wizard from '../components/wizard/index'
 
 export default function Home() {
   return (
-    <div className="mx-3 flex flex-col min-h-screen">
+    <div className="wrapper">
       <Head>
         <title>Pfadi Bussle Buchen</title>
         <link rel="icon" href="/favicon.ico" />
       </Head>
 
       <Header />
-      <main className="flex-grow">
+      <main className="main">
         <Wizard />
       </main>
       <Footer />
diff --git a/styles/index.css b/styles/index.css
index ab378f7..d891266 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -12,6 +12,28 @@
 
 /* Your own custom utilities */
 
+.wrapper {
+  @apply mx-3 flex flex-col min-h-screen;
+}
+
+@screen sm {
+  .wrapper {
+    @apply w-3/4 max-w-xl m-auto;
+  }
+}
+
+.main {
+  @apply flex-grow;
+}
+
+.footer {
+  @apply mt-5 mb-2;
+}
+
+.form {
+  @apply w-full bg-blue-100 p-6 rounded;
+}
+
 .fsw {
   @apply flex flex-wrap -mx-3 mb-2;
 }
@@ -92,11 +114,6 @@
   @apply text-blue-700;
 }
 
-@screen sm {
-  .fs {
-    @apply w-1/2 mb-0;
-  }
-}
 .DayPickerInput .input-text {
   @apply w-full;
 }
