diff --git a/app/(tabs)/map.tsx b/app/(tabs)/map.tsx
index 941886f..f1574b6 100644
--- a/app/(tabs)/map.tsx
+++ b/app/(tabs)/map.tsx
@@ -1,6 +1,6 @@
 import React, {useEffect, useState} from 'react';
-import {Image, SafeAreaView, ScrollView, StatusBar, StyleSheet, Switch, View} from 'react-native';
-import Mapbox, {MapView} from "@rnmapbox/maps";
+import {Image, SafeAreaView, ScrollView, StatusBar, StyleSheet, Switch, View, Dimensions} from 'react-native';
+import Mapbox, {Callout, Camera, MapView, PointAnnotation} from "@rnmapbox/maps";
 
 Mapbox.setAccessToken("pk.eyJ1IjoibWFhcnRlbnZyOTgiLCJhIjoiY2x6ZDFqMGp1MGVyejJrczhqcXpvYm9iYiJ9.XvYcL62dWiJQiFmG6mOoug");
 
@@ -12,7 +12,6 @@ import List from '@/components/List';
 import {Request} from '@/services/request';
 
 
-
 export default function MapScreen() {
   const colorScheme = useColorScheme() ?? 'light';
 
@@ -75,7 +74,7 @@ export default function MapScreen() {
   return (
     <SafeAreaView style={{flex: 1, backgroundColor: Colors[colorScheme].background}}>
       <ThemedView style={styles.container}>
-        <ScrollView>
+        <ThemedView>
           <ThemedView style={styles.titleContainer}>
             <ThemedText type="title">Afvalcontainers</ThemedText>
           </ThemedView>
@@ -87,42 +86,50 @@ export default function MapScreen() {
           <ThemedView style={styles.mapContainer}>
             <MapView
               style={styles.map}
+              logoEnabled={false}
+              scaleBarEnabled={false}
+              attributionEnabled={false}
             >
-              {/*{activeMarkers().map((marker: any, index: any) => (*/}
-              {/*  <Marker*/}
-              {/*    key={index}*/}
-              {/*    tracksViewChanges={false}*/}
-              {/*    coordinate={{*/}
-              {/*      latitude: parseFloat(marker.latitude),*/}
-              {/*      longitude: parseFloat(marker.longitude),*/}
-              {/*    }}*/}
-              {/*    title={marker.number}*/}
-              {/*    description={marker.description}*/}
-              {/*    pinColor={marker.marker_color}*/}
-              {/*  />*/}
-              {/*))}*/}
+              <Camera
+                centerCoordinate={[5.630960, 52.043420]}
+                zoomLevel={13}
+                animationMode={'none'}
+              />
+              {activeMarkers().map((marker: any, index: any) => (
+                <PointAnnotation
+                  key={marker.id.toString()}
+                  id={marker.id.toString()}
+                  coordinate={marker.coordinate}
+                >
+                  <Callout title={marker.number}>
+                    <ThemedView style={styles.callout}>
+                      <ThemedText>{marker.description + ' - ' + marker.street}</ThemedText>
+                    </ThemedView>
+                  </Callout>
+                </PointAnnotation>
+              ))}
             </MapView>
           </ThemedView>
+        </ThemedView>
 
-          <ThemedView style={styles.listContainer}>
-            <List
-              data={types}
-              renderItem={(item: any, index: any) => (
-                <ThemedView style={styles.listItem} key={index}>
-                  <View style={styles.listItemTitle}>
-                    <Image source={{uri: item.image}} style={styles.listImage}/>
-                    <ThemedText type="default">{item.name}</ThemedText>
-                  </View>
+        <ScrollView style={styles.listContainer}>
+          <List
+            data={types}
+            renderItem={(item: any, index: any) => (
+              <ThemedView style={styles.listItem} key={index}>
+                <View style={styles.listItemTitle}>
+                  <Image source={{uri: item.image}} style={styles.listImage}/>
+                  <ThemedText type="default">{item.name}</ThemedText>
+                </View>
 
-                  <Switch
-                    trackColor={{false: '#767577', true: Colors[colorScheme].tint}}
-                    thumbColor={'#fff'}
-                    value={item.isEnabled}
-                    onValueChange={() => toggleSwitch(index)}
-                  />
-                </ThemedView>
-              )}/>
-          </ThemedView>
+                <Switch
+                  trackColor={{false: '#767577', true: Colors[colorScheme].tint}}
+                  thumbColor={'#fff'}
+                  value={item.isEnabled}
+                  onValueChange={() => toggleSwitch(index)}
+                />
+              </ThemedView>
+            )}/>
         </ScrollView>
       </ThemedView>
     </SafeAreaView>
@@ -133,6 +140,7 @@ const styles = StyleSheet.create({
   container: {
     marginTop: StatusBar.currentHeight,
     paddingTop: 25,
+    flex: 1,
   },
   titleContainer: {
     paddingLeft: 25,
@@ -144,14 +152,16 @@ const styles = StyleSheet.create({
   },
   mapContainer: {
     marginTop: 15,
+    height: 400,
   },
   map: {
-    width: '100%',
-    height: 500,
+    width: Dimensions.get('window').width,
+    height: 400,
     flex: 1,
   },
   listContainer: {
-    marginTop: 10,
+    flex: 1,
+    marginTop: 20,
     paddingLeft: 25,
     paddingRight: 25,
   },
@@ -176,5 +186,9 @@ const styles = StyleSheet.create({
     height: 30,
     borderRadius: 5,
     marginRight: 8,
-  }
+  },
+  callout: {
+    width: 200,
+    padding: 5,
+  },
 });
diff --git a/services/request.tsx b/services/request.tsx
index 300670a..90549ce 100644
--- a/services/request.tsx
+++ b/services/request.tsx
@@ -2,7 +2,7 @@ import axios from 'axios';
 
 const API_URL = 'https://kliko.maartenvr98.nl/api/v1/';
 const CONFIG = {
-  timeout: 3000,
+  timeout: 30000,
 };
 
 export class Request {