diff --git a/client/src/components/community/community-section.tsx b/client/src/components/community/community-section.tsx
index 98cb24a..a24109e 100644
--- a/client/src/components/community/community-section.tsx
+++ b/client/src/components/community/community-section.tsx
@@ -2,7 +2,6 @@ import { useState, useEffect } from "react";
 import { Testimonial } from "./testimonial";
 import { useAuth } from "@/hooks/use-auth";
 import { Link } from "wouter";
-import { ArabicDecoration } from "@/components/ui/arabic-decoration";
 import { Card, CardContent } from "@/components/ui/card";
 import { SectionDivider, SectionDividerBottom, StarDivider } from "@/components/ui/section-divider";
 import { IslamicPattern } from "@/components/ui/section-divider";
@@ -17,21 +16,21 @@ export function CommunitySection() {
       author: "Sarah H.",
       memberSince: "2021",
       initials: "SH",
-      color: "teal",
+      color: "teal" as const,
     },
     {
       quote: "As someone recovering from back surgery, I was hesitant to try Pilates. Fadia's expertise made me feel safe and I've gained strength I never thought possible.",
       author: "Michael K.",
       memberSince: "2022",
       initials: "MK",
-      color: "purple",
+      color: "purple" as const,
     },
     {
       quote: "The community aspect of Pilates with Fadia sets it apart. I've not only improved my physical health but have made wonderful connections with fellow members.",
       author: "Amina L.",
       memberSince: "2020",
       initials: "AL",
-      color: "rose",
+      color: "rose" as const,
     },
   ];
   
@@ -48,76 +47,98 @@ export function CommunitySection() {
   }, [user]);
 
   return (
-    <section id="community" className="py-16 bg-gray-50">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="text-center mb-16">
-          <ArabicDecoration>
-            <h2 className="text-3xl md:text-4xl font-playfair font-bold text-gray-800">Our Community</h2>
-          </ArabicDecoration>
-          <p className="mt-8 max-w-3xl mx-auto text-gray-600">
-            Connect with like-minded individuals on your wellness journey through our digital community board.
-          </p>
-        </div>
+    <section className="relative overflow-hidden">
+      <SectionDivider color="rose" />
+      
+      <div className="relative py-20 bg-rose">
+        <IslamicPattern color="rose" opacity={15} />
         
-        <Card className="rounded-xl overflow-hidden shadow-xl">
-          <div className="border-b border-gray-200 py-4 px-6 bg-gray-50">
-            <h3 className="font-playfair font-semibold text-xl">Community Digital Whiteboard</h3>
+        <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-bold text-white relative inline-block">
+              <span className="relative z-10">Our Community</span>
+              <div className="absolute -bottom-3 left-0 w-full h-1 bg-white opacity-30"></div>
+            </h2>
+            <div className="flex items-center justify-center py-6">
+              <div className="w-1/3 h-px bg-white opacity-30"></div>
+              <div className="mx-4">
+                <svg width="40" height="40" viewBox="0 0 100 100">
+                  <polygon
+                    points="50,10 61,35 90,35 65,55 75,80 50,65 25,80 35,55 10,35 39,35"
+                    fill="#FFFFFF"
+                    fillOpacity="0.8"
+                  />
+                </svg>
+              </div>
+              <div className="w-1/3 h-px bg-white opacity-30"></div>
+            </div>
+            <p className="mt-6 max-w-3xl mx-auto text-white text-opacity-90">
+              Connect with like-minded individuals on your wellness journey through our digital community board.
+            </p>
           </div>
           
-          <CardContent className="p-0">
-            <div className="h-96 bg-gray-100 flex items-center justify-center">
-              {user ? (
-                iframeLoaded ? (
-                  <iframe 
-                    src="https://miro.com/app/board/uXjVKEqwAH8=/"
-                    title="Community Whiteboard"
-                    className="w-full h-full border-0"
-                  />
+          <Card className="rounded-xl overflow-hidden shadow-xl">
+            <div className="border-b border-gray-200 py-4 px-6 bg-gray-50">
+              <h3 className="font-playfair font-semibold text-xl">Community Digital Whiteboard</h3>
+            </div>
+            
+            <CardContent className="p-0">
+              <div className="h-96 bg-gray-100 flex items-center justify-center">
+                {user ? (
+                  iframeLoaded ? (
+                    <iframe 
+                      src="https://miro.com/app/board/uXjVKEqwAH8=/"
+                      title="Community Whiteboard"
+                      className="w-full h-full border-0"
+                    />
+                  ) : (
+                    <div className="text-center">
+                      <i className="fas fa-spinner fa-spin text-5xl text-gray-400 mb-4"></i>
+                      <p className="text-gray-500">Loading whiteboard content...</p>
+                    </div>
+                  )
                 ) : (
                   <div className="text-center">
-                    <i className="fas fa-spinner fa-spin text-5xl text-gray-400 mb-4"></i>
-                    <p className="text-gray-500">Loading whiteboard content...</p>
+                    <i className="fas fa-chalkboard text-5xl text-gray-400 mb-4"></i>
+                    <p className="text-gray-500">
+                      Digital whiteboard content will be available after login
+                    </p>
+                    <p className="text-sm text-gray-400 mt-2">
+                      <i className="fas fa-info-circle mr-1"></i> Please sign in to access community features
+                    </p>
                   </div>
-                )
-              ) : (
-                <div className="text-center">
-                  <i className="fas fa-chalkboard text-5xl text-gray-400 mb-4"></i>
-                  <p className="text-gray-500">
-                    Digital whiteboard content will be available after login
-                  </p>
-                  <p className="text-sm text-gray-400 mt-2">
-                    <i className="fas fa-info-circle mr-1"></i> Please sign in to access community features
-                  </p>
-                </div>
-              )}
-            </div>
-          </CardContent>
-          
-          <div className="p-6 border-t border-gray-200">
-            <div className="flex flex-col md:flex-row items-center justify-between">
-              <div className="mb-4 md:mb-0">
-                <h4 className="font-playfair font-medium text-lg mb-1">Join Our Community</h4>
-                <p className="text-gray-600 text-sm">Share your journey, ask questions, and connect with others.</p>
+                )}
+              </div>
+            </CardContent>
+            
+            <div className="p-6 border-t border-gray-200">
+              <div className="flex flex-col md:flex-row items-center justify-between">
+                <div className="mb-4 md:mb-0">
+                  <h4 className="font-playfair font-medium text-lg mb-1">Join Our Community</h4>
+                  <p className="text-gray-600 text-sm">Share your journey, ask questions, and connect with others.</p>
+                </div>
+                {!user && (
+                  <Link href="/auth">
+                    <span className="bg-rose text-white font-medium py-2 px-6 rounded-full hover:bg-opacity-90 transition duration-300 cursor-pointer">
+                      Sign Up to Participate
+                    </span>
+                  </Link>
+                )}
               </div>
-              {!user && (
-                <Link href="/auth">
-                  <a className="bg-purple text-white font-medium py-2 px-6 rounded-full hover:bg-opacity-90 transition duration-300">
-                    Sign Up to Participate
-                  </a>
-                </Link>
-              )}
             </div>
-          </div>
-        </Card>
-        
-        <div className="mt-16">
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-            {testimonials.map((testimonial, index) => (
-              <Testimonial key={index} {...testimonial} />
-            ))}
+          </Card>
+          
+          <div className="mt-16">
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+              {testimonials.map((testimonial, index) => (
+                <Testimonial key={index} {...testimonial} />
+              ))}
+            </div>
           </div>
         </div>
       </div>
+      
+      <SectionDividerBottom color="rose" />
     </section>
   );
-}
+}
\ No newline at end of file
diff --git a/client/src/components/community/testimonial.tsx b/client/src/components/community/testimonial.tsx
index 012b360..660a2d5 100644
--- a/client/src/components/community/testimonial.tsx
+++ b/client/src/components/community/testimonial.tsx
@@ -26,19 +26,30 @@ export function Testimonial({ quote, author, memberSince, initials, color }: Tes
   };
 
   return (
-    <div className="bg-white p-6 rounded-lg shadow-md relative">
-      <div className="absolute top-0 right-0 transform translate-x-2 -translate-y-2 text-4xl">
-        <i className={`fas fa-quote-right ${colorClasses[color].opacity}`}></i>
+    <div className="bg-white p-6 rounded-lg shadow-lg relative overflow-hidden">
+      <div className="absolute -top-4 -right-4 w-16 h-16 opacity-10">
+        <svg viewBox="0 0 100 100" className="w-full h-full">
+          <path 
+            d="M95,30 L85,10 C80,0 65,0 60,10 L50,30 L40,10 C35,0 20,0 15,10 L5,30 C0,40 5,50 15,55 L50,70 L85,55 C95,50 100,40 95,30z" 
+            fill={color === "teal" ? "#0c8991" : color === "purple" ? "#9D5E9B" : "#B55076"} 
+          />
+        </svg>
       </div>
-      <p className="text-gray-600 mb-4 italic">
+      
+      <div className="mb-6 text-right">
+        <i className={`fas fa-quote-right text-4xl ${colorClasses[color].opacity}`}></i>
+      </div>
+      
+      <p className="text-gray-700 mb-6 italic relative z-10 font-raleway">
         "{quote}"
       </p>
-      <div className="flex items-center">
-        <div className={`w-10 h-10 ${colorClasses[color].bg} rounded-full flex items-center justify-center mr-3`}>
+      
+      <div className="flex items-center border-t pt-4 border-gray-100">
+        <div className={`w-12 h-12 rounded-full flex items-center justify-center mr-3 bg-white border-2 ${color === "teal" ? "border-teal" : color === "purple" ? "border-purple" : "border-rose"}`}>
           <span className={`${colorClasses[color].text} font-semibold`}>{initials}</span>
         </div>
         <div>
-          <h5 className="font-medium">{author}</h5>
+          <h5 className="font-playfair font-medium">{author}</h5>
           <p className="text-sm text-gray-500">Member since {memberSince}</p>
         </div>
       </div>
diff --git a/client/src/components/newsletter/newsletter-section.tsx b/client/src/components/newsletter/newsletter-section.tsx
index 7380482..52bbd5c 100644
--- a/client/src/components/newsletter/newsletter-section.tsx
+++ b/client/src/components/newsletter/newsletter-section.tsx
@@ -4,6 +4,8 @@ import { apiRequest } from "@/lib/queryClient";
 import { insertNewsletterSchema } from "@shared/schema";
 import { useToast } from "@/hooks/use-toast";
 import { Loader2 } from "lucide-react";
+import { SectionDivider, SectionDividerBottom, CrescentDivider } from "@/components/ui/section-divider";
+import { IslamicPattern } from "@/components/ui/section-divider";
 
 export function NewsletterSection() {
   const { toast } = useToast();
@@ -58,81 +60,108 @@ export function NewsletterSection() {
   };
 
   return (
-    <section className="py-16 bg-teal text-white">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="flex flex-col md:flex-row items-center justify-between">
-          <div className="md:w-1/2 mb-8 md:mb-0 md:pr-10">
-            <h2 className="text-3xl font-playfair font-bold mb-4">Join Our Newsletter</h2>
-            <p className="text-teal-100 mb-4">
-              Stay updated with wellness tips, special class offerings, and community events. We promise to respect your inbox.
-            </p>
-            
-            <form className="mt-6" onSubmit={handleSubmit}>
-              <div className="flex flex-col sm:flex-row gap-4">
-                <input 
-                  type="email" 
-                  placeholder="Your email address" 
-                  className="px-4 py-3 rounded-md bg-white bg-opacity-20 border border-teal-300 placeholder-teal-100 text-white focus:outline-none focus:border-white w-full sm:w-auto flex-grow"
-                  value={email}
-                  onChange={(e) => setEmail(e.target.value)}
-                  required
-                />
-                <button 
-                  type="submit" 
-                  className="px-6 py-3 bg-white text-teal font-medium rounded-md hover:bg-opacity-90 transition duration-300 flex items-center justify-center"
-                  disabled={newsletterMutation.isPending}
-                >
-                  {newsletterMutation.isPending ? (
-                    <>
-                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                      Subscribing...
-                    </>
-                  ) : (
-                    "Subscribe"
-                  )}
-                </button>
-              </div>
-              <div className="mt-3">
-                <label className="inline-flex items-center cursor-pointer">
-                  <input 
-                    type="checkbox" 
-                    className="form-checkbox h-4 w-4 bg-white border-teal-300 text-white"
-                    checked={agreedToTerms}
-                    onChange={(e) => setAgreedToTerms(e.target.checked)}
-                    required
+    <section className="relative overflow-hidden">
+      <SectionDivider color="teal" />
+      
+      <div className="relative py-20 bg-teal text-white">
+        <IslamicPattern color="teal" opacity={10} />
+        
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-12">
+            <h2 className="text-3xl md:text-4xl font-playfair font-bold text-white relative inline-block">
+              <span className="relative z-10">Join Our Newsletter</span>
+              <div className="absolute -bottom-3 left-0 w-full h-1 bg-white opacity-30"></div>
+            </h2>
+            <div className="flex items-center justify-center py-6">
+              <div className="w-1/3 h-px bg-white opacity-30"></div>
+              <div className="mx-4">
+                <svg width="40" height="40" viewBox="0 0 100 100">
+                  <path
+                    d="M50,10 A40,40 0 0 1 50,90 A40,40 0 0 1 50,10 A30,30 0 0 0 50,70 A30,30 0 0 0 50,10"
+                    fill="#FFFFFF"
+                    fillOpacity="0.8"
                   />
-                  <span className="ml-2 text-sm text-teal-100">I agree to receive emails from Pilates with Fadia</span>
-                </label>
+                  <circle cx="60" cy="40" r="5" fill="#0c8991" />
+                </svg>
               </div>
-            </form>
+              <div className="w-1/3 h-px bg-white opacity-30"></div>
+            </div>
+            <p className="mt-4 max-w-2xl mx-auto text-white text-opacity-90">
+              Stay updated with wellness tips, special class offerings, and community events
+            </p>
           </div>
           
-          <div className="md:w-1/2">
-            <div className="grid grid-cols-2 gap-4">
-              <img 
-                src="https://images.unsplash.com/photo-1518611012118-696072aa579a?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&h=300" 
-                alt="Peaceful pilates studio" 
-                className="rounded-lg shadow-lg" 
-              />
-              <img 
-                src="https://images.unsplash.com/photo-1599901860904-17e6ed7083a0?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&h=300" 
-                alt="Group pilates session" 
-                className="rounded-lg shadow-lg" 
-              />
-              <img 
-                src="https://images.unsplash.com/photo-1518310383802-640c2de311b2?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&h=300" 
-                alt="Pilates equipment detail" 
-                className="rounded-lg shadow-lg" 
-              />
-              <img 
-                src="https://images.unsplash.com/photo-1519167758481-83f550bb49b3?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&h=300" 
-                alt="Wellness space with cultural elements" 
-                className="rounded-lg shadow-lg" 
-              />
+          <div className="flex flex-col md:flex-row items-center justify-between bg-white/10 p-8 rounded-lg">
+            <div className="md:w-1/2 mb-8 md:mb-0 md:pr-10">
+              <form className="mt-6" onSubmit={handleSubmit}>
+                <div className="flex flex-col sm:flex-row gap-4">
+                  <input 
+                    type="email" 
+                    placeholder="Your email address" 
+                    className="px-4 py-3 rounded-md bg-white bg-opacity-20 border border-teal-300 placeholder-teal-100 text-white focus:outline-none focus:border-white w-full sm:w-auto flex-grow"
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                    required
+                  />
+                  <button 
+                    type="submit" 
+                    className="px-6 py-3 bg-white text-teal font-medium rounded-md hover:bg-opacity-90 transition duration-300 flex items-center justify-center"
+                    disabled={newsletterMutation.isPending}
+                  >
+                    {newsletterMutation.isPending ? (
+                      <>
+                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                        Subscribing...
+                      </>
+                    ) : (
+                      "Subscribe"
+                    )}
+                  </button>
+                </div>
+                <div className="mt-3">
+                  <label className="inline-flex items-center cursor-pointer">
+                    <input 
+                      type="checkbox" 
+                      className="form-checkbox h-4 w-4 bg-white border-teal-300 text-white"
+                      checked={agreedToTerms}
+                      onChange={(e) => setAgreedToTerms(e.target.checked)}
+                      required
+                    />
+                    <span className="ml-2 text-sm text-teal-100">I agree to receive emails from Pilates with Fadia</span>
+                  </label>
+                </div>
+              </form>
+            </div>
+            
+            <div className="md:w-1/2">
+              <div className="grid grid-cols-2 gap-4">
+                <img 
+                  src="https://images.unsplash.com/photo-1518611012118-696072aa579a?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&h=300" 
+                  alt="Peaceful pilates studio" 
+                  className="rounded-lg shadow-lg" 
+                />
+                <img 
+                  src="https://images.unsplash.com/photo-1599901860904-17e6ed7083a0?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&h=300" 
+                  alt="Group pilates session" 
+                  className="rounded-lg shadow-lg" 
+                />
+                <img 
+                  src="https://images.unsplash.com/photo-1518310383802-640c2de311b2?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&h=300" 
+                  alt="Pilates equipment detail" 
+                  className="rounded-lg shadow-lg" 
+                />
+                <img 
+                  src="https://images.unsplash.com/photo-1519167758481-83f550bb49b3?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&h=300" 
+                  alt="Wellness space with cultural elements" 
+                  className="rounded-lg shadow-lg" 
+                />
+              </div>
             </div>
           </div>
         </div>
       </div>
+      
+      <SectionDividerBottom color="teal" />
     </section>
   );
-}
+}
\ No newline at end of file