diff --git a/frontend/src/components/server/ServerCard.jsx b/frontend/src/components/server/ServerCard.jsx
index 09b32f0..c7f2e83 100644
--- a/frontend/src/components/server/ServerCard.jsx
+++ b/frontend/src/components/server/ServerCard.jsx
@@ -169,55 +169,46 @@ export default function ServerCard({
           </div>
         </div>
 
-        {/* Расширенная информация */}
+        {/* Расширенная информация в стиле Tabler datagrid */}
         {expanded && (
-          <div className="border-top bg-light" style={{ borderBottomLeftRadius: '7px', borderBottomRightRadius: '7px' }}>
-            <div className="row g-0">
-              {/* IP адреса */}
-              <div className="col-md-6 p-3 border-end">
-                <div className="text-muted small mb-2 fw-medium">
-                  <IconWorld size={14} className="me-1" />
-                  Сетевые адреса
-                </div>
-                <div className="row g-2">
-                  <div className="col-4">
-                    <div className="text-muted" style={{ fontSize: '0.65rem', textTransform: 'uppercase' }}>IP</div>
-                    <code className="small">{server.ip}</code>
-                  </div>
-                  <div className="col-4">
-                    <div className="text-muted" style={{ fontSize: '0.65rem', textTransform: 'uppercase' }}>Внешний</div>
-                    <code className="small">{server.extIp || '—'}</code>
-                  </div>
-                  <div className="col-4">
-                    <div className="text-muted" style={{ fontSize: '0.65rem', textTransform: 'uppercase' }}>Внутренний</div>
-                    <code className="small">{server.internalIp || '—'}</code>
-                  </div>
-                </div>
+          <div className="border-top bg-light p-3" style={{ borderBottomLeftRadius: '7px', borderBottomRightRadius: '7px' }}>
+            <div className="datagrid">
+              <div className="datagrid-item">
+                <div className="datagrid-title">IP</div>
+                <div className="datagrid-content"><code className="small">{server.ip}</code></div>
               </div>
-
-              {/* Шлюзы */}
-              <div className="col-md-6 p-3">
-                <div className="text-muted small mb-2 fw-medium">
+              <div className="datagrid-item">
+                <div className="datagrid-title">Внешний</div>
+                <div className="datagrid-content"><code className="small">{server.extIp || '—'}</code></div>
+              </div>
+              <div className="datagrid-item">
+                <div className="datagrid-title">Внутренний</div>
+                <div className="datagrid-content"><code className="small">{server.internalIp || '—'}</code></div>
+              </div>
+              <div className="datagrid-item">
+                <div className="datagrid-title">
                   <IconServer size={14} className="me-1" />
                   Шлюзы ({server.gateways?.length || 0})
                 </div>
-                {server.gateways?.length > 0 ? (
-                  <div className="d-flex flex-wrap gap-2">
-                    {server.gateways.map((gw, idx) => (
-                      <span
-                        key={gw.id || idx}
-                        className={`badge ${gw.primary ? 'bg-blue-lt text-blue' : 'bg-secondary-lt text-secondary'}`}
-                        title={gw.comment || (gw.primary ? 'Основной' : 'Резервный')}
-                      >
-                        {gw.primary && <IconCheck size={10} className="me-1" />}
-                        {gw.name}
-                        {gw.ip && <span className="ms-1 opacity-75">({gw.ip})</span>}
-                      </span>
-                    ))}
-                  </div>
-                ) : (
-                  <span className="text-muted small">Нет шлюзов</span>
-                )}
+                <div className="datagrid-content">
+                  {server.gateways?.length > 0 ? (
+                    <div className="d-flex flex-wrap gap-2">
+                      {server.gateways.map((gw, idx) => (
+                        <span
+                          key={gw.id || idx}
+                          className={`badge ${gw.primary ? 'bg-blue-lt text-blue' : 'bg-secondary-lt text-secondary'}`}
+                          title={gw.comment || (gw.primary ? 'Основной' : 'Резервный')}
+                        >
+                          {gw.primary && <IconCheck size={10} className="me-1" />}
+                          {gw.name}
+                          {gw.ip && <span className="ms-1 opacity-75">({gw.ip})</span>}
+                        </span>
+                      ))}
+                    </div>
+                  ) : (
+                    <span className="text-muted small">Нет шлюзов</span>
+                  )}
+                </div>
               </div>
             </div>
           </div>