diff --git a/aleksis/core/assets/components/generic/AvatarClickbox.vue b/aleksis/core/assets/components/generic/AvatarClickbox.vue
new file mode 100644
index 0000000000000000000000000000000000000000..faa2ba173e5e9c4dc08d6048c133adf1cad30300
--- /dev/null
+++ b/aleksis/core/assets/components/generic/AvatarClickbox.vue
@@ -0,0 +1,32 @@
+<template>
+    <v-dialog v-model="overlay" max-width="fit-content" max-height="fit-content">
+      <template #activator="{ on, attrs }">
+        <v-card class="rounded-circle">
+          <v-responsive :aspect-ratio="1" v-bind="attrs" v-on="on">
+            <slot name="activator" />
+          </v-responsive>
+        </v-card>
+      </template>
+      <div class="inDialog">
+        <slot class="inDialog" />
+      </div>
+    </v-dialog>
+  </template>
+  
+  <script>  
+  export default {
+    name: "AvatarClickBox",
+    data: () => ({
+      overlay: false,
+    }),
+  };
+  </script>
+  
+  <style scoped>
+  .inDialog {
+    /* FIXME: find a way to enlarge image */
+    max-height: 80vmin;
+    width: 80vmin;
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/aleksis/core/assets/components/person/AvatarClickBox.vue b/aleksis/core/assets/components/person/AvatarClickBox.vue
deleted file mode 100644
index fc60bd301db1d8df5b23639cafa2708f46550033..0000000000000000000000000000000000000000
--- a/aleksis/core/assets/components/person/AvatarClickBox.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<template>
-  <v-dialog v-model="overlay" max-width="fit-content" max-height="fit-content">
-    <template #activator="{ on, attrs }">
-      <v-card class="rounded-circle">
-        <v-responsive :aspect-ratio="1" v-bind="attrs" v-on="on">
-          <avatar-content :id="id" class="rounded-circle" />
-        </v-responsive>
-      </v-card>
-    </template>
-    <avatar-content :id="id" contain class="inDialog" />
-  </v-dialog>
-</template>
-
-<script>
-import AvatarContent from "./AvatarContent.vue";
-
-export default {
-  name: "AvatarClickBox",
-  components: { AvatarContent },
-  data: () => ({
-    overlay: false,
-  }),
-  props: {
-    id: {
-      type: String,
-      required: false,
-      default: "",
-    },
-  },
-};
-</script>
-
-<style scoped>
-.inDialog {
-  /* FIXME: find a way to enlarge image */
-  max-height: 80vmin;
-  width: 80vmin;
-}
-</style>
diff --git a/aleksis/core/assets/components/person/PersonAvatarClickbox.vue b/aleksis/core/assets/components/person/PersonAvatarClickbox.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1a5de2a12879d37716305e85d50304b2fa75f4c1
--- /dev/null
+++ b/aleksis/core/assets/components/person/PersonAvatarClickbox.vue
@@ -0,0 +1,33 @@
+<template>
+  <avatar-clickbox>
+    <template #activator>
+      <avatar-content :id="id" class="rounded-circle" />
+    </template>
+    <avatar-content :id="id" contain />
+  </avatar-clickbox>
+</template>
+
+<script>
+import AvatarClickbox from "../generic/AvatarClickbox.vue";
+import AvatarContent from "./AvatarContent.vue";
+
+export default {
+  name: "PersonAvatarClickBox",
+  components: {
+    AvatarClickbox,
+    AvatarContent,
+  },
+  data: () => ({
+    overlay: false,
+  }),
+  props: {
+    id: {
+      type: String,
+      required: false,
+      default: "",
+    },
+  },
+};
+</script>
+
+<style scoped></style>
diff --git a/aleksis/core/assets/components/person/PersonOverview.vue b/aleksis/core/assets/components/person/PersonOverview.vue
index d7990c3ff6f17fb7df7e3f60cb30f0f24c5a4451..4aabae0faa0914b800634e714c1f8e69c807daf7 100644
--- a/aleksis/core/assets/components/person/PersonOverview.vue
+++ b/aleksis/core/assets/components/person/PersonOverview.vue
@@ -13,7 +13,7 @@
       <template v-else-if="data && data.person">
         <detail-view>
           <template #avatarContent>
-            <avatar-click-box :id="id" />
+            <person-avatar-clickbox :id="id" />
           </template>
 
           <template #title>
@@ -188,20 +188,20 @@
 
 <script>
 import AdditionalImage from "./AdditionalImage.vue";
-import AvatarClickBox from "./AvatarClickBox.vue";
 import DetailView from "../generic/DetailView.vue";
 import GroupCollection from "../group/GroupCollection.vue";
 import PersonActions from "./PersonActions.vue";
+import PersonAvatarClickbox from "./PersonAvatarClickbox.vue";
 import PersonCollection from "./PersonCollection.vue";
 
 export default {
   name: "PersonOverview",
   components: {
     AdditionalImage,
-    AvatarClickBox,
     DetailView,
     GroupCollection,
     PersonActions,
+    PersonAvatarClickbox,
     PersonCollection,
   },
   props: {