components/BottomNav.tsx

@@ -1,4 +1,4 @@
-import {Appbar, Button, Text, useTheme} from "react-native-paper";
+import {Appbar, Button, Portal, Text, useTheme} from "react-native-paper";
 import {View} from "react-native";
 import styles from "@/assets/styles";
 import React from "react";

components/Broken.tsx

@@ -0,0 +1,18 @@
+import {Avatar, Dialog, Portal, useTheme} from "react-native-paper";
+import React from "react";
+
+const theme = useTheme();
+
+const Broken = () => {
+    return (
+        <Dialog.Content>
+            <Dialog.Title style={{color: theme.colors.onBackground, textAlign: 'center', fontFamily: "Light"}}>The Internet is a Series of Tubes</Dialog.Title>
+            <Avatar.Image
+                source={require("../assets/images/broken.png")}
+                style={{ alignSelf: 'center', marginBottom: 15 }}
+            />
+        </Dialog.Content>
+    );
+};
+
+export default Broken;

components/Location.tsx

@@ -1,5 +1,6 @@
 import { Dialog, Portal, useTheme } from "react-native-paper";
 import React, {useEffect} from "react";
+import Broken from "@/components/Broken";
 
 interface LocationProps {
     visible: boolean;
@@ -15,7 +16,7 @@ const Location: React.FC<LocationProps> = ({ visible }) => {
     return (
         <Portal>
             <Dialog visible={visible} >
-                <Dialog.Title style={{ color: theme.colors.onBackground, textAlign: 'center', fontFamily: "Light"}}>Choose Your Location</Dialog.Title>
+                <Broken />
             </Dialog>
         </Portal>
     )