diff --git a/src/app/[locale]/contact-us/page.tsx b/src/app/[locale]/contact-us/page.tsx
index b8657bd..4f9ea00 100644
--- a/src/app/[locale]/contact-us/page.tsx
+++ b/src/app/[locale]/contact-us/page.tsx
@@ -1,16 +1,12 @@
 import images from '@/assets/images/images';
 import InnerPageBanner from '@/components/layout/innerPages/banner';
+import ContactMap from '@/components/layout/map/MapWrapper';
 import ContactForm from '@/components/pages/contact/ContactMeForm';
 import TouchUs from '@/components/pages/contact/TouchUs';
 import Image from 'next/image';
-import dynamic from 'next/dynamic';
 import { getTranslations, setRequestLocale } from 'next-intl/server';
 import { IPageParams } from '@/models/layout';
 
-const ContactMap = dynamic(() => import('@/components/layout/map'), {
-  ssr: false,
-});
-
 export async function generateMetadata({ params }: { params: IPageParams }) {
   const { locale } = await params;
   setRequestLocale(locale);
diff --git a/src/components/layout/map/MapWrapper.tsx b/src/components/layout/map/MapWrapper.tsx
new file mode 100644
index 0000000..61ca929
--- /dev/null
+++ b/src/components/layout/map/MapWrapper.tsx
@@ -0,0 +1,7 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+
+const ContactMap = dynamic(() => import('./index'), { ssr: false });
+
+export default ContactMap;