diff --git a/public/assets/css/base.css b/public/assets/css/base.css
index f3a74d41be..fc050837c5 100644
--- a/public/assets/css/base.css
+++ b/public/assets/css/base.css
@@ -31,13 +31,7 @@
     --fade-out: fadeOut 200ms cubic-bezier(0, 0.55, 0.45, 1);
 }
 
-#instance:focus svg,
-#instance:hover svg {
-    fill: var(--bg1);
-    transition: var(--cubic-transition);
-}
-
-/* DEFAULTS */
+/* BACKGROUND IMG GRADIENT */
 .bg {
     background-color: var(--bg3);
     background-image: url(../images/bg.png);
@@ -46,6 +40,7 @@
     background-size: 100% 100%;
 }
 
+/* HEADER AND SIDEPANELS */
 #header {
     z-index: 1;
 
@@ -63,6 +58,8 @@
 
     box-shadow: var(--shadow);
 }
+
+/* content should be rendered after the header, not bellow */
 #header + * {
     margin-top: 3rem;
 }
@@ -72,10 +69,9 @@
     align-items: center;
 }
 
-.active {
-    border-radius: var(--unit-size);
-    background: var(--white);
-    color: var(--bg1) !important;
+#instance:focus svg,
+#instance:hover svg {
+    fill: var(--bg1);
     transition: var(--cubic-transition);
 }
 
@@ -84,6 +80,40 @@
     fill: var(--white);
 }
 
+.panel aside {
+    font-size: var(--medium-size);
+    display: block;
+    position: absolute;
+    top: 100%;
+
+    width: 20%;
+    animation: var(--fade-in);
+    padding: var(--unit-size);
+}
+
+.panel aside .footer {
+    display: inline-block;
+    position: fixed;
+
+    max-width: 20%;
+
+    bottom: var(--unit-size);
+    left: var(--unit-size);
+    font-size: var(--small-size);
+}
+
+.icon {
+    fill: var(--white);
+}
+
+/* CURRENT PAGE LINK */
+.active {
+    border-radius: var(--unit-size);
+    background: var(--white);
+    color: var(--bg1) !important;
+    transition: var(--cubic-transition);
+}
+
 /* CONTAINS ALL ELEMENTS BESIDES HEADER */
 .container {
     display: flex;
@@ -152,7 +182,7 @@
 
     background-color: var(--translucent);
     font-size: var(--main-size);
-    padding: var(--unit-size);
+    padding: 4px;
 }
 
 .note-info .avatar {
@@ -164,7 +194,6 @@
     padding: var(--small-size);
 }
 .note-content p {
-    font-size: var(--medium-size);
     padding-left: var(--small-size);
     padding-right: var(--small-size);
 }
@@ -193,58 +222,31 @@
     height: auto;
 }
 
-/* SIDE PANELS */
+/* BUTTONS AND INPUT */
 
-.panel {
-    font-size: var(--main-size);
-}
-
-.panel aside {
-    animation: var(--fade-in);
-    padding: var(--unit-size);
-
-
-    box-sizing: border-box;
-    width: 20%;
-
-    display: block;
-
-    position: absolute;
-    top: 100%;
-}
-
-.panel aside .footer {
-    max-width: 20%;
-
-    display: inline-block;
-    position: fixed;
-
-    bottom: var(--unit-size);
-    left: var(--unit-size);
-    font-size: var(--small-size);
-}
-
-.icon {
-    fill: var(--white);
-    vertical-align: middle;
-}
-.icon-left,
-.icon-right {
-    display: none;
-}
 
 /* MEDIA RESIZE */
-@media (max-width: 1200px) {
+@media (min-width: 1200px) {
+    /* no need to make the panels disappear at this size */
     .icon-left,
     .icon-right {
-        display: flex;
+        display: none;
     }
-
+}
+@media (max-width: 1200px) {
+    /* content should occupy the entire width at this size */
     .content {
         margin: unset;
         max-width: 100%;
     }
 
+    /* we need to control panel's view at this size */
+    .icon-left,
+    .icon-right {
+        display: flex;
+    }
+
+    /* by default they are hidden */
     .panel aside {
         display: none;
     }
@@ -285,6 +287,73 @@
     }
 }
 
+/* BUTTONS AND INPUT SHENANIGANS */
+button,
+input:not([type=text]) {
+    font-size: var(--small-size) !important;
+    background-image: linear-gradient(180deg, var(--bg2), transparent) !important;
+    color: var(--white) !important;
+
+    border: solid 2px var(--bg2) !important;
+}
+
+textarea:hover,
+textarea:focus {
+    border-color: var(--bg3) !important;
+}
+
+/* TODO: hover and focus feedback, checkbox */
+input[type=radio]:hover,
+input[type=radio]:focus {
+    border-color: var(--bg3) !important;
+}
+input[type=radio] {
+    border: solid 0.25em var(--bg2) !important;
+    background-color: var(--bg1) !important;
+}
+input[type=radio]:checked {
+    background-color: var(--white) !important;
+}
+
+button:hover,
+button:focus,
+input:hover,
+input:focus {
+    border-color: var(--bg3) !important;
+    color: var(--white) !important;
+}
+
+button:hover,
+input:is([type=reset], [type=button], [type=submit]):hover {
+    color: var(--white) !important;
+}
+
+:focus-visible::-moz-focus-inner {
+    border-color: var(--bg3) !important;
+}
+
+:is(:disabled, :disabled:active)::file-selector-button,
+button:is(:disabled, :disabled:active),
+input:is([type=reset], [type=button], [type=submit]):is(:disabled, :disabled:active),
+select:is(:disabled, :disabled:active) > button {
+    color: var(--white) !important;
+}
+
+/* file selector */
+input[type=file] {
+    background: linear-gradient(180deg, var(--bg2), transparent) !important;
+}
+input[type=file]:focus,
+input[type=file]:hover {
+    background: linear-gradient(180deg, var(--bg2), var(--bg3) 200%) !important;
+}
+
+/* button part of file selector */
+::file-selector-button {
+    color: var(--white) !important;
+}
+
+
 /* ANIMATIONS */
 @keyframes fadeIn {
     0% {
diff --git a/public/assets/css/left/left.css b/public/assets/css/left/left.css
index 460a95df9e..47fda1d323 100644
--- a/public/assets/css/left/left.css
+++ b/public/assets/css/left/left.css
@@ -62,7 +62,6 @@
 
 #user-tags {
     font-family: var(--main-font);
-    font-size: var(--medium-size);
     padding-left: var(--unit-size);
 }
 
@@ -91,8 +90,3 @@
     flex-direction: column;
 }
 
-.sec-nav {
-    font-size: var(--medium-size);
-    display: flex;
-    flex-direction: column;
-}
\ No newline at end of file
diff --git a/public/assets/css/poll/poll.css b/public/assets/css/poll/poll.css
index b47a391bc7..e69de29bb2 100644
--- a/public/assets/css/poll/poll.css
+++ b/public/assets/css/poll/poll.css
@@ -1,91 +0,0 @@
-.poll .poll-question {
-    font-weight: 700;
-}
-
-.poll #pollresponse_Options {
-    display: flex;
-    flex-direction: column;
-}
-
-#pollresponse > * > label {
-    vertical-align: top;
-    display: none;
-}
-
-
-.poll .form-single,
-.create-poll-notice .form-single {
-    height: 100%;
-    width: 100%;
-    border-radius: var(--small-size);
-}
-
-.poll .result {
-    display: flex;
-    padding-top: var(--unit-size);
-}
-
-.poll .result-vote {
-    font-weight: 650;
-    padding-left: var(--unit-size);
-}
-
-.create-poll-notice {
-    padding: var(--unit-size);
-    width: 100%;
-}
-
-#post_poll_visibility {
-    font-size: var(--medium-size);
-    color: var(--fg);
-}
-
-#post_poll_visibility > * {
-    padding-right: var(--unit-size);
-}
-
-
-#post_poll > * {
-    padding: calc(var(--unit-size) * 0.2);
-}
-
-
-/* FORMS ------------------------------*/
-.poll label {
-    display: inline-block;
-    font-family: 'Montserrat', sans-serif;
-    width: 100%;
-    padding: 0.5em 0.1em;
-}
-
-.poll input[type=text],
-.create-poll-notice input[type=text] {
-    margin-top: calc(var(--unit-size) * 0.5);
-    width: calc(100% - var(--unit-size));
-    background-color: var(--bg2);
-    box-shadow: var(--shadow);
-    border: solid 2px var(--accent-low);
-    padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
-    color: var(--fg);
-    border-radius: calc(var(--unit-size) * 0.5);
-    font-size: var(--medium-size);
-    box-sizing: border-box;
-}
-
-
-.poll button[type=submit],
-.create-poll-notice button[type=submit] {
-    background: var(--bg1);
-    padding: calc(var(--unit-size) * 0.8) calc(var(--unit-size) * 2);
-    color: var(--fg);
-    border-style: solid;
-    border-color: var(--accent);
-    border-radius: var(--unit-size);
-    border-width: 2px;
-    font-family: 'Montserrat', sans-serif;
-    font-size: var(--small-size);
-    font-weight: 700;
-    margin-top: 1em;
-}
-
-
diff --git a/public/assets/css/reset.css b/public/assets/css/reset.css
index 47ca4920b5..c5b3407206 100644
--- a/public/assets/css/reset.css
+++ b/public/assets/css/reset.css
@@ -71,7 +71,8 @@ details > summary::-webkit-details-marker {
 }
 
 * {
-    box-sizing: border-box;
+    vertical-align: middle !important;
+    box-sizing: border-box !important;
 }
 
 /* TYPOGRAPHY AND GENERAL SELECTORS */
@@ -84,6 +85,7 @@ html {
     background-attachment: fixed;
     color: var(--white);
     font-family: var(--main-font);
+    font-size: var(--small-size);
 }
 
 h1 {
@@ -106,8 +108,8 @@ h2 {
 
 h3 {
     font-family: var(--display-font);
-    font-size: var(--medium-size);
-    font-weight: 600;
+    font-size: var(--small-size);
+    font-weight: 700;
     line-height: 1.00;
     letter-spacing: -0.20px;
     word-spacing: 1.00px;
@@ -116,7 +118,7 @@ h3 {
 
 p {
     font-family: var(--main-font);
-    font-size: var(--medium-size);
+    font-size: var(--small-size);
     font-weight: 400;
     letter-spacing: -0.30px;
     word-spacing: -0.10px;
@@ -124,6 +126,14 @@ p {
     text-transform: none;
 }
 
+textarea {
+    font-family: var(--main-font);
+    font-weight: 400;
+    letter-spacing: -0.30px;
+    word-spacing: -0.10px;
+    text-transform: none;
+}
+
 ul {
     text-decoration: none;
     margin: 0;
@@ -197,83 +207,35 @@ input:not([type=text]) {
     cursor: pointer;
     font-size: var(--medium-size);
 
-    background-image: linear-gradient(180deg, var(--bg2), transparent);
-    color: var(--white);
-
-    border: solid 2px var(--bg2);
     border-radius: var(--unit-size);
     padding: 6px 12px;
 }
 
-textarea:hover,
-textarea:focus {
-    border: solid 2px var(--bg3) !important;
-}
-
 *|*::-moz-button-content {
     all: unset;
 }
 
-/* TODO: hover and focus feedback, checkbox */
-input[type=radio]:hover,
-input[type=radio]:focus {
-    border: solid 5px var(--bg3) !important;
-}
-
 input[type=radio] {
     all: unset;
     display: inline-block;
-    width: var(--unit-size);
-    height: var(--unit-size);
-    border: solid 5px var(--bg2);
+    width: 1em;
+    height: 1em;
     border-radius: 50%;
     margin: 3px 3px 0px 5px;
-    background-color: var(--bg1);
-}
-input[type=radio]:checked {
-    background-color: var(--white);
-}
-
-button:hover,
-button:focus,
-input:hover,
-input:focus {
-    border: solid 2px var(--bg3);
-    color: var(--white);
-}
-
-button:hover,
-input:is([type=reset], [type=button], [type=submit]):hover {
-    color: var(--white);
-}
-
-:focus-visible::-moz-focus-inner {
-    border-color: var(--bg3) !important;
-}
-
-:is(:disabled, :disabled:active)::file-selector-button,
-button:is(:disabled, :disabled:active),
-input:is([type=reset], [type=button], [type=submit]):is(:disabled, :disabled:active),
-select:is(:disabled, :disabled:active) > button {
-    color: var(--white);
 }
 
 /* file selector */
 input[type=file] {
     all: unset;
-    display: block;
-    max-width: 100%;
-    background: linear-gradient(135deg, var(--bg2), transparent);
+
+    display: block !important;
+    width: 100%;
 
     font-family: var(--main-font);
     font-size: var(--medium-size);
 
     border-radius: var(--unit-size);
 }
-input[type=file]:focus,
-input[type=file]:hover {
-    background: linear-gradient(135deg, var(--bg2), var(--bg3) 200%);
-}
 
 input + label {
     all: unset;
@@ -286,8 +248,7 @@ input + label {
     cursor: pointer;
 
     background-color: unset;
-    color: var(--white);
 
     border: unset;
-    margin: 5px;
+    margin: 3px;
 }
diff --git a/public/assets/css/right/right.css b/public/assets/css/right/right.css
index 74e825f16c..5116490d59 100644
--- a/public/assets/css/right/right.css
+++ b/public/assets/css/right/right.css
@@ -2,7 +2,7 @@
     right: 0;
 }
 
-.create-notice {
+.section-widget {
     display: flex;
     flex-direction: column;
     width: 100%;
@@ -10,84 +10,52 @@
     background-color: var(--translucent);
     border-radius: var(--unit-size);
     border: solid 2px var(--bg2);
-}
 
-.create-notice textarea {
-    width: 100%;
+    font-family: var(--main-font);
+    font-weight: 400;
+    color: var(--white);
 }
 
 .section-title {
-    display: flex;
-    flex-direction: column;
+    font-family: var(--display-font);
+    font-weight: 900;
+    font-size: var(--main-size);
+
     border-radius: var(--unit-size);
-    padding: var(--unit-size);
+    padding: 2px var(--unit-size);
 
     background-color: var(--translucent);
-    font-family: var(--display-font);
+}
+.section-title-hamburger {
+    display: flex;
+    justify-content: space-between;
+}
+.section-title-hamburger svg {
+    align-self: center;
+    fill: var(--white);
 }
 
-.section-title-plus {
-    fill: var(--white);
-    width: var(--main-size);
-    height: auto;
-}
-.section-title-plus summary {
-    display: block;
-    position: absolute;
-    top: var(--unit-size);
-    right: var(--unit-size);
+.section-form {
     padding: var(--unit-size);
 }
 
-.section-content {
-    margin: var(--unit-size);
-}
-.section-content hr {
-    all: unset;
-    display: inline;
-    height: 2px;
-    background-image: linear-gradient(to left, var(--translucent), transparent 90%);
+.form-options {
+    display: block !important;
     margin-bottom: var(--unit-size);
 }
 
-.target,
-.scope {
-    border-radius: var(--unit-size);
-}
-
-.target label:first-child,
-.scope label:first-child {
-    font-family: var(--display-font);
-}
-
-#tabs {
-    display: flex;
-    flex-direction: column;
-    font-family: var(--display-font);
-}
-
-.notice-options {
-    width: 100%;
-}
-
-#post_content {
+.form-input {
     border-radius: var(--unit-size);
     background-color: var(--translucent);
+    color: var(--white);
 
+    width: 100%;
     max-width: 100%;
     height: calc(6 * var(--main-size));
 
-    border: 2px solid var(--bg2);
+    border: 2px solid transparent;
     margin-top: var(--unit-size);
     margin-bottom: var(--unit-size);
     padding: var(--unit-size);
     resize: vertical;
-
-    font-family: var(--main-font);
-    font-size: var(--medium-size);
-    color: var(--white);
-}
-
-.attachments {
-    margin-bottom: var(--unit-size);
 }
\ No newline at end of file
diff --git a/public/assets/css/settings/settings.css b/public/assets/css/settings/settings.css
index b830ffc8b9..93439e0989 100644
--- a/public/assets/css/settings/settings.css
+++ b/public/assets/css/settings/settings.css
@@ -1,7 +1,6 @@
 .main-nav {
     background-color: var(--translucent);
     margin-bottom: var(--unit-size);
-    font-size: var(--main-size);
     border-radius: var(--unit-size);
     padding: var(--unit-size);
     box-sizing: border-box;
@@ -30,13 +29,11 @@
 }
 
 .main-nav ul li {
-    font-size: var(--medium-size);
     border-radius: var(--unit-size);
 }
 
 .form {
     display: flex;
-    font-size: var(--main-size);
     border-radius: var(--unit-size);
     padding: var(--unit-size);
     box-sizing: border-box;
@@ -57,7 +54,6 @@
 .form #save {
     display: flex;
     flex-direction: column;
-    font-size: var(--medium-size);
     padding: var(--unit-size);
     box-sizing: border-box;
 }
@@ -77,7 +73,6 @@
     position: relative;
 
     color: var(--white);
-    font-size: var(--medium-size);
     border-radius: var(--unit-size);
     padding: var(--unit-size);
     box-sizing: border-box;
diff --git a/templates/settings/base.html.twig b/templates/settings/base.html.twig
index 02adfc0ad1..f8fe3eab9b 100644
--- a/templates/settings/base.html.twig
+++ b/templates/settings/base.html.twig
@@ -23,7 +23,7 @@
             <li>
                 <details class="section-title-settings">
                     <summary>
-                        <h1>Profile {{ icon('arrow-down', 'icon icon-details-open') | raw }}</h1>
+                        <h2>Profile {{ icon('arrow-down', 'icon icon-details-open') | raw }}</h2>
 
                         <em>Personal Information, Avatar and Profile</em>
                     </summary>
@@ -34,8 +34,8 @@
                                 <li>
                                     <details class="section-title-settings">
                                         <summary>
-                                            <h1>Personal
-                                                Info{{ icon('arrow-down', 'icon icon-details-open') | raw }}</h1>
+                                            <h3>Personal
+                                                Info{{ icon('arrow-down', 'icon icon-details-open') | raw }}</h3>
 
                                             <em>Nickname, Homepage, Bio, Self Tags and more.</em>
                                         </summary>
@@ -53,7 +53,7 @@
                                     <li>
                                         <details class="section-title-settings">
                                             <summary>
-                                                <h1>{{ tab['title'] }}{{ icon('arrow-down', 'icon icon-details-open') | raw }}</h1>
+                                                <h3>{{ tab['title'] }}{{ icon('arrow-down', 'icon icon-details-open') | raw }}</h3>
 
                                                 <em>{{ tab['desc'] }}</em>
                                             </summary>
@@ -79,7 +79,7 @@
             <li>
                 <details class="section-title-settings">
                     <summary>
-                        <h1>Account{{ icon('arrow-down', 'icon icon-details-open') | raw }}</h1>
+                        <h2>Account{{ icon('arrow-down', 'icon icon-details-open') | raw }}</h2>
                         <em>Email, Password and Language</em>
                     </summary>
 
@@ -96,7 +96,7 @@
             <li>
                 <details class="section-title-settings">
                     <summary>
-                        <h1>Notifications{{ icon('arrow-down', 'icon icon-details-open') | raw }}</h1>
+                        <h2>Notifications{{ icon('arrow-down', 'icon icon-details-open') | raw }}</h2>
                         <em>Enable/disable notifications (Email, XMPP, Replies...)</em>
                     </summary>
 
diff --git a/templates/sidepanel/right/right.html.twig b/templates/sidepanel/right/right.html.twig
index 2c709e0dc9..1859451743 100644
--- a/templates/sidepanel/right/right.html.twig
+++ b/templates/sidepanel/right/right.html.twig
@@ -1,78 +1,53 @@
 <aside id='right-panel'>
-
     {% if post_form is defined %}
-
-        <section class="create-notice">
-
+        <section class="section-widget">
             <legend class="section-title">
-                <h1>Create a note</h1>
-
-                <details class="section-title-plus">
-                    <summary>
-                        {{ icon('plus-circle', 'icon icon-plus') | raw }}
+                <details>
+                    <summary class="section-title-hamburger">
+                        Create a note {{ icon('plus-circle', 'icon icon-plus') | raw }}
                     </summary>
-                    <div id="note-types">
-                        {% for tab in tabs %}
-                            <a href={{ path(tab['href']) }}>{{ tab['title'] }}</a>
-                        {% endfor %}
-                    </div>
+
+                    {% for tab in tabs %}
+                        <a class="section-title-hamburger-element" href={{ path(tab['href']) }}>{{ tab['title'] }}</a>
+                    {% endfor %}
                 </details>
             </legend>
 
-            <div class="section-content">
+            <div class="section-form">
                 {{ form_start(post_form) }}
-                    <span class="target">
-                        <div class="target-top">
-                            {{ form_label(post_form.to) }}
-                        </div>
-                        <div class="target-bot">
-                            {{ form_widget(post_form.to) }}
-                        </div>
-                    </span>
 
-                <hr>
-
-                <span class="scope">
-                    <div class="visibility">
-                        {{ form_row(post_form.visibility) }}
-                    </div>
+                <span class="form-target">
+                    {{ form_label(post_form.to) }}
+                    {{ form_widget(post_form.to) }}
                 </span>
 
-                <hr>
+                {{ form_row(post_form.visibility, {'attr': {'class': 'form-scope'}}) }}
 
-                <span id="input">
-                    <div class="input-wrapper">
-                        <div class="content-input">
-                            {{ form_row(post_form.content) }}
-                        </div>
-                    </div>
+                {{ form_row(post_form.content, {'attr': {'class': 'form-input'}}) }}
 
-                    <div class="notice-options">
-                        <div class="attachments">
-                            <label for="{{ post_form.attachments.vars.id }}" class="custom-file-upload">
-                                {{ form_widget(post_form.attachments) }}
-                            </label>
-                        </div>
-                    </div>
-                </span>
+                <label for="{{ post_form.attachments.vars.id }}" class="form-options">
+                    {{ form_widget(post_form.attachments) }}
+                </label>
 
-                {{ form_row(post_form.post) }}
+                {{ form_row(post_form.post, {'attr': {'class': 'form-send'}}) }}
 
                 {{ form_end(post_form) }}
             </div>
         </section>
-
-
     {% endif %}
 
     {% set current_path = app.request.get('_route') %}
     {% if right_panel_vars is defined %}
         {% for block in handle_event('AppendRightPanelBlock', {'path': current_path, 'vars': right_panel_vars}) %}
-            {{ block | raw }}
+            <section class="section-widget">
+                {{ block | raw }}
+            </section>
         {% endfor %}
     {% else %}
         {% for block in handle_event('AppendRightPanelBlock', {'path': current_path}) %}
-            {{ block | raw }}
+            <section class="section-widget">
+                {{ block | raw }}
+            </section>
         {% endfor %}
     {% endif %}
 </aside>