diff --git a/resources/views/themes/default1/admin/layout/admin.blade.php b/resources/views/themes/default1/admin/layout/admin.blade.php
index bcf280eaa..a6b78ad70 100644
--- a/resources/views/themes/default1/admin/layout/admin.blade.php
+++ b/resources/views/themes/default1/admin/layout/admin.blade.php
@@ -321,7 +321,7 @@
                        <div class="image">
 
                             <img id="sidebar-profile-img" src="{{Auth::user()->profile_pic}}" alt="User Image" width="auto" height="auto" 
-                                class="img-circle elevation-2">
+                                class="img-circle elevation-2" style="width: 30px;height: 30px;">
                         </div>
 
                        <div class="info">
diff --git a/resources/views/themes/default1/agent/helpdesk/ticket/duetodayticket.blade.php b/resources/views/themes/default1/agent/helpdesk/ticket/duetodayticket.blade.php
index e0fc82183..46a49260d 100644
--- a/resources/views/themes/default1/agent/helpdesk/ticket/duetodayticket.blade.php
+++ b/resources/views/themes/default1/agent/helpdesk/ticket/duetodayticket.blade.php
@@ -1,48 +1,42 @@
 @extends('themes.default1.agent.layout.agent')
 
 @section('Tickets')
-class="active"
-@stop
-
-@section('ticket-bar')
-active
-@stop
-
-@section('open')
-class="active"
+class="nav-link active"
 @stop
 
 @section('PageHeader')
-<h1>{{Lang::get('lang.today-due_tickets')}}</h1>
+<h1>{{Lang::get('lang.tickets')}}</h1>
 <style>
- .tooltip1 {
-     position: relative;
-     /*display: inline-block;*/
-     /*border-bottom: 1px dotted black;*/
- }
- 
- .tooltip1 .tooltiptext {
+.tooltip1 {
+    position: relative;
+    /*display: inline-block;*/
+    /*border-bottom: 1px dotted black;*/
+}
+
+.tooltip1 .tooltiptext {
      visibility: hidden;
-     width: 100%;
+     width:300px;
+     max-height: 250px;
+     overflow: auto;
      background-color: black;
      color: #fff;
      text-align: center;
      border-radius: 6px;
-     padding: 5px 0;
+     padding: 10px;
+     font-weight: 300px !important;
  
      /* Position the tooltip */
      position: absolute;
      z-index: 1;
  }
- 
- .tooltip1:hover .tooltiptext {
-     visibility: visible;
- }
- </style>
-@stop
 
+.tooltip1:hover .tooltiptext {
+    visibility: visible;
+}
+</style>
+@stop
 @section('content')
-         <?php
+<?php
 
         if (Auth::user()->role == 'admin' || Auth::user()->role == 'agent') {
             $todaytickets = count(App\Model\helpdesk\Ticket\Tickets::where('status', '=', 1)->whereRaw('date(duedate) = ?', [date('Y-m-d')])->get());
@@ -51,58 +45,59 @@ class="active"
             $todaytickets = App\Model\helpdesk\Ticket\Tickets::where('status', '=', 1)->whereRaw('date(duedate) = ?', [date('Y-m-d')])->where('dept_id', '=', $dept->id)->count();
         }
  ?>
- <!-- //no need -->
 <!-- Main content -->
-<div class="box box-primary">
-    <div class="box-header with-border">
-        <h3 class="box-title">{!! Lang::get('lang.duetoday') !!} </h3> <small id="title_refresh">{!! $todaytickets !!} {!! Lang::get('lang.tickets') !!}</small>
-        <div class="box-tools pull-right">
-            <div class="has-feedback">
-            </div>
-        </div>
+   @if(Session::has('success'))
+    <div class="alert alert-success alert-dismissable">
+        <i class="fa fa-check-circle"> </i>
+        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
+        {{Session::get('success')}}
+    </div>
+    @endif
+    <!-- failure message -->
+    @if(Session::has('fails'))
+    <div class="alert alert-danger alert-dismissable">
+        <i class="fa fa-ban"> </i> <b> {!! Lang::get('lang.alert') !!}! </b>
+        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
+        {{Session::get('fails')}}
+    </div>
+    @endif
+<div class="card card-light">
+    <div class="card-header">
+        <h3 class="card-title">{!! Lang::get('lang.duetoday') !!} </h3> &nbsp;<small id="title_refresh">({!! $todaytickets !!} {!! Lang::get('lang.tickets') !!})</small>
     </div><!-- /.box-header -->
-    <div class="box-body">
-        @if(Session::has('success'))
-        <div class="alert alert-success alert-dismissable">
-            <i class="fa  fa-check-circle"> </i> 
-            <b> Success </b>
-            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
-            {{Session::get('success')}}
-        </div>
-        @endif
-        <!-- failure message -->
-        @if(Session::has('fails'))
-        <div class="alert alert-danger alert-dismissable">
-            <i class="fa fa-ban"> </i> 
-            <b> Fail! </b>
-            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
-            {{Session::get('fails')}}
-        </div>
-        @endif
+
+    <div class="card-body ">
         {!! Form::open(['id'=>'modalpopup', 'route'=>'select_all','method'=>'post']) !!}
         <!--<div class="mailbox-controls">-->
         <!-- Check all button -->
-        <a class="btn btn-default btn-sm checkbox-toggle"><i class="fa fa-square-o"></i></a>
+        <a class="btn btn-default btn-sm checkbox-toggle"><i class="far fa-square"></i></a>
+        {{-- <a class="btn btn-default btn-sm" id="click"><i class="fa fa-refresh"></i></a> --}}
+
         <input type="submit" class="submit btn btn-default text-orange btn-sm" id="delete" name="submit" value="{!! Lang::get('lang.delete') !!}">
         <input type="submit" class="submit btn btn-default text-yellow btn-sm" id="close" name="submit" value="{!! Lang::get('lang.close') !!}">
-        
-        <button type="button" class="btn btn-sm btn-default" id="assign_Ticket" data-toggle="modal" data-target="#AssignTickets" style="display: none;"><i class="fa fa-hand-o-right"> </i> {!! Lang::get('lang.assign') !!}</button>
-        <button type="button" class="btn btn-sm btn-default text-green" id="Edit_Ticket" data-toggle="modal" data-target="#MergeTickets"><i class="fa fa-code-fork"> </i> {!! Lang::get('lang.merge') !!}</button>
+        <button type="button" class="btn btn-sm btn-default text-green" id="Edit_Ticket" data-toggle="modal" data-target="#MergeTickets"><i class="fas fa-cogs"> </i> {!! Lang::get('lang.merge') !!}</button>
         <!--</div>-->
+        
+        <button type="button" class="btn btn-sm btn-default" id="assign_Ticket" data-toggle="modal" data-target="#AssignTickets" style="display: none;"><i class="fas fa-hand-point-right"> </i> {!! Lang::get('lang.assign') !!}</button>
         <p><p/>
         <div class="mailbox-messages" id="refresh">
+            <!--datatable-->
             {!!$table->render('vendor.Chumper.template')!!}
+             
+            
+            <!-- /.datatable -->
         </div><!-- /.mail-box-messages -->
         {!! Form::close() !!}
     </div><!-- /.box-body -->
 </div><!-- /. box -->
+
 <!-- merge tickets modal -->
 <div class="modal fade" id="MergeTickets">
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal" id="merge-close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                 <h4 class="modal-title">{!! Lang::get('lang.merge-ticket') !!} </h4>
+                <button type="button" class="close" data-dismiss="modal" id="merge-close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
             </div><!-- /.modal-header-->
             <div class ="modal-body">
                 <div class="row">
@@ -118,12 +113,12 @@ class="active"
                             <div class="col-md-12">
                                 <div id="merge-succ-alert" class="alert alert-success alert-dismissable" style="display:none;" >
                                     <!--<button id="dismiss-merge" type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>-->
-                                    <h4><i class="icon fa fa-check"></i>{!! Lang::get('lang.alert') !!}!</h4>
+                                    <h4><i class="icon fas fa-check"></i>{!! Lang::get('lang.alert') !!}!</h4>
                                     <div id="message-merge-succ"></div>
                                 </div>
                                 <div id="merge-err-alert" class="alert alert-danger alert-dismissable" style="display:none;">
                                     <!--<button id="dismiss-merge2" type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>-->
-                                    <h4><i class="icon fa fa-ban"></i>{!! Lang::get('lang.alert') !!}!</h4>
+                                    <h4><i class="icon fas fa-ban"></i>{!! Lang::get('lang.alert') !!}!</h4>
                                     <div id="message-merge-err"></div>
                                 </div>
                             </div>
@@ -141,7 +136,6 @@ class="active"
                                 <select class="form-control" id="select-merge-parent"  name='p_id' data-placeholder="{!! Lang::get('lang.select_tickets') !!}" style="width: 100%;"><option value=""></option></select>
                             </div>
                         </div>
-
                         <div class="row">
                             <div class="col-md-8">
                                 <label>{!! Lang::get('lang.merge-reason') !!}</label>
@@ -152,9 +146,9 @@ class="active"
                     </div><!-- mereg-body-form -->
                 </div><!-- merge-body -->
             </div><!-- /.modal-body -->
-            <div class="modal-footer">
-                <button type="button" class="btn btn-default pull-left" data-dismiss="modal" id="dismis2">{!! Lang::get('lang.close') !!}</button>
-                <input  type="submit" id="merge-btn" class="btn btn-primary pull-right" value="{!! Lang::get('lang.merge') !!}"></input>
+            <div class="modal-footer justify-content-between">
+                <button type="button" class="btn btn-default" data-dismiss="modal" id="dismis2">{!! Lang::get('lang.close') !!}</button>
+                <input  type="submit" id="merge-btn" class="btn btn-primary" value="{!! Lang::get('lang.merge') !!}">
                 {!! Form::close() !!}
             </div><!-- /.modal-footer -->
         </div><!-- /.modal-content -->
@@ -165,8 +159,8 @@ class="active"
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal" id="assign-close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                 <h4 class="modal-title">{!! Lang::get('lang.assign-ticket') !!} </h4>
+                <button type="button" class="close" data-dismiss="modal" id="assign-close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
             </div><!-- /.modal-header-->
             <div class ="modal-body">
                 <div class="row">
@@ -186,9 +180,9 @@ class="active"
                         </div>
                     </div><!-- mereg-body-form -->
                 </div><!-- merge-body -->
-            <div class="modal-footer">
-                <button type="button" class="btn btn-default pull-left" data-dismiss="modal" id="dismis2">{!! Lang::get('lang.close') !!}</button>
-                <input  type="submit" id="merge-btn" class="btn btn-primary pull-right" value="{!! Lang::get('lang.assign') !!}"></input>
+            <div class="modal-footer justify-content-between">
+                <button type="button" class="btn btn-default" data-dismiss="modal" id="dismis2">{!! Lang::get('lang.close') !!}</button>
+                <input  type="submit" id="merge-btn" class="btn btn-primary" value="{!! Lang::get('lang.assign') !!}">
                 {!! Form::close() !!}
             </div><!-- /.modal-footer -->
         </div><!-- /.modal-content -->
@@ -196,87 +190,94 @@ class="active"
 </div><!-- /.modal -->
 <!-- Assign ticket model-->
 <!-- Modal -->   
-<div class="modal fade in" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" style="display: none; padding-right: 15px;background-color: rgba(0, 0, 0, 0.7);">
+<div class="modal fade" id="myModal">
     <div class="modal-dialog" role="document">
-        <div class="col-md-2"></div>
-        <div class="col-md-8">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <button type="button" class="close closemodal" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
-                    <h4 class="modal-title" id="myModalLabel"></h4>
-                </div>
-                <div class="modal-body" id="custom-alert-body" >
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-primary pull-left yes" data-dismiss="modal">{{Lang::get('lang.ok')}}</button>
-                    <button type="button" class="btn btn-default no">{{Lang::get('lang.cancel')}}</button>
-                </div>
+        <div class="modal-content">
+            <div class="modal-header">
+                <h4 class="modal-title" id="myModalLabel"></h4>
+                <button type="button" class="close closemodal" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
+            </div>
+            <div class="modal-body" id="custom-alert-body" >
+            </div>
+            <div class="modal-footer justify-content-between">
+                <button type="button" class="btn btn-default no">{{Lang::get('lang.cancel')}}</button>
+                <button type="button" class="btn btn-primary yes" data-dismiss="modal">{{Lang::get('lang.ok')}}</button>
             </div>
         </div>
     </div>
 </div>
 {!! $table->script('vendor.Chumper.ticket-javascript') !!}
 <script>
+   
     var t_id = [];
-    $(function() {
+    var option = null;
+    $(function () {
         //Enable check and uncheck all functionality
-        $(".checkbox-toggle").click(function() {
+        $(".checkbox-toggle").click(function () {
             var clicks = $(this).data('clicks');
             if (clicks) {
                 //Uncheck all checkboxes
                 $(".mailbox-messages input[type='checkbox']").iCheck("uncheck");
-                $(".fa", this).removeClass("fa-check-square-o").addClass('fa-square-o');
+                $(".far", this).removeClass("fa-check-square").addClass('fa-square');
             } else {
                 //Check all checkboxes
                 $(".mailbox-messages input[type='checkbox']").iCheck("check");
-                $(".fa", this).removeClass("fa-square-o").addClass('fa-check-square-o');
+                $(".far", this).removeClass("fa-square").addClass('fa-check-square');
             }
             $(this).data("clicks", !clicks);
         });
     });
 
-    $(function() {
+    $(function () {
         // Enable check and uncheck all functionality
 
-        $(".checkbox-toggle").click(function() {
+        $(".checkbox-toggle").click(function () {
             var clicks = $(this).data('clicks');
             if (clicks) {
                 //Uncheck all checkboxes
                 $("input[type='checkbox']", ".mailbox-messages").iCheck("uncheck");
                 // alert($("input[type='checkbox']").val());
-                t_id = $('.selectval').map(function() {
+                t_id = $('.selectval').map(function () {
                     return $(this).val();
                 }).get();
-                showAssign(t_id)
+                showAssign(t_id);
                 // alert(checkboxValues);
             } else {
                 //Check all checkboxes
                 $("input[type='checkbox']", ".mailbox-messages").iCheck("check");
                 // alert('Hallo');
-                showAssign(t_id)
                 t_id = [];
+                showAssign(t_id);
             }
             $(this).data("clicks", !clicks);
+
         });
+
+
     });
 
-    $(document).ready(function() { /// Wait till page is loaded
-        $('#click').click(function() {
+
+    $(document).ready(function () { /// Wait till page is loaded
+        $('#click').click(function () {
             $('#refresh').load('inbox #refresh');
             $('#title_refresh').load('inbox #title_refresh');
             $('#count_refresh').load('inbox #count_refresh');
             $("#show").show();
         });
+
         $(".select2").select2();
-        $('#delete').on('click', function() {
+
+        $('#delete').on('click', function () {
             option = 0;
             $('#myModalLabel').html("{{Lang::get('lang.delete-tickets')}}");
         });
-        $('#close').on('click', function() {
+
+        $('#close').on('click', function () {
             option = 1;
             $('#myModalLabel').html("{{Lang::get('lang.close-tickets')}}");
         });
-        $("#modalpopup").on('submit', function(e) {
+
+        $("#modalpopup").on('submit', function (e) {
             e.preventDefault();
             var msg = "{{Lang::get('lang.confirm')}}";
             var values = getValues();
@@ -288,18 +289,23 @@ class="active"
                 $('.yes').html("Yes");
             }
             $('#custom-alert-body').html(msg);
-            $("#myModal").css("display", "block");
-        });
-        $(".closemodal, .no").click(function() {
-            $("#myModal").css("display", "none");
+            $("#myModal").modal("show");
         });
 
-        $('.yes').click(function() {
+        $(".closemodal, .no").click(function () {
+            $("#myModal").modal("hide");
+        });
+
+        $(".closemodal, .no").click(function () {
+            $("#myModal").modal("hide");
+        });
+
+        $('.yes').click(function () {
             var values = getValues();
             if (values == "") {
-                $("#myModal").css("display", "none");
+                 $("#myModal").modal("hide");
             } else {
-                $("#myModal").css("display", "none");
+                 $("#myModal").modal("hide");
                 $("#modalpopup").unbind('submit');
                 if (option == 0) {
                     //alert('delete');
@@ -312,25 +318,26 @@ class="active"
         });
 
         function getValues() {
-            var values = $('.selectval:checked').map(function() {
+            var values = $('.selectval:checked').map(function () {
                 return $(this).val();
             }).get();
             return values;
         }
 
         //checking merging tickets
-        $('#MergeTickets').on('show.bs.modal', function() {
+        $('#MergeTickets').on('show.bs.modal', function () {
+
             // alert("hi");
             $.ajax({
                 type: "GET",
                 url: "{{route('check.merge.tickets',0)}}",
                 dataType: "html",
                 data: {data1: t_id},
-                beforeSend: function() {
+                beforeSend: function () {
                     $("#merge_body").hide();
                     $("#merge_loader").show();
                 },
-                success: function(response) {
+                success: function (response) {
                     if (response == 0) {
                         $("#merge_body").show();
                         $("#merge-succ-alert").hide();
@@ -341,6 +348,7 @@ class="active"
                         var message = "{{Lang::get('lang.select-tickets-to merge')}}";
                         $("#merge-err-alert").show();
                         $('#message-merge-err').html(message);
+
                     } else if (response == 2) {
                         $("#merge_body").show();
                         $("#merge-succ-alert").hide();
@@ -352,6 +360,7 @@ class="active"
                         $("#merge-err-alert").show();
                         $('#message-merge-err').html(message);
                     } else {
+
                         $("#merge_body").show();
                         $("#merge-body-alert").hide();
                         $("#merge-body-form").show();
@@ -362,7 +371,7 @@ class="active"
                             url: "{{ route('get.merge.tickets',0) }}",
                             dataType: "html",
                             data: {data1: t_id},
-                            success: function(data) {
+                            success: function (data) {
                                 $('#select-merge-parent').html(data);
                             }
                             // return false;
@@ -373,17 +382,17 @@ class="active"
         });
 
         //submit merging form
-        $('#merge-form').on('submit', function() {
+        $('#merge-form').on('submit', function () {
             $.ajax({
                 type: "POST",
                 url: "{!! url('merge-tickets/') !!}/" + t_id,
                 dataType: "json",
                 data: $(this).serialize(),
-                beforeSend: function() {
+                beforeSend: function () {
                     $("#merge_body").hide();
                     $("#merge_loader").show();
                 },
-                success: function(response) {
+                success: function (response) {
                     if (response == 0) {
                         $("#merge_body").show();
                         $("#merge-succ-alert").hide();
@@ -435,7 +444,7 @@ class="active"
         $('#assign-form').on('submit', function() {
             $.ajax({
                 type: "POST",
-                url: "ticket/assign/"+t_id,
+                url: "../ticket/assign/"+t_id,
                 dataType: "html",
                 data: $(this).serialize(),
                 beforeSend: function() {
@@ -464,11 +473,11 @@ class="active"
         if (document.getElementById(id).checked) {
             t_id.push(id);
             // alert(t_id);
-        } else if(document.getElementById(id).checked === undefined){
+        } else if (document.getElementById(id).checked === undefined) {
             var index = t_id.indexOf(id);
-            if (index === -1){
+            if (index === -1) {
                 t_id.push(id);
-            } else{
+            } else {
                 t_id.splice(index, 1);
             }
         } else {
diff --git a/resources/views/themes/default1/agent/helpdesk/ticket/inbox.blade.php b/resources/views/themes/default1/agent/helpdesk/ticket/inbox.blade.php
index e644c5fee..c39017468 100644
--- a/resources/views/themes/default1/agent/helpdesk/ticket/inbox.blade.php
+++ b/resources/views/themes/default1/agent/helpdesk/ticket/inbox.blade.php
@@ -1,15 +1,19 @@
 @extends('themes.default1.agent.layout.agent')
 
 @section('Tickets')
-class="active"
+class="nav-link active"
 @stop
 
 @section('ticket-bar')
 active
 @stop
 
+@section('dept-ticket-bar')
+class="nav-link active"
+@stop
+
 @section('inbox')
-class="active"
+class="nav-link active"
 @stop
 
 @section('PageHeader')
@@ -22,18 +26,21 @@ class="active"
 }
 
 .tooltip1 .tooltiptext {
-    visibility: hidden;
-    width: 100%;
-    background-color: black;
-    color: #fff;
-    text-align: center;
-    border-radius: 6px;
-    padding: 5px 0;
-
-    /* Position the tooltip */
-    position: absolute;
-    z-index: 1;
-}
+     visibility: hidden;
+     width:300px;
+     max-height: 250px;
+     overflow: auto;
+     background-color: black;
+     color: #fff;
+     text-align: center;
+     border-radius: 6px;
+     padding: 10px;
+     font-weight: 300px !important;
+ 
+     /* Position the tooltip */
+     position: absolute;
+     z-index: 1;
+ }
 
 .tooltip1:hover .tooltiptext {
     visibility: visible;
@@ -51,39 +58,39 @@ if (Auth::user()->role == 'agent') {
 }
 ?>
 <!-- Main content -->
-<div class="box box-primary">
-    <div class="box-header with-border">
-        <h3 class="box-title">{!! Lang::get('lang.inbox') !!} </h3> <small id="title_refresh">{!! $tickets !!} {!! Lang::get('lang.tickets') !!}</small>
+   @if(Session::has('success'))
+    <div class="alert alert-success alert-dismissable">
+        <i class="fa fa-check-circle"> </i>
+        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
+        {{Session::get('success')}}
+    </div>
+    @endif
+    <!-- failure message -->
+    @if(Session::has('fails'))
+    <div class="alert alert-danger alert-dismissable">
+        <i class="fa fa-ban"> </i> <b> {!! Lang::get('lang.alert') !!}! </b>
+        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
+        {{Session::get('fails')}}
+    </div>
+    @endif
+<div class="card card-light">
+    <div class="card-header">
+        <h3 class="card-title">{!! Lang::get('lang.inbox') !!} </h3> &nbsp;<small id="title_refresh">({!! $tickets !!} {!! Lang::get('lang.tickets') !!})</small>
     </div><!-- /.box-header -->
 
-    <div class="box-body ">
-        @if(Session::has('success'))
-        <div class="alert alert-success alert-dismissable">
-            <i class="fa fa-check-circle"> </i>
-            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
-            {{Session::get('success')}}
-        </div>
-        @endif
-        <!-- failure message -->
-        @if(Session::has('fails'))
-        <div class="alert alert-danger alert-dismissable">
-            <i class="fa fa-ban"> </i> <b> {!! Lang::get('lang.alert') !!}! </b>
-            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
-            {{Session::get('fails')}}
-        </div>
-        @endif
+    <div class="card-body ">
         {!! Form::open(['id'=>'modalpopup', 'route'=>'select_all','method'=>'post']) !!}
         <!--<div class="mailbox-controls">-->
         <!-- Check all button -->
-        <a class="btn btn-default btn-sm checkbox-toggle"><i class="fa fa-square-o"></i></a>
+        <a class="btn btn-default btn-sm checkbox-toggle"><i class="far fa-square"></i></a>
         {{-- <a class="btn btn-default btn-sm" id="click"><i class="fa fa-refresh"></i></a> --}}
 
         <input type="submit" class="submit btn btn-default text-orange btn-sm" id="delete" name="submit" value="{!! Lang::get('lang.delete') !!}">
         <input type="submit" class="submit btn btn-default text-yellow btn-sm" id="close" name="submit" value="{!! Lang::get('lang.close') !!}">
-        <button type="button" class="btn btn-sm btn-default text-green" id="Edit_Ticket" data-toggle="modal" data-target="#MergeTickets"><i class="fa fa-code-fork"> </i> {!! Lang::get('lang.merge') !!}</button>
+        <button type="button" class="btn btn-sm btn-default text-green" id="Edit_Ticket" data-toggle="modal" data-target="#MergeTickets"><i class="fas fa-cogs"> </i> {!! Lang::get('lang.merge') !!}</button>
         <!--</div>-->
         
-        <button type="button" class="btn btn-sm btn-default" id="assign_Ticket" data-toggle="modal" data-target="#AssignTickets" style="display: none;"><i class="fa fa-hand-o-right"> </i> {!! Lang::get('lang.assign') !!}</button>
+        <button type="button" class="btn btn-sm btn-default" id="assign_Ticket" data-toggle="modal" data-target="#AssignTickets" style="display: none;"><i class="fas fa-hand-point-right"> </i> {!! Lang::get('lang.assign') !!}</button>
         <p><p/>
         <div class="mailbox-messages" id="refresh">
             <!--datatable-->
@@ -101,8 +108,8 @@ if (Auth::user()->role == 'agent') {
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal" id="merge-close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                 <h4 class="modal-title">{!! Lang::get('lang.merge-ticket') !!} </h4>
+                <button type="button" class="close" data-dismiss="modal" id="merge-close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
             </div><!-- /.modal-header-->
             <div class ="modal-body">
                 <div class="row">
@@ -118,12 +125,12 @@ if (Auth::user()->role == 'agent') {
                             <div class="col-md-12">
                                 <div id="merge-succ-alert" class="alert alert-success alert-dismissable" style="display:none;" >
                                     <!--<button id="dismiss-merge" type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>-->
-                                    <h4><i class="icon fa fa-check"></i>{!! Lang::get('lang.alert') !!}!</h4>
+                                    <h4><i class="icon fas fa-check"></i>{!! Lang::get('lang.alert') !!}!</h4>
                                     <div id="message-merge-succ"></div>
                                 </div>
                                 <div id="merge-err-alert" class="alert alert-danger alert-dismissable" style="display:none;">
                                     <!--<button id="dismiss-merge2" type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>-->
-                                    <h4><i class="icon fa fa-ban"></i>{!! Lang::get('lang.alert') !!}!</h4>
+                                    <h4><i class="icon fas fa-ban"></i>{!! Lang::get('lang.alert') !!}!</h4>
                                     <div id="message-merge-err"></div>
                                 </div>
                             </div>
@@ -151,9 +158,9 @@ if (Auth::user()->role == 'agent') {
                     </div><!-- mereg-body-form -->
                 </div><!-- merge-body -->
             </div><!-- /.modal-body -->
-            <div class="modal-footer">
-                <button type="button" class="btn btn-default pull-left" data-dismiss="modal" id="dismis2">{!! Lang::get('lang.close') !!}</button>
-                <input  type="submit" id="merge-btn" class="btn btn-primary pull-right" value="{!! Lang::get('lang.merge') !!}"></input>
+            <div class="modal-footer justify-content-between">
+                <button type="button" class="btn btn-default" data-dismiss="modal" id="dismis2">{!! Lang::get('lang.close') !!}</button>
+                <input  type="submit" id="merge-btn" class="btn btn-primary" value="{!! Lang::get('lang.merge') !!}">
                 {!! Form::close() !!}
             </div><!-- /.modal-footer -->
         </div><!-- /.modal-content -->
@@ -164,8 +171,8 @@ if (Auth::user()->role == 'agent') {
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal" id="assign-close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                 <h4 class="modal-title">{!! Lang::get('lang.assign-ticket') !!} </h4>
+                <button type="button" class="close" data-dismiss="modal" id="assign-close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
             </div><!-- /.modal-header-->
             <div class ="modal-body">
                 <div class="row">
@@ -185,9 +192,9 @@ if (Auth::user()->role == 'agent') {
                         </div>
                     </div><!-- mereg-body-form -->
                 </div><!-- merge-body -->
-            <div class="modal-footer">
-                <button type="button" class="btn btn-default pull-left" data-dismiss="modal" id="dismis2">{!! Lang::get('lang.close') !!}</button>
-                <input  type="submit" id="merge-btn" class="btn btn-primary pull-right" value="{!! Lang::get('lang.assign') !!}"></input>
+            <div class="modal-footer justify-content-between">
+                <button type="button" class="btn btn-default" data-dismiss="modal" id="dismis2">{!! Lang::get('lang.close') !!}</button>
+                <input  type="submit" id="merge-btn" class="btn btn-primary" value="{!! Lang::get('lang.assign') !!}">
                 {!! Form::close() !!}
             </div><!-- /.modal-footer -->
         </div><!-- /.modal-content -->
@@ -195,21 +202,18 @@ if (Auth::user()->role == 'agent') {
 </div><!-- /.modal -->
 <!-- Assign ticket model-->
 <!-- Modal -->   
-<div class="modal fade in" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" style="display: none; padding-right: 15px;background-color: rgba(0, 0, 0, 0.7);">
+<div class="modal fade" id="myModal">
     <div class="modal-dialog" role="document">
-        <div class="col-md-2"></div>
-        <div class="col-md-8">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <button type="button" class="close closemodal" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
-                    <h4 class="modal-title" id="myModalLabel"></h4>
-                </div>
-                <div class="modal-body" id="custom-alert-body" >
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-primary pull-left yes" data-dismiss="modal">{{Lang::get('lang.ok')}}</button>
-                    <button type="button" class="btn btn-default no">{{Lang::get('lang.cancel')}}</button>
-                </div>
+        <div class="modal-content">
+            <div class="modal-header">
+                <h4 class="modal-title" id="myModalLabel"></h4>
+                <button type="button" class="close closemodal" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
+            </div>
+            <div class="modal-body" id="custom-alert-body" >
+            </div>
+            <div class="modal-footer justify-content-between">
+                <button type="button" class="btn btn-default no">{{Lang::get('lang.cancel')}}</button>
+                <button type="button" class="btn btn-primary yes" data-dismiss="modal">{{Lang::get('lang.ok')}}</button>
             </div>
         </div>
     </div>
@@ -226,11 +230,11 @@ if (Auth::user()->role == 'agent') {
             if (clicks) {
                 //Uncheck all checkboxes
                 $(".mailbox-messages input[type='checkbox']").iCheck("uncheck");
-                $(".fa", this).removeClass("fa-check-square-o").addClass('fa-square-o');
+                $(".far", this).removeClass("fa-check-square").addClass('fa-square');
             } else {
                 //Check all checkboxes
                 $(".mailbox-messages input[type='checkbox']").iCheck("check");
-                $(".fa", this).removeClass("fa-square-o").addClass('fa-check-square-o');
+                $(".far", this).removeClass("fa-square").addClass('fa-check-square');
             }
             $(this).data("clicks", !clicks);
         });
@@ -297,23 +301,23 @@ if (Auth::user()->role == 'agent') {
                 $('.yes').html("Yes");
             }
             $('#custom-alert-body').html(msg);
-            $("#myModal").css("display", "block");
+            $("#myModal").modal("show");
         });
 
         $(".closemodal, .no").click(function () {
-            $("#myModal").css("display", "none");
+            $("#myModal").modal("hide");
         });
 
         $(".closemodal, .no").click(function () {
-            $("#myModal").css("display", "none");
+            $("#myModal").modal("hide");
         });
 
         $('.yes').click(function () {
             var values = getValues();
             if (values == "") {
-                $("#myModal").css("display", "none");
+                 $("#myModal").modal("hide");
             } else {
-                $("#myModal").css("display", "none");
+                 $("#myModal").modal("hide");
                 $("#modalpopup").unbind('submit');
                 if (option == 0) {
                     //alert('delete');
diff --git a/resources/views/themes/default1/agent/helpdesk/ticket/myticket.blade.php b/resources/views/themes/default1/agent/helpdesk/ticket/myticket.blade.php
index 72e2998c0..e4eda34e2 100644
--- a/resources/views/themes/default1/agent/helpdesk/ticket/myticket.blade.php
+++ b/resources/views/themes/default1/agent/helpdesk/ticket/myticket.blade.php
@@ -1,43 +1,51 @@
 @extends('themes.default1.agent.layout.agent')
 
 @section('Tickets')
-class="active"
+class="nav-link active"
 @stop
 
 @section('ticket-bar')
 active
 @stop
 
-@section('myticket')
-class="active"
+@section('dept-ticket-bar')
+class="nav-link active"
 @stop
+
+@section('myticket')
+class="nav-link active"
+@stop
+
 @section('PageHeader')
 <h1>{{Lang::get('lang.tickets')}}</h1>
 <style>
- .tooltip1 {
-     position: relative;
-     /*display: inline-block;*/
-     /*border-bottom: 1px dotted black;*/
- }
- 
- .tooltip1 .tooltiptext {
+.tooltip1 {
+    position: relative;
+    /*display: inline-block;*/
+    /*border-bottom: 1px dotted black;*/
+}
+
+.tooltip1 .tooltiptext {
      visibility: hidden;
-     width: 100%;
+     width:300px;
+     max-height: 250px;
+     overflow: auto;
      background-color: black;
      color: #fff;
      text-align: center;
      border-radius: 6px;
-     padding: 5px 0;
+     padding: 10px;
+     font-weight: 300px !important;
  
      /* Position the tooltip */
      position: absolute;
      z-index: 1;
  }
- 
- .tooltip1:hover .tooltiptext {
-     visibility: visible;
- }
- </style>
+
+.tooltip1:hover .tooltiptext {
+    visibility: visible;
+}
+</style>
 @stop
 @section('content')
 <?php
@@ -50,45 +58,46 @@ if (Auth::user()->role == 'agent') {
 }
 ?>
 <!-- Main content -->
-<div class="box box-primary">
-    <div class="box-header with-border">
-        <h3 class="box-title">{!! Lang::get('lang.my_tickets') !!}</h3> <small id="title_refresh">{!! $tickets !!} {!! Lang::get('lang.tickets') !!}</small>
+   @if(Session::has('success'))
+    <div class="alert alert-success alert-dismissable">
+        <i class="fa fa-check-circle"> </i>
+        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
+        {{Session::get('success')}}
+    </div>
+    @endif
+    <!-- failure message -->
+    @if(Session::has('fails'))
+    <div class="alert alert-danger alert-dismissable">
+        <i class="fa fa-ban"> </i> <b> {!! Lang::get('lang.alert') !!}! </b>
+        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
+        {{Session::get('fails')}}
+    </div>
+    @endif
+<div class="card card-light">
+    <div class="card-header">
+        <h3 class="card-title">{!! Lang::get('lang.my_tickets') !!} </h3> &nbsp;<small id="title_refresh">({!! $tickets !!} {!! Lang::get('lang.tickets') !!})</small>
     </div><!-- /.box-header -->
 
-    <div class="box-body">
-        @if(Session::has('success'))
-        <div class="alert alert-success alert-dismissable">
-            <i class="fa  fa-check-circle"> </i> 
-            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
-            {{Session::get('success')}}
-        </div>
-        @endif
-        <!-- failure message -->
-        @if(Session::has('fails'))
-        <div class="alert alert-danger alert-dismissable">
-            <i class="fa fa-ban"> </i> <b> {!! Lang::get('lang.alert') !!}! </b>
-            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
-            {{Session::get('fails')}}
-        </div>
-        @endif
+    <div class="card-body ">
         {!! Form::open(['id'=>'modalpopup', 'route'=>'select_all','method'=>'post']) !!}
         <!--<div class="mailbox-controls">-->
         <!-- Check all button -->
-        <a class="btn btn-default btn-sm checkbox-toggle"><i class="fa fa-square-o"></i></a>
+        <a class="btn btn-default btn-sm checkbox-toggle"><i class="far fa-square"></i></a>
         {{-- <a class="btn btn-default btn-sm" id="click"><i class="fa fa-refresh"></i></a> --}}
+
         <input type="submit" class="submit btn btn-default text-orange btn-sm" id="delete" name="submit" value="{!! Lang::get('lang.delete') !!}">
         <input type="submit" class="submit btn btn-default text-yellow btn-sm" id="close" name="submit" value="{!! Lang::get('lang.close') !!}">
-        <button type="button" class="btn btn-sm btn-default text-green" id="Edit_Ticket" data-toggle="modal" data-target="#MergeTickets"><i class="fa fa-code-fork"> </i> {!! Lang::get('lang.merge') !!}</button>
-        
-        <button type="button" class="btn btn-sm btn-default" id="assign_Ticket" data-toggle="modal" data-target="#AssignTickets" style="display: none;"><i class="fa fa-hand-o-right"> </i> {!! Lang::get('lang.assign') !!}</button>
-       
+        <button type="button" class="btn btn-sm btn-default text-green" id="Edit_Ticket" data-toggle="modal" data-target="#MergeTickets"><i class="fas fa-cogs"> </i> {!! Lang::get('lang.merge') !!}</button>
         <!--</div>-->
+        
+        <button type="button" class="btn btn-sm btn-default" id="assign_Ticket" data-toggle="modal" data-target="#AssignTickets" style="display: none;"><i class="fas fa-hand-point-right"> </i> {!! Lang::get('lang.assign') !!}</button>
         <p><p/>
-        <div class="mailbox-messages"  id="refresh">
-            <p style="display:none;text-align:center; position:fixed; margin-left:40%;margin-top:-70px;" id="show" class="text-red"><b>{!! Lang::get('lang.loading') !!}...</b></p>
-            <!-- table -->
-             {!!$table->render('vendor.Chumper.template')!!}
-
+        <div class="mailbox-messages" id="refresh">
+            <!--datatable-->
+            {!!$table->render('vendor.Chumper.template')!!}
+             
+            
+            <!-- /.datatable -->
         </div><!-- /.mail-box-messages -->
         {!! Form::close() !!}
     </div><!-- /.box-body -->
@@ -99,8 +108,8 @@ if (Auth::user()->role == 'agent') {
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal" id="merge-close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                 <h4 class="modal-title">{!! Lang::get('lang.merge-ticket') !!} </h4>
+                <button type="button" class="close" data-dismiss="modal" id="merge-close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
             </div><!-- /.modal-header-->
             <div class ="modal-body">
                 <div class="row">
@@ -116,12 +125,12 @@ if (Auth::user()->role == 'agent') {
                             <div class="col-md-12">
                                 <div id="merge-succ-alert" class="alert alert-success alert-dismissable" style="display:none;" >
                                     <!--<button id="dismiss-merge" type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>-->
-                                    <h4><i class="icon fa fa-check"></i>{!! Lang::get('lang.alert') !!}!</h4>
+                                    <h4><i class="icon fas fa-check"></i>{!! Lang::get('lang.alert') !!}!</h4>
                                     <div id="message-merge-succ"></div>
                                 </div>
                                 <div id="merge-err-alert" class="alert alert-danger alert-dismissable" style="display:none;">
                                     <!--<button id="dismiss-merge2" type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>-->
-                                    <h4><i class="icon fa fa-ban"></i>{!! Lang::get('lang.alert') !!}!</h4>
+                                    <h4><i class="icon fas fa-ban"></i>{!! Lang::get('lang.alert') !!}!</h4>
                                     <div id="message-merge-err"></div>
                                 </div>
                             </div>
@@ -139,7 +148,6 @@ if (Auth::user()->role == 'agent') {
                                 <select class="form-control" id="select-merge-parent"  name='p_id' data-placeholder="{!! Lang::get('lang.select_tickets') !!}" style="width: 100%;"><option value=""></option></select>
                             </div>
                         </div>
-
                         <div class="row">
                             <div class="col-md-8">
                                 <label>{!! Lang::get('lang.merge-reason') !!}</label>
@@ -150,9 +158,9 @@ if (Auth::user()->role == 'agent') {
                     </div><!-- mereg-body-form -->
                 </div><!-- merge-body -->
             </div><!-- /.modal-body -->
-            <div class="modal-footer">
-                <button type="button" class="btn btn-default pull-left" data-dismiss="modal" id="dismis2">{!! Lang::get('lang.close') !!}</button>
-                <input  type="submit" id="merge-btn" class="btn btn-primary pull-right" value="{!! Lang::get('lang.merge') !!}"></input>
+            <div class="modal-footer justify-content-between">
+                <button type="button" class="btn btn-default" data-dismiss="modal" id="dismis2">{!! Lang::get('lang.close') !!}</button>
+                <input  type="submit" id="merge-btn" class="btn btn-primary" value="{!! Lang::get('lang.merge') !!}">
                 {!! Form::close() !!}
             </div><!-- /.modal-footer -->
         </div><!-- /.modal-content -->
@@ -163,8 +171,8 @@ if (Auth::user()->role == 'agent') {
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal" id="assign-close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                 <h4 class="modal-title">{!! Lang::get('lang.assign-ticket') !!} </h4>
+                <button type="button" class="close" data-dismiss="modal" id="assign-close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
             </div><!-- /.modal-header-->
             <div class ="modal-body">
                 <div class="row">
@@ -184,80 +192,74 @@ if (Auth::user()->role == 'agent') {
                         </div>
                     </div><!-- mereg-body-form -->
                 </div><!-- merge-body -->
-            <div class="modal-footer">
-                <button type="button" class="btn btn-default pull-left" data-dismiss="modal" id="dismis2">{!! Lang::get('lang.close') !!}</button>
-                <input  type="submit" id="merge-btn" class="btn btn-primary pull-right" value="{!! Lang::get('lang.assign') !!}"></input>
+            <div class="modal-footer justify-content-between">
+                <button type="button" class="btn btn-default" data-dismiss="modal" id="dismis2">{!! Lang::get('lang.close') !!}</button>
+                <input  type="submit" id="merge-btn" class="btn btn-primary" value="{!! Lang::get('lang.assign') !!}">
                 {!! Form::close() !!}
             </div><!-- /.modal-footer -->
         </div><!-- /.modal-content -->
     </div><!-- /.modal-dialog -->
 </div><!-- /.modal -->
 <!-- Assign ticket model-->
-
 <!-- Modal -->   
-<div class="modal fade in" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" style="display: none; padding-right: 15px;background-color: rgba(0, 0, 0, 0.7);">
+<div class="modal fade" id="myModal">
     <div class="modal-dialog" role="document">
-        <div class="col-md-2"></div>
-        <div class="col-md-8">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <button type="button" class="close closemodal" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
-                    <h4 class="modal-title" id="myModalLabel"></h4>
-                </div>
-                <div class="modal-body" id="custom-alert-body" >
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-primary pull-left yes" data-dismiss="modal">{{Lang::get('lang.ok')}}</button>
-                    <button type="button" class="btn btn-default no">{{Lang::get('lang.cancel')}}</button>
-                </div>
+        <div class="modal-content">
+            <div class="modal-header">
+                <h4 class="modal-title" id="myModalLabel"></h4>
+                <button type="button" class="close closemodal" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
+            </div>
+            <div class="modal-body" id="custom-alert-body" >
+            </div>
+            <div class="modal-footer justify-content-between">
+                <button type="button" class="btn btn-default no">{{Lang::get('lang.cancel')}}</button>
+                <button type="button" class="btn btn-primary yes" data-dismiss="modal">{{Lang::get('lang.ok')}}</button>
             </div>
         </div>
     </div>
 </div>
-
-
 {!! $table->script('vendor.Chumper.ticket-javascript') !!}
-
 <script>
+   
     var t_id = [];
     var option = null;
-    $(function() {
+    $(function () {
         //Enable check and uncheck all functionality
-        $(".checkbox-toggle").click(function() {
+        $(".checkbox-toggle").click(function () {
             var clicks = $(this).data('clicks');
             if (clicks) {
                 //Uncheck all checkboxes
                 $(".mailbox-messages input[type='checkbox']").iCheck("uncheck");
-                $(".fa", this).removeClass("fa-check-square-o").addClass('fa-square-o');
+                $(".far", this).removeClass("fa-check-square").addClass('fa-square');
             } else {
                 //Check all checkboxes
                 $(".mailbox-messages input[type='checkbox']").iCheck("check");
-                $(".fa", this).removeClass("fa-square-o").addClass('fa-check-square-o');
+                $(".far", this).removeClass("fa-square").addClass('fa-check-square');
             }
             $(this).data("clicks", !clicks);
         });
     });
 
-    $(function() {
+    $(function () {
         // Enable check and uncheck all functionality
 
-        $(".checkbox-toggle").click(function() {
+        $(".checkbox-toggle").click(function () {
             var clicks = $(this).data('clicks');
             if (clicks) {
                 //Uncheck all checkboxes
                 $("input[type='checkbox']", ".mailbox-messages").iCheck("uncheck");
                 // alert($("input[type='checkbox']").val());
-                t_id = $('.selectval').map(function() {
+                t_id = $('.selectval').map(function () {
                     return $(this).val();
                 }).get();
-                showAssign(t_id)
+                showAssign(t_id);
                 // alert(checkboxValues);
             } else {
                 //Check all checkboxes
                 $("input[type='checkbox']", ".mailbox-messages").iCheck("check");
                 // alert('Hallo');
                 t_id = [];
-                showAssign(t_id)
+                showAssign(t_id);
             }
             $(this).data("clicks", !clicks);
 
@@ -267,8 +269,8 @@ if (Auth::user()->role == 'agent') {
     });
 
 
-    $(document).ready(function() { /// Wait till page is loaded
-        $('#click').click(function() {
+    $(document).ready(function () { /// Wait till page is loaded
+        $('#click').click(function () {
             $('#refresh').load('inbox #refresh');
             $('#title_refresh').load('inbox #title_refresh');
             $('#count_refresh').load('inbox #count_refresh');
@@ -277,17 +279,17 @@ if (Auth::user()->role == 'agent') {
 
         $(".select2").select2();
 
-        $('#delete').on('click', function() {
+        $('#delete').on('click', function () {
             option = 0;
             $('#myModalLabel').html("{{Lang::get('lang.delete-tickets')}}");
         });
 
-        $('#close').on('click', function() {
+        $('#close').on('click', function () {
             option = 1;
             $('#myModalLabel').html("{{Lang::get('lang.close-tickets')}}");
         });
 
-        $("#modalpopup").on('submit', function(e) {
+        $("#modalpopup").on('submit', function (e) {
             e.preventDefault();
             var msg = "{{Lang::get('lang.confirm')}}";
             var values = getValues();
@@ -299,21 +301,23 @@ if (Auth::user()->role == 'agent') {
                 $('.yes').html("Yes");
             }
             $('#custom-alert-body').html(msg);
-            $("#myModal").css("display", "block");
+            $("#myModal").modal("show");
         });
 
-        $(".closemodal, .no").click(function() {
-
-            $("#myModal").css("display", "none");
-
+        $(".closemodal, .no").click(function () {
+            $("#myModal").modal("hide");
         });
 
-        $('.yes').click(function() {
+        $(".closemodal, .no").click(function () {
+            $("#myModal").modal("hide");
+        });
+
+        $('.yes').click(function () {
             var values = getValues();
             if (values == "") {
-                $("#myModal").css("display", "none");
+                 $("#myModal").modal("hide");
             } else {
-                $("#myModal").css("display", "none");
+                 $("#myModal").modal("hide");
                 $("#modalpopup").unbind('submit');
                 if (option == 0) {
                     //alert('delete');
@@ -326,17 +330,14 @@ if (Auth::user()->role == 'agent') {
         });
 
         function getValues() {
-            var values = $('.selectval:checked').map(function() {
+            var values = $('.selectval:checked').map(function () {
                 return $(this).val();
             }).get();
             return values;
         }
 
-
-
-
         //checking merging tickets
-        $('#MergeTickets').on('show.bs.modal', function() {
+        $('#MergeTickets').on('show.bs.modal', function () {
 
             // alert("hi");
             $.ajax({
@@ -344,11 +345,11 @@ if (Auth::user()->role == 'agent') {
                 url: "{{route('check.merge.tickets',0)}}",
                 dataType: "html",
                 data: {data1: t_id},
-                beforeSend: function() {
+                beforeSend: function () {
                     $("#merge_body").hide();
                     $("#merge_loader").show();
                 },
-                success: function(response) {
+                success: function (response) {
                     if (response == 0) {
                         $("#merge_body").show();
                         $("#merge-succ-alert").hide();
@@ -382,31 +383,28 @@ if (Auth::user()->role == 'agent') {
                             url: "{{ route('get.merge.tickets',0) }}",
                             dataType: "html",
                             data: {data1: t_id},
-                            success: function(data) {
-
+                            success: function (data) {
                                 $('#select-merge-parent').html(data);
                             }
                             // return false;
                         });
-
                     }
                 }
             });
         });
 
         //submit merging form
-        $('#merge-form').on('submit', function() {
+        $('#merge-form').on('submit', function () {
             $.ajax({
                 type: "POST",
                 url: "{!! url('merge-tickets/') !!}/" + t_id,
                 dataType: "json",
                 data: $(this).serialize(),
-                beforeSend: function() {
+                beforeSend: function () {
                     $("#merge_body").hide();
                     $("#merge_loader").show();
-
                 },
-                success: function(response) {
+                success: function (response) {
                     if (response == 0) {
                         $("#merge_body").show();
                         $("#merge-succ-alert").hide();
@@ -417,7 +415,6 @@ if (Auth::user()->role == 'agent') {
                         var message = "{{Lang::get('lang.merge-error')}}";
                         $("#merge-err-alert").show();
                         $('#message-merge-err').html(message);
-
                     } else {
                         $("#merge_body").show();
                         $("#merge-err-alert").hide();
@@ -432,13 +429,10 @@ if (Auth::user()->role == 'agent') {
                             $("#alert11").hide();
                             location.reload();
                         }, 1000);
-
                     }
-
                 }
             })
             return false;
-
         });
 
         $('#AssignTickets').on('show.bs.modal', function() {
@@ -487,19 +481,15 @@ if (Auth::user()->role == 'agent') {
         });
     });
 
-
-
-
-
     function someFunction(id) {
         if (document.getElementById(id).checked) {
             t_id.push(id);
             // alert(t_id);
-        } else if(document.getElementById(id).checked === undefined){
+        } else if (document.getElementById(id).checked === undefined) {
             var index = t_id.indexOf(id);
-            if (index === -1){
+            if (index === -1) {
                 t_id.push(id);
-            } else{
+            } else {
                 t_id.splice(index, 1);
             }
         } else {
@@ -518,6 +508,5 @@ if (Auth::user()->role == 'agent') {
             $('#assign_Ticket').css('display', 'none');
         }
     }
-
 </script>
 @stop
\ No newline at end of file
diff --git a/resources/views/themes/default1/agent/helpdesk/ticket/overdue.blade.php b/resources/views/themes/default1/agent/helpdesk/ticket/overdue.blade.php
index 1bd289111..8126727df 100644
--- a/resources/views/themes/default1/agent/helpdesk/ticket/overdue.blade.php
+++ b/resources/views/themes/default1/agent/helpdesk/ticket/overdue.blade.php
@@ -1,43 +1,51 @@
 @extends('themes.default1.agent.layout.agent')
 
 @section('Tickets')
-class="active"
+class="nav-link active"
 @stop
 
 @section('ticket-bar')
 active
 @stop
 
-@section('overdue')
-class="active"
+@section('dept-ticket-bar')
+class="nav-link active"
 @stop
+
+@section('overdue')
+class="nav-link active"
+@stop
+
 @section('PageHeader')
 <h1>{{Lang::get('lang.tickets')}}</h1>
 <style>
- .tooltip1 {
-     position: relative;
-     /*display: inline-block;*/
-     /*border-bottom: 1px dotted black;*/
- }
- 
- .tooltip1 .tooltiptext {
+.tooltip1 {
+    position: relative;
+    /*display: inline-block;*/
+    /*border-bottom: 1px dotted black;*/
+}
+
+.tooltip1 .tooltiptext {
      visibility: hidden;
-     width: 100%;
+     width:300px;
+     max-height: 250px;
+     overflow: auto;
      background-color: black;
      color: #fff;
      text-align: center;
      border-radius: 6px;
-     padding: 5px 0;
+     padding: 10px;
+     font-weight: 300px !important;
  
      /* Position the tooltip */
      position: absolute;
      z-index: 1;
  }
- 
- .tooltip1:hover .tooltiptext {
-     visibility: visible;
- }
- </style>
+
+.tooltip1:hover .tooltiptext {
+    visibility: visible;
+}
+</style>
 @stop
 @section('content')
 <?php
@@ -58,53 +66,58 @@ class="active"
 
 ?>
 <!-- Main content -->
-<div class="box box-primary">
-    <div class="box-header with-border">
-        <h3 class="box-title">{!! Lang::get('lang.overdue') !!} </h3> <small id="title_refresh">{!! $overdue_ticket !!} {!! Lang::get('lang.tickets') !!}</small>
+   @if(Session::has('success'))
+    <div class="alert alert-success alert-dismissable">
+        <i class="fa fa-check-circle"> </i>
+        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
+        {{Session::get('success')}}
+    </div>
+    @endif
+    <!-- failure message -->
+    @if(Session::has('fails'))
+    <div class="alert alert-danger alert-dismissable">
+        <i class="fa fa-ban"> </i> <b> {!! Lang::get('lang.alert') !!}! </b>
+        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
+        {{Session::get('fails')}}
+    </div>
+    @endif
+<div class="card card-light">
+    <div class="card-header">
+        <h3 class="card-title">{!! Lang::get('lang.overdue') !!} </h3> &nbsp;<small id="title_refresh">({!! $overdue_ticket !!} {!! Lang::get('lang.tickets') !!})</small>
     </div><!-- /.box-header -->
-    <div class="box-body ">
-        @if(Session::has('success'))
-        <div class="alert alert-success alert-dismissable">
-            <i class="fa  fa-check-circle"></i>
-            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
-            {{Session::get('success')}}
-        </div>
-        @endif
-        <!-- failure message -->
-        @if(Session::has('fails'))
-        <div class="alert alert-danger alert-dismissable">
-            <i class="fa fa-ban"> </i> <b> {!! Lang::get('lang.alert') !!}! </b>
-            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
-            {{Session::get('fails')}}
-        </div>
-        @endif
+
+    <div class="card-body ">
         {!! Form::open(['id'=>'modalpopup', 'route'=>'select_all','method'=>'post']) !!}
         <!--<div class="mailbox-controls">-->
-            <!-- Check all button -->
-            <a class="btn btn-default btn-sm checkbox-toggle"><i class="fa fa-square-o"></i></a>
-            {{-- <a class="btn btn-default btn-sm" id="click"><i class="fa fa-refresh"></i></a> --}}
-            <input type="submit" class="submit btn btn-default text-orange btn-sm" id="delete" name="submit" value="{!! Lang::get('lang.delete') !!}">
-            <input type="submit" class="submit btn btn-default text-yellow btn-sm" id="close" name="submit" value="{!! Lang::get('lang.close') !!}">
-            <button type="button" class="btn btn-sm btn-default text-green" id="Edit_Ticket" data-toggle="modal" data-target="#MergeTickets"><i class="fa fa-code-fork"> </i> {!! Lang::get('lang.merge') !!}</button>
-            
-        <button type="button" class="btn btn-sm btn-default" id="assign_Ticket" data-toggle="modal" data-target="#AssignTickets" style="display: none;"><i class="fa fa-hand-o-right"> </i> {!! Lang::get('lang.assign') !!}</button>
-            <!--</div>-->
+        <!-- Check all button -->
+        <a class="btn btn-default btn-sm checkbox-toggle"><i class="far fa-square"></i></a>
+        {{-- <a class="btn btn-default btn-sm" id="click"><i class="fa fa-refresh"></i></a> --}}
+
+        <input type="submit" class="submit btn btn-default text-orange btn-sm" id="delete" name="submit" value="{!! Lang::get('lang.delete') !!}">
+        <input type="submit" class="submit btn btn-default text-yellow btn-sm" id="close" name="submit" value="{!! Lang::get('lang.close') !!}">
+        <button type="button" class="btn btn-sm btn-default text-green" id="Edit_Ticket" data-toggle="modal" data-target="#MergeTickets"><i class="fas fa-cogs"> </i> {!! Lang::get('lang.merge') !!}</button>
+        <!--</div>-->
+        
+        <button type="button" class="btn btn-sm btn-default" id="assign_Ticket" data-toggle="modal" data-target="#AssignTickets" style="display: none;"><i class="fas fa-hand-point-right"> </i> {!! Lang::get('lang.assign') !!}</button>
         <p><p/>
         <div class="mailbox-messages" id="refresh">
             <!--datatable-->
-             {!!$table->render('vendor.Chumper.template')!!}
+            {!!$table->render('vendor.Chumper.template')!!}
+             
+            
             <!-- /.datatable -->
         </div><!-- /.mail-box-messages -->
         {!! Form::close() !!}
     </div><!-- /.box-body -->
 </div><!-- /. box -->
+
 <!-- merge tickets modal -->
 <div class="modal fade" id="MergeTickets">
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal" id="merge-close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                 <h4 class="modal-title">{!! Lang::get('lang.merge-ticket') !!} </h4>
+                <button type="button" class="close" data-dismiss="modal" id="merge-close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
             </div><!-- /.modal-header-->
             <div class ="modal-body">
                 <div class="row">
@@ -120,12 +133,12 @@ class="active"
                             <div class="col-md-12">
                                 <div id="merge-succ-alert" class="alert alert-success alert-dismissable" style="display:none;" >
                                     <!--<button id="dismiss-merge" type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>-->
-                                    <h4><i class="icon fa fa-check"></i>{!! Lang::get('lang.alert') !!}!</h4>
+                                    <h4><i class="icon fas fa-check"></i>{!! Lang::get('lang.alert') !!}!</h4>
                                     <div id="message-merge-succ"></div>
                                 </div>
                                 <div id="merge-err-alert" class="alert alert-danger alert-dismissable" style="display:none;">
                                     <!--<button id="dismiss-merge2" type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>-->
-                                    <h4><i class="icon fa fa-ban"></i>{!! Lang::get('lang.alert') !!}!</h4>
+                                    <h4><i class="icon fas fa-ban"></i>{!! Lang::get('lang.alert') !!}!</h4>
                                     <div id="message-merge-err"></div>
                                 </div>
                             </div>
@@ -143,7 +156,6 @@ class="active"
                                 <select class="form-control" id="select-merge-parent"  name='p_id' data-placeholder="{!! Lang::get('lang.select_tickets') !!}" style="width: 100%;"><option value=""></option></select>
                             </div>
                         </div>
-
                         <div class="row">
                             <div class="col-md-8">
                                 <label>{!! Lang::get('lang.merge-reason') !!}</label>
@@ -154,9 +166,9 @@ class="active"
                     </div><!-- mereg-body-form -->
                 </div><!-- merge-body -->
             </div><!-- /.modal-body -->
-            <div class="modal-footer">
-                <button type="button" class="btn btn-default pull-left" data-dismiss="modal" id="dismis2">{!! Lang::get('lang.close') !!}</button>
-                <input  type="submit" id="merge-btn" class="btn btn-primary pull-right" value="{!! Lang::get('lang.merge') !!}"></input>
+            <div class="modal-footer justify-content-between">
+                <button type="button" class="btn btn-default" data-dismiss="modal" id="dismis2">{!! Lang::get('lang.close') !!}</button>
+                <input  type="submit" id="merge-btn" class="btn btn-primary" value="{!! Lang::get('lang.merge') !!}">
                 {!! Form::close() !!}
             </div><!-- /.modal-footer -->
         </div><!-- /.modal-content -->
@@ -167,8 +179,8 @@ class="active"
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal" id="assign-close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                 <h4 class="modal-title">{!! Lang::get('lang.assign-ticket') !!} </h4>
+                <button type="button" class="close" data-dismiss="modal" id="assign-close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
             </div><!-- /.modal-header-->
             <div class ="modal-body">
                 <div class="row">
@@ -188,9 +200,9 @@ class="active"
                         </div>
                     </div><!-- mereg-body-form -->
                 </div><!-- merge-body -->
-            <div class="modal-footer">
-                <button type="button" class="btn btn-default pull-left" data-dismiss="modal" id="dismis2">{!! Lang::get('lang.close') !!}</button>
-                <input  type="submit" id="merge-btn" class="btn btn-primary pull-right" value="{!! Lang::get('lang.assign') !!}"></input>
+            <div class="modal-footer justify-content-between">
+                <button type="button" class="btn btn-default" data-dismiss="modal" id="dismis2">{!! Lang::get('lang.close') !!}</button>
+                <input  type="submit" id="merge-btn" class="btn btn-primary" value="{!! Lang::get('lang.assign') !!}">
                 {!! Form::close() !!}
             </div><!-- /.modal-footer -->
         </div><!-- /.modal-content -->
@@ -198,67 +210,64 @@ class="active"
 </div><!-- /.modal -->
 <!-- Assign ticket model-->
 <!-- Modal -->   
-<div class="modal fade in" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" style="display: none; padding-right: 15px;background-color: rgba(0, 0, 0, 0.7);">
+<div class="modal fade" id="myModal">
     <div class="modal-dialog" role="document">
-        <div class="col-md-2"></div>
-        <div class="col-md-8">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <button type="button" class="close closemodal" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
-                    <h4 class="modal-title" id="myModalLabel"></h4>
-                </div>
-                <div class="modal-body" id="custom-alert-body" >
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-primary pull-left yes" data-dismiss="modal">{{Lang::get('lang.ok')}}</button>
-                    <button type="button" class="btn btn-default no">{{Lang::get('lang.cancel')}}</button>
-                </div>
+        <div class="modal-content">
+            <div class="modal-header">
+                <h4 class="modal-title" id="myModalLabel"></h4>
+                <button type="button" class="close closemodal" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
+            </div>
+            <div class="modal-body" id="custom-alert-body" >
+            </div>
+            <div class="modal-footer justify-content-between">
+                <button type="button" class="btn btn-default no">{{Lang::get('lang.cancel')}}</button>
+                <button type="button" class="btn btn-primary yes" data-dismiss="modal">{{Lang::get('lang.ok')}}</button>
             </div>
         </div>
     </div>
 </div>
-
 {!! $table->script('vendor.Chumper.ticket-javascript') !!}
 <script>
+   
     var t_id = [];
     var option = null;
-    $(function() {
+    $(function () {
         //Enable check and uncheck all functionality
-        $(".checkbox-toggle").click(function() {
+        $(".checkbox-toggle").click(function () {
             var clicks = $(this).data('clicks');
             if (clicks) {
                 //Uncheck all checkboxes
                 $(".mailbox-messages input[type='checkbox']").iCheck("uncheck");
-                $(".fa", this).removeClass("fa-check-square-o").addClass('fa-square-o');
+                $(".far", this).removeClass("fa-check-square").addClass('fa-square');
             } else {
                 //Check all checkboxes
                 $(".mailbox-messages input[type='checkbox']").iCheck("check");
-                $(".fa", this).removeClass("fa-square-o").addClass('fa-check-square-o');
+                $(".far", this).removeClass("fa-square").addClass('fa-check-square');
             }
             $(this).data("clicks", !clicks);
         });
     });
 
-    $(function() {
+    $(function () {
         // Enable check and uncheck all functionality
 
-        $(".checkbox-toggle").click(function() {
+        $(".checkbox-toggle").click(function () {
             var clicks = $(this).data('clicks');
             if (clicks) {
                 //Uncheck all checkboxes
                 $("input[type='checkbox']", ".mailbox-messages").iCheck("uncheck");
                 // alert($("input[type='checkbox']").val());
-                t_id = $('.selectval').map(function() {
+                t_id = $('.selectval').map(function () {
                     return $(this).val();
                 }).get();
-                showAssign(t_id)
+                showAssign(t_id);
                 // alert(checkboxValues);
             } else {
                 //Check all checkboxes
                 $("input[type='checkbox']", ".mailbox-messages").iCheck("check");
                 // alert('Hallo');
                 t_id = [];
-                showAssign(t_id)
+                showAssign(t_id);
             }
             $(this).data("clicks", !clicks);
 
@@ -268,8 +277,8 @@ class="active"
     });
 
 
-    $(document).ready(function() { /// Wait till page is loaded
-        $('#click').click(function() {
+    $(document).ready(function () { /// Wait till page is loaded
+        $('#click').click(function () {
             $('#refresh').load('inbox #refresh');
             $('#title_refresh').load('inbox #title_refresh');
             $('#count_refresh').load('inbox #count_refresh');
@@ -278,17 +287,17 @@ class="active"
 
         $(".select2").select2();
 
-        $('#delete').on('click', function() {
+        $('#delete').on('click', function () {
             option = 0;
             $('#myModalLabel').html("{{Lang::get('lang.delete-tickets')}}");
         });
 
-        $('#close').on('click', function() {
+        $('#close').on('click', function () {
             option = 1;
             $('#myModalLabel').html("{{Lang::get('lang.close-tickets')}}");
         });
 
-        $("#modalpopup").on('submit', function(e) {
+        $("#modalpopup").on('submit', function (e) {
             e.preventDefault();
             var msg = "{{Lang::get('lang.confirm')}}";
             var values = getValues();
@@ -300,27 +309,23 @@ class="active"
                 $('.yes').html("Yes");
             }
             $('#custom-alert-body').html(msg);
-            $("#myModal").css("display", "block");
+            $("#myModal").modal("show");
         });
 
-        $(".closemodal, .no").click(function() {
-
-            $("#myModal").css("display", "none");
-
+        $(".closemodal, .no").click(function () {
+            $("#myModal").modal("hide");
         });
 
-        $(".closemodal, .no").click(function() {
-
-            $("#myModal").css("display", "none");
-
+        $(".closemodal, .no").click(function () {
+            $("#myModal").modal("hide");
         });
 
-        $('.yes').click(function() {
+        $('.yes').click(function () {
             var values = getValues();
             if (values == "") {
-                $("#myModal").css("display", "none");
+                 $("#myModal").modal("hide");
             } else {
-                $("#myModal").css("display", "none");
+                 $("#myModal").modal("hide");
                 $("#modalpopup").unbind('submit');
                 if (option == 0) {
                     //alert('delete');
@@ -333,16 +338,14 @@ class="active"
         });
 
         function getValues() {
-            var values = $('.selectval:checked').map(function() {
+            var values = $('.selectval:checked').map(function () {
                 return $(this).val();
             }).get();
             return values;
         }
 
-
-
         //checking merging tickets
-        $('#MergeTickets').on('show.bs.modal', function() {
+        $('#MergeTickets').on('show.bs.modal', function () {
 
             // alert("hi");
             $.ajax({
@@ -350,11 +353,11 @@ class="active"
                 url: "{{route('check.merge.tickets',0)}}",
                 dataType: "html",
                 data: {data1: t_id},
-                beforeSend: function() {
+                beforeSend: function () {
                     $("#merge_body").hide();
                     $("#merge_loader").show();
                 },
-                success: function(response) {
+                success: function (response) {
                     if (response == 0) {
                         $("#merge_body").show();
                         $("#merge-succ-alert").hide();
@@ -388,31 +391,28 @@ class="active"
                             url: "{{ route('get.merge.tickets',0) }}",
                             dataType: "html",
                             data: {data1: t_id},
-                            success: function(data) {
-
+                            success: function (data) {
                                 $('#select-merge-parent').html(data);
                             }
                             // return false;
                         });
-
                     }
                 }
             });
         });
 
         //submit merging form
-        $('#merge-form').on('submit', function() {
+        $('#merge-form').on('submit', function () {
             $.ajax({
                 type: "POST",
                 url: "{!! url('merge-tickets/') !!}/" + t_id,
                 dataType: "json",
                 data: $(this).serialize(),
-                beforeSend: function() {
+                beforeSend: function () {
                     $("#merge_body").hide();
                     $("#merge_loader").show();
-
                 },
-                success: function(response) {
+                success: function (response) {
                     if (response == 0) {
                         $("#merge_body").show();
                         $("#merge-succ-alert").hide();
@@ -423,7 +423,6 @@ class="active"
                         var message = "{{Lang::get('lang.merge-error')}}";
                         $("#merge-err-alert").show();
                         $('#message-merge-err').html(message);
-
                     } else {
                         $("#merge_body").show();
                         $("#merge-err-alert").hide();
@@ -438,14 +437,12 @@ class="active"
                             $("#alert11").hide();
                             location.reload();
                         }, 1000);
-
                     }
-
                 }
             })
             return false;
-
         });
+
         $('#AssignTickets').on('show.bs.modal', function() {
             $.ajax({
                 type: "POST",
@@ -492,16 +489,15 @@ class="active"
         });
     });
 
-
     function someFunction(id) {
         if (document.getElementById(id).checked) {
             t_id.push(id);
             // alert(t_id);
-        } else if(document.getElementById(id).checked === undefined){
+        } else if (document.getElementById(id).checked === undefined) {
             var index = t_id.indexOf(id);
-            if (index === -1){
+            if (index === -1) {
                 t_id.push(id);
-            } else{
+            } else {
                 t_id.splice(index, 1);
             }
         } else {
diff --git a/resources/views/themes/default1/agent/helpdesk/ticket/timeline.blade.php b/resources/views/themes/default1/agent/helpdesk/ticket/timeline.blade.php
index 0a4a469a4..be7576d6b 100644
--- a/resources/views/themes/default1/agent/helpdesk/ticket/timeline.blade.php
+++ b/resources/views/themes/default1/agent/helpdesk/ticket/timeline.blade.php
@@ -1,7 +1,7 @@
 @extends('themes.default1.agent.layout.agent')
 
 @section('Tickets')
-class="active"
+class="nav-link active"
 @stop
 
 @section('ticket-bar')
@@ -20,36 +20,36 @@ $group = App\Model\helpdesk\Agent\Groups::where('id', '=', $agent_group)->where(
 ?>
 
 @section('sidebar')
-<li class="header">{!! Lang::get('lang.Ticket_Information') !!} </li>
-<li>
-    <a href="">
+<li class="nav-header">{!! Lang::get('lang.Ticket_Information') !!} </li>
+<li class="nav-item">
+    <a href="" class="nav-link">
         <span>{!! Lang::get('lang.Ticket_Id') !!} </span>
         </br><b>#{{$tickets->ticket_number}}</b>
     </a>
 </li>
-<li>
-    <a href="{!! URL('user/'.$user->id) !!}">
+<li class="nav-item">
+    <a href="{!! URL('user/'.$user->id) !!}" class="nav-link">
         <span>{!! Lang::get('lang.User') !!} </span>
         </br><i class="fa fa-user"></i> <b>{{$user->name() }}</b>
     </a>
 </li>
-<li >
+<li class="nav-item">
     @if($tickets->assigned_to > 0)
-    <a href="{!! URL('user/'.$tickets->assigned_to) !!}">
+    <a href="{!! URL('user/'.$tickets->assigned_to) !!}" class="nav-link">
         <span>{!! Lang::get('lang.Assigned_To') !!} </span>
         </br> {{$assignedto->first_name}}
     </a>
     @else
-    <a href="">
+    <a href="" class="nav-link">
         <span>{!! Lang::get('lang.Unassigned') !!} </span>
     </a>
     @endif
 </li>
 
-<li  class="header">
+<li  class="nav-header">
     {!! Lang::get('lang.ticket_ratings') !!}
 </li>
-<li> 
+<li class="nav-item"> 
     <?php $ratings = App\Model\helpdesk\Ratings\Rating::orderby('display_order')->get(); ?>
     @foreach($ratings as $rating) 
 
@@ -62,9 +62,9 @@ $group = App\Model\helpdesk\Agent\Groups::where('id', '=', $agent_group)->where(
         $ratingval = $rating_value->rating_value;
     }
     ?>
-    <a href="#">
+    <a href="#" class="nav-link">
         {!! $rating->name !!}:
-        <small class="pull-right">
+        <small class="float-right">
             <?php for ($i = 1; $i <= $rating->rating_scale; $i++) { ?>
                 <input type="radio" class="star not-apply" id="star5" name="{!! $rating->name !!}" value="{!! $i !!}"<?php echo ($ratingval == $i) ? 'checked' : '' ?> />
             <?php } ?>
@@ -81,9 +81,9 @@ $group = App\Model\helpdesk\Agent\Groups::where('id', '=', $agent_group)->where(
         $avg_rating = $avg_rate[0];
     }
     ?>
-    <a href="#">
+    <a href="#" class="nav-link">
         {!! $rating->name !!}:
-        <small class="pull-right">
+        <small class="float-right">
             <?php for ($i = 1; $i <= $rating->rating_scale; $i++) { ?>
                 <input type="radio" class="star not-apply" id="star5" name="{!! $rating->name !!}" value="{!! $i !!}"<?php echo ($avg_rating == $i) ? 'checked' : '' ?> />
             <?php } ?>
@@ -103,231 +103,226 @@ if ($thread->title != "") {
 
 @section('content')
 <!-- Main content -->
-<div class="box box-primary">
-    <div class="box-header">
-        <h3 class="box-title" id="refresh2"><i class="fa fa-user"> </i> {!! $thread->getSubject() !!}</h3>
-        <div class="pull-right">
+<div class="card card-light">
+    <div class="card-header">
+        <h3 class="card-title" id="refresh2"><i class="fas fa-ticket-alt"> </i> {!! $thread->getSubject() !!}</h3>
+        <div class="card-tools">
             <!-- <button type="button" class="btn btn-default"><i class="fa fa-edit" style="color:green;"> </i> Edit</button> -->
             <?php
             Event::fire(new \App\Events\TicketBoxHeader($user->id));
 
             if ($group->can_edit_ticket == 1) {
                 ?>
-                <button type="button" class="btn btn-sm btn-default" id="Edit_Ticket" data-toggle="modal" data-target="#Edit"><i class="fa fa-edit" style="color:green;"> </i> {!! Lang::get('lang.edit') !!}</button>
+                <button type="button" class="btn btn-sm btn-default btn-tool" id="Edit_Ticket" data-toggle="modal" data-target="#Edit"><i class="fas fa-edit" style="color:green;"> </i> {!! Lang::get('lang.edit') !!}</button>
             <?php } ?>
 
             <?php if ($group->can_assign_ticket == 1) { ?>
-                <button type="button" class="btn btn-sm btn-default" data-toggle="modal" data-target="#{{$tickets->id}}assign"><i class="fa fa-hand-o-right" style="color:orange;"> </i> {!! Lang::get('lang.assign') !!}</button>
+                <button type="button" class="btn btn-sm btn-default btn-tool" data-toggle="modal" data-target="#{{$tickets->id}}assign"><i class="fas fa-hand-point-right" style="color:orange;"> </i> {!! Lang::get('lang.assign') !!}</button>
             <?php } ?>
 
             @if($tickets->assigned_to == Auth::user()->id)
-            <button type="button" id="surrender_button" class="btn btn-sm btn-default" data-toggle="modal" data-target="#surrender"> <i class="fa fa-arrows-alt" style="color:red;"> </i>  {!! Lang::get('lang.surrender') !!}</button>
+            <button type="button" id="surrender_button" class="btn btn-sm btn-default btn-tool" data-toggle="modal" data-target="#surrender"> <i class="fas fa-arrows-alt" style="color:red;"> </i>  {!! Lang::get('lang.surrender') !!}</button>
             @endif
 
 
             <?php Event::fire('show-add-event-btn', array()); ?>
 
-            <a href="{{url('ticket/print/'.$tickets->id)}}" target="_blank" class="btn btn-primary btn-sm"><i class="fa fa-print" > </i> {!! Lang::get('lang.generate_pdf') !!}</a>
+            <a href="{{url('ticket/print/'.$tickets->id)}}" target="_blank" class="btn btn-default btn-tool btn-sm"><i class="fas fa-print" > </i> {!! Lang::get('lang.generate_pdf') !!}</a>
             <div class="btn-group">
-                <button type="button" class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown" id="d1"><i class="fa fa-exchange" style="color:teal;" id="hidespin"> </i><i class="fa fa-spinner fa-spin" style="color:teal; display:none;" id="spin"></i>
+                <button type="button" class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown" id="d1"><i class="fas fa-exchange-alt" style="color:teal;" id="hidespin"> </i><i class="fa fa-spinner fa-spin" style="color:teal; display:none;" id="spin"></i>
                     {!! Lang::get('lang.change_status') !!} <span class="caret"></span>
                 </button>
-                <ul class="dropdown-menu">
-                    <li id="open"><a href="#"><i class="fa fa-folder-open-o" style="color:red;"> </i>{!! Lang::get('lang.open') !!}</a></li>
+                <div class="dropdown-menu">
+                    <a href="#" id="open" class="dropdown-item"><i class="fas fa-folder-open" style="color:red;"> </i> {!! Lang::get('lang.open') !!}</a>
                    
                     <?php if ( $tickets_approval->status==7) {?>
                   @if(Auth::user()->role == 'admin')
-                     <li id="approval_close"><a href="#"><i class="glyphicon glyphicon-thumbs-up" style="color:red;"> </i>{!! Lang::get('lang.approval') !!}</a></li>
+                     <a href="#" id="approval_close" class="dropdown-item"><i class="fas fa-thumbs-up" style="color:red;"> </i> {!! Lang::get('lang.approval') !!}</a>
                      @endif
                     
                     <?php } ?>
 
                      <?php if ( $tickets_approval->status==3) {?>
                     <?php if ($group->can_edit_ticket == 1) {?>
-                    <li id="close"><a href="#"><i class="fa fa-check" style="color:green;"> </i>{!! Lang::get('lang.close') !!}</a></li>
+                    <a href="#"  id="close" class="dropdown-item"><i class="fas fa-check" style="color:green;"> </i> {!! Lang::get('lang.close') !!}</a>
                     <?php } ?>
                      <?php } ?>
 
                      <?php if ( $tickets_approval->status==1) {?>
                     <?php if ($group->can_edit_ticket == 1) {?>
-                    <li id="close"><a href="#"><i class="fa fa-check" style="color:green;"> </i>{!! Lang::get('lang.close') !!}</a></li>
+                    <a href="#" d="close" class="dropdown-item"><i class="fas fa-check" style="color:green;"> </i> {!! Lang::get('lang.close') !!}</a>
                     <?php } ?>
                      <?php } ?>
-                    <li id="resolved"><a href="#"><i class="fa fa-check-circle-o " style="color:green;"> </i>{!! Lang::get('lang.resolved') !!} </a></li>
-                </ul>
+                    <a href="#" id="resolved" class="dropdown-item"><i class="fas fa-check-circle " style="color:green;"> </i> {!! Lang::get('lang.resolved') !!} </a>
+                </div>
             </div>
             <?php if ($group->can_delete_ticket == 1 || $group->can_ban_email == 1) { ?>
                 <div id="more-option" class="btn-group">
-                    <button type="button" class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown" id="d2"><i class="fa fa-cogs" style="color:teal;"> </i>
+                    <button type="button" class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown" id="d2"><i class="fas fa-cogs" style="color:teal;"> </i>
                         {!! Lang::get('lang.more') !!} <span class="caret"></span>
                     </button>
-                    <ul  class="dropdown-menu pull-right">
-                        <li data-toggle="modal" data-target="#ChangeOwner"><a href="#"><i class="fa fa-users" style="color:green;"> </i>Change Owner</a></li>
+                    <div  class="dropdown-menu dropdown-menu-right">
+                        <a href="#" data-toggle="modal" data-target="#ChangeOwner" class="dropdown-item"><i class="fas fa-users" style="color:green;"> </i> Change Owner</a>
                         @if($tickets->status != 3 && $tickets->status != 2)
-                        <li data-toggle="modal" data-target="#MergeTickets"><a href="#"><i class="fa fa-code-fork" style="color:teal;"> </i>{!! Lang::get('lang.merge-ticket') !!}</a></li>
+                        <a href="#" class="dropdown-item" data-toggle="modal" data-target="#MergeTickets"><i class="fas fa-cogs" style="color:teal;"> </i> {!! Lang::get('lang.merge-ticket') !!}</a>
                         @endif
                         <?php if ($group->can_delete_ticket == 1) { ?>
-                            <li id="delete"><a href="#"><i class="fa fa-trash-o" style="color:red;"> </i>{!! Lang::get('lang.delete_ticket') !!}</a></li>
+                        <a href="#" id="delete" class="dropdown-item" data-toggle="modal" data-target="#MergeTickets"><i class="fas fa-trash" style="color:red;"> </i> {!! Lang::get('lang.delete_ticket') !!}</a>
                         <?php }
                         ?>
                         <?php if ($group->can_ban_email == 1) { ?>
-                            <li data-toggle="modal" data-target="#banemail"><a href="#"><i class="fa fa-ban" style="color:red;"></i>{!! Lang::get('lang.ban_email') !!}</a></li>
+                        <a href="#" class="dropdown-item" data-toggle="modal" data-target="#banemail"><i class="fas fa-ban" style="color:red;"></i> {!! Lang::get('lang.ban_email') !!}</a>
                         <?php 
                         \Event::fire('ticket.details.more.list',[$tickets]);
                         }
-                        ?>          </ul>
+                        ?>          </div>
                 </div>
             <?php }
             ?>
         </div>
     </div>
     <!-- ticket details Table -->
-    <div class="box-body">
+    <div class="card-body">
         <div id="alert11" class="alert alert-success alert-dismissable" style="display:none;">
             <button id="dismiss11" type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
-            <h4><i class="icon fa fa-check"></i>{!! Lang::get('lang.alert') !!}!</h4>
+            <h4><i class="icon fas fa-check"></i>{!! Lang::get('lang.alert') !!}!</h4>
             <div id="message-success1"></div>
         </div>
         <div id="alert12" class="alert alert-warning alert-dismissable" style="display:none;">
             <button id="dismiss12" type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
-            <h4><i class="icon fa fa-warning"></i>{!! Lang::get('lang.alert') !!}!</h4>
+            <h4><i class="icon fas fa-exclamation-triangle"></i>{!! Lang::get('lang.alert') !!}!</h4>
             <div id="message-warning1"></div>
         </div>
         <div id="alert13" class="alert alert-danger alert-dismissable" style="display:none;">
             <button id="dismiss13" type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
-            <h4><i class="icon fa fa-ban"></i>{!! Lang::get('lang.alert') !!}!</h4>
+            <h4><i class="icon fas fa-ban"></i>{!! Lang::get('lang.alert') !!}!</h4>
             <div id="message-danger1"></div>
         </div>
-        <div class="row">
-            <section class="content"  >
-                <div class="col-md-12">
+
+       <?php
+        $priority = App\Model\helpdesk\Ticket\Ticket_Priority::where('priority_id', '=', $tickets->priority_id)->first();
+        ?>
+        <div class="callout callout-{{$priority->priority_color}}" style = 'background-color:{{$priority->priority_color}}; color:#F9F9F9'>
+            <div class="row">
+                <div class="col-md-3">
                     <?php
-                    $priority = App\Model\helpdesk\Ticket\Ticket_Priority::where('priority_id', '=', $tickets->priority_id)->first();
+                    $sla = $tickets->sla;
+                    $SlaPlan = App\Model\helpdesk\Manage\Sla_plan::where('id', '=', $sla)->first();
                     ?>
-                    <div class="callout callout-{{$priority->priority_color}}" style = 'background-color:{{$priority->priority_color}}; color:#F9F9F9'>
-                        <div class="row">
-                            <div class="col-md-3">
-                                <?php
-                                $sla = $tickets->sla;
-                                $SlaPlan = App\Model\helpdesk\Manage\Sla_plan::where('id', '=', $sla)->first();
-                                ?>
-                                <b>{!! Lang::get('lang.sla_plan') !!}: {{$SlaPlan->grace_period}} </b>
-                            </div>
-                            <div class="col-md-3">
-                                <b>{!! Lang::get('lang.created_date') !!}: </b> {{ UTC::usertimezone($tickets->created_at) }}
-                            </div>
-                            <div class="col-md-3">
-                                <b>{!! Lang::get('lang.due_date') !!}: </b>
-                                <?php
-                                $time = $tickets->created_at;
-                                $time = date_create($time);
-                                date_add($time, date_interval_create_from_date_string($SlaPlan->grace_period));
-                                echo UTC::usertimezone(date_format($time, 'Y-m-d H:i:s'));
-                                ?>
-                            </div>
-                            <div class="col-md-3">
-                                <?php $response = App\Model\helpdesk\Ticket\Ticket_Thread::where('ticket_id', '=', $tickets->id)->get(); ?>
-                                @foreach($response as $last)
-                                <?php $ResponseDate = $last->created_at; ?>
-                                @endforeach
-                                <b>{!! Lang::get('lang.last_response') !!}: </b> {{ UTC::usertimezone($ResponseDate) }}
-                            </div>
-                        </div>
-                    </div>
+                    <b>{!! Lang::get('lang.sla_plan') !!}: {{$SlaPlan->grace_period}} </b>
                 </div>
-                <div id="show2" style="display:none;">
-                    <div class="col-md-4">
-                    </div>
-                    <div class="col-md-4">
-                        <img src="{{asset("lb-faveo/media/images/gifloader.gif")}}"><br/><br/><br/>
-                    </div>
+                <div class="col-md-3">
+                    <b>{!! Lang::get('lang.created_date') !!}: </b> {{ UTC::usertimezone($tickets->created_at) }}
                 </div>
-                <div id="hide2">
-                    <div class="col-md-6">
-                        <table class="table table-hover">
-                            <div id="refresh">
-                                <tr><td><b>{!! Lang::get('lang.status') !!}:</b></td>       
-                                    <?php $status = App\Model\helpdesk\Ticket\Ticket_Status::where('id', '=', $tickets->status)->first(); ?>
-                                    @if($status)
-                                    <td title="{{$status->properties}}">{{$status->name}}</td>
-                                    @endif
-                                </tr>
-                                <tr><td><b>{!! Lang::get('lang.priority') !!}:</b></td>     
-                                    <?php $priority = App\Model\helpdesk\Ticket\Ticket_Priority::where('priority_id', '=', $tickets->priority_id)->first(); ?>
-                                    @if($priority)
-                                    <td title="{{$priority->priority_desc}}">{{$priority->priority_desc}}</td>
-                                    @endif
-                                </tr>
-                                <tr><td><b>{!! Lang::get('lang.department') !!}:</b></td>   
-                                    <?php $dept123 = App\Model\helpdesk\Agent\Department::where('id', '=', $tickets->dept_id)->first(); ?>
-                                    @if($dept123)
-                                    <td title="{{$dept123->name}}">{{$dept123->name}}</td></tr>
-                                    @endif
-                                <tr><td><b>{!! Lang::get('lang.email') !!}:</b></td>        <td>{{str_limit($user->email,30)}}</td></tr>
-                                @if($user->ban > 0)  <tr><td style="color:orange;"><i class="fa fa-warning"></i><b>
-                                            {!!  Lang::get('lang.this_ticket_is_under_banned_user')!!}</td><td></td></tr>@endif
-                            </div>
-                        </table>
-                    </div>
-                    <div class="col-md-6">
-                        <?php
-                        $user_phone = App\User::where('mobile', '=', $thread->user_id)->first();
-                        $TicketData = App\Model\helpdesk\Ticket\Ticket_Thread::where('ticket_id', '=', $thread->ticket_id)->where('is_internal', '=', 0)->max('id');
-                        $TicketDatarow = App\Model\helpdesk\Ticket\Ticket_Thread::where('id', '=', $TicketData)->where('is_internal', '=', 0)->first();
-                        $LastResponse = App\User::where('id', '=', $TicketDatarow->user_id)->first();
-                        if ($LastResponse->role == "user") {
-                            $rep = "#F39C12";
-                            $username = $LastResponse->first_name . " " . $LastResponse->last_name;
-                            if ($LastResponse->first_name == null || $LastResponse->first_name == '') {
-                                $username = $LastResponse->user_name;
-                            }                        } else {
-                            $rep = "#000";
-                            $username = $LastResponse->first_name . " " . $LastResponse->last_name;
-                            if ($LastResponse->first_name == null || $LastResponse->last_name == null) {
-                                $username = $LastResponse->user_name;
-                            }
-                        }
-                        if ($tickets->source > 0) {
-                            $ticket_source = App\Model\helpdesk\Ticket\Ticket_source::where('id', '=', $tickets->source)->first();
-                            $ticket_source = $ticket_source->value;
-                        } else
-                            $ticket_source = $tickets->source;
-                        ?>
-                        <table class="table table-hover">
-                            <div id="refresh3">
-
-                                @if($user->phone_number !=null)<tr><td><b>{!! Lang::get('lang.phone') !!}:</b></td>          <td>{{$user->phone_number}}</td></tr>@endif
-                                @if($user->mobile !=null)<tr><td><b>{!! Lang::get('lang.mobile') !!}:</b></td>          <td>{{$user->ext . $user->mobile}}</td></tr>@endif
-                                <tr><td><b>{!! Lang::get('lang.source') !!}:</b></td>         <td>{{$ticket_source}}</td></tr>
-                                <tr><td><b>{!! Lang::get('lang.help_topic') !!}:</b></td>     <?php $help_topic = App\Model\helpdesk\Manage\Help_topic::where('id', '=', $tickets->help_topic_id)->first(); ?><td title="{{$help_topic->topic}}">{{$help_topic->topic}}</td></tr>
-                                <tr><td><b>{!! Lang::get('lang.last_message') !!}:</b></td>   <td>{{str_limit($username,30)}}</td></tr>
-                                <tr><td><b>{!! Lang::get('lang.organization') !!}:</b></td>   <td>{!!$LastResponse->getOrgWithLink()!!}</td></tr>
-                                <?php Event::fire(new App\Events\TicketDetailTable($TicketData)); ?>
-                            </div>
-                        </table>
-                    </div>
+                <div class="col-md-3">
+                    <b>{!! Lang::get('lang.due_date') !!}: </b>
+                    <?php
+                    $time = $tickets->created_at;
+                    $time = date_create($time);
+                    date_add($time, date_interval_create_from_date_string($SlaPlan->grace_period));
+                    echo UTC::usertimezone(date_format($time, 'Y-m-d H:i:s'));
+                    ?>
                 </div>
-            </section>
+                <div class="col-md-3">
+                    <?php $response = App\Model\helpdesk\Ticket\Ticket_Thread::where('ticket_id', '=', $tickets->id)->get(); ?>
+                    @foreach($response as $last)
+                    <?php $ResponseDate = $last->created_at; ?>
+                    @endforeach
+                    <b>{!! Lang::get('lang.last_response') !!}: </b> {{ UTC::usertimezone($ResponseDate) }}
+                </div>
+            </div>
+        </div>
+        
+        <div class="text-center">
+            <div id="show2" style="display:none;">
+             
+                <img src="{{asset("lb-faveo/media/images/gifloader.gif")}}"><br/><br/><br/>
+            </div>
         </div>
-    </div>
-</div>
-<?php Event::fire('ticket.timeline.marble',array($TicketData));?>
-<div id="gifshow" style="display:none">
-    <img src="{{asset("lb-faveo/media/images/gifloader.gif")}}">
-</div>  <!-- added 05/05/2016-->
-<div id="resultdiv">
-</div>
 
-<div class='row'>
-    <div class='col-xs-12'>
-        <div class="nav-tabs-custom">
+        <div id="hide2" class="row">
+            <div class="col-md-6">
+                <table class="table table-hover">
+                    <div id="refresh">
+                        <tr><td><b>{!! Lang::get('lang.status') !!}:</b></td>       
+                            <?php $status = App\Model\helpdesk\Ticket\Ticket_Status::where('id', '=', $tickets->status)->first(); ?>
+                            @if($status)
+                            <td title="{{$status->properties}}">{{$status->name}}</td>
+                            @endif
+                        </tr>
+                        <tr><td><b>{!! Lang::get('lang.priority') !!}:</b></td>     
+                            <?php $priority = App\Model\helpdesk\Ticket\Ticket_Priority::where('priority_id', '=', $tickets->priority_id)->first(); ?>
+                            @if($priority)
+                            <td title="{{$priority->priority_desc}}">{{$priority->priority_desc}}</td>
+                            @endif
+                        </tr>
+                        <tr><td><b>{!! Lang::get('lang.department') !!}:</b></td>   
+                            <?php $dept123 = App\Model\helpdesk\Agent\Department::where('id', '=', $tickets->dept_id)->first(); ?>
+                            @if($dept123)
+                            <td title="{{$dept123->name}}">{{$dept123->name}}</td></tr>
+                            @endif
+                        <tr><td><b>{!! Lang::get('lang.email') !!}:</b></td>        <td>{{str_limit($user->email,30)}}</td></tr>
+                        @if($user->ban > 0)  <tr><td style="color:orange;"><i class="fa fa-warning"></i><b>
+                                    {!!  Lang::get('lang.this_ticket_is_under_banned_user')!!}</td><td></td></tr>@endif
+                    </div>
+                </table>
+            </div>
+            <div class="col-md-6">
+                <?php
+                $user_phone = App\User::where('mobile', '=', $thread->user_id)->first();
+                $TicketData = App\Model\helpdesk\Ticket\Ticket_Thread::where('ticket_id', '=', $thread->ticket_id)->where('is_internal', '=', 0)->max('id');
+                $TicketDatarow = App\Model\helpdesk\Ticket\Ticket_Thread::where('id', '=', $TicketData)->where('is_internal', '=', 0)->first();
+                $LastResponse = App\User::where('id', '=', $TicketDatarow->user_id)->first();
+                if ($LastResponse->role == "user") {
+                    $rep = "#F39C12";
+                    $username = $LastResponse->first_name . " " . $LastResponse->last_name;
+                    if ($LastResponse->first_name == null || $LastResponse->first_name == '') {
+                        $username = $LastResponse->user_name;
+                    }                        } else {
+                    $rep = "#000";
+                    $username = $LastResponse->first_name . " " . $LastResponse->last_name;
+                    if ($LastResponse->first_name == null || $LastResponse->last_name == null) {
+                        $username = $LastResponse->user_name;
+                    }
+                }
+                if ($tickets->source > 0) {
+                    $ticket_source = App\Model\helpdesk\Ticket\Ticket_source::where('id', '=', $tickets->source)->first();
+                    $ticket_source = $ticket_source->value;
+                } else
+                    $ticket_source = $tickets->source;
+                ?>
+                <table class="table table-hover">
+                    <div id="refresh3">
+
+                        @if($user->phone_number !=null)<tr><td><b>{!! Lang::get('lang.phone') !!}:</b></td>          <td>{{$user->phone_number}}</td></tr>@endif
+                        @if($user->mobile !=null)<tr><td><b>{!! Lang::get('lang.mobile') !!}:</b></td>          <td>{{$user->ext . $user->mobile}}</td></tr>@endif
+                        <tr><td><b>{!! Lang::get('lang.source') !!}:</b></td>         <td>{{$ticket_source}}</td></tr>
+                        <tr><td><b>{!! Lang::get('lang.help_topic') !!}:</b></td>     <?php $help_topic = App\Model\helpdesk\Manage\Help_topic::where('id', '=', $tickets->help_topic_id)->first(); ?><td title="{{$help_topic->topic}}">{{$help_topic->topic}}</td></tr>
+                        <tr><td><b>{!! Lang::get('lang.last_message') !!}:</b></td>   <td>{{str_limit($username,30)}}</td></tr>
+                        <tr><td><b>{!! Lang::get('lang.organization') !!}:</b></td>   <td>{!!$LastResponse->getOrgWithLink()!!}</td></tr>
+                        <?php Event::fire(new App\Events\TicketDetailTable($TicketData)); ?>
+                    </div>
+                </table>
+            </div>
+        </div>
+
+        <?php Event::fire('ticket.timeline.marble',array($TicketData));?>
+        <div id="gifshow" style="display:none" class="text-center">
+            <img src="{{asset("lb-faveo/media/images/gifloader.gif")}}">
+        </div>  <!-- added 05/05/2016-->
+        <div id="resultdiv"></div>
+
+        <div>
+            
             <ul class="nav nav-tabs">
-                <li class="active"><a href="#General" data-toggle="tab" style="color:#27C116;" id="aa"><i class="fa fa-reply-all"> </i> {!! Lang::get('lang.reply') !!}</a></li>
-                <li><a href="#Internal" data-toggle="tab" style="color:#0495FF;" id="bb"><i class="fa fa-file-text"> </i> {!! Lang::get('lang.internal_notes') !!}</a></li>
+                <li class="nav-item"><a class="nav-link active" href="#General" data-toggle="tab" style="color:#27C116;" id="aa"><i class="fa fa-reply-all"> </i> {!! Lang::get('lang.reply') !!}</a></li>
+                <li class="nav-item"><a class="nav-link" href="#Internal" data-toggle="tab" style="color:#0495FF;" id="bb"><i class="fa fa-file-text"> </i> {!! Lang::get('lang.internal_notes') !!}</a></li>
                 <?php Event::fire('timeline.tab.list',[$TicketData]); ?>
                 <!-- <li><a href="#Reply" data-toggle="tab" style="color:orange;"><i class="fa fa-mail-forward" > </i> Forward</a></li> -->
             </ul>
-            <div class="tab-content">
+
+            <div class="tab-content mt-3">
+                
                 <div id="alert21" class="alert alert-success alert-dismissable" style="display:none;">
                     <button id="dismiss21" type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                     <div id="message-success2"></div>
@@ -341,55 +336,50 @@ if ($thread->title != "") {
                     <i class="icon fa fa-ban"></i><b>{!! Lang::get('lang.alert') !!} !</b>
                     <div id="message-danger2"></div>
                 </div>
+
                 <div class="tab-pane active" id="General">
                     <!-- ticket reply -->
-                    <div id="show3" style="display:none;">
-                        <div class="col-md-4">
-                        </div>
-                        <div class="col-md-4">
-                            <img src="{{asset("lb-faveo/media/images/gifloader.gif")}}"><br/><br/><br/>
-                        </div>
-                        </br>
-                        </br>
-                        </br>
-                        </br>
-                        </br>
-                        </br>
-                        </br>
-                        </br>
+                    <div id="show3" style="display:none;text-align: center;">
+                        <img src="{{asset("lb-faveo/media/images/gifloader.gif")}}"><br/><br/><br/>
                     </div>
-                    <form id="form3">
-                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
 
-                    <div id="t1">
-                        <div id="reply-response"></div>
-                        <div class="form-group">
-                            <div class="row">
-                                <!-- to -->
+                    <form id="form3">
+                        
+                        <input type="hidden" name="_token" value="{{ csrf_token() }}">
+
+                        <div id="t1">
+                            
+                            <div id="reply-response"></div>
+                            
+                            <div class="form-group">
+                                
+                            <!-- to -->
                                 <input type="hidden" name="ticket_ID" value="{{$tickets->id}}">
+                                
                                 <div class="form-group {{ $errors->has('title') ? 'has-error' : '' }}">
-                                    <div class="col-md-2">
-                                        {!! Form::label('To', Lang::get('lang.to').':') !!}
-                                    </div>
-                                    <div class="col-md-10">
-                                        <div id="refreshTo">
+                                    <div class="row">
+                                        <div class="col-md-2">
+                                            {!! Form::label('To', Lang::get('lang.to').':') !!}
+                                        </div>
+                                        <div class="col-md-10">
+                                            <div id="refreshTo">
                                             {!! Form::text('To',$user->email,['disabled'=>'disabled','id'=>'email','class'=>'form-control','style'=>'width:55%'])!!}
                                             {!! $errors->first('To', '<spam class="help-block text-red">:message</spam>') !!}
-                                            <a href="#" data-toggle="modal" data-target="#addccc"> {!! Lang::get('lang.add_cc') !!} </a>
-                                            <div id="recepients">
-                                                <?php
-                                                $Collaborator = App\Model\helpdesk\Ticket\Ticket_Collaborator::where('ticket_id', '=', $tickets->id)->get();
-                                                $count_collaborator = count($Collaborator);
-                                                ?>
-                                                @if($count_collaborator > 0)
-                                                <a href="#" data-toggle="modal" data-target="#surrender2">({!! $count_collaborator !!}) {!! Lang::get('lang.recepients') !!} </a>
-                                                @endif
+                                                <a href="#" data-toggle="modal" data-target="#addccc"> {!! Lang::get('lang.add_cc') !!} </a>
+                                                <div id="recepients">
+                                                    <?php
+                                                    $Collaborator = App\Model\helpdesk\Ticket\Ticket_Collaborator::where('ticket_id', '=', $tickets->id)->get();
+                                                    $count_collaborator = count($Collaborator);
+                                                    ?>
+                                                    @if($count_collaborator > 0)
+                                                    <a href="#" data-toggle="modal" data-target="#surrender2">({!! $count_collaborator !!}) {!! Lang::get('lang.recepients') !!} </a>
+                                                    @endif
+                                                </div>
                                             </div>
                                         </div>
                                     </div>
                                 </div>
                             </div>
-                        </div>
                         <?php Event::fire(new App\Events\TimeLineFormEvent($tickets)); ?>
                         <div class="form-group">
                             <div class="row">
@@ -411,10 +401,9 @@ if ($thread->title != "") {
                                 </div>
                             </div>
                         </div>
-                        <div class="form-group">
+                        <div class="form-group {{ $errors->has('title') ? 'has-error' : '' }}"  id="reply_content_class">
                             <div class="row">
                                 <!-- reply content -->
-                                <div class="form-group {{ $errors->has('title') ? 'has-error' : '' }}" id="reply_content_class">
                                     <div class="col-md-2">
                                         {!! Form::label('Reply Content', Lang::get('lang.reply_content').':') !!}<span class="text-red"> *</span>
                                     </div>
@@ -427,14 +416,14 @@ if ($thread->title != "") {
                                         <script>
   CKEDITOR.replace( 'reply_content', {
       toolbarGroups: [
-				{"name":"basicstyles","groups":["basicstyles"]},
-				{"name":"links","groups":["links"]},
-				{"name":"paragraph","groups":["list","blocks"]},
-				{"name":"document","groups":["mode"]},
-				{"name":"insert","groups":["insert"]},
-				{"name":"styles","groups":["styles"]},
-				{"name":"about","groups":["about"]}
-			],
+                {"name":"basicstyles","groups":["basicstyles"]},
+                {"name":"links","groups":["links"]},
+                {"name":"paragraph","groups":["list","blocks"]},
+                {"name":"document","groups":["mode"]},
+                {"name":"insert","groups":["insert"]},
+                {"name":"styles","groups":["styles"]},
+                {"name":"about","groups":["about"]}
+            ],
     filebrowserImageBrowseUrl: "{{url('laravel-filemanager?type=Images')}}",
     filebrowserImageUploadUrl: "{{url('laravel-filemanager/upload?type=Images')}}",
     filebrowserBrowseUrl: "{{url('laravel-filemanager?type=Files')}}",
@@ -443,14 +432,11 @@ if ($thread->title != "") {
   });
 </script>
                                     </div>
-                                </div>
                             </div>
                         </div>
-                        <div class="form-group">
+                        <div class="form-group {{ $errors->has('title') ? 'has-error' : '' }}" id="reply_content_class">
                             <div class="row">
-                                <!-- reply content -->
-                                <div class="form-group {{ $errors->has('title') ? 'has-error' : '' }}" id="reply_content_class">
-                                    <div class="col-md-2">
+                                <div class="col-md-2">
                                         <label> {!! Lang::get('lang.attachment') !!}</label>
                                     </div>
                                     <div class="col-md-10">
@@ -458,22 +444,19 @@ if ($thread->title != "") {
                                             <span class='btn btn-default btn-file'> <i class='fa fa-paperclip'></i> <span>{!! Lang::get('lang.upload') !!}</span><input type='file' name='attachment[]' id='attachment' multiple/></span>
                                             <div id='file_details'></div><div id='total-size'></div>{!! Lang::get('lang.max') !!}. {!! $max_size_in_actual !!}
                                             <div>
-                                                <a id='clear-file' onClick='clearAll()' style='display:none; cursor:pointer;'><i class='fa fa-close'></i>Clear all</a>
+                                                <a href="javascript:;" id='clear-file' onClick='clearAll()' style='display:none; cursor:pointer;'><i class='fas fa-times'></i> Clear all</a>
                                             </div>
                                         </div>
                                         
                                     </div>
-                                </div>
                             </div>
                         </div>
-                        <div class="form-group">
+                        <div class="form-group {{ $errors->has('title') ? 'has-error' : '' }}">
                             <div class="row">
-                                <div class="form-group {{ $errors->has('title') ? 'has-error' : '' }}">
-                                    <div class="col-md-2"></div>
-                                    <div class="col-md-10">
-                                        <div id="t5">
-                                            <button id="replybtn" type="submit" class="btn btn-primary"><i class="fa fa-check-square-o" style="color:white;"> </i> {!! Lang::get('lang.update') !!}</button>
-                                        </div>
+                                <div class="col-md-2"></div>
+                                <div class="col-md-10">
+                                    <div id="t5">
+                                        <button id="replybtn" type="submit" class="btn btn-primary"><i class="fas fa-check-square" style="color:white;"> </i> {!! Lang::get('lang.update') !!}</button>
                                     </div>
                                 </div>
                             </div>
@@ -481,6 +464,7 @@ if ($thread->title != "") {
                     </div>
                     {!!Form::close()!!}
                 </div>
+
                 <div class="tab-pane" id="Internal">
                     <!-- ticket reply -->
                     <div id="show5" style="display:none;">
@@ -489,23 +473,22 @@ if ($thread->title != "") {
                         <div class="col-md-4">
                             <img src="{{asset("lb-faveo/media/images/gifloader.gif")}}"><br/><br/><br/>
                         </div>
+                       <!--  </br>
                         </br>
                         </br>
                         </br>
                         </br>
                         </br>
                         </br>
-                        </br>
-                        </br>
+                        </br> -->
                     </div>
                     <div id="t2">
                         {!! Form::model($tickets->id, ['id'=>'form2','method' => 'PATCH'] )!!}
                         <div id="t4">
-                            <div class="form-group">
+                            <div class="form-group {{ $errors->has('title') ? 'has-error' : '' }}" id="internal_content_class">
                                 <div class="row">
                                     <!-- internal note -->
-                                    <div class="form-group {{ $errors->has('title') ? 'has-error' : '' }}" id="internal_content_class">
-                                        <div class="col-md-2">
+                                   <div class="col-md-2">
                                             <label>{!! Lang::get('lang.internal_note') !!}:<span class="text-red"> *</span></label>
                                         </div>
                                         <div class="col-md-10">
@@ -514,15 +497,14 @@ if ($thread->title != "") {
                                             </div>
                                             {!! $errors->first('InternalContent', '<spam class="help-block text-red">:message</spam>') !!}
                                         </div>
-                                    </div>
                                 </div>
                             </div>
-                            <div class="form-group">
-                                <div class="row">
-                                    <div class="form-group {{ $errors->has('title') ? 'has-error' : '' }}">
+                        
+                                <div class="form-group {{ $errors->has('title') ? 'has-error' : '' }}">
+                                    <div class="row">
                                         <div class="col-md-2"></div>
                                         <div class="col-md-10">
-                                            <button type="submit"  class="btn btn-primary"><i class="fa fa-check-square-o" style="color:white;"> </i> {!! Lang::get('lang.update') !!}</button>
+                                            <button type="submit"  class="btn btn-primary"><i class="fas fa-check-square" style="color:white;"> </i> {!! Lang::get('lang.update') !!}</button>
                                         </div>
                                     </div>
                                 </div>
@@ -533,31 +515,40 @@ if ($thread->title != "") {
                 </div>
                 <?php Event::fire('timeline.tab.content',[$tickets]); ?>
             </div>
-        </div>
-        <!-- ticket  conversations -->
-        <?php
-        $conversations = App\Model\helpdesk\Ticket\Ticket_Thread::where('ticket_id', '=', $tickets->id)->orderBy('id', 'DESC')->paginate(10);
-        $ij = App\Model\helpdesk\Ticket\Ticket_Thread::where('ticket_id', '=', $tickets->id)->first();
-        ?>
-        <!-- row -->
-        <div class="row" >
-            <div id="refresh1">
-                <style type="text/css">
-                    .pagination{
-                        margin-bottom: -20px;
-                        margin-top: 0px;
-                    }
-                </style>
-                <ul class="pull-right" style="padding-right:40px" >
-                    <?php echo $conversations->setPath(url('/thread/' . $tickets->id))->render(); ?>
-                </ul>
 
-                <div class="col-md-12" >
-                    <link rel="stylesheet" type="text/css" href="{{asset("lb-faveo/css/faveo-css.css")}}">
-                    <link href="{{asset("lb-faveo/css/jquery.rating.css")}}" rel="stylesheet" type="text/css" />
+            <!-- ticket  conversations -->
+            <?php
+            $conversations = App\Model\helpdesk\Ticket\Ticket_Thread::where('ticket_id', '=', $tickets->id)->orderBy('id', 'DESC')->paginate(10);
+            $ij = App\Model\helpdesk\Ticket\Ticket_Thread::where('ticket_id', '=', $tickets->id)->first();
+            ?>
+
+            <div class="card card-light">
+                
+                <div class="card-header">
+                    <h3 class="card-title">Ticket Conversation</h3>
+                </div>
+
+                <div class="card-body">
                     
+                    <div id="refresh1">
+                      
+                        <style type="text/css">
+                            .pagination{
+                                margin-bottom: -20px;
+                                margin-top: 0px;
+                            }
+                        </style>
+                       
+                        <ul class="float-right" style="padding-right:40px" >
+                            <?php echo $conversations->setPath(url('/thread/' . $tickets->id))->render(); ?>
+                        </ul>
+
+                        <div class="col-md-12" >
+                            <link rel="stylesheet" type="text/css" href="{{asset("lb-faveo/css/faveo-css.css")}}">
+                            <link href="{{asset("lb-faveo/css/jquery.rating.css")}}" rel="stylesheet" type="text/css" />
+                            
                     <!-- The time line -->
-                    <ul class="timeline">
+                    <div class="timeline timeline-inverse">
                         <!-- timeline time label -->
                         <?php
                        
@@ -566,7 +557,7 @@ if ($thread->title != "") {
                             if ($conversation == null) {      
                             } else {
                                 ?>
-                                <li class="time-label">
+                                <div class="time-label">
                                     <?php
                                     $ConvDate1 = $conversation->created_at;
                                     $ConvDate = explode(' ', $ConvDate1);
@@ -588,25 +579,26 @@ if ($thread->title != "") {
                                         $role = null;
                                     }
                                     ?>
-                                </li>
-                                <li>
+                                </div>
+
+                                <div>
                                     <?php if ($conversation->is_internal) { ?>
-                                        <i class="fa fa-tag bg-purple" title="Posted by System"></i>
+                                        <i class="fas fa-tag bg-purple" title="Posted by System"></i>
                                     <?php
                                     } else {
                                         if($conversation->user_id != null) {
                                             if ($role->role == 'agent' || $role->role == 'admin') {
                                                 ?>
-                                                <i class="fa fa-mail-reply-all bg-yellow" title="Posted by Support Team"></i>
+                                                <i class="fas fa-reply-all bg-yellow" title="Posted by Support Team"></i>
                                             <?php } elseif ($role->role == 'user') { ?>
-                                                <i class="fa fa-user bg-aqua" title="Posted by Customer"></i>
+                                                <i class="fas fa-user bg-aqua" title="Posted by Customer"></i>
                                             <?php } else { ?>
-                                                <i class="fa fa-mail-reply-all bg-purple" title="Posted by System"></i>
+                                                <i class="fas fa-reply-all bg-purple" title="Posted by System"></i>
                                                 <?php
                                             }
                                         } else {
                                             ?>
-                                            <i class="fa fa-tag bg-purple" title="Posted by System"></i>
+                                            <i class="fas fa-tag bg-purple" title="Posted by System"></i>
                                             <?php
                                         }
                                     }
@@ -628,7 +620,10 @@ if ($thread->title != "") {
                                     
                                     ?>
                                     <div class="timeline-item">
-                                        <span style="color:#fff;"><div class="pull-right">   <table><tbody>
+                                        <span style="color:#fff;">
+                                            <div class="float-right" style="position: relative;top: -13px;">   
+                                                <table>
+                                                    <tbody>
                                             @if($role)
                                                 @if($role->role != null)
                                                     @if($role->role != 'user' && $conversation->is_internal != 1)
@@ -655,8 +650,11 @@ if ($thread->title != "") {
                                                     @endif
                                                 @endif
                                             @endif
-                                                    </tbody></table></div>  
+                                                    </tbody>
+                                                </table>
+                                            </div>  
                                         </span>
+
                                         <h3 class="timeline-header">
                                             <?php
                                             
@@ -672,26 +670,27 @@ if ($thread->title != "") {
                                             
                                             ?>
                                             
-                                            <div class="user-block" style="margin-bottom:-5px;margin-top:-2px;">
-                                                @if($conversation->user_id != null) 
-                                                    <img src="{{$role->profile_pic}}"class="img-circle img-bordered-sm" alt="User Image"/>
-                                                @else 
-                                                    <img src="{{asset('lb-faveo/media/images/avatar_1.png')}}" class="img-circle img-bordered-sm" alt="img-circle img-bordered-sm">
-                                                @endif
-                                                <span class="username"  style="margin-bottom:4px;margin-top:2px;">
-                                                    @if($conversation->user_id != null) 
-                                                        <a href='{!! url("/user/".$role->id) !!}'>{!! str_limit($usernam,30) !!}</a>
-                                                    @else
-                                                        {!! str_limit($usernam,30) !!}
-                                                    @endif
-                                                </span>
-                                                <span class="description" style="margin-bottom:4px;margin-top:4px;"><i class="fa fa-clock-o"></i> {{UTC::usertimezone($conversation->created_at)}}</span>
-                                                @if($conversation->id == $ij->id)
-                                                <a href="{{url('genereate-pdf/'.$conversation->id)}}" class= "pull-right fa fa-newspaper-o" title="generate pdf of this thread"></a>
-                                                @endif
-                                                
-                                            </div><!-- /.user-block -->
-                                           
+                                            @if($conversation->user_id != null) 
+                                                <img src="{{$role->profile_pic}}" class="img-circle img-bordered-sm" alt="User Image" width="25" height="25" />
+                                            @else 
+                                                <img src="{{asset('lb-faveo/media/images/avatar_1.png')}}" class="img-circle img-bordered-sm" width="25" height="25"  
+                                                    alt="img-circle img-bordered-sm">
+                                            @endif
+                                            
+                                            @if($conversation->user_id != null) 
+                                                <a href='{!! url("/user/".$role->id) !!}'>{!! str_limit($usernam,30) !!}</a>
+                                            @else
+                                                {!! str_limit($usernam,30) !!}
+                                            @endif
+
+                                            @if($conversation->id == $ij->id)
+                                            <a href="{{url('genereate-pdf/'.$conversation->id)}}" class= "float-right" title="generate pdf of this thread">
+                                                &nbsp;&nbsp;<i class="fas fa-newspaper"></i>
+                                            </a>
+                                            @endif
+
+                                            <span style="float: right;font-size: 12px;color: #999;margin: 4px;"><i class="far fa-clock"></i> {{UTC::usertimezone($conversation->created_at)}}</span>
+                                            
                                         </h3>
                                         @if(\Lang::getLocale()=='ar')
                                         <div class="timeline-body{{$conversation -> id}} arindam"   style="padding-right:30px !important;margin-bottom:-20px;margin-top: 15px;">
@@ -774,8 +773,6 @@ if ($thread->title != "") {
                                         
                                         </div>
                                         
-                                        <br/><br/>
-                                        
                                         <div class="timeline-footer" style="margin-bottom:-5px">
                                             @if(!$conversation->is_internal)
                                                 @if($conversation->user_id != null)
@@ -793,22 +790,24 @@ if ($thread->title != "") {
                                         </div>
                                         
                                     </div>
-                                </li>
+                                </div>
                                 <?php $lastid = $conversation->id ?>
                                 <?php
                             }
                         }
                         ?>
-                        <li>
-                            <i class="fa fa-clock-o bg-gray"></i>
-                        </li>
-                        <ul class="pull-right" style="padding-right:40px" >
+                        <div>
+                            <i class="fas fa-history bg-gray"></i>
+                        </div>
+                        <ul class="float-right" style="padding-right:40px" >
                             <?php echo $conversations->setPath(url('/thread/' . $tickets->id))->render(); ?>
                         </ul>
-                    </ul>               
+                    </div>               
                 </div><!-- /.col -->
             </div>
-        </div><!-- /.row -->
+                </div>
+            </div>
+        </div>
     </div>
 </div>
 <!-- </section>/.content -->
@@ -902,12 +901,12 @@ if ($thread->title != "") {
                     </div>
                     <div id="show" style="display:none;">
                         <div class="row col-md-12">
-                            <div class="col-xs-5">
+                            <div class="col-sm-5">
                             </div>
-                            <div class="col-xs-2">
+                            <div class="col-sm-2">
                                 <img src="{{asset("lb-faveo/media/images/gifloader.gif")}}"><br/><br/><br/>
                             </div>
-                            <div class="col-xs-5">
+                            <div class="col-sm-5">
                             </div>
                         </div>
                     </div>
@@ -1015,12 +1014,12 @@ if ($thread->title != "") {
                                 {!! Form::model($tickets->id, ['id'=>'change-add-owner','method' => 'PATCH'] )!!} 
                                 <div id="add-change-loader" style="display:none;">
                                     <div class="row col-md-12">
-                                        <div class="col-xs-5">
+                                        <div class="col-sm-5">
                                         </div>
-                                        <div class="col-xs-2">
+                                        <div class="col-sm-2">
                                             <img src="{{asset("lb-faveo/media/images/gifloader.gif")}}"> 
                                         </div>
-                                        <div class="col-xs-5">
+                                        <div class="col-sm-5">
                                         </div>
                                     </div>
                                     <br/><br/><br/><br/>
@@ -1116,62 +1115,43 @@ if ($thread->title != "") {
         <div class="modal-dialog">
             <div class="modal-content">
                 <div class="modal-header">
-                    <button type="button" id="cc-close" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                     <h4 class="modal-title">{!! Lang::get('lang.add_collaborator') !!}</h4>
+                    <button type="button" id="cc-close" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                 </div>
-                <div class="nav-tabs-custom">
+                <div class="nav-tabs-custom mt-1 p-1">
                     <ul class="nav nav-tabs">
-                        <li class="active"><a href="#ahah" data-toggle="tab" style="color:green;" id="aa"><i class="fa fa-users"> </i> {!! Lang::get('lang.search_existing_users') !!}</a></li>
-                        <li><a href="#haha" data-toggle="tab" style="color:orange;"><i class="fa fa-user-plus" > </i> {!! Lang::get('lang.add_new_user') !!}</a></li>
+                        <li class="nav-item"><a  class="nav-link active" href="#ahah" data-toggle="tab" style="color:green;" id="aa"><i class="fa fa-users"> </i> {!! Lang::get('lang.search_existing_users') !!}</a></li>
+                        <li  class="nav-item"><a  class="nav-link" href="#haha" data-toggle="tab" style="color:orange;"><i class="fa fa-user-plus" > </i> {!! Lang::get('lang.add_new_user') !!}</a></li>
                     </ul>
                     <div class="tab-content">
                         <div class="tab-pane active" id="ahah">
                             <div class="modal-body" id="def">
-                                <div class="callout callout-info" id="hide1234" ><i class="icon fa fa-info"> </i>&nbsp;&nbsp;&nbsp; {!! Lang::get('lang.search_existing_users_or_add_new_users') !!}</div>
                                 <div id="here"></div>
-                                <div id="show7" style="display:none;">
-                                    <div class="row col-md-12">
-                                        <div class="col-xs-5">
-                                        </div>
-                                        <div class="col-xs-2">
-                                            <img src="{{asset("lb-faveo/media/images/gifloader.gif")}}"> 
-                                        </div>
-                                        <div class="col-xs-5">
-                                        </div>
-                                    </div>
+                                <div id="show7" style="display:none;text-align:center;">
+                                   <img src="{{asset("lb-faveo/media/images/gifloader.gif")}}"> 
                                 </div>
                                 
                                 {!! Form::model($tickets->id, ['id'=>'search-user','method' => 'PATCH'] )!!}    
-                                <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
-                                <input type="text" class="form-control" name="search" id="tags" placeholder="{!! Lang::get('lang.search_by_email') !!}">
-                                <input type="hidden" name="ticket_id" value="{!! $tickets->id !!}">
-                                <input type="submit" class="btn btn-submit" value="{!! Lang::get('lang.submit') !!}">
+                                <div id="hide1234">
+                                    <input type="text" class="form-control" name="search" id="tags" placeholder="{!! Lang::get('lang.search_by_email') !!}">
+                                    <input type="hidden" name="ticket_id" value="{!! $tickets->id !!}">
+                                    <input type="submit" class="btn btn-primary" value="{!! Lang::get('lang.submit') !!}">
+                                </div>
                                 {!! Form::close() !!}
                             </div>
                         </div>
                         <div class="tab-pane" id="haha">
-                            <div class="modal-body" id="abc">
-                                <h4 class="modal-title pull-left">{!! Lang::get('lang.add_new_user') !!}</h4>            
-                                <br/><br/>
+                            <div class="modal-body" id="abc">           
                                 <div id="here2"></div>
                                 {!! Form::model($tickets->id, ['id'=>'add-user','method' => 'PATCH'] )!!} 
-                                <div id="show8" style="display:none;">
-                                    <div class="row col-md-12">
-                                        <div class="col-xs-5">
-                                        </div>
-                                        <div class="col-xs-2">
-                                            <img src="{{asset("lb-faveo/media/images/gifloader.gif")}}"> 
-                                        </div>
-                                        <div class="col-xs-5">
-                                        </div>
-                                    </div>
-                                    <br/><br/><br/><br/>
+                                <div id="show8" style="display:none;text-align:center;">
+                                    <img src="{{asset("lb-faveo/media/images/gifloader.gif")}}"> 
                                 </div>
                                 <div id="hide12345">
                                     <input type="text" name="name" class="form-control" placeholder="{!! Lang::get('lang.name') !!}" required>
                                     <input type="email" name="email" class="form-control" placeholder="{!! Lang::get('lang.e-mail') !!}" required> 
                                     <input type="hidden" name="ticket_id" value="{!! $tickets->id !!}">
-                                    <input type="submit" class="btn" value="{!! Lang::get('lang.submit') !!}">
+                                    <input type="submit" class="btn btn-primary" value="{!! Lang::get('lang.submit') !!}">
                                 </div>
                                 {!! Form::close() !!}
                             </div>
@@ -1190,8 +1170,8 @@ if ($thread->title != "") {
         <div class="modal-dialog">
             <div class="modal-content">
                 <div class="modal-header">
-                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                     <h4 class="modal-title">{!! Lang::get('lang.list_of_collaborators_of_this_ticket') !!}</h4>
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                 </div>
                 <div class="modal-body" id="surrender22">
                     @foreach($Collaborator as $ccc)
@@ -1347,7 +1327,18 @@ if ($thread->title != "") {
             }
             
             $(function () {
-            $("#InternalContent").wysihtml5();
+            $("#InternalContent").summernote({
+                height: 150,
+                    tabsize: 2,
+                    toolbar: [
+                    ['style', ['bold', 'italic', 'underline', 'clear']],
+                    ['font', ['strikethrough', 'superscript', 'subscript']],
+                    ['fontsize', ['fontsize']],
+                    ['color', ['color']],
+                    ['para', ['ul', 'ol', 'paragraph']],
+                    ['height', ['height']]
+                  ]
+            });
             });
             jQuery('.star').attr('disabled', true);
             
@@ -2218,8 +2209,6 @@ echo $ticket_data->title;
 
     $('h5').html('<span class="stars">' + parseFloat($('input[name=amount]').val()) + '</span>');
             $('span.stars').stars();
-            $('h4').html('<span class="stars2">' + parseFloat($('input[name=amt]').val()) + '</span>');
-            $('span.stars2').stars();
     });
             $.fn.stars = function() {
             return $(this).each(function() {
diff --git a/resources/views/themes/default1/agent/helpdesk/ticket/unassigned.blade.php b/resources/views/themes/default1/agent/helpdesk/ticket/unassigned.blade.php
index 11c3b726d..6515b3d44 100644
--- a/resources/views/themes/default1/agent/helpdesk/ticket/unassigned.blade.php
+++ b/resources/views/themes/default1/agent/helpdesk/ticket/unassigned.blade.php
@@ -1,16 +1,21 @@
 @extends('themes.default1.agent.layout.agent')
 
 @section('Tickets')
-class="active"
+class="nav-link active"
 @stop
 
 @section('ticket-bar')
 active
 @stop
 
-@section('unassigned')
-class="active"
+@section('dept-ticket-bar')
+class="nav-link active"
 @stop
+
+@section('unassigned')
+class="nav-link active"
+@stop
+
 @section('PageHeader')
 <h1>{{Lang::get('lang.tickets')}}</h1>
 <style>
@@ -22,12 +27,15 @@ class="active"
  
  .tooltip1 .tooltiptext {
      visibility: hidden;
-     width: 100%;
+     width:300px;
+     max-height: 250px;
+     overflow: auto;
      background-color: black;
      color: #fff;
      text-align: center;
      border-radius: 6px;
-     padding: 5px 0;
+     padding: 10px;
+     font-weight: 300px !important;
  
      /* Position the tooltip */
      position: absolute;
@@ -51,43 +59,41 @@ if (Auth::user()->role == 'agent') {
 // dd($tickets);
 ?>
 <!-- Main content -->
-<div class="box box-info">
-    <div class="box-header with-border">
+@if(Session::has('success'))
+<div class="alert alert-success alert-dismissable">
+    <i class="fa  fa-check-circle"> </i> 
+    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
+    {{Session::get('success')}}
+</div>
+@endif
+<!-- failure message -->
+@if(Session::has('fails'))
+<div class="alert alert-danger alert-dismissable">
+    <i class="fa fa-ban"> </i> 
+    <b> {!! Lang::get('lang.alert') !!}! </b>
+    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
+    {{Session::get('fails')}}
+</div>
+@endif  
+<div class="card card-light">
+    <div class="card-header">
         <?php $counted = count(App\Model\helpdesk\Ticket\Tickets::where('assigned_to', '=', 0)->get()); ?>
-        <h3 class="box-title">{!! Lang::get('lang.unassigned') !!} </h3> <small id="title_refresh"> {!! $tickets !!} {!! Lang::get('lang.tickets') !!}</small>
+        <h3 class="card-title">{!! Lang::get('lang.unassigned') !!} </h3> &nbsp;<small id="title_refresh"> ({!! $tickets !!} {!! Lang::get('lang.tickets') !!})</small>
     </div><!-- /.box-header -->
-    <div class="box-body">
-        @if(Session::has('success'))
-        <div class="alert alert-success alert-dismissable">
-            <i class="fa  fa-check-circle"> </i> 
-            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
-            {{Session::get('success')}}
-        </div>
-        @endif
-        <!-- failure message -->
-        @if(Session::has('fails'))
-        <div class="alert alert-danger alert-dismissable">
-            <i class="fa fa-ban"> </i> 
-            <b> {!! Lang::get('lang.alert') !!}! </b>
-            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
-            {{Session::get('fails')}}
-        </div>
-        @endif   
+    <div class="card-body"> 
         {!! Form::open(['id'=>'modalpopup', 'route'=>'select_all','method'=>'post']) !!}
 
         <!--<div class="mailbox-controls">-->
         <!-- Check all button -->
-        <a class="btn btn-default btn-sm checkbox-toggle"><i class="fa fa-square-o"></i></a>
+        <a class="btn btn-default btn-sm checkbox-toggle"><i class="far fa-square"></i></a>
         <input type="submit" class="submit btn btn-default text-orange btn-sm" id="delete" name="submit" value="{!! Lang::get('lang.delete') !!}">
         <input type="submit" class="submit btn btn-default text-yellow btn-sm" id="close" name="submit" value="{!! Lang::get('lang.close') !!}">
-        <button type="button" class="btn btn-sm btn-default text-green" id="Edit_Ticket" data-toggle="modal" data-target="#MergeTickets"><i class="fa fa-code-fork"> </i> {!! Lang::get('lang.merge') !!}</button>
+        <button type="button" class="btn btn-sm btn-default text-green" id="Edit_Ticket" data-toggle="modal" data-target="#MergeTickets"><i class="fas fa-cogs"> </i> {!! Lang::get('lang.merge') !!}</button>
         
-        <button type="button" class="btn btn-sm btn-default" id="assign_Ticket" data-toggle="modal" data-target="#AssignTickets" style="display: none;"><i class="fa fa-hand-o-right"> </i> {!! Lang::get('lang.assign') !!}</button>
+        <button type="button" class="btn btn-sm btn-default" id="assign_Ticket" data-toggle="modal" data-target="#AssignTickets" style="display: none;"><i class="fas fa-hand-point-right"> </i> {!! Lang::get('lang.assign') !!}</button>
         <!--</div>-->
         <p><p/>
         <div class="mailbox-messages"  id="refresh">
-            <p style="display:none;text-align:center; position:fixed; margin-left:40%;margin-top:-70px;" id="show" class="text-red"><b>{!! Lang::get('lang.loading') !!}...</b></p>
-            <!-- table -->
 
             {!!$table->render('vendor.Chumper.template')!!}
 
@@ -96,12 +102,13 @@ if (Auth::user()->role == 'agent') {
     </div><!-- /.box-body -->
 </div><!-- /. box -->
 <!-- merge tickets modal -->
+<!-- merge tickets modal -->
 <div class="modal fade" id="MergeTickets">
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal" id="merge-close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                 <h4 class="modal-title">{!! Lang::get('lang.merge-ticket') !!} </h4>
+                <button type="button" class="close" data-dismiss="modal" id="merge-close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
             </div><!-- /.modal-header-->
             <div class ="modal-body">
                 <div class="row">
@@ -117,12 +124,12 @@ if (Auth::user()->role == 'agent') {
                             <div class="col-md-12">
                                 <div id="merge-succ-alert" class="alert alert-success alert-dismissable" style="display:none;" >
                                     <!--<button id="dismiss-merge" type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>-->
-                                    <h4><i class="icon fa fa-check"></i>{!! Lang::get('lang.alert') !!}!</h4>
+                                    <h4><i class="icon fas fa-check"></i>{!! Lang::get('lang.alert') !!}!</h4>
                                     <div id="message-merge-succ"></div>
                                 </div>
                                 <div id="merge-err-alert" class="alert alert-danger alert-dismissable" style="display:none;">
                                     <!--<button id="dismiss-merge2" type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>-->
-                                    <h4><i class="icon fa fa-ban"></i>{!! Lang::get('lang.alert') !!}!</h4>
+                                    <h4><i class="icon fas fa-ban"></i>{!! Lang::get('lang.alert') !!}!</h4>
                                     <div id="message-merge-err"></div>
                                 </div>
                             </div>
@@ -140,7 +147,6 @@ if (Auth::user()->role == 'agent') {
                                 <select class="form-control" id="select-merge-parent"  name='p_id' data-placeholder="{!! Lang::get('lang.select_tickets') !!}" style="width: 100%;"><option value=""></option></select>
                             </div>
                         </div>
-
                         <div class="row">
                             <div class="col-md-8">
                                 <label>{!! Lang::get('lang.merge-reason') !!}</label>
@@ -151,9 +157,9 @@ if (Auth::user()->role == 'agent') {
                     </div><!-- mereg-body-form -->
                 </div><!-- merge-body -->
             </div><!-- /.modal-body -->
-            <div class="modal-footer">
-                <button type="button" class="btn btn-default pull-left" data-dismiss="modal" id="dismis2">{!! Lang::get('lang.close') !!}</button>
-                <input  type="submit" id="merge-btn" class="btn btn-primary pull-right" value="{!! Lang::get('lang.merge') !!}"></input>
+            <div class="modal-footer justify-content-between">
+                <button type="button" class="btn btn-default" data-dismiss="modal" id="dismis2">{!! Lang::get('lang.close') !!}</button>
+                <input  type="submit" id="merge-btn" class="btn btn-primary" value="{!! Lang::get('lang.merge') !!}">
                 {!! Form::close() !!}
             </div><!-- /.modal-footer -->
         </div><!-- /.modal-content -->
@@ -164,8 +170,8 @@ if (Auth::user()->role == 'agent') {
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal" id="assign-close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                 <h4 class="modal-title">{!! Lang::get('lang.assign-ticket') !!} </h4>
+                <button type="button" class="close" data-dismiss="modal" id="assign-close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
             </div><!-- /.modal-header-->
             <div class ="modal-body">
                 <div class="row">
@@ -185,9 +191,9 @@ if (Auth::user()->role == 'agent') {
                         </div>
                     </div><!-- mereg-body-form -->
                 </div><!-- merge-body -->
-            <div class="modal-footer">
-                <button type="button" class="btn btn-default pull-left" data-dismiss="modal" id="dismis2">{!! Lang::get('lang.close') !!}</button>
-                <input  type="submit" id="merge-btn" class="btn btn-primary pull-right" value="{!! Lang::get('lang.assign') !!}"></input>
+            <div class="modal-footer justify-content-between">
+                <button type="button" class="btn btn-default" data-dismiss="modal" id="dismis2">{!! Lang::get('lang.close') !!}</button>
+                <input  type="submit" id="merge-btn" class="btn btn-primary" value="{!! Lang::get('lang.assign') !!}">
                 {!! Form::close() !!}
             </div><!-- /.modal-footer -->
         </div><!-- /.modal-content -->
@@ -195,21 +201,18 @@ if (Auth::user()->role == 'agent') {
 </div><!-- /.modal -->
 <!-- Assign ticket model-->
 <!-- Modal -->   
-<div class="modal fade in" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" style="display: none; padding-right: 15px;background-color: rgba(0, 0, 0, 0.7);">
+<div class="modal fade" id="myModal">
     <div class="modal-dialog" role="document">
-        <div class="col-md-2"></div>
-        <div class="col-md-8">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <button type="button" class="close closemodal" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
-                    <h4 class="modal-title" id="myModalLabel"></h4>
-                </div>
-                <div class="modal-body" id="custom-alert-body" >
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-primary pull-left yes" data-dismiss="modal">{{Lang::get('lang.ok')}}</button>
-                    <button type="button" class="btn btn-default no">{{Lang::get('lang.cancel')}}</button>
-                </div>
+        <div class="modal-content">
+            <div class="modal-header">
+                <h4 class="modal-title" id="myModalLabel"></h4>
+                <button type="button" class="close closemodal" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
+            </div>
+            <div class="modal-body" id="custom-alert-body" >
+            </div>
+            <div class="modal-footer justify-content-between">
+                <button type="button" class="btn btn-default no">{{Lang::get('lang.cancel')}}</button>
+                <button type="button" class="btn btn-primary yes" data-dismiss="modal">{{Lang::get('lang.ok')}}</button>
             </div>
         </div>
     </div>
@@ -226,11 +229,11 @@ if (Auth::user()->role == 'agent') {
             if (clicks) {
                 //Uncheck all checkboxes
                 $(".mailbox-messages input[type='checkbox']").iCheck("uncheck");
-                $(".fa", this).removeClass("fa-check-square-o").addClass('fa-square-o');
+                $(".far", this).removeClass("fa-check-square").addClass('fa-square');
             } else {
                 //Check all checkboxes
                 $(".mailbox-messages input[type='checkbox']").iCheck("check");
-                $(".fa", this).removeClass("fa-square-o").addClass('fa-check-square-o');
+                $(".far", this).removeClass("fa-square").addClass('fa-check-square');
             }
             $(this).data("clicks", !clicks);
         });
@@ -297,21 +300,21 @@ if (Auth::user()->role == 'agent') {
                 $('.yes').html("Yes");
             }
             $('#custom-alert-body').html(msg);
-            $("#myModal").css("display", "block");
+            $("#myModal").modal("show");
         });
 
         $(".closemodal, .no").click(function() {
 
-            $("#myModal").css("display", "none");
+            $("#myModal").modal("hide");
 
         });
 
         $('.yes').click(function() {
             var values = getValues();
             if (values == "") {
-                $("#myModal").css("display", "none");
+                $("#myModal").modal("hide");
             } else {
-                $("#myModal").css("display", "none");
+                $("#myModal").modal("hide");
                 $("#modalpopup").unbind('submit');
                 if (option == 0) {
                     //alert('delete');
diff --git a/resources/views/themes/default1/agent/layout/agent.blade.php b/resources/views/themes/default1/agent/layout/agent.blade.php
index f3c28e5f0..a2da5c8c3 100644
--- a/resources/views/themes/default1/agent/layout/agent.blade.php
+++ b/resources/views/themes/default1/agent/layout/agent.blade.php
@@ -359,7 +359,7 @@
                        <div class="image">
 
                             <img id="sidebar-profile-img" src="{{$auth_user_profile_pic}}" alt="User Image" width="auto" height="auto" 
-                                class="img-circle elevation-2">
+                                class="img-circle elevation-2" style="width: 30px;height: 30px;">
                         </div>
                         @endif
                        <div class="info">