diff --git a/public/assets/css/base.css b/public/assets/css/base.css
index 449ec46508..ad17998859 100644
--- a/public/assets/css/base.css
+++ b/public/assets/css/base.css
@@ -130,105 +130,4 @@ b {
       stroke: currentColor;
       fill: currentColor;
       align-self: center;
-}
-
-/*-------------------------------------*/
-/* LEFT PANEL -------------------------*/
-.navbar {
-      width: var(--nav-size);
-      height: calc(100vh - (3 * var(--unit-size)));
-      position: fixed;
-      background-color: rgba(0, 0, 0, 0.40);
-      margin-top: calc(3 * var(--main-size));
-}
-
-.navbar {
-      left: -15em;
-      top: 0;
-      transition: 0.3s ease;
-      display: block;
-      left: 0;
-      top: 0;
-      transition: 0.3s ease;
-}
-
-.navbar a {
-      display: block;
-      color: #91B9D0;
-      margin-left: var(--unit-size);
-      margin-bottom: var(--small-size);
-      font-size: var(--medium-size);
-}
-
-.navbar a:nth-child(1) {
-      margin-top: var(--unit-size);
-}
-
-.navbar a:hover {
-      color: #F6F6F6;
-      transition: all 0.8s ease;
-}
-
-.icon-menu label {
-      display: none;
-      cursor: pointer
-}
-
-#toggle {
-      display: none;
-}
-
-#toggle:checked+.navbar {
-      display: block;
-      left: 0;
-      top: 0;
-      transition: 0.3s ease;
-}
-
-.profile {
-      display: flex;
-      flex-wrap: wrap;
-      background-color: rgba(0, 0, 0, 0.20);
-      padding: var(--unit-size);
-      font-size: var(--small-size);
-      margin-bottom: var(--unit-size);
-      vertical-align: middle;
-}
-
-.icon-avatar {
-      order: 1;
-      height: calc(5 * var(--unit-size));
-      weight: auto;
-      width: 25%;
-      margin-right: var(--small-size);
-}
-
-.info {
-      order: 2;
-}
-
-.info #nick {
-      order: 1;
-      margin-bottom: var(--small-size);
-}
-
-.info .tags {
-      order: 2;
-      margin-bottom: var(--small-size);
-}
-
-.info .stats {
-      order: 3;
-}
-
-.info .tags i {
-      color: #91B9D0;
-}
-
-.info .tags i:last-child {
-      margin-left: var(--small-size);
-}
-
-.stats span:last-child {
-      margin-left: var(--small-size);
-}
+}
\ No newline at end of file
diff --git a/public/assets/css/base_mid.css b/public/assets/css/base_mid.css
index 8cae9dd19f..7f791ed144 100644
--- a/public/assets/css/base_mid.css
+++ b/public/assets/css/base_mid.css
@@ -158,114 +158,4 @@ b {
       stroke: currentColor;
       fill: currentColor;
       align-self: center;
-}
-
-/*-------------------------------------*/
-/* LEFT PANEL -------------------------*/
-.navbar {
-      width: var(--nav-size);
-      height: calc(100vh - (3 * var(--unit-size)));
-      position: fixed;
-      background: rgb(51,61,71);
-      background: -moz-linear-gradient(80deg, rgba(51,61,71,1) 0%, rgba(39,46,54,1) 90%);
-      background: -webkit-linear-gradient(80deg, rgba(51,61,71,1) 0%, rgba(39,46,54,1) 90%);
-      background: linear-gradient(80deg, rgba(51,61,71,1) 0%, rgba(39,46,54,1) 90%);
-      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#333d47",endColorstr="#272e36",GradientType=1);
-      margin-top: calc(3 * var(--main-size));
-}
-
-.navbar {
-      left: -100%;
-      top:0;
-      transition: 0.3s ease;
-}
-
-.navbar a {
-      display: block;
-      color: #91B9D0;
-      margin-left: var(--unit-size);
-      margin-bottom: var(--small-size);
-      font-size: var(--medium-size);
-}
-
-.navbar a:nth-child(1) {
-      margin-top: var(--unit-size);
-}
-
-.navbar a:hover {
-      color: #F6F6F6;
-      transition: all 0.8s ease;
-}
-
-.icon-menu label {
-      display: block;
-      cursor: pointer
-}
-
-#toggle {
-      position: absolute;
-      z-index: 2;
-      cursor: pointer;
-      opacity: 0;
-}
-.left-panel input[type=checkbox] {
-    transform: scale(2);
-    -ms-transform: scale(2);
-    -webkit-transform: scale(2);
-    padding: 10px;
-}
-
-#toggle:checked~.navbar {
-      display: block;
-      left: 0;
-      top: 0;
-      transition: 0.3s ease;
-}
-
-.profile {
-      display: flex;
-      flex-wrap: wrap;
-      background-color: rgba(0, 0, 0, 0.20);
-      padding: var(--unit-size);
-      font-size: var(--small-size);
-      margin-bottom: var(--unit-size);
-      vertical-align: middle;
-}
-
-.icon-avatar {
-      order: 1;
-      height: calc(5 * var(--unit-size));
-      weight: auto;
-      width: 25%;
-      margin-right: var(--small-size);
-}
-
-.info {
-      order: 2;
-}
-
-.info #nick {
-      order: 1;
-      margin-bottom: var(--small-size);
-}
-
-.info .tags {
-      order: 2;
-      margin-bottom: var(--small-size);
-}
-
-.info .stats {
-      order: 3;
-}
-
-.info .tags i {
-      color: #91B9D0;
-}
-
-.info .tags i:last-child {
-      margin-left: var(--small-size);
-}
-
-.stats span:last-child {
-      margin-left: var(--small-size);
-}
+}
\ No newline at end of file
diff --git a/public/assets/css/base_small.css b/public/assets/css/base_small.css
index 8ad87b0f41..0a9bab19f4 100644
--- a/public/assets/css/base_small.css
+++ b/public/assets/css/base_small.css
@@ -153,116 +153,4 @@ b {
       stroke-width: 0;
       stroke: currentColor;
       fill: currentColor;
-}
-
-/*-------------------------------------*/
-/* LEFT PANEL -------------------------*/
-.navbar {
-      width: 100%;
-      height: calc(100vh - (3 * var(--unit-size)));
-      position: fixed;
-      background: rgb(51,61,71);
-      background: -moz-linear-gradient(80deg, rgba(51,61,71,1) 0%, rgba(39,46,54,1) 90%);
-      background: -webkit-linear-gradient(80deg, rgba(51,61,71,1) 0%, rgba(39,46,54,1) 90%);
-      background: linear-gradient(80deg, rgba(51,61,71,1) 0%, rgba(39,46,54,1) 90%);
-      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#333d47",endColorstr="#272e36",GradientType=1);
-      margin-top: calc(3 * var(--main-size));
-}
-
-.navbar {
-      left: -100%;
-      top:0;
-      transition: 0.3s ease;
-}
-
-.navbar a {
-      display: block;
-      color: #91B9D0;
-      margin-left: var(--unit-size);
-      margin-bottom: var(--small-size);
-      font-size: var(--medium-size);
-}
-
-.navbar a:nth-child(1) {
-      margin-top: var(--unit-size);
-}
-
-.navbar a:hover {
-      color: #F6F6F6;
-      transition: all 0.8s ease;
-}
-
-label {
-      display: block;
-      cursor: pointer
-}
-
-#toggle {
-      position: absolute;
-      z-index: 2;
-      cursor: pointer;
-      width: var(--unit-size);
-      height: var(--unit-size);
-      opacity: 0;
-}
-.left-panel input[type=checkbox] {
-    transform: scale(2);
-    -ms-transform: scale(2);
-    -webkit-transform: scale(2);
-    padding: 10px;
-}
-
-#toggle:checked~.navbar {
-      display: block;
-      left: 0;
-      top: 0;
-      transition: 0.3s ease;
-}
-
-.profile {
-      display: flex;
-      flex-wrap: wrap;
-      background-color: rgba(0, 0, 0, 0.20);
-      padding: var(--unit-size);
-      font-size: var(--small-size);
-      margin-bottom: var(--unit-size);
-      vertical-align: middle;
-}
-
-.icon-avatar {
-      order: 1;
-      height: calc(5 * var(--unit-size));
-      weight: auto;
-      width: 25%;
-      margin-right: var(--small-size);
-}
-
-.info {
-      order: 2;
-}
-
-.info #nick {
-      order: 1;
-      margin-bottom: var(--small-size);
-}
-
-.info .tags {
-      order: 2;
-      margin-bottom: var(--small-size);
-}
-
-.info .stats {
-      order: 3;
-}
-
-.info .tags i {
-      color: #91B9D0;
-}
-
-.info .tags i:last-child {
-      margin-left: var(--small-size);
-}
-
-.stats span:last-child {
-      margin-left: var(--small-size);
-}
+}
\ No newline at end of file
diff --git a/public/assets/css/left/left.css b/public/assets/css/left/left.css
new file mode 100644
index 0000000000..1214d2434d
--- /dev/null
+++ b/public/assets/css/left/left.css
@@ -0,0 +1,98 @@
+.navbar {
+      width: var(--nav-size);
+      height: calc(100vh - (3 * var(--unit-size)));
+      position: fixed;
+      background-color: rgba(0, 0, 0, 0.40);
+      margin-top: calc(3 * var(--main-size));
+}
+
+.navbar {
+      left: -15em;
+      top: 0;
+      transition: 0.3s ease;
+      display: block;
+      left: 0;
+      top: 0;
+      transition: 0.3s ease;
+}
+
+.navbar a {
+      display: block;
+      color: #91B9D0;
+      margin-left: var(--unit-size);
+      margin-bottom: var(--small-size);
+      font-size: var(--medium-size);
+}
+
+.navbar a:nth-child(1) {
+      margin-top: var(--unit-size);
+}
+
+.navbar a:hover {
+      color: #F6F6F6;
+      transition: all 0.8s ease;
+}
+
+.icon-menu label {
+      display: none;
+      cursor: pointer
+}
+
+#toggle {
+      display: none;
+}
+
+#toggle:checked+.navbar {
+      display: block;
+      left: 0;
+      top: 0;
+      transition: 0.3s ease;
+}
+
+.profile {
+      display: flex;
+      flex-wrap: wrap;
+      background-color: rgba(0, 0, 0, 0.20);
+      padding: var(--unit-size);
+      font-size: var(--small-size);
+      margin-bottom: var(--unit-size);
+      vertical-align: middle;
+}
+
+.icon-avatar {
+      order: 1;
+      height: calc(5 * var(--unit-size));
+      weight: auto;
+      width: 25%;
+      margin-right: var(--small-size);
+}
+
+.info {
+      order: 2;
+}
+
+.info #nick {
+      order: 1;
+      margin-bottom: var(--small-size);
+}
+
+.info .tags {
+      order: 2;
+      margin-bottom: var(--small-size);
+}
+
+.info .stats {
+      order: 3;
+}
+
+.info .tags i {
+      color: #91B9D0;
+}
+
+.info .tags i:last-child {
+      margin-left: var(--small-size);
+}
+
+.stats span:last-child {
+      margin-left: var(--small-size);
+}
diff --git a/public/assets/css/left/left_mid.css b/public/assets/css/left/left_mid.css
new file mode 100644
index 0000000000..345e612c08
--- /dev/null
+++ b/public/assets/css/left/left_mid.css
@@ -0,0 +1,107 @@
+.navbar {
+      width: var(--nav-size);
+      height: calc(100vh - (3 * var(--unit-size)));
+      position: fixed;
+      background: rgb(51,61,71);
+      background: -moz-linear-gradient(80deg, rgba(51,61,71,1) 0%, rgba(39,46,54,1) 90%);
+      background: -webkit-linear-gradient(80deg, rgba(51,61,71,1) 0%, rgba(39,46,54,1) 90%);
+      background: linear-gradient(80deg, rgba(51,61,71,1) 0%, rgba(39,46,54,1) 90%);
+      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#333d47",endColorstr="#272e36",GradientType=1);
+      margin-top: calc(3 * var(--main-size));
+}
+
+.navbar {
+      left: -100%;
+      top:0;
+      transition: 0.3s ease;
+}
+
+.navbar a {
+      display: block;
+      color: #91B9D0;
+      margin-left: var(--unit-size);
+      margin-bottom: var(--small-size);
+      font-size: var(--medium-size);
+}
+
+.navbar a:nth-child(1) {
+      margin-top: var(--unit-size);
+}
+
+.navbar a:hover {
+      color: #F6F6F6;
+      transition: all 0.8s ease;
+}
+
+.icon-menu label {
+      display: block;
+      cursor: pointer
+}
+
+#toggle {
+      position: absolute;
+      z-index: 2;
+      cursor: pointer;
+      opacity: 0;
+}
+.left-panel input[type=checkbox] {
+    transform: scale(2);
+    -ms-transform: scale(2);
+    -webkit-transform: scale(2);
+    padding: 10px;
+}
+
+#toggle:checked~.navbar {
+      display: block;
+      left: 0;
+      top: 0;
+      transition: 0.3s ease;
+}
+
+.profile {
+      display: flex;
+      flex-wrap: wrap;
+      background-color: rgba(0, 0, 0, 0.20);
+      padding: var(--unit-size);
+      font-size: var(--small-size);
+      margin-bottom: var(--unit-size);
+      vertical-align: middle;
+}
+
+.icon-avatar {
+      order: 1;
+      height: calc(5 * var(--unit-size));
+      weight: auto;
+      width: 25%;
+      margin-right: var(--small-size);
+}
+
+.info {
+      order: 2;
+}
+
+.info #nick {
+      order: 1;
+      margin-bottom: var(--small-size);
+}
+
+.info .tags {
+      order: 2;
+      margin-bottom: var(--small-size);
+}
+
+.info .stats {
+      order: 3;
+}
+
+.info .tags i {
+      color: #91B9D0;
+}
+
+.info .tags i:last-child {
+      margin-left: var(--small-size);
+}
+
+.stats span:last-child {
+      margin-left: var(--small-size);
+}
diff --git a/public/assets/css/left/left_small.css b/public/assets/css/left/left_small.css
new file mode 100644
index 0000000000..917cb0d861
--- /dev/null
+++ b/public/assets/css/left/left_small.css
@@ -0,0 +1,109 @@
+.navbar {
+      width: 100%;
+      height: calc(100vh - (3 * var(--unit-size)));
+      position: fixed;
+      background: rgb(51,61,71);
+      background: -moz-linear-gradient(80deg, rgba(51,61,71,1) 0%, rgba(39,46,54,1) 90%);
+      background: -webkit-linear-gradient(80deg, rgba(51,61,71,1) 0%, rgba(39,46,54,1) 90%);
+      background: linear-gradient(80deg, rgba(51,61,71,1) 0%, rgba(39,46,54,1) 90%);
+      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#333d47",endColorstr="#272e36",GradientType=1);
+      margin-top: calc(3 * var(--main-size));
+}
+
+.navbar {
+      left: -100%;
+      top:0;
+      transition: 0.3s ease;
+}
+
+.navbar a {
+      display: block;
+      color: #91B9D0;
+      margin-left: var(--unit-size);
+      margin-bottom: var(--small-size);
+      font-size: var(--medium-size);
+}
+
+.navbar a:nth-child(1) {
+      margin-top: var(--unit-size);
+}
+
+.navbar a:hover {
+      color: #F6F6F6;
+      transition: all 0.8s ease;
+}
+
+label {
+      display: block;
+      cursor: pointer
+}
+
+#toggle {
+      position: absolute;
+      z-index: 2;
+      cursor: pointer;
+      width: var(--unit-size);
+      height: var(--unit-size);
+      opacity: 0;
+}
+.left-panel input[type=checkbox] {
+    transform: scale(2);
+    -ms-transform: scale(2);
+    -webkit-transform: scale(2);
+    padding: 10px;
+}
+
+#toggle:checked~.navbar {
+      display: block;
+      left: 0;
+      top: 0;
+      transition: 0.3s ease;
+}
+
+.profile {
+      display: flex;
+      flex-wrap: wrap;
+      background-color: rgba(0, 0, 0, 0.20);
+      padding: var(--unit-size);
+      font-size: var(--small-size);
+      margin-bottom: var(--unit-size);
+      vertical-align: middle;
+}
+
+.icon-avatar {
+      order: 1;
+      height: calc(5 * var(--unit-size));
+      weight: auto;
+      width: 25%;
+      margin-right: var(--small-size);
+}
+
+.info {
+      order: 2;
+}
+
+.info #nick {
+      order: 1;
+      margin-bottom: var(--small-size);
+}
+
+.info .tags {
+      order: 2;
+      margin-bottom: var(--small-size);
+}
+
+.info .stats {
+      order: 3;
+}
+
+.info .tags i {
+      color: #91B9D0;
+}
+
+.info .tags i:last-child {
+      margin-left: var(--small-size);
+}
+
+.stats span:last-child {
+      margin-left: var(--small-size);
+}
diff --git a/public/assets/css/login/login.css b/public/assets/css/login/login.css
new file mode 100644
index 0000000000..c7928fceb5
--- /dev/null
+++ b/public/assets/css/login/login.css
@@ -0,0 +1,62 @@
+.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;
+}
+
+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);
+}
+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%;
+}
+
+input[type=text],
+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;
+}
+
+
+
diff --git a/public/assets/css/login/login_mid.css b/public/assets/css/login/login_mid.css
new file mode 100644
index 0000000000..af1be55a5f
--- /dev/null
+++ b/public/assets/css/login/login_mid.css
@@ -0,0 +1,62 @@
+.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;
+}
+
+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);
+}
+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%;
+}
+
+input[type=text],
+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;
+}
+
+
+
diff --git a/public/assets/css/login/login_small.css b/public/assets/css/login/login_small.css
new file mode 100644
index 0000000000..af1be55a5f
--- /dev/null
+++ b/public/assets/css/login/login_small.css
@@ -0,0 +1,62 @@
+.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;
+}
+
+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);
+}
+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%;
+}
+
+input[type=text],
+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;
+}
+
+
+
diff --git a/templates/base.html.twig b/templates/base.html.twig
index bf2b07d80e..57c3a780bd 100644
--- a/templates/base.html.twig
+++ b/templates/base.html.twig
@@ -54,42 +54,8 @@
             {% block header %}
                   <div id='header'>
                         <div id='top'>
-                              <div id='left-panel'>
-                                    <input type="checkbox" id="toggle">
-                                    <div class="icon-menu">
-                                          <label for="toggle" id='menu'></label>
-                                    </div>
-                                    <div class='navbar'>
-                                          <div class='profile'>
-                                                <svg class="icon icon-avatar">
-                                                      <use xlink:href="#icon-avatar"></use>
-                                                </svg>
-                                                <div class="info">
-                                                      <b id="nick">someone</b>
-                                                      <div class="tags">
-                                                            <i>coffee addict</i>
-                                                            <i>lazy</i>
-                                                      </div>
-                                                      <div class="stats">
-                                                            <span>
-                                                                  <b>1337</b>
-                                                                  Followers</span>
-                                                            <span>
-                                                                  <b>42</b>
-                                                                  Following</span>
-                                                      </div>
-                                                </div>
-                                          </div>
-                                          <a href='#'>Bookmarks</a>
-                                          <a href='#'>Happenings</a>
-                                          <a href='#'>Messages</a>
-                                          <a href='#'>Replies</a>
-                                          <a href='#'>Favourites</a>
-                                          <a href='#'>Reverse Favs</a>
-                                          <a href="{{ path('settings_profile') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'settings_' %}active{% endif %}'>Settings</a>
-                                          <a href='#'>Logout</a>
-                                    </div>
-                              </div>
+                              {% block left %}
+                              {% endblock left %}
                               <nav id='instance'>
                                     <a href="#">
                                           <svg class="icon icon-logo">
@@ -102,7 +68,7 @@
                               </svg>
                         </div>
                   </div>
-            {% endblock %}
+            {% endblock header%}
 
             {% block nav %}{% endblock %}
             {% block body %}{% endblock %}
diff --git a/templates/faq/base.html.twig b/templates/faq/base.html.twig
index 0fac2f393f..373a166f8a 100644
--- a/templates/faq/base.html.twig
+++ b/templates/faq/base.html.twig
@@ -1,6 +1,7 @@
-{% extends 'base.html.twig' %}
+{% extends 'left/left.html.twig' %}
 
-{% block meta %}{{ parent() }}
+{% block meta %}
+      {{ parent() }}
 {% endblock %}
 
 {% block title %}{% endblock %}
@@ -12,7 +13,13 @@
       <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/faq/faq_small.css') }}" media="screen and (max-width: 750px)">
 {% endblock %}
 
-{% block header %}{{ parent() }}
+{% block header %}
+      {{ parent() }}
 {% endblock %}
 
+{% block left %}
+      {{ parent() }}
+{% endblock %}
+
+
 {% block javascripts %}{% endblock %}
\ No newline at end of file
diff --git a/templates/left/left.html.twig b/templates/left/left.html.twig
new file mode 100644
index 0000000000..1084746f08
--- /dev/null
+++ b/templates/left/left.html.twig
@@ -0,0 +1,61 @@
+{% extends '/base.html.twig' %}
+
+{% block stylesheets %}
+    {{ parent() }}
+    <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/left/left.css') }}" media="screen and (min-width: 1300px)">
+    <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/left/left_mid.css') }}" media="screen and (max-width: 1300px)">
+    <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/left/left_small.css') }}" media="screen and (max-width: 750px)">
+{% endblock %}
+
+{% block left %}
+    {% if app.user %}
+        <div id='left-panel'>
+            <input type="checkbox" id="toggle">
+            <div class="icon-menu">
+                <label for="toggle" id='menu'></label>
+            </div>
+            <div class='navbar'>
+                <div class='profile'>
+                    <svg class="icon icon-avatar">
+                        <use xlink:href="#icon-avatar"></use>
+                    </svg>
+                    <div class="info">
+                        <b id="nick">{{ app.user.username }}</b>
+                        <div class="tags">
+                            <i>coffee addict</i>
+                            <i>lazy</i>
+                        </div>
+                        <div class="stats">
+                            <span>
+                                <b>1337</b>
+                                Followers</span>
+                            <span>
+                                <b>42</b>
+                                Following</span>
+                        </div>
+                    </div>
+                </div>
+                <a href='#'>Bookmarks</a>
+                <a href='#'>Happenings</a>
+                <a href='#'>Messages</a>
+                <a href='#'>Replies</a>
+                <a href='#'>Favourites</a>
+                <a href='#'>Reverse Favs</a>
+                <a href="{{ path('settings_profile') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'settings_' %}active{% endif %}'>Settings</a>
+                <a href='#'>Logout</a>
+            </div>
+        </div>
+    {% else %}
+        <div id='left-panel'>
+            <input type="checkbox" id="toggle">
+            <div class="icon-menu">
+                <label for="toggle" id='menu'></label>
+            </div>
+            <div class='navbar'>
+                <a href="{{ path('login') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'login' %}active{% endif %}'>Login</a>
+                <a href='#'>Register</a>
+            </div>
+        </div>
+    {% endif %}
+
+{% endblock %}
\ No newline at end of file
diff --git a/templates/security/login.html.twig b/templates/security/login.html.twig
index 67c1978918..1714ae7181 100644
--- a/templates/security/login.html.twig
+++ b/templates/security/login.html.twig
@@ -1,34 +1,48 @@
-{% extends 'base.html.twig' %}
+{% extends 'left_panel.html.twig' %}
+
+{% 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)">
+{% endblock %}
 
 {% block title %}Log in!{% endblock %}
 
 {% block body %}
-  <form method="post">
-    {% if error %}
-      <div class="alert alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
-    {% endif %}
+  <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 %}
+
+
+        <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
+      <div class='pair'>
+        <label for="inputNickname">Nickname</label>
+        <input type="text" value="{{ last_username }}" name="nickname" id="inputNickname" class="form-control" required autofocus>
       </div>
-    {% endif %}
+      <div class='pair' id='pass'>
+        <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') }}">
 
-    <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
-    <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>
-    <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>
 
-    <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>
-{% endblock %}
+      <button class="btn btn-lg btn-primary" type="submit">
+        Sign in
+      </button>
+    </form>
+  </div>
+{% endblock body %}