final touch

pages/collections/[id].tsx

@@ -109,7 +109,7 @@ export default function Index() {
           <div className="flex gap-3 items-start justify-between">
             <div className="flex items-center gap-2">
               <i
-                className="bi-folder2 text-3xl drop-shadow"
+                className="bi-folder-fill text-3xl drop-shadow"
                 style={{ color: activeCollection?.color }}
               ></i>
 
@@ -124,10 +124,7 @@ export default function Index() {
                 role="button"
                 className="btn btn-ghost btn-sm btn-square text-neutral"
               >
-                <i
-                  className="bi-three-dots text-xl"
-                  title="More"
-                ></i>
+                <i className="bi-three-dots text-xl" title="More"></i>
               </div>
               <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-box w-52 mt-1">
                 {permissions === true ? (

pages/collections/index.tsx

@@ -24,15 +24,17 @@ export default function Collections() {
   return (
     <MainLayout>
       <div className="p-5 flex flex-col gap-5 w-full h-full">
-        <PageHeader
-          icon={"bi-folder2"}
-          title={"Collections"}
-          description={"Collections you own"}
-        />
+        <div className="flex justify-between">
+          <PageHeader
+            icon={"bi-folder"}
+            title={"Collections"}
+            description={"Collections you own"}
+          />
 
-        <div className="flex gap-3 justify-end">
-          <div className="relative mt-2">
-            <SortDropdown sortBy={sortBy} setSort={setSortBy} />
+          <div className="flex gap-3 justify-end">
+            <div className="relative mt-2">
+              <SortDropdown sortBy={sortBy} setSort={setSortBy} />
+            </div>
           </div>
         </div>
 
@@ -48,14 +50,14 @@ export default function Collections() {
             onClick={() => setNewCollectionModal(true)}
           >
             <p className="group-hover:opacity-0 duration-100">New Collection</p>
-            <i className="bi-plus text-5xl group-hover:text-7xl group-hover:-mt-6 text-primary drop-shadow duration-100"></i>
+            <i className="bi-plus-lg text-5xl group-hover:text-7xl group-hover:-mt-6 text-primary drop-shadow duration-100"></i>
           </div>
         </div>
 
         {sortedCollections.filter((e) => e.ownerId !== data?.user.id)[0] ? (
           <>
             <div className="flex items-center gap-3 my-5">
-              <i className="bi-folder2 text-3xl sm:text-2xl text-primary drop-shadow"></i>
+              <i className="bi-folder text-3xl sm:text-2xl text-primary drop-shadow"></i>
 
               <div>
                 <p className="text-3xl capitalize font-thin">