diff --git a/src/components/subscription/DeviceManager.tsx b/src/components/subscription/DeviceManager.tsx
deleted file mode 100644
index 4031bb9..0000000
--- a/src/components/subscription/DeviceManager.tsx
+++ /dev/null
@@ -1,539 +0,0 @@
-import { useState, useEffect, useCallback, useRef } 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 ───
-// Unified: bounded ranges show fixed dots, unbounded adds a "+" tail that grows
-
-interface DotStepSelectorProps {
-  min: number;
-  max: number | null; // null = unlimited
-  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 isUnlimited = max === null;
-  const scrollRef = useRef<HTMLDivElement>(null);
-
-  // For unbounded: dots go from min to max(current, selected)
-  // For bounded: dots go from min to max
-  const upperBound = isUnlimited ? Math.max(current, selected) : max;
-  const total = upperBound - min + 1;
-
-  if (total <= 0) return null;
-
-  // For bounded large ranges (>15), show range input
-  if (!isUnlimited && 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>
-    );
-  }
-
-  const dotSize = total <= 8 ? 32 : total <= 12 ? 24 : 20;
-  const innerSize = (isCurrent: boolean) =>
-    isCurrent ? (total <= 8 ? 16 : 12) : total <= 8 ? 10 : 8;
-
-  const handlePlusClick = () => {
-    onChange(selected + 1);
-    // Scroll to end after new dot appears
-    requestAnimationFrame(() => {
-      scrollRef.current?.scrollTo({
-        left: scrollRef.current.scrollWidth,
-        behavior: 'smooth',
-      });
-    });
-  };
-
-  // Track width calculation for filled portion
-  const filledRatio = total > 1 ? (selected - min) / (upperBound - min) : 0;
-
-  return (
-    <div
-      ref={scrollRef}
-      className="flex items-center justify-center gap-0 overflow-x-auto"
-      style={{ scrollbarWidth: 'none' }}
-    >
-      <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: `${filledRatio * 100}%`,
-            background: `linear-gradient(90deg, ${accentColor}40, ${accentColor}90)`,
-          }}
-        />
-
-        {/* Dots */}
-        {Array.from({ length: total }, (_, i) => {
-          const value = min + i;
-          const isFilled = value <= selected;
-          const isCur = value === current;
-          const isLocked = value < connectedCount && value < selected;
-          const floorValue = Math.max(min, connectedCount);
-          const isDisabled = value < floorValue && value < current;
-
-          return (
-            <button
-              key={value}
-              type="button"
-              onClick={() => {
-                if (value >= floorValue || value > current) {
-                  onChange(value);
-                }
-              }}
-              disabled={isDisabled}
-              className="relative z-10 flex shrink-0 items-center justify-center transition-all duration-200"
-              style={{ width: dotSize, height: dotSize }}
-              aria-label={`${value}`}
-            >
-              <div
-                className="rounded-full transition-all duration-300"
-                style={{
-                  width: innerSize(isCur),
-                  height: innerSize(isCur),
-                  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: isCur && isFilled ? `0 0 8px ${accentColor}60` : 'none',
-                  border: isCur
-                    ? `2px solid ${isFilled ? accentColor : isDark ? 'rgba(255,255,255,0.25)' : 'rgba(0,0,0,0.25)'}`
-                    : 'none',
-                }}
-              />
-            </button>
-          );
-        })}
-
-        {/* "+" tail for unlimited */}
-        {isUnlimited && (
-          <button
-            type="button"
-            onClick={handlePlusClick}
-            className="relative z-10 flex shrink-0 items-center justify-center transition-all duration-200"
-            style={{ width: dotSize, height: dotSize }}
-            aria-label="add"
-          >
-            <div
-              className="flex items-center justify-center rounded-full transition-all duration-300"
-              style={{
-                width: total <= 8 ? 16 : 12,
-                height: total <= 8 ? 16 : 12,
-                background: isDark ? 'rgba(255,255,255,0.12)' : 'rgba(0,0,0,0.12)',
-                border: `1.5px dashed ${isDark ? 'rgba(255,255,255,0.3)' : 'rgba(0,0,0,0.25)'}`,
-              }}
-            >
-              <svg
-                width={total <= 8 ? 8 : 6}
-                height={total <= 8 ? 8 : 6}
-                viewBox="0 0 8 8"
-                fill="none"
-              >
-                <path
-                  d="M4 1v6M1 4h6"
-                  stroke={isDark ? 'rgba(255,255,255,0.5)' : 'rgba(0,0,0,0.4)'}
-                  strokeWidth="1.5"
-                  strokeLinecap="round"
-                />
-              </svg>
-            </div>
-          </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 price data (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;
-  // null/undefined max_device_limit = unlimited
-  const maxLimit = priceData?.max_device_limit ?? null;
-  const connectedCount = reductionInfo?.connected_devices_count ?? 0;
-  const isInitializing = !priceData || !reductionInfo;
-
-  // Can we show the selector? Need range > 0 or unlimited
-  const hasRange = maxLimit === null || maxLimit > minLimit;
-
-  // 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={`rounded-xl border p-5 ${isDark ? 'border-dark-700/50 bg-dark-800/50' : 'border-champagne-300/60 bg-champagne-200/40'}`}
-    >
-      {/* Header */}
-      <div className="mb-4 flex items-center justify-between">
-        <h3 className="font-medium text-dark-100">{t('subscription.deviceManager.title')}</h3>
-        <button onClick={onClose} className="text-sm text-dark-400 hover:text-dark-200">
-          ✕
-        </button>
-      </div>
-
-      {isInitializing ? (
-        <div className="flex items-center justify-center py-6">
-          <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-4">
-          {/* 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 — unified for bounded and unbounded */}
-          {hasRange && (
-            <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 */}
-          {mode !== 'idle' && (
-            <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 (no card wrapper — renders inside parent card) ───
-
-interface DeviceManagerTriggerProps {
-  deviceLimit: number;
-  isDark: boolean;
-  onClick: () => void;
-}
-
-export function DeviceManagerTrigger({ deviceLimit, isDark, onClick }: DeviceManagerTriggerProps) {
-  const { t } = useTranslation();
-
-  return (
-    <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>
-  );
-}
diff --git a/src/locales/en.json b/src/locales/en.json
index 25edf3d..130143d 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -529,10 +529,6 @@
       "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 53e82a9..89df8b6 100644
--- a/src/locales/fa.json
+++ b/src/locales/fa.json
@@ -351,10 +351,6 @@
       "manageServers": "مدیریت سرورها",
       "manageServersTitle": "مدیریت سرورها"
     },
-    "deviceManager": {
-      "title": "تغییر تعداد دستگاه‌ها",
-      "devicesLabel": "دستگاه‌ها"
-    },
     "serverManagement": {
       "statusLegend": "✅ — متصل • ➕ — اضافه خواهد شد (پولی) • ➖ — قطع خواهد شد",
       "discountBanner": "تخفیف سرور شما: -{{percent}}%",
diff --git a/src/locales/ru.json b/src/locales/ru.json
index 7b814c4..4f5022e 100644
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@@ -557,10 +557,6 @@
       "manageServers": "Управление серверами",
       "manageServersTitle": "Управление серверами"
     },
-    "deviceManager": {
-      "title": "Изменить кол-во устройств",
-      "devicesLabel": "Устройства"
-    },
     "serverManagement": {
       "statusLegend": "✅ — подключено • ➕ — будет добавлено (платно) • ➖ — будет отключено",
       "discountBanner": "Ваша скидка на серверы: -{{percent}}%",
diff --git a/src/locales/zh.json b/src/locales/zh.json
index 2c2e054..23640a2 100644
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -351,10 +351,6 @@
       "manageServers": "服务器管理",
       "manageServersTitle": "服务器管理"
     },
-    "deviceManager": {
-      "title": "更改设备数量",
-      "devicesLabel": "设备"
-    },
     "serverManagement": {
       "statusLegend": "✅ — 已连接 • ➕ — 将添加（付费）• ➖ — 将断开",
       "discountBanner": "您的服务器折扣：-{{percent}}%",
diff --git a/src/pages/Subscription.tsx b/src/pages/Subscription.tsx
index 93c1892..6e0a54a 100644
--- a/src/pages/Subscription.tsx
+++ b/src/pages/Subscription.tsx
@@ -13,7 +13,6 @@ 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,
@@ -176,7 +175,10 @@ export default function Subscription() {
   const formatPrice = (kopeks: number) => `${formatAmount(kopeks / 100)} ${currencySymbol}`;
 
   // Device/traffic topup state
-  const [showDeviceManager, setShowDeviceManager] = useState(false);
+  const [showDeviceTopup, setShowDeviceTopup] = useState(false);
+  const [devicesToAdd, setDevicesToAdd] = useState(1);
+  const [showDeviceReduction, setShowDeviceReduction] = useState(false);
+  const [targetDeviceLimit, setTargetDeviceLimit] = useState<number>(1);
   const [showTrafficTopup, setShowTrafficTopup] = useState(false);
   const [selectedTrafficPackage, setSelectedTrafficPackage] = useState<number | null>(null);
   const [showServerManagement, setShowServerManagement] = useState(false);
@@ -253,12 +255,61 @@ export default function Subscription() {
 
   // Auto-close all modals/forms when success notification appears
   const handleCloseAllModals = useCallback(() => {
-    setShowDeviceManager(false);
+    setShowDeviceTopup(false);
+    setShowDeviceReduction(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'],
@@ -1074,57 +1125,233 @@ export default function Subscription() {
       {/* Purchase / Renewal CTA */}
       <PurchaseCTAButton subscription={subscription} />
 
-      {/* Additional Options (Devices, 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>
+      {/* Additional Options (Buy Devices) */}
+      {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>
 
-          {/* Device Manager */}
-          {subscription.device_limit !== 0 &&
-            (showDeviceManager ? (
-              <DeviceManager
-                subscription={subscription}
-                balanceKopeks={purchaseOptions?.balance_kopeks ?? 0}
-                isDark={isDark}
-                accentColor={zone.mainHex}
-                onClose={() => setShowDeviceManager(false)}
-              />
+            {/* 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>
             ) : (
-              <DeviceManagerTrigger
-                deviceLimit={subscription.device_limit}
-                isDark={isDark}
-                onClick={() => setShowDeviceManager(true)}
-              />
-            ))}
+              <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>
 
-          {/* Buy Traffic */}
-          {subscription.traffic_limit_gb > 0 && (
+                {/* 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 */}
             <div className="mt-4">
-              {!showTrafficTopup ? (
+              {!showDeviceReduction ? (
                 <button
-                  onClick={() => setShowTrafficTopup(true)}
+                  onClick={() => setShowDeviceReduction(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')}
+                        {t('subscription.additionalOptions.reduceDevices')}
                       </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),
-                        })}
+                        {t('subscription.additionalOptions.reduceDevicesDescription')}
                       </div>
                     </div>
                     <svg
@@ -1144,417 +1371,598 @@ export default function Subscription() {
                 >
                   <div className="mb-4 flex items-center justify-between">
                     <h3 className="font-medium text-dark-100">
-                      {t('subscription.additionalOptions.buyTrafficTitle')}
+                      {t('subscription.additionalOptions.reduceDevicesTitle')}
                     </h3>
                     <button
-                      onClick={() => {
-                        setShowTrafficTopup(false);
-                        setSelectedTrafficPackage(null);
-                      }}
+                      onClick={() => setShowDeviceReduction(false)}
                       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 ? (
+                  {deviceReductionInfo?.available === false ? (
                     <div className="py-4 text-center text-sm text-dark-400">
-                      {t('subscription.additionalOptions.trafficUnavailable')}
+                      {deviceReductionInfo.reason ||
+                        t('subscription.additionalOptions.reduceUnavailable')}
                     </div>
-                  ) : (
+                  ) : deviceReductionInfo ? (
                     <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>
-                        ))}
+                      {/* 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>
 
-                      {selectedTrafficPackage !== null &&
-                        (() => {
-                          const selectedPkg = trafficPackages.find(
-                            (p) => p.gb === selectedTrafficPackage,
+                      {/* 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>
+                      )}
+                    </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>
+                  )}
+                </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),
+                          })}
+                        </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;
+
+                            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>
+            )}
+
+            {/* 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'
+                                      : 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}%
+                                          </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 =
-                            !selectedPkg ||
-                            !purchaseOptions ||
-                            selectedPkg.price_kopeks <= purchaseOptions.balance_kopeks;
-                          const missingAmount =
-                            selectedPkg && purchaseOptions
-                              ? selectedPkg.price_kopeks - purchaseOptions.balance_kopeks
-                              : 0;
+                            !purchaseOptions || totalCost <= purchaseOptions.balance_kopeks;
+                          const missingAmount = purchaseOptions
+                            ? totalCost - purchaseOptions.balance_kopeks
+                            : 0;
 
-                          return (
-                            <>
-                              {!hasEnoughBalance && missingAmount > 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
-                                  className="mb-3"
-                                  onBeforeTopUp={async () => {
-                                    await subscriptionApi.saveTrafficCart(selectedTrafficPackage);
-                                  }}
                                 />
                               )}
+
                               <button
                                 onClick={() =>
-                                  trafficPurchaseMutation.mutate(selectedTrafficPackage)
+                                  updateCountriesMutation.mutate(selectedServersToUpdate)
+                                }
+                                disabled={
+                                  updateCountriesMutation.isPending ||
+                                  selectedServersToUpdate.length === 0 ||
+                                  (totalCost > 0 && !hasEnoughBalance)
                                 }
-                                disabled={trafficPurchaseMutation.isPending || !hasEnoughBalance}
                                 className="btn-primary w-full py-3"
                               >
-                                {trafficPurchaseMutation.isPending ? (
+                                {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>
-                                ) : selectedPkg?.is_unlimited ? (
-                                  t('subscription.additionalOptions.buyUnlimited')
                                 ) : (
-                                  t('subscription.additionalOptions.buyTrafficGb', {
-                                    gb: selectedTrafficPackage,
-                                  })
+                                  t('subscription.serverManagement.applyChanges')
                                 )}
                               </button>
-                            </>
+                            </div>
+                          ) : (
+                            <div className="py-2 text-center text-sm text-dark-500">
+                              {t('subscription.serverManagement.selectServersHint')}
+                            </div>
                           );
                         })()}
 
-                      {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'
-                                    : 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}%
-                                        </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)}
-                                </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>
+                        {updateCountriesMutation.isError && (
+                          <div className="text-center text-sm text-error-400">
+                            {getErrorMessage(updateCountriesMutation.error)}
                           </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>
-      )}
+                        )}
+                      </div>
+                    ) : (
+                      <div className="py-4 text-center text-sm text-dark-400">
+                        {t('subscription.serverManagement.noServersAvailable')}
+                      </div>
+                    )}
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        )}
 
       {/* My Devices Section */}
       {subscription && (