diff --git a/src/componen/bottom/BottomCTA.jsx b/src/componen/bottom/BottomCTA.jsx
index 10636ba..0ebf389 100644
--- a/src/componen/bottom/BottomCTA.jsx
+++ b/src/componen/bottom/BottomCTA.jsx
@@ -5,7 +5,7 @@ const BottomCTA = () => {
     <section className="w-full bg-white text-center py-10 mb-[113px]">
       {/* Bagian ini untuk menampilkan teks yang memberi tahu pengguna bahwa mereka bisa menghubungi jika masih ada pertanyaan */}
       <div className="flex flex-wrap justify-center gap-2">
-        <h3 className="text-[#212121] text-center text-[32px] font-[600] leading-[48px] tracking-[0.005em]">
+        <h3 className="text-[#212121] text-center text-[32px] font-[550] leading-[48px] tracking-[0.005em]">
           Masih punya pertanyaan seputar
         </h3>
 
@@ -14,7 +14,7 @@ const BottomCTA = () => {
           <span className="bg-[#dc0168] bg-[length:100%] rounded-[18px] text-[#ffffff] px-9 py-2 inline-block mr-[5px]">
             #Rekan AI
           </span>
-          <span className="font-semibold ml-1">?</span>
+          <span className="font-semibold  ml-1">?</span>
         </h3>
       </div>
       
diff --git a/src/componen/customer/CustomerService.jsx b/src/componen/customer/CustomerService.jsx
index 6f24143..9419b6d 100644
--- a/src/componen/customer/CustomerService.jsx
+++ b/src/componen/customer/CustomerService.jsx
@@ -1,83 +1,79 @@
-import { email,phone,customer } from "../asset"; // Import gambar icon untuk email,telepon,customer service
+import { email, phone, customer } from "../asset";
 
 const CustomerService = () => {
-  return (
-    <section className="mt-[180px] md:mt-[115px] 2xl:mt-[45px] flex flex-col md:flex-row justify-between items-center px-5 py-10 max-w-6xl mx-auto gap-10 mb-[114px]">
-      {/* Container utama dengan styling responsif untuk menampung konten customer service */}
+    return (
+        <section className="main-container mt-[180px] md:mt-[115px] 2xl:mt-[45px] flex flex-col md:flex-row justify-between items-center px-5 py-10 max-w-7xl mx-auto gap-10 mb-[114px] 2xl:px-20 2xl:gap-20">
+            {/* Container utama */}
 
-      <div className="w-full md:w-[773px] h-auto gap-[29px] text-left">
-        {/* Div untuk teks utama dan informasi pendukung */}
-
-        <div className="mb-5">
-          <h2 className="text-[#212121] text-[28px] md:text-[32px] font-[550] text-lg leading-[36px] md:leading-[48px]">
-            Kami Siap Membantu Bisnis{" "}
-            <span className="hidden lg:inline">
-              <br />
-            </span>{" "}
-            Anda Lebih Maju!
-          </h2>
-        </div>
-
-        <p className="text-[#212121] leading-relaxed mb-6 text-[16px] md:text-[18px]">
-          {/* Paragraf penjelasan singkat mengenai layanan yang ditawarkan */}
-          Butuh informasi lebih lanjut tentang produk atau solusi kami?{" "}
-          <span className="hidden lg:inline">
-            <br />
-          </span>{" "}
-          Tim Rekan AI siap menjawab pertanyaan Anda dengan cepat dan
-          profesional.
-        </p>
-
-        <div className="flex flex-col gap-4">
-          {/* Container untuk menampung daftar kontak dalam format fleksibel */}
-
-          <div className="flex items-start gap-4">
-            {/* Kontainer untuk informasi kontak via email */}
-            <img
-              src={email} // Menampilkan icon email
-              alt="Email Icon" // Teks alternatif untuk gambar email
-              className="w-10 h-10 object-contain" // Styling untuk ukuran gambar
-            />
-            <div className="text-left">
-              <p className="text-sm text-[#212121]">
-                Kirim pertanyaan Anda ke{" "}
-                <strong className="text-[#5B59E8]">support@rekanai.com</strong>{" "}
-                dan tim kami
-              </p>
-              <p className="text-sm text-[#212121]">akan segera merespons.</p>
+            <div className="w-full md:w-[773px] 2xl:w-[900px] h-auto gap-[29px] text-left">
+                {/* Teks dan informasi */}
+                <div className="mb-5">
+                    <h2 className="text-[#212121] text-[28px] md:text-[32px] 2xl:text-[28px] font-[550] leading-[36px] md:leading-[48px] 2xl:leading-[52px]">
+                        Kami Siap Membantu Bisnis{" "}
+                        <span className="hidden lg:inline">
+                            <br />
+                        </span>{" "}
+                        Anda Lebih Maju!
+                    </h2>
+                </div>
+                <p className="text-[#212121] leading-relaxed mb-6 text-[16px] md:text-[18px] 2xl:text-[18px]">
+                    Butuh informasi lebih lanjut tentang produk atau solusi kami?{" "}
+                    <span className="hidden lg:inline">
+                        <br />
+                    </span>{" "}
+                    Tim Rekan AI siap menjawab pertanyaan Anda dengan cepat dan
+                    profesional.
+                </p>
+                <div className="flex flex-col gap-6">
+                    <div className="flex items-start gap-6">
+                        <img
+                            src={email}
+                            alt="Email Icon"
+                            className="w-10 h-10 object-contain"
+                        />
+                        <div className="text-left">
+                            <p className="text-sm text-[#212121] 2xl:text-base">
+                                Kirim pertanyaan Anda ke{" "}
+                                <strong className="text-[#5B59E8]">
+                                    support@rekanai.com
+                                </strong>{" "}
+                                dan tim kami
+                            </p>
+                            <p className="text-sm text-[#212121] 2xl:text-base">
+                                akan segera merespons.
+                            </p>
+                        </div>
+                    </div>
+                    <div className="flex items-start gap-6">
+                        <img
+                            src={phone}
+                            alt="Phone Icon"
+                            className="w-10 h-10 object-contain"
+                        />
+                        <div className="text-left">
+                            <p className="text-sm text-[#212121] 2xl:text-base">
+                                Hubungi kami di{" "}
+                                <strong className="text-[#5B59E8]">
+                                    (+62) 123-4567-890
+                                </strong>
+                            </p>
+                            <p className="text-sm text-[#212121] 2xl:text-base">
+                                (Senin - Jumat, 08:00 - 17:00 WIB).
+                            </p>
+                        </div>
+                    </div>
+                </div>
             </div>
-          </div>
 
-          <div className="flex items-start gap-4">
-            {/* Kontainer untuk informasi kontak via telepon */}
-            <img
-              src={phone} // Menampilkan icon telepon
-              alt="Phone Icon" // Teks alternatif untuk gambar telepon
-              className="w-10 h-10 object-contain" // Styling untuk ukuran gambar
-            />
-            <div className="text-left">
-              <p className="text-sm text-[#212121]">
-                Hubungi kami di{" "}
-                <strong className="text-[#5B59E8]">(+62) 123-4567-890</strong>
-              </p>
-              <p className="text-sm text-[#212121]">
-                (Senin - Jumat, 08:00 - 17:00 WIB).
-              </p>
+            <div className="flex-1 flex justify-center items-center">
+                <img
+                    src={customer}
+                    alt="Customer Service"
+                    className="w-full md:w-[400px] lg:w-[500px] 2xl:w-[600px] max-w-xs sm:max-w-sm md:max-w-md h-auto object-contain"
+                />
             </div>
-          </div>
-        </div>
-      </div>
-
-      <div className="flex-1 flex justify-center items-center">
-        {/* Div untuk menampilkan gambar ilustrasi customer service */}
-        <img
-          src={customer} // Menampilkan gambar customer service
-          alt="Customer Service" // Teks alternatif untuk gambar customer service
-          className="w-full md:w-[400px] lg:w-[500px] max-w-xs sm:max-w-sm md:max-w-md h-auto object-contain"
-        />
-      </div>
-    </section>
-  );
+        </section>
+    );
 };
 
-export default CustomerService; // Ekspor komponen agar dapat digunakan di file lain
+export default CustomerService;
diff --git a/src/componen/faq/FAQSection.jsx b/src/componen/faq/FAQSection.jsx
index 5938712..ba7e200 100644
--- a/src/componen/faq/FAQSection.jsx
+++ b/src/componen/faq/FAQSection.jsx
@@ -30,8 +30,8 @@ const FAQ = () => {
       question: "Apa saja produk yang ditawarkan oleh Rekan AI?",
       answer: (
         <div>
-          <p>Kami menawarkan beberapa produk unggulan, termasuk:</p>
-          <ul className="list-disc list-inside">
+          <p className="mb-1">Kami menawarkan beberapa produk unggulan, termasuk:</p>
+          <ul className="list-decimal list-inside space-y-1">
             <li>
               Rekan Doku: Solusi autentikasi dan manajemen dokumen digital.
             </li>
@@ -49,8 +49,8 @@ const FAQ = () => {
       question: "Bagaimana cara menghubungi tim Rekan AI?",
       answer: (
         <div>
-          <p>Anda dapat menghubungi kami melalui:</p>
-          <ul className="list-disc list-inside">
+          <p className="mb-1">Anda dapat menghubungi kami melalui:</p>
+          <ul className="list-decimal list-inside space-y-1">
             <li>Email: support@rekanai.com</li>
             <li>Telepon: (+62) 123-4567-890</li>
             <li>WhatsApp: (+62) 812-3456-7890</li>
@@ -114,7 +114,7 @@ const FAQ = () => {
     <div className="text-[#212121] max-w-4xl mx-auto px-4 py-6 text-center ">
       {/* Judul halaman FAQ */}
       <div className="mt-[111px]">
-        <h1 className="text-[32px] font-[550] leading-[48px] tracking-[0.005em] text-center mb-4">
+        <h1 className="text-[32px] font-[505] leading-[48px] tracking-[0.005em] text-center mb-4">
           Frequently Asked Questions
         </h1>
         <h2 className="text-[20px] font-normal leading-[30px] tracking-[0.005em] text-center mb-6">
@@ -123,27 +123,27 @@ const FAQ = () => {
       </div>
 
       {/* Bagian FAQ */}
-      <div className="space-y-4 mb-[110px] mt-[60px] ">
+      <div className="space-y-[22px] mb-[110px] mt-[60px]">
         {faqData.map((item, index) => (
           <div
             key={index}
-            className="text-[20px] border border-[#5B59E8] rounded-lg overflow-hidden mb-[22px]"
+            className="text-[20px] border border-[#5B59E8] p-[5px] rounded-[12px] overflow-hidden "
           >
             {/* Bagian untuk menampilkan pertanyaan dan tanda buka/tutup */}
             <div
-              className={`flex justify-between items-center p-4 cursor-pointer bg-white ml-4 ${
+              className={`flex justify-between items-center cursor-pointer bg-white ml-4 ${
                 // Jika pertanyaan ini dibuka, beri highlight
                 openQuestion === index ? "text-blue-500" : ""
               }`}
               onClick={() => toggleQuestion(index)} // Ketika pertanyaan diklik, panggil toggleQuestion
             >
-              <span className="font-bold">{item.question}</span>
+              <span className="font-[550]">{item.question}</span>
               <span className="text-[39px] text-[#845FF1] mr-4">{openQuestion === index ? "–" : "+"}</span> {/* Tampilkan tanda buka atau tutup */}
             </div>
 
             {/* Bagian untuk menampilkan jawaban jika pertanyaan ini terbuka */}
             {openQuestion === index && (
-              <div className="p-4 text-[16px] text-left bg-white text-sm">
+              <div className="p-4 text-[16px] ml-4 text-left bg-white text-sm">
                 {item.answer}
               </div>
             )}
diff --git a/src/componen/footer/Footer.jsx b/src/componen/footer/Footer.jsx
index f891e22..480b750 100644
--- a/src/componen/footer/Footer.jsx
+++ b/src/componen/footer/Footer.jsx
@@ -1,5 +1,5 @@
 // Import gambar-gambar yang digunakan dalam komponen Footer
-import { nvidia,kmn,kominfo,ojk,facebook,x,instagram,component11 } from "../asset"; // Gambar logo NVIDIA sebagai partner
+import { nvidia,kmn,kominfo,ojk,facebook,x,instagram,component11 } from "../asset"; // Gambar logo sebagai partner dan logo medsos dan logo rekanai
 
 function Footer() {
   return (
@@ -26,7 +26,7 @@ function Footer() {
               </span>
             </p>
           </div>
-          <p className="mb-4 text-[18px]">
+          <p className="mb-[39px] text-[18px]">
             Jl. Anggrek No.6, Sawah Lama, Kec. Ciputat, Kota Tangerang Selatan,
             Banten 15413
           </p>
diff --git a/src/componen/form/FormSection.jsx b/src/componen/form/FormSection.jsx
index 287f7b0..59c97a0 100644
--- a/src/componen/form/FormSection.jsx
+++ b/src/componen/form/FormSection.jsx
@@ -3,43 +3,43 @@ import { img10 } from "../asset";
 const ContactForm = () => {
   return (
     <div
-      className="flex min-h-screen items-center justify-center p-5 text-white overflow-hidden rounded-tl-[80px] rounded-tr-[80px]"
+      className="flex min-h-screen items-center justify-center p-5 text-white rounded-tl-[80px] rounded-tr-[80px]"
       style={{
-        background: `linear-gradient(45deg, #DC016866 5%, rgba(91, 89, 232, 1) 100%), url(${img10})`,
-        backgroundSize: "100% auto", // Memastikan gambar mengisi seluruh elemen
-        backgroundPosition: "center", // Menempatkan gambar di tengah
-        backgroundRepeat: "no-repeat", // Menghindari gambar terulang
+        background: `linear-gradient(45deg, #DC016866 15%, rgba(91, 89, 232, 1),rgba(91, 89, 232, 1)), url(${img10})`,
+        backgroundSize: "cover",
+        backgroundPosition: "center",
+        backgroundRepeat: "no-repeat",
       }}
     >
-      <div className="flex flex-col lg:flex-row items-start w-full max-w-6xl mt-[-40px] 2xl:max-w-7xl 2xl:px-20">
+      <div className="flex flex-col lg:flex-row items-start w-full max-w-[90%] 2xl:max-w-[100%] 2xl:max-h-[100%] sm:mt-[79px] sm:mb-[79px] 2xl:mt-[-125px] 2xl:px-10">
         {/* Bagian Kiri */}
-        <div className="flex-1 p-5 mb-10 lg:mb-auto mt-20">
+        <div className="flex-1 p-5 mb-10 lg:mb-0 sm mt-20 2xl:mt-28">
           {/* Judul utama */}
-          <h2 className="text-[32px] font-[550] leading-[48px] tracking-[0.005em] text-left mb-[39px] 2xl:text-[36px]">
+          <h2 className="text-[32px] font-[550] leading-[48px] tracking-[0.005em] text-left mb-[39px] 2xl:text-[36px] 2xl:leading-[52px]">
             Isi formulir di samping ini dan kami akan menghubungi Anda secepat
             mungkin
           </h2>
 
           {/* Deskripsi tambahan */}
-          <p className="text-[18px] font-[400] leading-[30px] tracking-[0.005em] text-left mb-6 2xl:text-[20px]">
+          <p className="text-[18px] font-[400] leading-[30px] tracking-[0.005em] text-left mb-6 2xl:text-[20px] 2xl:leading-[34px]">
             Kami percaya bahwa kolaborasi adalah kunci kesuksesan. Hubungi kami
             hari ini, dan mari wujudkan masa depan bisnis Anda bersama Rekan AI!
           </p>
         </div>
 
         {/* Bagian Form */}
-        <div className="flex-1 bg-white text-[#212121] rounded-2xl p-8 shadow-lg border-[8px] border-pink-300 mx-auto lg:mx-0 lg:ml-12 w-full max-w-lg mt-[79px] mb-[79px] 2xl:max-w-xl 2xl:px-12">
+        <div className="flex-1 bg-white text-[#212121] rounded-[25px] 2xl:mt-[100px] p-[40px] border-[8px] border-[#F086A4] w-full 2xl:px-[60px] 2xl:py-[50px]">
           {/* Judul form */}
-          <h3 className="text-xl font-bold mb-4 text-[#212121] 2xl:text-2xl">
+          <h3 className="text-[32px] font-[550] mb-4 text-[#212121] 2xl:text-[28px] 2xl:mb-6">
             Hubungi Tim Terbaik Kami
           </h3>
           {/* Deskripsi form */}
-          <p className="mb-6 text-[#212121] 2xl:text-lg">
+          <p className="mb-6 text-[#212121] 2xl:text-[18px]">
             Silakan isi data diri Anda pada formulir di bawah ini
           </p>
 
           {/* Formulir input */}
-          <form className="flex flex-col gap-4">
+          <form className="flex flex-col gap-4 px-2">
             {/* Input Nama */}
             <div>
               <label className="text-[#6B5CEA]">Nama (Tanpa Gelar)*</label>
@@ -47,7 +47,7 @@ const ContactForm = () => {
                 type="text"
                 placeholder="Masukkan nama Anda"
                 required
-                className="w-full mt-1 p-4 border border-[#5B59E8]  rounded-lg focus:ring-2 focus:ring-indigo-500"
+                className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
               />
             </div>
 
@@ -58,7 +58,11 @@ const ContactForm = () => {
                 type="tel"
                 placeholder="Masukkan nomor telepon Anda"
                 required
-                className="w-full mt-1 p-4 border border-[#5B59E8]  rounded-lg focus:ring-2 focus:ring-indigo-500"
+                className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
+                pattern="[0-9]*"
+                onInput={(e) => {
+                  e.target.value = e.target.value.replace(/[^0-9]/g, "");
+                }}
               />
             </div>
 
@@ -69,34 +73,51 @@ const ContactForm = () => {
                 type="email"
                 placeholder="Masukkan email Anda"
                 required
-                className="w-full mt-1 p-4 border border-[#5B59E8]  rounded-lg focus:ring-2 focus:ring-indigo-500"
+                className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
               />
             </div>
 
             {/* Input Nama Organisasi */}
             <div>
-              <label className="text-[#6B5CEA] ">
+              <label className="text-[#6B5CEA]">
                 Nama Organisasi/Perusahaan
               </label>
               <input
                 type="text"
                 placeholder="Masukkan nama organisasi/perusahaan Anda"
-                className="w-full mt-1 p-4 border border-[#5B59E8]  rounded-lg focus:ring-2 focus:ring-indigo-500"
+                className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
               />
             </div>
 
             {/* Dropdown Pilih Kebutuhan */}
-            <div>
+            <div className="relative">
               <label className="text-[#6B5CEA]">Pilih Kebutuhan</label>
               <select
                 required
-                className="w-full mt-1 p-4 border border-[#5B59E8]  rounded-lg focus:ring-2 focus:ring-indigo-500"
+                className="appearance-none w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
               >
                 <option value="">Pilih kebutuhan Anda</option>
                 <option value="konsultasi">Konsultasi</option>
                 <option value="pelatihan">Pelatihan</option>
                 <option value="pengembangan">Pengembangan</option>
               </select>
+              {/* Tanda panah kustom */}
+              <div className="absolute inset-y-0 right-5 flex items-center pointer-events-none">
+                <svg
+                  className="w-6 text-[#5B59E8]"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M19 9l-7 7-7-7"
+                  />
+                </svg>
+              </div>
             </div>
 
             {/* Checkbox Verifikasi */}
@@ -112,7 +133,7 @@ const ContactForm = () => {
             {/* Tombol Kirim */}
             <button
               type="submit"
-              className="bg-indigo-500 hover:bg-indigo-600 text-white  py-3 px-6 rounded-lg shadow-md transition-all w-[173px] pr-6"
+              className="bg-indigo-500 hover:bg-indigo-600 text-white py-3 px-6 rounded-lg shadow-md transition-all w-[173px] 2xl:w-[200px] 2xl:py-4"
             >
               Kirim Pesan
             </button>