diff --git a/frontend/src/NetworkConfigManager.jsx b/frontend/src/NetworkConfigManager.jsx
index 814668e..27e7e27 100644
--- a/frontend/src/NetworkConfigManager.jsx
+++ b/frontend/src/NetworkConfigManager.jsx
@@ -2242,92 +2242,122 @@ function NetworkConfigManager() {
     const isUnassigned = serverId === '__unassigned__';
     
     return (
-      <div key={serverId} className="card mb-3">
-        {/* Server header - более заметный и читаемый */}
+      <div key={serverId} className="mb-4">
+        {/* Server header - улучшенная структура с четкой иерархией */}
         <div 
-          className="card-header py-3" 
-          style={{ 
-            backgroundColor: 'rgba(32, 107, 196, 0.08)',
-            borderBottom: '2px solid rgba(32, 107, 196, 0.2)'
+          className="card mb-3"
+          style={{
+            borderLeft: '4px solid rgba(32, 107, 196, 0.3)',
+            boxShadow: '0 1px 3px rgba(0, 0, 0, 0.08)'
           }}
         >
-          <div className="d-flex align-items-center justify-content-between">
-            <div className="d-flex align-items-center flex-grow-1">
-              {isUnassigned ? (
-                <>
-                  <span className="avatar avatar-md bg-secondary-lt me-3">
-                    <IconServer size={20} className="text-muted" />
-                  </span>
-                  <div>
-                    <h4 className="mb-0 fw-semibold text-muted">Без привязки к серверу</h4>
-                  </div>
-                </>
-              ) : (
-                <>
-                  <span className="avatar avatar-md bg-primary-lt me-3">
-                    <IconServer size={20} className="text-primary" />
-                  </span>
-                  <div className="flex-grow-1">
-                    <div className="d-flex align-items-center flex-wrap gap-2">
-                      <h4 className="mb-0 fw-semibold">
-                        {server?.dns ? server.dns.split('.')[0] : (server?.name || serverId)}
-                      </h4>
-                      {server?.dns && (
-                        <code className="text-muted small" style={{ fontSize: '0.875rem' }}>
-                          {server.dns}
-                        </code>
-                      )}
-                      {server?.ip && (
-                        <code className="text-muted small" style={{ fontSize: '0.875rem' }}>
-                          {server.ip}
-                        </code>
-                      )}
-                      {server?.country && (
-                        <span className="badge bg-blue-lt text-blue" style={{ fontSize: '1rem' }}>
-                          {countryToFlag(server.country)} {server.country}
-                        </span>
-                      )}
-                      {server?.provider && (
-                        <span className={`badge bg-${getProviderColor(server.provider)}-lt text-${getProviderColor(server.provider)}`}>
-                          {server.provider}
-                        </span>
-                      )}
+          <div 
+            className="card-header py-3 px-4" 
+            style={{ 
+              backgroundColor: 'rgba(32, 107, 196, 0.06)',
+              borderBottom: '1px solid rgba(32, 107, 196, 0.15)'
+            }}
+          >
+            <div className="d-flex align-items-start justify-content-between">
+              {/* Левая часть: основная информация */}
+              <div className="d-flex align-items-start flex-grow-1" style={{ minWidth: 0 }}>
+                {isUnassigned ? (
+                  <>
+                    <span className="avatar avatar-lg bg-secondary-lt me-3 flex-shrink-0">
+                      <IconServer size={24} className="text-muted" />
+                    </span>
+                    <div className="flex-grow-1">
+                      <h3 className="mb-1 fw-bold text-muted">Без привязки к серверу</h3>
                     </div>
-                  </div>
-                </>
-              )}
-            </div>
-            <div className="d-flex align-items-center gap-2">
-              <span className="badge bg-primary-lt text-primary" style={{ fontSize: '0.875rem', padding: '6px 12px' }}>
-                {items.length} {type === 'gateway' ? (items.length === 1 ? 'gateway' : 'gateways') : (items.length === 1 ? 'интерфейс' : 'интерфейсов')}
-              </span>
-              {type === 'interface' && !isUnassigned && items.length > 0 && (
-                <button
-                  className="btn btn-outline-primary btn-sm"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    handleGenerateMikrotikCodeForServer(serverId, type);
-                  }}
-                  title="Получить код MikroTik для всех интерфейсов этого сервера"
-                >
-                  <IconCode size={16} className="me-1" />
-                  Код для MikroTik
-                </button>
-              )}
+                  </>
+                ) : (
+                  <>
+                    <span className="avatar avatar-lg bg-primary-lt me-3 flex-shrink-0">
+                      <IconServer size={24} className="text-primary" />
+                    </span>
+                    <div className="flex-grow-1" style={{ minWidth: 0 }}>
+                      {/* Основная строка: название сервера */}
+                      <div className="d-flex align-items-center mb-2 flex-wrap gap-2">
+                        <h3 className="mb-0 fw-bold" style={{ fontSize: '1.25rem' }}>
+                          {server?.dns ? server.dns.split('.')[0] : (server?.name || serverId)}
+                        </h3>
+                        {server?.country && (
+                          <span className="badge bg-blue-lt text-blue d-flex align-items-center" style={{ fontSize: '0.875rem', padding: '4px 10px' }}>
+                            <span className="me-1" style={{ fontSize: '1rem' }}>{countryToFlag(server.country)}</span>
+                            {server.country}
+                          </span>
+                        )}
+                        {server?.provider && (
+                          <span className={`badge bg-${getProviderColor(server.provider)}-lt text-${getProviderColor(server.provider)}`} style={{ fontSize: '0.875rem', padding: '4px 10px' }}>
+                            {server.provider}
+                          </span>
+                        )}
+                      </div>
+                      
+                      {/* Дополнительная информация: DNS и IP */}
+                      <div className="d-flex align-items-center flex-wrap gap-3" style={{ fontSize: '0.875rem' }}>
+                        {server?.dns && (
+                          <div className="d-flex align-items-center">
+                            <span className="text-muted me-1">DNS:</span>
+                            <code className="text-dark" style={{ fontSize: '0.875rem', backgroundColor: 'rgba(0, 0, 0, 0.04)', padding: '2px 6px', borderRadius: '4px' }}>
+                              {server.dns}
+                            </code>
+                          </div>
+                        )}
+                        {server?.ip && (
+                          <div className="d-flex align-items-center">
+                            <span className="text-muted me-1">IP:</span>
+                            <code className="text-dark" style={{ fontSize: '0.875rem', backgroundColor: 'rgba(0, 0, 0, 0.04)', padding: '2px 6px', borderRadius: '4px' }}>
+                              {server.ip}
+                            </code>
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  </>
+                )}
+              </div>
+              
+              {/* Правая часть: счетчик и действия */}
+              <div className="d-flex align-items-center gap-2 flex-shrink-0 ms-3">
+                <span className="badge bg-primary text-white" style={{ fontSize: '0.875rem', padding: '6px 12px', fontWeight: '600' }}>
+                  {items.length} {type === 'gateway' ? (items.length === 1 ? 'gateway' : 'gateways') : (items.length === 1 ? 'интерфейс' : 'интерфейсов')}
+                </span>
+                {type === 'interface' && !isUnassigned && items.length > 0 && (
+                  <button
+                    className="btn btn-primary btn-sm"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleGenerateMikrotikCodeForServer(serverId, type);
+                    }}
+                    title="Получить код MikroTik для всех интерфейсов этого сервера"
+                    style={{ whiteSpace: 'nowrap' }}
+                  >
+                    <IconCode size={16} className="me-1" />
+                    Код для MikroTik
+                  </button>
+                )}
+              </div>
             </div>
           </div>
-        </div>
-        
-        {/* Items */}
-        <div className="card-body p-3">
-          <div className="row row-cards">
-            {items.map(item => (
-              <div key={item.id} className="col-12 col-md-6 col-lg-6">
-                {type === 'gateway' ? renderGatewayCard(item) : 
-                 type === 'interface' ? renderInterfaceCard(item, serverId) :
-                 type === 'pool' ? renderPoolCard(item) : null}
+          
+          {/* Items - улучшенное расположение */}
+          <div className="card-body p-4">
+            {items.length === 0 ? (
+              <div className="text-center text-muted py-3">
+                <small>Нет элементов для отображения</small>
               </div>
-            ))}
+            ) : (
+              <div className="row g-3">
+                {items.map(item => (
+                  <div key={item.id} className="col-12 col-lg-6">
+                    {type === 'gateway' ? renderGatewayCard(item) : 
+                     type === 'interface' ? renderInterfaceCard(item, serverId) :
+                     type === 'pool' ? renderPoolCard(item) : null}
+                  </div>
+                ))}
+              </div>
+            )}
           </div>
         </div>
       </div>