diff --git a/backend/templates/index.html b/backend/templates/index.html
index 0559963..b5aebcd 100644
--- a/backend/templates/index.html
+++ b/backend/templates/index.html
@@ -14,7 +14,7 @@
         flex-direction: column;
         margin: auto auto;
         height: 95vh;
-        width: 90vh;
+        width: 75vw;
       }
       #container div {
         align-self: center;
@@ -28,16 +28,16 @@
   </head>
 
   <body>
-    {% with messages = get_flashed_messages() %}
-    {% if messages %}
-    <ul class="messages">
-      {% for message in messages %}
-      <li>{{ message }}</li>
-      {% endfor %}
-    </ul>
-    {% endif %}
-    {% endwith %}
     <div id="container">
+      {% with messages = get_flashed_messages() %}
+      {% if messages %}
+      <ul class="messages">
+        {% for message in messages %}
+        <li>{{ message }}</li>
+        {% endfor %}
+      </ul>
+      {% endif %}
+      {% endwith %}
       <div id="main"></div>
     </div>
     <script>
diff --git a/backend/templates/set_surprise.html b/backend/templates/set_surprise.html
index 33a9e67..8fe3ba6 100644
--- a/backend/templates/set_surprise.html
+++ b/backend/templates/set_surprise.html
@@ -4,34 +4,51 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{ title }}</title>
-    <style>body { padding: 0; margin: 0; }</style>
+    <style>
+      body {
+        text-align:center;
+      }
+      #container {
+        display: flex;
+        flex-direction: column;
+        margin: auto auto;
+        height: 95vh;
+        width: 75vw;
+      }
+      #container div {
+        align-self: center;
+        padding: 10px;
+      }
+    </style>
   </head>
 
   <body>
-    {% with messages = get_flashed_messages() %}
-    {% if messages %}
-    <ul class="messages">
-      {% for message in messages %}
-      <li>{{ message }}</li>
-      {% endfor %}
-    </ul>
-    {% endif %}
-    {% endwith %}
-    <form class="form-signin" method="POST" action="/post-surprise">
-      <h2 class="form-signin-heading">Set surprise</h2>
-      {% for v in enum %}
-      <div>
-        <input type="radio" name="surprise" id="{{ v }}" value="{{ v }}">
-        <label for="{{ v }}">{{ v }}</label>
-      </div>
-      {% endfor %}
-      <div>
-        <input class="form-control" type="password" required name="password" placeholder="Password">
-      </div>
-      <div>
-        <button class="btn btn-lg btn-primary btn-block" type="submit">Set surprise</button>
-      </div>
-    </form>
+    <div id="container">
+      {% with messages = get_flashed_messages() %}
+      {% if messages %}
+      <ul class="messages">
+        {% for message in messages %}
+        <li>{{ message }}</li>
+        {% endfor %}
+      </ul>
+      {% endif %}
+      {% endwith %}
+      <form class="form-signin" method="POST" action="/post-surprise">
+        <h2 class="form-signin-heading">Set surprise</h2>
+        {% for v in enum %}
+        <div>
+          <input type="radio" name="surprise" id="{{ v }}" value="{{ v }}">
+          <label for="{{ v }}">{{ v }}</label>
+        </div>
+        {% endfor %}
+        <div>
+          <input class="form-control" type="password" required name="password" placeholder="Password">
+        </div>
+        <div>
+          <button class="btn btn-lg btn-primary btn-block" type="submit">Set surprise</button>
+        </div>
+      </form>
+    </div>
   </body>
 </html>
 
