diff --git a/components/CollectionCard.tsx b/components/CollectionCard.tsx
index ca5253b..2880959 100644
--- a/components/CollectionCard.tsx
+++ b/components/CollectionCard.tsx
@@ -76,11 +76,11 @@ export default function CollectionCard({ collection, className }: Props) {
             <div className="text-black dark:text-white font-bold text-sm flex justify-end gap-1 items-center">
               <FontAwesomeIcon
                 icon={faLink}
-                className="w-5 h-5 text-black dark:text-white"
+                className="w-5 h-5 text-gray-500 dark:text-gray-300"
               />
               {collection._count && collection._count.links}
             </div>
-            <div className="flex items-center justify-end gap-1 text-gray-600 dark:text-white">
+            <div className="flex items-center justify-end gap-1 text-gray-500 dark:text-gray-300">
               <FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
               <p className="font-bold text-xs">{formattedDate}</p>
             </div>
diff --git a/components/Modal/Collection/CollectionInfo.tsx b/components/Modal/Collection/CollectionInfo.tsx
index 669d05e..ff00919 100644
--- a/components/Modal/Collection/CollectionInfo.tsx
+++ b/components/Modal/Collection/CollectionInfo.tsx
@@ -104,7 +104,7 @@ export default function CollectionInfo({
         <div className="w-full">
           <p className="text-sm text-black dark:text-white mb-2">Description</p>
           <textarea
-            className="w-full h-[11.4rem] resize-none border rounded-md duration-100 bg-white dark:bg-neutral-950 p-2 outline-none border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600"
+            className="w-full h-[11.4rem] resize-none border rounded-md duration-100 bg-gray-50 dark:bg-neutral-950 p-2 outline-none border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600"
             placeholder="The purpose of this Collection..."
             value={collection.description}
             onChange={(e) =>
diff --git a/components/Modal/Collection/DeleteCollection.tsx b/components/Modal/Collection/DeleteCollection.tsx
index d119d5d..e4ba006 100644
--- a/components/Modal/Collection/DeleteCollection.tsx
+++ b/components/Modal/Collection/DeleteCollection.tsx
@@ -51,7 +51,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 dark:text-white">
+            <div className="text-black dark:text-white">
               <p>
                 Please note that deleting the collection will permanently remove
                 all its contents, including the following:
@@ -98,7 +98,7 @@ export default function DeleteCollection({
           </div>
         </>
       ) : (
-        <p className="text-gray-500 dark:text-white">
+        <p className="text-black dark:text-white">
           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 6c6d5c3..3f2f3e6 100644
--- a/components/Modal/Collection/TeamManagement.tsx
+++ b/components/Modal/Collection/TeamManagement.tsx
@@ -128,7 +128,7 @@ export default function TeamManagement({
             }
           />
 
-          <p className="text-gray-500 dark:text-white text-sm">
+          <p className="text-gray-500 dark:text-gray-300 text-sm">
             This will let <b>Anyone</b> to view this collection.
           </p>
         </>
@@ -204,7 +204,7 @@ export default function TeamManagement({
 
       {collection?.members[0]?.user && (
         <>
-          <p className="text-center text-gray-500 dark:text-white text-xs sm:text-sm">
+          <p className="text-center text-gray-500 dark:text-gray-300 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">
@@ -219,7 +219,7 @@ export default function TeamManagement({
                     {permissions === true && (
                       <FontAwesomeIcon
                         icon={faClose}
-                        className="absolute right-2 top-2 text-gray-500 dark:text-white h-4 hover:text-red-500 duration-100 cursor-pointer"
+                        className="absolute right-2 top-2 text-gray-500 dark:text-gray-300 h-4 hover:text-red-500 dark:hover:text-red-500 duration-100 cursor-pointer"
                         title="Remove Member"
                         onClick={() => {
                           const updatedMembers = collection.members.filter(
@@ -248,7 +248,7 @@ export default function TeamManagement({
                         </p>
                       </div>
                     </div>
-                    <div className="flex sm:block items-center gap-5 min-w-[10rem]">
+                    <div className="flex sm:block items-center justify-between gap-5 min-w-[10rem]">
                       <div>
                         <p
                           className={`font-bold text-sm text-black dark:text-white ${
@@ -258,7 +258,7 @@ export default function TeamManagement({
                           Permissions
                         </p>
                         {permissions === true && (
-                          <p className="text-xs text-gray-500 dark:text-white mb-2">
+                          <p className="text-xs text-gray-500 dark:text-gray-300 mb-2">
                             (Click to toggle.)
                           </p>
                         )}
@@ -268,7 +268,7 @@ export default function TeamManagement({
                       !e.canCreate &&
                       !e.canUpdate &&
                       !e.canDelete ? (
-                        <p className="text-sm text-gray-500 dark:text-white">
+                        <p className="text-sm text-gray-500 dark:text-gray-300">
                           Has no permissions.
                         </p>
                       ) : (
diff --git a/components/Modal/Link/AddOrEditLink.tsx b/components/Modal/Link/AddOrEditLink.tsx
index c7e2cbf..7b72a20 100644
--- a/components/Modal/Link/AddOrEditLink.tsx
+++ b/components/Modal/Link/AddOrEditLink.tsx
@@ -228,7 +228,7 @@ export default function AddOrEditLink({
                     ? "Will be auto generated if nothing is provided."
                     : ""
                 }
-                className="resize-none w-full rounded-md p-2 border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100 dark:bg-neutral-950"
+                className="resize-none w-full rounded-md p-2 border-sky-100 bg-gray-50 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100 dark:bg-neutral-950"
               />
             </div>
           </div>
diff --git a/components/Modal/Link/LinkDetails.tsx b/components/Modal/Link/LinkDetails.tsx
index 8a2b91d..6dd11bb 100644
--- a/components/Modal/Link/LinkDetails.tsx
+++ b/components/Modal/Link/LinkDetails.tsx
@@ -235,7 +235,7 @@ export default function LinkDetails({ link, isOwnerOrMod }: Props) {
               <FontAwesomeIcon icon={faFileImage} className="w-6 h-6" />
             </div>
 
-            <p className="text-gray-500 dark:text-white">Screenshot</p>
+            <p className="text-black dark:text-white">Screenshot</p>
           </div>
 
           <div className="flex text-black dark:text-white gap-1">
@@ -269,7 +269,7 @@ export default function LinkDetails({ link, isOwnerOrMod }: Props) {
               <FontAwesomeIcon icon={faFilePdf} className="w-6 h-6" />
             </div>
 
-            <p className="text-gray-500 dark:text-white">PDF</p>
+            <p className="text-black dark:text-white">PDF</p>
           </div>
 
           <div className="flex text-black dark:text-white gap-1">
diff --git a/components/Modal/User/PrivacySettings.tsx b/components/Modal/User/PrivacySettings.tsx
index 82631f7..12080fc 100644
--- a/components/Modal/User/PrivacySettings.tsx
+++ b/components/Modal/User/PrivacySettings.tsx
@@ -144,7 +144,7 @@ export default function PrivacySettings({
               visibility to your profile. Separated by comma.
             </p>
             <textarea
-              className="w-full resize-none border rounded-md duration-100 bg-white dark:bg-neutral-950 p-2 outline-none border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600"
+              className="w-full resize-none border rounded-md duration-100 bg-gray-50 dark:bg-neutral-950 p-2 outline-none border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600"
               placeholder="Your profile is hidden from everyone right now..."
               value={whitelistedUsersTextbox}
               onChange={(e) => {
diff --git a/components/Modal/index.tsx b/components/Modal/index.tsx
index 63e34e5..b52feff 100644
--- a/components/Modal/index.tsx
+++ b/components/Modal/index.tsx
@@ -23,7 +23,7 @@ export default function Modal({ toggleModal, className, children }: Props) {
           >
             <FontAwesomeIcon
               icon={faChevronLeft}
-              className="w-4 h-4 text-gray-500 dark:text-gray-200"
+              className="w-4 h-4 text-gray-500 dark:text-gray-300"
             />
           </div>
           {children}
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index b5389c4..ee300e0 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -47,7 +47,7 @@ export default function Navbar() {
     <div className="flex justify-between gap-2 items-center px-5 py-2 border-solid border-b-sky-100 dark:border-b-neutral-700 border-b h-16">
       <div
         onClick={toggleSidebar}
-        className="inline-flex lg:hidden gap-1 items-center select-none cursor-pointer p-[0.687rem] text-black dark:text-white rounded-md duration-100 hover:bg-slate-200 dark:hover:bg-neutral-700"
+        className="inline-flex lg:hidden gap-1 items-center select-none cursor-pointer p-[0.687rem] text-gray-500 dark:text-gray-300 rounded-md duration-100 hover:bg-slate-200 dark:hover:bg-neutral-700"
       >
         <FontAwesomeIcon icon={faBars} className="w-5 h-5" />
       </div>
diff --git a/components/Search.tsx b/components/Search.tsx
index f3c8a3b..bc140c3 100644
--- a/components/Search.tsx
+++ b/components/Search.tsx
@@ -44,7 +44,7 @@ export default function Search() {
           router.push("/search/" + encodeURIComponent(searchQuery))
         }
         autoFocus={searchBox}
-        className="border border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600 rounded-md pl-10 py-2 pr-2 w-44 sm:w-60 dark:hover:border-neutral-600 md:focus:w-80 hover:border-sky-300 duration-100 outline-none dark:bg-neutral-950"
+        className="border border-sky-100 bg-gray-50 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600 rounded-md pl-10 py-2 pr-2 w-44 sm:w-60 dark:hover:border-neutral-600 md:focus:w-80 hover:border-sky-300 duration-100 outline-none dark:bg-neutral-950"
       />
     </div>
   );
diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
index 1afbf94..90a9842 100644
--- a/components/Sidebar.tsx
+++ b/components/Sidebar.tsx
@@ -114,7 +114,7 @@ export default function Sidebar({ className }: { className?: string }) {
           onClick={() => {
             setCollectionDisclosure(!collectionDisclosure);
           }}
-          className="flex items-center justify-between text-sm w-full text-left mb-2 pl-2 font-bold text-gray-500 dark:text-white mt-5"
+          className="flex items-center justify-between text-sm w-full text-left mb-2 pl-2 font-bold text-gray-500 dark:text-gray-300 mt-5"
         >
           <p>Collections</p>
 
@@ -164,7 +164,7 @@ export default function Sidebar({ className }: { className?: string }) {
               <div
                 className={`duration-100 py-1 px-2 flex items-center gap-2 w-full rounded-md h-8 capitalize`}
               >
-                <p className="text-gray-500 dark:text-white text-xs font-semibold truncate w-full pr-7">
+                <p className="text-gray-500 dark:text-gray-300 text-xs font-semibold truncate w-full pr-7">
                   You Have No Collections...
                 </p>
               </div>
@@ -177,7 +177,7 @@ export default function Sidebar({ className }: { className?: string }) {
           onClick={() => {
             setTagDisclosure(!tagDisclosure);
           }}
-          className="flex items-center justify-between text-sm w-full text-left mb-2 pl-2 font-bold text-gray-500 dark:text-white mt-5"
+          className="flex items-center justify-between text-sm w-full text-left mb-2 pl-2 font-bold text-gray-500 dark:text-gray-300 mt-5"
         >
           <p>Tags</p>
           <FontAwesomeIcon
@@ -223,7 +223,7 @@ export default function Sidebar({ className }: { className?: string }) {
               <div
                 className={`duration-100 py-1 px-2 flex items-center gap-2 w-full rounded-md h-8 capitalize`}
               >
-                <p className="text-gray-500 dark:text-white text-xs font-semibold truncate w-full pr-7">
+                <p className="text-gray-500 dark:text-gray-300 text-xs font-semibold truncate w-full pr-7">
                   You Have No Tags...
                 </p>
               </div>
diff --git a/components/TextInput.tsx b/components/TextInput.tsx
index c3909de..a075757 100644
--- a/components/TextInput.tsx
+++ b/components/TextInput.tsx
@@ -27,7 +27,7 @@ export default function TextInput({
       value={value}
       onChange={onChange}
       onKeyDown={onKeyDown}
-      className={`w-full rounded-md p-2 border-sky-100 dark:border-neutral-700 dark:bg-neutral-950 border-solid border outline-none focus:border-sky-700 focus:dark:border-sky-600 duration-100 ${className}`}
+      className={`w-full rounded-md p-2 border-sky-100 dark:border-neutral-700 bg-gray-50 dark:bg-neutral-950 border-solid border outline-none focus:border-sky-300 focus:dark:border-sky-600 duration-100 ${className}`}
     />
   );
 }
diff --git a/lib/api/storage/readFile.ts b/lib/api/storage/readFile.ts
index 1900498..0721d9d 100644
--- a/lib/api/storage/readFile.ts
+++ b/lib/api/storage/readFile.ts
@@ -125,7 +125,7 @@ const fileNotFoundTemplate = `<!DOCTYPE html>
                                 <h2>It is possible that the file you're looking for either doesn't exist or hasn't been created yet.</h2>
                                 <h3>Some possible reasons are:</h3>
                                 <ul>
-                                  <li>You are trying to access a file too early, before it has been fully archived. In this case, refreshing the page might resolve the issue.</li>
+                                  <li>You are trying to access a file too early, before it has been fully archived. If that's the case, refreshing the page might resolve the issue.</li>
                                   <li>The file doesn't exist either because it encountered an error while being archived, or it simply doesn't exist.</li>
                                 </ul>
                               </body>
diff --git a/pages/collections/[id].tsx b/pages/collections/[id].tsx
index a664ce2..3dad316 100644
--- a/pages/collections/[id].tsx
+++ b/pages/collections/[id].tsx
@@ -128,7 +128,7 @@ export default function Index() {
                   <FontAwesomeIcon
                     icon={faSort}
                     id="sort-dropdown"
-                    className="w-5 h-5 text-gray-500 dark:text-white"
+                    className="w-5 h-5 text-gray-500 dark:text-gray-300"
                   />
                 </div>
 
@@ -150,7 +150,7 @@ export default function Index() {
                     icon={faEllipsis}
                     id="expand-dropdown"
                     title="More"
-                    className="w-5 h-5 text-gray-500 dark:text-white"
+                    className="w-5 h-5 text-gray-500 dark:text-gray-300"
                   />
                 </div>
                 {expandDropdown ? (
diff --git a/pages/collections/index.tsx b/pages/collections/index.tsx
index 1dc5aaa..2d7a0d3 100644
--- a/pages/collections/index.tsx
+++ b/pages/collections/index.tsx
@@ -52,7 +52,7 @@ export default function Collections() {
                 <FontAwesomeIcon
                   icon={faEllipsis}
                   id="expand-dropdown"
-                  className="w-5 h-5 text-gray-500 dark:text-white"
+                  className="w-5 h-5 text-gray-500 dark:text-gray-300"
                 />
               </div>
 
@@ -91,7 +91,7 @@ export default function Collections() {
               <FontAwesomeIcon
                 icon={faSort}
                 id="sort-dropdown"
-                className="w-5 h-5 text-gray-500 dark:text-white"
+                className="w-5 h-5 text-gray-500 dark:text-gray-300"
               />
             </div>
 
diff --git a/pages/links.tsx b/pages/links.tsx
index 1fdc117..91dcef6 100644
--- a/pages/links.tsx
+++ b/pages/links.tsx
@@ -40,7 +40,7 @@ export default function Links() {
               <FontAwesomeIcon
                 icon={faSort}
                 id="sort-dropdown"
-                className="w-5 h-5 text-gray-500 dark:text-gray-200"
+                className="w-5 h-5 text-gray-500 dark:text-gray-300"
               />
             </div>
 
diff --git a/pages/search/[query].tsx b/pages/search/[query].tsx
index 191c771..cdc62f6 100644
--- a/pages/search/[query].tsx
+++ b/pages/search/[query].tsx
@@ -58,7 +58,7 @@ export default function Links() {
                 <FontAwesomeIcon
                   icon={faFilter}
                   id="filter-dropdown"
-                  className="w-5 h-5 text-gray-500 dark:text-white"
+                  className="w-5 h-5 text-gray-500 dark:text-gray-300"
                 />
               </div>
 
@@ -80,7 +80,7 @@ export default function Links() {
                 <FontAwesomeIcon
                   icon={faSort}
                   id="sort-dropdown"
-                  className="w-5 h-5 text-gray-500 dark:text-white"
+                  className="w-5 h-5 text-gray-500 dark:text-gray-300"
                 />
               </div>
 
diff --git a/pages/tags/[id].tsx b/pages/tags/[id].tsx
index bb80267..b6be145 100644
--- a/pages/tags/[id].tsx
+++ b/pages/tags/[id].tsx
@@ -53,7 +53,7 @@ export default function Index() {
               <FontAwesomeIcon
                 icon={faSort}
                 id="sort-dropdown"
-                className="w-5 h-5 text-gray-500 dark:text-white"
+                className="w-5 h-5 text-gray-500 dark:text-gray-300"
               />
             </div>
 
diff --git a/styles/globals.css b/styles/globals.css
index bbc732d..f715204 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -192,7 +192,7 @@
 /* react-select */
 @layer components {
   .react-select-container .react-select__control {
-    @apply dark:bg-neutral-950 dark:border-neutral-700 dark:hover:border-neutral-500;
+    @apply dark:bg-neutral-950 bg-gray-50 dark:border-neutral-700 dark:hover:border-neutral-500;
   }
 
   .react-select-container {