diff --git a/src/apps/dashboard/components/widgets/ItemCountsWidget.tsx b/src/apps/dashboard/components/widgets/ItemCountsWidget.tsx
index 12a58a60ef..f4a5e79870 100644
--- a/src/apps/dashboard/components/widgets/ItemCountsWidget.tsx
+++ b/src/apps/dashboard/components/widgets/ItemCountsWidget.tsx
@@ -5,14 +5,89 @@ import MusicVideo from '@mui/icons-material/MusicVideo';
 import Tv from '@mui/icons-material/Tv';
 import VideoLibrary from '@mui/icons-material/VideoLibrary';
 import Grid from '@mui/material/Grid2';
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import { useItemCounts } from 'apps/dashboard/features/metrics/api/useItemCounts';
-import MetricCard from 'apps/dashboard/features/metrics/components/MetricCard';
+import MetricCard, { type MetricCardProps } from 'apps/dashboard/features/metrics/components/MetricCard';
 import globalize from 'lib/globalize';
 
 const ItemCountsWidget = () => {
-    const { data: counts } = useItemCounts();
+    const {
+        data: counts,
+        isPending
+    } = useItemCounts();
+
+    const cards: MetricCardProps[] = useMemo(() => {
+        const cardProps: MetricCardProps[] = [];
+
+        if (isPending || counts?.MovieCount) {
+            cardProps.push({
+                Icon: Movie,
+                metrics: [{
+                    label: globalize.translate('Movies'),
+                    value: counts?.MovieCount
+                }]
+            });
+        }
+
+        if (isPending || counts?.SeriesCount || counts?.EpisodeCount) {
+            cardProps.push({
+                Icon: Tv,
+                metrics: [{
+                    label: globalize.translate('Series'),
+                    value: counts?.SeriesCount
+                }, {
+                    label: globalize.translate('Episodes'),
+                    value: counts?.EpisodeCount
+                }]
+            });
+        }
+
+        if (isPending || counts?.AlbumCount || counts?.SongCount) {
+            cardProps.push({
+                Icon: MusicNote,
+                metrics: [{
+                    label: globalize.translate('Albums'),
+                    value: counts?.AlbumCount
+                }, {
+                    label: globalize.translate('Songs'),
+                    value: counts?.SongCount
+                }]
+            });
+        }
+
+        if (isPending || counts?.MusicVideoCount) {
+            cardProps.push({
+                Icon: MusicVideo,
+                metrics: [{
+                    label: globalize.translate('MusicVideos'),
+                    value: counts?.MusicVideoCount
+                }]
+            });
+        }
+
+        if (isPending || counts?.BookCount) {
+            cardProps.push({
+                Icon: Book,
+                metrics: [{
+                    label: globalize.translate('Books'),
+                    value: counts?.BookCount
+                }]
+            });
+        }
+
+        if (isPending || counts?.BoxSetCount) {
+            cardProps.push({
+                Icon: VideoLibrary,
+                metrics: [{
+                    label: globalize.translate('Collections'),
+                    value: counts?.BoxSetCount
+                }]
+            });
+        }
+
+        return cardProps;
+    }, [ counts, isPending ]);
 
     return (
         <Grid
@@ -23,71 +98,14 @@ const ItemCountsWidget = () => {
                 marginTop: 2
             }}
         >
-            <Grid size={{ xs: 12, sm: 6, lg: 4 }}>
-                <MetricCard
-                    Icon={Movie}
-                    metrics={[{
-                        label: globalize.translate('Movies'),
-                        value: counts?.MovieCount
-                    }]}
-                />
-            </Grid>
-
-            <Grid size={{ xs: 12, sm: 6, lg: 4 }}>
-                <MetricCard
-                    Icon={Tv}
-                    metrics={[{
-                        label: globalize.translate('Series'),
-                        value: counts?.SeriesCount
-                    }, {
-                        label: globalize.translate('Episodes'),
-                        value: counts?.EpisodeCount
-                    }]}
-                />
-            </Grid>
-
-            <Grid size={{ xs: 12, sm: 6, lg: 4 }}>
-                <MetricCard
-                    Icon={MusicNote}
-                    metrics={[{
-                        label: globalize.translate('Albums'),
-                        value: counts?.AlbumCount
-                    }, {
-                        label: globalize.translate('Songs'),
-                        value: counts?.SongCount
-                    }]}
-                />
-            </Grid>
-
-            <Grid size={{ xs: 12, sm: 6, lg: 4 }}>
-                <MetricCard
-                    Icon={MusicVideo}
-                    metrics={[{
-                        label: globalize.translate('MusicVideos'),
-                        value: counts?.MusicVideoCount
-                    }]}
-                />
-            </Grid>
-
-            <Grid size={{ xs: 12, sm: 6, lg: 4 }}>
-                <MetricCard
-                    Icon={Book}
-                    metrics={[{
-                        label: globalize.translate('Books'),
-                        value: counts?.BookCount
-                    }]}
-                />
-            </Grid>
-
-            <Grid size={{ xs: 12, sm: 6, lg: 4 }}>
-                <MetricCard
-                    Icon={VideoLibrary}
-                    metrics={[{
-                        label: globalize.translate('Collections'),
-                        value: counts?.BoxSetCount
-                    }]}
-                />
-            </Grid>
+            {cards.map(card => (
+                <Grid
+                    key={card.metrics.map(metric => metric.label).join('-')}
+                    size={{ xs: 12, sm: 6, lg: 4 }}
+                >
+                    <MetricCard {...card} />
+                </Grid>
+            ))}
         </Grid>
     );
 };
diff --git a/src/apps/dashboard/features/metrics/components/MetricCard.tsx b/src/apps/dashboard/features/metrics/components/MetricCard.tsx
index 5ab87bc167..f251d7aab3 100644
--- a/src/apps/dashboard/features/metrics/components/MetricCard.tsx
+++ b/src/apps/dashboard/features/metrics/components/MetricCard.tsx
@@ -14,7 +14,7 @@ interface Metric {
     value?: number
 }
 
-interface MetricCardProps {
+export interface MetricCardProps {
     metrics: Metric[]
     Icon: typeof SvgIcon
 }