diff --git a/src/app/contacts/[country]/page.tsx b/src/app/contacts/[country]/page.tsx
index b7eb476..cc44cde 100644
--- a/src/app/contacts/[country]/page.tsx
+++ b/src/app/contacts/[country]/page.tsx
@@ -1,17 +1,7 @@
 import Footer from "@/components/Footer";
 import Navbar from "@/components/Navbar";
 import Title from "@/components/Title";
-import contacts from "../../../contacts.json";
-
-interface Contact {
-  key: string;
-  label: string;
-  entries: {
-    name: string;
-    number: string;
-    email: string;
-  }[];
-}
+import { Contact } from "@/types/contact";
 
 type Language = "en" | "ar";
 
@@ -25,7 +15,19 @@ interface PageProps {
   };
 }
 
-export function generateStaticParams() {
+async function getCountryManagers(country: string) {
+  const res = await fetch(`${process.env.NEXT_PUBLIC_APP_URL}/api/users/agents/${country}`);
+
+  if(!res.ok) {
+    throw new Error("Failed to fetch contacts");
+  }
+
+  return res.json();
+}
+
+export async function generateStaticParams() {
+  const contacts = await fetch(`${process.env.NEXT_PUBLIC_APP_URL}/api/users/agents`).then((res) => res.json()) as Contact[];
+
   // down the line, this is required to be loaded from a CMS
   // for now, we'll just use a JSON file
 
@@ -35,15 +37,11 @@ export function generateStaticParams() {
   }));
 }
 
-export default function Page({
+export default async function Page({
   params: { country },
   searchParams: { page = "/contacts", language = "en" },
 }: PageProps) {
-  // this approach will not be viable later on when we have multiple languages
-  // or use the data from the server
-  // replace this with a fetch to the CMS
-  const contact = contacts.find(({ key }) => key === country) as Contact;
-
+  const contact = await getCountryManagers(country) as Contact;
   return (
     <main className="text-mti-black flex h-screen w-full flex-col bg-white">
       <Navbar currentPage={page} language={language} />
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 5712904..654283c 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -9,8 +9,7 @@ import { Fragment, useEffect, useState } from "react";
 import { Dialog, Menu, Transition } from "@headlessui/react";
 import { useRouter } from "next/navigation";
 import translation from "@/translation/navbar.json";
-import contacts from "@/contacts.json";
-
+import { Contact } from "@/types/contact";
 interface Item {
   page: string;
   key: string;
@@ -21,22 +20,15 @@ interface Item {
 
 }
 
-const items = [
-  { page: "/", key: "home" },
-  { page: "/services", key: "services" },
-  { page: "/price", key: "price" },
-  { page: "/about", key: "about" },
-  { page: "/history", key: "history" },
-  { page: "/contact", key: "contact" },
-  {
-    key: "country_manager",
-    page: "/contacts",
-    entries: contacts.map((data) => ({
-      key: data.key,
-      label: data.label,
-    })),
-  },
-] as Item[];
+async function getCountryManagers() {
+  const res = await fetch(`${process.env.NEXT_PUBLIC_APP_URL}/api/users/agents`);
+
+  if(!res.ok) {
+    throw new Error("Failed to fetch contacts");
+  }
+
+  return res.json();
+}
 
 export default function Navbar({
   currentPage,
@@ -45,6 +37,34 @@ export default function Navbar({
   currentPage: string;
   language: "en" | "ar";
 }) {
+
+  const [contacts, setContacts] = useState([]);
+
+  useEffect(() => {
+    getCountryManagers()
+      .then((contacts) => setContacts(contacts.map((data: Contact) => ({
+        key: data.key,
+        label: data.label,
+      }))))
+      .catch(console.error);
+  }, []);
+
+  const items = [
+    { page: "/", key: "home" },
+    { page: "/services", key: "services" },
+    { page: "/price", key: "price" },
+    { page: "/about", key: "about" },
+    { page: "/history", key: "history" },
+    { page: "/contact", key: "contact" },
+    {
+      key: "country_manager",
+      page: "/contacts",
+      entries: contacts,
+    },
+  ] as Item[];
+
+  
+
   const [isOpen, setIsOpen] = useState(false);
 
   const renderItem = (item: Item, className: string) => {
diff --git a/src/contacts.json b/src/contacts.json
deleted file mode 100644
index f69e645..0000000
--- a/src/contacts.json
+++ /dev/null
@@ -1,36 +0,0 @@
-[
-  {
-    "label": "Egypt",
-    "key": "egypt",
-    "entries": [
-      {
-        "name": "Modern Technology",
-        "number": "+226578480830",
-        "email": "egypt@encoach.com"
-      }
-    ]
-  },
-  {
-    "label": "Oman",
-    "key": "oman",
-    "entries": [
-      {
-        "name": "Smartway education",
-        "number": "+9689944094",
-        "email": "oman@encoach.com"
-      },
-      { "name": "MTI", "number": "+9687445609", "email": "mti@encoach.com" }
-    ]
-  },
-  {
-    "label": "Saudi Arabia",
-    "key": "saudiarabia",
-    "entries": [
-      {
-        "name": "Edutrach services",
-        "number": "+96658499347",
-        "email": "edu@encoach.com"
-      }
-    ]
-  }
-]
diff --git a/src/types/contact.ts b/src/types/contact.ts
new file mode 100644
index 0000000..e30201f
--- /dev/null
+++ b/src/types/contact.ts
@@ -0,0 +1,9 @@
+export interface Contact {
+    key: string;
+    label: string;
+    entries: {
+      name: string;
+      number: string;
+      email: string;
+    }[];
+  }
\ No newline at end of file