diff --git a/docs-assets/app/app/Livewire/Infolists/LayoutDemo.php b/docs-assets/app/app/Livewire/Infolists/LayoutDemo.php
deleted file mode 100644
index ac619fcfc6..0000000000
--- a/docs-assets/app/app/Livewire/Infolists/LayoutDemo.php
+++ /dev/null
@@ -1,428 +0,0 @@
-<?php
-
-namespace App\Livewire\Infolists;
-
-use Filament\Actions\Action;
-use Filament\Forms\Concerns\InteractsWithForms;
-use Filament\Forms\Contracts\HasForms;
-use Filament\Infolists\Components\IconEntry;
-use Filament\Infolists\Components\RepeatableEntry;
-use Filament\Infolists\Components\TextEntry;
-use Filament\Infolists\Concerns\InteractsWithInfolists;
-use Filament\Infolists\Contracts\HasInfolists;
-use Filament\Schema\Components\Actions;
-use Filament\Schema\Components\Fieldset;
-use Filament\Schema\Components\Grid;
-use Filament\Schema\Components\Group;
-use Filament\Schema\Components\Section;
-use Filament\Schema\Components\Split;
-use Filament\Schema\Components\Tabs;
-use Filament\Schema\Components\Tabs\Tab;
-use Filament\Schema\Schema;
-use Filament\Support\Enums\Alignment;
-use Filament\Support\Enums\FontWeight;
-use Filament\Support\Enums\IconPosition;
-use Filament\Support\Enums\VerticalAlignment;
-use Livewire\Component;
-
-class LayoutDemo extends Component implements HasForms, HasInfolists
-{
-    use InteractsWithForms;
-    use InteractsWithInfolists;
-
-    public function infolist(Schema $infolist): Schema
-    {
-        return $infolist
-            ->schema([
-                Group::make()
-                    ->id('fieldset')
-                    ->extraAttributes([
-                        'class' => 'p-16 max-w-2xl',
-                    ])
-                    ->schema([
-                        Fieldset::make('Rate limiting')
-                            ->schema([
-                                TextEntry::make('hits')
-                                    ->state(30),
-                                TextEntry::make('period')
-                                    ->state('Hour'),
-                                TextEntry::make('maximum')
-                                    ->state(100),
-                            ])
-                            ->columns(3),
-                    ]),
-                Group::make()
-                    ->id('tabs')
-                    ->extraAttributes([
-                        'class' => 'p-16 max-w-2xl',
-                    ])
-                    ->schema([
-                        Tabs::make('Tabs')
-                            ->schema([
-                                Tab::make('Rate Limiting')
-                                    ->schema([
-                                        TextEntry::make('hits')
-                                            ->state(30),
-                                        TextEntry::make('period')
-                                            ->state('Hour'),
-                                        TextEntry::make('maximum')
-                                            ->state(100),
-                                        TextEntry::make('notes')
-                                            ->state('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam ultricies, nunc nisl aliquet nunc, quis aliquam nisl.')
-                                            ->columnSpanFull(),
-                                    ])
-                                    ->columns(3),
-                                Tab::make('Proxy'),
-                                Tab::make('Meta'),
-                            ]),
-                    ]),
-                Group::make()
-                    ->id('tabsIcons')
-                    ->extraAttributes([
-                        'class' => 'p-16 max-w-2xl',
-                    ])
-                    ->schema([
-                        Tabs::make('Tabs')
-                            ->schema([
-                                Tab::make('Notifications')
-                                    ->icon('heroicon-m-bell')
-                                    ->schema([
-                                        IconEntry::make('enabled')
-                                            ->boolean()
-                                            ->state(true),
-                                        TextEntry::make('frequency')
-                                            ->state('Hourly'),
-                                        TextEntry::make('notes')
-                                            ->state('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam ultricies, nunc nisl aliquet nunc, quis aliquam nisl.')
-                                            ->columnSpanFull(),
-                                    ])
-                                    ->columns(2),
-                                Tab::make('Security')
-                                    ->icon('heroicon-m-lock-closed'),
-                                Tab::make('Meta')
-                                    ->icon('heroicon-m-bars-3-center-left'),
-                            ]),
-                    ]),
-                Group::make()
-                    ->id('tabsIconsAfter')
-                    ->extraAttributes([
-                        'class' => 'p-16 max-w-2xl',
-                    ])
-                    ->schema([
-                        Tabs::make('Tabs')
-                            ->schema([
-                                Tab::make('Notifications')
-                                    ->icon('heroicon-m-bell')
-                                    ->iconPosition(IconPosition::After)
-                                    ->schema([
-                                        IconEntry::make('enabled')
-                                            ->boolean()
-                                            ->state(true),
-                                        TextEntry::make('frequency')
-                                            ->state('Hourly'),
-                                        TextEntry::make('notes')
-                                            ->state('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam ultricies, nunc nisl aliquet nunc, quis aliquam nisl.')
-                                            ->columnSpanFull(),
-                                    ])
-                                    ->columns(2),
-                                Tab::make('Security')
-                                    ->icon('heroicon-m-lock-closed')
-                                    ->iconPosition(IconPosition::After),
-                                Tab::make('Meta')
-                                    ->icon('heroicon-m-bars-3-center-left')
-                                    ->iconPosition(IconPosition::After),
-                            ]),
-                    ]),
-                Group::make()
-                    ->id('tabsBadges')
-                    ->extraAttributes([
-                        'class' => 'p-16 max-w-2xl',
-                    ])
-                    ->schema([
-                        Tabs::make('Tabs')
-                            ->schema([
-                                Tab::make('Notifications')
-                                    ->badge(5)
-                                    ->schema([
-                                        IconEntry::make('enabled')
-                                            ->boolean()
-                                            ->state(true),
-                                        TextEntry::make('frequency')
-                                            ->state('Hourly'),
-                                        TextEntry::make('notes')
-                                            ->state('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam ultricies, nunc nisl aliquet nunc, quis aliquam nisl.')
-                                            ->columnSpanFull(),
-                                    ])
-                                    ->columns(2),
-                                Tab::make('Security'),
-                                Tab::make('Meta'),
-                            ]),
-                    ]),
-                Group::make()
-                    ->id('section')
-                    ->extraAttributes([
-                        'class' => 'p-16 max-w-2xl',
-                    ])
-                    ->schema([
-                        Section::make('Rate limiting')
-                            ->description('Prevent abuse by limiting the number of requests per period')
-                            ->schema([
-                                TextEntry::make('hits')
-                                    ->state(30),
-                                TextEntry::make('period')
-                                    ->state('Hour'),
-                                TextEntry::make('maximum')
-                                    ->state(100),
-                                TextEntry::make('notes')
-                                    ->state('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam ultricies, nunc nisl aliquet nunc, quis aliquam nisl.')
-                                    ->columnSpanFull(),
-                            ])
-                            ->columns(3),
-                    ]),
-                Group::make()
-                    ->id('sectionHeaderActions')
-                    ->extraAttributes([
-                        'class' => 'p-16 max-w-2xl',
-                    ])
-                    ->schema([
-                        Section::make('Rate limiting')
-                            ->description('Prevent abuse by limiting the number of requests per period')
-                            ->headerActions([
-                                Action::make('edit'),
-                            ])
-                            ->schema([
-                                TextEntry::make('hits')
-                                    ->state(30),
-                                TextEntry::make('period')
-                                    ->state('Hour'),
-                                TextEntry::make('maximum')
-                                    ->state(100),
-                                TextEntry::make('notes')
-                                    ->state('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam ultricies, nunc nisl aliquet nunc, quis aliquam nisl.')
-                                    ->columnSpanFull(),
-                            ])
-                            ->columns(3),
-                    ]),
-                Group::make()
-                    ->id('sectionFooterActions')
-                    ->extraAttributes([
-                        'class' => 'p-16 max-w-2xl',
-                    ])
-                    ->schema([
-                        Section::make('Rate limiting')
-                            ->description('Prevent abuse by limiting the number of requests per period')
-                            ->footerActions([
-                                Action::make('edit'),
-                            ])
-                            ->schema([
-                                TextEntry::make('hits')
-                                    ->state(30),
-                                TextEntry::make('period')
-                                    ->state('Hour'),
-                                TextEntry::make('maximum')
-                                    ->state(100),
-                                TextEntry::make('notes')
-                                    ->state('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam ultricies, nunc nisl aliquet nunc, quis aliquam nisl.')
-                                    ->columnSpanFull(),
-                            ])
-                            ->columns(3),
-                    ]),
-                Group::make()
-                    ->id('sectionIcons')
-                    ->extraAttributes([
-                        'class' => 'p-16 max-w-2xl',
-                    ])
-                    ->schema([
-                        Section::make('Cart')
-                            ->description('The items you have selected for purchase')
-                            ->icon('heroicon-m-shopping-bag')
-                            ->schema([
-                                RepeatableEntry::make('items')
-                                    ->hiddenLabel()
-                                    ->schema([
-                                        TextEntry::make('product'),
-                                        TextEntry::make('quantity'),
-                                    ])
-                                    ->columns(2),
-                                TextEntry::make('specialOrderNotes')
-                                    ->state('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam ultricies, nunc nisl aliquet nunc, quis aliquam nisl.'),
-                            ]),
-                    ]),
-                Group::make()
-                    ->id('sectionAside')
-                    ->extraAttributes([
-                        'class' => 'p-16 max-w-5xl',
-                    ])
-                    ->schema([
-                        Section::make('Rate limiting')
-                            ->description('Prevent abuse by limiting the number of requests per period')
-                            ->aside()
-                            ->schema([
-                                TextEntry::make('hits')
-                                    ->state(30),
-                                TextEntry::make('period')
-                                    ->state('Hour'),
-                                TextEntry::make('maximum')
-                                    ->state(100),
-                                TextEntry::make('notes')
-                                    ->state('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam ultricies, nunc nisl aliquet nunc, quis aliquam nisl.')
-                                    ->columnSpanFull(),
-                            ]),
-                    ]),
-                Group::make()
-                    ->id('sectionCollapsed')
-                    ->extraAttributes([
-                        'class' => 'p-16 max-w-2xl',
-                    ])
-                    ->schema([
-                        Section::make('Cart')
-                            ->description('The items you have selected for purchase')
-                            ->collapsed(),
-                    ]),
-                Group::make()
-                    ->id('sectionCompact')
-                    ->extraAttributes([
-                        'class' => 'p-16 max-w-2xl',
-                    ])
-                    ->schema([
-                        Section::make('Rate limiting')
-                            ->description('Prevent abuse by limiting the number of requests per period')
-                            ->compact()
-                            ->schema([
-                                TextEntry::make('hits')
-                                    ->state(30),
-                                TextEntry::make('period')
-                                    ->state('Hour'),
-                                TextEntry::make('maximum')
-                                    ->state(100),
-                                TextEntry::make('notes')
-                                    ->state('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam ultricies, nunc nisl aliquet nunc, quis aliquam nisl.')
-                                    ->columnSpanFull(),
-                            ])
-                            ->columns(3),
-                    ]),
-                Group::make()
-                    ->id('sectionWithoutHeader')
-                    ->extraAttributes([
-                        'class' => 'p-16 max-w-2xl',
-                    ])
-                    ->schema([
-                        Section::make([
-                            TextEntry::make('hits')
-                                ->state(30),
-                            TextEntry::make('period')
-                                ->state('Hour'),
-                            TextEntry::make('maximum')
-                                ->state(100),
-                            TextEntry::make('notes')
-                                ->state('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam ultricies, nunc nisl aliquet nunc, quis aliquam nisl.')
-                                ->columnSpanFull(),
-                        ])
-                            ->columns(3),
-                    ]),
-                Group::make()
-                    ->id('split')
-                    ->extraAttributes([
-                        'class' => 'p-16 max-w-5xl',
-                    ])
-                    ->schema([
-                        Split::make([
-                            Section::make([
-                                TextEntry::make('title')
-                                    ->state('What is Filament?')
-                                    ->weight(FontWeight::Bold),
-                                TextEntry::make('content')
-                                    ->state(<<<'MARKDOWN'
-                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non dui eu augue tempor finibus. Vivamus tincidunt malesuada volutpat. Donec ornare euismod est id cursus. Donec dolor nisl, dignissim vitae vulputate accumsan, consequat a lorem.
-
-                                    Praesent nec nulla ut erat mattis tincidunt. Donec dictum nibh at consequat finibus. Donec dignissim velit euismod dui lobortis, ut cursus ante auctor. Donec id placerat felis. Nulla dolor arcu, sodales nec sapien ut, laoreet rhoncus risus. Interdum et malesuada fames ac ante ipsum primis in faucibus.
-                                    MARKDOWN)
-                                    ->markdown()
-                                    ->prose(),
-                            ]),
-                            Section::make([
-                                TextEntry::make('created_at')
-                                    ->dateTime()
-                                    ->state('2022-01-01 14:10:32'),
-                                TextEntry::make('published_at')
-                                    ->dateTime()
-                                    ->state('2023-07-02 23:29:24'),
-                            ])->grow(false),
-                        ]),
-                    ]),
-                Group::make()
-                    ->id('anonymousActions')
-                    ->extraAttributes([
-                        'class' => 'p-16 max-w-2xl',
-                    ])
-                    ->schema([
-                        Actions::make([
-                            Action::make('star')
-                                ->icon('heroicon-m-star'),
-                            Action::make('resetStars')
-                                ->icon('heroicon-m-x-mark')
-                                ->color('danger'),
-                        ]),
-                    ]),
-                Group::make()
-                    ->id('anonymousActionsFullWidth')
-                    ->extraAttributes([
-                        'class' => 'p-16 max-w-2xl',
-                    ])
-                    ->schema([
-                        Actions::make([
-                            Action::make('star')
-                                ->icon('heroicon-m-star'),
-                            Action::make('resetStars')
-                                ->icon('heroicon-m-x-mark')
-                                ->color('danger'),
-                        ])->fullWidth(),
-                    ]),
-                Group::make()
-                    ->id('anonymousActionsHorizontallyAlignedCenter')
-                    ->extraAttributes([
-                        'class' => 'p-16 max-w-2xl',
-                    ])
-                    ->schema([
-                        Actions::make([
-                            Action::make('star')
-                                ->icon('heroicon-m-star'),
-                            Action::make('resetStars')
-                                ->icon('heroicon-m-x-mark')
-                                ->color('danger'),
-                        ])->alignment(Alignment::Center),
-                    ]),
-                Group::make()
-                    ->id('anonymousActionsVerticallyAlignedEnd')
-                    ->extraAttributes([
-                        'class' => 'p-16 max-w-2xl',
-                    ])
-                    ->schema([
-                        Grid::make(2)
-                            ->schema([
-                                TextEntry::make('stars')
-                                    ->state(4572100479)
-                                    ->numeric(),
-                                Actions::make([
-                                    Action::make('star')
-                                        ->icon('heroicon-m-star'),
-                                    Action::make('resetStars')
-                                        ->icon('heroicon-m-x-mark')
-                                        ->color('danger'),
-                                ])->verticalAlignment(VerticalAlignment::End),
-                            ]),
-                    ]),
-            ])
-            ->constantState([
-                'items' => [
-                    ['product' => 'Filament t-shirt', 'quantity' => 3],
-                    ['product' => 'Filament hoodie', 'quantity' => 1],
-                ],
-            ]);
-    }
-
-    public function render()
-    {
-        return view('livewire.infolists.layout');
-    }
-}
diff --git a/docs-assets/app/app/Livewire/Forms/LayoutDemo.php b/docs-assets/app/app/Livewire/Schema/LayoutDemo.php
similarity index 98%
rename from docs-assets/app/app/Livewire/Forms/LayoutDemo.php
rename to docs-assets/app/app/Livewire/Schema/LayoutDemo.php
index ad8daf229b..4d11987851 100644
--- a/docs-assets/app/app/Livewire/Forms/LayoutDemo.php
+++ b/docs-assets/app/app/Livewire/Schema/LayoutDemo.php
@@ -1,10 +1,9 @@
 <?php
 
-namespace App\Livewire\Forms;
+namespace App\Livewire\Schema;
 
 use Filament\Actions\Action;
 use Filament\Forms\Components\Checkbox;
-use Filament\Forms\Components\Placeholder;
 use Filament\Forms\Components\Repeater;
 use Filament\Forms\Components\Select;
 use Filament\Forms\Components\Textarea;
@@ -489,15 +488,6 @@ class LayoutDemo extends Component implements HasForms
                             ])
                             ->columns(3),
                     ]),
-                Group::make()
-                    ->id('placeholder')
-                    ->extraAttributes([
-                        'class' => 'p-16 max-w-2xl',
-                    ])
-                    ->schema([
-                        Placeholder::make('created')
-                            ->content('May 21, 2021'),
-                    ]),
                 Group::make()
                     ->id('sectionWithoutHeader')
                     ->extraAttributes([
@@ -607,6 +597,6 @@ class LayoutDemo extends Component implements HasForms
 
     public function render()
     {
-        return view('livewire.forms.layout');
+        return view('livewire.schema.layout');
     }
 }
diff --git a/docs-assets/app/resources/views/livewire/infolists/layout.blade.php b/docs-assets/app/resources/views/livewire/infolists/layout.blade.php
deleted file mode 100644
index 5951c0746a..0000000000
--- a/docs-assets/app/resources/views/livewire/infolists/layout.blade.php
+++ /dev/null
@@ -1,3 +0,0 @@
-<div class="min-h-screen p-16">
-    {{ $this->infolist }}
-</div>
diff --git a/docs-assets/app/resources/views/livewire/forms/layout.blade.php b/docs-assets/app/resources/views/livewire/schema/layout.blade.php
similarity index 100%
rename from docs-assets/app/resources/views/livewire/forms/layout.blade.php
rename to docs-assets/app/resources/views/livewire/schema/layout.blade.php
diff --git a/docs-assets/app/routes/web.php b/docs-assets/app/routes/web.php
index 68bd0deace..2dec6bd905 100644
--- a/docs-assets/app/routes/web.php
+++ b/docs-assets/app/routes/web.php
@@ -3,10 +3,11 @@
 use App\Livewire\ActionsDemo;
 use App\Livewire\Forms\FieldsDemo;
 use App\Livewire\Forms\GettingStartedDemo;
-use App\Livewire\Forms\LayoutDemo as FormsLayoutDemo;
 use App\Livewire\Infolists\EntriesDemo;
 use App\Livewire\Infolists\LayoutDemo as InfolistsLayoutDemo;
 use App\Livewire\NotificationsDemo;
+use App\Livewire\Schema\LayoutDemo;
+use App\Livewire\Schema\LayoutDemo as FormsLayoutDemo;
 use App\Livewire\TablesDemo;
 use Illuminate\Support\Facades\Route;
 
@@ -24,8 +25,7 @@ use Illuminate\Support\Facades\Route;
 Route::get('/actions', ActionsDemo::class);
 Route::get('/forms/fields', FieldsDemo::class);
 Route::get('/forms/getting-started', GettingStartedDemo::class);
-Route::get('/forms/layout', FormsLayoutDemo::class);
 Route::get('/infolists/entries', EntriesDemo::class);
-Route::get('/infolists/layout', InfolistsLayoutDemo::class);
+Route::get('/schema/layout', LayoutDemo::class);
 Route::get('/notifications', NotificationsDemo::class);
 Route::get('/tables', TablesDemo::class);
diff --git a/docs-assets/screenshots/images/dark/forms/layout/placeholder/simple.jpg b/docs-assets/screenshots/images/dark/forms/layout/placeholder/simple.jpg
deleted file mode 100644
index 072bf1b102..0000000000
Binary files a/docs-assets/screenshots/images/dark/forms/layout/placeholder/simple.jpg and /dev/null differ
diff --git a/docs-assets/screenshots/images/dark/infolists/layout/actions/anonymous/full-width.jpg b/docs-assets/screenshots/images/dark/infolists/layout/actions/anonymous/full-width.jpg
deleted file mode 100644
index 30ef9d3713..0000000000
Binary files a/docs-assets/screenshots/images/dark/infolists/layout/actions/anonymous/full-width.jpg and /dev/null differ
diff --git a/docs-assets/screenshots/images/dark/infolists/layout/actions/anonymous/horizontally-aligned-center.jpg b/docs-assets/screenshots/images/dark/infolists/layout/actions/anonymous/horizontally-aligned-center.jpg
deleted file mode 100644
index 7cf5ae0a02..0000000000
Binary files a/docs-assets/screenshots/images/dark/infolists/layout/actions/anonymous/horizontally-aligned-center.jpg and /dev/null differ
diff --git a/docs-assets/screenshots/images/dark/infolists/layout/actions/anonymous/simple.jpg b/docs-assets/screenshots/images/dark/infolists/layout/actions/anonymous/simple.jpg
deleted file mode 100644
index 7fd55310e9..0000000000
Binary files a/docs-assets/screenshots/images/dark/infolists/layout/actions/anonymous/simple.jpg and /dev/null differ
diff --git a/docs-assets/screenshots/images/dark/infolists/layout/actions/anonymous/vertically-aligned-end.jpg b/docs-assets/screenshots/images/dark/infolists/layout/actions/anonymous/vertically-aligned-end.jpg
deleted file mode 100644
index 7571f660c2..0000000000
Binary files a/docs-assets/screenshots/images/dark/infolists/layout/actions/anonymous/vertically-aligned-end.jpg and /dev/null differ
diff --git a/docs-assets/screenshots/images/dark/infolists/layout/card/simple.jpg b/docs-assets/screenshots/images/dark/infolists/layout/card/simple.jpg
deleted file mode 100644
index c672481a1f..0000000000
Binary files a/docs-assets/screenshots/images/dark/infolists/layout/card/simple.jpg and /dev/null differ
diff --git a/docs-assets/screenshots/images/dark/infolists/layout/fieldset/simple.jpg b/docs-assets/screenshots/images/dark/infolists/layout/fieldset/simple.jpg
deleted file mode 100644
index 1abe7e6a60..0000000000
Binary files a/docs-assets/screenshots/images/dark/infolists/layout/fieldset/simple.jpg and /dev/null differ
diff --git a/docs-assets/screenshots/images/dark/infolists/layout/section/aside.jpg b/docs-assets/screenshots/images/dark/infolists/layout/section/aside.jpg
deleted file mode 100644
index e5a4b77e4f..0000000000
Binary files a/docs-assets/screenshots/images/dark/infolists/layout/section/aside.jpg and /dev/null differ
diff --git a/docs-assets/screenshots/images/dark/infolists/layout/section/collapsed.jpg b/docs-assets/screenshots/images/dark/infolists/layout/section/collapsed.jpg
deleted file mode 100644
index 304dbfc800..0000000000
Binary files a/docs-assets/screenshots/images/dark/infolists/layout/section/collapsed.jpg and /dev/null differ
diff --git a/docs-assets/screenshots/images/dark/infolists/layout/section/compact.jpg b/docs-assets/screenshots/images/dark/infolists/layout/section/compact.jpg
deleted file mode 100644
index 5189ee52d1..0000000000
Binary files a/docs-assets/screenshots/images/dark/infolists/layout/section/compact.jpg and /dev/null differ
diff --git a/docs-assets/screenshots/images/dark/infolists/layout/section/footer/actions.jpg b/docs-assets/screenshots/images/dark/infolists/layout/section/footer/actions.jpg
deleted file mode 100644
index b914962dcc..0000000000
Binary files a/docs-assets/screenshots/images/dark/infolists/layout/section/footer/actions.jpg and /dev/null differ
diff --git a/docs-assets/screenshots/images/dark/infolists/layout/section/header/actions.jpg b/docs-assets/screenshots/images/dark/infolists/layout/section/header/actions.jpg
deleted file mode 100644
index a843bcb8e5..0000000000
Binary files a/docs-assets/screenshots/images/dark/infolists/layout/section/header/actions.jpg and /dev/null differ
diff --git a/docs-assets/screenshots/images/dark/infolists/layout/section/icons.jpg b/docs-assets/screenshots/images/dark/infolists/layout/section/icons.jpg
deleted file mode 100644
index f4e45897bf..0000000000
Binary files a/docs-assets/screenshots/images/dark/infolists/layout/section/icons.jpg and /dev/null differ
diff --git a/docs-assets/screenshots/images/dark/infolists/layout/section/simple.jpg b/docs-assets/screenshots/images/dark/infolists/layout/section/simple.jpg
deleted file mode 100644
index b9d67acc88..0000000000
Binary files a/docs-assets/screenshots/images/dark/infolists/layout/section/simple.jpg and /dev/null differ
diff --git a/docs-assets/screenshots/images/dark/infolists/layout/section/without-header.jpg b/docs-assets/screenshots/images/dark/infolists/layout/section/without-header.jpg
deleted file mode 100644
index 19318ebbb1..0000000000
Binary files a/docs-assets/screenshots/images/dark/infolists/layout/section/without-header.jpg and /dev/null differ
diff --git a/docs-assets/screenshots/images/dark/infolists/layout/split/simple.jpg b/docs-assets/screenshots/images/dark/infolists/layout/split/simple.jpg
deleted file mode 100644
index 4180b7969f..0000000000
Binary files a/docs-assets/screenshots/images/dark/infolists/layout/split/simple.jpg and /dev/null differ
diff --git a/docs-assets/screenshots/images/dark/infolists/layout/tabs/badges.jpg b/docs-assets/screenshots/images/dark/infolists/layout/tabs/badges.jpg
deleted file mode 100644
index f4a6a62c8a..0000000000
Binary files a/docs-assets/screenshots/images/dark/infolists/layout/tabs/badges.jpg and /dev/null differ
diff --git a/docs-assets/screenshots/images/dark/infolists/layout/tabs/icons-after.jpg b/docs-assets/screenshots/images/dark/infolists/layout/tabs/icons-after.jpg
deleted file mode 100644
index 569b21a56f..0000000000
Binary files a/docs-assets/screenshots/images/dark/infolists/layout/tabs/icons-after.jpg and /dev/null differ
diff --git a/docs-assets/screenshots/images/dark/infolists/layout/tabs/icons.jpg b/docs-assets/screenshots/images/dark/infolists/layout/tabs/icons.jpg
deleted file mode 100644
index a3a2a59441..0000000000
Binary files a/docs-assets/screenshots/images/dark/infolists/layout/tabs/icons.jpg and /dev/null differ
diff --git a/docs-assets/screenshots/images/dark/infolists/layout/tabs/simple.jpg b/docs-assets/screenshots/images/dark/infolists/layout/tabs/simple.jpg
deleted file mode 100644
index 5795ec29e9..0000000000
Binary files a/docs-assets/screenshots/images/dark/infolists/layout/tabs/simple.jpg and /dev/null differ
diff --git a/docs-assets/screenshots/images/dark/forms/layout/actions/anonymous/full-width.jpg b/docs-assets/screenshots/images/dark/schema/layout/actions/anonymous/full-width.jpg
similarity index 100%
rename from docs-assets/screenshots/images/dark/forms/layout/actions/anonymous/full-width.jpg
rename to docs-assets/screenshots/images/dark/schema/layout/actions/anonymous/full-width.jpg
diff --git a/docs-assets/screenshots/images/dark/forms/layout/actions/anonymous/horizontally-aligned-center.jpg b/docs-assets/screenshots/images/dark/schema/layout/actions/anonymous/horizontally-aligned-center.jpg
similarity index 100%
rename from docs-assets/screenshots/images/dark/forms/layout/actions/anonymous/horizontally-aligned-center.jpg
rename to docs-assets/screenshots/images/dark/schema/layout/actions/anonymous/horizontally-aligned-center.jpg
diff --git a/docs-assets/screenshots/images/dark/forms/layout/actions/anonymous/simple.jpg b/docs-assets/screenshots/images/dark/schema/layout/actions/anonymous/simple.jpg
similarity index 100%
rename from docs-assets/screenshots/images/dark/forms/layout/actions/anonymous/simple.jpg
rename to docs-assets/screenshots/images/dark/schema/layout/actions/anonymous/simple.jpg
diff --git a/docs-assets/screenshots/images/dark/forms/layout/actions/anonymous/vertically-aligned-end.jpg b/docs-assets/screenshots/images/dark/schema/layout/actions/anonymous/vertically-aligned-end.jpg
similarity index 100%
rename from docs-assets/screenshots/images/dark/forms/layout/actions/anonymous/vertically-aligned-end.jpg
rename to docs-assets/screenshots/images/dark/schema/layout/actions/anonymous/vertically-aligned-end.jpg
diff --git a/docs-assets/screenshots/images/dark/forms/layout/card/simple.jpg b/docs-assets/screenshots/images/dark/schema/layout/card/simple.jpg
similarity index 100%
rename from docs-assets/screenshots/images/dark/forms/layout/card/simple.jpg
rename to docs-assets/screenshots/images/dark/schema/layout/card/simple.jpg
diff --git a/docs-assets/screenshots/images/dark/forms/layout/fieldset/simple.jpg b/docs-assets/screenshots/images/dark/schema/layout/fieldset/simple.jpg
similarity index 100%
rename from docs-assets/screenshots/images/dark/forms/layout/fieldset/simple.jpg
rename to docs-assets/screenshots/images/dark/schema/layout/fieldset/simple.jpg
diff --git a/docs-assets/screenshots/images/dark/forms/layout/section/aside.jpg b/docs-assets/screenshots/images/dark/schema/layout/section/aside.jpg
similarity index 100%
rename from docs-assets/screenshots/images/dark/forms/layout/section/aside.jpg
rename to docs-assets/screenshots/images/dark/schema/layout/section/aside.jpg
diff --git a/docs-assets/screenshots/images/dark/forms/layout/section/collapsed.jpg b/docs-assets/screenshots/images/dark/schema/layout/section/collapsed.jpg
similarity index 100%
rename from docs-assets/screenshots/images/dark/forms/layout/section/collapsed.jpg
rename to docs-assets/screenshots/images/dark/schema/layout/section/collapsed.jpg
diff --git a/docs-assets/screenshots/images/dark/forms/layout/section/compact.jpg b/docs-assets/screenshots/images/dark/schema/layout/section/compact.jpg
similarity index 100%
rename from docs-assets/screenshots/images/dark/forms/layout/section/compact.jpg
rename to docs-assets/screenshots/images/dark/schema/layout/section/compact.jpg
diff --git a/docs-assets/screenshots/images/dark/forms/layout/section/footer/actions.jpg b/docs-assets/screenshots/images/dark/schema/layout/section/footer/actions.jpg
similarity index 100%
rename from docs-assets/screenshots/images/dark/forms/layout/section/footer/actions.jpg
rename to docs-assets/screenshots/images/dark/schema/layout/section/footer/actions.jpg
diff --git a/docs-assets/screenshots/images/dark/forms/layout/section/header/actions.jpg b/docs-assets/screenshots/images/dark/schema/layout/section/header/actions.jpg
similarity index 100%
rename from docs-assets/screenshots/images/dark/forms/layout/section/header/actions.jpg
rename to docs-assets/screenshots/images/dark/schema/layout/section/header/actions.jpg
diff --git a/docs-assets/screenshots/images/dark/forms/layout/section/icons.jpg b/docs-assets/screenshots/images/dark/schema/layout/section/icons.jpg
similarity index 100%
rename from docs-assets/screenshots/images/dark/forms/layout/section/icons.jpg
rename to docs-assets/screenshots/images/dark/schema/layout/section/icons.jpg
diff --git a/docs-assets/screenshots/images/dark/forms/layout/section/simple.jpg b/docs-assets/screenshots/images/dark/schema/layout/section/simple.jpg
similarity index 100%
rename from docs-assets/screenshots/images/dark/forms/layout/section/simple.jpg
rename to docs-assets/screenshots/images/dark/schema/layout/section/simple.jpg
diff --git a/docs-assets/screenshots/images/dark/forms/layout/section/without-header.jpg b/docs-assets/screenshots/images/dark/schema/layout/section/without-header.jpg
similarity index 100%
rename from docs-assets/screenshots/images/dark/forms/layout/section/without-header.jpg
rename to docs-assets/screenshots/images/dark/schema/layout/section/without-header.jpg
diff --git a/docs-assets/screenshots/images/dark/forms/layout/split/simple.jpg b/docs-assets/screenshots/images/dark/schema/layout/split/simple.jpg
similarity index 100%
rename from docs-assets/screenshots/images/dark/forms/layout/split/simple.jpg
rename to docs-assets/screenshots/images/dark/schema/layout/split/simple.jpg
diff --git a/docs-assets/screenshots/images/dark/forms/layout/tabs/badges.jpg b/docs-assets/screenshots/images/dark/schema/layout/tabs/badges.jpg
similarity index 100%
rename from docs-assets/screenshots/images/dark/forms/layout/tabs/badges.jpg
rename to docs-assets/screenshots/images/dark/schema/layout/tabs/badges.jpg
diff --git a/docs-assets/screenshots/images/dark/forms/layout/tabs/icons-after.jpg b/docs-assets/screenshots/images/dark/schema/layout/tabs/icons-after.jpg
similarity index 100%
rename from docs-assets/screenshots/images/dark/forms/layout/tabs/icons-after.jpg
rename to docs-assets/screenshots/images/dark/schema/layout/tabs/icons-after.jpg
diff --git a/docs-assets/screenshots/images/dark/forms/layout/tabs/icons.jpg b/docs-assets/screenshots/images/dark/schema/layout/tabs/icons.jpg
similarity index 100%
rename from docs-assets/screenshots/images/dark/forms/layout/tabs/icons.jpg
rename to docs-assets/screenshots/images/dark/schema/layout/tabs/icons.jpg
diff --git a/docs-assets/screenshots/images/dark/forms/layout/tabs/simple.jpg b/docs-assets/screenshots/images/dark/schema/layout/tabs/simple.jpg
similarity index 100%
rename from docs-assets/screenshots/images/dark/forms/layout/tabs/simple.jpg
rename to docs-assets/screenshots/images/dark/schema/layout/tabs/simple.jpg
diff --git a/docs-assets/screenshots/images/dark/forms/layout/wizard/completed-icons.jpg b/docs-assets/screenshots/images/dark/schema/layout/wizard/completed-icons.jpg
similarity index 100%
rename from docs-assets/screenshots/images/dark/forms/layout/wizard/completed-icons.jpg
rename to docs-assets/screenshots/images/dark/schema/layout/wizard/completed-icons.jpg
diff --git a/docs-assets/screenshots/images/dark/forms/layout/wizard/descriptions.jpg b/docs-assets/screenshots/images/dark/schema/layout/wizard/descriptions.jpg
similarity index 100%
rename from docs-assets/screenshots/images/dark/forms/layout/wizard/descriptions.jpg
rename to docs-assets/screenshots/images/dark/schema/layout/wizard/descriptions.jpg
diff --git a/docs-assets/screenshots/images/dark/forms/layout/wizard/icons.jpg b/docs-assets/screenshots/images/dark/schema/layout/wizard/icons.jpg
similarity index 100%
rename from docs-assets/screenshots/images/dark/forms/layout/wizard/icons.jpg
rename to docs-assets/screenshots/images/dark/schema/layout/wizard/icons.jpg
diff --git a/docs-assets/screenshots/images/dark/forms/layout/wizard/simple.jpg b/docs-assets/screenshots/images/dark/schema/layout/wizard/simple.jpg
similarity index 100%
rename from docs-assets/screenshots/images/dark/forms/layout/wizard/simple.jpg
rename to docs-assets/screenshots/images/dark/schema/layout/wizard/simple.jpg
diff --git a/docs-assets/screenshots/images/light/forms/layout/placeholder/simple.jpg b/docs-assets/screenshots/images/light/forms/layout/placeholder/simple.jpg
deleted file mode 100644
index 321545aaae..0000000000
Binary files a/docs-assets/screenshots/images/light/forms/layout/placeholder/simple.jpg and /dev/null differ
diff --git a/docs-assets/screenshots/images/light/infolists/layout/actions/anonymous/full-width.jpg b/docs-assets/screenshots/images/light/infolists/layout/actions/anonymous/full-width.jpg
deleted file mode 100644
index e6aeb5d003..0000000000
Binary files a/docs-assets/screenshots/images/light/infolists/layout/actions/anonymous/full-width.jpg and /dev/null differ
diff --git a/docs-assets/screenshots/images/light/infolists/layout/actions/anonymous/horizontally-aligned-center.jpg b/docs-assets/screenshots/images/light/infolists/layout/actions/anonymous/horizontally-aligned-center.jpg
deleted file mode 100644
index 511d99cb9f..0000000000
Binary files a/docs-assets/screenshots/images/light/infolists/layout/actions/anonymous/horizontally-aligned-center.jpg and /dev/null differ
diff --git a/docs-assets/screenshots/images/light/infolists/layout/actions/anonymous/simple.jpg b/docs-assets/screenshots/images/light/infolists/layout/actions/anonymous/simple.jpg
deleted file mode 100644
index fbd5a62d71..0000000000
Binary files a/docs-assets/screenshots/images/light/infolists/layout/actions/anonymous/simple.jpg and /dev/null differ
diff --git a/docs-assets/screenshots/images/light/infolists/layout/actions/anonymous/vertically-aligned-end.jpg b/docs-assets/screenshots/images/light/infolists/layout/actions/anonymous/vertically-aligned-end.jpg
deleted file mode 100644
index a68770f590..0000000000
Binary files a/docs-assets/screenshots/images/light/infolists/layout/actions/anonymous/vertically-aligned-end.jpg and /dev/null differ
diff --git a/docs-assets/screenshots/images/light/infolists/layout/card/simple.jpg b/docs-assets/screenshots/images/light/infolists/layout/card/simple.jpg
deleted file mode 100644
index eff890a270..0000000000
Binary files a/docs-assets/screenshots/images/light/infolists/layout/card/simple.jpg and /dev/null differ
diff --git a/docs-assets/screenshots/images/light/infolists/layout/fieldset/simple.jpg b/docs-assets/screenshots/images/light/infolists/layout/fieldset/simple.jpg
deleted file mode 100644
index 363bf6919e..0000000000
Binary files a/docs-assets/screenshots/images/light/infolists/layout/fieldset/simple.jpg and /dev/null differ
diff --git a/docs-assets/screenshots/images/light/infolists/layout/section/aside.jpg b/docs-assets/screenshots/images/light/infolists/layout/section/aside.jpg
deleted file mode 100644
index 8f9d7f0d99..0000000000
Binary files a/docs-assets/screenshots/images/light/infolists/layout/section/aside.jpg and /dev/null differ
diff --git a/docs-assets/screenshots/images/light/infolists/layout/section/collapsed.jpg b/docs-assets/screenshots/images/light/infolists/layout/section/collapsed.jpg
deleted file mode 100644
index 62aad4f486..0000000000
Binary files a/docs-assets/screenshots/images/light/infolists/layout/section/collapsed.jpg and /dev/null differ
diff --git a/docs-assets/screenshots/images/light/infolists/layout/section/compact.jpg b/docs-assets/screenshots/images/light/infolists/layout/section/compact.jpg
deleted file mode 100644
index 0880e94e51..0000000000
Binary files a/docs-assets/screenshots/images/light/infolists/layout/section/compact.jpg and /dev/null differ
diff --git a/docs-assets/screenshots/images/light/infolists/layout/section/footer/actions.jpg b/docs-assets/screenshots/images/light/infolists/layout/section/footer/actions.jpg
deleted file mode 100644
index b605f1f1bd..0000000000
Binary files a/docs-assets/screenshots/images/light/infolists/layout/section/footer/actions.jpg and /dev/null differ
diff --git a/docs-assets/screenshots/images/light/infolists/layout/section/header/actions.jpg b/docs-assets/screenshots/images/light/infolists/layout/section/header/actions.jpg
deleted file mode 100644
index 53dbc8e333..0000000000
Binary files a/docs-assets/screenshots/images/light/infolists/layout/section/header/actions.jpg and /dev/null differ
diff --git a/docs-assets/screenshots/images/light/infolists/layout/section/icons.jpg b/docs-assets/screenshots/images/light/infolists/layout/section/icons.jpg
deleted file mode 100644
index 0c8cfce3c9..0000000000
Binary files a/docs-assets/screenshots/images/light/infolists/layout/section/icons.jpg and /dev/null differ
diff --git a/docs-assets/screenshots/images/light/infolists/layout/section/simple.jpg b/docs-assets/screenshots/images/light/infolists/layout/section/simple.jpg
deleted file mode 100644
index 2054781b4b..0000000000
Binary files a/docs-assets/screenshots/images/light/infolists/layout/section/simple.jpg and /dev/null differ
diff --git a/docs-assets/screenshots/images/light/infolists/layout/section/without-header.jpg b/docs-assets/screenshots/images/light/infolists/layout/section/without-header.jpg
deleted file mode 100644
index ce28cb6ac6..0000000000
Binary files a/docs-assets/screenshots/images/light/infolists/layout/section/without-header.jpg and /dev/null differ
diff --git a/docs-assets/screenshots/images/light/infolists/layout/split/simple.jpg b/docs-assets/screenshots/images/light/infolists/layout/split/simple.jpg
deleted file mode 100644
index bcd193d32b..0000000000
Binary files a/docs-assets/screenshots/images/light/infolists/layout/split/simple.jpg and /dev/null differ
diff --git a/docs-assets/screenshots/images/light/infolists/layout/tabs/badges.jpg b/docs-assets/screenshots/images/light/infolists/layout/tabs/badges.jpg
deleted file mode 100644
index 7df0d4776f..0000000000
Binary files a/docs-assets/screenshots/images/light/infolists/layout/tabs/badges.jpg and /dev/null differ
diff --git a/docs-assets/screenshots/images/light/infolists/layout/tabs/icons-after.jpg b/docs-assets/screenshots/images/light/infolists/layout/tabs/icons-after.jpg
deleted file mode 100644
index 6122af8a6f..0000000000
Binary files a/docs-assets/screenshots/images/light/infolists/layout/tabs/icons-after.jpg and /dev/null differ
diff --git a/docs-assets/screenshots/images/light/infolists/layout/tabs/icons.jpg b/docs-assets/screenshots/images/light/infolists/layout/tabs/icons.jpg
deleted file mode 100644
index 40665bd97b..0000000000
Binary files a/docs-assets/screenshots/images/light/infolists/layout/tabs/icons.jpg and /dev/null differ
diff --git a/docs-assets/screenshots/images/light/infolists/layout/tabs/simple.jpg b/docs-assets/screenshots/images/light/infolists/layout/tabs/simple.jpg
deleted file mode 100644
index a6d681340f..0000000000
Binary files a/docs-assets/screenshots/images/light/infolists/layout/tabs/simple.jpg and /dev/null differ
diff --git a/docs-assets/screenshots/images/light/forms/layout/actions/anonymous/full-width.jpg b/docs-assets/screenshots/images/light/schema/layout/actions/anonymous/full-width.jpg
similarity index 100%
rename from docs-assets/screenshots/images/light/forms/layout/actions/anonymous/full-width.jpg
rename to docs-assets/screenshots/images/light/schema/layout/actions/anonymous/full-width.jpg
diff --git a/docs-assets/screenshots/images/light/forms/layout/actions/anonymous/horizontally-aligned-center.jpg b/docs-assets/screenshots/images/light/schema/layout/actions/anonymous/horizontally-aligned-center.jpg
similarity index 100%
rename from docs-assets/screenshots/images/light/forms/layout/actions/anonymous/horizontally-aligned-center.jpg
rename to docs-assets/screenshots/images/light/schema/layout/actions/anonymous/horizontally-aligned-center.jpg
diff --git a/docs-assets/screenshots/images/light/forms/layout/actions/anonymous/simple.jpg b/docs-assets/screenshots/images/light/schema/layout/actions/anonymous/simple.jpg
similarity index 100%
rename from docs-assets/screenshots/images/light/forms/layout/actions/anonymous/simple.jpg
rename to docs-assets/screenshots/images/light/schema/layout/actions/anonymous/simple.jpg
diff --git a/docs-assets/screenshots/images/light/forms/layout/actions/anonymous/vertically-aligned-end.jpg b/docs-assets/screenshots/images/light/schema/layout/actions/anonymous/vertically-aligned-end.jpg
similarity index 100%
rename from docs-assets/screenshots/images/light/forms/layout/actions/anonymous/vertically-aligned-end.jpg
rename to docs-assets/screenshots/images/light/schema/layout/actions/anonymous/vertically-aligned-end.jpg
diff --git a/docs-assets/screenshots/images/light/forms/layout/card/simple.jpg b/docs-assets/screenshots/images/light/schema/layout/card/simple.jpg
similarity index 100%
rename from docs-assets/screenshots/images/light/forms/layout/card/simple.jpg
rename to docs-assets/screenshots/images/light/schema/layout/card/simple.jpg
diff --git a/docs-assets/screenshots/images/light/forms/layout/fieldset/simple.jpg b/docs-assets/screenshots/images/light/schema/layout/fieldset/simple.jpg
similarity index 100%
rename from docs-assets/screenshots/images/light/forms/layout/fieldset/simple.jpg
rename to docs-assets/screenshots/images/light/schema/layout/fieldset/simple.jpg
diff --git a/docs-assets/screenshots/images/light/forms/layout/section/aside.jpg b/docs-assets/screenshots/images/light/schema/layout/section/aside.jpg
similarity index 100%
rename from docs-assets/screenshots/images/light/forms/layout/section/aside.jpg
rename to docs-assets/screenshots/images/light/schema/layout/section/aside.jpg
diff --git a/docs-assets/screenshots/images/light/forms/layout/section/collapsed.jpg b/docs-assets/screenshots/images/light/schema/layout/section/collapsed.jpg
similarity index 100%
rename from docs-assets/screenshots/images/light/forms/layout/section/collapsed.jpg
rename to docs-assets/screenshots/images/light/schema/layout/section/collapsed.jpg
diff --git a/docs-assets/screenshots/images/light/forms/layout/section/compact.jpg b/docs-assets/screenshots/images/light/schema/layout/section/compact.jpg
similarity index 100%
rename from docs-assets/screenshots/images/light/forms/layout/section/compact.jpg
rename to docs-assets/screenshots/images/light/schema/layout/section/compact.jpg
diff --git a/docs-assets/screenshots/images/light/forms/layout/section/footer/actions.jpg b/docs-assets/screenshots/images/light/schema/layout/section/footer/actions.jpg
similarity index 100%
rename from docs-assets/screenshots/images/light/forms/layout/section/footer/actions.jpg
rename to docs-assets/screenshots/images/light/schema/layout/section/footer/actions.jpg
diff --git a/docs-assets/screenshots/images/light/forms/layout/section/header/actions.jpg b/docs-assets/screenshots/images/light/schema/layout/section/header/actions.jpg
similarity index 100%
rename from docs-assets/screenshots/images/light/forms/layout/section/header/actions.jpg
rename to docs-assets/screenshots/images/light/schema/layout/section/header/actions.jpg
diff --git a/docs-assets/screenshots/images/light/forms/layout/section/icons.jpg b/docs-assets/screenshots/images/light/schema/layout/section/icons.jpg
similarity index 100%
rename from docs-assets/screenshots/images/light/forms/layout/section/icons.jpg
rename to docs-assets/screenshots/images/light/schema/layout/section/icons.jpg
diff --git a/docs-assets/screenshots/images/light/forms/layout/section/simple.jpg b/docs-assets/screenshots/images/light/schema/layout/section/simple.jpg
similarity index 100%
rename from docs-assets/screenshots/images/light/forms/layout/section/simple.jpg
rename to docs-assets/screenshots/images/light/schema/layout/section/simple.jpg
diff --git a/docs-assets/screenshots/images/light/forms/layout/section/without-header.jpg b/docs-assets/screenshots/images/light/schema/layout/section/without-header.jpg
similarity index 100%
rename from docs-assets/screenshots/images/light/forms/layout/section/without-header.jpg
rename to docs-assets/screenshots/images/light/schema/layout/section/without-header.jpg
diff --git a/docs-assets/screenshots/images/light/forms/layout/split/simple.jpg b/docs-assets/screenshots/images/light/schema/layout/split/simple.jpg
similarity index 100%
rename from docs-assets/screenshots/images/light/forms/layout/split/simple.jpg
rename to docs-assets/screenshots/images/light/schema/layout/split/simple.jpg
diff --git a/docs-assets/screenshots/images/light/forms/layout/tabs/badges.jpg b/docs-assets/screenshots/images/light/schema/layout/tabs/badges.jpg
similarity index 100%
rename from docs-assets/screenshots/images/light/forms/layout/tabs/badges.jpg
rename to docs-assets/screenshots/images/light/schema/layout/tabs/badges.jpg
diff --git a/docs-assets/screenshots/images/light/forms/layout/tabs/icons-after.jpg b/docs-assets/screenshots/images/light/schema/layout/tabs/icons-after.jpg
similarity index 100%
rename from docs-assets/screenshots/images/light/forms/layout/tabs/icons-after.jpg
rename to docs-assets/screenshots/images/light/schema/layout/tabs/icons-after.jpg
diff --git a/docs-assets/screenshots/images/light/forms/layout/tabs/icons.jpg b/docs-assets/screenshots/images/light/schema/layout/tabs/icons.jpg
similarity index 100%
rename from docs-assets/screenshots/images/light/forms/layout/tabs/icons.jpg
rename to docs-assets/screenshots/images/light/schema/layout/tabs/icons.jpg
diff --git a/docs-assets/screenshots/images/light/forms/layout/tabs/simple.jpg b/docs-assets/screenshots/images/light/schema/layout/tabs/simple.jpg
similarity index 100%
rename from docs-assets/screenshots/images/light/forms/layout/tabs/simple.jpg
rename to docs-assets/screenshots/images/light/schema/layout/tabs/simple.jpg
diff --git a/docs-assets/screenshots/images/light/forms/layout/wizard/completed-icons.jpg b/docs-assets/screenshots/images/light/schema/layout/wizard/completed-icons.jpg
similarity index 100%
rename from docs-assets/screenshots/images/light/forms/layout/wizard/completed-icons.jpg
rename to docs-assets/screenshots/images/light/schema/layout/wizard/completed-icons.jpg
diff --git a/docs-assets/screenshots/images/light/forms/layout/wizard/descriptions.jpg b/docs-assets/screenshots/images/light/schema/layout/wizard/descriptions.jpg
similarity index 100%
rename from docs-assets/screenshots/images/light/forms/layout/wizard/descriptions.jpg
rename to docs-assets/screenshots/images/light/schema/layout/wizard/descriptions.jpg
diff --git a/docs-assets/screenshots/images/light/forms/layout/wizard/icons.jpg b/docs-assets/screenshots/images/light/schema/layout/wizard/icons.jpg
similarity index 100%
rename from docs-assets/screenshots/images/light/forms/layout/wizard/icons.jpg
rename to docs-assets/screenshots/images/light/schema/layout/wizard/icons.jpg
diff --git a/docs-assets/screenshots/images/light/forms/layout/wizard/simple.jpg b/docs-assets/screenshots/images/light/schema/layout/wizard/simple.jpg
similarity index 100%
rename from docs-assets/screenshots/images/light/forms/layout/wizard/simple.jpg
rename to docs-assets/screenshots/images/light/schema/layout/wizard/simple.jpg
diff --git a/docs-assets/screenshots/schema.js b/docs-assets/screenshots/schema.js
index 0d6d4def35..b224b77b48 100644
--- a/docs-assets/screenshots/schema.js
+++ b/docs-assets/screenshots/schema.js
@@ -1112,8 +1112,8 @@ export default {
             deviceScaleFactor: 3,
         },
     },
-    'forms/layout/fieldset/simple': {
-        url: 'forms/layout',
+    'schema/layout/fieldset/simple': {
+        url: 'schema/layout',
         selector: '#fieldset',
         viewport: {
             width: 1920,
@@ -1121,8 +1121,8 @@ export default {
             deviceScaleFactor: 3,
         },
     },
-    'forms/layout/tabs/simple': {
-        url: 'forms/layout',
+    'schema/layout/tabs/simple': {
+        url: 'schema/layout',
         selector: '#tabs',
         viewport: {
             width: 1920,
@@ -1130,8 +1130,8 @@ export default {
             deviceScaleFactor: 3,
         },
     },
-    'forms/layout/tabs/icons': {
-        url: 'forms/layout',
+    'schema/layout/tabs/icons': {
+        url: 'schema/layout',
         selector: '#tabsIcons',
         viewport: {
             width: 1920,
@@ -1139,8 +1139,8 @@ export default {
             deviceScaleFactor: 3,
         },
     },
-    'forms/layout/tabs/icons-after': {
-        url: 'forms/layout',
+    'schema/layout/tabs/icons-after': {
+        url: 'schema/layout',
         selector: '#tabsIconsAfter',
         viewport: {
             width: 1920,
@@ -1148,8 +1148,8 @@ export default {
             deviceScaleFactor: 3,
         },
     },
-    'forms/layout/tabs/badges': {
-        url: 'forms/layout',
+    'schema/layout/tabs/badges': {
+        url: 'schema/layout',
         selector: '#tabsBadges',
         viewport: {
             width: 1920,
@@ -1157,8 +1157,8 @@ export default {
             deviceScaleFactor: 3,
         },
     },
-    'forms/layout/wizard/simple': {
-        url: 'forms/layout',
+    'schema/layout/wizard/simple': {
+        url: 'schema/layout',
         selector: '#wizard',
         viewport: {
             width: 1920,
@@ -1166,8 +1166,8 @@ export default {
             deviceScaleFactor: 3,
         },
     },
-    'forms/layout/wizard/icons': {
-        url: 'forms/layout',
+    'schema/layout/wizard/icons': {
+        url: 'schema/layout',
         selector: '#wizardIcons',
         viewport: {
             width: 1920,
@@ -1175,8 +1175,8 @@ export default {
             deviceScaleFactor: 3,
         },
     },
-    'forms/layout/wizard/completed-icons': {
-        url: 'forms/layout',
+    'schema/layout/wizard/completed-icons': {
+        url: 'schema/layout',
         selector: '#wizardCompletedIcons',
         viewport: {
             width: 1920,
@@ -1184,8 +1184,8 @@ export default {
             deviceScaleFactor: 3,
         },
     },
-    'forms/layout/wizard/descriptions': {
-        url: 'forms/layout',
+    'schema/layout/wizard/descriptions': {
+        url: 'schema/layout',
         selector: '#wizardDescriptions',
         viewport: {
             width: 1920,
@@ -1193,8 +1193,8 @@ export default {
             deviceScaleFactor: 3,
         },
     },
-    'forms/layout/section/simple': {
-        url: 'forms/layout',
+    'schema/layout/section/simple': {
+        url: 'schema/layout',
         selector: '#section',
         viewport: {
             width: 1920,
@@ -1202,8 +1202,8 @@ export default {
             deviceScaleFactor: 3,
         },
     },
-    'forms/layout/section/header/actions': {
-        url: 'forms/layout',
+    'schema/layout/section/header/actions': {
+        url: 'schema/layout',
         selector: '#sectionHeaderActions',
         viewport: {
             width: 1920,
@@ -1211,8 +1211,8 @@ export default {
             deviceScaleFactor: 3,
         },
     },
-    'forms/layout/section/footer/actions': {
-        url: 'forms/layout',
+    'schema/layout/section/footer/actions': {
+        url: 'schema/layout',
         selector: '#sectionFooterActions',
         viewport: {
             width: 1920,
@@ -1220,8 +1220,8 @@ export default {
             deviceScaleFactor: 3,
         },
     },
-    'forms/layout/section/icons': {
-        url: 'forms/layout',
+    'schema/layout/section/icons': {
+        url: 'schema/layout',
         selector: '#sectionIcons',
         viewport: {
             width: 1920,
@@ -1229,8 +1229,8 @@ export default {
             deviceScaleFactor: 3,
         },
     },
-    'forms/layout/section/aside': {
-        url: 'forms/layout',
+    'schema/layout/section/aside': {
+        url: 'schema/layout',
         selector: '#sectionAside',
         viewport: {
             width: 1920,
@@ -1238,8 +1238,8 @@ export default {
             deviceScaleFactor: 3,
         },
     },
-    'forms/layout/section/collapsed': {
-        url: 'forms/layout',
+    'schema/layout/section/collapsed': {
+        url: 'schema/layout',
         selector: '#sectionCollapsed',
         viewport: {
             width: 1920,
@@ -1247,8 +1247,8 @@ export default {
             deviceScaleFactor: 3,
         },
     },
-    'forms/layout/section/compact': {
-        url: 'forms/layout',
+    'schema/layout/section/compact': {
+        url: 'schema/layout',
         selector: '#sectionCompact',
         viewport: {
             width: 1920,
@@ -1256,8 +1256,8 @@ export default {
             deviceScaleFactor: 3,
         },
     },
-    'forms/layout/section/without-header': {
-        url: 'forms/layout',
+    'schema/layout/section/without-header': {
+        url: 'schema/layout',
         selector: '#sectionWithoutHeader',
         viewport: {
             width: 1920,
@@ -1265,8 +1265,8 @@ export default {
             deviceScaleFactor: 3,
         },
     },
-    'forms/layout/split/simple': {
-        url: 'forms/layout',
+    'schema/layout/split/simple': {
+        url: 'schema/layout',
         selector: '#split',
         viewport: {
             width: 1920,
@@ -1274,17 +1274,8 @@ export default {
             deviceScaleFactor: 3,
         },
     },
-    'forms/layout/placeholder/simple': {
-        url: 'forms/layout',
-        selector: '#placeholder',
-        viewport: {
-            width: 1920,
-            height: 640,
-            deviceScaleFactor: 3,
-        },
-    },
-    'forms/layout/actions/anonymous/simple': {
-        url: 'forms/layout',
+    'schema/layout/actions/anonymous/simple': {
+        url: 'schema/layout',
         selector: '#anonymousActions',
         viewport: {
             width: 1920,
@@ -1292,8 +1283,8 @@ export default {
             deviceScaleFactor: 3,
         },
     },
-    'forms/layout/actions/anonymous/full-width': {
-        url: 'forms/layout',
+    'schema/layout/actions/anonymous/full-width': {
+        url: 'schema/layout',
         selector: '#anonymousActionsFullWidth',
         viewport: {
             width: 1920,
@@ -1301,8 +1292,8 @@ export default {
             deviceScaleFactor: 3,
         },
     },
-    'forms/layout/actions/anonymous/horizontally-aligned-center': {
-        url: 'forms/layout',
+    'schema/layout/actions/anonymous/horizontally-aligned-center': {
+        url: 'schema/layout',
         selector: '#anonymousActionsHorizontallyAlignedCenter',
         viewport: {
             width: 1920,
@@ -1310,8 +1301,8 @@ export default {
             deviceScaleFactor: 3,
         },
     },
-    'forms/layout/actions/anonymous/vertically-aligned-end': {
-        url: 'forms/layout',
+    'schema/layout/actions/anonymous/vertically-aligned-end': {
+        url: 'schema/layout',
         selector: '#anonymousActionsVerticallyAlignedEnd',
         viewport: {
             width: 1920,
@@ -1685,168 +1676,6 @@ export default {
             deviceScaleFactor: 3,
         },
     },
-    'infolists/layout/fieldset/simple': {
-        url: 'infolists/layout',
-        selector: '#fieldset',
-        viewport: {
-            width: 1920,
-            height: 640,
-            deviceScaleFactor: 3,
-        },
-    },
-    'infolists/layout/tabs/simple': {
-        url: 'infolists/layout',
-        selector: '#tabs',
-        viewport: {
-            width: 1920,
-            height: 640,
-            deviceScaleFactor: 3,
-        },
-    },
-    'infolists/layout/tabs/icons': {
-        url: 'infolists/layout',
-        selector: '#tabsIcons',
-        viewport: {
-            width: 1920,
-            height: 640,
-            deviceScaleFactor: 3,
-        },
-    },
-    'infolists/layout/tabs/icons-after': {
-        url: 'infolists/layout',
-        selector: '#tabsIconsAfter',
-        viewport: {
-            width: 1920,
-            height: 640,
-            deviceScaleFactor: 3,
-        },
-    },
-    'infolists/layout/tabs/badges': {
-        url: 'infolists/layout',
-        selector: '#tabsBadges',
-        viewport: {
-            width: 1920,
-            height: 640,
-            deviceScaleFactor: 3,
-        },
-    },
-    'infolists/layout/section/simple': {
-        url: 'infolists/layout',
-        selector: '#section',
-        viewport: {
-            width: 1920,
-            height: 640,
-            deviceScaleFactor: 3,
-        },
-    },
-    'infolists/layout/section/header/actions': {
-        url: 'infolists/layout',
-        selector: '#sectionHeaderActions',
-        viewport: {
-            width: 1920,
-            height: 640,
-            deviceScaleFactor: 3,
-        },
-    },
-    'infolists/layout/section/footer/actions': {
-        url: 'infolists/layout',
-        selector: '#sectionFooterActions',
-        viewport: {
-            width: 1920,
-            height: 640,
-            deviceScaleFactor: 3,
-        },
-    },
-    'infolists/layout/section/icons': {
-        url: 'infolists/layout',
-        selector: '#sectionIcons',
-        viewport: {
-            width: 1920,
-            height: 640,
-            deviceScaleFactor: 3,
-        },
-    },
-    'infolists/layout/section/aside': {
-        url: 'infolists/layout',
-        selector: '#sectionAside',
-        viewport: {
-            width: 1920,
-            height: 640,
-            deviceScaleFactor: 3,
-        },
-    },
-    'infolists/layout/section/collapsed': {
-        url: 'infolists/layout',
-        selector: '#sectionCollapsed',
-        viewport: {
-            width: 1920,
-            height: 640,
-            deviceScaleFactor: 3,
-        },
-    },
-    'infolists/layout/section/compact': {
-        url: 'infolists/layout',
-        selector: '#sectionCompact',
-        viewport: {
-            width: 1920,
-            height: 640,
-            deviceScaleFactor: 3,
-        },
-    },
-    'infolists/layout/section/without-header': {
-        url: 'infolists/layout',
-        selector: '#sectionWithoutHeader',
-        viewport: {
-            width: 1920,
-            height: 640,
-            deviceScaleFactor: 3,
-        },
-    },
-    'infolists/layout/split/simple': {
-        url: 'infolists/layout',
-        selector: '#split',
-        viewport: {
-            width: 1920,
-            height: 640,
-            deviceScaleFactor: 3,
-        },
-    },
-    'infolists/layout/actions/anonymous/simple': {
-        url: 'infolists/layout',
-        selector: '#anonymousActions',
-        viewport: {
-            width: 1920,
-            height: 640,
-            deviceScaleFactor: 3,
-        },
-    },
-    'infolists/layout/actions/anonymous/full-width': {
-        url: 'infolists/layout',
-        selector: '#anonymousActionsFullWidth',
-        viewport: {
-            width: 1920,
-            height: 640,
-            deviceScaleFactor: 3,
-        },
-    },
-    'infolists/layout/actions/anonymous/horizontally-aligned-center': {
-        url: 'infolists/layout',
-        selector: '#anonymousActionsHorizontallyAlignedCenter',
-        viewport: {
-            width: 1920,
-            height: 640,
-            deviceScaleFactor: 3,
-        },
-    },
-    'infolists/layout/actions/anonymous/vertically-aligned-end': {
-        url: 'infolists/layout',
-        selector: '#anonymousActionsVerticallyAlignedEnd',
-        viewport: {
-            width: 1920,
-            height: 640,
-            deviceScaleFactor: 3,
-        },
-    },
     'notifications/success': {
         url: 'notifications?method=success',
         selector: 'body',
diff --git a/docs/04-ui/01-overview.md b/docs/04-ui/01-overview.md
index 5981834d7b..95da01683a 100644
--- a/docs/04-ui/01-overview.md
+++ b/docs/04-ui/01-overview.md
@@ -2,8 +2,6 @@
 title: Overview
 ---
 
-## Overview
-
 Filament packages consume a set of core Blade components that aim to provide a consistent and maintainable foundation for all interfaces. Some of these components are also available for use in your own applications and Filament plugins.
 
 ## Available UI components
diff --git a/packages/actions/docs/03-trigger-button.md b/packages/actions/docs/03-trigger-button.md
index 998f8b9e41..bd4838f664 100644
--- a/packages/actions/docs/03-trigger-button.md
+++ b/packages/actions/docs/03-trigger-button.md
@@ -20,7 +20,7 @@ Action::make('edit')
     ->button()
 ```
 
-<AutoScreenshot name="actions/trigger-button/button" alt="Button trigger" version="3.x" />
+<AutoScreenshot name="actions/trigger-button/button" alt="Button trigger" version="4.x" />
 
 "Link" triggers have no background color. They must have a label and optionally an [icon](#setting-an-icon). They look like a link that you might find embedded within text. You can switch to that style with the `link()` method:
 
@@ -29,7 +29,7 @@ Action::make('edit')
     ->link()
 ```
 
-<AutoScreenshot name="actions/trigger-button/link" alt="Link trigger" version="3.x" />
+<AutoScreenshot name="actions/trigger-button/link" alt="Link trigger" version="4.x" />
 
 "Icon button" triggers are circular buttons with an [icon](#setting-an-icon) and no label. You can switch to that style with the `iconButton()` method:
 
@@ -39,7 +39,7 @@ Action::make('edit')
     ->iconButton()
 ```
 
-<AutoScreenshot name="actions/trigger-button/icon-button" alt="Icon button trigger" version="3.x" />
+<AutoScreenshot name="actions/trigger-button/icon-button" alt="Icon button trigger" version="4.x" />
 
 "Badge" triggers have a background color, label, and optionally an [icon](#setting-an-icon). You can use a badge as trigger using the `badge()` method:
 
@@ -48,7 +48,7 @@ Action::make('edit')
     ->badge()
 ```
 
-<AutoScreenshot name="actions/trigger-button/badge" alt="Badge trigger" version="3.x" />
+<AutoScreenshot name="actions/trigger-button/badge" alt="Badge trigger" version="4.x" />
 
 ### Using an icon button on mobile devices only
 
@@ -88,7 +88,7 @@ Action::make('delete')
     ->color('danger')
 ```
 
-<AutoScreenshot name="actions/trigger-button/danger" alt="Red trigger" version="3.x" />
+<AutoScreenshot name="actions/trigger-button/danger" alt="Red trigger" version="4.x" />
 
 ## Setting a size
 
@@ -101,7 +101,7 @@ Action::make('create')
     ->size(ActionSize::Large)
 ```
 
-<AutoScreenshot name="actions/trigger-button/large" alt="Large trigger" version="3.x" />
+<AutoScreenshot name="actions/trigger-button/large" alt="Large trigger" version="4.x" />
 
 ## Setting an icon
 
@@ -113,7 +113,7 @@ Action::make('edit')
     ->icon('heroicon-m-pencil-square')
 ```
 
-<AutoScreenshot name="actions/trigger-button/icon" alt="Trigger with icon" version="3.x" />
+<AutoScreenshot name="actions/trigger-button/icon" alt="Trigger with icon" version="4.x" />
 
 You can also change the icon's position to be after the label instead of before it, using the `iconPosition()` method:
 
@@ -126,7 +126,7 @@ Action::make('edit')
     ->iconPosition(IconPosition::After)
 ```
 
-<AutoScreenshot name="actions/trigger-button/icon-after" alt="Trigger with icon after the label" version="3.x" />
+<AutoScreenshot name="actions/trigger-button/icon-after" alt="Trigger with icon after the label" version="4.x" />
 
 ## Authorization
 
@@ -185,7 +185,7 @@ Action::make('filter')
     ->badge(5)
 ```
 
-<AutoScreenshot name="actions/trigger-button/badged" alt="Trigger with badge" version="3.x" />
+<AutoScreenshot name="actions/trigger-button/badged" alt="Trigger with badge" version="4.x" />
 
 You can also pass a [color](../styling/colors) to be used for the badge:
 
@@ -199,7 +199,7 @@ Action::make('filter')
     ->badgeColor('success')
 ```
 
-<AutoScreenshot name="actions/trigger-button/success-badged" alt="Trigger with green badge" version="3.x" />
+<AutoScreenshot name="actions/trigger-button/success-badged" alt="Trigger with green badge" version="4.x" />
 
 ## Outlined button style
 
@@ -214,7 +214,7 @@ Action::make('edit')
     ->outlined()
 ```
 
-<AutoScreenshot name="actions/trigger-button/outlined" alt="Outlined trigger button" version="3.x" />
+<AutoScreenshot name="actions/trigger-button/outlined" alt="Outlined trigger button" version="4.x" />
 
 ## Adding extra HTML attributes
 
diff --git a/packages/actions/docs/04-modals.md b/packages/actions/docs/04-modals.md
index f708d3f6a1..b6ecd48f87 100644
--- a/packages/actions/docs/04-modals.md
+++ b/packages/actions/docs/04-modals.md
@@ -19,7 +19,7 @@ Action::make('delete')
     ->requiresConfirmation()
 ```
 
-<AutoScreenshot name="actions/modal/confirmation" alt="Confirmation modal" version="3.x" />
+<AutoScreenshot name="actions/modal/confirmation" alt="Confirmation modal" version="4.x" />
 
 > The confirmation modal is not available when a `url()` is set instead of an `action()`. Instead, you should redirect to the URL within the `action()` closure.
 
@@ -47,7 +47,7 @@ Action::make('updateAuthor')
     })
 ```
 
-<AutoScreenshot name="actions/modal/form" alt="Modal with form" version="3.x" />
+<AutoScreenshot name="actions/modal/form" alt="Modal with form" version="4.x" />
 
 ### Filling the form with existing data
 
@@ -76,7 +76,7 @@ Action::make('updateAuthor')
 
 ### Using a wizard as a modal form
 
-You may create a [multistep form wizard](../forms/layout/wizard) inside a modal. Instead of using a `form()`, define a `steps()` array and pass your `Step` objects:
+You may create a [multistep form wizard](../schema/layout/wizard) inside a modal. Instead of using a `form()`, define a `steps()` array and pass your `Step` objects:
 
 ```php
 use Filament\Forms\Components\MarkdownEditor;
@@ -114,7 +114,7 @@ Action::make('create')
     ])
 ```
 
-<AutoScreenshot name="actions/modal/wizard" alt="Modal with wizard" version="3.x" />
+<AutoScreenshot name="actions/modal/wizard" alt="Modal with wizard" version="4.x" />
 
 ### Disabling all form fields
 
@@ -156,7 +156,7 @@ Action::make('delete')
     ->modalSubmitActionLabel('Yes, delete it')
 ```
 
-<AutoScreenshot name="actions/modal/confirmation-custom-text" alt="Confirmation modal with custom text" version="3.x" />
+<AutoScreenshot name="actions/modal/confirmation-custom-text" alt="Confirmation modal with custom text" version="4.x" />
 
 ## Adding an icon inside the modal
 
@@ -171,7 +171,7 @@ Action::make('delete')
     ->modalIcon('heroicon-o-trash')
 ```
 
-<AutoScreenshot name="actions/modal/icon" alt="Confirmation modal with icon" version="3.x" />
+<AutoScreenshot name="actions/modal/icon" alt="Confirmation modal with icon" version="4.x" />
 
 By default, the icon will inherit the color of the action button. You may customize the color of the icon using the `modalIconColor()` method:
 
@@ -286,7 +286,7 @@ Action::make('updateAuthor')
     ->slideOver()
 ```
 
-<AutoScreenshot name="actions/modal/slide-over" alt="Slide over with form" version="3.x" />
+<AutoScreenshot name="actions/modal/slide-over" alt="Slide over with form" version="4.x" />
 
 Instead of opening in the center of the screen, the modal content will now slide in from the right and consume the entire height of the browser.
 
diff --git a/packages/actions/docs/05-grouping-actions.md b/packages/actions/docs/05-grouping-actions.md
index 33202f8225..41e4e6a216 100644
--- a/packages/actions/docs/05-grouping-actions.md
+++ b/packages/actions/docs/05-grouping-actions.md
@@ -15,7 +15,7 @@ ActionGroup::make([
 ])
 ```
 
-<AutoScreenshot name="actions/group/simple" alt="Action group" version="3.x" />
+<AutoScreenshot name="actions/group/simple" alt="Action group" version="4.x" />
 
 This page is about customizing the look of the group's trigger button and dropdown.
 
@@ -36,7 +36,7 @@ ActionGroup::make([
     ->button()
 ```
 
-<AutoScreenshot name="actions/group/customized" alt="Action group with custom trigger style" version="3.x" />
+<AutoScreenshot name="actions/group/customized" alt="Action group with custom trigger style" version="4.x" />
 
 ## Setting the placement of the dropdown
 
@@ -49,7 +49,7 @@ ActionGroup::make([
     ->dropdownPlacement('top-start')
 ```
 
-<AutoScreenshot name="actions/group/placement" alt="Action group with top placement style" version="3.x" />
+<AutoScreenshot name="actions/group/placement" alt="Action group with top placement style" version="4.x" />
 
 ## Adding dividers between actions
 
@@ -66,7 +66,7 @@ ActionGroup::make([
 
 The `dropdown(false)` method puts the actions inside the parent dropdown, instead of a new nested dropdown.
 
-<AutoScreenshot name="actions/group/nested" alt="Action groups nested with dividers" version="3.x" />
+<AutoScreenshot name="actions/group/nested" alt="Action groups nested with dividers" version="4.x" />
 
 ## Setting the width of the dropdown
 
diff --git a/packages/forms/docs/02-getting-started.md b/packages/forms/docs/02-getting-started.md
index 54c7937f80..af0919df09 100644
--- a/packages/forms/docs/02-getting-started.md
+++ b/packages/forms/docs/02-getting-started.md
@@ -5,17 +5,17 @@ import AutoScreenshot from "@components/AutoScreenshot.astro"
 
 ## Overview
 
-Filament's form package allows you to easily build dynamic forms in your app. You can use it to [add a form to any Livewire component](adding-a-form-to-a-livewire-component). Additionally, it's used within other Filament packages to render forms within [app resources](../panels/resources/getting-started), [action modals](../actions/modals), [table filters](../tables/filters/getting-started), and more. Learning how to build forms is essential to learning how to use these Filament packages.
+Filament's form package allows you to easily build dynamic forms in your app. You can use it to [add a form to any Livewire component](adding-a-form-to-a-livewire-component). Additionally, it's used within other Filament packages to render forms within [app resources](../panels/resources), [action modals](../actions/modals), [table filters](../tables/filters/getting-started), and more. Learning how to build forms is essential to learning how to use these Filament packages.
 
-This guide will walk you through the basics of building forms with Filament's form package. If you're planning to add a new form to your own Livewire component, you should [do that first](adding-a-form-to-a-livewire-component) and then come back. If you're adding a form to an [app resource](../panels/resources/getting-started), or another Filament package, you're ready to go!
+This guide will walk you through the basics of building forms with Filament's form package. If you're planning to add a new form to your own Livewire component, you should [do that first](adding-a-form-to-a-livewire-component) and then come back. If you're adding a form to an [app resource](../panels/resources), or another Filament package, you're ready to go!
 
 ## Form schemas
 
-All Filament forms have a "schema". This is an array, which contains [fields](fields/getting-started#available-fields) and [layout components](layout/getting-started#available-layout-components).
+All Filament forms have a "schema". This is an array, which contains [fields](fields#available-fields) and [layout components](../schema/layout#available-layout-components).
 
-Fields are the inputs that your user will fill their data into. For example, HTML's `<input>` or `<select>` elements. Each field has its own PHP class. For example, the [`TextInput`](fields/text-input) class is used to render a text input field, and the [`Select`](fields/select) class is used to render a select field. You can see a full [list of available fields here](fields/getting-started#available-fields).
+Fields are the inputs that your user will fill their data into. For example, HTML's `<input>` or `<select>` elements. Each field has its own PHP class. For example, the [`TextInput`](fields/text-input) class is used to render a text input field, and the [`Select`](fields/select) class is used to render a select field. You can see a full [list of available fields here](fields#available-fields).
 
-Layout components are used to group fields together, and to control how they are displayed. For example, you can use a [`Grid`](layout/grid#grid-component) component to display multiple fields side-by-side, or a [`Wizard`](layout/wizard) to separate fields into a multistep form. You can deeply nest layout components within each other to create very complex responsive UIs. You can see a full [list of available layout components here](layout/getting-started#available-layout-components).
+Layout components are used to group fields together, and to control how they are displayed. For example, you can use a [`Grid`](../schema/layout/grid#grid-component) component to display multiple fields side-by-side, or a [`Wizard`](layout/wizard) to separate fields into a multistep form. You can deeply nest layout components within each other to create very complex responsive UIs. You can see a full [list of available layout components here](layout#available-layout-components).
 
 ### Adding fields to a form schema
 
@@ -37,7 +37,7 @@ public function form(Schema $form): Schema
 }
 ```
 
-<AutoScreenshot name="forms/getting-started/fields" alt="Form fields" version="3.x" />
+<AutoScreenshot name="forms/getting-started/fields" alt="Form fields" version="4.x" />
 
 Forms within a panel and other packages usually have 2 columns by default. For custom forms, you can use the `columns()` method to achieve the same effect:
 
@@ -49,7 +49,7 @@ $form
     ->columns(2);
 ```
 
-<AutoScreenshot name="forms/getting-started/columns" alt="Form fields in 2 columns" version="3.x" />
+<AutoScreenshot name="forms/getting-started/columns" alt="Form fields in 2 columns" version="4.x" />
 
 Now, the `RichEditor` will only consume half of the available width. We can use the `columnSpan()` method to make it span the full width:
 
@@ -65,13 +65,13 @@ use Filament\Forms\Components\TextInput;
 ]
 ```
 
-<AutoScreenshot name="forms/getting-started/column-span" alt="Form fields in 2 columns, but with the rich editor spanning the full width of the form" version="3.x" />
+<AutoScreenshot name="forms/getting-started/column-span" alt="Form fields in 2 columns, but with the rich editor spanning the full width of the form" version="4.x" />
 
-You can learn more about columns and spans in the [layout documentation](layout/grid). You can even make them responsive!
+You can learn more about columns and spans in the [layout documentation](../schema/layout/grid). You can even make them responsive!
 
 ### Adding layout components to a form schema
 
-Let's add a new [`Section`](layout/section) to our form. `Section` is a layout component, and it allows you to add a heading and description to a set of fields. It can also allow fields inside it to collapse, which saves space in long forms.
+Let's add a new [`Section`](../schema/layout/section) to our form. `Section` is a layout component, and it allows you to add a heading and description to a set of fields. It can also allow fields inside it to collapse, which saves space in long forms.
 
 ```php
 use Filament\Forms\Components\RichEditor;
@@ -111,7 +111,7 @@ Section::make('Publishing')
     ])
 ```
 
-<AutoScreenshot name="forms/getting-started/section" alt="Form with section component" version="3.x" />
+<AutoScreenshot name="forms/getting-started/section" alt="Form with section component" version="4.x" />
 
 This section now contains a [`Select` field](fields/select) and a [`DateTimePicker` field](fields/date-time-picker). You can learn more about those fields and their functionalities on the respective docs pages.
 
@@ -207,7 +207,7 @@ use Illuminate\Support\Str;
 
 Now you've finished reading this guide, where to next? Here are some suggestions:
 
-- [Explore the available fields to collect input from your users.](fields/getting-started#available-fields)
-- [Check out the list of layout components to craft intuitive form structures with.](fields/getting-started#available-fields)
+- [Explore the available fields to collect input from your users.](fields#available-fields)
+- [Check out the list of layout components to craft intuitive form structures with.](fields#available-fields)
 - [Find out about all advanced techniques that you can customize forms to your needs.](advanced)
 - [Write automated tests for your forms using our suite of helper methods.](testing)
diff --git a/packages/forms/docs/03-fields/01-getting-started.md b/packages/forms/docs/03-fields/01-overview.md
similarity index 95%
rename from packages/forms/docs/03-fields/01-getting-started.md
rename to packages/forms/docs/03-fields/01-overview.md
index c3b29c2c0e..fd9079d276 100644
--- a/packages/forms/docs/03-fields/01-getting-started.md
+++ b/packages/forms/docs/03-fields/01-overview.md
@@ -1,5 +1,5 @@
 ---
-title: Getting started
+title: Overview
 ---
 import AutoScreenshot from "@components/AutoScreenshot.astro"
 
@@ -7,7 +7,7 @@ import AutoScreenshot from "@components/AutoScreenshot.astro"
 
 Field classes can be found in the `Filament\Form\Components` namespace.
 
-Fields reside within the schema of your form, alongside any [layout components](layout/getting-started).
+Fields reside within the schema of your form, alongside any [layout components](../schema/layout).
 
 Fields may be created using the static `make()` method, passing its unique name. The name of the field should correspond to a property on your Livewire component. You may use "dot notation" to bind fields to keys in arrays.
 
@@ -17,7 +17,7 @@ use Filament\Forms\Components\TextInput;
 TextInput::make('name')
 ```
 
-<AutoScreenshot name="forms/fields/simple" alt="Form field" version="3.x" />
+<AutoScreenshot name="forms/fields/simple" alt="Form field" version="4.x" />
 
 ## Available fields
 
@@ -77,7 +77,7 @@ TextInput::make('name')
 
 ## Setting a default value
 
-Fields may have a default value. This will be filled if the [form's `fill()` method](getting-started#default-data) is called without any arguments. To define a default value, use the `default()` method:
+Fields may have a default value. This will be filled if the form's `fill()` method is called without any arguments. To define a default value, use the `default()` method:
 
 ```php
 use Filament\Forms\Components\TextInput;
@@ -117,7 +117,7 @@ TextInput::make('name')
     ->helperText(view('name-helper-text'))
 ```
 
-<AutoScreenshot name="forms/fields/helper-text" alt="Form field with helper text" version="3.x" />
+<AutoScreenshot name="forms/fields/helper-text" alt="Form field with helper text" version="4.x" />
 
 ## Adding a hint next to the label
 
@@ -148,7 +148,7 @@ TextInput::make('password')
     ->hint(view('forgotten-password-hint'))
 ```
 
-<AutoScreenshot name="forms/fields/hint" alt="Form field with hint" version="3.x" />
+<AutoScreenshot name="forms/fields/hint" alt="Form field with hint" version="4.x" />
 
 ### Changing the text color of the hint
 
@@ -162,7 +162,7 @@ RichEditor::make('content')
     ->hintColor('primary')
 ```
 
-<AutoScreenshot name="forms/fields/hint-color" alt="Form field with hint color" version="3.x" />
+<AutoScreenshot name="forms/fields/hint-color" alt="Form field with hint color" version="4.x" />
 
 ### Adding an icon aside the hint
 
@@ -176,7 +176,7 @@ RichEditor::make('content')
     ->hintIcon('heroicon-m-language')
 ```
 
-<AutoScreenshot name="forms/fields/hint-icon" alt="Form field with hint icon" version="3.x" />
+<AutoScreenshot name="forms/fields/hint-icon" alt="Form field with hint icon" version="4.x" />
 
 #### Adding a tooltip to a hint icon
 
@@ -229,7 +229,7 @@ TextInput::make('name')
     ->disabled()
 ```
 
-<AutoScreenshot name="forms/fields/disabled" alt="Disabled form field" version="3.x" />
+<AutoScreenshot name="forms/fields/disabled" alt="Disabled form field" version="4.x" />
 
 Optionally, you may pass a boolean value to control if the field should be disabled or not:
 
@@ -292,7 +292,7 @@ TextInput::make('name')
     ->placeholder('John Doe')
 ```
 
-<AutoScreenshot name="forms/fields/placeholder" alt="Form field with placeholder" version="3.x" />
+<AutoScreenshot name="forms/fields/placeholder" alt="Form field with placeholder" version="4.x" />
 
 ## Marking a field as required
 
diff --git a/packages/forms/docs/03-fields/02-text-input.md b/packages/forms/docs/03-fields/02-text-input.md
index 240b96e421..727ace3e0d 100644
--- a/packages/forms/docs/03-fields/02-text-input.md
+++ b/packages/forms/docs/03-fields/02-text-input.md
@@ -13,7 +13,7 @@ use Filament\Forms\Components\TextInput;
 TextInput::make('name')
 ```
 
-<AutoScreenshot name="forms/fields/text-input/simple" alt="Text input" version="3.x" />
+<AutoScreenshot name="forms/fields/text-input/simple" alt="Text input" version="4.x" />
 
 ## Setting the HTML input type
 
@@ -130,7 +130,7 @@ TextInput::make('domain')
     ->suffix('.com')
 ```
 
-<AutoScreenshot name="forms/fields/text-input/affix" alt="Text input with affixes" version="3.x" />
+<AutoScreenshot name="forms/fields/text-input/affix" alt="Text input with affixes" version="4.x" />
 
 ### Using icons as affixes
 
@@ -144,7 +144,7 @@ TextInput::make('domain')
     ->suffixIcon('heroicon-m-globe-alt')
 ```
 
-<AutoScreenshot name="forms/fields/text-input/suffix-icon" alt="Text input with suffix icon" version="3.x" />
+<AutoScreenshot name="forms/fields/text-input/suffix-icon" alt="Text input with suffix icon" version="4.x" />
 
 #### Setting the affix icon's color
 
@@ -171,7 +171,7 @@ TextInput::make('password')
     ->revealable()
 ```
 
-<AutoScreenshot name="forms/fields/text-input/revealable-password" alt="Text input with revealable password" version="3.x" />
+<AutoScreenshot name="forms/fields/text-input/revealable-password" alt="Text input with revealable password" version="4.x" />
 
 ## Input masking
 
@@ -213,7 +213,7 @@ TextInput::make('amount')
 
 ## Making the field read-only
 
-Not to be confused with [disabling the field](getting-started#disabling-a-field), you may make the field "read-only" using the `readOnly()` method:
+Not to be confused with [disabling the field](overview#disabling-a-field), you may make the field "read-only" using the `readOnly()` method:
 
 ```php
 use Filament\Forms\Components\TextInput;
@@ -222,7 +222,7 @@ TextInput::make('name')
     ->readOnly()
 ```
 
-There are a few differences, compared to [`disabled()`](getting-started#disabling-a-field):
+There are a few differences, compared to [`disabled()`](overview#disabling-a-field):
 
 - When using `readOnly()`, the field will still be sent to the server when the form is submitted. It can be mutated with the browser console, or via JavaScript. You can use [`dehydrated(false)`](advanced#preventing-a-field-from-being-dehydrated) to prevent this.
 - There are no styling changes, such as less opacity, when using `readOnly()`.
diff --git a/packages/forms/docs/03-fields/03-select.md b/packages/forms/docs/03-fields/03-select.md
index 88bc26e266..a13619cd93 100644
--- a/packages/forms/docs/03-fields/03-select.md
+++ b/packages/forms/docs/03-fields/03-select.md
@@ -26,7 +26,7 @@ Select::make('status')
     ])
 ```
 
-<AutoScreenshot name="forms/fields/select/simple" alt="Select" version="3.x" />
+<AutoScreenshot name="forms/fields/select/simple" alt="Select" version="4.x" />
 
 ## Enabling the JavaScript select
 
@@ -44,7 +44,7 @@ Select::make('status')
     ->native(false)
 ```
 
-<AutoScreenshot name="forms/fields/select/javascript" alt="JavaScript select" version="3.x" />
+<AutoScreenshot name="forms/fields/select/javascript" alt="JavaScript select" version="4.x" />
 
 ## Searching options
 
@@ -59,7 +59,7 @@ Select::make('author_id')
     ->searchable()
 ```
 
-<AutoScreenshot name="forms/fields/select/searchable" alt="Searchable select" version="3.x" />
+<AutoScreenshot name="forms/fields/select/searchable" alt="Searchable select" version="4.x" />
 
 ### Returning custom search results
 
@@ -95,7 +95,7 @@ Select::make('technologies')
     ])
 ```
 
-<AutoScreenshot name="forms/fields/select/multiple" alt="Multi-select" version="3.x" />
+<AutoScreenshot name="forms/fields/select/multiple" alt="Multi-select" version="4.x" />
 
 These options are returned in JSON format. If you're saving them using Eloquent, you should be sure to add an `array` [cast](https://laravel.com/docs/eloquent-mutators#array-and-json-casting) to the model property:
 
@@ -143,7 +143,7 @@ Select::make('status')
     ])
 ```
 
-<AutoScreenshot name="forms/fields/select/grouped" alt="Grouped select" version="3.x" />
+<AutoScreenshot name="forms/fields/select/grouped" alt="Grouped select" version="4.x" />
 
 ## Integrating with an Eloquent relationship
 
@@ -299,11 +299,11 @@ Select::make('author_id')
     ]),
 ```
 
-<AutoScreenshot name="forms/fields/select/create-option" alt="Select with create option button" version="3.x" />
+<AutoScreenshot name="forms/fields/select/create-option" alt="Select with create option button" version="4.x" />
 
 The form opens in a modal, where the user can fill it with data. Upon form submission, the new record is selected by the field.
 
-<AutoScreenshot name="forms/fields/select/create-option-modal" alt="Select with create option modal" version="3.x" />
+<AutoScreenshot name="forms/fields/select/create-option-modal" alt="Select with create option modal" version="4.x" />
 
 #### Customizing new option creation
 
@@ -340,11 +340,11 @@ Select::make('author_id')
     ]),
 ```
 
-<AutoScreenshot name="forms/fields/select/edit-option" alt="Select with edit option button" version="3.x" />
+<AutoScreenshot name="forms/fields/select/edit-option" alt="Select with edit option button" version="4.x" />
 
 The form opens in a modal, where the user can fill it with data. Upon form submission, the data from the form is saved back to the record.
 
-<AutoScreenshot name="forms/fields/select/edit-option-modal" alt="Select with edit option modal" version="3.x" />
+<AutoScreenshot name="forms/fields/select/edit-option-modal" alt="Select with edit option modal" version="4.x" />
 
 ### Handling `MorphTo` relationships
 
@@ -483,7 +483,7 @@ Select::make('domain')
     ->suffix('.com')
 ```
 
-<AutoScreenshot name="forms/fields/select/affix" alt="Select with affixes" version="3.x" />
+<AutoScreenshot name="forms/fields/select/affix" alt="Select with affixes" version="4.x" />
 
 ### Using icons as affixes
 
@@ -496,7 +496,7 @@ Select::make('domain')
     ->suffixIcon('heroicon-m-globe-alt')
 ```
 
-<AutoScreenshot name="forms/fields/select/suffix-icon" alt="Select with suffix icon" version="3.x" />
+<AutoScreenshot name="forms/fields/select/suffix-icon" alt="Select with suffix icon" version="4.x" />
 
 #### Setting the affix icon's color
 
diff --git a/packages/forms/docs/03-fields/04-checkbox.md b/packages/forms/docs/03-fields/04-checkbox.md
index 7410672c0b..4cc04ef68f 100644
--- a/packages/forms/docs/03-fields/04-checkbox.md
+++ b/packages/forms/docs/03-fields/04-checkbox.md
@@ -13,7 +13,7 @@ use Filament\Forms\Components\Checkbox;
 Checkbox::make('is_admin')
 ```
 
-<AutoScreenshot name="forms/fields/checkbox/simple" alt="Checkbox" version="3.x" />
+<AutoScreenshot name="forms/fields/checkbox/simple" alt="Checkbox" version="4.x" />
 
 If you're saving the boolean value using Eloquent, you should be sure to add a `boolean` [cast](https://laravel.com/docs/eloquent-mutators#attribute-casting) to the model property:
 
@@ -42,7 +42,7 @@ use Filament\Forms\Components\Checkbox;
 Checkbox::make('is_admin')->inline()
 ```
 
-<AutoScreenshot name="forms/fields/checkbox/inline" alt="Checkbox with its label inline" version="3.x" />
+<AutoScreenshot name="forms/fields/checkbox/inline" alt="Checkbox with its label inline" version="4.x" />
 
 When the checkbox is stacked, its label is above it:
 
@@ -52,7 +52,7 @@ use Filament\Forms\Components\Checkbox;
 Checkbox::make('is_admin')->inline(false)
 ```
 
-<AutoScreenshot name="forms/fields/checkbox/not-inline" alt="Checkbox with its label above" version="3.x" />
+<AutoScreenshot name="forms/fields/checkbox/not-inline" alt="Checkbox with its label above" version="4.x" />
 
 ## Checkbox validation
 
diff --git a/packages/forms/docs/03-fields/05-toggle.md b/packages/forms/docs/03-fields/05-toggle.md
index 192fa7e459..e73a4dd1ce 100644
--- a/packages/forms/docs/03-fields/05-toggle.md
+++ b/packages/forms/docs/03-fields/05-toggle.md
@@ -13,7 +13,7 @@ use Filament\Forms\Components\Toggle;
 Toggle::make('is_admin')
 ```
 
-<AutoScreenshot name="forms/fields/toggle/simple" alt="Toggle" version="3.x" />
+<AutoScreenshot name="forms/fields/toggle/simple" alt="Toggle" version="4.x" />
 
 If you're saving the boolean value using Eloquent, you should be sure to add a `boolean` [cast](https://laravel.com/docs/eloquent-mutators#attribute-casting) to the model property:
 
@@ -42,7 +42,7 @@ Toggle::make('is_admin')
     ->offIcon('heroicon-m-user')
 ```
 
-<AutoScreenshot name="forms/fields/toggle/icons" alt="Toggle icons" version="3.x" />
+<AutoScreenshot name="forms/fields/toggle/icons" alt="Toggle icons" version="4.x" />
 
 ## Customizing the color of the toggle button
 
@@ -56,9 +56,9 @@ Toggle::make('is_admin')
     ->offColor('danger')
 ```
 
-<AutoScreenshot name="forms/fields/toggle/off-color" alt="Toggle off color" version="3.x" />
+<AutoScreenshot name="forms/fields/toggle/off-color" alt="Toggle off color" version="4.x" />
 
-<AutoScreenshot name="forms/fields/toggle/on-color" alt="Toggle on color" version="3.x" />
+<AutoScreenshot name="forms/fields/toggle/on-color" alt="Toggle on color" version="4.x" />
 
 ## Positioning the label above
 
@@ -73,7 +73,7 @@ Toggle::make('is_admin')
     ->inline()
 ```
 
-<AutoScreenshot name="forms/fields/toggle/inline" alt="Toggle with its label inline" version="3.x" />
+<AutoScreenshot name="forms/fields/toggle/inline" alt="Toggle with its label inline" version="4.x" />
 
 When the toggle is stacked, its label is above it:
 
@@ -84,7 +84,7 @@ Toggle::make('is_admin')
     ->inline(false)
 ```
 
-<AutoScreenshot name="forms/fields/toggle/not-inline" alt="Toggle with its label above" version="3.x" />
+<AutoScreenshot name="forms/fields/toggle/not-inline" alt="Toggle with its label above" version="4.x" />
 
 ## Toggle validation
 
diff --git a/packages/forms/docs/03-fields/06-checkbox-list.md b/packages/forms/docs/03-fields/06-checkbox-list.md
index 8aba07f5bf..f501ff685c 100644
--- a/packages/forms/docs/03-fields/06-checkbox-list.md
+++ b/packages/forms/docs/03-fields/06-checkbox-list.md
@@ -28,7 +28,7 @@ CheckboxList::make('technologies')
     ])
 ```
 
-<AutoScreenshot name="forms/fields/checkbox-list/simple" alt="Checkbox list" version="3.x" />
+<AutoScreenshot name="forms/fields/checkbox-list/simple" alt="Checkbox list" version="4.x" />
 
 These options are returned in JSON format. If you're saving them using Eloquent, you should be sure to add an `array` [cast](https://laravel.com/docs/eloquent-mutators#array-and-json-casting) to the model property:
 
@@ -68,7 +68,7 @@ CheckboxList::make('technologies')
     ])
 ```
 
-<AutoScreenshot name="forms/fields/checkbox-list/option-descriptions" alt="Checkbox list with option descriptions" version="3.x" />
+<AutoScreenshot name="forms/fields/checkbox-list/option-descriptions" alt="Checkbox list with option descriptions" version="4.x" />
 
 Be sure to use the same `key` in the descriptions array as the `key` in the option array so the right description matches the right option.
 
@@ -86,9 +86,9 @@ CheckboxList::make('technologies')
     ->columns(2)
 ```
 
-<AutoScreenshot name="forms/fields/checkbox-list/columns" alt="Checkbox list with 2 columns" version="3.x" />
+<AutoScreenshot name="forms/fields/checkbox-list/columns" alt="Checkbox list with 2 columns" version="4.x" />
 
-This method accepts the same options as the `columns()` method of the [grid](layout/grid). This allows you to responsively customize the number of columns at various breakpoints.
+This method accepts the same options as the `columns()` method of the [grid](../../schema/layout/grid). This allows you to responsively customize the number of columns at various breakpoints.
 
 ### Setting the grid direction
 
@@ -105,7 +105,7 @@ CheckboxList::make('technologies')
     ->gridDirection('row')
 ```
 
-<AutoScreenshot name="forms/fields/checkbox-list/rows" alt="Checkbox list with 2 rows" version="3.x" />
+<AutoScreenshot name="forms/fields/checkbox-list/rows" alt="Checkbox list with 2 rows" version="4.x" />
 
 ## Disabling specific options
 
@@ -155,7 +155,7 @@ CheckboxList::make('technologies')
     ->searchable()
 ```
 
-<AutoScreenshot name="forms/fields/checkbox-list/searchable" alt="Searchable checkbox list" version="3.x" />
+<AutoScreenshot name="forms/fields/checkbox-list/searchable" alt="Searchable checkbox list" version="4.x" />
 
 ## Bulk toggling checkboxes
 
@@ -171,7 +171,7 @@ CheckboxList::make('technologies')
     ->bulkToggleable()
 ```
 
-<AutoScreenshot name="forms/fields/checkbox-list/bulk-toggleable" alt="Bulk toggleable checkbox list" version="3.x" />
+<AutoScreenshot name="forms/fields/checkbox-list/bulk-toggleable" alt="Bulk toggleable checkbox list" version="4.x" />
 
 ## Integrating with an Eloquent relationship
 
diff --git a/packages/forms/docs/03-fields/07-radio.md b/packages/forms/docs/03-fields/07-radio.md
index 4f5949265f..5b47f7e559 100644
--- a/packages/forms/docs/03-fields/07-radio.md
+++ b/packages/forms/docs/03-fields/07-radio.md
@@ -18,7 +18,7 @@ Radio::make('status')
     ])
 ```
 
-<AutoScreenshot name="forms/fields/radio/simple" alt="Radio" version="3.x" />
+<AutoScreenshot name="forms/fields/radio/simple" alt="Radio" version="4.x" />
 
 ## Setting option descriptions
 
@@ -40,7 +40,7 @@ Radio::make('status')
     ])
 ```
 
-<AutoScreenshot name="forms/fields/radio/option-descriptions" alt="Radio with option descriptions" version="3.x" />
+<AutoScreenshot name="forms/fields/radio/option-descriptions" alt="Radio with option descriptions" version="4.x" />
 
 Be sure to use the same `key` in the descriptions array as the `key` in the option array so the right description matches the right option.
 
@@ -56,7 +56,7 @@ Radio::make('feedback')
     ->boolean()
 ```
 
-<AutoScreenshot name="forms/fields/radio/boolean" alt="Boolean radio" version="3.x" />
+<AutoScreenshot name="forms/fields/radio/boolean" alt="Boolean radio" version="4.x" />
 
 ## Positioning the options inline with each other
 
@@ -71,7 +71,7 @@ Radio::make('feedback')
     ->inline()
 ```
 
-<AutoScreenshot name="forms/fields/radio/inline" alt="Inline toggle buttons" version="3.x" />
+<AutoScreenshot name="forms/fields/radio/inline" alt="Inline toggle buttons" version="4.x" />
 
 ## Disabling specific options
 
@@ -89,7 +89,7 @@ Radio::make('status')
     ->disableOptionWhen(fn (string $value): bool => $value === 'published')
 ```
 
-<AutoScreenshot name="forms/fields/radio/disabled-option" alt="Radio with disabled option" version="3.x" />
+<AutoScreenshot name="forms/fields/radio/disabled-option" alt="Radio with disabled option" version="4.x" />
 
 If you want to retrieve the options that have not been disabled, e.g. for validation purposes, you can do so using `getEnabledOptions()`:
 
diff --git a/packages/forms/docs/03-fields/08-date-time-picker.md b/packages/forms/docs/03-fields/08-date-time-picker.md
index 85a85bd4ca..b1a78d4706 100644
--- a/packages/forms/docs/03-fields/08-date-time-picker.md
+++ b/packages/forms/docs/03-fields/08-date-time-picker.md
@@ -17,7 +17,7 @@ DatePicker::make('date_of_birth')
 TimePicker::make('alarm_at')
 ```
 
-<AutoScreenshot name="forms/fields/date-time-picker/simple" alt="Date time pickers" version="3.x" />
+<AutoScreenshot name="forms/fields/date-time-picker/simple" alt="Date time pickers" version="4.x" />
 
 ## Customizing the storage format
 
@@ -41,7 +41,7 @@ DateTimePicker::make('published_at')
     ->seconds(false)
 ```
 
-<AutoScreenshot name="forms/fields/date-time-picker/without-seconds" alt="Date time picker without seconds" version="3.x" />
+<AutoScreenshot name="forms/fields/date-time-picker/without-seconds" alt="Date time picker without seconds" version="4.x" />
 
 ## Timezones
 
@@ -67,7 +67,7 @@ DatePicker::make('date_of_birth')
     ->native(false)
 ```
 
-<AutoScreenshot name="forms/fields/date-time-picker/javascript" alt="JavaScript-based date time picker" version="3.x" />
+<AutoScreenshot name="forms/fields/date-time-picker/javascript" alt="JavaScript-based date time picker" version="4.x" />
 
 Please be aware that while being accessible, the JavaScript date picker does not support full keyboard input in the same way that the native date picker does. If you require full keyboard input, you should use the native date picker.
 
@@ -83,7 +83,7 @@ DatePicker::make('date_of_birth')
     ->displayFormat('d/m/Y')
 ```
 
-<AutoScreenshot name="forms/fields/date-time-picker/display-format" alt="Date time picker with custom display format" version="3.x" />
+<AutoScreenshot name="forms/fields/date-time-picker/display-format" alt="Date time picker with custom display format" version="4.x" />
 
 You may also configure the locale that is used when rendering the display, if you want to use different locale from your app config. For this, you can use the `locale()` method:
 
@@ -122,7 +122,7 @@ DateTimePicker::make('published_at')
     ->firstDayOfWeek(7)
 ```
 
-<AutoScreenshot name="forms/fields/date-time-picker/week-starts-on-sunday" alt="Date time picker where the week starts on Sunday" version="3.x" />
+<AutoScreenshot name="forms/fields/date-time-picker/week-starts-on-sunday" alt="Date time picker where the week starts on Sunday" version="4.x" />
 
 There are additionally convenient helper methods to set the first day of the week more semantically:
 
@@ -150,7 +150,7 @@ DateTimePicker::make('date')
     ->disabledDates(['2000-01-03', '2000-01-15', '2000-01-20'])
 ```
 
-<AutoScreenshot name="forms/fields/date-time-picker/disabled-dates" alt="Date time picker where dates are disabled" version="3.x" />
+<AutoScreenshot name="forms/fields/date-time-picker/disabled-dates" alt="Date time picker where dates are disabled" version="4.x" />
 
 ### Closing the picker when a date is selected
 
@@ -197,7 +197,7 @@ DatePicker::make('date')
     ->suffix('at midnight')
 ```
 
-<AutoScreenshot name="forms/fields/date-time-picker/affix" alt="Date time picker with affixes" version="3.x" />
+<AutoScreenshot name="forms/fields/date-time-picker/affix" alt="Date time picker with affixes" version="4.x" />
 
 ### Using icons as affixes
 
@@ -210,7 +210,7 @@ TimePicker::make('at')
     ->prefixIcon('heroicon-m-play')
 ```
 
-<AutoScreenshot name="forms/fields/date-time-picker/prefix-icon" alt="Date time picker with prefix icon" version="3.x" />
+<AutoScreenshot name="forms/fields/date-time-picker/prefix-icon" alt="Date time picker with prefix icon" version="4.x" />
 
 #### Setting the affix icon's color
 
@@ -226,7 +226,7 @@ TimePicker::make('at')
 
 ## Making the field read-only
 
-Not to be confused with [disabling the field](getting-started#disabling-a-field), you may make the field "read-only" using the `readonly()` method:
+Not to be confused with [disabling the field](overview#disabling-a-field), you may make the field "read-only" using the `readonly()` method:
 
 ```php
 use Filament\Forms\Components\DatePicker;
@@ -235,9 +235,9 @@ DatePicker::make('date_of_birth')
     ->readonly()
 ```
 
-Please note that this setting is only enforced on native date pickers. If you're using the [JavaScript date picker](#enabling-the-javascript-date-picker), you'll need to use [`disabled()`](getting-started#disabling-a-field).
+Please note that this setting is only enforced on native date pickers. If you're using the [JavaScript date picker](#enabling-the-javascript-date-picker), you'll need to use [`disabled()`](overview#disabling-a-field).
 
-There are a few differences, compared to [`disabled()`](getting-started#disabling-a-field):
+There are a few differences, compared to [`disabled()`](overview#disabling-a-field):
 
 - When using `readOnly()`, the field will still be sent to the server when the form is submitted. It can be mutated with the browser console, or via JavaScript. You can use [`dehydrated(false)`](advanced#preventing-a-field-from-being-dehydrated) to prevent this.
 - There are no styling changes, such as less opacity, when using `readOnly()`.
diff --git a/packages/forms/docs/03-fields/09-file-upload.md b/packages/forms/docs/03-fields/09-file-upload.md
index 7975682b52..ea684b9fc7 100644
--- a/packages/forms/docs/03-fields/09-file-upload.md
+++ b/packages/forms/docs/03-fields/09-file-upload.md
@@ -21,7 +21,7 @@ use Filament\Forms\Components\FileUpload;
 FileUpload::make('attachment')
 ```
 
-<AutoScreenshot name="forms/fields/file-upload/simple" alt="File upload" version="3.x" />
+<AutoScreenshot name="forms/fields/file-upload/simple" alt="File upload" version="4.x" />
 
 > Filament also supports [`spatie/laravel-medialibrary`](https://github.com/spatie/laravel-medialibrary). See our [plugin documentation](/plugins/filament-spatie-media-library) for more information.
 
diff --git a/packages/forms/docs/03-fields/10-rich-editor.md b/packages/forms/docs/03-fields/10-rich-editor.md
index f3f35d47dd..0280ee442c 100644
--- a/packages/forms/docs/03-fields/10-rich-editor.md
+++ b/packages/forms/docs/03-fields/10-rich-editor.md
@@ -13,7 +13,7 @@ use Filament\Forms\Components\RichEditor;
 RichEditor::make('content')
 ```
 
-<AutoScreenshot name="forms/fields/rich-editor/simple" alt="Rich editor" version="3.x" />
+<AutoScreenshot name="forms/fields/rich-editor/simple" alt="Rich editor" version="4.x" />
 
 ## Customizing the toolbar buttons
 
diff --git a/packages/forms/docs/03-fields/11-markdown-editor.md b/packages/forms/docs/03-fields/11-markdown-editor.md
index 5a8c2ffaf7..096a152c02 100644
--- a/packages/forms/docs/03-fields/11-markdown-editor.md
+++ b/packages/forms/docs/03-fields/11-markdown-editor.md
@@ -13,7 +13,7 @@ use Filament\Forms\Components\MarkdownEditor;
 MarkdownEditor::make('content')
 ```
 
-<AutoScreenshot name="forms/fields/markdown-editor/simple" alt="Markdown editor" version="3.x" />
+<AutoScreenshot name="forms/fields/markdown-editor/simple" alt="Markdown editor" version="4.x" />
 
 ## Customizing the toolbar buttons
 
diff --git a/packages/forms/docs/03-fields/12-repeater.md b/packages/forms/docs/03-fields/12-repeater.md
index 3c410e2d96..f85148820e 100644
--- a/packages/forms/docs/03-fields/12-repeater.md
+++ b/packages/forms/docs/03-fields/12-repeater.md
@@ -26,7 +26,7 @@ Repeater::make('members')
     ->columns(2)
 ```
 
-<AutoScreenshot name="forms/fields/repeater/simple" alt="Repeater" version="3.x" />
+<AutoScreenshot name="forms/fields/repeater/simple" alt="Repeater" version="4.x" />
 
 We recommend that you store repeater data with a `JSON` column in your database. Additionally, if you're using Eloquent, make sure that column has an `array` cast.
 
@@ -143,7 +143,7 @@ Repeater::make('members')
     ->reorderableWithButtons()
 ```
 
-<AutoScreenshot name="forms/fields/repeater/reorderable-with-buttons" alt="Repeater that is reorderable with buttons" version="3.x" />
+<AutoScreenshot name="forms/fields/repeater/reorderable-with-buttons" alt="Repeater that is reorderable with buttons" version="4.x" />
 
 ### Preventing reordering with drag and drop
 
@@ -185,7 +185,7 @@ Repeater::make('qualifications')
     ->collapsed()
 ```
 
-<AutoScreenshot name="forms/fields/repeater/collapsed" alt="Collapsed repeater" version="3.x" />
+<AutoScreenshot name="forms/fields/repeater/collapsed" alt="Collapsed repeater" version="4.x" />
 
 ## Cloning items
 
@@ -201,7 +201,7 @@ Repeater::make('qualifications')
     ->cloneable()
 ```
 
-<AutoScreenshot name="forms/fields/repeater/cloneable" alt="Cloneable repeater" version="3.x" />
+<AutoScreenshot name="forms/fields/repeater/cloneable" alt="Cloneable repeater" version="4.x" />
 
 ## Integrating with an Eloquent relationship
 
@@ -384,9 +384,9 @@ Repeater::make('qualifications')
     ->grid(2)
 ```
 
-<AutoScreenshot name="forms/fields/repeater/grid" alt="Repeater with a 2 column grid of items" version="3.x" />
+<AutoScreenshot name="forms/fields/repeater/grid" alt="Repeater with a 2 column grid of items" version="4.x" />
 
-This method accepts the same options as the `columns()` method of the [grid](../layout/grid). This allows you to responsively customize the number of grid columns at various breakpoints.
+This method accepts the same options as the `columns()` method of the [grid](../../schema/layout/grid). This allows you to responsively customize the number of grid columns at various breakpoints.
 
 ## Adding a label to repeater items based on their content
 
@@ -416,7 +416,7 @@ Repeater::make('members')
 
 Any fields that you use from `$state` should be `live()` if you wish to see the item label update live as you use the form.
 
-<AutoScreenshot name="forms/fields/repeater/labelled" alt="Repeater with item labels" version="3.x" />
+<AutoScreenshot name="forms/fields/repeater/labelled" alt="Repeater with item labels" version="4.x" />
 
 ## Simple repeaters with one field
 
@@ -434,7 +434,7 @@ Repeater::make('invitations')
     )
 ```
 
-<AutoScreenshot name="forms/fields/repeater/simple-one-field" alt="Simple repeater design with only one field" version="3.x" />
+<AutoScreenshot name="forms/fields/repeater/simple-one-field" alt="Simple repeater design with only one field" version="4.x" />
 
 Instead of using a nested array to store data, simple repeaters use a flat array of values. This means that the data structure for the above example could look like this:
 
diff --git a/packages/forms/docs/03-fields/13-builder.md b/packages/forms/docs/03-fields/13-builder.md
index b4ca39e196..0df8b1a0bd 100644
--- a/packages/forms/docs/03-fields/13-builder.md
+++ b/packages/forms/docs/03-fields/13-builder.md
@@ -54,7 +54,7 @@ Builder::make('content')
     ])
 ```
 
-<AutoScreenshot name="forms/fields/builder/simple" alt="Builder" version="3.x" />
+<AutoScreenshot name="forms/fields/builder/simple" alt="Builder" version="4.x" />
 
 We recommend that you store builder data with a `JSON` column in your database. Additionally, if you're using Eloquent, make sure that column has an `array` cast.
 
@@ -112,7 +112,7 @@ Builder\Block::make('heading')
 
 Any fields that you use from `$state` should be `live()` if you wish to see the item label update live as you use the form.
 
-<AutoScreenshot name="forms/fields/builder/labelled" alt="Builder with labelled blocks based on the content" version="3.x" />
+<AutoScreenshot name="forms/fields/builder/labelled" alt="Builder with labelled blocks based on the content" version="4.x" />
 
 ### Numbering builder items
 
@@ -139,7 +139,7 @@ Builder\Block::make('paragraph')
     ->icon('heroicon-m-bars-3-bottom-left')
 ```
 
-<AutoScreenshot name="forms/fields/builder/icons" alt="Builder with block icons in the dropdown" version="3.x" />
+<AutoScreenshot name="forms/fields/builder/icons" alt="Builder with block icons in the dropdown" version="4.x" />
 
 ### Adding icons to the header of blocks
 
@@ -237,7 +237,7 @@ Builder::make('content')
     ->reorderableWithButtons()
 ```
 
-<AutoScreenshot name="forms/fields/builder/reorderable-with-buttons" alt="Builder that is reorderable with buttons" version="3.x" />
+<AutoScreenshot name="forms/fields/builder/reorderable-with-buttons" alt="Builder that is reorderable with buttons" version="4.x" />
 
 ### Preventing reordering with drag and drop
 
@@ -279,7 +279,7 @@ Builder::make('content')
     ->collapsed()
 ```
 
-<AutoScreenshot name="forms/fields/builder/collapsed" alt="Collapsed builder" version="3.x" />
+<AutoScreenshot name="forms/fields/builder/collapsed" alt="Collapsed builder" version="4.x" />
 
 ## Cloning items
 
@@ -295,7 +295,7 @@ Builder::make('content')
     ->cloneable()
 ```
 
-<AutoScreenshot name="forms/fields/builder/cloneable" alt="Builder repeater" version="3.x" />
+<AutoScreenshot name="forms/fields/builder/cloneable" alt="Builder repeater" version="4.x" />
 
 ## Customizing the block picker
 
diff --git a/packages/forms/docs/03-fields/14-tags-input.md b/packages/forms/docs/03-fields/14-tags-input.md
index 84da4259b4..6318525d8c 100644
--- a/packages/forms/docs/03-fields/14-tags-input.md
+++ b/packages/forms/docs/03-fields/14-tags-input.md
@@ -15,7 +15,7 @@ use Filament\Forms\Components\TagsInput;
 TagsInput::make('tags')
 ```
 
-<AutoScreenshot name="forms/fields/tags-input/simple" alt="Tags input" version="3.x" />
+<AutoScreenshot name="forms/fields/tags-input/simple" alt="Tags input" version="4.x" />
 
 If you're saving the JSON tags using Eloquent, you should be sure to add an `array` [cast](https://laravel.com/docs/eloquent-mutators#array-and-json-casting) to the model property:
 
diff --git a/packages/forms/docs/03-fields/15-textarea.md b/packages/forms/docs/03-fields/15-textarea.md
index c0306a05d6..2c963a9cab 100644
--- a/packages/forms/docs/03-fields/15-textarea.md
+++ b/packages/forms/docs/03-fields/15-textarea.md
@@ -13,7 +13,7 @@ use Filament\Forms\Components\Textarea;
 Textarea::make('description')
 ```
 
-<AutoScreenshot name="forms/fields/textarea/simple" alt="Textarea" version="3.x" />
+<AutoScreenshot name="forms/fields/textarea/simple" alt="Textarea" version="4.x" />
 
 ## Resizing the textarea
 
@@ -40,7 +40,7 @@ Textarea::make('description')
 
 ## Making the field read-only
 
-Not to be confused with [disabling the field](getting-started#disabling-a-field), you may make the field "read-only" using the `readOnly()` method:
+Not to be confused with [disabling the field](overview#disabling-a-field), you may make the field "read-only" using the `readOnly()` method:
 
 ```php
 use Filament\Forms\Components\Textarea;
@@ -49,7 +49,7 @@ Textarea::make('description')
     ->readOnly()
 ```
 
-There are a few differences, compared to [`disabled()`](getting-started#disabling-a-field):
+There are a few differences, compared to [`disabled()`](overview#disabling-a-field):
 
 - When using `readOnly()`, the field will still be sent to the server when the form is submitted. It can be mutated with the browser console, or via JavaScript. You can use [`dehydrated(false)`](advanced#preventing-a-field-from-being-dehydrated) to prevent this.
 - There are no styling changes, such as less opacity, when using `readOnly()`.
diff --git a/packages/forms/docs/03-fields/16-key-value.md b/packages/forms/docs/03-fields/16-key-value.md
index 4ac0a1e9c7..5ba40449b9 100644
--- a/packages/forms/docs/03-fields/16-key-value.md
+++ b/packages/forms/docs/03-fields/16-key-value.md
@@ -13,7 +13,7 @@ use Filament\Forms\Components\KeyValue;
 KeyValue::make('meta')
 ```
 
-<AutoScreenshot name="forms/fields/key-value/simple" alt="Key-value" version="3.x" />
+<AutoScreenshot name="forms/fields/key-value/simple" alt="Key-value" version="4.x" />
 
 If you're saving the data in Eloquent, you should be sure to add an `array` [cast](https://laravel.com/docs/eloquent-mutators#array-and-json-casting) to the model property:
 
@@ -152,7 +152,7 @@ KeyValue::make('meta')
     ->reorderable()
 ```
 
-<AutoScreenshot name="forms/fields/key-value/reorderable" alt="Key-value with reorderable rows" version="3.x" />
+<AutoScreenshot name="forms/fields/key-value/reorderable" alt="Key-value with reorderable rows" version="4.x" />
 
 ## Customizing the key-value action objects
 
diff --git a/packages/forms/docs/03-fields/17-color-picker.md b/packages/forms/docs/03-fields/17-color-picker.md
index e962e4b881..dc8bb799b3 100644
--- a/packages/forms/docs/03-fields/17-color-picker.md
+++ b/packages/forms/docs/03-fields/17-color-picker.md
@@ -15,7 +15,7 @@ use Filament\Forms\Components\ColorPicker;
 ColorPicker::make('color')
 ```
 
-<AutoScreenshot name="forms/fields/color-picker/simple" alt="Color picker" version="3.x" />
+<AutoScreenshot name="forms/fields/color-picker/simple" alt="Color picker" version="4.x" />
 
 ## Setting the color format
 
diff --git a/packages/forms/docs/03-fields/18-toggle-buttons.md b/packages/forms/docs/03-fields/18-toggle-buttons.md
index 68ec8a446e..123a290976 100644
--- a/packages/forms/docs/03-fields/18-toggle-buttons.md
+++ b/packages/forms/docs/03-fields/18-toggle-buttons.md
@@ -18,7 +18,7 @@ ToggleButtons::make('status')
     ])
 ```
 
-<AutoScreenshot name="forms/fields/toggle-buttons/simple" alt="Toggle buttons" version="3.x" />
+<AutoScreenshot name="forms/fields/toggle-buttons/simple" alt="Toggle buttons" version="4.x" />
 
 ## Changing the color of option buttons
 
@@ -42,7 +42,7 @@ ToggleButtons::make('status')
 
 If you are using an enum for the options, you can use the [`HasColor` interface](../../support/enums#enum-colors) to define colors instead.
 
-<AutoScreenshot name="forms/fields/toggle-buttons/colors" alt="Toggle buttons with different colors" version="3.x" />
+<AutoScreenshot name="forms/fields/toggle-buttons/colors" alt="Toggle buttons with different colors" version="4.x" />
 
 ## Adding icons to option buttons
 
@@ -66,7 +66,7 @@ ToggleButtons::make('status')
 
 If you are using an enum for the options, you can use the [`HasIcon` interface](../../support/enums#enum-icons) to define icons instead.
 
-<AutoScreenshot name="forms/fields/toggle-buttons/icons" alt="Toggle buttons with icons" version="3.x" />
+<AutoScreenshot name="forms/fields/toggle-buttons/icons" alt="Toggle buttons with icons" version="4.x" />
 
 ## Boolean options
 
@@ -82,7 +82,7 @@ ToggleButtons::make('feedback')
 
 The options will have [colors](#changing-the-color-of-option-buttons) and [icons](#adding-icons-to-option-buttons) set up automatically, but you can override these with `colors()` or `icons()`.
 
-<AutoScreenshot name="forms/fields/toggle-buttons/boolean" alt="Boolean toggle buttons" version="3.x" />
+<AutoScreenshot name="forms/fields/toggle-buttons/boolean" alt="Boolean toggle buttons" version="4.x" />
 
 ## Positioning the options inline with each other
 
@@ -97,7 +97,7 @@ ToggleButtons::make('feedback')
     ->inline()
 ```
 
-<AutoScreenshot name="forms/fields/toggle-buttons/inline" alt="Inline toggle buttons" version="3.x" />
+<AutoScreenshot name="forms/fields/toggle-buttons/inline" alt="Inline toggle buttons" version="4.x" />
 
 ## Grouping option buttons
 
@@ -112,7 +112,7 @@ ToggleButtons::make('feedback')
     ->grouped()
 ```
 
-<AutoScreenshot name="forms/fields/toggle-buttons/grouped" alt="Grouped toggle buttons" version="3.x" />
+<AutoScreenshot name="forms/fields/toggle-buttons/grouped" alt="Grouped toggle buttons" version="4.x" />
 
 ## Selecting multiple buttons
 
@@ -131,7 +131,7 @@ ToggleButtons::make('technologies')
     ])
 ```
 
-<AutoScreenshot name="forms/fields/toggle-buttons/multiple" alt="Multiple toggle buttons selected" version="3.x" />
+<AutoScreenshot name="forms/fields/toggle-buttons/multiple" alt="Multiple toggle buttons selected" version="4.x" />
 
 These options are returned in JSON format. If you're saving them using Eloquent, you should be sure to add an `array` [cast](https://laravel.com/docs/eloquent-mutators#array-and-json-casting) to the model property:
 
@@ -162,9 +162,9 @@ ToggleButtons::make('technologies')
     ->columns(2)
 ```
 
-<AutoScreenshot name="forms/fields/toggle-buttons/columns" alt="Toggle buttons with 2 columns" version="3.x" />
+<AutoScreenshot name="forms/fields/toggle-buttons/columns" alt="Toggle buttons with 2 columns" version="4.x" />
 
-This method accepts the same options as the `columns()` method of the [grid](layout/grid). This allows you to responsively customize the number of columns at various breakpoints.
+This method accepts the same options as the `columns()` method of the [grid](../../schema/layout/grid). This allows you to responsively customize the number of columns at various breakpoints.
 
 ### Setting the grid direction
 
@@ -181,7 +181,7 @@ ToggleButtons::make('technologies')
     ->gridDirection('row')
 ```
 
-<AutoScreenshot name="forms/fields/toggle-buttons/rows" alt="Toggle buttons with 2 rows" version="3.x" />
+<AutoScreenshot name="forms/fields/toggle-buttons/rows" alt="Toggle buttons with 2 rows" version="4.x" />
 
 ## Disabling specific options
 
@@ -199,7 +199,7 @@ ToggleButtons::make('status')
     ->disableOptionWhen(fn (string $value): bool => $value === 'published')
 ```
 
-<AutoScreenshot name="forms/fields/toggle-buttons/disabled-option" alt="Toggle buttons with disabled option" version="3.x" />
+<AutoScreenshot name="forms/fields/toggle-buttons/disabled-option" alt="Toggle buttons with disabled option" version="4.x" />
 
 If you want to retrieve the options that have not been disabled, e.g. for validation purposes, you can do so using `getEnabledOptions()`:
 
diff --git a/packages/forms/docs/04-layout/08-placeholder.md b/packages/forms/docs/04-layout/08-placeholder.md
deleted file mode 100644
index cf5cf20555..0000000000
--- a/packages/forms/docs/04-layout/08-placeholder.md
+++ /dev/null
@@ -1,46 +0,0 @@
----
-title: Placeholder
----
-import AutoScreenshot from "@components/AutoScreenshot.astro"
-
-## Overview
-
-Placeholders can be used to render text-only "fields" within your forms. Each placeholder has `content()`, which cannot be changed by the user.
-
-```php
-use App\Models\Post;
-use Filament\Forms\Components\Placeholder;
-
-Placeholder::make('created')
-    ->content(fn (Post $record): string => $record->created_at->toFormattedDateString())
-```
-
-<AutoScreenshot name="forms/layout/placeholder/simple" alt="Placeholder" version="3.x" />
-
-> **Important:** All form fields require a unique name. That also applies to Placeholders!
-
-## Rendering HTML inside the placeholder
-
-You may even render custom HTML within placeholder content:
-
-```php
-use Filament\Forms\Components\Placeholder;
-use Illuminate\Support\HtmlString;
-
-Placeholder::make('documentation')
-    ->content(new HtmlString('<a href="https://filamentphp.com/docs">filamentphp.com</a>'))
-```
-
-## Dynamically generating placeholder content
-
-By passing a closure to the `content()` method, you may dynamically generate placeholder content. You have access to any closure parameter explained in the [advanced closure customization](../advanced#closure-customization) documentation:
-
-```php
-use Filament\Schema\Components\Utilities\Get;
-use Filament\Forms\Components\Placeholder;
-
-Placeholder::make('total')
-    ->content(function (Get $get): string {
-        return '€' . number_format($get('cost') * $get('quantity'), 2);
-    })
-```
diff --git a/packages/forms/docs/05-validation.md b/packages/forms/docs/05-validation.md
index 025fa41fc1..bcb0a3faae 100644
--- a/packages/forms/docs/05-validation.md
+++ b/packages/forms/docs/05-validation.md
@@ -4,7 +4,7 @@ title: Validation
 
 ## Overview
 
-Validation rules may be added to any [field](fields/getting-started).
+Validation rules may be added to any [field](fields).
 
 In Laravel, validation rules are usually defined in arrays like `['required', 'max:255']` or a combined string like `required|max:255`. This is fine if you're exclusively working in the backend with simple form requests. But Filament is also able to give your users frontend validation, so they can fix their mistakes before any backend requests are made.
 
diff --git a/packages/forms/docs/07-advanced.md b/packages/forms/docs/07-advanced.md
index 13b198077e..6b8bd834a4 100644
--- a/packages/forms/docs/07-advanced.md
+++ b/packages/forms/docs/07-advanced.md
@@ -52,7 +52,7 @@ In this example, `500` is the number of milliseconds to wait before sending a ne
 
 ## Form component utility injection
 
-The vast majority of methods used to configure [fields](fields/getting-started) and [layout components](layout/getting-started) accept functions as parameters instead of hardcoded values:
+The vast majority of methods used to configure [fields](fields) and [layout components](../schema/layout) accept functions as parameters instead of hardcoded values:
 
 ```php
 use App\Models\User;
@@ -282,7 +282,7 @@ TextInput::make('password_confirmation')
     ->dehydrated(false)
 ```
 
-If your form auto-saves data to the database, like in a [resource](../panels/resources/getting-started) or [table action](../tables/actions), this is useful to prevent a field from being saved to the database if it is purely used for presentational purposes.
+If your form auto-saves data to the database, like in a [resource](../panels/resources) or [table action](../tables/actions), this is useful to prevent a field from being saved to the database if it is purely used for presentational purposes.
 
 ## Reactive forms cookbook
 
@@ -433,7 +433,7 @@ Select::make('sub_category')
 
 ### Dynamic fields based on a select option
 
-You may wish to render a different set of fields based on the value of a field, like a select. To do this, you can pass a function to the `schema()` method of any [layout component](layout/getting-started), which checks the value of the field and returns a different schema based on that value. Also, you will need a way to initialise the new fields in the dynamic schema when they are first loaded.
+You may wish to render a different set of fields based on the value of a field, like a select. To do this, you can pass a function to the `schema()` method of any [layout component](../schema/layout), which checks the value of the field and returns a different schema based on that value. Also, you will need a way to initialise the new fields in the dynamic schema when they are first loaded.
 
 ```php
 use Filament\Forms\Components\FileUpload;
@@ -529,7 +529,7 @@ TextInput::make('password')
 
 > If you're building a form inside your Livewire component, make sure you have set up the [form's model](adding-a-form-to-a-livewire-component#setting-a-form-model). Otherwise, Filament doesn't know which model to use to retrieve the relationship from.
 
-As well as being able to give structure to fields, [layout components](layout/getting-started) are also able to "teleport" their nested fields into a relationship. Filament will handle loading data from a `HasOne`, `BelongsTo` or `MorphOne` Eloquent relationship, and then it will save the data back to the same relationship. To set this behavior up, you can use the `relationship()` method on any layout component:
+As well as being able to give structure to fields, [layout components](../schema/layout) are also able to "teleport" their nested fields into a relationship. Filament will handle loading data from a `HasOne`, `BelongsTo` or `MorphOne` Eloquent relationship, and then it will save the data back to the same relationship. To set this behavior up, you can use the `relationship()` method on any layout component:
 
 ```php
 use Filament\Forms\Components\FileUpload;
diff --git a/packages/infolists/docs/02-getting-started.md b/packages/infolists/docs/02-getting-started.md
index 74558c97b8..af78d638d0 100644
--- a/packages/infolists/docs/02-getting-started.md
+++ b/packages/infolists/docs/02-getting-started.md
@@ -4,9 +4,9 @@ title: Getting started
 
 ## Overview
 
-Filament's infolist package allows you to [render a read-only list of data about a particular entity](adding-an-infolist-to-a-livewire-component). It's also used within other Filament packages, such as the [Panel Builder](../panels) for displaying [app resources](../panels/resources/getting-started) and [relation managers](../panels/resources/relation-managers), as well as for [action modals](../actions). Learning the features of the Infolist Builder will be incredibly time-saving when both building your own custom Livewire applications and using Filament's other packages.
+Filament's infolist package allows you to [render a read-only list of data about a particular entity](adding-an-infolist-to-a-livewire-component). It's also used within other Filament packages, such as the [Panel Builder](../panels) for displaying [app resources](../panels/resources) and [relation managers](../panels/resources/relation-managers), as well as for [action modals](../actions). Learning the features of the Infolist Builder will be incredibly time-saving when both building your own custom Livewire applications and using Filament's other packages.
 
-This guide will walk you through the basics of building infolists with Filament's infolist package. If you're planning to add a new infolist to your own Livewire component, you should [do that first](adding-an-infolist-to-a-livewire-component) and then come back. If you're adding an infolist to an [app resource](../panels/resources/getting-started), or another Filament package, you're ready to go!
+This guide will walk you through the basics of building infolists with Filament's infolist package. If you're planning to add a new infolist to your own Livewire component, you should [do that first](adding-an-infolist-to-a-livewire-component) and then come back. If you're adding an infolist to an [app resource](../panels/resources), or another Filament package, you're ready to go!
 
 ## Defining entries
 
@@ -23,7 +23,7 @@ $infolist
     ]);
 ```
 
-Each entry is a piece of information that should be displayed in the infolist. The `TextEntry` is used for displaying text, but there are [other entry types available](entries/getting-started#available-entries).
+Each entry is a piece of information that should be displayed in the infolist. The `TextEntry` is used for displaying text, but there are [other entry types available](entries#available-entries).
 
 Infolists within the Panel Builder and other packages usually have 2 columns by default. For custom infolists, you can use the `columns()` method to achieve the same effect:
 
@@ -48,11 +48,11 @@ use Filament\Infolists\Components\TextEntry;
 ]
 ```
 
-You can learn more about columns and spans in the [layout documentation](layout/grid). You can even make them responsive!
+You can learn more about columns and spans in the [layout documentation](../schema/layout/grid). You can even make them responsive!
 
 ## Using layout components
 
-The Infolist Builder allows you to use [layout components](layout/getting-started#available-layout-components) inside the schema array to control how entries are displayed. `Section` is a layout component, and it allows you to add a heading and description to a set of entries. It can also allow entries inside it to collapse, which saves space in long infolists.
+The Infolist Builder allows you to use [layout components](../schema/layout#available-layout-components) inside the schema array to control how entries are displayed. `Section` is a layout component, and it allows you to add a heading and description to a set of entries. It can also allow entries inside it to collapse, which saves space in long infolists.
 
 ```php
 use Filament\Infolists\Components\TextEntry;
@@ -93,5 +93,5 @@ This section now contains an [`ImageEntry`](entries/image) and a [`TextEntry`](e
 
 Now you've finished reading this guide, where to next? Here are some suggestions:
 
-- [Explore the available entries to display data in your infolist.](entries/getting-started#available-entries)
-- [Discover how to build complex, responsive layouts without touching CSS.](layout/getting-started)
+- [Explore the available entries to display data in your infolist.](entries#available-entries)
+- [Discover how to build complex, responsive layouts without touching CSS.](../schema/layout)
diff --git a/packages/infolists/docs/03-entries/01-getting-started.md b/packages/infolists/docs/03-entries/01-overview.md
similarity index 97%
rename from packages/infolists/docs/03-entries/01-getting-started.md
rename to packages/infolists/docs/03-entries/01-overview.md
index b262deb457..c03ae18f29 100644
--- a/packages/infolists/docs/03-entries/01-getting-started.md
+++ b/packages/infolists/docs/03-entries/01-overview.md
@@ -1,5 +1,5 @@
 ---
-title: Getting started
+title: Overview
 ---
 import AutoScreenshot from "@components/AutoScreenshot.astro"
 
@@ -43,7 +43,7 @@ TextEntry::make('title')
 TextEntry::make('author.name')
 ```
 
-<AutoScreenshot name="infolists/entries/simple" alt="Entries in an infolist" version="3.x" />
+<AutoScreenshot name="infolists/entries/simple" alt="Entries in an infolist" version="4.x" />
 
 ## Available entries
 
@@ -123,7 +123,7 @@ TextEntry::make('title')
     ->placeholder('Untitled')
 ```
 
-<AutoScreenshot name="infolists/entries/placeholder" alt="Entry with a placeholder for empty state" version="3.x" />
+<AutoScreenshot name="infolists/entries/placeholder" alt="Entry with a placeholder for empty state" version="4.x" />
 
 ## Adding helper text below the entry
 
@@ -154,7 +154,7 @@ TextEntry::make('name')
     ->helperText(view('name-helper-text'))
 ```
 
-<AutoScreenshot name="infolists/entries/helper-text" alt="Entry with helper text" version="3.x" />
+<AutoScreenshot name="infolists/entries/helper-text" alt="Entry with helper text" version="4.x" />
 
 ## Adding a hint next to the label
 
@@ -188,7 +188,7 @@ TextEntry::make('apiKey')
     ->hint(view('api-key-hint'))
 ```
 
-<AutoScreenshot name="infolists/entries/hint" alt="Entry with hint" version="3.x" />
+<AutoScreenshot name="infolists/entries/hint" alt="Entry with hint" version="4.x" />
 
 ### Changing the text color of the hint
 
@@ -203,7 +203,7 @@ TextEntry::make('apiKey')
     ->hintColor('primary')
 ```
 
-<AutoScreenshot name="infolists/entries/hint-color" alt="Entry with hint color" version="3.x" />
+<AutoScreenshot name="infolists/entries/hint-color" alt="Entry with hint color" version="4.x" />
 
 ### Adding an icon aside the hint
 
@@ -218,7 +218,7 @@ TextEntry::make('apiKey')
     ->hintIcon('heroicon-m-question-mark-circle')
 ```
 
-<AutoScreenshot name="infolists/entries/hint-icon" alt="Entry with hint icon" version="3.x" />
+<AutoScreenshot name="infolists/entries/hint-icon" alt="Entry with hint icon" version="4.x" />
 
 #### Adding a tooltip to a hint icon
 
@@ -271,7 +271,7 @@ TextEntry::make('title')
     ->tooltip('Shown at the top of the page')
 ```
 
-<AutoScreenshot name="infolists/entries/tooltips" alt="Entry with tooltip" version="3.x" />
+<AutoScreenshot name="infolists/entries/tooltips" alt="Entry with tooltip" version="4.x" />
 
 This method also accepts a closure that can access the current infolist record:
 
diff --git a/packages/infolists/docs/03-entries/02-text.md b/packages/infolists/docs/03-entries/02-text.md
index f3311039ee..95bde6d923 100644
--- a/packages/infolists/docs/03-entries/02-text.md
+++ b/packages/infolists/docs/03-entries/02-text.md
@@ -13,7 +13,7 @@ use Filament\Infolists\Components\TextEntry;
 TextEntry::make('title')
 ```
 
-<AutoScreenshot name="infolists/entries/text/simple" alt="Text entry" version="3.x" />
+<AutoScreenshot name="infolists/entries/text/simple" alt="Text entry" version="4.x" />
 
 ## Displaying as a "badge"
 
@@ -32,7 +32,7 @@ TextEntry::make('status')
     })
 ```
 
-<AutoScreenshot name="infolists/entries/text/badge" alt="Text entry as badge" version="3.x" />
+<AutoScreenshot name="infolists/entries/text/badge" alt="Text entry as badge" version="4.x" />
 
 You may add other things to the badge, like an [icon](#adding-an-icon).
 
@@ -203,7 +203,7 @@ TextEntry::make('authors.name')
     ->listWithLineBreaks()
 ```
 
-<AutoScreenshot name="infolists/entries/text/list" alt="Text entry with multiple values" version="3.x" />
+<AutoScreenshot name="infolists/entries/text/list" alt="Text entry with multiple values" version="4.x" />
 
 ### Adding bullet points to the list
 
@@ -217,7 +217,7 @@ TextEntry::make('authors.name')
     ->bulleted()
 ```
 
-<AutoScreenshot name="infolists/entries/text/bullet-list" alt="Text entry with multiple values and bullet points" version="3.x" />
+<AutoScreenshot name="infolists/entries/text/bullet-list" alt="Text entry with multiple values and bullet points" version="4.x" />
 
 ### Limiting the number of values in the list
 
@@ -325,7 +325,7 @@ TextEntry::make('status')
     ->color('primary')
 ```
 
-<AutoScreenshot name="infolists/entries/text/color" alt="Text entry in the primary color" version="3.x" />
+<AutoScreenshot name="infolists/entries/text/color" alt="Text entry in the primary color" version="4.x" />
 
 ## Adding an icon
 
@@ -338,7 +338,7 @@ TextEntry::make('email')
     ->icon('heroicon-m-envelope')
 ```
 
-<AutoScreenshot name="infolists/entries/text/icon" alt="Text entry with icon" version="3.x" />
+<AutoScreenshot name="infolists/entries/text/icon" alt="Text entry with icon" version="4.x" />
 
 You may set the position of an icon using `iconPosition()`:
 
@@ -351,7 +351,7 @@ TextEntry::make('email')
     ->iconPosition(IconPosition::After) // `IconPosition::Before` or `IconPosition::After`
 ```
 
-<AutoScreenshot name="infolists/entries/text/icon-after" alt="Text entry with icon after" version="3.x" />
+<AutoScreenshot name="infolists/entries/text/icon-after" alt="Text entry with icon after" version="4.x" />
 
 The icon color defaults to the text color, but you may customize the icon color separately using `iconColor()`:
 
@@ -363,7 +363,7 @@ TextEntry::make('email')
     ->iconColor('primary')
 ```
 
-<AutoScreenshot name="infolists/entries/text/icon-color" alt="Text entry with icon in the primary color" version="3.x" />
+<AutoScreenshot name="infolists/entries/text/icon-color" alt="Text entry with icon in the primary color" version="4.x" />
 
 ## Customizing the text size
 
@@ -378,7 +378,7 @@ TextEntry::make('title')
     ->size(TextEntry\Enums\TextEntrySize::Large)
 ```
 
-<AutoScreenshot name="infolists/entries/text/large" alt="Text entry in a large font size" version="3.x" />
+<AutoScreenshot name="infolists/entries/text/large" alt="Text entry in a large font size" version="4.x" />
 
 ## Customizing the font weight
 
@@ -394,7 +394,7 @@ TextEntry::make('title')
     ->weight(FontWeight::Bold)
 ```
 
-<AutoScreenshot name="infolists/entries/text/bold" alt="Text entry in a bold font" version="3.x" />
+<AutoScreenshot name="infolists/entries/text/bold" alt="Text entry in a bold font" version="4.x" />
 
 ## Customizing the font family
 
@@ -411,7 +411,7 @@ TextEntry::make('apiKey')
     ->fontFamily(FontFamily::Mono)
 ```
 
-<AutoScreenshot name="infolists/entries/text/mono" alt="Text entry in a monospaced font" version="3.x" />
+<AutoScreenshot name="infolists/entries/text/mono" alt="Text entry in a monospaced font" version="4.x" />
 
 ## Allowing the text to be copied to the clipboard
 
@@ -427,4 +427,4 @@ TextEntry::make('apiKey')
     ->copyMessageDuration(1500)
 ```
 
-<AutoScreenshot name="infolists/entries/text/copyable" alt="Text entry with a button to copy it" version="3.x" />
+<AutoScreenshot name="infolists/entries/text/copyable" alt="Text entry with a button to copy it" version="4.x" />
diff --git a/packages/infolists/docs/03-entries/03-icon.md b/packages/infolists/docs/03-entries/03-icon.md
index 75ad2ca925..9f65478934 100644
--- a/packages/infolists/docs/03-entries/03-icon.md
+++ b/packages/infolists/docs/03-entries/03-icon.md
@@ -20,7 +20,7 @@ IconEntry::make('status')
 
 In the function, `$state` is the value of the entry, and `$record` can be used to access the underlying Eloquent record.
 
-<AutoScreenshot name="infolists/entries/icon/simple" alt="Icon entry" version="3.x" />
+<AutoScreenshot name="infolists/entries/icon/simple" alt="Icon entry" version="4.x" />
 
 ## Customizing the color
 
@@ -40,7 +40,7 @@ IconEntry::make('status')
 
 In the function, `$state` is the value of the entry, and `$record` can be used to access the underlying Eloquent record.
 
-<AutoScreenshot name="infolists/entries/icon/color" alt="Icon entry with color" version="3.x" />
+<AutoScreenshot name="infolists/entries/icon/color" alt="Icon entry with color" version="4.x" />
 
 ## Customizing the size
 
@@ -53,7 +53,7 @@ IconEntry::make('status')
     ->size(IconEntry\Enums\IconEntrySize::Medium)
 ```
 
-<AutoScreenshot name="infolists/entries/icon/medium" alt="Medium-sized icon entry" version="3.x" />
+<AutoScreenshot name="infolists/entries/icon/medium" alt="Medium-sized icon entry" version="4.x" />
 
 ## Handling booleans
 
@@ -68,7 +68,7 @@ IconEntry::make('is_featured')
 
 > If this column in the model class is already cast as a `bool` or `boolean`, Filament is able to detect this, and you do not need to use `boolean()` manually.
 
-<AutoScreenshot name="infolists/entries/icon/boolean" alt="Icon entry to display a boolean" version="3.x" />
+<AutoScreenshot name="infolists/entries/icon/boolean" alt="Icon entry to display a boolean" version="4.x" />
 
 ### Customizing the boolean icons
 
@@ -83,7 +83,7 @@ IconEntry::make('is_featured')
     ->falseIcon('heroicon-o-x-mark')
 ```
 
-<AutoScreenshot name="infolists/entries/icon/boolean-icon" alt="Icon entry to display a boolean with custom icons" version="3.x" />
+<AutoScreenshot name="infolists/entries/icon/boolean-icon" alt="Icon entry to display a boolean with custom icons" version="4.x" />
 
 ### Customizing the boolean colors
 
@@ -98,4 +98,4 @@ IconEntry::make('is_featured')
     ->falseColor('warning')
 ```
 
-<AutoScreenshot name="infolists/entries/icon/boolean-color" alt="Icon entry to display a boolean with custom colors" version="3.x" />
+<AutoScreenshot name="infolists/entries/icon/boolean-color" alt="Icon entry to display a boolean with custom colors" version="4.x" />
diff --git a/packages/infolists/docs/03-entries/04-image.md b/packages/infolists/docs/03-entries/04-image.md
index 5cf18fa8e1..457a69a956 100644
--- a/packages/infolists/docs/03-entries/04-image.md
+++ b/packages/infolists/docs/03-entries/04-image.md
@@ -15,7 +15,7 @@ ImageEntry::make('header_image')
 
 The entry must contain the path to the image, relative to the root directory of its storage disk, or an absolute URL to it.
 
-<AutoScreenshot name="infolists/entries/image/simple" alt="Image entry" version="3.x" />
+<AutoScreenshot name="infolists/entries/image/simple" alt="Image entry" version="4.x" />
 
 ## Managing the image disk
 
@@ -68,7 +68,7 @@ ImageEntry::make('author.avatar')
     ->square()
 ```
 
-<AutoScreenshot name="infolists/entries/image/square" alt="Square image entry" version="3.x" />
+<AutoScreenshot name="infolists/entries/image/square" alt="Square image entry" version="4.x" />
 
 ## Circular image
 
@@ -82,7 +82,7 @@ ImageEntry::make('author.avatar')
     ->circular()
 ```
 
-<AutoScreenshot name="infolists/entries/image/circular" alt="Circular image entry" version="3.x" />
+<AutoScreenshot name="infolists/entries/image/circular" alt="Circular image entry" version="4.x" />
 
 ## Adding a default image URL
 
@@ -108,7 +108,7 @@ ImageEntry::make('colleagues.avatar')
     ->stacked()
 ```
 
-<AutoScreenshot name="infolists/entries/image/stacked" alt="Stacked image entry" version="3.x" />
+<AutoScreenshot name="infolists/entries/image/stacked" alt="Stacked image entry" version="4.x" />
 
 ### Customizing the stacked ring width
 
@@ -152,7 +152,7 @@ ImageEntry::make('colleagues.avatar')
     ->limit(3)
 ```
 
-<AutoScreenshot name="infolists/entries/image/limited" alt="Limited image entry" version="3.x" />
+<AutoScreenshot name="infolists/entries/image/limited" alt="Limited image entry" version="4.x" />
 
 ### Showing the remaining images count
 
@@ -169,7 +169,7 @@ ImageEntry::make('colleagues.avatar')
     ->limitedRemainingText()
 ```
 
-<AutoScreenshot name="infolists/entries/image/limited-remaining-text" alt="Limited image entry with remaining text" version="3.x" />
+<AutoScreenshot name="infolists/entries/image/limited-remaining-text" alt="Limited image entry with remaining text" version="4.x" />
 
 #### Showing the limited remaining text separately
 
@@ -186,7 +186,7 @@ ImageEntry::make('colleagues.avatar')
     ->limitedRemainingText(isSeparate: true)
 ```
 
-<AutoScreenshot name="infolists/entries/image/limited-remaining-text-separately" alt="Limited image entry with remaining text separately" version="3.x" />
+<AutoScreenshot name="infolists/entries/image/limited-remaining-text-separately" alt="Limited image entry with remaining text separately" version="4.x" />
 
 #### Customizing the limited remaining text size
 
diff --git a/packages/infolists/docs/03-entries/05-color.md b/packages/infolists/docs/03-entries/05-color.md
index 5016d8b905..f1375d0230 100644
--- a/packages/infolists/docs/03-entries/05-color.md
+++ b/packages/infolists/docs/03-entries/05-color.md
@@ -13,7 +13,7 @@ use Filament\Infolists\Components\ColorEntry;
 ColorEntry::make('color')
 ```
 
-<AutoScreenshot name="infolists/entries/color/simple" alt="Color entry" version="3.x" />
+<AutoScreenshot name="infolists/entries/color/simple" alt="Color entry" version="4.x" />
 
 ## Allowing the color to be copied to the clipboard
 
@@ -28,4 +28,4 @@ ColorEntry::make('color')
     ->copyMessageDuration(1500)
 ```
 
-<AutoScreenshot name="infolists/entries/color/copyable" alt="Color entry with a button to copy it" version="3.x" />
+<AutoScreenshot name="infolists/entries/color/copyable" alt="Color entry with a button to copy it" version="4.x" />
diff --git a/packages/infolists/docs/03-entries/06-key-value.md b/packages/infolists/docs/03-entries/06-key-value.md
index ec4b7baba6..9900c7cb02 100644
--- a/packages/infolists/docs/03-entries/06-key-value.md
+++ b/packages/infolists/docs/03-entries/06-key-value.md
@@ -13,7 +13,7 @@ use Filament\Infolists\Components\KeyValueEntry;
 KeyValueEntry::make('meta')
 ```
 
-<AutoScreenshot name="infolists/entries/key-value/simple" alt="Key-value entry" version="3.x" />
+<AutoScreenshot name="infolists/entries/key-value/simple" alt="Key-value entry" version="4.x" />
 
 If you're saving the data in Eloquent, you should be sure to add an `array` [cast](https://laravel.com/docs/eloquent-mutators#array-and-json-casting) to the model property:
 
diff --git a/packages/infolists/docs/03-entries/07-repeatable.md b/packages/infolists/docs/03-entries/07-repeatable.md
index 693e426dfd..1392abeb67 100644
--- a/packages/infolists/docs/03-entries/07-repeatable.md
+++ b/packages/infolists/docs/03-entries/07-repeatable.md
@@ -23,7 +23,7 @@ RepeatableEntry::make('comments')
 
 As you can see, the repeatable entry has an embedded `schema()` which gets repeated for each item.
 
-<AutoScreenshot name="infolists/entries/repeatable/simple" alt="Repeatable entry" version="3.x" />
+<AutoScreenshot name="infolists/entries/repeatable/simple" alt="Repeatable entry" version="4.x" />
 
 ## Grid layout
 
@@ -39,9 +39,9 @@ RepeatableEntry::make('comments')
     ->grid(2)
 ```
 
-This method accepts the same options as the `columns()` method of the [grid](../layout/grid). This allows you to responsively customize the number of grid columns at various breakpoints.
+This method accepts the same options as the `columns()` method of the [grid](../../schema/layout/grid). This allows you to responsively customize the number of grid columns at various breakpoints.
 
-<AutoScreenshot name="infolists/entries/repeatable/grid" alt="Repeatable entry in grid layout" version="3.x" />
+<AutoScreenshot name="infolists/entries/repeatable/grid" alt="Repeatable entry in grid layout" version="4.x" />
 
 ## Removing the styled container
 
diff --git a/packages/infolists/docs/04-layout/01-getting-started.md b/packages/infolists/docs/04-layout/01-getting-started.md
deleted file mode 100644
index 4eb31350c0..0000000000
--- a/packages/infolists/docs/04-layout/01-getting-started.md
+++ /dev/null
@@ -1,78 +0,0 @@
----
-title: Getting started
----
-
-## Overview
-
-Infolists are not limited to just displaying entries. You can also use "layout components" to organize them into an infinitely nestable structure.
-
-Layout component classes can be found in the `Filament\Infolists\Components` namespace. They reside within the schema of your infolist, alongside any [entries](../entries/getting-started).
-
-Components may be created using the static `make()` method. Usually, you will then define the child component `schema()` to display inside:
-
-```php
-use Filament\Schema\Components\Grid;
-
-Grid::make(2)
-    ->schema([
-        // ...
-    ])
-```
-
-## Available layout components
-
-Filament ships with some layout components, suitable for arranging your form fields depending on your needs:
-
-- [Grid](grid)
-- [Fieldset](fieldset)
-- [Tabs](tabs)
-- [Section](section)
-- [Split](split)
-
-You may also [create your own custom layout components](custom) to organize fields in whatever way you wish.
-
-## Setting an ID
-
-You may define an ID for the component using the `id()` method:
-
-```php
-use Filament\Schema\Components\Section;
-
-Section::make()
-    ->id('main-section')
-```
-
-## Adding extra HTML attributes
-
-You can pass extra HTML attributes to the component, which will be merged onto the outer DOM element. Pass an array of attributes to the `extraAttributes()` method, where the key is the attribute name and the value is the attribute value:
-
-```php
-
-
-Section::make()
-    ->extraAttributes(['class' => 'custom-section-style'])
-```
-
-Classes will be merged with the default classes, and any other attributes will override the default attributes.
-
-## Global settings
-
-If you wish to change the default behavior of a component globally, then you can call the static `configureUsing()` method inside a service provider's `boot()` method, to which you pass a Closure to modify the component using. For example, if you wish to make all section components have [2 columns](grid) by default, you can do it like so:
-
-```php
-use Filament\Schema\Components\Section;
-
-Section::configureUsing(function (Section $section): void {
-    $section
-        ->columns(2);
-});
-```
-
-Of course, you are still able to overwrite this on each field individually:
-
-```php
-use Filament\Schema\Components\Section;
-
-Section::make()
-    ->columns(1)
-```
diff --git a/packages/infolists/docs/04-layout/02-grid.md b/packages/infolists/docs/04-layout/02-grid.md
deleted file mode 100644
index 5350e30715..0000000000
--- a/packages/infolists/docs/04-layout/02-grid.md
+++ /dev/null
@@ -1,103 +0,0 @@
----
-title: Grid
----
-
-## Overview
-
-Filament's grid system allows you to create responsive, multi-column layouts using any layout component.
-
-## Responsively setting the number of grid columns
-
-All layout components have a `columns()` method that you can use in a couple of different ways:
-
-- You can pass an integer like `columns(2)`. This integer is the number of columns used on the `lg` breakpoint and higher. All smaller devices will have just 1 column.
-- You can pass an array, where the key is the breakpoint and the value is the number of columns. For example, `columns(['md' => 2, 'xl' => 4])` will create a 2 column layout on medium devices, and a 4 column layout on extra large devices. The default breakpoint for smaller devices uses 1 column, unless you use a `default` array key.
-
-Breakpoints (`sm`, `md`, `lg`, `xl`, `2xl`) are defined by Tailwind, and can be found in the [Tailwind documentation](https://tailwindcss.com/docs/responsive-design#overview).
-
-## Controlling how many columns a component should span
-
-In addition to specifying how many columns a layout component should have, you may also specify how many columns a component should fill within the parent grid, using the `columnSpan()` method. This method accepts an integer or an array of breakpoints and column spans:
-
-- `columnSpan(2)` will make the component fill up to 2 columns on all breakpoints.
-- `columnSpan(['md' => 2, 'xl' => 4])` will make the component fill up to 2 columns on medium devices, and up to 4 columns on extra large devices. The default breakpoint for smaller devices uses 1 column, unless you use a `default` array key.
-- `columnSpan('full')` or `columnSpanFull()` or `columnSpan(['default' => 'full'])` will make the component fill the full width of the parent grid, regardless of how many columns it has.
-
-## An example of a responsive grid layout
-
-In this example, we have an infolist with a [section](section) layout component. Since all layout components support the `columns()` method, we can use it to create a responsive grid layout within the section itself.
-
-We pass an array to `columns()` as we want to specify different numbers of columns for different breakpoints. On devices smaller than the `sm` [Tailwind breakpoint](https://tailwindcss.com/docs/responsive-design#overview), we want to have 1 column, which is default. On devices larger than the `sm` breakpoint, we want to have 3 columns. On devices larger than the `xl` breakpoint, we want to have 6 columns. On devices larger than the `2xl` breakpoint, we want to have 8 columns.
-
-Inside the section, we have a [text entry](../entries/text). Since text entries are infolist components and all form components have a `columnSpan()` method, we can use it to specify how many columns the text entry should fill. On devices smaller than the `sm` breakpoint, we want the text entry to fill 1 column, which is default. On devices larger than the `sm` breakpoint, we want the text entry to fill 2 columns. On devices larger than the `xl` breakpoint, we want the text entry to fill 3 columns. On devices larger than the `2xl` breakpoint, we want the text entry to fill 4 columns.
-
-```php
-use Filament\Infolists\Components\TextEntry;
-use Filament\Schema\Components\Section;
-
-Section::make()
-    ->columns([
-        'sm' => 3,
-        'xl' => 6,
-        '2xl' => 8,
-    ])
-    ->schema([
-        TextEntry::make('name')
-            ->columnSpan([
-                'sm' => 2,
-                'xl' => 3,
-                '2xl' => 4,
-            ]),
-        // ...
-    ])
-```
-
-## Grid component
-
-All layout components support the `columns()` method, but you also have access to an additional `Grid` component. If you feel that your form schema would benefit from an explicit grid syntax with no extra styling, it may be useful to you. Instead of using the `columns()` method, you can pass your column configuration directly to `Grid::make()`:
-
-```php
-use Filament\Schema\Components\Grid;
-
-Grid::make([
-    'default' => 1,
-    'sm' => 2,
-    'md' => 3,
-    'lg' => 4,
-    'xl' => 6,
-    '2xl' => 8,
-])
-    ->schema([
-        // ...
-    ])
-```
-
-## Setting the starting column of a component in a grid
-
-If you want to start a component in a grid at a specific column, you can use the `columnStart()` method. This method accepts an integer, or an array of breakpoints and which column the component should start at:
-
-- `columnStart(2)` will make the component start at column 2 on all breakpoints.
-- `columnStart(['md' => 2, 'xl' => 4])` will make the component start at column 2 on medium devices, and at column 4 on extra large devices. The default breakpoint for smaller devices uses 1 column, unless you use a `default` array key.
-
-```php
-use Filament\Infolists\Components\TextEntry;
-use Filament\Schema\Components\Section;
-
-Section::make()
-    ->columns([
-        'sm' => 3,
-        'xl' => 6,
-        '2xl' => 8,
-    ])
-    ->schema([
-        TextEntry::make('name')
-            ->columnStart([
-                'sm' => 2,
-                'xl' => 3,
-                '2xl' => 4,
-            ]),
-        // ...
-    ])
-```
-
-In this example, the grid has 3 columns on small devices, 6 columns on extra large devices, and 8 columns on extra extra large devices. The text entry will start at column 2 on small devices, column 3 on extra large devices, and column 4 on extra extra large devices. This is essentially producing a layout whereby the text entry always starts halfway through the grid, regardless of how many columns the grid has.
diff --git a/packages/infolists/docs/04-layout/03-fieldset.md b/packages/infolists/docs/04-layout/03-fieldset.md
deleted file mode 100644
index 94e06ae85a..0000000000
--- a/packages/infolists/docs/04-layout/03-fieldset.md
+++ /dev/null
@@ -1,33 +0,0 @@
----
-title: Fieldset
----
-import AutoScreenshot from "@components/AutoScreenshot.astro"
-
-## Overview
-
-You may want to group entries into a Fieldset. Each fieldset has a label, a border, and a two-column grid by default:
-
-```php
-use Filament\Schema\Components\Fieldset;
-
-Fieldset::make('Label')
-    ->schema([
-        // ...
-    ])
-```
-
-<AutoScreenshot name="infolists/layout/fieldset/simple" alt="Fieldset" version="3.x" />
-
-## Using grid columns within a fieldset
-
-You may use the `columns()` method to customize the [grid](grid) within the fieldset:
-
-```php
-use Filament\Schema\Components\Fieldset;
-
-Fieldset::make('Label')
-    ->schema([
-        // ...
-    ])
-    ->columns(3)
-```
diff --git a/packages/infolists/docs/04-layout/04-tabs.md b/packages/infolists/docs/04-layout/04-tabs.md
deleted file mode 100644
index ba3f06206e..0000000000
--- a/packages/infolists/docs/04-layout/04-tabs.md
+++ /dev/null
@@ -1,240 +0,0 @@
----
-title: Tabs
----
-import AutoScreenshot from "@components/AutoScreenshot.astro"
-
-## Overview
-
-Some infolists can be long and complex. You may want to use tabs to reduce the number of components that are visible at once:
-
-```php
-use Filament\Schema\Components\Tabs;
-
-Tabs::make('Tabs')
-    ->tabs([
-        \Filament\Schema\Components\Tabs\Tab::make('Tab 1')
-            ->schema([
-                // ...
-            ]),
-        \Filament\Schema\Components\Tabs\Tab::make('Tab 2')
-            ->schema([
-                // ...
-            ]),
-        \Filament\Schema\Components\Tabs\Tab::make('Tab 3')
-            ->schema([
-                // ...
-            ]),
-    ])
-```
-
-<AutoScreenshot name="infolists/layout/tabs/simple" alt="Tabs" version="3.x" />
-
-## Setting the default active tab
-
-The first tab will be open by default. You can change the default open tab using the `activeTab()` method:
-
-```php
-use Filament\Schema\Components\Tabs;
-
-Tabs::make('Tabs')
-    ->tabs([
-        \Filament\Schema\Components\Tabs\Tab::make('Tab 1')
-            ->schema([
-                // ...
-            ]),
-        \Filament\Schema\Components\Tabs\Tab::make('Tab 2')
-            ->schema([
-                // ...
-            ]),
-        \Filament\Schema\Components\Tabs\Tab::make('Tab 3')
-            ->schema([
-                // ...
-            ]),
-    ])
-    ->activeTab(2)
-```
-
-## Setting a tab icon
-
-Tabs may have an [icon](../../styling/icons), which you can set using the `icon()` method:
-
-```php
-use Filament\Schema\Components\Tabs;
-
-Tabs::make('Tabs')
-    ->tabs([
-        \Filament\Schema\Components\Tabs\Tab::make('Notifications')
-            ->icon('heroicon-m-bell')
-            ->schema([
-                // ...
-            ]),
-        // ...
-    ])
-```
-
-<AutoScreenshot name="infolists/layout/tabs/icons" alt="Tabs with icons" version="3.x" />
-
-### Setting the tab icon position
-
-The icon of the tab may be positioned before or after the label using the `iconPosition()` method:
-
-```php
-use Filament\Schema\Components\Tabs;
-use Filament\Support\Enums\IconPosition;
-
-Tabs::make('Tabs')
-    ->tabs([
-        \Filament\Schema\Components\Tabs\Tab::make('Notifications')
-            ->icon('heroicon-m-bell')
-            ->iconPosition(IconPosition::After)
-            ->schema([
-                // ...
-            ]),
-        // ...
-    ])
-```
-
-<AutoScreenshot name="infolists/layout/tabs/icons-after" alt="Tabs with icons after their labels" version="3.x" />
-
-## Setting a tab badge
-
-Tabs may have a badge, which you can set using the `badge()` method:
-
-```php
-use Filament\Schema\Components\Tabs;
-
-Tabs::make('Tabs')
-    ->tabs([
-        \Filament\Schema\Components\Tabs\Tab::make('Notifications')
-            ->badge(5)
-            ->schema([
-                // ...
-            ]),
-        // ...
-    ])
-```
-
-<AutoScreenshot name="infolists/layout/tabs/badges" alt="Tabs with badges" version="3.x" />
-
-If you'd like to change the color for a badge, you can use the `badgeColor()` method:
-
-```php
-use Filament\Schema\Components\Tabs;
-
-Tabs::make('Tabs')
-    ->tabs([
-        \Filament\Schema\Components\Tabs\Tab::make('Notifications')
-            ->badge(5)
-            ->badgeColor('success')
-            ->schema([
-                // ...
-            ]),
-        // ...
-    ])
-```
-
-## Using grid columns within a tab
-
-You may use the `columns()` method to customize the [grid](grid) within the tab:
-
-```php
-use Filament\Schema\Components\Tabs;
-
-Tabs::make('Tabs')
-    ->tabs([
-        \Filament\Schema\Components\Tabs\Tab::make('Tab 1')
-            ->schema([
-                // ...
-            ])
-            ->columns(3),
-        // ...
-    ])
-```
-
-## Removing the styled container
-
-By default, tabs and their content are wrapped in a container styled as a card. You may remove the styled container using `contained()`:
-
-```php
-use Filament\Schema\Components\Tabs;
-
-Tabs::make('Tabs')
-    ->tabs([
-        \Filament\Schema\Components\Tabs\Tab::make('Tab 1')
-            ->schema([
-                // ...
-            ]),
-        \Filament\Schema\Components\Tabs\Tab::make('Tab 2')
-            ->schema([
-                // ...
-            ]),
-        \Filament\Schema\Components\Tabs\Tab::make('Tab 3')
-            ->schema([
-                // ...
-            ]),
-    ])
-    ->contained(false)
-```
-
-## Persisting the current tab
-
-By default, the current tab is not persisted in the browser's local storage. You can change this behavior using the `persistTab()` method. You must also pass in a unique `id()` for the tabs component, to distinguish it from all other sets of tabs in the app. This ID will be used as the key in the local storage to store the current tab:
-
-```php
-use Filament\Schema\Components\Tabs;
-
-Tabs::make('Tabs')
-    ->tabs([
-        // ...
-    ])
-    ->persistTab()
-    ->id('order-tabs')
-```
-
-### Persisting the current tab in the URL's query string
-
-By default, the current tab is not persisted in the URL's query string. You can change this behavior using the `persistTabInQueryString()` method:
-
-```php
-use Filament\Schema\Components\Tabs;
-
-Tabs::make('Tabs')
-    ->tabs([
-        \Filament\Schema\Components\Tabs\Tab::make('Tab 1')
-            ->schema([
-                // ...
-            ]),
-        \Filament\Schema\Components\Tabs\Tab::make('Tab 2')
-            ->schema([
-                // ...
-            ]),
-        \Filament\Schema\Components\Tabs\Tab::make('Tab 3')
-            ->schema([
-                // ...
-            ]),
-    ])
-    ->persistTabInQueryString()
-```
-
-By default, the current tab is persisted in the URL's query string using the `tab` key. You can change this key by passing it to the `persistTabInQueryString()` method:
-
-```php
-use Filament\Schema\Components\Tabs;
-
-Tabs::make('Tabs')
-    ->tabs([
-        \Filament\Schema\Components\Tabs\Tab::make('Tab 1')
-            ->schema([
-                // ...
-            ]),
-        \Filament\Schema\Components\Tabs\Tab::make('Tab 2')
-            ->schema([
-                // ...
-            ]),
-        \Filament\Schema\Components\Tabs\Tab::make('Tab 3')
-            ->schema([
-                // ...
-            ]),
-    ])
-    ->persistTabInQueryString('settings-tab')
-```
diff --git a/packages/infolists/docs/04-layout/05-section.md b/packages/infolists/docs/04-layout/05-section.md
deleted file mode 100644
index 8fcea4626d..0000000000
--- a/packages/infolists/docs/04-layout/05-section.md
+++ /dev/null
@@ -1,250 +0,0 @@
----
-title: Section
----
-import AutoScreenshot from "@components/AutoScreenshot.astro"
-
-## Overview
-
-You may want to separate your entries into sections, each with a heading and description. To do this, you can use a section component:
-
-```php
-use Filament\Schema\Components\Section;
-
-Section::make('Rate limiting')
-    ->description('Prevent abuse by limiting the number of requests per period')
-    ->schema([
-        // ...
-    ])
-```
-
-<AutoScreenshot name="infolists/layout/section/simple" alt="Section" version="3.x" />
-
-You can also use a section without a header, which just wraps the components in a simple card:
-
-```php
-use Filament\Schema\Components\Section;
-
-Section::make()
-    ->schema([
-        // ...
-    ])
-```
-
-<AutoScreenshot name="infolists/layout/section/without-header" alt="Section without header" version="3.x" />
-
-## Adding actions to the section's header or footer
-
-Sections can have actions in their [header](#adding-actions-to-the-sections-header) or [footer](#adding-actions-to-the-sections-footer).
-
-### Adding actions to the section's header
-
-You may add [actions](../actions) to the section's header using the `headerActions()` method:
-
-```php
-use Filament\Actions\Action;
-use Filament\Schema\Components\Section;
-
-Section::make('Rate limiting')
-    ->headerActions([
-        Action::make('edit')
-            ->action(function () {
-                // ...
-            }),
-    ])
-    ->schema([
-        // ...
-    ])
-```
-
-<AutoScreenshot name="infolists/layout/section/header/actions" alt="Section with header actions" version="3.x" />
-
-> [Make sure the section has a heading or ID](#adding-actions-to-a-section-without-heading)
-
-### Adding actions to the section's footer
-
-In addition to [header actions](#adding-an-icon-to-the-sections-header), you may add [actions](../actions) to the section's footer using the `footerActions()` method:
-
-```php
-use Filament\Actions\Action;
-use Filament\Schema\Components\Section;
-
-Section::make('Rate limiting')
-    ->footerActions([
-        Action::make('edit')
-            ->action(function () {
-                // ...
-            }),
-    ])
-    ->schema([
-        // ...
-    ])
-```
-
-<AutoScreenshot name="infolists/layout/section/footer/actions" alt="Section with footer actions" version="3.x" />
-
-> [Make sure the section has a heading or ID](#adding-actions-to-a-section-without-heading)
-
-#### Aligning section footer actions
-
-Footer actions are aligned to the inline start by default. You may customize the alignment using the `footerActionsAlignment()` method:
-
-```php
-use Filament\Actions\Action;
-use Filament\Schema\Components\Section;
-use Filament\Support\Enums\Alignment;
-
-Section::make('Rate limiting')
-    ->footerActions([
-        Action::make('edit')
-            ->action(function () {
-                // ...
-            }),
-    ])
-    ->footerActionsAlignment(Alignment::End)
-    ->schema([
-        // ...
-    ])
-```
-
-### Adding actions to a section without heading
-
-If your section does not have a heading, Filament has no way of locating the action inside it. In this case, you must pass a unique `id()` to the section:
-
-```php
-use Filament\Schema\Components\Section;
-
-Section::make()
-    ->id('rateLimitingSection')
-    ->headerActions([
-        // ...
-    ])
-    ->schema([
-        // ...
-    ])
-```
-
-## Adding an icon to the section's header
-
-You may add an icon to the section's header using the `icon()` method:
-
-```php
-use Filament\Schema\Components\Section;
-
-Section::make('Cart')
-    ->description('The items you have selected for purchase')
-    ->icon('heroicon-m-shopping-bag')
-    ->schema([
-        // ...
-    ])
-```
-
-<AutoScreenshot name="infolists/layout/section/icons" alt="Section with icon" version="3.x" />
-
-## Positioning the heading and description aside
-
-You may use the `aside()` method to align the heading and description on the left, and the infolist components inside a card on the right:
-
-```php
-use Filament\Schema\Components\Section;
-
-Section::make('Rate limiting')
-    ->description('Prevent abuse by limiting the number of requests per period')
-    ->aside()
-    ->schema([
-        // ...
-    ])
-```
-
-<AutoScreenshot name="infolists/layout/section/aside" alt="Section with heading and description aside" version="3.x" />
-
-## Collapsing sections
-
-Sections may be `collapsible()` to optionally hide content in long infolists:
-
-```php
-use Filament\Schema\Components\Section;
-
-Section::make('Cart')
-    ->description('The items you have selected for purchase')
-    ->schema([
-        // ...
-    ])
-    ->collapsible()
-```
-
-Your sections may be `collapsed()` by default:
-
-```php
-use Filament\Schema\Components\Section;
-
-Section::make('Cart')
-    ->description('The items you have selected for purchase')
-    ->schema([
-        // ...
-    ])
-    ->collapsed()
-```
-
-<AutoScreenshot name="infolists/layout/section/collapsed" alt="Collapsed section" version="3.x" />
-
-### Persisting collapsed sections
-
-You can persist whether a section is collapsed in local storage using the `persistCollapsed()` method, so it will remain collapsed when the user refreshes the page:
-
-```php
-use Filament\Schema\Components\Section;
-
-Section::make('Cart')
-    ->description('The items you have selected for purchase')
-    ->schema([
-        // ...
-    ])
-    ->collapsible()
-    ->persistCollapsed()
-```
-
-To persist the collapse state, the local storage needs a unique ID to store the state. This ID is generated based on the heading of the section. If your section does not have a heading, or if you have multiple sections with the same heading that you do not want to collapse together, you can manually specify the `id()` of that section to prevent an ID conflict:
-
-```php
-use Filament\Schema\Components\Section;
-
-Section::make('Cart')
-    ->description('The items you have selected for purchase')
-    ->schema([
-        // ...
-    ])
-    ->collapsible()
-    ->persistCollapsed()
-    ->id('order-cart')
-```
-
-## Compact section styling
-
-When nesting sections, you can use a more compact styling:
-
-```php
-use Filament\Schema\Components\Section;
-
-Section::make('Rate limiting')
-    ->description('Prevent abuse by limiting the number of requests per period')
-    ->schema([
-        // ...
-    ])
-    ->compact()
-```
-
-<AutoScreenshot name="infolists/layout/section/compact" alt="Compact section" version="3.x" />
-
-## Using grid columns within a section
-
-You may use the `columns()` method to easily create a [grid](grid) within the section:
-
-```php
-use Filament\Schema\Components\Section;
-
-Section::make('Heading')
-    ->schema([
-        // ...
-    ])
-    ->columns(2)
-```
diff --git a/packages/infolists/docs/04-layout/06-split.md b/packages/infolists/docs/04-layout/06-split.md
deleted file mode 100644
index a55125357e..0000000000
--- a/packages/infolists/docs/04-layout/06-split.md
+++ /dev/null
@@ -1,37 +0,0 @@
----
-title: Split
----
-import AutoScreenshot from "@components/AutoScreenshot.astro"
-
-## Overview
-
-The `Split` component allows you to define layouts with flexible widths, using flexbox.
-
-```php
-use Filament\Infolists\Components\TextEntry;
-use Filament\Schema\Components\Section;
-use Filament\Schema\Components\Split;
-use Filament\Support\Enums\FontWeight;
-
-Split::make([
-    Section::make([
-        TextEntry::make('title')
-            ->weight(FontWeight::Bold),
-        TextEntry::make('content')
-            ->markdown()
-            ->prose(),
-    ]),
-    Section::make([
-        TextEntry::make('created_at')
-            ->dateTime(),
-        TextEntry::make('published_at')
-            ->dateTime(),
-    ])->grow(false),
-])->from('md')
-```
-
-In this example, the first section will `grow()` to consume available horizontal space, without affecting the amount of space needed to render the second section. This creates a sidebar effect.
-
-The `from()` method is used to control the [Tailwind breakpoint](https://tailwindcss.com/docs/responsive-design#overview) (`sm`, `md`, `lg`, `xl`, `2xl`) at which the split layout should be used. In this example, the split layout will be used on medium devices and larger. On smaller devices, the sections will stack on top of each other.
-
-<AutoScreenshot name="infolists/layout/split/simple" alt="Split" version="3.x" />
diff --git a/packages/infolists/docs/04-layout/07-custom.md b/packages/infolists/docs/04-layout/07-custom.md
deleted file mode 100644
index 4de1b87bcf..0000000000
--- a/packages/infolists/docs/04-layout/07-custom.md
+++ /dev/null
@@ -1,73 +0,0 @@
----
-title: Custom layouts
----
-import LaracastsBanner from "@components/LaracastsBanner.astro"
-
-<LaracastsBanner
-    title="Build a Custom Infolist Layout"
-    description="Watch the Build Advanced Components for Filament series on Laracasts - it will teach you how to build components, and you'll get to know all the internal tools to help you."
-    url="https://laracasts.com/series/build-advanced-components-for-filament/episodes/9"
-    series="building-advanced-components"
-/>
-
-## View components
-
-Aside from [building custom layout components](#custom-layout-classes), you may create "view" components which allow you to create custom layouts without extra PHP classes.
-
-```php
-use Filament\Schema\Components\View;
-
-View::make('filament.infolists.components.box')
-```
-
-This assumes that you have a `resources/views/filament/infolists/components/box.blade.php` file.
-
-## Custom layout classes
-
-You may create your own custom component classes and views, which you can reuse across your project, and even release as a plugin to the community.
-
-> If you're just creating a simple custom component to use once, you could instead use a [view component](#view) to render any custom Blade file.
-
-To create a custom column class and view, you may use the following command:
-
-```bash
-php artisan make:filament-schema-layout Box
-```
-
-This will create the following layout component class:
-
-```php
-use Filament\Schema\Components\Component;
-
-class Box extends Component
-{
-    protected string $view = 'filament.infolists.components.box';
-
-    public static function make(): static
-    {
-        return app(static::class);
-    }
-}
-```
-
-It will also create a view file at `resources/views/filament/infolists/components/box.blade.php`.
-
-## Rendering the component's schema
-
-Inside your view, you may render the component's `schema()` using the `$getChildComponentContainer()` function:
-
-```blade
-<div>
-    {{ $getChildComponentContainer() }}
-</div>
-```
-
-## Accessing the Eloquent record
-
-Inside your view, you may access the Eloquent record using the `$getRecord()` function:
-
-```blade
-<div>
-    {{ $getRecord()->name }}
-</div>
-```
diff --git a/packages/infolists/docs/05-actions.md b/packages/infolists/docs/05-actions.md
index 6ca3a27b29..fc349ac34b 100644
--- a/packages/infolists/docs/05-actions.md
+++ b/packages/infolists/docs/05-actions.md
@@ -50,7 +50,7 @@ TextEntry::make('cost')
     )
 ```
 
-<AutoScreenshot name="infolists/entries/actions/suffix" alt="Text entry with suffix action" version="3.x" />
+<AutoScreenshot name="infolists/entries/actions/suffix" alt="Text entry with suffix action" version="4.x" />
 
 #### Passing multiple affix actions to a entry
 
@@ -75,7 +75,7 @@ TextEntry::make('cost')
 
 ### Adding a hint action to an entry
 
-All entries support "hint actions", which are rendered aside the entry's [hint](entries/getting-started#adding-a-hint-next-to-the-label). To add a hint action to a entry, you may pass it to `hintAction()`:
+All entries support "hint actions", which are rendered aside the entry's [hint](entries#adding-a-hint-next-to-the-label). To add a hint action to a entry, you may pass it to `hintAction()`:
 
 ```php
 use App\Models\Product;
@@ -95,7 +95,7 @@ TextEntry::make('cost')
     )
 ```
 
-<AutoScreenshot name="infolists/entries/actions/hint" alt="Text entry with hint action" version="3.x" />
+<AutoScreenshot name="infolists/entries/actions/hint" alt="Text entry with hint action" version="4.x" />
 
 #### Passing multiple hint actions to a entry
 
@@ -177,7 +177,7 @@ Actions::make([
 ]),
 ```
 
-<AutoScreenshot name="infolists/layout/actions/anonymous/simple" alt="Anonymous actions" version="3.x" />
+<AutoScreenshot name="infolists/layout/actions/anonymous/simple" alt="Anonymous actions" version="4.x" />
 
 #### Making the independent infolist actions consume the full width of the infolist
 
@@ -191,7 +191,7 @@ Actions::make([
 ])->fullWidth(),
 ```
 
-<AutoScreenshot name="infolists/layout/actions/anonymous/full-width" alt="Anonymous actions consuming the full width" version="3.x" />
+<AutoScreenshot name="infolists/layout/actions/anonymous/full-width" alt="Anonymous actions consuming the full width" version="4.x" />
 
 #### Controlling the horizontal alignment of independent infolist actions
 
@@ -206,7 +206,7 @@ Actions::make([
 ])->alignment(Alignment::Center),
 ```
 
-<AutoScreenshot name="infolists/layout/actions/anonymous/horizontally-aligned-center" alt="Anonymous actions horizontally aligned to the center" version="3.x" />
+<AutoScreenshot name="infolists/layout/actions/anonymous/horizontally-aligned-center" alt="Anonymous actions horizontally aligned to the center" version="4.x" />
 
 #### Controlling the vertical alignment of independent infolist actions
 
@@ -221,4 +221,4 @@ Actions::make([
 ])->verticalAlignment(VerticalAlignment::End),
 ```
 
-<AutoScreenshot name="infolists/layout/actions/anonymous/vertically-aligned-end" alt="Anonymous actions vertically aligned to the end" version="3.x" />
+<AutoScreenshot name="infolists/layout/actions/anonymous/vertically-aligned-end" alt="Anonymous actions vertically aligned to the end" version="4.x" />
diff --git a/packages/notifications/docs/02-sending-notifications.md b/packages/notifications/docs/02-sending-notifications.md
index 802d27a3f3..0db2ed26c5 100644
--- a/packages/notifications/docs/02-sending-notifications.md
+++ b/packages/notifications/docs/02-sending-notifications.md
@@ -31,7 +31,7 @@ class EditPost extends Component
 }
 ```
 
-<AutoScreenshot name="notifications/success" alt="Success notification" version="3.x" />
+<AutoScreenshot name="notifications/success" alt="Success notification" version="4.x" />
 
 ## Setting a title
 
@@ -79,7 +79,7 @@ new FilamentNotification()
     .send()
 ```
 
-<AutoScreenshot name="notifications/icon" alt="Notification with icon" version="3.x" />
+<AutoScreenshot name="notifications/icon" alt="Notification with icon" version="4.x" />
 
 Notifications often have a status like `success`, `warning`, `danger` or `info`. Instead of manually setting the corresponding [icons](../styling/icons) and [colors](../styling/colors), there's a `status()` method which you can pass the status. You may also use the dedicated `success()`, `warning()`, `danger()` and `info()` methods instead. So, cleaning up the above example would look like this:
 
@@ -101,7 +101,7 @@ new FilamentNotification()
     .send()
 ```
 
-<AutoScreenshot name="notifications/statuses" alt="Notifications with various statuses" version="3.x" />
+<AutoScreenshot name="notifications/statuses" alt="Notifications with various statuses" version="4.x" />
 
 ## Setting a background color
 
@@ -125,7 +125,7 @@ new FilamentNotification()
     .send()
 ```
 
-<AutoScreenshot name="notifications/color" alt="Notification with background color" version="3.x" />
+<AutoScreenshot name="notifications/color" alt="Notification with background color" version="4.x" />
 
 ## Setting a duration
 
@@ -221,7 +221,7 @@ new FilamentNotification()
     .send()
 ```
 
-<AutoScreenshot name="notifications/body" alt="Notification with body text" version="3.x" />
+<AutoScreenshot name="notifications/body" alt="Notification with body text" version="4.x" />
 
 ## Adding actions to notifications
 
@@ -260,7 +260,7 @@ new FilamentNotification()
     .send()
 ```
 
-<AutoScreenshot name="notifications/actions" alt="Notification with actions" version="3.x" />
+<AutoScreenshot name="notifications/actions" alt="Notification with actions" version="4.x" />
 
 You can learn more about how to style action buttons [here](../actions/trigger-button).
 
diff --git a/packages/notifications/docs/03-database-notifications.md b/packages/notifications/docs/03-database-notifications.md
index d6b053edd9..0f9d79a55d 100644
--- a/packages/notifications/docs/03-database-notifications.md
+++ b/packages/notifications/docs/03-database-notifications.md
@@ -3,7 +3,7 @@ title: Database notifications
 ---
 import AutoScreenshot from "@components/AutoScreenshot.astro"
 
-<AutoScreenshot name="notifications/database" alt="Database notifications" version="3.x" />
+<AutoScreenshot name="notifications/database" alt="Database notifications" version="4.x" />
 
 ## Setting up the notifications database table
 
diff --git a/packages/panels/docs/02-getting-started.md b/packages/panels/docs/02-getting-started.md
index 51bb737863..aa2cf2e450 100644
--- a/packages/panels/docs/02-getting-started.md
+++ b/packages/panels/docs/02-getting-started.md
@@ -154,7 +154,7 @@ If you open the `PatientResource.php` file, there's a `form()` method with an em
 
 #### "Name" text input
 
-Filament bundles a large selection of [form fields](../forms/fields/getting-started#available-fields). Let's start with a simple [text input field](../forms/fields/text-input):
+Filament bundles a large selection of [form fields](../forms/fields#available-fields). Let's start with a simple [text input field](../forms/fields/text-input):
 
 ```php
 use Filament\Forms;
@@ -748,8 +748,8 @@ Congratulations! Now that you know how to build a basic Filament application, he
 
 - [Create custom pages in the panel that don't belong to resources.](pages)
 - [Learn more about adding action buttons to pages and resources, with modals to collect user input or for confirmation.](../actions/overview)
-- [Explore the available fields to collect input from your users.](../forms/fields/getting-started#available-fields)
-- [Check out the list of form layout components.](../forms/layout/getting-started)
+- [Explore the available fields to collect input from your users.](../forms/fields#available-fields)
+- [Check out the list of form layout components.](../schema/layout)
 - [Discover how to build complex, responsive table layouts without touching CSS.](../tables/layout)
 - [Add summaries to your tables](../tables/summaries)
 - [Write automated tests for your panel using our suite of helper methods.](testing)
diff --git a/packages/panels/docs/03-resources/01-getting-started.md b/packages/panels/docs/03-resources/01-overview.md
similarity index 98%
rename from packages/panels/docs/03-resources/01-getting-started.md
rename to packages/panels/docs/03-resources/01-overview.md
index 789ebea578..edc4ae3efc 100644
--- a/packages/panels/docs/03-resources/01-getting-started.md
+++ b/packages/panels/docs/03-resources/01-overview.md
@@ -1,5 +1,5 @@
 ---
-title: Getting started
+title: Overview
 ---
 import LaracastsBanner from "@components/LaracastsBanner.astro"
 
@@ -138,7 +138,7 @@ public static function form(Schema $form): Schema
 }
 ```
 
-The `schema()` method is used to define the structure of your form. It is an array of [fields](../../forms/fields/getting-started#available-fields) and [layout components](../../forms/layout/getting-started#available-layout-components), in the order they should appear in your form.
+The `schema()` method is used to define the structure of your form. It is an array of [fields](../../forms/fields#available-fields) and [layout components](../../schema/layout#available-layout-components), in the order they should appear in your form.
 
 Check out the Forms docs for a [guide](../../forms/getting-started) on how to build forms with Filament.
 
diff --git a/packages/panels/docs/03-resources/03-creating-records.md b/packages/panels/docs/03-resources/03-creating-records.md
index 140ca70fd1..8057224f9d 100644
--- a/packages/panels/docs/03-resources/03-creating-records.md
+++ b/packages/panels/docs/03-resources/03-creating-records.md
@@ -254,7 +254,7 @@ class CreateCategory extends CreateRecord
 }
 ```
 
-Inside the `getSteps()` array, return your [wizard steps](../../forms/layout/wizard):
+Inside the `getSteps()` array, return your [wizard steps](../../schema/layout/wizard):
 
 ```php
 use Filament\Forms\Components\MarkdownEditor;
diff --git a/packages/panels/docs/03-resources/04-editing-records.md b/packages/panels/docs/03-resources/04-editing-records.md
index e4f987375d..b349171a0a 100644
--- a/packages/panels/docs/03-resources/04-editing-records.md
+++ b/packages/panels/docs/03-resources/04-editing-records.md
@@ -180,7 +180,7 @@ Alternatively, if you're editing records in a modal action, check out the [Actio
 
 ## Saving a part of the form independently
 
-You may want to allow the user to save a part of the form independently of the rest of the form. One way to do this is with a [section action in the header or footer](../../forms/layout/section#adding-actions-to-the-sections-header-or-footer). From the `action()` method, you can call `saveFormComponentOnly()`, passing in the `Section` component that you want to save:
+You may want to allow the user to save a part of the form independently of the rest of the form. One way to do this is with a [section action in the header or footer](../../schema/layout/section#adding-actions-to-the-sections-header-or-footer). From the `action()` method, you can call `saveFormComponentOnly()`, passing in the `Section` component that you want to save:
 
 ```php
 use Filament\Actions\Action;
@@ -328,7 +328,7 @@ protected function getFormActions(): array
 
 ## Creating another Edit page
 
-One Edit page may not be enough space to allow users to navigate many form fields. You can create as many Edit pages for a resource as you want. This is especially useful if you are using [resource sub-navigation](getting-started#resource-sub-navigation), as you are then easily able to switch between the different Edit pages.
+One Edit page may not be enough space to allow users to navigate many form fields. You can create as many Edit pages for a resource as you want. This is especially useful if you are using [resource sub-navigation](overview#resource-sub-navigation), as you are then easily able to switch between the different Edit pages.
 
 To create an Edit page, you should use the `make:filament-page` command:
 
@@ -367,7 +367,7 @@ public function form(Schema $form): Schema
 
 ## Adding edit pages to resource sub-navigation
 
-If you're using [resource sub-navigation](getting-started#resource-sub-navigation), you can register this page as normal in `getRecordSubNavigation()` of the resource:
+If you're using [resource sub-navigation](overview#resource-sub-navigation), you can register this page as normal in `getRecordSubNavigation()` of the resource:
 
 ```php
 use App\Filament\Resources\CustomerResource\Pages;
diff --git a/packages/panels/docs/03-resources/05-viewing-records.md b/packages/panels/docs/03-resources/05-viewing-records.md
index 96e48fdc9f..a525dda026 100644
--- a/packages/panels/docs/03-resources/05-viewing-records.md
+++ b/packages/panels/docs/03-resources/05-viewing-records.md
@@ -38,7 +38,7 @@ public static function infolist(Schema $infolist): Schema
 }
 ```
 
-The `schema()` method is used to define the structure of your infolist. It is an array of [entries](../../infolists/entries/getting-started#available-entries) and [layout components](../../infolists/layout/getting-started#available-layout-components), in the order they should appear in your infolist.
+The `schema()` method is used to define the structure of your infolist. It is an array of [entries](../../infolists/entries#available-entries) and [layout components](../../schema/layout#available-layout-components), in the order they should appear in your infolist.
 
 Check out the Infolists docs for a [guide](../../infolists/getting-started) on how to build infolists with Filament.
 
@@ -66,7 +66,7 @@ public static function getPages(): array
 
 ## Viewing records in modals
 
-If your resource is simple, you may wish to view records in modals rather than on the [View page](viewing-records). If this is the case, you can just [delete the view page](getting-started#deleting-resource-pages).
+If your resource is simple, you may wish to view records in modals rather than on the [View page](viewing-records). If this is the case, you can just [delete the view page](overview#deleting-resource-pages).
 
 If your resource doesn't contain a `ViewAction`, you can add one to the `$table->actions()` array:
 
@@ -109,7 +109,7 @@ Users may access the View page if the `view()` method of the model policy return
 
 ## Creating another View page
 
-One View page may not be enough space to allow users to navigate a lot of information. You can create as many View pages for a resource as you want. This is especially useful if you are using [resource sub-navigation](getting-started#resource-sub-navigation), as you are then easily able to switch between the different View pages.
+One View page may not be enough space to allow users to navigate a lot of information. You can create as many View pages for a resource as you want. This is especially useful if you are using [resource sub-navigation](overview#resource-sub-navigation), as you are then easily able to switch between the different View pages.
 
 To create a View page, you should use the `make:filament-page` command:
 
@@ -148,7 +148,7 @@ public function infolist(Schema $infolist): Schema
 
 ## Adding view pages to resource sub-navigation
 
-If you're using [resource sub-navigation](getting-started#resource-sub-navigation), you can register this page as normal in `getRecordSubNavigation()` of the resource:
+If you're using [resource sub-navigation](overview#resource-sub-navigation), you can register this page as normal in `getRecordSubNavigation()` of the resource:
 
 ```php
 use App\Filament\Resources\CustomerResource\Pages;
diff --git a/packages/panels/docs/03-resources/07-relation-managers.md b/packages/panels/docs/03-resources/07-relation-managers.md
index fa962db153..ce37ab9930 100644
--- a/packages/panels/docs/03-resources/07-relation-managers.md
+++ b/packages/panels/docs/03-resources/07-relation-managers.md
@@ -33,7 +33,7 @@ From a UX perspective, this solution is only suitable if your related model only
 
 > These are compatible with `BelongsTo`, `HasOne` and `MorphOne` relationships.
 
-All layout form components ([Grid](../../forms/layout/grid#grid-component), [Section](../../forms/layout/section), [Fieldset](../../forms/layout/fieldset), etc.) have a [`relationship()` method](../../forms/advanced#saving-data-to-relationships). When you use this, all fields within that layout are saved to the related model instead of the owner's model:
+All layout form components ([Grid](../../schema/layout/grid#grid-component), [Section](../../schema/layout/section), [Fieldset](../../schema/layout/fieldset), etc.) have a [`relationship()` method](../../forms/advanced#saving-data-to-relationships). When you use this, all fields within that layout are saved to the related model instead of the owner's model:
 
 ```php
 use Filament\Forms\Components\FileUpload;
@@ -73,7 +73,7 @@ php artisan make:filament-relation-manager CategoryResource posts title
 - `posts` is the name of the relationship you want to manage.
 - `title` is the name of the attribute that will be used to identify posts.
 
-This will create a `CategoryResource/RelationManagers/PostsRelationManager.php` file. This contains a class where you are able to define a [form](getting-started#resource-forms) and [table](getting-started#resource-tables) for your relation manager:
+This will create a `CategoryResource/RelationManagers/PostsRelationManager.php` file. This contains a class where you are able to define a [form](overview#resource-forms) and [table](overview#resource-tables) for your relation manager:
 
 ```php
 use Filament\Forms;
@@ -959,7 +959,7 @@ AttachAction::make()
 
 Using a `ManageRelatedRecords` page is an alternative to using a relation manager, if you want to keep the functionality of managing a relationship separate from editing or viewing the owner record.
 
-This feature is ideal if you are using [resource sub-navigation](getting-started#resource-sub-navigation), as you are easily able to switch between the View or Edit page and the relation page.
+This feature is ideal if you are using [resource sub-navigation](overview#resource-sub-navigation), as you are easily able to switch between the View or Edit page and the relation page.
 
 To create a relation page, you should use the `make:filament-page` command:
 
@@ -990,7 +990,7 @@ Now, you can customize the page in exactly the same way as a relation manager, w
 
 ### Adding relation pages to resource sub-navigation
 
-If you're using [resource sub-navigation](getting-started#resource-sub-navigation), you can register this page as normal in `getRecordSubNavigation()` of the resource:
+If you're using [resource sub-navigation](overview#resource-sub-navigation), you can register this page as normal in `getRecordSubNavigation()` of the resource:
 
 ```php
 use App\Filament\Resources\CustomerResource\Pages;
diff --git a/packages/panels/docs/04-pages.md b/packages/panels/docs/04-pages.md
index 2931ce1351..adfbc6ddb7 100644
--- a/packages/panels/docs/04-pages.md
+++ b/packages/panels/docs/04-pages.md
@@ -37,7 +37,7 @@ Since all pages are Livewire components, you can [add actions](../actions/adding
 
 ### Header actions
 
-You can also easily add actions to the header of any page, including [resource pages](resources/getting-started). You don't need to worry about adding anything to the Blade template, we handle that for you. Just return your actions from the `getHeaderActions()` method of the page class:
+You can also easily add actions to the header of any page, including [resource pages](resources). You don't need to worry about adding anything to the Blade template, we handle that for you. Just return your actions from the `getHeaderActions()` method of the page class:
 
 ```php
 use Filament\Actions\Action;
diff --git a/packages/panels/docs/06-navigation.md b/packages/panels/docs/06-navigation.md
index 4bc05b8e2f..875f08f8a1 100644
--- a/packages/panels/docs/06-navigation.md
+++ b/packages/panels/docs/06-navigation.md
@@ -4,7 +4,7 @@ title: Navigation
 
 ## Overview
 
-By default, Filament will register navigation items for each of your [resources](resources/getting-started), [custom pages](pages), and [clusters](clusters). These classes contain static properties and methods that you can override, to configure that navigation item.
+By default, Filament will register navigation items for each of your [resources](resources), [custom pages](pages), and [clusters](clusters). These classes contain static properties and methods that you can override, to configure that navigation item.
 
 If you're looking to add a second layer of navigation to your app, you can use [clusters](clusters). These are useful for grouping resources and pages together.
 
@@ -27,7 +27,7 @@ public static function getNavigationLabel(): string
 
 ## Customizing a navigation item's icon
 
-To customize a navigation item's [icon](../styling/icons), you may override the `$navigationIcon` property on the [resource](resources/getting-started) or [page](pages) class:
+To customize a navigation item's [icon](../styling/icons), you may override the `$navigationIcon` property on the [resource](resources) or [page](pages) class:
 
 ```php
 protected static ?string $navigationIcon = 'heroicon-o-document-text';
@@ -90,7 +90,7 @@ public static function getNavigationBadgeTooltip(): ?string
 
 ## Grouping navigation items
 
-You may group navigation items by specifying a `$navigationGroup` property on a [resource](resources/getting-started) and [custom page](pages):
+You may group navigation items by specifying a `$navigationGroup` property on a [resource](resources) and [custom page](pages):
 
 ```php
 protected static ?string $navigationGroup = 'Settings';
@@ -298,7 +298,7 @@ public static function shouldRegisterNavigation(): bool
 }
 ```
 
-Please note that these methods do not control direct access to the resource or page. They only control whether the resource or page will show up in the navigation. If you want to also control access, then you should use [resource authorization](resources/getting-started#authorization) or [page authorization](pages#authorization).
+Please note that these methods do not control direct access to the resource or page. They only control whether the resource or page will show up in the navigation. If you want to also control access, then you should use [resource authorization](resources#authorization) or [page authorization](pages#authorization).
 
 ## Using top navigation
 
diff --git a/packages/panels/docs/08-users.md b/packages/panels/docs/08-users.md
index fc7f4e9184..982e0e6d72 100644
--- a/packages/panels/docs/08-users.md
+++ b/packages/panels/docs/08-users.md
@@ -60,7 +60,7 @@ class User extends Authenticatable implements FilamentUser
 
 ## Authorizing access to Resources
 
-See the [Authorization](resources/getting-started#authorization) section in the Resource documentation for controlling access to Resource pages and their data records.
+See the [Authorization](resources#authorization) section in the Resource documentation for controlling access to Resource pages and their data records.
 
 ## Setting up user avatars
 
diff --git a/packages/panels/docs/09-configuration.md b/packages/panels/docs/09-configuration.md
index 940cd829da..ae18128c00 100644
--- a/packages/panels/docs/09-configuration.md
+++ b/packages/panels/docs/09-configuration.md
@@ -8,7 +8,7 @@ By default, the configuration file is located at `app/Providers/Filament/AdminPa
 
 ## Introducing panels
 
-By default, when you install the package, there is one panel that has been set up for you - and it lives on `/admin`. All the [resources](resources/getting-started), [custom pages](pages), and [dashboard widgets](dashboard) you create get registered to this panel.
+By default, when you install the package, there is one panel that has been set up for you - and it lives on `/admin`. All the [resources](resources), [custom pages](pages), and [dashboard widgets](dashboard) you create get registered to this panel.
 
 However, you can create as many panels as you want, and each can have its own set of resources, pages and widgets.
 
@@ -183,7 +183,7 @@ public function panel(Panel $panel): Panel
 }
 ```
 
-> In this example, we are using [`getUrl()`](/resources/getting-started#generating-urls-to-resource-pages) on a resource to get the URL to the resource's index page. This feature requires the panel to already be registered though, and the configuration is too early in the request lifecycle to do that. You can use a function to return the URLs instead, which will be resolved when the panel has been registered.
+> In this example, we are using [`getUrl()`](/resources#generating-urls-to-resource-pages) on a resource to get the URL to the resource's index page. This feature requires the panel to already be registered though, and the configuration is too early in the request lifecycle to do that. You can use a function to return the URLs instead, which will be resolved when the panel has been registered.
 
 These URLs need to exactly match the URL that the user is navigating to, including the domain and protocol. If you'd like to use a pattern to match multiple URLs, you can use an asterisk (`*`) as a wildcard character:
 
diff --git a/packages/panels/docs/10-clusters.md b/packages/panels/docs/10-clusters.md
index 6e7bea073f..b5aa436def 100644
--- a/packages/panels/docs/10-clusters.md
+++ b/packages/panels/docs/10-clusters.md
@@ -11,7 +11,7 @@ When using a cluster, a few things happen:
 - A new navigation item is added to the navigation, which is a link to the first resource or page in the cluster.
 - The individual navigation items for the resources or pages are no longer visible in the main navigation.
 - A new sub-navigation UI is added to each resource or page in the cluster, which contains the navigation items for the resources or pages in the cluster.
-- Resources and pages in the cluster get a new URL, prefixed with the name of the cluster. If you are generating URLs to [resources](resources/getting-started#generating-urls-to-resource-pages) and [pages](pages#generating-urls-to-pages) correctly, then this change should be handled for you automatically.
+- Resources and pages in the cluster get a new URL, prefixed with the name of the cluster. If you are generating URLs to [resources](resources#generating-urls-to-resource-pages) and [pages](pages#generating-urls-to-pages) correctly, then this change should be handled for you automatically.
 - The cluster's name is in the breadcrumbs of all resources and pages in the cluster. When clicking it, you are taken to the first resource or page in the cluster.
 
 ## Creating a cluster
diff --git a/packages/panels/docs/11-tenancy.md b/packages/panels/docs/11-tenancy.md
index 43d9f43fd7..3de68a862d 100644
--- a/packages/panels/docs/11-tenancy.md
+++ b/packages/panels/docs/11-tenancy.md
@@ -281,7 +281,7 @@ Now, users will be redirected to the billing page if they don't have an active s
 
 #### Requiring a subscription for specific resources and pages
 
-Sometimes, you may wish to only require a subscription for certain [resources](resources/getting-started) and [custom pages](pages) in your app. You can do this by returning `true` from the `isTenantSubscriptionRequired()` method on the resource or page class:
+Sometimes, you may wish to only require a subscription for certain [resources](resources) and [custom pages](pages) in your app. You can do this by returning `true` from the `isTenantSubscriptionRequired()` method on the resource or page class:
 
 ```php
 public static function isTenantSubscriptionRequired(Panel $panel): bool
diff --git a/packages/panels/docs/13-plugins.md b/packages/panels/docs/13-plugins.md
index 2449be95cf..762afe7586 100644
--- a/packages/panels/docs/13-plugins.md
+++ b/packages/panels/docs/13-plugins.md
@@ -25,7 +25,7 @@ Filament plugins build on top of the concepts of Laravel packages and allow you
 A plugin class is used to allow your package to interact with a panel [configuration](configuration) file. It's a simple PHP class that implements the `Plugin` interface. 3 methods are required:
 
 - The `getId()` method returns the unique identifier of the plugin amongst other plugins. Please ensure that it is specific enough to not clash with other plugins that might be used in the same project.
-- The `register()` method allows you to use any [configuration](configuration) option that is available to the panel. This includes registering [resources](resources/getting-started), [custom pages](pages), [themes](themes), [render hooks](configuration#render-hooks) and more.
+- The `register()` method allows you to use any [configuration](configuration) option that is available to the panel. This includes registering [resources](resources), [custom pages](pages), [themes](themes), [render hooks](configuration#render-hooks) and more.
 - The `boot()` method is run only when the panel that the plugin is being registered to is actually in-use. It is executed by a middleware class.
 
 ```php
diff --git a/packages/schema/docs/01-overview.md b/packages/schema/docs/01-overview.md
new file mode 100644
index 0000000000..2e237dd36c
--- /dev/null
+++ b/packages/schema/docs/01-overview.md
@@ -0,0 +1,52 @@
+---
+title: Overview
+---
+
+## What is a schema?
+
+In Filament, a schema allows you to render components in a view. Components could be:
+
+- [Form fields](../forms/fields), which accept input from the user. For example, a text input, a select, or a checkbox.
+- [Infolist entries](../infolists/entries), which are small read-only displays of data. For example, a text entry, an icon entry, or an image entry.
+- [Layout components](layout), which are used to structure the components. For example, a grid, tabs, or a wizard.
+
+Schemas are like a container for components, and you can add any combination of components within it.
+
+A schema is represented by a `Filament\Schema\Schema` object, and you can pass an array of components to it in the `schema()` method.
+
+For example, you may want to build a form with a schema. The name of the schema is usually dictated by the name of the method that configures it (`form` in this example). Filament instantiates the `Schema` object, and passes it to the method, which then returns the schema with the components added:
+
+```php
+use Filament\Forms\Components\Checkbox;
+use Filament\Forms\Components\Select;
+use Filament\Forms\Components\TextInput;
+use Filament\Schema\Schema;
+
+public function form(Schema $form): Schema
+{
+    return $form
+        ->schema([
+            TextInput::make('name'),
+            Select::make('position')
+                ->options([
+                    'developer' => 'Developer',
+                    'designer' => 'Designer',
+                ]),
+            Checkbox::make('is_admin'),
+            // More components can be added here
+        ]);
+}
+```
+
+The schema object is the container for the components, and can now be rendered. Rendering the schema will render all the components within it in the correct layout.
+
+## What can you use a schema for in Filament?
+
+You can use a schema to:
+
+- Manage the content of a page in a [panel CRUD resource](../panels/resources). There are 3 main pages in a resource that use a schema:
+  - The [Create page](../panels/resources/creating-records) uses a schema to render a form to create a record.
+  - The [Edit page](../panels/resources/editing-records) uses a schema to render a form to edit a record.
+  - The [View page](../panels/resources/viewing-records) page uses a schema to render a disabled form, or a read-only infolist, to view the details about a record.
+- Render content in an [action modal](../actions/modals), such as a form or an infolist. Data from the form is submitted to the server when the action is run.
+- Render content, such as a form, in a Livewire component. Livewire components can be added to any Blade view even if you haven't started your project using Livewire, so any project that uses Blade to render views can use Filament.
diff --git a/packages/forms/docs/04-layout/01-getting-started.md b/packages/schema/docs/02-layout/01-overview.md
similarity index 83%
rename from packages/forms/docs/04-layout/01-getting-started.md
rename to packages/schema/docs/02-layout/01-overview.md
index 783dd5a650..32f2f07497 100644
--- a/packages/forms/docs/04-layout/01-getting-started.md
+++ b/packages/schema/docs/02-layout/01-overview.md
@@ -1,5 +1,5 @@
 ---
-title: Getting started
+title: Overview
 ---
 import LaracastsBanner from "@components/LaracastsBanner.astro"
 
@@ -7,14 +7,14 @@ import LaracastsBanner from "@components/LaracastsBanner.astro"
 
 <LaracastsBanner
     title="Layouts"
-    description="Watch the Rapid Laravel Development with Filament series on Laracasts - it will teach you the basics of customizing the layout of a Filament form."
+    description="Watch the Rapid Laravel Development with Filament series on Laracasts - it will teach you the basics of customizing the layout of a Filament schema."
     url="https://laracasts.com/series/rapid-laravel-development-with-filament/episodes/6"
     series="rapid-laravel-development"
 />
 
-Filament forms are not limited to just displaying fields. You can also use "layout components" to organize them into an infinitely nestable structure.
+Filament schemas are not limited to just displaying [form fields](../../forms/fields) and [infolist entries](../../infolists/entries). You can also use "layout components" to organize them into an infinitely nestable structure.
 
-Layout component classes can be found in the `Filament\Forms\Components` namespace. They reside within the schema of your form, alongside any [fields](fields/getting-started).
+Layout component classes can be found in the `Filament\Schema\Components` namespace. They reside within the schema array of components.
 
 Components may be created using the static `make()` method. Usually, you will then define the child component `schema()` to display inside:
 
@@ -29,7 +29,7 @@ Grid::make(2)
 
 ## Available layout components
 
-Filament ships with some layout components, suitable for arranging your form fields depending on your needs:
+Filament ships with some layout components, suitable for arranging your components depending on your needs:
 
 - [Grid](grid)
 - [Fieldset](fieldset)
diff --git a/packages/forms/docs/04-layout/02-grid.md b/packages/schema/docs/02-layout/02-grid.md
similarity index 89%
rename from packages/forms/docs/04-layout/02-grid.md
rename to packages/schema/docs/02-layout/02-grid.md
index bf45e65bdd..15ffae68da 100644
--- a/packages/forms/docs/04-layout/02-grid.md
+++ b/packages/schema/docs/02-layout/02-grid.md
@@ -25,11 +25,11 @@ In addition to specifying how many columns a layout component should have, you m
 
 ## An example of a responsive grid layout
 
-In this example, we have a form with a [section](section) layout component. Since all layout components support the `columns()` method, we can use it to create a responsive grid layout within the section itself.
+In this example, we have a schema with a [section](section) layout component. Since all layout components support the `columns()` method, we can use it to create a responsive grid layout within the section itself.
 
 We pass an array to `columns()` as we want to specify different numbers of columns for different breakpoints. On devices smaller than the `sm` [Tailwind breakpoint](https://tailwindcss.com/docs/responsive-design#overview), we want to have 1 column, which is default. On devices larger than the `sm` breakpoint, we want to have 3 columns. On devices larger than the `xl` breakpoint, we want to have 6 columns. On devices larger than the `2xl` breakpoint, we want to have 8 columns.
 
-Inside the section, we have a [text input](../fields/text-input). Since text inputs are form components and all form components have a `columnSpan()` method, we can use it to specify how many columns the text input should fill. On devices smaller than the `sm` breakpoint, we want the text input to fill 1 column, which is default. On devices larger than the `sm` breakpoint, we want the text input to fill 2 columns. On devices larger than the `xl` breakpoint, we want the text input to fill 3 columns. On devices larger than the `2xl` breakpoint, we want the text input to fill 4 columns.
+Inside the section, we have a [text input](../../forms/fields/text-input). Since text inputs are form fields and all components have a `columnSpan()` method, we can use it to specify how many columns the text input should fill. On devices smaller than the `sm` breakpoint, we want the text input to fill 1 column, which is default. On devices larger than the `sm` breakpoint, we want the text input to fill 2 columns. On devices larger than the `xl` breakpoint, we want the text input to fill 3 columns. On devices larger than the `2xl` breakpoint, we want the text input to fill 4 columns.
 
 ```php
 use Filament\Forms\Components\TextInput;
@@ -54,7 +54,7 @@ Section::make()
 
 ## Grid component
 
-All layout components support the `columns()` method, but you also have access to an additional `Grid` component. If you feel that your form schema would benefit from an explicit grid syntax with no extra styling, it may be useful to you. Instead of using the `columns()` method, you can pass your column configuration directly to `Grid::make()`:
+All layout components support the `columns()` method, but you also have access to an additional `Grid` component. If you feel that your schema would benefit from an explicit grid syntax with no extra styling, it may be useful to you. Instead of using the `columns()` method, you can pass your column configuration directly to `Grid::make()`:
 
 ```php
 use Filament\Schema\Components\Grid;
diff --git a/packages/forms/docs/04-layout/03-fieldset.md b/packages/schema/docs/02-layout/03-fieldset.md
similarity index 87%
rename from packages/forms/docs/04-layout/03-fieldset.md
rename to packages/schema/docs/02-layout/03-fieldset.md
index d4a76a3780..7d29dc4243 100644
--- a/packages/forms/docs/04-layout/03-fieldset.md
+++ b/packages/schema/docs/02-layout/03-fieldset.md
@@ -16,7 +16,7 @@ Fieldset::make('Label')
     ])
 ```
 
-<AutoScreenshot name="forms/layout/fieldset/simple" alt="Fieldset" version="3.x" />
+<AutoScreenshot name="schema/layout/fieldset/simple" alt="Fieldset" version="4.x" />
 
 ## Using grid columns within a fieldset
 
diff --git a/packages/forms/docs/04-layout/04-tabs.md b/packages/schema/docs/02-layout/04-tabs.md
similarity index 92%
rename from packages/forms/docs/04-layout/04-tabs.md
rename to packages/schema/docs/02-layout/04-tabs.md
index 6ee2ee4666..1b7fa6c457 100644
--- a/packages/forms/docs/04-layout/04-tabs.md
+++ b/packages/schema/docs/02-layout/04-tabs.md
@@ -5,7 +5,7 @@ import AutoScreenshot from "@components/AutoScreenshot.astro"
 
 ## Overview
 
-Some forms can be long and complex. You may want to use tabs to reduce the number of components that are visible at once:
+Some schemas can be long and complex. You may want to use tabs to reduce the number of components that are visible at once:
 
 ```php
 use Filament\Schema\Components\Tabs;
@@ -27,7 +27,7 @@ Tabs::make('Tabs')
     ])
 ```
 
-<AutoScreenshot name="forms/layout/tabs/simple" alt="Tabs" version="3.x" />
+<AutoScreenshot name="schema/layout/tabs/simple" alt="Tabs" version="4.x" />
 
 ## Setting the default active tab
 
@@ -72,7 +72,7 @@ Tabs::make('Tabs')
     ])
 ```
 
-<AutoScreenshot name="forms/layout/tabs/icons" alt="Tabs with icons" version="3.x" />
+<AutoScreenshot name="schema/layout/tabs/icons" alt="Tabs with icons" version="4.x" />
 
 ### Setting the tab icon position
 
@@ -94,7 +94,7 @@ Tabs::make('Tabs')
     ])
 ```
 
-<AutoScreenshot name="forms/layout/tabs/icons-after" alt="Tabs with icons after their labels" version="3.x" />
+<AutoScreenshot name="schema/layout/tabs/icons-after" alt="Tabs with icons after their labels" version="4.x" />
 
 ## Setting a tab badge
 
@@ -114,7 +114,7 @@ Tabs::make('Tabs')
     ])
 ```
 
-<AutoScreenshot name="forms/layout/tabs/badges" alt="Tabs with badges" version="3.x" />
+<AutoScreenshot name="schema/layout/tabs/badges" alt="Tabs with badges" version="4.x" />
 
 If you'd like to change the color for a badge, you can use the `badgeColor()` method:
 
diff --git a/packages/forms/docs/04-layout/05-wizard.md b/packages/schema/docs/02-layout/05-wizard.md
similarity index 89%
rename from packages/forms/docs/04-layout/05-wizard.md
rename to packages/schema/docs/02-layout/05-wizard.md
index a167ef9837..e8041b7036 100644
--- a/packages/forms/docs/04-layout/05-wizard.md
+++ b/packages/schema/docs/02-layout/05-wizard.md
@@ -5,7 +5,7 @@ import AutoScreenshot from "@components/AutoScreenshot.astro"
 
 ## Overview
 
-Similar to [tabs](tabs), you may want to use a multistep form wizard to reduce the number of components that are visible at once. These are especially useful if your form has a definite chronological order, in which you want each step to be validated as the user progresses.
+Similar to [tabs](tabs), you may want to use a multistep wizard to reduce the number of components that are visible at once. These are especially useful if your form has a definite chronological order, in which you want each step to be validated as the user progresses.
 
 ```php
 use Filament\Schema\Components\Wizard;
@@ -26,7 +26,7 @@ Wizard::make([
 ])
 ```
 
-<AutoScreenshot name="forms/layout/wizard/simple" alt="Wizard" version="3.x" />
+<AutoScreenshot name="schema/layout/wizard/simple" alt="Wizard" version="4.x" />
 
 > We have different setup instructions if you're looking to add a wizard to the creation process inside a [panel resource](../../panels/resources/creating-records#using-a-wizard) or an [action modal](../../actions/modals#using-a-wizard-as-a-modal-form). Following that documentation will ensure that the ability to submit the form is only available on the last step of the wizard.
 
@@ -82,7 +82,7 @@ Wizard\Step::make('Order')
     ]),
 ```
 
-<AutoScreenshot name="forms/layout/wizard/icons" alt="Wizard with step icons" version="3.x" />
+<AutoScreenshot name="schema/layout/wizard/icons" alt="Wizard with step icons" version="4.x" />
 
 ## Customizing the icon for completed steps
 
@@ -98,7 +98,7 @@ Wizard\Step::make('Order')
     ]),
 ```
 
-<AutoScreenshot name="forms/layout/wizard/completed-icons" alt="Wizard with completed step icons" version="3.x" />
+<AutoScreenshot name="schema/layout/wizard/completed-icons" alt="Wizard with completed step icons" version="4.x" />
 
 ## Adding descriptions to steps
 
@@ -114,7 +114,7 @@ Wizard\Step::make('Order')
     ]),
 ```
 
-<AutoScreenshot name="forms/layout/wizard/descriptions" alt="Wizard with step descriptions" version="3.x" />
+<AutoScreenshot name="schema/layout/wizard/descriptions" alt="Wizard with step descriptions" version="4.x" />
 
 ## Setting the default active step
 
diff --git a/packages/forms/docs/04-layout/06-section.md b/packages/schema/docs/02-layout/06-section.md
similarity index 85%
rename from packages/forms/docs/04-layout/06-section.md
rename to packages/schema/docs/02-layout/06-section.md
index 904f1da40e..279491b6e0 100644
--- a/packages/forms/docs/04-layout/06-section.md
+++ b/packages/schema/docs/02-layout/06-section.md
@@ -17,7 +17,7 @@ Section::make('Rate limiting')
     ])
 ```
 
-<AutoScreenshot name="forms/layout/section/simple" alt="Section" version="3.x" />
+<AutoScreenshot name="schema/layout/section/simple" alt="Section" version="4.x" />
 
 You can also use a section without a header, which just wraps the components in a simple card:
 
@@ -30,7 +30,7 @@ Section::make()
     ])
 ```
 
-<AutoScreenshot name="forms/layout/section/without-header" alt="Section without header" version="3.x" />
+<AutoScreenshot name="schema/layout/section/without-header" alt="Section without header" version="4.x" />
 
 ## Adding actions to the section's header or footer
 
@@ -56,7 +56,7 @@ Section::make('Rate limiting')
     ])
 ```
 
-<AutoScreenshot name="forms/layout/section/header/actions" alt="Section with header actions" version="3.x" />
+<AutoScreenshot name="schema/layout/section/header/actions" alt="Section with header actions" version="4.x" />
 
 > [Make sure the section has a heading or ID](#adding-actions-to-a-section-without-heading)
 
@@ -80,7 +80,7 @@ Section::make('Rate limiting')
     ])
 ```
 
-<AutoScreenshot name="forms/layout/section/footer/actions" alt="Section with footer actions" version="3.x" />
+<AutoScreenshot name="schema/layout/section/footer/actions" alt="Section with footer actions" version="4.x" />
 
 > [Make sure the section has a heading or ID](#adding-actions-to-a-section-without-heading)
 
@@ -138,11 +138,11 @@ Section::make('Cart')
     ])
 ```
 
-<AutoScreenshot name="forms/layout/section/icons" alt="Section with icon" version="3.x" />
+<AutoScreenshot name="schema/layout/section/icons" alt="Section with icon" version="4.x" />
 
 ## Positioning the heading and description aside
 
-You may use the `aside()` to align heading & description on the left, and the form components inside a card on the right:
+You may use the `aside()` to align heading & description on the left, and the components inside a card on the right:
 
 ```php
 use Filament\Schema\Components\Section;
@@ -155,11 +155,11 @@ Section::make('Rate limiting')
     ])
 ```
 
-<AutoScreenshot name="forms/layout/section/aside" alt="Section with heading and description aside" version="3.x" />
+<AutoScreenshot name="schema/layout/section/aside" alt="Section with heading and description aside" version="4.x" />
 
 ## Collapsing sections
 
-Sections may be `collapsible()` to optionally hide content in long forms:
+Sections may be `collapsible()` to optionally hide long content:
 
 ```php
 use Filament\Schema\Components\Section;
@@ -185,7 +185,7 @@ Section::make('Cart')
     ->collapsed()
 ```
 
-<AutoScreenshot name="forms/layout/section/collapsed" alt="Collapsed section" version="3.x" />
+<AutoScreenshot name="schema/layout/section/collapsed" alt="Collapsed section" version="4.x" />
 
 ### Persisting collapsed sections
 
@@ -233,7 +233,7 @@ Section::make('Rate limiting')
     ->compact()
 ```
 
-<AutoScreenshot name="forms/layout/section/compact" alt="Compact section" version="3.x" />
+<AutoScreenshot name="schema/layout/section/compact" alt="Compact section" version="4.x" />
 
 ## Using grid columns within a section
 
diff --git a/packages/forms/docs/04-layout/07-split.md b/packages/schema/docs/02-layout/07-split.md
similarity index 93%
rename from packages/forms/docs/04-layout/07-split.md
rename to packages/schema/docs/02-layout/07-split.md
index 47e8532262..930eb74dbd 100644
--- a/packages/forms/docs/04-layout/07-split.md
+++ b/packages/schema/docs/02-layout/07-split.md
@@ -30,4 +30,4 @@ In this example, the first section will `grow()` to consume available horizontal
 
 The `from()` method is used to control the [Tailwind breakpoint](https://tailwindcss.com/docs/responsive-design#overview) (`sm`, `md`, `lg`, `xl`, `2xl`) at which the split layout should be used. In this example, the split layout will be used on medium devices and larger. On smaller devices, the sections will stack on top of each other.
 
-<AutoScreenshot name="forms/layout/split/simple" alt="Split" version="3.x" />
+<AutoScreenshot name="schema/layout/split/simple" alt="Split" version="4.x" />
diff --git a/packages/forms/docs/04-layout/08-custom.md b/packages/schema/docs/02-layout/08-custom.md
similarity index 83%
rename from packages/forms/docs/04-layout/08-custom.md
rename to packages/schema/docs/02-layout/08-custom.md
index 2a6c61c4b9..aca811d7a4 100644
--- a/packages/forms/docs/04-layout/08-custom.md
+++ b/packages/schema/docs/02-layout/08-custom.md
@@ -4,7 +4,7 @@ title: Custom layouts
 import LaracastsBanner from "@components/LaracastsBanner.astro"
 
 <LaracastsBanner
-    title="Build a Custom Form Layout"
+    title="Build a Custom Schema Layout"
     description="Watch the Build Advanced Components for Filament series on Laracasts - it will teach you how to build components, and you'll get to know all the internal tools to help you."
     url="https://laracasts.com/series/build-advanced-components-for-filament/episodes/7"
     series="building-advanced-components"
@@ -17,10 +17,10 @@ Aside from [building custom layout components](#custom-layout-classes), you may
 ```php
 use Filament\Schema\Components\View;
 
-View::make('filament.forms.components.wizard')
+View::make('filament.schema.components.wizard')
 ```
 
-This assumes that you have a `resources/views/filament/forms/components/wizard.blade.php` file.
+This assumes that you have a `resources/views/filament/schema/components/wizard.blade.php` file.
 
 ## Custom layout classes
 
@@ -41,7 +41,7 @@ use Filament\Schema\Components\Component;
 
 class Wizard extends Component
 {
-    protected string $view = 'filament.forms.components.wizard';
+    protected string $view = 'filament.schema.components.wizard';
 
     public static function make(): static
     {
@@ -50,7 +50,7 @@ class Wizard extends Component
 }
 ```
 
-It will also create a view file at `resources/views/filament/forms/components/wizard.blade.php`.
+It will also create a view file at `resources/views/filament/schema/components/wizard.blade.php`.
 
 ## Rendering the component's schema
 
diff --git a/packages/forms/docs/06-actions.md b/packages/schema/docs/03-actions.md
similarity index 91%
rename from packages/forms/docs/06-actions.md
rename to packages/schema/docs/03-actions.md
index d458f94c60..a71ef1cb10 100644
--- a/packages/forms/docs/06-actions.md
+++ b/packages/schema/docs/03-actions.md
@@ -52,7 +52,7 @@ TextInput::make('cost')
     )
 ```
 
-<AutoScreenshot name="forms/fields/actions/suffix" alt="Text input with suffix action" version="3.x" />
+<AutoScreenshot name="forms/fields/actions/suffix" alt="Text input with suffix action" version="4.x" />
 
 Notice `$set` and `$state` injected into the `action()` function in this example. This is [form component action utility injection](#form-component-action-utility-injection).
 
@@ -79,7 +79,7 @@ TextInput::make('cost')
 
 ### Adding a hint action to a field
 
-All fields support "hint actions", which are rendered aside the field's [hint](fields/getting-started#adding-a-hint-next-to-the-label). To add a hint action to a field, you may pass it to `hintAction()`:
+All fields support "hint actions", which are rendered aside the field's [hint](fields#adding-a-hint-next-to-the-label). To add a hint action to a field, you may pass it to `hintAction()`:
 
 ```php
 use Filament\Actions\Action;
@@ -100,7 +100,7 @@ TextInput::make('cost')
 
 Notice `$set` and `$state` injected into the `action()` function in this example. This is [form component action utility injection](#form-component-action-utility-injection).
 
-<AutoScreenshot name="forms/fields/actions/hint" alt="Text input with hint action" version="3.x" />
+<AutoScreenshot name="forms/fields/actions/hint" alt="Text input with hint action" version="4.x" />
 
 #### Passing multiple hint actions to a field
 
@@ -178,7 +178,7 @@ Actions::make([
 ]),
 ```
 
-<AutoScreenshot name="forms/layout/actions/anonymous/simple" alt="Anonymous actions" version="3.x" />
+<AutoScreenshot name="schema/layout/actions/anonymous/simple" alt="Anonymous actions" version="4.x" />
 
 #### Making the independent form actions consume the full width of the form
 
@@ -192,7 +192,7 @@ Actions::make([
 ])->fullWidth(),
 ```
 
-<AutoScreenshot name="forms/layout/actions/anonymous/full-width" alt="Anonymous actions consuming the full width" version="3.x" />
+<AutoScreenshot name="schema/layout/actions/anonymous/full-width" alt="Anonymous actions consuming the full width" version="4.x" />
 
 #### Controlling the horizontal alignment of independent form actions
 
@@ -207,7 +207,7 @@ Actions::make([
 ])->alignment(Alignment::Center),
 ```
 
-<AutoScreenshot name="forms/layout/actions/anonymous/horizontally-aligned-center" alt="Anonymous actions horizontally aligned to the center" version="3.x" />
+<AutoScreenshot name="schema/layout/actions/anonymous/horizontally-aligned-center" alt="Anonymous actions horizontally aligned to the center" version="4.x" />
 
 #### Controlling the vertical alignment of independent form actions
 
@@ -222,7 +222,7 @@ Actions::make([
 ])->verticalAlignment(VerticalAlignment::End),
 ```
 
-<AutoScreenshot name="forms/layout/actions/anonymous/vertically-aligned-end" alt="Anonymous actions vertically aligned to the end" version="3.x" />
+<AutoScreenshot name="schema/layout/actions/anonymous/vertically-aligned-end" alt="Anonymous actions vertically aligned to the end" version="4.x" />
 
 ## Form component action utility injection
 
diff --git a/packages/spatie-laravel-settings-plugin/README.md b/packages/spatie-laravel-settings-plugin/README.md
index afcd9cddbf..93ed839666 100644
--- a/packages/spatie-laravel-settings-plugin/README.md
+++ b/packages/spatie-laravel-settings-plugin/README.md
@@ -34,7 +34,7 @@ protected static string $settings = FooterSettings::class;
 
 You must define a form schema to interact with your settings class inside the `form()` method.
 
-Since the [Form Builder](https://filamentphp.com/docs/forms) is installed in the Panel Builder by default, you may use any form [fields](https://filamentphp.com/docs/forms/fields) or [layout components](https://filamentphp.com/docs/forms/layout) you like:
+Since the [Form Builder](https://filamentphp.com/docs/forms) is installed in the Panel Builder by default, you may use any form [fields](https://filamentphp.com/docs/forms/fields) or [layout components](https://filamentphp.com/docs/schema/layout) you like:
 
 ```php
 use Filament\Forms\Components\Repeater;
diff --git a/packages/tables/docs/02-getting-started.md b/packages/tables/docs/02-getting-started.md
index fa636b10fd..4876fd4046 100644
--- a/packages/tables/docs/02-getting-started.md
+++ b/packages/tables/docs/02-getting-started.md
@@ -5,9 +5,9 @@ import AutoScreenshot from "@components/AutoScreenshot.astro"
 
 ## Overview
 
-Filament's Table Builder package allows you to [add an interactive datatable to any Livewire component](adding-a-table-to-a-livewire-component). It's also used within other Filament packages, such as the [Panel Builder](../panels) for displaying [resources](../panels/resources/getting-started) and [relation managers](../panels/resources/relation-managers), as well as for the [table widget](../panels/dashboard#table-widgets). Learning the features of the Table Builder will be incredibly time-saving when both building your own custom Livewire tables and using Filament's other packages.
+Filament's Table Builder package allows you to [add an interactive datatable to any Livewire component](adding-a-table-to-a-livewire-component). It's also used within other Filament packages, such as the [Panel Builder](../panels) for displaying [resources](../panels/resources) and [relation managers](../panels/resources/relation-managers), as well as for the [table widget](../panels/dashboard#table-widgets). Learning the features of the Table Builder will be incredibly time-saving when both building your own custom Livewire tables and using Filament's other packages.
 
-This guide will walk you through the basics of building tables with Filament's table package. If you're planning to add a new table to your own Livewire component, you should [do that first](adding-a-table-to-a-livewire-component) and then come back. If you're adding a table to an [app resource](../panels/resources/getting-started), or another Filament package, you're ready to go!
+This guide will walk you through the basics of building tables with Filament's table package. If you're planning to add a new table to your own Livewire component, you should [do that first](adding-a-table-to-a-livewire-component) and then come back. If you're adding a table to an [app resource](../panels/resources), or another Filament package, you're ready to go!
 
 ## Defining table columns
 
@@ -34,7 +34,7 @@ public function table(Table $table): Table
 }
 ```
 
-<AutoScreenshot name="tables/getting-started/columns" alt="Table with columns" version="3.x" />
+<AutoScreenshot name="tables/getting-started/columns" alt="Table with columns" version="4.x" />
 
 In this example, there are 3 columns in the table. The first two display [text](columns/text) - the title and slug of each row in the table. The third column displays an [icon](columns/icon), either a green check or a red cross depending on if the row is featured or not.
 
@@ -49,7 +49,7 @@ TextColumn::make('title')
     ->searchable()
 ```
 
-<AutoScreenshot name="tables/getting-started/searchable-columns" alt="Table with searchable column" version="3.x" />
+<AutoScreenshot name="tables/getting-started/searchable-columns" alt="Table with searchable column" version="4.x" />
 
 You can make multiple columns searchable, and Filament will be able to search for matches within any of them, all at once.
 
@@ -62,7 +62,7 @@ TextColumn::make('title')
     ->sortable()
 ```
 
-<AutoScreenshot name="tables/getting-started/sortable-columns" alt="Table with sortable column" version="3.x" />
+<AutoScreenshot name="tables/getting-started/sortable-columns" alt="Table with sortable column" version="4.x" />
 
 ### Accessing related data from columns
 
@@ -74,7 +74,7 @@ use Filament\Tables\Columns\TextColumn;
 TextColumn::make('author.name')
 ```
 
-<AutoScreenshot name="tables/getting-started/relationship-columns" alt="Table with relationship column" version="3.x" />
+<AutoScreenshot name="tables/getting-started/relationship-columns" alt="Table with relationship column" version="4.x" />
 
 In this case, Filament will search for an `author` relationship on the `Post` model, and then display the `name` attribute of that relationship. We call this "dot notation" - you can use it to display any attribute of any relationship, even nested distant relationships. Filament uses this dot notation to eager-load the results of that relationship for you.
 
@@ -107,7 +107,7 @@ public function table(Table $table): Table
 }
 ```
 
-<AutoScreenshot name="tables/getting-started/filters" alt="Table with filters" version="3.x" />
+<AutoScreenshot name="tables/getting-started/filters" alt="Table with filters" version="4.x" />
 
 In this example, we have defined 2 table filters. On the table, there is now a "filter" icon button in the top corner. Clicking it will open a dropdown with the 2 filters we have defined.
 
@@ -155,13 +155,13 @@ public function table(Table $table): Table
 }
 ```
 
-<AutoScreenshot name="tables/getting-started/actions" alt="Table with actions" version="3.x" />
+<AutoScreenshot name="tables/getting-started/actions" alt="Table with actions" version="4.x" />
 
 In this example, we define 2 actions for table rows. The first action is a "feature" action. When clicked, it will set the `is_featured` attribute on the record to `true` - which is written within the `action()` method. Using the `hidden()` method, the action will be hidden if the record is already featured. The second action is an "unfeature" action. When clicked, it will set the `is_featured` attribute on the record to `false`. Using the `visible()` method, the action will be hidden if the record is not featured.
 
 We also define a bulk action. When bulk actions are defined, each row in the table will have a checkbox. This bulk action is [built-in to Filament](../actions/prebuilt-actions/delete#bulk-delete), and it will delete all selected records. However, you can [write your own custom bulk actions](actions#bulk-actions) easily too.
 
-<AutoScreenshot name="tables/getting-started/actions-modal" alt="Table with action modal open" version="3.x" />
+<AutoScreenshot name="tables/getting-started/actions-modal" alt="Table with action modal open" version="4.x" />
 
 Actions can also open modals to request confirmation from the user, as well as render forms inside to collect extra data. It's a good idea to read the [Actions documentation](../actions/overview) to learn more about their extensive capabilities throughout Filament.
 
diff --git a/packages/tables/docs/03-columns/01-getting-started.md b/packages/tables/docs/03-columns/01-overview.md
similarity index 97%
rename from packages/tables/docs/03-columns/01-getting-started.md
rename to packages/tables/docs/03-columns/01-overview.md
index a3beb2fc45..0040c12be0 100644
--- a/packages/tables/docs/03-columns/01-getting-started.md
+++ b/packages/tables/docs/03-columns/01-overview.md
@@ -1,5 +1,5 @@
 ---
-title: Getting started
+title: Overview
 ---
 import AutoScreenshot from "@components/AutoScreenshot.astro"
 import LaracastsBanner from "@components/LaracastsBanner.astro"
@@ -88,7 +88,7 @@ TextColumn::make('name')
     ->sortable()
 ```
 
-<AutoScreenshot name="tables/columns/sortable" alt="Table with sortable column" version="3.x" />
+<AutoScreenshot name="tables/columns/sortable" alt="Table with sortable column" version="4.x" />
 
 If you're using an accessor column, you may pass `sortable()` an array of database columns to sort by:
 
@@ -175,7 +175,7 @@ TextColumn::make('name')
     ->searchable()
 ```
 
-<AutoScreenshot name="tables/columns/searchable" alt="Table with searchable column" version="3.x" />
+<AutoScreenshot name="tables/columns/searchable" alt="Table with searchable column" version="4.x" />
 
 If you're using an accessor column, you may pass `searchable()` an array of database columns to search within:
 
@@ -228,7 +228,7 @@ TextColumn::make('name')
     ->searchable(isIndividual: true)
 ```
 
-<AutoScreenshot name="tables/columns/individually-searchable" alt="Table with individually searchable column" version="3.x" />
+<AutoScreenshot name="tables/columns/individually-searchable" alt="Table with individually searchable column" version="4.x" />
 
 If you use the `isIndividual` parameter, you may still search that column using the main "global" search input field for the entire table.
 
@@ -385,7 +385,7 @@ TextColumn::make('description')
     ->placeholder('No description.')
 ```
 
-<AutoScreenshot name="tables/columns/placeholder" alt="Column with a placeholder for empty state" version="3.x" />
+<AutoScreenshot name="tables/columns/placeholder" alt="Column with a placeholder for empty state" version="4.x" />
 
 ## Hiding columns
 
@@ -412,7 +412,7 @@ TextColumn::make('email')
     ->toggleable()
 ```
 
-<AutoScreenshot name="tables/columns/toggleable" alt="Table with toggleable column" version="3.x" />
+<AutoScreenshot name="tables/columns/toggleable" alt="Table with toggleable column" version="4.x" />
 
 #### Making toggleable columns hidden by default
 
@@ -474,7 +474,7 @@ TextColumn::make('title')
     ->tooltip('Title')
 ```
 
-<AutoScreenshot name="tables/columns/tooltips" alt="Table with column triggering a tooltip" version="3.x" />
+<AutoScreenshot name="tables/columns/tooltips" alt="Table with column triggering a tooltip" version="4.x" />
 
 This method also accepts a closure that can access the current table record:
 
@@ -498,7 +498,7 @@ TextColumn::make('email')
     ->alignment(Alignment::End)
 ```
 
-<AutoScreenshot name="tables/columns/alignment" alt="Table with column aligned to the end" version="3.x" />
+<AutoScreenshot name="tables/columns/alignment" alt="Table with column aligned to the end" version="4.x" />
 
 Alternatively, you may use shorthand methods like `alignEnd()`:
 
@@ -521,7 +521,7 @@ TextColumn::make('name')
     ->verticalAlignment(VerticalAlignment::Start)
 ```
 
-<AutoScreenshot name="tables/columns/vertical-alignment" alt="Table with column vertically aligned to the start" version="3.x" />
+<AutoScreenshot name="tables/columns/vertical-alignment" alt="Table with column vertically aligned to the start" version="4.x" />
 
 Alternatively, you may use shorthand methods like `verticallyAlignStart()`:
 
@@ -593,7 +593,7 @@ public function table(Table $table): Table
 
 The first argument is the label of the group, and the second is an array of column objects that belong to that group.
 
-<AutoScreenshot name="tables/columns/grouping" alt="Table with grouped columns" version="3.x" />
+<AutoScreenshot name="tables/columns/grouping" alt="Table with grouped columns" version="4.x" />
 
 You can also control the group header [alignment](#horizontally-aligning-column-content) and [wrapping](#allowing-column-headers-to-wrap) on the `ColumnGroup` object. To improve the multi-line fluency of the API, you can chain the `columns()` onto the object instead of passing it as the second argument:
 
diff --git a/packages/tables/docs/03-columns/02-text.md b/packages/tables/docs/03-columns/02-text.md
index f0e0167cbf..b5f7c1da84 100644
--- a/packages/tables/docs/03-columns/02-text.md
+++ b/packages/tables/docs/03-columns/02-text.md
@@ -13,7 +13,7 @@ use Filament\Tables\Columns\TextColumn;
 TextColumn::make('title')
 ```
 
-<AutoScreenshot name="tables/columns/text/simple" alt="Text column" version="3.x" />
+<AutoScreenshot name="tables/columns/text/simple" alt="Text column" version="4.x" />
 
 ## Displaying as a "badge"
 
@@ -32,7 +32,7 @@ TextColumn::make('status')
     })
 ```
 
-<AutoScreenshot name="tables/columns/text/badge" alt="Text column as badge" version="3.x" />
+<AutoScreenshot name="tables/columns/text/badge" alt="Text column as badge" version="4.x" />
 
 You may add other things to the badge, like an [icon](#adding-an-icon).
 
@@ -49,7 +49,7 @@ TextColumn::make('title')
     ->description(fn (Post $record): string => $record->description)
 ```
 
-<AutoScreenshot name="tables/columns/text/description" alt="Text column with description" version="3.x" />
+<AutoScreenshot name="tables/columns/text/description" alt="Text column with description" version="4.x" />
 
 By default, the description is displayed below the main text, but you can move it above using the second parameter:
 
@@ -60,7 +60,7 @@ TextColumn::make('title')
     ->description(fn (Post $record): string => $record->description, position: 'above')
 ```
 
-<AutoScreenshot name="tables/columns/text/description-above" alt="Text column with description above the content" version="3.x" />
+<AutoScreenshot name="tables/columns/text/description-above" alt="Text column with description above the content" version="4.x" />
 
 ## Date formatting
 
@@ -370,7 +370,7 @@ TextColumn::make('status')
     ->color('primary')
 ```
 
-<AutoScreenshot name="tables/columns/text/color" alt="Text column in the primary color" version="3.x" />
+<AutoScreenshot name="tables/columns/text/color" alt="Text column in the primary color" version="4.x" />
 
 ## Adding an icon
 
@@ -383,7 +383,7 @@ TextColumn::make('email')
     ->icon('heroicon-m-envelope')
 ```
 
-<AutoScreenshot name="tables/columns/text/icon" alt="Text column with icon" version="3.x" />
+<AutoScreenshot name="tables/columns/text/icon" alt="Text column with icon" version="4.x" />
 
 You may set the position of an icon using `iconPosition()`:
 
@@ -396,7 +396,7 @@ TextColumn::make('email')
     ->iconPosition(IconPosition::After) // `IconPosition::Before` or `IconPosition::After`
 ```
 
-<AutoScreenshot name="tables/columns/text/icon-after" alt="Text column with icon after" version="3.x" />
+<AutoScreenshot name="tables/columns/text/icon-after" alt="Text column with icon after" version="4.x" />
 
 The icon color defaults to the text color, but you may customize the icon color separately using `iconColor()`:
 
@@ -408,7 +408,7 @@ TextColumn::make('email')
     ->iconColor('primary')
 ```
 
-<AutoScreenshot name="tables/columns/text/icon-color" alt="Text column with icon in the primary color" version="3.x" />
+<AutoScreenshot name="tables/columns/text/icon-color" alt="Text column with icon in the primary color" version="4.x" />
 
 ## Customizing the text size
 
@@ -423,7 +423,7 @@ TextColumn::make('title')
     ->size(TextColumn\Enums\TextColumnSize::Large)
 ```
 
-<AutoScreenshot name="tables/columns/text/large" alt="Text column in a large font size" version="3.x" />
+<AutoScreenshot name="tables/columns/text/large" alt="Text column in a large font size" version="4.x" />
 
 ## Customizing the font weight
 
@@ -439,7 +439,7 @@ TextColumn::make('title')
     ->weight(FontWeight::Bold)
 ```
 
-<AutoScreenshot name="tables/columns/text/bold" alt="Text column in a bold font" version="3.x" />
+<AutoScreenshot name="tables/columns/text/bold" alt="Text column in a bold font" version="4.x" />
 
 ## Customizing the font family
 
@@ -455,7 +455,7 @@ TextColumn::make('email')
     ->fontFamily(FontFamily::Mono)
 ```
 
-<AutoScreenshot name="tables/columns/text/mono" alt="Text column in a monospaced font" version="3.x" />
+<AutoScreenshot name="tables/columns/text/mono" alt="Text column in a monospaced font" version="4.x" />
 
 ## Allowing the text to be copied to the clipboard
 
@@ -470,7 +470,7 @@ TextColumn::make('email')
     ->copyMessageDuration(1500)
 ```
 
-<AutoScreenshot name="tables/columns/text/copyable" alt="Text column with a button to copy it" version="3.x" />
+<AutoScreenshot name="tables/columns/text/copyable" alt="Text column with a button to copy it" version="4.x" />
 
 ### Customizing the text that is copied to the clipboard
 
diff --git a/packages/tables/docs/03-columns/03-icon.md b/packages/tables/docs/03-columns/03-icon.md
index 058e8ba2d4..14acca607e 100644
--- a/packages/tables/docs/03-columns/03-icon.md
+++ b/packages/tables/docs/03-columns/03-icon.md
@@ -20,7 +20,7 @@ IconColumn::make('status')
 
 In the function, `$state` is the value of the column, and `$record` can be used to access the underlying Eloquent record.
 
-<AutoScreenshot name="tables/columns/icon/simple" alt="Icon column" version="3.x" />
+<AutoScreenshot name="tables/columns/icon/simple" alt="Icon column" version="4.x" />
 
 ## Customizing the color
 
@@ -40,7 +40,7 @@ IconColumn::make('status')
 
 In the function, `$state` is the value of the column, and `$record` can be used to access the underlying Eloquent record.
 
-<AutoScreenshot name="tables/columns/icon/color" alt="Icon column with color" version="3.x" />
+<AutoScreenshot name="tables/columns/icon/color" alt="Icon column with color" version="4.x" />
 
 ## Customizing the size
 
@@ -53,7 +53,7 @@ IconColumn::make('status')
     ->size(IconColumn\Enums\IconColumnSize::Medium)
 ```
 
-<AutoScreenshot name="tables/columns/icon/medium" alt="Medium-sized icon column" version="3.x" />
+<AutoScreenshot name="tables/columns/icon/medium" alt="Medium-sized icon column" version="4.x" />
 
 ## Handling booleans
 
@@ -68,7 +68,7 @@ IconColumn::make('is_featured')
 
 > If this column in the model class is already cast as a `bool` or `boolean`, Filament is able to detect this, and you do not need to use `boolean()` manually.
 
-<AutoScreenshot name="tables/columns/icon/boolean" alt="Icon column to display a boolean" version="3.x" />
+<AutoScreenshot name="tables/columns/icon/boolean" alt="Icon column to display a boolean" version="4.x" />
 
 ### Customizing the boolean icons
 
@@ -83,7 +83,7 @@ IconColumn::make('is_featured')
     ->falseIcon('heroicon-o-x-mark')
 ```
 
-<AutoScreenshot name="tables/columns/icon/boolean-icon" alt="Icon column to display a boolean with custom icons" version="3.x" />
+<AutoScreenshot name="tables/columns/icon/boolean-icon" alt="Icon column to display a boolean with custom icons" version="4.x" />
 
 ### Customizing the boolean colors
 
@@ -98,7 +98,7 @@ IconColumn::make('is_featured')
     ->falseColor('warning')
 ```
 
-<AutoScreenshot name="tables/columns/icon/boolean-color" alt="Icon column to display a boolean with custom colors" version="3.x" />
+<AutoScreenshot name="tables/columns/icon/boolean-color" alt="Icon column to display a boolean with custom colors" version="4.x" />
 
 ## Wrapping multiple icons
 
diff --git a/packages/tables/docs/03-columns/04-image.md b/packages/tables/docs/03-columns/04-image.md
index a01511c45f..38d84b0792 100644
--- a/packages/tables/docs/03-columns/04-image.md
+++ b/packages/tables/docs/03-columns/04-image.md
@@ -15,7 +15,7 @@ ImageColumn::make('avatar')
 
 The column in the database must contain the path to the image, relative to the root directory of its storage disk.
 
-<AutoScreenshot name="tables/columns/image/simple" alt="Image column" version="3.x" />
+<AutoScreenshot name="tables/columns/image/simple" alt="Image column" version="4.x" />
 
 ## Managing the image disk
 
@@ -67,7 +67,7 @@ ImageColumn::make('avatar')
     ->square()
 ```
 
-<AutoScreenshot name="tables/columns/image/square" alt="Square image column" version="3.x" />
+<AutoScreenshot name="tables/columns/image/square" alt="Square image column" version="4.x" />
 
 ## Circular image
 
@@ -80,7 +80,7 @@ ImageColumn::make('avatar')
     ->circular()
 ```
 
-<AutoScreenshot name="tables/columns/image/circular" alt="Circular image column" version="3.x" />
+<AutoScreenshot name="tables/columns/image/circular" alt="Circular image column" version="4.x" />
 
 ## Adding a default image URL
 
@@ -105,7 +105,7 @@ ImageColumn::make('colleagues.avatar')
     ->stacked()
 ```
 
-<AutoScreenshot name="tables/columns/image/stacked" alt="Stacked image column" version="3.x" />
+<AutoScreenshot name="tables/columns/image/stacked" alt="Stacked image column" version="4.x" />
 
 ### Customizing the stacked ring width
 
@@ -157,7 +157,7 @@ ImageColumn::make('colleagues.avatar')
     ->limit(3)
 ```
 
-<AutoScreenshot name="tables/columns/image/limited" alt="Limited image column" version="3.x" />
+<AutoScreenshot name="tables/columns/image/limited" alt="Limited image column" version="4.x" />
 
 ### Showing the remaining images count
 
@@ -173,7 +173,7 @@ ImageColumn::make('colleagues.avatar')
     ->limitedRemainingText()
 ```
 
-<AutoScreenshot name="tables/columns/image/limited-remaining-text" alt="Limited image column with remaining text" version="3.x" />
+<AutoScreenshot name="tables/columns/image/limited-remaining-text" alt="Limited image column with remaining text" version="4.x" />
 
 #### Showing the limited remaining text separately
 
@@ -189,7 +189,7 @@ ImageColumn::make('colleagues.avatar')
     ->limitedRemainingText(isSeparate: true)
 ```
 
-<AutoScreenshot name="tables/columns/image/limited-remaining-text-separately" alt="Limited image column with remaining text separately" version="3.x" />
+<AutoScreenshot name="tables/columns/image/limited-remaining-text-separately" alt="Limited image column with remaining text separately" version="4.x" />
 
 #### Customizing the limited remaining text size
 
diff --git a/packages/tables/docs/03-columns/05-color.md b/packages/tables/docs/03-columns/05-color.md
index 4d83bfff55..4743a0ad05 100644
--- a/packages/tables/docs/03-columns/05-color.md
+++ b/packages/tables/docs/03-columns/05-color.md
@@ -13,7 +13,7 @@ use Filament\Tables\Columns\ColorColumn;
 ColorColumn::make('color')
 ```
 
-<AutoScreenshot name="tables/columns/color/simple" alt="Color column" version="3.x" />
+<AutoScreenshot name="tables/columns/color/simple" alt="Color column" version="4.x" />
 
 ## Allowing the color to be copied to the clipboard
 
@@ -28,7 +28,7 @@ ColorColumn::make('color')
     ->copyMessageDuration(1500)
 ```
 
-<AutoScreenshot name="tables/columns/color/copyable" alt="Color column with a button to copy it" version="3.x" />
+<AutoScreenshot name="tables/columns/color/copyable" alt="Color column with a button to copy it" version="4.x" />
 
 ### Customizing the text that is copied to the clipboard
 
diff --git a/packages/tables/docs/03-columns/06-select.md b/packages/tables/docs/03-columns/06-select.md
index 5615412f91..bfdb0265e3 100644
--- a/packages/tables/docs/03-columns/06-select.md
+++ b/packages/tables/docs/03-columns/06-select.md
@@ -20,7 +20,7 @@ SelectColumn::make('status')
     ])
 ```
 
-<AutoScreenshot name="tables/columns/select/simple" alt="Select column" version="3.x" />
+<AutoScreenshot name="tables/columns/select/simple" alt="Select column" version="4.x" />
 
 ## Validation
 
diff --git a/packages/tables/docs/03-columns/07-toggle.md b/packages/tables/docs/03-columns/07-toggle.md
index 41bcfda680..89430acaca 100644
--- a/packages/tables/docs/03-columns/07-toggle.md
+++ b/packages/tables/docs/03-columns/07-toggle.md
@@ -13,7 +13,7 @@ use Filament\Tables\Columns\ToggleColumn;
 ToggleColumn::make('is_admin')
 ```
 
-<AutoScreenshot name="tables/columns/toggle/simple" alt="Toggle column" version="3.x" />
+<AutoScreenshot name="tables/columns/toggle/simple" alt="Toggle column" version="4.x" />
 
 ## Lifecycle hooks
 
diff --git a/packages/tables/docs/03-columns/08-text-input.md b/packages/tables/docs/03-columns/08-text-input.md
index b89dbead8b..76b4523034 100644
--- a/packages/tables/docs/03-columns/08-text-input.md
+++ b/packages/tables/docs/03-columns/08-text-input.md
@@ -13,7 +13,7 @@ use Filament\Tables\Columns\TextInputColumn;
 TextInputColumn::make('email')
 ```
 
-<AutoScreenshot name="tables/columns/text-input/simple" alt="Text input column" version="3.x" />
+<AutoScreenshot name="tables/columns/text-input/simple" alt="Text input column" version="4.x" />
 
 ## Validation
 
diff --git a/packages/tables/docs/03-columns/09-checkbox.md b/packages/tables/docs/03-columns/09-checkbox.md
index 4c41ef86cc..acdd8f0f55 100644
--- a/packages/tables/docs/03-columns/09-checkbox.md
+++ b/packages/tables/docs/03-columns/09-checkbox.md
@@ -13,7 +13,7 @@ use Filament\Tables\Columns\CheckboxColumn;
 CheckboxColumn::make('is_admin')
 ```
 
-<AutoScreenshot name="tables/columns/checkbox/simple" alt="Checkbox column" version="3.x" />
+<AutoScreenshot name="tables/columns/checkbox/simple" alt="Checkbox column" version="4.x" />
 
 ## Lifecycle hooks
 
diff --git a/packages/tables/docs/04-filters/01-getting-started.md b/packages/tables/docs/04-filters/01-overview.md
similarity index 98%
rename from packages/tables/docs/04-filters/01-getting-started.md
rename to packages/tables/docs/04-filters/01-overview.md
index c44a8d603b..a8f47dffdd 100644
--- a/packages/tables/docs/04-filters/01-getting-started.md
+++ b/packages/tables/docs/04-filters/01-overview.md
@@ -1,5 +1,5 @@
 ---
-title: Getting started
+title: Overview
 ---
 import AutoScreenshot from "@components/AutoScreenshot.astro"
 import LaracastsBanner from "@components/LaracastsBanner.astro"
@@ -27,7 +27,7 @@ public function table(Table $table): Table
 }
 ```
 
-<AutoScreenshot name="tables/filters/simple" alt="Table with filter" version="3.x" />
+<AutoScreenshot name="tables/filters/simple" alt="Table with filter" version="4.x" />
 
 Filters may be created using the static `make()` method, passing its unique name. You should then pass a callback to `query()` which applies your filter's scope:
 
@@ -87,7 +87,7 @@ Filter::make('is_featured')
     ->toggle()
 ```
 
-<AutoScreenshot name="tables/filters/toggle" alt="Table with toggle filter" version="3.x" />
+<AutoScreenshot name="tables/filters/toggle" alt="Table with toggle filter" version="4.x" />
 
 ### Applying the filter by default
 
@@ -227,7 +227,7 @@ public function table(Table $table): Table
 }
 ```
 
-<AutoScreenshot name="tables/filters/custom-trigger-action" alt="Table with custom filters trigger action" version="3.x" />
+<AutoScreenshot name="tables/filters/custom-trigger-action" alt="Table with custom filters trigger action" version="4.x" />
 
 ## Table filter utility injection
 
diff --git a/packages/tables/docs/04-filters/05-custom.md b/packages/tables/docs/04-filters/05-custom.md
index c2959cf5a2..579bcc08ad 100644
--- a/packages/tables/docs/04-filters/05-custom.md
+++ b/packages/tables/docs/04-filters/05-custom.md
@@ -13,7 +13,7 @@ import LaracastsBanner from "@components/LaracastsBanner.astro"
     series="building-advanced-components"
 />
 
-You may use components from the [Form Builder](../../forms/fields/getting-started) to create custom filter forms. The data from the custom filter form is available in the `$data` array of the `query()` callback:
+You may use components from the [Form Builder](../../forms/fields) to create custom filter forms. The data from the custom filter form is available in the `$data` array of the `query()` callback:
 
 ```php
 use Filament\Forms\Components\DatePicker;
@@ -38,7 +38,7 @@ Filter::make('created_at')
     })
 ```
 
-<AutoScreenshot name="tables/filters/custom-form" alt="Table with custom filter form" version="3.x" />
+<AutoScreenshot name="tables/filters/custom-form" alt="Table with custom filter form" version="4.x" />
 
 ### Setting default values for custom filter fields
 
@@ -60,7 +60,7 @@ Filter::make('created_at')
 
 When a filter is active, an indicator is displayed above the table content to signal that the table query has been scoped.
 
-<AutoScreenshot name="tables/filters/indicators" alt="Table with filter indicators" version="3.x" />
+<AutoScreenshot name="tables/filters/indicators" alt="Table with filter indicators" version="4.x" />
 
 By default, the label of the filter is used as the indicator. You can override this using the `indicator()` method:
 
diff --git a/packages/tables/docs/04-filters/06-layout.md b/packages/tables/docs/04-filters/06-layout.md
index c9bfdee7e2..3abf188e84 100644
--- a/packages/tables/docs/04-filters/06-layout.md
+++ b/packages/tables/docs/04-filters/06-layout.md
@@ -72,7 +72,7 @@ public function table(Table $table): Table
 }
 ```
 
-You may use the [trigger action API](getting-started#customizing-the-filters-trigger-action) to [customize the modal](../actions/modals), including [using a `slideOver()`](../actions/modals#using-a-slide-over-instead-of-a-modal).
+You may use the [trigger action API](overview#customizing-the-filters-trigger-action) to [customize the modal](../actions/modals), including [using a `slideOver()`](../actions/modals#using-a-slide-over-instead-of-a-modal).
 
 ## Displaying filters above the table content
 
@@ -91,7 +91,7 @@ public function table(Table $table): Table
 }
 ```
 
-<AutoScreenshot name="tables/filters/above-content" alt="Table with filters above content" version="3.x" />
+<AutoScreenshot name="tables/filters/above-content" alt="Table with filters above content" version="4.x" />
 
 ### Allowing filters above the table content to be collapsed
 
@@ -126,7 +126,7 @@ public function table(Table $table): Table
 }
 ```
 
-<AutoScreenshot name="tables/filters/below-content" alt="Table with filters below content" version="3.x" />
+<AutoScreenshot name="tables/filters/below-content" alt="Table with filters below content" version="4.x" />
 
 ## Hiding the filter indicators
 
@@ -147,7 +147,7 @@ public function table(Table $table): Table
 
 ## Customizing the filter form schema
 
-You may customize the [form schema](../../forms/layout) of the entire filter form at once, in order to rearrange filters into your desired layout, and use any of the [layout components](../../forms/layout) available to forms. To do this, use the `filterFormSchema()` method, passing a closure function that receives the array of defined `$filters` that you can insert:
+You may customize the [form schema](../../schema/layout) of the entire filter form at once, in order to rearrange filters into your desired layout, and use any of the [layout components](../../schema/layout) available to forms. To do this, use the `filterFormSchema()` method, passing a closure function that receives the array of defined `$filters` that you can insert:
 
 ```php
 use Filament\Schema\Components\Section;
@@ -177,4 +177,4 @@ public function table(Table $table): Table
 }
 ```
 
-In this example, we have put two of the filters inside a [section](../../forms/layout/section) component, and used the `columns()` method to specify that the section should have two columns. We have also used the `columnSpanFull()` method to specify that the section should span the full width of the filter form, which is also 2 columns wide. We have inserted each filter into the form schema by using the filter's name as the key in the `$filters` array.
+In this example, we have put two of the filters inside a [section](../../schema/layout/section) component, and used the `columns()` method to specify that the section should have two columns. We have also used the `columnSpanFull()` method to specify that the section should span the full width of the filter form, which is also 2 columns wide. We have inserted each filter into the form schema by using the filter's name as the key in the `$filters` array.
diff --git a/packages/tables/docs/05-actions.md b/packages/tables/docs/05-actions.md
index 7704803c25..2c584ec8ea 100644
--- a/packages/tables/docs/05-actions.md
+++ b/packages/tables/docs/05-actions.md
@@ -52,7 +52,7 @@ Action::make('delete')
 
 All methods on the action accept callback functions, where you can access the current table `$record` that was clicked.
 
-<AutoScreenshot name="tables/actions/simple" alt="Table with actions" version="3.x" />
+<AutoScreenshot name="tables/actions/simple" alt="Table with actions" version="4.x" />
 
 ### Positioning row actions before columns
 
@@ -71,7 +71,7 @@ public function table(Table $table): Table
 }
 ```
 
-<AutoScreenshot name="tables/actions/before-columns" alt="Table with actions before columns" version="3.x" />
+<AutoScreenshot name="tables/actions/before-columns" alt="Table with actions before columns" version="4.x" />
 
 ### Positioning row actions before the checkbox column
 
@@ -90,7 +90,7 @@ public function table(Table $table): Table
 }
 ```
 
-<AutoScreenshot name="tables/actions/before-cells" alt="Table with actions before cells" version="3.x" />
+<AutoScreenshot name="tables/actions/before-cells" alt="Table with actions before cells" version="4.x" />
 
 ### Accessing the selected table rows
 
@@ -151,7 +151,7 @@ BulkAction::make('delete')
 
 The function allows you to access the current table `$records` that are selected. It is an Eloquent collection of models.
 
-<AutoScreenshot name="tables/actions/bulk" alt="Table with bulk action" version="3.x" />
+<AutoScreenshot name="tables/actions/bulk" alt="Table with bulk action" version="4.x" />
 
 ### Grouping bulk actions
 
@@ -267,7 +267,7 @@ public function table(Table $table): Table
 
 This is useful for things like "create" actions, which are not related to any specific table row, or bulk actions that need to be more visible.
 
-<AutoScreenshot name="tables/actions/header" alt="Table with header actions" version="3.x" />
+<AutoScreenshot name="tables/actions/header" alt="Table with header actions" version="4.x" />
 
 ## Column actions
 
@@ -312,7 +312,7 @@ public function table(Table $table): Table
 }
 ```
 
-<AutoScreenshot name="tables/actions/group" alt="Table with action group" version="3.x" />
+<AutoScreenshot name="tables/actions/group" alt="Table with action group" version="4.x" />
 
 ### Choosing an action group button style
 
@@ -328,7 +328,7 @@ ActionGroup::make([
 ])->iconButton()
 ```
 
-<AutoScreenshot name="tables/actions/group-icon-button" alt="Table with icon button action group" version="3.x" />
+<AutoScreenshot name="tables/actions/group-icon-button" alt="Table with icon button action group" version="4.x" />
 
 "Button" triggers have a background color, label, and optionally an [icon](#setting-the-action-group-button-icon). You can switch to that style with the `button()` method:
 
@@ -342,7 +342,7 @@ ActionGroup::make([
     ->label('Actions')
 ```
 
-<AutoScreenshot name="tables/actions/group-button" alt="Table with button action group" version="3.x" />
+<AutoScreenshot name="tables/actions/group-button" alt="Table with button action group" version="4.x" />
 
 "Link" triggers have no background color. They must have a label and optionally an [icon](#setting-the-action-group-button-icon). They look like a link that you might find embedded within text. You can switch to that style with the `link()` method:
 
@@ -356,7 +356,7 @@ ActionGroup::make([
     ->label('Actions')
 ```
 
-<AutoScreenshot name="tables/actions/group-link" alt="Table with link action group" version="3.x" />
+<AutoScreenshot name="tables/actions/group-link" alt="Table with link action group" version="4.x" />
 
 ### Setting the action group button icon
 
@@ -370,7 +370,7 @@ ActionGroup::make([
 ])->icon('heroicon-m-ellipsis-horizontal');
 ```
 
-<AutoScreenshot name="tables/actions/group-icon" alt="Table with customized action group icon" version="3.x" />
+<AutoScreenshot name="tables/actions/group-icon" alt="Table with customized action group icon" version="4.x" />
 
 ### Setting the action group button color
 
@@ -384,7 +384,7 @@ ActionGroup::make([
 ])->color('info');
 ```
 
-<AutoScreenshot name="tables/actions/group-color" alt="Table with customized action group color" version="3.x" />
+<AutoScreenshot name="tables/actions/group-color" alt="Table with customized action group color" version="4.x" />
 
 ### Setting the action group button size
 
@@ -399,7 +399,7 @@ ActionGroup::make([
 ])->size(ActionSize::Small);
 ```
 
-<AutoScreenshot name="tables/actions/group-small" alt="Table with small action group" version="3.x" />
+<AutoScreenshot name="tables/actions/group-small" alt="Table with small action group" version="4.x" />
 
 ### Setting the action group tooltip
 
@@ -413,7 +413,7 @@ ActionGroup::make([
 ])->tooltip('Actions');
 ```
 
-<AutoScreenshot name="tables/actions/group-tooltip" alt="Table with action group tooltip" version="3.x" />
+<AutoScreenshot name="tables/actions/group-tooltip" alt="Table with action group tooltip" version="4.x" />
 
 ## Table action utility injection
 
diff --git a/packages/tables/docs/06-layout.md b/packages/tables/docs/06-layout.md
index 0d42d80d68..248961a520 100644
--- a/packages/tables/docs/06-layout.md
+++ b/packages/tables/docs/06-layout.md
@@ -23,9 +23,9 @@ This is fine, but there is still a glaring issue - **on mobile, the user is unab
 
 Thankfully, Filament lets you build responsive table-like interfaces, without touching HTML or CSS. These layouts let you define exactly where content appears in a table row, at each responsive breakpoint.
 
-<AutoScreenshot name="tables/layout/demo" alt="Table with responsive layout" version="3.x" />
+<AutoScreenshot name="tables/layout/demo" alt="Table with responsive layout" version="4.x" />
 
-<AutoScreenshot name="tables/layout/demo/mobile" alt="Table with responsive layout on mobile" version="3.x" />
+<AutoScreenshot name="tables/layout/demo/mobile" alt="Table with responsive layout on mobile" version="4.x" />
 
 ## Allowing columns to stack on mobile
 
@@ -47,9 +47,9 @@ Split::make([
 ])
 ```
 
-<AutoScreenshot name="tables/layout/split" alt="Table with a split layout" version="3.x" />
+<AutoScreenshot name="tables/layout/split" alt="Table with a split layout" version="4.x" />
 
-<AutoScreenshot name="tables/layout/split/mobile" alt="Table with a split layout on mobile" version="3.x" />
+<AutoScreenshot name="tables/layout/split/mobile" alt="Table with a split layout on mobile" version="4.x" />
 
 A `Split` component is used to wrap around columns, and allow them to stack on mobile.
 
@@ -74,9 +74,9 @@ Split::make([
 
 In this example, the columns will only appear horizontally aside each other from `md` [breakpoint](https://tailwindcss.com/docs/responsive-design#overview) devices onwards:
 
-<AutoScreenshot name="tables/layout/split-desktop" alt="Table with a split layout on desktop" version="3.x" />
+<AutoScreenshot name="tables/layout/split-desktop" alt="Table with a split layout on desktop" version="4.x" />
 
-<AutoScreenshot name="tables/layout/split-desktop/mobile" alt="Table with a stacked layout on mobile" version="3.x" />
+<AutoScreenshot name="tables/layout/split-desktop/mobile" alt="Table with a stacked layout on mobile" version="4.x" />
 
 ### Preventing a column from creating whitespace
 
@@ -102,9 +102,9 @@ Split::make([
 
 The other columns which are allowed to `grow()` will adjust to consume the newly-freed space:
 
-<AutoScreenshot name="tables/layout/grow-disabled" alt="Table with a column that doesn't grow" version="3.x" />
+<AutoScreenshot name="tables/layout/grow-disabled" alt="Table with a column that doesn't grow" version="4.x" />
 
-<AutoScreenshot name="tables/layout/grow-disabled/mobile" alt="Table with a column that doesn't grow on mobile" version="3.x" />
+<AutoScreenshot name="tables/layout/grow-disabled/mobile" alt="Table with a column that doesn't grow on mobile" version="4.x" />
 
 ### Stacking within a split
 
@@ -133,9 +133,9 @@ Split::make([
 ])
 ```
 
-<AutoScreenshot name="tables/layout/stack" alt="Table with a stack" version="3.x" />
+<AutoScreenshot name="tables/layout/stack" alt="Table with a stack" version="4.x" />
 
-<AutoScreenshot name="tables/layout/stack/mobile" alt="Table with a stack on mobile" version="3.x" />
+<AutoScreenshot name="tables/layout/stack/mobile" alt="Table with a stack on mobile" version="4.x" />
 
 #### Hiding a stack on mobile
 
@@ -164,9 +164,9 @@ Split::make([
 ])
 ```
 
-<AutoScreenshot name="tables/layout/stack-hidden-on-mobile" alt="Table with a stack" version="3.x" />
+<AutoScreenshot name="tables/layout/stack-hidden-on-mobile" alt="Table with a stack" version="4.x" />
 
-<AutoScreenshot name="tables/layout/stack-hidden-on-mobile/mobile" alt="Table with no stack on mobile" version="3.x" />
+<AutoScreenshot name="tables/layout/stack-hidden-on-mobile/mobile" alt="Table with no stack on mobile" version="4.x" />
 
 #### Aligning stacked content
 
@@ -202,7 +202,7 @@ Split::make([
 
 Ensure that the columns within the stack have `grow(false)` set, otherwise they will stretch to fill the entire width of the stack and follow their own alignment configuration instead of the stack's.
 
-<AutoScreenshot name="tables/layout/stack-aligned-right" alt="Table with a stack aligned right" version="3.x" />
+<AutoScreenshot name="tables/layout/stack-aligned-right" alt="Table with a stack aligned right" version="4.x" />
 
 #### Spacing stacked content
 
@@ -346,9 +346,9 @@ Panel::make([
 ])->collapsed(false)
 ```
 
-<AutoScreenshot name="tables/layout/collapsible" alt="Table with collapsible content" version="3.x" />
+<AutoScreenshot name="tables/layout/collapsible" alt="Table with collapsible content" version="4.x" />
 
-<AutoScreenshot name="tables/layout/collapsible/mobile" alt="Table with collapsible content on mobile" version="3.x" />
+<AutoScreenshot name="tables/layout/collapsible/mobile" alt="Table with collapsible content on mobile" version="4.x" />
 
 ## Arranging records into a grid
 
@@ -383,9 +383,9 @@ In this example, the rows will be displayed in a grid:
 
 These settings are fully customizable, any [breakpoint](https://tailwindcss.com/docs/responsive-design#overview) from `sm` to `2xl` can contain `1` to `12` columns.
 
-<AutoScreenshot name="tables/layout/grid" alt="Table with grid layout" version="3.x" />
+<AutoScreenshot name="tables/layout/grid" alt="Table with grid layout" version="4.x" />
 
-<AutoScreenshot name="tables/layout/grid/mobile" alt="Table with grid layout on mobile" version="3.x" />
+<AutoScreenshot name="tables/layout/grid/mobile" alt="Table with grid layout on mobile" version="4.x" />
 
 ## Custom HTML
 
diff --git a/packages/tables/docs/07-summaries.md b/packages/tables/docs/07-summaries.md
index 3a2c102f3b..0c32ae4887 100644
--- a/packages/tables/docs/07-summaries.md
+++ b/packages/tables/docs/07-summaries.md
@@ -36,7 +36,7 @@ TextColumn::make('rating')
 
 > The first column in a table may not use summarizers. That column is used to render the heading and subheading/s of the summary section.
 
-<AutoScreenshot name="tables/summaries" alt="Table with summaries" version="3.x" />
+<AutoScreenshot name="tables/summaries" alt="Table with summaries" version="4.x" />
 
 ## Available summarizers
 
diff --git a/packages/tables/docs/08-grouping.md b/packages/tables/docs/08-grouping.md
index 51b7158a27..88059cdfbe 100644
--- a/packages/tables/docs/08-grouping.md
+++ b/packages/tables/docs/08-grouping.md
@@ -23,7 +23,7 @@ public function table(Table $table): Table
 }
 ```
 
-<AutoScreenshot name="tables/grouping" alt="Table with grouping" version="3.x" />
+<AutoScreenshot name="tables/grouping" alt="Table with grouping" version="4.x" />
 
 ## Allowing users to choose between groupings
 
@@ -146,7 +146,7 @@ public function table(Table $table): Table
 }
 ```
 
-<AutoScreenshot name="tables/grouping-descriptions" alt="Table with group descriptions" version="3.x" />
+<AutoScreenshot name="tables/grouping-descriptions" alt="Table with group descriptions" version="4.x" />
 
 ## Setting a group key
 
diff --git a/packages/tables/docs/09-empty-state.md b/packages/tables/docs/09-empty-state.md
index 0ec855614d..5433640175 100644
--- a/packages/tables/docs/09-empty-state.md
+++ b/packages/tables/docs/09-empty-state.md
@@ -7,7 +7,7 @@ import AutoScreenshot from "@components/AutoScreenshot.astro"
 
 The table's "empty state" is rendered when there are no rows in the table.
 
-<AutoScreenshot name="tables/empty-state" alt="Table with empty state" version="3.x" />
+<AutoScreenshot name="tables/empty-state" alt="Table with empty state" version="4.x" />
 
 ## Setting the empty state heading
 
@@ -23,7 +23,7 @@ public function table(Table $table): Table
 }
 ```
 
-<AutoScreenshot name="tables/empty-state-heading" alt="Table with customized empty state heading" version="3.x" />
+<AutoScreenshot name="tables/empty-state-heading" alt="Table with customized empty state heading" version="4.x" />
 
 ## Setting the empty state description
 
@@ -39,7 +39,7 @@ public function table(Table $table): Table
 }
 ```
 
-<AutoScreenshot name="tables/empty-state-description" alt="Table with empty state description" version="3.x" />
+<AutoScreenshot name="tables/empty-state-description" alt="Table with empty state description" version="4.x" />
 
 ## Setting the empty state icon
 
@@ -55,7 +55,7 @@ public function table(Table $table): Table
 }
 ```
 
-<AutoScreenshot name="tables/empty-state-icon" alt="Table with customized empty state icon" version="3.x" />
+<AutoScreenshot name="tables/empty-state-icon" alt="Table with customized empty state icon" version="4.x" />
 
 ## Adding empty state actions
 
@@ -78,7 +78,7 @@ public function table(Table $table): Table
 }
 ```
 
-<AutoScreenshot name="tables/empty-state-actions" alt="Table with empty state actions" version="3.x" />
+<AutoScreenshot name="tables/empty-state-actions" alt="Table with empty state actions" version="4.x" />
 
 ## Using a custom empty state view
 
diff --git a/packages/tables/docs/10-advanced.md b/packages/tables/docs/10-advanced.md
index dee0870a25..8bf4be8476 100644
--- a/packages/tables/docs/10-advanced.md
+++ b/packages/tables/docs/10-advanced.md
@@ -160,7 +160,7 @@ If you're using mass assignment protection on your model, you will also need to
 
 When making the table reorderable, a new button will be available on the table to toggle reordering.
 
-<AutoScreenshot name="tables/reordering" alt="Table with reorderable rows" version="3.x" />
+<AutoScreenshot name="tables/reordering" alt="Table with reorderable rows" version="4.x" />
 
 The `reorderable()` method accepts the name of a column to store the record order in. If you use something like [`spatie/eloquent-sortable`](https://github.com/spatie/eloquent-sortable) with an order column such as `order_column`, you may use this instead:
 
@@ -219,7 +219,7 @@ public function table(Table $table): Table
 }
 ```
 
-<AutoScreenshot name="tables/reordering/custom-trigger-action" alt="Table with reorderable rows and a custom trigger action" version="3.x" />
+<AutoScreenshot name="tables/reordering/custom-trigger-action" alt="Table with reorderable rows and a custom trigger action" version="4.x" />
 
 ## Customizing the table header
 
@@ -389,7 +389,7 @@ public function table(Table $table): Table
 }
 ```
 
-<AutoScreenshot name="tables/striped" alt="Table with striped rows" version="3.x" />
+<AutoScreenshot name="tables/striped" alt="Table with striped rows" version="4.x" />
 
 ### Custom row classes