diff --git a/public/facebook.webp b/public/facebook.webp
new file mode 100644
index 0000000..3765b0b
Binary files /dev/null and b/public/facebook.webp differ
diff --git a/public/insta.webp b/public/insta.webp
new file mode 100644
index 0000000..804fdb9
Binary files /dev/null and b/public/insta.webp differ
diff --git a/public/linkedIn.png b/public/linkedIn.png
new file mode 100644
index 0000000..720154f
Binary files /dev/null and b/public/linkedIn.png differ
diff --git a/public/tsunamiWaves.jpg b/public/tsunamiWaves.jpg
new file mode 100644
index 0000000..4b64e8d
Binary files /dev/null and b/public/tsunamiWaves.jpg differ
diff --git a/public/x_logo.jpg b/public/x_logo.jpg
new file mode 100644
index 0000000..2b2c789
Binary files /dev/null and b/public/x_logo.jpg differ
diff --git a/src/app/contact-us/page.tsx b/src/app/contact-us/page.tsx
index 42c71ef..ac3ebc2 100644
--- a/src/app/contact-us/page.tsx
+++ b/src/app/contact-us/page.tsx
@@ -1,5 +1,6 @@
 "use client";
 import React, { useState } from "react";
+import Image from "next/image";
 
 const ContactUs = () => {
   const [formData, setFormData] = useState({
@@ -15,163 +16,152 @@ const ContactUs = () => {
   const handleSubmit = (e) => {
     e.preventDefault();
     console.log("Form submitted with data:", formData);
-    // Handle form submission, like sending data to a server
     alert("Thank you for reaching out! We will get back to you soon.");
-    setFormData({ name: "", email: "", message: "" }); // Clear form
+    setFormData({ name: "", email: "", message: "" });
   };
 
   return (
-    <div className="min-h-screen bg-gray-100 flex flex-col items-center py-10">
-      <div className="max-w-4xl mx-auto p-5 bg-white shadow-md rounded-lg">
-        <h1 className="text-3xl font-bold text-center text-gray-800 mb-6">
-          Contact Us
-        </h1>
-        <p className="text-lg text-gray-600 text-center mb-6">
-          Have questions or concerns about earthquake preparedness? Contact us
-          using the form below or through the provided contact details.
-        </p>
-        
-        {/* Flexbox Layout for Form and Contact Details */}
-        <div className="flex flex-col md:flex-row">
-          
-          {/* Contact Form */}
-          <div className="flex-1 mb-6 md:mb-0 md:mr-4">
-            <form
-              onSubmit={handleSubmit}
-              className="bg-gray-50 p-6 rounded-lg shadow-lg"
-            >
-              <div className="mb-4">
-                <label
-                  htmlFor="name"
-                  className="block text-gray-700 font-medium mb-2"
+    <div
+      className="h-screen relative text-white py-10 border border-black">
+       <Image height={5000} width={5000} alt="Logo" className="border border-neutral-300 absolute z-10" src="/tsunamiWaves.jpg"/>
+    
+      {/* Overlay for readability */}
+      <div className="absolute overflow-hidden w-full h-full bg-black bg-opacity-40 flex flex-col items-center z-20">
+        {/* Container */}
+        <div className="max-w-4xl mx-auto p-5">
+          {/* Header */}
+          <h1 className="text-4xl font-bold text-center text-white mb-6">
+            Contact Us
+          </h1>
+          <p className="text-lg text-center text-gray-300 mb-6">
+            Have questions or concerns about earthquake preparedness? Contact us
+            using the form below or through the provided contact details.
+          </p>
+
+          {/* Content Section */}
+          <div className="flex flex-col md:flex-row gap-6">
+            {/* Contact Form Section */}
+            <div className="flex-1 bg-white bg-opacity-90 text-gray-800 rounded-lg shadow-lg p-6">
+              <form onSubmit={handleSubmit}>
+                <div className="mb-4">
+                  <label
+                    htmlFor="name"
+                    className="block text-gray-700 font-medium mb-2"
+                  >
+                    Name
+                  </label>
+                  <input
+                    type="text"
+                    name="name"
+                    id="name"
+                    value={formData.name}
+                    onChange={handleChange}
+                    placeholder="Your Name"
+                    className="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    required
+                  />
+                </div>
+
+                <div className="mb-4">
+                  <label
+                    htmlFor="email"
+                    className="block text-gray-700 font-medium mb-2"
+                  >
+                    Email
+                  </label>
+                  <input
+                    type="email"
+                    name="email"
+                    id="email"
+                    value={formData.email}
+                    onChange={handleChange}
+                    placeholder="Your Email"
+                    className="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    required
+                  />
+                </div>
+
+                <div className="mb-4">
+                  <label
+                    htmlFor="message"
+                    className="block text-gray-700 font-medium mb-2"
+                  >
+                    Message
+                  </label>
+                  <textarea
+                    name="message"
+                    id="message"
+                    value={formData.message}
+                    onChange={handleChange}
+                    rows="5"
+                    placeholder="Your Message"
+                    className="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    required
+                  />
+                </div>
+
+                <button
+                  type="submit"
+                  className="w-full bg-blue-600 text-white py-3 rounded-lg font-medium hover:bg-blue-700 transition duration-200"
                 >
-                  Name
-                </label>
-                <input
-                  type="text"
-                  name="name"
-                  id="name"
-                  value={formData.name}
-                  onChange={handleChange}
-                  placeholder="Your Name"
-                  className="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
-                  required
-                />
-              </div>
-
-              <div className="mb-4">
-                <label
-                  htmlFor="email"
-                  className="block text-gray-700 font-medium mb-2"
-                >
-                  Email
-                </label>
-                <input
-                  type="email"
-                  name="email"
-                  id="email"
-                  value={formData.email}
-                  onChange={handleChange}
-                  placeholder="Your Email"
-                  className="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
-                  required
-                />
-              </div>
-
-              <div className="mb-4">
-                <label
-                  htmlFor="message"
-                  className="block text-gray-700 font-medium mb-2"
-                >
-                  Message
-                </label>
-                <textarea
-                  name="message"
-                  id="message"
-                  value={formData.message}
-                  onChange={handleChange}
-                  rows="5"
-                  placeholder="Your Message"
-                  className="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
-                  required
-                />
-              </div>
-
-              <button
-                type="submit"
-                className="w-full bg-blue-600 text-white py-3 rounded-lg font-medium hover:bg-blue-700 transition duration-200"
-              >
-                Send Message
-              </button>
-            </form>
-          </div>
-
-          {/* Contact Details */}
-          <div className="flex-1 bg-gray-50 p-6 rounded-lg shadow-lg">
-            <h2 className="text-xl font-bold text-gray-800 mb-4">
-              Get in Touch
-            </h2>
-            <div className="mb-4">
-              <h3 className="text-gray-700 font-medium">Email</h3>
-              <p className="text-gray-600">support@earthquakesafety.org</p>
-            </div>
-            <div className="mb-4">
-              <h3 className="text-gray-700 font-medium">Phone</h3>
-              <p className="text-gray-600">+1 800 123 4567</p>
-            </div>
-            <div className="mb-4">
-              <h3 className="text-gray-700 font-medium">Address</h3>
-              <p className="text-gray-600">
-                123 Earthquake Ave, Prepared City, CA 98765
-              </p>
+                  Send Message
+                </button>
+              </form>
             </div>
 
-            <h2 className="text-xl font-bold text-gray-800 mb-4 mt-6">
-              Follow Us
-            </h2>
-            <div className="flex space-x-4">
-              <a
-                href="#"
-                className="text-blue-600 hover:text-blue-800 transition duration-200"
-              >
-                <span className="sr-only">Twitter</span>
-                <svg
-                  className="h-6 w-6"
-                  fill="currentColor"
-                  viewBox="0 0 24 24"
-                  xmlns="http://www.w3.org/2000/svg"
+            {/* Contact Details Section */}
+            <div className="flex-1 bg-white bg-opacity-90 text-gray-800 rounded-lg shadow-lg p-6">
+              <h2 className="text-xl font-bold text-gray-800 mb-4">
+                Get in Touch
+              </h2>
+              <div className="mb-4">
+                <h3 className="text-gray-700 font-medium">Email</h3>
+                <p className="text-gray-600">support@earthquakesafety.org</p>
+              </div>
+              <div className="mb-4">
+                <h3 className="text-gray-700 font-medium">Phone</h3>
+                <p className="text-gray-600">+1 800 123 4567</p>
+              </div>
+              <div className="mb-4">
+                <h3 className="text-gray-700 font-medium">Address</h3>
+                <p className="text-gray-600">
+                  123 Earthquake Ave, Prepared City, CA 98765
+                </p>
+              </div>
+
+              <h2 className="text-xl font-bold text-gray-800 mb-4 mt-6">
+                Follow Us
+              </h2>
+              <div className="flex justify-around items-center">
+                <a
+                  href="#"
+                  className="w-20 h-20 text-blue-600 hover:text-blue-800 transition duration-200"
                 >
-                  <path d="M24 4.56a9.83 9.83..." />
-                </svg>
-              </a>
-              <a
-                href="#"
-                className="text-blue-600 hover:text-blue-800 transition duration-200"
-              >
-                <span className="sr-only">Facebook</span>
-                <svg
-                  className="h-6 w-6"
-                  fill="currentColor"
-                  viewBox="0 0 24 24"
-                  xmlns="http://www.w3.org/2000/svg"
+                  <span className="sr-only">Instagram</span>
+                  <Image height={200} width={200} alt="Logo" className="z-10" src="/insta.webp"/>
+                </a>
+                <a
+                  href="#"
+                  className="w-20 h-20 text-blue-600 hover:text-blue-800 transition duration-200"
                 >
-                  <path d="M22.675 0h-21.35..." />
-                </svg>
-              </a>
-              <a
-                href="#"
-                className="text-blue-600 hover:text-blue-800 transition duration-200"
-              >
-                <span className="sr-only">LinkedIn</span>
-                <svg
-                  className="h-6 w-6"
-                  fill="currentColor"
-                  viewBox="0 0 24 24"
-                  xmlns="http://www.w3.org/2000/svg"
+                  <span className="sr-only">Facebook</span>
+                  <Image height={200} width={200} alt="Logo" className="z-10" src="/facebook.webp"/>
+                </a>
+                <a
+                  href="#"
+                  className="w-20 h-20 p-4 text-blue-600 hover:text-blue-800 transition duration-200"
                 >
-                  <path d="M22.23 0H1.77C0.8..." />
-                </svg>
-              </a>
+                  <span className="sr-only">X</span>
+                  <Image height={200} width={200} alt="Logo" className="z-10 rounded-lg" src="/x_logo.jpg"/>
+                </a>
+                <a
+                  href="#"
+                  className="w-20 h-20 flex items-center text-blue-600 hover:text-blue-800 transition duration-200"
+                >
+                  <span className="sr-only">LinkedIn</span>
+                  <Image height={200} width={200} alt="Logo" className="z-10" src="/linkedIn.png"/>
+                </a>
+              </div>
             </div>
           </div>
         </div>
@@ -180,4 +170,4 @@ const ContactUs = () => {
   );
 };
 
-export default ContactUs;
+export default ContactUs;
\ No newline at end of file