diff --git a/app/View/Components/Form/Section.php b/app/View/Components/Form/Section.php
new file mode 100644
index 000000000..a496f37e3
--- /dev/null
+++ b/app/View/Components/Form/Section.php
@@ -0,0 +1,38 @@
+<?php
+
+namespace App\View\Components\Form;
+
+use App\Abstracts\View\Component;
+use Illuminate\Support\Str;
+
+class Section extends Component
+{
+    public $spacingVertical;
+
+    public $spacingHorizontal;
+
+    public $columnNumber;
+
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+    public function __construct(
+        string $spacingVertical = 'gap-x-8', string $spacingHorizontal = 'gap-y-6', string $columnNumber = 'sm:grid-cols-6',
+    ) {
+        $this->spacingVertical = $spacingVertical;
+        $this->spacingHorizontal = $spacingHorizontal;
+        $columnNumber = $columnNumber;
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|string
+     */
+    public function render()
+    {
+        return view('components.form.section.index');
+    }
+}
diff --git a/public/css/app.css b/public/css/app.css
index 1c8b2db0e..6d0fe34f9 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -48389,6 +48389,10 @@ body{
     width: 25%;
   }
 
+  .lg\:w-2\/12{
+    width: 16.666667%;
+  }
+
   .lg\:w-80{
     width: 20rem;
   }
@@ -48409,10 +48413,6 @@ body{
     width: 60%;
   }
 
-  .lg\:w-2\/12{
-    width: 16.666667%;
-  }
-
   .lg\:w-7\/12{
     width: 58.333333%;
   }
diff --git a/resources/views/components/form/section/index.blade.php b/resources/views/components/form/section/index.blade.php
index 439d3e57c..a258d3365 100644
--- a/resources/views/components/form/section/index.blade.php
+++ b/resources/views/components/form/section/index.blade.php
@@ -4,9 +4,16 @@
     @endif
 
     @if (! empty($body) && $body->isNotEmpty())
-    <div class="grid sm:grid-cols-6 gap-x-8 gap-y-6 my-3.5">
-        {!! $body !!}
-    </div>
+        <div
+            @class([
+                'grid my-3.5',
+                $spacingVertical,
+                $spacingHorizontal,
+                $columnNumber,
+            ])
+        >
+            {!! $body !!}
+        </div>
     @endif
 
     @if (! empty($foot) && $foot->isNotEmpty())
diff --git a/resources/views/modules/api_key/create.blade.php b/resources/views/modules/api_key/create.blade.php
index 24c90a588..f2fa1aea3 100644
--- a/resources/views/modules/api_key/create.blade.php
+++ b/resources/views/modules/api_key/create.blade.php
@@ -5,19 +5,21 @@
 
     <x-slot name="content">
         <x-form id="form-app" route="apps.api-key.store">
-            <div class="w-1/2">
-                <div class="py-8 flex flex-col gap-2">
+            <x-form.section spacing-horizontal="gap-y-2">
+                <x-slot name="body">
                     <x-form.group.text name="api_key" placeholder="{{ trans('general.form.enter', ['field' => trans('modules.api_key')]) }}" value="{{ setting('apps.api_key', null) }}" />
 
-                    <div class="text-xs">
-                        {!! trans('modules.get_api_key', ['url' => 'https://akaunting.com/dashboard']) !!}
+                    <div class="sm:col-span-6">
+                        <div class="text-xs">
+                            {!! trans('modules.get_api_key', ['url' => 'https://akaunting.com/dashboard']) !!}
+                        </div>
                     </div>
-                </div>
 
-                <div>
-                    <x-form.buttons cancel-route="apps.home.index" without-cancel />
-                </div>
-            </div>
+                    <div class="sm:col-span-3">
+                        <x-form.buttons cancel-route="apps.home.index" without-cancel />
+                    </div>
+                </x-slot>
+            </x-form.section>
         </x-form>
     </x-slot>