diff --git a/src/App.css b/src/App.css
index f7cbb2c..05f8377 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,5 +1,68 @@
-*{
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
\ No newline at end of file
+/* Reset general */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+  
+
+
+  /* Contenedor principal */
+  .contact {
+    background-color: #ffffff;
+    padding: 2rem;
+    border-radius: 8px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+    max-width: 90%; /* Se adapta al ancho de la pantalla */
+    width: 400px; /* Ancho máximo para pantallas grandes */
+    text-align: center;
+    align-items: center;
+  }
+  
+  /* Título */
+  .contact h2 {
+    margin-bottom: 1.5rem;
+    font-size: 1.8rem;
+    color: #333333;
+  }
+  
+  /* Formulario */
+  .contact form {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem; /* Espacio entre los campos */
+  }
+  
+  /* Campos del formulario */
+  .contact input,
+  .contact textarea {
+    width: 100%; /* Asegura que los campos ocupen todo el ancho del contenedor */
+    padding: 0.8rem;
+    border: 1px solid #cccccc;
+    border-radius: 4px;
+    font-size: 1rem;
+    background-color: #f9f9f9;
+  }
+  
+  /* Campo de texto grande */
+  .contact textarea {
+    resize: none;
+    height: 100px;
+  }
+  
+  /* Botón */
+  .contact .submit-button {
+    padding: 0.8rem;
+    background-color: #007bff;
+    color: #ffffff;
+    border: none;
+    border-radius: 4px;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+  }
+  
+  .contact .submit-button:hover {
+    background-color: #0056b3;
+  }
+  
\ No newline at end of file
diff --git a/src/Components/EventPlanner.jsx b/src/Components/EventPlanner.jsx
index d1f9abd..4d6486c 100644
--- a/src/Components/EventPlanner.jsx
+++ b/src/Components/EventPlanner.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import './EventPlanner.css'; // Import CSS file for styling
+import Footer from './Footer';
 
 const EventPlanner = () => {
     return (
@@ -7,8 +8,79 @@ const EventPlanner = () => {
             <header>
                 <h1>Welcome to Event Planner</h1>
             </header>
+            <section className="description">
+                 <p>
+                    Plan and organize your events effortlessly with Event Planner. From
+                    birthdays to corporate meetings, we've got you covered.
+                </p>
+                <button className="get-started-button">Get Started</button>
+            </section>
+            <section className="events_categories">
+            <ul>
+                <h2>Social Events:</h2>
+                    <li>Birthday parties</li>
+                    <li>Anniversary celebrations</li>
+                    <li>Wedding receptions</li>
+                    <li>Baby showers</li>
+                    <li>Graduation parties</li>
+                    <li>Family reunions</li>
+            </ul>
+            <ul>
+                <h2> Entertainment Events:</h2>
+                    <li>Concerts</li>
+                    <li>Music festivals</li>
+                    <li>Film screenings</li>
+                    <li>Comedy shows</li>
+                    <li>Art exhibitions</li>
+                    <li>Cultural events</li>
+            </ul>
+            
+            <ul>
+                <h2>Community Events:</h2>
+                    <li>Fundraising events</li>
+                    <li>Charity galas</li>
+                    <li>Volunteer drives</li>
+                    <li>Neighborhood block parties</li>
+                    <li>Community festivals</li>
+                    <li>Cultural celebrations</li>
+            </ul>
+
+            </section>
+            <section className="features">
+                <h2>Features</h2>
+                    <ul>
+                        <li>Easy event creation and management</li>
+                        <li>Customizable event templates</li>
+                        <li>Guest list management</li>
+                        <li>Real-time collaboration</li>
+                        <li>Reminders and notifications</li>
+                    </ul>
+            </section>
+            <section className="testimonials">
+                <h2>Testimonials</h2>
+                    <div className="testimonial">
+                        <p>"Event Planner made organizing my wedding a breeze. Highly recommended!"</p>
+                        <p className="author">- Emily Johnson</p>
+                    </div>
+                    <div className="testimonial">
+                        <p>"I use Event Planner for all my corporate events. It saves me so much time and effort!"</p>
+                        <p className="author">- John Smith</p>
+                    </div>
+            </section>
+            <section className="contact">
+                <h2>Contact Us</h2>
+                    <form>
+                        <input type="text" placeholder="Name" />
+                        <input type="email" placeholder="Email" />
+                        <input type="phone" placeholder="Number" />
+                        <textarea placeholder="Message"></textarea>
+                        <button className="submit-button">Send</button>
+                    </form>
+            </section>
+            <Footer/>
         </div>
     );
 };
 
 export default EventPlanner;
+
diff --git a/src/Components/Footer.jsx b/src/Components/Footer.jsx
new file mode 100644
index 0000000..3eb3ce6
--- /dev/null
+++ b/src/Components/Footer.jsx
@@ -0,0 +1,11 @@
+import React from "react";
+const Footer = () => {
+    return(
+        <>
+        <footer>            
+                <p> &copy; Event Planner Organization. All rights reserved. </p>
+        </footer>
+        </>
+    )
+}
+export default Footer
\ No newline at end of file