diff --git a/src/pages/contribute.js b/src/pages/contribute.js
new file mode 100644
index 00000000..0fa42558
--- /dev/null
+++ b/src/pages/contribute.js
@@ -0,0 +1,224 @@
+import React from 'react';
+import Layout from '@theme/Layout';
+import styles from './contribute.module.css';
+
+function ContributeHeader() {
+  return (
+    <header className={styles.header}>
+      <div className={styles.headerContent}>
+        <h1 className={styles.title}>Contribute to This Course</h1>
+        <p className={styles.subtitle}>
+          This project itself is open source. The platform you're learning from welcomes contributions from the community.
+        </p>
+      </div>
+    </header>
+  );
+}
+
+function ContributeSection({ title, description, points, action }) {
+  return (
+    <div className={styles.section}>
+      <h3 className={styles.sectionTitle}>{title}</h3>
+      <p className={styles.description}>{description}</p>
+      <ul className={styles.pointsList}>
+        {points.map((point, idx) => (
+          <li key={idx}>{point}</li>
+        ))}
+      </ul>
+      {action && (
+        <a className={styles.actionButton} href={action.url} target="_blank" rel="noopener noreferrer">
+          {action.text} →
+        </a>
+      )}
+    </div>
+  );
+}
+
+export default function Contribute() {
+  return (
+    <Layout title="Contribute" description="Contribute to the Open Source Education Path">
+      <ContributeHeader />
+      <main className={styles.main}>
+        <div className="container">
+          <section className={styles.quickStart}>
+            <h2>Getting Started</h2>
+            <p>Contributing to this project is straightforward. Here's a simple 4-step process:</p>
+            <div className={styles.steps}>
+              <div className={styles.step}>
+                <div className={styles.stepNumber}>1</div>
+                <h4>Fork & Clone</h4>
+                <p>Fork the repository and clone it to your local machine.</p>
+              </div>
+              <div className={styles.step}>
+                <div className={styles.stepNumber}>2</div>
+                <h4>Create Branch</h4>
+                <p>Create a new branch for your changes using: <code>git checkout -b feat/your-feature</code></p>
+              </div>
+              <div className={styles.step}>
+                <div className={styles.stepNumber}>3</div>
+                <h4>Make Changes</h4>
+                <p>Make your changes and test them thoroughly in your local environment.</p>
+              </div>
+              <div className={styles.step}>
+                <div className={styles.stepNumber}>4</div>
+                <h4>Submit PR</h4>
+                <p>Push your changes and create a pull request with a clear, detailed description.</p>
+              </div>
+            </div>
+          </section>
+
+          <section className={styles.contributionTypes}>
+            <h2>Ways to Contribute</h2>
+            <p>There are many ways to help improve this educational platform. Choose the area that interests you:</p>
+            <div className={styles.grid}>
+              <ContributeSection
+                title="Content & Documentation"
+                description="Help improve the quality of our educational materials. We welcome corrections, clarifications, and additions that make the content more useful for learners."
+                points={[
+                  'Fix typos, grammar, and spelling errors',
+                  'Clarify confusing or ambiguous explanations',
+                  'Add more practical examples and use cases',
+                  'Improve and enhance code snippets',
+                  'Update outdated information and resources'
+                ]}
+                action={{
+                  text: 'View Documentation Issues',
+                  url: 'https://github.com/OpenSource-Communities/intro/issues?q=is%3Aissue+is%3Aopen+label%3Adocumentation'
+                }}
+              />
+
+              <ContributeSection
+                title="Code & Features"
+                description="Help build new features, fix bugs, and improve the technical aspects of the platform. This includes UI components, styling, and performance optimizations."
+                points={[
+                  'Add interactive learning components',
+                  'Fix UI and user experience bugs',
+                  'Improve design, layout, and styling',
+                  'Optimize page performance and loading times',
+                  'Implement requested features and enhancements'
+                ]}
+                action={{
+                  text: 'View Code Issues',
+                  url: 'https://github.com/OpenSource-Communities/intro/issues?q=is%3Aissue+is%3Aopen+label%3Acode'
+                }}
+              />
+
+              <ContributeSection
+                title="Translations & Localization"
+                description="Help make this course accessible to people around the world by translating and localizing content. We have guidelines to ensure consistency and quality."
+                points={[
+                  'Translate course content to new languages',
+                  'Localize examples and cultural references',
+                  'Proofread and review existing translations',
+                  'Help maintain translation quality and consistency',
+                  'Add support for new languages and regions'
+                ]}
+                action={{
+                  text: 'View i18n Guidelines',
+                  url: 'https://github.com/OpenSource-Communities/intro/blob/main/contributing/i18n-guidelines.md'
+                }}
+              />
+
+              <ContributeSection
+                title="Community & Support"
+                description="Strengthen our community by helping other learners, sharing your experiences, and providing feedback. Community contributions are just as valuable."
+                points={[
+                  'Help answer questions in discussions',
+                  'Share your success stories and learnings',
+                  'Report bugs and issues you discover',
+                  'Suggest improvements and new ideas',
+                  'Mentor newer contributors and help them get started'
+                ]}
+                action={{
+                  text: 'Join Community Discussions',
+                  url: 'https://github.com/OpenSource-Communities/intro/discussions'
+                }}
+              />
+            </div>
+          </section>
+
+          <section className={styles.resources}>
+            <h2>Resources & Guidelines</h2>
+            <p>Everything you need to know before you start contributing:</p>
+            <div className={styles.resourcesList}>
+              <div className={styles.resourceItem}>
+                <h4>Contributing Guidelines</h4>
+                <p>Our detailed guide on how to contribute, including coding standards, commit conventions, and the PR process.</p>
+                <a 
+                  href="https://github.com/OpenSource-Communities/intro/blob/main/contributing/CONTRIBUTING.md" 
+                  className={styles.resourceLink}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  Read Full Guidelines
+                </a>
+              </div>
+
+              <div className={styles.resourceItem}>
+                <h4>Report an Issue</h4>
+                <p>Found a bug? Have a suggestion? Create an issue on GitHub. We use issue templates to help you provide all necessary information.</p>
+                <a 
+                  href="https://github.com/OpenSource-Communities/intro/issues/new/choose" 
+                  className={styles.resourceLink}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  Create New Issue
+                </a>
+              </div>
+
+              <div className={styles.resourceItem}>
+                <h4>Community Discussions</h4>
+                <p>Have questions or want to discuss ideas? Join our community discussions to connect with other contributors and get help.</p>
+                <a 
+                  href="https://github.com/OpenSource-Communities/intro/discussions" 
+                  className={styles.resourceLink}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  Join Discussions
+                </a>
+              </div>
+
+              <div className={styles.resourceItem}>
+                <h4>GitHub Repository</h4>
+                <p>Explore the full source code, see what's in progress, and understand the project structure. All our code is publicly available.</p>
+                <a 
+                  href="https://github.com/OpenSource-Communities/intro" 
+                  className={styles.resourceLink}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  Visit Repository
+                </a>
+              </div>
+            </div>
+          </section>
+
+          <section className={styles.cta}>
+            <h2>Ready to Start Contributing?</h2>
+            <p>Whether you're fixing a typo or building a new feature, every contribution helps improve the learning experience for thousands of people learning about open source. We appreciate your help!</p>
+            <div className={styles.ctaButtons}>
+              <a 
+                href="https://github.com/OpenSource-Communities/intro/fork" 
+                className={styles.primaryButton}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Fork on GitHub
+              </a>
+              <a 
+                href="https://github.com/OpenSource-Communities/intro/blob/main/contributing/CONTRIBUTING.md" 
+                className={styles.secondaryButton}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                View Guidelines
+              </a>
+            </div>
+          </section>
+        </div>
+      </main>
+    </Layout>
+  );
+}
diff --git a/src/pages/contribute.module.css b/src/pages/contribute.module.css
new file mode 100644
index 00000000..49e8b1a7
--- /dev/null
+++ b/src/pages/contribute.module.css
@@ -0,0 +1,437 @@
+.header {
+  background: #fff;
+  color: #000;
+  padding: 4rem 1rem;
+  text-align: center;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+html[data-theme='dark'] .header {
+  background: #1a1a1a;
+  color: #fff;
+  border-bottom-color: #333;
+}
+
+.headerContent {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.title {
+  font-size: clamp(2rem, 5vw, 3rem);
+  font-weight: 600;
+  margin-bottom: 1rem;
+}
+
+.subtitle {
+  font-size: clamp(1rem, 2vw, 1.1rem);
+  line-height: 1.6;
+  opacity: 0.8;
+}
+
+.main {
+  padding: 3rem 1rem;
+  display: flex;
+  justify-content: center;
+  flex: 1 0 auto;
+}
+
+.main {
+  padding: 3rem 1rem;
+  display: flex;
+  justify-content: center;
+  flex: 1 0 auto;
+}
+
+.quickStart {
+  margin-bottom: 4rem;
+}
+
+.quickStart h2 {
+  font-size: 1.75rem;
+  font-weight: 600;
+  margin-bottom: 1rem;
+}
+
+.quickStart > p {
+  font-size: 1rem;
+  line-height: 1.6;
+  margin-bottom: 2rem;
+  opacity: 0.8;
+}
+
+.steps {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 2rem;
+  margin-bottom: 2rem;
+}
+
+.step {
+  background: #f5f5f5;
+  padding: 2rem;
+  border-radius: 4px;
+  border: 1px solid #e0e0e0;
+}
+
+html[data-theme='dark'] .step {
+  background: #2a2a2a;
+  border-color: #333;
+}
+
+.stepNumber {
+  width: 40px;
+  height: 40px;
+  background: #000;
+  color: white;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin-bottom: 1rem;
+}
+
+html[data-theme='dark'] .stepNumber {
+  background: #444;
+}
+
+.step h4 {
+  margin: 1rem 0 0.5rem 0;
+  font-size: 1.1rem;
+  font-weight: 600;
+}
+
+.step p {
+  margin: 0.5rem 0;
+  opacity: 0.85;
+}
+
+.step code {
+  background: #e0e0e0;
+  padding: 0.2rem 0.5rem;
+  border-radius: 3px;
+  font-family: 'Courier New', monospace;
+  font-size: 0.9rem;
+}
+
+html[data-theme='dark'] .step code {
+  background: #3a3a3a;
+}
+
+.contributionTypes {
+  margin-bottom: 4rem;
+}
+
+.contributionTypes h2 {
+  font-size: 1.75rem;
+  font-weight: 600;
+  margin-bottom: 1rem;
+}
+
+.contributionTypes > p {
+  font-size: 1rem;
+  line-height: 1.6;
+  margin-bottom: 2rem;
+  opacity: 0.8;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 2rem;
+}
+
+.section {
+  background: #fff;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  padding: 2rem;
+  transition: border-color 0.2s;
+}
+
+html[data-theme='dark'] .section {
+  background: #1a1a1a;
+  border-color: #333;
+}
+
+.section:hover {
+  border-color: #999;
+}
+
+html[data-theme='dark'] .section:hover {
+  border-color: #555;
+}
+
+.sectionTitle {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin: 0 0 1rem 0;
+}
+
+.description {
+  opacity: 0.8;
+  line-height: 1.6;
+  margin-bottom: 1rem;
+  font-size: 0.95rem;
+}
+
+.pointsList {
+  list-style: none;
+  padding: 0;
+  margin: 1.5rem 0;
+}
+
+.pointsList li {
+  padding: 0.5rem 0 0.5rem 1.5rem;
+  position: relative;
+  line-height: 1.5;
+  opacity: 0.85;
+  font-size: 0.95rem;
+}
+
+.pointsList li:before {
+  content: '•';
+  position: absolute;
+  left: 0;
+  font-weight: 600;
+}
+
+.actionButton {
+  display: inline-block;
+  background: #000;
+  color: #fff;
+  padding: 0.6rem 1.2rem;
+  border-radius: 4px;
+  text-decoration: none;
+  transition: background 0.2s;
+  margin-top: 1rem;
+  font-size: 0.9rem;
+  font-weight: 500;
+}
+
+html[data-theme='dark'] .actionButton {
+  background: #444;
+}
+
+.actionButton:hover {
+  background: #333;
+  color: #fff;
+}
+
+html[data-theme='dark'] .actionButton:hover {
+  background: #555;
+}
+
+.resources {
+  margin-bottom: 4rem;
+  background: #f5f5f5;
+  padding: 3rem 2rem;
+  border-radius: 4px;
+  border: 1px solid #e0e0e0;
+}
+
+html[data-theme='dark'] .resources {
+  background: #2a2a2a;
+  border-color: #333;
+}
+
+.resources h2 {
+  font-size: 1.75rem;
+  font-weight: 600;
+  margin-bottom: 1rem;
+}
+
+.resources > p {
+  opacity: 0.8;
+  margin-bottom: 2rem;
+}
+
+.resourcesList {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 2rem;
+}
+
+.resourceItem {
+  background: #fff;
+  padding: 1.5rem;
+  border-radius: 4px;
+  border: 1px solid #e0e0e0;
+  transition: border-color 0.2s;
+}
+
+html[data-theme='dark'] .resourceItem {
+  background: #1a1a1a;
+  border-color: #333;
+}
+
+.resourceItem:hover {
+  border-color: #999;
+}
+
+html[data-theme='dark'] .resourceItem:hover {
+  border-color: #555;
+}
+
+.resourceItem h4 {
+  margin: 0 0 0.5rem 0;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.resourceItem p {
+  opacity: 0.8;
+  font-size: 0.9rem;
+  margin-bottom: 1rem;
+  line-height: 1.5;
+}
+
+.resourceLink {
+  display: inline-block;
+  background: #000;
+  color: #fff;
+  padding: 0.5rem 1rem;
+  border-radius: 3px;
+  text-decoration: none;
+  transition: background 0.2s;
+  font-size: 0.85rem;
+  font-weight: 500;
+}
+
+html[data-theme='dark'] .resourceLink {
+  background: #444;
+}
+
+.resourceLink:hover {
+  background: #333;
+  color: #fff;
+}
+
+html[data-theme='dark'] .resourceLink:hover {
+  background: #555;
+}
+
+.cta {
+  text-align: center;
+  padding: 3rem 2rem;
+  background: #f5f5f5;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  margin-bottom: 2rem;
+}
+
+html[data-theme='dark'] .cta {
+  background: #2a2a2a;
+  border-color: #333;
+}
+
+.cta h2 {
+  font-size: 1.75rem;
+  font-weight: 600;
+  margin-bottom: 1rem;
+}
+
+.cta p {
+  opacity: 0.8;
+  font-size: 1rem;
+  margin-bottom: 2rem;
+  max-width: 600px;
+  margin-left: auto;
+  margin-right: auto;
+  line-height: 1.6;
+}
+
+.ctaButtons {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.primaryButton,
+.secondaryButton {
+  display: inline-block;
+  padding: 0.75rem 1.5rem;
+  border-radius: 4px;
+  text-decoration: none;
+  font-weight: 600;
+  font-size: 0.95rem;
+  transition: all 0.2s;
+  cursor: pointer;
+  border: 1px solid transparent;
+}
+
+.primaryButton {
+  background: #000;
+  color: #fff;
+}
+
+html[data-theme='dark'] .primaryButton {
+  background: #444;
+}
+
+.primaryButton:hover {
+  background: #333;
+  color: #fff;
+}
+
+html[data-theme='dark'] .primaryButton:hover {
+  background: #555;
+}
+
+.secondaryButton {
+  background: #fff;
+  color: #000;
+  border: 1px solid #000;
+}
+
+html[data-theme='dark'] .secondaryButton {
+  background: #1a1a1a;
+  color: #fff;
+  border-color: #666;
+}
+
+.secondaryButton:hover {
+  background: #f0f0f0;
+  color: #000;
+}
+
+html[data-theme='dark'] .secondaryButton:hover {
+  background: #2a2a2a;
+  color: #fff;
+  border-color: #999;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+  .header {
+    padding: 2rem 1rem;
+  }
+
+  .title {
+    font-size: 1.5rem;
+  }
+
+  .steps {
+    grid-template-columns: 1fr;
+  }
+
+  .ctaButtons {
+    flex-direction: column;
+  }
+
+  .primaryButton,
+  .secondaryButton {
+    width: 100%;
+  }
+
+  .grid {
+    grid-template-columns: 1fr;
+  }
+
+  .resourcesList {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/src/pages/index.js b/src/pages/index.js
index 6bf3825a..97f836f0 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -42,6 +42,15 @@ export default function Home() {
                 </Link>
               </div>
             </div>
+            <div className={styles.card}>
+              <div className={styles.cardContent}>
+                <h3> Contribute to This Course</h3>
+                <p>Did you know this project itself is open source? Learn by contributing to the very platform where you're learning about open source. Help us improve the course by fixing bugs, adding features, translating content, and improving documentation.</p>
+                <Link className={styles.cardLink} to="/contribute">
+                  Learn How to Contribute
+                </Link>
+              </div>
+            </div>
           </div>
         </div>
       </main>