diff --git a/frontend/web/src/pages/CollectionSpace.tsx b/frontend/web/src/pages/CollectionSpace.tsx
index d051b83..18e749f 100644
--- a/frontend/web/src/pages/CollectionSpace.tsx
+++ b/frontend/web/src/pages/CollectionSpace.tsx
@@ -70,20 +70,20 @@ const CollectionSpace = () => {
     <div className="w-full h-full sm:px-12 sm:py-10 sm:h-screen sm:bg-gray-100 dark:sm:bg-zinc-800">
       <div className="w-full h-full flex flex-row sm:border dark:sm:border-zinc-800 p-4 rounded-2xl bg-gray-50 dark:bg-zinc-900">
         <div className="w-full sm:w-56 sm:pr-4 flex flex-col justify-start items-start overflow-auto shrink-0">
-          <div className="w-full sticky top-0 bg-gray-50 dark:bg-zinc-900">
+          <div className="w-full sticky top-0 px-2">
             <div className="w-full flex flex-row justify-start items-center text-gray-800 dark:text-gray-300">
-              <Icon.LibrarySquare className="w-5 h-auto mr-2 opacity-70" />
-              <span className="text-lg">{collection.title}</span>
+              <Icon.LibrarySquare className="w-5 h-auto mr-1 opacity-70 shrink-0" />
+              <span className="text-lg truncate">{collection.title}</span>
             </div>
-            <p className="text-gray-500 text-sm">{collection.description}</p>
-            <Divider className="!my-2" />
+            <p className="text-gray-500 text-sm truncate">{collection.description}</p>
           </div>
+          <Divider className="!my-2" />
           <div className="w-full flex flex-col justify-start items-start gap-2 sm:gap-1 px-px">
             {shortcuts.map((shortcut) => {
               return (
                 <ShortcutView
                   className={classNames(
-                    "w-full py-2 cursor-pointer",
+                    "w-full py-2 cursor-pointer !px-2",
                     selectedShortcut?.id === shortcut.id
                       ? "bg-gray-100 dark:bg-zinc-800"
                       : "sm:border-transparent dark:sm:border-transparent"