diff --git a/.gitignore b/.gitignore
index fc83d71f..a68f4300 100644
--- a/.gitignore
+++ b/.gitignore
@@ -49,3 +49,11 @@ jspm_packages
 
 # DS Store
 .DS_STORE
+
+
+# package
+package-lock.json
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+yarn.lock
\ No newline at end of file
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 096d33be..c0c769e9 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -1,7 +1,7 @@
 # Contributing
 
 When contributing to this repository, please first discuss the change you wish to make via [issue](https://github.com/reactplay/activities/issues),
-[email](mailto:contact@reactplay.io), or any other method with the owners of this repository before making a change. 
+[email](mailto:hello@reactplay.io), or any other method with the owners of this repository before making a change. 
 
 Please note we have a [Code of Conduct](https://github.com/reactplay/activities/blob/main/CODE_OF_CONDUCT.md), please follow it in all your interactions with the project.
 
@@ -73,7 +73,7 @@ further defined and clarified by project maintainers.
 ### Enforcement
 
 Instances of abusive, harassing, or otherwise unacceptable behavior may be
-reported by contacting the project team at [contact@reactplay.io](mailto:contact@reactplay.io). All
+reported by contacting the project team at [hello@reactplay.io](mailto:hello@reactplay.io). All
 complaints will be reviewed and investigated and will result in a response that
 is deemed necessary and appropriate to the circumstances. The project team is
 obligated to maintain confidentiality with regard to the reporter of an incident.
diff --git a/components/Banner.js b/components/Banner.js
index 7d5d5d5b..ee417505 100644
--- a/components/Banner.js
+++ b/components/Banner.js
@@ -1,13 +1,9 @@
 import Image from "next/image";
 
-// icons
-import { HiArrowNarrowRight } from "react-icons/hi";
-
-// image
-import HeroCoders from "@/public/twoplaysamonth/HeroCoders.svg";
+import { HiArrowNarrowRight } from "react-icons/hi";  // icons
+import HeroCoders from "@/public/twoplaysamonth/HeroCoders.svg";// image
 
 const Banner = ({ events }) => {
-  console.log(events);
   const currentEvent = events.filter((event) => event.isCurrent);
 
   return (
diff --git a/components/ExtendedFooter.js b/components/ExtendedFooter.js
index 7f2467a4..0254763d 100644
--- a/components/ExtendedFooter.js
+++ b/components/ExtendedFooter.js
@@ -8,7 +8,7 @@ import { HiArrowNarrowRight } from "react-icons/hi";
 
 const ExtendedFooter = () => {
   return (
-    <footer className="pt-12 pb-6 px-8 text-sm font-light text-zinc-500 border-t border-solid border-zinc-200">
+    <footer className="bg-white pt-12 pb-6 px-8 text-sm font-light text-zinc-500 border-t border-solid border-zinc-200">
       <div className=" flex flex-wrap  lg:grid w-[85%] mt-0 mx-auto mb-4 lg:grid-cols-[1fr_1.2fr_0.8fr] gap-16">
         {/* ReactPlay intro and social icons */}
         <div className="w-full">
@@ -81,11 +81,11 @@ const ExtendedFooter = () => {
               <p>
                 <a
                   className="underline text-gray-800 font-normal"
-                  href="mailto:contact@reactplay.io"
+                  href="mailto:hello@reactplay.io"
                   rel="noopener noreferrer"
                   target="_blank"
                 >
-                  contact@reactplay.io
+                  hello@reactplay.io
                 </a>
               </p>
             </div>
diff --git a/components/Footer.js b/components/Footer.js
index 57db43ad..a423db64 100644
--- a/components/Footer.js
+++ b/components/Footer.js
@@ -1,80 +1,9 @@
-import Image from "next/image";
-import Link from "next/link";
-import { FaDiscord, FaTwitter, FaRss } from "react-icons/fa";
-
-import FooterTriangles from "../public/FooterTriangles.svg";
-import ReactPlayLogo from "../public/ReactPlayLogo.svg";
-import FooterReactLogo from "../public/FooterReactLogo.svg";
 import ExtendedFooter from "./ExtendedFooter";
 
 const Footer = ({ currentPath }) => {
   return (
     <>
-      {currentPath == "/" ? (
-        <ExtendedFooter />
-      ) : (
-        <footer className="relative flex justify-center items-center pt-16 pb-9 px-8 bg-white bg-opacity-10 overflow-clip">
-          <div className="absolute -left-5">
-            <Image
-              src={FooterTriangles}
-              alt="Footer Triangles"
-              width={155}
-              height={155}
-            />
-          </div>
-          <div className="flex flex-col justify-center items-center mx-auto ">
-            <span className="mb-3 text-gray-400 font-medium font-body">
-              Hosted By
-            </span>
-            <a href="https://reactplay.io" target="_blank" rel="noreferrer">
-              <Image src={ReactPlayLogo} alt="ReactPlay Logo" layout="fixed" />
-            </a>
-            <p className="mt-2 font-medium font-body text-gray-400 text-center">
-              An open-source project made with ❤️ by folks dedicated to give
-              back to the developer community.
-            </p>
-            <p className="mt-2 mb-2 font-medium font-body text-gray-400 text-center underline underline-offset-2 hover:text-gray-200">
-              <Link href={`/tech-credit`}>
-                <a>Tech Stack and Credits</a>
-              </Link>
-            </p>
-            <div className="mt-6 inline-flex justify-center items-center">
-              <a
-                className="text-gray-500 hover:text-gray-300 transition-all duration-200 mr-6"
-                href="https://discord.gg/HBheAs6UJp"
-                rel="noreferrer"
-                target="_blank"
-              >
-                <FaDiscord size={41} />
-              </a>
-              <a
-                className="text-gray-500 hover:text-gray-300 transition-all duration-200 mr-6"
-                href="https://twitter.com/reactplayio"
-                rel="noreferrer"
-                target="_blank"
-              >
-                <FaTwitter size={40} />
-              </a>
-              <a
-                className="text-gray-500 hover:text-gray-300 transition-all duration-200"
-                href="https://blog.reactplay.io/"
-                rel="noreferrer"
-                target="_blank"
-              >
-                <FaRss size={40} />
-              </a>
-            </div>
-          </div>
-          <div className="absolute opacity-40 -right-24 -bottom-28">
-            <Image
-              src={FooterReactLogo}
-              alt="Footer React Logo"
-              width={300}
-              height={300}
-            />
-          </div>
-        </footer>
-      )}
+      <ExtendedFooter />
     </>
   );
 };
diff --git a/components/Header.js b/components/Header.js
index c116ba72..44c62489 100644
--- a/components/Header.js
+++ b/components/Header.js
@@ -84,29 +84,20 @@ const Header = ({ links, metainfo, secondary = false, hustleHomePage }) => {
           </div>
         </header>
       ) : (
-        <header
-          className={`${
-            hustleHomePage
-              ? "justify-end sm:justify-between items-center px-4 xl:px-16 py-4 "
-              : "pt-6 pb-1 px-4 md:justify-center justify-end items-baseline bg-brand-bg "
-          } flex font-primary text-white z-50 w-full fixed ${
-            scroll && hustleHomePage && "bg-slate-900"
-          } transition-all ease-in`}
-        >
-          {hustleHomePage && (
-            <Link href="/">
-              <div className="hidden sm:block cursor-pointer">
-                <Image src={ReactPlayLogo} alt="Logo" />
-              </div>
+        <header className="pt-6 pb-1 px-4 flex md:justify-center justify-end items-baseline bg-brand-bg font-primary text-white z-10">
+          <div className="md:w-40 w-36 z-10 absolute left-0 -mt-6 ml-4">
+            <Link href={`/`}>
+              <a>
+                <Image
+                  src={require(`/public/ReactPlayLogo.svg`)}
+                  alt="Navbar Logo"
+                  layout="responsive"
+                />
+              </a>
             </Link>
-          )}
-          <div
-            className={`${
-              hustleHomePage
-                ? "hidden md:inline-flex"
-                : "md:inline-flex hidden justify-center items-baseline mx-auto z-10"
-            }`}
-          >
+          </div>
+
+          <div className="md:inline-flex hidden justify-center items-baseline mx-auto z-10">
             {links &&
               links.map((link, index) => (
                 <Link key={index} href={link.href} scroll={false}>
diff --git a/components/Hero.js b/components/Hero.js
index 91e6cf55..13a61943 100644
--- a/components/Hero.js
+++ b/components/Hero.js
@@ -3,7 +3,7 @@
 import Image from "next/image";
 import Link from "next/link";
 
-import HeroBanner from "@/public/hustleHomePage/HeroBanner@2x.png";
+import HeroBanner from "@/public/hustleHomePage/HeroBanner.jpg";
 import { Config } from "@/services/metadata/home";
 
 import { HiArrowNarrowRight } from "react-icons/hi";
diff --git a/components/Layout.js b/components/Layout.js
index 9cb72d90..67e6697e 100644
--- a/components/Layout.js
+++ b/components/Layout.js
@@ -5,25 +5,17 @@ import { useRouter } from "next/router";
 import Footer from "./Footer";
 
 import Script from "next/script";
-
-import Hero from "./Hero";
 import Header from "./Header";
+import Hero from "./Hero";
+
+// eventNavbar will be true if this layout will be using from an event page.
+// If any other page it's value will not present and default to false
+const Layout = ({ children, title, metainfo, eventNavbar = false, links=[],hustleHomePage }) => {
 
-const Layout = ({ children, title, description, metainfo, hustleHomePage }) => {
   const currentPath = useRouter().pathname;
-  const [secondaryNavbar, setSecondaryNavbar] = useState(false);
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
-    if (
-      currentPath === "/events/22/hackrplay" ||
-      currentPath === "/events/23/twoplaysamonth" ||
-      currentPath === "/"
-    ) {
-      setSecondaryNavbar(false);
-    } else {
-      setSecondaryNavbar(true);
-    }
     if (metainfo?.name) {
       setLoading(false);
     }
@@ -79,8 +71,8 @@ const Layout = ({ children, title, description, metainfo, hustleHomePage }) => {
             />
           </Head>
           <Header
-            links={metainfo.links}
-            secondary={secondaryNavbar}
+            links={links.length ==0 ? metainfo.links : links}
+            secondary={eventNavbar}
             metainfo={metainfo}
             hustleHomePage={hustleHomePage}
           />
diff --git a/components/MediaLayout.js b/components/MediaLayout.js
index bdb4630e..234f09a3 100644
--- a/components/MediaLayout.js
+++ b/components/MediaLayout.js
@@ -4,15 +4,13 @@ import ReactPlayLogo from "../public/ReactPlayLogo.svg";
 import { HiArrowNarrowRight } from "react-icons/hi";
 import { BiPlay } from "react-icons/bi";
 
-const MediaLayout = ({ events, reactPlayLive, twitterSpaces, title, id }) => {
+const MediaLayout = ({ reactPlayLive, twitterSpaces, title, id }) => {
   return (
     <section
       id={id}
       className={`flex flex-col items-center justify-center w-full mx-auto px-4 ${
-        events && "bg-gray-50"
-      } ${twitterSpaces && "bg-cyan-400/10"} ${
-        reactPlayLive && "bg-slate-900"
-      }`}
+        twitterSpaces && "bg-cyan-400/10"
+      } ${reactPlayLive && "bg-slate-900"}`}
     >
       <h1
         className={`text-5xl py-16 font-sans ${reactPlayLive && "text-white"}`}
@@ -28,21 +26,7 @@ const MediaLayout = ({ events, reactPlayLive, twitterSpaces, title, id }) => {
           </div>
         )}
       </h1>
-      <div className="flex flex-col lg:grid lg:grid-cols-3 justify-center items-center gap-10 lg:gap-20">
-        {events?.map((event) => (
-          <Link key={event.id} href={event.link}>
-            <article className="w-full mb-10 rounded text-sm text-gray-300 sm:h-[21rem] md:h-[20rem] flex flex-col gap-5 bg-cyan-800 max-w-[350px] px-6 py-8 cursor-pointer hover:scale-105 transition-all">
-              <div>
-                <Image
-                  src={require(`/public/${event.image}.png`)}
-                  alt="Banner Logo"
-                  layout="responsive"
-                />
-              </div>
-              <p className="">{event.description}</p>
-            </article>
-          </Link>
-        ))}
+      <div className="flex flex-col lg:grid lg:grid-cols-3 justify-center items-center gap-10 lg:gap-20 py-8">
         {reactPlayLive?.map((el) => (
           <iframe
             key={el.id}
@@ -85,25 +69,27 @@ const MediaLayout = ({ events, reactPlayLive, twitterSpaces, title, id }) => {
       </div>
 
       {/* link to rest of the media */}
-      <button
-        className={`font-sans font-black text-2xl py-16 decoration-cyan-400 underline transition-shadow ${
-          reactPlayLive && "text-white"
-        }`}
-      >
-        <a
-          href={
-            reactPlayLive
-              ? "https://www.youtube.com/playlist?list=PLIJrr73KDmRxqfDS58ZC3MoianOjcm__Y"
-              : ""
-          }
-          target="_blank"
+      {twitterSpaces && twitterSpaces.length ? null : (
+        <button
+          className={`font-sans font-black text-2xl py-8 decoration-cyan-400 underline transition-shadow ${
+            reactPlayLive && "text-white"
+          }`}
         >
-          View all{" "}
-          <span className="inline-block text-lg text-cyan-400">
-            <HiArrowNarrowRight />
-          </span>
-        </a>
-      </button>
+          <a
+            href={
+              reactPlayLive
+                ? "https://www.youtube.com/playlist?list=PLIJrr73KDmRxqfDS58ZC3MoianOjcm__Y"
+                : ""
+            }
+            target="_blank"
+          >
+            View all{" "}
+            <span className="inline-block text-lg text-cyan-400">
+              <HiArrowNarrowRight />
+            </span>
+          </a>
+        </button>
+      )}
     </section>
   );
 };
diff --git a/components/event/EventCard.js b/components/event/EventCard.js
new file mode 100644
index 00000000..0769eeb7
--- /dev/null
+++ b/components/event/EventCard.js
@@ -0,0 +1,38 @@
+import Image from "next/image";
+import Link from "next/link";
+import React from "react";
+
+function EventCard({ event }) {
+  return (
+    <Link href={event.link || `/events/${event.id}/${event.name}`}>
+      <a target={event.external ? "_blank" : undefined}>
+        <article className="w-[360px] cursor-pointer hover:scale-105 transition-all">
+          <div className="bg-[#010426] py-28 px-8 rounded-3xl h-[300px] w-[360px]">
+            <Image
+              src={require(`/public/logos/${event.logo}`)}
+              alt={`${event.name} Banner Logo`}
+              layout="responsive"
+              width={296}
+              height={40}
+            />
+            {/* Not sure that we need this section on a logo / banner */}
+            <div className={`grid grid-cols-3 mt-1 border border-[#66fec9]`}>
+              <div
+                className={`col-span-2 text-[#66fec9] font-medium px-1 text-[10px] flex items-center justify-center uppercase`}
+              >
+                {event.slogan.title}
+              </div>
+              <div
+                className={`text-black bg-[#66fec9] px-1 text-[10px] flex items-center justify-center uppercase`}
+              >
+                {event.duration}
+              </div>
+            </div>
+          </div>
+        </article>
+      </a>
+    </Link>
+  );
+}
+
+export default EventCard;
diff --git a/components/event/EventIndexCardWithDetails.js b/components/event/EventIndexCardWithDetails.js
new file mode 100644
index 00000000..e28cf602
--- /dev/null
+++ b/components/event/EventIndexCardWithDetails.js
@@ -0,0 +1,34 @@
+import Image from 'next/image'
+import Link from 'next/link'
+
+export default function EventIndexCardWithDetails({event}) {
+  return (
+    <Link href={`/events/${event.id}/${event.name}`}>
+    <a target="_blank">
+      <article className="w-[360px] cursor-pointer hover:scale-105 transition-all">
+        <div className="bg-[#010426] py-12 px-8 rounded-3xl w-[360px]">
+          <Image
+            src={require(`/public/logos/${event.logo}`)}
+            alt={`${event.name} Banner Logo`}
+            layout="responsive"
+            width={296}
+            height={40}
+          />
+          {/* Cleanup: Later remove if not needed */}
+          <div className={`grid grid-cols-3 mt-1 border border-[#66fec9]`}>
+            <div className={`col-span-2 text-[#66fec9] font-medium px-1 text-[10px] flex items-center justify-center uppercase`}>
+            {event.slogan.title}
+            </div>
+            <div className={`text-black bg-[#66fec9] px-1 text-[10px] flex items-center justify-center uppercase`}>
+              {event.duration}
+            </div>
+          </div>
+          
+          <p className='text-white pt-4'>{event.description}</p>
+          
+        </div>
+      </article>
+      </a>
+    </Link>
+  )
+}
diff --git a/components/event/EventSection.js b/components/event/EventSection.js
new file mode 100644
index 00000000..1dc82470
--- /dev/null
+++ b/components/event/EventSection.js
@@ -0,0 +1,37 @@
+import React from "react";
+import EventCard from "./EventCard";
+import { HiArrowNarrowRight } from "react-icons/hi";
+import Link from "next/link";
+
+function EventSection({ events }) {
+  return (
+    <>
+      <section
+        id="events"
+        className="flex flex-col items-center justify-center w-full mx-auto px-4 bg-gray-50"
+      >
+        <h1 className="text-5xl py-16 font-raleway">
+          <span className="font-black font-body text-[#010326]">Events</span>
+        </h1>
+
+        <div className="flex flex-col lg:grid lg:grid-cols-3 justify-center items-center gap-10 lg:gap-20">
+          {events?.map((event) => (
+            <EventCard key={`event_key-${event.id}`} event={event} />
+          ))}
+        </div>
+        <button className="font-sans font-black text-2xl py-16 decoration-cyan-400 underline transition-shadow text-[#010326]">
+          <Link href="/events">
+            <a>
+              View all{" "}
+              <span className="inline-block text-lg text-cyan-400">
+                <HiArrowNarrowRight />
+              </span>
+            </a>
+          </Link>
+        </button>
+      </section>
+    </>
+  );
+}
+
+export default EventSection;
diff --git a/pages/events/22/hackrplay/ideas/[id].js b/pages/events/22/hackrplay/ideas/[id].js
deleted file mode 100644
index 58721b07..00000000
--- a/pages/events/22/hackrplay/ideas/[id].js
+++ /dev/null
@@ -1,364 +0,0 @@
-import { useEffect, useState } from 'react';
-import { useRouter } from 'next/router';
-import Image from 'next/image';
-import Link from 'next/link';
-import { FaBloggerB, FaCommentDots, FaReact, FaGitAlt } from 'react-icons/fa';
-
-import LayoutWrapper from '@/components/LayoutWrapper';
-import styles from '@/styles/Home.module.css';
-import { get_idea } from '@/services/graphql/ideas';
-import { SecondaryOutlinedButton } from '@/components/Buttons';
-import InProgress from '/public/Idea-List/inProgress.svg';
-import Completed from '/public/Idea-List/completed.svg';
-import NotStarted from '/public/Idea-List/notStart.svg';
-import {
-	get_idea_submission_info,
-	get_latest_status,
-} from '@/services/graphql/status';
-import { unescape_new_line } from '@/services/util/string';
-import StatusBar from '@/components/status-bar/StatusBar';
-import Interaction from '@/components/interactions';
-
-const StatusMap = {
-	['Idea Submitted']: {
-		image: NotStarted,
-		color: '#FD6868',
-	},
-	['In Progress']: {
-		image: InProgress,
-		color: '#FDC668',
-	},
-	Completed: {
-		image: Completed,
-		color: '#68FDC6',
-	},
-};
-const get_status_style = (status) => {
-	const final_status = status || { label: 'Idea Submitted' };
-	switch (final_status.label) {
-		case 'Completed':
-			return {
-				image: Completed,
-				color: '#68FDC6',
-			};
-		case 'In Progress':
-			return {
-				image: InProgress,
-				color: '#FDC668',
-			};
-		case 'Idea Submitted':
-		default:
-			return {
-				image: NotStarted,
-				color: '#FD6868',
-			};
-	}
-};
-
-export default function IdeaDetails(props) {
-	const router = useRouter();
-	const { id } = router.query;
-	const [idea, setIdea] = useState();
-	const [loading, setLoading] = useState(true);
-
-	useEffect(() => {
-		if (id) {
-			loadIdeaDetails(id);
-		}
-	}, [id]);
-
-	const loadIdeaDetails = (id) => {
-		get_idea(id).then((res) => {
-			const all_statuses = [];
-			console.log(res.idea_idea_status_map);
-			res.idea_idea_status_map.forEach((st) => {
-				all_statuses.push({
-					...st.idea_status_status_map,
-					...{ date: st.date },
-				});
-			});
-			res.status_history = all_statuses;
-			res.status = get_latest_status(res);
-			res.description = unescape_new_line(res.description);
-
-			if (
-				res.status &&
-				res.status.id ===
-					process.env.NEXT_PUBLIC_HACKATHON_SUBMIT_STATUS_ID
-			) {
-				get_idea_submission_info(res.id).then((sub) => {
-					const f_obj = { ...res, ...sub[0] };
-					console.log(f_obj);
-					setIdea(f_obj);
-				});
-			} else {
-				setIdea(res);
-			}
-		});
-	};
-
-	const onEditClicked = (id) => {
-		router.push(`../registration/${id}`);
-	};
-	const onSubmitClicked = (id) => {
-		router.push(`submit/${id}`);
-	};
-
-	const onCancelClicked = () => {
-		router.push(`../ideas`);
-	};
-
-	const refreshIdea = () => {
-		loadIdeaDetails(id);
-	};
-
-	const onLikeClicked = () => {};
-
-	return (
-		<LayoutWrapper title='HACK-R-PLAY | Idea Registration'>
-			{idea ? (
-				<div className='w-full h-full flex flex-col justify-center items-center  p-14'>
-					<div className='w-fit h-full max-w-6xl flex shadow-md rounded mb-6  z-[9] px-5 lg:w-full'>
-						<div className='flex flex-col flex-1'>
-							<div className='h-14 p-16 flex  items-center justify-center text-white'>
-								<h2
-									className={`font-primary text-5xl uppercase text-white tracking-wide ${styles['page-title']}`}>
-									Idea
-								</h2>
-							</div>
-							<div className='flex flex-col p-4 flex-1 text-white border-2 border-[#ffffff29] rounded-md pt-4'>
-								<div className='flex-1 px-4 py-8font-primary border-b border-sky-500 py-4'>
-									<div className='flex-1 text-[#00F2FE]  text-3xl'>
-										<h2>{idea.title}</h2>
-									</div>
-									<div className='flex py-2 text-sm text-brand-muted'>
-										<div className='pr-4 block md:hidden'>
-											{get_latest_status(idea).label}
-										</div>
-										<div className='pr-4'>
-											{
-												idea.idea_like_map_aggregate
-													.aggregate.count
-											}{' '}
-											likes
-										</div>
-										<div>
-											{
-												idea.idea_comments_map_aggregate
-													.aggregate.count
-											}{' '}
-											Comments
-										</div>
-									</div>
-								</div>
-
-								<div className='flex flex-1 px-4 py-8 text-[#ffffff99] whitespace-pre-wrap	'>
-									<div className='flex-1'>
-										{idea.description}
-									</div>
-									<div className='px-4 hidden md:block'>
-										<StatusBar
-											value={idea.status_history}
-											map={StatusMap}
-										/>
-									</div>
-								</div>
-								<div className='flex'>
-									<div className='py-8 flex'>
-										<div className='flex flex-col px-8'>
-											<div className='flex justify-center items-center'>
-												<Image
-													className='rounded-full'
-													height={40}
-													width={40}
-													layout={'fixed'}
-													src={
-														idea.idea_owner_map
-															.avatarUrl
-													}
-													alt={'user avatar'}
-													aria-label='user avatar'
-												/>
-											</div>
-											<div className='flex justify-center items-center text-1xl'>
-												{
-													idea.idea_owner_map
-														.displayName
-												}
-											</div>
-											<div className='flex justify-center items-center text-xs text-[#00F2FE]'>
-												Author
-											</div>
-										</div>
-										{idea.idea_members_map ? (
-											<div className='flex flex-col'>
-												<div className='rounded-[100px] flex  justify-center items-center'>
-													<Image
-														className='rounded-full'
-														height={40}
-														width={40}
-														layout={'fixed'}
-														src={
-															idea
-																.idea_members_map
-																.user_id_map
-																.avatarUrl
-														}
-														alt={'user avatar'}
-														aria-label='user avatar'
-													/>
-												</div>
-												<div className='flex justify-center items-center text-1xl'>
-													{
-														idea.idea_members_map
-															.user_id_map
-															.displayName
-													}
-												</div>
-												<div className='flex justify-center items-center text-xs'>
-													Member
-												</div>
-											</div>
-										) : null}
-									</div>
-									<div className='flex-1 px-8'>
-										{idea.status &&
-										idea.status.id ===
-											process.env
-												.NEXT_PUBLIC_HACKATHON_SUBMIT_STATUS_ID ? (
-											<div>
-												{/* FaBloggerB, FaCommentDots, FaReact, FaGitAlt */}
-												<div className='flex items-center'>
-													<span className='py-1 px-4'>
-														<FaReact />
-													</span>
-													<Link
-														href={
-															idea.application ||
-															''
-														}>
-														<a
-															target='blank'
-															className='mt-2 mb-2 font-medium font-body text-gray-400 text-center underline underline-offset-2 hover:text-gray-200 text-sm'>
-															{idea.application ||
-																'Not Found'}
-														</a>
-													</Link>
-												</div>
-												<div className='flex items-center'>
-													<span className='py-1 px-4'>
-														<FaGitAlt />
-													</span>
-													<Link
-														href={
-															idea.repository_url ||
-															''
-														}>
-														<a
-															target='blank'
-															className='mt-2 mb-2 font-medium font-body text-gray-400 text-center underline underline-offset-2 hover:text-gray-200 text-sm'>
-															{idea.repository_url ||
-																'Not Found'}
-														</a>
-													</Link>
-												</div>
-												<div className='flex items-center'>
-													<span className='py-1 px-4'>
-														<FaBloggerB />
-													</span>
-													<Link
-														href={
-															idea.blog_url || ''
-														}>
-														<a
-															target='blank'
-															className='mt-2 mb-2 font-medium font-body text-gray-400 text-center underline underline-offset-2 hover:text-gray-200 text-sm'>
-															{idea.blog_url ||
-																'Not Found'}
-														</a>
-													</Link>
-												</div>
-												<div className='flex items-center'>
-													<span className='py-1 px-4'>
-														<FaCommentDots />
-													</span>
-													<span className='whitespace-pre-wrap'>
-														{unescape_new_line(
-															idea.comment
-														) || 'Not Found'}
-													</span>
-												</div>
-											</div>
-										) : null}
-									</div>
-								</div>
-								<hr />
-								<div>
-									<div className='py-4 h-full flex '>
-										<div className='flex-1 flex'>
-											<div className='p-2 '>
-												{/* Follwoing code will be reintroduced for upcoming events. So not removing now */}
-												{/* {!idea.status ||
-												idea.status.id !==
-													process.env
-														.NEXT_PUBLIC_HACKATHON_SUBMIT_STATUS_ID ? (
-													<PrimaryButton
-														handleOnClick={() =>
-															onSubmitClicked(
-																idea.id
-															)
-														}>
-														{`Submit`}
-														<FiDownload
-															className='ml-2 my-auto'
-															size={20}
-														/>
-													</PrimaryButton>
-												) : null} */}
-											</div>
-										</div>
-
-										<div className='p-2'>
-											<div>
-												<SecondaryOutlinedButton
-													handleOnClick={() =>
-														onCancelClicked()
-													}>
-													Cancel
-												</SecondaryOutlinedButton>
-											</div>
-										</div>
-										{!idea.status ||
-										idea.status.id !==
-											process.env
-												.NEXT_PUBLIC_HACKATHON_SUBMIT_STATUS_ID ? (
-											<div className='p-2'>
-												{/* Follwoing code will be reintroduced for upcoming events. So not removing now */}
-												{/* <SecondaryOutlinedButton
-													handleOnClick={() =>
-														onEditClicked(idea.id)
-													}>
-													{`Edit`}
-													<FiPenTool
-														className='ml-2 my-auto'
-														size={20}
-													/>
-												</SecondaryOutlinedButton> */}
-											</div>
-										) : null}
-									</div>
-								</div>
-							</div>
-						</div>
-					</div>
-					<div className='w-fit h-full max-w-6xl flex shadow-md rounded mb-6  z-[9] px-5 sm:w-full'>
-						<Interaction
-							data={idea}
-							doRefresh={() => refreshIdea()}
-						/>
-					</div>
-				</div>
-			) : null}
-		</LayoutWrapper>
-	);
-}
diff --git a/pages/events/22/hackrplay/ideas/index.js b/pages/events/22/hackrplay/ideas/index.js
deleted file mode 100644
index f3936341..00000000
--- a/pages/events/22/hackrplay/ideas/index.js
+++ /dev/null
@@ -1,164 +0,0 @@
-import { useEffect, useState } from 'react';
-import { useRouter } from 'next/router';
-import { useAuthenticationStatus, useUserData } from '@nhost/nextjs';
-import { Grid } from '@mui/material';
-
-import { idea_count, list_ideas } from '@/services/graphql/ideas';
-import LayoutWrapper from '@/components/LayoutWrapper';
-import { CTA } from '@/components/Hack-R-Play';
-import IdeaCard from '@/components/Ideas/Card';
-import gstyles from '@/styles/Home.module.css';
-import IdeaFilters from '@/components/Hack-R-Play/IdeaFilter';
-import { get_latest_status } from '@/services/graphql/status';
-import { unescape_new_line } from '@/services/util/string';
-
-const PAGE_SIZE = 12;
-
-const IdeaListingPage = () => {
-	const { isAuthenticated } = useAuthenticationStatus();
-	const [ideas, setIdeas] = useState([]);
-	const [ideaCount, setIdeaCount] = useState(0);
-	const [isLoading, setIsLoading] = useState(false);
-	const router = useRouter();
-	const userData = useUserData();
-
-	useEffect(() => {
-		loadIdeas();
-	}, []);
-
-	const loadIdeas = (filter) => {
-		setIsLoading(true);
-		const promises = [];
-		console.log(filter);
-		promises.push(
-			list_ideas(filter || { pagesize: PAGE_SIZE }, userData?.id).then(
-				(res) => {
-					if (res && res.length) {
-						res.forEach((i) => {
-							i.description = unescape_new_line(i.description);
-						});
-					}
-					return res;
-				}
-			)
-		);
-		promises.push(idea_count(filter, userData?.id));
-
-		Promise.all(promises)
-			.then((res) => {
-				processResultData(res[0]);
-				setIdeaCount(res[1]);
-				setIsLoading(false);
-			})
-			.catch((err) => {
-				console.error(err);
-			});
-	};
-
-	const onCardClicked = (id) => {
-		router.push(`ideas/${id}`);
-	};
-
-	const redirectToRegistration = () => {
-		router.push('registration');
-	};
-
-	const processResultData = (result) => {
-		let tempData = [];
-		for (const idea of result) {
-			let interObj = {
-				title: idea.title,
-				description: idea.description,
-				id: idea.id,
-				comment_count: idea.idea_comments_map_aggregate.aggregate.count,
-				like_count: idea.idea_like_map_aggregate.aggregate.count,
-				avatarUrl: [
-					idea.idea_members_map?.user_id_map.avatarUrl,
-					idea.idea_owner_map?.avatarUrl,
-				],
-				tinkers: [
-					idea.idea_members_map?.user_id_map.displayName,
-					idea.dea_owner_map?.displayName,
-				],
-				status: get_latest_status(idea),
-			};
-
-			tempData.push(interObj);
-		}
-		setIdeas(tempData);
-	};
-
-	return (
-		<LayoutWrapper
-			title='HACK-R-PLAY'
-			description='A hackathon hosted by ReactPlay'>
-			<div className='relative z-[9]'>
-				<div className='h-14 p-16 flex flex-col items-center justify-center'>
-					<h2
-						className={`font-primary text-5xl uppercase text-white tracking-wide ${gstyles['page-title']}`}>
-						SUBMISSIONS
-					</h2>
-					<div className='text-[#ffffff99] py-4'>
-						{' '}
-						Total: {ideaCount}
-					</div>
-				</div>
-				<div className='container mx-auto max-w-screen-xl mb-6'>
-					<IdeaFilters
-						total={ideaCount}
-						isAuthenticated={isAuthenticated}
-						pagesize={PAGE_SIZE}
-						onChange={(f) => loadIdeas(f)}></IdeaFilters>
-				</div>
-				<div className='container mx-auto max-w-screen-xl z-2 pb-32 xl:px-0 px-8'>
-					<Grid
-						container
-						item
-						xs={12}
-						md={12}
-						spacing={0}
-						rowSpacing={3}
-						columns={{ xs: 12, md: 12, lg: 12 }}
-						className='md:px-10 container mx-auto max-w-screen-xl'>
-						{ideas.length === 0 ? (
-							<div className='w-full py-10 flex flex-col justify-center items-center z-[9] text-brand-hightlight'>
-								<div className='text-3xl '>
-									No idea has been added yet.
-								</div>
-							</div>
-						) : (
-							<>
-								{ideas.map((value, vi) => {
-									return (
-										<Grid
-											key={vi}
-											item
-											xs={12}
-											sm={6}
-											md={6}
-											lg={4}
-											xl={3}
-											p={1}>
-											<IdeaCard
-												data={value}
-												onClick={() =>
-													onCardClicked(value.id)
-												}
-											/>
-										</Grid>
-									);
-								})}
-							</>
-						)}
-					</Grid>
-				</div>
-				<CTA
-					title='Be a part of the best react event'
-					description='Learning is a journey than a destination. We developers need avenues, motivations, and opportunities to keep going. Join the Hack-R-Play hackathon to experience it. It will allow you to build a full-stack app using React and Nhost. Why waiting? Register your idea today.'
-				/>
-			</div>
-		</LayoutWrapper>
-	);
-};
-
-export default IdeaListingPage;
diff --git a/pages/events/22/hackrplay/ideas/submit/[id].js b/pages/events/22/hackrplay/ideas/submit/[id].js
deleted file mode 100644
index 1c855bac..00000000
--- a/pages/events/22/hackrplay/ideas/submit/[id].js
+++ /dev/null
@@ -1,214 +0,0 @@
-import { useAuthenticationStatus, useUserData } from '@nhost/nextjs';
-import { useEffect, useState, forwardRef } from 'react';
-import { FiCheckCircle } from 'react-icons/fi';
-import { useRouter } from 'next/router';
-import MuiAlert from '@mui/material/Alert';
-
-import styles from '@/styles/Home.module.css';
-import { NHOST } from '@/services/nhost';
-import { FIELD_TEMPLATE } from '@/services/consts/submission-fields';
-import { get_idea, insert_idea_submission } from '@/services/graphql/ideas';
-import FormBuilder from '@/components/form-builder';
-import {
-	PrimaryButton,
-	SecondaryOutlinedButtonDark,
-} from '@/components/Buttons';
-import LayoutWrapper from '@/components/LayoutWrapper';
-import {
-	insert_ideas_status,
-	get_latest_status,
-} from '@/services/graphql/status';
-import { escape_new_line } from '@/services/util/string';
-
-const Alert = forwardRef(function Alert(props, ref) {
-	return <MuiAlert elevation={6} ref={ref} variant='filled' {...props} />;
-});
-
-export default function SubmitIdea() {
-	const { isAuthenticated, isLoading } = useAuthenticationStatus();
-	const [userId, setUserId] = useState('');
-	const [isDataLoading, setIsDataLoading] = useState(true);
-	const [isSubmitting, setIsSubmitting] = useState(false);
-	const [ideaObject, setIdeaObject] = useState({});
-	const [alertOpen, setAlertOpen] = useState(false);
-	const [pageDisabled, setPageDisabled] = useState(false);
-
-	const userData = useUserData();
-	const router = useRouter();
-	const { id } = router.query;
-
-	const initializeData = () => {
-		setIsDataLoading(true);
-		get_idea(id).then((r) => {
-			const status = get_latest_status(r);
-			if (userData.id !== r.idea_owner_map.id) {
-				setAlertOpen(true);
-				setPageDisabled(true);
-			}
-			if (
-				status &&
-				status.id === process.env.NEXT_PUBLIC_HACKATHON_SUBMIT_STATUS_ID
-			) {
-				router.push('../../ideas');
-			} else {
-				setIdeaObject(r);
-				setIsDataLoading(false);
-			}
-		});
-	};
-
-	useEffect(() => {
-		if (!isLoading) {
-			if (!isAuthenticated) {
-				if (typeof window !== 'undefined') {
-					const protocol = process.env.NEXT_PUBLIC_PROTOCOL
-						? process.env.NEXT_PUBLIC_PROTOCOL
-						: 'https';
-					const host = window.location.hostname;
-					const port = process.env.NEXT_PUBLIC_DEV_PORT
-						? `:${process.env.NEXT_PUBLIC_DEV_PORT}`
-						: '';
-					const external_path = NHOST.AUTH_URL(
-						`${protocol}://${host}${port}/hackrplay/2022/submit/${id}`
-					);
-					window.location = external_path;
-				}
-			} else {
-				initializeData();
-			}
-		}
-	}, [isLoading]);
-
-	if (isLoading) {
-		return (
-			<div className={styles.container}>
-				<main className={styles.main}>
-					<h5 className={styles.title}>
-						Loading authentication information. Please wait.
-					</h5>
-				</main>
-			</div>
-		);
-	}
-
-	if (isDataLoading) {
-		return (
-			<div className={styles.container}>
-				<main className={styles.main}>
-					<h5 className={styles.title}>
-						Checking authentication status. Please wait.
-					</h5>
-				</main>
-			</div>
-		);
-	}
-
-	const isFieldsAreInValid = () => {
-		let res = false;
-		FIELD_TEMPLATE.forEach((tmpl) => {
-			if (tmpl.required && (!ideaObject || !ideaObject[tmpl.datafield])) {
-				res = true;
-			}
-		});
-		return res;
-	};
-
-	const onIdeaDataChanged = (data) => {
-		setIdeaObject({ ...data });
-	};
-
-	const onSubmit = () => {
-		setIsSubmitting(true);
-		ideaObject.status = process.env.NEXT_PUBLIC_HACKATHON_SUBMIT_STATUS_ID;
-		ideaObject.comment = escape_new_line(ideaObject.comment);
-		console.log(ideaObject);
-		Promise.all([
-			insert_idea_submission(ideaObject),
-			insert_ideas_status(ideaObject),
-		]).then((res) => {
-			router.push('..');
-		});
-	};
-	const onCancelClicked = () => {
-		router.push('..');
-	};
-
-	return (
-		<LayoutWrapper title='HACK-R-PLAY | Idea Registration'>
-			<div className='w-full h-full flex flex-col justify-center items-center'>
-				<div className='w-full h-full max-w-6xl flex shadow-md rounded mb-6 z-[9]'>
-					<div className='flex flex-col flex-1'>
-						<div className='h-14 p-16 flex  items-center justify-center'>
-							<h2
-								className={`font-primary text-5xl uppercase text-white tracking-wide ${styles['page-title']}`}>
-								Idea Submission
-							</h2>
-						</div>
-						<div className={`flex flex-col flex-1 bg-white`}>
-							{alertOpen ? (
-								<Alert severity='error'>
-									You cannot submit this idea. Only author can
-									edit an idea.
-								</Alert>
-							) : (
-								<div className='p-4'>
-									Congratulations{' '}
-									<strong>{userData.displayName}</strong> for
-									completing your idea for HACK-R-PLAY
-								</div>
-							)}
-
-							<div className='flex flex-col flex-1 px-10 py-4 overflow-auto'>
-								<div className='flex px-2'>
-									<div className='2xl'>
-										<strong>Idea Title</strong> :{' '}
-									</div>
-									<div> {ideaObject.title}</div>
-								</div>
-								<form>
-									<FormBuilder
-										disabled={pageDisabled}
-										data={ideaObject}
-										fields={FIELD_TEMPLATE}
-										onChange={(data) =>
-											onIdeaDataChanged(data)
-										}
-									/>
-								</form>
-							</div>
-							<div>
-								<hr />
-								<div className='py-4 px-10 h-full flex justify-end'>
-									<div className='p-2'>
-										<div>
-											<SecondaryOutlinedButtonDark
-												handleOnClick={() =>
-													onCancelClicked()
-												}>
-												Cancel
-											</SecondaryOutlinedButtonDark>
-										</div>
-									</div>
-									<div className='p-2'>
-										<PrimaryButton
-											disabled={
-												isFieldsAreInValid() ||
-												pageDisabled
-											}
-											handleOnClick={() => onSubmit()}>
-											Submit
-											<FiCheckCircle
-												className='ml-2 my-auto'
-												size={20}
-											/>
-										</PrimaryButton>
-									</div>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</LayoutWrapper>
-	);
-}
diff --git a/pages/events/22/hackrplay/index.js b/pages/events/22/hackrplay/index.js
deleted file mode 100644
index cac79d17..00000000
--- a/pages/events/22/hackrplay/index.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import { useEffect, useState } from "react";
-import { useRouter } from "next/router";
-import Image from "next/image";
-import { useTheme } from "next-themes";
-
-import About from "@/components/common/About";
-import Judges from "@/components/common/Judges";
-import Hero from "@/components/common/Hero";
-import Partners from "@/components/common/Partners";
-import CTA from "@/components/common/CTA";
-import FAQs from "@/components/common/FAQs";
-import Layout from "@/components/Layout";
-import DottedAndFilledTriangle from "@/public/common/DottedAndFilledTriangle.svg";
-import Flower from "@/public/common/Flower.svg";
-import { Config } from "@/services/metadata/hackrplay";
-import Winners from "@/components/common/Winners";
-
-export default function Home() {
-  const router = useRouter();
-  const [mounted, setMounted] = useState(false);
-  const { theme, setTheme } = useTheme("hackrplay");
-  useEffect(() => {
-    setTheme("hackrplay");
-    setMounted(true);
-  }, []);
-
-  const winners = [];
-  const mentions = [];
-
-  if (!mounted) return null;
-
-  return (
-    <Layout title="ReactPlay : Hack-R-Play" metainfo={Config}>
-      <div className="absolute md:left-9 -top-10 left-5 z-0 md:w-32 md:h-32 w-24 h-24">
-        <Image
-          src={DottedAndFilledTriangle}
-          alt="Dotted And Filled Triangle"
-          layout="responsive"
-        />
-      </div>
-      <div className="absolute md:-right-60 md:-top-48 -right-24 -top-14 z-0 md:w-2/5 md:h-2/5 w-1/2 h-1/2">
-        <Image src={Flower} alt="Flower" layout="responsive" />
-      </div>
-      <Hero metainfo={Config} />
-      {Config.completed ? (
-        <Winners winners={Config.winners} mentions={Config.mentions} />
-      ) : null}
-      <About metainfo={Config} />
-      <Judges metainfo={Config} />
-      {Config.partners ? <Partners metainfo={Config} /> : null}
-      {Config.cta ? <CTA metainfo={Config} /> : null}
-
-      {Config.faqs ? <FAQs metainfo={Config} /> : null}
-    </Layout>
-  );
-}
diff --git a/pages/events/23/twoplaysamonth/index.js b/pages/events/23/twoplaysamonth/index.js
deleted file mode 100644
index 9d70d483..00000000
--- a/pages/events/23/twoplaysamonth/index.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import { useEffect, useState } from "react";
-import { useRouter } from "next/router";
-import Image from "next/image";
-import { useTheme } from "next-themes";
-
-import Layout from "@/components/Layout";
-import About from "@/components/common/About";
-import Judges from "@/components/common/Judges";
-import Hero from "@/components/common/Hero";
-import Partners from "@/components/common/Partners";
-import CTA from "@/components/common/CTA";
-import FAQs from "@/components/common/FAQs";
-
-import DottedAndFilledTriangle from "@/public/common/DottedAndFilledTriangle.svg";
-import Flower from "@/public/common/Flower.svg";
-import { Config } from "@/services/metadata/twoplaysamonth";
-import Winners from "@/components/common/Winners";
-
-export default function Home() {
-  const router = useRouter();
-  const [mounted, setMounted] = useState(false);
-  const { theme, setTheme } = useTheme("twoplaysamonth");
-  useEffect(() => {
-    setTheme("twoplaysamonth");
-    setMounted(true);
-  }, []);
-
-  const winners = [];
-  const mentions = [];
-
-  if (!mounted) return null;
-
-  return (
-    <Layout title="ReactPlay : #2Plays-A-Month" metainfo={Config}>
-      <div className="absolute md:left-9 -top-10 left-5 z-0 md:w-32 md:h-32 w-24 h-24">
-        <Image
-          src={DottedAndFilledTriangle}
-          alt="Dotted And Filled Triangle"
-          layout="responsive"
-        />
-      </div>
-      <div className="absolute md:-right-60 md:-top-48 -right-24 -top-14 z-0 md:w-2/5 md:h-2/5 w-1/2 h-1/2">
-        <Image src={Flower} alt="Flower" layout="responsive" />
-      </div>
-      <Hero metainfo={Config} />
-      {Config.completed ? (
-        <Winners winners={winners} mentions={mentions} />
-      ) : null}
-      <About metainfo={Config} />
-      <Judges metainfo={Config} />
-      {Config.partners ? <Partners metainfo={Config} /> : null}
-      {Config.cta ? <CTA metainfo={Config} /> : null}
-
-      {Config.faqs ? <FAQs metainfo={Config} /> : null}
-    </Layout>
-  );
-}
diff --git a/pages/events/[id]/[name].js b/pages/events/[id]/[name].js
new file mode 100644
index 00000000..837b1858
--- /dev/null
+++ b/pages/events/[id]/[name].js
@@ -0,0 +1,85 @@
+import Head from "next/head";
+import Image from "next/image";
+import { useEffect } from "react";
+import { useRouter } from "next/router";
+import Layout from "@/components/Layout";
+import CTA from "@/components/common/CTA";
+import FAQs from "@/components/common/FAQs";
+import Hero from "@/components/common/Hero";
+import About from "@/components/common/About";
+import Judges from "@/components/common/Judges";
+import Flower from "@/public/common/Flower.svg";
+import Winners from "@/components/common/Winners";
+import Partners from "@/components/common/Partners";
+import { events } from "@/services/metadata/events";
+import DottedAndFilledTriangle from "@/public/common/DottedAndFilledTriangle.svg";
+
+export async function getStaticPaths() {
+  if (!events) {
+    return { paths: [], fallback: false };
+  }
+
+  const paths = events.map((event) => ({
+    params: {
+      id: event.id.toString(),
+      name: slugify(event.name),
+    },
+  }));
+
+  return { paths, fallback: false };
+}
+
+export async function getStaticProps({ params }) {
+  const event = events.find(
+    (event) => event.id.toString() === params.id && event.name === params.name
+  );
+
+  if (!event) {
+    return { notFound: true };
+  }
+
+  return {
+    props: {
+      event,
+    },
+  };
+}
+
+function slugify(str) {
+  return str.toLowerCase().replace(/[^\w]+/g, "-");
+}
+
+function EventPage({ event }) {
+  const router = useRouter();
+
+  return (
+    <Layout
+      title="ReactPlay : Hack-R-Play"
+      metainfo={event}
+      eventNavbar={false}
+    >
+      <div className="absolute md:left-9 -top-10 left-5 z-0 md:w-32 md:h-32 w-24 h-24">
+        <Image
+          src={DottedAndFilledTriangle}
+          alt="Dotted And Filled Triangle"
+          layout="responsive"
+        />
+      </div>
+      <div className="absolute md:-right-60 md:-top-48 -right-24 -top-14 z-0 md:w-2/5 md:h-2/5 w-1/2 h-1/2">
+        <Image src={Flower} alt="Flower" layout="responsive" />
+      </div>
+      <Hero metainfo={event} />
+      {event.completed ? (
+        <Winners winners={event.winners} mentions={event.mentions} />
+      ) : null}
+      <About metainfo={event} />
+      <Judges metainfo={event} />
+      {event.partners ? <Partners metainfo={event} /> : null}
+      {event.cta ? <CTA metainfo={event} /> : null}
+
+      {event.faqs ? <FAQs metainfo={event} /> : null}
+    </Layout>
+  );
+}
+
+export default EventPage;
diff --git a/pages/events/index.js b/pages/events/index.js
new file mode 100644
index 00000000..0ec5bd3e
--- /dev/null
+++ b/pages/events/index.js
@@ -0,0 +1,28 @@
+import Layout from "@/components/Layout";
+import EventIndexCardWithDetails from "@/components/event/EventIndexCardWithDetails";
+import { Config } from "@/services/metadata/home";
+import { events } from "@/services/metadata/events";
+
+
+function index() {
+    return (
+      <Layout title="The Hustle Home page" metainfo={Config} eventNavbar={false}>
+        <section
+          id="events"
+          className="flex flex-col items-center justify-center w-full mx-auto px-4 py-16 min-h-screen bg-gray-50"
+        >
+          <h1 className="text-5xl font-raleway mb-16">
+            <span className="font-black font-body text-[#010326]">Events</span>
+          </h1>
+          {/* <div className="grid grid-cols-1 lg:grid-cols-3 gap-10 lg:gap-20"> */}
+          <div className="grid grid-cols-3 gap-20">
+            {events?.map((event) => (
+              <EventIndexCardWithDetails key={`event_key-${event.id}`} event={event} />
+            ))}
+          </div>
+        </section>
+      </Layout>
+    );
+}
+
+export default index
\ No newline at end of file
diff --git a/pages/index.js b/pages/index.js
index d2fc17d9..c5a72995 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -2,20 +2,25 @@ import Layout from "@/components/Layout";
 import Banner from "@/components/Banner";
 import { Config } from "../services/metadata/home";
 import MediaLayout from "@/components/MediaLayout";
+import EventSection from "@/components/event/EventSection";
+import { useEffect, useState } from "react";
+import { REACT_PLAYLIST_ID } from "config";
+import { events } from "@/services/metadata/events";
 
 export default function Home() {
   const reactPlayLive = [
-    { id: 0, src: "https://www.youtube.com/embed/1qfDkmtuWqg" },
-    { id: 1, src: "https://www.youtube.com/embed/b0eas9xxD-E" },
-    { id: 2, src: "https://www.youtube.com/embed/w0nd4ASTDdg" },
+    { id: 0, src: "https://www.youtube.com/embed/d36eeq0w1ug" },
+    { id: 1, src: "https://www.youtube.com/embed/ECQhkGweF90" },
+    { id: 2, src: "https://www.youtube.com/embed/9OVKqxvOsfY" },
   ];
 
   const EventLayout = () => {
     return (
       <div className="w-full">
-        <Banner events={Config.events} />
-        <MediaLayout events={Config.events} title="Events" id="events" />
+        <Banner events={events} />
+        <EventSection events={events} />
         <MediaLayout
+          aLayout
           reactPlayLive={reactPlayLive}
           title="ReactPlay Live"
           id="live"
diff --git a/public/hustleHomePage/HeroBanner.jpg b/public/hustleHomePage/HeroBanner.jpg
new file mode 100644
index 00000000..e05d0e09
Binary files /dev/null and b/public/hustleHomePage/HeroBanner.jpg differ
diff --git a/public/logo-bootcamp.png b/public/logo-bootcamp.png
new file mode 100644
index 00000000..c1ea95e8
Binary files /dev/null and b/public/logo-bootcamp.png differ
diff --git a/public/logos/logo-2plays.png b/public/logos/logo-2plays.png
new file mode 100644
index 00000000..73f8a14e
Binary files /dev/null and b/public/logos/logo-2plays.png differ
diff --git a/public/logos/logo-bootcamp-2.png b/public/logos/logo-bootcamp-2.png
new file mode 100644
index 00000000..4631a2a4
Binary files /dev/null and b/public/logos/logo-bootcamp-2.png differ
diff --git a/public/logos/logo-hack2play.png b/public/logos/logo-hack2play.png
new file mode 100644
index 00000000..cc5fa255
Binary files /dev/null and b/public/logos/logo-hack2play.png differ
diff --git a/public/logos/logo-workshop.png b/public/logos/logo-workshop.png
new file mode 100644
index 00000000..d431a7fa
Binary files /dev/null and b/public/logos/logo-workshop.png differ
diff --git a/public/twoplaysamonth/twoplaysamonth.png b/public/twoplaysamonth/twoplaysamonth.png
new file mode 100644
index 00000000..971c53aa
Binary files /dev/null and b/public/twoplaysamonth/twoplaysamonth.png differ
diff --git a/public/webdev101/webdev101.png b/public/webdev101/webdev101.png
new file mode 100644
index 00000000..8d3d3180
Binary files /dev/null and b/public/webdev101/webdev101.png differ
diff --git a/services/metadata/events.js b/services/metadata/events.js
new file mode 100644
index 00000000..cd1df7d1
--- /dev/null
+++ b/services/metadata/events.js
@@ -0,0 +1,675 @@
+export const events = [
+  {
+    id: 23,
+    name: "twoplaysamonth",
+    display: "#2PlaysAMonth",
+    logo: "logo-2plays.png",
+    slogan: {
+      title: "100% React event in the universe",
+      backgroundColor: "#66fec9",
+      borderColor: "#66fec9",
+      textColor: "#66fec9",
+    },
+    duration: "Feb 1-23, 2023",
+    description:
+      "ReactPlay brings you the opportunity to take part in the Hackathon and learn from it. Showcase your mindblowing ideas, build projects, and create content - there are also chances to win exciting prizes.",
+    keywords: "ReactPlay, #2PlaysAMonth, ReactJS",
+    completed: false,
+    started: false,
+    links: [
+      {
+        name: "About",
+        href: "#about",
+      },
+      {
+        name: "Sponsors",
+        href: "#sponsors",
+      },
+      {
+        name: "Judges",
+        href: "#judges",
+      },
+      {
+        name: "Faqs",
+        href: "#faqs",
+      },
+    ],
+    result_links: [
+      {
+        link: "https://github.com/reactplay/react-play/issues?q=is%3Aissue+label%3A%232PlaysAMonth+",
+        name: "Ideas",
+        target: "_blank",
+      },
+      {
+        link: "https://github.com/reactplay/react-play/pulls?q=is%3Apr+label%3A%232PlaysAMonth+",
+        name: "Submissions",
+        target: "_blank",
+      },
+    ],
+    subtitle:
+      "ReactPlay brings you an opportunity to participate in the month-long drive to learn and contribute to Open Source. Join the #2PlaysAMonth and build two projects(plays) in the month of February. You will learn from expert code reviews while contributing to Open Source - you may also win some exciting prizes.",
+    about: {
+      texts: [
+        "#2PlaysAMonth is an initiative from the ReactPlay community to help you learn, build, and simultaneously contribute to open source throughout the month of February.",
+        "Would you be up for it? Here are a few things to keep in mind before you get started:",
+      ],
+      bullets: [
+        "You must complete two plays(React Projects) in ReactPlay between February 1st to February 28th 2023.",
+        "You must follow the [Create a Play](https://github.com/reactplay/react-play/blob/main/CREATE-PLAY.md) steps to create the play. Please [create an issue](https://github.com/reactplay/react-play/issues/new?assignees=&labels=%232PlaysAMonth&template=%232PlaysAMonth.yml&title=%5B%232PlaysAMonth%5D%3A+) on the ReactPlay repository for each pull request.",
+        "Your play must have `#2PlaysAMonth` tag added to it while creating.",
+        "You can build any play of your choice. If you are looking for ideas, [here are some you can get inspired by](https://reactplay.io/ideas).",
+        "You must register on [stackstream](https://www.stack-stream.com/).",
+        "Create a demo on [stackstream](https://www.stack-stream.com/) explaining your work and add the recording link to your play by editing it.",
+        "Additionally, if you spend at least 5 hours streaming on [stackstream](https://www.stack-stream.com/) in the February month, you qualify for additional bonus points(karma) to win.",
+        "Share a Tweet and/or LinkedIn Post announcing your participation and PR merge with the hashtag `#2PlaysAMonth` and tag ReactPlay's handle(@ReactPlayIO)",
+      ],
+      footer:
+        "Please join the [ReactPlay discord server](https://discord.gg/UfYj4MvW9A) to get any help while you are building. Also, check the [FAQ](https://hustles.reactplay.io/events/23/twoplaysamonth#faqs) section for more details.",
+      highlights: [
+        "Complete 2 Plays using ReactJS",
+        "Demo your work",
+        "Win badges, prizes, and bonus points",
+      ],
+    },
+    judges: [
+      {
+        name: "Harshit Jain",
+        twitter: "jain_harshit",
+        title: "SDE3, Intuit",
+        avatar:
+          "https://pbs.twimg.com/profile_images/1523150875153567744/zpRDym_L_400x400.jpg",
+      },
+      {
+        name: "Kapeel Kokane",
+        twitter: "kokaneka",
+        title: "SDE2, Microsoft",
+        avatar:
+          "https://pbs.twimg.com/profile_images/1372919009939652612/E9s309tH_400x400.jpg",
+      },
+      {
+        name: "Koustov Maitra",
+        twitter: "koustov",
+        title: "Architect, ReactPlay",
+        avatar:
+          "https://pbs.twimg.com/profile_images/1443859238443360258/6_H-pDaM_400x400.jpg",
+      },
+      {
+        name: "Tapas Adhikary",
+        twitter: "tapasAdhikary",
+        title: "Founder, ReactPlay",
+        avatar:
+          "https://pbs.twimg.com/profile_images/1495457010598309888/zPrTNF4F_400x400.jpg",
+      },
+    ],
+    faqs: [
+      {
+        question: "Why should I participate in the #2PlaysAMonth event?",
+        answer:
+          "Do you like learning while building something? How about a platform that allows you to build a ReactJS application end-to-end, learn from the review comments, contribute to open source, showcase it to the world, and help build networking? #2PlaysAMonth aims precisely the same. Join the drive brought to you by ReactPlay and start building cool projects that we can't wait to see!",
+      },
+      {
+        question: "Do I need to Register for #2PlaysAMonth?",
+        answer:
+          "Nope. You can create the play by following the criteria mentioned in this page's About section.",
+      },
+      {
+        question: "Is it mandatory to create 2 plays?",
+        answer:
+          "Yes. That's one of the qualifying criteria. You must create and complete 2 plays.",
+      },
+      {
+        question: "What if my play review gets delayed?",
+        answer:
+          "You must ensure you give the reviewers enough time to review your code and provide comments. We're looking forward to 4-5 days(based on how actively you respond to the comments) to complete the review process of a play. Try submitting your plays at least 7-10 days before the end date to avoid messy situations. If your review gets delayed by reviewers, we will ensure you the extra time, but that will be a rare case!",
+      },
+      {
+        question: "Can we participate as a team?",
+        answer:
+          "Nope. It's an individual event. However, feel free to collaborate with others.",
+      },
+      {
+        question: "Can I use anything other than React?",
+        answer:
+          "ReactPlay is a platform to help web developers learn ReactJs and build projects. For this initiative, ReactJs is a must.",
+      },
+      {
+        question: "Can I submit my old React project as a play?",
+        answer:
+          "You can. However, could you please mention the old project in the play description? Also, the play should be something other than a 1-1 matching your existing project. You must bring some changes/ideas into it.",
+      },
+      {
+        question: "Can I submit code/project of someone else?",
+        answer:
+          "You shouldn't. Be authentic and ethical. It's an event to learn, not alone to win.",
+      },
+      {
+        question: "Is creating an issue for my PR a must?",
+        answer:
+          "Yes. We will disqualify the play submission that doesn't have an associated issue.",
+      },
+      {
+        question:
+          "Is announcing my participation and progress on the social media a must?",
+        answer:
+          "No. However, we encourage you to build and learn publicly. Make sure you add the tag #2PlaysAMonth and ReactPlay handle when you post them on social media.",
+      },
+      {
+        question: "Is recording a Demo of my work on stackstream a must?",
+        answer:
+          "Yes, we encourage you to share your work publicly and at the same time, get better at public speaking. Please register on stackstream and create your streams for free. Don't forget to add the stream recording link into the readme file of the related play.",
+      },
+      {
+        question:
+          "What about the 5 hours of streaming a month and bonus points?",
+        answer:
+          "There is a chance to win bonus points if you spend at least 5 hours streaming on stackstream in the February month. For each  hour, you will get a  bonus point(karma). You can use the stackstream platform for free in the entire duration of the #2PlaysAMonth challenge. You can collaborate, share your learnings, demo, etc. Based on your Karma points you got from your streaming and engagement , you can also win something (even if  you couldn't finish your play). Top 3 highest karma point holder will get 3 exciting prizes from stackstream (the threshold is 100 karma points).",
+      },
+      {
+        question: "When and How the #2PlaysAMonth result will be published?",
+        answer:
+          "The result will be published on 15th March. We will publish it on our website, blog, and Twitter handle(@reactplayio).",
+      },
+      {
+        question: "Do I get badges and prizes?",
+        answer:
+          "We will publish 3 winners and 3 special mentions based on our judging criteria. All winners, special mentions, and participants who completed the target will receive digital badges. We are working with our sponsors to decide the prizes for the winners.",
+      },
+      {
+        question: "I have questions, where can I ask them?",
+        answer:
+          "Got a question? Please join our Discord(the link is in the footer of this page). You can ask us anything in the #2PlaysAMonth channel.",
+      },
+    ],
+    cta: {
+      title: "Be a part of the best react event",
+      description:
+        "Learning is a journey than a destination. We, developers, need avenues, motivations, and opportunities to keep going. Join the #2PlaysAMonth initiative to experience it. It will allow you to build a ReactJS app using and learning from code reviews. Why waiting? Get started today.",
+    },
+    partners: [
+      {
+        image: "PartnersPolygon.svg",
+        text: "Grow your developer community. From now on, your community members never code alone.",
+        display: "stackstream",
+        link: "https://www.stack-stream.com/",
+      },
+    ],
+  },
+  {
+    id: 22,
+    name: "hackrplay",
+    display: "Hack-R-Play",
+    logo: "logo-hack2play.png",
+    slogan: {
+      title: "100% React event in the universe",
+      backgroundColor: "#66fec9",
+      borderColor: "#66fec9",
+      textColor: "#66fec9",
+    },
+    description:
+      "ReactPlay brings you the opportunity to take part in the Hackathon and learn from it. Showcase your mindblowing ideas, build projects, and create content - there are also chances to win exciting prizes.",
+    duration: "Feb 1-23, 2023",
+    completed: true,
+    links: [
+      {
+        name: "About",
+        href: "#about",
+      },
+      {
+        name: "Sponsors",
+        href: "#sponsors",
+      },
+      {
+        name: "Judges",
+        href: "#judges",
+      },
+      {
+        name: "Faqs",
+        href: "#faqs",
+      },
+    ],
+    submissionurl: "hackrplay/ideas",
+    subtitle:
+      "ReactPlay brings you the opportunity to take part in the Hackathon and learn from it. Showcase your mindblowing ideas, build projects, and create content - there are also chances to win exciting prizes",
+    about: {
+      texts: [
+        "Developers are lifetime hackers!",
+        "Hack-R-Play is an initiative from the ReactPlay platform to help you hack, build, learn, and simultaneously contribute open source through #hacktoberfest",
+        "All for it? Here are some rules you need to keep in mind:",
+      ],
+      bullets: [
+        "It must be built in React Ecosystem. (eg - ReactJS, NextJS, RemixJS etc)",
+        "The app must use one or more service of [Nhost backend](https://nhost.io)",
+        "Project source code must be open on github.",
+        "You must deploy the app publicly.",
+        "You must write an article about your journey of building it and publish it on the ReactPlay blog.",
+        "[Read more](https://blog.reactplay.io/announcing-hack-r-play-hackathon-from-react-play) on the ReactPlay repository for each pull request.",
+      ],
+      footer:
+        "Please join the [ReactPlay discord server](https://discord.gg/UfYj4MvW9A) to get any help while you are building.",
+      highlights: [
+        "Create 2 Plays using React",
+        "Share your journey publicly",
+        "Get the plays reviewed and merged",
+      ],
+    },
+    judges: [
+      {
+        name: "Johan Eliasson",
+        twitter: "elitasson",
+        title: "CEO Nhost",
+        avatar:
+          "https://pbs.twimg.com/profile_images/1447184004558557193/agXMdsqe_400x400.jpg",
+      },
+      {
+        name: "Koustov Maitra",
+        twitter: "koustov",
+        title: "Solution Architect, ReactPlay",
+        avatar:
+          "https://pbs.twimg.com/profile_images/1443859238443360258/6_H-pDaM_400x400.jpg",
+      },
+      {
+        name: "Pratim Bhosale",
+        twitter: "BhosalePratim",
+        title: "Developer Advocate, Nhost",
+        avatar:
+          "https://pbs.twimg.com/profile_images/1489130124792369154/-3M4AlrG_400x400.jpg",
+      },
+      {
+        name: "Tapas Adhikary",
+        twitter: "tapasAdhikary",
+        title: "Founder, ReactPlay",
+        avatar:
+          "https://pbs.twimg.com/profile_images/1495457010598309888/zPrTNF4F_400x400.jpg",
+      },
+    ],
+    faqs: [
+      {
+        question: "Why should I perticipate in the Hack-R-Play?",
+        answer:
+          "Do you like learning while building something? How about a platform that provides you with an opportunity to build a full-stack application end-to-end, showcase it to the world, motivate you to create content about it, and help build networking? Hack-R-Play aims precisely the same. Join the Hackathon brought to you by ReactPlay and start building a cool project that we can't wait to see!",
+      },
+      {
+        question: "Do I need to Register for Hack-R-Play?",
+        answer:
+          "Yes, you need to Register your idea for the Hack-R-Play hackathon. To do that, click on the REGISTER button at the top of the page and submit a few details to register your idea.",
+      },
+      {
+        question: "Can we participate as a team?",
+        answer:
+          "Yes, you can participate in a team of 2(max). You can select the other member's name when you register your idea for the event. If you are the only person registering for an idea, just skip selecting any member while registering. If you liked an idea and want be part of it, please contact the idea creator.",
+      },
+      {
+        question: "Does my Idea needs to follow a specific theme?",
+        answer:
+          "Not really! However, we suggest you build something valuable that you will keep building even after the Hack-R-Play Event. Rest is entirely up to you.",
+      },
+      {
+        question: "Can I use anything other than React?",
+        answer:
+          "You can use anything related to React and its ecosystem. You can use Next.js, Gatsby, React Native, and even plain React!",
+      },
+      {
+        question: "What do I need to Submit?",
+        answer:
+          "When you submit the project after completion, you submit three public links. Link to your project source code, link to your application, and link to the article that explains how you have used React/React-based library/framework with Nhost to build this application.",
+      },
+      {
+        question: "Is the blog article mandatory to submit?",
+        answer:
+          "Yes, very much! Please document your entire Hack-R-Play journey and publish them on the ReactPlay blog(blog.reactplay.io). Don't worry if you are not a seasoned blogger. We will help with reviews if you submit the blog article at least 3 days before the event's end date.",
+      },
+      {
+        question: "When and How the Hack-R-Play result will be published?",
+        answer:
+          "Hack-R-Play 2022 results will be published on 30th October. We will publish it on our website, and the Twitter handle(@reactplayio).",
+      },
+      {
+        question: "Do we get prizes?",
+        answer:
+          "Yes, we will select 3 best ideas to give the exciting prizes sponsored by Nhost.",
+      },
+      {
+        question: "I have questions, where can I ask them?",
+        answer:
+          "Got a question? Please join our Discord(the link is in the footer of this page). You can ask us anything in the hack-r-play channel.",
+      },
+    ],
+    cta: {
+      title: "Be a part of the best react event",
+      description:
+        "Learning is a journey than a destination. We developers need avenues, motivations, and opportunities to keep going. Join the Hack-R-Play hackathon to experience it. It will allow you to build a full-stack app using React and Nhost. Why waiting? Register your idea today",
+    },
+    partners: [
+      {
+        logo: "NhostLogo.svg",
+        text: "Nhost is the open source GraphQL backend (Firebase Alternative) and a development platform. Nhost is doing for the backend, what Netlify and Vercel are doing for the frontend. It make things easy to build and deploy this backend using our platform that takes care of configuration, security, and performance. Things just works andscale automatically so you can focus on your product and on your business.",
+        display: "NHost",
+        link: "https://docs.nhost.io/",
+      },
+    ],
+    winners: [
+      {
+        name: "Chakri",
+        twitter: "https://twitter.com/geekyChakri",
+        github: "https://github.com/GeekyChakri",
+        email: "geekychakri@gmail.com",
+        avatar:
+          "https://pbs.twimg.com/profile_images/1532395278107435011/jBTuAENH_400x400.png",
+        projectName: "Classroom",
+        projectLink: "https://learnwithclassroom.vercel.app",
+        article:
+          "https://blog.reactplay.io/introducing-classroom-learning-with-youtube-made-exciting",
+        projectSource: "https://github.com/GeekyChakri/Classroom",
+
+        position: "1",
+      },
+      {
+        name: "Shyam Mahanta",
+        twitter: "https://twitter.com/ShyamMahanta2",
+        github: "https://github.com/Angryman18",
+        email: "smahanta118@gmail.com",
+        avatar: "https://avatars.githubusercontent.com/u/63530626?v=4",
+        projectName: "Papercode",
+        projectLink: "https://papercode.netlify.app/",
+        projectSource: "https://github.com/Angryman18/papercode",
+
+        article:
+          "https://blog.reactplay.io/tour-of-a-live-coding-playground-app-built-using-reactjs-nhost",
+        position: "2",
+      },
+      {
+        name: "Aashish Panthi",
+        twitter: "https://twitter.com/aashishpanthi11",
+        github: "https://github.com/aashishpanthi",
+        email: "aashishpanthi11@gmail.com",
+        avatar: "https://avatars.githubusercontent.com/u/60884239?v=4",
+        projectName: "Mailsbe",
+        projectLink: "https://mailsbe.netlify.app/",
+        projectSource: "https://github.com/aashishpanthi/mailsbe",
+        article: "https://blog.reactplay.io/mailsbe-an-email-status-finder",
+        position: "3",
+      },
+    ],
+    mentions: [
+      {
+        name: "Supriya M",
+        twitter: "https://twitter.com/supminn",
+        github: "https://github.com/supminn",
+        email: "sansup49@gmail.com",
+        avatar: "https://avatars.githubusercontent.com/u/30731236?v=4",
+        projectName: "FinSaver",
+        projectLink: "https://finsaver.vercel.app/",
+        projectSource: "https://github.com/supminn/expense_tracker",
+
+        article: "https://blog.reactplay.io/building-finsaver-for-hack-r-play",
+      },
+      {
+        name: "Armaan Kazi",
+        twitter: "https://twitter.com/Armankazi111",
+        github: "https://github.com/Amyx000/",
+        email: "armankazi111@gmail.com",
+        avatar: "https://avatars.githubusercontent.com/u/104687128?v=4",
+        projectName: "React Resume Builder",
+        projectLink: "https://react--resume--builder.vercel.app/",
+        projectSource: "https://github.com/Amyx000/React-Resume-Builder",
+
+        article:
+          "https://blog.reactplay.io/react-resume-builder-with-react-and-nhost",
+      },
+      {
+        name: "Ammaar Aslam",
+        twitter: "https://twitter.com/itsammaar_7",
+        github: "https://github.com/ammaaraslam",
+        email: "ammaaraslam7@gmail.com",
+        avatar:
+          "https://avatars.githubusercontent.com/u/96367405?s=400&u=cb1c3999b75b33502f3149fd47b251731be286e7&v=4",
+        projectName: "WriteOnce",
+        projectLink: "https://writeonce.vercel.app/",
+        projectSource: "https://github.com/ammaaraslam/write-once",
+
+        article:
+          "https://blog.reactplay.io/introducing-writeonce-a-markdown-editor-for-devs-who-blog",
+      },
+    ],
+  },
+  {
+    id: 21,
+    name: "bootcamp101",
+    display: "Bootcamp 101",
+    link: "https://www.showwcase.com/series/11592/web-development-bootcamp-101",
+    external: true,
+    logo: "logo-bootcamp-2.png",
+    slogan: {
+      title: "100% React event in the universe",
+      backgroundColor: "#66fec9",
+      borderColor: "#66fec9",
+      textColor: "#66fec9",
+    },
+    description:
+      "This bootcamp emphaizes on the fundamental concepts of web development to help beginners gain a foundational understanding of the subject",
+    duration: "Feb 1-23, 2023",
+    completed: true,
+    links: [
+      {
+        name: "About",
+        href: "#about",
+      },
+      {
+        name: "Sponsors",
+        href: "#sponsors",
+      },
+      {
+        name: "Judges",
+        href: "#judges",
+      },
+      {
+        name: "Faqs",
+        href: "#faqs",
+      },
+    ],
+    submissionurl: "hackrplay/ideas",
+    subtitle:
+      "ReactPlay brings you the opportunity to take part in the Hackathon and learn from it. Showcase your mindblowing ideas, build projects, and create content - there are also chances to win exciting prizes",
+    about: {
+      texts: [
+        "Developers are lifetime hackers!",
+        "Hack-R-Play is an initiative from the ReactPlay platform to help you hack, build, learn, and simultaneously contribute open source through #hacktoberfest",
+        "All for it? Here are some rules you need to keep in mind:",
+      ],
+      bullets: [
+        "It must be built in React Ecosystem. (eg - ReactJS, NextJS, RemixJS etc)",
+        "The app must use one or more service of [Nhost backend](https://nhost.io)",
+        "Project source code must be open on github.",
+        "You must deploy the app publicly.",
+        "You must write an article about your journey of building it and publish it on the ReactPlay blog.",
+        "[Read more](https://blog.reactplay.io/announcing-hack-r-play-hackathon-from-react-play) on the ReactPlay repository for each pull request.",
+      ],
+      footer:
+        "Please join the [ReactPlay discord server](https://discord.gg/UfYj4MvW9A) to get any help while you are building.",
+      highlights: [
+        "Create 2 Plays using React",
+        "Share your journey publicly",
+        "Get the plays reviewed and merged",
+      ],
+    },
+    judges: [
+      {
+        name: "Johan Eliasson",
+        twitter: "elitasson",
+        title: "CEO Nhost",
+        avatar:
+          "https://pbs.twimg.com/profile_images/1447184004558557193/agXMdsqe_400x400.jpg",
+      },
+      {
+        name: "Koustov Maitra",
+        twitter: "koustov",
+        title: "Solution Architect, ReactPlay",
+        avatar:
+          "https://pbs.twimg.com/profile_images/1443859238443360258/6_H-pDaM_400x400.jpg",
+      },
+      {
+        name: "Pratim Bhosale",
+        twitter: "BhosalePratim",
+        title: "Developer Advocate, Nhost",
+        avatar:
+          "https://pbs.twimg.com/profile_images/1489130124792369154/-3M4AlrG_400x400.jpg",
+      },
+      {
+        name: "Tapas Adhikary",
+        twitter: "tapasAdhikary",
+        title: "Founder, ReactPlay",
+        avatar:
+          "https://pbs.twimg.com/profile_images/1495457010598309888/zPrTNF4F_400x400.jpg",
+      },
+    ],
+    faqs: [
+      {
+        question: "Why should I perticipate in the Hack-R-Play?",
+        answer:
+          "Do you like learning while building something? How about a platform that provides you with an opportunity to build a full-stack application end-to-end, showcase it to the world, motivate you to create content about it, and help build networking? Hack-R-Play aims precisely the same. Join the Hackathon brought to you by ReactPlay and start building a cool project that we can't wait to see!",
+      },
+      {
+        question: "Do I need to Register for Hack-R-Play?",
+        answer:
+          "Yes, you need to Register your idea for the Hack-R-Play hackathon. To do that, click on the REGISTER button at the top of the page and submit a few details to register your idea.",
+      },
+      {
+        question: "Can we participate as a team?",
+        answer:
+          "Yes, you can participate in a team of 2(max). You can select the other member's name when you register your idea for the event. If you are the only person registering for an idea, just skip selecting any member while registering. If you liked an idea and want be part of it, please contact the idea creator.",
+      },
+      {
+        question: "Does my Idea needs to follow a specific theme?",
+        answer:
+          "Not really! However, we suggest you build something valuable that you will keep building even after the Hack-R-Play Event. Rest is entirely up to you.",
+      },
+      {
+        question: "Can I use anything other than React?",
+        answer:
+          "You can use anything related to React and its ecosystem. You can use Next.js, Gatsby, React Native, and even plain React!",
+      },
+      {
+        question: "What do I need to Submit?",
+        answer:
+          "When you submit the project after completion, you submit three public links. Link to your project source code, link to your application, and link to the article that explains how you have used React/React-based library/framework with Nhost to build this application.",
+      },
+      {
+        question: "Is the blog article mandatory to submit?",
+        answer:
+          "Yes, very much! Please document your entire Hack-R-Play journey and publish them on the ReactPlay blog(blog.reactplay.io). Don't worry if you are not a seasoned blogger. We will help with reviews if you submit the blog article at least 3 days before the event's end date.",
+      },
+      {
+        question: "When and How the Hack-R-Play result will be published?",
+        answer:
+          "Hack-R-Play 2022 results will be published on 30th October. We will publish it on our website, and the Twitter handle(@reactplayio).",
+      },
+      {
+        question: "Do we get prizes?",
+        answer:
+          "Yes, we will select 3 best ideas to give the exciting prizes sponsored by Nhost.",
+      },
+      {
+        question: "I have questions, where can I ask them?",
+        answer:
+          "Got a question? Please join our Discord(the link is in the footer of this page). You can ask us anything in the hack-r-play channel.",
+      },
+    ],
+    cta: {
+      title: "Be a part of the best react event",
+      description:
+        "Learning is a journey than a destination. We developers need avenues, motivations, and opportunities to keep going. Join the Hack-R-Play hackathon to experience it. It will allow you to build a full-stack app using React and Nhost. Why waiting? Register your idea today",
+    },
+    partners: [
+      {
+        logo: "NhostLogo.svg",
+        text: "Nhost is the open source GraphQL backend (Firebase Alternative) and a development platform. Nhost is doing for the backend, what Netlify and Vercel are doing for the frontend. It make things easy to build and deploy this backend using our platform that takes care of configuration, security, and performance. Things just works andscale automatically so you can focus on your product and on your business.",
+        display: "NHost",
+        link: "https://docs.nhost.io/",
+      },
+    ],
+    winners: [
+      {
+        name: "Chakri",
+        twitter: "https://twitter.com/geekyChakri",
+        github: "https://github.com/GeekyChakri",
+        email: "geekychakri@gmail.com",
+        avatar:
+          "https://pbs.twimg.com/profile_images/1532395278107435011/jBTuAENH_400x400.png",
+        projectName: "Classroom",
+        projectLink: "https://learnwithclassroom.vercel.app",
+        article:
+          "https://blog.reactplay.io/introducing-classroom-learning-with-youtube-made-exciting",
+        projectSource: "https://github.com/GeekyChakri/Classroom",
+
+        position: "1",
+      },
+      {
+        name: "Shyam Mahanta",
+        twitter: "https://twitter.com/ShyamMahanta2",
+        github: "https://github.com/Angryman18",
+        email: "smahanta118@gmail.com",
+        avatar: "https://avatars.githubusercontent.com/u/63530626?v=4",
+        projectName: "Papercode",
+        projectLink: "https://papercode.netlify.app/",
+        projectSource: "https://github.com/Angryman18/papercode",
+
+        article:
+          "https://blog.reactplay.io/tour-of-a-live-coding-playground-app-built-using-reactjs-nhost",
+        position: "2",
+      },
+      {
+        name: "Aashish Panthi",
+        twitter: "https://twitter.com/aashishpanthi11",
+        github: "https://github.com/aashishpanthi",
+        email: "aashishpanthi11@gmail.com",
+        avatar: "https://avatars.githubusercontent.com/u/60884239?v=4",
+        projectName: "Mailsbe",
+        projectLink: "https://mailsbe.netlify.app/",
+        projectSource: "https://github.com/aashishpanthi/mailsbe",
+        article: "https://blog.reactplay.io/mailsbe-an-email-status-finder",
+        position: "3",
+      },
+    ],
+    mentions: [
+      {
+        name: "Supriya M",
+        twitter: "https://twitter.com/supminn",
+        github: "https://github.com/supminn",
+        email: "sansup49@gmail.com",
+        avatar: "https://avatars.githubusercontent.com/u/30731236?v=4",
+        projectName: "FinSaver",
+        projectLink: "https://finsaver.vercel.app/",
+        projectSource: "https://github.com/supminn/expense_tracker",
+
+        article: "https://blog.reactplay.io/building-finsaver-for-hack-r-play",
+      },
+      {
+        name: "Armaan Kazi",
+        twitter: "https://twitter.com/Armankazi111",
+        github: "https://github.com/Amyx000/",
+        email: "armankazi111@gmail.com",
+        avatar: "https://avatars.githubusercontent.com/u/104687128?v=4",
+        projectName: "React Resume Builder",
+        projectLink: "https://react--resume--builder.vercel.app/",
+        projectSource: "https://github.com/Amyx000/React-Resume-Builder",
+
+        article:
+          "https://blog.reactplay.io/react-resume-builder-with-react-and-nhost",
+      },
+      {
+        name: "Ammaar Aslam",
+        twitter: "https://twitter.com/itsammaar_7",
+        github: "https://github.com/ammaaraslam",
+        email: "ammaaraslam7@gmail.com",
+        avatar:
+          "https://avatars.githubusercontent.com/u/96367405?s=400&u=cb1c3999b75b33502f3149fd47b251731be286e7&v=4",
+        projectName: "WriteOnce",
+        projectLink: "https://writeonce.vercel.app/",
+        projectSource: "https://github.com/ammaaraslam/write-once",
+
+        article:
+          "https://blog.reactplay.io/introducing-writeonce-a-markdown-editor-for-devs-who-blog",
+      },
+    ],
+  },
+];
diff --git a/services/metadata/home.js b/services/metadata/home.js
index 769ee8aa..a43e0a66 100644
--- a/services/metadata/home.js
+++ b/services/metadata/home.js
@@ -36,7 +36,7 @@ export const Config = {
       id: 0,
       name: "Hack-R-Play",
       description:
-        "ReactPlay brings you the opportunity to take part in the Hackathon and learn from it. Showcase your mindblowing ideas, build projects, and create content - there are also chances to win exciting prizes.",
+        "ReactPlay brings you an opportunity to participate in the month-long drive to learn and contribute to Open Source. Join the #2PlaysAMonth and build two projects(plays) in the month of February. You will learn from expert code reviews while contributing to Open Source - you may also win some exciting prizes",
       image: "hackrplay/BannerLogo",
       link: `/events/22/hackrplay`,
       isCompleted: true,
@@ -47,18 +47,18 @@ export const Config = {
       name: "2PlaysaMonth",
       description:
         "ReactPlay brings you an opportunity to participate in the month-long drive to learn and contribute to Open Source. Join the #2PlaysAMonth and build two projects(plays) in the month of February. You will learn from expert code reviews while contributing to Open Source - you may also win some exciting prize",
-      image: "twoplaysamonth/NavbarLogo",
+      image: "twoplaysamonth/twoplaysamonth",
       link: `/events/23/twoplaysamonth`,
       isCompleted: true,
       isCurrent: false,
     },
     {
       id: 2,
-      name: "2PlaysaMonth",
+      name: "WebDev Basics 101",
       description:
-        "ReactPlay brings you an opportunity to participate in the month-long drive to learn and contribute to Open Source. Join the #2PlaysAMonth and build two projects(plays) in the month of February. You will learn from expert code reviews while contributing to Open Source - you may also win some exciting prize",
-      image: "twoplaysamonth/NavbarLogo",
-      link: `/events/23/twoplaysamonth`,
+        "This bootcamp was presented by Pritesh Kiri in association with ReactPlay. It deals with the fundamental concepts of web development to help beginners develop a solid foundation. It also provided hands-on experience through practical exercises and projects that aimed to impart a comprehensive knowledge on web development.",
+      image: "webdev101/webdev101",
+      link: `https://www.showwcase.com/series/11592/web-development-bootcamp-101`,
       isCompleted: true,
       isCurrent: false,
     },
@@ -66,53 +66,67 @@ export const Config = {
 
   twitterSpaces: [
     {
-      id: 0,
-      link: "https://twitter.com/i/spaces/1OdKrBXaBrOKX",
-      guestSpeaker: "Nikhil",
-      title: "Catch up with Nikhil - UX, Design Systems, OSS, React, and more.",
-      date: "Aug 3, 2022",
+      id: 9,
+      link: "https://twitter.com/i/spaces/1YpKkgYOyLPKj",
+      guestSpeaker: "Basharath and Prashant",
+      title: "Growth of Developers in the Age of AI",
+      date: "May 22, 2023",
     },
     {
-      id: 1,
-      link: "https://twitter.com/i/spaces/1zqJVPQobgnKB",
-      guestSpeaker: "Shruti",
-      title: "Catch up with Shruti - CSS, Design, Tailwind, and more!",
-      date: "Sep 2, 2022",
+      id: 8,
+      link: "https://twitter.com/i/spaces/1kvKpmEmyXgGE",
+      guestSpeaker: "Swapnil and Shripal",
+      title: "How to get your first client as a freelance web developer? 🚀",
+      date: "May 8, 2023",
     },
     {
-      id: 2,
+      id: 7,
+      link: "https://twitter.com/i/spaces/1DXxyvXAONVKM",
+      guestSpeaker: "Pratim and Prashant",
+      title: "Content Creation: A gateway to Opportunities 🚀",
+      date: "Apr 13, 2023",
+    },
+    {
+      id: 6,
+      link: "https://twitter.com/i/spaces/1RDxlaoZopEKL",
+      guestSpeaker: "Ritesh",
+      title: "Catching up with Ritesh - #2PlaysAMonth special episode",
+      date: "Feb 3, 2023",
+    },
+    {
+      id: 5,
+      link: "https://twitter.com/i/spaces/1MYxNgzkeNzKw",
+      guestSpeaker: "Victoria",
+      title: "Catching up with Victoria - Career, Dev wellbeing, Blogging",
+      date: "Jan 13, 2023",
+    },
+    {
+      id: 4,
+      link: "https://twitter.com/i/spaces/1djGXlmrMYOGZ",
+      guestSpeaker: "Ajin",
+      title: "Catch up with Ajin - react native, flutter, career and more !",
+      date: "Nov 18, 2022",
+    },
+    {
+      id: 3,
       link: "https://twitter.com/i/spaces/1djxXljXOpVxZ",
       guestSpeaker: "Swapna",
       title: "Catch up with Swapna - Content, Career, DSA, and more!",
       date: "Oct 13, 2022",
     },
-    // {
-    //   id: 3,
-    //   link: "https://twitter.com/i/spaces/1DXxyvzankdKM",
-    //   guestSpeaker: "Aakansha",
-    //   title: "Catch up with Aakansha - Side hustles, Open Source, and more!",
-    //   date: null,
-    // },
-    // {
-    //   id: 4,
-    //   link: "https://twitter.com/i/spaces/1djGXlmrMYOGZ",
-    //   guestSpeaker: "Ajin",
-    //   title: "Catch up with Ajin - react native, flutter, career and more !",
-    //   date: "Nov 18, 2022",
-    // },
-    // {
-    //   id: 5,
-    //   link: "https://twitter.com/i/spaces/1MYxNgzkeNzKw",
-    //   guestSpeaker: "Victoria",
-    //   title: "Catching up with Victoria - Career, Dev wellbeing, Blogging",
-    //   date: "Jan 13, 2023",
-    // },
-    // {
-    //   id: 6,
-    //   link: "https://twitter.com/i/spaces/1RDxlaoZopEKL",
-    //   guestSpeaker: "Ritesh",
-    //   title: "Catching up with Ritesh - #2PlaysAMonth special episode",
-    //   date: "Feb 3, 2023",
-    // },
+    {
+      id: 2,
+      link: "https://twitter.com/i/spaces/1zqJVPQobgnKB",
+      guestSpeaker: "Shruti",
+      title: "Catch up with Shruti - CSS, Design, Tailwind, and more!",
+      date: "Sep 2, 2022",
+    },
+    {
+      id: 1,
+      link: "https://twitter.com/i/spaces/1djGXlmrMYOGZ",
+      guestSpeaker: "Nikhil",
+      title: "Catch up with Ajin - react native, flutter, career and more !",
+      date: "Nov 18, 2022",
+    },
   ],
 };