diff --git a/asstes/css/style.css b/asstes/css/style.css
index faa3e03..020b8c0 100644
--- a/asstes/css/style.css
+++ b/asstes/css/style.css
@@ -1,10 +1,151 @@
  :root {
      --primary-color: #16a34a;
      --primary-hover: #15803d;
+     --primary: #6f5bf3;
+     --gray: #e5e7eb;
+     --text: #111827;
  }
 
+ 
+
+
+
  body {
+     font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+     background: #f9fafb;
+     display: flex;
+     justify-content: center;
+     padding: 40px;
      background-color: #f3f4f6;
+
+ }
+
+ .card {
+     background: #fff;
+     width: 100%;
+     /* max-width: 900px; */
+     border-radius: 24px;
+     padding: 40px;
+     box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
+     margin-bottom: 40px;
+ }
+.card.card1{
+    padding: 0px;
+}
+ h1 {
+     text-align: center;
+     margin-bottom: 8px;
+ }
+
+ .subtitle {
+     text-align: center;
+     color: #555;
+     margin-bottom: 40px;
+ }
+
+ .stepper {
+     display: flex;
+     align-items: center;
+     margin-bottom: 40px;
+ }
+
+ .step {
+     display: flex;
+     align-items: center;
+     flex: 1;
+ }
+
+ .circle {
+     width: 20px;
+     height: 20px;
+     border-radius: 5px;
+     border: 2px solid var(--gray);
+     display: flex;
+     align-items: center;
+     justify-content: center;
+     font-weight: 600;
+     background: #fff;
+     color: #999;
+     font-size: 13px;
+     transition: all .3s ease;
+ }
+
+ .circle.active,
+ .circle.completed {
+     border-color: var(--primary);
+     background: var(--primary);
+     color: #fff;
+ }
+
+ .line {
+     height: 4px;
+     flex: 1;
+     background: var(--gray);
+     /* margin: 0 8px; */
+     /* border-radius: 2px; */
+     overflow: hidden;
+ }
+
+ .line-fill {
+     height: 100%;
+     width: 0%;
+     background: var(--primary);
+     transition: width .4s ease;
+ }
+
+ .question {
+     font-size: 18px;
+     margin-bottom: 16px;
+ }
+
+ select {
+     width: 100%;
+     padding: 14px;
+     border-radius: 12px;
+     border: 1px solid #d1d5db;
+     font-size: 16px;
+     background-position: right 16px center;
+ }
+
+ select {
+     width: 100%;
+     padding: 14px 48px 14px 14px;
+     border-radius: 12px;
+     border: 1px solid #d1d5db;
+     font-size: 16px;
+
+     appearance: none;
+     -webkit-appearance: none;
+     -moz-appearance: none;
+
+     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+     background-repeat: no-repeat;
+     background-position: right 16px center;
+     background-size: 14px;
+ }
+
+ .actions {
+     display: flex;
+     justify-content: flex-end;
+     margin-top: 40px;
+ }
+
+ button {
+     padding: 14px 28px;
+     border-radius: 999px;
+     border: none;
+     font-size: 14px;
+     font-weight: 600;
+     letter-spacing: .2em;
+     cursor: not-allowed;
+     background: #c7c3fa;
+     color: #fff;
+     transition: background .3s ease;
+ }
+
+ button.enabled {
+     background: var(--primary);
+     cursor: pointer;
  }
 
  /* Primary buttons */
@@ -13,22 +154,23 @@
      color: #ffffff;
      border: none;
  }
-.tab-link {
-    text-decoration: none;
-    color: #6c757d;
-    border-radius: 0.375rem 0.375rem 0 0;
-    cursor: pointer;
-}
 
-.tab-link:hover {
-    color: inherit;
-    /* background: transparent; */
-}
+ .tab-link {
+     text-decoration: none;
+     color: #6c757d;
+     border-radius: 0.375rem 0.375rem 0 0;
+     cursor: pointer;
+ }
 
-.tab-active {
-    background-color: var(--primary-color);
-    color: #fff !important;
-}
+ .tab-link:hover {
+     color: inherit;
+     /* background: transparent; */
+ }
+
+ .tab-active {
+     background-color: var(--primary-color);
+     color: #fff !important;
+ }
 
  .btn-primary-custom:hover {
      background-color: var(--primary-hover);
@@ -64,4 +206,27 @@
 
  .rounded-xl {
      border-radius: 0.75rem;
+ }
+
+ select:focus,
+ .form-select:focus,
+ input:focus,
+ textarea:focus {
+     outline: none;
+     /* removes default blue border */
+     box-shadow: none;
+     /* removes focus shadow */
+     border-color: #ced4da;
+     /* optional: reset to normal border color */
+ }
+
+ .list {
+     display: flex;
+     list-style: none;
+ }
+
+ @media(max-width:576px) {
+     .intake {
+         margin-bottom: 12px;
+     }
  }
\ No newline at end of file
diff --git a/course-detail.html b/course-detail.html
new file mode 100644
index 0000000..4f04e88
--- /dev/null
+++ b/course-detail.html
@@ -0,0 +1,330 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <title>Course Finder</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="./asstes/css/style.css">
+</head>
+
+<body>
+
+    <section class="container py-4 py-lg-5">
+        <div class="row g-4">
+            <!-- COURSE FINDER TITLE -->
+            <div class="mb-4 text-center">
+                <h3 class="fw-bold mb-2">
+                    Find the Right Course for Your Future
+                </h3>
+                <p class="text-muted mb-0">
+                    Find and compare international courses that match your academic goals.
+                </p>
+
+            </div>
+
+            <div class="col-lg-9">
+
+                <!-- BIT COURSE DETAIL CARD -->
+                <div class="card border-0 shadow rounded-4 overflow-hidden mb-4">
+
+                    <!-- HEADER -->
+                    <div class="bg-dark text-white p-4">
+                        <h4 class="mb-1 fw-bold">
+                            Bachelor of Information Technology (BIT)
+                        </h4>
+                        <p class="mb-0 small text-light">
+                            Full-time · Undergraduate · STEM Program
+                        </p>
+                    </div>
+
+                    <!-- BODY -->
+                    <div class="p-4">
+                        <div class="row g-4 align-items-center">
+
+                            <!-- UNIVERSITY INFO -->
+                            <div class="col-md-4 text-center">
+                                <img src="./asstes/image/image.png" class="img-fluid mb-3" style="max-height:70px"
+                                    alt="University Logo">
+
+                                <h6 class="fw-semibold mb-1">
+                                    XYZ University
+                                    <span class="text-danger">(Australia)</span>
+                                </h6>
+
+                                <ul class="list-unstyled small bg-light rounded-3 p-3 mt-3">
+                                    <li><strong>Course Code:</strong> BIT</li>
+                                    <li><strong>Level:</strong> Bachelor</li>
+                                    <li><strong>Duration:</strong> 3 Years</li>
+                                    <li><strong>Intake:</strong> Feb / July</li>
+                                </ul>
+                            </div>
+
+                            <!-- ENGLISH REQUIREMENTS -->
+                            <div class="col-md-4">
+                                <h6 class="fw-semibold mb-3">English Requirements</h6>
+
+                                <div class="d-grid gap-2">
+                                    <div class="d-flex justify-content-between bg-light rounded-pill px-3 py-2">
+                                        <span>IELTS</span>
+                                        <span class="badge bg-dark">6.0 (5.5)</span>
+                                    </div>
+
+                                    <div class="d-flex justify-content-between bg-light rounded-pill px-3 py-2">
+                                        <span>PTE</span>
+                                        <span class="badge bg-dark">50 Overall</span>
+                                    </div>
+
+                                    <div class="d-flex justify-content-between bg-light rounded-pill px-3 py-2">
+                                        <span>Duolingo</span>
+                                        <span class="badge bg-dark">95 Overall</span>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- FEES -->
+                            <div class="col-md-4">
+                                <div class="border rounded-3 p-3 bg-light">
+                                    <div class="small text-muted">Annual Tuition Fee</div>
+                                    <div class="fw-bold fs-5">$32,000</div>
+
+                                    <hr class="my-2">
+
+                                    <div class="small text-muted">Scholarship Available</div>
+                                    <div class="fw-semibold text-success">
+                                        Up to $10,000
+                                    </div>
+                                </div>
+                            </div>
+
+                        </div>
+                    </div>
+
+                    <!-- FOOTER -->
+                    <div class="bg-light px-4 py-3 d-flex justify-content-between align-items-center">
+                        <div>
+                            <span class="fw-semibold me-2">Career Outcomes:</span>
+                            <span class="badge bg-primary p-2 me-1">Software Developer</span>
+                            <span class="badge bg-primary p-2 me-1">IT Analyst</span>
+                            <span class="badge bg-primary p-2">System Engineer</span>
+                        </div>
+
+                        <button class="btn btn-dark px-4">
+                            Apply Now
+                        </button>
+                    </div>
+
+                </div>
+
+                <!-- COURSE DESCRIPTION -->
+                <div class="card border-0 shadow rounded-4 p-4">
+                    <h5 class="fw-bold mb-3">Course Description</h5>
+
+                    <p class="text-muted">
+                        The <strong>Bachelor of Information Technology (BIT)</strong> is designed to equip
+                        students with strong theoretical knowledge and practical skills in modern
+                        information technology systems. The program focuses on software development,
+                        database systems, networking, cybersecurity, and cloud computing.
+                    </p>
+
+                    <p class="text-muted">
+                        Throughout the course, students gain hands-on experience using industry-standard
+                        tools and technologies while working on real-world projects. The curriculum is
+                        aligned with current industry demands, ensuring graduates are job-ready and capable
+                        of adapting to rapidly evolving IT environments.
+                    </p>
+
+                    <p class="text-muted mb-0">
+                        Graduates of the BIT program can pursue careers as software developers, systems
+                        analysts, network engineers, cybersecurity specialists, and IT consultants, or
+                        continue their studies at the postgraduate level.
+                    </p>
+                </div>
+
+            </div>
+
+
+
+            <aside class="col-lg-3">
+                <div class="sticky-box d-flex flex-column gap-4">
+
+                    <div class="bg-white rounded-xl shadow-sm p-3">
+                        <div class="d-flex border-bottom tab-nav">
+                            <a href="javascript:void(0)"
+                                class="tab-link flex-fill text-center py-2 fw-semibold tab-active"
+                                onclick="showTab('exclusive', this)">Exclusive Courses</a>
+                            <a href="javascript:void(0)"
+                                class="tab-link flex-fill text-center py-2 fw-semibold text-secondary"
+                                onclick="showTab('top', this)">Top Colleges</a>
+
+                        </div>
+
+                        <div id="exclusive" class="mt-3">
+                            <ul class="list-group list-group-flush small">
+                                <li class="list-group-item">MBA in Defence</li>
+                                <li class="list-group-item">PG Diploma in Branch Banking</li>
+                                <li class="list-group-item">Global Finance and Accounting</li>
+                                <li class="list-group-item">Career courses in 2D & 3D Animation</li>
+                                <li class="list-group-item">IFBI PGDBO</li>
+                                <li class="list-group-item">Courses Programs - IFBI</li>
+                                <li class="list-group-item">Alpha Courses</li>
+                                <li class="list-group-item">Nutrition Courses</li>
+                                <li class="list-group-item">IFBI Media</li>
+                                <li class="list-group-item text-center bg-light fw-medium">See All</li>
+                            </ul>
+                        </div>
+
+                        <div id="top" class="mt-3 d-none">
+                            <ul class="list-group list-group-flush small">
+                                <li class="list-group-item">Top College 1</li>
+                                <li class="list-group-item">Top College 2</li>
+                                <li class="list-group-item">Top College 3</li>
+                                <li class="list-group-item">Top College 4</li>
+                                <li class="list-group-item">Top College 5</li>
+                            </ul>
+                        </div>
+                    </div>
+
+
+                    <div class="bg-primary bg-opacity-10 rounded-xl shadow-sm p-3">
+                        <h6 class="text-center fw-semibold mb-3">Get Your Free Counselling!</h6>
+                        <form class="d-grid gap-2">
+                            <input type="text" class="form-control" placeholder="Full Name" required>
+                            <input type="tel" class="form-control" placeholder="Phone" required>
+                            <input type="email" class="form-control" placeholder="Email" required>
+                            <textarea class="form-control" rows="3" placeholder="Message"></textarea>
+                            <button class="btn btn-primary-custom fw-semibold">Submit</button>
+                        </form>
+                    </div>
+
+                </div>
+            </aside>
+
+        </div>
+    </section>
+
+    <script>
+        const steps = [
+            { q: 'How proficient are you with visual design?', options: ['Beginner', 'Intermediate', 'Advanced'] },
+            { q: 'Do you have UX research experience?', options: ['None', 'Some', 'A lot'] },
+            { q: 'What is your career goal?', options: ['Student', 'Career switcher', 'Professional upskilling'] },
+            { q: 'Preferred learning format?', options: ['Online', 'Hybrid', 'In-person'] },
+            { q: 'How soon do you want to start?', options: ['Immediately', '1–3 months', 'Later'] },
+            { q: 'What is your budget range?', options: ['Free', '$$', '$$$'] }
+        ];
+
+        const stepper = document.getElementById('stepper');
+        const question = document.getElementById('question');
+        const select = document.getElementById('select');
+        const button = document.getElementById('next');
+
+        let current = 0;
+        const answers = [];
+
+        function renderStepper() {
+            stepper.innerHTML = '';
+
+            steps.forEach((_, i) => {
+                const step = document.createElement('div');
+                step.className = 'step';
+
+                const circle = document.createElement('div');
+                circle.className = 'circle';
+                circle.textContent = i + 1;
+
+                if (i === current) circle.classList.add('active');
+                if (i < current) circle.classList.add('completed');
+
+                step.appendChild(circle);
+
+                if (i < steps.length - 1) {
+                    const line = document.createElement('div');
+                    line.className = 'line';
+
+                    const fill = document.createElement('div');
+                    fill.className = 'line-fill';
+
+                    // ✅ Animate fill correctly
+                    fill.style.width = i < current ? '100%' : '0%';
+
+                    line.appendChild(fill);
+                    step.appendChild(line);
+                }
+
+                stepper.appendChild(step);
+            });
+        }
+
+        function renderStep() {
+            renderStepper();
+            question.textContent = steps[current].q;
+
+            select.innerHTML = '<option value="">– Select –</option>';
+            steps[current].options.forEach(opt => {
+                const o = document.createElement('option');
+                o.value = opt;
+                o.textContent = opt;
+                select.appendChild(o);
+            });
+
+            // ✅ SEARCH on last (6th) question
+            button.textContent =
+                current === steps.length - 1 ? 'SEARCH' : 'NEXT';
+
+            button.disabled = true;
+            button.classList.remove('enabled');
+        }
+
+        select.addEventListener('change', () => {
+            if (select.value) {
+                button.disabled = false;
+                button.classList.add('enabled');
+            }
+        });
+
+        button.addEventListener('click', () => {
+            if (!select.value) return;
+
+            answers[current] = select.value;
+
+            // 🔍 Final search action
+            if (current === steps.length - 1) {
+                alert('Searching courses with:\n' + JSON.stringify(answers, null, 2));
+                return;
+            }
+
+            current++;
+            renderStep();
+        });
+
+        renderStep();
+    </script>
+    <script>
+        function showTab(tabId, element) {
+            // Hide all tab content
+            document.getElementById('exclusive').classList.add('d-none');
+            document.getElementById('top').classList.add('d-none');
+
+            // Show selected tab content
+            document.getElementById(tabId).classList.remove('d-none');
+
+            // Remove active class from all tabs
+            const tabs = document.querySelectorAll('.tab-link');
+            tabs.forEach(tab => {
+                tab.classList.remove('tab-active');
+                tab.classList.add('text-secondary');
+            });
+
+            // Add active class to clicked tab
+            element.classList.add('tab-active');
+            element.classList.remove('text-secondary');
+        }
+
+    </script>
+
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/coursefinder.html b/coursefinder.html
index f4f128b..757ddae 100644
--- a/coursefinder.html
+++ b/coursefinder.html
@@ -26,6 +26,23 @@
             </div>
 
             <div class="col-lg-9">
+                <div class="card">
+                    <h1>Find The Right Design Course For You</h1>
+                    <p class="subtitle">Answer a few questions to get personalized recommendations</p>
+
+                    <div class="stepper" id="stepper"></div>
+
+                    <div class="question" id="question"></div>
+                    <select id="select">
+                        <option value="">– Select –</option>
+                    </select>
+                    <input id="textInput" type="text" placeholder=""
+                        style="display:none; width:100%; padding:14px; border-radius:12px; border:1px solid #d1d5db; font-size:16px;" />
+
+                    <div class="actions">
+                        <button id="next">NEXT</button>
+                    </div>
+                </div>
 
                 <div class="bg-white p-4 rounded-xl shadow-sm mb-4">
                     <div class="row g-3">
@@ -71,7 +88,7 @@
 
 
                 <div class="container my-4">
-                    <div class="card border-0 shadow rounded-4 overflow-hidden">
+                    <div class="card card1 border-0 shadow rounded-4 overflow-hidden">
 
 
                         <div class="bg-dark text-white p-3">
@@ -92,9 +109,25 @@
                                         <span class="text-danger">(USA)</span>
                                     </div>
 
-                                    <div class="small text-muted mt-1">
-                                        Code: BArch • Bachelor • N/A
+                                    <div class="small text-muted mt-1 course-info">
+                                        <ul class="list bg-light">
+                                            <li>
+                                                <span class="course-label"><strong>Code:</strong> BArch</span>
+
+                                            </li>
+                                            <li>
+                                                <span class="course-label"><strong>Level:</strong> Bachelor</span>
+
+                                            </li>
+                                            <li>
+                                                <span class="course-label"><strong>Duration:</strong> N/A</span>
+
+                                            </li>
+                                        </ul>
+
+
                                     </div>
+
                                 </div>
 
                                 <div class="col-md-4">
@@ -136,13 +169,13 @@
                         </div>
 
                         <div class="bg-light px-4 py-3 d-flex flex-wrap align-items-center justify-content-between">
-                            <div>
+                            <div class="intake">
                                 <span class="fw-semibold me-2">Intake:</span>
                                 <span class="badge bg-primary me-1 p-2">January</span>
                                 <span class="badge bg-primary p-2">January</span>
                             </div>
 
-                            <button class="btn btn-dark btn-sm px-4 rounded-pill">
+                            <button class="btn btn-dark btn-sm px-4">
                                 View Details
                             </button>
                         </div>
@@ -210,6 +243,120 @@
         </div>
     </section>
 
+    <script>
+        const steps = [
+            { q: 'How proficient are you with visual design?', type: 'select', options: ['Beginner', 'Intermediate', 'Advanced'] },
+            { q: 'Do you have UX research experience?', type: 'select', options: ['None', 'Some', 'A lot'] },
+            { q: 'What is your career goal?', type: 'select', options: ['Student', 'Career switcher', 'Professional upskilling'] },
+            { q: 'Preferred learning format?', type: 'select', options: ['Online', 'Hybrid', 'In-person'] },
+            { q: 'Preferred learning course?', type: 'select', options: ['Online', 'Hybrid', 'In-person'] },
+
+            { q: 'What is your budget range?', type: 'input', placeholder: 'Enter your budget' },
+            { q: 'Preferred learning format?', type: 'select', options: ['Online', 'Hybrid', 'In-person'] }
+
+        ];
+
+        const stepper = document.getElementById('stepper');
+        const question = document.getElementById('question');
+        const select = document.getElementById('select');
+        const input = document.getElementById('textInput');
+        const button = document.getElementById('next');
+
+        let current = 0;
+        const answers = [];
+
+        function renderStepper() {
+            stepper.innerHTML = '';
+            steps.forEach((_, i) => {
+                const step = document.createElement('div');
+                step.className = 'step';
+
+                const circle = document.createElement('div');
+                circle.className = 'circle';
+                circle.textContent = i + 1;
+
+                if (i === current) circle.classList.add('active');
+                if (i < current) circle.classList.add('completed');
+
+                step.appendChild(circle);
+
+                if (i < steps.length - 1) {
+                    const line = document.createElement('div');
+                    line.className = 'line';
+                    if (i < current) line.innerHTML = '<div class="line-fill"></div>';
+                    step.appendChild(line);
+                }
+
+                stepper.appendChild(step);
+            });
+        }
+
+        function renderStep() {
+            renderStepper();
+            question.textContent = steps[current].q;
+
+            select.style.display = 'none';
+            input.style.display = 'none';
+            select.value = '';
+            input.value = '';
+
+            button.disabled = true;
+            button.classList.remove('enabled');
+
+            const step = steps[current];
+
+            if (step.type === 'select') {
+                select.style.display = 'block';
+                select.innerHTML = '<option value="">– Select –</option>';
+                step.options.forEach(opt => {
+                    const o = document.createElement('option');
+                    o.value = opt;
+                    o.textContent = opt;
+                    select.appendChild(o);
+                });
+            }
+
+            if (step.type === 'input') {
+                input.style.display = 'block';
+                input.placeholder = step.placeholder;
+            }
+
+            button.textContent = current === steps.length - 1 ? 'SEARCH' : 'NEXT';
+        }
+
+        select.addEventListener('change', () => {
+            if (select.value) {
+                button.disabled = false;
+                button.classList.add('enabled');
+            }
+        });
+
+        input.addEventListener('input', () => {
+            if (input.value.trim()) {
+                button.disabled = false;
+                button.classList.add('enabled');
+            }
+        });
+
+        button.addEventListener('click', () => {
+            const step = steps[current];
+            const value = step.type === 'input' ? input.value : select.value;
+            if (!value) return;
+
+            answers[current] = value;
+
+            if (current === steps.length - 1) {
+                alert(JSON.stringify(answers, null, 2));
+                return;
+            }
+
+            current++;
+            renderStep();
+        });
+
+        renderStep();
+    </script>
+
     <script>
         function showTab(tabId, element) {
             // Hide all tab content