diff --git a/assets/css/_forms.scss b/assets/css/_forms.scss
new file mode 100644
index 0000000..0c183e2
--- /dev/null
+++ b/assets/css/_forms.scss
@@ -0,0 +1,7 @@
+.form {
+  background-color: $form-background-color;
+  border-radius: $base-border-radius;
+  margin: 0 auto;
+  max-width: 40rem;
+  padding: $small-spacing;
+}
diff --git a/assets/css/_headings.scss b/assets/css/_headings.scss
index 2f41025..2c9a424 100644
--- a/assets/css/_headings.scss
+++ b/assets/css/_headings.scss
@@ -1,3 +1,15 @@
+h1,
+h2,
+h3,
+h4 {
+  font-weight: 300;
+}
+
+h1 {
+  font-size: 1.6em;
+  margin: 0;
+}
+
 .heading {
   font-family: $heading-font-family;
   font-size: modular-scale(1);
diff --git a/assets/css/_layout.scss b/assets/css/_layout.scss
index 1c01222..d0356fc 100644
--- a/assets/css/_layout.scss
+++ b/assets/css/_layout.scss
@@ -8,18 +8,6 @@ a {
   color: mix($background-color, $link-color, 30%);
 }
 
-h1,
-h2,
-h3,
-h4 {
-  font-weight: 300;
-}
-
-h1 {
-  font-size: 1.6em;
-  margin: 0;
-}
-
 main {
   margin-top: 5vmin;
 }
diff --git a/assets/css/_variables.scss b/assets/css/_variables.scss
index c368f28..9d0ed7f 100644
--- a/assets/css/_variables.scss
+++ b/assets/css/_variables.scss
@@ -6,6 +6,8 @@ $foreground-color: $white;
 
 $link-color: #fd0;
 
+$form-background-color: darken($background-color, 4%);
+
 $board-border-color: #000;
 $board-shadow-color: rgba(0, 0, 0, 0.4);
 
diff --git a/assets/css/app.scss b/assets/css/app.scss
index 76bbed1..f081355 100644
--- a/assets/css/app.scss
+++ b/assets/css/app.scss
@@ -8,6 +8,7 @@
 
 @import "tables";
 @import "headings";
+@import "forms";
 
 @import "layout";
 @import "nav";
diff --git a/assets/css/base/_tables.scss b/assets/css/base/_tables.scss
index e25bc52..cdec0e9 100644
--- a/assets/css/base/_tables.scss
+++ b/assets/css/base/_tables.scss
@@ -24,5 +24,5 @@ th {
 
 th,
 td {
-  padding: $small-spacing $small-spacing $small-spacing 0;
+  padding: $x-small-spacing;
 }
diff --git a/assets/css/base/_typography.scss b/assets/css/base/_typography.scss
index 2f036a5..6521f8f 100644
--- a/assets/css/base/_typography.scss
+++ b/assets/css/base/_typography.scss
@@ -18,7 +18,7 @@ h6 {
 }
 
 p {
-  margin: 0 0 $small-spacing;
+  margin: $small-spacing 0 $small-spacing;
 }
 
 a {
diff --git a/assets/css/base/_variables.scss b/assets/css/base/_variables.scss
index b10827a..4638cbe 100644
--- a/assets/css/base/_variables.scss
+++ b/assets/css/base/_variables.scss
@@ -7,9 +7,10 @@ $base-line-height: 1.5;
 $heading-line-height: 1.2;
 
 // Other Sizes
-$base-border-radius: 3px;
-$base-spacing: 1.5em;
+$base-border-radius: 0.25rem;
+$base-spacing: 2em;
 $small-spacing: $base-spacing / 2;
+$x-small-spacing: $small-spacing / 2;
 $base-z-index: 0;
 
 // Colors
diff --git a/lib/chess_web/templates/game/new.html.eex b/lib/chess_web/templates/game/new.html.eex
index 2b26914..5cc9255 100644
--- a/lib/chess_web/templates/game/new.html.eex
+++ b/lib/chess_web/templates/game/new.html.eex
@@ -1,17 +1,19 @@
-<h2><%= gettext "New game" %></h2>
+<div class="form">
+  <h2><%= gettext "New game" %></h2>
 
-<%= form_for @changeset, game_path(@conn, :create), [class: "create-game"],
-    fn form -> %>
-  <div class="form-group">
-    <%= label form, :opponent_id %>
-    <%= select form,
-          :opponent_id,
-          @opponents,
-          prompt: gettext("Choose an opponent") %>
-    <%= error_tag form, :opponent_id %>
-  </div>
+  <%= form_for @changeset, game_path(@conn, :create), [class: "create-game"],
+      fn form -> %>
+    <div class="form-group">
+      <%= label form, :opponent_id %>
+      <%= select form,
+            :opponent_id,
+            @opponents,
+            prompt: gettext("Choose an opponent") %>
+      <%= error_tag form, :opponent_id %>
+    </div>
 
-  <div class="form-group">
-    <%= submit gettext("Create game"), class: "button" %>
-  </div>
-<% end %>
+    <div class="form-group">
+      <%= submit gettext("Create game"), class: "button" %>
+    </div>
+  <% end %>
+</div>
diff --git a/lib/chess_web/templates/registration/new.html.eex b/lib/chess_web/templates/registration/new.html.eex
index ebbd32c..a5c732e 100644
--- a/lib/chess_web/templates/registration/new.html.eex
+++ b/lib/chess_web/templates/registration/new.html.eex
@@ -1,26 +1,28 @@
-<h2><%= gettext "Register" %></h2>
+<div class="form">
+  <h2><%= gettext "Register" %></h2>
 
-<%= form_for @changeset, registration_path(@conn, :create), [class: "create-registration"], fn f -> %>
-  <%= if @changeset.action do %>
-    <div class="alert alert-danger">
-      <p>
-        <%= gettext "Oops, something went wrong! Please check the errors below." %>
-      </p>
+  <%= form_for @changeset, registration_path(@conn, :create), [class: "create-registration"], fn f -> %>
+    <%= if @changeset.action do %>
+      <div class="alert alert-danger">
+        <p>
+          <%= gettext "Oops, something went wrong! Please check the errors below." %>
+        </p>
+      </div>
+    <% end %>
+
+    <div class="form-group">
+      <div class="form-field">
+        <%= input f, :name %>
+      </div>
+      <div class="form-field">
+        <%= input f, :email, as: :email %>
+      </div>
+      <div class="form-field">
+        <%= input f, :password, as: :password %>
+      </div>
+    </div>
+    <div class="form-group">
+      <%= submit gettext("Register"), class: "btn btn-primary" %>
     </div>
   <% end %>
-
-  <div class="form-group">
-    <div class="form-field">
-      <%= input f, :name %>
-    </div>
-    <div class="form-field">
-      <%= input f, :email, as: :email %>
-    </div>
-    <div class="form-field">
-      <%= input f, :password, as: :password %>
-    </div>
-  </div>
-  <div class="form-group">
-    <%= submit gettext("Register"), class: "btn btn-primary" %>
-  </div>
-<% end %>
+</div>
diff --git a/lib/chess_web/templates/session/new.html.eex b/lib/chess_web/templates/session/new.html.eex
index e02b6a2..3fd0bf4 100644
--- a/lib/chess_web/templates/session/new.html.eex
+++ b/lib/chess_web/templates/session/new.html.eex
@@ -1,23 +1,25 @@
-<h2><%= gettext "Log in" %></h2>
+<div class="form">
+  <h2><%= gettext "Log in" %></h2>
 
-<%= form_for @changeset, session_path(@conn, :create), [class: "create-session"], fn f -> %>
-  <%= if @changeset.action do %>
-    <div class="alert alert-danger">
-      <p>
-        <%= gettext "Oops, something went wrong! Please check the errors below." %>
-      </p>
+  <%= form_for @changeset, session_path(@conn, :create), [class: "create-session"], fn f -> %>
+    <%= if @changeset.action do %>
+      <div class="alert alert-danger">
+        <p>
+          <%= gettext "Oops, something went wrong! Please check the errors below." %>
+        </p>
+      </div>
+    <% end %>
+
+    <div class="form-group">
+      <div class="form-field">
+        <%= input f, :email, as: :email %>
+      </div>
+      <div class="form-field">
+        <%= input f, :password, as: :password %>
+      </div>
+    </div>
+    <div class="form-group">
+      <%= submit gettext("Log in"), class: "btn btn-primary" %>
     </div>
   <% end %>
-
-  <div class="form-group">
-    <div class="form-field">
-      <%= input f, :email, as: :email %>
-    </div>
-    <div class="form-field">
-      <%= input f, :password, as: :password %>
-    </div>
-  </div>
-  <div class="form-group">
-    <%= submit gettext("Log in"), class: "btn btn-primary" %>
-  </div>
-<% end %>
+</div>