diff --git a/apps/web/app/(marketing)/_components/site-header-account-section.tsx b/apps/web/app/(marketing)/_components/site-header-account-section.tsx
index 526a396d2..19352b5ef 100644
--- a/apps/web/app/(marketing)/_components/site-header-account-section.tsx
+++ b/apps/web/app/(marketing)/_components/site-header-account-section.tsx
@@ -61,7 +61,7 @@ function AuthButtons() {
         <ModeToggle />
 
         <Link href={pathsConfig.auth.signIn}>
-          <Button variant={'link'}>
+          <Button variant={'ghost'}>
             <Trans i18nKey={'auth:signIn'} />
           </Button>
         </Link>
diff --git a/apps/web/app/(marketing)/_components/site-navigation-item.tsx b/apps/web/app/(marketing)/_components/site-navigation-item.tsx
index 576f313de..aad93d850 100644
--- a/apps/web/app/(marketing)/_components/site-navigation-item.tsx
+++ b/apps/web/app/(marketing)/_components/site-navigation-item.tsx
@@ -9,7 +9,7 @@ import { cn, isRouteActive } from '@kit/ui/utils';
 const getClassName = (path: string, currentPathName: string) => {
   const isActive = isRouteActive(path, currentPathName);
 
-  return cn(`text-sm font-medium text-primary`, {
+  return cn(`text-sm font-medium`, {
     'hover:underline': !isActive,
   });
 };
diff --git a/packages/billing/gateway/src/components/pricing-table.tsx b/packages/billing/gateway/src/components/pricing-table.tsx
index 9c9b967d9..8ac297d3d 100644
--- a/packages/billing/gateway/src/components/pricing-table.tsx
+++ b/packages/billing/gateway/src/components/pricing-table.tsx
@@ -152,11 +152,12 @@ function PricingItem(
       data-cy={'subscription-plan'}
       className={cn(
         props.className,
-        `s-full bg-background flex flex-1 grow flex-col items-stretch justify-between space-y-8 self-stretch
-            rounded-lg border border-transparent p-6 lg:w-4/12 xl:max-w-[22rem] xl:p-8`,
+        `s-full flex flex-1 grow flex-col items-stretch justify-between space-y-8 self-stretch
+            rounded-lg p-6 ring-2 lg:w-4/12 xl:max-w-[22rem] xl:p-8`,
         {
-          ['border-primary']: highlighted,
-          ['dark:shadow-primary/20 shadow dark:shadow-sm']: !highlighted,
+          ['ring-primary']: highlighted,
+          ['dark:shadow-primary/30 shadow-none ring-transparent dark:shadow-sm']:
+            !highlighted,
         },
       )}
     >
@@ -173,12 +174,7 @@ function PricingItem(
             </Heading>
 
             <If condition={props.product.badge}>
-              <Badge
-                variant={highlighted ? 'default' : 'outline'}
-                className={cn({
-                  ['border-primary-foreground']: highlighted,
-                })}
-              >
+              <Badge variant={highlighted ? 'default' : 'outline'}>
                 <If condition={highlighted}>
                   <Sparkles className={'h-3'} />
                 </If>
@@ -345,11 +341,7 @@ function Price({ children }: React.PropsWithChildren) {
 function ListItem({ children }: React.PropsWithChildren) {
   return (
     <li className={'flex items-center space-x-1.5'}>
-      <CheckCircle
-        className={cn('h-4', {
-          ['text-green-600']: true,
-        })}
-      />
+      <CheckCircle className={'h-4'} />
 
       <span
         className={cn('text-sm', {