diff --git a/src/App.jsx b/src/App.jsx
index a737b45..05ac2a0 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,8 +1,8 @@
 import Header from "./componen/Header/Header";  // Mengimpor komponen Header untuk ditampilkan di bagian atas halaman
-import CustomerService from "./componen/customer/CustomerService";  // Mengimpor komponen CustomerService untuk menampilkan informasi layanan pelanggan
+import HeadPersonal from "./componen/HeadPersonal/HeadPersonal";  // Mengimpor komponen CustomerService untuk menampilkan informasi layanan pelanggan
 import CardContent from "./componen/CardContent/CardContent";  // Mengimpor komponen FormSection yang berisi form
 import SolusiBisnis from "./componen/solusibisnis/solusibisnis";  // Mengimpor komponen FAQ untuk menampilkan bagian pertanyaan yang sering diajukan
-import BottomCTA from "./componen/bottom/BottomCTA";  // Mengimpor komponen BottomCTA untuk panggilan aksi di bagian bawah halaman
+import MengapapPersonal from "./componen/MengapapPersonal/MengapapPersonal";  // Mengimpor komponen BottomCTA untuk panggilan aksi di bagian bawah halaman
 import Transformasi from "./componen/Transformasi/Transformas"
 import Footer from "./componen/footer/Footer";  // Mengimpor komponen Footer untuk menampilkan bagian footer
 import WhatsAppButton from "./componen/whatsappbutton/whatsappbutton";  // Mengimpor komponen WhatsAppButton untuk menampilkan tombol WhatsApp
@@ -11,9 +11,9 @@ function App() {
   return (
     <>
       <Header />  {/* Menampilkan komponen Header */}
-      <CustomerService />  {/* Menampilkan komponen CustomerService */}
+      <HeadPersonal />  {/* Menampilkan komponen CustomerService */}
       <CardContent />  {/* Menampilkan komponen FormSection */}
-      <BottomCTA />  {/* Menampilkan komponen FAQ */}
+      <MengapapPersonal />  {/* Menampilkan komponen FAQ */}
       <SolusiBisnis />  {/* Menampilkan komponen BottomCTA */}
       <Transformasi />
       <Footer />  {/* Menampilkan komponen Footer */}
diff --git a/src/componen/HeadPersonal/HeadPersonal.jsx b/src/componen/HeadPersonal/HeadPersonal.jsx
new file mode 100644
index 0000000..24c4254
--- /dev/null
+++ b/src/componen/HeadPersonal/HeadPersonal.jsx
@@ -0,0 +1,65 @@
+import { component11, wagreen, start22 } from "../asset";
+
+function Hero() {
+  return (
+    <div
+      className="container px-4 sm:px-6 lg:px-8 mx-auto mt-16 sm:mt-20 md:mt-24 lg:mt-28 xl:mt-32"
+      id="Home"
+    >
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12">
+        {/* Left Section */}
+        <div className="text-left">
+          <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 mb-6">
+            <img
+              className="w-3/4 sm:w-auto max-h-20 object-contain"
+              src={component11 || "/placeholder.svg"}
+              alt="Home Logo"
+              width={200}
+              height={80}
+            />
+            <span className="inline-flex items-center justify-center bg-pink-600 text-white px-4 py-2 rounded-[14px] text-base sm:text-lg md:text-xl mt-[-20px] lg:text-2xl text-center">
+              # Solusi Personal
+            </span>
+          </div>
+          <h1 className="text-customBlack text-2xl sm:text-3xl md:text-4xl lg:text-[32px] font-semibold mb-4">
+            Saatnya mengintegrasikan AI ke dalam kehidupan Anda!
+          </h1>
+          <p className="text-customBlack text-base sm:text-lg md:text-xl lg:text-[20px] mb-8">
+            Rekan AI dirancang untuk mendukung kebutuhan personal Anda di era
+            digital. Baik Anda seorang profesional, pelajar, atau individu yang
+            mencari kemudahan dalam kehidupan sehari-hari, Rekan AI menawarkan
+            teknologi yang mudah digunakan, efisien, dan dapat diandalkan.
+          </p>
+        </div>
+
+        {/* Right Section (Home Image) */}
+        <div className="flex justify-center lg:justify-end mt-8 lg:mt-0">
+          <img
+            src={start22 || "/placeholder.svg"}
+            alt="Home Image"
+            className="w-full max-w-[500px] sm:max-w-[600px] md:max-w-[700px] lg:max-w-[807px] h-auto"
+            width={807}
+            height={600}
+          />
+        </div>
+      </div>
+
+      {/* Buttons */}
+      <div className="flex flex-col lg:flex-row mt-8 lg:-mt-28 lg:ml-28 gap-6 items-center px-4 lg:px-0">
+        <button className="w-full lg:w-[270px] h-[70px] btn2 flex items-center justify-center py-3 border-2 border-[#DC0168] rounded-[14px] text-[#DC0168]  text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:bg-[#ffffff1a]">
+          <img
+            src={wagreen}
+            alt="WhatsApp Icon"
+            className="mr-2 h-[30px] w-[30px]"
+          />
+          Konsultasi Gratis
+        </button>
+        <button className="w-full lg:w-[276px] h-[70px] btn2 flex items-center justify-center py-3 px-8 rounded-[14px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:opacity-90">
+          Coba Sekarang
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default Hero;
diff --git a/src/componen/bottom/BottomCTA.jsx b/src/componen/MengapapPersonal/MengapapPersonal.jsx
similarity index 100%
rename from src/componen/bottom/BottomCTA.jsx
rename to src/componen/MengapapPersonal/MengapapPersonal.jsx
diff --git a/src/componen/customer/CustomerService.jsx b/src/componen/customer/CustomerService.jsx
deleted file mode 100644
index dc2fb7b..0000000
--- a/src/componen/customer/CustomerService.jsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import { component11, wagreen, start22 } from "../asset";
-
-function Hero() {
-  return (
-    <div
-      className=" container px-4 sm:px-6 lg:px-8 mx-auto mt-[150px]"
-      id="Home"
-    >
-      <div
-        className="
-                hero 
-                grid grid-cols-1 lg:grid-cols-2 gap-10 
-                mt-40 sm:mt-28 md:mt-32 lg:mt-36 xl:mt-24
-                items-center"
-      >
-        {/* Left Section */}
-        <div className="text-left px-4 sm:px-6 lg:px-0 mt-[-150px]">
-          <div className="flex items-center">
-            <img
-              className="mb-5 mt-5 mx-auto lg:mx-0 w-3/4 sm:w-2/3 md:w-1/2 lg:w-auto"
-              src={component11}
-              alt="Home Logo"
-            />
-            <span className="flex items-center justify-center ml-2 bg-pink-600 text-white w-full sm:w-auto px-6 py-2 rounded-[14px] text-lg sm:text-2xl text-center mt-2 sm:mt-0">
-              # Solusi Personal
-            </span>
-          </div>
-          <h1 className="text-customBlack text-[32px]  font-semibold py-4">
-            Saatnya mengintegrasikan AI ke dalam kehidupan Anda!
-          </h1>
-          <p className="text-customBlack text-[20px]">
-            Rekan AI dirancang untuk mendukung kebutuhan personal Anda di era
-            digital. Baik Anda seorang profesional, pelajar, atau individu yang
-            mencari kemudahan dalam kehidupan sehari-hari, Rekan AI menawarkan
-            teknologi yang mudah digunakan, efisien, dan dapat diandalkan.
-          </p>
-        </div>
-
-        {/* Right Section (Home Image) */}
-        <div className="flex justify-center lg:justify-end px-4 sm:px-6 lg:px-0">
-          <img
-            src={start22}
-            alt="Home Image"
-            className="w-full max-w-[500px] sm:max-w-[600px] md:max-w-[700px] lg:max-w-[807px] h-auto"
-          />
-        </div>
-      </div>
-
-      {/* Buttons */}
-      <div className="flex flex-col sm:flex-row justify-center  sm:justify-start mt-[-185px] gap-4 sm:gap-6 lg:gap-8 items-center px-4 sm:px-6 lg:px-0">
-        <button className="w-full sm:w-[230px] md:w-[250px] lg:w-[270px] h-[60px] sm:h-[70px] btn2 flex items-center justify-center py-4 sm:py-3 border-2 border-[#DC0168] rounded-[14px] text-[#DC0168] font-bold text-[16px] sm:text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:bg-[#ffffff1a]">
-          <img
-            src={wagreen}
-            alt="WhatsApp Icon"
-            className="mr-2 h-[25px] sm:h-[30px] w-[25px] sm:w-[30px]"
-          />
-          Konsultasi Gratis
-        </button>
-        <button className="w-full sm:w-[236px] md:w-[256px] lg:w-[276px] h-[60px] sm:h-[70px] btn2 flex items-center justify-center py-4 sm:py-3 px-6 sm:px-8 rounded-[14px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white font-bold text-[16px] sm:text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:opacity-90">
-          Coba Sekarang
-        </button>
-      </div>
-    </div>
-  );
-}
-
-export default Hero;
diff --git a/src/componen/whatsappbutton/whatsappbutton.jsx b/src/componen/whatsappbutton/whatsappbutton.jsx
index 7c28176..6db6f82 100644
--- a/src/componen/whatsappbutton/whatsappbutton.jsx
+++ b/src/componen/whatsappbutton/whatsappbutton.jsx
@@ -2,7 +2,7 @@ import { wabutton } from '../asset';
 
 const WhatsAppButton = () => {
   return (
-    <div className="fixed bottom-2 right-2 md:right-24 flex justify-center items-center w-16 h-16 md:w-20 md:h-20 rounded-full z-50 cursor-pointer border-4 border-[#6950DA] bg-gradient-to-l from-[#FD66B9] to-[#A162F9] m-[10px]">
+    <div className="fixed bottom-2 right-2 md:right-24 flex justify-center mb-10 items-center w-16 h-16 md:w-20 md:h-20 rounded-full z-50 cursor-pointer border-4 border-[#6950DA] bg-gradient-to-l from-[#FD66B9] to-[#A162F9] m-[10px]">
       {/* Tombol WhatsApp */}
       <img
         className="w-10 h-10 md:w-12 md:h-12"  // Menentukan ukuran ikon WhatsApp