diff --git a/web/src/lib/components/album-page/AlbumSummary.svelte b/web/src/lib/components/album-page/AlbumSummary.svelte
index dd84bbec9..8f119a70d 100644
--- a/web/src/lib/components/album-page/AlbumSummary.svelte
+++ b/web/src/lib/components/album-page/AlbumSummary.svelte
@@ -8,7 +8,7 @@
   };
 
   const { album }: Props = $props();
-  const startDate = album.startDate;
+  const startDate = $derived(album.startDate);
 </script>
 
 <span class="my-2 flex gap-2 text-sm font-medium text-gray-500" data-testid="album-details">
diff --git a/web/src/lib/components/album-page/__tests__/AlbumSummary.spec.ts b/web/src/lib/components/album-page/__tests__/AlbumSummary.spec.ts
new file mode 100644
index 000000000..7a4dfeeb8
--- /dev/null
+++ b/web/src/lib/components/album-page/__tests__/AlbumSummary.spec.ts
@@ -0,0 +1,34 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/svelte';
+import { init, register, waitLocale } from 'svelte-i18n';
+import { writable } from 'svelte/store';
+import { albumFactory } from '@test-data/factories/album-factory';
+import AlbumSummary from '../AlbumSummary.svelte';
+
+vitest.mock('$lib/stores/preferences.store', () => ({
+  locale: writable('en'),
+}));
+
+describe('AlbumSummary component', () => {
+  beforeAll(async () => {
+    await init({ fallbackLocale: 'en-US' });
+    register('en-US', () => import('$i18n/en.json'));
+    await waitLocale('en-US');
+  });
+
+  it('updates the date range when the start date of the album changes', async () => {
+    const album = albumFactory.build({
+      startDate: '2026-06-10T12:00:00.000Z',
+      endDate: '2026-06-20T12:00:00.000Z',
+      assetCount: 3,
+    });
+    const { rerender } = render(AlbumSummary, { album });
+    expect(screen.getByTestId('album-details')).toHaveTextContent('Jun 10');
+
+    await rerender({ album: { ...album, startDate: '2026-06-15T12:00:00.000Z', assetCount: 2 } });
+
+    const details = screen.getByTestId('album-details');
+    expect(details).toHaveTextContent('Jun 15');
+    expect(details).not.toHaveTextContent('Jun 10');
+  });
+});