diff --git a/web/components/project/sidebar-list.tsx b/web/components/project/sidebar-list.tsx
index 249f044f4..289ab6122 100644
--- a/web/components/project/sidebar-list.tsx
+++ b/web/components/project/sidebar-list.tsx
@@ -11,6 +11,7 @@ import useToast from "hooks/use-toast";
 import { CreateProjectModal, ProjectSidebarListItem } from "components/project";
 // helpers
 import { copyUrlToClipboard } from "helpers/string.helper";
+import { cn } from "helpers/common.helper";
 // constants
 import { EUserWorkspaceRoles } from "constants/workspace";
 
@@ -109,9 +110,9 @@ export const ProjectSidebarList: FC = observer(() => {
       )}
       <div
         ref={containerRef}
-        className={`h-full space-y-2 overflow-y-auto pl-4 vertical-scrollbar scrollbar-md ${
-          isScrolled ? "border-t border-custom-sidebar-border-300" : ""
-        }`}
+        className={cn("h-full space-y-2 overflow-y-auto px-4 vertical-scrollbar scrollbar-md", {
+          "border-t border-custom-sidebar-border-300": isScrolled,
+        })}
       >
         <DragDropContext onDragEnd={onDragEnd}>
           <Droppable droppableId="favorite-projects">