diff --git a/src/components/subscription/DeviceManager.tsx b/src/components/subscription/DeviceManager.tsx
new file mode 100644
index 0000000..7b896ca
--- /dev/null
+++ b/src/components/subscription/DeviceManager.tsx
@@ -0,0 +1,490 @@
+import { useState, useEffect, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { subscriptionApi } from '@/api/subscription';
+import { useCurrency } from '@/hooks/useCurrency';
+import { useHaptic } from '@/platform';
+import InsufficientBalancePrompt from '@/components/InsufficientBalancePrompt';
+import { getGlassColors } from '@/utils/glassTheme';
+import { getErrorMessage } from '@/utils/subscriptionHelpers';
+
+// ─── Types ───
+
+interface DeviceManagerProps {
+  subscription: {
+    device_limit: number;
+    is_active: boolean;
+    is_trial: boolean;
+  };
+  balanceKopeks: number;
+  isDark: boolean;
+  accentColor: string;
+  onClose: () => void;
+}
+
+// ─── DotStepSelector ───
+
+interface DotStepSelectorProps {
+  min: number;
+  max: number;
+  current: number;
+  selected: number;
+  connectedCount: number;
+  onChange: (value: number) => void;
+  accentColor: string;
+  isDark: boolean;
+}
+
+function DotStepSelector({
+  min,
+  max,
+  current,
+  selected,
+  connectedCount,
+  onChange,
+  accentColor,
+  isDark,
+}: DotStepSelectorProps) {
+  const total = max - min + 1;
+
+  if (total <= 0) return null;
+
+  // For large ranges (>15), show a compact slider-like view
+  if (total > 15) {
+    return (
+      <div className="px-2">
+        <input
+          type="range"
+          min={min}
+          max={max}
+          value={selected}
+          onChange={(e) => {
+            const val = Number(e.target.value);
+            if (val >= Math.max(min, connectedCount)) {
+              onChange(val);
+            }
+          }}
+          className="w-full accent-accent-400"
+          style={{ accentColor }}
+        />
+        <div className="mt-2 flex justify-between text-[10px] text-dark-50/30">
+          <span>{min}</span>
+          <span>{max}</span>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex items-center justify-center gap-0">
+      {/* Track background */}
+      <div
+        className="relative flex items-center rounded-full p-1.5"
+        style={{
+          background: isDark ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.06)',
+        }}
+      >
+        {/* Filled track */}
+        <div
+          className="pointer-events-none absolute bottom-1.5 left-1.5 top-1.5 rounded-full transition-all duration-300 ease-out"
+          style={{
+            width: `${((selected - min) / (max - min)) * 100}%`,
+            background: `linear-gradient(90deg, ${accentColor}40, ${accentColor}90)`,
+          }}
+        />
+
+        {/* Dots */}
+        {Array.from({ length: total }, (_, i) => {
+          const value = min + i;
+          const isFilled = value <= selected;
+          const isCurrent = value === current;
+          const isLocked = value < connectedCount && value < selected;
+          const isDisabled = value < Math.max(min, connectedCount) && value < current;
+
+          return (
+            <button
+              key={value}
+              type="button"
+              onClick={() => {
+                if (value >= Math.max(min, connectedCount) || value > current) {
+                  onChange(value);
+                }
+              }}
+              disabled={isDisabled && value < connectedCount}
+              className="relative z-10 flex items-center justify-center transition-all duration-200"
+              style={{
+                width: total <= 8 ? 32 : total <= 12 ? 24 : 20,
+                height: total <= 8 ? 32 : total <= 12 ? 24 : 20,
+              }}
+              aria-label={`${value}`}
+            >
+              <div
+                className="rounded-full transition-all duration-300"
+                style={{
+                  width: isCurrent ? (total <= 8 ? 16 : 12) : total <= 8 ? 10 : 8,
+                  height: isCurrent ? (total <= 8 ? 16 : 12) : total <= 8 ? 10 : 8,
+                  background: isFilled
+                    ? isLocked
+                      ? isDark
+                        ? 'rgba(255,255,255,0.2)'
+                        : 'rgba(0,0,0,0.2)'
+                      : accentColor
+                    : isDark
+                      ? 'rgba(255,255,255,0.12)'
+                      : 'rgba(0,0,0,0.12)',
+                  boxShadow: isCurrent && isFilled ? `0 0 8px ${accentColor}60` : 'none',
+                  border: isCurrent
+                    ? `2px solid ${isFilled ? accentColor : isDark ? 'rgba(255,255,255,0.25)' : 'rgba(0,0,0,0.25)'}`
+                    : 'none',
+                }}
+              />
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+// ─── DeviceManager ───
+
+export default function DeviceManager({
+  subscription,
+  balanceKopeks,
+  isDark,
+  accentColor,
+  onClose,
+}: DeviceManagerProps) {
+  const { t } = useTranslation();
+  const queryClient = useQueryClient();
+  const { formatAmount, currencySymbol } = useCurrency();
+  const { impact: hapticImpact } = useHaptic();
+  const g = getGlassColors(isDark);
+
+  const formatPrice = (kopeks: number) => `${formatAmount(kopeks / 100)} ${currencySymbol}`;
+
+  const currentLimit = subscription.device_limit;
+  const [selectedLimit, setSelectedLimit] = useState(currentLimit);
+
+  // Determine mode
+  const devicesToAdd = selectedLimit > currentLimit ? selectedLimit - currentLimit : 0;
+  const mode: 'idle' | 'purchase' | 'reduce' =
+    selectedLimit > currentLimit ? 'purchase' : selectedLimit < currentLimit ? 'reduce' : 'idle';
+
+  // Fetch initial range data (price info gives us max_device_limit)
+  const { data: priceData } = useQuery({
+    queryKey: ['device-price', devicesToAdd || 1],
+    queryFn: () => subscriptionApi.getDevicePrice(devicesToAdd || 1),
+    enabled: !!subscription,
+    placeholderData: (previousData) => previousData,
+  });
+
+  // Fetch reduction info (gives us min_device_limit, connected_devices_count)
+  const { data: reductionInfo } = useQuery({
+    queryKey: ['device-reduction-info'],
+    queryFn: subscriptionApi.getDeviceReductionInfo,
+    enabled: !!subscription,
+  });
+
+  const minLimit = reductionInfo?.min_device_limit ?? currentLimit;
+  const maxLimit = priceData?.max_device_limit ?? currentLimit;
+  const connectedCount = reductionInfo?.connected_devices_count ?? 0;
+  const isInitializing = !priceData || !reductionInfo;
+
+  // Reset selectedLimit when currentLimit changes (after successful mutation)
+  useEffect(() => {
+    setSelectedLimit(currentLimit);
+  }, [currentLimit]);
+
+  const handleChange = useCallback(
+    (value: number) => {
+      setSelectedLimit(value);
+      try {
+        hapticImpact('light');
+      } catch {
+        /* not available */
+      }
+    },
+    [hapticImpact],
+  );
+
+  // Purchase mutation
+  const purchaseMutation = useMutation({
+    mutationFn: () => subscriptionApi.purchaseDevices(devicesToAdd),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['subscription'] });
+      queryClient.invalidateQueries({ queryKey: ['devices'] });
+      queryClient.invalidateQueries({ queryKey: ['device-price'] });
+      onClose();
+    },
+  });
+
+  // Reduce mutation
+  const reduceMutation = useMutation({
+    mutationFn: () => subscriptionApi.reduceDevices(selectedLimit),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['subscription'] });
+      queryClient.invalidateQueries({ queryKey: ['devices'] });
+      queryClient.invalidateQueries({ queryKey: ['device-reduction-info'] });
+      onClose();
+    },
+  });
+
+  const isPending = purchaseMutation.isPending || reduceMutation.isPending;
+
+  const canSubmit = (() => {
+    if (mode === 'idle' || isPending) return false;
+    if (mode === 'purchase') {
+      if (!priceData?.available) return false;
+      if (priceData.total_price_kopeks && priceData.total_price_kopeks > balanceKopeks)
+        return false;
+      return true;
+    }
+    if (mode === 'reduce') {
+      if (reductionInfo?.available === false) return false;
+      if (selectedLimit < connectedCount) return false;
+      if (selectedLimit < minLimit) return false;
+      return true;
+    }
+    return false;
+  })();
+
+  const handleSubmit = () => {
+    if (mode === 'purchase') purchaseMutation.mutate();
+    if (mode === 'reduce') reduceMutation.mutate();
+  };
+
+  const mutationError = purchaseMutation.error || reduceMutation.error;
+
+  return (
+    <div
+      className="relative overflow-hidden rounded-3xl"
+      style={{
+        background: g.cardBg,
+        border: `1px solid ${g.cardBorder}`,
+        boxShadow: g.shadow,
+        padding: '24px 28px',
+      }}
+    >
+      {/* Header */}
+      <div className="mb-6 flex items-center justify-between">
+        <h2 className="text-base font-bold tracking-tight text-dark-50">
+          {t('subscription.deviceManager.title')}
+        </h2>
+        <button onClick={onClose} className="text-sm text-dark-400 hover:text-dark-200">
+          ✕
+        </button>
+      </div>
+
+      {isInitializing ? (
+        <div className="flex items-center justify-center py-8">
+          <span className="h-5 w-5 animate-spin rounded-full border-2 border-accent-400/30 border-t-accent-400" />
+        </div>
+      ) : (
+        <div className="space-y-5">
+          {/* Number badge + label */}
+          <div className="flex items-center gap-3">
+            <div
+              className="flex h-12 w-12 items-center justify-center rounded-2xl text-lg font-bold"
+              style={{
+                background: `${accentColor}15`,
+                color: accentColor,
+                border: `1px solid ${accentColor}25`,
+              }}
+            >
+              {selectedLimit}
+            </div>
+            <span className="text-base font-medium text-dark-100">
+              {t('subscription.deviceManager.devicesLabel')}
+            </span>
+          </div>
+
+          {/* Dot selector */}
+          {maxLimit > minLimit && (
+            <DotStepSelector
+              min={minLimit}
+              max={maxLimit}
+              current={currentLimit}
+              selected={selectedLimit}
+              connectedCount={connectedCount}
+              onChange={handleChange}
+              accentColor={accentColor}
+              isDark={isDark}
+            />
+          )}
+
+          {/* New limit info */}
+          {mode !== 'idle' && (
+            <div className="text-center text-sm" style={{ color: g.textSecondary }}>
+              {t('subscription.additionalOptions.newDeviceLimit', { count: selectedLimit })}
+            </div>
+          )}
+
+          {/* Purchase info */}
+          {mode === 'purchase' && priceData?.available && priceData.price_per_device_label && (
+            <div className="text-center">
+              <div className="mb-2 text-sm" style={{ color: g.textSecondary }}>
+                {priceData.discount_percent && priceData.discount_percent > 0 ? (
+                  <span>
+                    <span className="line-through" style={{ color: g.textMuted }}>
+                      {formatPrice(priceData.original_price_per_device_kopeks || 0)}
+                    </span>
+                    <span className="mx-1">{priceData.price_per_device_label}</span>
+                  </span>
+                ) : (
+                  priceData.price_per_device_label
+                )}
+                /{t('subscription.perDevice').replace('/ ', '')} (
+                {t('subscription.days', { count: priceData.days_left })})
+              </div>
+
+              {priceData.discount_percent && priceData.discount_percent > 0 && (
+                <div className="mb-2">
+                  <span className="inline-block rounded-full bg-success-500/20 px-2.5 py-0.5 text-sm font-medium text-success-400">
+                    -{priceData.discount_percent}%
+                  </span>
+                </div>
+              )}
+
+              {priceData.total_price_kopeks === 0 ? (
+                <div className="text-2xl font-bold text-success-400">
+                  {t('subscription.switchTariff.free')}
+                </div>
+              ) : (
+                <div className="text-2xl font-bold text-accent-400">
+                  {priceData.discount_percent &&
+                    priceData.discount_percent > 0 &&
+                    priceData.base_total_price_kopeks && (
+                      <span className="mr-2 text-lg line-through" style={{ color: g.textMuted }}>
+                        {formatPrice(priceData.base_total_price_kopeks)}
+                      </span>
+                    )}
+                  {priceData.total_price_label}
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* Purchase unavailable reason */}
+          {mode === 'purchase' && priceData?.available === false && priceData.reason && (
+            <div className="rounded-lg bg-warning-500/10 p-3 text-center text-sm text-warning-400">
+              {priceData.reason}
+            </div>
+          )}
+
+          {/* Reduce unavailable reason */}
+          {mode === 'reduce' && reductionInfo?.available === false && reductionInfo.reason && (
+            <div className="rounded-lg bg-warning-500/10 p-3 text-center text-sm text-warning-400">
+              {reductionInfo.reason}
+            </div>
+          )}
+
+          {/* Reduce: connected devices warning */}
+          {mode === 'reduce' &&
+            reductionInfo?.available !== false &&
+            connectedCount > selectedLimit && (
+              <div className="rounded-lg bg-warning-500/10 p-3 text-center text-sm text-warning-400">
+                {t('subscription.additionalOptions.disconnectDevicesFirst', {
+                  count: connectedCount,
+                })}
+              </div>
+            )}
+
+          {/* Reduce info */}
+          {mode === 'reduce' && reductionInfo && connectedCount <= selectedLimit && (
+            <div className="space-y-1 text-center text-sm" style={{ color: g.textSecondary }}>
+              <div>
+                {t('subscription.additionalOptions.connectedDevices', { count: connectedCount })}
+              </div>
+            </div>
+          )}
+
+          {/* Insufficient balance */}
+          {mode === 'purchase' &&
+            priceData?.available &&
+            priceData.total_price_kopeks &&
+            priceData.total_price_kopeks > balanceKopeks && (
+              <InsufficientBalancePrompt
+                missingAmountKopeks={priceData.total_price_kopeks - balanceKopeks}
+                compact
+                onBeforeTopUp={async () => {
+                  await subscriptionApi.saveDevicesCart(devicesToAdd);
+                }}
+              />
+            )}
+
+          {/* Action button */}
+          <button onClick={handleSubmit} disabled={!canSubmit} className="btn-primary w-full py-3">
+            {isPending ? (
+              <span className="flex items-center justify-center gap-2">
+                <span className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
+              </span>
+            ) : mode === 'reduce' ? (
+              t('subscription.additionalOptions.reduce')
+            ) : (
+              t('subscription.additionalOptions.buy')
+            )}
+          </button>
+
+          {/* Error */}
+          {mutationError && (
+            <div className="text-center text-sm text-error-400">
+              {getErrorMessage(mutationError)}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── Trigger Button ───
+
+interface DeviceManagerTriggerProps {
+  deviceLimit: number;
+  isDark: boolean;
+  onClick: () => void;
+}
+
+export function DeviceManagerTrigger({ deviceLimit, isDark, onClick }: DeviceManagerTriggerProps) {
+  const { t } = useTranslation();
+  const g = getGlassColors(isDark);
+
+  return (
+    <div
+      className="relative overflow-hidden rounded-3xl"
+      style={{
+        background: g.cardBg,
+        border: `1px solid ${g.cardBorder}`,
+        boxShadow: g.shadow,
+        padding: '24px 28px',
+      }}
+    >
+      <h2 className="mb-4 text-base font-bold tracking-tight text-dark-50">
+        {t('subscription.additionalOptions.title')}
+      </h2>
+      <button
+        onClick={onClick}
+        className={`w-full rounded-xl border p-4 text-left transition-colors ${isDark ? 'border-dark-700/50 bg-dark-800/50 hover:border-dark-600' : 'border-champagne-300/60 bg-champagne-200/40 hover:border-champagne-400'}`}
+      >
+        <div className="flex items-center justify-between">
+          <div>
+            <div className="font-medium text-dark-100">{t('subscription.deviceManager.title')}</div>
+            <div className="mt-1 text-sm text-dark-400">
+              {t('subscription.additionalOptions.currentDeviceLimit', { count: deviceLimit })}
+            </div>
+          </div>
+          <svg
+            className="h-5 w-5 text-dark-400"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            strokeWidth={2}
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
+          </svg>
+        </div>
+      </button>
+    </div>
+  );
+}
diff --git a/src/locales/en.json b/src/locales/en.json
index 130143d..25edf3d 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -529,6 +529,10 @@
       "manageServers": "Server management",
       "manageServersTitle": "Server management"
     },
+    "deviceManager": {
+      "title": "Change device count",
+      "devicesLabel": "Devices"
+    },
     "serverManagement": {
       "statusLegend": "✅ — connected • ➕ — will be added (paid) • ➖ — will be disconnected",
       "discountBanner": "Your server discount: -{{percent}}%",
diff --git a/src/locales/fa.json b/src/locales/fa.json
index 89df8b6..53e82a9 100644
--- a/src/locales/fa.json
+++ b/src/locales/fa.json
@@ -351,6 +351,10 @@
       "manageServers": "مدیریت سرورها",
       "manageServersTitle": "مدیریت سرورها"
     },
+    "deviceManager": {
+      "title": "تغییر تعداد دستگاه‌ها",
+      "devicesLabel": "دستگاه‌ها"
+    },
     "serverManagement": {
       "statusLegend": "✅ — متصل • ➕ — اضافه خواهد شد (پولی) • ➖ — قطع خواهد شد",
       "discountBanner": "تخفیف سرور شما: -{{percent}}%",
diff --git a/src/locales/ru.json b/src/locales/ru.json
index 4f5022e..7b814c4 100644
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@@ -557,6 +557,10 @@
       "manageServers": "Управление серверами",
       "manageServersTitle": "Управление серверами"
     },
+    "deviceManager": {
+      "title": "Изменить кол-во устройств",
+      "devicesLabel": "Устройства"
+    },
     "serverManagement": {
       "statusLegend": "✅ — подключено • ➕ — будет добавлено (платно) • ➖ — будет отключено",
       "discountBanner": "Ваша скидка на серверы: -{{percent}}%",
diff --git a/src/locales/zh.json b/src/locales/zh.json
index 23640a2..2c2e054 100644
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -351,6 +351,10 @@
       "manageServers": "服务器管理",
       "manageServersTitle": "服务器管理"
     },
+    "deviceManager": {
+      "title": "更改设备数量",
+      "devicesLabel": "设备"
+    },
     "serverManagement": {
       "statusLegend": "✅ — 已连接 • ➕ — 将添加（付费）• ➖ — 将断开",
       "discountBanner": "您的服务器折扣：-{{percent}}%",
diff --git a/src/pages/Subscription.tsx b/src/pages/Subscription.tsx
index 6e0a54a..b85ff46 100644
--- a/src/pages/Subscription.tsx
+++ b/src/pages/Subscription.tsx
@@ -13,6 +13,7 @@ import InsufficientBalancePrompt from '../components/InsufficientBalancePrompt';
 import { useCurrency } from '../hooks/useCurrency';
 import { useCloseOnSuccessNotification } from '../store/successNotification';
 import PurchaseCTAButton from '../components/subscription/PurchaseCTAButton';
+import DeviceManager, { DeviceManagerTrigger } from '../components/subscription/DeviceManager';
 import { CopyIcon, CheckIcon } from '../components/icons';
 import {
   getErrorMessage,
@@ -175,10 +176,7 @@ export default function Subscription() {
   const formatPrice = (kopeks: number) => `${formatAmount(kopeks / 100)} ${currencySymbol}`;
 
   // Device/traffic topup state
-  const [showDeviceTopup, setShowDeviceTopup] = useState(false);
-  const [devicesToAdd, setDevicesToAdd] = useState(1);
-  const [showDeviceReduction, setShowDeviceReduction] = useState(false);
-  const [targetDeviceLimit, setTargetDeviceLimit] = useState<number>(1);
+  const [showDeviceManager, setShowDeviceManager] = useState(false);
   const [showTrafficTopup, setShowTrafficTopup] = useState(false);
   const [selectedTrafficPackage, setSelectedTrafficPackage] = useState<number | null>(null);
   const [showServerManagement, setShowServerManagement] = useState(false);
@@ -255,61 +253,12 @@ export default function Subscription() {
 
   // Auto-close all modals/forms when success notification appears
   const handleCloseAllModals = useCallback(() => {
-    setShowDeviceTopup(false);
-    setShowDeviceReduction(false);
+    setShowDeviceManager(false);
     setShowTrafficTopup(false);
     setShowServerManagement(false);
   }, []);
   useCloseOnSuccessNotification(handleCloseAllModals);
 
-  // Device price query
-  const { data: devicePriceData } = useQuery({
-    queryKey: ['device-price', devicesToAdd],
-    queryFn: () => subscriptionApi.getDevicePrice(devicesToAdd),
-    enabled: showDeviceTopup && !!subscription,
-  });
-
-  // Device purchase mutation
-  const devicePurchaseMutation = useMutation({
-    mutationFn: () => subscriptionApi.purchaseDevices(devicesToAdd),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['subscription'] });
-      queryClient.invalidateQueries({ queryKey: ['devices'] });
-      setShowDeviceTopup(false);
-      setDevicesToAdd(1);
-    },
-  });
-
-  // Device reduction info query
-  const { data: deviceReductionInfo } = useQuery({
-    queryKey: ['device-reduction-info'],
-    queryFn: subscriptionApi.getDeviceReductionInfo,
-    enabled: showDeviceReduction && !!subscription,
-  });
-
-  // Initialize target device limit when reduction info loads
-  useEffect(() => {
-    if (deviceReductionInfo && showDeviceReduction) {
-      setTargetDeviceLimit(
-        Math.max(
-          deviceReductionInfo.min_device_limit,
-          deviceReductionInfo.current_device_limit - 1,
-        ),
-      );
-    }
-  }, [deviceReductionInfo, showDeviceReduction]);
-
-  // Device reduction mutation
-  const deviceReductionMutation = useMutation({
-    mutationFn: () => subscriptionApi.reduceDevices(targetDeviceLimit),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['subscription'] });
-      queryClient.invalidateQueries({ queryKey: ['devices'] });
-      queryClient.invalidateQueries({ queryKey: ['device-reduction-info'] });
-      setShowDeviceReduction(false);
-    },
-  });
-
   // Traffic packages query
   const { data: trafficPackages } = useQuery({
     queryKey: ['traffic-packages'],
@@ -1125,233 +1074,60 @@ export default function Subscription() {
       {/* Purchase / Renewal CTA */}
       <PurchaseCTAButton subscription={subscription} />
 
-      {/* Additional Options (Buy Devices) */}
+      {/* Device Manager */}
       {subscription &&
         subscription.is_active &&
         !subscription.is_trial &&
-        subscription.device_limit !== 0 && (
-          <div
-            className="relative overflow-hidden rounded-3xl"
-            style={{
-              background: g.cardBg,
-              border: `1px solid ${g.cardBorder}`,
-              boxShadow: g.shadow,
-              padding: '24px 28px',
-            }}
-          >
-            <h2 className="mb-4 text-base font-bold tracking-tight text-dark-50">
-              {t('subscription.additionalOptions.title')}
-            </h2>
+        subscription.device_limit !== 0 &&
+        (showDeviceManager ? (
+          <DeviceManager
+            subscription={subscription}
+            balanceKopeks={purchaseOptions?.balance_kopeks ?? 0}
+            isDark={isDark}
+            accentColor={zone.mainHex}
+            onClose={() => setShowDeviceManager(false)}
+          />
+        ) : (
+          <DeviceManagerTrigger
+            deviceLimit={subscription.device_limit}
+            isDark={isDark}
+            onClick={() => setShowDeviceManager(true)}
+          />
+        ))}
 
-            {/* Buy Devices */}
-            {!showDeviceTopup ? (
-              <button
-                onClick={() => setShowDeviceTopup(true)}
-                className={`w-full rounded-xl border p-4 text-left transition-colors ${isDark ? 'border-dark-700/50 bg-dark-800/50 hover:border-dark-600' : 'border-champagne-300/60 bg-champagne-200/40 hover:border-champagne-400'}`}
-              >
-                <div className="flex items-center justify-between">
-                  <div>
-                    <div className="font-medium text-dark-100">
-                      {t('subscription.additionalOptions.buyDevices')}
-                    </div>
-                    <div className="mt-1 text-sm text-dark-400">
-                      {t('subscription.additionalOptions.currentDeviceLimit', {
-                        count: subscription.device_limit,
-                      })}
-                    </div>
-                  </div>
-                  <svg
-                    className="h-5 w-5 text-dark-400"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                    strokeWidth={2}
-                  >
-                    <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
-                  </svg>
-                </div>
-              </button>
-            ) : (
-              <div
-                className={`rounded-xl border p-5 ${isDark ? 'border-dark-700/50 bg-dark-800/50' : 'border-champagne-300/60 bg-champagne-200/40'}`}
-              >
-                <div className="mb-4 flex items-center justify-between">
-                  <h3 className="font-medium text-dark-100">{t('subscription.buyDevices')}</h3>
-                  <button
-                    onClick={() => setShowDeviceTopup(false)}
-                    className="text-sm text-dark-400 hover:text-dark-200"
-                  >
-                    ✕
-                  </button>
-                </div>
+      {/* Additional Options (Traffic, Servers) */}
+      {subscription && subscription.is_active && !subscription.is_trial && (
+        <div
+          className="relative overflow-hidden rounded-3xl"
+          style={{
+            background: g.cardBg,
+            border: `1px solid ${g.cardBorder}`,
+            boxShadow: g.shadow,
+            padding: '24px 28px',
+          }}
+        >
+          <h2 className="mb-4 text-base font-bold tracking-tight text-dark-50">
+            {t('subscription.additionalOptions.title')}
+          </h2>
 
-                {/* Check if completely unavailable (no subscription, price not set, etc.) */}
-                {devicePriceData?.available === false && !devicePriceData?.max_device_limit ? (
-                  <div className="py-4 text-center text-sm text-dark-400">
-                    {devicePriceData.reason ||
-                      t('subscription.additionalOptions.devicesUnavailable')}
-                  </div>
-                ) : (
-                  <div className="space-y-4">
-                    {/* Device selector - show even at max limit */}
-                    <div className="flex items-center justify-center gap-6">
-                      <button
-                        onClick={() => setDevicesToAdd(Math.max(1, devicesToAdd - 1))}
-                        disabled={devicesToAdd <= 1}
-                        className="btn-secondary flex h-12 w-12 items-center justify-center !p-0 text-2xl"
-                      >
-                        -
-                      </button>
-                      <div className="text-center">
-                        <div className="text-4xl font-bold text-dark-100">{devicesToAdd}</div>
-                        <div className="text-sm text-dark-500">
-                          {t('subscription.additionalOptions.devicesUnit')}
-                        </div>
-                      </div>
-                      <button
-                        onClick={() => setDevicesToAdd(devicesToAdd + 1)}
-                        disabled={
-                          devicePriceData?.max_device_limit
-                            ? (devicePriceData.current_device_limit || 0) + devicesToAdd >=
-                              devicePriceData.max_device_limit
-                            : false
-                        }
-                        className="btn-secondary flex h-12 w-12 items-center justify-center !p-0 text-2xl"
-                      >
-                        +
-                      </button>
-                    </div>
-
-                    {/* Show limit info when at or near max */}
-                    {devicePriceData?.max_device_limit && (
-                      <div className="text-center text-sm text-dark-400">
-                        {t('subscription.additionalOptions.currentDeviceLimit', {
-                          count: devicePriceData.current_device_limit || subscription.device_limit,
-                        })}{' '}
-                        /{' '}
-                        {t('subscription.additionalOptions.maxDevices', {
-                          count: devicePriceData.max_device_limit,
-                        })}
-                      </div>
-                    )}
-
-                    {/* Show reason if can't add requested amount */}
-                    {devicePriceData?.available === false && devicePriceData?.reason && (
-                      <div className="rounded-lg bg-warning-500/10 p-3 text-center text-sm text-warning-400">
-                        {devicePriceData.reason}
-                      </div>
-                    )}
-
-                    {/* Price info - only when available */}
-                    {devicePriceData?.available && devicePriceData.price_per_device_label && (
-                      <div className="text-center">
-                        <div className="mb-2 text-sm text-dark-400">
-                          {/* Show original price with strikethrough if discount */}
-                          {devicePriceData.discount_percent &&
-                          devicePriceData.discount_percent > 0 ? (
-                            <span>
-                              <span className="text-dark-500 line-through">
-                                {formatPrice(devicePriceData.original_price_per_device_kopeks || 0)}
-                              </span>
-                              <span className="mx-1">{devicePriceData.price_per_device_label}</span>
-                            </span>
-                          ) : (
-                            devicePriceData.price_per_device_label
-                          )}
-                          /{t('subscription.perDevice').replace('/ ', '')} (
-                          {t('subscription.days', { count: devicePriceData.days_left })})
-                        </div>
-                        {/* Discount badge */}
-                        {devicePriceData.discount_percent &&
-                          devicePriceData.discount_percent > 0 && (
-                            <div className="mb-2">
-                              <span className="inline-block rounded-full bg-success-500/20 px-2.5 py-0.5 text-sm font-medium text-success-400">
-                                -{devicePriceData.discount_percent}%
-                              </span>
-                            </div>
-                          )}
-                        {/* Total price - show as free if 100% discount or 0 */}
-                        {devicePriceData.total_price_kopeks === 0 ? (
-                          <div className="text-2xl font-bold text-success-400">
-                            {t('subscription.switchTariff.free')}
-                          </div>
-                        ) : (
-                          <div className="text-2xl font-bold text-accent-400">
-                            {/* Show original total with strikethrough if discount */}
-                            {devicePriceData.discount_percent &&
-                              devicePriceData.discount_percent > 0 &&
-                              devicePriceData.base_total_price_kopeks && (
-                                <span className="mr-2 text-lg text-dark-500 line-through">
-                                  {formatPrice(devicePriceData.base_total_price_kopeks)}
-                                </span>
-                              )}
-                            {devicePriceData.total_price_label}
-                          </div>
-                        )}
-                      </div>
-                    )}
-
-                    {devicePriceData?.available &&
-                      purchaseOptions &&
-                      devicePriceData.total_price_kopeks &&
-                      devicePriceData.total_price_kopeks > purchaseOptions.balance_kopeks && (
-                        <InsufficientBalancePrompt
-                          missingAmountKopeks={
-                            devicePriceData.total_price_kopeks - purchaseOptions.balance_kopeks
-                          }
-                          compact
-                          onBeforeTopUp={async () => {
-                            await subscriptionApi.saveDevicesCart(devicesToAdd);
-                          }}
-                        />
-                      )}
-
-                    <button
-                      onClick={() => devicePurchaseMutation.mutate()}
-                      disabled={
-                        devicePurchaseMutation.isPending ||
-                        !devicePriceData?.available ||
-                        !!(
-                          devicePriceData?.total_price_kopeks &&
-                          purchaseOptions &&
-                          devicePriceData.total_price_kopeks > purchaseOptions.balance_kopeks
-                        )
-                      }
-                      className="btn-primary w-full py-3"
-                    >
-                      {devicePurchaseMutation.isPending ? (
-                        <span className="flex items-center justify-center gap-2">
-                          <span className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
-                        </span>
-                      ) : (
-                        t('subscription.additionalOptions.buy')
-                      )}
-                    </button>
-
-                    {devicePurchaseMutation.isError && (
-                      <div className="text-center text-sm text-error-400">
-                        {getErrorMessage(devicePurchaseMutation.error)}
-                      </div>
-                    )}
-                  </div>
-                )}
-              </div>
-            )}
-
-            {/* Reduce Devices */}
+          {/* Buy Traffic */}
+          {subscription.traffic_limit_gb > 0 && (
             <div className="mt-4">
-              {!showDeviceReduction ? (
+              {!showTrafficTopup ? (
                 <button
-                  onClick={() => setShowDeviceReduction(true)}
+                  onClick={() => setShowTrafficTopup(true)}
                   className={`w-full rounded-xl border p-4 text-left transition-colors ${isDark ? 'border-dark-700/50 bg-dark-800/50 hover:border-dark-600' : 'border-champagne-300/60 bg-champagne-200/40 hover:border-champagne-400'}`}
                 >
                   <div className="flex items-center justify-between">
                     <div>
                       <div className="font-medium text-dark-100">
-                        {t('subscription.additionalOptions.reduceDevices')}
+                        {t('subscription.additionalOptions.buyTraffic')}
                       </div>
                       <div className="mt-1 text-sm text-dark-400">
-                        {t('subscription.additionalOptions.reduceDevicesDescription')}
+                        {t('subscription.additionalOptions.currentTrafficLimit', {
+                          limit: subscription.traffic_limit_gb,
+                          used: subscription.traffic_used_gb.toFixed(1),
+                        })}
                       </div>
                     </div>
                     <svg
@@ -1371,598 +1147,417 @@ export default function Subscription() {
                 >
                   <div className="mb-4 flex items-center justify-between">
                     <h3 className="font-medium text-dark-100">
-                      {t('subscription.additionalOptions.reduceDevicesTitle')}
+                      {t('subscription.additionalOptions.buyTrafficTitle')}
                     </h3>
                     <button
-                      onClick={() => setShowDeviceReduction(false)}
+                      onClick={() => {
+                        setShowTrafficTopup(false);
+                        setSelectedTrafficPackage(null);
+                      }}
                       className="text-sm text-dark-400 hover:text-dark-200"
                     >
                       ✕
                     </button>
                   </div>
 
-                  {deviceReductionInfo?.available === false ? (
+                  <div
+                    className={`mb-4 rounded-lg p-2 text-xs ${isDark ? 'bg-dark-700/30 text-dark-500' : 'bg-champagne-300/40 text-champagne-600'}`}
+                  >
+                    ⚠️ {t('subscription.additionalOptions.trafficWarning')}
+                  </div>
+
+                  {!trafficPackages || trafficPackages.length === 0 ? (
                     <div className="py-4 text-center text-sm text-dark-400">
-                      {deviceReductionInfo.reason ||
-                        t('subscription.additionalOptions.reduceUnavailable')}
-                    </div>
-                  ) : deviceReductionInfo ? (
-                    <div className="space-y-4">
-                      {/* Device limit selector */}
-                      <div className="flex items-center justify-center gap-6">
-                        <button
-                          onClick={() =>
-                            setTargetDeviceLimit(
-                              Math.max(
-                                Math.max(
-                                  deviceReductionInfo.min_device_limit,
-                                  deviceReductionInfo.connected_devices_count,
-                                ),
-                                targetDeviceLimit - 1,
-                              ),
-                            )
-                          }
-                          disabled={
-                            targetDeviceLimit <=
-                            Math.max(
-                              deviceReductionInfo.min_device_limit,
-                              deviceReductionInfo.connected_devices_count,
-                            )
-                          }
-                          className="btn-secondary flex h-12 w-12 items-center justify-center !p-0 text-2xl"
-                        >
-                          -
-                        </button>
-                        <div className="text-center">
-                          <div className="text-4xl font-bold text-dark-100">
-                            {targetDeviceLimit}
-                          </div>
-                          <div className="text-sm text-dark-500">
-                            {t('subscription.additionalOptions.devicesUnit')}
-                          </div>
-                        </div>
-                        <button
-                          onClick={() =>
-                            setTargetDeviceLimit(
-                              Math.min(
-                                deviceReductionInfo.current_device_limit - 1,
-                                targetDeviceLimit + 1,
-                              ),
-                            )
-                          }
-                          disabled={
-                            targetDeviceLimit >= deviceReductionInfo.current_device_limit - 1
-                          }
-                          className="btn-secondary flex h-12 w-12 items-center justify-center !p-0 text-2xl"
-                        >
-                          +
-                        </button>
-                      </div>
-
-                      {/* Info */}
-                      <div className="space-y-1 text-center text-sm text-dark-400">
-                        <div>
-                          {t('subscription.additionalOptions.currentDeviceLimit', {
-                            count: deviceReductionInfo.current_device_limit,
-                          })}
-                        </div>
-                        <div>
-                          {t('subscription.additionalOptions.minDeviceLimit', {
-                            count: deviceReductionInfo.min_device_limit,
-                          })}
-                        </div>
-                        <div>
-                          {t('subscription.additionalOptions.connectedDevices', {
-                            count: deviceReductionInfo.connected_devices_count,
-                          })}
-                        </div>
-                      </div>
-
-                      {/* Warning if connected devices block reduction */}
-                      {deviceReductionInfo.connected_devices_count >
-                        deviceReductionInfo.min_device_limit && (
-                        <div className="rounded-lg bg-warning-500/10 p-3 text-center text-sm text-warning-400">
-                          {t('subscription.additionalOptions.disconnectDevicesFirst', {
-                            count: deviceReductionInfo.connected_devices_count,
-                          })}
-                        </div>
-                      )}
-
-                      {/* New limit preview */}
-                      <div className="text-center">
-                        <div className="text-sm text-dark-400">
-                          {t('subscription.additionalOptions.newDeviceLimit', {
-                            count: targetDeviceLimit,
-                          })}
-                        </div>
-                      </div>
-
-                      <button
-                        onClick={() => deviceReductionMutation.mutate()}
-                        disabled={
-                          deviceReductionMutation.isPending ||
-                          targetDeviceLimit >= deviceReductionInfo.current_device_limit ||
-                          targetDeviceLimit < deviceReductionInfo.min_device_limit ||
-                          targetDeviceLimit < deviceReductionInfo.connected_devices_count
-                        }
-                        className="btn-primary w-full py-3"
-                      >
-                        {deviceReductionMutation.isPending ? (
-                          <span className="flex items-center justify-center gap-2">
-                            <span className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
-                            {t('subscription.additionalOptions.reducing')}
-                          </span>
-                        ) : (
-                          t('subscription.additionalOptions.reduce')
-                        )}
-                      </button>
-
-                      {deviceReductionMutation.isError && (
-                        <div className="text-center text-sm text-error-400">
-                          {getErrorMessage(deviceReductionMutation.error)}
-                        </div>
-                      )}
+                      {t('subscription.additionalOptions.trafficUnavailable')}
                     </div>
                   ) : (
-                    <div className="flex items-center justify-center py-4">
-                      <span className="h-5 w-5 animate-spin rounded-full border-2 border-accent-400/30 border-t-accent-400" />
+                    <div className="space-y-4">
+                      <div className="grid grid-cols-2 gap-3">
+                        {trafficPackages.map((pkg) => (
+                          <button
+                            key={pkg.gb}
+                            onClick={() => setSelectedTrafficPackage(pkg.gb)}
+                            className={`rounded-xl border p-4 text-center transition-all ${
+                              selectedTrafficPackage === pkg.gb
+                                ? 'border-accent-500 bg-accent-500/10'
+                                : isDark
+                                  ? 'border-dark-700/50 bg-dark-800/50 hover:border-dark-600'
+                                  : 'border-champagne-300/60 bg-champagne-200/40 hover:border-champagne-400'
+                            }`}
+                          >
+                            <div className="text-lg font-semibold text-dark-100">
+                              {pkg.is_unlimited
+                                ? '♾️ ' + t('subscription.additionalOptions.unlimited')
+                                : `${pkg.gb} ${t('common.units.gb')}`}
+                            </div>
+                            {/* Discount badge */}
+                            {pkg.discount_percent && pkg.discount_percent > 0 && (
+                              <div className="mb-1">
+                                <span className="inline-block rounded-full bg-success-500/20 px-2 py-0.5 text-xs font-medium text-success-400">
+                                  -{pkg.discount_percent}%
+                                </span>
+                              </div>
+                            )}
+                            {/* Price with original strikethrough if discount */}
+                            <div className="font-medium text-accent-400">
+                              {pkg.discount_percent &&
+                              pkg.discount_percent > 0 &&
+                              pkg.base_price_kopeks ? (
+                                <>
+                                  <span className="mr-1 text-sm text-dark-500 line-through">
+                                    {formatPrice(pkg.base_price_kopeks)}
+                                  </span>
+                                  {formatPrice(pkg.price_kopeks)}
+                                </>
+                              ) : (
+                                formatPrice(pkg.price_kopeks)
+                              )}
+                            </div>
+                          </button>
+                        ))}
+                      </div>
+
+                      {selectedTrafficPackage !== null &&
+                        (() => {
+                          const selectedPkg = trafficPackages.find(
+                            (p) => p.gb === selectedTrafficPackage,
+                          );
+                          const hasEnoughBalance =
+                            !selectedPkg ||
+                            !purchaseOptions ||
+                            selectedPkg.price_kopeks <= purchaseOptions.balance_kopeks;
+                          const missingAmount =
+                            selectedPkg && purchaseOptions
+                              ? selectedPkg.price_kopeks - purchaseOptions.balance_kopeks
+                              : 0;
+
+                          return (
+                            <>
+                              {!hasEnoughBalance && missingAmount > 0 && (
+                                <InsufficientBalancePrompt
+                                  missingAmountKopeks={missingAmount}
+                                  compact
+                                  className="mb-3"
+                                  onBeforeTopUp={async () => {
+                                    await subscriptionApi.saveTrafficCart(selectedTrafficPackage);
+                                  }}
+                                />
+                              )}
+                              <button
+                                onClick={() =>
+                                  trafficPurchaseMutation.mutate(selectedTrafficPackage)
+                                }
+                                disabled={trafficPurchaseMutation.isPending || !hasEnoughBalance}
+                                className="btn-primary w-full py-3"
+                              >
+                                {trafficPurchaseMutation.isPending ? (
+                                  <span className="flex items-center justify-center gap-2">
+                                    <span className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
+                                  </span>
+                                ) : selectedPkg?.is_unlimited ? (
+                                  t('subscription.additionalOptions.buyUnlimited')
+                                ) : (
+                                  t('subscription.additionalOptions.buyTrafficGb', {
+                                    gb: selectedTrafficPackage,
+                                  })
+                                )}
+                              </button>
+                            </>
+                          );
+                        })()}
+
+                      {trafficPurchaseMutation.isError && (
+                        <div className="text-center text-sm text-error-400">
+                          {getErrorMessage(trafficPurchaseMutation.error)}
+                        </div>
+                      )}
                     </div>
                   )}
                 </div>
               )}
             </div>
+          )}
 
-            {/* Buy Traffic */}
-            {subscription.traffic_limit_gb > 0 && (
-              <div className="mt-4">
-                {!showTrafficTopup ? (
-                  <button
-                    onClick={() => setShowTrafficTopup(true)}
-                    className={`w-full rounded-xl border p-4 text-left transition-colors ${isDark ? 'border-dark-700/50 bg-dark-800/50 hover:border-dark-600' : 'border-champagne-300/60 bg-champagne-200/40 hover:border-champagne-400'}`}
-                  >
-                    <div className="flex items-center justify-between">
-                      <div>
-                        <div className="font-medium text-dark-100">
-                          {t('subscription.additionalOptions.buyTraffic')}
-                        </div>
-                        <div className="mt-1 text-sm text-dark-400">
-                          {t('subscription.additionalOptions.currentTrafficLimit', {
-                            limit: subscription.traffic_limit_gb,
-                            used: subscription.traffic_used_gb.toFixed(1),
+          {/* Server Management - only in classic mode */}
+          {!isTariffsMode && (
+            <div className="mt-4">
+              {!showServerManagement ? (
+                <button
+                  onClick={() => setShowServerManagement(true)}
+                  className={`w-full rounded-xl border p-4 text-left transition-colors ${isDark ? 'border-dark-700/50 bg-dark-800/50 hover:border-dark-600' : 'border-champagne-300/60 bg-champagne-200/40 hover:border-champagne-400'}`}
+                >
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <div className="font-medium text-dark-100">
+                        {t('subscription.additionalOptions.manageServers')}
+                      </div>
+                      <div className="mt-1 text-sm text-dark-400">
+                        {t('subscription.servers', { count: subscription.servers?.length || 0 })}
+                      </div>
+                    </div>
+                    <svg
+                      className="h-5 w-5 text-dark-400"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                      strokeWidth={2}
+                    >
+                      <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
+                    </svg>
+                  </div>
+                </button>
+              ) : (
+                <div
+                  className={`rounded-xl border p-5 ${isDark ? 'border-dark-700/50 bg-dark-800/50' : 'border-champagne-300/60 bg-champagne-200/40'}`}
+                >
+                  <div className="mb-4 flex items-center justify-between">
+                    <h3 className="font-medium text-dark-100">
+                      {t('subscription.additionalOptions.manageServersTitle')}
+                    </h3>
+                    <button
+                      onClick={() => {
+                        setShowServerManagement(false);
+                        setSelectedServersToUpdate([]);
+                      }}
+                      className="text-sm text-dark-400 hover:text-dark-200"
+                    >
+                      ✕
+                    </button>
+                  </div>
+
+                  {countriesLoading ? (
+                    <div className="flex items-center justify-center py-8">
+                      <div className="h-8 w-8 animate-spin rounded-full border-2 border-accent-500 border-t-transparent" />
+                    </div>
+                  ) : countriesData && countriesData.countries.length > 0 ? (
+                    <div className="space-y-4">
+                      <div
+                        className={`rounded-lg p-2 text-xs ${isDark ? 'bg-dark-700/30 text-dark-500' : 'bg-champagne-300/40 text-champagne-600'}`}
+                      >
+                        {t('subscription.serverManagement.statusLegend')}
+                      </div>
+
+                      {countriesData.discount_percent > 0 && (
+                        <div className="rounded-lg border border-success-500/30 bg-success-500/10 p-2 text-xs text-success-400">
+                          🎁{' '}
+                          {t('subscription.serverManagement.discountBanner', {
+                            percent: countriesData.discount_percent,
                           })}
                         </div>
-                      </div>
-                      <svg
-                        className="h-5 w-5 text-dark-400"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        stroke="currentColor"
-                        strokeWidth={2}
-                      >
-                        <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
-                      </svg>
-                    </div>
-                  </button>
-                ) : (
-                  <div
-                    className={`rounded-xl border p-5 ${isDark ? 'border-dark-700/50 bg-dark-800/50' : 'border-champagne-300/60 bg-champagne-200/40'}`}
-                  >
-                    <div className="mb-4 flex items-center justify-between">
-                      <h3 className="font-medium text-dark-100">
-                        {t('subscription.additionalOptions.buyTrafficTitle')}
-                      </h3>
-                      <button
-                        onClick={() => {
-                          setShowTrafficTopup(false);
-                          setSelectedTrafficPackage(null);
-                        }}
-                        className="text-sm text-dark-400 hover:text-dark-200"
-                      >
-                        ✕
-                      </button>
-                    </div>
+                      )}
 
-                    <div
-                      className={`mb-4 rounded-lg p-2 text-xs ${isDark ? 'bg-dark-700/30 text-dark-500' : 'bg-champagne-300/40 text-champagne-600'}`}
-                    >
-                      ⚠️ {t('subscription.additionalOptions.trafficWarning')}
-                    </div>
-
-                    {!trafficPackages || trafficPackages.length === 0 ? (
-                      <div className="py-4 text-center text-sm text-dark-400">
-                        {t('subscription.additionalOptions.trafficUnavailable')}
-                      </div>
-                    ) : (
-                      <div className="space-y-4">
-                        <div className="grid grid-cols-2 gap-3">
-                          {trafficPackages.map((pkg) => (
-                            <button
-                              key={pkg.gb}
-                              onClick={() => setSelectedTrafficPackage(pkg.gb)}
-                              className={`rounded-xl border p-4 text-center transition-all ${
-                                selectedTrafficPackage === pkg.gb
-                                  ? 'border-accent-500 bg-accent-500/10'
-                                  : isDark
-                                    ? 'border-dark-700/50 bg-dark-800/50 hover:border-dark-600'
-                                    : 'border-champagne-300/60 bg-champagne-200/40 hover:border-champagne-400'
-                              }`}
-                            >
-                              <div className="text-lg font-semibold text-dark-100">
-                                {pkg.is_unlimited
-                                  ? '♾️ ' + t('subscription.additionalOptions.unlimited')
-                                  : `${pkg.gb} ${t('common.units.gb')}`}
-                              </div>
-                              {/* Discount badge */}
-                              {pkg.discount_percent && pkg.discount_percent > 0 && (
-                                <div className="mb-1">
-                                  <span className="inline-block rounded-full bg-success-500/20 px-2 py-0.5 text-xs font-medium text-success-400">
-                                    -{pkg.discount_percent}%
-                                  </span>
-                                </div>
-                              )}
-                              {/* Price with original strikethrough if discount */}
-                              <div className="font-medium text-accent-400">
-                                {pkg.discount_percent &&
-                                pkg.discount_percent > 0 &&
-                                pkg.base_price_kopeks ? (
-                                  <>
-                                    <span className="mr-1 text-sm text-dark-500 line-through">
-                                      {formatPrice(pkg.base_price_kopeks)}
-                                    </span>
-                                    {formatPrice(pkg.price_kopeks)}
-                                  </>
-                                ) : (
-                                  formatPrice(pkg.price_kopeks)
-                                )}
-                              </div>
-                            </button>
-                          ))}
-                        </div>
-
-                        {selectedTrafficPackage !== null &&
-                          (() => {
-                            const selectedPkg = trafficPackages.find(
-                              (p) => p.gb === selectedTrafficPackage,
-                            );
-                            const hasEnoughBalance =
-                              !selectedPkg ||
-                              !purchaseOptions ||
-                              selectedPkg.price_kopeks <= purchaseOptions.balance_kopeks;
-                            const missingAmount =
-                              selectedPkg && purchaseOptions
-                                ? selectedPkg.price_kopeks - purchaseOptions.balance_kopeks
-                                : 0;
+                      <div className="max-h-64 space-y-2 overflow-y-auto">
+                        {countriesData.countries
+                          .filter((country) => country.is_available || country.is_connected)
+                          .map((country) => {
+                            const isCurrentlyConnected = country.is_connected;
+                            const isSelected = selectedServersToUpdate.includes(country.uuid);
+                            const willBeAdded = !isCurrentlyConnected && isSelected;
+                            const willBeRemoved = isCurrentlyConnected && !isSelected;
 
                             return (
-                              <>
-                                {!hasEnoughBalance && missingAmount > 0 && (
-                                  <InsufficientBalancePrompt
-                                    missingAmountKopeks={missingAmount}
-                                    compact
-                                    className="mb-3"
-                                    onBeforeTopUp={async () => {
-                                      await subscriptionApi.saveTrafficCart(selectedTrafficPackage);
-                                    }}
-                                  />
-                                )}
-                                <button
-                                  onClick={() =>
-                                    trafficPurchaseMutation.mutate(selectedTrafficPackage)
+                              <button
+                                key={country.uuid}
+                                onClick={() => {
+                                  if (isSelected) {
+                                    setSelectedServersToUpdate((prev) =>
+                                      prev.filter((u) => u !== country.uuid),
+                                    );
+                                  } else {
+                                    setSelectedServersToUpdate((prev) => [...prev, country.uuid]);
                                   }
-                                  disabled={trafficPurchaseMutation.isPending || !hasEnoughBalance}
-                                  className="btn-primary w-full py-3"
-                                >
-                                  {trafficPurchaseMutation.isPending ? (
-                                    <span className="flex items-center justify-center gap-2">
-                                      <span className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
-                                    </span>
-                                  ) : selectedPkg?.is_unlimited ? (
-                                    t('subscription.additionalOptions.buyUnlimited')
-                                  ) : (
-                                    t('subscription.additionalOptions.buyTrafficGb', {
-                                      gb: selectedTrafficPackage,
-                                    })
-                                  )}
-                                </button>
-                              </>
-                            );
-                          })()}
-
-                        {trafficPurchaseMutation.isError && (
-                          <div className="text-center text-sm text-error-400">
-                            {getErrorMessage(trafficPurchaseMutation.error)}
-                          </div>
-                        )}
-                      </div>
-                    )}
-                  </div>
-                )}
-              </div>
-            )}
-
-            {/* Server Management - only in classic mode */}
-            {!isTariffsMode && (
-              <div className="mt-4">
-                {!showServerManagement ? (
-                  <button
-                    onClick={() => setShowServerManagement(true)}
-                    className={`w-full rounded-xl border p-4 text-left transition-colors ${isDark ? 'border-dark-700/50 bg-dark-800/50 hover:border-dark-600' : 'border-champagne-300/60 bg-champagne-200/40 hover:border-champagne-400'}`}
-                  >
-                    <div className="flex items-center justify-between">
-                      <div>
-                        <div className="font-medium text-dark-100">
-                          {t('subscription.additionalOptions.manageServers')}
-                        </div>
-                        <div className="mt-1 text-sm text-dark-400">
-                          {t('subscription.servers', { count: subscription.servers?.length || 0 })}
-                        </div>
-                      </div>
-                      <svg
-                        className="h-5 w-5 text-dark-400"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        stroke="currentColor"
-                        strokeWidth={2}
-                      >
-                        <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
-                      </svg>
-                    </div>
-                  </button>
-                ) : (
-                  <div
-                    className={`rounded-xl border p-5 ${isDark ? 'border-dark-700/50 bg-dark-800/50' : 'border-champagne-300/60 bg-champagne-200/40'}`}
-                  >
-                    <div className="mb-4 flex items-center justify-between">
-                      <h3 className="font-medium text-dark-100">
-                        {t('subscription.additionalOptions.manageServersTitle')}
-                      </h3>
-                      <button
-                        onClick={() => {
-                          setShowServerManagement(false);
-                          setSelectedServersToUpdate([]);
-                        }}
-                        className="text-sm text-dark-400 hover:text-dark-200"
-                      >
-                        ✕
-                      </button>
-                    </div>
-
-                    {countriesLoading ? (
-                      <div className="flex items-center justify-center py-8">
-                        <div className="h-8 w-8 animate-spin rounded-full border-2 border-accent-500 border-t-transparent" />
-                      </div>
-                    ) : countriesData && countriesData.countries.length > 0 ? (
-                      <div className="space-y-4">
-                        <div
-                          className={`rounded-lg p-2 text-xs ${isDark ? 'bg-dark-700/30 text-dark-500' : 'bg-champagne-300/40 text-champagne-600'}`}
-                        >
-                          {t('subscription.serverManagement.statusLegend')}
-                        </div>
-
-                        {countriesData.discount_percent > 0 && (
-                          <div className="rounded-lg border border-success-500/30 bg-success-500/10 p-2 text-xs text-success-400">
-                            🎁{' '}
-                            {t('subscription.serverManagement.discountBanner', {
-                              percent: countriesData.discount_percent,
-                            })}
-                          </div>
-                        )}
-
-                        <div className="max-h-64 space-y-2 overflow-y-auto">
-                          {countriesData.countries
-                            .filter((country) => country.is_available || country.is_connected)
-                            .map((country) => {
-                              const isCurrentlyConnected = country.is_connected;
-                              const isSelected = selectedServersToUpdate.includes(country.uuid);
-                              const willBeAdded = !isCurrentlyConnected && isSelected;
-                              const willBeRemoved = isCurrentlyConnected && !isSelected;
-
-                              return (
-                                <button
-                                  key={country.uuid}
-                                  onClick={() => {
-                                    if (isSelected) {
-                                      setSelectedServersToUpdate((prev) =>
-                                        prev.filter((u) => u !== country.uuid),
-                                      );
-                                    } else {
-                                      setSelectedServersToUpdate((prev) => [...prev, country.uuid]);
-                                    }
-                                  }}
-                                  disabled={!country.is_available && !isCurrentlyConnected}
-                                  className={`flex w-full items-center justify-between rounded-xl border p-3 text-left transition-all ${
-                                    isSelected
-                                      ? willBeAdded
-                                        ? 'border-success-500 bg-success-500/10'
-                                        : 'border-accent-500 bg-accent-500/10'
+                                }}
+                                disabled={!country.is_available && !isCurrentlyConnected}
+                                className={`flex w-full items-center justify-between rounded-xl border p-3 text-left transition-all ${
+                                  isSelected
+                                    ? willBeAdded
+                                      ? 'border-success-500 bg-success-500/10'
+                                      : 'border-accent-500 bg-accent-500/10'
+                                    : willBeRemoved
+                                      ? 'border-error-500/50 bg-error-500/5'
+                                      : isDark
+                                        ? 'border-dark-700/50 bg-dark-800/50 hover:border-dark-600'
+                                        : 'border-champagne-300/60 bg-champagne-200/40 hover:border-champagne-400'
+                                } ${!country.is_available && !isCurrentlyConnected ? 'cursor-not-allowed opacity-50' : ''}`}
+                              >
+                                <div className="flex items-center gap-3">
+                                  <span className="text-lg">
+                                    {willBeAdded
+                                      ? '➕'
                                       : willBeRemoved
-                                        ? 'border-error-500/50 bg-error-500/5'
-                                        : isDark
-                                          ? 'border-dark-700/50 bg-dark-800/50 hover:border-dark-600'
-                                          : 'border-champagne-300/60 bg-champagne-200/40 hover:border-champagne-400'
-                                  } ${!country.is_available && !isCurrentlyConnected ? 'cursor-not-allowed opacity-50' : ''}`}
-                                >
-                                  <div className="flex items-center gap-3">
-                                    <span className="text-lg">
-                                      {willBeAdded
-                                        ? '➕'
-                                        : willBeRemoved
-                                          ? '➖'
-                                          : isSelected
-                                            ? '✅'
-                                            : '⚪'}
-                                    </span>
-                                    <div>
-                                      <div className="flex items-center gap-2 font-medium text-dark-100">
-                                        {country.name}
-                                        {country.has_discount && !isCurrentlyConnected && (
-                                          <span className="rounded bg-success-500/20 px-1.5 py-0.5 text-xs text-success-400">
-                                            -{country.discount_percent}%
+                                        ? '➖'
+                                        : isSelected
+                                          ? '✅'
+                                          : '⚪'}
+                                  </span>
+                                  <div>
+                                    <div className="flex items-center gap-2 font-medium text-dark-100">
+                                      {country.name}
+                                      {country.has_discount && !isCurrentlyConnected && (
+                                        <span className="rounded bg-success-500/20 px-1.5 py-0.5 text-xs text-success-400">
+                                          -{country.discount_percent}%
+                                        </span>
+                                      )}
+                                    </div>
+                                    {willBeAdded && (
+                                      <div className="text-xs text-success-400">
+                                        +{formatPrice(country.price_kopeks)}{' '}
+                                        {t('subscription.serverManagement.forDays', {
+                                          days: countriesData.days_left,
+                                        })}
+                                        {country.has_discount && (
+                                          <span className="ml-1 text-dark-500 line-through">
+                                            {formatPrice(
+                                              Math.round(
+                                                (country.base_price_kopeks *
+                                                  countriesData.days_left) /
+                                                  30,
+                                              ),
+                                            )}
                                           </span>
                                         )}
                                       </div>
-                                      {willBeAdded && (
-                                        <div className="text-xs text-success-400">
-                                          +{formatPrice(country.price_kopeks)}{' '}
-                                          {t('subscription.serverManagement.forDays', {
-                                            days: countriesData.days_left,
-                                          })}
-                                          {country.has_discount && (
-                                            <span className="ml-1 text-dark-500 line-through">
-                                              {formatPrice(
-                                                Math.round(
-                                                  (country.base_price_kopeks *
-                                                    countriesData.days_left) /
-                                                    30,
-                                                ),
-                                              )}
-                                            </span>
-                                          )}
-                                        </div>
-                                      )}
-                                      {!willBeAdded && !isCurrentlyConnected && (
-                                        <div className="text-xs text-dark-500">
-                                          {formatPrice(country.price_per_month_kopeks)}
-                                          {t('subscription.serverManagement.perMonth')}
-                                          {country.has_discount && (
-                                            <span className="ml-1 text-dark-600 line-through">
-                                              {formatPrice(country.base_price_kopeks)}
-                                            </span>
-                                          )}
-                                        </div>
-                                      )}
-                                      {!country.is_available && !isCurrentlyConnected && (
-                                        <div className="text-xs text-dark-500">
-                                          {t('subscription.serverManagement.unavailable')}
-                                        </div>
-                                      )}
-                                    </div>
-                                  </div>
-                                  {country.country_code && (
-                                    <span className="text-xl">
-                                      {getFlagEmoji(country.country_code)}
-                                    </span>
-                                  )}
-                                </button>
-                              );
-                            })}
-                        </div>
-
-                        {(() => {
-                          const currentConnected = countriesData.countries
-                            .filter((c) => c.is_connected)
-                            .map((c) => c.uuid);
-                          const added = selectedServersToUpdate.filter(
-                            (u) => !currentConnected.includes(u),
-                          );
-                          const removed = currentConnected.filter(
-                            (u) => !selectedServersToUpdate.includes(u),
-                          );
-                          const hasChanges = added.length > 0 || removed.length > 0;
-
-                          // Calculate cost for added servers
-                          const addedServers = countriesData.countries.filter((c) =>
-                            added.includes(c.uuid),
-                          );
-                          const totalCost = addedServers.reduce(
-                            (sum, s) => sum + s.price_kopeks,
-                            0,
-                          );
-                          const hasEnoughBalance =
-                            !purchaseOptions || totalCost <= purchaseOptions.balance_kopeks;
-                          const missingAmount = purchaseOptions
-                            ? totalCost - purchaseOptions.balance_kopeks
-                            : 0;
-
-                          return hasChanges ? (
-                            <div
-                              className={`space-y-3 border-t pt-3 ${isDark ? 'border-dark-700/50' : 'border-champagne-300/60'}`}
-                            >
-                              {added.length > 0 && (
-                                <div className="text-sm">
-                                  <span className="text-success-400">
-                                    {t('subscription.serverManagement.toAdd')}
-                                  </span>{' '}
-                                  <span className="text-dark-300">
-                                    {addedServers.map((s) => s.name).join(', ')}
-                                  </span>
-                                </div>
-                              )}
-                              {removed.length > 0 && (
-                                <div className="text-sm">
-                                  <span className="text-error-400">
-                                    {t('subscription.serverManagement.toDisconnect')}
-                                  </span>{' '}
-                                  <span className="text-dark-300">
-                                    {countriesData.countries
-                                      .filter((c) => removed.includes(c.uuid))
-                                      .map((s) => s.name)
-                                      .join(', ')}
-                                  </span>
-                                </div>
-                              )}
-                              {totalCost > 0 && (
-                                <div className="text-center">
-                                  <div className="text-sm text-dark-400">
-                                    {t('subscription.serverManagement.paymentProrated')}
-                                  </div>
-                                  <div className="text-xl font-bold text-accent-400">
-                                    {formatPrice(totalCost)}
+                                    )}
+                                    {!willBeAdded && !isCurrentlyConnected && (
+                                      <div className="text-xs text-dark-500">
+                                        {formatPrice(country.price_per_month_kopeks)}
+                                        {t('subscription.serverManagement.perMonth')}
+                                        {country.has_discount && (
+                                          <span className="ml-1 text-dark-600 line-through">
+                                            {formatPrice(country.base_price_kopeks)}
+                                          </span>
+                                        )}
+                                      </div>
+                                    )}
+                                    {!country.is_available && !isCurrentlyConnected && (
+                                      <div className="text-xs text-dark-500">
+                                        {t('subscription.serverManagement.unavailable')}
+                                      </div>
+                                    )}
                                   </div>
                                 </div>
-                              )}
-
-                              {totalCost > 0 && !hasEnoughBalance && missingAmount > 0 && (
-                                <InsufficientBalancePrompt
-                                  missingAmountKopeks={missingAmount}
-                                  compact
-                                />
-                              )}
-
-                              <button
-                                onClick={() =>
-                                  updateCountriesMutation.mutate(selectedServersToUpdate)
-                                }
-                                disabled={
-                                  updateCountriesMutation.isPending ||
-                                  selectedServersToUpdate.length === 0 ||
-                                  (totalCost > 0 && !hasEnoughBalance)
-                                }
-                                className="btn-primary w-full py-3"
-                              >
-                                {updateCountriesMutation.isPending ? (
-                                  <span className="flex items-center justify-center gap-2">
-                                    <span className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
+                                {country.country_code && (
+                                  <span className="text-xl">
+                                    {getFlagEmoji(country.country_code)}
                                   </span>
-                                ) : (
-                                  t('subscription.serverManagement.applyChanges')
                                 )}
                               </button>
-                            </div>
-                          ) : (
-                            <div className="py-2 text-center text-sm text-dark-500">
-                              {t('subscription.serverManagement.selectServersHint')}
-                            </div>
-                          );
-                        })()}
+                            );
+                          })}
+                      </div>
 
-                        {updateCountriesMutation.isError && (
-                          <div className="text-center text-sm text-error-400">
-                            {getErrorMessage(updateCountriesMutation.error)}
+                      {(() => {
+                        const currentConnected = countriesData.countries
+                          .filter((c) => c.is_connected)
+                          .map((c) => c.uuid);
+                        const added = selectedServersToUpdate.filter(
+                          (u) => !currentConnected.includes(u),
+                        );
+                        const removed = currentConnected.filter(
+                          (u) => !selectedServersToUpdate.includes(u),
+                        );
+                        const hasChanges = added.length > 0 || removed.length > 0;
+
+                        // Calculate cost for added servers
+                        const addedServers = countriesData.countries.filter((c) =>
+                          added.includes(c.uuid),
+                        );
+                        const totalCost = addedServers.reduce((sum, s) => sum + s.price_kopeks, 0);
+                        const hasEnoughBalance =
+                          !purchaseOptions || totalCost <= purchaseOptions.balance_kopeks;
+                        const missingAmount = purchaseOptions
+                          ? totalCost - purchaseOptions.balance_kopeks
+                          : 0;
+
+                        return hasChanges ? (
+                          <div
+                            className={`space-y-3 border-t pt-3 ${isDark ? 'border-dark-700/50' : 'border-champagne-300/60'}`}
+                          >
+                            {added.length > 0 && (
+                              <div className="text-sm">
+                                <span className="text-success-400">
+                                  {t('subscription.serverManagement.toAdd')}
+                                </span>{' '}
+                                <span className="text-dark-300">
+                                  {addedServers.map((s) => s.name).join(', ')}
+                                </span>
+                              </div>
+                            )}
+                            {removed.length > 0 && (
+                              <div className="text-sm">
+                                <span className="text-error-400">
+                                  {t('subscription.serverManagement.toDisconnect')}
+                                </span>{' '}
+                                <span className="text-dark-300">
+                                  {countriesData.countries
+                                    .filter((c) => removed.includes(c.uuid))
+                                    .map((s) => s.name)
+                                    .join(', ')}
+                                </span>
+                              </div>
+                            )}
+                            {totalCost > 0 && (
+                              <div className="text-center">
+                                <div className="text-sm text-dark-400">
+                                  {t('subscription.serverManagement.paymentProrated')}
+                                </div>
+                                <div className="text-xl font-bold text-accent-400">
+                                  {formatPrice(totalCost)}
+                                </div>
+                              </div>
+                            )}
+
+                            {totalCost > 0 && !hasEnoughBalance && missingAmount > 0 && (
+                              <InsufficientBalancePrompt
+                                missingAmountKopeks={missingAmount}
+                                compact
+                              />
+                            )}
+
+                            <button
+                              onClick={() =>
+                                updateCountriesMutation.mutate(selectedServersToUpdate)
+                              }
+                              disabled={
+                                updateCountriesMutation.isPending ||
+                                selectedServersToUpdate.length === 0 ||
+                                (totalCost > 0 && !hasEnoughBalance)
+                              }
+                              className="btn-primary w-full py-3"
+                            >
+                              {updateCountriesMutation.isPending ? (
+                                <span className="flex items-center justify-center gap-2">
+                                  <span className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
+                                </span>
+                              ) : (
+                                t('subscription.serverManagement.applyChanges')
+                              )}
+                            </button>
                           </div>
-                        )}
-                      </div>
-                    ) : (
-                      <div className="py-4 text-center text-sm text-dark-400">
-                        {t('subscription.serverManagement.noServersAvailable')}
-                      </div>
-                    )}
-                  </div>
-                )}
-              </div>
-            )}
-          </div>
-        )}
+                        ) : (
+                          <div className="py-2 text-center text-sm text-dark-500">
+                            {t('subscription.serverManagement.selectServersHint')}
+                          </div>
+                        );
+                      })()}
+
+                      {updateCountriesMutation.isError && (
+                        <div className="text-center text-sm text-error-400">
+                          {getErrorMessage(updateCountriesMutation.error)}
+                        </div>
+                      )}
+                    </div>
+                  ) : (
+                    <div className="py-4 text-center text-sm text-dark-400">
+                      {t('subscription.serverManagement.noServersAvailable')}
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      )}
 
       {/* My Devices Section */}
       {subscription && (