diff --git a/resources/views/portal/ninja2020/components/general/card-element-single.blade.php b/resources/views/portal/ninja2020/components/general/card-element-single.blade.php
new file mode 100644
index 000000000000..160320104976
--- /dev/null
+++ b/resources/views/portal/ninja2020/components/general/card-element-single.blade.php
@@ -0,0 +1,5 @@
+<div class="px-4 py-5 sm:px-6">
+    <dt class="text-sm leading-5 font-medium">
+        {{ $slot }}
+    </dt>
+</div>
diff --git a/resources/views/portal/ninja2020/components/general/card-element.blade.php b/resources/views/portal/ninja2020/components/general/card-element.blade.php
index d41c1cc8b471..b7b52898779c 100644
--- a/resources/views/portal/ninja2020/components/general/card-element.blade.php
+++ b/resources/views/portal/ninja2020/components/general/card-element.blade.php
@@ -1,4 +1,4 @@
-<div class="px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 flex items-center">
+<div class="px-4 py-5 sm:px-6 lg:grid lg:grid-cols-3 lg:gap-4 lg:flex lg:items-center">
     <dt class="text-sm leading-5 font-medium text-gray-500 mr-4">
         {{ $title }}
     </dt>
diff --git a/resources/views/portal/ninja2020/gateways/checkout/authorize.blade.php b/resources/views/portal/ninja2020/gateways/checkout/authorize.blade.php
index 01bd9bde957f..1743e3db77a4 100644
--- a/resources/views/portal/ninja2020/gateways/checkout/authorize.blade.php
+++ b/resources/views/portal/ninja2020/gateways/checkout/authorize.blade.php
@@ -1,19 +1,7 @@
-@extends('portal.ninja2020.layout.app')
-@section('meta_title', ctrans('texts.checkout_com'))
+@extends('portal.ninja2020.layout.payments', ['gateway_title' => 'Checkout.com', 'card_title' => 'Checkout.com'])
 
-@section('body')
-    <div class="container mx-auto">
-        <div class="grid grid-cols-6 gap-4">
-            <div class="col-span-6 md:col-start-2 md:col-span-4">
-                <div class="alert alert-failure mb-4" hidden id="errors"></div>
-                <div class="bg-white shadow overflow-hidden sm:rounded-lg">
-                    <div class="bg-white px-4 py-5 sm:px-6 flex items-center">
-                        <dt class="text-sm leading-5 font-medium text-gray-500 mr-4">
-                            {{ ctrans('texts.checkout_authorize_label') }}
-                        </dt>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
+@section('gateway_content')
+    @component('portal.ninja2020.components.general.card-element-single', ['title' => 'Checkout.com', 'show_title' => false])
+        {{ __('texts.checkout_authorize_label') }}
+    @endcomponent
 @endsection
\ No newline at end of file
diff --git a/resources/views/portal/ninja2020/layout/payments.blade.php b/resources/views/portal/ninja2020/layout/payments.blade.php
new file mode 100644
index 000000000000..63391d1db9d6
--- /dev/null
+++ b/resources/views/portal/ninja2020/layout/payments.blade.php
@@ -0,0 +1,35 @@
+@extends('portal.ninja2020.layout.app')
+
+@isset($gateway_title)
+    @section('meta_title', $gateway_title)
+@else
+    @section('meta_title', ctrans('texts.pay_now'))
+@endisset
+
+@push('head')
+    @yield('gateway_head')
+@endpush
+
+@section('body')
+    <div class="container mx-auto grid grid-cols-12">
+        <div class="col-span-12 lg:col-span-6 lg:col-start-4 overflow-hidden bg-white shadow rounded-lg">
+            <div class="px-4 py-5 border-b border-gray-200 sm:px-6">
+                <h3 class="text-lg font-medium leading-6 text-gray-900">
+                    {{ $card_title }}
+                </h3>
+                <p class="max-w-2xl mt-1 text-sm leading-5 text-gray-500">
+                    @isset($card_description)
+                        {{ $card_description }}
+                    @endisset
+                </p>
+            </div>
+            <div>
+                @yield('gateway_content')
+            </div>
+        </div>
+    </div>
+@endsection
+
+@push('footer')
+    @yield('gateway_footer')
+@endpush