diff --git a/components/Checkbox.tsx b/components/Checkbox.tsx
index e4e5de15..6c661c57 100644
--- a/components/Checkbox.tsx
+++ b/components/Checkbox.tsx
@@ -20,11 +20,11 @@ export default function Checkbox({ label, state, className, onClick }: Props) {
       />
       <FontAwesomeIcon
         icon={faSquareCheck}
-        className="w-5 h-5 text-sky-500 dark:text-sky-300 peer-checked:block hidden"
+        className="w-5 h-5 text-sky-500 dark:text-sky-500 peer-checked:block hidden"
       />
       <FontAwesomeIcon
         icon={faSquare}
-        className="w-5 h-5 text-sky-500 dark:text-sky-300 peer-checked:hidden block"
+        className="w-5 h-5 text-sky-500 dark:text-sky-500 peer-checked:hidden block"
       />
       <span className="text-black dark:text-white rounded select-none">
         {label}
diff --git a/components/Modal/Collection/DeleteCollection.tsx b/components/Modal/Collection/DeleteCollection.tsx
index e4ba0063..58941d7d 100644
--- a/components/Modal/Collection/DeleteCollection.tsx
+++ b/components/Modal/Collection/DeleteCollection.tsx
@@ -99,7 +99,7 @@ export default function DeleteCollection({
         </>
       ) : (
         <p className="text-black dark:text-white">
-          Click the button below to leave the current collection:
+          Click the button below to leave the current collection.
         </p>
       )}
 
diff --git a/components/Modal/Collection/index.tsx b/components/Modal/Collection/index.tsx
index e1e40eeb..747a7420 100644
--- a/components/Modal/Collection/index.tsx
+++ b/components/Modal/Collection/index.tsx
@@ -57,7 +57,7 @@ export default function CollectionModal({
                 <Tab
                   className={({ selected }) =>
                     selected
-                      ? "px-2 py-1 bg-sky-200 dark:bg-sky-500 dark:text-white duration-100 rounded-md outline-none"
+                      ? "px-2 py-1 bg-sky-200 dark:bg-sky-800 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"
                   }
                 >
@@ -67,7 +67,7 @@ export default function CollectionModal({
               <Tab
                 className={({ selected }) =>
                   selected
-                    ? "px-2 py-1 bg-sky-200 dark:bg-sky-500 dark:text-white duration-100 rounded-md outline-none"
+                    ? "px-2 py-1 bg-sky-200 dark:bg-sky-800 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"
                 }
               >
@@ -76,7 +76,7 @@ export default function CollectionModal({
               <Tab
                 className={({ selected }) =>
                   selected
-                    ? "px-2 py-1 bg-sky-200 dark:bg-sky-500 dark:text-white duration-100 rounded-md outline-none"
+                    ? "px-2 py-1 bg-sky-200 dark:bg-sky-800 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"
                 }
               >
diff --git a/components/Modal/Link/LinkDetails.tsx b/components/Modal/Link/LinkDetails.tsx
index 6dd11bb4..87ab06f8 100644
--- a/components/Modal/Link/LinkDetails.tsx
+++ b/components/Modal/Link/LinkDetails.tsx
@@ -247,7 +247,7 @@ export default function LinkDetails({ link, isOwnerOrMod }: Props) {
             >
               <FontAwesomeIcon
                 icon={faArrowUpRightFromSquare}
-                className="w-5 h-5 text-sky-500 dark:text-sky-300"
+                className="w-5 h-5 text-sky-500 dark:text-sky-500"
               />
             </Link>
 
@@ -257,7 +257,7 @@ export default function LinkDetails({ link, isOwnerOrMod }: Props) {
             >
               <FontAwesomeIcon
                 icon={faCloudArrowDown}
-                className="w-5 h-5 cursor-pointer text-sky-500 dark:text-sky-300"
+                className="w-5 h-5 cursor-pointer text-sky-500 dark:text-sky-500"
               />
             </div>
           </div>
@@ -281,7 +281,7 @@ export default function LinkDetails({ link, isOwnerOrMod }: Props) {
             >
               <FontAwesomeIcon
                 icon={faArrowUpRightFromSquare}
-                className="w-5 h-5 text-sky-500 dark:text-sky-300"
+                className="w-5 h-5 text-sky-500 dark:text-sky-500"
               />
             </Link>
 
@@ -291,7 +291,7 @@ export default function LinkDetails({ link, isOwnerOrMod }: Props) {
             >
               <FontAwesomeIcon
                 icon={faCloudArrowDown}
-                className="w-5 h-5 cursor-pointer text-sky-500 dark:text-sky-300"
+                className="w-5 h-5 cursor-pointer text-sky-500 dark:text-sky-500"
               />
             </div>
           </div>
diff --git a/components/Modal/Link/index.tsx b/components/Modal/Link/index.tsx
index 36282e59..3f9f2437 100644
--- a/components/Modal/Link/index.tsx
+++ b/components/Modal/Link/index.tsx
@@ -43,7 +43,7 @@ export default function LinkModal({
               <Tab
                 className={({ selected }) =>
                   selected
-                    ? "px-2 py-1 bg-sky-200 dark:bg-sky-600 duration-100 rounded-md outline-none"
+                    ? "px-2 py-1 bg-sky-200 dark:bg-sky-800 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"
                 }
               >
@@ -52,7 +52,7 @@ export default function LinkModal({
               <Tab
                 className={({ selected }) =>
                   selected
-                    ? "px-2 py-1 bg-sky-200 dark:bg-sky-600 duration-100 rounded-md outline-none"
+                    ? "px-2 py-1 bg-sky-200 dark:bg-sky-800 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"
                 }
               >
diff --git a/components/Modal/User/index.tsx b/components/Modal/User/index.tsx
index dacadfb5..d898ab5a 100644
--- a/components/Modal/User/index.tsx
+++ b/components/Modal/User/index.tsx
@@ -31,7 +31,7 @@ export default function UserModal({
           <Tab
             className={({ selected }) =>
               selected
-                ? "px-2 py-1 bg-sky-200 dark:bg-sky-500 dark:text-white  duration-100 rounded-md outline-none"
+                ? "px-2 py-1 bg-sky-200 dark:bg-sky-800 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"
             }
           >
@@ -41,7 +41,7 @@ export default function UserModal({
           <Tab
             className={({ selected }) =>
               selected
-                ? "px-2 py-1 bg-sky-200 dark:bg-sky-500 dark:text-white duration-100 rounded-md outline-none"
+                ? "px-2 py-1 bg-sky-200 dark:bg-sky-800 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"
             }
           >
@@ -51,7 +51,7 @@ export default function UserModal({
           <Tab
             className={({ selected }) =>
               selected
-                ? "px-2 py-1 bg-sky-200 dark:bg-sky-500 dark:text-white duration-100 rounded-md outline-none"
+                ? "px-2 py-1 bg-sky-200 dark:bg-sky-800 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"
             }
           >
@@ -62,7 +62,7 @@ export default function UserModal({
             <Tab
               className={({ selected }) =>
                 selected
-                  ? "px-2 py-1 bg-sky-200 dark:bg-sky-500 duration-100 rounded-md outline-none"
+                  ? "px-2 py-1 bg-sky-200 dark:bg-sky-800 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"
               }
             >
diff --git a/components/RadioButton.tsx b/components/RadioButton.tsx
index fb217d9a..5775e313 100644
--- a/components/RadioButton.tsx
+++ b/components/RadioButton.tsx
@@ -20,11 +20,11 @@ export default function RadioButton({ label, state, onClick }: Props) {
       />
       <FontAwesomeIcon
         icon={faCircleCheck}
-        className="w-5 h-5 text-sky-500 dark:text-sky-300 peer-checked:block hidden"
+        className="w-5 h-5 text-sky-500 dark:text-sky-500 peer-checked:block hidden"
       />
       <FontAwesomeIcon
         icon={faCircle}
-        className="w-5 h-5 text-sky-500 dark:text-sky-300 peer-checked:hidden block"
+        className="w-5 h-5 text-sky-500 dark:text-sky-500 peer-checked:hidden block"
       />
       <span className="text-black dark:text-white rounded select-none">
         {label}
diff --git a/components/Search.tsx b/components/Search.tsx
index 4034a7c4..fe61ef49 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 dark:text-sky-300"
+        className="inline-flex w-fit absolute left-2 pointer-events-none rounded-md p-1 text-sky-500 dark:text-sky-500"
       >
         <FontAwesomeIcon icon={faMagnifyingGlass} className="w-5 h-5" />
       </label>
diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
index 90a98423..d121ae26 100644
--- a/components/Sidebar.tsx
+++ b/components/Sidebar.tsx
@@ -58,13 +58,13 @@ export default function Sidebar({ className }: { className?: string }) {
           href="/dashboard"
           className={`${
             active === "/dashboard"
-              ? "bg-sky-200 dark:bg-sky-600"
+              ? "bg-sky-200 dark:bg-sky-800"
               : "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 dark:text-sky-300`}
+            className={`w-8 h-8 drop-shadow text-sky-500 dark:text-sky-500`}
           />
 
           <p className="text-black dark:text-white text-xs xl:text-sm font-semibold">
@@ -76,13 +76,13 @@ export default function Sidebar({ className }: { className?: string }) {
           href="/links"
           className={`${
             active === "/links"
-              ? "bg-sky-200 dark:bg-sky-600"
+              ? "bg-sky-200 dark:bg-sky-800"
               : "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 dark:text-sky-300`}
+            className={`w-8 h-8 drop-shadow text-sky-500 dark:text-sky-500`}
           />
 
           <p className="text-black dark:text-white text-xs xl:text-sm font-semibold">
@@ -94,13 +94,13 @@ export default function Sidebar({ className }: { className?: string }) {
           href="/collections"
           className={`${
             active === "/collections"
-              ? "bg-sky-200 dark:bg-sky-600"
+              ? "bg-sky-200 dark:bg-sky-800"
               : "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 dark:text-sky-300`}
+            className={`w-8 h-8 drop-shadow text-sky-500 dark:text-sky-500`}
           />
 
           <p className="text-black dark:text-white text-xs xl:text-sm font-semibold">
@@ -143,7 +143,7 @@ export default function Sidebar({ className }: { className?: string }) {
                       <div
                         className={`${
                           active === `/collections/${e.id}`
-                            ? "bg-sky-200 dark:bg-sky-700 "
+                            ? "bg-sky-200 dark:bg-sky-800"
                             : "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`}
                       >
@@ -203,13 +203,13 @@ export default function Sidebar({ className }: { className?: string }) {
                       <div
                         className={`${
                           active === `/tags/${e.id}`
-                            ? "bg-sky-200 dark:bg-sky-700"
+                            ? "bg-sky-200 dark:bg-sky-800"
                             : "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 dark:text-sky-300 mt-1"
+                          className="w-4 h-4 text-sky-500 dark:text-sky-500 mt-1"
                         />
 
                         <p className="text-black dark:text-white truncate w-full pr-7">
diff --git a/pages/collections/index.tsx b/pages/collections/index.tsx
index 2d7a0d3f..73ed25f7 100644
--- a/pages/collections/index.tsx
+++ b/pages/collections/index.tsx
@@ -37,7 +37,7 @@ 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 dark:text-sky-300 drop-shadow"
+                className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500 dark:text-sky-500 drop-shadow"
               />
               <p className="sm:text-4xl text-3xl capitalize text-black dark:text-white">
                 All Collections
@@ -125,7 +125,7 @@ export default function Collections() {
             </p>
             <FontAwesomeIcon
               icon={faPlus}
-              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"
+              className="w-8 h-8 text-sky-500 dark:text-sky-500 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 63c4e4a9..579a15b8 100644
--- a/pages/dashboard.tsx
+++ b/pages/dashboard.tsx
@@ -52,7 +52,7 @@ 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 dark:text-sky-300 drop-shadow"
+              className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500 dark:text-sky-500 drop-shadow"
             />
             <p className="sm:text-4xl text-3xl text-black dark:text-white">
               Dashboard
@@ -62,7 +62,7 @@ export default function Dashboard() {
 
         <div className="flex flex-col md:flex-row md:items-center gap-5">
           <div className="flex flex-col justify-center items-center gap-2 md:w-full rounded-2xl p-10 border border-sky-100 dark:border-neutral-700 bg-gray-50 dark:bg-neutral-800">
-            <p className="font-bold text-6xl text-sky-500 dark:text-sky-300">
+            <p className="font-bold text-6xl text-sky-500 dark:text-sky-500">
               {numberOfLinks}
             </p>
             <p className="text-black dark:text-white text-xl">
@@ -71,7 +71,7 @@ export default function Dashboard() {
           </div>
 
           <div className="flex flex-col justify-center items-center gap-2 md:w-full rounded-2xl p-10 border border-sky-100 dark:border-neutral-700 bg-gray-50 dark:bg-neutral-800">
-            <p className="font-bold text-6xl text-sky-500 dark:text-sky-300">
+            <p className="font-bold text-6xl text-sky-500 dark:text-sky-500">
               {collections.length}
             </p>
             <p className="text-black dark:text-white text-xl">
@@ -80,7 +80,7 @@ export default function Dashboard() {
           </div>
 
           <div className="flex flex-col justify-center items-center gap-2 md:w-full rounded-2xl p-10 border border-sky-100 dark:border-neutral-700 bg-gray-50 dark:bg-neutral-800">
-            <p className="font-bold text-6xl text-sky-500 dark:text-sky-300">
+            <p className="font-bold text-6xl text-sky-500 dark:text-sky-500">
               {tags.length}
             </p>
             <p className="text-black dark:text-white text-xl">
@@ -93,7 +93,7 @@ export default function Dashboard() {
           <div className="flex gap-2 items-center">
             <FontAwesomeIcon
               icon={faThumbTack}
-              className="w-5 h-5 text-sky-500 dark:text-sky-300 drop-shadow"
+              className="w-5 h-5 text-sky-500 dark:text-sky-500 drop-shadow"
             />
             <p className="text-2xl text-black dark:text-white">Pinned Links</p>
           </div>
diff --git a/pages/links.tsx b/pages/links.tsx
index 91dcef6a..4429079d 100644
--- a/pages/links.tsx
+++ b/pages/links.tsx
@@ -24,7 +24,7 @@ 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 dark:text-sky-300 drop-shadow"
+              className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500 dark:text-sky-500 drop-shadow"
             />
             <p className="sm:text-4xl text-3xl capitalize text-black dark:text-white">
               All Links
diff --git a/pages/search/[query].tsx b/pages/search/[query].tsx
index 064f8e3e..0ed78b25 100644
--- a/pages/search/[query].tsx
+++ b/pages/search/[query].tsx
@@ -40,7 +40,7 @@ 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 dark:text-sky-300 drop-shadow"
+                className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500 dark:text-sky-500 drop-shadow"
               />
               <p className="sm:text-4xl text-3xl capitalize text-black dark:text-white">
                 Search Results
diff --git a/pages/tags/[id].tsx b/pages/tags/[id].tsx
index b6be1454..97a92282 100644
--- a/pages/tags/[id].tsx
+++ b/pages/tags/[id].tsx
@@ -36,7 +36,7 @@ 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 dark:text-sky-300"
+                className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500 dark:text-sky-500"
               />
               <p className="sm:text-4xl text-3xl capitalize text-black dark:text-white">
                 {activeTag?.name}