diff --git a/components/Modal/Collection/DeleteCollection.tsx b/components/Modal/Collection/DeleteCollection.tsx
index 2295abc..44718bb 100644
--- a/components/Modal/Collection/DeleteCollection.tsx
+++ b/components/Modal/Collection/DeleteCollection.tsx
@@ -50,7 +50,7 @@ export default function DeleteCollection({
           <p className="text-red-500 font-bold text-center">Warning!</p>
 
           <div className="max-h-[20rem] overflow-y-auto">
-            <div className="text-gray-500">
+            <div className="text-gray-500 dark:text-sky-500">
               <p>
                 Please note that deleting the collection will permanently remove
                 all its contents, including the following:
@@ -81,7 +81,7 @@ export default function DeleteCollection({
           </div>
 
           <div className="flex flex-col gap-3">
-            <p className="text-sky-900 select-none text-center">
+            <p className="text-sky-900 dark:text-sky-300 select-none text-center">
               To confirm, type &quot;
               <span className="font-bold text-sky-700">{collection.name}</span>
               &quot; in the box below:
@@ -93,12 +93,12 @@ export default function DeleteCollection({
               onChange={(e) => setInputField(e.target.value)}
               type="text"
               placeholder={`Type "${collection.name}" Here.`}
-              className="w-72 sm:w-96 rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
+              className="w-72 sm:w-96 rounded-md p-3 mx-auto border-sky-100 dark:border-sky-800 dark:bg-blue-950 border-solid border outline-none focus:border-sky-700 duration-100"
             />
           </div>
         </>
       ) : (
-        <p className="text-gray-500">
+        <p className="text-gray-500 dark:text-sky-500">
           Click the button below to leave the current collection:
         </p>
       )}
diff --git a/components/Modal/Collection/TeamManagement.tsx b/components/Modal/Collection/TeamManagement.tsx
index ad9a099..7775534 100644
--- a/components/Modal/Collection/TeamManagement.tsx
+++ b/components/Modal/Collection/TeamManagement.tsx
@@ -117,7 +117,7 @@ export default function TeamManagement({
     <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
       {permissions === true && (
         <>
-          <p className="text-sm text-sky-700">Make Public</p>
+          <p className="text-sm text-sky-700 dark:text-sky-300">Make Public</p>
 
           <Checkbox
             label="Make this a public collection."
@@ -127,7 +127,7 @@ export default function TeamManagement({
             }
           />
 
-          <p className="text-gray-500 text-sm">
+          <p className="text-gray-500 dark:text-sky-500 text-sm">
             This will let <b>Anyone</b> to view this collection.
           </p>
         </>
@@ -135,7 +135,7 @@ export default function TeamManagement({
 
       {collection.isPublic ? (
         <div>
-          <p className="text-sm text-sky-700 mb-2">
+          <p className="text-sm text-sky-700 dark:text-sky-300 mb-2">
             Public Link (Click to copy)
           </p>
           <div
@@ -148,7 +148,7 @@ export default function TeamManagement({
                 console.log(err);
               }
             }}
-            className="w-full hide-scrollbar overflow-x-auto whitespace-nowrap rounded-md p-3 border-sky-100 border-solid border outline-none hover:border-sky-700 duration-100 cursor-text"
+            className="w-full hide-scrollbar overflow-x-auto whitespace-nowrap rounded-md p-3 border-sky-100 dark:border-sky-800 dark:bg-blue-950 border-solid border outline-none hover:border-sky-700 duration-100 cursor-text"
           >
             {publicCollectionURL}
           </div>
@@ -159,7 +159,9 @@ export default function TeamManagement({
 
       {permissions === true && (
         <>
-          <p className="text-sm text-sky-700">Member Management</p>
+          <p className="text-sm text-sky-700 dark:text-sky-300">
+            Member Management
+          </p>
 
           <div className="flex items-center gap-2">
             <input
@@ -181,7 +183,7 @@ export default function TeamManagement({
               }
               type="text"
               placeholder="Username (without the '@')"
-              className="w-full rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
+              className="w-full rounded-md p-3 border-sky-100 dark:border-sky-800 dark:bg-blue-950 border-solid border outline-none focus:border-sky-700 duration-100"
             />
 
             <div
@@ -193,7 +195,7 @@ export default function TeamManagement({
                   setMemberState
                 )
               }
-              className="flex items-center justify-center bg-sky-700 hover:bg-sky-600 duration-100 text-white w-12 h-12 p-3 rounded-md cursor-pointer"
+              className="flex items-center justify-center bg-sky-700 dark:bg-sky-400 hover:bg-sky-600 duration-100 text-white w-12 h-12 p-3 rounded-md cursor-pointer"
             >
               <FontAwesomeIcon icon={faUserPlus} className="w-5 h-5" />
             </div>
@@ -203,7 +205,7 @@ export default function TeamManagement({
 
       {collection?.members[0]?.user && (
         <>
-          <p className="text-center text-gray-500 text-xs sm:text-sm">
+          <p className="text-center text-gray-500 dark:text-sky-500 text-xs sm:text-sm">
             (All Members have <b>Read</b> access to this collection.)
           </p>
           <div className="flex flex-col gap-3 rounded-md">
@@ -218,7 +220,7 @@ export default function TeamManagement({
                     {permissions === true && (
                       <FontAwesomeIcon
                         icon={faClose}
-                        className="absolute right-2 top-2 text-gray-500 h-4 hover:text-red-500 duration-100 cursor-pointer"
+                        className="absolute right-2 top-2 text-gray-500 dark:text-sky-500 h-4 hover:text-red-500 duration-100 cursor-pointer"
                         title="Remove Member"
                         onClick={() => {
                           const updatedMembers = collection.members.filter(
@@ -239,7 +241,7 @@ export default function TeamManagement({
                         className="border-[3px]"
                       />
                       <div>
-                        <p className="text-sm font-bold text-sky-700">
+                        <p className="text-sm font-bold text-sky-700 dark:text-sky-300">
                           {e.user.name}
                         </p>
                         <p className="text-sky-900">@{e.user.username}</p>
@@ -248,14 +250,14 @@ export default function TeamManagement({
                     <div className="flex sm:block items-center gap-5 min-w-[10rem]">
                       <div>
                         <p
-                          className={`font-bold text-sm text-sky-700 ${
+                          className={`font-bold text-sm text-sky-700 dark:text-sky-300 ${
                             permissions === true ? "" : "mb-2"
                           }`}
                         >
                           Permissions
                         </p>
                         {permissions === true && (
-                          <p className="text-xs text-gray-500 mb-2">
+                          <p className="text-xs text-gray-500 dark:text-sky-500 mb-2">
                             (Click to toggle.)
                           </p>
                         )}
@@ -265,7 +267,7 @@ export default function TeamManagement({
                       !e.canCreate &&
                       !e.canUpdate &&
                       !e.canDelete ? (
-                        <p className="text-sm text-gray-500">
+                        <p className="text-sm text-gray-500 dark:text-sky-500">
                           Has no permissions.
                         </p>
                       ) : (
@@ -305,7 +307,7 @@ export default function TeamManagement({
                               }}
                             />
                             <span
-                              className={`text-sky-900 peer-checked:bg-sky-700 text-sm ${
+                              className={`text-sky-900 dark:text-sky-300 peer-checked:bg-sky-700 text-sm ${
                                 permissions === true
                                   ? "hover:bg-slate-200 duration-75"
                                   : ""
@@ -350,7 +352,7 @@ export default function TeamManagement({
                               }}
                             />
                             <span
-                              className={`text-sky-900 peer-checked:bg-sky-700 text-sm ${
+                              className={`text-sky-900 dark:text-sky-300 peer-checked:bg-sky-700 text-sm ${
                                 permissions === true
                                   ? "hover:bg-slate-200 duration-75"
                                   : ""
@@ -395,7 +397,7 @@ export default function TeamManagement({
                               }}
                             />
                             <span
-                              className={`text-sky-900 peer-checked:bg-sky-700 text-sm ${
+                              className={`text-sky-900 dark:text-sky-300 peer-checked:bg-sky-700 text-sm ${
                                 permissions === true
                                   ? "hover:bg-slate-200 duration-75"
                                   : ""
@@ -415,17 +417,17 @@ export default function TeamManagement({
       )}
 
       <div
-        className="relative border px-2 rounded-md border-sky-100 flex min-h-[7rem] sm:min-h-[5rem] gap-2 justify-between"
+        className="relative border px-2 rounded-md border-sky-100 dark:border-sky-800 flex min-h-[7rem] sm:min-h-[5rem] gap-2 justify-between"
         title={`'@${collectionOwner.username}' is the owner of this collection.`}
       >
         <div className="flex items-center gap-2">
           <ProfilePhoto
             src={`/api/avatar/${collection.ownerId}?${Date.now()}`}
-            className="border-[3px]"
+            className="border-[3px] dark:border-sky-800"
           />
           <div>
             <div className="flex items-center gap-1">
-              <p className="text-sm font-bold text-sky-700">
+              <p className="text-sm font-bold text-sky-700 dark:text-sky-400">
                 {collectionOwner.name}
               </p>
               <FontAwesomeIcon
@@ -433,13 +435,15 @@ export default function TeamManagement({
                 className="w-3 h-3 text-yellow-500"
               />
             </div>
-            <p className="text-sky-900">@{collectionOwner.username}</p>
+            <p className="text-sky-900 dark:text-sky-300">
+              @{collectionOwner.username}
+            </p>
           </div>
         </div>
 
-        <div className="flex flex-col justify-center min-w-[10rem]">
-          <p className={`font-bold text-sm text-sky-700`}>Permissions</p>
-          <p className="text-sky-700">Full Access (Owner)</p>
+        <div className="flex flex-col justify-center min-w-[10rem] text-sky-700 dark:text-sky-400">
+          <p className={`font-bold text-sm`}>Permissions</p>
+          <p>Full Access (Owner)</p>
         </div>
       </div>
 
diff --git a/components/Modal/Collection/index.tsx b/components/Modal/Collection/index.tsx
index 655d1c2..0a38761 100644
--- a/components/Modal/Collection/index.tsx
+++ b/components/Modal/Collection/index.tsx
@@ -55,8 +55,8 @@ export default function CollectionModal({
                 <Tab
                   className={({ selected }) =>
                     selected
-                      ? "px-2 py-1 bg-sky-200 duration-100 rounded-md outline-none"
-                      : "px-2 py-1 hover:bg-slate-200 rounded-md duration-100 outline-none"
+                      ? "px-2 py-1 bg-sky-200 dark:bg-sky-500 dark:text-sky-900 duration-100 rounded-md outline-none"
+                      : "px-2 py-1 hover:bg-slate-200 hover:dark:bg-sky-300 hover:dark:text-sky-900 rounded-md duration-100 outline-none"
                   }
                 >
                   Collection Info
@@ -65,8 +65,8 @@ export default function CollectionModal({
               <Tab
                 className={({ selected }) =>
                   selected
-                    ? "px-2 py-1 bg-sky-200 duration-100 rounded-md outline-none"
-                    : "px-2 py-1 hover:bg-slate-200 rounded-md duration-100 outline-none"
+                    ? "px-2 py-1 bg-sky-200 dark:bg-sky-500 dark:text-sky-900 duration-100 rounded-md outline-none"
+                    : "px-2 py-1 hover:bg-slate-200 hover:dark:bg-sky-300 hover:dark:text-sky-900 rounded-md duration-100 outline-none"
                 }
               >
                 {isOwner ? "Share & Collaborate" : "View Team"}
@@ -74,8 +74,8 @@ export default function CollectionModal({
               <Tab
                 className={({ selected }) =>
                   selected
-                    ? "px-2 py-1 bg-sky-200 duration-100 rounded-md outline-none"
-                    : "px-2 py-1 hover:bg-slate-200 rounded-md duration-100 outline-none"
+                    ? "px-2 py-1 bg-sky-200 dark:bg-sky-500 dark:text-sky-900 duration-100 rounded-md outline-none"
+                    : "px-2 py-1 hover:bg-slate-200 hover:dark:bg-sky-300 hover:dark:text-sky-900 rounded-md duration-100 outline-none"
                 }
               >
                 {isOwner ? "Delete Collection" : "Leave Collection"}