diff --git a/apps/frontend/src/components/analytics/analytics.component.tsx b/apps/frontend/src/components/analytics/analytics.component.tsx
index 17e9435a..02ec4061 100644
--- a/apps/frontend/src/components/analytics/analytics.component.tsx
+++ b/apps/frontend/src/components/analytics/analytics.component.tsx
@@ -45,7 +45,7 @@ export const AnalyticsComponent: FC = () => {
       {/*    </div>*/}
       {/*    <div>*/}
       {/*        <div className="w-full flex-col justify-start items-start gap-4 inline-flex">*/}
-      {/*            <div className="self-stretch justify-start items-start gap-2.5 inline-flex pb-[16.5px] border-b-[1px] border-[#28344F]">*/}
+      {/*            <div className="self-stretch justify-start items-start gap-2.5 inline-flex pb-[16.5px] border-b-[1px] border-fifth">*/}
       {/*                <img className="w-8 h-8 rounded-full" src="https://via.placeholder.com/32x32"/>*/}
       {/*                <div className="grow shrink basis-0 flex-col justify-start items-start gap-1 inline-flex">*/}
       {/*                    <div className="justify-center items-center gap-1 inline-flex">*/}
@@ -59,7 +59,7 @@ export const AnalyticsComponent: FC = () => {
       {/*                    </div>*/}
       {/*                </div>*/}
       {/*            </div>*/}
-      {/*            <div className="self-stretch justify-start items-start gap-2.5 inline-flex pb-[16.5px] border-b-[1px] border-[#28344F]">*/}
+      {/*            <div className="self-stretch justify-start items-start gap-2.5 inline-flex pb-[16.5px] border-b-[1px] border-fifth">*/}
       {/*                <img className="w-8 h-8 rounded-full" src="https://via.placeholder.com/32x32"/>*/}
       {/*                <div className="grow shrink basis-0 flex-col justify-start items-start gap-1 inline-flex">*/}
       {/*                    <div className="justify-center items-center gap-1 inline-flex">*/}
@@ -73,7 +73,7 @@ export const AnalyticsComponent: FC = () => {
       {/*                    </div>*/}
       {/*                </div>*/}
       {/*            </div>*/}
-      {/*            <div className="self-stretch justify-start items-start gap-2.5 inline-flex pb-[16.5px] border-b-[1px] border-[#28344F]">*/}
+      {/*            <div className="self-stretch justify-start items-start gap-2.5 inline-flex pb-[16.5px] border-b-[1px] border-fifth">*/}
       {/*                <img className="w-8 h-8 rounded-full" src="https://via.placeholder.com/32x32"/>*/}
       {/*                <div className="grow shrink basis-0 flex-col justify-start items-start gap-1 inline-flex">*/}
       {/*                    <div className="justify-center items-center gap-1 inline-flex">*/}
@@ -87,7 +87,7 @@ export const AnalyticsComponent: FC = () => {
       {/*                    </div>*/}
       {/*                </div>*/}
       {/*            </div>*/}
-      {/*            <div className="self-stretch justify-start items-start gap-2.5 inline-flex pb-[16.5px] border-b-[1px] border-[#28344F]">*/}
+      {/*            <div className="self-stretch justify-start items-start gap-2.5 inline-flex pb-[16.5px] border-b-[1px] border-fifth">*/}
       {/*                <img className="w-8 h-8 rounded-full" src="https://via.placeholder.com/32x32"/>*/}
       {/*                <div className="grow shrink basis-0 flex-col justify-start items-start gap-1 inline-flex">*/}
       {/*                    <div className="justify-center items-center gap-1 inline-flex">*/}
@@ -101,7 +101,7 @@ export const AnalyticsComponent: FC = () => {
       {/*                    </div>*/}
       {/*                </div>*/}
       {/*            </div>*/}
-      {/*            <div className="self-stretch justify-start items-start gap-2.5 inline-flex pb-[16.5px] border-b-[1px] border-[#28344F]">*/}
+      {/*            <div className="self-stretch justify-start items-start gap-2.5 inline-flex pb-[16.5px] border-b-[1px] border-fifth">*/}
       {/*                <img className="w-8 h-8 rounded-full" src="https://via.placeholder.com/32x32"/>*/}
       {/*                <div className="grow shrink basis-0 flex-col justify-start items-start gap-1 inline-flex">*/}
       {/*                    <div className="justify-center items-center gap-1 inline-flex">*/}
diff --git a/apps/frontend/src/components/analytics/stars.and.forks.tsx b/apps/frontend/src/components/analytics/stars.and.forks.tsx
index 7b438713..6e661408 100644
--- a/apps/frontend/src/components/analytics/stars.and.forks.tsx
+++ b/apps/frontend/src/components/analytics/stars.and.forks.tsx
@@ -12,7 +12,7 @@ export const StarsAndForks: FC<StarsAndForksInterface> = (props) => {
         <div className="flex gap-[24px] h-[272px]" key={item.login}>
           <div className="flex-1 bg-secondary py-[10px] px-[16px] flex flex-col">
             <div className="flex items-center gap-[14px]">
-              <div className="bg-[#28344F] p-[8px]">
+              <div className="bg-fifth p-[8px]">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
                   width="20"
@@ -55,7 +55,7 @@ export const StarsAndForks: FC<StarsAndForksInterface> = (props) => {
 
           <div className="flex-1 bg-secondary py-[10px] px-[16px] flex flex-col">
             <div className="flex items-center gap-[14px]">
-              <div className="bg-[#28344F] p-[8px]">
+              <div className="bg-fifth p-[8px]">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
                   width="20"
@@ -104,7 +104,7 @@ export const StarsAndForks: FC<StarsAndForksInterface> = (props) => {
             className="flex-1 bg-secondary py-[24px] px-[16px] gap-[16px] flex flex-col"
           >
             <div className="flex items-center gap-[14px]">
-              <div className="p-[8px] bg-[#28344F]">
+              <div className="p-[8px] bg-fifth">
                 {p === 0 ? (
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
diff --git a/apps/frontend/src/components/auth/login.tsx b/apps/frontend/src/components/auth/login.tsx
index 018ee415..5f11b5f2 100644
--- a/apps/frontend/src/components/auth/login.tsx
+++ b/apps/frontend/src/components/auth/login.tsx
@@ -63,7 +63,7 @@ export function Login() {
 
         {!isGeneral() ? <GithubProvider /> : <GoogleProvider />}
         <div className="h-[20px] mb-[24px] mt-[24px] relative">
-          <div className="absolute w-full h-[1px] bg-[#28344F] top-[50%] -translate-y-[50%]" />
+          <div className="absolute w-full h-[1px] bg-fifth top-[50%] -translate-y-[50%]" />
           <div
             className={`absolute z-[1] ${interClass} justify-center items-center w-full left-0 top-0 flex`}
           >
diff --git a/apps/frontend/src/components/auth/register.tsx b/apps/frontend/src/components/auth/register.tsx
index 7c46eccc..2b144841 100644
--- a/apps/frontend/src/components/auth/register.tsx
+++ b/apps/frontend/src/components/auth/register.tsx
@@ -138,7 +138,7 @@ export function RegisterAfter({
         {!isAfterProvider && (!isGeneral() ? <GithubProvider /> : <GoogleProvider />)}
         {!isAfterProvider && (
           <div className="h-[20px] mb-[24px] mt-[24px] relative">
-            <div className="absolute w-full h-[1px] bg-[#28344F] top-[50%] -translate-y-[50%]" />
+            <div className="absolute w-full h-[1px] bg-fifth top-[50%] -translate-y-[50%]" />
             <div
               className={`absolute z-[1] ${interClass} justify-center items-center w-full left-0 top-0 flex`}
             >
diff --git a/apps/frontend/src/components/billing/lifetime.deal.tsx b/apps/frontend/src/components/billing/lifetime.deal.tsx
index 81bf515d..eb35ffbd 100644
--- a/apps/frontend/src/components/billing/lifetime.deal.tsx
+++ b/apps/frontend/src/components/billing/lifetime.deal.tsx
@@ -113,7 +113,7 @@ export const LifetimeDeal = () => {
 
   return (
     <div className="flex gap-[30px]">
-      <div className="border border-[#172034] bg-[#0B101B] p-[24px] flex flex-col gap-[20px] flex-1 rounded-[4px]">
+      <div className="border border-[#172034] bg-sixth p-[24px] flex flex-col gap-[20px] flex-1 rounded-[4px]">
         <div className="text-[30px]">
           Current Package: {user?.totalChannels > 8 ? 'EXTRA' : user?.tier?.current}
         </div>
@@ -141,7 +141,7 @@ export const LifetimeDeal = () => {
         </div>
       </div>
 
-      <div className="border border-[#172034] bg-[#0B101B] p-[24px] flex flex-col gap-[20px] flex-1 rounded-[4px]">
+      <div className="border border-[#172034] bg-sixth p-[24px] flex flex-col gap-[20px] flex-1 rounded-[4px]">
         <div className="text-[30px]">
           Next Package:{' '}
           {user?.tier?.current === 'PRO' ? 'EXTRA' : !user?.tier?.current ? 'FREE' : user?.tier?.current === 'STANDARD' ? 'PRO' : 'STANDARD'}
diff --git a/apps/frontend/src/components/launches/add.edit.model.tsx b/apps/frontend/src/components/launches/add.edit.model.tsx
index 1e41e7c9..a59a0281 100644
--- a/apps/frontend/src/components/launches/add.edit.model.tsx
+++ b/apps/frontend/src/components/launches/add.edit.model.tsx
@@ -393,7 +393,7 @@ export const AddEditModal: FC<{
               : 'w-0 overflow-hidden'
           )}
         >
-          <div className="relative flex gap-[20px] flex-col flex-1 rounded-[4px] border border-[#172034] bg-[#0B101B] p-[16px] pt-0">
+          <div className="relative flex gap-[20px] flex-col flex-1 rounded-[4px] border border-[#172034] bg-sixth p-[16px] pt-0">
             <TopTitle title={existingData?.group ? 'Edit Post' : 'Create Post'}>
               <div className="flex items-center">
                 <PostToOrganization
@@ -505,7 +505,7 @@ export const AddEditModal: FC<{
               </>
             ) : null}
           </div>
-          <div className="relative h-[68px] flex flex-col rounded-[4px] border border-[#172034] bg-[#0B101B]">
+          <div className="relative h-[68px] flex flex-col rounded-[4px] border border-[#172034] bg-sixth">
             <div className="flex flex-1 gap-[10px] relative">
               <div className="absolute w-full h-full flex gap-[10px] justify-end items-center right-[16px]">
                 <Button
@@ -586,7 +586,7 @@ export const AddEditModal: FC<{
         </div>
         <div
           className={clsx(
-            'flex gap-[20px] flex-col rounded-[4px] border-[#172034] bg-[#0B101B] flex-1 transition-all duration-700',
+            'flex gap-[20px] flex-col rounded-[4px] border-[#172034] bg-sixth flex-1 transition-all duration-700',
             !selectedIntegrations.length
               ? 'flex-grow-0 overflow-hidden'
               : 'flex-grow-1 border animate-overflow'
diff --git a/apps/frontend/src/components/launches/add.provider.component.tsx b/apps/frontend/src/components/launches/add.provider.component.tsx
index 01d431d2..92821608 100644
--- a/apps/frontend/src/components/launches/add.provider.component.tsx
+++ b/apps/frontend/src/components/launches/add.provider.component.tsx
@@ -89,7 +89,7 @@ export const ApiModal: FC<{
   }, []);
 
   return (
-    <div className="rounded-[4px] border border-[#172034] bg-[#0B101B] px-[16px] pb-[16px] relative">
+    <div className="rounded-[4px] border border-[#172034] bg-sixth px-[16px] pb-[16px] relative">
       <TopTitle title={`Add API key for ${name}`} />
       <button
         onClick={close}
@@ -167,7 +167,7 @@ export const AddProviderComponent: FC<{
     []
   );
   return (
-    <div className="w-full flex flex-col gap-[20px] rounded-[4px] border border-[#172034] bg-[#0B101B] px-[16px] pb-[16px] relative">
+    <div className="w-full flex flex-col gap-[20px] rounded-[4px] border border-[#172034] bg-sixth px-[16px] pb-[16px] relative">
       <div className="flex flex-col">
         <TopTitle title="Add Channel" />
         <button
diff --git a/apps/frontend/src/components/launches/comments/comment.component.tsx b/apps/frontend/src/components/launches/comments/comment.component.tsx
index 91b1d24d..4efb7fab 100644
--- a/apps/frontend/src/components/launches/comments/comment.component.tsx
+++ b/apps/frontend/src/components/launches/comments/comment.component.tsx
@@ -276,7 +276,7 @@ export const CommentComponent: FC<{ date: dayjs.Dayjs }> = (props) => {
   }, []);
 
   return (
-    <div className="relative flex gap-[20px] flex-col flex-1 rounded-[4px] border border-[#172034] bg-[#0B101B] p-[16px] pt-0">
+    <div className="relative flex gap-[20px] flex-col flex-1 rounded-[4px] border border-[#172034] bg-sixth p-[16px] pt-0">
       <TopTitle title={`Comments for ${date.format('DD/MM/YYYY HH:mm')}`} />
       <button
         onClick={closeAll}
diff --git a/apps/frontend/src/components/launches/generator/generator.tsx b/apps/frontend/src/components/launches/generator/generator.tsx
index d5f4a951..eb1f18db 100644
--- a/apps/frontend/src/components/launches/generator/generator.tsx
+++ b/apps/frontend/src/components/launches/generator/generator.tsx
@@ -149,7 +149,7 @@ const SecondStep: FC<{
                 key={post[0].post}
               >
                 {post.length > 1 && (
-                  <div className="bg-[#612AD5] absolute -left-[15px] -top-[15px] z-[100] p-[3px] rounded-[10px]">
+                  <div className="bg-forth absolute -left-[15px] -top-[15px] z-[100] p-[3px] rounded-[10px]">
                     a thread
                   </div>
                 )}
diff --git a/apps/frontend/src/components/launches/helpers/linkedin.component.tsx b/apps/frontend/src/components/launches/helpers/linkedin.component.tsx
index a50c3b70..87700287 100644
--- a/apps/frontend/src/components/launches/helpers/linkedin.component.tsx
+++ b/apps/frontend/src/components/launches/helpers/linkedin.component.tsx
@@ -102,7 +102,7 @@ export const LinkedinCompany: FC<{
 
   return (
     <div className="text-white fixed left-0 top-0 bg-black/80 z-[300] w-full h-full p-[60px] animate-fade justify-center flex">
-      <div className="flex flex-col w-[500px] h-[250px] bg-[#0B101B] border-tableBorder border-2 rounded-xl pb-[20px] px-[20px] relative">
+      <div className="flex flex-col w-[500px] h-[250px] bg-sixth border-tableBorder border-2 rounded-xl pb-[20px] px-[20px] relative">
         <div className="flex">
           <div className="flex-1">
             <TopTitle title={'Select Company'} />
diff --git a/apps/frontend/src/components/launches/new.calendar.component.tsx b/apps/frontend/src/components/launches/new.calendar.component.tsx
index c6678c64..843dfc04 100644
--- a/apps/frontend/src/components/launches/new.calendar.component.tsx
+++ b/apps/frontend/src/components/launches/new.calendar.component.tsx
@@ -33,12 +33,12 @@ export const NewCalendarComponent = () => {
             ))}
             {hours.map((hour) => (
               <Fragment key={hour}>
-                <div className="p-2 pr-4 bg-[#090B13] text-center items-center justify-center flex">
+                <div className="p-2 pr-4 bg-secondary text-center items-center justify-center flex">
                   {hour.toString().padStart(2, '0')}:00
                 </div>
                 {days.map((day, indexDay) => (
                   <Fragment key={`${day}-${hour}`}>
-                    <div className="relative bg-[#090b13]">
+                    <div className="relative bg-secondary">
                       <CalendarColumn
                         day={indexDay}
                         hour={`${hour.toString().padStart(2, '0')}:00`}
diff --git a/apps/frontend/src/components/launches/polonto.tsx b/apps/frontend/src/components/launches/polonto.tsx
index 839a7958..6a27aa34 100644
--- a/apps/frontend/src/components/launches/polonto.tsx
+++ b/apps/frontend/src/components/launches/polonto.tsx
@@ -87,7 +87,7 @@ const Polonto: FC<{
   }, []);
   return (
     <div className="fixed left-0 top-0 bg-black/80 z-[300] w-full min-h-full p-[60px] animate-fade">
-      <div className="w-full h-full bg-[#0B101B] border-tableBorder border-2 rounded-xl pb-[20px] px-[20px] relative">
+      <div className="w-full h-full bg-sixth border-tableBorder border-2 rounded-xl pb-[20px] px-[20px] relative">
         <div className="flex">
           <div className="flex-1">
             <TopTitle title="Design Media" />
diff --git a/apps/frontend/src/components/launches/providers/reddit/subreddit.tsx b/apps/frontend/src/components/launches/providers/reddit/subreddit.tsx
index 2a540c03..b9049476 100644
--- a/apps/frontend/src/components/launches/providers/reddit/subreddit.tsx
+++ b/apps/frontend/src/components/launches/providers/reddit/subreddit.tsx
@@ -234,7 +234,7 @@ export const Subreddit: FC<{
           )}
           {value.type === 'media' && (
             <div className="flex flex-col">
-              <div className="w-full h-[10px] bg-[#131B2C] rounded-tr-[8px] rounded-tl-[8px]" />
+              <div className="w-full h-[10px] bg-input rounded-tr-[8px] rounded-tl-[8px]" />
               <div className="flex flex-col text-nowrap">
                 <MultiMediaComponent
                   description=""
diff --git a/apps/frontend/src/components/launches/up.down.arrow.tsx b/apps/frontend/src/components/launches/up.down.arrow.tsx
index c88d5e5e..5910eefd 100644
--- a/apps/frontend/src/components/launches/up.down.arrow.tsx
+++ b/apps/frontend/src/components/launches/up.down.arrow.tsx
@@ -41,7 +41,7 @@ export const UpDownArrow: FC<{
           'outline-none rounded-tl-[20px] rounded-tr-[20px] w-[24px] h-[24px] flex justify-center items-center',
           isUp
             ? 'bg-input hover:bg-seventh cursor-pointer'
-            : 'bg-[#0F1524] pointer-events-none text-[#1F2941]'
+            : 'bg-[#0F1524] pointer-events-none text-tableBorder'
         )}
       >
         <Arrow flip={true} />
@@ -52,7 +52,7 @@ export const UpDownArrow: FC<{
           'outline-none rounded-bl-[20px] rounded-br-[20px] w-[24px] h-[24px] flex justify-center items-center',
           isDown
             ? 'bg-input hover:bg-seventh cursor-pointer'
-            : 'bg-[#0F1524] pointer-events-none text-[#1F2941]'
+            : 'bg-[#0F1524] pointer-events-none text-tableBorder'
         )}
       >
         <Arrow flip={false} />
diff --git a/apps/frontend/src/components/layout/settings.component.tsx b/apps/frontend/src/components/layout/settings.component.tsx
index a8854ae2..626db0ce 100644
--- a/apps/frontend/src/components/layout/settings.component.tsx
+++ b/apps/frontend/src/components/layout/settings.component.tsx
@@ -81,7 +81,7 @@ export const SettingsPopup: FC<{ getRef?: Ref<any> }> = (props) => {
         )}
         <div
           className={clsx(
-            'w-full max-w-[920px] mx-auto bg-[#0B101B] gap-[24px] flex flex-col relative',
+            'w-full max-w-[920px] mx-auto bg-sixth gap-[24px] flex flex-col relative',
             !getRef && 'p-[32px] rounded-[4px] border border-[#172034]'
           )}
         >
@@ -135,7 +135,7 @@ export const SettingsPopup: FC<{ getRef?: Ref<any> }> = (props) => {
                   <div className="text-[14px]">Profile Picture</div>
                   <div className="flex gap-[8px]">
                     <button
-                      className="h-[24px] w-[120px] bg-[#612AD5] rounded-[4px] flex justify-center gap-[4px] items-center cursor-pointer"
+                      className="h-[24px] w-[120px] bg-forth rounded-[4px] flex justify-center gap-[4px] items-center cursor-pointer"
                       type="button"
                     >
                       <div>
diff --git a/apps/frontend/src/components/marketplace/buyer.tsx b/apps/frontend/src/components/marketplace/buyer.tsx
index 60db9c8c..4e1a28a1 100644
--- a/apps/frontend/src/components/marketplace/buyer.tsx
+++ b/apps/frontend/src/components/marketplace/buyer.tsx
@@ -165,7 +165,7 @@ const Pagination: FC<{ results: number }> = (props) => {
             onClick={changePage(p)}
             className={clsx(
               'w-[40px] h-[40px] flex justify-center items-center rounded-[8px] cursor-pointer',
-              p === page + 1 ? 'bg-[#8155DD]' : 'text-[#64748B]'
+              p === page + 1 ? 'bg-[#8155DD]' : 'text-inputText'
             )}
           >
             {p}
@@ -313,7 +313,7 @@ export const RequestService: FC<{ toId: string; name: string }> = (props) => {
   return (
     <form onSubmit={form.handleSubmit(createConversation)}>
       <FormProvider {...form}>
-        <div className="w-full max-w-[920px] mx-auto bg-[#0B101B] px-[16px] rounded-[4px] border border-[#172034] gap-[24px] flex flex-col relative">
+        <div className="w-full max-w-[920px] mx-auto bg-sixth px-[16px] rounded-[4px] border border-[#172034] gap-[24px] flex flex-col relative">
           <button
             onClick={close}
             className="outline-none absolute right-[20px] top-[20px] mantine-UnstyledButton-root mantine-ActionIcon-root hover:bg-tableBorder cursor-pointer mantine-Modal-close mantine-1dcetaa"
@@ -394,7 +394,7 @@ export const Card: FC<{
   }, []);
 
   return (
-    <div className="min-h-[155px] bg-[#0B101B] p-[24px] flex">
+    <div className="min-h-[155px] bg-sixth p-[24px] flex">
       <div className="flex gap-[16px] flex-1">
         <div>
           <div className="h-[103px] w-[103px] bg-red-500/10 rounded-full relative">
diff --git a/apps/frontend/src/components/marketplace/order.top.actions.tsx b/apps/frontend/src/components/marketplace/order.top.actions.tsx
index a61d35a0..50ad520b 100644
--- a/apps/frontend/src/components/marketplace/order.top.actions.tsx
+++ b/apps/frontend/src/components/marketplace/order.top.actions.tsx
@@ -160,7 +160,7 @@ export const NewOrder: FC<{ group: string }> = (props) => {
   return (
     <form onSubmit={form.handleSubmit(submit)}>
       <FormProvider {...form}>
-        <div className="w-full max-w-[647px] mx-auto bg-[#0B101B] px-[16px] rounded-[4px] border border-[#172034] gap-[24px] flex flex-col relative">
+        <div className="w-full max-w-[647px] mx-auto bg-sixth px-[16px] rounded-[4px] border border-[#172034] gap-[24px] flex flex-col relative">
           <button
             onClick={close}
             className="outline-none absolute right-[20px] top-[20px] mantine-UnstyledButton-root mantine-ActionIcon-root hover:bg-tableBorder cursor-pointer mantine-Modal-close mantine-1dcetaa"
@@ -283,7 +283,7 @@ export const OrderInProgress: FC<{ group: string; buyer: boolean, order: string
   return (
     <div className="flex gap-[10px]">
       {buyer && (
-        <div onClick={completeOrder} className="rounded-[34px] border-[1px] border-[#506490] !bg-[#0B101B] h-[28px] justify-center items-center text-[12px] px-[12px] flex font-[600] cursor-pointer">
+        <div onClick={completeOrder} className="rounded-[34px] border-[1px] border-[#506490] !bg-sixth h-[28px] justify-center items-center text-[12px] px-[12px] flex font-[600] cursor-pointer">
           Complete order and pay early
         </div>
       )}
diff --git a/apps/frontend/src/components/marketplace/special.message.tsx b/apps/frontend/src/components/marketplace/special.message.tsx
index b025381b..0d30b177 100644
--- a/apps/frontend/src/components/marketplace/special.message.tsx
+++ b/apps/frontend/src/components/marketplace/special.message.tsx
@@ -156,7 +156,7 @@ export const Offer: FC<{
         <div className="text-[#32D583]">${totalPrice}</div>
       </div>
       <div className="py-[16px] px-[24px] flex flex-col gap-[20px]">
-        <div className="text-[#64748B] text-[12px]">Platform</div>
+        <div className="text-inputText text-[12px]">Platform</div>
         {data.data.ordersItems.map((item: any) => (
           <div
             key={item.integration.id}
@@ -192,7 +192,7 @@ export const Offer: FC<{
           )}
         {orderStatus === 'ACCEPTED' && (
           <div className="flex justify-end">
-            <Button className="rounded-[4px] text-[14px] border border-[#1F2941] !bg-[#0B101B] text-[#1F2941]">
+            <Button className="rounded-[4px] text-[14px] border border-tableBorder !bg-sixth text-tableBorder">
               Accepted
             </Button>
           </div>
@@ -336,13 +336,13 @@ export const Post: FC<{
               <div className="mt-[18px] flex gap-[10px] justify-end">
                 <Button
                   onClick={requestRevision}
-                  className="rounded-[4px] text-[14px] border-[2px] border-[#506490] !bg-[#0B101B]"
+                  className="rounded-[4px] text-[14px] border-[2px] border-[#506490] !bg-sixth"
                 >
                   Revision Needed
                 </Button>
                 <Button
                   onClick={requestApproved}
-                  className="rounded-[4px] text-[14px] border-[2px] border-[#506490] !bg-[#0B101B]"
+                  className="rounded-[4px] text-[14px] border-[2px] border-[#506490] !bg-sixth"
                 >
                   Approve
                 </Button>
@@ -354,14 +354,14 @@ export const Post: FC<{
 
           {data.data.status === 'REVISION' && (
             <div className="flex justify-end">
-              <Button className="rounded-[4px] text-[14px] border border-[#1F2941] !bg-[#0B101B] text-[#1F2941]">
+              <Button className="rounded-[4px] text-[14px] border border-tableBorder !bg-sixth text-tableBorder">
                 Revision Requested
               </Button>
             </div>
           )}
           {data.data.status === 'APPROVED' && (
             <div className="flex justify-end gap-[10px]">
-              <Button className="rounded-[4px] text-[14px] border border-[#1F2941] !bg-[#0B101B] text-[#1F2941]">
+              <Button className="rounded-[4px] text-[14px] border border-tableBorder !bg-sixth text-tableBorder">
                 ACCEPTED
               </Button>
             </div>
@@ -369,7 +369,7 @@ export const Post: FC<{
 
           {data.data.status === 'CANCELED' && (
             <div className="flex justify-end gap-[10px]">
-              <Button className="rounded-[4px] text-[14px] border border-[#1F2941] !bg-[#0B101B] text-[#1F2941]">
+              <Button className="rounded-[4px] text-[14px] border border-tableBorder !bg-sixth text-tableBorder">
                 Cancelled by the seller
               </Button>
             </div>
diff --git a/apps/frontend/src/components/media/media.component.tsx b/apps/frontend/src/components/media/media.component.tsx
index ef22f67d..b1a435ac 100644
--- a/apps/frontend/src/components/media/media.component.tsx
+++ b/apps/frontend/src/components/media/media.component.tsx
@@ -95,7 +95,7 @@ export const MediaBox: FC<{
 
   return (
     <div className="fixed left-0 top-0 bg-black/80 z-[300] w-full min-h-full p-[60px] animate-fade">
-      <div className="w-full h-full bg-[#0B101B] border-tableBorder border-2 rounded-xl pb-[20px] px-[20px] relative">
+      <div className="w-full h-full bg-sixth border-tableBorder border-2 rounded-xl pb-[20px] px-[20px] relative">
         <div className="flex">
           <div className="flex-1">
             <TopTitle title="Media Library" />
@@ -259,7 +259,7 @@ export const MultiMediaComponent: FC<{
 
   return (
     <>
-      <div className="flex flex-col gap-[8px] bg-[#131B2C] rounded-bl-[8px]">
+      <div className="flex flex-col gap-[8px] bg-input rounded-bl-[8px]">
         {modal && <MediaBox setMedia={changeMedia} closeModal={showModal} />}
         {mediaModal && !!user?.tier?.ai &&  (
           <Polonto setMedia={changeMedia} closeModal={closeDesignModal} />
@@ -268,7 +268,7 @@ export const MultiMediaComponent: FC<{
           <div className="flex">
             <Button
               onClick={showModal}
-              className="ml-[10px] rounded-[4px] mb-[10px] gap-[8px] justify-center items-center w-[127px] flex border border-dashed border-[#506490] bg-[#131B2C]"
+              className="ml-[10px] rounded-[4px] mb-[10px] gap-[8px] justify-center items-center w-[127px] flex border border-dashed border-[#506490] bg-input"
             >
               <div>
                 <svg
diff --git a/apps/frontend/src/components/notifications/notification.component.tsx b/apps/frontend/src/components/notifications/notification.component.tsx
index 0c509ce5..6709b7d6 100644
--- a/apps/frontend/src/components/notifications/notification.component.tsx
+++ b/apps/frontend/src/components/notifications/notification.component.tsx
@@ -27,7 +27,7 @@ export const ShowNotification: FC<{
     <div
       className={clsx(
         `text-white px-[16px] py-[10px] border-b border-tableBorder last:border-b-0 transition-colors ${interClass} overflow-hidden text-ellipsis`,
-        newNotification && 'font-bold bg-[#7236f1] animate-newMessages'
+        newNotification && 'font-bold bg-seventh animate-newMessages'
       )}
       dangerouslySetInnerHTML={{ __html: replaceLinks(notification.content) }}
     />
diff --git a/apps/frontend/src/components/onboarding/connect.channels.tsx b/apps/frontend/src/components/onboarding/connect.channels.tsx
index 74c9d06e..508dd7ed 100644
--- a/apps/frontend/src/components/onboarding/connect.channels.tsx
+++ b/apps/frontend/src/components/onboarding/connect.channels.tsx
@@ -151,7 +151,7 @@ export const ConnectChannels: FC = () => {
                       height={32}
                     />
                   </div>
-                  <div className="text-[#64748B] text-[10px] tracking-[1.2px] uppercase">
+                  <div className="text-inputText text-[10px] tracking-[1.2px] uppercase">
                     {social.name}
                   </div>
                 </div>
@@ -174,7 +174,7 @@ export const ConnectChannels: FC = () => {
                         className="rounded-full w-[32px] h-[32px]"
                       />
                     </div>
-                    <div className="text-[#64748B] text-[10px] tracking-[1.2px] uppercase">
+                    <div className="text-inputText text-[10px] tracking-[1.2px] uppercase">
                       {article.name}
                     </div>
                   </div>
diff --git a/apps/frontend/src/components/onboarding/onboarding.tsx b/apps/frontend/src/components/onboarding/onboarding.tsx
index 3b869da2..9a55db13 100644
--- a/apps/frontend/src/components/onboarding/onboarding.tsx
+++ b/apps/frontend/src/components/onboarding/onboarding.tsx
@@ -70,7 +70,7 @@ export const Step: FC<{
         STEP {step}
       </div>
       <div
-        className={clsx('text-[12px]', step > currentStep && 'text-[#64748B]')}
+        className={clsx('text-[12px]', step > currentStep && 'text-inputText')}
       >
         {title}
       </div>
diff --git a/apps/frontend/src/components/post-url-selector/post.url.selector.tsx b/apps/frontend/src/components/post-url-selector/post.url.selector.tsx
index 7cd9dfc2..9fbe1090 100644
--- a/apps/frontend/src/components/post-url-selector/post.url.selector.tsx
+++ b/apps/frontend/src/components/post-url-selector/post.url.selector.tsx
@@ -142,7 +142,7 @@ export const PostSelector: FC<{
             <div
               className={
                 !noModal
-                  ? 'flex flex-col w-full max-w-[1200px] mx-auto h-full bg-[#0B101B] border-tableBorder border-2 rounded-xl pb-[20px] px-[20px] relative'
+                  ? 'flex flex-col w-full max-w-[1200px] mx-auto h-full bg-sixth border-tableBorder border-2 rounded-xl pb-[20px] px-[20px] relative'
                   : ''
               }
             >
diff --git a/apps/frontend/src/components/settings/teams.component.tsx b/apps/frontend/src/components/settings/teams.component.tsx
index 49038e68..71f8c8d9 100644
--- a/apps/frontend/src/components/settings/teams.component.tsx
+++ b/apps/frontend/src/components/settings/teams.component.tsx
@@ -81,7 +81,7 @@ export const AddMember = () => {
   return (
     <FormProvider {...form}>
       <form onSubmit={form.handleSubmit(submit)}>
-        <div className="relative flex gap-[10px] flex-col flex-1 rounded-[4px] border border-[#172034] bg-[#0B101B] p-[16px] pt-0">
+        <div className="relative flex gap-[10px] flex-col flex-1 rounded-[4px] border border-[#172034] bg-sixth p-[16px] pt-0">
           <TopTitle title="Add Member" />
           <button
             onClick={closeModal}