diff --git a/docs/getting-started/blade-component.md b/docs/getting-started/blade-component.md
new file mode 100644
index 0000000..4bbfda0
--- /dev/null
+++ b/docs/getting-started/blade-component.md
@@ -0,0 +1,36 @@
+---
+title: Blade Component
+weight: 4
+---
+
+## Accordion Blade Component
+
+you can use accordion as a blade component in any view you want
+
+```html
+<x-zeus-accordion::accordion activeAccordion="3">
+    <x-zeus-accordion::accordion.item
+            :isIsolated="true"
+            :label="__('title')"
+            icon="heroicon-o-chevron-right"
+    >
+        <div class="bg-white p-4 *:py-2">
+            <p>title</p>
+            <p>title</p>
+        </div>
+    </x-zeus-accordion::accordion.item>
+
+    <x-zeus-accordion::accordion.item
+            :isIsolated="true"
+            :label="__('info')"
+            icon="heroicon-o-chevron-right"
+    >
+        <div class="bg-white p-4 *:py-2">
+            <p>info</p>
+            <p>info</p>
+            <p>info</p>
+        </div>
+    </x-zeus-accordion::accordion.item>
+
+</x-zeus-accordion::accordion>
+```
\ No newline at end of file
diff --git a/resources/views/components/accordion/index.blade.php b/resources/views/components/accordion/index.blade.php
new file mode 100644
index 0000000..11c4e99
--- /dev/null
+++ b/resources/views/components/accordion/index.blade.php
@@ -0,0 +1,13 @@
+@props([
+    'activeAccordion' => 1,
+])
+<div x-data="{
+        activeAccordion: 'accordion-{{ $activeAccordion }}',
+        setActiveAccordion(id) {
+            this.activeAccordion = (this.activeAccordion == id) ? '' : id
+        }
+    }"
+     class="fi-accordion rounded-xl bg-white shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10 relative w-full mx-auto overflow-hidden divide-y divide-gray-200 dark:divide-white/5"
+>
+    {{ $slot }}
+</div>
\ No newline at end of file
diff --git a/resources/views/components/accordion/item.blade.php b/resources/views/components/accordion/item.blade.php
new file mode 100644
index 0000000..1afa591
--- /dev/null
+++ b/resources/views/components/accordion/item.blade.php
@@ -0,0 +1,45 @@
+@props([
+    'activeAccordion' => 1,
+    'isIsolated' => false,
+    'icon' => null,
+    'label' => '',
+])
+<div
+    x-data="{
+        id: $id('accordion'),
+        @if($isIsolated) activeAccordion: 'accordion-{{ $activeAccordion }}', @endif
+    }"
+    class="fi-accordion-item group"
+>
+    <button
+            type="button"
+            @click="setActiveAccordion(id)"
+            class="flex items-center justify-between w-full p-4 text-start select-none"
+            :class="{
+                'bg-gray-100 dark:bg-gray-800': activeAccordion == id,
+                'bg-white': activeAccordion != id,
+             }"
+    >
+        <span
+            :class="{
+                'text-primary-600': activeAccordion == id ,
+                'text-gray-500': activeAccordion != id
+            }"
+            class="flex gap-2 font-medium items-center justify-center text-gray-500 group-hover:text-primary-600"
+        >
+            @if ($icon !== null)
+                <x-filament::icon
+                    :icon="$icon"
+                    class="fi-accordion-item-icon h-6 w-6 shrink-0 transition duration-75"
+                />
+            @endif
+            {{ $label }}
+        </span>
+        <span :class="{ 'rotate-180': activeAccordion == id }">
+            @svg('heroicon-c-chevron-down','w-4 h-4 duration-200 ease-out')
+        </span>
+    </button>
+    <div class="p-4" x-show="activeAccordion == id" x-collapse x-cloak>
+        {{ $slot }}
+    </div>
+</div>
\ No newline at end of file
diff --git a/resources/views/forms/accordion.blade.php b/resources/views/forms/accordion.blade.php
index ffc78af..d8b994f 100644
--- a/resources/views/forms/accordion.blade.php
+++ b/resources/views/forms/accordion.blade.php
@@ -1,5 +1,3 @@
-<div
-    class="fi-fo-accordions-accordion outline-none p-6"
->
+<div>
     {{ $getChildComponentContainer() }}
 </div>
diff --git a/resources/views/forms/accordions.blade.php b/resources/views/forms/accordions.blade.php
index 973a4f3..c9e5f4d 100644
--- a/resources/views/forms/accordions.blade.php
+++ b/resources/views/forms/accordions.blade.php
@@ -10,7 +10,7 @@
             ->merge($getExtraAttributes(), escape: false)
             ->merge($getExtraAlpineAttributes(), escape: false)
             ->class([
-                'fi-fo-accordions rounded-xl bg-white shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10',
+                'rounded-xl bg-white shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10',
             ])
     }}
 >
@@ -20,49 +20,15 @@
         $getActiveAccordion = $getActiveAccordion();
     @endphp
 
-    <div x-data="{
-                    activeAccordion: 'accordion-{{ $getActiveAccordion }}',
-                    setActiveAccordion(id) {
-                        this.activeAccordion = (this.activeAccordion == id) ? '' : id
-                    }
-                }"
-         class="relative w-full mx-auto overflow-hidden text-sm divide-y divide-gray-200 dark:divide-white/5 rounded-xl"
-    >
+    <x-zeus-accordion::accordion :activeAccordion="$getActiveAccordion">
         @foreach ($getChildComponentContainer()->getComponents() as $accordion)
-            <div
-                x-data="{
-                    id: $id('accordion'),
-                    @if($isIsolated) activeAccordion: 'accordion-{{ $getActiveAccordion }}', @endif
-                }"
-                 class="cursor-pointer group">
-                <button
-                    type="button"
-                    @click="setActiveAccordion(id)"
-                    :class="{ 'bg-gray-100 dark:bg-gray-800': activeAccordion == id }"
-                    class="flex items-center justify-between w-full p-4 text-start select-none"
-                >
-                    <span
-                        :class="{
-                                'text-primary-600': activeAccordion == id ,
-                                'text-gray-500': activeAccordion != id
-                            }"
-                        class="flex gap-2 font-medium items-center justify-center text-gray-500 group-hover:text-primary-600">
-                        @if ($accordion->getIcon())
-                            <x-filament::icon
-                                :icon="$accordion->getIcon()"
-                                class="fi-accordion-item-icon h-6 w-6 shrink-0 transition duration-75"
-                            />
-                        @endif
-                        {{ $accordion->getLabel() }}
-                    </span>
-                    <span :class="{ 'rotate-180': activeAccordion == id }">
-                        @svg('heroicon-c-chevron-down','w-4 h-4 duration-200 ease-out')
-                    </span>
-                </button>
-                <div x-show="activeAccordion == id" x-collapse x-cloak>
-                    {{ $accordion }}
-                </div>
-            </div>
+            <x-zeus-accordion::accordion.item
+                    :label="$accordion->getLabel()"
+                    :icon="$accordion->getIcon()"
+                    :isIsolated="$isIsolated"
+                    :activeAccordion="$getActiveAccordion">
+                {{ $accordion }}
+            </x-zeus-accordion::accordion.item>
         @endforeach
-    </div>
+    </x-zeus-accordion::accordion>
 </div>