diff --git a/packages/components/src/components/cards/partials/CardItemSeparator.tsx b/packages/components/src/components/cards/partials/CardItemSeparator.tsx
index ef8e20c4..7f215a2c 100644
--- a/packages/components/src/components/cards/partials/CardItemSeparator.tsx
+++ b/packages/components/src/components/cards/partials/CardItemSeparator.tsx
@@ -1,26 +1,33 @@
 import { getLuminance } from 'polished'
 import React from 'react'
 
-import { ThemeColors } from '@devhub/core'
+import { isItemRead, ThemeColors } from '@devhub/core'
 import { Separator } from '../../common/Separator'
 import { useTheme } from '../../context/ThemeContext'
 
 export function getCardItemSeparatorThemeColor(
   backgroundColor: string,
+  isRead?: boolean,
 ): keyof ThemeColors {
   const luminance = getLuminance(backgroundColor)
 
   if (luminance <= 0.02) return 'backgroundColorLess2'
-  return 'backgroundColorDarker1'
+
+  return isRead ? 'backgroundColorDarker2' : 'backgroundColorDarker1'
 }
 
-export function CardItemSeparator() {
+export function CardItemSeparator(props: any) {
+  const { leadingItem } = props
+
   const theme = useTheme()
 
+  const isRead = leadingItem ? isItemRead(leadingItem) : false
+
   return (
     <Separator
       backgroundThemeColor={getCardItemSeparatorThemeColor(
         theme.backgroundColor,
+        isRead,
       )}
       horizontal
     />