diff --git a/resources/lang/en/texts.php b/resources/lang/en/texts.php
index f54cd8b672c2..a5acec2a4484 100644
--- a/resources/lang/en/texts.php
+++ b/resources/lang/en/texts.php
@@ -3215,4 +3215,8 @@ return [
     'checkout_com' => 'Checkout.com',
 
     'footer_label' => 'Copyright © :year Invoice Ninja. All rights reserved.',
+
+    'credit_card_invalid' => 'Provided credit card number is not valid.',
+    'month_invalid' => 'Provided month is not valid.',
+    'year_invalid' => 'Provided year is not valid.',
 ];
diff --git a/resources/views/portal/ninja2020/gateways/authorize/add_credit_card.blade.php b/resources/views/portal/ninja2020/gateways/authorize/add_credit_card.blade.php
index acc9b015a41a..c8661ee018d6 100644
--- a/resources/views/portal/ninja2020/gateways/authorize/add_credit_card.blade.php
+++ b/resources/views/portal/ninja2020/gateways/authorize/add_credit_card.blade.php
@@ -4,6 +4,10 @@
 @push('head')
     <meta name="authorize-public-key" content="{{ $public_client_id }}">
     <meta name="authorize-login-id" content="{{ $api_login_id }}">
+    
+    <meta name="year-invalid" content="{{ ctrans('texts.year_invalid') }}">
+    <meta name="month-invalid" content="{{ ctrans('texts.month_invalid') }}">
+    <meta name="credit-card-invalid" content="{{ ctrans('texts.credit_card_invalid') }}">
 @endpush
 
 @section('body')
@@ -31,20 +35,17 @@
                     </div>
                     <div>
                         <dl>
-                            
                             @include('portal.ninja2020.gateways.authorize.credit_card')
-
-                            <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                            <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                                 <dt class="text-sm leading-5 font-medium text-gray-500">
                                     {{ ctrans('texts.save_as_default') }}
                                 </dt>
                                 <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
-                                    <input type="checkbox" class="form-checkbox" name="proxy_is_default"
-                                           id="proxy_is_default"/>
+                                    <input type="checkbox" class="form-checkbox cursor-pointer" name="proxy_is_default" id="proxy_is_default" />
                                 </dd>
                             </div>
-                            <div class="bg-white px-4 py-5 flex justify-end">
-                                <button type="primary" id="card_button">{{ ctrans('texts.add_payment_method') }}</button>
+                            <div class="bg-gray-50 px-4 py-5 flex justify-end">
+                                <button type="primary" class="button button-primary" id="card_button">{{ ctrans('texts.add_payment_method') }}</button>
                             </div>
                         </dl>
                     </div>
@@ -56,11 +57,11 @@
 
 @push('footer')
 
-    @if($gateway->getConfigField('testMode'))
-        <script src="https://jstest.authorize.net/v1/Accept.js" charset="utf-8"></script>
-    @else
-        <script src="https://js.authorize.net/v1/Accept.js" charset="utf-8"></script>
-    @endif
+@if($gateway->getConfigField('testMode'))
+    <script src="https://jstest.authorize.net/v1/Accept.js" charset="utf-8"></script>
+@else
+    <script src="https://js.authorize.net/v1/Accept.js" charset="utf-8"></script>
+@endif
 
     <script src="{{ asset('js/clients/payment_methods/authorize-authorize-card.js') }}"></script>
 @endpush
\ No newline at end of file
diff --git a/resources/views/portal/ninja2020/gateways/authorize/credit_card.blade.php b/resources/views/portal/ninja2020/gateways/authorize/credit_card.blade.php
index 178347e433c2..cd8919d8b4eb 100644
--- a/resources/views/portal/ninja2020/gateways/authorize/credit_card.blade.php
+++ b/resources/views/portal/ninja2020/gateways/authorize/credit_card.blade.php
@@ -1,4 +1,4 @@
-<div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 flex items-center">
+<div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 flex items-center flex items-center">
     <dt class="text-sm leading-5 font-medium text-gray-500 mr-4">
         {{ ctrans('texts.name') }}
     </dt>
@@ -6,35 +6,38 @@
         <input class="input w-full" id="cardholder_name" type="text" placeholder="{{ ctrans('texts.name') }}">
     </dd>
 </div>
-<div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+<div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 flex items-center">
     <dt class="text-sm leading-5 font-medium text-gray-500">
         {{ ctrans('texts.credit_card') }}
     </dt>
     <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
-        <input class="input w-full" id="card_number" type="text" placeholder="{{ ctrans('texts.card_number') }}">
+        <input class="input w-full" id="card_number" type="tel" inputmode="numeric" pattern="[0-9\s]{13,19}" autocomplete="cc-number" maxlength="19" placeholder="xxxx xxxx xxxx xxxx">
+        <div class="validation validation-fail" id="card_number_errors" hidden></div>
     </dd>
 </div>
-<div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+<div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 flex items-center">
     <dt class="text-sm leading-5 font-medium text-gray-500">
         {{ ctrans('texts.expiration_month') }}
     </dt>
     <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
-        <input class="input w-full" id="expiration_month" type="text" placeholder="{{ ctrans('texts.expiration_month') }}">
+        <input class="input w-full" id="expiration_month" type="tel" inputmode="numeric" pattern="[0-9\s]{13,19}" autocomplete="cc-month" maxlength="2">
+        <div class="validation validation-fail" id="expiration_month_errors" hidden></div>
     </dd>
 </div>
-<div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+<div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 flex items-center">
     <dt class="text-sm leading-5 font-medium text-gray-500">
         {{ ctrans('texts.expiration_year') }}
     </dt>
     <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
-        <input class="input w-full" id="expiration_year" type="text" placeholder="{{ ctrans('texts.expiration_year') }}">
+        <input class="input w-full" id="expiration_year" type="tel" inputmode="numeric" pattern="[0-9\s]{13,19}" autocomplete="cc-year" maxlength="4">
+        <div class="validation validation-fail" id="expiration_year_errors" hidden></div>
     </dd>
 </div>
-<div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+<div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 flex items-center">
     <dt class="text-sm leading-5 font-medium text-gray-500">
         {{ ctrans('texts.cvv') }}
     </dt>
     <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
-        <input class="input w-full" id="cvv" type="text" placeholder="{{ ctrans('texts.cvv') }}">
+        <input class="input w-full" id="cvv" type="tel" inputmode="numeric" pattern="[0-9\s]{13,19}" autocomplete="cc-cvv" maxlength="5">
     </dd>
-</div>
+</div>
\ No newline at end of file