diff --git a/src/components/primitive/Modal.tsx b/src/components/primitive/Modal.tsx
index fbd606d..9f9b17b 100644
--- a/src/components/primitive/Modal.tsx
+++ b/src/components/primitive/Modal.tsx
@@ -1,5 +1,11 @@
 import { useRouter } from "expo-router";
-import {  StyleSheet, TouchableWithoutFeedback, View, ViewProps, ViewStyle } from "react-native";
+import {
+  StyleSheet,
+  TouchableWithoutFeedback,
+  View,
+  ViewProps,
+  ViewStyle,
+} from "react-native";
 
 const styles = StyleSheet.create({
   container: {
@@ -16,7 +22,7 @@ const styles = StyleSheet.create({
 });
 
 export function Modal({ children, ...props }: ViewProps) {
-  const router = useRouter()
+  const router = useRouter();
 
   return (
     <TouchableWithoutFeedback
@@ -24,11 +30,14 @@ export function Modal({ children, ...props }: ViewProps) {
     >
       <View style={styles.container} {...props}>
         <View style={styles.wrapper}>
+          {/* The touchable here is necessary to occlude the parent touchable's detection.
+              However, because we are pasting the children in, it doesn't fill correctly so we
+              have to wrap them around a view to make it work correctly */}
           <TouchableWithoutFeedback>
-            {children}
+            <View>{children}</View>
           </TouchableWithoutFeedback>
         </View>
       </View>
     </TouchableWithoutFeedback>
-  )
-}
\ No newline at end of file
+  );
+}