diff --git a/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx b/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx
index da052b643..cd2959a89 100644
--- a/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx
+++ b/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useEffect } from "react";
 import * as Skeleton from "react-loading-skeleton";
 import "react-loading-skeleton/dist/skeleton.css";
 import Workspace from "@/models/workspace";
@@ -8,7 +8,6 @@ import ManageWorkspace, {
 import paths from "@/utils/paths";
 import { useParams } from "react-router-dom";
 import { GearSix, SquaresFour, UploadSimple } from "@phosphor-icons/react";
-import truncate from "truncate";
 import useUser from "@/hooks/useUser";
 import ThreadContainer from "./ThreadContainer";
 import { Link, useMatch } from "react-router-dom";
@@ -18,9 +17,6 @@ export default function ActiveWorkspaces() {
   const [loading, setLoading] = useState(true);
   const [workspaces, setWorkspaces] = useState([]);
   const [selectedWs, setSelectedWs] = useState(null);
-  const [hoverStates, setHoverStates] = useState({});
-  const [gearHover, setGearHover] = useState({});
-  const [uploadHover, setUploadHover] = useState({});
   const { showing, showModal, hideModal } = useManageWorkspaceModal();
   const { user } = useUser();
   const isInWorkspaceSettings = !!useMatch("/workspace/:slug/settings/:tab");
@@ -33,41 +29,17 @@ export default function ActiveWorkspaces() {
     }
     getWorkspaces();
   }, []);
-  const handleMouseEnter = useCallback((workspaceId) => {
-    setHoverStates((prev) => ({ ...prev, [workspaceId]: true }));
-  }, []);
-
-  const handleMouseLeave = useCallback((workspaceId) => {
-    setHoverStates((prev) => ({ ...prev, [workspaceId]: false }));
-  }, []);
-  const handleGearMouseEnter = useCallback((workspaceId) => {
-    setGearHover((prev) => ({ ...prev, [workspaceId]: true }));
-  }, []);
-
-  const handleGearMouseLeave = useCallback((workspaceId) => {
-    setGearHover((prev) => ({ ...prev, [workspaceId]: false }));
-  }, []);
-
-  const handleUploadMouseEnter = useCallback((workspaceId) => {
-    setUploadHover((prev) => ({ ...prev, [workspaceId]: true }));
-  }, []);
-
-  const handleUploadMouseLeave = useCallback((workspaceId) => {
-    setUploadHover((prev) => ({ ...prev, [workspaceId]: false }));
-  }, []);
 
   if (loading) {
     return (
-      <>
-        <Skeleton.default
-          height={36}
-          width="100%"
-          count={3}
-          baseColor="#292524"
-          highlightColor="#4c4948"
-          enableAnimation={true}
-        />
-      </>
+      <Skeleton.default
+        height={36}
+        width="100%"
+        count={3}
+        baseColor="#292524"
+        highlightColor="#4c4948"
+        enableAnimation={true}
+      />
     );
   }
 
@@ -75,81 +47,59 @@ export default function ActiveWorkspaces() {
     <div role="list" aria-label="Workspaces" className="flex flex-col gap-y-2">
       {workspaces.map((workspace) => {
         const isActive = workspace.slug === slug;
-        const isHovered = hoverStates[workspace.id];
         return (
           <div
-            className="flex flex-col w-full"
-            onMouseEnter={() => handleMouseEnter(workspace.id)}
-            onMouseLeave={() => handleMouseLeave(workspace.id)}
+            className="flex flex-col w-full group"
             key={workspace.id}
             role="listitem"
           >
-            <div
-              key={workspace.id}
-              className="flex gap-x-2 items-center justify-between"
-            >
+            <div className="flex gap-x-2 items-center justify-between">
               <a
                 href={isActive ? null : paths.workspace.chat(workspace.slug)}
                 aria-current={isActive ? "page" : ""}
                 className={`
-              transition-all duration-[200ms]
-                flex flex-grow w-[75%] gap-x-2 py-[6px] px-[12px] rounded-[4px] text-white justify-start items-center
-                hover:bg-workspace-item-selected-gradient hover:font-bold border-2 border-outline
-                ${
-                  isActive
-                    ? "bg-workspace-item-selected-gradient font-bold"
-                    : ""
-                }`}
+                  transition-all duration-[200ms]
+                  flex flex-grow w-[75%] gap-x-2 py-[6px] px-[12px] rounded-[4px] text-white justify-start items-center
+                  hover:bg-workspace-item-selected-gradient hover:font-bold border-2 border-outline
+                  ${isActive ? "bg-workspace-item-selected-gradient font-bold" : ""}
+                `}
               >
                 <div className="flex flex-row justify-between w-full">
-                  <div className="flex items-center space-x-2">
+                  <div className="flex items-center space-x-2 overflow-hidden">
                     <SquaresFour
                       weight={isActive ? "fill" : "regular"}
                       className="flex-shrink-0"
                       size={24}
                     />
                     <p
-                      className={`text-[14px] leading-loose whitespace-nowrap overflow-hidden ${
-                        isActive ? "text-white " : "text-zinc-200"
-                      }`}
+                      className={`
+                      text-[14px] leading-loose whitespace-nowrap overflow-hidden
+                      ${isActive ? "text-white" : "text-zinc-200 group-hover:w-[120px]"} truncate
+                      w-[130px] transition-all duration-200
+                    `}
                     >
-                      {isActive || isHovered
-                        ? truncate(workspace.name, 15)
-                        : truncate(workspace.name, 20)}
+                      {workspace.name}
                     </p>
                   </div>
-                  {(isActive || isHovered || gearHover[workspace.id]) &&
-                  user?.role !== "default" ? (
-                    <div className="flex items-center gap-x-[2px]">
-                      <div
-                        className={`flex hover:bg-[#646768] p-[2px] rounded-[4px] text-[#A7A8A9] hover:text-white ${
-                          uploadHover[workspace.id] ? "bg-[#646768]" : ""
-                        }`}
-                      >
-                        <button
-                          type="button"
-                          onClick={(e) => {
-                            e.preventDefault();
-                            setSelectedWs(workspace);
-                            showModal();
-                          }}
-                          onMouseEnter={() =>
-                            handleUploadMouseEnter(workspace.id)
-                          }
-                          onMouseLeave={() =>
-                            handleUploadMouseLeave(workspace.id)
-                          }
-                          className="rounded-md flex items-center justify-center ml-auto"
-                        >
-                          <UploadSimple
-                            className="h-[20px] w-[20px]"
-                            weight="bold"
-                          />
-                        </button>
-                      </div>
-
-                      <Link
+                  {user?.role !== "default" && (
+                    <div
+                      className={`flex items-center gap-x-[2px] transition-opacity duration-200 ${isActive ? "opacity-100" : "opacity-0 group-hover:opacity-100"}`}
+                    >
+                      <button
                         type="button"
+                        onClick={(e) => {
+                          e.preventDefault();
+                          setSelectedWs(workspace);
+                          showModal();
+                        }}
+                        className="rounded-md flex items-center justify-center ml-auto p-[2px] hover:bg-[#646768] text-[#A7A8A9] hover:text-white"
+                      >
+                        <UploadSimple
+                          className="h-[20px] w-[20px]"
+                          weight="bold"
+                        />
+                      </button>
+                      <Link
                         to={
                           isInWorkspaceSettings
                             ? paths.workspace.chat(workspace.slug)
@@ -157,27 +107,21 @@ export default function ActiveWorkspaces() {
                                 workspace.slug
                               )
                         }
-                        onMouseEnter={() => handleGearMouseEnter(workspace.id)}
-                        onMouseLeave={() => handleGearMouseLeave(workspace.id)}
-                        className="rounded-md flex items-center justify-center text-[#A7A8A9] hover:text-white ml-auto"
+                        className="rounded-md flex items-center justify-center text-[#A7A8A9] hover:text-white ml-auto p-[2px] hover:bg-[#646768]"
                         aria-label="General appearance settings"
                       >
-                        <div className="flex hover:bg-[#646768] p-[2px] rounded-[4px]">
-                          <GearSix
-                            color={
-                              isInWorkspaceSettings && workspace.slug === slug
-                                ? "#46C8FF"
-                                : gearHover[workspace.id]
-                                  ? "#FFFFFF"
-                                  : "#A7A8A9"
-                            }
-                            weight="bold"
-                            className="h-[20px] w-[20px]"
-                          />
-                        </div>
+                        <GearSix
+                          color={
+                            isInWorkspaceSettings && workspace.slug === slug
+                              ? "#46C8FF"
+                              : undefined
+                          }
+                          weight="bold"
+                          className="h-[20px] w-[20px]"
+                        />
                       </Link>
                     </div>
-                  ) : null}
+                  )}
                 </div>
               </a>
             </div>