diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx
index 3592acc..986c9fe 100644
--- a/src/components/Hero.jsx
+++ b/src/components/Hero.jsx
@@ -5,7 +5,7 @@ import { imgURLs } from '../data/eventsData';
 
 const Hero = () => {
 	return (
-		<div className='mx-5 lg:mx-14 xl:max-w-[1483px]'>
+		<div className='mx-5 lg:mx-14 xl:max-w-[1483px] -z-1 relative'>
 			<div className='flex flex-col md:flex-row justify-center items-center min-h-screen gap-20 lg:gap-10'>
 				<div className='w-[100%] md:w-1/2 h-fit'>
 					<div className='flex flex-col justify-end ml-2' style={{ color: '#FF4409' }}>
diff --git a/src/components/shared/NavBar.jsx b/src/components/shared/NavBar.jsx
index 5d578d9..9688e34 100644
--- a/src/components/shared/NavBar.jsx
+++ b/src/components/shared/NavBar.jsx
@@ -16,9 +16,9 @@ function NavBar() {
 	};
 
 	return (
-		<nav style={{ position: 'sticky', top: '0' }}>
+		<nav className='sticky top-0 z-20'>
 			<div
-				className='navbar flex justify-between items-center opacity-53 bg-hard-light bg-center bg-cover bg-[#F9F5F2] h-[73.8px] overflow-hidden pl-10 '
+				className='navbar flex justify-between items-center opacity-53 bg-hard-light bg-center bg-cover bg-[#F9F5F2] h-[73.8px] overflow-hidden pl-10'
 				style={{ backgroundImage: `url(${image})` }}>
 				<Logo src={logo.src} alt={logo.alt} />
 				<div className={`navitem md:flex ${isNavOpen ? 'hidden' : 'flex'} hidden`}>
diff --git a/src/pages/home.jsx b/src/pages/home.jsx
index 437c9fd..d22453d 100644
--- a/src/pages/home.jsx
+++ b/src/pages/home.jsx
@@ -1,34 +1,17 @@
-import { Link } from 'react-router-dom';
-import { Button } from '../components/ui/button';
+import AboutUs from '../components/AboutUs';
+import FAQ from '../components/FaqSection/faq';
+import Hero from '../components/Hero';
+import Navbar from '../components/shared/NavBar';
+import Footer from '../components/shared/marginals/footer';
 
 export default function Home() {
 	return (
-		<div className='container py-6'>
-			<h1 className='text-3xl font-bold'>1999 Reunion Tour</h1>
-			<div className='mt-4'>
-				<h2 className='text-xl font-bold'>How to contribute</h2>
-				<p>
-					1. Store content and other data in <code className='bg-gray-200 p-1 rounded-sm'>data</code> folder.
-				</p>
-				<p>
-					2. Store reusable components in <code className='bg-gray-200 p-1'>components</code> folder.
-				</p>
-				<p>
-					3. Store pages in <code className='bg-gray-200 p-1'>pages</code> folder.
-				</p>
-				<p>
-					4. Add custom styles in <code className='bg-gray-200 p-1'>tailwind.config.css</code> file.
-				</p>
-				<p>
-					5. Add shared ui in <code className='bg-gray-200 p-1'>ui</code> folder.
-				</p>
-				<p>
-					6. Add images and other assets in <code className='bg-gray-200 p-1'>assets</code> folder.
-				</p>
-			</div>
-			<Link to='/play'>
-				<Button>Go to playground</Button>
-			</Link>
+		<div className=''>
+			<Navbar />
+			<Hero />
+			<AboutUs />
+			<FAQ />
+			<Footer />
 		</div>
 	);
 }