diff --git a/src/pages/CourseDetail.tsx b/src/pages/CourseDetail.tsx
index 325155f..7030411 100644
--- a/src/pages/CourseDetail.tsx
+++ b/src/pages/CourseDetail.tsx
@@ -84,7 +84,7 @@ export default function CourseDetailPage() {
           <h2 className="text-2xl sm:text-3xl font-bold mb-8 animate-fade-up">What You'll Learn</h2>
           <div className="grid md:grid-cols-2 gap-4">
             {learningPoints.map((point, i) => (
-              <div key={i} className="flex items-start gap-3 animate-fade-up" style={{ animationDelay: `\${i * 0.06}s` }}>
+              <div key={i} className="flex items-start gap-3 animate-fade-up" style={{ animationDelay: `${i * 0.06}s` }}>
                 <Check className="h-5 w-5 text-indigo-600 dark:text-indigo-400 mt-0.5 shrink-0" />
                 <span>{point}</span>
               </div>
@@ -99,7 +99,7 @@ export default function CourseDetailPage() {
           <h2 className="text-2xl sm:text-3xl font-bold mb-8 animate-fade-up">Course Curriculum</h2>
           <Accordion type="single" collapsible className="space-y-3 max-w-3xl animate-fade-up" style={{ animationDelay: "0.1s" }}>
             {modules.map((m, i) => (
-              <AccordionItem key={i} value={`mod-\${i}`} className="bg-white dark:bg-slate-900 rounded-xl border border-slate-200/60 dark:border-slate-800/60 px-6">
+              <AccordionItem key={i} value={`mod-${i}`} className="bg-white dark:bg-slate-900 rounded-xl border border-slate-200/60 dark:border-slate-800/60 px-6">
                 <AccordionTrigger className="hover:no-underline">
                   <div className="flex items-center gap-3 text-left">
                     <div className="w-8 h-8 rounded-lg bg-indigo-100 dark:bg-indigo-900/40 flex items-center justify-center text-sm font-bold text-indigo-600 dark:text-indigo-400">{i + 1}</div>
@@ -147,7 +147,7 @@ export default function CourseDetailPage() {
           <h2 className="text-2xl sm:text-3xl font-bold mb-8 animate-fade-up">Student Reviews</h2>
           <div className="grid md:grid-cols-3 gap-6">
             {reviews.map((r, i) => (
-              <Card key={i} className="bg-white/70 dark:bg-slate-900/70 backdrop-blur border-slate-200/60 dark:border-slate-800/60 rounded-2xl p-6 animate-fade-up" style={{ animationDelay: `\${i * 0.1}s` }}>
+              <Card key={i} className="bg-white/70 dark:bg-slate-900/70 backdrop-blur border-slate-200/60 dark:border-slate-800/60 rounded-2xl p-6 animate-fade-up" style={{ animationDelay: `${i * 0.1}s` }}>
                 <div className="flex items-center gap-1 mb-3">
                   {Array.from({ length: r.rating }).map((_, j) => (
                     <Star key={j} className="h-4 w-4 fill-amber-400 text-amber-400" />
@@ -167,8 +167,8 @@ export default function CourseDetailPage() {
           <h2 className="text-2xl sm:text-3xl font-bold mb-8 animate-fade-up">Related Courses</h2>
           <div className="grid md:grid-cols-3 gap-6">
             {relatedCourses.map((c, i) => (
-              <Card key={i} className="group bg-white/70 dark:bg-slate-900/70 backdrop-blur border-slate-200/60 dark:border-slate-800/60 rounded-2xl overflow-hidden hover:-translate-y-1 hover:shadow-xl transition-all duration-300 animate-fade-up" style={{ animationDelay: `\${i * 0.1}s` }}>
-                <div className={`h-32 bg-gradient-to-br \${c.gradient} flex items-center justify-center`}>
+              <Card key={i} className="group bg-white/70 dark:bg-slate-900/70 backdrop-blur border-slate-200/60 dark:border-slate-800/60 rounded-2xl overflow-hidden hover:-translate-y-1 hover:shadow-xl transition-all duration-300 animate-fade-up" style={{ animationDelay: `${i * 0.1}s` }}>
+                <div className={`h-32 bg-gradient-to-br ${c.gradient} flex items-center justify-center`}>
                   <BookOpen className="h-10 w-10 text-white/80" />
                 </div>
                 <CardContent className="p-5">