diff --git a/apps/web/src/app/[locale]/(admin)/sidebar.tsx b/apps/web/src/app/[locale]/(admin)/sidebar.tsx
index 75854d907..4f8419b99 100644
--- a/apps/web/src/app/[locale]/(admin)/sidebar.tsx
+++ b/apps/web/src/app/[locale]/(admin)/sidebar.tsx
@@ -108,14 +108,14 @@ export function Sidebar() {
               <li>
                 <PayWallDialog>
                   <DialogTrigger
-                    className="hover:animate-wiggle relative mb-4 flex w-full items-center gap-4 overflow-hidden rounded-md border bg-gray-50/50 px-4 py-3 text-left ring-gray-200 transition-transform hover:bg-gray-50 focus-visible:border-gray-300"
+                    className="relative mb-4 flex w-full items-center gap-4 overflow-hidden rounded-md border bg-gray-200/50 px-4 py-3 text-left ring-gray-200 hover:bg-gray-200 focus-visible:border-gray-300"
                     onClick={() =>
                       posthog?.capture("trigger paywall", { from: "sidebar" })
                     }
                   >
-                    <SparklesIcon className="absolute -left-2 -top-2 size-20 text-gray-500/10" />
+                    <SparklesIcon className="pointer-events-none absolute -left-2 -top-2 size-20 text-gray-500/10" />
                     <div>
-                      <div className="inline-flex size-12 items-center justify-center rounded-md">
+                      <div className="inline-flex size-12 items-center justify-center rounded-md duration-500">
                         <Badge variant="primary">
                           <Trans i18nKey="planPro" />
                         </Badge>
diff --git a/apps/web/src/components/pay-wall-dialog.tsx b/apps/web/src/components/pay-wall-dialog.tsx
index 94e932329..63e72bc1d 100644
--- a/apps/web/src/components/pay-wall-dialog.tsx
+++ b/apps/web/src/components/pay-wall-dialog.tsx
@@ -95,7 +95,7 @@ export function PayWallDialog({ children, ...forwardedProps }: DialogProps) {
           </header>
           <section>
             <RadioGroup value={period} onValueChange={setPeriod}>
-              <li className="focus-within:ring-primary relative flex items-center justify-between rounded-lg border bg-gray-50 p-4 focus-within:ring-2">
+              <li className="relative flex items-center justify-between rounded-lg border bg-gray-50 p-4 focus-within:bg-gray-100 focus-within:ring-gray-300 hover:bg-gray-100">
                 <div className="flex items-center gap-4">
                   <RadioGroupItem id="monthly" value="monthly" />
                   <label className="text-base font-semibold" htmlFor="monthly">
@@ -108,21 +108,29 @@ export function PayWallDialog({ children, ...forwardedProps }: DialogProps) {
                   <span className="text-muted-foreground text-sm">/ mo</span>
                 </p>
               </li>
-              <li className="focus-within:ring-primary relative flex items-center justify-between rounded-lg border bg-gray-50 p-4 focus-within:ring-2">
+              <li className="relative flex items-center justify-between rounded-lg border bg-gray-50 p-4 focus-within:bg-gray-100 focus-within:ring-gray-300 hover:bg-gray-100">
                 <div className="space-y-1">
                   <div className="flex items-center gap-4">
                     <RadioGroupItem id="yearly" value="yearly" />
-                    <label className="text-base font-semibold" htmlFor="yearly">
-                      <span role="presentation" className="absolute inset-0" />
-                      <Trans defaults="12 months" i18nKey="12months" />
-                    </label>
-                    <Badge variant="green">
-                      <Trans
-                        defaults="Save {percentage}%"
-                        i18nKey="savePercentage"
-                        values={{ percentage: annualSavingsPercentage }}
-                      />
-                    </Badge>
+                    <div className="flex items-center gap-2">
+                      <label
+                        className="text-base font-semibold"
+                        htmlFor="yearly"
+                      >
+                        <span
+                          role="presentation"
+                          className="absolute inset-0"
+                        />
+                        <Trans defaults="12 months" i18nKey="12months" />
+                      </label>
+                      <Badge variant="secondary">
+                        <Trans
+                          defaults="Save {percentage}%"
+                          i18nKey="savePercentage"
+                          values={{ percentage: annualSavingsPercentage }}
+                        />
+                      </Badge>
+                    </div>
                   </div>
                   <p className="text-muted-foreground pointer-events-none flex items-baseline gap-1.5 pl-8 text-sm">
                     <span>${yearlyPrice}</span>
diff --git a/packages/ui/src/badge.tsx b/packages/ui/src/badge.tsx
index c98be366f..7095f74f2 100644
--- a/packages/ui/src/badge.tsx
+++ b/packages/ui/src/badge.tsx
@@ -4,16 +4,16 @@ import * as React from "react";
 import { cn } from "./lib/utils";
 
 const badgeVariants = cva(
-  "inline-flex group whitespace-nowrap items-center rounded-full border justify-center font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  "inline-flex group whitespace-nowrap items-center rounded-full justify-center font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
   {
     variants: {
       variant: {
-        primary: "border-transparent bg-primary text-primary-50",
+        primary: "bg-primary text-primary-50",
         default: "bg-gray-50 text-secondary-foreground",
-        destructive:
-          "border-transparent bg-destructive text-destructive-foreground",
+        destructive: "bg-destructive text-destructive-foreground",
         outline: "text-foreground",
-        green: "border-transparent bg-green-500 text-green-50",
+        green: "bg-green-600 text-white",
+        secondary: "text-primary bg-primary-50",
       },
       size: {
         md: "h-6 min-w-5 text-xs px-2",