diff --git a/apps/web/app/(main)/pro/page.tsx b/apps/web/app/(main)/pro/page.tsx
index 89c9574..e0c0137 100644
--- a/apps/web/app/(main)/pro/page.tsx
+++ b/apps/web/app/(main)/pro/page.tsx
@@ -32,8 +32,8 @@ export default async function ProPage() {
         <div className="mx-auto max-w-4xl text-center">
           <div className="mb-2 flex justify-center">
             <div className="relative">
-              <div className="absolute inset-0 rounded-full bg-gradient-to-r from-purple-600 to-blue-600 opacity-30 blur-xl" />
-              <div className="relative rounded-full bg-gradient-to-r from-purple-600 to-blue-600 p-4">
+              <div className="absolute inset-0 rounded-full bg-gradient-to-r from-purple-600 to-blue-600 opacity-30 blur-xl dark:from-purple-700 dark:to-blue-700" />
+              <div className="relative rounded-full bg-gradient-to-r from-purple-600 to-blue-600 p-4 dark:from-purple-700 dark:to-blue-700">
                 <Crown className="size-8 text-white" />
               </div>
             </div>
@@ -41,7 +41,7 @@ export default async function ProPage() {
 
           <h1 className="mb-6 text-4xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-6xl">
             Подписка{' '}
-            <span className="bg-gradient-to-r from-purple-600 to-blue-600 bg-clip-text text-transparent">
+            <span className="bg-gradient-to-r from-purple-600 to-blue-600 bg-clip-text text-transparent dark:from-purple-700 dark:to-blue-700">
               Pro
             </span>
           </h1>
@@ -59,7 +59,7 @@ export default async function ProPage() {
                 className={`w-full border-2 text-base font-semibold sm:w-auto ${
                   canUseTrial
                     ? 'border-gray-300 text-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700'
-                    : 'border-0 bg-gradient-to-r from-purple-600 to-blue-600 text-white hover:from-purple-700 hover:to-blue-700 dark:from-purple-500 dark:to-blue-500 dark:hover:from-purple-600 dark:hover:to-blue-600'
+                    : 'border-0 bg-gradient-to-r from-purple-600 to-blue-600 text-white hover:from-purple-700 hover:to-blue-700 dark:from-purple-700 dark:to-blue-700 dark:hover:from-purple-800 dark:hover:to-blue-800'
                 }`}
                 size="lg"
                 variant={canUseTrial ? 'outline' : 'default'}
diff --git a/apps/web/components/profile/subscription-bar.tsx b/apps/web/components/profile/subscription-bar.tsx
index 9b9cfe3..b08a2ab 100644
--- a/apps/web/components/profile/subscription-bar.tsx
+++ b/apps/web/components/profile/subscription-bar.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { useSubscriptionQuery } from '@/hooks/api/subscriptions';
+import { cn } from '@repo/ui/lib/utils';
 import { getRemainingDays } from '@repo/utils/datetime-format';
 import { ChevronRight } from 'lucide-react';
 import Link from 'next/link';
@@ -30,14 +31,38 @@ export function SubscriptionInfoBar() {
   return (
     <Link href="/pro" rel="noopener noreferrer">
       <div className="px-4">
-        <div className="flex w-full flex-col justify-center rounded-2xl bg-background p-4 px-6 shadow-lg backdrop-blur-2xl dark:bg-primary/5">
+        <div
+          className={cn(
+            'flex w-full flex-col justify-center rounded-2xl p-4 px-6 shadow-lg backdrop-blur-2xl',
+            isActive
+              ? 'bg-gradient-to-r from-purple-600 to-blue-600 dark:from-purple-700 dark:to-blue-700 text-white'
+              : 'bg-background dark:bg-primary/5',
+          )}
+        >
           <div className="flex items-center justify-between">
             <div>
-              <h2 className="font-bold tracking-wider text-foreground">{title}</h2>
-              <span className="mt-1 text-xs text-muted-foreground">{description}</span>
+              <h2
+                className={cn(
+                  'font-bold tracking-wider',
+                  isActive ? 'text-white' : 'text-foreground',
+                )}
+              >
+                {title}
+              </h2>
+              <span
+                className={cn('mt-1 text-xs', isActive ? 'text-white/80' : 'text-muted-foreground')}
+              >
+                {description}
+              </span>
             </div>
-            <div aria-hidden="true" className="rounded-full bg-primary/10 p-1.5">
-              <ChevronRight className="size-4 text-primary" />
+            <div
+              aria-hidden="true"
+              className={cn(
+                'rounded-full p-1.5',
+                isActive ? 'bg-white/20 text-white' : 'bg-primary/10 text-primary',
+              )}
+            >
+              <ChevronRight className="size-4" />
             </div>
           </div>
         </div>