diff --git a/apps/dimentorin/src/app/(public)/(home)/_components/what-we-offer-section.tsx b/apps/dimentorin/src/app/(public)/(home)/_components/what-we-offer-section.tsx
index 1bf434e..d34080c 100644
--- a/apps/dimentorin/src/app/(public)/(home)/_components/what-we-offer-section.tsx
+++ b/apps/dimentorin/src/app/(public)/(home)/_components/what-we-offer-section.tsx
@@ -72,8 +72,8 @@ export const WhatWeOfferSection: FC = () => {
               <div
                 className="absolute bottom-0 inset-x-0 p-4 h-1/2 text-primary-50 bg-gradient-to-t from-primary-500 via-primary-500/80 flex flex-col items-center justify-end gap-y-1 md:items-start lg:px-6 lg:pb-8"
               >
-                <p className="font-semibold lg:text-[26px] lg:font-bold">{offer.title}</p>
-                <p className="text-xs lg:text-[22px] lg:font-medium">{offer.description}</p>
+                <p className="font-semibold lg:text-[23px] lg:font-bold">{offer.title}</p>
+                <p className="text-xs lg:text-[19px] lg:font-medium">{offer.description}</p>
               </div>
             </motion.div>
           )}
diff --git a/apps/dimentorin/src/app/(public)/articles/[slug]/page.tsx b/apps/dimentorin/src/app/(public)/articles/[slug]/page.tsx
index 078fb94..02184ad 100644
--- a/apps/dimentorin/src/app/(public)/articles/[slug]/page.tsx
+++ b/apps/dimentorin/src/app/(public)/articles/[slug]/page.tsx
@@ -66,7 +66,7 @@ export default function DetailArticle() {
                 {date}
               </p>
               <div
-                className="text-[10px] text-primary-600 font-medium bg-primary-200 px-3 py-1 rounded-4xl w-max mx-auto md:text-xs xl:text-[15px]"
+                className="text-[10px] text-primary-600 font-medium bg-primary-200 px-3 py-1 rounded-3xl w-max mx-auto md:text-xs xl:text-[15px]"
               >
                 {article?.category}
               </div>
diff --git a/apps/dimentorin/src/app/(public)/articles/_components/card/article.tsx b/apps/dimentorin/src/app/(public)/articles/_components/card/article.tsx
index e9bf661..f5eb6d8 100644
--- a/apps/dimentorin/src/app/(public)/articles/_components/card/article.tsx
+++ b/apps/dimentorin/src/app/(public)/articles/_components/card/article.tsx
@@ -43,7 +43,7 @@ export const ArticleCard: FC<ArticleCardProps> = ({ variant = 'default', article
       </div>
 
       <div className={cn("leading-tight", variant === "recent" && "xl:flex-1")}>
-        <div className="w-max bg-primary-200 text-primary-600 px-3 py-1 text-xs font-medium rounded-4xl mb-4 xl:mb-[15px]">
+        <div className="w-max bg-primary-200 text-primary-600 px-3 py-1 text-xs font-medium rounded-3xl mb-4 xl:mb-[15px]">
           {article?.category ?? "Artikel"}
         </div>
         <Link
@@ -51,7 +51,7 @@ export const ArticleCard: FC<ArticleCardProps> = ({ variant = 'default', article
           className={cn(
             "text-[15px] text-neutral-800 font-semibold mb-4 line-clamp-2 md:text-[19px] xl:mb-[23px]",
             variant === "featured" && "text-[19px] md:text-[23px]",
-            variant === "recent" && "mb-7 xl:text-[27px]"
+            variant === "recent" && "mb-7 xl:text-[29px]"
           )}
         >
           {title}
diff --git a/apps/dimentorin/src/app/(public)/articles/page.tsx b/apps/dimentorin/src/app/(public)/articles/page.tsx
index fd1bbb0..1a64771 100644
--- a/apps/dimentorin/src/app/(public)/articles/page.tsx
+++ b/apps/dimentorin/src/app/(public)/articles/page.tsx
@@ -107,7 +107,7 @@ export default function Components(): ReactElement {
                     variant="text"
                     onClick={() => setActiveTab(category)}
                     className={cn(
-                      "relative text-[10px] text-neutral-400 font-medium px-3 py-2 rounded-4xl md:text-xs md:font-semibold xl:text-[15px]",
+                      "relative text-[10px] text-neutral-400 font-medium px-3 py-2 rounded-3xl md:text-xs md:font-semibold xl:text-[15px]",
                       "before:w-0 before:absolute before:h-0.5 before:mx-auto before:inset-x-0 before:bg-primary-500 hover:before:w-full before:bottom-0 before:left-0 before:transition-all before:duration-300",
                       activeTab === category && "text-primary-500 before:w-full"
                     )}
diff --git a/apps/dimentorin/src/app/(public)/mentoring/[id]/_components/modals/appointment/steps/success.tsx b/apps/dimentorin/src/app/(public)/mentoring/[id]/_components/modals/appointment/steps/success.tsx
index 27975c6..f0f822e 100644
--- a/apps/dimentorin/src/app/(public)/mentoring/[id]/_components/modals/appointment/steps/success.tsx
+++ b/apps/dimentorin/src/app/(public)/mentoring/[id]/_components/modals/appointment/steps/success.tsx
@@ -16,11 +16,11 @@ export const SuccessStep = () => {
 
       <div
         className={cn(
-          "mb-3 flex justify-center items-center mx-auto size-[60px] bg-green-200 rounded-full",
+          "mb-3 flex justify-center items-center mx-auto size-[60px] bg-success-200 rounded-full",
           "md:size-[100px] md:mb-7 xl:size-[120px] xl:mb-8"
         )}
       >
-        <div className="bg-green-500 rounded-full size-10 flex justify-center items-center text-white md:size-16 xl:size-20">
+        <div className="bg-success-500 rounded-full size-10 flex justify-center items-center text-white md:size-16 xl:size-20">
           <CheckOutlined className="text-xl md:text-3xl xl:text-5xl" />
         </div>
       </div>
diff --git a/apps/dimentorin/src/app/(public)/mentoring/[id]/_components/sections/senpai-schedule.tsx b/apps/dimentorin/src/app/(public)/mentoring/[id]/_components/sections/senpai-schedule.tsx
index 7d8cc37..c72752d 100644
--- a/apps/dimentorin/src/app/(public)/mentoring/[id]/_components/sections/senpai-schedule.tsx
+++ b/apps/dimentorin/src/app/(public)/mentoring/[id]/_components/sections/senpai-schedule.tsx
@@ -48,7 +48,7 @@ export const SenpaiScheduleSection: FC<Props> = ({ onBook, mentorId }) => {
               <div key={date}>
                 <div className="flex justify-between items-center mb-4">
                   <p className="text-[15px] font-medium">{formatDate(date)}</p>
-                  <p className="rounded-4xl py-1 px-2.5 text-xs font-medium bg-primary-200 text-primary-500">
+                  <p className="rounded-3xl py-1 px-2.5 text-xs font-medium bg-primary-200 text-primary-500">
                     {daySlots.length} slot tersisa
                   </p>
                 </div>
diff --git a/apps/dimentorin/src/app/(public)/mentoring/ai-agent/page.tsx b/apps/dimentorin/src/app/(public)/mentoring/ai-agent/page.tsx
index 5c16021..f856f88 100644
--- a/apps/dimentorin/src/app/(public)/mentoring/ai-agent/page.tsx
+++ b/apps/dimentorin/src/app/(public)/mentoring/ai-agent/page.tsx
@@ -96,7 +96,7 @@ export const Components: FC = (): ReactElement => {
                           key={i}
                           className="flex items-center justify-between gap-2 mb-1"
                         >
-                          <span className="text-[11px] text-neutral-600 truncate">
+                          <span className="text-[12px] text-neutral-600 truncate">
                             📄 {s.title}
                           </span>
                           <span className="text-[10px] text-neutral-400 shrink-0">
diff --git a/apps/dimentorin/src/app/(public)/mentoring/materi/[slug]/page.tsx b/apps/dimentorin/src/app/(public)/mentoring/materi/[slug]/page.tsx
index f355ad0..3565c1c 100644
--- a/apps/dimentorin/src/app/(public)/mentoring/materi/[slug]/page.tsx
+++ b/apps/dimentorin/src/app/(public)/mentoring/materi/[slug]/page.tsx
@@ -20,7 +20,7 @@ export const Components: FC = (): ReactElement => {
         <div className="animate-pulse bg-neutral-100 h-72 rounded-2xl" />
       ) : (
         <article className="max-w-3xl">
-          <span className="inline-block px-2 py-0.5 rounded-full text-[11px] font-medium mb-3 bg-neutral-100 text-neutral-600">
+          <span className="inline-block px-2 py-0.5 rounded-full text-[12px] font-medium mb-3 bg-neutral-100 text-neutral-600">
             {material.category}
           </span>
           <h1 className="text-3xl font-semibold text-neutral-800 mb-3">
diff --git a/apps/dimentorin/src/app/(public)/mentoring/materi/page.tsx b/apps/dimentorin/src/app/(public)/mentoring/materi/page.tsx
index 91908f3..b15b0a2 100644
--- a/apps/dimentorin/src/app/(public)/mentoring/materi/page.tsx
+++ b/apps/dimentorin/src/app/(public)/mentoring/materi/page.tsx
@@ -70,7 +70,7 @@ export const Components: FC = (): ReactElement => {
                 className="group bg-white rounded-2xl border border-neutral-100 p-6 shadow-sm hover:shadow-md transition-shadow"
               >
                 <span
-                  className={`inline-block px-2 py-0.5 rounded-full text-[11px] font-medium mb-3 ${color}`}
+                  className={`inline-block px-2 py-0.5 rounded-full text-[12px] font-medium mb-3 ${color}`}
                 >
                   {m.category}
                 </span>
diff --git a/apps/dimentorin/src/app/(public)/mentoring/mentor-dashboard/page.tsx b/apps/dimentorin/src/app/(public)/mentoring/mentor-dashboard/page.tsx
index a3d3ac8..1a090f6 100644
--- a/apps/dimentorin/src/app/(public)/mentoring/mentor-dashboard/page.tsx
+++ b/apps/dimentorin/src/app/(public)/mentoring/mentor-dashboard/page.tsx
@@ -13,15 +13,15 @@ import { ReloadOutlined, CheckOutlined } from '@ant-design/icons';
 import { toast } from 'sonner';
 
 const STATUS_STYLE: Record<string, string> = {
-  pending: 'bg-amber-100 text-amber-700',
-  confirmed: 'bg-emerald-100 text-emerald-700',
+  pending: 'bg-warning-100 text-warning-800',
+  confirmed: 'bg-success-100 text-success-700',
   completed: 'bg-primary-100 text-primary-700',
-  cancelled: 'bg-red-100 text-red-600',
+  cancelled: 'bg-danger-100 text-danger-600',
 };
 
 const PAYMENT_STYLE: Record<string, string> = {
-  pending: 'bg-amber-100 text-amber-700',
-  paid: 'bg-emerald-100 text-emerald-700',
+  pending: 'bg-warning-100 text-warning-800',
+  paid: 'bg-success-100 text-success-700',
   expired: 'bg-neutral-200 text-neutral-600',
 };
 
@@ -154,7 +154,7 @@ export const Components: FC = (): ReactElement => {
                             </h3>
                             <span
                               className={cn(
-                                'shrink-0 px-3 py-1 rounded-full text-[11px] font-medium capitalize',
+                                'shrink-0 px-3 py-1 rounded-full text-[12px] font-medium capitalize',
                                 STATUS_STYLE[session.status] ?? 'bg-neutral-100 text-neutral-600'
                               )}
                             >
diff --git a/apps/dimentorin/src/app/(public)/mentoring/my-sessions/page.tsx b/apps/dimentorin/src/app/(public)/mentoring/my-sessions/page.tsx
index 4714b24..d40e9ab 100644
--- a/apps/dimentorin/src/app/(public)/mentoring/my-sessions/page.tsx
+++ b/apps/dimentorin/src/app/(public)/mentoring/my-sessions/page.tsx
@@ -11,15 +11,15 @@ import { ReloadOutlined } from '@ant-design/icons';
 import { toast } from 'sonner';
 
 const STATUS_STYLE: Record<string, string> = {
-  pending: 'bg-amber-100 text-amber-700',
-  confirmed: 'bg-emerald-100 text-emerald-700',
+  pending: 'bg-warning-100 text-warning-800',
+  confirmed: 'bg-success-100 text-success-700',
   completed: 'bg-primary-100 text-primary-700',
-  cancelled: 'bg-red-100 text-red-600',
+  cancelled: 'bg-danger-100 text-danger-600',
 };
 
 const PAYMENT_STYLE: Record<string, string> = {
-  pending: 'bg-amber-100 text-amber-700',
-  paid: 'bg-emerald-100 text-emerald-700',
+  pending: 'bg-warning-100 text-warning-800',
+  paid: 'bg-success-100 text-success-700',
   expired: 'bg-neutral-200 text-neutral-600',
 };
 
@@ -112,7 +112,7 @@ export const Components: FC = (): ReactElement => {
                           </h3>
                           <span
                             className={cn(
-                              'shrink-0 px-3 py-1 rounded-full text-[11px] font-medium capitalize',
+                              'shrink-0 px-3 py-1 rounded-full text-[12px] font-medium capitalize',
                               STATUS_STYLE[session.status] ?? 'bg-neutral-100 text-neutral-600'
                             )}
                           >
diff --git a/apps/dimentorin/src/app/(public)/mentoring/page.tsx b/apps/dimentorin/src/app/(public)/mentoring/page.tsx
index 25d2e55..02aaf6d 100644
--- a/apps/dimentorin/src/app/(public)/mentoring/page.tsx
+++ b/apps/dimentorin/src/app/(public)/mentoring/page.tsx
@@ -62,7 +62,7 @@ export const Components: FC = (): ReactElement => {
 
       <section className="w-full px-8 md:px-[60px] md:pb-[60px] lg:px-20">
         <motion.div
-          className="max-w-7xl mx-auto bg-white rounded-lg py-6 md:rounded-4xl"
+          className="max-w-7xl mx-auto bg-white rounded-lg py-6 md:rounded-3xl"
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           transition={{ duration: 0.4 }}
diff --git a/apps/dimentorin/src/app/auth/forgot/page.tsx b/apps/dimentorin/src/app/auth/forgot/page.tsx
index 31e9668..98a594c 100644
--- a/apps/dimentorin/src/app/auth/forgot/page.tsx
+++ b/apps/dimentorin/src/app/auth/forgot/page.tsx
@@ -12,7 +12,7 @@ export const Components: FC = (): ReactElement => {
           <ForgotStep step={1} />
           <h3 className='mt-5 text-3xl font-semibold text-primary-500'>Forgot Password</h3>
           <h5 className='mt-2 text-xl font-medium text-primary-500'>Masukkan email-mu, dan biarkan kami memanggil password-mu kembali dari dunia lain!</h5>
-          <h6 className='text-gray-600 mt-8'>Email</h6>
+          <h6 className='text-neutral-600 mt-8'>Email</h6>
           <Input type='email' size='lg' placeholder='Contoh: yourname@mail.com'></Input>
           <Button variant='primary' className='mt-7'>Kirim Kode OTP ^^</Button>
         </div>
diff --git a/apps/dimentorin/src/app/auth/forgot/summon/page.tsx b/apps/dimentorin/src/app/auth/forgot/summon/page.tsx
index 913a04f..f8e7632 100644
--- a/apps/dimentorin/src/app/auth/forgot/summon/page.tsx
+++ b/apps/dimentorin/src/app/auth/forgot/summon/page.tsx
@@ -13,12 +13,12 @@ export const Components: FC = (): ReactElement => {
           <h3 className='mt-5 text-3xl font-semibold text-primary-500'>Forgot Password</h3>
           <h5 className='mt-2 text-md font-medium text-primary-500'>Sekarang, buatlah password baru yang lebih kuat, seperti jurus andalanmu!<span role="img" aria-label='emoji'>🔥⚡</span></h5>
           <div className='my-4'>
-            <h6 className='text-gray-700'>Password Baru</h6>
+            <h6 className='text-neutral-700'>Password Baru</h6>
             <Input className='w-full' type="password" placeholder='Buat password sekokoh armor legendary!'/>
-            <h6 className='text-gray-700 mt-5'>Ulang Password Baru</h6>
+            <h6 className='text-neutral-700 mt-5'>Ulang Password Baru</h6>
             <Input className='w-full' type="password" placeholder='Pastikan Cocok! Jangan sampai ada typo, Senpai~!'/>
           </div>
-          <div className='mb-4 text-gray-700 flex flex-col gap-3 text-sm'>
+          <div className='mb-4 text-neutral-700 flex flex-col gap-3 text-sm'>
             <h6><span role='img' aria-label='emoji'>💡</span> Tips dari kami:</h6>
             <h6><span role='img' aria-label='emoji'>✅ </span> Buat kombinasi huruf besar, kecil, angka, dan simbol untuk kekuatan maksimal!</h6>  
             <h6><span role='img' aria-label='emoji'>✅</span> Pastikan kamu ingat password-mu atau simpan di tempat aman~</h6>  
diff --git a/apps/dimentorin/src/app/auth/login/page.tsx b/apps/dimentorin/src/app/auth/login/page.tsx
index 20d405a..9a2ece1 100644
--- a/apps/dimentorin/src/app/auth/login/page.tsx
+++ b/apps/dimentorin/src/app/auth/login/page.tsx
@@ -57,12 +57,12 @@ export const Components: FC = (): ReactElement => {
               </a>
             </div>
             <div className="flex items-center w-full">
-              <div className="flex-grow border-t border-blue-400 opacity-50"></div>
-              <span className="px-3 text-blue-400">Or</span>
-              <div className="flex-grow border-t border-blue-400 opacity-50"></div>
+              <div className="flex-grow border-t border-primary-400 opacity-50"></div>
+              <span className="px-3 text-primary-400">Or</span>
+              <div className="flex-grow border-t border-primary-400 opacity-50"></div>
             </div>
             <Button
-              className="w-full my-3 text-gray-500 gap-2"
+              className="w-full my-3 text-neutral-500 gap-2"
               variant="secondary"
             >
               <p>Log In With Google</p>
diff --git a/apps/dimentorin/src/app/auth/register-mentor/pending/page.tsx b/apps/dimentorin/src/app/auth/register-mentor/pending/page.tsx
index d25e357..1241339 100644
--- a/apps/dimentorin/src/app/auth/register-mentor/pending/page.tsx
+++ b/apps/dimentorin/src/app/auth/register-mentor/pending/page.tsx
@@ -17,10 +17,10 @@ export const Components: FC = (): ReactElement => {
               Data kamu telah kami terima dan sedang dalam proses verifikasi.
             </h4>
             <svg className="mt-10" width="148" height="148" viewBox="0 0 148 148" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <circle cx="74" cy="74" r="73.6348" fill="#42CDF8"/>
-              <rect x="23.5078" y="24.8463" width="99.646" height="99.646" rx="49.823" fill="#0185D0"/>
+              <circle cx="74" cy="74" r="73.6348" className="fill-info-400"/>
+              <rect x="23.5078" y="24.8463" width="99.646" height="99.646" rx="49.823" className="fill-info-600"/>
               <circle cx="73.3284" cy="74.6689" r="33.11" transform="rotate(150 73.3284 74.6689)" stroke="#F0F8FF" stroke-width="1.1825"/>
-              <path d="M44.6436 91.2314C42.1053 92.6969 41.2086 95.9711 43.0096 98.2836C46.1026 102.255 49.9569 105.594 54.3651 108.095C60.3178 111.473 67.0644 113.199 73.9077 113.096C80.7511 112.993 87.4427 111.065 93.2912 107.51C97.6222 104.878 101.374 101.424 104.347 97.3614C106.077 94.9958 105.083 91.75 102.501 90.3615C99.9201 88.9729 96.7369 89.9826 94.884 92.2537C92.8925 94.6949 90.4923 96.7901 87.7782 98.4398C83.545 101.013 78.7015 102.409 73.7482 102.483C68.7949 102.558 63.9116 101.308 59.6029 98.8634C56.8404 97.2961 54.3784 95.2739 52.3144 92.8938C50.3941 90.6794 47.182 89.7658 44.6436 91.2314Z" fill="#F0F8FF"/>
+              <path d="M44.6436 91.2314C42.1053 92.6969 41.2086 95.9711 43.0096 98.2836C46.1026 102.255 49.9569 105.594 54.3651 108.095C60.3178 111.473 67.0644 113.199 73.9077 113.096C80.7511 112.993 87.4427 111.065 93.2912 107.51C97.6222 104.878 101.374 101.424 104.347 97.3614C106.077 94.9958 105.083 91.75 102.501 90.3615C99.9201 88.9729 96.7369 89.9826 94.884 92.2537C92.8925 94.6949 90.4923 96.7901 87.7782 98.4398C83.545 101.013 78.7015 102.409 73.7482 102.483C68.7949 102.558 63.9116 101.308 59.6029 98.8634C56.8404 97.2961 54.3784 95.2739 52.3144 92.8938C50.3941 90.6794 47.182 89.7658 44.6436 91.2314Z" className="fill-primary-50"/>
             </svg>
             <h4 className="mt-10 text-primary-500 font-medium text-xl text-center">
               Mohon tunggu maksimal 2 hari kerja untuk proses aktivasi akun. Kami akan menghubungi kamu jika proses telah selesai.
diff --git a/apps/dimentorin/src/app/auth/register-mentor/success/page.tsx b/apps/dimentorin/src/app/auth/register-mentor/success/page.tsx
index c318b6b..e2af3bf 100644
--- a/apps/dimentorin/src/app/auth/register-mentor/success/page.tsx
+++ b/apps/dimentorin/src/app/auth/register-mentor/success/page.tsx
@@ -24,18 +24,18 @@ export const Components: FC = (): ReactElement => {
               xmlns="http://www.w3.org/2000/svg"
               className="mt-10"
             >
-              <circle cx="99" cy="99" r="99" fill="#BCF8B0" />
+              <circle cx="99" cy="99" r="99" className="fill-success-200" />
               <rect
                 x="31.1152"
                 y="32.9141"
                 width="133.971"
                 height="133.971"
                 rx="66.9857"
-                fill="#35BA43"
+                className="fill-success-500"
               />
               <path
                 d="M127.935 75.8846H122.722C121.991 75.8846 121.297 76.2202 120.85 76.7945L90.0997 115.748L75.355 97.0657C75.1319 96.7825 74.8476 96.5535 74.5234 96.3959C74.1992 96.2384 73.8435 96.1563 73.483 96.1558H68.2697C67.77 96.1558 67.4941 96.7301 67.7999 97.1179L88.2277 122.998C89.1824 124.206 91.0171 124.206 91.9792 122.998L128.405 76.8392C128.711 76.4589 128.435 75.8846 127.935 75.8846Z"
-                fill="#E0FBD8"
+                className="fill-success-100"
               />
             </svg>
             <h4 className="mt-10 text-primary-500 font-medium text-xl text-center">
diff --git a/apps/dimentorin/src/app/auth/register/page.tsx b/apps/dimentorin/src/app/auth/register/page.tsx
index bdf60a6..49d0f10 100644
--- a/apps/dimentorin/src/app/auth/register/page.tsx
+++ b/apps/dimentorin/src/app/auth/register/page.tsx
@@ -65,27 +65,27 @@ export const Components: FC = (): ReactElement => {
                 control={form.control}
                 name={'password'}             
               />
-              <h6 className="text-sm text-gray-500 mt-1">
+              <h6 className="text-sm text-neutral-500 mt-1">
                 "Senpai~! Pastikan password-mu sekuat pertahanan kastil!"
               </h6>
-              <h6 className="text-sm text-gray-500 mt-2">
+              <h6 className="text-sm text-neutral-500 mt-2">
                 Tips membuat password yang OP:
               </h6>
-              <h6 className="text-sm text-gray-500">
+              <h6 className="text-sm text-neutral-500">
                 - Minimal 8 karakter (semakin panjang, semakin power-up!{' '}
                 <span role="img" aria-label="emoji">
                   ⚡
                 </span>
                 )
               </h6>
-              <h6 className="text-sm text-gray-500">
+              <h6 className="text-sm text-neutral-500">
                 - Campur huruf besar, kecil, angka, dan simbol untuk kombinasi
                 ultimate!
                 <span role="img" aria-label="emoji">
                   🔥
                 </span>
               </h6>
-              <h6 className="text-sm text-gray-500 mb-2">
+              <h6 className="text-sm text-neutral-500 mb-2">
                 - Jangan pakai password yang gampang ditebak, nanti ketahuan
                 musuh!
                 <span role="img" aria-label="emoji">
diff --git a/apps/dimentorin/src/app/auth/register/success/page.tsx b/apps/dimentorin/src/app/auth/register/success/page.tsx
index 7c6ed5b..5ebc7a6 100644
--- a/apps/dimentorin/src/app/auth/register/success/page.tsx
+++ b/apps/dimentorin/src/app/auth/register/success/page.tsx
@@ -30,18 +30,18 @@ export const Components: FC = (): ReactElement => {
               xmlns="http://www.w3.org/2000/svg"
               className="mt-10"
             >
-              <circle cx="99" cy="99" r="99" fill="#BCF8B0" />
+              <circle cx="99" cy="99" r="99" className="fill-success-200" />
               <rect
                 x="31.1152"
                 y="32.9141"
                 width="133.971"
                 height="133.971"
                 rx="66.9857"
-                fill="#35BA43"
+                className="fill-success-500"
               />
               <path
                 d="M127.935 75.8846H122.722C121.991 75.8846 121.297 76.2202 120.85 76.7945L90.0997 115.748L75.355 97.0657C75.1319 96.7825 74.8476 96.5535 74.5234 96.3959C74.1992 96.2384 73.8435 96.1563 73.483 96.1558H68.2697C67.77 96.1558 67.4941 96.7301 67.7999 97.1179L88.2277 122.998C89.1824 124.206 91.0171 124.206 91.9792 122.998L128.405 76.8392C128.711 76.4589 128.435 75.8846 127.935 75.8846Z"
-                fill="#E0FBD8"
+                className="fill-success-100"
               />
             </svg>
             <h4 className="mt-10 text-primary-500 font-medium text-xl">
diff --git a/apps/dimentorin/src/index.css b/apps/dimentorin/src/index.css
index 931d17d..9f06c1d 100644
--- a/apps/dimentorin/src/index.css
+++ b/apps/dimentorin/src/index.css
@@ -5,69 +5,67 @@
 @theme {
   --color-primary-50: #f0f8ff;
   --color-primary-100: #e1f0fd;
-  --color-primary-200: #b8e1f8;
-  --color-primary-300: #a1d4f0;
-  --color-primary-400: #4aa4da;
-  --color-primary-500: #1a8ce6;
-  --color-primary-600: #1673c7;
-  --color-primary-700: #0f5ca5;
-  --color-primary-800: #0a4780;
-  --color-primary-900: #04305d;
+  --color-primary-200: #bce1fb;
+  --color-primary-300: #81cbf8;
+  --color-primary-400: #3eb0f2;
+  --color-primary-500: #23a1eb;
+  --color-primary-600: #0877c1;
+  --color-primary-700: #085f9c;
+  --color-primary-800: #0b5181;
+  --color-primary-900: #0f446b;
+  --color-primary-950: #0a2b47;
 
-  --color-neutral-50: #f7f7f7;
+  --color-neutral-50: #f6f6f6;
   --color-neutral-100: #e7e7e7;
-  --color-neutral-200: #d0d0d0;
-  --color-neutral-300: #b7b7b7;
-  --color-neutral-400: #9f9f9f;
-  --color-neutral-500: #7e7e7e;
+  --color-neutral-200: #d1d1d1;
+  --color-neutral-300: #b0b0b0;
+  --color-neutral-400: #888888;
+  --color-neutral-500: #6d6d6d;
   --color-neutral-600: #5d5d5d;
-  --color-neutral-700: #4a4a4a;
-  --color-neutral-800: #3a3a3a;
-  --color-neutral-900: #2f2f2f;
+  --color-neutral-700: #4f4f4f;
+  --color-neutral-800: #454545;
+  --color-neutral-900: #3d3d3d;
+  --color-neutral-950: #2b2b2b;
 
-  --color-success-50: #e7f2ee;
-  --color-success-100: #cde6dd;
-  --color-success-200: #9bccbc;
-  --color-success-300: #78bdab;
-  --color-success-400: #4ca88f;
-  --color-success-500: #349078;
-  --color-success-600: #2f7c66;
-  --color-success-700: #26624f;
-  --color-success-800: #1e4a3b;
-  --color-success-900: #1b513b;
+  --color-success-100: #e0fbd8;
+  --color-success-200: #bcf8b0;
+  --color-success-300: #8eea85;
+  --color-success-400: #63d564;
+  --color-success-500: #35ba43;
+  --color-success-600: #269f3e;
+  --color-success-700: #1a8439;
+  --color-success-800: #106b32;
+  --color-success-900: #0b592f;
 
-  --color-info-50: #e7f4f5;
-  --color-info-100: #cce9ea;
-  --color-info-200: #99d3d5;
-  --color-info-300: #78c4c7;
-  --color-info-400: #3aa9ad;
-  --color-info-500: #279599;
-  --color-info-600: #207d82;
-  --color-info-700: #1a666b;
-  --color-info-800: #124c52;
-  --color-info-900: #093d43;
+  --color-info-100: #ccfcfe;
+  --color-info-200: #9bf3fd;
+  --color-info-300: #67e3fb;
+  --color-info-400: #42cdf8;
+  --color-info-500: #04acf3;
+  --color-info-600: #0185d0;
+  --color-info-700: #0264af;
+  --color-info-800: #01478d;
+  --color-info-900: #003375;
 
-  --color-warning-50: #fffce6;
-  --color-warning-100: #fff8cc;
-  --color-warning-200: #fef39b;
-  --color-warning-300: #fde967;
-  --color-warning-400: #fbd93d;
-  --color-warning-500: #f3c215;
-  --color-warning-600: #d7a20f;
-  --color-warning-700: #aa7e0c;
-  --color-warning-800: #805c07;
-  --color-warning-900: #665c00;
+  --color-warning-100: #fffcd3;
+  --color-warning-200: #fffaa9;
+  --color-warning-300: #fff67d;
+  --color-warning-400: #fff25d;
+  --color-warning-500: #ffed27;
+  --color-warning-600: #dbc91d;
+  --color-warning-700: #b7a714;
+  --color-warning-800: #93850b;
+  --color-warning-900: #7a6d07;
 
-  --color-danger-50: #ffe7e7;
-  --color-danger-100: #ffcece;
-  --color-danger-200: #ff9f9f;
-  --color-danger-300: #ff6e6e;
-  --color-danger-400: #fa4646;
-  --color-danger-500: #ef1f1f;
-  --color-danger-600: #d11515;
-  --color-danger-700: #a51111;
-  --color-danger-800: #7f0c0c;
-  --color-danger-900: #5d2d2d;
+  --color-danger-100: #ffe8da;
+  --color-danger-200: #ffcbb3;
+  --color-danger-300: #ffaa8d;
+  --color-danger-400: #ff8870;
+  --color-danger-500: #ff5242;
+  --color-danger-600: #da3030;
+  --color-danger-700: #b7212d;
+  --color-danger-800: #93152a;
+  --color-danger-900: #7a0c27;
 
   --radius-none: 0px;
   --radius-sm: 2px;
@@ -80,13 +78,15 @@
 
   --font-bai-jamjuree: 'Bai Jamjuree', sans-serif;
 
-  --text-h1: 3rem; /* ~48px */
-  --text-h2: 2.4rem; /* ~38.4px */
-  --text-h3: 1.92rem; /* ~30.72px */
-  --text-p1: 1.54rem; /* ~24.58px */
-  --text-p2: 1.23rem; /* ~19.68px */
-  --text-label1: 0.98rem; /* ~15.74px */
-  --text-label2: 0.78rem; /* ~12.59px */
+  --text-h1: 3.833rem; /* ~46px */
+  --text-h2: 3.083rem; /* ~37px */
+  --text-h3: 2.417rem; /* ~29px */
+  --text-p1: 1.917rem; /* ~23px */
+  --text-p2: 1.583rem; /* ~19px */
+  --text-p3: 1.25rem; /* 15px */
+  --text-label1: 1rem; /* 12px */
+  --text-label2: 0.833rem; /* ~10px */
+  --text-label3: 0.677rem; /* ~8px */
 }
 
 @layer base {
@@ -124,4 +124,4 @@
   .scrollbar-hide::-webkit-scrollbar {
     @apply hidden;
   }
-}
+}
\ No newline at end of file
diff --git a/libs/ui/src/atoms/button/button.tsx b/libs/ui/src/atoms/button/button.tsx
index 20c1677..eef48e8 100644
--- a/libs/ui/src/atoms/button/button.tsx
+++ b/libs/ui/src/atoms/button/button.tsx
@@ -26,10 +26,10 @@ type TButtonProps = DetailedHTMLProps<
 const variantClasses: Record<TButtonVariant, string> = {
   primary: 'bg-primary-500 hover:bg-primary-600 text-white shadow-md',
   secondary:
-    'bg-white hover:text-primary-600 hover:bg-gray-50 text-primary-500 shadow-md',
-  text: 'bg-transparent hover:text-primary-600 hover:bg-gray-50 text-primary-500',
+    'bg-white hover:text-primary-600 hover:bg-neutral-50 text-primary-500 shadow-md',
+  text: 'bg-transparent hover:text-primary-600 hover:bg-neutral-50 text-primary-500',
   bordered:
-    'border border-primary-500 hover:border-primary-600 bg-transparent hover:text-primary-600 hover:bg-gray-50 text-primary-500',
+    'border border-primary-500 hover:border-primary-600 bg-transparent hover:text-primary-600 hover:bg-neutral-50 text-primary-500',
   success: 'bg-success-500 hover:bg-success-600 text-white shadow-md',
   danger: 'bg-danger-100 hover:bg-danger-200 text-danger-500 shadow-md',
 };
diff --git a/libs/ui/src/atoms/input/input.tsx b/libs/ui/src/atoms/input/input.tsx
index 1877947..80ff2ab 100644
--- a/libs/ui/src/atoms/input/input.tsx
+++ b/libs/ui/src/atoms/input/input.tsx
@@ -49,7 +49,7 @@ export const Input: FC<TInputProps> = ({
   };
 
   const mergedClassName = cn(
-    `px-[12px] py-[8px] text-neutral-800 bg-white placeholder:text-neutral-300 border border-neutral-200 hover:border-blue-300 focus:outline-1 focus:outline-blue-500 rounded-md font-bai-jamjuree ${widthform === "standard" ? "min-w-70" : ""}`,
+    `px-[12px] py-[8px] text-neutral-800 bg-white placeholder:text-neutral-300 border border-neutral-200 hover:border-primary-300 focus:outline-1 focus:outline-primary-500 rounded-md font-bai-jamjuree ${widthform === "standard" ? "min-w-70" : ""}`,
     sizeClasses[size].textSize,
     disabled && disabledClass,
     className
diff --git a/libs/ui/src/atoms/select/select.tsx b/libs/ui/src/atoms/select/select.tsx
index 6099cd6..ada3e9b 100644
--- a/libs/ui/src/atoms/select/select.tsx
+++ b/libs/ui/src/atoms/select/select.tsx
@@ -35,7 +35,7 @@ export const Select: FC<TSelectProps> = ({
   ...rest
 }): ReactElement => {
   const mergedClassName = cn(
-    `appearance-none px-[12px] py-[8px] text-neutral-800 bg-white placeholder:text-neutral-300 border border-neutral-200 hover:border-blue-300 focus:outline-1 focus:outline-blue-500 rounded-md`,
+    `appearance-none px-[12px] py-[8px] text-neutral-800 bg-white placeholder:text-neutral-300 border border-neutral-200 hover:border-primary-300 focus:outline-1 focus:outline-primary-500 rounded-md`,
     sizeClasses[size],
     widthform === 'standard' && 'min-w-70',
     disabled && disabledClass,
diff --git a/libs/ui/src/atoms/textarea/textarea.tsx b/libs/ui/src/atoms/textarea/textarea.tsx
index 1c31100..a169c81 100644
--- a/libs/ui/src/atoms/textarea/textarea.tsx
+++ b/libs/ui/src/atoms/textarea/textarea.tsx
@@ -38,7 +38,7 @@ export const Textarea: FC<TTextareaProps> = ({
   ...rest
 }): ReactElement => {
   const mergedClassName = cn(
-    'rounded-md border border-neutral-200 hover:border-blue-300 focus:outline-1 focus:outline-blue-500 px-[12px] py-[8px] invalid:border-danger-500 invalid:text-danger-500',
+    'rounded-md border border-neutral-200 hover:border-primary-300 focus:outline-1 focus:outline-primary-500 px-[12px] py-[8px] invalid:border-danger-500 invalid:text-danger-500',
     sizeClasses[size],
     disabled && disabledClass,
     error && errorClass,
diff --git a/libs/ui/src/molecules/forgot-step/forgot-step.tsx b/libs/ui/src/molecules/forgot-step/forgot-step.tsx
index 10cd7d8..c61cfe6 100644
--- a/libs/ui/src/molecules/forgot-step/forgot-step.tsx
+++ b/libs/ui/src/molecules/forgot-step/forgot-step.tsx
@@ -15,15 +15,15 @@ export const ForgotStep: FC<TForgotStepProps> = ({
         <div className="w-full grid grid-cols-3 gap-3">
           <div className="flex flex-col items-center justify-center gap-2">
             <div className={`${step === 1 ? "bg-primary-500" : "bg-primary-200"} px-5 py-2 rounded-md w-full`}></div>
-            <h4 className={`${step === 1 ? "text-primary-500" : "text-gray-500"} text-xs`}>Masukkan Email</h4>
+            <h4 className={`${step === 1 ? "text-primary-500" : "text-neutral-500"} text-xs`}>Masukkan Email</h4>
           </div>
           <div className="flex flex-col items-center justify-center gap-2">
             <div className={`${step === 2 ? "bg-primary-500" : "bg-primary-200"} px-5 py-2 rounded-md w-full`}></div>
-            <h4 className={`${step === 2 ? "text-primary-500" : "text-gray-500"} text-xs`}>Verifikasi OTP</h4>
+            <h4 className={`${step === 2 ? "text-primary-500" : "text-neutral-500"} text-xs`}>Verifikasi OTP</h4>
           </div>
           <div className="flex flex-col items-center justify-center gap-2">
             <div className={`${step === 3 ? "bg-primary-500" : "bg-primary-200"} px-5 py-2 rounded-md w-full`}></div>
-            <h4 className={`${step === 3 ? "text-primary-500" : "text-gray-500"} text-xs`}>Summon Password ^^</h4>
+            <h4 className={`${step === 3 ? "text-primary-500" : "text-neutral-500"} text-xs`}>Summon Password ^^</h4>
           </div>
         </div>
     )
diff --git a/libs/ui/src/molecules/modal/index.tsx b/libs/ui/src/molecules/modal/index.tsx
index 2f0d9ba..06550dd 100644
--- a/libs/ui/src/molecules/modal/index.tsx
+++ b/libs/ui/src/molecules/modal/index.tsx
@@ -66,7 +66,7 @@ const Modal = ({
     <div className="fixed inset-0 z-50">
       <div
         className={cn(
-          'fixed inset-0 bg-gray-900/80 transition-opacity duration-200',
+          'fixed inset-0 bg-neutral-900/80 transition-opacity duration-200',
           isOpen ? 'opacity-100' : 'opacity-0',
           overlayClassName
         )}
@@ -90,7 +90,7 @@ const Modal = ({
         <button
           onClick={onClose}
           className={cn(
-            'absolute right-4 top-4 rounded-sm p-1 text-gray-500 transition-colors hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-950 focus:ring-offset-2',
+            'absolute right-4 top-4 rounded-sm p-1 text-neutral-500 transition-colors hover:text-neutral-900 focus:outline-none focus:ring-2 focus:ring-neutral-950 focus:ring-offset-2',
             closeButtonClassName
           )}
           aria-label="Close modal"
@@ -168,7 +168,7 @@ const ModalDescription = ({
   children,
   id,
 }: ModalDescriptionProps) => (
-  <p id={id} className={cn('text-sm text-gray-500', className)}>
+  <p id={id} className={cn('text-sm text-neutral-500', className)}>
     {children}
   </p>
 );
diff --git a/libs/ui/src/molecules/modal/modal.stories.tsx b/libs/ui/src/molecules/modal/modal.stories.tsx
index c3ea08a..42514be 100644
--- a/libs/ui/src/molecules/modal/modal.stories.tsx
+++ b/libs/ui/src/molecules/modal/modal.stories.tsx
@@ -40,7 +40,7 @@ export const Default: Story = {
           <button className="px-4 py-2 bg-blue-500 text-white rounded">
             Confirm
           </button>
-          <button className="px-4 py-2 bg-gray-300 rounded">Cancel</button>
+          <button className="px-4 py-2 bg-neutral-300 rounded">Cancel</button>
         </Modal.Footer>
       </>
     ),
diff --git a/libs/ui/src/molecules/modal/modal.tsx b/libs/ui/src/molecules/modal/modal.tsx
index 2f0d9ba..7263fda 100644
--- a/libs/ui/src/molecules/modal/modal.tsx
+++ b/libs/ui/src/molecules/modal/modal.tsx
@@ -66,7 +66,7 @@ const Modal = ({
     <div className="fixed inset-0 z-50">
       <div
         className={cn(
-          'fixed inset-0 bg-gray-900/80 transition-opacity duration-200',
+          'fixed inset-0 bg-neutral-900/80 transition-opacity duration-200',
           isOpen ? 'opacity-100' : 'opacity-0',
           overlayClassName
         )}
@@ -75,7 +75,7 @@ const Modal = ({
       />
       <div
         className={cn(
-          'fixed left-[50%] top-[50%] z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 bg-[#F0F8FF] rounded-lg p-6 shadow-xl transition-all duration-200',
+          'fixed left-[50%] top-[50%] z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 bg-primary-50 rounded-lg p-6 shadow-xl transition-all duration-200',
           'sm:rounded-lg sm:max-w-md',
           isOpen ? 'opacity-100 scale-100' : 'opacity-0 scale-95',
           className
@@ -90,7 +90,7 @@ const Modal = ({
         <button
           onClick={onClose}
           className={cn(
-            'absolute right-4 top-4 rounded-sm p-1 text-gray-500 transition-colors hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-950 focus:ring-offset-2',
+            'absolute right-4 top-4 rounded-sm p-1 text-neutral-500 transition-colors hover:text-neutral-900 focus:outline-none focus:ring-2 focus:ring-neutral-950 focus:ring-offset-2',
             closeButtonClassName
           )}
           aria-label="Close modal"
@@ -168,7 +168,7 @@ const ModalDescription = ({
   children,
   id,
 }: ModalDescriptionProps) => (
-  <p id={id} className={cn('text-sm text-gray-500', className)}>
+  <p id={id} className={cn('text-sm text-neutral-500', className)}>
     {children}
   </p>
 );
diff --git a/libs/ui/src/molecules/register-mentor-step/register-mentor-step.tsx b/libs/ui/src/molecules/register-mentor-step/register-mentor-step.tsx
index 6043fd6..61580e5 100644
--- a/libs/ui/src/molecules/register-mentor-step/register-mentor-step.tsx
+++ b/libs/ui/src/molecules/register-mentor-step/register-mentor-step.tsx
@@ -17,7 +17,7 @@ export const RegisterMentorStep: FC<TRegisterMentorStep> = ({ step }): ReactElem
   return (
     <div className="relative w-full px-8">
       {/* Garis dasar (abu/biru muda) */}
-      <div className="absolute top-5 left-8 right-8 h-0.5 bg-blue-100 z-0" />
+      <div className="absolute top-5 left-8 right-8 h-0.5 bg-primary-100 z-0" />
 
       {/* Garis progress biru (dinamis) */}
       <div
@@ -37,7 +37,7 @@ export const RegisterMentorStep: FC<TRegisterMentorStep> = ({ step }): ReactElem
                 className={`w-10 h-10 rounded-full flex items-center justify-center border-2 ${
                   isActive
                     ? "bg-gradient-to-b from-purple-600 to-blue-500 text-white border-transparent"
-                    : "bg-white text-gray-700 border-blue-400"
+                    : "bg-white text-neutral-700 border-blue-400"
                 }`}
               >
                 <span className="font-bold">{currentStep}</span>
diff --git a/libs/ui/src/organisms/backoffice-sidebar/backoffice-sidebar.tsx b/libs/ui/src/organisms/backoffice-sidebar/backoffice-sidebar.tsx
index 676dce0..b537aa3 100644
--- a/libs/ui/src/organisms/backoffice-sidebar/backoffice-sidebar.tsx
+++ b/libs/ui/src/organisms/backoffice-sidebar/backoffice-sidebar.tsx
@@ -29,7 +29,7 @@ export const BackofficeSidebar: FC = (): ReactElement => {
             className={`flex items-center justify-items-start gap-3 px-[8px] py-[10px] ${
               isActive('/dashboard')
                 ? 'bg-primary-500 text-white rounded-md'
-                : 'text-gray-700 hover:bg-gray-100'
+                : 'text-neutral-700 hover:bg-neutral-100'
             }`}
           >
             <AppstoreOutlined className="text-[20px]" />
@@ -41,7 +41,7 @@ export const BackofficeSidebar: FC = (): ReactElement => {
             className={`flex items-center justify-items-start gap-3 px-[8px] py-[10px] ${
               isActive('/gacha-roll')
                 ? 'bg-primary-500 text-white rounded-md'
-                : 'text-gray-700 hover:bg-gray-100'
+                : 'text-neutral-700 hover:bg-neutral-100'
             }`}
           >
             <ReloadOutlined className="text-[20px]" />
@@ -53,7 +53,7 @@ export const BackofficeSidebar: FC = (): ReactElement => {
             className={`flex items-center justify-items-start gap-3 px-[8px] py-[10px] ${
               isActive('/permissions')
                 ? 'bg-primary-500 text-white rounded-md'
-                : 'text-gray-700 hover:bg-gray-100'
+                : 'text-neutral-700 hover:bg-neutral-100'
             }`}
           >
             <UserSwitchOutlined className="text-[20px]" />
@@ -65,7 +65,7 @@ export const BackofficeSidebar: FC = (): ReactElement => {
             className={`flex items-center justify-items-start gap-3 px-[8px] py-[10px] ${
               isActive('/roles')
                 ? 'bg-primary-500 text-white rounded-md'
-                : 'text-gray-700 hover:bg-gray-100'
+                : 'text-neutral-700 hover:bg-neutral-100'
             }`}
           >
             <UsergroupAddOutlined className="text-[20px]" />
@@ -77,7 +77,7 @@ export const BackofficeSidebar: FC = (): ReactElement => {
             className={`flex items-center justify-items-start gap-3 px-[8px] py-[10px] ${
               isActive('/accounts')
                 ? 'bg-primary-500 text-white rounded-md'
-                : 'text-gray-700 hover:bg-gray-100'
+                : 'text-neutral-700 hover:bg-neutral-100'
             }`}
           >
             <UserOutlined className="text-[20px]" />
@@ -89,7 +89,7 @@ export const BackofficeSidebar: FC = (): ReactElement => {
             className={`flex items-center justify-items-start gap-3 px-[8px] py-[10px] ${
               isActive('/transactions')
                 ? 'bg-primary-500 text-white rounded-md'
-                : 'text-gray-700 hover:bg-gray-100'
+                : 'text-neutral-700 hover:bg-neutral-100'
             }`}
           >
             <AuditOutlined className="text-[20px]" />
@@ -101,7 +101,7 @@ export const BackofficeSidebar: FC = (): ReactElement => {
             className={`flex items-center justify-items-start gap-3 px-[8px] py-[10px] ${
               isActive('/prizes')
                 ? 'bg-primary-500 text-white rounded-md'
-                : 'text-gray-700 hover:bg-gray-100'
+                : 'text-neutral-700 hover:bg-neutral-100'
             }`}
           >
             <InboxOutlined className="text-[20px]" />
@@ -115,7 +115,7 @@ export const BackofficeSidebar: FC = (): ReactElement => {
         <Button
           onClick={signOut}
           variant="text"
-          className="items-start justify-start gap-3 px-[8px] py-[10px] text-gray-700 hover:text-red-500 transition-colors w-full"
+          className="items-start justify-start gap-3 px-[8px] py-[10px] text-neutral-700 hover:text-danger-500 transition-colors w-full"
         >
           <LogoutOutlined className="text-[20px]" />
           <span className="text-p3 font-medium">Log Out</span>
diff --git a/libs/ui/src/organisms/filter/filter.tsx b/libs/ui/src/organisms/filter/filter.tsx
index b0119cb..e416559 100644
--- a/libs/ui/src/organisms/filter/filter.tsx
+++ b/libs/ui/src/organisms/filter/filter.tsx
@@ -30,9 +30,9 @@ const Radio = ({
         checked={checked}
         onChange={onChange}
         disabled={disabled}
-        className="peer col-start-1 row-start-1 appearance-none shrink-0 size-[10px] bg-primary-100 rounded-full disabled:border-gray-400"
+        className="peer col-start-1 row-start-1 appearance-none shrink-0 size-[10px] bg-primary-100 rounded-full disabled:border-neutral-400"
       />
-      <div className="pointer-events-none col-start-1 row-start-1 size-[6px] rounded-full peer-checked:bg-primary-500 peer-checked:peer-disabled:bg-gray-400" />
+      <div className="pointer-events-none col-start-1 row-start-1 size-[6px] rounded-full peer-checked:bg-primary-500 peer-checked:peer-disabled:bg-neutral-400" />
     </div>
     <label htmlFor={id} className="text-start text-neutral-400 text-label2">
       {label || 'This is the radio label'}
diff --git a/libs/ui/src/organisms/navbar/navbar.stories.tsx b/libs/ui/src/organisms/navbar/navbar.stories.tsx
index 56fa5a7..91f0523 100644
--- a/libs/ui/src/organisms/navbar/navbar.stories.tsx
+++ b/libs/ui/src/organisms/navbar/navbar.stories.tsx
@@ -9,7 +9,7 @@ const meta: Meta<typeof Navbar> = {
   decorators: [
     (Story) => (
       <BrowserRouter>
-        <div className="min-h-screen bg-gray-100 p-4">
+        <div className="min-h-screen bg-neutral-100 p-4">
           <Story />
         </div>
       </BrowserRouter>
diff --git a/libs/ui/src/organisms/navbar/navbar.tsx b/libs/ui/src/organisms/navbar/navbar.tsx
index 91a1c94..65d3426 100644
--- a/libs/ui/src/organisms/navbar/navbar.tsx
+++ b/libs/ui/src/organisms/navbar/navbar.tsx
@@ -38,7 +38,7 @@ export const Navbar: FC = (): ReactElement => {
                 <Button
                   size="md"
                   variant="text"
-                  className="lg:text-p2 lg:max-h-[44px] text-gray-600 hover:text-gray-700 transition-colors"
+                  className="lg:text-p2 lg:max-h-[44px] text-neutral-600 hover:text-neutral-700 transition-colors"
                 >
                   <Link to="#">Merch Gacha</Link>
                 </Button>
@@ -56,7 +56,7 @@ export const Navbar: FC = (): ReactElement => {
                     onClick={signOut}
                     variant="text"
                     size="md"
-                    className="lg:text-p2 text-red-500 font-bold hover:text-red-600"
+                    className="lg:text-p2 text-danger-500 font-bold hover:text-danger-600"
                   >
                     Logout
                   </Button>
@@ -69,12 +69,12 @@ export const Navbar: FC = (): ReactElement => {
               }`}
               onClick={() => setIsDropdownOpen(!isDropdownOpen)}
             >
-              <MenuOutlined style={{ color: '#1a8ce6' }} />
+              <MenuOutlined style={{ color: '#23a1eb' }} />
             </button>
             <div className="relative">
               {isDropdownOpen && (
                 <div className="absolute right-0 top-0 mt-5">
-                  <ul className="mt-2 w-48 bg-white shadow-md border rounded-[16px] border-gray-200 px-5 py-3">
+                  <ul className="mt-2 w-48 bg-white shadow-md border rounded-2xl border-neutral-200 px-5 py-3">
                     <li>
                       <Link
                         to="#"
@@ -86,7 +86,7 @@ export const Navbar: FC = (): ReactElement => {
                     <li>
                       <Link
                         to="#"
-                        className="block text-gray-600 transition-colors px-4 py-2 text-center font-semibold"
+                        className="block text-neutral-600 transition-colors px-4 py-2 text-center font-semibold"
                       >
                         Merch Gacha
                       </Link>
@@ -95,20 +95,20 @@ export const Navbar: FC = (): ReactElement => {
                       <li>
                         <Button
                           onClick={() => setShowModalLogin(true)}
-                          className="block w-full text-gray-100 transition-colors px-4 py-2 text-center font-semibold"
+                          className="block w-full text-neutral-100 transition-colors px-4 py-2 text-center font-semibold"
                         >
                           Login
                         </Button>
                       </li>
                     ) : (
                       <>
-                        <li className="px-4 py-2 text-center text-gray-600 font-semibold">
+                        <li className="px-4 py-2 text-center text-neutral-600 font-semibold">
                           {session?.user?.fullname}
                         </li>
                         <li>
                           <div
                             onClick={signOut}
-                            className="block text-red-500 font-bold transition-colors px-4 py-2 text-center cursor-pointer"
+                            className="block text-danger-500 font-bold transition-colors px-4 py-2 text-center cursor-pointer"
                           >
                             Logout
                           </div>