diff --git a/app/models.py b/app/models.py
index 90131d2e..45d8b24d 100644
--- a/app/models.py
+++ b/app/models.py
@@ -1087,7 +1087,7 @@ class User(UserMixin, db.Model):
         if user_note:
             return user_note.body
         else:
-            return None
+            return ''
 
 
 class ActivityLog(db.Model):
diff --git a/app/templates/base.html b/app/templates/base.html
index fa066b25..4badd911 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -33,12 +33,12 @@
                 <span class="user_note" title="{{ _('User note: %(note)s', note=user_note) }}">[{{ user_note | truncate(12, True) }}]</span>
             {% endif -%}
         {% endif -%}
-        <div class="d-none user_preview" id="preview_{{ user.id }}"
+        <span class="d-none user_preview" id="preview_{{ user.id }}"
             hx-get="{{ url_for('user.user_preview', user_id=user.id) }}"
             hx-trigger="intersect once"
             hx-target="this"
             hx-swap="innerHTML"
-        ></div>
+        ></span>
     {% endif -%}
 </span>
 {% endmacro -%}
diff --git a/app/templates/user/user_preview.html b/app/templates/user/user_preview.html
index cba88076..df093d2e 100644
--- a/app/templates/user/user_preview.html
+++ b/app/templates/user/user_preview.html
@@ -2,20 +2,21 @@
     <div class="card-body">
         <div class="row">
             {% if user.avatar_id -%}
-                <div class="col-auto preview_avatar_image">
+                <div class="col-6 preview_avatar_image">
                     <img src="{{ user.avatar_image() }}" alt="" loading="lazy" />
                 </div>
             {% endif -%}
-            <div class="col-auto">
-                <a href="/u/{{ user.link() }}">{{ user.display_name() }}</a>
+            <div class="col-6">
+                <h4 class="mb-0"><a href="/u/{{ user.link() }}">{{ user.display_name() }}</a></h4>
+                <p>{{ _('Instance') }}: <a href="{{ url_for('instance.instance_overview', instance_domain=user.instance_domain()) }}">{{ user.instance_domain() }}</a><br>
+                {% if user.is_instance_admin() or (user.is_local() and user.is_admin()) %}<span class="red">({{ _('Admin') }})</span><br>{% endif %}
+                {% if user.is_admin() or user.is_staff() %}{{ _('Roles') }}: {% if user.is_admin() %}{{ _('Admin') }}{% endif %} {% if user.is_staff() %}{{ _('Staff') }}{% endif %}<br />{% endif %}
+                </p>
             </div>
         </div>
         <div class="row">
             <div class="col-auto">
-                <p>{{ _('Instance') }}: <a href="{{ url_for('instance.instance_overview', instance_domain=user.instance_domain()) }}">{{ user.instance_domain() }}</a>
-                    {% if user.is_instance_admin() or (user.is_local() and user.is_admin()) %}<span class="red">({{ _('Admin') }})</span>{% endif %}<br />
-                    {% if user.is_admin() or user.is_staff() %}{{ _('Role permissions') }}: {% if user.is_admin() %}{{ _('Admin') }}{% endif %} {% if user.is_staff() %}{{ _('Staff') }}{% endif %}<br />{% endif %}
-                    {{ _('Joined') }}: {{ arrow.get(user.created).humanize(locale=locale) }}<br />
+                <p> {{ _('Joined') }}: {{ arrow.get(user.created).humanize(locale=locale) }}<br />
                     {% if current_user.is_authenticated and current_user.is_admin() %}{{ _('Referer') }}: <span title="{{ _('Which website linked to PieFed when the user initially registered.') }}">{{ user.referrer if user.referrer }}</span><br />{% endif %}
                     {% if current_user.is_authenticated and current_user.is_admin() %}{{ _('IP and country code') }}: <span title="{{ _('IP address of last interaction.') }}">{{ user.ip_address if user.ip_address }}{% if user.ip_address_country %} ({{ user.ip_address_country }}){% endif %}</span><br />{% endif %}
                     {% if current_user.is_authenticated and current_user.is_admin() and user.last_seen %}{{ _('Active') }}: {{ arrow.get(user.last_seen).humanize(locale=locale) }}<br />{% endif %}