diff --git a/public/assets/css/login/login.css b/public/assets/css/login/login.css
index de2246bb03..9b612608fd 100644
--- a/public/assets/css/login/login.css
+++ b/public/assets/css/login/login.css
@@ -1,66 +1,68 @@
 .content {
     display: flex;
     flex-wrap: wrap;
-    margin-top: calc(3 * var(--main-size));
     justify-content: center;
     align-items: center;
-    margin-left: var(--nav-size);
     margin-right: 0;
+    margin-bottom: var(--unit-size);
 }
-
 form {
     font-size: var(--medium-size);
-    background-color: #00000050;
-    padding: calc(2 * var(--unit-size)) calc(3 * var(--unit-size)) calc(3 * var(--unit-size));
+    background-color: #61778C30;
+    padding: calc(2 * var(--unit-size));
     border-radius: var(--unit-size);
-    margin-top: calc(2 * var(--unit-size));
-    margin-right: var(--side-margin);
-    margin-left: var(--side-margin);
+    margin-right: var(--small-size);
+    margin-left: var(--small-size);
     box-shadow: 0 0 60px -20px rgba(0, 0, 0, 0.75);
 }
-h1 {
-    font-family: 'Montserrat', sans-serif;
-    font-weight: 800;
-    font-size: var(--main-size);
-    margin-bottom: var(--medium-size);
-}
-
 label {
     font-family: 'Montserrat', sans-serif;
     font-weight: 700;
     width: 100%;
 }
-
+button {
+    margin-top: var(--unit-size);
+}
 input[type=text],
-input[type=password]
+input[type=password],
+input[type=email]
 {
     margin-top: calc(var(--unit-size) * 0.5);
     background-color: rgba(0, 0, 0, 0.30);
     color: #f6f6f6;
     border-style: none;
-    padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
+    padding: calc(var(--unit-size) * 0.5);
     border-radius: calc(var(--unit-size) * 0.5);
     font-size: var(--medium-size);
+    margin-bottom: var(--unit-size);
+    width: calc(100% - var(--unit-size));
 }
-
-.pair {
-    float:left;
-    width: 100%;
-    margin-bottom: var(--medium-size);
-}
-.pair input {
-    display: block;
-}
-
 .checkbox label {
     font-family: "Open Sans", sans-serif;
     font-size: var(--medium-size);
     font-weight: normal;
 }
-
 .active {
     color: #F6F6F6 !important;
     font-weight: 700;
 }
+input {
+    filter: none;
+}
 
-
+@media only screen and (max-width: 1300px) {
+    .navbar:not(:checked)+.navbar {
+        left: -100%;
+        top: 0;
+        transition: 0.3s ease;
+        left: 0;
+        top: 0;
+        transition: 0.3s ease;
+    }
+    #toggle:checked+.navbar {
+        display: block;
+        left: 0;
+        top: 0;
+        transition: 0.3s ease;
+    }
+}
diff --git a/public/assets/css/login/login_mid.css b/public/assets/css/login/login_mid.css
deleted file mode 100644
index 7dfa8e92d6..0000000000
--- a/public/assets/css/login/login_mid.css
+++ /dev/null
@@ -1,67 +0,0 @@
-.content {
-    display: flex;
-    flex-wrap: wrap;
-    margin-top: calc(3 * var(--main-size));
-    justify-content: center;
-    align-items: center;
-    margin-left: 0;
-    margin-right: 0;
-}
-
-.content form {
-    font-size: var(--medium-size);
-    background-color: #00000050;
-    padding: calc(2 * var(--unit-size)) calc(3 * var(--unit-size)) calc(3 * var(--unit-size));
-    border-radius: var(--unit-size);
-    margin-top: calc(2 * var(--unit-size));
-    margin-right: var(--side-margin);
-    margin-left: var(--side-margin);
-    box-shadow: 0 0 60px -20px rgba(0, 0, 0, 0.75);
-}
-.content h1 {
-    font-family: 'Montserrat', sans-serif;
-    font-weight: 800;
-    font-size: var(--main-size);
-    margin-bottom: var(--medium-size);
-}
-
-.content label {
-    font-family: 'Montserrat', sans-serif;
-    font-weight: 700;
-    width: 100%;
-}
-
-.pair input[type=text],
-.pair input[type=password]
-{
-    margin-top: calc(var(--unit-size) * 0.5);
-    background-color: rgba(0, 0, 0, 0.30);
-    color: #f6f6f6;
-    border-style: none;
-    padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
-    border-radius: calc(var(--unit-size) * 0.5);
-    font-size: var(--medium-size);
-}
-
-.pair {
-    float:left;
-    width: 100%;
-    margin-bottom: var(--medium-size);
-}
-.pair input {
-    display: block;
-}
-
-.checkbox label {
-    font-family: "Open Sans", sans-serif;
-    font-size: var(--medium-size);
-    font-weight: normal;
-}
-
-.active {
-    color: #F6F6F6 !important;
-    font-weight: 700;
-}
-input {
-    filter: none;
-}
\ No newline at end of file
diff --git a/public/assets/css/login/login_small.css b/public/assets/css/register/register.css
similarity index 53%
rename from public/assets/css/login/login_small.css
rename to public/assets/css/register/register.css
index fa32abc819..8d8d764022 100644
--- a/public/assets/css/login/login_small.css
+++ b/public/assets/css/register/register.css
@@ -1,65 +1,51 @@
 .content {
     display: flex;
     flex-wrap: wrap;
-    margin-top: calc(3 * var(--main-size));
     justify-content: center;
     align-items: center;
-    margin-left: 0;
     margin-right: 0;
+    margin-bottom: var(--unit-size);
 }
-
 form {
     font-size: var(--medium-size);
-    background-color: #00000050;
-    padding: calc(2 * var(--unit-size)) calc(3 * var(--unit-size)) calc(3 * var(--unit-size));
+    background-color: #61778C30;
+    padding: calc(2 * var(--unit-size));
     border-radius: var(--unit-size);
-    margin-top: calc(2 * var(--unit-size));
-    margin-right: var(--side-margin);
-    margin-left: var(--side-margin);
+    margin-right: var(--small-size);
+    margin-left: var(--small-size);
     box-shadow: 0 0 60px -20px rgba(0, 0, 0, 0.75);
 }
-h1 {
-    font-family: 'Montserrat', sans-serif;
-    font-weight: 800;
-    font-size: var(--main-size);
-    margin-bottom: var(--medium-size);
-}
-
 label {
     font-family: 'Montserrat', sans-serif;
     font-weight: 700;
     width: 100%;
 }
-
+button {
+    margin-top: var(--unit-size);
+}
 input[type=text],
-input[type=password]
+input[type=password],
+input[type=email]
 {
     margin-top: calc(var(--unit-size) * 0.5);
     background-color: rgba(0, 0, 0, 0.30);
     color: #f6f6f6;
     border-style: none;
-    padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
+    padding: calc(var(--unit-size) * 0.5);
     border-radius: calc(var(--unit-size) * 0.5);
     font-size: var(--medium-size);
+    margin-bottom: var(--unit-size);
+    width: calc(100% - var(--unit-size));
 }
-
-.pair {
-    float:left;
-    width: 100%;
-    margin-bottom: var(--medium-size);
-}
-.pair input {
-    display: block;
-}
-
 .checkbox label {
     font-family: "Open Sans", sans-serif;
     font-size: var(--medium-size);
     font-weight: normal;
 }
-
 .active {
     color: #F6F6F6 !important;
     font-weight: 700;
 }
-
+input {
+    filter: none;
+}
diff --git a/templates/security/login.html.twig b/templates/security/login.html.twig
index c5d3837948..d85fe0a0eb 100644
--- a/templates/security/login.html.twig
+++ b/templates/security/login.html.twig
@@ -2,45 +2,60 @@
 
 {% block stylesheets %}
   {{ parent() }}
-  <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/login/login.css') }}" media="screen and (min-width: 1300px)">
-  <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/login/login_mid.css') }}" media="screen and (max-width: 1300px)">
-  <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/login/login_small.css') }}" media="screen and (max-width: 750px)">
+  <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/login/login.css') }}">
 {% endblock %}
 
 {% block title %}Log in!{% endblock %}
 
-{% block body %}
-  <div class='content'>
-    <form method="post">
-      <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
-      {% if error %}
-        <div class="alert alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
-      {% endif %}
+{% block left %}
+  <div id='left-panel'>
+    <input type="checkbox" checked id="toggle">
+    <div class="icon-menu">
+      <label for="toggle" id='menu'></label>
+    </div>
+    <div class='navbar'>
+      <div class="left-nav">
+        <a href="{{ path('login') }}" class='hover-effect {{ active('login') }}'>Login</a>
+        <div class='content'>
+          <form method="post">
+            {% if error %}
+              <div class="alert alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
+            {% endif %}
 
-      {% if app.user %}
-        <div class="mb-3">
-          You are logged in as {{ app.user.username }}, <a href="{{ path('app_logout') }}">Logout</a>
+            {% if app.user %}
+              <div class="mb-3">
+                You are logged in as {{ app.user.username }}, <a href="{{ path('app_logout') }}">Logout</a>
+              </div>
+            {% endif %}
+            <div class="register-info">
+              <label for="inputNickname">Nickname</label>
+              <input type="text" value="{{ last_username }}" name="nickname" id="inputNickname" class="form-control" required autofocus>
+              <label for="inputPassword">Password</label>
+              <input type="password" name="password" id="inputPassword" class="form-control" required>
+            </div>
+
+            <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
+
+            <div class="checkbox mb-3">
+              <label>
+                <input type="checkbox" name="_remember_me"> Remember me
+              </label>
+            </div>
+
+            <button class="btn btn-lg btn-primary" type="submit">
+              Sign in
+            </button>
+          </form>
         </div>
-      {% endif %}
-      <div class='pair'>
-        <label for="inputNickname">Nickname</label>
-        <input type="text" value="{{ last_username }}" name="nickname" id="inputNickname" class="form-control" required autofocus>
+        <a href="{{ path('register') }}" class='hover-effect {{ active('register') }}'>Register</a>
       </div>
-      <div class='pair' id='pass'>
-        <label for="inputPassword">Password</label>
-        <input type="password" name="password" id="inputPassword" class="form-control" required>
+      <div class="footer">
+        <a href="{{ path('doc_faq') }}" class='hover-effect {{ active('doc_faq') }}'>FAQ</a>
+        <a href="{{ path('doc_tos') }}" class='hover-effect {{ active('doc_tos') }}'>TOS</a>
+        <a href="{{ path('doc_privacy') }}" class='hover-effect {{ active('doc_privacy') }}'>Privacy</a>
+        <a href="{{ path('doc_source') }}" class='hover-effect {{ active('doc_source') }}'>Source</a>
+        <a href="{{ path('doc_version') }}" class='hover-effect {{ active('doc_version') }}'>Version</a>
       </div>
-        <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
-
-      <div class="checkbox mb-3">
-        <label>
-          <input type="checkbox" name="_remember_me"> Remember me
-        </label>
-      </div>
-
-      <button class="btn btn-lg btn-primary" type="submit">
-        Sign in
-      </button>
-    </form>
+    </div>
   </div>
-{% endblock body %}
+{% endblock %}
\ No newline at end of file
diff --git a/templates/security/register.html.twig b/templates/security/register.html.twig
index 5b30cb2656..6a07832b74 100644
--- a/templates/security/register.html.twig
+++ b/templates/security/register.html.twig
@@ -1,16 +1,39 @@
-{% extends 'base.html.twig' %}
+{% extends 'left/left.html.twig' %}
+
+{% block stylesheets %}
+    {{ parent() }}
+    <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/register/register.css') }}">
+{% endblock %}
 
 {% block title %}Register{% endblock %}
 
-{% block body %}
-    {% for flashError in app.flashes('verify_email_error') %}
-        <div class="alert alert-danger" role="alert">{{ flashError }}</div>
-    {% endfor %}
+{% block left %}
+    <div id='left-panel'>
+        <input type="checkbox" checked id="toggle">
+        <div class="icon-menu">
+            <label for="toggle" id='menu'></label>
+        </div>
+        <div class='navbar'>
+            <div class="left-nav">
+                <a href="{{ path('login') }}" class='hover-effect {{ active('login') }}'>Login</a>
+                <a href="{{ path('register') }}" class='hover-effect {{ active('register') }}'>Register</a>
+                <div class='content'>
+                    {% for flashError in app.flashes('verify_email_error') %}
+                        <div class="alert alert-danger" role="alert">{{ flashError }}</div>
+                    {% endfor %}
 
-    <h1>Register</h1>
-
-    <div style="position: relative; top: 10em; left: 20em;">
-    {{ form(registration_form) }}
+                    <div class="register-info">
+                        {{ form(registration_form) }}
+                    </div>
+                </div>
+            </div>
+            <div class="footer">
+                <a href="{{ path('doc_faq') }}" class='hover-effect {{ active('doc_faq') }}'>FAQ</a>
+                <a href="{{ path('doc_tos') }}" class='hover-effect {{ active('doc_tos') }}'>TOS</a>
+                <a href="{{ path('doc_privacy') }}" class='hover-effect {{ active('doc_privacy') }}'>Privacy</a>
+                <a href="{{ path('doc_source') }}" class='hover-effect {{ active('doc_source') }}'>Source</a>
+                <a href="{{ path('doc_version') }}" class='hover-effect {{ active('doc_version') }}'>Version</a>
+            </div>
+        </div>
     </div>
-
 {% endblock %}