diff --git a/app/assets/images/fonts/Roboto-Light.ttf b/app/assets/images/fonts/Roboto-Light.ttf
new file mode 100644
index 000000000..d43e94331
Binary files /dev/null and b/app/assets/images/fonts/Roboto-Light.ttf differ
diff --git a/app/assets/images/signupimages@2x_mini.jpg b/app/assets/images/signupimages@2x_mini.jpg
new file mode 100644
index 000000000..f437a34a2
Binary files /dev/null and b/app/assets/images/signupimages@2x_mini.jpg differ
diff --git a/app/assets/javascripts/validation.js b/app/assets/javascripts/validation.js
index 22be168c5..2f152b916 100644
--- a/app/assets/javascripts/validation.js
+++ b/app/assets/javascripts/validation.js
@@ -42,7 +42,7 @@ var Validation = {
   }
 };
 
-$(function() { 
-  $("#user_username").keypress(Validation.events.usernameKeypress);
-  $("#user_email").keypress(Validation.events.emailKeypress);
-});
+//$(function() {
+//  $("#user_username").keypress(Validation.events.usernameKeypress);
+//  $("#user_email").keypress(Validation.events.emailKeypress);
+//});
diff --git a/app/assets/stylesheets/new-templates.css.scss b/app/assets/stylesheets/new-templates.css.scss
index 16155d4ff..7ada5e3b8 100644
--- a/app/assets/stylesheets/new-templates.css.scss
+++ b/app/assets/stylesheets/new-templates.css.scss
@@ -22,4 +22,7 @@
 /* isotope */
 @import 'new_styles/isotope_transitions';
 
+/* login */
+@import 'new_styles/registration';
+
 @include video-overlay();
\ No newline at end of file
diff --git a/app/assets/stylesheets/new_styles/_typography.scss b/app/assets/stylesheets/new_styles/_typography.scss
index 19e568b1a..af01b9bb4 100644
--- a/app/assets/stylesheets/new_styles/_typography.scss
+++ b/app/assets/stylesheets/new_styles/_typography.scss
@@ -11,6 +11,12 @@
   weight : normal;
 }
 
+@font-face {
+  font-family : Roboto-Light;
+  src : image-url('fonts/Roboto-Light.ttf');
+  weight : normal;
+}
+
 body, p, h1, h2, h3, h4, h5, h6, textarea, input, * {
   font-family : Roboto, Helvetica, sans-serif;
   font-weight : normal;
diff --git a/app/assets/stylesheets/new_styles/registration.scss b/app/assets/stylesheets/new_styles/registration.scss
new file mode 100644
index 000000000..bf120e9e3
--- /dev/null
+++ b/app/assets/stylesheets/new_styles/registration.scss
@@ -0,0 +1,107 @@
+#registration {
+  position : absolute;
+  top : 0;
+  left : 0;
+  background-color : #afc652;
+  height : 100%;
+  width : 100%;
+
+  color : #fff;
+
+  .container {
+    margin-top : 100px;
+  }
+
+  #create-something-text {
+    font-family : Roboto-Light;
+    font-size : 100px;
+    line-height : 100px;
+  }
+
+  #diaspora-hearts {
+    font-family : Roboto-Light;
+    font-size : 24px;
+    margin-top : 0.2em;
+    margin-bottom : 1em;
+  }
+
+  #sign-up-text {
+    font-family : Roboto-Bold;
+    color : #7f9448;
+    margin-bottom : 0.5em;
+  }
+
+  #collage {
+    float : left;
+    width : 344px;
+    height : 639px;
+    margin-right : 20px;
+    margin-left : 110px;
+  }
+
+  form#user_new {
+    display : inline-block;
+
+    fieldset {
+      @include border-radius(5px);
+
+      -webkit-box-shadow : inset 0 1px 1px rgba(0,0,0,0.2), 0 1px 2px rgba(255,255,255,0.7);
+
+      margin-bottom : 1em;
+
+      background-color : #fff;
+
+      border : 1px solid #888;
+
+      input[type=text],
+      input[type=password] {
+        @include box-shadow(0,0,0,0);
+        @include border-radius(0);
+
+        background : transparent;
+
+        padding : 10px;
+
+        margin-bottom : 0;
+        display : block;
+        border : none;
+        border-bottom : 1px solid #ddd;
+
+        &:last-child {
+          border-bottom : none;
+        }
+      }
+    }
+
+    input[type=submit] {
+      text-align : center;
+      display : block;
+      width : 100%;
+      padding : 8px 0;
+    }
+  }
+}
+
+
+/* buttons to be extracted? */
+.new-btn {
+  @include transition(box-shadow);
+  @include border-radius(5px);
+  @include linear-gradient(#fff, rgb(233,233,233));
+  @include box-shadow(0, 1px, 2px, rgba(0,0,0,0));
+
+  background-color : rgb(233,233,233);
+  color : #888;
+  border : 1px solid #888;
+
+  font-size : 14px;
+  text-shadow : 0 1px 2px #eee;
+
+  &:hover {
+    @include box-shadow(0, 1px, 2px, rgba(0,0,0,0.3));
+  }
+
+  &:active {
+    box-shadow : inset 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(255,255,255,0.7);
+  }
+}
\ No newline at end of file
diff --git a/app/views/layouts/post.html.haml b/app/views/layouts/post.html.haml
index 2d6de36df..036429a5f 100644
--- a/app/views/layouts/post.html.haml
+++ b/app/views/layouts/post.html.haml
@@ -61,6 +61,7 @@
   %body
     = flash_messages
     #container
-    = yield
+      = yield
+
 
     = include_chartbeat
diff --git a/app/views/registrations/new.html.erb b/app/views/registrations/new.html.erb
new file mode 100644
index 000000000..226f57c90
--- /dev/null
+++ b/app/views/registrations/new.html.erb
@@ -0,0 +1,34 @@
+<div id="registration">
+  <div class="container">
+
+    <%= image_tag('signupimages@2x_mini.jpg', :id => "collage") %>
+
+    <h1 id="create-something-text">
+      HEY,
+      <br/>
+      MAKE
+      <br/>
+      SOMETHING.
+    </h1>
+
+    <h3 id="diaspora-hearts">
+      <3 Diaspora*
+    </h3>
+
+    <h4 id="sign-up-text">
+      SIGN UP
+    </h4>
+
+    <%= form_for(resource, :as => resource_name, :url => registration_path(resource_name)) do |f| %>
+        <fieldset>
+          <%= f.text_field :email, :placeholder => "EMAIL", :title => t('registrations.new.enter_username') %>
+          <%= f.text_field :username, :placeholder => "USERNAME", :title => t('registrations.new.enter_username') %>
+          <%= f.password_field :password, :placeholder => "PASSWORD", :title => t('registrations.new.enter_password') %>
+          <%= invite_hidden_tag(invite) %>
+        </fieldset>
+
+        <%= f.submit "Continue", :class => "new-btn" %>
+    <% end %>
+
+  </div>
+</div>
\ No newline at end of file
diff --git a/app/views/registrations/new.html.haml b/app/views/registrations/new_old.html.haml
similarity index 100%
rename from app/views/registrations/new.html.haml
rename to app/views/registrations/new_old.html.haml