diff --git a/src/pages/Projects.tsx b/src/pages/Projects.tsx
index 550dcf7..155f970 100644
--- a/src/pages/Projects.tsx
+++ b/src/pages/Projects.tsx
@@ -113,7 +113,7 @@ export default function ProjectsPage() {
                   variant={view === "grid" ? "default" : "ghost"}
                   size="sm"
                   onClick={() => setView("grid")}
-                  className={`rounded-none \${view === "grid" ? "bg-violet-600 hover:bg-violet-700 text-white" : ""}`}
+                  className={`rounded-none ${view === "grid" ? "bg-violet-600 hover:bg-violet-700 text-white" : ""}`}
                 >
                   <LayoutGrid className="h-4 w-4" />
                 </Button>
@@ -121,7 +121,7 @@ export default function ProjectsPage() {
                   variant={view === "list" ? "default" : "ghost"}
                   size="sm"
                   onClick={() => setView("list")}
-                  className={`rounded-none \${view === "list" ? "bg-violet-600 hover:bg-violet-700 text-white" : ""}`}
+                  className={`rounded-none ${view === "list" ? "bg-violet-600 hover:bg-violet-700 text-white" : ""}`}
                 >
                   <List className="h-4 w-4" />
                 </Button>
@@ -133,7 +133,7 @@ export default function ProjectsPage() {
           </div>
 
           {/* ── Project Grid ── */}
-          <div className={`grid gap-6 stagger \${view === "grid" ? "grid-cols-1 md:grid-cols-2 xl:grid-cols-3" : "grid-cols-1"}`}>
+          <div className={`grid gap-6 stagger ${view === "grid" ? "grid-cols-1 md:grid-cols-2 xl:grid-cols-3" : "grid-cols-1"}`}>
             {projects.map((project) => (
               <Card key={project.id} className="border-0 shadow-sm backdrop-blur-sm bg-card/80 border-border/50 hover:-translate-y-1 hover:shadow-lg transition-all duration-300 cursor-pointer group animate-fade-up">
                 <CardContent className="p-6">
@@ -144,7 +144,7 @@ export default function ProjectsPage() {
                       </div>
                       <div>
                         <h3 className="font-semibold text-slate-900 group-hover:text-violet-600 transition-colors">{project.title}</h3>
-                        <Badge className={`\${project.statusColor} text-xs font-medium border-0 mt-1`}>{project.status}</Badge>
+                        <Badge className={`${project.statusColor} text-xs font-medium border-0 mt-1`}>{project.status}</Badge>
                       </div>
                     </div>
                     <Button variant="ghost" size="sm" className="h-8 w-8 p-0 text-slate-400 opacity-0 group-hover:opacity-100 transition-opacity">
@@ -168,7 +168,7 @@ export default function ProjectsPage() {
                     <div className="flex -space-x-2">
                       {project.team.map((member, i) => (
                         <Avatar key={i} className="h-7 w-7 border-2 border-white">
-                          <AvatarFallback className={`text-[10px] text-white \${project.teamColors[i]}`}>{member}</AvatarFallback>
+                          <AvatarFallback className={`text-[10px] text-white ${project.teamColors[i]}`}>{member}</AvatarFallback>
                         </Avatar>
                       ))}
                     </div>