diff --git a/public/assets/css/base.css b/public/assets/css/base.css
index 19e2cded82..fb7d7adbbc 100644
--- a/public/assets/css/base.css
+++ b/public/assets/css/base.css
@@ -260,6 +260,7 @@ hr {
 .h-entry {
     margin-top: var(--unit-size);
 }
+
 .notes hr {
     margin-top: 5px;
 }
@@ -270,14 +271,39 @@ hr {
 .h-entry .embed header {
     padding: var(--unit-size);
 }
+
 .h-entry .embed .p-summary {
     padding: var(--unit-size);
 }
+
 .h-entry,
 .note {
+    display: flex;
     background-color: var(--translucent);
     border-radius: var(--unit-size);
 }
+.note-wrapper {
+    width: 100%;
+    height: available;
+}
+
+.note-sidebar {
+    padding: var(--unit-size);
+}
+.note-sidebar * {
+    display: flex;
+    flex-direction: column;
+    margin-left: auto;
+    margin-right: auto;
+    max-height: 100%;
+}
+
+.note-sidebar .avatar {
+    width: 3rem;
+    height: 3rem;
+    background: unset;
+    margin-bottom: var(--unit-size);
+}
 
 .h-entry .replies .h-entry {
     background-color: unset;
@@ -308,18 +334,9 @@ hr {
     align-self: center;
 }
 
-.note-author .avatar {
-    width: auto;
-    height: var(--main-size);
-    border-radius: var(--unit-size);
-    margin-right: 5px;
-}
-
 .note-actions {
     display: flex;
     vertical-align: middle;
-    height: 100%;
-    max-height: 100%;
 }
 
 .button-container {
@@ -328,10 +345,10 @@ hr {
 
     background-repeat: no-repeat !important;
 
-    width: 1em !important;
-    height: 1em !important;
+    width: var(--main-size) !important;
+    height: var(--main-size) !important;
 
-    margin-left: 5px;
+    margin-top: var(--unit-size);
     text-indent: -9999em;
 }
 
@@ -373,6 +390,7 @@ hr {
     border-top: unset;
     border-radius: 0 0 var(--unit-size) var(--unit-size);
 
+    height: max-content;
     padding: var(--small-size);
 }
 
diff --git a/templates/note/view.html.twig b/templates/note/view.html.twig
index b768f21ea7..f0acde2bd4 100644
--- a/templates/note/view.html.twig
+++ b/templates/note/view.html.twig
@@ -1,24 +1,13 @@
 <article class="h-entry hentry note">
     {% set nickname = note.getActorNickname() %}
-    <header tabindex="0" title="{{ 'Begin a note by the user: ' | trans }} {{ nickname }}." class="note-info">
-
-        {# TODO: this should link to the note's user profile? #}
-        <strong class="note-author u-url">
-            {# Microformat's h-card properties indicates a face icon is a "u-logo" #}
-            <img class="u-logo avatar" src="{{ note.getAvatarUrl() }}" alt="{{ nickname }}'s avatar" width="32px" height="32px">
-            {{ nickname }}
-        </strong>
-
-        {% set reply_to = note.getReplyToNickname() %}
-        {% if reply_to is not null and not skip_reply_to is defined %}
-            {% trans with {'%name%': reply_to} %} in reply to %name% {% endtrans %}
-        {% endif %}
 
+    <aside class="note-sidebar">
+        <img class="u-logo avatar" src="{{ note.getAvatarUrl() }}" alt="{{ nickname }}'s avatar" width="32px" height="32px">
         {% if app.user %}
-        <div class="note-actions">
-            {% if have_user %}
-                {% for current_action in get_note_actions(note) %}
-                    {{ form_start(current_action) }}
+            <div class="note-actions">
+                {% if have_user %}
+                    {% for current_action in get_note_actions(note) %}
+                        {{ form_start(current_action) }}
                         {% if current_action.submit_favourite is defined %}
                             {{ form_widget(current_action.submit_favourite) }}
                         {% endif %}
@@ -28,47 +17,64 @@
                         {% if current_action.reply is defined %}
                             {{ form_widget(current_action.reply) }}
                         {% endif %}
-                    {{ form_end(current_action) }}
-                {% endfor %}
+                        {{ form_end(current_action) }}
+                    {% endfor %}
+                {% endif %}
+            </div>
+        {% endif %}
+    </aside>
+
+    <div class="note-wrapper">
+
+        {# TODO: this should link to the note's user profile? #}
+        <div tabindex="0" title="{{ 'Begin a note by the user: ' | trans }} {{ nickname }}." class="note-info">
+            <strong class="note-author u-url">
+                {# Microformat's h-card properties indicates a face icon is a "u-logo" #}
+                {{ nickname }}
+            </strong>
+
+            {% set reply_to = note.getReplyToNickname() %}
+            {% if reply_to is not null and not skip_reply_to is defined %}
+                {% trans with {'%name%': reply_to} %} in reply to %name% {% endtrans %}
             {% endif %}
         </div>
-        {% endif %}
-    </header>
-    <section tabindex="0" role="dialog" class="e-content entry-content note-content">
 
-        <div class="note-text" tabindex="0" title="{{ 'Note text content.' | trans }}">
-        {{ note.getRendered() | raw }}
-        </div>
+        <section tabindex="0" role="dialog" class="e-content entry-content note-content">
 
-        {% if hide_attachments is not defined %}
-        <div class="note-attachments" tabindex="0" title="{{ 'Note attachments.' | trans }}">
-        {% for attachment in note.getAttachments() %}
-            {% include '/attachments/view.html.twig' with {'attachment': attachment, 'note': note} only%}
-        {% endfor %}
-        </div>
+            <div class="note-text" tabindex="0" title="{{ 'Note text content.' | trans }}">
+                {{ note.getRendered() | raw }}
+            </div>
+
+            {% if hide_attachments is not defined %}
+                <div class="note-attachments" tabindex="0" title="{{ 'Note attachments.' | trans }}">
+                    {% for attachment in note.getAttachments() %}
+                        {% include '/attachments/view.html.twig' with {'attachment': attachment, 'note': note} only%}
+                    {% endfor %}
+                </div>
+            {% endif %}
+
+            {% if note.getLinks() is not empty %}
+                <div tabindex="0" class="note-links" title="{{ 'Shared links.' | trans }}">
+                    {% for link in note.getLinks() %}
+                        {% for block in handle_event('ViewLink', {'link': link, 'note': note}) %}
+                            {{ block | raw }}
+                        {% endfor %}
+                    {% endfor %}
+                </div>
+            {% endif %}
+        </section>
+
+        {% if replies is defined and replies is not empty %}
+            <div class="u-in-reply-to replies" tabindex="0" title="{{ 'Begin replies to ' | trans }} {{ nickname }}'s note!">
+                {% for conversation in replies %}
+                    {% include '/note/view.html.twig' with {'note': conversation['note'], 'skip_reply_to': true, 'have_user': have_user, 'replies': conversation['replies']} only %}
+                {% endfor %}
+            </div>
         {% endif %}
 
-        {% if note.getLinks() is not empty %}
-        <div tabindex="0" class="note-links" title="{{ 'Shared links.' | trans }}">
-        {% for link in note.getLinks() %}
-            {% for block in handle_event('ViewLink', {'link': link, 'note': note}) %}
-            {{ block | raw }}
-            {% endfor %}
-        {% endfor %}
-        </div>
+        {% if reply_to is not empty %}
+            <hr tabindex="0" title="{{ 'End of this reply' | trans }}">
         {% endif %}
-
-    </section>
-
-    {% if replies is defined and replies is not empty %}
-    <div class="u-in-reply-to replies" tabindex="0" title="{{ 'Begin replies to ' | trans }} {{ nickname }}'s note!">
-        {% for conversation in replies %}
-        {% include '/note/view.html.twig' with {'note': conversation['note'], 'skip_reply_to': true, 'have_user': have_user, 'replies': conversation['replies']} only %}
-        {% endfor %}
     </div>
-    {% endif %}
 
-    {% if reply_to is not empty %}
-        <hr tabindex="0" title="{{ 'End of this reply' | trans }}">
-    {% endif %}
 </article>
diff --git a/templates/settings/base.html.twig b/templates/settings/base.html.twig
index f8fe3eab9b..b1064668dc 100644
--- a/templates/settings/base.html.twig
+++ b/templates/settings/base.html.twig
@@ -17,60 +17,54 @@
 {% endblock %}
 
 {% block body %}
-    <nav class='main-nav fg'>
+    <nav class='main-nav'>
         <h1>Settings</h1>
         <ul>
             <li>
                 <details class="section-title-settings">
-                    <summary>
-                        <h2>Profile {{ icon('arrow-down', 'icon icon-details-open') | raw }}</h2>
+                <summary>
+                    <h2>Profile {{ icon('arrow-down', 'icon icon-details-open') | raw }}</h2>
+                    <em>Personal Information, Avatar and Profile</em>
+                </summary>
 
-                        <em>Personal Information, Avatar and Profile</em>
-                    </summary>
+                <section>
+                    <nav class='set-nav'>
+                        <ul>
+                            <li>
+                            <details class="section-title-settings">
+                                <summary>
+                                    <h3>Personal Info{{ icon('arrow-down', 'icon icon-details-open') | raw }}</h3>
+                                    <em>Nickname, Homepage, Bio, Self Tags and more.</em>
+                                </summary>
 
-                    <section>
-                        <nav class='set-nav'>
-                            <ul>
-                                <li>
-                                    <details class="section-title-settings">
-                                        <summary>
-                                            <h3>Personal
-                                                Info{{ icon('arrow-down', 'icon icon-details-open') | raw }}</h3>
+                                {% block form_profile %}{% include '/settings/profile.html.twig' %}{% endblock %}
+                            </details>
+                            </li>
 
-                                            <em>Nickname, Homepage, Bio, Self Tags and more.</em>
-                                        </summary>
+                            <hr>
 
-                                        {% block form_profile %}
-                                            {% include '/settings/profile.html.twig' %}
-                                        {% endblock %}
-                                    </details>
-                                </li>
+                        {% set profile_tabs = handle_event('PopulateProfileSettingsTabs', app.request) %}
+                        {% for tab in profile_tabs %}
+                            <li>
+                                <details class="section-title-settings">
+                                <summary>
+                                    <h3>{{ tab['title'] }}{{ icon('arrow-down', 'icon icon-details-open') | raw }}</h3>
+                                    <em>{{ tab['desc'] }}</em>
+                                </summary>
 
-                                <hr>
+                                {% include tab['controller']['_template'] with tab['controller'] only %}
 
-                                {% set profile_tabs = handle_event('PopulateProfileSettingsTabs', app.request) %}
-                                {% for tab in profile_tabs %}
-                                    <li>
-                                        <details class="section-title-settings">
-                                            <summary>
-                                                <h3>{{ tab['title'] }}{{ icon('arrow-down', 'icon icon-details-open') | raw }}</h3>
+                                {# <a href="{{ path(tab['route']) }}"
+                                class='hover-effect {{ active(tab['route']) }}'>{{ tab['title'] }}</a> #}
 
-                                                <em>{{ tab['desc'] }}</em>
-                                            </summary>
+                                </details>
+                            </li>
 
-                                            {% include tab['controller']['_template'] with tab['controller'] only %}
-
-                                            {# <a href="{{ path(tab['route']) }}"
-                                                   class='hover-effect {{ active(tab['route']) }}'>{{ tab['title'] }}</a> #}
-
-                                        </details>
-                                    </li>
-
-                                    <hr>
-                                {% endfor %}
-                            </ul>
-                        </nav>
-                    </section>
+                            <hr>
+                        {% endfor %}
+                        </ul>
+                    </nav>
+                </section>
                 </details>
             </li>