diff --git a/app/index.tsx b/app/index.tsx
index 1abda23..8ef59ff 100644
--- a/app/index.tsx
+++ b/app/index.tsx
@@ -63,7 +63,9 @@ const Index = () => {
                 setChanged={setUserDataChanged}
                 onClose={() => setProfileActive(false)}
             />
-            <BottomNav toggleLocation={() => setProfileActive(true)}/>
+            <BottomNav
+                isProfileActive={isProfileActive}
+            />
         </View>
     );
 };
diff --git a/components/BottomNav.tsx b/components/BottomNav.tsx
index 825d791..ef34704 100644
--- a/components/BottomNav.tsx
+++ b/components/BottomNav.tsx
@@ -1,24 +1,44 @@
-import {Appbar, Button, Text, useTheme} from "react-native-paper";
-import {View} from "react-native";
+import {Appbar, Portal, Button, Dialog, Text, useTheme } from "react-native-paper";
+import { View } from "react-native";
 import styles from "@/assets/styles";
-import React from "react";
+import React, {useState} from "react";
+import Location from "@/components/Location";
 
-const BottomNav = ({ toggleLocation }: { toggleLocation: () => void; }) => {
+
+interface BNProps {
+    isProfileActive: boolean;
+}
+const BottomNav: React.FC<BNProps> = ({ isProfileActive })  => {
     const theme = useTheme();
+    const [menuVisible, setMenuVisible] = useState(false);
+
     return (
-        <View style={{ backgroundColor: theme.colors.background }}>
-            <Appbar.Header style={[styles.bottomBar, { backgroundColor: theme.colors.primaryContainer }]} >
-                <View style={{ alignItems: "center", flexDirection: "row", justifyContent: "space-between", padding: 10, flex: 1, paddingHorizontal: 15 }}>
-                    <Text style={{ color: theme.colors.primary, fontFamily: "SpaceReg" }}>Daisy Knight Dog Park</Text>
-                    <Button
-                        mode="text"
-                        onPress={() => toggleLocation }
-                        style={{ backgroundColor: theme.colors.primary, height: styles.bottomBar.height/2, justifyContent: "center"}}
-                        labelStyle={{ color: theme.colors.onPrimary, fontFamily: "SpaceReg"}}>
-                        Change
-                    </Button>
-                </View>
-            </Appbar.Header>
+        <View style={ isProfileActive && { display: 'none' }}>
+            <View style={{ backgroundColor: theme.colors.background }}>
+                <Appbar.Header style={[styles.bottomBar, { backgroundColor: theme.colors.primaryContainer }]} >
+                    <View style={{ alignItems: "center", flexDirection: "row", justifyContent: "space-between", padding: 10, flex: 1, paddingHorizontal: 15 }}>
+                        <Text style={{ color: theme.colors.primary, fontFamily: "SpaceReg" }}>Daisy Knight Dog Park</Text>
+                        <Button
+                            mode="text"
+                            onPress={() => setMenuVisible(true) }
+                            style={{ backgroundColor: theme.colors.primary, height: styles.bottomBar.height/2, justifyContent: "center"}}
+                            labelStyle={{ color: theme.colors.onPrimary, fontFamily: "SpaceReg"}}>
+                            Change
+                        </Button>
+                    </View>
+                </Appbar.Header>
+                <Portal>
+                    <Dialog visible={menuVisible} onDismiss={() => setMenuVisible(false)} style={{ backgroundColor: theme.colors.primaryContainer, maxHeight: 400 }}>
+                        <Dialog.Title style={{ color: theme.colors.primary, textAlign: 'center' }}>Location</Dialog.Title>
+                        <Location />
+                        <Dialog.Actions style={{ justifyContent: "center" }}>
+                            <Button onPress={() => setMenuVisible(false)} mode="contained" style={{ backgroundColor: theme.colors.inversePrimary }} labelStyle={{ color: theme.colors.primary }}>
+                                Close
+                            </Button>
+                        </Dialog.Actions>
+                    </Dialog>
+                </Portal>
+            </View>
         </View>
     )
 }
diff --git a/components/Broken.tsx b/components/Broken.tsx
index ed4f419..f31fc98 100644
--- a/components/Broken.tsx
+++ b/components/Broken.tsx
@@ -1,4 +1,4 @@
-import {Dialog, useTheme} from "react-native-paper";
+import {Dialog, Title, useTheme} from "react-native-paper";
 import { Image } from "react-native";
 import React from "react";
 
@@ -7,12 +7,12 @@ const theme = useTheme();
 const Broken = () => {
     return (
         <Dialog.Content>
-            <Dialog.Title style={{color: theme.colors.onBackground, fontSize: 16, textAlign: 'center', fontFamily: "Light"}}>The Internet is a Series of Tubes</Dialog.Title>
+            <Title style={{color: theme.colors.onBackground, fontSize: 16, textAlign: 'center', fontFamily: "Light"}}>The Internet is a Series of Tubes</Title>
             <Image
                 source={require("../assets/images/broken.png")}
-                style={{ alignSelf: 'center', width: "90%" }}
+                style={{ alignSelf: 'center', resizeMode: "contain", height: 400/3 }}
             />
-            <Dialog.Title style={{color: theme.colors.onBackground, fontSize: 16, textAlign: 'center', fontFamily: "Light"}}>And these aren't connected. {"\n"} (We're still working on this part.)</Dialog.Title>
+            <Title style={{color: theme.colors.onBackground, fontSize: 16, textAlign: 'center', fontFamily: "Light"}}>And these aren't connected. {"\n"} (We're still working on this part.)</Title>
         </Dialog.Content>
     );
 };
diff --git a/components/Location.tsx b/components/Location.tsx
index f1570a1..0ecac90 100644
--- a/components/Location.tsx
+++ b/components/Location.tsx
@@ -1,22 +1,9 @@
-import { Dialog, Portal  } from "react-native-paper";
-import React, {useEffect} from "react";
+import React from "react";
 import Broken from "@/components/Broken";
 
-interface LocationProps {
-    visible: boolean;
-}
-const Location: React.FC<LocationProps> = ({ visible }) => {
-    useEffect(() => {
-        if (visible) {
-
-        }
-    }, [visible]);
+const Location = () => {
     return (
-        <Portal>
-            <Dialog visible={visible} >
-                <Broken />
-            </Dialog>
-        </Portal>
+        <Broken />
     )
 }
 
diff --git a/components/TopNav.tsx b/components/TopNav.tsx
index 6ea72a5..bd468e9 100644
--- a/components/TopNav.tsx
+++ b/components/TopNav.tsx
@@ -59,7 +59,7 @@ const TopNav = ({ toggleProfile }: { toggleProfile: () => void; }) => {
                     </Dialog.Actions>
                 </Dialog>
                 <Dialog visible={bugVisible} onDismiss={() => setBugVisible(false)} style={{ backgroundColor: theme.colors.primaryContainer }}>
-                    <Dialog.Title style={{ color: theme.colors.primary, textAlign: 'center' }}>Privacy Policy</Dialog.Title>
+                    <Dialog.Title style={{ color: theme.colors.primary, textAlign: 'center' }}>Report A Bug</Dialog.Title>
                     <Broken />
                     <Dialog.Actions style={{ justifyContent: "center" }}>
                         <Button onPress={() => setBugVisible(false)} mode="contained" style={{ backgroundColor: theme.colors.inversePrimary }} labelStyle={{ color: theme.colors.primary }}>