diff --git a/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx b/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx
index fd8d04513480fd13449967ffd2b0b1c73b8de913..8db4cfc2dd7c3836ab87426667aa715fd4d8ff19 100644
--- a/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx
+++ b/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx
@@ -8,6 +8,7 @@ import ManageWorkspace, {
 import paths from "../../../utils/paths";
 import { useParams } from "react-router-dom";
 import { GearSix, SquaresFour } from "@phosphor-icons/react";
+import truncate from "truncate";
 
 export default function ActiveWorkspaces() {
   const { slug } = useParams();
@@ -73,7 +74,7 @@ export default function ActiveWorkspaces() {
                       isActive ? "" : "text-opacity-80"
                     }`}
                   >
-                    {workspace.name}
+                    {isActive ? truncate(workspace.name, 17) : truncate(workspace.name, 20)}
                   </p>
                 </div>
                 <button