diff --git a/app/components/layout/Header/HeaderTop.tsx b/app/components/layout/Header/HeaderTop.tsx
index 6e20811..87b85d9 100644
--- a/app/components/layout/Header/HeaderTop.tsx
+++ b/app/components/layout/Header/HeaderTop.tsx
@@ -1,8 +1,56 @@
-import Link from 'next/link';
-import headerData from './header.json';
+"use client";
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import headerData from "./header.json";
+
+interface HeaderData {
+    top: {
+        phone: string;
+        email: string;
+        location: string;
+        socialLinks: Array<{
+            platform: string;
+            url: string;
+            icon: string;
+        }>;
+        languages: Array<{
+            name: string;
+            value: string;
+        }>;
+    };
+}
 
 const HeaderTop = () => {
-    const { phone, email, location, socialLinks, languages } = headerData.top;
+    const [data, setData] = useState<HeaderData>(headerData);
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        const fetchHeaderData = async () => {
+            try {
+                const apiUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:3000";
+                const response = await fetch(`${apiUrl}/api/header`);
+
+                if (response.ok) {
+                    const result = await response.json();
+                    if (result.success && result.data && result.data.top) {
+                        setData({
+                            top: result.data.top,
+                        });
+                    }
+                }
+            } catch (error) {
+                console.warn("Failed to fetch header data from API, using fallback:", error);
+                // Use fallback data (already set as initial state)
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        fetchHeaderData();
+    }, []);
+
+    const { phone, email, location, socialLinks, languages } = data.top;
 
     return (
         <div className="header-top-section">
@@ -13,7 +61,7 @@ const HeaderTop = () => {
                             <li className="style-2 d-flex align-items-center me-4">
                                 <span className="me-2">Help Line</span>
                                 <i className="fa-solid fa-phone me-2"></i>
-                                <a href={`tel:${phone.replace(/\s/g, '')}`}>{phone}</a>
+                                <a href={`tel:${phone.replace(/\s/g, "")}`}>{phone}</a>
                             </li>
 
                             <li className="d-flex align-items-center me-4">
@@ -34,15 +82,13 @@ const HeaderTop = () => {
                                 <i className="fa-solid fa-globe"></i>
                             </div>
                             <div className="nice-select" tabIndex={0}>
-                                <span className="current">
-                                    {languages[0]?.name || 'English'}
-                                </span>
+                                <span className="current">{languages[0]?.name || "English"}</span>
                                 <ul className="list">
                                     {languages.map((lang, index) => (
                                         <li
                                             key={index}
                                             data-value={lang.value}
-                                            className={`option ${index === 0 ? 'selected focus' : ''}`}
+                                            className={`option ${index === 0 ? "selected focus" : ""}`}
                                         >
                                             {lang.name}
                                         </li>