diff --git a/app/assets/javascripts/signup.js b/app/assets/javascripts/signup.js
new file mode 100644
index 0000000..53be18b
--- /dev/null
+++ b/app/assets/javascripts/signup.js
@@ -0,0 +1,24 @@
+var Signup = {
+  screen: 0,
+  nextScreen: function() {
+    $(".screen[data-screen=" + this.screen + "]").addClass("screen--closed");
+    this.screen += 1;
+    $(".screen[data-screen=" + this.screen + "]").removeClass("screen--future");
+  },
+  prevScreen: function() {
+    $(".screen[data-screen=" + this.screen + "]").addClass("screen--future");
+    this.screen -= 1;
+    $(".screen[data-screen=" + this.screen + "]").removeClass("screen--closed");
+  }
+};
+
+$(document).on("page:change", function() {
+  if ($(".signup").length == 0) return;
+  Signup.screen = 0;
+});
+$(document).on("click", ".signup__next", function() {
+  Signup.nextScreen();
+});
+$(document).on("click", ".signup__prev", function() {
+  Signup.prevScreen();
+});
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 4a809c5..0dfd71e 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -23,4 +23,49 @@ body {
   margin: 0;
   font-size: 1em;
   @include OpenSans;
-}
\ No newline at end of file
+}
+
+//Global styles
+
+// Taken from main site styles
+button, input {
+  font-size: 1em;
+  border: 0;
+  @include OpenSans;
+}
+.button, a.button {
+  cursor: pointer;
+  display: inline-block;
+  border: 0;
+  padding: 0.6em 1.1em;
+  margin: 0.3em;
+  border-radius: 0.3em;
+  -webkit-font-smoothing: antialiased;
+  transform: translate3d( 0, 0, 0);
+  background-color: $light;
+  color: $dark;
+  text-decoration: none;
+  transition: all 0.3s cubic-bezier(0,1.5,0.5,1);
+}
+.button:hover {
+  transform: scale(1.1) translate3d( 0, 0, 0 );
+}
+.button--primary, a.button--primary {
+  font-size: 1.2em;
+  background-color:$secondary;
+  color: $light;
+}
+.button--secondary, a.button--secondary {
+  background-color:$accent;
+  color: $light;
+}
+.button--social, a.button--social {
+  padding-left: 0.6em;
+  padding-right: 0.6em;
+  min-width: 1em;
+}
+.button--simple, a.button--simple {
+  font-weight: normal;
+  background-color: transparent;
+  color: $light;
+}
diff --git a/app/assets/stylesheets/home.scss b/app/assets/stylesheets/home.scss
index be566ba..8a9ab29 100644
--- a/app/assets/stylesheets/home.scss
+++ b/app/assets/stylesheets/home.scss
@@ -9,44 +9,6 @@
 
 @import "variables";
 
-// Taken from main site styles
-.button, a.button {
-  cursor: pointer;
-  display: inline-block;
-  border: 0;
-  padding: 0.6em 1.1em;
-  margin: 0.3em;
-  border-radius: 0.3em;
-  -webkit-font-smoothing: antialiased;
-  transform: translate3d( 0, 0, 0);
-  background-color: $light;
-  color: $dark;
-  text-decoration: none;
-  transition: all 0.3s cubic-bezier(0,1.5,0.5,1);
-}
-.button:hover {
-  transform: scale(1.1) translate3d( 0, 0, 0 );
-}
-.button--primary, a.button--primary {
-  font-size: 1.2em;
-  background-color:$secondary;
-  color: $light;
-}
-.button--secondary, a.button--secondary {
-  background-color:$accent;
-  color: $light;
-}
-.button--social, a.button--social {
-  padding-left: 0.6em;
-  padding-right: 0.6em;
-  min-width: 1em;
-}
-.button--simple, a.button--simple {
-  font-weight: normal;
-  background-color: transparent;
-  color: $light;
-}
-
 .landing{
   height: 100vh;
   display: flex;
@@ -57,4 +19,4 @@
     width: auto;
     height: 200px;
   }
-}
\ No newline at end of file
+}
diff --git a/app/assets/stylesheets/signup.scss b/app/assets/stylesheets/signup.scss
new file mode 100644
index 0000000..606af60
--- /dev/null
+++ b/app/assets/stylesheets/signup.scss
@@ -0,0 +1,70 @@
+@import "variables";
+@import "fonts";
+
+.signup {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: scroll;
+  background-color: $primary;
+  color: $light;
+
+  h1 {
+    font-size: 3em;
+    @include OpenSansLight;
+  }
+}
+.screen {
+  flex: 0;
+  overflow: hidden;
+  height: 100vh;
+  margin-top:0;
+  transition: all ease-in-out 0.4s;
+  padding: 0 2em;
+  max-width: 1000px;
+  margin-right: auto;
+  margin-left: auto;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  &.screen--future {
+    height: 0;
+    .screen__nav {
+      opacity: 0;
+      transform: translateY(10vh);
+    }
+  }
+  &.screen--closed {
+    margin-top: -100vh;
+    opacity: 0;
+  }
+
+  .field {
+    display: flex;
+    width: 100%;
+    max-width: 500px;
+    font-size: 1.3em;
+    margin: 0.5em 0;
+
+    label {
+      flex: 1;
+    }
+    input {
+      flex: 2;
+    }
+  }
+
+  .screen__nav {
+    transition: all ease-in-out 0.4s;
+    font-size: 1.2em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 1.5em 0;
+  }
+}
diff --git a/app/views/devise/registrations/new.html.erb b/app/views/devise/registrations/new.html.erb
index f9e9c9d..1d945b8 100644
--- a/app/views/devise/registrations/new.html.erb
+++ b/app/views/devise/registrations/new.html.erb
@@ -1,54 +1,78 @@
-<h2>Sign up</h2>
+<%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: {class: "signup"}) do |f| %>
+  <div class="screen" data-screen="0">
+    <h1>Sign up</h1>
+    <%= devise_error_messages! %>
 
-<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
-  <%= devise_error_messages! %>
+    <div class="field">
+      <%= f.label :first_name %>
+      <%= f.text_field :first_name  %>
+    </div>
 
-  <div class="field">
-    <%= f.label :email %><br />
-    <%= f.email_field :email, autofocus: true %>
-  </div>
+    <div class="field">
+      <%= f.label :last_name %>
+      <%= f.text_field :last_name  %>
+    </div>
 
-  <div class="field">
-    <%= f.label :password %>
-    <% if @minimum_password_length %>
-    <em>(<%= @minimum_password_length %> characters minimum)</em>
-    <% end %><br />
-    <%= f.password_field :password, autocomplete: "off" %>
+    <div class="screen__nav">
+      <button type='button' class="button signup__next">Next</button>
+    </div>
   </div>
 
-  <div class="field">
-    <%= f.label :password_confirmation %><br />
-    <%= f.password_field :password_confirmation, autocomplete: "off" %>
-  </div>
+  <div class="screen screen--future" data-screen="1">
+    <div class="field">
+      Add more stuff here
+    </div>
 
-  <div class="field">
-    <%= f.label :first_name %><br />
-    <%= f.text_field :first_name  %>
+    <div class="screen__nav">
+      <button type='button' class="button signup__prev">Back</button>
+      <button type='button' class="button signup__next">Next</button>
+    </div>
   </div>
 
-  <div class="field">
-    <%= f.label :last_name %><br />
-    <%= f.text_field :last_name  %>
-  </div>
+  <div class="screen screen--future" data-screen="2">
+    <div class="field">
+      <%= f.label :last_completed_grade %>
+      <%= f.text_field :last_completed_grade  %>
+    </div>
 
-  <div class="field">
-    <%= f.label :last_completed_grade %><br />
-    <%= f.text_field :last_completed_grade  %>
-  </div>
+    <div class="field">
+      <%= f.label :allergies %>
+      <%= f.text_field :allergies  %>
+    </div>
 
-  <div class="field">
-    <%= f.label :allergies %><br />
-    <%= f.text_field :allergies  %>
-  </div>
+    <div class="field">
+      <%= f.label :food_preferences %>
+      <%= f.text_field :food_preferences  %>
+    </div>
 
-  <div class="field">
-    <%= f.label :food_preferences %><br />
-    <%= f.text_field :food_preferences  %>
+    <div class="screen__nav">
+      <button type='button' class="button signup__prev">Back</button>
+      <button type='button' class="button signup__next">Next</button>
+    </div>
   </div>
 
-  <div class="actions">
-    <%= f.submit "Sign up" %>
+  <div class="screen screen--future" data-screen="3">
+    <div class="field">
+      <%= f.label :email %>
+      <%= f.email_field :email, autofocus: true %>
+    </div>
+
+    <div class="field">
+      <%= f.label :password %>
+      <%= f.password_field :password, autocomplete: "off" %>
+    </div>
+
+    <div class="field">
+      <%= f.label :password_confirmation %>
+      <%= f.password_field :password_confirmation, autocomplete: "off" %>
+    </div>
+
+    <div class="screen__nav">
+      <button type='button' class="button signup__prev">Back</button>
+      <%= f.submit "Done!", class: "button signup__done" %>
+    </div>
   </div>
+
 <% end %>
 
-<%= render "devise/shared/links" %>
+<%# render "devise/shared/links" %>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index f781c9e..ab9c37f 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -9,7 +9,7 @@
     <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
   </head>
 
-  <body>
+  <body class="<%= controller_name %> <%= action_name %>">
     <%= yield %>
   </body>
 </html>