diff --git a/components/Modal/Link/LinkDetails.tsx b/components/Modal/Link/LinkDetails.tsx
index 0151c98..984af8b 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 bg-white aspect-square"
+            className="select-none mt-2 rounded-md shadow border-[3px] border-white dark:border-sky-800 bg-white dark:bg-blue-950 aspect-square"
             draggable="false"
             onLoad={(e) => {
               try {
@@ -151,14 +151,14 @@ export default function LinkDetails({ link }: Props) {
           />
         )}
         <div className="flex flex-col min-h-[3rem] justify-end drop-shadow">
-          <p className="text-2xl text-sky-700 capitalize break-words hyphens-auto">
+          <p className="text-2xl text-sky-700 dark:text-sky-300 capitalize break-words hyphens-auto">
             {link.name}
           </p>
           <Link
             href={link.url}
             target="_blank"
             rel="noreferrer"
-            className="text-sm text-gray-500 break-all hover:underline cursor-pointer w-fit"
+            className="text-sm text-gray-500 dark:text-sky-400 break-all hover:underline cursor-pointer w-fit"
           >
             {url ? url.host : link.url}
           </Link>
@@ -176,7 +176,7 @@ export default function LinkDetails({ link }: Props) {
           />
           <p
             title={collection?.name}
-            className="text-sky-900 text-lg truncate max-w-[12rem]"
+            className="text-sky-900 dark:text-sky-500 text-lg truncate max-w-[12rem]"
           >
             {collection?.name}
           </p>
@@ -194,19 +194,19 @@ export default function LinkDetails({ link }: Props) {
       </div>
       {link.description && (
         <>
-          <div className="text-gray-500 max-h-[20rem] my-3 rounded-md overflow-y-auto hyphens-auto">
+          <div className="text-gray-500 dark:text-sky-400 max-h-[20rem] my-3 rounded-md overflow-y-auto hyphens-auto">
             {link.description}
           </div>
         </>
       )}
 
       <div className="flex justify-between items-center">
-        <div className="flex items-center gap-1 text-gray-500">
+        <div className="flex items-center gap-1 text-gray-500 dark:text-sky-400">
           <FontAwesomeIcon icon={faBoxArchive} className="w-4 h-4" />
-          <p className=" text-gray-500">Archived Formats:</p>
+          <p>Archived Formats:</p>
         </div>
         <div
-          className="flex items-center gap-1 text-gray-500"
+          className="flex items-center gap-1 text-gray-500 dark:text-sky-400"
           title={"Created at: " + formattedDate}
         >
           <FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
@@ -214,16 +214,16 @@ export default function LinkDetails({ link }: Props) {
         </div>
       </div>
       <div className="flex flex-col gap-2">
-        <div className="flex justify-between items-center p-2 border border-sky-100 rounded-md">
+        <div className="flex justify-between items-center p-2 border border-sky-100 dark:border-sky-800 rounded-md">
           <div className="flex gap-2 items-center">
-            <div className="text-white bg-sky-300 p-2 rounded-md">
+            <div className="text-white bg-sky-300 dark:bg-sky-600 p-2 rounded-md">
               <FontAwesomeIcon icon={faFileImage} className="w-6 h-6" />
             </div>
 
-            <p className="text-gray-500">Screenshot</p>
+            <p className="text-gray-500 dark:text-sky-400">Screenshot</p>
           </div>
 
-          <div className="flex text-sky-500 gap-1">
+          <div className="flex text-sky-400 gap-1">
             <Link
               href={`/api/archives/${link.collectionId}/${link.id}.png`}
               target="_blank"
@@ -248,13 +248,13 @@ export default function LinkDetails({ link }: Props) {
           </div>
         </div>
 
-        <div className="flex justify-between items-center p-2 border border-sky-100 rounded-md">
+        <div className="flex justify-between items-center p-2 border border-sky-100 dark:border-sky-800 rounded-md">
           <div className="flex gap-2 items-center">
-            <div className="text-white bg-sky-300 p-2 rounded-md">
+            <div className="text-white bg-sky-300 dark:bg-sky-600 p-2 rounded-md">
               <FontAwesomeIcon icon={faFilePdf} className="w-6 h-6" />
             </div>
 
-            <p className="text-gray-500">PDF</p>
+            <p className="text-gray-500 dark:text-sky-400">PDF</p>
           </div>
 
           <div className="flex text-sky-500 gap-1">
diff --git a/components/Modal/User/ChangePassword.tsx b/components/Modal/User/ChangePassword.tsx
index f4f59ed..3ca0b03 100644
--- a/components/Modal/User/ChangePassword.tsx
+++ b/components/Modal/User/ChangePassword.tsx
@@ -81,23 +81,23 @@ export default function ChangePassword({
   return (
     <div className="mx-auto sm:w-[35rem] w-80">
       <div className="max-w-[25rem] w-full mx-auto flex flex-col gap-3 justify-between">
-        <p className="text-sm text-sky-700">New Password</p>
+        <p className="text-sm text-sky-700 dark:text-sky-400">New Password</p>
 
         <input
           value={newPassword}
           onChange={(e) => setNewPassword1(e.target.value)}
           type="password"
           placeholder="••••••••••••••"
-          className="w-full rounded-md p-3 mx-auto border-sky-100 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-blue-950 border-solid border outline-none focus:border-sky-700 duration-100"
         />
-        <p className="text-sm text-sky-700">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 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-blue-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 84ed767..9b3c589 100644
--- a/components/Modal/User/ProfileSettings.tsx
+++ b/components/Modal/User/ProfileSettings.tsx
@@ -102,7 +102,7 @@ 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 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 +145,22 @@ export default function ProfileSettings({
 
         <div className="flex flex-col gap-3">
           <div>
-            <p className="text-sm text-sky-700 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 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-blue-950 border-solid border outline-none focus:border-sky-700 duration-100"
             />
           </div>
 
           <div>
-            <p className="text-sm text-sky-700 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 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-blue-950 border-solid border outline-none focus:border-sky-700 duration-100"
             />
           </div>
 
diff --git a/components/Modal/User/index.tsx b/components/Modal/User/index.tsx
index bc56e4b..86d44c9 100644
--- a/components/Modal/User/index.tsx
+++ b/components/Modal/User/index.tsx
@@ -27,12 +27,12 @@ export default function UserModal({
   return (
     <div className={className}>
       <Tab.Group defaultIndex={defaultIndex}>
-        <Tab.List className="flex justify-center flex-col max-w-[15rem] sm:max-w-[30rem] mx-auto sm:flex-row gap-2 sm:gap-3 mb-5 text-sky-700">
+        <Tab.List className="flex justify-center flex-col max-w-[15rem] sm:max-w-[30rem] mx-auto sm:flex-row gap-2 sm:gap-3 mb-5 text-sky-700 dark:text-sky-300">
           <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-100  duration-100 rounded-md outline-none"
+                : "px-2 py-1 hover:bg-slate-200 hover:dark:bg-sky-700 rounded-md duration-100 outline-none"
             }
           >
             Profile Settings
@@ -41,8 +41,8 @@ export default function UserModal({
           <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-100 duration-100 rounded-md outline-none"
+                : "px-2 py-1 hover:bg-slate-200 hover:dark:bg-sky-600 rounded-md duration-100 outline-none"
             }
           >
             Privacy Settings
@@ -51,8 +51,8 @@ export default function UserModal({
           <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-100 duration-100 rounded-md outline-none"
+                : "px-2 py-1 hover:bg-slate-200  hover:dark:bg-sky-600 rounded-md duration-100 outline-none"
             }
           >
             Password
diff --git a/components/ProfilePhoto.tsx b/components/ProfilePhoto.tsx
index e7c4aa2..a94558a 100644
--- a/components/ProfilePhoto.tsx
+++ b/components/ProfilePhoto.tsx
@@ -33,7 +33,7 @@ export default function ProfilePhoto({
 
   return error || !src ? (
     <div
-      className={`bg-sky-500 dark:bg-sky-300 text-white h-10 w-10 aspect-square shadow rounded-full border border-slate-200 flex items-center justify-center ${className}`}
+      className={`bg-sky-500 dark:bg-sky-500 text-white h-10 w-10 aspect-square shadow rounded-full border border-slate-200 flex items-center justify-center ${className}`}
     >
       <FontAwesomeIcon icon={faUser} className="w-1/2 h-1/2 aspect-square" />
     </div>
diff --git a/components/Search.tsx b/components/Search.tsx
index 834670d..f31e15d 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-sky-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-blue-950"
       />
     </div>
   );
diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
index 5f7e318..730c47e 100644
--- a/components/Sidebar.tsx
+++ b/components/Sidebar.tsx
@@ -196,7 +196,7 @@ export default function Sidebar({ className }: { className?: string }) {
                       <div
                         className={`${
                           active === `/tags/${e.id}`
-                            ? "bg-sky-200"
+                            ? "bg-sky-200 dark:bg-sky-700"
                             : "hover:bg-slate-200 hover:dark:bg-sky-800 bg-gray-100 dark:bg-blue-925"
                         } duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
                       >
diff --git a/layouts/CenteredForm.tsx b/layouts/CenteredForm.tsx
index b3cf8a2..a612957 100644
--- a/layouts/CenteredForm.tsx
+++ b/layouts/CenteredForm.tsx
@@ -18,12 +18,12 @@ export default function CenteredForm({ text, children }: Props) {
           className="h-12 w-fit mx-auto"
         />
         {text ? (
-          <p className="text-lg sm:w-[30rem] w-80 mx-auto font-semibold text-black px-2 text-center">
+          <p className="text-lg sm:w-[30rem] w-80 mx-auto font-semibold text-black dark:text-white px-2 text-center">
             {text}
           </p>
         ) : undefined}
         {children}
-        <p className="text-center text-xs text-gray-500">
+        <p className="text-center text-xs text-gray-500 dark:text-sky-500">
           © {new Date().getFullYear()} Linkwarden. All rights reserved.
         </p>
       </div>
diff --git a/pages/login.tsx b/pages/login.tsx
index f96abf9..939eeaa 100644
--- a/pages/login.tsx
+++ b/pages/login.tsx
@@ -47,13 +47,13 @@ export default function Login() {
 
   return (
     <CenteredForm text="Sign in to your account">
-      <div className="p-2 flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 rounded-2xl shadow-md border border-sky-100">
-        <p className="text-2xl text-black text-center font-bold">
+      <div className="p-2 flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 dark:bg-sky-950 rounded-2xl shadow-md border border-sky-100 dark:border-sky-800">
+        <p className="text-2xl text-black dark:text-white text-center font-bold">
           Enter your credentials
         </p>
 
         <div>
-          <p className="text-sm text-sky-700 w-fit font-semibold mb-1">
+          <p className="text-sm text-sky-700 dark:text-sky-300 w-fit font-semibold mb-1">
             Username
             {emailEnabled ? "/Email" : undefined}
           </p>
@@ -63,12 +63,12 @@ export default function Login() {
             placeholder="johnny"
             value={form.username}
             onChange={(e) => setForm({ ...form, username: e.target.value })}
-            className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
+            className="w-full rounded-md p-2 mx-auto border-sky-100 dark:border-sky-800 dark:bg-sky-800 border-solid border outline-none focus:border-sky-700 duration-100"
           />
         </div>
 
         <div>
-          <p className="text-sm text-sky-700 w-fit font-semibold mb-1">
+          <p className="text-sm text-sky-700 dark:text-sky-300 w-fit font-semibold mb-1">
             Password
           </p>
 
@@ -77,7 +77,7 @@ export default function Login() {
             placeholder="••••••••••••••"
             value={form.password}
             onChange={(e) => setForm({ ...form, password: e.target.value })}
-            className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
+            className="w-full rounded-md p-2 mx-auto border-sky-100 dark:border-sky-800 dark:bg-sky-800 border-solid border outline-none focus:border-sky-700 duration-100"
           />
           {emailEnabled && (
             <div className="w-fit ml-auto mt-1">
@@ -95,8 +95,8 @@ export default function Login() {
           loading={submitLoader}
         />
         <div className="flex items-baseline gap-1 justify-center">
-          <p className="w-fit text-gray-500">New here?</p>
-          <Link href={"/register"} className="block text-sky-700 font-bold">
+          <p className="w-fit text-gray-500 dark:text-sky-300">New here?</p>
+          <Link href={"/register"} className="block text-sky-700 dark:text-sky-500 font-bold">
             Sign Up
           </Link>
         </div>
diff --git a/pages/tags/[id].tsx b/pages/tags/[id].tsx
index afbd1a5..2050f38 100644
--- a/pages/tags/[id].tsx
+++ b/pages/tags/[id].tsx
@@ -36,9 +36,9 @@ export default function Index() {
             <div className="flex gap-2">
               <FontAwesomeIcon
                 icon={faHashtag}
-                className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500"
+                className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500 dark:text-sky-300"
               />
-              <p className="sm:text-4xl text-3xl capitalize text-sky-700 font-bold">
+              <p className="sm:text-4xl text-3xl capitalize text-sky-700 dark:text-sky-500 font-bold">
                 {activeTag?.name}
               </p>
             </div>