diff --git a/aleksis/core/static/public/style.scss b/aleksis/core/static/public/style.scss
index e293a9f0c07fd95ba554990781d5189a79ab7ebe..cf2a7f6857bd6b2c69f12c67fbf3fffc81581405 100644
--- a/aleksis/core/static/public/style.scss
+++ b/aleksis/core/static/public/style.scss
@@ -799,20 +799,34 @@ main figure.alert {
 }
 
 /* Person overview */
+$person-logo-size: 20vh;
 
 .clip-circle:not(.active) {
-  width: 20vh;
-  height: 20vh;
+  width: $person-logo-size;
+  height: $person-logo-size;
   background: #f9f9f9;
-  clip-path: circle(50% at center center);
+  border-radius: 50%;
 
   & img {
+    border-radius: 50%;
     width: 20vh;
     height: 20vh;
     object-fit: cover;
   }
 }
 
+.clip-circle.no-image, .clip-circle.no-image>i.material-icons {
+  font-size: calc(#{$person-logo-size} * 0.5);
+  color: #6f6f6f;
+  background: #f2f2f2;
+  line-height: $person-logo-size;
+  width: $person-logo-size;
+  text-align: center;
+  user-select: none;
+  cursor: default;
+  border-radius: 50%;
+}
+
 #hero-bg {
   position: absolute;
   width: calc(100% + #{$main-padding-lr});
@@ -880,9 +894,13 @@ main figure.alert {
     }
   }
 
-  &.active > img {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
+  &.active {
+    box-shadow: none;
+
+    & > img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
   }
 }
diff --git a/aleksis/core/templates/core/person/full.html b/aleksis/core/templates/core/person/full.html
index b6135f026138be076db7855cb1c6075033f03b8d..eaa833443154d50930ec84dcd113660012b118b8 100644
--- a/aleksis/core/templates/core/person/full.html
+++ b/aleksis/core/templates/core/person/full.html
@@ -50,14 +50,19 @@
     {% endif %}
 
   <header class="person-container">
-    <div class="clip-circle materialboxed">
-      {% has_perm 'core.view_photo_rule' user person as can_view_photo %}
-      {% if person.photo and can_view_photo %}
-        <img class="hundred-percent" src="{{ person.photo.url }}"
-             alt="{{ person.first_name }} {{ person.last_name }}"/>
+    <div class="image-wrapper">
+      {% has_perm 'core.view_avatar_rule' user person as can_view_avatar %}
+      {% if person.avatar and can_view_avatar %}
+        <div class="clip-circle materialboxed z-depth-2">
+          <img class="hundred-percent" src="{{ person.avatar.url }}"
+               alt="{{ person.first_name }} {{ person.last_name }}"/>
+        </div>
+
       {% else %}
-        <img class="hundred-percent" src="{% static 'img/fallback.png' %}"
-             alt="{{ person.first_name }} {{ person.last_name }}"/>
+
+        <div class="clip-circle no-image z-depth-2">
+          {{ person.initials }}
+        </div>
       {% endif %}
     </div>
     <h1>
@@ -65,7 +70,7 @@
       {% if person.user %}
         <small class="grey-text">{{ person.user.username }}</small>
       {% endif %}
-      </h1>
+    </h1>
   </header>
 
   <div class="row">
@@ -181,6 +186,21 @@
         {% endif %}
       </table>
       </div>
+      {% has_perm 'core.view_photo_rule' user person as can_view_photo %}
+      {% if person.photo and can_view_photo %}
+        <div class="card">
+          <div class="card-image">
+            <img src="{{ person.photo.url }}" alt="{{ person.first_name }} {{ person.last_name }}" class="materialboxed">
+            <span class="card-title">{{ person.first_name }} {{ person.last_name }}</span>
+          </div>
+        </div>
+
+      {% else %}
+        <div class="card-panel">
+          <i class="material-icons left">image_not_supported</i>
+          {% trans "This person didn't upload a personal photo." %}
+        </div>
+      {% endif %}
     </div>
 
     {% if person.children.all or person.guardians.all and can_view_personal_details %}