diff --git a/src/renderer/features/albums/components/album-detail-header.tsx b/src/renderer/features/albums/components/album-detail-header.tsx
index 2ce356831..77f8349b7 100644
--- a/src/renderer/features/albums/components/album-detail-header.tsx
+++ b/src/renderer/features/albums/components/album-detail-header.tsx
@@ -125,47 +125,45 @@ export const AlbumDetailHeader = forwardRef<HTMLDivElement, AlbumDetailHeaderPro
                     title={detailQuery?.data?.name || ''}
                     {...background}
                 >
-                    <Stack gap="lg">
-                        <Pill.Group>
-                            {metadataItems.map(
-                                (item, index) =>
-                                    item.value && (
-                                        <Pill key={`item-${item.id}-${index}`}>{item.value}</Pill>
-                                    ),
-                            )}
-                        </Pill.Group>
-                        {showRating && (
-                            <Rating
-                                onChange={handleUpdateRating}
-                                readOnly={detailQuery?.isFetching}
-                                value={detailQuery?.data?.userRating || 0}
-                            />
+                    <Pill.Group>
+                        {metadataItems.map(
+                            (item, index) =>
+                                item.value && (
+                                    <Pill key={`item-${item.id}-${index}`}>{item.value}</Pill>
+                                ),
                         )}
-                        <Group
-                            gap="md"
-                            mah="4rem"
-                            style={{
-                                overflow: 'hidden',
-                                WebkitBoxOrient: 'vertical',
-                                WebkitLineClamp: 2,
-                            }}
-                        >
-                            {detailQuery?.data?.albumArtists.map((artist) => (
-                                <Text
-                                    component={Link}
-                                    fw={600}
-                                    isLink
-                                    key={`artist-${artist.id}`}
-                                    to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
-                                        albumArtistId: artist.id,
-                                    })}
-                                    variant="subtle"
-                                >
-                                    {artist.name}
-                                </Text>
-                            ))}
-                        </Group>
-                    </Stack>
+                    </Pill.Group>
+                    {showRating && (
+                        <Rating
+                            onChange={handleUpdateRating}
+                            readOnly={detailQuery?.isFetching}
+                            value={detailQuery?.data?.userRating || 0}
+                        />
+                    )}
+                    <Group
+                        gap="md"
+                        mah="4rem"
+                        style={{
+                            overflow: 'hidden',
+                            WebkitBoxOrient: 'vertical',
+                            WebkitLineClamp: 2,
+                        }}
+                    >
+                        {detailQuery?.data?.albumArtists.map((artist) => (
+                            <Text
+                                component={Link}
+                                fw={600}
+                                isLink
+                                key={`artist-${artist.id}`}
+                                to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
+                                    albumArtistId: artist.id,
+                                })}
+                                variant="subtle"
+                            >
+                                {artist.name}
+                            </Text>
+                        ))}
+                    </Group>
                 </LibraryHeader>
             </Stack>
         );
diff --git a/src/renderer/features/shared/components/library-header.module.css b/src/renderer/features/shared/components/library-header.module.css
index 9398c4c8b..cbe67988e 100644
--- a/src/renderer/features/shared/components/library-header.module.css
+++ b/src/renderer/features/shared/components/library-header.module.css
@@ -1,17 +1,17 @@
 .library-header {
     position: relative;
     display: grid;
-    grid-template-areas: 'image info';
-    grid-template-rows: 100%;
-    grid-template-columns: 175px minmax(0, 1fr);
+    grid-template-areas: 'image' 'info';
+    grid-template-rows: auto 1fr;
+    grid-template-columns: 1fr;
     gap: 1rem;
-    align-items: flex-end;
+    align-items: center;
+    justify-items: center;
     width: 100%;
     max-width: 100%;
-    height: 30vh;
+    height: auto;
     min-height: 340px;
-    max-height: 500px;
-    padding: 5rem 2rem 2rem;
+    padding: 2rem 1rem;
 
     :global(.item-image-placeholder) {
         width: 175px !important;
@@ -19,52 +19,22 @@
     }
 
     .image {
-        width: 175px !important;
-        height: 175px;
+        width: 250px !important;
+        height: 250px;
     }
+}
 
-    @container (max-width: 599px) {
-        grid-template-columns: 175px minmax(0, 1fr);
-
-        h1 {
-            height: 40px;
-        }
-
-        .image {
-            width: 175px !important;
-            height: 175px;
-        }
-
-        :global(.item-image-placeholder) {
-            width: 175px !important;
-            height: 175px;
-        }
-    }
-
-    @container (min-width: 600px) {
-        grid-template-columns: 200px minmax(0, 1fr);
-
-        h1 {
-            height: 80px;
-        }
-
-        .image {
-            width: 200px !important;
-            height: 200px;
-        }
-
-        :global(.item-image-placeholder) {
-            width: 200px !important;
-            height: 200px;
-        }
-    }
-
-    @container (min-width: 768px) {
+@container (min-width: 768px) {
+    .library-header {
+        grid-template-areas: 'image info';
+        grid-template-rows: 100%;
         grid-template-columns: 225px minmax(0, 1fr);
-
-        h1 {
-            height: 100px;
-        }
+        align-items: flex-end;
+        justify-items: start;
+        height: 30vh;
+        min-height: 340px;
+        max-height: 500px;
+        padding: 5rem 2rem 2rem;
 
         .image {
             width: 225px !important;
@@ -76,12 +46,13 @@
             height: 225px;
         }
     }
+}
 
-    @container (min-width: 1200px) {
+@container (min-width: 1200px) {
+    .library-header {
         grid-template-columns: 250px minmax(0, 1fr);
 
-        .image,
-        .image-section {
+        .image {
             width: 250px !important;
             height: 250px;
         }
@@ -97,9 +68,8 @@
     z-index: 15;
     display: flex;
     grid-area: image;
-    align-items: flex-end;
+    align-items: center;
     justify-content: center;
-    max-height: 100%;
     filter: drop-shadow(0 0 8px rgb(0 0 0 / 50%));
 }
 
@@ -108,8 +78,30 @@
     display: flex;
     flex-direction: column;
     grid-area: info;
-    justify-content: flex-end;
+    gap: var(--theme-spacing-md);
+    align-items: center;
+    justify-content: center;
     width: 100%;
+    text-align: center;
+
+    & > div {
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+    }
+}
+
+@container (min-width: 768px) {
+    .image-section {
+        align-items: flex-end;
+    }
+
+    .metadata-section,
+    .metadata-section > div {
+        align-items: flex-start;
+        justify-content: flex-start;
+        text-align: left;
+    }
 }
 
 .image {
diff --git a/src/renderer/features/shared/components/library-header.tsx b/src/renderer/features/shared/components/library-header.tsx
index 34b6e408b..29224fb60 100644
--- a/src/renderer/features/shared/components/library-header.tsx
+++ b/src/renderer/features/shared/components/library-header.tsx
@@ -127,7 +127,7 @@ export const LibraryHeader = forwardRef(
                             {itemTypeString()}
                         </Text>
                         <h1 className={styles.title}>
-                            <AutoTextSize maxFontSizePx={80} mode="box">
+                            <AutoTextSize maxFontSizePx={80} minFontSizePx={36} mode="box">
                                 {title}
                             </AutoTextSize>
                         </h1>