diff --git a/assets/css/_login.scss b/assets/css/_login.scss
new file mode 100644
index 0000000..44f1bf6
--- /dev/null
+++ b/assets/css/_login.scss
@@ -0,0 +1,22 @@
+.login {
+    @include headers;
+
+    @include element(form) {
+        margin-bottom: 2rem;
+
+        @include element(button) {
+            @include gather-button;
+            padding: 0.5rem 1.2rem;
+        }
+    }
+
+    @include element(note) {
+        font-weight: bold;
+    }
+
+    @include element(warning) {
+        background-color: var(--warning);
+        margin: 2rem -0.5rem;
+        padding: 0.5rem;
+    }
+}
\ No newline at end of file
diff --git a/assets/css/app.scss b/assets/css/app.scss
index 4bfa5a4..a336775 100644
--- a/assets/css/app.scss
+++ b/assets/css/app.scss
@@ -9,6 +9,8 @@
 @include foundation-everything();
 @import "./nav";
 
+// CSS for individual pages 
+@import "./login";
 
 body {
     header {
diff --git a/lib/gather_web/templates/authentication/login.html.eex b/lib/gather_web/templates/authentication/login.html.eex
index 25d2a13..1c24e9a 100644
--- a/lib/gather_web/templates/authentication/login.html.eex
+++ b/lib/gather_web/templates/authentication/login.html.eex
@@ -1,43 +1,45 @@
-<h2 class="header"><%= gettext "Login" %></h2>
+<div class="login grid-container grid-x">
+	<h1 class="header cell"><%= gettext "Login" %></h1>
 
-<%= form_for @conn, Routes.authentication_path(@conn, :login),  fn f -> %>
-	<div class="form-group">
-		<%= label f, :username, gettext("Username"), class: "control-label" %>
-		<%= text_input f, :username, class: "form-control" %>
-		<%= error_tag f, :username %>
-  	</div>
+	<%= form_for @conn, Routes.authentication_path(@conn, :login), [class: "login__form cell"], fn f -> %>
+		<div class="form-group grid-x">
+			<%= label f, :username, gettext("Username"), class: "control-label cell" %>
+			<%= text_input f, :username, class: "form-control cell medium-6" %>
+			<%= error_tag f, :username %>
+		</div>
 
-	<div class="form-group">
-		<%= label f, :password, gettext("Password"), class: "control-label" %>
-		<%= password_input f, :password, class: "form-control" %>
-		<%= error_tag f, :password %>
-  	</div>
-	
-	<div class="form-group">
-		<%= submit gettext("Login"), class: "btn btn-main" %>
-	</div>
-<% end %>
+		<div class="form-group grid-x">
+			<%= label f, :password, gettext("Password"), class: "control-label cell" %>
+			<%= password_input f, :password, class: "form-control cell medium-6" %>
+			<%= error_tag f, :password %>
+		</div>
+		
+		<div class="form-group">
+			<%= submit gettext("Login"), class: "login__form__button" %>
+		</div>
+	<% end %>
 
-<div class="note">
-<% link = "<a href='#{Routes.page_path(@conn, :contact)}'> #{gettext("contact")} </a>" %>
-<%= gettext("""
-		Don't have an account? This website is only for refugees and former refugees in New Zealand,
-		so you can't automatically sign up. If you think you fit this and would like an account,
-		or if you just want to know more, please %{contact} us!
-		""", contact: link) |> raw() %>
-</div>
+	<div class="login__note">
+		<% link = "<a href='#{Routes.page_path(@conn, :contact)}'> #{gettext("contact")} </a>" %>
+		<%= gettext("""
+				Don't have an account? This website is only for refugees and former refugees in New Zealand,
+				so you can't automatically sign up. If you think you fit this and would like an account,
+				or if you just want to know more, please %{contact} us!
+				""", contact: link) |> raw() %>
+	</div>
 
-<div class="warning">
-	<p>While this website is in development, <a href="<%= Routes.user_path(@conn, :new) %>">you can sign up</a>
-	and play around as much as you like. <b>Note: while the website is in development, your account may be deleted
-	without any warning.</b></p>
-	<p>If you want to help out, especially with <ul>
-		<li>Design</li>
-		<li>Translations</li>
-		<li>CSS / JavaScript</li>
-		<li>Content / website behaviour decisions</li>
-		<li>Getting the website to community leaders / the relevant agencies once it's built</li>
-		</ul>
-		please don't hesitate to contact us; we'd love your help!
-	</p>
+	<div class="login__warning">
+		<p>While this website is in development, <a href="<%= Routes.user_path(@conn, :new) %>">you can sign up</a>
+		and play around as much as you like. <b>Note: while the website is in development, your account may be deleted
+		without any warning.</b></p>
+		<p>If you want to help out, especially with <ul>
+			<li>Design</li>
+			<li>Translations</li>
+			<li>CSS / JavaScript</li>
+			<li>Content / website behaviour decisions</li>
+			<li>Getting the website to community leaders / the relevant agencies once it's built</li>
+			</ul>
+			please don't hesitate to contact us; we'd love your help!
+		</p>
+	</div>
 </div>
\ No newline at end of file
diff --git a/lib/gather_web/templates/layout/app.html.eex b/lib/gather_web/templates/layout/app.html.eex
index 4753c94..f206b68 100644
--- a/lib/gather_web/templates/layout/app.html.eex
+++ b/lib/gather_web/templates/layout/app.html.eex
@@ -19,7 +19,7 @@
         <%= render "navigation.html", assigns %>
       </section>
     </header>
-    <main role="main" class="grid-container">
+    <main role="main">
       <p class="alert" role="alert"><%= get_flash(@conn, :info) %></p>
       <p class="alert alert--danger" role="alert"><%= get_flash(@conn, :error) %></p>
       <%= render @view_module, @view_template, assigns %>