diff --git a/frontend/src/assets/Contact-us.png b/frontend/src/assets/Contact-us.png
new file mode 100644
index 00000000..91774990
Binary files /dev/null and b/frontend/src/assets/Contact-us.png differ
diff --git a/frontend/src/assets/Contact-us1.png b/frontend/src/assets/Contact-us1.png
new file mode 100644
index 00000000..9a1a04b6
Binary files /dev/null and b/frontend/src/assets/Contact-us1.png differ
diff --git a/frontend/src/assets/Contact-us2.png b/frontend/src/assets/Contact-us2.png
new file mode 100644
index 00000000..fb810221
Binary files /dev/null and b/frontend/src/assets/Contact-us2.png differ
diff --git a/frontend/src/pages/ContactUs.tsx b/frontend/src/pages/ContactUs.tsx
index 164138cb..dc5e0319 100644
--- a/frontend/src/pages/ContactUs.tsx
+++ b/frontend/src/pages/ContactUs.tsx
@@ -1,7 +1,10 @@
 import axios from "axios";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import toast from "react-hot-toast";
 import bgHero from "../assets/bgHero.png";
+import formImage1 from "../assets/Contact-us.png";
+import formImage2 from "../assets/Contact-us1.png";
+import formImage3 from "../assets/Contact-us2.png";
 
 function ContactUs() {
   const [name, setName] = useState("");
@@ -15,12 +18,28 @@ function ContactUs() {
     message: "",
   });
 
-  document.title='Style Share | Reach us 📱'
+  const images = [formImage1, formImage2, formImage3];
+  const [currentImageIndex, setCurrentImageIndex] = useState(0);
+  const [fadeTransition, setFadeTransition] = useState(true);
+
+  document.title = 'Style Share | Reach us 📱';
+
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      setFadeTransition(false);
+      setTimeout(() => {
+        setCurrentImageIndex((prevIndex) => (prevIndex + 1) % images.length);
+        setFadeTransition(true); 
+      }, 500); 
+    }, 5000);
+
+    return () => clearInterval(intervalId); 
+  }, []);
 
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     console.log(name, email, subject, message);
-    // Basic validation
+   
     if (!name || !email || !subject || !message) {
       setError({
         ...error,
@@ -67,89 +86,90 @@ function ContactUs() {
       toast.error("An unexpected error occurred!");
     }
   };
-  return (
 
-    <div className="text-[#000435] bg-white dark:text-white dark:bg-[#000435]"style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }}>
-      <section className="flex justify-center p-12 md:bg-grey-500">
-        <div className="w-full text-[#000435] bg-white dark:text-white dark:bg-[#000435] rounded-lg shadow border md:mt-0 sm:max-w-md xl:p-0 border-blue-700 dark:border-sky-500"style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }}>
-          <div className="max-w-md mx-auto mt-8 p-6 rounded-lg shadow-md">
-            <h2 className="text-3xl font-bold mb-4  text-center text-[#000435] bg-white dark:text-white dark:bg-[#000435]">
-              Contact Us
-            </h2>
-            <form onSubmit={handleSubmit}>
-              <div className="mb-4">
-                <label htmlFor="name" className="block text-[#000435] bg-white dark:text-white dark:bg-[#000435]">
-                  Name
-                </label>
-                <input
-                  type="text"
-                  id="name"
-                  className="form-input text-[#000435] bg-white dark:text-white dark:bg-[#000435] mt-1 p-2 block w-full rounded-lg border border-blue-500"
-                  placeholder="Your Name"
-                  value={name}
-                  onChange={(e) => setName(e.target.value)}
-                  required
-                />
-              </div>
-              <div className="mb-4">
-                <label htmlFor="email" className="block text-[#000435] bg-white dark:text-white dark:bg-[#000435]">
-                  Email
-                </label>
-                <input
-                  type="email"
-                  id="email"
-                  className="form-input text-[#000435] bg-white dark:text-white dark:bg-[#000435] mt-1 p-2 block w-full rounded-lg border border-blue-500"
-                  placeholder="your-email@example.com"
-                  value={email}
-                  onChange={(e) => setEmail(e.target.value)}
-                  required
-                />
-              </div>
-              <div className="mb-4">
-                <label htmlFor="subject" className="block text-[#000435] bg-white dark:text-white dark:bg-[#000435]">
-                  Subject
-                </label>
-                <input
-                  type="text"
-                  id="subject"
-                  className="form-input text-[#000435] bg-white dark:text-white dark:bg-[#000435] mt-1 p-2 block w-full rounded-lg border border-blue-500"
-                  placeholder="Subject"
-                  value={subject}
-                  onChange={(e) => setSubject(e.target.value)}
-                  required
-                />
-              </div>
-              <div className="mb-4">
-                <label htmlFor="message" className="block text-[#000435] bg-white dark:text-white dark:bg-[#000435]">
-                  Message
-                </label>
-                <textarea
-                  id="message"
-                  className="form-input text-[#000435] bg-white dark:text-white dark:bg-[#000435] mt-1 p-2 block w-full rounded-lg border border-blue-500"
-                  placeholder="Your Message"
-                  value={message}
-                  onChange={(e) => setMessage(e.target.value)}
-                  rows={5}
-                  required
-                ></textarea>
-                <p className="text-sm font-semibold mb-2 text-red-600">
-                  {error.message}
-                </p>
-              </div>
-              <div className="flex justify-center">
-                <button
-                  type="submit"
-                  className="bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600"
-                >
-                  Send Message
-                </button>
-              </div>
-            </form>
-          </div>
+  return (
+    <div className="flex flex-col  items-center min-h-screen text-[#000435] bg-white dark:text-white dark:bg-[#000435]" style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }}>
+      <h2 className="text-4xl font-bold mb-8 text-center text-[#000435] bg-white dark:text-white dark:bg-[#000435] mt-8">
+        Contact Us
+      </h2>
+      <section className="w-full max-w-4xl flex flex-col md:flex-row text-[#000435] bg-white dark:text-white dark:bg-[#000435] rounded-lg shadow border md:mt-0 border-blue-700 dark:border-sky-500">
+        <div className="w-full md:w-1/2 p-8 flex flex-col justify-center">
+          <form onSubmit={handleSubmit}>
+            <div className="mb-4">
+              <label htmlFor="name" className="block text-lg text-[#000435] bg-white dark:text-white dark:bg-[#000435] mb-2">
+                Name
+              </label>
+              <input
+                type="text"
+                id="name"
+                className="form-input text-lg text-[#000435] bg-white dark:text-white dark:bg-[#000435] mt-1 p-2 block w-full rounded-lg border border-blue-500 focus:border-blue-600 focus:ring focus:ring-blue-200"
+                placeholder="Your Name"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                required
+              />
+            </div>
+            <div className="mb-4">
+              <label htmlFor="email" className="block text-lg text-[#000435] bg-white dark:text-white dark:bg-[#000435] mb-2">
+                Email
+              </label>
+              <input
+                type="email"
+                id="email"
+                className="form-input text-lg text-[#000435] bg-white dark:text-white dark:bg-[#000435] mt-1 p-2 block w-full rounded-lg border border-blue-500 focus:border-blue-600 focus:ring focus:ring-blue-200"
+                placeholder="your-email@example.com"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+              />
+            </div>
+            <div className="mb-4">
+              <label htmlFor="subject" className="block text-lg text-[#000435] bg-white dark:text-white dark:bg-[#000435] mb-2">
+                Subject
+              </label>
+              <input
+                type="text"
+                id="subject"
+                className="form-input text-lg text-[#000435] bg-white dark:text-white dark:bg-[#000435] mt-1 p-2 block w-full rounded-lg border border-blue-500 focus:border-blue-600 focus:ring focus:ring-blue-200"
+                placeholder="Subject"
+                value={subject}
+                onChange={(e) => setSubject(e.target.value)}
+                required
+              />
+            </div>
+            <div className="mb-4">
+              <label htmlFor="message" className="block text-lg text-[#000435] bg-white dark:text-white dark:bg-[#000435] mb-2">
+                Message
+              </label>
+              <textarea
+                id="message"
+                className="form-input text-lg text-[#000435] bg-white dark:text-white dark:bg-[#000435] mt-1 p-2 block w-full rounded-lg border border-blue-500 focus:border-blue-600 focus:ring focus:ring-blue-200"
+                placeholder="Your Message"
+                value={message}
+                onChange={(e) => setMessage(e.target.value)}
+                rows={5}
+                required
+              ></textarea>
+              <p className="text-sm font-semibold mt-2 text-red-600">
+                {error.message}
+              </p>
+            </div>
+            <div className="flex justify-center">
+              <button
+                type="submit"
+                className="bg-blue-500 text-white py-2 px-6 rounded-md hover:bg-blue-600 transition duration-300"
+              >
+                Send Message
+              </button>
+            </div>
+          </form>
+        </div>
+        <div className={`w-full md:w-1/2 flex justify-center items-center p-8 transition-opacity duration-1000 ease-in-out ${fadeTransition ? 'opacity-100' : 'opacity-0'}`}>
+          <img src={images[currentImageIndex]} alt="Contact Us" className="max-w-full h-auto rounded-lg" style={{ width: '90rem', height: 'auto' }} />
         </div>
       </section>
     </div>
-  )
+  );
 }
 
-export default ContactUs
\ No newline at end of file
+export default ContactUs;