diff --git a/components/CollectionCard.tsx b/components/CollectionCard.tsx
index b9c2c4b..9abd8a2 100644
--- a/components/CollectionCard.tsx
+++ b/components/CollectionCard.tsx
@@ -44,11 +44,11 @@ export default function ({
   };
 
   return (
-    <div className="bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% self-stretch min-h-[12rem] rounded-md shadow duration-100 hover:shadow-none group relative">
+    <div className="bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% self-stretch min-h-[12rem] rounded-2xl shadow duration-100 hover:shadow-none group relative">
       <div
         onClick={() => setExpandDropdown(!expandDropdown)}
         id={"expand-dropdown" + collection.id}
-        className="inline-flex absolute top-5 right-5 rounded-md cursor-pointer hover:bg-white hover:border-sky-500 border-sky-100 border duration-100 p-1"
+        className="inline-flex absolute top-5 right-5 rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
       >
         <FontAwesomeIcon
           icon={faEllipsis}
diff --git a/components/LinkList.tsx b/components/LinkList.tsx
index b42154f..99e580b 100644
--- a/components/LinkList.tsx
+++ b/components/LinkList.tsx
@@ -40,7 +40,7 @@ export default function ({ link, count }: Props) {
   };
 
   return (
-    <div className="bg-gradient-to-tr from-gray-100 from-10% to-slate-200 via-20% shadow-sm p-5 rounded-md flex items-start relative gap-5 sm:gap-10 group/item">
+    <div className="bg-gradient-to-tr from-slate-200 from-10% to-gray-50 via-20% shadow-sm p-5 rounded-2xl flex items-start relative gap-5 sm:gap-10 group/item">
       {editModal ? (
         <Modal toggleModal={toggleEditModal}>
           <LinkModal
@@ -94,7 +94,7 @@ export default function ({ link, count }: Props) {
               {link.tags.map((e, i) => (
                 <Link key={i} href={`/tags/${e.id}`}>
                   <p className="px-2 py-1 bg-sky-200 text-sky-700 text-xs rounded-3xl cursor-pointer hover:bg-sky-100 duration-100">
-                    # {e.name}
+                    {e.name}
                   </p>
                 </Link>
               ))}
@@ -118,7 +118,7 @@ export default function ({ link, count }: Props) {
           <div
             onClick={() => setExpandDropdown(!expandDropdown)}
             id={"expand-dropdown" + link.id}
-            className="text-gray-500 inline-flex rounded-md cursor-pointer hover:bg-white outline outline-sky-100 hover:outline-sky-500 outline-1 duration-100 p-1"
+            className="text-gray-500 inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
           >
             <FontAwesomeIcon
               icon={faEllipsis}
diff --git a/components/Modal/Collection/CollectionInfo.tsx b/components/Modal/Collection/CollectionInfo.tsx
index a22ec9c..3ba1948 100644
--- a/components/Modal/Collection/CollectionInfo.tsx
+++ b/components/Modal/Collection/CollectionInfo.tsx
@@ -4,6 +4,7 @@ import { faPenToSquare, faPlus } from "@fortawesome/free-solid-svg-icons";
 import useCollectionStore from "@/store/collections";
 import { CollectionIncludingMembers } from "@/types/global";
 import RequiredBadge from "../../RequiredBadge";
+import SubmitButton from "@/components/SubmitButton";
 
 type Props = {
   toggleCollectionModal: Function;
@@ -72,18 +73,12 @@ export default function CollectionInfo({
         </div>
       </div>
 
-      <div className="flex flex-col justify-center items-center gap-2 mt-2">
-        <div
-          className="bg-sky-500 text-white flex items-center gap-2 py-2 px-5 rounded-md select-none font-bold cursor-pointer duration-100 hover:bg-sky-400"
-          onClick={submit}
-        >
-          <FontAwesomeIcon
-            icon={method === "CREATE" ? faPlus : faPenToSquare}
-            className="h-5"
-          />
-          {method === "CREATE" ? "Add Collection" : "Edit Collection"}
-        </div>
-      </div>
+      <SubmitButton
+        onClick={submit}
+        label={method === "CREATE" ? "Add Collection" : "Edit Collection"}
+        icon={method === "CREATE" ? faPlus : faPenToSquare}
+        className="mx-auto mt-2"
+      />
     </div>
   );
 }
diff --git a/components/Modal/Collection/TeamManagement.tsx b/components/Modal/Collection/TeamManagement.tsx
index 75ef93f..6db720b 100644
--- a/components/Modal/Collection/TeamManagement.tsx
+++ b/components/Modal/Collection/TeamManagement.tsx
@@ -12,6 +12,7 @@ import { useSession } from "next-auth/react";
 import addMemberToCollection from "@/lib/client/addMemberToCollection";
 import ImageWithFallback from "../../ImageWithFallback";
 import Checkbox from "../../Checkbox";
+import SubmitButton from "@/components/SubmitButton";
 
 type Props = {
   toggleCollectionModal: Function;
@@ -73,7 +74,7 @@ export default function TeamManagement({
   return (
     <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
       <p className="text-xl text-sky-500 mb-2 text-center w-5/6 mx-auto">
-        Sharing & Collaboration Settings
+        Sharing & Collaboration
       </p>
 
       <p className="text-sm font-bold text-sky-300">Make Public</p>
@@ -114,7 +115,7 @@ export default function TeamManagement({
 
       <p className="text-sm font-bold text-sky-300">Member Management</p>
 
-      <div className="relative">
+      <div className="flex items-center gap-2">
         <input
           value={member.user.email}
           onChange={(e) => {
@@ -134,7 +135,7 @@ export default function TeamManagement({
           }
           type="text"
           placeholder="Email"
-          className="w-full rounded-md p-3 pr-12 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
+          className="w-full rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
         />
 
         <div
@@ -146,9 +147,9 @@ export default function TeamManagement({
               setMemberState
             )
           }
-          className="absolute flex items-center justify-center right-2 top-2 bottom-2 bg-sky-500 hover:bg-sky-400 duration-100 text-white w-9 rounded-md cursor-pointer"
+          className="flex items-center justify-center bg-sky-500 hover:bg-sky-400 duration-100 text-white w-12 h-12 p-3 rounded-md cursor-pointer"
         >
-          <FontAwesomeIcon icon={faUserPlus} className="w-6 h-6" />
+          <FontAwesomeIcon icon={faUserPlus} className="w-5 h-5" />
         </div>
       </div>
       {collection?.members[0]?.user ? (
@@ -305,15 +306,12 @@ export default function TeamManagement({
         </>
       ) : null}
 
-      <div className="flex flex-col justify-center items-center gap-2 mt-2">
-        <div
-          className="bg-sky-500 text-white flex items-center gap-2 py-2 px-5 rounded-md select-none font-bold cursor-pointer duration-100 hover:bg-sky-400"
-          onClick={submit}
-        >
-          <FontAwesomeIcon icon={faPenToSquare} className="h-5" />
-          Edit Collection
-        </div>
-      </div>
+      <SubmitButton
+        onClick={submit}
+        label="Edit Collection"
+        icon={faPenToSquare}
+        className="mx-auto mt-2"
+      />
     </div>
   );
 }
diff --git a/components/Modal/LinkModal.tsx b/components/Modal/LinkModal.tsx
index 3dbb12b..36e83b9 100644
--- a/components/Modal/LinkModal.tsx
+++ b/components/Modal/LinkModal.tsx
@@ -5,11 +5,12 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { LinkIncludingCollectionAndTags } from "@/types/global";
 import { faPenToSquare } from "@fortawesome/free-regular-svg-icons";
 import useLinkStore from "@/store/links";
-import { faPlus, faTrashCan } from "@fortawesome/free-solid-svg-icons";
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import RequiredBadge from "../RequiredBadge";
 import { useSession } from "next-auth/react";
 import useCollectionStore from "@/store/collections";
 import { useRouter } from "next/router";
+import SubmitButton from "../SubmitButton";
 
 type Props =
   | {
@@ -47,7 +48,7 @@ export default function EditLink({
         }
   );
 
-  const { updateLink, removeLink, addLink } = useLinkStore();
+  const { updateLink, addLink } = useLinkStore();
 
   const router = useRouter();
 
@@ -97,7 +98,7 @@ export default function EditLink({
     if (method === "UPDATE") response = await updateLink(link);
     else if (method === "CREATE") response = await addLink(link);
 
-    toggleLinkModal();
+    response && toggleLinkModal();
   };
 
   return (
@@ -107,7 +108,7 @@ export default function EditLink({
       </p>
 
       {method === "UPDATE" ? (
-        <p className="text-sky-700">
+        <p className="text-gray-500">
           <b>{shortendURL}</b> | {link.title}
         </p>
       ) : null}
@@ -176,43 +177,12 @@ export default function EditLink({
         </div>
       </div>
 
-      <div className="flex flex-col justify-center items-center gap-2 mt-2">
-        <div
-          className="bg-sky-500 text-white flex items-center gap-2 py-2 px-5 rounded-md select-none font-bold cursor-pointer duration-100 hover:bg-sky-400"
-          onClick={submit}
-        >
-          <FontAwesomeIcon
-            icon={method === "CREATE" ? faPlus : faPenToSquare}
-            className="h-5"
-          />
-          {method === "CREATE" ? "Add Link" : "Edit Link"}
-        </div>
-
-        {method === "UPDATE" ? (
-          <>
-            <div className="flex items-center justify-center gap-2">
-              <hr className="w-16 border" />
-
-              <p className="text-gray-400 font-bold">OR</p>
-
-              <hr className="w-16 border" />
-            </div>
-
-            <div
-              onClick={() => {
-                removeLink(link);
-                toggleLinkModal();
-              }}
-              className="w-fit inline-flex rounded-md cursor-pointer bg-red-500 hover:bg-red-400 duration-100 p-2"
-            >
-              <FontAwesomeIcon
-                icon={faTrashCan}
-                className="w-4 h-4 text-white"
-              />
-            </div>
-          </>
-        ) : null}
-      </div>
+      <SubmitButton
+        onClick={submit}
+        label={method === "CREATE" ? "Add Link" : "Edit Link"}
+        icon={method === "CREATE" ? faPlus : faPenToSquare}
+        className="mx-auto mt-2"
+      />
     </div>
   );
 }
diff --git a/components/Modal/UserSettings.tsx b/components/Modal/UserSettings.tsx
index c7a2dc9..13e576e 100644
--- a/components/Modal/UserSettings.tsx
+++ b/components/Modal/UserSettings.tsx
@@ -9,6 +9,7 @@ import { resizeImage } from "@/lib/client/resizeImage";
 import Modal from ".";
 import ChangePassword from "./ChangePassword";
 import { faPenToSquare } from "@fortawesome/free-regular-svg-icons";
+import SubmitButton from "../SubmitButton";
 
 type Props = {
   toggleSettingsModal: Function;
@@ -221,8 +222,8 @@ export default function UserSettings({ toggleSettingsModal }: Props) {
           </p>
           <p className="text-gray-500 text-sm mb-3">
             Please provide the Email addresses of the users you wish to grant
-            visibility to your profile. Separate the addresses with a comma.
-            Users not included will be unable to view your profile.
+            visibility to your profile. Separate by comma. Users not included
+            will be unable to view your profile.
           </p>
           <textarea
             className="w-full resize-none border rounded-md duration-100 bg-white p-2 outline-none border-sky-100 focus:border-sky-500"
@@ -235,13 +236,12 @@ export default function UserSettings({ toggleSettingsModal }: Props) {
         </div>
       ) : null}
 
-      <div
-        className="mx-auto mt-2 bg-sky-500 text-white flex items-center gap-2 py-2 px-5 rounded-md select-none font-bold cursor-pointer duration-100 hover:bg-sky-400"
+      <SubmitButton
         onClick={submit}
-      >
-        <FontAwesomeIcon icon={faPenToSquare} className="h-5" />
-        Apply Settings
-      </div>
+        label="Apply Settings"
+        icon={faPenToSquare}
+        className="mx-auto mt-2"
+      />
 
       {passwordFormModal ? (
         <Modal toggleModal={togglePasswordFormModal}>
diff --git a/components/Modal/index.tsx b/components/Modal/index.tsx
index e728f4c..56168df 100644
--- a/components/Modal/index.tsx
+++ b/components/Modal/index.tsx
@@ -12,14 +12,14 @@ export default function ({ toggleModal, children }: Props) {
   return (
     <div className="overflow-y-auto py-2 fixed top-0 bottom-0 right-0 left-0 bg-gray-500 bg-opacity-10 flex items-center fade-in z-30">
       <ClickAwayHandler onClickOutside={toggleModal} className="w-fit m-auto">
-        <div className="slide-up relative border-sky-100 rounded-md border-solid border shadow-lg p-5 bg-white">
+        <div className="slide-up relative border-sky-100 rounded-2xl border-solid border shadow-lg p-5 bg-white">
           <div
             onClick={toggleModal as MouseEventHandler<HTMLDivElement>}
-            className="absolute top-5 left-5 inline-flex rounded-md cursor-pointer hover:bg-white hover:border-sky-500 border-sky-100 border duration-100 p-1"
+            className="absolute top-5 left-5 inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-2"
           >
             <FontAwesomeIcon
               icon={faChevronLeft}
-              className="w-5 h-5 text-gray-500"
+              className="w-4 h-4 text-gray-500"
             />
           </div>
           {children}
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 24d5781..7db360a 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -50,18 +50,23 @@ export default function () {
     <div className="flex justify-between gap-2 items-center px-5 py-2 border-solid border-b-sky-100 border-b h-16">
       <div
         onClick={toggleSidebar}
-        className="inline-flex lg:hidden gap-1 items-center select-none cursor-pointer p-2 text-sky-500 rounded-md hover:outline-sky-500 outline duration-100 bg-white outline-sky-100 outline-1"
+        className="inline-flex lg:hidden gap-1 items-center select-none cursor-pointer p-[0.687rem] text-gray-500 rounded-md duration-100 hover:bg-slate-200"
       >
-        <FontAwesomeIcon icon={faBars} className="w-6 h-6" />
+        <FontAwesomeIcon icon={faBars} className="w-5 h-5" />
       </div>
       <Search />
       <div className="flex items-center gap-2">
         <div
           onClick={toggleLinkModal}
-          className="inline-flex gap-1 items-center font-semibold select-none cursor-pointer px-2 sm:px-3 py-2 rounded-md text-white bg-sky-500 hover:bg-sky-400 duration-100"
+          className="inline-flex gap-1 relative sm:w-[7.2rem] items-center font-semibold select-none cursor-pointer p-[0.687rem] sm:p-2 sm:px-3 rounded-md sm:rounded-full hover:bg-sky-100 text-sky-500 sm:text-white sm:bg-sky-500 sm:hover:bg-sky-400 duration-100 group"
         >
-          <FontAwesomeIcon icon={faPlus} className="w-6 h-6 sm:w-5 sm:h-5" />
-          <span className="hidden sm:block">New Link</span>
+          <FontAwesomeIcon
+            icon={faPlus}
+            className="w-5 h-5 sm:group-hover:ml-9 sm:absolute duration-100"
+          />
+          <span className="hidden sm:block group-hover:opacity-0 text-right w-full duration-100">
+            New Link
+          </span>
         </div>
 
         <div className="relative">
diff --git a/components/Search.tsx b/components/Search.tsx
index 5072fc2..4ff6768 100644
--- a/components/Search.tsx
+++ b/components/Search.tsx
@@ -35,7 +35,7 @@ export default function Search() {
     >
       <label
         htmlFor="search-box"
-        className="inline-flex w-fit absolute right-2 pointer-events-none rounded-md p-1 text-sky-500 group-hover:text-sky-600"
+        className="inline-flex w-fit absolute left-2 pointer-events-none rounded-md p-1 text-sky-500 group-hover:text-sky-600"
       >
         <FontAwesomeIcon icon={faMagnifyingGlass} className="w-5 h-5" />
       </label>
@@ -50,7 +50,7 @@ export default function Search() {
           router.push("/search");
         }}
         autoFocus={searchBox}
-        className="border border-sky-100 rounded-md pr-10 w-44 sm:w-60 focus:border-sky-500 sm:focus:w-80 hover:border-sky-500 duration-100 outline-none p-2"
+        className="border border-sky-100 rounded-md pl-10 py-2 pr-2 w-44 sm:w-60 focus:border-sky-500 sm:focus:w-80 hover:border-sky-500 duration-100 outline-none"
       />
     </div>
   );
diff --git a/components/SubmitButton.tsx b/components/SubmitButton.tsx
new file mode 100644
index 0000000..a022afe
--- /dev/null
+++ b/components/SubmitButton.tsx
@@ -0,0 +1,27 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { IconDefinition } from "@fortawesome/free-regular-svg-icons";
+import { MouseEventHandler } from "react";
+
+type Props = {
+  onClick: Function;
+  icon: IconDefinition;
+  label: string;
+  className?: string;
+};
+
+export default function SubmitButton({
+  onClick,
+  icon,
+  label,
+  className,
+}: Props) {
+  return (
+    <div
+      className={`bg-sky-500 text-white flex items-center gap-2 py-2 px-5 rounded-xl select-none font-bold cursor-pointer duration-100 hover:bg-sky-400 w-fit ${className}`}
+      onClick={onClick as MouseEventHandler<HTMLDivElement>}
+    >
+      <FontAwesomeIcon icon={icon} className="h-5" />
+      {label}
+    </div>
+  );
+}
diff --git a/pages/collections/[id].tsx b/pages/collections/[id].tsx
index 8f1f378..920a834 100644
--- a/pages/collections/[id].tsx
+++ b/pages/collections/[id].tsx
@@ -98,7 +98,7 @@ export default function () {
   return (
     <MainLayout>
       <div className="p-5 flex flex-col gap-5 w-full">
-        <div className="bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% rounded shadow min-h-[10rem] p-5 flex gap-5 flex-col justify-between">
+        <div className="bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% rounded-xl shadow min-h-[10rem] p-5 flex gap-5 flex-col justify-between">
           <div className="flex flex-col sm:flex-row gap-3 justify-between items-center sm:items-start">
             <div className="flex gap-3 items-center">
               <div className="flex gap-2">
@@ -162,7 +162,7 @@ export default function () {
                 <div
                   onClick={() => setSortDropdown(!sortDropdown)}
                   id="sort-dropdown"
-                  className="inline-flex rounded-md cursor-pointer hover:bg-white hover:border-sky-500 border-sky-100 border duration-100 p-1"
+                  className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
                 >
                   <FontAwesomeIcon
                     icon={faSort}
@@ -183,7 +183,7 @@ export default function () {
                 <div
                   onClick={() => setExpandDropdown(!expandDropdown)}
                   id="expand-dropdown"
-                  className="inline-flex rounded-md cursor-pointer hover:bg-white hover:border-sky-500 border-sky-100 border duration-100 p-1"
+                  className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
                 >
                   <FontAwesomeIcon
                     icon={faEllipsis}
diff --git a/pages/collections/index.tsx b/pages/collections/index.tsx
index ef02d81..234e985 100644
--- a/pages/collections/index.tsx
+++ b/pages/collections/index.tsx
@@ -90,7 +90,7 @@ export default function () {
               <div
                 onClick={() => setExpandDropdown(!expandDropdown)}
                 id="expand-dropdown"
-                className="inline-flex rounded-md cursor-pointer hover:bg-white hover:border-sky-500 border-sky-100 border duration-100 p-1"
+                className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
               >
                 <FontAwesomeIcon
                   icon={faEllipsis}
@@ -125,7 +125,7 @@ export default function () {
             <div
               onClick={() => setSortDropdown(!sortDropdown)}
               id="sort-dropdown"
-              className="inline-flex rounded-md cursor-pointer hover:bg-white hover:border-sky-500 border-sky-100 border duration-100 p-1"
+              className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
             >
               <FontAwesomeIcon
                 icon={faSort}
@@ -193,7 +193,7 @@ export default function () {
           })}
 
           <div
-            className="p-5 self-stretch bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% min-h-[12rem] rounded-md cursor-pointer shadow duration-100 hover:shadow-none flex flex-col gap-4 justify-center items-center group"
+            className="p-5 self-stretch bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% min-h-[12rem] rounded-2xl cursor-pointer shadow duration-100 hover:shadow-none flex flex-col gap-4 justify-center items-center group"
             onClick={toggleCollectionModal}
           >
             <p className="text-sky-900 group-hover:opacity-0 duration-100">
diff --git a/pages/links.tsx b/pages/links.tsx
index e585c88..e72a586 100644
--- a/pages/links.tsx
+++ b/pages/links.tsx
@@ -64,7 +64,7 @@ export default function Links() {
             <div
               onClick={() => setSortDropdown(!sortDropdown)}
               id="sort-dropdown"
-              className="inline-flex rounded-md cursor-pointer hover:bg-white hover:border-sky-500 border-sky-100 border duration-100 p-1"
+              className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
             >
               <FontAwesomeIcon
                 icon={faSort}
diff --git a/pages/search.tsx b/pages/search.tsx
index 6cb2474..fdf9371 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -54,14 +54,16 @@ export default function Links() {
       setSortedLinks(
         linksArray.sort(
           (a, b) =>
-            new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+            new Date(b.createdAt as string).getTime() -
+            new Date(a.createdAt as string).getTime()
         )
       );
     else if (sortBy === "Date (Oldest First)")
       setSortedLinks(
         linksArray.sort(
           (a, b) =>
-            new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
+            new Date(a.createdAt as string).getTime() -
+            new Date(b.createdAt as string).getTime()
         )
       );
   }, [searchSettings, links, sortBy]);
@@ -80,7 +82,7 @@ export default function Links() {
               <div
                 onClick={() => setFilterDropdown(!filterDropdown)}
                 id="filter-dropdown"
-                className="inline-flex rounded-md cursor-pointer hover:bg-white hover:border-sky-500 border-sky-100 border duration-100 p-1"
+                className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
               >
                 <FontAwesomeIcon
                   icon={faFilter}
@@ -136,7 +138,7 @@ export default function Links() {
               <div
                 onClick={() => setSortDropdown(!sortDropdown)}
                 id="sort-dropdown"
-                className="inline-flex rounded-md cursor-pointer hover:bg-white hover:border-sky-500 border-sky-100 border duration-100 p-1"
+                className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
               >
                 <FontAwesomeIcon
                   icon={faSort}
diff --git a/pages/tags/[id].tsx b/pages/tags/[id].tsx
index 1a4d1e5..8c862ef 100644
--- a/pages/tags/[id].tsx
+++ b/pages/tags/[id].tsx
@@ -83,7 +83,7 @@ export default function () {
             <div
               onClick={() => setSortDropdown(!sortDropdown)}
               id="sort-dropdown"
-              className="inline-flex rounded-md cursor-pointer hover:bg-white hover:border-sky-500 border-sky-100 border duration-100 p-1"
+              className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
             >
               <FontAwesomeIcon
                 icon={faSort}