diff --git a/components/Dropdown.tsx b/components/Dropdown.tsx
index c20f180..ba5b3a5 100644
--- a/components/Dropdown.tsx
+++ b/components/Dropdown.tsx
@@ -25,13 +25,15 @@ export default function Dropdown({ onClickOutside, className, items }: Props) {
   return (
     <ClickAwayHandler
       onClickOutside={onClickOutside}
-      className={`${className} py-1 shadow-md border border-sky-100 dark:border-sky-800 bg-gray-50 dark:bg-blue-925 rounded-md flex flex-col z-20`}
+      className={`${className} py-1 shadow-md border border-sky-100 dark:border-sky-800 bg-gray-50 dark:bg-sky-900 rounded-md flex flex-col z-20`}
     >
       {items.map((e, i) => {
         const inner = e && (
           <div className="cursor-pointer rounded-md">
             <div className="flex items-center gap-2 py-1 px-2 hover:bg-slate-200 duration-100">
-              <p className="text-sky-900 dark:text-sky-400 select-none">{e.name}</p>
+              <p className="text-sky-900 dark:text-sky-400 select-none">
+                {e.name}
+              </p>
             </div>
           </div>
         );
diff --git a/components/Modal/Collection/CollectionInfo.tsx b/components/Modal/Collection/CollectionInfo.tsx
index 397037f..30512f8 100644
--- a/components/Modal/Collection/CollectionInfo.tsx
+++ b/components/Modal/Collection/CollectionInfo.tsx
@@ -72,11 +72,13 @@ export default function CollectionInfo({
               }
               type="text"
               placeholder="e.g. Example Collection"
-              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"
+              className="w-full rounded-md p-3 border-sky-100 dark:border-sky-800 dark:bg-sky-950 border-solid border outline-none focus:border-sky-700 duration-100"
             />
             <div className="color-picker flex justify-between">
               <div className="flex flex-col justify-between items-center w-32">
-                <p className="text-sm w-full text-sky-700 dark:text-sky-400 mb-2">Icon Color</p>
+                <p className="text-sm w-full text-sky-700 dark:text-sky-400 mb-2">
+                  Icon Color
+                </p>
                 <div style={{ color: collection.color }}>
                   <FontAwesomeIcon
                     icon={faFolder}
@@ -101,9 +103,11 @@ export default function CollectionInfo({
         </div>
 
         <div className="w-full">
-          <p className="text-sm text-sky-700 dark:text-sky-400 mb-2">Description</p>
+          <p className="text-sm text-sky-700 dark:text-sky-400 mb-2">
+            Description
+          </p>
           <textarea
-            className="w-full h-[11.4rem] resize-none border rounded-md duration-100 bg-white dark:bg-blue-950 p-3 outline-none border-sky-100 dark:border-sky-800 focus:border-sky-700"
+            className="w-full h-[11.4rem] resize-none border rounded-md duration-100 bg-white dark:bg-sky-950 p-3 outline-none border-sky-100 dark:border-sky-800 focus:border-sky-700"
             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 44718bb..8fef573 100644
--- a/components/Modal/Collection/DeleteCollection.tsx
+++ b/components/Modal/Collection/DeleteCollection.tsx
@@ -93,7 +93,7 @@ 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 dark:border-sky-800 dark:bg-blue-950 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-sky-950 border-solid border outline-none focus:border-sky-700 duration-100"
             />
           </div>
         </>
diff --git a/components/Modal/Collection/TeamManagement.tsx b/components/Modal/Collection/TeamManagement.tsx
index 7775534..ab9aa5d 100644
--- a/components/Modal/Collection/TeamManagement.tsx
+++ b/components/Modal/Collection/TeamManagement.tsx
@@ -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 dark:border-sky-800 dark:bg-blue-950 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-sky-950 border-solid border outline-none hover:border-sky-700 duration-100 cursor-text"
           >
             {publicCollectionURL}
           </div>
@@ -183,7 +183,7 @@ export default function TeamManagement({
               }
               type="text"
               placeholder="Username (without the '@')"
-              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"
+              className="w-full rounded-md p-3 border-sky-100 dark:border-sky-800 dark:bg-sky-950 border-solid border outline-none focus:border-sky-700 duration-100"
             />
 
             <div
diff --git a/components/Modal/Link/AddOrEditLink.tsx b/components/Modal/Link/AddOrEditLink.tsx
index b839e35..60552bb 100644
--- a/components/Modal/Link/AddOrEditLink.tsx
+++ b/components/Modal/Link/AddOrEditLink.tsx
@@ -135,14 +135,16 @@ export default function AddOrEditLink({
             onChange={(e) => setLink({ ...link, url: e.target.value })}
             type="text"
             placeholder="e.g. http://example.com/"
-            className="w-full rounded-md p-2 border-sky-100 dark:border-sky-800 dark:bg-blue-950 border-solid border outline-none focus:border-sky-700 duration-100"
+            className="w-full rounded-md p-2 border-sky-100 dark:border-sky-800 dark:bg-sky-950 border-solid border outline-none focus:border-sky-700 duration-100"
           />
         </div>
       ) : null}
       <hr className="dark:border-sky-800" />
       <div className="grid sm:grid-cols-2 gap-3">
         <div>
-          <p className="text-sm text-sky-700 dark:text-sky-400 mb-2">Collection</p>
+          <p className="text-sm text-sky-700 dark:text-sky-400 mb-2">
+            Collection
+          </p>
           <CollectionSelection
             onChange={setCollection}
             // defaultValue={{
@@ -177,12 +179,14 @@ export default function AddOrEditLink({
             onChange={(e) => setLink({ ...link, name: e.target.value })}
             type="text"
             placeholder="e.g. Example Link"
-            className="w-full rounded-md p-2 border-sky-100 dark:border-sky-800 dark:bg-blue-950 border-solid border outline-none focus:border-sky-700 duration-100"
+            className="w-full rounded-md p-2 border-sky-100 dark:border-sky-800 dark:bg-sky-950 border-solid border outline-none focus:border-sky-700 duration-100"
           />
         </div>
 
         <div className="sm:col-span-2">
-          <p className="text-sm text-sky-700 dark:text-sky-400 mb-2">Description</p>
+          <p className="text-sm text-sky-700 dark:text-sky-400 mb-2">
+            Description
+          </p>
           <textarea
             value={link.description}
             onChange={(e) => setLink({ ...link, description: e.target.value })}
@@ -191,7 +195,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-sky-800 border-solid border outline-none focus:border-sky-700 duration-100 dark:bg-blue-950"
+            className="resize-none w-full rounded-md p-2 border-sky-100 dark:border-sky-800 border-solid border outline-none focus:border-sky-700 duration-100 dark:bg-sky-950"
           />
         </div>
       </div>
diff --git a/components/Modal/Link/LinkDetails.tsx b/components/Modal/Link/LinkDetails.tsx
index 984af8b..4512876 100644
--- a/components/Modal/Link/LinkDetails.tsx
+++ b/components/Modal/Link/LinkDetails.tsx
@@ -131,7 +131,7 @@ export default function LinkDetails({ link }: Props) {
             height={42}
             alt=""
             id={"favicon-" + link.id}
-            className="select-none mt-2 rounded-md shadow border-[3px] border-white dark:border-sky-800 bg-white dark:bg-blue-950 aspect-square"
+            className="select-none mt-2 rounded-md shadow border-[3px] border-white dark:border-sky-800 bg-white dark:bg-sky-950 aspect-square"
             draggable="false"
             onLoad={(e) => {
               try {
diff --git a/components/Modal/User/ChangePassword.tsx b/components/Modal/User/ChangePassword.tsx
index 3ca0b03..0ace70a 100644
--- a/components/Modal/User/ChangePassword.tsx
+++ b/components/Modal/User/ChangePassword.tsx
@@ -88,16 +88,18 @@ export default function ChangePassword({
           onChange={(e) => setNewPassword1(e.target.value)}
           type="password"
           placeholder="••••••••••••••"
-          className="w-full 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"
+          className="w-full rounded-md p-3 mx-auto border-sky-100 dark:border-sky-800 dark:bg-sky-950 border-solid border outline-none focus:border-sky-700 duration-100"
         />
-        <p className="text-sm text-sky-700 dark:text-sky-400">Confirm New Password</p>
+        <p className="text-sm text-sky-700 dark:text-sky-400">
+          Confirm New Password
+        </p>
 
         <input
           value={newPassword2}
           onChange={(e) => setNewPassword2(e.target.value)}
           type="password"
           placeholder="••••••••••••••"
-          className="w-full 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"
+          className="w-full rounded-md p-3 mx-auto border-sky-100 dark:border-sky-800 dark:bg-sky-950 border-solid border outline-none focus:border-sky-700 duration-100"
         />
 
         <SubmitButton
diff --git a/components/Modal/User/ProfileSettings.tsx b/components/Modal/User/ProfileSettings.tsx
index 9b3c589..b99a376 100644
--- a/components/Modal/User/ProfileSettings.tsx
+++ b/components/Modal/User/ProfileSettings.tsx
@@ -102,7 +102,9 @@ export default function ProfileSettings({
     <div className="flex flex-col gap-3 justify-between sm:w-[35rem] w-80">
       <div className="grid sm:grid-cols-2 gap-3 auto-rows-auto">
         <div className="sm:row-span-2 sm:justify-self-center mx-auto mb-3">
-          <p className="text-sm text-sky-700 dark:text-sky-400 mb-2 text-center">Profile Photo</p>
+          <p className="text-sm text-sky-700 dark:text-sky-400 mb-2 text-center">
+            Profile Photo
+          </p>
           <div className="w-28 h-28 flex items-center justify-center rounded-full relative">
             <ProfilePhoto
               src={user.profilePic}
@@ -145,22 +147,26 @@ export default function ProfileSettings({
 
         <div className="flex flex-col gap-3">
           <div>
-            <p className="text-sm text-sky-700 dark:text-sky-400 mb-2">Display Name</p>
+            <p className="text-sm text-sky-700 dark:text-sky-400 mb-2">
+              Display Name
+            </p>
             <input
               type="text"
               value={user.name}
               onChange={(e) => setUser({ ...user, name: e.target.value })}
-              className="w-full rounded-md p-2 border-sky-100 dark:border-sky-800 dark:bg-blue-950 border-solid border outline-none focus:border-sky-700 duration-100"
+              className="w-full rounded-md p-2 border-sky-100 dark:border-sky-800 dark:bg-sky-950 border-solid border outline-none focus:border-sky-700 duration-100"
             />
           </div>
 
           <div>
-            <p className="text-sm text-sky-700 dark:text-sky-400 mb-2">Username</p>
+            <p className="text-sm text-sky-700 dark:text-sky-400 mb-2">
+              Username
+            </p>
             <input
               type="text"
               value={user.username || ""}
               onChange={(e) => setUser({ ...user, username: e.target.value })}
-              className="w-full rounded-md p-2 border-sky-100 dark:border-sky-800 dark:bg-blue-950 border-solid border outline-none focus:border-sky-700 duration-100"
+              className="w-full rounded-md p-2 border-sky-100 dark:border-sky-800 dark:bg-sky-950 border-solid border outline-none focus:border-sky-700 duration-100"
             />
           </div>
 
diff --git a/components/Modal/index.tsx b/components/Modal/index.tsx
index 835370f..e4f0dd5 100644
--- a/components/Modal/index.tsx
+++ b/components/Modal/index.tsx
@@ -16,7 +16,7 @@ export default function Modal({ toggleModal, className, children }: Props) {
         onClickOutside={toggleModal}
         className={`m-auto ${className}`}
       >
-        <div className="slide-up relative border-sky-100 dark:border-sky-800 rounded-2xl border-solid border shadow-lg p-5 bg-white dark:bg-blue-950">
+        <div className="slide-up relative border-sky-100 dark:border-sky-800 rounded-2xl border-solid border shadow-lg p-5 bg-white dark:bg-sky-950">
           <div
             onClick={toggleModal as MouseEventHandler<HTMLDivElement>}
             className="absolute top-5 left-5 inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-sky-800 duration-100 z-20 p-2"
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 13210f2..e316263 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -64,17 +64,17 @@ export default function Navbar() {
         <ToggleDarkMode />
         <div className="relative">
           <div
-            className="flex gap-1 group sm:hover:bg-slate-200 sm:hover:dark:bg-slate-800 sm:hover:p-1 sm:hover:pr-2 duration-100 h-10 rounded-full items-center w-fit bg-white dark:bg-blue-950 cursor-pointer"
+            className="flex gap-1 group sm:hover:bg-slate-200 sm:hover:dark:bg-sky-900 sm:hover:p-1 sm:hover:pr-2 duration-100 h-10 rounded-full items-center w-fit bg-white dark:bg-sky-950 cursor-pointer"
             onClick={() => setProfileDropdown(!profileDropdown)}
             id="profile-dropdown"
           >
             <ProfilePhoto
               src={account.profilePic}
-              className="sm:group-hover:h-8 sm:group-hover:w-8 duration-100 border-[3px] dark:border-blue-800"
+              className="sm:group-hover:h-8 sm:group-hover:w-8 duration-100 border-[3px] dark:border-sky-800"
             />
             <p
               id="profile-dropdown"
-              className="font-bold text-sky-700 leading-3 hidden sm:block select-none truncate max-w-[8rem] py-1"
+              className="font-bold text-black dark:text-white leading-3 hidden sm:block select-none truncate max-w-[8rem] py-1"
             >
               {account.name}
             </p>
diff --git a/components/Search.tsx b/components/Search.tsx
index f31e15d..834670d 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-sky-800 rounded-md pl-10 py-2 pr-2 w-44 sm:w-60 focus:border-sky-700 md:focus:w-80 hover:border-sky-700 duration-100 outline-none dark:bg-blue-950"
+        className="border border-sky-100 dark:border-sky-800 rounded-md pl-10 py-2 pr-2 w-44 sm:w-60 focus:border-sky-700 md:focus:w-80 hover:border-sky-700 duration-100 outline-none dark:bg-sky-950"
       />
     </div>
   );
diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
index 9fd5995..a4b3bdf 100644
--- a/components/Sidebar.tsx
+++ b/components/Sidebar.tsx
@@ -51,7 +51,7 @@ export default function Sidebar({ className }: { className?: string }) {
 
   return (
     <div
-      className={`bg-gray-100 dark:bg-blue-925 h-full w-64 xl:w-80 overflow-y-auto border-solid border dark:border-blue-950 border-r-sky-100 dark:border-r-sky-800 px-2 z-20 ${className}`}
+      className={`bg-gray-100 dark:bg-sky-900 h-full w-64 xl:w-80 overflow-y-auto border-solid border dark:border-sky-950 border-r-sky-100 dark:border-r-sky-800 px-2 z-20 ${className}`}
     >
       <div className="flex justify-center gap-2 mt-2">
         <Link
@@ -59,16 +59,17 @@ export default function Sidebar({ className }: { className?: string }) {
           className={`${
             active === "/dashboard"
               ? "bg-sky-200 dark:bg-sky-600"
-              : "hover:bg-slate-200 hover:dark:bg-sky-800 bg-gray-100 dark:bg-blue-925"
+              : "hover:bg-slate-200 hover:dark:bg-sky-800 bg-gray-100 dark:bg-sky-900"
           } outline-sky-100 outline-1 duration-100 py-1 px-2 rounded-md cursor-pointer flex justify-center flex-col items-center gap-1 w-full`}
         >
           <FontAwesomeIcon
             icon={faChartSimple}
             className={`w-8 h-8 drop-shadow text-sky-500 dark:text-sky-100`}
           />
-          
-          <p className="text-sky-700 dark:text-sky-200 text-xs xl:text-sm font-semibold">Dashboard</p>
 
+          <p className="text-black dark:text-white text-xs xl:text-sm font-semibold">
+            Dashboard
+          </p>
         </Link>
 
         <Link
@@ -76,29 +77,32 @@ export default function Sidebar({ className }: { className?: string }) {
           className={`${
             active === "/links"
               ? "bg-sky-200 dark:bg-sky-600"
-              : "hover:bg-slate-200 hover:dark:bg-sky-800 bg-gray-100 dark:bg-blue-925"
+              : "hover:bg-slate-200 hover:dark:bg-sky-800 bg-gray-100 dark:bg-sky-900"
           } outline-sky-100 outline-1 duration-100 py-1 px-2 rounded-md cursor-pointer flex justify-center flex-col items-center gap-1 w-full`}
         >
           <FontAwesomeIcon
             icon={faLink}
             className={`w-8 h-8 drop-shadow text-sky-500 dark:text-sky-100`}
           />
-          
-          <p className="text-sky-700 dark:text-sky-200 text-xs xl:text-sm font-semibold">Links</p>
 
+          <p className="text-sky-700 dark:text-sky-200 text-xs xl:text-sm font-semibold">
+            Links
+          </p>
         </Link>
 
         <Link
           href="/collections"
           className={`${
-            active === "/collections" ? "bg-sky-200 dark:bg-sky-600" : "hover:bg-slate-200 hover:dark:bg-sky-800"
+            active === "/collections"
+              ? "bg-sky-200 dark:bg-sky-600"
+              : "hover:bg-slate-200 hover:dark:bg-sky-800"
           } outline-sky-100 outline-1 duration-100  py-1 px-2 rounded-md cursor-pointer flex justify-center flex-col items-center gap-1 w-full`}
         >
           <FontAwesomeIcon
             icon={faFolder}
             className={`w-8 h-8 drop-shadow text-sky-500 dark:text-sky-100`}
           />
-          
+
           <p className="text-sky-700 dark:text-sky-200 text-xs xl:text-sm font-semibold">
             Collections
           </p>
@@ -140,7 +144,7 @@ export default function Sidebar({ className }: { className?: string }) {
                         className={`${
                           active === `/collections/${e.id}`
                             ? "bg-sky-200 dark:bg-sky-700 "
-                            : "hover:bg-slate-200 hover:dark:bg-sky-800 bg-gray100 dark:bg-blue-925"
+                            : "hover:bg-slate-200 hover:dark:bg-sky-800 bg-gray100 dark:bg-sky-900"
                         } duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
                       >
                         <FontAwesomeIcon
@@ -200,7 +204,7 @@ export default function Sidebar({ className }: { className?: string }) {
                         className={`${
                           active === `/tags/${e.id}`
                             ? "bg-sky-200 dark:bg-sky-700"
-                            : "hover:bg-slate-200 hover:dark:bg-sky-800 bg-gray-100 dark:bg-blue-925"
+                            : "hover:bg-slate-200 hover:dark:bg-sky-800 bg-gray-100 dark:bg-sky-900"
                         } duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
                       >
                         <FontAwesomeIcon
diff --git a/components/SortDropdown.tsx b/components/SortDropdown.tsx
index d44bdaa..cdb37fd 100644
--- a/components/SortDropdown.tsx
+++ b/components/SortDropdown.tsx
@@ -21,9 +21,11 @@ export default function SortDropdown({
         const target = e.target as HTMLInputElement;
         if (target.id !== "sort-dropdown") toggleSortDropdown();
       }}
-      className="absolute top-8 right-0 border border-sky-100 dark:border-sky-800 shadow-md bg-gray-50 dark:bg-blue-925 rounded-md p-2 z-20 w-48"
+      className="absolute top-8 right-0 border border-sky-100 dark:border-sky-800 shadow-md bg-gray-50 dark:bg-sky-900 rounded-md p-2 z-20 w-48"
     >
-      <p className="mb-2 text-sky-900 dark:text-sky-200 text-center font-semibold">Sort by</p>
+      <p className="mb-2 text-sky-900 dark:text-sky-200 text-center font-semibold">
+        Sort by
+      </p>
       <div className="flex flex-col gap-2">
         <RadioButton
           label="Date (Newest First)"
diff --git a/styles/globals.css b/styles/globals.css
index 82ba220..51731b1 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -164,6 +164,6 @@
 
 @layer base {
   body {
-    @apply dark:bg-blue-950 bg-white dark:text-white
+    @apply dark:bg-sky-950 bg-white dark:text-white;
   }
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index fc69059..6ad2b8c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -10,14 +10,5 @@ module.exports = {
     // For the "layouts" directory
     "./layouts/**/*.{js,ts,jsx,tsx}",
   ],
-  theme: {
-    extend: {
-      colors: {
-        blue: {
-          925: "rgb(26, 47, 96)",
-        },
-      },
-    },
-  },
   plugins: [],
 };