diff --git a/front/src/components/Layout/Sidebar.jsx b/front/src/components/Layout/Sidebar.jsx
index 7492f3b..25e1bbc 100644
--- a/front/src/components/Layout/Sidebar.jsx
+++ b/front/src/components/Layout/Sidebar.jsx
@@ -81,16 +81,12 @@ function Sidebar({
                   className={`group p-3 rounded-lg cursor-pointer transition-all relative ${
                     id === currentConversationId
                       ? "bg-bg_light/80 dark:bg-bg_dark/80 text-black dark:text-white"
-                      : "text-black dark:text-white"
+                      : "text-black dark:text-white hover:bg-bg_light/50 dark:hover:bg-white/5"
                   }`}
                 >
-                  {id !== currentConversationId && (
-                    <div className="absolute inset-0 rounded-lg transition-colors hover:bg-bg_light/50 dark:hover:bg-white/5" />
-                  )}
-
                   <div className="flex items-center justify-between relative">
                     <div
-                      className="flex-1 mr-2 overflow-hidden relative"
+                      className="flex-1 overflow-hidden relative custom:group-hover:mr-2 transition-all duration-200"
                       title={conv.title}
                     >
                       <div
@@ -100,33 +96,33 @@ function Sidebar({
                             el.dataset.hasOverflow = hasOverflow.toString();
                           }
                         }}
-                        className={`relative whitespace-nowrap [&[data-has-overflow="true"]]:before:absolute [&[data-has-overflow="true"]]:before:right-0 [&[data-has-overflow="true"]]:before:content-[''] [&[data-has-overflow="true"]]:before:w-12 [&[data-has-overflow="true"]]:before:h-full [&[data-has-overflow="true"]]:before:bg-gradient-to-r [&[data-has-overflow="true"]]:before:from-transparent ${
+                        className={`relative whitespace-nowrap ${
                           id === currentConversationId
-                            ? '[&[data-has-overflow="true"]]:before:to-bg_light/80 dark:[&[data-has-overflow="true"]]:before:to-bg_dark'
-                            : '[&[data-has-overflow="true"]]:before:to-white dark:[&[data-has-overflow="true"]]:before:to-bg_secondary_dark group-hover:[&[data-has-overflow="true"]]:before:to-bg_light/50 dark:group-hover:[&[data-has-overflow="true"]]:before:to-white/5'
-                        } transition-[background-color,_border-color] duration-200`}
+                            ? 'truncate group-hover:truncate-none group-hover:[&[data-has-overflow="true"]]:before:absolute group-hover:[&[data-has-overflow="true"]]:before:right-0 group-hover:[&[data-has-overflow="true"]]:before:content-[\'\'] group-hover:[&[data-has-overflow="true"]]:before:w-full group-hover:[&[data-has-overflow="true"]]:before:h-full group-hover:[&[data-has-overflow="true"]]:before:bg-gradient-to-r group-hover:[&[data-has-overflow="true"]]:before:from-transparent group-hover:[&[data-has-overflow="true"]]:before:to-bg_light/90 dark:group-hover:[&[data-has-overflow="true"]]:before:to-bg_dark/90'
+                            : "truncate group-hover:truncate-none"
+                        } transition-all duration-200`}
                       >
                         {conv.title || "Untitled Conversation"}
                       </div>
                     </div>
-                    <button
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        onRenameConversation(id);
-                      }}
-                      className="custom:opacity-0 custom:group-hover:opacity-100 opacity-100 transition-opacity relative z-10"
-                    >
-                      <img src={edit_icon} alt="edit" className="w-5 h-5" />
-                    </button>
-                    <button
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        onDeleteConversation(id);
-                      }}
-                      className="custom:opacity-0 custom:group-hover:opacity-100 opacity-100 transition-opacity relative z-10"
-                    >
-                      <img src={cross} alt="delete" className="w-5 h-5" />
-                    </button>
+                    <div className="flex-shrink-0 flex items-center gap-2 custom:opacity-0 custom:group-hover:opacity-100 opacity-100 transition-all duration-200 w-0 custom:group-hover:w-auto">
+                      <button
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          onRenameConversation(id);
+                        }}
+                      >
+                        <img src={edit_icon} alt="edit" className="w-5 h-5" />
+                      </button>
+                      <button
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          onDeleteConversation(id);
+                        }}
+                      >
+                        <img src={cross} alt="delete" className="w-5 h-5" />
+                      </button>
+                    </div>
                   </div>
                 </div>
               );