diff --git a/_components/_bkp/card.blade.php b/_components/_bkp/card.blade.php
deleted file mode 100644
index aa17b20..0000000
--- a/_components/_bkp/card.blade.php
+++ /dev/null
@@ -1,20 +0,0 @@
-<div class="w-full mx-auto rounded-lg bg-white shadow p-5 text-gray-800" style="max-width: 400px">
-    <div class="w-full flex mb-4">
-        <div class="overflow-hidden rounded-full w-12 h-12">
-            <img src="https://uifaces.co/our-content/donated/1H_7AxP0.jpg" alt="">
-        </div>
-        <div class="flex-grow pl-3">
-            <h6 class="font-bold text-md">Joe Blow</h6>
-            <p class="text-xs text-gray-600">@joe.blow</p>
-        </div>
-        <div class="w-12 text-right">
-            <i class="mdi mdi-twitter text-blue-400 text-3xl"></i>
-        </div>
-    </div>
-    <div class="w-full mb-4">
-        <p class="text-sm">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nam obcaecati laudantium recusandae, debitis eum voluptatem ad, illo voluptatibus temporibus odio provident. Laboriosam accusamus necessitatibus tenetur praesentium ullam voluptates nulla reprehenderit? 🤣</p>
-    </div>
-    <div class="w-full">
-        <p class="text-xs text-gray-500 text-right">Oct 15th 8:33pm</p>
-    </div>
-</div>
diff --git a/_components/_bkp/modal.blade.php b/_components/_bkp/modal.blade.php
deleted file mode 100644
index bb6759b..0000000
--- a/_components/_bkp/modal.blade.php
+++ /dev/null
@@ -1,21 +0,0 @@
-<div>
-	<div class="md:w-1/3 sm:w-full rounded-lg shadow-xl bg-white my-3">
-        <div class="flex justify-between border-b border-gray-100 px-5 py-4">
-      		<div>
-              <i class="fas fa-exclamation-circle text-blue-500"></i>
-              <span class="font-bold text-gray-700 text-lg">Information</span>
-          	</div>
-          <div>
-              <button><i class="fa fa-times-circle text-red-500 hover:text-red-600 transition duration-150"></i></button>
-          	</div>
-      	</div>
-
-      	<div class="px-10 py-5 text-gray-600">
-          Lorem ipsum dolor sit amet, consectetur adipi scing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-      	</div>
-
-      	<div class="px-5 py-4 flex justify-end">
-          <button class="text-sm py-2 px-3 text-gray-500 hover:text-gray-600 transition duration-150">Close</button>
-      	</div>
-    </div>
-</div>
diff --git a/_components/_bkp/progress-bar.blade.php b/_components/_bkp/progress-bar.blade.php
deleted file mode 100644
index 194c035..0000000
--- a/_components/_bkp/progress-bar.blade.php
+++ /dev/null
@@ -1,122 +0,0 @@
-    <div
-        class="my-12"
-        x-data="{ width: '50' }"
-        x-init="$watch('width', value => { if (value > 100) { width = 100 } if (value == 0) { width = 10 } })"
-        >
-
-        <!-- Light mode -->
-        <div class="p-10 max-w-full bg-white shadow rounded">
-            <!-- Start Light version -->
-            <div
-                class="bg-gray-200 rounded h-1"
-                role="progressbar"
-                :aria-valuenow="width"
-                aria-valuemin="0"
-                aria-valuemax="100"
-                >
-                <div
-                    class="bg-green-400 rounded h-1 text-center"
-                    :style="`width: ${width}%; transition: width 2s;`"
-                    >
-                </div>
-            </div>
-            <!-- End Light version -->
-
-            <!-- Start Regular version -->
-            <div
-                class="bg-gray-200 rounded h-4 mt-5"
-                role="progressbar"
-                :aria-valuenow="width"
-                aria-valuemin="0"
-                aria-valuemax="100"
-                >
-                <div
-                    class="bg-green-400 rounded h-4 text-center"
-                    :style="`width: ${width}%; transition: width 2s;`"
-                    >
-                </div>
-            </div>
-            <!-- End Regular version -->
-
-            <!-- Start Regular with text version -->
-            <div
-                class="bg-gray-200 rounded h-6 mt-5"
-                role="progressbar"
-                :aria-valuenow="width"
-                aria-valuemin="0"
-                aria-valuemax="100"
-                >
-                <div
-                    class="bg-green-400 rounded h-6 text-center text-white text-sm transition"
-                    :style="`width: ${width}%; transition: width 2s;`"
-                    x-text="`${width}%`"
-                    >
-                </div>
-            </div>
-            <!-- End Regular with text version -->
-        </div>
-
-        <!-- Dark mode -->
-        <div class="p-10 my-10 max-w-full bg-gray-800 shadow rounded">
-            <!-- Start Light version -->
-            <div
-                class="bg-gray-900 rounded h-1"
-                role="progressbar"
-                :aria-valuenow="width"
-                aria-valuemin="0"
-                aria-valuemax="100"
-                >
-                <div
-                    class="bg-blue-800 rounded h-1 text-center"
-                    :style="`width: ${width}%; transition: width 2s;`"
-                    >
-                </div>
-            </div>
-            <!-- End Light version -->
-
-            <!-- Start Regular version -->
-            <div
-                class="bg-gray-900 rounded h-4 mt-5"
-                role="progressbar"
-                :aria-valuenow="width"
-                aria-valuemin="0"
-                aria-valuemax="100"
-                >
-                <div
-                    class="bg-blue-800 rounded h-4 text-center"
-                    :style="`width: ${width}%; transition: width 2s;`"
-                    >
-                </div>
-            </div>
-            <!-- End Regular version -->
-
-            <!-- Start Regular with text version -->
-            <div
-                class="bg-gray-900 rounded h-6 mt-5"
-                role="progressbar"
-                :aria-valuenow="width"
-                aria-valuemin="0"
-                aria-valuemax="100"
-                >
-                <div
-                    class="bg-blue-800 rounded h-6 text-center text-white text-sm transition"
-                    :style="`width: ${width}%; transition: width 2s;`"
-                    x-text="`${width}%`"
-                    >
-                </div>
-            </div>
-            <!-- End Regular with text version -->
-        </div>
-
-        <div class="mt-10">
-            Type a value
-            <input
-                   class="border border-gray-500 rounded"
-                   type="number"
-                   class="form-input"
-                   x-model="width"
-                   min="1"
-                   max="100"
-                   >
-        </div>
-    </div>
diff --git a/_components/_bkp/toast.blade.php b/_components/_bkp/toast.blade.php
deleted file mode 100644
index 253e490..0000000
--- a/_components/_bkp/toast.blade.php
+++ /dev/null
@@ -1,90 +0,0 @@
-<div>
-    <div x-data="noticesHandler()" @notice.window="add($event.detail)">
-        <div class="fixed right-0 top-0 m-5 w-1/2 xl:w-1/5 lg:w-1/4 md:w-2/5 sm:w-1/2" >
-            <template x-for="notice of notices" :key="notice.id">
-                <div
-                    x-show="visible.includes(notice)"
-                    x-transition:enter="transition ease-in duration-200"
-                    x-transition:enter-start="transform opacity-0 translate-y-2"
-                    x-transition:enter-end="transform opacity-100"
-                    x-transition:leave="transition ease-out duration-500"
-                    x-transition:leave-start="transform translate-x-0 opacity-100"
-                    x-transition:leave-end="transform translate-x-full opacity-0"
-                    @click="remove(notice.id)"
-                    class="py-2 px-3 shadow-xl mb-2 border-r-4 grid grid-cols-4"
-                    :class="{
-                        'bg-green-500 border-green-700': notice.type === 'success',
-                        'bg-blue-400 border-blue-700': notice.type === 'info',
-                        'bg-orange-400 border-orange-700': notice.type === 'warning',
-                        'bg-red-500 border-red-700': notice.type === 'danger',
-                    }"
-                    style="pointer-events:all"
-                >
-                    <div class="col-start-1 col-span-3">
-                        <div class="text-white text-right">
-                            <span x-text="notice.text"></span>
-                        </div>
-                    </div>
-                    <div class="col-start-4 col-span-1" x-html="getIcon(notice)"></div>
-                </div>
-            </template>
-        </div>
-    </div>
-
-    <button x-data="{}"
-            @click="$dispatch('notice', {type: 'success', text: 'آلرت ساکسس'})"
-            class="m-4 bg-green-500 text-lg font-bold p-6 py-2 text-white shadow rounded">
-        Success
-    </button>
-    <button x-data="{}"
-            @click="$dispatch('notice', {type: 'info', text: 'آلرت اینفو'})"
-            class="m-4 bg-blue-500 text-lg font-bold p-6 py-2 text-white shadow rounded">
-        Info
-    </button>
-    <button x-data="{}"
-            @click="$dispatch('notice', {type: 'warning', text: 'آلرت وارنینگ'})"
-            class="m-4 bg-orange-500 text-lg font-bold p-6 py-2 text-white shadow rounded">
-        Warning
-    </button>
-    <button x-data="{}"
-            x-on:click="$dispatch('notice', {type: 'danger', text: 'آلرت دنجر'})"
-            class="m-4 bg-red-500 text-lg font-bold p-6 py-2 text-white shadow rounded">
-        Danger
-    </button>
-
-    <script>
-        function noticesHandler() {
-            return {
-                notices: [],
-                visible: [],
-                add(notice) {
-                    notice.id = Date.now()
-                    this.notices.push(notice)
-                    this.fire(notice.id)
-                },
-                fire(id) {
-                    this.visible.push(this.notices.find(notice => notice.id == id))
-                    const timeShown = 500 * this.visible.length
-                    setTimeout(() => {
-                        this.remove(id)
-                    }, timeShown)
-                },
-                remove(id) {
-                    const notice = this.visible.find(notice => notice.id == id)
-                    const index = this.visible.indexOf(notice)
-                    this.visible.splice(index, 1)
-                },
-                getIcon(notice){
-                    if ( notice.type == 'success')
-                        return "<div class='text-green-500 rounded-full bg-white float-left' ><svg width='1.8em' height='1.8em' viewBox='0 0 16 16' class='bi bi-check' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z'/></svg></div>" ;
-                    else if ( notice.type == 'info')
-                        return  "<div class='text-blue-500 rounded-full bg-white float-left'><svg width='1.8em' height='1.8em' viewBox='0 0 16 16' class='bi bi-info' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='M8.93 6.588l-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588z'/><circle cx='8' cy='4.5' r='1'/></svg></div>" ;
-                    else if ( notice.type == 'warning')
-                        return  "<div class='text-orange-500 rounded-full bg-white float-left'><svg width='1.8em' height='1.8em' viewBox='0 0 16 16' class='bi bi-exclamation' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z'/></svg></div>" ;
-                    else if ( notice.type == 'danger')
-                        return  "<div class='text-red-500 rounded-full bg-white float-left'><svg width='1.8em' height='1.8em' viewBox='0 0 16 16' class='bi bi-x' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M11.854 4.146a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708-.708l7-7a.5.5 0 0 1 .708 0z'/><path fill-rule='evenodd' d='M4.146 4.146a.5.5 0 0 0 0 .708l7 7a.5.5 0 0 0 .708-.708l-7-7a.5.5 0 0 0-.708 0z'/></svg></div>" ;
-                }
-            };
-        }
-    </script>
-</div>
diff --git a/_components/card.blade.php b/_components/card.blade.php
deleted file mode 100644
index 80e8cd7..0000000
--- a/_components/card.blade.php
+++ /dev/null
@@ -1,38 +0,0 @@
-    <div class="min-w-screen min-h-screen bg-gray-200 flex items-center justify-center px-5 py-5">
-        <div class="w-full mx-auto rounded-lg bg-white shadow p-5 text-gray-800" style="max-width: 400px">
-            <div class="w-full flex mb-4">
-                <div class="overflow-hidden rounded-full w-12 h-12">
-                    <img src="https://uifaces.co/our-content/donated/1H_7AxP0.jpg" alt="">
-                </div>
-                <div class="flex-grow pl-3">
-                    <h6 class="font-bold text-md">Joe Blow</h6>
-                    <p class="text-xs text-gray-600">@joe.blow</p>
-                </div>
-                <div class="w-12 text-right">
-                    <i class="mdi mdi-twitter text-blue-400 text-3xl"></i>
-                </div>
-            </div>
-            <div class="w-full mb-4">
-                <p class="text-sm">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nam obcaecati laudantium recusandae, debitis eum voluptatem ad, illo voluptatibus temporibus odio provident. Laboriosam accusamus necessitatibus tenetur praesentium ullam voluptates nulla reprehenderit? 🤣</p>
-            </div>
-            <div class="w-full">
-                <p class="text-xs text-gray-500 text-right">Oct 15th 8:33pm</p>
-            </div>
-        </div>
-    </div>
-
-
-
-    <!-- component -->
-<div class="max-w-md py-4 px-8 bg-white shadow-lg rounded-lg my-20">
-    <div class="flex justify-center md:justify-end -mt-16">
-      <img class="w-20 h-20 object-cover rounded-full border-2 border-indigo-500" src="https://images.unsplash.com/photo-1499714608240-22fc6ad53fb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80">
-    </div>
-    <div>
-      <h2 class="text-gray-800 text-3xl font-semibold">Design Tools</h2>
-      <p class="mt-2 text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae dolores deserunt ea doloremque natus error, rerum quas odio quaerat nam ex commodi hic, suscipit in a veritatis pariatur minus consequuntur!</p>
-    </div>
-    <div class="flex justify-end mt-4">
-      <a href="#" class="text-xl font-medium text-indigo-500">John Doe</a>
-    </div>
-  </div>
diff --git a/config/tall-kit.php b/config/tall-kit.php
index e614fa8..9d54ec8 100644
--- a/config/tall-kit.php
+++ b/config/tall-kit.php
@@ -73,6 +73,11 @@
         'socialmeta' => \Datalogix\TALLKit\Components\Layouts\SocialMeta::class, //alias
 
         /**
+         * Modals.
+         */
+        'modal' => \Datalogix\TALLKit\Components\Modals\Modal::class,
+
+        /**x
          * Navigations.
          */
         'dropdown' => \Datalogix\TALLKit\Components\Navigations\Dropdown::class,
@@ -743,6 +748,65 @@
 
             'social-meta' => [],
 
+            /**
+             * Modals.
+             */
+            'modal' => [
+                'container' => [
+                    'x-data' => '{
+                        show: false,
+                        focusables() {
+                            // All focusable element types...
+                            let selector = \'a, button, input, textarea, select, details, [tabindex]:not([tabindex=-1])\'
+
+                            return [...$el.querySelectorAll(selector)]
+                                // All non-disabled elements...
+                                .filter(el => ! el.hasAttribute(\'disabled\'))
+                        },
+                        firstFocusable() { return this.focusables()[0] },
+                        lastFocusable() { return this.focusables().slice(-1)[0] },
+                        nextFocusable() { return this.focusables()[this.nextFocusableIndex()] || this.firstFocusable() },
+                        prevFocusable() { return this.focusables()[this.prevFocusableIndex()] || this.lastFocusable() },
+                        nextFocusableIndex() { return (this.focusables().indexOf(document.activeElement) + 1) % (this.focusables().length + 1) },
+                        prevFocusableIndex() { return Math.max(0, this.focusables().indexOf(document.activeElement)) -1 },
+                    }',
+                    '@close.stop' => 'show = false',
+                    '@keydown.escape.window' => 'show = false',
+                    '@keydown.tab.prevent' => '$event.shiftKey || nextFocusable().focus()',
+                    '@keydown.shift.tab.prevent' => 'prevFocusable().focus()',
+                    'x-show' => 'show',
+                    'class' => 'fixed top-0 inset-x-0 px-4 pt-6 z-50 flex items-top justify-center',
+                    'style' => 'display: none;',
+                ],
+
+                'overlay' => [
+                    'x-show' => 'show',
+                    'class' => 'fixed inset-0 transform transition-all',
+                    '@click' => 'show = false',
+                    'x-transition:enter' => 'ease-out duration-300',
+                    'x-transition:enter-start' => 'opacity-0',
+                    'x-transition:enter-end' => 'opacity-100',
+                    'x-transition:leave' => 'ease-in duration-200',
+                    'x-transition:leave-start' => 'opacity-100',
+                    'x-transition:leave-end' => 'opacity-0',
+                ],
+
+                'backdrop' => [
+                    'class' => 'absolute inset-0 bg-gray-500 opacity-75',
+                ],
+
+                'modal' => [
+                    'x-show' => 'show',
+                    'class' => 'bg-white p-4 rounded overflow-hidden shadow transform transition-all w-full',
+                    'x-transition:enter' => 'ease-out duration-300',
+                    'x-transition:enter-start' => 'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95',
+                    'x-transition:enter-end' => 'opacity-100 translate-y-0 sm:scale-100',
+                    'x-transition:leave' => 'ease-in duration-200',
+                    'x-transition:leave-start' => 'opacity-100 translate-y-0 sm:scale-100',
+                    'x-transition:leave-end' => 'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95',
+                ],
+            ],
+
             /**
              * Navigations.
              */
diff --git a/resources/views/components/modals/modal.blade.php b/resources/views/components/modals/modal.blade.php
new file mode 100644
index 0000000..7279aae
--- /dev/null
+++ b/resources/views/components/modals/modal.blade.php
@@ -0,0 +1,9 @@
+<div {{ $themeProvider->container }}>
+    <div {{ $themeProvider->overlay }}>
+        <div {{ $themeProvider->backdrop }}></div>
+    </div>
+
+    <div {{ $attributes->merge(toArray($themeProvider->modal)) }}>
+        {{ $slot }}
+    </div>
+</div>
diff --git a/src/Components/Modals/Modal.php b/src/Components/Modals/Modal.php
new file mode 100644
index 0000000..989661c
--- /dev/null
+++ b/src/Components/Modals/Modal.php
@@ -0,0 +1,17 @@
+<?php
+
+namespace Datalogix\TALLKit\Components\Modals;
+
+use Datalogix\TALLKit\Components\BladeComponent;
+
+class Modal extends BladeComponent
+{
+    /**
+     * The assets of component.
+     *
+     * @var array
+     */
+    protected static $assets = [
+        'alpine',
+    ];
+}