diff --git a/src/App.jsx b/src/App.jsx
index c6edf53..09c7a62 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -5,17 +5,27 @@ import FormSection from "./components/contact/FormSection"
 import SolusiPersonal from "./pages/SolusiPersonal"
 import SolusiStartup from "./pages/SolusiStartup"
 import SolusiCorporate from "./pages/SolusiCorporate"
-
+import NotFound from "./components/NotFound/NotFound"
+import Header from './components/beranda/Header';
+import WhatsAppButton from './components/beranda/WhatsAppButon';
 function App() {
   return (
     <Router>
       <Routes>
-        <Route path='/' element={<Home/>}/>
-        <Route path='/Contact' element={<Contact/>}/>
-        <Route path='/FormSection' element={<FormSection/>}/>
-        <Route path='/SolusiPersonal' element={<SolusiPersonal/>}/>
-        <Route path='/SolusiStartup' element={<SolusiStartup/>}/>
-        <Route path='/SolusiCorporate' element={<SolusiCorporate/>}/>
+        <Route path='/' element={<Home />} />
+        <Route path='/Contact' element={<Contact />} />
+        <Route path='/FormSection' element={<FormSection />} />
+        <Route path='/SolusiPersonal' element={<SolusiPersonal />} />
+        <Route path='/SolusiStartup' element={<SolusiStartup />} />
+        <Route path='/SolusiCorporate' element={<SolusiCorporate />} />
+        <Route path='/004' element={
+          <>
+            <Header />
+            <NotFound />
+            <WhatsAppButton/>
+          </>
+
+        } />
       </Routes>
     </Router>
 
diff --git a/src/components/NotFound/NotFound.jsx b/src/components/NotFound/NotFound.jsx
new file mode 100644
index 0000000..746776c
--- /dev/null
+++ b/src/components/NotFound/NotFound.jsx
@@ -0,0 +1,14 @@
+import { logonf } from "./asset";
+
+
+const NotFound = () => {
+    return (
+        <div className="justify-center text-center items-center flex flex-col mt-32 gap-4">
+            <img src={logonf} alt="404" />
+            <h1 className="font-bold text-[1.5rem]">Halaman Dalam Proses Pengembangan</h1>
+            <p className="text-[1rem] font-medium w-[50rem]">Terima kasih atas kunjungan Anda! Halaman ini sedang dalam tahap pengembangan untuk memberikan pengalaman terbaik. Nantikan segera pembaruan dari kami! </p>
+        </div>
+    );
+};
+
+export default NotFound;
\ No newline at end of file
diff --git a/src/components/NotFound/asset/Black Blue and Pink Modern Twibbon Instagram Post 1.png b/src/components/NotFound/asset/Black Blue and Pink Modern Twibbon Instagram Post 1.png
new file mode 100644
index 0000000..dfff908
Binary files /dev/null and b/src/components/NotFound/asset/Black Blue and Pink Modern Twibbon Instagram Post 1.png differ
diff --git a/src/components/NotFound/asset/index.js b/src/components/NotFound/asset/index.js
new file mode 100644
index 0000000..6957104
--- /dev/null
+++ b/src/components/NotFound/asset/index.js
@@ -0,0 +1,4 @@
+import logonf from './Black Blue and Pink Modern Twibbon Instagram Post 1.png';
+
+
+export {  logonf,  }
\ No newline at end of file
diff --git a/src/components/beranda/Header.jsx b/src/components/beranda/Header.jsx
index 339eada..2e7567e 100644
--- a/src/components/beranda/Header.jsx
+++ b/src/components/beranda/Header.jsx
@@ -95,13 +95,13 @@ const Header = () => {
             </button>
 
             {isProdukOpen && (
-              <div className="absolute left-[448px] -translate-x-1/2 top-full md:top-11 mt-2 w-[1450px]">
+              <div className="absolute md:left-[350px] 2xl:left-[448px] -translate-x-1/2 top-full md:top-11 mt-2 w-[1450px]">
                 <div className="bg-customRed bg-opacity-80 rounded-xl p-8">
                   <div className="flex justify-center gap-8">
                     {/* HR */}
                     <button
                       onClick={() => {
-                        navigate("/SolusiPersonal");
+                        navigate("/004");
                         window.scrollTo({ top: 0, behavior: "smooth" });
                       }}
                       className="bg-white rounded-xl w-[282px] p-4 flex items-start gap-4 hover:bg-gray-100"
@@ -118,7 +118,7 @@ const Header = () => {
                     {/* DOKU */}
                     <button
                       onClick={() => {
-                        navigate("/SolusiStartup");
+                        navigate("/004");
                         window.scrollTo({ top: 0, behavior: "smooth" });
                       }}
                       className="bg-white rounded-xl w-[282px] p-4 flex items-start gap-4 hover:bg-gray-100"
@@ -135,7 +135,7 @@ const Header = () => {
                     {/* LLM */}
                     <button
                       onClick={() => {
-                        navigate("/SolusiCorporate");
+                        navigate("/004");
                         window.scrollTo({ top: 0, behavior: "smooth" });
                       }}
                       className="bg-white rounded-xl w-[282px] p-4 flex items-start gap-4 hover:bg-gray-100"
@@ -149,7 +149,7 @@ const Header = () => {
                     {/* VERI */}
                     <button
                       onClick={() => {
-                        navigate("/SolusiCorporate");
+                        navigate("/004");
                         window.scrollTo({ top: 0, behavior: "smooth" });
                       }}
                       className="bg-white rounded-xl w-[282px] p-4 flex items-start gap-4 hover:bg-gray-100"
@@ -188,8 +188,8 @@ const Header = () => {
             </button>
 
             {isSolusiOpen && (
-              <div className="absolute left-[340px] -translate-x-1/2 top-full md:top-11 mt-2 w-[1450px]">
-                <div className="bg-customRed bg-opacity-80 rounded-xl p-8">
+              <div className="absolute md:left-[235px] 2xl:left-[340px] -translate-x-1/2 top-full md:top-11 mt-2 w-[1450px] ">
+                <div className="bg-customRed bg-opacity-80 rounded-xl p-8 md:h-[168px]">
                   <div className="flex justify-center gap-8">
                     {/* Personal */}
                     <button
diff --git a/src/components/beranda/Hero.jsx b/src/components/beranda/Hero.jsx
index 3fb6105..cc91419 100644
--- a/src/components/beranda/Hero.jsx
+++ b/src/components/beranda/Hero.jsx
@@ -42,8 +42,8 @@ function Hero() {
             initial={{ opacity: 0, x: -50 }}
             animate={{ opacity: inView ? 1 : 0, x: inView ? 0 : -50 }}
             transition={{ duration: 0.8 }}
-            className="space-y-6 md:-mt-32 mt-10 text-center lg:text-left order-1 lg:order-none"
-          >
+            className="space-y-6 md:-mt-40 -mt-28 text-center lg:text-left order-1 md:-ml-4 2xl:-ml-4 lg:order-none"
+            >
             <img src={homeLogo} alt="Rekan AI Logo" className="h-12 w-auto lg:mx-0" />
             <h1 className="text-[24px] lg:text-[30px] font-semibold text-customBlack leading-tight">
               Ciptakan Pengalaman Pelanggan yang Tak Terlupakan dengan Solusi AI dari Rekan AI.
diff --git a/src/components/beranda/Kenapa.jsx b/src/components/beranda/Kenapa.jsx
index 7fe0bdc..715d6f3 100644
--- a/src/components/beranda/Kenapa.jsx
+++ b/src/components/beranda/Kenapa.jsx
@@ -12,24 +12,24 @@ function Kenapa() {
 
   return (
     <div ref={sectionRef} className="container mx-auto flex justify-center items-center bg-customWhite mt-5 min-h-screen">
-      <motion.div 
-        initial={{ opacity: 0, y: 50 }} 
-        animate={sectionInView ? { opacity: 1, y: 0 } : {}} 
+      <motion.div
+        initial={{ opacity: 0, y: 50 }}
+        animate={sectionInView ? { opacity: 1, y: 0 } : {}}
         transition={{ duration: 0.8 }}
         className="flex flex-col md:flex-row bg-customWhite rounded-lg overflow-hidden relative pt-16 md:pt-52"
       >
         {/* Decorative Circles */}
         <div className="absolute hidden md:flex top-1 right-24 flex-col items-end space-y-4">
-          <motion.img 
-            src={circle1} alt="Circle 1" 
-            className="w-auto h-auto" 
+          <motion.img
+            src={circle1} alt="Circle 1"
+            className="w-auto h-auto"
             initial={{ opacity: 0, scale: 0.5 }}
             animate={sectionInView ? { opacity: 1, scale: 1 } : {}}
             transition={{ duration: 0.6, delay: 0.3 }}
           />
-          <motion.img 
-            src={circle2} alt="Circle 2" 
-            className="w-auto h-auto" 
+          <motion.img
+            src={circle2} alt="Circle 2"
+            className="w-auto h-auto"
             initial={{ opacity: 0, scale: 0.5 }}
             animate={sectionInView ? { opacity: 1, scale: 1 } : {}}
             transition={{ duration: 0.6, delay: 0.5 }}
@@ -37,7 +37,7 @@ function Kenapa() {
         </div>
 
         {/* Image Section */}
-        <motion.div 
+        <motion.div
           ref={textRef}
           className="relative w-full md:w-1/2 p-5 flex justify-center md:ml-14 md:justify-start"
           initial={{ opacity: 0, x: -50 }}
@@ -49,10 +49,10 @@ function Kenapa() {
             alt="Woman with Tablet"
             className="w-[300px] h-auto md:w-[654.5px] md:h-[609.67px]"
           />
-        </motion.div> 
+        </motion.div>
 
         {/* Text Section */}
-        <motion.div 
+        <motion.div
           ref={listRef}
           className="w-full md:w-[40%] p-6 md:p-10 flex flex-col items-center md:items-start md:mr-28 text-center md:text-left"
           initial={{ opacity: 0, x: 50 }}
@@ -73,8 +73,8 @@ function Kenapa() {
               "Menciptakan interaksi pelanggan yang lebih relevan dan berkesan.",
               "Verifikasi dan autentikasi berbasis AI yang memperkuat keamanan data."
             ].map((text, index) => (
-              <motion.li 
-                key={index} 
+              <motion.li
+                key={index}
                 className="flex items-center"
                 initial={{ opacity: 0, x: -20 }}
                 animate={listInView ? { opacity: 1, x: 0 } : {}}
@@ -87,8 +87,8 @@ function Kenapa() {
           </ul>
 
           <div ref={buttonRef} className="flex flex-col md:flex-row mt-8 md:mt-20 space-y-4 md:space-y-0 md:space-x-10 w-full">
-            <motion.button 
-              className="flex items-center justify-center w-full md:w-[270px] h-[50px] md:h-[70px] border-2 border-customRed text-customRed md:text-xl font-medium rounded-[14px] hover:bg-white hover:bg-opacity-10 transition"
+            <motion.button
+              className="flex items-center justify-center w-full md:w-[350px] 2xl:w-[270px] h-[50px] md:h-[70px] border-2 border-customRed text-customRed md:text-xl font-medium rounded-[14px] hover:bg-white hover:bg-opacity-10 transition"
               initial={{ opacity: 0, scale: 0.8 }}
               animate={buttonInView ? { opacity: 1, scale: 1 } : {}}
               transition={{ duration: 0.5, delay: 0.8 }}
@@ -96,9 +96,10 @@ function Kenapa() {
               <img src={waIcon} alt="WhatsApp Icon" className="mr-2 w-4 h-4 md:w-[30px] md:h-[30px]" />
               Konsultasi Gratis
             </motion.button>
-            <Link to={"/Contact#form"}>
+
+            <Link to={"/Contact#form"} className="w-full md:w-[270px]">
               <motion.button
-                className="w-full md:w-[276px] h-[50px] md:h-[70px] bg-gradient-to-r from-pink-700 to-indigo-600 text-white md:text-xl font-medium rounded-[14px] hover:opacity-90 transition"
+                className="flex items-center justify-center w-full  h-[50px] md:h-[70px] bg-gradient-to-r from-pink-700 to-indigo-600 text-white md:text-xl font-medium rounded-[14px] hover:opacity-90 transition"
                 initial={{ opacity: 0, scale: 0.8 }}
                 animate={buttonInView ? { opacity: 1, scale: 1 } : {}}
                 transition={{ duration: 0.5, delay: 1 }}
@@ -107,6 +108,7 @@ function Kenapa() {
               </motion.button>
             </Link>
           </div>
+
         </motion.div>
       </motion.div>
     </div>
diff --git a/src/components/contact/CustomerService.jsx b/src/components/contact/CustomerService.jsx
index 95ff02c..b270f20 100644
--- a/src/components/contact/CustomerService.jsx
+++ b/src/components/contact/CustomerService.jsx
@@ -22,7 +22,7 @@ const CustomerService = () => {
             {/* LEFT SECTION - Informasi */}
             <motion.div
                 ref={leftRef}
-                className="w-full md:w-[650px] 2xl:w-[750px] h-auto gap-[29px] text-left md:mt-0 lg: 2xl:ml-[-90px]"
+                className="w-full md:w-[650px] 2xl:w-[750px] h-auto gap-[29px] text-left md:mt-0 lg: 2xl:ml-[-165px]"
                 initial="hidden"
                 animate={leftInView ? "visible" : "hidden"}
                 variants={fadeInLeft}