diff --git a/src/shared/versions.js b/src/shared/versions.js
index 0d0be6f..e82942c 100644
--- a/src/shared/versions.js
+++ b/src/shared/versions.js
@@ -1,6 +1,6 @@
 export const HARBOR_VERSIONS = Object.freeze({
-  macClient: '0.7.6',
-  gatewayClient: '0.7.6',
+  macClient: '0.7.7',
+  gatewayClient: '0.7.7',
   gatewayBackend: '0.7.0',
 });
 
diff --git a/src/web/styles.css b/src/web/styles.css
index 6e70d90..d11aa3d 100644
--- a/src/web/styles.css
+++ b/src/web/styles.css
@@ -555,7 +555,12 @@ p {
   }
 }
 
-.harbor-mode-swap g,
+.harbor-mode-swap g {
+  transform-box: view-box;
+  transform-origin: 9px 9px;
+  transition: opacity 420ms ease, filter 420ms ease, transform 560ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
 .harbor-mode-swap path {
   transform-box: fill-box;
   transform-origin: center;
@@ -586,13 +591,13 @@ p {
 .harbor-brand.is-gateway-active .harbor-mode-swap .is-connect {
   opacity: 0.28;
   filter: blur(0.45px);
-  transform: translateY(6px) rotate(180deg);
+  transform: rotate(180deg);
 }
 
 .harbor-brand.is-gateway-active .harbor-mode-swap .is-gateway {
   opacity: 1;
   filter: none;
-  transform: translateY(-6px) rotate(180deg);
+  transform: rotate(180deg);
 }
 
 .harbor-mode-tooltip {