From 8eff4d23a7704ad1bf15ed6b5ba8fce720287d21 Mon Sep 17 00:00:00 2001
From: Daniel <daniel31x13@gmail.com>
Date: Sat, 22 Jul 2023 17:49:09 -0400
Subject: [PATCH] improved contrast ratio

---
 components/Checkbox.tsx                       |  6 ++---
 components/CollectionCard.tsx                 | 10 +++----
 components/LinkCard.tsx                       |  4 +--
 .../Modal/Collection/CollectionInfo.tsx       | 12 ++++-----
 .../Modal/Collection/DeleteCollection.tsx     |  4 +--
 .../Modal/Collection/TeamManagement.tsx       | 24 ++++++++---------
 components/Modal/Collection/index.tsx         |  4 +--
 components/Modal/Link/AddOrEditLink.tsx       | 16 ++++++------
 components/Modal/Link/LinkDetails.tsx         | 14 +++++-----
 components/Modal/Link/index.tsx               |  4 +--
 components/Modal/User/ChangePassword.tsx      |  8 +++---
 components/Modal/User/PrivacySettings.tsx     |  6 ++---
 components/Modal/User/ProfileSettings.tsx     | 20 +++++++-------
 components/Modal/User/index.tsx               |  2 +-
 components/Navbar.tsx                         |  6 ++---
 components/NoLinksFound.tsx                   |  4 +--
 components/PublicPage/LinkCard.tsx            |  6 ++---
 components/RadioButton.tsx                    |  4 +--
 components/RequiredBadge.tsx                  |  2 +-
 components/Search.tsx                         |  4 +--
 components/Sidebar.tsx                        | 10 +++----
 components/SubmitButton.tsx                   |  4 +--
 pages/choose-username.tsx                     |  6 ++---
 pages/collections/[id].tsx                    | 10 +++----
 pages/collections/index.tsx                   |  2 +-
 pages/dashboard.tsx                           | 22 ++++++++--------
 pages/forgot.tsx                              |  8 +++---
 pages/links.tsx                               |  2 +-
 pages/login.tsx                               | 14 +++++-----
 pages/public/collections/[id].tsx             |  4 +--
 pages/register.tsx                            | 26 +++++++++----------
 pages/search/[query].tsx                      |  4 +--
 pages/subscribe.tsx                           |  2 +-
 pages/tags/[id].tsx                           |  2 +-
 34 files changed, 138 insertions(+), 138 deletions(-)

diff --git a/components/Checkbox.tsx b/components/Checkbox.tsx
index b9a7321c..2e95895d 100644
--- a/components/Checkbox.tsx
+++ b/components/Checkbox.tsx
@@ -12,7 +12,7 @@ type Props = {
 export default function Checkbox({ label, state, className, onClick }: Props) {
   return (
     <label
-      className={`cursor-pointer flex items-center gap-2 text-sky-500 ${className}`}
+      className={`cursor-pointer flex items-center gap-2 text-sky-700 ${className}`}
     >
       <input
         type="checkbox"
@@ -22,11 +22,11 @@ export default function Checkbox({ label, state, className, onClick }: Props) {
       />
       <FontAwesomeIcon
         icon={faSquareCheck}
-        className="w-5 h-5 text-sky-500 peer-checked:block hidden"
+        className="w-5 h-5 text-sky-700 peer-checked:block hidden"
       />
       <FontAwesomeIcon
         icon={faSquare}
-        className="w-5 h-5 text-sky-500 peer-checked:hidden block"
+        className="w-5 h-5 text-sky-700 peer-checked:hidden block"
       />
       <span className="text-sky-900 rounded select-none">{label}</span>
     </label>
diff --git a/components/CollectionCard.tsx b/components/CollectionCard.tsx
index 66624683..9805f9c1 100644
--- a/components/CollectionCard.tsx
+++ b/components/CollectionCard.tsx
@@ -49,11 +49,11 @@ export default function CollectionCard({ collection, className }: Props) {
         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-500 break-words line-clamp-3 w-4/5">
+        <p className="text-2xl font-bold capitalize text-sky-700 break-words line-clamp-3 w-4/5">
           {collection.name}
         </p>
         <div className="flex justify-between items-center">
-          <div className="text-sky-400 flex items-center w-full">
+          <div className="flex items-center w-full">
             {collection.members
               .sort((a, b) => (a.userId as number) - (b.userId as number))
               .map((e, i) => {
@@ -67,14 +67,14 @@ export default function CollectionCard({ collection, className }: Props) {
               })
               .slice(0, 4)}
             {collection.members.length - 4 > 0 ? (
-              <div className="h-10 w-10 text-white flex items-center justify-center rounded-full border-[3px] bg-sky-500 border-sky-100 -mr-3">
+              <div className="h-10 w-10 text-white flex items-center justify-center rounded-full border-[3px] bg-sky-700 border-sky-100 -mr-3">
                 +{collection.members.length - 4}
               </div>
             ) : null}
           </div>
           <div className="text-right w-40">
-            <div className="text-sky-500 font-bold text-sm flex justify-end gap-1 items-center">
-              <FontAwesomeIcon icon={faLink} className="w-5 h-5 text-sky-600" />
+            <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" />
               {collection._count && collection._count.links}
             </div>
             <div className="flex items-center justify-end gap-1 text-gray-600">
diff --git a/components/LinkCard.tsx b/components/LinkCard.tsx
index 4f286c93..873966ff 100644
--- a/components/LinkCard.tsx
+++ b/components/LinkCard.tsx
@@ -142,8 +142,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-400 font-bold">{count + 1}.</p>
-              <p className="text-lg text-sky-500 font-bold truncate capitalize w-full pr-8">
+              <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">
                 {link.name}
               </p>
             </div>
diff --git a/components/Modal/Collection/CollectionInfo.tsx b/components/Modal/Collection/CollectionInfo.tsx
index 3e88c2d1..94c711a7 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-500 mb-2">
+          <p className="text-sm text-sky-700 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-500 duration-100"
+              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-500 mb-2">Icon Color</p>
+                <p className="text-sm w-full text-sky-700 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-500 hover:bg-slate-200 duration-100"
+                  className="py-1 px-2 rounded-md text-xs font-semibold cursor-pointer text-sky-700 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-500 mb-2">Description</p>
+          <p className="text-sm text-sky-700 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-500"
+            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"
             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 e4435cd3..2295abc3 100644
--- a/components/Modal/Collection/DeleteCollection.tsx
+++ b/components/Modal/Collection/DeleteCollection.tsx
@@ -83,7 +83,7 @@ export default function DeleteCollection({
           <div className="flex flex-col gap-3">
             <p className="text-sky-900 select-none text-center">
               To confirm, type &quot;
-              <span className="font-bold text-sky-500">{collection.name}</span>
+              <span className="font-bold text-sky-700">{collection.name}</span>
               &quot; in the box below:
             </p>
 
@@ -93,7 +93,7 @@ export default function DeleteCollection({
               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-500 duration-100"
+              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"
             />
           </div>
         </>
diff --git a/components/Modal/Collection/TeamManagement.tsx b/components/Modal/Collection/TeamManagement.tsx
index f8190e06..6ae6b203 100644
--- a/components/Modal/Collection/TeamManagement.tsx
+++ b/components/Modal/Collection/TeamManagement.tsx
@@ -117,7 +117,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-500">Make Public</p>
+          <p className="text-sm text-sky-700">Make Public</p>
 
           <Checkbox
             label="Make this a public collection."
@@ -135,7 +135,7 @@ export default function TeamManagement({
 
       {collection.isPublic ? (
         <div>
-          <p className="text-sm text-sky-500 mb-2">
+          <p className="text-sm text-sky-700 mb-2">
             Public Link (Click to copy)
           </p>
           <div
@@ -148,7 +148,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-500 duration-100 cursor-text"
+            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"
           >
             {publicCollectionURL}
           </div>
@@ -159,7 +159,7 @@ export default function TeamManagement({
 
       {permissions === true && (
         <>
-          <p className="text-sm text-sky-500">Member Management</p>
+          <p className="text-sm text-sky-700">Member Management</p>
 
           <div className="flex items-center gap-2">
             <input
@@ -181,7 +181,7 @@ export default function TeamManagement({
               }
               type="text"
               placeholder="Username (without the '@')"
-              className="w-full rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
+              className="w-full rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
             />
 
             <div
@@ -193,7 +193,7 @@ export default function TeamManagement({
                   setMemberState
                 )
               }
-              className="flex items-center justify-center bg-sky-500 hover:bg-sky-400 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-12 h-12 p-3 rounded-md cursor-pointer"
             >
               <FontAwesomeIcon icon={faUserPlus} className="w-5 h-5" />
             </div>
@@ -239,7 +239,7 @@ export default function TeamManagement({
                         className="border-[3px]"
                       />
                       <div>
-                        <p className="text-sm font-bold text-sky-500">
+                        <p className="text-sm font-bold text-sky-700">
                           {e.user.name}
                         </p>
                         <p className="text-sky-900">@{e.user.username}</p>
@@ -248,7 +248,7 @@ export default function TeamManagement({
                     <div className="flex sm:block items-center gap-5 min-w-[10rem]">
                       <div>
                         <p
-                          className={`font-bold text-sm text-sky-500 ${
+                          className={`font-bold text-sm text-sky-700 ${
                             permissions === true ? "" : "mb-2"
                           }`}
                         >
@@ -305,7 +305,7 @@ export default function TeamManagement({
                               }}
                             />
                             <span
-                              className={`text-sky-900 peer-checked:bg-sky-500 text-sm ${
+                              className={`text-sky-900 peer-checked:bg-sky-700 text-sm ${
                                 permissions === true
                                   ? "hover:bg-slate-200 duration-75"
                                   : ""
@@ -350,7 +350,7 @@ export default function TeamManagement({
                               }}
                             />
                             <span
-                              className={`text-sky-900 peer-checked:bg-sky-500 text-sm ${
+                              className={`text-sky-900 peer-checked:bg-sky-700 text-sm ${
                                 permissions === true
                                   ? "hover:bg-slate-200 duration-75"
                                   : ""
@@ -395,7 +395,7 @@ export default function TeamManagement({
                               }}
                             />
                             <span
-                              className={`text-sky-900 peer-checked:bg-sky-500 text-sm ${
+                              className={`text-sky-900 peer-checked:bg-sky-700 text-sm ${
                                 permissions === true
                                   ? "hover:bg-slate-200 duration-75"
                                   : ""
@@ -425,7 +425,7 @@ export default function TeamManagement({
           />
           <div>
             <div className="flex items-center gap-1">
-              <p className="text-sm font-bold text-sky-500">
+              <p className="text-sm font-bold text-sky-700">
                 {collectionOwner.name}
               </p>
               <FontAwesomeIcon
diff --git a/components/Modal/Collection/index.tsx b/components/Modal/Collection/index.tsx
index e3d5f8a4..c246e9bb 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-500 text-center">New Collection</p>
+          <p className="text-xl text-sky-700 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-600">
+        <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">
           {method === "UPDATE" && (
             <>
               {isOwner && (
diff --git a/components/Modal/Link/AddOrEditLink.tsx b/components/Modal/Link/AddOrEditLink.tsx
index ceecdc62..f1d2f85a 100644
--- a/components/Modal/Link/AddOrEditLink.tsx
+++ b/components/Modal/Link/AddOrEditLink.tsx
@@ -125,7 +125,7 @@ export default function AddOrEditLink({
 
       <div className="grid sm:grid-cols-2 gap-3">
         <div>
-          <p className="text-sm text-sky-500 mb-2">
+          <p className="text-sm text-sky-700 mb-2">
             Name
             <RequiredBadge />
           </p>
@@ -134,13 +134,13 @@ export default function AddOrEditLink({
             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-500 duration-100"
+            className="w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
           />
         </div>
 
         {method === "CREATE" ? (
           <div>
-            <p className="text-sm text-sky-500 mb-2">
+            <p className="text-sm text-sky-700 mb-2">
               URL
               <RequiredBadge />
             </p>
@@ -149,13 +149,13 @@ 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-500 duration-100"
+              className="w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
             />
           </div>
         ) : null}
 
         <div>
-          <p className="text-sm text-sky-500 mb-2">Collection</p>
+          <p className="text-sm text-sky-700 mb-2">Collection</p>
           <CollectionSelection
             onChange={setCollection}
             // defaultValue={{
@@ -174,7 +174,7 @@ export default function AddOrEditLink({
         </div>
 
         <div className={method === "UPDATE" ? "sm:col-span-2" : ""}>
-          <p className="text-sm text-sky-500 mb-2">Tags</p>
+          <p className="text-sm text-sky-700 mb-2">Tags</p>
           <TagSelection
             onChange={setTags}
             defaultValue={link.tags.map((e) => {
@@ -183,7 +183,7 @@ export default function AddOrEditLink({
           />
         </div>
         <div className="sm:col-span-2">
-          <p className="text-sm text-sky-500 mb-2">Description</p>
+          <p className="text-sm text-sky-700 mb-2">Description</p>
           <textarea
             value={link.description}
             onChange={(e) => setLink({ ...link, description: e.target.value })}
@@ -192,7 +192,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-500 duration-100"
+            className="resize-none w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
           />
         </div>
       </div>
diff --git a/components/Modal/Link/LinkDetails.tsx b/components/Modal/Link/LinkDetails.tsx
index 1847c92b..19904bda 100644
--- a/components/Modal/Link/LinkDetails.tsx
+++ b/components/Modal/Link/LinkDetails.tsx
@@ -151,7 +151,7 @@ export default function LinkDetails({ link }: Props) {
           />
         )}
         <div className="flex flex-col gap- justify-end drop-shadow">
-          <p className="text-2xl text-sky-500 capitalize break-words hyphens-auto">
+          <p className="text-2xl text-sky-700 capitalize break-words hyphens-auto">
             {link.name}
           </p>
           <Link
@@ -223,12 +223,12 @@ export default function LinkDetails({ link }: Props) {
             <p className="text-gray-500">Screenshot</p>
           </div>
 
-          <div className="flex text-sky-600 gap-1">
+          <div className="flex text-sky-500 gap-1">
             <Link
               href={`/api/archives/${link.collectionId}/${link.id}.png`}
               target="_blank"
               rel="noreferrer"
-              className="cursor-pointer hover:bg-sky-100 duration-100 p-2 rounded-md"
+              className="cursor-pointer hover:bg-slate-200 duration-100 p-2 rounded-md"
             >
               <FontAwesomeIcon
                 icon={faArrowUpRightFromSquare}
@@ -238,7 +238,7 @@ export default function LinkDetails({ link }: Props) {
 
             <div
               onClick={() => handleDownload("png")}
-              className="cursor-pointer hover:bg-sky-100 duration-100 p-2 rounded-md"
+              className="cursor-pointer hover:bg-slate-200 duration-100 p-2 rounded-md"
             >
               <FontAwesomeIcon
                 icon={faCloudArrowDown}
@@ -257,12 +257,12 @@ export default function LinkDetails({ link }: Props) {
             <p className="text-gray-500">PDF</p>
           </div>
 
-          <div className="flex text-sky-600 gap-1">
+          <div className="flex text-sky-500 gap-1">
             <Link
               href={`/api/archives/${link.collectionId}/${link.id}.pdf`}
               target="_blank"
               rel="noreferrer"
-              className="cursor-pointer hover:bg-sky-100 duration-100 p-2 rounded-md"
+              className="cursor-pointer hover:bg-slate-200 duration-100 p-2 rounded-md"
             >
               <FontAwesomeIcon
                 icon={faArrowUpRightFromSquare}
@@ -272,7 +272,7 @@ export default function LinkDetails({ link }: Props) {
 
             <div
               onClick={() => handleDownload("pdf")}
-              className="cursor-pointer hover:bg-sky-100 duration-100 p-2 rounded-md"
+              className="cursor-pointer hover:bg-slate-200 duration-100 p-2 rounded-md"
             >
               <FontAwesomeIcon
                 icon={faCloudArrowDown}
diff --git a/components/Modal/Link/index.tsx b/components/Modal/Link/index.tsx
index d4b801af..5c7361ea 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-500 text-center">New Link</p>
+          <p className="text-xl text-sky-700 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-600 ${
+          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 ${
             isOwnerOrMod ? "" : "pb-8"
           }`}
         >
diff --git a/components/Modal/User/ChangePassword.tsx b/components/Modal/User/ChangePassword.tsx
index 4c95d8e8..f4f59ed5 100644
--- a/components/Modal/User/ChangePassword.tsx
+++ b/components/Modal/User/ChangePassword.tsx
@@ -81,23 +81,23 @@ export default function ChangePassword({
   return (
     <div className="mx-auto sm:w-[35rem] w-80">
       <div className="max-w-[25rem] w-full mx-auto flex flex-col gap-3 justify-between">
-        <p className="text-sm text-sky-500">New Password</p>
+        <p className="text-sm text-sky-700">New Password</p>
 
         <input
           value={newPassword}
           onChange={(e) => setNewPassword1(e.target.value)}
           type="password"
           placeholder="••••••••••••••"
-          className="w-full rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
+          className="w-full rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
         />
-        <p className="text-sm text-sky-500">Confirm New Password</p>
+        <p className="text-sm text-sky-700">Confirm New Password</p>
 
         <input
           value={newPassword2}
           onChange={(e) => setNewPassword2(e.target.value)}
           type="password"
           placeholder="••••••••••••••"
-          className="w-full rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
+          className="w-full rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
         />
 
         <SubmitButton
diff --git a/components/Modal/User/PrivacySettings.tsx b/components/Modal/User/PrivacySettings.tsx
index ef6cd581..1f66103f 100644
--- a/components/Modal/User/PrivacySettings.tsx
+++ b/components/Modal/User/PrivacySettings.tsx
@@ -83,7 +83,7 @@ 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-500 mb-2">Profile Visibility</p>
+        <p className="text-sm text-sky-700 mb-2">Profile Visibility</p>
 
         <Checkbox
           label="Make profile private"
@@ -98,13 +98,13 @@ export default function PrivacySettings({
 
         {user.isPrivate && (
           <div>
-            <p className="text-sm text-sky-500 my-2">Whitelisted Users</p>
+            <p className="text-sm text-sky-700 my-2">Whitelisted Users</p>
             <p className="text-gray-500 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-500"
+              className="w-full resize-none border rounded-md duration-100 bg-white p-2 outline-none border-sky-100 focus:border-sky-700"
               placeholder="Your profile is hidden from everyone right now..."
               value={whitelistedUsersTextbox}
               onChange={(e) => {
diff --git a/components/Modal/User/ProfileSettings.tsx b/components/Modal/User/ProfileSettings.tsx
index 5716b683..84ed767a 100644
--- a/components/Modal/User/ProfileSettings.tsx
+++ b/components/Modal/User/ProfileSettings.tsx
@@ -102,7 +102,7 @@ export default function ProfileSettings({
     <div className="flex flex-col gap-3 justify-between sm:w-[35rem] w-80">
       <div className="grid sm:grid-cols-2 gap-3 auto-rows-auto">
         <div className="sm:row-span-2 sm:justify-self-center mx-auto mb-3">
-          <p className="text-sm text-sky-500 mb-2 text-center">Profile Photo</p>
+          <p className="text-sm text-sky-700 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 +127,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-500"
+                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"
               >
                 Browse...
                 <input
@@ -145,33 +145,33 @@ export default function ProfileSettings({
 
         <div className="flex flex-col gap-3">
           <div>
-            <p className="text-sm text-sky-500 mb-2">Display Name</p>
+            <p className="text-sm text-sky-700 mb-2">Display Name</p>
             <input
               type="text"
               value={user.name}
               onChange={(e) => setUser({ ...user, name: e.target.value })}
-              className="w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
+              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-500 mb-2">Username</p>
+            <p className="text-sm text-sky-700 mb-2">Username</p>
             <input
               type="text"
               value={user.username || ""}
               onChange={(e) => setUser({ ...user, username: e.target.value })}
-              className="w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
+              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-500 mb-2">Email</p>
+              <p className="text-sm text-sky-700 mb-2">Email</p>
               <input
                 type="text"
                 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-500 duration-100"
+                className="w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
               />
             </div>
           ) : undefined}
@@ -186,10 +186,10 @@ export default function ProfileSettings({
 
       {/* <hr /> TODO: Export functionality
 
-      <p className="text-sky-600">Data Settings</p>
+      <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-500">
+        <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> */}
diff --git a/components/Modal/User/index.tsx b/components/Modal/User/index.tsx
index 199d9bb7..bc56e4b0 100644
--- a/components/Modal/User/index.tsx
+++ b/components/Modal/User/index.tsx
@@ -27,7 +27,7 @@ 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-600">
+        <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
             className={({ selected }) =>
               selected
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index f9239886..0f23080a 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -36,7 +36,7 @@ export default function Navbar() {
     <div className="flex justify-between gap-2 items-center px-5 py-2 border-solid border-b-sky-100 border-b h-16">
       <div
         onClick={toggleSidebar}
-        className="inline-flex lg:hidden gap-1 items-center select-none cursor-pointer p-[0.687rem] text-gray-500 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-sky-700 rounded-md duration-100 hover:bg-slate-200"
       >
         <FontAwesomeIcon icon={faBars} className="w-5 h-5" />
       </div>
@@ -50,7 +50,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-500 sm:text-white sm:bg-sky-500 sm:hover:bg-sky-400 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:hover:bg-sky-600 duration-100 group"
         >
           <FontAwesomeIcon
             icon={faPlus}
@@ -73,7 +73,7 @@ export default function Navbar() {
             />
             <p
               id="profile-dropdown"
-              className="font-bold text-sky-500 leading-3 hidden sm:block select-none truncate max-w-[8rem] py-1"
+              className="font-bold text-sky-700 leading-3 hidden sm:block select-none truncate max-w-[8rem] py-1"
             >
               {account.name}
             </p>
diff --git a/components/NoLinksFound.tsx b/components/NoLinksFound.tsx
index e1c07e66..e08f23c0 100644
--- a/components/NoLinksFound.tsx
+++ b/components/NoLinksFound.tsx
@@ -8,7 +8,7 @@ export default function NoLinksFound() {
 
   return (
     <div className="border border-solid border-sky-100 w-full p-10 rounded-2xl">
-      <p className="text-center text-3xl text-sky-500">
+      <p className="text-center text-3xl text-sky-700">
         You haven&apos;t created any Links Here
       </p>
       <br />
@@ -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-500 hover:bg-sky-400 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 hover:bg-sky-600 duration-100 group"
         >
           <FontAwesomeIcon
             icon={faPlus}
diff --git a/components/PublicPage/LinkCard.tsx b/components/PublicPage/LinkCard.tsx
index 5bd24719..320e7827 100644
--- a/components/PublicPage/LinkCard.tsx
+++ b/components/PublicPage/LinkCard.tsx
@@ -58,8 +58,8 @@ 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-400 font-bold">{count + 1}.</p>
-              <p className="text-lg text-sky-500  font-bold">{link.name}</p>
+              <p className="text-sm text-sky-500 font-bold">{count + 1}.</p>
+              <p className="text-lg text-sky-700  font-bold">{link.name}</p>
             </div>
 
             <p className="text-gray-500 text-sm font-medium">
@@ -79,7 +79,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-400 font-bold flex items-center gap-1">
+              <div className="text-sky-500 font-bold 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 f7000337..67850454 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 peer-checked:block hidden"
+        className="w-5 h-5 text-sky-700 peer-checked:block hidden"
       />
       <FontAwesomeIcon
         icon={faCircle}
-        className="w-5 h-5 text-sky-500 peer-checked:hidden block"
+        className="w-5 h-5 text-sky-700 peer-checked:hidden block"
       />
       <span className="text-sky-900 rounded select-none">{label}</span>
     </label>
diff --git a/components/RequiredBadge.tsx b/components/RequiredBadge.tsx
index 1f9a41bc..71e60afa 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-500 cursor-help">
+    <span title="Required Field" className="text-sky-700 cursor-help">
       {" "}
       *
     </span>
diff --git a/components/Search.tsx b/components/Search.tsx
index e29cfce1..4439c0d3 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-600"
+        className="inline-flex w-fit absolute left-2 pointer-events-none rounded-md p-1 text-sky-500 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-500 md:focus:w-80 hover:border-sky-500 duration-100 outline-none"
+        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"
       />
     </div>
   );
diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
index 179a3482..36a18a1f 100644
--- a/components/Sidebar.tsx
+++ b/components/Sidebar.tsx
@@ -66,7 +66,7 @@ export default function Sidebar({ className }: { className?: string }) {
             icon={faChartSimple}
             className={`w-8 h-8 drop-shadow text-sky-500`}
           />
-          <p className="text-sky-500 text-xs font-semibold">Dashboard</p>
+          <p className="text-sky-700 text-xs font-semibold">Dashboard</p>
         </Link>
 
         <Link
@@ -81,7 +81,7 @@ export default function Sidebar({ className }: { className?: string }) {
             icon={faLink}
             className={`w-8 h-8 drop-shadow text-sky-500`}
           />
-          <p className="text-sky-500 text-xs font-semibold">
+          <p className="text-sky-700 text-xs font-semibold">
             <span className="hidden xl:inline-block">All</span> Links
           </p>
         </Link>
@@ -96,7 +96,7 @@ export default function Sidebar({ className }: { className?: string }) {
             icon={faFolder}
             className={`w-8 h-8 drop-shadow text-sky-500`}
           />
-          <p className="text-sky-500 text-xs font-semibold">
+          <p className="text-sky-700 text-xs font-semibold">
             <span className="hidden xl:inline-block">All</span> Collections
           </p>
         </Link>
@@ -146,7 +146,7 @@ export default function Sidebar({ className }: { className?: string }) {
                           style={{ color: e.color }}
                         />
 
-                        <p className="text-sky-500 truncate w-full pr-7">
+                        <p className="text-sky-700 truncate w-full pr-7">
                           {e.name}
                         </p>
                       </div>
@@ -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-500 truncate w-full pr-7">
+                        <p className="text-sky-700 truncate w-full pr-7">
                           {e.name}
                         </p>
                       </div>
diff --git a/components/SubmitButton.tsx b/components/SubmitButton.tsx
index 02fa455b..93d85c8c 100644
--- a/components/SubmitButton.tsx
+++ b/components/SubmitButton.tsx
@@ -20,8 +20,8 @@ export default function SubmitButton({
     <div
       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-400 cursor-auto"
-          : "bg-sky-500 hover:bg-sky-400 cursor-pointer"
+          ? "bg-sky-600 cursor-auto"
+          : "bg-sky-700 hover:bg-sky-600 cursor-pointer"
       } ${className}`}
       onClick={() => {
         if (!loading) onClick();
diff --git a/pages/choose-username.tsx b/pages/choose-username.tsx
index 5b1657a3..8f943045 100644
--- a/pages/choose-username.tsx
+++ b/pages/choose-username.tsx
@@ -50,12 +50,12 @@ export default function Subscribe() {
         className="h-12 w-fit mx-auto mt-10"
       />
       <div className="p-2 mt-10 mx-auto flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 rounded-md border border-sky-100">
-        <p className="text-xl text-sky-500 w-fit font-bold">
+        <p className="text-xl text-sky-700 w-fit font-bold">
           Choose a Username (Last step)
         </p>
 
         <div>
-          <p className="text-sm text-sky-500 w-fit font-semibold mb-1">
+          <p className="text-sm text-sky-700 w-fit font-semibold mb-1">
             Username
           </p>
 
@@ -64,7 +64,7 @@ export default function Subscribe() {
             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-500 duration-100"
+            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>
diff --git a/pages/collections/[id].tsx b/pages/collections/[id].tsx
index 3ef5018f..798a98a6 100644
--- a/pages/collections/[id].tsx
+++ b/pages/collections/[id].tsx
@@ -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-500 font-bold w-full py-1 break-words hyphens-auto">
+                  <p className="sm:text-4xl text-3xl capitalize text-sky-700 font-bold w-full py-1 break-words hyphens-auto">
                     {activeCollection?.name}
                   </p>
                 </div>
@@ -69,7 +69,7 @@ export default function Index() {
 
             {activeCollection ? (
               <div
-                className={`text-sky-400 min-w-[15rem] ${
+                className={`min-w-[15rem] ${
                   activeCollection.members[0] && "mr-3"
                 }`}
               >
@@ -87,7 +87,7 @@ export default function Index() {
                   className="flex justify-center sm:justify-end items-center w-fit mx-auto sm:mr-0 sm:ml-auto group cursor-pointer"
                 >
                   <div
-                    className={`bg-sky-500 p-2 leading-3 select-none group-hover:bg-sky-400 duration-100 text-white rounded-full text-xs ${
+                    className={`bg-sky-700 p-2 leading-3 select-none group-hover:bg-sky-600 duration-100 text-white rounded-full text-xs ${
                       activeCollection.members[0] && "mr-1"
                     }`}
                   >
@@ -107,7 +107,7 @@ export default function Index() {
                     .slice(0, 4)}
                   {activeCollection?.members.length &&
                   activeCollection.members.length - 4 > 0 ? (
-                    <div className="h-10 w-10 text-white flex items-center justify-center rounded-full border-[3px] bg-sky-500 border-sky-100 -mr-3">
+                    <div className="h-10 w-10 text-white flex items-center justify-center rounded-full border-[3px] bg-sky-700 border-sky-100 -mr-3">
                       +{activeCollection?.members?.length - 4}
                     </div>
                   ) : null}
@@ -116,7 +116,7 @@ export default function Index() {
             ) : null}
           </div>
 
-          <div className="text-gray-500 flex justify-between items-end gap-5">
+          <div className="text-gray-600 flex justify-between items-end gap-5">
             <p>{activeCollection?.description}</p>
             <div className="flex items-center gap-2">
               <div className="relative">
diff --git a/pages/collections/index.tsx b/pages/collections/index.tsx
index d3e69545..2ac4b643 100644
--- a/pages/collections/index.tsx
+++ b/pages/collections/index.tsx
@@ -39,7 +39,7 @@ export default function Collections() {
                 icon={faFolder}
                 className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500 drop-shadow"
               />
-              <p className="sm:text-4xl text-3xl capitalize text-sky-500 font-bold">
+              <p className="sm:text-4xl text-3xl capitalize text-sky-700 font-bold">
                 All Collections
               </p>
             </div>
diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx
index 945585f0..ac5f8622 100644
--- a/pages/dashboard.tsx
+++ b/pages/dashboard.tsx
@@ -85,7 +85,7 @@ export default function Dashboard() {
               icon={faChartSimple}
               className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500 drop-shadow"
             />
-            <p className="sm:text-4xl text-3xl capitalize text-sky-500 font-bold">
+            <p className="sm:text-4xl text-3xl capitalize text-sky-700 font-bold">
               Dashboard
             </p>
           </div>
@@ -95,14 +95,14 @@ 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-500">{numberOfLinks}</p>
+            <p className="font-bold text-6xl text-sky-700">{numberOfLinks}</p>
             <p className="text-sky-900 text-xl">
               {numberOfLinks === 1 ? "Link" : "Links"}
             </p>
           </div>
 
           <div className="flex items-baseline gap-2">
-            <p className="font-bold text-6xl text-sky-500">
+            <p className="font-bold text-6xl text-sky-700">
               {collections.length}
             </p>
             <p className="text-sky-900 text-xl">
@@ -111,7 +111,7 @@ export default function Dashboard() {
           </div>
 
           <div className="flex items-baseline gap-2">
-            <p className="font-bold text-6xl text-sky-500">{tags.length}</p>
+            <p className="font-bold text-6xl text-sky-700">{tags.length}</p>
             <p className="text-sky-900 text-xl">
               {tags.length === 1 ? "Tag" : "Tags"}
             </p>
@@ -131,9 +131,9 @@ 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-600 text-xl">Pinned Links</p>
+                  <p className="text-sky-700 text-xl">Pinned Links</p>
 
-                  <div className="text-sky-600 flex items-center gap-2">
+                  <div className="text-sky-700 flex items-center gap-2">
                     {linkPinDisclosure ? "Hide" : "Show"}
                     <FontAwesomeIcon
                       icon={faChevronDown}
@@ -164,7 +164,7 @@ export default function Dashboard() {
             </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-500">
+              <p className="text-center text-2xl text-sky-700">
                 No Pinned Links
               </p>
               <p className="text-center text-sky-900 text-sm">
@@ -182,9 +182,9 @@ 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-600 text-xl">Pinned Collections</p>
+                <p className="text-sky-700 text-xl">Pinned Collections</p>
 
-                <div className="text-sky-600 flex items-center gap-2">
+                <div className="text-sky-700 flex items-center gap-2">
                   {collectionPinDisclosure ? "Hide" : "Show"}
                   <FontAwesomeIcon
                     icon={faChevronDown}
@@ -219,9 +219,9 @@ 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-600 text-xl">Pinned Tags</p>
+                <p className="text-sky-700 text-xl">Pinned Tags</p>
 
-                <div className="text-sky-600 flex items-center gap-2">
+                <div className="text-sky-700 flex items-center gap-2">
                   {tagPinDisclosure ? "Hide" : "Show"}
                   <FontAwesomeIcon
                     icon={faChevronDown}
diff --git a/pages/forgot.tsx b/pages/forgot.tsx
index dc6a96ce..cdc10a4f 100644
--- a/pages/forgot.tsx
+++ b/pages/forgot.tsx
@@ -47,7 +47,7 @@ export default function Forgot() {
         className="h-12 w-fit mx-auto mt-10"
       />
       <div className="p-2 mt-10 mx-auto flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 rounded-md border border-sky-100">
-        <p className="text-xl text-sky-500 w-fit font-bold">Fogot Password?</p>
+        <p className="text-xl text-sky-700 w-fit font-bold">Fogot Password?</p>
         <p className="text-md text-gray-500 mt-1">
           Enter your Email so we can send you a link to recover your account.
         </p>
@@ -55,14 +55,14 @@ export default function Forgot() {
           Make sure to change your password in the profile settings afterwards.
         </p>
         <div>
-          <p className="text-sm text-sky-500 w-fit font-semibold mb-1">Email</p>
+          <p className="text-sm text-sky-700 w-fit font-semibold mb-1">Email</p>
 
           <input
             type="text"
             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-500 duration-100"
+            className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
           />
         </div>
 
@@ -73,7 +73,7 @@ export default function Forgot() {
           loading={submitLoader}
         />
         <div className="flex items-baseline gap-1 justify-center">
-          <Link href={"/login"} className="block text-sky-500 font-bold">
+          <Link href={"/login"} className="block text-sky-700 font-bold">
             Go back
           </Link>
         </div>
diff --git a/pages/links.tsx b/pages/links.tsx
index 678ced8a..23e278d8 100644
--- a/pages/links.tsx
+++ b/pages/links.tsx
@@ -26,7 +26,7 @@ export default function Links() {
               icon={faLink}
               className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500 drop-shadow"
             />
-            <p className="sm:text-4xl text-3xl capitalize text-sky-500 font-bold">
+            <p className="sm:text-4xl text-3xl capitalize text-sky-700 font-bold">
               All Links
             </p>
           </div>
diff --git a/pages/login.tsx b/pages/login.tsx
index c777b711..8246fe30 100644
--- a/pages/login.tsx
+++ b/pages/login.tsx
@@ -53,15 +53,15 @@ export default function Login() {
         alt="Linkwarden"
         className="h-12 w-fit mx-auto mt-10"
       />
-      <p className="text-xl font-semibold text-sky-500  px-2 text-center">
+      <p className="text-xl font-semibold text-sky-700  px-2 text-center">
         Sign in to your account
       </p>
       <div className="p-2 my-10 mx-auto flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 rounded-md border border-sky-100">
-        <p className="text-xl text-sky-500 w-fit font-bold">
+        <p className="text-xl text-sky-700 w-fit font-bold">
           Enter your credentials
         </p>
         <div>
-          <p className="text-sm text-sky-500 w-fit font-semibold mb-1">
+          <p className="text-sm text-sky-700 w-fit font-semibold mb-1">
             Username
             {emailEnabled ? "/Email" : undefined}
           </p>
@@ -71,12 +71,12 @@ export default function Login() {
             placeholder="johnny"
             value={form.username}
             onChange={(e) => setForm({ ...form, username: e.target.value })}
-            className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
+            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-500 w-fit font-semibold mb-1">
+          <p className="text-sm text-sky-700 w-fit font-semibold mb-1">
             Password
           </p>
 
@@ -85,7 +85,7 @@ export default function Login() {
             placeholder="••••••••••••••"
             value={form.password}
             onChange={(e) => setForm({ ...form, password: e.target.value })}
-            className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
+            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">
@@ -104,7 +104,7 @@ export default function Login() {
         />
         <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-500 font-bold">
+          <Link href={"/register"} className="block text-sky-700 font-bold">
             Sign Up
           </Link>
         </div>
diff --git a/pages/public/collections/[id].tsx b/pages/public/collections/[id].tsx
index ada50bd2..782647d7 100644
--- a/pages/public/collections/[id].tsx
+++ b/pages/public/collections/[id].tsx
@@ -45,7 +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-500 font-bold mb-5 capitalize">
+        <p className="text-5xl text-sky-700 font-bold mb-5 capitalize">
           {data.name}
         </p>
 
@@ -64,7 +64,7 @@ export default function PublicCollections() {
       </div>
 
       {/* <p className="text-center font-bold text-gray-500">
-        List created with <span className="text-sky-500">Linkwarden.</span>
+        List created with <span className="text-sky-700">Linkwarden.</span>
       </p> */}
     </div>
   ) : (
diff --git a/pages/register.tsx b/pages/register.tsx
index ee2a47c1..ab708cc3 100644
--- a/pages/register.tsx
+++ b/pages/register.tsx
@@ -97,7 +97,7 @@ export default function Register() {
         alt="Linkwarden"
         className="h-12 w-fit mx-auto mt-10"
       />
-      <p className="text-center px-2 text-xl font-semibold text-sky-500">
+      <p className="text-center px-2 text-xl font-semibold text-sky-700">
         {process.env.NEXT_PUBLIC_STRIPE_IS_ACTIVE
           ? `Start using our premium services with a ${
               process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS || 14
@@ -105,11 +105,11 @@ export default function Register() {
           : "Create a new account"}
       </p>
       <div className="p-2 mx-auto my-10 flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 rounded-md border border-sky-100">
-        <p className="text-xl text-sky-500 w-fit font-bold">
+        <p className="text-xl text-sky-700 w-fit font-bold">
           Enter your details
         </p>
         <div>
-          <p className="text-sm text-sky-500 w-fit font-semibold mb-1">
+          <p className="text-sm text-sky-700 w-fit font-semibold mb-1">
             Display Name
           </p>
 
@@ -118,13 +118,13 @@ export default function Register() {
             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-500 duration-100"
+            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-500 w-fit font-semibold mb-1">
+            <p className="text-sm text-sky-700 w-fit font-semibold mb-1">
               Username
             </p>
 
@@ -133,14 +133,14 @@ export default function Register() {
               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-500 duration-100"
+              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-500 w-fit font-semibold mb-1">
+            <p className="text-sm text-sky-700 w-fit font-semibold mb-1">
               Email
             </p>
 
@@ -149,14 +149,14 @@ export default function Register() {
               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-500 duration-100"
+              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="flex item-center gap-2">
           <div className="w-full">
-            <p className="text-sm text-sky-500 w-fit font-semibold  mb-1">
+            <p className="text-sm text-sky-700 w-fit font-semibold  mb-1">
               Password
             </p>
 
@@ -165,12 +165,12 @@ export default function Register() {
               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-500 duration-100"
+              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-500 w-fit font-semibold mb-1">
+            <p className="text-sm text-sky-700 w-fit font-semibold mb-1">
               Confirm Password
             </p>
 
@@ -181,7 +181,7 @@ export default function Register() {
               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-500 duration-100"
+              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>
@@ -193,7 +193,7 @@ export default function Register() {
         />
         <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-500 font-bold">
+          <Link href={"/login"} className="block text-sky-700 font-bold">
             Login
           </Link>
         </div>
diff --git a/pages/search/[query].tsx b/pages/search/[query].tsx
index a1f7ba77..8715a41b 100644
--- a/pages/search/[query].tsx
+++ b/pages/search/[query].tsx
@@ -42,7 +42,7 @@ export default function Links() {
                 icon={faSearch}
                 className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500 drop-shadow"
               />
-              <p className="sm:text-4xl text-3xl capitalize text-sky-500 font-bold">
+              <p className="sm:text-4xl text-3xl capitalize text-sky-700 font-bold">
                 Search Results
               </p>
             </div>
@@ -101,7 +101,7 @@ export default function Links() {
         ) : (
           <p className="text-sky-900">
             Nothing found.{" "}
-            <span className="text-sky-500 font-bold text-xl" title="Shruggie">
+            <span className="text-sky-700 font-bold text-xl" title="Shruggie">
               ¯\_(ツ)_/¯
             </span>
           </p>
diff --git a/pages/subscribe.tsx b/pages/subscribe.tsx
index 4972cdda..ffc366e7 100644
--- a/pages/subscribe.tsx
+++ b/pages/subscribe.tsx
@@ -33,7 +33,7 @@ export default function Subscribe() {
         alt="Linkwarden"
         className="h-12 w-fit mx-auto mt-10"
       />
-      <p className="text-xl font-semibold text-sky-500 text-center px-2">
+      <p className="text-xl font-semibold text-sky-700 text-center px-2">
         {process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS || 14} days free trial, then
         ${process.env.NEXT_PUBLIC_PRICING}/month afterwards
       </p>
diff --git a/pages/tags/[id].tsx b/pages/tags/[id].tsx
index 8017e808..0571b4a3 100644
--- a/pages/tags/[id].tsx
+++ b/pages/tags/[id].tsx
@@ -38,7 +38,7 @@ export default function Index() {
                 icon={faHashtag}
                 className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500"
               />
-              <p className="sm:text-4xl text-3xl capitalize text-sky-500 font-bold">
+              <p className="sm:text-4xl text-3xl capitalize text-sky-700 font-bold">
                 {activeTag?.name}
               </p>
             </div>