diff --git a/components/Feed/templates/feed/feed.html.twig b/components/Feed/templates/feed/feed.html.twig
index 9639fc0827..18ab8a3ee1 100644
--- a/components/Feed/templates/feed/feed.html.twig
+++ b/components/Feed/templates/feed/feed.html.twig
@@ -9,9 +9,15 @@
 {% endblock stylesheets %}
 
 {% block body %}
-    {% for block in handle_event('BeforeFeed', app.request) %}
-        {{ block | raw }}
-    {% endfor %}
+    <header class="feed-header">
+        <h1>{{ page_title | trans }} {{ 'feed' | trans }}</h1>
+        <nav class="feed-actions" role=navigation>
+            {% for block in handle_event('AddFeedActions', app.request) %}
+                {{ block | raw }}
+            {% endfor %}
+        </nav>
+    </header>
+
     {# Backwards compatibility with hAtom 0.1 #}
     <main class="feed" tabindex="0" role="feed">
         <div class="h-feed hfeed notes">
diff --git a/components/Group/templates/group/view.html.twig b/components/Group/templates/group/view.html.twig
index a2adeae603..7ed8f7cf5e 100644
--- a/components/Group/templates/group/view.html.twig
+++ b/components/Group/templates/group/view.html.twig
@@ -36,7 +36,7 @@
         </main>
         
     {% else %}
-        <div class="section-widget-padded section-widget">
+        <div class="section-padding section-widget">
             <p>{% trans with { '%group%': nickname } %}The group <em>%group%</em> doesn't exist.{% endtrans %}</p>
             {% if create_form is defined and create_form is not null %}
                 <p>{% trans %}Would you like to create it?{% endtrans %}</p>
diff --git a/components/LeftPanel/templates/left_panel/edit_feeds.html.twig b/components/LeftPanel/templates/left_panel/edit_feeds.html.twig
index 1d4ef1473a..e70fac9236 100644
--- a/components/LeftPanel/templates/left_panel/edit_feeds.html.twig
+++ b/components/LeftPanel/templates/left_panel/edit_feeds.html.twig
@@ -6,7 +6,7 @@
 {% endblock stylesheets %}
 
 {% block body %}
-  <div class="section-widget section-widget-padded">
+  <div class="section-widget">
     <form class="section-form" action="{{ path('edit_feeds') }}" method="post">
 
       <fieldset>
@@ -16,7 +16,7 @@
         {{ form_start(edit_feeds) }}
         {% for child in edit_feeds.children %}
           {% if 'row_url' in child.vars.block_prefixes %}
-            <div class="section-widget section-widget-padded">
+            <div class="section-widget section-padding">
             {{ form_label(child) }}
             {{ form_widget(child) }}
           {% elseif 'row_title' in child.vars.block_prefixes %}
diff --git a/components/LeftPanel/templates/left_panel/view.html.twig b/components/LeftPanel/templates/left_panel/view.html.twig
index 641208b643..8b6b3285a8 100644
--- a/components/LeftPanel/templates/left_panel/view.html.twig
+++ b/components/LeftPanel/templates/left_panel/view.html.twig
@@ -7,7 +7,7 @@
         <a id="anchor-left-panel" class="anchor-hidden" title="{{ 'Press tab to access selected region!' | trans }}"></a>
         <aside class="panel-content accessibility-target">
             {% if app.user %}
-                <section class='section-widget section-widget-padded' title="{{ 'Your profile information.' | trans }}">
+                <section class='section-widget section-padding' title="{{ 'Your profile information.' | trans }}">
                     {% block profile_view %}{% include 'cards/profile/view.html.twig' with { actor: current_actor } %}{% endblock profile_view %}
                     {{ block("profile_current_actor", "cards/navigation/view.html.twig") }}
                 </section>
diff --git a/components/RightPanel/templates/right_panel/view.html.twig b/components/RightPanel/templates/right_panel/view.html.twig
index b20770a04f..5c96fbc024 100644
--- a/components/RightPanel/templates/right_panel/view.html.twig
+++ b/components/RightPanel/templates/right_panel/view.html.twig
@@ -1,6 +1,6 @@
 {% block rightpanel %}
     <label class="panel-right-icon" for="panel-right-toggle" aria-hidden="true"
-           tabindex="-1">{{ icon('notes', 'icon icon-right') | raw }}</label>
+           tabindex="-1">{{ icon('chevron-left', 'icon icon-right') | raw }}</label>
     <input type="checkbox" id="panel-right-toggle" aria-hidden="true" tabindex="-1">
 
     <div class="header-panel section-panel-right">
@@ -29,9 +29,9 @@
 
                                 <details class="section-widget-subtitle-details">
                                     <summary class="section-subtitle-summary">
-                                        <h3>
+                                        <strong>
                                             {{ "Additional options" | trans }}
-                                        </h3>
+                                        </strong>
                                         {{ icon('arrow-down', 'icon icon-details-close') | raw }}
                                     </summary>
                                     {{ form_row(blocks['post_form'].language) }}
diff --git a/components/Search/templates/search/show.html.twig b/components/Search/templates/search/show.html.twig
index 73ff5951d3..b1d9c5e8dc 100644
--- a/components/Search/templates/search/show.html.twig
+++ b/components/Search/templates/search/show.html.twig
@@ -8,7 +8,7 @@
         </label>
     {% endif %}
 
-    <div class="section-widget-padded">
+    <div class="section-padding">
         {{ form_start(search_form) }}
         <div>
             {{ form_row(search_form.search_query) }}
diff --git a/components/Tag/templates/actor_tag_feed.html.twig b/components/Tag/templates/actor_tag_feed.html.twig
index 54d001927f..599f339f09 100644
--- a/components/Tag/templates/actor_tag_feed.html.twig
+++ b/components/Tag/templates/actor_tag_feed.html.twig
@@ -23,7 +23,7 @@
         {% block profile_view %}{% include 'cards/profile/view.html.twig' %}{% endblock profile_view %}
     {% endfor %}
 
-    <div class="section-widget section-widget-padded">
+    <div class="section-widget section-padding">
         {{ "Page: " ~ page }}
     </div>
 {% endblock %}
diff --git a/plugins/AttachmentShowRelated/templates/attachmentShowRelated/attachmentRelatedNotes.html.twig b/plugins/AttachmentShowRelated/templates/attachmentShowRelated/attachmentRelatedNotes.html.twig
index 990966b20d..4147f1d77d 100644
--- a/plugins/AttachmentShowRelated/templates/attachmentShowRelated/attachmentRelatedNotes.html.twig
+++ b/plugins/AttachmentShowRelated/templates/attachmentShowRelated/attachmentRelatedNotes.html.twig
@@ -1,6 +1,6 @@
 {% import '/cards/note/view.html.twig' as noteView %}
 
-<section class="section-widget section-widget-padded">
+<section class="section-widget section-padding">
     <div class="section-title">
         {{ 'Notes related' | trans }}
     </div>
diff --git a/plugins/MediaFeed/MediaFeed.php b/plugins/MediaFeed/MediaFeed.php
index 0a5595609f..c06d8498eb 100644
--- a/plugins/MediaFeed/MediaFeed.php
+++ b/plugins/MediaFeed/MediaFeed.php
@@ -54,7 +54,7 @@ class MediaFeed extends Plugin
      *
      * @return bool hook value; true means continue processing, false means stop
      */
-    public function onBeforeFeed(Request $request, &$res): bool
+    public function onAddFeedActions(Request $request, &$res): bool
     {
         $isMediaActive = $request->get('filter-type') === 'media';
         // we need two urls: one with filter-type=media and without it.
diff --git a/plugins/MediaFeed/templates/mediaFeed/tabs.html.twig b/plugins/MediaFeed/templates/mediaFeed/tabs.html.twig
index f3ed230dce..ee339b0036 100644
--- a/plugins/MediaFeed/templates/mediaFeed/tabs.html.twig
+++ b/plugins/MediaFeed/templates/mediaFeed/tabs.html.twig
@@ -1,5 +1,2 @@
-<nav class=media-feed-tabs role=navigation>
-    <a {{ main.active ? 'class="active"' : '' }} href="{{ main.url }}">{% trans %}All{% endtrans %}</a>
-    <div tabindex="0" class=separator>&nbsp;</div>
-    <a {{ media.active ? 'class="active"' : '' }} href="{{ media.url }}">{% trans %}Media{% endtrans %}</a>
-</nav>
+<a {{ main.active ? 'class="active"' : '' }} href="{{ main.url }}">{{ icon('feed', 'icon icon-right') | raw }}</a>
+<a {{ media.active ? 'class="active"' : '' }} href="{{ media.url }}">{{ icon('media', 'icon icon-right') | raw }}</a>
\ No newline at end of file
diff --git a/plugins/Oomox/templates/oomox/root_override.css.twig b/plugins/Oomox/templates/oomox/root_override.css.twig
index 8291754447..a405920138 100644
--- a/plugins/Oomox/templates/oomox/root_override.css.twig
+++ b/plugins/Oomox/templates/oomox/root_override.css.twig
@@ -1,9 +1,9 @@
 :root {
-    --smaller: .6rem;
-    --default: 1rem;
-    --small: 1.3rem;
-    --medium: 1.62rem;
-    --big: 3rem;
+    --s: .6rem;
+    --unit: 1rem;
+    --m: 1.3rem;
+    --xl: 1.62rem;
+    --xxl: 3rem;
 }
 
 @media (prefers-color-scheme: dark) {
diff --git a/plugins/RelatedTags/templates/related_tags/actor_tags.html.twig b/plugins/RelatedTags/templates/related_tags/actor_tags.html.twig
index a02e1c2ca9..2aa5de125f 100644
--- a/plugins/RelatedTags/templates/related_tags/actor_tags.html.twig
+++ b/plugins/RelatedTags/templates/related_tags/actor_tags.html.twig
@@ -1,5 +1,5 @@
 {% if actor_tags is not empty %}
-<div class="section-widget section-widget-padded">
+<div class="section-widget section-padding">
   <h2>Related tags:</h2>
   {% for at in actor_tags %}
     {% include 'cards/tag/actor_tag.html.twig' with { 'tag': at, 'actor': null } %}
diff --git a/plugins/RelatedTags/templates/related_tags/note_tags.html.twig b/plugins/RelatedTags/templates/related_tags/note_tags.html.twig
index dcec83f917..ed3ed149cb 100644
--- a/plugins/RelatedTags/templates/related_tags/note_tags.html.twig
+++ b/plugins/RelatedTags/templates/related_tags/note_tags.html.twig
@@ -1,5 +1,5 @@
 {% if note_tags is not empty %}
-  <div class="section-widget section-widget-padded">
+  <div class="section-widget section-padding">
     <h2>Related tags:</h2>
 
     {% for nt in note_tags %}
diff --git a/plugins/TagBasedFiltering/templates/tag_based_filtering/add_blocked.html.twig b/plugins/TagBasedFiltering/templates/tag_based_filtering/add_blocked.html.twig
index 86b1810abb..2503990b8d 100644
--- a/plugins/TagBasedFiltering/templates/tag_based_filtering/add_blocked.html.twig
+++ b/plugins/TagBasedFiltering/templates/tag_based_filtering/add_blocked.html.twig
@@ -8,7 +8,7 @@
 
 {% block body %}
     {% if note is defined or actor is defined %}
-        <div class="section-widget-padded">
+        <div class="section-padding">
             {% if note is defined and note is not null %}
                 {{ noteView.macro_note(note, {}) }}
             {% elseif actor is defined and actor is not null  %}
diff --git a/public/assets/default_theme/css/base.css b/public/assets/default_theme/css/base.css
index bcdc2adb96..caedaed417 100644
--- a/public/assets/default_theme/css/base.css
+++ b/public/assets/default_theme/css/base.css
@@ -40,34 +40,33 @@
     left: -90%;
     width: 30%;
     height: min-content;
-    padding: var(--smaller);
-    border-radius: var(--smaller);
+    padding: var(--s);
+    border-radius: var(--s);
     background-color: var(--background-hard) !important;
     border: 2px solid var(--border);
 }
 .accessibility-menu ul {
     list-style-type: disc;
-    margin-left: var(--small);
+    margin-left: var(--m);
 }
 .accessibility-menu:focus-within:not(:active) {
-    top: var(--smaller);
-    left: var(--smaller);
+    top: var(--s);
+    left: var(--s);
 }
 html {
-    scroll-margin-top: var(--big);
+    scroll-margin-top: var(--xxl);
 }
 .page-header {
     z-index: 1;
     font-family: 'Poppins',sans-serif;
-    font-size: var(--medium);
-    height: var(--big);
+    height: var(--xxl);
     display: flex;
     justify-content: center;
     position: fixed;
     top: 0;
     align-self: center;
     align-items: center;
-    padding: var(--smaller);
+    padding: var(--s);
     background: var(--gradient) !important;
     box-shadow: var(--shadow);
 }
@@ -92,9 +91,8 @@ html {
     top: 100%;
     right: 0;
     width: 16.5vw;
-    font-size: var(--default);
-    border-radius: 0 0 var(--smaller) var(--smaller);
-    padding: var(--smaller);
+    border-radius: 0 0 var(--s) var(--s);
+    padding: var(--s);
     background: var(--background-hard);
     box-shadow: var(--shadow);
 }
@@ -102,12 +100,11 @@ html {
     display: flex;
     flex-direction: column;
     font-family: 'Open Sans',sans-serif;
-    font-size: var(--default);
     position: fixed;
     top: 0;
-    margin-top: var(--big);
-    height: calc(100% - var(--big));
-    padding: var(--smaller);
+    margin-top: var(--xxl);
+    height: calc(100% - var(--xxl));
+    padding: var(--s);
     overflow-y: auto;
 }
 .panel-content {
@@ -116,11 +113,11 @@ html {
 }
 .page-content-wrapper {
     position: relative;
-    top: var(--big);
+    top: var(--xxl);
     margin-left: auto;
     margin-right: auto;
     justify-content: center;
-    padding: var(--smaller) var(--smaller) 0;
+    padding: var(--s) var(--s) 0;
 }
 .page-content {
     display: flex;
@@ -128,8 +125,8 @@ html {
     width: 100%;
 }
 .markdown-blocks {
-    border-radius: 0 0 var(--smaller) var(--smaller);
-    padding: var(--smaller);
+    border-radius: 0 0 var(--s) var(--s);
+    padding: var(--s);
     background-color: var(--background-card) !important;
 }
 .markdown-blocks ul {
@@ -140,30 +137,14 @@ html {
     margin-bottom: 0.2em;
 }
 .doc-navigation {
-    border-radius: var(--smaller) var(--smaller) 0 0;
+    border-radius: var(--s) var(--s) 0 0;
     border-bottom: 0;
-    padding: var(--smaller);
+    padding: var(--s);
     background-color: var(--background-card) !important;
 }
 .doc-navigation ul {
     display: flex;
     justify-content: space-evenly;
-    font-size: var(--medium);
-}
-#replyform {
-    padding: var(--smaller);
-    margin-top: var(--smaller);
-    border-radius: var(--smaller);
-    display: flex;
-    flex-direction: column;
-    font-size: var(--default);
-    background-color: var(--background-card) !important;
-}
-#replyform textarea {
-    width: 100%;
-    resize: vertical;
-    margin-top: var(--smaller);
-    padding: var(--smaller);
 }
 @media only screen and (max-width:1280px) {
     .page-header {
@@ -268,17 +249,17 @@ html {
     @keyframes highlight {
         0% {
             box-shadow: initial;
-            border-radius: var(--smaller);
+            border-radius: var(--s);
         }
         50% {
-            border-radius: var(--smaller);
+            border-radius: var(--s);
             box-shadow: inset 0 20px 40px #FFF;
             transition: box-shadow 0.3s ease-in-out;
             z-index: 666;
         }
         100% {
             box-shadow: initial;
-            border-radius: var(--smaller);
+            border-radius: var(--s);
         }
     }
 }
@@ -286,16 +267,16 @@ html {
     @keyframes highlight {
         0% {
             box-shadow: initial;
-            border-radius: var(--smaller);
+            border-radius: var(--s);
         }
         50% {
-            border-radius: var(--smaller);
+            border-radius: var(--s);
             box-shadow: inset 0 20px 40px #000;
             transition: box-shadow 0.3s ease-in-out;
         }
         100% {
             box-shadow: initial;
-            border-radius: var(--smaller);
+            border-radius: var(--s);
         }
     }
 }
\ No newline at end of file
diff --git a/public/assets/default_theme/css/pages/feeds.css b/public/assets/default_theme/css/pages/feeds.css
index 4ec0165ebb..4cf135a0a5 100644
--- a/public/assets/default_theme/css/pages/feeds.css
+++ b/public/assets/default_theme/css/pages/feeds.css
@@ -1,13 +1,26 @@
+.feed-header {
+    display: flex;
+    margin-top: var(--m);
+}
+.feed-header .feed-actions {
+    margin-left: auto;
+}
+.feed-header .feed-actions a {
+    margin-left: var(--s);
+}
+.feed-header .feed-actions a:not(.active) {
+    opacity: 0.4;
+}
 .notes hr {
-    margin-top: var(--smaller);
+    margin-top: var(--s);
 }
 .note-wrapper {
     width: 100%;
     height: inherit;
-    border-radius: var(--smaller) var(--smaller) 0 0;
+    border-radius: var(--s) var(--s) 0 0;
 }
 .note-sidebar {
-    padding: var(--smaller);
+    padding: var(--s);
 }
 .note-sidebar * {
     display: flex;
@@ -19,15 +32,15 @@
 .note-sidebar .avatar {
     max-width: 4rem;
     max-height: 4rem;
-    min-width: var(--big);
+    min-width: var(--xxl);
     width: 100%;
     height: auto;
     background: unset;
-    margin-bottom: var(--smaller);
+    margin-bottom: var(--s);
     border-radius: 2px;
 }
 .h-entry:not(:first-child) {
-    margin-top: var(--smaller);
+    margin-top: var(--s);
 }
 .h-entry:not(embed) {
     border: 2px solid var(--border) !important;
@@ -39,17 +52,17 @@
 .embed {
     display: flex;
     flex-wrap: wrap;
-    padding: var(--smaller);
+    padding: var(--s);
     border: unset;
 }
 .embed header {
     width: 100%;
-    margin-bottom: var(--small);
+    margin-bottom: var(--m);
 }
 .embed img {
     width: 25%;
     height: auto;
-    margin-right: var(--smaller);
+    margin-right: var(--s);
 }
 .embed .p-summary {
     width: 60%;
@@ -64,8 +77,8 @@
     max-height: min-content;
 }
 .embed .p-summary hr {
-    margin-top: var(--smaller);
-    margin-bottom: var(--smaller);
+    margin-top: var(--s);
+    margin-bottom: var(--s);
 }
 .h-entry .embed[class*="p-"] {
     padding: unset;
@@ -75,41 +88,39 @@
 }
 .h-entry {
     display: flex;
-    border-radius: var(--smaller);
+    border-radius: var(--s);
     background-color: var(--background-card) !important;
 }
 .h-entry figure {
     margin: unset;
     object-fit: cover;
-    padding: var(--smaller);
+    padding: var(--s);
     background: var(--gradient);
-    border-radius: var(--smaller);
+    border-radius: var(--s);
 }
 .h-entry .replies {
-    margin-bottom: var(--small);
-    padding: var(--smaller) var(--smaller) 0 0;
-    padding-left: var(--small);
+    margin-bottom: var(--m);
+    padding: var(--s) var(--s) 0 0;
+    padding-left: var(--m);
     border-left: 2px solid var(--border);
 }
 .note-info,
 embed header {
     display: flex;
     align-items: center;
-    max-height: var(--big);
+    max-height: var(--xxl);
     border-bottom: unset;
-    border-radius: var(--smaller) var(--smaller) 0 0;
-    padding: 4px var(--smaller) 4px 0;
+    border-radius: var(--s) var(--s) 0 0;
+    padding: 4px var(--s) 4px 0;
 }
 .note-info {
     background: var(--gradient-backwards);
 }
 .note-url {
     opacity: 0.5;
-    font-size: 0.9em;
-    margin-left: var(--smaller);
+    margin-left: var(--s);
 }
 embed header {
-    font-size: var(--small);
     justify-content: space-between;
 }
 .note-author-url {
@@ -149,16 +160,15 @@ embed header {
     position: absolute;
     right: 0;
     flex-direction: column;
-    padding: var(--smaller);
+    padding: var(--s);
     border: 2px solid var(--border);
-    border-radius: var(--smaller);
+    border-radius: var(--s);
     background: var(--background-card);
     box-shadow: var(--shadow);
-    font-size: var(--default);
     width: max-content;
 }
 .note-actions-extra-details[open] > summary + * > li:not(:last-of-type) {
-    margin-bottom: var(--smaller);
+    margin-bottom: var(--s);
 }
 .note-actions-set {
     opacity: 1 !important;
@@ -168,9 +178,9 @@ embed header {
     mask-repeat: no-repeat !important;
     mask-size: cover !important;
     display: inline-block;
-    margin-left: var(--smaller);
-    width: var(--default);
-    height: var(--default);
+    margin-left: var(--s);
+    width: var(--unit);
+    height: var(--unit);
     background-color: var(--foreground);
     opacity: 0.33;
 }
@@ -209,13 +219,8 @@ embed header {
 .note-content {
     display: flex;
     flex-direction: column;
-    border-radius: 0 0 var(--smaller) var(--smaller);
-    padding-top: var(--smaller);
-    padding-bottom: var(--smaller);
-    padding-right: var(--smaller);
-}
-.note-text {
-    margin-bottom: var(--smaller);
+    border-radius: 0 0 var(--s) var(--s);
+    padding-right: var(--s);
 }
 .note-text a {
     text-decoration: underline !important;
@@ -228,28 +233,28 @@ embed header {
     display: flex;
     flex-wrap: wrap;
     max-width: max-content;
-    border-radius: var(--smaller);
-    padding: var(--smaller);
+    border-radius: var(--s);
+    padding: var(--s);
     align-self:flex-start;
     background-color: var(--background-card) !important;
 }
 .note-attachments-unit:not(:only-child) {
-    margin-right: var(--smaller);
+    margin-right: var(--s);
 }
 .note-attachments-unit > figure figcaption {
     display: flex;
     word-break: break-all;
-    margin-bottom: var(--smaller);
+    margin-bottom: var(--s);
 }
 .note-complementary {
     border-left: 2px solid var(--accent);
-    border-end-start-radius: var(--smaller);
-    border-end-end-radius: var(--smaller);
-    padding-left: var(--smaller);
+    border-end-start-radius: var(--s);
+    border-end-end-radius: var(--s);
+    padding-left: var(--s);
     padding-top: 5px;
     padding-bottom: 5px;
-    margin-bottom: var(--smaller);
-    margin-right: var(--smaller);
+    margin-bottom: var(--s);
+    margin-right: var(--s);
     background: var(--gradient) !important;
 }
 .note-complementary a {
@@ -260,7 +265,6 @@ embed header {
     float: right;
     padding: 6px 12px;
     background: var(--gradient-backwards);
-    font-size: var(--default);
     color: var(--foreground);
-    border-radius: 0 0 var(--smaller) 0;
+    border-radius: 0 0 var(--s) 0;
 }
\ No newline at end of file
diff --git a/public/assets/default_theme/css/pages/settings.css b/public/assets/default_theme/css/pages/settings.css
index de5b34fe28..79fa8950bb 100644
--- a/public/assets/default_theme/css/pages/settings.css
+++ b/public/assets/default_theme/css/pages/settings.css
@@ -1,27 +1,32 @@
 .section-settings {
+    background: var(--background-card);
     border: 2px solid var(--border);
     box-shadow: var(--shadow);
 }
 
 .section-settings,
-.section-title-settings {
-    background: var(--background-card);
+.section-settings-details {
     margin-bottom: .6rem;
     border-radius: .6rem;
     padding: .6rem;
     box-sizing: border-box;
 }
-
-.section-title-settings[open] {
+.section-settings-details {
+    border: 2px solid var(--border);
+}
+.section-settings-details-title {
+    display: block;
+}
+.section-settings-details[open] {
     border-left: 2px solid var(--foreground);
 }
 
-.section-title-settings[open] > summary:first-child {
-    margin-bottom: var(--smaller);
+.section-settings-details[open] > summary:first-child {
+    margin-bottom: var(--s);
 }
 
-.section-title-settings summary + form {
-    padding-left: var(--smaller);
+.section-settings-details summary + form {
+    padding-left: var(--s);
 }
 
 .section-settings hr {
@@ -29,24 +34,24 @@
     margin-bottom: .6rem;
 }
 
-.section-title-settings summary h3:first-letter ,.section-title-settings summary em:first-letter {
+.section-settings-details summary h3:first-letter ,.section-settings-details summary em:first-letter {
     text-transform: uppercase;
 }
 
-.section-title-settings summary:focus .icon-details-open,.section-title-settings summary:hover .icon-details-open {
+.section-settings-details summary:focus .icon-details-open,.section-settings-details summary:hover .icon-details-open {
     transition: all 200ms cubic-bezier(0,0.55,0.45,1);
 }
 
-.section-title-settings[open] svg {
+.section-settings-details[open] svg {
     transform: rotate(180deg);
     animation: fadeOut 200ms cubic-bezier(0,0.55,0.45,1);
 }
 
-.section-title-settings[open] .set-nav li:last-of-type {
+.section-settings-details[open] .set-nav li:last-of-type {
     margin-bottom: 0;
 }
 
-.section-title-settings:not([open]) svg {
+.section-settings-details:not([open]) svg {
     transform: initial;
     animation: fadeIn 200ms cubic-bezier(0,0.55,0.45,1);
 }
\ No newline at end of file
diff --git a/public/assets/default_theme/css/reset.css b/public/assets/default_theme/css/reset.css
index 5f0cbd27cf..86257ad34a 100644
--- a/public/assets/default_theme/css/reset.css
+++ b/public/assets/default_theme/css/reset.css
@@ -9,7 +9,7 @@ html {
     background-color: var(--background-hard);
     background-attachment: fixed;
     font-family: 'Open Sans',sans-serif;
-    font-size: var(--default);
+    font-size: var(--unit);
     display: flex;
     flex-direction: column;
 }
@@ -84,54 +84,53 @@ details > summary::-webkit-details-marker {
 [hidden] {
     display: none;
 }
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-    all: unset;
-    display: block;
-    font-family: 'Poppins',sans-serif;
-}
-h1 {
-    font-size: var(--medium);
-    font-weight: 700;
-    margin-bottom: 16.2px;
-}
-h2 {
-    font-size: var(--small);
-    font-weight: 600;
-    margin-bottom: 13px;
-}
-h3 {
-    font-size: var(--default);
-    font-weight: 600;
-    margin-bottom: 10px;
-}
-h4,
-h5 {
-    font-size: var(--default);
+
+html {font-size: 100%;} /*16px*/
+
+body {
+    font-family: 'Open Sans', sans-serif;
     font-weight: 400;
-    margin-bottom: 6.1px;
+    line-height: 1.75;
 }
+
 p {
+    all: unset;
     font-family: 'Open Sans',sans-serif;
-    font-size: var(--default);
-    font-weight: 400;
-    margin: unset;
+    margin-bottom: 1rem;
 }
-p:first-line {
-    padding-left: var(--default);
+
+h1, h2, h3, h4, h5, legend {
+    margin: 3rem 0 1.38rem;
+    font-family: 'Poppins', sans-serif;
+    font-weight: 600;
+    line-height: 1.3;
 }
-p:first-line {
+h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, legend:first-child {
+    margin-top: initial;
+}
+
+h1 {
     margin-top: 0;
-    margin-bottom: 10px;
+    font-size: 1.383rem;
 }
-p:not(:first-line) {
-    margin-top: 10px;
-    margin-bottom: 10px;
+
+h2 {font-size: 1.296rem;}
+
+h3 {font-size: 1.215rem;}
+
+h4 {font-size: 1.138rem;}
+
+h5 {font-size: 1.067rem;}
+
+legend {
+    font-size: 1.296em;
 }
+
+small, .text_small {
+    font-family: 'Open Sans',sans-serif;
+    font-size: 0.937rem;
+}
+
 input[type=password],
 input[type=text],
 textarea {
diff --git a/public/assets/default_theme/css/root.css b/public/assets/default_theme/css/root.css
index aa4ae23808..34446a0b09 100644
--- a/public/assets/default_theme/css/root.css
+++ b/public/assets/default_theme/css/root.css
@@ -1,9 +1,9 @@
 :root {
-    --smaller: .6rem;
-    --default: 1rem;
-    --small: 1.3rem;
-    --medium: 1.62rem;
-    --big: 3rem;
+    --s: .6rem;
+    --unit: 1rem;
+    --m: 1.3rem;
+    --xl: 1.62rem;
+    --xxl: 3rem;
 }
 
 @media(prefers-color-scheme:dark) {
diff --git a/public/assets/default_theme/css/widgets/buttons.css b/public/assets/default_theme/css/widgets/buttons.css
index 22a8d97d7f..082adda833 100644
--- a/public/assets/default_theme/css/widgets/buttons.css
+++ b/public/assets/default_theme/css/widgets/buttons.css
@@ -31,7 +31,7 @@ input[type=file] {
     font-family: 'Open Sans',sans-serif !important;
     font-weight: normal !important;
     padding: unset !important;
-    border-radius: var(--smaller);
+    border-radius: var(--s);
     background: var(--gradient) !important;
 }
 input[type=radio] {
@@ -53,18 +53,18 @@ input[type=checkbox]:checked {
 }
 input[type=color] {
     appearance: none;
-    width: var(--big);
-    height: var(--big);
+    width: var(--xxl);
+    height: var(--xxl);
     background-color: transparent;
     border: none;
     cursor: pointer;
 }
 input[type=color]::-webkit-color-swatch {
-    border-radius: var(--smaller);
+    border-radius: var(--s);
     border: none;
 }
 input[type=color]::-moz-color-swatch {
-    border-radius: var(--smaller);
+    border-radius: var(--s);
     border: none;
 }
 ::file-selector-button {
@@ -84,7 +84,7 @@ button {
     display: block !important;
     cursor: pointer !important;
     margin-left: auto !important;
-    margin-top: var(--smaller);
+    margin-top: var(--s);
 }
 button,
 label {
@@ -105,12 +105,19 @@ textarea {
     display: inline-flex;
     overflow: hidden;
     font-size: inherit;
+    line-height: initial !important;
     padding: 6px 8px !important;
-    border-radius: var(--smaller);
+    border-radius: var(--s);
     border: 2px solid var(--border) !important;
     width: inherit;
     max-width: border-box !important;
 }
+button:not(:last-child),
+input:not(:last-child),
+select:not(:last-child),
+textarea:not(:last-child) {
+    margin-bottom: var(--s);
+}
 button,
 select,
 textarea {
@@ -125,7 +132,7 @@ select {
     -moz-appearance: none !important;
     cursor: pointer;
     background-repeat: no-repeat;
-    border-radius: var(--smaller);
+    border-radius: var(--s);
     max-width: 100% !important;
 }
 select[multiple] {
diff --git a/public/assets/default_theme/css/widgets/sections.css b/public/assets/default_theme/css/widgets/sections.css
index 55bf00a224..f3726e165d 100644
--- a/public/assets/default_theme/css/widgets/sections.css
+++ b/public/assets/default_theme/css/widgets/sections.css
@@ -3,9 +3,9 @@
     flex-direction: column;
     flex-wrap: wrap;
     font-family: 'Open Sans',sans-serif;
-    margin-bottom: var(--smaller);
-    border-radius: var(--smaller);
-    padding: var(--smaller);
+    margin-bottom: var(--s);
+    border-radius: var(--s);
+    padding: var(--s);
     background: var(--gradient) !important;
     box-shadow: var(--shadow);
 }
@@ -18,7 +18,7 @@
     flex-direction: column;
 }
 .profile-info-nickname {
-    font-size: var(--small);
+    font-size: var(--m);
 }
 .profile-info-tags {
     margin: unset;
@@ -27,15 +27,16 @@
     margin-right: 5px;
 }
 .profile-info-stats {
-    margin-top: var(--smaller);
+    margin-top: var(--s);
 }
-.profile-info-bio {
+.profile-info-bio,
+.profile-info-nickname {
     word-break: break-all;
 }
 .profile-avatar {
     max-width: 4rem;
     max-height: 4rem;
-    min-width: var(--big);
+    min-width: var(--xxl);
     width: 100%;
     height: auto;
     margin-right: 5px;
@@ -44,30 +45,28 @@
 .section-widget {
     display: flex;
     flex-direction: column;
-    border-radius: var(--smaller);
-    margin-bottom: var(--small);
+    border-radius: var(--s);
+    margin-bottom: var(--m);
     background-color: var(--background-card) !important;
     box-shadow: var(--shadow);
     border: 2px solid var(--border) !important;
 }
 .section-widget hr {
-    margin-bottom: var(--smaller);
+    margin-bottom: var(--s);
 }
-.section-widget-padded {
-    padding: var(--smaller);
+.section-padding {
+    padding: var(--s);
 }
 .section-widget-paging {
     display: block;
-    margin-top: var(--smaller);
+    margin-top: var(--s);
     margin-left: auto;
 }
-.section-title {
-    font-size: var(--small);
-    font-weight: 700;
-    margin: 0;
+.section-widget-title {
+    margin-left: unset;
 }
 .section-widget-button-like {
-    border-radius: var(--smaller);
+    border-radius: var(--s);
     padding: 6px 10px;
     margin-top: 6px;
     cursor: pointer;
@@ -76,24 +75,22 @@
     font-family: 'Open Sans',sans-serif;
     font-weight: 700;
 }
-.section-widget-subtitle-details :not(summary,svg,h3) {
-    border-radius: var(--smaller);
+.section-widget-subtitle-details :not(summary,svg,strong) {
+    border-radius: var(--s);
     background: var(--gradient);
     padding: 6px 10px;
 }
 .section-widget-title-details summary {
-    font-size: var(--small);
     font-weight: 700;
 }
 .section-widget-subtitle-details summary {
     border: 2px solid var(--border);
-    font-size: var(--default);
-    font-weight: 700;
-    margin-bottom: var(--smaller);
+    margin-bottom: var(--s);
 }
 .section-widget-title-details summary,
 .section-widget-subtitle-details summary {
-    border-radius: var(--smaller);
+    align-items: center;
+    border-radius: var(--s);
     padding: 6px 10px;
     background: var(--gradient) !important;
 }
@@ -111,10 +108,14 @@
 .section-title-summary {
     display: flex;
 }
-.section-subtitle-summary h3,
+.section-subtitle-summary strong,
 .section-title-summary h2 {
     margin-right: auto;
 }
+.section-subtitle-summary a,
+.section-title-summary a {
+    line-height: initial;
+}
 .section-subtitle-summary svg:last-child,
 .section-title-summary svg:last-child {
     margin-left: 4px;
@@ -124,19 +125,18 @@
     flex-direction: column;
     max-width: 100%;
     width: 100%;
-    padding: var(--smaller);
+    padding: var(--s);
 }
 .section-form-legend {
     margin-top: unset;
-    margin-bottom: 10px;
+    margin-bottom: var(--s);
     font-weight: bold;
-    font-size: var(--medium);
 }
 div[class^="mb-"] {
     display: flex;
     flex-direction: column;
     flex-basis: border-box;
-    margin-bottom: var(--smaller);
+    margin-bottom: var(--s);
 }
 div[class^="mb-"]:last-of-type {
     margin-bottom: unset;
@@ -149,10 +149,9 @@ div[class^="mb-"] textarea {
 .alert-danger {
     display: inline-block;
     font-style: italic;
-    font-size: 1rem;
     border: solid 2px #ff6347;
     background-color: #FF634733;
-    border-radius: var(--smaller);
+    border-radius: var(--s);
     padding: 2px 6px;
     margin-top: 6px;
     margin-bottom: 6px;
diff --git a/public/assets/icons/chevron-left.svg.twig b/public/assets/icons/chevron-left.svg.twig
new file mode 100644
index 0000000000..8d9a3c8f9e
--- /dev/null
+++ b/public/assets/icons/chevron-left.svg.twig
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg
+        class="{{ iconClass|default('') }}"
+        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+    <title>Open right sidepanel</title>
+    <path fill-rule="evenodd" d="M9.78 12.78a.75.75 0 01-1.06 0L4.47 8.53a.75.75 0 010-1.06l4.25-4.25a.75.75 0 011.06 1.06L6.06 8l3.72 3.72a.75.75 0 010 1.06z"></path>
+</svg>
diff --git a/public/assets/icons/feed.svg.twig b/public/assets/icons/feed.svg.twig
new file mode 100644
index 0000000000..566666f100
--- /dev/null
+++ b/public/assets/icons/feed.svg.twig
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- https://github.com/primer/octicons -->
+<!-- MIT License -->
+<svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="{{ iconClass|default('') }}"
+        viewBox="0 0 16 16"
+        width="16"
+        height="16">
+  <title>Default feed</title>
+  <path fill-rule="evenodd" d="M1.75 1A1.75 1.75 0 000 2.75v9.5C0 13.216.784 14 1.75 14H3v1.543a1.457 1.457 0 002.487 1.03L8.061 14h6.189A1.75 1.75 0 0016 12.25v-9.5A1.75 1.75 0 0014.25 1H1.75zM1.5 2.75a.25.25 0 01.25-.25h12.5a.25.25 0 01.25.25v9.5a.25.25 0 01-.25.25h-6.5a.75.75 0 00-.53.22L4.5 15.44v-2.19a.75.75 0 00-.75-.75h-2a.25.25 0 01-.25-.25v-9.5z"></path>
+  <path d="M22.5 8.75a.25.25 0 00-.25-.25h-3.5a.75.75 0 010-1.5h3.5c.966 0 1.75.784 1.75 1.75v9.5A1.75 1.75 0 0122.25 20H21v1.543a1.457 1.457 0 01-2.487 1.03L15.939 20H10.75A1.75 1.75 0 019 18.25v-1.465a.75.75 0 011.5 0v1.465c0 .138.112.25.25.25h5.5a.75.75 0 01.53.22l2.72 2.72v-2.19a.75.75 0 01.75-.75h2a.25.25 0 00.25-.25v-9.5z"></path>
+</svg>
\ No newline at end of file
diff --git a/public/assets/icons/media.svg.twig b/public/assets/icons/media.svg.twig
new file mode 100644
index 0000000000..92fd773bab
--- /dev/null
+++ b/public/assets/icons/media.svg.twig
@@ -0,0 +1,8 @@
+<svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="{{ iconClass|default('') }}"
+        viewBox="0 0 16 16"
+        width="16" height="16">
+    <path fill-rule="evenodd" d="M1.75 2.5a.25.25 0 00-.25.25v10.5c0 .138.112.25.25.25h.94a.76.76 0 01.03-.03l6.077-6.078a1.75 1.75 0 012.412-.06L14.5 10.31V2.75a.25.25 0 00-.25-.25H1.75zm12.5 11H4.81l5.048-5.047a.25.25 0 01.344-.009l4.298 3.889v.917a.25.25 0 01-.25.25zm1.75-.25V2.75A1.75 1.75 0 0014.25 1H1.75A1.75 1.75 0 000 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0016 13.25zM5.5 6a.5.5 0 11-1 0 .5.5 0 011 0zM7 6a2 2 0 11-4 0 2 2 0 014 0z"></path>
+</svg>
+
diff --git a/public/assets/icons/menu.svg.twig b/public/assets/icons/menu.svg.twig
index b48b032c8e..34688b84f6 100644
--- a/public/assets/icons/menu.svg.twig
+++ b/public/assets/icons/menu.svg.twig
@@ -1,58 +1,13 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <!-- https://github.com/primer/octicons -->
-
 <!-- MIT License -->
 
 <svg
-   class="{{ iconClass|default('') }}"
-   viewBox="0 0 16 16"
-   width="16"
-   height="16"
-   version="1.1"
-   id="svg6"
-   sodipodi:docname="menu.svg"
-   inkscape:version="1.1 (c4e8f9ed74, 2021-05-24)"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:dc="http://purl.org/dc/elements/1.1/">
-  <defs
-     id="defs10" />
-  <sodipodi:namedview
-     id="namedview8"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageshadow="2"
-     inkscape:pageopacity="0.0"
-     inkscape:pagecheckerboard="0"
-     showgrid="false"
-     inkscape:zoom="12.150261"
-     inkscape:cx="15.637524"
-     inkscape:cy="21.563323"
-     inkscape:window-width="1920"
-     inkscape:window-height="1016"
-     inkscape:window-x="0"
-     inkscape:window-y="36"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg6" />
-  <title
-     id="title2">Open left sidepanel.</title>
-  <path
-     fill-rule="evenodd"
-     d="M 0.9999891,2.9999916 A 0.75000111,0.75000111 0 0 1 1.7499903,2.2499909 H 14.25001 a 0.75000111,0.75000111 0 1 1 0,1.5000021 H 1.7499903 A 0.75000111,0.75000111 0 0 1 0.9999891,2.9999916 Z m 0,5.0000076 A 0.75000111,0.75000111 0 0 1 1.7499903,7.2499981 H 14.25001 a 0.7500013,0.7500013 0 1 1 0,1.5000024 H 1.7499903 A 0.75000111,0.75000111 0 0 1 0.9999891,7.9999992 Z m 0.7500012,4.2500058 a 0.75000231,0.75000231 0 1 0 0,1.500004 H 14.25001 a 0.75000231,0.75000231 0 1 0 0,-1.500004 z"
-     id="path4"
-     style="stroke-width:1" />
-  <metadata
-     id="metadata12">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:title>Open left sidepanel.</dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
+        xmlns="http://www.w3.org/2000/svg"
+        class="{{ iconClass|default('') }}"
+        viewBox="0 0 16 16"
+        width="16"
+        height="16">
+  <title>Open left sidepanel</title>
+  <path d="m0.99999 3a0.75 0.75 0 0 1 0.75-0.75h12.5a0.75 0.75 0 1 1 0 1.5h-12.5a0.75 0.75 0 0 1-0.75-0.75zm0 5a0.75 0.75 0 0 1 0.75-0.75h12.5a0.75 0.75 0 1 1 0 1.5h-12.5a0.75 0.75 0 0 1-0.75-0.75zm0.75 4.25a0.75 0.75 0 1 0 0 1.5h12.5a0.75 0.75 0 1 0 0-1.5z" fill-rule="evenodd"/>
 </svg>
diff --git a/public/assets/icons/notes.svg.twig b/public/assets/icons/notes.svg.twig
deleted file mode 100644
index 62abda80fb..0000000000
--- a/public/assets/icons/notes.svg.twig
+++ /dev/null
@@ -1,68 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- https://github.com/primer/octicons -->
-
-<!-- MIT License -->
-
-<svg
-   class="{{ iconClass|default('') }}"
-   viewBox="0 0 16 16"
-   width="16"
-   height="16"
-   version="1.1"
-   id="svg8"
-   sodipodi:docname="notes.svg"
-   inkscape:version="1.1 (c4e8f9ed74, 2021-05-24)"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:dc="http://purl.org/dc/elements/1.1/">
-  <defs
-     id="defs12" />
-  <sodipodi:namedview
-     id="namedview10"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageshadow="2"
-     inkscape:pageopacity="0.0"
-     inkscape:pagecheckerboard="0"
-     showgrid="false"
-     inkscape:zoom="6.6503072"
-     inkscape:cx="2.2555349"
-     inkscape:cy="27.818264"
-     inkscape:window-width="1920"
-     inkscape:window-height="1016"
-     inkscape:window-x="0"
-     inkscape:window-y="36"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg8" />
-  <title
-     id="title2">
-        Create a note
-    </title>
-  <g
-     id="g20"
-     transform="matrix(0.66666667,0,0,0.66666667,-4e-8,1.6962954e-4)">
-    <path
-       fill-rule="evenodd"
-       d="M 1.75,1 A 1.75,1.75 0 0 0 0,2.75 v 9.5 C 0,13.216 0.784,14 1.75,14 H 3 v 1.543 a 1.457,1.457 0 0 0 2.487,1.03 L 8.061,14 H 14.25 A 1.75,1.75 0 0 0 16,12.25 V 2.75 A 1.75,1.75 0 0 0 14.25,1 Z M 1.5,2.75 A 0.25,0.25 0 0 1 1.75,2.5 h 12.5 a 0.25,0.25 0 0 1 0.25,0.25 v 9.5 A 0.25,0.25 0 0 1 14.25,12.5 H 7.75 A 0.75,0.75 0 0 0 7.22,12.72 L 4.5,15.44 V 13.25 A 0.75,0.75 0 0 0 3.75,12.5 h -2 A 0.25,0.25 0 0 1 1.5,12.25 Z"
-       id="path4" />
-    <path
-       d="M 22.5,8.75 A 0.25,0.25 0 0 0 22.25,8.5 h -3.5 a 0.75,0.75 0 0 1 0,-1.5 h 3.5 C 23.216,7 24,7.784 24,8.75 v 9.5 A 1.75,1.75 0 0 1 22.25,20 H 21 v 1.543 a 1.457,1.457 0 0 1 -2.487,1.03 L 15.939,20 H 10.75 A 1.75,1.75 0 0 1 9,18.25 v -1.465 a 0.75,0.75 0 0 1 1.5,0 v 1.465 c 0,0.138 0.112,0.25 0.25,0.25 h 5.5 a 0.75,0.75 0 0 1 0.53,0.22 l 2.72,2.72 v -2.19 a 0.75,0.75 0 0 1 0.75,-0.75 h 2 a 0.25,0.25 0 0 0 0.25,-0.25 z"
-       id="path6" />
-  </g>
-  <metadata
-     id="metadata16">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:title>
-        Create a note
-    </dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-</svg>
diff --git a/public/components/Left/assets/css/view.css b/public/components/Left/assets/css/view.css
index a83719bbe0..ff575e07ec 100644
--- a/public/components/Left/assets/css/view.css
+++ b/public/components/Left/assets/css/view.css
@@ -23,7 +23,7 @@
 
 /* FEED NAVIGATION / PLUGINS */
 .feed-nav {
-    margin-bottom: var(--medium);
+    margin-bottom: var(--xl);
 }
 
 .feed-nav a {
@@ -50,7 +50,7 @@
 
 .footer {
     margin-top: auto;
-    font-size: var(--default);
+    font-size: var(--unit);
 }
 
 /* > 720p */
diff --git a/public/components/Right/assets/css/view.css b/public/components/Right/assets/css/view.css
index f23ffb0d78..084b04f2bd 100644
--- a/public/components/Right/assets/css/view.css
+++ b/public/components/Right/assets/css/view.css
@@ -11,7 +11,7 @@
 }
 
 .panel-right-icon {
-    margin-left: var(--small) !important;
+    margin-left: var(--m) !important;
     cursor: pointer !important;
     border: 2px solid transparent;
 }
diff --git a/public/plugins/MediaFeed/assets/css/mediaFeed.css b/public/plugins/MediaFeed/assets/css/mediaFeed.css
index d8df165dfe..5ca858bd06 100644
--- a/public/plugins/MediaFeed/assets/css/mediaFeed.css
+++ b/public/plugins/MediaFeed/assets/css/mediaFeed.css
@@ -1,6 +1,6 @@
 .media-feed-tabs {
   border: 2px solid var(--border);
-  border-radius: var(--smaller) var(--smaller) 0 0;
+  border-radius: var(--s) var(--s) 0 0;
   border-bottom: none;
   display: flex;
 }
diff --git a/templates/cards/attachments/show.html.twig b/templates/cards/attachments/show.html.twig
index ac36bade0b..1626c90735 100644
--- a/templates/cards/attachments/show.html.twig
+++ b/templates/cards/attachments/show.html.twig
@@ -2,7 +2,7 @@
 
 {% block body %}
     <div class="page">
-        <section class="section-widget section-widget-padded">
+        <section class="section-widget section-padding">
 
             {% include '/cards/attachments/view.html.twig' with {'attachment': attachment, 'note': null} only %}
 
diff --git a/templates/cards/navigation/view.html.twig b/templates/cards/navigation/view.html.twig
index a87d281e30..08d9ab17d3 100644
--- a/templates/cards/navigation/view.html.twig
+++ b/templates/cards/navigation/view.html.twig
@@ -11,7 +11,7 @@
         {{ icon('arrow-down', 'icon icon-details-open') | raw }}
       </summary>
 
-      <nav class='section-widget-padded' tabindex="0" title="{{ 'Navigate through each feed.' | trans }}">
+      <nav class='section-padding' tabindex="0" title="{{ 'Navigate through each feed.' | trans }}">
         {% if not app.user %} {# Default feeds #}
           <ul>
             <li>
@@ -55,7 +55,7 @@
 {% endblock profile_current_actor %}
 
 {% block profile_security %}
-    <section class='section-widget section-widget-padded' title="{{ 'Your profile information.' | trans }}">
+    <section class='section-widget section-padding' title="{{ 'Your profile information.' | trans }}">
         <h2 class="section-title">Account</h2>
         <nav tabindex="0" class="profile-navigation" title="{{ 'Navigate through account related pages.' | trans }}">
 
diff --git a/templates/cards/profile/view.html.twig b/templates/cards/profile/view.html.twig
index 1f1d417afb..3d5f6794bd 100644
--- a/templates/cards/profile/view.html.twig
+++ b/templates/cards/profile/view.html.twig
@@ -14,9 +14,9 @@
 
                 <section class="profile-info-bio">
                     {% if actor_bio %}
-                        <p>{{ actor_bio }}</p>
+                        <span>{{ actor_bio }}</span>
                     {% else %}
-                        <p>{{ '(No bio)' | trans }}</p>
+                        <span>{{ '(No bio)' | trans }}</span>
                     {% endif %}
                 </section>
             </div>
diff --git a/templates/settings/base.html.twig b/templates/settings/base.html.twig
index 9b4eafb179..10a9791a3a 100644
--- a/templates/settings/base.html.twig
+++ b/templates/settings/base.html.twig
@@ -11,20 +11,18 @@
 {% endblock stylesheets %}
 
 {% block body %}
-    <nav class='section-settings'>
-        <h2>Settings</h2>
+    <nav class='section-widget section-padding'>
+        <h2 class="section-widget-title">Settings</h2>
         <ul>
             <li>
                 {% set profile_tabs = [{'title': 'Personal Info', 'desc': 'Nickname, Homepage, Bio and more.', 'id': 'settings-personal-info', 'form': personal_info_form}] %}
                 {% set profile_tabs = profile_tabs|merge(handle_event('PopulateSettingsTabs', app.request, 'profile')) %}
                 {{ macros.settings_details_container('Profile', 'Personal Information, Avatar and Profile', 'settings-profile-details', profile_tabs, _context) }}
             </li>
-            <hr>
             <li>
                 {% set muting_tabs = handle_event('PopulateSettingsTabs', app.request, 'muting') %}
                 {{ macros.settings_details_container('Muting', 'Blocked tags and actors', 'settings-muting-details', muting_tabs, _context) }}
             </li>
-            <hr>
             <li>
                 {{ macros.settings_details_element('Email', 'Set incoming and outgoing email settings', 'settings-email-details', email_form, _context) }}
             </li>
@@ -34,12 +32,10 @@
             <li>
                 {{ macros.settings_details_element('Language', 'Select and set language preferences', 'settings-language-details', language_form, _context) }}
             </li>
-            <hr>
             <li>
                 {% set colour_tabs = handle_event('PopulateSettingsTabs', app.request, 'colours') %}
                 {{ macros.settings_details_container('Colours', 'Customize your interface colours', 'settings-colour-details', colour_tabs, _context) }}
             </li>
-            <hr>
             <li>
                 {{ macros.settings_details_container('Notifications', 'Enable/disable notifications (Email, XMPP, Replies...)', 'notifications', tabbed_forms_notify, _context) }}
             </li>
diff --git a/templates/settings/macros.html.twig b/templates/settings/macros.html.twig
index de0fd56f4d..98ae54acca 100644
--- a/templates/settings/macros.html.twig
+++ b/templates/settings/macros.html.twig
@@ -2,12 +2,12 @@
     {% if details_ids is null %}
         {% set details_ids = [id] %}
     {% endif %}
-    <details class="section-title-settings" {{ open_details(context.open_details_query, details_ids) }} id={{ id }}>
+    <details class="section-settings-details" {{ open_details(context.open_details_query, details_ids) }} id={{ id }}>
         <summary>
-            <h3>
+            <strong class="section-settings-details-title">
                 {{ title | trans }}
                 {{ icon('arrow-down', 'icon icon-details-open') | raw }}
-            </h3>
+            </strong>
             <em>
                 {{ summary | trans }}
             </em>