diff --git a/docs/javascript/datatypes/non-primitive-data-types/date-js.md b/docs/javascript/datatypes/non-primitive-data-types/date-js.md
index 0fdb806195..25bf66d771 100644
--- a/docs/javascript/datatypes/non-primitive-data-types/date-js.md
+++ b/docs/javascript/datatypes/non-primitive-data-types/date-js.md
@@ -3,7 +3,7 @@ id: date-datatypes-in-javascript
 title: Date Datatypes in JavaScript
 sidebar_label: Date
 sidebar_position: 4
-tags: [JavaScript, Date, Date Datatypes in JavaScript, Date in JavaScript]
+tags: [JavaScript, Date, Date Datatypes in JavaScript, Date in JavaScript, JavaScript Date, JavaScript Date Datatypes, JavaScript Date Object, JavaScript Date Methods, JavaScript Date Examples, JavaScript Date Tutorial, JavaScript Date and Time, JavaScript Date Format, JavaScript Date Operations, JavaScript Date Functions, JavaScript Date Properties, JavaScript Date Setters, JavaScript Date Getters, JavaScript Date Working with Dates and Times, JavaScript Date Difference, JavaScript Date Add Days, JavaScript Date Add Months, JavaScript Date Add Years, JavaScript Date Add Hours, JavaScript Date Add Minutes, JavaScript Date Add Seconds, JavaScript Date Add Milliseconds, JavaScript Date Add Time, JavaScript Date Format, JavaScript Date Format Examples, JavaScript Date Format Tutorial, JavaScript Date Format Options, JavaScript Date Format Locale, JavaScript Date Format Timezone, JavaScript Date Format Date, JavaScript Date Format Time, JavaScript Date Format Day, JavaScript Date Format Month, JavaScript Date Format Year, JavaScript Date Format Weekday, JavaScript Date Format Week, JavaScript Date Format Hour, JavaScript Date Format Minute, JavaScript Date Format Second, JavaScript Date Format Millisecond, JavaScript Date Format UTC, JavaScript Date Format Local, JavaScript Date Format ISO, JavaScript Date Format Short, JavaScript Date Format Medium, JavaScript Date Format Long, JavaScript Date Format Full, JavaScript Date Format Custom]
 description: What is a Date in JavaScript and how to use it to work with dates and times.
 ---
 
diff --git a/src/components/GiscusComponent/index.tsx b/src/components/GiscusComponent/index.tsx
index 7027e52f1d..39757108bd 100644
--- a/src/components/GiscusComponent/index.tsx
+++ b/src/components/GiscusComponent/index.tsx
@@ -1,26 +1,29 @@
-import React from 'react';
+import React from "react";
 import Giscus from "@giscus/react";
-import { useColorMode } from '@docusaurus/theme-common';
+import { useColorMode } from "@docusaurus/theme-common";
+import "./style.css";
 
 export default function GiscusComponent() {
   const { colorMode } = useColorMode();
 
   return (
-    <Giscus  
-      id='giscus'  
-      repo="ajay-dhangar/code-harbor-hub"
-      repoId="R_kgDOLNryZQ"
-      category="General"
-      categoryId="DIC_kwDOLNryZc4Cc7ll" 
-      mapping="pathname"                      
-      term="Welcome to @giscus/react component!"
-      strict="0"
-      reactionsEnabled="1"
-      emitMetadata="1"
-      inputPosition="top"
-      theme={colorMode}
-      lang="en"
-      loading="lazy"
-    />
+    <div className="giscus-component">
+      <Giscus
+        id="giscus"
+        repo="ajay-dhangar/code-harbor-hub"
+        repoId="R_kgDOLNryZQ"
+        category="General"
+        categoryId="DIC_kwDOLNryZc4Cc7ll"
+        mapping="pathname"
+        term="Welcome to @giscus/react component!"
+        strict="0"
+        reactionsEnabled="1"
+        emitMetadata="1"
+        inputPosition="bottom"
+        theme={colorMode}
+        lang="en"
+        loading="lazy"
+      />
+    </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/GiscusComponent/style.css b/src/components/GiscusComponent/style.css
new file mode 100644
index 0000000000..dbb58559a5
--- /dev/null
+++ b/src/components/GiscusComponent/style.css
@@ -0,0 +1,3 @@
+.giscus-component {
+    padding: 20px;
+}
\ No newline at end of file
diff --git a/src/components/HomepageFeatures/index.js b/src/components/HomepageFeatures/index.js
index 050855027e..d32247cffb 100644
--- a/src/components/HomepageFeatures/index.js
+++ b/src/components/HomepageFeatures/index.js
@@ -3,33 +3,6 @@ import Heading from "@theme/Heading";
 import styles from "./styles.module.css";
 
 const FeatureList = [
-  // {
-  //   title: 'Easy to Use',
-  //   Svg: require('@site/static/img/svg/undraw_docusaurus_mountain.svg').default,
-  //   description: (
-  //     <>
-  //       CodeHarbor is designed to be easy to learn and improve your coding skills. Start with the basics and learn at your own pace.
-  //     </>
-  //   ),
-  // },
-  // {
-  //   title: 'Focus on What Matters',
-  //   Svg: require('@site/static/img/svg/undraw_docusaurus_tree.svg').default,
-  //   description: (
-  //     <>
-  //       CodeHarbor lets you focus on your coding skills, and we'll do the chores. Go ahead and learn the basics of coding.
-  //     </>
-  //   ),
-  // },
-  // {
-  //   title: 'Powered by React',
-  //   Svg: require('@site/static/img/svg/undraw_docusaurus_react.svg').default,
-  //   description: (
-  //     <>
-  //       CodeHarbor is built using React, a popular JavaScript library for building user interfaces. React makes it painless to create interactive UIs.
-  //     </>
-  //   ),
-  // },
   {
     title: "Blogging Platform",
     Svg: require("@site/static/img/svg/blogging.svg").default,
@@ -40,29 +13,6 @@ const FeatureList = [
       </>
     ),
   },
-
-  // {
-  //   title: "Bug Fixes and Improvements",
-  //   Svg: require("@site/static/img/svg/bug_fixing.svg").default,
-  //   description: (
-  //     <>
-  //       CodeHarbor is constantly being improved and updated. We are always open
-  //       to feedback and suggestions.
-  //     </>
-  //   ),
-  // },
-
-  // {
-  //   title: "YouTub Tutorial",
-  //   Svg: require("@site/static/img/svg/youtube_tutorial.svg").default,
-  //   description: (
-  //     <>
-  //       CodeHarbor provides video tutorials on various topics. Learn from the
-  //       best and improve your coding skills.
-  //     </>
-  //   ),
-  // },
-
   {
     title: "Website Setup",
     Svg: require("@site/static/img/svg/website_setup.svg").default,
@@ -73,51 +23,6 @@ const FeatureList = [
       </>
     ),
   },
-
-  // {
-  //   title: "Web Development",
-  //   Svg: require("@site/static/img/svg/web_development.svg").default,
-  //   description: (
-  //     <>
-  //       CodeHarbor provides tutorials on web development. Learn how to build
-  //       websites and web applications.
-  //     </>
-  //   ),
-  // },
-
-  // {
-  //   title: "Wall Post",
-  //   Svg: require("@site/static/img/svg/wall_post.svg").default,
-  //   description: (
-  //     <>
-  //       CodeHarbor provides a wall post feature. Share your thoughts and ideas
-  //       with the community.
-  //     </>
-  //   ),
-  // },
-
-  // {
-  //   title: "Virtual Assistant",
-  //   Svg: require("@site/static/img/svg/virtual_assistant.svg").default,
-  //   description: (
-  //     <>
-  //       CodeHarbor provides a virtual assistant to help you with your coding
-  //       problems. Get help from the best.
-  //     </>
-  //   ),
-  // },
-
-  // {
-  //   title: "Usability Testing",
-  //   Svg: require("@site/static/img/svg/usability_testing.svg").default,
-  //   description: (
-  //     <>
-  //       CodeHarbor provides useability testing for your website. Get feedback
-  //       from the community and improve your website.
-  //     </>
-  //   ),
-  // },
-
   {
     title: "Website",
     Svg: require("@site/static/img/svg/website.svg").default,
@@ -129,15 +34,6 @@ const FeatureList = [
     ),
   },
 
-  // {
-  //   title: 'Teaching',
-  //   Svg: require('@site/static/img/svg/teaching.svg').default,
-  //   description: (
-  //     <>
-  //       CodeHarbor provides tutorials on teaching. Learn how to teach and share your knowledge with others.
-  //     </>
-  //   ),
-  // },
 ];
 
 function Feature({ Svg, title, description }) {
diff --git a/src/components/HomepageHero/index.js b/src/components/HomepageHero/index.js
deleted file mode 100644
index 42cc739f53..0000000000
--- a/src/components/HomepageHero/index.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import clsx from "clsx";
-import Heading from "@theme/Heading";
-import styles from "./styles.module.css";
-
-
-export default function HomepageHero() {
-  return (
-    <section className={styles.hero_section}>      
-      <div className="container">
-        <div className="row">
-          
-        </div>
-      </div>
-    </section>
-  );
-}
\ No newline at end of file
diff --git a/src/components/HomepageHero/styles.module.css b/src/components/HomepageHero/styles.module.css
deleted file mode 100644
index 5604c24950..0000000000
--- a/src/components/HomepageHero/styles.module.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.hero_section {
-    background-color: blue;
-}
\ No newline at end of file
diff --git a/src/pages/index.js b/src/pages/index.js
index f3ca5182e6..971221469a 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,58 +1,66 @@
-import clsx from 'clsx';
-import Link from '@docusaurus/Link';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import Layout from '@theme/Layout';
-import HomepageFeatures from '@site/src/components/HomepageFeatures';
-import HomepageWelcome from '@site/src/components/HomepageWelcome';
-import CoursesOfferedContent from '@site/src/components/CoursesOfferedContent';
-import FeaturedCourses from '@site/src/components/FeaturedCoursesWrapper';
-import OurInstructors from '@site/src/components/OurInstructors';
-import UpcomingEvents from '@site/src/components/UpcomingEvents';
-import GiscusComponent from '@site/src/components/GiscusComponent';
+import clsx from "clsx";
+import Link from "@docusaurus/Link";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import Layout from "@theme/Layout";
+// import HomepageFeatures from '@site/src/components/HomepageFeatures';
+import HomepageWelcome from "@site/src/components/HomepageWelcome";
+import CoursesOfferedContent from "@site/src/components/CoursesOfferedContent";
+import FeaturedCourses from "@site/src/components/FeaturedCoursesWrapper";
+import OurInstructors from "@site/src/components/OurInstructors";
+import UpcomingEvents from "@site/src/components/UpcomingEvents";
+import GiscusComponent from "@site/src/components/GiscusComponent";
 
-import Heading from '@theme/Heading';
-import styles from './index.module.css';
+import Heading from "@theme/Heading";
+import styles from "./index.module.css";
 
 function HomepageHeader() {
-  const {siteConfig} = useDocusaurusContext();
+  const { siteConfig } = useDocusaurusContext();
   return (
-    <header className={clsx('hero hero--primary', styles.heroBanner)}>
+    <header className={clsx("hero hero--primary", styles.heroBanner)}>
       <div className="container">
         <Heading as="h1" className="hero__title">
           {siteConfig.title}
+          <HomepageWelcome />
+          {/* <p className="hero__subtitle">{siteConfig.tagline}</p> */}
         </Heading>
-        <HomepageWelcome />
-        {/* <div className={styles.buttons}>
+        {/* <HomepageWelcome /> */}
+        <div className={styles.buttons}>
           <Link
             className="button button--secondary button--lg"
-            to="/docs/intro">
-            Documentation  - Get Started
+            to="/docs/intro"
+          >
+            Documentation - Get Started
           </Link>
-        </div> */}
+        </div>
       </div>
     </header>
   );
 }
 
 export default function Home() {
-  const {siteConfig} = useDocusaurusContext();
+  const { siteConfig } = useDocusaurusContext();
   return (
     <Layout
       title={`Hello from ${siteConfig.title}`}
-      description="CodeHarbor is a platform for developers to share their knowledge and experience with the community.">
+      description="CodeHarbor is a platform for developers to share their knowledge and experience with the community."
+    >
       <HomepageHeader />
-      <main>        
-        <HomepageFeatures />
-        <hr />
-        <CoursesOfferedContent />
-        <hr />
-        <FeaturedCourses />
-        <hr />
-        <OurInstructors />
-        <hr />
-        <UpcomingEvents />
-        <hr />
-        <div className="">
+      <main>
+        {/* <HomepageFeatures /> */}
+        <div className={styles.home__divider}>
+          <CoursesOfferedContent />
+        </div>
+        <div className={styles.home__divider}>
+          <FeaturedCourses />
+        </div>
+        <div className={styles.home__divider}>
+          <OurInstructors />
+        </div>
+        <div className={styles.home__divider}>
+          <UpcomingEvents />
+        </div>
+
+        <div>
           <GiscusComponent />
         </div>
       </main>
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
index 17c7174e1a..48b8e318a4 100644
--- a/src/pages/index.module.css
+++ b/src/pages/index.module.css
@@ -3,7 +3,9 @@
   text-align: center;
   position: relative;
   overflow: hidden;
-  background: linear-gradient(90deg, #ff0000 0%, #137e0a 50%, #17e4ff 100%);
+  background: linear-gradient(90deg, #172800 0%, #539200 35%, #02e41c 100%);
+  /* background: rgb(2,9,57); */
+/* background: linear-gradient(90deg, rgba(2,9,57,1) 0%, rgba(0,159,255,1) 100%); */
 }
 
 @media screen and (max-width: 996px) {
@@ -12,8 +14,130 @@
   }
 }
 
-/* .buttons {
+.buttons {
   display: flex;
   align-items: center;
   justify-content: center;
-} */
+}
+
+.hero {
+  background-color: #2b3137;
+  padding: 48px;
+}
+
+.heroInner {
+  margin: 0 auto;
+  max-width: 1100px;
+  padding: 0 20px;
+}
+
+.heroProjectTagline {
+  color: #fff;
+  font-size: 60px;
+  margin: 0;
+}
+
+.heroTitleTextHtml b {
+  color: var(--ifm-color-primary);
+}
+
+@keyframes jackInTheBox {
+  from {
+    opacity: 0;
+    transform: scale(0.1) rotate(30deg);
+    transform-origin: center bottom;
+  }
+
+  50% {
+    transform: rotate(-10deg);
+  }
+
+  70% {
+    transform: rotate(3deg);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.heroLogo {
+  animation-duration: 2s;
+  animation-name: jackInTheBox;
+  float: right;
+  margin-top: 20px;
+  padding: 0 20px 20px;
+}
+
+.indexCtas {
+  display: flex;
+  align-items: center;
+  margin-top: 24px;
+}
+
+.indexCtasGetStartedButton {
+  border: 2px solid var(--ifm-color-primary);
+  line-height: 1.2em;
+  text-decoration: none !important;
+  text-transform: uppercase;
+  transition: background 0.3s, color 0.3s;
+  border-radius: 8px;
+  color: #fff;
+  font-size: 24px;
+  font-weight: bold;
+  padding: 18px 36px;
+}
+
+.indexCtasGitHubButtonWrapper {
+  display: flex;
+}
+
+.indexCtasGitHubButton {
+  border: none;
+  margin-left: 24px;
+  overflow: hidden;
+}
+
+@media only screen and (max-width: 768px) {
+  .hero {
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+
+  .heroInner {
+    padding: 0;
+  }
+
+  .heroProjectTagline {
+    font-size: 36px;
+    text-align: center;
+  }
+
+  .heroLogo {
+    display: block;
+    float: none;
+    margin: 0 auto;
+  }
+
+  .indexCtas {
+    justify-content: center;
+  }
+
+  .indexCtasGitHubButton {
+    display: none;
+  }
+}
+
+.home__divider {
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
+.home__divider:nth-child(even) {
+  background-color: #bc0a9e50;
+}
+
+.home__divider:nth-child(odd) {
+  background-color: #cefb0850;
+}
\ No newline at end of file