diff --git a/enjoy/src/renderer/components/audios/audio-card.tsx b/enjoy/src/renderer/components/audios/audio-card.tsx
index 5c60afc9..b61012e6 100644
--- a/enjoy/src/renderer/components/audios/audio-card.tsx
+++ b/enjoy/src/renderer/components/audios/audio-card.tsx
@@ -2,7 +2,7 @@ import { Link } from "react-router-dom";
 import { cn } from "@renderer/lib/utils";
 
 export const AudioCard = (props: {
-  audio: ResourceType;
+  audio: AudioType;
   className?: string;
 }) => {
   const { audio, className } = props;
diff --git a/enjoy/src/renderer/pages/conversations.tsx b/enjoy/src/renderer/pages/conversations.tsx
index 5328e819..1e724e25 100644
--- a/enjoy/src/renderer/pages/conversations.tsx
+++ b/enjoy/src/renderer/pages/conversations.tsx
@@ -85,7 +85,15 @@ export default () => {
 
         {conversations.map((conversation) => (
           <Link key={conversation.id} to={`/conversations/${conversation.id}`}>
-            <div className="bg-white text-primary rounded-full w-full mb-2 p-4 hover:bg-primary hover:text-white cursor-pointer flex items-center">
+            <div
+              className="bg-white text-primary rounded-full w-full mb-2 p-4 hover:bg-primary hover:text-white cursor-pointer flex items-center"
+              style={{
+                borderLeftColor: `#${conversation.id
+                  .replaceAll("-", "")
+                  .substr(0, 6)}`,
+                borderLeftWidth: 3,
+              }}
+            >
               <div className="">
                 <MessageCircleIcon className="mr-2" />
               </div>