diff --git a/client/src/components/classes/classes-section.tsx b/client/src/components/classes/classes-section.tsx
index 083c438..bd03909 100644
--- a/client/src/components/classes/classes-section.tsx
+++ b/client/src/components/classes/classes-section.tsx
@@ -26,7 +26,7 @@ export function ClassesSection() {
   };
   
   return (
-    <section className="py-20 bg-teal bg-opacity-10">
+    <section className="py-20" style={{ backgroundColor: 'rgba(12, 137, 145, 0.1)' }}>
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="text-center mb-16">
           <h2 className="text-3xl md:text-4xl font-playfair font-semibold text-gray-800 mb-4">
diff --git a/client/src/components/community/community-section.tsx b/client/src/components/community/community-section.tsx
index be0235c..89f94b8 100644
--- a/client/src/components/community/community-section.tsx
+++ b/client/src/components/community/community-section.tsx
@@ -44,7 +44,7 @@ export function CommunitySection() {
   }, [user]);
   
   return (
-    <section className="py-20 bg-purple bg-opacity-10">
+    <section className="py-20" style={{ backgroundColor: 'rgba(157, 94, 155, 0.1)' }}>
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="text-center mb-16">
           <h2 className="text-3xl md:text-4xl font-playfair font-semibold text-gray-800 mb-4">
diff --git a/client/src/components/home/cta-section.tsx b/client/src/components/home/cta-section.tsx
index 3d5b031..ab7c998 100644
--- a/client/src/components/home/cta-section.tsx
+++ b/client/src/components/home/cta-section.tsx
@@ -2,7 +2,7 @@ import { Link } from "wouter";
 
 export function CTASection() {
   return (
-    <section className="py-20 bg-purple text-white">
+    <section className="py-20 text-white" style={{ backgroundColor: '#9D5E9B' }}>
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
         <h2 className="text-3xl md:text-4xl font-playfair font-semibold mb-6">
           Ready to feel stronger, more connected, and at home in your body?
diff --git a/client/src/components/newsletter/newsletter-section.tsx b/client/src/components/newsletter/newsletter-section.tsx
index 466e9c1..53e0541 100644
--- a/client/src/components/newsletter/newsletter-section.tsx
+++ b/client/src/components/newsletter/newsletter-section.tsx
@@ -58,7 +58,7 @@ export function NewsletterSection() {
   };
 
   return (
-    <section className="py-20 bg-rose bg-opacity-10 text-gray-800">
+    <section className="py-20 text-gray-800" style={{ backgroundColor: 'rgba(181, 80, 118, 0.1)' }}>
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="text-center mb-16">
           <h2 className="text-3xl md:text-4xl font-playfair font-semibold mb-4">
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 22ccd6c..1056c68 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -11,6 +11,12 @@ export default {
         sm: "calc(var(--radius) - 4px)",
       },
       colors: {
+        teal: "#0c8991",
+        purple: "#9D5E9B",
+        rose: "#B55076",
+        "teal-light": "rgba(12, 137, 145, 0.1)",
+        "purple-light": "rgba(157, 94, 155, 0.1)",
+        "rose-light": "rgba(181, 80, 118, 0.1)",
         background: "hsl(var(--background))",
         foreground: "hsl(var(--foreground))",
         card: {