diff --git a/apps/webapp/app/globals.css b/apps/webapp/app/globals.css
index 506d99774..d7762a974 100644
--- a/apps/webapp/app/globals.css
+++ b/apps/webapp/app/globals.css
@@ -29,7 +29,7 @@
 
     --accent: 319.38, 80.67%, 53.33%;
     --accent-foreground: 0, 0%, 98%;
-    --accent-secondary: 261, 29%, 56%;
+    --accent-500: 261, 29%, 56%;
 
     --destructive: 0, 62.8%, 30.6%;
     --destructive-foreground: 0, 85.7%, 97.3%;
@@ -78,7 +78,7 @@
 
     --accent: 319.38, 80.67%, 53.33%;
     --accent-foreground: 0, 0%, 98%;
-    --accent-secondary: 261, 29%, 56%;
+    --accent-500: 261, 29%, 56%;
 
     --destructive: 0, 62.8%, 30.6%;
     --destructive-foreground: 0, 85.7%, 97.3%;
@@ -314,7 +314,7 @@ iframe[title="reCAPTCHA"],
 
 /* Subheading in About - Security - Whitepaper */
 .sectionsSubheading {
-  @apply text-start text-2xl font-medium leading-[42.35px] text-[#ff51ed] md:text-[2.188rem];
+  @apply text-start text-2xl font-medium leading-[42.35px] text-accent-400 md:text-[2.188rem];
 }
 
 .heading2 {
diff --git a/apps/webapp/components/dialogs/session/session-button.tsx b/apps/webapp/components/dialogs/session/session-button.tsx
index 5026f1a7d..e362d915d 100644
--- a/apps/webapp/components/dialogs/session/session-button.tsx
+++ b/apps/webapp/components/dialogs/session/session-button.tsx
@@ -69,7 +69,7 @@ export function SessionButton() {
           </PopoverTrigger>
           <PopoverContent
             align="end"
-            className="w-44 border-[#845BBF] bg-background text-center"
+            className="w-44 border-accent-500 bg-background text-center"
           >
             <ul className="flex flex-col gap-5 py-2">
               {/* biome-ignore lint/a11y/useKeyWithClickEvents: not needed rn */}
diff --git a/apps/webapp/components/layout/footer/newsletter.tsx b/apps/webapp/components/layout/footer/newsletter.tsx
index 4b0f69209..fd9290f86 100644
--- a/apps/webapp/components/layout/footer/newsletter.tsx
+++ b/apps/webapp/components/layout/footer/newsletter.tsx
@@ -11,8 +11,8 @@ import Link from 'next/link'
 import { useEffect } from 'react'
 import { useFormStatus } from 'react-dom'
 import {
-  GoogleReCaptcha,
-  GoogleReCaptchaProvider,
+    GoogleReCaptcha,
+    GoogleReCaptchaProvider,
 } from 'react-google-recaptcha-v3'
 import { useForm } from 'react-hook-form'
 import { useSetState } from 'react-use'
@@ -195,10 +195,10 @@ function DiscordButton() {
           variant: 'outline',
           radius: 'full',
         }),
-        'size-14 border-transparent p-3.5 md:border-accent-secondary lg:size-14',
+        'size-14 border-transparent p-3.5 md:border-accent-500 lg:size-14',
       )}
     >
-      <IconDiscord className={'block size-full fill-accent-secondary'} />
+      <IconDiscord className={'block size-full fill-accent-500'} />
       <span className="sr-only">Discord</span>
     </Link>
   )
diff --git a/apps/webapp/components/routes/home/auction-card-buttons.tsx b/apps/webapp/components/routes/home/auction-card-buttons.tsx
index 563570be8..f7c616f4c 100644
--- a/apps/webapp/components/routes/home/auction-card-buttons.tsx
+++ b/apps/webapp/components/routes/home/auction-card-buttons.tsx
@@ -4,10 +4,10 @@ import { ExternalLinkButton } from '@/components/nextjs/button-link'
 import { NestedLinkButton } from '@/components/nextjs/nested-link'
 import { Button, buttonVariants } from '@/components/ui/button'
 import {
-  IconDiscord,
-  IconDownRightArrow,
-  IconTelegram,
-  IconTwitterX,
+    IconDiscord,
+    IconDownRightArrow,
+    IconTelegram,
+    IconTwitterX,
 } from '@/components/ui/icons'
 import { cn } from '@/lib/utils'
 import { Suspense } from 'react'
@@ -57,7 +57,7 @@ export function AuctionCardButtons({ project }: { project: Project }) {
                 className={buttonLinkClassName}
                 data-title={`${title}´s ${socialTitle}`}
               >
-                <Icon className="size-7 fill-accent-secondary" />
+                <Icon className="size-7 fill-accent-500" />
               </Button>
             }
           >
@@ -71,7 +71,7 @@ export function AuctionCardButtons({ project }: { project: Project }) {
               className={buttonLinkClassName}
               data-title={`${title}´s ${socialTitle}`}
             >
-              <Icon className="size-7 fill-accent-secondary" />
+              <Icon className="size-7 fill-accent-500" />
             </ExternalLinkButton>
           </Suspense>
         ))}
diff --git a/apps/webapp/components/routes/home/hero/index.tsx b/apps/webapp/components/routes/home/hero/index.tsx
index 1221929e3..7c0a400d9 100644
--- a/apps/webapp/components/routes/home/hero/index.tsx
+++ b/apps/webapp/components/routes/home/hero/index.tsx
@@ -20,13 +20,13 @@ export function NewHomeHero() {
           <h1 className="heroHeading">
             <Balancer>
               EARLY ACCESS TO <br />
-              THE NEXT <span className="text-pink-500">GLOBAL</span> <br />
-              <span className="text-pink-500">AI UNICORNS</span>
+              THE NEXT <span className="text-accent-400">GLOBAL</span> <br />
+              <span className="text-accent-400">AI UNICORNS</span>
             </Balancer>
           </h1>
         </div>
         <div className="relative mt-16 lg:ml-16 lg:mt-0">
-          <div className="absolute inset-0 m-auto h-[300px] w-[300px] rounded-full bg-pink-500 sm:h-[400px] sm:w-[400px]"></div>
+          <div className="absolute inset-0 m-auto h-[300px] w-[300px] rounded-full bg-accent-400 sm:h-[400px] sm:w-[400px]"></div>
           <Image
             src="/images/home/horse.png"
             alt="AI Unicorn"
diff --git a/apps/webapp/components/routes/home/hero/old-home-hero.tsx b/apps/webapp/components/routes/home/hero/old-home-hero.tsx
index 154fd93f6..85a752aec 100644
--- a/apps/webapp/components/routes/home/hero/old-home-hero.tsx
+++ b/apps/webapp/components/routes/home/hero/old-home-hero.tsx
@@ -19,7 +19,7 @@ export function HomeHero({
         >
           {dict.home.title.split('AI/WEB3')[0]}{' '}
           <span className="!text-[#E94FB8]">
-            AI <span className="font-light !text-[#845BBF]">/</span> WEB3
+            AI <span className="font-light !text-accent-500">/</span> WEB3
           </span>
           {'\n'}
           {dict.home.title.split('AI/WEB3')[1]}
diff --git a/apps/webapp/components/routes/home/motion-figcaption.tsx b/apps/webapp/components/routes/home/motion-figcaption.tsx
index 144493c78..be9806b43 100644
--- a/apps/webapp/components/routes/home/motion-figcaption.tsx
+++ b/apps/webapp/components/routes/home/motion-figcaption.tsx
@@ -10,7 +10,7 @@ const figcaptionVariants = cva(
     variants: {
       color: {
         default: 'bg-[#262626]',
-        comingSoon: 'bg-[#ff51ed]',
+        comingSoon: 'bg-accent-400',
         open: 'bg-[#70be33]',
       },
       size: {
diff --git a/apps/webapp/components/routes/project/copy-shorlink.tsx b/apps/webapp/components/routes/project/copy-shorlink.tsx
index 4288e5d5f..a36d2721c 100644
--- a/apps/webapp/components/routes/project/copy-shorlink.tsx
+++ b/apps/webapp/components/routes/project/copy-shorlink.tsx
@@ -98,9 +98,9 @@ export function CopyShortlinkIcon() {
 
 const iconsMap = {
   loading: (
-    <LucideLoader2 size={26} className="animate-spin stroke-accent-secondary" />
+    <LucideLoader2 size={26} className="animate-spin stroke-accent-500" />
   ),
   copied: <LucideCheck size={26} className="stroke-success" />,
   error: <LucideX size={26} className="stroke-destructive" />,
-  default: <LucideShare size={26} className="stroke-accent-secondary" />,
+  default: <LucideShare size={26} className="stroke-accent-500" />,
 }
diff --git a/apps/webapp/components/routes/project/presale/presale-deposit-card.tsx b/apps/webapp/components/routes/project/presale/presale-deposit-card.tsx
index 3a0763c8c..d15a12cd2 100644
--- a/apps/webapp/components/routes/project/presale/presale-deposit-card.tsx
+++ b/apps/webapp/components/routes/project/presale/presale-deposit-card.tsx
@@ -7,17 +7,17 @@ import { Button, buttonVariants } from '@/components/ui/button'
 import { CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 import { Input } from '@/components/ui/input'
 import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
 } from '@/components/ui/select'
 import { useSession } from '@/hooks/use-session'
 import { useSigningRequest } from '@/hooks/use-signing-request'
 import {
-  genBitusdDepositSigningRequest,
-  genUsdtDepositSigningRequest,
+    genBitusdDepositSigningRequest,
+    genUsdtDepositSigningRequest,
 } from '@/lib/eos'
 import type { ProjectWithAuction } from '@/lib/projects'
 import { cn } from '@/lib/utils'
@@ -178,7 +178,7 @@ function PresaleDeposit() {
               variant: 'outline',
               radius: 'full',
             }),
-            'h-auto w-full whitespace-normal border border-solid border-accent-secondary bg-background px-10 py-2',
+            'h-auto w-full whitespace-normal border border-solid border-accent-500 bg-background px-10 py-2',
           )}
           onClick={deposit}
         >
diff --git a/apps/webapp/components/routes/project/project-info.tsx b/apps/webapp/components/routes/project/project-info.tsx
index 92115fb25..cbe65e550 100644
--- a/apps/webapp/components/routes/project/project-info.tsx
+++ b/apps/webapp/components/routes/project/project-info.tsx
@@ -73,7 +73,7 @@ export function ProjectInfo({
                 <ListItem {...item} />
 
                 {ik < items.length - 1 && (
-                  <hr className="w-full my-2 border-accent-secondary/50" />
+                  <hr className="w-full my-2 border-accent-500/50" />
                 )}
               </Fragment>
             ))}
diff --git a/apps/webapp/components/routes/project/project-share.tsx b/apps/webapp/components/routes/project/project-share.tsx
index 58e0bb614..721a0bbdc 100644
--- a/apps/webapp/components/routes/project/project-share.tsx
+++ b/apps/webapp/components/routes/project/project-share.tsx
@@ -19,7 +19,7 @@ export function ProjectShare({ project }: { project: Project }) {
           target="_blank"
           rel="noopener noreferrer"
         >
-          <IconTwitterX className="size-6 fill-accent-secondary" />
+          <IconTwitterX className="size-6 fill-accent-500" />
         </Link>
         <Link
           key={'share-discord'}
@@ -31,7 +31,7 @@ export function ProjectShare({ project }: { project: Project }) {
           target="_blank"
           rel="noopener noreferrer"
         >
-          <IconDiscord className="size-7 fill-accent-secondary" />
+          <IconDiscord className="size-7 fill-accent-500" />
         </Link>
         <Link
           key={'share-telegram'}
@@ -45,7 +45,7 @@ export function ProjectShare({ project }: { project: Project }) {
           target="_blank"
           rel="noopener noreferrer"
         >
-          <IconTelegram className="size-7 fill-accent-secondary" />
+          <IconTelegram className="size-7 fill-accent-500" />
         </Link>
 
         <CopyShortlinkIcon key={'share-shortlink'} />
diff --git a/apps/webapp/components/routes/project/register-address-form.tsx b/apps/webapp/components/routes/project/register-address-form.tsx
index 6206fdcd5..cd92e2836 100644
--- a/apps/webapp/components/routes/project/register-address-form.tsx
+++ b/apps/webapp/components/routes/project/register-address-form.tsx
@@ -1,9 +1,9 @@
 'use client'
 import { registerAddress } from '@/app/actions/general'
 import {
-  Button,
-  type ButtonProps,
-  buttonVariants,
+    Button,
+    type ButtonProps,
+    buttonVariants,
 } from '@/components/ui/button'
 import { useSession } from '@/hooks/use-session'
 import { cn } from '@/lib/utils'
@@ -100,7 +100,7 @@ function RegisterButton(props: ButtonProps & { text: string }) {
           variant: 'outline',
           radius: 'full',
         }),
-        'flex h-auto whitespace-normal border border-solid border-accent-secondary bg-background px-5',
+        'flex h-auto whitespace-normal border border-solid border-accent-500 bg-background px-5',
       )}
       {...props}
     >
diff --git a/apps/webapp/components/routes/wallet/deposit-card.tsx b/apps/webapp/components/routes/wallet/deposit-card.tsx
index cc3b50b6d..75bf594f1 100644
--- a/apps/webapp/components/routes/wallet/deposit-card.tsx
+++ b/apps/webapp/components/routes/wallet/deposit-card.tsx
@@ -2,26 +2,26 @@
 
 import { Button, buttonVariants } from '@/components/ui/button'
 import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
+    Card,
+    CardContent,
+    CardDescription,
+    CardFooter,
+    CardHeader,
+    CardTitle,
 } from '@/components/ui/card'
 import { Input } from '@/components/ui/input'
 import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
 } from '@/components/ui/select'
 import { useSigningRequest } from '@/hooks/use-signing-request'
 import { appConfig } from '@/lib/config'
 import {
-  genBitusdDepositSigningRequest,
-  genUsdtDepositSigningRequest,
+    genBitusdDepositSigningRequest,
+    genUsdtDepositSigningRequest,
 } from '@/lib/eos'
 import { cn } from '@/lib/utils'
 import type { EVMTokenContractData } from '@repo/contracts'
@@ -141,7 +141,7 @@ export function DepositCard() {
               variant: 'outline',
               radius: 'full',
             }),
-            'h-auto w-full whitespace-normal border border-solid border-accent-secondary bg-background px-10 py-2',
+            'h-auto w-full whitespace-normal border border-solid border-accent-500 bg-background px-10 py-2',
           )}
           onClick={deposit}
           disabled
diff --git a/apps/webapp/components/routes/wallet/withdraw-card.tsx b/apps/webapp/components/routes/wallet/withdraw-card.tsx
index 46626e910..f12f9aef3 100644
--- a/apps/webapp/components/routes/wallet/withdraw-card.tsx
+++ b/apps/webapp/components/routes/wallet/withdraw-card.tsx
@@ -2,19 +2,19 @@
 
 import { Button, buttonVariants } from '@/components/ui/button'
 import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
+    Card,
+    CardContent,
+    CardDescription,
+    CardFooter,
+    CardHeader,
+    CardTitle,
 } from '@/components/ui/card'
 import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
 } from '@/components/ui/select'
 import { cn } from '@/lib/utils'
 import { TestnetUSDCred } from '@repo/contracts'
@@ -92,7 +92,7 @@ export function WithdrawCard() {
               variant: 'outline',
               radius: 'full',
             }),
-            'h-auto w-full whitespace-normal border border-solid border-accent-secondary bg-background px-10 py-2',
+            'h-auto w-full whitespace-normal border border-solid border-accent-500 bg-background px-10 py-2',
           )}
           // disabled={!session?.account}
           onClick={withdraw}
diff --git a/apps/webapp/components/shared/banner.tsx b/apps/webapp/components/shared/banner.tsx
index 847cc70d2..4750a594d 100644
--- a/apps/webapp/components/shared/banner.tsx
+++ b/apps/webapp/components/shared/banner.tsx
@@ -3,7 +3,7 @@ export function Banner() {
     <section className="w-full gap-20">
       <div className="inline-flex flex-col items-center justify-start gap-[37px]">
         <h2 className="text-center heading2">{content.title}</h2>
-        <div className="h-[2.37px] w-[118.61px] bg-[#ff51ed]"></div>
+        <div className="h-[2.37px] w-[118.61px] bg-accent-400"></div>
         <div className="narrow-container">
           <p className="paragraph text-center text-[15px] font-normal">
             {content.paragraph}
diff --git a/apps/webapp/components/shared/content.tsx b/apps/webapp/components/shared/content.tsx
index 53aa35cb4..46e73aae1 100644
--- a/apps/webapp/components/shared/content.tsx
+++ b/apps/webapp/components/shared/content.tsx
@@ -20,7 +20,7 @@ export function PageContent({ data }: { data: PageContentData }) {
               >
                 <Balancer>
                   {item.text}
-                  <div className="w-1/4 h-[2.37px] bg-[#ff51ed] my-4 m-auto" />
+                  <div className="w-1/4 h-[2.37px] bg-accent-400 my-4 m-auto" />
                 </Balancer>
               </item.type>
             )
diff --git a/apps/webapp/components/shared/section.tsx b/apps/webapp/components/shared/section.tsx
index 14e6da22f..c5ed72faf 100644
--- a/apps/webapp/components/shared/section.tsx
+++ b/apps/webapp/components/shared/section.tsx
@@ -7,7 +7,7 @@ export function Section({ heading, children }: SectionProps) {
       <h2 className="relative z-10 flex justify-center w-full pb-10 text-center shadow-sm heading">
         <Balancer>{heading}</Balancer>
       </h2>
-      <div className="m-auto mb-4 h-[2.37px] w-[118.61px] bg-[#ff51ed]" />
+      <div className="m-auto mb-4 h-[2.37px] w-[118.61px] bg-accent-400" />
       <div className="w-full pt-10">{children}</div>
     </section>
   )
diff --git a/apps/webapp/components/ui/button.tsx b/apps/webapp/components/ui/button.tsx
index 3ac8c72ef..bc394316c 100644
--- a/apps/webapp/components/ui/button.tsx
+++ b/apps/webapp/components/ui/button.tsx
@@ -18,7 +18,7 @@ const buttonVariants = cva(
         destructive:
           'bg-destructive text-destructive-foreground hover:bg-destructive/90 dark:bg-destructive dark:text-destructive-foreground dark:hover:bg-destructive/90',
         outline:
-          'border border-accent-secondary bg-transparent hover:bg-accent-foreground focus-within:bg-accent-foreground hover:text-black/90 focus-within:text-black/90',
+          'border border-accent-500 bg-transparent hover:bg-accent-foreground focus-within:bg-accent-foreground hover:text-black/90 focus-within:text-black/90',
         ghost: 'bg-transparent',
         link: 'text-link underline-offset-4 hover:underline',
       },
diff --git a/apps/webapp/tailwind.config.js b/apps/webapp/tailwind.config.js
index 34680e6f0..922456174 100644
--- a/apps/webapp/tailwind.config.js
+++ b/apps/webapp/tailwind.config.js
@@ -60,6 +60,13 @@ module.exports = {
           600: '#9A9EFC',
         },
         tertiary: { blue: '#0000EE' },
+        accent: {
+          DEFAULT: 'hsla(var(--accent))',
+          foreground: 'hsla(var(--accent-foreground))',
+          400: '#FF51ED',
+          500: '#845BBF',
+          600: '#433974',
+        },
         destructive: {
           DEFAULT: 'hsla(var(--destructive))',
           foreground: 'hsla(var(--destructive-foreground))',
@@ -72,11 +79,6 @@ module.exports = {
           DEFAULT: 'hsla(var(--muted))',
           foreground: 'hsla(var(--muted-foreground))',
         },
-        accent: {
-          DEFAULT: 'hsla(var(--accent))',
-          foreground: 'hsla(var(--accent-foreground))',
-          secondary: 'hsla(var(--accent-secondary))',
-        },
         popover: {
           DEFAULT: 'hsla(var(--popover))',
           foreground: 'hsla(var(--popover-foreground))',