diff --git a/src/components/ImageAndText/index.tsx b/src/components/ImageAndText/index.tsx
index 2f75d10..21d28de 100644
--- a/src/components/ImageAndText/index.tsx
+++ b/src/components/ImageAndText/index.tsx
@@ -26,7 +26,7 @@ export const ImageAndText = (props: { title: any; imageUrl: any; imageAlt: any;
         <section className={clsx(`margin-top--lg margin-bottom--lg`, styles.flexContainer, gray && styles.bgGrey100)}>
             {!imageOnTheRight && <ImageElement imageUrl={imageUrl} imageAlt={imageAlt} />}
             <div className={clsx(styles.colMd6, styles.flexItem, styles.flexTextDiv)}>
-                <Heading as="h1" className='hero__title'>{title}</Heading>
+                <Heading as="h1" className='section_title'>{title}</Heading>
                 <span className={clsx(styles.colMd6, styles.centeredText)}>
                     {children}
                 </span>
diff --git a/src/components/Pricing/Pricing.tsx b/src/components/Pricing/Pricing.tsx
new file mode 100644
index 0000000..1679830
--- /dev/null
+++ b/src/components/Pricing/Pricing.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import { educatesProject } from '../../data/project';
+import styles from './styles.module.css';
+import Heading from '@theme/Heading';
+
+const Pricing: React.FC = () => {
+    return (
+        <section className={styles.pricingSection}>
+            <Heading as="h1" className="section_title">Pricing</Heading>
+            <span className={styles.pricingSubtitle}>
+                Just kidding! Educates is free and open-source.<br />
+                You can still make your contribution!
+            </span>
+            <div className={styles.pricingButtonRow}>
+                <div className={styles.pricingButtonCol}>
+                    <a
+                        href={educatesProject.projectGitHubUrl}
+                        className={styles.pricingButton}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                    >
+                        <span className={styles.pricingIcon}>⭐</span> Give us a star
+                    </a>
+                    <a
+                        href={educatesProject.contributingUrl}
+                        className={styles.pricingButton}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                    >
+                        <span className={styles.pricingIcon}>🗂️</span> Contribute
+                    </a>
+                </div>
+                {/* <div className={styles.pricingButtonColCenter}>
+                    <a
+                        href={educatesProject.sponsorshipUrl}
+                        className={styles.pricingButton}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                    >
+                        <span className={styles.pricingIcon}>🎁</span> Become a sponsor
+                    </a>
+                </div> */}
+            </div>
+        </section>
+    );
+};
+
+export default Pricing; 
\ No newline at end of file
diff --git a/src/components/Pricing/styles.module.css b/src/components/Pricing/styles.module.css
new file mode 100644
index 0000000..57e64cd
--- /dev/null
+++ b/src/components/Pricing/styles.module.css
@@ -0,0 +1,69 @@
+.pricingSection {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 60vh;
+  width: 100%;
+  margin-top: 2rem;
+}
+
+.pricingSubtitle {
+  font-size: 1.5rem;
+  /* color: #7b8190; */
+  margin: 1.5rem 0 0.5rem 0;
+  text-align: center;
+  flex: 0 0 auto;
+  width: 50%;
+  max-width: 80%;
+}
+
+.pricingButtonRow {
+  display: flex;
+  gap: 2rem;
+  margin-top: 2.5rem;
+  flex-wrap: wrap;
+  justify-content: center;
+  width: 100%;
+  max-width: 700px;
+}
+
+.pricingButtonCol {
+  flex: 1;
+  min-width: 260px;
+}
+
+.pricingButtonColCenter {
+  flex: 1;
+  min-width: 260px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.pricingButton {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  background: #f5f7fa;
+  border: none;
+  border-radius: 12px;
+  padding: 1rem 2rem;
+  font-size: 1.25rem;
+  font-weight: 500;
+  cursor: pointer;
+  margin-bottom: 1rem;
+  width: 100%;
+  justify-content: flex-start;
+  text-decoration: none;
+  color: inherit;
+  transition: background 0.2s;
+}
+
+.pricingButton:hover {
+  background: #e9eef5;
+}
+
+.pricingIcon {
+  font-size: 1.5rem;
+} 
\ No newline at end of file
diff --git a/src/css/custom.css b/src/css/custom.css
index 00b7ce4..92a1ffc 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -75,12 +75,12 @@
   width: 50%;
 }
 
-.hero__title {
+.section_title {
   font-size: 3em; /* Default font size for larger screens */
 }
 
 @media (max-width: 1200px) {
-  .hero__title {
+  .section_title {
     font-size: 2.5em;
   }
   .ityped {
@@ -92,7 +92,7 @@
 }
 
 @media (max-width: 992px) {
-  .hero__title {
+  .section_title {
     font-size: 2em;
   }
   .ityped {
@@ -104,7 +104,7 @@
 }
 
 @media (max-width: 768px) {
-  .hero__title {
+  .section_title {
     font-size: 1.5em;
   }
   .ityped {
@@ -116,7 +116,7 @@
 }
 
 @media (max-width: 576px) {
-  .hero__title {
+  .section_title {
     font-size: 1.2em;
   }
   .ityped {
diff --git a/src/data/project.tsx b/src/data/project.tsx
new file mode 100644
index 0000000..5a56164
--- /dev/null
+++ b/src/data/project.tsx
@@ -0,0 +1,14 @@
+export type Project = {
+    projectGitHubUrl: string;
+    contributingUrl: string;
+    sponsorshipUrl: string;
+    description: string;
+};
+
+export const educatesProject: Project =
+{
+    projectGitHubUrl: "https://github.com/educates/educates-training-platform",
+    contributingUrl: "https://github.com/educates/educates-training-platform/blob/develop/CONTRIBUTING.md",
+    sponsorshipUrl: "https://github.com/sponsors/educates",
+    description: "Educates Training Platform",
+};
\ No newline at end of file
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 9416f78..bd45e75 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, FC } from 'react';
 // import clsx from 'clsx';
 // import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
@@ -8,6 +8,7 @@ import Layout from '@theme/Layout';
 import Img from '@theme/MDXComponents/Img';
 import { initializeItyped } from '../js/ityped';
 import { ImageAndText } from '../components/ImageAndText';
+import Pricing from '../components/Pricing/Pricing';
 
 // create a list of strings
 const educatesHighlights = [
@@ -19,7 +20,7 @@ const educatesHighlights = [
 ];
 
 function MainSection({ title }: { title: string }): JSX.Element {
-  return (<div style={{
+  return (<section style={{
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
@@ -31,7 +32,7 @@ function MainSection({ title }: { title: string }): JSX.Element {
         alt="Project Logo"
         className="centered-image"
       />
-      {/* <Heading as="h1" className="hero__title">
+      {/* <Heading as="h1" className="section_title">
         {title}
       </Heading> */}
       <div className="typing-carousel">
@@ -44,7 +45,7 @@ function MainSection({ title }: { title: string }): JSX.Element {
         ))}
       </ul>
     </div>
-  </div>
+  </section>
   );
 }
 
@@ -71,6 +72,7 @@ export default function Home(): JSX.Element {
       >
         The Educates project provides a system for hosting interactive workshop environments in Kubernetes, or on top of a local container runtime. It can be used for self paced or supervised workshops. It can also be useful where you need to package up demos of applications hosted in Kubernetes or a local container runtime.
       </ImageAndText>
+      <Pricing />
     </Layout>
   );
 }
diff --git a/tsconfig.json b/tsconfig.json
index 3fade71..b0a846b 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -3,6 +3,6 @@
   "extends": "@docusaurus/tsconfig",
   "compilerOptions": {
     "baseUrl": ".",
-    "jsx": "react"
+    "jsx": "react-jsx"
   }
 }