diff --git a/components/LinkViews/Layouts/CardView.tsx b/components/LinkViews/Layouts/CardView.tsx
index 0da91a4..77b0a54 100644
--- a/components/LinkViews/Layouts/CardView.tsx
+++ b/components/LinkViews/Layouts/CardView.tsx
@@ -19,7 +19,6 @@ export default function CardView({
             link={e}
             count={i}
             flipDropdown={i === links.length - 1}
-            showCheckbox={showCheckbox}
             editMode={editMode}
           />
         );
diff --git a/components/LinkViews/Layouts/ListView.tsx b/components/LinkViews/Layouts/ListView.tsx
index c74b84e..1939f81 100644
--- a/components/LinkViews/Layouts/ListView.tsx
+++ b/components/LinkViews/Layouts/ListView.tsx
@@ -3,22 +3,19 @@ import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
 
 export default function ListView({
   links,
-  showCheckbox = true,
   editMode,
 }: {
   links: LinkIncludingShortenedCollectionAndTags[];
-  showCheckbox?: boolean;
   editMode?: boolean;
 }) {
   return (
-    <div className="flex flex-col">
+    <div className="flex gap-1 flex-col">
       {links.map((e, i) => {
         return (
           <LinkList
             key={i}
             link={e}
             count={i}
-            showCheckbox={showCheckbox}
             flipDropdown={i === links.length - 1}
             editMode={editMode}
           />
diff --git a/components/LinkViews/LinkCard.tsx b/components/LinkViews/LinkCard.tsx
index 2e9544b..29c7f87 100644
--- a/components/LinkViews/LinkCard.tsx
+++ b/components/LinkViews/LinkCard.tsx
@@ -24,14 +24,12 @@ type Props = {
   count: number;
   className?: string;
   flipDropdown?: boolean;
-  showCheckbox?: boolean;
   editMode?: boolean;
 };
 
 export default function LinkCard({
   link,
   flipDropdown,
-  showCheckbox = true,
   editMode,
 }: Props) {
   const { collections } = useCollectionStore();
@@ -98,143 +96,256 @@ export default function LinkCard({
 
   const [showInfo, setShowInfo] = useState(false);
 
+  const selectedStyle = selectedLinks.some((selectedLink) => selectedLink.id === link.id) ? "border-primary bg-base-300" : "border-neutral-content";
+  const selectable = editMode && (permissions === true || permissions?.canCreate || permissions?.canDelete);
+  const hoverStyles = !selectable ? "cursor-not-allowed" : "cursor-pointer";
+
   return (
     <div
       ref={ref}
-      className="border border-solid border-neutral-content bg-base-200 shadow-md hover:shadow-none duration-100 rounded-2xl relative"
+      className={`${selectedStyle} ${hoverStyles} border border-solid border-neutral-content bg-base-200 shadow-md hover:shadow-none duration-100 rounded-2xl relative`}
+      onClick={() => selectable && handleCheckboxClick(link)}
     >
-      {showCheckbox &&
-        editMode &&
-        (permissions === true ||
-          permissions?.canCreate ||
-          permissions?.canDelete) && (
-          <input
-            type="checkbox"
-            className="checkbox checkbox-primary my-auto ml-3 mt-3 absolute z-20 bg-white dark:bg-base-200"
-            checked={selectedLinks.includes(link)}
-            onChange={() => handleCheckboxClick(link)}
-          />
-        )}
-      <Link
-        href={generateLinkHref(link, account)}
-        target="_blank"
-        className="rounded-2xl cursor-pointer"
-      >
-        <div className="relative rounded-t-2xl h-40 overflow-hidden">
-          {previewAvailable(link) ? (
-            <Image
-              src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.jpeg}&preview=true`}
-              width={1280}
-              height={720}
-              alt=""
-              className="rounded-t-2xl select-none object-cover z-10 h-40 w-full shadow opacity-80 scale-105"
-              style={{ filter: "blur(2px)" }}
-              draggable="false"
-              onError={(e) => {
-                const target = e.target as HTMLElement;
-                target.style.display = "none";
-              }}
-            />
-          ) : link.preview === "unavailable" ? (
-            <div className="bg-gray-50 duration-100 h-40 bg-opacity-80"></div>
-          ) : (
-            <div className="duration-100 h-40 bg-opacity-80 skeleton rounded-none"></div>
-          )}
-          <div
-            style={
-              {
-                // background:
-                //   "radial-gradient(circle, rgba(255, 255, 255, 0.5), transparent)",
-              }
-            }
-            className="absolute top-0 left-0 right-0 bottom-0 rounded-t-2xl flex items-center justify-center shadow rounded-md"
+
+      {!editMode ? (
+        <>
+          <Link
+            href={generateLinkHref(link, account)}
+            target="_blank"
+            className="rounded-2xl cursor-pointer"
           >
-            <LinkIcon link={link} />
-          </div>
-        </div>
-
-        <hr className="divider my-0 last:hidden border-t border-neutral-content h-[1px]" />
-
-        <div className="p-3 mt-1">
-          <p className="truncate w-full pr-8 text-primary">
-            {unescapeString(link.name || link.description) || link.url}
-          </p>
-
-          <div title={link.url || ""} className="w-fit">
-            <div className="flex gap-1 item-center select-none text-neutral mt-1">
-              <i className="bi-link-45deg text-lg mt-[0.15rem] leading-none"></i>
-              <p className="text-sm truncate">{shortendURL}</p>
+            <div className="relative rounded-t-2xl h-40 overflow-hidden">
+              {previewAvailable(link) ? (
+                <Image
+                  src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.jpeg}&preview=true`}
+                  width={1280}
+                  height={720}
+                  alt=""
+                  className="rounded-t-2xl select-none object-cover z-10 h-40 w-full shadow opacity-80 scale-105"
+                  style={{ filter: "blur(2px)" }}
+                  draggable="false"
+                  onError={(e) => {
+                    const target = e.target as HTMLElement;
+                    target.style.display = "none";
+                  }}
+                />
+              ) : link.preview === "unavailable" ? (
+                <div className="bg-gray-50 duration-100 h-40 bg-opacity-80"></div>
+              ) : (
+                <div className="duration-100 h-40 bg-opacity-80 skeleton rounded-none"></div>
+              )}
+              <div
+                style={
+                  {
+                    // background:
+                    //   "radial-gradient(circle, rgba(255, 255, 255, 0.5), transparent)",
+                  }
+                }
+                className="absolute top-0 left-0 right-0 bottom-0 rounded-t-2xl flex items-center justify-center shadow rounded-md"
+              >
+                <LinkIcon link={link} />
+              </div>
             </div>
-          </div>
-        </div>
 
-        <hr className="divider mt-2 mb-1 last:hidden border-t border-neutral-content h-[1px]" />
+            <hr className="divider my-0 last:hidden border-t border-neutral-content h-[1px]" />
 
-        <div className="flex justify-between text-xs text-neutral px-3 pb-1">
-          <div className="cursor-pointer w-fit">
-            {collection ? (
-              <LinkCollection link={link} collection={collection} />
-            ) : undefined}
-          </div>
-          <LinkDate link={link} />
-        </div>
-      </Link>
+            <div className="p-3 mt-1">
+              <p className="truncate w-full pr-8 text-primary">
+                {unescapeString(link.name || link.description) || link.url}
+              </p>
 
-      {showInfo ? (
-        <div className="p-3 absolute z-30 top-0 left-0 right-0 bottom-0 bg-base-200 rounded-2xl fade-in overflow-y-auto">
-          <div
-            onClick={() => setShowInfo(!showInfo)}
-            className=" float-right btn btn-sm outline-none btn-circle btn-ghost z-10"
-          >
-            <i className="bi-x text-neutral text-2xl"></i>
-          </div>
-          <p className="text-neutral text-lg font-semibold">Description</p>
-
-          <hr className="divider my-2 last:hidden border-t border-neutral-content h-[1px]" />
-          <p>
-            {link.description ? (
-              unescapeString(link.description)
-            ) : (
-              <span className="text-neutral text-sm">
-                No description provided.
-              </span>
-            )}
-          </p>
-          {link.tags[0] ? (
-            <>
-              <p className="text-neutral text-lg mt-3 font-semibold">Tags</p>
-
-              <hr className="divider my-2 last:hidden border-t border-neutral-content h-[1px]" />
-
-              <div className="flex gap-3 items-center flex-wrap mt-2 truncate relative">
-                <div className="flex gap-1 items-center flex-wrap">
-                  {link.tags.map((e, i) => (
-                    <Link
-                      href={"/tags/" + e.id}
-                      key={i}
-                      onClick={(e) => {
-                        e.stopPropagation();
-                      }}
-                      className="btn btn-xs btn-ghost truncate max-w-[19rem]"
-                    >
-                      #{e.name}
-                    </Link>
-                  ))}
+              <div title={link.url || ""} className="w-fit">
+                <div className="flex gap-1 item-center select-none text-neutral mt-1">
+                  <i className="bi-link-45deg text-lg mt-[0.15rem] leading-none"></i>
+                  <p className="text-sm truncate">{shortendURL}</p>
                 </div>
               </div>
-            </>
-          ) : undefined}
-        </div>
-      ) : undefined}
+            </div>
 
-      <LinkActions
-        link={link}
-        collection={collection}
-        position="top-[10.75rem] right-3"
-        toggleShowInfo={() => setShowInfo(!showInfo)}
-        linkInfo={showInfo}
-        flipDropdown={flipDropdown}
-      />
+            <hr className="divider mt-2 mb-1 last:hidden border-t border-neutral-content h-[1px]" />
+
+            <div className="flex justify-between text-xs text-neutral px-3 pb-1">
+              <div className="cursor-pointer w-fit">
+                {collection && (
+                  <LinkCollection link={link} collection={collection} />
+                )}
+              </div>
+              <LinkDate link={link} />
+            </div>
+          </Link>
+
+          {showInfo && (
+            <div className="p-3 absolute z-30 top-0 left-0 right-0 bottom-0 bg-base-200 rounded-2xl fade-in overflow-y-auto">
+              <div
+                onClick={() => setShowInfo(!showInfo)}
+                className=" float-right btn btn-sm outline-none btn-circle btn-ghost z-10"
+              >
+                <i className="bi-x text-neutral text-2xl"></i>
+              </div>
+              <p className="text-neutral text-lg font-semibold">Description</p>
+
+              <hr className="divider my-2 last:hidden border-t border-neutral-content h-[1px]" />
+              <p>
+                {link.description ? (
+                  unescapeString(link.description)
+                ) : (
+                  <span className="text-neutral text-sm">
+                    No description provided.
+                  </span>
+                )}
+              </p>
+              {link.tags[0] && (
+                <>
+                  <p className="text-neutral text-lg mt-3 font-semibold">Tags</p>
+
+                  <hr className="divider my-2 last:hidden border-t border-neutral-content h-[1px]" />
+
+                  <div className="flex gap-3 items-center flex-wrap mt-2 truncate relative">
+                    <div className="flex gap-1 items-center flex-wrap">
+                      {link.tags.map((e, i) => (
+                        <Link
+                          href={"/tags/" + e.id}
+                          key={i}
+                          onClick={(e) => {
+                            e.stopPropagation();
+                          }}
+                          className="btn btn-xs btn-ghost truncate max-w-[19rem]"
+                        >
+                          #{e.name}
+                        </Link>
+                      ))}
+                    </div>
+                  </div>
+                </>
+              )}
+            </div>
+          )}
+
+          <LinkActions
+            link={link}
+            collection={collection}
+            position="top-[10.75rem] right-3"
+            toggleShowInfo={() => setShowInfo(!showInfo)}
+            linkInfo={showInfo}
+            flipDropdown={flipDropdown}
+          />
+        </>
+      ) : (
+        <>
+          <div
+            className="rounded-2xl cursor-pointer"
+          >
+            <div className="relative rounded-t-2xl h-40 overflow-hidden">
+              {previewAvailable(link) ? (
+                <Image
+                  src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.jpeg}&preview=true`}
+                  width={1280}
+                  height={720}
+                  alt=""
+                  className="rounded-t-2xl select-none object-cover z-10 h-40 w-full shadow opacity-80 scale-105"
+                  style={{ filter: "blur(2px)" }}
+                  draggable="false"
+                  onError={(e) => {
+                    const target = e.target as HTMLElement;
+                    target.style.display = "none";
+                  }}
+                />
+              ) : link.preview === "unavailable" ? (
+                <div className="bg-gray-50 duration-100 h-40 bg-opacity-80"></div>
+              ) : (
+                <div className="duration-100 h-40 bg-opacity-80 skeleton rounded-none"></div>
+              )}
+              <div
+                className="absolute top-0 left-0 right-0 bottom-0 rounded-t-2xl flex items-center justify-center shadow rounded-md"
+              >
+                <LinkIcon link={link} />
+              </div>
+            </div>
+
+            <hr className="divider my-0 last:hidden border-t border-neutral-content h-[1px]" />
+
+            <div className="p-3 mt-1">
+              <p className="truncate w-full pr-8 text-primary">
+                {unescapeString(link.name || link.description) || link.url}
+              </p>
+
+              <div title={link.url || ""} className="w-fit">
+                <div className="flex gap-1 item-center select-none text-neutral mt-1">
+                  <i className="bi-link-45deg text-lg mt-[0.15rem] leading-none"></i>
+                  <p className="text-sm truncate">{shortendURL}</p>
+                </div>
+              </div>
+            </div>
+
+            <hr className="divider mt-2 mb-1 last:hidden border-t border-neutral-content h-[1px]" />
+
+            <div className="flex justify-between text-xs text-neutral px-3 pb-1">
+              <div className="cursor-pointer w-fit">
+                {collection && (
+                  <LinkCollection link={link} collection={collection} />
+                )}
+              </div>
+              <LinkDate link={link} />
+            </div>
+          </div>
+
+          {showInfo && (
+            <div className="p-3 absolute z-30 top-0 left-0 right-0 bottom-0 bg-base-200 rounded-2xl fade-in overflow-y-auto">
+              <div
+                onClick={() => setShowInfo(!showInfo)}
+                className=" float-right btn btn-sm outline-none btn-circle btn-ghost z-10"
+              >
+                <i className="bi-x text-neutral text-2xl"></i>
+              </div>
+              <p className="text-neutral text-lg font-semibold">Description</p>
+
+              <hr className="divider my-2 last:hidden border-t border-neutral-content h-[1px]" />
+              <p>
+                {link.description ? (
+                  unescapeString(link.description)
+                ) : (
+                  <span className="text-neutral text-sm">
+                    No description provided.
+                  </span>
+                )}
+              </p>
+              {link.tags[0] && (
+                <>
+                  <p className="text-neutral text-lg mt-3 font-semibold">Tags</p>
+
+                  <hr className="divider my-2 last:hidden border-t border-neutral-content h-[1px]" />
+
+                  <div className="flex gap-3 items-center flex-wrap mt-2 truncate relative">
+                    <div className="flex gap-1 items-center flex-wrap">
+                      {link.tags.map((e, i) => (
+                        <Link
+                          href={"/tags/" + e.id}
+                          key={i}
+                          onClick={(e) => {
+                            e.stopPropagation();
+                          }}
+                          className="btn btn-xs btn-ghost truncate max-w-[19rem]"
+                        >
+                          #{e.name}
+                        </Link>
+                      ))}
+                    </div>
+                  </div>
+                </>
+              )}
+            </div>
+          )}
+
+          <LinkActions
+            link={link}
+            collection={collection}
+            position="top-[10.75rem] right-3"
+            toggleShowInfo={() => setShowInfo(!showInfo)}
+            linkInfo={showInfo}
+            flipDropdown={flipDropdown}
+          />
+        </>
+      )}
     </div>
   );
 }
diff --git a/components/LinkViews/LinkList.tsx b/components/LinkViews/LinkList.tsx
index 8467000..f359a2b 100644
--- a/components/LinkViews/LinkList.tsx
+++ b/components/LinkViews/LinkList.tsx
@@ -21,14 +21,12 @@ type Props = {
   count: number;
   className?: string;
   flipDropdown?: boolean;
-  showCheckbox?: boolean;
   editMode?: boolean;
 };
 
 export default function LinkCardCompact({
   link,
   flipDropdown,
-  showCheckbox = true,
   editMode,
 }: Props) {
   const { collections } = useCollectionStore();
@@ -78,14 +76,20 @@ export default function LinkCardCompact({
 
   const [showInfo, setShowInfo] = useState(false);
 
+  const selectedStyle = selectedLinks.some((selectedLink) => selectedLink.id === link.id) ? "border border-primary bg-base-300" : "border-transparent";
+  const selectable = editMode && (permissions === true || permissions?.canCreate || permissions?.canDelete);
+  const hoverStyles = !selectable ? "cursor-not-allowed" : "cursor-pointer";
+
   return (
     <>
       <div
-        className={`border-neutral-content relative items-center flex ${
-          !showInfo && !isPWA() ? "hover:bg-base-300 p-3" : "py-3"
-        } duration-200 rounded-lg`}
+        className={`${selectedStyle} ${hoverStyles} border relative items-center flex ${!showInfo && !isPWA()
+          ? "hover:bg-base-300 p-3"
+          : "py-3"
+          } duration-200 rounded-lg`}
+        onClick={() => selectable && handleCheckboxClick(link)}
       >
-        {showCheckbox &&
+        {/* {showCheckbox &&
           editMode &&
           (permissions === true ||
             permissions?.canCreate ||
@@ -98,96 +102,142 @@ export default function LinkCardCompact({
               )}
               onChange={() => handleCheckboxClick(link)}
             />
-          )}
-        <Link
-          href={generateLinkHref(link, account)}
-          target="_blank"
-          className="flex items-center cursor-pointer"
-        >
-          <div className="shrink-0">
-            <LinkIcon link={link} width="sm:w-12 w-8 mt-1 sm:mt-0" />
-          </div>
-
-          <div className="w-[calc(100%-56px)] ml-2">
-            <p className="line-clamp-1 mr-8 text-primary">
-              {unescapeString(link.name || link.description) || link.url}
-            </p>
-
-            <div className="mt-1 flex flex-col sm:flex-row sm:items-center gap-2 text-xs text-neutral">
-              <div className="flex items-center gap-x-3 w-fit text-neutral flex-wrap">
-                {collection ? (
-                  <LinkCollection link={link} collection={collection} />
-                ) : undefined}
-                {link.url ? (
-                  <div className="flex items-center gap-1 w-fit text-neutral truncate">
-                    <i className="bi-link-45deg text-lg" />
-                    <p className="truncate w-full">{shortendURL}</p>
-                  </div>
-                ) : (
-                  <div className="badge badge-primary badge-sm my-1">
-                    {link.type}
-                  </div>
-                )}
-                <LinkDate link={link} />
+          )} */}
+        {!editMode ? (
+          <>
+            <Link
+              href={generateLinkHref(link, account)}
+              target="_blank"
+              className="flex items-center cursor-pointer"
+            >
+              <div className="shrink-0">
+                <LinkIcon link={link} width="sm:w-12 w-8 mt-1 sm:mt-0" />
               </div>
-            </div>
-          </div>
-        </Link>
 
-        <LinkActions
-          link={link}
-          collection={collection}
-          position="top-3 right-3"
-          flipDropdown={flipDropdown}
-          // toggleShowInfo={() => setShowInfo(!showInfo)}
-          // linkInfo={showInfo}
-        />
-        {showInfo ? (
-          <div>
-            <div className="pb-3 mt-1 px-3">
-              <p className="text-neutral text-lg font-semibold">Description</p>
+              <div className="w-[calc(100%-56px)] ml-2">
+                <p className="line-clamp-1 mr-8 text-primary">
+                  {unescapeString(link.name || link.description) || link.url}
+                </p>
 
-              <hr className="divider my-2 last:hidden border-t border-neutral-content h-[1px]" />
-              <p>
-                {link.description ? (
-                  unescapeString(link.description)
-                ) : (
-                  <span className="text-neutral text-sm">
-                    No description provided.
-                  </span>
-                )}
-              </p>
-              {link.tags[0] ? (
-                <>
-                  <p className="text-neutral text-lg mt-3 font-semibold">
-                    Tags
-                  </p>
+                <div className="mt-1 flex flex-col sm:flex-row sm:items-center gap-2 text-xs text-neutral">
+                  <div className="flex items-center gap-x-3 w-fit text-neutral flex-wrap">
+                    {collection && (
+                      <LinkCollection link={link} collection={collection} />
+                    )}
+                    {link.url ? (
+                      <div className="flex items-center gap-1 w-fit text-neutral truncate">
+                        <i className="bi-link-45deg text-lg" />
+                        <p className="truncate w-full">{shortendURL}</p>
+                      </div>
+                    ) : (
+                      <div className="badge badge-primary badge-sm my-1">
+                        {link.type}
+                      </div>
+                    )}
+                    <LinkDate link={link} />
+                  </div>
+                </div>
+              </div>
+            </Link>
+            <LinkActions
+              link={link}
+              collection={collection}
+              position="top-3 right-3"
+              flipDropdown={flipDropdown}
+            // toggleShowInfo={() => setShowInfo(!showInfo)}
+            // linkInfo={showInfo}
+            />
+            {showInfo && (
+              <div>
+                <div className="pb-3 mt-1 px-3">
+                  <p className="text-neutral text-lg font-semibold">Description</p>
 
                   <hr className="divider my-2 last:hidden border-t border-neutral-content h-[1px]" />
+                  <p>
+                    {link.description ? (
+                      unescapeString(link.description)
+                    ) : (
+                      <span className="text-neutral text-sm">
+                        No description provided.
+                      </span>
+                    )}
+                  </p>
+                  {link.tags[0] && (
+                    <>
+                      <p className="text-neutral text-lg mt-3 font-semibold">
+                        Tags
+                      </p>
 
-                  <div className="flex gap-3 items-center flex-wrap mt-2 truncate relative">
-                    <div className="flex gap-1 items-center flex-wrap">
-                      {link.tags.map((e, i) => (
-                        <Link
-                          href={"/tags/" + e.id}
-                          key={i}
-                          onClick={(e) => {
-                            e.stopPropagation();
-                          }}
-                          className="btn btn-xs btn-ghost truncate max-w-[19rem]"
-                        >
-                          #{e.name}
-                        </Link>
-                      ))}
+                      <hr className="divider my-2 last:hidden border-t border-neutral-content h-[1px]" />
+
+                      <div className="flex gap-3 items-center flex-wrap mt-2 truncate relative">
+                        <div className="flex gap-1 items-center flex-wrap">
+                          {link.tags.map((e, i) => (
+                            <Link
+                              href={"/tags/" + e.id}
+                              key={i}
+                              onClick={(e) => {
+                                e.stopPropagation();
+                              }}
+                              className="btn btn-xs btn-ghost truncate max-w-[19rem]"
+                            >
+                              #{e.name}
+                            </Link>
+                          ))}
+                        </div>
+                      </div>
+                    </>
+                  )}
+                </div>
+              </div>
+            )}
+          </>
+        ) :
+          (
+            <>
+              <div
+                className="flex items-center cursor-pointer"
+              >
+                <div className="shrink-0">
+                  <LinkIcon link={link} width="sm:w-12 w-8 mt-1 sm:mt-0" />
+                </div>
+
+                <div className="w-[calc(100%-56px)] ml-2">
+                  <p className="line-clamp-1 mr-8 text-primary select-none">
+                    {unescapeString(link.name || link.description) || link.url}
+                  </p>
+
+                  <div className="mt-1 flex flex-col sm:flex-row sm:items-center gap-2 text-xs text-neutral">
+                    <div className="flex items-center gap-x-3 w-fit text-neutral flex-wrap">
+                      {collection ? (
+                        <LinkCollection link={link} collection={collection} />
+                      ) : undefined}
+                      {link.url ? (
+                        <div className="flex items-center gap-1 w-fit text-neutral truncate">
+                          <i className="bi-link-45deg text-lg" />
+                          <p className="truncate w-full select-none">{shortendURL}</p>
+                        </div>
+                      ) : (
+                        <div className="badge badge-primary badge-sm my-1 select-none">
+                          {link.type}
+                        </div>
+                      )}
+                      <LinkDate link={link} />
                     </div>
                   </div>
-                </>
-              ) : undefined}
-            </div>
-          </div>
-        ) : undefined}
+                </div>
+              </div>
+              <LinkActions
+                link={link}
+                collection={collection}
+                position="top-3 right-3"
+                flipDropdown={flipDropdown}
+              // toggleShowInfo={() => setShowInfo(!showInfo)}
+              // linkInfo={showInfo}
+              />
+            </>
+          )}
       </div>
-
       <div className="divider my-0 last:hidden h-[1px]"></div>
     </>
   );
diff --git a/pages/collections/[id].tsx b/pages/collections/[id].tsx
index 81398d7..2d58286 100644
--- a/pages/collections/[id].tsx
+++ b/pages/collections/[id].tsx
@@ -329,7 +329,7 @@ export default function Index() {
           </div>
         </div>
 
-        <div className={!editMode ? "w-full flex justify-end items-center min-h-[32px]" : "w-full flex justify-between items-center min-h-[32px]"}>
+        <div className={editMode ? "w-full flex justify-between items-center min-h-[32px]" : "w-full flex justify-end items-center min-h-[32px]"}>
           {links.length > 0 && editMode && (
             <div className="flex gap-3 ml-3">
               <input
@@ -355,7 +355,7 @@ export default function Index() {
               <button
                 onClick={() => setBulkEditLinksModal(true)}
                 className="btn btn-sm btn-accent  text-white w-fit ml-auto"
-                disabled={!editMode}
+                disabled={!editMode || selectedLinks.length === 0}
               >
                 Edit
               </button>
@@ -368,7 +368,7 @@ export default function Index() {
                     ? bulkDeleteLinks()
                     : setBulkDeleteLinksModal(true);
                 }}
-                disabled={!editMode}
+                disabled={!editMode || selectedLinks.length === 0}
                 className="btn btn-sm bg-red-400 hover:bg-red-500 text-white w-fit ml-auto"
               >
                 Delete
diff --git a/pages/links/index.tsx b/pages/links/index.tsx
index c74faf5..e936500 100644
--- a/pages/links/index.tsx
+++ b/pages/links/index.tsx
@@ -101,7 +101,7 @@ export default function Links() {
           </div>
         </div>
 
-        <div className={!editMode ? "w-full flex justify-end items-center min-h-[32px]" : "w-full flex justify-between items-center min-h-[32px]"}>
+        <div className={editMode ? "w-full flex justify-between items-center min-h-[32px]" : "w-full flex justify-end items-center min-h-[32px]"}>
           {links.length > 0 && editMode && (
             <div className="flex gap-3 ml-3">
               <input
diff --git a/pages/links/pinned.tsx b/pages/links/pinned.tsx
index f32a8d2..f456653 100644
--- a/pages/links/pinned.tsx
+++ b/pages/links/pinned.tsx
@@ -29,7 +29,7 @@ export default function PinnedLinks() {
   const [bulkEditLinksModal, setBulkEditLinksModal] = useState(false);
   const [editMode, setEditMode] = useState(false);
   const collectivePermissions = useCollectivePermissions(
-    selectedLinks.map((link) => link.collectionId as number)
+    links.map((link) => link.collectionId as number)
   );
 
   useLinks({ sort: sortBy });
@@ -44,8 +44,7 @@ export default function PinnedLinks() {
 
   const bulkDeleteLinks = async () => {
     const load = toast.loading(
-      `Deleting ${selectedLinks.length} Link${
-        selectedLinks.length > 1 ? "s" : ""
+      `Deleting ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : ""
       }...`
     );
 
@@ -57,8 +56,7 @@ export default function PinnedLinks() {
 
     response.ok &&
       toast.success(
-        `Deleted ${selectedLinks.length} Link${
-          selectedLinks.length > 1 ? "s" : ""
+        `Deleted ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : ""
         }!`
       );
   };
@@ -82,18 +80,17 @@ export default function PinnedLinks() {
             description={"Pinned Links from your Collections"}
           />
           <div className="mt-2 flex items-center justify-end gap-2">
-            {links.length > 0 && (
+            {!(links.length === 0) && (
               <div
                 role="button"
                 onClick={() => {
                   setEditMode(!editMode);
                   setSelectedLinks([]);
                 }}
-                className={`btn btn-square btn-sm btn-ghost ${
-                  editMode
-                    ? "bg-primary/20 hover:bg-primary/20"
-                    : "hover:bg-neutral/20"
-                }`}
+                className={`btn btn-square btn-sm btn-ghost ${editMode
+                  ? "bg-primary/20 hover:bg-primary/20"
+                  : "hover:bg-neutral/20"
+                  }`}
               >
                 <i className="bi-pencil-fill text-neutral text-xl"></i>
               </div>
@@ -103,57 +100,53 @@ export default function PinnedLinks() {
           </div>
         </div>
 
-        {editMode && (
-          <div className="w-full flex justify-between items-center min-h-[32px]">
-            {links.length > 0 && (
-              <div className="flex gap-3 ml-3">
-                <input
-                  type="checkbox"
-                  className="checkbox checkbox-primary"
-                  onChange={() => handleSelectAll()}
-                  checked={
-                    selectedLinks.length === links.length && links.length > 0
-                  }
-                />
-                {selectedLinks.length > 0 ? (
-                  <span>
-                    {selectedLinks.length}{" "}
-                    {selectedLinks.length === 1 ? "link" : "links"} selected
-                  </span>
-                ) : (
-                  <span>Nothing selected</span>
-                )}
-              </div>
-            )}
-            <div className="flex gap-3">
-              {selectedLinks.length > 0 &&
-                (collectivePermissions === true ||
-                  collectivePermissions?.canUpdate) && (
-                  <button
-                    onClick={() => setBulkEditLinksModal(true)}
-                    className="btn btn-sm btn-accent dark:border-violet-400 text-white w-fit ml-auto"
-                  >
-                    Edit
-                  </button>
-                )}
-              {selectedLinks.length > 0 &&
-                (collectivePermissions === true ||
-                  collectivePermissions?.canDelete) && (
-                  <button
-                    onClick={(e) => {
-                      (document?.activeElement as HTMLElement)?.blur();
-                      e.shiftKey
-                        ? bulkDeleteLinks()
-                        : setBulkDeleteLinksModal(true);
-                    }}
-                    className="btn btn-sm bg-red-400 border-red-400 hover:border-red-500 hover:bg-red-500 text-white w-fit ml-auto"
-                  >
-                    Delete
-                  </button>
-                )}
+        <div className={editMode ? "w-full flex justify-between items-center min-h-[32px]" : "w-full flex justify-end items-center min-h-[32px]"}>
+          {links.length > 0 && editMode && (
+            <div className="flex gap-3 ml-3">
+              <input
+                type="checkbox"
+                className="checkbox checkbox-primary"
+                onChange={() => handleSelectAll()}
+                checked={
+                  selectedLinks.length === links.length && links.length > 0
+                }
+              />
+              {selectedLinks.length > 0 ? (
+                <span>
+                  {selectedLinks.length}{" "}
+                  {selectedLinks.length === 1 ? "link" : "links"} selected
+                </span>
+              ) : (
+                <span>Nothing selected</span>
+              )}
             </div>
+          )}
+          <div className="flex gap-3">
+            {(collectivePermissions === true || collectivePermissions?.canUpdate) && (
+              <button
+                onClick={() => setBulkEditLinksModal(true)}
+                className="btn btn-sm btn-accent  text-white w-fit ml-auto"
+                disabled={!editMode || selectedLinks.length === 0}
+              >
+                Edit
+              </button>
+            )}
+            {(collectivePermissions === true || collectivePermissions?.canDelete) && (
+              <button
+                onClick={(e) => {
+                  (document?.activeElement as HTMLElement)?.blur();
+                  e.shiftKey
+                    ? bulkDeleteLinks()
+                    : setBulkDeleteLinksModal(true);
+                }}
+                disabled={!editMode || selectedLinks.length === 0}
+                className="btn btn-sm bg-red-400 hover:bg-red-500 text-white w-fit ml-auto"
+              >
+                Delete
+              </button>
+            )}
           </div>
-        )}
+        </div>
 
         {links.some((e) => e.pinnedBy && e.pinnedBy[0]) ? (
           <LinkComponent editMode={editMode} links={links} />