diff --git a/web/src/lib/components/faces-page/edit-name-input.svelte b/web/src/lib/components/faces-page/edit-name-input.svelte
index f34cf3cfee..139a5a8325 100644
--- a/web/src/lib/components/faces-page/edit-name-input.svelte
+++ b/web/src/lib/components/faces-page/edit-name-input.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { type PersonResponseDto, api } from '@api';
+  import { type PersonResponseDto } from '@api';
   import { createEventDispatcher } from 'svelte';
   import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
   import Button from '../elements/buttons/button.svelte';
@@ -7,6 +7,7 @@
   export let person: PersonResponseDto;
   export let name: string;
   export let suggestedPeople = false;
+  export let thumbnailData: string;
 
   const dispatch = createEventDispatcher<{
     change: string;
@@ -20,14 +21,7 @@
     ? 'rounded-t-lg dark:border-immich-dark-gray'
     : 'rounded-lg'}  bg-gray-100 p-2 dark:bg-gray-700"
 >
-  <ImageThumbnail
-    circle
-    shadow
-    url={api.getPeopleThumbnailUrl(person.id)}
-    altText={person.name}
-    widthStyle="2rem"
-    heightStyle="2rem"
-  />
+  <ImageThumbnail circle shadow url={thumbnailData} altText={person.name} widthStyle="2rem" heightStyle="2rem" />
   <form
     class="ml-4 flex w-full justify-between gap-16"
     autocomplete="off"
diff --git a/web/src/routes/(user)/people/[personId]/+page.svelte b/web/src/routes/(user)/people/[personId]/+page.svelte
index 54ae12dbce..33ea8aae21 100644
--- a/web/src/routes/(user)/people/[personId]/+page.svelte
+++ b/web/src/routes/(user)/people/[personId]/+page.svelte
@@ -453,6 +453,7 @@
                 bind:name
                 on:change={(event) => handleNameChange(event.detail)}
                 on:input={searchPeople}
+                {thumbnailData}
               />
             {:else}
               <div class="relative">