diff --git a/resources/views/common/notifications/index.blade.php b/resources/views/common/notifications/index.blade.php
index 0b84b4d0c..7b00ca720 100644
--- a/resources/views/common/notifications/index.blade.php
+++ b/resources/views/common/notifications/index.blade.php
@@ -31,7 +31,7 @@
 
     @stack('bills_recurring')
 
-    <livewire:common.notifications.recurring type="bill" text-title="widgets.recurring_bills" />
+    <livewire:common.notifications.recurring type="bill" text-title="notifications.recurring_bills" />
 
     @stack('bills_reminder')
 
diff --git a/resources/views/livewire/common/notifications/exports.blade.php b/resources/views/livewire/common/notifications/exports.blade.php
index 0cd3e8055..4d67615d6 100644
--- a/resources/views/livewire/common/notifications/exports.blade.php
+++ b/resources/views/livewire/common/notifications/exports.blade.php
@@ -1,83 +1,95 @@
-@if ($notifications->total())
-    <div class="card" id="exports">
-        <div class="card-header">
+<div class="accordion" id="exports">
+    <div class="card">
+        <div class="card-header" id="heading-exports" data-toggle="collapse" data-target="#collapse-exports"
+                aria-expanded="false" aria-controls="collapse-exports">
             <div class="row align-items-center">
-                <div class="col-8">
-                    <h5 class="h3 mb-0">{{ trans('general.export') }}</h5>
-                </div>
+                <div class="col-12">
+                    <h3 class="mb-0">
+                        {{ trans('general.export') }}
 
-                <div class="col-4 text-right">
-                    <button type="button" class="btn btn-outline-success rounded-circle btn-icon-only btn-sm mr-2"
-                        data-toggle="tooltip"
-                        data-placement="right"
-                        title="{{ trans('notifications.mark_read_all') }}"
-                        wire:click="markReadAll()"
-                    >
-                        <span class="btn-inner--icon"><i class="fas fa-check-double"></i></span>
-                    </button>
+                        @if ($notifications->total())
+                            <button type="button" class="btn btn-outline-success rounded-circle btn-icon-only btn-sm ml-2"
+                                data-toggle="tooltip"
+                                data-placement="right"
+                                title="{{ trans('notifications.mark_read_all') }}"
+                                wire:click="markReadAll()"
+                            >
+                                <span class="btn-inner--icon"><i class="fas fa-check-double"></i></span>
+                            </button>
+                        @endif
+                    </h3>
                 </div>
             </div>
         </div>
 
-        <div class="table-responsive">
-            <table class="table table-flush table-hover" id="tbl-export">
-                <tbody>
-                    @foreach ($notifications as $notification)
-                        <tr class="row align-items-center border-top-1">
-                            <td class="col-xs-8 col-sm-10 col-md-10 col-lg-11 col-xl-11 text-left text-wrap">
-                                @if (empty($notification->message))
-                                    {!! trans('notifications.messages.export', [
-                                        'type' => $notification->translation,
-                                        'file_name' => $notification->file_name,
-                                        'url' => $notification->download_url
-                                    ]) !!}
-                                @else
-                                    {!! $notification->message !!}
-                                @endif
-                            </td>
+        <div id="collapse-exports" class="collapse" aria-labelledby="heading-exports" data-parent="#exports">
+            @if ($notifications->total())
+                <div class="table-responsive">
+                    <table class="table table-flush table-hover" id="tbl-export">
+                        <tbody>
+                            @foreach ($notifications as $notification)
+                                <tr class="row align-items-center border-top-1">
+                                    <td class="col-xs-8 col-sm-10 col-md-10 col-lg-11 col-xl-11 text-left text-wrap">
+                                        @if (empty($notification->message))
+                                            {!! trans('notifications.messages.export', [
+                                                'type' => $notification->translation,
+                                                'file_name' => $notification->file_name,
+                                                'url' => $notification->download_url
+                                            ]) !!}
+                                        @else
+                                            {!! $notification->message !!}
+                                        @endif
+                                    </td>
 
-                            <td class="col-xs-4 col-sm-2 col-md-2 col-lg-1 col-xl-1 text-center">
-                                <button type="button" class="btn btn-outline-success rounded-circle btn-icon-only btn-sm"
-                                    data-toggle="tooltip"
-                                    data-placement="right"
-                                    title="{{ trans('notifications.mark_read') }}"
-                                    wire:click="markRead('{{ $notification->notification_id }}')"
-                                >
-                                    <span class="btn-inner--icon"><i class="fa fa-check"></i></span>
-                                </button>
-                            </td>
-                        </tr>
-                    @endforeach
-                </tbody>
-            </table>
-        </div>
-
-        @if ($notifications->total() > 5)
-            <div class="card-footer table-action">
-                <div class="row">
-                    @if ($notifications->count())
-                        <div class="col-xs-12 col-sm-5 d-flex align-items-center">
-                            {!! Form::select('limit', ['5' => '5'], request('limit', 5), ['class' => 'disabled form-control form-control-sm d-inline-block w-auto d-none d-md-block', 'disabled' => 'disabled']) !!}
-                            <span class="table-text d-none d-lg-block ml-2">
-                                {{ trans('pagination.page') }}
-                                {{ trans('pagination.showing', ['first' => $notifications->firstItem(), 'last' => $notifications->lastItem(), 'total' => $notifications->total()]) }}
-                            </span>
-                        </div>
-
-                        <div class="col-xs-12 col-sm-7 pagination-xs">
-                            <nav class="float-right">
-                                {!! $notifications->withPath(request()->url())->withQueryString()->links() !!}
-                            </nav>
-                        </div>
-                    @else
-                        <div class="col-xs-12 col-sm-12" id="datatable-basic_info" role="status" aria-live="polite">
-                            <small>{{ trans('general.no_records') }}</small>
-                        </div>
-                    @endif
+                                    <td class="col-xs-4 col-sm-2 col-md-2 col-lg-1 col-xl-1 text-center">
+                                        <button type="button" class="btn btn-outline-success rounded-circle btn-icon-only btn-sm"
+                                            data-toggle="tooltip"
+                                            data-placement="right"
+                                            title="{{ trans('notifications.mark_read') }}"
+                                            wire:click="markRead('{{ $notification->notification_id }}')"
+                                        >
+                                            <span class="btn-inner--icon"><i class="fa fa-check"></i></span>
+                                        </button>
+                                    </td>
+                                </tr>
+                            @endforeach
+                        </tbody>
+                    </table>
                 </div>
-            </div>
-        @endif
+
+                @if ($notifications->total() > 5)
+                    <div class="card-footer table-action">
+                        <div class="row">
+                            @if ($notifications->count())
+                                <div class="col-xs-12 col-sm-5 d-flex align-items-center">
+                                    {!! Form::select('limit', ['5' => '5'], request('limit', 5), ['class' => 'disabled form-control form-control-sm d-inline-block w-auto d-none d-md-block', 'disabled' => 'disabled']) !!}
+                                    <span class="table-text d-none d-lg-block ml-2">
+                                        {{ trans('pagination.page') }}
+                                        {{ trans('pagination.showing', ['first' => $notifications->firstItem(), 'last' => $notifications->lastItem(), 'total' => $notifications->total()]) }}
+                                    </span>
+                                </div>
+
+                                <div class="col-xs-12 col-sm-7 pagination-xs">
+                                    <nav class="float-right">
+                                        {!! $notifications->withPath(request()->url())->withQueryString()->links() !!}
+                                    </nav>
+                                </div>
+                            @else
+                                <div class="col-xs-12 col-sm-12" id="datatable-basic_info" role="status" aria-live="polite">
+                                    <small>{{ trans('general.no_records') }}</small>
+                                </div>
+                            @endif
+                        </div>
+                    </div>
+                @endif
+            @else
+                <div class="col-xs-12 col-sm-12 mt-4 mb-4 text-center">
+                    <small>{{ trans('general.no_records') }}</small>
+                </div>
+            @endif
+        </div>
     </div>
+</div>
 
 @push('body_js')
     <script type="text/javascript">
@@ -98,5 +110,3 @@
         });
     </script>
 @endpush
-
-@endif
diff --git a/resources/views/livewire/common/notifications/imports.blade.php b/resources/views/livewire/common/notifications/imports.blade.php
index c1d1cffb7..184141f84 100644
--- a/resources/views/livewire/common/notifications/imports.blade.php
+++ b/resources/views/livewire/common/notifications/imports.blade.php
@@ -1,102 +1,113 @@
-@if ($notifications->total())
-    <div class="card" id="imports">
-        <div class="card-header">
+<div class="accordion" id="imports">
+    <div class="card">
+        <div class="card-header" id="heading-imports" data-toggle="collapse" data-target="#collapse-imports"
+                aria-expanded="false" aria-controls="collapse-imports">
             <div class="row align-items-center">
-                <div class="col-8">
-                    <h5 class="h3 mb-0">{{ trans('import.import') }}</h5>
-                </div>
+                <div class="col-12">
+                    <h3 class="mb-0">
+                        {{ trans('import.import') }}
 
-                <div class="col-4 text-right">
-                    <button type="button" class="btn btn-outline-success rounded-circle btn-icon-only btn-sm mr-2"
-                        data-toggle="tooltip"
-                        data-placement="right"
-                        title="{{ trans('notifications.mark_read_all') }}"
-                        wire:click="markReadAll()"
-                    >
-                        <span class="btn-inner--icon"><i class="fas fa-check-double"></i></span>
-                    </button>
+                        @if ($notifications->total())
+                        <button type="button" class="btn btn-outline-success rounded-circle btn-icon-only btn-sm mr-2"
+                                data-toggle="tooltip"
+                                data-placement="right"
+                                title="{{ trans('notifications.mark_read_all') }}"
+                                wire:click="markReadAll()"
+                            >
+                                <span class="btn-inner--icon"><i class="fas fa-check-double"></i></span>
+                            </button>
+                        @endif
+                    </h3>
                 </div>
             </div>
         </div>
 
-        <div class="table-responsive">
-            <table class="table table-flush table-hover" id="tbl-import">
-                <tbody>
-                    @foreach ($notifications as $notification)
-                        <tr class="row align-items-center border-top-1">
-                            <td class="col-xs-8 col-sm-10 col-md-10 col-lg-11 col-xl-11 text-left text-wrap">
-                                @if (empty($notification->errors))
-                                    {!! trans('notifications.messages.import', [
-                                        'type' => $notification->translation,
-                                        'count' => $notification->total_rows
-                                    ]) !!}
-                                @else
-                                    @foreach ($notification->errors as $error)
-                                        {!! $error !!}
-                                    @endforeach
-                                @endif
-                            </td>
+        <div id="collapse-imports" class="collapse" aria-labelledby="heading-imports" data-parent="#imports">
+            @if ($notifications->total())
+                <div class="table-responsive">
+                    <table class="table table-flush table-hover" id="tbl-import">
+                        <tbody>
+                            @foreach ($notifications as $notification)
+                                <tr class="row align-items-center border-top-1">
+                                    <td class="col-xs-8 col-sm-10 col-md-10 col-lg-11 col-xl-11 text-left text-wrap">
+                                        @if (empty($notification->errors))
+                                            {!! trans('notifications.messages.import', [
+                                                'type' => $notification->translation,
+                                                'count' => $notification->total_rows
+                                            ]) !!}
+                                        @else
+                                            @foreach ($notification->errors as $error)
+                                                {!! $error !!}
+                                            @endforeach
+                                        @endif
+                                    </td>
 
-                            <td class="col-xs-4 col-sm-2 col-md-2 col-lg-1 col-xl-1 text-center">
-                                <button type="button" class="btn btn-outline-success rounded-circle btn-icon-only btn-sm"
-                                    data-toggle="tooltip"
-                                    data-placement="right"
-                                    title="{{ trans('notifications.mark_read') }}"
-                                    wire:click="markRead('{{ $notification->notification_id }}')"
-                                >
-                                    <span class="btn-inner--icon"><i class="fa fa-check"></i></span>
-                                </button>
-                            </td>
-                        </tr>
-                    @endforeach
-                </tbody>
-            </table>
-        </div>
-
-        @if ($notifications->total() > 5)
-            <div class="card-footer table-action">
-                <div class="row">
-                    @if ($notifications->count())
-                        <div class="col-xs-12 col-sm-5 d-flex align-items-center">
-                            {!! Form::select('limit', ['5' => '5'], request('limit', 5), ['class' => 'disabled form-control form-control-sm d-inline-block w-auto d-none d-md-block', 'disabled' => 'disabled']) !!}
-                            <span class="table-text d-none d-lg-block ml-2">
-                                {{ trans('pagination.page') }}
-                                {{ trans('pagination.showing', ['first' => $notifications->firstItem(), 'last' => $notifications->lastItem(), 'total' => $notifications->total()]) }}
-                            </span>
-                        </div>
-
-                        <div class="col-xs-12 col-sm-7 pagination-xs">
-                            <nav class="float-right">
-                                {!! $notifications->withPath(request()->url())->withQueryString()->links() !!}
-                            </nav>
-                        </div>
-                    @else
-                        <div class="col-xs-12 col-sm-12" id="datatable-basic_info" role="status" aria-live="polite">
-                            <small>{{ trans('general.no_records') }}</small>
-                        </div>
-                    @endif
+                                    <td class="col-xs-4 col-sm-2 col-md-2 col-lg-1 col-xl-1 text-center">
+                                        <button type="button" class="btn btn-outline-success rounded-circle btn-icon-only btn-sm"
+                                            data-toggle="tooltip"
+                                            data-placement="right"
+                                            title="{{ trans('notifications.mark_read') }}"
+                                            wire:click="markRead('{{ $notification->notification_id }}')"
+                                        >
+                                            <span class="btn-inner--icon"><i class="fa fa-check"></i></span>
+                                        </button>
+                                    </td>
+                                </tr>
+                            @endforeach
+                        </tbody>
+                    </table>
                 </div>
-            </div>
-        @endif
+
+                @if ($notifications->total() > 5)
+                    <div class="card-footer table-action">
+                        <div class="row">
+                            @if ($notifications->count())
+                                <div class="col-xs-12 col-sm-5 d-flex align-items-center">
+                                    {!! Form::select('limit', ['5' => '5'], request('limit', 5), ['class' => 'disabled form-control form-control-sm d-inline-block w-auto d-none d-md-block', 'disabled' => 'disabled']) !!}
+                                    <span class="table-text d-none d-lg-block ml-2">
+                                        {{ trans('pagination.page') }}
+                                        {{ trans('pagination.showing', ['first' => $notifications->firstItem(), 'last' => $notifications->lastItem(), 'total' => $notifications->total()]) }}
+                                    </span>
+                                </div>
+
+                                <div class="col-xs-12 col-sm-7 pagination-xs">
+                                    <nav class="float-right">
+                                        {!! $notifications->withPath(request()->url())->withQueryString()->links() !!}
+                                    </nav>
+                                </div>
+                            @else
+                                <div class="col-xs-12 col-sm-12" id="datatable-basic_info" role="status" aria-live="polite">
+                                    <small>{{ trans('general.no_records') }}</small>
+                                </div>
+                            @endif
+                        </div>
+                    </div>
+                @endif
+            @else
+                <div class="col-xs-12 col-sm-12 mt-4 mb-4 text-center">
+                    <small>{{ trans('general.no_records') }}</small>
+                </div>
+            @endif
+        </div>
     </div>
+</div>
 
-    @push('body_js')
-        <script type="text/javascript">
-            window.addEventListener('mark-read', event => {
-                if (event.detail.type == 'import') {
-                    $.notify(event.detail.message, {
-                        type: 'success',
-                    });
-                }
-            });
-    
-            window.addEventListener('mark-read-all', event => {
-                if (event.detail.type == 'import') {
-                    $.notify(event.detail.message, {
-                        type: 'success',
-                    });
-                }
-            });
-        </script>
-    @endpush
-@endif
+@push('body_js')
+    <script type="text/javascript">
+        window.addEventListener('mark-read', event => {
+            if (event.detail.type == 'import') {
+                $.notify(event.detail.message, {
+                    type: 'success',
+                });
+            }
+        });
+
+        window.addEventListener('mark-read-all', event => {
+            if (event.detail.type == 'import') {
+                $.notify(event.detail.message, {
+                    type: 'success',
+                });
+            }
+        });
+    </script>
+@endpush
diff --git a/resources/views/livewire/common/notifications/new-apps.blade.php b/resources/views/livewire/common/notifications/new-apps.blade.php
index 567034348..6fe7f040f 100644
--- a/resources/views/livewire/common/notifications/new-apps.blade.php
+++ b/resources/views/livewire/common/notifications/new-apps.blade.php
@@ -3,7 +3,9 @@
         <div class="card">
             <div class="card-header" id="heading-new-apps" data-toggle="collapse" data-target="#collapse-new-apps" aria-expanded="true" aria-controls="collapse-new-apps">
                 <div class="align-items-center">
-                    <h4 class="mb-0">{{ trans_choice('notifications.new_apps', 2) }}</h4>
+                    <h3 class="mb-0">
+                        {{ trans_choice('notifications.new_apps', 2) }}
+                    </h3>
                 </div>
             </div>
 
diff --git a/resources/views/livewire/common/notifications/recurring.blade.php b/resources/views/livewire/common/notifications/recurring.blade.php
index 951be61a2..a1e3c5979 100644
--- a/resources/views/livewire/common/notifications/recurring.blade.php
+++ b/resources/views/livewire/common/notifications/recurring.blade.php
@@ -1,245 +1,256 @@
-@if ($notifications->count())
-    <div class="card" id="recurring-{{$type}}">
-        <div class="card-header">
+<div class="accordion" id="recurring-{{$type}}">
+    <div class="card">
+        <div class="card-header" id="heading-recurring-{{$type}}" data-toggle="collapse" data-target="#collapse-recurring-{{$type}}"
+                aria-expanded="false" aria-controls="collapse-recurring-{{$type}}">
             <div class="row align-items-center">
-                <div class="col-8">
-                    <h5 class="h3 mb-0">{{ trans($textTitle) }}</h5>
-                </div>
+                <div class="col-12">
+                    <h3 class="mb-0">
+                        {{ trans($textTitle) }}
 
-                <div class="col-4 text-right">
-                    <button type="button" class="btn btn-outline-success rounded-circle btn-icon-only btn-sm mr-2"
-                        data-toggle="tooltip"
-                        data-placement="right"
-                        title="{{ trans('notifications.mark_read_all') }}"
-                        wire:click="markReadAll()"
-                    >
-                        <span class="btn-inner--icon"><i class="fas fa-check-double"></i></span>
-                    </button>
+                        @if ($notifications->total())
+                            <button type="button" class="btn btn-outline-success rounded-circle btn-icon-only btn-sm mr-2"
+                                data-toggle="tooltip"
+                                data-placement="right"
+                                title="{{ trans('notifications.mark_read_all') }}"
+                                wire:click="markReadAll()"
+                            >
+                                <span class="btn-inner--icon"><i class="fas fa-check-double"></i></span>
+                            </button>
+                        @endif
+                    </h3>
                 </div>
             </div>
         </div>
 
-        <div class="table-responsive">
-            <table class="table table-flush table-hover" id="tbl-recurring-{{ $type }}">
-                <thead class="thead-light">
-                    <tr class="row table-head-line">
-                        @stack('document_number_th_start')
-                        @if (!$hideDocumentNumber)
-                            <th class="{{ $classDocumentNumber }}">
-                                @stack('document_number_th_inside_start')
+        <div id="collapse-recurring-{{$type}}" class="collapse" aria-labelledby="heading-recurring-{{$type}}" data-parent="#recurring-{{$type}}">
+            @if ($notifications->total())
+                <div class="table-responsive">
+                    <table class="table table-flush table-hover" id="tbl-recurring-{{ $type }}">
+                        <thead class="thead-light">
+                            <tr class="row table-head-line">
+                                @stack('document_number_th_start')
+                                @if (!$hideDocumentNumber)
+                                    <th class="{{ $classDocumentNumber }}">
+                                        @stack('document_number_th_inside_start')
 
-                                {{ trans_choice($textDocumentNumber, 1) }}
+                                        {{ trans_choice($textDocumentNumber, 1) }}
 
-                                @stack('document_number_th_inside_end')
-                            </th>
-                        @endif
-                        @stack('document_number_th_end')
+                                        @stack('document_number_th_inside_end')
+                                    </th>
+                                @endif
+                                @stack('document_number_th_end')
 
-                        @stack('contact_name_th_start')
-                        @if (!$hideContactName)
-                            <th class="{{ $classContactName }}">
-                                @stack('contact_name_th_inside_start')
+                                @stack('contact_name_th_start')
+                                @if (!$hideContactName)
+                                    <th class="{{ $classContactName }}">
+                                        @stack('contact_name_th_inside_start')
 
-                                {{ trans_choice($textContactName, 1) }}
+                                        {{ trans_choice($textContactName, 1) }}
 
-                                @stack('contact_name_th_inside_end')
-                            </th>
-                        @endif
-                        @stack('contact_name_th_end')
+                                        @stack('contact_name_th_inside_end')
+                                    </th>
+                                @endif
+                                @stack('contact_name_th_end')
 
-                        @stack('amount_th_start')
-                        @if (!$hideAmount)
-                            <th class="{{ $classAmount }}">
-                                @stack('amount_th_inside_start')
+                                @stack('amount_th_start')
+                                @if (!$hideAmount)
+                                    <th class="{{ $classAmount }}">
+                                        @stack('amount_th_inside_start')
 
-                                {{ trans('general.amount') }}
+                                        {{ trans('general.amount') }}
 
-                                @stack('amount_th_inside_end')
-                            </th>
-                        @endif
-                        @stack('amount_th_end')
+                                        @stack('amount_th_inside_end')
+                                    </th>
+                                @endif
+                                @stack('amount_th_end')
 
-                        @stack('issued_at_th_start')
-                        @if (!$hideIssuedAt)
-                            <th class="{{ $classIssuedAt }}">
-                                @stack('issued_at_th_inside_start')
+                                @stack('issued_at_th_start')
+                                @if (!$hideIssuedAt)
+                                    <th class="{{ $classIssuedAt }}">
+                                        @stack('issued_at_th_inside_start')
 
-                                {{ trans($textIssuedAt) }}
+                                        {{ trans($textIssuedAt) }}
 
-                                @stack('issued_at_th_inside_end')
-                            </th>
-                        @endif
-                        @stack('issued_at_th_end')
+                                        @stack('issued_at_th_inside_end')
+                                    </th>
+                                @endif
+                                @stack('issued_at_th_end')
 
-                        @stack('due_at_th_start')
-                        @if (!$hideDueAt)
-                            <th class="{{ $classDueAt }}">
-                                @stack('due_at_th_inside_start')
+                                @stack('due_at_th_start')
+                                @if (!$hideDueAt)
+                                    <th class="{{ $classDueAt }}">
+                                        @stack('due_at_th_inside_start')
 
-                                {{ trans($textDueAt) }}
+                                        {{ trans($textDueAt) }}
 
-                                @stack('due_at_th_inside_end')
-                            </th>
-                        @endif
-                        @stack('due_at_th_end')
+                                        @stack('due_at_th_inside_end')
+                                    </th>
+                                @endif
+                                @stack('due_at_th_end')
 
-                        @stack('status_th_start')
-                        @if (!$hideStatus)
-                            <th class="{{ $classStatus }}">
-                                @stack('status_th_inside_start')
+                                @stack('status_th_start')
+                                @if (!$hideStatus)
+                                    <th class="{{ $classStatus }}">
+                                        @stack('status_th_inside_start')
 
-                                {{ trans_choice('general.statuses', 1) }}
+                                        {{ trans_choice('general.statuses', 1) }}
 
-                                @stack('status_th_inside_end')
-                            </th>
-                        @endif
-                        @stack('status_th_end')
+                                        @stack('status_th_inside_end')
+                                    </th>
+                                @endif
+                                @stack('status_th_end')
 
-                        @if (!$hideActions)
-                            <th class="{{ $classActions }}">
-                                <a>{{ trans_choice('notifications.reads', 1) }}</a>
-                            </th>
-                        @endif
-                    </tr>
-                </thead>
+                                @if (!$hideActions)
+                                    <th class="{{ $classActions }}">
+                                        <a>{{ trans_choice('notifications.reads', 1) }}</a>
+                                    </th>
+                                @endif
+                            </tr>
+                        </thead>
 
-                <tbody>
-                    @foreach($notifications as $item)
-                        <tr class="row align-items-center border-top-1">
-                            @stack('document_number_td_start')
-                            @if (!$hideDocumentNumber)
-                                <td class="{{ $classDocumentNumber }}">
-                                    @stack('document_number_td_inside_start')
-        
-                                    <a href="{{ route($routeButtonShow , $item->id) }}" target="_blank">{{ $item->document_number }}</a>
-        
-                                    @stack('document_number_td_inside_end')
-                                </td>
-                            @endif
-                            @stack('document_number_td_end')
-        
-                            @stack('contact_name_td_start')
-                            @if (!$hideContactName)
-                                <td class="{{ $classContactName }}">
-                                    @stack('contact_name_td_inside_start')
-        
-                                    {{ $item->contact_name }}
-        
-                                    @stack('contact_name_td_inside_end')
-                                </td>
-                            @endif
-                            @stack('contact_name_td_end')
-        
-                            @stack('amount_td_start')
-                            @if (!$hideAmount)
-                                <td class="{{ $classAmount }}">
-                                    @stack('amount_td_inside_start')
-        
-                                    @money($item->amount, $item->currency_code, true)
-        
-                                    @stack('amount_td_inside_end')
-                                </td>
-                            @endif
-                            @stack('amount_td_end')
-        
-                            @stack('issued_at_td_start')
-                            @if (!$hideIssuedAt)
-                                <td class="{{ $classIssuedAt }}">
-                                    @stack('issued_at_td_inside_start')
-        
-                                    @date($item->issued_at)
-        
-                                    @stack('issued_at_td_inside_end')
-                                </td>
-                            @endif
-                            @stack('issued_at_td_end')
+                        <tbody>
+                            @foreach($notifications as $item)
+                                <tr class="row align-items-center border-top-1">
+                                    @stack('document_number_td_start')
+                                    @if (!$hideDocumentNumber)
+                                        <td class="{{ $classDocumentNumber }}">
+                                            @stack('document_number_td_inside_start')
+                
+                                            <a href="{{ route($routeButtonShow , $item->id) }}" target="_blank">{{ $item->document_number }}</a>
+                
+                                            @stack('document_number_td_inside_end')
+                                        </td>
+                                    @endif
+                                    @stack('document_number_td_end')
+                
+                                    @stack('contact_name_td_start')
+                                    @if (!$hideContactName)
+                                        <td class="{{ $classContactName }}">
+                                            @stack('contact_name_td_inside_start')
+                
+                                            {{ $item->contact_name }}
+                
+                                            @stack('contact_name_td_inside_end')
+                                        </td>
+                                    @endif
+                                    @stack('contact_name_td_end')
+                
+                                    @stack('amount_td_start')
+                                    @if (!$hideAmount)
+                                        <td class="{{ $classAmount }}">
+                                            @stack('amount_td_inside_start')
+                
+                                            @money($item->amount, $item->currency_code, true)
+                
+                                            @stack('amount_td_inside_end')
+                                        </td>
+                                    @endif
+                                    @stack('amount_td_end')
+                
+                                    @stack('issued_at_td_start')
+                                    @if (!$hideIssuedAt)
+                                        <td class="{{ $classIssuedAt }}">
+                                            @stack('issued_at_td_inside_start')
+                
+                                            @date($item->issued_at)
+                
+                                            @stack('issued_at_td_inside_end')
+                                        </td>
+                                    @endif
+                                    @stack('issued_at_td_end')
 
-                            @stack('due_at_td_start')
-                            @if (!$hideDueAt)
-                                <td class="{{ $classDueAt }}">
-                                    @stack('due_at_td_inside_start')
+                                    @stack('due_at_td_start')
+                                    @if (!$hideDueAt)
+                                        <td class="{{ $classDueAt }}">
+                                            @stack('due_at_td_inside_start')
 
-                                    @date($item->due_at)
+                                            @date($item->due_at)
 
-                                    @stack('due_at_td_inside_end')
-                                </td>
-                            @endif
-                            @stack('due_at_td_end')
+                                            @stack('due_at_td_inside_end')
+                                        </td>
+                                    @endif
+                                    @stack('due_at_td_end')
 
-                            @stack('status_td_start')
-                            @if (!$hideStatus)
-                                <td class="{{ $classStatus }}">
-                                    @stack('status_td_inside_start')
+                                    @stack('status_td_start')
+                                    @if (!$hideStatus)
+                                        <td class="{{ $classStatus }}">
+                                            @stack('status_td_inside_start')
 
-                                    <span class="badge badge-pill badge-{{ $item->status_label }}">{{ trans($textDocumentStatus . $item->status) }}</span>
+                                            <span class="badge badge-pill badge-{{ $item->status_label }}">{{ trans($textDocumentStatus . $item->status) }}</span>
 
-                                    @stack('status_td_inside_end')
-                                </td>
-                            @endif
-                            @stack('status_td_end')
+                                            @stack('status_td_inside_end')
+                                        </td>
+                                    @endif
+                                    @stack('status_td_end')
 
-                            @if (!$hideActions)
-                                <td class="{{ $classActions }}">
-                                    <button type="button" class="btn btn-outline-success rounded-circle btn-icon-only btn-sm"
-                                        data-toggle="tooltip"
-                                        data-placement="right"
-                                        title="{{ trans('notifications.mark_read') }}"
-                                        wire:click="markRead('{{ $item->notification_id }}')"
-                                    >
-                                        <span class="btn-inner--icon"><i class="fa fa-check"></i></span>
-                                    </button>
-                                </td>
-                            @endif
-                        </tr>
-                    @endforeach
-                </tbody>
-            </table>
-        </div>
-
-        @if ($notifications->total() > 5)
-            <div class="card-footer table-action">
-                <div class="row">
-                    @if ($notifications->count())
-                        <div class="col-xs-12 col-sm-5 d-flex align-items-center">
-                            {!! Form::select('limit', ['5' => '5'], request('limit', 5), ['class' => 'disabled form-control form-control-sm d-inline-block w-auto d-none d-md-block', 'disabled' => 'disabled']) !!}
-                            <span class="table-text d-none d-lg-block ml-2">
-                                {{ trans('pagination.page') }}
-                                {{ trans('pagination.showing', ['first' => $notifications->firstItem(), 'last' => $notifications->lastItem(), 'total' => $notifications->total()]) }}
-                            </span>
-                        </div>
-
-                        <div class="col-xs-12 col-sm-7 pagination-xs">
-                            <nav class="float-right">
-                                {!! $notifications->withPath(request()->url())->withQueryString()->links() !!}
-                            </nav>
-                        </div>
-                    @else
-                        <div class="col-xs-12 col-sm-12" id="datatable-basic_info" role="status" aria-live="polite">
-                            <small>{{ trans('general.no_records') }}</small>
-                        </div>
-                    @endif
+                                    @if (!$hideActions)
+                                        <td class="{{ $classActions }}">
+                                            <button type="button" class="btn btn-outline-success rounded-circle btn-icon-only btn-sm"
+                                                data-toggle="tooltip"
+                                                data-placement="right"
+                                                title="{{ trans('notifications.mark_read') }}"
+                                                wire:click="markRead('{{ $item->notification_id }}')"
+                                            >
+                                                <span class="btn-inner--icon"><i class="fa fa-check"></i></span>
+                                            </button>
+                                        </td>
+                                    @endif
+                                </tr>
+                            @endforeach
+                        </tbody>
+                    </table>
                 </div>
-            </div>
-        @endif
+
+                @if ($notifications->total() > 5)
+                    <div class="card-footer table-action">
+                        <div class="row">
+                            @if ($notifications->count())
+                                <div class="col-xs-12 col-sm-5 d-flex align-items-center">
+                                    {!! Form::select('limit', ['5' => '5'], request('limit', 5), ['class' => 'disabled form-control form-control-sm d-inline-block w-auto d-none d-md-block', 'disabled' => 'disabled']) !!}
+                                    <span class="table-text d-none d-lg-block ml-2">
+                                        {{ trans('pagination.page') }}
+                                        {{ trans('pagination.showing', ['first' => $notifications->firstItem(), 'last' => $notifications->lastItem(), 'total' => $notifications->total()]) }}
+                                    </span>
+                                </div>
+
+                                <div class="col-xs-12 col-sm-7 pagination-xs">
+                                    <nav class="float-right">
+                                        {!! $notifications->withPath(request()->url())->withQueryString()->links() !!}
+                                    </nav>
+                                </div>
+                            @else
+                                <div class="col-xs-12 col-sm-12" id="datatable-basic_info" role="status" aria-live="polite">
+                                    <small>{{ trans('general.no_records') }}</small>
+                                </div>
+                            @endif
+                        </div>
+                    </div>
+                @endif
+            @else
+                <div class="col-xs-12 col-sm-12 mt-4 mb-4 text-center">
+                    <small>{{ trans('general.no_records') }}</small>
+                </div>
+            @endif
+        </div>
     </div>
+</div>
 
-    @push('body_js')
-        <script type="text/javascript">
-            window.addEventListener('mark-read', event => {
-                if (event.detail.type == 'recurring-{{ $type }}') {
-                    $.notify(event.detail.message, {
-                        type: 'success',
-                    });
-                }
-            });
-    
-            window.addEventListener('mark-read-all', event => {
-                if (event.detail.type == 'recurring-{{ $type }}') {
-                    $.notify(event.detail.message, {
-                        type: 'success',
-                    });
-                }
-            });
-        </script>
-    @endpush
-@endif
+@push('body_js')
+    <script type="text/javascript">
+        window.addEventListener('mark-read', event => {
+            if (event.detail.type == 'recurring-{{ $type }}') {
+                $.notify(event.detail.message, {
+                    type: 'success',
+                });
+            }
+        });
+
+        window.addEventListener('mark-read-all', event => {
+            if (event.detail.type == 'recurring-{{ $type }}') {
+                $.notify(event.detail.message, {
+                    type: 'success',
+                });
+            }
+        });
+    </script>
+@endpush
diff --git a/resources/views/livewire/common/notifications/reminder.blade.php b/resources/views/livewire/common/notifications/reminder.blade.php
index 0d29e6f85..e5a28fbea 100644
--- a/resources/views/livewire/common/notifications/reminder.blade.php
+++ b/resources/views/livewire/common/notifications/reminder.blade.php
@@ -1,227 +1,239 @@
-@if ($notifications->count())
-    <div class="card" id="reminder-{{$type}}">
-        <div class="card-header">
+<div class="accordion" id="reminder-{{$type}}">
+    <div class="card">
+        <div class="card-header" id="heading-reminder-{{$type}}" data-toggle="collapse" data-target="#collapse-reminder-{{$type}}"
+                aria-expanded="false" aria-controls="collapse-reminder-{{$type}}">
             <div class="row align-items-center">
-                <div class="col-8">
-                    <h5 class="h3 mb-0">{{ trans($textTitle) }}</h5>
-                </div>
+                <div class="col-12">
+                    <h3 class="mb-0">
+                        {{ trans($textTitle) }}
 
-                <div class="col-4 text-right">
-                    <button type="button" class="btn btn-outline-success rounded-circle btn-icon-only btn-sm mr-2"
-                        data-toggle="tooltip"
-                        data-placement="right"
-                        title="{{ trans('notifications.mark_read_all') }}"
-                        wire:click="markReadAll()"
-                    >
-                        <span class="btn-inner--icon"><i class="fas fa-check-double"></i></span>
-                    </button>
+                        @if ($notifications->total())
+                            <button type="button" class="btn btn-outline-success rounded-circle btn-icon-only btn-sm mr-2"
+                                data-toggle="tooltip"
+                                data-placement="right"
+                                title="{{ trans('notifications.mark_read_all') }}"
+                                wire:click="markReadAll()"
+                            >
+                                <span class="btn-inner--icon"><i class="fas fa-check-double"></i></span>
+                            </button>
+                        @endif
+                    </h3>
                 </div>
             </div>
         </div>
 
-        <div class="table-responsive">
-            <table class="table table-flush table-hover" id="tbl-reminder-{{ $type }}">
-                <thead class="thead-light">
-                    <tr class="row table-head-line">
-                        @stack('document_number_th_start')
-                        @if (!$hideDocumentNumber)
-                            <th class="{{ $classDocumentNumber }}">
-                                @stack('document_number_th_inside_start')
+        <div id="collapse-reminder-{{$type}}" class="collapse" aria-labelledby="heading-reminder-{{$type}}" data-parent="#reminder-{{$type}}">
+            @if ($notifications->total())
+                <div class="table-responsive">
+                    <table class="table table-flush table-hover" id="tbl-reminder-{{ $type }}">
+                        <thead class="thead-light">
+                            <tr class="row table-head-line">
+                                @stack('document_number_th_start')
+                                @if (!$hideDocumentNumber)
+                                    <th class="{{ $classDocumentNumber }}">
+                                        @stack('document_number_th_inside_start')
 
-                                {{ trans_choice($textDocumentNumber, 1) }}
+                                        {{ trans_choice($textDocumentNumber, 1) }}
 
-                                @stack('document_number_th_inside_end')
-                            </th>
-                        @endif
-                        @stack('document_number_th_end')
+                                        @stack('document_number_th_inside_end')
+                                    </th>
+                                @endif
+                                @stack('document_number_th_end')
 
-                        @stack('contact_name_th_start')
-                        @if (!$hideContactName)
-                            <th class="{{ $classContactName }}">
-                                @stack('contact_name_th_inside_start')
+                                @stack('contact_name_th_start')
+                                @if (!$hideContactName)
+                                    <th class="{{ $classContactName }}">
+                                        @stack('contact_name_th_inside_start')
 
-                                {{ trans_choice($textContactName, 1) }}
+                                        {{ trans_choice($textContactName, 1) }}
 
-                                @stack('contact_name_th_inside_end')
-                            </th>
-                        @endif
-                        @stack('contact_name_th_end')
+                                        @stack('contact_name_th_inside_end')
+                                    </th>
+                                @endif
+                                @stack('contact_name_th_end')
 
-                        @stack('amount_th_start')
-                        @if (!$hideAmount)
-                            <th class="{{ $classAmount }}">
-                                @stack('amount_th_inside_start')
+                                @stack('amount_th_start')
+                                @if (!$hideAmount)
+                                    <th class="{{ $classAmount }}">
+                                        @stack('amount_th_inside_start')
 
-                                {{ trans('general.amount') }}
+                                        {{ trans('general.amount') }}
 
-                                @stack('amount_th_inside_end')
-                            </th>
-                        @endif
-                        @stack('amount_th_end')
+                                        @stack('amount_th_inside_end')
+                                    </th>
+                                @endif
+                                @stack('amount_th_end')
 
-                        @stack('issued_at_th_start')
-                        @if (!$hideIssuedAt)
-                            <th class="{{ $classIssuedAt }}">
-                                @stack('issued_at_th_inside_start')
+                                @stack('issued_at_th_start')
+                                @if (!$hideIssuedAt)
+                                    <th class="{{ $classIssuedAt }}">
+                                        @stack('issued_at_th_inside_start')
 
-                                {{ trans($textIssuedAt) }}
+                                        {{ trans($textIssuedAt) }}
 
-                                @stack('issued_at_th_inside_end')
-                            </th>
-                        @endif
-                        @stack('issued_at_th_end')
+                                        @stack('issued_at_th_inside_end')
+                                    </th>
+                                @endif
+                                @stack('issued_at_th_end')
 
-                        @stack('due_at_th_start')
-                        @if (!$hideDueAt)
-                            <th class="{{ $classDueAt }}">
-                                @stack('due_at_th_inside_start')
+                                @stack('due_at_th_start')
+                                @if (!$hideDueAt)
+                                    <th class="{{ $classDueAt }}">
+                                        @stack('due_at_th_inside_start')
 
-                                {{ trans($textDueAt) }}
+                                        {{ trans($textDueAt) }}
 
-                                @stack('due_at_th_inside_end')
-                            </th>
-                        @endif
-                        @stack('due_at_th_end')
+                                        @stack('due_at_th_inside_end')
+                                    </th>
+                                @endif
+                                @stack('due_at_th_end')
 
-                        @stack('status_th_start')
-                        @if (!$hideStatus)
-                            <th class="{{ $classStatus }}">
-                                @stack('status_th_inside_start')
+                                @stack('status_th_start')
+                                @if (!$hideStatus)
+                                    <th class="{{ $classStatus }}">
+                                        @stack('status_th_inside_start')
 
-                                {{ trans_choice('general.statuses', 1) }}
+                                        {{ trans_choice('general.statuses', 1) }}
 
-                                @stack('status_th_inside_end')
-                            </th>
-                        @endif
-                        @stack('status_th_end')
+                                        @stack('status_th_inside_end')
+                                    </th>
+                                @endif
+                                @stack('status_th_end')
 
-                        @if (!$hideActions)
-                            <th class="{{ $classActions }}">
-                                <a>{{ trans_choice('notifications.reads', 1) }}</a>
-                            </th>
-                        @endif
-                    </tr>
-                </thead>
+                                @if (!$hideActions)
+                                    <th class="{{ $classActions }}">
+                                        <a>{{ trans_choice('notifications.reads', 1) }}</a>
+                                    </th>
+                                @endif
+                            </tr>
+                        </thead>
 
-                <tbody>
-                    @foreach($notifications as $item)
-                        <tr class="row align-items-center border-top-1">
-                            @stack('document_number_td_start')
-                            @if (!$hideDocumentNumber)
-                                <td class="{{ $classDocumentNumber }}">
-                                    @stack('document_number_td_inside_start')
-        
-                                    <a href="{{ route($routeButtonShow , $item->id) }}" target="_blank">{{ $item->document_number }}</a>
-        
-                                    @stack('document_number_td_inside_end')
-                                </td>
-                            @endif
-                            @stack('document_number_td_end')
-        
-                            @stack('contact_name_td_start')
-                            @if (!$hideContactName)
-                                <td class="{{ $classContactName }}">
-                                    @stack('contact_name_td_inside_start')
-        
-                                    {{ $item->contact_name }}
-        
-                                    @stack('contact_name_td_inside_end')
-                                </td>
-                            @endif
-                            @stack('contact_name_td_end')
-        
-                            @stack('amount_td_start')
-                            @if (!$hideAmount)
-                                <td class="{{ $classAmount }}">
-                                    @stack('amount_td_inside_start')
-        
-                                    @money($item->amount, $item->currency_code, true)
-        
-                                    @stack('amount_td_inside_end')
-                                </td>
-                            @endif
-                            @stack('amount_td_end')
-        
-                            @stack('issued_at_td_start')
-                            @if (!$hideIssuedAt)
-                                <td class="{{ $classIssuedAt }}">
-                                    @stack('issued_at_td_inside_start')
-        
-                                    @date($item->issued_at)
-        
-                                    @stack('issued_at_td_inside_end')
-                                </td>
-                            @endif
-                            @stack('issued_at_td_end')
+                        <tbody>
+                            @foreach($notifications as $item)
+                                <tr class="row align-items-center border-top-1">
+                                    @stack('document_number_td_start')
+                                    @if (!$hideDocumentNumber)
+                                        <td class="{{ $classDocumentNumber }}">
+                                            @stack('document_number_td_inside_start')
+                
+                                            <a href="{{ route($routeButtonShow , $item->id) }}" target="_blank">{{ $item->document_number }}</a>
+                
+                                            @stack('document_number_td_inside_end')
+                                        </td>
+                                    @endif
+                                    @stack('document_number_td_end')
+                
+                                    @stack('contact_name_td_start')
+                                    @if (!$hideContactName)
+                                        <td class="{{ $classContactName }}">
+                                            @stack('contact_name_td_inside_start')
+                
+                                            {{ $item->contact_name }}
+                
+                                            @stack('contact_name_td_inside_end')
+                                        </td>
+                                    @endif
+                                    @stack('contact_name_td_end')
+                
+                                    @stack('amount_td_start')
+                                    @if (!$hideAmount)
+                                        <td class="{{ $classAmount }}">
+                                            @stack('amount_td_inside_start')
+                
+                                            @money($item->amount, $item->currency_code, true)
+                
+                                            @stack('amount_td_inside_end')
+                                        </td>
+                                    @endif
+                                    @stack('amount_td_end')
+                
+                                    @stack('issued_at_td_start')
+                                    @if (!$hideIssuedAt)
+                                        <td class="{{ $classIssuedAt }}">
+                                            @stack('issued_at_td_inside_start')
+                
+                                            @date($item->issued_at)
+                
+                                            @stack('issued_at_td_inside_end')
+                                        </td>
+                                    @endif
+                                    @stack('issued_at_td_end')
 
-                            @stack('due_at_td_start')
-                            @if (!$hideDueAt)
-                                <td class="{{ $classDueAt }}">
-                                    @stack('due_at_td_inside_start')
+                                    @stack('due_at_td_start')
+                                    @if (!$hideDueAt)
+                                        <td class="{{ $classDueAt }}">
+                                            @stack('due_at_td_inside_start')
 
-                                    @date($item->due_at)
+                                            @date($item->due_at)
 
-                                    @stack('due_at_td_inside_end')
-                                </td>
-                            @endif
-                            @stack('due_at_td_end')
+                                            @stack('due_at_td_inside_end')
+                                        </td>
+                                    @endif
+                                    @stack('due_at_td_end')
 
-                            @stack('status_td_start')
-                            @if (!$hideStatus)
-                                <td class="{{ $classStatus }}">
-                                    @stack('status_td_inside_start')
+                                    @stack('status_td_start')
+                                    @if (!$hideStatus)
+                                        <td class="{{ $classStatus }}">
+                                            @stack('status_td_inside_start')
 
-                                    <span class="badge badge-pill badge-{{ $item->status_label }}">{{ trans($textDocumentStatus . $item->status) }}</span>
+                                            <span class="badge badge-pill badge-{{ $item->status_label }}">{{ trans($textDocumentStatus . $item->status) }}</span>
 
-                                    @stack('status_td_inside_end')
-                                </td>
-                            @endif
-                            @stack('status_td_end')
+                                            @stack('status_td_inside_end')
+                                        </td>
+                                    @endif
+                                    @stack('status_td_end')
 
-                            @if (!$hideActions)
-                                <td class="{{ $classActions }}">
-                                    <button type="button" class="btn btn-outline-success rounded-circle btn-icon-only btn-sm"
-                                        data-toggle="tooltip"
-                                        data-placement="right"
-                                        title="{{ trans('notifications.mark_read') }}"
-                                        wire:click="markRead('{{ $item->notification_id }}')"
-                                    >
-                                        <span class="btn-inner--icon"><i class="fa fa-check"></i></span>
-                                    </button>
-                                </td>
-                            @endif
-                        </tr>
-                    @endforeach
-                </tbody>
-            </table>
-        </div>
-
-        @if ($notifications->total() > 5)
-            <div class="card-footer table-action">
-                <div class="row">
-                    @if ($notifications->count())
-                        <div class="col-xs-12 col-sm-5 d-flex align-items-center">
-                            {!! Form::select('limit', ['5' => '5'], request('limit', 5), ['class' => 'disabled form-control form-control-sm d-inline-block w-auto d-none d-md-block', 'disabled' => 'disabled']) !!}
-                            <span class="table-text d-none d-lg-block ml-2">
-                                {{ trans('pagination.page') }}
-                                {{ trans('pagination.showing', ['first' => $notifications->firstItem(), 'last' => $notifications->lastItem(), 'total' => $notifications->total()]) }}
-                            </span>
-                        </div>
-
-                        <div class="col-xs-12 col-sm-7 pagination-xs">
-                            <nav class="float-right">
-                                {!! $notifications->withPath(request()->url())->withQueryString()->links() !!}
-                            </nav>
-                        </div>
-                    @else
-                        <div class="col-xs-12 col-sm-12" id="datatable-basic_info" role="status" aria-live="polite">
-                            <small>{{ trans('general.no_records') }}</small>
-                        </div>
-                    @endif
+                                    @if (!$hideActions)
+                                        <td class="{{ $classActions }}">
+                                            <button type="button" class="btn btn-outline-success rounded-circle btn-icon-only btn-sm"
+                                                data-toggle="tooltip"
+                                                data-placement="right"
+                                                title="{{ trans('notifications.mark_read') }}"
+                                                wire:click="markRead('{{ $item->notification_id }}')"
+                                            >
+                                                <span class="btn-inner--icon"><i class="fa fa-check"></i></span>
+                                            </button>
+                                        </td>
+                                    @endif
+                                </tr>
+                            @endforeach
+                        </tbody>
+                    </table>
                 </div>
-            </div>
-        @endif
+
+                @if ($notifications->total() > 5)
+                    <div class="card-footer table-action">
+                        <div class="row">
+                            @if ($notifications->count())
+                                <div class="col-xs-12 col-sm-5 d-flex align-items-center">
+                                    {!! Form::select('limit', ['5' => '5'], request('limit', 5), ['class' => 'disabled form-control form-control-sm d-inline-block w-auto d-none d-md-block', 'disabled' => 'disabled']) !!}
+                                    <span class="table-text d-none d-lg-block ml-2">
+                                        {{ trans('pagination.page') }}
+                                        {{ trans('pagination.showing', ['first' => $notifications->firstItem(), 'last' => $notifications->lastItem(), 'total' => $notifications->total()]) }}
+                                    </span>
+                                </div>
+
+                                <div class="col-xs-12 col-sm-7 pagination-xs">
+                                    <nav class="float-right">
+                                        {!! $notifications->withPath(request()->url())->withQueryString()->links() !!}
+                                    </nav>
+                                </div>
+                            @else
+                                <div class="col-xs-12 col-sm-12" id="datatable-basic_info" role="status" aria-live="polite">
+                                    <small>{{ trans('general.no_records') }}</small>
+                                </div>
+                            @endif
+                        </div>
+                    </div>
+                @endif
+            @else
+                <div class="col-xs-12 col-sm-12 mt-4 mb-4 text-center">
+                    <small>{{ trans('general.no_records') }}</small>
+                </div>
+            @endif
+        </div>
     </div>
+</div>
 
 @push('body_js')
     <script type="text/javascript">
@@ -242,5 +254,3 @@
         });
     </script>
 @endpush
-
-@endif