diff --git a/client/components/docs/DocsHeroSection.tsx b/client/components/docs/DocsHeroSection.tsx
index 398e3a44..be509bd2 100644
--- a/client/components/docs/DocsHeroSection.tsx
+++ b/client/components/docs/DocsHeroSection.tsx
@@ -1,6 +1,7 @@
 import { Button } from "@/components/ui/button";
 import { Link } from "react-router-dom";
 import { Rocket, Play } from "lucide-react";
+import { useDocsTheme } from "@/contexts/DocsThemeContext";
 
 interface DocsHeroSectionProps {
   title?: string;
@@ -13,31 +14,34 @@ export default function DocsHeroSection({
   description = "Everything you need to build, deploy, and scale amazing projects with AeThex. Get started with our guides, explore our APIs, and learn from comprehensive tutorials.",
   showButtons = true,
 }: DocsHeroSectionProps) {
+  const { colors, theme } = useDocsTheme();
+  const buttonClass =
+    theme === "professional"
+      ? "bg-black hover:bg-gray-900 text-white"
+      : "bg-purple-600 hover:bg-purple-700";
+  const outlineButtonClass =
+    theme === "professional"
+      ? "border-gray-300 text-black hover:bg-gray-100"
+      : "border-slate-600 text-white hover:bg-slate-800";
+
   return (
     <div className="mb-12 text-center">
-      <h2 className="text-3xl font-bold text-white mb-4">{title}</h2>
-      <p className="text-xl text-gray-300 mb-8 max-w-3xl mx-auto">
+      <h2 className={`text-3xl font-bold ${colors.headingColor} mb-4`}>
+        {title}
+      </h2>
+      <p className={`text-xl ${colors.textMuted} mb-8 max-w-3xl mx-auto`}>
         {description}
       </p>
 
       {showButtons && (
         <div className="flex flex-col sm:flex-row gap-4 justify-center">
-          <Button
-            asChild
-            size="lg"
-            className="bg-purple-600 hover:bg-purple-700"
-          >
+          <Button asChild size="lg" className={buttonClass}>
             <Link to="/docs/getting-started">
               <Rocket className="h-5 w-5 mr-2" />
               Get Started
             </Link>
           </Button>
-          <Button
-            asChild
-            variant="outline"
-            size="lg"
-            className="border-slate-600 text-white hover:bg-slate-800"
-          >
+          <Button asChild variant="outline" size="lg" className={outlineButtonClass}>
             <Link to="/docs/tutorials">
               <Play className="h-5 w-5 mr-2" />
               Watch Tutorials
diff --git a/client/components/docs/DocsSupportCTA.tsx b/client/components/docs/DocsSupportCTA.tsx
index 79ff8510..773e0086 100644
--- a/client/components/docs/DocsSupportCTA.tsx
+++ b/client/components/docs/DocsSupportCTA.tsx
@@ -1,6 +1,7 @@
 import { Button } from "@/components/ui/button";
 import { Link } from "react-router-dom";
 import { BookOpen, Users } from "lucide-react";
+import { useDocsTheme } from "@/contexts/DocsThemeContext";
 
 interface DocsSupportCTAProps {
   title?: string;
@@ -11,16 +12,32 @@ export default function DocsSupportCTA({
   title = "Need help getting started?",
   description = "Our documentation team updates these guides weekly. If you're looking for tailored onboarding, architecture reviews, or migration support, reach out and we'll connect you with the right experts.",
 }: DocsSupportCTAProps) {
+  const { colors, theme } = useDocsTheme();
+  const ctaBg =
+    theme === "professional"
+      ? "border-gray-300 bg-gray-100"
+      : "border-purple-500/40 bg-purple-900/20";
+  const primaryButtonClass =
+    theme === "professional"
+      ? "bg-black hover:bg-gray-900 text-white"
+      : "bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90";
+  const secondaryButtonClass =
+    theme === "professional"
+      ? "border-gray-300 text-black hover:bg-gray-50"
+      : "border-purple-400/60 text-purple-200";
+
   return (
-    <div className="mt-12 rounded-2xl border border-purple-500/40 bg-purple-900/20 p-8 text-center">
-      <h3 className="text-3xl font-semibold text-white mb-4">{title}</h3>
-      <p className="text-gray-300 max-w-3xl mx-auto mb-6">{description}</p>
+    <div
+      className={`mt-12 rounded-2xl border ${ctaBg} p-8 text-center`}
+    >
+      <h3 className={`text-3xl font-semibold ${colors.headingColor} mb-4`}>
+        {title}
+      </h3>
+      <p className={`${colors.textMuted} max-w-3xl mx-auto mb-6`}>
+        {description}
+      </p>
       <div className="flex flex-col sm:flex-row justify-center gap-4">
-        <Button
-          asChild
-          size="lg"
-          className="bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90"
-        >
+        <Button asChild size="lg" className={primaryButtonClass}>
           <Link to="/support" className="flex items-center gap-2">
             <BookOpen className="h-5 w-5" />
             Contact support
@@ -30,7 +47,7 @@ export default function DocsSupportCTA({
           asChild
           variant="outline"
           size="lg"
-          className="border-purple-400/60 text-purple-200"
+          className={secondaryButtonClass}
         >
           <Link to="/community" className="flex items-center gap-2">
             <Users className="h-5 w-5" />
diff --git a/client/components/docs/LearningResourcesGrid.tsx b/client/components/docs/LearningResourcesGrid.tsx
index 1f095056..ca139853 100644
--- a/client/components/docs/LearningResourcesGrid.tsx
+++ b/client/components/docs/LearningResourcesGrid.tsx
@@ -9,6 +9,7 @@ import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Link } from "react-router-dom";
 import { Video, Headphones, Github, Download, LucideIcon } from "lucide-react";
+import { useDocsTheme } from "@/contexts/DocsThemeContext";
 
 export interface LearningResource {
   title: string;
@@ -61,16 +62,22 @@ interface LearningResourcesGridProps {
 export default function LearningResourcesGrid({
   resources = defaultResources,
 }: LearningResourcesGridProps) {
+  const { colors, theme } = useDocsTheme();
+  const hoverBorderColor =
+    theme === "professional" ? "hover:border-gray-400" : "hover:border-purple-500/50";
+
   return (
     <div className="mb-12">
-      <h3 className="text-2xl font-bold text-white mb-6">Learning resources</h3>
+      <h3 className={`text-2xl font-bold ${colors.headingColor} mb-6`}>
+        Learning resources
+      </h3>
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
         {resources.map((resource, index) => {
           const Icon = resource.icon;
           return (
             <Card
               key={resource.title}
-              className="text-center bg-slate-800/50 border-slate-700 hover:border-purple-500/50 transition-all duration-300"
+              className={`text-center ${colors.cardBg} border ${colors.cardBorder} ${hoverBorderColor} transition-all duration-300`}
               style={{ animationDelay: `${index * 0.1}s` }}
             >
               <CardHeader>
@@ -79,10 +86,10 @@ export default function LearningResourcesGrid({
                 >
                   <Icon className="h-8 w-8 text-white" />
                 </div>
-                <CardTitle className="text-white text-lg">
+                <CardTitle className={`${colors.headingColor} text-lg`}>
                   {resource.title}
                 </CardTitle>
-                <CardDescription className="text-gray-400">
+                <CardDescription className={colors.textMuted}>
                   {resource.description}
                 </CardDescription>
               </CardHeader>
diff --git a/client/components/docs/RecentUpdatesSection.tsx b/client/components/docs/RecentUpdatesSection.tsx
index 3a01fced..782ffbc6 100644
--- a/client/components/docs/RecentUpdatesSection.tsx
+++ b/client/components/docs/RecentUpdatesSection.tsx
@@ -2,6 +2,7 @@ import { Card, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Link } from "react-router-dom";
+import { useDocsTheme } from "@/contexts/DocsThemeContext";
 
 export interface FeaturedUpdate {
   title: string;
@@ -42,16 +43,26 @@ export default function RecentUpdatesSection({
   updates = defaultUpdates,
   showViewAll = true,
 }: RecentUpdatesSectionProps) {
+  const { colors, theme } = useDocsTheme();
+  const viewAllButtonClass =
+    theme === "professional"
+      ? "border-gray-300 text-black hover:bg-gray-100"
+      : "border-slate-600 text-white hover:bg-slate-800";
+  const hoverBorderColor =
+    theme === "professional" ? "hover:border-gray-400" : "hover:border-purple-500/50";
+
   return (
     <div className="mb-12">
       <div className="flex items-center justify-between mb-6">
-        <h3 className="text-2xl font-bold text-white">Recent Updates</h3>
+        <h3 className={`text-2xl font-bold ${colors.headingColor}`}>
+          Recent Updates
+        </h3>
         {showViewAll && (
           <Button
             asChild
             variant="outline"
             size="sm"
-            className="border-slate-600 text-white hover:bg-slate-800"
+            className={viewAllButtonClass}
           >
             <Link to="/changelog">View All Updates</Link>
           </Button>
@@ -61,13 +72,15 @@ export default function RecentUpdatesSection({
         {updates.map((update, index) => (
           <Card
             key={index}
-            className="bg-slate-800/50 border-slate-700 hover:border-purple-500/50 transition-all duration-300 cursor-pointer"
+            className={`${colors.cardBg} border ${colors.cardBorder} ${hoverBorderColor} transition-all duration-300 cursor-pointer`}
           >
             <CardContent className="p-4">
               <div className="flex items-center justify-between">
                 <div>
                   <div className="flex items-center space-x-3 mb-2">
-                    <h4 className="text-white font-medium">{update.title}</h4>
+                    <h4 className={`${colors.headingColor} font-medium`}>
+                      {update.title}
+                    </h4>
                     {update.isNew && (
                       <Badge className="bg-green-600 text-white text-xs">
                         New
@@ -77,10 +90,12 @@ export default function RecentUpdatesSection({
                       {update.type}
                     </Badge>
                   </div>
-                  <p className="text-gray-400 text-sm">{update.description}</p>
+                  <p className={`${colors.textMuted} text-sm`}>
+                    {update.description}
+                  </p>
                 </div>
                 <div className="text-right">
-                  <p className="text-xs text-gray-500">{update.date}</p>
+                  <p className={`text-xs ${colors.textMuted}`}>{update.date}</p>
                 </div>
               </div>
             </CardContent>
diff --git a/client/components/docs/ResourceSectionsGrid.tsx b/client/components/docs/ResourceSectionsGrid.tsx
index 06b49c48..7afbb253 100644
--- a/client/components/docs/ResourceSectionsGrid.tsx
+++ b/client/components/docs/ResourceSectionsGrid.tsx
@@ -16,6 +16,7 @@ import {
   Puzzle,
   LayoutDashboard,
 } from "lucide-react";
+import { useDocsTheme } from "@/contexts/DocsThemeContext";
 
 export interface ResourceSection {
   title: string;
@@ -91,9 +92,21 @@ interface ResourceSectionsGridProps {
 export default function ResourceSectionsGrid({
   sections = defaultSections,
 }: ResourceSectionsGridProps) {
+  const { colors, theme } = useDocsTheme();
+  const iconColor = theme === "professional" ? "text-gray-700" : "text-purple-400";
+  const hoverBorderColor =
+    theme === "professional" ? "hover:border-gray-400" : "hover:border-purple-500/50";
+  const hoverTitleColor =
+    theme === "professional" ? "group-hover:text-gray-900" : "group-hover:text-purple-400";
+  const arrowColor = theme === "professional" ? "text-gray-600" : "text-purple-400";
+  const explorehoverColor =
+    theme === "professional"
+      ? "group-hover:text-gray-900"
+      : "group-hover:text-purple-300";
+
   return (
     <div className="mb-12">
-      <h3 className="text-2xl font-bold text-white mb-6">
+      <h3 className={`text-2xl font-bold ${colors.headingColor} mb-6`}>
         Documentation Sections
       </h3>
       <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
@@ -102,18 +115,20 @@ export default function ResourceSectionsGrid({
           return (
             <Card
               key={index}
-              className="bg-slate-800/50 border-slate-700 hover:border-purple-500/50 transition-all duration-300 cursor-pointer group"
+              className={`${colors.cardBg} border ${colors.cardBorder} ${hoverBorderColor} transition-all duration-300 cursor-pointer group`}
             >
               <Link to={section.href}>
                 <CardHeader>
                   <div className="flex items-center justify-between mb-2">
-                    <Icon className="h-8 w-8 text-purple-400" />
+                    <Icon className={`h-8 w-8 ${iconColor}`} />
                     <Badge variant="outline">{section.badge}</Badge>
                   </div>
-                  <CardTitle className="text-white group-hover:text-purple-400 transition-colors">
+                  <CardTitle
+                    className={`${colors.headingColor} ${hoverTitleColor} transition-colors`}
+                  >
                     {section.title}
                   </CardTitle>
-                  <CardDescription className="text-gray-400">
+                  <CardDescription className={colors.textMuted}>
                     {section.description}
                   </CardDescription>
                 </CardHeader>
@@ -122,14 +137,16 @@ export default function ResourceSectionsGrid({
                     {section.items.map((item, itemIndex) => (
                       <li
                         key={itemIndex}
-                        className="text-sm text-gray-400 flex items-center"
+                        className={`text-sm ${colors.textMuted} flex items-center`}
                       >
-                        <ArrowRight className="h-3 w-3 mr-2 text-purple-400" />
+                        <ArrowRight className={`h-3 w-3 mr-2 ${arrowColor}`} />
                         {item}
                       </li>
                     ))}
                   </ul>
-                  <div className="flex items-center text-purple-400 text-sm group-hover:text-purple-300 transition-colors">
+                  <div
+                    className={`flex items-center ${theme === "professional" ? "text-gray-700" : "text-purple-400"} text-sm ${explorehoverColor} transition-colors`}
+                  >
                     Explore section
                     <ArrowRight className="h-4 w-4 ml-1" />
                   </div>