diff --git a/example/s3/network-config.json b/example/s3/network-config.json
index 09b9e4d..4d84ad6 100644
--- a/example/s3/network-config.json
+++ b/example/s3/network-config.json
@@ -6,7 +6,8 @@
       "ip": "94.142.140.1",
       "provider": "cloudflare",
       "country": "SWE",
-      "description": "Cloudflare Sweden - основной выход"
+      "description": "Cloudflare Sweden - основной выход",
+      "serverId": "SWE-HIPHOST"
     },
     {
       "id": "gw-bunny-swe",
@@ -14,15 +15,17 @@
       "ip": "94.142.140.2",
       "provider": "bunny",
       "country": "SWE",
-      "description": "Bunny CDN Sweden"
+      "description": "Bunny CDN Sweden",
+      "serverId": "SWE-HIPHOST"
     },
     {
-      "id": "gw-telegram-1",
+      "id": "gw-telegram-nl",
       "name": "TG-PROXY-1",
       "ip": "149.154.167.50",
       "provider": "telegram",
       "country": "NL",
-      "description": "Telegram DC2"
+      "description": "Telegram DC2",
+      "serverId": "NL-AMSTERDAM"
     },
     {
       "id": "gw-hetzner-de",
@@ -30,7 +33,8 @@
       "ip": "195.100.30.21",
       "provider": "hetzner",
       "country": "DE",
-      "description": "Hetzner Frankfurt"
+      "description": "Hetzner Frankfurt",
+      "serverId": "DE-FRANKFURT"
     },
     {
       "id": "gw-fastly-us",
@@ -38,7 +42,8 @@
       "ip": "151.101.1.1",
       "provider": "fastly",
       "country": "US",
-      "description": "Fastly US East"
+      "description": "Fastly US East",
+      "serverId": "US-NEWYORK"
     }
   ],
   "tunnelInterfaces": [
@@ -98,10 +103,5 @@
       "cidr": "10.30.0.0/16",
       "description": "Пул для IPSec туннелей"
     }
-  ],
-  "defaults": {
-    "baseUrl": "https://functions.yandexcloud.net/d4eno3im0qgsr4tj5hdo",
-    "type": "routes",
-    "version": "v4.rsc"
-  }
+  ]
 }
diff --git a/frontend/src/NetworkConfigManager.jsx b/frontend/src/NetworkConfigManager.jsx
index f03df00..aacdcc7 100644
--- a/frontend/src/NetworkConfigManager.jsx
+++ b/frontend/src/NetworkConfigManager.jsx
@@ -4,6 +4,8 @@ import { useNotify } from './components/NotifyProvider.jsx';
 import FormModal from './components/FormModal.jsx';
 import FormField from './components/FormField.jsx';
 import ConfirmModal from './components/ConfirmModal.jsx';
+import ServerAutocompleteInput from './components/ServerAutocompleteInput.jsx';
+import { countryToFlag } from './utils/serverUtils.js';
 import {
   IconNetwork,
   IconPlus,
@@ -16,7 +18,11 @@ import {
   IconCopy,
   IconSearch,
   IconRefresh,
-  IconSettings
+  IconFilter,
+  IconX,
+  IconCircleFilled,
+  IconLayoutGrid,
+  IconList
 } from '@tabler/icons-react';
 
 /**
@@ -37,11 +43,11 @@ const GATEWAY_PROVIDERS = [
 
 // Типы туннельных интерфейсов
 const INTERFACE_TYPES = [
-  { value: 'GRE', label: 'GRE' },
-  { value: 'WireGuard', label: 'WireGuard' },
-  { value: 'IPSec', label: 'IPSec' },
-  { value: 'VXLAN', label: 'VXLAN' },
-  { value: 'OpenVPN', label: 'OpenVPN' },
+  { value: 'GRE', label: 'GRE', color: 'blue' },
+  { value: 'WireGuard', label: 'WireGuard', color: 'green' },
+  { value: 'IPSec', label: 'IPSec', color: 'yellow' },
+  { value: 'VXLAN', label: 'VXLAN', color: 'purple' },
+  { value: 'OpenVPN', label: 'OpenVPN', color: 'orange' },
 ];
 
 // Пустые объекты
@@ -52,6 +58,7 @@ const getEmptyGateway = () => ({
   provider: 'custom',
   country: '',
   description: '',
+  serverId: '',
 });
 
 const getEmptyInterface = () => ({
@@ -75,11 +82,6 @@ const getDefaultConfig = () => ({
   gateways: [],
   tunnelInterfaces: [],
   ipPools: [],
-  defaults: {
-    baseUrl: 'https://functions.yandexcloud.net/d4eno3im0qgsr4tj5hdo',
-    type: 'routes',
-    version: 'v4.rsc',
-  },
 });
 
 function NetworkConfigManager() {
@@ -92,9 +94,12 @@ function NetworkConfigManager() {
   const [saving, setSaving] = useState(false);
   
   // === UI State ===
-  const [activeTab, setActiveTab] = useState('gateways'); // 'gateways' | 'interfaces' | 'pools' | 'defaults'
+  const [activeTab, setActiveTab] = useState('gateways');
   const [searchTerm, setSearchTerm] = useState('');
   const [providerFilter, setProviderFilter] = useState('');
+  const [serverFilter, setServerFilter] = useState('');
+  const [typeFilter, setTypeFilter] = useState('');
+  const [viewMode, setViewMode] = useState('cards'); // 'cards' | 'table'
   
   // === Modals ===
   const [gatewayModalOpen, setGatewayModalOpen] = useState(false);
@@ -128,14 +133,12 @@ function NetworkConfigManager() {
         gateways: Array.isArray(data.gateways) ? data.gateways : [],
         tunnelInterfaces: Array.isArray(data.tunnelInterfaces) ? data.tunnelInterfaces : [],
         ipPools: Array.isArray(data.ipPools) ? data.ipPools : [],
-        defaults: data.defaults || getDefaultConfig().defaults,
       });
     } catch (error) {
       if (error.response?.status !== 404) {
         console.error('Error fetching network config:', error);
         notify.error('Не удалось загрузить сетевые настройки');
       }
-      // Если файла нет - используем дефолтные значения
       setConfig(getDefaultConfig());
     } finally {
       setLoading(false);
@@ -165,6 +168,31 @@ function NetworkConfigManager() {
     }
   };
 
+  // === Получение информации о сервере ===
+  const getServerInfo = (serverId) => {
+    if (!serverId) return null;
+    return servers.find(s => s.id === serverId || s.ip === serverId || s.dns === serverId);
+  };
+
+  const getServerLabel = (serverId) => {
+    const server = getServerInfo(serverId);
+    if (!server) return serverId || '—';
+    return server.dns || server.ip;
+  };
+
+  // === Уникальные серверы для фильтра ===
+  const uniqueServersInConfig = useMemo(() => {
+    const allServerIds = new Set([
+      ...(config.gateways || []).map(g => g.serverId).filter(Boolean),
+      ...(config.tunnelInterfaces || []).map(i => i.serverId).filter(Boolean),
+    ]);
+    return Array.from(allServerIds).map(id => ({
+      id,
+      label: getServerLabel(id),
+      server: getServerInfo(id),
+    }));
+  }, [config.gateways, config.tunnelInterfaces, servers]);
+
   // === Фильтрация ===
   const filteredGateways = useMemo(() => {
     let result = [...(config.gateways || [])];
@@ -173,34 +201,48 @@ function NetworkConfigManager() {
       result = result.filter(g => g.provider === providerFilter);
     }
     
+    if (serverFilter) {
+      result = result.filter(g => g.serverId === serverFilter);
+    }
+    
     if (searchTerm) {
       const term = searchTerm.toLowerCase();
       result = result.filter(g =>
         g.name?.toLowerCase().includes(term) ||
         g.ip?.toLowerCase().includes(term) ||
         g.country?.toLowerCase().includes(term) ||
-        g.description?.toLowerCase().includes(term)
+        g.description?.toLowerCase().includes(term) ||
+        getServerLabel(g.serverId).toLowerCase().includes(term)
       );
     }
     
     return result;
-  }, [config.gateways, providerFilter, searchTerm]);
+  }, [config.gateways, providerFilter, serverFilter, searchTerm, servers]);
 
   const filteredInterfaces = useMemo(() => {
     let result = [...(config.tunnelInterfaces || [])];
     
+    if (typeFilter) {
+      result = result.filter(i => i.type === typeFilter);
+    }
+    
+    if (serverFilter) {
+      result = result.filter(i => i.serverId === serverFilter);
+    }
+    
     if (searchTerm) {
       const term = searchTerm.toLowerCase();
       result = result.filter(i =>
         i.name?.toLowerCase().includes(term) ||
         i.localIp?.toLowerCase().includes(term) ||
         i.remoteIp?.toLowerCase().includes(term) ||
-        i.type?.toLowerCase().includes(term)
+        i.type?.toLowerCase().includes(term) ||
+        getServerLabel(i.serverId).toLowerCase().includes(term)
       );
     }
     
     return result;
-  }, [config.tunnelInterfaces, searchTerm]);
+  }, [config.tunnelInterfaces, typeFilter, serverFilter, searchTerm, servers]);
 
   const filteredPools = useMemo(() => {
     let result = [...(config.ipPools || [])];
@@ -217,6 +259,37 @@ function NetworkConfigManager() {
     return result;
   }, [config.ipPools, searchTerm]);
 
+  // === Группировка по серверам ===
+  const gatewaysByServer = useMemo(() => {
+    const grouped = {};
+    filteredGateways.forEach(gw => {
+      const key = gw.serverId || '__unassigned__';
+      if (!grouped[key]) grouped[key] = [];
+      grouped[key].push(gw);
+    });
+    return grouped;
+  }, [filteredGateways]);
+
+  const interfacesByServer = useMemo(() => {
+    const grouped = {};
+    filteredInterfaces.forEach(iface => {
+      const key = iface.serverId || '__unassigned__';
+      if (!grouped[key]) grouped[key] = [];
+      grouped[key].push(iface);
+    });
+    return grouped;
+  }, [filteredInterfaces]);
+
+  // === Сброс фильтров ===
+  const resetFilters = () => {
+    setSearchTerm('');
+    setProviderFilter('');
+    setServerFilter('');
+    setTypeFilter('');
+  };
+
+  const hasActiveFilters = searchTerm || providerFilter || serverFilter || typeFilter;
+
   // === CRUD для Gateways ===
   const handleAddGateway = () => {
     setEditingGateway(getEmptyGateway());
@@ -357,17 +430,6 @@ function NetworkConfigManager() {
     setDeleteType('');
   };
 
-  // === Обновление defaults ===
-  const handleDefaultsChange = (field, value) => {
-    setConfig(prev => ({
-      ...prev,
-      defaults: {
-        ...prev.defaults,
-        [field]: value,
-      },
-    }));
-  };
-
   // === Copy to clipboard ===
   const copyToClipboard = async (text) => {
     try {
@@ -378,42 +440,247 @@ function NetworkConfigManager() {
     }
   };
 
-  // === Получение имени сервера по ID ===
-  const getServerName = (serverId) => {
-    const server = servers.find(s => s.id === serverId || s.ip === serverId);
-    return server?.dns || server?.ip || serverId || '—';
-  };
-
   // === Получение цвета провайдера ===
   const getProviderColor = (provider) => {
     const p = GATEWAY_PROVIDERS.find(gp => gp.value === provider);
     return p?.color || 'secondary';
   };
 
+  const getInterfaceTypeColor = (type) => {
+    const t = INTERFACE_TYPES.find(it => it.value === type);
+    return t?.color || 'secondary';
+  };
+
+  // === Рендер карточки сервера с его элементами ===
+  const renderServerGroup = (serverId, items, type) => {
+    const server = getServerInfo(serverId);
+    const isUnassigned = serverId === '__unassigned__';
+    
+    return (
+      <div key={serverId} className="mb-4">
+        {/* Server header */}
+        <div className="d-flex align-items-center mb-2 px-1">
+          <div className="d-flex align-items-center">
+            {isUnassigned ? (
+              <>
+                <span className="avatar avatar-sm bg-secondary-lt me-2">
+                  <IconServer size={16} className="text-muted" />
+                </span>
+                <span className="text-muted">Без привязки к серверу</span>
+              </>
+            ) : (
+              <>
+                <span className="avatar avatar-sm bg-primary-lt me-2">
+                  <IconServer size={16} className="text-primary" />
+                </span>
+                <div>
+                  <span className="fw-medium">{server?.dns || serverId}</span>
+                  {server && (
+                    <span className="text-muted ms-2 small">
+                      {server.ip}
+                      {server.country && (
+                        <span className="ms-1">{countryToFlag(server.country)} {server.country}</span>
+                      )}
+                    </span>
+                  )}
+                </div>
+              </>
+            )}
+          </div>
+          <span className="badge bg-secondary-lt ms-auto">{items.length}</span>
+        </div>
+        
+        {/* Items */}
+        <div className="row row-cards">
+          {items.map(item => (
+            type === 'gateway' ? renderGatewayCard(item) : renderInterfaceCard(item)
+          ))}
+        </div>
+      </div>
+    );
+  };
+
+  // === Рендер карточки Gateway ===
+  const renderGatewayCard = (gateway) => (
+    <div key={gateway.id} className="col-sm-6 col-lg-4">
+      <div className="card card-sm">
+        <div className="card-body">
+          <div className="d-flex align-items-center mb-2">
+            <span className={`avatar avatar-sm bg-${getProviderColor(gateway.provider)}-lt me-2`}>
+              <IconWorld size={16} className={`text-${getProviderColor(gateway.provider)}`} />
+            </span>
+            <div className="flex-fill">
+              <div className="fw-medium">{gateway.name || '—'}</div>
+              <div className="text-muted small">
+                {GATEWAY_PROVIDERS.find(p => p.value === gateway.provider)?.label || gateway.provider}
+              </div>
+            </div>
+            <div className="dropdown">
+              <button className="btn btn-ghost-secondary btn-icon btn-sm" data-bs-toggle="dropdown">
+                <IconEdit size={16} />
+              </button>
+              <div className="dropdown-menu dropdown-menu-end">
+                <button className="dropdown-item" onClick={() => handleEditGateway(gateway)}>
+                  <IconEdit size={16} className="me-2" />Редактировать
+                </button>
+                <button className="dropdown-item text-danger" onClick={() => handleDeleteGateway(gateway)}>
+                  <IconTrash size={16} className="me-2" />Удалить
+                </button>
+              </div>
+            </div>
+          </div>
+          
+          <div className="d-flex align-items-center gap-2 mb-2">
+            <code className="flex-fill text-truncate" title={gateway.ip}>
+              {gateway.ip || '—'}
+            </code>
+            {gateway.ip && (
+              <button
+                className="btn btn-ghost-secondary btn-icon btn-sm"
+                onClick={() => copyToClipboard(gateway.ip)}
+                title="Копировать IP"
+              >
+                <IconCopy size={14} />
+              </button>
+            )}
+          </div>
+          
+          {gateway.country && (
+            <div className="d-flex align-items-center gap-1 text-muted small">
+              <span>{countryToFlag(gateway.country)}</span>
+              <span>{gateway.country}</span>
+            </div>
+          )}
+          
+          {gateway.description && (
+            <div className="text-muted small mt-1 text-truncate" title={gateway.description}>
+              {gateway.description}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+
+  // === Рендер карточки Interface ===
+  const renderInterfaceCard = (iface) => (
+    <div key={iface.id} className="col-sm-6 col-lg-4">
+      <div className="card card-sm">
+        <div className="card-body">
+          <div className="d-flex align-items-center mb-2">
+            <span className={`avatar avatar-sm bg-${getInterfaceTypeColor(iface.type)}-lt me-2`}>
+              <IconRouter size={16} className={`text-${getInterfaceTypeColor(iface.type)}`} />
+            </span>
+            <div className="flex-fill">
+              <div className="fw-medium">{iface.name || '—'}</div>
+              <div className="text-muted small">
+                <span className={`badge bg-${getInterfaceTypeColor(iface.type)}-lt text-${getInterfaceTypeColor(iface.type)}`}>
+                  {iface.type}
+                </span>
+                {iface.port && <span className="ms-1">:{iface.port}</span>}
+              </div>
+            </div>
+            <div className="dropdown">
+              <button className="btn btn-ghost-secondary btn-icon btn-sm" data-bs-toggle="dropdown">
+                <IconEdit size={16} />
+              </button>
+              <div className="dropdown-menu dropdown-menu-end">
+                <button className="dropdown-item" onClick={() => handleEditInterface(iface)}>
+                  <IconEdit size={16} className="me-2" />Редактировать
+                </button>
+                <button className="dropdown-item text-danger" onClick={() => handleDeleteInterface(iface)}>
+                  <IconTrash size={16} className="me-2" />Удалить
+                </button>
+              </div>
+            </div>
+          </div>
+          
+          <div className="row g-2 small">
+            <div className="col-6">
+              <div className="text-muted">Local IP</div>
+              <div className="d-flex align-items-center gap-1">
+                <code className="text-truncate">{iface.localIp || '—'}</code>
+                {iface.localIp && (
+                  <button
+                    className="btn btn-ghost-secondary btn-icon p-0"
+                    onClick={() => copyToClipboard(iface.localIp)}
+                    style={{ width: 20, height: 20 }}
+                  >
+                    <IconCopy size={12} />
+                  </button>
+                )}
+              </div>
+            </div>
+            <div className="col-6">
+              <div className="text-muted">Remote IP</div>
+              <div className="d-flex align-items-center gap-1">
+                <code className="text-truncate">{iface.remoteIp || '—'}</code>
+                {iface.remoteIp && (
+                  <button
+                    className="btn btn-ghost-secondary btn-icon p-0"
+                    onClick={() => copyToClipboard(iface.remoteIp)}
+                    style={{ width: 20, height: 20 }}
+                  >
+                    <IconCopy size={12} />
+                  </button>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+
   return (
     <div className="network-config-manager">
-      {/* Header */}
-      <div className="page-header d-print-none mb-3">
+      {/* Page Header */}
+      <div className="page-header d-print-none mb-4">
         <div className="row align-items-center">
           <div className="col">
+            <div className="page-pretitle">Управление</div>
             <h2 className="page-title d-flex align-items-center">
-              <IconNetwork className="me-2" />
+              <IconNetwork className="me-2" size={28} />
               Сетевые настройки
             </h2>
-            <div className="page-pretitle">
-              Справочник IP-адресов, интерфейсов и gateway для серверов
-            </div>
           </div>
           <div className="col-auto ms-auto d-print-none">
             <div className="btn-list">
+              {/* Tabs as button group */}
+              <div className="btn-group me-2" role="group">
+                <button
+                  className={`btn ${activeTab === 'gateways' ? 'btn-primary' : 'btn-outline-primary'}`}
+                  onClick={() => setActiveTab('gateways')}
+                >
+                  <IconWorld size={16} className="me-1 d-none d-sm-inline" />
+                  Gateways
+                  <span className="badge bg-primary-lt text-primary ms-1">{config.gateways?.length || 0}</span>
+                </button>
+                <button
+                  className={`btn ${activeTab === 'interfaces' ? 'btn-primary' : 'btn-outline-primary'}`}
+                  onClick={() => setActiveTab('interfaces')}
+                >
+                  <IconRouter size={16} className="me-1 d-none d-sm-inline" />
+                  Интерфейсы
+                  <span className="badge bg-primary-lt text-primary ms-1">{config.tunnelInterfaces?.length || 0}</span>
+                </button>
+                <button
+                  className={`btn ${activeTab === 'pools' ? 'btn-primary' : 'btn-outline-primary'}`}
+                  onClick={() => setActiveTab('pools')}
+                >
+                  <IconDatabase size={16} className="me-1 d-none d-sm-inline" />
+                  IP пулы
+                  <span className="badge bg-primary-lt text-primary ms-1">{config.ipPools?.length || 0}</span>
+                </button>
+              </div>
+
               <button
                 type="button"
                 className="btn btn-outline-secondary"
-                onClick={fetchConfig}
+                onClick={() => { fetchConfig(); fetchServers(); }}
                 disabled={loading}
               >
-                <IconRefresh size={16} className={`me-1 ${loading ? 'spin' : ''}`} />
-                Обновить
+                <IconRefresh size={16} className={loading ? 'spin' : ''} />
               </button>
               <button
                 type="button"
@@ -429,109 +696,135 @@ function NetworkConfigManager() {
         </div>
       </div>
 
-      {/* Tabs */}
+      {/* Toolbar */}
       <div className="card mb-3">
-        <div className="card-header">
-          <ul className="nav nav-tabs card-header-tabs">
-            <li className="nav-item">
-              <button
-                className={`nav-link ${activeTab === 'gateways' ? 'active' : ''}`}
-                onClick={() => setActiveTab('gateways')}
-              >
-                <IconWorld size={16} className="me-1" />
-                Gateways ({config.gateways?.length || 0})
-              </button>
-            </li>
-            <li className="nav-item">
-              <button
-                className={`nav-link ${activeTab === 'interfaces' ? 'active' : ''}`}
-                onClick={() => setActiveTab('interfaces')}
-              >
-                <IconRouter size={16} className="me-1" />
-                Интерфейсы ({config.tunnelInterfaces?.length || 0})
-              </button>
-            </li>
-            <li className="nav-item">
-              <button
-                className={`nav-link ${activeTab === 'pools' ? 'active' : ''}`}
-                onClick={() => setActiveTab('pools')}
-              >
-                <IconServer size={16} className="me-1" />
-                IP пулы ({config.ipPools?.length || 0})
-              </button>
-            </li>
-            <li className="nav-item">
-              <button
-                className={`nav-link ${activeTab === 'defaults' ? 'active' : ''}`}
-                onClick={() => setActiveTab('defaults')}
-              >
-                <IconSettings size={16} className="me-1" />
-                Настройки по умолчанию
-              </button>
-            </li>
-          </ul>
-        </div>
-      </div>
-
-      {/* Search & Filters */}
-      {activeTab !== 'defaults' && (
-        <div className="card mb-3">
-          <div className="card-body py-2">
-            <div className="row g-2 align-items-center">
-              <div className="col-auto">
-                <div className="input-icon">
-                  <span className="input-icon-addon">
-                    <IconSearch size={16} />
+        <div className="card-body py-2">
+          <div className="row g-2 align-items-center">
+            {/* Search */}
+            <div className="col-12 col-md-4 col-lg-3">
+              <div className="input-icon">
+                <span className="input-icon-addon">
+                  <IconSearch size={16} />
+                </span>
+                <input
+                  type="text"
+                  className="form-control"
+                  placeholder="Поиск..."
+                  value={searchTerm}
+                  onChange={(e) => setSearchTerm(e.target.value)}
+                />
+                {searchTerm && (
+                  <span className="input-icon-addon" style={{ pointerEvents: 'auto', cursor: 'pointer' }} onClick={() => setSearchTerm('')}>
+                    <IconX size={16} />
                   </span>
-                  <input
-                    type="text"
-                    className="form-control"
-                    placeholder="Поиск..."
-                    value={searchTerm}
-                    onChange={(e) => setSearchTerm(e.target.value)}
-                  />
-                </div>
-              </div>
-              
-              {activeTab === 'gateways' && (
-                <div className="col-auto">
-                  <select
-                    className="form-select"
-                    value={providerFilter}
-                    onChange={(e) => setProviderFilter(e.target.value)}
-                  >
-                    <option value="">Все провайдеры</option>
-                    {GATEWAY_PROVIDERS.map(p => (
-                      <option key={p.value} value={p.value}>{p.label}</option>
-                    ))}
-                  </select>
-                </div>
-              )}
-              
-              <div className="col-auto ms-auto">
-                {activeTab === 'gateways' && (
-                  <button className="btn btn-primary" onClick={handleAddGateway}>
-                    <IconPlus size={16} className="me-1" />
-                    Добавить Gateway
-                  </button>
-                )}
-                {activeTab === 'interfaces' && (
-                  <button className="btn btn-primary" onClick={handleAddInterface}>
-                    <IconPlus size={16} className="me-1" />
-                    Добавить интерфейс
-                  </button>
-                )}
-                {activeTab === 'pools' && (
-                  <button className="btn btn-primary" onClick={handleAddPool}>
-                    <IconPlus size={16} className="me-1" />
-                    Добавить пул
-                  </button>
                 )}
               </div>
             </div>
+            
+            {/* Server filter */}
+            {(activeTab === 'gateways' || activeTab === 'interfaces') && uniqueServersInConfig.length > 0 && (
+              <div className="col-6 col-md-3 col-lg-2">
+                <select
+                  className="form-select"
+                  value={serverFilter}
+                  onChange={(e) => setServerFilter(e.target.value)}
+                >
+                  <option value="">Все серверы</option>
+                  {uniqueServersInConfig.map(s => (
+                    <option key={s.id} value={s.id}>
+                      {s.label}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            )}
+            
+            {/* Provider filter for gateways */}
+            {activeTab === 'gateways' && (
+              <div className="col-6 col-md-3 col-lg-2">
+                <select
+                  className="form-select"
+                  value={providerFilter}
+                  onChange={(e) => setProviderFilter(e.target.value)}
+                >
+                  <option value="">Все провайдеры</option>
+                  {GATEWAY_PROVIDERS.map(p => (
+                    <option key={p.value} value={p.value}>{p.label}</option>
+                  ))}
+                </select>
+              </div>
+            )}
+            
+            {/* Type filter for interfaces */}
+            {activeTab === 'interfaces' && (
+              <div className="col-6 col-md-3 col-lg-2">
+                <select
+                  className="form-select"
+                  value={typeFilter}
+                  onChange={(e) => setTypeFilter(e.target.value)}
+                >
+                  <option value="">Все типы</option>
+                  {INTERFACE_TYPES.map(t => (
+                    <option key={t.value} value={t.value}>{t.label}</option>
+                  ))}
+                </select>
+              </div>
+            )}
+            
+            {/* Reset filters */}
+            {hasActiveFilters && (
+              <div className="col-auto">
+                <button className="btn btn-ghost-secondary btn-sm" onClick={resetFilters}>
+                  <IconX size={14} className="me-1" />
+                  Сбросить
+                </button>
+              </div>
+            )}
+            
+            <div className="col-auto ms-auto d-flex gap-2">
+              {/* View mode toggle */}
+              {(activeTab === 'gateways' || activeTab === 'interfaces') && (
+                <div className="btn-group btn-group-sm" role="group">
+                  <button
+                    className={`btn ${viewMode === 'cards' ? 'btn-secondary' : 'btn-outline-secondary'}`}
+                    onClick={() => setViewMode('cards')}
+                    title="Карточки"
+                  >
+                    <IconLayoutGrid size={16} />
+                  </button>
+                  <button
+                    className={`btn ${viewMode === 'table' ? 'btn-secondary' : 'btn-outline-secondary'}`}
+                    onClick={() => setViewMode('table')}
+                    title="Таблица"
+                  >
+                    <IconList size={16} />
+                  </button>
+                </div>
+              )}
+              
+              {/* Add button */}
+              {activeTab === 'gateways' && (
+                <button className="btn btn-primary btn-sm" onClick={handleAddGateway}>
+                  <IconPlus size={16} className="me-1" />
+                  Gateway
+                </button>
+              )}
+              {activeTab === 'interfaces' && (
+                <button className="btn btn-primary btn-sm" onClick={handleAddInterface}>
+                  <IconPlus size={16} className="me-1" />
+                  Интерфейс
+                </button>
+              )}
+              {activeTab === 'pools' && (
+                <button className="btn btn-primary btn-sm" onClick={handleAddPool}>
+                  <IconPlus size={16} className="me-1" />
+                  IP пул
+                </button>
+              )}
+            </div>
           </div>
         </div>
-      )}
+      </div>
 
       {/* Content */}
       {loading ? (
@@ -545,280 +838,324 @@ function NetworkConfigManager() {
         <>
           {/* Gateways Tab */}
           {activeTab === 'gateways' && (
-            <div className="card">
+            <>
               {filteredGateways.length === 0 ? (
-                <div className="card-body text-center py-5">
-                  <IconWorld size={48} className="text-muted mb-3" />
-                  <h3>Gateways не найдены</h3>
-                  <p className="text-muted">Добавьте gateway для использования в конфигурациях</p>
-                  <button className="btn btn-primary" onClick={handleAddGateway}>
-                    <IconPlus size={16} className="me-1" />
-                    Добавить Gateway
-                  </button>
+                <div className="card">
+                  <div className="card-body text-center py-5">
+                    <div className="mb-3">
+                      <span className="avatar avatar-xl bg-primary-lt">
+                        <IconWorld size={40} className="text-primary" />
+                      </span>
+                    </div>
+                    <h3>Gateways не найдены</h3>
+                    <p className="text-muted">
+                      {hasActiveFilters 
+                        ? 'Попробуйте изменить параметры фильтрации'
+                        : 'Добавьте gateway для использования в конфигурациях серверов'
+                      }
+                    </p>
+                    {!hasActiveFilters && (
+                      <button className="btn btn-primary" onClick={handleAddGateway}>
+                        <IconPlus size={16} className="me-1" />
+                        Добавить Gateway
+                      </button>
+                    )}
+                  </div>
+                </div>
+              ) : viewMode === 'cards' ? (
+                // Grouped cards view
+                <div>
+                  {Object.entries(gatewaysByServer).map(([serverId, gateways]) =>
+                    renderServerGroup(serverId, gateways, 'gateway')
+                  )}
                 </div>
               ) : (
-                <div className="table-responsive">
-                  <table className="table card-table table-vcenter">
-                    <thead>
-                      <tr>
-                        <th>Имя</th>
-                        <th>IP адрес</th>
-                        <th>Провайдер</th>
-                        <th>Страна</th>
-                        <th>Описание</th>
-                        <th className="text-end" style={{ width: 120 }}>Действия</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {filteredGateways.map(gateway => (
-                        <tr key={gateway.id}>
-                          <td>
-                            <strong>{gateway.name || '—'}</strong>
-                          </td>
-                          <td>
-                            <code className="d-flex align-items-center gap-1">
-                              {gateway.ip || '—'}
-                              {gateway.ip && (
-                                <button
-                                  className="btn btn-ghost-secondary btn-icon btn-sm p-0"
-                                  onClick={() => copyToClipboard(gateway.ip)}
-                                  title="Копировать IP"
-                                >
-                                  <IconCopy size={14} />
-                                </button>
-                              )}
-                            </code>
-                          </td>
-                          <td>
-                            <span className={`badge bg-${getProviderColor(gateway.provider)}-lt`}>
-                              {GATEWAY_PROVIDERS.find(p => p.value === gateway.provider)?.label || gateway.provider}
-                            </span>
-                          </td>
-                          <td>{gateway.country || '—'}</td>
-                          <td className="text-muted">{gateway.description || '—'}</td>
-                          <td className="text-end">
-                            <div className="btn-list gap-1 mb-0 justify-content-end">
-                              <button
-                                className="btn btn-ghost-primary btn-icon btn-sm"
-                                onClick={() => handleEditGateway(gateway)}
-                                title="Редактировать"
-                              >
-                                <IconEdit size={16} />
-                              </button>
-                              <button
-                                className="btn btn-ghost-danger btn-icon btn-sm"
-                                onClick={() => handleDeleteGateway(gateway)}
-                                title="Удалить"
-                              >
-                                <IconTrash size={16} />
-                              </button>
-                            </div>
-                          </td>
+                // Table view
+                <div className="card">
+                  <div className="table-responsive">
+                    <table className="table card-table table-vcenter">
+                      <thead>
+                        <tr>
+                          <th>Имя</th>
+                          <th>IP адрес</th>
+                          <th>Провайдер</th>
+                          <th>Сервер</th>
+                          <th>Страна</th>
+                          <th className="text-end" style={{ width: 100 }}>Действия</th>
                         </tr>
-                      ))}
-                    </tbody>
-                  </table>
+                      </thead>
+                      <tbody>
+                        {filteredGateways.map(gateway => {
+                          const server = getServerInfo(gateway.serverId);
+                          return (
+                            <tr key={gateway.id}>
+                              <td>
+                                <div className="d-flex align-items-center">
+                                  <span className={`avatar avatar-xs bg-${getProviderColor(gateway.provider)}-lt me-2`}>
+                                    <IconCircleFilled size={8} className={`text-${getProviderColor(gateway.provider)}`} />
+                                  </span>
+                                  <strong>{gateway.name || '—'}</strong>
+                                </div>
+                              </td>
+                              <td>
+                                <code className="d-flex align-items-center gap-1">
+                                  {gateway.ip || '—'}
+                                  {gateway.ip && (
+                                    <button
+                                      className="btn btn-ghost-secondary btn-icon p-0"
+                                      onClick={() => copyToClipboard(gateway.ip)}
+                                      style={{ width: 20, height: 20 }}
+                                    >
+                                      <IconCopy size={12} />
+                                    </button>
+                                  )}
+                                </code>
+                              </td>
+                              <td>
+                                <span className={`badge bg-${getProviderColor(gateway.provider)}-lt text-${getProviderColor(gateway.provider)}`}>
+                                  {GATEWAY_PROVIDERS.find(p => p.value === gateway.provider)?.label || gateway.provider}
+                                </span>
+                              </td>
+                              <td>
+                                {server ? (
+                                  <div className="d-flex align-items-center">
+                                    <IconServer size={14} className="text-muted me-1" />
+                                    <span>{server.dns || server.ip}</span>
+                                  </div>
+                                ) : gateway.serverId ? (
+                                  <span className="text-muted">{gateway.serverId}</span>
+                                ) : (
+                                  <span className="text-muted">—</span>
+                                )}
+                              </td>
+                              <td>
+                                {gateway.country ? (
+                                  <span>{countryToFlag(gateway.country)} {gateway.country}</span>
+                                ) : '—'}
+                              </td>
+                              <td className="text-end">
+                                <div className="btn-list gap-1 mb-0 justify-content-end">
+                                  <button
+                                    className="btn btn-ghost-primary btn-icon btn-sm"
+                                    onClick={() => handleEditGateway(gateway)}
+                                    title="Редактировать"
+                                  >
+                                    <IconEdit size={16} />
+                                  </button>
+                                  <button
+                                    className="btn btn-ghost-danger btn-icon btn-sm"
+                                    onClick={() => handleDeleteGateway(gateway)}
+                                    title="Удалить"
+                                  >
+                                    <IconTrash size={16} />
+                                  </button>
+                                </div>
+                              </td>
+                            </tr>
+                          );
+                        })}
+                      </tbody>
+                    </table>
+                  </div>
                 </div>
               )}
-            </div>
+            </>
           )}
 
           {/* Interfaces Tab */}
           {activeTab === 'interfaces' && (
-            <div className="card">
+            <>
               {filteredInterfaces.length === 0 ? (
-                <div className="card-body text-center py-5">
-                  <IconRouter size={48} className="text-muted mb-3" />
-                  <h3>Интерфейсы не найдены</h3>
-                  <p className="text-muted">Добавьте туннельные интерфейсы для серверов</p>
-                  <button className="btn btn-primary" onClick={handleAddInterface}>
-                    <IconPlus size={16} className="me-1" />
-                    Добавить интерфейс
-                  </button>
+                <div className="card">
+                  <div className="card-body text-center py-5">
+                    <div className="mb-3">
+                      <span className="avatar avatar-xl bg-blue-lt">
+                        <IconRouter size={40} className="text-blue" />
+                      </span>
+                    </div>
+                    <h3>Интерфейсы не найдены</h3>
+                    <p className="text-muted">
+                      {hasActiveFilters 
+                        ? 'Попробуйте изменить параметры фильтрации'
+                        : 'Добавьте туннельные интерфейсы для серверов'
+                      }
+                    </p>
+                    {!hasActiveFilters && (
+                      <button className="btn btn-primary" onClick={handleAddInterface}>
+                        <IconPlus size={16} className="me-1" />
+                        Добавить интерфейс
+                      </button>
+                    )}
+                  </div>
+                </div>
+              ) : viewMode === 'cards' ? (
+                // Grouped cards view
+                <div>
+                  {Object.entries(interfacesByServer).map(([serverId, interfaces]) =>
+                    renderServerGroup(serverId, interfaces, 'interface')
+                  )}
                 </div>
               ) : (
-                <div className="table-responsive">
-                  <table className="table card-table table-vcenter">
-                    <thead>
-                      <tr>
-                        <th>Имя</th>
-                        <th>Тип</th>
-                        <th>Local IP</th>
-                        <th>Remote IP</th>
-                        <th>Порт</th>
-                        <th>Сервер</th>
-                        <th className="text-end" style={{ width: 120 }}>Действия</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {filteredInterfaces.map(iface => (
-                        <tr key={iface.id}>
-                          <td><strong>{iface.name || '—'}</strong></td>
-                          <td>
-                            <span className="badge bg-blue-lt">{iface.type}</span>
-                          </td>
-                          <td>
-                            <code className="d-flex align-items-center gap-1">
-                              {iface.localIp || '—'}
-                              {iface.localIp && (
-                                <button
-                                  className="btn btn-ghost-secondary btn-icon btn-sm p-0"
-                                  onClick={() => copyToClipboard(iface.localIp)}
-                                  title="Копировать"
-                                >
-                                  <IconCopy size={14} />
-                                </button>
-                              )}
-                            </code>
-                          </td>
-                          <td>
-                            <code>{iface.remoteIp || '—'}</code>
-                          </td>
-                          <td>{iface.port || '—'}</td>
-                          <td>{getServerName(iface.serverId)}</td>
-                          <td className="text-end">
-                            <div className="btn-list gap-1 mb-0 justify-content-end">
-                              <button
-                                className="btn btn-ghost-primary btn-icon btn-sm"
-                                onClick={() => handleEditInterface(iface)}
-                                title="Редактировать"
-                              >
-                                <IconEdit size={16} />
-                              </button>
-                              <button
-                                className="btn btn-ghost-danger btn-icon btn-sm"
-                                onClick={() => handleDeleteInterface(iface)}
-                                title="Удалить"
-                              >
-                                <IconTrash size={16} />
-                              </button>
-                            </div>
-                          </td>
+                // Table view
+                <div className="card">
+                  <div className="table-responsive">
+                    <table className="table card-table table-vcenter">
+                      <thead>
+                        <tr>
+                          <th>Имя</th>
+                          <th>Тип</th>
+                          <th>Local IP</th>
+                          <th>Remote IP</th>
+                          <th>Порт</th>
+                          <th>Сервер</th>
+                          <th className="text-end" style={{ width: 100 }}>Действия</th>
                         </tr>
-                      ))}
-                    </tbody>
-                  </table>
+                      </thead>
+                      <tbody>
+                        {filteredInterfaces.map(iface => {
+                          const server = getServerInfo(iface.serverId);
+                          return (
+                            <tr key={iface.id}>
+                              <td><strong>{iface.name || '—'}</strong></td>
+                              <td>
+                                <span className={`badge bg-${getInterfaceTypeColor(iface.type)}-lt text-${getInterfaceTypeColor(iface.type)}`}>
+                                  {iface.type}
+                                </span>
+                              </td>
+                              <td>
+                                <code className="d-flex align-items-center gap-1">
+                                  {iface.localIp || '—'}
+                                  {iface.localIp && (
+                                    <button
+                                      className="btn btn-ghost-secondary btn-icon p-0"
+                                      onClick={() => copyToClipboard(iface.localIp)}
+                                      style={{ width: 20, height: 20 }}
+                                    >
+                                      <IconCopy size={12} />
+                                    </button>
+                                  )}
+                                </code>
+                              </td>
+                              <td><code>{iface.remoteIp || '—'}</code></td>
+                              <td>{iface.port || '—'}</td>
+                              <td>
+                                {server ? (
+                                  <div className="d-flex align-items-center">
+                                    <IconServer size={14} className="text-muted me-1" />
+                                    <span>{server.dns || server.ip}</span>
+                                  </div>
+                                ) : iface.serverId ? (
+                                  <span className="text-muted">{iface.serverId}</span>
+                                ) : (
+                                  <span className="text-muted">—</span>
+                                )}
+                              </td>
+                              <td className="text-end">
+                                <div className="btn-list gap-1 mb-0 justify-content-end">
+                                  <button
+                                    className="btn btn-ghost-primary btn-icon btn-sm"
+                                    onClick={() => handleEditInterface(iface)}
+                                    title="Редактировать"
+                                  >
+                                    <IconEdit size={16} />
+                                  </button>
+                                  <button
+                                    className="btn btn-ghost-danger btn-icon btn-sm"
+                                    onClick={() => handleDeleteInterface(iface)}
+                                    title="Удалить"
+                                  >
+                                    <IconTrash size={16} />
+                                  </button>
+                                </div>
+                              </td>
+                            </tr>
+                          );
+                        })}
+                      </tbody>
+                    </table>
+                  </div>
                 </div>
               )}
-            </div>
+            </>
           )}
 
           {/* IP Pools Tab */}
           {activeTab === 'pools' && (
-            <div className="card">
+            <>
               {filteredPools.length === 0 ? (
-                <div className="card-body text-center py-5">
-                  <IconServer size={48} className="text-muted mb-3" />
-                  <h3>IP пулы не найдены</h3>
-                  <p className="text-muted">Добавьте пулы IP-адресов для автоматического назначения</p>
-                  <button className="btn btn-primary" onClick={handleAddPool}>
-                    <IconPlus size={16} className="me-1" />
-                    Добавить пул
-                  </button>
+                <div className="card">
+                  <div className="card-body text-center py-5">
+                    <div className="mb-3">
+                      <span className="avatar avatar-xl bg-green-lt">
+                        <IconDatabase size={40} className="text-green" />
+                      </span>
+                    </div>
+                    <h3>IP пулы не найдены</h3>
+                    <p className="text-muted">
+                      {hasActiveFilters 
+                        ? 'Попробуйте изменить параметры фильтрации'
+                        : 'Добавьте пулы IP-адресов для организации сетей'
+                      }
+                    </p>
+                    {!hasActiveFilters && (
+                      <button className="btn btn-primary" onClick={handleAddPool}>
+                        <IconPlus size={16} className="me-1" />
+                        Добавить IP пул
+                      </button>
+                    )}
+                  </div>
                 </div>
               ) : (
-                <div className="table-responsive">
-                  <table className="table card-table table-vcenter">
-                    <thead>
-                      <tr>
-                        <th>Название</th>
-                        <th>CIDR</th>
-                        <th>Описание</th>
-                        <th className="text-end" style={{ width: 120 }}>Действия</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {filteredPools.map(pool => (
-                        <tr key={pool.id}>
-                          <td><strong>{pool.name || '—'}</strong></td>
-                          <td>
-                            <code className="d-flex align-items-center gap-1">
-                              {pool.cidr || '—'}
-                              {pool.cidr && (
-                                <button
-                                  className="btn btn-ghost-secondary btn-icon btn-sm p-0"
-                                  onClick={() => copyToClipboard(pool.cidr)}
-                                  title="Копировать"
-                                >
-                                  <IconCopy size={14} />
-                                </button>
-                              )}
-                            </code>
-                          </td>
-                          <td className="text-muted">{pool.description || '—'}</td>
-                          <td className="text-end">
-                            <div className="btn-list gap-1 mb-0 justify-content-end">
-                              <button
-                                className="btn btn-ghost-primary btn-icon btn-sm"
-                                onClick={() => handleEditPool(pool)}
-                                title="Редактировать"
-                              >
+                <div className="row row-cards">
+                  {filteredPools.map(pool => (
+                    <div key={pool.id} className="col-sm-6 col-lg-4">
+                      <div className="card">
+                        <div className="card-body">
+                          <div className="d-flex align-items-center mb-3">
+                            <span className="avatar avatar-sm bg-green-lt me-2">
+                              <IconDatabase size={16} className="text-green" />
+                            </span>
+                            <div className="flex-fill">
+                              <div className="fw-medium">{pool.name || '—'}</div>
+                            </div>
+                            <div className="dropdown">
+                              <button className="btn btn-ghost-secondary btn-icon btn-sm" data-bs-toggle="dropdown">
                                 <IconEdit size={16} />
                               </button>
-                              <button
-                                className="btn btn-ghost-danger btn-icon btn-sm"
-                                onClick={() => handleDeletePool(pool)}
-                                title="Удалить"
-                              >
-                                <IconTrash size={16} />
-                              </button>
+                              <div className="dropdown-menu dropdown-menu-end">
+                                <button className="dropdown-item" onClick={() => handleEditPool(pool)}>
+                                  <IconEdit size={16} className="me-2" />Редактировать
+                                </button>
+                                <button className="dropdown-item text-danger" onClick={() => handleDeletePool(pool)}>
+                                  <IconTrash size={16} className="me-2" />Удалить
+                                </button>
+                              </div>
                             </div>
-                          </td>
-                        </tr>
-                      ))}
-                    </tbody>
-                  </table>
+                          </div>
+                          
+                          <div className="d-flex align-items-center gap-2 mb-2">
+                            <code className="flex-fill">{pool.cidr || '—'}</code>
+                            {pool.cidr && (
+                              <button
+                                className="btn btn-ghost-secondary btn-icon btn-sm"
+                                onClick={() => copyToClipboard(pool.cidr)}
+                                title="Копировать CIDR"
+                              >
+                                <IconCopy size={14} />
+                              </button>
+                            )}
+                          </div>
+                          
+                          {pool.description && (
+                            <div className="text-muted small">{pool.description}</div>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                  ))}
                 </div>
               )}
-            </div>
-          )}
-
-          {/* Defaults Tab */}
-          {activeTab === 'defaults' && (
-            <div className="card">
-              <div className="card-header">
-                <h3 className="card-title">Настройки по умолчанию для генерации URL</h3>
-              </div>
-              <div className="card-body">
-                <div className="row g-3">
-                  <div className="col-12">
-                    <label className="form-label">Base URL</label>
-                    <input
-                      type="text"
-                      className="form-control"
-                      value={config.defaults?.baseUrl || ''}
-                      onChange={(e) => handleDefaultsChange('baseUrl', e.target.value)}
-                      placeholder="https://functions.yandexcloud.net/..."
-                    />
-                    <div className="form-text">Базовый URL для генерации ссылок</div>
-                  </div>
-                  <div className="col-md-6">
-                    <label className="form-label">Тип</label>
-                    <select
-                      className="form-select"
-                      value={config.defaults?.type || 'routes'}
-                      onChange={(e) => handleDefaultsChange('type', e.target.value)}
-                    >
-                      <option value="routes">routes</option>
-                      <option value="prefixes">prefixes</option>
-                      <option value="addresses">addresses</option>
-                    </select>
-                  </div>
-                  <div className="col-md-6">
-                    <label className="form-label">Версия</label>
-                    <select
-                      className="form-select"
-                      value={config.defaults?.version || 'v4.rsc'}
-                      onChange={(e) => handleDefaultsChange('version', e.target.value)}
-                    >
-                      <option value="v4.rsc">v4.rsc</option>
-                      <option value="v6.rsc">v6.rsc</option>
-                      <option value="v4v6.rsc">v4v6.rsc</option>
-                    </select>
-                  </div>
-                </div>
-              </div>
-            </div>
+            </>
           )}
         </>
       )}
@@ -831,9 +1168,20 @@ function NetworkConfigManager() {
         title={gatewayModalMode === 'add' ? 'Добавить Gateway' : 'Редактировать Gateway'}
         submitLabel={gatewayModalMode === 'add' ? 'Добавить' : 'Сохранить'}
         submitIcon={gatewayModalMode === 'add' ? IconPlus : IconEdit}
+        size="lg"
       >
         {editingGateway && (
           <div className="row g-3">
+            <div className="col-12">
+              <label className="form-label">Сервер</label>
+              <ServerAutocompleteInput
+                value={editingGateway.serverId}
+                onChange={(val) => setEditingGateway({ ...editingGateway, serverId: val })}
+                servers={servers}
+                placeholder="Выберите сервер..."
+              />
+              <div className="form-text">Gateway будет привязан к выбранному серверу</div>
+            </div>
             <div className="col-md-6">
               <FormField
                 label="Имя"
@@ -893,9 +1241,20 @@ function NetworkConfigManager() {
         title={interfaceModalMode === 'add' ? 'Добавить интерфейс' : 'Редактировать интерфейс'}
         submitLabel={interfaceModalMode === 'add' ? 'Добавить' : 'Сохранить'}
         submitIcon={interfaceModalMode === 'add' ? IconPlus : IconEdit}
+        size="lg"
       >
         {editingInterface && (
           <div className="row g-3">
+            <div className="col-12">
+              <label className="form-label">Сервер</label>
+              <ServerAutocompleteInput
+                value={editingInterface.serverId}
+                onChange={(val) => setEditingInterface({ ...editingInterface, serverId: val })}
+                servers={servers}
+                placeholder="Выберите сервер..."
+              />
+              <div className="form-text">Интерфейс будет привязан к выбранному серверу</div>
+            </div>
             <div className="col-md-6">
               <FormField
                 label="Имя интерфейса"
@@ -916,7 +1275,7 @@ function NetworkConfigManager() {
                 options={INTERFACE_TYPES}
               />
             </div>
-            <div className="col-md-6">
+            <div className="col-md-4">
               <FormField
                 label="Local IP"
                 name="localIp"
@@ -925,7 +1284,7 @@ function NetworkConfigManager() {
                 placeholder="10.10.0.1"
               />
             </div>
-            <div className="col-md-6">
+            <div className="col-md-4">
               <FormField
                 label="Remote IP"
                 name="remoteIp"
@@ -934,7 +1293,7 @@ function NetworkConfigManager() {
                 placeholder="10.10.0.2"
               />
             </div>
-            <div className="col-md-6">
+            <div className="col-md-4">
               <FormField
                 label="Порт"
                 name="port"
@@ -943,19 +1302,6 @@ function NetworkConfigManager() {
                 placeholder="51820"
               />
             </div>
-            <div className="col-md-6">
-              <FormField
-                label="Сервер"
-                name="serverId"
-                type="select"
-                value={editingInterface.serverId}
-                onChange={(val) => setEditingInterface({ ...editingInterface, serverId: val })}
-                options={[
-                  { value: '', label: 'Выберите сервер' },
-                  ...servers.map(s => ({ value: s.id || s.ip, label: s.dns || s.ip }))
-                ]}
-              />
-            </div>
           </div>
         )}
       </FormModal>