diff --git a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
index 5d6de337a..6509c251c 100644
--- a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
+++ b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
@@ -178,9 +178,11 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
                   minHeight: '35px',
                 }}
               >
-                {props.item.labels?.map(({ name, color }, index) => (
-                  <LabelChip key={index} text={name || ''} color={color} />
-                ))}
+                {props.item.labels
+                  ?.sort((a, b) => a.name.localeCompare(b.name))
+                  .map(({ name, color }, index) => (
+                    <LabelChip key={index} text={name || ''} color={color} />
+                  ))}
               </HStack>
               <VStack
                 css={{
diff --git a/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx
index abed965d4..b94aa4575 100644
--- a/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx
+++ b/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx
@@ -118,9 +118,11 @@ export function LibraryListCard(props: LinkedItemCardProps): JSX.Element {
                   display: 'block',
                 }}
               >
-                {props.item.labels?.map(({ name, color }, index) => (
-                  <LabelChip key={index} text={name || ''} color={color} />
-                ))}
+                {props.item.labels
+                  ?.sort((a, b) => a.name.localeCompare(b.name))
+                  .map(({ name, color }, index) => (
+                    <LabelChip key={index} text={name || ''} color={color} />
+                  ))}
               </HStack>
             </HStack>
           </VStack>