diff --git a/components/Dropdown.tsx b/components/Dropdown.tsx
index e780487..28e9b39 100644
--- a/components/Dropdown.tsx
+++ b/components/Dropdown.tsx
@@ -78,7 +78,7 @@ export default function Dropdown({
       onClickOutside={onClickOutside}
       className={`${
         className || ""
-      } py-1 shadow-md border border-neutral-content bg-gray-50 dark:bg-neutral-800 rounded-md flex flex-col z-20`}
+      } py-1 shadow-md border border-neutral-content bg-base-200 rounded-md flex flex-col z-20`}
     >
       {items.map((e, i) => {
         const inner = e && (
diff --git a/components/FilterSearchDropdown.tsx b/components/FilterSearchDropdown.tsx
index 866a556..3552ea6 100644
--- a/components/FilterSearchDropdown.tsx
+++ b/components/FilterSearchDropdown.tsx
@@ -25,7 +25,7 @@ export default function FilterSearchDropdown({
         const target = e.target as HTMLInputElement;
         if (target.id !== "filter-dropdown") setFilterDropdown(false);
       }}
-      className="absolute top-8 right-0 border border-neutral shadow-md bg-gray-50 dark:bg-neutral-800 rounded-md p-2 z-20 w-40"
+      className="absolute top-8 right-0 border border-neutral shadow-md bg-base-200 rounded-md p-2 z-20 w-40"
     >
       <p className="mb-2 text-center font-semibold">Filter by</p>
       <div className="flex flex-col gap-2">
diff --git a/components/Modal/index.tsx b/components/Modal/index.tsx
index 9a249f5..38dbbe4 100644
--- a/components/Modal/index.tsx
+++ b/components/Modal/index.tsx
@@ -11,7 +11,7 @@ type Props = {
 
 export default function Modal({ toggleModal, className, children }: Props) {
   return (
-    <div className="overflow-y-auto py-2 fixed top-0 bottom-0 right-0 left-0 bg-gray-500 bg-opacity-10 backdrop-blur-sm flex justify-center items-center fade-in z-30">
+    <div className="overflow-y-auto py-2 fixed top-0 bottom-0 right-0 left-0 bg-black bg-opacity-10 backdrop-blur-sm flex justify-center items-center fade-in z-30">
       <ClickAwayHandler
         onClickOutside={toggleModal}
         className={`m-auto ${className || ""}`}
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index dfd2f85..60bcafd 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -131,7 +131,7 @@ export default function Navbar() {
           ) : null}
 
           {sidebar ? (
-            <div className="fixed top-0 bottom-0 right-0 left-0 bg-gray-500 bg-opacity-10 backdrop-blur-sm flex items-center fade-in z-30">
+            <div className="fixed top-0 bottom-0 right-0 left-0 bg-black bg-opacity-10 backdrop-blur-sm flex items-center fade-in z-30">
               <ClickAwayHandler
                 className="h-full"
                 onClickOutside={toggleSidebar}
diff --git a/components/NoLinksFound.tsx b/components/NoLinksFound.tsx
index c533dc1..1ab50a7 100644
--- a/components/NoLinksFound.tsx
+++ b/components/NoLinksFound.tsx
@@ -11,7 +11,7 @@ export default function NoLinksFound({ text }: Props) {
   const { setModal } = useModalStore();
 
   return (
-    <div className="border border-solid border-neutral-content w-full h-full flex flex-col justify-center p-10 rounded-2xl bg-gray-50 dark:bg-neutral-800">
+    <div className="border border-solid border-neutral-content w-full h-full flex flex-col justify-center p-10 rounded-2xl bg-base-200">
       <p className="text-center text-2xl">
         {text || "You haven't created any Links Here"}
       </p>
diff --git a/components/SortDropdown.tsx b/components/SortDropdown.tsx
index d16bb78..5f8ac11 100644
--- a/components/SortDropdown.tsx
+++ b/components/SortDropdown.tsx
@@ -21,7 +21,7 @@ export default function SortDropdown({
         const target = e.target as HTMLInputElement;
         if (target.id !== "sort-dropdown") toggleSortDropdown();
       }}
-      className="absolute top-8 right-0 border border-neutral-content shadow-md bg-gray-50 dark:bg-neutral-800 rounded-md p-2 z-20 w-52"
+      className="absolute top-8 right-0 border border-neutral-content shadow-md bg-base-200 rounded-md p-2 z-20 w-52"
     >
       <p className="mb-2 text-center font-semibold">Sort by</p>
       <div className="flex flex-col gap-2">
diff --git a/layouts/LinkLayout.tsx b/layouts/LinkLayout.tsx
index 9bcce8d..33065d7 100644
--- a/layouts/LinkLayout.tsx
+++ b/layouts/LinkLayout.tsx
@@ -189,7 +189,7 @@ export default function LinkLayout({ children }: Props) {
           {children}
 
           {sidebar ? (
-            <div className="fixed top-0 bottom-0 right-0 left-0 bg-gray-500 bg-opacity-10 backdrop-blur-sm flex items-center fade-in z-30">
+            <div className="fixed top-0 bottom-0 right-0 left-0 bg-black bg-opacity-10 backdrop-blur-sm flex items-center fade-in z-30">
               <ClickAwayHandler
                 className="h-full"
                 onClickOutside={toggleSidebar}
diff --git a/layouts/SettingsLayout.tsx b/layouts/SettingsLayout.tsx
index 2e4f5d3..457c168 100644
--- a/layouts/SettingsLayout.tsx
+++ b/layouts/SettingsLayout.tsx
@@ -69,7 +69,7 @@ export default function SettingsLayout({ children }: Props) {
           {children}
 
           {sidebar ? (
-            <div className="fixed top-0 bottom-0 right-0 left-0 bg-gray-500 bg-opacity-10 backdrop-blur-sm flex items-center fade-in z-30">
+            <div className="fixed top-0 bottom-0 right-0 left-0 bg-black bg-opacity-10 backdrop-blur-sm flex items-center fade-in z-30">
               <ClickAwayHandler
                 className="h-full"
                 onClickOutside={toggleSidebar}
diff --git a/pages/collections/index.tsx b/pages/collections/index.tsx
index b9ea717..4046d28 100644
--- a/pages/collections/index.tsx
+++ b/pages/collections/index.tsx
@@ -117,7 +117,7 @@ export default function Collections() {
             })}
 
           <div
-            className="p-5 bg-gray-50 dark:bg-neutral-800 self-stretch border border-solid border-neutral-content min-h-[12rem] rounded-2xl cursor-pointer shadow duration-100 hover:shadow-none flex flex-col gap-4 justify-center items-center group"
+            className="p-5 bg-base-200 self-stretch border border-solid border-neutral-content min-h-[12rem] rounded-2xl cursor-pointer shadow duration-100 hover:shadow-none flex flex-col gap-4 justify-center items-center group"
             onClick={() => {
               setModal({
                 modal: "COLLECTION",
diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx
index d76e5b3..4a87886 100644
--- a/pages/dashboard.tsx
+++ b/pages/dashboard.tsx
@@ -181,7 +181,7 @@ export default function Dashboard() {
           ) : (
             <div
               style={{ flex: "1 1 auto" }}
-              className="sky-shadow flex flex-col justify-center h-full border border-solid border-neutral-content w-full mx-auto p-10 rounded-2xl bg-gray-50 dark:bg-neutral-800"
+              className="sky-shadow flex flex-col justify-center h-full border border-solid border-neutral-content w-full mx-auto p-10 rounded-2xl bg-base-200"
             >
               <p className="text-center text-2xl">
                 View Your Recently Added Links Here!
@@ -236,7 +236,7 @@ export default function Dashboard() {
                         if (target.id !== "import-dropdown")
                           setImportDropdown(false);
                       }}
-                      className={`absolute top-10 left-0 w-52 py-1 shadow-md border border-neutral-content bg-gray-50 dark:bg-neutral-800 rounded-md flex flex-col z-20`}
+                      className={`absolute top-10 left-0 w-52 py-1 shadow-md border border-neutral-content bg-base-200 rounded-md flex flex-col z-20`}
                     >
                       <div className="cursor-pointer rounded-md">
                         <label
@@ -318,7 +318,7 @@ export default function Dashboard() {
           ) : (
             <div
               style={{ flex: "1 1 auto" }}
-              className="sky-shadow flex flex-col justify-center h-full border border-solid border-neutral-content w-full mx-auto p-10 rounded-2xl bg-gray-50 dark:bg-neutral-800"
+              className="sky-shadow flex flex-col justify-center h-full border border-solid border-neutral-content w-full mx-auto p-10 rounded-2xl bg-base-200"
             >
               <p className="text-center text-2xl">
                 Pin Your Favorite Links Here!
diff --git a/pages/links/[id].tsx b/pages/links/[id].tsx
index 12c8377..572f3bf 100644
--- a/pages/links/[id].tsx
+++ b/pages/links/[id].tsx
@@ -259,7 +259,7 @@ export default function Index() {
               }}
             ></div>
           ) : (
-            <div className="border border-solid border-neutral-content w-full h-full flex flex-col justify-center p-10 rounded-2xl bg-gray-50 dark:bg-neutral-800">
+            <div className="border border-solid border-neutral-content w-full h-full flex flex-col justify-center p-10 rounded-2xl bg-base-200">
               {link?.readabilityPath === "pending" ? (
                 <p className="text-center">
                   Generating readable format, please wait...
diff --git a/pages/links/pinned.tsx b/pages/links/pinned.tsx
index 637425b..208dd6b 100644
--- a/pages/links/pinned.tsx
+++ b/pages/links/pinned.tsx
@@ -64,7 +64,7 @@ export default function PinnedLinks() {
         ) : (
           <div
             style={{ flex: "1 1 auto" }}
-            className="sky-shadow flex flex-col justify-center h-full border border-solid border-neutral-content w-full mx-auto p-10 rounded-2xl bg-gray-50 dark:bg-neutral-800"
+            className="sky-shadow flex flex-col justify-center h-full border border-solid border-neutral-content w-full mx-auto p-10 rounded-2xl bg-base-200"
           >
             <p className="text-center text-2xl">
               Pin Your Favorite Links Here!
diff --git a/pages/public/links/[id].tsx b/pages/public/links/[id].tsx
index 9e2a60b..ad17b03 100644
--- a/pages/public/links/[id].tsx
+++ b/pages/public/links/[id].tsx
@@ -259,7 +259,7 @@ export default function Index() {
               }}
             ></div>
           ) : (
-            <div className="border border-solid border-neutral-content w-full h-full flex flex-col justify-center p-10 rounded-2xl bg-gray-50 dark:bg-neutral-800">
+            <div className="border border-solid border-neutral-content w-full h-full flex flex-col justify-center p-10 rounded-2xl bg-base-200">
               {link?.readabilityPath === "pending" ? (
                 <p className="text-center">
                   Generating readable format, please wait...
diff --git a/pages/settings/account.tsx b/pages/settings/account.tsx
index eec6f4d..8cc0e17 100644
--- a/pages/settings/account.tsx
+++ b/pages/settings/account.tsx
@@ -258,7 +258,7 @@ export default function Account() {
                       if (target.id !== "import-dropdown")
                         setImportDropdown(false);
                     }}
-                    className={`absolute top-7 left-0 w-52 py-1 shadow-md border border-neutral-content bg-gray-50 dark:bg-neutral-800 rounded-md flex flex-col z-20`}
+                    className={`absolute top-7 left-0 w-52 py-1 shadow-md border border-neutral-content bg-base-200 rounded-md flex flex-col z-20`}
                   >
                     <div className="cursor-pointer rounded-md">
                       <label
diff --git a/pages/settings/api.tsx b/pages/settings/api.tsx
index 1cb338a..2bc8d71 100644
--- a/pages/settings/api.tsx
+++ b/pages/settings/api.tsx
@@ -67,7 +67,7 @@ export default function Api() {
 
         <p>
           For now, you can <i>temporarily</i> use your{" "}
-          <code className="text-xs whitespace-nowrap bg-gray-500/40 rounded-md px-2 py-1">
+          <code className="text-xs whitespace-nowrap bg-black/40 rounded-md px-2 py-1">
             next-auth.session-token
           </code>{" "}
           in your browser cookies as the API key for your integrations.
diff --git a/tailwind.config.js b/tailwind.config.js
index 284e416..cca5b45 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -28,7 +28,7 @@ module.exports = {
           neutral: "#9ca3af",
           "neutral-content": "#404040",
           "base-100": "#171717",
-          "base-200": "#1f2937",
+          "base-200": "#262626",
           "base-content": "#fafafa",
           info: "#009ee4",
           success: "#00b17d",