diff --git a/public/css/custom.css b/public/css/custom.css
index 596c09420..158bd301d 100644
--- a/public/css/custom.css
+++ b/public/css/custom.css
@@ -196,14 +196,6 @@
 /*--------Action Column Finish--------*/
 
 
-/*--------Table Search--------*/
-.table-text
-{
-    font-size: .875rem;
-}
-/*--------Table Search Finish--------*/
-
-
 /*--------Customer/Vendor Show--------*/
 .show-transaction-card-header
 {
@@ -733,14 +725,6 @@ table .align-items-center td span.badge {
     .col-xs-11 {width: 91.66%;}
     .col-xs-12 {width: 100%;}
 
-    .hidden-sm,
-    .hidden-md,
-    .hidden-lg,
-    .hidden-xl
-    {
-        display: none;
-    }
-
     .btn-alone
     {
         width: 100%;
@@ -778,11 +762,6 @@ table .align-items-center td span.badge {
         font-size: 0.75rem !important;
     }
 
-    .card-header-search
-    {
-        margin-left: -1rem;
-    }
-
     .col-aka
     {
         margin-left: 0;
@@ -823,18 +802,6 @@ table .align-items-center td span.badge {
 /*--------S Breakpoint--------*/
 @media (min-width: 576px) and (max-width: 767.98px)
 {
-    .hidden-md,
-    .hidden-lg,
-    .hidden-xl
-    {
-        display: none;
-    }
-
-    .card-header-search
-    {
-        margin-left: -1rem;
-    }
-
     .dashboard-action
     {
         margin-left: 4rem !important;
@@ -854,17 +821,6 @@ table .align-items-center td span.badge {
 /*--------M Breakpoint--------*/
 @media (min-width: 768px) and (max-width: 991.98px)
 {
-    .hidden-lg,
-    .hidden-xl
-    {
-        display: none;
-    }
-
-    .card-header-search
-    {
-        margin-left: -1rem;
-    }
-
     .sidenav .navbar-nav .dropdown-menu
     {
         left: 1rem !important;
@@ -880,26 +836,6 @@ table .align-items-center td span.badge {
 /*--------L Breakpoint--------*/
 @media (min-width: 992px) and (max-width: 1199.98px)
 {
-    .hidden-xl
-    {
-        display: none;
-    }
-
-    .card-header-search
-    {
-        margin-left: -1rem;
-    }
-
-    .card-header-search-text
-    {
-        padding-left: 17px;
-    }
-
-    .card-header-space
-    {
-        white-space: nowrap;
-    }
-
     .sidenav .navbar-nav .dropdown-menu
     {
         left: 1rem;
@@ -911,15 +847,5 @@ table .align-items-center td span.badge {
     }
 }
 /*--------L Breakpoint Finish--------*/
-
-/*--------XL Breakpoint--------*/
-@media (min-width: 1200px) and (max-width: 1327.98px)
-{
-    .hidden-xl
-    {
-        display: none;
-    }
-}
-/*--------XL Breakpoint Finish--------*/
 /*----------------RESPONSIVE END LINE----------------*/
 
diff --git a/resources/views/auth/permissions/index.blade.php b/resources/views/auth/permissions/index.blade.php
index 7417823f5..fe0762dd4 100644
--- a/resources/views/auth/permissions/index.blade.php
+++ b/resources/views/auth/permissions/index.blade.php
@@ -18,8 +18,8 @@
                  'class' => 'mb-0'
              ]) !!}
                  <div class="row"  v-if="!bulk_action.show">
-                     <div class="col-12 card-header-search">
-                        <span class="table-text hidden-lg">{{ trans('general.search') }}:</span>
+                    <div class="col-12 d-flex align-items-center">
+                        <span class="font-weight-400 d-none d-lg-block mr-2">{{ trans('general.search') }}:</span>
                         <akaunting-search></akaunting-search>
                      </div>
                  </div>
@@ -32,10 +32,10 @@
             <table class="table table-flush table-hover">
                 <thead class="thead-light">
                     <tr class="row table-head-line">
-                        <th class="col-sm-2 col-md-1 col-lg-1 hidden-sm">{{ Form::bulkActionAllGroup() }}</th>
+                        <th class="col-sm-2 col-md-1 col-lg-1 d-none d-sm-block">{{ Form::bulkActionAllGroup() }}</th>
                         <th class="col-xs-4 col-sm-4 col-md-4 col-lg-4">@sortablelink('display_name', trans('general.name'), ['filter' => 'active, visible'], ['class' => 'col-aka', 'rel' => 'nofollow'])</th>
                         <th class="col-xs-4 col-sm-4 col-md-3 col-lg-3 long-texts">@sortablelink('name', trans('general.code'))</th>
-                        <th class="col-md-2 col-lg-3 hidden-md long-texts">@sortablelink('description', trans('general.description'))</th>
+                        <th class="col-md-2 col-lg-3 d-none d-md-block long-texts">@sortablelink('description', trans('general.description'))</th>
                         <th class="col-xs-4 col-sm-2 col-md-2 col-lg-1 text-center">{{ trans('general.actions') }}</th>
                     </tr>
                 </thead>
@@ -43,10 +43,10 @@
                 <tbody>
                     @foreach($permissions as $item)
                         <tr class="row align-items-center border-top-1">
-                            <td class="col-sm-2 col-md-1 col-lg-1 hidden-sm border-0">{{ Form::bulkActionGroup($item->id, $item->name) }}</td>
+                            <td class="col-sm-2 col-md-1 col-lg-1 d-none d-sm-block border-0">{{ Form::bulkActionGroup($item->id, $item->name) }}</td>
                             <td class="col-xs-4 col-sm-4 col-md-4 col-lg-4 border-0"><a class="text-success col-aka" href="{{ route('permissions.edit', $item->id) }}">{{ $item->display_name }}</a></td>
                             <td class="col-xs-4 col-sm-4 col-md-3 col-lg-3 border-0 long-texts">{{ $item->name }}</td>
-                            <td class="col-md-2 col-lg-3 hidden-md border-0 long-texts">{{ $item->description }}</td>
+                            <td class="col-md-2 col-lg-3 d-none d-md-block border-0 long-texts">{{ $item->description }}</td>
                             <td class="col-xs-4 col-sm-2 col-md-2 col-lg-1 text-center border-0">
                                 <div class="dropdown">
                                     <a class="btn btn-neutral btn-sm text-light items-align-center py-2" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
diff --git a/resources/views/auth/roles/index.blade.php b/resources/views/auth/roles/index.blade.php
index 89bbe3656..110279055 100644
--- a/resources/views/auth/roles/index.blade.php
+++ b/resources/views/auth/roles/index.blade.php
@@ -18,8 +18,8 @@
                 'class' => 'mb-0'
             ]) !!}
                 <div class="row" v-if="!bulk_action.show">
-                    <div class="col-12 card-header-search">
-                        <span class="table-text hidden-lg">{{ trans('general.search') }}:</span>
+                    <div class="col-12 d-flex align-items-center">
+                        <span class="font-weight-400 d-none d-lg-block mr-2">{{ trans('general.search') }}:</span>
                         <akaunting-search></akaunting-search>
                     </div>
                 </div>
@@ -32,10 +32,10 @@
             <table class="table table-flush table-hover">
                 <thead class="thead-light">
                     <tr class="row table-head-line">
-                        <th class="col-sm-3 col-md-2 col-lg-1 hidden-sm">{{ Form::bulkActionAllGroup() }}</th>
+                        <th class="col-sm-3 col-md-2 col-lg-1 d-none d-sm-block">{{ Form::bulkActionAllGroup() }}</th>
                         <th class="col-xs-4 col-sm-3 col-md-4 col-lg-4">@sortablelink('display_name', trans('general.name'), ['filter' => 'active, visible'], ['class' => 'col-aka', 'rel' => 'nofollow'])</th>
                         <th class="col-xs-4 col-sm-3 col-md-4 col-lg-3">@sortablelink('name', trans('general.code'))</th>
-                        <th class="col-lg-3 hidden-lg">@sortablelink('description', trans('general.description'))</th>
+                        <th class="col-lg-3 d-none d-lg-block">@sortablelink('description', trans('general.description'))</th>
                         <th class="col-xs-4 col-sm-3 col-md-2 col-lg-1 text-center">{{ trans('general.actions') }}</th>
                     </tr>
                 </thead>
@@ -43,10 +43,10 @@
                 <tbody>
                     @foreach($roles as $item)
                         <tr class="row align-items-center border-top-1">
-                            <td class="col-sm-3 col-md-2 col-lg-1 hidden-sm border-0">{{ Form::bulkActionGroup($item->id, $item->name) }}</td>
+                            <td class="col-sm-3 col-md-2 col-lg-1 d-none d-sm-block border-0">{{ Form::bulkActionGroup($item->id, $item->name) }}</td>
                             <td class="col-xs-4 col-sm-3 col-md-4 col-lg-4 border-0"><a class="text-success col-aka" href="{{ route('roles.edit', $item->id) }}">{{ $item->display_name }}</a></td>
                             <td class="col-xs-4 col-sm-3 col-md-4 col-lg-3 border-0">{{ $item->name }}</td>
-                            <td class="col-lg-3 hidden-lg border-0">{{ $item->description }}</td>
+                            <td class="col-lg-3 d-none d-sm-block border-0">{{ $item->description }}</td>
                             <td class="col-xs-4 col-sm-3 col-md-2 col-lg-1 text-center border-0">
                                 <div class="dropdown">
                                     <a class="btn btn-neutral btn-sm text-light items-align-center py-2" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
diff --git a/resources/views/auth/users/index.blade.php b/resources/views/auth/users/index.blade.php
index 680b3a727..e5b625f7d 100644
--- a/resources/views/auth/users/index.blade.php
+++ b/resources/views/auth/users/index.blade.php
@@ -18,8 +18,8 @@
                 'class' => 'mb-0'
             ]) !!}
                 <div class="row" v-if="!bulk_action.show">
-                    <div class="col-12 card-header-search">
-                        <span class="table-text hidden-lg">{{ trans('general.search') }}:</span>
+                    <div class="col-12 d-flex align-items-center">
+                        <span class="font-weight-400 d-none d-lg-block mr-2">{{ trans('general.search') }}:</span>
                         <akaunting-search></akaunting-search>
                      </div>
                 </div>
@@ -32,10 +32,10 @@
             <table class="table table-flush table-hover">
                 <thead class="thead-light">
                     <tr class="row table-head-line">
-                        <th class="col-sm-2 col-md-1 col-lg-1 hidden-sm">{{ Form::bulkActionAllGroup() }}</th>
+                        <th class="col-sm-2 col-md-1 col-lg-1 d-none d-sm-block">{{ Form::bulkActionAllGroup() }}</th>
                         <th class="col-xs-4 col-sm-3 col-md-2 col-lg-3">@sortablelink('name', trans('general.name'), ['filter' => 'active, visible'], ['class' => 'col-aka', 'rel' => 'nofollow'])</th>
-                        <th class="col-sm-2 col-md-2 col-lg-3 hidden-sm long-texts">@sortablelink('email', trans('general.email'))</th>
-                        <th class="col-md-2 col-lg-2 hidden-md">{{ trans_choice('general.roles', 2) }}</th>
+                        <th class="col-sm-2 col-md-2 col-lg-3 d-none d-sm-block long-texts">@sortablelink('email', trans('general.email'))</th>
+                        <th class="col-md-2 col-lg-2 d-none d-md-block">{{ trans_choice('general.roles', 2) }}</th>
                         <th class="col-xs-4 col-sm-3 col-md-2 col-lg-2">@sortablelink('enabled', trans('general.enabled'))</th>
                         <th class="col-xs-4 col-sm-2 col-md-2 col-lg-1 text-center">{{ trans('general.actions') }}</th>
                     </tr>
@@ -44,7 +44,7 @@
                 <tbody>
                     @foreach($users as $item)
                         <tr class="row align-items-center border-top-1">
-                            <td class="col-sm-2 col-md-1 col-lg-1 hidden-sm border-0">{{ Form::bulkActionGroup($item->id, $item->name) }}</td>
+                            <td class="col-sm-2 col-md-1 col-lg-1 d-none d-sm-block border-0">{{ Form::bulkActionGroup($item->id, $item->name) }}</td>
                             <td class="col-xs-4 col-sm-3 col-md-2 col-lg-3 border-0">
                                 <a class="text-success col-aka" href="{{ route('users.edit', $item->id) }}">
                                     @if (setting('default.use_gravatar', '0') == '1')
@@ -57,8 +57,8 @@
                                     {{ $item->name }}
                                 </a>
                             </td>
-                            <td class="col-sm-2 hidden-sm col-md-2 col-lg-3 border-0 long-texts">{{ $item->email }}</td>
-                            <td class="col-md-2 col-lg-2 hidden-md border-0">
+                            <td class="col-sm-2 col-md-2 col-lg-3 border-0 d-none d-sm-block long-texts">{{ $item->email }}</td>
+                            <td class="col-md-2 col-lg-2 d-none d-md-block border-0">
                                 @foreach($item->roles as $role)
                                     <label class="label label-default">{{ $role->display_name }}</label>
                                 @endforeach
diff --git a/resources/views/banking/accounts/index.blade.php b/resources/views/banking/accounts/index.blade.php
index 809f4d2b9..c93497b28 100644
--- a/resources/views/banking/accounts/index.blade.php
+++ b/resources/views/banking/accounts/index.blade.php
@@ -18,8 +18,8 @@
                 'class' => 'mb-0'
             ]) !!}
                 <div class="row" v-if="!bulk_action.show">
-                    <div class="col-12 card-header-search card-header-space">
-                        <span class="table-text hidden-lg card-header-search-text">{{ trans('general.search') }}:</span>
+                    <div class="col-12 d-flex align-items-center">
+                        <span class="font-weight-400 d-none d-lg-block mr-2">{{ trans('general.search') }}:</span>
                         <akaunting-search></akaunting-search>
                     </div>
                 </div>
@@ -32,10 +32,10 @@
             <table class="table table-flush table-hover">
                 <thead class="thead-light">
                     <tr class="row table-head-line">
-                        <th class="col-sm-2 col-md-1 col-lg-1 col-xl-1 hidden-sm">{{ Form::bulkActionAllGroup() }}</th>
+                        <th class="col-sm-2 col-md-1 col-lg-1 col-xl-1 d-none d-sm-block">{{ Form::bulkActionAllGroup() }}</th>
                         <th class="col-xs-4 col-sm-4 col-md-3 col-lg-3 col-xl-4">@sortablelink('name', trans('general.name'), ['filter' => 'active, visible'], ['class' => 'col-aka', 'rel' => 'nofollow'])</th>
-                        <th class="col-md-2 col-lg-2 col-xl-2 text-center hidden-md">@sortablelink('number', trans('accounts.number'))</th>
-                        <th class="col-sm-2 col-md-2 col-lg-3 col-xl-3 text-right hidden-sm">@sortablelink('opening_balance', trans('accounts.current_balance'))</th>
+                        <th class="col-md-2 col-lg-2 col-xl-2 text-center d-none d-md-block">@sortablelink('number', trans('accounts.number'))</th>
+                        <th class="col-sm-2 col-md-2 col-lg-3 col-xl-3 text-right d-none d-sm-block">@sortablelink('opening_balance', trans('accounts.current_balance'))</th>
                         <th class="col-xs-4 col-sm-2 col-md-2 col-lg-2 col-xl-1">@sortablelink('enabled', trans('general.enabled'))</th>
                         <th class="col-xs-4 col-sm-2 col-md-2 col-lg-1 col-xl-1 text-center">{{ trans('general.actions') }}</th>
                     </tr>
@@ -44,12 +44,12 @@
                 <tbody>
                     @foreach($accounts as $item)
                         <tr class="row align-items-center border-top-1">
-                            <td class="col-sm-2 col-md-1 col-lg-1 col-xl-1 hidden-sm">
+                            <td class="col-sm-2 col-md-1 col-lg-1 col-xl-1 d-none d-sm-block">
                                 {{ Form::bulkActionGroup($item->id, $item->name) }}
                             </td>
                             <td class="col-xs-4 col-sm-4 col-md-3 col-lg-3 col-xl-4"><a class="col-aka text-success" href="{{ route('accounts.edit', $item->id) }}">{{ $item->name }}</a></td>
-                            <td class="col-md-2 col-lg-2 col-xl-2 text-center hidden-md">{{ $item->number }}</td>
-                            <td class="col-sm-2 col-md-2 col-lg-3 col-xl-3 text-right hidden-sm">@money($item->balance, $item->currency_code, true)</td>
+                            <td class="col-md-2 col-lg-2 col-xl-2 text-center d-none d-md-block">{{ $item->number }}</td>
+                            <td class="col-sm-2 col-md-2 col-lg-3 col-xl-3 text-right d-none d-sm-block">@money($item->balance, $item->currency_code, true)</td>
                             <td class="col-xs-4 col-sm-2 col-md-2 col-lg-2 col-xl-1">
                                 @if (user()->can('update-banking-accounts'))
                                     {{ Form::enabledGroup($item->id, $item->name, $item->enabled) }}
diff --git a/resources/views/banking/reconciliations/create.blade.php b/resources/views/banking/reconciliations/create.blade.php
index ed9d69302..08cb7061f 100644
--- a/resources/views/banking/reconciliations/create.blade.php
+++ b/resources/views/banking/reconciliations/create.blade.php
@@ -62,11 +62,11 @@
                     <thead class="thead-light">
                         <tr class="row table-head-line">
                             <th class="col-xs-4 col-sm-3 col-md-2 long-texts">{{ trans('general.date') }}</th>
-                            <th class="col-md-2 text-center hidden-md">{{ trans('general.description') }}</th>
-                            <th class="col-md-2 col-sm-3 col-md-3 hidden-sm">{{ trans_choice('general.contacts', 1) }}</th>
+                            <th class="col-md-2 text-center d-none d-md-block">{{ trans('general.description') }}</th>
+                            <th class="col-md-2 col-sm-3 col-md-3 d-none d-sm-block">{{ trans_choice('general.contacts', 1) }}</th>
                             <th class="col-xs-4 col-sm-3 col-md-2 text-right">{{ trans('reconciliations.deposit') }}</th>
                             <th class="col-xs-4 col-sm-3 col-md-2 text-right long-texts">{{ trans('reconciliations.withdrawal') }}</th>
-                            <th class="col-md-1 text-right hidden-md">{{ trans('general.clear') }}</th>
+                            <th class="col-md-1 text-right d-none d-md-block">{{ trans('general.clear') }}</th>
                         </tr>
                     </thead>
 
@@ -74,8 +74,8 @@
                         @foreach($transactions as $item)
                             <tr class="row align-items-center border-top-1">
                                 <td class="col-xs-4 col-sm-3 col-md-2 long-texts">@date($item->paid_at)</td>
-                                <td class="col-md-2 text-center hidden-md">{{ $item->description }}</td>
-                                <td class="col-sm-3 col-md-3 hidden-sm">{{ $item->contact->name }}</td>
+                                <td class="col-md-2 text-center d-none d-md-block">{{ $item->description }}</td>
+                                <td class="col-sm-3 col-md-3 d-none d-sm-block">{{ $item->contact->name }}</td>
                                 @if ($item->type == 'income')
                                     <td class="col-xs-4 col-sm-3 col-md-2 text-right">@money($item->amount, $item->currency_code, true)</td>
                                     <td class="col-xs-4 col-sm-3 col-md-2 text-right">N/A</td>
@@ -83,7 +83,7 @@
                                     <td class="col-xs-4 col-sm-3 col-md-2 text-right">N/A</td>
                                     <td class="col-xs-4 col-sm-3 col-md-2 text-right">@money($item->amount, $item->currency_code, true)</td>
                                 @endif
-                                <td class="col-md-1 text-right hidden-md">{{ Form::checkbox('transactions['. $item->id . '_'. $item->type . ']', $item->amount, $item->reconciled) }}</td>
+                                <td class="col-md-1 text-right d-none d-md-block">{{ Form::checkbox('transactions['. $item->id . '_'. $item->type . ']', $item->amount, $item->reconciled) }}</td>
                             </tr>
                         @endforeach
                     </tbody>
@@ -92,16 +92,16 @@
                     <table class="table">
                         <tbody>
                             <tr class="row">
-                                <th class="col-md-9 col-lg-11 text-right hidden-md">{{ trans('reconciliations.closing_balance') }}:</th>
-                                <td id="closing-balance" class="col-md-3 col-lg-1 text-right hidden-md">@money(request('closing_balance', '0'), $account->currency_code, true)</td>
+                                <th class="col-md-9 col-lg-11 text-right d-none d-md-block">{{ trans('reconciliations.closing_balance') }}:</th>
+                                <td id="closing-balance" class="col-md-3 col-lg-1 text-right d-none d-md-block">@money(request('closing_balance', '0'), $account->currency_code, true)</td>
                             </tr>
                             <tr class="row">
-                                <th class="col-md-9 col-lg-11 text-right hidden-md">{{ trans('reconciliations.cleared_amount') }}:</th>
-                                <td id="cleared-amount" class="col-md-3 col-lg-1 text-right hidden-md">@money('0', $account->currency_code, true)</td>
+                                <th class="col-md-9 col-lg-11 text-right d-none d-md-block">{{ trans('reconciliations.cleared_amount') }}:</th>
+                                <td id="cleared-amount" class="col-md-3 col-lg-1 text-right d-none d-md-block">@money('0', $account->currency_code, true)</td>
                             </tr>
                             <tr class="row">
-                                <th class="col-md-9 col-lg-11 text-right hidden-md">{{ trans('general.difference') }}:</th>
-                                <td id="difference" class="col-md-3 col-lg-1 text-right hidden-md">@money('0', $account->currency_code, true)</td>
+                                <th class="col-md-9 col-lg-11 text-right d-none d-md-block">{{ trans('general.difference') }}:</th>
+                                <td id="difference" class="col-md-3 col-lg-1 text-right d-none d-md-block">@money('0', $account->currency_code, true)</td>
                             </tr>
                         </tbody>
                     </table>
diff --git a/resources/views/banking/reconciliations/edit.blade.php b/resources/views/banking/reconciliations/edit.blade.php
index 70ecddc65..4f895688f 100644
--- a/resources/views/banking/reconciliations/edit.blade.php
+++ b/resources/views/banking/reconciliations/edit.blade.php
@@ -29,11 +29,11 @@
                     <thead class="thead-light">
                         <tr class="row">
                             <th  class="col-xs-4 col-sm-3 col-md-2 long-texts">{{ trans('general.date') }}</th>
-                            <th class="col-md-2 text-center hidden-md">{{ trans('general.description') }}</th>
-                            <th class="col-md-2 col-sm-3 col-md-3 hidden-sm">{{ trans_choice('general.contacts', 1) }}</th>
+                            <th class="col-md-2 text-center d-none d-md-block">{{ trans('general.description') }}</th>
+                            <th class="col-md-2 col-sm-3 col-md-3 d-none d-sm-block">{{ trans_choice('general.contacts', 1) }}</th>
                             <th class="col-xs-4 col-sm-3 col-md-2 text-right">{{ trans('reconciliations.deposit') }}</th>
                             <th class="col-xs-4 col-sm-3 col-md-2 text-right long-texts">{{ trans('reconciliations.withdrawal') }}</th>
-                            <th class="col-md-1 text-right hidden-md">{{ trans('general.clear') }}</th>
+                            <th class="col-md-1 text-right d-none d-md-block">{{ trans('general.clear') }}</th>
                         </tr>
                     </thead>
 
@@ -41,8 +41,8 @@
                         @foreach($transactions as $item)
                             <tr class="row">
                                 <td class="col-xs-4 col-sm-3 col-md-2 long-texts">@date($item->paid_at)</td>
-                                <td class="col-md-2 text-center hidden-md">{{ $item->description }}</td>
-                                <td class="col-sm-3 col-md-3 hidden-sm">{{ $item->contact->name }}</td>
+                                <td class="col-md-2 text-center d-none d-md-block">{{ $item->description }}</td>
+                                <td class="col-sm-3 col-md-3 d-none d-sm-block">{{ $item->contact->name }}</td>
                                 @if ($item->type == 'income')
                                     <td class="col-xs-4 col-sm-3 col-md-2 text-right">@money($item->amount, $item->currency_code, true)</td>
                                     <td class="col-xs-4 col-sm-3 col-md-2 text-right"> </td>
@@ -50,7 +50,7 @@
                                     <td class="col-xs-4 col-sm-3 col-md-2 text-right">&nbsp;</td>
                                     <td class="col-xs-4 col-sm-3 col-md-2 text-right">@money($item->amount, $item->currency_code, true)</td>
                                 @endif
-                                <td class="col-md-1 text-right hidden-md">{{ Form::checkbox('transactions['. $item->id . '_'. $item->type . ']', $item->amount, $item->reconciled) }}</td>
+                                <td class="col-md-1 text-right d-none d-md-block">{{ Form::checkbox('transactions['. $item->id . '_'. $item->type . ']', $item->amount, $item->reconciled) }}</td>
                             </tr>
                         @endforeach
                     </tbody>
@@ -59,16 +59,16 @@
                     <table class="table">
                         <tbody>
                             <tr class="row">
-                                <th class="col-md-9 col-lg-11 text-right hidden-md">{{ trans('reconciliations.closing_balance') }}:</th>
+                                <th class="col-md-9 col-lg-11 text-right d-none d-md-block">{{ trans('reconciliations.closing_balance') }}:</th>
                                 <td id="closing-balance" class="col-md-1 text-right">@money($reconciliation->closing_balance, $account->currency_code, true)</td>
                             </tr>
                             <tr class="row">
-                                <th class="col-md-9 col-lg-11 text-right hidden-md">{{ trans('reconciliations.cleared_amount') }}:</th>
-                                <td id="cleared-amount" class="col-md-3 col-lg-1 text-right hidden-md">@money('0', $account->currency_code, true)</td>
+                                <th class="col-md-9 col-lg-11 text-right d-none d-md-block">{{ trans('reconciliations.cleared_amount') }}:</th>
+                                <td id="cleared-amount" class="col-md-3 col-lg-1 text-right d-none d-md-block">@money('0', $account->currency_code, true)</td>
                             </tr>
                             <tr class="row">
-                                <th class="col-md-9 col-lg-11 text-right hidden-md">{{ trans('general.difference') }}:</th>
-                                <td id="difference" class="col-md-3 col-lg-1 text-right hidden-md">@money('0', $account->currency_code, true)</td>
+                                <th class="col-md-9 col-lg-11 text-right d-none d-md-block">{{ trans('general.difference') }}:</th>
+                                <td id="difference" class="col-md-3 col-lg-1 text-right d-none d-md-block">@money('0', $account->currency_code, true)</td>
                             </tr>
                         </tbody>
                     </table>
diff --git a/resources/views/banking/reconciliations/index.blade.php b/resources/views/banking/reconciliations/index.blade.php
index 7df6a4d08..63198b8fd 100644
--- a/resources/views/banking/reconciliations/index.blade.php
+++ b/resources/views/banking/reconciliations/index.blade.php
@@ -18,8 +18,8 @@
                 'class' => 'mb-0'
             ]) !!}
                 <div class="row" v-if="!bulk_action.show">
-                    <div class="col-12 card-header-search">
-                        <span class="table-text hidden-lg">{{ trans('general.search') }}:</span>
+                    <div class="col-12 d-flex align-items-center">
+                        <span class="font-weight-400 d-none d-lg-block mr-2">{{ trans('general.search') }}:</span>
                         <akaunting-search></akaunting-search>
                     </div>
                 </div>
@@ -32,11 +32,11 @@
             <table class="table table-flush table-hover">
                 <thead class="thead-light">
                     <tr class="row table-head-line">
-                        <th class="col-sm-2 col-md-1 col-lg-1 hidden-sm">{{ Form::bulkActionAllGroup() }}</th>
-                        <th class="col-sm-3 col-md-2 col-lg-2 hidden-sm">@sortablelink('created_at', trans('general.created_date'), ['filter' => 'active, visible'], ['class' => 'col-aka', 'rel' => 'nofollow'])</th>
+                        <th class="col-sm-2 col-md-1 col-lg-1 d-none d-sm-block">{{ Form::bulkActionAllGroup() }}</th>
+                        <th class="col-sm-3 col-md-2 col-lg-2 d-none d-sm-block">@sortablelink('created_at', trans('general.created_date'), ['filter' => 'active, visible'], ['class' => 'col-aka', 'rel' => 'nofollow'])</th>
                         <th class="col-xs-4 col-sm-3 col-md-3 col-lg-3">@sortablelink('account_id', trans_choice('general.accounts', 1))</th>
-                        <th class="col-lg-2 hidden-lg">{{ trans('general.period') }}</th>
-                        <th class="col-md-2 col-lg-2 hidden-md text-right">@sortablelink('closing_balance', trans('reconciliations.closing_balance'))</th>
+                        <th class="col-lg-2 d-none d-lg-block">{{ trans('general.period') }}</th>
+                        <th class="col-md-2 col-lg-2 d-none d-md-block text-right">@sortablelink('closing_balance', trans('reconciliations.closing_balance'))</th>
                         <th class="col-xs-4 col-sm-2 col-md-2 col-lg-1">@sortablelink('invoice_status_code', trans_choice('general.statuses', 1))</th>
                         <th class="col-xs-4 col-sm-2 col-md-2 col-lg-1 text-center">{{ trans('general.actions') }}</th>
                     </tr>
@@ -45,11 +45,11 @@
                 <tbody>
                     @foreach($reconciliations as $item)
                         <tr class="row align-items-center border-top-1">
-                            <td class="col-sm-2 col-md-1 col-lg-1 hidden-sm">{{ Form::bulkActionGroup($item->id, $item->account->name) }}</td>
-                            <td class="col-sm-3 col-md-2 col-lg-2 hidden-sm"><a class="col-aka text-success" href="{{ route('reconciliations.edit', $item->id) }}">@date($item->created_at)</a></td>
+                            <td class="col-sm-2 col-md-1 col-lg-1 d-none d-sm-block">{{ Form::bulkActionGroup($item->id, $item->account->name) }}</td>
+                            <td class="col-sm-3 col-md-2 col-lg-2 d-none d-sm-block"><a class="col-aka text-success" href="{{ route('reconciliations.edit', $item->id) }}">@date($item->created_at)</a></td>
                             <td class="col-xs-4 col-sm-3 col-md-3 col-lg-3">{{ $item->account->name }}</td>
-                            <td class="col-lg-2 hidden-lg border-0">@date($item->started_at) - @date($item->ended_at)</td>
-                            <td class="col-md-2 col-lg-2 hidden-md text-right">@money($item->closing_balance, $item->account->currency_code, true)</td>
+                            <td class="col-lg-2 d-none d-lg-block border-0">@date($item->started_at) - @date($item->ended_at)</td>
+                            <td class="col-md-2 col-lg-2 d-none d-md-block text-right">@money($item->closing_balance, $item->account->currency_code, true)</td>
                             <td class="col-xs-4 col-sm-2 col-md-2 col-lg-1">
                                 @if ($item->reconciled)
                                     <span class="badge badge-pill badge-success">{{ trans('reconciliations.reconciled') }}</span>
diff --git a/resources/views/banking/transactions/index.blade.php b/resources/views/banking/transactions/index.blade.php
index 2e1b9da89..8fefee1d9 100644
--- a/resources/views/banking/transactions/index.blade.php
+++ b/resources/views/banking/transactions/index.blade.php
@@ -17,8 +17,8 @@
                 'class' => 'mb-0'
             ]) !!}
                 <div class="row">
-                    <div class="col-12 card-header-search">
-                        <span class="table-text hidden-lg">{{ trans('general.search') }}:</span>
+                    <div class="col-12 d-flex align-items-center">
+                        <span class="font-weight-400 d-none d-lg-block mr-2">{{ trans('general.search') }}:</span>
                         <akaunting-search></akaunting-search>
                     </div>
                 </div>
@@ -29,11 +29,11 @@
             <table class="table table-flush">
                 <thead class="thead-light">
                     <tr class="row table-head-line">
-                        <th class="col-sm-2 col-md-2 hidden-sm">@sortablelink('paid_at', trans('general.date'))</th>
+                        <th class="col-sm-2 col-md-2 d-none d-sm-block">@sortablelink('paid_at', trans('general.date'))</th>
                         <th class="col-xs-4 col-sm-3 col-md-2">@sortablelink('account.name', trans_choice('general.accounts', 1))</th>
                         <th class="col-xs-4 col-sm-3 col-md-2">@sortablelink('type', trans_choice('general.types', 1))</th>
-                        <th class="col-sm-2 col-md-2 hidden-sm">@sortablelink('category.name', trans_choice('general.categories', 1))</th>
-                        <th class="col-md-2 hidden-md">@sortablelink('description', trans('general.description'))</th>
+                        <th class="col-sm-2 col-md-2 d-none d-sm-block">@sortablelink('category.name', trans_choice('general.categories', 1))</th>
+                        <th class="col-md-2 d-none d-md-block">@sortablelink('description', trans('general.description'))</th>
                         <th class="col-xs-4 col-sm-2 col-md-2 text-right">@sortablelink('amount', trans('general.amount'))</th>
                     </tr>
                 </thead>
@@ -41,11 +41,11 @@
                 <tbody>
                     @foreach($transactions as $item)
                         <tr class="row align-items-center border-top-1">
-                            <td class="col-sm-2 col-md-2 hidden-sm">@date($item->paid_at)</td>
+                            <td class="col-sm-2 col-md-2 d-none d-sm-block">@date($item->paid_at)</td>
                             <td class="col-xs-4 col-sm-3 col-md-2">{{ $item->account->name }}</td>
                             <td class="col-xs-4 col-sm-3 col-md-2">{{ trans_choice('general.' . Str::plural($item->type), 1) }}</td>
-                            <td class="col-sm-2 col-md-2 hidden-sm">{{ $item->category->name }}</td>
-                            <td class="col-md-2 hidden-md">{{ $item->description }}</td>
+                            <td class="col-sm-2 col-md-2 d-none d-sm-block">{{ $item->category->name }}</td>
+                            <td class="col-md-2 d-none d-md-block">{{ $item->description }}</td>
                             <td class="col-xs-4 col-sm-2 col-md-2 text-right">
                                 @php
                                 $id = !empty($item->document_id) ? $item->document_id : $item->id;
diff --git a/resources/views/banking/transfers/index.blade.php b/resources/views/banking/transfers/index.blade.php
index d93ae6f2f..6de7f3d15 100644
--- a/resources/views/banking/transfers/index.blade.php
+++ b/resources/views/banking/transfers/index.blade.php
@@ -18,8 +18,8 @@
                 'class' => 'mb-0'
             ]) !!}
                 <div class="row" v-if="!bulk_action.show">
-                    <div class="col-12 card-header-search">
-                        <span class="table-text hidden-lg">{{ trans('general.search') }}:</span>
+                    <div class="col-12 d-flex align-items-center">
+                        <span class="font-weight-400 d-none d-lg-block mr-2">{{ trans('general.search') }}:</span>
                         <akaunting-search></akaunting-search>
                     </div>
                 </div>
@@ -32,9 +32,9 @@
             <table class="table table-flush table-hover">
                 <thead class="thead-light">
                     <tr class="row table-head-line">
-                        <th class="col-sm-2 col-md-1 hidden-sm">{{ Form::bulkActionAllGroup() }}</th>
-                        <th class="col-md-2 hidden-md">@sortablelink('expense_transaction.paid_at', trans('general.date'), ['filter' => 'active, visible'], ['class' => 'col-aka', 'rel' => 'nofollow'])</th>
-                        <th class="col-sm-2 col-md-3 hidden-sm">@sortablelink('expense_transaction.name', trans('transfers.from_account'))</th>
+                        <th class="col-sm-2 col-md-1 d-none d-sm-block">{{ Form::bulkActionAllGroup() }}</th>
+                        <th class="col-md-2 d-none d-md-block">@sortablelink('expense_transaction.paid_at', trans('general.date'), ['filter' => 'active, visible'], ['class' => 'col-aka', 'rel' => 'nofollow'])</th>
+                        <th class="col-sm-2 col-md-3 d-none d-sm-block">@sortablelink('expense_transaction.name', trans('transfers.from_account'))</th>
                         <th class="col-xs-4 col-sm-4 col-md-2">@sortablelink('income_transaction.name', trans('transfers.to_account'))</th>
                         <th class="col-xs-4 col-sm-2 col-md-2 text-right">@sortablelink('expense_transaction.amount', trans('general.amount'))</th>
                         <th class="col-xs-4 col-sm-2 col-md-2 text-center">{{ trans('general.actions') }}</th>
@@ -44,9 +44,9 @@
                 <tbody>
                     @foreach($transfers as $item)
                         <tr class="row align-items-center border-top-1">
-                            <td class="col-sm-2 col-md-1 hidden-sm">{{ Form::bulkActionGroup($item->id, $item->from_account) }}</td>
-                            <td class="col-md-2 hidden-md"><a class="col-aka text-success" href="{{ route('transfers.edit', $item->id) }}">@date($item->paid_at)</a></td>
-                            <td class="col-sm-2 col-md-3 hidden-sm">{{ $item->from_account }}</td>
+                            <td class="col-sm-2 col-md-1 d-none d-sm-block">{{ Form::bulkActionGroup($item->id, $item->from_account) }}</td>
+                            <td class="col-md-2 d-none d-md-block"><a class="col-aka text-success" href="{{ route('transfers.edit', $item->id) }}">@date($item->paid_at)</a></td>
+                            <td class="col-sm-2 col-md-3 d-none d-sm-block">{{ $item->from_account }}</td>
                             <td class="col-xs-4 col-sm-4 col-md-2">{{ $item->to_account }}</td>
                             <td class="col-xs-4 col-sm-2 col-md-2 text-right">@money($item->amount, $item->currency_code, true)</td>
                             <td class="col-xs-4 col-sm-2 col-md-2 text-center">
diff --git a/resources/views/common/companies/index.blade.php b/resources/views/common/companies/index.blade.php
index 3c19fe91c..04733c708 100644
--- a/resources/views/common/companies/index.blade.php
+++ b/resources/views/common/companies/index.blade.php
@@ -18,8 +18,8 @@
                 'class' => 'mb-0'
             ]) !!}
                 <div class="row" v-if="!bulk_action.show">
-                    <div class="col-12 card-header-search">
-                        <span class="table-text hidden-lg">{{ trans('general.search') }}:</span>
+                    <div class="col-12 d-flex align-items-center">
+                        <span class="font-weight-400 d-none d-lg-block mr-2">{{ trans('general.search') }}:</span>
                         <akaunting-search></akaunting-search>
                      </div>
                  </div>
@@ -32,11 +32,11 @@
             <table class="table table-flush table-hover">
                 <thead class="thead-light">
                     <tr class="row table-head-line">
-                        <th class="col-sm-2 col-md-2 col-lg-1 col-xl-1 hidden-sm">{{ Form::bulkActionAllGroup() }}</th>
-                        <th class="col-sm-2 col-md-2 col-lg-1 col-xl-1 hidden-sm">@sortablelink('id', trans('general.id'), ['filter' => 'active, visible'], ['class' => 'col-aka', 'rel' => 'nofollow'])</th>
+                        <th class="col-sm-2 col-md-2 col-lg-1 col-xl-1 d-none d-sm-block">{{ Form::bulkActionAllGroup() }}</th>
+                        <th class="col-sm-2 col-md-2 col-lg-1 col-xl-1 d-none d-sm-block">@sortablelink('id', trans('general.id'), ['filter' => 'active, visible'], ['class' => 'col-aka', 'rel' => 'nofollow'])</th>
                         <th class="col-xs-4 col-sm-3 col-md-2 col-lg-3 col-xl-3 long-texts">@sortablelink('name', trans('general.name'))</th>
-                        <th class="col-md-2 col-lg-2 col-xl-2 hidden-md long-texts">@sortablelink('email', trans('general.email'))</th>
-                        <th class="col-lg-2 col-xl-2 hidden-lg">@sortablelink('created_at', trans('general.created'))</th>
+                        <th class="col-md-2 col-lg-2 col-xl-2 d-none d-md-block long-texts">@sortablelink('email', trans('general.email'))</th>
+                        <th class="col-lg-2 col-xl-2 d-none d-lg-block">@sortablelink('created_at', trans('general.created'))</th>
                         <th class="col-xs-4 col-sm-3 col-md-2 col-lg-2 col-xl-2">@sortablelink('enabled', trans('general.enabled'))</th>
                         <th class="col-xs-4 col-sm-2 col-md-2 col-lg-1 col-xl-1 text-center">{{ trans('general.actions') }}</th>
                     </tr>
@@ -45,11 +45,11 @@
                 <tbody>
                     @foreach($companies as $item)
                         <tr class="row align-items-center border-top-1">
-                            <td class="col-sm-2 col-md-2 col-lg-1 col-xl-1 hidden-sm">{{ Form::bulkActionGroup($item->id, $item->name) }}</td>
-                            <td class="col-sm-2 col-md-2 col-lg-1 col-xl-1 hidden-sm"><a class="col-aka">{{ $item->id }}</a></td>
+                            <td class="col-sm-2 col-md-2 col-lg-1 col-xl-1 d-none d-sm-block">{{ Form::bulkActionGroup($item->id, $item->name) }}</td>
+                            <td class="col-sm-2 col-md-2 col-lg-1 col-xl-1 d-none d-sm-block"><a class="col-aka">{{ $item->id }}</a></td>
                             <td class="col-xs-4 col-sm-3 col-md-2 col-lg-3 col-xl-3 long-texts"><a class="text-success" href="{{ url('common/companies/' . $item->id . '/edit') }}">{{ $item->name }}</a></td>
-                            <td class="col-md-2 col-lg-2 col-xl-2 hidden-md long-texts">{{ $item->email }}</td>
-                            <td class="col-lg-2 col-xl-2 hidden-lg border-0">@date($item->created_at)</td>
+                            <td class="col-md-2 col-lg-2 col-xl-2 d-none d-md-block long-texts">{{ $item->email }}</td>
+                            <td class="col-lg-2 col-xl-2 d-none d-lg-block border-0">@date($item->created_at)</td>
                             <td class="col-xs-4 col-sm-3 col-md-2 col-lg-2 col-xl-2">
                                 @if (user()->can('update-common-companies'))
                                     {{ Form::enabledGroup($item->id, $item->name, $item->enabled) }}
diff --git a/resources/views/common/items/index.blade.php b/resources/views/common/items/index.blade.php
index c89f8ae1a..c6a470630 100644
--- a/resources/views/common/items/index.blade.php
+++ b/resources/views/common/items/index.blade.php
@@ -21,8 +21,8 @@
                     'class' => 'mb-0'
                 ]) !!}
                     <div class="row" v-if="!bulk_action.show">
-                        <div class="col-12 card-header-search card-header-space">
-                            <span class="table-text hidden-lg card-header-search-text">{{ trans('general.search') }}:</span>
+                        <div class="col-12 d-flex align-items-center">
+                            <span class="font-weight-400 d-none d-lg-block mr-2">{{ trans('general.search') }}:</span>
                             <akaunting-search></akaunting-search>
                         </div>
                     </div>
@@ -35,11 +35,11 @@
                 <table class="table table-flush table-hover">
                     <thead class="thead-light">
                         <tr class="row table-head-line">
-                            <th class="col-sm-2 col-md-1 col-lg-1 col-xl-1 hidden-sm">{{ Form::bulkActionAllGroup() }}</th>
+                            <th class="col-sm-2 col-md-1 col-lg-1 col-xl-1 d-none d-sm-block">{{ Form::bulkActionAllGroup() }}</th>
                             <th class="col-xs-4 col-sm-4 col-md-4 col-lg-3 col-xl-3">@sortablelink('name', trans('general.name'), ['filter' => 'active, visible'], ['class' => 'col-aka', 'rel' => 'nofollow'])</th>
-                            <th class="col-lg-1 col-xl-2 hidden-lg">@sortablelink('category', trans_choice('general.categories', 1))</th>
-                            <th class="col-md-3 col-lg-3 col-xl-2 text-right hidden-md">@sortablelink('sale_price', trans('items.sales_price'))</th>
-                            <th class="col-lg-2 col-xl-2 text-right hidden-lg">@sortablelink('purchase_price', trans('items.purchase_price'))</th>
+                            <th class="col-lg-1 col-xl-2 d-none d-lg-block">@sortablelink('category', trans_choice('general.categories', 1))</th>
+                            <th class="col-md-3 col-lg-3 col-xl-2 text-right d-none d-md-block">@sortablelink('sale_price', trans('items.sales_price'))</th>
+                            <th class="col-lg-2 col-xl-2 text-right d-none d-lg-block">@sortablelink('purchase_price', trans('items.purchase_price'))</th>
                             <th class="col-xs-4 col-sm-3 col-md-2 col-lg-1 col-xl-1">@sortablelink('enabled', trans('general.enabled'))</th>
                             <th class="col-xs-4 col-sm-3 col-md-2 col-lg-1 col-xl-1 text-center"><a>{{ trans('general.actions') }}</a></th>
                         </tr>
@@ -48,20 +48,20 @@
                     <tbody>
                         @foreach($items as $item)
                             <tr class="row align-items-center border-top-1">
-                                <td class="col-sm-2 col-md-1 col-lg-1 col-xl-1 hidden-sm">
+                                <td class="col-sm-2 col-md-1 col-lg-1 col-xl-1 d-none d-sm-block">
                                     {{ Form::bulkActionGroup($item->id, $item->name) }}
                                 </td>
                                 <td class="col-xs-4 col-sm-4 col-md-4 col-lg-3 col-xl-3 py-2">
                                     <img src="{{ $item->picture ? Storage::url($item->picture->id) : asset('public/img/akaunting-logo-green.png') }}" class="avatar image-style p-1 mr-3 item-img hidden-md col-aka" alt="{{ $item->name }}">
                                     <a class="text-success" href="{{ route('items.edit', $item->id) }}">{{ $item->name }}</a>
                                 </td>
-                                <td class="col-lg-1 col-xl-2 hidden-lg">
+                                <td class="col-lg-1 col-xl-2 d-none d-lg-block">
                                     {{ $item->category ? $item->category->name : trans('general.na') }}
                                 </td>
-                                <td class="col-md-3 col-lg-3 col-xl-2 text-right hidden-md">
+                                <td class="col-md-3 col-lg-3 col-xl-2 text-right d-none d-md-block">
                                     {{ money($item->sale_price, setting('default.currency'), true) }}
                                 </td>
-                                <td class="col-lg-2 col-xl-2 text-right hidden-lg">
+                                <td class="col-lg-2 col-xl-2 text-right d-none d-lg-block">
                                     {{ money($item->purchase_price, setting('default.currency'), true) }}
                                 </td>
                                 <td class="col-xs-4 col-sm-3 col-md-2 col-lg-1 col-xl-1">
diff --git a/resources/views/expenses/bills/index.blade.php b/resources/views/expenses/bills/index.blade.php
index f1372f246..30a95298f 100644
--- a/resources/views/expenses/bills/index.blade.php
+++ b/resources/views/expenses/bills/index.blade.php
@@ -21,8 +21,8 @@
                     'class' => 'mb-0'
                 ]) !!}
                     <div class="row" v-if="!bulk_action.show">
-                        <div class="col-12 card-header-search">
-                            <span class="table-text hidden-lg">{{ trans('general.search') }}:</span>
+                        <div class="col-12 d-flex align-items-center">
+                            <span class="font-weight-400 d-none d-lg-block mr-2">{{ trans('general.search') }}:</span>
                             <akaunting-search></akaunting-search>
                         </div>
                     </div>
@@ -35,12 +35,12 @@
                 <table class="table table-flush table-hover">
                     <thead class="thead-light">
                         <tr class="row table-head-line">
-                            <th class="col-sm-2 col-md-1 col-lg-1 col-xl-1 hidden-sm">{{ Form::bulkActionAllGroup() }}</th>
-                            <th class="col-sm-2 col-md-2 col-lg-1 col-xl-1 hidden-sm">@sortablelink('bill_number', trans_choice('general.numbers', 1), ['filter' => 'active, visible'], ['class' => 'col-aka', 'rel' => 'nofollow'])</th>
+                            <th class="col-sm-2 col-md-1 col-lg-1 col-xl-1 d-none d-sm-block">{{ Form::bulkActionAllGroup() }}</th>
+                            <th class="col-sm-2 col-md-2 col-lg-1 col-xl-1 d-none d-sm-block">@sortablelink('bill_number', trans_choice('general.numbers', 1), ['filter' => 'active, visible'], ['class' => 'col-aka', 'rel' => 'nofollow'])</th>
                             <th class="col-xs-4 col-sm-4 col-md-3 col-lg-2 col-xl-2">@sortablelink('contact_name', trans_choice('general.vendors', 1))</th>
-                            <th class="col-md-2 col-lg-2 col-xl-2 hidden-md text-right">@sortablelink('amount', trans('general.amount'))</th>
-                            <th class="col-lg-2 col-xl-2 hidden-lg">@sortablelink('billed_at', trans('bills.bill_date'))</th>
-                            <th class="col-lg-2 col-xl-2 hidden-lg">@sortablelink('due_at', trans('bills.due_date'))</th>
+                            <th class="col-md-2 col-lg-2 col-xl-2 d-none d-md-block text-right">@sortablelink('amount', trans('general.amount'))</th>
+                            <th class="col-lg-2 col-xl-2 d-none d-lg-block">@sortablelink('billed_at', trans('bills.bill_date'))</th>
+                            <th class="col-lg-2 col-xl-2 d-none d-lg-block">@sortablelink('due_at', trans('bills.due_date'))</th>
                             <th class="col-xs-4 col-sm-2 col-md-2 col-lg-1 col-xl-1">@sortablelink('bill_status_code', trans_choice('general.statuses', 1))</th>
                             <th class="col-xs-4 col-sm-2 col-md-2 col-lg-1 col-xl-1 text-center">{{ trans('general.actions') }}</th>
                         </tr>
@@ -50,12 +50,12 @@
                         @foreach($bills as $item)
                             @php $paid = $item->paid; @endphp
                             <tr class="row align-items-center border-top-1">
-                                <td class="col-sm-2 col-md-1 col-lg-1 col-xl-1 hidden-sm">{{ Form::bulkActionGroup($item->id, $item->bill_number) }}</td>
-                                <td class="col-sm-2 col-md-2 col-lg-1 col-xl-1 hidden-sm"><a class="col-aka text-success" href="{{ route('bills.show', $item->id) }}">{{ $item->bill_number }}</a></td>
+                                <td class="col-sm-2 col-md-1 col-lg-1 col-xl-1 d-none d-sm-block">{{ Form::bulkActionGroup($item->id, $item->bill_number) }}</td>
+                                <td class="col-sm-2 col-md-2 col-lg-1 col-xl-1 d-none d-sm-block"><a class="col-aka text-success" href="{{ route('bills.show', $item->id) }}">{{ $item->bill_number }}</a></td>
                                 <td class="col-xs-4 col-sm-4 col-md-3 col-lg-2 col-xl-2">{{ $item->contact_name }}</td>
-                                <td class="col-md-2 col-lg-2 col-xl-2 hidden-md text-right">@money($item->amount, $item->currency_code, true)</td>
-                                <td class="col-lg-2 col-xl-2 hidden-lg">@date($item->billed_at)</td>
-                                <td class="col-lg-2 col-xl-2 hidden-lg">@date($item->due_at)</td>
+                                <td class="col-md-2 col-lg-2 col-xl-2 d-none d-md-block text-right">@money($item->amount, $item->currency_code, true)</td>
+                                <td class="col-lg-2 col-xl-2 d-none d-lg-block">@date($item->billed_at)</td>
+                                <td class="col-lg-2 col-xl-2 d-none d-lg-block">@date($item->due_at)</td>
                                 <td class="col-xs-4 col-sm-2 col-md-2 col-lg-1 col-xl-1">
                                     <span class="badge badge-pill badge-{{ $item->status->label }}">{{ trans('bills.status.' . $item->status->code) }}</span>
                                 </td>
diff --git a/resources/views/expenses/bills/show.blade.php b/resources/views/expenses/bills/show.blade.php
index 00a0079a8..2b096cc3e 100644
--- a/resources/views/expenses/bills/show.blade.php
+++ b/resources/views/expenses/bills/show.blade.php
@@ -330,7 +330,7 @@
                                             @stack('quantity_th_end')
 
                                             @stack('price_th_start')
-                                                <th class="col-sm-3 text-center hidden-sm pl-5">{{ trans('bills.price') }}</th>
+                                                <th class="col-sm-3 text-center d-none d-sm-block pl-5">{{ trans('bills.price') }}</th>
                                             @stack('price_th_end')
 
                                             @stack('total_th_start')
@@ -348,7 +348,7 @@
                                                 @stack('quantity_td_end')
 
                                                 @stack('price_td_start')
-                                                    <td class="col-sm-3 text-center hidden-sm pl-8">@money($item->price, $bill->currency_code, true)</td>
+                                                    <td class="col-sm-3 text-center d-none d-sm-block pl-8">@money($item->price, $bill->currency_code, true)</td>
                                                 @stack('price_td_end')
 
                                                 @stack('total_td_start')
diff --git a/resources/views/expenses/payments/index.blade.php b/resources/views/expenses/payments/index.blade.php
index 190d32e4a..68396b453 100644
--- a/resources/views/expenses/payments/index.blade.php
+++ b/resources/views/expenses/payments/index.blade.php
@@ -21,8 +21,8 @@
                     'class' => 'mb-0'
                 ]) !!}
                     <div class="row" v-if="!bulk_action.show">
-                        <div class="col-12 card-header-search">
-                            <span class="table-text hidden-lg">{{ trans('general.search') }}:</span>
+                        <div class="col-12 d-flex align-items-center">
+                            <span class="font-weight-400 d-none d-lg-block mr-2">{{ trans('general.search') }}:</span>
                             <akaunting-search></akaunting-search>
                         </div>
                     </div>
@@ -35,12 +35,12 @@
                 <table class="table table-flush table-hover">
                     <thead class="thead-light">
                         <tr class="row table-head-line">
-                            <th class="col-sm-2 col-md-2 col-lg-1 col-xl-1 hidden-sm">{{ Form::bulkActionAllGroup() }}</th>
+                            <th class="col-sm-2 col-md-2 col-lg-1 col-xl-1 d-none d-sm-block">{{ Form::bulkActionAllGroup() }}</th>
                             <th class="col-xs-4 col-sm-4 col-md-3 col-lg-2 col-xl-3">@sortablelink('paid_at', trans('general.date'), ['filter' => 'active, visible'], ['class' => 'col-aka', 'rel' => 'nofollow'])</th>
                             <th class="col-xs-4 col-sm-4 col-md-3 col-lg-2 col-xl-1 text-right">@sortablelink('amount', trans('general.amount'))</th>
-                            <th class="col-md-2 col-lg-2 col-xl-3 hidden-md">@sortablelink('contact.name', trans_choice('general.vendors', 1))</th>
-                            <th class="col-lg-2 col-xl-2 hidden-lg">@sortablelink('category.name', trans_choice('general.categories', 1))</th>
-                            <th class="col-lg-2 col-xl-1 hidden-lg">@sortablelink('account.name', trans_choice('general.accounts', 1))</th>
+                            <th class="col-md-2 col-lg-2 col-xl-3 d-none d-md-block">@sortablelink('contact.name', trans_choice('general.vendors', 1))</th>
+                            <th class="col-lg-2 col-xl-2 d-none d-lg-block">@sortablelink('category.name', trans_choice('general.categories', 1))</th>
+                            <th class="col-lg-2 col-xl-1 d-none d-lg-block">@sortablelink('account.name', trans_choice('general.accounts', 1))</th>
                             <th class="col-xs-4 col-sm-2 col-md-2 col-lg-1 col-xl-1 text-center"><a>{{ trans('general.actions') }}</a></th>
                         </tr>
                     </thead>
@@ -49,16 +49,16 @@
                         @foreach($payments as $item)
                             @php $is_transfer = ($item->category && ($item->category->id == $transfer_cat_id)); @endphp
                             <tr class="row align-items-center border-top-1">
-                                <td class="col-sm-2 col-md-2 col-lg-1 col-xl-1 hidden-sm">{{ Form::bulkActionGroup($item->id, $item->contact->name) }}</td>
+                                <td class="col-sm-2 col-md-2 col-lg-1 col-xl-1 d-none d-sm-block">{{ Form::bulkActionGroup($item->id, $item->contact->name) }}</td>
                                 @if ($item->reconciled)
                                     <td class="col-xs-4 col-sm-4 col-md-3 col-lg-2 col-xl-3">@date($item->paid_at)</td>
                                 @else
                                     <td class="col-xs-4 col-sm-4 col-md-3 col-lg-2 col-xl-3"><a class="col-aka text-success " href="{{ route('payments.edit', $item->id) }}">@date($item->paid_at)</a></td>
                                 @endif
                                 <td class="col-xs-4 col-sm-4 col-md-3 col-lg-2 col-xl-1 text-right">@money($item->amount, $item->currency_code, true)</td>
-                                <td class="col-md-2 col-lg-2 col-xl-3 hidden-md">{{ !empty($item->contact->name) ? $item->contact->name : trans('general.na') }}</td>
-                                <td class="col-lg-2 col-xl-2 hidden-lg">{{ $item->category ? $item->category->name : trans('general.na') }}</td>
-                                <td class="col-lg-2 col-xl-1 hidden-lg">{{ $item->account ? $item->account->name : trans('general.na') }}</td>
+                                <td class="col-md-2 col-lg-2 col-xl-3 d-none d-md-block">{{ !empty($item->contact->name) ? $item->contact->name : trans('general.na') }}</td>
+                                <td class="col-lg-2 col-xl-2 d-none d-lg-block">{{ $item->category ? $item->category->name : trans('general.na') }}</td>
+                                <td class="col-lg-2 col-xl-1 d-none d-lg-block">{{ $item->account ? $item->account->name : trans('general.na') }}</td>
                                 <td class="col-xs-4 col-sm-2 col-md-2 col-lg-1 col-xl-1 text-center">
                                     @if (!$is_transfer)
                                         <div class="dropdown">
diff --git a/resources/views/expenses/vendors/index.blade.php b/resources/views/expenses/vendors/index.blade.php
index ab725c87d..8038313b1 100644
--- a/resources/views/expenses/vendors/index.blade.php
+++ b/resources/views/expenses/vendors/index.blade.php
@@ -21,8 +21,8 @@
                     'class' => 'mb-0'
                 ]) !!}
                     <div class="row" v-if="!bulk_action.show">
-                        <div class="col-12 card-header-search">
-                            <span class="table-text hidden-lg">{{ trans('general.search') }}:</span>
+                        <div class="col-12 d-flex align-items-center">
+                            <span class="font-weight-400 d-none d-lg-block mr-2">{{ trans('general.search') }}:</span>
                             <akaunting-search></akaunting-search>
                         </div>
                     </div>
@@ -35,11 +35,11 @@
                 <table class="table table-flush table-hover">
                     <thead class="thead-light">
                         <tr class="row table-head-line">
-                            <th class="col-sm-2 col-md-1 col-lg-1 col-xl-1 hidden-sm">{{ Form::bulkActionAllGroup() }}</th>
+                            <th class="col-sm-2 col-md-1 col-lg-1 col-xl-1 d-none d-sm-block">{{ Form::bulkActionAllGroup() }}</th>
                             <th class="col-xs-4 col-sm-3 col-md-3 col-lg-3 col-xl-3">@sortablelink('name', trans('general.name'), ['filter' => 'active, visible'], ['class' => 'col-aka', 'rel' => 'nofollow'])</th>
-                            <th class="col-md-2 col-lg-2 col-xl-2 hidden-md">@sortablelink('email', trans('general.email'))</th>
-                            <th class="col-sm-3 col-md-2 col-lg-2 col-xl-2 hidden-sm">@sortablelink('phone', trans('general.phone'))</th>
-                            <th class="col-lg-2 col-xl-2 text-right hidden-lg">@sortablelink('unpaid', trans('general.unpaid'))</th>
+                            <th class="col-md-2 col-lg-2 col-xl-2 d-none d-md-block">@sortablelink('email', trans('general.email'))</th>
+                            <th class="col-sm-3 col-md-2 col-lg-2 col-xl-2 d-none d-sm-block">@sortablelink('phone', trans('general.phone'))</th>
+                            <th class="col-lg-2 col-xl-2 text-right d-none d-lg-block">@sortablelink('unpaid', trans('general.unpaid'))</th>
                             <th class="col-xs-4 col-sm-2 col-md-2 col-lg-1 col-xl-1">@sortablelink('enabled', trans('general.enabled'))</th>
                             <th class="col-xs-4 col-sm-2 col-md-2 col-lg-1 col-xl-1 text-center">{{ trans('general.actions') }}</th>
                         </tr>
@@ -48,19 +48,19 @@
                     <tbody>
                         @foreach($vendors as $item)
                             <tr class="row align-items-center border-top-1">
-                                <td class="col-sm-2 col-md-1 col-lg-1 col-xl-1 hidden-sm">
+                                <td class="col-sm-2 col-md-1 col-lg-1 col-xl-1 d-none d-sm-block">
                                     {{ Form::bulkActionGroup($item->id, $item->name) }}
                                 </td>
                                 <td class="col-xs-4 col-sm-3 col-md-3 col-lg-3 col-xl-3">
                                     <a class="col-aka text-success " href="{{ route('vendors.show', $item->id) }}">{{ $item->name }}</a>
                                 </td>
-                                <td class="col-md-2 col-lg-2 col-xl-2 hidden-md long-texts">
+                                <td class="col-md-2 col-lg-2 col-xl-2 d-none d-md-block long-texts">
                                     {{ !empty($item->email) ? $item->email : trans('general.na') }}
                                 </td>
-                                <td class="col-sm-3 col-md-2 col-lg-2 col-xl-2 hidden-sm long-texts">
+                                <td class="col-sm-3 col-md-2 col-lg-2 col-xl-2 d-none d-sm-block long-texts">
                                     {{ $item->phone }}
                                 </td>
-                                <td class="col-lg-2 col-xl-2 text-right hidden-lg long-texts">
+                                <td class="col-lg-2 col-xl-2 text-right d-none d-lg-block long-texts">
                                     @money($item->unpaid, setting('default.currency'), true)
                                 </td>
                                 <td class="col-xs-4 col-sm-2 col-md-2 col-lg-1 col-xl-1">
diff --git a/resources/views/expenses/vendors/show.blade.php b/resources/views/expenses/vendors/show.blade.php
index 9737b18a2..ada58a3bf 100644
--- a/resources/views/expenses/vendors/show.blade.php
+++ b/resources/views/expenses/vendors/show.blade.php
@@ -117,8 +117,8 @@
                                             <tr class="row table-head-line">
                                                 <th class="col-xs-6 col-sm-3">{{ trans('general.date') }}</th>
                                                 <th class="col-xs-6 col-sm-2">{{ trans('general.amount') }}</th>
-                                                <th class="col-sm-4 hidden-sm">{{ trans_choice('general.categories', 1) }}</th>
-                                                <th class="col-sm-3 hidden-sm">{{ trans_choice('general.accounts', 1) }}</th>
+                                                <th class="col-sm-4 d-none d-sm-none">{{ trans_choice('general.categories', 1) }}</th>
+                                                <th class="col-sm-3 d-none d-sm-none">{{ trans_choice('general.accounts', 1) }}</th>
                                             </tr>
                                         </thead>
                                         <tbody>
@@ -126,8 +126,8 @@
                                                 <tr class="row align-items-center border-top-1">
                                                     <td class="col-xs-6 col-sm-3">@date($item->paid_at)</td>
                                                     <td class="col-xs-6 col-sm-2">@money($item->amount, $item->currency_code, true)</td>
-                                                    <td class="col-sm-4 hidden-sm">{{ $item->category ? $item->category->name : trans('general.na') }}</td>
-                                                    <td class="col-sm-3 hidden-sm">{{ $item->account->name }}</td>
+                                                    <td class="col-sm-4 d-none d-sm-none">{{ $item->category ? $item->category->name : trans('general.na') }}</td>
+                                                    <td class="col-sm-3 d-none d-sm-none">{{ $item->account->name }}</td>
                                                 </tr>
                                             @endforeach
                                         </tbody>
@@ -148,8 +148,8 @@
                                             <tr class="row table-head-line">
                                                 <th class="col-xs-4 col-sm-3">{{ trans_choice('general.numbers', 1) }}</th>
                                                 <th class="col-xs-4 col-sm-3">{{ trans('general.amount') }}</th>
-                                                <th class="col-sm-2 hidden-sm">{{ trans('bills.bill_date') }}</th>
-                                                <th class="col-sm-2 hidden-sm">{{ trans('bills.due_date') }}</th>
+                                                <th class="col-sm-2 d-none d-sm-none">{{ trans('bills.bill_date') }}</th>
+                                                <th class="col-sm-2 d-none d-sm-none">{{ trans('bills.due_date') }}</th>
                                                 <th class="col-xs-4 col-sm-2">{{ trans_choice('general.statuses', 1) }}</th>
                                             </tr>
                                         </thead>
@@ -158,8 +158,8 @@
                                                 <tr class="row align-items-center border-top-1">
                                                     <td class="col-xs-4 col-sm-3"><a href="{{ url('expenses/bills/' . $item->id . ' ') }}">{{ $item->bill_number }}</a></td>
                                                     <td class="col-xs-4 col-sm-3">@money($item->amount, $item->currency_code, true)</td>
-                                                    <td class="col-sm-2 hidden-sm">@date($item->billed_at)</td>
-                                                    <td class="col-sm-2 hidden-sm">@date($item->due_at)</td>
+                                                    <td class="col-sm-2 d-none d-sm-none">@date($item->billed_at)</td>
+                                                    <td class="col-sm-2 d-none d-sm-none">@date($item->due_at)</td>
                                                     <td class="col-xs-4 col-sm-2"><span class="badge badge-pill badge-{{ $item->status->label }}">{{ trans('bills.status.' . $item->status->code) }}</span></td>
                                                 </tr>
                                             @endforeach
diff --git a/resources/views/incomes/customers/index.blade.php b/resources/views/incomes/customers/index.blade.php
index 9358ec2f6..96d4ce64e 100644
--- a/resources/views/incomes/customers/index.blade.php
+++ b/resources/views/incomes/customers/index.blade.php
@@ -21,8 +21,8 @@
                     'class' => 'mb-0'
                 ]) !!}
                     <div class="row" v-if="!bulk_action.show">
-                        <div class="col-12 card-header-search">
-                            <span class="table-text hidden-lg">{{ trans('general.search') }}:</span>
+                        <div class="col-12 d-flex align-items-center">
+                            <span class="font-weight-400 d-none d-lg-block mr-2">{{ trans('general.search') }}:</span>
                             <akaunting-search></akaunting-search>
                         </div>
                     </div>
@@ -35,11 +35,11 @@
                 <table class="table table-flush table-hover">
                     <thead class="thead-light">
                         <tr class="row table-head-line">
-                            <th class="col-sm-2 col-md-1 col-lg-1 col-xl-1 hidden-sm">{{ Form::bulkActionAllGroup() }}</th>
+                            <th class="col-sm-2 col-md-1 col-lg-1 col-xl-1 d-none d-sm-block">{{ Form::bulkActionAllGroup() }}</th>
                             <th class="col-xs-4 col-sm-3 col-md-3 col-lg-3 col-xl-3">@sortablelink('name', trans('general.name'), ['filter' => 'active, visible'], ['class' => 'col-aka', 'rel' => 'nofollow'])</th>
-                            <th class="col-md-2 col-lg-2 col-xl-2 hidden-md">@sortablelink('email', trans('general.email'))</th>
-                            <th class="col-sm-3 col-md-2 col-lg-2 col-xl-2 hidden-sm">@sortablelink('phone', trans('general.phone'))</th>
-                            <th class="col-lg-2 col-xl-2 text-right hidden-lg">@sortablelink('unpaid', trans('general.unpaid'))</th>
+                            <th class="col-md-2 col-lg-2 col-xl-2 d-none d-md-block">@sortablelink('email', trans('general.email'))</th>
+                            <th class="col-sm-3 col-md-2 col-lg-2 col-xl-2 d-none d-sm-block">@sortablelink('phone', trans('general.phone'))</th>
+                            <th class="col-lg-2 col-xl-2 text-right d-none d-lg-block">@sortablelink('unpaid', trans('general.unpaid'))</th>
                             <th class="col-xs-4 col-sm-2 col-md-2 col-lg-1 col-xl-1">@sortablelink('enabled', trans('general.enabled'))</th>
                             <th class="col-xs-4 col-sm-2 col-md-2 col-lg-1 col-xl-1 text-center">{{ trans('general.actions') }}</th>
                         </tr>
@@ -48,19 +48,19 @@
                     <tbody>
                         @foreach($customers as $item)
                             <tr class="row align-items-center border-top-1">
-                                <td class="col-sm-2 col-md-1 col-lg-1 col-xl-1 hidden-sm">
+                                <td class="col-sm-2 col-md-1 col-lg-1 col-xl-1 d-none d-sm-block">
                                     {{ Form::bulkActionGroup($item->id, $item->name) }}
                                 </td>
                                 <td class="col-xs-4 col-sm-3 col-md-3 col-lg-3 col-xl-3">
                                     <a class="col-aka text-success" href="{{ route('customers.show', $item->id) }}">{{ $item->name }}</a>
                                 </td>
-                                <td class="col-md-2 col-lg-2 col-xl-2 hidden-md long-texts">
+                                <td class="col-md-2 col-lg-2 col-xl-2 d-none d-md-block long-texts">
                                     {{ !empty($item->email) ? $item->email : trans('general.na') }}
                                 </td>
-                                <td class="col-sm-3 col-md-2 col-lg-2 col-xl-2 hidden-sm long-texts">
+                                <td class="col-sm-3 col-md-2 col-lg-2 col-xl-2 d-none d-sm-block long-texts">
                                     {{ $item->phone }}
                                 </td>
-                                <td class="col-lg-2 col-xl-2 text-right hidden-lg long-texts">
+                                <td class="col-lg-2 col-xl-2 text-right d-none d-lg-block long-texts">
                                     @money($item->unpaid, setting('default.currency'), true)
                                 </td>
                                 <td class="col-xs-4 col-sm-2 col-md-2 col-lg-1 col-xl-1">
diff --git a/resources/views/incomes/customers/show.blade.php b/resources/views/incomes/customers/show.blade.php
index e32bb9475..b7d666097 100644
--- a/resources/views/incomes/customers/show.blade.php
+++ b/resources/views/incomes/customers/show.blade.php
@@ -113,8 +113,8 @@
                                             <tr class="row table-head-line">
                                                 <th class="col-xs-6 col-sm-3">{{ trans('general.date') }}</th>
                                                 <th class="col-xs-6 col-sm-3">{{ trans('general.amount') }}</th>
-                                                <th class="col-sm-3 hidden-sm">{{ trans_choice('general.categories', 1) }}</th>
-                                                <th class="col-sm-3 hidden-sm">{{ trans_choice('general.accounts', 1) }}</th>
+                                                <th class="col-sm-3 d-none d-sm-block">{{ trans_choice('general.categories', 1) }}</th>
+                                                <th class="col-sm-3 d-none d-sm-block">{{ trans_choice('general.accounts', 1) }}</th>
                                             </tr>
                                         </thead>
                                         <tbody>
@@ -122,8 +122,8 @@
                                                 <tr class="row align-items-center border-top-1">
                                                     <td class="col-xs-6 col-sm-3">@date($item->paid_at)</td>
                                                     <td class="col-xs-6 col-sm-3">@money($item->amount, $item->currency_code, true)</td>
-                                                    <td class="col-sm-3 hidden-sm">{{ $item->category ? $item->category->name : trans('general.na') }}</td>
-                                                    <td class="col-sm-3 hidden-sm">{{ $item->account->name }}</td>
+                                                    <td class="col-sm-3 d-none d-sm-block">{{ $item->category ? $item->category->name : trans('general.na') }}</td>
+                                                    <td class="col-sm-3 d-none d-sm-block">{{ $item->account->name }}</td>
                                                 </tr>
                                             @endforeach
                                         </tbody>
@@ -143,8 +143,8 @@
                                             <tr class="row table-head-line">
                                                 <th class="col-xs-4 col-sm-3">{{ trans_choice('general.numbers', 1) }}</th>
                                                 <th class="col-xs-4 col-sm-3">{{ trans('general.amount') }}</th>
-                                                <th class="col-sm-2 hidden-sm">{{ trans('invoices.invoice_date') }}</th>
-                                                <th class="col-sm-2 hidden-sm">{{ trans('invoices.due_date') }}</th>
+                                                <th class="col-sm-2 d-none d-sm-block">{{ trans('invoices.invoice_date') }}</th>
+                                                <th class="col-sm-2 d-none d-sm-block">{{ trans('invoices.due_date') }}</th>
                                                 <th class="col-xs-4 col-sm-2">{{ trans_choice('general.statuses', 1) }}</th>
                                             </tr>
                                         </thead>
@@ -153,8 +153,8 @@
                                                 <tr class="row align-items-center border-top-1">
                                                     <td class="col-xs-4 col-sm-3"><a href="{{ url('incomes/invoices/' . $item->id . ' ') }}">{{ $item->invoice_number }}</a></td>
                                                     <td class="col-xs-4 col-sm-3">@money($item->amount, $item->currency_code, true)</td>
-                                                    <td class="col-sm-2 hidden-sm">@date($item->invoiced_at)</td>
-                                                    <td class="col-sm-2 hidden-sm">@date($item->due_at)</td>
+                                                    <td class="col-sm-2 d-none d-sm-block">@date($item->invoiced_at)</td>
+                                                    <td class="col-sm-2 d-none d-sm-block">@date($item->due_at)</td>
                                                     <td class="col-xs-4 col-sm-2"><span class="badge badge-pill badge-{{ $item->status->label }}">{{ trans('invoices.status.' . $item->status->code) }}</span></td>
                                                 </tr>
                                             @endforeach
diff --git a/resources/views/incomes/invoices/index.blade.php b/resources/views/incomes/invoices/index.blade.php
index 99e9f4c07..455cf0f93 100644
--- a/resources/views/incomes/invoices/index.blade.php
+++ b/resources/views/incomes/invoices/index.blade.php
@@ -21,8 +21,8 @@
                     'class' => 'mb-0'
                 ]) !!}
                     <div class="row" v-if="!bulk_action.show">
-                        <div class="col-12 card-header-search">
-                            <span class="table-text hidden-lg">{{ trans('general.search') }}:</span>
+                        <div class="col-12 d-flex align-items-center">
+                            <span class="font-weight-400 d-none d-lg-block mr-2">{{ trans('general.search') }}:</span>
                             <akaunting-search></akaunting-search>
                         </div>
                     </div>
@@ -35,13 +35,13 @@
                 <table class="table table-flush table-hover">
                     <thead class="thead-light">
                         <tr class="row table-head-line">
-                            <th class="col-sm-2 col-md-1 col-lg-1 col-xl-1 hidden-sm">{{ Form::bulkActionAllGroup() }}</th>
-                            <th class="col-md-2 col-lg-2 col-xl-2 hidden-md">@sortablelink('invoice_number', trans_choice('general.numbers', 1), ['filter' => 'active, visible'], ['class' => 'col-aka', 'rel' => 'nofollow'])</th>
+                            <th class="col-sm-2 col-md-1 col-lg-1 col-xl-1 d-none d-sm-block">{{ Form::bulkActionAllGroup() }}</th>
+                            <th class="col-md-2 col-lg-2 col-xl-2 d-none d-md-block">@sortablelink('invoice_number', trans_choice('general.numbers', 1), ['filter' => 'active, visible'], ['class' => 'col-aka', 'rel' => 'nofollow'])</th>
                             <th class="col-xs-4 col-sm-4 col-md-4 col-lg-2 col-xl-2">@sortablelink('contact_name', trans_choice('general.customers', 1))</th>
                             <th class="col-xs-4 col-sm-4 col-md-3 col-lg-1 col-xl-1 text-right">@sortablelink('amount', trans('general.amount'))</th>
-                            <th class="col-lg-2 col-xl-2 hidden-lg">@sortablelink('invoiced_at', trans('invoices.invoice_date'))</th>
-                            <th class="col-lg-2 col-xl-2 hidden-lg">@sortablelink('due_at', trans('invoices.due_date'))</th>
-                            <th class="col-lg-1 col-xl-1 hidden-lg">@sortablelink('invoice_status_code', trans_choice('general.statuses', 1))</th>
+                            <th class="col-lg-2 col-xl-2 d-none d-lg-block">@sortablelink('invoiced_at', trans('invoices.invoice_date'))</th>
+                            <th class="col-lg-2 col-xl-2 d-none d-lg-block">@sortablelink('due_at', trans('invoices.due_date'))</th>
+                            <th class="col-lg-1 col-xl-1 d-none d-lg-block">@sortablelink('invoice_status_code', trans_choice('general.statuses', 1))</th>
                             <th class="col-xs-4 col-sm-2 col-md-2 col-lg-1 col-xl-1 text-center"><a>{{ trans('general.actions') }}</a></th>
                         </tr>
                     </thead>
@@ -50,13 +50,13 @@
                         @foreach($invoices as $item)
                             @php $paid = $item->paid; @endphp
                             <tr class="row align-items-center border-top-1">
-                                <td class="col-sm-2 col-md-1 col-lg-1 col-xl-1 hidden-sm">{{ Form::bulkActionGroup($item->id, $item->invoice_number) }}</td>
-                                <td class="col-md-2 col-lg-2 col-xl-2 hidden-md"><a class="col-aka text-success" href="{{ route('invoices.show' , $item->id) }}">{{ $item->invoice_number }}</a></td>
+                                <td class="col-sm-2 col-md-1 col-lg-1 col-xl-1 d-none d-sm-block">{{ Form::bulkActionGroup($item->id, $item->invoice_number) }}</td>
+                                <td class="col-md-2 col-lg-2 col-xl-2 d-none d-md-block"><a class="col-aka text-success" href="{{ route('invoices.show' , $item->id) }}">{{ $item->invoice_number }}</a></td>
                                 <td class="col-xs-4 col-sm-4 col-md-4 col-lg-2 col-xl-2">{{ $item->contact_name }}</td>
                                 <td class="col-xs-4 col-sm-4 col-md-3 col-lg-1 col-xl-1 text-right">@money($item->amount, $item->currency_code, true)</td>
-                                <td class="col-lg-2 col-xl-2 hidden-lg">@date($item->invoiced_at)</td>
-                                <td class="col-lg-2 col-xl-2 hidden-lg">@date($item->due_at)</td>
-                                <td class="col-lg-1 col-xl-1 hidden-lg">
+                                <td class="col-lg-2 col-xl-2 d-none d-lg-block">@date($item->invoiced_at)</td>
+                                <td class="col-lg-2 col-xl-2 d-none d-lg-block">@date($item->due_at)</td>
+                                <td class="col-lg-1 col-xl-1 d-none d-lg-block">
                                     <span class="badge badge-pill badge-{{ $item->status->label }}">{{ trans('invoices.status.' . $item->status->code) }}</span>
                                 </td>
                                 <td class="col-xs-4 col-sm-2 col-md-2 col-lg-1 col-xl-1 text-center">
diff --git a/resources/views/incomes/invoices/print.blade.php b/resources/views/incomes/invoices/print.blade.php
index 1db3069b8..eb9840940 100644
--- a/resources/views/incomes/invoices/print.blade.php
+++ b/resources/views/incomes/invoices/print.blade.php
@@ -160,7 +160,7 @@
                                 @stack('quantity_th_end')
 
                                 @stack('price_th_start')
-                                    <th class="col-sm-3 text-center hidden-sm pl-5">{{ trans($text_override['price']) }}</th>
+                                    <th class="col-sm-3 text-center d-none d-sm-block pl-5">{{ trans($text_override['price']) }}</th>
                                 @stack('price_th_end')
 
                                 @stack('total_th_start')
@@ -183,7 +183,7 @@
                                     @stack('quantity_td_end')
 
                                     @stack('price_td_start')
-                                        <td class="col-sm-3 text-center hidden-sm pl-5">@money($item->price, $invoice->currency_code, true)</td>
+                                        <td class="col-sm-3 text-center d-none d-sm-block pl-5">@money($item->price, $invoice->currency_code, true)</td>
                                     @stack('price_td_end')
 
                                     @stack('total_td_start')
diff --git a/resources/views/incomes/invoices/show.blade.php b/resources/views/incomes/invoices/show.blade.php
index 7dc16d1a1..305b35c40 100644
--- a/resources/views/incomes/invoices/show.blade.php
+++ b/resources/views/incomes/invoices/show.blade.php
@@ -355,7 +355,7 @@
                                             @stack('quantity_th_end')
 
                                             @stack('price_th_start')
-                                                <th class="col-sm-3 text-center hidden-sm">{{ trans($text_override['price']) }}</th>
+                                                <th class="col-sm-3 text-center d-none d-sm-block">{{ trans($text_override['price']) }}</th>
                                             @stack('price_th_end')
 
                                             @stack('total_th_start')
@@ -373,7 +373,7 @@
                                                 @stack('quantity_td_end')
 
                                                 @stack('price_td_start')
-                                                    <td class="col-sm-3 text-center hidden-sm pl-8">@money($item->price, $invoice->currency_code, true)</td>
+                                                    <td class="col-sm-3 text-center d-none d-sm-block pl-8">@money($item->price, $invoice->currency_code, true)</td>
                                                 @stack('price_td_end')
 
                                                 @stack('total_td_start')
diff --git a/resources/views/incomes/revenues/index.blade.php b/resources/views/incomes/revenues/index.blade.php
index 122e13bef..8546f5d79 100644
--- a/resources/views/incomes/revenues/index.blade.php
+++ b/resources/views/incomes/revenues/index.blade.php
@@ -21,8 +21,8 @@
                     'class' => 'mb-0'
                 ]) !!}
                     <div class="row" v-if="!bulk_action.show">
-                        <div class="col-12 card-header-search">
-                            <span class="table-text hidden-lg">{{ trans('general.search') }}:</span>
+                        <div class="col-12 d-flex align-items-center">
+                            <span class="font-weight-400 d-none d-lg-block mr-2">{{ trans('general.search') }}:</span>
                             <akaunting-search></akaunting-search>
                         </div>
                     </div>
@@ -35,12 +35,12 @@
                 <table class="table table-flush table-hover">
                     <thead class="thead-light">
                         <tr class="row table-head-line">
-                            <th class="col-sm-2 col-md-2 col-lg-1 col-xl-1 hidden-sm">{{ Form::bulkActionAllGroup() }}</th>
+                            <th class="col-sm-2 col-md-2 col-lg-1 col-xl-1 d-none d-sm-block">{{ Form::bulkActionAllGroup() }}</th>
                             <th class="col-xs-4 col-sm-4 col-md-3 col-lg-2 col-xl-3">@sortablelink('paid_at', trans('general.date'), ['filter' => 'active, visible'], ['class' => 'col-aka', 'rel' => 'nofollow'])</th>
                             <th class="col-xs-4 col-sm-4 col-md-3 col-lg-2 col-xl-1 text-right">@sortablelink('amount', trans('general.amount'))</th>
-                            <th class="col-md-2 col-lg-2 col-xl-3 hidden-md">@sortablelink('contact.name', trans_choice('general.customers', 1))</th>
-                            <th class="col-lg-2 col-xl-2 hidden-lg">@sortablelink('category.name', trans_choice('general.categories', 1))</th>
-                            <th class="col-lg-2 col-xl-1 hidden-lg">@sortablelink('account.name', trans_choice('general.accounts', 1))</th>
+                            <th class="col-md-2 col-lg-2 col-xl-3 d-none d-md-block">@sortablelink('contact.name', trans_choice('general.customers', 1))</th>
+                            <th class="col-lg-2 col-xl-2 d-none d-lg-block">@sortablelink('category.name', trans_choice('general.categories', 1))</th>
+                            <th class="col-lg-2 col-xl-1 d-none d-lg-block">@sortablelink('account.name', trans_choice('general.accounts', 1))</th>
                             <th class="col-xs-4 col-sm-2 col-md-2 col-lg-1 col-xl-1 text-center"><a>{{ trans('general.actions') }}</a></th>
                         </tr>
                     </thead>
@@ -49,16 +49,16 @@
                         @foreach($revenues as $item)
                             @php $is_transfer = ($item->category && ($item->category->id == $transfer_cat_id)); @endphp
                             <tr class="row align-items-center border-top-1">
-                                <td class="col-sm-2 col-md-2 col-lg-1 col-xl-1 hidden-sm">{{ Form::bulkActionGroup($item->id, $item->contact->name) }}</td>
+                                <td class="col-sm-2 col-md-2 col-lg-1 col-xl-1 d-none d-sm-block">{{ Form::bulkActionGroup($item->id, $item->contact->name) }}</td>
                                 @if ($item->reconciled)
                                     <td class="col-xs-4 col-sm-4 col-md-3 col-lg-2 col-xl-3">@date($item->paid_at)</td>
                                 @else
                                     <td class="col-xs-4 col-sm-4 col-md-3 col-lg-2 col-xl-3"><a class="text-success col-aka" href="{{ route('revenues.edit', $item->id) }}">@date($item->paid_at)</a></td>
                                 @endif
                                 <td class="col-xs-4 col-sm-4 col-md-3 col-lg-2 col-xl-1 text-right">@money($item->amount, $item->currency_code, true)</td>
-                                <td class="col-md-2 col-lg-2 col-xl-3 hidden-md">{{ !empty($item->contact->name) ? $item->contact->name : trans('general.na') }}</td>
-                                <td class="col-lg-2 col-xl-2 hidden-lg">{{ $item->category ? $item->category->name : trans('general.na') }}</td>
-                                <td class="col-lg-2 col-xl-1 hidden-lg">{{ $item->account ? $item->account->name : trans('general.na') }}</td>
+                                <td class="col-md-2 col-lg-2 col-xl-3 d-none d-md-block">{{ !empty($item->contact->name) ? $item->contact->name : trans('general.na') }}</td>
+                                <td class="col-lg-2 col-xl-2 d-none d-lg-block">{{ $item->category ? $item->category->name : trans('general.na') }}</td>
+                                <td class="col-lg-2 col-xl-1 d-none d-lg-block">{{ $item->account ? $item->account->name : trans('general.na') }}</td>
                                 <td class="col-xs-4 col-sm-2 col-md-2 col-lg-1 col-xl-1 text-center">
                                     @if (!$is_transfer)
                                         <div class="dropdown">
diff --git a/resources/views/install/updates/edit.blade.php b/resources/views/install/updates/edit.blade.php
index 83489a0c3..23f65a354 100644
--- a/resources/views/install/updates/edit.blade.php
+++ b/resources/views/install/updates/edit.blade.php
@@ -13,7 +13,7 @@
 @section('content')
     <div class="card">
         <div class="card-header">
-            <span class="title-filter hidden-xs">{{ $name }}</span>
+            <span class="title-filter d-none d-sm-block">{{ $name }}</span>
         </div>
 
         <div class="card-body">
diff --git a/resources/views/install/updates/index.blade.php b/resources/views/install/updates/index.blade.php
index f441ef487..b7b60ab6c 100644
--- a/resources/views/install/updates/index.blade.php
+++ b/resources/views/install/updates/index.blade.php
@@ -46,8 +46,8 @@
                 <thead class="thead-light">
                     <tr class="row table-head-line">
                         <th class="col-xs-4 col-sm-4 col-md-4">{{ trans('general.name') }}</th>
-                        <th class="col-md-2 hidden-md">{{ trans_choice('general.categories', 1) }}</th>
-                        <th class="col-sm-3 col-md-2 hidden-sm">{{ trans('updates.installed_version') }}</th>
+                        <th class="col-md-2 d-none d-md-block">{{ trans_choice('general.categories', 1) }}</th>
+                        <th class="col-sm-3 col-md-2 d-none d-sm-block">{{ trans('updates.installed_version') }}</th>
                         <th class="col-xs-4 col-sm-3 col-md-2">{{ trans('updates.latest_version') }}</th>
                         <th class="col-xs-4 col-sm-2 col-md-2 text-center">{{ trans('general.actions') }}</th>
                     </tr>
@@ -57,8 +57,8 @@
                         @foreach($modules as $module)
                             <tr class="row align-items-center border-top-1">
                                 <td class="col-xs-4 col-sm-4 col-md-4">{{ $module->name }}</td>
-                                <td class="col-md-2 hidden-md">{{ $module->category }}</td>
-                                <td class="col-sm-3 col-md-2 hidden-sm">{{ $module->installed }}</td>
+                                <td class="col-md-2 d-none d-md-block">{{ $module->category }}</td>
+                                <td class="col-sm-3 col-md-2 d-none d-sm-block">{{ $module->installed }}</td>
                                 <td class="col-xs-4 col-md-2 col-sm-3">{{ $module->latest }}</td>
                                 <td class="col-xs-4 col-sm-2 col-md-2 text-center">
                                     <a href="{{ url('install/updates/update/' . $module->alias . '/' . $module->latest) }}" class="btn btn-warning btn-sm">
diff --git a/resources/views/partials/admin/navbar.blade.php b/resources/views/partials/admin/navbar.blade.php
index 637fb379f..99115b028 100644
--- a/resources/views/partials/admin/navbar.blade.php
+++ b/resources/views/partials/admin/navbar.blade.php
@@ -188,7 +188,7 @@
                         </li>
                     @endpermission
 
-                    <li class="nav-item hidden-md">
+                    <li class="nav-item d-none d-md-block">
                         <a class="nav-link" href="{{ url(trans('header.support_link')) }}" target="_blank" title="{{ trans('general.help') }}" role="button" aria-haspopup="true" aria-expanded="false">
                             <i class="far fa-life-ring"></i>
                         </a>
diff --git a/resources/views/partials/admin/pagination.blade.php b/resources/views/partials/admin/pagination.blade.php
index 588d9ee08..3402cd64f 100644
--- a/resources/views/partials/admin/pagination.blade.php
+++ b/resources/views/partials/admin/pagination.blade.php
@@ -1,11 +1,11 @@
 @stack('pagination_start')
     @if ($items->firstItem())
-        <div class="col-6">
-            <span class="table-text hidden-lg">
+        <div class="col-6 d-flex align-items-center">
+            <span class="table-text d-none d-lg-block mr-2">
                 {{ trans('general.show') }}
             </span>
-            {!! Form::select('limit', $limits, request('limit', setting('default.list_limit', '25')), ['class' => 'form-control form-control-sm table-header-search hidden-md', 'onchange' => 'this.form.submit()']) !!}
-            <span class="table-text hidden-lg">
+            {!! Form::select('limit', $limits, request('limit', setting('default.list_limit', '25')), ['class' => 'form-control form-control-sm table-header-search d-none d-md-block', 'onchange' => 'this.form.submit()']) !!}
+            <span class="table-text d-none d-lg-block ml-2">
                 {{ trans('pagination.page') }}
                 {{ trans('pagination.showing', ['first' => $items->firstItem(), 'last' => $items->lastItem(), 'total' => $items->total(), 'type' => strtolower((isset($title)) ? $title : trans_choice('general.' . $type, 2))]) }}
             </span>
diff --git a/resources/views/partials/form/bulk_action_row_group.blade.php b/resources/views/partials/form/bulk_action_row_group.blade.php
index 9813cd5bf..c6bf38d3e 100644
--- a/resources/views/partials/form/bulk_action_row_group.blade.php
+++ b/resources/views/partials/form/bulk_action_row_group.blade.php
@@ -2,7 +2,7 @@
 
 <div class="align-items-center d-none" v-if="bulk_action.show" v-bind:class="[bulk_action.show ? 'show' : '']">
     <div class="mr-6">
-        <span class="hidden-sm text-white">
+        <span class="text-white d-none d-sm-block">
             <b v-text="bulk_action.count"></b>
                 <span v-if="bulk_action.count === 1">
                     {{ strtolower(trans_choice($text, 1)) }}
diff --git a/resources/views/partials/modules/reviews.blade.php b/resources/views/partials/modules/reviews.blade.php
index 73e7e33fb..c39a7a0a8 100644
--- a/resources/views/partials/modules/reviews.blade.php
+++ b/resources/views/partials/modules/reviews.blade.php
@@ -37,7 +37,7 @@
         @if ($review_first_item)
             <div class="row d-none">
                 <div class="col-md-6">
-                    <span class="table-text hidden-lg">
+                    <span class="table-text d-none d-lg-block">
                         {{ trans('pagination.showing', ['first' => $review_first_item, 'last' => $review_last_item, 'total' => $reviews->total, 'type' => strtolower(trans('modules.tab.reviews'))]) }}
                     </span>
                 </div>
diff --git a/resources/views/partials/portal/navbar.blade.php b/resources/views/partials/portal/navbar.blade.php
index e14501912..c830fd3fe 100644
--- a/resources/views/partials/portal/navbar.blade.php
+++ b/resources/views/partials/portal/navbar.blade.php
@@ -80,7 +80,7 @@
                     </li>
                 @endpermission
 
-                <li class="nav-item hidden-md">
+                <li class="nav-item d-none d-md-block">
                     <a class="nav-link" href="{{ url(trans('header.support_link')) }}" target="_blank" title="{{ trans('general.help') }}" role="button" aria-haspopup="true" aria-expanded="false">
                         <i class="far fa-life-ring"></i>
                     </a>
diff --git a/resources/views/partials/portal/pagination.blade.php b/resources/views/partials/portal/pagination.blade.php
index 588d9ee08..4964f2bfc 100644
--- a/resources/views/partials/portal/pagination.blade.php
+++ b/resources/views/partials/portal/pagination.blade.php
@@ -1,11 +1,11 @@
 @stack('pagination_start')
     @if ($items->firstItem())
         <div class="col-6">
-            <span class="table-text hidden-lg">
+            <span class="table-text d-none d-lg-block">
                 {{ trans('general.show') }}
             </span>
-            {!! Form::select('limit', $limits, request('limit', setting('default.list_limit', '25')), ['class' => 'form-control form-control-sm table-header-search hidden-md', 'onchange' => 'this.form.submit()']) !!}
-            <span class="table-text hidden-lg">
+            {!! Form::select('limit', $limits, request('limit', setting('default.list_limit', '25')), ['class' => 'form-control form-control-sm table-header-search d-none d-md-block', 'onchange' => 'this.form.submit()']) !!}
+            <span class="table-text d-none d-lg-block">
                 {{ trans('pagination.page') }}
                 {{ trans('pagination.showing', ['first' => $items->firstItem(), 'last' => $items->lastItem(), 'total' => $items->total(), 'type' => strtolower((isset($title)) ? $title : trans_choice('general.' . $type, 2))]) }}
             </span>
diff --git a/resources/views/partials/portal/payment_method/redirect/show.blade.php b/resources/views/partials/portal/payment_method/redirect/show.blade.php
index 863720633..eab710a0b 100644
--- a/resources/views/partials/portal/payment_method/redirect/show.blade.php
+++ b/resources/views/partials/portal/payment_method/redirect/show.blade.php
@@ -1,28 +1,26 @@
-<div>
-    <div class="hidden">
-        @if (!empty($setting['name']))
-            <h2>{{ $setting['name'] }}</h2>
-        @endif
+<div class="d-none">
+    @if (!empty($setting['name']))
+        <h2>{{ $setting['name'] }}</h2>
+    @endif
 
-        @if (!empty($setting['description']))
-            <div class="well well-sm">{{ $setting['description'] }}</div>
-        @endif
-    </div>
-    <br>
+    @if (!empty($setting['description']))
+        <div class="well well-sm">{{ $setting['description'] }}</div>
+    @endif
+</div>
+<br>
 
-    <div class="buttons">
-        <div class="pull-right">
-            {!! Form::open([
-                'url' => $confirm_url,
-                'id' => 'redirect-form',
-                'role' => 'form',
-                'autocomplete' => "off",
-                'novalidate' => 'true'
-            ]) !!}
-                <button @click="onRedirectConfirm" type="button" id="button-confirm" class="btn btn-success">
-                    {{ trans('general.confirm') }}
-                </button>
-            {!! Form::close() !!}
-        </div>
+<div class="buttons">
+    <div class="pull-right">
+        {!! Form::open([
+            'url' => $confirm_url,
+            'id' => 'redirect-form',
+            'role' => 'form',
+            'autocomplete' => "off",
+            'novalidate' => 'true'
+        ]) !!}
+            <button @click="onRedirectConfirm" type="button" id="button-confirm" class="btn btn-success">
+                {{ trans('general.confirm') }}
+            </button>
+        {!! Form::close() !!}
     </div>
 </div>
diff --git a/resources/views/partials/portal/payment_method/redirect/signed.blade.php b/resources/views/partials/portal/payment_method/redirect/signed.blade.php
index 863720633..fbafc5e99 100644
--- a/resources/views/partials/portal/payment_method/redirect/signed.blade.php
+++ b/resources/views/partials/portal/payment_method/redirect/signed.blade.php
@@ -1,5 +1,4 @@
-<div>
-    <div class="hidden">
+    <div class="d-none">
         @if (!empty($setting['name']))
             <h2>{{ $setting['name'] }}</h2>
         @endif
@@ -25,4 +24,4 @@
             {!! Form::close() !!}
         </div>
     </div>
-</div>
+
diff --git a/resources/views/partials/widget/head.blade.php b/resources/views/partials/widget/head.blade.php
index 1579bf7b9..533490269 100644
--- a/resources/views/partials/widget/head.blade.php
+++ b/resources/views/partials/widget/head.blade.php
@@ -5,7 +5,7 @@
                 <h4 class="mb-0">@yield('widget-title')</h4>
             </div>
 
-            <div class="col-8 text-right hidden-sm">
+            <div class="col-8 text-right d-none d-sm-block">
                 @yield('button')
 
                 <span>
diff --git a/resources/views/portal/invoices/index.blade.php b/resources/views/portal/invoices/index.blade.php
index 609369d24..50a7d7017 100644
--- a/resources/views/portal/invoices/index.blade.php
+++ b/resources/views/portal/invoices/index.blade.php
@@ -13,8 +13,8 @@
             ]) !!}
 
                 <div class="row">
-                    <div class="col-12 card-header-search card-header-space">
-                        <span class="table-text hidden-lg card-header-search-text">{{ trans('general.search') }}:</span>
+                    <div class="col-12 d-flex align-items-center">
+                        <span class="font-weight-400 d-none d-lg-block mr-2">{{ trans('general.search') }}:</span>
                         <akaunting-search></akaunting-search>
                     </div>
                 </div>
@@ -28,8 +28,8 @@
                     <tr class="row table-head-line">
                         <th class="col-xs-4 col-sm-4 col-md-3">@sortablelink('invoice_number', trans('invoices.invoice_number'))</th>
                         <th class="col-xs-4 col-sm-2 col-md-2 text-right">@sortablelink('amount', trans('general.amount'))</th>
-                        <th class="col-sm-3 col-md-3 hidden-sm">@sortablelink('invoiced_at', trans('invoices.invoice_date'))</th>
-                        <th class="col-md-2 hidden-md">@sortablelink('due_at', trans('invoices.due_date'))</th>
+                        <th class="col-sm-3 col-md-3 d-none d-sm-block">@sortablelink('invoiced_at', trans('invoices.invoice_date'))</th>
+                        <th class="col-md-2 d-none d-md-block">@sortablelink('due_at', trans('invoices.due_date'))</th>
                         <th class="col-xs-4 col-sm-3 col-md-2 text-center">@sortablelink('status.name', trans_choice('general.statuses', 1))</th>
                     </tr>
                 </thead>
@@ -39,8 +39,8 @@
                         <tr class="row align-items-center border-top-1">
                             <td class="col-xs-4 col-sm-4 col-md-3"><a class="text-success" href="{{ route('portal.invoices.show', $item->id) }}">{{ $item->invoice_number }}</a></td>
                             <td class="col-xs-4 col-sm-2 col-md-2 text-right">@money($item->amount, $item->currency_code, true)</td>
-                            <td class="col-sm-3 col-md-3 hidden-sm">@date($item->invoiced_at)</td>
-                            <td class="col-md-2 hidden-md">@date($item->due_at)</td>
+                            <td class="col-sm-3 col-md-3 d-none d-sm-block">@date($item->invoiced_at)</td>
+                            <td class="col-md-2 d-none d-md-block">@date($item->due_at)</td>
                             <td class="col-xs-4 col-sm-3 col-md-2 text-center"><span class="badge badge-pill badge-{{ $item->status->label }}">{{ trans('invoices.status.' . $item->status->code) }}</span></td>
                         </tr>
                     @endforeach
diff --git a/resources/views/portal/invoices/show.blade.php b/resources/views/portal/invoices/show.blade.php
index d7ee4b001..06161a404 100644
--- a/resources/views/portal/invoices/show.blade.php
+++ b/resources/views/portal/invoices/show.blade.php
@@ -173,7 +173,7 @@
                                             @stack('quantity_th_end')
 
                                             @stack('price_th_start')
-                                                <th class="col-sm-3 text-center hidden-sm pl-5">{{ trans($text_override['price']) }}</th>
+                                                <th class="col-sm-3 text-center  pl-5">{{ trans($text_override['price']) }}</th>
                                             @stack('price_th_end')
 
                                             @stack('total_th_start')
@@ -191,7 +191,7 @@
                                                 @stack('quantity_td_end')
 
                                                 @stack('price_td_start')
-                                                    <td class="col-sm-3 text-center hidden-sm pl-5">@money($item->price, $invoice->currency_code, true)</td>
+                                                    <td class="col-sm-3 text-center d-none d-sm-block pl-5">@money($item->price, $invoice->currency_code, true)</td>
                                                 @stack('price_td_end')
 
                                                 @stack('total_td_start')
@@ -207,7 +207,7 @@
                 @stack('invoice_item_end')
 
                 @stack('invoice_total_start')
-                    <div class="row">
+                    <div class="row mt-5">
                         <div class="col-md-7">
                             <div class="table-responsive">
                                 <table class="table table-borderless">
diff --git a/resources/views/portal/payments/index.blade.php b/resources/views/portal/payments/index.blade.php
index a7bc3ca87..779038710 100644
--- a/resources/views/portal/payments/index.blade.php
+++ b/resources/views/portal/payments/index.blade.php
@@ -13,8 +13,8 @@
             ]) !!}
 
             <div class="row">
-                <div class="col-12 card-header-search card-header-space">
-                    <span class="table-text hidden-lg card-header-search-text">{{ trans('general.search') }}:</span>
+                <div class="col-12 d-flex align-items-center">
+                    <span class="font-weight-400 d-none d-lg-block mr-2">{{ trans('general.search') }}:</span>
                     <akaunting-search></akaunting-search>
                 </div>
             </div>
@@ -29,7 +29,7 @@
                         <th class="col-xs-3 col-sm-3">@sortablelink('paid_at', trans('general.date'))</th>
                         <th class="col-xs-3 col-sm-3">@sortablelink('amount', trans('general.amount'))</th>
                         <th class="col-xs-6 col-sm-3">@sortablelink('payment_method', trans_choice('general.payment_methods', 1))</th>
-                        <th class="col-sm-3 hidden-sm">@sortablelink('description', trans('general.description'))</th>
+                        <th class="col-sm-3 d-none d-sm-block">@sortablelink('description', trans('general.description'))</th>
                     </tr>
                 </thead>
 
@@ -39,7 +39,7 @@
                             <td class="col-xs-3 col-sm-3"><a class="text-success" href="{{ route('portal.payments.show', $item->id) }}">@date($item->paid_at)</a></td>
                             <td class="col-xs-3 col-sm-3">@money($item->amount, $item->currency_code, true)</td>
                             <td class="col-xs-6 col-sm-3">{{ $payment_methods[$item->payment_method] }}</td>
-                            <td class="col-sm-3 hidden-sm">{{ $item->description }}</td>
+                            <td class="col-sm-3 d-none d-sm-block">{{ $item->description }}</td>
                         </tr>
                     @endforeach
                 </tbody>
diff --git a/resources/views/settings/categories/index.blade.php b/resources/views/settings/categories/index.blade.php
index 724a3da9e..1bba40a87 100644
--- a/resources/views/settings/categories/index.blade.php
+++ b/resources/views/settings/categories/index.blade.php
@@ -18,8 +18,8 @@
                 'class' => 'mb-0'
             ]) !!}
                 <div class="row" v-if="!bulk_action.show">
-                    <div class="col-12">
-                        <span class="table-text hidden-lg">{{ trans('general.search') }}:</span>
+                    <div class="col-12 d-flex align-items-center">
+                        <span class="font-weight-400 d-none d-lg-block mr-2">{{ trans('general.search') }}:</span>
                         <akaunting-search></akaunting-search>
                     </div>
                 </div>
@@ -32,10 +32,10 @@
             <table class="table table-flush table-hover">
                 <thead class="thead-light">
                     <tr class="row table-head-line">
-                        <th class="col-sm-2 col-md-2 col-lg-1 hidden-sm">{{ Form::bulkActionAllGroup() }}</th>
+                        <th class="col-sm-2 col-md-2 col-lg-1 d-none d-sm-block">{{ Form::bulkActionAllGroup() }}</th>
                         <th class="col-xs-4 col-sm-3 col-md-2 col-lg-4">@sortablelink('name', trans('general.name'), ['filter' => 'active, visible'], ['class' => 'col-aka', 'rel' => 'nofollow'])</th>
-                        <th class="col-sm-2 col-md-2 col-lg-2 hidden-sm">@sortablelink('type', trans_choice('general.types', 1))</th>
-                        <th class="col-md-2  col-lg-2 hidden-md">{{ trans('general.color') }}</th>
+                        <th class="col-sm-2 col-md-2 col-lg-2 d-none d-sm-block">@sortablelink('type', trans_choice('general.types', 1))</th>
+                        <th class="col-md-2  col-lg-2 d-none d-md-block">{{ trans('general.color') }}</th>
                         <th class="col-xs-4 col-sm-3 col-md-2 col-lg-2">@sortablelink('enabled', trans('general.enabled'))</th>
                         <th class="col-xs-4 col-sm-2 col-md-2 col-lg-1 text-center">{{ trans('general.actions') }}</th>
                     </tr>
@@ -44,10 +44,10 @@
                 <tbody>
                     @foreach($categories as $item)
                         <tr class="row align-items-center border-top-1">
-                            <td class="col-sm-2 col-md-2 col-lg-1 hidden-sm">{{ Form::bulkActionGroup($item->id, $item->name) }}</td>
+                            <td class="col-sm-2 col-md-2 col-lg-1 d-none d-sm-block">{{ Form::bulkActionGroup($item->id, $item->name) }}</td>
                             <td class="col-xs-4 col-sm-3 col-md-2 col-lg-4"><a class="col-aka text-success " href="{{ route('categories.edit',  $item->id) }}">{{ $item->name }}</a></td>
-                            <td class="col-sm-2 col-md-2 col-lg-2 hidden-sm">{{ $types[$item->type] }}</td>
-                            <td class="col-md-2  col-lg-2 hidden-md"><i class="fa fa-2x fa-circle" style="color:{{ $item->color }};"></i></td>
+                            <td class="col-sm-2 col-md-2 col-lg-2 d-none d-sm-block">{{ $types[$item->type] }}</td>
+                            <td class="col-md-2  col-lg-2 d-none d-md-block"><i class="fa fa-2x fa-circle" style="color:{{ $item->color }};"></i></td>
                             <td class="col-xs-4 col-sm-3 col-md-2 col-lg-2">
                                 @if (user()->can('update-settings-categories'))
                                     {{ Form::enabledGroup($item->id, $item->name, $item->enabled) }}
diff --git a/resources/views/settings/currencies/index.blade.php b/resources/views/settings/currencies/index.blade.php
index 01d9c1436..bfb640426 100644
--- a/resources/views/settings/currencies/index.blade.php
+++ b/resources/views/settings/currencies/index.blade.php
@@ -18,8 +18,8 @@
                 'class' => 'mb-0'
             ]) !!}
                 <div class="row" v-if="!bulk_action.show">
-                    <div class="col-12 card-header-search">
-                        <span class="table-text hidden-lg">{{ trans('general.search') }}:</span>
+                    <div class="col-12 d-flex align-items-center">
+                        <span class="font-weight-400 d-none d-lg-block mr-2">{{ trans('general.search') }}:</span>
                         <akaunting-search></akaunting-search>
                     </div>
                 </div>
@@ -32,10 +32,10 @@
             <table class="table table-flush table-hover">
                 <thead class="thead-light">
                     <tr class="row table-head-line">
-                        <th class="col-sm-2 col-md-2 col-lg-1 hidden-sm">{{ Form::bulkActionAllGroup() }}</th>
+                        <th class="col-sm-2 col-md-2 col-lg-1 d-none d-sm-block">{{ Form::bulkActionAllGroup() }}</th>
                         <th class="col-xs-4 col-sm-3 col-md-2 col-lg-4">@sortablelink('name', trans('general.name'), ['filter' => 'active, visible'], ['class' => 'col-aka', 'rel' => 'nofollow'])</th>
-                        <th class="col-md-2 col-lg-2 hidden-md">@sortablelink('code', trans('currencies.code'))</th>
-                        <th class="col-sm-2 col-md-2 col-lg-2 hidden-sm">@sortablelink('rate', trans('currencies.rate'))</th>
+                        <th class="col-md-2 col-lg-2 d-none d-md-block">@sortablelink('code', trans('currencies.code'))</th>
+                        <th class="col-sm-2 col-md-2 col-lg-2 d-none d-sm-block">@sortablelink('rate', trans('currencies.rate'))</th>
                         <th class="col-xs-4 col-sm-3 col-md-2 col-lg-2">@sortablelink('enabled', trans('general.enabled'))</th>
                         <th class="col-xs-4 col-sm-2 col-md-2 col-lg-1 text-center">{{ trans('general.actions') }}</th>
                     </tr>
@@ -44,10 +44,10 @@
                 <tbody>
                     @foreach($currencies as $item)
                         <tr class="row align-items-center border-top-1">
-                            <td class="col-sm-2 col-md-2 col-lg-1 hidden-sm">{{ Form::bulkActionGroup($item->id, $item->name) }}</td>
+                            <td class="col-sm-2 col-md-2 col-lg-1 d-none d-sm-block">{{ Form::bulkActionGroup($item->id, $item->name) }}</td>
                             <td class="col-xs-4 col-sm-3 col-md-2 col-lg-4"><a class="col-aka text-success" href="{{ route('currencies.edit', $item->id) }}">{{ $item->name }}</a></td>
-                            <td class="col-md-2  col-lg-2 hidden-md">{{ $item->code }}</td>
-                            <td class="col-sm-2 col-md-2 col-lg-2 hidden-sm">{{ $item->rate }}</td>
+                            <td class="col-md-2  col-lg-2 d-none d-md-block">{{ $item->code }}</td>
+                            <td class="col-sm-2 col-md-2 col-lg-2 d-none d-sm-block">{{ $item->rate }}</td>
                             <td class="col-xs-4 col-sm-3 col-md-2 col-lg-2">
                                 @if (user()->can('update-settings-currencies'))
                                     {{ Form::enabledGroup($item->id, $item->name, $item->enabled) }}
diff --git a/resources/views/settings/taxes/index.blade.php b/resources/views/settings/taxes/index.blade.php
index f5b5842d5..ebdb33664 100644
--- a/resources/views/settings/taxes/index.blade.php
+++ b/resources/views/settings/taxes/index.blade.php
@@ -18,8 +18,8 @@
                 'class' => 'mb-0'
             ]) !!}
                 <div class="row" v-if="!bulk_action.show">
-                    <div class="col-12 card-header-search">
-                        <span class="table-text hidden-lg">{{ trans('general.search') }}:</span>
+                    <div class="col-12 d-flex align-items-center">
+                        <span class="font-weight-400 d-none d-lg-block mr-2">{{ trans('general.search') }}:</span>
                         <akaunting-search></akaunting-search>
                     </div>
                 </div>
@@ -32,10 +32,10 @@
             <table class="table table-flush table-hover">
                 <thead class="thead-light">
                     <tr class="row table-head-line">
-                        <th class="col-sm-2 col-md-2 col-lg-1 hidden-sm">{{ Form::bulkActionAllGroup() }}</th>
+                        <th class="col-sm-2 col-md-2 col-lg-1 d-none d-sm-block">{{ Form::bulkActionAllGroup() }}</th>
                         <th class="col-xs-4 col-sm-3 col-md-2 col-lg-4">@sortablelink('name', trans('general.name'), ['filter' => 'active, visible'], ['class' => 'col-aka', 'rel' => 'nofollow'])</th>
-                        <th class="col-md-2 col-lg-2 hidden-md">@sortablelink('rate', trans('taxes.rate_percent'))</th>
-                        <th class="col-sm-2 col-md-2 col-lg-2 hidden-sm">@sortablelink('type', trans_choice('general.types', 1))</th>
+                        <th class="col-md-2 col-lg-2 d-none d-md-block">@sortablelink('rate', trans('taxes.rate_percent'))</th>
+                        <th class="col-sm-2 col-md-2 col-lg-2 d-none d-sm-block">@sortablelink('type', trans_choice('general.types', 1))</th>
                         <th class="col-xs-4 col-sm-3 col-md-2 col-lg-2">@sortablelink('enabled', trans('general.enabled'))</th>
                         <th class="col-xs-4 col-sm-2 col-md-2 col-lg-1 text-center">{{ trans('general.actions') }}</th>
                     </tr>
@@ -44,10 +44,10 @@
                 <tbody>
                     @foreach($taxes as $item)
                         <tr class="row align-items-center border-top-1">
-                            <td class="col-sm-2 col-md-2 col-lg-1 hidden-sm">{{ Form::bulkActionGroup($item->id, $item->name) }}</td>
+                            <td class="col-sm-2 col-md-2 col-lg-1 d-none d-sm-block">{{ Form::bulkActionGroup($item->id, $item->name) }}</td>
                             <td class="col-xs-4 col-sm-3 col-md-2 col-lg-4"><a class="col-aka text-success" href="{{ route('taxes.edit', $item->id) }}">{{ $item->name }}</a></td>
-                            <td class="col-md-2 col-lg-2 hidden-md">{{ $item->rate }}</td>
-                            <td class="col-sm-2 col-md-2 col-lg-2 hidden-sm">{{ $types[$item->type] }}</td>
+                            <td class="col-md-2 col-lg-2 d-none d-md-block">{{ $item->rate }}</td>
+                            <td class="col-sm-2 col-md-2 col-lg-2 d-none d-sm-block">{{ $types[$item->type] }}</td>
                             <td class="col-xs-4 col-sm-3 col-md-2 col-lg-2">
                                 @if (user()->can('update-settings-taxes'))
                                     {{ Form::enabledGroup($item->id, $item->name, $item->enabled) }}
diff --git a/resources/views/vendor/pagination/bootstrap-4.blade.php b/resources/views/vendor/pagination/bootstrap-4.blade.php
index 0a1e4b9a3..91fd8dac2 100644
--- a/resources/views/vendor/pagination/bootstrap-4.blade.php
+++ b/resources/views/vendor/pagination/bootstrap-4.blade.php
@@ -8,7 +8,7 @@
         @endif
 
         @if($paginator->currentPage() > 3)
-            <li class="page-item hidden-xs"><a class="page-link" href="{{ $paginator->url(1) }}">1</a></li>
+            <li class="page-item d-none d-sm-block"><a class="page-link" href="{{ $paginator->url(1) }}">1</a></li>
         @endif
         @if($paginator->currentPage() > 4)
             <li class="page-item"><span class="page-link">...</span></li>
@@ -26,7 +26,7 @@
             <li class="page-item"><span class="page-link">...</span></li>
         @endif
         @if($paginator->currentPage() < $paginator->lastPage() - 2)
-            <li class="page-item hidden-xs"><a class="page-link" href="{{ $paginator->url($paginator->lastPage()) }}">{{ $paginator->lastPage() }}</a></li>
+            <li class="page-item d-none d-sm-block"><a class="page-link" href="{{ $paginator->url($paginator->lastPage()) }}">{{ $paginator->lastPage() }}</a></li>
         @endif
 
         {{-- Next Page Link --}}