diff --git a/components/pages/WebsiteDetails.js b/components/pages/WebsiteDetails.js
index 0ddc89e2..dd8034fc 100644
--- a/components/pages/WebsiteDetails.js
+++ b/components/pages/WebsiteDetails.js
@@ -82,6 +82,14 @@ export default function WebsiteDetails({ websiteId }) {
       label: <FormattedMessage id="metrics.countries" defaultMessage="Countries" />,
       value: resolve({ view: 'country' }),
     },
+    {
+      label: <FormattedMessage id="metrics.region" defaultMessage="Region" />,
+      value: resolve({ view: 'region' }),
+    },
+    {
+      label: <FormattedMessage id="metrics.city" defaultMessage="City" />,
+      value: resolve({ view: 'city' }),
+    },
     {
       label: <FormattedMessage id="metrics.events" defaultMessage="Events" />,
       value: resolve({ view: 'event' }),
diff --git a/lib/request.js b/lib/request.js
index 02dabb1d..96d1e0de 100644
--- a/lib/request.js
+++ b/lib/request.js
@@ -1,7 +1,8 @@
 import requestIp from 'request-ip';
 import { browserName, detectOS } from 'detect-browser';
 import isLocalhost from 'is-localhost-ip';
-import geoip from 'fast-geoip';
+import { WebServiceClient } from '@maxmind/geoip2-node';
+const client = new WebServiceClient(process.env.MAXMIND_ID, process.env.MAXMIND_KEY);
 
 import {
   DESKTOP_OS,
@@ -59,12 +60,12 @@ export async function getLocation(req, ip) {
     return;
   }
 
-  const result = await geoip.lookup(ip);
+  const result = await client.city(ip);
 
   return {
-    country: result?.country,
-    region: result?.region,
-    city: result?.city,
+    country: result?.country.isoCode,
+    region: result?.subdivisions?.[0]?.names?.en,
+    city: result?.city?.names?.en,
   };
 }