From 5a13f96b288559c2933977fe38bb02a5b2405fa3 Mon Sep 17 00:00:00 2001
From: YourGitHubUsername <richajaiswalhome@gmail.com>
Date: Wed, 6 Aug 2025 20:04:55 +0530
Subject: [PATCH 1/3] fix darktheme issue

---
 src/css/custom.css                          | 571 +++++++++++++++++++-
 src/pages/badges/github-badges.module.css   |  72 ++-
 src/pages/badges/github-badges.tsx          |   8 +-
 src/pages/blogs/blogs.css                   |  20 +-
 src/pages/careers/index.tsx                 |  29 +-
 src/pages/community/community.css           |  12 +-
 src/pages/courses/index.tsx                 |  42 +-
 src/pages/get-started/index.tsx             |   7 +-
 src/pages/get-started/styles.module.css     |  51 ++
 src/theme/Footer/Layout/enhanced-footer.css |  33 +-
 10 files changed, 782 insertions(+), 63 deletions(-)

diff --git a/src/css/custom.css b/src/css/custom.css
index 9d30a21f..b5d05a1d 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -32,6 +32,26 @@
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
   --ifm-color-primary-text: #ffffff;
   --ifm-color-secondary-text: #edf2f7;
+
+  /* Standardized Dark Theme Colors */
+  --dark-bg-primary: #121212;
+  --dark-bg-secondary: #1a1a1a;
+  --dark-bg-tertiary: #2d2d2d;
+  --dark-text-primary: #ffffff;
+  --dark-text-secondary: #edf2f7;
+  --dark-text-muted: #a0aec0;
+  --dark-border: #2d2d2d;
+  --dark-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
+  --dark-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
+
+  /* Card and component backgrounds */
+  --dark-card-bg: #1a1a1a;
+  --dark-card-hover-bg: #2d2d2d;
+
+  /* Form elements */
+  --dark-input-bg: #2d2d2d;
+  --dark-input-border: #4a5568;
+  --dark-input-focus-border: #25c2a0;
 }
 
 
@@ -171,8 +191,555 @@
 
 /* Dark mode overrides (already there, ensure it's working) */
 [data-theme='dark'] {
-  background-color: #121212;
-  color: #ffffff;
+  background-color: var(--dark-bg-primary);
+  color: var(--dark-text-primary);
+}
+
+/* Global dark theme utilities */
+[data-theme='dark'] .dark-bg-primary {
+  background-color: var(--dark-bg-primary) !important;
+}
+
+[data-theme='dark'] .dark-bg-secondary {
+  background-color: var(--dark-bg-secondary) !important;
+}
+
+[data-theme='dark'] .dark-bg-tertiary {
+  background-color: var(--dark-bg-tertiary) !important;
+}
+
+[data-theme='dark'] .dark-text-primary {
+  color: var(--dark-text-primary) !important;
+}
+
+[data-theme='dark'] .dark-text-secondary {
+  color: var(--dark-text-secondary) !important;
+}
+
+[data-theme='dark'] .dark-text-muted {
+  color: var(--dark-text-muted) !important;
+}
+
+[data-theme='dark'] .dark-border {
+  border-color: var(--dark-border) !important;
+}
+
+[data-theme='dark'] .dark-shadow {
+  box-shadow: var(--dark-shadow) !important;
+}
+
+[data-theme='dark'] .dark-shadow-lg {
+  box-shadow: var(--dark-shadow-lg) !important;
+}
+
+/* Form elements dark theme */
+[data-theme='dark'] input,
+[data-theme='dark'] textarea,
+[data-theme='dark'] select {
+  background-color: var(--dark-input-bg) !important;
+  border-color: var(--dark-input-border) !important;
+  color: var(--dark-text-primary) !important;
+}
+
+[data-theme='dark'] input:focus,
+[data-theme='dark'] textarea:focus,
+[data-theme='dark'] select:focus {
+  border-color: var(--dark-input-focus-border) !important;
+  box-shadow: 0 0 0 2px rgba(37, 194, 160, 0.2) !important;
+}
+
+[data-theme='dark'] input::placeholder,
+[data-theme='dark'] textarea::placeholder {
+  color: var(--dark-text-muted) !important;
+}
+
+/* Button dark theme */
+[data-theme='dark'] .button,
+[data-theme='dark'] button {
+  background-color: var(--dark-bg-tertiary);
+  color: var(--dark-text-primary);
+  border-color: var(--dark-border);
+}
+
+[data-theme='dark'] .button:hover,
+[data-theme='dark'] button:hover {
+  background-color: var(--dark-card-hover-bg);
+}
+
+/* Card components dark theme */
+[data-theme='dark'] .card {
+  background-color: var(--dark-card-bg) !important;
+  border-color: var(--dark-border) !important;
+  color: var(--dark-text-primary) !important;
+  box-shadow: var(--dark-shadow) !important;
+}
+
+[data-theme='dark'] .card:hover {
+  background-color: var(--dark-card-hover-bg) !important;
+  box-shadow: var(--dark-shadow-lg) !important;
+}
+
+/* Table dark theme */
+[data-theme='dark'] table {
+  background-color: var(--dark-bg-secondary) !important;
+  color: var(--dark-text-primary) !important;
+}
+
+[data-theme='dark'] th {
+  background-color: var(--dark-bg-tertiary) !important;
+  color: var(--dark-text-primary) !important;
+  border-color: var(--dark-border) !important;
+}
+
+[data-theme='dark'] td {
+  border-color: var(--dark-border) !important;
+  color: var(--dark-text-primary) !important;
+}
+
+[data-theme='dark'] tr:hover {
+  background-color: var(--dark-card-hover-bg) !important;
+}
+
+/* Navigation dark theme */
+[data-theme='dark'] .navbar {
+  background-color: var(--dark-bg-secondary) !important;
+  border-color: var(--dark-border) !important;
+}
+
+[data-theme='dark'] .navbar__item {
+  color: var(--dark-text-primary) !important;
+}
+
+[data-theme='dark'] .navbar__link:hover {
+  color: var(--ifm-color-primary) !important;
+}
+
+/* Footer - keeping original styling */
+
+/* Modal dark theme */
+[data-theme='dark'] .modal {
+  background-color: var(--dark-bg-secondary) !important;
+  color: var(--dark-text-primary) !important;
+  border-color: var(--dark-border) !important;
+}
+
+[data-theme='dark'] .modal-header {
+  background-color: var(--dark-bg-tertiary) !important;
+  border-color: var(--dark-border) !important;
+}
+
+/* Dropdown dark theme */
+[data-theme='dark'] .dropdown {
+  background-color: var(--dark-bg-secondary) !important;
+  border-color: var(--dark-border) !important;
+  box-shadow: var(--dark-shadow-lg) !important;
+}
+
+[data-theme='dark'] .dropdown__link {
+  color: var(--dark-text-primary) !important;
+}
+
+[data-theme='dark'] .dropdown__link:hover {
+  background-color: var(--dark-card-hover-bg) !important;
+  color: var(--ifm-color-primary) !important;
+}
+
+/* Code blocks dark theme */
+[data-theme='dark'] pre {
+  background-color: var(--dark-bg-tertiary) !important;
+  border-color: var(--dark-border) !important;
+}
+
+[data-theme='dark'] code {
+  background-color: var(--dark-bg-tertiary) !important;
+  color: var(--dark-text-primary) !important;
+}
+
+/* ===== DOCUSAURUS DOCUMENTATION PAGES DARK THEME ===== */
+
+/* Main documentation layout */
+[data-theme='dark'] .main-wrapper {
+  background-color: var(--dark-bg-primary) !important;
+  color: var(--dark-text-primary) !important;
+}
+
+[data-theme='dark'] .docusaurus-wrapper {
+  background-color: var(--dark-bg-primary) !important;
+}
+
+/* Documentation content area */
+[data-theme='dark'] .container {
+  background-color: var(--dark-bg-primary) !important;
+}
+
+[data-theme='dark'] .row {
+  background-color: var(--dark-bg-primary) !important;
+}
+
+[data-theme='dark'] .col {
+  background-color: var(--dark-bg-primary) !important;
+}
+
+/* Documentation sidebar */
+[data-theme='dark'] .theme-doc-sidebar-container {
+  background-color: var(--dark-bg-secondary) !important;
+  border-color: var(--dark-border) !important;
+}
+
+[data-theme='dark'] .theme-doc-sidebar-menu {
+  background-color: var(--dark-bg-secondary) !important;
+}
+
+[data-theme='dark'] .menu__link {
+  color: var(--dark-text-secondary) !important;
+}
+
+[data-theme='dark'] .menu__link:hover {
+  background-color: var(--dark-card-hover-bg) !important;
+  color: var(--dark-text-primary) !important;
+}
+
+[data-theme='dark'] .menu__link--active {
+  background-color: var(--ifm-color-primary) !important;
+  color: white !important;
+}
+
+[data-theme='dark'] .menu__list-item-collapsible {
+  background-color: var(--dark-bg-secondary) !important;
+}
+
+[data-theme='dark'] .menu__caret {
+  color: var(--dark-text-muted) !important;
+}
+
+/* Documentation content */
+[data-theme='dark'] .theme-doc-markdown {
+  background-color: var(--dark-bg-primary) !important;
+  color: var(--dark-text-primary) !important;
+}
+
+[data-theme='dark'] .markdown {
+  background-color: var(--dark-bg-primary) !important;
+  color: var(--dark-text-primary) !important;
+}
+
+[data-theme='dark'] .markdown h1,
+[data-theme='dark'] .markdown h2,
+[data-theme='dark'] .markdown h3,
+[data-theme='dark'] .markdown h4,
+[data-theme='dark'] .markdown h5,
+[data-theme='dark'] .markdown h6 {
+  color: var(--dark-text-primary) !important;
+}
+
+[data-theme='dark'] .markdown p {
+  color: var(--dark-text-secondary) !important;
+}
+
+[data-theme='dark'] .markdown li {
+  color: var(--dark-text-secondary) !important;
+}
+
+[data-theme='dark'] .markdown a {
+  color: var(--ifm-color-primary) !important;
+}
+
+[data-theme='dark'] .markdown a:hover {
+  color: var(--ifm-color-primary-light) !important;
+}
+
+/* Documentation breadcrumbs */
+[data-theme='dark'] .breadcrumbs {
+  background-color: var(--dark-bg-primary) !important;
+}
+
+[data-theme='dark'] .breadcrumbs__link {
+  color: var(--dark-text-muted) !important;
+}
+
+[data-theme='dark'] .breadcrumbs__link:hover {
+  color: var(--dark-text-primary) !important;
+}
+
+[data-theme='dark'] .breadcrumbs__item--active .breadcrumbs__link {
+  color: var(--dark-text-primary) !important;
+}
+
+/* Documentation table of contents */
+[data-theme='dark'] .table-of-contents {
+  background-color: var(--dark-bg-primary) !important;
+}
+
+[data-theme='dark'] .table-of-contents__link {
+  color: var(--dark-text-muted) !important;
+}
+
+[data-theme='dark'] .table-of-contents__link:hover {
+  color: var(--dark-text-primary) !important;
+}
+
+[data-theme='dark'] .table-of-contents__link--active {
+  color: var(--ifm-color-primary) !important;
+}
+
+/* Documentation pagination */
+[data-theme='dark'] .pagination-nav {
+  background-color: var(--dark-bg-primary) !important;
+}
+
+[data-theme='dark'] .pagination-nav__link {
+  background-color: var(--dark-bg-secondary) !important;
+  border-color: var(--dark-border) !important;
+  color: var(--dark-text-primary) !important;
+}
+
+[data-theme='dark'] .pagination-nav__link:hover {
+  background-color: var(--dark-card-hover-bg) !important;
+  border-color: var(--ifm-color-primary) !important;
+}
+
+[data-theme='dark'] .pagination-nav__sublabel {
+  color: var(--dark-text-muted) !important;
+}
+
+[data-theme='dark'] .pagination-nav__label {
+  color: var(--dark-text-primary) !important;
+}
+
+/* Documentation admonitions (info, warning, etc.) */
+[data-theme='dark'] .admonition {
+  background-color: var(--dark-bg-secondary) !important;
+  border-color: var(--dark-border) !important;
+  color: var(--dark-text-primary) !important;
+}
+
+[data-theme='dark'] .admonition-heading {
+  color: var(--dark-text-primary) !important;
+}
+
+[data-theme='dark'] .admonition-content {
+  color: var(--dark-text-secondary) !important;
+}
+
+/* Documentation tabs */
+[data-theme='dark'] .tabs-container {
+  background-color: var(--dark-bg-primary) !important;
+}
+
+[data-theme='dark'] .tabs {
+  background-color: var(--dark-bg-secondary) !important;
+  border-color: var(--dark-border) !important;
+}
+
+[data-theme='dark'] .tabs__item {
+  background-color: var(--dark-bg-secondary) !important;
+  color: var(--dark-text-muted) !important;
+  border-color: var(--dark-border) !important;
+}
+
+[data-theme='dark'] .tabs__item:hover {
+  background-color: var(--dark-card-hover-bg) !important;
+  color: var(--dark-text-primary) !important;
+}
+
+[data-theme='dark'] .tabs__item--active {
+  background-color: var(--dark-bg-primary) !important;
+  color: var(--ifm-color-primary) !important;
+  border-bottom-color: var(--ifm-color-primary) !important;
+}
+
+[data-theme='dark'] .tabpanel {
+  background-color: var(--dark-bg-primary) !important;
+  color: var(--dark-text-primary) !important;
+}
+
+/* Documentation code blocks */
+[data-theme='dark'] .prism-code {
+  background-color: var(--dark-bg-tertiary) !important;
+  color: var(--dark-text-primary) !important;
+}
+
+[data-theme='dark'] .codeBlockTitle {
+  background-color: var(--dark-bg-tertiary) !important;
+  color: var(--dark-text-primary) !important;
+  border-color: var(--dark-border) !important;
+}
+
+[data-theme='dark'] .codeBlockLines {
+  background-color: var(--dark-bg-tertiary) !important;
+}
+
+[data-theme='dark'] .token-line {
+  color: var(--dark-text-primary) !important;
+}
+
+/* Documentation blockquotes */
+[data-theme='dark'] blockquote {
+  background-color: var(--dark-bg-secondary) !important;
+  border-left-color: var(--ifm-color-primary) !important;
+  color: var(--dark-text-secondary) !important;
+}
+
+/* Documentation details/summary */
+[data-theme='dark'] details {
+  background-color: var(--dark-bg-secondary) !important;
+  border-color: var(--dark-border) !important;
+}
+
+[data-theme='dark'] summary {
+  background-color: var(--dark-bg-tertiary) !important;
+  color: var(--dark-text-primary) !important;
+}
+
+/* Documentation search */
+[data-theme='dark'] .DocSearch {
+  --docsearch-primary-color: var(--ifm-color-primary) !important;
+  --docsearch-text-color: var(--dark-text-primary) !important;
+  --docsearch-muted-color: var(--dark-text-muted) !important;
+  --docsearch-container-background: rgba(18, 18, 18, 0.8) !important;
+  --docsearch-modal-background: var(--dark-bg-secondary) !important;
+  --docsearch-searchbox-background: var(--dark-bg-tertiary) !important;
+  --docsearch-searchbox-focus-background: var(--dark-bg-tertiary) !important;
+  --docsearch-hit-color: var(--dark-text-primary) !important;
+  --docsearch-hit-active-color: var(--dark-text-primary) !important;
+  --docsearch-hit-background: var(--dark-bg-tertiary) !important;
+  --docsearch-hit-shadow: var(--dark-shadow) !important;
+  --docsearch-key-gradient: linear-gradient(-225deg, var(--dark-bg-tertiary), var(--dark-bg-secondary)) !important;
+  --docsearch-key-shadow: inset 0 -2px 0 0 var(--dark-border), inset 0 0 1px 1px var(--dark-border), 0 1px 2px 1px rgba(0, 0, 0, 0.3) !important;
+  --docsearch-footer-background: var(--dark-bg-tertiary) !important;
+  --docsearch-footer-shadow: var(--dark-shadow) !important;
+}
+
+/* Documentation edit page link */
+[data-theme='dark'] .theme-edit-this-page {
+  color: var(--dark-text-muted) !important;
+}
+
+[data-theme='dark'] .theme-edit-this-page:hover {
+  color: var(--ifm-color-primary) !important;
+}
+
+/* Documentation last updated */
+[data-theme='dark'] .theme-last-updated {
+  color: var(--dark-text-muted) !important;
+}
+
+/* Documentation category cards */
+[data-theme='dark'] .card {
+  background-color: var(--dark-card-bg) !important;
+  border-color: var(--dark-border) !important;
+  color: var(--dark-text-primary) !important;
+  box-shadow: var(--dark-shadow) !important;
+}
+
+[data-theme='dark'] .card:hover {
+  background-color: var(--dark-card-hover-bg) !important;
+  box-shadow: var(--dark-shadow-lg) !important;
+}
+
+[data-theme='dark'] .card__header {
+  color: var(--dark-text-primary) !important;
+}
+
+[data-theme='dark'] .card__body {
+  color: var(--dark-text-secondary) !important;
+}
+
+[data-theme='dark'] .card__footer {
+  border-color: var(--dark-border) !important;
+}
+
+/* Documentation hero banner */
+[data-theme='dark'] .hero {
+  background-color: var(--dark-bg-secondary) !important;
+  color: var(--dark-text-primary) !important;
+}
+
+[data-theme='dark'] .hero__title {
+  color: var(--dark-text-primary) !important;
+}
+
+[data-theme='dark'] .hero__subtitle {
+  color: var(--dark-text-secondary) !important;
+}
+
+/* Documentation alert/callout boxes */
+[data-theme='dark'] .alert {
+  background-color: var(--dark-bg-secondary) !important;
+  border-color: var(--dark-border) !important;
+  color: var(--dark-text-primary) !important;
+}
+
+[data-theme='dark'] .alert--primary {
+  background-color: rgba(37, 194, 160, 0.1) !important;
+  border-color: var(--ifm-color-primary) !important;
+}
+
+[data-theme='dark'] .alert--secondary {
+  background-color: var(--dark-bg-tertiary) !important;
+  border-color: var(--dark-border) !important;
+}
+
+[data-theme='dark'] .alert--success {
+  background-color: rgba(34, 197, 94, 0.1) !important;
+  border-color: #22c55e !important;
+}
+
+[data-theme='dark'] .alert--info {
+  background-color: rgba(59, 130, 246, 0.1) !important;
+  border-color: #3b82f6 !important;
+}
+
+[data-theme='dark'] .alert--warning {
+  background-color: rgba(245, 158, 11, 0.1) !important;
+  border-color: #f59e0b !important;
+}
+
+[data-theme='dark'] .alert--danger {
+  background-color: rgba(239, 68, 68, 0.1) !important;
+  border-color: #ef4444 !important;
+}
+
+/* Documentation inline code */
+[data-theme='dark'] code:not([class*="language-"]) {
+  background-color: var(--dark-bg-tertiary) !important;
+  color: var(--ifm-color-primary) !important;
+  border: 1px solid var(--dark-border) !important;
+}
+
+/* Documentation horizontal rules */
+[data-theme='dark'] hr {
+  border-color: var(--dark-border) !important;
+}
+
+/* Documentation images */
+[data-theme='dark'] .markdown img {
+  border-radius: 8px;
+  box-shadow: var(--dark-shadow);
+}
+
+/* Fix for any remaining white backgrounds */
+[data-theme='dark'] .theme-doc-version-banner {
+  background-color: var(--dark-bg-secondary) !important;
+  border-color: var(--dark-border) !important;
+  color: var(--dark-text-primary) !important;
+}
+
+[data-theme='dark'] .theme-doc-version-badge {
+  background-color: var(--dark-bg-tertiary) !important;
+  color: var(--dark-text-primary) !important;
+}
+
+/* Ensure all text is readable */
+[data-theme='dark'] * {
+  border-color: var(--dark-border);
+}
+
+[data-theme='dark'] .theme-doc-markdown > div,
+[data-theme='dark'] .theme-doc-markdown > section,
+[data-theme='dark'] .theme-doc-markdown > article {
+  background-color: var(--dark-bg-primary) !important;
+  color: var(--dark-text-primary) !important;
 }
 html.theme-light .bg-white {
   background-color: #ffffff !important;
diff --git a/src/pages/badges/github-badges.module.css b/src/pages/badges/github-badges.module.css
index 6fa00e59..3effaf87 100644
--- a/src/pages/badges/github-badges.module.css
+++ b/src/pages/badges/github-badges.module.css
@@ -722,26 +722,56 @@ table th, table td {
 }
 
 /* Dark mode support */
-@media (prefers-color-scheme: dark) {
-  .skinToneBadgeCard {
-    background: #0d1117;
-  }
-  
-  .badgeHeader h3 {
-    color: #c9d1d9;
-  }
-  
-  .variant {
-    background: #161b22;
-  }
-  
-  .variant:hover {
-    background: #1c2128;
-  }
-  
-  .skinToneLabel {
-    color: #8b949e;
-  }
+[data-theme='dark'] .skinToneBadgeCard {
+  background: var(--dark-bg-secondary);
+  color: var(--dark-text-primary);
+}
+
+[data-theme='dark'] .badgeHeader h3 {
+  color: var(--dark-text-primary);
+}
+
+[data-theme='dark'] .variant {
+  background: var(--dark-bg-tertiary);
+  color: var(--dark-text-primary);
+}
+
+[data-theme='dark'] .variant:hover {
+  background: var(--dark-card-hover-bg);
+}
+
+[data-theme='dark'] .skinToneLabel {
+  color: var(--dark-text-muted);
+}
+
+[data-theme='dark'] .achievementsTable {
+  background: var(--dark-bg-secondary);
+  color: var(--dark-text-primary);
+}
+
+[data-theme='dark'] .achievementsTable th {
+  background: var(--dark-bg-tertiary);
+  color: var(--dark-text-primary);
+  border-color: var(--dark-border);
+}
+
+[data-theme='dark'] .achievementsTable td {
+  border-color: var(--dark-border);
+  color: var(--dark-text-primary);
+}
+
+[data-theme='dark'] .achievementsTable tr:hover {
+  background: var(--dark-card-hover-bg);
+}
+
+[data-theme='dark'] .title {
+  color: var(--dark-text-primary);
+}
+
+[data-theme='dark'] .bannerAchievements {
+  background: var(--dark-bg-secondary);
+  color: var(--dark-text-primary);
+  border-color: var(--dark-border);
 }
 
 /* Footer Styles */
@@ -751,6 +781,8 @@ table th, table td {
   margin-top: 60px;
 }
 
+/* Footer - keeping original styling */
+
 .footerGrid {
   display: grid;
   grid-template-columns: 1fr 2fr 1fr;
diff --git a/src/pages/badges/github-badges.tsx b/src/pages/badges/github-badges.tsx
index e475b13a..b272ef90 100644
--- a/src/pages/badges/github-badges.tsx
+++ b/src/pages/badges/github-badges.tsx
@@ -3,6 +3,7 @@ import Head from '@docusaurus/Head';
 import { motion, HTMLMotionProps } from 'framer-motion';
 import type { ReactElement } from 'react';
 import Layout from '@theme/Layout';
+import { useColorMode } from '@docusaurus/theme-common';
 import styles from './github-badges.module.css';
 
 type MotionDivProps = HTMLMotionProps<"div">;
@@ -11,6 +12,9 @@ type MotionTrProps = HTMLMotionProps<"tr">;
 import Link from '@docusaurus/Link';
 
 const GithubBadges = (): React.ReactElement => {
+  const { colorMode } = useColorMode();
+  const isDark = colorMode === 'dark';
+
   // Scroll to top button logic
   useEffect(() => {
     const scrollToTopBtn = document.getElementById("scrollToTop");
@@ -43,7 +47,9 @@ const GithubBadges = (): React.ReactElement => {
       title="GitHub Achievements - RecodeHive"
       description="Explore GitHub achievements and badges"
     >
-      <div className={styles["github-badges-page"]}>
+      <div className={`${styles["github-badges-page"]} transition-colors duration-300 ${
+        isDark ? 'dark-bg-primary dark-text-primary' : 'bg-white text-black'
+      }`}>
       {/* Hero section */}
       <Head>
         <title>GitHub Achievements - RecodeHive</title>
diff --git a/src/pages/blogs/blogs.css b/src/pages/blogs/blogs.css
index 2b2f860f..67feb600 100644
--- a/src/pages/blogs/blogs.css
+++ b/src/pages/blogs/blogs.css
@@ -39,17 +39,17 @@
   --blog-transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-/* Dark Mode Variables */
+/* Dark Mode Variables - Using standardized colors */
 [data-theme='dark'] {
-  --blog-text-primary: #f7fafc;
-  --blog-text-secondary: #e2e8f0;
-  --blog-text-muted: #a0aec0;
-  --blog-bg-primary: #1a202c;
-  --blog-bg-secondary: #2d3748;
-  --blog-bg-card: #2d3748;
-  --blog-border: #4a5568;
-  --blog-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
-  --blog-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
+  --blog-text-primary: var(--dark-text-primary);
+  --blog-text-secondary: var(--dark-text-secondary);
+  --blog-text-muted: var(--dark-text-muted);
+  --blog-bg-primary: var(--dark-bg-primary);
+  --blog-bg-secondary: var(--dark-bg-secondary);
+  --blog-bg-card: var(--dark-card-bg);
+  --blog-border: var(--dark-border);
+  --blog-shadow: var(--dark-shadow);
+  --blog-shadow-lg: var(--dark-shadow-lg);
   --blog-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
 }
 
diff --git a/src/pages/careers/index.tsx b/src/pages/careers/index.tsx
index 3cd4e624..7dd4361d 100644
--- a/src/pages/careers/index.tsx
+++ b/src/pages/careers/index.tsx
@@ -3,6 +3,7 @@ import Layout from "@theme/Layout";
 import Head from "@docusaurus/Head";
 import { motion } from "framer-motion";
 import Link from "@docusaurus/Link";
+import { useColorMode } from '@docusaurus/theme-common';
 
 // Animation variants for consistent animations
 const fadeIn = {
@@ -124,6 +125,8 @@ const testimonials = [
 ];
 
 export default function CareersPage() {
+  const { colorMode } = useColorMode();
+  const isDark = colorMode === 'dark';
   const [activeTestimonial, setActiveTestimonial] = useState(0);
 
   useEffect(() => {
@@ -146,7 +149,11 @@ export default function CareersPage() {
         />
       </Head>
 
-      <div className="careers-page bg-gradient-to-b from-white to-gray-50 dark:from-gray-900 dark:to-black">
+      <div className={`careers-page transition-colors duration-300 ${
+        isDark
+          ? 'bg-gradient-to-b from-gray-900 to-black'
+          : 'bg-gradient-to-b from-white to-gray-50'
+      }`}>
         {/* Hero Section */}
         <motion.section
           className="hero-section py-20 px-4 text-center bg-gradient-to-br from-blue-600 via-purple-600 to-blue-800 text-white relative overflow-hidden"
@@ -199,10 +206,14 @@ export default function CareersPage() {
         >
           <div className="max-w-6xl mx-auto">
             <motion.div className="text-center mb-16" variants={fadeIn}>
-              <h2 className="text-4xl md:text-5xl font-bold mb-6 text-gray-900 dark:text-white">
+              <h2 className={`text-4xl md:text-5xl font-bold mb-6 ${
+                isDark ? 'text-white' : 'text-gray-900'
+              }`}>
                 Our Culture & Values
               </h2>
-              <p className="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
+              <p className={`text-xl max-w-3xl mx-auto ${
+                isDark ? 'text-gray-300' : 'text-gray-600'
+              }`}>
                 We're building more than just a company—we're creating a community of learners, innovators, and leaders.
               </p>
             </motion.div>
@@ -211,16 +222,22 @@ export default function CareersPage() {
               {cultureValues.map((value, index) => (
                 <motion.div
                   key={index}
-                  className="culture-card bg-white dark:bg-gray-800 rounded-xl shadow-lg p-8 hover:shadow-xl transition-all duration-300 transform hover:scale-105"
+                  className={`culture-card rounded-xl shadow-lg p-8 hover:shadow-xl transition-all duration-300 transform hover:scale-105 ${
+                    isDark ? 'bg-gray-800' : 'bg-white'
+                  }`}
                   variants={fadeIn}
                 >
                   <div className="h-48 bg-gradient-to-br from-blue-400 to-purple-500 rounded-lg mb-6 flex items-center justify-center">
                     <span className="text-6xl">🚀</span>
                   </div>
-                  <h3 className="text-2xl font-bold mb-4 text-gray-900 dark:text-white">
+                  <h3 className={`text-2xl font-bold mb-4 ${
+                    isDark ? 'text-white' : 'text-gray-900'
+                  }`}>
                     {value.title}
                   </h3>
-                  <p className="text-gray-600 dark:text-gray-300">
+                  <p className={`${
+                    isDark ? 'text-gray-300' : 'text-gray-600'
+                  }`}>
                     {value.description}
                   </p>
                 </motion.div>
diff --git a/src/pages/community/community.css b/src/pages/community/community.css
index fe3241d6..0288b454 100644
--- a/src/pages/community/community.css
+++ b/src/pages/community/community.css
@@ -7,7 +7,7 @@
 }
 
 [data-theme='dark'] .community-page {
-  background: #121212;
+  background: var(--dark-bg-primary);
 }
 
 /* CSS Custom Properties for better browser support */
@@ -21,11 +21,11 @@
 }
 
 [data-theme='dark'] {
-  --text-primary: #ffffff;
-  --text-secondary: #edf2f7;
-  --bg-primary: #1a1a1a;
-  --bg-secondary: #121212;
-  --border-color: #2d2d2d;
+  --text-primary: var(--dark-text-primary);
+  --text-secondary: var(--dark-text-secondary);
+  --bg-primary: var(--dark-bg-secondary);
+  --bg-secondary: var(--dark-bg-primary);
+  --border-color: var(--dark-border);
 }
 
 /* Hero Section */
diff --git a/src/pages/courses/index.tsx b/src/pages/courses/index.tsx
index 62e51ea6..295b8d65 100644
--- a/src/pages/courses/index.tsx
+++ b/src/pages/courses/index.tsx
@@ -2,6 +2,7 @@ import React, { useState, useRef, useEffect } from "react";
 import Layout from "@theme/Layout";
 import Head from "@docusaurus/Head";
 import { motion } from "framer-motion";
+import { useColorMode } from '@docusaurus/theme-common';
 
 // Animation variants for consistent animations
 const fadeIn = {
@@ -135,6 +136,9 @@ const faqs = [
 ];
 
 export default function CoursesLanding() {
+  const { colorMode } = useColorMode();
+  const isDark = colorMode === 'dark';
+
   const [showAllTopics, setShowAllTopics] = useState(false);
   const [modal, setModal] = useState({ open: false, content: "" });
   const [openFaq, setOpenFaq] = useState(null);
@@ -385,13 +389,19 @@ export default function CoursesLanding() {
           `}
         </style>
       </Head>
-      <main className="bg-black min-h-screen text-white">
+      <main className={`min-h-screen transition-colors duration-300 ${
+        isDark ? 'bg-[#121212] text-white' : 'bg-white text-black'
+      }`}>
         {/* Modal */}
         {modal.open && (
           <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-60 animate-fadeIn">
-            <div className="bg-white text-black rounded-lg p-8 max-w-md w-full text-center relative animate-scaleIn">
+            <div className={`rounded-lg p-8 max-w-md w-full text-center relative animate-scaleIn ${
+              isDark ? 'bg-[#1a1a1a] text-white' : 'bg-white text-black'
+            }`}>
               <button
-                className="absolute top-2 right-4 text-2xl transition-transform hover:scale-110"
+                className={`absolute top-2 right-4 text-2xl transition-transform hover:scale-110 ${
+                  isDark ? 'text-white hover:text-gray-300' : 'text-black hover:text-gray-700'
+                }`}
                 onClick={() => setModal({ open: false, content: "" })}
               >
                 ×
@@ -403,7 +413,11 @@ export default function CoursesLanding() {
 
         {/* Hero Section */}
         <motion.section
-          className="py-20 px-4 text-center border-b border-gray-800 bg-gradient-to-br from-blue-950 via-gray-900 to-black relative overflow-hidden"
+          className={`py-20 px-4 text-center relative overflow-hidden transition-colors duration-300 ${
+            isDark
+              ? 'border-b border-gray-800 bg-gradient-to-br from-blue-950 via-gray-900 to-black'
+              : 'border-b border-gray-200 bg-gradient-to-br from-blue-50 via-white to-gray-50'
+          }`}
           initial="hidden"
           animate="visible"
           variants={{
@@ -419,10 +433,14 @@ export default function CoursesLanding() {
             Transform Your Career<br />in Data Engineering</motion.h1>
           <div className="flex justify-center items-center">
             <motion.p
-              className="text-xl md:text-2xl text-gray-300 max-w-2xl text-center leading-relaxed"
+              className={`text-xl md:text-2xl max-w-2xl text-center leading-relaxed ${
+                isDark ? 'text-gray-300' : 'text-gray-700'
+              }`}
               variants={fadeIn}
             >
-              Master the art of data engineering with industry-leading courses designed for <span className="text-blue-300 font-semibold">modern tech careers</span>.
+              Master the art of data engineering with industry-leading courses designed for <span className={`font-semibold ${
+                isDark ? 'text-blue-300' : 'text-blue-600'
+              }`}>modern tech careers</span>.
             </motion.p>
           </div>
           <motion.div
@@ -462,11 +480,15 @@ export default function CoursesLanding() {
             style={{ scrollBehavior: 'smooth' }}
             variants={fadeIn}
           >
-            <div className="flex gap-2 inline-flex">
+            <div className="flex gap-2">
               {techTags.map((tag, idx) => (
                 <span
                   key={idx}
-                  className="bg-gray-800/80 hover:bg-blue-700/80 px-4 py-2 rounded-full text-sm font-semibold text-gray-200 shadow-md transition-all duration-300 border border-gray-700/50 hover:border-blue-500/50 hover:text-white"
+                  className={`px-4 py-2 rounded-full text-sm font-semibold shadow-md transition-all duration-300 ${
+                    isDark
+                      ? 'bg-gray-800/80 hover:bg-blue-700/80 text-gray-200 border border-gray-700/50 hover:border-blue-500/50 hover:text-white'
+                      : 'bg-gray-100 hover:bg-blue-100 text-gray-700 border border-gray-300 hover:border-blue-400 hover:text-blue-700'
+                  }`}
                 >
                   {tag}
                 </span>
@@ -479,7 +501,9 @@ export default function CoursesLanding() {
             className="mt-8"
             variants={fadeIn}
           >
-            <h3 className="text-lg text-gray-400 mb-2 text-center">Students now available at</h3>
+            <h3 className={`text-lg mb-2 text-center ${
+              isDark ? 'text-gray-400' : 'text-gray-600'
+            }`}>Students now available at</h3>
             <div className="flex flex-wrap justify-center items-center gap-4">
               {partnerLogos.map((logo, idx) => (
                 <motion.img
diff --git a/src/pages/get-started/index.tsx b/src/pages/get-started/index.tsx
index f7704dc0..b444a563 100644
--- a/src/pages/get-started/index.tsx
+++ b/src/pages/get-started/index.tsx
@@ -4,6 +4,7 @@ import Link from "@docusaurus/Link";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import { motion, useAnimation, useInView } from "framer-motion";
 import Head from '@docusaurus/Head';
+import { useColorMode } from '@docusaurus/theme-common';
 import styles from "./styles.module.css";
 
 // Type definitions
@@ -608,6 +609,8 @@ const LearningPath = ({
 
 export default function GetStarted() {
   const { siteConfig } = useDocusaurusContext();
+  const { colorMode } = useColorMode();
+  const isDark = colorMode === 'dark';
   type CompletedPaths = Record<string, boolean>;
 
   const [completedPaths, setCompletedPaths] = useState<CompletedPaths>(() => {
@@ -661,7 +664,9 @@ export default function GetStarted() {
       
       <GetStartedHeader />
       
-      <main>
+      <main className={`transition-colors duration-300 ${
+        isDark ? 'dark-bg-primary dark-text-primary' : 'bg-white text-black'
+      }`}>
         {/* Features Section */}
         <section className={styles.features}>
           <div className="container">
diff --git a/src/pages/get-started/styles.module.css b/src/pages/get-started/styles.module.css
index fe037d37..22ab02e9 100644
--- a/src/pages/get-started/styles.module.css
+++ b/src/pages/get-started/styles.module.css
@@ -1,4 +1,55 @@
 /* Base styles - Mobile First */
+
+/* Dark theme support */
+[data-theme='dark'] .features {
+  background: var(--dark-bg-primary);
+  color: var(--dark-text-primary);
+}
+
+[data-theme='dark'] .sectionHeader h2 {
+  color: var(--dark-text-primary);
+}
+
+[data-theme='dark'] .sectionHeader p {
+  color: var(--dark-text-secondary);
+}
+
+[data-theme='dark'] .featuresGrid {
+  background: var(--dark-bg-primary);
+}
+
+[data-theme='dark'] .feature {
+  background: var(--dark-bg-secondary);
+  border-color: var(--dark-border);
+  color: var(--dark-text-primary);
+}
+
+[data-theme='dark'] .feature:hover {
+  background: var(--dark-card-hover-bg);
+  box-shadow: var(--dark-shadow-lg);
+}
+
+[data-theme='dark'] .statsSection {
+  background: var(--dark-bg-secondary);
+  color: var(--dark-text-primary);
+}
+
+[data-theme='dark'] .statCard {
+  background: var(--dark-bg-tertiary);
+  color: var(--dark-text-primary);
+  border-color: var(--dark-border);
+}
+
+[data-theme='dark'] .learningPath {
+  background: var(--dark-bg-secondary);
+  border-color: var(--dark-border);
+  color: var(--dark-text-primary);
+}
+
+[data-theme='dark'] .learningPath:hover {
+  background: var(--dark-card-hover-bg);
+  box-shadow: var(--dark-shadow-lg);
+}
 .buttons {
   display: flex;
   justify-content: center;
diff --git a/src/theme/Footer/Layout/enhanced-footer.css b/src/theme/Footer/Layout/enhanced-footer.css
index 84adfd0c..a2cbb49d 100644
--- a/src/theme/Footer/Layout/enhanced-footer.css
+++ b/src/theme/Footer/Layout/enhanced-footer.css
@@ -1,12 +1,32 @@
-/* Enhanced Footer Styles */
+/* Enhanced Footer Styles - COMPLETELY ISOLATED FROM THEME CHANGES */
 .enhanced-footer {
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 25%, #16213e 50%, #0f3460 75%, #533483 100%);
-  color: #e2e8f0;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
+  background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 25%, #16213e 50%, #0f3460 75%, #533483 100%) !important;
+  color: #e2e8f0 !important;
   position: relative;
   overflow: hidden;
 }
 
+/* Override ALL possible Docusaurus and theme styles */
+.enhanced-footer,
+.enhanced-footer *,
+[data-theme='dark'] .enhanced-footer,
+[data-theme='light'] .enhanced-footer,
+html[data-theme='dark'] .enhanced-footer,
+html[data-theme='light'] .enhanced-footer,
+[data-theme='dark'] .enhanced-footer *,
+[data-theme='light'] .enhanced-footer *,
+html[data-theme='dark'] .enhanced-footer *,
+html[data-theme='light'] .enhanced-footer * {
+  background-color: inherit !important;
+  color: inherit !important;
+}
+
+/* Force the main footer background to never change */
+.enhanced-footer {
+  background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 25%, #16213e 50%, #0f3460 75%, #533483 100%) !important;
+}
+
 /* Add animated background pattern */
 .enhanced-footer::before {
   content: '';
@@ -70,10 +90,7 @@
   100% { transform: translateY(0px) translateX(0px); }
 }
 
-/* Dark theme support */
-[data-theme='dark'] .enhanced-footer {
-  background: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 25%, #16213e 50%, #0f3460 75%, #533483 100%);
-}
+/* NO THEME OVERRIDES - FOOTER STAYS THE SAME ALWAYS */
 
 .container {
   max-width: 1200px;

From b6e0c6c9a4ad53b4f5d222e97a5382d01f237f4d Mon Sep 17 00:00:00 2001
From: YourGitHubUsername <richajaiswalhome@gmail.com>
Date: Thu, 7 Aug 2025 15:03:52 +0530
Subject: [PATCH 2/3] added dark theme for all pages

---
 src/components/Roadmap/Roadmap.css            |   26 +
 src/components/TeamProfileCards/teamcards.css |   22 +-
 src/pages/badges/github-badges.module.css     |  479 ++++++-
 src/pages/badges/github-badges.tsx            |   37 +-
 src/pages/broadcasts/index.css                |   57 +
 src/pages/broadcasts/video.css                |   55 +
 src/pages/careers/index.tsx                   |   35 +-
 src/pages/courses/courses.css                 | 1224 +++++++++++++++++
 src/pages/courses/index.tsx                   |  953 +++++++------
 src/pages/get-started/index.tsx               |   35 +-
 src/pages/our-sponsors/Sponsors.css           |   31 +
 src/pages/podcasts/index.css                  |   38 +
 src/pages/showcase/styles.module.css          |   14 +
 src/theme/Footer/Layout/enhanced-footer.css   |  139 +-
 14 files changed, 2605 insertions(+), 540 deletions(-)
 create mode 100644 src/pages/courses/courses.css

diff --git a/src/components/Roadmap/Roadmap.css b/src/components/Roadmap/Roadmap.css
index 3eb8af48..ebf720ee 100644
--- a/src/components/Roadmap/Roadmap.css
+++ b/src/components/Roadmap/Roadmap.css
@@ -3,6 +3,11 @@
   padding: 20px;
 }
 
+[data-theme='dark'] .roadmap-container {
+  background: var(--dark-bg-primary);
+  color: var(--dark-text-primary);
+}
+
 .roadmap-container .roadmap-title {
   text-align: center;
   font-size: 2.5rem;
@@ -33,6 +38,16 @@
   max-width: 400px;
 }
 
+[data-theme='dark'] .roadmap-container .roadmap-search {
+  background: var(--dark-input-bg);
+  color: var(--dark-text-primary);
+  border-color: var(--dark-input-border);
+}
+
+[data-theme='dark'] .roadmap-container .roadmap-search:focus {
+  border-color: var(--dark-input-focus-border);
+}
+
 .roadmap-container .roadmap-category {
   margin-bottom: 30px;
 }
@@ -83,11 +98,22 @@
   text-align: center;
 }
 
+[data-theme='dark'] .roadmap-container .roadmap-category .roadmap-cards .roadmap-card {
+  background: var(--dark-card-bg);
+  border-color: var(--dark-border);
+  box-shadow: var(--dark-shadow);
+  color: var(--dark-text-primary);
+}
+
 .roadmap-container .roadmap-category .roadmap-cards .roadmap-card:hover {
   transform: translateY(-2px);
   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
 }
 
+[data-theme='dark'] .roadmap-container .roadmap-category .roadmap-cards .roadmap-card:hover {
+  box-shadow: var(--dark-shadow-lg);
+}
+
 .roadmap-container .roadmap-category .roadmap-cards .roadmap-card .roadmap-link {
   text-decoration: none;
   color: var(--ifm-color-primary);
diff --git a/src/components/TeamProfileCards/teamcards.css b/src/components/TeamProfileCards/teamcards.css
index 8d6db73c..1f3dc710 100644
--- a/src/components/TeamProfileCards/teamcards.css
+++ b/src/components/TeamProfileCards/teamcards.css
@@ -4,11 +4,21 @@
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     border: 0.5px solid black;
   }
-  
+
+[data-theme='dark'] .team-profile-card > .card {
+    border-color: var(--dark-border);
+    background: var(--dark-card-bg);
+    color: var(--dark-text-primary);
+  }
+
   .team-profile-card > .card:hover {
     transform: translateY(-5px);
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
   }
+
+[data-theme='dark'] .team-profile-card > .card:hover {
+    box-shadow: var(--dark-shadow-lg);
+  }
   
   .team-profile-card > .card > .card__header > .avatar > .avatar__photo--xl {
     border-radius: 50%;
@@ -22,4 +32,14 @@
   .team-profile-card > .card > .card__footer > .button-group > .button:hover {
     background-color: #0056b3;
   }
+
+[data-theme='dark'] .team-profile-card > .card > .card__footer > .button-group > .button {
+    background: var(--dark-bg-tertiary);
+    color: var(--dark-text-primary);
+    border-color: var(--dark-border);
+  }
+
+[data-theme='dark'] .team-profile-card > .card > .card__footer > .button-group > .button:hover {
+    background: var(--dark-card-hover-bg);
+  }
   
diff --git a/src/pages/badges/github-badges.module.css b/src/pages/badges/github-badges.module.css
index 3effaf87..afe449a7 100644
--- a/src/pages/badges/github-badges.module.css
+++ b/src/pages/badges/github-badges.module.css
@@ -1,6 +1,12 @@
 body{
     background-color: #fff;
 }
+
+/* Dark theme body override */
+[data-theme='dark'] body {
+    background-color: var(--dark-bg-primary) !important;
+    color: var(--dark-text-primary) !important;
+}
 .github-badges-page {
   background: #f6f5f5;
   border-radius: 18px;
@@ -9,6 +15,13 @@ body{
   margin-top: 24px;
 }
 
+/* Dark theme for main page container */
+[data-theme='dark'] .github-badges-page {
+  background: var(--dark-bg-secondary) !important;
+  color: var(--dark-text-primary) !important;
+  box-shadow: var(--dark-shadow-lg) !important;
+}
+
 .badgeGrid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
@@ -33,6 +46,18 @@ body{
   transform: translateY(-4px) scale(1.03);
 }
 
+/* Dark theme for badge items */
+[data-theme='dark'] .badgeItem {
+  background: var(--dark-bg-tertiary) !important;
+  color: var(--dark-text-primary) !important;
+  box-shadow: var(--dark-shadow) !important;
+}
+
+[data-theme='dark'] .badgeItem:hover {
+  background: var(--dark-card-hover-bg) !important;
+  box-shadow: var(--dark-shadow-lg) !important;
+}
+
 .badgeImg {
   width: 64px;
   height: 64px;
@@ -136,6 +161,11 @@ body{
   text-align: center;
 }
 
+/* Dark theme for headings */
+[data-theme='dark'] .github-badges-page h1 {
+  color: var(--dark-text-primary) !important;
+}
+
 .bannerAchievements {
   background: linear-gradient(90deg, #e0e7ff 0%, #f0fdfa 100%);
   border-radius: 12px;
@@ -155,6 +185,16 @@ body{
   text-align: left;
 }
 
+/* Dark theme for banner and section headings */
+[data-theme='dark'] .bannerAchievements {
+  background: var(--dark-bg-tertiary) !important;
+  color: var(--dark-text-primary) !important;
+}
+
+[data-theme='dark'] .sectionHeading {
+  color: var(--dark-text-primary) !important;
+}
+
 .skinHeading {
   color: #22223b;
   font-size: 2rem;
@@ -168,6 +208,11 @@ body{
   gap: 10px;
 }
 
+/* Dark theme for skin heading */
+[data-theme='dark'] .skinHeading {
+  color: var(--dark-text-primary) !important;
+}
+
 .highlightsHeading {
   color: #f59e42;
   font-size: 2rem;
@@ -337,6 +382,41 @@ table th, table td {
   background: #f9fafb;
 }
 
+/* Dark theme for all table types */
+[data-theme='dark'] .skinToneTable,
+[data-theme='dark'] .highlightsTable,
+[data-theme='dark'] .retiredTable,
+[data-theme='dark'] table {
+  background: var(--dark-bg-secondary) !important;
+  border-color: var(--dark-border) !important;
+  color: var(--dark-text-primary) !important;
+}
+
+[data-theme='dark'] .skinToneTable th,
+[data-theme='dark'] .highlightsTable th,
+[data-theme='dark'] .retiredTable th,
+[data-theme='dark'] table th {
+  background: var(--dark-bg-tertiary) !important;
+  color: var(--dark-text-primary) !important;
+  border-color: var(--dark-border) !important;
+}
+
+[data-theme='dark'] .skinToneTable td,
+[data-theme='dark'] .highlightsTable td,
+[data-theme='dark'] .retiredTable td,
+[data-theme='dark'] table td {
+  border-color: var(--dark-border) !important;
+  color: var(--dark-text-primary) !important;
+}
+
+[data-theme='dark'] .achievementsTable tr:nth-child(even),
+[data-theme='dark'] .skinToneTable tr:nth-child(even),
+[data-theme='dark'] .highlightsTable tr:nth-child(even),
+[data-theme='dark'] .retiredTable tr:nth-child(even),
+[data-theme='dark'] table tr:nth-child(even) {
+  background: var(--dark-bg-tertiary) !important;
+}
+
 .badgeImgSmall {
   width: 44px;
   height: 44px;
@@ -347,6 +427,17 @@ table th, table td {
   box-shadow: 0 1.5px 6px rgba(0,0,0,0.04);
 }
 
+/* Dark theme for badge images */
+[data-theme='dark'] .badgeImg {
+  border-color: var(--dark-border) !important;
+  background: var(--dark-bg-primary) !important;
+}
+
+[data-theme='dark'] .badgeImgSmall {
+  border-color: var(--dark-border) !important;
+  background: var(--dark-bg-primary) !important;
+}
+
 @media (max-width: 800px) {
   .achievementsTable, .skinToneTable, .highlightsTable, .retiredTable {
     font-size: 0.95rem;
@@ -409,6 +500,52 @@ table th, table td {
   margin: 32px 0;
 }
 
+/* Dark theme for text elements */
+[data-theme='dark'] .github-badges-page h2 {
+  color: var(--dark-text-primary) !important;
+}
+
+[data-theme='dark'] .github-badges-page a {
+  color: var(--ifm-color-primary) !important;
+}
+
+[data-theme='dark'] .github-badges-page a:hover {
+  color: var(--ifm-color-primary-light) !important;
+}
+
+[data-theme='dark'] .github-badges-page p,
+[data-theme='dark'] .github-badges-page li {
+  color: var(--dark-text-secondary) !important;
+}
+
+[data-theme='dark'] .github-badges-page hr {
+  border-top-color: var(--dark-border) !important;
+}
+
+/* Additional text elements */
+.subheading {
+  color: #24292f;
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin: 32px 0 16px 0;
+}
+
+.paragraph {
+  color: #4b5563;
+  font-size: 1rem;
+  line-height: 1.6;
+  margin-bottom: 16px;
+}
+
+/* Dark theme for additional text elements */
+[data-theme='dark'] .subheading {
+  color: var(--dark-text-primary) !important;
+}
+
+[data-theme='dark'] .paragraph {
+  color: var(--dark-text-secondary) !important;
+}
+
 .github-badges-page .section {
   margin-bottom: 32px;
 }
@@ -457,6 +594,16 @@ table th, table td {
   line-height: 1.6;
 }
 
+/* Dark theme for certification section */
+[data-theme='dark'] .certificationHero {
+  background: var(--dark-bg-primary) !important;
+  color: var(--dark-text-primary) !important;
+}
+
+[data-theme='dark'] .certificationHero p {
+  color: var(--dark-text-secondary) !important;
+}
+
 .certificationCards {
   max-width: 1200px;
   margin: 0 auto;
@@ -479,6 +626,13 @@ table th, table td {
   backdrop-filter: blur(8px);
 }
 
+/* Dark theme for certification cards */
+[data-theme='dark'] .certCard {
+  background: linear-gradient(135deg, var(--dark-bg-secondary), var(--dark-bg-tertiary)) !important;
+  color: var(--dark-text-primary) !important;
+  box-shadow: var(--dark-shadow-lg) !important;
+}
+
 .certCard::before {
   content: '';
   position: absolute;
@@ -523,6 +677,15 @@ table th, table td {
   margin-bottom: 2rem;
 }
 
+/* Dark theme for card content */
+[data-theme='dark'] .cardContent h2 {
+  color: var(--dark-text-primary) !important;
+}
+
+[data-theme='dark'] .cardContent p {
+  color: var(--dark-text-secondary) !important;
+}
+
 .certBadge {
   flex: 0 0 200px;
   padding: 1rem;
@@ -581,6 +744,15 @@ table th, table td {
   color: white;
 }
 
+/* Dark theme for certification links */
+[data-theme='dark'] .certLink {
+  color: var(--ifm-color-primary) !important;
+}
+
+[data-theme='dark'] .certLink:hover {
+  color: var(--ifm-color-primary-light) !important;
+}
+
 .certLink::after {
   content: "→";
   margin-left: 8px;
@@ -756,12 +928,21 @@ table th, table td {
 }
 
 [data-theme='dark'] .achievementsTable td {
-  border-color: var(--dark-border);
-  color: var(--dark-text-primary);
+  border-color: var(--dark-border) !important;
+  color: var(--dark-text-primary) !important;
+  background: var(--dark-bg-secondary) !important;
+}
+
+[data-theme='dark'] .achievementsTable td:last-child {
+  background: var(--dark-bg-secondary) !important;
+}
+
+[data-theme='dark'] .achievementsTable tr {
+  background: var(--dark-bg-secondary) !important;
 }
 
 [data-theme='dark'] .achievementsTable tr:hover {
-  background: var(--dark-card-hover-bg);
+  background: var(--dark-card-hover-bg) !important;
 }
 
 [data-theme='dark'] .title {
@@ -967,67 +1148,179 @@ table th, table td {
   box-shadow: 0 1px 3px rgba(0,0,0,0.05);
 }
 
+/* Enhanced Level Images Container */
 .achievementsTable .levelImages {
   display: flex;
   flex-wrap: wrap;
-  gap: clamp(6px, 1vw, 10px);
+  gap: clamp(8px, 1.2vw, 12px);
   justify-content: center;
-  margin: 8px 0;
-  padding: 8px;
-  background: #f8fafc;
-  border-radius: 8px;
-  border: 1px solid #e5e7eb;
+  margin: 12px 0;
+  padding: 12px;
+  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+  border-radius: 16px;
+  border: 2px solid #e2e8f0;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.5);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.achievementsTable .levelImages:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7);
+  border-color: #c7d2fe;
 }
 
 .achievementsTable .levelImages img {
-  width: clamp(32px, 5vw, 44px);
-  height: clamp(32px, 5vw, 44px);
-  transition: transform 0.2s ease;
+  width: clamp(36px, 5vw, 48px);
+  height: clamp(36px, 5vw, 48px);
+  border-radius: 12px;
+  border: 2px solid #e5e7eb;
+  background: white;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  cursor: pointer;
 }
 
 .achievementsTable .levelImages img:hover {
-  transform: scale(1.15) rotate(5deg);
+  transform: scale(1.2) rotate(8deg);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15), 0 3px 8px rgba(0, 0, 0, 0.1);
+  border-color: #3b82f6;
+  z-index: 10;
+  position: relative;
 }
 
+/* Enhanced Needed Amount Section */
 .achievementsTable .neededAmount {
-  font-weight: 500;
-  color: #374151;
-  background: linear-gradient(to right, #f1f5f9, #e2e8f0);
-  padding: 6px 14px;
-  border-radius: 12px;
+  font-weight: 600;
+  color: #1e293b;
+  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+  padding: 10px 16px;
+  border-radius: 16px;
   font-size: 0.9em;
-  margin-top: 6px;
-  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
-  border: 1px solid #e5e7eb;
+  margin-top: 8px;
+  text-align: center;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
+  border: 2px solid #e2e8f0;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+  letter-spacing: 0.025em;
 }
 
-/* Adjust levels text styling */
+.achievementsTable .neededAmount::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
+  transition: left 0.5s ease;
+}
+
+.achievementsTable .neededAmount:hover {
+  transform: translateY(-2px) scale(1.02);
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
+  border-color: #3b82f6;
+}
+
+.achievementsTable .neededAmount:hover::before {
+  left: 100%;
+}
+
+/* Enhanced Level Text Styling */
 .achievementsTable .levelText {
-  font-weight: 600;
-  color: #1f2937;
-  margin-bottom: 4px;
-  padding: 6px 12px;
-  background: #f1f5f9;
-  border-radius: 6px;
-  font-size: 0.9em;
-  border: 1px solid #e2e8f0;
+  font-weight: 700;
+  color: white;
+  margin-bottom: 8px;
+  padding: 8px 14px;
+  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
+  border-radius: 12px;
+  font-size: 0.85em;
+  text-align: center;
+  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3), 0 2px 4px rgba(59, 130, 246, 0.2);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  border: none;
+}
+
+.achievementsTable .levelText:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4), 0 3px 6px rgba(59, 130, 246, 0.3);
+}
+
+/* Enhanced Badge Levels Container */
+.achievementsTable .badgeLevels {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  padding: 16px;
+  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+  border-radius: 20px;
+  border: 2px solid #e2e8f0;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  max-width: 280px;
+  margin: 0 auto;
 }
 
-/* Single badge center alignment */
+.achievementsTable .badgeLevels::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
+  opacity: 0.8;
+}
+
+.achievementsTable .badgeLevels:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.06);
+  border-color: #3b82f6;
+}
+
+/* Enhanced Single Badge Container */
 .achievementsTable .singleBadge {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 10px;
-  padding: 12px;
-  background: white;
-  border-radius: 8px;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
+  gap: 12px;
+  padding: 16px;
+  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+  border-radius: 20px;
+  border: 2px solid #e2e8f0;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
   width: 100%;
-  max-width: 200px;
+  max-width: 220px;
   margin: 0 auto;
 }
 
+.achievementsTable .singleBadge::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: linear-gradient(90deg, #10b981, #3b82f6);
+  opacity: 0.8;
+}
+
+.achievementsTable .singleBadge:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.06);
+  border-color: #10b981;
+}
+
 .achievementsTable .singleBadge img {
   margin: 4px 0;
 }
@@ -1083,12 +1376,116 @@ table th, table td {
   }
 }
 
-/* Dark mode adjustments */
+/* Enhanced Dark Mode Adjustments */
 [data-theme='dark'] .achievementsTable .neededAmount {
-  background: var(--ifm-color-emphasis-200);
-  color: var(--ifm-color-content);
+  background: linear-gradient(135deg, var(--dark-bg-tertiary) 0%, var(--dark-bg-secondary) 100%) !important;
+  color: var(--dark-text-primary) !important;
+  border-color: var(--dark-border) !important;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2) !important;
+}
+
+[data-theme='dark'] .achievementsTable .neededAmount::before {
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent) !important;
+}
+
+[data-theme='dark'] .achievementsTable .neededAmount:hover {
+  border-color: var(--ifm-color-primary) !important;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), 0 4px 8px rgba(0, 0, 0, 0.3) !important;
 }
 
 [data-theme='dark'] .achievementsTable .levelText {
-  color: var(--ifm-color-content);
+  background: linear-gradient(135deg, var(--ifm-color-primary) 0%, var(--ifm-color-primary-dark) 100%) !important;
+  color: white !important;
+  box-shadow: 0 4px 12px rgba(37, 194, 160, 0.3), 0 2px 4px rgba(37, 194, 160, 0.2) !important;
+}
+
+[data-theme='dark'] .achievementsTable .levelText:hover {
+  box-shadow: 0 6px 16px rgba(37, 194, 160, 0.4), 0 3px 6px rgba(37, 194, 160, 0.3) !important;
+}
+
+/* Dark theme for enhanced badge containers */
+[data-theme='dark'] .achievementsTable .badgeLevels {
+  background: linear-gradient(135deg, var(--dark-bg-secondary) 0%, var(--dark-bg-tertiary) 100%) !important;
+  border-color: var(--dark-border) !important;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2) !important;
+  color: var(--dark-text-primary) !important;
+}
+
+[data-theme='dark'] .achievementsTable .badgeLevels::before {
+  background: linear-gradient(90deg, var(--ifm-color-primary), #8b5cf6, #ec4899) !important;
+}
+
+[data-theme='dark'] .achievementsTable .badgeLevels:hover {
+  border-color: var(--ifm-color-primary) !important;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3) !important;
+}
+
+[data-theme='dark'] .achievementsTable .singleBadge {
+  background: linear-gradient(135deg, var(--dark-bg-secondary) 0%, var(--dark-bg-tertiary) 100%) !important;
+  border-color: var(--dark-border) !important;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2) !important;
+  color: var(--dark-text-primary) !important;
+}
+
+[data-theme='dark'] .achievementsTable .singleBadge::before {
+  background: linear-gradient(90deg, #10b981, var(--ifm-color-primary)) !important;
+}
+
+[data-theme='dark'] .achievementsTable .singleBadge:hover {
+  border-color: #10b981 !important;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3) !important;
+}
+
+/* Dark theme for enhanced level images */
+[data-theme='dark'] .achievementsTable .levelImages {
+  background: linear-gradient(135deg, var(--dark-bg-tertiary) 0%, var(--dark-bg-secondary) 100%) !important;
+  border-color: var(--dark-border) !important;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
+}
+
+[data-theme='dark'] .achievementsTable .levelImages:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
+  border-color: var(--ifm-color-primary) !important;
+}
+
+[data-theme='dark'] .achievementsTable .levelImages img {
+  border-color: var(--dark-border) !important;
+  background: var(--dark-bg-primary) !important;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3) !important;
+}
+
+[data-theme='dark'] .achievementsTable .levelImages img:hover {
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), 0 3px 8px rgba(0, 0, 0, 0.4) !important;
+  border-color: var(--ifm-color-primary) !important;
+}
+
+/* Enhanced styling for inline needed text */
+.achievementsTable td b {
+  display: inline-block;
+  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
+  color: white;
+  padding: 4px 10px;
+  border-radius: 8px;
+  font-size: 0.85em;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3);
+  margin-right: 8px;
+  transition: all 0.2s ease;
+}
+
+.achievementsTable td b:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 10px rgba(59, 130, 246, 0.4);
+}
+
+/* Dark theme for inline needed text */
+[data-theme='dark'] .achievementsTable td b {
+  background: linear-gradient(135deg, var(--ifm-color-primary) 0%, var(--ifm-color-primary-dark) 100%) !important;
+  box-shadow: 0 2px 6px rgba(37, 194, 160, 0.3) !important;
+}
+
+[data-theme='dark'] .achievementsTable td b:hover {
+  box-shadow: 0 4px 10px rgba(37, 194, 160, 0.4) !important;
 }
diff --git a/src/pages/badges/github-badges.tsx b/src/pages/badges/github-badges.tsx
index b272ef90..454e0c45 100644
--- a/src/pages/badges/github-badges.tsx
+++ b/src/pages/badges/github-badges.tsx
@@ -1,9 +1,35 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import Head from '@docusaurus/Head';
 import { motion, HTMLMotionProps } from 'framer-motion';
 import type { ReactElement } from 'react';
 import Layout from '@theme/Layout';
 import { useColorMode } from '@docusaurus/theme-common';
+import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
+
+// Safe hook for color mode that handles SSR
+function useSafeColorMode() {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  let colorMode = 'light';
+  let isDark = false;
+
+  if (mounted && ExecutionEnvironment.canUseDOM) {
+    try {
+      const { useColorMode: useColorModeHook } = require('@docusaurus/theme-common');
+      const colorModeResult = useColorModeHook();
+      colorMode = colorModeResult.colorMode;
+      isDark = colorMode === 'dark';
+    } catch (error) {
+      console.warn('Failed to get color mode:', error);
+    }
+  }
+
+  return { colorMode, isDark, mounted };
+}
 import styles from './github-badges.module.css';
 
 type MotionDivProps = HTMLMotionProps<"div">;
@@ -11,9 +37,8 @@ type MotionTrProps = HTMLMotionProps<"tr">;
 
 import Link from '@docusaurus/Link';
 
-const GithubBadges = (): React.ReactElement => {
-  const { colorMode } = useColorMode();
-  const isDark = colorMode === 'dark';
+const GithubBadgesContent = (): React.ReactElement => {
+  const { colorMode, isDark, mounted } = useSafeColorMode();
 
   // Scroll to top button logic
   useEffect(() => {
@@ -770,4 +795,8 @@ const handleScrollToTop = () => {
   window.scrollTo({ top: 0, behavior: "smooth" });
 };
 
+const GithubBadges = (): React.ReactElement => {
+  return <GithubBadgesContent />;
+};
+
 export default GithubBadges;
diff --git a/src/pages/broadcasts/index.css b/src/pages/broadcasts/index.css
index ed9efaf3..a320cbaa 100644
--- a/src/pages/broadcasts/index.css
+++ b/src/pages/broadcasts/index.css
@@ -11,11 +11,19 @@
   text-align: center;
 }
 
+[data-theme='dark'] .podcast-subtitle {
+  color: var(--dark-text-secondary);
+}
+
 h1 {
   text-align: center;
   margin-bottom: 1rem;
 }
 
+[data-theme='dark'] h1 {
+  color: var(--dark-text-primary);
+}
+
 .podcast-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
@@ -32,10 +40,19 @@ h1 {
   cursor: pointer;
 }
 
+[data-theme='dark'] .podcast-card {
+  background: var(--dark-card-bg);
+  box-shadow: var(--dark-shadow);
+}
+
 .podcast-card:hover {
   transform: translateY(-4px);
 }
 
+[data-theme='dark'] .podcast-card:hover {
+  box-shadow: var(--dark-shadow-lg);
+}
+
 .podcast-content {
   height: 100%;
 }
@@ -52,6 +69,10 @@ h1 {
   color: #333;
 }
 
+[data-theme='dark'] .podcast-info h3 {
+  color: var(--dark-text-primary);
+}
+
 .podcast-description {
   font-size: 0.9rem;
   color: #666;
@@ -66,6 +87,10 @@ h1 {
   text-overflow: ellipsis;
 }
 
+[data-theme='dark'] .podcast-description {
+  color: var(--dark-text-secondary);
+}
+
 .podcast-publisher {
   font-size: 0.8rem;
   color: #888;
@@ -73,6 +98,10 @@ h1 {
   font-style: italic;
 }
 
+[data-theme='dark'] .podcast-publisher {
+  color: var(--dark-text-muted);
+}
+
 .podcast-embed {
   height: 100%;
   border-radius: 0 0 12px 12px;
@@ -105,16 +134,31 @@ h1 {
   transition: all 0.2s ease;
 }
 
+[data-theme='dark'] .pagination-button {
+  background: var(--dark-bg-secondary);
+  border-color: var(--dark-border);
+  color: var(--dark-text-primary);
+}
+
 .pagination-button:hover {
   background: #f0f0f0;
 }
 
+[data-theme='dark'] .pagination-button:hover {
+  background: var(--dark-card-hover-bg);
+}
+
 .pagination-button.active {
   background: #0066cc;
   color: white;
   border-color: #0066cc;
 }
 
+[data-theme='dark'] .pagination-button.active {
+  background: var(--ifm-color-primary);
+  border-color: var(--ifm-color-primary);
+}
+
 @media (max-width: 968px) {
   .podcast-grid {
     grid-template-columns: repeat(2, 1fr);
@@ -200,6 +244,10 @@ h1 {
   text-align: center;
 }
 
+[data-theme='dark'] .video-subtitle {
+  color: var(--dark-text-secondary);
+}
+
 .video-section {
   margin-bottom: 3rem;
 }
@@ -228,10 +276,19 @@ h1 {
   height: 100%;
 }
 
+[data-theme='dark'] .video-card {
+  background: var(--dark-card-bg);
+  box-shadow: var(--dark-shadow);
+}
+
 .video-card:hover {
   transform: translateY(-4px);
 }
 
+[data-theme='dark'] .video-card:hover {
+  box-shadow: var(--dark-shadow-lg);
+}
+
 .video-content {
   height: 100%;
   display: flex;
diff --git a/src/pages/broadcasts/video.css b/src/pages/broadcasts/video.css
index 32ebefef..78209cb8 100644
--- a/src/pages/broadcasts/video.css
+++ b/src/pages/broadcasts/video.css
@@ -15,6 +15,10 @@
   font-weight: 300;
 }
 
+[data-theme='dark'] .video-subtitle {
+  color: var(--dark-text-secondary);
+}
+
 .video-section {
   margin-bottom: 4rem;
   position: relative;
@@ -61,11 +65,21 @@
   isolation: isolate;
 }
 
+[data-theme='dark'] .video-card {
+  background: var(--dark-card-bg);
+  border-color: var(--dark-border);
+  box-shadow: var(--dark-shadow);
+}
+
 .video-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
 }
 
+[data-theme='dark'] .video-card:hover {
+  box-shadow: var(--dark-shadow-lg);
+}
+
 .video-content {
   height: 100%;
   display: flex;
@@ -80,6 +94,11 @@
   border: 1px solid #e9ecef;
 }
 
+[data-theme='dark'] .video-info {
+  background: var(--dark-bg-secondary);
+  border-color: var(--dark-border);
+}
+
 .video-title {
   margin: 0 0 0.75rem 0;
   font-size: 1.15rem;
@@ -94,6 +113,10 @@
   letter-spacing: -0.01em;
 }
 
+[data-theme='dark'] .video-title {
+  color: var(--dark-text-primary);
+}
+
 .video-type {
   font-size: 0.9rem;
   color: #6c757d; /* Neutral gray color */
@@ -103,6 +126,10 @@
   margin-top: 0.5rem;
 }
 
+[data-theme='dark'] .video-type {
+  color: var(--dark-text-secondary);
+}
+
 /* Force the video type tags to use neutral colors */
 .video-card .video-type span,
 .video-card .video-type {
@@ -110,6 +137,12 @@
   color: #495057 !important;
 }
 
+[data-theme='dark'] .video-card .video-type span,
+[data-theme='dark'] .video-card .video-type {
+  background: var(--dark-bg-tertiary) !important;
+  color: var(--dark-text-secondary) !important;
+}
+
 .video-type span {
   display: inline-flex;
   align-items: center;
@@ -121,12 +154,23 @@
   border: 1px solid #e9ecef !important; /* Force subtle border */
 }
 
+[data-theme='dark'] .video-type span {
+  background: var(--dark-bg-tertiary) !important;
+  color: var(--dark-text-secondary) !important;
+  border-color: var(--dark-border) !important;
+}
+
 /* Ensure the emoji and text inside the span are also not green */
 .video-type span *,
 .video-type span {
   color: #495057 !important;
 }
 
+[data-theme='dark'] .video-type span *,
+[data-theme='dark'] .video-type span {
+  color: var(--dark-text-secondary) !important;
+}
+
 .video-thumbnail {
   position: relative;
   width: 600px;         /* Set desired width */
@@ -239,11 +283,22 @@
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
 }
 
+[data-theme='dark'] .tab-button {
+  background: var(--dark-bg-secondary);
+  color: var(--dark-text-primary);
+  border-color: var(--dark-border);
+  box-shadow: var(--dark-shadow);
+}
+
 .tab-button:hover {
   background: var(--ifm-color-primary-lighter);
   color: var(--ifm-color-white);
 }
 
+[data-theme='dark'] .tab-button:hover {
+  background: var(--dark-card-hover-bg);
+}
+
 .tab-button.active {
   background: var(--ifm-color-primary);
   color: var(--ifm-color-white);
diff --git a/src/pages/careers/index.tsx b/src/pages/careers/index.tsx
index 7dd4361d..75e255d6 100644
--- a/src/pages/careers/index.tsx
+++ b/src/pages/careers/index.tsx
@@ -4,6 +4,32 @@ import Head from "@docusaurus/Head";
 import { motion } from "framer-motion";
 import Link from "@docusaurus/Link";
 import { useColorMode } from '@docusaurus/theme-common';
+import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
+
+// Safe hook for color mode that handles SSR
+function useSafeColorMode() {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  let colorMode = 'light';
+  let isDark = false;
+
+  if (mounted && ExecutionEnvironment.canUseDOM) {
+    try {
+      const { useColorMode: useColorModeHook } = require('@docusaurus/theme-common');
+      const colorModeResult = useColorModeHook();
+      colorMode = colorModeResult.colorMode;
+      isDark = colorMode === 'dark';
+    } catch (error) {
+      console.warn('Failed to get color mode:', error);
+    }
+  }
+
+  return { colorMode, isDark, mounted };
+}
 
 // Animation variants for consistent animations
 const fadeIn = {
@@ -124,9 +150,8 @@ const testimonials = [
   }
 ];
 
-export default function CareersPage() {
-  const { colorMode } = useColorMode();
-  const isDark = colorMode === 'dark';
+function CareersContent() {
+  const { colorMode, isDark, mounted } = useSafeColorMode();
   const [activeTestimonial, setActiveTestimonial] = useState(0);
 
   useEffect(() => {
@@ -446,4 +471,8 @@ export default function CareersPage() {
       </div>
     </Layout>
   );
+}
+
+export default function CareersPage() {
+  return <CareersContent />;
 }
\ No newline at end of file
diff --git a/src/pages/courses/courses.css b/src/pages/courses/courses.css
new file mode 100644
index 00000000..49987b84
--- /dev/null
+++ b/src/pages/courses/courses.css
@@ -0,0 +1,1224 @@
+/* Courses Page Modern Responsive Styles */
+
+/* CSS Custom Properties for Consistent Design */
+:root {
+  /* Spacing System (8px grid) */
+  --courses-spacing-xs: 0.5rem;    /* 8px */
+  --courses-spacing-sm: 1rem;      /* 16px */
+  --courses-spacing-md: 1.5rem;    /* 24px */
+  --courses-spacing-lg: 2rem;      /* 32px */
+  --courses-spacing-xl: 3rem;      /* 48px */
+  --courses-spacing-2xl: 4rem;     /* 64px */
+  --courses-spacing-3xl: 6rem;     /* 96px */
+
+  /* Border Radius System */
+  --courses-radius-sm: 0.5rem;     /* 8px */
+  --courses-radius-md: 0.75rem;    /* 12px */
+  --courses-radius-lg: 1rem;       /* 16px */
+  --courses-radius-xl: 1.5rem;     /* 24px */
+  --courses-radius-2xl: 2rem;      /* 32px */
+
+  /* Typography Scale */
+  --courses-text-xs: 0.75rem;      /* 12px */
+  --courses-text-sm: 0.875rem;     /* 14px */
+  --courses-text-base: 1rem;       /* 16px */
+  --courses-text-lg: 1.125rem;     /* 18px */
+  --courses-text-xl: 1.25rem;      /* 20px */
+  --courses-text-2xl: 1.5rem;      /* 24px */
+  --courses-text-3xl: 1.875rem;    /* 30px */
+  --courses-text-4xl: 2.25rem;     /* 36px */
+  --courses-text-5xl: 3rem;        /* 48px */
+  --courses-text-6xl: 3.75rem;     /* 60px */
+
+  /* Transitions */
+  --courses-transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+  --courses-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  --courses-transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* Light Theme Colors */
+  --courses-bg-primary: #ffffff;
+  --courses-bg-secondary: #f8fafc;
+  --courses-bg-tertiary: #f1f5f9;
+  --courses-text-primary: #0f172a;
+  --courses-text-secondary: #475569;
+  --courses-text-muted: #64748b;
+  --courses-border: #e2e8f0;
+  --courses-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  --courses-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --courses-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+}
+
+/* Dark Theme Colors */
+[data-theme='dark'] {
+  --courses-bg-primary: var(--dark-bg-primary);
+  --courses-bg-secondary: var(--dark-bg-secondary);
+  --courses-bg-tertiary: var(--dark-bg-tertiary);
+  --courses-text-primary: var(--dark-text-primary);
+  --courses-text-secondary: var(--dark-text-secondary);
+  --courses-text-muted: var(--dark-text-muted);
+  --courses-border: var(--dark-border);
+  --courses-shadow: var(--dark-shadow);
+  --courses-shadow-lg: var(--dark-shadow-lg);
+  --courses-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+}
+
+/* Main page container */
+.courses-page {
+  background-color: var(--courses-bg-primary);
+  color: var(--courses-text-primary);
+  transition: var(--courses-transition-slow);
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  line-height: 1.6;
+}
+
+/* Section Layouts */
+.courses-hero {
+  background: linear-gradient(135deg, var(--courses-bg-primary) 0%, var(--courses-bg-secondary) 100%);
+  border-color: var(--courses-border);
+  position: relative;
+  overflow: hidden;
+}
+
+.courses-hero::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
+  pointer-events: none;
+}
+
+.courses-section {
+  background-color: var(--courses-bg-primary);
+  color: var(--courses-text-primary);
+  border-color: var(--courses-border);
+  transition: var(--courses-transition-slow);
+}
+
+.courses-stats-section {
+  background-color: var(--courses-bg-secondary);
+  border-color: var(--courses-border);
+  position: relative;
+}
+
+.courses-stats-section::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(45deg, rgba(99, 102, 241, 0.05) 0%, rgba(59, 130, 246, 0.05) 100%);
+  pointer-events: none;
+}
+
+.courses-faq-section {
+  background-color: var(--courses-bg-secondary);
+  border-color: var(--courses-border);
+}
+
+/* Container and Layout Utilities */
+.courses-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 var(--courses-spacing-md);
+}
+
+.courses-container-wide {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 0 var(--courses-spacing-md);
+}
+
+.courses-grid {
+  display: grid;
+  gap: var(--courses-spacing-lg);
+}
+
+.courses-grid-2 {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.courses-grid-3 {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.courses-grid-4 {
+  grid-template-columns: repeat(4, 1fr);
+}
+
+.courses-flex {
+  display: flex;
+  gap: var(--courses-spacing-md);
+}
+
+.courses-flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.courses-flex-between {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+/* Card Components */
+.courses-card {
+  background-color: var(--courses-bg-primary);
+  border: 1px solid var(--courses-border);
+  border-radius: var(--courses-radius-xl);
+  padding: var(--courses-spacing-lg);
+  color: var(--courses-text-primary);
+  box-shadow: var(--courses-shadow);
+  transition: var(--courses-transition);
+  position: relative;
+  overflow: hidden;
+}
+
+.courses-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(135deg, rgba(59, 130, 246, 0.02) 0%, rgba(99, 102, 241, 0.02) 100%);
+  opacity: 0;
+  transition: var(--courses-transition);
+  pointer-events: none;
+}
+
+.courses-card:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--courses-shadow-xl);
+  border-color: rgba(59, 130, 246, 0.3);
+}
+
+.courses-card:hover::before {
+  opacity: 1;
+}
+
+.courses-stat-card {
+  background: linear-gradient(135deg, var(--courses-bg-primary) 0%, var(--courses-bg-secondary) 100%);
+  border: 1px solid var(--courses-border);
+  border-radius: var(--courses-radius-xl);
+  padding: var(--courses-spacing-xl);
+  color: var(--courses-text-primary);
+  box-shadow: var(--courses-shadow-lg);
+  transition: var(--courses-transition);
+  position: relative;
+  overflow: hidden;
+}
+
+.courses-stat-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(99, 102, 241, 0.05) 100%);
+  opacity: 0;
+  transition: var(--courses-transition);
+  pointer-events: none;
+}
+
+.courses-stat-card:hover {
+  transform: translateY(-8px) scale(1.02);
+  box-shadow: var(--courses-shadow-xl);
+  border-color: rgba(59, 130, 246, 0.4);
+}
+
+.courses-stat-card:hover::before {
+  opacity: 1;
+}
+
+/* Course Timeline Cards */
+.courses-timeline-card {
+  background: linear-gradient(135deg, var(--courses-bg-primary) 0%, var(--courses-bg-secondary) 100%);
+  border: 1px solid var(--courses-border);
+  border-radius: var(--courses-radius-xl);
+  padding: var(--courses-spacing-lg);
+  transition: var(--courses-transition);
+  position: relative;
+  overflow: hidden;
+  backdrop-filter: blur(10px);
+}
+
+.courses-timeline-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(135deg, rgba(59, 130, 246, 0.03) 0%, rgba(99, 102, 241, 0.03) 100%);
+  opacity: 0;
+  transition: var(--courses-transition);
+  pointer-events: none;
+}
+
+.courses-timeline-card:hover {
+  transform: translateY(-6px);
+  box-shadow: var(--courses-shadow-xl);
+  border-color: rgba(59, 130, 246, 0.4);
+}
+
+.courses-timeline-card:hover::before {
+  opacity: 1;
+}
+
+/* Button Components */
+.courses-button {
+  background-color: var(--courses-bg-tertiary);
+  color: var(--courses-text-primary);
+  border: 1px solid var(--courses-border);
+  border-radius: var(--courses-radius-lg);
+  padding: var(--courses-spacing-sm) var(--courses-spacing-lg);
+  font-weight: 600;
+  font-size: var(--courses-text-base);
+  transition: var(--courses-transition);
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  backdrop-filter: blur(10px);
+}
+
+.courses-button::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
+  transition: var(--courses-transition);
+}
+
+.courses-button:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--courses-shadow-lg);
+  border-color: rgba(59, 130, 246, 0.5);
+}
+
+.courses-button:hover::before {
+  left: 100%;
+}
+
+.courses-button-primary {
+  background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
+  color: white;
+  border: none;
+  box-shadow: var(--courses-shadow-lg);
+}
+
+.courses-button-primary:hover {
+  background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
+  transform: translateY(-3px);
+  box-shadow: var(--courses-shadow-xl);
+}
+
+.courses-button-secondary {
+  background: linear-gradient(135deg, var(--courses-bg-primary) 0%, var(--courses-bg-secondary) 100%);
+  color: var(--courses-text-primary);
+  border: 1px solid var(--courses-border);
+  backdrop-filter: blur(10px);
+}
+
+.courses-button-secondary:hover {
+  border-color: rgba(59, 130, 246, 0.5);
+  background: linear-gradient(135deg, var(--courses-bg-secondary) 0%, var(--courses-bg-tertiary) 100%);
+}
+
+.courses-button-ghost {
+  background: transparent;
+  color: var(--courses-text-secondary);
+  border: 1px solid var(--courses-border);
+}
+
+.courses-button-ghost:hover {
+  background-color: var(--courses-bg-secondary);
+  color: var(--courses-text-primary);
+  border-color: rgba(59, 130, 246, 0.3);
+}
+
+/* Icon Buttons */
+.courses-icon-button {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, var(--courses-bg-primary) 0%, var(--courses-bg-secondary) 100%);
+  border: 1px solid var(--courses-border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: var(--courses-transition);
+  cursor: pointer;
+  backdrop-filter: blur(10px);
+}
+
+.courses-icon-button:hover {
+  transform: scale(1.1);
+  box-shadow: var(--courses-shadow-lg);
+  border-color: rgba(59, 130, 246, 0.5);
+}
+
+/* Modal Components */
+.courses-modal {
+  background: linear-gradient(135deg, var(--courses-bg-primary) 0%, var(--courses-bg-secondary) 100%);
+  color: var(--courses-text-primary);
+  border: 1px solid var(--courses-border);
+  border-radius: var(--courses-radius-xl);
+  box-shadow: var(--courses-shadow-xl);
+  backdrop-filter: blur(20px);
+  position: relative;
+  overflow: hidden;
+}
+
+.courses-modal::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(99, 102, 241, 0.05) 100%);
+  pointer-events: none;
+}
+
+/* Text Styles */
+.courses-text-primary {
+  color: var(--courses-text-primary);
+}
+
+.courses-text-secondary {
+  color: var(--courses-text-secondary);
+}
+
+.courses-text-muted {
+  color: var(--courses-text-muted);
+}
+
+.courses-text-gradient {
+  background: linear-gradient(135deg, #3b82f6 0%, #6366f1 50%, #8b5cf6 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-weight: 700;
+}
+
+.courses-heading-1 {
+  font-size: var(--courses-text-6xl);
+  font-weight: 800;
+  line-height: 1.1;
+  letter-spacing: -0.025em;
+  text-align: center;
+}
+
+.courses-heading-2 {
+  font-size: var(--courses-text-5xl);
+  font-weight: 700;
+  line-height: 1.2;
+  letter-spacing: -0.025em;
+}
+
+.courses-heading-3 {
+  font-size: var(--courses-text-4xl);
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+.courses-heading-4 {
+  font-size: var(--courses-text-3xl);
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+.courses-body-large {
+  font-size: var(--courses-text-xl);
+  line-height: 1.6;
+  text-align: center;
+}
+
+.courses-body {
+  font-size: var(--courses-text-base);
+  line-height: 1.6;
+}
+
+.courses-body-small {
+  font-size: var(--courses-text-sm);
+  line-height: 1.5;
+}
+
+/* Topic Tags */
+.courses-topic-tag {
+  background: linear-gradient(135deg, var(--courses-bg-primary) 0%, var(--courses-bg-secondary) 100%);
+  color: var(--courses-text-primary);
+  border: 1px solid var(--courses-border);
+  border-radius: var(--courses-radius-lg);
+  padding: var(--courses-spacing-xs) var(--courses-spacing-md);
+  font-size: var(--courses-text-sm);
+  font-weight: 500;
+  transition: var(--courses-transition);
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  backdrop-filter: blur(10px);
+}
+
+.courses-topic-tag::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(99, 102, 241, 0.1) 100%);
+  opacity: 0;
+  transition: var(--courses-transition);
+  pointer-events: none;
+}
+
+.courses-topic-tag:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--courses-shadow-lg);
+  border-color: rgba(59, 130, 246, 0.5);
+  color: #3b82f6;
+}
+
+.courses-topic-tag:hover::before {
+  opacity: 1;
+}
+
+/* Special Topic Tag Variants */
+.courses-topic-tag-featured {
+  background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
+  color: white;
+  border: none;
+  box-shadow: var(--courses-shadow);
+}
+
+.courses-topic-tag-featured:hover {
+  background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
+  transform: translateY(-3px);
+  box-shadow: var(--courses-shadow-lg);
+}
+
+.courses-topic-tag-new {
+  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+  color: white;
+  border: none;
+  position: relative;
+}
+
+.courses-topic-tag-new::after {
+  content: 'NEW';
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  background: #ef4444;
+  color: white;
+  font-size: 10px;
+  padding: 2px 6px;
+  border-radius: 8px;
+  font-weight: 700;
+}
+
+/* FAQ Components */
+.courses-faq-item {
+  background: linear-gradient(135deg, var(--courses-bg-primary) 0%, var(--courses-bg-secondary) 100%);
+  border: 1px solid var(--courses-border);
+  border-radius: var(--courses-radius-xl);
+  overflow: hidden;
+  transition: var(--courses-transition);
+  backdrop-filter: blur(10px);
+}
+
+.courses-faq-item:hover {
+  box-shadow: var(--courses-shadow-lg);
+  border-color: rgba(59, 130, 246, 0.3);
+}
+
+.courses-faq-button {
+  background: transparent;
+  color: var(--courses-text-primary);
+  border: none;
+  width: 100%;
+  text-align: left;
+  padding: var(--courses-spacing-lg);
+  font-weight: 600;
+  font-size: var(--courses-text-lg);
+  transition: var(--courses-transition);
+  cursor: pointer;
+}
+
+.courses-faq-button:hover {
+  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(99, 102, 241, 0.05) 100%);
+}
+
+.courses-faq-answer {
+  background: linear-gradient(135deg, var(--courses-bg-secondary) 0%, var(--courses-bg-tertiary) 100%);
+  color: var(--courses-text-secondary);
+  padding: var(--courses-spacing-lg);
+  border-top: 1px solid var(--courses-border);
+}
+
+/* Project Cards */
+.courses-project-card {
+  background: linear-gradient(135deg, var(--courses-bg-primary) 0%, var(--courses-bg-secondary) 100%);
+  border: 1px solid var(--courses-border);
+  border-radius: var(--courses-radius-xl);
+  color: var(--courses-text-primary);
+  transition: var(--courses-transition);
+  overflow: hidden;
+  position: relative;
+  backdrop-filter: blur(10px);
+}
+
+.courses-project-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(135deg, rgba(59, 130, 246, 0.03) 0%, rgba(99, 102, 241, 0.03) 100%);
+  opacity: 0;
+  transition: var(--courses-transition);
+  pointer-events: none;
+}
+
+.courses-project-card:hover {
+  transform: translateY(-6px);
+  box-shadow: var(--courses-shadow-xl);
+  border-color: rgba(59, 130, 246, 0.4);
+}
+
+.courses-project-card:hover::before {
+  opacity: 1;
+}
+
+/* Navigation Buttons */
+.courses-nav-button {
+  background: linear-gradient(135deg, var(--courses-bg-primary) 0%, var(--courses-bg-secondary) 100%);
+  color: var(--courses-text-primary);
+  border: 1px solid var(--courses-border);
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: var(--courses-transition);
+  cursor: pointer;
+  backdrop-filter: blur(10px);
+  font-weight: 600;
+  font-size: var(--courses-text-lg);
+}
+
+.courses-nav-button:hover {
+  background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
+  color: white;
+  transform: scale(1.1);
+  box-shadow: var(--courses-shadow-lg);
+  border-color: transparent;
+}
+
+.courses-nav-button:active {
+  transform: scale(0.95);
+}
+
+/* Carousel Indicators */
+.courses-carousel-indicators {
+  display: flex;
+  justify-content: center;
+  gap: var(--courses-spacing-xs);
+  margin-top: var(--courses-spacing-md);
+}
+
+.courses-carousel-indicator {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background-color: var(--courses-border);
+  transition: var(--courses-transition);
+  cursor: pointer;
+}
+
+.courses-carousel-indicator.active {
+  background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
+  transform: scale(1.2);
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
+}
+
+.courses-carousel-indicator:hover {
+  background-color: var(--courses-text-muted);
+  transform: scale(1.1);
+}
+
+/* Legacy Theme Overrides - Simplified */
+.courses-gradient-text {
+  background: linear-gradient(135deg, var(--courses-text-primary) 0%, #3b82f6 50%, #6366f1 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.courses-bg-overlay {
+  background: radial-gradient(circle, rgba(59, 130, 246, 0.1), transparent 70%);
+}
+
+/* Utility Classes */
+.courses-hide-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+.courses-hide-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.courses-backdrop-blur {
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+}
+
+.courses-glass {
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+[data-theme='dark'] .courses-glass {
+  background: rgba(0, 0, 0, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+/* Animation Utilities */
+.courses-fade-in {
+  animation: coursesFadeIn 0.6s ease-out forwards;
+}
+
+.courses-slide-up {
+  animation: coursesSlideUp 0.6s ease-out forwards;
+}
+
+.courses-scale-in {
+  animation: coursesScaleIn 0.4s ease-out forwards;
+}
+
+@keyframes coursesFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes coursesSlideUp {
+  from {
+    opacity: 0;
+    transform: translateY(40px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes coursesScaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* Floating Animation */
+.courses-float {
+  animation: coursesFloat 6s ease-in-out infinite;
+}
+
+@keyframes coursesFloat {
+  0%, 100% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+
+/* Pulse Animation */
+.courses-pulse {
+  animation: coursesPulse 2s infinite;
+}
+
+@keyframes coursesPulse {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+/* Gradient Animation */
+.courses-gradient-animate {
+  background-size: 200% 200%;
+  animation: coursesGradient 4s ease infinite;
+}
+
+@keyframes coursesGradient {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+/* Responsive Design System */
+
+/* Extra Large Desktop (1400px+) */
+@media (min-width: 1400px) {
+  .courses-container {
+    max-width: 1320px;
+  }
+
+  .courses-container-wide {
+    max-width: 1600px;
+  }
+
+  .courses-heading-1 {
+    font-size: 4.5rem;
+  }
+
+  .courses-heading-2 {
+    font-size: 3.5rem;
+  }
+
+  .courses-grid-4 {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+/* Large Desktop (1200px - 1399px) */
+@media (max-width: 1399px) and (min-width: 1200px) {
+  .courses-container {
+    max-width: 1140px;
+  }
+
+  .courses-heading-1 {
+    font-size: 4rem;
+  }
+
+  .courses-heading-2 {
+    font-size: 3rem;
+  }
+
+  .courses-grid-4 {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .courses-spacing-3xl {
+    --courses-spacing-3xl: 5rem;
+  }
+}
+
+/* Desktop (992px - 1199px) */
+@media (max-width: 1199px) and (min-width: 992px) {
+  .courses-container {
+    max-width: 960px;
+  }
+
+  .courses-heading-1 {
+    font-size: 3.5rem;
+  }
+
+  .courses-heading-2 {
+    font-size: 2.5rem;
+  }
+
+  .courses-grid-4,
+  .courses-grid-3 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .courses-spacing-3xl {
+    --courses-spacing-3xl: 4rem;
+  }
+
+  .courses-card {
+    padding: var(--courses-spacing-md);
+  }
+}
+
+/* Tablet (768px - 991px) */
+@media (max-width: 991px) and (min-width: 768px) {
+  .courses-container {
+    max-width: 720px;
+    padding: 0 var(--courses-spacing-lg);
+  }
+
+  .courses-heading-1 {
+    font-size: 3rem;
+  }
+
+  .courses-heading-2 {
+    font-size: 2.25rem;
+    text-align: center;
+  }
+
+  .courses-grid-4,
+  .courses-grid-3,
+  .courses-grid-2 {
+    grid-template-columns: repeat(2, 1fr);
+    gap: var(--courses-spacing-md);
+  }
+
+  .courses-flex {
+    flex-direction: column;
+    gap: var(--courses-spacing-md);
+  }
+
+  .courses-spacing-3xl {
+    --courses-spacing-3xl: 3rem;
+  }
+
+  .courses-spacing-2xl {
+    --courses-spacing-2xl: 2.5rem;
+  }
+
+  /* Hero section adjustments */
+  .courses-hero {
+    padding: var(--courses-spacing-2xl) var(--courses-spacing-md);
+  }
+
+  /* Button adjustments */
+  .courses-button {
+    width: 100%;
+    justify-content: center;
+  }
+
+  /* Navigation buttons */
+  .courses-nav-button {
+    width: 44px;
+    height: 44px;
+  }
+}
+
+/* Mobile Large (576px - 767px) */
+@media (max-width: 767px) and (min-width: 576px) {
+  .courses-container {
+    max-width: 540px;
+    padding: 0 var(--courses-spacing-md);
+  }
+
+  .courses-heading-1 {
+    font-size: 2.5rem;
+    line-height: 1.2;
+  }
+
+  .courses-heading-2 {
+    font-size: 2rem;
+    text-align: center;
+    line-height: 1.3;
+  }
+
+  .courses-heading-3 {
+    font-size: 1.75rem;
+    text-align: center;
+  }
+
+  .courses-grid-4,
+  .courses-grid-3,
+  .courses-grid-2 {
+    grid-template-columns: 1fr;
+    gap: var(--courses-spacing-md);
+  }
+
+  .courses-spacing-3xl {
+    --courses-spacing-3xl: 2.5rem;
+  }
+
+  .courses-spacing-2xl {
+    --courses-spacing-2xl: 2rem;
+  }
+
+  .courses-spacing-xl {
+    --courses-spacing-xl: 1.5rem;
+  }
+
+  /* Hero section */
+  .courses-hero {
+    padding: var(--courses-spacing-xl) var(--courses-spacing-md);
+    text-align: center;
+  }
+
+  /* Cards */
+  .courses-card,
+  .courses-stat-card,
+  .courses-timeline-card {
+    padding: var(--courses-spacing-md);
+  }
+
+  /* Buttons */
+  .courses-button {
+    width: 100%;
+    padding: var(--courses-spacing-md) var(--courses-spacing-lg);
+    font-size: var(--courses-text-base);
+  }
+
+  .courses-button-primary,
+  .courses-button-secondary {
+    margin-bottom: var(--courses-spacing-sm);
+  }
+
+  /* Navigation */
+  .courses-nav-button {
+    width: 40px;
+    height: 40px;
+    font-size: var(--courses-text-base);
+  }
+
+  /* Topic tags */
+  .courses-topic-tag {
+    font-size: var(--courses-text-xs);
+    padding: var(--courses-spacing-xs) var(--courses-spacing-sm);
+  }
+
+  /* FAQ */
+  .courses-faq-button {
+    padding: var(--courses-spacing-md);
+    font-size: var(--courses-text-base);
+  }
+
+  .courses-faq-answer {
+    padding: var(--courses-spacing-md);
+    font-size: var(--courses-text-sm);
+  }
+}
+
+/* Mobile Small (320px - 575px) */
+@media (max-width: 575px) {
+  .courses-container {
+    padding: 0 var(--courses-spacing-sm);
+  }
+
+  .courses-heading-1 {
+    font-size: 2rem;
+    line-height: 1.1;
+    margin-bottom: var(--courses-spacing-md);
+  }
+
+  .courses-heading-2 {
+    font-size: 1.75rem;
+    line-height: 1.2;
+    margin-bottom: var(--courses-spacing-md);
+  }
+
+  .courses-heading-3 {
+    font-size: 1.5rem;
+    margin-bottom: var(--courses-spacing-sm);
+  }
+
+  .courses-heading-4 {
+    font-size: 1.25rem;
+    margin-bottom: var(--courses-spacing-sm);
+  }
+
+  .courses-spacing-3xl {
+    --courses-spacing-3xl: 2rem;
+  }
+
+  .courses-spacing-2xl {
+    --courses-spacing-2xl: 1.5rem;
+  }
+
+  .courses-spacing-xl {
+    --courses-spacing-xl: 1rem;
+  }
+
+  /* Hero section */
+  .courses-hero {
+    padding: var(--courses-spacing-lg) var(--courses-spacing-sm);
+    min-height: auto;
+  }
+
+  /* Grid adjustments */
+  .courses-grid {
+    gap: var(--courses-spacing-sm);
+  }
+
+  /* Cards */
+  .courses-card,
+  .courses-stat-card,
+  .courses-timeline-card,
+  .courses-project-card {
+    padding: var(--courses-spacing-sm);
+    border-radius: var(--courses-radius-lg);
+  }
+
+  /* Buttons */
+  .courses-button {
+    padding: var(--courses-spacing-sm) var(--courses-spacing-md);
+    font-size: var(--courses-text-sm);
+    border-radius: var(--courses-radius-md);
+  }
+
+  .courses-icon-button,
+  .courses-nav-button {
+    width: 36px;
+    height: 36px;
+    font-size: var(--courses-text-sm);
+  }
+
+  /* Topic tags */
+  .courses-topic-tag {
+    font-size: 11px;
+    padding: 4px var(--courses-spacing-xs);
+    border-radius: var(--courses-radius-sm);
+  }
+
+  /* Modal */
+  .courses-modal {
+    margin: var(--courses-spacing-sm);
+    padding: var(--courses-spacing-md);
+    border-radius: var(--courses-radius-lg);
+  }
+
+  /* FAQ */
+  .courses-faq-item {
+    border-radius: var(--courses-radius-lg);
+  }
+
+  .courses-faq-button {
+    padding: var(--courses-spacing-sm);
+    font-size: var(--courses-text-sm);
+  }
+
+  .courses-faq-answer {
+    padding: var(--courses-spacing-sm);
+    font-size: var(--courses-text-xs);
+    line-height: 1.5;
+  }
+
+  /* Carousel indicators */
+  .courses-carousel-indicator {
+    width: 8px;
+    height: 8px;
+  }
+
+  /* Text adjustments */
+  .courses-body-large {
+    font-size: var(--courses-text-base);
+    text-align: center;
+  }
+
+  .courses-body {
+    font-size: var(--courses-text-sm);
+  }
+
+  .courses-body-small {
+    font-size: var(--courses-text-xs);
+  }
+}
+
+/* Extra Small Mobile (max-width: 320px) */
+@media (max-width: 320px) {
+  .courses-container {
+    padding: 0 var(--courses-spacing-xs);
+  }
+
+  .courses-heading-1 {
+    font-size: 1.75rem;
+  }
+
+  .courses-heading-2 {
+    font-size: 1.5rem;
+  }
+
+  .courses-card,
+  .courses-stat-card,
+  .courses-timeline-card {
+    padding: var(--courses-spacing-xs);
+  }
+
+  .courses-button {
+    padding: var(--courses-spacing-xs) var(--courses-spacing-sm);
+    font-size: var(--courses-text-xs);
+  }
+}
+
+/* Print Styles */
+@media print {
+  .courses-page {
+    background: white !important;
+    color: black !important;
+  }
+
+  .courses-nav-button,
+  .courses-button,
+  .courses-carousel-indicators {
+    display: none !important;
+  }
+
+  .courses-card,
+  .courses-stat-card,
+  .courses-timeline-card {
+    break-inside: avoid;
+    box-shadow: none !important;
+    border: 1px solid #ccc !important;
+  }
+}
+
+/* High Contrast Mode Support */
+@media (prefers-contrast: high) {
+  .courses-card,
+  .courses-stat-card,
+  .courses-timeline-card {
+    border-width: 2px;
+  }
+
+  .courses-button {
+    border-width: 2px;
+  }
+
+  .courses-topic-tag {
+    border-width: 2px;
+  }
+}
+
+/* Reduced Motion Support */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+
+  .courses-float,
+  .courses-pulse,
+  .courses-gradient-animate {
+    animation: none !important;
+  }
+}
diff --git a/src/pages/courses/index.tsx b/src/pages/courses/index.tsx
index 295b8d65..354fdd88 100644
--- a/src/pages/courses/index.tsx
+++ b/src/pages/courses/index.tsx
@@ -2,7 +2,7 @@ import React, { useState, useRef, useEffect } from "react";
 import Layout from "@theme/Layout";
 import Head from "@docusaurus/Head";
 import { motion } from "framer-motion";
-import { useColorMode } from '@docusaurus/theme-common';
+import './courses.css';
 
 // Animation variants for consistent animations
 const fadeIn = {
@@ -135,21 +135,12 @@ const faqs = [
   { q: "Do I need to learn anything before this course starts?", a: "No prior experience is required. All fundamentals will be covered." },
 ];
 
-export default function CoursesLanding() {
-  const { colorMode } = useColorMode();
-  const isDark = colorMode === 'dark';
+function CoursesContent() {
 
   const [showAllTopics, setShowAllTopics] = useState(false);
   const [modal, setModal] = useState({ open: false, content: "" });
-  const [openFaq, setOpenFaq] = useState(null);
+  const [openFaq, setOpenFaq] = useState<number | null>(null);
   const [activeProjectIndex, setActiveProjectIndex] = useState(0);
-  const [showStickyEnroll, setShowStickyEnroll] = useState(false);
-  const [countdownValues, setCountdownValues] = useState({
-    days: 0,
-    hours: 0,
-    minutes: 0,
-    seconds: 0,
-  });
   const [animatedStats, setAnimatedStats] = useState({
     Youtube: 0,
     LinkedIn: 0,
@@ -161,37 +152,7 @@ export default function CoursesLanding() {
   const techTagsRef = useRef(null);
   const statsRef = useRef(null);
 
-  // Countdown timer effect
-  useEffect(() => {
-    // Set the countdown date to 2 days from now
-    const countdownDate = new Date();
-    countdownDate.setDate(countdownDate.getDate() + 2);
-
-    const updateCountdown = () => {
-      const now = new Date().getTime();
-      const distance = countdownDate.getTime() - now;
 
-      const days = Math.floor(distance / (1000 * 60 * 60 * 24));
-      const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
-      const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
-      const seconds = Math.floor((distance % (1000 * 60)) / 1000);
-
-      setCountdownValues({
-        days,
-        hours,
-        minutes,
-        seconds
-      });
-    };
-
-    // Initial update
-    updateCountdown();
-
-    // Set interval to update every second
-    const interval = setInterval(updateCountdown, 1000);
-
-    return () => clearInterval(interval);
-  }, []);
 
   // Horizontal scrolling for tech tags
   useEffect(() => {
@@ -213,15 +174,7 @@ export default function CoursesLanding() {
     }
   }, []);
 
-  // Check scroll position for sticky enroll button
-  useEffect(() => {
-    const checkScroll = () => {
-      setShowStickyEnroll(window.scrollY > 500);
-    };
 
-    window.addEventListener('scroll', checkScroll);
-    return () => window.removeEventListener('scroll', checkScroll);
-  }, []);
 
   // Set up automatic carousel rotation
   useEffect(() => {
@@ -277,7 +230,7 @@ export default function CoursesLanding() {
     return () => observer.disconnect();
   }, [isStatsVisible]);
 
-  const handleCourseClick = (course) => {
+  const handleCourseClick = (course: any) => {
     if (course.title.includes("Coming Soon")) {
       setModal({ open: true, content: "This course is coming soon!" });
     } else {
@@ -285,11 +238,11 @@ export default function CoursesLanding() {
     }
   };
 
-  const handleAction = (type) => {
+  const handleAction = (type: string) => {
     setModal({ open: true, content: type === "enroll" ? "Enrollment flow coming soon!" : "Purchase flow coming soon!" });
   };
 
-  const scrollProjects = (dir) => {
+  const scrollProjects = (dir: number) => {
     const newIndex = activeProjectIndex + dir;
 
     if (newIndex >= 0 && newIndex < projects.length) {
@@ -303,11 +256,11 @@ export default function CoursesLanding() {
     }
   };
 
-  const goToProjectSlide = (index) => {
+  const goToProjectSlide = (index: number) => {
     setActiveProjectIndex(index);
   };
 
-  const handleInfo = (info) => setModal({ open: true, content: info });
+  const handleInfo = (info: string) => setModal({ open: true, content: info });
 
   return (
     <Layout title="Courses" description="Explore our available courses and resources.">
@@ -323,101 +276,91 @@ export default function CoursesLanding() {
               -ms-overflow-style: none;
               scrollbar-width: none;
             }
-            
+
             /* Custom animations */
             @keyframes float {
               0% { transform: translateY(0px); }
               50% { transform: translateY(-10px); }
               100% { transform: translateY(0px); }
             }
-            
+
             @keyframes slide {
               0% { transform: translateX(0); }
               100% { transform: translateX(-100%); }
             }
-            
+
             .float-animation {
               animation: float 3s ease-in-out infinite;
             }
-            
+
             .animate-slide {
               display: inline-block;
               white-space: nowrap;
               padding-right: 100%;
             }
-            
+
             /* Fade-in animation */
             @keyframes fadeIn {
               from { opacity: 0; transform: translateY(20px); }
               to { opacity: 1; transform: translateY(0); }
             }
-            
+
             .animate-fadeIn {
               animation: fadeIn 0.5s ease-out forwards;
             }
-            
+
             /* Scale-in animation */
             @keyframes scaleIn {
               from { opacity: 0; transform: scale(0.9); }
               to { opacity: 1; transform: scale(1); }
             }
-            
+
             .animate-scaleIn {
               animation: scaleIn 0.3s ease-out forwards;
             }
-            
+
             /* Slide-in animation */
             @keyframes slideInUp {
               from { opacity: 0; transform: translateY(30px); }
               to { opacity: 1; transform: translateY(0); }
             }
-            
+
             .animate-slideInUp {
               animation: slideInUp 0.5s ease-out forwards;
             }
-            
+
             /* Pulse animation */
             @keyframes pulse {
               0% { transform: scale(1); }
               50% { transform: scale(1.05); }
               100% { transform: scale(1); }
             }
-            
+
             .animate-pulse {
               animation: pulse 2s infinite;
             }
           `}
         </style>
       </Head>
-      <main className={`min-h-screen transition-colors duration-300 ${
-        isDark ? 'bg-[#121212] text-white' : 'bg-white text-black'
-      }`}>
+      <main className="courses-page min-h-screen transition-all duration-500">
         {/* Modal */}
         {modal.open && (
-          <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-60 animate-fadeIn">
-            <div className={`rounded-lg p-8 max-w-md w-full text-center relative animate-scaleIn ${
-              isDark ? 'bg-[#1a1a1a] text-white' : 'bg-white text-black'
-            }`}>
+          <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-60 courses-fade-in p-4">
+            <div className="courses-modal p-6 md:p-8 max-w-md w-full text-center relative courses-scale-in">
               <button
-                className={`absolute top-2 right-4 text-2xl transition-transform hover:scale-110 ${
-                  isDark ? 'text-white hover:text-gray-300' : 'text-black hover:text-gray-700'
-                }`}
+                className="courses-icon-button absolute top-3 right-3 text-xl md:text-2xl transition-transform hover:scale-110"
                 onClick={() => setModal({ open: false, content: "" })}
               >
                 ×
               </button>
-              <div>{modal.content}</div>
+              <div className="courses-body pt-4">{modal.content}</div>
             </div>
           </div>
         )}
 
         {/* Hero Section */}
         <motion.section
-          className={`py-20 px-4 text-center relative overflow-hidden transition-colors duration-300 ${
-            isDark
-              ? 'border-b border-gray-800 bg-gradient-to-br from-blue-950 via-gray-900 to-black'
-              : 'border-b border-gray-200 bg-gradient-to-br from-blue-50 via-white to-gray-50'
-          }`}
+          className="courses-hero py-16 md:py-24 px-4 text-center relative overflow-hidden transition-all duration-500 border-b"
           initial="hidden"
           animate="visible"
           variants={{
@@ -425,429 +368,459 @@ export default function CoursesLanding() {
             visible: { opacity: 1, transition: { staggerChildren: 0.2 } }
           }}
         >
-          <div className="absolute inset-0 bg-[radial-gradient(circle,rgba(59,130,246,0.1),transparent_80%)] animate-pulse"/>
-          <motion.h1
-            className="text-6xl md:text-7xl font-extrabold mb-8 bg-clip-text text-transparent bg-gradient-to-r from-blue-400 via-indigo-400 to-purple-500 relative z-10 tracking-tight"
-            variants={fadeIn}
-          >
-            Transform Your Career<br />in Data Engineering</motion.h1>
-          <div className="flex justify-center items-center">
-            <motion.p
-              className={`text-xl md:text-2xl max-w-2xl text-center leading-relaxed ${
-                isDark ? 'text-gray-300' : 'text-gray-700'
-              }`}
+          <div className="courses-container">
+            <motion.h1
+              className="courses-heading-1 courses-text-gradient mb-6 md:mb-8 relative z-10 tracking-tight"
               variants={fadeIn}
             >
-              Master the art of data engineering with industry-leading courses designed for <span className={`font-semibold ${
-                isDark ? 'text-blue-300' : 'text-blue-600'
-              }`}>modern tech careers</span>.
-            </motion.p>
-          </div>
-          <motion.div
-            className="flex flex-col md:flex-row gap-6 justify-center mt-12 mb-16"
-            variants={fadeIn}
-          >
-            <button
-              className="group relative px-8 py-4 overflow-hidden rounded-xl bg-gradient-to-r from-blue-600 to-blue-500 text-white font-bold text-lg shadow-xl transition-all duration-300 hover:scale-105 hover:shadow-blue-500/50 border border-blue-400/30"
-              onClick={() => handleAction("enroll")}
-            >
-              <span className="relative z-10 flex items-center gap-2">
-                Explore Courses
-                <svg className="w-5 h-5 group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
-                </svg>
-              </span>
-              <div className="absolute inset-0 bg-gradient-to-r from-blue-700 to-blue-600 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left duration-300"/>
-            </button>
-            <button
-              className="group relative px-8 py-4 overflow-hidden rounded-xl bg-gray-800/50 backdrop-blur-sm text-white font-bold text-lg shadow-xl border border-gray-700/50 transition-all duration-300 hover:scale-105 hover:shadow-purple-500/30 hover:border-purple-500/30"
-              onClick={() => handleAction("curriculum")}
+              Transform Your Career<br className="hidden md:block" />
+              <span className="block md:inline">in Data Engineering</span>
+            </motion.h1>
+            <div className="w-full flex justify-center">
+              <motion.p
+                className="courses-text-secondary courses-body-large max-w-2xl leading-relaxed font-medium mb-8 md:mb-12 text-center"
+                variants={fadeIn}
+              >
+                Master the art of data engineering with industry-leading courses designed for{' '}
+                <span className="font-bold courses-text-gradient">modern tech careers</span>.
+              </motion.p>
+            </div>
+            <motion.div
+              className="flex flex-col sm:flex-row gap-4 md:gap-6 justify-center mb-12 md:mb-16 max-w-md md:max-w-none mx-auto"
+              variants={fadeIn}
             >
-              <span className="relative z-10 flex items-center gap-2">
-                View Curriculum
-                <svg className="w-5 h-5 group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-                </svg>
-              </span>
-              <div className="absolute inset-0 bg-gradient-to-r from-purple-700/50 to-blue-700/50 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left duration-300"/>
-            </button>
-          </motion.div>
+              <button
+                className="courses-button-primary group relative px-8 md:px-10 py-3 md:py-4 overflow-hidden rounded-2xl font-bold text-base md:text-lg shadow-2xl transition-all duration-300 hover:scale-105 hover:shadow-blue-500/30 border border-blue-400/20 courses-backdrop-blur"
+                onClick={() => handleAction("enroll")}
+              >
+                <span className="relative z-10 flex items-center justify-center gap-2">
+                  Explore Courses
+                  <svg className="w-4 h-4 md:w-5 md:h-5 group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
+                  </svg>
+                </span>
+              </button>
+              <button
+                className="courses-button-secondary group relative px-8 md:px-10 py-3 md:py-4 overflow-hidden rounded-2xl font-bold text-base md:text-lg shadow-2xl transition-all duration-300 hover:scale-105"
+                onClick={() => handleAction("curriculum")}
+              >
+                <span className="relative z-10 flex items-center justify-center gap-2">
+                  View Curriculum
+                  <svg className="w-4 h-4 md:w-5 md:h-5 group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                  </svg>
+                </span>
+              </button>
+            </motion.div>
+          </div>
 
           {/* Tech Tags */}
           <motion.div
-            ref={techTagsRef}
-            className="flex overflow-x-auto hide-scrollbar gap-2 mb-8 pb-4 whitespace-nowrap"
-            style={{ scrollBehavior: 'smooth' }}
+            className="courses-container"
             variants={fadeIn}
           >
-            <div className="flex gap-2">
-              {techTags.map((tag, idx) => (
-                <span
-                  key={idx}
-                  className={`px-4 py-2 rounded-full text-sm font-semibold shadow-md transition-all duration-300 ${
-                    isDark
-                      ? 'bg-gray-800/80 hover:bg-blue-700/80 text-gray-200 border border-gray-700/50 hover:border-blue-500/50 hover:text-white'
-                      : 'bg-gray-100 hover:bg-blue-100 text-gray-700 border border-gray-300 hover:border-blue-400 hover:text-blue-700'
-                  }`}
-                >
-                  {tag}
-                </span>
-              ))}
+            <div
+              ref={techTagsRef}
+              className="flex overflow-x-auto courses-hide-scrollbar gap-2 mb-8 pb-4 whitespace-nowrap"
+              style={{ scrollBehavior: 'smooth' }}
+            >
+              <div className="flex gap-2 px-4 md:px-0">
+                {techTags.map((tag, idx) => (
+                  <span
+                    key={idx}
+                    className="courses-topic-tag flex-shrink-0"
+                  >
+                    {tag}
+                  </span>
+                ))}
+              </div>
             </div>
-          </motion.div>
 
-          {/* Partner Logos */}
-          <motion.div
-            className="mt-8"
-            variants={fadeIn}
-          >
-            <h3 className={`text-lg mb-2 text-center ${
-              isDark ? 'text-gray-400' : 'text-gray-600'
-            }`}>Students now available at</h3>
-            <div className="flex flex-wrap justify-center items-center gap-4">
-              {partnerLogos.map((logo, idx) => (
-                <motion.img
-                  key={idx}
-                  src={logo}
-                  alt="Partner Logo"
-                  className="h-12 w-auto object-contain"
-                  whileHover={{ scale: 1.1 }}
-                  transition={{ type: "spring", stiffness: 400, damping: 10 }}
-                />
-              ))}
+            {/* Partner Logos */}
+            <div className="mt-8">
+              <h3 className="courses-text-secondary courses-body text-center font-medium mb-6">Students now available at</h3>
+              <div className="flex flex-wrap justify-center items-center gap-6 md:gap-8">
+                {partnerLogos.map((logo, idx) => (
+                  <motion.img
+                    key={idx}
+                    src={logo}
+                    alt="Partner Logo"
+                    className="h-10 md:h-12 w-auto object-contain opacity-70 hover:opacity-100 transition-opacity"
+                    whileHover={{ scale: 1.1 }}
+                    transition={{ type: "spring", stiffness: 400, damping: 10 }}
+                  />
+                ))}
+              </div>
             </div>
           </motion.div>
         </motion.section>
 
         {/* Projects Carousel */}
-        <section className="py-20 px-4 border-b border-gray-800 bg-gradient-to-b from-black via-blue-950/20 to-black relative overflow-hidden">
-          <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_30%,rgba(59,130,246,0.1),transparent_70%)]"/>
-          <motion.h2
-            className="text-4xl font-bold text-center mb-12 tracking-tight leading-tight bg-clip-text text-transparent bg-gradient-to-r from-white via-blue-100 to-blue-300 drop-shadow-sm"
-            initial={{ opacity: 0, y: 20 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.5 }}
-          >
-            Explore over 14+ extensive projects
-          </motion.h2>
-          <motion.div
-            className="max-w-5xl mx-auto relative z-10"
-            initial={{ opacity: 0, y: 20 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.5, delay: 0.2 }}
-          >
-            <div className="relative">
-              <button
-                className="absolute left-0 top-1/2 -translate-y-1/2 z-10 bg-gray-800/80 hover:bg-blue-600 text-white w-10 h-10 rounded-full flex items-center justify-center shadow-lg transform transition hover:scale-110 border border-gray-700/50 hover:border-blue-500/50"
-                onClick={() => scrollProjects(-1)}
-              >
-                &lt;
-              </button>
-              <div
-                ref={projectCarouselRef}
-                className="overflow-hidden hide-scrollbar"
-              >
+        <section className="courses-section py-16 md:py-24 px-4 relative overflow-hidden transition-all duration-500 border-b">
+          <div className="courses-bg-overlay absolute inset-0"/>
+          <div className="courses-container">
+            <motion.h2
+              className="courses-heading-2 courses-gradient-text text-center mb-12 md:mb-16 tracking-tight leading-tight"
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.5 }}
+            >
+              Explore over 14+ extensive projects
+            </motion.h2>
+            <motion.div
+              className="relative z-10 max-w-2xl mx-auto"
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.5, delay: 0.2 }}
+            >
+              <div className="relative">
+                <button
+                  className="courses-nav-button absolute left-2 md:left-0 top-1/2 -translate-y-1/2 z-10 shadow-xl transform transition-all duration-300 hover:scale-110"
+                  onClick={() => scrollProjects(-1)}
+                >
+                  &lt;
+                </button>
                 <div
-                  className="flex transition-transform duration-500 ease-in-out"
-                  style={{ transform: `translateX(-${activeProjectIndex * 100}%)` }}
+                  ref={projectCarouselRef}
+                  className="overflow-hidden courses-hide-scrollbar mx-12 md:mx-16"
                 >
-                  {projects.map((img, idx) => (
-                    <div
-                      key={idx}
-                      className="min-w-full flex justify-center px-4"
-                      style={{ width: '100%', flexShrink: 0 }}
-                    >
-                      <img
-                        src={img}
-                        alt={`Project ${idx + 1}`}
-                        className="rounded-lg shadow-lg hover:shadow-blue-500/30 transition transform hover:scale-105 cursor-pointer border-2 border-gray-700/50 hover:border-blue-500/50"
-                        style={{ height: "220px", width: "360px" }}
-                      />
-                    </div>
-                  ))}
+                  <div
+                    className="flex transition-transform duration-500 ease-in-out"
+                    style={{ transform: `translateX(-${activeProjectIndex * 100}%)` }}
+                  >
+                    {projects.map((img, idx) => (
+                      <div
+                        key={idx}
+                        className="min-w-full flex justify-center px-2 md:px-4"
+                        style={{ width: '100%', flexShrink: 0 }}
+                      >
+                        <img
+                          src={img}
+                          alt={`Project ${idx + 1}`}
+                          className="rounded-xl shadow-lg hover:shadow-blue-500/30 transition transform hover:scale-105 cursor-pointer border-2 border-gray-700/50 hover:border-blue-500/50 w-full max-w-xs md:max-w-sm h-auto"
+                          style={{ aspectRatio: '16/10' }}
+                        />
+                      </div>
+                    ))}
+                  </div>
                 </div>
-              </div>
-              <button
-                className="absolute right-0 top-1/2 -translate-y-1/2 z-10 bg-gray-800/80 hover:bg-blue-600 text-white w-10 h-10 rounded-full flex items-center justify-center shadow-lg transform transition hover:scale-110 border border-gray-700/50 hover:border-blue-500/50"
-                onClick={() => scrollProjects(1)}
-              >
-                &gt;
-              </button>
-            </div>
-            <div className="flex justify-center mt-4 gap-2">
-              {projects.map((_, idx) => (
                 <button
-                  key={idx}
-                  className={`w-3 h-3 rounded-full transition-all duration-300 ${idx === activeProjectIndex ? 'bg-blue-500 scale-110 shadow-md shadow-blue-500/50' : 'bg-gray-600 hover:bg-gray-500'}`}
-                  onClick={() => goToProjectSlide(idx)}
-                />
-              ))}
-            </div>
-          </motion.div>
-        </section>
-
-        {/* Testimonials */}
-        <section className="py-20 px-4 border-b border-gray-800 bg-gradient-to-br from-gray-900 via-blue-950/10 to-gray-900 relative overflow-hidden">
-          <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_30%,rgba(59,130,246,0.1),transparent_70%)]"/>
-          <motion.h2
-            className="text-4xl font-bold text-center mb-12 tracking-tight leading-tight bg-clip-text text-transparent bg-gradient-to-r from-white via-blue-100 to-blue-300 drop-shadow-sm"
-            initial={{ opacity: 0, y: 20 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.5 }}
-          >
-            Kind Words from Our Students
-          </motion.h2>
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto relative z-10">
-            {testimonials.map((t, idx) => (
-              <motion.div
-                key={idx}
-                className="group relative backdrop-blur-sm bg-gray-800/30 hover:bg-gray-800/50 p-8 rounded-xl flex flex-col items-center shadow-lg cursor-pointer border border-gray-700/50 hover:border-blue-500/50 transition-all duration-300 hover:shadow-blue-500/20"
-                initial={{ opacity: 0, y: 30 }}
-                whileInView={{ opacity: 1, y: 0 }}
-                viewport={{ once: true }}
-                transition={{ duration: 0.5, delay: idx * 0.1 }}
-                whileHover={{ scale: 1.02 }}
-                onClick={() => handleInfo(t.review)}
-              >
-                <div className="absolute inset-0 bg-gradient-to-t from-blue-600/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-xl"/>
-                <div className="relative w-20 h-20 mb-6">
-                  <div className="absolute inset-0 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full blur-lg opacity-50 group-hover:opacity-70 transition-opacity duration-300"/>
-                  <img 
-                    src={t.img} 
-                    alt={t.name} 
-                    className="relative w-full h-full rounded-full object-cover border-2 border-blue-400/50 group-hover:border-blue-400 transition-all duration-300 z-10 shadow-md shadow-blue-500/30" 
+                  className="courses-nav-button absolute right-2 md:right-0 top-1/2 -translate-y-1/2 z-10 shadow-xl transform transition-all duration-300 hover:scale-110"
+                  onClick={() => scrollProjects(1)}
+                >
+                  &gt;
+                </button>
+              </div>
+              <div className="courses-carousel-indicators mt-6">
+                {projects.map((_, idx) => (
+                  <button
+                    key={idx}
+                    className={`courses-carousel-indicator ${
+                      idx === activeProjectIndex ? 'active' : ''
+                    }`}
+                    onClick={() => goToProjectSlide(idx)}
                   />
-                </div>
-                <h4 className="font-bold mb-3 text-xl bg-clip-text text-transparent bg-gradient-to-r from-white to-blue-300 group-hover:from-blue-400 group-hover:to-purple-400 transition-all duration-300">{t.name}</h4>
-                <div className="flex mb-4">
-                  {Array.from({ length: t.stars }).map((_, i) => (
-                    <motion.span
-                      key={i}
-                      className="text-yellow-400 text-lg"
-                      initial={{ opacity: 0, scale: 0.5 }}
-                      animate={{ opacity: 1, scale: 1 }}
-                      transition={{ delay: i * 0.1 }}
-                    >
-                      ★
-                    </motion.span>
-                  ))}
-                </div>
-                <p className="text-gray-300 text-sm text-center line-clamp-4 group-hover:text-gray-200 transition-colors duration-300">{t.review}</p>
-              </motion.div>
-            ))}
+                ))}
+              </div>
+            </motion.div>
           </div>
         </section>
 
-        {/* Courses Timeline Section */}
-        <section className="py-16 px-4 border-b border-gray-800">
-          <motion.h2
-            className="text-3xl font-bold text-center mb-4 tracking-tight leading-tight bg-clip-text text-transparent bg-gradient-to-r from-white via-blue-100 to-blue-300 drop-shadow-sm"
-            initial={{ opacity: 0, y: 20 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.5 }}
-          >
-            Courses Available
-          </motion.h2>
-          <motion.h3
-            className="text-xl font-semibold text-center mb-12 text-gray-300"
-            initial={{ opacity: 0, y: 20 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.5, delay: 0.1 }}
-          >
-            Courses Covered In the Program
-          </motion.h3>
-          <div className="flex flex-col md:flex-row w-full max-w-6xl mx-auto">
-            {/* Left column */}
-            <div className="flex-1 flex flex-col gap-8">
-              {courses.filter((_, i) => i % 2 === 0).map((course, idx) => (
+        {/* Testimonials */}
+        <section className="courses-section py-16 md:py-24 px-4 relative overflow-hidden transition-all duration-500 border-b">
+          <div className="courses-bg-overlay absolute inset-0"/>
+          <div className="courses-container-wide">
+            <motion.h2
+              className="courses-heading-2 courses-gradient-text text-center mb-12 md:mb-16 tracking-tight leading-tight"
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.5 }}
+            >
+              Kind Words from Our Students
+            </motion.h2>
+            <div className="courses-grid courses-grid-3 relative z-10">
+              {testimonials.map((t, idx) => (
                 <motion.div
-                  key={course.number}
-                  className="flex items-center gap-4 cursor-pointer rounded-xl p-4 transition-all duration-300 hover:scale-105 group backdrop-blur-sm bg-gray-800/30 hover:bg-gray-800/50 border border-gray-700/50 hover:border-blue-500/50 shadow-lg hover:shadow-blue-500/20"
-                  onClick={() => handleCourseClick(course)}
-                  initial={{ opacity: 0, x: -30 }}
-                  whileInView={{ opacity: 1, x: 0 }}
+                  key={idx}
+                  className="courses-card group cursor-pointer flex flex-col items-center text-center"
+                  initial={{ opacity: 0, y: 30 }}
+                  whileInView={{ opacity: 1, y: 0 }}
                   viewport={{ once: true }}
                   transition={{ duration: 0.5, delay: idx * 0.1 }}
+                  whileHover={{ scale: 1.02 }}
+                  onClick={() => handleInfo(t.review)}
                 >
-                  <div className="relative w-40 h-24 overflow-hidden rounded-lg">
+                  <div className="relative w-20 h-20 md:w-24 md:h-24 mb-6">
+                    <div className="absolute inset-0 rounded-full blur-lg opacity-50 group-hover:opacity-70 transition-opacity duration-300 bg-gradient-to-r from-blue-500 to-purple-500"/>
                     <img
-                      src={course.img}
-                      alt={course.title}
-                      className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
+                      src={t.img}
+                      alt={t.name}
+                      className="relative w-full h-full rounded-full object-cover border-3 transition-all duration-300 z-10 shadow-lg border-blue-400/50 group-hover:border-blue-400 shadow-blue-500/30"
                     />
-                    <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"/>
                   </div>
-                  <div className="flex-1">
-                    <h3 className="text-lg font-bold mb-2 bg-clip-text text-transparent bg-gradient-to-r from-white to-blue-300 group-hover:from-blue-400 group-hover:to-purple-400 transition-all duration-300">{course.title}</h3>
-                    <p className="text-gray-300 text-sm line-clamp-2">{course.desc}</p>
+                  <h4 className="courses-heading-4 courses-text-gradient mb-4">{t.name}</h4>
+                  <div className="flex mb-4 gap-1">
+                    {Array.from({ length: t.stars }).map((_, i) => (
+                      <motion.span
+                        key={i}
+                        className="text-yellow-400 text-lg"
+                        initial={{ opacity: 0, scale: 0.5 }}
+                        animate={{ opacity: 1, scale: 1 }}
+                        transition={{ delay: i * 0.1 }}
+                      >
+                        ★
+                      </motion.span>
+                    ))}
                   </div>
-                  <svg className="w-6 h-6 text-gray-400 group-hover:text-blue-400 transform group-hover:translate-x-1 transition-all duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-                  </svg>
+                  <p className="courses-body-small text-center line-clamp-4 transition-colors duration-300 leading-relaxed courses-text-secondary">
+                    {t.review}
+                  </p>
                 </motion.div>
               ))}
             </div>
-            {/* Timeline */}
-            <div className="hidden md:flex flex-col items-center mx-8 relative">
-              <div className="absolute top-0 bottom-0 w-1 bg-purple-800 left-1/2 -translate-x-1/2"></div>
-              {courses.map((course, idx) => (
-                <React.Fragment key={course.number}>
+          </div>
+        </section>
+
+        {/* Courses Timeline Section */}
+        <section className="courses-section py-16 md:py-24 px-4 transition-all duration-500 border-b">
+          <div className="courses-container-wide">
+            <motion.h2
+              className="courses-heading-2 courses-gradient-text text-center mb-6 tracking-tight leading-tight"
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.5 }}
+            >
+              Courses Available
+            </motion.h2>
+            <motion.h3
+              className="courses-body-large courses-text-secondary text-center mb-12 md:mb-16"
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.5, delay: 0.1 }}
+            >
+              Courses Covered In the Program
+            </motion.h3>
+            <div className="flex flex-col lg:flex-row w-full gap-8 lg:gap-0">
+              {/* Left column */}
+              <div className="flex-1 flex flex-col gap-6 lg:gap-8">
+                {courses.filter((_, i) => i % 2 === 0).map((course, idx) => (
                   <motion.div
-                    className="flex flex-col items-center relative z-10"
-                    initial={{ opacity: 0, scale: 0.8 }}
-                    whileInView={{ opacity: 1, scale: 1 }}
+                    key={course.number}
+                    className="courses-timeline-card flex flex-col sm:flex-row items-start sm:items-center gap-4 sm:gap-6 cursor-pointer group"
+                    onClick={() => handleCourseClick(course)}
+                    initial={{ opacity: 0, x: -30 }}
+                    whileInView={{ opacity: 1, x: 0 }}
                     viewport={{ once: true }}
-                    transition={{ duration: 0.3, delay: idx * 0.1 }}
+                    transition={{ duration: 0.5, delay: idx * 0.1 }}
                   >
-                    <div className="w-14 h-14 flex items-center justify-center rounded-full bg-gray-900 border-4 border-purple-500 text-2xl font-bold mb-2 shadow-lg shadow-purple-500/50 group-hover:border-blue-500 transition-all duration-300">
-                      {course.number}
+                    <div className="relative w-full sm:w-32 md:w-40 h-32 sm:h-20 md:h-24 overflow-hidden rounded-lg flex-shrink-0">
+                      <img
+                        src={course.img}
+                        alt={course.title}
+                        className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
+                      />
+                      <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"/>
                     </div>
-                    {idx !== courses.length - 1 && <div className="w-1 h-16 bg-transparent"></div>}
+                    <div className="flex-1 min-w-0">
+                      <h3 className="courses-heading-4 courses-text-gradient mb-2 md:mb-3 line-clamp-2">{course.title}</h3>
+                      <p className="courses-body-small courses-text-secondary line-clamp-2 md:line-clamp-3 leading-relaxed">{course.desc}</p>
+                    </div>
+                    <svg className="w-5 h-5 md:w-6 md:h-6 group-hover:text-blue-400 transform group-hover:translate-x-1 transition-all duration-300 courses-text-muted flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                    </svg>
                   </motion.div>
-                </React.Fragment>
-              ))}
-              <motion.button
-                className="mt-8 bg-gradient-to-r from-green-500 to-emerald-500 hover:from-green-600 hover:to-emerald-600 text-white font-bold py-3 px-8 rounded-full shadow-lg transform transition hover:scale-110 relative z-10 border border-green-400/30"
-                onClick={() => handleAction("enroll")}
-                initial={{ opacity: 0, y: 20 }}
-                whileInView={{ opacity: 1, y: 0 }}
-                viewport={{ once: true }}
-                transition={{ duration: 0.5, delay: 0.8 }}
-                whileHover={{ y: -5 }}
-                whileTap={{ y: 0 }}
-              >
-                Enroll now
-              </motion.button>
+                ))}
+              </div>
+              {/* Timeline */}
+              <div className="hidden lg:flex flex-col items-center mx-6 xl:mx-8 relative">
+                <div className="absolute top-0 bottom-0 w-1 left-1/2 -translate-x-1/2 bg-gradient-to-b from-purple-500 to-indigo-500"></div>
+                {courses.map((course, idx) => (
+                  <React.Fragment key={course.number}>
+                    <motion.div
+                      className="flex flex-col items-center relative z-10"
+                      initial={{ opacity: 0, scale: 0.8 }}
+                      whileInView={{ opacity: 1, scale: 1 }}
+                      viewport={{ once: true }}
+                      transition={{ duration: 0.3, delay: idx * 0.1 }}
+                    >
+                      <div className="w-12 h-12 xl:w-16 xl:h-16 flex items-center justify-center rounded-full border-4 text-lg xl:text-2xl font-bold mb-2 bg-gradient-to-br from-purple-600 to-indigo-600 border-purple-400 text-white shadow-lg shadow-purple-500/50">
+                        {course.number}
+                      </div>
+                      {idx !== courses.length - 1 && <div className="w-1 h-12 xl:h-16 bg-transparent"></div>}
+                    </motion.div>
+                  </React.Fragment>
+                ))}
+                <motion.button
+                  className="courses-button-primary mt-8 xl:mt-12 py-3 xl:py-4 px-8 xl:px-10 rounded-2xl shadow-2xl transform transition-all duration-300 hover:scale-110 relative z-10"
+                  onClick={() => handleAction("enroll")}
+                  initial={{ opacity: 0, y: 20 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  viewport={{ once: true }}
+                  transition={{ duration: 0.5, delay: 0.8 }}
+                  whileHover={{ y: -5 }}
+                  whileTap={{ y: 0 }}
+                >
+                  Enroll now
+                </motion.button>
+              </div>
+              {/* Right column */}
+              <div className="flex-1 flex flex-col gap-6 lg:gap-8">
+                {courses.filter((_, i) => i % 2 === 1).map((course, idx) => (
+                  <motion.div
+                    key={course.number}
+                    className="courses-timeline-card flex flex-col sm:flex-row items-start sm:items-center gap-4 sm:gap-6 cursor-pointer group"
+                    onClick={() => handleCourseClick(course)}
+                    initial={{ opacity: 0, x: 30 }}
+                    whileInView={{ opacity: 1, x: 0 }}
+                    viewport={{ once: true }}
+                    transition={{ duration: 0.5, delay: idx * 0.1 }}
+                  >
+                    <div className="flex-1 min-w-0 order-2 sm:order-1">
+                      <h3 className="courses-heading-4 courses-text-gradient mb-2 md:mb-3 line-clamp-2">{course.title}</h3>
+                      <p className="courses-body-small courses-text-secondary line-clamp-2 md:line-clamp-3 leading-relaxed">{course.desc}</p>
+                    </div>
+                    <div className="relative w-full sm:w-32 md:w-40 h-32 sm:h-20 md:h-24 overflow-hidden rounded-lg flex-shrink-0 order-1 sm:order-2">
+                      <img
+                        src={course.img}
+                        alt={course.title}
+                        className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
+                      />
+                      <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"/>
+                    </div>
+                    <svg className="w-5 h-5 md:w-6 md:h-6 group-hover:text-blue-400 transform group-hover:translate-x-1 transition-all duration-300 courses-text-muted flex-shrink-0 order-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                    </svg>
+                  </motion.div>
+                ))}
+              </div>
+
+              {/* Mobile Enroll Button */}
+              <div className="lg:hidden mt-8 flex justify-center">
+                <motion.button
+                  className="courses-button-primary py-3 px-8 rounded-2xl shadow-2xl transform transition-all duration-300 hover:scale-105"
+                  onClick={() => handleAction("enroll")}
+                  initial={{ opacity: 0, y: 20 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  viewport={{ once: true }}
+                  transition={{ duration: 0.5, delay: 0.8 }}
+                  whileHover={{ y: -3 }}
+                  whileTap={{ y: 0 }}
+                >
+                  Enroll now
+                </motion.button>
+              </div>
             </div>
-            {/* Right column */}
-            <div className="flex-1 flex flex-col gap-8">
-              {courses.filter((_, i) => i % 2 === 1).map((course, idx) => (
+          </div>
+        </section>
+
+        {/* Project Reviews Section */}
+        <section className="courses-stats-section py-16 md:py-20 px-4 transition-all duration-500 border-b">
+          <div className="courses-container-wide">
+            <motion.h2
+              className="courses-heading-2 courses-text-primary text-center mb-8 md:mb-12"
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.5 }}
+            >
+              Project reviews from students
+            </motion.h2>
+            <div className="courses-grid courses-grid-3 mb-8 md:mb-12">
+              {projectReviews.map((review, idx) => (
                 <motion.div
-                  key={course.number}
-                  className="flex items-center gap-4 cursor-pointer rounded-xl p-4 transition-all duration-300 hover:scale-105 group backdrop-blur-sm bg-gray-800/30 hover:bg-gray-800/50 border border-gray-700/50 hover:border-blue-500/50 shadow-lg hover:shadow-blue-500/20"
-                  onClick={() => handleCourseClick(course)}
-                  initial={{ opacity: 0, x: 30 }}
-                  whileInView={{ opacity: 1, x: 0 }}
+                  key={idx}
+                  className="courses-card flex flex-col items-center text-center cursor-pointer group"
+                  initial={{ opacity: 0, y: 30 }}
+                  whileInView={{ opacity: 1, y: 0 }}
                   viewport={{ once: true }}
                   transition={{ duration: 0.5, delay: idx * 0.1 }}
+                  whileHover={{ scale: 1.02 }}
+                  onClick={() => handleInfo(review.review)}
                 >
-                  <div className="flex-1">
-                    <h3 className="text-lg font-bold mb-2 bg-clip-text text-transparent bg-gradient-to-r from-white to-blue-300 group-hover:from-blue-400 group-hover:to-purple-400 transition-all duration-300">{course.title}</h3>
-                    <p className="text-gray-300 text-sm line-clamp-2">{course.desc}</p>
-                  </div>
-                  <div className="relative w-40 h-24 overflow-hidden rounded-lg">
+                  <div className="relative w-16 h-16 md:w-20 md:h-20 mb-4 md:mb-6">
+                    <div className="absolute inset-0 rounded-full blur-md opacity-50 group-hover:opacity-70 transition-opacity duration-300 bg-gradient-to-r from-green-400 to-emerald-500"/>
                     <img
-                      src={course.img}
-                      alt={course.title}
-                      className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
+                      src={review.img}
+                      alt={review.name}
+                      className="relative w-full h-full rounded-full object-cover border-3 border-green-400 group-hover:border-green-300 transition-all duration-300 z-10 shadow-lg"
                     />
-                    <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"/>
                   </div>
-                  <svg className="w-6 h-6 text-gray-400 group-hover:text-blue-400 transform group-hover:translate-x-1 transition-all duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-                  </svg>
+                  <h4 className="courses-heading-4 courses-text-gradient mb-3 md:mb-4">{review.name}</h4>
+                  <p className="courses-body-small courses-text-secondary text-center leading-relaxed line-clamp-4">
+                    {review.review}
+                  </p>
                 </motion.div>
               ))}
             </div>
           </div>
         </section>
 
-        {/* Project Reviews Section */}
-        <section className="py-16 px-4 border-b border-gray-800">
-          <motion.h2
-            className="text-3xl font-bold text-center mb-8"
-            initial={{ opacity: 0, y: 20 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.5 }}
-          >
-            Project reviews from students
-          </motion.h2>
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12 max-w-6xl mx-auto">
-            {projectReviews.map((review, idx) => (
-              <motion.div
-                key={idx}
-                className="bg-gray-800 hover:bg-gray-750 p-6 rounded-lg flex flex-col items-center shadow-lg cursor-pointer"
-                initial={{ opacity: 0, y: 30 }}
-                whileInView={{ opacity: 1, y: 0 }}
-                viewport={{ once: true }}
-                transition={{ duration: 0.5, delay: idx * 0.1 }}
-                whileHover={{ scale: 1.05 }}
-                onClick={() => handleInfo(review.review)}
-              >
-                <img src={review.img} alt={review.name} className="w-16 h-16 rounded-full mb-4 border-2 border-green-400" />
-                <h4 className="font-bold mb-2">{review.name}</h4>
-                <p className="text-gray-300 text-sm text-center">{review.review}</p>
-              </motion.div>
-            ))}
-          </div>
-        </section>
-
         {/* Topics Tag Cloud & Community Stats */}
-        <section className="py-16 px-4 border-b border-gray-800">
-          <motion.h3
-            className="text-2xl font-bold text-center mb-6"
-            initial={{ opacity: 0, y: 20 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.5 }}
-          >
-            100+ topics taught...
-          </motion.h3>
-          <motion.div
-            className={`flex flex-wrap justify-center gap-3 mb-4 transition-all duration-500 ${showAllTopics ? 'max-h-none' : 'max-h-40 overflow-hidden'}`}
-            initial={{ opacity: 0, y: 20 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.5, delay: 0.1 }}
-          >
-            {(showAllTopics ? topics : topics.slice(0, 20)).map((topic, idx) => (
-              <motion.span
-                key={idx}
-                className="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded-full text-sm cursor-pointer"
-                whileHover={{ scale: 1.1, backgroundColor: "#4B5563" }}
-                transition={{ type: "spring", stiffness: 400, damping: 10 }}
-              >
-                {topic}
-              </motion.span>
-            ))}
-          </motion.div>
-          <motion.div
-            className="flex justify-center mb-12"
-            initial={{ opacity: 0, y: 20 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.5, delay: 0.2 }}
-          >
-            <button
-              className="bg-gray-700 hover:bg-gray-600 text-white px-6 py-2 rounded-full transform transition hover:scale-105"
-              onClick={() => setShowAllTopics((v) => !v)}
+        <section className="courses-section py-16 md:py-20 px-4 transition-all duration-500 border-b">
+          <div className="courses-container-wide">
+            <motion.h3
+              className="courses-heading-3 courses-text-primary text-center mb-6 md:mb-8"
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.5 }}
             >
-              {showAllTopics ? "Show less" : "Show more"}
-            </button>
-          </motion.div>
+              100+ topics taught...
+            </motion.h3>
+            <motion.div
+              className={`flex flex-wrap justify-center gap-2 md:gap-3 mb-6 transition-all duration-500 ${showAllTopics ? 'max-h-none' : 'max-h-32 md:max-h-40 overflow-hidden'}`}
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.5, delay: 0.1 }}
+            >
+              {(showAllTopics ? topics : topics.slice(0, 20)).map((topic, idx) => (
+                <motion.span
+                  key={idx}
+                  className="courses-topic-tag"
+                  whileHover={{ scale: 1.05 }}
+                  transition={{ type: "spring", stiffness: 400, damping: 10 }}
+                >
+                  {topic}
+                </motion.span>
+              ))}
+            </motion.div>
+            <motion.div
+              className="flex justify-center mb-8 md:mb-12"
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.5, delay: 0.2 }}
+            >
+              <button
+                className="courses-button-ghost px-6 md:px-8 py-2 md:py-3 rounded-full font-semibold transform transition-all duration-300 hover:scale-105"
+                onClick={() => setShowAllTopics((v) => !v)}
+              >
+                {showAllTopics ? "Show less" : "Show more"}
+              </button>
+            </motion.div>
+          </div>
 
           {/* Community Stats */}
-          <div ref={statsRef} className="flex flex-col md:flex-row justify-center items-center gap-8 mt-12">
+          <div ref={statsRef} className="courses-grid courses-grid-3 mt-8 md:mt-12">
             {stats.map((stat, idx) => (
               <motion.div
                 key={idx}
-                className="group relative backdrop-blur-sm bg-gray-800/30 p-8 rounded-xl text-center min-w-[240px] shadow-lg border border-gray-700/50 hover:border-blue-500/50 transition-all duration-300"
+                className="courses-stat-card group text-center"
                 initial={{ opacity: 0, y: 30 }}
                 whileInView={{ opacity: 1, y: 0 }}
                 viewport={{ once: true }}
                 transition={{ duration: 0.5, delay: idx * 0.1 }}
-                whileHover={{ scale: 1.05 }}
+                whileHover={{ scale: 1.02 }}
               >
-                <div className="absolute inset-0 bg-gradient-to-t from-blue-600/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-xl"/>
                 <div className="relative z-10">
-                  <div className="text-4xl font-bold mb-3 flex justify-center items-baseline bg-clip-text text-transparent bg-gradient-to-r from-white to-blue-300 group-hover:from-blue-400 group-hover:to-purple-400 transition-all duration-300">
-                    <motion.span 
+                  <div className="text-3xl md:text-4xl lg:text-5xl font-bold mb-3 md:mb-4 flex justify-center items-baseline courses-text-gradient">
+                    <motion.span
                       className="inline-block"
                       initial={{ opacity: 0, scale: 0.5 }}
                       animate={{ opacity: 1, scale: 1 }}
@@ -855,10 +828,12 @@ export default function CoursesLanding() {
                     >
                       {isStatsVisible ? animatedStats[stat.label] : 0}
                     </motion.span>
-                    <span className="inline-block ml-1">{stat.suffix}</span>
+                    <span className="inline-block ml-1 text-lg md:text-xl lg:text-2xl">{stat.suffix}</span>
+                  </div>
+                  <div className="courses-body-large courses-text-secondary font-semibold transition-colors duration-300 mb-4 md:mb-6">
+                    {stat.label}
                   </div>
-                  <div className="text-gray-400 text-lg font-medium group-hover:text-gray-300 transition-colors duration-300">{stat.label}</div>
-                  <div className="mt-4 h-1 w-full bg-gray-700/50 rounded-full overflow-hidden">
+                  <div className="h-2 w-full rounded-full overflow-hidden bg-gradient-to-r from-gray-200 to-gray-300">
                     <motion.div
                       className="h-full bg-gradient-to-r from-blue-500 to-purple-500"
                       initial={{ width: "0%" }}
@@ -873,54 +848,60 @@ export default function CoursesLanding() {
         </section>
 
         {/* FAQ Section */}
-        <section className="py-16 px-4 border-b border-gray-800">
-          <motion.h2
-            className="text-3xl font-bold text-center mb-8"
-            initial={{ opacity: 0, y: 20 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.5 }}
-          >
-            Commonly asked questions
-          </motion.h2>
-          <div className="max-w-2xl mx-auto">
-            {faqs.map((faq, idx) => (
-              <motion.div
-                key={idx}
-                className="mb-4 border-b border-gray-700 overflow-hidden"
-                initial={{ opacity: 0, y: 20 }}
-                whileInView={{ opacity: 1, y: 0 }}
-                viewport={{ once: true }}
-                transition={{ duration: 0.5, delay: idx * 0.1 }}
-              >
-                <button
-                  className="w-full text-left py-4 px-4 text-lg font-semibold flex justify-between items-center focus:outline-none hover:bg-gray-800 rounded-t-lg transition-colors"
-                  onClick={() => setOpenFaq(openFaq === idx ? null : idx)}
+        <section className="courses-faq-section py-16 md:py-20 px-4 transition-all duration-500 border-b">
+          <div className="courses-container">
+            <motion.h2
+              className="courses-heading-2 courses-text-primary text-center mb-8 md:mb-12"
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.5 }}
+            >
+              Commonly asked questions
+            </motion.h2>
+            <div className="max-w-3xl mx-auto">
+              {faqs.map((faq, idx) => (
+                <motion.div
+                  key={idx}
+                  className="courses-faq-item mb-4 md:mb-6"
+                  initial={{ opacity: 0, y: 20 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  viewport={{ once: true }}
+                  transition={{ duration: 0.5, delay: idx * 0.1 }}
                 >
-                  {faq.q}
-                  <span
-                    className="transform transition-transform duration-300"
-                    style={{ transform: openFaq === idx ? 'rotate(45deg)' : 'rotate(0)' }}
+                  <button
+                    className="courses-faq-button w-full text-left py-4 md:py-6 px-4 md:px-6 courses-body md:courses-body-large font-semibold flex justify-between items-center focus:outline-none transition-all duration-300"
+                    onClick={() => setOpenFaq(openFaq === idx ? null : idx)}
                   >
-                    +
-                  </span>
-                </button>
-                <div
-                  className="transition-all duration-300 overflow-hidden"
-                  style={{
-                    maxHeight: openFaq === idx ? '500px' : '0',
-                    opacity: openFaq === idx ? 1 : 0
-                  }}
-                >
-                  <div className="py-4 px-4 text-gray-300 text-base bg-gray-800 rounded-b-lg">
-                    {faq.a}
+                    <span className="pr-4">{faq.q}</span>
+                    <span
+                      className="transform transition-transform duration-300 text-xl md:text-2xl flex-shrink-0"
+                      style={{ transform: openFaq === idx ? 'rotate(45deg)' : 'rotate(0)' }}
+                    >
+                      +
+                    </span>
+                  </button>
+                  <div
+                    className="transition-all duration-300 overflow-hidden"
+                    style={{
+                      maxHeight: openFaq === idx ? '500px' : '0',
+                      opacity: openFaq === idx ? 1 : 0
+                    }}
+                  >
+                    <div className="courses-faq-answer py-4 md:py-6 px-4 md:px-6 courses-body leading-relaxed">
+                      {faq.a}
+                    </div>
                   </div>
-                </div>
-              </motion.div>
-            ))}
+                </motion.div>
+              ))}
+            </div>
           </div>
         </section>
       </main>
     </Layout>
   );
-} 
\ No newline at end of file
+}
+
+export default function CoursesLanding() {
+  return <CoursesContent />;
+}
\ No newline at end of file
diff --git a/src/pages/get-started/index.tsx b/src/pages/get-started/index.tsx
index b444a563..873f7f07 100644
--- a/src/pages/get-started/index.tsx
+++ b/src/pages/get-started/index.tsx
@@ -5,6 +5,32 @@ import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import { motion, useAnimation, useInView } from "framer-motion";
 import Head from '@docusaurus/Head';
 import { useColorMode } from '@docusaurus/theme-common';
+import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
+
+// Safe hook for color mode that handles SSR
+function useSafeColorMode() {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  let colorMode = 'light';
+  let isDark = false;
+
+  if (mounted && ExecutionEnvironment.canUseDOM) {
+    try {
+      const { useColorMode: useColorModeHook } = require('@docusaurus/theme-common');
+      const colorModeResult = useColorModeHook();
+      colorMode = colorModeResult.colorMode;
+      isDark = colorMode === 'dark';
+    } catch (error) {
+      console.warn('Failed to get color mode:', error);
+    }
+  }
+
+  return { colorMode, isDark, mounted };
+}
 import styles from "./styles.module.css";
 
 // Type definitions
@@ -607,10 +633,9 @@ const LearningPath = ({
   );
 };
 
-export default function GetStarted() {
+function GetStartedContent() {
   const { siteConfig } = useDocusaurusContext();
-  const { colorMode } = useColorMode();
-  const isDark = colorMode === 'dark';
+  const { colorMode, isDark, mounted } = useSafeColorMode();
   type CompletedPaths = Record<string, boolean>;
 
   const [completedPaths, setCompletedPaths] = useState<CompletedPaths>(() => {
@@ -861,3 +886,7 @@ export default function GetStarted() {
     </Layout>
   );
 }
+
+export default function GetStarted() {
+  return <GetStartedContent />;
+}
diff --git a/src/pages/our-sponsors/Sponsors.css b/src/pages/our-sponsors/Sponsors.css
index 77e6cf49..4c8e2b72 100644
--- a/src/pages/our-sponsors/Sponsors.css
+++ b/src/pages/our-sponsors/Sponsors.css
@@ -4,6 +4,11 @@
     margin: 0 auto;
 }
 
+[data-theme='dark'] .sponsor-page {
+    background: var(--dark-bg-primary);
+    color: var(--dark-text-primary);
+}
+
 .sponsor-page .sponsor-header {
     text-align: center;
     margin-bottom: 2rem;
@@ -28,6 +33,10 @@
     padding-bottom: 0.5rem;
 }
 
+[data-theme='dark'] .tabs {
+    border-bottom-color: var(--dark-border);
+}
+
 .tab-button {
     padding: 0.75rem 1.5rem;
     margin: 0 0.5rem;
@@ -45,6 +54,10 @@
     gap: 8px;
 }
 
+[data-theme='dark'] .tab-button {
+    color: var(--dark-text-secondary);
+}
+
 .tab-button.active {
     color: #4f46e5;
 }
@@ -118,6 +131,11 @@
     align-items: center;
 }
 
+[data-theme='dark'] .sponsor-page .sponsor-card {
+    background: var(--dark-card-bg);
+    border-color: var(--dark-border);
+}
+
 .sponsor-page .sponsor-card::before {
     position: absolute;
     top: 0;
@@ -158,6 +176,10 @@
     color: #111827;
 }
 
+[data-theme='dark'] .sponsor-page .sponsor-card .sponsor-name {
+    color: var(--dark-text-primary);
+}
+
 .sponsor-page .sponsor-card .sponsor-desc {
     font-size: 0.95rem;
     color: #4b5563;
@@ -165,6 +187,10 @@
     line-height: 1.4;
 }
 
+[data-theme='dark'] .sponsor-page .sponsor-card .sponsor-desc {
+    color: var(--dark-text-secondary);
+}
+
 .sponsor-page .sponsor-card .social-links {
     display: flex;
     justify-content: center;
@@ -294,6 +320,11 @@
     background: white;
 }
 
+[data-theme='dark'] .scanner-content {
+    background: var(--dark-bg-secondary);
+    color: var(--dark-text-primary);
+}
+
 .sponsors-section {
     margin-top: 2rem;
 }
diff --git a/src/pages/podcasts/index.css b/src/pages/podcasts/index.css
index a7bd1c71..fbfdc72f 100644
--- a/src/pages/podcasts/index.css
+++ b/src/pages/podcasts/index.css
@@ -11,11 +11,19 @@
   text-align: center;
 }
 
+[data-theme='dark'] .podcast-subtitle {
+  color: var(--dark-text-secondary);
+}
+
 h1 {
   text-align: center;
   margin-bottom: 1rem;
 }
 
+[data-theme='dark'] h1 {
+  color: var(--dark-text-primary);
+}
+
 .podcast-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
@@ -31,10 +39,19 @@ h1 {
   transition: transform 0.2s ease;
 }
 
+[data-theme='dark'] .podcast-card {
+  background: var(--dark-card-bg);
+  box-shadow: var(--dark-shadow);
+}
+
 .podcast-card:hover {
   transform: translateY(-4px);
 }
 
+[data-theme='dark'] .podcast-card:hover {
+  box-shadow: var(--dark-shadow-lg);
+}
+
 .podcast-content {
   height: 100%;
 }
@@ -51,6 +68,10 @@ h1 {
   color: #333;
 }
 
+[data-theme='dark'] .podcast-info h3 {
+  color: var(--dark-text-primary);
+}
+
 .podcast-description {
   font-size: 0.9rem;
   color: #666;
@@ -65,6 +86,10 @@ h1 {
   text-overflow: ellipsis;
 }
 
+[data-theme='dark'] .podcast-description {
+  color: var(--dark-text-secondary);
+}
+
 .podcast-publisher {
   font-size: 0.8rem;
   color: #888;
@@ -72,6 +97,10 @@ h1 {
   font-style: italic;
 }
 
+[data-theme='dark'] .podcast-publisher {
+  color: var(--dark-text-muted);
+}
+
 .podcast-embed {
   height: 100%;
   border-radius: 0 0 12px 12px;
@@ -166,11 +195,20 @@ h1 {
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
 
+[data-theme='dark'] .podcast-transcript {
+  background: var(--dark-card-bg);
+  box-shadow: var(--dark-shadow);
+}
+
 .podcast-transcript h2 {
   margin-bottom: 1rem;
   color: #333;
 }
 
+[data-theme='dark'] .podcast-transcript h2 {
+  color: var(--dark-text-primary);
+}
+
 .podcast-card {
   cursor: pointer;
 }
diff --git a/src/pages/showcase/styles.module.css b/src/pages/showcase/styles.module.css
index adca91cc..b8c0987b 100644
--- a/src/pages/showcase/styles.module.css
+++ b/src/pages/showcase/styles.module.css
@@ -32,6 +32,10 @@
   margin-right: 0.5rem;
 }
 
+[data-theme='dark'] .checkboxListItem {
+  color: var(--dark-text-primary);
+}
+
 .checkboxListItem:last-child {
   margin-right: 0;
 }
@@ -47,6 +51,16 @@
   border: 1px solid gray;
 }
 
+[data-theme='dark'] .searchContainer input {
+  background: var(--dark-input-bg);
+  border-color: var(--dark-input-border);
+  color: var(--dark-text-primary);
+}
+
+[data-theme='dark'] .searchContainer input:focus {
+  border-color: var(--dark-input-focus-border);
+}
+
 .showcaseList {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
diff --git a/src/theme/Footer/Layout/enhanced-footer.css b/src/theme/Footer/Layout/enhanced-footer.css
index a2cbb49d..9194553c 100644
--- a/src/theme/Footer/Layout/enhanced-footer.css
+++ b/src/theme/Footer/Layout/enhanced-footer.css
@@ -7,24 +7,159 @@
   overflow: hidden;
 }
 
-/* Override ALL possible Docusaurus and theme styles */
+/* Override ALL possible Docusaurus and theme styles with maximum specificity */
 .enhanced-footer,
 .enhanced-footer *,
+.enhanced-footer h1,
+.enhanced-footer h2,
+.enhanced-footer h3,
+.enhanced-footer h4,
+.enhanced-footer h5,
+.enhanced-footer h6,
+.enhanced-footer p,
+.enhanced-footer span,
+.enhanced-footer div,
+.enhanced-footer a,
+.enhanced-footer li,
+.enhanced-footer ul,
+.enhanced-footer button,
+.enhanced-footer input,
 [data-theme='dark'] .enhanced-footer,
 [data-theme='light'] .enhanced-footer,
 html[data-theme='dark'] .enhanced-footer,
 html[data-theme='light'] .enhanced-footer,
 [data-theme='dark'] .enhanced-footer *,
 [data-theme='light'] .enhanced-footer *,
+[data-theme='dark'] .enhanced-footer h1,
+[data-theme='dark'] .enhanced-footer h2,
+[data-theme='dark'] .enhanced-footer h3,
+[data-theme='dark'] .enhanced-footer h4,
+[data-theme='dark'] .enhanced-footer h5,
+[data-theme='dark'] .enhanced-footer h6,
+[data-theme='dark'] .enhanced-footer p,
+[data-theme='dark'] .enhanced-footer span,
+[data-theme='dark'] .enhanced-footer div,
+[data-theme='dark'] .enhanced-footer a,
+[data-theme='dark'] .enhanced-footer li,
+[data-theme='dark'] .enhanced-footer ul,
+[data-theme='dark'] .enhanced-footer button,
+[data-theme='dark'] .enhanced-footer input,
+[data-theme='light'] .enhanced-footer h1,
+[data-theme='light'] .enhanced-footer h2,
+[data-theme='light'] .enhanced-footer h3,
+[data-theme='light'] .enhanced-footer h4,
+[data-theme='light'] .enhanced-footer h5,
+[data-theme='light'] .enhanced-footer h6,
+[data-theme='light'] .enhanced-footer p,
+[data-theme='light'] .enhanced-footer span,
+[data-theme='light'] .enhanced-footer div,
+[data-theme='light'] .enhanced-footer a,
+[data-theme='light'] .enhanced-footer li,
+[data-theme='light'] .enhanced-footer ul,
+[data-theme='light'] .enhanced-footer button,
+[data-theme='light'] .enhanced-footer input,
 html[data-theme='dark'] .enhanced-footer *,
 html[data-theme='light'] .enhanced-footer * {
   background-color: inherit !important;
   color: inherit !important;
 }
 
-/* Force the main footer background to never change */
+/* Force the main footer background and colors to never change */
 .enhanced-footer {
   background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 25%, #16213e 50%, #0f3460 75%, #533483 100%) !important;
+  color: #e2e8f0 !important;
+}
+
+/* Absolute protection against any theme changes */
+[data-theme='dark'] .enhanced-footer,
+[data-theme='light'] .enhanced-footer,
+html[data-theme='dark'] .enhanced-footer,
+html[data-theme='light'] .enhanced-footer {
+  background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 25%, #16213e 50%, #0f3460 75%, #533483 100%) !important;
+  color: #e2e8f0 !important;
+}
+
+/* Force all text elements to maintain their colors */
+[data-theme='dark'] .enhanced-footer h1,
+[data-theme='dark'] .enhanced-footer h2,
+[data-theme='dark'] .enhanced-footer h3,
+[data-theme='dark'] .enhanced-footer h4,
+[data-theme='dark'] .enhanced-footer h5,
+[data-theme='dark'] .enhanced-footer h6,
+[data-theme='light'] .enhanced-footer h1,
+[data-theme='light'] .enhanced-footer h2,
+[data-theme='light'] .enhanced-footer h3,
+[data-theme='light'] .enhanced-footer h4,
+[data-theme='light'] .enhanced-footer h5,
+[data-theme='light'] .enhanced-footer h6 {
+  color: #ffffff !important;
+}
+
+[data-theme='dark'] .enhanced-footer p,
+[data-theme='dark'] .enhanced-footer span,
+[data-theme='dark'] .enhanced-footer div,
+[data-theme='dark'] .enhanced-footer li,
+[data-theme='light'] .enhanced-footer p,
+[data-theme='light'] .enhanced-footer span,
+[data-theme='light'] .enhanced-footer div,
+[data-theme='light'] .enhanced-footer li {
+  color: #e2e8f0 !important;
+}
+
+[data-theme='dark'] .enhanced-footer a,
+[data-theme='light'] .enhanced-footer a {
+  color: #cbd5e1 !important;
+}
+
+[data-theme='dark'] .enhanced-footer a:hover,
+[data-theme='light'] .enhanced-footer a:hover {
+  color: #ffffff !important;
+}
+
+/* Specific protection for footer elements */
+[data-theme='dark'] .enhanced-footer .footer-brand-title,
+[data-theme='light'] .enhanced-footer .footer-brand-title {
+  color: #ffffff !important;
+}
+
+[data-theme='dark'] .enhanced-footer .footer-column-title,
+[data-theme='light'] .enhanced-footer .footer-column-title {
+  color: #ffffff !important;
+}
+
+[data-theme='dark'] .enhanced-footer .footer-link,
+[data-theme='light'] .enhanced-footer .footer-link {
+  color: #cbd5e1 !important;
+}
+
+[data-theme='dark'] .enhanced-footer .footer-link:hover,
+[data-theme='light'] .enhanced-footer .footer-link:hover {
+  color: #ffffff !important;
+}
+
+[data-theme='dark'] .enhanced-footer .footer-copyright,
+[data-theme='light'] .enhanced-footer .footer-copyright {
+  color: #94a3b8 !important;
+}
+
+[data-theme='dark'] .enhanced-footer .developer-link,
+[data-theme='light'] .enhanced-footer .developer-link {
+  color: #fbbf24 !important;
+}
+
+[data-theme='dark'] .enhanced-footer .developer-link:hover,
+[data-theme='light'] .enhanced-footer .developer-link:hover {
+  color: #f59e0b !important;
+}
+
+[data-theme='dark'] .enhanced-footer .legal-link,
+[data-theme='light'] .enhanced-footer .legal-link {
+  color: #94a3b8 !important;
+}
+
+[data-theme='dark'] .enhanced-footer .legal-link:hover,
+[data-theme='light'] .enhanced-footer .legal-link:hover {
+  color: #ffffff !important;
 }
 
 /* Add animated background pattern */

From 13737835e50cc45672c6540b9a20006dee2969b5 Mon Sep 17 00:00:00 2001
From: YourGitHubUsername <richajaiswalhome@gmail.com>
Date: Thu, 7 Aug 2025 15:23:50 +0530
Subject: [PATCH 3/3] fixed some bugs related to theme

---
 src/css/custom.css                        | 22 +++++++++++-----------
 src/pages/badges/github-badges.module.css | 16 +++++++---------
 src/pages/community/community.css         |  3 ++-
 3 files changed, 20 insertions(+), 21 deletions(-)

diff --git a/src/css/custom.css b/src/css/custom.css
index b5d05a1d..54bd2e0d 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -181,16 +181,16 @@
   color: transparent;
 }
 
-/* Light mode background and text fix */
-[data-theme='light'] {
+/* Light mode background and text fix - EXCLUDE community page */
+[data-theme='light'] body:not(:has(.community-page)) {
   --ifm-background-color: #ffffff; /* white background */
   --ifm-font-color-base: #000000;  /* black text */
   background-color: var(--ifm-background-color);
   color: var(--ifm-font-color-base);
 }
 
-/* Dark mode overrides (already there, ensure it's working) */
-[data-theme='dark'] {
+/* Dark mode overrides - EXCLUDE community page */
+[data-theme='dark'] body:not(:has(.community-page)) {
   background-color: var(--dark-bg-primary);
   color: var(--dark-text-primary);
 }
@@ -357,26 +357,26 @@
 
 /* ===== DOCUSAURUS DOCUMENTATION PAGES DARK THEME ===== */
 
-/* Main documentation layout */
-[data-theme='dark'] .main-wrapper {
+/* Main documentation layout - EXCLUDE community page */
+[data-theme='dark'] body:not(:has(.community-page)) .main-wrapper {
   background-color: var(--dark-bg-primary) !important;
   color: var(--dark-text-primary) !important;
 }
 
-[data-theme='dark'] .docusaurus-wrapper {
+[data-theme='dark'] body:not(:has(.community-page)) .docusaurus-wrapper {
   background-color: var(--dark-bg-primary) !important;
 }
 
-/* Documentation content area */
-[data-theme='dark'] .container {
+/* Documentation content area - EXCLUDE community page */
+[data-theme='dark'] body:not(:has(.community-page)) .container {
   background-color: var(--dark-bg-primary) !important;
 }
 
-[data-theme='dark'] .row {
+[data-theme='dark'] body:not(:has(.community-page)) .row {
   background-color: var(--dark-bg-primary) !important;
 }
 
-[data-theme='dark'] .col {
+[data-theme='dark'] body:not(:has(.community-page)) .col {
   background-color: var(--dark-bg-primary) !important;
 }
 
diff --git a/src/pages/badges/github-badges.module.css b/src/pages/badges/github-badges.module.css
index afe449a7..3c139175 100644
--- a/src/pages/badges/github-badges.module.css
+++ b/src/pages/badges/github-badges.module.css
@@ -1,12 +1,4 @@
-body{
-    background-color: #fff;
-}
-
-/* Dark theme body override */
-[data-theme='dark'] body {
-    background-color: var(--dark-bg-primary) !important;
-    color: var(--dark-text-primary) !important;
-}
+/* GitHub badges page styling - light theme */
 .github-badges-page {
   background: #f6f5f5;
   border-radius: 18px;
@@ -15,6 +7,12 @@ body{
   margin-top: 24px;
 }
 
+/* Dark theme body override - EXCLUDE community page */
+[data-theme='dark'] body:not(:has(.community-page)) {
+    background-color: var(--dark-bg-primary) !important;
+    color: var(--dark-text-primary) !important;
+}
+
 /* Dark theme for main page container */
 [data-theme='dark'] .github-badges-page {
   background: var(--dark-bg-secondary) !important;
diff --git a/src/pages/community/community.css b/src/pages/community/community.css
index 0288b454..d722d320 100644
--- a/src/pages/community/community.css
+++ b/src/pages/community/community.css
@@ -6,8 +6,9 @@
   transition: background-color 0.3s ease;
 }
 
+/* Community page should maintain its own background regardless of theme */
 [data-theme='dark'] .community-page {
-  background: var(--dark-bg-primary);
+  background: transparent;
 }
 
 /* CSS Custom Properties for better browser support */