diff --git a/src/App.jsx b/src/App.jsx
index 1e06b57..6a246b8 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,77 +1,24 @@
 import { useState } from "react";
 import eventsData from "./data";
-import { v1 as generateUniqueID } from "uuid";
-// import Attendees from "./Attendees";
-// import Event from "./Components/Event";
-// import Footer from "./Components/Footer";
-// import Header from "./Components/Header";
-// import NewEventForm from "./Components/NewEventForm";
+import Event from "./Components/Event";
+import Footer from "./Components/Footer";
+import Header from "./Components/Header";
+import NewEventForm from "./Components/NewEventForm";
 
 function App() {
   const [events, setEvents] = useState(eventsData);
 
-  const [showAttendees, setShowAttendees] = useState(false);
-
-  const [selectOption, setSelectOption] = useState("");
-
-  const [newEvent, setNewEvent] = useState({
-    id: "",
-    eventType: "",
-    name: "",
-    organizer: "",
-    eventImage: "",
-    date: "",
-    people: [],
-  });
-
-  function addEvent() {
-    const createEvent = {
-      id: generateUniqueID(),
-      eventType: selectOption,
-      name: newEvent.name,
-      organizer: newEvent.organizer,
-      eventImage: newEvent.eventImage || "https://loremflickr.com/640/480/",
-      date: newEvent.date,
-      people: [],
-    };
-    handleAddEvent(createEvent);
-  }
-
-  function handleSelectChange(e) {
-    setSelectOption(e.target.value);
-  }
-
-  function handleSubmit(e) {
-    e.preventDefault();
-    addEvent();
-    resetEventForm();
-  }
-
-  function handleTextChange(e) {
-    setNewEvent({
-      ...newEvent,
-      [e.target.id]: e.target.value,
-    });
-  }
-
-  function resetEventForm() {
-    setNewEvent({
-      id: "",
-      eventType: "",
-      name: "",
-      organizer: "",
-      eventImage: "",
-      date: "",
-    });
-    setSelectOption("");
-  }
-
   function handleAddEvent(event) {
     setEvents([event, ...events]);
   }
 
-  function toggleEventAttendees() {
-    setShowAttendees(!showAttendees);
+  function toggleEventAttendees(eventId) {
+    const eventArray = [...events];
+    const eventIndex = eventArray.findIndex((event) => eventId === event.id);
+    const event = { ...eventArray[eventIndex] };
+    event.showAttendees = !event.showAttendees;
+    eventArray[eventIndex] = event;
+    setEvents(eventArray);
   }
 
   function updateEventAttendance(eventId, attendeeId) {
@@ -90,131 +37,21 @@ function App() {
 
   return (
     <div className="App">
-      <>
-        <header>
-          <h1 className="color-change-5x">RSVP App</h1>
-        </header>
-      </>
+      <Header />
       <main>
         <div className="new-event">
-          <>
-            <form onSubmit={handleSubmit}>
-              <h3>Create a new event</h3>
-              <label htmlFor="name">Event name:</label>
-              <input
-                type="text"
-                id="name"
-                onChange={handleTextChange}
-                value={newEvent.name}
-              />
-
-              <label htmlFor="organizer">Organizer:</label>
-              <input
-                type="text"
-                id="organizer"
-                onChange={handleTextChange}
-                value={newEvent.organizer}
-              />
-
-              <label htmlFor="eventImage">Event image:</label>
-              <input
-                type="text"
-                id="eventImage"
-                onChange={handleTextChange}
-                value={newEvent.eventImage}
-              />
-              <label htmlFor="eventType">Event type:</label>
-              <select id="eventType" onChange={handleSelectChange}>
-                <option value=""></option>
-                <option value="Birthday">Birthday</option>
-                <option value="Anniversary">Anniversary</option>
-                <option value="Intramural Sport">Intramural Sport</option>
-                <option value="Watch Party">Watch Party</option>
-                <option value="wedding">Wedding</option>
-              </select>
-              <br />
-              <input type="submit" />
-            </form>
-          </>
+          <NewEventForm handleAddEvent={handleAddEvent} />
         </div>
         <div className="events">
           <ul>
             {events.map((event) => {
-              const { people: attendees } = event;
-
               return (
-                <>
-                  <li key={event.id}>
-                    <img src={event.eventImage} alt={event.name} />
-                    <h5>
-                      {event.name} {event.eventType}
-                    </h5>
-                    <br />
-                    <span>Organized by: {event.organizer} </span>
-                    <br />
-                    <>
-                      <button onClick={toggleEventAttendees}>
-                        {!showAttendees ? "Show Attendees" : "Hide Attendees"}
-                      </button>
-
-                      {showAttendees ? (
-                        <div className="attendees">
-                          {attendees.map((attendee, index) => (
-                            <>
-                              <div key={attendee.id} className="attendee">
-                                <p>
-                                  <img
-                                    src={attendee.avatar}
-                                    alt={attendee.firstName}
-                                  />
-                                  {"   "}
-                                  <span>
-                                    {" "}
-                                    {attendee.firstName} {attendee.lastName}{" "}
-                                  </span>
-                                </p>
-                                <p>
-                                  <button
-                                    className="clickable"
-                                    onClick={() =>
-                                      updateEventAttendance(
-                                        event.id,
-                                        attendee.id
-                                      )
-                                    }
-                                  >
-                                    Attending:
-                                  </button>
-                                  <span>
-                                    {attendee.attendance ? "✅" : "❌"}
-                                  </span>
-                                </p>
-
-                                <p>
-                                  <span>Note:</span> {attendee.note}
-                                </p>
-                              </div>
-                            </>
-                          ))}
-                        </div>
-                      ) : null}
-                    </>
-                  </li>
-                </>
-              );
+              <Event key={event.id} showAttendees={event.showAttendees} attendees={event.people} event={event} updateEventAttendance={updateEventAttendance} toggleEventAttendees={toggleEventAttendees} />)
             })}
           </ul>
         </div>
       </main>
-      <>
-        <footer>
-          <ul>
-            <li>Contact</li>
-            <li>About</li>
-            <li>Legal</li>
-          </ul>
-        </footer>
-      </>
+      <Footer />
     </div>
   );
 }
diff --git a/src/Components/Attendee.jsx b/src/Components/Attendee.jsx
index e301743..f931603 100644
--- a/src/Components/Attendee.jsx
+++ b/src/Components/Attendee.jsx
@@ -1,3 +1,18 @@
-export default function Attendee() {
-  return;
+export default function Attendee({ event, attendee, updateEventAttendance}) {
+  
+  return (
+    <div key={attendee.id} className="attendee">
+      <p>
+        <img src={attendee.avatar} alt={attendee.firstName} />
+        {"   "}
+        <span> {" "} {attendee.firstName} {attendee.lastName}{" "} </span>
+      </p>
+      <p>
+        <button className="clickable" onClick={() => updateEventAttendance(event.id, attendee.id)} > Attending: {attendee.attendance ? "✅" : "❌"} </button>
+      </p>
+      <p>
+        <span>Note:</span> {attendee.note}
+      </p>
+    </div>
+  )
 }
diff --git a/src/Components/Attendees.jsx b/src/Components/Attendees.jsx
index 45ca5cf..c1b9599 100644
--- a/src/Components/Attendees.jsx
+++ b/src/Components/Attendees.jsx
@@ -1,3 +1,17 @@
-export default function Attendees() {
-  return;
+import Attendee from "./Attendee"
+export default function Attendees({event, attendees, toggleEventAttendees, updateEventAttendance, showAttendees}) {
+  return (
+    <>
+      <button onClick={() => toggleEventAttendees(event.id)}>
+          {!showAttendees ? "Show Attendees" : "Hide Attendees"}
+      </button>
+          {showAttendees && (
+            <div className="attendees">
+                {attendees.map((attendee) => (
+                    <Attendee event = {event} attendee={attendee} updateEventAttendance = {updateEventAttendance} />
+                ))}
+            </div>
+          )}
+    </>
+  )
 }
diff --git a/src/Components/Event.jsx b/src/Components/Event.jsx
index 7600e3c..4b45c74 100644
--- a/src/Components/Event.jsx
+++ b/src/Components/Event.jsx
@@ -1,3 +1,19 @@
-export default function Event() {
-  return;
+import Attendees from "./Attendees";
+
+export default function Event({event, attendees, showAttendees, updateEventAttendance, toggleEventAttendees}) {
+  
+  return (
+    <>
+      <li key={event.id}>
+        <img src={event.eventImage} alt={event.name} />
+        <h5>
+          {event.name} {event.eventType}
+        </h5>
+        <br />
+        <span>Organized by: {event.organizer} </span>
+        <br />
+        <Attendees event = {event} attendees = {attendees} updateEventAttendance = {updateEventAttendance} toggleEventAttendees = {toggleEventAttendees} showAttendees = {showAttendees} />
+      </li>
+    </>
+  );
 }
diff --git a/src/Components/Footer.jsx b/src/Components/Footer.jsx
index 42c8222..e976c04 100644
--- a/src/Components/Footer.jsx
+++ b/src/Components/Footer.jsx
@@ -1,3 +1,13 @@
 export default function Footer() {
-  return;
+  return (
+    <>
+      <footer>
+        <ul>
+          <li>Contact</li>
+          <li>About</li>
+          <li>Legal</li>
+        </ul>
+      </footer>
+    </>
+  )
 }
diff --git a/src/Components/Header.jsx b/src/Components/Header.jsx
index 7cfb6f4..c482bb5 100644
--- a/src/Components/Header.jsx
+++ b/src/Components/Header.jsx
@@ -1,3 +1,9 @@
 export default function Header() {
-  return;
+  return (
+    <>
+      <header>
+        <h1 className="color-change-5x">RSVP App</h1>
+      </header>
+    </>
+  )
 }
diff --git a/src/Components/NewEventForm.jsx b/src/Components/NewEventForm.jsx
index 319696a..c22b204 100644
--- a/src/Components/NewEventForm.jsx
+++ b/src/Components/NewEventForm.jsx
@@ -1,3 +1,100 @@
+import { useState } from "react";
+import { v1 as generateUniqueID } from "uuid";
+
 export default function NewEventForm({ handleAddEvent }) {
-  return;
+  const [selectOption, setSelectOption] = useState("");
+
+  const [newEvent, setNewEvent] = useState({
+    id: "",
+    eventType: "",
+    name: "",
+    organizer: "",
+    eventImage: "",
+    date: "",
+    people: [],
+  });
+
+  function addEvent() {
+    const createEvent = {
+      id: generateUniqueID(),
+      eventType: selectOption,
+      name: newEvent.name,
+      organizer: newEvent.organizer,
+      eventImage: newEvent.eventImage || "https://loremflickr.com/640/480/",
+      date: newEvent.date,
+      people: [],
+    };
+    handleAddEvent(createEvent);
+  }
+
+  function handleSelectChange(e) {
+    setSelectOption(e.target.value);
+  }
+
+  function handleSubmit(e) {
+    e.preventDefault();
+    addEvent();
+    resetEventForm();
+  }
+
+  function handleTextChange(e) {
+    setNewEvent({
+      ...newEvent,
+      [e.target.id]: e.target.value,
+    });
+  }
+
+  function resetEventForm() {
+    setNewEvent({
+      id: "",
+      eventType: "",
+      name: "",
+      organizer: "",
+      eventImage: "",
+      date: "",
+    });
+    setSelectOption("");
+  }
+  
+  return (
+    <>
+            <form onSubmit={handleSubmit}>
+              <h3>Create a new event</h3>
+              <label htmlFor="name">Event name:</label>
+              <input
+                type="text"
+                id="name"
+                onChange={handleTextChange}
+                value={newEvent.name}
+              />
+
+              <label htmlFor="organizer">Organizer:</label>
+              <input
+                type="text"
+                id="organizer"
+                onChange={handleTextChange}
+                value={newEvent.organizer}
+              />
+
+              <label htmlFor="eventImage">Event image:</label>
+              <input
+                type="text"
+                id="eventImage"
+                onChange={handleTextChange}
+                value={newEvent.eventImage}
+              />
+              <label htmlFor="eventType">Event type:</label>
+              <select id="eventType" onChange={handleSelectChange}>
+                <option value=""></option>
+                <option value="Birthday">Birthday</option>
+                <option value="Anniversary">Anniversary</option>
+                <option value="Intramural Sport">Intramural Sport</option>
+                <option value="Watch Party">Watch Party</option>
+                <option value="wedding">Wedding</option>
+              </select>
+              <br />
+              <input type="submit" />
+            </form>
+          </>
+  )
 }