diff --git a/src/components/viewport-demo/viewport-demo.styles.ts b/src/components/viewport-demo/viewport-demo.styles.ts
index 696bd4066..b983cdae0 100644
--- a/src/components/viewport-demo/viewport-demo.styles.ts
+++ b/src/components/viewport-demo/viewport-demo.styles.ts
@@ -109,4 +109,14 @@ export default css`
       opacity: 80%;
     }
   }
+
+  [part~='zoom-in'],
+  [part~='zoom-in']::part(base) {
+    cursor: zoom-in;
+  }
+
+  [part~='zoom-out'],
+  [part~='zoom-out']::part(base) {
+    cursor: zoom-out;
+  }
 `;
diff --git a/src/components/viewport-demo/viewport-demo.ts b/src/components/viewport-demo/viewport-demo.ts
index fccbc2317..984f40e7b 100644
--- a/src/components/viewport-demo/viewport-demo.ts
+++ b/src/components/viewport-demo/viewport-demo.ts
@@ -291,9 +291,13 @@ export default class WaViewportDemo extends WebAwesomeElement {
         <span part="controls">
           ${dimensions}
           <span class="zoom">
-            <wa-icon-button name="square-minus" variant="regular" @click=${() => this.zoomOut()}>-</wa-icon-button>
+            <wa-icon-button name="square-minus" variant="regular" @click=${() => this.zoomOut()} part="zoom-out button"
+              >-</wa-icon-button
+            >
             <span class="zoom-level"> ${Math.round(this.computedZoom * 100)}%</span>
-            <wa-icon-button name="square-plus" variant="regular" @click=${() => this.zoomIn()}>+</wa-icon-button>
+            <wa-icon-button name="square-plus" variant="regular" @click=${() => this.zoomIn()} part="zoom-in button"
+              >+</wa-icon-button
+            >
           </span>
         </span>
         <slot @slotchange=${this.handleSlotChange}></slot>