diff --git a/web/src/lib/components/faces-page/merge-face-selector.svelte b/web/src/lib/components/faces-page/merge-face-selector.svelte
index 25636eebd840b..f92bff37aad19 100644
--- a/web/src/lib/components/faces-page/merge-face-selector.svelte
+++ b/web/src/lib/components/faces-page/merge-face-selector.svelte
@@ -30,9 +30,7 @@
   }>();
 
   $: hasSelection = selectedPeople.length > 0;
-  $: unselectedPeople = people.filter(
-    (source) => !selectedPeople.some((selected) => selected.id === source.id) && source.id !== person.id,
-  );
+  $: peopleToNotShow = [...selectedPeople, person];
 
   onMount(async () => {
     const data = await getAllPeople({ withHidden: false });
@@ -150,13 +148,7 @@
         </div>
       </div>
 
-      <PeopleList
-        people={unselectedPeople}
-        peopleCopy={unselectedPeople}
-        unselectedPeople={selectedPeople}
-        {screenHeight}
-        on:select={({ detail }) => onSelect(detail)}
-      />
+      <PeopleList {people} {peopleToNotShow} {screenHeight} on:select={({ detail }) => onSelect(detail)} />
     </section>
 
     {#if isShowConfirmation}
diff --git a/web/src/lib/components/faces-page/people-list.svelte b/web/src/lib/components/faces-page/people-list.svelte
index ac3201e98b2f2..b1e2ba85fbf0e 100644
--- a/web/src/lib/components/faces-page/people-list.svelte
+++ b/web/src/lib/components/faces-page/people-list.svelte
@@ -6,8 +6,8 @@
 
   export let screenHeight: number;
   export let people: PersonResponseDto[];
-  export let peopleCopy: PersonResponseDto[];
-  export let unselectedPeople: PersonResponseDto[];
+  export let peopleToNotShow: PersonResponseDto[];
+  let searchedPeopleLocal: PersonResponseDto[] = [];
 
   let name = '';
   let showPeople: PersonResponseDto[];
@@ -17,20 +17,15 @@
   }>();
 
   $: {
-    showPeople = people.filter(
-      (person) => !unselectedPeople.some((unselectedPerson) => unselectedPerson.id === person.id),
+    showPeople = name ? searchedPeopleLocal : people;
+    showPeople = showPeople.filter(
+      (person) => !peopleToNotShow.some((unselectedPerson) => unselectedPerson.id === person.id),
     );
   }
 </script>
 
 <div class=" w-40 sm:w-48 md:w-96 h-14 mb-8">
-  <SearchPeople
-    type="searchBar"
-    placeholder="Search people"
-    bind:searchName={name}
-    bind:searchedPeopleLocal={people}
-    onReset={() => (people = peopleCopy)}
-  />
+  <SearchPeople type="searchBar" placeholder="Search people" bind:searchName={name} bind:searchedPeopleLocal />
 </div>
 
 <div
diff --git a/web/src/lib/components/faces-page/unmerge-face-selector.svelte b/web/src/lib/components/faces-page/unmerge-face-selector.svelte
index 590cc916eee2c..2343df68c9a7d 100644
--- a/web/src/lib/components/faces-page/unmerge-face-selector.svelte
+++ b/web/src/lib/components/faces-page/unmerge-face-selector.svelte
@@ -31,9 +31,7 @@
   let hasSelection = false;
   let screenHeight: number;
 
-  $: unselectedPeople = selectedPerson
-    ? people.filter((person) => selectedPerson && person.id !== selectedPerson.id && personAssets.id !== person.id)
-    : people;
+  $: peopleToNotShow = selectedPerson ? [personAssets, selectedPerson] : [personAssets];
 
   let dispatch = createEventDispatcher<{
     confirm: void;
@@ -178,13 +176,7 @@
           </div>
         </div>
       {/if}
-      <PeopleList
-        people={unselectedPeople}
-        peopleCopy={unselectedPeople}
-        unselectedPeople={selectedPerson ? [selectedPerson, personAssets] : [personAssets]}
-        {screenHeight}
-        on:select={({ detail }) => handleSelectedPerson(detail)}
-      />
+      <PeopleList {people} {peopleToNotShow} {screenHeight} on:select={({ detail }) => handleSelectedPerson(detail)} />
     </section>
   </section>
 </section>
diff --git a/web/src/routes/(user)/people/+page.svelte b/web/src/routes/(user)/people/+page.svelte
index d4eb6e17420a0..7976bb4f3afb2 100644
--- a/web/src/routes/(user)/people/+page.svelte
+++ b/web/src/routes/(user)/people/+page.svelte
@@ -60,14 +60,23 @@
   let edittingPerson: PersonResponseDto | null = null;
   let searchedPeopleLocal: PersonResponseDto[] = [];
   let handleSearchPeople: (force?: boolean, name?: string) => Promise<void>;
+  let showPeople: PersonResponseDto[] = [];
+  let countVisiblePeople: number;
 
   let innerHeight: number;
 
   for (const person of people) {
     initialHiddenValues[person.id] = person.isHidden;
   }
-  $: showPeople = searchName ? searchedPeopleLocal : people.filter((person) => !person.isHidden);
-  $: countVisiblePeople = countTotalPeople - countHiddenPeople;
+  $: {
+    if (searchName) {
+      showPeople = searchedPeopleLocal;
+      countVisiblePeople = searchedPeopleLocal.length;
+    } else {
+      showPeople = people.filter((person) => !person.isHidden);
+      countVisiblePeople = countTotalPeople - countHiddenPeople;
+    }
+  }
 
   onMount(async () => {
     const getSearchedPeople = $page.url.searchParams.get(QueryParameter.SEARCHED_PEOPLE);
@@ -382,7 +391,7 @@
 
 <UserPageLayout
   title="People"
-  description={countVisiblePeople === 0 ? undefined : `(${countVisiblePeople.toLocaleString($locale)})`}
+  description={countVisiblePeople === 0 && !searchName ? undefined : `(${countVisiblePeople.toLocaleString($locale)})`}
 >
   <svelte:fragment slot="buttons">
     {#if countTotalPeople > 0}
diff --git a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
index 356cbe0df28a0..39f715b1ec9ea 100644
--- a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -31,7 +31,7 @@
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { AssetStore } from '$lib/stores/assets.store';
   import { websocketEvents } from '$lib/stores/websocket';
-  import { getPeopleThumbnailUrl } from '$lib/utils';
+  import { getPeopleThumbnailUrl, handlePromiseError } from '$lib/utils';
   import { clickOutside } from '$lib/utils/click-outside';
   import { handleError } from '$lib/utils/handle-error';
   import { isExternalUrl } from '$lib/utils/navigation';
@@ -56,6 +56,7 @@
   import { onMount } from 'svelte';
   import type { PageData } from './$types';
   import { listNavigation } from '$lib/utils/list-navigation';
+  import type { NavigationTarget } from '@sveltejs/kit';
 
   export let data: PageData;
 
@@ -137,12 +138,15 @@
       return;
     }
   };
-  afterNavigate(({ from }) => {
+
+  const handleNagigationChange = async (from: NavigationTarget | null) => {
     // Prevent setting previousRoute to the current page.
     if (from && from.route.id !== $page.route.id) {
       previousRoute = from.url.href;
     }
     if (previousPersonId !== data.person.id) {
+      const { assets } = await getPersonStatistics({ id: data.person.id });
+      numberOfAssets = assets;
       assetStore = new AssetStore({
         isArchived: false,
         personId: data.person.id,
@@ -151,6 +155,10 @@
       name = data.person.name;
       refreshAssetGrid = !refreshAssetGrid;
     }
+  };
+
+  afterNavigate(({ from }) => {
+    handlePromiseError(handleNagigationChange(from));
   });
 
   const handleUnmerge = () => {