diff --git a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/monitors/[id]/data/_components/chart-wrapper.tsx b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/monitors/[id]/data/_components/chart-wrapper.tsx
index f194a70a..84b9689a 100644
--- a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/monitors/[id]/data/_components/chart-wrapper.tsx
+++ b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/monitors/[id]/data/_components/chart-wrapper.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import type { Ping, Region } from "@openstatus/tinybird";
+import { regionsDict } from "@openstatus/utils";
 
 import type { Period } from "../utils";
 import { Chart } from "./chart";
@@ -23,18 +24,20 @@ export function ChartWrapper({
  */
 function groupDataByTimestamp(data: Ping[], period: Period) {
   let currentTimestamp = 0;
-  const regions: Partial<Record<Region, null>> = {};
+  const regions: Record<string, null> = {};
   const _data = data.reduce(
     (acc, curr) => {
       const { cronTimestamp, latency, region } = curr;
-      regions[region] = null; // to get the region keys
+      const { flag, code } = regionsDict[region];
+      const fullNameRegion = `${flag} ${code}`;
+      regions[fullNameRegion] = null; // to get the region keys
       if (cronTimestamp === currentTimestamp) {
         // overwrite last object in acc
         const last = acc.pop();
         if (last) {
           acc.push({
             ...last,
-            [region]: latency,
+            [fullNameRegion]: latency,
           });
         }
       } else if (cronTimestamp) {
@@ -42,14 +45,15 @@ function groupDataByTimestamp(data: Ping[], period: Period) {
         // create new object in acc
         acc.push({
           timestamp: renderTimestamp(cronTimestamp, period),
-          [region]: latency,
+          [fullNameRegion]: latency,
         });
       }
       return acc;
     },
     [] as (Partial<Record<Region, string>> & { timestamp: string })[],
   );
-  return { regions: Object.keys(regions) as Region[], data: _data.reverse() };
+
+  return { regions: Object.keys(regions), data: _data.reverse() };
 }
 
 /**
diff --git a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/monitors/[id]/data/_components/chart.tsx b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/monitors/[id]/data/_components/chart.tsx
index f7e3a018..c33d7191 100644
--- a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/monitors/[id]/data/_components/chart.tsx
+++ b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/monitors/[id]/data/_components/chart.tsx
@@ -2,14 +2,12 @@
 
 import { Card, LineChart, Title } from "@tremor/react";
 
-import type { Region } from "@openstatus/tinybird";
-
 const dataFormatter = (number: number) =>
   `${Intl.NumberFormat("us").format(number).toString()}ms`;
 
 interface ChartProps {
-  data: (Partial<Record<Region, string>> & { timestamp: string })[];
-  regions: Region[];
+  data: { timestamp: string; [key: string]: string }[];
+  regions: string[];
 }
 
 export function Chart({ data, regions }: ChartProps) {
diff --git a/packages/utils/index.ts b/packages/utils/index.ts
index 5c12d469..e52c112f 100644
--- a/packages/utils/index.ts
+++ b/packages/utils/index.ts
@@ -10,130 +10,154 @@ export const vercelRegionsDict = {
     code: "auto",
     name: "random",
     location: "Random",
+    flag: "🌍",
   },
   arn1: {
     code: "arn1",
     name: "eu-north-1",
     location: "Stockholm, Sweden",
+    flag: "🇸🇪",
   },
   bom1: {
     code: "bom1",
     name: "ap-south-1",
     location: "Mumbai, India",
+    flag: "🇮🇳",
   },
   cdg1: {
     code: "cdg1",
     name: "eu-west-3",
     location: "Paris, France",
+    flag: "🇫🇷",
   },
   cle1: {
     code: "cle1",
     name: "us-east-2",
     location: "Cleveland, USA",
+    flag: "🇺🇸",
   },
   cpt1: {
     code: "cpt1",
     name: "af-south-1",
     location: "Cape Town, South Africa",
+    flag: "🇿🇦",
   },
   dub1: {
     code: "dub1",
     name: "eu-west-1",
     location: "Dublin, Ireland",
+    flag: "🇮🇪",
   },
   fra1: {
     code: "fra1",
     name: "eu-central-1",
     location: "Frankfurt, Germany",
+    flag: "🇩🇪",
   },
   gru1: {
     code: "gru1",
     name: "sa-east-1",
     location: "São Paulo, Brazil",
+    flag: "🇧🇷",
   },
   hkg1: {
     code: "hkg1",
     name: "ap-east-1",
     location: "Hong Kong",
+    flag: "🇭🇰",
   },
   hnd1: {
     code: "hnd1",
     name: "ap-northeast-1",
     location: "Tokyo, Japan",
+    flag: "🇯🇵",
   },
   iad1: {
     code: "iad1",
     name: "us-east-1",
     location: "Washington, D.C., USA",
+    flag: "🇺🇸",
   },
   icn1: {
     code: "icn1",
     name: "ap-northeast-2",
     location: "Seoul, South Korea",
+    flag: "🇰🇷",
   },
   kix1: {
     code: "kix1",
     name: "ap-northeast-3",
     location: "Osaka, Japan",
+    flag: "🇯🇵",
   },
   lhr1: {
     code: "lhr1",
     name: "eu-west-2",
     location: "London, United Kingdom",
+    flag: "🇬🇧",
   },
   pdx1: {
     code: "pdx1",
     name: "us-west-2",
     location: "Portland, USA",
+    flag: "🇺🇸",
   },
   sfo1: {
     code: "sfo1",
     name: "us-west-1",
     location: "San Francisco, USA",
+    flag: "🇺🇸",
   },
   sin1: {
     code: "sin1",
     name: "ap-southeast-1",
     location: "Singapore",
+    flag: "🇸🇬",
   },
   syd1: {
     code: "syd1",
     name: "ap-southeast-2",
     location: "Sydney, Australia",
+    flag: "🇦🇺",
   },
 } as const;
 
 export const flyRegionsDict = {
   ams: {
     code: "ams",
-    name: "ap-southeast-2",
+    name: "",
     location: "Amsterdam, Netherlands",
+    flag: "🇳🇱",
   },
   iad: {
     code: "iad",
     name: "us-east-1",
     location: "Ashburn, Virginia, USA",
+    flag: "🇺🇸",
   },
   jnb: {
     code: "jnb",
     name: "",
     location: "Johannesburg, South Africa",
+    flag: "🇿🇦",
   },
   hkg: {
     code: "hkg",
     name: "",
     location: "Hong Kong, Hong Kong",
+    flag: "🇭🇰",
   },
   gru: {
     code: "gru",
     name: "",
     location: "Sao Paulo, Brazil",
+    flag: "🇧🇷",
   },
-
   syd: {
     code: "syd",
-    name: "ap-southeast-2",
+    name: "",
     location: "Sydney, Australia",
+    flag: "🇦🇺",
   },
 } as const;