diff --git a/src/components/subscription/sheets/ServerManagementSheet.tsx b/src/components/subscription/sheets/ServerManagementSheet.tsx
new file mode 100644
index 0000000..8617948
--- /dev/null
+++ b/src/components/subscription/sheets/ServerManagementSheet.tsx
@@ -0,0 +1,328 @@
+import { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { subscriptionApi } from '../../../api/subscription';
+import { getErrorMessage, getFlagEmoji } from '../../../utils/subscriptionHelpers';
+import InsufficientBalancePrompt from '../../InsufficientBalancePrompt';
+import type { PurchaseOptions, Subscription } from '../../../types';
+
+// ──────────────────────────────────────────────────────────────────
+// Manage-servers sheet (classic-mode only — caller decides whether to
+// render). Self-owns the countries query + update mutation; parent
+// holds the selected-uuid set so the global "close all modals" can
+// reset it.
+//
+// Extracted from Subscription.tsx — ~280 lines off the god page.
+// ──────────────────────────────────────────────────────────────────
+
+export interface ServerManagementSheetProps {
+  open: boolean;
+  onOpen: () => void;
+  onClose: () => void;
+  subscription: Subscription;
+  subscriptionId: number | undefined;
+  selectedServers: string[];
+  onSelectedServersChange: (uuids: string[] | ((prev: string[]) => string[])) => void;
+  purchaseOptions: PurchaseOptions | undefined;
+  isDark: boolean;
+}
+
+export function ServerManagementSheet({
+  open,
+  onOpen,
+  onClose,
+  subscription,
+  subscriptionId,
+  selectedServers,
+  onSelectedServersChange,
+  purchaseOptions,
+  isDark,
+}: ServerManagementSheetProps) {
+  const { t } = useTranslation();
+  const queryClient = useQueryClient();
+
+  const formatPrice = (kopeks: number) => {
+    const rubles = kopeks / 100;
+    return rubles % 1 === 0 ? `${rubles} ₽` : `${rubles.toFixed(2)} ₽`;
+  };
+
+  const { data: countriesData, isLoading: countriesLoading } = useQuery({
+    queryKey: ['countries', subscriptionId],
+    queryFn: () => subscriptionApi.getCountries(subscriptionId),
+    enabled: open && !!subscription && !subscription.is_trial,
+  });
+
+  // Seed selected = currently connected once the data loads.
+  useEffect(() => {
+    if (countriesData && open) {
+      const connected = countriesData.countries.filter((c) => c.is_connected).map((c) => c.uuid);
+      onSelectedServersChange(connected);
+    }
+    // Intentionally narrow — the setter is stable and we don't want to
+    // re-seed every time the user toggles a server.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [countriesData, open]);
+
+  const updateMutation = useMutation({
+    mutationFn: (countries: string[]) => subscriptionApi.updateCountries(countries, subscriptionId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['subscription', subscriptionId] });
+      queryClient.invalidateQueries({ queryKey: ['subscriptions-list'] });
+      queryClient.invalidateQueries({ queryKey: ['countries', subscriptionId] });
+      onClose();
+    },
+  });
+
+  if (!open) {
+    return (
+      <button
+        onClick={onOpen}
+        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>
+    );
+  }
+
+  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'}`}
+    >
+      <div className="mb-4 flex items-center justify-between">
+        <h3 className="font-medium text-dark-100">
+          {t('subscription.additionalOptions.manageServersTitle')}
+        </h3>
+        <button
+          onClick={() => {
+            onClose();
+            onSelectedServersChange([]);
+          }}
+          className="text-sm text-dark-400 hover:text-dark-200"
+          aria-label={t('common.close', 'Close')}
+        >
+          ✕
+        </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 = selectedServers.includes(country.uuid);
+                const willBeAdded = !isCurrentlyConnected && isSelected;
+                const willBeRemoved = isCurrentlyConnected && !isSelected;
+
+                return (
+                  <button
+                    key={country.uuid}
+                    onClick={() => {
+                      if (isSelected) {
+                        onSelectedServersChange((prev) => prev.filter((u) => u !== country.uuid));
+                      } else {
+                        onSelectedServersChange((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 = selectedServers.filter((u) => !currentConnected.includes(u));
+            const removed = currentConnected.filter((u) => !selectedServers.includes(u));
+            const hasChanges = added.length > 0 || removed.length > 0;
+
+            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={() => updateMutation.mutate(selectedServers)}
+                  disabled={
+                    updateMutation.isPending ||
+                    selectedServers.length === 0 ||
+                    (totalCost > 0 && !hasEnoughBalance)
+                  }
+                  className="btn-primary w-full py-3"
+                >
+                  {updateMutation.isPending ? (
+                    <span className="flex items-center justify-center gap-2">
+                      <span className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
+                    </span>
+                  ) : (
+                    t('subscription.serverManagement.applyChanges')
+                  )}
+                </button>
+              </div>
+            ) : (
+              <div className="py-2 text-center text-sm text-dark-500">
+                {t('subscription.serverManagement.selectServersHint')}
+              </div>
+            );
+          })()}
+
+          {updateMutation.isError && (
+            <div className="text-center text-sm text-error-400">
+              {getErrorMessage(updateMutation.error)}
+            </div>
+          )}
+        </div>
+      ) : (
+        <div className="py-4 text-center text-sm text-dark-400">
+          {t('subscription.serverManagement.noServersAvailable')}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/pages/Subscription.tsx b/src/pages/Subscription.tsx
index 29fd983..d43eb7e 100644
--- a/src/pages/Subscription.tsx
+++ b/src/pages/Subscription.tsx
@@ -30,6 +30,7 @@ import Twemoji from 'react-twemoji';
 import { DeviceTopupSheet } from '../components/subscription/sheets/DeviceTopupSheet';
 import { DeviceReductionSheet } from '../components/subscription/sheets/DeviceReductionSheet';
 import { TrafficTopupSheet } from '../components/subscription/sheets/TrafficTopupSheet';
+import { ServerManagementSheet } from '../components/subscription/sheets/ServerManagementSheet';
 
 /** Isolated countdown so 1s interval doesn't re-render the whole page */
 const CountdownTimer = memo(function CountdownTimer({
@@ -369,32 +370,7 @@ export default function Subscription() {
   // (device reduction info + mutation moved into <DeviceReductionSheet>)
 
   // (traffic packages + purchase moved into <TrafficTopupSheet>)
-
-  // Countries/servers query
-  const { data: countriesData, isLoading: countriesLoading } = useQuery({
-    queryKey: ['countries', subscriptionId],
-    queryFn: () => subscriptionApi.getCountries(subscriptionId),
-    enabled: showServerManagement && !!subscription && !subscription.is_trial,
-  });
-
-  // Initialize selected servers when data loads
-  useEffect(() => {
-    if (countriesData && showServerManagement) {
-      const connected = countriesData.countries.filter((c) => c.is_connected).map((c) => c.uuid);
-      setSelectedServersToUpdate(connected);
-    }
-  }, [countriesData, showServerManagement]);
-
-  // Countries update mutation
-  const updateCountriesMutation = useMutation({
-    mutationFn: (countries: string[]) => subscriptionApi.updateCountries(countries, subscriptionId),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['subscription', subscriptionId] });
-      queryClient.invalidateQueries({ queryKey: ['subscriptions-list'] });
-      queryClient.invalidateQueries({ queryKey: ['countries', subscriptionId] });
-      setShowServerManagement(false);
-    },
-  });
+  // (countries query + update mutation moved into <ServerManagementSheet>)
 
   // Traffic refresh mutation
   const refreshTrafficMutation = useMutation({
@@ -1519,282 +1495,17 @@ export default function Subscription() {
             {/* 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>
-                            </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>
-                )}
+                <ServerManagementSheet
+                  open={showServerManagement}
+                  onOpen={() => setShowServerManagement(true)}
+                  onClose={() => setShowServerManagement(false)}
+                  subscription={subscription}
+                  subscriptionId={subscriptionId}
+                  selectedServers={selectedServersToUpdate}
+                  onSelectedServersChange={setSelectedServersToUpdate}
+                  purchaseOptions={purchaseOptions}
+                  isDark={isDark}
+                />
               </div>
             )}
           </div>