diff --git a/.vscode/settings.json b/.vscode/settings.json
index 1719b8d..60cd1bf 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -13,18 +13,14 @@
     "editor.defaultFormatter": "dbaeumer.vscode-eslint"
   },
   "[typescript]": {
-    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
-  "eslint.validate": [
-    "javascript",
-    "typescript",
-    "vue"
-  ],
+  "eslint.validate": ["javascript", "typescript", "vue"],
   // Tailwind Support, see https://tailwindcss.nuxt.dev/tailwind/editor-support
   "tailwindCSS.experimental.configFile": ".nuxt/tailwind.config.cjs",
   "files.associations": {
     "*.css": "tailwindcss"
   },
   // Auto-complete `.value` attribute when volar is installed
-  "volar.autoCompleteRefs": true,
+  "volar.autoCompleteRefs": true
 }
diff --git a/docker-compose.yml b/docker-compose.yml
index e81b054..7a71aee 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -4,11 +4,22 @@ services:
     image: postgres
     volumes:
       - postgres-data:/var/lib/postgresql/data
+    environment:
+      POSTGRES_DB: db
+      POSTGRES_USER: user
+      POSTGRES_PASSWORD: password
+
+  postgis:
+    image: postgis/postgis
+    volumes:
+      - postgis-data:/var/lib/postgis/data
     ports:
       - 5432:5432
     environment:
       POSTGRES_DB: db
       POSTGRES_USER: user
       POSTGRES_PASSWORD: password
+
 volumes:
   postgres-data:
+  postgis-data:
diff --git a/pages/[username].vue b/pages/[username].vue
index 16eff0c..9eb4353 100644
--- a/pages/[username].vue
+++ b/pages/[username].vue
@@ -1,15 +1,22 @@
 <script setup lang="ts">
-const { username } = useRoute().params
-const { data: profile } = useFetch(`/api/profiles/${username}`)
+const { username, lng, lat, distance } = useRoute().params;
+const { data: profile } = useFetch(`/api/profiles/${username}`);
 
-const { data: events } = useFetch('/api/events', {
+const { data: events } = useFetch("/api/events", {
   query: {
-    username
-  }
-})
+    username,
+    distance,
+    lng: lng || null,
+    lat: lat || null,
+  },
+});
 </script>
 
 <template>
-  <CityProfile v-if="profile.type === 'City'" :profile="profile" :events="events" />
+  <CityProfile
+    v-if="profile.type === 'City'"
+    :profile="profile"
+    :events="events"
+  />
   <pre v-else>{{ profile }}</pre>
 </template>
diff --git a/server/api/events/index.ts b/server/api/events/index.ts
index b777cbe..e4a9dc5 100644
--- a/server/api/events/index.ts
+++ b/server/api/events/index.ts
@@ -1,29 +1,31 @@
-import { getQuery } from 'h3'
+import { getQuery } from "h3";
+import { PrismaClient } from "@prisma/client";
 
-export default defineEventHandler((event) => {
-  const { username } = getQuery(event)
+const prisma = new PrismaClient();
 
-  return event.context.prisma.event.findMany({
-    where: {
-      startDate: {
-        gte: new Date()
-      },
-      venue: {
-        city: {
-          username
-        }
-      }
-    },
-    include: {
-      venue: true,
-      organizer: true,
-      styles: true
-    },
-    orderBy: [
-      {
-        startDate: 'asc'
-      }
-    ],
-    take: 10
-  })
-})
+export default defineEventHandler(async (event) => {
+  const {
+    lng: longitude,
+    lat: latitude,
+    distance: distanceInKm,
+  } = getQuery(event);
+
+  const lng = Number(longitude);
+  const lat = Number(latitude);
+  const distance = Number(distanceInKm);
+
+  const events = await prisma.$queryRaw`
+  SELECT *
+  FROM "Event"
+  WHERE "venueId" IN (
+    SELECT "Profile"."id"
+    FROM "Profile"
+    WHERE ST_Distance(
+      ST_MakePoint(${lng}, ${lat})::geography,
+      ST_MakePoint("Profile"."lng", "Profile"."lat")::geography
+    ) <= (${distance} * 80000)
+  );
+  `;
+
+  return events;
+});