diff --git a/src/web/components/ClientOverviewPage.jsx b/src/web/components/ClientOverviewPage.jsx
index 8d71c11..e79bae0 100644
--- a/src/web/components/ClientOverviewPage.jsx
+++ b/src/web/components/ClientOverviewPage.jsx
@@ -95,8 +95,8 @@ function HarborBrand({ isGateway, gatewayAvailable, gatewayDirect, busy, onSetGa
           <em className="harbor-mode-gateway">Gateway</em>
         </span>
         <svg className="harbor-mode-swap" viewBox="0 0 18 18" aria-hidden="true">
-          <path className="is-connect" d="M3 6h10m-3-3 3 3-3 3" />
-          <path className="is-gateway" d="M15 12H5m3 3-3-3 3-3" />
+          <g className="is-connect"><path d="M3 6h10m-3-3 3 3-3 3" /></g>
+          <g className="is-gateway"><path d="M15 12H5m3 3-3-3 3-3" /></g>
         </svg>
         <span id="harbor-mode-tooltip" className="harbor-mode-tooltip" role="tooltip">
           <strong>{gatewayDirect ? 'Harbor Gateway активен' : 'Harbor Gateway доступен'}</strong>
diff --git a/src/web/styles.css b/src/web/styles.css
index 5af9ccf..51d4851 100644
--- a/src/web/styles.css
+++ b/src/web/styles.css
@@ -288,6 +288,7 @@ p {
   transition: color 320ms ease, opacity 320ms ease, transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
+.harbor-mode-swap g,
 .harbor-mode-swap path {
   transform-box: fill-box;
   transform-origin: center;
@@ -295,10 +296,20 @@ p {
 
 .harbor-mode-swap .is-connect {
   stroke: var(--harbor-connect);
+  transition: transform 560ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .harbor-mode-swap .is-gateway {
   stroke: var(--harbor-gateway);
+  transition: transform 560ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.harbor-brand.is-gateway-active .harbor-mode-swap .is-connect {
+  transform: translateY(6px);
+}
+
+.harbor-brand.is-gateway-active .harbor-mode-swap .is-gateway {
+  transform: translateY(-6px);
 }
 
 .harbor-mode-tooltip {
@@ -345,24 +356,24 @@ p {
   opacity: 1;
 }
 
-.harbor-brand-control:hover .harbor-mode-swap .is-connect,
-.harbor-brand-control:focus-visible .harbor-mode-swap .is-connect {
-  animation: harbor-arrow-float-up 1500ms ease-in-out infinite;
+.harbor-brand-control:hover .harbor-mode-swap .is-connect path,
+.harbor-brand-control:focus-visible .harbor-mode-swap .is-connect path {
+  animation: harbor-arrow-float-right 1500ms ease-in-out infinite;
 }
 
-.harbor-brand-control:hover .harbor-mode-swap .is-gateway,
-.harbor-brand-control:focus-visible .harbor-mode-swap .is-gateway {
-  animation: harbor-arrow-float-down 1500ms ease-in-out infinite;
+.harbor-brand-control:hover .harbor-mode-swap .is-gateway path,
+.harbor-brand-control:focus-visible .harbor-mode-swap .is-gateway path {
+  animation: harbor-arrow-float-left 1500ms ease-in-out infinite;
 }
 
-@keyframes harbor-arrow-float-up {
-  0%, 100% { transform: translateY(0); }
-  50% { transform: translateY(-1.5px); }
+@keyframes harbor-arrow-float-right {
+  0%, 100% { transform: translateX(0); }
+  50% { transform: translateX(1.5px); }
 }
 
-@keyframes harbor-arrow-float-down {
-  0%, 100% { transform: translateY(0); }
-  50% { transform: translateY(1.5px); }
+@keyframes harbor-arrow-float-left {
+  0%, 100% { transform: translateX(0); }
+  50% { transform: translateX(-1.5px); }
 }
 
 .client-instructions-toggle {
@@ -1839,6 +1850,7 @@ p {
   }
 
   .harbor-mode-stack em,
+  .harbor-mode-swap g,
   .harbor-mode-swap path,
   .harbor-brand .harbor-mode-swap,
   .harbor-mode-tooltip {