diff --git a/packages/web/components/patterns/LibraryCards/FallbackImage.tsx b/packages/web/components/patterns/LibraryCards/FallbackImage.tsx
index 83edd385c..b1c8bbd48 100644
--- a/packages/web/components/patterns/LibraryCards/FallbackImage.tsx
+++ b/packages/web/components/patterns/LibraryCards/FallbackImage.tsx
@@ -7,20 +7,30 @@ type FallbackImageProps = {
   fontSize: string
 }
 
-export const FallbackImage = (props: FallbackImageProps): JSX.Element => {
-  const idx = (Math.abs(hashCode(props.title)) % Colors.length) - 1
-  const color = Colors[idx]
+const colorsForStr = (str: string): string[] => {
+  try {
+    const idx = Math.abs(hashCode(str)) % (Colors.length - 1)
+    const color = Colors[idx]
+    if (color.colors[0] && color.colors[1]) {
+      return color.colors
+    }
+  } catch (err) {
+    console.log('error creating colors for', str)
+  }
+  return Colors[0].colors
+}
 
+export const FallbackImage = (props: FallbackImageProps): JSX.Element => {
+  const colors = colorsForStr(props.title)
   return (
     <VStack
       distribution="center"
       alignment="center"
       css={{
-        // position: 'relative',
         width: props.width,
         height: props.height,
-        backgroundColor: color.colors[1],
-        color: color.colors[0],
+        backgroundColor: colors[1],
+        color: colors[0],
         fontSize: props.fontSize,
         fontWeight: 'bold',
         fontFamily: '$display',
diff --git a/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx b/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx
index c69f90072..73a1c49ce 100644
--- a/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx
+++ b/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx
@@ -41,7 +41,6 @@ export const TitleStyle = {
   fontSize: '16px',
   fontWeight: '700',
   maxLines: 2,
-  lineHeight: '1.25',
   fontFamily: '$display',
   overflow: 'hidden',
   textOverflow: 'ellipsis',
diff --git a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
index dd4b1fa6b..8da73a814 100644
--- a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
+++ b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
@@ -171,7 +171,7 @@ const LibraryGridCardContent = (props: LinkedItemCardProps): JSX.Element => {
 
   return (
     <VStack css={{ p: '0px', m: '0px', width: '100%' }}>
-      <Box css={{ position: 'relative', width: '100%' }}>
+      <Box css={{ position: 'relative', width: '100%', height: '100px' }}>
         <GridImage
           src={props.item.image}
           title={props.item.title}
@@ -219,7 +219,7 @@ const LibraryGridCardContent = (props: LinkedItemCardProps): JSX.Element => {
       <HStack
         css={{
           ...MetaStyle,
-          pt: '15px',
+          mt: '15px',
           px: '15px',
         }}
         distribution="start"
@@ -230,12 +230,12 @@ const LibraryGridCardContent = (props: LinkedItemCardProps): JSX.Element => {
       <VStack
         alignment="start"
         distribution="start"
-        css={{ height: '100%', width: '100%', px: '15px', pt: '5px' }}
+        css={{ height: '100%', width: '100%', px: '15px' }}
       >
         <Box
           css={{
             ...TitleStyle,
-            height: '42px',
+            mt: '10px',
           }}
         >
           {props.item.title}
@@ -244,7 +244,7 @@ const LibraryGridCardContent = (props: LinkedItemCardProps): JSX.Element => {
           css={{
             ...AuthorInfoStyle,
             mt: '5px',
-            mb: '10px',
+            mb: '20px',
           }}
         >
           {props.item.author}