diff --git a/components/CollectionCard.tsx b/components/CollectionCard.tsx
index 4923a01..a141313 100644
--- a/components/CollectionCard.tsx
+++ b/components/CollectionCard.tsx
@@ -59,7 +59,7 @@ export default function CollectionCard({ collection, className }: Props) {
 
   return (
     <div className="relative">
-      <div className="dropdown dropdown-bottom dropdown-end absolute top-3 right-3 z-10">
+      <div className="dropdown dropdown-bottom dropdown-end absolute top-3 right-3 z-20">
         <div
           tabIndex={0}
           role="button"
@@ -133,6 +133,46 @@ export default function CollectionCard({ collection, className }: Props) {
           </li>
         </ul>
       </div>
+      <div
+        className="flex items-center absolute bottom-3 left-3 z-10 btn px-2 btn-ghost rounded-full"
+        onClick={() =>
+          collection &&
+          setModal({
+            modal: "COLLECTION",
+            state: true,
+            method: "UPDATE",
+            isOwner: permissions === true,
+            active: collection,
+            defaultIndex: permissions === true ? 1 : 0,
+          })
+        }
+      >
+        {collectionOwner.id ? (
+          <ProfilePhoto
+            src={collectionOwner.image || undefined}
+            className="w-7 h-7"
+          />
+        ) : undefined}
+        {collection.members
+          .sort((a, b) => (a.userId as number) - (b.userId as number))
+          .map((e, i) => {
+            return (
+              <ProfilePhoto
+                key={i}
+                src={e.user.image ? e.user.image : undefined}
+                className="-ml-3"
+              />
+            );
+          })
+          .slice(0, 3)}
+        {collection.members.length - 3 > 0 ? (
+          <div className={`avatar placeholder -ml-3`}>
+            <div className="bg-base-100 text-neutral rounded-full w-8 h-8 ring-2 ring-neutral-content">
+              <span>+{collection.members.length - 3}</span>
+            </div>
+          </div>
+        ) : null}
+      </div>
       <Link
         href={`/collections/${collection.id}`}
         style={{
@@ -142,7 +182,7 @@ export default function CollectionCard({ collection, className }: Props) {
             settings.theme === "dark" ? "oklch(var(--b2))" : "oklch(var(--b2))"
           } 100%)`,
         }}
-        className="card card-compact shadow-xl hover:shadow-none duration-200 border border-neutral-content relative"
+        className="card card-compact shadow-md hover:shadow-none duration-200 border border-neutral-content"
       >
         <div className="card-body flex flex-col justify-between min-h-[12rem]">
           <div className="flex justify-between">
@@ -152,35 +192,8 @@ export default function CollectionCard({ collection, className }: Props) {
             <div className="w-8 h-8 ml-10"></div>
           </div>
 
-          <div className="flex justify-between items-center">
-            <div className="flex items-center w-full">
-              {collectionOwner.id ? (
-                <ProfilePhoto
-                  src={collectionOwner.image || undefined}
-                  className="w-7 h-7 -mr-3"
-                />
-              ) : undefined}
-              {collection.members
-                .sort((a, b) => (a.userId as number) - (b.userId as number))
-                .map((e, i) => {
-                  return (
-                    <ProfilePhoto
-                      key={i}
-                      src={e.user.image ? e.user.image : undefined}
-                      className="-mr-3"
-                    />
-                  );
-                })
-                .slice(0, 3)}
-              {collection.members.length - 3 > 0 ? (
-                <div className={`avatar placeholder -mr-3`}>
-                  <div className="bg-base-100 text-base-content rounded-full w-8 h-8 ring-2 ring-base-content">
-                    <span>+{collection.members.length - 3}</span>
-                  </div>
-                </div>
-              ) : null}
-            </div>
-            <div className="text-right w-40">
+          <div className="flex justify-end items-center">
+            <div className="text-right">
               <div className="font-bold text-sm flex justify-end gap-1 items-center">
                 {collection.isPublic ? (
                   <FontAwesomeIcon
@@ -195,9 +208,11 @@ export default function CollectionCard({ collection, className }: Props) {
                 />
                 {collection._count && collection._count.links}
               </div>
-              <div className="flex items-center justify-end gap-1 text-neutral w-full">
-                <FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
-                <p className="font-bold text-xs w-full">{formattedDate}</p>
+              <div className="flex items-center justify-end gap-1 text-neutral">
+                <p className="font-bold text-xs flex gap-1 items-center">
+                  <FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />{" "}
+                  {formattedDate}
+                </p>
               </div>
             </div>
           </div>
diff --git a/components/ProfilePhoto.tsx b/components/ProfilePhoto.tsx
index dcc9b43..721db3e 100644
--- a/components/ProfilePhoto.tsx
+++ b/components/ProfilePhoto.tsx
@@ -29,7 +29,7 @@ export default function ProfilePhoto({
 
   return !image ? (
     <div className={`avatar w-8 h-8 placeholder ${className || ""}`}>
-      <div className="bg-base-100 text-base-content rounded-full w-full h-full ring-2 ring-base-content">
+      <div className="bg-base-100 text-neutral rounded-full w-full h-full ring-2 ring-neutral-content">
         {name ? (
           <span className="text-2xl capitalize">{name.slice(0, 1)}</span>
         ) : (
@@ -42,7 +42,7 @@ export default function ProfilePhoto({
     </div>
   ) : (
     <div className={`avatar w-8 h-8 drop-shadow-md ${className || ""}`}>
-      <div className="rounded-full w-full h-full ring-2 ring-base-content">
+      <div className="rounded-full w-full h-full ring-2 ring-neutral-content">
         <Image
           alt=""
           src={image}
diff --git a/pages/collections/index.tsx b/pages/collections/index.tsx
index dc3d1c9..d39db4e 100644
--- a/pages/collections/index.tsx
+++ b/pages/collections/index.tsx
@@ -117,7 +117,7 @@ export default function Collections() {
             })}
 
           <div
-            className="p-5 bg-base-200 self-stretch border border-solid border-neutral-content min-h-[12rem] rounded-2xl cursor-pointer shadow duration-100 hover:shadow-none flex flex-col gap-4 justify-center items-center group"
+            className="card card-compact shadow-md hover:shadow-none duration-200 border border-neutral-content p-5 bg-base-200 self-stretch min-h-[12rem] rounded-2xl cursor-pointer flex flex-col gap-4 justify-center items-center group"
             onClick={() => {
               setModal({
                 modal: "COLLECTION",
diff --git a/pages/public/collections/[id].tsx b/pages/public/collections/[id].tsx
index 6060c0f..8d4c065 100644
--- a/pages/public/collections/[id].tsx
+++ b/pages/public/collections/[id].tsx
@@ -144,54 +144,53 @@ export default function PublicCollections() {
 
         <div className="mt-3">
           <div className={`min-w-[15rem]`}>
-            <div className="flex justify-center sm:justify-end items-start w-fit">
-              {collectionOwner.id ? (
-                <ProfilePhoto
-                  src={collectionOwner.image || undefined}
-                  className="w-7 h-7"
-                />
-              ) : undefined}
-              {collection.members
-                .sort((a, b) => (a.userId as number) - (b.userId as number))
-                .map((e, i) => {
-                  return (
-                    <ProfilePhoto
-                      key={i}
-                      src={e.user.image ? e.user.image : undefined}
-                      className="w-7 h-7"
-                    />
-                  );
-                })
-                .slice(0, 4)}
-              {collection?.members.length &&
-              collection.members.length - 3 > 0 ? (
-                <div className={`avatar placeholder`}>
-                  <div className="bg-base-100 text-base-content rounded-full w-8 h-8 ring-2 ring-base-content">
-                    <span>+{collection.members.length - 3}</span>
+            <div className="flex gap-1 justify-center sm:justify-end items-center w-fit">
+              <div
+                className="flex items-center btn px-2 btn-ghost rounded-full"
+                onClick={() =>
+                  setModal({
+                    modal: "COLLECTION",
+                    state: true,
+                    method: "VIEW_TEAM",
+                    isOwner: false,
+                    active: collection,
+                    defaultIndex: 0,
+                  })
+                }
+              >
+                {collectionOwner.id ? (
+                  <ProfilePhoto
+                    src={collectionOwner.image || undefined}
+                    className="w-7 h-7"
+                  />
+                ) : undefined}
+                {collection.members
+                  .sort((a, b) => (a.userId as number) - (b.userId as number))
+                  .map((e, i) => {
+                    return (
+                      <ProfilePhoto
+                        key={i}
+                        src={e.user.image ? e.user.image : undefined}
+                        className="-ml-3"
+                      />
+                    );
+                  })
+                  .slice(0, 3)}
+                {collection.members.length - 3 > 0 ? (
+                  <div className={`avatar placeholder -ml-3`}>
+                    <div className="bg-base-100 text-neutral rounded-full w-8 h-8 ring-2 ring-neutral-content">
+                      <span>+{collection.members.length - 3}</span>
+                    </div>
                   </div>
-                </div>
-              ) : null}
+                ) : null}
+              </div>
 
-              <p className="ml-3 mt-1 text-neutral text-xs">
-                By
-                <span
-                  className="btn btn-ghost btn-xs p-1"
-                  onClick={() =>
-                    setModal({
-                      modal: "COLLECTION",
-                      state: true,
-                      method: "VIEW_TEAM",
-                      isOwner: false,
-                      active: collection,
-                      defaultIndex: 0,
-                    })
-                  }
-                >
-                  {collectionOwner.name}
-                  {collection.members.length > 0
-                    ? ` and ${collection.members.length} others`
-                    : undefined}
-                </span>
+              <p className="text-neutral text-xs">
+                By {collectionOwner.name}
+                {collection.members.length > 0
+                  ? ` and ${collection.members.length} others`
+                  : undefined}
+                .
               </p>
             </div>
           </div>