diff --git a/ui/src/album/AlbumDetails.jsx b/ui/src/album/AlbumDetails.jsx
index 4dfdcf91a..f796f3b9d 100644
--- a/ui/src/album/AlbumDetails.jsx
+++ b/ui/src/album/AlbumDetails.jsx
@@ -140,7 +140,7 @@ const GenreList = () => {
   )
 }
 
-const Details = (props) => {
+export const Details = (props) => {
   const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
   const translate = useTranslate()
   const record = useRecordContext(props)
diff --git a/ui/src/album/AlbumDetails.test.jsx b/ui/src/album/AlbumDetails.test.jsx
new file mode 100644
index 000000000..e03022677
--- /dev/null
+++ b/ui/src/album/AlbumDetails.test.jsx
@@ -0,0 +1,327 @@
+// ui/src/album/__tests__/AlbumDetails.test.jsx
+import { describe, test, expect, beforeEach, afterEach } from 'vitest'
+import { render } from '@testing-library/react'
+import { RecordContextProvider } from 'react-admin'
+import { useMediaQuery } from '@material-ui/core'
+import { Details } from './AlbumDetails'
+
+// Mock useMediaQuery
+vi.mock('@material-ui/core', async () => {
+  const actual = await import('@material-ui/core')
+  return {
+    ...actual,
+    useMediaQuery: vi.fn(),
+  }
+})
+
+describe('Details component', () => {
+  describe('Desktop view', () => {
+    beforeEach(() => {
+      // Set desktop view (isXsmall = false)
+      vi.mocked(useMediaQuery).mockReturnValue(false)
+    })
+
+    test('renders correctly with just year range', () => {
+      const record = {
+        id: '123',
+        name: 'Test Album',
+        songCount: 12,
+        duration: 3600,
+        size: 102400,
+        year: 2020,
+      }
+
+      const { container } = render(
+        <RecordContextProvider value={record}>
+          <Details />
+        </RecordContextProvider>,
+      )
+
+      expect(container).toMatchSnapshot()
+    })
+
+    test('renders correctly with date', () => {
+      const record = {
+        id: '123',
+        name: 'Test Album',
+        songCount: 12,
+        duration: 3600,
+        size: 102400,
+        date: '2020-05-01',
+      }
+
+      const { container } = render(
+        <RecordContextProvider value={record}>
+          <Details />
+        </RecordContextProvider>,
+      )
+
+      expect(container).toMatchSnapshot()
+    })
+
+    test('renders correctly with originalDate', () => {
+      const record = {
+        id: '123',
+        name: 'Test Album',
+        songCount: 12,
+        duration: 3600,
+        size: 102400,
+        originalDate: '2018-03-15',
+      }
+
+      const { container } = render(
+        <RecordContextProvider value={record}>
+          <Details />
+        </RecordContextProvider>,
+      )
+
+      expect(container).toMatchSnapshot()
+    })
+
+    test('renders correctly with date and originalDate', () => {
+      const record = {
+        id: '123',
+        name: 'Test Album',
+        songCount: 12,
+        duration: 3600,
+        size: 102400,
+        date: '2020-05-01',
+        originalDate: '2018-03-15',
+      }
+
+      const { container } = render(
+        <RecordContextProvider value={record}>
+          <Details />
+        </RecordContextProvider>,
+      )
+
+      expect(container).toMatchSnapshot()
+    })
+
+    test('renders correctly with releaseDate', () => {
+      const record = {
+        id: '123',
+        name: 'Test Album',
+        songCount: 12,
+        duration: 3600,
+        size: 102400,
+        releaseDate: '2020-06-15',
+      }
+
+      const { container } = render(
+        <RecordContextProvider value={record}>
+          <Details />
+        </RecordContextProvider>,
+      )
+
+      expect(container).toMatchSnapshot()
+    })
+
+    test('renders correctly with all date fields', () => {
+      const record = {
+        id: '123',
+        name: 'Test Album',
+        songCount: 12,
+        duration: 3600,
+        size: 102400,
+        date: '2020-05-01',
+        originalDate: '2018-03-15',
+        releaseDate: '2020-06-15',
+      }
+
+      const { container } = render(
+        <RecordContextProvider value={record}>
+          <Details />
+        </RecordContextProvider>,
+      )
+
+      expect(container).toMatchSnapshot()
+    })
+  })
+
+  describe('Mobile view', () => {
+    beforeEach(() => {
+      // Set mobile view (isXsmall = true)
+      vi.mocked(useMediaQuery).mockReturnValue(true)
+    })
+
+    afterEach(() => {
+      vi.clearAllMocks()
+    })
+
+    test('renders correctly with just year range', () => {
+      const record = {
+        id: '123',
+        name: 'Test Album',
+        songCount: 12,
+        duration: 3600,
+        size: 102400,
+        year: 2020,
+      }
+
+      const { container } = render(
+        <RecordContextProvider value={record}>
+          <Details />
+        </RecordContextProvider>,
+      )
+
+      expect(container).toMatchSnapshot()
+    })
+
+    test('renders correctly with date', () => {
+      const record = {
+        id: '123',
+        name: 'Test Album',
+        songCount: 12,
+        duration: 3600,
+        size: 102400,
+        date: '2020-05-01',
+      }
+
+      const { container } = render(
+        <RecordContextProvider value={record}>
+          <Details />
+        </RecordContextProvider>,
+      )
+
+      expect(container).toMatchSnapshot()
+    })
+
+    test('renders correctly with originalDate', () => {
+      const record = {
+        id: '123',
+        name: 'Test Album',
+        songCount: 12,
+        duration: 3600,
+        size: 102400,
+        originalDate: '2018-03-15',
+      }
+
+      const { container } = render(
+        <RecordContextProvider value={record}>
+          <Details />
+        </RecordContextProvider>,
+      )
+
+      expect(container).toMatchSnapshot()
+    })
+
+    test('renders correctly with date and originalDate', () => {
+      const record = {
+        id: '123',
+        name: 'Test Album',
+        songCount: 12,
+        duration: 3600,
+        size: 102400,
+        date: '2020-05-01',
+        originalDate: '2018-03-15',
+      }
+
+      const { container } = render(
+        <RecordContextProvider value={record}>
+          <Details />
+        </RecordContextProvider>,
+      )
+
+      expect(container).toMatchSnapshot()
+    })
+
+    test('renders correctly with releaseDate', () => {
+      const record = {
+        id: '123',
+        name: 'Test Album',
+        songCount: 12,
+        duration: 3600,
+        size: 102400,
+        releaseDate: '2020-06-15',
+      }
+
+      const { container } = render(
+        <RecordContextProvider value={record}>
+          <Details />
+        </RecordContextProvider>,
+      )
+
+      expect(container).toMatchSnapshot()
+    })
+
+    test('renders correctly with all date fields', () => {
+      const record = {
+        id: '123',
+        name: 'Test Album',
+        songCount: 12,
+        duration: 3600,
+        size: 102400,
+        date: '2020-05-01',
+        originalDate: '2018-03-15',
+        releaseDate: '2020-06-15',
+      }
+
+      const { container } = render(
+        <RecordContextProvider value={record}>
+          <Details />
+        </RecordContextProvider>,
+      )
+
+      expect(container).toMatchSnapshot()
+    })
+
+    test('renders correctly with no date fields', () => {
+      const record = {
+        id: '123',
+        name: 'Test Album',
+        songCount: 12,
+        duration: 3600,
+        size: 102400,
+      }
+
+      const { container } = render(
+        <RecordContextProvider value={record}>
+          <Details />
+        </RecordContextProvider>,
+      )
+
+      expect(container).toMatchSnapshot()
+    })
+
+    test('renders correctly with year range (start and end years)', () => {
+      const record = {
+        id: '123',
+        name: 'Test Album',
+        songCount: 12,
+        duration: 3600,
+        size: 102400,
+        year: 2018,
+        yearEnd: 2020,
+      }
+
+      const { container } = render(
+        <RecordContextProvider value={record}>
+          <Details />
+        </RecordContextProvider>,
+      )
+
+      expect(container).toMatchSnapshot()
+    })
+
+    test('renders correctly with originalYear range', () => {
+      const record = {
+        id: '123',
+        name: 'Test Album',
+        songCount: 12,
+        duration: 3600,
+        size: 102400,
+        originalYear: 2015,
+        originalYearEnd: 2016,
+      }
+
+      const { container } = render(
+        <RecordContextProvider value={record}>
+          <Details />
+        </RecordContextProvider>,
+      )
+
+      expect(container).toMatchSnapshot()
+    })
+  })
+})
diff --git a/ui/src/album/__snapshots__/AlbumDetails.test.jsx.snap b/ui/src/album/__snapshots__/AlbumDetails.test.jsx.snap
new file mode 100644
index 000000000..4f8f83531
--- /dev/null
+++ b/ui/src/album/__snapshots__/AlbumDetails.test.jsx.snap
@@ -0,0 +1,425 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Details component > Desktop view > renders correctly with all date fields 1`] = `
+<div>
+  <span>
+    resources.album.fields.originalDate  Mar 15, 2018
+  </span>
+   · 
+  <span>
+    resources.album.fields.releaseDate  Jun 15, 2020
+  </span>
+   · 
+  <span>
+    12 resources.song.name
+  </span>
+   · 
+  <span>
+    <span>
+      01:00:00
+    </span>
+  </span>
+   · 
+  <span>
+    <span
+      class="makeStyles-root-6"
+    >
+      100 KB
+    </span>
+  </span>
+</div>
+`;
+
+exports[`Details component > Desktop view > renders correctly with date 1`] = `
+<div>
+  <span>
+    May 1, 2020
+  </span>
+   · 
+  <span>
+    12 resources.song.name
+  </span>
+   · 
+  <span>
+    <span>
+      01:00:00
+    </span>
+  </span>
+   · 
+  <span>
+    <span
+      class="makeStyles-root-2"
+    >
+      100 KB
+    </span>
+  </span>
+</div>
+`;
+
+exports[`Details component > Desktop view > renders correctly with date and originalDate 1`] = `
+<div>
+  <span>
+    resources.album.fields.originalDate  Mar 15, 2018
+  </span>
+   · 
+  <span>
+    12 resources.song.name
+  </span>
+   · 
+  <span>
+    <span>
+      01:00:00
+    </span>
+  </span>
+   · 
+  <span>
+    <span
+      class="makeStyles-root-4"
+    >
+      100 KB
+    </span>
+  </span>
+</div>
+`;
+
+exports[`Details component > Desktop view > renders correctly with just year range 1`] = `
+<div>
+  <span>
+    12 resources.song.name
+  </span>
+   · 
+  <span>
+    <span>
+      01:00:00
+    </span>
+  </span>
+   · 
+  <span>
+    <span
+      class="makeStyles-root-1"
+    >
+      100 KB
+    </span>
+  </span>
+</div>
+`;
+
+exports[`Details component > Desktop view > renders correctly with originalDate 1`] = `
+<div>
+  <span>
+    resources.album.fields.originalDate  Mar 15, 2018
+  </span>
+   · 
+  <span>
+    12 resources.song.name
+  </span>
+   · 
+  <span>
+    <span>
+      01:00:00
+    </span>
+  </span>
+   · 
+  <span>
+    <span
+      class="makeStyles-root-3"
+    >
+      100 KB
+    </span>
+  </span>
+</div>
+`;
+
+exports[`Details component > Desktop view > renders correctly with releaseDate 1`] = `
+<div>
+  <span>
+    resources.album.fields.releaseDate  Jun 15, 2020
+  </span>
+   · 
+  <span>
+    12 resources.song.name
+  </span>
+   · 
+  <span>
+    <span>
+      01:00:00
+    </span>
+  </span>
+   · 
+  <span>
+    <span
+      class="makeStyles-root-5"
+    >
+      100 KB
+    </span>
+  </span>
+</div>
+`;
+
+exports[`Details component > Mobile view > renders correctly with all date fields 1`] = `
+<div>
+  <span>
+    ♫  Mar 15, 2018
+  </span>
+   · 
+  <span>
+    ○  Jun 15, 2020
+  </span>
+   · 
+  <span>
+    12 resources.song.name
+  </span>
+</div>
+`;
+
+exports[`Details component > Mobile view > renders correctly with date 1`] = `
+<div>
+  <span>
+    ♫  May 1, 2020
+  </span>
+   · 
+  <span>
+    12 resources.song.name
+  </span>
+</div>
+`;
+
+exports[`Details component > Mobile view > renders correctly with date and originalDate 1`] = `
+<div>
+  <span>
+    ♫  Mar 15, 2018
+  </span>
+   · 
+  <span>
+    12 resources.song.name
+  </span>
+</div>
+`;
+
+exports[`Details component > Mobile view > renders correctly with just year range 1`] = `
+<div>
+  <span>
+    12 resources.song.name
+  </span>
+</div>
+`;
+
+exports[`Details component > Mobile view > renders correctly with no date fields 1`] = `
+<div>
+  <span>
+    12 resources.song.name
+  </span>
+</div>
+`;
+
+exports[`Details component > Mobile view > renders correctly with originalDate 1`] = `
+<div>
+  <span>
+    ♫  Mar 15, 2018
+  </span>
+   · 
+  <span>
+    12 resources.song.name
+  </span>
+</div>
+`;
+
+exports[`Details component > Mobile view > renders correctly with originalYear range 1`] = `
+<div>
+  <span>
+    12 resources.song.name
+  </span>
+</div>
+`;
+
+exports[`Details component > Mobile view > renders correctly with releaseDate 1`] = `
+<div>
+  <span>
+    Jun 15, 2020
+  </span>
+   · 
+  <span>
+    12 resources.song.name
+  </span>
+</div>
+`;
+
+exports[`Details component > Mobile view > renders correctly with year range (start and end years) 1`] = `
+<div>
+  <span>
+    12 resources.song.name
+  </span>
+</div>
+`;
+
+exports[`Details component > renders correctly in mobile view 1`] = `
+<div>
+  <span>
+    ♫  Mar 15, 2018
+  </span>
+   · 
+  <span>
+    ○  Jun 15, 2020
+  </span>
+   · 
+  <span>
+    12 resources.song.name
+  </span>
+</div>
+`;
+
+exports[`Details component > renders correctly with all date fields 1`] = `
+<div>
+  <span>
+    resources.album.fields.originalDate  Mar 15, 2018
+  </span>
+   · 
+  <span>
+    resources.album.fields.releaseDate  Jun 15, 2020
+  </span>
+   · 
+  <span>
+    12 resources.song.name
+  </span>
+   · 
+  <span>
+    <span>
+      01:00:00
+    </span>
+  </span>
+   · 
+  <span>
+    <span
+      class="makeStyles-root-6"
+    >
+      100 KB
+    </span>
+  </span>
+</div>
+`;
+
+exports[`Details component > renders correctly with date 1`] = `
+<div>
+  <span>
+    May 1, 2020
+  </span>
+   · 
+  <span>
+    12 resources.song.name
+  </span>
+   · 
+  <span>
+    <span>
+      01:00:00
+    </span>
+  </span>
+   · 
+  <span>
+    <span
+      class="makeStyles-root-2"
+    >
+      100 KB
+    </span>
+  </span>
+</div>
+`;
+
+exports[`Details component > renders correctly with date and originalDate 1`] = `
+<div>
+  <span>
+    resources.album.fields.originalDate  Mar 15, 2018
+  </span>
+   · 
+  <span>
+    12 resources.song.name
+  </span>
+   · 
+  <span>
+    <span>
+      01:00:00
+    </span>
+  </span>
+   · 
+  <span>
+    <span
+      class="makeStyles-root-4"
+    >
+      100 KB
+    </span>
+  </span>
+</div>
+`;
+
+exports[`Details component > renders correctly with just year range 1`] = `
+<div>
+  <span>
+    12 resources.song.name
+  </span>
+   · 
+  <span>
+    <span>
+      01:00:00
+    </span>
+  </span>
+   · 
+  <span>
+    <span
+      class="makeStyles-root-1"
+    >
+      100 KB
+    </span>
+  </span>
+</div>
+`;
+
+exports[`Details component > renders correctly with originalDate 1`] = `
+<div>
+  <span>
+    resources.album.fields.originalDate  Mar 15, 2018
+  </span>
+   · 
+  <span>
+    12 resources.song.name
+  </span>
+   · 
+  <span>
+    <span>
+      01:00:00
+    </span>
+  </span>
+   · 
+  <span>
+    <span
+      class="makeStyles-root-3"
+    >
+      100 KB
+    </span>
+  </span>
+</div>
+`;
+
+exports[`Details component > renders correctly with releaseDate 1`] = `
+<div>
+  <span>
+    resources.album.fields.releaseDate  Jun 15, 2020
+  </span>
+   · 
+  <span>
+    12 resources.song.name
+  </span>
+   · 
+  <span>
+    <span>
+      01:00:00
+    </span>
+  </span>
+   · 
+  <span>
+    <span
+      class="makeStyles-root-5"
+    >
+      100 KB
+    </span>
+  </span>
+</div>
+`;