diff --git a/config.json b/config.json
index fe0cbde..4f0fa96 100644
--- a/config.json
+++ b/config.json
@@ -1,5 +1,25 @@
 {
   "base": {
-    "municipality": "purmerend"
+    "municipality": "purmerend",
+    "style": {
+      "primaryColor": "#24578f"
+    },
+    "map": {
+      "find_address_in_distance": 30,
+      "center": [
+        52.3731081,
+        4.8932945
+      ],
+      "maxBounds": [
+        [
+          4.64034,
+          52.25168
+        ],
+        [
+          5.10737,
+          52.50536
+        ]
+      ]
+    }
   }
 }
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 566c576..147e2f3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "@radix-ui/react-select": "2.1.2",
         "@radix-ui/react-slot": "1.1.0",
         "@radix-ui/react-visually-hidden": "1.1.0",
+        "@tabler/icons-react": "3.21.0",
         "@types/lodash": "4.17.10",
         "axios-retry": "4.5.0",
         "class-variance-authority": "0.7.0",
@@ -2625,6 +2626,30 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@tabler/icons": {
+      "version": "3.21.0",
+      "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-3.21.0.tgz",
+      "integrity": "sha512-5+GkkmWCr1wgMor5cOF1/YYflTQdc15y10FUikJ3HW8hDiFjfbuoAHJi17FT1vwsr1sA78rkJMn+fDoOOjnnPA==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/codecalm"
+      }
+    },
+    "node_modules/@tabler/icons-react": {
+      "version": "3.21.0",
+      "resolved": "https://registry.npmjs.org/@tabler/icons-react/-/icons-react-3.21.0.tgz",
+      "integrity": "sha512-Qq0GnZzzccbv/zuMyXAUUPlogNAqx9KsF8cr/ev3bxs+GMObqNEjXv1eZl9GFzxyQTS435siJNU8A1BaIYhX8g==",
+      "dependencies": {
+        "@tabler/icons": "3.21.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/codecalm"
+      },
+      "peerDependencies": {
+        "react": ">= 16"
+      }
+    },
     "node_modules/@testing-library/dom": {
       "version": "10.4.0",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz",
diff --git a/package.json b/package.json
index d065fe3..0dd1019 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "@radix-ui/react-select": "2.1.2",
     "@radix-ui/react-slot": "1.1.0",
     "@radix-ui/react-visually-hidden": "1.1.0",
+    "@tabler/icons-react": "3.21.0",
     "@types/lodash": "4.17.10",
     "axios-retry": "4.5.0",
     "class-variance-authority": "0.7.0",
diff --git a/src/app/[locale]/incident/add/components/AdditionalInformationPage.tsx b/src/app/[locale]/incident/add/components/AdditionalInformationPage.tsx
new file mode 100644
index 0000000..525f5b8
--- /dev/null
+++ b/src/app/[locale]/incident/add/components/AdditionalInformationPage.tsx
@@ -0,0 +1,30 @@
+'use client'
+
+import { useTranslations } from 'next-intl'
+import { useFormStore } from '@/store/form_store'
+import { Heading, HeadingGroup, PreHeading } from '@/components'
+import { IncidentQuestionsLocationForm } from '@/app/[locale]/incident/add/components/IncidentQuestionsLocationForm'
+
+const currentStep = 2
+const maxStep = 4
+
+export const AdditionalInformationPage = () => {
+  const t = useTranslations('describe-add')
+  const tGeneral = useTranslations('general.describe_form')
+  const { loaded } = useFormStore()
+
+  // TODO: implement nice loading state, for if loaded if false. Also create a loading state for Stepper store.
+  if (loaded) {
+    return (
+      <div className="flex flex-col gap-4">
+        <HeadingGroup>
+          <Heading level={1}>{t('heading')}</Heading>
+          <PreHeading>
+            {tGeneral('pre-heading', { current: currentStep, max: maxStep })}
+          </PreHeading>
+        </HeadingGroup>
+        <IncidentQuestionsLocationForm />
+      </div>
+    )
+  }
+}
diff --git a/src/app/[locale]/incident/add/components/AddressSelect.tsx b/src/app/[locale]/incident/add/components/AddressSelect.tsx
deleted file mode 100644
index f5b6b69..0000000
--- a/src/app/[locale]/incident/add/components/AddressSelect.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import Select, { DropdownIndicatorProps, components } from 'react-select'
-import React from 'react'
-import { TbSearch } from 'react-icons/tb'
-
-const options = [
-  { value: 'eikenboomstraat', label: 'eikenboomstraat' },
-  { value: 'dennenboom', label: 'dennenboomstraat' },
-  { value: 'beukenboomstraat', label: 'beukenboomstraat' },
-  { value: 'sparrenboomstraat', label: 'sparrenboomstraat' },
-  { value: 'acaciaboomstraat', label: 'acaciaboomstraat' },
-]
-
-const DropdownIndicator = (props: DropdownIndicatorProps) => {
-  return (
-    <components.DropdownIndicator {...props}>
-      <TbSearch />
-    </components.DropdownIndicator>
-  )
-}
-
-const IndicatorSeparator = () => {
-  return null
-}
-
-const AddressSelect = () => {
-  return (
-    <Select
-      options={options}
-      components={{ DropdownIndicator, IndicatorSeparator }}
-      placeholder="Zoek naar adres"
-      unstyled={true}
-      classNames={{
-        control: () => 'address__select',
-        menu: () => 'address__select-menu',
-        option: (state) =>
-          `address__select-option ${
-            state.isSelected && 'address__select-option__selected'
-          } ${
-            !state.isSelected &&
-            state.isFocused &&
-            'address__select-option__focused'
-          }
-          `,
-      }}
-    />
-  )
-}
-
-export { AddressSelect }
diff --git a/src/app/[locale]/incident/add/components/IncidentQuestionsLocationForm.tsx b/src/app/[locale]/incident/add/components/IncidentQuestionsLocationForm.tsx
index dd7bd74..6425aca 100644
--- a/src/app/[locale]/incident/add/components/IncidentQuestionsLocationForm.tsx
+++ b/src/app/[locale]/incident/add/components/IncidentQuestionsLocationForm.tsx
@@ -10,6 +10,9 @@ import { useRouter } from '@/routing/navigation'
 import { PublicQuestion } from '@/types/form'
 import { Paragraph } from '@/components/index'
 import { RenderSingleField } from '@/app/[locale]/incident/add/components/questions/RenderSingleField'
+import { LocationSelect } from '@/app/[locale]/incident/add/components/questions/LocationSelect'
+import { useTranslations } from 'next-intl'
+import { isCoordinates } from '@/lib/utils/map'
 
 export const IncidentQuestionsLocationForm = () => {
   const { formState: formStoreState, updateForm } = useFormStore()
@@ -20,6 +23,7 @@ export const IncidentQuestionsLocationForm = () => {
   const { addOneStep, setLastCompletedStep } = useStepperStore()
   const router = useRouter()
   const methods = useForm()
+  const t = useTranslations('general.errors')
 
   useEffect(() => {
     router.prefetch('/incident/contact')
@@ -45,6 +49,18 @@ export const IncidentQuestionsLocationForm = () => {
     appendAdditionalQuestions()
   }, [formStoreState.main_category, formStoreState.sub_category])
 
+  useEffect(() => {
+    if (
+      isCoordinates(formStoreState.coordinates) &&
+      formStoreState.coordinates[0] === 0 &&
+      formStoreState.coordinates[1] === 0
+    ) {
+      methods.setError('location', { message: t('location_required') })
+    } else {
+      methods.clearErrors('location')
+    }
+  }, [formStoreState.coordinates])
+
   const onSubmit = (data: any) => {
     const questionKeys = Object.keys(data)
     const questionsToSubmit = additionalQuestions.filter(
@@ -117,7 +133,7 @@ export const IncidentQuestionsLocationForm = () => {
           /* TODO: Implement nice loading state */
           <Paragraph>Laden...</Paragraph>
         ) : (
-          <Paragraph>TODO: Laat hier een LocationSelect zien</Paragraph>
+          <LocationSelect />
         )}
         <IncidentFormFooter />
       </form>
diff --git a/src/app/[locale]/incident/add/components/MapDialog.tsx b/src/app/[locale]/incident/add/components/MapDialog.tsx
index dcf24c3..2a3de19 100644
--- a/src/app/[locale]/incident/add/components/MapDialog.tsx
+++ b/src/app/[locale]/incident/add/components/MapDialog.tsx
@@ -1,29 +1,33 @@
 import * as Dialog from '@radix-ui/react-dialog'
-import { TbPlus } from 'react-icons/tb'
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import Map, {
   MapLayerMouseEvent,
   Marker,
+  useMap,
   ViewState,
 } from 'react-map-gl/maplibre'
 import { useTranslations } from 'next-intl'
-import { AddressSelect } from '@/app/[locale]/incident/add/components/AddressSelect'
 import * as VisuallyHidden from '@radix-ui/react-visually-hidden'
 import { useFormStore } from '@/store/form_store'
-import { Heading } from '@/components/index'
+import { Heading, Icon } from '@/components/index'
+import { useConfig } from '@/hooks/useConfig'
+import { Button } from '@/components/index'
+import { IconMapPinFilled } from '@tabler/icons-react'
 
 type MapDialogProps = {
   trigger: React.ReactElement
-  marker: Array<number>
 } & React.HTMLAttributes<HTMLDivElement>
 
-const MapDialog = ({ trigger, marker }: MapDialogProps) => {
+const MapDialog = ({ trigger }: MapDialogProps) => {
   const t = useTranslations('describe-add.map')
-  const { updateForm, formState } = useFormStore()
+  const [marker, setMarker] = useState<[number, number] | []>([])
+  const { formState, updateForm } = useFormStore()
+  const { dialogMap } = useMap()
+  const { loading, config } = useConfig()
 
   const [viewState, setViewState] = useState<ViewState>({
-    longitude: 5.10448,
-    latitude: 52.092876,
+    latitude: 0,
+    longitude: 0,
     zoom: 15,
     bearing: 0,
     padding: {
@@ -35,18 +39,39 @@ const MapDialog = ({ trigger, marker }: MapDialogProps) => {
     pitch: 0,
   })
 
+  // Set viewState coordinates to configured ones
+  useEffect(() => {
+    if (!loading && config) {
+      setViewState({
+        ...viewState,
+        latitude:
+          formState.coordinates[0] === 0
+            ? config.base.map.center[0]
+            : formState.coordinates[0],
+        longitude:
+          formState.coordinates[1] === 0
+            ? config.base.map.center[1]
+            : formState.coordinates[1],
+      })
+    }
+  }, [loading, config, formState.coordinates])
+
+  // Change marker position on formState.coordinates change
+  useEffect(() => {
+    setMarker([formState.coordinates[0], formState.coordinates[1]])
+  }, [formState.coordinates])
+
+  // Handle click on map (flyTo position, after this set the marker position and after this set the view state)
   const handleMapClick = (event: MapLayerMouseEvent) => {
-    updateForm({
-      ...formState,
-      coordinates: [event.lngLat.lng, event.lngLat.lat],
-    })
+    if (dialogMap) {
+      dialogMap.flyTo({
+        center: [event.lngLat.lng, event.lngLat.lat],
+        speed: 0.5,
+        zoom: 18,
+      })
+    }
 
-    setViewState({
-      ...viewState,
-      zoom: 16,
-      latitude: event.lngLat.lat,
-      longitude: event.lngLat.lng,
-    })
+    setMarker([event.lngLat.lat, event.lngLat.lng])
   }
 
   return (
@@ -54,7 +79,7 @@ const MapDialog = ({ trigger, marker }: MapDialogProps) => {
       <Dialog.Trigger asChild>{trigger}</Dialog.Trigger>
       <Dialog.Portal>
         <Dialog.Overlay />
-        <Dialog.Content className="fixed inset-0 bg-white z-[1000] grid grid-cols-1 md:grid-cols-3">
+        <Dialog.Content className="fixed inset-0 bg-white z-[1000] grid grid-cols-1 md:grid-cols-3 utrecht-theme">
           <VisuallyHidden.Root>
             {/* TODO: Overleggen welke titel hier het meest vriendelijk is voor de gebruiker, multi-language support integreren */}
             <Dialog.Title>Locatie kiezen</Dialog.Title>
@@ -62,26 +87,47 @@ const MapDialog = ({ trigger, marker }: MapDialogProps) => {
               Kies een locatie op de kaart voor de locatie van uw melding.
             </Dialog.Description>
           </VisuallyHidden.Root>
-          <div className="col-span-1 p-4 flex flex-col gap-4">
-            <Heading level={1}>{t('map_heading')}</Heading>
-            <AddressSelect />
-          </div>
-          <div className="col-span-1 md:col-span-2">
-            <Map
-              {...viewState}
-              onClick={(e) => handleMapClick(e)}
-              onMove={(evt) => setViewState(evt.viewState)}
-              style={{ width: '100%', height: '100%' }}
-              mapStyle={`${process.env.NEXT_PUBLIC_MAPTILER_MAP}/style.json?key=${process.env.NEXT_PUBLIC_MAPTILER_API_KEY}`}
-            >
-              <Marker longitude={marker[0]} latitude={marker[1]}></Marker>
-            </Map>
-            <div className="fixed right-0 top-0 p-4 bg-white mt-4 mr-4 w-12 h-12 flex items-center justify-center text-2xl text-black border-border border-2">
-              <Dialog.Close className="rotate-45">
-                <TbPlus />
+          <div className="col-span-1 p-4 flex flex-col justify-between gap-4">
+            <div>
+              <Heading level={1}>{t('map_heading')}</Heading>
+            </div>
+            <div>
+              <Dialog.Close
+                asChild
+                onClick={() =>
+                  updateForm({ ...formState, coordinates: marker })
+                }
+              >
+                <Button appearance="primary-action-button">Kies locatie</Button>
               </Dialog.Close>
             </div>
           </div>
+          {/* TODO: Implement state if loading, and no config is found */}
+          {config && (
+            <div className="col-span-1 md:col-span-2">
+              <Map
+                {...viewState}
+                id="dialogMap"
+                onClick={(e) => handleMapClick(e)}
+                onMove={(evt) => setViewState(evt.viewState)}
+                style={{ blockSize: '100%', inlineSize: '100%' }}
+                mapStyle={`${process.env.NEXT_PUBLIC_MAPTILER_MAP}/style.json?key=${process.env.NEXT_PUBLIC_MAPTILER_API_KEY}`}
+                attributionControl={false}
+                maxBounds={config.base.map.maxBounds}
+              >
+                {marker.length && (
+                  <Marker latitude={marker[0]} longitude={marker[1]}>
+                    <Icon className="map-marker-icon">
+                      <IconMapPinFilled
+                        className="-translate-y-1/2"
+                        color={config.base.style.primaryColor}
+                      />
+                    </Icon>
+                  </Marker>
+                )}
+              </Map>
+            </div>
+          )}
         </Dialog.Content>
       </Dialog.Portal>
     </Dialog.Root>
diff --git a/src/app/[locale]/incident/add/components/questions/LocationSelect.tsx b/src/app/[locale]/incident/add/components/questions/LocationSelect.tsx
index d9b0442..5556c52 100644
--- a/src/app/[locale]/incident/add/components/questions/LocationSelect.tsx
+++ b/src/app/[locale]/incident/add/components/questions/LocationSelect.tsx
@@ -1,23 +1,80 @@
 import { LocationMap } from '@/components/ui/LocationMap'
 import { MapDialog } from '@/app/[locale]/incident/add/components/MapDialog'
-import { Button } from '@/components/ui/Button'
+import { PublicQuestion } from '@/types/form'
+import { MapProvider } from 'react-map-gl/maplibre'
+import { useFormContext } from 'react-hook-form'
+import React, { useEffect, useState } from 'react'
+import { Button, Paragraph } from '@/components/index'
+import { useFormStore } from '@/store/form_store'
+import { getNearestAddressByCoordinate } from '@/services/location/address'
+import { useConfig } from '@/hooks/useConfig'
+import { isCoordinates } from '@/lib/utils/map'
+import { Alert } from '@utrecht/component-library-react/dist/css-module'
+import { LinkButton } from '@utrecht/component-library-react'
+
+export interface LocationSelectProps {
+  field?: PublicQuestion
+}
+
+export const LocationSelect = ({ field }: LocationSelectProps) => {
+  const {
+    formState: { errors },
+  } = useFormContext()
+  const errorMessage = errors['location']?.message as string
+  const { formState: formStoreState } = useFormStore()
+  const [address, setAddress] = useState<string | null>(null)
+  const { config } = useConfig()
+
+  useEffect(() => {
+    const getAddress = async () => {
+      const result = await getNearestAddressByCoordinate(
+        formStoreState.coordinates[0],
+        formStoreState.coordinates[1],
+        config ? config.base.map.find_address_in_distance : 30
+      )
+
+      if (result) {
+        setAddress(result.weergavenaam)
+      } else {
+        setAddress(null)
+      }
+    }
+
+    getAddress()
+  }, [formStoreState.coordinates])
 
-export const LocationSelect = (props: any) => {
   return (
-    <div className="relative">
-      <LocationMap />
-      {/* TODO: I can not find the reason why not every element inside this dialog is focusable */}
-      <MapDialog
-        marker={props.marker}
-        trigger={
-          <Button
-            className="absolute top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2 border-none"
-            type="button"
-          >
-            Kies locatie
-          </Button>
-        }
-      />
+    <div className="w-full">
+      {errorMessage && <Alert type="error">{errorMessage}</Alert>}
+      <label htmlFor="location-button">
+        {field ? field.meta.label : 'Waar is het?'}
+      </label>
+      <div className="relative w-full">
+        <LocationMap />
+        <Paragraph>{address}</Paragraph>
+        <MapProvider>
+          <MapDialog
+            trigger={
+              isCoordinates(formStoreState.coordinates) &&
+              formStoreState.coordinates[0] === 0 &&
+              formStoreState.coordinates[1] === 0 ? (
+                <Button
+                  id="location-button"
+                  className="absolute top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2 border-none"
+                  type="button"
+                >
+                  Kies locatie
+                </Button>
+              ) : (
+                <LinkButton inline={true} id="location-button" type="button">
+                  Wijzig locatie
+                </LinkButton>
+              )
+            }
+          />
+        </MapProvider>
+      </div>
+      {/* TODO: toon locatie, straatnaam bijv. */}
     </div>
   )
 }
diff --git a/src/app/[locale]/incident/add/components/questions/PlainText.tsx b/src/app/[locale]/incident/add/components/questions/PlainText.tsx
index 4e90799..18865d6 100644
--- a/src/app/[locale]/incident/add/components/questions/PlainText.tsx
+++ b/src/app/[locale]/incident/add/components/questions/PlainText.tsx
@@ -1,7 +1,7 @@
 import { QuestionField } from '@/types/form'
 import Markdown from 'react-markdown'
 
-interface PlainTextProps extends Omit<QuestionField, 'register' | 'errors'> {}
+interface PlainTextProps extends QuestionField {}
 
 export const PlainText = ({ field }: PlainTextProps) => {
   // TODO: Discuss if alert is the only used PlainText type in Signalen, style Markdown
diff --git a/src/app/[locale]/incident/add/components/questions/RenderSingleField.tsx b/src/app/[locale]/incident/add/components/questions/RenderSingleField.tsx
index 683a464..edca73c 100644
--- a/src/app/[locale]/incident/add/components/questions/RenderSingleField.tsx
+++ b/src/app/[locale]/incident/add/components/questions/RenderSingleField.tsx
@@ -7,7 +7,6 @@ import { PlainText } from '@/app/[locale]/incident/add/components/questions/Plai
 import { TextInput } from '@/app/[locale]/incident/add/components/questions/TextInput'
 import { CheckboxInput } from '@/app/[locale]/incident/add/components/questions/CheckboxInput'
 import { TextAreaInput } from '@/app/[locale]/incident/add/components/questions/TextAreaInput'
-import { AssetSelect } from '@/app/[locale]/incident/add/components/questions/AssetSelect'
 import { LocationSelect } from '@/app/[locale]/incident/add/components/questions/LocationSelect'
 import { evaluateConditions } from '@/lib/utils/check-visibility'
 
@@ -38,9 +37,8 @@ export const RenderSingleField = ({ field }: { field: PublicQuestion }) => {
       // TODO: Implement Asset Select
       <></>
     ),
-    [FieldTypes.LOCATION_SELECT]: (props: any) => (
-      // TODO: Implement Location Select
-      <></>
+    [FieldTypes.LOCATION_SELECT]: (field: PublicQuestion) => (
+      <LocationSelect field={field} />
     ),
   }
 
@@ -100,7 +98,7 @@ export const RenderSingleField = ({ field }: { field: PublicQuestion }) => {
       const selectedAnswers =
         typeof extraProperty.answer !== 'string'
           ? // @ts-ignore
-            extraProperty.answer.map((answer: any) => answer.id)
+            extraProperty.answer.map((answer: any) => answer?.id)
           : []
 
       // Generate the array as expected by react-hook-form, based on options
diff --git a/src/app/[locale]/incident/add/page.tsx b/src/app/[locale]/incident/add/page.tsx
index bb1a0fb..59595b7 100644
--- a/src/app/[locale]/incident/add/page.tsx
+++ b/src/app/[locale]/incident/add/page.tsx
@@ -1,6 +1,4 @@
-import { NextIntlClientProvider, useMessages, useTranslations } from 'next-intl'
-import { IncidentQuestionsLocationForm } from '@/app/[locale]/incident/add/components/IncidentQuestionsLocationForm'
-import { Heading, HeadingGroup, PreHeading } from '@/components/index'
+import { AdditionalInformationPage } from '@/app/[locale]/incident/add/components/AdditionalInformationPage'
 import { getTranslations } from 'next-intl/server'
 import { createTitle } from '@/lib/utils/create-title'
 import { Metadata } from 'next/types'
@@ -27,21 +25,5 @@ export async function generateMetadata(): Promise<Metadata> {
 }
 
 export default function AddAditionalInformationPage() {
-  const t = useTranslations('describe-add')
-  const tGeneral = useTranslations('general.describe_form')
-  const messages = useMessages()
-
-  return (
-    <div className="flex flex-col gap-4">
-      <HeadingGroup>
-        <Heading level={1}>{t('heading')}</Heading>
-        <PreHeading>
-          {tGeneral('pre-heading', { current: currentStep, max: maxStep })}
-        </PreHeading>
-      </HeadingGroup>
-      <NextIntlClientProvider messages={messages}>
-        <IncidentQuestionsLocationForm />
-      </NextIntlClientProvider>
-    </div>
-  )
+  return <AdditionalInformationPage />
 }
diff --git a/src/app/[locale]/incident/components/IncidentDescriptionPage.tsx b/src/app/[locale]/incident/components/IncidentDescriptionPage.tsx
new file mode 100644
index 0000000..d0a0fa1
--- /dev/null
+++ b/src/app/[locale]/incident/components/IncidentDescriptionPage.tsx
@@ -0,0 +1,43 @@
+'use client'
+
+import { useTranslations } from 'next-intl'
+import { useFormStore } from '@/store/form_store'
+import { Heading, Paragraph, HeadingGroup, PreHeading } from '@/components'
+import { Alert, Link } from '@utrecht/component-library-react/dist/css-module'
+import { IncidentDescriptionForm } from '@/app/[locale]/incident/components/IncidentDescriptionForm'
+
+const currentStep = 1
+const maxStep = 4
+
+export const IncidentDescriptionPage = () => {
+  const t = useTranslations('describe-report')
+  const { loaded } = useFormStore()
+  const tGeneral = useTranslations('general.describe_form')
+
+  // TODO: implement nice loading state, for if loaded if false. Also create a loading state for Stepper store.
+  if (loaded) {
+    return (
+      <>
+        <div className="flex flex-col gap-4">
+          <HeadingGroup>
+            <Heading level={1}>{t('heading')}</Heading>
+            <PreHeading>
+              {tGeneral('pre-heading', { current: currentStep, max: maxStep })}
+            </PreHeading>
+          </HeadingGroup>
+          <Alert>
+            <Paragraph>
+              Lukt het niet om een melding te doen? Bel het telefoonnummer
+              <Link href="tel:14 020"> 14 020.</Link>
+            </Paragraph>
+            <Paragraph>
+              Wij zijn bereikbaar van maandag tot en met vrijdag van 08:00 tot
+              18:00 uur.
+            </Paragraph>
+          </Alert>
+          <IncidentDescriptionForm />
+        </div>
+      </>
+    )
+  }
+}
diff --git a/src/app/[locale]/incident/contact/components/IncidentContactPage.tsx b/src/app/[locale]/incident/contact/components/IncidentContactPage.tsx
new file mode 100644
index 0000000..9beff59
--- /dev/null
+++ b/src/app/[locale]/incident/contact/components/IncidentContactPage.tsx
@@ -0,0 +1,30 @@
+'use client'
+
+import { useTranslations } from 'next-intl'
+import { useFormStore } from '@/store/form_store'
+import { Heading, HeadingGroup, PreHeading } from '@/components'
+import { IncidentContactForm } from '@/app/[locale]/incident/contact/components/IncidentContactForm'
+
+const currentStep = 3
+const maxStep = 4
+
+export const IncidentContactPage = () => {
+  const t = useTranslations('describe-contact')
+  const tGeneral = useTranslations('general.describe_form')
+  const { loaded } = useFormStore()
+
+  // TODO: implement nice loading state, for if loaded if false. Also create a loading state for Stepper store.
+  if (loaded) {
+    return (
+      <div className="flex flex-col gap-4">
+        <HeadingGroup>
+          <Heading level={1}>{t('heading')}</Heading>
+          <PreHeading>
+            {tGeneral('pre-heading', { current: currentStep, max: maxStep })}
+          </PreHeading>
+        </HeadingGroup>
+        <IncidentContactForm />
+      </div>
+    )
+  }
+}
diff --git a/src/app/[locale]/incident/contact/page.tsx b/src/app/[locale]/incident/contact/page.tsx
index f4318a7..f0a44a6 100644
--- a/src/app/[locale]/incident/contact/page.tsx
+++ b/src/app/[locale]/incident/contact/page.tsx
@@ -1,6 +1,4 @@
-import { NextIntlClientProvider, useMessages, useTranslations } from 'next-intl'
-import { IncidentContactForm } from '@/app/[locale]/incident/contact/components/IncidentContactForm'
-import { Heading, HeadingGroup, PreHeading } from '@/components/index'
+import { IncidentContactPage } from '@/app/[locale]/incident/contact/components/IncidentContactPage'
 import { getTranslations } from 'next-intl/server'
 import { createTitle } from '@/lib/utils/create-title'
 import { Metadata } from 'next/types'
@@ -27,21 +25,5 @@ export async function generateMetadata(): Promise<Metadata> {
 }
 
 export default function AddContactDetailsPage() {
-  const t = useTranslations('describe-contact')
-  const tGeneral = useTranslations('general.describe_form')
-  const messages = useMessages()
-
-  return (
-    <div className="flex flex-col gap-4">
-      <HeadingGroup>
-        <Heading level={1}>{t('heading')}</Heading>
-        <PreHeading>
-          {tGeneral('pre-heading', { current: currentStep, max: maxStep })}
-        </PreHeading>
-      </HeadingGroup>
-      <NextIntlClientProvider messages={messages}>
-        <IncidentContactForm />
-      </NextIntlClientProvider>
-    </div>
-  )
+  return <IncidentContactPage />
 }
diff --git a/src/app/[locale]/incident/layout.tsx b/src/app/[locale]/incident/layout.tsx
index 387413e..bf3a271 100644
--- a/src/app/[locale]/incident/layout.tsx
+++ b/src/app/[locale]/incident/layout.tsx
@@ -14,7 +14,9 @@ export default function IncidentLayout({ children }: Layout) {
             <Stepper />
           </NextIntlClientProvider>
         </div>
-        <div className="col-span-1 md:col-span-8">{children}</div>
+        <NextIntlClientProvider messages={messages}>
+          <div className="col-span-1 md:col-span-8">{children}</div>
+        </NextIntlClientProvider>
       </div>
     </main>
   )
diff --git a/src/app/[locale]/incident/page.tsx b/src/app/[locale]/incident/page.tsx
index a667070..f071d0c 100644
--- a/src/app/[locale]/incident/page.tsx
+++ b/src/app/[locale]/incident/page.tsx
@@ -1,14 +1,5 @@
-import { NextIntlClientProvider, useMessages, useTranslations } from 'next-intl'
+import { IncidentDescriptionPage } from '@/app/[locale]/incident/components/IncidentDescriptionPage'
 import { getTranslations } from 'next-intl/server'
-import { IncidentDescriptionForm } from '@/app/[locale]/incident/components/IncidentDescriptionForm'
-import {
-  Alert,
-  Heading,
-  HeadingGroup,
-  Paragraph,
-  PreHeading,
-  Link,
-} from '@/components/index'
 import { createTitle } from '@/lib/utils/create-title'
 import { Metadata } from 'next/types'
 
@@ -42,37 +33,3 @@ export async function generateMetadata(): Promise<Metadata> {
 export default async function Home() {
   return <IncidentDescriptionPage />
 }
-
-function IncidentDescriptionPage() {
-  const t = useTranslations('describe-report')
-  const tGeneral = useTranslations('general.describe_form')
-  const errorMessage = ''
-  const messages = useMessages()
-
-  return (
-    <>
-      <div className="flex flex-col gap-4">
-        <HeadingGroup>
-          <Heading level={1}>{t('heading')}</Heading>
-          <PreHeading>
-            {tGeneral('pre-heading', { current: currentStep, max: maxStep })}
-          </PreHeading>
-        </HeadingGroup>
-        <Alert>
-          <Paragraph>
-            Lukt het niet om een melding te doen? Bel het telefoonnummer
-            <Link href="tel:14 020"> 14 020.</Link>
-          </Paragraph>
-          <Paragraph>
-            Wij zijn bereikbaar van maandag tot en met vrijdag van 08:00 tot
-            18:00 uur.
-          </Paragraph>
-        </Alert>
-
-        <NextIntlClientProvider messages={messages}>
-          <IncidentDescriptionForm />
-        </NextIntlClientProvider>
-      </div>
-    </>
-  )
-}
diff --git a/src/app/[locale]/incident/summary/components/IncidentSummaryPage.tsx b/src/app/[locale]/incident/summary/components/IncidentSummaryPage.tsx
new file mode 100644
index 0000000..80305a4
--- /dev/null
+++ b/src/app/[locale]/incident/summary/components/IncidentSummaryPage.tsx
@@ -0,0 +1,30 @@
+'use client'
+
+import { useTranslations } from 'next-intl'
+import { useFormStore } from '@/store/form_store'
+import { Heading, HeadingGroup, PreHeading } from '@/components'
+import { IncidentSummaryForm } from '@/app/[locale]/incident/summary/components/IncidentSummaryForm'
+
+const currentStep = 4
+const maxStep = 4
+
+export const IncidentSummaryPage = () => {
+  const t = useTranslations('describe-summary')
+  const tGeneral = useTranslations('general.describe_form')
+  const { loaded } = useFormStore()
+
+  // TODO: implement nice loading state, for if loaded if false. Also create a loading state for Stepper store.
+  if (loaded) {
+    return (
+      <div className="flex flex-col gap-4">
+        <HeadingGroup>
+          <Heading level={1}>{t('heading')}</Heading>
+          <PreHeading>
+            {tGeneral('pre-heading', { current: currentStep, max: maxStep })}
+          </PreHeading>
+        </HeadingGroup>
+        <IncidentSummaryForm />
+      </div>
+    )
+  }
+}
diff --git a/src/app/[locale]/incident/summary/page.tsx b/src/app/[locale]/incident/summary/page.tsx
index 507bcca..77ae3cf 100644
--- a/src/app/[locale]/incident/summary/page.tsx
+++ b/src/app/[locale]/incident/summary/page.tsx
@@ -1,6 +1,4 @@
-import { NextIntlClientProvider, useMessages, useTranslations } from 'next-intl'
-import { IncidentSummaryForm } from '@/app/[locale]/incident/summary/components/IncidentSummaryForm'
-import { Heading, HeadingGroup, PreHeading } from '@/components/index'
+import { IncidentSummaryPage } from '@/app/[locale]/incident/summary/components/IncidentSummaryPage'
 import { getTranslations } from 'next-intl/server'
 import { createTitle } from '@/lib/utils/create-title'
 import { Metadata } from 'next/types'
@@ -27,21 +25,5 @@ export async function generateMetadata(): Promise<Metadata> {
 }
 
 export default function SummaryDetailsPage() {
-  const t = useTranslations('describe-summary')
-  const tGeneral = useTranslations('general.describe_form')
-  const messages = useMessages()
-
-  return (
-    <div className="flex flex-col gap-4">
-      <HeadingGroup>
-        <Heading level={1}>{t('heading')}</Heading>
-        <PreHeading>
-          {tGeneral('pre-heading', { current: currentStep, max: maxStep })}
-        </PreHeading>
-      </HeadingGroup>
-      <NextIntlClientProvider messages={messages}>
-        <IncidentSummaryForm />
-      </NextIntlClientProvider>
-    </div>
-  )
+  return <IncidentSummaryPage />
 }
diff --git a/src/app/globals.css b/src/app/globals.css
index 2f4c7a6..9ec0b5f 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -68,4 +68,9 @@
     left: 29px;
     border-radius: 50%;
     border: 1px solid rgb(0, 32, 92);
+}
+
+/* map */
+.map-marker-icon {
+    --utrecht-icon-size: 42px;
 }
\ No newline at end of file
diff --git a/src/components/index.ts b/src/components/index.ts
index e6085be..df209d4 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -6,8 +6,10 @@ export { Select, Container }
 export {
   Alert,
   Heading,
+  Button,
   HeadingGroup,
   Link,
   Paragraph,
   PreHeading,
+  Icon,
 } from '@utrecht/component-library-react/dist/css-module'
diff --git a/src/components/ui/LocationMap.tsx b/src/components/ui/LocationMap.tsx
index 3209734..a261cb0 100644
--- a/src/components/ui/LocationMap.tsx
+++ b/src/components/ui/LocationMap.tsx
@@ -1,16 +1,17 @@
 import Map, { Marker, ViewState } from 'react-map-gl/maplibre'
 import 'maplibre-gl/dist/maplibre-gl.css'
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
 import { useFormStore } from '@/store/form_store'
+import { useConfig } from '@/hooks/useConfig'
+import { IconMapPinFilled } from '@tabler/icons-react'
+import { Icon } from '@/components/index'
 
-/* TODO: Use center coordinates as configured in config.json */
 const LocationMap = () => {
   const { formState } = useFormStore()
+  const { config, loading } = useConfig()
   const [viewState, setViewState] = useState<ViewState>({
-    longitude:
-      formState.coordinates[0] !== 0 ? formState.coordinates[0] : 5.10448,
-    latitude:
-      formState.coordinates[1] !== 0 ? formState.coordinates[1] : 52.092876,
+    latitude: 0,
+    longitude: 0,
     zoom: 14,
     bearing: 0,
     padding: {
@@ -22,34 +23,63 @@ const LocationMap = () => {
     pitch: 0,
   })
 
-  const marker = formState.coordinates
-
+  // Set viewState coordinates to configured ones
   useEffect(() => {
-    if (formState.coordinates[0] !== 0 && formState.coordinates[1] !== 0) {
+    if (!loading && config) {
       setViewState({
         ...viewState,
-        longitude: formState.coordinates[0],
-        latitude: formState.coordinates[1],
+        latitude:
+          formState.coordinates[0] === 0
+            ? config.base.map.center[0]
+            : formState.coordinates[0],
+        longitude:
+          formState.coordinates[1] === 0
+            ? config.base.map.center[1]
+            : formState.coordinates[1],
       })
     }
+  }, [loading, config, formState.coordinates])
+
+  // Memoize marker coordinates, dependent on formState.coordinates
+  const marker = useMemo(() => {
+    return [formState.coordinates[0], formState.coordinates[1]]
   }, [formState.coordinates])
 
-  return (
-    <Map
-      {...viewState}
-      scrollZoom={false}
-      doubleClickZoom={false}
-      dragPan={false}
-      keyboard={false}
-      onMove={(evt) => setViewState(evt.viewState)}
-      style={{ width: '100%', height: 200 }}
-      mapStyle={`${process.env.NEXT_PUBLIC_MAPTILER_MAP}/style.json?key=${process.env.NEXT_PUBLIC_MAPTILER_API_KEY}`}
-    >
-      {marker[0] !== 0 && marker[1] !== 0 ? (
-        <Marker longitude={marker[0]} latitude={marker[1]}></Marker>
-      ) : null}
-    </Map>
-  )
+  // Update viewState, to move map view with marker
+  useEffect(() => {
+    setViewState({
+      ...viewState,
+      latitude: marker[0],
+      longitude: marker[1],
+    })
+  }, [marker])
+
+  // TODO: Implement state if loading, and no config is found
+  if (!loading && config) {
+    return (
+      <Map
+        {...viewState}
+        id="locationMap"
+        scrollZoom={false}
+        doubleClickZoom={false}
+        dragPan={false}
+        keyboard={false}
+        onMove={(evt) => setViewState(evt.viewState)}
+        style={{ width: '100%', height: 200 }}
+        mapStyle={`${process.env.NEXT_PUBLIC_MAPTILER_MAP}/style.json?key=${process.env.NEXT_PUBLIC_MAPTILER_API_KEY}`}
+        attributionControl={false}
+      >
+        <Marker latitude={marker[0]} longitude={marker[1]}>
+          <Icon className="map-marker-icon">
+            <IconMapPinFilled
+              className="-translate-y-1/2"
+              color={config.base.style.primaryColor}
+            />
+          </Icon>
+        </Marker>
+      </Map>
+    )
+  }
 }
 
 export { LocationMap }
diff --git a/src/lib/utils/map.ts b/src/lib/utils/map.ts
new file mode 100644
index 0000000..a1207f4
--- /dev/null
+++ b/src/lib/utils/map.ts
@@ -0,0 +1,8 @@
+export const isCoordinates = (arg: unknown): arg is [number, number] => {
+  return (
+    Array.isArray(arg) &&
+    arg.length === 2 &&
+    typeof arg[0] === 'number' &&
+    typeof arg[1] === 'number'
+  )
+}
diff --git a/src/services/config/config.ts b/src/services/config/config.ts
index da74c84..9bc2311 100644
--- a/src/services/config/config.ts
+++ b/src/services/config/config.ts
@@ -8,7 +8,7 @@ import defaultConfiguration from '../../../config.json'
 export async function getServerConfig() {
   const CONFIG_PATH = path.join(process.cwd(), 'config.json')
 
-  let json: AppConfig = defaultConfiguration
+  let json: AppConfig = defaultConfiguration as AppConfig
 
   try {
     const fileBuffer = await fs.readFile(CONFIG_PATH, 'utf8')
diff --git a/src/services/location/address.ts b/src/services/location/address.ts
index c2de1d8..ab52bda 100644
--- a/src/services/location/address.ts
+++ b/src/services/location/address.ts
@@ -1,6 +1,6 @@
 import { axiosInstance } from '@/services/client/api-client'
 import { AxiosResponse } from 'axios'
-import { AddressSuggestResponse } from '@/types/pdok'
+import { AddressCoordinateResponse, AddressSuggestResponse } from '@/types/pdok'
 
 export const getSuggestedAddresses = async (
   searchQuery: string,
@@ -18,3 +18,23 @@ export const getSuggestedAddresses = async (
     throw new Error('Could not fetch suggested addresses. Please try again.')
   }
 }
+
+export const getNearestAddressByCoordinate = async (
+  lat: number,
+  lng: number,
+  distance: number
+) => {
+  const axios = axiosInstance(process.env.NEXT_PUBLIC_PDOK_URL_API)
+
+  try {
+    const response: AxiosResponse<AddressCoordinateResponse> = await axios.get(
+      `/search/v3_1/reverse?lat=${lat}&lon=${lng}&distance=${distance}`
+    )
+
+    return response.data.response.docs.sort(
+      (docA, docB) => docA.afstand - docB.afstand
+    )[0]
+  } catch (error) {
+    throw new Error('Could not fetch address by coordinate. Please try again.')
+  }
+}
diff --git a/src/store/form_store.ts b/src/store/form_store.ts
index acc60e1..2438a77 100644
--- a/src/store/form_store.ts
+++ b/src/store/form_store.ts
@@ -21,15 +21,22 @@ const useFormStore = create<FormStore>()(
       formState: {
         ...initialFormState,
       },
+      loaded: false,
       updateForm: (obj) =>
         set((state) => {
           state.formState = obj
         }),
       resetForm: () => set(() => ({ formState: initialFormState })),
+      setLoaded: () => set(() => ({ loaded: true })),
     })),
     {
       name: 'form',
       storage: createJSONStorage(() => sessionStorage),
+      onRehydrateStorage: () => (state) => {
+        if (state) {
+          state.setLoaded()
+        }
+      },
     }
   )
 )
diff --git a/src/tests/vitest.setup.ts b/src/tests/vitest.setup.ts
index f533ae7..27d0af2 100644
--- a/src/tests/vitest.setup.ts
+++ b/src/tests/vitest.setup.ts
@@ -1,9 +1,11 @@
-import { expect, afterEach } from 'vitest'
+import { expect, afterEach, vitest } from 'vitest'
 import { cleanup } from '@testing-library/react'
 import * as matchers from '@testing-library/jest-dom/matchers'
 
 expect.extend(matchers)
 
+window.URL.createObjectURL = vitest.fn()
+
 afterEach(() => {
   cleanup()
 })
diff --git a/src/types/config.ts b/src/types/config.ts
index f66ff15..eb312a3 100644
--- a/src/types/config.ts
+++ b/src/types/config.ts
@@ -1,5 +1,13 @@
 export type AppConfig = {
   base: {
     municipality: string
+    style: {
+      primaryColor: string
+    }
+    map: {
+      find_address_in_distance: number
+      center: [number, number]
+      maxBounds: [[number, number], [number, number]]
+    }
   }
 }
diff --git a/src/types/pdok.ts b/src/types/pdok.ts
index 65f0a5d..7bbcd71 100644
--- a/src/types/pdok.ts
+++ b/src/types/pdok.ts
@@ -16,3 +16,21 @@ export type AddressSuggestDoc = {
   centroide_ll: string
   straatnaam: string
 }
+
+export type AddressCoordinateResponse = {
+  response: {
+    numFound: number
+    start: number
+    maxScore: number
+    numFoundExact: boolean
+    docs: Array<AddressCoordinateDoc>
+  }
+}
+
+export type AddressCoordinateDoc = {
+  afstand: number
+  id: string
+  score: number
+  type: string
+  weergavenaam: string
+}
diff --git a/src/types/stores.ts b/src/types/stores.ts
index 0df6a53..ba7c58b 100644
--- a/src/types/stores.ts
+++ b/src/types/stores.ts
@@ -22,9 +22,11 @@ type FormStoreState = {
 }
 
 type FormStore = {
+  loaded: boolean
   formState: FormStoreState
   updateForm: (obj: FormStoreState) => void
   resetForm: () => void
+  setLoaded: () => void
 }
 
 type StepperStore = {
diff --git a/translations/en.json b/translations/en.json
index b5f3f7d..2567e37 100644
--- a/translations/en.json
+++ b/translations/en.json
@@ -99,7 +99,8 @@
     "errors": {
       "required": "This field is required",
       "max_length": "This field has a maximal length of {maxLength} characters",
-      "not_required_short": "not required"
+      "not_required_short": "not required",
+      "location_required": "Location is required"
     },
     "button": {
       "upload_file": "Upload file",
diff --git a/translations/nl.json b/translations/nl.json
index d834480..7e157ca 100644
--- a/translations/nl.json
+++ b/translations/nl.json
@@ -99,7 +99,8 @@
     "errors": {
       "required": "Dit veld is verplicht",
       "max_length": "Dit veld heeft een maximale lengte van {maxLength} karakters",
-      "not_required_short": "niet verplicht"
+      "not_required_short": "niet verplicht",
+      "location_required": "Locatie is verplicht"
     },
     "button": {
       "upload_file": "Upload bestand",