diff --git a/src/components/Home/HomePage.tsx b/src/components/Home/HomePage.tsx
new file mode 100644
index 0000000..195e4ed
--- /dev/null
+++ b/src/components/Home/HomePage.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { Container, Row, Col, Button } from 'react-bootstrap';
+import { useRouter } from 'next/router';
+
+const HomePage: React.FC = () => {
+  const router = useRouter();
+
+  const handleGetStarted = () => {
+    router.push('/get-started');
+  };
+
+  return (
+    <Container fluid className="hero-section">
+      <Row className="justify-content-center">
+        <Col md={8} className="text-center">
+          <h1>Welcome to Hackathon Open Platform</h1>
+          <p>Your gateway to a world of coding challenges and collaboration!</p>
+          <Button variant="primary" size="lg" onClick={handleGetStarted}>Get Started</Button>
+        </Col>
+      </Row>
+    </Container>
+  );
+};
+
+export default HomePage;
diff --git a/src/styles/homepage.module.css b/src/styles/homepage.module.css
new file mode 100644
index 0000000..0fe2f98
--- /dev/null
+++ b/src/styles/homepage.module.css
@@ -0,0 +1,24 @@
+.hero-section {
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: linear-gradient(to right, #007bff, #00c6ff);
+  color: white;
+}
+
+h1 {
+  font-size: 3rem;
+  font-weight: bold;
+}
+
+p {
+  font-size: 1.2rem;
+  margin: 20px 0;
+}
+
+button {
+  font-size: 1.2rem;
+  padding: 10px 20px;
+  border-radius: 5px;
+}