diff --git a/src/components/CustomMapCallout/CustomMapCallout.tsx b/src/components/CustomMapCallout/CustomMapCallout.tsx
deleted file mode 100644
index 6184c9a..0000000
--- a/src/components/CustomMapCallout/CustomMapCallout.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { Callout } from "react-native-maps";
-import { LocationType, RawLocationType } from "../../interfaces/Interfaces";
-import styles from "../../styles";
-import { Text } from "react-native";
-
-// Map popup for user's location
-
-type props = {
-  location: LocationType;
-  studying: boolean;
-  subject?: string;
-};
-
-export default function CustomMapCallout(props: props) {
-  let { location, studying, subject } = props;
-  if (location && location.latitude && location.longitude) {
-    if (studying) {
-      return (
-        <Callout>
-          <Text style={styles.text_black_tiny}>
-            You are here {"\n"}
-            X: {Math.round(location.longitude) + "\n"}
-            Z: {Math.round(location.latitude) + "\n"}
-            Studying: {subject}
-          </Text>
-        </Callout>
-      );
-    } else {
-      return (
-        <Callout>
-          <Text style={styles.text_black_tiny}>
-            You are here {"\n"}
-            X: {Math.round(location.longitude) + "\n"}
-            Z: {Math.round(location.latitude)}
-          </Text>
-        </Callout>
-      );
-    }
-  }
-  return <></>;
-}
diff --git a/src/components/MapRenderer/MapRendererFar.tsx b/src/components/MapRenderer/MapRendererFar.tsx
index 776df86..e65a145 100644
--- a/src/components/MapRenderer/MapRendererFar.tsx
+++ b/src/components/MapRenderer/MapRendererFar.tsx
@@ -13,7 +13,7 @@ type props = {
 
 export default function MapRendererFar(props: props) {
   return (
-    <View>
+    <>
       <Text style={styles.text_white_medium}>
         You are too far from USTP {"\n"}
         Get closer to use Stud-E
@@ -74,6 +74,6 @@ export default function MapRendererFar(props: props) {
       <Text style={styles.text_white_small}>
         {props.dist}km away from USTP {"\n"}
       </Text>
-    </View>
+    </>
   );
 }
diff --git a/src/icons/DropdownIcon/DropdownIcon.tsx b/src/icons/CaretDownIcon/CaretDownIcon.tsx
similarity index 91%
rename from src/icons/DropdownIcon/DropdownIcon.tsx
rename to src/icons/CaretDownIcon/CaretDownIcon.tsx
index 27851ab..6a34501 100644
--- a/src/icons/DropdownIcon/DropdownIcon.tsx
+++ b/src/icons/CaretDownIcon/CaretDownIcon.tsx
@@ -3,7 +3,7 @@ import { IconProps } from "../../interfaces/Interfaces";
 import { Svg, Path } from "react-native-svg";
 import { colors } from "../../styles";
 
-export default function DropdownIcon(props: IconProps) {
+export default function CaretDownIcon(props: IconProps) {
   return (
     <>
       <Svg
diff --git a/src/icons/CaretUpIcon/CaretUpIcon.tsx b/src/icons/CaretUpIcon/CaretUpIcon.tsx
new file mode 100644
index 0000000..0f5c720
--- /dev/null
+++ b/src/icons/CaretUpIcon/CaretUpIcon.tsx
@@ -0,0 +1,24 @@
+import * as React from "react";
+import { IconProps } from "../../interfaces/Interfaces";
+import { Svg, Path } from "react-native-svg";
+import { colors } from "../../styles";
+
+export default function CaretUpIcon(props: IconProps) {
+  return (
+    <>
+      <Svg
+        height={props.size + "px"}
+        width={props.size + "px"}
+        viewBox="0 0 24 24"
+        stroke-width="2"
+        stroke={colors.icon_color}
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <Path stroke="none" d="M0 0h24v24H0z" fill="none"></Path>
+        <Path d="M18 14l-6 -6l-6 6h12"></Path>
+      </Svg>
+    </>
+  );
+}
diff --git a/src/routes/Home/Home.tsx b/src/routes/Home/Home.tsx
index 56c87e4..22b2150 100644
--- a/src/routes/Home/Home.tsx
+++ b/src/routes/Home/Home.tsx
@@ -1,16 +1,8 @@
-import styles, { Viewport, colors } from "../../styles";
-import { View, Text } from "react-native";
+import styles, { colors } from "../../styles";
+import { View, Text, Pressable } from "react-native";
 import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer";
 import { useState, useEffect } from "react";
-import MapView, {
-  Callout,
-  Heatmap,
-  Circle,
-  Marker,
-  UrlTile,
-  Overlay,
-  Polygon,
-} from "react-native-maps";
+import MapView, { Circle, Marker } from "react-native-maps";
 import * as Location from "expo-location";
 import GetDistance from "../../components/GetDistance/GetDistance";
 import Button from "../../components/Button/Button";
@@ -21,13 +13,10 @@ import {
   StudentStatusType,
   StudentStatusListReturnType,
   StudentStatusListType,
-  subjectUserMapType,
-  StudentStatusFilterTypeFlattened,
   StudentStatusPatchType,
   StudyGroupType,
   StudyGroupReturnType,
   StudentStatusFilterType,
-  StudyGroupCreateType,
 } from "../../interfaces/Interfaces";
 import { useNavigation } from "@react-navigation/native";
 import {
@@ -40,16 +29,15 @@ import {
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useToast } from "react-native-toast-notifications";
 import React from "react";
-import CustomMapCallout from "../../components/CustomMapCallout/CustomMapCallout";
 import MapRendererFar from "../../components/MapRenderer/MapRendererFar";
 import GetDistanceFromUSTP from "../../components/GetDistance/GetDistanceFromUSTP";
-import { useSelector } from "react-redux";
-import { RootState } from "../../features/redux/Store/Store";
+import Modal from "react-native-modal";
+import DropdownIcon from "../../icons/CaretDownIcon/CaretDownIcon";
+import CaretUpIcon from "../../icons/CaretUpIcon/CaretUpIcon";
 
 export default function Home() {
   // Switch this condition to see the main map when debugging
   const map_debug = true;
-  const user_state = useSelector((state: RootState) => state.user);
   const navigation = useNavigation<RootDrawerParamList>();
   const [location, setLocation] = useState<RawLocationType | null>(null);
   const [dist, setDist] = useState<number | null>(null);
@@ -59,12 +47,8 @@ export default function Home() {
   const queryClient = useQueryClient();
   const toast = useToast();
 
-  const ustpCoords = {
-    latitude: 8.4857,
-    longitude: 124.6565,
-    latitudeDelta: 0.000235,
-    longitudeDelta: 0.000067,
-  };
+  const [modalOpen, setModalOpen] = useState(false);
+
   async function requestLocation() {
     const { status } = await Location.requestForegroundPermissionsAsync();
     if (status !== "granted") {
@@ -333,7 +317,7 @@ export default function Home() {
     if (dist && location) {
       if (dist <= 2 || map_debug) {
         return (
-          <View>
+          <>
             <MapView
               style={styles.map}
               customMapStyle={[
@@ -413,9 +397,7 @@ export default function Home() {
                   );
                 }
               )}
-              {!StudyGroupQuery.isPaused &&
-              !StudyGroupQuery.isRefetching &&
-              !StudyGroupQuery.error ? (
+              {studying ? (
                 study_groups.map(
                   (studygroup: StudyGroupType, index: number) => {
                     const randomColorWithOpacity = `rgba(${Math.floor(
@@ -697,20 +679,45 @@ export default function Home() {
                 <></>
               )}
             </MapView>
-            <Button
-              onPress={async () => {
-                if (!student_status?.active) {
-                  navigation.navigate("Start Studying", { location: location });
-                } else {
-                  stop_studying.mutate({
-                    active: false,
-                  });
-                }
+            <View
+              style={{
+                display: "flex",
+                flexDirection: "row",
+                justifyContent: "center",
               }}
             >
-              <Text style={styles.text_white_medium}>{buttonLabel}</Text>
-            </Button>
-          </View>
+              <Button
+                onPress={async () => {
+                  if (!student_status?.active) {
+                    navigation.navigate("Start Studying", {
+                      location: location,
+                    });
+                  } else {
+                    stop_studying.mutate({
+                      active: false,
+                    });
+                  }
+                }}
+              >
+                <Text style={styles.text_white_small}>{buttonLabel}</Text>
+              </Button>
+              <Pressable
+                style={{
+                  display: modalOpen ? "none" : "flex",
+                  backgroundColor: colors.secondary_3,
+                  borderRadius: 16,
+                  alignSelf: "center",
+                }}
+                onPress={() => {
+                  setModalOpen(true);
+                }}
+              >
+                <CaretUpIcon size={32} />
+              </Pressable>
+            </View>
+
+            <View style={styles.padding} />
+          </>
         );
       } else {
         return <MapRendererFar location={location.coords} dist={dist} />;
@@ -718,17 +725,38 @@ export default function Home() {
     } else {
       requestLocation();
       return (
-        <AnimatedContainer>
+        <>
           <Text style={styles.text_white_medium}>{feedback}</Text>
           <Button onPress={requestLocation}>
             <Text style={styles.text_white_medium}>Allow Access</Text>
           </Button>
-        </AnimatedContainer>
+        </>
       );
     }
   }
   return (
     <View style={styles.background}>
+      <Modal
+        coverScreen={false}
+        isVisible={modalOpen}
+        style={{ opacity: 0.85 }}
+        hasBackdrop={false}
+        useNativeDriver={true}
+      >
+        <AnimatedContainer>
+          <Text style={styles.text_white_medium}>Groups List</Text>
+          <Pressable
+            style={{
+              alignContent: "flex-start",
+              backgroundColor: colors.secondary_3,
+              borderRadius: 16,
+            }}
+            onPress={() => setModalOpen(false)}
+          >
+            <DropdownIcon size={32} />
+          </Pressable>
+        </AnimatedContainer>
+      </Modal>
       <AnimatedContainer>
         <CustomMap />
       </AnimatedContainer>
diff --git a/src/styles.tsx b/src/styles.tsx
index 546847e..1236f56 100644
--- a/src/styles.tsx
+++ b/src/styles.tsx
@@ -51,6 +51,7 @@ const styles = StyleSheet.create({
     display: "flex",
     flexDirection: "row",
     alignItems: "center",
+    flexGrow: 1,
   },
   flex_column: {
     display: "flex",