diff --git a/src/pages/Features-page/F4.png b/src/pages/Features-page/F4.png
new file mode 100644
index 00000000..2ed76580
Binary files /dev/null and b/src/pages/Features-page/F4.png differ
diff --git a/src/pages/Features-page/features.jsx b/src/pages/Features-page/features.jsx
index be9a03da..8e03e743 100644
--- a/src/pages/Features-page/features.jsx
+++ b/src/pages/Features-page/features.jsx
@@ -5,84 +5,95 @@ import Footer from "../../components/footer/index";
 import F1 from "../../pages/Features-page/F1.png";
 import F2 from "../../pages/Features-page/F2.png";
 import F3 from "../../pages/Features-page/F3.png";
+import F4 from "../../pages/Features-page/F4.png";
 import Arrow from "../../pages/Features-page/arrow.png";
+
 function Features() {
   return (
     <div>
       <Navbar />
-      <article className=" flex flex-col items-center justify-center ">
-        <section className=" flex flex-col px-10 py-32 space-y-20  md:flex-row md:items-center md:justify-center md:space-x-20  md:p-20">
+      <main className="flex flex-col items-center justify-center ">
+        <div className="w-3/5 pt-32 md:hidden">
+        <img src={F1} alt="mobile home" />
+        </div>
+      <section className="flex flex-col space-y-20 px-10 md:flex-row md:items-center md:justify-center md:space-x-12 md:pt-28">
           <div>
-            <img className="w-80" src={F1} alt="" />
+            <img className="hidden md:block w-80" src={F3} alt="Event Scheduling" />
+          </div>
+          <div className="flex flex-col items-center justify-center mb-20 md:items-start md:pb-20 md:w-96 w-60">
+            <h1 className="font-bold md:text-2xl text-1xl text-center md:text-start mb-5">
+              Event Scheduling
+            </h1>
+            <p className="text-gray-700 text-center md:text-start text-sm md:w-full">
+            CatchUp makes hanging out with friends as easy as possible—no more waiting for someone to call you back or trying to remember exactly when they're free. It's also great for groups who want to plan ahead and coordinate their schedules so they can spend more time together.
+            </p>
+            <Link
+              to="/sign_up"
+              className="hidden md:flex bg-[#0056D6] mt-5 text-white px-5 py-2 rounded flex flex-row items-center justify-between space-x-5">
+              <p>Get Started</p>
+              <img className="w-3" src={Arrow} alt="arrow" />{" "}
+            </Link>
           </div>
-          <div className="flex flex-col items-center justify-center md:items-start  md:w-96   ">
+        </section>
+        <section className=" flex flex-col-reverse px-10 space-y-20 md:py-16 md:flex-row md:items-center md:justify-center md:space-x-20 md:pb-0">
+          <div className="flex flex-col items-center justify-center md:items-start md:w-96">
             <h1 className="font-bold mb-5 text-1xl md:text-2xl text-center md:text-start">
               Availability Preferences
             </h1>
-            <p className=" text-sm text-gray-700 text-center  md:text-start">
-              One of our most important feautures at catch up, is the
-              availability prefrences where your friends can notify you the host
-              of there availabilty for the event you scheduled. You would get a
-              notification in real time on our platform and in your mail.
+            <p className=" text-sm text-gray-700 text-center md:text-start">
+            With this feature, you can specify a range of days on which you'll be available for a hangout and let those who have been invited choose the one that works best for them.
             </p>
             <Link
               to="/sign_up"
-              className="bg-[#0056D6] mt-5 text-white px-5 py-2  rounded
-flex flex-row items-center justify-between space-x-5 "
+              className="hidden md:flex bg-[#0056D6] mt-5 text-white px-5 py-2 rounded flex flex-row items-center justify-between space-x-5 "
             >
               <p>Get Started</p>
               <img className="w-3" src={Arrow} alt="arrow" />{" "}
             </Link>
           </div>
+          <div className="md:pb-20">
+            <img className="hidden md:block w-80" src={F1} alt="Availability Preferences"/>
+          </div>
         </section>
-        <section className="flex flex-col-reverse  px-10 pb-32 space-y-40 md:flex-row md:items-center md:space-x-32 md:px-52 md:justify-center md:py-0 bg-gray-200 ">
-          <div className="flex flex-col items-center justify-center md:items-start md:w-96 ">
+        <section className="flex px-10 pb-24 space-y-20 md:flex-row md:items-center md:space-x-32 md:justify-center">
+        <div>
+            <img className="hidden md:block w-80" src={F2} alt="Sync Calendar" />
+          </div>
+          <div className="flex flex-col items-center justify-center md:items-start md:w-96 md:pb-40">
             <h1 className="font-bold md:text-2xl text-1xl text-center md:text-start mb-5">
               Sync Calendar
             </h1>
-            <p className="text-gray-800 text-sm text-center md:text-start">
-              We have made it easier for our users to sync there google calendar
-              to our platform through the channel we have created , users can
-              set reminders on there google calendar and not miss out on events
-              from there friends.
+            <p className="text-sm text-center md:text-start text-gray-700">
+            This is essential for staying organized. You can keep track of all events you create using our calendar sync feature.
             </p>
             <Link
               to="/sign_up"
-              className="bg-[#0056D6] mt-5 text-white px-5 py-2  rounded
-flex flex-row items-center justify-between space-x-5 "
-            >
+              className="hidden md:flex bg-[#0056D6] mt-5 text-white px-5 py-2  rounded flex flex-row items-center justify-between space-x-5">
               <p>Get Started</p>
-              <img className=" md:w-3   " src={Arrow} alt="" />{" "}
+              <img className="w-3" src={Arrow} alt="" />{" "}
             </Link>
           </div>
-          <div>
-            <img className="w-80 mb-20 wd:mb-0" src={F2} alt="" />
-          </div>
         </section>
-        <section className="flex flex-col space-y-20 px-10 py-32 md:flex-row md:items-center md:justify-center md:space-x-12 md:pt-10 md:pb-40  ">
-          <div className="">
-            <img className="w-80" src={F3} alt="" />
-          </div>
-          <div className="flex flex-col items-center justify-center md:items-start md:w-96 w-60">
+        <section className="flex px-10 pb-16 space-y-20 md:flex-row md:items-center md:space-x-32 md:justify-center md:pb-0">
+          <div className="flex flex-col items-center justify-center md:items-start md:w-96 ">
             <h1 className="font-bold md:text-2xl text-1xl text-center md:text-start mb-5">
-              Event Scheduling
+              Get Notifications
             </h1>
-            <p className="text-gray-700 text-center md:text-start text-sm md:w-56">
-              Catch up enables you to schedule event for your friends, you set
-              the preferred date and time, and send out invites to your friends,
-              which they are later notified of the event seamlessly.
+            <p className="text-sm text-center md:text-start text-gray-700">
+            You'll never have to worry about forgetting an occasion or skipping a social gathering again. CatchUp will keep you informed.
             </p>
             <Link
               to="/sign_up"
-              className="bg-[#0056D6] mt-5 text-white px-5 py-2  rounded
-flex flex-row items-center justify-between space-x-5 "
-            >
+              className="hidden md:flex bg-[#0056D6] mt-5 text-white px-5 py-2  rounded flex flex-row items-center justify-between space-x-5">
               <p>Get Started</p>
-              <img className="w-3" src={Arrow} alt="arrow" />{" "}
+              <img className="w-3" src={Arrow} alt="" />{" "}
             </Link>
           </div>
+          <div className="md:pb-40">
+            <img className="hidden md:block w-80" src={F4} alt="Sync Calendar" />
+          </div>
         </section>
-      </article>
+      </main>
       <Footer />
     </div>
   );
diff --git a/src/pages/invitee/index.jsx b/src/pages/invitee/index.jsx
index 65e9f0af..b632f256 100644
--- a/src/pages/invitee/index.jsx
+++ b/src/pages/invitee/index.jsx
@@ -9,19 +9,19 @@ import userServices from "../../services/userServices";
 
 const EventInvite = () => {
   const [eventData, setEventData] = useState(null);
-  const preferredDate = eventData
-    ? eventData.host_prefered_time.replace("-", "")
-    : "";
-  const preferredTime = eventData
-    ? moment(preferredDate, "DD-MM-YYYY HH:mm").format("YYYY-MM-DDTHH:mm")
-    : "";
+  // const preferredDate = eventData
+  //   ? eventData.host_prefered_time.replace("-", "")
+  //   : "";
+  // const preferredTime = eventData
+  //   ? moment(preferredDate, "DD-MM-YYYY HH:mm").format("YYYY-MM-DDTHH:mm")
+  //   : "";
   const [inviteDetails, setInviteDetails] = useState({
     fullname: "",
     email: "",
     preferred_date_time: "",
   });
-  const [minDate, setMinDate] = useState("");
-  const [maxDate, setMaxDate] = useState("");
+  // const [minDate, setMinDate] = useState("");
+  // const [maxDate, setMaxDate] = useState("");
   const [agreedDate, setAgreedDate] = useState("");
   const navigate = useNavigate();
   const [declinedInvite, setDeclinedInvite] = useState(false);
@@ -30,26 +30,26 @@ const EventInvite = () => {
 
   const emailRegex =
     /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
-  const decidedEvent = eventData
-    ? moment(eventData.final_event_date).format("MMMM DD YYYY HH:mm")
-    : "";
-  const currentDate = moment(Date.now()).format("YYYY-MM-DDTHH:mm");
-  const hasPassed = eventData && moment(currentDate).isAfter(maxDate);
+  // const decidedEvent = eventData
+  //   ? moment(eventData.final_event_date).format("MMMM DD YYYY HH:mm")
+  //   : "";
+  // const currentDate = moment(Date.now()).format("YYYY-MM-DDTHH:mm");
+  // const hasPassed = eventData && moment(currentDate).isAfter(maxDate);
 
   useEffect(() => {
-    const startDate = eventData
-      ? moment(eventData?.start_date, "MM-DD-YYYY").format("YYYY-MM-DDTHH:mm")
-      : "";
-    const endDate = eventData
-      ? moment(eventData?.end_date, "MM-DD-YYYY").format("YYYY-MM-DDTHH:mm")
-      : "";
+    // const startDate = eventData
+    //   ? moment(eventData?.start_date, "MM-DD-YYYY").format("YYYY-MM-DDTHH:mm")
+    //   : "";
+    // const endDate = eventData
+    //   ? moment(eventData?.end_date, "MM-DD-YYYY").format("YYYY-MM-DDTHH:mm")
+    //   : "";
     setAgreedDate(
       moment(eventData?.final_event_date, "YYYY-MM-DDTHH:mm").format(
         "MM/DD/YYYY"
       )
     );
-    setMinDate(startDate);
-    setMaxDate(endDate);
+    // setMinDate(startDate);
+    // setMaxDate(endDate);
   }, [eventData]);
 
   const changeInviteDetails = (e) => {
@@ -120,9 +120,9 @@ const EventInvite = () => {
   useEffect(() => {
     getEventDetails();
 
-    if (hasPassed) {
-      navigate("/closed_event");
-    }
+    // if (hasPassed) {
+    //   navigate("/closed_event");
+    // }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -132,8 +132,8 @@ const EventInvite = () => {
       <div>
         <div className="mt-28 mb-10 mx-auto lg:mx-12 px-6">
           <div className="mx-2 md:mx-0 text-center w-full">
-            <h1 className="text-2xl font-bold md:text-3xl">Hello, there.</h1>
-            <p className="leading-6 text-gray-600 font-sm">
+            <h1 className="text-2xl font-medium md:text-3xl">Hello, there.</h1>
+            <p className="leading-6 text-gray-600 text-sm">
               You have been invited to {eventData ? eventData.event_type : ""}{" "}
               by
               <span className="text-blue-700 font-bold">
@@ -162,61 +162,50 @@ const EventInvite = () => {
               ""
             )}
           </div>
-          <div className="my-8 w-fit mx-auto border px-6 lg:px-12 py-5 rounded-lg">
-            <div className="my-4 flex flex-col justify-start lg:justify-center items-start lg:items-center gap-[25px] lg:gap-[15px] lg:flex-row ">
-              <div className="md:mx-auto flex-1 self-start">
-                <h1 className="text-xl mb-2 font-bold md:text-2xl md:mb-4">
+          <div className="my-8 w-fit mx-auto px-6 lg:px-12 py-5">
+            <div className="my-4 flex flex-col justify-center lg:justify-center items-start lg:items-center gap-[25px] lg:gap-[15px] lg:flex-row">
+              <div className="md:mx-auto flex-2 self-center">
+                <h1 className="text-xl mb-2 font-medium md:text-2xl md:mb-4">
                   Event Summary
                 </h1>
-                <p className="leading-6 text-gray-600 font-bold font-sm">
+                <p className="leading-6 text-gray-600 font-medium font-sm">
                   Dinner
                 </p>
-                <div>
-                  <span className="flex mt-3">
-                    {" "}
+                <div className="font-thin">
+                  <span className="flex mt-3 md:gap-2 text-sm md:text-base">
                     <CiLocationOn className="mr-4 text-[25px]" />
-                    Location:{" "}
-                    <span className="font-bold">
-                      {" "}
-                      &#160;
+                    Location:
+                    <span className="text-sm md:text-base pl-2">
                       {eventData?.location}
                     </span>
                   </span>
-
-                  <span className="flex mt-3">
-                    {" "}
+                  <span className="flex mt-3 md:gap-2 text-sm md:text-base">
                     <CiCalendar className="mr-4 text-[25px] font-bold" />
-                    Agreed Date: &#160;
+                    Agreed Date:
                     {eventData?.final_event_date === null ? (
-                      <span className="font-bold"> &#160; Not Available</span>
+                      <span className="text-sm md:text-base pl-2">Not Available</span>
                     ) : (
                       agreedDate
                     )}
                   </span>
-
-                  <span className="flex mt-3">
-                    {" "}
+                  <span className="flex mt-3 md:gap-2 text-sm md:text-base">
                     <CiStopwatch className="mr-4 text-[25px]" />
                     Host Selected Time:
-                    <span className="font-bold">
-                      &#160; {eventData?.host_prefered_time}
-                    </span>{" "}
+                    <span className="text-sm md:text-base pl-2">
+                      {eventData?.host_prefered_time}
+                    </span>
                   </span>
-
-                  <span className="flex mt-3">
-                    {" "}
+                  <span className="flex mt-3 gap-2 md:text-sm md:text-base">
                     <HiOutlineMenuAlt1 className="mr-4 text-[25px]" />
-                    <span className="font-bold">
-                      {" "}
-                      &#160;
+                    <span className="text-sm md:text-base pl-2">
                       {eventData?.event_description}
-                    </span>{" "}
+                    </span>
                   </span>
                 </div>
               </div>
-              <form className="flex-1 w-full" onSubmit={addParticipant}>
+              <form className="flex-1 w-full md:border-l-2 md:pl-8" onSubmit={addParticipant}>
                 <div className="my-4 flex flex-col">
-                  <label className="text-base font-semibold mb-1">
+                  <label className="text-base font-semibold mb-1 text-[#424245]">
                     Full Name
                   </label>
                   <input
@@ -230,7 +219,7 @@ const EventInvite = () => {
                   />
                 </div>
                 <div className="my-4 flex flex-col">
-                  <label className="text-base font-semibold mb-1">Email</label>
+                  <label className="text-base font-semibold mb-1 text-[#424245]">Email(optional)</label>
                   <p className="text-sm text-red-500">
                     {emailRegex.test(inviteDetails.email) ||
                     inviteDetails.email === ""
@@ -253,7 +242,7 @@ const EventInvite = () => {
                     autoComplete="true"
                   />
                 </div>
-                {eventData?.final_event_date ? (
+                {/* {eventData?.final_event_date ? (
                   <p className="text-blue-500 font-semibold text-center md:w-4/5 mx-auto">
                     An event date has been chosen. Event to be hosted by{" "}
                     {decidedEvent}
@@ -278,18 +267,18 @@ const EventInvite = () => {
                       required
                     />
                   </div>
-                )}
+                    )} */}
                 <div className="my-7 flex w-full justify-center gap-8 md:justify-between">
                   <button
                     type="submit"
-                    className="rounded bg-[#0056D6] hover:bg-[#2563eb] text-white py-2.5 md:px-3 px-1.5 md:text-lg text-base"
+                    className="rounded font-semibold bg-[#0056D6] hover:bg-[#2563eb] text-white py-2.5 md:px-3 px-1.5 md:text-lg text-base"
                     onClick={addParticipant}
                   >
                     Accept Invite
                   </button>
                   <button
                     type="button"
-                    className="rounded border border-[#0056D6] text-[#0056D6] py-2.5 md:px-3 px-1.5 md:text-lg text-base"
+                    className="rounded font-semibold border border-[#0056D6] text-[#0056D6] py-2.5 md:px-3 px-1.5 md:text-lg text-base"
                     onClick={() => declineInvite()}
                   >
                     Decline Invite