diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 2b5cfc4..428d039 100755
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -14,3 +14,6 @@
 @import "layouts/index";
 @import "components/index";
 @import "pages/index";
+
+@import "devise/index";
+
diff --git a/app/assets/stylesheets/devise/_index.scss b/app/assets/stylesheets/devise/_index.scss
new file mode 100644
index 0000000..57338a7
--- /dev/null
+++ b/app/assets/stylesheets/devise/_index.scss
@@ -0,0 +1 @@
+@import 'login';
diff --git a/app/assets/stylesheets/devise/_login.scss b/app/assets/stylesheets/devise/_login.scss
new file mode 100644
index 0000000..702f4ce
--- /dev/null
+++ b/app/assets/stylesheets/devise/_login.scss
@@ -0,0 +1,40 @@
+.login-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100vh;
+  position: absolute;
+  background-image:
+    linear-gradient(
+      -225deg,
+        rgba(5,25,55,0.3) 0%,
+        rgba(68,73,101,0.3),
+        rgba(128,129,149,0.3),
+        rgba(191,190,200,0.3),
+        rgba(255,255,255,0.3)
+      50%),
+    url('https://unsplash.com/photos/jay5BqVyf5A');
+
+
+
+  .login-content {
+    position: relative;
+    top: -10vh;
+    padding: 50px;
+    background-color: white;
+    width: 25vw;
+    border-radius: 3px;
+    box-shadow: 1px 1px 10px rgba(0,0,0, 0.21);
+
+    h2 {
+      color: $primary;
+    }
+  }
+}
+
+.login {
+  // color: $primary;
+  width:100%;
+}
diff --git a/app/views/devise/registrations/new.html.erb b/app/views/devise/registrations/new.html.erb
index 8eeba8c..07ec4dd 100644
--- a/app/views/devise/registrations/new.html.erb
+++ b/app/views/devise/registrations/new.html.erb
@@ -1,25 +1,29 @@
-<h2>Sign up</h2>
+<div class="login-container">
+  <div class="login-content">
+    <h2>Sign up</h2>
 
-<%= simple_form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
-  <%= f.error_notification %>
+    <%= simple_form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
+      <%= f.error_notification %>
 
-  <div class="form-inputs">
-    <%= f.input :email,
-                required: true,
-                autofocus: true ,
-                input_html: { autocomplete: "email" }%>
-    <%= f.input :password,
-                required: true,
-                hint: ("#{@minimum_password_length} characters minimum" if @minimum_password_length),
-                input_html: { autocomplete: "new-password" } %>
-    <%= f.input :password_confirmation,
-                required: true,
-                input_html: { autocomplete: "new-password" } %>
+      <div class="form-inputs">
+        <%= f.input :email,
+                    required: true,
+                    autofocus: true ,
+                    input_html: { autocomplete: "email" }%>
+        <%= f.input :password,
+                    required: true,
+                    hint: ("#{@minimum_password_length} characters minimum" if @minimum_password_length),
+                    input_html: { autocomplete: "new-password" } %>
+        <%= f.input :password_confirmation,
+                    required: true,
+                    input_html: { autocomplete: "new-password" } %>
+      </div>
+
+      <div class="form-actions">
+        <%= f.button :submit, "Sign up", class: "login btn btn-primary" %>
+      </div>
+    <% end %>
+
+    <%= render "devise/shared/links" %>
   </div>
-
-  <div class="form-actions">
-    <%= f.button :submit, "Sign up" %>
-  </div>
-<% end %>
-
-<%= render "devise/shared/links" %>
+</div>
diff --git a/app/views/devise/sessions/new.html.erb b/app/views/devise/sessions/new.html.erb
index e542e61..799901f 100644
--- a/app/views/devise/sessions/new.html.erb
+++ b/app/views/devise/sessions/new.html.erb
@@ -1,20 +1,24 @@
-<h2>Log in</h2>
+<div class="login-container">
+  <div class="login-content">
+    <h2>Log in</h2>
 
-<%= simple_form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
-  <div class="form-inputs">
-    <%= f.input :email,
-                required: false,
-                autofocus: true,
-                input_html: { autocomplete: "email" } %>
-    <%= f.input :password,
-                required: false,
-                input_html: { autocomplete: "current-password" } %>
-    <%= f.input :remember_me, as: :boolean if devise_mapping.rememberable? %>
+    <%= simple_form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
+      <div class="form-inputs">
+        <%= f.input :email,
+                    required: false,
+                    autofocus: true,
+                    input_html: { autocomplete: "email" } %>
+        <%= f.input :password,
+                    required: false,
+                    input_html: { autocomplete: "current-password" } %>
+        <%= f.input :remember_me, as: :boolean if devise_mapping.rememberable? %>
+      </div>
+
+      <div class="form-actions">
+        <%= f.button :submit, "Log in", class: "login btn btn-primary" %>
+      </div>
+    <% end %>
+
+    <%= render "devise/shared/links" %>
   </div>
-
-  <div class="form-actions">
-    <%= f.button :submit, "Log in" %>
-  </div>
-<% end %>
-
-<%= render "devise/shared/links" %>
+</div>
diff --git a/app/views/devise/shared/_links.html.erb b/app/views/devise/shared/_links.html.erb
index e6a3e41..a87593a 100644
--- a/app/views/devise/shared/_links.html.erb
+++ b/app/views/devise/shared/_links.html.erb
@@ -3,7 +3,7 @@
 <% end -%>
 
 <%- if devise_mapping.registerable? && controller_name != 'registrations' %>
-  <%= link_to "Sign up", new_registration_path(resource_name) %><br />
+  <%#= link_to "Sign up", new_registration_path(resource_name) %><!-- <br /> -->
 <% end -%>
 
 <%- if devise_mapping.recoverable? && controller_name != 'passwords' && controller_name != 'registrations' %>