diff --git a/src/app/clients/client-stepper/client-kyc-step/client-kyc-step.component.scss b/src/app/clients/client-stepper/client-kyc-step/client-kyc-step.component.scss
index d054a444c..2b9231705 100644
--- a/src/app/clients/client-stepper/client-kyc-step/client-kyc-step.component.scss
+++ b/src/app/clients/client-stepper/client-kyc-step/client-kyc-step.component.scss
@@ -314,8 +314,24 @@
 .toggle-vis-btn {
   width: 28px !important;
   height: 28px !important;
+  padding: 0 !important;
   font-size: 13px !important;
   color: #64748b;
+
+  /* Material reserves a 48x48 invisible touch-target + ripple around every
+     mat-icon-button by default. Shrinking the button to 28px above doesn't
+     shrink that touch-target/ripple with it, so — since the suffix
+     container doesn't clip overflow — it visually spills out past the
+     field's own border, making the icon look misplaced/half-outside the box. */
+  ::ng-deep .mat-mdc-button-touch-target {
+    width: 28px !important;
+    height: 28px !important;
+  }
+
+  ::ng-deep .mat-mdc-button-persistent-ripple,
+  ::ng-deep .mat-ripple {
+    border-radius: 50%;
+  }
 }
 
 /* Verification Info Banner */