diff --git a/src/client/lazy-app/Compress/Output/custom-els/TwoUp/index.ts b/src/client/lazy-app/Compress/Output/custom-els/TwoUp/index.ts
index 35b51831..c2cb7b95 100644
--- a/src/client/lazy-app/Compress/Output/custom-els/TwoUp/index.ts
+++ b/src/client/lazy-app/Compress/Output/custom-els/TwoUp/index.ts
@@ -68,6 +68,8 @@ export default class TwoUp extends HTMLElement {
         );
       },
     });
+
+    window.addEventListener('keydown', event => this._onKeyDown(event));
   }
 
   connectedCallback() {
@@ -94,6 +96,29 @@ export default class TwoUp extends HTMLElement {
     }
   }
 
+  // KeyDown event handler
+  private _onKeyDown(event: KeyboardEvent) {
+    if (event.code === 'Digit1' || event.code === 'Numpad1') {
+      this._position = 0;
+      this._relativePosition = 0;
+      this._setPosition();
+    } else if (event.code === 'Digit2' || event.code === 'Numpad2') {
+      const dimensionAxis = this.orientation === 'vertical' ? 'height' : 'width';
+      const bounds = this.getBoundingClientRect();
+
+      this._position = bounds[dimensionAxis] / 2;
+      this._relativePosition = (this._position / bounds[dimensionAxis]) / 2;
+      this._setPosition();
+    } else if (event.code === 'Digit3' || event.code === 'Numpad3') {
+      const dimensionAxis = this.orientation === 'vertical' ? 'height' : 'width';
+      const bounds = this.getBoundingClientRect();
+
+      this._position = bounds[dimensionAxis];
+      this._relativePosition = this._position / bounds[dimensionAxis];
+      this._setPosition();
+    }
+  }
+
   private _resetPosition() {
     // Set the initial position of the handle.
     requestAnimationFrame(() => {