diff --git a/frontend/src/OspfToolsPage.jsx b/frontend/src/OspfToolsPage.jsx
index b6948ae..458dc3c 100644
--- a/frontend/src/OspfToolsPage.jsx
+++ b/frontend/src/OspfToolsPage.jsx
@@ -171,6 +171,7 @@ export default function OspfToolsPage() {
         .sort((a, b) => a.area.localeCompare(b.area)),
     }));
   }, [templates, servers]);
+  const routerColumnClass = groupedByRouter.length > 1 ? 'col-12 col-xxl-6' : 'col-12';
 
   const loadServers = async () => {
     try {
@@ -333,7 +334,7 @@ export default function OspfToolsPage() {
           ) : (
             <div className="row g-3">
               {groupedByRouter.map((routerGroup) => (
-                <div key={routerGroup.routerKey} className="col-12 col-xl-6">
+                <div key={routerGroup.routerKey} className={routerColumnClass}>
                   <div className="card card-sm border">
                     <div className="card-header fw-semibold">{routerGroup.routerLabel}</div>
                     <div className="card-body p-0">
@@ -350,7 +351,7 @@ export default function OspfToolsPage() {
                                 return (
                               <div
                                 key={item.key}
-                                className="list-group-item d-flex align-items-center justify-content-between"
+                                className="list-group-item"
                                 draggable
                                 onDragStart={() => setDragging({
                                   routerKey: routerGroup.routerKey,
@@ -362,22 +363,26 @@ export default function OspfToolsPage() {
                                 onDragEnd={() => setDragging(null)}
                                 style={{ cursor: 'grab' }}
                               >
-                                <div className="d-flex align-items-center gap-2">
-                                  <span className="text-muted small">::</span>
-                                  <code>{item.interfaceName}</code>
-                                  <span className={`badge ${item.active ? 'bg-green-lt text-green' : 'bg-secondary-lt text-secondary'}`}>
-                                    {item.active ? 'Активен' : 'Неактивен'}
-                                  </span>
-                                  {hint && (
-                                    <span
-                                      className={`badge ${hintMatches ? 'bg-green-lt text-green' : 'bg-yellow-lt text-yellow'}`}
-                                      title={`Вероятность оптимальности: ${hint.probabilityOptimal}%`}
-                                    >
-                                      opt cost {hint.optimalCost}
+                                <div className="d-flex align-items-center justify-content-between gap-2 flex-wrap">
+                                  <div className="d-flex align-items-center gap-2 flex-wrap">
+                                    <span className="text-muted small">::</span>
+                                    <code>{item.interfaceName}</code>
+                                    <span className={`badge ${item.active ? 'bg-green-lt text-green' : 'bg-secondary-lt text-secondary'}`}>
+                                      {item.active ? 'Активен' : 'Неактивен'}
                                     </span>
-                                  )}
+                                  </div>
+                                  <div className="d-flex align-items-center gap-2 ms-auto">
+                                    {hint && (
+                                      <span
+                                        className={`badge ${hintMatches ? 'bg-green-lt text-green' : 'bg-yellow-lt text-yellow'}`}
+                                        title={`Вероятность оптимальности: ${hint.probabilityOptimal}%`}
+                                      >
+                                        opt cost {hint.optimalCost}
+                                      </span>
+                                    )}
+                                    <span className="badge bg-primary-lt text-primary">cost {item.cost}</span>
+                                  </div>
                                 </div>
-                                <span className="badge bg-primary-lt text-primary">cost {item.cost}</span>
                               </div>
                                 );
                               })()