diff --git a/app/ui/lib/Modal.tsx b/app/ui/lib/Modal.tsx
index 261300f6ac..780894cb8e 100644
--- a/app/ui/lib/Modal.tsx
+++ b/app/ui/lib/Modal.tsx
@@ -12,6 +12,7 @@ import type { MergeExclusive } from 'type-fest'
 
 import { Close12Icon } from '@oxide/design-system/icons/react'
 
+import { useReducedMotion } from '~/hooks/use-reduce-motion'
 import { classed } from '~/util/classed'
 
 import { Button } from './Button'
@@ -42,11 +43,12 @@ export function Modal({
   overlay = true,
 }: ModalProps) {
   const AnimatedDialogContent = animated(Dialog.Content)
+  const prefersReducedMotion = useReducedMotion()
 
   const config = { tension: 650, mass: 0.125 }
 
   const transitions = useTransition(isOpen, {
-    from: { y: -5 },
+    from: { y: prefersReducedMotion ? 0 : -5 },
     enter: { y: 0 },
     config: isOpen ? config : { duration: 0 },
   })
diff --git a/app/ui/lib/SideModal.tsx b/app/ui/lib/SideModal.tsx
index 01aae0f70c..bd59dbb23a 100644
--- a/app/ui/lib/SideModal.tsx
+++ b/app/ui/lib/SideModal.tsx
@@ -13,6 +13,7 @@ import React, { useRef, type ReactNode } from 'react'
 import { Close12Icon, Error12Icon } from '@oxide/design-system/icons/react'
 
 import { useIsOverflow } from '~/hooks/use-is-overflow'
+import { useReducedMotion } from '~/hooks/use-reduce-motion'
 import { Message } from '~/ui/lib/Message'
 import { classed } from '~/util/classed'
 
@@ -54,11 +55,12 @@ export function SideModal({
   errors,
 }: SideModalProps) {
   const AnimatedDialogContent = animated(Dialog.Content)
+  const prefersReducedMotion = useReducedMotion()
 
   const config = { tension: 650, mass: 0.125 }
 
   const transitions = useTransition(isOpen, {
-    from: { x: 50 },
+    from: { x: prefersReducedMotion ? 0 : 50 },
     enter: { x: 0 },
     config: isOpen && animate ? config : { duration: 0 },
   })