diff --git a/app/Http/Controllers/Agent/kb/CategoryController.php b/app/Http/Controllers/Agent/kb/CategoryController.php
index 1c3eb7ead..1b1b22382 100644
--- a/app/Http/Controllers/Agent/kb/CategoryController.php
+++ b/app/Http/Controllers/Agent/kb/CategoryController.php
@@ -94,14 +94,14 @@ class CategoryController extends Controller
         			<div class="modal-dialog">
             			<div class="modal-content">
                 			<div class="modal-header">
+                                <h4 class="modal-title">'.Lang::get('lang.delete').'</h4>
                     			<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.are_you_sure_you_want_to_delete').'</h4>
                 			</div>
                 			<div class="modal-body">
-                				'.$model->name.'
+                				<span>'.Lang::get('lang.are_you_sure_you_want_to_delete').'</span>&nbsp;<b>'.$model->name.'</b>
                 			</div>
-                			<div class="modal-footer">
-                    			<button type="button" class="btn btn-default pull-left" data-dismiss="modal" id="dismis2">'.Lang::get('lang.close').'</button>
+                			<div class="modal-footer justify-content-between">
+                    			<button type="button" class="btn btn-default" data-dismiss="modal" id="dismis2">'.Lang::get('lang.close').'</button>
                     			<a href="category/delete/'.$model->id.'"><button class="btn btn-danger">'.Lang::get('lang.delete').'</button></a>
                 			</div>
             			</div>
diff --git a/app/Http/Controllers/Agent/kb/SettingsController.php b/app/Http/Controllers/Agent/kb/SettingsController.php
index 4293949cf..7e96d01b1 100644
--- a/app/Http/Controllers/Agent/kb/SettingsController.php
+++ b/app/Http/Controllers/Agent/kb/SettingsController.php
@@ -163,7 +163,7 @@ class SettingsController extends Controller
                         })
 
                         ->addColumn('Actions', function ($model) {
-                            return '<div class="row"><div class="col-md-12"><a href=comment/delete/'.$model->id.' class="btn btn-danger btn-xs">'.\Lang::get('lang.delete').'</a></div><div class="col-md-12"><a href=published/'.$model->id.' class="btn btn-warning btn-xs">'.\Lang::get('lang.publish').'</a></div></div>';
+                            return '<div class="row"><a href=comment/delete/'.$model->id.' class="btn btn-danger btn-xs">'.\Lang::get('lang.delete').'</a>&nbsp;<a href=published/'.$model->id.' class="btn btn-warning btn-xs">'.\Lang::get('lang.publish').'</a></div>';
                         })
                         ->make();
     }
diff --git a/resources/views/themes/default1/agent/helpdesk/canned/create.blade.php b/resources/views/themes/default1/agent/helpdesk/canned/create.blade.php
index 9090d93b9..03919d765 100644
--- a/resources/views/themes/default1/agent/helpdesk/canned/create.blade.php
+++ b/resources/views/themes/default1/agent/helpdesk/canned/create.blade.php
@@ -1,17 +1,21 @@
 @extends('themes.default1.agent.layout.agent')
 
 @section('Tools')
-class="active"
+class="nav-link active"
 @stop
 
 @section('tools-bar')
 active
 @stop
 
-@section('tools')
+@section('tool')
 class="active"
 @stop
 
+@section('tools')
+class="nav-link active"
+@stop
+
 @section('PageHeader')
 <h1>{{Lang::get('lang.canned_response')}}</h1>
 @stop
@@ -20,15 +24,15 @@ class="active"
 @section('content')
 <!-- open a form -->
 {!! Form::open(['route'=>'canned.store','method' => 'patch']) !!}
-<div class="box box-primary">
-    <div class="box-header with-border">
-        <h3 class="box-title">{!! Lang::get('lang.create') !!} </h3>
+<div class="card card-light">
+    <div class="card-header">
+        <h3 class="card-title">{!! Lang::get('lang.create') !!} </h3>
     </div>
-    <div class="box-body">
+    <div class="card-body">
         @if(Session::has('errors'))
         <?php //dd($errors); ?>
         <div class="alert alert-danger alert-dismissable">
-            <i class="fa fa-ban"></i>
+            <i class="fas fa-ban"></i>
             <b>{!! Lang::get('lang.alert') !!}!</b>
             <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
             <br/>
@@ -42,25 +46,36 @@ class="active"
         @endif
         <div class="row">
             <!-- username -->
-            <div class="col-xs-6 form-group {{ $errors->has('title') ? 'has-error' : '' }}">
+            <div class="col-sm-6 form-group {{ $errors->has('title') ? 'has-error' : '' }}">
                 {!! Form::label('title',Lang::get('lang.title')) !!}    <span class="text-red"> *</span>           
                 {!! Form::text('title',null,['class' => 'form-control']) !!}
             </div>
             <!-- firstname -->
-            <div class="col-xs-12 form-group {{ $errors->has('message') ? 'has-error' : '' }}">
+            <div class="col-sm-12 form-group {{ $errors->has('message') ? 'has-error' : '' }}">
                 {!! Form::label('message',Lang::get('lang.message')) !!}<span class="text-red"> *</span>
                 {!! Form::textarea('message',null,['class' => 'form-control']) !!}
             </div>
         </div>
     </div>
-    <div class="box-footer">
-        {!! Form::submit(Lang::get('lang.submit'),['class'=>'form-group btn btn-primary'])!!}
+    <div class="card-footer">
+        {!! Form::submit(Lang::get('lang.submit'),['class'=>'btn btn-primary'])!!}
     </div>
 </div>
 <script>
     $(function() {
         //Add text editor
-        $("textarea").wysihtml5();
+        $("textarea").summernote({
+            height: 300,
+            tabsize: 2,
+            toolbar: [
+            ['style', ['bold', 'italic', 'underline', 'clear']],
+            ['font', ['strikethrough', 'superscript', 'subscript']],
+            ['fontsize', ['fontsize']],
+            ['color', ['color']],
+            ['para', ['ul', 'ol', 'paragraph']],
+            ['height', ['height']]
+          ]
+          });
     });
 </script>
 @stop
diff --git a/resources/views/themes/default1/agent/helpdesk/canned/edit.blade.php b/resources/views/themes/default1/agent/helpdesk/canned/edit.blade.php
index 729aab147..6348fb400 100644
--- a/resources/views/themes/default1/agent/helpdesk/canned/edit.blade.php
+++ b/resources/views/themes/default1/agent/helpdesk/canned/edit.blade.php
@@ -2,17 +2,21 @@
 @extends('themes.default1.agent.layout.agent')
 
 @section('Tools')
-class="active"
+class="nav-link active"
 @stop
 
 @section('tools-bar')
 active
 @stop
 
-@section('tools')
+@section('tool')
 class="active"
 @stop
 
+@section('tools')
+class="nav-link active"
+@stop
+
 @section('PageHeader')
 <h1>{{Lang::get('lang.canned_response')}}</h1>
 @stop
@@ -20,16 +24,10 @@ class="active"
 @section('content')
 <!-- open a form -->
 {!! Form::model($canned, ['url' => 'canned/update/'.$canned->id,'method' => 'PATCH'] )!!}
-<!-- <section class="content"> -->
-<div class="box box-primary">
-    <div class="box-header with-border">
-        <h3 class="box-title">{!! Lang::get('lang.edit') !!}</h3>
-    </div>
-    <div class="box-body">
-        @if(Session::has('errors'))
+@if(Session::has('errors'))
         <?php //dd($errors); ?>
         <div class="alert alert-danger alert-dismissable">
-            <i class="fa fa-ban"></i>
+            <i class="fas fa-ban"></i>
             <b>{!! Lang::get('lang.alert') !!}!</b>
             <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
             <br/>
@@ -41,27 +39,45 @@ class="active"
             @endif
         </div>
         @endif
+<!-- <section class="content"> -->
+<div class="card card-light">
+    <div class="card-header">
+        <h3 class="card-title">{!! Lang::get('lang.edit') !!}</h3>
+    </div>
+    <div class="card-body">
+        
         <div class="row">
             <!-- username -->
-            <div class="col-xs-6 form-group {{ $errors->has('title') ? 'has-error' : '' }}">
+            <div class="col-sm-6 form-group {{ $errors->has('title') ? 'has-error' : '' }}">
                 {!! Form::label('title',Lang::get('lang.title')) !!}         <span class="text-red"> *</span>       
                 {!! Form::text('title',null,['class' => 'form-control']) !!}
             </div>
             <!-- firstname -->
-            <div class="col-xs-12 form-group {{ $errors->has('message') ? 'has-error' : '' }}">
+            <div class="col-sm-12 form-group {{ $errors->has('message') ? 'has-error' : '' }}">
                 {!! Form::label('message',Lang::get('lang.message')) !!}         <span class="text-red"> *</span>      
                 {!! Form::textarea('message',null,['class' => 'form-control']) !!}
             </div>
         </div>
     </div>
-    <div class="box-footer">
-        {!! Form::submit(Lang::get('lang.submit'),['class'=>'form-group btn btn-primary'])!!}
+    <div class="card-footer">
+        {!! Form::submit(Lang::get('lang.submit'),['class'=>'btn btn-primary'])!!}
     </div>
 </div>
 <script>
     $(function() {
         //Add text editor
-        $("textarea").wysihtml5();
+        $("textarea").summernote({
+            height: 300,
+            tabsize: 2,
+            toolbar: [
+            ['style', ['bold', 'italic', 'underline', 'clear']],
+            ['font', ['strikethrough', 'superscript', 'subscript']],
+            ['fontsize', ['fontsize']],
+            ['color', ['color']],
+            ['para', ['ul', 'ol', 'paragraph']],
+            ['height', ['height']]
+          ]
+          });
     });
 </script>
 @stop
diff --git a/resources/views/themes/default1/agent/helpdesk/canned/index.blade.php b/resources/views/themes/default1/agent/helpdesk/canned/index.blade.php
index b5acda164..88e4bd838 100644
--- a/resources/views/themes/default1/agent/helpdesk/canned/index.blade.php
+++ b/resources/views/themes/default1/agent/helpdesk/canned/index.blade.php
@@ -1,35 +1,32 @@
 @extends('themes.default1.agent.layout.agent')
 
 @section('Tools')
-class="active"
+class="nav-link active"
 @stop
 
 @section('tools-bar')
 active
 @stop
 
-@section('tools')
+@section('tool')
 class="active"
 @stop
 
+@section('tools')
+class="nav-link active"
+@stop
+
 @section('PageHeader')
 <h1>{{Lang::get('lang.tools')}}</h1>
 @stop
 
 <!-- content -->
 @section('content')
-<div class="box box-primary">
-    <div class="box-header with-border">
-        <h2 class="box-title">{!! Lang::get('lang.canned_response') !!}</h2><a href="{{route('canned.create')}}" class="btn btn-primary pull-right">{!! Lang::get('lang.create_canned_response') !!}</a></div>
-    <div class="box-body table-responsive">
-        <?php
-        $Canneds = App\Model\helpdesk\Agent_panel\Canned::where('user_id', '=', Auth::user()->id)->paginate(20);
-        ?>
-        <!-- check whether success or not -->
+<!-- check whether success or not -->
         {{-- Success message --}}
         @if(Session::has('success'))
         <div class="alert alert-success alert-dismissable">
-            <i class="fa  fa-check-circle"></i>
+            <i class="fas  fa-check-circle"></i>
             <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
             {{Session::get('success')}}
         </div>
@@ -37,12 +34,24 @@ class="active"
         {{-- failure message --}}
         @if(Session::has('fails'))
         <div class="alert alert-danger alert-dismissable">
-            <i class="fa fa-ban"></i>
+            <i class="fas 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.canned_response') !!}</h3>
+        <div class="card-tools">
+            <a href="{{route('canned.create')}}" class="btn btn-default btn-tool"><i class="fas fa-plus"> </i> 
+            {!! Lang::get('lang.create_canned_response') !!}</a>
+        </div>
+    </div>
+    <div class="card-body">
+        <?php
+        $Canneds = App\Model\helpdesk\Agent_panel\Canned::where('user_id', '=', Auth::user()->id)->paginate(20);
+        ?>
         <!-- Agent table -->
         <table class="table table-bordered table-hover" id="example1"  >
             <tr>
@@ -54,11 +63,11 @@ class="active"
                 <td>{{$Canned->title }}</td>
                 <td> 
                     {!! Form::open(['route'=>['canned.destroy', $Canned->id],'method'=>'DELETE']) !!}
-                    <a data-toggle="modal" data-target="#view{!! $Canned->id !!}" href="#" class="btn btn-info btn-xs btn-flat" onClick="updateModelTitle('{{$Canned->title}}')">{!! Lang::get('lang.view') !!}</a>
-                    <a href="{!! URL::route('canned.edit',$Canned->id) !!}" class="btn btn-primary btn-xs btn-flat">{!! Lang::get('lang.edit') !!}</a>
-                    {!! Form::button('<i class="fa fa-trash" style="color:black;"> </i> '.Lang::get('lang.delete'),
+                    <a data-toggle="modal" data-target="#view{!! $Canned->id !!}" href="#" class="btn btn-info btn-xs" onClick="updateModelTitle('{{$Canned->title}}')">{!! Lang::get('lang.view') !!}</a>
+                    <a href="{!! URL::route('canned.edit',$Canned->id) !!}" class="btn btn-primary btn-xs">{!! Lang::get('lang.edit') !!}</a>
+                    {!! Form::button(' '.Lang::get('lang.delete'),
                     ['type' => 'submit',
-                    'class'=> 'btn btn-warning btn-xs btn-flat',
+                    'class'=> 'btn btn-warning btn-xs',
                     'onclick'=>'return confirm("Are you sure?")'])
                     !!}
                     {!! Form::close() !!}
@@ -69,14 +78,16 @@ class="active"
                 <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"></h4>
+                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                            
                         </div>
                         <div class="modal-body">
                             <p><pre>{!! $Canned->message !!}</pre></p>
                         </div>
                         <div class="modal-footer">
-                            <button type="button" class="btn btn-default pull-left" data-dismiss="modal" id="dismis6">{!! Lang::get('lang.close') !!}</button>
+                            <button type="button" class="btn btn-default" data-dismiss="modal" id="dismis6">{!! Lang::get('lang.close') !!}</button>
                         </div>
                     </div><!-- /.modal-content -->
                 </div><!-- /.modal-dialog -->
diff --git a/resources/views/themes/default1/agent/helpdesk/ticket/new.blade.php b/resources/views/themes/default1/agent/helpdesk/ticket/new.blade.php
index f841af434..bb5092c6a 100644
--- a/resources/views/themes/default1/agent/helpdesk/ticket/new.blade.php
+++ b/resources/views/themes/default1/agent/helpdesk/ticket/new.blade.php
@@ -1,7 +1,7 @@
 @extends('themes.default1.agent.layout.agent')
 
 @section('Tickets')
-class="active"
+class="nav-link active"
 @stop
 
 @section('ticket-bar')
@@ -9,6 +9,10 @@ active
 @stop
 
 @section('newticket')
+class="nav-link active"
+@stop
+
+@section('ticket')
 class="active"
 @stop
 
@@ -19,229 +23,246 @@ class="active"
 @section('content')
 <!-- Main content -->
 {!! Form::open(['route'=>'post.newticket','method'=>'post','id'=>'form']) !!}
-<div class="box box-primary">
-    <div class="box-header with-border" id='box-header1'>
-        <h3 class="box-title">{!! Lang::get('lang.create_ticket') !!}</h3>
-        @if(Session::has('success'))
-        <br><br>        
-        <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'))
-        <br><br>
-        <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
-        @if(Session::has('errors'))
-        <br><br>
-        <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>
-            <br/>
-            @if($errors->first('email'))
-            <li class="error-message-padding">{!! $errors->first('email', ':message') !!}</li>
-            @endif
-            @if($errors->first('first_name'))
-            <li class="error-message-padding">{!! $errors->first('first_name', ':message') !!}</li>
-            @endif
-            @if($errors->first('phone'))
-            <li class="error-message-padding">{!! $errors->first('phone', ':message') !!}</li>
-            @endif
-            @if($errors->first('subject'))
-            <li class="error-message-padding">{!! $errors->first('subject', ':message') !!}</li>
-            @endif
-            @if($errors->first('body'))
-            <li class="error-message-padding">{!! $errors->first('body', ':message') !!}</li>
-            @endif
-            @if($errors->first('code'))
-            <li class="error-message-padding">{!! $errors->first('code', ':message') !!}</li>
-            @endif
-            @if($errors->first('mobile'))
-            <li class="error-message-padding">{!! $errors->first('mobile', ':message') !!}</li>
-            @endif
-        </div>
-        @endif
+@if(Session::has('success'))       
+<div class="alert alert-success alert-dismissable">
+    <i class="fas 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="fas 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
+@if(Session::has('errors'))
+<div class="alert alert-danger alert-dismissable">
+    <i class="fas fa-ban"></i>
+    <b>{!! Lang::get('lang.alert') !!}!</b>
+    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
+    <br/>
+    @if($errors->first('email'))
+    <li class="error-message-padding">{!! $errors->first('email', ':message') !!}</li>
+    @endif
+    @if($errors->first('first_name'))
+    <li class="error-message-padding">{!! $errors->first('first_name', ':message') !!}</li>
+    @endif
+    @if($errors->first('phone'))
+    <li class="error-message-padding">{!! $errors->first('phone', ':message') !!}</li>
+    @endif
+    @if($errors->first('subject'))
+    <li class="error-message-padding">{!! $errors->first('subject', ':message') !!}</li>
+    @endif
+    @if($errors->first('body'))
+    <li class="error-message-padding">{!! $errors->first('body', ':message') !!}</li>
+    @endif
+    @if($errors->first('code'))
+    <li class="error-message-padding">{!! $errors->first('code', ':message') !!}</li>
+    @endif
+    @if($errors->first('mobile'))
+    <li class="error-message-padding">{!! $errors->first('mobile', ':message') !!}</li>
+    @endif
+</div>
+@endif
+
+<div class="card card-light">
+    
+    <div class="card-header" id='box-header1'>
+        <h3 class="card-title">{!! Lang::get('lang.create_ticket') !!}</h3>
     </div><!-- /.box-header -->
-    <div class="box-header with-border">
-        <h4 class="box-title">{!! Lang::get('lang.user_details') !!}:</h4>
-    </div>
-    <div class="box-body">
+    
+    <div class="card-body">
+        
+        <div class="card card-light">
+            
+            <div class="card-header">
+                <h3 class="card-title">{!! Lang::get('lang.user_details') !!}:</h3>
+            </div>
 
-        <div class="form-group">
-            <div class="row">
-                <div class="col-md-4">
-                    <!-- email -->
-                    <div class="form-group {{ $errors->has('email') ? 'has-error' : '' }}">
-                        {!! Form::label('email',Lang::get('lang.email')) !!}
-                        @if ($email_mandatory->status == 1)
-                        <span class="text-red"> *</span>
-                        @endif
+            <div class="card-body">
 
-                        {!! Form::text('email',null,['class' => 'form-control', 'id' => 'email']) !!}
+                <div class="form-group">
+                    <div class="row">
+                        <div class="col-md-4">
+                            <!-- email -->
+                            <div class="form-group {{ $errors->has('email') ? 'has-error' : '' }}">
+                                {!! Form::label('email',Lang::get('lang.email')) !!}
+                                @if ($email_mandatory->status == 1)
+                                <span class="text-red"> *</span>
+                                @endif
+
+                                {!! Form::text('email',null,['class' => 'form-control', 'id' => 'email']) !!}
+                            </div>
+                        </div>
+                        
+                        <div class="col-md-4">
+                            <!-- email -->
+                            <div class="form-group {{ $errors->has('first_name') ? 'has-error' : '' }}">
+                                {!! Form::label('email',Lang::get('lang.first_name')) !!} <span class="text-red"> *</span>
+                               <!--  {!! Form::text('email',null,['class' => 'form-control'],['id' => 'email']) !!} -->
+                               <input type="text" name="first_name" id="first_name" class="form-control">
+                            </div>
+                        </div>
+
+                        <div class="col-md-4">
+                            <!-- full name -->
+                            <div class="form-group {{ $errors->has('last_name') ? 'has-error' : '' }}">
+                                {!! Form::label('fullname',Lang::get('lang.last_name')) !!} <span class="text-red"></span>
+                                <input type="text" name="last_name" id="last_name" class="form-control">
+                            </div>
+                        </div>
                     </div>
-                </div>
-                
-                <div class="col-md-4">
-                    <!-- email -->
-                    <div class="form-group {{ $errors->has('first_name') ? 'has-error' : '' }}">
-                        {!! Form::label('email',Lang::get('lang.first_name')) !!} <span class="text-red"> *</span>
-                       <!--  {!! Form::text('email',null,['class' => 'form-control'],['id' => 'email']) !!} -->
-                       <input type="text" name="first_name" id="first_name" class="form-control">
-                    </div>
-                </div>
+                    <div class="row">
+                        <div class="col-md-1 form-group {{ Session::has('country_code_error') ? 'has-error' : '' }}">
+                            <div class="form-group {{ $errors->has('code') ? 'has-error' : '' }}">
+                            {!! Form::label('code',Lang::get('lang.country-code')) !!}
+                            @if ($email_mandatory->status == 0 || $settings->status == 1)
+                                 <span class="text-red"> *</span>
+                            @endif
 
-                <div class="col-md-4">
-                    <!-- full name -->
-                    <div class="form-group {{ $errors->has('last_name') ? 'has-error' : '' }}">
-                        {!! Form::label('fullname',Lang::get('lang.last_name')) !!} <span class="text-red"></span>
-                        <input type="text" name="last_name" id="last_name" class="form-control">
+                            {!! Form::text('code',null,['class' => 'form-control', 'id' => 'country_code', 'placeholder' => $phonecode, 'title' => Lang::get('lang.enter-country-phone-code')]) !!}
+                            </div>
+                        </div>
+                        <div class="col-md-5">
+                            <!-- phone -->
+                            <div class="form-group {{ $errors->has('mobile') ? 'has-error' : '' }}">
+                                <label>{!! Lang::get('lang.mobile_number') !!}:</label>
+                                @if ($email_mandatory->status == 0 || $settings->status == 1)
+                                 <span class="text-red"> *</span>
+                                @endif
+                                {!! Form::input('number','mobile',null,['class' => 'form-control', 'id' => 'mobile']) !!}
+                            </div>
+                        </div>
+                        <div class="col-md-6">
+                            <!-- phone -->
+                            <div class="form-group {{ $errors->has('phone') ? 'has-error' : '' }}">
+                                <label>{!! Lang::get('lang.phone') !!}:</label>
+                                {!! Form::input('number','phone',null,['class' => 'form-control', 'id' => 'phone_number']) !!}
+                                {!! $errors->first('phone', '<spam class="help-block text-red">:message</spam>') !!}
+                            </div>
+                        </div>
+                        <!--  <div class="form-group">
+                             <div class="col-md-2">
+                                 <label>Ticket Notice:</label>
+                             </div>
+                             <div class="col-md-6">
+                                 <input type="checkbox" name="notice" id=""> Send alert to User
+                             </div>
+                         </div> -->
                     </div>
                 </div>
             </div>
-            <div class="row">
-                <div class="col-md-1 form-group {{ Session::has('country_code_error') ? 'has-error' : '' }}">
-                    <div class="form-group {{ $errors->has('code') ? 'has-error' : '' }}">
-                    {!! Form::label('code',Lang::get('lang.country-code')) !!}
-                    @if ($email_mandatory->status == 0 || $settings->status == 1)
-                         <span class="text-red"> *</span>
-                    @endif
+        </div>
+    
 
-                    {!! Form::text('code',null,['class' => 'form-control', 'id' => 'country_code', 'placeholder' => $phonecode, 'title' => Lang::get('lang.enter-country-phone-code')]) !!}
+        <div class="card card-light">
+            
+            <div class="card-header">
+
+                <h3 class="card-title">{!! Lang::get('lang.ticket_option') !!}:</h3>
+            </div>
+
+            <div class="card-body">
+                <!-- ticket options -->
+                <div class="form-group">
+                    <div class="row">
+                        <div class="col-md-3">
+                            <div class="form-group">
+                                <label>{!! Lang::get('lang.help_topic') !!}:</label>
+                                <!-- helptopic -->
+                                <?php $helptopic = App\Model\helpdesk\Manage\Help_topic::where('status', '=', 1)->select('topic', 'id')->get(); ?>
+                                {!! Form::select('helptopic', ['Helptopic'=>$helptopic->pluck('topic','id')->toArray()],null,['class' => 'form-control select','id'=>'selectid']) !!}
+                            </div>
+                        </div>
+                        <div class="col-md-3">
+                            <!-- sla plan -->
+                            <div class="form-group">
+                                <label>{!! Lang::get('lang.sla_plan') !!}:</label>
+                                <?php $sla_plan = App\Model\helpdesk\Manage\Sla_plan::where('status', '=', 1)->select('grace_period', 'id')->get(); ?>
+                                {!! Form::select('sla', ['SLA'=>$sla_plan->pluck('grace_period','id')->toArray()],null,['class' => 'form-control select']) !!}
+                            </div>
+                        </div>
+                        <div class="col-md-3">
+                            <!-- due date -->
+                            <div class="form-group" id="duedate">
+                                <label>{!! Lang::get('lang.due_date') !!}:</label>
+                                {!! Form::text('duedate',null,['class' => 'form-control','id'=>'datemask']) !!}
+                            </div>
+                        </div>
+                        <div class="col-md-3">
+                            <!-- assign to -->
+                            <div class="form-group">
+                                <label>{!! Lang::get('lang.assign_to') !!}:</label>
+                                <?php $agents = App\User::where('role', '!=', 'user')->where('active', '=', 1)->get(); ?>
+                                {!! Form::select('assignto', [''=>'Select an Agent','Agents'=>$agents->pluck('first_name','id')->toArray()],null,['class' => 'form-control select']) !!}
+                            </div>
+                        </div>
+                        <div id="response" class="col-md-6 form-group"></div>
+                    </div>
+                    <div class="row">
+                    {{-- Event fire --}}
+                    <?php Event::fire(new App\Events\ClientTicketForm()); ?>
                     </div>
                 </div>
-                <div class="col-md-5">
-                    <!-- phone -->
-                    <div class="form-group {{ $errors->has('mobile') ? 'has-error' : '' }}">
-                        <label>{!! Lang::get('lang.mobile_number') !!}:</label>
-                        @if ($email_mandatory->status == 0 || $settings->status == 1)
-                         <span class="text-red"> *</span>
-                        @endif
-                        {!! Form::input('number','mobile',null,['class' => 'form-control', 'id' => 'mobile']) !!}
+            </div>
+        </div>
+
+        <div class="card card-light">
+            
+            <div class="card-header">
+                <h3 class="card-title">{!! Lang::get('lang.ticket_detail') !!}:</h3>
+            </div>
+
+            <div class="card-body">
+                <!-- ticket details -->
+                <div class="form-group">
+                    <!-- subject -->
+                    <div class="form-group {{ $errors->has('subject') ? 'has-error' : '' }}">
+                        <div class="row">
+                            <div class="col-md-1">
+                                <label>{!! Lang::get('lang.subject') !!}:<span class="text-red"> *</span></label>
+                            </div>
+                            <div class="col-md-11">
+                                {!! Form::text('subject',null,['class' => 'form-control']) !!}
+                            </div>
+                        </div>
+                    </div>
+                    <div class="form-group {{ $errors->has('body') ? 'has-error' : '' }}">
+                        <!-- details -->
+                        <div class="row">
+                            <div class="col-md-1">
+                                <label>{!! Lang::get('lang.detail') !!}:<span class="text-red"> *</span></label>
+                            </div>
+                            <div class="col-md-11">
+                                {!! Form::textarea('body',null,['class' => 'form-control','id' => 'body', 'style'=>"width:100%; height:150px;"]) !!}
+
+                            </div>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <!-- priority -->
+                        <div class="row">
+                            <div class="col-md-1">
+                                <label>{!! Lang::get('lang.priority') !!}:</label>
+                            </div>
+                            <div class="col-md-5">
+                                <?php $Priority = App\Model\helpdesk\Ticket\Ticket_Priority::where('status','=',1)->get(); ?>
+                                {!! Form::select('priority', ['Priority'=>$Priority->pluck('priority_desc','priority_id')->toArray()],null,['class' => 'form-control select']) !!}
+                            </div>
+                            
+                        </div>
                     </div>
                 </div>
-                <div class="col-md-5">
-                    <!-- phone -->
-                    <div class="form-group {{ $errors->has('phone') ? 'has-error' : '' }}">
-                        <label>{!! Lang::get('lang.phone') !!}:</label>
-                        {!! Form::input('number','phone',null,['class' => 'form-control', 'id' => 'phone_number']) !!}
-                        {!! $errors->first('phone', '<spam class="help-block text-red">:message</spam>') !!}
-                    </div>
-                </div>
-                <!--  <div class="form-group">
-                     <div class="col-md-2">
-                         <label>Ticket Notice:</label>
-                     </div>
-                     <div class="col-md-6">
-                         <input type="checkbox" name="notice" id=""> Send alert to User
-                     </div>
-                 </div> -->
             </div>
         </div>
     </div>
-    <div class="box-header with-border">
-        <h4 class="box-title">{!! Lang::get('lang.ticket_option') !!}:</h4>
-    </div>
-    <div class="box-body">
-        <!-- ticket options -->
-        <div class="form-group">
-            <div class="row">
-                <div class="col-md-3">
-                    <div class="form-group">
-                        <label>{!! Lang::get('lang.help_topic') !!}:</label>
-                        <!-- helptopic -->
-                        <?php $helptopic = App\Model\helpdesk\Manage\Help_topic::where('status', '=', 1)->select('topic', 'id')->get(); ?>
-                        {!! Form::select('helptopic', ['Helptopic'=>$helptopic->pluck('topic','id')->toArray()],null,['class' => 'form-control select','id'=>'selectid']) !!}
-                    </div>
-                </div>
-                <div class="col-md-3">
-                    <!-- sla plan -->
-                    <div class="form-group">
-                        <label>{!! Lang::get('lang.sla_plan') !!}:</label>
-                        <?php $sla_plan = App\Model\helpdesk\Manage\Sla_plan::where('status', '=', 1)->select('grace_period', 'id')->get(); ?>
-                        {!! Form::select('sla', ['SLA'=>$sla_plan->pluck('grace_period','id')->toArray()],null,['class' => 'form-control select']) !!}
-                    </div>
-                </div>
-                <div class="col-md-3">
-                    <!-- due date -->
-                    <div class="form-group" id="duedate">
-                        <label>{!! Lang::get('lang.due_date') !!}:</label>
-                        {!! Form::text('duedate',null,['class' => 'form-control','id'=>'datemask']) !!}
-                    </div>
-                </div>
-                <div class="col-md-3">
-                    <!-- assign to -->
-                    <div class="form-group">
-                        <label>{!! Lang::get('lang.assign_to') !!}:</label>
-                        <?php $agents = App\User::where('role', '!=', 'user')->where('active', '=', 1)->get(); ?>
-                        {!! Form::select('assignto', [''=>'Select an Agent','Agents'=>$agents->pluck('first_name','id')->toArray()],null,['class' => 'form-control select']) !!}
-                    </div>
-                </div>
-                <div id="response" class="col-md-6 form-group"></div>
-            </div>
-            <div class="row">
-            {{-- Event fire --}}
-            <?php Event::fire(new App\Events\ClientTicketForm()); ?>
-            </div>
-        </div>
-    </div>
-    <div class="box-header with-border">
-        <h4 class="box-title">{!! Lang::get('lang.ticket_detail') !!}:</h4>
-    </div>
-    <div class="box-body">
-        <!-- ticket details -->
-        <div class="form-group">
-            <!-- subject -->
-            <div class="form-group {{ $errors->has('subject') ? 'has-error' : '' }}">
-                <div class="row">
-                    <div class="col-md-1">
-                        <label>{!! Lang::get('lang.subject') !!}:<span class="text-red"> *</span></label>
-                    </div>
-                    <div class="col-md-4">
-                        {!! Form::text('subject',null,['class' => 'form-control']) !!}
-                    </div>
-                </div>
-            </div>
-            <div class="form-group {{ $errors->has('body') ? 'has-error' : '' }}">
-                <!-- details -->
-                <div class="row">
-                    <div class="col-md-1">
-                        <label>{!! Lang::get('lang.detail') !!}:<span class="text-red"> *</span></label>
-                    </div>
-                    <div class="col-md-9">
-                        {!! Form::textarea('body',null,['class' => 'form-control','id' => 'body', 'style'=>"width:100%; height:150px;"]) !!}
 
-                    </div>
-                </div>
-            </div>
-            <div class="form-group">
-                <!-- priority -->
-                <div class="row">
-                    <div class="col-md-1">
-                        <label>{!! Lang::get('lang.priority') !!}:</label>
-                    </div>
-                    <div class="col-md-3">
-                        <?php $Priority = App\Model\helpdesk\Ticket\Ticket_Priority::where('status','=',1)->get(); ?>
-                        {!! Form::select('priority', ['Priority'=>$Priority->pluck('priority_desc','priority_id')->toArray()],null,['class' => 'form-control select']) !!}
-                    </div>
-                    
-                </div>
-            </div>
-             
-        </div>
-    </div>
-    <div class="box-footer">
+    <div class="card-footer">
         <div class="row">
-            <div class="col-md-1">
-            </div>
             <div class="col-md-3">
                 <input type="submit" value="{!! Lang::get('lang.create_ticket') !!}" class="btn btn-primary" onclick="this.disabled=true;this.value='Sending, please wait...';this.form.submit();">
             </div>
@@ -273,7 +294,18 @@ class="active"
         }
     });
     $(function () {
-        $("textarea").wysihtml5();
+        $("textarea").summernote({
+            height: 300,
+            tabsize: 2,
+            toolbar: [
+            ['style', ['bold', 'italic', 'underline', 'clear']],
+            ['font', ['strikethrough', 'superscript', 'subscript']],
+            ['fontsize', ['fontsize']],
+            ['color', ['color']],
+            ['para', ['ul', 'ol', 'paragraph']],
+            ['height', ['height']]
+          ]
+          });
     });
 
     $(document).ready(function () {
@@ -320,7 +352,9 @@ class="active"
                 });
 
     $(function () {
-        $('#datemask').datepicker({changeMonth: true, changeYear: true}).mask('99/99/9999');
+        $('#datemask').datetimepicker({
+            format: 'DD/MM/YYYY'
+        });
     });
 </script>
 
diff --git a/resources/views/themes/default1/agent/kb/category/create.blade.php b/resources/views/themes/default1/agent/kb/category/create.blade.php
index d564734c7..e501878db 100644
--- a/resources/views/themes/default1/agent/kb/category/create.blade.php
+++ b/resources/views/themes/default1/agent/kb/category/create.blade.php
@@ -1,12 +1,32 @@
 @extends('themes.default1.agent.layout.agent')
 @extends('themes.default1.agent.layout.sidebar')    
 
-@section('category')
-active
+@section('Tools')
+class="nav-link active"
+@stop
+
+@section('tool')
+class="active"
+@stop
+
+@section('kb')
+class="nav-link active"
 @stop
 
 @section('add-category')
-class="active"
+class="nav-link active"
+@stop
+
+@section('category')
+class="nav-link active"
+@stop
+
+@section('menu-open')
+class="nav nav-treeview menu-open"
+@stop
+
+@section('menu-parent')
+class="nav-item menu-open"
 @stop
 
 @section('PageHeader')
@@ -15,61 +35,62 @@ class="active"
 
 @section('content')
 {!! Form::open(array('action' => 'Agent\kb\CategoryController@store' , 'method' => 'post') )!!}
-<div class="box box-primary">
-    <div class="box-header with-border">
-        <h4 class="box-title">{!! Lang::get('lang.addcategory') !!}</h4> 
+@if(Session::has('success'))
+<div class="alert alert-success alert-dismissable">
+    <i class="fas 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="fas 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
+@if(Session::has('errors'))
+<?php //dd($errors); ?>
+<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>
+    <br/>
+    @if($errors->first('name'))
+    <li class="error-message-padding">{!! $errors->first('name', ':message') !!}</li>
+    @endif
+    @if($errors->first('slug'))
+    <li class="error-message-padding">{!! $errors->first('slug', ':message') !!}</li>
+    @endif
+    @if($errors->first('parent'))
+    <li class="error-message-padding">{!! $errors->first('parent', ':message') !!}</li>
+    @endif
+    @if($errors->first('status'))
+    <li class="error-message-padding">{!! $errors->first('status', ':message') !!}</li>
+    @endif
+    @if($errors->first('description'))
+    <li class="error-message-padding">{!! $errors->first('description', ':message') !!}</li>
+    @endif          
+</div>
+@endif
+<div class="card card-light">
+    <div class="card-header">
+        <h3 class="card-title">{!! Lang::get('lang.addcategory') !!}</h3> 
     </div>
-    <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
-        @if(Session::has('errors'))
-        <?php //dd($errors); ?>
-        <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>
-            <br/>
-            @if($errors->first('name'))
-            <li class="error-message-padding">{!! $errors->first('name', ':message') !!}</li>
-            @endif
-            @if($errors->first('slug'))
-            <li class="error-message-padding">{!! $errors->first('slug', ':message') !!}</li>
-            @endif
-            @if($errors->first('parent'))
-            <li class="error-message-padding">{!! $errors->first('parent', ':message') !!}</li>
-            @endif
-            @if($errors->first('status'))
-            <li class="error-message-padding">{!! $errors->first('status', ':message') !!}</li>
-            @endif
-            @if($errors->first('description'))
-            <li class="error-message-padding">{!! $errors->first('description', ':message') !!}</li>
-            @endif          
-        </div>
-        @endif
+    <div class="card-body">
+        
         <div class="row">
-            <div class="col-xs-3 form-group {{ $errors->has('name') ? 'has-error' : '' }}">
+            <div class="col-sm-3 {{ $errors->has('name') ? 'has-error' : '' }}">
                 {!! Form::label('name',Lang::get('lang.name')) !!}<span class="text-red"> *</span>
                 {!! Form::text('name',null,['class' => 'form-control']) !!}
             </div>
-            <div class="col-xs-3 form-group {{ $errors->has('parent') ? 'has-error' : '' }}">
+            <div class="col-sm-3 {{ $errors->has('parent') ? 'has-error' : '' }}">
                 {!! Form::label('parent',Lang::get('lang.parent')) !!}
                 {!!Form::select('parent',[''=>'Select a Category','Categories'=>$category],null,['class' => 'form-control select']) !!}
             </div>
-            <div class="col-xs-3 form-group {{ $errors->has('status') ? 'has-error' : '' }}">
+            <div class="col-sm-3 {{ $errors->has('status') ? 'has-error' : '' }}">
                 {!! Form::label('status',Lang::get('lang.status')) !!}
                 <div class="row">
                     <div class="col-md-4">
@@ -80,33 +101,30 @@ class="active"
                     </div>
                 </div>
             </div>
-            <div class="col-md-12 form-group {{ $errors->has('description') ? 'has-error' : '' }}">
+            <div class="col-md-12 {{ $errors->has('description') ? 'has-error' : '' }}">
                 {!! Form::label('description',Lang::get('lang.description')) !!}<span class="text-red"> *</span>
                 {!! Form::textarea('description',null,['class' => 'form-control','id'=>'description','placeholder'=>Lang::get('lang.enter_the_description') ]) !!}
             </div>
         </div>
     </div>
-    <div class="box-footer">
-        {!! Form::submit(Lang::get('lang.submit'),['class'=>'form-group btn btn-primary'])!!}
+    <div class="card-footer">
+        {!! Form::submit(Lang::get('lang.submit'),['class'=>'btn btn-primary'])!!}
     </div>
 </div>
 <script type="text/javascript">
     $(function() {
-        $("textarea").wysihtml5();
+        $("textarea").summernote({
+            height: 300,
+            tabsize: 2,
+            toolbar: [
+            ['style', ['bold', 'italic', 'underline', 'clear']],
+            ['font', ['strikethrough', 'superscript', 'subscript']],
+            ['fontsize', ['fontsize']],
+            ['color', ['color']],
+            ['para', ['ul', 'ol', 'paragraph']],
+            ['height', ['height']]
+          ]
+          });
     });
 </script>
-
-<script>
-    $(function() {
-        
-        $('input[type="checkbox"]').iCheck({
-            checkboxClass: 'icheckbox_flat-blue'
-        });
-        $('input[type="radio"]').iCheck({
-            radioClass: 'iradio_flat-blue'
-        });
-    
-    });        
-</script>
-
 @stop
diff --git a/resources/views/themes/default1/agent/kb/category/edit.blade.php b/resources/views/themes/default1/agent/kb/category/edit.blade.php
index c0c06d59e..7153db14a 100644
--- a/resources/views/themes/default1/agent/kb/category/edit.blade.php
+++ b/resources/views/themes/default1/agent/kb/category/edit.blade.php
@@ -2,8 +2,16 @@
 
 @extends('themes.default1.agent.layout.sidebar')    
 
-@section('category')
-active
+@section('Tools')
+class="nav-link active"
+@stop
+
+@section('tool')
+class="active"
+@stop
+
+@section('kb')
+class="nav-link active"
 @stop
 
 @section('PageHeader')
@@ -12,102 +20,99 @@ active
 
 @section('content')
 {!! Form::model($category,['url' => 'category/'.$category->id , 'method' => 'PATCH'] )!!}
-<div class="box box-primary">
-    <div class="box-header with-border">
-        <h3 class="box-title">{!! Lang::get('lang.edit') !!}</h3>
+@if(Session::has('success'))
+<div class="alert alert-success alert-dismissable">
+    <i class="far 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="fas 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
+@if(Session::has('errors'))
+<?php //dd($errors); ?>
+<div class="alert alert-danger alert-dismissable">
+    <i class="fas fa-ban"></i>
+    <b>{!! Lang::get('lang.alert') !!}!</b>
+    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
+    <br/>
+    @if($errors->first('name'))
+    <li class="error-message-padding">{!! $errors->first('name', ':message') !!}</li>
+    @endif
+    @if($errors->first('slug'))
+    <li class="error-message-padding">{!! $errors->first('slug', ':message') !!}</li>
+    @endif
+    @if($errors->first('parent'))
+    <li class="error-message-padding">{!! $errors->first('parent', ':message') !!}</li>
+    @endif
+    @if($errors->first('status'))
+    <li class="error-message-padding">{!! $errors->first('status', ':message') !!}</li>
+    @endif
+    @if($errors->first('description'))
+    <li class="error-message-padding">{!! $errors->first('description', ':message') !!}</li>
+    @endif          
+</div>
+@endif
+<div class="card card-light">
+    <div class="card-header">
+        <h3 class="card-title">{!! Lang::get('lang.edit') !!}</h3>
     </div>
-    <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
-        @if(Session::has('errors'))
-        <?php //dd($errors); ?>
-        <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>
-            <br/>
-            @if($errors->first('name'))
-            <li class="error-message-padding">{!! $errors->first('name', ':message') !!}</li>
-            @endif
-            @if($errors->first('slug'))
-            <li class="error-message-padding">{!! $errors->first('slug', ':message') !!}</li>
-            @endif
-            @if($errors->first('parent'))
-            <li class="error-message-padding">{!! $errors->first('parent', ':message') !!}</li>
-            @endif
-            @if($errors->first('status'))
-            <li class="error-message-padding">{!! $errors->first('status', ':message') !!}</li>
-            @endif
-            @if($errors->first('description'))
-            <li class="error-message-padding">{!! $errors->first('description', ':message') !!}</li>
-            @endif          
-        </div>
-        @endif
+    <div class="card-body">
         <div class="row">
-            <div class="col-xs-3 form-group {{ $errors->has('name') ? 'has-error' : '' }}">
+            <div class="col-sm-3 {{ $errors->has('name') ? 'has-error' : '' }}">
                 {!! Form::label('name',Lang::get('lang.name')) !!}<span class="text-red"> *</span>
 
                 {!! Form::text('name',null,['class' => 'form-control']) !!}
             </div>
-            <div class="col-xs-3 form-group {{ $errors->has('parent') ? 'has-error' : '' }}">
+            <div class="col-sm-3 {{ $errors->has('parent') ? 'has-error' : '' }}">
                 {!! Form::label('parent',Lang::get('lang.parent')) !!}
 
                 {!!Form::select('parent',[''=>'Select a Group','Categorys'=>$categories],null,['class' => 'form-control select']) !!}
             </div>
-            <div class="col-xs-3 form-group {{ $errors->has('status') ? 'has-error' : '' }}">
+            <div class="col-sm-3 {{ $errors->has('status') ? 'has-error' : '' }}">
                 {!! Form::label('status',Lang::get('lang.status')) !!}
 
                 <div class="row">
-                    <div class="col-xs-4">
+                    <div class="col-sm-4">
                         {!! Form::radio('status','1',true) !!} {{Lang::get('lang.active')}}
                     </div>
-                    <div class="col-xs-6">
+                    <div class="col-sm-6">
                         {!! Form::radio('status','0',null) !!} {{Lang::get('lang.inactive')}}
                     </div>
                 </div>
             </div>
-            <div class="col-md-12 form-group {{ $errors->has('description') ? 'has-error' : '' }}">
+            <div class="col-md-12 {{ $errors->has('description') ? 'has-error' : '' }}">
                 {!! Form::label('description',Lang::get('lang.description')) !!}<span class="text-red"> *</span>
 
                 {!! Form::textarea('description',null,['class' => 'form-control','size' => '128x10','id'=>'description','placeholder'=>'Enter the description']) !!}
             </div>
         </div>
     </div>
-    <div class="box-footer">
-        {!! Form::submit(Lang::get('lang.update'),['class'=>'form-group btn btn-primary'])!!}
+    <div class="card-footer">
+        {!! Form::submit(Lang::get('lang.update'),['class'=>'btn btn-primary'])!!}
     </div>
 </div>
 <script type="text/javascript">
     $(function() {
-        $("textarea").wysihtml5();
+        $("textarea").summernote({
+            height: 300,
+            tabsize: 2,
+            toolbar: [
+            ['style', ['bold', 'italic', 'underline', 'clear']],
+            ['font', ['strikethrough', 'superscript', 'subscript']],
+            ['fontsize', ['fontsize']],
+            ['color', ['color']],
+            ['para', ['ul', 'ol', 'paragraph']],
+            ['height', ['height']]
+          ]
+          });
     });
 </script>
-
-<script>
-    $(function() {
-        
-        $('input[type="checkbox"]').iCheck({
-            checkboxClass: 'icheckbox_flat-blue'
-        });
-        $('input[type="radio"]').iCheck({
-            radioClass: 'iradio_flat-blue'
-        });
-    
-    });        
-</script>
-
 @stop
\ No newline at end of file
diff --git a/resources/views/themes/default1/agent/kb/category/index.blade.php b/resources/views/themes/default1/agent/kb/category/index.blade.php
index 210a4c01e..6d4f2896b 100644
--- a/resources/views/themes/default1/agent/kb/category/index.blade.php
+++ b/resources/views/themes/default1/agent/kb/category/index.blade.php
@@ -2,41 +2,61 @@
 
 @extends('themes.default1.agent.layout.sidebar')    
 
-@section('category')
-active
-@stop
-
 @section('PageHeader')
 <h1>{{Lang::get('lang.category')}}</h1>
 @stop
 
-@section('all-category')
+@section('menu-open')
+class="nav nav-treeview menu-open"
+@stop
+
+@section('menu-parent')
+class="nav-item menu-open"
+@stop
+
+@section('Tools')
+class="nav-link active"
+@stop
+
+@section('tool')
 class="active"
 @stop
 
+@section('kb')
+class="nav-link active"
+@stop
+
+@section('all-category')
+class="nav-link active"
+@stop
+
+@section('category')
+class="nav-link active"
+@stop
+
 @section('content')
-<div class="box box-primary">
-    <div class="box-header with-border">
-        <h3 class="box-title">{{Lang::get('lang.allcategory')}}</h3>
+<!-- check whether success or not -->
+@if(Session::has('success'))
+<div class="alert alert-success alert-dismissable">
+    <i class="fas 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="fas 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.allcategory')}}</h3>
     </div>
-    <div class="box-body">
-        <!-- check whether success or not -->
-        @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">
         <div class="row">
             <div class="col-sm-12">
                 {!! Datatable::table()
diff --git a/resources/views/themes/default1/agent/kb/settings/comment.blade.php b/resources/views/themes/default1/agent/kb/settings/comment.blade.php
index 43995b77a..9abdbdc27 100644
--- a/resources/views/themes/default1/agent/kb/settings/comment.blade.php
+++ b/resources/views/themes/default1/agent/kb/settings/comment.blade.php
@@ -5,32 +5,45 @@
 <h1>{!! Lang::get('lang.comments') !!}</h1>
 @stop
 @section('comment')
+class="nav-link active"
+@stop
+
+@section('Tools')
+class="nav-link active"
+@stop
+
+@section('tool')
 class="active"
 @stop
 
+@section('kb')
+class="nav-link active"
+@stop
+
 @section('content')
-<div class="box box-primary">
-    <div class="box-header with-border">
-        <h3 class="box-title">{{Lang::get('lang.comments-list')}}</h3>
+
+@if(Session::has('success'))
+<div class="alert alert-success alert-dismissable">
+    <i class="fas 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="fas 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.comments-list')}}</h3>
     </div>
-    <div class="box-body">
-        <!-- check whether success or not -->
-        @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">
         <div class="row">
             <div class="col-sm-12">
                 {!! Datatable::table()
diff --git a/resources/views/themes/default1/agent/kb/settings/settings.blade.php b/resources/views/themes/default1/agent/kb/settings/settings.blade.php
index ffb8ab96d..c7b67855f 100644
--- a/resources/views/themes/default1/agent/kb/settings/settings.blade.php
+++ b/resources/views/themes/default1/agent/kb/settings/settings.blade.php
@@ -1,70 +1,72 @@
 @extends('themes.default1.agent.layout.agent')
 @extends('themes.default1.agent.layout.sidebar')    
 
-@section('settings')
+@section('Tools')
+class="nav-link active"
+@stop
+
+@section('tool')
 class="active"
 @stop
 
+@section('kb')
+class="nav-link active"
+@stop
+
+@section('settings')
+class="nav-link active"
+@stop
 
 @section('content')
 <!-- open a form -->
 {!! Form::model($settings,['url' => 'postsettings/'.$settings->id, 'method' => 'PATCH','files'=>true]) !!}
 
-<div class="box-header" style="margin:-5px;margin-top:-25px;">
-    <h3 class="box-title">{{Lang::get('lang.kb-settings')}}</h3> 
+<!-- check whether success or not -->
+@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>
-<!-- Custom Tabs -->
-<div class="nav-tabs-custom">
-    <ul class="nav nav-tabs">
-        <li class="active"><a href="#tab_1" data-toggle="tab">{{Lang::get('lang.system')}}</a></li>
-    </ul>
-    <div class="tab-content">
-        <div class="tab-pane active" id="tab_1">
-            {{-- For Form --}}
-            <!-- check whether success or not -->
-            @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
-            @if(Session::has('errors'))
-            <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>
-                <br/>
-                @if($errors->first('pagination'))
-                <li class="error-message-padding">{!! $errors->first('pagination', ':message') !!}</li>
-                @endif         
-            </div>
-            @endif
-            <!-- Name text form Required -->
-            <div class="row">
-                <div class="col-md-3 form-group">
-                    {!! Form::label('pagination',Lang::get('lang.numberofelementstodisplay')) !!} <span class="text-red"> *</span>
-                    <input type="number" class="form-control" name='pagination' value="{!! $settings->pagination !!}" min="2">
-                </div>
-            </div>
-        </div><!-- /.tab-pane -->
-    </div><!-- /.tab-pane -->
-    <div class="box-footer">
-        {!! Form::submit(Lang::get('lang.submit'),['class'=>'form-group btn btn-primary'])!!}
+@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
+@if(Session::has('errors'))
+<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>
+    <br/>
+    @if($errors->first('pagination'))
+    <li class="error-message-padding">{!! $errors->first('pagination', ':message') !!}</li>
+    @endif         
+</div>
+@endif
+<div class="card card-light">
+    
+    <div class="card-header">
+        <h3 class="card-title">{{Lang::get('lang.kb-settings')}}</h3> 
     </div>
-</div><!-- /.tab-content -->
-<script type="text/javascript">
-    $(function() {
-        $("textarea").wysihtml5();
-    });
-</script>
+    
+    <div class="card-body">
+        
+        <div class="row">
+            <div class="col-md-3">
+                {!! Form::label('pagination',Lang::get('lang.numberofelementstodisplay')) !!} <span class="text-red"> *</span>
+                <input type="number" class="form-control" name='pagination' value="{!! $settings->pagination !!}" min="2">
+            </div>
+        </div>
+    </div>
+
+     <div class="card-footer">
+        {!! Form::submit(Lang::get('lang.submit'),['class'=>'btn btn-primary'])!!}
+    </div>
+</div>
 @stop
diff --git a/resources/views/themes/default1/agent/layout/agent.blade.php b/resources/views/themes/default1/agent/layout/agent.blade.php
index 5f3074e1d..316a27294 100644
--- a/resources/views/themes/default1/agent/layout/agent.blade.php
+++ b/resources/views/themes/default1/agent/layout/agent.blade.php
@@ -522,7 +522,7 @@
                         </nav>
                     </div>
 
-                    <div class="tab-pane" id="tab_tools">
+                    <div @yield('tool') class="tab-pane" id="tab_tools">
                         
                         <nav class="navbar navbar-expand navbar-dark navbar-lightblue">
                           
diff --git a/resources/views/themes/default1/agent/layout/sidebar.blade.php b/resources/views/themes/default1/agent/layout/sidebar.blade.php
index d0a2905cc..a8065f7df 100644
--- a/resources/views/themes/default1/agent/layout/sidebar.blade.php
+++ b/resources/views/themes/default1/agent/layout/sidebar.blade.php
@@ -8,48 +8,95 @@
     class="active"
 @stop
 @section('sidebar')
-                        <li class="header">KNOWLEDGE BASE</li>
-                        <li class="treeview @yield('category')">
-                            <a href="#">
-                                <i class="fa fa-list-ul"></i> <span>{{Lang::get('lang.category')}}</span>
-                                <i class="fa fa-angle-left pull-right"></i>
-                            </a>
-                                    <ul class="treeview-menu">
-                                        <li @yield('add-category')><a href="{{url('category/create')}}"><i class="fa fa-circle-o"></i> {{Lang::get('lang.addcategory')}}</a></li>
-                                         <li @yield('all-category')><a href="{{url('category')}}"><i class="fa fa-circle-o"></i> {{Lang::get('lang.allcategory')}}</a></li>
-                                     </ul>
-                        </li>
-                        <li class="treeview @yield('article')">
-                            <a href="#">
-                                <i class="fa fa-edit"></i> <span>{{Lang::get('lang.article')}}</span>
-                                <i class="fa fa-angle-left pull-right"></i>
-                            </a>
-                                    <ul class="treeview-menu">
-                                        <li @yield('add-article')><a href="{{url('article/create')}}"><i class="fa fa-circle-o"></i> {{Lang::get('lang.addarticle')}}</a></li>
-                                         <li @yield('all-article')><a href="{{url('article')}}"><i class="fa fa-circle-o"></i> {{Lang::get('lang.allarticle')}}</a></li>
-                                     </ul>
-                        </li>
-                        <li class="treeview @yield('pages')">
-                            <a href="#">
-                                <i class="fa fa-file-text"></i> <span>{{Lang::get('lang.pages')}}</span>
-                                <i class="fa fa-angle-left pull-right"></i>
-                            </a>
-                                    <ul class="treeview-menu">
-                                        <li @yield('add-pages')><a href="{{url('page/create')}}"><i class="fa fa-circle-o"></i> {{Lang::get('lang.addpages')}}</a></li>
-                                         <li @yield('all-pages')><a href="{{url('page')}}"><i class="fa fa-circle-o"></i> {{Lang::get('lang.allpages')}}</a></li>
-                                     </ul>
-                        </li>
-                    
-                        <li @yield('comment')>
-                            <a href="{{url('comment')}}">
-                                <i class="fa fa-comments-o"></i>
-                                <span>{{Lang::get('lang.comments')}}</span>
-                            </a>
-                        </li>
-                        <li @yield('settings')>
-                            <a href="{{url('kb/settings')}}">
-                                 <i class="fa fa-wrench"></i>
-                                <span>{{Lang::get('lang.settings')}}</span>
-                            </a>
-                        </li>
-                    @stop
\ No newline at end of file
+
+<li class="nav-header">KNOWLEDGE BASE</li>
+
+<li @yield('menu-parent') class="nav-item">
+                                
+    <a href="#" @yield('category') class="nav-link">
+        <i class="nav-icon fas fa-list-ul"></i>
+        <p>{{Lang::get('lang.category')}}<i class="right fas fa-angle-left"></i></p>
+    </a>
+
+    <ul @yield('menu-open') class="nav nav-treeview">
+
+        <li class="nav-item">
+            <a @yield('add-category') href="{{url('category/create')}}" class="nav-link">
+                <i class="far fa-circle nav-icon"></i>
+                <p>{{Lang::get('lang.addcategory')}}</p>
+            </a>
+        </li>
+
+        <li class="nav-item">
+            <a @yield('all-category') href="{{url('category')}}" class="nav-link">
+                <i class="far fa-circle nav-icon"></i>
+                <p>{{Lang::get('lang.allcategory')}}</p>
+            </a>
+        </li>
+    </ul>
+</li>
+
+<li class="nav-item">
+                                
+    <a href="#" @yield('article') class="nav-link">
+        <i class="nav-icon fas fa-edit"></i>
+        <p>{{Lang::get('lang.article')}}<i class="right fas fa-angle-left"></i></p>
+    </a>
+
+    <ul class="nav nav-treeview">
+
+        <li class="nav-item">
+            <a @yield('add-article') href="{{url('article/create')}}" class="nav-link">
+                <i class="far fa-circle nav-icon"></i>
+                <p>{{Lang::get('lang.addarticle')}}</p>
+            </a>
+        </li>
+
+        <li class="nav-item">
+            <a @yield('all-article') href="{{url('article')}}" class="nav-link">
+                <i class="far fa-circle nav-icon"></i>
+                <p>{{Lang::get('lang.allarticle')}}</p>
+            </a>
+        </li>
+    </ul>
+</li>
+
+<li class="nav-item">
+                                
+    <a href="#" @yield('pages') class="nav-link">
+        <i class="nav-icon far fa-file-code"></i>
+        <p>{{Lang::get('lang.pages')}}<i class="right fas fa-angle-left"></i></p>
+    </a>
+
+    <ul class="nav nav-treeview">
+
+        <li class="nav-item">
+            <a @yield('add-pages') href="{{url('page/create')}}" class="nav-link">
+                <i class="far fa-circle nav-icon"></i>
+                <p>{{Lang::get('lang.addpages')}}</p>
+            </a>
+        </li>
+
+        <li class="nav-item">
+            <a @yield('all-pages') href="{{url('page')}}" class="nav-link">
+                <i class="far fa-circle nav-icon"></i>
+                <p>{{Lang::get('lang.allpages')}}</p>
+            </a>
+        </li>
+    </ul>
+</li>
+
+<li class="nav-item">
+    <a href="{{url('comment')}}" @yield('comment')  class="nav-link">
+        <i class="fas fa-comment"></i>
+        <p>{{Lang::get('lang.comments')}}</p>
+    </a>
+</li>
+
+<li class="nav-item">
+    <a href="{{url('kb/settings')}}" @yield('settings') class="nav-link">
+         <i class="fas fa-cog"></i>
+        <p>{{Lang::get('lang.settings')}}</p>
+    </a>
+</li>
+@stop
\ No newline at end of file