diff --git a/frontend/src/EasySwitchManager.jsx b/frontend/src/EasySwitchManager.jsx
index 6ebb9a6..526d8ee 100644
--- a/frontend/src/EasySwitchManager.jsx
+++ b/frontend/src/EasySwitchManager.jsx
@@ -15,11 +15,12 @@ import {
   IconDeviceFloppy,
   IconBolt,
   IconChevronDown,
-  IconChevronUp
+  IconChevronUp,
+  IconArrowsExchange
 } from '@tabler/icons-react';
 import PageHeader from './components/PageHeader.jsx';
 
-// Функция для получения флага по коду страны
+// Флаг по коду страны
 const countryToFlag = (code) => {
   if (!code || typeof code !== 'string') return '';
   const cc = code.trim().toUpperCase();
@@ -28,6 +29,198 @@ const countryToFlag = (code) => {
   return String.fromCodePoint(...codePoints);
 };
 
+/** Карточка шлюза в стиле Tabler: компактная, с флагом, пингом, состоянием active */
+function GatewayCard({ gateway, isActive, isFastest, ping, countryFlag, onClick }) {
+  const flag = countryToFlag(gateway.country) || countryFlag || '🌐';
+  return (
+    <div
+      className={`card card-sm h-100 ${isActive ? 'bg-primary text-white border-primary' : 'card-hover'} cursor-pointer`}
+      style={{ transition: 'all 0.2s ease' }}
+      onClick={onClick}
+      onKeyDown={(e) => e.key === 'Enter' && onClick()}
+      role="button"
+      tabIndex={0}
+      aria-pressed={isActive}
+    >
+      <div className="card-body p-2 position-relative">
+        {isActive && (
+          <span className="avatar avatar-sm bg-white text-primary rounded-circle position-absolute top-0 end-0 mt-1 me-1 d-flex align-items-center justify-content-center">
+            <IconCheck size={12} strokeWidth={3} />
+          </span>
+        )}
+        {isFastest && !isActive && (
+          <span className="badge bg-yellow-lt text-yellow mb-1 d-inline-flex align-items-center" style={{ fontSize: '0.65rem', padding: '2px 6px' }}>
+            <IconBolt size={10} className="me-1" />
+            Fast
+          </span>
+        )}
+        <div className="d-flex align-items-center gap-2 mb-1">
+          <span
+            className="avatar avatar-sm flex-shrink-0 d-flex align-items-center justify-content-center rounded"
+            style={{
+              fontSize: '1.1rem',
+              lineHeight: 1,
+              backgroundColor: isActive ? 'rgba(255,255,255,0.25)' : 'var(--tblr-bg-surface-secondary, rgba(0,0,0,.06))',
+            }}
+            title={gateway.country || ''}
+          >
+            {flag}
+          </span>
+          <div className="flex-grow-1 min-w-0">
+            <div className={`fw-semibold text-truncate ${isActive ? 'text-white' : ''}`} style={{ fontSize: '0.85rem' }}>
+              {gateway.comment || gateway.name}
+            </div>
+          </div>
+        </div>
+        {gateway.ip && (
+          <div className={`small text-truncate ${isActive ? 'text-white-50' : 'text-muted'}`} style={{ fontSize: '0.75rem' }}>
+            {gateway.ip}
+          </div>
+        )}
+        <div className={`fw-bold mt-1 ${isActive ? 'text-white' : 'text-success'}`} style={{ fontSize: '1rem' }}>
+          {ping != null ? ping : '—'}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/** Рендер списка communities по тегам (группировка) для одного сервера */
+function EasySwitchServerContentGrouped({
+  server,
+  filteredCommunitiesForServer,
+  activeGateways,
+  handleGatewaySelect,
+  getServerMetadata,
+  pingMap,
+  countryToFlag,
+}) {
+  const country = getServerMetadata(server.name)?.country || '';
+  const groupedByTags = new Map();
+  const noTagCommunities = [];
+  filteredCommunitiesForServer.forEach((comm) => {
+    const tags = Array.isArray(comm.tags) ? comm.tags : (comm.tags ? String(comm.tags).split(',').map((t) => t.trim()).filter(Boolean) : []);
+    if (tags.length === 0) noTagCommunities.push(comm);
+    else tags.forEach((tag) => { if (!groupedByTags.has(tag)) groupedByTags.set(tag, []); groupedByTags.get(tag).push(comm); });
+  });
+  const sortedTags = Array.from(groupedByTags.keys()).sort();
+
+  const renderCommunityBlock = (comm) => {
+    const activeKey = `${server.id}:${comm.value}`;
+    const activeGw = activeGateways[activeKey];
+    const hasFilterForComm = server.filtersMap.has(comm.value);
+    const inv = getServerMetadata(server.name);
+    const routerId = inv?.id || inv?.dns || inv?.ip;
+    return (
+      <div key={comm.value} className="col-12 col-md-6 col-lg-4">
+        <div className="mb-3">
+          <div className="mb-2">
+            <span className="badge bg-blue-lt text-blue me-2" style={{ fontSize: '0.8rem' }}>{comm.value}</span>
+            <span className="fw-medium">{comm.name || comm.description || ''}</span>
+            {hasFilterForComm && <span className="badge bg-green-lt text-green ms-2" style={{ fontSize: '0.7rem' }}>настроен</span>}
+            <span className="text-muted small ms-2">({server.gateways.length})</span>
+          </div>
+          <div className="row g-2 row-cards">
+            {server.gateways.map((gw, idx) => {
+              const pingKey = routerId && gw.ip ? `${routerId}:${gw.ip}` : null;
+              const ping = pingKey && pingMap[pingKey] !== undefined ? pingMap[pingKey] : null;
+              return (
+                <div key={gw.name} className="col-12 col-sm-6 col-lg-4">
+                  <GatewayCard
+                    gateway={gw}
+                    isActive={activeGw === gw.name}
+                    isFastest={idx === 0}
+                    ping={ping}
+                    countryFlag={countryToFlag(country)}
+                    onClick={() => handleGatewaySelect(server.id, comm.value, gw.name)}
+                  />
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <>
+      {sortedTags.map((tag) => (
+        <div key={tag} className="mb-4">
+          <div className="mb-2 pb-2 border-bottom">
+            <span className="badge bg-purple-lt text-purple me-2" style={{ fontSize: '0.85rem', padding: '6px 10px' }}>{tag}</span>
+            <span className="text-muted small">{groupedByTags.get(tag).length} communities</span>
+          </div>
+          <div className="row g-3">{groupedByTags.get(tag).map(renderCommunityBlock)}</div>
+        </div>
+      ))}
+      {noTagCommunities.length > 0 && (
+        <div className="mb-4">
+          <div className="mb-2 pb-2 border-bottom">
+            <span className="badge bg-gray-lt text-gray me-2" style={{ fontSize: '0.85rem', padding: '6px 10px' }}>Без тегов</span>
+            <span className="text-muted small">{noTagCommunities.length} communities</span>
+          </div>
+          <div className="row g-3">{noTagCommunities.map(renderCommunityBlock)}</div>
+        </div>
+      )}
+    </>
+  );
+}
+
+/** Рендер списка communities без группировки для одного сервера */
+function EasySwitchServerContentFlat({
+  server,
+  filteredCommunitiesForServer,
+  activeGateways,
+  handleGatewaySelect,
+  getServerMetadata,
+  pingMap,
+  countryToFlag,
+}) {
+  const country = getServerMetadata(server.name)?.country || '';
+  const inv = getServerMetadata(server.name);
+  const routerId = inv?.id || inv?.dns || inv?.ip;
+  return (
+    <div className="row g-3">
+      {filteredCommunitiesForServer.map((comm) => {
+        const activeKey = `${server.id}:${comm.value}`;
+        const activeGw = activeGateways[activeKey];
+        const hasFilterForComm = server.filtersMap.has(comm.value);
+        return (
+          <div key={comm.value} className="col-12 col-md-6 col-lg-4">
+            <div className="mb-3">
+              <div className="mb-2">
+                <span className="badge bg-blue-lt text-blue me-2" style={{ fontSize: '0.8rem' }}>{comm.value}</span>
+                <span className="fw-medium">{comm.name || comm.description || ''}</span>
+                {hasFilterForComm && <span className="badge bg-green-lt text-green ms-2" style={{ fontSize: '0.7rem' }}>настроен</span>}
+                <span className="text-muted small ms-2">({server.gateways.length})</span>
+              </div>
+              <div className="row g-2 row-cards">
+                {server.gateways.map((gw, idx) => {
+                  const pingKey = routerId && gw.ip ? `${routerId}:${gw.ip}` : null;
+                  const ping = pingKey && pingMap[pingKey] !== undefined ? pingMap[pingKey] : null;
+                  return (
+                    <div key={gw.name} className="col-12 col-sm-6 col-lg-4">
+                      <GatewayCard
+                        gateway={gw}
+                        isActive={activeGw === gw.name}
+                        isFastest={idx === 0}
+                        ping={ping}
+                        countryFlag={countryToFlag(country)}
+                        onClick={() => handleGatewaySelect(server.id, comm.value, gw.name)}
+                      />
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
 function EasySwitchManager() {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState('');
@@ -508,16 +701,15 @@ function EasySwitchManager() {
       <div className="container-xl">
         <PageHeader
           title="Easy Switch"
-          icon={<IconWorld size={24} />}
+          icon={<IconArrowsExchange size={24} />}
           meta="Быстрое переключение шлюзов"
         />
-
         <div className="card">
           <div className="card-body text-center py-5">
-            <div className="spinner-border text-primary" role="status">
+            <div className="spinner-border text-primary" role="status" aria-label="Загрузка">
               <span className="visually-hidden">Загрузка...</span>
             </div>
-            <div className="text-muted mt-3">Загрузка данных...</div>
+            <p className="text-secondary mt-3 mb-0">Загрузка данных...</p>
           </div>
         </div>
       </div>
@@ -528,734 +720,259 @@ function EasySwitchManager() {
     <div className="container-xl">
       <PageHeader
         title="Easy Switch"
-        icon={<IconWorld size={24} />}
+        icon={<IconArrowsExchange size={24} />}
         meta={`Быстрое переключение шлюзов • ${servers.length} ${servers.length === 1 ? 'сервер' : 'серверов'} • ${communitiesDirectory.length} communities`}
         actions={
           <div className="btn-list">
             {hasChanges && (
-              <button
-                className="btn btn-success"
-                onClick={handleApplyChanges}
-              >
+              <button type="button" className="btn btn-success" onClick={handleApplyChanges}>
                 <IconDeviceFloppy size={18} className="me-2" />
                 Применить изменения
               </button>
             )}
-            <button
-              className="btn btn-primary"
-              onClick={handleRefresh}
-              disabled={loading}
-            >
-              <IconRefresh size={18} className="me-2" />
-              Обновить
+            <button type="button" className="btn btn-outline-primary" onClick={handleRefresh} disabled={loading}>
+              <IconRefresh size={18} className={loading ? 'spin me-2' : 'me-2'} />
+              {loading ? 'Загрузка…' : 'Обновить'}
             </button>
           </div>
         }
       />
 
-      {/* Вкладки */}
-      <div className="mb-3">
-        <ul className="nav nav-tabs" role="tablist">
-          <li className="nav-item" role="presentation">
-            <button
-              className={`nav-link ${activeTab === 'proxies' ? 'active' : ''}`}
-              onClick={() => setActiveTab('proxies')}
-              type="button"
-            >
-              Прокси ({communitiesDirectory.length})
-            </button>
-          </li>
-          <li className="nav-item" role="presentation">
-            <button
-              className={`nav-link ${activeTab === 'providers' ? 'active' : ''}`}
-              onClick={() => setActiveTab('providers')}
-              type="button"
-            >
-              Провайдер прокси (1)
-            </button>
-          </li>
-        </ul>
-      </div>
-
-      {/* Уведомления */}
-      {error && (
-        <div className="alert alert-danger alert-dismissible" role="alert">
-          <div className="d-flex">
-            <IconAlertCircle className="me-2" />
-            <div>{error}</div>
-          </div>
-          <button type="button" className="btn-close" onClick={() => setError('')}></button>
+      {/* Вкладки в стиле Tabler: card + card-header-tabs */}
+      <div className="card">
+        <div className="card-header">
+          <ul className="nav nav-tabs card-header-tabs" role="tablist">
+            <li className="nav-item" role="presentation">
+              <button
+                type="button"
+                className={`nav-link ${activeTab === 'proxies' ? 'active' : ''}`}
+                onClick={() => setActiveTab('proxies')}
+                role="tab"
+                aria-selected={activeTab === 'proxies'}
+              >
+                Прокси ({communitiesDirectory.length})
+              </button>
+            </li>
+            <li className="nav-item" role="presentation">
+              <button
+                type="button"
+                className={`nav-link ${activeTab === 'providers' ? 'active' : ''}`}
+                onClick={() => setActiveTab('providers')}
+                role="tab"
+                aria-selected={activeTab === 'providers'}
+              >
+                Провайдер прокси (1)
+              </button>
+            </li>
+          </ul>
         </div>
-      )}
-      
-      {success && (
-        <div className="alert alert-success alert-dismissible" role="alert">
-          <div className="d-flex">
-            <IconCheck className="me-2" />
-            <div>{success}</div>
-          </div>
-          <button type="button" className="btn-close" onClick={() => setSuccess('')}></button>
-        </div>
-      )}
-
-      {/* Панель фильтров */}
-      <div className="mb-3">
-        <div className="row g-2 align-items-center">
-          {/* Переключатель "Только настроенные" */}
-          <div className="col-auto">
-            <label className="form-check form-switch mb-0">
-              <input 
-                className="form-check-input" 
-                type="checkbox" 
-                checked={showOnlyConfigured}
-                onChange={(e) => setShowOnlyConfigured(e.target.checked)}
-              />
-              <span className="form-check-label">Только настроенные фильтры</span>
-            </label>
-          </div>
-          
-          {/* Переключатель "Группировка по тегам" */}
-          <div className="col-auto">
-            <label className="form-check form-switch mb-0">
-              <input 
-                className="form-check-input" 
-                type="checkbox" 
-                checked={groupByTags}
-                onChange={(e) => setGroupByTags(e.target.checked)}
-              />
-              <span className="form-check-label">Группировать по тегам</span>
-            </label>
-          </div>
-          
-          {/* Поиск */}
-          <div className="col">
-            <div className="input-icon">
-              <span className="input-icon-addon">
-                <IconSearch size={18} />
-              </span>
-              <input
-                type="text"
-                className="form-control"
-                placeholder="Поиск | Ключевое слово..."
-                value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
-              />
-              {searchQuery && (
-                <span 
-                  className="input-icon-addon" 
-                  style={{ right: 0, cursor: 'pointer' }}
-                  onClick={() => setSearchQuery('')}
-                >
-                  <IconX size={18} />
-                </span>
-              )}
+        <div className="card-body">
+          {/* Уведомления в стиле Tabler (alert-icon + dismissible) */}
+          {error && (
+            <div className="alert alert-danger alert-dismissible d-flex align-items-center mb-3" role="alert">
+              <IconAlertCircle className="alert-icon flex-shrink-0 me-2" size={24} />
+              <div className="flex-grow-1">{error}</div>
+              <button type="button" className="btn-close" onClick={() => setError('')} aria-label="Закрыть" />
             </div>
-          </div>
-          
-          {/* Инструменты */}
-          <div className="col-auto">
-            <button 
-              className="btn btn-outline-secondary btn-sm"
-              onClick={() => {
-                if (expandedServers.size === filteredServers.length) {
-                  setExpandedServers(new Set());
-                } else {
-                  setExpandedServers(new Set(filteredServers.map(s => s.id)));
-                }
-              }}
-              title={expandedServers.size === filteredServers.length ? "Свернуть все" : "Развернуть все"}
-            >
-              {expandedServers.size === filteredServers.length ? (
-                <>
-                  <IconChevronUp size={18} className="me-1" />
-                  Свернуть все
-                </>
-              ) : (
-                <>
-                  <IconChevronDown size={18} className="me-1" />
-                  Развернуть все
-                </>
-              )}
-            </button>
-          </div>
-          <div className="col-auto">
-            <button className="btn btn-icon" title="Настройки">
-              <IconSettings size={18} />
-            </button>
-          </div>
-          <div className="col-auto">
-            <button className="btn btn-icon" title="Быстрые действия">
-              <IconFilter size={18} />
-            </button>
-          </div>
-        </div>
-      </div>
+          )}
+          {success && (
+            <div className="alert alert-success alert-dismissible d-flex align-items-center mb-3" role="alert">
+              <IconCheck className="alert-icon flex-shrink-0 me-2" size={24} />
+              <div className="flex-grow-1">{success}</div>
+              <button type="button" className="btn-close" onClick={() => setSuccess('')} aria-label="Закрыть" />
+            </div>
+          )}
 
-      {/* Список серверов с communities и шлюзами */}
-      {filteredServers.length === 0 ? (
-        <div className="card">
-          <div className="card-body text-center py-5">
-            <IconFilter size={48} className="text-muted mb-3" />
-            <h3 className="text-muted">Ничего не найдено</h3>
-            <p className="text-muted">
-              {searchQuery ? 'Попробуйте изменить критерии поиска' : 'Нет доступных серверов'}
-            </p>
-          </div>
-        </div>
-      ) : (
-        <div className="space-y-3">
-          {filteredServers.map((server) => {
-            const serverMeta = getServerMetadata(server.name);
-            const country = serverMeta?.country || '';
-            const flag = countryToFlag(country);
-            
-            // Фильтруем communities для этого сервера
-            const filteredCommunitiesForServer = communitiesDirectory.filter((comm) => {
-              if (showOnlyConfigured) {
-                return server.filtersMap.has(comm.value);
-              }
-              return true;
-            });
-            
-            // Не показываем сервер, если нет отфильтрованных communities
-            if (filteredCommunitiesForServer.length === 0) return null;
-            
-            const isExpanded = expandedServers.has(server.id);
-            
-            return (
-              <div key={server.id} className="card mb-3">
-                {/* Заголовок сервера (кликабельный) */}
-                <div 
-                  className="card-header py-2" 
-                  style={{ 
-                    backgroundColor: 'rgba(32, 107, 196, 0.05)',
-                    cursor: 'pointer',
-                    userSelect: 'none'
-                  }}
-                  onClick={() => toggleServerExpanded(server.id)}
-                >
-                  <div className="d-flex align-items-center">
-                    {/* Иконка сворачивания */}
-                    {isExpanded ? (
-                      <IconChevronUp size={20} className="me-2 text-muted" />
-                    ) : (
-                      <IconChevronDown size={20} className="me-2 text-muted" />
-                    )}
-                    
-                    {flag && <span className="me-2" style={{ fontSize: '1.5rem' }}>{flag}</span>}
-                    <IconServer size={20} className="me-2 text-primary" />
-                    <h3 className="card-title mb-0 me-2">{server.name}</h3>
-                    {server.description && (
-                      <span className="text-muted small">— {server.description}</span>
-                    )}
-                    <span className="badge bg-blue-lt text-blue ms-auto">
-                      {filteredCommunitiesForServer.length} communities • {server.gateways.length} gateways
-                    </span>
+          {activeTab === 'proxies' && (
+            <>
+              {/* Панель фильтров — Tabler form-check, input-icon, btn-list */}
+              <div className="mb-4">
+                <div className="row g-2 align-items-center flex-wrap">
+                  <div className="col-auto">
+                    <label className="form-check form-switch mb-0">
+                      <input
+                        className="form-check-input"
+                        type="checkbox"
+                        checked={showOnlyConfigured}
+                        onChange={(e) => setShowOnlyConfigured(e.target.checked)}
+                      />
+                      <span className="form-check-label">Только настроенные фильтры</span>
+                    </label>
+                  </div>
+                  <div className="col-auto">
+                    <label className="form-check form-switch mb-0">
+                      <input
+                        className="form-check-input"
+                        type="checkbox"
+                        checked={groupByTags}
+                        onChange={(e) => setGroupByTags(e.target.checked)}
+                      />
+                      <span className="form-check-label">Группировать по тегам</span>
+                    </label>
+                  </div>
+                  <div className="col">
+                    <div className="input-icon">
+                      <span className="input-icon-addon">
+                        <IconSearch size={18} />
+                      </span>
+                      <input
+                        type="text"
+                        className="form-control"
+                        placeholder="Поиск по серверу, community, шлюзу…"
+                        value={searchQuery}
+                        onChange={(e) => setSearchQuery(e.target.value)}
+                        aria-label="Поиск"
+                        style={searchQuery ? { paddingRight: '2.5rem' } : undefined}
+                      />
+                      {searchQuery && (
+                        <span
+                          className="input-icon-addon"
+                          style={{ right: 0, left: 'auto', cursor: 'pointer' }}
+                          onClick={() => setSearchQuery('')}
+                          onKeyDown={(e) => e.key === 'Enter' && setSearchQuery('')}
+                          role="button"
+                          tabIndex={0}
+                          aria-label="Очистить"
+                        >
+                          <IconX size={18} />
+                        </span>
+                      )}
+                    </div>
+                  </div>
+                  <div className="col-auto btn-list">
+                    <button
+                      type="button"
+                      className="btn btn-outline-secondary btn-sm"
+                      onClick={() => {
+                        if (expandedServers.size === filteredServers.length) {
+                          setExpandedServers(new Set());
+                        } else {
+                          setExpandedServers(new Set(filteredServers.map((s) => s.id)));
+                        }
+                      }}
+                      title={expandedServers.size === filteredServers.length ? 'Свернуть все' : 'Развернуть все'}
+                    >
+                      {expandedServers.size === filteredServers.length ? (
+                        <>
+                          <IconChevronUp size={18} className="me-1" />
+                          Свернуть все
+                        </>
+                      ) : (
+                        <>
+                          <IconChevronDown size={18} className="me-1" />
+                          Развернуть все
+                        </>
+                      )}
+                    </button>
+                    <button type="button" className="btn btn-icon btn-outline-secondary" title="Настройки" aria-label="Настройки">
+                      <IconSettings size={18} />
+                    </button>
+                    <button type="button" className="btn btn-icon btn-outline-secondary" title="Быстрые действия" aria-label="Быстрые действия">
+                      <IconFilter size={18} />
+                    </button>
                   </div>
                 </div>
-                
-                {/* Контент (сворачиваемый) */}
-                {isExpanded && (
-                  <div className="card-body p-3">
-                  {/* Условный рендеринг: группировка по тегам или обычный вид */}
-                  {groupByTags ? (
-                    /* Группируем communities по тегам */
-                    (() => {
-                    // Группируем по тегам
-                    const groupedByTags = new Map();
-                    const noTagCommunities = [];
-                    
-                    filteredCommunitiesForServer.forEach(comm => {
-                      const tags = Array.isArray(comm.tags) ? comm.tags : 
-                                   (comm.tags ? String(comm.tags).split(',').map(t => t.trim()).filter(Boolean) : []);
-                      
-                      if (tags.length === 0) {
-                        noTagCommunities.push(comm);
-                      } else {
-                        tags.forEach(tag => {
-                          if (!groupedByTags.has(tag)) {
-                            groupedByTags.set(tag, []);
-                          }
-                          groupedByTags.get(tag).push(comm);
-                        });
-                      }
-                    });
-                    
-                    // Сортируем теги
-                    const sortedTags = Array.from(groupedByTags.keys()).sort();
-                    
-                    return (
-                      <>
-                        {/* Communities с тегами */}
-                        {sortedTags.map(tag => {
-                          const tagCommunities = groupedByTags.get(tag);
-                          return (
-                            <div key={tag} className="mb-4">
-                              {/* Заголовок группы тегов */}
-                              <div className="mb-2 pb-2 border-bottom">
-                                <span className="badge bg-purple-lt text-purple me-2" style={{ fontSize: '0.85rem', padding: '6px 10px' }}>
-                                  {tag}
-                                </span>
-                                <span className="text-muted small">
-                                  {tagCommunities.length} {tagCommunities.length === 1 ? 'community' : 'communities'}
-                                </span>
-                              </div>
-                              
-                              {/* Сетка Communities для этого тега */}
-                              <div className="row g-3">
-                                {tagCommunities.map((comm) => {
-                                  const activeKey = `${server.id}:${comm.value}`;
-                                  const activeGw = activeGateways[activeKey];
-                                  const hasFilterForComm = server.filtersMap.has(comm.value);
-                                  
-                                  return (
-                                    <div key={comm.value} className="col-12 col-md-6 col-lg-4">
-                          <div className="mb-2">
-                            {/* Заголовок community */}
-                            <div className="mb-2">
-                              <span className="badge bg-blue-lt text-blue me-2" style={{ fontSize: '0.8rem' }}>
-                                {comm.value}
-                              </span>
-                              <span className="fw-medium">{comm.name || comm.description || ''}</span>
-                              {hasFilterForComm && (
-                                <span className="badge bg-green-lt text-green ms-2" style={{ fontSize: '0.7rem' }}>
-                                  настроен
-                                </span>
-                              )}
-                              <span className="text-muted small ms-2">
-                                ({server.gateways.length})
-                              </span>
-                            </div>
-                            
-                            {/* Сетка карточек шлюзов для этого community */}
-                            <div className="row g-2">
-                          {server.gateways.map((gw, idx) => {
-                            const isActive = activeGw === gw.name;
-                            const isFastest = idx === 0;
-                            const pingKey = (() => {
-                              const inv = getServerMetadata(server.name);
-                              const routerId = inv?.id || inv?.dns || inv?.ip;
-                              return routerId && gw.ip ? `${routerId}:${gw.ip}` : null;
-                            })();
-                            const ping = pingKey && pingMap[pingKey] !== undefined ? pingMap[pingKey] : null;
-                            
-                            return (
-                              <div key={gw.name} className="col-12 col-sm-4">
-                                <div
-                                  className={`card cursor-pointer h-100 ${isActive ? 'bg-primary text-white' : ''}`}
-                                  style={{
-                                    cursor: 'pointer',
-                                    transition: 'all 0.15s ease',
-                                    border: isActive ? '2px solid var(--tblr-primary)' : '1px solid rgba(0,0,0,0.1)',
-                                    borderRadius: '6px',
-                                    boxShadow: isActive ? '0 3px 8px rgba(32, 107, 196, 0.3)' : 'none',
-                                    position: 'relative'
-                                  }}
-                                  onClick={() => handleGatewaySelect(server.id, comm.value, gw.name)}
-                                  onMouseEnter={(e) => {
-                                    if (!isActive) {
-                                      e.currentTarget.style.boxShadow = '0 2px 6px rgba(0,0,0,0.1)';
-                                      e.currentTarget.style.transform = 'translateY(-1px)';
-                                    }
-                                  }}
-                                  onMouseLeave={(e) => {
-                                    if (!isActive) {
-                                      e.currentTarget.style.boxShadow = 'none';
-                                      e.currentTarget.style.transform = 'translateY(0)';
-                                    }
-                                  }}
-                                >
-                                  <div className="card-body p-2">
-                                    {/* Галочка (абсолютное позиционирование) */}
-                                    {isActive && (
-                                      <div 
-                                        className="bg-white text-primary rounded-circle d-flex align-items-center justify-content-center"
-                                        style={{ 
-                                          width: '20px', 
-                                          height: '20px',
-                                          position: 'absolute',
-                                          top: '8px',
-                                          right: '8px'
-                                        }}
-                                      >
-                                        <IconCheck size={12} />
-                                      </div>
-                                    )}
-                                    
-                                    {/* Метка Fastest */}
-                                    <div className="mb-1" style={{ minHeight: '18px' }}>
-                                      {isFastest && !isActive && (
-                                        <span className="badge bg-yellow-lt text-yellow d-inline-flex align-items-center" style={{ fontSize: '0.65rem', padding: '2px 6px' }}>
-                                          <IconBolt size={10} className="me-1" />
-                                          Fast
-                                        </span>
-                                      )}
-                                    </div>
-                                    
-                                    {/* Флаг и название (комментарий) шлюза */}
-                                    <div className="d-flex align-items-center gap-2 mb-1">
-                                      <span
-                                        className="d-flex align-items-center justify-content-center flex-shrink-0 rounded"
-                                        style={{
-                                          width: '28px',
-                                          height: '28px',
-                                          fontSize: '1.25rem',
-                                          lineHeight: 1,
-                                          backgroundColor: isActive ? 'rgba(255,255,255,0.25)' : 'rgba(0,0,0,0.06)',
-                                        }}
-                                        title={gw.country || country || ''}
-                                      >
-                                        {countryToFlag(gw.country || country || '') || '🌐'}
-                                      </span>
-                                      <div className="flex-grow-1 min-w-0">
-                                        <div
-                                          className={`fw-bold ${isActive ? 'text-white' : ''}`}
-                                          style={{ fontSize: '0.85rem', lineHeight: '1.2', wordBreak: 'break-word' }}
-                                        >
-                                          {gw.comment || gw.name}
-                                        </div>
-                                      </div>
-                                    </div>
-                                    {/* IP шлюза ниже */}
-                                    {gw.ip && (
-                                      <div
-                                        className={`small text-truncate ${
-                                          isActive ? 'text-white-75' : 'text-muted'
-                                        }`}
-                                        style={{ fontSize: '0.75rem' }}
-                                      >
-                                        {gw.ip}
-                                      </div>
-                                    )}
-                                    
-                                    {/* Метрика (пинг) */}
-                                    <div className={`fw-bold mt-1 ${isActive ? 'text-white' : 'text-success'}`} style={{ fontSize: '1.1rem' }}>
-                                      {ping != null ? ping : '—'}
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-                            );
-                          })}
-                            </div>
-                          </div>
-                        </div>
-                      );
-                                })}
-                              </div>
-                            </div>
-                          );
-                        })}
-                        
-                        {/* Communities без тегов */}
-                        {noTagCommunities.length > 0 && (
-                          <div className="mb-4">
-                            {/* Заголовок группы без тегов */}
-                            <div className="mb-2 pb-2 border-bottom">
-                              <span className="badge bg-gray-lt text-gray me-2" style={{ fontSize: '0.85rem', padding: '6px 10px' }}>
-                                Без тегов
-                              </span>
-                              <span className="text-muted small">
-                                {noTagCommunities.length} {noTagCommunities.length === 1 ? 'community' : 'communities'}
-                              </span>
-                            </div>
-                            
-                            {/* Сетка Communities без тегов */}
-                            <div className="row g-3">
-                              {noTagCommunities.map((comm) => {
-                                const activeKey = `${server.id}:${comm.value}`;
-                                const activeGw = activeGateways[activeKey];
-                                const hasFilterForComm = server.filtersMap.has(comm.value);
-                                
-                                return (
-                                  <div key={comm.value} className="col-12 col-md-6 col-lg-4">
-                                    <div className="mb-2">
-                                      {/* Заголовок community */}
-                                      <div className="mb-2">
-                                        <span className="badge bg-blue-lt text-blue me-2" style={{ fontSize: '0.8rem' }}>
-                                          {comm.value}
-                                        </span>
-                                        <span className="fw-medium">{comm.name || comm.description || ''}</span>
-                                        {hasFilterForComm && (
-                                          <span className="badge bg-green-lt text-green ms-2" style={{ fontSize: '0.7rem' }}>
-                                            настроен
-                                          </span>
-                                        )}
-                                        <span className="text-muted small ms-2">
-                                          ({server.gateways.length})
-                                        </span>
-                                      </div>
-                                      
-                                      {/* Сетка карточек шлюзов для этого community */}
-                                      <div className="row g-2">
-                                        {server.gateways.map((gw, idx) => {
-                                          const isActive = activeGw === gw.name;
-                                          const isFastest = idx === 0;
-                                          const pingKey = (() => {
-                                            const inv = getServerMetadata(server.name);
-                                            const routerId = inv?.id || inv?.dns || inv?.ip;
-                                            return routerId && gw.ip ? `${routerId}:${gw.ip}` : null;
-                                          })();
-                                          const ping = pingKey && pingMap[pingKey] !== undefined ? pingMap[pingKey] : null;
-                                          
-                                          return (
-                                            <div key={gw.name} className="col-12 col-sm-4">
-                                              <div
-                                                className={`card cursor-pointer h-100 ${isActive ? 'bg-primary text-white' : ''}`}
-                                                style={{
-                                                  cursor: 'pointer',
-                                                  transition: 'all 0.15s ease',
-                                                  border: isActive ? '2px solid var(--tblr-primary)' : '1px solid rgba(0,0,0,0.1)',
-                                                  borderRadius: '6px',
-                                                  boxShadow: isActive ? '0 3px 8px rgba(32, 107, 196, 0.3)' : 'none',
-                                                  position: 'relative'
-                                                }}
-                                                onClick={() => handleGatewaySelect(server.id, comm.value, gw.name)}
-                                                onMouseEnter={(e) => {
-                                                  if (!isActive) {
-                                                    e.currentTarget.style.boxShadow = '0 2px 6px rgba(0,0,0,0.1)';
-                                                    e.currentTarget.style.transform = 'translateY(-1px)';
-                                                  }
-                                                }}
-                                                onMouseLeave={(e) => {
-                                                  if (!isActive) {
-                                                    e.currentTarget.style.boxShadow = 'none';
-                                                    e.currentTarget.style.transform = 'translateY(0)';
-                                                  }
-                                                }}
-                                              >
-                                                <div className="card-body p-2">
-                                                  {/* Галочка (абсолютное позиционирование) */}
-                                                  {isActive && (
-                                                    <div 
-                                                      className="bg-white text-primary rounded-circle d-flex align-items-center justify-content-center"
-                                                      style={{ 
-                                                        width: '20px', 
-                                                        height: '20px',
-                                                        position: 'absolute',
-                                                        top: '8px',
-                                                        right: '8px'
-                                                      }}
-                                                    >
-                                                      <IconCheck size={12} />
-                                                    </div>
-                                                  )}
-                                                  
-                                                  {/* Метка Fastest */}
-                                                  <div className="mb-1" style={{ minHeight: '18px' }}>
-                                                    {isFastest && !isActive && (
-                                                      <span className="badge bg-yellow-lt text-yellow d-inline-flex align-items-center" style={{ fontSize: '0.65rem', padding: '2px 6px' }}>
-                                                        <IconBolt size={10} className="me-1" />
-                                                        Fast
-                                                      </span>
-                                                    )}
-                                                  </div>
-                                                  
-                                                  {/* Флаг и название (комментарий) шлюза */}
-                                                  <div className="d-flex align-items-center gap-2 mb-1">
-                                                    <span
-                                                      className="d-flex align-items-center justify-content-center flex-shrink-0 rounded"
-                                                      style={{
-                                                        width: '28px',
-                                                        height: '28px',
-                                                        fontSize: '1.25rem',
-                                                        lineHeight: 1,
-                                                        backgroundColor: isActive ? 'rgba(255,255,255,0.25)' : 'rgba(0,0,0,0.06)',
-                                                      }}
-                                                      title={gw.country || country || ''}
-                                                    >
-                                                      {countryToFlag(gw.country || country || '') || '🌐'}
-                                                    </span>
-                                                    <div className="flex-grow-1 min-w-0">
-                                                      <div
-                                                        className={`fw-bold ${isActive ? 'text-white' : ''}`}
-                                                        style={{ fontSize: '0.85rem', lineHeight: '1.2', wordBreak: 'break-word' }}
-                                                      >
-                                                        {gw.comment || gw.name}
-                                                      </div>
-                                                    </div>
-                                                  </div>
-                                                  {/* IP шлюза ниже */}
-                                                  {gw.ip && (
-                                                    <div
-                                                      className={`small text-truncate ${
-                                                        isActive ? 'text-white-75' : 'text-muted'
-                                                      }`}
-                                                      style={{ fontSize: '0.75rem' }}
-                                                    >
-                                                      {gw.ip}
-                                                    </div>
-                                                  )}
-                                                  
-                                                  {/* Метрика (пинг) */}
-                                                  <div className={`fw-bold mt-1 ${isActive ? 'text-white' : 'text-success'}`} style={{ fontSize: '1.1rem' }}>
-                                                    {ping != null ? ping : '—'}
-                                                  </div>
-                                                </div>
-                                              </div>
-                                            </div>
-                                          );
-                                        })}
-                                      </div>
-                                    </div>
-                                  </div>
-                                );
-                              })}
-                            </div>
-                          </div>
-                        )}
-                      </>
-                    );
-                  })()
-                  ) : (
-                    /* Обычный вид без группировки */
-                    <div className="row g-3">
-                      {filteredCommunitiesForServer.map((comm) => {
-                        const activeKey = `${server.id}:${comm.value}`;
-                        const activeGw = activeGateways[activeKey];
-                        const hasFilterForComm = server.filtersMap.has(comm.value);
-                        
-                        return (
-                          <div key={comm.value} className="col-12 col-md-6 col-lg-4">
-                            <div className="mb-2">
-                              {/* Заголовок community */}
-                              <div className="mb-2">
-                                <span className="badge bg-blue-lt text-blue me-2" style={{ fontSize: '0.8rem' }}>
-                                  {comm.value}
-                                </span>
-                                <span className="fw-medium">{comm.name || comm.description || ''}</span>
-                                {hasFilterForComm && (
-                                  <span className="badge bg-green-lt text-green ms-2" style={{ fontSize: '0.7rem' }}>
-                                    настроен
-                                  </span>
-                                )}
-                                <span className="text-muted small ms-2">
-                                  ({server.gateways.length})
-                                </span>
-                              </div>
-                              
-                              {/* Сетка карточек шлюзов для этого community */}
-                              <div className="row g-2">
-                                {server.gateways.map((gw, idx) => {
-                                  const isActive = activeGw === gw.name;
-                                  const isFastest = idx === 0;
-                                  const pingKey = (() => {
-                                    const inv = getServerMetadata(server.name);
-                                    const routerId = inv?.id || inv?.dns || inv?.ip;
-                                    return routerId && gw.ip ? `${routerId}:${gw.ip}` : null;
-                                  })();
-                                  const ping = pingKey && pingMap[pingKey] !== undefined ? pingMap[pingKey] : null;
-                                  
-                                  return (
-                                    <div key={gw.name} className="col-12 col-sm-4">
-                                      <div
-                                        className={`card cursor-pointer h-100 ${isActive ? 'bg-primary text-white' : ''}`}
-                                        style={{
-                                          cursor: 'pointer',
-                                          transition: 'all 0.15s ease',
-                                          border: isActive ? '2px solid var(--tblr-primary)' : '1px solid rgba(0,0,0,0.1)',
-                                          borderRadius: '6px',
-                                          boxShadow: isActive ? '0 3px 8px rgba(32, 107, 196, 0.3)' : 'none',
-                                          position: 'relative'
-                                        }}
-                                        onClick={() => handleGatewaySelect(server.id, comm.value, gw.name)}
-                                        onMouseEnter={(e) => {
-                                          if (!isActive) {
-                                            e.currentTarget.style.boxShadow = '0 2px 6px rgba(0,0,0,0.1)';
-                                            e.currentTarget.style.transform = 'translateY(-1px)';
-                                          }
-                                        }}
-                                        onMouseLeave={(e) => {
-                                          if (!isActive) {
-                                            e.currentTarget.style.boxShadow = 'none';
-                                            e.currentTarget.style.transform = 'translateY(0)';
-                                          }
-                                        }}
-                                      >
-                                        <div className="card-body p-2">
-                                          {/* Галочка (абсолютное позиционирование) */}
-                                          {isActive && (
-                                            <div 
-                                              className="bg-white text-primary rounded-circle d-flex align-items-center justify-content-center"
-                                              style={{ 
-                                                width: '20px', 
-                                                height: '20px',
-                                                position: 'absolute',
-                                                top: '8px',
-                                                right: '8px'
-                                              }}
-                                            >
-                                              <IconCheck size={12} />
-                                            </div>
-                                          )}
-                                          
-                                          {/* Метка Fastest */}
-                                          <div className="mb-1" style={{ minHeight: '18px' }}>
-                                            {isFastest && !isActive && (
-                                              <span className="badge bg-yellow-lt text-yellow d-inline-flex align-items-center" style={{ fontSize: '0.65rem', padding: '2px 6px' }}>
-                                                <IconBolt size={10} className="me-1" />
-                                                Fast
-                                              </span>
-                                            )}
-                                          </div>
-                                          
-                                          {/* Флаг и название (комментарий) шлюза */}
-                                          <div className="d-flex align-items-center gap-2 mb-1">
-                                            <span
-                                              className="d-flex align-items-center justify-content-center flex-shrink-0 rounded"
-                                              style={{
-                                                width: '28px',
-                                                height: '28px',
-                                                fontSize: '1.25rem',
-                                                lineHeight: 1,
-                                                backgroundColor: isActive ? 'rgba(255,255,255,0.25)' : 'rgba(0,0,0,0.06)',
-                                              }}
-                                              title={gw.country || country || ''}
-                                            >
-                                              {countryToFlag(gw.country || country || '') || '🌐'}
-                                            </span>
-                                            <div className="flex-grow-1 min-w-0">
-                                              <div
-                                                className={`fw-bold ${isActive ? 'text-white' : ''}`}
-                                                style={{ fontSize: '0.85rem', lineHeight: '1.2', wordBreak: 'break-word' }}
-                                              >
-                                                {gw.comment || gw.name}
-                                              </div>
-                                            </div>
-                                          </div>
-                                          {/* IP шлюза ниже */}
-                                          {gw.ip && (
-                                            <div
-                                              className={`small text-truncate mb-1 ${isActive ? 'text-white-75' : 'text-muted'}`}
-                                              style={{ fontSize: '0.75rem' }}
-                                            >
-                                              {gw.ip}
-                                            </div>
-                                          )}
-                                          
-                                          {/* Метрика (пинг) */}
-                                          <div className={`fw-bold mt-1 ${isActive ? 'text-white' : 'text-success'}`} style={{ fontSize: '1.1rem' }}>
-                                            {ping != null ? ping : '—'}
-                                          </div>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  );
-                                })}
-                              </div>
-                            </div>
-                          </div>
-                        );
-                      })}
-                    </div>
-                  )}
-                  </div>
-                )}
               </div>
-            );
-          })}
+
+              {/* Список серверов */}
+              {filteredServers.length === 0 ? (
+                <div className="card">
+                  <div className="card-body text-center py-5">
+                    <IconFilter size={48} className="text-muted mb-3" />
+                    <h3 className="card-title text-muted">Ничего не найдено</h3>
+                    <p className="text-secondary mb-0">
+                      {searchQuery ? 'Измените критерии поиска' : 'Нет доступных серверов с шлюзами'}
+                    </p>
+                  </div>
+                </div>
+              ) : (
+                <div className="row row-cards g-3">
+                  {filteredServers.map((server) => {
+                    const serverMeta = getServerMetadata(server.name);
+                    const country = serverMeta?.country || '';
+                    const flag = countryToFlag(country);
+                    const filteredCommunitiesForServer = communitiesDirectory.filter((comm) => {
+                      if (showOnlyConfigured) return server.filtersMap.has(comm.value);
+                      return true;
+                    });
+                    if (filteredCommunitiesForServer.length === 0) return null;
+                    const isExpanded = expandedServers.has(server.id);
+
+                    return (
+                      <div key={server.id} className="col-12">
+                        <div className="card card-status-start bg-blue">
+                          <div
+                            className="card-header cursor-pointer user-select-none py-2"
+                            onClick={() => toggleServerExpanded(server.id)}
+                            onKeyDown={(e) => e.key === 'Enter' && toggleServerExpanded(server.id)}
+                            role="button"
+                            tabIndex={0}
+                            aria-expanded={isExpanded}
+                          >
+                            <div className="d-flex align-items-center">
+                              {isExpanded ? (
+                                <IconChevronUp size={20} className="me-2 text-muted" />
+                              ) : (
+                                <IconChevronDown size={20} className="me-2 text-muted" />
+                              )}
+                              {flag && <span className="me-2" style={{ fontSize: '1.5rem' }}>{flag}</span>}
+                              <span className="avatar avatar-sm me-2 bg-blue-lt text-blue">
+                                <IconServer size={18} />
+                              </span>
+                              <h3 className="card-title mb-0 me-2">{server.name}</h3>
+                              {server.description && (
+                                <span className="text-muted small d-none d-md-inline">— {server.description}</span>
+                              )}
+                              <span className="badge bg-blue-lt text-blue ms-auto">
+                                {filteredCommunitiesForServer.length} communities · {server.gateways.length} gateways
+                              </span>
+                            </div>
+                          </div>
+                          {isExpanded && (
+                            <div className="card-body pt-0">
+                              {groupByTags ? (
+                                <EasySwitchServerContentGrouped
+                                  server={server}
+                                  filteredCommunitiesForServer={filteredCommunitiesForServer}
+                                  activeGateways={activeGateways}
+                                  handleGatewaySelect={handleGatewaySelect}
+                                  getServerMetadata={getServerMetadata}
+                                  pingMap={pingMap}
+                                  countryToFlag={countryToFlag}
+                                />
+                              ) : (
+                                <EasySwitchServerContentFlat
+                                  server={server}
+                                  filteredCommunitiesForServer={filteredCommunitiesForServer}
+                                  activeGateways={activeGateways}
+                                  handleGatewaySelect={handleGatewaySelect}
+                                  getServerMetadata={getServerMetadata}
+                                  pingMap={pingMap}
+                                  countryToFlag={countryToFlag}
+                                />
+                              )}
+                            </div>
+                          )}
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              )}
+            </>
+          )}
+
+          {activeTab === 'providers' && (
+            <div className="card">
+              <div className="card-body text-center py-5">
+                <IconWorld size={48} className="text-muted mb-3" />
+                <h3 className="card-title text-muted">Провайдер прокси</h3>
+                <p className="text-secondary mb-0">Раздел в разработке</p>
+              </div>
+            </div>
+          )}
         </div>
-      )}
+      </div>
     </div>
   );
 }