diff --git a/app/assets/images/github-64.png b/app/assets/images/github-64.png
new file mode 100644
index 0000000..182a1a3
Binary files /dev/null and b/app/assets/images/github-64.png differ
diff --git a/app/assets/stylesheets/home.css.sass b/app/assets/stylesheets/home.css.sass
deleted file mode 100644
index 747e487..0000000
--- a/app/assets/stylesheets/home.css.sass
+++ /dev/null
@@ -1,14 +0,0 @@
-// Place all the styles related to the home controller here.
-// They will automatically be included in application.css.
-// You can use Sass (SCSS) here: http://sass-lang.com/
-
-html
-  font-size: 100%
-  font-family: 'Helvetica Neue', 'Arial', sans-serif
-
-header, main
-  max-width: 60rem
-  margin: 0 auto
-
-header
-  text-align: right
diff --git a/app/assets/stylesheets/home.css.scss b/app/assets/stylesheets/home.css.scss
new file mode 100644
index 0000000..d3afaa1
--- /dev/null
+++ b/app/assets/stylesheets/home.css.scss
@@ -0,0 +1,35 @@
+// Place all the styles related to the home controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: http://sass-lang.com/
+
+html {
+  background-color: #333333;
+  color: white;
+  font-size: 100%;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+               Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+               "Segoe UI Symbol";
+}
+
+h1, h2, h3 {
+  font-weight: normal;
+}
+
+a {
+  color: #677b83;
+}
+
+body {
+  margin: 0;
+}
+
+.container {
+  padding: 0.5rem 4%;
+  max-width: 80rem;
+  margin: 0 auto;
+}
+
+header {
+  background-color: black;
+  text-align: right;
+}
diff --git a/app/assets/stylesheets/images.css.sass b/app/assets/stylesheets/images.css.sass
deleted file mode 100644
index c1714cb..0000000
--- a/app/assets/stylesheets/images.css.sass
+++ /dev/null
@@ -1,20 +0,0 @@
-// Place all the styles related to the images controller here.
-// They will automatically be included in application.css.
-// You can use Sass (SCSS) here: http://sass-lang.com/
-
-ul.images
-  list-style: none
-  padding-left: 0
-  display: grid
-  grid-template-columns: repeat(6, 1fr)
-  grid-gap: 0.75rem
-  justify-content: space-between
-
-  li
-    margin-bottom: 1em
-
-  img
-    max-width: calc(100% - 0.5rem)
-    box-shadow: 0 0 2px rgba(0, 0, 0, 0.2)
-    border-radius: 2px
-    padding: 0.25rem
diff --git a/app/assets/stylesheets/images.css.scss b/app/assets/stylesheets/images.css.scss
new file mode 100644
index 0000000..a174919
--- /dev/null
+++ b/app/assets/stylesheets/images.css.scss
@@ -0,0 +1,40 @@
+// Place all the styles related to the images controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: http://sass-lang.com/
+
+ul.images {
+  list-style: none;
+  padding-left: 0;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-gap: 0.75rem;
+  justify-content: space-between;
+
+  li {
+    margin-bottom: 1em;
+  }
+
+  img {
+    background-color: white;
+    max-width: calc(100% - 0.5rem);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
+    border-radius: 2px;
+    padding: 0.25rem;
+  }
+}
+
+@media (min-width: 380px) {
+  ul.images { grid-template-columns: repeat(3, 1fr); }
+}
+
+@media (min-width: 590px) {
+  ul.images { grid-template-columns: repeat(4, 1fr); }
+}
+
+@media (min-width: 820px) {
+  ul.images { grid-template-columns: repeat(5, 1fr); }
+}
+
+@media (min-width: 1000px) {
+  ul.images { grid-template-columns: repeat(6, 1fr); }
+}
diff --git a/app/assets/stylesheets/sessions.css.sass b/app/assets/stylesheets/sessions.css.sass
deleted file mode 100644
index 7bef9cf..0000000
--- a/app/assets/stylesheets/sessions.css.sass
+++ /dev/null
@@ -1,3 +0,0 @@
-// Place all the styles related to the sessions controller here.
-// They will automatically be included in application.css.
-// You can use Sass (SCSS) here: http://sass-lang.com/
diff --git a/app/assets/stylesheets/sessions.css.scss b/app/assets/stylesheets/sessions.css.scss
new file mode 100644
index 0000000..63745ae
--- /dev/null
+++ b/app/assets/stylesheets/sessions.css.scss
@@ -0,0 +1,27 @@
+// Place all the styles related to the sessions controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: http://sass-lang.com/
+.centre-stage {
+  align-items: center;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.github-button {
+  display: block;
+  background: white;
+  color: black;
+  text-decoration: none;
+  padding: 0.5rem 2rem;
+  border-radius: 0.5rem;
+  img {
+    width: 1.2rem;
+    vertical-align: middle;
+    margin-right: 0.25rem;
+  }
+}
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index b87df0a..e9a4eaa 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -9,15 +9,19 @@
 <body>
 
   <header>
-    <% if @current_user %>
-      Signed in as: <%= @current_user.name %> | <%= link_to 'Sign out', session_path, method: :delete %>
-    <% end %>
+    <div class="container">
+      <% if @current_user %>
+        Signed in as: <%= @current_user.name %> | <%= link_to 'Sign out', session_path, method: :delete %>
+      <% else %>
+        <%= link_to 'Sign in with GitHub', '/auth/github' %>
+      <% end %>
+    </div>
   </header>
 
   <main>
-
-<%= yield %>
-
+    <div class="container">
+      <%= yield %>
+    </div>
   </main>
 
 </body>
diff --git a/app/views/sessions/new.html.erb b/app/views/sessions/new.html.erb
index ab95a24..885b5ae 100644
--- a/app/views/sessions/new.html.erb
+++ b/app/views/sessions/new.html.erb
@@ -1 +1,6 @@
-<%= link_to 'Sign in with GitHub', '/auth/github' %>
+<div class="centre-stage">
+  <%= link_to '/auth/github', class: "github-button" do %>
+    <%= image_tag "github-64.png" %>
+    Sign in with GitHub
+  <% end %>
+</div>