diff --git a/components/BackToTop/BackToTopButton.tsx b/components/BackToTop/BackToTopButton.tsx
index 2d43e630b..d84886b99 100644
--- a/components/BackToTop/BackToTopButton.tsx
+++ b/components/BackToTop/BackToTopButton.tsx
@@ -40,7 +40,7 @@ export const BackToTopButton = () => {
     return null
   }
 
-  const buttonClasses = `focus:animate-button-press rounded-full border border-white bg-violet-600 p-4 text-white shadow-xl duration-300 transition-colors focus:ring group-hover:border-dashed group-hover:border-violet-400 group-hover:bg-white dark:drop-shadow-[5px_5px_8px_rgba(124,58,237,0.25)] dark:group-hover:bg-[#101623] md:border-violet-600 ${
+  const buttonClasses = `focus:animate-button-press rounded-full border border-white bg-[--primary-100] p-4 text-white shadow-xl duration-300 transition-colors focus:ring group-hover:border-dashed group-hover:border-[--primary-60] group-hover:bg-white dark:drop-shadow-[5px_5px_8px_rgba(124,58,237,0.25)] dark:group-hover:bg-[#101623] md:border-[--primary-100] ${
     status === 'preEnter' || status === 'exiting'
       ? 'opacity-0 translate-y-3'
       : ''
@@ -53,7 +53,7 @@ export const BackToTopButton = () => {
         onClick={handleClick}
         title="Back to top"
       >
-        <FaArrowUp className="group-hover:text-violet-500" />
+        <FaArrowUp className="group-hover:text-[--primary-80]" />
       </button>
       <span className="absolute left-1/2 top-1/2 -z-10 hidden -translate-x-1/2 -translate-y-1/2 rotate-0 text-2xl transition-all duration-100 ease-in-out group-hover:ml-8 group-hover:block group-hover:rotate-45">
         👾
diff --git a/components/Cards/Card.tsx b/components/Cards/Card.tsx
index 9b2925bff..d4b1c2396 100644
--- a/components/Cards/Card.tsx
+++ b/components/Cards/Card.tsx
@@ -16,17 +16,17 @@ const Card: FC<CardProps> = ({ data }) => {
     if (descriptionRef.current) {
       setIsOverflow(
         descriptionRef.current.scrollHeight >
-          descriptionRef.current.offsetHeight
+        descriptionRef.current.offsetHeight
       )
     }
   }, [])
 
   return (
-    <article className="z-10 h-full w-full rounded-3xl border border-dashed border-violet-500 dark:border-violet-400 bg-gray-100 shadow-lg dark:bg-gray-900 dark:text-gray-300 dark:shadow-sm">
+    <article className="z-10 h-full w-full rounded-3xl border border-dashed border-[--primary-80] dark:[--primary-60] bg-[--background] shadow-lg dark:[--background-dark] dark:text-[--secondary-40] dark:shadow-sm">
       <div className="card-body">
         <header className="flex justify-between items-center">
           <h2
-            className="cursor-default md:truncate ... text-xl text-violet-600 dark:text-violet-400"
+            className="cursor-default md:truncate ... text-xl text-[--primary-100] dark:text-[--primary-60]"
             title={name}
           >
             {name}
@@ -41,7 +41,7 @@ const Card: FC<CardProps> = ({ data }) => {
             {description}
           </div>
           {isOverflow && (
-            <p className="text-sm underline text-violet-600 dark:text-violet-400 text-right hover:text-violet-400 dark:hover:text-violet-300">
+            <p className="text-sm underline text-[--primary-100] dark:text-[--primary-60] text-right hover:text-[--primary-60] dark:hover:text-[primary-40]">
               Read More
             </p>
           )}
@@ -53,7 +53,7 @@ const Card: FC<CardProps> = ({ data }) => {
             target="_blank"
             rel="noopener noreferrer"
             className={
-              'mt-2 flex w-full items-center justify-center gap-2 rounded-2xl border border-dashed border-transparent bg-violet-600 px-6 py-2 text-center text-white duration-100 hover:border-violet-400 hover:bg-transparent hover:text-violet-500 dark:hover:text-violet-400'
+              'mt-2 flex w-full items-center justify-center gap-2 rounded-2xl border border-dashed border-transparent bg-[--primary-100] px-6 py-2 text-center text-white duration-100 hover:border-[--primary-60] hover:bg-transparent hover:text-[--primary-80] dark:hover:text-[--primary-60]'
             }
           >
             Visit site
diff --git a/components/CopyToClipboard/CopyToClipboard.tsx b/components/CopyToClipboard/CopyToClipboard.tsx
index 0705c066f..559747c31 100644
--- a/components/CopyToClipboard/CopyToClipboard.tsx
+++ b/components/CopyToClipboard/CopyToClipboard.tsx
@@ -18,11 +18,11 @@ export const CopyToClipboard = ({ url }: CopyToClipboardProps): JSX.Element => {
     <div className="dropdown dropdown-left dropdown-hover">
       <FaRegCopy
         size={'1.3rem'}
-        className="text-violet-500 cursor-pointer"
+        className="text-[--primary-80] cursor-pointer"
         title="Copy link"
         onClick={(e) => handleCopy(e)}
       />
-      <p className="dropdown-content bg-violet-500 text-white text-sm rounded-lg p-1.5 cursor-default">
+      <p className="dropdown-content bg-[--primary-80] text-white text-sm rounded-lg p-1.5 cursor-default">
         {success ? 'Copied!' : 'Copy'}
       </p>
     </div>
diff --git a/components/Footer/Footer.tsx b/components/Footer/Footer.tsx
index cb36f6a14..7e867ae75 100644
--- a/components/Footer/Footer.tsx
+++ b/components/Footer/Footer.tsx
@@ -7,12 +7,12 @@ export const Footer: FC = () => {
   const isDarkMode = resolvedTheme === 'dark'
 
   const nameStyles = `underline ${
-    isDarkMode ? 'text-gray-200' : 'text-violet-700'
+    isDarkMode ? 'text-[--secondary-20]' : 'text-violet-700'
   } `
 
   return (
     <footer className="z-10 mb-4 flex w-full items-baseline justify-center rounded-lg py-2 backdrop-blur-md sm:py-3">
-      <p className="leading-7 tracking-wide text-center text-black dark:text-violet-400">
+      <p className="leading-7 tracking-wide text-center text-black dark:text-[--primary-60]">
         <span>&copy; {new Date().getFullYear()} LinksHub | </span>
         Developed by{' '}
         <Link
diff --git a/components/ForkButton/GitHubForkButton.tsx b/components/ForkButton/GitHubForkButton.tsx
index b1b68054d..e88a022ce 100644
--- a/components/ForkButton/GitHubForkButton.tsx
+++ b/components/ForkButton/GitHubForkButton.tsx
@@ -20,7 +20,7 @@ export const GitHubForkButton: FC<{ repo: string }> = ({ repo }) => {
     fetchForkCount()
   }, [repo])
 
-  // Other Styles for Light Mode: [bg-violet-500 text-white] OR [text-black-500 border border-black]
+  // Other Styles for Light Mode: [bg-[--primary-80] text-white] OR [text-black-500 border border-black]
 
   return (
     <Link
@@ -32,9 +32,9 @@ export const GitHubForkButton: FC<{ repo: string }> = ({ repo }) => {
     >
       <div 
         className={
-          `${`inline-flex items-center px-4 py-1 text-sm font-semibold bg-transparent text-violet-500 border 
-            border-violet-500 border-transparent rounded-sm transition-colors shadow-md transition duration-300
-            ease-in-out hover:text-black hover:border-black dark:hover:text-gray-300 dark:hover:border-gray-300`
+          `${`inline-flex items-center px-4 py-1 text-sm font-semibold bg-transparent text-[--primary-80] border 
+            border-[--primary-80] border-transparent rounded-sm transition-colors shadow-md transition duration-300
+            ease-in-out hover:text-black hover:border-black dark:hover:text-[--secondary-40] dark:hover:border-[--secondary-40]`
             }`
         }
       >
diff --git a/components/Header/Header.tsx b/components/Header/Header.tsx
index e7f92804f..dd68518f5 100644
--- a/components/Header/Header.tsx
+++ b/components/Header/Header.tsx
@@ -12,17 +12,17 @@ export const Header: FC<{}> = () => {
 
   return (
     <header className="fixed top-0 left-0 z-30 row-start-1 row-end-2 flex h-[76px] w-screen items-center justify-between">
-      <div className="bg-base-200 h-full w-fit flex-none px-6 py-4 dark:bg-gray-900 lg:w-[290px]">
+      <div className="bg-base-200 h-full w-fit flex-none px-6 py-4 dark:bg-[--secondary-200] lg:w-[290px]">
         <Link href="/">
           <Logo className="text-3xl" />
         </Link>
       </div>
-      <div className="bg-base-200 relative h-full grow px-8 dark:bg-gray-900 lg:bg-gray-100 lg:dark:bg-[#101623]">
+      <div className="bg-base-200 relative h-full grow px-8 dark:bg-[--secondary-200] lg:bg-[--secondary-10] lg:dark:bg-[--dark-background]">
         <TopBar className="absolute left-8 hidden h-full md:flex" />
         <div className="absolute right-8 flex h-full gap-4">
           <SocialMediaIconsList className="hidden lg:flex" />
           <ThemeToggler />
-          <button className="dark:text-gray-300 lg:hidden" onClick={toggleNav}>
+          <button className="dark:text-[--secondary-40] lg:hidden" onClick={toggleNav}>
             <AiOutlineMenu size={24} />
           </button>
         </div>
diff --git a/components/MainContainer/MainContainer.tsx b/components/MainContainer/MainContainer.tsx
index f67a2953f..f4064d49d 100644
--- a/components/MainContainer/MainContainer.tsx
+++ b/components/MainContainer/MainContainer.tsx
@@ -3,9 +3,9 @@ import React from 'react'
 export const MainContainer = () => {
   return (
     <div className="min-h-screen flex flex-row items-center justify-center">
-      <h2 className="text-6xl font-bold text-violet-200">
-        <span className="border-b-8 border-violet-500">Links</span>
-        <span className="text-violet-500">Hub</span>
+      <h2 className="text-6xl font-bold text-[--primary-20]">
+        <span className="border-b-8 border-[--primary-80]">Links</span>
+        <span className="text-[--primary-80]">Hub</span>
       </h2>
       <p className="uppercase font-semibold text-xl mt-6">...coming soon</p>
     </div>
diff --git a/components/NewIssue/NewIssue.tsx b/components/NewIssue/NewIssue.tsx
index 5a5ed0d8f..24273412a 100644
--- a/components/NewIssue/NewIssue.tsx
+++ b/components/NewIssue/NewIssue.tsx
@@ -6,7 +6,7 @@ const NewIssue: FC<{}> = () => {
       <span className="text-2xl">
         Be the first to add by creating a GitHub issue
       </span>{' '}
-      <span className="motion-safe:animate-pulse text-2xl text-purple-500">
+      <span className="motion-safe:animate-pulse text-2xl text-[--primary-80]">
         <a
           href="https://github.com/rupali-codes/LinksHub/issues/new?assignees=&labels=add+link&template=add_link.yml&title=%5BAdd%5D+%3Cname%3E"
           target="_blank"
diff --git a/components/Searchbar/Searchbar.tsx b/components/Searchbar/Searchbar.tsx
index e6f5137eb..fde4b21e9 100644
--- a/components/Searchbar/Searchbar.tsx
+++ b/components/Searchbar/Searchbar.tsx
@@ -35,12 +35,12 @@ export const Searchbar: React.FC<SearchbarProps> = ({ setSearch }) => {
       <div className="flex items-center">
         <div className="relative flex items-center">
           {/* <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
-            <SearchIcon className="w-5 h-5 text-violet-600 dark:text-violet-400" />
+            <SearchIcon className="w-5 h-5 text-[--primary-100] dark:text-[--primary-60]" />
           </div> */}
           <input
             type="text"
             id="simple-search"
-            className="block p-2.5 w-full bg-transparent text-sm text-gray-900 dark:text-gray-200 border border-dashed border-gray-400 dark:border-gray-500 focus:border-violet-500 dark:focus:border-violet-500 dark:focus:ring-violet-500 focus:ring-violet-500 dark:placeholder-gray-400 outline-none transition-all ease-in-out duration-300 rounded-lg"
+            className="block p-2.5 w-full bg-transparent text-sm text-[--secondary-200] dark:text-[--secondary-20] border border-dashed border-[--secondary-60] dark:border-[--secondary-80] focus:border-[--primary-80] dark:focus:border-[--primary-80] dark:focus:ring-[--primary-80] focus:ring-[--primary-80] dark:placeholder-[--secondary-60] outline-none transition-all ease-in-out duration-300 rounded-lg"
             placeholder="Start searching..."
             value={searchQuery}
             onChange={handleSearchChange}
@@ -49,7 +49,7 @@ export const Searchbar: React.FC<SearchbarProps> = ({ setSearch }) => {
         </div>
         <button
           type="submit"
-          className="ml-2 px-4 py-2.5 bg-violet-500 text-white rounded-md border border-dashed border-transparent hover:border-violet-400 hover:bg-transparent hover:text-violet-400 dark:hover:text-violet-400"
+          className="ml-2 px-4 py-2.5 bg-[--primary-80] text-white rounded-md border border-dashed border-transparent hover:border-[--primary-60] hover:bg-transparent hover:text-[--primary-60] dark:hover:text-[--primary-60]"
         >
           <SearchIcon className="w-5 h-5" />
         </button>
diff --git a/components/SideNavbar/SideNavbar.tsx b/components/SideNavbar/SideNavbar.tsx
index 1441cc1be..abdb20aac 100644
--- a/components/SideNavbar/SideNavbar.tsx
+++ b/components/SideNavbar/SideNavbar.tsx
@@ -26,7 +26,7 @@ export const SideNavbar: FC<{}> = () => {
           `}
         >
           <SideNavbarHeader />
-          <SocialMediaIconsList className="bg-gray-100 px-6 py-2 dark:bg-gray-900" />
+          <SocialMediaIconsList className="bg-[--secondary-10] px-6 py-2 dark:bg-[--secondary-200]" />
           <SideNavbarBody />
         </div>,
         document.getElementById('overlay-root')!
diff --git a/components/SideNavbar/SideNavbarBody.tsx b/components/SideNavbar/SideNavbarBody.tsx
index 550d6ab0d..81cb367ee 100644
--- a/components/SideNavbar/SideNavbarBody.tsx
+++ b/components/SideNavbar/SideNavbarBody.tsx
@@ -13,11 +13,11 @@ export const SideNavbarBody: FC<{}> = () => {
   return (
     <div
       className={classNames(
-        `bg-base-200 h-full w-full overflow-x-hidden whitespace-nowrap transition-all transition-none ease-in dark:bg-gray-900 dark:text-gray-300`,
+        `bg-base-200 h-full w-full overflow-x-hidden whitespace-nowrap transition-all transition-none ease-in dark:bg-[--secondary-200] dark:text-[--secondary-40]`,
         theme === 'light' ? 'scrollColorLight' : 'scrollColorDark'
       )}
     >
-      <div className="bg-base-200 transiton-all w-full p-4 transition-none ease-in dark:bg-gray-900">
+      <div className="bg-base-200 transiton-all w-full p-4 transition-none ease-in dark:bg-[--secondary-200]">
         <Searchbar setSearch={setSearch} />
       </div>
       <SideNavbarCategoryList
diff --git a/components/SideNavbar/SideNavbarCategory.tsx b/components/SideNavbar/SideNavbarCategory.tsx
index d8818f0d8..23ddcd94a 100644
--- a/components/SideNavbar/SideNavbarCategory.tsx
+++ b/components/SideNavbar/SideNavbarCategory.tsx
@@ -23,7 +23,7 @@ export const SideNavbarCategory: FC<{
     ))
 
   return (
-    <li className="relative w-full transition-all ease-in-out text-violet-600 dark:text-violet-400 dark:bg-opacity-5 hover:text-violet-500 dark:hover:text-violet-300 rounded-md focus-visible:outline-none focus-visible:ring focus-visible:ring-violet-400">
+    <li className="relative w-full transition-all ease-in-out text-[--primary-100] dark:text-[--primary-60] dark:bg-opacity-5 hover:text-[--primary-80] dark:hover:text-[--primary-40] rounded-md focus-visible:outline-none focus-visible:ring focus-visible:ring-[--primary-60]">
       <button
         className="flex w-full cursor-pointer justify-between py-2"
         onClick={handleToggle}
@@ -40,7 +40,7 @@ export const SideNavbarCategory: FC<{
           isOpen ? 'max-h-screen' : ''
         }`}
       >
-        <ul className="relative ml-1 border-l-2 border-slate-300 dark:border-slate-700 -pl-0.5">
+        <ul className="relative ml-1 border-l-2 border-[--tertiary-5] dark:border-[--tertiary-60] -pl-0.5">
           {subcategoryList}
         </ul>
       </div>
diff --git a/components/SideNavbar/SideNavbarCategoryList.tsx b/components/SideNavbar/SideNavbarCategoryList.tsx
index cb8582f58..206dde849 100644
--- a/components/SideNavbar/SideNavbarCategoryList.tsx
+++ b/components/SideNavbar/SideNavbarCategoryList.tsx
@@ -77,7 +77,7 @@ export const SideNavbarCategoryList: FC<{
           )
         })
       ) : (
-        <div className="dark:text-gray-200 text-gray-500 text-lg text-center py-2">
+        <div className="dark:text-[--secondary-20] text-[--secondary-80] text-lg text-center py-2">
           No Links Found
         </div>
       )}
diff --git a/components/SideNavbar/SideNavbarElement.tsx b/components/SideNavbar/SideNavbarElement.tsx
index 0e4210790..d3e6ac6f0 100644
--- a/components/SideNavbar/SideNavbarElement.tsx
+++ b/components/SideNavbar/SideNavbarElement.tsx
@@ -14,12 +14,12 @@ export const SideNavbarElement = ({ name, url }: SubCategories) => {
       onClick={closeNav}
       className={`${
         router.asPath === url
-          ? 'border-l-4 border-violet-500 text-violet-700 dark:text-violet-400 '
+          ? 'border-l-4 border-[--primary-80] text-violet-700 dark:text-[--primary-60] '
           : 'text-slate-600 dark:text-slate-400'
-      } collapse w-full text-start pl-3 hover:text-violet-500 dark:hover:text-violet-300 
-      focus-visible:outline-none focus-visible:ring focus-visible:ring-violet-400 focus-visible:rounded-lg`}
+      } collapse w-full text-start pl-3 hover:text-[--primary-80] dark:hover:text-[--primary-40] 
+      focus-visible:outline-none focus-visible:ring focus-visible:ring-[--primary-60] focus-visible:rounded-lg`}
     >
-      <div className="ml-2 text-lg py-2 capitalize transition-all duration-300 hover:pl-2 dark:border-violet-500">
+      <div className="ml-2 text-lg py-2 capitalize transition-all duration-300 hover:pl-2 dark:border-[--primary-80]">
         {name}
       </div>
     </Link>
diff --git a/components/SideNavbar/SideNavbarHeader.tsx b/components/SideNavbar/SideNavbarHeader.tsx
index f7d84312d..64896670a 100644
--- a/components/SideNavbar/SideNavbarHeader.tsx
+++ b/components/SideNavbar/SideNavbarHeader.tsx
@@ -10,12 +10,12 @@ export const SideNavbarHeader: FC<{}> = (props) => {
 
   return (
     <header>
-      <div className="flex items-center justify-between bg-gray-100 p-4 dark:bg-gray-900">
+      <div className="flex items-center justify-between bg-[--secondary-10] p-4 dark:bg-[--secondary-200]">
         <Link href={'/'}>
           <Logo className="text-3xl" />
         </Link>
         <button
-          className="h-[24px] w-[24px] dark:text-gray-300 lg:hidden"
+          className="h-[24px] w-[24px] dark:text-[--secondary-40] lg:hidden"
           onClick={toggleNav}
         >
           <AiOutlineClose size={24} id="hamburger" />
diff --git a/components/SkipLink/SkipLink.tsx b/components/SkipLink/SkipLink.tsx
index cfdf439d9..3e7ff02ea 100644
--- a/components/SkipLink/SkipLink.tsx
+++ b/components/SkipLink/SkipLink.tsx
@@ -4,7 +4,7 @@ export const SkipLink: FC = () => (
   <div className="z-40 flex absolute left-1/2 transform -translate-x-1/2">
     <a
       href="#main"
-      className="-translate-y-20   focus:transform-none mt-2 flex items-center justify-center gap-2 rounded-2xl border border-dashed border-transparent bg-violet-600 px-6 py-2 text-center text-white"
+      className="-translate-y-20 focus:transform-none mt-2 flex items-center justify-center gap-2 rounded-2xl border border-dashed border-transparent bg-[--primary-100] px-6 py-2 text-center text-white"
     >
       Skip to main content
     </a>
diff --git a/components/SocialMedia/SocialMediaIconsList.tsx b/components/SocialMedia/SocialMediaIconsList.tsx
index ec3928e64..4c6136716 100644
--- a/components/SocialMedia/SocialMediaIconsList.tsx
+++ b/components/SocialMedia/SocialMediaIconsList.tsx
@@ -18,7 +18,7 @@ export const SocialMediaIconsList: FC<{ className?: string }> = (props) => {
       <li>
         <a
           title="Link to Discord server (External Link)"
-          className="dark:text-gray-300"
+          className="dark:text-[--secondary-40]"
           target="_blank"
           rel="noopener noreferrer"
           href="https://discord.com/invite/NvK67YnJX5"
@@ -34,7 +34,7 @@ export const SocialMediaIconsList: FC<{ className?: string }> = (props) => {
       <li>
         <a
           title="Link to Github project (External Link)"
-          className="dark:text-gray-300"
+          className="dark:text-[--secondary-40]"
           target="_blank"
           rel="noopener noreferrer"
           href="https://github.com/rupali-codes/LinksHub"
@@ -50,7 +50,7 @@ export const SocialMediaIconsList: FC<{ className?: string }> = (props) => {
       <li>
         <a
           title="Link to Twitter page (External Link)"
-          className="dark:text-gray-300"
+          className="dark:text-[--secondary-40]"
           target="_blank"
           rel="noopener noreferrer"
           href="https://twitter.com/linkshubdotdev"
diff --git a/components/StarButton/GitHubStarButton.tsx b/components/StarButton/GitHubStarButton.tsx
index fbe526487..6e3ea39eb 100644
--- a/components/StarButton/GitHubStarButton.tsx
+++ b/components/StarButton/GitHubStarButton.tsx
@@ -30,7 +30,7 @@ export const GitHubStarButton: FC<{ repo: string }> = ({ repo }) => {
       rel="noopener noreferrer"
       aria-label={`Star ${repo} on GitHub`}
     >
-      <div className="inline-flex items-center px-4 py-1 text-sm bg-violet-500 text-white border border-dashed border-transparent rounded-sm transition-colors shadow-md hover:bg-transparent hover:border-violet-400 hover:text-violet-400">
+      <div className="inline-flex items-center px-4 py-1 text-sm bg-[--primary-80] text-white border border-dashed border-transparent rounded-sm transition-colors shadow-md hover:bg-transparent hover:border-[--primary-60] hover:text-[--primary-80]">
         <FaStar className="mr-1" />
         <span>Star</span>
         <span className="ml-2">{starCount}</span>
diff --git a/components/ThemeToggler/themeToggler.tsx b/components/ThemeToggler/themeToggler.tsx
index 45367acf4..ca344b12e 100644
--- a/components/ThemeToggler/themeToggler.tsx
+++ b/components/ThemeToggler/themeToggler.tsx
@@ -19,7 +19,7 @@ export function ThemeToggler() {
   }
 
   const iconProps = {
-    className: 'hover:text-violet-500 transition duration-300 ease-in-out',
+    className: 'hover:text-[--primary-80] transition duration-300 ease-in-out',
     size: '1.5rem',
   }
 
@@ -29,7 +29,7 @@ export function ThemeToggler() {
       title={`Toggle dark mode (current state: ${resolvedTheme})`}
     >
       {resolvedTheme === 'dark' ? (
-        <HiSun {...iconProps} className="text-gray-200" />
+        <HiSun {...iconProps} className="text-[--secondary-20]" />
       ) : (
         <HiMoon {...iconProps} />
       )}
diff --git a/components/TopBar/TopBar.tsx b/components/TopBar/TopBar.tsx
index a40692975..7bd3678fb 100644
--- a/components/TopBar/TopBar.tsx
+++ b/components/TopBar/TopBar.tsx
@@ -33,10 +33,10 @@ export const TopBar: FC<{ className?: string | undefined }> = (props) => {
 
   return (
     <div
-      className={`flex items-center text-xl dark:text-gray-300 ${className}`}
+      className={`flex items-center text-xl dark:text-[--secondary-40] ${className}`}
     >
-      <FaSlackHash className="mr-2 text-gray-600 dark:text-gray-300" />
-      <span className="flex uppercase text-gray-900 dark:text-gray-100">
+      <FaSlackHash className="mr-2 text-[--secondary-100] dark:text-[--secondary-40]" />
+      <span className="flex uppercase text[--secondary-200] dark:text-[--secondary-10]">
         {category.split('-').join(' ')}
         <FaInfoCircle
           className="ml-4 mt-2 text-sm cursor-pointer"
diff --git a/components/logo/index.tsx b/components/logo/index.tsx
index 10a9ad9f5..c1ffa39b2 100644
--- a/components/logo/index.tsx
+++ b/components/logo/index.tsx
@@ -3,10 +3,10 @@ import React from 'react'
 const Logo = ({ className }: { className?: string }) => {
   return (
     <h1 className={`font-bold  ${className}`}>
-      <span className="border-b-4 border-violet-500 text-violet-500 dark:text-gray-200">
+      <span className="border-b-4 border-[--primary-80] text-[--primary-80] dark:text-[--secondary-20]">
         Links
       </span>
-      <span className="text-violet-500 dark:text-violet-400 motion-safe:animate-pulse">
+      <span className="text-[--primary-80] dark:text-[--primary-60] motion-safe:animate-pulse">
         Hub
       </span>
     </h1>
diff --git a/components/popup/index.tsx b/components/popup/index.tsx
index de0d07667..236e4f3b8 100644
--- a/components/popup/index.tsx
+++ b/components/popup/index.tsx
@@ -24,18 +24,18 @@ const Popup: React.FC<{
           onClick={(e) => e.stopPropagation()}
           className={`fixed left-1/2 top-1/2 z-[150] max-w-[500px] -translate-x-1/2 -translate-y-1/2 transition-all ${
             currentCard ? 'animate-scale-appearance' : 'animate-scale-hide'
-          } flex h-fit w-[90%] flex-col justify-between gap-5 overflow-hidden rounded-2xl border border-dashed border-violet-500 dark:border-violet-400 bg-gray-100 px-5 py-10 dark:bg-gray-900`}
+          } flex h-fit w-[90%] flex-col justify-between gap-5 overflow-hidden rounded-2xl border border-dashed border-[--primary-80] dark:border-[--primary-60] bg-[--secondary-10] px-5 py-10 dark:bg-[--secondary-200]`}
           role="dialog"
           title={`${currentCard?.name ?? 'Card'} Popup`}
         >
           <div className="flex flex-col gap-5">
             <div className="flex justify-between items-center">
               <div className="w-full flex justify-between items-center">
-                <h2 className="text-2xl text-violet-400 capitalize">
+                <h2 className="text-2xl text-[--primary-60] capitalize">
                   {currentCard?.name}
                 </h2>
               </div>
-              <div className="max-w-[25]%] text-xsm text-violet-500 capitalize flex items-center gap-2">
+              <div className="max-w-[25]%] text-xsm text-[--primary-80] capitalize flex items-center gap-2">
                 <CopyToClipboard url={currentCard?.url ?? ''} />
                 {currentCard?.language ? (
                   <>
@@ -55,7 +55,7 @@ const Popup: React.FC<{
               href={currentCard?.url}
               target="_blank"
               rel="noreferrer"
-              className="mt-2 px-6 py-2 text-white text-center bg-violet-600 rounded-2xl w-full hover:bg-transparent hover:text-violet-500 border border-dashed border-transparent duration-100 hover:border-violet-400  bottom-0 flex items-center justify-center bottom-0 relative"
+              className="mt-2 px-6 py-2 text-white text-center bg-[--primary-100] rounded-2xl w-full hover:bg-transparent hover:text-[--primary-80] border border-dashed border-transparent duration-100 hover:border-[--primary-60]  bottom-0 flex items-center justify-center bottom-0 relative"
             >
               Visit site
             </a>
diff --git a/components/popup/popupCategoryDesc.tsx b/components/popup/popupCategoryDesc.tsx
index 091cb8d2f..4ae4083fb 100644
--- a/components/popup/popupCategoryDesc.tsx
+++ b/components/popup/popupCategoryDesc.tsx
@@ -22,14 +22,14 @@ const PopupDesc: React.FC<{
           onClick={(e) => e.stopPropagation()}
           className={`fixed left-1/2 top-1/2 z-[150] max-w-[500px] -translate-x-1/2 -translate-y-1/2 transition-all ${
             currentCategory ? 'animate-scale-appearance' : 'animate-scale-hide'
-          } flex h-fit w-[90%] flex-col justify-between gap-5 overflow-hidden rounded-2xl border border-dashed border-violet-500 dark:border-violet-400 bg-gray-100 px-5 py-10 dark:bg-gray-900`}
+          } flex h-fit w-[90%] flex-col justify-between gap-5 overflow-hidden rounded-2xl border border-dashed border-[--primary-80] dark:border-[--primary-60] bg-[--secondary-10] px-5 py-10 dark:bg-[--secondary-200]`}
           role="dialog"
           title={`${currentCategory?.name ?? 'Card'} Popup`}
         >
           <div className="flex flex-col gap-5">
             <div className="flex justify-between items-center">
               <div className="w-full flex justify-between items-center">
-                <h2 className="max-w-[80%] text-2xl text-violet-400 capitalize">
+                <h2 className="max-w-[80%] text-2xl text-[--primary-60] capitalize">
                   {currentCategory?.name}
                 </h2>
               </div>
diff --git a/layouts/GeneralLayout.tsx b/layouts/GeneralLayout.tsx
index 49baa244f..e8d55c0fe 100644
--- a/layouts/GeneralLayout.tsx
+++ b/layouts/GeneralLayout.tsx
@@ -11,7 +11,7 @@ const GeneralLayout = ({ children }: { children: ReactNode }) => {
       <SkipLink />
       <Header />
       <SideNavbar />
-      <div className="row-start-2 row-end-3 min-h-[100vh-72px] w-full bg-gray-100 dark:bg-[#101623]">
+      <div className="row-start-2 row-end-3 min-h-[100vh-72px] w-full bg-[--secondary-10] dark:bg-[#101623]">
         <nav>
           <Aside />
         </nav>
diff --git a/pages/[subcategory]/index.tsx b/pages/[subcategory]/index.tsx
index 900ad1274..03ac446d2 100644
--- a/pages/[subcategory]/index.tsx
+++ b/pages/[subcategory]/index.tsx
@@ -27,7 +27,7 @@ const SubCategory = () => {
         <title>{title}</title>
         <meta name="theme-color" content="#202c46" />
       </Head>
-      <TopBar className="shadow-black-500/50 fixed top-[76px] z-30 flex w-full -translate-x-4 items-center bg-gray-100 px-4 pt-6 pb-4 shadow-xl dark:bg-gray-900 md:hidden" />
+      <TopBar className="shadow-black-500/50 fixed top-[76px] z-30 flex w-full -translate-x-4 items-center bg-[--secondary-10] px-4 pt-6 pb-4 shadow-xl dark:bg-[--secondary-200] md:hidden" />
       <div className="min-h-[calc(100%-68px)] w-full pt-[85px] pb-4 md:min-h-[calc(100%-76px)] md:px-10 md:pt-10">
         {content}
       </div>
diff --git a/pages/contributors.tsx b/pages/contributors.tsx
index 7cbc3f7c0..c28a44457 100644
--- a/pages/contributors.tsx
+++ b/pages/contributors.tsx
@@ -69,7 +69,7 @@ const ContributorsPage: FC<{ contributors: Contributor[] }> = ({
   )
 
   const buttonStyles =
-    'bg-violet-600 hover:bg-transparent text-white px-4 py-2 md:px-3 text-sm tracking-[.6px] rounded-md border border-dashed border-transparent duration-100 hover:border-violet-400 hover:text-violet-500 dark:hover:text-violet-400'
+    'bg-[--primary-100] hover:bg-transparent text-white px-4 py-2 md:px-3 text-sm tracking-[.6px] rounded-md border border-dashed border-transparent duration-100 hover:border-[--primary-60] hover:text-[--primary-80] dark:hover:text-[--primary-60]'
 
   const linkProps = {
     target: '_blank',
@@ -83,7 +83,7 @@ const ContributorsPage: FC<{ contributors: Contributor[] }> = ({
         {sortedContributors.map((contributor) => (
           <div
             key={contributor.id}
-            className="bg-gray-100 rounded-3xl py-5 px-2 border border-dashed border-violet-500 dark:border-violet-400 shadow-lg dark:bg-gray-900 dark:text-gray-300 dark:shadow-sm flex flex-col"
+            className="bg-[--secondary-10] rounded-3xl py-5 px-2 border border-dashed border-[--primary-80] dark:border-[--primary-60] shadow-lg dark:bg-[--secondary-200] dark:text-[--secondary-40] dark:shadow-sm flex flex-col"
           >
             <div className="flex justify-center">
               <Image
@@ -95,10 +95,10 @@ const ContributorsPage: FC<{ contributors: Contributor[] }> = ({
               />
             </div>
             <div className="text-center">
-              <div className="text-xl text-violet-600 dark:text-violet-400">
+              <div className="text-xl text-[--primary-100] dark:text-[--primary-60]">
                 {contributor.name}
               </div>
-              <div className="text-gray-400 mb-2 pb-4 pt-1">
+              <div className="text-[--secondary-60] mb-2 pb-4 pt-1">
                 {contributor.contributions} Contributions
               </div>
             </div>
diff --git a/pages/index.tsx b/pages/index.tsx
index f6a67f31d..287bbe8ac 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -44,8 +44,8 @@ export default function Home() {
               options={{
                 strings: subCategoriesNames,
                 wrapperClassName:
-                  'text-md text-violet-600 dark:text-violet-400',
-                cursorClassName: 'text-md text-violet-600 dark:text-violet-400',
+                  'text-md text-[--primary-100] dark:text-[--primary-60]',
+                cursorClassName: 'text-md text-[--primary-100] dark:text-[--primary-60]',
                 autoStart: true,
                 loop: true,
               }}
diff --git a/pages/search.tsx b/pages/search.tsx
index 30131d154..f6c640844 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -36,7 +36,7 @@ const Search = () => {
         <title>{title}</title>
         <meta name="theme-color" content="#202c46" />
       </Head>
-      <TopBar className="shadow-black-500/50 fixed top-[76px] z-30 flex w-full -translate-x-4 items-center bg-gray-100 px-4 pt-6 pb-4 shadow-xl dark:bg-gray-900 md:hidden" />
+      <TopBar className="shadow-black-500/50 fixed top-[76px] z-30 flex w-full -translate-x-4 items-center bg-[--secondary-10] px-4 pt-6 pb-4 shadow-xl dark:bg-[--secondary-200] md:hidden" />
       <div className="min-h-[calc(100%-68px)] w-full pt-[85px] pb-4 md:min-h-[calc(100%-76px)] md:px-10 md:pt-10">
         {content}
       </div>
diff --git a/styles/globals.css b/styles/globals.css
index 360b87619..390ee20a2 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -113,6 +113,28 @@ pre {
   --scroll-thumb: #bbb;
   --scroll-thumb-hover: #aaa;
   --scroll-track: #f3f4f6;
+
+  --primary-150:#5b21b6;/* violet-800 */
+  --primary-100:#7c3aed;/* violet-600 */
+  --primary-80:#8b5cf6; /* violet-500 */
+  --primary-60:#a78bfa; /* violet-400 */
+  --primary-40:#c4b5fd; /* violet-300 */
+  --primary-20:#ddd6fe; /* violet-200 */
+  --primary-10:#ede9fe; /* violet-100 */
+
+  --secondary-200:#111827; /* gray-900 */ /* background */ 
+  --secondary-100:#4b5563;  /* gray-600 */
+  --secondary-80:#6b7280;  /* gray-500 */  
+  --secondary-60:#9ca3af;  /* gray-400 */
+  --secondary-40:#d1d5db;   /* gray-300 */ /* dark: card-text */
+  --secondary-20:#e5e7eb;   /* gray-200 */
+  --secondary-10:#F3F4F6;   /* gray-100 */
+
+  --tertiary-60:#334155;  /* slate-700 */
+  --tertiary-5:#cbd5e1;  /* slate-300 */
+
+  --dark-background : #101623;
+
 }
 
 [data-theme='dark'] {