diff --git a/components/CollectionCard.tsx b/components/CollectionCard.tsx
index fcea927..e2b85f8 100644
--- a/components/CollectionCard.tsx
+++ b/components/CollectionCard.tsx
@@ -65,29 +65,26 @@ export default function CollectionCard({ collection, className }: Props) {
           role="button"
           className="btn btn-ghost btn-sm btn-square text-neutral"
         >
-          <FontAwesomeIcon
-            icon={faEllipsis}
-            title="More"
-            className="w-5 h-5"
-            id={"expand-dropdown" + collection.id}
-          />
+          <FontAwesomeIcon icon={faEllipsis} title="More" className="w-5 h-5" />
         </div>
-        <ul className="dropdown-content z-[1] menu p-2 shadow bg-base-200 border border-neutral-content rounded-box w-52 mt-1">
+        <ul className="dropdown-content z-[1] menu p-1 shadow bg-base-200 border border-neutral-content rounded-xl w-44 mt-1">
           {permissions === true ? (
             <li>
               <div
+                className="px-2 py-1 rounded-lg"
                 role="button"
                 tabIndex={0}
-                onClick={() =>
+                onClick={() => {
+                  (document?.activeElement as HTMLElement)?.blur();
                   collection &&
-                  setModal({
-                    modal: "COLLECTION",
-                    state: true,
-                    method: "UPDATE",
-                    isOwner: permissions === true,
-                    active: collection,
-                  })
-                }
+                    setModal({
+                      modal: "COLLECTION",
+                      state: true,
+                      method: "UPDATE",
+                      isOwner: permissions === true,
+                      active: collection,
+                    });
+                }}
               >
                 Edit Collection Info
               </div>
@@ -95,38 +92,42 @@ export default function CollectionCard({ collection, className }: Props) {
           ) : undefined}
           <li>
             <div
+              className="px-2 py-1 rounded-lg"
               role="button"
               tabIndex={0}
-              onClick={() =>
+              onClick={() => {
+                (document?.activeElement as HTMLElement)?.blur();
                 collection &&
-                setModal({
-                  modal: "COLLECTION",
-                  state: true,
-                  method: "UPDATE",
-                  isOwner: permissions === true,
-                  active: collection,
-                  defaultIndex: permissions === true ? 1 : 0,
-                })
-              }
+                  setModal({
+                    modal: "COLLECTION",
+                    state: true,
+                    method: "UPDATE",
+                    isOwner: permissions === true,
+                    active: collection,
+                    defaultIndex: permissions === true ? 1 : 0,
+                  });
+              }}
             >
               {permissions === true ? "Share and Collaborate" : "View Team"}
             </div>
           </li>
           <li>
             <div
+              className="px-2 py-1 rounded-lg"
               role="button"
               tabIndex={0}
-              onClick={() =>
+              onClick={() => {
+                (document?.activeElement as HTMLElement)?.blur();
                 collection &&
-                setModal({
-                  modal: "COLLECTION",
-                  state: true,
-                  method: "UPDATE",
-                  isOwner: permissions === true,
-                  active: collection,
-                  defaultIndex: permissions === true ? 2 : 1,
-                })
-              }
+                  setModal({
+                    modal: "COLLECTION",
+                    state: true,
+                    method: "UPDATE",
+                    isOwner: permissions === true,
+                    active: collection,
+                    defaultIndex: permissions === true ? 2 : 1,
+                  });
+              }}
             >
               {permissions === true ? "Delete Collection" : "Leave Collection"}
             </div>
diff --git a/components/FilterSearchDropdown.tsx b/components/FilterSearchDropdown.tsx
index a137017..76b1672 100644
--- a/components/FilterSearchDropdown.tsx
+++ b/components/FilterSearchDropdown.tsx
@@ -1,9 +1,8 @@
-import React, { SetStateAction } from "react";
-import ClickAwayHandler from "./ClickAwayHandler";
-import Checkbox from "./Checkbox";
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faFilter } from "@fortawesome/free-solid-svg-icons";
 
 type Props = {
-  setFilterDropdown: (value: SetStateAction<boolean>) => void;
   setSearchFilter: Function;
   searchFilter: {
     name: boolean;
@@ -15,62 +14,123 @@ type Props = {
 };
 
 export default function FilterSearchDropdown({
-  setFilterDropdown,
   setSearchFilter,
   searchFilter,
 }: Props) {
   return (
-    <ClickAwayHandler
-      onClickOutside={(e: Event) => {
-        const target = e.target as HTMLInputElement;
-        if (target.id !== "filter-dropdown") setFilterDropdown(false);
-      }}
-      className="absolute top-8 right-0 border border-neutral-content shadow-md bg-base-200 rounded-md p-2 z-20 w-40"
-    >
-      <p className="mb-2 text-center font-semibold">Filter by</p>
-      <div className="flex flex-col gap-2">
-        <Checkbox
-          label="Name"
-          state={searchFilter.name}
-          onClick={() =>
-            setSearchFilter({ ...searchFilter, name: !searchFilter.name })
-          }
-        />
-        <Checkbox
-          label="Link"
-          state={searchFilter.url}
-          onClick={() =>
-            setSearchFilter({ ...searchFilter, url: !searchFilter.url })
-          }
-        />
-        <Checkbox
-          label="Description"
-          state={searchFilter.description}
-          onClick={() =>
-            setSearchFilter({
-              ...searchFilter,
-              description: !searchFilter.description,
-            })
-          }
-        />
-        <Checkbox
-          label="Full Content"
-          state={searchFilter.textContent}
-          onClick={() =>
-            setSearchFilter({
-              ...searchFilter,
-              textContent: !searchFilter.textContent,
-            })
-          }
-        />
-        <Checkbox
-          label="Tags"
-          state={searchFilter.tags}
-          onClick={() =>
-            setSearchFilter({ ...searchFilter, tags: !searchFilter.tags })
-          }
+    <div className="dropdown dropdown-bottom dropdown-end">
+      <div
+        tabIndex={0}
+        role="button"
+        className="btn btn-sm btn-square btn-ghost"
+      >
+        <FontAwesomeIcon
+          icon={faFilter}
+          id="sort-dropdown"
+          className="w-5 h-5 text-neutral"
         />
       </div>
-    </ClickAwayHandler>
+      <ul className="dropdown-content z-[30] menu p-1 shadow bg-base-200 border border-neutral-content rounded-xl w-52 mt-1">
+        <li>
+          <label
+            className="label cursor-pointer flex justify-start px-2 py-1 rounded-lg"
+            tabIndex={0}
+            role="button"
+          >
+            <input
+              type="checkbox"
+              name="search-filter-checkbox"
+              className="checkbox checkbox-primary [--chkfg:white]"
+              checked={searchFilter.name}
+              onChange={() => {
+                setSearchFilter({ ...searchFilter, name: !searchFilter.name });
+              }}
+            />
+            <span className="label-text">Name</span>
+          </label>
+        </li>
+        <li>
+          <label
+            className="label cursor-pointer flex justify-start px-2 py-1 rounded-lg"
+            tabIndex={0}
+            role="button"
+          >
+            <input
+              type="checkbox"
+              name="search-filter-checkbox"
+              className="checkbox checkbox-primary [--chkfg:white]"
+              checked={searchFilter.url}
+              onChange={() => {
+                setSearchFilter({ ...searchFilter, url: !searchFilter.url });
+              }}
+            />
+            <span className="label-text">Link</span>
+          </label>
+        </li>
+        <li>
+          <label
+            className="label cursor-pointer flex justify-start px-2 py-1 rounded-lg"
+            tabIndex={0}
+            role="button"
+          >
+            <input
+              type="checkbox"
+              name="search-filter-checkbox"
+              className="checkbox checkbox-primary [--chkfg:white]"
+              checked={searchFilter.description}
+              onChange={() => {
+                setSearchFilter({
+                  ...searchFilter,
+                  description: !searchFilter.description,
+                });
+              }}
+            />
+            <span className="label-text">Description</span>
+          </label>
+        </li>
+        <li>
+          <label
+            className="label cursor-pointer flex justify-start px-2 py-1 rounded-lg"
+            tabIndex={0}
+            role="button"
+          >
+            <input
+              type="checkbox"
+              name="search-filter-checkbox"
+              className="checkbox checkbox-primary [--chkfg:white]"
+              checked={searchFilter.textContent}
+              onChange={() => {
+                setSearchFilter({
+                  ...searchFilter,
+                  textContent: !searchFilter.textContent,
+                });
+              }}
+            />
+            <span className="label-text">Full Content</span>
+          </label>
+        </li>
+        <li>
+          <label
+            className="label cursor-pointer flex justify-start px-2 py-1 rounded-lg"
+            tabIndex={0}
+            role="button"
+          >
+            <input
+              type="checkbox"
+              name="search-filter-checkbox"
+              className="checkbox checkbox-primary [--chkfg:white]"
+              checked={searchFilter.tags}
+              onChange={() => {
+                setSearchFilter({
+                  ...searchFilter,
+                  tags: !searchFilter.tags,
+                });
+              }}
+            />
+            <span className="label-text">Tags</span>
+          </label>
+        </li>
+      </ul>
+    </div>
   );
 }
diff --git a/components/LinkCard.tsx b/components/LinkCard.tsx
index 9d49342..0fdc1f9 100644
--- a/components/LinkCard.tsx
+++ b/components/LinkCard.tsx
@@ -142,24 +142,94 @@ export default function LinkCard({ link, count, className }: Props) {
           className || ""
         }`}
       >
-        {(permissions === true ||
-          permissions?.canUpdate ||
-          permissions?.canDelete) && (
-          <div
-            onClick={(e) => {
-              setExpandDropdown({ x: e.clientX, y: e.clientY });
-            }}
-            id={"expand-dropdown" + link.id}
-            className="btn btn-ghost btn-sm btn-square absolute right-4 top-4 z-10"
-          >
-            <FontAwesomeIcon
-              icon={faEllipsis}
-              title="More"
-              className="w-5 h-5"
-              id={"expand-dropdown" + link.id}
-            />
+        {permissions === true ||
+        permissions?.canUpdate ||
+        permissions?.canDelete ? (
+          <div className="dropdown dropdown-left dropdown-start absolute top-3 right-3 z-20">
+            <div
+              tabIndex={0}
+              role="button"
+              className="btn btn-ghost btn-sm btn-square text-neutral"
+            >
+              <FontAwesomeIcon
+                icon={faEllipsis}
+                title="More"
+                className="w-5 h-5"
+                id={"expand-dropdown" + collection.id}
+              />
+            </div>
+            <ul className="dropdown-content z-[1] menu p-1 shadow bg-base-200 border border-neutral-content rounded-xl w-40 mr-1">
+              {permissions === true ? (
+                <li>
+                  <div
+                    role="button"
+                    className="px-2 py-1 rounded-lg"
+                    tabIndex={0}
+                    onClick={() => {
+                      (document?.activeElement as HTMLElement)?.blur();
+                      pinLink();
+                    }}
+                  >
+                    {link?.pinnedBy && link.pinnedBy[0]
+                      ? "Unpin"
+                      : "Pin to Dashboard"}
+                  </div>
+                </li>
+              ) : undefined}
+              {permissions === true || permissions?.canUpdate ? (
+                <li>
+                  <div
+                    role="button"
+                    className="px-2 py-1 rounded-lg"
+                    tabIndex={0}
+                    onClick={() => {
+                      (document?.activeElement as HTMLElement)?.blur();
+                      collection &&
+                        setModal({
+                          modal: "LINK",
+                          state: true,
+                          method: "UPDATE",
+                          active: link,
+                        });
+                    }}
+                  >
+                    Edit
+                  </div>
+                </li>
+              ) : undefined}
+              {permissions === true ? (
+                <li>
+                  <div
+                    role="button"
+                    className="px-2 py-1 rounded-lg"
+                    tabIndex={0}
+                    onClick={() => {
+                      (document?.activeElement as HTMLElement)?.blur();
+                      updateArchive();
+                    }}
+                  >
+                    Refresh Link
+                  </div>
+                </li>
+              ) : undefined}
+              {permissions === true || permissions?.canDelete ? (
+                <li>
+                  <div
+                    role="button"
+                    className="px-2 py-1 rounded-lg"
+                    tabIndex={0}
+                    onClick={() => {
+                      (document?.activeElement as HTMLElement)?.blur();
+                      deleteLink();
+                    }}
+                  >
+                    Delete
+                  </div>
+                </li>
+              ) : undefined}
+            </ul>
           </div>
-        )}
+        ) : undefined}
 
         <div
           onClick={() => router.push("/links/" + link.id)}
@@ -244,54 +314,6 @@ export default function LinkCard({ link, count, className }: Props) {
           </div>
         </div>
       </div>
-      {expandDropdown ? (
-        <Dropdown
-          points={{ x: expandDropdown.x, y: expandDropdown.y }}
-          items={[
-            permissions === true
-              ? {
-                  name:
-                    link?.pinnedBy && link.pinnedBy[0]
-                      ? "Unpin"
-                      : "Pin to Dashboard",
-                  onClick: pinLink,
-                }
-              : undefined,
-            permissions === true || permissions?.canUpdate
-              ? {
-                  name: "Edit",
-                  onClick: () => {
-                    setModal({
-                      modal: "LINK",
-                      state: true,
-                      method: "UPDATE",
-                      active: link,
-                    });
-                    setExpandDropdown(false);
-                  },
-                }
-              : undefined,
-            permissions === true
-              ? {
-                  name: "Refresh Link",
-                  onClick: updateArchive,
-                }
-              : undefined,
-            permissions === true || permissions?.canDelete
-              ? {
-                  name: "Delete",
-                  onClick: deleteLink,
-                }
-              : undefined,
-          ]}
-          onClickOutside={(e: Event) => {
-            const target = e.target as HTMLInputElement;
-            if (target.id !== "expand-dropdown" + link.id)
-              setExpandDropdown(false);
-          }}
-          className="w-40"
-        />
-      ) : null}
     </>
   );
 }
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 5e58daa..d17c3d1 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -75,10 +75,14 @@ export default function Navbar() {
               <FontAwesomeIcon icon={faCaretDown} className="w-3 h-3" />
             </div>
           </div>
-          <ul className="dropdown-content z-[1] menu p-2 shadow bg-base-200 border border-neutral-content rounded-box w-40 mt-1">
+          <ul className="dropdown-content z-[1] menu p-1 shadow bg-base-200 border border-neutral-content rounded-xl w-32 mt-1">
             <li>
               <div
-                onClick={() => setNewLinkModalIsOpen(true)}
+                className="px-2 py-1 rounded-lg"
+                onClick={() => {
+                  (document?.activeElement as HTMLElement)?.blur();
+                  setNewLinkModalIsOpen(true);
+                }}
                 tabIndex={0}
                 role="button"
               >
@@ -87,7 +91,11 @@ export default function Navbar() {
             </li>
             <li>
               <div
-                onClick={() => setNewCollectionModalIsOpen(true)}
+                className="px-2 py-1 rounded-lg"
+                onClick={() => {
+                  (document?.activeElement as HTMLElement)?.blur();
+                  setNewCollectionModalIsOpen(true);
+                }}
                 tabIndex={0}
                 role="button"
               >
@@ -105,19 +113,41 @@ export default function Navbar() {
               className=""
             />
           </div>
-          <ul className="dropdown-content z-[1] menu p-2 shadow bg-base-200 border border-neutral-content rounded-box w-52 mt-1">
+          <ul className="dropdown-content z-[1] menu p-1 shadow bg-base-200 border border-neutral-content rounded-xl w-40 mt-1">
             <li>
-              <Link href="/settings/account" tabIndex={0} role="button">
+              <Link
+                className="px-2 py-1 rounded-lg"
+                href="/settings/account"
+                onClick={() => (document?.activeElement as HTMLElement)?.blur()}
+                tabIndex={0}
+                role="button"
+              >
                 Settings
               </Link>
             </li>
             <li>
-              <div onClick={handleToggle} tabIndex={0} role="button">
+              <div
+                className="px-2 py-1 rounded-lg"
+                onClick={() => {
+                  (document?.activeElement as HTMLElement)?.blur();
+                  handleToggle();
+                }}
+                tabIndex={0}
+                role="button"
+              >
                 Switch to {settings.theme === "light" ? "Dark" : "Light"}
               </div>
             </li>
             <li>
-              <div onClick={() => signOut()} tabIndex={0} role="button">
+              <div
+                className="px-2 py-1 rounded-lg"
+                onClick={() => {
+                  (document?.activeElement as HTMLElement)?.blur();
+                  signOut();
+                }}
+                tabIndex={0}
+                role="button"
+              >
                 Logout
               </div>
             </li>
diff --git a/components/SortDropdown.tsx b/components/SortDropdown.tsx
index 4522b30..77b4758 100644
--- a/components/SortDropdown.tsx
+++ b/components/SortDropdown.tsx
@@ -14,7 +14,7 @@ export default function SortDropdown({ sortBy, setSort }: Props) {
       <div
         tabIndex={0}
         role="button"
-        className="btn btn-sm btn-square btn-ghost m-1"
+        className="btn btn-sm btn-square btn-ghost"
       >
         <FontAwesomeIcon
           icon={faSort}
@@ -22,10 +22,10 @@ export default function SortDropdown({ sortBy, setSort }: Props) {
           className="w-5 h-5 text-neutral"
         />
       </div>
-      <ul className="dropdown-content z-[20] menu p-2 shadow bg-base-200 border border-neutral-content rounded-box w-52">
+      <ul className="dropdown-content z-[30] menu p-1 shadow bg-base-200 border border-neutral-content rounded-xl w-52 mt-1">
         <li>
           <label
-            className="label cursor-pointer flex justify-start"
+            className="label cursor-pointer flex justify-start px-2 py-1 rounded-lg"
             tabIndex={0}
             role="button"
           >
@@ -35,14 +35,16 @@ export default function SortDropdown({ sortBy, setSort }: Props) {
               className="radio checked:bg-primary"
               value="Date (Newest First)"
               checked={sortBy === Sort.DateNewestFirst}
-              onChange={() => setSort(Sort.DateNewestFirst)}
+              onChange={() => {
+                setSort(Sort.DateNewestFirst);
+              }}
             />
             <span className="label-text">Date (Newest First)</span>
           </label>
         </li>
         <li>
           <label
-            className="label cursor-pointer flex justify-start"
+            className="label cursor-pointer flex justify-start px-2 py-1 rounded-lg"
             tabIndex={0}
             role="button"
           >
@@ -59,7 +61,7 @@ export default function SortDropdown({ sortBy, setSort }: Props) {
         </li>
         <li>
           <label
-            className="label cursor-pointer flex justify-start"
+            className="label cursor-pointer flex justify-start px-2 py-1 rounded-lg"
             tabIndex={0}
             role="button"
           >
@@ -76,7 +78,7 @@ export default function SortDropdown({ sortBy, setSort }: Props) {
         </li>
         <li>
           <label
-            className="label cursor-pointer flex justify-start"
+            className="label cursor-pointer flex justify-start px-2 py-1 rounded-lg"
             tabIndex={0}
             role="button"
           >
@@ -93,7 +95,7 @@ export default function SortDropdown({ sortBy, setSort }: Props) {
         </li>
         <li>
           <label
-            className="label cursor-pointer flex justify-start"
+            className="label cursor-pointer flex justify-start px-2 py-1 rounded-lg"
             tabIndex={0}
             role="button"
           >
@@ -110,7 +112,7 @@ export default function SortDropdown({ sortBy, setSort }: Props) {
         </li>
         <li>
           <label
-            className="label cursor-pointer flex justify-start"
+            className="label cursor-pointer flex justify-start px-2 py-1 rounded-lg"
             tabIndex={0}
             role="button"
           >
diff --git a/pages/collections/[id].tsx b/pages/collections/[id].tsx
index 3daf937..587c679 100644
--- a/pages/collections/[id].tsx
+++ b/pages/collections/[id].tsx
@@ -1,4 +1,3 @@
-import Dropdown from "@/components/Dropdown";
 import LinkCard from "@/components/LinkCard";
 import useCollectionStore from "@/store/collections";
 import useLinkStore from "@/store/links";
@@ -26,7 +25,6 @@ export default function Index() {
   const { links } = useLinkStore();
   const { collections } = useCollectionStore();
 
-  const [expandDropdown, setExpandDropdown] = useState(false);
   const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
 
   const [activeCollection, setActiveCollection] =
@@ -118,47 +116,50 @@ export default function Index() {
           <div className="flex justify-between items-end gap-5">
             <p>{activeCollection?.description}</p>
             <div className="flex items-center gap-2">
+              <SortDropdown sortBy={sortBy} setSort={setSortBy} />
               <div className="relative">
-                <SortDropdown sortBy={sortBy} setSort={setSortBy} />
-              </div>
-              <div className="relative">
-                <div
-                  onClick={() => setExpandDropdown(!expandDropdown)}
-                  id="expand-dropdown"
-                  className="btn btn-ghost btn-square btn-sm"
-                >
-                  <FontAwesomeIcon
-                    icon={faEllipsis}
-                    id="expand-dropdown"
-                    title="More"
-                    className="w-5 h-5 text-neutral"
-                  />
-                </div>
-                {expandDropdown ? (
-                  <Dropdown
-                    items={[
-                      permissions === true
-                        ? {
-                            name: "Edit Collection Info",
-                            onClick: () => {
-                              activeCollection &&
-                                setModal({
-                                  modal: "COLLECTION",
-                                  state: true,
-                                  method: "UPDATE",
-                                  isOwner: permissions === true,
-                                  active: activeCollection,
-                                });
-                              setExpandDropdown(false);
-                            },
-                          }
-                        : undefined,
-                      {
-                        name:
-                          permissions === true
-                            ? "Share/Collaborate"
-                            : "View Team",
-                        onClick: () => {
+                <div className="dropdown dropdown-bottom dropdown-end">
+                  <div
+                    tabIndex={0}
+                    role="button"
+                    className="btn btn-ghost btn-sm btn-square text-neutral"
+                  >
+                    <FontAwesomeIcon
+                      icon={faEllipsis}
+                      title="More"
+                      className="w-5 h-5"
+                    />
+                  </div>
+                  <ul className="dropdown-content z-[30] menu p-1 shadow bg-base-200 border border-neutral-content rounded-xl w-44 mt-1">
+                    {permissions === true ? (
+                      <li>
+                        <div
+                          className="px-2 py-1 rounded-lg"
+                          role="button"
+                          tabIndex={0}
+                          onClick={() => {
+                            (document?.activeElement as HTMLElement)?.blur();
+                            activeCollection &&
+                              setModal({
+                                modal: "COLLECTION",
+                                state: true,
+                                method: "UPDATE",
+                                isOwner: permissions === true,
+                                active: activeCollection,
+                              });
+                          }}
+                        >
+                          Edit Collection Info
+                        </div>
+                      </li>
+                    ) : undefined}
+                    <li>
+                      <div
+                        className="px-2 py-1 rounded-lg"
+                        role="button"
+                        tabIndex={0}
+                        onClick={() => {
+                          (document?.activeElement as HTMLElement)?.blur();
                           activeCollection &&
                             setModal({
                               modal: "COLLECTION",
@@ -168,16 +169,20 @@ export default function Index() {
                               active: activeCollection,
                               defaultIndex: permissions === true ? 1 : 0,
                             });
-                          setExpandDropdown(false);
-                        },
-                      },
-
-                      {
-                        name:
-                          permissions === true
-                            ? "Delete Collection"
-                            : "Leave Collection",
-                        onClick: () => {
+                        }}
+                      >
+                        {permissions === true
+                          ? "Share and Collaborate"
+                          : "View Team"}
+                      </div>
+                    </li>
+                    <li>
+                      <div
+                        className="px-2 py-1 rounded-lg"
+                        role="button"
+                        tabIndex={0}
+                        onClick={() => {
+                          (document?.activeElement as HTMLElement)?.blur();
                           activeCollection &&
                             setModal({
                               modal: "COLLECTION",
@@ -187,18 +192,15 @@ export default function Index() {
                               active: activeCollection,
                               defaultIndex: permissions === true ? 2 : 1,
                             });
-                          setExpandDropdown(false);
-                        },
-                      },
-                    ]}
-                    onClickOutside={(e: Event) => {
-                      const target = e.target as HTMLInputElement;
-                      if (target.id !== "expand-dropdown")
-                        setExpandDropdown(false);
-                    }}
-                    className="absolute top-8 right-0 z-10 w-44"
-                  />
-                ) : null}
+                        }}
+                      >
+                        {permissions === true
+                          ? "Delete Collection"
+                          : "Leave Collection"}
+                      </div>
+                    </li>
+                  </ul>
+                </div>
               </div>
             </div>
           </div>
diff --git a/pages/collections/index.tsx b/pages/collections/index.tsx
index c5018a2..9ef0dec 100644
--- a/pages/collections/index.tsx
+++ b/pages/collections/index.tsx
@@ -50,41 +50,38 @@ export default function Collections() {
               </div>
             </div>
             <div className="relative mt-2">
-              <div
-                onClick={() => setExpandDropdown(!expandDropdown)}
-                id="expand-dropdown"
-                className="btn btn-ghost btn-square btn-sm"
-              >
-                <FontAwesomeIcon
-                  icon={faEllipsis}
-                  id="expand-dropdown"
-                  className="w-5 h-5 text-neutral"
-                />
-              </div>
-
-              {expandDropdown ? (
-                <Dropdown
-                  items={[
-                    {
-                      name: "New Collection",
-                      onClick: () => {
+              <div className="dropdown dropdown-bottom">
+                <div
+                  tabIndex={0}
+                  role="button"
+                  className="btn btn-ghost btn-sm btn-square text-neutral"
+                >
+                  <FontAwesomeIcon
+                    icon={faEllipsis}
+                    title="More"
+                    className="w-5 h-5"
+                  />
+                </div>
+                <ul className="dropdown-content z-[1] menu p-1 shadow bg-base-200 border border-neutral-content rounded-xl w-40 mt-1">
+                  <li>
+                    <div
+                      className="px-2 py-1 rounded-lg"
+                      role="button"
+                      tabIndex={0}
+                      onClick={() => {
+                        (document?.activeElement as HTMLElement)?.blur();
                         setModal({
                           modal: "COLLECTION",
                           state: true,
                           method: "CREATE",
                         });
-                        setExpandDropdown(false);
-                      },
-                    },
-                  ]}
-                  onClickOutside={(e: Event) => {
-                    const target = e.target as HTMLInputElement;
-                    if (target.id !== "expand-dropdown")
-                      setExpandDropdown(false);
-                  }}
-                  className="absolute top-8 sm:left-0 right-0 sm:right-auto w-36"
-                />
-              ) : null}
+                      }}
+                    >
+                      New Collection
+                    </div>
+                  </li>
+                </ul>
+              </div>
             </div>
           </div>
 
diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx
index 48d4228..76c7e50 100644
--- a/pages/dashboard.tsx
+++ b/pages/dashboard.tsx
@@ -217,9 +217,13 @@ export default function Dashboard() {
                       Import Your Bookmarks
                     </span>
                   </summary>
-                  <ul className="shadow menu dropdown-content z-[1] bg-base-200 border border-neutral-content rounded-box w-60">
+                  <ul className="shadow menu dropdown-content z-[1] p-1 bg-base-200 border border-neutral-content rounded-xl mt-1 w-60">
                     <li>
-                      <label htmlFor="import-linkwarden-file" title="JSON File">
+                      <label
+                        className="px-2 py-1 rounded-lg"
+                        htmlFor="import-linkwarden-file"
+                        title="JSON File"
+                      >
                         From Linkwarden
                         <input
                           type="file"
@@ -235,9 +239,9 @@ export default function Dashboard() {
                     </li>
                     <li>
                       <label
+                        className="px-2 py-1 rounded-lg"
                         htmlFor="import-html-file"
                         title="HTML File"
-                        className="w-full"
                       >
                         From Bookmarks HTML file
                         <input
diff --git a/pages/public/collections/[id].tsx b/pages/public/collections/[id].tsx
index a9ddc1e..87a8add 100644
--- a/pages/public/collections/[id].tsx
+++ b/pages/public/collections/[id].tsx
@@ -16,8 +16,6 @@ import getPublicUserData from "@/lib/client/getPublicUserData";
 import Image from "next/image";
 import Link from "next/link";
 import PublicSearchBar from "@/components/PublicPage/PublicSearchBar";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faFilter } from "@fortawesome/free-solid-svg-icons";
 import FilterSearchDropdown from "@/components/FilterSearchDropdown";
 import SortDropdown from "@/components/SortDropdown";
 import useLocalSettingsStore from "@/store/localSettings";
@@ -206,27 +204,12 @@ export default function PublicCollections() {
               placeHolder={`Search ${collection._count?.links} Links`}
             />
 
-            <div className="flex gap-3 items-center">
+            <div className="flex gap-2 items-center">
               <div className="relative">
-                <div
-                  onClick={() => setFilterDropdown(!filterDropdown)}
-                  id="filter-dropdown"
-                  className="btn btn-ghost btn-square btn-sm"
-                >
-                  <FontAwesomeIcon
-                    icon={faFilter}
-                    id="filter-dropdown"
-                    className="w-5 h-5 text-neutral"
-                  />
-                </div>
-
-                {filterDropdown ? (
-                  <FilterSearchDropdown
-                    setFilterDropdown={setFilterDropdown}
-                    searchFilter={searchFilter}
-                    setSearchFilter={setSearchFilter}
-                  />
-                ) : null}
+                <FilterSearchDropdown
+                  searchFilter={searchFilter}
+                  setSearchFilter={setSearchFilter}
+                />
               </div>
 
               <div className="relative">
diff --git a/pages/search.tsx b/pages/search.tsx
index 058d4ed..d05a20a 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -52,27 +52,12 @@ export default function Search() {
             </div>
           </div>
 
-          <div className="flex gap-3 items-center">
+          <div className="flex gap-2 items-center">
             <div className="relative">
-              <div
-                onClick={() => setFilterDropdown(!filterDropdown)}
-                id="filter-dropdown"
-                className="btn btn-ghost btn-square btn-sm"
-              >
-                <FontAwesomeIcon
-                  icon={faFilter}
-                  id="filter-dropdown"
-                  className="w-5 h-5 text-neutral"
-                />
-              </div>
-
-              {filterDropdown ? (
-                <FilterSearchDropdown
-                  setFilterDropdown={setFilterDropdown}
-                  searchFilter={searchFilter}
-                  setSearchFilter={setSearchFilter}
-                />
-              ) : null}
+              <FilterSearchDropdown
+                searchFilter={searchFilter}
+                setSearchFilter={setSearchFilter}
+              />
             </div>
 
             <div className="relative">
diff --git a/pages/tags/[id].tsx b/pages/tags/[id].tsx
index 528bb16..5f18539 100644
--- a/pages/tags/[id].tsx
+++ b/pages/tags/[id].tsx
@@ -147,16 +147,46 @@ export default function Index() {
                     {activeTag?.name}
                   </p>
                   <div className="relative">
-                    <div
-                      onClick={() => setExpandDropdown(!expandDropdown)}
-                      id="expand-dropdown"
-                      className="btn btn-ghost btn-square btn-sm"
-                    >
-                      <FontAwesomeIcon
-                        icon={faEllipsis}
-                        id="expand-dropdown"
-                        className="w-5 h-5 text-neutral"
-                      />
+                    <div className="dropdown dropdown-bottom font-normal">
+                      <div
+                        tabIndex={0}
+                        role="button"
+                        className="btn btn-ghost btn-sm btn-square text-neutral"
+                      >
+                        <FontAwesomeIcon
+                          icon={faEllipsis}
+                          title="More"
+                          className="w-5 h-5"
+                        />
+                      </div>
+                      <ul className="dropdown-content z-[30] menu p-1 shadow bg-base-200 border border-neutral-content rounded-xl w-36 mt-1">
+                        <li>
+                          <div
+                            className="px-2 py-1 rounded-lg"
+                            role="button"
+                            tabIndex={0}
+                            onClick={() => {
+                              (document?.activeElement as HTMLElement)?.blur();
+                              setRenameTag(true);
+                            }}
+                          >
+                            Rename Tag
+                          </div>
+                        </li>
+                        <li>
+                          <div
+                            className="px-2 py-1 rounded-lg"
+                            role="button"
+                            tabIndex={0}
+                            onClick={() => {
+                              (document?.activeElement as HTMLElement)?.blur();
+                              remove();
+                            }}
+                          >
+                            Remove Tag
+                          </div>
+                        </li>
+                      </ul>
                     </div>
 
                     {expandDropdown ? (