diff --git a/components/CollectionCard.tsx b/components/CollectionCard.tsx
index 7bb0528..6508cff 100644
--- a/components/CollectionCard.tsx
+++ b/components/CollectionCard.tsx
@@ -14,6 +14,7 @@ import Modal from "@/components/Modal";
 import CollectionInfo from "@/components/Modal/Collection/CollectionInfo";
 import DeleteCollection from "@/components/Modal/Collection/DeleteCollection";
 import ProfilePhoto from "./ProfilePhoto";
+import TeamManagement from "./Modal/Collection/TeamManagement";
 
 export default function ({
   collection,
@@ -32,12 +33,17 @@ export default function ({
 
   const [expandDropdown, setExpandDropdown] = useState(false);
   const [editCollectionModal, setEditCollectionModal] = useState(false);
+  const [collectionMembersModal, setCollectionMembersModal] = useState(false);
   const [deleteCollectionModal, setDeleteCollectionModal] = useState(false);
 
   const toggleEditCollectionModal = () => {
     setEditCollectionModal(!editCollectionModal);
   };
 
+  const toggleCollectionMembersModal = () => {
+    setCollectionMembersModal(!collectionMembersModal);
+  };
+
   const toggleDeleteCollectionModal = () => {
     setDeleteCollectionModal(!deleteCollectionModal);
   };
@@ -101,6 +107,13 @@ export default function ({
                 setExpandDropdown(false);
               },
             },
+            {
+              name: "Share/Collaborate",
+              onClick: () => {
+                toggleCollectionMembersModal();
+                setExpandDropdown(false);
+              },
+            },
             {
               name: "Delete Collection",
               onClick: () => {
@@ -128,6 +141,15 @@ export default function ({
         </Modal>
       ) : null}
 
+      {collectionMembersModal ? (
+        <Modal toggleModal={toggleCollectionMembersModal}>
+          <TeamManagement
+            toggleCollectionModal={toggleCollectionMembersModal}
+            activeCollection={collection}
+          />
+        </Modal>
+      ) : null}
+
       {deleteCollectionModal ? (
         <Modal toggleModal={toggleDeleteCollectionModal}>
           <DeleteCollection
diff --git a/components/Dropdown.tsx b/components/Dropdown.tsx
index 993388d..b0cb8d3 100644
--- a/components/Dropdown.tsx
+++ b/components/Dropdown.tsx
@@ -34,7 +34,7 @@ export default function Dropdown({ onClickOutside, className, items }: Props) {
       {items.map((e, i) => {
         const inner = (
           <div className="cursor-pointer rounded-md">
-            <div className="flex items-center gap-2 py-1 px-2 hover:bg-sky-200 duration-100">
+            <div className="flex items-center gap-2 py-1 px-2 hover:bg-slate-200 duration-100">
               <p className="text-sky-900 select-none">{e.name}</p>
             </div>
           </div>
diff --git a/components/InputSelect/styles.ts b/components/InputSelect/styles.ts
index c32a5de..f56833c 100644
--- a/components/InputSelect/styles.ts
+++ b/components/InputSelect/styles.ts
@@ -15,7 +15,7 @@ export const styles: StylesConfig = {
     cursor: "pointer",
     backgroundColor: state.isSelected ? "#0ea5e9" : "inherit",
     "&:hover": {
-      backgroundColor: state.isSelected ? "#0ea5e9" : "#bae6fd",
+      backgroundColor: state.isSelected ? "#0ea5e9" : "#e2e8f0",
     },
     transition: "all 50ms",
   }),
@@ -43,7 +43,7 @@ export const styles: StylesConfig = {
   }),
   clearIndicator: (styles) => ({
     ...styles,
-    cursor: "pointer",
+    visibility: "hidden",
   }),
   placeholder: (styles) => ({
     ...styles,
diff --git a/components/LinkList.tsx b/components/LinkList.tsx
index 2823fcf..3f05167 100644
--- a/components/LinkList.tsx
+++ b/components/LinkList.tsx
@@ -123,7 +123,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 hover:outline outline-sky-100 outline-1 duration-100 p-1"
+            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"
           >
             <FontAwesomeIcon
               icon={faEllipsis}
@@ -184,7 +184,7 @@ export default function ({ link, count }: Props) {
                 if (target.id !== "expand-dropdown" + link.id)
                   setExpandDropdown(false);
               }}
-              className="absolute top-7 right-0 w-36"
+              className="absolute top-8 right-0 w-36"
             />
           ) : null}
         </div>
diff --git a/components/Modal/Collection/TeamManagement.tsx b/components/Modal/Collection/TeamManagement.tsx
index 24b7f46..df399fa 100644
--- a/components/Modal/Collection/TeamManagement.tsx
+++ b/components/Modal/Collection/TeamManagement.tsx
@@ -239,7 +239,7 @@ export default function TeamManagement({
                               });
                             }}
                           />
-                          <span className="text-sky-900 peer-checked:bg-sky-500 text-sm hover:bg-sky-200 duration-75 peer-checked:text-white rounded p-1 select-none">
+                          <span className="text-sky-900 peer-checked:bg-sky-500 text-sm hover:bg-slate-200 duration-75 peer-checked:text-white rounded p-1 select-none">
                             Create
                           </span>
                         </label>
@@ -268,7 +268,7 @@ export default function TeamManagement({
                               });
                             }}
                           />
-                          <span className="text-sky-900 peer-checked:bg-sky-500 text-sm hover:bg-sky-200 duration-75 peer-checked:text-white rounded p-1 select-none">
+                          <span className="text-sky-900 peer-checked:bg-sky-500 text-sm hover:bg-slate-200 duration-75 peer-checked:text-white rounded p-1 select-none">
                             Update
                           </span>
                         </label>
@@ -297,7 +297,7 @@ export default function TeamManagement({
                               });
                             }}
                           />
-                          <span className="text-sky-900 peer-checked:bg-sky-500 text-sm hover:bg-sky-200 duration-75 peer-checked:text-white rounded p-1 select-none">
+                          <span className="text-sky-900 peer-checked:bg-sky-500 text-sm hover:bg-slate-200 duration-75 peer-checked:text-white rounded p-1 select-none">
                             Delete
                           </span>
                         </label>
diff --git a/components/Sidebar/SidebarItem.tsx b/components/Sidebar/SidebarItem.tsx
index c104d35..caa401e 100644
--- a/components/Sidebar/SidebarItem.tsx
+++ b/components/Sidebar/SidebarItem.tsx
@@ -27,13 +27,15 @@ export default function ({ text, icon, path, className }: SidebarItemProps) {
     <Link href={path}>
       <div
         className={`${
-          active ? "bg-sky-500" : "hover:bg-gray-50 hover:outline bg-gray-100"
-        } outline-sky-100 outline-1 duration-100 rounded-md my-1 p-2 cursor-pointer flex items-center gap-2 w-full ${className}`}
+          active ? "bg-sky-500" : "hover:bg-slate-200 bg-gray-100"
+        } duration-100 py-1 px-4 cursor-pointer flex items-center gap-2 w-full ${className}`}
       >
         {React.cloneElement(icon, {
-          className: `w-4 ${active ? "text-white" : "text-sky-300"}`,
+          className: `w-4 h-4 ${active ? "text-white" : "text-sky-300"}`,
         })}
-        <p className={`${active ? "text-white" : "text-sky-900"} truncate`}>
+        <p
+          className={`${active ? "text-white" : "text-sky-900"} truncate w-4/6`}
+        >
           {text}
         </p>
       </div>
diff --git a/components/Sidebar/index.tsx b/components/Sidebar/index.tsx
index a335eaa..835988c 100644
--- a/components/Sidebar/index.tsx
+++ b/components/Sidebar/index.tsx
@@ -32,9 +32,9 @@ export default function ({ className }: { className?: string }) {
 
   return (
     <div
-      className={`bg-gray-100 h-screen w-64 xl:w-80 p-2 overflow-y-auto border-solid border-r-sky-100 border z-20 ${className}`}
+      className={`bg-gray-100 h-screen w-64 xl:w-80 overflow-y-auto border-solid border-r-sky-100 border z-20 ${className}`}
     >
-      <p className="p-2 text-sky-500 font-bold text-xl mb-5 leading-4">
+      <p className="p-4 text-sky-500 font-bold text-2xl my-2 leading-4">
         Linkwarden
       </p>
 
@@ -43,12 +43,12 @@ export default function ({ className }: { className?: string }) {
           className={`${
             active === "/dashboard"
               ? "bg-sky-500"
-              : "hover:bg-gray-50 hover:outline bg-gray-100"
-          } outline-sky-100 outline-1 duration-100 rounded-md my-1 p-2 cursor-pointer flex items-center gap-2`}
+              : "hover:bg-slate-200 bg-gray-100"
+          } outline-sky-100 outline-1 duration-100 py-1 px-4 cursor-pointer flex items-center gap-2`}
         >
           <FontAwesomeIcon
             icon={faChartSimple}
-            className={`w-4 ${
+            className={`w-4 h-4 ${
               active === "/dashboard" ? "text-white" : "text-sky-300"
             }`}
           />
@@ -67,12 +67,12 @@ export default function ({ className }: { className?: string }) {
           className={`${
             active === "/links"
               ? "bg-sky-500"
-              : "hover:bg-gray-50 hover:outline bg-gray-100"
-          } outline-sky-100 outline-1 duration-100 rounded-md my-1 p-2 cursor-pointer flex items-center gap-2`}
+              : "hover:bg-slate-200 bg-gray-100"
+          } outline-sky-100 outline-1 duration-100 py-1 px-4 cursor-pointer flex items-center gap-2`}
         >
           <FontAwesomeIcon
             icon={faBookmark}
-            className={`w-4 ${
+            className={`w-4 h-4 ${
               active === "/links" ? "text-white" : "text-sky-300"
             }`}
           />
@@ -87,14 +87,12 @@ export default function ({ className }: { className?: string }) {
       <Link href="/collections">
         <div
           className={`${
-            active === "/collections"
-              ? "bg-sky-500"
-              : "hover:bg-gray-50 hover:outline bg-gray-100"
-          } outline-sky-100 outline-1 duration-100 rounded-md my-1 p-2 cursor-pointer flex items-center gap-2`}
+            active === "/collections" ? "bg-sky-500" : "hover:bg-slate-200"
+          } outline-sky-100 outline-1 duration-100  py-1 px-4  cursor-pointer flex items-center gap-2`}
         >
           <FontAwesomeIcon
             icon={faBox}
-            className={`w-4 ${
+            className={`w-4 h-4 ${
               active === "/collections" ? "text-white" : "text-sky-300"
             }`}
           />
@@ -109,7 +107,7 @@ export default function ({ className }: { className?: string }) {
       </Link>
 
       <div className="text-gray-500 mt-5">
-        <p className="text-sm p-2">Collections</p>
+        <p className="text-sm px-4 mb-2">Collections</p>
       </div>
       <div>
         {collections
@@ -127,7 +125,7 @@ export default function ({ className }: { className?: string }) {
           })}
       </div>
       <div className="text-gray-500 mt-5">
-        <p className="text-sm p-2">Tags</p>
+        <p className="text-sm px-4 mb-2">Tags</p>
       </div>
       <div>
         {tags
diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx
index 0bc6083..4287211 100644
--- a/pages/dashboard.tsx
+++ b/pages/dashboard.tsx
@@ -84,8 +84,8 @@ export default function () {
             {links
               .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()
               )
               .slice(0, 5)
               .map((e, i) => (