diff --git a/components/CollectionCard.tsx b/components/CollectionCard.tsx
index 9805f9c..8043e0e 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-sky-800 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}`}
     >
       <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-sky-800 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-sky-500"
         />
       </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 font-bold capitalize text-sky-700 dark:text-sky-300 break-words line-clamp-3 w-4/5">
           {collection.name}
         </p>
         <div className="flex justify-between items-center">
@@ -73,11 +73,11 @@ 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-sky-700 dark:text-sky-400 font-bold text-sm flex justify-end gap-1 items-center">
+              <FontAwesomeIcon icon={faLink} className="w-5 h-5 text-sky-500 dark:text-sky-300" />
               {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-sky-500">
               <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..c20f180 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-sky-800 bg-gray-50 dark:bg-blue-925 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>
+              <p className="text-sky-900 dark:text-sky-400 select-none">{e.name}</p>
             </div>
           </div>
         );
diff --git a/components/LinkCard.tsx b/components/LinkCard.tsx
index 1f5dcd4..132392f 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-sky-800 from-10% to-gray-50 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-sky-400 inline-flex rounded-md cursor-pointer hover:bg-slate-200 absolute right-5 top-5 z-10 duration-100 p-1"
         >
           <FontAwesomeIcon
             icon={faEllipsis}
@@ -156,8 +156,8 @@ 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-sky-500 dark:text-sky-200 font-bold">{count + 1}.</p>
+              <p className="text-lg text-sky-700 dark:text-sky-200 font-bold truncate capitalize w-full pr-8">
                 {link.name || link.description}
               </p>
             </div>
@@ -168,16 +168,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-sky-900 dark:text-sky-300 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-sky-500">
               <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-sky-500">
               <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..397037f 100644
--- a/components/Modal/Collection/CollectionInfo.tsx
+++ b/components/Modal/Collection/CollectionInfo.tsx
@@ -60,7 +60,7 @@ 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-sky-700 dark:text-sky-400 mb-2">
             Name
             <RequiredBadge />
           </p>
@@ -72,11 +72,11 @@ export default function CollectionInfo({
               }
               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"
+              className="w-full rounded-md p-3 border-sky-100 dark:border-sky-800 dark:bg-blue-950 border-solid border outline-none focus:border-sky-700 duration-100"
             />
             <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-sky-700 dark:text-sky-400 mb-2">Icon Color</p>
                 <div style={{ color: collection.color }}>
                   <FontAwesomeIcon
                     icon={faFolder}
@@ -84,7 +84,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-sky-700 dark:text-sky-400 hover:bg-slate-200 duration-100"
                   onClick={() =>
                     setCollection({ ...collection, color: "#0ea5e9" })
                   }
@@ -101,9 +101,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-sky-700 dark:text-sky-400 mb-2">Description</p>
           <textarea
-            className="w-full h-[11.4rem] resize-none border rounded-md duration-100 bg-white 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-blue-950 p-3 outline-none border-sky-100 dark:border-sky-800 focus:border-sky-700"
             placeholder="The purpose of this Collection..."
             value={collection.description}
             onChange={(e) =>
diff --git a/components/Modal/Collection/index.tsx b/components/Modal/Collection/index.tsx
index c246e9b..655d1c2 100644
--- a/components/Modal/Collection/index.tsx
+++ b/components/Modal/Collection/index.tsx
@@ -46,9 +46,9 @@ 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-sky-700 dark:text-sky-400 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-sky-700 dark:text-sky-400">
           {method === "UPDATE" && (
             <>
               {isOwner && (
diff --git a/components/Modal/Link/AddOrEditLink.tsx b/components/Modal/Link/AddOrEditLink.tsx
index e072abd..b839e35 100644
--- a/components/Modal/Link/AddOrEditLink.tsx
+++ b/components/Modal/Link/AddOrEditLink.tsx
@@ -126,7 +126,7 @@ export default function AddOrEditLink({
 
       {method === "CREATE" ? (
         <div>
-          <p className="text-sm text-sky-700 mb-2 font-bold">
+          <p className="text-sm text-sky-700 dark:text-sky-400 mb-2 font-bold">
             Address (URL)
             <RequiredBadge />
           </p>
@@ -135,14 +135,14 @@ export default function AddOrEditLink({
             onChange={(e) => setLink({ ...link, url: e.target.value })}
             type="text"
             placeholder="e.g. http://example.com/"
-            className="w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
+            className="w-full rounded-md p-2 border-sky-100 dark:border-sky-800 dark:bg-blue-950 border-solid border outline-none focus:border-sky-700 duration-100"
           />
         </div>
       ) : null}
-      <hr />
+      <hr className="dark:border-sky-800" />
       <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-sky-700 dark:text-sky-400 mb-2">Collection</p>
           <CollectionSelection
             onChange={setCollection}
             // defaultValue={{
@@ -161,7 +161,7 @@ export default function AddOrEditLink({
         </div>
 
         <div>
-          <p className="text-sm text-sky-700 mb-2">Tags</p>
+          <p className="text-sm text-sky-700 dark:text-sky-400 mb-2">Tags</p>
           <TagSelection
             onChange={setTags}
             defaultValue={link.tags.map((e) => {
@@ -171,18 +171,18 @@ export default function AddOrEditLink({
         </div>
 
         <div className="sm:col-span-2">
-          <p className="text-sm text-sky-700 mb-2">Name</p>
+          <p className="text-sm text-sky-700 dark:text-sky-400 mb-2">Name</p>
           <input
             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"
+            className="w-full rounded-md p-2 border-sky-100 dark:border-sky-800 dark:bg-blue-950 border-solid border outline-none focus:border-sky-700 duration-100"
           />
         </div>
 
         <div className="sm:col-span-2">
-          <p className="text-sm text-sky-700 mb-2">Description</p>
+          <p className="text-sm text-sky-700 dark:text-sky-400 mb-2">Description</p>
           <textarea
             value={link.description}
             onChange={(e) => setLink({ ...link, description: e.target.value })}
@@ -191,7 +191,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-sky-800 border-solid border outline-none focus:border-sky-700 duration-100 dark:bg-blue-950"
           />
         </div>
       </div>
diff --git a/components/Modal/Link/index.tsx b/components/Modal/Link/index.tsx
index 5c7361e..8701e75 100644
--- a/components/Modal/Link/index.tsx
+++ b/components/Modal/Link/index.tsx
@@ -33,10 +33,10 @@ 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-sky-700 dark:text-sky-300 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-sky-700 dark:text-sky-300 ${
             isOwnerOrMod ? "" : "pb-8"
           }`}
         >
diff --git a/components/Modal/index.tsx b/components/Modal/index.tsx
index b2f2e8b..835370f 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-sky-800 rounded-2xl border-solid border shadow-lg p-5 bg-white dark:bg-blue-950">
           <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-sky-800 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..13210f2 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -9,6 +9,7 @@ import { useRouter } from "next/router";
 import Search from "@/components/Search";
 import useAccountStore from "@/store/account";
 import ProfilePhoto from "@/components/ProfilePhoto";
+import ToggleDarkMode from "@/components/ToggleDarkMode";
 import useModalStore from "@/store/modals";
 
 export default function Navbar() {
@@ -33,7 +34,7 @@ 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-sky-800 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"
@@ -50,7 +51,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 text-sky-700 sm:text-white sm:bg-sky-700 sm:dark:bg-sky-400 sm:hover:bg-sky-600 duration-100 group"
         >
           <FontAwesomeIcon
             icon={faPlus}
@@ -60,16 +61,16 @@ export default function Navbar() {
             New Link
           </span>
         </div>
-
+        <ToggleDarkMode />
         <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-slate-800 sm:hover:p-1 sm:hover:pr-2 duration-100 h-10 rounded-full items-center w-fit bg-white dark:bg-blue-950 cursor-pointer"
             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] dark:border-blue-800"
             />
             <p
               id="profile-dropdown"
diff --git a/components/NoLinksFound.tsx b/components/NoLinksFound.tsx
index e08f23c..6aa9e93 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-sky-800 w-full p-10 rounded-2xl">
+      <p className="text-center text-3xl text-sky-700 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-sky-900 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..e7c4aa2 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-500 dark:bg-sky-300 text-white h-10 w-10 aspect-square shadow rounded-full border border-slate-200 flex items-center justify-center ${className}`}
     >
       <FontAwesomeIcon icon={faUser} className="w-1/2 h-1/2 aspect-square" />
     </div>
diff --git a/components/RadioButton.tsx b/components/RadioButton.tsx
index 6785045..699b7a2 100644
--- a/components/RadioButton.tsx
+++ b/components/RadioButton.tsx
@@ -20,13 +20,13 @@ 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-700 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-700 dark:text-sky-300 peer-checked:hidden block"
       />
-      <span className="text-sky-900 rounded select-none">{label}</span>
+      <span className="text-sky-900 dark:text-sky-300 rounded select-none">{label}</span>
     </label>
   );
 }
diff --git a/components/RequiredBadge.tsx b/components/RequiredBadge.tsx
index 71e60af..b51fbc6 100644
--- a/components/RequiredBadge.tsx
+++ b/components/RequiredBadge.tsx
@@ -1,6 +1,6 @@
 export default function RequiredBadge() {
   return (
-    <span title="Required Field" className="text-sky-700 cursor-help">
+    <span title="Required Field" className="text-sky-700 dark:text-sky-400 cursor-help">
       {" "}
       *
     </span>
diff --git a/components/Search.tsx b/components/Search.tsx
index 4439c0d..834670d 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 group-hover:text-sky-700"
       >
         <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-sky-800 rounded-md pl-10 py-2 pr-2 w-44 sm:w-60 focus:border-sky-700 md:focus:w-80 hover:border-sky-700 duration-100 outline-none dark:bg-sky-950"
       />
     </div>
   );
diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
index b04d728..5f7e318 100644
--- a/components/Sidebar.tsx
+++ b/components/Sidebar.tsx
@@ -51,37 +51,37 @@ 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-blue-925 h-full w-64 xl:w-80 overflow-y-auto border-solid border dark:border-blue-950 border-r-sky-100 dark:border-r-sky-800 px-2 z-20 ${className}`}
     >
       <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-sky-800 bg-gray-100 dark:bg-blue-925"
           } 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-100`}
           />
-          <p className="text-sky-700 text-xs font-semibold">Dashboard</p>
+          <p className="text-sky-700 dark:text-sky-200 text-xs font-semibold">Dashboard</p>
         </Link>
 
         <Link
           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-sky-800 bg-gray-100 dark:bg-blue-925"
           } 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-100`}
           />
-          <p className="text-sky-700 text-xs font-semibold">
+          <p className="text-sky-700 dark:text-sky-200 text-xs font-semibold">
             <span className="hidden xl:inline-block">All</span> Links
           </p>
         </Link>
@@ -89,14 +89,14 @@ export default function Sidebar({ className }: { className?: string }) {
         <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-sky-800"
           } outline-sky-100 outline-1 duration-100  py-1 px-2 rounded-md cursor-pointer flex justify-center flex-col items-center gap-1 w-full`}
         >
           <FontAwesomeIcon
             icon={faFolder}
-            className={`w-8 h-8 drop-shadow text-sky-500`}
+            className={`w-8 h-8 drop-shadow text-sky-500 dark:text-sky-100`}
           />
-          <p className="text-sky-700 text-xs font-semibold">
+          <p className="text-sky-700 dark:text-sky-200 text-xs font-semibold">
             <span className="hidden xl:inline-block">All</span> Collections
           </p>
         </Link>
@@ -107,7 +107,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-sky-500 mt-5"
         >
           <p>Collections</p>
 
@@ -136,8 +136,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-sky-800 bg-gray100 dark:bg-blue-925"
                         } duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
                       >
                         <FontAwesomeIcon
@@ -146,7 +146,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-sky-700 dark:text-sky-200 truncate w-full pr-7">
                           {e.name}
                         </p>
                       </div>
@@ -157,7 +157,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-sky-500 text-xs font-semibold truncate w-full pr-7">
                   You Have No Collections...
                 </p>
               </div>
@@ -170,7 +170,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-sky-500 mt-5"
         >
           <p>Tags</p>
           <FontAwesomeIcon
@@ -197,7 +197,7 @@ export default function Sidebar({ className }: { className?: string }) {
                         className={`${
                           active === `/tags/${e.id}`
                             ? "bg-sky-200"
-                            : "hover:bg-slate-200 bg-gray-100"
+                            : "hover:bg-slate-200 hover:dark:bg-sky-800 bg-gray-100 dark:bg-blue-925"
                         } duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
                       >
                         <FontAwesomeIcon
@@ -205,7 +205,7 @@ export default function Sidebar({ className }: { className?: string }) {
                           className="w-4 h-4 text-sky-500 mt-1"
                         />
 
-                        <p className="text-sky-700 truncate w-full pr-7">
+                        <p className="text-sky-700 dark:text-sky-300 truncate w-full pr-7">
                           {e.name}
                         </p>
                       </div>
@@ -216,7 +216,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-sky-500 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..d44bdaa 100644
--- a/components/SortDropdown.tsx
+++ b/components/SortDropdown.tsx
@@ -21,9 +21,9 @@ 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-sky-800 shadow-md bg-gray-50 dark:bg-blue-925 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-sky-900 dark:text-sky-200 text-center font-semibold">Sort by</p>
       <div className="flex flex-col gap-2">
         <RadioButton
           label="Date (Newest First)"
diff --git a/components/SubmitButton.tsx b/components/SubmitButton.tsx
index 93d85c8..3927906 100644
--- a/components/SubmitButton.tsx
+++ b/components/SubmitButton.tsx
@@ -21,7 +21,7 @@ export default function SubmitButton({
       className={`text-white flex items-center gap-2 py-2 px-5 rounded-md text-lg tracking-wide select-none font-semibold duration-100 w-fit ${
         loading
           ? "bg-sky-600 cursor-auto"
-          : "bg-sky-700 hover:bg-sky-600 cursor-pointer"
+          : "bg-sky-700 dark:bg-sky-400 hover:bg-sky-600 hover:dark:bg-sky-300 cursor-pointer"
       } ${className}`}
       onClick={() => {
         if (!loading) onClick();
diff --git a/components/ToggleDarkMode.tsx b/components/ToggleDarkMode.tsx
new file mode 100644
index 0000000..9272d46
--- /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 group sm:hover:bg-slate-200 sm:hover:dark:bg-slate-800 sm:hover:p-1 sm:hover:pr-2 duration-100 h-10 rounded-full items-center w-fit 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 sm:group-hover:w-8 sm:group-hover:h-8 duration-100 border-[3px] border-slate-200 dark:border-blue-900">
+        <FontAwesomeIcon
+          icon={theme === "dark" ? faSun : faMoon}
+          className="w-1/2 h-1/2"
+        />
+      </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..79cc707 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -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,
@@ -43,7 +44,9 @@ export default function App({
         toastOptions={{ className: "border border-sky-100" }}
       />
       <AuthRedirect>
-        <Component {...pageProps} />
+        <ThemeProvider attribute="class">
+          <Component {...pageProps} />
+        </ThemeProvider>
       </AuthRedirect>
     </SessionProvider>
   );
diff --git a/pages/collections/[id].tsx b/pages/collections/[id].tsx
index 097e4f1..cccc2cb 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-sky-800 from-10% via-gray-100 via-20% 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-sky-700 dark:text-sky-300 font-bold w-full py-1 break-words hyphens-auto">
                     {activeCollection?.name}
                   </p>
                 </div>
@@ -116,7 +116,7 @@ export default function Index() {
             ) : null}
           </div>
 
-          <div className="text-gray-600 flex justify-between items-end gap-5">
+          <div className="text-gray-600 dark:text-sky-400 flex justify-between items-end gap-5">
             <p>{activeCollection?.description}</p>
             <div className="flex items-center gap-2">
               <div className="relative">
@@ -128,7 +128,7 @@ export default function Index() {
                   <FontAwesomeIcon
                     icon={faSort}
                     id="sort-dropdown"
-                    className="w-5 h-5 text-gray-500"
+                    className="w-5 h-5 text-gray-500 dark:text-sky-400"
                   />
                 </div>
 
@@ -150,7 +150,7 @@ export default function Index() {
                     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-sky-400"
                   />
                 </div>
                 {expandDropdown ? (
diff --git a/pages/collections/index.tsx b/pages/collections/index.tsx
index 2ac4b64..405f71a 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-sky-700 dark:text-sky-400 font-bold">
                 All Collections
               </p>
             </div>
@@ -52,7 +52,7 @@ export default function Collections() {
                 <FontAwesomeIcon
                   icon={faEllipsis}
                   id="expand-dropdown"
-                  className="w-5 h-5 text-gray-500"
+                  className="w-5 h-5 text-gray-500 dark:text-sky-500"
                 />
               </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-sky-800 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-sky-500"
               />
             </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-sky-800 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"
             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-sky-900 dark:text-sky-400 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/dashboard.tsx b/pages/dashboard.tsx
index ac5f862..200446d 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-sky-700 dark:text-sky-400 font-bold">
               Dashboard
             </p>
           </div>
@@ -95,24 +95,24 @@ 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-700 dark:text-sky-300">{numberOfLinks}</p>
+            <p className="text-sky-900 dark:text-sky-500 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-700 dark:text-sky-300">
               {collections.length}
             </p>
-            <p className="text-sky-900 text-xl">
+            <p className="text-sky-900 dark:text-sky-500 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-700 dark:text-sky-300">{tags.length}</p>
+            <p className="text-sky-900 dark:text-sky-500 text-xl">
               {tags.length === 1 ? "Tag" : "Tags"}
             </p>
           </div>
@@ -163,11 +163,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-sky-800 w-full mx-auto md:w-2/3 p-10 rounded-2xl">
+              <p className="text-center text-2xl text-sky-700 dark:text-sky-300">
                 No Pinned Links
               </p>
-              <p className="text-center text-sky-900 text-sm">
+              <p className="text-center text-sky-900 dark:text-sky-500 text-sm">
                 You can Pin Links by clicking on the three dots on each Link and
                 clicking &quot;Pin to Dashboard.&quot;
               </p>
diff --git a/pages/links.tsx b/pages/links.tsx
index 958eb2b..11e23f7 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-sky-700 dark:text-sky-300 font-bold">
               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-sky-800 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/styles/globals.css b/styles/globals.css
index dfbbd41..82ba220 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -159,3 +159,11 @@
   width: 100%;
   height: 4rem;
 }
+
+/* Theme */
+
+@layer base {
+  body {
+    @apply dark:bg-blue-950 bg-white dark:text-white
+  }
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index eb74f32..fc69059 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}",
@@ -10,7 +11,13 @@ module.exports = {
     "./layouts/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        blue: {
+          925: "rgb(26, 47, 96)",
+        },
+      },
+    },
   },
   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"