diff --git a/Modules/CostCalculator/app/Services/CostCalculatorService.php b/Modules/CostCalculator/app/Services/CostCalculatorService.php
index 136dcee..a040396 100644
--- a/Modules/CostCalculator/app/Services/CostCalculatorService.php
+++ b/Modules/CostCalculator/app/Services/CostCalculatorService.php
@@ -3,6 +3,7 @@
 namespace Modules\CostCalculator\Services;
 
 use Modules\CostCalculator\Models\CostCalculator;
+use Modules\CourseFinder\Models\Program;
 
 class CostCalculatorService
 {
@@ -13,20 +14,12 @@ class CostCalculatorService
                 $query->where('country_id', $request->country_id);
             }
 
-            if ($request->filled('programlevel_id')) {
-                $query->where("programlevel_id", $request->programlevel_id);
+            if ($request->filled('stay_type_id')) {
+                $query->where("stay_type_id", $request->stay_type_id);
             }
 
             if ($request->filled('program_id')) {
-                $query->where("program_id", $request->program_id);
-            }
-
-            if ($request->filled('living_status_id')) {
-                $query->where("living_status_id", $request->living_status_id);
-            }
-
-            if ($request->filled('status')) {
-                $query->where('status', $request->status);
+                Program::where('status', 1)-> where('id', $request->program_id)->get();
             }
 
         })->latest()->paginate(10)->withQueryString();
diff --git a/app/Http/Controllers/WebsiteController.php b/app/Http/Controllers/WebsiteController.php
index 2382e27..330e024 100644
--- a/app/Http/Controllers/WebsiteController.php
+++ b/app/Http/Controllers/WebsiteController.php
@@ -10,6 +10,8 @@ use Modules\CCMS\Models\Institution;
 use Modules\CCMS\Models\Page;
 use Modules\CCMS\Models\Service;
 use Modules\CCMS\Models\Test;
+use Modules\CostCalculator\Models\CostCalculator;
+use Modules\CostCalculator\Models\StayType;
 use Modules\CourseFinder\Models\Coop;
 use Modules\CourseFinder\Models\Program;
 use Modules\CourseFinder\Models\ProgramLevel;
@@ -243,13 +245,65 @@ class WebsiteController extends Controller
     public function costCalculator(Request $request)
     {
         $data['programs'] = $this->programService->findAll($request);
+        $data['programss'] = Program::where('status', 1)->pluck('title', 'id');
         $data['countryOptions'] = Country::where('status', 1)->where('parent_id', null)->pluck('title', 'id');
         $data['programLevelOptions'] = ProgramLevel::where('status', 1)->pluck('title', 'id');
         $data['intakeOptions'] = Program::INTAKE;
         $data['coopOptions'] = Coop::where('status', 1)->pluck('title', 'id');
         $data['testOptions'] = Test::where('status', 1)->where('parent_id', null)->pluck('title', 'id');
-        $data['statusOptions'] = config('constants.page_status_options');
+        $data['livingStatusOptions'] = StayType::where('status', 1)->pluck('title', 'id');
+
 
         return view("client.raffles.pages.cost-calculator", $data);
     }
+
+    public function getCost(Request $request, $id)
+    {
+          $cost = CostCalculator::with([
+            'stayTypeLiving',
+            'stayTypeAccomodation',
+            'stayTypeOnetime',
+            'stayTypeService'
+        ])->findOrFail($id);
+
+        $data['title'] = 'View Cost Calculation';
+        $data['cost'] = $cost;
+
+        $getBreakdown = function ($stayTypeTitle) use ($cost) {
+            $living       = optional($cost->stayTypeLiving->firstWhere('title', $stayTypeTitle))->pivot;
+            $accomodation = optional($cost->stayTypeAccomodation->firstWhere('title', $stayTypeTitle))->pivot;
+            $onetime      = optional($cost->stayTypeOnetime->firstWhere('title', $stayTypeTitle))->pivot;
+            $service      = optional($cost->stayTypeService->firstWhere('title', $stayTypeTitle))->pivot;
+
+            return [
+                'living' => [
+                    'monthly' => $living->monthly ?? 0,
+                    'yearly'  => $living->yearly ?? 0,
+                ],
+                'accomodation' => [
+                    'monthly' => $accomodation->monthly ?? 0,
+                    'yearly'  => $accomodation->yearly ?? 0,
+                ],
+                'onetime' => [
+                    'visa'        => $onetime->visa ?? 0,
+                    'biometrics'  => $onetime->biometrics ?? 0,
+                    'sevis'       => $onetime->sevis ?? 0,
+                    'application' => $onetime->application ?? 0,
+                    'total'       => ($onetime->visa ?? 0) + ($onetime->biometrics ?? 0) + ($onetime->sevis ?? 0) + ($onetime->application ?? 0),
+                ],
+                'service' => [
+                    'flight_ticket' => $service->flight_ticket ?? 0,
+                    'insurance'     => $service->insurance ?? 0,
+                    'extra'         => $service->extra ?? 0,
+                    'total'         => ($service->flight_ticket ?? 0) + ($service->insurance ?? 0) + ($service->extra ?? 0),
+                ]
+            ];
+        };
+
+        $data['breakdowns'] = [
+            'alone' => $getBreakdown('Alone'),
+            'with_spouse' => $getBreakdown('With Spouse'),
+            'with_spouse_and_child' => $getBreakdown('With Spouse and Child'),
+        ];
+    }
 }
diff --git a/resources/views/client/raffles/layouts/app.blade.php b/resources/views/client/raffles/layouts/app.blade.php
index a4d34a4..e546a73 100644
--- a/resources/views/client/raffles/layouts/app.blade.php
+++ b/resources/views/client/raffles/layouts/app.blade.php
@@ -49,7 +49,8 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
     <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet" />
 
-    
+    @stack('css')
+
     <title>Raffles Educare</title>
 </head>
 
@@ -97,6 +98,7 @@
     <script src="{{ asset('raffles/assets/js/theme.min.js') }}"></script>
     <script src="{{ asset('raffles/assets/js/liquid-ajax-contact-form.min.js') }}"></script>
     <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js')}}"></script>
+    @stack('js')
     <div class="lqd-cc lqd-cc--inner fixed pointer-events-none"></div>
     <div
         class="lqd-cc--el lqd-cc-solid lqd-cc-explore flex items-center justify-center rounded-full fixed pointer-events-none">
diff --git a/resources/views/client/raffles/pages/cost-calculator.blade.php b/resources/views/client/raffles/pages/cost-calculator.blade.php
index a2af845..bfc4905 100644
--- a/resources/views/client/raffles/pages/cost-calculator.blade.php
+++ b/resources/views/client/raffles/pages/cost-calculator.blade.php
@@ -1,4 +1,120 @@
 @extends('client.raffles.layouts.app')
+
+@push('css')
+    <style>
+        .wizard-container {
+            max-width: 700px;
+            margin: auto;
+            background: #fff;
+            padding: 30px;
+            border-radius: 10px;
+            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
+        }
+
+        .wizard-container .step-title {
+            font-size: 22px;
+            margin-bottom: 5px;
+        }
+
+        .wizard-container .step-subtitle {
+            font-size: 14px;
+            color: #555;
+            margin-bottom: 20px;
+            border-bottom: 1px solid #ddd;
+            padding-bottom: 10px;
+        }
+
+        .wizard-container .tab-pane {
+            display: none;
+        }
+
+        .wizard-container .tab-pane.active {
+            display: block;
+        }
+
+        .wizard-container .form-group {
+            margin-bottom: 15px;
+        }
+
+        .wizard-container .form-control,
+        select {
+            width: 100%;
+            padding: 8px;
+            box-sizing: border-box;
+        }
+
+        .wizard-container .btn {
+            padding: 10px 20px;
+            background: #007bff;
+            color: #fff;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+        }
+
+        .wizard-container .btn:disabled {
+            background: #ccc;
+            cursor: not-allowed;
+        }
+
+        .wizard-container .btn-prev {
+            background: #6c757d;
+        }
+
+        .wizard-container .form-check {
+            margin-right: 10px;
+        }
+
+        .wizard-container .d-none {
+            display: none;
+        }
+
+        .wizard-container .nav {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 20px;
+        }
+
+        .wizard-container .nav button {
+            flex: 1;
+            margin: 0 2px;
+            padding: 8px;
+            background: #e9ecef;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+        }
+
+        .wizard-container .nav button.active {
+            background: #007bff;
+            color: #fff;
+        }
+
+        .wizard-container .text-danger {
+            color: red;
+        }
+
+        .wizard-container .card-radio {
+            border: 1px solid #ddd;
+            border-radius: 10px;
+            padding: 15px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            min-width: 120px;
+            text-align: center;
+        }
+
+        .wizard-container .card-radio:hover {
+            border-color: #0d6efd;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        }
+
+        .wizard-container .card-radio.active {
+            border-color: #0d6efd;
+            background-color: #e7f1ff;
+        }
+    </style>
+@endpush
+
 @section('content')
     <section class="about section-fall" id="ball-section">
         <canvas id="flagCanvas"></canvas>
@@ -13,315 +129,147 @@
             </div>
         </section>
 
-        <section class="lqd-section   pb-160">
+        <section class="lqd-section pb-160">
             <div class="container">
                 <div class="row" id="interactiveSection">
 
-                    <div class="col col-lg-7">
+                    <div class="col col-lg-12">
 
-                        {{-- <form id="costForm" action="{{ route('cost.calculator') }}" method="POST">
-                            @csrf
-                            <input type="hidden" name="country_id" id="country_id">
-                            <input type="hidden" name="test_id" id="test_id">
-                            <input type="hidden" name="intake_id" id="intake_id">
-                            <input type="hidden" name="programlevel_id" id="programlevel_id"> --}}
-
-                        <div class="cost-choosing">
-
-                            <div class="step-content active" id="step1">
-                                <h3 class="text-20 text-black font-bold pb-20">Choose items to find the total cost</h3>
-                                <h5 class="text-ter text-18 font-medium pb-20">Which country are you planning to study
-                                    in?</h5>
-
-                                <div class="row flex py-20">
-                                    @foreach ($countryOptions as $id => $country)
-                                        <div class="col col-sm-4">
-                                            <div class="flex items-center gap-10 px-10 py-20 bg-white rounded-30 tabs">
-                                                <div class="circle1"></div>
-                                                <a href="#" class="select-country" data-id="{{ $id }}">
-                                                    <h3 class="text-20 text-ter p-0 m-0">{{ $country }}</h3>
-                                                </a>
-                                            </div>
-                                        </div>
-                                    @endforeach
-                                </div>
+                        <div class="wizard-container">
+                            <div class="nav" id="step-nav">
+                                <button class="active" data-step="0">Country</button>
+                                <button data-step="1">Stay Type</button>
+                                <button data-step="2">Other Services</button>
+                                <button data-step="3">Program Level</button>
+                                <button data-step="4">Program</button>
                             </div>
 
-                            <div class="step-content" id="step2">
-                                <h3 class="text-20 text-black font-bold pb-20">Choose items to find the total cost</h3>
-                                <h5 class="text-ter text-18 font-medium pb-20">Which level are you applying for?</h5>
+                            <form id="multiStepForm">
 
-                                <div class="row flex py-20">
-                                    @foreach ($programLevelOptions as $id => $level)
-                                        <div class="col col-sm-4">
-                                            <div class="flex items-center gap-10 px-10 py-20 bg-white rounded-30 tabs">
-                                                <div class="circle1"></div>
-                                                <a href="#" class="select-programlevel_id"
-                                                    data-id="{{ $id }}">
-                                                    <h3 class="text-20 text-ter p-0 m-0">{{ $level }}</h3>
-                                                </a>
-                                            </div>
-                                        </div>
-                                    @endforeach
-                                </div>
-                            </div>
-
-                            <div class="step-content" id="step3">
-                                <h3 class="text-20 text-black font-bold pb-20">Choose items to find the total cost</h3>
-                                <h5 class="text-ter text-18 font-medium pb-20">Are you going alone or with a dependent?
-                                </h5>
-
-                                <div class="row flex py-20">
-                                    <div class="col col-sm-4">
-                                        <div class="flex items-center gap-10 px-10 py-20 bg-white rounded-30 tabs">
-                                            <div class="circle1"></div>
-                                            <a href="#" class="select-intake" data-id="">
-                                                <h3 class="text-20 text-ter p-0 m-0">Alone</h3>
-                                            </a>
+                                <!-- Step 1: Select Country -->
+                                <div class="tab-pane active" data-step="0">
+                                    <h2 class="step-title">Which country are you planning to study in?</h2>
+                                    <div class="form-group">
+                                        <div class="d-flex flex-wrap">
+                                            @foreach ($countries as $country)
+                                                <div class="form-check country-card me-3 mb-3">
+                                                    <input class="form-check-input" type="radio" name="country"
+                                                        value="{{ $country->id }}" id="country_{{ $country->id }}">
+                                                    <label class="form-check-label" for="country_{{ $country->id }}">
+                                                        {{ $country->title }}
+                                                    </label>
+                                                </div>
+                                            @endforeach
                                         </div>
                                     </div>
-                                    <div class="col col-sm-4">
-                                        <div class="flex items-center gap-10 px-10 py-20 bg-white rounded-30 tabs">
-                                            <div class="circle1"></div>
-                                            <a href="#" class="select-intake" data-id="">
-                                                <h3 class="text-20 text-ter p-0 m-0">With Spouse</h3>
-                                            </a>
-                                        </div>
-                                    </div>
-                                    <div class="col col-sm-4">
-                                        <div class="flex items-center gap-10 px-10 py-20 bg-white rounded-30 tabs">
-                                            <div class="circle1"></div>
-                                            <a href="#" class="select-intake" data-id="">
-                                                <h3 class="text-20 text-ter p-0 m-0">With Spouse + 1 Child</h3>
-                                            </a>
-                                        </div>
+
+                                    <div style="text-align:right;">
+                                        <button type="button" class="btn btn-next">Next</button>
                                     </div>
                                 </div>
-                            </div>
 
-                            <div class="step-content" id="step4">
-                                <h3 class="text-20 text-black font-bold pb-20">Choose items to find the total cost</h3>
-                                <h5 class="text-ter text-18 font-medium pb-20">Cost of Living</h5>
-
-                                <div class="row flex py-20">
-                                    <div class="col col-sm-4">
-                                        <div class="flex items-center gap-10 px-10 py-20 bg-white rounded-30 tabs">
-                                            <div class="circle1"></div>
-                                            <a href="#" class="select-year" data-id="1">
-                                                <h3 class="text-20 text-ter p-0 m-0">UK £829 / £9948</h3>
-                                            </a>
+                                <!-- Step 2: Stay Type Status -->
+                                <div class="tab-pane" data-step="1">
+                                    <h2 class="step-title">Are you going alone or with a dependent?</h2>
 
+                                    <div class="form-group">
+                                        <div class="d-flex flex-wrap">
+                                            @foreach ($livingStatusOptions as $key => $status)
+                                                <div class="form-check status-card me-3 mb-3">
+                                                    <input class="form-check-input" type="radio" name="status_type"
+                                                        value="{{ $key }}" id="status_type_{{ $key }}">
+                                                    <label class="form-check-label" for="status_type_{{ $key }}">
+                                                        {{ $status }}
+                                                    </label>
+                                                </div>
+                                            @endforeach
                                         </div>
                                     </div>
-                                    <div class="col col-sm-4">
-                                        <div class="flex items-center gap-10 px-10 py-20 bg-white rounded-30 tabs">
-                                            <div class="circle2"></div>
-                                            <a href="#" class="select-year" data-id="2">
-                                                <h3 class="text-20 text-ter p-0 m-0">US $1,189 / $14268</h3>
-                                            </a>
-                                        </div>
-                                    </div>
-                                    <div class="col col-sm-4">
-                                        <div class="flex items-center gap-10 px-10 py-10 bg-white rounded-30 tabs">
-                                            <div class="circle1"></div>
-                                            <a href="#" class="select-year" data-id="3">
-                                                <h3 class="text-20 text-ter p-0 m-0">AU $1,049 / $12588</h3>
-                                            </a>
-                                        </div>
+                                    <div style="display:flex; justify-content:space-between;">
+                                        <button type="button" class="btn btn-prev">Previous</button>
+                                        <button type="button" class="btn btn-next">Next</button>
                                     </div>
                                 </div>
-                            </div>
 
-                            <div class="step-content" id="step5">
-                                <h3 class="text-20 text-black font-bold pb-20">Choose items to find the total cost</h3>
-                                <h5 class="text-ter text-18 font-medium pb-20">Accomodation cost per year:</h5>
+                                <!-- Step 3: Proficiency -->
+                                <div class="tab-pane" data-step="2">
+                                    <h2 class="step-title">Do you want to include other services?</h2>
 
-                                <div class="row flex py-20">
-                                    <div class="col col-sm-4">
-                                        <div class="flex items-center gap-10 px-10 py-20 bg-white rounded-30 tabs">
-                                            <div class="circle1"></div>
-                                            <a href="#" class="select-programlevel_id" data-id="">
-                                                <h3 class="text-20 text-ter p-0 m-0">UK £1,079 / £12,948</h3>
-                                            </a>
-                                        </div>
+                                    <div class="form-group">
+                                        <input type="radio" name="services" id="yes" value="yes"> <label
+                                            for="yes">Yes</label>
+                                        <input type="radio" name="services" id="no" value="no"> <label
+                                            for="no">No</label>
                                     </div>
-                                    <div class="col col-sm-4">
-                                        <div class="flex items-center gap-10 px-10 py-20 bg-white rounded-30 tabs">
-                                            <div class="circle1"></div>
-                                            <a href="#" class="select-programlevel_id" data-id="">
-                                                <h3 class="text-20 text-ter p-0 m-0">US $1,637 / $19,644</h3>
-                                            </a>
-                                        </div>
-                                    </div>
-                                    <div class="col col-sm-4">
-                                        <div class="flex items-center gap-10 px-10 py-20 bg-white rounded-30 tabs">
-                                            <div class="circle1"></div>
-                                            <a href="#" class="select-programlevel_id" data-id="">
-                                                <h3 class="text-20 text-ter p-0 m-0">AU $2700 / $32400</h3>
-                                            </a>
-                                        </div>
+
+                                    <div style="display:flex; justify-content:space-between;">
+                                        <button type="button" class="btn btn-prev">Previous</button>
+                                        <button type="button" class="btn btn-next">Next</button>
                                     </div>
                                 </div>
-                            </div>
 
-                            <div class="step-content" id="step6">
-                                <h3 class="text-20 text-black font-bold pb-20">Choose items to find the total cost</h3>
-                                <h5 class="text-ter text-18 font-medium pb-20">Non-Refundable onetime cost in
-                                    processing:</h5>
+                                <!-- Step 4: Basic -->
+                                <div class="tab-pane" data-step="3">
+                                    <h2 class="step-title">Which Level are you applying for?</h2>
 
-                                <div class="row flex py-20">
-                                    <div class="col col-sm-4">
-                                        <div class="flex items-center gap-10 px-10 py-20 bg-white rounded-30 tabs">
-                                            <div class="circle1"></div>
-                                            <a href="#" class="select-programlevel_id" data-id="">
-                                                <h3 class="text-20 text-ter p-0 m-0">UK 2 to 3 Lakhs</h3>
-                                            </a>
-                                        </div>
+                                    <div class="form-group">
+                                        @foreach ($programLevelOptions as $level)
+                                            <input type="radio" name="program_level" id="program_level_id"
+                                                value="program_level_id"> <label
+                                                for="program_level_id">{{ $level }}</label>
+                                        @endforeach
                                     </div>
-                                    <div class="col col-sm-4">
-                                        <div class="flex items-center gap-10 px-10 py-20 bg-white rounded-30 tabs">
-                                            <div class="circle1"></div>
-                                            <a href="#" class="select-programlevel_id" data-id="">
-                                                <h3 class="text-20 text-ter p-0 m-0">AU 5 to 7 Lakhs</h3>
-                                            </a>
-                                        </div>
-                                    </div>
-                                    <div class="col col-sm-4">
-                                        <div class="flex items-center gap-10 px-10 py-20 bg-white rounded-30 tabs">
-                                            <div class="circle1"></div>
-                                            <a href="#" class="select-programlevel_id" data-id="">
-                                                <h3 class="text-20 text-ter p-0 m-0">USA 1 to 2 Lakh</h3>
-                                            </a>
-                                        </div>
+
+                                    <div style="display:flex; justify-content:space-between;">
+                                        <button type="button" class="btn btn-prev">Previous</button>
+                                        <button type="button" class="btn btn-next">Next</button>
                                     </div>
                                 </div>
-                            </div>
 
-                            <div class="step-content" id="step7">
-                                <h3 class="text-20 text-black font-bold pb-20">Choose items to find the total cost</h3>
-                                <h5 class="text-ter text-18 font-medium pb-20">Do you want to include other services?
-                                </h5>
+                                <!-- Step 5: Contact -->
+                                <div class="tab-pane" data-step="4">
+                                    <h2 class="step-title">Which Program are you applying for?</h2>
 
-                                <div class="row flex py-20">
-                                    <div class="col col-sm-4">
-                                        <div class="flex items-center gap-10 px-10 py-20 bg-white rounded-30 tabs">
-                                            <div class="circle1"></div>
-                                            <a href="#" class="select-programlevel_id" data-id="">
-                                                <h3 class="text-20 text-ter p-0 m-0">Flighr Ticket</h3>
-                                            </a>
+                                    <div class="form-group">
+                                        <div class="d-flex flex-wrap">
+                                            @foreach ($programss as $key => $program)
+                                                <select name="country_id" class="form-control" required>
+                                                    <option value="">Select Program</option>
+                                                    <option value="{{ $key }}">{{ $program }}</option>
+                                                </select>
+                                            @endforeach
                                         </div>
                                     </div>
-                                    <div class="col col-sm-4">
-                                        <div class="flex items-center gap-10 px-10 py-20 bg-white rounded-30 tabs">
-                                            <div class="circle1"></div>
-                                            <a href="#" class="select-programlevel_id" data-id="">
-                                                <h3 class="text-20 text-ter p-0 m-0">Health Insurance</h3>
-                                            </a>
-                                        </div>
-                                    </div>
-                                    <div class="col col-sm-4">
-                                        <div class="flex items-center gap-10 px-10 py-20 bg-white rounded-30 tabs">
-                                            <div class="circle1"></div>
-                                            <a href="#" class="select-programlevel_id" data-id="">
-                                                <h3 class="text-20 text-ter p-0 m-0">Extra</h3>
-                                            </a>
-                                        </div>
+
+                                    <div style="display:flex; justify-content:space-between;">
+                                        <button type="button" class="btn btn-prev">Previous</button>
+                                        <button type="submit" class="btn btn-next">Finish</button>
                                     </div>
                                 </div>
-                            </div>
-
-                            <div class=" flex items-center justify-center next-btn">
-                                <button id="nextBtn"
-                                    class="rounded-30 px-20 py-10  text-ter text-16 text-center border-0 flex items-center gap-10 justify-center">
-                                    <p class="m-0 p-0">Next</p> <i class="fa-solid fa-chevron-right"></i>
-                                </button>
-                                <button id="doneBtn" type="submit" style="display: none;">Done</button>
-                            </div>
-
-                            <div class="progress-line">
-                                <div class="progress-track">
-                                    <span class="banana" id="b1">
-                                        <div class="dot"
-                                            style="width:12px;height:12px;background:#999;border-radius:50%;"></div>
-                                    </span>
-                                    <span class="banana" id="b2">
-                                        <div class="dot"
-                                            style="width:12px;height:12px;background:#999;border-radius:50%;"></div>
-                                    </span>
-                                    <span class="banana" id="b3">
-                                        <div class="dot"
-                                            style="width:12px;height:12px;background:#999;border-radius:50%;"></div>
-                                    </span>
-                                    <span class="banana" id="b4">
-                                        <div class="dot"
-                                            style="width:12px;height:12px;background:#999;border-radius:50%;"></div>
-                                    </span>
-                                    <span class="banana" id="b5">
-                                        <div class="dot"
-                                            style="width:12px;height:12px;background:#999;border-radius:50%;"></div>
-                                    </span>
-                                    <span class="banana" id="b6">
-                                        <div class="dot"
-                                            style="width:12px;height:12px;background:#999;border-radius:50%;"></div>
-                                    </span>
-                                    <span class="banana" id="b7">
-                                        <div class="dot"
-                                            style="width:12px;height:12px;background:#999;border-radius:50%;"></div>
-                                    </span>
-                                </div>
-                                <div class="monkey" id="monkey" style="left: 0%;">
-                                    <img src="{{ asset('raffles/assets/images/icons/monkey.png') }}" alt="">
-                                </div>
-                            </div>
 
+                            </form>
                         </div>
-                        {{-- </form> --}}
-
                     </div>
 
                     <div class="col col-lg-1"></div>
 
-                    <div class="col col-lg-4">
+                    {{-- <div class="col col-lg-4">
                         <div class="total-cost">
                             <h4>Total <span class="text-black">Cost</span> </h4>
                             <table>
                                 <thead>
                                     <tr>
                                         <th class="font-bold">S.N.</th>
-                                        <th class="font-bold ">Select</th>
-                                        <th class="font-bold ">Max Price</th>
+                                        <th class="font-bold">Select</th>
+                                        <th class="font-bold">Max Price</th>
                                     </tr>
                                 </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>1</td>
-                                        <td>Bachelors</td>
-                                        <td>$13000/year</td>
-                                    </tr>
-                                    <tr>
-                                        <td>2</td>
-                                        <td>Bachelors</td>
-                                        <td>$13000/year</td>
-                                    </tr>
-                                    <tr>
-                                        <td>3</td>
-                                        <td>Bachelors</td>
-                                        <td>$13000/year</td>
-                                    </tr>
-                                    <tr>
-                                        <td>4</td>
-                                        <td>Bachelors</td>
-                                        <td>$13000/year</td>
-                                    </tr>
-                                    <tr>
-                                        <td>5</td>
-                                        <td>Bachelors</td>
-                                        <td>$13000/year</td>
-                                    </tr>
+                                <tbody id="totalCostBody">
+                                    <!-- Filled dynamically -->
                                 </tbody>
                             </table>
                         </div>
-                    </div>
+                    </div> --}}
 
                 </div>
             </div>
@@ -329,27 +277,75 @@
 
     </section>
 @endsection
-
-{{-- @push('js')
+@push('js')
     <script>
-        $(document).ready(function() {
-            const map = {
-                'select-country': 'country_id',
-                'select-test': 'test_id',
-                'select-intake': 'intake_id',
-                'select-programlevel_id': 'programlevel_id'
-            };
+        const form = document.getElementById('multiStepForm');
+        const tabs = document.querySelectorAll('.tab-pane');
+        const nextBtns = document.querySelectorAll('.btn-next');
+        const prevBtns = document.querySelectorAll('.btn-prev');
+        const navButtons = document.querySelectorAll('#step-nav button');
 
-            $(document).on('click', 'a', function(e) {
-                const classes = $(this).attr('class')?.split(/\s+/) || [];
-                for (const cls of classes) {
-                    if (map[cls]) {
-                        e.preventDefault();
-                        $('#' + map[cls]).val($(this).data('id'));
-                        break;
-                    }
+        let currentStep = 0;
+
+        function showStep(step) {
+            tabs.forEach((tab, idx) => {
+                tab.classList.toggle('active', idx === step);
+            });
+            navButtons.forEach((btn, idx) => {
+                btn.classList.toggle('active', idx === step);
+            });
+        }
+
+        nextBtns.forEach(btn => {
+            btn.addEventListener('click', () => {
+                if (currentStep < tabs.length - 1) {
+                    currentStep++;
+                    showStep(currentStep);
                 }
             });
         });
+
+        prevBtns.forEach(btn => {
+            btn.addEventListener('click', () => {
+                if (currentStep > 0) {
+                    currentStep--;
+                    showStep(currentStep);
+                }
+            });
+        });
+
+        navButtons.forEach((btn, idx) => {
+            btn.addEventListener('click', () => {
+                currentStep = idx;
+                showStep(currentStep);
+            });
+        });
+
+        // Proficiency test toggle
+        const yesRadio = document.getElementById('yes');
+        const noRadio = document.getElementById('no');
+        const testDetailsGroup = document.getElementById('testDetailsGroup');
+        const testScoreGroup = document.getElementById('testScoreGroup');
+        const consideringGroup = document.getElementById('consideringGroup');
+
+        function toggleProficiencySections() {
+            if (yesRadio.checked) {
+                testDetailsGroup.classList.remove('d-none');
+                testScoreGroup.classList.remove('d-none');
+                consideringGroup.classList.add('d-none');
+            } else if (noRadio.checked) {
+                testDetailsGroup.classList.add('d-none');
+                testScoreGroup.classList.add('d-none');
+                consideringGroup.classList.remove('d-none');
+            } else {
+                testDetailsGroup.classList.add('d-none');
+                testScoreGroup.classList.add('d-none');
+                consideringGroup.classList.add('d-none');
+            }
+        }
+
+        yesRadio.addEventListener('change', toggleProficiencySections);
+        noRadio.addEventListener('change', toggleProficiencySections);
+        toggleProficiencySections();
     </script>
-@endpush --}}
+@endpush