diff --git a/components/CollectionCard.tsx b/components/CollectionCard.tsx
index a639bd5..177f590 100644
--- a/components/CollectionCard.tsx
+++ b/components/CollectionCard.tsx
@@ -59,7 +59,7 @@ export default function CollectionCard({ collection, className }: Props) {
           <FontAwesomeIcon
             icon={faEllipsis}
             id={"expand-dropdown" + collection.id}
-            className="w-5 h-5 text-gray-500 dark:text-gray-300"
+            className="w-5 h-5 text-neutral"
           />
         </div>
         <Link
@@ -95,16 +95,16 @@ export default function CollectionCard({ collection, className }: Props) {
                   <FontAwesomeIcon
                     icon={faGlobe}
                     title="This collection is being shared publicly."
-                    className="w-4 h-4 drop-shadow text-gray-500 dark:text-gray-300"
+                    className="w-4 h-4 drop-shadow text-neutral"
                   />
                 ) : undefined}
                 <FontAwesomeIcon
                   icon={faLink}
-                  className="w-5 h-5 text-gray-500 dark:text-gray-300"
+                  className="w-5 h-5 text-neutral"
                 />
                 {collection._count && collection._count.links}
               </div>
-              <div className="flex items-center justify-end gap-1 text-gray-500 dark:text-gray-300">
+              <div className="flex items-center justify-end gap-1 text-neutral">
                 <FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
                 <p className="font-bold text-xs">{formattedDate}</p>
               </div>
diff --git a/components/DashboardItem.tsx b/components/DashboardItem.tsx
index 43ee677..bb9e016 100644
--- a/components/DashboardItem.tsx
+++ b/components/DashboardItem.tsx
@@ -14,9 +14,7 @@ export default function dashboardItem({ name, value, icon }: Props) {
         <FontAwesomeIcon icon={icon} className="w-8 h-8 text-primary" />
       </div>
       <div className="flex flex-col justify-center">
-        <p className="text-gray-500 dark:text-gray-400 text-sm tracking-wider">
-          {name}
-        </p>
+        <p className="text-neutral text-sm tracking-wider">{name}</p>
         <p className="font-thin text-6xl text-primary mt-2">{value}</p>
       </div>
     </div>
diff --git a/components/LinkCard.tsx b/components/LinkCard.tsx
index dd0ebec..2b7b546 100644
--- a/components/LinkCard.tsx
+++ b/components/LinkCard.tsx
@@ -185,9 +185,7 @@ 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-gray-500 dark:text-gray-300">
-                  {count + 1}
-                </p>
+                <p className="text-sm text-neutral">{count + 1}</p>
                 <p className="text-lg truncate capitalize w-full pr-8">
                   {unescapeString(link.name || link.description)}
                 </p>
@@ -233,12 +231,12 @@ export default function LinkCard({ link, count, className }: Props) {
                 onClick={(e) => {
                   e.stopPropagation();
                 }}
-                className="flex items-center gap-1 max-w-full w-fit text-gray-500 dark:text-gray-300 hover:opacity-70 duration-100"
+                className="flex items-center gap-1 max-w-full w-fit text-neutral hover:opacity-70 duration-100"
               >
                 <FontAwesomeIcon icon={faLink} className="mt-1 w-4 h-4" />
                 <p className="truncate w-full">{shortendURL}</p>
               </Link>
-              <div className="flex items-center gap-1 text-gray-500 dark:text-gray-300">
+              <div className="flex items-center gap-1 text-neutral">
                 <FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
                 <p>{formattedDate}</p>
               </div>
diff --git a/components/LinkPreview.tsx b/components/LinkPreview.tsx
index 858d6d3..3525521 100644
--- a/components/LinkPreview.tsx
+++ b/components/LinkPreview.tsx
@@ -74,7 +74,7 @@ export default function LinkPreview({ link, className, settings }: 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-gray-500 dark:text-gray-300">{1}</p>
+                <p className="text-sm text-neutral">{1}</p>
                 <p className="text-lg truncate capitalize w-full pr-8">
                   {unescapeString(link.name as string)}
                 </p>
@@ -92,12 +92,12 @@ export default function LinkPreview({ link, className, settings }: Props) {
                 onClick={(e) => {
                   e.stopPropagation();
                 }}
-                className="flex items-center gap-1 max-w-full w-fit text-gray-500 dark:text-gray-300 hover:opacity-70 duration-100"
+                className="flex items-center gap-1 max-w-full w-fit text-neutral hover:opacity-70 duration-100"
               >
                 <FontAwesomeIcon icon={faLink} className="mt-1 w-4 h-4" />
                 <p className="truncate w-full">{shortendURL}</p>
               </A>
-              <div className="flex items-center gap-1 text-gray-500 dark:text-gray-300">
+              <div className="flex items-center gap-1 text-neutral">
                 <FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
                 <p>{formattedDate}</p>
               </div>
diff --git a/components/LinkSidebar.tsx b/components/LinkSidebar.tsx
index 08f1ef9..19c4986 100644
--- a/components/LinkSidebar.tsx
+++ b/components/LinkSidebar.tsx
@@ -71,10 +71,7 @@ export default function LinkSidebar({ className, onClick }: Props) {
             }}
             className={`hover:opacity-60 duration-100 py-2 px-2 cursor-pointer flex items-center gap-4 w-full rounded-md h-8`}
           >
-            <FontAwesomeIcon
-              icon={faPen}
-              className="w-6 h-6 text-gray-500 dark:text-gray-300"
-            />
+            <FontAwesomeIcon icon={faPen} className="w-6 h-6 text-neutral" />
 
             <p className="truncate w-full lg:hidden">Edit</p>
           </div>
@@ -97,7 +94,7 @@ export default function LinkSidebar({ className, onClick }: Props) {
         >
           <FontAwesomeIcon
             icon={faBoxesStacked}
-            className="w-6 h-6 text-gray-500 dark:text-gray-300"
+            className="w-6 h-6 text-neutral"
           />
 
           <p className="truncate w-full lg:hidden">Preserved Formats</p>
@@ -120,7 +117,7 @@ export default function LinkSidebar({ className, onClick }: Props) {
           >
             <FontAwesomeIcon
               icon={faTrashCan}
-              className="w-6 h-6 text-gray-500 dark:text-gray-300"
+              className="w-6 h-6 text-neutral"
             />
 
             <p className="truncate w-full lg:hidden">Delete</p>
diff --git a/components/Modal/Collection/TeamManagement.tsx b/components/Modal/Collection/TeamManagement.tsx
index 49417cb..50d63aa 100644
--- a/components/Modal/Collection/TeamManagement.tsx
+++ b/components/Modal/Collection/TeamManagement.tsx
@@ -112,7 +112,7 @@ export default function TeamManagement({
             }
           />
 
-          <p className="text-gray-500 dark:text-gray-300 text-sm">
+          <p className="text-neutral text-sm">
             This will let <b>Anyone</b> to view this collection.
           </p>
         </>
@@ -181,7 +181,7 @@ export default function TeamManagement({
 
       {collection?.members[0]?.user && (
         <>
-          <p className="text-center text-gray-500 dark:text-gray-300 text-xs sm:text-sm">
+          <p className="text-center text-neutral text-xs sm:text-sm">
             (All Members have <b>Read</b> access to this collection.)
           </p>
           <div className="flex flex-col gap-3 rounded-md">
@@ -196,7 +196,7 @@ export default function TeamManagement({
                     {permissions === true && (
                       <FontAwesomeIcon
                         icon={faClose}
-                        className="absolute right-2 top-2 text-gray-500 dark:text-gray-300 h-4 hover:text-red-500 dark:hover:text-red-500 duration-100 cursor-pointer"
+                        className="absolute right-2 top-2 text-neutral h-4 hover:text-red-500 dark:hover:text-red-500 duration-100 cursor-pointer"
                         title="Remove Member"
                         onClick={() => {
                           const updatedMembers = collection.members.filter(
@@ -218,9 +218,7 @@ export default function TeamManagement({
                       />
                       <div>
                         <p className="text-sm font-bold">{e.user.name}</p>
-                        <p className="text-gray-500 dark:text-gray-300">
-                          @{e.user.username}
-                        </p>
+                        <p className="text-neutral">@{e.user.username}</p>
                       </div>
                     </div>
                     <div className="flex sm:block items-center justify-between gap-5 min-w-[10rem]">
@@ -233,7 +231,7 @@ export default function TeamManagement({
                           Permissions
                         </p>
                         {permissions === true && (
-                          <p className="text-xs text-gray-500 dark:text-gray-300 mb-2">
+                          <p className="text-xs text-neutral mb-2">
                             (Click to toggle.)
                           </p>
                         )}
@@ -243,7 +241,7 @@ export default function TeamManagement({
                       !e.canCreate &&
                       !e.canUpdate &&
                       !e.canDelete ? (
-                        <p className="text-sm text-gray-500 dark:text-gray-300">
+                        <p className="text-sm text-neutral">
                           Has no permissions.
                         </p>
                       ) : (
@@ -409,9 +407,7 @@ export default function TeamManagement({
                 className="w-3 h-3 text-yellow-500"
               />
             </div>
-            <p className="text-gray-500 dark:text-gray-300">
-              @{collectionOwner.username}
-            </p>
+            <p className="text-neutral">@{collectionOwner.username}</p>
           </div>
         </div>
 
diff --git a/components/Modal/Collection/ViewTeam.tsx b/components/Modal/Collection/ViewTeam.tsx
index c34d8b5..9a941db 100644
--- a/components/Modal/Collection/ViewTeam.tsx
+++ b/components/Modal/Collection/ViewTeam.tsx
@@ -52,9 +52,7 @@ export default function ViewTeam({ collection }: Props) {
                 Admin
               </div>
             </div>
-            <p className="text-gray-500 dark:text-gray-300">
-              @{collectionOwner.username}
-            </p>
+            <p className="text-neutral">@{collectionOwner.username}</p>
           </div>
         </div>
       </div>
@@ -77,9 +75,7 @@ export default function ViewTeam({ collection }: Props) {
                       />
                       <div>
                         <p className="text-sm font-bold">{e.user.name}</p>
-                        <p className="text-gray-500 dark:text-gray-300">
-                          @{e.user.username}
-                        </p>
+                        <p className="text-neutral">@{e.user.username}</p>
                       </div>
                     </div>
                   </div>
diff --git a/components/Modal/Link/AddOrEditLink.tsx b/components/Modal/Link/AddOrEditLink.tsx
index 936750f..d115ac6 100644
--- a/components/Modal/Link/AddOrEditLink.tsx
+++ b/components/Modal/Link/AddOrEditLink.tsx
@@ -138,7 +138,7 @@ export default function AddOrEditLink({
     <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
       {method === "UPDATE" ? (
         <div
-          className="text-gray-500 dark:text-gray-300 break-all w-full flex gap-2"
+          className="text-neutral break-all w-full flex gap-2"
           title={link.url}
         >
           <FontAwesomeIcon icon={faLink} className="w-6 h-6" />
diff --git a/components/Modal/Link/PreservedFormats.tsx b/components/Modal/Link/PreservedFormats.tsx
index 0a15736..a4575be 100644
--- a/components/Modal/Link/PreservedFormats.tsx
+++ b/components/Modal/Link/PreservedFormats.tsx
@@ -107,7 +107,7 @@ export default function PreservedFormats() {
             >
               <FontAwesomeIcon
                 icon={faCloudArrowDown}
-                className="w-5 h-5 cursor-pointer text-gray-500 dark:text-gray-300"
+                className="w-5 h-5 cursor-pointer text-neutral"
               />
             </div>
 
@@ -118,7 +118,7 @@ export default function PreservedFormats() {
             >
               <FontAwesomeIcon
                 icon={faArrowUpRightFromSquare}
-                className="w-5 h-5 text-gray-500 dark:text-gray-300"
+                className="w-5 h-5 text-neutral"
               />
             </Link>
           </div>
@@ -142,7 +142,7 @@ export default function PreservedFormats() {
             >
               <FontAwesomeIcon
                 icon={faCloudArrowDown}
-                className="w-5 h-5 cursor-pointer text-gray-500 dark:text-gray-300"
+                className="w-5 h-5 cursor-pointer text-neutral"
               />
             </div>
 
@@ -153,7 +153,7 @@ export default function PreservedFormats() {
             >
               <FontAwesomeIcon
                 icon={faArrowUpRightFromSquare}
-                className="w-5 h-5 text-gray-500 dark:text-gray-300"
+                className="w-5 h-5 text-neutral"
               />
             </Link>
           </div>
@@ -183,7 +183,7 @@ export default function PreservedFormats() {
             ""
           )}`}
           target="_blank"
-          className={`text-gray-500 dark:text-gray-300 duration-100 hover:opacity-60 flex gap-2 w-fit items-center text-sm ${
+          className={`text-neutral duration-100 hover:opacity-60 flex gap-2 w-fit items-center text-sm ${
             link?.pdfPath &&
             link?.screenshotPath &&
             link?.pdfPath !== "pending" &&
diff --git a/components/Modal/index.tsx b/components/Modal/index.tsx
index 05088e3..9a249f5 100644
--- a/components/Modal/index.tsx
+++ b/components/Modal/index.tsx
@@ -23,7 +23,7 @@ export default function Modal({ toggleModal, className, children }: Props) {
           >
             <FontAwesomeIcon
               icon={faChevronLeft}
-              className="w-4 h-4 text-gray-500 dark:text-gray-300"
+              className="w-4 h-4 text-neutral"
             />
           </div>
           {children}
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 8e45fb9..dfd2f85 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -53,7 +53,7 @@ export default function Navbar() {
     <div className="flex justify-between gap-2 items-center px-5 py-2 border-solid border-b-neutral-content dark:border-b-neutral-700 border-b h-16">
       <div
         onClick={toggleSidebar}
-        className="inline-flex lg:hidden gap-1 items-center select-none cursor-pointer p-[0.687rem] text-gray-500 dark:text-gray-300 rounded-md duration-100 hover:bg-slate-200 dark:hover:bg-neutral-700"
+        className="inline-flex lg:hidden gap-1 items-center select-none cursor-pointer p-[0.687rem] text-neutral rounded-md duration-100 hover:bg-slate-200 dark:hover:bg-neutral-700"
       >
         <FontAwesomeIcon icon={faBars} className="w-5 h-5" />
       </div>
diff --git a/components/PublicPage/PublicLinkCard.tsx b/components/PublicPage/PublicLinkCard.tsx
index 1734f56..18e3b30 100644
--- a/components/PublicPage/PublicLinkCard.tsx
+++ b/components/PublicPage/PublicLinkCard.tsx
@@ -64,7 +64,7 @@ export default function LinkCard({ link, count }: Props) {
               ))}
             </div>
           </div>
-          <div className="flex gap-1 items-center flex-wrap text-sm text-gray-500 dark:text-gray-300">
+          <div className="flex gap-1 items-center flex-wrap text-sm text-neutral">
             <p>{formattedDate}</p>
             <p>·</p>
             <Link
@@ -80,7 +80,7 @@ export default function LinkCard({ link, count }: Props) {
             {unescapeString(link.description)}{" "}
             <Link
               href={`/public/links/${link.id}`}
-              className="flex gap-1 items-center flex-wrap text-sm text-gray-500 dark:text-gray-300 hover:opacity-50 duration-100 min-w-fit float-right mt-1 ml-2"
+              className="flex gap-1 items-center flex-wrap text-sm text-neutral hover:opacity-50 duration-100 min-w-fit float-right mt-1 ml-2"
             >
               <p>Read</p>
               <FontAwesomeIcon
diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
index dd36774..232724f 100644
--- a/components/Sidebar.tsx
+++ b/components/Sidebar.tsx
@@ -125,7 +125,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 dark:text-gray-300 mt-5"
+          className="flex items-center justify-between text-sm w-full text-left mb-2 pl-2 font-bold text-neutral mt-5"
         >
           <p>Collections</p>
 
@@ -169,10 +169,10 @@ export default function Sidebar({ className }: { className?: string }) {
                           <FontAwesomeIcon
                             icon={faGlobe}
                             title="This collection is being shared publicly."
-                            className="w-4 h-4 drop-shadow text-gray-500 dark:text-gray-300"
+                            className="w-4 h-4 drop-shadow text-neutral"
                           />
                         ) : undefined}
-                        <div className="drop-shadow text-gray-500 dark:text-gray-300 text-xs">
+                        <div className="drop-shadow text-neutral text-xs">
                           {e._count?.links}
                         </div>
                       </div>
@@ -183,7 +183,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 dark:text-gray-300 text-xs font-semibold truncate w-full pr-7">
+                <p className="text-neutral text-xs font-semibold truncate w-full pr-7">
                   You Have No Collections...
                 </p>
               </div>
@@ -196,7 +196,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 dark:text-gray-300 mt-5"
+          className="flex items-center justify-between text-sm w-full text-left mb-2 pl-2 font-bold text-neutral mt-5"
         >
           <p>Tags</p>
           <FontAwesomeIcon
@@ -232,7 +232,7 @@ export default function Sidebar({ className }: { className?: string }) {
                         />
 
                         <p className="truncate w-full pr-7">{e.name}</p>
-                        <div className="drop-shadow text-gray-500 dark:text-gray-300 text-xs">
+                        <div className="drop-shadow text-neutral text-xs">
                           {e._count?.links}
                         </div>
                       </div>
@@ -243,7 +243,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 dark:text-gray-300 text-xs font-semibold truncate w-full pr-7">
+                <p className="text-neutral text-xs font-semibold truncate w-full pr-7">
                   You Have No Tags...
                 </p>
               </div>
diff --git a/layouts/LinkLayout.tsx b/layouts/LinkLayout.tsx
index b1bc511..9bcce8d 100644
--- a/layouts/LinkLayout.tsx
+++ b/layouts/LinkLayout.tsx
@@ -86,7 +86,7 @@ export default function LinkLayout({ children }: Props) {
           <div className="flex gap-3 mb-5 duration-100 items-center justify-between">
             {/* <div
               onClick={toggleSidebar}
-              className="inline-flex lg:hidden gap-1 items-center select-none cursor-pointer p-2 text-gray-500 dark:text-gray-300 rounded-md duration-100 hover:bg-slate-200 dark:hover:bg-neutral-700"
+              className="inline-flex lg:hidden gap-1 items-center select-none cursor-pointer p-2 text-neutral rounded-md duration-100 hover:bg-slate-200 dark:hover:bg-neutral-700"
             >
               <FontAwesomeIcon icon={faBars} className="w-5 h-5" />
             </div> */}
@@ -103,7 +103,7 @@ export default function LinkLayout({ children }: Props) {
                   router.push(`/dashboard`);
                 }
               }}
-              className="inline-flex gap-1 hover:opacity-60 items-center select-none cursor-pointer p-2 lg:p-0 lg:px-1 lg:my-2 text-gray-500 dark:text-gray-300 rounded-md duration-100"
+              className="inline-flex gap-1 hover:opacity-60 items-center select-none cursor-pointer p-2 lg:p-0 lg:px-1 lg:my-2 text-neutral rounded-md duration-100"
             >
               <FontAwesomeIcon icon={faChevronLeft} className="w-4 h-4" />
               Back{" "}
@@ -138,7 +138,7 @@ export default function LinkLayout({ children }: Props) {
                 >
                   <FontAwesomeIcon
                     icon={faPen}
-                    className="w-6 h-6 text-gray-500 dark:text-gray-300"
+                    className="w-6 h-6 text-neutral"
                   />
                 </div>
               ) : undefined}
@@ -159,7 +159,7 @@ export default function LinkLayout({ children }: Props) {
               >
                 <FontAwesomeIcon
                   icon={faBoxesStacked}
-                  className="w-6 h-6 text-gray-500 dark:text-gray-300"
+                  className="w-6 h-6 text-neutral"
                 />
               </div>
 
@@ -179,7 +179,7 @@ export default function LinkLayout({ children }: Props) {
                 >
                   <FontAwesomeIcon
                     icon={faTrashCan}
-                    className="w-6 h-6 text-gray-500 dark:text-gray-300"
+                    className="w-6 h-6 text-neutral"
                   />
                 </div>
               ) : undefined}
diff --git a/layouts/SettingsLayout.tsx b/layouts/SettingsLayout.tsx
index 7a9a2af..2e4f5d3 100644
--- a/layouts/SettingsLayout.tsx
+++ b/layouts/SettingsLayout.tsx
@@ -53,14 +53,14 @@ export default function SettingsLayout({ children }: Props) {
           <div className="gap-2 inline-flex mr-3">
             <div
               onClick={toggleSidebar}
-              className="inline-flex lg:hidden gap-1 items-center select-none cursor-pointer p-2 text-gray-500 dark:text-gray-300 rounded-md duration-100 hover:bg-slate-200 dark:hover:bg-neutral-700"
+              className="inline-flex lg:hidden gap-1 items-center select-none cursor-pointer p-2 text-neutral rounded-md duration-100 hover:bg-slate-200 dark:hover:bg-neutral-700"
             >
               <FontAwesomeIcon icon={faBars} className="w-5 h-5" />
             </div>
 
             <Link
               href="/dashboard"
-              className="inline-flex w-fit gap-1 items-center select-none cursor-pointer p-2 text-gray-500 dark:text-gray-300 rounded-md duration-100 hover:bg-slate-200 dark:hover:bg-neutral-700"
+              className="inline-flex w-fit gap-1 items-center select-none cursor-pointer p-2 text-neutral rounded-md duration-100 hover:bg-slate-200 dark:hover:bg-neutral-700"
             >
               <FontAwesomeIcon icon={faChevronLeft} className="w-5 h-5" />
             </Link>
diff --git a/pages/choose-username.tsx b/pages/choose-username.tsx
index 9ef137c..0c7c0fd 100644
--- a/pages/choose-username.tsx
+++ b/pages/choose-username.tsx
@@ -60,7 +60,7 @@ export default function ChooseUsername() {
             />
           </div>
           <div>
-            <p className="text-md text-gray-500 dark:text-gray-400 mt-1">
+            <p className="text-md text-neutral mt-1">
               Feel free to reach out to us at{" "}
               <a
                 className="font-semibold underline"
@@ -81,7 +81,7 @@ export default function ChooseUsername() {
 
           <div
             onClick={() => signOut()}
-            className="w-fit mx-auto cursor-pointer text-gray-500 dark:text-gray-400 font-semibold "
+            className="w-fit mx-auto cursor-pointer text-neutral font-semibold "
           >
             Sign Out
           </div>
diff --git a/pages/collections/[id].tsx b/pages/collections/[id].tsx
index 4a7dbf8..7154d83 100644
--- a/pages/collections/[id].tsx
+++ b/pages/collections/[id].tsx
@@ -132,7 +132,7 @@ export default function Index() {
                   <FontAwesomeIcon
                     icon={faSort}
                     id="sort-dropdown"
-                    className="w-5 h-5 text-gray-500 dark:text-gray-300"
+                    className="w-5 h-5 text-neutral"
                   />
                 </div>
 
@@ -154,7 +154,7 @@ export default function Index() {
                     icon={faEllipsis}
                     id="expand-dropdown"
                     title="More"
-                    className="w-5 h-5 text-gray-500 dark:text-gray-300"
+                    className="w-5 h-5 text-neutral"
                   />
                 </div>
                 {expandDropdown ? (
diff --git a/pages/collections/index.tsx b/pages/collections/index.tsx
index c08d9a4..b9ea717 100644
--- a/pages/collections/index.tsx
+++ b/pages/collections/index.tsx
@@ -56,7 +56,7 @@ export default function Collections() {
                 <FontAwesomeIcon
                   icon={faEllipsis}
                   id="expand-dropdown"
-                  className="w-5 h-5 text-gray-500 dark:text-gray-300"
+                  className="w-5 h-5 text-neutral"
                 />
               </div>
 
@@ -95,7 +95,7 @@ export default function Collections() {
               <FontAwesomeIcon
                 icon={faSort}
                 id="sort-dropdown"
-                className="w-5 h-5 text-gray-500 dark:text-gray-300"
+                className="w-5 h-5 text-neutral"
               />
             </div>
 
diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx
index 2c8557b..d76e5b3 100644
--- a/pages/dashboard.tsx
+++ b/pages/dashboard.tsx
@@ -186,7 +186,7 @@ export default function Dashboard() {
               <p className="text-center text-2xl">
                 View Your Recently Added Links Here!
               </p>
-              <p className="text-center mx-auto max-w-96 w-fit text-gray-500 dark:text-gray-300 text-sm mt-2">
+              <p className="text-center mx-auto max-w-96 w-fit text-neutral text-sm mt-2">
                 This section will view your latest added Links across every
                 Collections you have access to.
               </p>
@@ -323,7 +323,7 @@ export default function Dashboard() {
               <p className="text-center text-2xl">
                 Pin Your Favorite Links Here!
               </p>
-              <p className="text-center mx-auto max-w-96 w-fit text-gray-500 dark:text-gray-300 text-sm mt-2">
+              <p className="text-center mx-auto max-w-96 w-fit text-neutral text-sm mt-2">
                 You can Pin your favorite Links by clicking on the three dots on
                 each Link and clicking{" "}
                 <span className="font-semibold">Pin to Dashboard</span>.
diff --git a/pages/forgot.tsx b/pages/forgot.tsx
index 93cee68..cb25194 100644
--- a/pages/forgot.tsx
+++ b/pages/forgot.tsx
@@ -56,7 +56,7 @@ export default function Forgot() {
               account. Make sure to change your password in the profile settings
               afterwards.
             </p>
-            <p className="text-sm text-gray-500 dark:text-gray-400">
+            <p className="text-sm text-neutral">
               You wont get logged in if you haven&apos;t created an account yet.
             </p>
           </div>
diff --git a/pages/links/[id].tsx b/pages/links/[id].tsx
index 8650578..12c8377 100644
--- a/pages/links/[id].tsx
+++ b/pages/links/[id].tsx
@@ -185,7 +185,7 @@ export default function Index() {
                 />
               )}
 
-              <div className="flex gap-2 text-sm text-gray-500 dark:text-gray-300">
+              <div className="flex gap-2 text-sm text-neutral">
                 <p className=" min-w-fit">
                   {link?.createdAt
                     ? new Date(link?.createdAt).toLocaleString("en-US", {
diff --git a/pages/links/index.tsx b/pages/links/index.tsx
index dc247e4..6401d99 100644
--- a/pages/links/index.tsx
+++ b/pages/links/index.tsx
@@ -42,7 +42,7 @@ export default function Links() {
               <FontAwesomeIcon
                 icon={faSort}
                 id="sort-dropdown"
-                className="w-5 h-5 text-gray-500 dark:text-gray-300"
+                className="w-5 h-5 text-neutral"
               />
             </div>
 
diff --git a/pages/links/pinned.tsx b/pages/links/pinned.tsx
index e844c25..637425b 100644
--- a/pages/links/pinned.tsx
+++ b/pages/links/pinned.tsx
@@ -42,7 +42,7 @@ export default function PinnedLinks() {
               <FontAwesomeIcon
                 icon={faSort}
                 id="sort-dropdown"
-                className="w-5 h-5 text-gray-500 dark:text-gray-300"
+                className="w-5 h-5 text-neutral"
               />
             </div>
 
@@ -69,7 +69,7 @@ export default function PinnedLinks() {
             <p className="text-center text-2xl">
               Pin Your Favorite Links Here!
             </p>
-            <p className="text-center mx-auto max-w-96 w-fit text-gray-500 dark:text-gray-300 text-sm mt-2">
+            <p className="text-center mx-auto max-w-96 w-fit text-neutral text-sm mt-2">
               You can Pin your favorite Links by clicking on the three dots on
               each Link and clicking{" "}
               <span className="font-semibold">Pin to Dashboard</span>.
diff --git a/pages/login.tsx b/pages/login.tsx
index d4a45f1..16a8607 100644
--- a/pages/login.tsx
+++ b/pages/login.tsx
@@ -97,10 +97,7 @@ export default function Login() {
             />
             {emailEnabled && (
               <div className="w-fit ml-auto mt-1">
-                <Link
-                  href={"/forgot"}
-                  className="text-gray-500 dark:text-gray-400 font-semibold"
-                >
+                <Link href={"/forgot"} className="text-neutral font-semibold">
                   Forgot Password?
                 </Link>
               </div>
@@ -125,9 +122,7 @@ export default function Login() {
           {process.env.NEXT_PUBLIC_DISABLE_REGISTRATION ===
           "true" ? undefined : (
             <div className="flex items-baseline gap-1 justify-center">
-              <p className="w-fit text-gray-500 dark:text-gray-400">
-                New here?
-              </p>
+              <p className="w-fit text-neutral">New here?</p>
               <Link href={"/register"} className="block font-semibold">
                 Sign Up
               </Link>
diff --git a/pages/public/collections/[id].tsx b/pages/public/collections/[id].tsx
index 3512ebc..3a2deb5 100644
--- a/pages/public/collections/[id].tsx
+++ b/pages/public/collections/[id].tsx
@@ -184,7 +184,7 @@ export default function PublicCollections() {
                 </div>
               ) : null}
 
-              <p className="ml-2 mt-1 text-gray-500 dark:text-gray-300">
+              <p className="ml-2 mt-1 text-neutral">
                 By {collectionOwner.name}
                 {collection.members.length > 0
                   ? ` and ${collection.members.length} others`
@@ -215,7 +215,7 @@ export default function PublicCollections() {
                   <FontAwesomeIcon
                     icon={faFilter}
                     id="filter-dropdown"
-                    className="w-5 h-5 text-gray-500 dark:text-gray-300"
+                    className="w-5 h-5 text-neutral"
                   />
                 </div>
 
@@ -237,7 +237,7 @@ export default function PublicCollections() {
                   <FontAwesomeIcon
                     icon={faSort}
                     id="sort-dropdown"
-                    className="w-5 h-5 text-gray-500 dark:text-gray-300"
+                    className="w-5 h-5 text-neutral"
                   />
                 </div>
 
diff --git a/pages/public/links/[id].tsx b/pages/public/links/[id].tsx
index 1d21ff2..9e2a60b 100644
--- a/pages/public/links/[id].tsx
+++ b/pages/public/links/[id].tsx
@@ -185,7 +185,7 @@ export default function Index() {
                 />
               )}
 
-              <div className="flex gap-2 text-sm text-gray-500 dark:text-gray-300">
+              <div className="flex gap-2 text-sm text-neutral">
                 <p className=" min-w-fit">
                   {link?.createdAt
                     ? new Date(link?.createdAt).toLocaleString("en-US", {
diff --git a/pages/register.tsx b/pages/register.tsx
index 21e0a18..7afe736 100644
--- a/pages/register.tsx
+++ b/pages/register.tsx
@@ -190,7 +190,7 @@ export default function Register() {
 
             {process.env.NEXT_PUBLIC_STRIPE ? (
               <div>
-                <p className="text-xs text-gray-500 dark:text-gray-400">
+                <p className="text-xs text-neutral">
                   By signing up, you agree to our{" "}
                   <Link
                     href="https://linkwarden.app/tos"
@@ -207,7 +207,7 @@ export default function Register() {
                   </Link>
                   .
                 </p>
-                <p className="text-xs text-gray-500 dark:text-gray-400">
+                <p className="text-xs text-neutral">
                   Need help?{" "}
                   <Link
                     href="mailto:support@linkwarden.app"
@@ -227,9 +227,7 @@ export default function Register() {
               <p className="text-center w-full font-bold">Sign Up</p>
             </button>
             <div className="flex items-baseline gap-1 justify-center">
-              <p className="w-fit text-gray-500 dark:text-gray-400">
-                Already have an account?
-              </p>
+              <p className="w-fit text-neutral">Already have an account?</p>
               <Link href={"/login"} className="block font-bold">
                 Login
               </Link>
diff --git a/pages/search.tsx b/pages/search.tsx
index 1745639..9f908c1 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -63,7 +63,7 @@ export default function Search() {
                 <FontAwesomeIcon
                   icon={faFilter}
                   id="filter-dropdown"
-                  className="w-5 h-5 text-gray-500 dark:text-gray-300"
+                  className="w-5 h-5 text-neutral"
                 />
               </div>
 
@@ -85,7 +85,7 @@ export default function Search() {
                 <FontAwesomeIcon
                   icon={faSort}
                   id="sort-dropdown"
-                  className="w-5 h-5 text-gray-500 dark:text-gray-300"
+                  className="w-5 h-5 text-neutral"
                 />
               </div>
 
diff --git a/pages/settings/account.tsx b/pages/settings/account.tsx
index 5daaf20..eec6f4d 100644
--- a/pages/settings/account.tsx
+++ b/pages/settings/account.tsx
@@ -178,7 +178,7 @@ export default function Account() {
                 <p className="mb-2">Email</p>
                 {user.email !== account.email &&
                 process.env.NEXT_PUBLIC_STRIPE === "true" ? (
-                  <p className="text-gray-500 dark:text-gray-400 mb-2 text-sm">
+                  <p className="text-neutral mb-2 text-sm">
                     Updating this field will change your billing email as well
                   </p>
                 ) : undefined}
@@ -327,14 +327,14 @@ export default function Account() {
             onClick={() => setUser({ ...user, isPrivate: !user.isPrivate })}
           />
 
-          <p className="text-gray-500 dark:text-gray-300 text-sm">
+          <p className="text-neutral text-sm">
             This will limit who can find and add you to new Collections.
           </p>
 
           {user.isPrivate && (
             <div className="pl-5">
               <p className="mt-2">Whitelisted Users</p>
-              <p className="text-gray-500 dark:text-gray-300 text-sm mb-3">
+              <p className="text-neutral text-sm mb-3">
                 Please provide the Username of the users you wish to grant
                 visibility to your profile. Separated by comma.
               </p>
diff --git a/pages/settings/delete.tsx b/pages/settings/delete.tsx
index 2d44685..f00429f 100644
--- a/pages/settings/delete.tsx
+++ b/pages/settings/delete.tsx
@@ -57,7 +57,7 @@ export default function Password() {
       <div className="p-4 mx-auto relative flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-neutral-content">
         <Link
           href="/settings/account"
-          className="absolute top-4 left-4 gap-1 items-center select-none cursor-pointer p-2 text-gray-500 dark:text-gray-300 rounded-md duration-100 hover:bg-slate-200 dark:hover:bg-neutral-700"
+          className="absolute top-4 left-4 gap-1 items-center select-none cursor-pointer p-2 text-neutral rounded-md duration-100 hover:bg-slate-200 dark:hover:bg-neutral-700"
         >
           <FontAwesomeIcon icon={faChevronLeft} className="w-5 h-5" />
         </Link>
diff --git a/pages/subscribe.tsx b/pages/subscribe.tsx
index f85aea2..9f2ef00 100644
--- a/pages/subscribe.tsx
+++ b/pages/subscribe.tsx
@@ -77,9 +77,7 @@ export default function Subscribe() {
         <div className="flex flex-col gap-2 justify-center items-center">
           <p className="text-3xl">
             ${plan === Plan.monthly ? "4" : "3"}
-            <span className="text-base text-gray-500 dark:text-gray-400">
-              /mo
-            </span>
+            <span className="text-base text-neutral">/mo</span>
           </p>
           <p className="font-semibold">
             Billed {plan === Plan.monthly ? "Monthly" : "Yearly"}
@@ -108,7 +106,7 @@ export default function Subscribe() {
 
         <div
           onClick={() => signOut()}
-          className="w-fit mx-auto cursor-pointer text-gray-500 dark:text-gray-400 font-semibold "
+          className="w-fit mx-auto cursor-pointer text-neutral font-semibold "
         >
           Sign Out
         </div>
diff --git a/pages/tags/[id].tsx b/pages/tags/[id].tsx
index 276f28e..0afff45 100644
--- a/pages/tags/[id].tsx
+++ b/pages/tags/[id].tsx
@@ -127,7 +127,7 @@ export default function Index() {
                       <FontAwesomeIcon
                         icon={faCheck}
                         id="expand-dropdown"
-                        className="w-5 h-5 text-gray-500 dark:text-gray-300"
+                        className="w-5 h-5 text-neutral"
                       />
                     </div>
                     <div
@@ -138,7 +138,7 @@ export default function Index() {
                       <FontAwesomeIcon
                         icon={faXmark}
                         id="expand-dropdown"
-                        className="w-5 h-5 text-gray-500 dark:text-gray-300"
+                        className="w-5 h-5 text-neutral"
                       />
                     </div>
                   </form>
@@ -157,7 +157,7 @@ export default function Index() {
                       <FontAwesomeIcon
                         icon={faEllipsis}
                         id="expand-dropdown"
-                        className="w-5 h-5 text-gray-500 dark:text-gray-300"
+                        className="w-5 h-5 text-neutral"
                       />
                     </div>
 
@@ -202,7 +202,7 @@ export default function Index() {
               <FontAwesomeIcon
                 icon={faSort}
                 id="sort-dropdown"
-                className="w-5 h-5 text-gray-500 dark:text-gray-300"
+                className="w-5 h-5 text-neutral"
               />
             </div>