diff --git a/app/(routes)/Contact/page.tsx b/app/(routes)/Contact/page.tsx
new file mode 100644
index 0000000..51622e8
--- /dev/null
+++ b/app/(routes)/Contact/page.tsx
@@ -0,0 +1,87 @@
+import React from "react";
+import { Button } from "@/components/ui/button";
+import Header from "@/app/_components/Header";
+
+function Contacts() {
+  return (
+    <>
+      {/* Header */}
+      <div className="flex flex-col items-center">
+        <Header />
+      </div>
+
+      {/* Contact Page */}
+      <section className="relative min-h-screen bg-black px-6 pt-16 pb-24">
+        
+        {/* Background Glow */}
+        <div className="absolute inset-0 -z-10 bg-gradient-to-br from-purple-500/10 via-pink-500/10 to-blue-500/10 blur-3xl" />
+
+        <div className="max-w-5xl mx-auto">
+          
+          {/* Page Title */}
+          <div className="text-center mb-16">
+            <h1 className="font-game text-5xl md:text-6xl text-white font-bold">
+              Contact <span className="text-yellow-400">Us</span>
+            </h1>
+            <p className="mt-4 text-gray-400 text-lg max-w-xl mx-auto">
+              Have a question, feedback, or idea? We’d love to hear from you.
+            </p>
+          </div>
+
+          {/* Contact Card */}
+          <div className="grid md:grid-cols-2 gap-10 rounded-3xl border border-white/10 bg-white/5 backdrop-blur-xl p-10 shadow-2xl">
+            
+            {/* Left Info */}
+            <div className="space-y-6">
+              <h2 className="font-game text-3xl text-white">
+                Let’s Talk 👋
+              </h2>
+
+              <p className="text-gray-300">
+                Reach out for course support, collaboration, or general queries.
+                Our team usually replies within 24 hours.
+              </p>
+
+              <div className="space-y-3 text-gray-300">
+                <p>📧 support@yourplatform.com</p>
+                <p>🌍 Available worldwide</p>
+                <p>⏰ 24/7 Community Support</p>
+              </div>
+            </div>
+
+            {/* Right Form */}
+            <form className="space-y-6">
+              <input
+                type="text"
+                placeholder="Your Name"
+                className="w-full rounded-xl bg-zinc-900 border border-zinc-700 px-4 py-3 text-white font-game focus:outline-none focus:ring-2 focus:ring-yellow-400"
+              />
+
+              <input
+                type="email"
+                placeholder="Your Email"
+                className="w-full rounded-xl bg-zinc-900 border border-zinc-700 px-4 py-3 text-white font-game focus:outline-none focus:ring-2 focus:ring-yellow-400"
+              />
+
+              <textarea
+                rows={5}
+                placeholder="Your Message"
+                className="w-full rounded-xl bg-zinc-900 border border-zinc-700 px-4 py-3 text-white font-game focus:outline-none focus:ring-2 focus:ring-yellow-400"
+              />
+
+              <Button
+                variant="pixel"
+                className="w-full py-6 text-xl font-game"
+              >
+                Send Message 🚀
+              </Button>
+            </form>
+
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}
+
+export default Contacts;
diff --git a/app/(routes)/Projects/page.tsx b/app/(routes)/Projects/page.tsx
new file mode 100644
index 0000000..59d10d9
--- /dev/null
+++ b/app/(routes)/Projects/page.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import CourseList from '../courses/_components/CourseList'
+import Header from '@/app/_components/Header'
+
+function Project() {
+  return (
+    <div>
+         {/* Header */}
+      <div className="flex flex-col items-center">
+        <Header />
+      </div>
+
+        <CourseList/>
+    </div>
+  )
+}
+
+export default Project
\ No newline at end of file
diff --git a/app/(routes)/courses/[courseId]/_components/CourseChapters.tsx b/app/(routes)/courses/[courseId]/_components/CourseChapters.tsx
index 2d53472..f3076f4 100644
--- a/app/(routes)/courses/[courseId]/_components/CourseChapters.tsx
+++ b/app/(routes)/courses/[courseId]/_components/CourseChapters.tsx
@@ -15,6 +15,7 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip"
 import Link from "next/link";
+import { useAuth } from '@clerk/nextjs'
 
 
 
@@ -25,6 +26,9 @@ type Props = {
 
 function CourseChapters({loading,courseDetail}:Props) {
 
+  const {has} = useAuth();
+  const hasUnlimitedAccess = has&&has({ plan: 'unlimited' })
+
 const EnableExercise = (
     chapterIndex: number,
     exerciseIndex: number,
diff --git a/app/(routes)/dashboard/_components/UpgradeToPro.tsx b/app/(routes)/dashboard/_components/UpgradeToPro.tsx
index 8845fa2..2d46d2e 100644
--- a/app/(routes)/dashboard/_components/UpgradeToPro.tsx
+++ b/app/(routes)/dashboard/_components/UpgradeToPro.tsx
@@ -1,11 +1,15 @@
+"use client"
 import React from 'react'
 import Image from "next/image";
 import { Button } from '@/components/ui/button';
 import Link from "next/link";
+import { useAuth } from '@clerk/nextjs';
 
 
 function UpgradeToPro() {
-  return (
+  const {has} = useAuth();
+  const hasUnlimitedAccess = has&&has({ plan: 'unlimited' })
+  return !hasUnlimitedAccess &&(
     <div className='flex items-center flex-col p-5 border-4 rounded-4xl mt-8'>
         <Image src={'/logo.png'} alt='logo' width={70} height={70}/>
         <h2 className='font-game text-3xl'>Upgrade To Pro</h2>
diff --git a/app/(routes)/dashboard/_components/WelcomeBanner.tsx b/app/(routes)/dashboard/_components/WelcomeBanner.tsx
index bec598e..6cfdb92 100644
--- a/app/(routes)/dashboard/_components/WelcomeBanner.tsx
+++ b/app/(routes)/dashboard/_components/WelcomeBanner.tsx
@@ -15,5 +15,4 @@ function WelcomeBanner() {
     </div>
   )
 }
-
 export default WelcomeBanner
diff --git a/app/(routes)/pricing/page.tsx b/app/(routes)/pricing/page.tsx
new file mode 100644
index 0000000..b68c600
--- /dev/null
+++ b/app/(routes)/pricing/page.tsx
@@ -0,0 +1,48 @@
+import { PricingTable } from "@clerk/nextjs";
+import React from "react";
+import Header from "@/app/_components/Header";
+
+function Pricing() {
+  return (
+    <div className="relative min-h-screen overflow-hidden">
+
+      {/* Header */}
+      <div className="flex flex-col items-center">
+        <Header />
+      </div>
+
+      {/* Pricing Section */}
+      <div className="relative py-24 px-4">
+        
+        {/* Gradient background glow */}
+        <div className="absolute inset-0 -z-10 bg-gradient-to-br from-purple-500/20 via-pink-500/20 to-blue-500/20 blur-3xl" />
+
+        <div className="mx-auto max-w-5xl">
+          
+          {/* Title */}
+          <div className="text-center mb-14">
+            <h2 className="font-game text-5xl font-bold tracking-tight bg-gradient-to-r from-purple-400 to-pink-500 bg-clip-text text-transparent">
+              Simple Pricing
+            </h2>
+
+            <p className="mt-4 text-lg text-gray-300 max-w-2xl mx-auto">
+              Join for unlimited access to all features, premium tools, and future updates.
+            </p>
+          </div>
+
+          {/* Pricing Card */}
+          <div className="rounded-3xl border border-white/10 bg-white/5 backdrop-blur-xl p-6 shadow-2xl transition-all hover:shadow-purple-500/20">
+            <PricingTable />
+          </div>
+
+          {/* Footer Note */}
+          <p className="mt-8 text-center text-sm text-gray-400">
+            Cancel anytime · Secure payments · Instant access
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Pricing;
diff --git a/app/_components/Exploremoresection.tsx b/app/_components/Exploremoresection.tsx
new file mode 100644
index 0000000..aca570a
--- /dev/null
+++ b/app/_components/Exploremoresection.tsx
@@ -0,0 +1,24 @@
+import React from 'react'
+import CourseList from '../(routes)/courses/_components/CourseList'
+
+function Exploremoresection() {
+  return (
+    <section className="relative bg-black pt-10 pb-24 px-6">
+      
+      {/* Soft background glow */}
+      <div className="absolute inset-0 -z-10 bg-gradient-to-br from-purple-500/10 via-pink-500/10 to-blue-500/10 blur-3xl" />
+
+      <div className="max-w-7xl mx-auto">
+        
+        {/* Section Heading */}
+        <h2 className="font-game mb-10 text-3xl md:text-4xl text-center text-white">
+          Explore Our <span className="text-yellow-400">Courses</span>
+        </h2>
+
+        <CourseList />
+      </div>
+    </section>
+  )
+}
+
+export default Exploremoresection
diff --git a/app/_components/Header.tsx b/app/_components/Header.tsx
index 0b7aff7..d2000a9 100644
--- a/app/_components/Header.tsx
+++ b/app/_components/Header.tsx
@@ -1,6 +1,7 @@
 "use client";
-import Image from 'next/image'
-import React from 'react'
+
+import Image from "next/image";
+import React, { useEffect, useState } from "react";
 import { Button } from "@/components/ui/button";
 import Link from "next/link";
 
@@ -12,128 +13,108 @@ import {
   NavigationMenuList,
   NavigationMenuTrigger,
 } from "@/components/ui/navigation-menu";
-import { UserButton, useUser } from '@clerk/nextjs';
-
-const courses = [
-  {
-    id: 1,
-    name: 'HTML',
-    desc: 'Learn the fundamentals of HTML and build the structure of modern web pages.',
-    path: '/course/1/detail'
-  },
-  {
-    id: 2,
-    name: 'CSS',
-    desc: 'Master CSS to style and design responsive, visually appealing web layouts.',
-    path: '/course/2/detail'
-  },
-  {
-    id: 3,
-    name: 'React',
-    desc: 'Build dynamic and interactive web applications using the React JavaScript library.',
-    path: '/course/3/detail'
-  },
-  {
-    id: 4,
-    name: 'React Advanced',
-    desc: 'Deep dive into advanced React concepts including hooks, state management, performance optimization, and architectural patterns.',
-    path: '/course/4/detail'
-  },
-  {
-    id: 5,
-    name: 'Python',
-    desc: 'Learn Python programming from basics to intermediate level, covering logic building, functions, and real-world applications.',
-    path: '/course/5/detail'
-  },
-  {
-    id: 6,
-    name: 'Python Advanced',
-    desc: 'Master advanced Python concepts such as OOP, modules, APIs, data processing, and automation.',
-    path: '/course/6/detail'
-  },
-  {
-    id: 7,
-    name: 'Generative AI',
-    desc: 'Explore prompt engineering, LLMs, embeddings, image generation, and build GenAI-powered applications.',
-    path: '/course/7/detail'
-  },
-  {
-    id: 8,
-    name: 'Machine Learning',
-    desc: 'Understand ML concepts, algorithms, data preprocessing, model training, evaluation, and deployment.',
-    path: '/course/8/detail'
-  },
-  {
-    id: 9,
-    name: 'JavaScript',
-    desc: 'Learn core JavaScript concepts, asynchronous programming, DOM manipulation, and modern ES6+ features.',
-    path: '/course/9/detail'
-  }
-];
 
+import { UserButton, useUser } from "@clerk/nextjs";
+import { useParams } from "next/navigation";
+import axios from "axios";
+import { Course } from "../(routes)/courses/_components/CourseList";
 
 
 function Header() {
+  const { user } = useUser();
+  const { exerciseSlug } = useParams();
+
+  // ✅ FIX 1: Course[] (array)
+  const [courses, setCourses] = useState<Course[]>([]);
 
-  const{user}= useUser();
+  useEffect(() => {
+    getCourses();
+  }, []);
+
+  const getCourses = async () => {
+    try {
+      const res = await axios.get("/api/course");
+      setCourses(res.data);
+    } catch (error) {
+      console.error("Failed to fetch courses", error);
+    }
+  };
 
   return (
     <div className="p-4 max-w-7xl mx-auto flex justify-between items-center w-full">
+      {/* Logo */}
       <div className="flex gap-2 items-center">
         <Image src="/logo.png" alt="logo" width={40} height={40} />
         <h2 className="font-bold font-game text-3xl">CodeBox</h2>
       </div>
 
-      <NavigationMenu>
-        <NavigationMenuList className='gap-8'>
+      {/* Navbar */}
+      {!exerciseSlug && courses.length > 0 && (
+        <NavigationMenu>
+          <NavigationMenuList className="gap-8">
+            {/* Courses Dropdown */}
+            <NavigationMenuItem>
+              <NavigationMenuTrigger>Courses</NavigationMenuTrigger>
+              <NavigationMenuContent className="p-4">
+                <ul className="grid grid-cols-2 gap-2 sm:w-[400px] md:w-[500px] lg:w-[600px]">
+                  {courses.map((course) => (
+                    <Link
+                      key={course.id}
+                      href={'/courses/'+course?.courseId}
+                    >
+                      <li className="p-2 hover:bg-accent rounded-xl cursor-pointer">
+                        <h2 className="font-medium">{course.title}</h2>
+                        <p className="text-xs text-gray-500">
+                          {course.desc}
+                        </p>
+                      </li>
+                    </Link>
+                  ))}
+                </ul>
+              </NavigationMenuContent>
+            </NavigationMenuItem>
 
-          {/* Item with dropdown */}
-          <NavigationMenuItem>
-            <NavigationMenuTrigger>Courses</NavigationMenuTrigger>
-            <NavigationMenuContent className="p-4">
+            <NavigationMenuItem>
               <NavigationMenuLink asChild>
-                <ul className='grid grid-cols-2 gap-2 sm:w-[400px] md:lg:w-[500px] lg:w-[600px]'>
-                    {courses.map((course,index)=>(
-                        <div key={index} className='p-2 hover:bg-accent rounded-xl cursor-pointer'>
-                            <h2 className='font-medium'>{course.name}</h2>
-                            <p className='text-xs text-gray-500'>{course.desc}</p>
-                        </div>
-                        ))}
-                </ul>
+                <Link href="/Projects">Projects</Link>
+                
               </NavigationMenuLink>
-            </NavigationMenuContent>
-          </NavigationMenuItem>
+            </NavigationMenuItem>
 
-          {/* Direct link item */}
-          <NavigationMenuItem>
-            <NavigationMenuLink asChild>
-              <Link href="/projects">Projects</Link>
-            </NavigationMenuLink>
-          </NavigationMenuItem>
-          <NavigationMenuItem>
-            <NavigationMenuLink asChild>
-              <Link href="/pricing">Pricing</Link>
-            </NavigationMenuLink>
-          </NavigationMenuItem>
-          <NavigationMenuItem>
-            <NavigationMenuLink asChild>
-              <Link href="/contact">Contact</Link>
-            </NavigationMenuLink>
-          </NavigationMenuItem>
+            <NavigationMenuItem>
+              <NavigationMenuLink asChild>
+                <Link href="/pricing">Pricing</Link>
+              </NavigationMenuLink>
+            </NavigationMenuItem>
 
-        </NavigationMenuList>
-      </NavigationMenu>
+            <NavigationMenuItem>
+              <NavigationMenuLink asChild>
+                <Link href="/Contact">Contact</Link>
+              </NavigationMenuLink>
+            </NavigationMenuItem>
+          </NavigationMenuList>
+        </NavigationMenu>
+      )}
 
-      {!user ?
-      <Link href={'/sign-in'}>
-       <Button className="font-game text-2xl" variant="pixel">Signup</Button>
-       </Link>
-      :<div className='flex gap-4 items-center'>
-        <Button className="font-game text-2xl" variant="pixel">Dashboard</Button>
-        <UserButton/>
-        </div>}
+      {/* Auth Section */}
+      {!user ? (
+        <Link href="/sign-in">
+          <Button className="font-game text-2xl" variant="pixel">
+            Signup
+          </Button>
+        </Link>
+      ) : (
+        <div className="flex gap-4 items-center">
+          <Link href="/dashboard">
+            <Button className="font-game text-2xl" variant="pixel">
+              Dashboard
+            </Button>
+          </Link>
+          <UserButton />
+        </div>
+      )}
     </div>
-  )
+  );
 }
 
 export default Header;
diff --git a/app/_components/Hero.tsx b/app/_components/Hero.tsx
index 651055c..5b6a060 100644
--- a/app/_components/Hero.tsx
+++ b/app/_components/Hero.tsx
@@ -1,24 +1,64 @@
-import React from 'react'
-import Image from 'next/image'
-import { Button } from '@/components/ui/button'
+import React from "react";
+import Image from "next/image";
+import { Button } from "@/components/ui/button";
 import Link from "next/link";
+import Exploremoresection from "./Exploremoresection";
 
 function Hero() {
   return (
-    <div className='w-full relative h-screen overflow-hidden'>
-      <Image src={"/banner.gif"} alt='hero' width={1000} height={1000}
-      className='w-full h-full object-cover absolute inset-0'/>
-      <div className='absolute w-full flex flex-col items-center mt-24'>
-        <h2 className='font-bold text-7xl font-game'>Start Your</h2>
-        <h2 className='font-bold text-7xl font-game text-yellow-400'>Coding Adventure</h2>
-
-        <h2 className='mt-5 font-game text-3xl'> Beginner friendly coding course and Projects </h2>
-        <Link href={'/sign-in'}>
-        <Button className='font-game text-3xl p-6 mt-7' variant={"pixel"}>Get Started</Button>
-        </Link>
+    <>
+      {/* HERO SECTION */}
+      <section className="relative w-full min-h-[85vh] overflow-hidden pb-24">
+        
+        {/* Background Image */}
+        <Image
+          src="/banner.gif"
+          alt="hero"
+          fill
+          priority
+          className="object-cover"
+        />
+
+        {/* Dark Gradient Overlay */}
+        <div className="absolute inset-0 bg-gradient-to-b from-black/70 via-black/50 to-black/90" />
+
+        {/* Hero Content */}
+        <div className="relative z-10 flex flex-col items-center justify-center min-h-[85vh] text-center px-4">
+          
+          <h1 className="font-game font-extrabold text-5xl md:text-7xl lg:text-8xl tracking-tight text-white">
+            Start Your
+          </h1>
+
+          <h1 className="font-game font-extrabold text-5xl md:text-7xl lg:text-8xl tracking-tight text-yellow-400 drop-shadow-[0_0_20px_rgba(250,204,21,0.6)]">
+            Coding Adventure
+          </h1>
+
+          <p className="mt-6 max-w-2xl font-game text-lg md:text-2xl text-gray-200">
+            Beginner-friendly coding courses, real projects, and game-like learning
+          </p>
+
+          <Link href="/sign-in">
+            <Button
+              variant="pixel"
+              className="mt-10 px-10 py-7 text-2xl md:text-3xl font-game transition-transform hover:scale-105"
+            >
+              Get Started
+            </Button>
+          </Link>
+        </div>
+
+        {/* Scroll Hint */}
+        <div className="absolute bottom-8 left-1/2 -translate-x-1/2 text-gray-300 font-game text-sm animate-bounce">
+          ↓ Scroll to explore courses
+        </div>
+      </section>
+
+      {/* COURSE SECTION */}
+      <div className="-mt-28 relative z-20">
+        <Exploremoresection />
       </div>
-    </div>
-  )
+    </>
+  );
 }
 
-export default Hero
\ No newline at end of file
+export default Hero;