diff --git a/README.md b/README.md
index e1bf05c..17f4520 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,5 @@
 <div align="center">
-  <img src="./assets/icon.png" width="100px" />
+  <img src="./assets/logo.png" width="100px" />
   <h1>Linkwarden</h1>
 
 <a href="https://discord.com/invite/CtuYV47nuJ"><img src="https://img.shields.io/discord/1117993124669702164?logo=discord&style=flat-square" alt="Discord"></a>
diff --git a/assets/icon.png b/assets/icon.png
deleted file mode 100644
index cbdb11c..0000000
Binary files a/assets/icon.png and /dev/null differ
diff --git a/assets/logo.png b/assets/logo.png
new file mode 100644
index 0000000..d3a3c7d
Binary files /dev/null and b/assets/logo.png differ
diff --git a/components/Checkbox.tsx b/components/Checkbox.tsx
index 2e95895..e4e5de1 100644
--- a/components/Checkbox.tsx
+++ b/components/Checkbox.tsx
@@ -11,9 +11,7 @@ type Props = {
 
 export default function Checkbox({ label, state, className, onClick }: Props) {
   return (
-    <label
-      className={`cursor-pointer flex items-center gap-2 text-sky-700 ${className}`}
-    >
+    <label className={`cursor-pointer flex items-center gap-2 ${className}`}>
       <input
         type="checkbox"
         checked={state}
@@ -22,13 +20,15 @@ export default function Checkbox({ label, state, className, onClick }: Props) {
       />
       <FontAwesomeIcon
         icon={faSquareCheck}
-        className="w-5 h-5 text-sky-700 peer-checked:block hidden"
+        className="w-5 h-5 text-sky-500 dark:text-sky-300 peer-checked:block hidden"
       />
       <FontAwesomeIcon
         icon={faSquare}
-        className="w-5 h-5 text-sky-700 peer-checked:hidden block"
+        className="w-5 h-5 text-sky-500 dark:text-sky-300 peer-checked:hidden block"
       />
-      <span className="text-sky-900 rounded select-none">{label}</span>
+      <span className="text-black dark:text-white rounded select-none">
+        {label}
+      </span>
     </label>
   );
 }
diff --git a/components/CollectionCard.tsx b/components/CollectionCard.tsx
index 9805f9c..ca5253b 100644
--- a/components/CollectionCard.tsx
+++ b/components/CollectionCard.tsx
@@ -32,24 +32,24 @@ export default function CollectionCard({ collection, className }: Props) {
 
   return (
     <div
-      className={`bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% to-white to-100% self-stretch min-h-[12rem] rounded-2xl shadow duration-100 hover:shadow-none group relative ${className}`}
+      className={`bg-gradient-to-tr from-sky-100 dark:from-gray-800 from-10% via-gray-100 via-20% to-white dark:to-neutral-800 to-100% self-stretch min-h-[12rem] rounded-2xl shadow duration-100 hover:shadow-none group relative ${className}`}
     >
       <div
         onClick={() => setExpandDropdown(!expandDropdown)}
         id={"expand-dropdown" + collection.id}
-        className="inline-flex absolute top-5 right-5 rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
+        className="inline-flex absolute top-5 right-5 rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1"
       >
         <FontAwesomeIcon
           icon={faEllipsis}
           id={"expand-dropdown" + collection.id}
-          className="w-5 h-5 text-gray-500"
+          className="w-5 h-5 text-gray-500 dark:text-gray-300"
         />
       </div>
       <Link
         href={`/collections/${collection.id}`}
         className="flex flex-col gap-2 justify-between min-h-[12rem] h-full select-none p-5"
       >
-        <p className="text-2xl font-bold capitalize text-sky-700 break-words line-clamp-3 w-4/5">
+        <p className="text-2xl capitalize text-black dark:text-white break-words line-clamp-3 w-4/5">
           {collection.name}
         </p>
         <div className="flex justify-between items-center">
@@ -73,11 +73,14 @@ export default function CollectionCard({ collection, className }: Props) {
             ) : null}
           </div>
           <div className="text-right w-40">
-            <div className="text-sky-700 font-bold text-sm flex justify-end gap-1 items-center">
-              <FontAwesomeIcon icon={faLink} className="w-5 h-5 text-sky-500" />
+            <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"
+              />
               {collection._count && collection._count.links}
             </div>
-            <div className="flex items-center justify-end gap-1 text-gray-600">
+            <div className="flex items-center justify-end gap-1 text-gray-600 dark:text-white">
               <FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
               <p className="font-bold text-xs">{formattedDate}</p>
             </div>
diff --git a/components/Dropdown.tsx b/components/Dropdown.tsx
index fa4c372..abc9e46 100644
--- a/components/Dropdown.tsx
+++ b/components/Dropdown.tsx
@@ -25,13 +25,13 @@ export default function Dropdown({ onClickOutside, className, items }: Props) {
   return (
     <ClickAwayHandler
       onClickOutside={onClickOutside}
-      className={`${className} py-1 shadow-md border border-sky-100 bg-gray-50 rounded-md flex flex-col z-20`}
+      className={`${className} py-1 shadow-md border border-sky-100 dark:border-neutral-700 bg-gray-50 dark:bg-neutral-800 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 select-none">{e.name}</p>
+            <div className="flex items-center gap-2 py-1 px-2 hover:bg-slate-200 dark:hover:bg-neutral-700 duration-100">
+              <p className="text-black dark:text-white select-none">{e.name}</p>
             </div>
           </div>
         );
diff --git a/components/FilterSearchDropdown.tsx b/components/FilterSearchDropdown.tsx
index 6b1c064..2c835ab 100644
--- a/components/FilterSearchDropdown.tsx
+++ b/components/FilterSearchDropdown.tsx
@@ -20,9 +20,11 @@ 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-sky-100 shadow-md bg-gray-50 rounded-md p-2 z-20 w-40"
+      className="absolute top-8 right-0 border border-sky-100 dark:border-neutral-700 shadow-md bg-gray-50 dark:bg-neutral-800 rounded-md p-2 z-20 w-40"
     >
-      <p className="mb-2 text-sky-900 text-center font-semibold">Filter by</p>
+      <p className="mb-2 text-black dark:text-white text-center font-semibold">
+        Filter by
+      </p>
       <div className="flex flex-col gap-2">
         <Checkbox
           label="Name"
diff --git a/components/InputSelect/CollectionSelection.tsx b/components/InputSelect/CollectionSelection.tsx
index f140bbc..234d5bc 100644
--- a/components/InputSelect/CollectionSelection.tsx
+++ b/components/InputSelect/CollectionSelection.tsx
@@ -45,6 +45,8 @@ export default function CollectionSelection({ onChange, defaultValue }: Props) {
   return (
     <Select
       isClearable
+      className="react-select-container"
+      classNamePrefix="react-select"
       placeholder="Default: Unnamed Collection"
       onChange={onChange}
       options={options}
diff --git a/components/InputSelect/TagSelection.tsx b/components/InputSelect/TagSelection.tsx
index 82ad9b1..0a8e179 100644
--- a/components/InputSelect/TagSelection.tsx
+++ b/components/InputSelect/TagSelection.tsx
@@ -28,6 +28,8 @@ export default function TagSelection({ onChange, defaultValue }: Props) {
   return (
     <CreatableSelect
       isClearable
+      className="react-select-container"
+      classNamePrefix="react-select"
       onChange={onChange}
       options={options}
       styles={styles}
diff --git a/components/LinkCard.tsx b/components/LinkCard.tsx
index 1f5dcd4..17fcfd6 100644
--- a/components/LinkCard.tsx
+++ b/components/LinkCard.tsx
@@ -106,7 +106,7 @@ export default function LinkCard({ link, count, className }: Props) {
 
   return (
     <div
-      className={`bg-gradient-to-tr from-slate-200 from-10% to-gray-50 via-20% shadow hover:shadow-none cursor-pointer duration-100 rounded-2xl relative group ${className}`}
+      className={`bg-gradient-to-tr from-slate-200 dark:from-neutral-800 from-10% to-gray-50 dark:to-[#303030] via-20% shadow hover:shadow-none cursor-pointer duration-100 rounded-2xl relative group ${className}`}
     >
       {(permissions === true ||
         permissions?.canUpdate ||
@@ -114,7 +114,7 @@ export default function LinkCard({ link, count, className }: Props) {
         <div
           onClick={() => setExpandDropdown(!expandDropdown)}
           id={"expand-dropdown" + link.id}
-          className="text-gray-500 inline-flex rounded-md cursor-pointer hover:bg-slate-200 absolute right-5 top-5 z-10 duration-100 p-1"
+          className="text-gray-500 dark:text-gray-300 inline-flex rounded-md cursor-pointer hover:bg-slate-200 dark:hover:bg-neutral-700 absolute right-5 top-5 z-10 duration-100 p-1"
         >
           <FontAwesomeIcon
             icon={faEllipsis}
@@ -156,8 +156,10 @@ export default function LinkCard({ link, count, className }: Props) {
         <div className="flex justify-between gap-5 w-full h-full z-0">
           <div className="flex flex-col justify-between w-full">
             <div className="flex items-baseline gap-1">
-              <p className="text-sm text-sky-500 font-bold">{count + 1}.</p>
-              <p className="text-lg text-sky-700 font-bold truncate capitalize w-full pr-8">
+              <p className="text-sm text-gray-500 dark:text-gray-300">
+                {count + 1}
+              </p>
+              <p className="text-lg text-black dark:text-white truncate capitalize w-full pr-8">
                 {link.name || link.description}
               </p>
             </div>
@@ -168,16 +170,16 @@ export default function LinkCard({ link, count, className }: Props) {
                   className="w-4 h-4 mt-1 drop-shadow"
                   style={{ color: collection?.color }}
                 />
-                <p className="text-sky-900 truncate capitalize">
+                <p className="text-black dark:text-white truncate capitalize">
                   {collection?.name}
                 </p>
               </div>
             </div>
-            <div className="flex items-center gap-1 w-full pr-20 text-gray-500">
+            <div className="flex items-center gap-1 w-full pr-20 text-gray-500 dark:text-gray-300">
               <FontAwesomeIcon icon={faLink} className="mt-1 w-4 h-4" />
               <p className="truncate w-full">{shortendURL}</p>
             </div>
-            <div className="flex items-center gap-1 text-gray-500">
+            <div className="flex items-center gap-1 text-gray-500 dark:text-gray-300">
               <FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
               <p>{formattedDate}</p>
             </div>
diff --git a/components/Modal/Collection/CollectionInfo.tsx b/components/Modal/Collection/CollectionInfo.tsx
index 94c711a..669d05e 100644
--- a/components/Modal/Collection/CollectionInfo.tsx
+++ b/components/Modal/Collection/CollectionInfo.tsx
@@ -11,6 +11,7 @@ import SubmitButton from "@/components/SubmitButton";
 import { HexColorPicker } from "react-colorful";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { toast } from "react-hot-toast";
+import TextInput from "@/components/TextInput";
 
 type Props = {
   toggleCollectionModal: Function;
@@ -60,23 +61,23 @@ export default function CollectionInfo({
     <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
       <div className="flex flex-col sm:flex-row gap-3">
         <div className="w-full">
-          <p className="text-sm text-sky-700 mb-2">
+          <p className="text-sm text-black dark:text-white mb-2">
             Name
             <RequiredBadge />
           </p>
           <div className="flex flex-col gap-3">
-            <input
+            <TextInput
               value={collection.name}
+              placeholder="e.g. Example Collection"
               onChange={(e) =>
                 setCollection({ ...collection, name: e.target.value })
               }
-              type="text"
-              placeholder="e.g. Example Collection"
-              className="w-full rounded-md p-3 border-sky-100 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 mb-2">Icon Color</p>
+                <p className="text-sm w-full text-black dark:text-white mb-2">
+                  Icon Color
+                </p>
                 <div style={{ color: collection.color }}>
                   <FontAwesomeIcon
                     icon={faFolder}
@@ -84,7 +85,7 @@ export default function CollectionInfo({
                   />
                 </div>
                 <div
-                  className="py-1 px-2 rounded-md text-xs font-semibold cursor-pointer text-sky-700 hover:bg-slate-200 duration-100"
+                  className="py-1 px-2 rounded-md text-xs font-semibold cursor-pointer text-black dark:text-white hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100"
                   onClick={() =>
                     setCollection({ ...collection, color: "#0ea5e9" })
                   }
@@ -101,9 +102,9 @@ export default function CollectionInfo({
         </div>
 
         <div className="w-full">
-          <p className="text-sm text-sky-700 mb-2">Description</p>
+          <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 p-3 outline-none border-sky-100 focus:border-sky-700"
+            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"
             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 2295abc..d119d5d 100644
--- a/components/Modal/Collection/DeleteCollection.tsx
+++ b/components/Modal/Collection/DeleteCollection.tsx
@@ -9,6 +9,7 @@ import useCollectionStore from "@/store/collections";
 import { useRouter } from "next/router";
 import usePermissions from "@/hooks/usePermissions";
 import { toast } from "react-hot-toast";
+import TextInput from "@/components/TextInput";
 
 type Props = {
   toggleDeleteCollectionModal: Function;
@@ -50,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">
+            <div className="text-gray-500 dark:text-white">
               <p>
                 Please note that deleting the collection will permanently remove
                 all its contents, including the following:
@@ -81,24 +82,23 @@ export default function DeleteCollection({
           </div>
 
           <div className="flex flex-col gap-3">
-            <p className="text-sky-900 select-none text-center">
+            <p className="text-black dark:text-white select-none text-center">
               To confirm, type &quot;
-              <span className="font-bold text-sky-700">{collection.name}</span>
+              <span className="font-bold">{collection.name}</span>
               &quot; in the box below:
             </p>
 
-            <input
-              autoFocus
+            <TextInput
+              autoFocus={true}
               value={inputField}
               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-3/4 mx-auto"
             />
           </div>
         </>
       ) : (
-        <p className="text-gray-500">
+        <p className="text-gray-500 dark:text-white">
           Click the button below to leave the current collection:
         </p>
       )}
@@ -107,9 +107,9 @@ export default function DeleteCollection({
         className={`mx-auto mt-2 text-white flex items-center gap-2 py-2 px-5 rounded-md select-none font-bold duration-100 ${
           permissions === true
             ? inputField === collection.name
-              ? "bg-red-500 hover:bg-red-400 cursor-pointer"
-              : "cursor-not-allowed bg-red-300"
-            : "bg-red-500 hover:bg-red-400 cursor-pointer"
+              ? "bg-red-500 hover:bg-red-400 hover:dark:bg-red-600 cursor-pointer"
+              : "cursor-not-allowed bg-red-300 dark:bg-red-900"
+            : "bg-red-500 hover:bg-red-400 hover:dark:bg-red-600 cursor-pointer"
         }`}
         onClick={submit}
       >
diff --git a/components/Modal/Collection/TeamManagement.tsx b/components/Modal/Collection/TeamManagement.tsx
index ad9a099..6c6d5c3 100644
--- a/components/Modal/Collection/TeamManagement.tsx
+++ b/components/Modal/Collection/TeamManagement.tsx
@@ -17,6 +17,7 @@ import ProfilePhoto from "@/components/ProfilePhoto";
 import usePermissions from "@/hooks/usePermissions";
 import { toast } from "react-hot-toast";
 import getPublicUserData from "@/lib/client/getPublicUserData";
+import TextInput from "@/components/TextInput";
 
 type Props = {
   toggleCollectionModal: Function;
@@ -117,7 +118,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-black dark:text-white">Make Public</p>
 
           <Checkbox
             label="Make this a public collection."
@@ -127,7 +128,7 @@ export default function TeamManagement({
             }
           />
 
-          <p className="text-gray-500 text-sm">
+          <p className="text-gray-500 dark:text-white text-sm">
             This will let <b>Anyone</b> to view this collection.
           </p>
         </>
@@ -135,7 +136,7 @@ export default function TeamManagement({
 
       {collection.isPublic ? (
         <div>
-          <p className="text-sm text-sky-700 mb-2">
+          <p className="text-sm text-black dark:text-white mb-2">
             Public Link (Click to copy)
           </p>
           <div
@@ -148,7 +149,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-2 dark:bg-neutral-950 border-sky-100 dark:border-neutral-700 border-solid border outline-none hover:border-sky-300 dark:hover:border-sky-600 duration-100 cursor-text"
           >
             {publicCollectionURL}
           </div>
@@ -159,11 +160,14 @@ export default function TeamManagement({
 
       {permissions === true && (
         <>
-          <p className="text-sm text-sky-700">Member Management</p>
+          <p className="text-sm text-black dark:text-white">
+            Member Management
+          </p>
 
           <div className="flex items-center gap-2">
-            <input
+            <TextInput
               value={member.user.username || ""}
+              placeholder="Username (without the '@')"
               onChange={(e) => {
                 setMember({
                   ...member,
@@ -179,9 +183,6 @@ export default function TeamManagement({
                   setMemberState
                 )
               }
-              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"
             />
 
             <div
@@ -193,7 +194,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 hover:bg-sky-600 duration-100 text-white w-10 h-10 p-2 rounded-md cursor-pointer"
             >
               <FontAwesomeIcon icon={faUserPlus} className="w-5 h-5" />
             </div>
@@ -203,7 +204,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-white 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">
@@ -213,12 +214,12 @@ export default function TeamManagement({
                 return (
                   <div
                     key={i}
-                    className="relative border p-2 rounded-md border-sky-100 flex flex-col sm:flex-row sm:items-center gap-2 justify-between"
+                    className="relative border p-2 rounded-md border-sky-100 dark:border-neutral-700 flex flex-col sm:flex-row sm:items-center gap-2 justify-between"
                   >
                     {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-white h-4 hover:text-red-500 duration-100 cursor-pointer"
                         title="Remove Member"
                         onClick={() => {
                           const updatedMembers = collection.members.filter(
@@ -239,23 +240,25 @@ export default function TeamManagement({
                         className="border-[3px]"
                       />
                       <div>
-                        <p className="text-sm font-bold text-sky-700">
+                        <p className="text-sm font-bold text-black dark:text-white">
                           {e.user.name}
                         </p>
-                        <p className="text-sky-900">@{e.user.username}</p>
+                        <p className="text-gray-500 dark:text-gray-300">
+                          @{e.user.username}
+                        </p>
                       </div>
                     </div>
                     <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-black dark:text-white ${
                             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-white mb-2">
                             (Click to toggle.)
                           </p>
                         )}
@@ -265,7 +268,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-white">
                           Has no permissions.
                         </p>
                       ) : (
@@ -305,11 +308,11 @@ export default function TeamManagement({
                               }}
                             />
                             <span
-                              className={`text-sky-900 peer-checked:bg-sky-700 text-sm ${
+                              className={`text-black dark:text-white peer-checked:bg-sky-200 dark:peer-checked:bg-sky-600 text-sm ${
                                 permissions === true
-                                  ? "hover:bg-slate-200 duration-75"
+                                  ? "hover:bg-slate-200 hover:dark:bg-neutral-700 duration-75"
                                   : ""
-                              } peer-checked:text-white rounded p-1 select-none`}
+                              } rounded p-1 select-none`}
                             >
                               Create
                             </span>
@@ -350,11 +353,11 @@ export default function TeamManagement({
                               }}
                             />
                             <span
-                              className={`text-sky-900 peer-checked:bg-sky-700 text-sm ${
+                              className={`text-black dark:text-white peer-checked:bg-sky-200 dark:peer-checked:bg-sky-600 text-sm ${
                                 permissions === true
-                                  ? "hover:bg-slate-200 duration-75"
+                                  ? "hover:bg-slate-200 hover:dark:bg-neutral-700 duration-75"
                                   : ""
-                              } peer-checked:text-white rounded p-1 select-none`}
+                              } rounded p-1 select-none`}
                             >
                               Update
                             </span>
@@ -395,11 +398,11 @@ export default function TeamManagement({
                               }}
                             />
                             <span
-                              className={`text-sky-900 peer-checked:bg-sky-700 text-sm ${
+                              className={`text-black dark:text-white peer-checked:bg-sky-200 dark:peer-checked:bg-sky-600 text-sm ${
                                 permissions === true
-                                  ? "hover:bg-slate-200 duration-75"
+                                  ? "hover:bg-slate-200 hover:dark:bg-neutral-700 duration-75"
                                   : ""
-                              } peer-checked:text-white rounded p-1 select-none`}
+                              } rounded p-1 select-none`}
                             >
                               Delete
                             </span>
@@ -415,7 +418,7 @@ 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-neutral-700 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">
@@ -425,7 +428,7 @@ export default function TeamManagement({
           />
           <div>
             <div className="flex items-center gap-1">
-              <p className="text-sm font-bold text-sky-700">
+              <p className="text-sm font-bold text-black dark:text-white">
                 {collectionOwner.name}
               </p>
               <FontAwesomeIcon
@@ -433,13 +436,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-gray-500 dark:text-gray-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-black dark:text-white">
+          <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 c246e9b..e1e40ee 100644
--- a/components/Modal/Collection/index.tsx
+++ b/components/Modal/Collection/index.tsx
@@ -46,17 +46,19 @@ export default function CollectionModal({
     <div className={className}>
       <Tab.Group defaultIndex={defaultIndex}>
         {method === "CREATE" && (
-          <p className="text-xl text-sky-700 text-center">New Collection</p>
+          <p className="text-xl text-black dark:text-white text-center">
+            New Collection
+          </p>
         )}
-        <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-black dark:text-white">
           {method === "UPDATE" && (
             <>
               {isOwner && (
                 <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-white duration-100 rounded-md outline-none"
+                      : "px-2 py-1 hover:bg-slate-200 hover:dark:bg-neutral-700 hover:dark:text-white rounded-md duration-100 outline-none"
                   }
                 >
                   Collection Info
@@ -65,8 +67,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-white duration-100 rounded-md outline-none"
+                    : "px-2 py-1 hover:bg-slate-200 hover:dark:bg-neutral-700 hover:dark:text-white rounded-md duration-100 outline-none"
                 }
               >
                 {isOwner ? "Share & Collaborate" : "View Team"}
@@ -74,8 +76,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-white duration-100 rounded-md outline-none"
+                    : "px-2 py-1 hover:bg-slate-200 hover:dark:bg-neutral-700 hover:dark:text-white rounded-md duration-100 outline-none"
                 }
               >
                 {isOwner ? "Delete Collection" : "Leave Collection"}
diff --git a/components/Modal/Link/AddOrEditLink.tsx b/components/Modal/Link/AddOrEditLink.tsx
index e072abd..00fc24b 100644
--- a/components/Modal/Link/AddOrEditLink.tsx
+++ b/components/Modal/Link/AddOrEditLink.tsx
@@ -12,6 +12,7 @@ import { useRouter } from "next/router";
 import SubmitButton from "../../SubmitButton";
 import { toast } from "react-hot-toast";
 import Link from "next/link";
+import TextInput from "@/components/TextInput";
 
 type Props =
   | {
@@ -115,10 +116,10 @@ export default function AddOrEditLink({
     <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
       {method === "UPDATE" ? (
         <p
-          className="text-gray-500 my-2 text-center truncate w-full"
+          className="text-gray-500 dark:text-gray-300 my-2 text-center truncate w-full"
           title={link.url}
         >
-          <Link href={link.url} target="_blank" className=" font-bold">
+          <Link href={link.url} target="_blank" className="font-bold">
             {link.url}
           </Link>
         </p>
@@ -126,23 +127,21 @@ export default function AddOrEditLink({
 
       {method === "CREATE" ? (
         <div>
-          <p className="text-sm text-sky-700 mb-2 font-bold">
+          <p className="text-sm text-black dark:text-white mb-2 font-bold">
             Address (URL)
             <RequiredBadge />
           </p>
-          <input
+          <TextInput
             value={link.url}
             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 border-solid border outline-none focus:border-sky-700 duration-100"
           />
         </div>
       ) : null}
-      <hr />
+      <hr className="dark:border-neutral-700" />
       <div className="grid sm:grid-cols-2 gap-3">
         <div>
-          <p className="text-sm text-sky-700 mb-2">Collection</p>
+          <p className="text-sm text-black dark:text-white mb-2">Collection</p>
           <CollectionSelection
             onChange={setCollection}
             // defaultValue={{
@@ -161,7 +160,7 @@ export default function AddOrEditLink({
         </div>
 
         <div>
-          <p className="text-sm text-sky-700 mb-2">Tags</p>
+          <p className="text-sm text-black dark:text-white mb-2">Tags</p>
           <TagSelection
             onChange={setTags}
             defaultValue={link.tags.map((e) => {
@@ -171,18 +170,16 @@ export default function AddOrEditLink({
         </div>
 
         <div className="sm:col-span-2">
-          <p className="text-sm text-sky-700 mb-2">Name</p>
-          <input
+          <p className="text-sm text-black dark:text-white mb-2">Name</p>
+          <TextInput
             value={link.name}
             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 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 mb-2">Description</p>
+          <p className="text-sm text-black dark:text-white mb-2">Description</p>
           <textarea
             value={link.description}
             onChange={(e) => setLink({ ...link, description: e.target.value })}
@@ -191,7 +188,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 border-solid border outline-none focus:border-sky-700 duration-100"
+            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"
           />
         </div>
       </div>
diff --git a/components/Modal/Link/LinkDetails.tsx b/components/Modal/Link/LinkDetails.tsx
index 0151c98..eac6bac 100644
--- a/components/Modal/Link/LinkDetails.tsx
+++ b/components/Modal/Link/LinkDetails.tsx
@@ -20,12 +20,15 @@ import {
   faFilePdf,
 } from "@fortawesome/free-regular-svg-icons";
 import isValidUrl from "@/lib/client/isValidUrl";
+import { useTheme } from "next-themes";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
 };
 
 export default function LinkDetails({ link }: Props) {
+  const { theme, setTheme } = useTheme();
+
   const [imageError, setImageError] = useState<boolean>(false);
   const formattedDate = new Date(link.createdAt as string).toLocaleString(
     "en-US",
@@ -71,6 +74,9 @@ export default function LinkDetails({ link }: Props) {
   useEffect(() => {
     const banner = document.getElementById("link-banner");
     const bannerInner = document.getElementById("link-banner-inner");
+    const bannerOut = document.getElementById("link-banner-outside");
+
+    if (theme === "dark") bannerOut?.classList.toggle("banner-dark-mode");
 
     if (colorPalette && banner && bannerInner) {
       banner.style.background = `linear-gradient(to right, ${rgbToHex(
@@ -93,7 +99,7 @@ export default function LinkDetails({ link }: Props) {
         colorPalette[3][2]
       )})`;
     }
-  }, [colorPalette]);
+  }, [colorPalette, theme]);
 
   const handleDownload = (format: "png" | "pdf") => {
     const path = `/api/archives/${link.collection.id}/${link.id}.${format}`;
@@ -115,7 +121,10 @@ export default function LinkDetails({ link }: Props) {
   };
 
   return (
-    <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
+    <div
+      id="link-banner-outside"
+      className="flex flex-col gap-3 sm:w-[35rem] w-80"
+    >
       {!imageError && (
         <div id="link-banner" className="link-banner h-32 -mx-5 -mt-5 relative">
           <div id="link-banner-inner" className="link-banner-inner"></div>
@@ -131,7 +140,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-neutral-900 bg-white dark:bg-neutral-900 aspect-square"
             draggable="false"
             onLoad={(e) => {
               try {
@@ -151,14 +160,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-black dark:text-white 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-gray-300 break-all hover:underline cursor-pointer w-fit"
           >
             {url ? url.host : link.url}
           </Link>
@@ -176,7 +185,7 @@ export default function LinkDetails({ link }: Props) {
           />
           <p
             title={collection?.name}
-            className="text-sky-900 text-lg truncate max-w-[12rem]"
+            className="text-black dark:text-white text-lg truncate max-w-[12rem]"
           >
             {collection?.name}
           </p>
@@ -185,7 +194,7 @@ export default function LinkDetails({ link }: Props) {
           <Link key={i} href={`/tags/${e.id}`} className="z-10">
             <p
               title={e.name}
-              className="px-2 py-1 bg-sky-200 text-sky-700 text-xs rounded-3xl cursor-pointer hover:opacity-60 duration-100 truncate max-w-[19rem]"
+              className="px-2 py-1 bg-sky-200 text-black dark:text-white dark:bg-sky-900 text-xs rounded-3xl cursor-pointer hover:opacity-60 duration-100 truncate max-w-[19rem]"
             >
               {e.name}
             </p>
@@ -194,19 +203,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-black dark:text-white 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-gray-300">
           <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-gray-300"
           title={"Created at: " + formattedDate}
         >
           <FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
@@ -214,69 +223,69 @@ 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-neutral-700 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-white">Screenshot</p>
           </div>
 
-          <div className="flex text-sky-500 gap-1">
+          <div className="flex text-black dark:text-white gap-1">
             <Link
               href={`/api/archives/${link.collectionId}/${link.id}.png`}
               target="_blank"
               rel="noreferrer"
-              className="cursor-pointer hover:bg-slate-200 duration-100 p-2 rounded-md"
+              className="cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-2 rounded-md"
             >
               <FontAwesomeIcon
                 icon={faArrowUpRightFromSquare}
-                className="w-5 h-5"
+                className="w-5 h-5 text-sky-500 dark:text-sky-300"
               />
             </Link>
 
             <div
               onClick={() => handleDownload("png")}
-              className="cursor-pointer hover:bg-slate-200 duration-100 p-2 rounded-md"
+              className="cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-2 rounded-md"
             >
               <FontAwesomeIcon
                 icon={faCloudArrowDown}
-                className="w-5 h-5 cursor-pointer"
+                className="w-5 h-5 cursor-pointer text-sky-500 dark:text-sky-300"
               />
             </div>
           </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-neutral-700 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-white">PDF</p>
           </div>
 
-          <div className="flex text-sky-500 gap-1">
+          <div className="flex text-black dark:text-white gap-1">
             <Link
               href={`/api/archives/${link.collectionId}/${link.id}.pdf`}
               target="_blank"
               rel="noreferrer"
-              className="cursor-pointer hover:bg-slate-200 duration-100 p-2 rounded-md"
+              className="cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-2 rounded-md"
             >
               <FontAwesomeIcon
                 icon={faArrowUpRightFromSquare}
-                className="w-5 h-5"
+                className="w-5 h-5 text-sky-500 dark:text-sky-300"
               />
             </Link>
 
             <div
               onClick={() => handleDownload("pdf")}
-              className="cursor-pointer hover:bg-slate-200 duration-100 p-2 rounded-md"
+              className="cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-2 rounded-md"
             >
               <FontAwesomeIcon
                 icon={faCloudArrowDown}
-                className="w-5 h-5 cursor-pointer"
+                className="w-5 h-5 cursor-pointer text-sky-500 dark:text-sky-300"
               />
             </div>
           </div>
diff --git a/components/Modal/Link/index.tsx b/components/Modal/Link/index.tsx
index 5c7361e..4786a62 100644
--- a/components/Modal/Link/index.tsx
+++ b/components/Modal/Link/index.tsx
@@ -33,10 +33,12 @@ export default function LinkModal({
     <div className={className}>
       <Tab.Group defaultIndex={defaultIndex}>
         {method === "CREATE" && (
-          <p className="text-xl text-sky-700 text-center">New Link</p>
+          <p className="text-xl text-black dark:text-white text-center">
+            New Link
+          </p>
         )}
         <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 ${
+          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-black dark:text-white ${
             isOwnerOrMod ? "" : "pb-8"
           }`}
         >
@@ -45,8 +47,8 @@ export default function LinkModal({
               <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-600 duration-100 rounded-md outline-none"
+                    : "px-2 py-1 hover:bg-slate-200 hover:dark:bg-neutral-700 rounded-md duration-100 outline-none"
                 }
               >
                 Link Details
@@ -54,8 +56,8 @@ export default function LinkModal({
               <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-600 duration-100 rounded-md outline-none"
+                    : "px-2 py-1 hover:bg-slate-200 hover:dark:bg-neutral-700 rounded-md duration-100 outline-none"
                 }
               >
                 Edit Link
diff --git a/components/Modal/User/BillingPortal.tsx b/components/Modal/User/BillingPortal.tsx
index afb7950..214bfca 100644
--- a/components/Modal/User/BillingPortal.tsx
+++ b/components/Modal/User/BillingPortal.tsx
@@ -17,8 +17,8 @@ export default function PaymentPortal() {
 
   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-md text-gray-500">
+      <div className=" w-full mx-auto flex flex-col gap-3 justify-between">
+        <p className="text-md text-black dark:text-white">
           To manage/cancel your subsciption, visit the billing portal.
         </p>
 
@@ -30,10 +30,13 @@ export default function PaymentPortal() {
           className="mx-auto mt-2"
         />
 
-        <p className="text-md text-gray-500">
+        <p className="text-md text-black dark:text-white">
           If you still need help or encountered any issues, feel free to reach
           out to us at:{" "}
-          <a className="font-semibold" href="mailto:support@linkwarden.app">
+          <a
+            className="font-semibold underline"
+            href="mailto:support@linkwarden.app"
+          >
             support@linkwarden.app
           </a>
         </p>
diff --git a/components/Modal/User/ChangePassword.tsx b/components/Modal/User/ChangePassword.tsx
index f4f59ed..552463c 100644
--- a/components/Modal/User/ChangePassword.tsx
+++ b/components/Modal/User/ChangePassword.tsx
@@ -5,6 +5,7 @@ import { signOut, useSession } from "next-auth/react";
 import { faPenToSquare } from "@fortawesome/free-regular-svg-icons";
 import SubmitButton from "@/components/SubmitButton";
 import { toast } from "react-hot-toast";
+import TextInput from "@/components/TextInput";
 
 type Props = {
   togglePasswordFormModal: Function;
@@ -80,24 +81,25 @@ 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>
+      <div className="max-w-[25rem] w-full mx-auto flex flex-col gap-2 justify-between">
+        <p className="text-sm text-black dark:text-white">New Password</p>
 
-        <input
+        <TextInput
           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"
+          type="password"
         />
-        <p className="text-sm text-sky-700">Confirm New Password</p>
 
-        <input
+        <p className="text-sm text-black dark:text-white">
+          Confirm New Password
+        </p>
+
+        <TextInput
           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"
+          type="password"
         />
 
         <SubmitButton
diff --git a/components/Modal/User/PrivacySettings.tsx b/components/Modal/User/PrivacySettings.tsx
index e209ae2..82631f7 100644
--- a/components/Modal/User/PrivacySettings.tsx
+++ b/components/Modal/User/PrivacySettings.tsx
@@ -119,7 +119,9 @@ export default function PrivacySettings({
   return (
     <div className="flex flex-col gap-3 justify-between sm:w-[35rem] w-80">
       <div>
-        <p className="text-sm text-sky-700 mb-2">Profile Visibility</p>
+        <p className="text-sm text-black dark:text-white mb-2">
+          Profile Visibility
+        </p>
 
         <Checkbox
           label="Make profile private"
@@ -128,19 +130,21 @@ export default function PrivacySettings({
           onClick={() => setUser({ ...user, isPrivate: !user.isPrivate })}
         />
 
-        <p className="text-gray-500 text-sm">
+        <p className="text-gray-500 dark:text-gray-300 text-sm">
           This will limit who can find and add you to other Collections.
         </p>
 
         {user.isPrivate && (
           <div>
-            <p className="text-sm text-sky-700 my-2">Whitelisted Users</p>
-            <p className="text-gray-500 text-sm mb-3">
+            <p className="text-sm text-black dark:text-white mt-2">
+              Whitelisted Users
+            </p>
+            <p className="text-gray-500 dark:text-gray-300 text-sm mb-3">
               Please provide the Username of the users you wish to grant
               visibility to your profile. Separated by comma.
             </p>
             <textarea
-              className="w-full resize-none border rounded-md duration-100 bg-white p-2 outline-none border-sky-100 focus:border-sky-700"
+              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"
               placeholder="Your profile is hidden from everyone right now..."
               value={whitelistedUsersTextbox}
               onChange={(e) => {
@@ -152,7 +156,9 @@ export default function PrivacySettings({
       </div>
 
       <div className="mt-5">
-        <p className="text-sm text-sky-700 mb-2">Import/Export Data</p>
+        <p className="text-sm text-black dark:text-white mb-2">
+          Import/Export Data
+        </p>
 
         <div className="flex gap-2">
           <div
@@ -162,7 +168,7 @@ export default function PrivacySettings({
           >
             <div
               id="import-dropdown"
-              className="border border-slate-200 rounded-md bg-white px-2 text-center select-none cursor-pointer text-sky-900 duration-100 hover:border-sky-700"
+              className="border border-slate-200 dark:border-neutral-700 rounded-md bg-white dark:bg-neutral-800 px-2 text-center select-none cursor-pointer duration-100 hover:border-sky-300 hover:dark:border-sky-600"
             >
               Import From
             </div>
@@ -172,13 +178,13 @@ export default function PrivacySettings({
                   const target = e.target as HTMLInputElement;
                   if (target.id !== "import-dropdown") setImportDropdown(false);
                 }}
-                className={`absolute top-7 left-0 w-36 py-1 shadow-md border border-sky-100 bg-gray-50 rounded-md flex flex-col z-20`}
+                className={`absolute top-7 left-0 w-36 py-1 shadow-md border border-sky-100 dark:border-neutral-700 bg-gray-50 dark:bg-neutral-800 rounded-md flex flex-col z-20`}
               >
                 <div className="cursor-pointer rounded-md">
                   <label
                     htmlFor="import-file"
                     title="JSON"
-                    className="flex items-center gap-2 py-1 px-2 hover:bg-slate-200 duration-100 cursor-pointer"
+                    className="flex items-center gap-2 py-1 px-2 hover:bg-slate-200 hover:dark:bg-neutral-700  duration-100 cursor-pointer"
                   >
                     Linkwarden
                     <input
@@ -196,7 +202,7 @@ export default function PrivacySettings({
           </div>
 
           <Link className="w-fit" href="/api/data">
-            <div className="border border-slate-200 rounded-md bg-white px-2 text-center select-none cursor-pointer text-sky-900 duration-100 hover:border-sky-700">
+            <div className="border border-slate-200 dark:border-neutral-700 rounded-md bg-white dark:bg-neutral-800 px-2 text-center select-none cursor-pointer duration-100 hover:border-sky-300 hover:dark:border-sky-600">
               Export Data
             </div>
           </Link>
diff --git a/components/Modal/User/ProfileSettings.tsx b/components/Modal/User/ProfileSettings.tsx
index 84ed767..95ce4b8 100644
--- a/components/Modal/User/ProfileSettings.tsx
+++ b/components/Modal/User/ProfileSettings.tsx
@@ -9,6 +9,7 @@ import { faPenToSquare } from "@fortawesome/free-regular-svg-icons";
 import SubmitButton from "../../SubmitButton";
 import ProfilePhoto from "../../ProfilePhoto";
 import { toast } from "react-hot-toast";
+import TextInput from "@/components/TextInput";
 
 type Props = {
   toggleSettingsModal: Function;
@@ -102,7 +103,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 mb-2 text-center">Profile Photo</p>
+          <p className="text-sm text-black dark:text-white 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}
@@ -127,7 +130,7 @@ export default function ProfileSettings({
               <label
                 htmlFor="upload-photo"
                 title="PNG or JPG (Max: 3MB)"
-                className="border border-slate-200 rounded-md bg-white px-2 text-center select-none cursor-pointer text-sky-900 duration-100 hover:border-sky-700"
+                className="border border-slate-200 dark:border-neutral-700 rounded-md bg-white dark:bg-neutral-800 px-2 text-center select-none cursor-pointer duration-100 hover:border-sky-300 hover:dark:border-sky-600"
               >
                 Browse...
                 <input
@@ -145,33 +148,29 @@ export default function ProfileSettings({
 
         <div className="flex flex-col gap-3">
           <div>
-            <p className="text-sm text-sky-700 mb-2">Display Name</p>
-            <input
-              type="text"
-              value={user.name}
+            <p className="text-sm text-black dark:text-white mb-2">
+              Display Name
+            </p>
+            <TextInput
+              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"
             />
           </div>
 
           <div>
-            <p className="text-sm text-sky-700 mb-2">Username</p>
-            <input
-              type="text"
+            <p className="text-sm text-black dark:text-white mb-2">Username</p>
+            <TextInput
               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"
             />
           </div>
 
           {emailEnabled ? (
             <div>
-              <p className="text-sm text-sky-700 mb-2">Email</p>
-              <input
-                type="text"
+              <p className="text-sm text-black dark:text-white mb-2">Email</p>
+              <TextInput
                 value={user.email || ""}
                 onChange={(e) => setUser({ ...user, email: e.target.value })}
-                className="w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
               />
             </div>
           ) : undefined}
@@ -184,15 +183,6 @@ export default function ProfileSettings({
         </div>
       </div>
 
-      {/* <hr /> TODO: Export functionality
-
-      <p className="text-sky-700">Data Settings</p>
-
-      <div className="w-fit">
-        <div className="border border-sky-100 rounded-md bg-white px-2 py-1 text-center select-none cursor-pointer text-sky-900 duration-100 hover:border-sky-700">
-          Export Data
-        </div>
-      </div> */}
       <SubmitButton
         onClick={submit}
         loading={submitLoader}
diff --git a/components/Modal/User/index.tsx b/components/Modal/User/index.tsx
index bc56e4b..dacadfb 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-black dark:text-white">
           <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-white  duration-100 rounded-md outline-none"
+                : "px-2 py-1 hover:bg-slate-200 hover:dark:bg-neutral-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-white duration-100 rounded-md outline-none"
+                : "px-2 py-1 hover:bg-slate-200 hover:dark:bg-neutral-700 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-white duration-100 rounded-md outline-none"
+                : "px-2 py-1 hover:bg-slate-200  hover:dark:bg-neutral-700 rounded-md duration-100 outline-none"
             }
           >
             Password
@@ -62,8 +62,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 duration-100 rounded-md outline-none"
+                  : "px-2 py-1 hover:bg-slate-200 hover:dark:bg-neutral-700 rounded-md duration-100 outline-none"
               }
             >
               Billing Portal
diff --git a/components/Modal/index.tsx b/components/Modal/index.tsx
index b2f2e8b..63e34e5 100644
--- a/components/Modal/index.tsx
+++ b/components/Modal/index.tsx
@@ -16,14 +16,14 @@ export default function Modal({ toggleModal, className, children }: Props) {
         onClickOutside={toggleModal}
         className={`m-auto ${className}`}
       >
-        <div className="slide-up relative border-sky-100 rounded-2xl border-solid border shadow-lg p-5 bg-white">
+        <div className="slide-up relative border-sky-100 dark:border-neutral-700 rounded-2xl border-solid border shadow-lg p-5 bg-white dark:bg-neutral-900">
           <div
             onClick={toggleModal as MouseEventHandler<HTMLDivElement>}
-            className="absolute top-5 left-5 inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 z-20 p-2"
+            className="absolute top-5 left-5 inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 z-20 p-2"
           >
             <FontAwesomeIcon
               icon={faChevronLeft}
-              className="w-4 h-4 text-gray-500"
+              className="w-4 h-4 text-gray-500 dark:text-gray-200"
             />
           </div>
           {children}
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index eac8f98..b5389c4 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -10,6 +10,7 @@ import Search from "@/components/Search";
 import useAccountStore from "@/store/account";
 import ProfilePhoto from "@/components/ProfilePhoto";
 import useModalStore from "@/store/modals";
+import { useTheme } from "next-themes";
 
 export default function Navbar() {
   const { setModal } = useModalStore();
@@ -22,6 +23,16 @@ export default function Navbar() {
 
   const router = useRouter();
 
+  const { theme, setTheme } = useTheme();
+
+  const handleToggle = () => {
+    if (theme === "dark") {
+      setTheme("light");
+    } else {
+      setTheme("dark");
+    }
+  };
+
   window.addEventListener("resize", () => setSidebar(false));
 
   useEffect(() => {
@@ -33,10 +44,10 @@ export default function Navbar() {
   };
 
   return (
-    <div className="flex justify-between gap-2 items-center px-5 py-2 border-solid border-b-sky-100 border-b h-16">
+    <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-sky-700 rounded-md duration-100 hover:bg-slate-200"
+        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"
       >
         <FontAwesomeIcon icon={faBars} className="w-5 h-5" />
       </div>
@@ -50,7 +61,7 @@ export default function Navbar() {
               method: "CREATE",
             });
           }}
-          className="inline-flex gap-1 relative sm:w-[7.2rem] items-center font-semibold select-none cursor-pointer p-[0.687rem] sm:p-2 sm:px-3 rounded-md sm:rounded-full hover:bg-sky-100 text-sky-700 sm:text-white sm:bg-sky-700 sm:hover:bg-sky-600 duration-100 group"
+          className="inline-flex gap-1 relative sm:w-[7.2rem] items-center font-semibold select-none cursor-pointer p-[0.687rem] sm:p-2 sm:px-3 rounded-md sm:rounded-full hover:bg-sky-100 dark:hover:bg-sky-800 sm:dark:hover:bg-sky-600 text-sky-500 sm:text-white sm:bg-sky-700 sm:hover:bg-sky-600 duration-100 group"
         >
           <FontAwesomeIcon
             icon={faPlus}
@@ -60,20 +71,19 @@ export default function Navbar() {
             New Link
           </span>
         </div>
-
         <div className="relative">
           <div
-            className="flex gap-1 group sm:hover:bg-slate-200 sm:hover:p-1 sm:hover:pr-2 duration-100 h-10 rounded-full items-center w-fit bg-white cursor-pointer"
+            className="flex gap-1 group sm:hover:bg-slate-200 sm:hover:dark:bg-neutral-700 sm:hover:p-1 sm:hover:pr-2 duration-100 h-10 rounded-full items-center w-fit 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]"
+              className="sm:group-hover:h-8 sm:group-hover:w-8 duration-100 border-[3px]"
             />
             <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>
@@ -92,6 +102,13 @@ export default function Navbar() {
                     setProfileDropdown(!profileDropdown);
                   },
                 },
+                {
+                  name: `Switch to ${theme === "light" ? "Dark" : "Light"}`,
+                  onClick: () => {
+                    handleToggle();
+                    setProfileDropdown(!profileDropdown);
+                  },
+                },
                 {
                   name: "Logout",
                   onClick: () => {
diff --git a/components/NoLinksFound.tsx b/components/NoLinksFound.tsx
index e08f23c..5a2de2d 100644
--- a/components/NoLinksFound.tsx
+++ b/components/NoLinksFound.tsx
@@ -7,12 +7,12 @@ export default function NoLinksFound() {
   const { setModal } = useModalStore();
 
   return (
-    <div className="border border-solid border-sky-100 w-full p-10 rounded-2xl">
-      <p className="text-center text-3xl text-sky-700">
+    <div className="border border-solid border-sky-100 dark:border-neutral-700 w-full p-10 rounded-2xl">
+      <p className="text-center text-3xl text-black dark:text-white">
         You haven&apos;t created any Links Here
       </p>
       <br />
-      <div className="text-center text-sky-900 text-sm flex items-baseline justify-center gap-1 w-full">
+      <div className="text-center text-black dark:text-white text-sm flex items-baseline justify-center gap-1 w-full">
         <p>Start by creating a</p>{" "}
         <div
           onClick={() => {
@@ -22,7 +22,7 @@ export default function NoLinksFound() {
               method: "CREATE",
             });
           }}
-          className="inline-flex gap-1 relative w-[7.2rem] items-center font-semibold select-none cursor-pointer p-2 px-3 rounded-full text-white bg-sky-700 hover:bg-sky-600 duration-100 group"
+          className="inline-flex gap-1 relative w-[7.2rem] items-center font-semibold select-none cursor-pointer p-2 px-3 rounded-full text-white bg-sky-700 dark:bg-sky-400 hover:bg-sky-600 duration-100 group"
         >
           <FontAwesomeIcon
             icon={faPlus}
diff --git a/components/ProfilePhoto.tsx b/components/ProfilePhoto.tsx
index 72f7278..62dd8bc 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 text-white h-10 w-10 aspect-square shadow rounded-full border border-slate-200 flex items-center justify-center ${className}`}
+      className={`bg-sky-600 dark:bg-sky-600 text-white h-10 w-10 aspect-square shadow rounded-full border border-slate-200 dark:border-neutral-700 flex items-center justify-center ${className}`}
     >
       <FontAwesomeIcon icon={faUser} className="w-1/2 h-1/2 aspect-square" />
     </div>
@@ -43,7 +43,7 @@ export default function ProfilePhoto({
       src={src}
       height={112}
       width={112}
-      className={`h-10 w-10 shadow rounded-full aspect-square border border-slate-200 ${className}`}
+      className={`h-10 w-10 shadow rounded-full aspect-square border border-slate-200 dark:border-neutral-700 ${className}`}
     />
   );
 }
diff --git a/components/PublicPage/LinkCard.tsx b/components/PublicPage/LinkCard.tsx
index 313c953..5a20b34 100644
--- a/components/PublicPage/LinkCard.tsx
+++ b/components/PublicPage/LinkCard.tsx
@@ -58,8 +58,10 @@ export default function LinkCard({ link, count }: Props) {
         <div className="flex justify-between items-center gap-5 w-full h-full z-0">
           <div className="flex flex-col justify-between">
             <div className="flex items-baseline gap-1">
-              <p className="text-sm text-sky-500 font-bold">{count + 1}.</p>
-              <p className="text-lg text-sky-700  font-bold">{link.name}</p>
+              <p className="text-xs text-gray-500">{count + 1}</p>
+              <p className="text-lg text-black">
+                {link.name || link.description}
+              </p>
             </div>
 
             <p className="text-gray-500 text-sm font-medium">
@@ -70,7 +72,7 @@ export default function LinkCard({ link, count }: Props) {
                 {link.tags.map((e, i) => (
                   <p
                     key={i}
-                    className="px-2 py-1 bg-sky-200 text-sky-700 text-xs rounded-3xl cursor-pointer truncate max-w-[10rem]"
+                    className="px-2 py-1 bg-sky-200 text-black text-xs rounded-3xl cursor-pointer truncate max-w-[10rem]"
                   >
                     {e.name}
                   </p>
@@ -79,7 +81,7 @@ export default function LinkCard({ link, count }: Props) {
             </div>
             <div className="flex gap-2 items-center flex-wrap mt-2">
               <p className="text-gray-500">{formattedDate}</p>
-              <div className="text-sky-500 font-bold flex items-center gap-1">
+              <div className="text-black flex items-center gap-1">
                 <p>{url ? url.host : link.url}</p>
               </div>
             </div>
diff --git a/components/RadioButton.tsx b/components/RadioButton.tsx
index 6785045..fb217d9 100644
--- a/components/RadioButton.tsx
+++ b/components/RadioButton.tsx
@@ -20,13 +20,15 @@ export default function RadioButton({ label, state, onClick }: Props) {
       />
       <FontAwesomeIcon
         icon={faCircleCheck}
-        className="w-5 h-5 text-sky-700 peer-checked:block hidden"
+        className="w-5 h-5 text-sky-500 dark:text-sky-300 peer-checked:block hidden"
       />
       <FontAwesomeIcon
         icon={faCircle}
-        className="w-5 h-5 text-sky-700 peer-checked:hidden block"
+        className="w-5 h-5 text-sky-500 dark:text-sky-300 peer-checked:hidden block"
       />
-      <span className="text-sky-900 rounded select-none">{label}</span>
+      <span className="text-black dark:text-white rounded select-none">
+        {label}
+      </span>
     </label>
   );
 }
diff --git a/components/RequiredBadge.tsx b/components/RequiredBadge.tsx
index 71e60af..add4c73 100644
--- a/components/RequiredBadge.tsx
+++ b/components/RequiredBadge.tsx
@@ -1,6 +1,9 @@
 export default function RequiredBadge() {
   return (
-    <span title="Required Field" className="text-sky-700 cursor-help">
+    <span
+      title="Required Field"
+      className="text-black dark:text-white cursor-help"
+    >
       {" "}
       *
     </span>
diff --git a/components/Search.tsx b/components/Search.tsx
index 4439c0d..f3c8a3b 100644
--- a/components/Search.tsx
+++ b/components/Search.tsx
@@ -24,7 +24,7 @@ export default function Search() {
     >
       <label
         htmlFor="search-box"
-        className="inline-flex w-fit absolute left-2 pointer-events-none rounded-md p-1 text-sky-500 group-hover:text-sky-700"
+        className="inline-flex w-fit absolute left-2 pointer-events-none rounded-md p-1 text-sky-500 dark:text-sky-300"
       >
         <FontAwesomeIcon icon={faMagnifyingGlass} className="w-5 h-5" />
       </label>
@@ -44,7 +44,7 @@ export default function Search() {
           router.push("/search/" + encodeURIComponent(searchQuery))
         }
         autoFocus={searchBox}
-        className="border border-sky-100 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"
+        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"
       />
     </div>
   );
diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
index a1ccef4..1afbf94 100644
--- a/components/Sidebar.tsx
+++ b/components/Sidebar.tsx
@@ -51,22 +51,23 @@ export default function Sidebar({ className }: { className?: string }) {
 
   return (
     <div
-      className={`bg-gray-100 h-full w-64 xl:w-80 overflow-y-auto border-solid border-r-sky-100 px-2 border z-20 ${className}`}
+      className={`bg-gray-100 dark:bg-neutral-800 h-full w-64 xl:w-80 overflow-y-auto border-solid border dark:border-neutral-800 border-r-sky-100 dark:border-r-neutral-700 px-2 z-20 ${className}`}
     >
       <div className="flex justify-center gap-2 mt-2">
         <Link
           href="/dashboard"
           className={`${
             active === "/dashboard"
-              ? "bg-sky-200"
-              : "hover:bg-slate-200 bg-gray-100"
+              ? "bg-sky-200 dark:bg-sky-600"
+              : "hover:bg-slate-200 hover:dark:bg-neutral-700"
           } 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`}
+            className={`w-8 h-8 drop-shadow text-sky-500 dark:text-sky-300`}
           />
-          <p className="text-sky-700 text-xs xl:text-sm font-semibold">
+
+          <p className="text-black dark:text-white text-xs xl:text-sm font-semibold">
             Dashboard
           </p>
         </Link>
@@ -75,28 +76,34 @@ export default function Sidebar({ className }: { className?: string }) {
           href="/links"
           className={`${
             active === "/links"
-              ? "bg-sky-200"
-              : "hover:bg-slate-200 bg-gray-100"
+              ? "bg-sky-200 dark:bg-sky-600"
+              : "hover:bg-slate-200 hover:dark:bg-neutral-700"
           } 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`}
+            className={`w-8 h-8 drop-shadow text-sky-500 dark:text-sky-300`}
           />
-          <p className="text-sky-700 text-xs xl:text-sm font-semibold">Links</p>
+
+          <p className="text-black dark:text-white text-xs xl:text-sm font-semibold">
+            Links
+          </p>
         </Link>
 
         <Link
           href="/collections"
           className={`${
-            active === "/collections" ? "bg-sky-200" : "hover:bg-slate-200"
+            active === "/collections"
+              ? "bg-sky-200 dark:bg-sky-600"
+              : "hover:bg-slate-200 hover:dark:bg-neutral-700"
           } 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`}
+            className={`w-8 h-8 drop-shadow text-sky-500 dark:text-sky-300`}
           />
-          <p className="text-sky-700 text-xs xl:text-sm font-semibold">
+
+          <p className="text-black dark:text-white text-xs xl:text-sm font-semibold">
             Collections
           </p>
         </Link>
@@ -107,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 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-white mt-5"
         >
           <p>Collections</p>
 
@@ -136,8 +143,8 @@ export default function Sidebar({ className }: { className?: string }) {
                       <div
                         className={`${
                           active === `/collections/${e.id}`
-                            ? "bg-sky-200"
-                            : "hover:bg-slate-200 bg-gray-100"
+                            ? "bg-sky-200 dark:bg-sky-700 "
+                            : "hover:bg-slate-200 hover:dark:bg-neutral-700"
                         } duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
                       >
                         <FontAwesomeIcon
@@ -146,7 +153,7 @@ export default function Sidebar({ className }: { className?: string }) {
                           style={{ color: e.color }}
                         />
 
-                        <p className="text-sky-700 truncate w-full pr-7">
+                        <p className="text-black dark:text-white truncate w-full pr-7">
                           {e.name}
                         </p>
                       </div>
@@ -157,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 text-xs font-semibold truncate w-full pr-7">
+                <p className="text-gray-500 dark:text-white text-xs font-semibold truncate w-full pr-7">
                   You Have No Collections...
                 </p>
               </div>
@@ -170,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 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-white mt-5"
         >
           <p>Tags</p>
           <FontAwesomeIcon
@@ -196,16 +203,16 @@ export default function Sidebar({ className }: { className?: string }) {
                       <div
                         className={`${
                           active === `/tags/${e.id}`
-                            ? "bg-sky-200"
-                            : "hover:bg-slate-200 bg-gray-100"
+                            ? "bg-sky-200 dark:bg-sky-700"
+                            : "hover:bg-slate-200 hover:dark:bg-neutral-700"
                         } duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
                       >
                         <FontAwesomeIcon
                           icon={faHashtag}
-                          className="w-4 h-4 text-sky-500 mt-1"
+                          className="w-4 h-4 text-sky-500 dark:text-sky-300 mt-1"
                         />
 
-                        <p className="text-sky-700 truncate w-full pr-7">
+                        <p className="text-black dark:text-white truncate w-full pr-7">
                           {e.name}
                         </p>
                       </div>
@@ -216,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 text-xs font-semibold truncate w-full pr-7">
+                <p className="text-gray-500 dark:text-white text-xs font-semibold truncate w-full pr-7">
                   You Have No Tags...
                 </p>
               </div>
diff --git a/components/SortDropdown.tsx b/components/SortDropdown.tsx
index e9d8c6f..9e910e1 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 shadow-md bg-gray-50 rounded-md p-2 z-20 w-48"
+      className="absolute top-8 right-0 border border-sky-100 dark:border-neutral-700 shadow-md bg-gray-50 dark:bg-neutral-800 rounded-md p-2 z-20 w-48"
     >
-      <p className="mb-2 text-sky-900 text-center font-semibold">Sort by</p>
+      <p className="mb-2 text-black dark:text-white text-center font-semibold">
+        Sort by
+      </p>
       <div className="flex flex-col gap-2">
         <RadioButton
           label="Date (Newest First)"
diff --git a/components/TextInput.tsx b/components/TextInput.tsx
new file mode 100644
index 0000000..c3909de
--- /dev/null
+++ b/components/TextInput.tsx
@@ -0,0 +1,33 @@
+import { ChangeEventHandler, KeyboardEventHandler } from "react";
+
+type Props = {
+  autoFocus?: boolean;
+  value?: string;
+  type?: string;
+  placeholder?: string;
+  onChange: ChangeEventHandler<HTMLInputElement>;
+  onKeyDown?: KeyboardEventHandler<HTMLInputElement> | undefined;
+  className?: string;
+};
+
+export default function TextInput({
+  autoFocus,
+  value,
+  type,
+  placeholder,
+  onChange,
+  onKeyDown,
+  className,
+}: Props) {
+  return (
+    <input
+      autoFocus={autoFocus}
+      type={type ? type : "text"}
+      placeholder={placeholder}
+      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}`}
+    />
+  );
+}
diff --git a/components/ToggleDarkMode.tsx b/components/ToggleDarkMode.tsx
new file mode 100644
index 0000000..0ba36b8
--- /dev/null
+++ b/components/ToggleDarkMode.tsx
@@ -0,0 +1,29 @@
+import { useTheme } from "next-themes";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faSun, faMoon } from "@fortawesome/free-solid-svg-icons";
+
+export default function ToggleDarkMode() {
+  const { theme, setTheme } = useTheme();
+
+  const handleToggle = () => {
+    if (theme === "dark") {
+      setTheme("light");
+    } else {
+      setTheme("dark");
+    }
+  };
+
+  return (
+    <div
+      className="flex gap-1 duration-100 h-10 rounded-full items-center w-fit cursor-pointer"
+      onClick={handleToggle}
+    >
+      <div className="shadow bg-sky-700 dark:bg-sky-400 flex items-center justify-center rounded-full text-white w-10 h-10 duration-100">
+        <FontAwesomeIcon
+          icon={theme === "dark" ? faSun : faMoon}
+          className="w-1/2 h-1/2"
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/layouts/CenteredForm.tsx b/layouts/CenteredForm.tsx
index b3cf8a2..5cb1c62 100644
--- a/layouts/CenteredForm.tsx
+++ b/layouts/CenteredForm.tsx
@@ -1,4 +1,6 @@
+import { useTheme } from "next-themes";
 import Image from "next/image";
+import Link from "next/link";
 import React, { ReactNode } from "react";
 
 interface Props {
@@ -7,24 +9,39 @@ interface Props {
 }
 
 export default function CenteredForm({ text, children }: Props) {
+  const { theme } = useTheme();
   return (
-    <div className="absolute top-0 bottom-0 left-0 right-0 flex justify-center items-center p-2">
+    <div className="absolute top-0 bottom-0 left-0 right-0 flex justify-center items-center p-5">
       <div className="m-auto flex flex-col gap-2">
-        <Image
-          src="/linkwarden.png"
-          width={518}
-          height={145}
-          alt="Linkwarden"
-          className="h-12 w-fit mx-auto"
-        />
+        {theme === "light" ? (
+          <Image
+            src="/linkwarden.png"
+            width={518}
+            height={145}
+            alt="Linkwarden"
+            className="h-12 w-fit mx-auto"
+          />
+        ) : (
+          <Image
+            src="/linkwarden_darkmode.png"
+            width={518}
+            height={145}
+            alt="Linkwarden"
+            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">
-          © {new Date().getFullYear()} Linkwarden. All rights reserved.
+        <p className="text-center text-xs text-gray-500 mb-5 dark:text-gray-400">
+          © {new Date().getFullYear()}{" "}
+          <Link href="https://linkwarden.app" className="font-semibold">
+            Linkwarden
+          </Link>
+          . All rights reserved.
         </p>
       </div>
     </div>
diff --git a/package.json b/package.json
index afd3390..5475ab1 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
     "eslint-config-next": "13.4.9",
     "next": "13.4.12",
     "next-auth": "^4.22.1",
+    "next-themes": "^0.2.1",
     "nodemailer": "^6.9.3",
     "playwright": "^1.35.1",
     "react": "18.2.0",
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 68b6f36..7e8dd7c 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import "@/styles/globals.css";
 import { SessionProvider } from "next-auth/react";
 import type { AppProps } from "next/app";
@@ -6,6 +6,7 @@ import Head from "next/head";
 import AuthRedirect from "@/layouts/AuthRedirect";
 import { Toaster } from "react-hot-toast";
 import { Session } from "next-auth";
+import { ThemeProvider } from "next-themes";
 
 export default function App({
   Component,
@@ -13,6 +14,13 @@ export default function App({
 }: AppProps<{
   session: Session;
 }>) {
+  const defaultTheme: "light" | "dark" = "dark";
+
+  useEffect(() => {
+    if (!localStorage.getItem("theme"))
+      localStorage.setItem("theme", defaultTheme);
+  }, []);
+
   return (
     <SessionProvider session={pageProps.session}>
       <Head>
@@ -37,13 +45,18 @@ export default function App({
         />
         <link rel="manifest" href="/site.webmanifest" />
       </Head>
-      <Toaster
-        position="top-center"
-        reverseOrder={false}
-        toastOptions={{ className: "border border-sky-100" }}
-      />
       <AuthRedirect>
-        <Component {...pageProps} />
+        <ThemeProvider attribute="class">
+          <Toaster
+            position="top-center"
+            reverseOrder={false}
+            toastOptions={{
+              className:
+                "border border-sky-100 dark:dark:border-neutral-700 dark:bg-neutral-900 dark:text-white",
+            }}
+          />
+          <Component {...pageProps} />
+        </ThemeProvider>
       </AuthRedirect>
     </SessionProvider>
   );
diff --git a/pages/choose-username.tsx b/pages/choose-username.tsx
index f329b66..0dd385a 100644
--- a/pages/choose-username.tsx
+++ b/pages/choose-username.tsx
@@ -7,6 +7,7 @@ import { useSession } from "next-auth/react";
 import { useRouter } from "next/router";
 import useAccountStore from "@/store/account";
 import CenteredForm from "@/layouts/CenteredForm";
+import TextInput from "@/components/TextInput";
 
 export default function Subscribe() {
   const [submitLoader, setSubmitLoader] = useState(false);
@@ -39,28 +40,29 @@ export default function Subscribe() {
 
   return (
     <CenteredForm>
-      <div className="p-2 mx-auto 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-center text-black font-bold">
+      <div className="p-4 mx-auto flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 dark:border-neutral-700 dark:bg-neutral-800 rounded-2xl shadow-md border border-sky-100">
+        <p className="text-2xl text-center text-black dark:text-white font-bold">
           Choose a Username (Last step)
         </p>
 
         <div>
-          <p className="text-sm text-sky-700 w-fit font-semibold mb-1">
+          <p className="text-sm text-black dark:text-white w-fit font-semibold mb-1">
             Username
           </p>
 
-          <input
-            type="text"
+          <TextInput
             placeholder="john"
             value={inputedUsername}
             onChange={(e) => setInputedUsername(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"
           />
         </div>
         <div>
-          <p className="text-md text-gray-500 mt-1">
+          <p className="text-md text-gray-500 dark:text-gray-400 mt-1">
             Feel free to reach out to us at{" "}
-            <a className="font-semibold" href="mailto:support@linkwarden.app">
+            <a
+              className="font-semibold underline"
+              href="mailto:support@linkwarden.app"
+            >
               support@linkwarden.app
             </a>{" "}
             in case of any issues.
@@ -76,7 +78,7 @@ export default function Subscribe() {
 
         <div
           onClick={() => signOut()}
-          className="w-fit mx-auto cursor-pointer text-gray-500 font-semibold "
+          className="w-fit mx-auto cursor-pointer text-gray-500 dark:text-gray-400 font-semibold "
         >
           Sign Out
         </div>
diff --git a/pages/collections/[id].tsx b/pages/collections/[id].tsx
index 097e4f1..a664ce2 100644
--- a/pages/collections/[id].tsx
+++ b/pages/collections/[id].tsx
@@ -50,7 +50,7 @@ export default function Index() {
   return (
     <MainLayout>
       <div className="p-5 flex flex-col gap-5 w-full">
-        <div className="bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% rounded-2xl shadow min-h-[10rem] p-5 flex gap-5 flex-col justify-between">
+        <div className="bg-gradient-to-tr from-sky-100 dark:from-gray-800 from-10% via-gray-100 via-20% to-white dark:to-neutral-800 to-100% rounded-2xl shadow min-h-[10rem] p-5 flex gap-5 flex-col justify-between">
           <div className="flex flex-col sm:flex-row gap-3 justify-between items-center sm:items-start">
             {activeCollection && (
               <div className="flex gap-3 items-center">
@@ -60,7 +60,7 @@ export default function Index() {
                     style={{ color: activeCollection?.color }}
                     className="sm:w-8 sm:h-8 w-6 h-6 mt-3 drop-shadow"
                   />
-                  <p className="sm:text-4xl text-3xl capitalize text-sky-700 font-bold w-full py-1 break-words hyphens-auto">
+                  <p className="sm:text-4xl text-3xl capitalize text-black dark:text-white w-full py-1 break-words hyphens-auto">
                     {activeCollection?.name}
                   </p>
                 </div>
@@ -116,19 +116,19 @@ export default function Index() {
             ) : null}
           </div>
 
-          <div className="text-gray-600 flex justify-between items-end gap-5">
+          <div className="text-black dark:text-white flex justify-between items-end gap-5">
             <p>{activeCollection?.description}</p>
             <div className="flex items-center gap-2">
               <div className="relative">
                 <div
                   onClick={() => setSortDropdown(!sortDropdown)}
                   id="sort-dropdown"
-                  className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
+                  className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1"
                 >
                   <FontAwesomeIcon
                     icon={faSort}
                     id="sort-dropdown"
-                    className="w-5 h-5 text-gray-500"
+                    className="w-5 h-5 text-gray-500 dark:text-white"
                   />
                 </div>
 
@@ -144,13 +144,13 @@ export default function Index() {
                 <div
                   onClick={() => setExpandDropdown(!expandDropdown)}
                   id="expand-dropdown"
-                  className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
+                  className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1"
                 >
                   <FontAwesomeIcon
                     icon={faEllipsis}
                     id="expand-dropdown"
                     title="More"
-                    className="w-5 h-5 text-gray-500"
+                    className="w-5 h-5 text-gray-500 dark:text-white"
                   />
                 </div>
                 {expandDropdown ? (
diff --git a/pages/collections/index.tsx b/pages/collections/index.tsx
index 2ac4b64..1dc5aaa 100644
--- a/pages/collections/index.tsx
+++ b/pages/collections/index.tsx
@@ -37,9 +37,9 @@ export default function Collections() {
             <div className="flex gap-2">
               <FontAwesomeIcon
                 icon={faFolder}
-                className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500 drop-shadow"
+                className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500 dark:text-sky-300 drop-shadow"
               />
-              <p className="sm:text-4xl text-3xl capitalize text-sky-700 font-bold">
+              <p className="sm:text-4xl text-3xl capitalize text-black dark:text-white">
                 All Collections
               </p>
             </div>
@@ -47,12 +47,12 @@ export default function Collections() {
               <div
                 onClick={() => setExpandDropdown(!expandDropdown)}
                 id="expand-dropdown"
-                className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
+                className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1"
               >
                 <FontAwesomeIcon
                   icon={faEllipsis}
                   id="expand-dropdown"
-                  className="w-5 h-5 text-gray-500"
+                  className="w-5 h-5 text-gray-500 dark:text-white"
                 />
               </div>
 
@@ -86,12 +86,12 @@ export default function Collections() {
             <div
               onClick={() => setSortDropdown(!sortDropdown)}
               id="sort-dropdown"
-              className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
+              className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1"
             >
               <FontAwesomeIcon
                 icon={faSort}
                 id="sort-dropdown"
-                className="w-5 h-5 text-gray-500"
+                className="w-5 h-5 text-gray-500 dark:text-white"
               />
             </div>
 
@@ -111,7 +111,7 @@ export default function Collections() {
           })}
 
           <div
-            className="p-5 self-stretch bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% 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 self-stretch bg-gradient-to-tr from-sky-100 dark:from-gray-800 from-10% via-gray-100 via-20% to-white dark:to-neutral-800 to-100% 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",
@@ -120,12 +120,12 @@ export default function Collections() {
               });
             }}
           >
-            <p className="text-sky-900 group-hover:opacity-0 duration-100">
+            <p className="text-black dark:text-white group-hover:opacity-0 duration-100">
               New Collection
             </p>
             <FontAwesomeIcon
               icon={faPlus}
-              className="w-8 h-8 text-sky-500 group-hover:w-12 group-hover:h-12 group-hover:-mt-10 duration-100"
+              className="w-8 h-8 text-sky-500 dark:text-sky-300 group-hover:w-12 group-hover:h-12 group-hover:-mt-10 duration-100"
             />
           </div>
         </div>
diff --git a/pages/confirmation.tsx b/pages/confirmation.tsx
index e9025c0..f0c5184 100644
--- a/pages/confirmation.tsx
+++ b/pages/confirmation.tsx
@@ -5,18 +5,18 @@ import React from "react";
 export default function EmailConfirmaion() {
   return (
     <CenteredForm>
-      <div className="p-2 sm:w-[30rem] w-80 rounded-2xl shadow-md m-auto border border-sky-100 bg-slate-50 text-sky-800">
-        <p className="text-center text-xl font-bold mb-2 text-black">
+      <div className="p-4 sm:w-[30rem] w-80 rounded-2xl shadow-md m-auto border border-sky-100 dark:border-neutral-700 bg-slate-50 text-black dark:text-white dark:bg-neutral-800">
+        <p className="text-center text-xl font-bold mb-2">
           Please check your Email
         </p>
         <p>A sign in link has been sent to your email address.</p>
         <p>You can safely close this page.</p>
 
-        <hr className="my-5" />
+        <hr className="my-5 dark:border-neutral-700" />
 
-        <p className="text-sm text-gray-500 ">
+        <p className="text-sm text-gray-500 dark:text-gray-400">
           If you didn&apos;t receive anything, go to the{" "}
-          <Link href="/forgot" className="font-bold">
+          <Link href="/forgot" className="font-bold underline">
             Password Recovery
           </Link>{" "}
           page and enter your Email to resend the sign in link.
diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx
index ac5f862..5e784b8 100644
--- a/pages/dashboard.tsx
+++ b/pages/dashboard.tsx
@@ -83,9 +83,9 @@ export default function Dashboard() {
           <div className="flex gap-2">
             <FontAwesomeIcon
               icon={faChartSimple}
-              className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500 drop-shadow"
+              className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500 dark:text-sky-300 drop-shadow"
             />
-            <p className="sm:text-4xl text-3xl capitalize text-sky-700 font-bold">
+            <p className="sm:text-4xl text-3xl capitalize text-black dark:text-white">
               Dashboard
             </p>
           </div>
@@ -95,24 +95,28 @@ export default function Dashboard() {
 
         <div className="flex flex-col md:flex-row md:items-center justify-evenly gap-2 mb-10">
           <div className="flex items-baseline gap-2">
-            <p className="font-bold text-6xl text-sky-700">{numberOfLinks}</p>
-            <p className="text-sky-900 text-xl">
+            <p className="font-bold text-6xl text-sky-500 dark:text-sky-300">
+              {numberOfLinks}
+            </p>
+            <p className="text-black dark:text-white text-xl">
               {numberOfLinks === 1 ? "Link" : "Links"}
             </p>
           </div>
 
           <div className="flex items-baseline gap-2">
-            <p className="font-bold text-6xl text-sky-700">
+            <p className="font-bold text-6xl text-sky-500 dark:text-sky-300">
               {collections.length}
             </p>
-            <p className="text-sky-900 text-xl">
+            <p className="text-black dark:text-white text-xl">
               {collections.length === 1 ? "Collection" : "Collections"}
             </p>
           </div>
 
           <div className="flex items-baseline gap-2">
-            <p className="font-bold text-6xl text-sky-700">{tags.length}</p>
-            <p className="text-sky-900 text-xl">
+            <p className="font-bold text-6xl text-sky-500 dark:text-sky-300">
+              {tags.length}
+            </p>
+            <p className="text-black dark:text-white text-xl">
               {tags.length === 1 ? "Tag" : "Tags"}
             </p>
           </div>
@@ -129,15 +133,17 @@ export default function Dashboard() {
                   onClick={() => {
                     setLinkPinDisclosure(!linkPinDisclosure);
                   }}
-                  className="flex justify-between gap-2 items-baseline shadow active:shadow-inner duration-100 py-2 px-4 rounded-full"
+                  className="flex justify-between gap-2 items-baseline shadow active:shadow-inner dark:bg-neutral-700 duration-100 py-2 px-4 rounded-full"
                 >
-                  <p className="text-sky-700 text-xl">Pinned Links</p>
+                  <p className="text-black dark:text-white text-xl">
+                    Pinned Links
+                  </p>
 
-                  <div className="text-sky-700 flex items-center gap-2">
+                  <div className="text-black dark:text-white flex items-center gap-2">
                     {linkPinDisclosure ? "Hide" : "Show"}
                     <FontAwesomeIcon
                       icon={faChevronDown}
-                      className={`w-4 h-4 text-sky-300 ${
+                      className={`w-4 h-4 text-black dark:text-white ${
                         linkPinDisclosure ? "rotate-reverse" : "rotate"
                       }`}
                     />
@@ -163,11 +169,11 @@ export default function Dashboard() {
               </div>
             </Disclosure>
           ) : (
-            <div className="border border-solid border-sky-100 w-full mx-auto md:w-2/3 p-10 rounded-2xl">
-              <p className="text-center text-2xl text-sky-700">
+            <div className="border border-solid border-sky-100 dark:border-neutral-700 w-full mx-auto md:w-2/3 p-10 rounded-2xl">
+              <p className="text-center text-2xl text-black dark:text-white">
                 No Pinned Links
               </p>
-              <p className="text-center text-sky-900 text-sm">
+              <p className="text-center text-black dark:text-white text-sm">
                 You can Pin Links by clicking on the three dots on each Link and
                 clicking &quot;Pin to Dashboard.&quot;
               </p>
@@ -182,13 +188,13 @@ export default function Dashboard() {
                 }}
                 className="flex justify-between gap-2 items-baseline shadow active:shadow-inner duration-100 py-2 px-4 rounded-full"
               >
-                <p className="text-sky-700 text-xl">Pinned Collections</p>
+                <p className="text-black text-xl">Pinned Collections</p>
 
-                <div className="text-sky-700 flex items-center gap-2">
+                <div className="text-black flex items-center gap-2">
                   {collectionPinDisclosure ? "Hide" : "Show"}
                   <FontAwesomeIcon
                     icon={faChevronDown}
-                    className={`w-4 h-4 text-sky-300 ${
+                    className={`w-4 h-4 text-black ${
                       collectionPinDisclosure ? "rotate-reverse" : "rotate"
                     }`}
                   />
@@ -219,13 +225,13 @@ export default function Dashboard() {
                 }}
                 className="flex justify-between gap-2 items-baseline shadow active:shadow-inner duration-100 py-2 px-4 rounded-full"
               >
-                <p className="text-sky-700 text-xl">Pinned Tags</p>
+                <p className="text-black text-xl">Pinned Tags</p>
 
-                <div className="text-sky-700 flex items-center gap-2">
+                <div className="text-black flex items-center gap-2">
                   {tagPinDisclosure ? "Hide" : "Show"}
                   <FontAwesomeIcon
                     icon={faChevronDown}
-                    className={`w-4 h-4 text-sky-300 ${
+                    className={`w-4 h-4 text-black ${
                       tagPinDisclosure ? "rotate-reverse" : "rotate"
                     }`}
                   />
@@ -244,7 +250,7 @@ export default function Dashboard() {
                     <Link
                       href={`/tags/${e.id}`}
                       key={i}
-                      className="px-2 py-1 bg-sky-200 rounded-full hover:opacity-60 duration-100 text-sky-700"
+                      className="px-2 py-1 bg-sky-200 rounded-full hover:opacity-60 duration-100 text-black"
                     >
                       {e.name}
                     </Link>
diff --git a/pages/forgot.tsx b/pages/forgot.tsx
index 5104cec..d0c76ec 100644
--- a/pages/forgot.tsx
+++ b/pages/forgot.tsx
@@ -1,4 +1,5 @@
 import SubmitButton from "@/components/SubmitButton";
+import TextInput from "@/components/TextInput";
 import CenteredForm from "@/layouts/CenteredForm";
 import { signIn } from "next-auth/react";
 import Image from "next/image";
@@ -40,27 +41,30 @@ export default function Forgot() {
 
   return (
     <CenteredForm>
-      <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 font-bold">Password Recovery</p>
+      <div className="p-4 flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 dark:border-neutral-700 dark:bg-neutral-800 rounded-2xl shadow-md border border-sky-100">
+        <p className="text-2xl text-center text-black dark:text-white font-bold">
+          Password Recovery
+        </p>
         <div>
-          <p className="text-md text-black">
+          <p className="text-md text-black dark:text-white">
             Enter your Email so we can send you a link to recover your account.
             Make sure to change your password in the profile settings
             afterwards.
           </p>
-          <p className="text-sm text-gray-500">
+          <p className="text-sm text-gray-500 dark:text-gray-400">
             You wont get logged in if you haven&apos;t created an account yet.
           </p>
         </div>
         <div>
-          <p className="text-sm text-sky-700 w-fit font-semibold mb-1">Email</p>
+          <p className="text-sm text-black dark:text-white w-fit font-semibold mb-1">
+            Email
+          </p>
 
-          <input
-            type="text"
+          <TextInput
+            type="email"
             placeholder="johnny@example.com"
             value={form.email}
             onChange={(e) => setForm({ ...form, email: 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"
           />
         </div>
 
@@ -71,7 +75,10 @@ export default function Forgot() {
           loading={submitLoader}
         />
         <div className="flex items-baseline gap-1 justify-center">
-          <Link href={"/login"} className="block text-sky-700 font-bold">
+          <Link
+            href={"/login"}
+            className="block text-black dark:text-white font-bold"
+          >
             Go back
           </Link>
         </div>
diff --git a/pages/links.tsx b/pages/links.tsx
index 958eb2b..1fdc117 100644
--- a/pages/links.tsx
+++ b/pages/links.tsx
@@ -24,9 +24,9 @@ export default function Links() {
           <div className="flex gap-2">
             <FontAwesomeIcon
               icon={faLink}
-              className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500 drop-shadow"
+              className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500 dark:text-sky-300 drop-shadow"
             />
-            <p className="sm:text-4xl text-3xl capitalize text-sky-700 font-bold">
+            <p className="sm:text-4xl text-3xl capitalize text-black dark:text-white">
               All Links
             </p>
           </div>
@@ -35,12 +35,12 @@ export default function Links() {
             <div
               onClick={() => setSortDropdown(!sortDropdown)}
               id="sort-dropdown"
-              className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
+              className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1"
             >
               <FontAwesomeIcon
                 icon={faSort}
                 id="sort-dropdown"
-                className="w-5 h-5 text-gray-500"
+                className="w-5 h-5 text-gray-500 dark:text-gray-200"
               />
             </div>
 
diff --git a/pages/login.tsx b/pages/login.tsx
index f96abf9..2b77163 100644
--- a/pages/login.tsx
+++ b/pages/login.tsx
@@ -1,4 +1,5 @@
 import SubmitButton from "@/components/SubmitButton";
+import TextInput from "@/components/TextInput";
 import CenteredForm from "@/layouts/CenteredForm";
 import { signIn } from "next-auth/react";
 import Image from "next/image";
@@ -47,41 +48,41 @@ 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-4 flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-sky-100 dark:border-neutral-700">
+        <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-black dark:text-white w-fit font-semibold mb-1">
             Username
-            {emailEnabled ? "/Email" : undefined}
+            {emailEnabled ? " or Email" : undefined}
           </p>
 
-          <input
-            type="text"
+          <TextInput
             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"
           />
         </div>
 
         <div>
-          <p className="text-sm text-sky-700 w-fit font-semibold mb-1">
+          <p className="text-sm text-black dark:text-white w-fit font-semibold mb-1">
             Password
           </p>
 
-          <input
+          <TextInput
             type="password"
             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"
           />
           {emailEnabled && (
             <div className="w-fit ml-auto mt-1">
-              <Link href={"/forgot"} className="text-gray-500 font-semibold">
+              <Link
+                href={"/forgot"}
+                className="text-gray-500 dark:text-gray-400 font-semibold"
+              >
                 Forgot Password?
               </Link>
             </div>
@@ -95,8 +96,11 @@ 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-gray-400">New here?</p>
+          <Link
+            href={"/register"}
+            className="block text-black dark:text-white font-semibold"
+          >
             Sign Up
           </Link>
         </div>
diff --git a/pages/public/collections/[id].tsx b/pages/public/collections/[id].tsx
index 782647d..bc0685c 100644
--- a/pages/public/collections/[id].tsx
+++ b/pages/public/collections/[id].tsx
@@ -45,9 +45,7 @@ export default function PublicCollections() {
       <div
         className={`text-center bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% rounded-3xl shadow-lg p-5`}
       >
-        <p className="text-5xl text-sky-700 font-bold mb-5 capitalize">
-          {data.name}
-        </p>
+        <p className="text-5xl text-black mb-5 capitalize">{data.name}</p>
 
         {data.description && (
           <>
@@ -64,7 +62,7 @@ export default function PublicCollections() {
       </div>
 
       {/* <p className="text-center font-bold text-gray-500">
-        List created with <span className="text-sky-700">Linkwarden.</span>
+        List created with <span className="text-black">Linkwarden.</span>
       </p> */}
     </div>
   ) : (
diff --git a/pages/register.tsx b/pages/register.tsx
index d2236ab..2602a2e 100644
--- a/pages/register.tsx
+++ b/pages/register.tsx
@@ -5,6 +5,7 @@ import SubmitButton from "@/components/SubmitButton";
 import { signIn } from "next-auth/react";
 import { useRouter } from "next/router";
 import CenteredForm from "@/layouts/CenteredForm";
+import TextInput from "@/components/TextInput";
 
 const emailEnabled = process.env.NEXT_PUBLIC_EMAIL_PROVIDER;
 
@@ -98,107 +99,103 @@ export default function Register() {
           : "Create a new 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-4 flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-sky-100 dark:border-neutral-700">
+        <p className="text-2xl text-black dark:text-white text-center font-bold">
           Enter your details
         </p>
         <div>
-          <p className="text-sm text-sky-700 w-fit font-semibold mb-1">
+          <p className="text-sm text-black dark:text-white w-fit font-semibold mb-1">
             Display Name
           </p>
 
-          <input
-            type="text"
+          <TextInput
             placeholder="Johnny"
             value={form.name}
             onChange={(e) => setForm({ ...form, name: 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"
           />
         </div>
 
         {emailEnabled ? undefined : (
           <div>
-            <p className="text-sm text-sky-700 w-fit font-semibold mb-1">
+            <p className="text-sm text-black dark:text-white w-fit font-semibold mb-1">
               Username
             </p>
 
-            <input
-              type="text"
+            <TextInput
               placeholder="john"
               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"
             />
           </div>
         )}
 
         {emailEnabled ? (
           <div>
-            <p className="text-sm text-sky-700 w-fit font-semibold mb-1">
+            <p className="text-sm text-black dark:text-white w-fit font-semibold mb-1">
               Email
             </p>
 
-            <input
+            <TextInput
               type="email"
               placeholder="johnny@example.com"
               value={form.email}
               onChange={(e) => setForm({ ...form, email: 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"
             />
           </div>
         ) : undefined}
 
         <div className="w-full">
-          <p className="text-sm text-sky-700 w-fit font-semibold  mb-1">
+          <p className="text-sm text-black dark:text-white w-fit font-semibold  mb-1">
             Password
           </p>
 
-          <input
+          <TextInput
             type="password"
             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"
           />
         </div>
 
         <div className="w-full">
-          <p className="text-sm text-sky-700 w-fit font-semibold mb-1">
+          <p className="text-sm text-black dark:text-white w-fit font-semibold mb-1">
             Confirm Password
           </p>
 
-          <input
+          <TextInput
             type="password"
             placeholder="••••••••••••••"
             value={form.passwordConfirmation}
             onChange={(e) =>
               setForm({ ...form, passwordConfirmation: 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"
           />
         </div>
 
         {process.env.NEXT_PUBLIC_STRIPE_IS_ACTIVE ? (
           <div>
-            <p className="text-xs text-gray-500">
+            <p className="text-xs text-gray-500 dark:text-gray-400">
               By signing up, you agree to our{" "}
-              <Link href="https://linkwarden.app/tos" className="font-semibold">
+              <Link
+                href="https://linkwarden.app/tos"
+                className="font-semibold underline"
+              >
                 Terms of Service
               </Link>{" "}
               and{" "}
               <Link
                 href="https://linkwarden.app/privacy-policy"
-                className="font-semibold"
+                className="font-semibold underline"
               >
                 Privacy Policy
               </Link>
               .
             </p>
-            <p className="text-xs text-gray-500">
+            <p className="text-xs text-gray-500 dark:text-gray-400">
               Need help?{" "}
               <Link
                 href="mailto:support@linkwarden.app"
-                className="font-semibold"
+                className="font-semibold underline"
               >
                 Get in touch
               </Link>
@@ -214,8 +211,13 @@ export default function Register() {
           loading={submitLoader}
         />
         <div className="flex items-baseline gap-1 justify-center">
-          <p className="w-fit text-gray-500">Already have an account?</p>
-          <Link href={"/login"} className="block text-sky-700 font-bold">
+          <p className="w-fit text-gray-500 dark:text-gray-400">
+            Already have an account?
+          </p>
+          <Link
+            href={"/login"}
+            className="block text-black dark:text-white font-bold"
+          >
             Login
           </Link>
         </div>
diff --git a/pages/search/[query].tsx b/pages/search/[query].tsx
index 8715a41..191c771 100644
--- a/pages/search/[query].tsx
+++ b/pages/search/[query].tsx
@@ -40,9 +40,9 @@ export default function Links() {
             <div className="flex gap-2">
               <FontAwesomeIcon
                 icon={faSearch}
-                className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500 drop-shadow"
+                className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500 dark:text-sky-300 drop-shadow"
               />
-              <p className="sm:text-4xl text-3xl capitalize text-sky-700 font-bold">
+              <p className="sm:text-4xl text-3xl capitalize text-black dark:text-white">
                 Search Results
               </p>
             </div>
@@ -53,12 +53,12 @@ export default function Links() {
               <div
                 onClick={() => setFilterDropdown(!filterDropdown)}
                 id="filter-dropdown"
-                className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
+                className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1"
               >
                 <FontAwesomeIcon
                   icon={faFilter}
                   id="filter-dropdown"
-                  className="w-5 h-5 text-gray-500"
+                  className="w-5 h-5 text-gray-500 dark:text-white"
                 />
               </div>
 
@@ -75,12 +75,12 @@ export default function Links() {
               <div
                 onClick={() => setSortDropdown(!sortDropdown)}
                 id="sort-dropdown"
-                className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
+                className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1"
               >
                 <FontAwesomeIcon
                   icon={faSort}
                   id="sort-dropdown"
-                  className="w-5 h-5 text-gray-500"
+                  className="w-5 h-5 text-gray-500 dark:text-white"
                 />
               </div>
 
@@ -99,9 +99,9 @@ export default function Links() {
             return <LinkCard key={i} link={e} count={i} />;
           })
         ) : (
-          <p className="text-sky-900">
+          <p className="text-black dark:text-white">
             Nothing found.{" "}
-            <span className="text-sky-700 font-bold text-xl" title="Shruggie">
+            <span className="font-bold text-xl" title="Shruggie">
               ¯\_(ツ)_/¯
             </span>
           </p>
diff --git a/pages/subscribe.tsx b/pages/subscribe.tsx
index e7ee637..5894108 100644
--- a/pages/subscribe.tsx
+++ b/pages/subscribe.tsx
@@ -28,10 +28,11 @@ export default function Subscribe() {
     <CenteredForm
       text={`${
         process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS || 14
-      }-Day free trial, then $
-    ${process.env.NEXT_PUBLIC_PRICING}/month afterwards`}
+      }-Day free trial, then $${
+        process.env.NEXT_PUBLIC_PRICING
+      }/month afterwards`}
     >
-      <div className="p-2 mx-auto flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 rounded-2xl shadow-md border border-sky-100">
+      <div className="p-2 mx-auto flex flex-col gap-3 justify-between sm:w-[30rem] dark:border-neutral-700 w-80 bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-sky-100">
         <p className="text-2xl text-center font-bold">
           Subscribe to Linkwarden!
         </p>
@@ -56,7 +57,7 @@ export default function Subscribe() {
 
         <div
           onClick={() => signOut()}
-          className="w-fit mx-auto cursor-pointer text-gray-500 font-semibold "
+          className="w-fit mx-auto cursor-pointer text-gray-500 dark:text-gray-400 font-semibold "
         >
           Sign Out
         </div>
diff --git a/pages/tags/[id].tsx b/pages/tags/[id].tsx
index afbd1a5..bb80267 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-black dark:text-white">
                 {activeTag?.name}
               </p>
             </div>
@@ -48,12 +48,12 @@ export default function Index() {
             <div
               onClick={() => setSortDropdown(!sortDropdown)}
               id="sort-dropdown"
-              className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
+              className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1"
             >
               <FontAwesomeIcon
                 icon={faSort}
                 id="sort-dropdown"
-                className="w-5 h-5 text-gray-500"
+                className="w-5 h-5 text-gray-500 dark:text-white"
               />
             </div>
 
diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png
index 713a8b7..126d464 100644
Binary files a/public/android-chrome-192x192.png and b/public/android-chrome-192x192.png differ
diff --git a/public/android-chrome-512x512.png b/public/android-chrome-512x512.png
index 95ccf39..c517e7a 100644
Binary files a/public/android-chrome-512x512.png and b/public/android-chrome-512x512.png differ
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
index bbef715..9237458 100644
Binary files a/public/apple-touch-icon.png and b/public/apple-touch-icon.png differ
diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png
index 96fc790..d66a6c3 100644
Binary files a/public/favicon-16x16.png and b/public/favicon-16x16.png differ
diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png
index 993c56a..4ab1df5 100644
Binary files a/public/favicon-32x32.png and b/public/favicon-32x32.png differ
diff --git a/public/favicon.ico b/public/favicon.ico
index 3e2b079..3c54efd 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/public/linkwarden.png b/public/linkwarden.png
index 6ae5903..235fa72 100644
Binary files a/public/linkwarden.png and b/public/linkwarden.png differ
diff --git a/public/linkwarden_darkmode.png b/public/linkwarden_darkmode.png
new file mode 100644
index 0000000..081f065
Binary files /dev/null and b/public/linkwarden_darkmode.png differ
diff --git a/styles/globals.css b/styles/globals.css
index dfbbd41..bbc732d 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -136,11 +136,6 @@
   bottom: 0;
   left: 0;
   pointer-events: none;
-  background-image: linear-gradient(
-    to bottom,
-    rgba(255, 255, 255, 0),
-    rgba(255, 255, 255, 1) 90%
-  );
   width: 100%;
   height: 4rem;
 }
@@ -151,11 +146,69 @@
   top: 0;
   left: 0;
   pointer-events: none;
+  width: 100%;
+  height: 4rem;
+}
+
+/* For light mode */
+.link-banner::after {
+  background-image: linear-gradient(
+    to bottom,
+    rgba(255, 255, 255, 0),
+    rgba(255, 255, 255, 1) 90%
+  );
+}
+.link-banner::before {
   background-image: linear-gradient(
     to top,
     rgba(255, 255, 255, 0),
     rgba(255, 255, 255, 1) 90%
   );
-  width: 100%;
-  height: 4rem;
+}
+
+/* For dark mode */
+.banner-dark-mode .link-banner::after {
+  background-image: linear-gradient(
+    to bottom,
+    rgba(255, 255, 255, 0),
+    #171717 90%
+  );
+}
+.banner-dark-mode .link-banner::before {
+  background-image: linear-gradient(
+    to top,
+    rgba(255, 255, 255, 0),
+    #171717 90%
+  );
+}
+
+/* Theme */
+@layer base {
+  body {
+    @apply dark:bg-neutral-900 bg-white dark:text-white;
+  }
+}
+
+/* react-select */
+@layer components {
+  .react-select-container .react-select__control {
+    @apply dark:bg-neutral-950 dark:border-neutral-700 dark:hover:border-neutral-500;
+  }
+
+  .react-select-container {
+    @apply dark:border-neutral-700;
+  }
+
+  .react-select-container .react-select__menu {
+    @apply dark:bg-neutral-900 dark:border-neutral-700 border;
+  }
+
+  .react-select-container .react-select__option {
+    @apply dark:hover:bg-neutral-800;
+  }
+
+  .react-select-container .react-select__input-container,
+  .react-select-container .react-select__single-value {
+    @apply dark:text-white;
+  }
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index eb74f32..6ad2b8c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,6 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 
 module.exports = {
+  darkMode: "class",
   content: [
     "./app/**/*.{js,ts,jsx,tsx}",
     "./pages/**/*.{js,ts,jsx,tsx}",
@@ -9,8 +10,5 @@ module.exports = {
     // For the "layouts" directory
     "./layouts/**/*.{js,ts,jsx,tsx}",
   ],
-  theme: {
-    extend: {},
-  },
   plugins: [],
 };
diff --git a/yarn.lock b/yarn.lock
index dc4c9b4..10b9a3d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3558,6 +3558,11 @@ next-auth@^4.22.1:
     preact-render-to-string "^5.1.19"
     uuid "^8.3.2"
 
+next-themes@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/next-themes/-/next-themes-0.2.1.tgz#0c9f128e847979daf6c67f70b38e6b6567856e45"
+  integrity sha512-B+AKNfYNIzh0vqQQKqQItTS8evEouKD7H5Hj3kmuPERwddR2TxvDSFZuTj6T7Jfn1oyeUyJMydPl1Bkxkh0W7A==
+
 next@13.4.12:
   version "13.4.12"
   resolved "https://registry.yarnpkg.com/next/-/next-13.4.12.tgz#809b21ea0aabbe88ced53252c88c4a5bd5af95df"