diff --git a/app/Http/Controllers/Admin/AppointmentController.php b/app/Http/Controllers/Admin/AppointmentController.php
index cdc10bd..0daadb8 100644
--- a/app/Http/Controllers/Admin/AppointmentController.php
+++ b/app/Http/Controllers/Admin/AppointmentController.php
@@ -48,6 +48,8 @@ class AppointmentController extends Controller
             'end_time' => $request->get('end_time'),
             'location' => $request->get('location'),
             'description' => $request->get('description'),
+            'service_type' => $request->get('service_type'),
+
         ]);
 
         $appointment->save();
@@ -78,6 +80,7 @@ class AppointmentController extends Controller
         $appointment->end_time = $request->get('end_time');
         $appointment->location = $request->get('location');
         $appointment->description = $request->get('description');
+        $appointment->service_type = $request->get('service_type');
         $appointment->save();
 
         return redirect($this->redirect)->with('success', 'Appointment has been updated');
diff --git a/app/Http/Controllers/AppointmentController.php b/app/Http/Controllers/AppointmentController.php
new file mode 100644
index 0000000..c533a93
--- /dev/null
+++ b/app/Http/Controllers/AppointmentController.php
@@ -0,0 +1,41 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use App\Models\Appointment;
+use Carbon\Carbon;
+
+class AppointmentController extends Controller
+{
+    public function index(){
+
+        $educationAppointments = Appointment::where('service_type', '1')->get();
+        $visaAppointments = Appointment::where('service_type', '2')->get();
+        // foreach($educationAppointments as $appointment){
+        //     $startTime = Carbon::createFromFormat('H:i', $appointment->start_time);
+        //     $date = Carbon::createFromFormat('H:i', $appointment->start_time);
+        //     dd($date);
+        // }
+        return view('appointment', compact('educationAppointments', 'visaAppointments'));
+
+    }
+
+    public function get_appointment_by_date(Request $request){
+        $dateTime = $request->date;
+        $date_parts = explode(" ", $dateTime);
+        $month_number = date_parse($date_parts[1])['month'];
+        $carbon = Carbon::createFromDate($date_parts[3], $month_number, $date_parts[2]);
+       
+        $date = $carbon->format('Y-m-d');
+        
+        $appointments = Appointment::whereDate('date',$date)->where('status',1)->get();
+        // $users = DB::table('appointments')->whereDate('created_at', '2022-12-01')->get();
+        // $time = [];
+        // foreach($appointments as $appointment){
+        //     array_push($time, [$appointment->start_time, $appointment->id]);
+        // }
+        // dd($time);
+        return response()->json(['appointment' => $appointments]);
+    }
+}
diff --git a/config/custom.php b/config/custom.php
index 266b0c7..7f4bc32 100644
--- a/config/custom.php
+++ b/config/custom.php
@@ -53,6 +53,10 @@ return [
         '12'=>'page'
 
     ],
+    'service_type' => [
+        '1' => 'Education',
+        '2' => 'Visa'
+    ],
     'course_types'=>[
         '1' =>'Upcoming Courses',
         '2' =>'Recommended Courses',
diff --git a/database/migrations/2023_02_07_044441_add_service_type_id_to_appointments_table.php b/database/migrations/2023_02_07_044441_add_service_type_id_to_appointments_table.php
new file mode 100644
index 0000000..1663a10
--- /dev/null
+++ b/database/migrations/2023_02_07_044441_add_service_type_id_to_appointments_table.php
@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('appointments', function (Blueprint $table) {
+            $table->enum('service_type',[1,2]);
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('appointments', function (Blueprint $table) {
+            //
+        });
+    }
+};
diff --git a/resources/views/admin/appointment/create.blade.php b/resources/views/admin/appointment/create.blade.php
index 495ae62..c72a4fd 100644
--- a/resources/views/admin/appointment/create.blade.php
+++ b/resources/views/admin/appointment/create.blade.php
@@ -28,6 +28,17 @@
                         @include('errors.error')
                         {!! Form::open(['url' => '/admin/appointments', 'class' => 'form-horizontal', 'method'=> 'POST','files' => true,'autocomplete' => 'OFF']) !!}
                         <div class="row">
+                        <div class="col-md-6">
+                                <div class="form-group">
+                                    <label>Service Type <span style="color: red";> * </span> </label>
+                                    <select name="service_type" class="form-control" id="type" required>
+                                        <option value="" selected disabled>Please select service type</option>
+                                        @foreach(config('custom.service_type') as $in => $val)
+                                            <option value="{{$in}}" {{(old('status')==$in) ? 'selected':''}}>{{$val}}</option>
+                                        @endforeach
+                                    </select>
+                                </div>
+                            </div>
                             <div class="col-md-6">
                                 <div class="form-group">
                                     <label> Date <span style="color: red";> * </span> </label>
@@ -40,14 +51,12 @@
                                     <input type="time" class="form-control"  id="inputPassword3" name="start_time" value="{{old('start_time')}}">
                                 </div>
                             </div>
-
                             <div class="col-md-6">
                                 <div class="form-group">
                                     <label>End Time <span style="color: red";> * </span> </label>
                                     <input type="time" class="form-control"  id="inputPassword3" name="end_time" value="{{old('end_time')}}" required>
                                 </div>
                             </div>
-
                      
                             <div class="col-md-6">
                                 <div class="form-group">
@@ -57,7 +66,6 @@
                                         @foreach(config('custom.status') as $in => $val)
                                             <option value="{{$in}}" {{(old('status')==$in) ? 'selected':''}}>{{$val}}</option>
                                         @endforeach
-
                                     </select>
                                 </div>
                             </div>
diff --git a/resources/views/admin/appointment/edit.blade.php b/resources/views/admin/appointment/edit.blade.php
index 301c4e1..4003476 100644
--- a/resources/views/admin/appointment/edit.blade.php
+++ b/resources/views/admin/appointment/edit.blade.php
@@ -28,6 +28,17 @@
                         @include('errors.error')
                         {!! Form::open(['url' => '/admin/appointments/'.$appointment->id, 'class' => 'form-horizontal', 'method'=> 'POST','files' => true]) !!}
                         <div class="row">
+                        <div class="col-md-6">
+                                <div class="form-group">
+                                    <label>Service Type <span style="color: red";> * </span> </label>
+                                    <select name="service_type" class="form-control" id="type" required>
+                                        <option value="" selected disabled>Please select service type</option>
+                                        @foreach(config('custom.service_type') as $in => $val)
+                                        <option value="{{$in}}" {{($appointment->service_type ==$in) ? 'selected':''}}>{{$val}}</option>
+                                        @endforeach
+                                    </select>
+                                </div>
+                            </div>
                             <div class="col-md-6">
                                 <div class="form-group">
                                     <label> Date <span style="color: red";> * </span> </label>
diff --git a/resources/views/appointment.blade.php b/resources/views/appointment.blade.php
index 16ababe..d354193 100644
--- a/resources/views/appointment.blade.php
+++ b/resources/views/appointment.blade.php
@@ -48,60 +48,161 @@
             </div>
         </div>
     </section>
+
+
+<!-- Modal -->
+<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="appointmentModalLabel" aria-hidden="true">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="appointmentModalLabel">Book Appointment</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <!-- Form with the fields name, email, phone, and notes -->
+        <form>
+          <div class="form-group">
+            <label for="name">Name</label>
+            <input type="text" class="form-control" id="name" required>
+          </div>
+          <div class="form-group">
+            <label for="email">Email</label>
+            <input type="email" class="form-control" id="email" required>
+          </div>
+          <div class="form-group">
+            <label for="phone">Phone</label>
+            <input type="tel" class="form-control" id="phone" required>
+          </div>
+          <div class="form-group">
+            <label for="notes">Notes</label>
+            <textarea class="form-control" id="notes"></textarea>
+          </div>
+        </form>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-primary">Book Appointment</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+
+
+
 @endsection
 @section('script')
 <script>
+    $.ajaxSetup({
+        headers: {
+            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
+        }
+    });
     var $calender = $("#demo-calendar-apppearance");
     $(document).ready(function () {
     $calender.zabuto_calendar({
+        data: [
+            @foreach($educationAppointments as $appointment)
+                @php
+                    $date = Carbon\Carbon::createFromFormat('Y-m-d', $appointment->date);
+                    $start_time = Carbon\Carbon::createFromFormat('H:i', $appointment->start_time);
+                    $end_time = Carbon\Carbon::createFromFormat('H:i', $appointment->end_time); 
+                @endphp
+                {
+                    date: "{{ $date->format('Y-m-d') }}",
+                    content: "{{ $start_time->format('H:i') }} - {{ $end_time->format('H:i') }}"
+                },
+            @endforeach
+        ],
         classname: 'table clickable table-bordered lightgrey-weekends',
         week_starts: 'monday',
         show_days: true,
+        cell_border: true,
+        today: true,
+        show_days: true,
+        weekstartson: 0,
         today_markup: '<span class="badge bg-primary">[day]</span>',
         navigation_markup: {
             prev: '<i class="fas fa-chevron-circle-left"></i>',
             next: '<i class="fas fa-chevron-circle-right"></i>'
         }
+      
     });
 
-    var dates = [7, 8, 9]
+     var dates = [7, 8, 9]
     var availableDates = document.getElementById('available-dates')
 
     $calender.on('zabuto:calendar:day', function (e) {
-        var now = new Date();
-            if (e.today) {
-                $(e.element).css('color', 'blue');
-            } else if (e.date.getTime() < now.getTime()) {
-                $(e.element).click(function() { return false })
-            }
-            else if(dates){
-                dates.forEach((date) => {
-                    if(e.element[0].innerText == date){
-                        availableDates.innerText=[dates]
-                    }
-                    else{
-                        availableDates.innerText=""
-                        return false;
-                    }
-                    console.log(date)
-                });
-                // for (let i = 0; i < dates.length; i++){
-                //     if(e.element[0].innerText == dates[i]){
-                //         console.log(true)
-                //     }
-                //     else{
-                //         console.log(dates[i])
-                //     }
-                // }
-            } 
-            else {
-                $(e.element).click(function() { return false })
+
+        var date = e.date;
+
+        //get available time for selected date
+
+        $.ajax({
+            url: "/appointments_by_date",
+            type:"POST",
+            data:{
+                date:date,
+            },
+            success:function(response){
+                if (response) {
+                    var appointments = response.appointment;
+                    dispalyAppointments(appointments,date);
+                }
+            },
+            error: function(response) {
+
             }
-            writeToEventLog('zabuto:calendar:day' + ' date=' + e.date.toDateString() + ' value=' + e.value + ' today=' + e.today);
+        });
         })
     });
-    function writeToEventLog(message) { 
+    function dispalyAppointments(appointments,date) { 
+
+        //display available appointments in timeslot
+        if (appointments.length > 0) {
+            var timeSlots = '';
+
+            for (var i = 0; i < appointments.length; i++) {
+                var appointment = appointments[i];
+                var isAm = appointment.start_time < '12:00:00';
+                timeSlots += '<button type="button" class="time-slot" data-toggle="modal" data-target="#appointmentModal" data-appointment-id="' + appointment.id + '">' + appointment.start_time + ' ' + (isAm ? 'AM' : 'PM') + '</button><br>';
+            }
 
+            $('#available-dates').html(timeSlots);
+
+            $('.time-slot').click(function (e) {
+
+                e.preventDefault();
+                var appointmentId = $(this).data("appointment-id");
+                
+                $("#modal").attr("id", "modal-" + appointmentId);
+                $("#modal-" + appointmentId).modal("show");
+                // showAppointmentForm(appointmentId);
+            });
+            
+        }
+        else{
+            $('#available-dates').html("No appointments available for " + date);
+        }    
+          
     }
+
+    function showAppointmentForm(appointmentId){
+
+            // $("#appointmentModal").modal();
+           //show Appointment booking form
+          // Reset the form
+         // $('#appointment-form')[0].reset();
+
+        // Store the appointment ID in a hidden field
+       // $('#appointment-form input[name="appointment_id"]').val(appointmentId);
+
+     // Show the form
+    // $('#appointment-form').show();
+    
+    }
+
 </script>
 @endsection
\ No newline at end of file
diff --git a/resources/views/blog-detail.blade.php b/resources/views/blog-detail.blade.php
index 00fc014..5128a0e 100644
--- a/resources/views/blog-detail.blade.php
+++ b/resources/views/blog-detail.blade.php
@@ -15,7 +15,7 @@
                 <div class="blog-detail-desc">
                     <h2>{{$blog->title}} </h2>
                     <div class="blog-detail-img">
-                        <img src="{{url('frontend/images/blogs-detail.png')}}" class="w-100" alt="">
+                        <img src="{{url($blog->image)}}" class="w-100" alt="">
                     </div>
                     @php $date = Carbon\Carbon::createFromFormat('Y-m-d', $blog->publish_date);@endphp
                     <div class="blog-socials">
diff --git a/routes/web.php b/routes/web.php
index 903f662..52aa036 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -11,6 +11,7 @@ use App\Http\Controllers\RecruitmentController;
 use App\Http\Controllers\BlogController;
 use App\Http\Controllers\AboutUsController as FrontendAboutUsController;
 use App\Http\Controllers\FaqController as FrontendFaqController;
+use App\Http\Controllers\AppointmentController as FrontendAppointmentController;
 use App\Http\Controllers\Admin\ServiceSectionController;
 use App\Http\Controllers\Admin\AccomodationController;
 use App\Http\Controllers\Admin\ContactUsController;
@@ -68,6 +69,8 @@ Route::get('/visa/{slug}', [VisaController::class,'details']);
 Route::get('contact', [ContactController::class,'index']);
 Route::post('contact', [ContactController::class,'post_contact']);
 Route::get('about', [FrontendAboutUsController::class,'index']);
+Route::get('appointment', [FrontendAppointmentController::class,'index']);
+Route::post('appointments_by_date', [FrontendAppointmentController::class,'get_appointment_by_date']);
 
 // Route::get('/about', function () {
 //     return view('about');
@@ -296,9 +299,9 @@ Route::get('/career_counselling', function () {
 Route::get('/insurance', function () {
     return view('insurance');
 });
-Route::get('/appointment', function () {
-    return view('appointment');
-});
+// Route::get('/appointment', function () {
+//     return view('appointment');
+// });
 // Route::get('/visa', function () {
 //     return view('visa');
 // });