diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index 14895df2..e4c767ba 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -7,6 +7,7 @@ import useClickInsideOutside from '@/utility/useClickInsideOutside';
 import { useRouter } from 'next/navigation';
 import AnimateItems from './AnimateItems';
 import { PATH_ROOT } from '@/site/paths';
+import usePrefersReducedMotion from '@/utility/usePrefersReducedMotion';
 
 export default function Modal({
   onClosePath,
@@ -17,6 +18,8 @@ export default function Modal({
 }) {
   const router = useRouter();
 
+  const prefersReducedMotion = usePrefersReducedMotion();
+
   const contentRef = useRef<HTMLDivElement>(null);
 
   const [htmlElements, setHtmlElements] = useState<HTMLDivElement[]>([]);
@@ -41,7 +44,9 @@ export default function Modal({
         'fixed inset-0 z-50 flex items-center justify-center',
         'bg-black',
       )}
-      initial={{ backgroundColor: 'rgba(0, 0, 0, 0)' }}
+      initial={!prefersReducedMotion
+        ? { backgroundColor: 'rgba(0, 0, 0, 0)' }
+        : false}
       animate={{ backgroundColor: 'rgba(0, 0, 0, 0.80)' }}
       transition={{ duration: 0.3, easing: 'easeOut' }}
     >