diff --git a/components/CollectionCard.tsx b/components/CollectionCard.tsx
index 38a554e..ffde8ee 100644
--- a/components/CollectionCard.tsx
+++ b/components/CollectionCard.tsx
@@ -11,7 +11,7 @@ import {
   faEllipsis,
 } from "@fortawesome/free-solid-svg-icons";
 import Link from "next/link";
-import { ExtendedCollection } from "@/types/global";
+import { CollectionIncludingMembers } from "@/types/global";
 import useLinkStore from "@/store/links";
 import ImageWithFallback from "./ImageWithFallback";
 import Dropdown from "./Dropdown";
@@ -20,9 +20,15 @@ import Modal from "@/components/Modal";
 import EditCollection from "@/components/Modal/EditCollection";
 import DeleteCollection from "@/components/Modal/DeleteCollection";
 
-export default function ({ collection }: { collection: ExtendedCollection }) {
+export default function ({
+  collection,
+}: {
+  collection: CollectionIncludingMembers;
+}) {
   const { links } = useLinkStore();
-  const formattedDate = new Date(collection.createdAt).toLocaleString("en-US", {
+  const formattedDate = new Date(
+    collection.createdAt as unknown as string
+  ).toLocaleString("en-US", {
     year: "numeric",
     month: "short",
     day: "numeric",
@@ -61,7 +67,7 @@ export default function ({ collection }: { collection: ExtendedCollection }) {
           <div className="flex justify-between items-center">
             <div className="text-sky-400 flex items-center w-full">
               {collection.members
-                .sort((a, b) => a.userId - b.userId)
+                .sort((a, b) => (a.user.id as number) - (b.user.id as number))
                 .map((e, i) => {
                   return (
                     <ImageWithFallback
@@ -125,7 +131,7 @@ export default function ({ collection }: { collection: ExtendedCollection }) {
         <Modal toggleModal={toggleEditCollectionModal}>
           <EditCollection
             toggleCollectionModal={toggleEditCollectionModal}
-            collection={collection}
+            activeCollection={collection}
           />
         </Modal>
       ) : null}
diff --git a/components/Dashboard/CollectionItem.tsx b/components/Dashboard/CollectionItem.tsx
index 5afd8a5..6053f69 100644
--- a/components/Dashboard/CollectionItem.tsx
+++ b/components/Dashboard/CollectionItem.tsx
@@ -6,16 +6,15 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faChevronRight } from "@fortawesome/free-solid-svg-icons";
 import Link from "next/link";
-import { ExtendedCollection } from "@/types/global";
+import { CollectionIncludingMembers } from "@/types/global";
 import useLinkStore from "@/store/links";
 
-export default function ({ collection }: { collection: ExtendedCollection }) {
+export default function ({
+  collection,
+}: {
+  collection: CollectionIncludingMembers;
+}) {
   const { links } = useLinkStore();
-  const formattedDate = new Date(collection.createdAt).toLocaleString("en-US", {
-    year: "numeric",
-    month: "short",
-    day: "numeric",
-  });
 
   return (
     <Link
@@ -51,7 +50,6 @@ export default function ({ collection }: { collection: ExtendedCollection }) {
           })}
         </div>
         <div className="flex gap-2 items-baseline">
-          <p className="text-sky-300 font-bold text-sm">{formattedDate}</p>
           <p className="text-sky-500 font-bold">
             {links.filter((e) => e.collectionId === collection.id).length} Links
           </p>
diff --git a/components/Modal/AddCollection.tsx b/components/Modal/AddCollection.tsx
index e949c28..00157c5 100644
--- a/components/Modal/AddCollection.tsx
+++ b/components/Modal/AddCollection.tsx
@@ -3,7 +3,7 @@
 // This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
 // You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
 
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   faClose,
@@ -12,7 +12,7 @@ import {
   faUserPlus,
 } from "@fortawesome/free-solid-svg-icons";
 import useCollectionStore from "@/store/collections";
-import { ExtendedCollection, NewCollection } from "@/types/global";
+import { CollectionIncludingMembers, Member } from "@/types/global";
 import { useSession } from "next-auth/react";
 import RequiredBadge from "../RequiredBadge";
 import addMemberToCollection from "@/lib/client/addMemberToCollection";
@@ -23,33 +23,52 @@ type Props = {
 };
 
 export default function AddCollection({ toggleCollectionModal }: Props) {
-  const [newCollection, setNewCollection] = useState<NewCollection>({
+  const session = useSession();
+
+  const [collection, setCollection] = useState<CollectionIncludingMembers>({
     name: "",
     description: "",
+    ownerId: session.data?.user.id as number,
     members: [],
   });
 
-  const [memberEmail, setMemberEmail] = useState("");
+  const [member, setMember] = useState<Member>({
+    canCreate: false,
+    canUpdate: false,
+    canDelete: false,
+    user: {
+      name: "",
+      email: "",
+    },
+  });
 
   const { addCollection } = useCollectionStore();
 
-  const session = useSession();
-
   const submit = async () => {
-    console.log(newCollection);
+    if (!collection) return null;
 
-    const response = await addCollection(newCollection as NewCollection);
+    const response = await addCollection(collection);
 
     if (response) toggleCollectionModal();
   };
 
-  const setMemberState = (newMember: any) => {
-    setNewCollection({
-      ...newCollection,
-      members: [...newCollection.members, newMember],
+  const setMemberState = (newMember: Member) => {
+    if (!collection) return null;
+
+    setCollection({
+      ...collection,
+      members: [...collection.members, newMember],
     });
 
-    setMemberEmail("");
+    setMember({
+      canCreate: false,
+      canUpdate: false,
+      canDelete: false,
+      user: {
+        name: "",
+        email: "",
+      },
+    });
   };
 
   return (
@@ -63,9 +82,9 @@ export default function AddCollection({ toggleCollectionModal }: Props) {
             <RequiredBadge />
           </p>
           <input
-            value={newCollection.name}
+            value={collection.name}
             onChange={(e) =>
-              setNewCollection({ ...newCollection, name: e.target.value })
+              setCollection({ ...collection, name: e.target.value })
             }
             type="text"
             placeholder="e.g. Example Collection"
@@ -76,10 +95,10 @@ export default function AddCollection({ toggleCollectionModal }: Props) {
         <div className="w-full">
           <p className="text-sm font-bold text-sky-300 mb-2">Description</p>
           <input
-            value={newCollection.description}
+            value={collection.description}
             onChange={(e) =>
-              setNewCollection({
-                ...newCollection,
+              setCollection({
+                ...collection,
                 description: e.target.value,
               })
             }
@@ -95,9 +114,12 @@ export default function AddCollection({ toggleCollectionModal }: Props) {
       <p className="text-sm font-bold text-sky-300">Members</p>
       <div className="relative">
         <input
-          value={memberEmail}
+          value={member.user.email}
           onChange={(e) => {
-            setMemberEmail(e.target.value);
+            setMember({
+              ...member,
+              user: { ...member.user, email: e.target.value },
+            });
           }}
           type="text"
           placeholder="Email"
@@ -108,10 +130,9 @@ export default function AddCollection({ toggleCollectionModal }: Props) {
           onClick={() =>
             addMemberToCollection(
               session.data?.user.email as string,
-              memberEmail,
-              newCollection as unknown as ExtendedCollection,
-              setMemberState,
-              "ADD"
+              member.user.email as string,
+              collection,
+              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"
@@ -120,143 +141,148 @@ export default function AddCollection({ toggleCollectionModal }: Props) {
         </div>
       </div>
 
-      {newCollection.members[0] ? (
-        <p className="text-center text-gray-500 text-xs sm:text-sm">
-          (All Members have <b>Read</b> access to this collection.)
-        </p>
-      ) : null}
+      {collection?.members[0]?.user ? (
+        <>
+          <p className="text-center text-gray-500 text-xs sm:text-sm">
+            (All Members have <b>Read</b> access to this collection.)
+          </p>
 
-      <div className="h-36 overflow-auto flex flex-col gap-3 rounded-md shadow-inner">
-        {newCollection.members.map((e, i) => {
-          return (
-            <div
-              key={i}
-              className="relative border p-2 rounded-md border-sky-100 flex flex-col sm:flex-row sm:items-center gap-2 justify-between"
-            >
-              <FontAwesomeIcon
-                icon={faClose}
-                className="absolute right-2 top-2 text-gray-500 h-4 hover:text-red-500 duration-100 cursor-pointer"
-                title="Remove Member"
-                onClick={() => {
-                  const updatedMembers = newCollection.members.filter(
-                    (member) => {
-                      return member.email !== e.email;
-                    }
-                  );
-                  setNewCollection({
-                    ...newCollection,
-                    members: updatedMembers,
-                  });
-                }}
-              />
-              <div className="flex items-center gap-2">
-                <ImageWithFallback
+          <div className="h-36 overflow-auto flex flex-col gap-3 rounded-md shadow-inner">
+            {collection.members.map((e, i) => {
+              return (
+                <div
                   key={i}
-                  // @ts-ignore
-                  src={`/api/avatar/${e.id}`}
-                  className="h-10 w-10 shadow rounded-full border-[3px] border-sky-100"
+                  className="relative border p-2 rounded-md border-sky-100 flex flex-col sm:flex-row sm:items-center gap-2 justify-between"
                 >
-                  <div className="text-white bg-sky-500 h-10 w-10 shadow rounded-full border-[3px] border-sky-100 flex items-center justify-center">
-                    <FontAwesomeIcon icon={faUser} className="w-5 h-5" />
+                  <FontAwesomeIcon
+                    icon={faClose}
+                    className="absolute right-2 top-2 text-gray-500 h-4 hover:text-red-500 duration-100 cursor-pointer"
+                    title="Remove Member"
+                    onClick={() => {
+                      const updatedMembers = collection.members.filter(
+                        (member) => {
+                          return member.user.email !== e.user.email;
+                        }
+                      );
+                      setCollection({
+                        ...collection,
+                        members: updatedMembers,
+                      });
+                    }}
+                  />
+                  <div className="flex items-center gap-2">
+                    <ImageWithFallback
+                      key={i}
+                      src={`/api/avatar/${e.userId}`}
+                      className="h-10 w-10 shadow rounded-full border-[3px] border-sky-100"
+                    >
+                      <div className="text-white bg-sky-500 h-10 w-10 shadow rounded-full border-[3px] border-sky-100 flex items-center justify-center">
+                        <FontAwesomeIcon icon={faUser} className="w-5 h-5" />
+                      </div>
+                    </ImageWithFallback>
+                    <div>
+                      <p className="text-sm font-bold text-sky-500">
+                        {e.user.name}
+                      </p>
+                      <p className="text-sky-900">{e.user.email}</p>
+                    </div>
                   </div>
-                </ImageWithFallback>
-                <div>
-                  <p className="text-sm font-bold text-sky-500">{e.name}</p>
-                  <p className="text-sky-900">{e.email}</p>
-                </div>
-              </div>
-              <div className="flex sm:block items-center gap-5">
-                <div>
-                  <p className="font-bold text-sm text-gray-500">Permissions</p>
-                  <p className="text-xs text-gray-400 mb-2">
-                    (Click to toggle.)
-                  </p>
-                </div>
+                  <div className="flex sm:block items-center gap-5">
+                    <div>
+                      <p className="font-bold text-sm text-gray-500">
+                        Permissions
+                      </p>
+                      <p className="text-xs text-gray-400 mb-2">
+                        (Click to toggle.)
+                      </p>
+                    </div>
 
-                <div>
-                  <label className="cursor-pointer mr-1">
-                    <input
-                      type="checkbox"
-                      id="canCreate"
-                      className="peer sr-only"
-                      checked={e.canCreate}
-                      onChange={() => {
-                        const updatedMembers = newCollection.members.map(
-                          (member) => {
-                            if (member.email === e.email) {
-                              return { ...member, canCreate: !e.canCreate };
-                            }
-                            return member;
-                          }
-                        );
-                        setNewCollection({
-                          ...newCollection,
-                          members: updatedMembers,
-                        });
-                      }}
-                    />
-                    <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">
-                      Create
-                    </span>
-                  </label>
+                    <div>
+                      <label className="cursor-pointer mr-1">
+                        <input
+                          type="checkbox"
+                          id="canCreate"
+                          className="peer sr-only"
+                          checked={e.canCreate}
+                          onChange={() => {
+                            const updatedMembers = collection.members.map(
+                              (member) => {
+                                if (member.user.email === e.user.email) {
+                                  return { ...member, canCreate: !e.canCreate };
+                                }
+                                return member;
+                              }
+                            );
+                            setCollection({
+                              ...collection,
+                              members: updatedMembers,
+                            });
+                          }}
+                        />
+                        <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">
+                          Create
+                        </span>
+                      </label>
 
-                  <label className="cursor-pointer mr-1">
-                    <input
-                      type="checkbox"
-                      id="canUpdate"
-                      className="peer sr-only"
-                      checked={e.canUpdate}
-                      onChange={() => {
-                        const updatedMembers = newCollection.members.map(
-                          (member) => {
-                            if (member.email === e.email) {
-                              return { ...member, canUpdate: !e.canUpdate };
-                            }
-                            return member;
-                          }
-                        );
-                        setNewCollection({
-                          ...newCollection,
-                          members: updatedMembers,
-                        });
-                      }}
-                    />
-                    <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">
-                      Update
-                    </span>
-                  </label>
+                      <label className="cursor-pointer mr-1">
+                        <input
+                          type="checkbox"
+                          id="canUpdate"
+                          className="peer sr-only"
+                          checked={e.canUpdate}
+                          onChange={() => {
+                            const updatedMembers = collection.members.map(
+                              (member) => {
+                                if (member.user.email === e.user.email) {
+                                  return { ...member, canUpdate: !e.canUpdate };
+                                }
+                                return member;
+                              }
+                            );
+                            setCollection({
+                              ...collection,
+                              members: updatedMembers,
+                            });
+                          }}
+                        />
+                        <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">
+                          Update
+                        </span>
+                      </label>
 
-                  <label className="cursor-pointer mr-1">
-                    <input
-                      type="checkbox"
-                      id="canDelete"
-                      className="peer sr-only"
-                      checked={e.canDelete}
-                      onChange={() => {
-                        const updatedMembers = newCollection.members.map(
-                          (member) => {
-                            if (member.email === e.email) {
-                              return { ...member, canDelete: !e.canDelete };
-                            }
-                            return member;
-                          }
-                        );
-                        setNewCollection({
-                          ...newCollection,
-                          members: updatedMembers,
-                        });
-                      }}
-                    />
-                    <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">
-                      Delete
-                    </span>
-                  </label>
+                      <label className="cursor-pointer mr-1">
+                        <input
+                          type="checkbox"
+                          id="canDelete"
+                          className="peer sr-only"
+                          checked={e.canDelete}
+                          onChange={() => {
+                            const updatedMembers = collection.members.map(
+                              (member) => {
+                                if (member.user.email === e.user.email) {
+                                  return { ...member, canDelete: !e.canDelete };
+                                }
+                                return member;
+                              }
+                            );
+                            setCollection({
+                              ...collection,
+                              members: updatedMembers,
+                            });
+                          }}
+                        />
+                        <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">
+                          Delete
+                        </span>
+                      </label>
+                    </div>
+                  </div>
                 </div>
-              </div>
-            </div>
-          );
-        })}
-      </div>
+              );
+            })}
+          </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"
diff --git a/components/Modal/DeleteCollection.tsx b/components/Modal/DeleteCollection.tsx
index b8d3c23..0cd8dde 100644
--- a/components/Modal/DeleteCollection.tsx
+++ b/components/Modal/DeleteCollection.tsx
@@ -6,13 +6,13 @@
 import React, { useState } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faPlus, faTrashCan } from "@fortawesome/free-solid-svg-icons";
-import { ExtendedCollection } from "@/types/global";
+import { CollectionIncludingMembers } from "@/types/global";
 import useCollectionStore from "@/store/collections";
 import { useRouter } from "next/router";
 
 type Props = {
   toggleDeleteCollectionModal: Function;
-  collection: ExtendedCollection;
+  collection: CollectionIncludingMembers;
 };
 
 export default function AddCollection({
@@ -26,6 +26,8 @@ export default function AddCollection({
   const router = useRouter();
 
   const submit = async () => {
+    if (!collection.id) return null;
+
     const response = await removeCollection(collection.id);
     if (response) {
       toggleDeleteCollectionModal();
diff --git a/components/Modal/EditCollection.tsx b/components/Modal/EditCollection.tsx
index 46359ac..96e02bd 100644
--- a/components/Modal/EditCollection.tsx
+++ b/components/Modal/EditCollection.tsx
@@ -8,13 +8,12 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   faClose,
   faPenToSquare,
-  faPlus,
   faTrashCan,
   faUser,
   faUserPlus,
 } from "@fortawesome/free-solid-svg-icons";
 import useCollectionStore from "@/store/collections";
-import { ExtendedCollection } from "@/types/global";
+import { CollectionIncludingMembers, Member } from "@/types/global";
 import { useSession } from "next-auth/react";
 import Modal from "@/components/Modal";
 import DeleteCollection from "@/components/Modal/DeleteCollection";
@@ -25,17 +24,25 @@ import Checkbox from "../Checkbox";
 
 type Props = {
   toggleCollectionModal: Function;
-  collection: ExtendedCollection;
+  activeCollection: CollectionIncludingMembers;
 };
 
 export default function EditCollection({
   toggleCollectionModal,
-  collection,
+  activeCollection,
 }: Props) {
-  const [activeCollection, setActiveCollection] =
-    useState<ExtendedCollection>(collection);
+  const [collection, setCollection] =
+    useState<CollectionIncludingMembers>(activeCollection);
 
-  const [memberEmail, setMemberEmail] = useState("");
+  const [member, setMember] = useState<Member>({
+    canCreate: false,
+    canUpdate: false,
+    canDelete: false,
+    user: {
+      name: "",
+      email: "",
+    },
+  });
 
   const { updateCollection } = useCollectionStore();
 
@@ -47,21 +54,29 @@ export default function EditCollection({
 
   const session = useSession();
 
-  const setMemberState = (newMember: any) => {
-    setActiveCollection({
-      ...activeCollection,
-      members: [...activeCollection.members, newMember],
+  const setMemberState = (newMember: Member) => {
+    if (!collection) return null;
+
+    setCollection({
+      ...collection,
+      members: [...collection.members, newMember],
     });
 
-    setMemberEmail("");
+    setMember({
+      canCreate: false,
+      canUpdate: false,
+      canDelete: false,
+      user: {
+        name: "",
+        email: "",
+      },
+    });
   };
 
   const submit = async () => {
-    console.log(activeCollection);
+    if (!collection) return null;
 
-    const response = await updateCollection(
-      activeCollection as ExtendedCollection
-    );
+    const response = await updateCollection(collection);
 
     if (response) toggleCollectionModal();
   };
@@ -77,9 +92,9 @@ export default function EditCollection({
             <RequiredBadge />
           </p>
           <input
-            value={activeCollection.name}
+            value={collection.name}
             onChange={(e) =>
-              setActiveCollection({ ...activeCollection, name: e.target.value })
+              setCollection({ ...collection, name: e.target.value })
             }
             type="text"
             placeholder="e.g. Example Collection"
@@ -90,10 +105,10 @@ export default function EditCollection({
         <div className="w-full">
           <p className="text-sm font-bold text-sky-300 mb-2">Description</p>
           <input
-            value={activeCollection.description}
+            value={collection.description}
             onChange={(e) =>
-              setActiveCollection({
-                ...activeCollection,
+              setCollection({
+                ...collection,
                 description: e.target.value,
               })
             }
@@ -127,9 +142,12 @@ export default function EditCollection({
 
       <div className="relative">
         <input
-          value={memberEmail}
+          value={member.user.email}
           onChange={(e) => {
-            setMemberEmail(e.target.value);
+            setMember({
+              ...member,
+              user: { ...member.user, email: e.target.value },
+            });
           }}
           type="text"
           placeholder="Email"
@@ -140,10 +158,9 @@ export default function EditCollection({
           onClick={() =>
             addMemberToCollection(
               session.data?.user.email as string,
-              memberEmail,
-              activeCollection,
-              setMemberState,
-              "UPDATE"
+              member.user.email,
+              collection,
+              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"
@@ -151,14 +168,14 @@ export default function EditCollection({
           <FontAwesomeIcon icon={faUserPlus} className="w-6 h-6" />
         </div>
       </div>
-      {activeCollection.members[0] ? (
+      {collection.members[0] ? (
         <p className="text-center text-gray-500 text-xs sm:text-sm">
           (All Members have <b>Read</b> access to this collection.)
         </p>
       ) : null}
 
       <div className="h-36 overflow-auto flex flex-col gap-3 rounded-md shadow-inner">
-        {activeCollection.members.map((e, i) => {
+        {collection.members.map((e, i) => {
           return (
             <div
               key={i}
@@ -169,13 +186,11 @@ export default function EditCollection({
                 className="absolute right-2 top-2 text-gray-500 h-4 hover:text-red-500 duration-100 cursor-pointer"
                 title="Remove Member"
                 onClick={() => {
-                  const updatedMembers = activeCollection.members.filter(
-                    (member) => {
-                      return member.user.email !== e.user.email;
-                    }
-                  );
-                  setActiveCollection({
-                    ...activeCollection,
+                  const updatedMembers = collection.members.filter((member) => {
+                    return member.user.email !== e.user.email;
+                  });
+                  setCollection({
+                    ...collection,
                     members: updatedMembers,
                   });
                 }}
@@ -213,7 +228,7 @@ export default function EditCollection({
                       className="peer sr-only"
                       checked={e.canCreate}
                       onChange={() => {
-                        const updatedMembers = activeCollection.members.map(
+                        const updatedMembers = collection.members.map(
                           (member) => {
                             if (member.user.email === e.user.email) {
                               return { ...member, canCreate: !e.canCreate };
@@ -221,8 +236,8 @@ export default function EditCollection({
                             return member;
                           }
                         );
-                        setActiveCollection({
-                          ...activeCollection,
+                        setCollection({
+                          ...collection,
                           members: updatedMembers,
                         });
                       }}
@@ -239,7 +254,7 @@ export default function EditCollection({
                       className="peer sr-only"
                       checked={e.canUpdate}
                       onChange={() => {
-                        const updatedMembers = activeCollection.members.map(
+                        const updatedMembers = collection.members.map(
                           (member) => {
                             if (member.user.email === e.user.email) {
                               return { ...member, canUpdate: !e.canUpdate };
@@ -247,8 +262,8 @@ export default function EditCollection({
                             return member;
                           }
                         );
-                        setActiveCollection({
-                          ...activeCollection,
+                        setCollection({
+                          ...collection,
                           members: updatedMembers,
                         });
                       }}
@@ -265,7 +280,7 @@ export default function EditCollection({
                       className="peer sr-only"
                       checked={e.canDelete}
                       onChange={() => {
-                        const updatedMembers = activeCollection.members.map(
+                        const updatedMembers = collection.members.map(
                           (member) => {
                             if (member.user.email === e.user.email) {
                               return { ...member, canDelete: !e.canDelete };
@@ -273,8 +288,8 @@ export default function EditCollection({
                             return member;
                           }
                         );
-                        setActiveCollection({
-                          ...activeCollection,
+                        setCollection({
+                          ...collection,
                           members: updatedMembers,
                         });
                       }}
@@ -320,7 +335,7 @@ export default function EditCollection({
       {deleteCollectionModal ? (
         <Modal toggleModal={toggleDeleteCollectionModal}>
           <DeleteCollection
-            collection={activeCollection}
+            collection={collection}
             toggleDeleteCollectionModal={toggleDeleteCollectionModal}
           />
         </Modal>
diff --git a/components/Modal/Team.tsx b/components/Modal/Team.tsx
deleted file mode 100644
index b287d51..0000000
--- a/components/Modal/Team.tsx
+++ /dev/null
@@ -1,265 +0,0 @@
-// Copyright (C) 2022-present Daniel31x13 <daniel31x13@gmail.com>
-// This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, version 3.
-// This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
-// You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
-
-import React, { useState } from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faClose, faPlus, faUser } from "@fortawesome/free-solid-svg-icons";
-import useCollectionStore from "@/store/collections";
-import { ExtendedCollection, NewCollection } from "@/types/global";
-import { useSession } from "next-auth/react";
-import RequiredBadge from "../RequiredBadge";
-import addMemberToCollection from "@/lib/client/addMemberToCollection";
-import ImageWithFallback from "../ImageWithFallback";
-
-type Props = {
-  toggleCollectionModal: Function;
-};
-
-export default function AddCollection({ toggleCollectionModal }: Props) {
-  const [newCollection, setNewCollection] = useState<NewCollection>({
-    name: "",
-    description: "",
-    members: [],
-  });
-
-  const [memberEmail, setMemberEmail] = useState("");
-
-  const { addCollection } = useCollectionStore();
-
-  const session = useSession();
-
-  const submit = async () => {
-    console.log(newCollection);
-
-    const response = await addCollection(newCollection as NewCollection);
-
-    if (response) toggleCollectionModal();
-  };
-
-  const setMemberState = (newMember: any) => {
-    setNewCollection({
-      ...newCollection,
-      members: [...newCollection.members, newMember],
-    });
-
-    setMemberEmail("");
-  };
-
-  return (
-    <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
-      <p className="text-xl text-sky-500 mb-2 text-center">New Collection</p>
-
-      <div className="flex flex-col sm:flex-row gap-3">
-        <div className="w-full">
-          <p className="text-sm font-bold text-sky-300 mb-2">
-            Name
-            <RequiredBadge />
-          </p>
-          <input
-            value={newCollection.name}
-            onChange={(e) =>
-              setNewCollection({ ...newCollection, name: e.target.value })
-            }
-            type="text"
-            placeholder="e.g. Example Collection"
-            className="w-full rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
-          />
-        </div>
-
-        <div className="w-full">
-          <p className="text-sm font-bold text-sky-300 mb-2">Description</p>
-          <input
-            value={newCollection.description}
-            onChange={(e) =>
-              setNewCollection({
-                ...newCollection,
-                description: e.target.value,
-              })
-            }
-            type="text"
-            placeholder="Collection description"
-            className="w-full rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
-          />
-        </div>
-      </div>
-
-      <hr className="border rounded my-2" />
-
-      <p className="text-sm font-bold text-sky-300">Members</p>
-      <div className="relative">
-        <input
-          value={memberEmail}
-          onChange={(e) => {
-            setMemberEmail(e.target.value);
-          }}
-          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"
-        />
-
-        <div
-          onClick={() =>
-            addMemberToCollection(
-              session.data?.user.email as string,
-              memberEmail,
-              newCollection as unknown as ExtendedCollection,
-              setMemberState,
-              "ADD"
-            )
-          }
-          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"
-        >
-          <FontAwesomeIcon icon={faPlus} className="w-4 h-4" />
-        </div>
-      </div>
-
-      {newCollection.members[0] ? (
-        <p className="text-center text-gray-500 text-xs sm:text-sm">
-          (All Members have <b>Read</b> access to this collection.)
-        </p>
-      ) : null}
-
-      <div className="h-36 overflow-auto flex flex-col gap-3 rounded-md shadow-inner">
-        {newCollection.members.map((e, i) => {
-          return (
-            <div
-              key={i}
-              className="relative border p-2 rounded-md border-sky-100 flex flex-col sm:flex-row sm:items-center gap-2 justify-between"
-            >
-              <FontAwesomeIcon
-                icon={faClose}
-                className="absolute right-2 top-2 text-gray-500 h-4 hover:text-red-500 duration-100 cursor-pointer"
-                title="Remove Member"
-                onClick={() => {
-                  const updatedMembers = newCollection.members.filter(
-                    (member) => {
-                      return member.email !== e.email;
-                    }
-                  );
-                  setNewCollection({
-                    ...newCollection,
-                    members: updatedMembers,
-                  });
-                }}
-              />
-              <div className="flex items-center gap-2">
-                <ImageWithFallback
-                  key={i}
-                  // @ts-ignore
-                  src={`/api/avatar/${e.id}`}
-                  className="h-10 w-10 shadow rounded-full border-[3px] border-sky-100"
-                >
-                  <div className="text-white bg-sky-500 h-10 w-10 shadow rounded-full border-[3px] border-sky-100 flex items-center justify-center">
-                    <FontAwesomeIcon icon={faUser} className="w-5 h-5" />
-                  </div>
-                </ImageWithFallback>
-                <div>
-                  <p className="text-sm font-bold text-sky-500">{e.name}</p>
-                  <p className="text-sky-900">{e.email}</p>
-                </div>
-              </div>
-              <div className="flex sm:block items-center gap-5">
-                <div>
-                  <p className="font-bold text-sm text-gray-500">Permissions</p>
-                  <p className="text-xs text-gray-400 mb-2">
-                    (Click to toggle.)
-                  </p>
-                </div>
-
-                <div>
-                  <label className="cursor-pointer mr-1">
-                    <input
-                      type="checkbox"
-                      id="canCreate"
-                      className="peer sr-only"
-                      checked={e.canCreate}
-                      onChange={() => {
-                        const updatedMembers = newCollection.members.map(
-                          (member) => {
-                            if (member.email === e.email) {
-                              return { ...member, canCreate: !e.canCreate };
-                            }
-                            return member;
-                          }
-                        );
-                        setNewCollection({
-                          ...newCollection,
-                          members: updatedMembers,
-                        });
-                      }}
-                    />
-                    <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">
-                      Create
-                    </span>
-                  </label>
-
-                  <label className="cursor-pointer mr-1">
-                    <input
-                      type="checkbox"
-                      id="canUpdate"
-                      className="peer sr-only"
-                      checked={e.canUpdate}
-                      onChange={() => {
-                        const updatedMembers = newCollection.members.map(
-                          (member) => {
-                            if (member.email === e.email) {
-                              return { ...member, canUpdate: !e.canUpdate };
-                            }
-                            return member;
-                          }
-                        );
-                        setNewCollection({
-                          ...newCollection,
-                          members: updatedMembers,
-                        });
-                      }}
-                    />
-                    <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">
-                      Update
-                    </span>
-                  </label>
-
-                  <label className="cursor-pointer mr-1">
-                    <input
-                      type="checkbox"
-                      id="canDelete"
-                      className="peer sr-only"
-                      checked={e.canDelete}
-                      onChange={() => {
-                        const updatedMembers = newCollection.members.map(
-                          (member) => {
-                            if (member.email === e.email) {
-                              return { ...member, canDelete: !e.canDelete };
-                            }
-                            return member;
-                          }
-                        );
-                        setNewCollection({
-                          ...newCollection,
-                          members: updatedMembers,
-                        });
-                      }}
-                    />
-                    <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">
-                      Delete
-                    </span>
-                  </label>
-                </div>
-              </div>
-            </div>
-          );
-        })}
-      </div>
-
-      <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"
-        onClick={submit}
-      >
-        <FontAwesomeIcon icon={faPlus} className="h-5" />
-        Add Collection
-      </div>
-    </div>
-  );
-}
diff --git a/lib/api/controllers/collections/postCollection.ts b/lib/api/controllers/collections/postCollection.ts
index 3de0478..5957b95 100644
--- a/lib/api/controllers/collections/postCollection.ts
+++ b/lib/api/controllers/collections/postCollection.ts
@@ -4,10 +4,13 @@
 // You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { prisma } from "@/lib/api/db";
-import { NewCollection } from "@/types/global";
+import { CollectionIncludingMembers } from "@/types/global";
 import { existsSync, mkdirSync } from "fs";
 
-export default async function (collection: NewCollection, userId: number) {
+export default async function (
+  collection: CollectionIncludingMembers,
+  userId: number
+) {
   if (!collection || collection.name.trim() === "")
     return {
       response: "Please enter a valid collection.",
@@ -43,7 +46,7 @@ export default async function (collection: NewCollection, userId: number) {
       description: collection.description,
       members: {
         create: collection.members.map((e) => ({
-          user: { connect: { email: e.email } },
+          user: { connect: { email: e.user.email } },
           canCreate: e.canCreate,
           canUpdate: e.canUpdate,
           canDelete: e.canDelete,
diff --git a/lib/api/controllers/collections/updateCollection.ts b/lib/api/controllers/collections/updateCollection.ts
index 4815fe4..ff172f5 100644
--- a/lib/api/controllers/collections/updateCollection.ts
+++ b/lib/api/controllers/collections/updateCollection.ts
@@ -4,11 +4,14 @@
 // You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { prisma } from "@/lib/api/db";
-import { ExtendedCollection } from "@/types/global";
+import { CollectionIncludingMembers } from "@/types/global";
 import getPermission from "@/lib/api/getPermission";
 
-export default async function (collection: ExtendedCollection, userId: number) {
-  if (!collection)
+export default async function (
+  collection: CollectionIncludingMembers,
+  userId: number
+) {
+  if (!collection.id)
     return { response: "Please choose a valid collection.", status: 401 };
 
   const collectionIsAccessible = await getPermission(userId, collection.id);
diff --git a/lib/client/addMemberToCollection.ts b/lib/client/addMemberToCollection.ts
index dd8002f..6c64610 100644
--- a/lib/client/addMemberToCollection.ts
+++ b/lib/client/addMemberToCollection.ts
@@ -1,15 +1,15 @@
-import { ExtendedCollection, NewCollection } from "@/types/global";
+import { CollectionIncludingMembers, Member } from "@/types/global";
 import getPublicUserDataByEmail from "./getPublicUserDataByEmail";
 
 const addMemberToCollection = async (
   ownerEmail: string,
   memberEmail: string,
-  collection: ExtendedCollection,
-  setMemberState: Function,
-  collectionMethod: "ADD" | "UPDATE"
+  collection: CollectionIncludingMembers,
+  setMember: (newMember: Member) => null | undefined
 ) => {
-  const checkIfMemberAlreadyExists = collection.members.find((e: any) => {
-    const email = collectionMethod === "ADD" ? e.email : e.user.email;
+  console.log(collection.members);
+  const checkIfMemberAlreadyExists = collection.members.find((e) => {
+    const email = e.user.email;
     return email === memberEmail;
   });
 
@@ -24,30 +24,20 @@ const addMemberToCollection = async (
     // Lookup, get data/err, list ...
     const user = await getPublicUserDataByEmail(memberEmail.trim());
 
-    if (user.email) {
-      const newMember =
-        collectionMethod === "ADD"
-          ? {
-              id: user.id,
-              name: user.name,
-              email: user.email,
-              canCreate: false,
-              canUpdate: false,
-              canDelete: false,
-            }
-          : {
-              collectionId: collection.id,
-              userId: user.id,
-              canCreate: false,
-              canUpdate: false,
-              canDelete: false,
-              user: {
-                name: user.name,
-                email: user.email,
-              },
-            };
+    console.log(collection);
 
-      setMemberState(newMember);
+    if (user.email) {
+      setMember({
+        collectionId: collection.id,
+        userId: user.id,
+        canCreate: false,
+        canUpdate: false,
+        canDelete: false,
+        user: {
+          name: user.name,
+          email: user.email,
+        },
+      });
     }
   }
 };
diff --git a/pages/collections/[id].tsx b/pages/collections/[id].tsx
index 48d7856..59b2d17 100644
--- a/pages/collections/[id].tsx
+++ b/pages/collections/[id].tsx
@@ -11,7 +11,7 @@ import EditCollection from "@/components/Modal/EditCollection";
 import DeleteCollection from "@/components/Modal/DeleteCollection";
 import useCollectionStore from "@/store/collections";
 import useLinkStore from "@/store/links";
-import { ExtendedCollection } from "@/types/global";
+import { CollectionIncludingMembers } from "@/types/global";
 import {
   faAdd,
   faEllipsis,
@@ -46,7 +46,7 @@ export default function () {
   const [sortBy, setSortBy] = useState("Name (A-Z)");
 
   const [activeCollection, setActiveCollection] =
-    useState<ExtendedCollection>();
+    useState<CollectionIncludingMembers>();
 
   const [sortedLinks, setSortedLinks] = useState(links);
 
@@ -128,7 +128,9 @@ export default function () {
                     Team
                   </div>
                   {activeCollection?.members
-                    .sort((a, b) => a.userId - b.userId)
+                    .sort(
+                      (a, b) => (a.user.id as number) - (b.user.id as number)
+                    )
                     .map((e, i) => {
                       return (
                         <ImageWithFallback
@@ -284,7 +286,7 @@ export default function () {
                   <Modal toggleModal={toggleEditCollectionModal}>
                     <EditCollection
                       toggleCollectionModal={toggleEditCollectionModal}
-                      collection={activeCollection}
+                      activeCollection={activeCollection}
                     />
                   </Modal>
                 ) : null}
diff --git a/store/collections.ts b/store/collections.ts
index 6a2f9e2..05d7efe 100644
--- a/store/collections.ts
+++ b/store/collections.ts
@@ -4,15 +4,17 @@
 // You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { create } from "zustand";
-import { ExtendedCollection, NewCollection } from "@/types/global";
+import { CollectionIncludingMembers } from "@/types/global";
 import useTagStore from "./tags";
 import useLinkStore from "./links";
 
 type CollectionStore = {
-  collections: ExtendedCollection[];
+  collections: CollectionIncludingMembers[];
   setCollections: () => void;
-  addCollection: (body: NewCollection) => Promise<boolean>;
-  updateCollection: (collection: ExtendedCollection) => Promise<boolean>;
+  addCollection: (body: CollectionIncludingMembers) => Promise<boolean>;
+  updateCollection: (
+    collection: CollectionIncludingMembers
+  ) => Promise<boolean>;
   removeCollection: (collectionId: number) => Promise<boolean>;
 };
 
diff --git a/types/global.ts b/types/global.ts
index 107cbab..61e1f65 100644
--- a/types/global.ts
+++ b/types/global.ts
@@ -4,7 +4,9 @@
 // You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { Collection, Link, Tag, User } from "@prisma/client";
-import { SetStateAction } from "react";
+
+type OptionalExcluding<T, TRequired extends keyof T> = Partial<T> &
+  Pick<T, TRequired>;
 
 export interface ExtendedLink extends Link {
   tags: Tag[];
@@ -34,18 +36,20 @@ export interface NewCollection {
   }[];
 }
 
-export interface ExtendedCollection extends Collection {
-  members: {
-    collectionId: number;
-    userId: number;
-    canCreate: boolean;
-    canUpdate: boolean;
-    canDelete: boolean;
-    user: {
-      name: string;
-      email: string;
-    };
-  }[];
+export interface Member {
+  collectionId?: number;
+  userId?: number;
+  canCreate: boolean;
+  canUpdate: boolean;
+  canDelete: boolean;
+  user: OptionalExcluding<User, "email" | "name">;
+}
+
+export interface CollectionIncludingMembers
+  extends Omit<Collection, "id" | "createdAt"> {
+  id?: number;
+  createdAt?: Date;
+  members: Member[];
 }
 
 export type SearchSettings = {