diff --git a/client/src/components/Conversations/Convo.tsx b/client/src/components/Conversations/Convo.tsx
index c304209a72..8df0637389 100644
--- a/client/src/components/Conversations/Convo.tsx
+++ b/client/src/components/Conversations/Convo.tsx
@@ -52,7 +52,7 @@ export default function Conversation({ conversation, retainView, toggleNav, isLa
       try {
         lastSelectedTools = JSON.parse(localStorage.getItem('lastSelectedTools') ?? '') ?? [];
       } catch (e) {
-      // console.error(e);
+        // console.error(e);
       }
       navigateToConvo({ ...conversation, tools: lastSelectedTools });
     } else {
@@ -119,14 +119,13 @@ export default function Conversation({ conversation, retainView, toggleNav, isLa
     (isLatestConvo && currentConvoId === 'new' && activeConvos[0] && activeConvos[0] !== 'new');
 
   const aProps = {
-    className: `group relative rounded-lg active:opacity-50 flex cursor-pointer items-center mt-2 gap-2 break-all rounded-lg bg-gray-300 dark:bg-gray-800 py-2 px-2 ${
-      renaming ? 'pr-14' : ''
-    }`,
+    className:
+      'group relative rounded-lg active:opacity-50 flex cursor-pointer items-center mt-2 gap-2 break-all rounded-lg bg-gray-200 dark:bg-gray-800 py-2 px-2',
   };
 
   if (!activeConvo) {
     aProps.className =
-      'group relative rounded-lg active:opacity-50 flex cursor-pointer items-center mt-2 gap-2 break-all rounded-lg hover:bg-gray-200 dark:hover:bg-gray-800 py-2 px-2';
+      'group relative grow overflow-hidden whitespace-nowrap rounded-lg active:opacity-50 flex cursor-pointer items-center mt-2 gap-2 break-all rounded-lg hover:bg-gray-200 dark:hover:bg-gray-800 py-2 px-2';
   }
 
   return (
@@ -153,15 +152,17 @@ export default function Conversation({ conversation, retainView, toggleNav, isLa
           title
         )}
       </div>
-      {activeConvo && (
+      {activeConvo ? (
         <div
           className={`absolute bottom-0 right-0 top-0 w-20 rounded-r-lg bg-gradient-to-l ${
-            !renaming ? 'from-gray-300 from-60% to-transparent dark:from-gray-800' : ''
+            !renaming ? 'from-gray-200 from-60% to-transparent dark:from-gray-800' : ''
           }`}
         ></div>
+      ) : (
+        <div className="absolute bottom-0 right-0 top-0 w-2 bg-gradient-to-l from-0% to-transparent group-hover:w-1 group-hover:from-60%"></div>
       )}
-      {activeConvo && (
-        <div className="visible absolute right-1 z-10 flex from-gray-900 dark:text-gray-200">
+      {activeConvo ? (
+        <div className="visible absolute right-1 z-10 flex from-gray-900 text-gray-500 dark:text-gray-300">
           <RenameButton renaming={renaming} onRename={onRename} renameHandler={renameHandler} />
           <DeleteButton
             conversationId={conversationId}
@@ -170,6 +171,8 @@ export default function Conversation({ conversation, retainView, toggleNav, isLa
             title={title}
           />
         </div>
+      ) : (
+        <div className="absolute bottom-0 right-0 top-0 w-14 rounded-lg bg-gradient-to-l from-gray-50 from-0% to-transparent group-hover:from-gray-200 dark:from-gray-900 dark:group-hover:from-gray-800" />
       )}
     </a>
   );