diff --git a/feature-libs/product/image-zoom/components/product-image-zoom/product-image-zoom-view/product-image-zoom-view.component.html b/feature-libs/product/image-zoom/components/product-image-zoom/product-image-zoom-view/product-image-zoom-view.component.html
index 0a3d48193f8..119acab5676 100644
--- a/feature-libs/product/image-zoom/components/product-image-zoom/product-image-zoom-view/product-image-zoom-view.component.html
+++ b/feature-libs/product/image-zoom/components/product-image-zoom/product-image-zoom-view/product-image-zoom-view.component.html
@@ -33,33 +33,6 @@
         >
         </cx-media>
       </div>
-      <button
-        #zoomButton
-        *ngIf="imageLoaded | async"
-        [attr.aria-label]="
-          isZoomed
-            ? ('common.zoomOut' | cxTranslate)
-            : ('common.zoomIn' | cxTranslate)
-        "
-        title="{{
-          isZoomed
-            ? ('common.zoomOut' | cxTranslate)
-            : ('common.zoomIn' | cxTranslate)
-        }}"
-        class="btn btn-link cx-zoom-btn"
-        (click)="zoom()"
-      >
-        <cx-icon
-          [type]="iconType.SEARCH_PLUS"
-          *ngIf="!isZoomed"
-          class="cx-zoom-indicator"
-        ></cx-icon>
-        <cx-icon
-          [type]="iconType.SEARCH_MINUS"
-          *ngIf="isZoomed"
-          class="cx-zoom-indicator"
-        ></cx-icon>
-      </button>
     </div>
     <ng-container *cxFeature="'!a11yKeyboardAccessibleZoom'">
       <cx-media
@@ -92,6 +65,35 @@
       </button>
     </div>
   </div>
+  <div class="cx-zoom-btn-container" *cxFeature="'a11yKeyboardAccessibleZoom'">
+    <button
+      #zoomButton
+      *ngIf="imageLoaded | async"
+      [attr.aria-label]="
+        isZoomed
+          ? ('common.zoomOut' | cxTranslate)
+          : ('common.zoomIn' | cxTranslate)
+      "
+      title="{{
+        isZoomed
+          ? ('common.zoomOut' | cxTranslate)
+          : ('common.zoomIn' | cxTranslate)
+      }}"
+      class="btn btn-link cx-zoom-btn"
+      (click)="zoom()"
+    >
+      <cx-icon
+        [type]="iconType.SEARCH_PLUS"
+        *ngIf="!isZoomed"
+        class="cx-zoom-indicator"
+      ></cx-icon>
+      <cx-icon
+        [type]="iconType.SEARCH_MINUS"
+        *ngIf="isZoomed"
+        class="cx-zoom-indicator"
+      ></cx-icon>
+    </button>
+  </div>
 </ng-container>
 
 <cx-product-image-zoom-thumbnails
diff --git a/feature-libs/product/image-zoom/styles/_product-image-zoom-view.scss b/feature-libs/product/image-zoom/styles/_product-image-zoom-view.scss
index 88d69d042c8..49da07bdb89 100644
--- a/feature-libs/product/image-zoom/styles/_product-image-zoom-view.scss
+++ b/feature-libs/product/image-zoom/styles/_product-image-zoom-view.scss
@@ -119,41 +119,39 @@ cx-product-image-zoom-view {
       @include media-breakpoint-up(lg) {
         height: fit-content;
       }
+    }
 
-      .cx-zoom-btn {
-        margin: 0.5rem;
-        border-radius: 100%;
-        background-color: var(--cx-color-medium);
-        position: absolute;
-        padding: 0;
-        right: 0;
-        bottom: 0;
-
-        @include media-breakpoint-down(sm) {
-          display: none;
-        }
+    .cx-zoom-btn-container {
+      text-align: center;
+    }
 
-        &:focus {
-          box-shadow: none;
-        }
+    .cx-zoom-btn {
+      margin: 0.5rem;
+      border-radius: 100%;
+      padding: 0;
 
-        .cx-zoom-indicator {
-          color: var(--cx-color-background-dark);
-          font-size: 2rem;
-        }
+      @include media-breakpoint-down(sm) {
+        display: none;
+      }
+
+      &:focus {
+        box-shadow: none;
+      }
+
+      .cx-zoom-indicator {
+        font-size: 2rem;
       }
     }
   }
 
   @include cx-highContrastTheme-light {
-    .cx-image-container .cx-zoom-btn .cx-zoom-indicator {
+    .cx-image-container .cx-zoom-btn-container .cx-zoom-btn .cx-zoom-indicator {
       color: var(--cx-color-dark);
     }
   }
 
   @include cx-highContrastTheme-dark {
-    .cx-image-container .cx-zoom-btn {
-      background-color: var(--cx-color-dark);
+    .cx-image-container .cx-zoom-btn-container .cx-zoom-btn .cx-zoom-indicator {
       color: var(--cx-color-light);
       --cx-color-visual-focus: #1f3a93;
     }