diff --git a/package.json b/package.json
index c1b002ec..9edf02a4 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "commclassroom",
   "private": false,
-  "homepage": "https://commclassroom.github.io/commclassroom",
+  "homepage": "https://commclassroom.org",
   "dependencies": {
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
diff --git a/public/404.html b/public/404.html
index 29a1e82b..69cab159 100644
--- a/public/404.html
+++ b/public/404.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <title>Single Page Apps for GitHub Pages</title>
     <script type="text/javascript">
-      var pathSegmentsToKeep = 1;
+      var pathSegmentsToKeep = 0;
 
       var l = window.location;
       l.replace(
@@ -19,4 +19,4 @@
   </head>
   <body>
   </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/public/CNAME b/public/CNAME
new file mode 100644
index 00000000..21b7280c
--- /dev/null
+++ b/public/CNAME
@@ -0,0 +1 @@
+commclassroom.org
diff --git a/src/App.js b/src/App.js
index e4be23a8..dc62a1a0 100644
--- a/src/App.js
+++ b/src/App.js
@@ -10,12 +10,11 @@ import Hashnode from './pages/Hashnode.js'
 const App = () => {
   return (
     <div className="main">
-    <Routes basename={"/commclassroom"}>
-      <Route exact path="/co" element={<HomePage/>} />
-      <Route path="/commclassroom/course" element={<Course />} />
-      <Route path="/commclassroom/event" element={<Events />} />
-      <Route path="/commclassroom/roadmaps" element={<Roadmaps />} />
-      <Route path="/commclassroom/Hashnode" element={<Hashnode />} />
+    <Routes>
+      <Route exact path="/" element={<HomePage/>} />
+      <Route path="/course" element={<Course />} />
+      <Route path="/event" element={<Events />} />
+      <Route path="/roadmaps" element={<Roadmaps />} />
     </Routes>
     </div>
   )
diff --git a/src/components/Course/Card.js b/src/components/Course/Card.js
new file mode 100644
index 00000000..27579303
--- /dev/null
+++ b/src/components/Course/Card.js
@@ -0,0 +1,15 @@
+import React from 'react'
+
+const Card = ({ course = {} }) => {
+    return (
+        <div className="course_cont_2_card">
+            <img className="course_cont_2_card_1" src={course.image} alt={course.title} />
+            <p className="course_cont_2_card_1_heading"> {course.title} </p>
+            <p className="course_cont_2_card_1_para_1">
+                {course.description}
+            </p>
+        </div>
+    )
+}
+
+export default Card
\ No newline at end of file
diff --git a/src/components/Course/CardsList.js b/src/components/Course/CardsList.js
new file mode 100644
index 00000000..1c697170
--- /dev/null
+++ b/src/components/Course/CardsList.js
@@ -0,0 +1,14 @@
+import React from 'react'
+import Card from './Card'
+
+const CardsList = ({courses}) => {
+  return (
+    <div className="course_cont_2">
+        {
+            courses.map(course => <Card course={course}></Card>)
+        }
+    </div>
+  )
+}
+
+export default CardsList
\ No newline at end of file
diff --git a/src/components/Course/Course.js b/src/components/Course/Course.js
index b1507600..bfd8939e 100644
--- a/src/components/Course/Course.js
+++ b/src/components/Course/Course.js
@@ -1,112 +1,16 @@
 import React from 'react'
+import Header from './Header'
+import CardsList from './CardsList'
+import { courses } from './data'
 import './course.css'
-import Learning from '../../assets/Learning.png'
-import Notes from '../../assets/Notes.png'
-import Assignment from '../../assets/Assignment.png'
-import DoubtSupport from '../../assets/DoubtSupport.png'
-import Guidance from '../../assets/Guidance.png'
-import Projects from '../../assets/Project.png'
-import Dsa from '../../assets/DSA.png'
-import Github from '../../assets/Github.png'
-import MachineLearning from '../../assets/MachineLearning.png'
-import SystemDesign from '../../assets/SystemDesign.png'
-import FullStack from '../../assets/FullStack.png'
-import DevOps from '../../assets/DevOps.png'
-import Python from '../../assets/Python.png'
 
 const course = () => {
   return (
     <>
-    <div className="course_cont_1">
-        <div className="course_cont_a">
-            <p className="course_cont_para">
-            Boost your career with our free hands-on courses.
-            </p>
-        </div>
-        <div className="course_cont_b">
-          <div className="course_cont_b_1">
-              <div className="course_cont_b_1_frame_1">
-                  <img  src={Learning} alt="Learning" /> 
-                  <p> Structured Learning </p>
-              </div>
-              <div className="course_cont_b_1_frame_2">
-                  <img src={Notes} alt="Learning" /> 
-                  <p> Notes </p>
-                </div>
-              <div className="course_cont_b_1_frame_3">
-                  <img src={Assignment} alt="Learning" /> 
-                  <p> Assignments </p>
-              </div>
-           </div>
-          <div className="course_cont_b_2">
-              <div className="course_cont_b_1_frame_4">
-                <img src={DoubtSupport} alt="Learning" /> 
-                <p> Doubt Support </p>
-               </div>
-              <div className="course_cont_b_1_frame_5">
-                <img  src={Guidance} alt="Learning" /> 
-                <p> Guidance </p>
-              </div>
-              <div className="course_cont_b_1_frame_6">
-                <img  src={Projects} alt="Learning" /> 
-                 <p> Projects </p>
-              </div>
-          </div>
-      </div>
-      </div>
-    <div className="course_cont_2">
-    <div className="course_cont_2_card">
-        <img className="course_cont_2_card_1" src={Dsa} />
-        <p className="course_cont_2_card_1_heading"> Data Structures and Algorithm in Java </p>
-        <p className="course_cont_2_card_1_para_1"> 
-        Got no programming knowledge ? No worries. Become an expert at solving simple to complex LeetCode problems with ease and become interview-ready.
-        </p>
-     </div>
-   <div className="course_cont_2_card">
-        <img className="course_cont_2_card_1" src={Github} />
-        <p className="course_cont_2_card_1_heading">Develop your knowledge of Git and GitHub. </p>
-        <p className="course_cont_2_card_1_para_1">
-        Start out your exploration of open source with the comprehensive Git & GitHub tutorial, which covers both basic and advanced concepts.
-        </p>
-    </div>
-  <div className="course_cont_2_card">
-        <img className="course_cont_2_card_1" src={DevOps} />
-        <p className="course_cont_2_card_1_heading">Beginner to Advanced DevOps </p>
-        <p className="course_cont_2_card_1_para_1">
-          DevOps engineer is without a doubt the most in-demand position on the market right now, particularly with the rise of high-paying remote possibilities. Learn DevOps from scratch here.
-      </p>
-  </div>
-  <div className="course_cont_2_card">
-        <img className="course_cont_2_card_1" src={FullStack} />
-        <p className="course_cont_2_card_1_heading"> Web Development</p>
-        <p className="course_cont_2_card_1_para_1">
-          Build credible, work-like projects to gain proficiency in React, NodeJS, MongoDB, Javascript, and other technologies to launch a successful career as a developer.
-        </p>
-  </div>
-   <div className="course_cont_2_card">
-        <img className="course_cont_2_card_1" src={Python} />
-        <p className="course_cont_2_card_1_heading"> Learn Python from A to Z </p>
-        <p className="course_cont_2_card_1_para_1">
-          Get introduced to all of the Python developer skills in this course and construct practical projects along the way to add to your portfolio.
-        </p>
-  </div>
-  <div className="course_cont_2_card">
-        <img className="course_cont_2_card_1" src={MachineLearning} />
-        <p className="course_cont_2_card_1_heading"> Master Machine Learning </p>
-        <p className="course_cont_2_card_1_para_1">
-            Become the cool kid in town. Without any prerequisites, master Machine Learning from scratch to an advanced level.
-        </p>
-  </div>
-  <div className="course_cont_2_card">
-        <img className="course_cont_2_card_1" src={SystemDesign} />
-        <p className="course_cont_2_card_1_heading"> System Design Fundamentals </p>
-        <p className="course_cont_2_card_1_para_1">
-            Your ability to develop scalable systems will improve as an engineer. Prepare for system design interviews by learning how to build complex systems.
-       </p>
-  </div>
-  </div>
-  </>
-)
+      <Header />
+      <CardsList courses={courses}/>
+    </>
+  )
 }
 
 export default course
\ No newline at end of file
diff --git a/src/components/Course/Header.js b/src/components/Course/Header.js
new file mode 100644
index 00000000..80a45ff8
--- /dev/null
+++ b/src/components/Course/Header.js
@@ -0,0 +1,52 @@
+import React from 'react'
+
+import Learning from '../../assets/Learning.png'
+import Notes from '../../assets/Notes.png'
+import Assignment from '../../assets/Assignment.png'
+import DoubtSupport from '../../assets/DoubtSupport.png'
+import Guidance from '../../assets/Guidance.png'
+import Projects from '../../assets/Project.png'
+
+const Header = () => {
+    return (
+        <div className="course_cont_1">
+            <div className="course_cont_a">
+                <p className="course_cont_para">
+                    Boost your career with our free hands-on courses.
+                </p>
+            </div>
+            <div className="course_cont_b">
+                <div className="course_cont_b_1">
+                    <div className="course_cont_b_1_frame_1">
+                        <img src={Learning} alt="Learning" />
+                        <p> Structured Learning </p>
+                    </div>
+                    <div className="course_cont_b_1_frame_2">
+                        <img src={Notes} alt="Learning" />
+                        <p> Notes </p>
+                    </div>
+                    <div className="course_cont_b_1_frame_3">
+                        <img src={Assignment} alt="Learning" />
+                        <p> Assignments </p>
+                    </div>
+                </div>
+                <div className="course_cont_b_2">
+                    <div className="course_cont_b_1_frame_4">
+                        <img src={DoubtSupport} alt="Learning" />
+                        <p> Doubt Support </p>
+                    </div>
+                    <div className="course_cont_b_1_frame_5">
+                        <img src={Guidance} alt="Learning" />
+                        <p> Guidance </p>
+                    </div>
+                    <div className="course_cont_b_1_frame_6">
+                        <img src={Projects} alt="Learning" />
+                        <p> Projects </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default Header
\ No newline at end of file
diff --git a/src/components/Course/data.js b/src/components/Course/data.js
new file mode 100644
index 00000000..c51b6f96
--- /dev/null
+++ b/src/components/Course/data.js
@@ -0,0 +1,45 @@
+import Dsa from '../../assets/DSA.png'
+import Github from '../../assets/Github.png'
+import MachineLearning from '../../assets/MachineLearning.png'
+import SystemDesign from '../../assets/SystemDesign.png'
+import FullStack from '../../assets/FullStack.png'
+import DevOps from '../../assets/DevOps.png'
+import Python from '../../assets/Python.png'
+
+export const courses = [
+    {
+        title: "Data Structures and Algorithm in Java",
+        description: "Got no programming knowledge ? No worries. Become an expert at solving simple to complex LeetCode problems with ease and become interview-ready.",
+        image: Dsa
+    },
+    {
+        title: "Develop your knowledge of Git and GitHub.",
+        description: "Start out your exploration of open source with the comprehensive Git & GitHub tutorial, which covers both basic and advanced concepts.",
+        image: Github
+    },
+    {
+        title: "Beginner to Advanced DevOps",
+        description: "DevOps engineer is without a doubt the most in-demand position on the market right now, particularly with the rise of high-paying remote possibilities. Learn DevOps from scratch here.",
+        image: DevOps
+    },
+    {
+        title: "Web Development",
+        description: "Build credible, work-like projects to gain proficiency in React, NodeJS, MongoDB, Javascript, and other technologies to launch a successful career as a developer.",
+        image: FullStack
+    },
+    {
+        title: "Learn Python from A to Z",
+        description: "Get introduced to all of the Python developer skills in this course and construct practical projects along the way to add to your portfolio.",
+        image: Python
+    },
+    {
+        title: "Master Machine Learning ",
+        description: "Become the cool kid in town. Without any prerequisites, master Machine Learning from scratch to an advanced level.",
+        image: MachineLearning
+    },
+    {
+        title: "System Design Fundamentals",
+        description: "Your ability to develop scalable systems will improve as an engineer. Prepare for system design interviews by learning how to build complex systems.",
+        image: SystemDesign
+    },
+]
\ No newline at end of file
diff --git a/src/components/Event/Card.js b/src/components/Event/Card.js
new file mode 100644
index 00000000..054258b9
--- /dev/null
+++ b/src/components/Event/Card.js
@@ -0,0 +1,18 @@
+import React from 'react'
+
+const Card = ({ event }) => {
+    return (
+        <div className="events_cont_2_card">
+            <img className="events_cont_2_card_1" src={event.image} alt={event.title} />
+            {event.ongoing && <p className="events_cont_2_card_1_head">🟢 On-Going </p>}
+            {!event.ongoing && <p className="events_cont_2_card_1_head1">🔴 Completed </p>}
+            <p className="events_cont_2_card_1_heading"> {event.title} </p>
+            <p className="events_cont_2_card_1_para_1">
+                {event.description}
+            </p>
+            <p className="events_cont_2_card_1_date">{event.date}</p>
+        </div>
+    )
+}
+
+export default Card
\ No newline at end of file
diff --git a/src/components/Event/CardsList.js b/src/components/Event/CardsList.js
new file mode 100644
index 00000000..0b162e11
--- /dev/null
+++ b/src/components/Event/CardsList.js
@@ -0,0 +1,14 @@
+import React from 'react'
+import Card from './Card'
+
+const CardsList = ({ events }) => {
+    return (
+        <div className="events_cont_2">
+            {
+                events.map(event => <Card event={event} />)
+            }
+        </div>
+    )
+}
+
+export default CardsList
\ No newline at end of file
diff --git a/src/components/Event/Events.js b/src/components/Event/Events.js
index 02b48e83..63bfd083 100644
--- a/src/components/Event/Events.js
+++ b/src/components/Event/Events.js
@@ -1,64 +1,15 @@
 import React from 'react'
 import './Events.css'
-import events_sema from '../../assets/events_sema.png'
-import events_hashnode from '../../assets/events_hashnode.png'
-import events_coding from '../../assets/events_coding.png'
-import events_kubescape from '../../assets/events_kubescape.png'
+import Header from './Header'
+import CardsList from './CardsList'
+import { events } from './data'
 
 const Events = () => {
   return (
     <>
-    <div className="events">
-    <div className="events_cont_1">
-    <div className="events_cont_a">
-        <p className="events_cont_para">
-        Events that inspire
-        </p>
-        <p className="events_cont_para1">
-        Explore events in various domains to upskill yourself, network with industry experts, and <br /> win amazing prizes by showcasing your knowledge.
-        </p>
-    </div>
-  </div>
-  </div>
-<div className="events_cont_2">
-<div className="events_cont_2_card">
-    <img className="events_cont_2_card_1" src={events_sema} />
-    <p className="events_cont_2_card_1_head">🟢 On-Going </p>
-    <p className="events_cont_2_card_1_heading"> Sema mentorship series </p>
-    <p className="events_cont_2_card_1_para_1"> 
-    Learn how to utilise open source with some of the best practices, networking, resume tips, and more!
-    </p>
-    <p className="events_cont_2_card_1_date">2022</p>
- </div>
-<div className="events_cont_2_card">
-    <img className="events_cont_2_card_1" src={events_hashnode} />
-    <p className="events_cont_2_card_1_head">🟢 On-Going </p>
-    <p className="events_cont_2_card_1_heading">Hashnode Blogging Challenges </p>
-    <p className="events_cont_2_card_1_para_1">
-    Build your personal brand via theme-based blogging & win amazing prizes every week!
-    </p>
-    <p className="events_cont_2_card_1_date">Monthly</p>
-</div>
-<div className="events_cont_2_card">
-    <img className="events_cont_2_card_1" src={events_coding} />
-    <p className="events_cont_2_card_1_head1">🔴 Completed </p>
-    <p className="events_cont_2_card_1_heading">Practice Your Coding Skills with Wilco </p>
-    <p className="events_cont_2_card_1_para_1">
-    Join Wilco to practice and acquire new dev skills in a “flight simulator”. Complete Wilco quests during August to win awesome prizes!
-  </p>
-  <p className="events_cont_2_card_1_date">5Sep-15Sep 2022</p>
-</div>
-<div className="events_cont_2_card">
-    <img className="events_cont_2_card_1" src={events_kubescape} />
-    <p className="events_cont_2_card_1_head1">🔴 Completed </p>
-    <p className="events_cont_2_card_1_heading"> Open Source Fest with Kubescape</p>
-    <p className="events_cont_2_card_1_para_1">
-    The Open Source Fest with Kubescape where you’ll get to contribute to real-world open source projects, get mentored, build your profile, enhance your skills and much more.
-    </p>
-    <p className="events_cont_2_card_1_date">Aug 2022</p>
-</div>
-</div>
-</>
+      <Header />
+      <CardsList events={events} />
+    </>
   )
 }
 
diff --git a/src/components/Event/Header.js b/src/components/Event/Header.js
new file mode 100644
index 00000000..f4fdd463
--- /dev/null
+++ b/src/components/Event/Header.js
@@ -0,0 +1,20 @@
+import React from 'react'
+
+const Header = () => {
+    return (
+        <div className="events">
+            <div className="events_cont_1">
+                <div className="events_cont_a">
+                    <p className="events_cont_para">
+                        Events that inspire
+                    </p>
+                    <p className="events_cont_para1">
+                        Explore events in various domains to upskill yourself, network with industry experts, and <br /> win amazing prizes by showcasing your knowledge.
+                    </p>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default Header
\ No newline at end of file
diff --git a/src/components/Event/data.js b/src/components/Event/data.js
new file mode 100644
index 00000000..f3a1e132
--- /dev/null
+++ b/src/components/Event/data.js
@@ -0,0 +1,35 @@
+import events_sema from '../../assets/events_sema.png'
+import events_hashnode from '../../assets/events_hashnode.png'
+import events_coding from '../../assets/events_coding.png'
+import events_kubescape from '../../assets/events_kubescape.png'
+
+export const events = [
+    {
+        title: "Hashnode Blogging Challenges",
+        description: "Build your personal brand via theme-based blogging & win amazing prizes every week!",
+        ongoing: true,
+        image: events_hashnode,
+        date: "Monthly",
+    },
+    {
+        title: "Sema mentorship series",
+        description: "Learn how to utilise open source with some of the best practices, networking, resume tips, and more!",
+        ongoing: false,
+        image: events_sema,
+        date: "2022"
+    },
+    {
+        title: "Practice Your Coding Skills with Wilco",
+        description: "Join Wilco to practice and acquire new dev skills in a “flight simulator”. Complete Wilco quests during August to win awesome prizes!",
+        ongoing: false,
+        image: events_coding,
+        date: "5Sep-15Sep 2022",
+    },
+    {
+        title: "Open Source Fest with Kubescape",
+        description: "The Open Source Fest with Kubescape where you’ll get to contribute to real-world open source projects, get mentored, build your profile, enhance your skills and much more.",
+        ongoing: false,
+        image: events_kubescape,
+        date: "Aug 2022",
+    }
+]
\ No newline at end of file
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index 762b86a9..204a9df0 100644
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -14,11 +14,11 @@ const Navbar = () => {
          <img className='nabar_logo_1' src={ Logo } alt="logo" />
       </div>
     <ul className={click ? 'navbar-menu active': 'navbar-menu'}>
-        <li className='navbar-item'><Link to="/commclassroom">Home</Link></li>
-        <li className='navbar-item'><Link to="/commclassroom/course">Courses</Link></li>
+        <li className='navbar-item'><Link to="/">Home</Link></li>
+        <li className='navbar-item'><Link to="/course">Courses</Link></li>
         <li className='navbar-item'><a href="https://www.youtube.com/playlist?list=PL9gnSGHSqcnqwmKYZ5rHuzqe32Di47KMr">Podcasts</a></li>
-        <li className='navbar-item'><Link to="/commclassroom/event">Events</Link></li>
-        <li className='navbar-item'><Link to="/commclassroom/roadmaps">Roadmaps</Link></li>
+        <li className='navbar-item'><Link to="/event">Events</Link></li>
+        <li className='navbar-item'><Link to="/roadmaps">Roadmaps</Link></li>
         <a className="navbar_youtube_1" href="https://www.youtube.com/c/KunalKushwaha"><button className="navbar_youtube"> Youtube <img src={Youtube} alt="youtube" /> </button>
        </a>
      </ul>
