diff --git a/public/assets/css/settings/settings.css b/public/assets/css/settings/settings.css
index 8c98f6d471..01da5910f1 100644
--- a/public/assets/css/settings/settings.css
+++ b/public/assets/css/settings/settings.css
@@ -1,21 +1,29 @@
 .content {
       display: flex;
       flex-wrap: wrap;
-      margin-top: calc(3 * var(--main-size));
+      margin-top: calc(4 * var(--main-size));
       justify-content: center;
       align-items: center;
       margin-left: var(--nav-size);
-      margin-right: 0;
+      margin-right: var(--nav-size);
       margin-bottom: var(--unit-size);
 }
 
+.main {
+      width: 100%;
+      margin-left: var(--unit-size);
+      margin-right: var(--unit-size);
+      box-shadow: var(--shadow);
+      border-radius: 0 0 var(--unit-size) var(--unit-size);
+}
+
 .set-nav {
       order: 1;
       display: flex;
       justify-content: space-evenly;
       flex-wrap: wrap;
-      width: 100%;
-      background-color: var(--bg5);
+      flex: 1;
+      background-color: var(--bg1);
       padding: var(--medium-size);
       font-size: var(--medium-size);
       font-family: var(--head-font);
@@ -52,81 +60,40 @@
       transition: all 0.8s ease;
 }
 
-.set-nav2 {
-      order: 2;
-      display: flex;
-      justify-content: space-between;
-      flex-wrap: wrap;
-      width: 100%;
-      background-color: var(--bg5);
-      padding: var(--medium-size);
-      margin-top: calc(2 * var(--unit-size));
-      margin-left: var(--side-margin);
-      margin-right: var(--side-margin);
-      font-size: var(--medium-size);
-      font-family: var(--head-font);
-      border-radius: var(--unit-size) var(--unit-size) 0 0;
-}
-
-.set-nav2 ul {
-      display: flex;
-      align-items: stretch;
-      justify-content: space-evenly;
-      width: 100%;
-      margin-left: calc(2 * var(--side-margin));
-      margin-right: calc(2 * var(--side-margin));
-      padding: 0;
-}
-
-.set-nav2 li {
-      display: block;
-      flex: 0 1 auto;
-      list-style-type: none;
-      font-weight: 700;
-}
-
 .active {
       color: var(--fg) !important;
       font-weight: 700;
 }
 
-.set-nav2 a {
-      color: var(--accent);
-}
-
-.set-nav2 a:hover {
-      color: var(--fg);
-      transition: all 0.8s ease;
+.secundary {
+      display: flex;
+      flex-wrap: wrap;
+      border-radius: 0 0 var(--unit-size) var(--unit-size);
+      background-color: var(--bg3);
+      padding: var(--unit-size);
 }
 
 .form {
       order: 3;
-      background-color: var(--bg5);
+      background-color: var(--bg3);
       padding: calc(2*var(--unit-size));
       font-size: var(--medium-size);
       height: 100%;
       width: 100%;
-      margin-left: var(--side-margin);
-      margin-right: var(--side-margin);
       box-shadow: var(--shadow);
       border-radius: 0 0 var(--unit-size) var(--unit-size);
 }
-
 .form-single {
-      order: 3;
-      background-color: var(--bg5);
+      order: 2;
+      background-color: var(--bg3);
       padding: calc(2*var(--unit-size));
       font-size: var(--medium-size);
       height: 100%;
       width: 100%;
-      margin-left: var(--side-margin);
-      margin-right: var(--side-margin);
-      margin-top: calc(2 * var(--unit-size));
       box-shadow: var(--shadow);
       border-radius: var(--unit-size);
 }
 
-
 /* FORMS ------------------------------*/
 label {
       display: inline-block;
@@ -138,7 +105,8 @@ label {
 input[type=text] {
       margin-top: calc(var(--unit-size) * 0.5);
       width: calc(100% - var(--unit-size));
-      background-color: var(--bg1);
+      background-color: var(--bg4);
+      box-shadow: var(--shadow);
       border-style: none;
       padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
       color: var(--fg);
@@ -168,7 +136,8 @@ button[type=submit] {
       margin-top: calc(var(--unit-size) * 0.5);
       width: calc(100% - var(--unit-size));
       height: calc(10 * var(--unit-size));
-      background-color: var(--bg1);
+      background-color: var(--bg4);
+      box-shadow: var(--shadow);
       border-style: none;
       padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
       color: var(--fg);
@@ -181,7 +150,8 @@ button[type=submit] {
 #form_phone_number {
       margin-top: calc(var(--unit-size) * 0.5);
       width: calc(100% - var(--unit-size));
-      background-color: var(--bg1);
+      background-color: var(--bg4);
+      box-shadow: var(--shadow);
       border-style: none;
       padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
       color: var(--fg);
@@ -191,7 +161,8 @@ button[type=submit] {
 
 #form_language{
       margin-top: calc(var(--unit-size) * 0.5);
-      background-color: var(--bg1);
+      background-color: var(--bg4);
+      box-shadow: var(--shadow);
       border-style: none;
       padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
       color: var(--fg);
@@ -273,17 +244,14 @@ input[type=radio] {
 
 #form-tabs {
       order: 2;
-      margin-top: var(--side-margin);
-      margin-left: var(--side-margin);
-      margin-right: var(--side-margin);
       width: 100%;
       font-size: var(--medium-size);
 }
 #form-tabs ul {
       display: flex;
       flex-wrap: wrap;
-      border-radius: var(--unit-size);
-      background-color: var(--bg5);
+      border-radius: 0 0 var(--unit-size) var(--unit-size);
+      background-color: var(--bg1);
       justify-content: space-evenly;
       width: 100%;
 }
@@ -300,7 +268,7 @@ input[type=radio] {
 #form-tabs ul .form {
       order: 2;
       padding: calc(2*var(--unit-size));
-      background-color: #00000000 !important;
+      background-color: var(--bg3) !important;
       height: 100%;
       margin-left: 0;
       margin-right: 0;
diff --git a/templates/left/left.html.twig b/templates/left/left.html.twig
index 4969d1fe04..55b50cff63 100644
--- a/templates/left/left.html.twig
+++ b/templates/left/left.html.twig
@@ -16,8 +16,9 @@
             </div>
             <div class='navbar'>
                 <div class="left-nav">
+                    <hr>
                     <div class='profile'>
-                        <img src='{{ user_avatar }}' alt="Your avatar." class="icon icon-avatar">
+                        <img src='{{ asset('assets/default-avatar.svg') }}' alt="Your avatar." class="icon icon-avatar">
                         <div class="info">
                             <b id="nick">{{ app.user.username }}</b>
                             <div class="tags">
diff --git a/templates/settings/account.html.twig b/templates/settings/account.html.twig
index 17d8dc2ff6..8a962314ec 100644
--- a/templates/settings/account.html.twig
+++ b/templates/settings/account.html.twig
@@ -4,16 +4,19 @@
 
 {% block body %}
 
-      <div class='content'>
+    <div class='content'>
+        <div class="main">
             {% block primary_nav %}
-                  {{ parent() }}
+                {{ parent() }}
             {% endblock primary_nav %}
-
-            {% block form %}
-                  <div class='form-single'>
+            <div class="secundary">
+                {% block form %}
+                    <div class='form-single'>
                         {{ form(acc) }}
-                  </div>
-            {% endblock form %}
-      </div>
+                    </div>
+                {% endblock form %}
+            </div>
+        </div>
+    </div>
 
 {% endblock body %}
diff --git a/templates/settings/base.html.twig b/templates/settings/base.html.twig
index aeb4f9b04e..bf837a565f 100644
--- a/templates/settings/base.html.twig
+++ b/templates/settings/base.html.twig
@@ -23,27 +23,30 @@
     {% endblock %}
 
     <div class="content">
-        {% block primary_nav %}
-            <nav class='set-nav'>
-                <ul>
-                    <li>
-                        <a href="{{ path('settings_personal_info') }}" class='hover-effect {{ active('settings_personal_info', 'settings_avatar') }}'>Profile</a>
-                    </li>
-                    <li>
-                        <a href="{{ path('settings_account') }}" class='hover-effect {{ active('settings_account') }}'>Account</a>
-                    </li>
-                    <li>
-                        <a href="{{ path('settings_notifications') }}" class='hover-effect {{ active('settings_notifications') }}'>Notifications</a>
-                    </li>
-                </ul>
-            </nav>
-        {% endblock primary_nav %}
+        <div class="main">
+            {% block primary_nav %}
+                <nav class='set-nav'>
+                    <ul>
+                        <li>
+                            <a href="{{ path('settings_personal_info') }}" class='hover-effect {{ active('settings_personal_info', 'settings_avatar') }}'>Profile</a>
+                        </li>
+                        <li>
+                            <a href="{{ path('settings_account') }}" class='hover-effect {{ active('settings_account') }}'>Account</a>
+                        </li>
+                        <li>
+                            <a href="{{ path('settings_notifications') }}" class='hover-effect {{ active('settings_notifications') }}'>Notifications</a>
+                        </li>
+                    </ul>
+                </nav>
+                <hr>
+            {% endblock primary_nav %}
 
-        {% block secundary_nav %}
-        {% endblock secundary_nav %}
+            {% block secundary_nav %}
+            {% endblock secundary_nav %}
 
-        {% block form %}
-        {% endblock form %}
+            {% block form %}
+            {% endblock form %}
+        </div>
     </div>
 {% endblock body %}
 
diff --git a/templates/settings/notifications.html.twig b/templates/settings/notifications.html.twig
index 031ead4ea4..beccfd1917 100644
--- a/templates/settings/notifications.html.twig
+++ b/templates/settings/notifications.html.twig
@@ -8,25 +8,29 @@
 
 {% block body %}
     <div class='content'>
-        {% block primary_nav %}
-            {{ parent() }}
-        {% endblock primary_nav %}
+        <div class="main">
+            {% block primary_nav %}
+                {{ parent() }}
+            {% endblock primary_nav %}
 
-        {% block form %}
-            <div id='form-tabs'>
-                <ul>
-                    {% for transport, form in tabbed_forms %}
-                        <input type="radio" id="toggle-{{ transport }}" name="tabs" value="toggle-{{ transport }}" {% if transport == "email" %} checked {% endif %}>
-                        <label for="toggle-{{ transport }}" id='tabs'>
-                            {{ transport }}
-                        </label>
-                        <div id="form_{{ transport }}" class='form'>
-                            {{ form(form) }}
-                        </div>
-                    {% endfor %}
-                </ul>
+            <div class="secundary">
+                {% block form %}
+                    <div id='form-tabs'>
+                        <ul>
+                            {% for transport, form in tabbed_forms %}
+                                <input type="radio" id="toggle-{{ transport }}" name="tabs" value="toggle-{{ transport }}" {% if transport == "email" %} checked {% endif %}>
+                                <label for="toggle-{{ transport }}" id='tabs'>
+                                    {{ transport }}
+                                </label>
+                                <div id="form_{{ transport }}" class='form'>
+                                    {{ form(form) }}
+                                </div>
+                            {% endfor %}
+                        </ul>
+                    </div>
+                {% endblock form %}
             </div>
-        {% endblock form %}
+        </div>
     </div>
 
 {% endblock body %}
diff --git a/templates/settings/profile.html.twig b/templates/settings/profile.html.twig
index 82ae63cdc5..8e589ccaad 100644
--- a/templates/settings/profile.html.twig
+++ b/templates/settings/profile.html.twig
@@ -3,34 +3,36 @@
 {% block title %}Profile Settings{% endblock %}
 
 {% block body %}
-
     <div class='content'>
-        {% block primary_nav %}
-            {{ parent() }}
-        {% endblock primary_nav %}
+        <div class="main">
+            {% block primary_nav %}
+                {{ parent() }}
+            {% endblock primary_nav %}
 
-        {% block secundary_nav %}
-            <nav class='set-nav2'>
-                <ul>
-                    {# {% for tab in tabs %} #}
-                    {# {% endfor %} #}
+            <div class="secundary">
+                {% block secundary_nav %}
+                    <nav class='set-nav'>
+                        <ul>
+                            {# {% for tab in tabs %} #}
+                            {# {% endfor %} #}
 
-                    <li>
-                        <a href="{{ path('settings_personal_info') }}"
-                           class='hover-effect {{ active('settings_personal_info') }}'>Personal Info</a>
-                    </li>
-                    <li>
-                        <a href="{{ path('settings_avatar') }}" class='hover-effect {{ active('settings_avatar') }}'>Avatar</a>
-                    </li>
-                </ul>
-            </nav>
-        {% endblock secundary_nav %}
+                            <li>
+                                <a href="{{ path('settings_personal_info') }}"
+                                   class='hover-effect {{ active('settings_personal_info') }}'>Personal Info</a>
+                            </li>
+                            <li>
+                                <a href="{{ path('settings_avatar') }}" class='hover-effect {{ active('settings_avatar') }}'>Avatar</a>
+                            </li>
+                        </ul>
+                    </nav>
+                {% endblock secundary_nav %}
 
-        {% block form %}
-            <div class='form'>
-                {{ form(prof) }}
+                {% block form %}
+                    <div class='form'>
+                        {{ form(prof) }}
+                    </div>
+                {% endblock form %}
             </div>
-        {% endblock form %}
-
+        </div>
     </div>
 {% endblock body %}