diff --git a/assets/.gitkeep b/assets/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/assets/sample-form-slider.png b/assets/sample-form-slider.png
new file mode 100644
index 0000000..851557f
Binary files /dev/null and b/assets/sample-form-slider.png differ
diff --git a/assets/sample-form.png b/assets/sample-form.png
new file mode 100644
index 0000000..aad04ae
Binary files /dev/null and b/assets/sample-form.png differ
diff --git a/composer.json b/composer.json
index 6ff8a36..6481921 100644
--- a/composer.json
+++ b/composer.json
@@ -1,5 +1,5 @@
 {
-    "name": "bastinald/laravel-livewire-forms",
+    "name": "osoobe/laravel-livewire-forms",
     "homepage": "https://github.com/bastinald/laravel-livewire-forms",
     "description": "Laravel Livewire form component with declarative Bootstrap 5 fields and buttons.",
     "license": "MIT",
@@ -11,8 +11,8 @@
         }
     ],
     "require": {
-        "laravel/framework": "^8.0",
-        "livewire/livewire": "^2.0"
+        "laravel/framework": "^8.0|^9.0|^10.0|^11.0|^12.0",
+        "livewire/livewire": "^2.0|^3.0"
     },
     "autoload": {
         "psr-4": {
diff --git a/examples.md b/examples.md
new file mode 100644
index 0000000..83cf25c
--- /dev/null
+++ b/examples.md
@@ -0,0 +1,82 @@
+
+## Examples
+
+
+### FormComponent Example
+
+```php
+namespace App\Http\Livewire\Clients;
+
+use Bastinald\LaravelLivewireForms\Components\Button;
+use Bastinald\LaravelLivewireForms\Components\FormComponent;
+use Bastinald\LaravelLivewireForms\Components\Input;
+use Bastinald\LaravelLivewireForms\Components\Select;
+
+class CreateClientForm extends FormComponent
+{
+    public $gridClass = 'row';
+
+    public function fields()
+    {
+        return [
+            Row::make()->fields([
+                Input::make('name', 'Name')
+                    ->placeholder('Full Name'),
+                Input::make('email', 'Email')
+                    ->type('email')
+                    ->placeholder('Email, example: user@example.com'),
+                Select::make('gender', 'Gender')
+                    ->placeholder('Gender')
+                    ->options(['Male', 'Female'])
+                    ->addAttrs(['class' => 'd-block w-full']),
+                Input::make('phone_no', 'Contact Number')
+                    ->placeholder('(xxx) xxx xxxxx'),
+                Input::make('street_address', 'Street Address'),
+                Input::make('city', 'City'),
+                Input::make('state', 'State / Parist'),
+                Input::make('country', 'Country'),
+            ])
+        ];
+    }
+
+    public function buttons()
+    {
+        return [
+            Button::make('Cancel', 'secondary')->url(route('team.index')),
+            Button::make()->click('submit'),
+        ];
+    }
+}
+```
+
+#### Form View
+
+![Example Form](assets/sample-form.png)
+
+
+### FormSliderComponent Example
+
+```php
+namespace App\Http\Livewire\Clients;
+
+use Bastinald\LaravelLivewireForms\Components\Button;
+use Bastinald\LaravelLivewireForms\Components\FormSliderComponent;
+use Bastinald\LaravelLivewireForms\Components\Input;
+use Bastinald\LaravelLivewireForms\Components\Select;
+
+class CreateClientForm extends FormSliderComponent
+{
+
+    public $btnIcon = 'fa fa-user';
+    public $btnText = 'Add Client';
+    public $gridClass = 'row';
+
+    ...
+
+}
+```
+
+
+#### Form Slider View
+
+![Example Form](assets/sample-form-slider.png)
diff --git a/readme.md b/readme.md
index 5fa23dc..f8b73ce 100644
--- a/readme.md
+++ b/readme.md
@@ -91,6 +91,27 @@ class Login extends FormComponent
             ->name('login')
             ->middleware('guest');
     }
+}
+```
+
+## Form Slider
+
+Create a form that slides out by specifying a `title`, `layout` and `route` to use:
+
+```php
+class Login extends FormSliderComponent
+{
+    public $title = 'Login';
+    public $layout = 'layouts.card';
+    public $btnText = 'Login';
+
+    public function route()
+    {
+        return Route::get('/login', static::class)
+            ->name('login')
+            ->middleware('guest');
+    }
+}
 ```
 
 The `route` method is made available by using my [laravel-livewire-routes](https://github.com/bastinald/laravel-livewire-routes) package.
@@ -115,6 +136,7 @@ class UpdateUserForm extends FormComponent
     {
         $this->data = $user->toArray();
     }
+}
 ```
 
 ## Accessing Data
@@ -144,6 +166,7 @@ Input::make('name', 'Name')->lazy(), // bind on change
 Input::make('name', 'Name')->debounce(500), // bind after 500ms delay 
 ```
 
+
 ## Sizing
 
 Many fields also allow you to specify a size for the input e.g.:
@@ -201,6 +224,26 @@ Arrayable::make('locations', 'Locations')->fields([
 
 Available methods: `fields`, `help`, `disabled`
 
+
+
+### Bootstrap Grid
+
+A bootstrap support to the form.
+
+#### Row `($label = null)` and RowColumn `($label = null)`
+
+An array of fields display in a Bootstrap Row or Column
+
+```php
+Row::make()->fields([
+    Input::make('city')->placeholder('City'),
+    Select::make('state')->placeholder('State')->options(['FL', 'TX']),
+]),
+```
+
+Available methods: `fields`, `help`, `disabled`, `isColumn`, `col_class`
+
+
 ### Button `($label = 'Submit', $style = 'primary')`
 
 A button used for actions and links.
@@ -227,7 +270,7 @@ Checkbox::make('active', 'This user is active')->switch(),
 
 Use the `switch` method to style the checkbox as a switch.
 
-Available methods: `switch`, `help`, `instant`, `defer`, `lazy`, `debounce`, `disabled`
+Available methods: `switch`, `help`, `instant`,  `addAttrs`, `defer`, `lazy`, `debounce`, `disabled`
 
 ### Checkboxes `($name, $label = null)`
 
@@ -237,7 +280,7 @@ An array of checkbox fields.
 Checkboxes::make('colors', 'Colors')->options(['Red', 'Green', 'Blue']),
 ```
 
-Available methods: `options`, `switch`, `help`, `instant`, `defer`, `lazy`, `debounce`, `disabled`
+Available methods: `options`, `switch`, `help`, `instant`,  `addAttrs`, `defer`, `lazy`, `debounce`, `disabled`
 
 ### Color `($name, $label = null)`
 
@@ -247,7 +290,7 @@ A color picker field.
 Color::make('hair_color', 'Hair Color'),
 ```
 
-Available methods: `small`, `large`, `help`, `instant`, `defer`, `lazy`, `debounce`, `disabled`, `readonly`
+Available methods: `small`, `large`,  `containerSize`, `help`, `instant`,  `addAttrs`, `defer`, `lazy`, `debounce`, `disabled`, `readonly`
 
 ### Conditional
 
@@ -303,7 +346,7 @@ Input::make('price', 'Price')->type('number')->append('$')->prepend('.00'),
 
 The `type` method accepts a standard HTML input type. As with other inputs, use `small` or `large` to resize an input. Input fields also support appends/prepends, and even plaintext.
 
-Available methods: `small`, `large`, `help`, `instant`, `defer`, `lazy`, `debounce`, `disabled`, `readonly`, `placeholder`, `type`, `append`, `prepend`, `plaintext`
+Available methods: `small`, `large`,  `containerSize`, `help`, `instant`,  `addAttrs`, `defer`, `lazy`, `debounce`, `disabled`, `readonly`, `placeholder`, `type`, `append`, `prepend`, `plaintext`
 
 ### Radio `($name, $label = null)`
 
@@ -313,7 +356,7 @@ A radio field.
 Radio::make('gender', 'Gender')->options(['Male', 'Female']),
 ```
 
-Available methods: `options`, `switch`, `help`, `instant`, `defer`, `lazy`, `debounce`, `disabled`
+Available methods: `options`, `switch`, `help`, `instant`,  `addAttrs`, `defer`, `lazy`, `debounce`, `disabled`
 
 ### Select `($name, $label = null)`
 
@@ -329,7 +372,7 @@ Select::make('color', 'Color')->options([
 Select::make('user_id', 'User')->options(User::pluck('name', 'id')->toArray()),
 ```
 
-Available methods: `options`, `small`, `large`, `help`, `instant`, `defer`, `lazy`, `debounce`, `disabled`, `placeholder`
+Available methods: `options`, `small`, `large`,  `containerSize`, `help`, `instant`,  `addAttrs`, `defer`, `lazy`, `debounce`, `disabled`, `placeholder`
 
 ### Textarea `($name, $label = null)`
 
@@ -340,7 +383,7 @@ Input::make('bio', 'Biography'),
 Input::make('bio', 'Biography')->rows(5),
 ```
 
-Available methods: `small`, `large`, `help`, `instant`, `defer`, `lazy`, `debounce`, `disabled`, `readonly`, `placeholder`, `rows`
+Available methods: `small`, `large`,  `containerSize`, `help`, `instant`,  `addAttrs`, `defer`, `lazy`, `debounce`, `disabled`, `readonly`, `placeholder`, `rows`
 
 ### View `($name, $data = [])`
 
@@ -349,3 +392,63 @@ Used to render a custom Blade view inside the form.
 ```php
 View::make('custom-view', ['hello' => 'world']),
 ```
+
+
+## Sameple Example
+
+
+### Code
+
+```php
+namespace App\Http\Livewire\Clients;
+
+use Bastinald\LaravelLivewireForms\Components\Button;
+use Bastinald\LaravelLivewireForms\Components\FormComponent;
+use Bastinald\LaravelLivewireForms\Components\Input;
+use Bastinald\LaravelLivewireForms\Components\Select;
+
+class CreateClientForm extends FormComponent
+{
+    public $gridClass = 'row';
+
+    public function fields()
+    {
+        return [
+            Row::make()->fields([
+                Input::make('name', 'Name')
+                    ->placeholder('Full Name'),
+                Input::make('email', 'Email')
+                    ->type('email')
+                    ->placeholder('Email, example: user@example.com'),
+                Select::make('gender', 'Gender')
+                    ->placeholder('Gender')
+                    ->options(['Male', 'Female'])
+                    ->addAttrs(['class' => 'd-block w-full']),
+                Input::make('phone_no', 'Contact Number')
+                    ->placeholder('(xxx) xxx xxxxx'),
+                Input::make('street_address', 'Street Address'),
+                Input::make('city', 'City'),
+                Input::make('state', 'State / Parist'),
+                Input::make('country', 'Country'),
+            ])
+        ];
+    }
+
+    public function buttons()
+    {
+        return [
+            Button::make('Cancel', 'secondary')->url(route('team.index')),
+            Button::make()->click('submit'),
+        ];
+    }
+}
+```
+
+### Form View
+
+![Example Form](assets/sample-form.png)
+
+
+### Other Examples
+
+For more examples, read the [example.md](examples.md) document.
diff --git a/src/Components/FormComponent.php b/src/Components/FormComponent.php
index b202c4c..ba5d619 100644
--- a/src/Components/FormComponent.php
+++ b/src/Components/FormComponent.php
@@ -12,6 +12,13 @@ class FormComponent extends Component
     public $layout;
     public $data = [];
 
+    /**
+     * CSS Class for input wrapper.
+     *
+     * @var string
+     */
+    public $gridClass = 'row';
+
     public function render()
     {
         return view('laravel-livewire-forms::form-component')
diff --git a/src/Components/FormSliderComponent.php b/src/Components/FormSliderComponent.php
new file mode 100644
index 0000000..8466fe2
--- /dev/null
+++ b/src/Components/FormSliderComponent.php
@@ -0,0 +1,33 @@
+<?php
+
+namespace Bastinald\LaravelLivewireForms\Components;
+
+class FormSliderComponent extends FormComponent {
+
+
+    public $btnIcon = '';
+    public $btnText = 'Execute';
+    public $btnAttrs = [];
+    public $sliderActive = false;
+
+    public function toggleSlider() {
+        $this->sliderActive = ! $this->sliderActive;
+    }
+
+    public function showSlider() {
+        $this->sliderActive = true;
+    }
+
+    public function hideSlider() {
+        $this->sliderActive = false;
+    }
+
+    public function render()
+    {
+        return view('laravel-livewire-forms::form-slider-component')
+            ->layout($this->layout ?? config('livewire.layout'));
+    }
+
+}
+
+?>
diff --git a/src/Components/ModalFormComponent.php b/src/Components/ModalFormComponent.php
new file mode 100644
index 0000000..c093a8f
--- /dev/null
+++ b/src/Components/ModalFormComponent.php
@@ -0,0 +1,48 @@
+<?php
+
+namespace Bastinald\LaravelLivewireForms\Components;
+
+use Bastinald\LaravelLivewireForms\Components\Button;
+use Bastinald\LaravelLivewireForms\Components\FormComponent;
+use Bastinald\LaravelLivewireForms\Components\Input;
+use Livewire\Component;
+use Livewire\WithFileUploads;
+
+
+class ModalFormComponent extends FormComponent
+{
+
+    public $program = null;
+    public $btnTitle = "Add Student";
+    public $modalTitle = "Add Student";
+    public $btnClass = "btn btn-dark ml-2 mt-sm--3";
+    public $modalFormVisible = false;
+    public $isDropdown = false;
+    public $file = null;
+    public $team;
+
+    public function createShowModal() {
+        $this->modalFormVisible = true;
+    }
+
+    public function buttons()
+    {
+        return [
+            Button::make('Cancel', 'dark')->click('$toggle("modalFormVisible")'),
+            Button::make()->click('submit'),
+        ];
+    }
+
+    public function submit()
+    {
+        $this->data = [];
+        $this->modalFormVisible = false;
+
+    }
+
+    public function render()
+    {
+        return view('laravel-livewire-forms::modal-form-component')
+            ->layout($this->layout ?? config('livewire.layout'));
+    }
+}
diff --git a/src/Components/Row.php b/src/Components/Row.php
new file mode 100644
index 0000000..e743c96
--- /dev/null
+++ b/src/Components/Row.php
@@ -0,0 +1,60 @@
+<?php
+
+namespace Bastinald\LaravelLivewireForms\Components;
+
+use Bastinald\LaravelLivewireForms\Traits\WithDisabled;
+use Bastinald\LaravelLivewireForms\Traits\WithHelp;
+use Bastinald\LaravelLivewireForms\Traits\WithPrefix;
+use Illuminate\View\Component;
+
+class Row extends Component
+{
+    use WithHelp, WithDisabled;
+    use WithPrefix;
+
+    public $props = [];
+    public $attrs = [];
+    public $column_class = "col-md-6 mb-2 mb-md-0";
+    public $row_class = "row";
+
+
+    public static function make($label = null)
+    {
+        $component = new static;
+
+        $component->props = [
+            // 'name' => $name,
+            'label' => $label,
+            'fields' => [],
+            'help' => null,
+        ];
+
+        $component->attrs = [
+            'disabled' => false,
+        ];
+
+        return $component;
+    }
+
+    public function fields($fields = [])
+    {
+        $this->props['fields'] = $fields;
+
+        return $this;
+    }
+
+    public function isColumn($field) {
+        return Column::class == get_class($field);
+    }
+
+    public function col_size($col="mb-2") {
+        $this->column_class = "$col mb-2 mb-md-0";
+        return $this;
+    }
+
+    public function render()
+    {
+        $row = $this;
+        return view('laravel-livewire-forms::row', compact('row'));
+    }
+}
diff --git a/src/Components/RowColumn.php b/src/Components/RowColumn.php
new file mode 100644
index 0000000..321b37f
--- /dev/null
+++ b/src/Components/RowColumn.php
@@ -0,0 +1,53 @@
+<?php
+
+namespace Bastinald\LaravelLivewireForms\Components;
+
+use Bastinald\LaravelLivewireForms\Traits\WithDisabled;
+use Bastinald\LaravelLivewireForms\Traits\WithHelp;
+use Bastinald\LaravelLivewireForms\Traits\WithPrefix;
+use Illuminate\View\Component;
+
+class RowColumn extends Component
+{
+    use WithHelp, WithDisabled, WithPrefix;
+
+    public $props = [];
+    public $attrs = [];
+    public $column_class = "col-md-6 mb-2 mb-md-0";
+    public $row_class;
+
+    public static function make($label = null)
+    {
+        $component = new static;
+
+        $component->props = [
+            // 'name' => $name,
+            // 'label' => $label,
+            'fields' => [],
+            'help' => null,
+        ];
+
+        $component->attrs = [
+            'disabled' => false,
+        ];
+
+        return $component;
+    }
+
+    public function col_size($col="mb-2") {
+        $this->column_class = "$col mb-2 mb-md-0";
+        return $this;
+    }
+
+    public function fields($fields = [])
+    {
+        $this->props['fields'] = $fields;
+
+        return $this;
+    }
+
+    public function render()
+    {
+        return view('laravel-livewire-forms::column');
+    }
+}
diff --git a/src/Traits/WithModel.php b/src/Traits/WithModel.php
index 9719d8a..130e69b 100644
--- a/src/Traits/WithModel.php
+++ b/src/Traits/WithModel.php
@@ -2,6 +2,8 @@
 
 namespace Bastinald\LaravelLivewireForms\Traits;
 
+use Illuminate\Support\Arr;
+
 trait WithModel
 {
     public function instant()
@@ -31,4 +33,16 @@ public function debounce($ms = 500)
 
         return $this;
     }
+
+    /**
+     * Add attributes to the input field.
+     *
+     * @return mixed|Illuminate\View\Component    Return the current object.
+     */
+    public function addAttrs(array $attrs) {
+        if (Arr::isAssoc($attrs)) {
+            $this->attrs = array_merge($this->attrs, $attrs);
+        }
+        return $this;
+    }
 }
diff --git a/src/Traits/WithPrefix.php b/src/Traits/WithPrefix.php
index 61e59bd..a8ebb8c 100644
--- a/src/Traits/WithPrefix.php
+++ b/src/Traits/WithPrefix.php
@@ -6,7 +6,9 @@ trait WithPrefix
 {
     public function prefix($prefix)
     {
-        $this->props['prefix'] = $prefix . '.';
+        if ( !empty($prefix)) {
+            $this->props['prefix'] = $prefix . '.';
+        }
 
         return $this;
     }
diff --git a/src/Traits/WithSizing.php b/src/Traits/WithSizing.php
index 8637aba..9ab27b7 100644
--- a/src/Traits/WithSizing.php
+++ b/src/Traits/WithSizing.php
@@ -4,17 +4,33 @@
 
 trait WithSizing
 {
-    public function small()
-    {
-        $this->props['small'] = true;
+    /**
+     * CSS Class for input wrapper.
+     *
+     * @var string
+     */
+    public $gridClass = 'd-block w-full';
+    protected $colClasses = "col-md-6";
 
+    public function setColClass($classes="") {
+        $this->colClasses = $classes;
         return $this;
     }
 
-    public function large()
-    {
-        $this->props['large'] = true;
+    public function getColClass() {
+        return $this->colClasses;
+    }
 
+    /**
+     * Set CSS Class for input wrapper.
+     *
+     * @param string $classes
+     * @return mixed|Illuminate\View\Component    Return the current object.
+     */
+    public function containerSize($classes='d-block w-full') {
+        $this->gridClass = $classes;
         return $this;
     }
+
+
 }
diff --git a/views/arrayable.blade.php b/views/arrayable.blade.php
index 91dc244..52b62d5 100644
--- a/views/arrayable.blade.php
+++ b/views/arrayable.blade.php
@@ -20,8 +20,9 @@
                         </div>
                     @endforeach
                     <div class="col-md-auto">
-                        <button type="button" class="btn-close px-0"
+                        <button type="button" class="btn-close px-2 btn-danger"
                             wire:click="removeArrayableItem('{{ $name . '.' . $key }}')">
+                            X
                         </button>
                     </div>
                 </div>
diff --git a/views/checkbox.blade.php b/views/checkbox.blade.php
index d14708c..17c59fa 100644
--- a/views/checkbox.blade.php
+++ b/views/checkbox.blade.php
@@ -6,7 +6,7 @@
     ])->merge(array_merge($attrs, ['id' => $name]));
 @endphp
 
-<div class="form-check {{ $props['switch'] ? 'form-switch' : '' }} {{ !$props['prefix'] ? 'mb-3' : '' }}">
+<div class="form-check {{ $props['switch'] ? 'form-switch' : '' }} {{$gridClass}} {{ !$props['prefix'] ? 'mb-3' : '' }}">
     <input {{ $attributes }} wire:model{{ $props['model'] ?? '' }}="data.{{ $name }}">
 
     <label for="{{ $name }}" class="form-check-label">
diff --git a/views/checkboxes.blade.php b/views/checkboxes.blade.php
index 45e2ee3..d639626 100644
--- a/views/checkboxes.blade.php
+++ b/views/checkboxes.blade.php
@@ -6,7 +6,7 @@
     ]);
 @endphp
 
-<div class="{{ !$props['prefix'] ? 'mb-3' : '' }}">
+<div class="{{$gridClass}} {{ !$props['prefix'] ? 'mb-3' : '' }}">
     @isset($props['label'])
         <label class="form-label">
             {{ __($props['label']) }}
diff --git a/views/color.blade.php b/views/color.blade.php
index 0e1325d..9084d12 100644
--- a/views/color.blade.php
+++ b/views/color.blade.php
@@ -8,7 +8,7 @@
     ])->merge(array_merge($attrs, ['id' => $name]));
 @endphp
 
-<div class="{{ !$props['prefix'] ? 'mb-3' : '' }}">
+<div class="{{$gridClass}} {{ !$props['prefix'] ? 'mb-3' : '' }}">
     @isset($props['label'])
         <label for="{{ $name }}" class="form-label">
             {{ __($props['label']) }}
diff --git a/views/column.blade.php b/views/column.blade.php
new file mode 100644
index 0000000..2a5fbf1
--- /dev/null
+++ b/views/column.blade.php
@@ -0,0 +1,19 @@
+@php
+    if ( !empty($props['prefix']) ) {
+        $name = $props['prefix'];
+    } else {
+        $name = '';
+    }
+@endphp
+
+<div class="{{ $field->getColClass() ?? 'col-md-6'}} mb-3">
+    @foreach($props['fields'] as $field)
+        @if ( !method_exists($field, 'prefix') )
+            {{ $field->render()->with($field->data()) }}
+        @else
+            <div class="{{ $field->getColClass() ?? 'col-md-6'}} mb-3">
+                {{ $field->prefix(rtrim($name, "."))->render()->with($field->data()) }}
+            </div>
+        @endif
+    @endforeach
+</div>
diff --git a/views/file.blade.php b/views/file.blade.php
index 23a2515..5499b92 100644
--- a/views/file.blade.php
+++ b/views/file.blade.php
@@ -6,7 +6,7 @@
     ])->merge(array_merge($attrs, ['id' => $name]));
 @endphp
 
-<div class="{{ !$props['prefix'] ? 'mb-3' : '' }}">
+<div class="{{$gridClass}} {{ !$props['prefix'] ? 'mb-3' : '' }}">
     @isset($props['label'])
         <label class="form-label">
             {{ __($props['label']) }}
diff --git a/views/form-component.blade.php b/views/form-component.blade.php
index c9f3189..42610cd 100644
--- a/views/form-component.blade.php
+++ b/views/form-component.blade.php
@@ -1,13 +1,15 @@
 @section('title', __($title))
 
-<form>
+<form  class="{{ $gridClass }}" >
     @foreach($this->fields() as $field)
         {{ $field->render()->with($field->data()) }}
     @endforeach
 
-    <div class="d-flex justify-content-end gap-2">
-        @foreach($this->buttons() as $button)
-            {{ $button->render()->with($button->data()) }}
-        @endforeach
+    <div class="col-md-12">
+        <div class="d-flex justify-content-end gap-2">
+            @foreach($this->buttons() as $button)
+                {{ $button->render()->with($button->data()) }}
+            @endforeach
+        </div>
     </div>
 </form>
diff --git a/views/form-slider-component.blade.php b/views/form-slider-component.blade.php
new file mode 100644
index 0000000..e3c379b
--- /dev/null
+++ b/views/form-slider-component.blade.php
@@ -0,0 +1,78 @@
+<div>
+    <button wire:click="showSlider" type='button' class='px-3 py-2 btn btn-success shadow-none uppercase tracking-wider hover:bg-blue-200 focus:outline-none'>
+        <i class="{{ $btnIcon }}"></i>
+        <span>{{ __($btnText) }}</span>
+    </button>
+
+
+    @if( $sliderActive )
+        <div class="lw-slider-form-holder"  >
+            <div class="lw-slider-form slider-active" >
+                <button wire:click="hideSlider" type='button' class='btn-close px-3 py-2 btn btn-danger btn-xs'>
+                    <i class="fa fa-close"></i>
+                </button>
+
+                @section('title', __($title))
+                <form  class="{{ $gridClass }}" >
+                    @foreach($this->fields() as $field)
+                        {{ $field->render()->with($field->data()) }}
+                    @endforeach
+
+                    <div class="col-md-12">
+                        <div class="d-flex justify-content-end gap-2">
+                            @foreach($this->buttons() as $button)
+                                {{ $button->render()->with($button->data()) }}
+                            @endforeach
+                        </div>
+                    </div>
+                </form>
+            </div>
+        </div>
+    @endif
+    <style>
+        .lw-slider-form-holder {
+            width: 100%;
+            height: 100vh;
+            z-index: 1000000;
+            background-color: #80808069;
+            position: fixed;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+        }
+        .lw-slider-form-holder .lw-slider-form {
+            background-color: white;
+            position: absolute;
+            right: 0;
+            width: 40%;
+            max-width: 720px;
+            padding: 40px;
+            height: 100%;
+            padding-top: 100px;
+            box-shadow: 4px 4px 10px black;
+        }
+        .lw-slider-form-holder .lw-slider-form button.btn-close {
+            padding: 2px 10px !important;
+            float: right;
+            margin-top: -30px;
+        }
+
+        @media (max-width: 576px) {
+            .lw-slider-form-holder .lw-slider-form {
+                width: 100%;
+            }
+        }
+        @media (max-width: 768px) {
+            .lw-slider-form-holder .lw-slider-form {
+                width: 100%;
+            }
+        }
+        @media (max-width: 992px) {
+            .lw-slider-form-holder .lw-slider-form {
+                width: 100%;
+            }
+        }
+    </style>
+</div>
+
diff --git a/views/input.blade.php b/views/input.blade.php
index 7f57621..232697d 100644
--- a/views/input.blade.php
+++ b/views/input.blade.php
@@ -9,7 +9,7 @@
     ])->merge(array_merge($attrs, ['id' => $name]));
 @endphp
 
-<div class="{{ !$props['prefix'] ? 'mb-3' : '' }}">
+<div class="{{$gridClass}} {{ !$props['prefix'] ? 'mb-3' : '' }}">
     @isset($props['label'])
         <label for="{{ $name }}" class="form-label">
             {{ __($props['label']) }}
diff --git a/views/modal-form-component.blade.php b/views/modal-form-component.blade.php
new file mode 100644
index 0000000..b12568d
--- /dev/null
+++ b/views/modal-form-component.blade.php
@@ -0,0 +1,28 @@
+<div class="lv-modal-form lv-block d-inline-block">
+    {{-- The whole world belongs to you. --}}
+    <button type="button" wire:click="createShowModal" class="btn btn-dark mt-3 mb-3">
+        {{ __($btnText) }}
+    </button>
+<form wire:submit.prevent="submit" class="d-inline-block ml-2 mt-sm--3">
+    <x-jet-dialog-modal wire:model="modalFormVisible">
+        <x-slot name="title">
+            {{ $title }}
+        </x-slot>
+
+        <x-slot name="content">
+            @section('title', __($title))
+            <div  class="{{ $gridClass }} row" >
+                @foreach($this->fields() as $field)
+                    {{ $field->render()->with($field->data()) }}
+                @endforeach
+            </div>
+        </x-slot>
+
+        <x-slot name="footer">
+            @foreach($this->buttons() as $button)
+                {{ $button->render()->with($button->data()) }}
+            @endforeach
+        </x-slot>
+    </x-jet-dialog-modal>
+</form>
+</div>
diff --git a/views/radio.blade.php b/views/radio.blade.php
index e436fa2..020af7a 100644
--- a/views/radio.blade.php
+++ b/views/radio.blade.php
@@ -6,7 +6,7 @@
     ]);
 @endphp
 
-<div class="{{ !$props['prefix'] ? 'mb-3' : '' }}">
+<div class="{{$gridClass}} {{ !$props['prefix'] ? 'mb-3' : '' }}">
     @isset($props['label'])
         <label class="form-label">
             {{ __($props['label']) }}
diff --git a/views/row.blade.php b/views/row.blade.php
new file mode 100644
index 0000000..5a5325a
--- /dev/null
+++ b/views/row.blade.php
@@ -0,0 +1,24 @@
+@php
+    if ( !empty($props['prefix']) ) {
+        $name = $props['prefix'];
+    } else {
+        $name = '';
+    }
+@endphp
+
+<div class="{{ $row_class }}">
+    @isset($props['label'])
+        <label class="form-label">
+            {{ __($props['label']) }}
+        </label>
+    @endisset
+    @foreach($props['fields'] as $field)
+        @if ( !method_exists($field, 'prefix') )
+            {{ $field->render()->with($field->data()) }}
+        @else
+            <div class="{{ $field->getColClass() ?? 'col-md-6'}} mb-3">
+                {{ $field->prefix(rtrim($name, "."))->render()->with($field->data()) }}
+            </div>
+        @endif
+    @endforeach
+</div>
diff --git a/views/select.blade.php b/views/select.blade.php
index 02aad49..de83acf 100644
--- a/views/select.blade.php
+++ b/views/select.blade.php
@@ -8,7 +8,7 @@
     ])->merge(array_merge($attrs, ['id' => $name]));
 @endphp
 
-<div class="{{ !$props['prefix'] ? 'mb-3' : '' }}">
+<div class="{{$gridClass}} {{ !$props['prefix'] ? 'mb-3' : '' }}">
     @isset($props['label'])
         <label for="{{ $name }}" class="form-label">
             {{ __($props['label']) }}
diff --git a/views/textarea.blade.php b/views/textarea.blade.php
index 331d02c..018f538 100644
--- a/views/textarea.blade.php
+++ b/views/textarea.blade.php
@@ -8,7 +8,7 @@
     ])->merge(array_merge($attrs, ['id' => $name]));
 @endphp
 
-<div class="{{ !$props['prefix'] ? 'mb-3' : '' }}">
+<div class="{{$gridClass}} {{ !$props['prefix'] ? 'mb-3' : '' }}">
     @isset($props['label'])
         <label for="{{ $name }}" class="form-label">
             {{ __($props['label']) }}