diff --git a/src/app/core-ui/main-header/main-header.component.scss b/src/app/core-ui/main-header/main-header.component.scss
index c7d877b5c..7d7982001 100644
--- a/src/app/core-ui/main-header/main-header.component.scss
+++ b/src/app/core-ui/main-header/main-header.component.scss
@@ -322,12 +322,47 @@ page-title {
   border-radius: 12px;
 }
 
+.sync-btn {
+  position: relative;
+
+  .mat-icon:not(.sync-state-ico) {
+    font-size: 28px;
+    width: 28px;
+    height: 28px;
+    line-height: 28px;
+  }
+}
+
 .sync-state-ico {
-  // important because it might be overwritten by material styles sometimes
+  // Positioning - center within sync button
   position: absolute !important;
-  font-size: 10px;
-  height: 10px;
-  line-height: 10px;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  // Icon sizing (increased from 10px to 18px)
+  font-size: 15px;
+  width: 15px;
+  height: 15px;
+  line-height: 15px;
+
+  // Colored outline using multiple text-shadows for better visibility
+  text-shadow:
+    -1px -1px 0 var(--c-bg),
+    1px -1px 0 var(--c-bg),
+    -1px 1px 0 var(--c-bg),
+    1px 1px 0 var(--c-bg),
+    -2px -2px 0 var(--c-bg),
+    2px -2px 0 var(--c-bg),
+    -2px 2px 0 var(--c-bg),
+    2px 2px 0 var(--c-bg),
+    0 -2px 0 var(--c-bg),
+    0 2px 0 var(--c-bg),
+    -2px 0 0 var(--c-bg),
+    2px 0 0 var(--c-bg);
+
+  // Ensure it sits above sync icon
+  z-index: 1;
 }
 
 .focus-btn-wrapper {