diff --git a/resources/views/infolists/components/swiper-image-entry.blade.php b/resources/views/infolists/components/swiper-image-entry.blade.php
index eda8c27..5984036 100644
--- a/resources/views/infolists/components/swiper-image-entry.blade.php
+++ b/resources/views/infolists/components/swiper-image-entry.blade.php
@@ -1,66 +1,65 @@
 @php
-    $limit = $getLimit();
-    $state = \Illuminate\Support\Arr::wrap($getState());
-    $limitedState = array_slice($state, 0, $limit);
-    $isCircular = $isCircular();
-    $isSquare = $isSquare();
-    $isStacked = $isStacked();
-    $overlap = $isStacked ? ($getOverlap() ?? 2) : null;
-    $ring = $isStacked ? ($getRing() ?? 2) : null;
-    $height = $getHeight() ?? ($isStacked ? '2.5rem' : '8rem');
-    $width = $getWidth() ?? (($isCircular || $isSquare) ? $height : null);
-    $defaultImageUrl = $getDefaultImageUrl();
-    $pagination = $getPagination();
-    $navigation = $getNavigation();
-    $slidesPerView = $getSlidesPerView();
-    $paginationType = $getPaginationType();
-    $autoplay = $getAutoplay();
-    $autoplayDelay = $getAutoplayDelay();
-    $paginationClickable = $getPaginationClickable();
-    $paginationDynamicBullets = $getPaginationDynamicBullets();
-    $paginationDynamicMainBullets = $getPaginationDynamicMainBullets();
-    $paginationHideOnClick = $getPaginationHideOnClick();
-
-    $scrollbar = $getScrollbar();
-    $scrollbarDraggable = $getScrollbarDraggable();
-    $scrollbarHide = $getScrollbarHide();
-    $scrollbarSnapOnRelease = $getScrollbarSnapOnRelease();
-    $scrollbarDragSize = $getScrollbarDragSize();
-
-    $effect = $getEffect();
-
-//    dd($slidesPerView);
-
-    if ((! count($limitedState)) && filled($defaultImageUrl)) {
-        $limitedState = [null];
-    }
-
-    $ringClasses = \Illuminate\Support\Arr::toCssClasses([
-        'ring-white dark:ring-gray-900',
-        match ($ring) {
-            0 => null,
-            1 => 'ring-1',
-            2 => 'ring-2',
-            3 => 'ring',
-            4 => 'ring-4',
-            default => $ring,
-        },
-    ]);
-
-    $hasLimitedRemainingText = $hasLimitedRemainingText();
-    $isLimitedRemainingTextSeparate = $isLimitedRemainingTextSeparate();
-
-    $limitedRemainingTextSizeClasses = match ($getLimitedRemainingTextSize()) {
-        'xs' => 'text-xs',
-        'sm', null => 'text-sm',
-        'base', 'md' => 'text-base',
-        'lg' => 'text-lg',
-        default => $size,
-    };
+$limit = $getLimit();
+$state = \Illuminate\Support\Arr::wrap($getState());
+$limitedState = array_slice($state, 0, $limit);
+$isCircular = $isCircular();
+$isSquare = $isSquare();
+$isStacked = $isStacked();
+$overlap = $isStacked ? ($getOverlap() ?? 2) : null;
+$ring = $isStacked ? ($getRing() ?? 2) : null;
+$height = $getHeight() ?? ($isStacked ? '2.5rem' : '8rem');
+$width = $getWidth() ?? (($isCircular || $isSquare) ? $height : null);
+$defaultImageUrl = $getDefaultImageUrl();
+$pagination = $getPagination();
+$navigation = $getNavigation();
+$slidesPerView = $getSlidesPerView();
+$paginationType = $getPaginationType();
+$autoplay = $getAutoplay();
+$autoplayDelay = $getAutoplayDelay();
+$paginationClickable = $getPaginationClickable();
+$paginationDynamicBullets = $getPaginationDynamicBullets();
+$paginationDynamicMainBullets = $getPaginationDynamicMainBullets();
+$paginationHideOnClick = $getPaginationHideOnClick();
+
+$scrollbar = $getScrollbar();
+$scrollbarDraggable = $getScrollbarDraggable();
+$scrollbarHide = $getScrollbarHide();
+$scrollbarSnapOnRelease = $getScrollbarSnapOnRelease();
+$scrollbarDragSize = $getScrollbarDragSize();
+
+$effect = $getEffect();
+
+// dd($slidesPerView);
+
+if ((! count($limitedState)) && filled($defaultImageUrl)) {
+$limitedState = [null];
+}
+
+$ringClasses = \Illuminate\Support\Arr::toCssClasses([
+'ring-white dark:ring-gray-900',
+match ($ring) {
+0 => null,
+1 => 'ring-1',
+2 => 'ring-2',
+3 => 'ring',
+4 => 'ring-4',
+default => $ring,
+},
+]);
+
+$hasLimitedRemainingText = $hasLimitedRemainingText();
+$isLimitedRemainingTextSeparate = $isLimitedRemainingTextSeparate();
+
+$limitedRemainingTextSizeClasses = match ($getLimitedRemainingTextSize()) {
+'xs' => 'text-xs',
+'sm', null => 'text-sm',
+'base', 'md' => 'text-base',
+'lg' => 'text-lg',
+default => $size,
+};
 @endphp
 
 <style>
-
     * {
         --swiper-theme-color: rgba(var(--primary-600));
         --swiper-scrollbar-drag-bg-color: rgba(var(--primary-600));
@@ -86,75 +85,19 @@
         object-fit: cover;
     }
 </style>
-<div
-    {{
+<div {{
         $attributes
             ->merge($getExtraAttributes(), escape: false)
             ->class([
                 'fi-in-image flex items-center gap-x-2.5',
             ])
-    }}
-
-    ax-load
-    ax-load-src="{{\Filament\Support\Facades\FilamentAsset::getScriptSrc('filament-swiper-scripts',
-        'rupadana/filament-swiper')}}"
->
+    }} ax-load ax-load-src="{{\Filament\Support\Facades\FilamentAsset::getScriptSrc('filament-swiper-scripts',
+        'rupadana/filament-swiper')}}">
     @if (count($limitedState))
-        <swiper-container
-
-            @if($autoplay)
-                autoplay-delay="{{$autoplayDelay}}"
-            autoplay="@js($autoplay)"
-            @endif
-            slides-per-view="@js($slidesPerView)"
-
-            @if($navigation)
-                navigation="@js($navigation)"
-            @endif
-
-
-
-            @if($pagination)
-                pagination="@js($pagination)"
-            pagination-type="{{$paginationType}}"
-            pagination-clickable="@js($paginationClickable)"
-            pagination-dynamic-bullets="@js($paginationDynamicBullets)"
-            pagination-dynamic-main-bullets="{{$paginationDynamicMainBullets}}"
-            pagination-hide-on-click="{{$paginationHideOnClick}}"
-            @endif
-
-            @if($scrollbar)
-                scrollbar="@js($scrollbar)"
-            scrollbar-draggable="@js($scrollbarDraggable)"
-            scrollbar-drag-size="{{$scrollbarDragSize}}"
-            scrollbar-hide="@js($scrollbarHide)"
-            scrollbar-snap-on-release="@js($scrollbarSnapOnRelease)"
-            @endif
-
-
-            effect="{{$effect}}"
-
-            @if($effect == \Rupadana\FilamentSwiper\Infolists\Components\SwiperImageEntry::COVERFLOW_EFFECT)
-                coverflow-effect-modifier="@js($getCoverflowEffectModifier())"
-            coverflow-depth="@js($getCoverflowDepth())"
-            coverflow-slide-shadows="@js($getCoverflowSlideShadows())"
-            coverflow-stretch="@js($getCoverflowStretch())"
-            @endif
-
-            @if($effect == \Rupadana\FilamentSwiper\Infolists\Components\SwiperImageEntry::CARDS_EFFECT)
-                cards-per-slide-offset="@js($getCardsPerSlideOffset())"
-            cards-per-slide-rotate="@js($getCardsPerSlideRotate())"
-            cards-rotate="@js($getCardsRotate())"
-            cards-slide-shadows="@js($getCardsSlideShadows())"
-            @endif
-
-            centered-slides="@js($getCenteredSlides())"
-        >
-            @foreach ($limitedState as $stateItem)
-                <swiper-slide>
-                    <img
-                        src="{{ filled($stateItem) ? $getImageUrl($stateItem) : $defaultImageUrl }}"
-                        {{
+    <swiper-container @if($autoplay) autoplay-delay="{{$autoplayDelay}}" autoplay="@js($autoplay)" @endif slides-per-view="@js($slidesPerView)" @if($navigation) navigation="@js($navigation)" @endif @if($pagination) pagination="@js($pagination)" pagination-type="{{$paginationType}}" pagination-clickable="@js($paginationClickable)" pagination-dynamic-bullets="@js($paginationDynamicBullets)" pagination-dynamic-main-bullets="{{$paginationDynamicMainBullets}}" pagination-hide-on-click="{{$paginationHideOnClick}}" @endif @if($scrollbar) scrollbar="@js($scrollbar)" scrollbar-draggable="@js($scrollbarDraggable)" scrollbar-drag-size="{{$scrollbarDragSize}}" scrollbar-hide="@js($scrollbarHide)" scrollbar-snap-on-release="@js($scrollbarSnapOnRelease)" @endif effect="{{$effect}}" @if($effect==\Rupadana\FilamentSwiper\Infolists\Components\SwiperImageEntry::COVERFLOW_EFFECT) coverflow-effect-modifier="@js($getCoverflowEffectModifier())" coverflow-depth="@js($getCoverflowDepth())" coverflow-slide-shadows="@js($getCoverflowSlideShadows())" coverflow-stretch="@js($getCoverflowStretch())" @endif @if($effect==\Rupadana\FilamentSwiper\Infolists\Components\SwiperImageEntry::CARDS_EFFECT) cards-per-slide-offset="@js($getCardsPerSlideOffset())" cards-per-slide-rotate="@js($getCardsPerSlideRotate())" cards-rotate="@js($getCardsRotate())" cards-slide-shadows="@js($getCardsSlideShadows())" @endif centered-slides="@js($getCenteredSlides())">
+        @foreach ($limitedState as $stateItem)
+        <swiper-slide>
+            <img src="{{ filled($stateItem) ? $getImageUrl($stateItem) : $defaultImageUrl }}" {{
                             $getExtraImgAttributeBag()
                                 ->class([
                                     'max-w-none object-cover object-center',
@@ -165,48 +108,36 @@
                                     "height: {$height}" => $height,
                                     "width: {$width}" => $width,
                                 ])
-                        }}
-                    />
-                </swiper-slide>
-            @endforeach
+                        }} />
+        </swiper-slide>
+        @endforeach
 
-            @if ($hasLimitedRemainingText && ($loop->iteration < count($limitedState)) && (! $isLimitedRemainingTextSeparate) && $isCircular)
-                <div
-                    style="
+        @if ($hasLimitedRemainingText && ($loop->iteration < count($limitedState)) && (! $isLimitedRemainingTextSeparate) && $isCircular) <div style="
                             @if ($height) height: {{ $height }}; @endif
                             @if ($width) width: {{ $width }}; @endif
-                        "
-                    @class([
-                        'flex items-center justify-center bg-gray-100 font-medium text-gray-500 dark:bg-gray-800 dark:text-gray-400',
-                        'rounded-full' => $isCircular,
-                        $limitedRemainingTextSizeClasses,
-                        $ringClasses,
-                    ])
-                    @style([
-                        "height: {$height}" => $height,
-                        "width: {$width}" => $width,
-                    ])
-                >
-                        <span class="-ms-0.5">
-                            +{{ count($state) - count($limitedState) }}
-                        </span>
-                </div>
-            @endif
-        </swiper-container>
-
-        @if ($hasLimitedRemainingText && ($loop->iteration < count($limitedState)) && ($isLimitedRemainingTextSeparate || (! $isCircular)))
-            <div
-                @class([
-                    'font-medium text-gray-500 dark:text-gray-400',
-                    $limitedRemainingTextSizeClasses,
-                ])
+                        " @class([ 'flex items-center justify-center bg-gray-100 font-medium text-gray-500 dark:bg-gray-800 dark:text-gray-400' , 'rounded-full'=> $isCircular,
+            $limitedRemainingTextSizeClasses,
+            $ringClasses,
+            ])
+            @style([
+            "height: {$height}" => $height,
+            "width: {$width}" => $width,
+            ])
             >
+            <span class="-ms-0.5">
                 +{{ count($state) - count($limitedState) }}
-            </div>
-        @endif
+            </span>
+</div>
+@endif
+</swiper-container>
+
+@if ($hasLimitedRemainingText && ($loop->iteration < count($limitedState)) && ($isLimitedRemainingTextSeparate || (! $isCircular))) <div @class([ 'font-medium text-gray-500 dark:text-gray-400' , $limitedRemainingTextSizeClasses, ])>
+    +{{ count($state) - count($limitedState) }}
+    </div>
+    @endif
     @elseif (($placeholder = $getPlaceholder()) !== null)
-        <x-filament-infolists::entries.placeholder>
-            {{ $placeholder }}
-        </x-filament-infolists::entries.placeholder>
+    <x-filament-infolists::entries.placeholder>
+        {{ $placeholder }}
+    </x-filament-infolists::entries.placeholder>
     @endif
-</div>
+    </div>
\ No newline at end of file
diff --git a/resources/views/infolists/components/swiper.blade.php b/resources/views/infolists/components/swiper.blade.php
index ed1ecfc..8e769a6 100644
--- a/resources/views/infolists/components/swiper.blade.php
+++ b/resources/views/infolists/components/swiper.blade.php
@@ -1,6 +1,4 @@
-
 <style>
-
     * {
         --swiper-theme-color: rgba(var(--primary-600));
         --swiper-scrollbar-drag-bg-color: rgba(var(--primary-600));
@@ -33,19 +31,14 @@
         {{$getTitle()}}
     </h2>
 
-    <div
-        {{
+    <div {{
             $attributes
                 ->merge($getExtraAttributes(), escape: false)
                 ->class([
                     'fi-in-image flex items-center gap-x-2.5 max-w-7xl mx-auto px-6 md:px-12 xl:px-6 mt-16',
                 ])
-        }}
-
-        ax-load
-        ax-load-src="{{\Filament\Support\Facades\FilamentAsset::getScriptSrc('filament-swiper-scripts',
-        'rupadana/filament-swiper')}}"
-    >
+        }} ax-load ax-load-src="{{\Filament\Support\Facades\FilamentAsset::getScriptSrc('filament-swiper-scripts',
+        'rupadana/filament-swiper')}}">
 
 
 
@@ -54,4 +47,4 @@
 
     </div>
 
-</div>
+</div>
\ No newline at end of file
diff --git a/src/Infolists/Components/Section.php b/src/Infolists/Components/Section.php
new file mode 100644
index 0000000..41ef93a
--- /dev/null
+++ b/src/Infolists/Components/Section.php
@@ -0,0 +1,119 @@
+<?php
+
+namespace Rupadana\FilamentSwiper\Infolists\Components;
+
+
+use Closure;
+use Filament\Infolists\Components\Component;
+use Filament\Infolists\Components\Concerns\CanBeCollapsed;
+use Filament\Infolists\Components\Concerns\CanBeCompacted;
+use Filament\Infolists\Components\Concerns\EntanglesStateWithSingularRelationship;
+use Filament\Infolists\Components\Concerns\HasHeaderActions;
+use Filament\Support\Concerns\HasDescription;
+use Filament\Support\Concerns\HasExtraAlpineAttributes;
+use Filament\Support\Concerns\HasHeading;
+use Filament\Support\Concerns\HasIcon;
+use Filament\Support\Concerns\HasIconColor;
+use Illuminate\Contracts\Support\Htmlable;
+use Illuminate\Support\Str;
+
+class Section extends Component
+{
+    use CanBeCollapsed;
+    use CanBeCompacted;
+    use EntanglesStateWithSingularRelationship;
+    use HasDescription;
+    use HasExtraAlpineAttributes;
+    use HasHeading;
+    use HasIcon;
+    use HasIconColor;
+
+    /**
+     * @var view-string
+     */
+    protected string $view = 'filament-infolists::components.section';
+
+    protected bool | Closure | null $isAside = null;
+
+    protected bool | Closure $isContentBefore = false;
+
+    /**
+     * @param  string | array<Component> | Htmlable | Closure | null  $heading
+     */
+    final public function __construct(string | array | Htmlable | Closure | null $heading = null)
+    {
+        is_array($heading)
+            ? $this->childComponents($heading)
+            : $this->heading($heading);
+    }
+
+    /**
+     * @param  string | array<Component> | Htmlable | Closure | null  $heading
+     */
+    public static function make(string | array | Htmlable | Closure | null $heading = null): static
+    {
+        $static = app(static::class, ['heading' => $heading]);
+        $static->configure();
+
+        return $static;
+    }
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->columnSpan('full');
+    }
+
+    public function aside(bool | Closure | null $condition = true): static
+    {
+        $this->isAside = $condition;
+
+        return $this;
+    }
+
+    public function getId(): ?string
+    {
+        $id = parent::getId();
+
+        if (filled($id)) {
+            return $id;
+        }
+
+        $heading = $this->getHeading();
+
+        if (blank($heading)) {
+            return null;
+        }
+
+        $id = Str::slug($heading);
+
+        if ($statePath = $this->getStatePath()) {
+            $id = "{$statePath}.{$id}";
+        }
+
+        return $id;
+    }
+
+    public function getKey(): ?string
+    {
+        return parent::getKey() ?? ($this->getActions() ? $this->getId() : null);
+    }
+
+    public function isAside(): bool
+    {
+        return (bool) ($this->evaluate($this->isAside) ?? false);
+    }
+
+    public function contentBefore(bool | Closure $condition = true): static
+    {
+        $this->isContentBefore = $condition;
+
+        return $this;
+    }
+
+    public function isContentBefore(): bool
+    {
+        return (bool) $this->evaluate($this->isContentBefore);
+    }
+}
diff --git a/src/Infolists/Components/Swiper.php b/src/Infolists/Components/Swiper.php
index 1ef7be3..d2141b7 100644
--- a/src/Infolists/Components/Swiper.php
+++ b/src/Infolists/Components/Swiper.php
@@ -2,7 +2,6 @@
 
 namespace Rupadana\FilamentSwiper\Infolists\Components;
 
-use App\Livewire\Components\Section;
 use Rupadana\FilamentSwiper\Infolists\Components\Concerns\HasEffect;
 use Rupadana\FilamentSwiper\Infolists\Components\Concerns\HasLoop;
 use Rupadana\FilamentSwiper\Infolists\Components\Concerns\HasPagination;
@@ -117,7 +116,7 @@ public function centeredSlides(bool $centeredSlides = true): Swiper
 
     public function getChildComponentContainers(bool $withHidden = false): array
     {
-        if (! $this->hasChildComponentContainer($withHidden)) {
+        if (!$this->hasChildComponentContainer($withHidden)) {
             return [];
         }
 
diff --git a/src/Infolists/Components/SwiperImageEntry.php b/src/Infolists/Components/SwiperImageEntry.php
index 800d64f..507846b 100644
--- a/src/Infolists/Components/SwiperImageEntry.php
+++ b/src/Infolists/Components/SwiperImageEntry.php
@@ -150,7 +150,7 @@ public function getImageUrl(string $state = null): ?string
 
         $record = $this->getRecord();
 
-        if (! $record) {
+        if (!$record) {
             return null;
         }
 
@@ -163,7 +163,7 @@ public function getImageUrl(string $state = null): ?string
         /** @var ?Media $media */
         $media = $record->media->first(fn (Media $media): bool => $media->uuid === $state);
 
-        if (! $media) {
+        if (!$media) {
             return null;
         }