diff --git a/components/FolderOverview.tsx b/components/FolderOverview.tsx
index 355e363..a1a6c5e 100644
--- a/components/FolderOverview.tsx
+++ b/components/FolderOverview.tsx
@@ -367,7 +367,7 @@ const FolderOverview: React.FC<FolderOverviewProps> = ({
                                                                             borderLeftWidth: '3px',
                                                                             borderLeftStyle: 'solid',
                                                                             borderLeftColor: 'rgb(var(--color-accent) / 0.45)',
-                                                                            backgroundColor: 'rgb(var(--color-border) / 0.26)',
+                                                                            background: 'color-mix(in srgb, rgb(var(--color-background)) 82%, rgb(var(--color-text-main)) 18%)',
                                                                             borderRadius: '4px',
                                                                         }}
                                                                     >
diff --git a/components/PromptTreeItem.tsx b/components/PromptTreeItem.tsx
index c253ac6..5edc9e0 100644
--- a/components/PromptTreeItem.tsx
+++ b/components/PromptTreeItem.tsx
@@ -356,7 +356,8 @@ const DocumentTreeItem: React.FC<DocumentTreeItemProps> = (props) => {
   const snippetAccentWidth = 3;
   const snippetMarginLeft = Math.max(snippetPaddingLeft - snippetAccentPadding, 0);
   const snippetAccentColor = 'rgb(var(--color-accent) / 0.45)';
-  const snippetBackgroundColor = 'rgb(var(--color-border) / 0.26)';
+  const snippetBackgroundColor =
+    'color-mix(in srgb, rgb(var(--color-background)) 82%, rgb(var(--color-text-main)) 18%)';
 
   return (
     <li