diff --git a/packages/webamp/js/components/Balance.tsx b/packages/webamp/js/components/Balance.tsx
index 3b8a4f9b8a..07c9d17670 100644
--- a/packages/webamp/js/components/Balance.tsx
+++ b/packages/webamp/js/components/Balance.tsx
@@ -26,8 +26,8 @@ export default function Balance({ style, className, id }: Props) {
       value={balance}
       style={{ ...style, touchAction: "none" }}
       onChange={(e) => setBalance(Number(e.target.value))}
-      onMouseDown={() => setFocus("balance")}
-      onMouseUp={unsetFocus}
+      onPointerDown={() => setFocus("balance")}
+      onPointerUp={unsetFocus}
       title="Balance"
     />
   );
diff --git a/packages/webamp/js/components/FocusTarget.tsx b/packages/webamp/js/components/FocusTarget.tsx
index a73e168f58..bdb4df95ec 100644
--- a/packages/webamp/js/components/FocusTarget.tsx
+++ b/packages/webamp/js/components/FocusTarget.tsx
@@ -68,8 +68,7 @@ function FocusTarget({ onKeyDown, windowId, children }: Props) {
   return (
     <div
       ref={setRef}
-      onMouseDown={focusHandler}
-      onTouchStart={focusHandler}
+      onPointerDown={focusHandler}
       onFocus={focusHandler}
       tabIndex={-1}
       style={{ height: "100%", width: "100%" }}
diff --git a/packages/webamp/js/components/MainWindow/ClutterBar.tsx b/packages/webamp/js/components/MainWindow/ClutterBar.tsx
index 595646a7c8..cf5f9d993b 100644
--- a/packages/webamp/js/components/MainWindow/ClutterBar.tsx
+++ b/packages/webamp/js/components/MainWindow/ClutterBar.tsx
@@ -34,8 +34,8 @@ const ClutterBar = memo(() => {
         title={"Toggle Doublesize Mode"}
         id="button-d"
         className={classnames({ selected: doubled })}
-        onMouseUp={handleMouseUp}
-        onMouseDown={handleMouseDown}
+        onPointerUp={handleMouseUp}
+        onPointerDown={handleMouseDown}
       />
       <div id="button-v" />
     </div>
diff --git a/packages/webamp/js/components/MainWindow/Marquee.tsx b/packages/webamp/js/components/MainWindow/Marquee.tsx
index 7a0c92c4a8..9c41e19192 100644
--- a/packages/webamp/js/components/MainWindow/Marquee.tsx
+++ b/packages/webamp/js/components/MainWindow/Marquee.tsx
@@ -137,8 +137,7 @@ const Marquee = React.memo(() => {
     <div
       id="marquee"
       className="text"
-      onMouseDown={handleMouseDown}
-      onTouchStart={handleMouseDown}
+      onPointerDown={handleMouseDown}
       title="Song Title"
     >
       <div
diff --git a/packages/webamp/js/components/MainWindow/Position.tsx b/packages/webamp/js/components/MainWindow/Position.tsx
index afe416f3c7..75a1f71b3e 100644
--- a/packages/webamp/js/components/MainWindow/Position.tsx
+++ b/packages/webamp/js/components/MainWindow/Position.tsx
@@ -71,8 +71,8 @@ const Position = memo(() => {
       onChange={
         () => {} /* React complains without this, can probably rename onInput to onChange */
       }
-      onMouseUp={seekToPercentComplete}
-      onMouseDown={setPosition}
+      onPointerUp={seekToPercentComplete}
+      onPointerDown={setPosition}
       title="Seeking Bar"
     />
   );
diff --git a/packages/webamp/js/components/PlaylistWindow/PlaylistShade.tsx b/packages/webamp/js/components/PlaylistWindow/PlaylistShade.tsx
index 56062995bf..f5a4b88411 100644
--- a/packages/webamp/js/components/PlaylistWindow/PlaylistShade.tsx
+++ b/packages/webamp/js/components/PlaylistWindow/PlaylistShade.tsx
@@ -53,7 +53,7 @@ function PlaylistShade() {
         selected: focused === WINDOWS.PLAYLIST,
       })}
       style={{ width: `${WINDOW_WIDTH + addedWidth}px` }}
-      onMouseDown={() => focusWindow("playlist")}
+      onPointerDown={() => focusWindow("playlist")}
       onDoubleClick={toggleShade}
     >
       <div className="left">
diff --git a/packages/webamp/js/components/ResizeTarget.tsx b/packages/webamp/js/components/ResizeTarget.tsx
index 2af3092cac..40c8b5758d 100644
--- a/packages/webamp/js/components/ResizeTarget.tsx
+++ b/packages/webamp/js/components/ResizeTarget.tsx
@@ -70,12 +70,6 @@ function ResizeTarget(props: Props) {
     setMouseDown(true);
   };
 
-  return (
-    <div
-      onMouseDown={handleMouseDown}
-      onTouchStart={handleMouseDown}
-      {...passThroughProps}
-    />
-  );
+  return <div onPointerDown={handleMouseDown} {...passThroughProps} />;
 }
 export default memo(ResizeTarget);
diff --git a/packages/webamp/js/components/Volume.tsx b/packages/webamp/js/components/Volume.tsx
index 70e5172464..f43c75acb3 100644
--- a/packages/webamp/js/components/Volume.tsx
+++ b/packages/webamp/js/components/Volume.tsx
@@ -26,12 +26,8 @@ export default function Volume({ id, style, className }: Props) {
       style={{ ...style, touchAction: "none" }}
       className={className}
       onChange={(e) => setVolume(Number(e.target.value))}
-      onMouseDown={() => setFocus("volume")}
-      onTouchStart={() => {
-        setFocus("volume");
-      }}
-      onMouseUp={unsetFocus}
-      onTouchEnd={unsetFocus}
+      onPointerDown={() => setFocus("volume")}
+      onPointerUp={unsetFocus}
       title="Volume Bar"
     />
   );
diff --git a/packages/webamp/js/components/WindowManager.tsx b/packages/webamp/js/components/WindowManager.tsx
index 4f7418c13c..89096541d6 100644
--- a/packages/webamp/js/components/WindowManager.tsx
+++ b/packages/webamp/js/components/WindowManager.tsx
@@ -177,10 +177,7 @@ export default function WindowManager({ windows: propsWindows }: Props) {
         <div
           key={w.key}
           onBlur={onBlur}
-          onMouseDown={(e: React.MouseEvent<HTMLDivElement>) => {
-            handleMouseDown(w.key, e);
-          }}
-          onTouchStart={(e: React.TouchEvent<HTMLDivElement>) => {
+          onPointerDown={(e: React.MouseEvent<HTMLDivElement>) => {
             handleMouseDown(w.key, e);
           }}
           style={{