diff --git a/app/Http/Controllers/ClientPortal/InvoiceController.php b/app/Http/Controllers/ClientPortal/InvoiceController.php
index ae5b26920e..ef76bf96d6 100644
--- a/app/Http/Controllers/ClientPortal/InvoiceController.php
+++ b/app/Http/Controllers/ClientPortal/InvoiceController.php
@@ -50,7 +50,7 @@ class InvoiceController extends Controller
         if (request()->ajax()) {
 
             return DataTables::of($invoices)->addColumn('action', function ($invoice) {
-                    return '<a href="/client/invoices/'. $invoice->hashed_id .'" class="btn btn-xs btn-primary"><i class="glyphicon glyphicon-edit"></i>'.ctrans('texts.view').'</a>';
+                    return $this->buildClientButtons($invoice);
                 })
                 ->addColumn('checkbox', function ($invoice){
                     return '<input type="checkbox" name="hashed_ids[]" value="'. $invoice->hashed_id .'"/>';
@@ -77,6 +77,19 @@ class InvoiceController extends Controller
 
     }
 
+    private function buildClientButtons($invoice)
+    {
+        $buttons = '<div>';
+
+        if($invoice->isPayable()){
+            $buttons .= '<a href="/client/invoices/'. $invoice->hashed_id .'" class="btn btn-sm btn-info"><i class="glyphicon glyphicon-edit"></i>'.ctrans('texts.pay_now').'</a>';
+        }
+        $buttons .= '<a href="/client/invoices/'. $invoice->hashed_id .'" class="btn btn-sm btn-primary"><i class="glyphicon glyphicon-edit"></i>'.ctrans('texts.view').'</a>';
+
+        $buttons .="</div>";
+
+        return $buttons;
+    }
     /**
      * Display the specified resource.
      *
diff --git a/resources/views/portal/default/invoices/index.blade.php b/resources/views/portal/default/invoices/index.blade.php
index 1b0da129fc..29b505bdb8 100644
--- a/resources/views/portal/default/invoices/index.blade.php
+++ b/resources/views/portal/default/invoices/index.blade.php
@@ -121,7 +121,7 @@ $(function() {
             {data: 'balance', name: 'balance', title: '{{ctrans('texts.balance')}}', visible: true},
             {data: 'due_date', name: 'due_date', title: '{{ctrans('texts.due_date')}}', visible: true},
             {data: 'status_id', name: 'status_id', title: '{{ctrans('texts.status')}}', visible: true},
-            {data: 'action', name: 'action', title: '', searchable: false, orderable: false},
+            {data: 'action', name: 'action', title: '', searchable: false, orderable: false, width: '10%'},
         ]
     });
 });