diff --git a/packages/web-shared/components/Modal/Modal.js b/packages/web-shared/components/Modal/Modal.js
index 7a208fa0..ee87b69c 100644
--- a/packages/web-shared/components/Modal/Modal.js
+++ b/packages/web-shared/components/Modal/Modal.js
@@ -27,10 +27,14 @@ function ChurchLogo(props) {
 const Modal = (props = {}) => {
   const [state, dispatch] = useModal();
 
+  console.log('Modal props: ', props);
+
   const ref = useRef();
   const imageRef = useRef();
   const { id, navigate } = useNavigation();
 
+  console.log('Navigation ID: ', id);
+
   useEffect(() => {
     // Watch for changes to the `id` search param
     if (id) {
@@ -70,7 +74,7 @@ const Modal = (props = {}) => {
 
   return (
     <Box>
-      <Styled.Modal className="apollos-modal" show={state.isOpen}>
+      <Styled.Modal className="apollos-modal" show={state.isOpen ?? false}>
         {state.content ? (
           <>
             <Styled.ModalContainer ref={ref} role="dialog" tabIndex={-1} aria-dialog={true}>
diff --git a/packages/web-shared/components/Modal/Modal.styles.js b/packages/web-shared/components/Modal/Modal.styles.js
index d1d764ed..01ee8589 100644
--- a/packages/web-shared/components/Modal/Modal.styles.js
+++ b/packages/web-shared/components/Modal/Modal.styles.js
@@ -38,8 +38,8 @@ const Modal = withTheme(styled.div`
   justify-content: center;
   align-items: center;
   z-index: 9999;
-  animation: ${(props) => (props.show ? slideIn : slideOut)} 0.3s ease-in-out;
-  transform: translateY(${(props) => (props.show ? '0' : '100%')});
+  animation: ${(props) => (props?.show ? slideIn : slideOut)} 0.3s ease-in-out;
+  transform: translateY(${(props) => (props?.show ? '0' : '100%')});
   ${system};
 `);