diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 0000000..e69de29
diff --git a/LICENSE.md b/LICENSE.md
new file mode 100644
index 0000000..780778d
--- /dev/null
+++ b/LICENSE.md
@@ -0,0 +1,9 @@
+The MIT License (MIT)
+
+Copyright 2022 info@3x1.io
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..0ebe5fd
--- /dev/null
+++ b/README.md
@@ -0,0 +1,55 @@
+![Screenshot of VILT](https://raw.githubusercontent.com/3x1io/vilt-admin/main/art/stack.jpeg)
+
+# VILT Framework
+
+VILT stack admin panel
+
+## Install
+
+```bash
+composer require queents/vilt
+```
+Now Install VILT
+
+```bash
+php artisan vilt:install
+```
+
+run NPM or YARN to install and build assets
+
+```bash
+npm i & npm run build
+```
+
+OR
+
+```bash
+yarn & yarn build
+```
+
+Generate Username and Password for Dashboard
+
+```bash
+php artisan roles:install
+```
+
+## Support
+
+you can join our discord server to get support [VILT Admin](https://discord.gg/HUNYbgKDdx)
+
+## Docs
+
+look to the new docs of v4.00 on my website [Docs](https://vilt.3x1.io/docs/)
+
+## Changelog
+
+Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.
+
+## Credits
+
+- [3x1](https://github.com/3x1io)
+
+## License
+
+The MIT License (MIT). Please see [License File](LICENSE.md) for more information.
+
diff --git a/composer.json b/composer.json
new file mode 100644
index 0000000..a1ff614
--- /dev/null
+++ b/composer.json
@@ -0,0 +1,27 @@
+{
+    "name": "queents/vilt",
+    "description": "VILT stack HMVC dashboard and resource generator with ready to use modules",
+    "type": "library",
+    "license": "MIT",
+    "autoload": {
+        "psr-4": {
+            "Queents\\Vilt\\": "src/",
+            "Modules\\": "../../../Modules/"
+        }
+    },
+    "authors": [
+        {
+            "name": "Fady Mondy",
+            "email": "info@3x1.io"
+        }
+    ],
+    "minimum-stability": "beta",
+    "require": {
+        "nwidart/laravel-modules": "^9.0",
+        "spatie/laravel-translatable": "^6.0",
+        "spatie/laravel-translation-loader": "^2.7",
+        "queents/base-module": "^1.0",
+        "queents/roles-module": "^1.0",
+        "queents/generator-module": "^1.0"
+    }
+}
diff --git a/src/Console/InstallVilt.php b/src/Console/InstallVilt.php
new file mode 100644
index 0000000..ab1bc79
--- /dev/null
+++ b/src/Console/InstallVilt.php
@@ -0,0 +1,138 @@
+<?php
+
+namespace Queents\Vilt\Console;
+
+use Illuminate\Console\Command;
+use Illuminate\Support\Facades\Artisan;
+use Illuminate\Support\Facades\File;
+use Symfony\Component\Console\Input\InputOption;
+use Symfony\Component\Console\Input\InputArgument;
+
+class InstallVilt extends Command
+{
+
+    public string $publish;
+    /**
+     * The name and signature of the console command.
+     *
+     * @var string
+     */
+    protected $name = 'vilt:install';
+
+    /**
+     * The console command description.
+     *
+     * @var string
+     */
+    protected $description = 'This Command help you to generate the full file and view for VILT framework';
+
+    /**
+     * Create a new command instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        $this->publish = base_path('vendor/queents/vilt/src/Publish');
+        parent::__construct();
+    }
+
+    /**
+     * Execute the console command.
+     *
+     * @return mixed
+     */
+    public function handle()
+    {
+        /*
+         * Step 1 Copy And Publish Assets
+         */
+        $this->info('Install Jetstream');
+        $this->runArtisan('jetstream:install', [
+            "stack"=>"inertia"
+        ]);
+        $this->info('Migrate Jetstream Tables');
+        $this->runArtisan('migrate');
+        $this->info('Copy tailwind.config.js');
+        $this->handelFile('/tailwind.config.js', base_path('/tailwind.config.js'));
+        $this->info('Copy vite.config.js');
+        $this->handelFile('/vite.config.js', base_path('/vite.config.js'));
+        $this->info('Copy postcss.config.js');
+        $this->handelFile('/postcss.config.js', base_path('/postcss.config.js'));
+        $this->info('Copy package.json');
+        $this->handelFile('/package.json', base_path('/package.json'));
+        $this->info('Copy HandleInertiaRequests.php');
+        $this->handelFile('/app/Http/Middleware/HandleInertiaRequests.php', app_path('/Http/Middleware/HandleInertiaRequests.php'));
+        $this->info('Copy User.php');
+        $this->handelFile('/app/Models/User.php', app_path('/Models/User.php'));
+        $this->info('Copy RouteServiceProvider.php');
+        $this->handelFile('/app/Providers/RouteServiceProvider.php', app_path('/Providers/RouteServiceProvider.php'));
+        $this->info('Copy modules.php');
+        $this->handelFile('/config/modules.php', config_path('/modules.php'));
+        $this->info('Copy app.php');
+        $this->handelFile('/config/app.php', config_path('/app.php'));
+        $this->info('Copy placeholder.webp');
+        $this->handelFile('/public/placeholder.webp', public_path('/placeholder.webp'));
+        $this->info('Copy css');
+        $this->handelFile('/resources/css', resource_path('/css'), 'folder');
+        $this->info('Copy js');
+        $this->handelFile('/resources/js', resource_path('/js'), 'folder');
+        $this->info('Copy views');
+        $this->handelFile('/resources/views', resource_path('/views'), 'folder');
+        $this->info('Copy stubs');
+        $this->handelFile('/stubs/nwidart-stubs', base_path('/stubs/nwidart-stubs'), 'folder');
+        if(!$this->checkFile(base_path('Modules'))){
+            File::makeDirectory(base_path('Modules'));
+        }
+        $this->info('Copy modules_statuses.json');
+        $this->handelFile('/modules_statuses.json', base_path('/modules_statuses.json'));
+        $this->info('Clear cache');
+        $this->runArtisan('optimize:clear');
+        $this->info('Please run npm i & npm run build');
+    }
+
+    public function handelFile(string $from, string $to, string $type = 'file'): void
+    {
+        $checkIfFileEx = $this->checkFile($to);
+        if($checkIfFileEx){
+            $this->deleteFile($to);
+            $this->copyFile($this->publish .$from, $to, $type);
+        }
+        else {
+            $this->copyFile($this->publish .$from, $to, $type);
+        }
+    }
+
+    public function runArtisan(string $command, array $args=[]): string
+    {
+        Artisan::call($command, $args);
+        return  Artisan::output();
+    }
+    public function checkFile(string $path): bool
+    {
+        return File::exists($path);
+    }
+
+    public function copyFile(string $from,string $to, string $type ='file'): bool
+    {
+        if($type === 'folder'){
+            $copy = File::copyDirectory($from , $to);
+        }
+        else {
+            $copy = File::copy($from , $to);
+        }
+
+        return $copy;
+    }
+    public function deleteFile(string $path, string $type ='file'): bool
+    {
+        if($type === 'folder'){
+            $delete = File::deleteDirectory($path);
+        }
+        else {
+            $delete = File::delete($path);
+        }
+
+        return $delete;
+    }
+}
diff --git a/src/Publish/app/Http/Middleware/HandleInertiaRequests.php b/src/Publish/app/Http/Middleware/HandleInertiaRequests.php
new file mode 100644
index 0000000..265a001
--- /dev/null
+++ b/src/Publish/app/Http/Middleware/HandleInertiaRequests.php
@@ -0,0 +1,44 @@
+<?php
+
+namespace App\Http\Middleware;
+
+use Illuminate\Http\Request;
+use Inertia\Middleware;
+use Modules\Base\Services\Core\VILT;
+
+class HandleInertiaRequests extends Middleware
+{
+    /**
+     * The root template that's loaded on the first page visit.
+     *
+     * @see https://inertiajs.com/server-side-setup#root-template
+     * @var string
+     */
+    protected $rootView = 'app';
+
+    /**
+     * Determines the current asset version.
+     *
+     * @see https://inertiajs.com/asset-versioning
+     * @param  \Illuminate\Http\Request  $request
+     * @return string|null
+     */
+    public function version(Request $request): ?string
+    {
+        return parent::version($request);
+    }
+
+    /**
+     * Defines the props that are shared by default.
+     *
+     * @see https://inertiajs.com/shared-data
+     * @param  \Illuminate\Http\Request  $request
+     * @return array
+     */
+    public function share(Request $request): array
+    {
+        return array_merge(parent::share($request), [
+            'data' => VILT::get()
+        ]);
+    }
+}
diff --git a/src/Publish/app/Models/User.php b/src/Publish/app/Models/User.php
new file mode 100644
index 0000000..26f7d03
--- /dev/null
+++ b/src/Publish/app/Models/User.php
@@ -0,0 +1,63 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Contracts\Auth\MustVerifyEmail;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Foundation\Auth\User as Authenticatable;
+use Illuminate\Notifications\Notifiable;
+use Laravel\Fortify\TwoFactorAuthenticatable;
+use Laravel\Jetstream\HasProfilePhoto;
+use Laravel\Sanctum\HasApiTokens;
+use Spatie\Permission\Traits\HasRoles;
+
+class User extends Authenticatable
+{
+    use HasApiTokens;
+    use HasFactory;
+    use HasProfilePhoto;
+    use Notifiable;
+    use TwoFactorAuthenticatable;
+    use HasRoles;
+
+    /**
+     * The attributes that are mass assignable.
+     *
+     * @var string[]
+     */
+    protected $fillable = [
+        'name',
+        'email',
+        'password',
+    ];
+
+    /**
+     * The attributes that should be hidden for serialization.
+     *
+     * @var array
+     */
+    protected $hidden = [
+        'password',
+        'remember_token',
+        'two_factor_recovery_codes',
+        'two_factor_secret',
+    ];
+
+    /**
+     * The attributes that should be cast.
+     *
+     * @var array
+     */
+    protected $casts = [
+        'email_verified_at' => 'datetime',
+    ];
+
+    /**
+     * The accessors to append to the model's array form.
+     *
+     * @var array
+     */
+    protected $appends = [
+        'profile_photo_url',
+    ];
+}
diff --git a/src/Publish/app/Providers/RouteServiceProvider.php b/src/Publish/app/Providers/RouteServiceProvider.php
new file mode 100644
index 0000000..c7d37d4
--- /dev/null
+++ b/src/Publish/app/Providers/RouteServiceProvider.php
@@ -0,0 +1,52 @@
+<?php
+
+namespace App\Providers;
+
+use Illuminate\Cache\RateLimiting\Limit;
+use Illuminate\Foundation\Support\Providers\RouteServiceProvider as ServiceProvider;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\RateLimiter;
+use Illuminate\Support\Facades\Route;
+
+class RouteServiceProvider extends ServiceProvider
+{
+    /**
+     * The path to the "home" route for your application.
+     *
+     * Typically, users are redirected here after authentication.
+     *
+     * @var string
+     */
+    public const HOME = '/admin';
+
+    /**
+     * Define your route model bindings, pattern filters, and other route configuration.
+     *
+     * @return void
+     */
+    public function boot()
+    {
+        $this->configureRateLimiting();
+
+        $this->routes(function () {
+            Route::middleware('api')
+                ->prefix('api')
+                ->group(base_path('routes/api.php'));
+
+            Route::middleware('web')
+                ->group(base_path('routes/web.php'));
+        });
+    }
+
+    /**
+     * Configure the rate limiters for the application.
+     *
+     * @return void
+     */
+    protected function configureRateLimiting()
+    {
+        RateLimiter::for('api', function (Request $request) {
+            return Limit::perMinute(60)->by($request->user()?->id ?: $request->ip());
+        });
+    }
+}
diff --git a/src/Publish/config/app.php b/src/Publish/config/app.php
new file mode 100644
index 0000000..3a9605b
--- /dev/null
+++ b/src/Publish/config/app.php
@@ -0,0 +1,218 @@
+<?php
+
+use Illuminate\Support\Facades\Facade;
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Application Name
+    |--------------------------------------------------------------------------
+    |
+    | This value is the name of your application. This value is used when the
+    | framework needs to place the application's name in a notification or
+    | any other location as required by the application or its packages.
+    |
+    */
+
+    'name' => env('APP_NAME', 'Laravel'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Application Environment
+    |--------------------------------------------------------------------------
+    |
+    | This value determines the "environment" your application is currently
+    | running in. This may determine how you prefer to configure various
+    | services the application utilizes. Set this in your ".env" file.
+    |
+    */
+
+    'env' => env('APP_ENV', 'production'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Application Debug Mode
+    |--------------------------------------------------------------------------
+    |
+    | When your application is in debug mode, detailed error messages with
+    | stack traces will be shown on every error that occurs within your
+    | application. If disabled, a simple generic error page is shown.
+    |
+    */
+
+    'debug' => (bool) env('APP_DEBUG', false),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Application URL
+    |--------------------------------------------------------------------------
+    |
+    | This URL is used by the console to properly generate URLs when using
+    | the Artisan command line tool. You should set this to the root of
+    | your application so that it is used when running Artisan tasks.
+    |
+    */
+
+    'url' => env('APP_URL', 'http://localhost'),
+
+    'asset_url' => env('ASSET_URL'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Application Timezone
+    |--------------------------------------------------------------------------
+    |
+    | Here you may specify the default timezone for your application, which
+    | will be used by the PHP date and date-time functions. We have gone
+    | ahead and set this to a sensible default for you out of the box.
+    |
+    */
+
+    'timezone' => 'UTC',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Application Locale Configuration
+    |--------------------------------------------------------------------------
+    |
+    | The application locale determines the default locale that will be used
+    | by the translation service provider. You are free to set this value
+    | to any of the locales which will be supported by the application.
+    |
+    */
+
+    'locale' => 'en',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Application Fallback Locale
+    |--------------------------------------------------------------------------
+    |
+    | The fallback locale determines the locale to use when the current one
+    | is not available. You may change the value to correspond to any of
+    | the language folders that are provided through your application.
+    |
+    */
+
+    'fallback_locale' => 'en',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Faker Locale
+    |--------------------------------------------------------------------------
+    |
+    | This locale will be used by the Faker PHP library when generating fake
+    | data for your database seeds. For example, this will be used to get
+    | localized telephone numbers, street address information and more.
+    |
+    */
+
+    'faker_locale' => 'en_US',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Encryption Key
+    |--------------------------------------------------------------------------
+    |
+    | This key is used by the Illuminate encrypter service and should be set
+    | to a random, 32 character string, otherwise these encrypted strings
+    | will not be safe. Please do this before deploying an application!
+    |
+    */
+
+    'key' => env('APP_KEY'),
+
+    'cipher' => 'AES-256-CBC',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Maintenance Mode Driver
+    |--------------------------------------------------------------------------
+    |
+    | These configuration options determine the driver used to determine and
+    | manage Laravel's "maintenance mode" status. The "cache" driver will
+    | allow maintenance mode to be controlled across multiple machines.
+    |
+    | Supported drivers: "file", "cache"
+    |
+    */
+
+    'maintenance' => [
+        'driver' => 'file',
+        // 'store'  => 'redis',
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Autoloaded Service Providers
+    |--------------------------------------------------------------------------
+    |
+    | The service providers listed here will be automatically loaded on the
+    | request to your application. Feel free to add your own services to
+    | this array to grant expanded functionality to your applications.
+    |
+    */
+
+    'providers' => [
+
+        /*
+         * Laravel Framework Service Providers...
+         */
+        Illuminate\Auth\AuthServiceProvider::class,
+        Illuminate\Broadcasting\BroadcastServiceProvider::class,
+        Illuminate\Bus\BusServiceProvider::class,
+        Illuminate\Cache\CacheServiceProvider::class,
+        Illuminate\Foundation\Providers\ConsoleSupportServiceProvider::class,
+        Illuminate\Cookie\CookieServiceProvider::class,
+        Illuminate\Database\DatabaseServiceProvider::class,
+        Illuminate\Encryption\EncryptionServiceProvider::class,
+        Illuminate\Filesystem\FilesystemServiceProvider::class,
+        Illuminate\Foundation\Providers\FoundationServiceProvider::class,
+        Illuminate\Hashing\HashServiceProvider::class,
+        Illuminate\Mail\MailServiceProvider::class,
+        Illuminate\Notifications\NotificationServiceProvider::class,
+        Illuminate\Pagination\PaginationServiceProvider::class,
+        Illuminate\Pipeline\PipelineServiceProvider::class,
+        Illuminate\Queue\QueueServiceProvider::class,
+        Illuminate\Redis\RedisServiceProvider::class,
+        Illuminate\Auth\Passwords\PasswordResetServiceProvider::class,
+        Illuminate\Session\SessionServiceProvider::class,
+        Spatie\TranslationLoader\TranslationServiceProvider::class,
+        Illuminate\Validation\ValidationServiceProvider::class,
+        Illuminate\View\ViewServiceProvider::class,
+
+        /*
+         * Package Service Providers...
+         */
+
+        /*
+         * Application Service Providers...
+         */
+        App\Providers\AppServiceProvider::class,
+        App\Providers\AuthServiceProvider::class,
+        // App\Providers\BroadcastServiceProvider::class,
+        App\Providers\EventServiceProvider::class,
+        App\Providers\RouteServiceProvider::class,
+        App\Providers\FortifyServiceProvider::class,
+        App\Providers\JetstreamServiceProvider::class,
+        Krlove\EloquentModelGenerator\Provider\GeneratorServiceProvider::class,
+
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Class Aliases
+    |--------------------------------------------------------------------------
+    |
+    | This array of class aliases will be registered when this application
+    | is started. However, feel free to register as many as you wish as
+    | the aliases are "lazy" loaded so they don't hinder performance.
+    |
+    */
+
+    'aliases' => Facade::defaultAliases()->merge([
+        // 'ExampleClass' => App\Example\ExampleClass::class,
+    ])->toArray(),
+
+];
diff --git a/src/Publish/config/modules.php b/src/Publish/config/modules.php
new file mode 100644
index 0000000..8bb348e
--- /dev/null
+++ b/src/Publish/config/modules.php
@@ -0,0 +1,275 @@
+<?php
+
+use Nwidart\Modules\Activators\FileActivator;
+use Nwidart\Modules\Commands;
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Module Namespace
+    |--------------------------------------------------------------------------
+    |
+    | Default module namespace.
+    |
+    */
+
+    'namespace' => 'Modules',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Module Stubs
+    |--------------------------------------------------------------------------
+    |
+    | Default module stubs.
+    |
+    */
+
+    'stubs' => [
+        'enabled' => false,
+        'path' => base_path('stubs/nwidart-stubs'),
+        'files' => [
+            'routes/web' => 'Routes/web.php',
+            'routes/api' => 'Routes/api.php',
+            'views/index' => 'Resources/views/index.blade.php',
+            'views/master' => 'Resources/views/layouts/master.blade.php',
+            'scaffold/config' => 'Config/config.php',
+            'composer' => 'composer.json',
+            'assets/js/app' => 'Resources/assets/js/app.js',
+            'assets/sass/app' => 'Resources/assets/sass/app.scss',
+            'webpack' => 'webpack.mix.js',
+            'package' => 'package.json'
+        ],
+        'replacements' => [
+            'routes/web' => ['LOWER_NAME', 'STUDLY_NAME'],
+            'routes/api' => ['LOWER_NAME'],
+            'webpack' => ['LOWER_NAME'],
+            'json' => ['LOWER_NAME', 'STUDLY_NAME', 'MODULE_NAMESPACE', 'PROVIDER_NAMESPACE'],
+            'views/index' => ['LOWER_NAME'],
+            'views/master' => ['LOWER_NAME', 'STUDLY_NAME'],
+            'scaffold/config' => ['STUDLY_NAME'],
+            'composer' => [
+                'LOWER_NAME',
+                'STUDLY_NAME',
+                'VENDOR',
+                'AUTHOR_NAME',
+                'AUTHOR_EMAIL',
+                'MODULE_NAMESPACE',
+                'PROVIDER_NAMESPACE',
+            ],
+        ],
+        'gitkeep' => true,
+    ],
+    'paths' => [
+        /*
+        |--------------------------------------------------------------------------
+        | Modules path
+        |--------------------------------------------------------------------------
+        |
+        | This path used for save the generated module. This path also will be added
+        | automatically to list of scanned folders.
+        |
+        */
+
+        'modules' => base_path('Modules'),
+        /*
+        |--------------------------------------------------------------------------
+        | Modules assets path
+        |--------------------------------------------------------------------------
+        |
+        | Here you may update the modules assets path.
+        |
+        */
+
+        'assets' => public_path('modules'),
+        /*
+        |--------------------------------------------------------------------------
+        | The migrations path
+        |--------------------------------------------------------------------------
+        |
+        | Where you run 'module:publish-migration' command, where do you publish the
+        | the migration files?
+        |
+        */
+
+        'migration' => base_path('database/migrations'),
+        /*
+        |--------------------------------------------------------------------------
+        | Generator path
+        |--------------------------------------------------------------------------
+        | Customise the paths where the folders will be generated.
+        | Set the generate key to false to not generate that folder
+        */
+        'generator' => [
+            'config' => ['path' => 'Config', 'generate' => true],
+            'command' => ['path' => 'Console', 'generate' => true],
+            'migration' => ['path' => 'Database/Migrations', 'generate' => true],
+            'seeder' => ['path' => 'Database/Seeders', 'generate' => true],
+            'factory' => ['path' => 'Database/factories', 'generate' => true],
+            'model' => ['path' => 'Entities', 'generate' => true],
+            'routes' => ['path' => 'Routes', 'generate' => true],
+            'controller' => ['path' => 'Http/Controllers', 'generate' => true],
+            'filter' => ['path' => 'Http/Middleware', 'generate' => true],
+            'request' => ['path' => 'Http/Requests', 'generate' => true],
+            'provider' => ['path' => 'Providers', 'generate' => true],
+            'assets' => ['path' => 'Resources/assets', 'generate' => true],
+            'lang' => ['path' => 'Resources/lang', 'generate' => true],
+            'views' => ['path' => 'Resources/views', 'generate' => true],
+            'test' => ['path' => 'Tests/Unit', 'generate' => true],
+            'test-feature' => ['path' => 'Tests/Feature', 'generate' => true],
+            'repository' => ['path' => 'Repositories', 'generate' => false],
+            'event' => ['path' => 'Events', 'generate' => false],
+            'listener' => ['path' => 'Listeners', 'generate' => false],
+            'policies' => ['path' => 'Policies', 'generate' => false],
+            'rules' => ['path' => 'Rules', 'generate' => false],
+            'jobs' => ['path' => 'Jobs', 'generate' => false],
+            'emails' => ['path' => 'Emails', 'generate' => false],
+            'notifications' => ['path' => 'Notifications', 'generate' => false],
+            'resource' => ['path' => 'Transformers', 'generate' => false],
+            'component-view' => ['path' => 'Resources/views/components', 'generate' => false],
+            'component-class' => ['path' => 'View/Components', 'generate' => false],
+        ],
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Package commands
+    |--------------------------------------------------------------------------
+    |
+    | Here you can define which commands will be visible and used in your
+    | application. If for example you don't use some of the commands provided
+    | you can simply comment them out.
+    |
+    */
+    'commands' => [
+        Commands\CommandMakeCommand::class,
+        Commands\ComponentClassMakeCommand::class,
+        Commands\ComponentViewMakeCommand::class,
+        Commands\ControllerMakeCommand::class,
+        Commands\DisableCommand::class,
+        Commands\DumpCommand::class,
+        Commands\EnableCommand::class,
+        Commands\EventMakeCommand::class,
+        Commands\JobMakeCommand::class,
+        Commands\ListenerMakeCommand::class,
+        Commands\MailMakeCommand::class,
+        Commands\MiddlewareMakeCommand::class,
+        Commands\NotificationMakeCommand::class,
+        Commands\ProviderMakeCommand::class,
+        Commands\RouteProviderMakeCommand::class,
+        Commands\InstallCommand::class,
+        Commands\ListCommand::class,
+        Commands\ModuleDeleteCommand::class,
+        Commands\ModuleMakeCommand::class,
+        Commands\FactoryMakeCommand::class,
+        Commands\PolicyMakeCommand::class,
+        Commands\RequestMakeCommand::class,
+        Commands\RuleMakeCommand::class,
+        Commands\MigrateCommand::class,
+        Commands\MigrateRefreshCommand::class,
+        Commands\MigrateResetCommand::class,
+        Commands\MigrateRollbackCommand::class,
+        Commands\MigrateStatusCommand::class,
+        Commands\MigrationMakeCommand::class,
+        Commands\ModelMakeCommand::class,
+        Commands\PublishCommand::class,
+        Commands\PublishConfigurationCommand::class,
+        Commands\PublishMigrationCommand::class,
+        Commands\PublishTranslationCommand::class,
+        Commands\SeedCommand::class,
+        Commands\SeedMakeCommand::class,
+        Commands\SetupCommand::class,
+        Commands\UnUseCommand::class,
+        Commands\UpdateCommand::class,
+        Commands\UseCommand::class,
+        Commands\ResourceMakeCommand::class,
+        Commands\TestMakeCommand::class,
+        Commands\LaravelModulesV6Migrator::class,
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Scan Path
+    |--------------------------------------------------------------------------
+    |
+    | Here you define which folder will be scanned. By default will scan vendor
+    | directory. This is useful if you host the package in packagist website.
+    |
+    */
+
+    'scan' => [
+        'enabled' => true,
+        'paths' => [
+            base_path('vendor/*/*'),
+        ],
+    ],
+    /*
+    |--------------------------------------------------------------------------
+    | Composer File Template
+    |--------------------------------------------------------------------------
+    |
+    | Here is the config for composer.json file, generated by this package
+    |
+    */
+
+    'composer' => [
+        'vendor' => 'queents',
+        'author' => [
+            'name' => 'Fady Mondy',
+            'email' => 'info@3x1.io',
+        ],
+        'composer-output' => false,
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Caching
+    |--------------------------------------------------------------------------
+    |
+    | Here is the config for setting up caching feature.
+    |
+    */
+    'cache' => [
+        'enabled' => false,
+        'key' => 'laravel-modules',
+        'lifetime' => 60,
+    ],
+    /*
+    |--------------------------------------------------------------------------
+    | Choose what laravel-modules will register as custom namespaces.
+    | Setting one to false will require you to register that part
+    | in your own Service Provider class.
+    |--------------------------------------------------------------------------
+    */
+    'register' => [
+        'translations' => true,
+        /**
+         * load files on boot or register method
+         *
+         * Note: boot not compatible with asgardcms
+         *
+         * @example boot|register
+         */
+        'files' => 'register',
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Activators
+    |--------------------------------------------------------------------------
+    |
+    | You can define new types of activators here, file, database etc. The only
+    | required parameter is 'class'.
+    | The file activator will store the activation status in storage/installed_modules
+    */
+    'activators' => [
+        'file' => [
+            'class' => FileActivator::class,
+            'statuses-file' => base_path('modules_statuses.json'),
+            'cache-key' => 'activator.installed',
+            'cache-lifetime' => 604800,
+        ],
+    ],
+
+    'activator' => 'file',
+];
diff --git a/src/Publish/modules_statuses.json b/src/Publish/modules_statuses.json
new file mode 100644
index 0000000..0c8f51e
--- /dev/null
+++ b/src/Publish/modules_statuses.json
@@ -0,0 +1,5 @@
+{
+    "Base": true,
+    "Roles": true,
+    "Generator": true
+}
diff --git a/src/Publish/package.json b/src/Publish/package.json
new file mode 100644
index 0000000..80c2df1
--- /dev/null
+++ b/src/Publish/package.json
@@ -0,0 +1,51 @@
+{
+    "private": true,
+    "scripts": {
+        "dev": "vite",
+        "build": "vite build"
+    },
+    "devDependencies": {
+        "@inertiajs/inertia": "^0.11.0",
+        "@inertiajs/inertia-vue3": "^0.6.0",
+        "@inertiajs/progress": "^0.2.7",
+        "@mdi/js": "^7.0.96",
+        "@tailwindcss/forms": "^0.5.2",
+        "@vitejs/plugin-vue": "^3.0.0",
+        "autoprefixer": "^10.4.2",
+        "axios": "^0.27.2",
+        "chart.js": "^3.9.1",
+        "laravel-vite-plugin": "^0.5.0",
+        "lodash": "^4.17.19",
+        "numeral": "^2.0.6",
+        "pinia": "^2.0.20",
+        "postcss": "^8.4.6",
+        "prettier": "2.7.1",
+        "tailwindcss": "^3.1.0",
+        "vite": "^3.0.0",
+        "vue": "^3.2.31"
+    },
+    "dependencies": {
+        "@meforma/vue-toaster": "^1.3.0",
+        "@suadelabs/vue3-multiselect": "^1.0.2",
+        "@tailwindcss/line-clamp": "^0.4.0",
+        "@vueform/toggle": "^2.1.1",
+        "boxicons": "^2.1.2",
+        "codemirror-editor-vue3": "^2.1.7",
+        "filepond": "^4.30.4",
+        "filepond-plugin-file-validate-type": "^1.2.8",
+        "filepond-plugin-image-preview": "^4.6.11",
+        "moment": "^2.29.4",
+        "tailwindcss-rtl": "^0.9.0",
+        "vue-draggable-next": "^2.1.1",
+        "vue-easy-lightbox": "^1.8.0",
+        "vue-filepond": "^7.0.3",
+        "vue-flatpickr-component": "^9.0.6",
+        "vue-lazyload": "^3.0.0-rc.2",
+        "vue-swatches": "^2.1.1",
+        "vue3-cookies": "^1.0.6",
+        "vue3-editor": "^0.1.1",
+        "vue3-swatches": "^1.0.10",
+        "vue3-tabs-component": "^1.1.0",
+        "vue3-tel-input": "^1.0.4"
+    }
+}
diff --git a/src/Publish/postcss.config.js b/src/Publish/postcss.config.js
new file mode 100644
index 0000000..1d7e6f0
--- /dev/null
+++ b/src/Publish/postcss.config.js
@@ -0,0 +1,8 @@
+/* eslint-env node */
+module.exports = {
+    plugins: [
+        require("postcss-import"),
+        require("tailwindcss"),
+        require("autoprefixer"),
+    ],
+};
diff --git a/src/Publish/public/placeholder.webp b/src/Publish/public/placeholder.webp
new file mode 100644
index 0000000..043f180
Binary files /dev/null and b/src/Publish/public/placeholder.webp differ
diff --git a/src/Publish/resources/css/_checkbox-radio-switch.css b/src/Publish/resources/css/_checkbox-radio-switch.css
new file mode 100644
index 0000000..a7f567b
--- /dev/null
+++ b/src/Publish/resources/css/_checkbox-radio-switch.css
@@ -0,0 +1,59 @@
+@layer components {
+  .checkbox, .radio, .switch {
+    @apply inline-flex items-center cursor-pointer relative;
+  }
+
+  .checkbox input[type=checkbox], .radio input[type=radio], .switch input[type=checkbox] {
+    @apply absolute left-0 opacity-0 -z-1;
+  }
+
+  .checkbox input[type=checkbox]+.check, .radio input[type=radio]+.check, .switch input[type=checkbox]+.check {
+    @apply border-gray-700 border transition-colors duration-200 dark:bg-slate-800;
+  }
+
+  .checkbox input[type=checkbox]:focus+.check, .radio input[type=radio]:focus+.check, .switch input[type=checkbox]:focus+.check {
+    @apply ring ring-blue-700;
+  }
+
+  .checkbox input[type=checkbox]+.check, .radio input[type=radio]+.check {
+    @apply block w-5 h-5;
+  }
+
+  .checkbox input[type=checkbox]+.check {
+    @apply rounded;
+  }
+
+  .switch input[type=checkbox]+.check {
+    @apply flex items-center shrink-0 w-12 h-6 p-0.5 bg-gray-200;
+  }
+
+  .radio input[type=radio]+.check, .switch input[type=checkbox]+.check, .switch input[type=checkbox]+.check:before {
+    @apply rounded-full;
+  }
+
+  .checkbox input[type=checkbox]:checked+.check, .radio input[type=radio]:checked+.check {
+    @apply bg-no-repeat bg-center border-4;
+  }
+
+  .checkbox input[type=checkbox]:checked+.check {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23fff' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E");
+  }
+
+  .radio input[type=radio]:checked+.check {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z' /%3E%3C/svg%3E");
+  }
+
+  .switch input[type=checkbox]:checked+.check, .checkbox input[type=checkbox]:checked+.check, .radio input[type=radio]:checked+.check {
+    @apply bg-blue-600 border-blue-600;
+  }
+
+  .switch input[type=checkbox]+.check:before {
+    content: '';
+    @apply block w-5 h-5 bg-white border border-gray-700;
+  }
+
+  .switch input[type=checkbox]:checked+.check:before {
+    transform: translate3d(110%, 0 ,0);
+    @apply border-blue-600;
+  }
+}
\ No newline at end of file
diff --git a/src/Publish/resources/css/_progress.css b/src/Publish/resources/css/_progress.css
new file mode 100644
index 0000000..65d6796
--- /dev/null
+++ b/src/Publish/resources/css/_progress.css
@@ -0,0 +1,21 @@
+@layer base {
+  progress {
+    @apply h-3 rounded-full overflow-hidden;
+  }
+  
+  progress::-webkit-progress-bar {
+    @apply bg-blue-200;
+  }
+  
+  progress::-webkit-progress-value {
+    @apply bg-blue-500;
+  }
+  
+  progress::-moz-progress-bar {
+    @apply bg-blue-500;
+  }
+  
+  progress::-ms-fill {
+    @apply bg-blue-500 border-0;
+  }
+}
diff --git a/src/Publish/resources/css/_scrollbars.css b/src/Publish/resources/css/_scrollbars.css
new file mode 100644
index 0000000..a181b84
--- /dev/null
+++ b/src/Publish/resources/css/_scrollbars.css
@@ -0,0 +1,41 @@
+@layer base {
+  html {
+    scrollbar-width: thin;
+    scrollbar-color: rgb(156, 163, 175) rgb(249, 250, 251);
+  }
+  
+  body::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+  
+  body::-webkit-scrollbar-track {
+    @apply bg-gray-50;
+  }
+  
+  body::-webkit-scrollbar-thumb {
+    @apply bg-gray-400 rounded;
+  }
+  
+  body::-webkit-scrollbar-thumb:hover {
+    @apply bg-gray-500;
+  }
+}
+
+@layer utilities {
+  .dark-scrollbars-compat {
+    scrollbar-color: rgb(71, 85, 105) rgb(30, 41, 59);
+  }
+  
+  .dark-scrollbars::-webkit-scrollbar-track {
+    @apply bg-slate-800;
+  }
+  
+  .dark-scrollbars::-webkit-scrollbar-thumb {
+    @apply bg-slate-600;
+  }
+  
+  .dark-scrollbars::-webkit-scrollbar-thumb:hover {
+    @apply bg-slate-500;
+  }
+}
diff --git a/src/Publish/resources/css/_table.css b/src/Publish/resources/css/_table.css
new file mode 100644
index 0000000..962b9af
--- /dev/null
+++ b/src/Publish/resources/css/_table.css
@@ -0,0 +1,48 @@
+@layer base {
+  table {
+    @apply w-full;
+  }
+  
+  thead {
+    @apply hidden lg:table-header-group;
+  }
+  
+  tr {
+    @apply max-w-full block relative border-b-4 border-gray-100
+      lg:table-row lg:border-b-0 dark:border-slate-800;
+  }
+  
+  tr:last-child {
+    @apply border-b-0;
+  }
+  
+  td:not(:first-child) {
+    @apply lg:border-l lg:border-t-0 lg:border-r-0 lg:border-b-0 lg:border-gray-100 lg:dark:border-slate-700;
+  }
+  
+  th {
+    @apply lg:text-left lg:p-3;
+  }
+  
+  td {
+    @apply flex justify-between text-right py-3 px-4 align-top border-b border-gray-100
+      lg:table-cell lg:text-left lg:p-3 lg:align-middle lg:border-b-0 dark:border-slate-800;
+  }
+  
+  td:last-child {
+    @apply border-b-0;
+  }
+  
+  tbody tr, tbody tr:nth-child(odd) {
+    @apply lg:hover:bg-gray-100 lg:dark:hover:bg-slate-700/70;
+  }
+  
+  tbody tr:nth-child(odd) {
+    @apply lg:bg-gray-100/50 lg:dark:bg-slate-800/50;
+  }
+  
+  td:before {
+    content: attr(data-label);
+    @apply font-semibold pr-3 text-left lg:hidden;
+  }
+}
diff --git a/src/Publish/resources/css/app.css b/src/Publish/resources/css/app.css
new file mode 100644
index 0000000..b5c61c9
--- /dev/null
+++ b/src/Publish/resources/css/app.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/src/Publish/resources/css/main.css b/src/Publish/resources/css/main.css
new file mode 100644
index 0000000..8f6d211
--- /dev/null
+++ b/src/Publish/resources/css/main.css
@@ -0,0 +1,8 @@
+@import "tailwind/_base.css";
+@import "tailwind/_components.css";
+@import "tailwind/_utilities.css";
+
+@import "_checkbox-radio-switch.css";
+@import "_progress.css";
+@import "_scrollbars.css";
+@import "_table.css";
diff --git a/src/Publish/resources/css/tailwind/_base.css b/src/Publish/resources/css/tailwind/_base.css
new file mode 100644
index 0000000..2f02db5
--- /dev/null
+++ b/src/Publish/resources/css/tailwind/_base.css
@@ -0,0 +1 @@
+@tailwind base;
diff --git a/src/Publish/resources/css/tailwind/_components.css b/src/Publish/resources/css/tailwind/_components.css
new file mode 100644
index 0000000..020aaba
--- /dev/null
+++ b/src/Publish/resources/css/tailwind/_components.css
@@ -0,0 +1 @@
+@tailwind components;
diff --git a/src/Publish/resources/css/tailwind/_utilities.css b/src/Publish/resources/css/tailwind/_utilities.css
new file mode 100644
index 0000000..65dd5f6
--- /dev/null
+++ b/src/Publish/resources/css/tailwind/_utilities.css
@@ -0,0 +1 @@
+@tailwind utilities;
diff --git a/src/Publish/resources/js/Components/ActionMessage.vue b/src/Publish/resources/js/Components/ActionMessage.vue
new file mode 100644
index 0000000..5974148
--- /dev/null
+++ b/src/Publish/resources/js/Components/ActionMessage.vue
@@ -0,0 +1,15 @@
+<script setup>
+defineProps({
+    on: Boolean,
+});
+</script>
+
+<template>
+    <div>
+        <transition leave-active-class="transition ease-in duration-1000" leave-from-class="opacity-100" leave-to-class="opacity-0">
+            <div v-show="on" class="text-sm text-gray-600">
+                <slot />
+            </div>
+        </transition>
+    </div>
+</template>
diff --git a/src/Publish/resources/js/Components/ActionSection.vue b/src/Publish/resources/js/Components/ActionSection.vue
new file mode 100644
index 0000000..5b6fc48
--- /dev/null
+++ b/src/Publish/resources/js/Components/ActionSection.vue
@@ -0,0 +1,22 @@
+<script setup>
+import JetSectionTitle from './SectionTitle.vue';
+</script>
+
+<template>
+    <div class="md:grid md:grid-cols-3 md:gap-6">
+        <JetSectionTitle>
+            <template #title>
+                <slot name="title" />
+            </template>
+            <template #description>
+                <slot name="description" />
+            </template>
+        </JetSectionTitle>
+
+        <div class="mt-5 md:mt-0 md:col-span-2">
+            <div class="px-4 py-5 sm:p-6 bg-white shadow sm:rounded-lg">
+                <slot name="content" />
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/src/Publish/resources/js/Components/ApplicationLogo.vue b/src/Publish/resources/js/Components/ApplicationLogo.vue
new file mode 100644
index 0000000..762a358
--- /dev/null
+++ b/src/Publish/resources/js/Components/ApplicationLogo.vue
@@ -0,0 +1,7 @@
+<template>
+    <svg viewBox="0 0 317 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M74.09 30.04V13h-4.14v21H82.1v-3.96h-8.01zM95.379 19v1.77c-1.08-1.35-2.7-2.19-4.89-2.19-3.99 0-7.29 3.45-7.29 7.92s3.3 7.92 7.29 7.92c2.19 0 3.81-.84 4.89-2.19V34h3.87V19h-3.87zm-4.17 11.73c-2.37 0-4.14-1.71-4.14-4.23 0-2.52 1.77-4.23 4.14-4.23 2.4 0 4.17 1.71 4.17 4.23 0 2.52-1.77 4.23-4.17 4.23zM106.628 21.58V19h-3.87v15h3.87v-7.17c0-3.15 2.55-4.05 4.56-3.81V18.7c-1.89 0-3.78.84-4.56 2.88zM124.295 19v1.77c-1.08-1.35-2.7-2.19-4.89-2.19-3.99 0-7.29 3.45-7.29 7.92s3.3 7.92 7.29 7.92c2.19 0 3.81-.84 4.89-2.19V34h3.87V19h-3.87zm-4.17 11.73c-2.37 0-4.14-1.71-4.14-4.23 0-2.52 1.77-4.23 4.14-4.23 2.4 0 4.17 1.71 4.17 4.23 0 2.52-1.77 4.23-4.17 4.23zM141.544 19l-3.66 10.5-3.63-10.5h-4.26l5.7 15h4.41l5.7-15h-4.26zM150.354 28.09h11.31c.09-.51.15-1.02.15-1.59 0-4.41-3.15-7.92-7.59-7.92-4.71 0-7.92 3.45-7.92 7.92s3.18 7.92 8.22 7.92c2.88 0 5.13-1.17 6.54-3.21l-3.12-1.8c-.66.87-1.86 1.5-3.36 1.5-2.04 0-3.69-.84-4.23-2.82zm-.06-3c.45-1.92 1.86-3.03 3.93-3.03 1.62 0 3.24.87 3.72 3.03h-7.65zM164.516 34h3.87V12.1h-3.87V34zM185.248 34.36c3.69 0 6.9-2.01 6.9-6.3V13h-2.1v15.06c0 3.03-2.07 4.26-4.8 4.26-2.19 0-3.93-.78-4.62-2.61l-1.77 1.05c1.05 2.43 3.57 3.6 6.39 3.6zM203.124 18.64c-4.65 0-7.83 3.45-7.83 7.86 0 4.53 3.24 7.86 7.98 7.86 3.03 0 5.34-1.41 6.6-3.45l-1.74-1.02c-.81 1.44-2.46 2.55-4.83 2.55-3.18 0-5.55-1.89-5.97-4.95h13.17c.03-.3.06-.63.06-.93 0-4.11-2.85-7.92-7.44-7.92zm0 1.92c2.58 0 4.98 1.71 5.4 5.01h-11.19c.39-2.94 2.64-5.01 5.79-5.01zM221.224 20.92V19h-4.32v-4.2l-1.98.6V19h-3.15v1.92h3.15v9.09c0 3.6 2.25 4.59 6.3 3.99v-1.74c-2.91.12-4.32.33-4.32-2.25v-9.09h4.32zM225.176 22.93c0-1.62 1.59-2.37 3.15-2.37 1.44 0 2.97.57 3.6 2.1l1.65-.96c-.87-1.86-2.79-3.06-5.25-3.06-3 0-5.13 1.89-5.13 4.29 0 5.52 8.76 3.39 8.76 7.11 0 1.77-1.68 2.4-3.45 2.4-2.01 0-3.57-.99-4.11-2.52l-1.68.99c.75 1.92 2.79 3.45 5.79 3.45 3.21 0 5.43-1.77 5.43-4.32 0-5.52-8.76-3.39-8.76-7.11zM244.603 20.92V19h-4.32v-4.2l-1.98.6V19h-3.15v1.92h3.15v9.09c0 3.6 2.25 4.59 6.3 3.99v-1.74c-2.91.12-4.32.33-4.32-2.25v-9.09h4.32zM249.883 21.49V19h-1.98v15h1.98v-8.34c0-3.72 2.34-4.98 4.74-4.98v-1.92c-1.92 0-3.69.63-4.74 2.73zM263.358 18.64c-4.65 0-7.83 3.45-7.83 7.86 0 4.53 3.24 7.86 7.98 7.86 3.03 0 5.34-1.41 6.6-3.45l-1.74-1.02c-.81 1.44-2.46 2.55-4.83 2.55-3.18 0-5.55-1.89-5.97-4.95h13.17c.03-.3.06-.63.06-.93 0-4.11-2.85-7.92-7.44-7.92zm0 1.92c2.58 0 4.98 1.71 5.4 5.01h-11.19c.39-2.94 2.64-5.01 5.79-5.01zM286.848 19v2.94c-1.26-2.01-3.39-3.3-6.06-3.3-4.23 0-7.74 3.42-7.74 7.86s3.51 7.86 7.74 7.86c2.67 0 4.8-1.29 6.06-3.3V34h1.98V19h-1.98zm-5.91 13.44c-3.33 0-5.91-2.61-5.91-5.94 0-3.33 2.58-5.94 5.91-5.94s5.91 2.61 5.91 5.94c0 3.33-2.58 5.94-5.91 5.94zM309.01 18.64c-1.92 0-3.75.87-4.86 2.73-.84-1.74-2.46-2.73-4.56-2.73-1.8 0-3.42.72-4.59 2.55V19h-1.98v15H295v-8.31c0-3.72 2.16-5.13 4.32-5.13 2.13 0 3.51 1.41 3.51 4.08V34h1.98v-8.31c0-3.72 1.86-5.13 4.17-5.13 2.13 0 3.66 1.41 3.66 4.08V34h1.98v-9.36c0-3.75-2.31-6-5.61-6z" fill="#000" />
+        <path d="M11.395 44.428C4.557 40.198 0 32.632 0 24 0 10.745 10.745 0 24 0a23.891 23.891 0 0113.997 4.502c-.2 17.907-11.097 33.245-26.602 39.926z" fill="#6875F5" />
+        <path d="M14.134 45.885A23.914 23.914 0 0024 48c13.255 0 24-10.745 24-24 0-3.516-.756-6.856-2.115-9.866-4.659 15.143-16.608 27.092-31.75 31.751z" fill="#6875F5" />
+    </svg>
+</template>
diff --git a/src/Publish/resources/js/Components/ApplicationMark.vue b/src/Publish/resources/js/Components/ApplicationMark.vue
new file mode 100644
index 0000000..e150674
--- /dev/null
+++ b/src/Publish/resources/js/Components/ApplicationMark.vue
@@ -0,0 +1,6 @@
+<template>
+    <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M11.395 44.428C4.557 40.198 0 32.632 0 24 0 10.745 10.745 0 24 0a23.891 23.891 0 0113.997 4.502c-.2 17.907-11.097 33.245-26.602 39.926z" fill="#6875F5" />
+        <path d="M14.134 45.885A23.914 23.914 0 0024 48c13.255 0 24-10.745 24-24 0-3.516-.756-6.856-2.115-9.866-4.659 15.143-16.608 27.092-31.75 31.751z" fill="#6875F5" />
+    </svg>
+</template>
diff --git a/src/Publish/resources/js/Components/AsideMenu.vue b/src/Publish/resources/js/Components/AsideMenu.vue
new file mode 100644
index 0000000..1431d2e
--- /dev/null
+++ b/src/Publish/resources/js/Components/AsideMenu.vue
@@ -0,0 +1,37 @@
+<script setup>
+import { useLayoutStore } from "@/Stores/layout.js";
+import AsideMenuLayer from "@@/Components/AsideMenuLayer.vue";
+import OverlayLayer from "@/Components/OverlayLayer.vue";
+
+defineProps({
+  menu: {
+    type: Array,
+    required: true,
+  },
+});
+
+const emit = defineEmits(["menu-click"]);
+
+const menuClick = (event, item) => {
+  emit("menu-click", event, item);
+};
+
+const layoutStore = useLayoutStore();
+
+</script>
+
+<template>
+  <AsideMenuLayer
+    :menu="menu"
+    :class="[
+      layoutStore.isAsideMobileExpanded ? 'left-0 rtl:right-0' : '-left-60 lg:left-0 rtl:-right-60 rtl:lg:right-0',
+      { 'lg:hidden xl:flex': !layoutStore.isAsideLgActive },
+    ]"
+    @menu-click="menuClick"
+  />
+  <OverlayLayer
+    v-show="layoutStore.isAsideLgActive"
+    z-index="z-30"
+    @overlay-click="layoutStore.isAsideLgActive = false"
+  />
+</template>
diff --git a/src/Publish/resources/js/Components/AsideMenuItem.vue b/src/Publish/resources/js/Components/AsideMenuItem.vue
new file mode 100644
index 0000000..96fb5eb
--- /dev/null
+++ b/src/Publish/resources/js/Components/AsideMenuItem.vue
@@ -0,0 +1,109 @@
+<script setup>
+import { ref, computed } from "vue";
+import {Link, usePage} from '@inertiajs/inertia-vue3'
+import { useStyleStore } from "@/Stores/style.js";
+import { mdiMinus, mdiPlus } from "@mdi/js";
+import { getButtonColor } from "@/colors.js";
+import BaseIcon from "@/Components/BaseIcon.vue";
+import AsideMenuList from "@/Components/AsideMenuList.vue";
+
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true,
+  },
+  isDropdownList: Boolean,
+});
+
+// Add itemHref
+const itemHref = computed(() => props.item.route ? route(props.item.route) : props.item.href)
+
+// Add activeInactiveStyle
+const activeInactiveStyle = computed(
+    () => props.item.route && route().current(props.item.route)
+        ? styleStore.asideMenuItemActiveStyle
+        : ''
+)
+
+
+const emit = defineEmits(["menu-click"]);
+
+const styleStore = useStyleStore();
+
+const hasColor = computed(() => props.item && props.item.color);
+
+const asideMenuItemActiveStyle = computed(() =>
+  hasColor.value ? "" : styleStore.asideMenuItemActiveStyle
+);
+
+const isDropdownActive = ref(false);
+
+const componentClass = computed(() => [
+  props.isDropdownList ? "py-3 px-6 text-sm" : "py-3",
+  hasColor.value
+    ? getButtonColor(props.item.color, false, true)
+    : `${styleStore.asideMenuItemStyle} dark:text-slate-300 dark:hover:text-white`,
+]);
+
+const lang = computed(()=>{
+    return usePage().props.value.data.trans;
+})
+
+function trans(key){
+    return lang.value[key] ? lang.value[key] : key;
+}
+
+const hasDropdown = computed(() => {
+    if(props.item.menu && props.item.label !== 'main'){
+        return true;
+    }
+});
+
+const menuClick = (event) => {
+  emit("menu-click", event, props.item);
+
+  if (hasDropdown.value) {
+    isDropdownActive.value = !isDropdownActive.value;
+  }
+};
+</script>
+
+<template>
+  <li>
+    <component
+      :is="item.route ? Link : 'a'"
+      :href="item.route ? route(item.route) : item.url"
+      :target="item.target ?? null"
+      class="flex cursor-pointer"
+      :class="componentClass"
+      @click="menuClick"
+    >
+      <i
+        v-if="item.icon"
+        class="flex-none px-4 text-xl"
+        :class="item.icon"
+      ></i>
+      <span
+        class="grow text-ellipsis line-clamp-1"
+        :class="activeInactiveStyle"
+        >{{ trans(item.label) }}</span
+      >
+      <BaseIcon
+        v-if="hasDropdown"
+        :path="isDropdownActive ? mdiMinus : mdiPlus"
+        class="flex-none"
+        :class="activeInactiveStyle"
+        w="w-12"
+      />
+    </component>
+    <AsideMenuList
+      v-if="hasDropdown"
+      :menu="item.menu"
+      :class="[
+        styleStore.asideMenuDropdownStyle,
+        isDropdownActive ? 'block dark:bg-slate-800/50' : 'hidden',
+      ]"
+      is-dropdown-list
+    />
+  </li>
+</template>
diff --git a/src/Publish/resources/js/Components/AsideMenuLayer.vue b/src/Publish/resources/js/Components/AsideMenuLayer.vue
new file mode 100644
index 0000000..1755559
--- /dev/null
+++ b/src/Publish/resources/js/Components/AsideMenuLayer.vue
@@ -0,0 +1,76 @@
+<script setup>
+import { mdiLogout, mdiClose } from "@mdi/js";
+import { computed } from "vue";
+import { useLayoutStore } from "@/Stores/layout.js";
+import { useStyleStore } from "@/Stores/style.js";
+import AsideMenuList from "@/Components/AsideMenuList.vue";
+import AsideMenuItem from "@/Components/AsideMenuItem.vue";
+import BaseIcon from "@/Components/BaseIcon.vue";
+
+defineProps({
+  menu: {
+    type: Array,
+    required: true,
+  },
+});
+
+const emit = defineEmits(["menu-click"]);
+
+const layoutStore = useLayoutStore();
+
+const styleStore = useStyleStore();
+
+const logoutItem = computed(() => ({
+  label: "Logout",
+  icon: "bx bx-log-out",
+  color: "info",
+  isLogout: true,
+}));
+
+const menuClick = (event, item) => {
+  emit("menu-click", event, item);
+};
+</script>
+
+<template>
+  <aside
+    id="aside"
+    class="lg:py-2 lg:pl-2 w-60 fixed flex z-40 top-0 h-screen transition-position overflow-hidden"
+  >
+    <div
+      :class="styleStore.asideStyle"
+      class="lg:rounded-2xl flex-1 flex flex-col overflow-hidden dark:bg-slate-900"
+    >
+      <div
+        :class="styleStore.asideBrandStyle"
+        class="flex flex-row h-14 items-center justify-between dark:bg-slate-900"
+      >
+        <div
+          class="text-center flex-1 lg:text-left lg:pl-6 xl:text-center xl:pl-0"
+        >
+          <b class="font-black">One</b>
+        </div>
+        <button
+          class="hidden lg:inline-block xl:hidden p-3"
+          @click.prevent="layoutStore.isAsideLgActive = false"
+        >
+          <BaseIcon :path="mdiClose" />
+        </button>
+      </div>
+      <div
+        :class="
+          styleStore.darkMode
+            ? 'aside-scrollbars-[slate]'
+            : styleStore.asideScrollbarsStyle
+        "
+        class="flex-1 overflow-y-auto overflow-x-hidden"
+      >
+        <AsideMenuList :menu="menu" @menu-click="menuClick" />
+      </div>
+
+      <ul>
+        <AsideMenuItem :item="logoutItem" @menu-click="menuClick" />
+      </ul>
+    </div>
+  </aside>
+</template>
diff --git a/src/Publish/resources/js/Components/AsideMenuList.vue b/src/Publish/resources/js/Components/AsideMenuList.vue
new file mode 100644
index 0000000..8516749
--- /dev/null
+++ b/src/Publish/resources/js/Components/AsideMenuList.vue
@@ -0,0 +1,103 @@
+<script setup>
+import AsideMenuItem from "@/Components/AsideMenuItem.vue";
+import {computed} from "vue";
+
+const emit = defineEmits(["menu-click"]);
+
+const menuClick = (event, item) => {
+  emit("menu-click", event, item);
+};
+
+</script>
+
+<template>
+  <ul>
+      <VueDraggableNext class="dragArea list-group w-full" v-model="orderingMenu" @change="log">
+          <AsideMenuItem
+              v-for="(item, index) in orderingMenu"
+              :key="index"
+              :item="item"
+              :is-dropdown-list="isDropdownList"
+              @menu-click="menuClick"
+          />
+      </VueDraggableNext>
+
+  </ul>
+</template>
+
+<script>
+import {VueDraggableNext} from 'vue-draggable-next'
+
+export default {
+    components: {
+        VueDraggableNext
+    },
+    props: {
+        isDropdownList: Boolean,
+        menu: {
+            type: Array,
+            required: true,
+        },
+    },
+    data(){
+        return {
+            orderingMenu: []
+        }
+    },
+    computed: {
+        finalMenu(){
+            {
+                let realMenu = [];
+                let orderingMenu = [];
+                let menu = this.menu;
+                for(let i=0; i<Object.keys(menu).length; i++){
+                    if(Object.keys(menu)[i] === 'main'){
+                        if(menu[Object.keys(menu)[i]].menu.length){
+                            for(let r=0; r<menu[Object.keys(menu)[i]].menu.length; r++){
+                                if(!localStorage.getItem('orderingMenu')) {
+                                    orderingMenu.push(menu[Object.keys(menu)[i]].menu[r].label);
+                                    menu[Object.keys(menu)[i]].menu[r].ordering = i;
+                                }
+                                else {
+                                    menu[Object.keys(menu)[i]].menu[r].ordering = JSON.parse(localStorage.getItem('orderingMenu')).indexOf(menu[Object.keys(menu)[i]].menu[r].label);
+                                }
+                                realMenu.push(menu[Object.keys(menu)[i]].menu[r]);
+                            }
+                        }
+                    }
+                    else {
+                        if(!localStorage.getItem('orderingMenu')) {
+                            orderingMenu.push(menu[Object.keys(menu)[i]].label);
+                            menu[Object.keys(menu)[i]].ordering = i;
+                        }
+                        else {
+                            menu[Object.keys(menu)[i]].ordering = JSON.parse(localStorage.getItem('orderingMenu')).indexOf(menu[Object.keys(menu)[i]].label);
+                        }
+
+                        realMenu.push(menu[Object.keys(menu)[i]]);
+                    }
+                }
+
+                if(!localStorage.getItem('orderingMenu')){
+                    localStorage.setItem('orderingMenu', JSON.stringify(orderingMenu));
+                }
+                return realMenu.sort((a, b) => a.ordering - b.ordering);
+            }
+        }
+    },
+    methods: {
+        log(log){
+            let ordering = JSON.parse(localStorage.getItem('orderingMenu'));
+            let oldValue = ordering[log.moved.oldIndex];
+            let newValue = ordering[log.moved.newIndex];
+            ordering[log.moved.newIndex] = oldValue;
+            ordering[log.moved.oldIndex] = newValue;
+
+            localStorage.setItem('orderingMenu', JSON.stringify(ordering));
+        }
+    },
+    mounted() {
+        this.orderingMenu = this.finalMenu;
+    }
+}
+</script>
diff --git a/src/Publish/resources/js/Components/AuthenticationCard.vue b/src/Publish/resources/js/Components/AuthenticationCard.vue
new file mode 100644
index 0000000..59f3713
--- /dev/null
+++ b/src/Publish/resources/js/Components/AuthenticationCard.vue
@@ -0,0 +1,11 @@
+<template>
+    <div class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100">
+        <div>
+            <slot name="logo" />
+        </div>
+
+        <div class="w-full sm:max-w-md mt-6 px-6 py-4 bg-white shadow-md overflow-hidden sm:rounded-lg">
+            <slot />
+        </div>
+    </div>
+</template>
diff --git a/src/Publish/resources/js/Components/AuthenticationCardLogo.vue b/src/Publish/resources/js/Components/AuthenticationCardLogo.vue
new file mode 100644
index 0000000..9604420
--- /dev/null
+++ b/src/Publish/resources/js/Components/AuthenticationCardLogo.vue
@@ -0,0 +1,17 @@
+<script setup>
+import { Link } from '@inertiajs/inertia-vue3';
+</script>
+
+<template>
+    <Link :href="'/'">
+        <svg
+            class="w-16 h-16"
+            viewBox="0 0 48 48"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path d="M11.395 44.428C4.557 40.198 0 32.632 0 24 0 10.745 10.745 0 24 0a23.891 23.891 0 0113.997 4.502c-.2 17.907-11.097 33.245-26.602 39.926z" fill="#6875F5" />
+            <path d="M14.134 45.885A23.914 23.914 0 0024 48c13.255 0 24-10.745 24-24 0-3.516-.756-6.856-2.115-9.866-4.659 15.143-16.608 27.092-31.75 31.751z" fill="#6875F5" />
+        </svg>
+    </Link>
+</template>
diff --git a/src/Publish/resources/js/Components/Banner.vue b/src/Publish/resources/js/Components/Banner.vue
new file mode 100644
index 0000000..6af1cf1
--- /dev/null
+++ b/src/Publish/resources/js/Components/Banner.vue
@@ -0,0 +1,87 @@
+<script setup>
+import { computed, ref, watch } from 'vue';
+import { usePage } from '@inertiajs/inertia-vue3';
+
+const show = ref(true);
+const style = computed(() => usePage().props.value.jetstream.flash?.bannerStyle || 'success');
+const message = computed(() => usePage().props.value.jetstream.flash?.banner || '');
+
+watch(message, async () => {
+  show.value = true;
+});
+</script>
+
+<template>
+    <div>
+        <div v-if="show && message" :class="{ 'bg-indigo-500': style == 'success', 'bg-red-700': style == 'danger' }">
+            <div class="max-w-screen-xl mx-auto py-2 px-3 sm:px-6 lg:px-8">
+                <div class="flex items-center justify-between flex-wrap">
+                    <div class="w-0 flex-1 flex items-center min-w-0">
+                        <span class="flex p-2 rounded-lg" :class="{ 'bg-indigo-600': style == 'success', 'bg-red-600': style == 'danger' }">
+                            <svg
+                                v-if="style == 'success'"
+                                class="h-5 w-5 text-white"
+                                xmlns="http://www.w3.org/2000/svg"
+                                fill="none"
+                                viewBox="0 0 24 24"
+                                stroke="currentColor"
+                            >
+                                <path
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                    stroke-width="2"
+                                    d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+                                />
+                            </svg>
+
+                            <svg
+                                v-if="style == 'danger'"
+                                class="h-5 w-5 text-white"
+                                xmlns="http://www.w3.org/2000/svg"
+                                fill="none"
+                                viewBox="0 0 24 24"
+                                stroke="currentColor"
+                            >
+                                <path
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                    stroke-width="2"
+                                    d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+                                />
+                            </svg>
+                        </span>
+
+                        <p class="ml-3 font-medium text-sm text-white truncate">
+                            {{ message }}
+                        </p>
+                    </div>
+
+                    <div class="shrink-0 sm:ml-3">
+                        <button
+                            type="button"
+                            class="-mr-1 flex p-2 rounded-md focus:outline-none sm:-mr-2 transition"
+                            :class="{ 'hover:bg-indigo-600 focus:bg-indigo-600': style == 'success', 'hover:bg-red-600 focus:bg-red-600': style == 'danger' }"
+                            aria-label="Dismiss"
+                            @click.prevent="show = false"
+                        >
+                            <svg
+                                class="h-5 w-5 text-white"
+                                xmlns="http://www.w3.org/2000/svg"
+                                fill="none"
+                                viewBox="0 0 24 24"
+                                stroke="currentColor"
+                            >
+                                <path
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                    stroke-width="2"
+                                    d="M6 18L18 6M6 6l12 12"
+                                />
+                            </svg>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/src/Publish/resources/js/Components/Base/Bulk.vue b/src/Publish/resources/js/Components/Base/Bulk.vue
new file mode 100644
index 0000000..2b743f6
--- /dev/null
+++ b/src/Publish/resources/js/Components/Base/Bulk.vue
@@ -0,0 +1,44 @@
+<template>
+    <div>
+        <div
+            class="relative filament-tables-bulk-actions md:mr-2"
+            v-if="Object.keys(this.bulk).length"
+        >
+            <div
+                class="flex justify-start gap-2"
+            >
+                <slot></slot>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+import { Link } from "@inertiajs/inertia-vue3";
+export default defineComponent({
+    components: {
+        Link,
+    },
+    props: {
+        bulk: Object,
+        show: Boolean,
+        collection: Object
+    },
+    watch: {
+        show(newValue, oldValue){
+            this.showBluk = newValue;
+        }
+    },
+    data() {
+        return {
+            showBluk: false,
+        };
+    },
+    methods: {
+        close() {
+            this.$emit("close", this.showBluk);
+        },
+    },
+});
+</script>
diff --git a/src/Publish/resources/js/Components/Base/Components/Area.vue b/src/Publish/resources/js/Components/Base/Components/Area.vue
new file mode 100644
index 0000000..83a46a8
--- /dev/null
+++ b/src/Publish/resources/js/Components/Base/Components/Area.vue
@@ -0,0 +1,45 @@
+<template>
+    <div>
+        <label for="phone" class="h-40 text-sm font-normal">{{ label }}</label>
+
+        <div class="relative mt-1">
+            <textarea
+                rows="5"
+                :type="type"
+                :name="id"
+                :id="id"
+                :value="modelValue"
+                :placeholder="placeholder"
+                @input="$emit('update:modelValue', $event.target.value)"
+                class="w-full h-122 p-4 pr-12 text-sm border-gray-200 rounded-lg shadow-sm dark:border-gray-700 dark:text-gray-400 dark:bg-gray-800"
+            ></textarea>
+        </div>
+        <JetInputError :message="message" class="mt-2" />
+
+    </div>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+import JetInputError from "@/Jetstream/InputError.vue";
+import JetLabel from "@/Jetstream/Label.vue";
+
+export default defineComponent({
+    components: {
+        JetInputError,
+        JetLabel,
+    },
+    props: [
+        "label",
+        "type",
+        "value",
+        "class",
+        "id",
+        "icon",
+        "message",
+        "placeholder",
+        "modelValue",
+    ],
+    emits: ["update:modelValue"],
+});
+</script>
diff --git a/src/Publish/resources/js/Components/Base/Components/MSelect.vue b/src/Publish/resources/js/Components/Base/Components/MSelect.vue
new file mode 100644
index 0000000..65cde16
--- /dev/null
+++ b/src/Publish/resources/js/Components/Base/Components/MSelect.vue
@@ -0,0 +1,41 @@
+<template>
+    <div>
+        <JetLabel :for="id" :value="label" />
+        <multiselect
+            :options="options"
+            :multiple="multi"
+            :track-by="track_by_id"
+            :label="track_by_name"
+            :value="modelValue"
+            :placeholder="placeholder"
+            @input="$emit('update:modelValue', $event.target.value)"
+        ></multiselect>
+        <JetInputError :message="message" class="mt-2" />
+    </div>
+</template>
+<script>
+import { defineComponent } from "vue";
+import Multiselect from "@suadelabs/vue3-multiselect";
+import JetInputError from "@/Jetstream/InputError.vue";
+import JetLabel from "@/Jetstream/Label.vue";
+
+export default defineComponent({
+    components: {
+        Multiselect,
+        JetInputError,
+        JetLabel,
+    },
+    props: [
+        "id",
+        "modelValue",
+        "label",
+        "message",
+        "placeholder",
+        "track_by_id",
+        "track_by_name",
+        "multi",
+        "options"
+    ],
+    emits: ["update:modelValue"],
+});
+</script>
diff --git a/src/Publish/resources/js/Components/Base/Components/Media.vue b/src/Publish/resources/js/Components/Base/Components/Media.vue
new file mode 100644
index 0000000..09474da
--- /dev/null
+++ b/src/Publish/resources/js/Components/Base/Components/Media.vue
@@ -0,0 +1,113 @@
+<template>
+    <div class="py-2">
+        <div class="col-span-6 sm:col-span-4">
+            <!-- Profile Photo File Input -->
+            <input
+                v-if="id"
+                type="file"
+                class="hidden"
+                :ref="id"
+                @change="updatePhotoPreview()"
+                :multiple="multi"
+            />
+            <label v-if="id" :for="id" class="h-40 text-sm font-normal">{{
+                label
+            }}</label>
+
+            <!-- Current Profile Photo -->
+            <div v-if="photoPreview.length && preview">
+                <div
+                    class="flex justify-center mt-2 space-x-2"
+                    v-if="multi && photoPreview.length"
+                >
+                    <div v-for="(item, key) in photoPreview" :key="key">
+                        <img
+                            :src="item"
+                            class="object-cover w-20 h-20 mx-auto rounded-full"
+                        />
+                    </div>
+                </div>
+                <div class="mt-2" v-else>
+                    <img
+                        :src="photoPreview[0]"
+                        class="object-cover w-20 h-20 mx-auto rounded-full"
+                    />
+                </div>
+            </div>
+
+            <div class="mt-2" v-else-if="preview">
+                <div v-if="modelValue && multi">
+                    <div v-for="(item, key) in modelValue" :key="key">
+                        <img
+                            :src="item"
+                            class="object-cover w-20 h-20 mx-auto rounded-full"
+                        />
+                    </div>
+                </div>
+                <div v-else-if="modelValue">
+                    <img
+                        :src="modelValue"
+                        class="object-cover w-20 h-20 mx-auto rounded-full"
+                    />
+                </div>
+            </div>
+
+            <button
+                class="w-full px-4 py-2 mt-2 mr-2 text-xs font-semibold tracking-widest text-center text-gray-700 uppercase transition bg-white border border-gray-300 rounded-md shadow-sm hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:ring focus:ring-blue-200 active:text-gray-800 active:bg-gray-50 disabled:opacity-25"
+                type="button"
+                @click.prevent="selectNewPhoto()"
+            >
+                Select A New Photo
+            </button>
+        </div>
+        <JetInputError :message="message" class="mt-2" />
+    </div>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+import JetInputError from "@/Jetstream/InputError.vue";
+
+export default defineComponent({
+    components: {
+        JetInputError,
+    },
+    props: ["label", "id", "modelValue", "multi", "message", "preview"],
+    data() {
+        return {
+            photoPreview: [],
+            images: [],
+        };
+    },
+    mounted(){
+        if(this.modelValue){
+            this.photoPreview.push(this.modelValue);
+        }
+    },
+    methods: {
+        updatePhotoPreview() {
+            const photo = this.$refs[this.id].files[0];
+
+            if (!photo) return;
+
+            const reader = new FileReader();
+
+            reader.onload = (e) => {
+                if (this.multi) {
+                    this.photoPreview.push(e.target.result);
+                    this.images.push(photo);
+                    this.$emit("update:modelValue", this.images);
+                } else {
+                    this.photoPreview[0] = e.target.result;
+                    this.$emit("update:modelValue", photo);
+                }
+            };
+
+            reader.readAsDataURL(photo);
+        },
+        selectNewPhoto() {
+            this.$refs[this.id].click();
+        },
+    },
+});
+</script>
diff --git a/src/Publish/resources/js/Components/Base/Components/Schema.vue b/src/Publish/resources/js/Components/Base/Components/Schema.vue
new file mode 100644
index 0000000..1c4df0d
--- /dev/null
+++ b/src/Publish/resources/js/Components/Base/Components/Schema.vue
@@ -0,0 +1,33 @@
+<template>
+    <JetLabel :for="id" :value="label" />
+    <div v-for="(input, index) in options" :key="index" class="mt-2">
+        <JetLabel :for="input.field" :value="input.label" />
+        <JetInput
+            :id="input.field"
+            :value="modelValue[id][input.field]"
+            @input="$emit('update:modelValue', $event.target.value)"
+            :type="input.type"
+            :class="class"
+            class="block w-full mt-1"
+            autofocus
+        />
+    </div>
+    <JetInputError :message="message" class="mt-2" />
+</template>
+
+<script>
+import { defineComponent } from "vue";
+import JetInputError from "@/Jetstream/InputError.vue";
+import JetLabel from "@/Jetstream/Label.vue";
+import JetInput from "@/Jetstream/Input.vue";
+
+export default defineComponent({
+    components: {
+        JetLabel,
+        JetInput,
+        JetInputError,
+    },
+    props: ["id", "modelValue", "label", "message", "options", "class"],
+    emits: ["update:modelValue"],
+});
+</script>
diff --git a/src/Publish/resources/js/Components/Base/Components/Switch.vue b/src/Publish/resources/js/Components/Base/Components/Switch.vue
new file mode 100644
index 0000000..d2244ac
--- /dev/null
+++ b/src/Publish/resources/js/Components/Base/Components/Switch.vue
@@ -0,0 +1,29 @@
+<template>
+    <div>
+        <JetLabel :for="id" :value="label" />
+        <Toggle
+            :name="id"
+            :id="id"
+            :value="modelValue"
+            :class="class"
+            @input="$emit('update:modelValue', $event.target.value)"
+        />
+        <JetInputError :message="message" class="mt-2" />
+    </div>
+</template>
+<script>
+import { defineComponent } from "vue";
+import Toggle from "@vueform/toggle";
+import JetInputError from "@/Jetstream/InputError.vue";
+import JetLabel from "@/Jetstream/Label.vue";
+
+export default defineComponent({
+    components: {
+        Toggle,
+        JetInputError,
+        JetLabel,
+    },
+    props: ["id", "modelValue", "label", "message", "class"],
+    emits: ["update:modelValue"],
+});
+</script>
diff --git a/src/Publish/resources/js/Components/Base/Components/Text.vue b/src/Publish/resources/js/Components/Base/Components/Text.vue
new file mode 100644
index 0000000..fadc447
--- /dev/null
+++ b/src/Publish/resources/js/Components/Base/Components/Text.vue
@@ -0,0 +1,46 @@
+<template>
+    <div>
+        <label :for="id" class="h-40 text-sm font-normal">{{ label }}</label>
+
+        <div class="relative mt-1">
+            <input
+                :type="type"
+                :name="id"
+                :id="id"
+                :value="modelValue"
+                :placeholder="placeholder"
+                :readonly="readonly"
+                @input="$emit('update:modelValue', $event.target.value)"
+                class="w-full h-40 p-4 pr-12 text-sm border-gray-200 rounded-lg shadow-sm focus:border-main focus:ring-0 dark:border-gray-700 dark:text-gray-400 dark:bg-gray-800"
+            />
+        </div>
+        <JetInputError :message="message" class="mt-2" />
+
+    </div>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+import JetInputError from "@/Jetstream/InputError.vue";
+import JetLabel from "@/Jetstream/Label.vue";
+
+export default defineComponent({
+    components: {
+        JetInputError,
+        JetLabel,
+    },
+    props: [
+        "label",
+        "type",
+        "value",
+        "class",
+        "id",
+        "icon",
+        "placeholder",
+        "message",
+        "modelValue",
+        "readonly"
+    ],
+    emits: ["update:modelValue"],
+});
+</script>
diff --git a/src/Publish/resources/js/Components/Base/Filters.vue b/src/Publish/resources/js/Components/Base/Filters.vue
new file mode 100644
index 0000000..b994bc3
--- /dev/null
+++ b/src/Publish/resources/js/Components/Base/Filters.vue
@@ -0,0 +1,287 @@
+<script setup>
+import { ref, watch, useAttrs, defineEmits, onMounted, onUpdated } from 'vue';
+import { useTrans } from '@@/Composables/useTrans';
+import { useResourceStore } from '@@/Stores/resourceStore';
+import { useReload } from '@@/Composables/useReload';
+import debounce from 'lodash/debounce';
+import { useCookies } from 'vue3-cookies';
+import { storeToRefs } from 'pinia';
+
+const props = defineProps({
+    setSearch: String,
+    showFilter: Boolean,
+    rows: Array,
+    url: String,
+});
+
+const emit = defineEmits([
+    'reload',
+    'filter',
+    'reset',
+    'getSearch',
+    'changeShowedCols',
+]);
+
+const { cookies } = useCookies();
+
+const store = useResourceStore();
+let { cols } = storeToRefs(useResourceStore());
+
+const { reload } = useReload();
+
+const { trans } = useTrans();
+
+let search = ref('');
+let filters = ref({});
+let last_page = ref(1);
+let openModal = ref(false);
+let showRows = ref(false);
+
+const attrs = useAttrs();
+let { lang } = attrs;
+let cookieName = `${props.url}-cols`;
+function searchFilter() {
+    let search = this.search;
+    store.currentPage = 1; // reset the current page
+    emit('getSearch', search);
+}
+function resetFilter() {
+    emit('reset');
+}
+function filter(filterBy, filterValue) {
+    emit('filter', { filterBy: filterValue });
+}
+
+function hideCol(col) {
+    store.toggleCol(col);
+    cookies.set(cookieName, cols.value);
+}
+
+watch(
+    search,
+    debounce((value) => {
+        store.search = search;
+        reload();
+    }, 300)
+);
+</script>
+
+<template>
+    <div class="flex items-center justify-end w-full gap-2 md:max-w-md">
+        <div class="flex-1">
+            <div class="filament-tables-search-input">
+                <label for="tableSearchQueryInput" class="sr-only">
+                    {{ trans('global.search') }}
+                </label>
+
+                <div class="relative group">
+                    <span
+                        class="absolute inset-y-0 left-0 flex items-center justify-center text-gray-400 pointer-events-none w-9 h-9 group-focus-within:text-primary-500"
+                    >
+                        <svg
+                            class="w-5 h-5"
+                            xmlns="http://www.w3.org/2000/svg"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            stroke-width="2"
+                            stroke="currentColor"
+                            aria-hidden="true"
+                        >
+                            <path
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+                            ></path>
+                        </svg>
+                    </span>
+
+                    <input
+                        @input="searchFilter()"
+                        v-model="search"
+                        id="tableSearchQueryInput"
+                        placeholder="Search"
+                        type="search"
+                        autocomplete="off"
+                        class="block w-full placeholder-gray-400 transition duration-75 border-gray-300 rounded-lg shadow-sm dark:border-gray-700 dark:text-gray-400 dark:bg-gray-800 h-9 pl-9 focus:border-primary-600 focus:ring-1 focus:ring-inset focus:ring-primary-600"
+                    />
+                </div>
+            </div>
+        </div>
+        <div
+            class="relative inline-block filament-tables-filters shrink-0"
+            v-if="showFilter"
+        >
+            <button
+                @click.prevent="openModal = !openModal"
+                type="button"
+                class="flex items-center justify-center w-10 h-10 rounded-full hover:bg-gray-500/5 focus:outline-none filament-tables-icon-button text-primary-500 focus:bg-primary-500/10 hover:bg-gray-300/5 filament-tables-filters-trigger"
+            >
+                <span class="sr-only"> {{ trans('global.filter') }} </span>
+
+                <i class="bx bx-sm bx-filter-alt"></i>
+            </button>
+
+            <div
+                class="absolute right-0 z-10 w-screen max-w-sm pl-12 mt-2 transition dark:text-white top-full rtl:right-auto rtl:left-0 rtl:pl-0 rtl:pr-12"
+                v-show="openModal"
+            >
+                <div
+                    class="px-6 py-4 space-y-6 bg-white border shadow-xl rounded-xl dark:bg-gray-700 border-1"
+                >
+                    <button
+                        @click.prevent="openModal = !openModal"
+                        type="button"
+                        class="absolute flex items-center justify-center w-10 h-10 text-gray-500 rounded-full hover:bg-gray-500/5 focus:outline-none filament-tables-icon-button focus:bg-gray-500/10 hover:bg-gray-300/5 top-3 right-3 rtl:right-auto rtl:left-3 shrink-0"
+                    >
+                        <span class="sr-only"> Close </span>
+
+                        <svg
+                            class="w-5 h-5 filament-tables-icon-button-icon"
+                            xmlns="http://www.w3.org/2000/svg"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            stroke-width="2"
+                            stroke="#24262d"
+                            aria-hidden="true"
+                        >
+                            <path
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                d="M6 18L18 6M6 6l12 12"
+                            ></path>
+                        </svg>
+                    </button>
+
+                    <div
+                        class="grid grid-cols-1 gap-6 filament-forms-component-container lg:grid-cols-1"
+                    >
+                        <div class="col-span-1">
+                            <div
+                                class="grid grid-cols-1 gap-6 filament-forms-component-container"
+                            >
+                                <div class="col-span-1">
+                                    <div class="filament-forms-field-wrapper">
+                                        <div class="space-y-2">
+                                            <div
+                                                class="flex items-center justify-between space-x-2 rtl:space-x-reverse"
+                                            >
+                                                <div class="w-full">
+                                                    <slot></slot>
+                                                    <div
+                                                        class="flex items-center justify-end my-2"
+                                                    >
+                                                        <button
+                                                            type="button"
+                                                            class="text-sm font-normal hover:underline focus:outline-none focus:underline filament-tables-link text-danger-600 hover:text-danger-500 dark:text-danger-500 dark:hover:text-danger-400"
+                                                            @click.prevent="
+                                                                resetFilter()
+                                                            "
+                                                        >
+                                                            {{
+                                                                trans(
+                                                                    'global.filters.reset'
+                                                                )
+                                                            }}
+                                                        </button>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div>
+            <div
+                class="relative w-[34px] h-[28px] has_tooltip transition-all ml-2 rtl:ml-0 rtl:mr-2 cursor-pointer hover:opacity-80 rounded flex justify-center items-center bg-main text-white dark:text-white z-[9]"
+            >
+                <i class="bx bx-sm bx-filter" @click="showRows = !showRows"></i>
+                <!--                <div class="table_tooltip">-->
+                <!--                    {{ trans("global.filter") }}-->
+                <!--                </div>-->
+            </div>
+        </div>
+
+        <div
+            v-show="showRows"
+            @click="showRows = !showRows"
+            class="fixed z-40 top-0 left-0 w-full inline-block h-screen"
+        ></div>
+        <div
+            v-show="showRows"
+            class="absolute right-[45px] rtl:left-[45px] rtl:right-[auto] z-50 top-[270px] w-screen max-w-[15rem] mt-2 transition dark:text-white top-full rtl:right-auto rtl:left-0"
+        >
+            <div
+                class="px-2 py-2 space-y-6 bg-white border shadow-xl rounded-xl dark:bg-gray-700 border-1"
+            >
+                <div
+                    class="grid grid-cols-1 gap-6 filament-forms-component-container lg:grid-cols-1"
+                >
+                    <div class="col-span-1">
+                        <div
+                            class="grid grid-cols-1 gap-6 filament-forms-component-container"
+                        >
+                            <div class="col-span-1">
+                                <div class="filament-forms-field-wrapper">
+                                    <div class="space-y-2">
+                                        <div
+                                            class="flex items-center justify-between space-x-2 rtl:space-x-reverse"
+                                        >
+                                            <div
+                                                class="w-full border rounded-md border-[#cbc5c5]"
+                                            >
+                                                <div
+                                                    class="rounded-lg"
+                                                    v-for="(row, key) in rows"
+                                                    :key="key"
+                                                    :class="{
+                                                        selected_column:
+                                                            cols[row.name],
+                                                    }"
+                                                >
+                                                    <div
+                                                        class="py-2 px-2 cursor-pointer"
+                                                        v-if="row.list"
+                                                    >
+                                                        <label
+                                                            :for="row.name"
+                                                            class="cursor-pointer ml-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+                                                        >
+                                                            <input
+                                                                @change="
+                                                                    hideCol(
+                                                                        row.name
+                                                                    )
+                                                                "
+                                                                :checked="
+                                                                    cols[
+                                                                        row.name
+                                                                    ]
+                                                                "
+                                                                :id="row.name"
+                                                                type="checkbox"
+                                                                class="cursor-pointer w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 mr-1 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
+                                                            />
+                                                            {{
+                                                                row.label ??
+                                                                row.name
+                                                            }}</label
+                                                        >
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/src/Publish/resources/js/Components/Base/Header.vue b/src/Publish/resources/js/Components/Base/Header.vue
new file mode 100644
index 0000000..63e5fbb
--- /dev/null
+++ b/src/Publish/resources/js/Components/Base/Header.vue
@@ -0,0 +1,75 @@
+<template>
+    <div
+        class="flex flex-col justify-start md:flex-row md:justify-between w-full mb-6"
+    >
+        <div>
+            <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
+                {{ title }}
+            </h2>
+            <ol class="flex mt-2 text-gray-500 dark:text-white">
+                <li class="mr-2">
+                    <Link
+                        class="flex items-center hover:text-main dark:hover:text-dark_green_color"
+                        :href="route('dashboard')"
+                    >
+                        <i class="mr-1 bx bx-home rtl:mr-0 rtl:ml-1"></i>
+                        <span>{{ trans("global.home") }}</span>
+                    </Link>
+                </li>
+                <li class="mr-2">
+                    <span>/</span>
+                </li>
+                <li class="mr-2">
+                    <a href="#" class="text-main dark:text-dark_green_color">{{
+                            title
+                        }}</a>
+                </li>
+            </ol>
+        </div>
+        <div class="flex items-start justify-end md:justify-start md:items-end">
+            <slot></slot>
+            <a
+                v-if="$attrs.canCreate"
+                @click.prevent="buttonAction()"
+                class="relative inline-flex items-center px-8 py-3 overflow-hidden text-white bg-main rounded group active:bg-blue-500 focus:outline-none focus:ring"
+               href="#">
+                  <span class="absolute left-0 transition-transform -translate-x-full group-hover:translate-x-4">
+                      <i class="bx bx-sm mt-2 bx-plus"></i>
+                  </span>
+
+                  <span class="text-sm font-medium transition-all group-hover:ml-4">
+                    {{ button }}
+                  </span>
+            </a>
+
+        </div>
+    </div>
+</template>
+
+<script>
+import {defineComponent} from "vue";
+import {Link} from "@inertiajs/inertia-vue3";
+
+export default defineComponent({
+    components: {
+        Link,
+    },
+    props: {
+        title: String,
+        button: String,
+    },
+    computed: {
+        lang() {
+            return this.$page.props.data.trans;
+        },
+    },
+    methods: {
+        trans(key) {
+            return this.lang[key] ? this.lang[key] : key;
+        },
+        buttonAction() {
+            this.$emit("buttonAction");
+        },
+    },
+});
+</script>
diff --git a/src/Publish/resources/js/Components/Base/Mixin.vue b/src/Publish/resources/js/Components/Base/Mixin.vue
new file mode 100644
index 0000000..8e84ce3
--- /dev/null
+++ b/src/Publish/resources/js/Components/Base/Mixin.vue
@@ -0,0 +1,262 @@
+<template></template>
+<script>
+import { defineComponent } from "vue";
+import AppLayout from "@/Layouts/AppLayout.vue";
+import { Link } from "@inertiajs/inertia-vue3";
+import Filters from "@@/Components/Base/Filters.vue";
+import Header from "@@/Components/Header.vue";
+import Bulk from "@/Components/Base/Bulk.vue";
+import List from "@@/Components/Base/Table.vue";
+import Pagination from "@@/Components/Base/Pagination.vue";
+import CreateModal from "@/Components/Base/Modals/Create.vue";
+import ViewModal from "@/Components/Base/Modals/View.vue";
+import DeleteModal from "@/Components/Base/Modals/Delete.vue";
+import BulkModal from "@/Components/Base/Modals/Bulk.vue";
+
+export default defineComponent({
+    components: {
+        AppLayout,
+        Link,
+        Filters,
+        Header,
+        Bulk,
+        List,
+        Pagination,
+        CreateModal,
+        ViewModal,
+        DeleteModal,
+        BulkModal,
+    },
+    props: {
+        rows: Array,
+        collection: Object,
+        url: String,
+    },
+    data() {
+        return {
+            createModal: false,
+            viewModal: false,
+            deleteModal: false,
+            bulkModal: false,
+            goNext: true,
+            goBack: true,
+            search: "",
+            per_page: 10,
+            orderBy: "id",
+            desc: true,
+            last_page: 0,
+            edit: false,
+            showFilter: false,
+            filters: {},
+            bulk: {},
+            showBluk: false,
+            bulkActionTitle: "",
+            view: {},
+            photoPreview: null,
+            showLoader: false,
+        };
+    },
+    mounted() {
+        this.search = this.$attrs.search;
+        this.per_page = this.$attrs.per_page;
+        this.orderBy = this.$attrs.orderBy;
+        if (this.$attrs.desc === "desc") {
+            this.desc = false;
+        } else {
+            this.desc = true;
+        }
+        if(this.collection){
+            this.last_page = this.collection.last_page;
+        }
+
+        let getTableFilter = {};
+        let getFilters = {};
+        if(this.$attrs.table){
+            getTableFilter = this.$attrs.table.filters;
+            getFilters = this.$attrs.filters;
+        }
+
+        if(getTableFilter && getFilters){
+            if (Object.keys(getFilters).length) {
+                this.filtersObj = {};
+                for (let i = 0; i < getTableFilter.length; i++) {
+                    this.filtersObj[getTableFilter[i].name] = this.$inertia.form(
+                        {}
+                    );
+                    this.filtersObj[getTableFilter[i].name][getTableFilter[i].name] = getFilters[getTableFilter[i].name];
+                }
+                this.showFilter = true;
+            }
+        }
+
+
+
+        this.createModal = this.$attrs.create;
+    },
+    computed: {
+        lang() {
+            return this.$page.props.data.trans;
+        },
+        getMessage() {
+            return this.$page.props.data.message;
+        },
+    },
+    methods: {
+        transItem(item, key) {
+            if (
+                item[key] &&
+                item[key].hasOwnProperty("ar") &&
+                item[key].hasOwnProperty("en")
+            ) {
+                if (localStorage.getItem("lang")) {
+                    let lang = JSON.parse(localStorage.getItem("lang"));
+                    if (lang.id === "ar") {
+                        return item[key].en;
+                    } else if (lang.id === "en") {
+                        return item[key].ar;
+                    }
+                }
+            } else {
+                return item[key];
+            }
+        },
+        trans(key) {
+            return this.lang[key] ? this.lang[key] : key;
+        },
+        searchFilter(search) {
+            this.search = search;
+            this.reload(1, "search");
+        },
+        resetFilter() {
+            this.reload(1);
+        },
+        filter(filterBy, filterValue) {
+            let filter = {};
+            let currentFilter = this.route().params;
+            for (let i = 0; i < Object.keys(currentFilter).length; i++) {
+                filter[Object.keys(currentFilter)[i]] =
+                    Object.values(currentFilter)[i];
+            }
+            if(Array.isArray((filterValue))){
+                filter[filterBy] = [];
+                for(let r=0; r<filterValue.length; r++){
+                    filter[filterBy][r] = filterValue[r].id;
+                }
+            }
+
+            this.$inertia.get(this.route(this.url + ".index"), filter);
+        },
+        viewItem(item) {
+            this.showLoader = true;
+            axios.get(route(this.url + ".show", item.id)).then((response) => {
+                this.form = this.$inertia.form(response.data.data);
+                this.viewModal = true;
+                this.showLoader = false;
+            });
+        },
+        editItem(item) {
+            this.showLoader = true;
+            this.form.reset();
+            axios.get(route(this.url + ".show", item.id)).then((response) => {
+                this.form = this.$inertia.form(response.data.data);
+                this.createModal = true;
+                this.edit = true;
+                this.showLoader = false;
+            });
+        },
+        deleteItem(item) {
+            this.form = this.$inertia.form(item);
+            this.deleteModal = true;
+        },
+        reloadList(url) {
+            this.$inertia.get(route(this.url + ".index"), url);
+        },
+        bulkAction(action) {
+            this.bulkActionTitle = action;
+            this.bulkModal = true;
+            this.showBluk = false;
+        },
+        bulkAll() {
+            if (Object.keys(this.bulk).length) {
+                this.bulk = {};
+            } else {
+                for (let i = 0; i < this.collection.data.length; i++) {
+                    this.bulk[this.collection.data[i].id] = true;
+                }
+            }
+        },
+        applyFilters(name) {
+            this.reload(1, "filters", null, false, name);
+        },
+        resetFilters() {
+            this.filters = [];
+            this.reload();
+        },
+        success() {
+            if (typeof this.getMessage === "object") {
+                if (this.getMessage.type === "error") {
+                    this.$toast.error(this.getMessage.message, {
+                        position: "top",
+                        style: {
+                            background: "rgba(210, 45, 61, .8)",
+                            "border-radius": "0.25rem",
+                        },
+                    });
+                } else if (this.getMessage.type === "success") {
+                    this.$toast.success(this.getMessage.message, {
+                        position: "top",
+                        style: {
+                            background: "#1f4cd9",
+                            "border-radius": "0.25rem",
+                        },
+                    });
+                }
+                else {
+                    this.$toast.success(this.getMessage.message, {
+                        position: "top",
+                        style: {
+                            background: "#1f4cd9",
+                            "border-radius": "0.25rem",
+                        },
+                    });
+                }
+            } else {
+                this.$toast.success(this.getMessage, {
+                    position: "top",
+                    style: {
+                        background: "#1f4cd9",
+                        "border-radius": "0.25rem",
+                    },
+                });
+            }
+
+            this.form.reset();
+            this.edit = false;
+            this.createModal = false;
+            this.deleteModal = false;
+            this.reload();
+        },
+        reload(index = 1, type = "main", orderBy = null, dir = false) {
+            let getDir = "";
+            if (dir) {
+                getDir = dir;
+            } else {
+                if (this.desc) {
+                    getDir = "desc";
+                } else {
+                    getDir = "asc";
+                }
+            }
+
+            let url = {};
+            url.page = index;
+            this.search ? (url.search = this.search) : "";
+            url.per_page = this.per_page;
+            orderBy ? (url.orderBy = orderBy) : "";
+            url.orderDirection = getDir;
+
+            this.$inertia.get(route(this.url + ".index"), url);
+        },
+    },
+});
+</script>
diff --git a/src/Publish/resources/js/Components/Base/Modals/Bulk.vue b/src/Publish/resources/js/Components/Base/Modals/Bulk.vue
new file mode 100644
index 0000000..ca6ed13
--- /dev/null
+++ b/src/Publish/resources/js/Components/Base/Modals/Bulk.vue
@@ -0,0 +1,92 @@
+<template>
+    <JetDialogModal :show="showModal" @end="close()">
+        <template #content>
+            <h1 class="py-4 text-3xl text-center text-red-500"></h1>
+            <div class="text-center">
+                <h1 class="py-4 text-lg font-bold text-red-500">
+                    {{ title }}
+                </h1>
+                <h3 claass=" text-gray-400 text-center">
+                    {{ trans('global.bulk.message') }}
+                </h3>
+            </div>
+        </template>
+
+        <template #footer>
+            <JetButton
+                class="mx-3"
+                @click.prevent="bulkActionRun()"
+            >
+                {{ trans('global.run') }}
+            </JetButton>
+            <JetSecondaryButton @click="close()">
+                {{ trans('global.close') }}
+            </JetSecondaryButton>
+        </template>
+    </JetDialogModal>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+import { Link } from "@inertiajs/inertia-vue3";
+import JetDialogModal from "@/Jetstream/DialogModal.vue";
+import JetSecondaryButton from "@/Jetstream/SecondaryButton.vue";
+import JetButton from "@/Jetstream/Button.vue";
+import JetInput from "@/Jetstream/Input.vue";
+import JetInputError from "@/Jetstream/InputError.vue";
+import JetLabel from "@/Jetstream/Label.vue";
+
+export default defineComponent({
+    components: {
+        Link,
+        JetDialogModal,
+        JetSecondaryButton,
+        JetButton,
+        JetInput,
+        JetInputError,
+        JetLabel,
+    },
+    props: {
+        show: Boolean,
+        title: String,
+        url: String,
+        bulk: Object,
+        action: String
+    },
+    watch: {
+        show(newValue, oldValue) {
+            this.showModal = newValue;
+        },
+    },
+    computed:{
+        lang(){
+            return this.$page.props.data.trans;
+        }
+    },
+    data() {
+        return {
+            showModal: false,
+        };
+    },
+    methods: {
+        trans(key){
+            return this.lang[key] ? this.lang[key] : key;
+        },
+        close() {
+            this.$emit("close", this.showModal);
+        },
+        bulkActionRun() {
+            this.$inertia.post(
+                this.route(this.url+".bulk"),
+                { action: this.action, ids: this.bulk },
+                {
+                    preserveScroll: true,
+                    onSuccess: () => {
+                        this.$emit('success');
+                    },
+                }
+            );
+        },
+    },
+});
+</script>
diff --git a/src/Publish/resources/js/Components/Base/Modals/Create.vue b/src/Publish/resources/js/Components/Base/Modals/Create.vue
new file mode 100644
index 0000000..e3bd0e3
--- /dev/null
+++ b/src/Publish/resources/js/Components/Base/Modals/Create.vue
@@ -0,0 +1,494 @@
+<template>
+    <JetDialogModal :show="showModal" @end="close">
+        <template #title>
+            {{ title }}
+        </template>
+
+        <template #content>
+            <div v-if="type.name === 'modal'">
+                <form
+                    class="grid grid-cols-1 gap-3 lg:grid-cols-1"
+                    action=""
+                    v-if="!edit"
+                >
+                    <slot name="create-top"></slot>
+
+                    <div
+                        v-for="(item, key) in rowFilterCreate"
+                        :key="key"
+                        class=""
+                    >
+                        <ViltText v-if="item.vue === 'ViltText.vue' && item.create" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                        <ViltEmail v-if="item.vue === 'ViltEmail.vue' && item.create" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                        <ViltTel v-if="item.vue === 'ViltTel.vue' && item.create" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                        <ViltTextArea v-if="item.vue === 'ViltTextArea.vue' && item.create" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                        <ViltNumber v-if="item.vue === 'ViltNumber.vue' && item.create" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                        <ViltSelect v-if="item.vue === 'ViltSelect.vue' && item.create" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                        <ViltSwitch v-if="item.vue === 'ViltSwitch.vue' && item.create" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                        <ViltColor v-if="item.vue === 'ViltColor.vue' && item.create" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                        <ViltDate v-if="item.vue === 'ViltDate.vue' && item.create" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                        <ViltDateTime v-if="item.vue === 'ViltDateTime.vue' && item.create" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                        <ViltTime v-if="item.vue === 'ViltTime.vue' && item.create" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                        <ViltMedia v-if="item.vue === 'ViltMedia.vue' && item.create" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                        <ViltRepeater v-if="item.vue === 'ViltRepeater.vue' && item.create" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                        <ViltSchema v-if="item.vue === 'ViltSchema.vue' && item.create" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                        <ViltRich v-if="item.vue === 'ViltRich.vue' && item.create" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                        <ViltRelation v-if="item.vue === 'ViltRelation.vue' && item.create" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+
+                    </div>
+                    <slot name="create"></slot>
+                </form>
+                <form
+                    class="grid grid-cols-1 gap-3 md:grid-cols-1"
+                    action=""
+                    v-else
+                >
+                    <slot name="edit-top"></slot>
+                    <div
+                        v-for="(item, key) in rowFilterEdit"
+                        :key="key"
+                        class=""
+                    >
+                        <ViltText v-if="item.vue === 'ViltText.vue' && item.edit" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                        <ViltEmail v-if="item.vue === 'ViltEmail.vue' && item.edit" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                        <ViltTel v-if="item.vue === 'ViltTel.vue' && item.edit" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                        <ViltTextArea v-if="item.vue === 'ViltTextArea.vue' && item.edit" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                        <ViltNumber v-if="item.vue === 'ViltNumber.vue' && item.edit" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                        <ViltSelect v-if="item.vue === 'ViltSelect.vue' && item.edit" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                        <ViltSwitch v-if="item.vue === 'ViltSwitch.vue' && item.edit" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                        <ViltColor v-if="item.vue === 'ViltColor.vue' && item.edit" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                        <ViltDate v-if="item.vue === 'ViltDate.vue' && item.edit" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                        <ViltDateTime v-if="item.vue === 'ViltDateTime.vue' && item.edit" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                        <ViltTime v-if="item.vue === 'ViltTime.vue' && item.edit" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                        <ViltMedia v-if="item.vue === 'ViltMedia.vue' && item.edit" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                        <ViltRepeater v-if="item.vue === 'ViltRepeater.vue' && item.edit" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                        <ViltSchema v-if="item.vue === 'ViltSchema.vue' && item.edit" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                        <ViltRich v-if="item.vue === 'ViltRich.vue' && item.edit" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                        <ViltRelation v-if="item.vue === 'ViltRelation.vue' && item.edit" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                    </div>
+                    <slot name="edit"></slot>
+                </form>
+            </div>
+            <div v-else-if="type.name === 'tabs'">
+                <form
+                    class="grid grid-cols-1 lg:grid-cols-1"
+                    action=""
+                    v-if="!edit"
+                >
+                    <slot name="create-top"></slot>
+                    <div
+                        v-for="(item, key) in rowFilterCreate"
+                        :key="key"
+                        class=""
+                    >
+                        <ViltText v-if="item.vue === 'ViltText.vue' && item.create && item.tab === null" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                        <ViltEmail v-if="item.vue === 'ViltEmail.vue' && item.create && item.tab === null" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                        <ViltTel v-if="item.vue === 'ViltTel.vue' && item.create && item.tab === null" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                        <ViltTextArea v-if="item.vue === 'ViltTextArea.vue' && item.create && item.tab === null" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                        <ViltNumber v-if="item.vue === 'ViltNumber.vue' && item.create && item.tab === null" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                        <ViltSelect v-if="item.vue === 'ViltSelect.vue' && item.create && item.tab === null" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                        <ViltSwitch v-if="item.vue === 'ViltSwitch.vue' && item.create && item.tab === null" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                        <ViltColor v-if="item.vue === 'ViltColor.vue' && item.create && item.tab === null" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                        <ViltDate v-if="item.vue === 'ViltDate.vue' && item.create && item.tab === null" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                        <ViltDateTime v-if="item.vue === 'ViltDateTime.vue' && item.create && item.tab === null" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                        <ViltTime v-if="item.vue === 'ViltTime.vue' && item.create && item.tab === null" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                        <ViltMedia v-if="item.vue === 'ViltMedia.vue' && item.create && item.tab === null" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                        <ViltRepeater v-if="item.vue === 'ViltRepeater.vue' && item.create && item.tab === null" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                        <ViltSchema v-if="item.vue === 'ViltSchema.vue' && item.create && item.tab === null" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                        <ViltRich v-if="item.vue === 'ViltRich.vue' && item.create && item.tab === null" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                        <ViltRelation v-if="item.vue === 'ViltRelation.vue' && item.create && item.tab === null" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                    </div>
+                    <slot name="create"></slot>
+                </form>
+                <form class="grid grid-cols-1 md:grid-cols-1" action="" v-else>
+                    <slot name="edit-top"></slot>
+                    <div
+                        v-for="(item, key) in rowFilterEdit"
+                        :key="key"
+                        class=""
+                    >
+                        <ViltText v-if="item.vue === 'ViltText.vue' && item.edit && item.tab === null" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                        <ViltEmail v-if="item.vue === 'ViltEmail.vue' && item.edit && item.tab === null" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                        <ViltTel v-if="item.vue === 'ViltTel.vue' && item.edit && item.tab === null" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                        <ViltTextArea v-if="item.vue === 'ViltTextArea.vue' && item.edit && item.tab === null" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                        <ViltNumber v-if="item.vue === 'ViltNumber.vue' && item.edit && item.tab === null" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                        <ViltSelect v-if="item.vue === 'ViltSelect.vue' && item.edit && item.tab === null" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                        <ViltSwitch v-if="item.vue === 'ViltSwitch.vue' && item.edit && item.tab === null" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                        <ViltColor v-if="item.vue === 'ViltColor.vue' && item.edit && item.tab === null" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                        <ViltDate v-if="item.vue === 'ViltDate.vue' && item.edit && item.tab === null" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                        <ViltDateTime v-if="item.vue === 'ViltDateTime.vue' && item.edit && item.tab === null" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                        <ViltTime v-if="item.vue === 'ViltTime.vue' && item.edit && item.tab === null" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                        <ViltMedia v-if="item.vue === 'ViltMedia.vue' && item.edit && item.tab === null" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                        <ViltRepeater v-if="item.vue === 'ViltRepeater.vue' && item.edit && item.tab === null" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                        <ViltSchema v-if="item.vue === 'ViltSchema.vue' && item.edit && item.tab === null" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                        <ViltRich v-if="item.vue === 'ViltRich.vue' && item.edit && item.tab === null" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                        <ViltRelation v-if="item.vue === 'ViltRelation.vue' && item.edit && item.tab === null" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                    </div>
+                    <slot name="edit"></slot>
+                </form>
+                <Tabs
+                    cache-lifetime="0"
+                    :options="{ defaultTabHash: type.tabs[0].key }"
+                    @changed="changeTab"
+                    ref="tabs"
+                    nav-class="flex justify-start space-x-2"
+                    nav-item-class="py-2 px-4 rounded-lg"
+                    nav-item-active-class="bg-main  py-2 px-4 rounded-lg text-white"
+                >
+                    <Tab
+                        v-for="(tab, key) in type.tabs"
+                        :key="key"
+                        :name="tab.label"
+                        :id="tab.key"
+                        :is-disabled="
+                            (!tab.create && !edit) || (!tab.edit && edit)
+                        "
+                    >
+                        <form
+                            class="grid grid-cols-1 lg:grid-cols-1"
+                            action=""
+                            v-if="!edit"
+                        >
+                            <slot name="create-top"></slot>
+                            <div
+                                v-for="(item, key) in rowFilterCreate"
+                                :key="key"
+                                class=""
+                            >
+                                <ViltText v-if="item.vue === 'ViltText.vue' && item.create && item.tab === tab.key" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                                <ViltEmail v-if="item.vue === 'ViltEmail.vue' && item.create && item.tab === tab.key" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                                <ViltTel v-if="item.vue === 'ViltTel.vue' && item.create && item.tab === tab.key" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                                <ViltTextArea v-if="item.vue === 'ViltTextArea.vue' && item.create && item.tab === tab.key" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                                <ViltNumber v-if="item.vue === 'ViltNumber.vue' && item.create && item.tab === tab.key" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                                <ViltSelect v-if="item.vue === 'ViltSelect.vue' && item.create && item.tab === tab.key" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                                <ViltSwitch v-if="item.vue === 'ViltSwitch.vue' && item.create && item.tab === tab.key" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                                <ViltColor v-if="item.vue === 'ViltColor.vue' && item.create && item.tab === tab.key" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                                <ViltDate v-if="item.vue === 'ViltDate.vue' && item.create && item.tab === tab.key" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                                <ViltDateTime v-if="item.vue === 'ViltDateTime.vue' && item.create && item.tab === tab.key" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                                <ViltTime v-if="item.vue === 'ViltTime.vue' && item.create && item.tab === tab.key" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                                <ViltMedia v-if="item.vue === 'ViltMedia.vue' && item.create && item.tab === tab.key" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                                <ViltRepeater v-if="item.vue === 'ViltRepeater.vue' && item.create && item.tab === tab.key" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                                <ViltSchema v-if="item.vue === 'ViltSchema.vue' && item.create && item.tab === tab.key" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                                <ViltRich v-if="item.vue === 'ViltRich.vue' && item.create && item.tab === tab.key" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                                <ViltRelation v-if="item.vue === 'ViltRelation.vue' && item.create && item.tab === tab.key" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                            </div>
+                            <slot name="create"></slot>
+                        </form>
+                        <form
+                            class="grid grid-cols-1 md:grid-cols-1"
+                            action=""
+                            v-else
+                        >
+                            <slot name="edit-top"></slot>
+                            <div
+                                v-for="(item, key) in rowFilterEdit"
+                                :key="key"
+                                class=""
+                            >
+                                <ViltText v-if="item.vue === 'ViltText.vue' && item.edit && item.tab === tab.key" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                                <ViltEmail v-if="item.vue === 'ViltEmail.vue' && item.edit && item.tab === tab.key" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                                <ViltTel v-if="item.vue === 'ViltTel.vue' && item.edit && item.tab === tab.key" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                                <ViltTextArea v-if="item.vue === 'ViltTextArea.vue' && item.edit && item.tab === tab.key" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                                <ViltNumber v-if="item.vue === 'ViltNumber.vue' && item.edit && item.tab === tab.key" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                                <ViltSelect v-if="item.vue === 'ViltSelect.vue' && item.edit && item.tab === tab.key" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                                <ViltSwitch v-if="item.vue === 'ViltSwitch.vue' && item.edit && item.tab === tab.key" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                                <ViltColor v-if="item.vue === 'ViltColor.vue' && item.edit && item.tab === tab.key" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                                <ViltDate v-if="item.vue === 'ViltDate.vue' && item.edit && item.tab === tab.key" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                                <ViltDateTime v-if="item.vue === 'ViltDateTime.vue' && item.edit && item.tab === tab.key" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                                <ViltTime v-if="item.vue === 'ViltTime.vue' && item.edit && item.tab === tab.key" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                                <ViltMedia v-if="item.vue === 'ViltMedia.vue' && item.edit && item.tab === tab.key" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                                <ViltRepeater v-if="item.vue === 'ViltRepeater.vue' && item.edit && item.tab === tab.key" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                                <ViltSchema v-if="item.vue === 'ViltSchema.vue' && item.edit && item.tab === tab.key" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                                <ViltRich v-if="item.vue === 'ViltRich.vue' && item.edit && item.tab === tab.key" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                                <ViltRelation v-if="item.vue === 'ViltRelation.vue' && item.edit && item.tab === tab.key" :message="form.errors[item.name]" :row="item" v-model="form[item.name]"/>
+                            </div>
+                            <slot name="edit"></slot>
+                        </form>
+                    </Tab>
+                </Tabs>
+            </div>
+        </template>
+
+        <template #footer>
+            <slot name="footer-button"></slot>
+
+            <div class="flex justify-start gap-2">
+                <JetButton
+                    :disabled="isDisabledBtn"
+                    v-if="type.name === 'tabs' && !this.lastTab"
+                    @click.prevent="nextTab()"
+                >
+                    {{ trans("global.next") }}
+                </JetButton>
+                <JetButton
+                    :disabled="isDisabledBtn"
+                    v-if="!edit && this.lastTab && this.type.name === 'tabs'"
+                    @click.prevent="saveRecord()"
+                >
+                    {{ trans("global.save") }}
+                </JetButton>
+                <JetButton
+                    :disabled="isDisabledBtn"
+                    v-else-if="!edit && this.type.name === 'modal'"
+                    @click.prevent="saveRecord()"
+                >
+                    {{ trans("global.save") }}
+                </JetButton>
+                <JetButton
+                    :disabled="isDisabledBtn"
+                    v-else-if="edit"
+                    @click.prevent="updateRecord(form.id)"
+                >
+                    {{ trans("global.update") }}
+                </JetButton>
+                <JetSecondaryButton @click="close">
+                    {{ trans("global.close") }}
+                </JetSecondaryButton>
+            </div>
+        </template>
+    </JetDialogModal>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+import { Link } from "@inertiajs/inertia-vue3";
+import JetDialogModal from "@/Jetstream/DialogModal.vue";
+import JetSecondaryButton from "@/Jetstream/SecondaryButton.vue";
+import JetButton from "@/Jetstream/Button.vue";
+import JetInput from "@/Jetstream/Input.vue";
+import JetInputError from "@/Jetstream/InputError.vue";
+import JetLabel from "@/Jetstream/Label.vue";
+import { Tabs, Tab } from "vue3-tabs-component";
+import { ref } from "vue";
+import ViltText from '$$/ViltText.vue'
+import ViltTel from '$$/ViltTel.vue'
+import ViltTextArea from "$$/ViltTextArea.vue";
+import ViltNumber from "$$/ViltNumber.vue";
+import ViltSelect from "$$/ViltSelect.vue";
+import ViltSwitch from "$$/ViltSwitch.vue";
+import ViltColor from "$$/ViltColor.vue";
+import ViltEmail from "$$/ViltEmail.vue";
+import ViltDate from "$$/ViltDate.vue";
+import ViltDateTime from "$$/ViltDateTime.vue";
+import ViltTime from "$$/ViltTime.vue";
+import ViltMedia from "$$/ViltMedia.vue";
+import ViltRepeater from "$$/ViltRepeater.vue";
+import ViltSchema from "$$/ViltSchema.vue";
+import ViltRich from "$$/ViltRich.vue";
+import ViltRelation from "$$/ViltRelation.vue";
+
+
+export default defineComponent({
+    components: {
+        Tabs,
+        Tab,
+        Link,
+        JetDialogModal,
+        JetSecondaryButton,
+        JetButton,
+        JetInput,
+        JetInputError,
+        JetLabel,
+        ViltTextArea,
+        ViltText,
+        ViltTel,
+        ViltNumber,
+        ViltSelect,
+        ViltSwitch,
+        ViltColor,
+        ViltEmail,
+        ViltDate,
+        ViltDateTime,
+        ViltTime,
+        ViltMedia,
+        ViltRepeater,
+        ViltSchema,
+        ViltRich,
+        ViltRelation,
+    },
+    props: {
+        show: Boolean,
+        edit: Boolean,
+        item: Object,
+        title: String,
+        url: String,
+        rows: Array,
+        type: {
+            String,
+            default: "modal",
+        },
+    },
+    computed: {
+        lang() {
+            return this.$page.props.data.trans;
+        },
+        rowFilterCreate() {
+            let rows = this.$props.rows;
+            let rowValue = [];
+            for (let i = 0; i < rows.length; i++) {
+                if (
+                    this.arraysEqual(
+                        rows[i].reactive,
+                        this.form[rows[i].row]
+                    ) &&
+                    rows[i].create
+                ) {
+                    rowValue.push(rows[i]);
+                } else if (!rows[i].reactive && rows[i].create) {
+                    rowValue.push(rows[i]);
+                }
+            }
+
+            return rowValue;
+        },
+        rowFilterEdit() {
+            let rows = this.$props.rows;
+            let rowValue = [];
+            for (let i = 0; i < rows.length; i++) {
+                if (
+                    this.arraysEqual(
+                        rows[i].reactive,
+                        this.form[rows[i].row]
+                    ) &&
+                    rows[i].edit
+                ) {
+                    rowValue.push(rows[i]);
+                } else if (!rows[i].reactive && rows[i].edit) {
+                    rowValue.push(rows[i]);
+                }
+            }
+
+            return rowValue;
+        },
+    },
+    watch: {
+        show(newValue, oldValue) {
+            this.showModal = newValue;
+        },
+        item(newValue, oldValue) {
+            this.form = newValue;
+        },
+    },
+    data() {
+        return {
+            isDisabledBtn: false,
+            showModal: false,
+            form: this.$inertia.form(this.item),
+            index: 0,
+            lastTab: false,
+        };
+    },
+    mounted() {
+        this.$inertia.on("start", () => (this.isDisabledBtn = true));
+        this.$inertia.on("finish", () => (this.isDisabledBtn = false));
+    },
+    methods: {
+        changeTab(selectedTab) {
+            let countActive = 0;
+            for (let i = 0; i < this.type.tabs.length; i++) {
+                if (this.type.tabs[i].key === selectedTab.tab.computedId) {
+                    this.index = i;
+                }
+            }
+            if (this.index === this.type.tabs.length - 1) {
+                this.lastTab = true;
+            } else {
+                this.lastTab = false;
+            }
+        },
+        nextTab() {
+            this.index += 1;
+            this.$refs.tabs.selectTab("#" + this.type.tabs[this.index].key);
+        },
+        trans(key) {
+            return this.lang[key] ? this.lang[key] : key;
+        },
+        close() {
+            this.$emit("close", this.showModal);
+        },
+        success(id = null) {
+            if (this.edit) {
+                this.$emit("update", { form: thitrues.form, id: id });
+                this.isDisabledBtn = false;
+            } else {
+                this.$emit("create", this.form);
+                this.isDisabledBtn = false;
+            }
+        },
+        saveRecord() {
+            this.form.submit("post", this.route(this.url + ".store"), {
+                preserveScroll: true,
+                onSuccess: () => {
+                    this.form.reset();
+                    this.$emit("success");
+                    this.isDisabledBtn = false;
+                },
+                onError: () => {
+                    if (this.type.type === "tabs") {
+                        for (let r = 0; r < this.rows.length; r++) {
+                            if (
+                                Object.keys(this.form.errors)[0] ===
+                                this.rows[r].field
+                            ) {
+                                if (this.$refs.tabs) {
+                                    this.$refs.tabs.selectTab(
+                                        "#" + this.rows[r].tab
+                                    );
+                                }
+
+                                break;
+                            }
+                        }
+                    }
+                    this.$toast.success(this.trans("global.error.message"), {
+                        position: "top",
+                        style: {
+                            background: "#d41717",
+                            "border-radius": "0.25rem",
+                        },
+                    });
+                },
+            });
+        },
+        updateRecord(id) {
+            this.form.submit("post", this.route(this.url + ".update", id), {
+                preserveScroll: true,
+                forceFormData: true,
+                onSuccess: () => {
+                    this.form.reset();
+                    this.$emit("success");
+                    this.isDisabledBtn = false;
+                },
+                onError: () => {
+                    if (this.type.type === "tabs") {
+                        for (let r = 0; r < this.rows.length; r++) {
+                            if (
+                                Object.keys(this.form.errors)[0] ===
+                                this.rows[r].field
+                            ) {
+                                if (this.$refs.tabs) {
+                                    this.$refs.tabs.selectTab(
+                                        "#" + this.rows[r].tab
+                                    );
+                                }
+
+                                break;
+                            }
+                        }
+                    }
+                    this.$toast.success(this.trans("global.error.message"), {
+                        position: "top",
+                        style: {
+                            background: "#d41717",
+                            "border-radius": "0.25rem",
+                        },
+                    });
+                },
+            });
+        },
+        arraysEqual(a, b) {
+            return JSON.stringify(a) == JSON.stringify(b);
+        },
+    },
+});
+</script>
diff --git a/src/Publish/resources/js/Components/Base/Modals/Delete.vue b/src/Publish/resources/js/Components/Base/Modals/Delete.vue
new file mode 100644
index 0000000..7af5d4a
--- /dev/null
+++ b/src/Publish/resources/js/Components/Base/Modals/Delete.vue
@@ -0,0 +1,88 @@
+<template>
+        <JetDialogModal :show="showModal" @end="close()">
+            <template #content>
+                <div class="text-center">
+                    <h1 class="py-4 text-lg font-bold text-red-500">{{ trans('global.delete') }}</h1>
+                    <h3 claass=" text-gray-400 text-center">
+                        {{ trans('global.delete.message') }}
+                    </h3>
+                </div>
+            </template>
+
+            <template #footer>
+                <button
+                    class="inline-flex items-center justify-center px-4 mr-3 font-normal tracking-tight text-white transition-colors border border-transparent rounded-lg shadow focus:outline-none focus:ring-offset-2 focus:ring-2 focus:ring-inset filament-button dark:focus:ring-offset-0 h-9 focus:ring-white bg-danger-600 hover:bg-danger-500 focus:bg-danger-700 focus:ring-offset-danger-700 filament-page-button-action"
+                    @click.prevent="destroyRecord(form.id)"
+                >
+                    Delete
+                </button>
+                <JetSecondaryButton @click="close()">
+                    Close
+                </JetSecondaryButton>
+            </template>
+        </JetDialogModal>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+import { Link } from "@inertiajs/inertia-vue3";
+import JetDialogModal from "@/Jetstream/DialogModal.vue";
+import JetSecondaryButton from "@/Jetstream/SecondaryButton.vue";
+import JetButton from "@/Jetstream/Button.vue";
+import JetInput from "@/Jetstream/Input.vue";
+import JetInputError from "@/Jetstream/InputError.vue";
+import JetLabel from "@/Jetstream/Label.vue";
+
+export default defineComponent({
+    components: {
+        Link,
+        JetDialogModal,
+        JetSecondaryButton,
+        JetButton,
+        JetInput,
+        JetInputError,
+        JetLabel,
+    },
+    props: {
+        show: Boolean,
+        url: String,
+        item: Object
+    },
+    data() {
+        return {
+            showModal: false,
+            form: {},
+        };
+    },
+    watch: {
+        show(newValue, oldValue) {
+            this.showModal = newValue;
+        },
+        item(newValue, oldValue) {
+            this.form = newValue;
+        },
+    },
+    computed:{
+        lang(){
+            return this.$page.props.data.trans;
+        }
+    },
+    methods: {
+        trans(key){
+            return this.lang[key] ? this.lang[key] : key;
+        },
+        close() {
+            this.$emit("close", this.showModal);
+        },
+        destroyRecord(id) {
+            this.form.submit("delete", this.route(this.url +".destory", id), {
+                preserveScroll: true,
+                onSuccess: () => {
+                    this.form.reset();
+                    this.$emit('success');
+                },
+            });
+        },
+    },
+});
+</script>
diff --git a/src/Publish/resources/js/Components/Base/Modals/View.vue b/src/Publish/resources/js/Components/Base/Modals/View.vue
new file mode 100644
index 0000000..b3736ca
--- /dev/null
+++ b/src/Publish/resources/js/Components/Base/Modals/View.vue
@@ -0,0 +1,121 @@
+<template>
+    <JetDialogModal :show="showModal" @end="close">
+        <template #title>
+            <span class="text-main">{{ title }}</span>
+            <hr class="my-4" />
+        </template>
+
+        <template #content>
+            <div class="print_area">
+                <div v-for="(row, key) in rows" :key="key">
+                    <div v-if="row.view">
+                        <ViltText v-if="row.vue === 'ViltText.vue' " :row="row" v-model="item[row.name]" view="view"/>
+                        <ViltEmail v-if="row.vue === 'ViltEmail.vue' " :row="row" v-model="item[row.name]" view="view"/>
+                        <ViltTel v-if="row.vue === 'ViltTel.vue' " :row="row" v-model="item[row.name]" view="view"/>
+                        <ViltTextArea v-if="row.vue === 'ViltTextArea.vue' " :row="row" v-model="item[row.name]" view="view"/>
+                        <ViltNumber v-if="row.vue === 'ViltNumber.vue' " :row="row" v-model="item[row.name]" view="view"/>
+                        <ViltSelect v-if="row.vue === 'ViltSelect.vue' " :row="row" v-model="item[row.name]" view="view"/>
+                        <ViltSwitch v-if="row.vue === 'ViltSwitch.vue' " :row="row" v-model="item[row.name]" view="view"/>
+                        <ViltColor v-if="row.vue === 'ViltColor.vue' " :row="row" v-model="item[row.name]" view="view"/>
+                        <ViltDate v-if="row.vue === 'ViltDate.vue'"  :row="row" v-model="item[row.name]" view="view"/>
+                        <ViltDateTime v-if="row.vue === 'ViltDateTime.vue'" :row="row" v-model="item[row.name]" view="view"/>
+                        <ViltTime v-if="row.vue === 'ViltTime.vue'" :row="row" v-model="item[row.name]" view="view"/>
+                        <ViltMedia v-if="row.vue === 'ViltMedia.vue'" @popUp="popUp" :row="row" v-model="item[row.name]" view="view"/>
+                        <ViltRepeater v-if="row.vue === 'ViltRepeater.vue'" :row="row" v-model="item[row.name]" view="view"/>
+                        <ViltSchema v-if="row.vue === 'ViltSchema.vue'" :row="row" v-model="item[row.name]" view="view"/>
+                        <ViltRich v-if="row.vue === 'ViltRich.vue'"  :row="row" v-model="item[row.name]" view="view"/>
+                        <ViltRelation v-if="row.vue === 'ViltRelation.vue'"  :row="row" v-model="item[row.name]" view="view"/>
+                    </div>
+                </div>
+            </div>
+        </template>
+
+        <template #footer>
+            <slot></slot>
+            <JetSecondaryButton @click="close">
+                {{ trans("global.close") }}
+            </JetSecondaryButton>
+        </template>
+    </JetDialogModal>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+import { Link } from "@inertiajs/inertia-vue3";
+import JetDialogModal from "@/Jetstream/DialogModal.vue";
+import JetSecondaryButton from "@/Jetstream/SecondaryButton.vue";
+import JetButton from "@/Jetstream/Button.vue";
+import ViltText from '$$/ViltText.vue'
+import ViltTel from '$$/ViltTel.vue'
+import ViltTextArea from "$$/ViltTextArea.vue";
+import ViltNumber from "$$/ViltNumber.vue";
+import ViltSelect from "$$/ViltSelect.vue";
+import ViltSwitch from "$$/ViltSwitch.vue";
+import ViltColor from "$$/ViltColor.vue";
+import ViltEmail from "$$/ViltEmail.vue";
+import ViltDate from "$$/ViltDate.vue";
+import ViltDateTime from "$$/ViltDateTime.vue";
+import ViltTime from "$$/ViltTime.vue";
+import ViltMedia from "$$/ViltMedia.vue";
+import ViltRepeater from "$$/ViltRepeater.vue";
+import ViltSchema from "$$/ViltSchema.vue";
+import ViltRich from "$$/ViltRich.vue";
+import ViltRelation from "$$/ViltRelation.vue";
+
+export default defineComponent({
+    components: {
+        Link,
+        JetDialogModal,
+        JetSecondaryButton,
+        JetButton,
+        ViltTextArea,
+        ViltText,
+        ViltTel,
+        ViltNumber,
+        ViltSelect,
+        ViltSwitch,
+        ViltColor,
+        ViltEmail,
+        ViltDate,
+        ViltDateTime,
+        ViltTime,
+        ViltMedia,
+        ViltRepeater,
+        ViltSchema,
+        ViltRich,
+        ViltRelation,
+    },
+    props: {
+        show: Boolean,
+        item: Object,
+        rows: Array,
+        title: String,
+    },
+    watch: {
+        show(newValue, oldValue) {
+            this.showModal = newValue;
+        },
+    },
+    computed: {
+        lang() {
+            return this.$page.props.data.trans;
+        },
+    },
+    data() {
+        return {
+            showModal: false,
+        };
+    },
+    methods: {
+        trans(key) {
+            return this.lang[key] ? this.lang[key] : key;
+        },
+        close() {
+            this.$emit("close", this.showModal);
+        },
+        popUp(images){
+            this.$emit('media', images)
+        }
+    },
+});
+</script>
diff --git a/src/Publish/resources/js/Components/Base/Pagination.vue b/src/Publish/resources/js/Components/Base/Pagination.vue
new file mode 100644
index 0000000..9c50dcf
--- /dev/null
+++ b/src/Publish/resources/js/Components/Base/Pagination.vue
@@ -0,0 +1,204 @@
+<template>
+    <nav
+        role="navigation"
+        aria-label="Pagination Navigation"
+        class="flex items-center justify-between filament-tables-pagination"
+        v-if="collection.data.length"
+    >
+        <div
+            class="flex items-center justify-center flex-col md:flex-row md:items-center md:justify-between flex-1 mb-0 md:mb-4"
+        >
+            <div class="flex items-center">
+                <div
+                    class="text-sm font-normal dark:text-white mt-1 mt-[10px] mb-[20px] md:mt-0 md:mb-0"
+                >
+                    {{ trans("global.show") }} {{ collection.from }}
+                    {{ trans("global.to") }} {{ collection.to }}
+                    {{ trans("global.of") }}
+                    {{ collection.total }}
+                    {{ trans("global.results") }}
+                </div>
+            </div>
+            <div class="flex flex-col items-center md:flex-row">
+                <div
+                    class="flex items-start space-x-2 rtl:space-x-reverse filament-tables-pagination-records-per-page-selector mb-[20px] md:mb-0"
+                >
+                    <div class="flex items-center">
+                        <select
+                            v-model="setPerPage"
+                            id="tableRecordsPerPageSelect"
+                            @change="reload(1, 'per_page')"
+                            class="h-[38px] pr-[30px] rtl:pl-[10px] rtl:pr-[30px] text-sm leading-none transition duration-75 border-slate-300 rounded-default shadow-sm focus:border-main focus:ring-1 focus:ring-inset focus:ring-main dark:border-gray-700 dark:text-gray-400 dark:bg-gray-800"
+                        >
+                            <option value="5">5</option>
+                            <option value="10">10</option>
+                            <option value="25">25</option>
+                            <option value="50">50</option>
+                        </select>
+
+                        <label
+                            for="tableRecordsPerPageSelect"
+                            class="text-sm font-normal mx-2"
+                        >
+                            {{ trans("global.per_page") }}
+                        </label>
+                    </div>
+                </div>
+
+                <div
+                    class="flex items-center justify-end mb-6 ml-0 rtl:ml-0 rtl:mr-3 md:mb-0 md:ml-4"
+                    v-if="collection.total > collection.per_page"
+                >
+                    <div
+                        class="py-3 border border-none rounded-default dark:border-none"
+                    >
+                        <ol
+                            class="flex items-center text-sm text-gray-500 dark:text-gray-400"
+                        >
+                            <li>
+                                <!-- v-show="collection.current_page !== 1" -->
+                                <button
+                                    @click.prevent="back()"
+                                    :class="
+                                        collection.current_page !== 1
+                                            ? ''
+                                            : 'text-gray-300 pointer-events-none'
+                                    "
+                                    type="button"
+                                    class="flex items-center justify-center font-normal min-w-[2rem] px-3 py-2 focus:outline-none filament-tables-pagination-item border border-transparent hover:border-main transition-all text-gray-800 dark:border-gray-700 dark:text-gray-400 dark:bg-gray-800 focus:outline-none focus:ring-0 border border-slate-300 relative right-[-1px] rtl:right-[0px] rtl:left-[-1px] border-r-transparent rtl:border-r-slate-300 rtl:border-l-transparent rounded-l-default rtl:rounded-l-0 rtl:rounded-r-default dark:hover:bg-main dark:hover:text-white"
+                                    aria-label="Previous"
+                                    rel="prev"
+                                >
+                                    {{ trans("pagination.previous") }}
+                                </button>
+                            </li>
+                            <li
+                                v-for="(page, key) in getNumbers(
+                                    start_page,
+                                    last_page
+                                )"
+                                :key="key"
+                            >
+                                <button
+                                    v-if="collection.current_page === page"
+                                    @click.prevent="reload(page)"
+                                    type="button"
+                                    class="flex items-center justify-center font-normal w-[38px] px-3 py-2 focus:outline-none filament-tables-pagination-item transition-all bg-main text-white focus:underline border border-main relative right-[-1px] dark:bg-main dark:text-white"
+                                    aria-label="Go to page 1"
+                                >
+                                    <span>{{ page }}</span>
+                                </button>
+                                <button
+                                    v-else
+                                    @click.prevent="reload(page)"
+                                    type="button"
+                                    class="flex items-center justify-center font-normal w-[38px] px-3 py-2 focus:outline-none filament-tables-pagination-item border border-transparent text-gray-800 hover:border-main focus:bg-green_white focus:ring-2 transition dark:border-gray-700 dark:bg-gray-800 dark:text-white border-y border-slate-300 border-x-transparent relative right-[-1px] rtl:right-[0px] rtl:left-[-1px] dark:hover:bg-main"
+                                    aria-label="Go to page 2"
+                                >
+                                    <span>{{ page }}</span>
+                                </button>
+                            </li>
+                            <li>
+                                <!-- v-show="
+                                        collection.current_page !==
+                                        collection.last_page
+                                    " -->
+                                <button
+                                    @click.prevent="next()"
+                                    :class="
+                                        collection.current_page !==
+                                        collection.last_page
+                                            ? ''
+                                            : 'text-gray-300 pointer-events-none'
+                                    "
+                                    type="button"
+                                    class="flex items-center justify-center font-normal min-w-[2rem] px-3 py-2 focus:outline-none filament-tables-pagination-item border border-transparent hover:border-main transition-all text-gray-800 dark:border-gray-700 focus:outline-none focus:ring-0 border border-slate-300 border-l-transparent rtl:border-l-slate-300 rtl:border-r-transparent rounded-r-default rtl:rounded-r-0 rtl:rounded-l-default dark:hover:bg-main dark:text-white dark:bg-gray-800"
+                                    aria-label="Next"
+                                    rel="next"
+                                >
+                                    {{ trans("pagination.next") }}
+                                </button>
+                            </li>
+                        </ol>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </nav>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+import { Link } from "@inertiajs/inertia-vue3";
+
+export default defineComponent({
+    components: {
+        Link,
+    },
+    props: {
+        collection: Object,
+        per_page: Number,
+        url: String,
+    },
+    watch: {
+        per_page(newValue, oldValue) {
+            this.setPerPage = newValue;
+        },
+    },
+    data() {
+        return {
+            setPerPage: 10,
+            start_page: 0,
+            last_page: 1,
+        };
+    },
+    mounted() {
+        if (this.collection.total >= 5 && this.collection.current_page > 3) {
+            this.start_page = this.collection.current_page - 2;
+        } else {
+            this.start_page = 1;
+        }
+        if (this.collection.last_page == this.start_page) {
+            this.last_page = this.start_page + 1;
+        } else if (this.start_page + 5 <= this.collection.last_page) {
+            this.last_page = this.start_page + 5;
+        } else {
+            let get_last = this.collection.last_page - this.start_page;
+            this.last_page = this.start_page + get_last + 1;
+        }
+    },
+    computed: {
+        lang() {
+            return this.$page.props.data.trans;
+        },
+    },
+    methods: {
+        trans(key) {
+            return this.lang[key] ? this.lang[key] : key;
+        },
+        getNumbers(start, stop) {
+            return new Array(stop - start).fill(start).map((n, i) => n + i);
+        },
+        reload(page, type) {
+            let url = {};
+            url.page = page;
+            url.per_page = this.setPerPage;
+            this.$emit("reload", url);
+        },
+        next() {
+            if (this.collection.current_page === this.last_page) {
+                this.reload(this.last_page);
+            } else {
+                this.reload(this.collection.current_page + 1);
+            }
+        },
+        back() {
+            if (this.collection.current_page === 1) {
+                this.reload(1);
+            } else {
+                this.reload(this.collection.current_page - 1);
+            }
+        },
+    },
+});
+</script>
diff --git a/src/Publish/resources/js/Components/Base/Rows/ViltForm.vue b/src/Publish/resources/js/Components/Base/Rows/ViltForm.vue
new file mode 100644
index 0000000..5df3ca6
--- /dev/null
+++ b/src/Publish/resources/js/Components/Base/Rows/ViltForm.vue
@@ -0,0 +1,119 @@
+<template>
+    <div>
+        <div v-for="(item, key) in rows" :key="key">
+            <ViltText v-if="item.vue === 'ViltText.vue'" :message="errors[item.name]" @update:modelValue="update" :row="item" v-model="form[item.name]"/>
+            <ViltEmail v-if="item.vue === 'ViltEmail.vue'" :message="errors[item.name]" @update:modelValue="update" :row="item" v-model="form[item.name]"/>
+            <ViltTel v-if="item.vue === 'ViltTel.vue'" :message="errors[item.name]" @update:modelValue="update" :row="item" v-model="form[item.name]"/>
+            <ViltTextArea v-if="item.vue === 'ViltTextArea.vue'" :message="errors[item.name]" @update:modelValue="update" :row="item" v-model="form[item.name]"/>
+            <ViltNumber v-if="item.vue === 'ViltNumber.vue'" :message="errors[item.name]" @update:modelValue="update" :row="item" v-model="form[item.name]"/>
+            <ViltSelect v-if="item.vue === 'ViltSelect.vue'" :message="errors[item.name]" @update:modelValue="update" :row="item" v-model="form[item.name]"/>
+            <ViltSwitch v-if="item.vue === 'ViltSwitch.vue'" :message="errors[item.name]" @update:modelValue="update" :row="item" v-model="form[item.name]"/>
+            <ViltColor v-if="item.vue === 'ViltColor.vue'" :message="errors[item.name]" @update:modelValue="update" :row="item" v-model="form[item.name]"/>
+            <ViltDate v-if="item.vue === 'ViltDate.vue'" :message="errors[item.name]" @update:modelValue="update" :row="item" v-model="form[item.name]"/>
+            <ViltDateTime v-if="item.vue === 'ViltDateTime.vue'" :message="errors[item.name]" @update:modelValue="update" :row="item" v-model="form[item.name]"/>
+            <ViltTime v-if="item.vue === 'ViltTime.vue'" :message="errors[item.name]" @update:modelValue="update" :row="item" v-model="form[item.name]"/>
+            <ViltMedia v-if="item.vue === 'ViltMedia.vue'" :message="errors[item.name]" @update:modelValue="update" :row="item" v-model="form[item.name]"/>
+            <ViltRepeater v-if="item.vue === 'ViltRepeater.vue'" :message="errors[item.name]" @update:modelValue="update" :row="item" v-model="form[item.name]"/>
+            <ViltSchema v-if="item.vue === 'ViltSchema.vue'" :message="errors[item.name]" @update:modelValue="update" :row="item" v-model="form[item.name]"/>
+            <ViltRich v-if="item.vue === 'ViltRich.vue'" :message="errors[item.name]" @update:modelValue="update" :row="item" v-model="form[item.name]"/>
+            <ViltRelation v-if="item.vue === 'ViltRelation.vue'" :message="errors[item.name]" @update:modelValue="update" :row="item" v-model="form[item.name]"/>
+        </div>
+    </div>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+import JetInputError from "@/Jetstream/InputError.vue";
+import ViltText from '$$/ViltText.vue'
+import ViltTel from '$$/ViltTel.vue'
+import ViltTextArea from "$$/ViltTextArea.vue";
+import ViltNumber from "$$/ViltNumber.vue";
+import ViltSelect from "$$/ViltSelect.vue";
+import ViltSwitch from "$$/ViltSwitch.vue";
+import ViltColor from "$$/ViltColor.vue";
+import ViltEmail from "$$/ViltEmail.vue";
+import ViltDate from "$$/ViltDate.vue";
+import ViltDateTime from "$$/ViltDateTime.vue";
+import ViltTime from "$$/ViltTime.vue";
+import ViltMedia from "$$/ViltMedia.vue";
+import ViltRepeater from "$$/ViltRepeater.vue";
+import ViltSchema from "$$/ViltSchema.vue";
+import ViltRich from "$$/ViltRich.vue";
+import ViltRelation from "$$/ViltRelation.vue";
+
+
+export default defineComponent({
+    components: {
+        JetInputError,
+        ViltTextArea,
+        ViltText,
+        ViltTel,
+        ViltNumber,
+        ViltSelect,
+        ViltSwitch,
+        ViltColor,
+        ViltEmail,
+        ViltDate,
+        ViltDateTime,
+        ViltTime,
+        ViltMedia,
+        ViltRepeater,
+        ViltSchema,
+        ViltRich,
+        ViltRelation,
+    },
+    data() {
+        return {
+            form: {},
+        };
+    },
+    props: {
+        modelValue: {},
+        rows: {
+            Array,
+            default: [],
+        },
+        errors: {
+            Object,
+            default: {},
+        },
+        edit: {
+            Boolean,
+            default: false,
+        },
+    },
+    mounted() {
+        let rows = this.$props.rows;
+        let getRows = {};
+        for (let i = 0; i < rows.length; i++) {
+            if(rows[i].default){
+                getRows[rows[i].name] = rows[i].default;
+            }
+            else {
+                getRows[rows[i].name] = "";
+            }
+
+        }
+
+        this.form = getRows;
+    },
+    beforeUpdate() {
+        if (this.modelValue) {
+            if (this.modelValue.hasOwnProperty("errors")) {
+                this.form = this.modelValue;
+            } else {
+                this.form = this.$inertia.form(this.modelValue);
+            }
+        }
+    },
+    methods: {
+        update() {
+            if (this.form.hasOwnProperty("errors")) {
+                this.$emit("update:modelValue", this.form);
+            } else {
+                this.$emit("update:modelValue", this.$inertia.form(this.form));
+            }
+        },
+    },
+});
+</script>
diff --git a/src/Publish/resources/js/Components/Base/Table.vue b/src/Publish/resources/js/Components/Base/Table.vue
new file mode 100644
index 0000000..58f4769
--- /dev/null
+++ b/src/Publish/resources/js/Components/Base/Table.vue
@@ -0,0 +1,396 @@
+<template>
+    <div v-if="type.name === 'table'">
+        <table
+            class="w-full text-left divide-y table-auto xl:rtl:text-right filament-tables-table "
+            v-if="collection.total"
+        >
+            <thead class="bg-gray-100 border-t border-b">
+            <tr class="bg-tableHead text-main dark:bg-gray-800 dark:text-white">
+                <th
+                    class="w-4 px-4 py-4 whitespace-nowrap filament-tables-checkbox-cell"
+                >
+                    <input
+                        @change="bulkAll()"
+                        v-model="bulkValue"
+                        class="block border-gray-300 rounded shadow-sm text-primary-600 focus:border-primary-600 focus:ring focus:ring-primary-200 focus:ring-opacity-50"
+                        type="checkbox"
+                    />
+                </th>
+                <th class="filament-tables-header-cell" v-for="(item, key) in listRows" :key="key">
+                    <button
+                        v-if="item.sortable"
+                        @click.prevent="reload(1, 'orderBy', item.name)"
+                        :class="{
+                            'font-bold': orderBy == item.name,
+                        }"
+                        class="flex items-center w-full px-0 py-2 space-x-1 text-sm font-normal cursor-default text-main dark:text-white whitespace-nowrap rtl:space-x-reverse"
+                    >
+                        <span v-if="orderBy == item.name">
+                            <i class="bx bx-sort-a-z" v-if="desc"></i>
+                            <i class="bx bx-sort-z-a" v-else></i>
+                        </span>
+                        {{ item.label ? item.label : item.name  }}
+                    </button>
+                    <span v-else class="flex items-center w-full px-4 py-2 space-x-1 text-sm font-normal cursor-default dark:text-white whitespace-nowrap rtl:space-x-reverse">
+                        {{ item.label ? item.label : item.name }}
+                    </span>
+                </th>
+                <slot name="th"></slot>
+
+                <th class="w-5">
+                    <span class="text-sm font-normal">{{trans('global.actions')}}</span>
+                </th>
+            </tr>
+            </thead>
+            <tbody class="divide-y whitespace-nowrap">
+            <tr
+                class="hover:bg-primary-500/5 dark:hover:bg-primary-500/5 filament-tables-row dark:text-white"
+                v-for="(item, key) in collection.data"
+                :key="key"
+            >
+                <th
+                    class="w-4 px-4 whitespace-nowrap filament-tables-checkbox-cell rtl:text-right"
+                >
+                    <input
+                        @input="switchValue(item.id)"
+                        :checked="bulk[item.id]"
+                        class="block border-gray-300 rounded shadow-sm text-primary-600 focus:border-primary-600 focus:ring focus:ring-primary-200 focus:ring-opacity-50 table-row-checkbox"
+                        value="1"
+                        type="checkbox"
+                    />
+                </th>
+                    <td
+                        class="rtl:text-right text-14"
+                        v-for="(field, index) in listRows"
+                        :key="index"
+                    >
+                        <ViltText v-if="field.vue === 'ViltText.vue'" :row="field" v-model="item[field.name]" view="table"/>
+                        <ViltEmail v-if="field.vue === 'ViltEmail.vue'" :row="field" v-model="item[field.name]" view="table"/>
+                        <ViltTel v-if="field.vue === 'ViltTel.vue'" :row="field" v-model="item[field.name]" view="table"/>
+                        <ViltTextArea v-if="field.vue === 'ViltTextArea.vue'" :row="field" v-model="item[field.name]" view="table"/>
+                        <ViltNumber v-if="field.vue === 'ViltNumber.vue'" :row="field" v-model="item[field.name]" view="table"/>
+                        <ViltSelect v-if="field.vue === 'ViltSelect.vue'" :row="field" v-model="item[field.name]" view="table"/>
+                        <ViltSwitch v-if="field.vue === 'ViltSwitch.vue'" :row="field" v-model="item[field.name]" view="table"/>
+                        <ViltColor v-if="field.vue === 'ViltColor.vue'" :row="field" v-model="item[field.name]" view="table"/>
+                        <ViltDate v-if="field.vue === 'ViltDate.vue'" :row="field" v-model="item[field.name]" view="table"/>
+                        <ViltDateTime v-if="field.vue === 'ViltDateTime.vue'" :row="field" v-model="item[field.name]" view="table"/>
+                        <ViltTime v-if="field.vue === 'ViltTime.vue'" :row="field" v-model="item[field.name]" view="table"/>
+                        <ViltMedia v-if="field.vue === 'ViltMedia.vue'" @popUp="popUp" :row="field" v-model="item[field.name]" view="table"/>
+                        <ViltRepeater v-if="field.vue === 'ViltRepeater.vue'" :row="field" v-model="item[field.name]" view="table"/>
+                        <ViltSchema v-if="field.vue === 'ViltSchema.vue'" :row="field" v-model="item[field.name]" view="table"/>
+                        <ViltRich v-if="field.vue === 'ViltRich.vue'" :row="field" v-model="item[field.name]" view="table"/>
+                        <ViltRelation v-if="field.vue === 'ViltRelation.vue'" :row="field" v-model="item[field.name]" view="table"/>
+                        <ViltHasOne v-if="field.vue === 'ViltHasOne.vue'" :row="field" v-model="item[field.name]" view="table"/>
+
+                        <slot name="td"></slot>
+                    </td>
+
+                    <td
+                        v-if="
+                            $slots['actions'] ||
+                            $attrs.canView ||
+                            $attrs.canViewAny ||
+                            $attrs.canEdit ||
+                            $attrs.canDelete ||
+                            $attrs.canDeleteAny
+                        "
+                        class="px-4 py-3 whitespace-nowrap filament-tables-actions-cell"
+                        :class="{ sorting: orderBy == item.field }"
+                    >
+                        <div class="flex items-center justify-end gap-4 my-4">
+                            <slot name="actions" v-bind="item"></slot>
+                            <div>
+                                <a
+                                    v-if="$attrs.canView || $attrs.canViewAny"
+                                    @click.prevent="viewItem(item)"
+                                    class="inline-flex items-center justify-center text-sm font-normal filament-tables-link text-primary-700 hover:text-primary-500 filament-tables-link-action"
+                                    href="#"
+                                    role="button"
+                                >
+                                    <i class="bx bx-show text-[16px]"></i>
+                                    <div class="table_tooltip">
+                                        {{ trans("global.view") }}
+                                    </div>
+                                </a>
+                            </div>
+                            <div>
+                                <a
+                                    v-if="$attrs.canEdit"
+                                    @click.prevent="editItem(item)"
+                                    class="inline-flex items-center justify-center text-sm font-normal filament-tables-link text-warning-700 hover:text-warning-600 filament-tables-link-action"
+                                    href="#"
+                                    role="button"
+                                >
+                                    <i class="bx bx-edit text-[16px]"></i>
+                                    <div class="table_tooltip">
+                                        {{ trans("global.edit") }}
+                                    </div>
+                                </a>
+                            </div>
+                            <form>
+                                <button
+                                    v-if="
+                                        $attrs.canDelete || $attrs.canDeleteAny
+                                    "
+                                    @click.prevent="deleteItem(item)"
+                                    type="submit"
+                                    class="inline-flex items-center justify-center text-sm font-normal filament-tables-link text-danger-600 hover:text-danger-500 filament-tables-link-action"
+                                >
+                                    <svg
+                                        class="w-4 h-4"
+                                        xmlns="http://www.w3.org/2000/svg"
+                                        fill="none"
+                                        viewBox="0 0 24 24"
+                                        stroke-width="2"
+                                        stroke="currentColor"
+                                        aria-hidden="true"
+                                    >
+                                        <path
+                                            stroke-linecap="round"
+                                            stroke-linejoin="round"
+                                            d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+                                        ></path>
+                                    </svg>
+                                    <i class="bx bx-delete text-[16px]"></i>
+                                    <div class="table_tooltip">
+                                        {{ trans("global.delete") }}
+                                    </div>
+                                </button>
+                            </form>
+                        </div>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+        <div class="relative overflow-y-auto" v-else>
+            <div class="flex items-center justify-center p-4">
+                <div
+                    class="flex flex-col items-center justify-center flex-1 p-6 mx-auto space-y-6 text-center bg-white filament-tables-empty-state dark:bg-gray-900"
+                >
+                    <div
+                        class="flex items-center justify-center w-16 h-16 rounded-full bg-tableHead dark:bg-dark_bg"
+                    >
+                        <svg
+                            class="w-6 h-6"
+                            xmlns="http://www.w3.org/2000/svg"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            stroke-width="2"
+                            stroke="#3A9252"
+                            aria-hidden="true"
+                        >
+                            <path
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                d="M6 18L18 6M6 6l12 12"
+                            ></path>
+                        </svg>
+                    </div>
+
+                    <div class="max-w-xs space-y-1">
+                        <h2
+                            class="font-normal tracking-tight text-md filament-tables-empty-state-heading"
+                        >
+                            {{ trans("global.empty") }}
+                        </h2>
+
+                        <p
+                            class="text-sm font-normal text-gray-500 filament-tables-empty-state-description"
+                        ></p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+import { Link } from "@inertiajs/inertia-vue3";
+import ViltText from '$$/ViltText.vue'
+import ViltTel from '$$/ViltTel.vue'
+import ViltTextArea from "$$/ViltTextArea.vue";
+import ViltNumber from "$$/ViltNumber.vue";
+import ViltSelect from "$$/ViltSelect.vue";
+import ViltSwitch from "$$/ViltSwitch.vue";
+import ViltColor from "$$/ViltColor.vue";
+import ViltEmail from "$$/ViltEmail.vue";
+import ViltDate from "$$/ViltDate.vue";
+import ViltDateTime from "$$/ViltDateTime.vue";
+import ViltTime from "$$/ViltTime.vue";
+import ViltMedia from "$$/ViltMedia.vue";
+import ViltRepeater from "$$/ViltRepeater.vue";
+import ViltSchema from "$$/ViltSchema.vue";
+import ViltRich from "$$/ViltRich.vue";
+import ViltRelation from "$$/ViltRelation.vue";
+import ViltHasOne from "$$/ViltHasOne.vue";
+
+export default defineComponent({
+    components: {
+        Link,
+        ViltTextArea,
+        ViltText,
+        ViltTel,
+        ViltNumber,
+        ViltSelect,
+        ViltSwitch,
+        ViltColor,
+        ViltEmail,
+        ViltDate,
+        ViltDateTime,
+        ViltTime,
+        ViltMedia,
+        ViltRepeater,
+        ViltSchema,
+        ViltRich,
+        ViltRelation,
+        ViltHasOne,
+    },
+    props: {
+        rows: Array,
+        collection: Object,
+        url: String,
+        bulk: Object,
+        desc: Boolean,
+        orderBy: String,
+        type: Object,
+    },
+    data() {
+        return {
+            bulkValue: false
+
+        };
+    },
+    computed: {
+        listRows() {
+            let list = [];
+            for (let i = 0; i < this.rows.length; i++) {
+                if (this.rows[i].list) {
+                    list.push(this.rows[i]);
+                }
+            }
+
+            return list;
+        },
+        lang() {
+            return this.$page.props.data.trans;
+        },
+        getMessage() {
+            return this.$page.props.data.message;
+        },
+    },
+    methods: {
+        money(item) {
+            if (localStorage.getItem("lang")) {
+                let lang = JSON.parse(localStorage.getItem("lang"));
+                if (lang.id === "ar") {
+                    return item.toLocaleString("en-US", {
+                        style: "currency",
+                        currency: "EGP",
+                    });
+                } else if (lang.id === "en") {
+                    return item.toLocaleString("ar-EG", {
+                        style: "currency",
+                        currency: "EGP",
+                    });
+                }
+            }
+        },
+        trans(key) {
+            return this.lang[key] ? this.lang[key] : key;
+        },
+        bulkAll() {
+            this.$emit("all", this.bulkValue);
+        },
+        updateData(item) {
+            let form = this.$inertia.form(item);
+            form.submit("post", this.route(this.url + ".update", item.id), {
+                preserveScroll: true,
+                forceFormData: true,
+                onSuccess: () => {
+                    if (typeof this.getMessage === "object") {
+                        if (this.getMessage.type === "error") {
+                            this.$toast.error(this.getMessage.message, {
+                                position: "top",
+                                style: {
+                                    background: "rgba(210, 45, 61, .8)",
+                                    "border-radius": "0.25rem",
+                                },
+                            });
+                        } else if (this.getMessage.type === "success") {
+                            this.$toast.success(this.getMessage.message, {
+                                position: "top",
+                                style: {
+                                    background: "#7e3af2",
+                                    "border-radius": "0.25rem",
+                                },
+                            });
+                        }
+                    } else {
+                        this.$toast.success(this.getMessage, {
+                            position: "top",
+                            style: {
+                                background: "#7e3af2",
+                                "border-radius": "0.25rem",
+                            },
+                        });
+                    }
+                },
+            });
+        },
+        reload(index = 1, type = "main", orderBy = null, dir = false) {
+            let getDir = "";
+            if (dir) {
+                getDir = dir;
+            } else {
+                if (this.desc) {
+                    getDir = "desc";
+                } else {
+                    getDir = "asc";
+                }
+            }
+
+            let url = {};
+            url.page = index;
+            this.search ? (url.search = this.search) : "";
+            url.per_page = this.per_page;
+            orderBy ? (url.orderBy = orderBy) : "";
+            url.orderDirection = getDir;
+
+            this.$emit("reload", url);
+        },
+        viewItem(item) {
+            this.$emit("view", item);
+        },
+        editItem(item) {
+            this.$emit("edit", item);
+        },
+        deleteItem(item) {
+            this.$emit("delete", item);
+        },
+        transItem(item, key) {
+            if (
+                item[key].hasOwnProperty("ar") &&
+                item[key].hasOwnProperty("en")
+            ) {
+                if (localStorage.getItem("lang")) {
+                    let lang = JSON.parse(localStorage.getItem("lang"));
+                    if (lang.id === "ar") {
+                        return item[key].en;
+                    } else if (lang.id === "en") {
+                        return item[key].ar;
+                    }
+                }
+            } else {
+                return item[key];
+            }
+        },
+        popUp(images){
+            this.$emit('media',images)
+        },
+        switchValue(id){
+            this.$emit('switch', id)
+        }
+    },
+});
+</script>
diff --git a/src/Publish/resources/js/Components/BaseButton.vue b/src/Publish/resources/js/Components/BaseButton.vue
new file mode 100644
index 0000000..b18fc6a
--- /dev/null
+++ b/src/Publish/resources/js/Components/BaseButton.vue
@@ -0,0 +1,122 @@
+<script setup>
+import { computed } from "vue";
+import { Link } from '@inertiajs/inertia-vue3'
+import { getButtonColor } from "@/colors.js";
+import BaseIcon from "@/Components/BaseIcon.vue";
+
+const props = defineProps({
+  label: {
+    type: [String, Number],
+    default: null,
+  },
+  icon: {
+    type: String,
+    default: null,
+  },
+  href: {
+    type: String,
+    default: null,
+  },
+  target: {
+    type: String,
+    default: null,
+  },
+  routeName: {
+    type: String,
+    default: null
+  },
+  type: {
+    type: String,
+    default: null,
+  },
+  color: {
+    type: String,
+    default: "white",
+  },
+  as: {
+    type: String,
+    default: null,
+  },
+  small: Boolean,
+  outline: Boolean,
+  active: Boolean,
+  disabled: Boolean,
+  roundedFull: Boolean,
+});
+
+const is = computed(() => {
+  if (props.as) {
+    return props.as;
+  }
+
+  if (props.to) {
+    return Link;
+  }
+
+  if (props.href) {
+    return "a";
+  }
+
+  return "button";
+});
+
+const computedType = computed(() => {
+  if (is.value === "button") {
+    return props.type ?? "button";
+  }
+
+  return null;
+});
+
+const labelClass = computed(() =>
+  props.small && props.icon ? "px-1" : "px-2"
+);
+
+const componentClass = computed(() => {
+  const base = [
+    "inline-flex",
+    "cursor-pointer",
+    "justify-center",
+    "items-center",
+    "whitespace-nowrap",
+    "focus:outline-none",
+    "transition-colors",
+    "focus:ring",
+    "duration-150",
+    "border",
+    props.roundedFull ? "rounded-full" : "rounded",
+    getButtonColor(props.color, props.outline, !props.disabled, props.active),
+  ];
+
+  if (!props.label && props.icon) {
+    base.push("p-1");
+  } else if (props.small) {
+    base.push("text-sm", props.roundedFull ? "px-3 py-1" : "p-1");
+  } else {
+    base.push("py-2", props.roundedFull ? "px-6" : "px-3");
+  }
+
+  if (props.disabled) {
+    base.push(
+      "cursor-not-allowed",
+      props.outline ? "opacity-50" : "opacity-70"
+    );
+  }
+
+  return base;
+});
+</script>
+
+<template>
+  <component
+    :is="is"
+    :class="componentClass"
+    :href="routeName ? route(routeName) : href"
+    :type="computedType"
+    :target="target"
+    :disabled="disabled"
+  >
+    <BaseIcon v-if="icon" :path="icon" />
+    <span v-if="label" :class="labelClass">{{ label }}</span>
+  </component>
+</template>
diff --git a/src/Publish/resources/js/Components/BaseButtons.vue b/src/Publish/resources/js/Components/BaseButtons.vue
new file mode 100644
index 0000000..f9fef19
--- /dev/null
+++ b/src/Publish/resources/js/Components/BaseButtons.vue
@@ -0,0 +1,60 @@
+<script>
+import { h, defineComponent } from "vue";
+
+export default defineComponent({
+  name: "BaseButtons",
+  props: {
+    noWrap: Boolean,
+    type: {
+      type: String,
+      default: "justify-start",
+    },
+    classAddon: {
+      type: String,
+      default: "mr-3 last:mr-0 mb-3",
+    },
+    mb: {
+      type: String,
+      default: "-mb-3",
+    },
+  },
+  render() {
+    const hasSlot = this.$slots && this.$slots.default;
+
+    const parentClass = [
+      "flex",
+      "items-center",
+      this.type,
+      this.noWrap ? "flex-nowrap" : "flex-wrap",
+    ];
+
+    if (this.mb) {
+      parentClass.push(this.mb);
+    }
+
+    return h(
+      "div",
+      { class: parentClass },
+      hasSlot
+        ? this.$slots.default().map((element) => {
+            if (
+              element &&
+              element.children &&
+              typeof element.children === "object"
+            ) {
+              return h(
+                element,
+                {},
+                element.children.map((child) => {
+                  return h(child, { class: [this.classAddon] });
+                })
+              );
+            }
+
+            return h(element, { class: [this.classAddon] });
+          })
+        : null
+    );
+  },
+});
+</script>
diff --git a/src/Publish/resources/js/Components/BaseDivider.vue b/src/Publish/resources/js/Components/BaseDivider.vue
new file mode 100644
index 0000000..fd013a0
--- /dev/null
+++ b/src/Publish/resources/js/Components/BaseDivider.vue
@@ -0,0 +1,16 @@
+<script setup>
+const props = defineProps({
+  navBar: Boolean,
+});
+</script>
+
+<template>
+  <hr
+    :class="
+      props.navBar
+        ? 'hidden lg:block lg:my-0.5 dark:border-slate-700'
+        : 'my-6 -mx-6 dark:border-slate-800'
+    "
+    class="border-t border-gray-100"
+  />
+</template>
diff --git a/src/Publish/resources/js/Components/BaseIcon.vue b/src/Publish/resources/js/Components/BaseIcon.vue
new file mode 100644
index 0000000..b1967a2
--- /dev/null
+++ b/src/Publish/resources/js/Components/BaseIcon.vue
@@ -0,0 +1,35 @@
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+  path: {
+    type: String,
+    required: true,
+  },
+  w: {
+    type: String,
+    default: "w-6",
+  },
+  h: {
+    type: String,
+    default: "h-6",
+  },
+  size: {
+    type: [String, Number],
+    default: 16,
+  },
+});
+
+const spanClass = computed(
+  () => `inline-flex justify-center items-center ${props.w} ${props.h}`
+);
+</script>
+
+<template>
+  <span :class="spanClass">
+    <svg viewBox="0 0 24 24" :width="size" :height="size" class="inline-block">
+      <path fill="currentColor" :d="path" />
+    </svg>
+    <slot />
+  </span>
+</template>
diff --git a/src/Publish/resources/js/Components/BaseLevel.vue b/src/Publish/resources/js/Components/BaseLevel.vue
new file mode 100644
index 0000000..c275db1
--- /dev/null
+++ b/src/Publish/resources/js/Components/BaseLevel.vue
@@ -0,0 +1,40 @@
+<script>
+import { h, defineComponent } from "vue";
+
+export default defineComponent({
+  name: "BaseLevel",
+  props: {
+    mobile: Boolean,
+    type: {
+      type: String,
+      default: "justify-between",
+    },
+  },
+  render() {
+    const parentClass = [this.type, "items-center"];
+
+    const parentMobileClass = ["flex"];
+
+    const parentBaseClass = ["block", "md:flex"];
+
+    const childBaseClass = ["flex", "items-center", "justify-center"];
+
+    return h(
+      "div",
+      {
+        class: parentClass.concat(
+          this.mobile ? parentMobileClass : parentBaseClass
+        ),
+      },
+      this.$slots.default().map((element, index) => {
+        const childClass =
+          !this.mobile && this.$slots.default().length > index + 1
+            ? childBaseClass.concat(["mb-6", "md:mb-0"])
+            : childBaseClass;
+
+        return h("div", { class: childClass }, [element]);
+      })
+    );
+  },
+});
+</script>
diff --git a/src/Publish/resources/js/Components/Button.vue b/src/Publish/resources/js/Components/Button.vue
new file mode 100644
index 0000000..1599c23
--- /dev/null
+++ b/src/Publish/resources/js/Components/Button.vue
@@ -0,0 +1,14 @@
+<script setup>
+defineProps({
+    type: {
+        type: String,
+        default: 'submit',
+    },
+});
+</script>
+
+<template>
+    <button :type="type" class="inline-flex items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 active:bg-gray-900 focus:outline-none focus:border-gray-900 focus:ring focus:ring-gray-300 disabled:opacity-25 transition">
+        <slot />
+    </button>
+</template>
diff --git a/src/Publish/resources/js/Components/CardBox.vue b/src/Publish/resources/js/Components/CardBox.vue
new file mode 100644
index 0000000..00497fc
--- /dev/null
+++ b/src/Publish/resources/js/Components/CardBox.vue
@@ -0,0 +1,64 @@
+<script setup>
+import { computed, useSlots } from "vue";
+import CardBoxComponentBody from "@/Components/CardBoxComponentBody.vue";
+import CardBoxComponentFooter from "@/Components/CardBoxComponentFooter.vue";
+
+const props = defineProps({
+  rounded: {
+    type: String,
+    default: "rounded-2xl",
+  },
+  flex: {
+    type: String,
+    default: "flex-col",
+  },
+  hasComponentLayout: Boolean,
+  hasTable: Boolean,
+  isForm: Boolean,
+  isHoverable: Boolean,
+  isModal: Boolean,
+});
+
+const emit = defineEmits(["submit"]);
+
+const slots = useSlots();
+
+const hasFooterSlot = computed(() => slots.footer && !!slots.footer());
+
+const componentClass = computed(() => {
+  const base = [
+    props.rounded,
+    props.flex,
+    props.isModal ? "dark:bg-slate-900" : "dark:bg-slate-900/70",
+  ];
+
+  if (props.isHoverable) {
+    base.push("hover:shadow-lg transition-shadow duration-500");
+  }
+
+  return base;
+});
+
+const submit = (event) => {
+  emit("submit", event);
+};
+</script>
+
+<template>
+  <component
+    :is="isForm ? 'form' : 'div'"
+    :class="componentClass"
+    class="bg-white flex"
+    @submit="submit"
+  >
+    <slot v-if="hasComponentLayout" />
+    <template v-else>
+      <CardBoxComponentBody :no-padding="hasTable">
+        <slot />
+      </CardBoxComponentBody>
+      <CardBoxComponentFooter v-if="hasFooterSlot">
+        <slot name="footer" />
+      </CardBoxComponentFooter>
+    </template>
+  </component>
+</template>
diff --git a/src/Publish/resources/js/Components/CardBoxClient.vue b/src/Publish/resources/js/Components/CardBoxClient.vue
new file mode 100644
index 0000000..65c9af9
--- /dev/null
+++ b/src/Publish/resources/js/Components/CardBoxClient.vue
@@ -0,0 +1,84 @@
+<script setup>
+import { computed } from "vue";
+import { mdiTrendingDown, mdiTrendingUp, mdiTrendingNeutral } from "@mdi/js";
+import CardBox from "@/Components/CardBox.vue";
+import BaseLevel from "@/Components/BaseLevel.vue";
+import PillTag from "@/Components/PillTag.vue";
+import UserAvatar from "@/Components/UserAvatar.vue";
+
+const props = defineProps({
+  name: {
+    type: String,
+    required: true,
+  },
+  login: {
+    type: String,
+    required: true,
+  },
+  date: {
+    type: String,
+    required: true,
+  },
+  progress: {
+    type: Number,
+    default: 0,
+  },
+  text: {
+    type: String,
+    default: null,
+  },
+  type: {
+    type: String,
+    default: null,
+  },
+});
+
+const pillType = computed(() => {
+  if (props.type) {
+    return props.type;
+  }
+
+  if (props.progress) {
+    if (props.progress >= 60) {
+      return "success";
+    }
+    if (props.progress >= 40) {
+      return "warning";
+    }
+
+    return "danger";
+  }
+
+  return "info";
+});
+
+const pillIcon = computed(() => {
+  return {
+    success: mdiTrendingUp,
+    warning: mdiTrendingNeutral,
+    danger: mdiTrendingDown,
+    info: null,
+  }[pillType.value];
+});
+
+const pillText = computed(() => props.text ?? `${props.progress}%`);
+</script>
+
+<template>
+  <CardBox class="mb-6 last:mb-0" is-hoverable>
+    <BaseLevel>
+      <BaseLevel type="justify-start">
+        <UserAvatar class="w-12 h-12 mr-6" :username="name" />
+        <div class="text-center md:text-left overflow-hidden">
+          <h4 class="text-xl text-ellipsis">
+            {{ name }}
+          </h4>
+          <p class="text-gray-500 dark:text-slate-400">
+            {{ date }} @ {{ login }}
+          </p>
+        </div>
+      </BaseLevel>
+      <PillTag :color="pillType" :label="pillText" :icon="pillIcon" />
+    </BaseLevel>
+  </CardBox>
+</template>
diff --git a/src/Publish/resources/js/Components/CardBoxComponentBody.vue b/src/Publish/resources/js/Components/CardBoxComponentBody.vue
new file mode 100644
index 0000000..cb4cb94
--- /dev/null
+++ b/src/Publish/resources/js/Components/CardBoxComponentBody.vue
@@ -0,0 +1,11 @@
+<script setup>
+defineProps({
+  noPadding: Boolean,
+});
+</script>
+
+<template>
+  <div class="flex-1" :class="{ 'p-6': !noPadding }">
+    <slot />
+  </div>
+</template>
diff --git a/src/Publish/resources/js/Components/CardBoxComponentEmpty.vue b/src/Publish/resources/js/Components/CardBoxComponentEmpty.vue
new file mode 100644
index 0000000..f4c07a8
--- /dev/null
+++ b/src/Publish/resources/js/Components/CardBoxComponentEmpty.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="text-center py-24 text-gray-500 dark:text-slate-400">
+    <p>Nothing's here…</p>
+  </div>
+</template>
diff --git a/src/Publish/resources/js/Components/CardBoxComponentFooter.vue b/src/Publish/resources/js/Components/CardBoxComponentFooter.vue
new file mode 100644
index 0000000..71dd3ee
--- /dev/null
+++ b/src/Publish/resources/js/Components/CardBoxComponentFooter.vue
@@ -0,0 +1,5 @@
+<template>
+  <footer class="p-6">
+    <slot />
+  </footer>
+</template>
diff --git a/src/Publish/resources/js/Components/CardBoxComponentHeader.vue b/src/Publish/resources/js/Components/CardBoxComponentHeader.vue
new file mode 100644
index 0000000..320d476
--- /dev/null
+++ b/src/Publish/resources/js/Components/CardBoxComponentHeader.vue
@@ -0,0 +1,45 @@
+<script setup>
+import BaseIcon from "@/Components/BaseIcon.vue";
+
+defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+  icon: {
+    type: String,
+    default: null,
+  },
+  buttonIcon: {
+    type: String,
+    default: null,
+  },
+});
+
+const emit = defineEmits(["button-click"]);
+
+const buttonClick = (event) => {
+  emit("button-click", event);
+};
+</script>
+
+<template>
+  <header
+    class="flex items-stretch border-b border-gray-100 dark:border-slate-800"
+  >
+    <div
+      class="flex items-center py-3 grow font-bold"
+      :class="[icon ? 'px-4' : 'px-6']"
+    >
+      <BaseIcon v-if="icon" :path="icon" class="mr-3" />
+      {{ title }}
+    </div>
+    <button
+      v-if="buttonIcon"
+      class="flex items-center p-2 justify-center ring-blue-700 focus:ring"
+      @click="buttonClick"
+    >
+      <BaseIcon :path="buttonIcon" />
+    </button>
+  </header>
+</template>
diff --git a/src/Publish/resources/js/Components/CardBoxComponentTitle.vue b/src/Publish/resources/js/Components/CardBoxComponentTitle.vue
new file mode 100644
index 0000000..c5bce14
--- /dev/null
+++ b/src/Publish/resources/js/Components/CardBoxComponentTitle.vue
@@ -0,0 +1,17 @@
+<script setup>
+defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div class="flex items-center justify-between mb-3">
+    <h1 class="text-2xl">
+      {{ title }}
+    </h1>
+    <slot />
+  </div>
+</template>
diff --git a/src/Publish/resources/js/Components/CardBoxModal.vue b/src/Publish/resources/js/Components/CardBoxModal.vue
new file mode 100644
index 0000000..569df79
--- /dev/null
+++ b/src/Publish/resources/js/Components/CardBoxModal.vue
@@ -0,0 +1,89 @@
+<script setup>
+import { computed } from "vue";
+import { mdiClose } from "@mdi/js";
+import BaseButton from "@/Components/BaseButton.vue";
+import BaseButtons from "@/Components/BaseButtons.vue";
+import CardBox from "@/Components/CardBox.vue";
+import OverlayLayer from "@/Components/OverlayLayer.vue";
+import CardBoxComponentTitle from "@/Components/CardBoxComponentTitle.vue";
+
+const props = defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+  button: {
+    type: String,
+    default: "info",
+  },
+  buttonLabel: {
+    type: String,
+    default: "Done",
+  },
+  hasCancel: Boolean,
+  modelValue: {
+    type: [String, Number, Boolean],
+    default: null,
+  },
+});
+
+const emit = defineEmits(["update:modelValue", "cancel", "confirm"]);
+
+const value = computed({
+  get: () => props.modelValue,
+  set: (value) => emit("update:modelValue", value),
+});
+
+const confirmCancel = (mode) => {
+  value.value = false;
+  emit(mode);
+};
+
+const confirm = () => confirmCancel("confirm");
+
+const cancel = () => confirmCancel("cancel");
+
+window.addEventListener("keydown", (e) => {
+  if (e.key === "Escape" && value.value) {
+    cancel();
+  }
+});
+</script>
+
+<template>
+  <OverlayLayer v-show="value" @overlay-click="cancel">
+    <CardBox
+      v-show="value"
+      class="shadow-lg max-h-modal w-11/12 md:w-3/5 lg:w-2/5 xl:w-4/12 z-50"
+      is-modal
+    >
+      <CardBoxComponentTitle :title="title">
+        <BaseButton
+          v-if="hasCancel"
+          :icon="mdiClose"
+          color="whiteDark"
+          small
+          rounded-full
+          @click.prevent="cancel"
+        />
+      </CardBoxComponentTitle>
+
+      <div class="space-y-3">
+        <slot />
+      </div>
+
+      <template #footer>
+        <BaseButtons>
+          <BaseButton :label="buttonLabel" :color="button" @click="confirm" />
+          <BaseButton
+            v-if="hasCancel"
+            label="Cancel"
+            :color="button"
+            outline
+            @click="cancel"
+          />
+        </BaseButtons>
+      </template>
+    </CardBox>
+  </OverlayLayer>
+</template>
diff --git a/src/Publish/resources/js/Components/CardBoxTransaction.vue b/src/Publish/resources/js/Components/CardBoxTransaction.vue
new file mode 100644
index 0000000..9141537
--- /dev/null
+++ b/src/Publish/resources/js/Components/CardBoxTransaction.vue
@@ -0,0 +1,88 @@
+<script setup>
+import { computed } from "vue";
+import {
+  mdiCashMinus,
+  mdiCashPlus,
+  mdiReceipt,
+  mdiCreditCardOutline,
+} from "@mdi/js";
+import CardBox from "@/Components/CardBox.vue";
+import BaseLevel from "@/Components/BaseLevel.vue";
+import PillTag from "@/Components/PillTag.vue";
+import IconRounded from "@/Components/IconRounded.vue";
+
+const props = defineProps({
+  amount: {
+    type: Number,
+    required: true,
+  },
+  date: {
+    type: String,
+    required: true,
+  },
+  business: {
+    type: String,
+    required: true,
+  },
+  type: {
+    type: String,
+    required: true,
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  account: {
+    type: String,
+    required: true,
+  },
+});
+
+const icon = computed(() => {
+  if (props.type === "withdrawal") {
+    return {
+      icon: mdiCashMinus,
+      type: "danger",
+    };
+  } else if (props.type === "deposit") {
+    return {
+      icon: mdiCashPlus,
+      type: "success",
+    };
+  } else if (props.type === "invoice") {
+    return {
+      icon: mdiReceipt,
+      type: "warning",
+    };
+  }
+
+  return {
+    icon: mdiCreditCardOutline,
+    type: "info",
+  };
+});
+</script>
+
+<template>
+  <CardBox class="mb-6 last:mb-0" is-hoverable>
+    <BaseLevel>
+      <BaseLevel type="justify-start">
+        <IconRounded :icon="icon.icon" :color="icon.type" class="md:mr-6" />
+        <div class="text-center space-y-1 md:text-left md:mr-6">
+          <h4 class="text-xl">${{ amount }}</h4>
+          <p class="text-gray-500 dark:text-slate-400">
+            <b>{{ date }}</b> via {{ business }}
+          </p>
+        </div>
+      </BaseLevel>
+      <div class="text-center md:text-right space-y-2">
+        <p class="text-sm text-gray-500">
+          {{ name }}
+        </p>
+        <div>
+          <PillTag :color="icon.type" :label="type" small />
+        </div>
+      </div>
+    </BaseLevel>
+  </CardBox>
+</template>
diff --git a/src/Publish/resources/js/Components/CardBoxWidget.vue b/src/Publish/resources/js/Components/CardBoxWidget.vue
new file mode 100644
index 0000000..d620355
--- /dev/null
+++ b/src/Publish/resources/js/Components/CardBoxWidget.vue
@@ -0,0 +1,77 @@
+<script setup>
+import { mdiCog } from "@mdi/js";
+import CardBox from "@/Components/CardBox.vue";
+import NumberDynamic from "@/Components/NumberDynamic.vue";
+import BaseIcon from "@/Components/BaseIcon.vue";
+import BaseLevel from "@/Components/BaseLevel.vue";
+import PillTagTrend from "@/Components/PillTagTrend.vue";
+import BaseButton from "@/Components/BaseButton.vue";
+
+defineProps({
+  number: {
+    type: Number,
+    default: 0,
+  },
+  icon: {
+    type: String,
+    default: null,
+  },
+  prefix: {
+    type: String,
+    default: null,
+  },
+  suffix: {
+    type: String,
+    default: null,
+  },
+  label: {
+    type: String,
+    default: null,
+  },
+  color: {
+    type: String,
+    default: null,
+  },
+  trend: {
+    type: String,
+    default: null,
+  },
+  trendType: {
+    type: String,
+    default: null,
+  },
+});
+</script>
+
+<template>
+  <CardBox>
+    <BaseLevel v-if="trend" class="mb-3" mobile>
+      <PillTagTrend :trend="trend" :trend-type="trendType" small />
+      <BaseButton
+        :icon="mdiCog"
+        icon-w="w-4"
+        icon-h="h-4"
+        color="lightDark"
+        small
+      />
+    </BaseLevel>
+    <BaseLevel mobile>
+      <div>
+        <h3 class="text-lg leading-tight text-gray-500 dark:text-slate-400">
+          {{ label }}
+        </h3>
+        <h1 class="text-3xl leading-tight font-semibold">
+          <NumberDynamic :value="number" :prefix="prefix" :suffix="suffix" />
+        </h1>
+      </div>
+      <BaseIcon
+        v-if="icon"
+        :path="icon"
+        size="48"
+        w=""
+        h="h-16"
+        :class="color"
+      />
+    </BaseLevel>
+  </CardBox>
+</template>
diff --git a/src/Publish/resources/js/Components/Charts/LineChart.vue b/src/Publish/resources/js/Components/Charts/LineChart.vue
new file mode 100644
index 0000000..b7c24b5
--- /dev/null
+++ b/src/Publish/resources/js/Components/Charts/LineChart.vue
@@ -0,0 +1,69 @@
+<script setup>
+import { ref, watch, computed, onMounted } from "vue";
+import {
+  Chart,
+  LineElement,
+  PointElement,
+  LineController,
+  LinearScale,
+  CategoryScale,
+  Tooltip,
+} from "chart.js";
+
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true,
+  },
+});
+
+const root = ref(null);
+
+let chart;
+
+Chart.register(
+  LineElement,
+  PointElement,
+  LineController,
+  LinearScale,
+  CategoryScale,
+  Tooltip
+);
+
+onMounted(() => {
+  chart = new Chart(root.value, {
+    type: "line",
+    data: props.data,
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      scales: {
+        y: {
+          display: false,
+        },
+        x: {
+          display: true,
+        },
+      },
+      plugins: {
+        legend: {
+          display: false,
+        },
+      },
+    },
+  });
+});
+
+const chartData = computed(() => props.data);
+
+watch(chartData, (data) => {
+  if (chart) {
+    chart.data = data;
+    chart.update();
+  }
+});
+</script>
+
+<template>
+  <canvas ref="root" />
+</template>
diff --git a/src/Publish/resources/js/Components/Charts/chart.config.js b/src/Publish/resources/js/Components/Charts/chart.config.js
new file mode 100644
index 0000000..cfbb33c
--- /dev/null
+++ b/src/Publish/resources/js/Components/Charts/chart.config.js
@@ -0,0 +1,54 @@
+export const chartColors = {
+  default: {
+    primary: "#00D1B2",
+    info: "#209CEE",
+    danger: "#FF3860",
+  },
+};
+
+const randomChartData = (n) => {
+  const data = [];
+
+  for (let i = 0; i < n; i++) {
+    data.push(Math.round(Math.random() * 200));
+  }
+
+  return data;
+};
+
+const datasetObject = (color, points) => {
+  return {
+    fill: false,
+    borderColor: chartColors.default[color],
+    borderWidth: 2,
+    borderDash: [],
+    borderDashOffset: 0.0,
+    pointBackgroundColor: chartColors.default[color],
+    pointBorderColor: "rgba(255,255,255,0)",
+    pointHoverBackgroundColor: chartColors.default[color],
+    pointBorderWidth: 20,
+    pointHoverRadius: 4,
+    pointHoverBorderWidth: 15,
+    pointRadius: 4,
+    data: randomChartData(points),
+    tension: 0.5,
+    cubicInterpolationMode: "default",
+  };
+};
+
+export const sampleChartData = (points = 9) => {
+  const labels = [];
+
+  for (let i = 1; i <= points; i++) {
+    labels.push(`0${i}`);
+  }
+
+  return {
+    labels,
+    datasets: [
+      datasetObject("primary", points),
+      datasetObject("info", points),
+      datasetObject("danger", points),
+    ],
+  };
+};
diff --git a/src/Publish/resources/js/Components/Checkbox.vue b/src/Publish/resources/js/Components/Checkbox.vue
new file mode 100644
index 0000000..1fbc8c7
--- /dev/null
+++ b/src/Publish/resources/js/Components/Checkbox.vue
@@ -0,0 +1,36 @@
+<script setup>
+import { computed } from 'vue';
+
+const emit = defineEmits(['update:checked']);
+
+const props = defineProps({
+    checked: {
+        type: [Array, Boolean],
+        default: false,
+    },
+    value: {
+        type: String,
+        default: null,
+    },
+});
+
+const proxyChecked = computed({
+    get() {
+        return props.checked;
+    },
+
+    set(val) {
+        emit('update:checked', val);
+    },
+});
+</script>
+
+
+<template>
+    <input
+        v-model="proxyChecked"
+        type="checkbox"
+        :value="value"
+        class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
+    >
+</template>
diff --git a/src/Publish/resources/js/Components/ConfirmationModal.vue b/src/Publish/resources/js/Components/ConfirmationModal.vue
new file mode 100644
index 0000000..330a557
--- /dev/null
+++ b/src/Publish/resources/js/Components/ConfirmationModal.vue
@@ -0,0 +1,67 @@
+<script setup>
+import Modal from './Modal.vue';
+
+const emit = defineEmits(['close']);
+
+defineProps({
+    show: {
+        type: Boolean,
+        default: false,
+    },
+    maxWidth: {
+        type: String,
+        default: '2xl',
+    },
+    closeable: {
+        type: Boolean,
+        default: true,
+    },
+});
+
+const close = () => {
+    emit('close');
+};
+</script>
+
+<template>
+    <Modal
+        :show="show"
+        :max-width="maxWidth"
+        :closeable="closeable"
+        @close="close"
+    >
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+            <div class="sm:flex sm:items-start">
+                <div class="mx-auto shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
+                    <svg
+                        class="h-6 w-6 text-red-600"
+                        stroke="currentColor"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                    >
+                        <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+                        />
+                    </svg>
+                </div>
+
+                <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+                    <h3 class="text-lg">
+                        <slot name="title" />
+                    </h3>
+
+                    <div class="mt-2">
+                        <slot name="content" />
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="flex flex-row justify-end px-6 py-4 bg-gray-100 text-right">
+            <slot name="footer" />
+        </div>
+    </Modal>
+</template>
diff --git a/src/Publish/resources/js/Components/ConfirmsPassword.vue b/src/Publish/resources/js/Components/ConfirmsPassword.vue
new file mode 100644
index 0000000..3387aa0
--- /dev/null
+++ b/src/Publish/resources/js/Components/ConfirmsPassword.vue
@@ -0,0 +1,117 @@
+<script setup>
+import { ref, reactive, nextTick } from 'vue';
+import JetButton from './Button.vue';
+import JetDialogModal from './DialogModal.vue';
+import JetInput from './Input.vue';
+import JetInputError from './InputError.vue';
+import JetSecondaryButton from './SecondaryButton.vue';
+
+const emit = defineEmits(['confirmed']);
+
+defineProps({
+    title: {
+        type: String,
+        default: 'Confirm Password',
+    },
+    content: {
+        type: String,
+        default: 'For your security, please confirm your password to continue.',
+    },
+    button: {
+        type: String,
+        default: 'Confirm',
+    },
+});
+
+const confirmingPassword = ref(false);
+
+const form = reactive({
+    password: '',
+    error: '',
+    processing: false,
+});
+
+const passwordInput = ref(null);
+
+const startConfirmingPassword = () => {
+    axios.get(route('password.confirmation')).then(response => {
+        if (response.data.confirmed) {
+            emit('confirmed');
+        } else {
+            confirmingPassword.value = true;
+
+            setTimeout(() => passwordInput.value.focus(), 250);
+        }
+    });
+};
+
+const confirmPassword = () => {
+    form.processing = true;
+
+    axios.post(route('password.confirm'), {
+        password: form.password,
+    }).then(() => {
+        form.processing = false;
+
+        closeModal();
+        nextTick().then(() => emit('confirmed'));
+
+    }).catch(error => {
+        form.processing = false;
+        form.error = error.response.data.errors.password[0];
+        passwordInput.value.focus();
+    });
+};
+
+const closeModal = () => {
+    confirmingPassword.value = false;
+    form.password = '';
+    form.error = '';
+};
+</script>
+
+<template>
+    <span>
+        <span @click="startConfirmingPassword">
+            <slot />
+        </span>
+
+        <JetDialogModal :show="confirmingPassword" @close="closeModal">
+            <template #title>
+                {{ title }}
+            </template>
+
+            <template #content>
+                {{ content }}
+
+                <div class="mt-4">
+                    <JetInput
+                        ref="passwordInput"
+                        v-model="form.password"
+                        type="password"
+                        class="mt-1 block w-3/4"
+                        placeholder="Password"
+                        @keyup.enter="confirmPassword"
+                    />
+
+                    <JetInputError :message="form.error" class="mt-2" />
+                </div>
+            </template>
+
+            <template #footer>
+                <JetSecondaryButton @click="closeModal">
+                    Cancel
+                </JetSecondaryButton>
+
+                <JetButton
+                    class="ml-3"
+                    :class="{ 'opacity-25': form.processing }"
+                    :disabled="form.processing"
+                    @click="confirmPassword"
+                >
+                    {{ button }}
+                </JetButton>
+            </template>
+        </JetDialogModal>
+    </span>
+</template>
diff --git a/src/Publish/resources/js/Components/DangerButton.vue b/src/Publish/resources/js/Components/DangerButton.vue
new file mode 100644
index 0000000..276f3b3
--- /dev/null
+++ b/src/Publish/resources/js/Components/DangerButton.vue
@@ -0,0 +1,14 @@
+<script setup>
+defineProps({
+    type: {
+        type: String,
+        default: 'button',
+    },
+});
+</script>
+
+<template>
+    <button :type="type" class="inline-flex items-center justify-center px-4 py-2 bg-red-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-red-500 focus:outline-none focus:border-red-700 focus:ring focus:ring-red-200 active:bg-red-600 disabled:opacity-25 transition">
+        <slot />
+    </button>
+</template>
diff --git a/src/Publish/resources/js/Components/DialogModal.vue b/src/Publish/resources/js/Components/DialogModal.vue
new file mode 100644
index 0000000..80ebb3d
--- /dev/null
+++ b/src/Publish/resources/js/Components/DialogModal.vue
@@ -0,0 +1,47 @@
+<script setup>
+import Modal from './Modal.vue';
+
+const emit = defineEmits(['close']);
+
+defineProps({
+    show: {
+        type: Boolean,
+        default: false,
+    },
+    maxWidth: {
+        type: String,
+        default: '2xl',
+    },
+    closeable: {
+        type: Boolean,
+        default: true,
+    },
+});
+
+const close = () => {
+    emit('close');
+};
+</script>
+
+<template>
+    <Modal
+        :show="show"
+        :max-width="maxWidth"
+        :closeable="closeable"
+        @close="close"
+    >
+        <div class="px-6 py-4">
+            <div class="text-lg">
+                <slot name="title" />
+            </div>
+
+            <div class="mt-4">
+                <slot name="content" />
+            </div>
+        </div>
+
+        <div class="flex flex-row justify-end px-6 py-4 bg-gray-100 text-right">
+            <slot name="footer" />
+        </div>
+    </Modal>
+</template>
diff --git a/src/Publish/resources/js/Components/Dropdown.vue b/src/Publish/resources/js/Components/Dropdown.vue
new file mode 100644
index 0000000..e8a9bb3
--- /dev/null
+++ b/src/Publish/resources/js/Components/Dropdown.vue
@@ -0,0 +1,79 @@
+<script setup>
+import { computed, onMounted, onUnmounted, ref } from 'vue';
+
+const props = defineProps({
+    align: {
+        type: String,
+        default: 'right',
+    },
+    width: {
+        type: String,
+        default: '48',
+    },
+    contentClasses: {
+        type: Array,
+        default: () => ['py-1', 'bg-white'],
+    },
+});
+
+let open = ref(false);
+
+const closeOnEscape = (e) => {
+    if (open.value && e.key === 'Escape') {
+        open.value = false;
+    }
+};
+
+onMounted(() => document.addEventListener('keydown', closeOnEscape));
+onUnmounted(() => document.removeEventListener('keydown', closeOnEscape));
+
+const widthClass = computed(() => {
+    return {
+        '48': 'w-48',
+    }[props.width.toString()];
+});
+
+const alignmentClasses = computed(() => {
+    if (props.align === 'left') {
+        return 'origin-top-left left-0';
+    }
+
+    if (props.align === 'right') {
+        return 'origin-top-right right-0';
+    }
+
+    return 'origin-top';
+});
+</script>
+
+<template>
+    <div class="relative">
+        <div @click="open = ! open">
+            <slot name="trigger" />
+        </div>
+
+        <!-- Full Screen Dropdown Overlay -->
+        <div v-show="open" class="fixed inset-0 z-40" @click="open = false" />
+
+        <transition
+            enter-active-class="transition ease-out duration-200"
+            enter-from-class="transform opacity-0 scale-95"
+            enter-to-class="transform opacity-100 scale-100"
+            leave-active-class="transition ease-in duration-75"
+            leave-from-class="transform opacity-100 scale-100"
+            leave-to-class="transform opacity-0 scale-95"
+        >
+            <div
+                v-show="open"
+                class="absolute z-50 mt-2 rounded-md shadow-lg"
+                :class="[widthClass, alignmentClasses]"
+                style="display: none;"
+                @click="open = false"
+            >
+                <div class="rounded-md ring-1 ring-black ring-opacity-5" :class="contentClasses">
+                    <slot name="content" />
+                </div>
+            </div>
+        </transition>
+    </div>
+</template>
diff --git a/src/Publish/resources/js/Components/DropdownLink.vue b/src/Publish/resources/js/Components/DropdownLink.vue
new file mode 100644
index 0000000..84c9cb7
--- /dev/null
+++ b/src/Publish/resources/js/Components/DropdownLink.vue
@@ -0,0 +1,24 @@
+<script setup>
+import { Link } from '@inertiajs/inertia-vue3';
+
+defineProps({
+    href: String,
+    as: String,
+});
+</script>
+
+<template>
+    <div>
+        <button v-if="as == 'button'" type="submit" class="block w-full px-4 py-2 text-sm leading-5 text-gray-700 text-left hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition">
+            <slot />
+        </button>
+
+        <a v-else-if="as =='a'" :href="href" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition">
+            <slot />
+        </a>
+
+        <Link v-else :href="href" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition">
+            <slot />
+        </Link>
+    </div>
+</template>
diff --git a/src/Publish/resources/js/Components/FooterBar.vue b/src/Publish/resources/js/Components/FooterBar.vue
new file mode 100644
index 0000000..c5a5ddc
--- /dev/null
+++ b/src/Publish/resources/js/Components/FooterBar.vue
@@ -0,0 +1,22 @@
+<script setup>
+import { containerMaxW } from "@/config.js";
+import BaseLevel from "@/Components/BaseLevel.vue";
+import JustboilLogo from "@/Components/JustboilLogo.vue";
+
+const year = new Date().getFullYear();
+</script>
+
+<template>
+  <footer class="py-2 px-6" :class="containerMaxW">
+    <BaseLevel>
+      <div class="text-center md:text-left">
+        <b>
+            &copy;{{ year }},
+          <a href="https://www.queentechsolutions.net" target="_blank">QTS</a>.
+        </b>
+        <slot />
+      </div>
+
+    </BaseLevel>
+  </footer>
+</template>
diff --git a/src/Publish/resources/js/Components/FormCheckRadio.vue b/src/Publish/resources/js/Components/FormCheckRadio.vue
new file mode 100644
index 0000000..0db683f
--- /dev/null
+++ b/src/Publish/resources/js/Components/FormCheckRadio.vue
@@ -0,0 +1,53 @@
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+  name: {
+    type: String,
+    required: true,
+  },
+  type: {
+    type: String,
+    default: "checkbox",
+    validator: (value) => ["checkbox", "radio", "switch"].includes(value),
+  },
+  label: {
+    type: String,
+    default: null,
+  },
+  modelValue: {
+    type: [Array, String, Number, Boolean],
+    default: null,
+  },
+  inputValue: {
+    type: [String, Number, Boolean],
+    required: true,
+  },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const computedValue = computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    emit("update:modelValue", value);
+  },
+});
+
+const inputType = computed(() =>
+  props.type === "radio" ? "radio" : "checkbox"
+);
+</script>
+
+<template>
+  <label :class="type" class="mr-6 mb-3 last:mr-0">
+    <input
+      v-model="computedValue"
+      :type="inputType"
+      :name="name"
+      :value="inputValue"
+    />
+    <span class="check" />
+    <span class="pl-2">{{ label }}</span>
+  </label>
+</template>
diff --git a/src/Publish/resources/js/Components/FormCheckRadioGroup.vue b/src/Publish/resources/js/Components/FormCheckRadioGroup.vue
new file mode 100644
index 0000000..d03c04c
--- /dev/null
+++ b/src/Publish/resources/js/Components/FormCheckRadioGroup.vue
@@ -0,0 +1,56 @@
+<script setup>
+import { computed } from "vue";
+import FormCheckRadio from "@/Components/FormCheckRadio.vue";
+
+const props = defineProps({
+  options: {
+    type: Object,
+    default: () => {},
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  type: {
+    type: String,
+    default: "checkbox",
+    validator: (value) => ["checkbox", "radio", "switch"].includes(value),
+  },
+  componentClass: {
+    type: String,
+    default: null,
+  },
+  isColumn: Boolean,
+  modelValue: {
+    type: [Array, String, Number, Boolean],
+    default: null,
+  },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const computedValue = computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    emit("update:modelValue", value);
+  },
+});
+</script>
+
+<template>
+  <div
+    class="flex justify-start flex-wrap -mb-3"
+    :class="{ 'flex-col': isColumn }"
+  >
+    <FormCheckRadio
+      v-for="(value, key) in options"
+      :key="key"
+      v-model="computedValue"
+      :type="type"
+      :name="name"
+      :input-value="key"
+      :label="value"
+      :class="componentClass"
+    />
+  </div>
+</template>
diff --git a/src/Publish/resources/js/Components/FormControl.vue b/src/Publish/resources/js/Components/FormControl.vue
new file mode 100644
index 0000000..6e16c8f
--- /dev/null
+++ b/src/Publish/resources/js/Components/FormControl.vue
@@ -0,0 +1,165 @@
+<script setup>
+import { computed, ref, onMounted, onBeforeUnmount } from "vue";
+import { useMainStore } from "@/Stores/main";
+import FormControlIcon from "@/Components/FormControlIcon.vue";
+
+const props = defineProps({
+  name: {
+    type: String,
+    default: null,
+  },
+  id: {
+    type: String,
+    default: null,
+  },
+  autocomplete: {
+    type: String,
+    default: null,
+  },
+  placeholder: {
+    type: String,
+    default: null,
+  },
+  inputmode: {
+    type: String,
+    default: null,
+  },
+  icon: {
+    type: String,
+    default: null,
+  },
+  options: {
+    type: Array,
+    default: null,
+  },
+  type: {
+    type: String,
+    default: "text",
+  },
+  modelValue: {
+    type: [String, Number, Boolean, Array, Object],
+    default: "",
+  },
+  required: Boolean,
+  borderless: Boolean,
+  transparent: Boolean,
+  ctrlKFocus: Boolean,
+});
+
+const emit = defineEmits(["update:modelValue", "setRef"]);
+
+const computedValue = computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    emit("update:modelValue", value);
+  },
+});
+
+const inputElClass = computed(() => {
+  const base = [
+    "px-3 py-2 max-w-full focus:ring focus:outline-none border-gray-700 rounded w-full",
+    "dark:placeholder-gray-400",
+    computedType.value === "textarea" ? "h-24" : "h-12",
+    props.borderless ? "border-0" : "border",
+    props.transparent ? "bg-transparent" : "bg-white dark:bg-slate-800",
+  ];
+
+  if (props.icon) {
+    base.push("pl-10");
+  }
+
+  return base;
+});
+
+const computedType = computed(() => (props.options ? "select" : props.type));
+
+const controlIconH = computed(() =>
+  props.type === "textarea" ? "h-full" : "h-12"
+);
+
+const mainStore = useMainStore();
+
+const selectEl = ref(null);
+
+const textareaEl = ref(null);
+
+const inputEl = ref(null);
+
+onMounted(() => {
+  if (selectEl.value) {
+    emit("setRef", selectEl.value);
+  } else if (textareaEl.value) {
+    emit("setRef", textareaEl.value);
+  } else {
+    emit("setRef", inputEl.value);
+  }
+});
+
+if (props.ctrlKFocus) {
+  const fieldFocusHook = (e) => {
+    if (e.ctrlKey && e.key === "k") {
+      e.preventDefault();
+      inputEl.value.focus();
+    } else if (e.key === "Escape") {
+      inputEl.value.blur();
+    }
+  };
+
+  onMounted(() => {
+    if (!mainStore.isFieldFocusRegistered) {
+      window.addEventListener("keydown", fieldFocusHook);
+      mainStore.isFieldFocusRegistered = true;
+    } else {
+      // console.error('Duplicate field focus event')
+    }
+  });
+
+  onBeforeUnmount(() => {
+    window.removeEventListener("keydown", fieldFocusHook);
+    mainStore.isFieldFocusRegistered = false;
+  });
+}
+</script>
+
+<template>
+  <div class="relative">
+    <select
+      v-if="computedType === 'select'"
+      :id="id"
+      v-model="computedValue"
+      :name="name"
+      :class="inputElClass"
+    >
+      <option
+        v-for="option in options"
+        :key="option.id ?? option"
+        :value="option"
+      >
+        {{ option.label ?? option }}
+      </option>
+    </select>
+    <textarea
+      v-else-if="computedType === 'textarea'"
+      :id="id"
+      v-model="computedValue"
+      :class="inputElClass"
+      :name="name"
+      :placeholder="placeholder"
+      :required="required"
+    />
+    <input
+      v-else
+      :id="id"
+      ref="inputEl"
+      v-model="computedValue"
+      :name="name"
+      :inputmode="inputmode"
+      :autocomplete="autocomplete"
+      :required="required"
+      :placeholder="placeholder"
+      :type="computedType"
+      :class="inputElClass"
+    />
+    <FormControlIcon v-if="icon" :icon="icon" :h="controlIconH" />
+  </div>
+</template>
diff --git a/src/Publish/resources/js/Components/FormControlIcon.vue b/src/Publish/resources/js/Components/FormControlIcon.vue
new file mode 100644
index 0000000..41ea7b9
--- /dev/null
+++ b/src/Publish/resources/js/Components/FormControlIcon.vue
@@ -0,0 +1,23 @@
+<script setup>
+import BaseIcon from "@/Components/BaseIcon.vue";
+
+defineProps({
+  icon: {
+    type: String,
+    default: null,
+  },
+  h: {
+    type: String,
+    default: null,
+  },
+});
+</script>
+
+<template>
+  <BaseIcon
+    :path="icon"
+    w="w-10"
+    :h="h"
+    class="absolute top-0 left-0 z-10 pointer-events-none text-gray-500 dark:text-slate-400"
+  />
+</template>
diff --git a/src/Publish/resources/js/Components/FormField.vue b/src/Publish/resources/js/Components/FormField.vue
new file mode 100644
index 0000000..a8636b5
--- /dev/null
+++ b/src/Publish/resources/js/Components/FormField.vue
@@ -0,0 +1,49 @@
+<script setup>
+import { computed, useSlots } from "vue";
+
+defineProps({
+  label: {
+    type: String,
+    default: null,
+  },
+  labelFor: {
+    type: String,
+    default: null,
+  },
+  help: {
+    type: String,
+    default: null,
+  },
+});
+
+const slots = useSlots();
+
+const wrapperClass = computed(() => {
+  const base = [];
+  const slotsLength = slots.default().length;
+
+  if (slotsLength > 1) {
+    base.push("grid grid-cols-1 gap-3");
+  }
+
+  if (slotsLength === 2) {
+    base.push("md:grid-cols-2");
+  }
+
+  return base;
+});
+</script>
+
+<template>
+  <div class="mb-6 last:mb-0">
+    <label v-if="label" :for="labelFor" class="block font-bold mb-2">{{
+      label
+    }}</label>
+    <div :class="wrapperClass">
+      <slot />
+    </div>
+    <div v-if="help" class="text-xs text-gray-500 dark:text-slate-400 mt-1">
+      {{ help }}
+    </div>
+  </div>
+</template>
diff --git a/src/Publish/resources/js/Components/FormFilePicker.vue b/src/Publish/resources/js/Components/FormFilePicker.vue
new file mode 100644
index 0000000..774a893
--- /dev/null
+++ b/src/Publish/resources/js/Components/FormFilePicker.vue
@@ -0,0 +1,108 @@
+<script setup>
+import { mdiUpload } from "@mdi/js";
+import { computed, ref, watch } from "vue";
+import BaseButton from "@/Components/BaseButton.vue";
+
+const props = defineProps({
+  modelValue: {
+    type: [Object, File, Array],
+    default: null,
+  },
+  label: {
+    type: String,
+    default: "Upload",
+  },
+  icon: {
+    type: String,
+    default: mdiUpload,
+  },
+  accept: {
+    type: String,
+    default: null,
+  },
+  color: {
+    type: String,
+    default: "info",
+  },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const root = ref(null);
+
+const file = ref(props.modelValue);
+
+const modelValueProp = computed(() => props.modelValue);
+
+watch(modelValueProp, (value) => {
+  file.value = value;
+
+  if (!value) {
+    root.value.input.value = null;
+  }
+});
+
+const upload = (event) => {
+  const value = event.target.files || event.dataTransfer.files;
+
+  file.value = value[0];
+
+  emit("update:modelValue", file.value);
+
+  // Use this as an example for handling file uploads
+  // let formData = new FormData()
+  // formData.append('file', file.value)
+
+  // const mediaStoreRoute = `/your-route/`
+
+  // axios
+  //   .post(mediaStoreRoute, formData, {
+  //     headers: {
+  //       'Content-Type': 'multipart/form-data'
+  //     },
+  //     onUploadProgress: progressEvent
+  //   })
+  //   .then(r => {
+  //
+  //   })
+  //   .catch(err => {
+  //
+  //   })
+};
+
+// const uploadPercent = ref(0)
+//
+// const progressEvent = progressEvent => {
+//   uploadPercent.value = Math.round(
+//     (progressEvent.loaded * 100) / progressEvent.total
+//   )
+// }
+</script>
+
+<template>
+  <div class="flex items-stretch justify-start relative">
+    <label class="inline-flex">
+      <BaseButton
+        as="a"
+        :label="label"
+        :icon="icon"
+        :color="color"
+        :class="{ 'rounded-r-none': file }"
+      />
+      <input
+        ref="root"
+        type="file"
+        class="absolute top-0 left-0 w-full h-full opacity-0 outline-none cursor-pointer -z-1"
+        :accept="accept"
+        @input="upload"
+      />
+    </label>
+    <div v-if="file">
+      <span
+        class="inline-flex px-4 py-2 justify-center bg-gray-100 dark:bg-slate-800 border-gray-200 dark:border-slate-700 border rounded-r"
+      >
+        {{ file.name }}
+      </span>
+    </div>
+  </div>
+</template>
diff --git a/src/Publish/resources/js/Components/FormSection.vue b/src/Publish/resources/js/Components/FormSection.vue
new file mode 100644
index 0000000..543097f
--- /dev/null
+++ b/src/Publish/resources/js/Components/FormSection.vue
@@ -0,0 +1,38 @@
+<script setup>
+import { computed, useSlots } from 'vue';
+import JetSectionTitle from './SectionTitle.vue';
+
+defineEmits(['submitted']);
+
+const hasActions = computed(() => !! useSlots().actions);
+</script>
+
+<template>
+    <div class="md:grid md:grid-cols-3 md:gap-6">
+        <JetSectionTitle>
+            <template #title>
+                <slot name="title" />
+            </template>
+            <template #description>
+                <slot name="description" />
+            </template>
+        </JetSectionTitle>
+
+        <div class="mt-5 md:mt-0 md:col-span-2">
+            <form @submit.prevent="$emit('submitted')">
+                <div
+                    class="px-4 py-5 bg-white sm:p-6 shadow"
+                    :class="hasActions ? 'sm:rounded-tl-md sm:rounded-tr-md' : 'sm:rounded-md'"
+                >
+                    <div class="grid grid-cols-6 gap-6">
+                        <slot name="form" />
+                    </div>
+                </div>
+
+                <div v-if="hasActions" class="flex items-center justify-end px-4 py-3 bg-gray-50 text-right sm:px-6 shadow sm:rounded-bl-md sm:rounded-br-md">
+                    <slot name="actions" />
+                </div>
+            </form>
+        </div>
+    </div>
+</template>
diff --git a/src/Publish/resources/js/Components/FormValidationErrors.vue b/src/Publish/resources/js/Components/FormValidationErrors.vue
new file mode 100644
index 0000000..c509f09
--- /dev/null
+++ b/src/Publish/resources/js/Components/FormValidationErrors.vue
@@ -0,0 +1,17 @@
+<script setup>
+import { computed } from 'vue'
+import { usePage } from '@inertiajs/inertia-vue3'
+import NotificationBarInCard from '@/Components/NotificationBarInCard.vue'
+const errors = computed(() => usePage().props.value.errors)
+const hasErrors = computed(() => Object.keys(errors.value).length > 0)
+</script>
+
+<template>
+    <NotificationBarInCard
+        v-if="hasErrors"
+        color="danger"
+    >
+        <b>Whoops! Something went wrong.</b>
+        <span v-for="(error, key) in errors" :key="key">{{ error }}</span>
+    </NotificationBarInCard>
+</template>
diff --git a/src/Publish/resources/js/Components/IconRounded.vue b/src/Publish/resources/js/Components/IconRounded.vue
new file mode 100644
index 0000000..5a080f1
--- /dev/null
+++ b/src/Publish/resources/js/Components/IconRounded.vue
@@ -0,0 +1,39 @@
+<script setup>
+import { colorsText, colorsBgLight } from "@/colors.js";
+import BaseIcon from "@/Components/BaseIcon.vue";
+
+defineProps({
+  icon: {
+    type: String,
+    required: true,
+  },
+  color: {
+    type: String,
+    default: null,
+  },
+  w: {
+    type: String,
+    default: "w-12",
+  },
+  h: {
+    type: String,
+    default: "h-12",
+  },
+  bg: Boolean,
+});
+</script>
+
+<template>
+  <BaseIcon
+    :path="icon"
+    :w="w"
+    :h="h"
+    size="24"
+    class="rounded-full"
+    :class="
+      bg
+        ? colorsBgLight[color]
+        : [colorsText[color], 'bg-gray-50 dark:bg-slate-800']
+    "
+  />
+</template>
diff --git a/src/Publish/resources/js/Components/Input.vue b/src/Publish/resources/js/Components/Input.vue
new file mode 100644
index 0000000..84a0f9c
--- /dev/null
+++ b/src/Publish/resources/js/Components/Input.vue
@@ -0,0 +1,28 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+
+defineProps({
+    modelValue: String,
+});
+
+defineEmits(['update:modelValue']);
+
+const input = ref(null);
+
+onMounted(() => {
+    if (input.value.hasAttribute('autofocus')) {
+        input.value.focus();
+    }
+});
+
+defineExpose({ focus: () => input.value.focus() });
+</script>
+
+<template>
+    <input
+        ref="input"
+        class="border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm"
+        :value="modelValue"
+        @input="$emit('update:modelValue', $event.target.value)"
+    >
+</template>
diff --git a/src/Publish/resources/js/Components/InputError.vue b/src/Publish/resources/js/Components/InputError.vue
new file mode 100644
index 0000000..be06535
--- /dev/null
+++ b/src/Publish/resources/js/Components/InputError.vue
@@ -0,0 +1,13 @@
+<script setup>
+defineProps({
+    message: String,
+});
+</script>
+
+<template>
+    <div v-show="message">
+        <p class="text-sm text-red-600">
+            {{ message }}
+        </p>
+    </div>
+</template>
diff --git a/src/Publish/resources/js/Components/JustboilLogo.vue b/src/Publish/resources/js/Components/JustboilLogo.vue
new file mode 100644
index 0000000..c33b87f
--- /dev/null
+++ b/src/Publish/resources/js/Components/JustboilLogo.vue
@@ -0,0 +1,13 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="250"
+    height="100"
+    viewBox="0 0 250 100"
+  >
+    <path
+      fill="currentColor"
+      d="M1.157,85.323a16.088,16.088,0,0,0-.865,4.431,7.265,7.265,0,0,0,.432,2.594,10.327,10.327,0,0,0,3.242,5.62,15.634,15.634,0,0,0,2.7,1.189,9.272,9.272,0,0,0,2.378.216,12.225,12.225,0,0,0,7.241-2.486,20.191,20.191,0,0,0,5.188-4.431A34.34,34.34,0,0,0,26.014,85c1.081-2.053,1.837-4,2.81-5.728,0.756-2.162,1.729-4.107,2.378-6.052q1.135-2.918,1.945-5.512a5.088,5.088,0,0,1,.324-0.973,36.294,36.294,0,0,0,1.837-5.079L36.714,56.9c0.216-1.081.864-2.269,1.081-3.458,0.432-1.945.216-1.621,2.486-3.026a4.822,4.822,0,0,0,.865-0.54,23.217,23.217,0,0,0,2.81-1.513,76.926,76.926,0,0,1,13.077-5.62,21.183,21.183,0,0,1,5.836-.865,11.968,11.968,0,0,1,4.755.865,0.65,0.65,0,0,1,.432.108,1.372,1.372,0,0,0,.648.108,0.988,0.988,0,0,0,.757-0.324V42.418a1.742,1.742,0,0,0-.432-0.756,4.576,4.576,0,0,1-.757-0.54,8.575,8.575,0,0,1-1.729-.865,21.494,21.494,0,0,0-5.187-.757c-0.432,0-.973.108-1.405,0.108a28.926,28.926,0,0,0-6.593,1.081A74.714,74.714,0,0,0,43.63,44.8l-2.053.865-1.189.648H40.172a0.271,0.271,0,0,1-.324-0.216V45.984a1.839,1.839,0,0,1,.108-0.756c0.324-.865.432-1.945,0.756-3.026,0.432-1.4.757-3.026,1.081-4.539a14.662,14.662,0,0,1,.648-3.134c0.757-3.783,1.405-7.241,2.378-10.807a0.817,0.817,0,0,0-.108-0.432c0.108-2.486,1.081-4.755,1.189-7.241L46.981,10V9.563a0.65,0.65,0,0,1,.108-0.432c0.216-.648.108-1.3,0.324-1.945a0.837,0.837,0,0,1,.865-0.757h0.54a0.817,0.817,0,0,0,.432-0.108c2.594-.54,5.079-0.973,7.673-1.4a39.862,39.862,0,0,1,4-.54,1.371,1.371,0,0,1,.648-0.108,1.388,1.388,0,0,1,1.081.432H63.3a1.1,1.1,0,0,0,.973-0.648V3.619A2.055,2.055,0,0,0,63.192,1.89,5.67,5.67,0,0,0,62,1.133,3.05,3.05,0,0,0,60.382.7c-0.216,0-.432.108-0.756,0.108-1.837.324-3.458,0.54-5.4,0.757-1.4.216-2.81,0.54-4.647,0.757-0.216,0-.324.108-0.54,0.108a1.743,1.743,0,0,1-.973-0.324,4.314,4.314,0,0,0-1.405-.757H46.332a0.594,0.594,0,0,0-.54.324,2.05,2.05,0,0,0-.756.865,6.3,6.3,0,0,1-1.621,1.189L37.9,4.808c-3.458.648-6.7,1.621-10.375,2.27a93.654,93.654,0,0,0-14.049,4.971,5.662,5.662,0,0,1-2.81,1.081H10.56c-0.108,0-.108.108-0.216,0.324l0.324,0.865a1.891,1.891,0,0,0,1.513.756,2.109,2.109,0,0,0,.757-0.108c0.432,0,.649-0.108,1.081-0.108a7.346,7.346,0,0,0,1.837-.865c2.594-1.081,5.3-1.729,7.673-2.486,6.16-1.729,12.428-2.7,18.48-4.107,0,0.108.108,0.108,0.216,0.108A0.817,0.817,0,0,0,42.658,7.4a0.582,0.582,0,0,1,.432.432,0.974,0.974,0,0,1,.108.54c-0.757,1.945-.865,4.215-1.621,6.16a13.36,13.36,0,0,0-.216,1.945,4.644,4.644,0,0,0-.216,1.3L37.9,30.746c-0.648,3.891-1.837,7.781-2.594,11.672a54.359,54.359,0,0,0-2.053,6.809,5.5,5.5,0,0,1-2.27,2.81,84.863,84.863,0,0,0-7.133,5.079,28.533,28.533,0,0,0-3.134,2.27l-7.781,6.7a34.571,34.571,0,0,0-6.484,7.889A32.361,32.361,0,0,0,3.1,80.243,17.466,17.466,0,0,0,1.157,85.323ZM30.121,59.277a28.267,28.267,0,0,1-2.27,6.052,0.914,0.914,0,0,0-.216.648,53.766,53.766,0,0,1-2.161,5.836c-0.54,1.405-.973,2.81-1.513,4.107a2.055,2.055,0,0,1-.756,1.189,32.565,32.565,0,0,1-2.27,5.3,51.775,51.775,0,0,1-3.566,6.268,16.461,16.461,0,0,1-3.242,4,16.635,16.635,0,0,1-5.187,3.134,12.189,12.189,0,0,1-1.945.324c-0.216,0-.432.108-0.648,0.108a1.733,1.733,0,0,1-1.729-.865,7.489,7.489,0,0,1-.324-2.162V92.78A22.312,22.312,0,0,1,5.156,86.3a36.044,36.044,0,0,1,5.512-10.7,52.582,52.582,0,0,1,11.024-12,67.218,67.218,0,0,1,7.457-5.62,1.466,1.466,0,0,1,1.189-.648h0.216a3.884,3.884,0,0,0-.216,1.189C30.337,58.737,30.121,59.061,30.121,59.277ZM16.612,92.455l0.432-.648a1.37,1.37,0,0,1-.108.648,11.506,11.506,0,0,1,1.189-.973,0.582,0.582,0,0,1,.54-0.432,0.682,0.682,0,0,1-.54.54v0.432a11.246,11.246,0,0,1-3.35,2.918,1.942,1.942,0,0,0,.432-0.973,1.521,1.521,0,0,0,.756-0.648H15.639a2.956,2.956,0,0,0,.432-0.54ZM10.344,71.6A4.4,4.4,0,0,1,12.4,69.22a7.442,7.442,0,0,1-2.053,2.486,0.738,0.738,0,0,1-.324.54,25.146,25.146,0,0,0-1.837,2.81l-0.757.54A9.592,9.592,0,0,1,10.344,71.6ZM6.237,77.866A3.849,3.849,0,0,1,7.426,75.6,3.849,3.849,0,0,1,6.237,77.866ZM17.044,94.617a1.674,1.674,0,0,1,1.3-1.081A2.1,2.1,0,0,1,17.044,94.617Zm-1.3,1.189c0-.54.756-0.865,1.3-1.189A4.326,4.326,0,0,1,15.747,95.806ZM5.7,78.946a0.892,0.892,0,0,1,.54-1.081A2.545,2.545,0,0,1,5.7,78.946Zm-0.757.973a1.011,1.011,0,0,1,.54-0.756l-0.216.865H5.048ZM8.723,75.7a1.293,1.293,0,0,1,.757-0.756A1.048,1.048,0,0,1,8.723,75.7Zm4.107-5.3c0-.324.108-0.432,0.648-0.648A1.261,1.261,0,0,1,12.829,70.409ZM9.587,74.731a0.691,0.691,0,0,1,.54-0.756A1.378,1.378,0,0,1,9.587,74.731Zm1.621-2.378a0.8,0.8,0,0,1,.54-0.649A0.8,0.8,0,0,1,11.208,72.354Zm0.54-.649a0.971,0.971,0,0,1,.54-0.648A0.8,0.8,0,0,1,11.749,71.705ZM10.56,73.326a1.342,1.342,0,0,1,.649-0.865A3.543,3.543,0,0,1,10.56,73.326Zm2.27-2.918a0.8,0.8,0,0,1-.54.648A1.051,1.051,0,0,1,12.829,70.409Zm-2.7,3.566a0.889,0.889,0,0,1,.432-0.648A1.378,1.378,0,0,1,10.128,73.975Zm4.107-5.3a0.5,0.5,0,0,1-.324.54Zm-1.837.54a1.251,1.251,0,0,1,.54-0.757A2.5,2.5,0,0,0,12.4,69.22Zm1.4,0.108a0.378,0.378,0,0,1-.324.432A0.734,0.734,0,0,0,13.8,69.328Zm4.863,21.723a0.82,0.82,0,0,0,.216-0.432,0.106,0.106,0,0,0,.108.108ZM8.615,75.812c0-.108.108,0,0.108-0.108a1.089,1.089,0,0,0-.108.324V75.812Zm8.97,15.13a0.106,0.106,0,0,1,.108-0.108v0.108H17.585Zm74.9-43.121a0.993,0.993,0,0,1-.973,1.081l0.108-.108a0.65,0.65,0,0,1,.108-0.432l-2.486,2.162-4,5.079c-1.621,2.378-4.107,3.891-5.836,6.917a19.106,19.106,0,0,1-1.837,2.594,0.573,0.573,0,0,1-.324.216H77.134A0.579,0.579,0,0,1,76.81,64.9a1.37,1.37,0,0,1-.108-0.648c0-1.3,0-2.486.108-3.783a26.766,26.766,0,0,1,.324-2.918c0.216-1.729.648-3.566,0.973-5.3a8.931,8.931,0,0,1,.865-2.378,55.3,55.3,0,0,1,1.621-6.052c0.432-1.189.973-.648,1.189-1.837,0-.756-0.216-3.35-0.973-3.783a0.408,0.408,0,0,1-.216-0.216,1.116,1.116,0,0,0-.865-0.432H79.3c-0.108,0-.324-0.216-0.432-0.216a0.409,0.409,0,0,0-.216.216L78,37.23a0.4,0.4,0,0,0-.324-0.108,0.594,0.594,0,0,0-.54.324,0.981,0.981,0,0,0-.324.756,10.262,10.262,0,0,0-.973,2.27A14.922,14.922,0,0,1,74,43.606a64.6,64.6,0,0,1-4.215,5.728L66,55.278l-3.35,4.215c-0.54.757-1.189,1.3-1.621,1.945a0.365,0.365,0,0,1-.324.216,0.4,0.4,0,0,1-.324-0.108c0-.108-0.108-0.216-0.108-0.324V60.358c0.108-.756.324-1.621,0.54-2.486A46.539,46.539,0,0,1,62.544,51.5c0.54-1.837,1.3-3.675,1.945-5.4a12.714,12.714,0,0,0,.757-2.161,5.428,5.428,0,0,0,.216-1.3V42.526a0.465,0.465,0,0,0-.432-0.432,0.888,0.888,0,0,1-.648-0.432,0.573,0.573,0,0,0-.324-0.216,0.377,0.377,0,0,0-.216.108,0.4,0.4,0,0,1-.324.108,0.453,0.453,0,0,1-.432-0.324A5.829,5.829,0,0,0,62,41.013a1.225,1.225,0,0,0-.973.756,2.267,2.267,0,0,1-.648.865c-0.649,1.189-1.405,2.378-2.053,3.675a48.59,48.59,0,0,0-2.7,7.565,11.244,11.244,0,0,1-.648,2.378,15.617,15.617,0,0,0-.432,3.134c0,1.189.216,2.486,0.324,3.675A2.271,2.271,0,0,0,56.06,64.9a10.34,10.34,0,0,0,3.674,2.053,1.081,1.081,0,0,0,1.3,0,4.973,4.973,0,0,0,2.162-1.729,29.415,29.415,0,0,0,3.134-4.107c0.648-1.3,1.513-2.594,2.27-4a53.181,53.181,0,0,1,2.81-4.647,7.089,7.089,0,0,1,1.837-2.7c-0.108-.108.108-0.108,0.216-0.108,0,0,.216.216,0.108,0.216a9.151,9.151,0,0,1-.432,1.837,32.831,32.831,0,0,0-.648,7.241,38.578,38.578,0,0,0,.432,4.971,8.11,8.11,0,0,0,.973,2.7,2.551,2.551,0,0,0,.648.973,6.808,6.808,0,0,1,1.945.648,3.207,3.207,0,0,0,1.189.432,2.522,2.522,0,0,0,1.513-.757l0.756-.973c1.081-1.4,2.27-2.81,3.35-4,1.621-2.161,3.242-4.107,4.647-6.268,2.053-2.7,3.891-5.4,5.836-8l0.54-.648a7.434,7.434,0,0,0,.648-2.27c0-.324-0.108-0.54-0.324-0.54-0.54,0-1.621,1.189-2.053,2.269v0.216C92.589,47.821,92.589,47.821,92.481,47.821ZM57.573,57.764a8.528,8.528,0,0,0-.324,1.4l-0.108.108a0.216,0.216,0,0,1-.108-0.216V58.953a42.724,42.724,0,0,1,.757-4.971,40.971,40.971,0,0,1,2.486-6.592c0.756-1.513,1.4-3.134,2.27-4.755l0.324-.216s0.108-.108.108,0a0.377,0.377,0,0,1,.108.216,2.748,2.748,0,0,1-.216.756A67.442,67.442,0,0,0,57.573,57.764Zm17.508-4.647a2.107,2.107,0,0,1,.108-0.865,29.934,29.934,0,0,1,1.189-5.187c0.432-1.189.648-2.378,0.973-3.566a1.654,1.654,0,0,1,.54-0.756,3.777,3.777,0,0,1-.324,1.3c-0.756,2.594-1.513,5.3-2.053,7.889A1.625,1.625,0,0,1,75.081,53.117ZM63.733,43.39a0.408,0.408,0,0,0,.216-0.216h0.324v0.108l-0.432.864c-0.54,1.405-1.189,2.81-1.729,4.323-0.432.865-.54,1.729-0.865,2.486a2.864,2.864,0,0,1-.54.648l0.216-.757C61.68,48.362,62.761,45.768,63.733,43.39ZM56.492,57.332V56.467a31.437,31.437,0,0,1,2.27-7.241,0.916,0.916,0,0,1,.324-0.324,2.685,2.685,0,0,0-.108.865,48.5,48.5,0,0,0-2.27,7.025Zm4.323-5.3a1.1,1.1,0,0,1-.54.865,1.39,1.39,0,0,1,.432-1.3A0.817,0.817,0,0,1,60.815,52.036Zm28.1,0.865a1.415,1.415,0,0,1-.865.648A0.7,0.7,0,0,1,88.914,52.9Zm0.973-1.621a0.789,0.789,0,0,1,.648-0.756A0.789,0.789,0,0,1,89.887,51.28ZM72.811,46.632c0,0.108.108,0.324,0.108,0.432a0.453,0.453,0,0,1-.324.432c0-.108-0.108-0.324-0.108-0.432A0.453,0.453,0,0,1,72.811,46.632Zm-1.081,2.053a0.789,0.789,0,0,1-.648.757A0.927,0.927,0,0,1,71.731,48.686Zm-3.783,5.728a1.018,1.018,0,0,1-.432.973A0.873,0.873,0,0,1,67.948,54.414Zm7.025-.216a0.562,0.562,0,0,1-.216-0.432,0.988,0.988,0,0,1,.324-0.54v0.54A0.522,0.522,0,0,1,74.973,54.2Zm8.322,6.052a0.463,0.463,0,0,1-.54.54l-0.108-.108A0.992,0.992,0,0,1,83.295,60.25ZM73.244,46.416a0.962,0.962,0,0,1,.54-0.865A0.963,0.963,0,0,1,73.244,46.416ZM69.677,51.6v0.324a0.652,0.652,0,0,1-.432.54V52.252A0.888,0.888,0,0,1,69.677,51.6Zm20.75,0.54a0.59,0.59,0,0,1-.54.648A0.589,0.589,0,0,1,90.427,52.144ZM87.4,54.738a0.605,0.605,0,0,1-.54.648A0.654,0.654,0,0,1,87.4,54.738ZM70.974,49.767a0.724,0.724,0,0,1-.432.757A0.723,0.723,0,0,1,70.974,49.767Zm-1.729,2.7a0.813,0.813,0,0,1-.54.757A0.813,0.813,0,0,1,69.245,52.468Zm-1.081,3.566a0.724,0.724,0,0,1,.432-0.757A0.724,0.724,0,0,1,68.164,56.035Zm18.373-.108a0.816,0.816,0,0,1-.432.757V56.467A0.582,0.582,0,0,1,86.537,55.927ZM90.968,50.2a0.4,0.4,0,0,1-.108-0.324,0.583,0.583,0,0,1,.432-0.432A1.612,1.612,0,0,1,90.968,50.2Zm-1.4,1.405a0.4,0.4,0,0,1,.108.324,0.453,0.453,0,0,1-.324.432A0.912,0.912,0,0,1,89.563,51.6ZM69.677,53.549a0.65,0.65,0,0,1,.432-0.757A0.816,0.816,0,0,1,69.677,53.549Zm-1.945,3.458a0.817,0.817,0,0,1,.324-0.865v0.216A0.934,0.934,0,0,1,67.732,57.007Zm2.486-4.323a0.659,0.659,0,0,1,.324-0.756v0.216A0.594,0.594,0,0,1,70.218,52.684ZM56.492,57.332c0,0.216.108,0.324,0.108,0.54a0.825,0.825,0,0,1-.216.54v-0.54A0.974,0.974,0,0,1,56.492,57.332Zm18.7-8.214a0.817,0.817,0,0,1,.108.432,0.4,0.4,0,0,1-.108.324,1.825,1.825,0,0,1-.216-0.54C74.973,49.226,74.973,49.226,75.189,49.118Zm-0.108.865a0.8,0.8,0,0,1-.324.757A0.659,0.659,0,0,1,75.081,49.983Zm10.051,7.889c0,0.216-.108.324-0.54,0.54A0.579,0.579,0,0,1,85.132,57.872ZM59.626,47.713a0.653,0.653,0,0,1-.324.648A0.77,0.77,0,0,1,59.626,47.713Zm0.432,6.052a1.164,1.164,0,0,1,.216-0.865A1.164,1.164,0,0,1,60.059,53.765ZM76.27,45.011a1.029,1.029,0,0,1-.216.756A0.809,0.809,0,0,1,76.27,45.011ZM89.347,52.36a0.718,0.718,0,0,1-.432.54A0.652,0.652,0,0,1,89.347,52.36Zm-30.044-4a0.514,0.514,0,0,1-.216.54A0.514,0.514,0,0,1,59.3,48.362Zm15.887,0.324,0.108-.108c0.108,0,.108.108,0.108,0.216l-0.216.324V48.686Zm-15.563-1.3a0.216,0.216,0,0,1,.108-0.216c0,0.108.108,0.108,0.108,0.216a0.573,0.573,0,0,1-.216.324V47.389Zm15.995-.432V46.849l0.324,0.216-0.216.324A0.522,0.522,0,0,0,75.621,46.957Zm8.862,11.456v0.216c0,0.108,0,.108-0.216.216A0.432,0.432,0,0,1,84.483,58.412Zm-12.212-10.7a0.913,0.913,0,0,1-.216.648A0.914,0.914,0,0,1,72.271,47.713ZM59.735,55.6a0.106,0.106,0,0,0-.108.108c-0.108,0-.108-0.108-0.108-0.216a0.409,0.409,0,0,1,.216-0.216V55.6Zm26.8,0.216a0.65,0.65,0,0,1,.108-0.432c0,0.108.108,0.216,0.108,0.324S86.645,55.819,86.537,55.819ZM70.218,50.847a0.826,0.826,0,0,1-.216.54A0.514,0.514,0,0,1,70.218,50.847Zm4.539-.108v0.324c0,0.108-.108.108-0.108,0.216a0.106,0.106,0,0,1-.108-0.108Zm12.969,3.566a0.422,0.422,0,0,1-.216.432A0.432,0.432,0,0,1,87.726,54.306ZM59.735,46.957a0.573,0.573,0,0,1,.216-0.324,0.825,0.825,0,0,1-.216.54V46.957Zm8.97,8.322V54.954a0.4,0.4,0,0,1,.108-0.324v0.216A0.522,0.522,0,0,1,68.7,55.278Zm6.052-.973v0.648a0.377,0.377,0,0,1-.108-0.216V54.63A1.089,1.089,0,0,1,74.757,54.306Zm18.481-5.944a0.671,0.671,0,0,1-.324.432A0.453,0.453,0,0,1,93.237,48.362Zm-4.215,5.62a0.365,0.365,0,0,0,.216-0.324V53.549a0.377,0.377,0,0,1,.108.216A0.271,0.271,0,0,1,89.022,53.981Zm2.269-4.539a0.635,0.635,0,0,1,.216-0.54A0.825,0.825,0,0,1,91.292,49.442ZM68.38,53.549a0.81,0.81,0,0,1-.108.54V53.873A0.4,0.4,0,0,1,68.38,53.549Zm24.1-5.728a0.106,0.106,0,0,0-.108-0.108l-0.324.324Zm-32.422,6.16a0.106,0.106,0,0,0-.108.108c0-.108-0.108-0.108-0.108-0.216,0.108,0,.108-0.108.216-0.108v0.216Zm-3.675,4.971a0.106,0.106,0,0,1-.108-0.108V58.737a0.377,0.377,0,0,1,.108-0.216v0.432Zm31.666-5.4v0.216a0.4,0.4,0,0,1-.108.324A1.447,1.447,0,0,1,88.05,53.549ZM86.1,56.683a0.917,0.917,0,0,0-.324.324A0.278,0.278,0,0,1,86.1,56.683ZM75.729,47.389v0.216l-0.108.108V47.5A0.106,0.106,0,0,1,75.729,47.389Zm16.319,0.648a0.462,0.462,0,0,0-.324.324ZM89.887,51.28a0.573,0.573,0,0,1-.216.324A0.3,0.3,0,0,1,89.887,51.28ZM85.24,57.764c0-.108-0.108-0.108-0.108-0.216s0.108-.108.108-0.216v0.432Zm7.241-8.646a0.365,0.365,0,0,1-.216.324A0.573,0.573,0,0,1,92.481,49.118ZM69.137,54.306a0.65,0.65,0,0,1,.108-0.432A0.65,0.65,0,0,1,69.137,54.306Zm21.4-3.782a0.271,0.271,0,0,1,.324-0.216Zm-6.7,8.97V59.385a0.216,0.216,0,0,1,.108-0.216A0.4,0.4,0,0,1,83.835,59.493Zm-2.053,1.621a1.555,1.555,0,0,0-.216.324A0.3,0.3,0,0,1,81.782,61.114ZM91.832,50.2a0.365,0.365,0,0,1-.324.216A1.558,1.558,0,0,0,91.832,50.2Zm-5.187,6.917a1.555,1.555,0,0,0-.216.324A0.3,0.3,0,0,1,86.645,57.115ZM59.735,55.17V54.954a0.106,0.106,0,0,1,.108.108Zm16.319-9.4a0.4,0.4,0,0,0-.108.324,0.106,0.106,0,0,0-.108-0.108Zm1.837-3.242L78,42.634l-0.108.108C77.891,42.634,77.783,42.526,77.891,42.526ZM87.726,55.6a0.573,0.573,0,0,1,.216-0.324A0.573,0.573,0,0,1,87.726,55.6Zm3.026-4.323a0.3,0.3,0,0,1-.216.324A0.573,0.573,0,0,0,90.752,51.28Zm-24.1,5.188a1.089,1.089,0,0,1-.108.324A0.4,0.4,0,0,1,66.651,56.467Zm26.8-8.646a1.089,1.089,0,0,1-.108.324A0.4,0.4,0,0,1,93.453,47.821Zm-4.431,6.268c0,0.108-.108.216-0.108,0.324A0.4,0.4,0,0,1,89.022,54.089Zm-14.806-.756,0.108-.108v0.108H74.216ZM92.589,48.9c0,0.108,0,.108-0.108.108Zm-19.345-.865a0.533,0.533,0,0,1,.108-0.324Zm15.022,6.7c0,0.108-.108.216-0.108,0.324A0.4,0.4,0,0,1,88.266,54.738ZM92.589,47.5a0.335,0.335,0,0,1-.216.108ZM99.83,43.39c2.162-3.026,4.54-4.323,6.377-4.323a2.407,2.407,0,0,1,2.594,2.053,0.255,0.255,0,0,0,.324.216h0.108v0.108c-0.649,1.621-1.189,1.837-1.3,3.026a0.4,0.4,0,0,0-.108.324c0,0.108,0,.216.108,0.216a0.216,0.216,0,0,1,.108.216,2.773,2.773,0,0,1-.216.54c0,0.108.108,0.216,0.432,0.216a3.414,3.414,0,0,0,2.918-1.3,14.53,14.53,0,0,0,1.513-4.647V39.716c0-2.7-4.107-4.215-6.268-4.539h-2.486c-2.918.324-5.3,1.837-7.889,4A21.573,21.573,0,0,0,91.4,45.552c-0.324.757-.432,1.4-0.757,2.161l-0.324,1.081a1.839,1.839,0,0,0,.108.757v0.865a6.294,6.294,0,0,0,.324,2.053,8.479,8.479,0,0,0,1.189,1.945,14.445,14.445,0,0,0,2.81,3.35c2.27,2.27,2.918,4.323,2.918,7.565v1.729c-0.216.865-1.3,1.081-1.837,1.837-0.973.973-3.891,1.945-4.863,2.918a15.6,15.6,0,0,0-2.053,4A2.89,2.89,0,0,0,92.048,78.3a7.345,7.345,0,0,0,2.053-.324c0.216,0,.432.108,0.648,0.108a1.054,1.054,0,0,0,.973-0.432,11.365,11.365,0,0,0,4.431-4.323,11.49,11.49,0,0,0,1.945-3.783l0.108-.865a1.975,1.975,0,0,1,.216-0.973c0.216-.756,1.189-0.756,1.837-1.3a0.462,0.462,0,0,0,.325-0.324V65.977c0-.108-0.108,0,0-0.108,2.269-1.837,4.215-2.378,6.484-4.215a22.97,22.97,0,0,1,5.836-4.107c0.432-.108.432-0.432,0.865-0.54a0.671,0.671,0,0,0,.324-0.432,4.683,4.683,0,0,1-.108-0.54,2.023,2.023,0,0,0-1.513-.54,2.381,2.381,0,0,0-.865.108,16,16,0,0,0-5.3,3.134c-2.162,1.513-4.323,2.27-6.161,4.107a4.723,4.723,0,0,0-.864.757c-0.108,0-.216.108-0.324,0.108-0.217,0-.217-0.108-0.325-0.432,0-.108-0.108-0.324-0.108-0.432a23.553,23.553,0,0,0-3.134-5.62,9.522,9.522,0,0,1-2.378-2.7c-0.432-.432-0.432-0.973-0.865-1.513a3.327,3.327,0,0,1-.324-1.4V51.171c0-.324.216-0.648,0.216-0.973A16.29,16.29,0,0,1,99.83,43.39Zm-3.566-.324c-0.432,1.405-1.513,2.378-2.486,3.891l0.108-.973c0.54-.865,1.4-1.513,1.837-2.378A2.545,2.545,0,0,1,96.263,43.066Zm0.865,30.585c-0.108,0-.216.324-0.324,0.324a0.335,0.335,0,0,1-.216.108H96.479l0.216-.108a1.292,1.292,0,0,1,.432-0.865,0.378,0.378,0,0,1,.108-0.216,0.807,0.807,0,0,1,.324.324C97.128,73.543,97.128,73.543,97.128,73.651Zm-0.865-28.1a4.259,4.259,0,0,1,.973-1.189,4.539,4.539,0,0,1-.756,1.3A0.334,0.334,0,0,1,96.263,45.552ZM91.724,73.11V73H92.8a5.74,5.74,0,0,0,1.513-.108,4.238,4.238,0,0,1-1.837.216H91.724Zm5.62-29.18c0,0.108.108,0.216,0.108,0.324a0.106,0.106,0,0,1-.108.108H97.236C97.236,44.039,97.236,43.931,97.344,43.931Zm-4.215,1.837a0.106,0.106,0,0,1,.108-0.108Zm53.712-23.992a1.051,1.051,0,0,1-.648-0.54,93.777,93.777,0,0,0-14.806,2.378,6.651,6.651,0,0,1-1.405.108h-0.216a0.287,0.287,0,0,1-.325-0.324V23.072c0.541-1.3.649-1.945,1.081-3.242l2.378-7.349a12.439,12.439,0,0,0,.648-1.837V10.32a0.176,0.176,0,0,0-.216-0.216,1.439,1.439,0,0,1-.324-0.54,0.271,0.271,0,0,0-.216-0.324,0.572,0.572,0,0,0-.324.216,1.284,1.284,0,0,1-.541.54,1.439,1.439,0,0,1-.54.324,7.571,7.571,0,0,1,.864-1.081,0.377,0.377,0,0,1,.108-0.216l-0.108-.108c-0.108,0-.108.108-0.216,0.108h-0.216V9.131a0.572,0.572,0,0,0-.324.216,0.917,0.917,0,0,1,.324-0.324,1.166,1.166,0,0,0-.756-0.324h-0.217a1.438,1.438,0,0,0-.972.648,8.951,8.951,0,0,0-1.189,1.621,25.118,25.118,0,0,0-2.053,4.215c-1.405,3.026-1.946,5.62-3.135,8.538-0.648,1.945-5.619,2.486-7.565,3.026a18.5,18.5,0,0,0-2.918.973,1.133,1.133,0,0,0-.324.432,0.562,0.562,0,0,0-.216.432V28.8a1.827,1.827,0,0,1,.324.648,1.636,1.636,0,0,0,1.513.757h0.432l6.809-1.189h0.108c0.216,0,.324.108,0.324,0.432v0.216a44.291,44.291,0,0,1-1.08,5.188c0,0.54-.433,1.729-0.433,2.27a2.66,2.66,0,0,1-.432,1.189,3.52,3.52,0,0,1-.432,1.513v0.324a10.159,10.159,0,0,1-.865,3.458v0.108a0.378,0.378,0,0,1-.108.216,0.409,0.409,0,0,1,.216.216L118.2,49.01v0.108l-0.541,2.81c-0.216,2.161-1.3,7.781-1.837,10.159,0,0.324-.108.757-0.108,1.189l-0.756,5.3a4.057,4.057,0,0,0-.108,1.081v1.3a26.545,26.545,0,0,0-.325,2.918v0.216c0,1.081-.324,4.647-0.324,6.917a3.277,3.277,0,0,0,.216,1.837,1.374,1.374,0,0,1,.757.432,1.132,1.132,0,0,0,.432.324,4.517,4.517,0,0,1,1.081.432c0.108,0.324,1.3-6.809,1.513-7.025a1.227,1.227,0,0,0,.324-0.865V75.92c0-1.189.649-2.378,0.865-3.566a23.153,23.153,0,0,0,.432-3.458V68.679a1.537,1.537,0,0,1,.216-0.648,6.65,6.65,0,0,0,.108-1.513c0-.324.216-0.648,0.216-0.973,0.433-2.81,1.729-8.862,2.162-11.564,0.324-1.621.54-3.134,0.972-4.755,0.541-1.945.757-3.891,1.3-5.836a1.84,1.84,0,0,1,.108-0.756l1.3-5.3c0.433-1.513,1.405-6.917,1.729-8.43a2.766,2.766,0,0,0,.541-1.3,1.047,1.047,0,0,1,.864-0.756,3.892,3.892,0,0,1,1.189-.216l7.673-1.945c0.865-.216,8-1.729,8.538-2.27a0.579,0.579,0,0,0,.324-0.432A0.232,0.232,0,0,0,146.841,21.776Zm-11.564,28.1c-0.216,1.189-.865,2.486-0.973,3.458a15.642,15.642,0,0,1-.54,3.242,28.989,28.989,0,0,0-.757,2.918,8.74,8.74,0,0,1-.432,2.7,17.011,17.011,0,0,1-.757,2.161c0,0.216.108,0.432,0.108,0.648a7.774,7.774,0,0,1-.432,2.053,6.166,6.166,0,0,1-.108,1.4,6.652,6.652,0,0,0-.108,1.405v0.54a52.5,52.5,0,0,0-1.189,5.3,0.818,0.818,0,0,0-.108.432l-0.864,5.079a8.663,8.663,0,0,0-.109,1.729,1.069,1.069,0,0,0,1.081.865h0.216a0.771,0.771,0,0,1,.649.324c0,0.324.108,0.54,0.324,0.54,0.108,0,.216-0.108.324-0.108s0.216,0,.216.108a1.651,1.651,0,0,0,.649.432h0.108a1.079,1.079,0,0,0,.432-0.54,5.19,5.19,0,0,0,.541-1.189,3.437,3.437,0,0,0,.216-1.405c0.432-1.945.648-3.783,1.188-5.728V76.028a16.728,16.728,0,0,1,.649-3.35c0-.432.324-0.973,0.324-1.405V71.057a18.892,18.892,0,0,1,1.081-4.755l0.648-2.7a9.464,9.464,0,0,0,.216-1.729c0.973-2.918,1.622-5.944,2.486-9.186a3.648,3.648,0,0,0,.432-1.3,9.649,9.649,0,0,1,.325-2.378l2.161-8c0.216-.865.649-1.945,0.865-2.918,0.108-.973.324-1.945,0.54-3.026,0.108-1.081.865-1.837,1.3-2.81a60.218,60.218,0,0,1,5.3-6.484,11.7,11.7,0,0,1,2.269-2.378,31.3,31.3,0,0,1,5.4-5.3c0.972-.973,2.161-1.729,3.35-2.7a28.726,28.726,0,0,1,6.484-3.458,14.224,14.224,0,0,1,2.486-.54h0.216a0.755,0.755,0,0,1,.865.649l-0.216,2.378a17.965,17.965,0,0,1-1.729,4,42.279,42.279,0,0,1-5.4,8.322c-2.918,3.35-5.62,6.7-8.862,9.835a22,22,0,0,0-2.7,2.81c-1.837,1.729-3.458,3.566-5.3,5.3l-1.405,1.729a1.19,1.19,0,0,0-.324.648,1.143,1.143,0,0,0,.433.648,1.334,1.334,0,0,1,.864,1.189,0.843,0.843,0,0,1,.432.432,0.773,0.773,0,0,0,.649.324,3.336,3.336,0,0,0,.864-0.216c0.541-.108.865-0.54,1.622-0.757a24.679,24.679,0,0,1,7.889-3.566,12.214,12.214,0,0,1,4.863-.973,11.1,11.1,0,0,1,1.837.108c2.054,0.432,2.378.973,3.027,3.026a25.658,25.658,0,0,1,.324,5.079,10.308,10.308,0,0,1-.973,3.891,0.817,0.817,0,0,0-.108.432,22.28,22.28,0,0,1-3.026,6.484,26.208,26.208,0,0,1-2.7,3.35A43.759,43.759,0,0,1,156.243,73c-1.189.973-2.594,1.837-3.891,2.918a21.589,21.589,0,0,1-4.863,2.162h-0.432a1.259,1.259,0,0,1-.757-0.216,4.244,4.244,0,0,1-1.081-1.729,12.083,12.083,0,0,1-.972-4.755,18.557,18.557,0,0,1,1.3-6.268,10.626,10.626,0,0,1,.54-1.729,37.143,37.143,0,0,1,3.134-4.431,20.678,20.678,0,0,1,3.459-2.918,0.682,0.682,0,0,0,.54-0.54,0.216,0.216,0,0,0-.108-0.216,0.335,0.335,0,0,0,.108-0.216,1.33,1.33,0,0,0-.54-0.216,0.571,0.571,0,0,1-.325-0.216c0-.216,0-0.324-0.432-0.432a4.674,4.674,0,0,1-.54-0.108,3.352,3.352,0,0,0-.865-0.216,1.44,1.44,0,0,0-.865.324,21.843,21.843,0,0,0-4.971,4.107,24.5,24.5,0,0,0-3.891,7.673c-0.216,1.189-.648,2.7-0.864,4.215a31.014,31.014,0,0,0,.432,4.215,12.38,12.38,0,0,0,6.16,6.7A6.7,6.7,0,0,0,149,81.54a19.428,19.428,0,0,0,2.378-.216l4.755-1.945a29.8,29.8,0,0,0,6.16-4.863,43.052,43.052,0,0,0,6.268-6.917,31.593,31.593,0,0,0,3.567-6.16,25.49,25.49,0,0,0,1.513-7.673c0-.432.108-0.865,0.108-1.3a15.789,15.789,0,0,0-.757-4.215,8.71,8.71,0,0,0-4.106-5.62,13.815,13.815,0,0,0-6.377-1.945h-2.918a5.416,5.416,0,0,1-1.3.216h-0.108c-0.108,0-.108-0.108-0.108-0.216a2.337,2.337,0,0,1,.865-0.973,29.876,29.876,0,0,1,2.594-2.7,110.27,110.27,0,0,0,8.537-10.267,31.253,31.253,0,0,0,5.512-11.456c0-.432.108-0.865,0.108-1.3a6.316,6.316,0,0,0-1.405-4.107,5.982,5.982,0,0,0-4.323-1.945,5.266,5.266,0,0,0-1.3.108,16.691,16.691,0,0,0-2.485.648c-1.081.54-1.838,1.081-2.81,1.513a38.68,38.68,0,0,0-4.864,2.918,62.415,62.415,0,0,0-6.16,5.728c-1.189,1.189-2.269,2.053-3.35,3.35l-0.865.973a0.255,0.255,0,0,1-.324.216,1.09,1.09,0,0,1-.108-0.324V22.316c0.973-3.242,1.513-6.268,2.378-9.294a2.139,2.139,0,0,1,.216-1.081V11.292a2.112,2.112,0,0,1,.108-0.757c-0.216-.756-0.432-1.729-1.621-1.945a0.431,0.431,0,0,1-.432-0.216,1.475,1.475,0,0,0-1.189.432c-0.865,2.378-1.513,4.431-2.378,6.592a13.081,13.081,0,0,1-1.189,3.458v0.324a0.794,0.794,0,0,1-.216.648c-0.432,1.081-.54,2.27-1.081,3.566a50.254,50.254,0,0,0-1.513,5.188l-1.621,5.62c-0.432,1.837-.864,3.783-1.513,5.728a50.632,50.632,0,0,1-1.3,5.512V45.66C136.249,47.281,135.493,48.686,135.277,49.875ZM159.7,34.96a3.672,3.672,0,0,0,.649-0.648,6.623,6.623,0,0,1,.432-0.648,1.132,1.132,0,0,0,.324-0.432,3.156,3.156,0,0,0,.865-0.432,0.365,0.365,0,0,0,.216-0.324,2.7,2.7,0,0,1,1.189-1.081,1.229,1.229,0,0,1-1.081,1.081l-0.216.648a27.052,27.052,0,0,1-3.458,3.566,5.357,5.357,0,0,1-1.946,1.837,4.913,4.913,0,0,1-1.729,1.945,15.365,15.365,0,0,1-2.269,2.378H152.46c-0.108,0-.108,0-0.108-0.108V42.418a1.135,1.135,0,0,1,.433-0.324,3.149,3.149,0,0,0,1.405-1.513,1.157,1.157,0,0,1,.648-0.216l0.648-1.189H155.27l0.216-.432v0.432l0.541-.432h0.108l0.54-.324a11.4,11.4,0,0,1,.757-1.189h-0.324a0.958,0.958,0,0,0,.432-0.54,0.975,0.975,0,0,1-.108.54l0.54-.432c0.108-.108.432-0.108,0.54-0.216,0.109-.432.649-0.756,0.757-1.189a0.533,0.533,0,0,1-.324-0.108,0.958,0.958,0,0,0,.54-0.432,1.537,1.537,0,0,0-.216.648ZM149.434,23.829a0.76,0.76,0,0,1,.541-0.432,0.573,0.573,0,0,0-.216-0.324l0.324-.432a0.993,0.993,0,0,1-.108.648,0.924,0.924,0,0,0,.324-0.648,1.154,1.154,0,0,1,.54-0.324h0.108a0.106,0.106,0,0,1,.108-0.108l0.649-.973a1.225,1.225,0,0,0,.648-0.648L153,20.371a0.811,0.811,0,0,1,.108-0.54h-0.216a0.4,0.4,0,0,1,.324-0.108c0.108,0,0,0,0,.108a1.654,1.654,0,0,0,.54-0.757,1.816,1.816,0,0,0,.865-0.756H154.19c0.108,0,.216-0.108.324-0.108a0.106,0.106,0,0,1,.108.108,0.913,0.913,0,0,0,.648-0.216,1.372,1.372,0,0,0,.108-0.648l0.757-.216a1.44,1.44,0,0,0,.324-0.54,1.306,1.306,0,0,0,.973-0.757,3.064,3.064,0,0,1,.972-0.648,0.819,0.819,0,0,0,.433-0.108,3.82,3.82,0,0,1,1.729-1.4v0.108a2.835,2.835,0,0,1-1.729,1.4,1.118,1.118,0,0,1-.433.108,5.243,5.243,0,0,1-2.161,1.945,1.03,1.03,0,0,1-.865.864,6.2,6.2,0,0,1-2.269,2.162,1.44,1.44,0,0,0-.324.54L149.11,24.8l-0.324.54A2.037,2.037,0,0,1,149,24.477,0.992,0.992,0,0,1,149.434,23.829Zm13.4,46.147c-0.432.324-.648,0.324-0.864,0.54a3.238,3.238,0,0,1,.432-0.865,39.919,39.919,0,0,0,5.4-7.133,1.706,1.706,0,0,0,.54-0.648h0.324l-0.108.108a4.508,4.508,0,0,1-.216.648,33.471,33.471,0,0,1-3.891,5.728A7.7,7.7,0,0,0,162.835,69.976Zm0.649,1.3a0.592,0.592,0,0,1-.541.432,4.563,4.563,0,0,1,.649-0.865,34.5,34.5,0,0,0,4.215-5.4,0.106,0.106,0,0,0,.108-0.108,0.377,0.377,0,0,0,.216-0.108,0.106,0.106,0,0,0,.108.108v0.108a0.357,0.357,0,0,1-.324.432A23.161,23.161,0,0,1,163.484,71.273ZM145.76,59.493a3.422,3.422,0,0,1,.648-0.54l-0.432.865a34.468,34.468,0,0,0-2.053,3.35,0.338,0.338,0,0,1-.217.108H143.6V62.951a0.915,0.915,0,0,1,.325-0.54C144.463,61.438,145.111,60.466,145.76,59.493ZM160.782,13.67a4.456,4.456,0,0,1,2.594-1.621,5.82,5.82,0,0,1-2.486,1.621,0.216,0.216,0,0,1-.216.108A0.106,0.106,0,0,0,160.782,13.67ZM147.273,26.315a2.216,2.216,0,0,0,.973-0.54,2.7,2.7,0,0,1-1.189,1.513A1.778,1.778,0,0,0,147.273,26.315Zm11.023-9.4a2.061,2.061,0,0,1,1.405-.973A1.665,1.665,0,0,1,158.3,16.912Zm2.27-1.4a1.185,1.185,0,0,1,1.189-.973A2.1,2.1,0,0,1,160.566,15.507ZM146.841,60.25a2.5,2.5,0,0,1,.864-1.189A2.031,2.031,0,0,1,146.841,60.25Zm11.131-21.182a1.572,1.572,0,0,1-.973.648,0.929,0.929,0,0,1,.757-0.648h0.216Zm7.349,26.37a1.254,1.254,0,0,1,.649-0.865A1.077,1.077,0,0,1,165.321,65.437Zm-19.237-4.215a1.365,1.365,0,0,1,.648-0.865A1.342,1.342,0,0,1,146.084,61.222Zm19.237-32.1a0.579,0.579,0,0,1-.54.54A0.579,0.579,0,0,1,165.321,29.125Zm-27.559,21.4a0.106,0.106,0,0,1-.108-0.108,1.607,1.607,0,0,1-.108-0.648,0.232,0.232,0,0,0,.216-0.216v0.973ZM166.4,63.708a0.877,0.877,0,0,1-.432.865A2.128,2.128,0,0,1,166.4,63.708Zm-2.486-32.962a0.494,0.494,0,0,1,.432-0.54A0.484,0.484,0,0,1,163.916,30.746ZM157,39.716a0.593,0.593,0,0,1-.432.648A0.782,0.782,0,0,1,157,39.716Zm-8.753-13.941a0.494,0.494,0,0,1,.54-0.432A0.582,0.582,0,0,1,148.246,25.774Zm17.075,3.35a0.8,0.8,0,0,1,.54-0.649A1.107,1.107,0,0,1,165.321,29.125Zm1.621-2.053c-0.324.324-.324,0.648-0.648,0.973A1.242,1.242,0,0,1,166.942,27.071ZM166.4,63.708c0-.108.216-0.324,0.216-0.432a1.087,1.087,0,0,0,.324-0.108v0.216ZM160.89,36.041a1.274,1.274,0,0,1-.54.54A0.579,0.579,0,0,1,160.89,36.041Zm-10.267-14.05c0.108-.108.432-0.108,0.54-0.216a0.82,0.82,0,0,1-.216.432Zm12.753,9.4a0.685,0.685,0,0,1,.54-0.648A2.867,2.867,0,0,1,163.376,31.394Zm2.918-3.35c0,0.216-.108.216-0.433,0.432A0.4,0.4,0,0,1,166.294,28.044Zm-6.377,6.16a1.537,1.537,0,0,1-.216.648h-0.216ZM149.434,23.829a0.573,0.573,0,0,1-.216-0.324,0.808,0.808,0,0,1,.324-0.324A1.372,1.372,0,0,0,149.434,23.829Zm9.511,14.158a0.718,0.718,0,0,1-.541.432A1.172,1.172,0,0,1,158.945,37.987Zm5.4-7.781a1.081,1.081,0,0,1,.433-0.54A0.717,0.717,0,0,1,164.348,30.205ZM145.76,61.546a0.916,0.916,0,0,0,.324-0.324c0,0.108-.108.324-0.108,0.432l-0.108.108C145.76,61.763,145.76,61.655,145.76,61.546Zm1.3-3.458a2.871,2.871,0,0,1-.541.648A1.444,1.444,0,0,1,147.057,58.088ZM160.35,36.582a2.554,2.554,0,0,0-.541.54A0.562,0.562,0,0,1,160.35,36.582ZM162.4,72.246a2.206,2.206,0,0,0,.54-0.54C162.943,72.03,162.835,72.03,162.4,72.246ZM156.243,40.8c0-.216,0-0.432.324-0.432ZM157,18.209a0.76,0.76,0,0,1-.54.432Zm5.188,16.211a1.079,1.079,0,0,1-.432.54Zm-2.81,2.918a0.453,0.453,0,0,1-.324.432Zm-1.837-.648a0.377,0.377,0,0,0,.216-0.108,0.408,0.408,0,0,1,.216.216A0.816,0.816,0,0,0,157.54,36.69Zm-0.432-20.75c0-.108,0-0.108.108-0.108a0.334,0.334,0,0,1,.216.108h-0.324Zm0.324,1.945a0.579,0.579,0,0,1,.324-0.432ZM159.917,34.2a0.65,0.65,0,0,1,.433.108A0.653,0.653,0,0,1,159.917,34.2Zm-12.86-6.917V27.5l-0.108.108V27.4ZM156.135,16.7a0.106,0.106,0,0,1,.108-0.108,0.377,0.377,0,0,0,.216.108h-0.324Zm-1.081.756c0.108,0,.108-0.108.216-0.108l0.108,0.108h-0.324Zm-4.647,4.755a1.09,1.09,0,0,1-.108.324h-0.108A0.573,0.573,0,0,0,150.407,22.208Zm5.4,16.319a0.216,0.216,0,0,1,.216.108A0.377,0.377,0,0,1,155.811,38.527ZM161,35.717c0,0.108-.108.216-0.108,0.324A0.4,0.4,0,0,1,161,35.717Zm4.107,30.044v0.108C165.105,65.761,165,65.761,165.105,65.761Zm24.209,4a5.771,5.771,0,0,0,4.107-1.729c0.324-.648.864-1.189,1.189-1.729a25.105,25.105,0,0,0,1.945-3.783,24.534,24.534,0,0,0,1.189-4,16.257,16.257,0,0,0,.972-3.783c0-.54.108-0.54,0.649-0.648a7.138,7.138,0,0,0,1.513-.108,18.113,18.113,0,0,0,4-.648,12.3,12.3,0,0,0,3.242-1.405,9.832,9.832,0,0,0,2.593-1.729,0.849,0.849,0,0,1,.433-0.432,0.3,0.3,0,0,1,.216-0.324c0-.108.108-0.108,0.108-0.216a0.232,0.232,0,0,0-.216-0.216,0.4,0.4,0,0,0-.324.108l-0.108.108c-0.217,0-.217-0.108-0.217-0.108V48.9a0.365,0.365,0,0,0-.216-0.324h-0.216c-0.108,0-.108.216-0.216,0.216,0,0-.108,0-0.108-0.216h-0.216c-0.108,0-.108,0-0.108-0.108H209.2a0.653,0.653,0,0,0-.648.324l-0.865.648a18.438,18.438,0,0,1-2.053.973,9.226,9.226,0,0,1-2.594.973c-1.3.216-2.485,0.432-3.782,0.757-0.325,0-.433,0-0.433-0.324V51.6a0.65,0.65,0,0,1,.108-0.432,4.578,4.578,0,0,1-.432-1.3,1.887,1.887,0,0,0-1.081-1.4,2.577,2.577,0,0,0-.972-0.216,2.356,2.356,0,0,0-.649-0.108,3.438,3.438,0,0,0-1.513.216c-1.405.54-2.485,1.3-2.7,2.486v0.324a0.65,0.65,0,0,0-.108.432,0.964,0.964,0,0,0,.541.865l0.54,0.432a12.327,12.327,0,0,0,2.054,1.081c0.432,0.108.54,0.216,0.54,0.432v0.54c-0.108.648-.324,1.081-0.432,1.621a10.707,10.707,0,0,1-.865,2.81l-1.189,2.594a18.071,18.071,0,0,1-2.7,4.323,6.56,6.56,0,0,1-1.08.757,0.9,0.9,0,0,1-.757.324,2.125,2.125,0,0,1-.864-0.432l-0.433-.324a3.873,3.873,0,0,1-.432-1.189,2.925,2.925,0,0,1-.324-1.621V63.06a1.406,1.406,0,0,1,0-1.081L186.4,58.3c0.324-1.081.324-2.053,0.648-3.026,0-.756.108-1.3,0.108-1.837a23.4,23.4,0,0,0,1.3-3.891c0.325-.648.433-1.621,0.757-2.27,0.54-1.189,1.405-2.594,1.945-4a9.571,9.571,0,0,1,1.3-1.837V41.229a0.81,0.81,0,0,0-.108-0.54,1.337,1.337,0,0,1-.324-0.216,2.056,2.056,0,0,0-.973-0.324H190.5a2.039,2.039,0,0,0-.865-0.216,1.725,1.725,0,0,0-1.3.432l-0.864.648c-0.541.756-1.189,1.729-1.838,2.486-0.648,1.081-1.3,2.378-2.053,3.566a0.335,0.335,0,0,0-.108.216,1.615,1.615,0,0,1-.324.757,20.184,20.184,0,0,1-.757,2.378,26,26,0,0,0-1.189,3.458c0,0.324-.108.757-0.108,1.3a4.6,4.6,0,0,0-.216,1.189l-0.324,2.27a0.3,0.3,0,0,1-.216.324c0,0.324-.108.757-0.108,0.973,0,0.108-.108.216-0.108,0.324a1.827,1.827,0,0,0,.216.54,4.057,4.057,0,0,0-.108,1.081v1.081a0.216,0.216,0,0,0,.108.216c0,0.432.216,0.865,0.216,1.621a4,4,0,0,0,1.729,2.594,7.324,7.324,0,0,0,2.594,1.3L186.072,69a10.587,10.587,0,0,0,2.918.757h0.324Zm0.324-28.639a0.106,0.106,0,0,0,.108.108,0.82,0.82,0,0,1-.216.432c-0.973,1.4-1.513,2.81-2.486,4.323a21.588,21.588,0,0,0-1.945,4.971,29.7,29.7,0,0,0-1.405,5.079,12.365,12.365,0,0,1-.54,2.594,5.493,5.493,0,0,1-.324,1.837v0.108l-0.109-.108V60.033a17.167,17.167,0,0,0,.325-2.486c0.216-.865.216-1.837,0.54-3.026a11.772,11.772,0,0,0,.757-2.594,32.886,32.886,0,0,1,3.674-8.538,8.669,8.669,0,0,1,1.405-2.053Zm-2.377,2.486c0-.108.108-0.108,0.108-0.216V43.5c0,0.216-.108.432-0.108,0.648a13.033,13.033,0,0,0-2.162,4.215,23.884,23.884,0,0,0-1.513,4.431c-0.324,1.081-.54,2.27-0.865,3.242V56.9a13.064,13.064,0,0,1-.324,1.513v0.973l-0.216.432V58.412a4.013,4.013,0,0,1,.216-0.973,18.175,18.175,0,0,1,.433-2.378,5.691,5.691,0,0,1,.432-1.945,25.76,25.76,0,0,1,3.566-8.646A1.634,1.634,0,0,1,187.261,43.606Zm6.052,20.318a28.358,28.358,0,0,0,2.269-4.863,8.2,8.2,0,0,1,.649-2.162l0.216-.108V56.9a0.975,0.975,0,0,1-.108.54,24.592,24.592,0,0,1-2.81,6.484,1.437,1.437,0,0,1-.649.973Zm-2.27-22.263c0,0.108,0,.108-0.216.216a32.659,32.659,0,0,0-2.7,4.647v0.108c-0.108,0-.108,0-0.108-0.108V46.416a15.884,15.884,0,0,1,2.27-4.215,2.261,2.261,0,0,0,.432-0.648Zm3.026,23.452c0.541-1.3,1.081-2.378,1.405-3.35l0.649-1.405h0.108v0.324a23.55,23.55,0,0,1-1.621,3.782,3.412,3.412,0,0,1-.433.648C194.177,65.221,194.177,65.113,194.069,65.113Zm-0.432-14.05h-0.216a0.106,0.106,0,0,1-.108-0.108l0.432-.865h0.324Zm0.756,9.727a1.1,1.1,0,0,1-.54,1.081A2.016,2.016,0,0,1,194.393,60.79Zm-6.268-18.264a1.921,1.921,0,0,1-.756.865A1.167,1.167,0,0,1,188.125,42.526Zm6.809,17.184a0.647,0.647,0,0,1-.324.648,0.216,0.216,0,0,1,.108-0.216A0.432,0.432,0,0,1,194.934,59.709Zm0.216-.216a0.408,0.408,0,0,0-.216.216V59.385a0.572,0.572,0,0,1,.216-0.324v0.432Zm-0.432-8.646a0.409,0.409,0,0,1,.216-0.216h0.108a0.365,0.365,0,0,1-.216.324Zm0.756,7.025a1.141,1.141,0,0,1-.216.54c0-.216.108-0.324,0.108-0.648h0.108v0.108Zm-0.216.973c0,0.108-.108.108-0.108,0.216V58.737a0.4,0.4,0,0,1,.108-0.324v0.432Zm-0.648,1.513a0.431,0.431,0,0,1-.217.432A0.815,0.815,0,0,1,194.61,60.358ZM193.745,62.3c0-.108,0-0.324.108-0.324A0.305,0.305,0,0,1,193.745,62.3ZM192.88,50.739c0.217,0,.217,0,0.217.108H192.88V50.739Zm20.427-6.809a0.216,0.216,0,0,0,.108-0.216V43.5H213.2a0.817,0.817,0,0,0-.108-0.432c0-.108.108-0.216,0.108-0.324a1.331,1.331,0,0,1-.216-0.54,0.8,0.8,0,0,0-.757.324,27.185,27.185,0,0,0-2.161,3.134l-2.054,4.107a15.467,15.467,0,0,0-1.3,4.863,23.441,23.441,0,0,0-.972,7.241,9.468,9.468,0,0,0,.756,3.458,7.7,7.7,0,0,0,1.189,1.837,6.607,6.607,0,0,0,1.513.756,3.652,3.652,0,0,0,1.189.757,4.43,4.43,0,0,0,1.189.108,3.454,3.454,0,0,0,1.513-.324l1.621-1.513a22.865,22.865,0,0,0,1.513-1.837,34.152,34.152,0,0,0,2.161-2.918c1.729-1.945,3.567-4.215,5.62-6.376a27.85,27.85,0,0,1,3.35-3.891l0.108-.108a1.813,1.813,0,0,1,.973-0.757,7.456,7.456,0,0,0,1.729-3.458c0-.216.108-0.54,0.108-0.756V46.632a4.119,4.119,0,0,0-.324-1.081l-0.54.757a67.953,67.953,0,0,1-4.647,5.3,49.231,49.231,0,0,0-3.783,4.323,48.769,48.769,0,0,0-4.647,4.755,49.7,49.7,0,0,1-4.215,4.107,1.752,1.752,0,0,1-.973.54c-0.108,0-.216-0.108-0.324-0.108V63.6a25.3,25.3,0,0,1,.865-5.836c0.648-2.7,1.621-5.3,2.377-8a37.932,37.932,0,0,0,1.621-4.539,2.26,2.26,0,0,0,.433-1.189,0.5,0.5,0,0,0-.541-0.216,0.106,0.106,0,0,1-.108.108,0.377,0.377,0,0,0-.216.108V43.822a0.8,0.8,0,0,0-.756-0.757c-0.108,0-.108.108-0.217,0.432a1.243,1.243,0,0,1-.648.757,21.807,21.807,0,0,1-1.945,3.891,63.728,63.728,0,0,0-2.27,6.376,9.958,9.958,0,0,0-.54.865,14.227,14.227,0,0,1,.54-2.486,35.8,35.8,0,0,1,3.134-7.241,0.65,0.65,0,0,1-.108-0.432,0.817,0.817,0,0,1,.108-0.432,0.843,0.843,0,0,0-.432.324,0.966,0.966,0,0,1,.432-0.865V44.8A0.823,0.823,0,0,0,213.307,43.931Zm6.808-10.051a5.124,5.124,0,0,0-1.08-1.081,4,4,0,0,0-1.189-.54,0.521,0.521,0,0,0-.432-0.108,0.7,0.7,0,0,0-.649.216,3.8,3.8,0,0,0-1.4,2.918,0.457,0.457,0,0,0,.324.54c0.325,0.324.757,0.216,0.757,0.648a1.673,1.673,0,0,0,.864.865v0.324a0.913,0.913,0,0,1,.325.324,2.2,2.2,0,0,1,.54-0.108A3.237,3.237,0,0,1,218.6,36.8a1.159,1.159,0,0,1,.217-1.3,1.461,1.461,0,0,1,.972-0.973A1.826,1.826,0,0,1,220.115,33.88Zm-9.834,14.806a3.6,3.6,0,0,1,1.189-2.378A3.376,3.376,0,0,1,210.281,48.686Zm-1.3,3.35a4.294,4.294,0,0,1,.973-2.378A4.3,4.3,0,0,1,208.984,52.036Zm8.321-18.156a0.4,0.4,0,0,0-.108-0.324,0.431,0.431,0,0,1,.217-0.432h-0.325a0.5,0.5,0,0,1,.541-0.216v0.216h0.324l0.108-.108v0.108C218.062,33.556,217.954,33.772,217.305,33.88Zm-4,10.051c-0.108.108-.433,0.108-0.757,0.324A0.647,0.647,0,0,1,213.2,43.5,0.817,0.817,0,0,1,213.307,43.931Zm3.35,19.453c0,0.216-.108.324-0.648,0.648a0.849,0.849,0,0,1,.648-0.865v0.216Zm9.619-12.212a2.33,2.33,0,0,1,1.08-.865A1.435,1.435,0,0,1,226.276,51.171Zm3.242-3.675V47.065a0.761,0.761,0,0,1,.54-0.432A0.963,0.963,0,0,1,229.518,47.5Zm-5.728,6.484,0.108-.324c0-.324.216-0.432,0.648-0.54A2,2,0,0,1,223.79,53.981Zm4.863-5.3a1.571,1.571,0,0,1,.649-0.973A1.324,1.324,0,0,1,228.653,48.686Zm-0.972,1.081a0.216,0.216,0,0,1,.108-0.216,0.8,0.8,0,0,1,.54-0.648A0.965,0.965,0,0,1,227.681,49.767Zm-8.106,10.159a1.073,1.073,0,0,1,.648-0.864A1.121,1.121,0,0,1,219.575,59.925Zm5.728-6.7a1.666,1.666,0,0,1,.756-0.757A0.812,0.812,0,0,1,225.3,53.225Zm-4.755,4.323a1.923,1.923,0,0,1-.865.757A1.166,1.166,0,0,1,220.548,57.548Zm7.781-7.349a0.7,0.7,0,0,1-.648.54,0.974,0.974,0,0,1,.648-0.648V50.2ZM217.414,60.9c0,0.108.108,0.108,0.108,0.216a0.762,0.762,0,0,1-.541.432A0.729,0.729,0,0,1,217.414,60.9Zm-2.594,4.431a3.176,3.176,0,0,1,.864-0.865A1.373,1.373,0,0,1,214.82,65.329Zm3.674-4.647a1.522,1.522,0,0,1,.757-0.648A0.927,0.927,0,0,1,218.494,60.682Zm-9.942-6.376a0.233,0.233,0,0,1-.217.216,0.4,0.4,0,0,1-.108-0.324,0.817,0.817,0,0,1,.108-0.432A1.836,1.836,0,0,1,208.552,54.306Zm3.35-8.538c0-.108-0.108-0.324-0.108-0.432s0.108-.108.324-0.216A0.7,0.7,0,0,1,211.9,45.768Zm4.971,17.076a0.8,0.8,0,0,1,.649-0.648A0.975,0.975,0,0,1,216.873,62.843Zm8.646-10.7c0,0.108,0,.108-0.216.216V52.036l0.324-.324A2.455,2.455,0,0,1,225.519,52.144ZM211.47,46.308a0.494,0.494,0,0,1,.432-0.54A0.761,0.761,0,0,1,211.47,46.308Zm2.593-3.566V42.634l-0.108.108c0,0.108-.216.216-0.216,0.324a0.918,0.918,0,0,0-.324.324,0.635,0.635,0,0,1,.54-0.216,0.335,0.335,0,0,1-.108-0.216A0.409,0.409,0,0,1,214.063,42.742Zm5.08,15.995a0.806,0.806,0,0,0,.324-0.324c0.108,0,.108-0.108.216-0.108a0.82,0.82,0,0,0-.216.432,0.533,0.533,0,0,0-.324.108V58.737Zm-10.051-6.484a0.573,0.573,0,0,1-.216.324V52.252a0.216,0.216,0,0,1,.108-0.216C208.984,52.144,209.092,52.144,209.092,52.252Zm-0.432,1.081a1.012,1.012,0,0,1,.108-0.757A1.6,1.6,0,0,1,208.66,53.333Zm0.216,2.486a0.4,0.4,0,0,1-.108.324V55.711a0.4,0.4,0,0,1,.108-0.324v0.432Zm8.97,6.052,0.432-.865A1.628,1.628,0,0,1,217.846,61.871Zm-7.889-12.212c0-.216,0-0.432.216-0.432A0.82,0.82,0,0,1,209.957,49.658Zm10.7,9.078a0.232,0.232,0,0,0-.216.216c-0.217,0-.108.108-0.217,0.108a0.233,0.233,0,0,1,.217-0.216,1.183,1.183,0,0,0,.216-0.432v0.324Zm-3.675-25.4c0-.108,0-0.216.108-0.216a0.534,0.534,0,0,0,.108.324h-0.216V33.339Zm-2.269,32.206a0.831,0.831,0,0,1-.216.324,1.089,1.089,0,0,1,.108-0.324,0.409,0.409,0,0,0,.216-0.216C214.82,65.437,214.712,65.437,214.712,65.545Zm9.4-10.807a0.377,0.377,0,0,1-.216.108c0.108,0,.108-0.108.216-0.324,0.108,0,.108-0.108.216-0.108Zm-15.779-.973c0-.324,0-0.324.108-0.432A0.522,0.522,0,0,1,208.335,53.765Zm11.024,6.268h-0.108a0.408,0.408,0,0,1,.216-0.216l0.108,0.108A0.334,0.334,0,0,1,219.359,60.033Zm-1.513.432h0.108a0.408,0.408,0,0,0-.216.216,0.4,0.4,0,0,0-.324.108ZM210.281,49.01a0.106,0.106,0,0,1-.108.108V48.686C210.173,48.794,210.281,48.9,210.281,49.01Zm6.376,12.861a0.106,0.106,0,0,0,.108-0.108v0.108a1.553,1.553,0,0,0-.216.324A1.089,1.089,0,0,1,216.657,61.871Zm5.62-5.188a0.216,0.216,0,0,0-.216.108,0.305,0.305,0,0,0,.108-0.324h0.108v0.216Zm7.349-8.106a1.087,1.087,0,0,0-.324.108,1.335,1.335,0,0,1,.324-0.216v0.108Zm-6.593,6.052,0.325-.324v0.108a0.489,0.489,0,0,0-.325.324V54.63ZM218.6,59.493l0.108-.108v0.108a0.408,0.408,0,0,0-.216.216C218.494,59.6,218.6,59.6,218.6,59.493Zm0.541-.648v0.216A0.108,0.108,0,0,1,219.143,58.845Zm-2.378,4.323h-0.108a0.572,0.572,0,0,0,.216-0.324A0.4,0.4,0,0,1,216.765,63.168Zm7.565-8.97a0.365,0.365,0,0,1,.324-0.216Zm-5.944,6.592V60.682h0.108A0.106,0.106,0,0,1,218.386,60.79Zm-10.267-6.052s0-.108.216-0.108c-0.216.108-.216,0.108-0.216,0.216V54.738Zm20.858-5.512a0.306,0.306,0,0,1,.217-0.216Zm-8.1,8.754a0.408,0.408,0,0,0,.216-0.216A0.408,0.408,0,0,1,220.872,57.98Zm4.431-4.755c-0.216.108-.324,0.108-0.324,0.216C224.979,53.333,225.087,53.333,225.3,53.225Zm-0.324-.54,0.108-.108A0.106,0.106,0,0,1,224.979,52.684ZM243.458,10.1a0.843,0.843,0,0,0-.432.324,1.071,1.071,0,0,0-1.189-.865c-0.432,0-.864.108-1.08,0.108h-0.108c-5.4,0-11.24,21.4-12.429,26.694-1.729,8.97-3.242,16.427-3.35,25.181a15.98,15.98,0,0,0,.973,6.593c1.3,2.81,1.945,3.35,3.458,3.891l0.54,0.216a0.216,0.216,0,0,0,.216.108l0.108,0.108c2.27-.108,6.809-3.134,8-4.647,4.647-5.62,7.457-7.889,10.807-16.1a1.635,1.635,0,0,0,.216-0.865,0.647,0.647,0,0,0-.756-0.648,0.334,0.334,0,0,0-.216-0.108l-3.783,5.62a59,59,0,0,1-6.917,9.078c-2.269,2.81-4.647,4.323-6.484,4.539a1.168,1.168,0,0,1-.648-0.108c0-.108-0.108-0.432-0.108-0.54a19.423,19.423,0,0,1-.433-4.539c0-.973.108-2.053,0.216-3.242a71.581,71.581,0,0,1,1.622-8.106,4.683,4.683,0,0,0,.108-0.54l0.756-1.621s3.783-11.564,3.783-11.78,2.593-8,2.7-8.105,2.054-6.593,2.054-6.593l1.945-5.728a29.344,29.344,0,0,0,.649-6.268V11.292A2.19,2.19,0,0,0,243.458,10.1ZM230.922,49.226l1.837-6.484a1.194,1.194,0,0,1-.108-0.757c0.108-4.863,7.133-28.315,8.97-27.991a1.008,1.008,0,0,1,.757.432,5.433,5.433,0,0,1-.433,1.4S231.03,49.226,230.922,49.226Zm1.405-21.29a2.521,2.521,0,0,1,1.081-1.3v0.54c0,0.54-.541.54-0.649,0.973-1.189,5.188-1.621,7.457-2.594,11.348-0.648,4-1.08,5.188-1.621,9.4-0.108.757-1.188,9.186-1.405,9.835,0,0.108-.108.108-0.108,0.216,0-.108-0.216-0.216-0.216-0.324a13.524,13.524,0,0,0,.324-2.053c0.649-5.512,1.189-11.672,2.594-16.967Zm1.3-2.594a27.522,27.522,0,0,1,1.837-5.512,34.621,34.621,0,0,1-1.837,5.944V25.342Z"
+    />
+  </svg>
+</template>
diff --git a/src/Publish/resources/js/Components/Label.vue b/src/Publish/resources/js/Components/Label.vue
new file mode 100644
index 0000000..9967f17
--- /dev/null
+++ b/src/Publish/resources/js/Components/Label.vue
@@ -0,0 +1,12 @@
+<script setup>
+defineProps({
+    value: String,
+});
+</script>
+
+<template>
+    <label class="block font-medium text-sm text-gray-700">
+        <span v-if="value">{{ value }}</span>
+        <span v-else><slot /></span>
+    </label>
+</template>
diff --git a/src/Publish/resources/js/Components/Modal.vue b/src/Publish/resources/js/Components/Modal.vue
new file mode 100644
index 0000000..6d80c56
--- /dev/null
+++ b/src/Publish/resources/js/Components/Modal.vue
@@ -0,0 +1,91 @@
+<script setup>
+import { computed, onMounted, onUnmounted, watch } from 'vue';
+
+const props = defineProps({
+    show: {
+        type: Boolean,
+        default: false,
+    },
+    maxWidth: {
+        type: String,
+        default: '2xl',
+    },
+    closeable: {
+        type: Boolean,
+        default: true,
+    },
+});
+
+const emit = defineEmits(['close']);
+
+watch(() => props.show, () => {
+    if (props.show) {
+        document.body.style.overflow = 'hidden';
+    } else {
+        document.body.style.overflow = null;
+    }
+});
+
+const close = () => {
+    if (props.closeable) {
+        emit('close');
+    }
+};
+
+const closeOnEscape = (e) => {
+    if (e.key === 'Escape' && props.show) {
+        close();
+    }
+};
+
+onMounted(() => document.addEventListener('keydown', closeOnEscape));
+
+onUnmounted(() => {
+    document.removeEventListener('keydown', closeOnEscape);
+    document.body.style.overflow = null;
+});
+
+const maxWidthClass = computed(() => {
+    return {
+        'sm': 'sm:max-w-sm',
+        'md': 'sm:max-w-md',
+        'lg': 'sm:max-w-lg',
+        'xl': 'sm:max-w-xl',
+        '2xl': 'sm:max-w-2xl',
+    }[props.maxWidth];
+});
+</script>
+
+<template>
+    <teleport to="body">
+        <transition leave-active-class="duration-200">
+            <div v-show="show" class="fixed inset-0 overflow-y-auto px-4 py-6 sm:px-0 z-50" scroll-region>
+                <transition
+                    enter-active-class="ease-out duration-300"
+                    enter-from-class="opacity-0"
+                    enter-to-class="opacity-100"
+                    leave-active-class="ease-in duration-200"
+                    leave-from-class="opacity-100"
+                    leave-to-class="opacity-0"
+                >
+                    <div v-show="show" class="fixed inset-0 transform transition-all" @click="close">
+                        <div class="absolute inset-0 bg-gray-500 opacity-75" />
+                    </div>
+                </transition>
+
+                <transition
+                    enter-active-class="ease-out duration-300"
+                    enter-from-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                    enter-to-class="opacity-100 translate-y-0 sm:scale-100"
+                    leave-active-class="ease-in duration-200"
+                    leave-from-class="opacity-100 translate-y-0 sm:scale-100"
+                    leave-to-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                >
+                    <div v-show="show" class="mb-6 bg-white rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full sm:mx-auto" :class="maxWidthClass">
+                        <slot v-if="show" />
+                    </div>
+                </transition>
+            </div>
+        </transition>
+    </teleport>
+</template>
diff --git a/src/Publish/resources/js/Components/NavBar.vue b/src/Publish/resources/js/Components/NavBar.vue
new file mode 100644
index 0000000..e8edac9
--- /dev/null
+++ b/src/Publish/resources/js/Components/NavBar.vue
@@ -0,0 +1,112 @@
+<script setup>
+import { computed, ref } from "vue";
+import {mdiClose, mdiDotsVertical, mdiLogout, mdiThemeLightDark, mdiTranslate} from "@mdi/js";
+import { containerMaxW } from "@/config.js";
+import BaseIcon from "@/Components/BaseIcon.vue";
+import NavBarMenuList from "@/Components/NavBarMenuList.vue";
+import NavBarItemPlain from "@/Components/NavBarItemPlain.vue";
+import UserAvatarCurrentUser from "@/Components/UserAvatarCurrentUser.vue";
+import {useStyleStore} from "@/Stores/style";
+import {usePage} from "@inertiajs/inertia-vue3";
+
+defineProps({
+  menu: {
+    type: Array,
+    required: true,
+  },
+});
+
+const styleStore = useStyleStore();
+
+const menuItem = {
+    dark: {
+        icon: mdiThemeLightDark,
+        label: "Light/Dark",
+        isDesktopNoLabel: true,
+        isToggleLightDark: true,
+    },
+    translation: {
+        icon: mdiTranslate,
+        label: "Change Language",
+        isDesktopNoLabel: true,
+        isChangeLanguage: true,
+    },
+    logout: {
+        icon: mdiLogout,
+        label: "Log out",
+        isDesktopNoLabel: true,
+        isLogout: true,
+    }
+}
+
+const emit = defineEmits(["menu-click"]);
+
+const menuClick = (event, item) => {
+  emit("menu-click", event, item);
+};
+
+const isMenuNavBarActive = ref(false);
+</script>
+
+<template>
+  <nav
+    class="top-0 inset-x-0 fixed bg-gray-50 h-14 z-30 transition-position w-screen lg:w-auto dark:bg-slate-800"
+  >
+    <div class="flex lg:items-stretch" :class="containerMaxW">
+      <div class="flex flex-1 items-stretch h-14">
+        <slot />
+      </div>
+      <div class="flex-none items-stretch flex h-14 lg:hidden">
+        <NavBarItemPlain
+          @click.prevent="isMenuNavBarActive = !isMenuNavBarActive"
+        >
+          <BaseIcon
+            :path="isMenuNavBarActive ? mdiClose : mdiDotsVertical"
+            size="24"
+          />
+        </NavBarItemPlain>
+      </div>
+      <div
+        class="max-h-screen-menu overflow-y-auto lg:overflow-visible absolute w-screen top-14 left-0 bg-gray-50 shadow-lg lg:w-auto lg:flex lg:static lg:shadow-none dark:bg-slate-800"
+        :class="[isMenuNavBarActive ? 'block' : 'hidden']"
+      >
+        <div class="block lg:flex items-center relative cursor-pointer">
+            <UserAvatarCurrentUser class="w-8 h-8 inline-flex" />
+        </div>
+        <NavBarMenuList :menu="menu" @menu-click="menuClick" />
+        <div class="block lg:flex items-center relative cursor-pointer">
+                <div
+                    @click="menuClick(menuItem, menuItem.dark)"
+                    class="flex items-center mx-2"
+                >
+                    <BaseIcon v-if="menuItem.dark.icon" :path="menuItem.dark.icon" class="transition-colors" />
+                    <span
+                        class="px-2 transition-colors"
+                        :class="{ 'lg:hidden': menuItem.dark.isDesktopNoLabel && menuItem.dark.icon }"
+                    >{{ menuItem.dark.label }}</span>
+                </div>
+                <div
+                    @click="menuClick(menuItem, menuItem.translation)"
+                    class="flex items-center mx-2"
+                >
+                    <BaseIcon v-if="menuItem.translation.icon" :path="menuItem.translation.icon" class="transition-colors" />
+                    <span
+                        class="px-2 transition-colors"
+                        :class="{ 'lg:hidden': menuItem.translation.isDesktopNoLabel && menuItem.translation.icon }"
+                    >{{ menuItem.translation.label }}</span>
+                </div>
+                <div
+                    @click="menuClick(menuItem, menuItem.logout)"
+                    class="flex items-center mx-2"
+                >
+                    <BaseIcon v-if="menuItem.logout.icon" :path="menuItem.logout.icon" class="transition-colors" />
+                    <span
+                        class="px-2 transition-colors"
+                        :class="{ 'lg:hidden': menuItem.logout.isDesktopNoLabel && menuItem.logout.icon }"
+                    >{{ menuItem.logout.label }}</span>
+                </div>
+            </div>
+      </div>
+    </div>
+  </nav>
+</template>
diff --git a/src/Publish/resources/js/Components/NavBarItem.vue b/src/Publish/resources/js/Components/NavBarItem.vue
new file mode 100644
index 0000000..638f91e
--- /dev/null
+++ b/src/Publish/resources/js/Components/NavBarItem.vue
@@ -0,0 +1,132 @@
+<script setup>
+import { mdiChevronUp, mdiChevronDown } from "@mdi/js";
+import { Link } from '@inertiajs/inertia-vue3'
+import { computed, ref, onMounted, onBeforeUnmount } from "vue";
+import { useStyleStore } from "@/Stores/style.js";
+import { useMainStore } from "@/Stores/main.js";
+import BaseIcon from "@/Components/BaseIcon.vue";
+import UserAvatarCurrentUser from "@/Components/UserAvatarCurrentUser.vue";
+import NavBarMenuList from "@/Components/NavBarMenuList.vue";
+import BaseDivider from "@/Components/BaseDivider.vue";
+import { usePage } from '@inertiajs/inertia-vue3'
+
+
+// Add itemHref
+const itemHref = computed(() => props.item.route ? route(props.item.route) : props.item.href)
+
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emit = defineEmits(["menu-click"]);
+
+const is = computed(() => {
+    if (props.item.href) {
+        return 'a'
+    }
+
+    if (props.item.route) {
+        return Link
+    }
+
+    return 'Link'
+})
+
+const styleStore = useStyleStore();
+
+const componentClass = computed(() => {
+  const base = [
+    isDropdownActive.value
+      ? `${styleStore.navBarItemLabelActiveColorStyle} dark:text-slate-400`
+      : `${styleStore.navBarItemLabelStyle} dark:text-white dark:hover:text-slate-400 ${styleStore.navBarItemLabelHoverStyle}`,
+    props.item.menu ? "lg:py-2 lg:px-3" : "py-2 px-3",
+  ];
+
+  if (props.item.isDesktopNoLabel) {
+    base.push("lg:w-16", "lg:justify-center");
+  }
+
+  return base;
+});
+
+
+const itemLabel = computed(() => props.item.isCurrentUser ? usePage().props.value.user.name : props.item.label)
+
+
+const isDropdownActive = ref(false);
+
+const menuClick = (event) => {
+  emit("menu-click", event, props.item);
+
+  if (props.item.menu) {
+    isDropdownActive.value = !isDropdownActive.value;
+  }
+};
+
+const menuClickDropdown = (event, item) => {
+  emit("menu-click", event, item);
+};
+
+const root = ref(null);
+
+const forceClose = (event) => {
+  if (root.value && !root.value.contains(event.target)) {
+    isDropdownActive.value = false;
+  }
+};
+
+onMounted(() => {
+  if (props.item.menu) {
+    window.addEventListener("click", forceClose);
+  }
+});
+
+onBeforeUnmount(() => {
+  if (props.item.menu) {
+    window.removeEventListener("click", forceClose);
+  }
+});
+</script>
+
+<template>
+  <BaseDivider v-if="item.isDivider" nav-bar />
+  <component
+    :is="is"
+    v-else
+    ref="root"
+    class="block lg:flex items-center relative cursor-pointer"
+    :class="componentClass"
+    :href="itemHref"
+    @click="menuClick"
+  >
+    <div
+      class="flex items-center"
+      :class="{
+        'bg-gray-100 dark:bg-slate-800 lg:bg-transparent lg:dark:bg-transparent p-3 lg:p-0':
+          item.menu,
+      }"
+    >
+      <BaseIcon v-if="item.icon" :path="item.icon" class="transition-colors" />
+      <span
+        class="px-2 transition-colors"
+        :class="{ 'lg:hidden': item.isDesktopNoLabel && item.icon }"
+        >{{ itemLabel }}</span
+      >
+      <BaseIcon
+        v-if="item.menu"
+        :path="isDropdownActive ? mdiChevronUp : mdiChevronDown"
+        class="hidden lg:inline-flex transition-colors"
+      />
+    </div>
+    <div
+      v-if="item.menu"
+      class="text-sm border-b border-gray-100 lg:border lg:bg-white lg:absolute lg:top-full lg:left-0 lg:min-w-full lg:z-20 lg:rounded-lg lg:shadow-lg lg:dark:bg-slate-800 dark:border-slate-700"
+      :class="{ 'lg:hidden': !isDropdownActive }"
+    >
+      <NavBarMenuList :menu="item.menu" @menu-click="menuClickDropdown" />
+    </div>
+  </component>
+</template>
diff --git a/src/Publish/resources/js/Components/NavBarItemPlain.vue b/src/Publish/resources/js/Components/NavBarItemPlain.vue
new file mode 100644
index 0000000..ac2c231
--- /dev/null
+++ b/src/Publish/resources/js/Components/NavBarItemPlain.vue
@@ -0,0 +1,27 @@
+<script setup>
+import { useStyleStore } from "@/Stores/style";
+
+defineProps({
+  display: {
+    type: String,
+    default: "flex",
+  },
+  useMargin: Boolean,
+});
+
+const styleStore = useStyleStore();
+</script>
+
+<template>
+  <div
+    :class="[
+      display,
+      styleStore.navBarItemLabelStyle,
+      styleStore.navBarItemLabelHoverStyle,
+      useMargin ? 'my-2 mx-3' : 'py-2 px-3',
+    ]"
+    class="items-center cursor-pointer dark:text-white dark:hover:text-slate-400"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/src/Publish/resources/js/Components/NavBarMenuList.vue b/src/Publish/resources/js/Components/NavBarMenuList.vue
new file mode 100644
index 0000000..19922cb
--- /dev/null
+++ b/src/Publish/resources/js/Components/NavBarMenuList.vue
@@ -0,0 +1,28 @@
+<script setup>
+import NavBarItem from "@@/Components/NavBarItem.vue";
+import {mdiLogout, mdiThemeLightDark, mdiTranslate} from "@mdi/js";
+
+defineProps({
+  menu: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(["menu-click"]);
+
+
+
+const menuClick = (event, item) => {
+  emit("menu-click", event, item);
+};
+</script>
+
+<template>
+      <NavBarItem
+        v-for="(item, index) in menu"
+        :key="index"
+        :item="item"
+        @menu-click="menuClick"
+      />
+</template>
diff --git a/src/Publish/resources/js/Components/NavLink.vue b/src/Publish/resources/js/Components/NavLink.vue
new file mode 100644
index 0000000..f69f39f
--- /dev/null
+++ b/src/Publish/resources/js/Components/NavLink.vue
@@ -0,0 +1,21 @@
+<script setup>
+import { computed } from 'vue';
+import { Link } from '@inertiajs/inertia-vue3';
+
+const props = defineProps({
+    href: String,
+    active: Boolean,
+});
+
+const classes = computed(() => {
+    return props.active
+        ? 'inline-flex items-center px-1 pt-1 border-b-2 border-indigo-400 text-sm font-medium leading-5 text-gray-900 focus:outline-none focus:border-indigo-700 transition'
+        : 'inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition';
+});
+</script>
+
+<template>
+    <Link :href="href" :class="classes">
+        <slot />
+    </Link>
+</template>
diff --git a/src/Publish/resources/js/Components/NotificationBar.vue b/src/Publish/resources/js/Components/NotificationBar.vue
new file mode 100644
index 0000000..5e41aba
--- /dev/null
+++ b/src/Publish/resources/js/Components/NotificationBar.vue
@@ -0,0 +1,65 @@
+<script setup>
+import { ref, computed, useSlots } from "vue";
+import { mdiClose } from "@mdi/js";
+import { colorsBgLight, colorsOutline } from "@/colors.js";
+import BaseLevel from "@/Components/BaseLevel.vue";
+import BaseIcon from "@/Components/BaseIcon.vue";
+import BaseButton from "@/Components/BaseButton.vue";
+
+const props = defineProps({
+  icon: {
+    type: String,
+    default: null,
+  },
+  outline: Boolean,
+  color: {
+    type: String,
+    required: true,
+  },
+});
+
+const componentClass = computed(() =>
+  props.outline ? colorsOutline[props.color] : colorsBgLight[props.color]
+);
+
+const isDismissed = ref(false);
+
+const dismiss = () => {
+  isDismissed.value = true;
+};
+
+const slots = useSlots();
+
+const hasRightSlot = computed(() => slots.right);
+</script>
+
+<template>
+  <div
+    v-if="!isDismissed"
+    :class="componentClass"
+    class="px-3 py-6 md:py-3 mb-6 last:mb-0 border rounded-lg transition-colors duration-150"
+  >
+    <BaseLevel>
+      <div class="flex flex-col md:flex-row items-center">
+        <BaseIcon
+          v-if="icon"
+          :path="icon"
+          w="w-10 md:w-5"
+          h="h-10 md:h-5"
+          size="24"
+          class="md:mr-2"
+        />
+        <span class="text-center md:text-left md:py-2"><slot /></span>
+      </div>
+      <slot v-if="hasRightSlot" name="right" />
+      <BaseButton
+        v-else
+        :icon="mdiClose"
+        small
+        rounded-full
+        color="white"
+        @click="dismiss"
+      />
+    </BaseLevel>
+  </div>
+</template>
diff --git a/src/Publish/resources/js/Components/NotificationBarInCard.vue b/src/Publish/resources/js/Components/NotificationBarInCard.vue
new file mode 100644
index 0000000..2c75259
--- /dev/null
+++ b/src/Publish/resources/js/Components/NotificationBarInCard.vue
@@ -0,0 +1,21 @@
+<script setup>
+import { colorsBgLight } from "@/colors.js";
+
+defineProps({
+  color: {
+    type: String,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div class="flex flex-col mb-6 -mt-6 -mr-6 -ml-6 animate-fade-in">
+    <div
+      :class="[colorsBgLight[color]]"
+      class="rounded-t-2xl flex flex-col p-6 transition-colors"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
diff --git a/src/Publish/resources/js/Components/NumberDynamic.vue b/src/Publish/resources/js/Components/NumberDynamic.vue
new file mode 100644
index 0000000..c92f71f
--- /dev/null
+++ b/src/Publish/resources/js/Components/NumberDynamic.vue
@@ -0,0 +1,63 @@
+<script setup>
+import { computed, ref, watch, onMounted } from "vue";
+import numeral from "numeral";
+
+const props = defineProps({
+  prefix: {
+    type: String,
+    default: null,
+  },
+  suffix: {
+    type: String,
+    default: null,
+  },
+  value: {
+    type: Number,
+    default: 0,
+  },
+  duration: {
+    type: Number,
+    default: 500,
+  },
+});
+
+const newValue = ref(0);
+
+const newValueFormatted = computed(() =>
+  newValue.value < 1000 ? newValue.value : numeral(newValue.value).format("0,0")
+);
+
+const value = computed(() => props.value);
+
+const grow = (m) => {
+  const v = Math.ceil(newValue.value + m);
+
+  if (v > value.value) {
+    newValue.value = value.value;
+    return false;
+  }
+
+  newValue.value = v;
+
+  setTimeout(() => {
+    grow(m);
+  }, 25);
+};
+
+const growInit = () => {
+  newValue.value = 0;
+  grow(props.value / (props.duration / 25));
+};
+
+watch(value, () => {
+  growInit();
+});
+
+onMounted(() => {
+  growInit();
+});
+</script>
+
+<template>
+  <div>{{ prefix }}{{ newValueFormatted }}{{ suffix }}</div>
+</template>
diff --git a/src/Publish/resources/js/Components/OverlayLayer.vue b/src/Publish/resources/js/Components/OverlayLayer.vue
new file mode 100644
index 0000000..13821e9
--- /dev/null
+++ b/src/Publish/resources/js/Components/OverlayLayer.vue
@@ -0,0 +1,52 @@
+<script setup>
+import { useStyleStore } from "@/Stores/style.js";
+
+defineProps({
+  zIndex: {
+    type: String,
+    default: "z-50",
+  },
+  type: {
+    type: String,
+    default: "flex",
+  },
+});
+
+const emit = defineEmits(["overlay-click"]);
+
+const overlayClick = (event) => {
+  emit("overlay-click", event);
+};
+
+const styleStore = useStyleStore();
+</script>
+
+<template>
+  <div
+    :class="[type, zIndex]"
+    class="items-center flex-col justify-center overflow-hidden fixed inset-0"
+  >
+    <transition
+      enter-active-class="transition duration-150 ease-in"
+      enter-from-class="opacity-0"
+      enter-to-class="opacity-100"
+      leave-active-class="transition duration-150 ease-in"
+      leave-from-class="opacity-100"
+      leave-to-class="opacity-0"
+    >
+      <div
+        class="absolute inset-0 bg-gradient-to-tr opacity-90 dark:from-gray-700 dark:via-gray-900 dark:to-gray-700"
+        :class="styleStore.overlayStyle"
+        @click="overlayClick"
+      />
+    </transition>
+    <transition
+      enter-active-class="transition duration-100 ease-out"
+      enter-from-class="transform scale-95 opacity-0"
+      enter-to-class="transform scale-100 opacity-100"
+      leave-active-class="animate-fade-out"
+    >
+      <slot />
+    </transition>
+  </div>
+</template>
diff --git a/src/Publish/resources/js/Components/PillTag.vue b/src/Publish/resources/js/Components/PillTag.vue
new file mode 100644
index 0000000..eb1e5d5
--- /dev/null
+++ b/src/Publish/resources/js/Components/PillTag.vue
@@ -0,0 +1,55 @@
+<script setup>
+import { computed } from "vue";
+import { colorsBgLight, colorsOutline } from "@/colors.js";
+import BaseIcon from "@/Components/BaseIcon.vue";
+
+const props = defineProps({
+  label: {
+    type: String,
+    required: true,
+  },
+  color: {
+    type: String,
+    required: true,
+  },
+  icon: {
+    type: String,
+    default: null,
+  },
+  small: Boolean,
+  outline: Boolean,
+  wrapped: Boolean,
+});
+
+const componentClass = computed(() => {
+  const baseColor = props.outline
+    ? colorsOutline[props.color]
+    : colorsBgLight[props.color];
+
+  const base = [
+    "border",
+    props.small ? "py-1 px-4 text-xs rounded-full" : "py-2 px-6 rounded-full",
+    baseColor,
+  ];
+
+  if (!props.wrapped) {
+    base.push(props.small ? "mr-1.5" : "mr-3", "last:mr-0");
+  }
+
+  return base;
+});
+</script>
+
+<template>
+  <div class="inline-flex items-center capitalize" :class="componentClass">
+    <BaseIcon
+      v-if="icon"
+      :path="icon"
+      h="h-4"
+      w="w-4"
+      :class="small ? 'mr-1' : 'mr-2'"
+      :size="small ? 14 : 16"
+    />
+    <span>{{ label }}</span>
+  </div>
+</template>
diff --git a/src/Publish/resources/js/Components/PillTagTrend.vue b/src/Publish/resources/js/Components/PillTagTrend.vue
new file mode 100644
index 0000000..667b739
--- /dev/null
+++ b/src/Publish/resources/js/Components/PillTagTrend.vue
@@ -0,0 +1,53 @@
+<script setup>
+import { computed } from "vue";
+import { mdiChevronUp, mdiChevronDown, mdiAlertCircleOutline } from "@mdi/js";
+import PillTag from "@/Components/PillTag.vue";
+
+const props = defineProps({
+  trend: {
+    type: String,
+    required: true,
+  },
+  trendType: {
+    type: String,
+    default: null,
+  },
+  small: Boolean,
+});
+
+const trendStyle = computed(() => {
+  if (props.trendType === "up") {
+    return {
+      icon: mdiChevronUp,
+      style: "success",
+    };
+  }
+
+  if (props.trendType === "down") {
+    return {
+      icon: mdiChevronDown,
+      style: "danger",
+    };
+  }
+
+  if (props.trendType === "alert") {
+    return {
+      icon: mdiAlertCircleOutline,
+      style: "warning",
+    };
+  }
+
+  return {
+    style: "info",
+  };
+});
+</script>
+
+<template>
+  <PillTag
+    :label="trend"
+    :color="trendStyle.style"
+    :icon="trendStyle.icon"
+    :small="small"
+  />
+</template>
diff --git a/src/Publish/resources/js/Components/ResponsiveNavLink.vue b/src/Publish/resources/js/Components/ResponsiveNavLink.vue
new file mode 100644
index 0000000..1dd2e19
--- /dev/null
+++ b/src/Publish/resources/js/Components/ResponsiveNavLink.vue
@@ -0,0 +1,28 @@
+<script setup>
+import { computed } from 'vue';
+import { Link } from '@inertiajs/inertia-vue3';
+
+const props = defineProps({
+    active: Boolean,
+    href: String,
+    as: String,
+});
+
+const classes = computed(() => {
+    return props.active
+        ? 'block pl-3 pr-4 py-2 border-l-4 border-indigo-400 text-base font-medium text-indigo-700 bg-indigo-50 focus:outline-none focus:text-indigo-800 focus:bg-indigo-100 focus:border-indigo-700 transition'
+        : 'block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 focus:outline-none focus:text-gray-800 focus:bg-gray-50 focus:border-gray-300 transition';
+});
+</script>
+
+<template>
+    <div>
+        <button v-if="as == 'button'" :class="classes" class="w-full text-left">
+            <slot />
+        </button>
+
+        <Link v-else :href="href" :class="classes">
+            <slot />
+        </Link>
+    </div>
+</template>
diff --git a/src/Publish/resources/js/Components/SecondaryButton.vue b/src/Publish/resources/js/Components/SecondaryButton.vue
new file mode 100644
index 0000000..371f097
--- /dev/null
+++ b/src/Publish/resources/js/Components/SecondaryButton.vue
@@ -0,0 +1,14 @@
+<script setup>
+defineProps({
+    type: {
+        type: String,
+        default: 'button',
+    },
+});
+</script>
+
+<template>
+    <button :type="type" class="inline-flex items-center px-4 py-2 bg-white border border-gray-300 rounded-md font-semibold text-xs text-gray-700 uppercase tracking-widest shadow-sm hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:ring focus:ring-blue-200 active:text-gray-800 active:bg-gray-50 disabled:opacity-25 transition">
+        <slot />
+    </button>
+</template>
diff --git a/src/Publish/resources/js/Components/SectionBanner.vue b/src/Publish/resources/js/Components/SectionBanner.vue
new file mode 100644
index 0000000..1f08840
--- /dev/null
+++ b/src/Publish/resources/js/Components/SectionBanner.vue
@@ -0,0 +1,28 @@
+<script setup>
+import { computed } from "vue";
+import { gradientBgPurplePink, gradientBgPinkRed } from "@/colors";
+
+const props = defineProps({
+  bg: {
+    type: String,
+    required: true,
+    validator: (value) => ["purplePink", "pinkRed"].includes(value),
+  },
+});
+
+const colorClass = computed(() => {
+  switch (props.bg) {
+    case "purplePink":
+      return gradientBgPurplePink;
+    case "pinkRed":
+      return gradientBgPinkRed;
+  }
+
+  return "";
+});
+</script>
+<template>
+  <div :class="colorClass" class="mt-6 mb-6 rounded-2xl py-12 px-6 text-center">
+    <slot />
+  </div>
+</template>
diff --git a/src/Publish/resources/js/Components/SectionBannerStarOnGitHub.vue b/src/Publish/resources/js/Components/SectionBannerStarOnGitHub.vue
new file mode 100644
index 0000000..4a1475f
--- /dev/null
+++ b/src/Publish/resources/js/Components/SectionBannerStarOnGitHub.vue
@@ -0,0 +1,21 @@
+<script setup>
+import { mdiGithub } from "@mdi/js";
+import BaseButton from "@/Components/BaseButton.vue";
+import SectionBanner from "@/Components/SectionBanner.vue";
+</script>
+<template>
+  <SectionBanner bg="pinkRed">
+    <h1 class="text-3xl text-white mb-6">
+      Like the project? Please star on <b>GitHub</b> ;-)
+    </h1>
+    <div>
+      <BaseButton
+        href="https://github.com/justboil/admin-one-vue-tailwind"
+        :icon="mdiGithub"
+        label="GitHub"
+        target="_blank"
+        rounded-full
+      />
+    </div>
+  </SectionBanner>
+</template>
diff --git a/src/Publish/resources/js/Components/SectionBorder.vue b/src/Publish/resources/js/Components/SectionBorder.vue
new file mode 100644
index 0000000..707f566
--- /dev/null
+++ b/src/Publish/resources/js/Components/SectionBorder.vue
@@ -0,0 +1,7 @@
+<template>
+    <div class="hidden sm:block">
+        <div class="py-8">
+            <div class="border-t border-gray-200" />
+        </div>
+    </div>
+</template>
diff --git a/src/Publish/resources/js/Components/SectionFullScreen.vue b/src/Publish/resources/js/Components/SectionFullScreen.vue
new file mode 100644
index 0000000..a7d7b4d
--- /dev/null
+++ b/src/Publish/resources/js/Components/SectionFullScreen.vue
@@ -0,0 +1,41 @@
+<script setup>
+import { computed } from "vue";
+import { useStyleStore } from "@/Stores/style";
+import {
+  gradientBgPurplePink,
+  gradientBgDark,
+  gradientBgPinkRed,
+} from "@/colors";
+
+const props = defineProps({
+  bg: {
+    type: String,
+    required: true,
+    validator: (value) => ["purplePink", "pinkRed"].includes(value),
+  },
+});
+
+const colorClass = computed(() => {
+  if (useStyleStore().darkMode) {
+    return gradientBgDark;
+  }
+
+  switch (props.bg) {
+    case "purplePink":
+      return gradientBgPurplePink;
+    case "pinkRed":
+      return gradientBgPinkRed;
+  }
+
+  return "";
+});
+</script>
+
+<template>
+  <div
+    class="flex min-h-screen items-center justify-center"
+    :class="colorClass"
+  >
+    <slot card-class="w-11/12 md:w-7/12 lg:w-6/12 xl:w-4/12 shadow-2xl" />
+  </div>
+</template>
diff --git a/src/Publish/resources/js/Components/SectionMain.vue b/src/Publish/resources/js/Components/SectionMain.vue
new file mode 100644
index 0000000..db3d26b
--- /dev/null
+++ b/src/Publish/resources/js/Components/SectionMain.vue
@@ -0,0 +1,9 @@
+<script setup>
+import { containerMaxW } from "@/config.js";
+</script>
+
+<template>
+  <section class="p-6" :class="containerMaxW">
+    <slot />
+  </section>
+</template>
diff --git a/src/Publish/resources/js/Components/SectionTitle.vue b/src/Publish/resources/js/Components/SectionTitle.vue
new file mode 100644
index 0000000..273116e
--- /dev/null
+++ b/src/Publish/resources/js/Components/SectionTitle.vue
@@ -0,0 +1,17 @@
+<template>
+    <div class="md:col-span-1 flex justify-between">
+        <div class="px-4 sm:px-0">
+            <h3 class="text-lg font-medium text-gray-900">
+                <slot name="title" />
+            </h3>
+
+            <p class="mt-1 text-sm text-gray-600">
+                <slot name="description" />
+            </p>
+        </div>
+
+        <div class="px-4 sm:px-0">
+            <slot name="aside" />
+        </div>
+    </div>
+</template>
diff --git a/src/Publish/resources/js/Components/SectionTitleLineWithButton.vue b/src/Publish/resources/js/Components/SectionTitleLineWithButton.vue
new file mode 100644
index 0000000..f862ba1
--- /dev/null
+++ b/src/Publish/resources/js/Components/SectionTitleLineWithButton.vue
@@ -0,0 +1,44 @@
+<script setup>
+import { mdiCog } from "@mdi/js";
+import { useSlots, computed } from "vue";
+import BaseIcon from "@/Components/BaseIcon.vue";
+import BaseButton from "@/Components/BaseButton.vue";
+import IconRounded from "@/Components/IconRounded.vue";
+
+defineProps({
+  icon: {
+    type: String,
+    default: null,
+  },
+  title: {
+    type: String,
+    required: true,
+  },
+  main: Boolean,
+});
+
+const hasSlot = computed(() => useSlots().default);
+</script>
+
+<template>
+  <section
+    :class="{ 'pt-6': !main }"
+    class="mb-6 flex items-center justify-between"
+  >
+    <div class="flex items-center justify-start">
+      <IconRounded
+        v-if="icon && main"
+        :icon="icon"
+        color="light"
+        class="mr-3"
+        bg
+      />
+      <BaseIcon v-else-if="icon" :path="icon" class="mr-2" size="20" />
+      <h1 :class="main ? 'text-3xl' : 'text-2xl'" class="leading-tight">
+        {{ title }}
+      </h1>
+    </div>
+    <slot v-if="hasSlot" />
+    <BaseButton v-else :icon="mdiCog" color="whiteDark" />
+  </section>
+</template>
diff --git a/src/Publish/resources/js/Components/TableCheckboxCell.vue b/src/Publish/resources/js/Components/TableCheckboxCell.vue
new file mode 100644
index 0000000..620f0e4
--- /dev/null
+++ b/src/Publish/resources/js/Components/TableCheckboxCell.vue
@@ -0,0 +1,27 @@
+<script setup>
+import { ref, watch } from "vue";
+
+defineProps({
+  type: {
+    type: String,
+    default: "td",
+  },
+});
+
+const emit = defineEmits(["checked"]);
+
+const checked = ref(false);
+
+watch(checked, (newVal) => {
+  emit("checked", newVal);
+});
+</script>
+
+<template>
+  <component :is="type" class="lg:w-1">
+    <label class="checkbox">
+      <input v-model="checked" type="checkbox" />
+      <span class="check" />
+    </label>
+  </component>
+</template>
diff --git a/src/Publish/resources/js/Components/TableSampleClients.vue b/src/Publish/resources/js/Components/TableSampleClients.vue
new file mode 100644
index 0000000..1ef56f8
--- /dev/null
+++ b/src/Publish/resources/js/Components/TableSampleClients.vue
@@ -0,0 +1,196 @@
+<script setup>
+import { computed, ref } from "vue";
+import { useMainStore } from "@/Stores/main";
+import { mdiEye, mdiTrashCan } from "@mdi/js";
+import CardBoxModal from "@/Components/CardBoxModal.vue";
+import TableCheckboxCell from "@/Components/TableCheckboxCell.vue";
+import BaseLevel from "@/Components/BaseLevel.vue";
+import BaseButtons from "@/Components/BaseButtons.vue";
+import BaseButton from "@/Components/BaseButton.vue";
+import UserAvatar from "@/Components/UserAvatar.vue";
+
+defineProps({
+  checkable: Boolean,
+});
+
+const mainStore = useMainStore();
+
+const items = computed(() => [
+    {
+        name: "Fady Mondy",
+        company: "QTS",
+        city: "Cairo",
+        progress: 80,
+        created: new Date()
+
+    }
+
+]);
+
+const isModalActive = ref(false);
+
+const isModalDangerActive = ref(false);
+
+const perPage = ref(5);
+
+const currentPage = ref(0);
+
+const checkedRows = ref([]);
+
+const itemsPaginated = computed(() =>
+  items.value.slice(
+    perPage.value * currentPage.value,
+    perPage.value * (currentPage.value + 1)
+  )
+);
+
+const numPages = computed(() => Math.ceil(items.value.length / perPage.value));
+
+const currentPageHuman = computed(() => currentPage.value + 1);
+
+const pagesList = computed(() => {
+  const pagesList = [];
+
+  for (let i = 0; i < numPages.value; i++) {
+    pagesList.push(i);
+  }
+
+  return pagesList;
+});
+
+const remove = (arr, cb) => {
+  const newArr = [];
+
+  arr.forEach((item) => {
+    if (!cb(item)) {
+      newArr.push(item);
+    }
+  });
+
+  return newArr;
+};
+
+const checked = (isChecked, client) => {
+  if (isChecked) {
+    checkedRows.value.push(client);
+  } else {
+    checkedRows.value = remove(
+      checkedRows.value,
+      (row) => row.id === client.id
+    );
+  }
+};
+</script>
+
+<template>
+  <CardBoxModal v-model="isModalActive" title="Sample modal">
+    <p>Lorem ipsum dolor sit amet <b>adipiscing elit</b></p>
+    <p>This is sample modal</p>
+  </CardBoxModal>
+
+  <CardBoxModal
+    v-model="isModalDangerActive"
+    title="Please confirm"
+    button="danger"
+    has-cancel
+  >
+    <p>Lorem ipsum dolor sit amet <b>adipiscing elit</b></p>
+    <p>This is sample modal</p>
+  </CardBoxModal>
+
+  <div v-if="checkedRows.length" class="p-3 bg-gray-100/50 dark:bg-slate-800">
+    <span
+      v-for="checkedRow in checkedRows"
+      :key="checkedRow.id"
+      class="inline-block px-2 py-1 rounded-sm mr-2 text-sm bg-gray-100 dark:bg-slate-700"
+    >
+      {{ checkedRow.name }}
+    </span>
+  </div>
+
+  <table>
+    <thead>
+      <tr>
+        <th v-if="checkable" />
+        <th />
+        <th>Name</th>
+        <th>Company</th>
+        <th>City</th>
+        <th>Progress</th>
+        <th>Created</th>
+        <th />
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="client in itemsPaginated" :key="client.id">
+        <TableCheckboxCell
+          v-if="checkable"
+          @checked="checked($event, client)"
+        />
+        <td class="border-b-0 lg:w-6 before:hidden">
+          <UserAvatar
+            :username="client.name"
+            class="w-24 h-24 mx-auto lg:w-6 lg:h-6"
+          />
+        </td>
+        <td data-label="Name">
+          {{ client.name }}
+        </td>
+        <td data-label="Company">
+          {{ client.company }}
+        </td>
+        <td data-label="City">
+          {{ client.city }}
+        </td>
+        <td data-label="Progress" class="lg:w-32">
+          <progress
+            class="flex w-2/5 self-center lg:w-full"
+            max="100"
+            :value="client.progress"
+          >
+            {{ client.progress }}
+          </progress>
+        </td>
+        <td data-label="Created" class="lg:w-1 whitespace-nowrap">
+          <small
+            class="text-gray-500 dark:text-slate-400"
+            :title="client.created"
+            >{{ client.created }}</small
+          >
+        </td>
+        <td class="before:hidden lg:w-1 whitespace-nowrap">
+          <BaseButtons type="justify-start lg:justify-end" no-wrap>
+            <BaseButton
+              color="info"
+              :icon="mdiEye"
+              small
+              @click="isModalActive = true"
+            />
+            <BaseButton
+              color="danger"
+              :icon="mdiTrashCan"
+              small
+              @click="isModalDangerActive = true"
+            />
+          </BaseButtons>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+  <div class="p-3 lg:px-6 border-t border-gray-100 dark:border-slate-800">
+    <BaseLevel>
+      <BaseButtons>
+        <BaseButton
+          v-for="page in pagesList"
+          :key="page"
+          :active="page === currentPage"
+          :label="page + 1"
+          :color="page === currentPage ? 'lightDark' : 'whiteDark'"
+          small
+          @click="currentPage = page"
+        />
+      </BaseButtons>
+      <small>Page {{ currentPageHuman }} of {{ numPages }}</small>
+    </BaseLevel>
+  </div>
+</template>
diff --git a/src/Publish/resources/js/Components/UserAvatar.vue b/src/Publish/resources/js/Components/UserAvatar.vue
new file mode 100644
index 0000000..b7206d7
--- /dev/null
+++ b/src/Publish/resources/js/Components/UserAvatar.vue
@@ -0,0 +1,40 @@
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+  username: {
+    type: String,
+    required: true,
+  },
+  avatar: {
+    type: String,
+    default: null,
+  },
+  api: {
+    type: String,
+    default: "avataaars",
+  },
+});
+
+const username = computed(() => props.username);
+
+const avatar = computed(
+  () => {
+      return props.avatar ??
+      `https://avatars.dicebear.com/api/${props.api}/${props.username}.svg`
+  }
+
+);
+
+
+</script>
+
+<template>
+  <div>
+    <img
+      :src="avatar"
+      :alt="username"
+      class="rounded-full block h-auto w-full max-w-full bg-gray-100 dark:bg-slate-800"
+    />
+  </div>
+</template>
diff --git a/src/Publish/resources/js/Components/UserAvatarCurrentUser.vue b/src/Publish/resources/js/Components/UserAvatarCurrentUser.vue
new file mode 100644
index 0000000..03bf838
--- /dev/null
+++ b/src/Publish/resources/js/Components/UserAvatarCurrentUser.vue
@@ -0,0 +1,12 @@
+<script setup>
+import { useMainStore } from "@/Stores/main";
+import UserAvatar from "@/Components/UserAvatar.vue";
+import { usePage } from '@inertiajs/inertia-vue3'
+import {computed} from "vue";
+
+
+</script>
+
+<template>
+  <UserAvatar :username="usePage().props.value.user.name" api="initials" />
+</template>
diff --git a/src/Publish/resources/js/Components/UserCard.vue b/src/Publish/resources/js/Components/UserCard.vue
new file mode 100644
index 0000000..61c6403
--- /dev/null
+++ b/src/Publish/resources/js/Components/UserCard.vue
@@ -0,0 +1,43 @@
+<script setup>
+import { computed, ref } from "vue";
+import { useMainStore } from "@/Stores/main";
+import { mdiCheckDecagram } from "@mdi/js";
+import BaseLevel from "@/Components/BaseLevel.vue";
+import UserAvatarCurrentUser from "@/Components/UserAvatarCurrentUser.vue";
+import CardBox from "@/Components/CardBox.vue";
+import FormCheckRadio from "@/Components/FormCheckRadio.vue";
+import PillTag from "@/Components/PillTag.vue";
+
+const mainStore = useMainStore();
+
+const userName = computed(() => mainStore.userName);
+
+const userSwitchVal = ref(false);
+</script>
+
+<template>
+  <CardBox>
+    <BaseLevel type="justify-around lg:justify-center">
+      <UserAvatarCurrentUser class="lg:mx-12" />
+      <div class="space-y-3 text-center md:text-left lg:mx-12">
+        <div class="flex justify-center md:block">
+          <FormCheckRadio
+            v-model="userSwitchVal"
+            name="notifications-switch"
+            type="switch"
+            label="Notifications"
+            :input-value="true"
+          />
+        </div>
+        <h1 class="text-2xl">
+          Howdy, <b>{{ userName }}</b
+          >!
+        </h1>
+        <p>Last login <b>12 mins ago</b> from <b>127.0.0.1</b></p>
+        <div class="flex justify-center md:block">
+          <PillTag label="Verified" color="info" :icon="mdiCheckDecagram" />
+        </div>
+      </div>
+    </BaseLevel>
+  </CardBox>
+</template>
diff --git a/src/Publish/resources/js/Components/Welcome.vue b/src/Publish/resources/js/Components/Welcome.vue
new file mode 100644
index 0000000..dcdd286
--- /dev/null
+++ b/src/Publish/resources/js/Components/Welcome.vue
@@ -0,0 +1,138 @@
+<script setup>
+import JetApplicationLogo from '@/Components/ApplicationLogo.vue';
+</script>
+
+<template>
+    <div>
+        <div class="p-6 sm:px-20 bg-white border-b border-gray-200">
+            <div>
+                <JetApplicationLogo class="block h-12 w-auto" />
+            </div>
+
+            <div class="mt-8 text-2xl">
+                Welcome to your Jetstream application!
+            </div>
+
+            <div class="mt-6 text-gray-500">
+                Laravel Jetstream provides a beautiful, robust starting point for your next Laravel application. Laravel is designed
+                to help you build your application using a development environment that is simple, powerful, and enjoyable. We believe
+                you should love expressing your creativity through programming, so we have spent time carefully crafting the Laravel
+                ecosystem to be a breath of fresh air. We hope you love it.
+            </div>
+        </div>
+
+        <div class="bg-gray-200 bg-opacity-25 grid grid-cols-1 md:grid-cols-2">
+            <div class="p-6">
+                <div class="flex items-center">
+                    <svg
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        viewBox="0 0 24 24"
+                        class="w-8 h-8 text-gray-400"
+                    ><path d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" /></svg>
+                    <div class="ml-4 text-lg text-gray-600 leading-7 font-semibold">
+                        <a href="https://laravel.com/docs">Documentation</a>
+                    </div>
+                </div>
+
+                <div class="ml-12">
+                    <div class="mt-2 text-sm text-gray-500">
+                        Laravel has wonderful documentation covering every aspect of the framework. Whether you're new to the framework or have previous experience, we recommend reading all of the documentation from beginning to end.
+                    </div>
+
+                    <a href="https://laravel.com/docs">
+                        <div class="mt-3 flex items-center text-sm font-semibold text-indigo-700">
+                            <div>Explore the documentation</div>
+
+                            <div class="ml-1 text-indigo-500">
+                                <svg viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>
+                            </div>
+                        </div>
+                    </a>
+                </div>
+            </div>
+
+            <div class="p-6 border-t border-gray-200 md:border-t-0 md:border-l">
+                <div class="flex items-center">
+                    <svg
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        viewBox="0 0 24 24"
+                        class="w-8 h-8 text-gray-400"
+                    ><path d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" /><path d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
+                    <div class="ml-4 text-lg text-gray-600 leading-7 font-semibold">
+                        <a href="https://laracasts.com">Laracasts</a>
+                    </div>
+                </div>
+
+                <div class="ml-12">
+                    <div class="mt-2 text-sm text-gray-500">
+                        Laracasts offers thousands of video tutorials on Laravel, PHP, and JavaScript development. Check them out, see for yourself, and massively level up your development skills in the process.
+                    </div>
+
+                    <a href="https://laracasts.com">
+                        <div class="mt-3 flex items-center text-sm font-semibold text-indigo-700">
+                            <div>Start watching Laracasts</div>
+
+                            <div class="ml-1 text-indigo-500">
+                                <svg viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>
+                            </div>
+                        </div>
+                    </a>
+                </div>
+            </div>
+
+            <div class="p-6 border-t border-gray-200">
+                <div class="flex items-center">
+                    <svg
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        viewBox="0 0 24 24"
+                        class="w-8 h-8 text-gray-400"
+                    ><path d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
+                    <div class="ml-4 text-lg text-gray-600 leading-7 font-semibold">
+                        <a href="https://tailwindcss.com/">Tailwind</a>
+                    </div>
+                </div>
+
+                <div class="ml-12">
+                    <div class="mt-2 text-sm text-gray-500">
+                        Laravel Jetstream is built with Tailwind, an amazing utility first CSS framework that doesn't get in your way. You'll be amazed how easily you can build and maintain fresh, modern designs with this wonderful framework at your fingertips.
+                    </div>
+                </div>
+            </div>
+
+            <div class="p-6 border-t border-gray-200 md:border-l">
+                <div class="flex items-center">
+                    <svg
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        viewBox="0 0 24 24"
+                        class="w-8 h-8 text-gray-400"
+                    ><path d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" /></svg>
+                    <div class="ml-4 text-lg text-gray-600 leading-7 font-semibold">
+                        Authentication
+                    </div>
+                </div>
+
+                <div class="ml-12">
+                    <div class="mt-2 text-sm text-gray-500">
+                        Authentication and registration views are included with Laravel Jetstream, as well as support for user email verification and resetting forgotten passwords. So, you're free to get started what matters most: building your application.
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/src/Publish/resources/js/Jetstream/ActionMessage.vue b/src/Publish/resources/js/Jetstream/ActionMessage.vue
new file mode 100644
index 0000000..effc749
--- /dev/null
+++ b/src/Publish/resources/js/Jetstream/ActionMessage.vue
@@ -0,0 +1,17 @@
+<template>
+    <div>
+        <transition leave-active-class="transition ease-in duration-1000" leave-from-class="opacity-100" leave-to-class="opacity-0">
+            <div v-show="on" class="text-sm text-gray-600">
+                <slot />
+            </div>
+        </transition>
+    </div>
+</template>
+
+<script>
+    import { defineComponent } from 'vue'
+
+    export default defineComponent({
+        props: ['on'],
+    })
+</script>
diff --git a/src/Publish/resources/js/Jetstream/ActionSection.vue b/src/Publish/resources/js/Jetstream/ActionSection.vue
new file mode 100644
index 0000000..ea8c67f
--- /dev/null
+++ b/src/Publish/resources/js/Jetstream/ActionSection.vue
@@ -0,0 +1,25 @@
+<template>
+    <div class="md:grid md:grid-cols-3 md:gap-6">
+        <jet-section-title>
+            <template #title><slot name="title"></slot></template>
+            <template #description><slot name="description"></slot></template>
+        </jet-section-title>
+
+        <div class="mt-5 md:mt-0 md:col-span-2">
+            <div class="px-4 py-5 sm:p-6 bg-white shadow sm:rounded-lg">
+                <slot name="content"></slot>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import { defineComponent } from 'vue'
+    import JetSectionTitle from './SectionTitle.vue'
+
+    export default defineComponent({
+        components: {
+            JetSectionTitle,
+        }
+    })
+</script>
diff --git a/src/Publish/resources/js/Jetstream/ApplicationLogo.vue b/src/Publish/resources/js/Jetstream/ApplicationLogo.vue
new file mode 100644
index 0000000..cea073e
--- /dev/null
+++ b/src/Publish/resources/js/Jetstream/ApplicationLogo.vue
@@ -0,0 +1,7 @@
+<template>
+    <svg viewBox="0 0 317 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M74.09 30.04V13h-4.14v21H82.1v-3.96h-8.01zM95.379 19v1.77c-1.08-1.35-2.7-2.19-4.89-2.19-3.99 0-7.29 3.45-7.29 7.92s3.3 7.92 7.29 7.92c2.19 0 3.81-.84 4.89-2.19V34h3.87V19h-3.87zm-4.17 11.73c-2.37 0-4.14-1.71-4.14-4.23 0-2.52 1.77-4.23 4.14-4.23 2.4 0 4.17 1.71 4.17 4.23 0 2.52-1.77 4.23-4.17 4.23zM106.628 21.58V19h-3.87v15h3.87v-7.17c0-3.15 2.55-4.05 4.56-3.81V18.7c-1.89 0-3.78.84-4.56 2.88zM124.295 19v1.77c-1.08-1.35-2.7-2.19-4.89-2.19-3.99 0-7.29 3.45-7.29 7.92s3.3 7.92 7.29 7.92c2.19 0 3.81-.84 4.89-2.19V34h3.87V19h-3.87zm-4.17 11.73c-2.37 0-4.14-1.71-4.14-4.23 0-2.52 1.77-4.23 4.14-4.23 2.4 0 4.17 1.71 4.17 4.23 0 2.52-1.77 4.23-4.17 4.23zM141.544 19l-3.66 10.5-3.63-10.5h-4.26l5.7 15h4.41l5.7-15h-4.26zM150.354 28.09h11.31c.09-.51.15-1.02.15-1.59 0-4.41-3.15-7.92-7.59-7.92-4.71 0-7.92 3.45-7.92 7.92s3.18 7.92 8.22 7.92c2.88 0 5.13-1.17 6.54-3.21l-3.12-1.8c-.66.87-1.86 1.5-3.36 1.5-2.04 0-3.69-.84-4.23-2.82zm-.06-3c.45-1.92 1.86-3.03 3.93-3.03 1.62 0 3.24.87 3.72 3.03h-7.65zM164.516 34h3.87V12.1h-3.87V34zM185.248 34.36c3.69 0 6.9-2.01 6.9-6.3V13h-2.1v15.06c0 3.03-2.07 4.26-4.8 4.26-2.19 0-3.93-.78-4.62-2.61l-1.77 1.05c1.05 2.43 3.57 3.6 6.39 3.6zM203.124 18.64c-4.65 0-7.83 3.45-7.83 7.86 0 4.53 3.24 7.86 7.98 7.86 3.03 0 5.34-1.41 6.6-3.45l-1.74-1.02c-.81 1.44-2.46 2.55-4.83 2.55-3.18 0-5.55-1.89-5.97-4.95h13.17c.03-.3.06-.63.06-.93 0-4.11-2.85-7.92-7.44-7.92zm0 1.92c2.58 0 4.98 1.71 5.4 5.01h-11.19c.39-2.94 2.64-5.01 5.79-5.01zM221.224 20.92V19h-4.32v-4.2l-1.98.6V19h-3.15v1.92h3.15v9.09c0 3.6 2.25 4.59 6.3 3.99v-1.74c-2.91.12-4.32.33-4.32-2.25v-9.09h4.32zM225.176 22.93c0-1.62 1.59-2.37 3.15-2.37 1.44 0 2.97.57 3.6 2.1l1.65-.96c-.87-1.86-2.79-3.06-5.25-3.06-3 0-5.13 1.89-5.13 4.29 0 5.52 8.76 3.39 8.76 7.11 0 1.77-1.68 2.4-3.45 2.4-2.01 0-3.57-.99-4.11-2.52l-1.68.99c.75 1.92 2.79 3.45 5.79 3.45 3.21 0 5.43-1.77 5.43-4.32 0-5.52-8.76-3.39-8.76-7.11zM244.603 20.92V19h-4.32v-4.2l-1.98.6V19h-3.15v1.92h3.15v9.09c0 3.6 2.25 4.59 6.3 3.99v-1.74c-2.91.12-4.32.33-4.32-2.25v-9.09h4.32zM249.883 21.49V19h-1.98v15h1.98v-8.34c0-3.72 2.34-4.98 4.74-4.98v-1.92c-1.92 0-3.69.63-4.74 2.73zM263.358 18.64c-4.65 0-7.83 3.45-7.83 7.86 0 4.53 3.24 7.86 7.98 7.86 3.03 0 5.34-1.41 6.6-3.45l-1.74-1.02c-.81 1.44-2.46 2.55-4.83 2.55-3.18 0-5.55-1.89-5.97-4.95h13.17c.03-.3.06-.63.06-.93 0-4.11-2.85-7.92-7.44-7.92zm0 1.92c2.58 0 4.98 1.71 5.4 5.01h-11.19c.39-2.94 2.64-5.01 5.79-5.01zM286.848 19v2.94c-1.26-2.01-3.39-3.3-6.06-3.3-4.23 0-7.74 3.42-7.74 7.86s3.51 7.86 7.74 7.86c2.67 0 4.8-1.29 6.06-3.3V34h1.98V19h-1.98zm-5.91 13.44c-3.33 0-5.91-2.61-5.91-5.94 0-3.33 2.58-5.94 5.91-5.94s5.91 2.61 5.91 5.94c0 3.33-2.58 5.94-5.91 5.94zM309.01 18.64c-1.92 0-3.75.87-4.86 2.73-.84-1.74-2.46-2.73-4.56-2.73-1.8 0-3.42.72-4.59 2.55V19h-1.98v15H295v-8.31c0-3.72 2.16-5.13 4.32-5.13 2.13 0 3.51 1.41 3.51 4.08V34h1.98v-8.31c0-3.72 1.86-5.13 4.17-5.13 2.13 0 3.66 1.41 3.66 4.08V34h1.98v-9.36c0-3.75-2.31-6-5.61-6z" fill="#000"/>
+      <path d="M11.395 44.428C4.557 40.198 0 32.632 0 24 0 10.745 10.745 0 24 0a23.891 23.891 0 0113.997 4.502c-.2 17.907-11.097 33.245-26.602 39.926z" fill="#6875F5"/>
+      <path d="M14.134 45.885A23.914 23.914 0 0024 48c13.255 0 24-10.745 24-24 0-3.516-.756-6.856-2.115-9.866-4.659 15.143-16.608 27.092-31.75 31.751z" fill="#6875F5"/>
+    </svg>
+</template>
diff --git a/src/Publish/resources/js/Jetstream/ApplicationMark.vue b/src/Publish/resources/js/Jetstream/ApplicationMark.vue
new file mode 100644
index 0000000..8f12718
--- /dev/null
+++ b/src/Publish/resources/js/Jetstream/ApplicationMark.vue
@@ -0,0 +1,6 @@
+<template>
+    <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M11.395 44.428C4.557 40.198 0 32.632 0 24 0 10.745 10.745 0 24 0a23.891 23.891 0 0113.997 4.502c-.2 17.907-11.097 33.245-26.602 39.926z" fill="#6875F5"/>
+      <path d="M14.134 45.885A23.914 23.914 0 0024 48c13.255 0 24-10.745 24-24 0-3.516-.756-6.856-2.115-9.866-4.659 15.143-16.608 27.092-31.75 31.751z" fill="#6875F5"/>
+    </svg>
+</template>
diff --git a/src/Publish/resources/js/Jetstream/AuthenticationCard.vue b/src/Publish/resources/js/Jetstream/AuthenticationCard.vue
new file mode 100644
index 0000000..59f3713
--- /dev/null
+++ b/src/Publish/resources/js/Jetstream/AuthenticationCard.vue
@@ -0,0 +1,11 @@
+<template>
+    <div class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100">
+        <div>
+            <slot name="logo" />
+        </div>
+
+        <div class="w-full sm:max-w-md mt-6 px-6 py-4 bg-white shadow-md overflow-hidden sm:rounded-lg">
+            <slot />
+        </div>
+    </div>
+</template>
diff --git a/src/Publish/resources/js/Jetstream/AuthenticationCardLogo.vue b/src/Publish/resources/js/Jetstream/AuthenticationCardLogo.vue
new file mode 100644
index 0000000..5f7f1e4
--- /dev/null
+++ b/src/Publish/resources/js/Jetstream/AuthenticationCardLogo.vue
@@ -0,0 +1,19 @@
+<template>
+    <Link :href="'/'">
+        <svg class="w-16 h-16" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M11.395 44.428C4.557 40.198 0 32.632 0 24 0 10.745 10.745 0 24 0a23.891 23.891 0 0113.997 4.502c-.2 17.907-11.097 33.245-26.602 39.926z" fill="#6875F5"/>
+            <path d="M14.134 45.885A23.914 23.914 0 0024 48c13.255 0 24-10.745 24-24 0-3.516-.756-6.856-2.115-9.866-4.659 15.143-16.608 27.092-31.75 31.751z" fill="#6875F5"/>
+        </svg>
+    </Link>
+</template>
+
+<script>
+    import { defineComponent } from 'vue'
+    import { Link } from '@inertiajs/inertia-vue3';
+
+    export default defineComponent({
+        components: {
+            Link,
+        },
+    })
+</script>
diff --git a/src/Publish/resources/js/Jetstream/Banner.vue b/src/Publish/resources/js/Jetstream/Banner.vue
new file mode 100644
index 0000000..4e82ce2
--- /dev/null
+++ b/src/Publish/resources/js/Jetstream/Banner.vue
@@ -0,0 +1,60 @@
+<template>
+    <div>
+        <div :class="{ 'bg-indigo-500': style == 'success', 'bg-red-700': style == 'danger' }" v-if="show && message">
+            <div class="max-w-screen-xl mx-auto py-2 px-3 sm:px-6 lg:px-8">
+                <div class="flex items-center justify-between flex-wrap">
+                    <div class="w-0 flex-1 flex items-center min-w-0">
+                        <span class="flex p-2 rounded-lg" :class="{ 'bg-indigo-600': style == 'success', 'bg-red-600': style == 'danger' }">
+                            <svg class="h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" v-if="style == 'success'">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                            </svg>
+
+                            <svg class="h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" v-if="style == 'danger'">
+                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                            </svg>
+                        </span>
+
+                        <p class="ml-3 font-medium text-sm text-white truncate">
+                            {{ message }}
+                        </p>
+                    </div>
+
+                    <div class="shrink-0 sm:ml-3">
+                        <button
+                            type="button"
+                            class="-mr-1 flex p-2 rounded-md focus:outline-none sm:-mr-2 transition"
+                            :class="{ 'hover:bg-indigo-600 focus:bg-indigo-600': style == 'success', 'hover:bg-red-600 focus:bg-red-600': style == 'danger' }"
+                            aria-label="Dismiss"
+                            @click.prevent="show = false">
+                            <svg class="h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                            </svg>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import { defineComponent } from 'vue'
+
+    export default defineComponent({
+        data() {
+            return {
+                show: true,
+            }
+        },
+
+        computed: {
+            style() {
+                return this.$page.props.jetstream.flash?.bannerStyle || 'success'
+            },
+
+            message() {
+                return this.$page.props.jetstream.flash?.banner || ''
+            },
+        }
+    })
+</script>
diff --git a/src/Publish/resources/js/Jetstream/Button.vue b/src/Publish/resources/js/Jetstream/Button.vue
new file mode 100644
index 0000000..f12cdd5
--- /dev/null
+++ b/src/Publish/resources/js/Jetstream/Button.vue
@@ -0,0 +1,18 @@
+<template>
+    <button :type="type" class="inline-flex items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 active:bg-gray-900 focus:outline-none focus:border-gray-900 focus:ring focus:ring-gray-300 disabled:opacity-25 transition">
+        <slot></slot>
+    </button>
+</template>
+
+<script>
+    import { defineComponent } from 'vue'
+
+    export default defineComponent({
+        props: {
+            type: {
+                type: String,
+                default: 'submit',
+            },
+        }
+    })
+</script>
diff --git a/src/Publish/resources/js/Jetstream/Checkbox.vue b/src/Publish/resources/js/Jetstream/Checkbox.vue
new file mode 100644
index 0000000..d651c61
--- /dev/null
+++ b/src/Publish/resources/js/Jetstream/Checkbox.vue
@@ -0,0 +1,34 @@
+<template>
+    <input type="checkbox" :value="value" v-model="proxyChecked"
+           class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+    emits: ['update:checked'],
+
+    props: {
+        checked: {
+            type: [Array, Boolean],
+            default: false,
+        },
+        value: {
+            default: null,
+        },
+    },
+
+    computed: {
+        proxyChecked: {
+            get() {
+                return this.checked;
+            },
+
+            set(val) {
+                this.$emit("update:checked", val);
+            },
+        },
+    },
+})
+</script>
diff --git a/src/Publish/resources/js/Jetstream/ConfirmationModal.vue b/src/Publish/resources/js/Jetstream/ConfirmationModal.vue
new file mode 100644
index 0000000..df982c7
--- /dev/null
+++ b/src/Publish/resources/js/Jetstream/ConfirmationModal.vue
@@ -0,0 +1,59 @@
+<template>
+    <modal :show="show" :max-width="maxWidth" :closeable="closeable" @close="close">
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+            <div class="sm:flex sm:items-start">
+                <div class="mx-auto shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
+                    <svg class="h-6 w-6 text-red-600" stroke="currentColor" fill="none" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
+                    </svg>
+                </div>
+
+                <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+                    <h3 class="text-lg">
+                        <slot name="title"></slot>
+                    </h3>
+
+                    <div class="mt-2">
+                        <slot name="content"></slot>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="flex flex-row justify-end px-6 py-4 bg-gray-100 text-right">
+            <slot name="footer">
+            </slot>
+        </div>
+    </modal>
+</template>
+
+<script>
+    import { defineComponent } from 'vue'
+    import Modal from './Modal.vue'
+
+    export default defineComponent({
+        emits: ['close'],
+
+        components: {
+            Modal,
+        },
+
+        props: {
+            show: {
+                default: false
+            },
+            maxWidth: {
+                default: '2xl'
+            },
+            closeable: {
+                default: true
+            },
+        },
+
+        methods: {
+            close() {
+                this.$emit('close')
+            },
+        }
+    })
+</script>
diff --git a/src/Publish/resources/js/Jetstream/ConfirmsPassword.vue b/src/Publish/resources/js/Jetstream/ConfirmsPassword.vue
new file mode 100644
index 0000000..f646be8
--- /dev/null
+++ b/src/Publish/resources/js/Jetstream/ConfirmsPassword.vue
@@ -0,0 +1,115 @@
+<template>
+    <span>
+        <span @click="startConfirmingPassword">
+            <slot />
+        </span>
+
+        <jet-dialog-modal :show="confirmingPassword" @close="closeModal">
+            <template #title>
+                {{ title }}
+            </template>
+
+            <template #content>
+                {{ content }}
+
+                <div class="mt-4">
+                    <jet-input type="password" class="mt-1 block w-3/4" placeholder="Password"
+                                ref="password"
+                                v-model="form.password"
+                                @keyup.enter="confirmPassword" />
+
+                    <jet-input-error :message="form.error" class="mt-2" />
+                </div>
+            </template>
+
+            <template #footer>
+                <jet-secondary-button @click="closeModal">
+                    Cancel
+                </jet-secondary-button>
+
+                <jet-button class="ml-3" @click="confirmPassword" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
+                    {{ button }}
+                </jet-button>
+            </template>
+        </jet-dialog-modal>
+    </span>
+</template>
+
+<script>
+    import { defineComponent } from 'vue'
+    import JetButton from './Button.vue'
+    import JetDialogModal from './DialogModal.vue'
+    import JetInput from './Input.vue'
+    import JetInputError from './InputError.vue'
+    import JetSecondaryButton from './SecondaryButton.vue'
+
+    export default defineComponent({
+        emits: ['confirmed'],
+
+        props: {
+            title: {
+                default: 'Confirm Password',
+            },
+            content: {
+                default: 'For your security, please confirm your password to continue.',
+            },
+            button: {
+                default: 'Confirm',
+            }
+        },
+
+        components: {
+            JetButton,
+            JetDialogModal,
+            JetInput,
+            JetInputError,
+            JetSecondaryButton,
+        },
+
+        data() {
+            return {
+                confirmingPassword: false,
+                form: {
+                    password: '',
+                    error: '',
+                },
+            }
+        },
+
+        methods: {
+            startConfirmingPassword() {
+                axios.get(route('password.confirmation')).then(response => {
+                    if (response.data.confirmed) {
+                        this.$emit('confirmed');
+                    } else {
+                        this.confirmingPassword = true;
+
+                        setTimeout(() => this.$refs.password.focus(), 250)
+                    }
+                })
+            },
+
+            confirmPassword() {
+                this.form.processing = true;
+
+                axios.post(route('password.confirm'), {
+                    password: this.form.password,
+                }).then(() => {
+                    this.form.processing = false;
+                    this.closeModal()
+                    this.$nextTick(() => this.$emit('confirmed'));
+                }).catch(error => {
+                    this.form.processing = false;
+                    this.form.error = error.response.data.errors.password[0];
+                    this.$refs.password.focus()
+                });
+            },
+
+            closeModal() {
+                this.confirmingPassword = false
+                this.form.password = '';
+                this.form.error = '';
+            },
+        }
+    })
+</script>
diff --git a/src/Publish/resources/js/Jetstream/DangerButton.vue b/src/Publish/resources/js/Jetstream/DangerButton.vue
new file mode 100644
index 0000000..e3e8d71
--- /dev/null
+++ b/src/Publish/resources/js/Jetstream/DangerButton.vue
@@ -0,0 +1,18 @@
+<template>
+    <button :type="type" class="inline-flex items-center justify-center px-4 py-2 bg-red-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-red-500 focus:outline-none focus:border-red-700 focus:ring focus:ring-red-200 active:bg-red-600 disabled:opacity-25 transition">
+        <slot></slot>
+    </button>
+</template>
+
+<script>
+    import { defineComponent } from 'vue'
+
+    export default defineComponent({
+        props: {
+            type: {
+                type: String,
+                default: 'button',
+            },
+        }
+    })
+</script>
diff --git a/src/Publish/resources/js/Jetstream/DialogModal.vue b/src/Publish/resources/js/Jetstream/DialogModal.vue
new file mode 100644
index 0000000..071d0af
--- /dev/null
+++ b/src/Publish/resources/js/Jetstream/DialogModal.vue
@@ -0,0 +1,51 @@
+<template>
+    <modal :show="show" :max-width="maxWidth" :closeable="closeable" @close="close">
+        <div class="px-6 py-4">
+            <div class="text-lg">
+                <slot name="title">
+                </slot>
+            </div>
+
+            <div class="mt-4">
+                <slot name="content">
+                </slot>
+            </div>
+        </div>
+
+        <div class="flex flex-row justify-end px-6 py-4 bg-gray-100 text-right">
+            <slot name="footer">
+            </slot>
+        </div>
+    </modal>
+</template>
+
+<script>
+    import { defineComponent } from 'vue'
+    import Modal from './Modal.vue'
+
+    export default defineComponent({
+        emits: ['close'],
+
+        components: {
+            Modal,
+        },
+
+        props: {
+            show: {
+                default: false
+            },
+            maxWidth: {
+                default: '2xl'
+            },
+            closeable: {
+                default: false
+            },
+        },
+
+        methods: {
+            close() {
+                this.$emit('close')
+            },
+        }
+    })
+</script>
diff --git a/src/Publish/resources/js/Jetstream/Dropdown.vue b/src/Publish/resources/js/Jetstream/Dropdown.vue
new file mode 100644
index 0000000..0ee4220
--- /dev/null
+++ b/src/Publish/resources/js/Jetstream/Dropdown.vue
@@ -0,0 +1,82 @@
+<template>
+    <div class="relative">
+        <div @click="open = ! open">
+            <slot name="trigger"></slot>
+        </div>
+
+        <!-- Full Screen Dropdown Overlay -->
+        <div v-show="open" class="fixed inset-0 z-40" @click="open = false">
+        </div>
+
+        <transition
+            enter-active-class="transition ease-out duration-200"
+            enter-from-class="transform opacity-0 scale-95"
+            enter-to-class="transform opacity-100 scale-100"
+            leave-active-class="transition ease-in duration-75"
+            leave-from-class="transform opacity-100 scale-100"
+            leave-to-class="transform opacity-0 scale-95">
+            <div v-show="open"
+                    class="absolute z-50 mt-2 rounded-md shadow-lg"
+                    :class="[widthClass, alignmentClasses]"
+                    style="display: none;"
+                    @click="open = false">
+                <div class="rounded-md ring-1 ring-black ring-opacity-5" :class="contentClasses">
+                    <slot name="content"></slot>
+                </div>
+            </div>
+        </transition>
+    </div>
+</template>
+
+<script>
+import { defineComponent, onMounted, onUnmounted, ref } from "vue";
+
+export default defineComponent({
+    props: {
+        align: {
+            default: 'right'
+        },
+        width: {
+            default: '48'
+        },
+        contentClasses: {
+            default: () => ['py-1', 'bg-white']
+        }
+    },
+
+    setup() {
+        let open = ref(false)
+
+        const closeOnEscape = (e) => {
+            if (open.value && e.key === 'Escape') {
+                open.value = false
+            }
+        }
+
+        onMounted(() => document.addEventListener('keydown', closeOnEscape))
+        onUnmounted(() => document.removeEventListener('keydown', closeOnEscape))
+
+        return {
+            open,
+        }
+    },
+
+    computed: {
+        widthClass() {
+            return {
+                '48': 'w-48',
+            }[this.width.toString()]
+        },
+
+        alignmentClasses() {
+            if (this.align === 'left') {
+                return 'origin-top-left left-0'
+            } else if (this.align === 'right') {
+                return 'origin-top-right right-0'
+            } else {
+                return 'origin-top'
+            }
+        },
+    }
+})
+</script>
diff --git a/src/Publish/resources/js/Jetstream/DropdownLink.vue b/src/Publish/resources/js/Jetstream/DropdownLink.vue
new file mode 100644
index 0000000..ec04a30
--- /dev/null
+++ b/src/Publish/resources/js/Jetstream/DropdownLink.vue
@@ -0,0 +1,27 @@
+<template>
+    <div>
+        <button type="submit" class="block w-full px-4 py-2 text-sm leading-5 text-gray-700 text-left hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition" v-if="as == 'button'">
+            <slot></slot>
+        </button>
+
+        <a :href="href" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition" v-else-if="as =='a'">
+            <slot></slot>
+        </a>
+
+        <Link :href="href" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition" v-else>
+            <slot></slot>
+        </Link>
+    </div>
+</template>
+
+<script>
+    import { defineComponent } from 'vue';
+    import { Link } from '@inertiajs/inertia-vue3';
+
+    export default defineComponent({
+        components: {
+            Link,
+        },
+        props: ['href', 'as']
+    })
+</script>
diff --git a/src/Publish/resources/js/Jetstream/FormSection.vue b/src/Publish/resources/js/Jetstream/FormSection.vue
new file mode 100644
index 0000000..90bb1b7
--- /dev/null
+++ b/src/Publish/resources/js/Jetstream/FormSection.vue
@@ -0,0 +1,42 @@
+<template>
+    <div class="md:grid md:grid-cols-3 md:gap-6">
+        <jet-section-title>
+            <template #title><slot name="title"></slot></template>
+            <template #description><slot name="description"></slot></template>
+        </jet-section-title>
+
+        <div class="mt-5 md:mt-0 md:col-span-2">
+            <form @submit.prevent="$emit('submitted')">
+                <div class="px-4 py-5 bg-white sm:p-6 shadow"
+                    :class="hasActions ? 'sm:rounded-tl-md sm:rounded-tr-md' : 'sm:rounded-md'">
+                    <div class="grid grid-cols-6 gap-6">
+                        <slot name="form"></slot>
+                    </div>
+                </div>
+
+                <div class="flex items-center justify-end px-4 py-3 bg-gray-50 text-right sm:px-6 shadow sm:rounded-bl-md sm:rounded-br-md" v-if="hasActions">
+                    <slot name="actions"></slot>
+                </div>
+            </form>
+        </div>
+    </div>
+</template>
+
+<script>
+    import { defineComponent } from 'vue'
+    import JetSectionTitle from './SectionTitle.vue'
+
+    export default defineComponent({
+        emits: ['submitted'],
+
+        components: {
+            JetSectionTitle,
+        },
+
+        computed: {
+            hasActions() {
+                return !! this.$slots.actions
+            }
+        }
+    })
+</script>
diff --git a/src/Publish/resources/js/Jetstream/Input.vue b/src/Publish/resources/js/Jetstream/Input.vue
new file mode 100644
index 0000000..6f13c62
--- /dev/null
+++ b/src/Publish/resources/js/Jetstream/Input.vue
@@ -0,0 +1,19 @@
+<template>
+    <input class="border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" ref="input">
+</template>
+
+<script>
+    import { defineComponent } from 'vue'
+
+    export default defineComponent({
+        props: ['modelValue'],
+
+        emits: ['update:modelValue'],
+
+        methods: {
+            focus() {
+                this.$refs.input.focus()
+            }
+        }
+    })
+</script>
diff --git a/src/Publish/resources/js/Jetstream/InputError.vue b/src/Publish/resources/js/Jetstream/InputError.vue
new file mode 100644
index 0000000..6941f67
--- /dev/null
+++ b/src/Publish/resources/js/Jetstream/InputError.vue
@@ -0,0 +1,15 @@
+<template>
+    <div v-show="message">
+        <p class="text-sm text-red-600">
+            {{ message }}
+        </p>
+    </div>
+</template>
+
+<script>
+    import { defineComponent } from 'vue'
+
+    export default defineComponent({
+        props: ['message']
+    })
+</script>
diff --git a/src/Publish/resources/js/Jetstream/Label.vue b/src/Publish/resources/js/Jetstream/Label.vue
new file mode 100644
index 0000000..60aa6e6
--- /dev/null
+++ b/src/Publish/resources/js/Jetstream/Label.vue
@@ -0,0 +1,14 @@
+<template>
+    <label class="block font-medium text-sm text-gray-700">
+        <span v-if="value">{{ value }}</span>
+        <span v-else><slot></slot></span>
+    </label>
+</template>
+
+<script>
+    import { defineComponent } from 'vue'
+
+    export default defineComponent({
+        props: ['value']
+    })
+</script>
diff --git a/src/Publish/resources/js/Jetstream/Modal.vue b/src/Publish/resources/js/Jetstream/Modal.vue
new file mode 100644
index 0000000..528b78e
--- /dev/null
+++ b/src/Publish/resources/js/Jetstream/Modal.vue
@@ -0,0 +1,98 @@
+<template>
+    <teleport to="body">
+        <transition leave-active-class="duration-200">
+            <div v-show="show" class="fixed inset-0 z-50 px-4 py-6 overflow-y-auto sm:px-0" scroll-region>
+                <transition enter-active-class="duration-300 ease-out"
+                        enter-from-class="opacity-0"
+                        enter-to-class="opacity-100"
+                        leave-active-class="duration-200 ease-in"
+                        leave-from-class="opacity-100"
+                        leave-to-class="opacity-0">
+                    <div v-show="show" class="fixed inset-0 transition-all transform" @click="close">
+                        <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
+                    </div>
+                </transition>
+
+                <transition enter-active-class="duration-300 ease-out"
+                        enter-from-class="translate-y-4 opacity-0 sm:translate-y-0 sm:scale-95"
+                        enter-to-class="translate-y-0 opacity-100 sm:scale-100"
+                        leave-active-class="duration-200 ease-in"
+                        leave-from-class="translate-y-0 opacity-100 sm:scale-100"
+                        leave-to-class="translate-y-4 opacity-0 sm:translate-y-0 sm:scale-95">
+                    <div v-show="show" class="mb-6 transition-all transform bg-white rounded-lg shadow-xl sm:w-full sm:mx-auto" :class="maxWidthClass">
+                        <slot v-if="show"></slot>
+                    </div>
+                </transition>
+            </div>
+        </transition>
+    </teleport>
+</template>
+
+<script>
+import { defineComponent, onMounted, onUnmounted } from "vue";
+
+export default defineComponent({
+        emits: ['close'],
+
+        props: {
+            show: {
+                default: false
+            },
+            maxWidth: {
+                default: '2xl'
+            },
+            closeable: {
+                default: true
+            },
+        },
+
+        watch: {
+            show: {
+                immediate: true,
+                handler: (show) => {
+                    if (show) {
+                        document.body.style.overflow = 'hidden'
+                    } else {
+                        document.body.style.overflow = null
+                    }
+                }
+            }
+        },
+
+        setup(props, {emit}) {
+            const close = () => {
+                if (props.closeable) {
+                    emit('close')
+                }
+            }
+
+            const closeOnEscape = (e) => {
+                if (e.key === 'Escape' && props.show) {
+                    close()
+                }
+            }
+
+            onMounted(() => document.addEventListener('keydown', closeOnEscape))
+            onUnmounted(() => {
+                document.removeEventListener('keydown', closeOnEscape)
+                document.body.style.overflow = null
+            })
+
+            return {
+                close,
+            }
+        },
+
+        computed: {
+            maxWidthClass() {
+                return {
+                    'sm': 'sm:max-w-sm',
+                    'md': 'sm:max-w-md',
+                    'lg': 'sm:max-w-lg',
+                    'xl': 'sm:max-w-xl',
+                    '2xl': 'sm:max-w-2xl',
+                }[this.maxWidth]
+            }
+        }
+    })
+</script>
diff --git a/src/Publish/resources/js/Jetstream/NavLink.vue b/src/Publish/resources/js/Jetstream/NavLink.vue
new file mode 100644
index 0000000..3351309
--- /dev/null
+++ b/src/Publish/resources/js/Jetstream/NavLink.vue
@@ -0,0 +1,25 @@
+<template>
+    <Link :href="href" :class="classes">
+        <slot />
+    </Link>
+</template>
+
+<script>
+    import { defineComponent } from 'vue'
+    import { Link } from '@inertiajs/inertia-vue3';
+
+    export default defineComponent({
+        components: {
+            Link,
+        },
+        props: ['href', 'active'],
+
+        computed: {
+            classes() {
+                return this.active
+                    ? 'inline-flex items-center px-1 pt-1 border-b-2 border-indigo-400 text-sm font-medium leading-5 text-gray-900 focus:outline-none focus:border-indigo-700 transition'
+                    : 'inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition'
+            }
+        }
+    })
+</script>
diff --git a/src/Publish/resources/js/Jetstream/ResponsiveNavLink.vue b/src/Publish/resources/js/Jetstream/ResponsiveNavLink.vue
new file mode 100644
index 0000000..83100ee
--- /dev/null
+++ b/src/Publish/resources/js/Jetstream/ResponsiveNavLink.vue
@@ -0,0 +1,31 @@
+<template>
+    <div>
+        <button :class="classes" class="w-full text-left" v-if="as == 'button'">
+            <slot></slot>
+        </button>
+
+        <Link :href="href" :class="classes" v-else>
+            <slot />
+        </Link>
+    </div>
+</template>
+
+<script>
+    import { defineComponent } from 'vue';
+    import { Link } from '@inertiajs/inertia-vue3';
+
+    export default defineComponent({
+        components: {
+            Link,
+        },
+        props: ['active', 'href', 'as'],
+
+        computed: {
+            classes() {
+                return this.active
+                    ? 'block pl-3 pr-4 py-2 border-l-4 border-indigo-400 text-base font-medium text-indigo-700 bg-indigo-50 focus:outline-none focus:text-indigo-800 focus:bg-indigo-100 focus:border-indigo-700 transition'
+                    : 'block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 focus:outline-none focus:text-gray-800 focus:bg-gray-50 focus:border-gray-300 transition'
+            }
+        }
+    })
+</script>
diff --git a/src/Publish/resources/js/Jetstream/SecondaryButton.vue b/src/Publish/resources/js/Jetstream/SecondaryButton.vue
new file mode 100644
index 0000000..b509857
--- /dev/null
+++ b/src/Publish/resources/js/Jetstream/SecondaryButton.vue
@@ -0,0 +1,18 @@
+<template>
+    <button :type="type" class="inline-flex items-center px-4 py-2 bg-white border border-gray-300 rounded-md font-semibold text-xs text-gray-700 uppercase tracking-widest shadow-sm hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:ring focus:ring-blue-200 active:text-gray-800 active:bg-gray-50 disabled:opacity-25 transition">
+        <slot></slot>
+    </button>
+</template>
+
+<script>
+    import { defineComponent } from 'vue'
+
+    export default defineComponent({
+        props: {
+            type: {
+                type: String,
+                default: 'button',
+            },
+        }
+    })
+</script>
diff --git a/src/Publish/resources/js/Jetstream/SectionBorder.vue b/src/Publish/resources/js/Jetstream/SectionBorder.vue
new file mode 100644
index 0000000..2352bb5
--- /dev/null
+++ b/src/Publish/resources/js/Jetstream/SectionBorder.vue
@@ -0,0 +1,7 @@
+<template>
+    <div class="hidden sm:block">
+        <div class="py-8">
+            <div class="border-t border-gray-200"></div>
+        </div>
+    </div>
+</template>
diff --git a/src/Publish/resources/js/Jetstream/SectionTitle.vue b/src/Publish/resources/js/Jetstream/SectionTitle.vue
new file mode 100644
index 0000000..fac64fe
--- /dev/null
+++ b/src/Publish/resources/js/Jetstream/SectionTitle.vue
@@ -0,0 +1,17 @@
+<template>
+    <div class="md:col-span-1 flex justify-between">
+        <div class="px-4 sm:px-0">
+            <h3 class="text-lg font-medium text-gray-900">
+                <slot name="title"></slot>
+            </h3>
+
+            <p class="mt-1 text-sm text-gray-600">
+                <slot name="description"></slot>
+            </p>
+        </div>
+
+        <div class="px-4 sm:px-0">
+            <slot name="aside"></slot>
+        </div>
+    </div>
+</template>
diff --git a/src/Publish/resources/js/Jetstream/ValidationErrors.vue b/src/Publish/resources/js/Jetstream/ValidationErrors.vue
new file mode 100644
index 0000000..c6d14bb
--- /dev/null
+++ b/src/Publish/resources/js/Jetstream/ValidationErrors.vue
@@ -0,0 +1,25 @@
+<template>
+    <div v-if="hasErrors">
+        <div class="font-medium text-red-600">Whoops! Something went wrong.</div>
+
+        <ul class="mt-3 list-disc list-inside text-sm text-red-600">
+            <li v-for="(error, key) in errors" :key="key">{{ error }}</li>
+        </ul>
+    </div>
+</template>
+
+<script>
+    import { defineComponent } from 'vue'
+
+    export default defineComponent({
+        computed: {
+            errors() {
+                return this.$page.props.errors
+            },
+
+            hasErrors() {
+                return Object.keys(this.errors).length > 0;
+            },
+        }
+    })
+</script>
diff --git a/src/Publish/resources/js/Jetstream/Welcome.vue b/src/Publish/resources/js/Jetstream/Welcome.vue
new file mode 100644
index 0000000..5bc549f
--- /dev/null
+++ b/src/Publish/resources/js/Jetstream/Welcome.vue
@@ -0,0 +1,105 @@
+<template>
+    <div>
+        <div class="p-6 sm:px-20 bg-white border-b border-gray-200">
+            <div>
+                <jet-application-logo class="block h-12 w-auto" />
+            </div>
+
+            <div class="mt-8 text-2xl">
+                Welcome to your Jetstream application!
+            </div>
+
+            <div class="mt-6 text-gray-500">
+                Laravel Jetstream provides a beautiful, robust starting point for your next Laravel application. Laravel is designed
+                to help you build your application using a development environment that is simple, powerful, and enjoyable. We believe
+                you should love expressing your creativity through programming, so we have spent time carefully crafting the Laravel
+                ecosystem to be a breath of fresh air. We hope you love it.
+            </div>
+        </div>
+
+        <div class="bg-gray-200 bg-opacity-25 grid grid-cols-1 md:grid-cols-2">
+            <div class="p-6">
+                <div class="flex items-center">
+                    <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-8 h-8 text-gray-400"><path d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
+                    <div class="ml-4 text-lg text-gray-600 leading-7 font-semibold"><a href="https://laravel.com/docs">Documentation</a></div>
+                </div>
+
+                <div class="ml-12">
+                    <div class="mt-2 text-sm text-gray-500">
+                        Laravel has wonderful documentation covering every aspect of the framework. Whether you're new to the framework or have previous experience, we recommend reading all of the documentation from beginning to end.
+                    </div>
+
+                    <a href="https://laravel.com/docs">
+                        <div class="mt-3 flex items-center text-sm font-semibold text-indigo-700">
+                                <div>Explore the documentation</div>
+
+                                <div class="ml-1 text-indigo-500">
+                                    <svg viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+                                </div>
+                        </div>
+                    </a>
+                </div>
+            </div>
+
+            <div class="p-6 border-t border-gray-200 md:border-t-0 md:border-l">
+                <div class="flex items-center">
+                    <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-8 h-8 text-gray-400"><path d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"></path><path d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
+                    <div class="ml-4 text-lg text-gray-600 leading-7 font-semibold"><a href="https://laracasts.com">Laracasts</a></div>
+                </div>
+
+                <div class="ml-12">
+                    <div class="mt-2 text-sm text-gray-500">
+                        Laracasts offers thousands of video tutorials on Laravel, PHP, and JavaScript development. Check them out, see for yourself, and massively level up your development skills in the process.
+                    </div>
+
+                    <a href="https://laracasts.com">
+                        <div class="mt-3 flex items-center text-sm font-semibold text-indigo-700">
+                                <div>Start watching Laracasts</div>
+
+                                <div class="ml-1 text-indigo-500">
+                                    <svg viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+                                </div>
+                        </div>
+                    </a>
+                </div>
+            </div>
+
+            <div class="p-6 border-t border-gray-200">
+                <div class="flex items-center">
+                    <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-8 h-8 text-gray-400"><path d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
+                    <div class="ml-4 text-lg text-gray-600 leading-7 font-semibold"><a href="https://tailwindcss.com/">Tailwind</a></div>
+                </div>
+
+                <div class="ml-12">
+                    <div class="mt-2 text-sm text-gray-500">
+                        Laravel Jetstream is built with Tailwind, an amazing utility first CSS framework that doesn't get in your way. You'll be amazed how easily you can build and maintain fresh, modern designs with this wonderful framework at your fingertips.
+                    </div>
+                </div>
+            </div>
+
+            <div class="p-6 border-t border-gray-200 md:border-l">
+                <div class="flex items-center">
+                    <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-8 h-8 text-gray-400"><path d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg>
+                    <div class="ml-4 text-lg text-gray-600 leading-7 font-semibold">Authentication</div>
+                </div>
+
+                <div class="ml-12">
+                    <div class="mt-2 text-sm text-gray-500">
+                        Authentication and registration views are included with Laravel Jetstream, as well as support for user email verification and resetting forgotten passwords. So, you're free to get started what matters most: building your application.
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import { defineComponent } from 'vue'
+    import JetApplicationLogo from '@/Jetstream/ApplicationLogo.vue'
+
+    export default defineComponent({
+        components: {
+            JetApplicationLogo,
+        },
+    })
+</script>
diff --git a/src/Publish/resources/js/Layouts/AppLayout.vue b/src/Publish/resources/js/Layouts/AppLayout.vue
new file mode 100644
index 0000000..1a31d0b
--- /dev/null
+++ b/src/Publish/resources/js/Layouts/AppLayout.vue
@@ -0,0 +1,311 @@
+<script setup>
+import { ref } from 'vue';
+import { Inertia } from '@inertiajs/inertia';
+import { Head, Link } from '@inertiajs/inertia-vue3';
+import JetApplicationMark from '@/Components/ApplicationMark.vue';
+import JetBanner from '@/Components/Banner.vue';
+import JetDropdown from '@/Components/Dropdown.vue';
+import JetDropdownLink from '@/Components/DropdownLink.vue';
+import JetNavLink from '@/Components/NavLink.vue';
+import JetResponsiveNavLink from '@/Components/ResponsiveNavLink.vue';
+
+defineProps({
+    title: String,
+});
+
+const showingNavigationDropdown = ref(false);
+
+const switchToTeam = (team) => {
+    Inertia.put(route('current-team.update'), {
+        team_id: team.id,
+    }, {
+        preserveState: false,
+    });
+};
+
+const logout = () => {
+    Inertia.post(route('logout'));
+};
+</script>
+
+<template>
+    <div>
+        <Head :title="title" />
+
+        <JetBanner />
+
+        <div class="min-h-screen bg-gray-100">
+            <nav class="bg-white border-b border-gray-100">
+                <!-- Primary Navigation Menu -->
+                <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                    <div class="flex justify-between h-16">
+                        <div class="flex">
+                            <!-- Logo -->
+                            <div class="shrink-0 flex items-center">
+                                <Link :href="route('dashboard')">
+                                    <JetApplicationMark class="block h-9 w-auto" />
+                                </Link>
+                            </div>
+
+                            <!-- Navigation Links -->
+                            <div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
+                                <JetNavLink :href="route('dashboard')" :active="route().current('dashboard')">
+                                    Dashboard
+                                </JetNavLink>
+                            </div>
+                        </div>
+
+                        <div class="hidden sm:flex sm:items-center sm:ml-6">
+                            <div class="ml-3 relative">
+                                <!-- Teams Dropdown -->
+                                <JetDropdown v-if="$page.props.jetstream.hasTeamFeatures" align="right" width="60">
+                                    <template #trigger>
+                                        <span class="inline-flex rounded-md">
+                                            <button type="button" class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 bg-white hover:bg-gray-50 hover:text-gray-700 focus:outline-none focus:bg-gray-50 active:bg-gray-50 transition">
+                                                {{ $page.props.user.current_team.name }}
+
+                                                <svg
+                                                    class="ml-2 -mr-0.5 h-4 w-4"
+                                                    xmlns="http://www.w3.org/2000/svg"
+                                                    viewBox="0 0 20 20"
+                                                    fill="currentColor"
+                                                >
+                                                    <path fill-rule="evenodd" d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
+                                                </svg>
+                                            </button>
+                                        </span>
+                                    </template>
+
+                                    <template #content>
+                                        <div class="w-60">
+                                            <!-- Team Management -->
+                                            <template v-if="$page.props.jetstream.hasTeamFeatures">
+                                                <div class="block px-4 py-2 text-xs text-gray-400">
+                                                    Manage Team
+                                                </div>
+
+                                                <!-- Team Settings -->
+                                                <JetDropdownLink :href="route('teams.show', $page.props.user.current_team)">
+                                                    Team Settings
+                                                </JetDropdownLink>
+
+                                                <JetDropdownLink v-if="$page.props.jetstream.canCreateTeams" :href="route('teams.create')">
+                                                    Create New Team
+                                                </JetDropdownLink>
+
+                                                <div class="border-t border-gray-100" />
+
+                                                <!-- Team Switcher -->
+                                                <div class="block px-4 py-2 text-xs text-gray-400">
+                                                    Switch Teams
+                                                </div>
+
+                                                <template v-for="team in $page.props.user.all_teams" :key="team.id">
+                                                    <form @submit.prevent="switchToTeam(team)">
+                                                        <JetDropdownLink as="button">
+                                                            <div class="flex items-center">
+                                                                <svg
+                                                                    v-if="team.id == $page.props.user.current_team_id"
+                                                                    class="mr-2 h-5 w-5 text-green-400"
+                                                                    fill="none"
+                                                                    stroke-linecap="round"
+                                                                    stroke-linejoin="round"
+                                                                    stroke-width="2"
+                                                                    stroke="currentColor"
+                                                                    viewBox="0 0 24 24"
+                                                                ><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+                                                                <div>{{ team.name }}</div>
+                                                            </div>
+                                                        </JetDropdownLink>
+                                                    </form>
+                                                </template>
+                                            </template>
+                                        </div>
+                                    </template>
+                                </JetDropdown>
+                            </div>
+
+                            <!-- Settings Dropdown -->
+                            <div class="ml-3 relative">
+                                <JetDropdown align="right" width="48">
+                                    <template #trigger>
+                                        <button v-if="$page.props.jetstream.managesProfilePhotos" class="flex text-sm border-2 border-transparent rounded-full focus:outline-none focus:border-gray-300 transition">
+                                            <img class="h-8 w-8 rounded-full object-cover" :src="$page.props.user.profile_photo_url" :alt="$page.props.user.name">
+                                        </button>
+
+                                        <span v-else class="inline-flex rounded-md">
+                                            <button type="button" class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 bg-white hover:text-gray-700 focus:outline-none transition">
+                                                {{ $page.props.user.name }}
+
+                                                <svg
+                                                    class="ml-2 -mr-0.5 h-4 w-4"
+                                                    xmlns="http://www.w3.org/2000/svg"
+                                                    viewBox="0 0 20 20"
+                                                    fill="currentColor"
+                                                >
+                                                    <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
+                                                </svg>
+                                            </button>
+                                        </span>
+                                    </template>
+
+                                    <template #content>
+                                        <!-- Account Management -->
+                                        <div class="block px-4 py-2 text-xs text-gray-400">
+                                            Manage Account
+                                        </div>
+
+                                        <JetDropdownLink :href="route('profile.show')">
+                                            Profile
+                                        </JetDropdownLink>
+
+                                        <JetDropdownLink v-if="$page.props.jetstream.hasApiFeatures" :href="route('api-tokens.index')">
+                                            API Tokens
+                                        </JetDropdownLink>
+
+                                        <div class="border-t border-gray-100" />
+
+                                        <!-- Authentication -->
+                                        <form @submit.prevent="logout">
+                                            <JetDropdownLink as="button">
+                                                Log Out
+                                            </JetDropdownLink>
+                                        </form>
+                                    </template>
+                                </JetDropdown>
+                            </div>
+                        </div>
+
+                        <!-- Hamburger -->
+                        <div class="-mr-2 flex items-center sm:hidden">
+                            <button class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition" @click="showingNavigationDropdown = ! showingNavigationDropdown">
+                                <svg
+                                    class="h-6 w-6"
+                                    stroke="currentColor"
+                                    fill="none"
+                                    viewBox="0 0 24 24"
+                                >
+                                    <path
+                                        :class="{'hidden': showingNavigationDropdown, 'inline-flex': ! showingNavigationDropdown }"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                        stroke-width="2"
+                                        d="M4 6h16M4 12h16M4 18h16"
+                                    />
+                                    <path
+                                        :class="{'hidden': ! showingNavigationDropdown, 'inline-flex': showingNavigationDropdown }"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                        stroke-width="2"
+                                        d="M6 18L18 6M6 6l12 12"
+                                    />
+                                </svg>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Responsive Navigation Menu -->
+                <div :class="{'block': showingNavigationDropdown, 'hidden': ! showingNavigationDropdown}" class="sm:hidden">
+                    <div class="pt-2 pb-3 space-y-1">
+                        <JetResponsiveNavLink :href="route('dashboard')" :active="route().current('dashboard')">
+                            Dashboard
+                        </JetResponsiveNavLink>
+                    </div>
+
+                    <!-- Responsive Settings Options -->
+                    <div class="pt-4 pb-1 border-t border-gray-200">
+                        <div class="flex items-center px-4">
+                            <div v-if="$page.props.jetstream.managesProfilePhotos" class="shrink-0 mr-3">
+                                <img class="h-10 w-10 rounded-full object-cover" :src="$page.props.user.profile_photo_url" :alt="$page.props.user.name">
+                            </div>
+
+                            <div>
+                                <div class="font-medium text-base text-gray-800">
+                                    {{ $page.props.user.name }}
+                                </div>
+                                <div class="font-medium text-sm text-gray-500">
+                                    {{ $page.props.user.email }}
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="mt-3 space-y-1">
+                            <JetResponsiveNavLink :href="route('profile.show')" :active="route().current('profile.show')">
+                                Profile
+                            </JetResponsiveNavLink>
+
+                            <JetResponsiveNavLink v-if="$page.props.jetstream.hasApiFeatures" :href="route('api-tokens.index')" :active="route().current('api-tokens.index')">
+                                API Tokens
+                            </JetResponsiveNavLink>
+
+                            <!-- Authentication -->
+                            <form method="POST" @submit.prevent="logout">
+                                <JetResponsiveNavLink as="button">
+                                    Log Out
+                                </JetResponsiveNavLink>
+                            </form>
+
+                            <!-- Team Management -->
+                            <template v-if="$page.props.jetstream.hasTeamFeatures">
+                                <div class="border-t border-gray-200" />
+
+                                <div class="block px-4 py-2 text-xs text-gray-400">
+                                    Manage Team
+                                </div>
+
+                                <!-- Team Settings -->
+                                <JetResponsiveNavLink :href="route('teams.show', $page.props.user.current_team)" :active="route().current('teams.show')">
+                                    Team Settings
+                                </JetResponsiveNavLink>
+
+                                <JetResponsiveNavLink v-if="$page.props.jetstream.canCreateTeams" :href="route('teams.create')" :active="route().current('teams.create')">
+                                    Create New Team
+                                </JetResponsiveNavLink>
+
+                                <div class="border-t border-gray-200" />
+
+                                <!-- Team Switcher -->
+                                <div class="block px-4 py-2 text-xs text-gray-400">
+                                    Switch Teams
+                                </div>
+
+                                <template v-for="team in $page.props.user.all_teams" :key="team.id">
+                                    <form @submit.prevent="switchToTeam(team)">
+                                        <JetResponsiveNavLink as="button">
+                                            <div class="flex items-center">
+                                                <svg
+                                                    v-if="team.id == $page.props.user.current_team_id"
+                                                    class="mr-2 h-5 w-5 text-green-400"
+                                                    fill="none"
+                                                    stroke-linecap="round"
+                                                    stroke-linejoin="round"
+                                                    stroke-width="2"
+                                                    stroke="currentColor"
+                                                    viewBox="0 0 24 24"
+                                                ><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+                                                <div>{{ team.name }}</div>
+                                            </div>
+                                        </JetResponsiveNavLink>
+                                    </form>
+                                </template>
+                            </template>
+                        </div>
+                    </div>
+                </div>
+            </nav>
+
+            <!-- Page Heading -->
+            <header v-if="$slots.header" class="bg-white shadow">
+                <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
+                    <slot name="header" />
+                </div>
+            </header>
+
+            <!-- Page Content -->
+            <main>
+                <slot />
+            </main>
+        </div>
+    </div>
+</template>
diff --git a/src/Publish/resources/js/Layouts/LayoutAuthenticated.vue b/src/Publish/resources/js/Layouts/LayoutAuthenticated.vue
new file mode 100644
index 0000000..48970d9
--- /dev/null
+++ b/src/Publish/resources/js/Layouts/LayoutAuthenticated.vue
@@ -0,0 +1,101 @@
+<script setup>
+import { mdiForwardburger, mdiBackburger, mdiMenu } from "@mdi/js";
+import menuAside from "@/menuAside.js";
+import menuNavBar from "@/menuNavBar.js";
+import { useMainStore } from "@/Stores/main.js";
+import { useLayoutStore } from "@/Stores/layout.js";
+import { useStyleStore } from "@/Stores/style.js";
+import BaseIcon from "@/Components/BaseIcon.vue";
+import FormControl from "@/Components/FormControl.vue";
+import NavBar from "@/Components/NavBar.vue";
+import NavBarItemPlain from "@/Components/NavBarItemPlain.vue";
+import AsideMenu from "@/Components/AsideMenu.vue";
+import FooterBar from "@/Components/FooterBar.vue";
+import { Inertia } from '@inertiajs/inertia'
+import {computed} from "vue";
+import {usePage} from "@inertiajs/inertia-vue3";
+
+Inertia.on('navigate', () => {
+    layoutStore.isAsideMobileExpanded = false
+    layoutStore.isAsideLgActive = false
+})
+
+const layoutAsidePadding = "xl:pl-60";
+
+const styleStore = useStyleStore();
+
+const layoutStore = useLayoutStore();
+
+const dashboardMenu = computed(()=> usePage().props.value.data.menus.dashboard);
+
+
+const menuClick = (event, item) => {
+    if (item.isToggleLightDark) {
+        styleStore.setDarkMode();
+    }
+
+    if (item.isLogout) {
+        // Add:
+        Inertia.post(route('logout'))
+    }
+}
+
+</script>
+
+<template>
+  <div
+    :class="{
+      dark: styleStore.darkMode,
+      'overflow-hidden lg:overflow-visible': layoutStore.isAsideMobileExpanded,
+    }"
+  >
+    <div
+      :class="[
+        layoutAsidePadding,
+        { 'ml-60 lg:ml-0': layoutStore.isAsideMobileExpanded },
+      ]"
+      class="pt-14 min-h-screen w-screen transition-position lg:w-auto bg-gray-50 dark:bg-slate-800 dark:text-slate-100"
+    >
+      <NavBar
+        :menu="menuNavBar"
+        :class="[
+          layoutAsidePadding,
+          { 'ml-60 lg:ml-0': layoutStore.isAsideMobileExpanded },
+        ]"
+        @menu-click="menuClick"
+      >
+        <NavBarItemPlain
+          display="flex lg:hidden"
+          @click.prevent="layoutStore.asideMobileToggle()"
+        >
+          <BaseIcon
+            :path="
+              layoutStore.isAsideMobileExpanded
+                ? mdiBackburger
+                : mdiForwardburger
+            "
+            size="24"
+          />
+        </NavBarItemPlain>
+        <NavBarItemPlain
+          display="hidden lg:flex xl:hidden"
+          @click.prevent="layoutStore.isAsideLgActive = true"
+        >
+          <BaseIcon :path="mdiMenu" size="24" />
+        </NavBarItemPlain>
+
+      </NavBar>
+      <AsideMenu :menu="dashboardMenu" @menu-click="menuClick" />
+      <slot />
+      <FooterBar>
+        Github
+        <a
+          href="https://www.github.com"
+          target="_blank"
+          class="text-blue-600"
+          >Docs</a
+        >
+      </FooterBar>
+    </div>
+  </div>
+</template>
diff --git a/src/Publish/resources/js/Layouts/LayoutGuest.vue b/src/Publish/resources/js/Layouts/LayoutGuest.vue
new file mode 100644
index 0000000..e04c46e
--- /dev/null
+++ b/src/Publish/resources/js/Layouts/LayoutGuest.vue
@@ -0,0 +1,13 @@
+<script setup>
+import { useStyleStore } from "@/Stores/style.js";
+
+const styleStore = useStyleStore();
+</script>
+
+<template>
+  <div :class="{ dark: styleStore.darkMode }">
+    <div class="bg-gray-50 dark:bg-slate-800 dark:text-slate-100">
+      <slot />
+    </div>
+  </div>
+</template>
diff --git a/src/Publish/resources/js/Layouts/ResourceTableLayout.vue b/src/Publish/resources/js/Layouts/ResourceTableLayout.vue
new file mode 100644
index 0000000..2b33d4e
--- /dev/null
+++ b/src/Publish/resources/js/Layouts/ResourceTableLayout.vue
@@ -0,0 +1,378 @@
+<script setup>
+import { mdiForwardburger, mdiBackburger, mdiMenu } from '@mdi/js';
+import menuAside from '@/menuAside.js';
+import menuNavBar from '@/menuNavBar.js';
+import { useMainStore } from '@/Stores/main.js';
+import { useLayoutStore } from '@/Stores/layout.js';
+import { useStyleStore } from '@/Stores/style.js';
+import BaseIcon from '@/Components/BaseIcon.vue';
+import FormControl from '@/Components/FormControl.vue';
+import NavBar from '@/Components/NavBar.vue';
+import NavBarItemPlain from '@/Components/NavBarItemPlain.vue';
+import AsideMenu from '@/Components/AsideMenu.vue';
+import FooterBar from '@/Components/FooterBar.vue';
+import { Inertia } from '@inertiajs/inertia';
+import { computed } from 'vue';
+import { useForm, usePage } from '@inertiajs/inertia-vue3';
+import { useAttrs, ref, onMounted, watch, toRaw } from 'vue';
+import VueEasyLightbox from 'vue-easy-lightbox';
+import { storeToRefs } from 'pinia/dist/pinia';
+import { useResourceStore } from '@@/Stores/resourceStore';
+import { useGetForm } from '@@/Composables/useGetForm';
+
+Inertia.on('navigate', () => {
+    layoutStore.isAsideMobileExpanded = false;
+    layoutStore.isAsideLgActive = false;
+});
+
+const layoutAsidePadding = 'xl:pl-60';
+
+const styleStore = useStyleStore();
+
+const layoutStore = useLayoutStore();
+
+const dashboardMenu = computed(
+    () => usePage().props.value.data.menus.dashboard
+);
+
+const menuClick = (event, item) => {
+    if (item.isToggleLightDark) {
+        styleStore.setDarkMode();
+    }
+
+    if (item.isLogout) {
+        // Add:
+        Inertia.post(route('logout'));
+    }
+};
+
+const props = defineProps({
+    url: String,
+});
+
+let {
+    createModal,
+    viewModal,
+    deleteModal,
+    bulkModal,
+    goNext,
+    goBack,
+    search,
+    per_page,
+    orderBy,
+    desc,
+    last_page,
+    edit,
+    showFilter,
+    filters,
+    bulk,
+    showBulk,
+    bulkActionTitle,
+    view,
+    photoPreview,
+} = storeToRefs(useResourceStore());
+
+let store = useResourceStore();
+
+const attrs = useAttrs();
+
+let { formMake } = useGetForm();
+let form = ref({});
+
+let actionModal = ref({});
+let modalAction = ref({});
+
+let filterItem = ref({});
+let filterObj = ref({});
+let filtersObj = ref({});
+
+let create = () => {
+    form.value = useForm(formMake());
+    edit.value = false;
+    createModal.value = true;
+};
+
+console.log(attrs);
+
+onMounted(() => {
+    for (let i = 0; i < attrs.modals.length; i++) {
+        actionModal.value[attrs.modals[i].name] = false;
+        modalAction.value[attrs.modals[i].name] = {};
+        for (let x = 0; x < attrs.modals[i].rows.length; x++) {
+            if (attrs.modals[i].rows[x].type === 'relation') {
+                modalAction.value[attrs.modals[i].name][
+                    attrs.modals[i].rows[x].field
+                ] = [];
+            } else {
+                modalAction.value[attrs.modals[i].name][
+                    attrs.modals[i].rows[x].field
+                ] = attrs.modals[i].rows[x].default;
+            }
+        }
+    }
+    form.value = useForm(formMake());
+
+    search.value = attrs?.search;
+    per_page.value = attrs?.per_page;
+    orderBy.value = attrs?.orderBy;
+    filters.value = attrs?.filters;
+    createModal.value = attrs?.create;
+    // last_page.value = collection?.last_page;
+});
+
+function setFilter(filter) {
+    filterObj.value = filter;
+}
+
+function makeFilter(filterBy, filterValue) {
+    let filter = {};
+    filter[filterBy] = filterValue;
+}
+
+function getSendedFilter() {
+    const requestedFilter = JSON.parse(
+        JSON.stringify(filtersObj.value[filterObj.value.name])
+    )[filterObj.value.name];
+
+    const ids = requestedFilter.map((item) => item.id);
+    const sendedFilter = {};
+    sendedFilter[filterObj.value.name] = ids;
+    return sendedFilter;
+}
+
+watch(
+    filtersObj,
+    () => {
+        let routeObj = route().params;
+        let sendedFilter = getSendedFilter();
+        store.setFilters(sendedFilter);
+
+        Inertia.get(route(props.url + '.index'), {
+            ...routeObj,
+            ...sendedFilter,
+        });
+    },
+    {
+        deep: true,
+    }
+);
+</script>
+
+<template>
+    <div
+        :class="{
+            dark: styleStore.darkMode,
+            'overflow-hidden lg:overflow-visible':
+                layoutStore.isAsideMobileExpanded,
+        }"
+    >
+        <div
+            :class="[
+                layoutAsidePadding,
+                { 'ml-60 lg:ml-0': layoutStore.isAsideMobileExpanded },
+            ]"
+            class="pt-14 min-h-screen w-screen transition-position lg:w-auto bg-gray-50 dark:bg-slate-800 dark:text-slate-100"
+        >
+            <NavBar
+                :menu="menuNavBar"
+                :class="[
+                    layoutAsidePadding,
+                    { 'ml-60 lg:ml-0': layoutStore.isAsideMobileExpanded },
+                ]"
+                @menu-click="menuClick"
+            >
+                <NavBarItemPlain
+                    display="flex lg:hidden"
+                    @click.prevent="layoutStore.asideMobileToggle()"
+                >
+                    <BaseIcon
+                        :path="
+                            layoutStore.isAsideMobileExpanded
+                                ? mdiBackburger
+                                : mdiForwardburger
+                        "
+                        size="24"
+                    />
+                </NavBarItemPlain>
+                <NavBarItemPlain
+                    display="hidden lg:flex xl:hidden"
+                    @click.prevent="layoutStore.isAsideLgActive = true"
+                >
+                    <BaseIcon :path="mdiMenu" size="24" />
+                </NavBarItemPlain>
+            </NavBar>
+            <AsideMenu :menu="dashboardMenu" @menu-click="menuClick" />
+
+            <div class="px-6 pt-6 mx-auto">
+                <vue-easy-lightbox
+                    ref="lightbox"
+                    :visible="visible"
+                    :imgs="imgs"
+                    :index="index"
+                    @hide="visible = !visible"
+                ></vue-easy-lightbox>
+                <Header
+                    :canCreate="attrs.canCreate"
+                    :title="attrs.lang.index"
+                    :button="attrs.lang.create"
+                    @createItem="create"
+                >
+                    <a
+                        v-for="(action, index) in attrs.actions"
+                        :key="index"
+                        :href="action.url ? action.url : '#'"
+                        @click.prevent="
+                            !action.url
+                                ? action.modal
+                                    ? openModal(action.modal)
+                                    : fireAction(action.action)
+                                : openUrl(action.url)
+                        "
+                        class="mx-2 relative inline-flex items-center px-8 py-3 overflow-hidden text-white bg-main rounded group active:bg-blue-500 focus:outline-none focus:ring"
+                    >
+                        <span
+                            class="absolute left-0 transition-transform -translate-x-full group-hover:translate-x-4"
+                        >
+                            <i class="bx-sm mt-2" :class="action.icon"></i>
+                        </span>
+
+                        <span
+                            class="text-sm font-medium transition-all group-hover:ml-4"
+                        >
+                            {{ action.label }}
+                        </span>
+                    </a>
+                </Header>
+
+                <div>
+                    <div class="flex justify-between p-4">
+                        <Bulk
+                            :bulk="bulk"
+                            :show="showBluk"
+                            :collection="collection"
+                            @close="showBluk = !showBluk"
+                        >
+                            <button
+                                v-if="attrs.canDeleteAny"
+                                type="button"
+                                class="flex items-center w-full h-8 px-3 text-sm font-normal text-danger bg-danger group whitespace-nowrap focus:outline-none"
+                                @click="bulkAction('delete')"
+                            >
+                                <svg
+                                    class="flex-shrink-0 w-6 h-6 mr-2 -ml-1 rtl:ml-2 rtl:-mr-1 group-hover:text-white group-focus:text-white text-danger-500"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    fill="none"
+                                    viewBox="0 0 24 24"
+                                    stroke-width="2"
+                                    stroke="currentColor"
+                                    aria-hidden="true"
+                                >
+                                    <path
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                        d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+                                    ></path>
+                                </svg>
+                                <span class="truncate">
+                                    {{ attrs.lang.bulk }}
+                                </span>
+                            </button>
+                        </Bulk>
+                        <Filters
+                            :showFilter="
+                                attrs.table.filters &&
+                                attrs.table.filters.length
+                            "
+                            :setSearch="search"
+                            :rows="rows"
+                            :url="url"
+                            @getSearch="searchFilter"
+                            @reset="resetFilter"
+                            @filter="filter"
+                        >
+                            <ViltForm
+                                v-for="(filter, key) in attrs.table.filters"
+                                v-model="filtersObj[filter.name]"
+                                :rows="filter.rows"
+                                :key="key"
+                                @update:modelValue="setFilter(filter)"
+                            />
+                        </Filters>
+                    </div>
+                </div>
+            </div>
+
+            <slot />
+            <FooterBar>
+                Github
+                <a
+                    href="https://www.github.com"
+                    target="_blank"
+                    class="text-blue-600"
+                    >Docs</a
+                >
+            </FooterBar>
+        </div>
+    </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+import MixinVue from '@@/Components/Base/Mixin.vue';
+import JetSecondaryButton from '@/Jetstream/SecondaryButton.vue';
+import JetButton from '@/Jetstream/Button.vue';
+import JetDialogModal from '@/Jetstream/DialogModal.vue';
+import ViltForm from '@@/Rows/ViltForm.vue';
+
+export default defineComponent({
+    mixins: [MixinVue],
+    components: {
+        JetDialogModal,
+        JetButton,
+        JetSecondaryButton,
+        ViltForm,
+    },
+    data() {
+        return {
+            selectedID: null,
+            visible: false,
+            imgs: [],
+        };
+    },
+
+    methods: {
+        openUrl(url) {
+            window.open(url);
+        },
+        modalActionRun(modal, action) {
+            if (this.selectedID) {
+                this.modalAction[modal].id = this.selectedID;
+            }
+            this.$inertia
+                .form(this.modalAction[modal])
+                .submit('post', route(action), {
+                    preserveScroll: true,
+                    onSuccess: () => {
+                        this.modalAction[modal].reset();
+                        this.actionModal[modal] = false;
+                        this.success();
+                    },
+                });
+        },
+        fireAction(name, id = null) {
+            this.$inertia.post(route(name), {
+                id: id ? id : this.selectedID,
+            });
+        },
+        openModal(name, id = null) {
+            this.selectedID = id;
+            this.actionModal[name] = !this.actionModal[name];
+        },
+
+        popUp(images) {
+            this.visible = true;
+            this.imgs = images;
+        },
+    },
+});
+</script>
diff --git a/src/Publish/resources/js/Pages/API/Index.vue b/src/Publish/resources/js/Pages/API/Index.vue
new file mode 100644
index 0000000..df4cb5b
--- /dev/null
+++ b/src/Publish/resources/js/Pages/API/Index.vue
@@ -0,0 +1,30 @@
+<script setup>
+import ApiTokenManager from '@/Pages/API/Partials/ApiTokenManager.vue';
+import AppLayout from '@/Layouts/AppLayout.vue';
+
+defineProps({
+    tokens: Array,
+    availablePermissions: Array,
+    defaultPermissions: Array,
+});
+</script>
+
+<template>
+    <AppLayout title="API Tokens">
+        <template #header>
+            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
+                API Tokens
+            </h2>
+        </template>
+
+        <div>
+            <div class="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8">
+                <ApiTokenManager
+                    :tokens="tokens"
+                    :available-permissions="availablePermissions"
+                    :default-permissions="defaultPermissions"
+                />
+            </div>
+        </div>
+    </AppLayout>
+</template>
diff --git a/src/Publish/resources/js/Pages/API/Partials/ApiTokenManager.vue b/src/Publish/resources/js/Pages/API/Partials/ApiTokenManager.vue
new file mode 100644
index 0000000..ed9a4fc
--- /dev/null
+++ b/src/Publish/resources/js/Pages/API/Partials/ApiTokenManager.vue
@@ -0,0 +1,255 @@
+<script setup>
+import { ref } from 'vue';
+import { useForm } from '@inertiajs/inertia-vue3';
+import JetActionMessage from '@/Components/ActionMessage.vue';
+import JetActionSection from '@/Components/ActionSection.vue';
+import JetButton from '@/Components/Button.vue';
+import JetConfirmationModal from '@/Components/ConfirmationModal.vue';
+import JetDangerButton from '@/Components/DangerButton.vue';
+import JetDialogModal from '@/Components/DialogModal.vue';
+import JetFormSection from '@/Components/FormSection.vue';
+import JetInput from '@/Components/Input.vue';
+import JetCheckbox from '@/Components/Checkbox.vue';
+import JetInputError from '@/Components/InputError.vue';
+import JetLabel from '@/Components/Label.vue';
+import JetSecondaryButton from '@/Components/SecondaryButton.vue';
+import JetSectionBorder from '@/Components/SectionBorder.vue';
+
+const props = defineProps({
+    tokens: Array,
+    availablePermissions: Array,
+    defaultPermissions: Array,
+});
+
+const createApiTokenForm = useForm({
+    name: '',
+    permissions: props.defaultPermissions,
+});
+
+const updateApiTokenForm = useForm({
+    permissions: [],
+});
+
+const deleteApiTokenForm = useForm();
+
+const displayingToken = ref(false);
+const managingPermissionsFor = ref(null);
+const apiTokenBeingDeleted = ref(null);
+
+const createApiToken = () => {
+    createApiTokenForm.post(route('api-tokens.store'), {
+        preserveScroll: true,
+        onSuccess: () => {
+            displayingToken.value = true;
+            createApiTokenForm.reset();
+        },
+    });
+};
+
+const manageApiTokenPermissions = (token) => {
+    updateApiTokenForm.permissions = token.abilities;
+    managingPermissionsFor.value = token;
+};
+
+const updateApiToken = () => {
+    updateApiTokenForm.put(route('api-tokens.update', managingPermissionsFor.value), {
+        preserveScroll: true,
+        preserveState: true,
+        onSuccess: () => (managingPermissionsFor.value = null),
+    });
+};
+
+const confirmApiTokenDeletion = (token) => {
+    apiTokenBeingDeleted.value = token;
+};
+
+const deleteApiToken = () => {
+    deleteApiTokenForm.delete(route('api-tokens.destroy', apiTokenBeingDeleted.value), {
+        preserveScroll: true,
+        preserveState: true,
+        onSuccess: () => (apiTokenBeingDeleted.value = null),
+    });
+};
+</script>
+
+<template>
+    <div>
+        <!-- Generate API Token -->
+        <JetFormSection @submitted="createApiToken">
+            <template #title>
+                Create API Token
+            </template>
+
+            <template #description>
+                API tokens allow third-party services to authenticate with our application on your behalf.
+            </template>
+
+            <template #form>
+                <!-- Token Name -->
+                <div class="col-span-6 sm:col-span-4">
+                    <JetLabel for="name" value="Name" />
+                    <JetInput
+                        id="name"
+                        v-model="createApiTokenForm.name"
+                        type="text"
+                        class="mt-1 block w-full"
+                        autofocus
+                    />
+                    <JetInputError :message="createApiTokenForm.errors.name" class="mt-2" />
+                </div>
+
+                <!-- Token Permissions -->
+                <div v-if="availablePermissions.length > 0" class="col-span-6">
+                    <JetLabel for="permissions" value="Permissions" />
+
+                    <div class="mt-2 grid grid-cols-1 md:grid-cols-2 gap-4">
+                        <div v-for="permission in availablePermissions" :key="permission">
+                            <label class="flex items-center">
+                                <JetCheckbox v-model:checked="createApiTokenForm.permissions" :value="permission" />
+                                <span class="ml-2 text-sm text-gray-600">{{ permission }}</span>
+                            </label>
+                        </div>
+                    </div>
+                </div>
+            </template>
+
+            <template #actions>
+                <JetActionMessage :on="createApiTokenForm.recentlySuccessful" class="mr-3">
+                    Created.
+                </JetActionMessage>
+
+                <JetButton :class="{ 'opacity-25': createApiTokenForm.processing }" :disabled="createApiTokenForm.processing">
+                    Create
+                </JetButton>
+            </template>
+        </JetFormSection>
+
+        <div v-if="tokens.length > 0">
+            <JetSectionBorder />
+
+            <!-- Manage API Tokens -->
+            <div class="mt-10 sm:mt-0">
+                <JetActionSection>
+                    <template #title>
+                        Manage API Tokens
+                    </template>
+
+                    <template #description>
+                        You may delete any of your existing tokens if they are no longer needed.
+                    </template>
+
+                    <!-- API Token List -->
+                    <template #content>
+                        <div class="space-y-6">
+                            <div v-for="token in tokens" :key="token.id" class="flex items-center justify-between">
+                                <div>
+                                    {{ token.name }}
+                                </div>
+
+                                <div class="flex items-center">
+                                    <div v-if="token.last_used_ago" class="text-sm text-gray-400">
+                                        Last used {{ token.last_used_ago }}
+                                    </div>
+
+                                    <button
+                                        v-if="availablePermissions.length > 0"
+                                        class="cursor-pointer ml-6 text-sm text-gray-400 underline"
+                                        @click="manageApiTokenPermissions(token)"
+                                    >
+                                        Permissions
+                                    </button>
+
+                                    <button class="cursor-pointer ml-6 text-sm text-red-500" @click="confirmApiTokenDeletion(token)">
+                                        Delete
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </template>
+                </JetActionSection>
+            </div>
+        </div>
+
+        <!-- Token Value Modal -->
+        <JetDialogModal :show="displayingToken" @close="displayingToken = false">
+            <template #title>
+                API Token
+            </template>
+
+            <template #content>
+                <div>
+                    Please copy your new API token. For your security, it won't be shown again.
+                </div>
+
+                <div v-if="$page.props.jetstream.flash.token" class="mt-4 bg-gray-100 px-4 py-2 rounded font-mono text-sm text-gray-500">
+                    {{ $page.props.jetstream.flash.token }}
+                </div>
+            </template>
+
+            <template #footer>
+                <JetSecondaryButton @click="displayingToken = false">
+                    Close
+                </JetSecondaryButton>
+            </template>
+        </JetDialogModal>
+
+        <!-- API Token Permissions Modal -->
+        <JetDialogModal :show="managingPermissionsFor != null" @close="managingPermissionsFor = null">
+            <template #title>
+                API Token Permissions
+            </template>
+
+            <template #content>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div v-for="permission in availablePermissions" :key="permission">
+                        <label class="flex items-center">
+                            <JetCheckbox v-model:checked="updateApiTokenForm.permissions" :value="permission" />
+                            <span class="ml-2 text-sm text-gray-600">{{ permission }}</span>
+                        </label>
+                    </div>
+                </div>
+            </template>
+
+            <template #footer>
+                <JetSecondaryButton @click="managingPermissionsFor = null">
+                    Cancel
+                </JetSecondaryButton>
+
+                <JetButton
+                    class="ml-3"
+                    :class="{ 'opacity-25': updateApiTokenForm.processing }"
+                    :disabled="updateApiTokenForm.processing"
+                    @click="updateApiToken"
+                >
+                    Save
+                </JetButton>
+            </template>
+        </JetDialogModal>
+
+        <!-- Delete Token Confirmation Modal -->
+        <JetConfirmationModal :show="apiTokenBeingDeleted != null" @close="apiTokenBeingDeleted = null">
+            <template #title>
+                Delete API Token
+            </template>
+
+            <template #content>
+                Are you sure you would like to delete this API token?
+            </template>
+
+            <template #footer>
+                <JetSecondaryButton @click="apiTokenBeingDeleted = null">
+                    Cancel
+                </JetSecondaryButton>
+
+                <JetDangerButton
+                    class="ml-3"
+                    :class="{ 'opacity-25': deleteApiTokenForm.processing }"
+                    :disabled="deleteApiTokenForm.processing"
+                    @click="deleteApiToken"
+                >
+                    Delete
+                </JetDangerButton>
+            </template>
+        </JetConfirmationModal>
+    </div>
+</template>
diff --git a/src/Publish/resources/js/Pages/Auth/ConfirmPassword.vue b/src/Publish/resources/js/Pages/Auth/ConfirmPassword.vue
new file mode 100644
index 0000000..014a374
--- /dev/null
+++ b/src/Publish/resources/js/Pages/Auth/ConfirmPassword.vue
@@ -0,0 +1,69 @@
+<script setup>
+import { useForm, Head } from '@inertiajs/inertia-vue3'
+import { ref } from 'vue'
+import LayoutGuest from '@/Layouts/LayoutGuest.vue'
+import SectionFullScreen from '@/Components/SectionFullScreen.vue'
+import CardBox from '@/Components/CardBox.vue'
+import FormControl from '@/Components/FormControl.vue'
+import FormField from '@/Components/FormField.vue'
+import BaseDivider from '@/Components/BaseDivider.vue'
+import BaseButton from '@/Components/BaseButton.vue'
+import FormValidationErrors from '@@/Components/FormValidationErrors.vue'
+const form = useForm({
+    password: ''
+})
+const passwordInput = ref(null)
+const submit = () => {
+    form.post(route('password.confirm'), {
+        onFinish: () => {
+            form.reset()
+            passwordInput.value?.focus()
+        }
+    })
+}
+</script>
+<template>
+    <LayoutGuest>
+        <Head title="Secure Area" />
+
+        <SectionFullScreen
+            v-slot="{ cardClass }"
+            bg="purplePink"
+        >
+            <CardBox
+                :class="cardClass"
+                is-form
+                @submit.prevent="submit"
+            >
+                <FormValidationErrors />
+                <FormField>
+                    <div class="mb-4 text-sm text-gray-600">
+                        This is a secure area of the application. Please confirm your password before continuing.
+                    </div>
+                </FormField>
+                <FormField
+                    label="Password"
+                    label-for="password"
+                    help="Please enter your password to confirm"
+                >
+                    <FormControl
+                        id="password"
+                        @set-ref="passwordInput = $event"
+                        v-model="form.password"
+                        type="password"
+                        required
+                        autocomplete="current-password"
+                    />
+                </FormField>
+                <BaseDivider />
+                <BaseButton
+                    type="submit"
+                    color="info"
+                    label="Confirm"
+                    :class="{ 'opacity-25': form.processing }"
+                    :disabled="form.processing"
+                />
+            </CardBox>
+        </SectionFullScreen>
+    </LayoutGuest>
+</template>
diff --git a/src/Publish/resources/js/Pages/Auth/ForgotPassword.vue b/src/Publish/resources/js/Pages/Auth/ForgotPassword.vue
new file mode 100644
index 0000000..21d952b
--- /dev/null
+++ b/src/Publish/resources/js/Pages/Auth/ForgotPassword.vue
@@ -0,0 +1,88 @@
+<script setup>
+import { useForm, Head, Link } from '@inertiajs/inertia-vue3'
+import { mdiEmail } from '@mdi/js'
+import LayoutGuest from '@/Layouts/LayoutGuest.vue'
+import SectionFullScreen from '@/Components/SectionFullScreen.vue'
+import CardBox from '@/Components/CardBox.vue'
+import FormField from '@/Components/FormField.vue'
+import FormControl from '@/Components/FormControl.vue'
+import BaseDivider from '@/Components/BaseDivider.vue'
+import BaseButton from '@/Components/BaseButton.vue'
+import FormValidationErrors from '@@/Components/FormValidationErrors.vue'
+import NotificationBarInCard from '@/Components/NotificationBarInCard.vue'
+import BaseLevel from '@/Components/BaseLevel.vue'
+defineProps({
+    status: {
+        type: String,
+        default: null
+    }
+})
+const form = useForm({
+    email: ''
+})
+const submit = () => {
+    form.post(route('password.email'))
+}
+</script>
+
+<template>
+    <LayoutGuest>
+        <Head title="Forgot Password" />
+
+        <SectionFullScreen
+            v-slot="{ cardClass }"
+            bg="purplePink"
+        >
+            <CardBox
+                :class="cardClass"
+                is-form
+                @submit.prevent="submit"
+            >
+                <FormValidationErrors />
+
+                <NotificationBarInCard
+                    v-if="status"
+                    color="info"
+                >
+                    {{ status }}
+                </NotificationBarInCard>
+
+                <FormField>
+                    <div class="mb-4 text-sm text-gray-600">
+                        Forgot your password? No problem. Just let us know your email address and we will email you a password reset link that will allow you to choose a new one.
+                    </div>
+                </FormField>
+
+                <FormField
+                    label="Email"
+                    help="Please enter your email"
+                >
+                    <FormControl
+                        v-model="form.email"
+                        :icon="mdiEmail"
+                        autocomplete="email"
+                        type="email"
+                        required
+                    />
+                </FormField>
+
+                <BaseDivider />
+
+                <BaseLevel>
+                    <BaseButton
+                        type="submit"
+                        color="info"
+                        label="Email link"
+                        :class="{ 'opacity-25': form.processing }"
+                        :disabled="form.processing"
+                    />
+                    <Link
+                        :href="route('login')"
+                    >
+                        Back to login
+                    </Link>
+                </BaseLevel>
+            </CardBox>
+        </SectionFullScreen>
+    </LayoutGuest>
+</template>
diff --git a/src/Publish/resources/js/Pages/Auth/Login.vue b/src/Publish/resources/js/Pages/Auth/Login.vue
new file mode 100644
index 0000000..caf99ec
--- /dev/null
+++ b/src/Publish/resources/js/Pages/Auth/Login.vue
@@ -0,0 +1,127 @@
+<script setup>
+import { useForm, Head, Link } from '@inertiajs/inertia-vue3'
+import { mdiAccount, mdiAsterisk } from '@mdi/js'
+import LayoutGuest from '@/Layouts/LayoutGuest.vue'
+import SectionFullScreen from '@/Components/SectionFullScreen.vue'
+import CardBox from '@/Components/CardBox.vue'
+import FormCheckRadioGroup from '@/Components/FormCheckRadioGroup.vue'
+import FormField from '@/Components/FormField.vue'
+import FormControl from '@/Components/FormControl.vue'
+import BaseDivider from '@/Components/BaseDivider.vue'
+import BaseButton from '@/Components/BaseButton.vue'
+import BaseButtons from '@/Components/BaseButtons.vue'
+import FormValidationErrors from '@@/Components/FormValidationErrors.vue'
+import NotificationBarInCard from '@/Components/NotificationBarInCard.vue'
+import BaseLevel from '@/Components/BaseLevel.vue'
+const props = defineProps({
+    canResetPassword: Boolean,
+    status: {
+        type: String,
+        default: null
+    }
+})
+const form = useForm({
+    email: '',
+    password: '',
+    remember: []
+})
+const submit = () => {
+    form
+        .transform(data => ({
+            ... data,
+            remember: form.remember && form.remember.length ? 'on' : ''
+        }))
+        .post(route('login'), {
+            onFinish: () => form.reset('password'),
+        })
+}
+</script>
+
+<template>
+    <LayoutGuest>
+        <Head title="Login" />
+
+        <SectionFullScreen
+            v-slot="{ cardClass }"
+            bg="purplePink"
+        >
+            <CardBox
+                :class="cardClass"
+                is-form
+                @submit.prevent="submit"
+            >
+                <FormValidationErrors />
+
+                <NotificationBarInCard
+                    v-if="status"
+                    color="info"
+                >
+                    {{ status }}
+                </NotificationBarInCard>
+
+                <FormField
+                    label="Email"
+                    label-for="email"
+                    help="Please enter your email"
+                >
+                    <FormControl
+                        v-model="form.email"
+                        :icon="mdiAccount"
+                        id="email"
+                        autocomplete="email"
+                        type="email"
+                        required
+                    />
+                </FormField>
+
+                <FormField
+                    label="Password"
+                    label-for="password"
+                    help="Please enter your password"
+                >
+                    <FormControl
+                        v-model="form.password"
+                        :icon="mdiAsterisk"
+                        type="password"
+                        id="password"
+                        autocomplete="current-password"
+                        required
+                    />
+                </FormField>
+
+                <FormCheckRadioGroup
+                    v-model="form.remember"
+                    name="remember"
+                    :options="{ remember: 'Remember' }"
+                />
+
+                <BaseDivider />
+
+                <BaseLevel>
+                    <BaseButtons>
+                        <BaseButton
+                            type="submit"
+                            color="info"
+                            label="Login"
+                            :class="{ 'opacity-25': form.processing }"
+                            :disabled="form.processing"
+                        />
+                        <BaseButton
+                            v-if="canResetPassword"
+                            route-name="password.request"
+                            color="info"
+                            outline
+                            label="Remind"
+                        />
+                    </BaseButtons>
+                    <Link
+                        :href="route('register')"
+                    >
+                        Register
+                    </Link>
+                </BaseLevel>
+            </CardBox>
+        </SectionFullScreen>
+    </LayoutGuest>
+</template>
+Footer
diff --git a/src/Publish/resources/js/Pages/Auth/Register.vue b/src/Publish/resources/js/Pages/Auth/Register.vue
new file mode 100644
index 0000000..5a27d4d
--- /dev/null
+++ b/src/Publish/resources/js/Pages/Auth/Register.vue
@@ -0,0 +1,129 @@
+<script setup>
+import { useForm, usePage, Head } from '@inertiajs/inertia-vue3'
+import { computed } from 'vue'
+import { mdiAccount, mdiEmail, mdiFormTextboxPassword } from '@mdi/js'
+import LayoutGuest from '@/Layouts/LayoutGuest.vue'
+import SectionFullScreen from '@/Components/SectionFullScreen.vue'
+import CardBox from '@/Components/CardBox.vue'
+import FormCheckRadioGroup from '@/Components/FormCheckRadioGroup.vue'
+import FormField from '@/Components/FormField.vue'
+import FormControl from '@/Components/FormControl.vue'
+import BaseDivider from '@/Components/BaseDivider.vue'
+import BaseButton from '@/Components/BaseButton.vue'
+import BaseButtons from '@/Components/BaseButtons.vue'
+import FormValidationErrors from '@@/Components/FormValidationErrors.vue'
+const form = useForm({
+    name: '',
+    email: '',
+    password: '',
+    password_confirmation: '',
+    terms: [],
+})
+const hasTermsAndPrivacyPolicyFeature = computed(() => usePage().props.value?.jetstream?.hasTermsAndPrivacyPolicyFeature )
+const submit = () => {
+    form
+        .transform(data => ({
+            ... data,
+            terms: form.terms && form.terms.length
+        }))
+        .post(route('register'), {
+            onFinish: () => form.reset('password', 'password_confirmation'),
+        })
+}
+</script>
+<template>
+    <LayoutGuest>
+        <Head title="Register" />
+        <SectionFullScreen
+            v-slot="{ cardClass }"
+            bg="purplePink"
+        >
+            <CardBox
+                :class="cardClass"
+                class="my-24"
+                is-form
+                @submit.prevent="submit"
+            >
+                <FormValidationErrors />
+                <FormField
+                    label="Name"
+                    label-for="name"
+                    help="Please enter your name"
+                >
+                    <FormControl
+                        v-model="form.name"
+                        id="name"
+                        :icon="mdiAccount"
+                        autocomplete="name"
+                        type="text"
+                        required
+                    />
+                </FormField>
+                <FormField
+                    label="Email"
+                    label-for="email"
+                    help="Please enter your email"
+                >
+                    <FormControl
+                        v-model="form.email"
+                        id="email"
+                        :icon="mdiEmail"
+                        autocomplete="email"
+                        type="email"
+                        required
+                    />
+                </FormField>
+                <FormField
+                    label="Password"
+                    label-for="password"
+                    help="Please enter new password"
+                >
+                    <FormControl
+                        v-model="form.password"
+                        id="password"
+                        :icon="mdiFormTextboxPassword"
+                        type="password"
+                        autocomplete="new-password"
+                        required
+                    />
+                </FormField>
+                <FormField
+                    label="Confirm Password"
+                    label-for="password_confirmation"
+                    help="Please confirm your password"
+                >
+                    <FormControl
+                        v-model="form.password_confirmation"
+                        id="password_confirmation"
+                        :icon="mdiFormTextboxPassword"
+                        type="password"
+                        autocomplete="new-password"
+                        required
+                    />
+                </FormField>
+                <FormCheckRadioGroup
+                    v-if="hasTermsAndPrivacyPolicyFeature"
+                    v-model="form.terms"
+                    name="remember"
+                    :options="{ agree: 'I agree to the Terms' }"
+                />
+                <BaseDivider />
+                <BaseButtons>
+                    <BaseButton
+                        type="submit"
+                        color="info"
+                        label="Register"
+                        :class="{ 'opacity-25': form.processing }"
+                        :disabled="form.processing"
+                    />
+                    <BaseButton
+                        route-name="login"
+                        color="info"
+                        outline
+                        label="Login"
+                    />
+                </BaseButtons>
+            </CardBox>
+        </SectionFullScreen>
+    </LayoutGuest>
+</template>
diff --git a/src/Publish/resources/js/Pages/Auth/ResetPassword.vue b/src/Publish/resources/js/Pages/Auth/ResetPassword.vue
new file mode 100644
index 0000000..6af73fb
--- /dev/null
+++ b/src/Publish/resources/js/Pages/Auth/ResetPassword.vue
@@ -0,0 +1,108 @@
+<script setup>
+import { useForm, Head, Link } from '@inertiajs/inertia-vue3'
+import { mdiEmail, mdiFormTextboxPassword } from '@mdi/js'
+import LayoutGuest from '@/Layouts/LayoutGuest.vue'
+import SectionFullScreen from '@/Components/SectionFullScreen.vue'
+import CardBox from '@/Components/CardBox.vue'
+import FormField from '@/Components/FormField.vue'
+import FormControl from '@/Components/FormControl.vue'
+import BaseDivider from '@/Components/BaseDivider.vue'
+import BaseButton from '@/Components/BaseButton.vue'
+import FormValidationErrors from '@@/Components/FormValidationErrors.vue'
+const props = defineProps({
+    email: {
+        type: String,
+        default: null
+    },
+    token: {
+        type: String,
+        default: null
+    }
+})
+const form = useForm({
+    token: props.token,
+    email: props.email,
+    password: '',
+    password_confirmation: '',
+})
+const submit = () => {
+    form
+        .post(route('password.update'), {
+            onFinish: () => form.reset('password', 'password_confirmation'),
+        })
+}
+</script>
+
+<template>
+    <LayoutGuest>
+        <Head title="Reset Password" />
+
+        <SectionFullScreen
+            v-slot="{ cardClass }"
+            bg="purplePink"
+        >
+            <CardBox
+                :class="cardClass"
+                is-form
+                @submit.prevent="submit"
+            >
+                <FormValidationErrors />
+
+                <FormField
+                    label="Email"
+                    label-for="email"
+                    help="Please enter your email"
+                >
+                    <FormControl
+                        v-model="form.email"
+                        :icon="mdiEmail"
+                        autocomplete="email"
+                        type="email"
+                        id="email"
+                        required
+                    />
+                </FormField>
+
+                <FormField
+                    label="Password"
+                    label-for="password"
+                    help="Please enter new password"
+                >
+                    <FormControl
+                        v-model="form.password"
+                        :icon="mdiFormTextboxPassword"
+                        type="password"
+                        autocomplete="new-password"
+                        id="password"
+                        required
+                    />
+                </FormField>
+
+                <FormField
+                    label="Confirm Password"
+                    label-for="password_confirmation"
+                    help="Please confirm new password"
+                >
+                    <FormControl
+                        v-model="form.password_confirmation"
+                        :icon="mdiFormTextboxPassword"
+                        type="password"
+                        autocomplete="new-password"
+                        id="password_confirmation"
+                        required
+                    />
+                </FormField>
+
+                <BaseDivider />
+
+                <BaseButton
+                    type="submit"
+                    color="info"
+                    label="Reset password"
+                    :class="{ 'opacity-25': form.processing }"
+                    :disabled="form.processing"
+                />
+            </CardBox>
+        </SectionFullScreen>
+    </LayoutGuest>
+</template>
diff --git a/src/Publish/resources/js/Pages/Auth/TwoFactorChallenge.vue b/src/Publish/resources/js/Pages/Auth/TwoFactorChallenge.vue
new file mode 100644
index 0000000..0571c5c
--- /dev/null
+++ b/src/Publish/resources/js/Pages/Auth/TwoFactorChallenge.vue
@@ -0,0 +1,110 @@
+<script setup>
+import { useForm, Head } from '@inertiajs/inertia-vue3'
+import { nextTick, ref } from 'vue'
+import LayoutGuest from '@/Layouts/LayoutGuest.vue'
+import SectionFullScreen from '@/Components/SectionFullScreen.vue'
+import CardBox from '@/Components/CardBox.vue'
+import FormControl from '@/Components/FormControl.vue'
+import FormField from '@/Components/FormField.vue'
+import BaseDivider from '@/Components/BaseDivider.vue'
+import BaseButton from '@/Components/BaseButton.vue'
+import FormValidationErrors from '@@/Components/FormValidationErrors.vue'
+import BaseLevel from '@/Components/BaseLevel.vue'
+const recovery = ref(false)
+const form = useForm({
+    code: '',
+    recovery_code: ''
+})
+const recoveryCodeInput = ref(null)
+const codeInput = ref(null)
+const toggleRecovery = async () => {
+    recovery.value ^= true
+    await nextTick()
+    if (recovery.value) {
+        recoveryCodeInput.value?.focus()
+        form.code = ''
+    } else {
+        codeInput.value?.focus()
+        form.recovery_code = ''
+    }
+}
+const submit = () => {
+    form.post(route('two-factor.login'))
+}
+</script>
+<template>
+    <LayoutGuest>
+        <Head title="Two-factor Confirmation" />
+        <SectionFullScreen
+            v-slot="{ cardClass }"
+            bg="purplePink"
+        >
+            <CardBox
+                :class="cardClass"
+                is-form
+                @submit.prevent="submit"
+            >
+                <FormValidationErrors />
+                <FormField>
+                    <div class="mb-4 text-sm text-gray-600">
+                        <template v-if="! recovery">
+                            Please confirm access to your account by entering the authentication code provided by your authenticator application.
+                        </template>
+                        <template v-else>
+                            Please confirm access to your account by entering one of your emergency recovery codes.
+                        </template>
+                    </div>
+                </FormField>
+                <FormField
+                    v-if="!recovery"
+                    label="Code"
+                    label-for="code"
+                    help="Please enter one-time code"
+                >
+                    <FormControl
+                        id="code"
+                        @set-ref="codeInput = $event"
+                        v-model="form.code"
+                        type="text"
+                        inputmode="numeric"
+                        autofocus
+                        autocomplete="one-time-code"
+                    />
+                </FormField>
+                <FormField
+                    v-else
+                    label="Recovery Code"
+                    label-for="recovery_code"
+                    help="Please enter recovery code"
+                >
+                    <FormControl
+                        id="recovery_code"
+                        @set-ref="recoveryCodeInput = $event"
+                        v-model="form.recovery_code"
+                        type="text"
+                        class="mt-1 block w-full"
+                        autocomplete="one-time-code"
+                    />
+                </FormField>
+                <BaseDivider />
+                <BaseLevel>
+                    <BaseButton
+                        type="submit"
+                        color="info"
+                        label="Log in"
+                        :class="{ 'opacity-25': form.processing }"
+                        :disabled="form.processing"
+                    />
+                    <button @click.prevent="toggleRecovery">
+                        <template v-if="!recovery">
+                            Use a recovery code
+                        </template>
+                        <template v-else>
+                            Use an authentication code
+                        </template>
+                    </button>
+                </BaseLevel>
+            </CardBox>
+        </SectionFullScreen>
+    </LayoutGuest>
+</template>
diff --git a/src/Publish/resources/js/Pages/Auth/VerifyEmail.vue b/src/Publish/resources/js/Pages/Auth/VerifyEmail.vue
new file mode 100644
index 0000000..af0cb3a
--- /dev/null
+++ b/src/Publish/resources/js/Pages/Auth/VerifyEmail.vue
@@ -0,0 +1,75 @@
+<script setup>
+import { useForm, Head, Link } from '@inertiajs/inertia-vue3'
+import { computed } from 'vue'
+import LayoutGuest from '@/Layouts/LayoutGuest.vue'
+import SectionFullScreen from '@/Components/SectionFullScreen.vue'
+import CardBox from '@/Components/CardBox.vue'
+import FormField from '@/Components/FormField.vue'
+import BaseDivider from '@/Components/BaseDivider.vue'
+import BaseButton from '@/Components/BaseButton.vue'
+import FormValidationErrors from '@@/Components/FormValidationErrors.vue'
+import NotificationBarInCard from '@/Components/NotificationBarInCard.vue'
+import BaseLevel from '@/Components/BaseLevel.vue'
+const props = defineProps({
+    status: {
+        type: String,
+        default: null
+    }
+})
+const form = useForm()
+const verificationLinkSent = computed(() => props.status === 'verification-link-sent')
+const submit = () => {
+    form.post(route('verification.send'))
+}
+</script>
+
+<template>
+    <LayoutGuest>
+        <Head title="Email Verification" />
+
+        <SectionFullScreen
+            v-slot="{ cardClass }"
+            bg="purplePink"
+        >
+            <CardBox
+                :class="cardClass"
+                is-form
+                @submit.prevent="submit"
+            >
+                <FormValidationErrors />
+
+                <NotificationBarInCard
+                    v-if="verificationLinkSent"
+                    color="info"
+                >
+                    A new verification link has been sent to the email address you provided during registration.
+                </NotificationBarInCard>
+
+                <FormField>
+                    <div class="mb-4 text-sm text-gray-600">
+                        Thanks for signing up! Before getting started, could you verify your email address by clicking on the link we just emailed to you? If you didn't receive the email, we will gladly send you another.
+                    </div>
+                </FormField>
+
+                <BaseDivider />
+
+                <BaseLevel>
+                    <BaseButton
+                        type="submit"
+                        color="info"
+                        label="Resend Verification Email"
+                        :class="{ 'opacity-25': form.processing }"
+                        :disabled="form.processing"
+                    />
+                    <Link
+                        :href="route('logout')"
+                        method="post"
+                        as="button"
+                    >
+                        Logout
+                    </Link>
+                </BaseLevel>
+            </CardBox>
+        </SectionFullScreen>
+    </LayoutGuest>
+</template>
diff --git a/src/Publish/resources/js/Pages/Dashboard.vue b/src/Publish/resources/js/Pages/Dashboard.vue
new file mode 100644
index 0000000..66c8d4e
--- /dev/null
+++ b/src/Publish/resources/js/Pages/Dashboard.vue
@@ -0,0 +1,22 @@
+<script setup>
+import AppLayout from '@/Layouts/AppLayout.vue';
+import Welcome from '@/Components/Welcome.vue';
+</script>
+
+<template>
+    <AppLayout title="Dashboard">
+        <template #header>
+            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
+                Dashboard
+            </h2>
+        </template>
+
+        <div class="py-12">
+            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+                <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
+                    <Welcome />
+                </div>
+            </div>
+        </div>
+    </AppLayout>
+</template>
diff --git a/src/Publish/resources/js/Pages/HomeView.vue b/src/Publish/resources/js/Pages/HomeView.vue
new file mode 100644
index 0000000..cb86319
--- /dev/null
+++ b/src/Publish/resources/js/Pages/HomeView.vue
@@ -0,0 +1,149 @@
+<script setup>
+import { Head } from '@inertiajs/inertia-vue3'
+import { computed, ref, onMounted } from "vue";
+import { useMainStore } from "@/Stores/main";
+
+import SectionMain from '@/Components/SectionMain.vue'
+import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue'
+import BaseButton from '@/Components/BaseButton.vue'
+import CardBoxWidget from '@/Components/CardBoxWidget.vue'
+import CardBoxTransaction from '@/Components/CardBoxTransaction.vue'
+import CardBoxClient from '@/Components/CardBoxClient.vue'
+import SectionBannerStarOnGitHub from '@/Components/SectionBannerStarOnGitHub.vue'
+import CardBox from '@/Components/CardBox.vue'
+import NotificationBar from '@/Components/NotificationBar.vue'
+import TableSampleClients from '@/Components/TableSampleClients.vue'
+import LineChart from "@/Components/Charts/LineChart.vue";
+import * as chartConfig from "@/Components/Charts/chart.config.js";
+import {
+    mdiAccountMultiple,
+    mdiCartOutline,
+    mdiChartTimelineVariant,
+    mdiMonitorCellphone,
+    mdiReload,
+    mdiGithub,
+    mdiChartPie,
+} from "@mdi/js";
+
+const chartData = ref(null);
+
+const fillChartData = () => {
+    chartData.value = chartConfig.sampleChartData();
+};
+
+onMounted(() => {
+    fillChartData();
+});
+
+const mainStore = useMainStore();
+
+const clientBarItems = computed(() => mainStore.clients.slice(0, 4));
+
+const transactionBarItems = computed(() => mainStore.history);
+
+</script>
+<script>
+import ResourceTableLayout from '@@/Layouts/ResourceTableLayout.vue';
+
+export default {
+    layout: ResourceTableLayout
+}
+</script>
+
+<template>
+        <SectionMain>
+            <SectionTitleLineWithButton
+                :icon="mdiChartTimelineVariant"
+                title="Overview"
+                main
+            >
+                <BaseButton
+                    href="https://github.com/justboil/admin-one-vue-tailwind"
+                    target="_blank"
+                    :icon="mdiGithub"
+                    label="Star on GitHub"
+                    color="contrast"
+                    rounded-full
+                    small
+                />
+            </SectionTitleLineWithButton>
+
+            <div class="grid grid-cols-1 gap-6 lg:grid-cols-3 mb-6">
+                <CardBoxWidget
+                    trend="12%"
+                    trend-type="up"
+                    color="text-emerald-500"
+                    :icon="mdiAccountMultiple"
+                    :number="512"
+                    label="Clients"
+                />
+                <CardBoxWidget
+                    trend="12%"
+                    trend-type="down"
+                    color="text-blue-500"
+                    :icon="mdiCartOutline"
+                    :number="7770"
+                    prefix="$"
+                    label="Sales"
+                />
+                <CardBoxWidget
+                    trend="Overflow"
+                    trend-type="alert"
+                    color="text-red-500"
+                    :icon="mdiChartTimelineVariant"
+                    :number="256"
+                    suffix="%"
+                    label="Performance"
+                />
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
+                <div class="flex flex-col justify-between">
+                    <CardBoxTransaction
+                        v-for="(transaction, index) in transactionBarItems"
+                        :key="index"
+                        :amount="transaction.amount"
+                        :date="transaction.date"
+                        :business="transaction.business"
+                        :type="transaction.type"
+                        :name="transaction.name"
+                        :account="transaction.account"
+                    />
+                </div>
+                <div class="flex flex-col justify-between">
+                    <CardBoxClient
+                        v-for="client in clientBarItems"
+                        :key="client.id"
+                        :name="client.name"
+                        :login="client.login"
+                        :date="client.created"
+                        :progress="client.progress"
+                    />
+                </div>
+            </div>
+
+            <SectionTitleLineWithButton :icon="mdiChartPie" title="Trends overview">
+                <BaseButton
+                    :icon="mdiReload"
+                    color="whiteDark"
+                    @click="fillChartData"
+                />
+            </SectionTitleLineWithButton>
+
+            <CardBox class="mb-6">
+                <div v-if="chartData">
+                    <line-chart :data="chartData" class="h-96" />
+                </div>
+            </CardBox>
+
+            <SectionTitleLineWithButton :icon="mdiAccountMultiple" title="Clients" />
+
+            <NotificationBar color="info" :icon="mdiMonitorCellphone">
+                <b>Responsive table.</b> Collapses on mobile
+            </NotificationBar>
+
+            <CardBox has-table>
+                <TableSampleClients />
+            </CardBox>
+        </SectionMain>
+</template>
diff --git a/src/Publish/resources/js/Pages/PrivacyPolicy.vue b/src/Publish/resources/js/Pages/PrivacyPolicy.vue
new file mode 100644
index 0000000..66d9b05
--- /dev/null
+++ b/src/Publish/resources/js/Pages/PrivacyPolicy.vue
@@ -0,0 +1,24 @@
+<script setup>
+import { Head } from '@inertiajs/inertia-vue3';
+import JetAuthenticationCardLogo from '@/Components/AuthenticationCardLogo.vue';
+
+defineProps({
+    policy: String,
+});
+</script>
+
+<template>
+    <Head title="Privacy Policy" />
+
+    <div class="font-sans text-gray-900 antialiased">
+        <div class="pt-4 bg-gray-100">
+            <div class="min-h-screen flex flex-col items-center pt-6 sm:pt-0">
+                <div>
+                    <JetAuthenticationCardLogo />
+                </div>
+
+                <div class="w-full sm:max-w-2xl mt-6 p-6 bg-white shadow-md overflow-hidden sm:rounded-lg prose" v-html="policy" />
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/src/Publish/resources/js/Pages/Profile/Partials/DeleteUserForm.vue b/src/Publish/resources/js/Pages/Profile/Partials/DeleteUserForm.vue
new file mode 100644
index 0000000..b416583
--- /dev/null
+++ b/src/Publish/resources/js/Pages/Profile/Partials/DeleteUserForm.vue
@@ -0,0 +1,101 @@
+<script setup>
+import { ref } from 'vue';
+import { useForm } from '@inertiajs/inertia-vue3';
+import JetActionSection from '@/Components/ActionSection.vue';
+import JetDialogModal from '@/Components/DialogModal.vue';
+import JetDangerButton from '@/Components/DangerButton.vue';
+import JetInput from '@/Components/Input.vue';
+import JetInputError from '@/Components/InputError.vue';
+import JetSecondaryButton from '@/Components/SecondaryButton.vue';
+
+const confirmingUserDeletion = ref(false);
+const passwordInput = ref(null);
+
+const form = useForm({
+    password: '',
+});
+
+const confirmUserDeletion = () => {
+    confirmingUserDeletion.value = true;
+
+    setTimeout(() => passwordInput.value.focus(), 250);
+};
+
+const deleteUser = () => {
+    form.delete(route('current-user.destroy'), {
+        preserveScroll: true,
+        onSuccess: () => closeModal(),
+        onError: () => passwordInput.value.focus(),
+        onFinish: () => form.reset(),
+    });
+};
+
+const closeModal = () => {
+    confirmingUserDeletion.value = false;
+
+    form.reset();
+};
+</script>
+
+<template>
+    <JetActionSection>
+        <template #title>
+            Delete Account
+        </template>
+
+        <template #description>
+            Permanently delete your account.
+        </template>
+
+        <template #content>
+            <div class="max-w-xl text-sm text-gray-600">
+                Once your account is deleted, all of its resources and data will be permanently deleted. Before deleting your account, please download any data or information that you wish to retain.
+            </div>
+
+            <div class="mt-5">
+                <JetDangerButton @click="confirmUserDeletion">
+                    Delete Account
+                </JetDangerButton>
+            </div>
+
+            <!-- Delete Account Confirmation Modal -->
+            <JetDialogModal :show="confirmingUserDeletion" @close="closeModal">
+                <template #title>
+                    Delete Account
+                </template>
+
+                <template #content>
+                    Are you sure you want to delete your account? Once your account is deleted, all of its resources and data will be permanently deleted. Please enter your password to confirm you would like to permanently delete your account.
+
+                    <div class="mt-4">
+                        <JetInput
+                            ref="passwordInput"
+                            v-model="form.password"
+                            type="password"
+                            class="mt-1 block w-3/4"
+                            placeholder="Password"
+                            @keyup.enter="deleteUser"
+                        />
+
+                        <JetInputError :message="form.errors.password" class="mt-2" />
+                    </div>
+                </template>
+
+                <template #footer>
+                    <JetSecondaryButton @click="closeModal">
+                        Cancel
+                    </JetSecondaryButton>
+
+                    <JetDangerButton
+                        class="ml-3"
+                        :class="{ 'opacity-25': form.processing }"
+                        :disabled="form.processing"
+                        @click="deleteUser"
+                    >
+                        Delete Account
+                    </JetDangerButton>
+                </template>
+            </JetDialogModal>
+        </template>
+    </JetActionSection>
+</template>
diff --git a/src/Publish/resources/js/Pages/Profile/Partials/LogoutOtherBrowserSessionsForm.vue b/src/Publish/resources/js/Pages/Profile/Partials/LogoutOtherBrowserSessionsForm.vue
new file mode 100644
index 0000000..fdb1561
--- /dev/null
+++ b/src/Publish/resources/js/Pages/Profile/Partials/LogoutOtherBrowserSessionsForm.vue
@@ -0,0 +1,165 @@
+<script setup>
+import { ref } from 'vue';
+import { useForm } from '@inertiajs/inertia-vue3';
+import JetActionMessage from '@/Components/ActionMessage.vue';
+import JetActionSection from '@/Components/ActionSection.vue';
+import JetButton from '@/Components/Button.vue';
+import JetDialogModal from '@/Components/DialogModal.vue';
+import JetInput from '@/Components/Input.vue';
+import JetInputError from '@/Components/InputError.vue';
+import JetSecondaryButton from '@/Components/SecondaryButton.vue';
+
+defineProps({
+    sessions: Array,
+});
+
+const confirmingLogout = ref(false);
+const passwordInput = ref(null);
+
+const form = useForm({
+    password: '',
+});
+
+const confirmLogout = () => {
+    confirmingLogout.value = true;
+
+    setTimeout(() => passwordInput.value.focus(), 250);
+};
+
+const logoutOtherBrowserSessions = () => {
+    form.delete(route('other-browser-sessions.destroy'), {
+        preserveScroll: true,
+        onSuccess: () => closeModal(),
+        onError: () => passwordInput.value.focus(),
+        onFinish: () => form.reset(),
+    });
+};
+
+const closeModal = () => {
+    confirmingLogout.value = false;
+
+    form.reset();
+};
+</script>
+
+<template>
+    <JetActionSection>
+        <template #title>
+            Browser Sessions
+        </template>
+
+        <template #description>
+            Manage and log out your active sessions on other browsers and devices.
+        </template>
+
+        <template #content>
+            <div class="max-w-xl text-sm text-gray-600">
+                If necessary, you may log out of all of your other browser sessions across all of your devices. Some of your recent sessions are listed below; however, this list may not be exhaustive. If you feel your account has been compromised, you should also update your password.
+            </div>
+
+            <!-- Other Browser Sessions -->
+            <div v-if="sessions.length > 0" class="mt-5 space-y-6">
+                <div v-for="(session, i) in sessions" :key="i" class="flex items-center">
+                    <div>
+                        <svg
+                            v-if="session.agent.is_desktop"
+                            fill="none"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            viewBox="0 0 24 24"
+                            stroke="currentColor"
+                            class="w-8 h-8 text-gray-500"
+                        >
+                            <path d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+                        </svg>
+
+                        <svg
+                            v-else
+                            xmlns="http://www.w3.org/2000/svg"
+                            viewBox="0 0 24 24"
+                            stroke-width="2"
+                            stroke="currentColor"
+                            fill="none"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            class="w-8 h-8 text-gray-500"
+                        >
+                            <path d="M0 0h24v24H0z" stroke="none" /><rect
+                                x="7"
+                                y="4"
+                                width="10"
+                                height="16"
+                                rx="1"
+                            /><path d="M11 5h2M12 17v.01" />
+                        </svg>
+                    </div>
+
+                    <div class="ml-3">
+                        <div class="text-sm text-gray-600">
+                            {{ session.agent.platform ? session.agent.platform : 'Unknown' }} - {{ session.agent.browser ? session.agent.browser : 'Unknown' }}
+                        </div>
+
+                        <div>
+                            <div class="text-xs text-gray-500">
+                                {{ session.ip_address }},
+
+                                <span v-if="session.is_current_device" class="text-green-500 font-semibold">This device</span>
+                                <span v-else>Last active {{ session.last_active }}</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="flex items-center mt-5">
+                <JetButton @click="confirmLogout">
+                    Log Out Other Browser Sessions
+                </JetButton>
+
+                <JetActionMessage :on="form.recentlySuccessful" class="ml-3">
+                    Done.
+                </JetActionMessage>
+            </div>
+
+            <!-- Log Out Other Devices Confirmation Modal -->
+            <JetDialogModal :show="confirmingLogout" @close="closeModal">
+                <template #title>
+                    Log Out Other Browser Sessions
+                </template>
+
+                <template #content>
+                    Please enter your password to confirm you would like to log out of your other browser sessions across all of your devices.
+
+                    <div class="mt-4">
+                        <JetInput
+                            ref="passwordInput"
+                            v-model="form.password"
+                            type="password"
+                            class="mt-1 block w-3/4"
+                            placeholder="Password"
+                            @keyup.enter="logoutOtherBrowserSessions"
+                        />
+
+                        <JetInputError :message="form.errors.password" class="mt-2" />
+                    </div>
+                </template>
+
+                <template #footer>
+                    <JetSecondaryButton @click="closeModal">
+                        Cancel
+                    </JetSecondaryButton>
+
+                    <JetButton
+                        class="ml-3"
+                        :class="{ 'opacity-25': form.processing }"
+                        :disabled="form.processing"
+                        @click="logoutOtherBrowserSessions"
+                    >
+                        Log Out Other Browser Sessions
+                    </JetButton>
+                </template>
+            </JetDialogModal>
+        </template>
+    </JetActionSection>
+</template>
diff --git a/src/Publish/resources/js/Pages/Profile/Partials/TwoFactorAuthenticationForm.vue b/src/Publish/resources/js/Pages/Profile/Partials/TwoFactorAuthenticationForm.vue
new file mode 100644
index 0000000..685df41
--- /dev/null
+++ b/src/Publish/resources/js/Pages/Profile/Partials/TwoFactorAuthenticationForm.vue
@@ -0,0 +1,253 @@
+<script setup>
+import { ref, computed, watch } from 'vue';
+import { Inertia } from '@inertiajs/inertia';
+import { useForm, usePage } from '@inertiajs/inertia-vue3';
+import JetActionSection from '@/Components/ActionSection.vue';
+import JetButton from '@/Components/Button.vue';
+import JetConfirmsPassword from '@/Components/ConfirmsPassword.vue';
+import JetDangerButton from '@/Components/DangerButton.vue';
+import JetInput from '@/Components/Input.vue';
+import JetInputError from '@/Components/InputError.vue';
+import JetLabel from '@/Components/Label.vue';
+import JetSecondaryButton from '@/Components/SecondaryButton.vue';
+
+const props = defineProps({
+    requiresConfirmation: Boolean,
+});
+
+const enabling = ref(false);
+const confirming = ref(false);
+const disabling = ref(false);
+const qrCode = ref(null);
+const setupKey = ref(null);
+const recoveryCodes = ref([]);
+
+const confirmationForm = useForm({
+    code: '',
+});
+
+const twoFactorEnabled = computed(
+    () => ! enabling.value && usePage().props.value.user?.two_factor_enabled,
+);
+
+watch(twoFactorEnabled, () => {
+    if (! twoFactorEnabled.value) {
+        confirmationForm.reset();
+        confirmationForm.clearErrors();
+    }
+});
+
+const enableTwoFactorAuthentication = () => {
+    enabling.value = true;
+
+    Inertia.post('/user/two-factor-authentication', {}, {
+        preserveScroll: true,
+        onSuccess: () => Promise.all([
+            showQrCode(),
+            showSetupKey(),
+            showRecoveryCodes(),
+        ]),
+        onFinish: () => {
+            enabling.value = false;
+            confirming.value = props.requiresConfirmation;
+        },
+    });
+};
+
+const showQrCode = () => {
+    return axios.get('/user/two-factor-qr-code').then(response => {
+        qrCode.value = response.data.svg;
+    });
+};
+
+const showSetupKey = () => {
+    return axios.get('/user/two-factor-secret-key').then(response => {
+        setupKey.value = response.data.secretKey;
+    });
+}
+
+const showRecoveryCodes = () => {
+    return axios.get('/user/two-factor-recovery-codes').then(response => {
+        recoveryCodes.value = response.data;
+    });
+};
+
+const confirmTwoFactorAuthentication = () => {
+    confirmationForm.post('/user/confirmed-two-factor-authentication', {
+        errorBag: "confirmTwoFactorAuthentication",
+        preserveScroll: true,
+        preserveState: true,
+        onSuccess: () => {
+            confirming.value = false;
+            qrCode.value = null;
+            setupKey.value = null;
+        },
+    });
+};
+
+const regenerateRecoveryCodes = () => {
+    axios
+        .post('/user/two-factor-recovery-codes')
+        .then(() => showRecoveryCodes());
+};
+
+const disableTwoFactorAuthentication = () => {
+    disabling.value = true;
+
+    Inertia.delete('/user/two-factor-authentication', {
+        preserveScroll: true,
+        onSuccess: () => {
+            disabling.value = false;
+            confirming.value = false;
+        },
+    });
+};
+</script>
+
+<template>
+    <JetActionSection>
+        <template #title>
+            Two Factor Authentication
+        </template>
+
+        <template #description>
+            Add additional security to your account using two factor authentication.
+        </template>
+
+        <template #content>
+            <h3 v-if="twoFactorEnabled && ! confirming" class="text-lg font-medium text-gray-900">
+                You have enabled two factor authentication.
+            </h3>
+
+            <h3 v-else-if="twoFactorEnabled && confirming" class="text-lg font-medium text-gray-900">
+                Finish enabling two factor authentication.
+            </h3>
+
+            <h3 v-else class="text-lg font-medium text-gray-900">
+                You have not enabled two factor authentication.
+            </h3>
+
+            <div class="mt-3 max-w-xl text-sm text-gray-600">
+                <p>
+                    When two factor authentication is enabled, you will be prompted for a secure, random token during authentication. You may retrieve this token from your phone's Google Authenticator application.
+                </p>
+            </div>
+
+            <div v-if="twoFactorEnabled">
+                <div v-if="qrCode">
+                    <div class="mt-4 max-w-xl text-sm text-gray-600">
+                        <p v-if="confirming" class="font-semibold">
+                            To finish enabling two factor authentication, scan the following QR code using your phone's authenticator application or enter the setup key and provide the generated OTP code.
+                        </p>
+
+                        <p v-else>
+                            Two factor authentication is now enabled. Scan the following QR code using your phone's authenticator application or enter the setup key.
+                        </p>
+                    </div>
+
+                    <div class="mt-4" v-html="qrCode" />
+
+                    <div class="mt-4 max-w-xl text-sm text-gray-600" v-if="setupKey">
+                        <p class="font-semibold">
+                            Setup Key: <span v-html="setupKey"></span>
+                        </p>
+                    </div>
+
+                    <div v-if="confirming" class="mt-4">
+                        <JetLabel for="code" value="Code" />
+
+                        <JetInput
+                            id="code"
+                            v-model="confirmationForm.code"
+                            type="text"
+                            name="code"
+                            class="block mt-1 w-1/2"
+                            inputmode="numeric"
+                            autofocus
+                            autocomplete="one-time-code"
+                            @keyup.enter="confirmTwoFactorAuthentication"
+                        />
+
+                        <JetInputError :message="confirmationForm.errors.code" class="mt-2" />
+                    </div>
+                </div>
+
+                <div v-if="recoveryCodes.length > 0 && ! confirming">
+                    <div class="mt-4 max-w-xl text-sm text-gray-600">
+                        <p class="font-semibold">
+                            Store these recovery codes in a secure password manager. They can be used to recover access to your account if your two factor authentication device is lost.
+                        </p>
+                    </div>
+
+                    <div class="grid gap-1 max-w-xl mt-4 px-4 py-4 font-mono text-sm bg-gray-100 rounded-lg">
+                        <div v-for="code in recoveryCodes" :key="code">
+                            {{ code }}
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="mt-5">
+                <div v-if="! twoFactorEnabled">
+                    <JetConfirmsPassword @confirmed="enableTwoFactorAuthentication">
+                        <JetButton type="button" :class="{ 'opacity-25': enabling }" :disabled="enabling">
+                            Enable
+                        </JetButton>
+                    </JetConfirmsPassword>
+                </div>
+
+                <div v-else>
+                    <JetConfirmsPassword @confirmed="confirmTwoFactorAuthentication">
+                        <JetButton
+                            v-if="confirming"
+                            type="button"
+                            class="mr-3"
+                            :class="{ 'opacity-25': enabling }"
+                            :disabled="enabling"
+                        >
+                            Confirm
+                        </JetButton>
+                    </JetConfirmsPassword>
+
+                    <JetConfirmsPassword @confirmed="regenerateRecoveryCodes">
+                        <JetSecondaryButton
+                            v-if="recoveryCodes.length > 0 && ! confirming"
+                            class="mr-3"
+                        >
+                            Regenerate Recovery Codes
+                        </JetSecondaryButton>
+                    </JetConfirmsPassword>
+
+                    <JetConfirmsPassword @confirmed="showRecoveryCodes">
+                        <JetSecondaryButton
+                            v-if="recoveryCodes.length === 0 && ! confirming"
+                            class="mr-3"
+                        >
+                            Show Recovery Codes
+                        </JetSecondaryButton>
+                    </JetConfirmsPassword>
+
+                    <JetConfirmsPassword @confirmed="disableTwoFactorAuthentication">
+                        <JetSecondaryButton
+                            v-if="confirming"
+                            :class="{ 'opacity-25': disabling }"
+                            :disabled="disabling"
+                        >
+                            Cancel
+                        </JetSecondaryButton>
+                    </JetConfirmsPassword>
+
+                    <JetConfirmsPassword @confirmed="disableTwoFactorAuthentication">
+                        <JetDangerButton
+                            v-if="! confirming"
+                            :class="{ 'opacity-25': disabling }"
+                            :disabled="disabling"
+                        >
+                            Disable
+                        </JetDangerButton>
+                    </JetConfirmsPassword>
+                </div>
+            </div>
+        </template>
+    </JetActionSection>
+</template>
diff --git a/src/Publish/resources/js/Pages/Profile/Partials/UpdatePasswordForm.vue b/src/Publish/resources/js/Pages/Profile/Partials/UpdatePasswordForm.vue
new file mode 100644
index 0000000..be28312
--- /dev/null
+++ b/src/Publish/resources/js/Pages/Profile/Partials/UpdatePasswordForm.vue
@@ -0,0 +1,100 @@
+<script setup>
+import { ref } from 'vue';
+import { useForm } from '@inertiajs/inertia-vue3';
+import JetActionMessage from '@/Components/ActionMessage.vue';
+import JetButton from '@/Components/Button.vue';
+import JetFormSection from '@/Components/FormSection.vue';
+import JetInput from '@/Components/Input.vue';
+import JetInputError from '@/Components/InputError.vue';
+import JetLabel from '@/Components/Label.vue';
+
+const passwordInput = ref(null);
+const currentPasswordInput = ref(null);
+
+const form = useForm({
+    current_password: '',
+    password: '',
+    password_confirmation: '',
+});
+
+const updatePassword = () => {
+    form.put(route('user-password.update'), {
+        errorBag: 'updatePassword',
+        preserveScroll: true,
+        onSuccess: () => form.reset(),
+        onError: () => {
+            if (form.errors.password) {
+                form.reset('password', 'password_confirmation');
+                passwordInput.value.focus();
+            }
+
+            if (form.errors.current_password) {
+                form.reset('current_password');
+                currentPasswordInput.value.focus();
+            }
+        },
+    });
+};
+</script>
+
+<template>
+    <JetFormSection @submitted="updatePassword">
+        <template #title>
+            Update Password
+        </template>
+
+        <template #description>
+            Ensure your account is using a long, random password to stay secure.
+        </template>
+
+        <template #form>
+            <div class="col-span-6 sm:col-span-4">
+                <JetLabel for="current_password" value="Current Password" />
+                <JetInput
+                    id="current_password"
+                    ref="currentPasswordInput"
+                    v-model="form.current_password"
+                    type="password"
+                    class="mt-1 block w-full"
+                    autocomplete="current-password"
+                />
+                <JetInputError :message="form.errors.current_password" class="mt-2" />
+            </div>
+
+            <div class="col-span-6 sm:col-span-4">
+                <JetLabel for="password" value="New Password" />
+                <JetInput
+                    id="password"
+                    ref="passwordInput"
+                    v-model="form.password"
+                    type="password"
+                    class="mt-1 block w-full"
+                    autocomplete="new-password"
+                />
+                <JetInputError :message="form.errors.password" class="mt-2" />
+            </div>
+
+            <div class="col-span-6 sm:col-span-4">
+                <JetLabel for="password_confirmation" value="Confirm Password" />
+                <JetInput
+                    id="password_confirmation"
+                    v-model="form.password_confirmation"
+                    type="password"
+                    class="mt-1 block w-full"
+                    autocomplete="new-password"
+                />
+                <JetInputError :message="form.errors.password_confirmation" class="mt-2" />
+            </div>
+        </template>
+
+        <template #actions>
+            <JetActionMessage :on="form.recentlySuccessful" class="mr-3">
+                Saved.
+            </JetActionMessage>
+
+            <JetButton :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
+                Save
+            </JetButton>
+        </template>
+    </JetFormSection>
+</template>
diff --git a/src/Publish/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue b/src/Publish/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue
new file mode 100644
index 0000000..f2ebf8c
--- /dev/null
+++ b/src/Publish/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue
@@ -0,0 +1,187 @@
+<script setup>
+import { ref } from 'vue';
+import { Inertia } from '@inertiajs/inertia';
+import { Link, useForm } from '@inertiajs/inertia-vue3';
+import JetButton from '@/Components/Button.vue';
+import JetFormSection from '@/Components/FormSection.vue';
+import JetInput from '@/Components/Input.vue';
+import JetInputError from '@/Components/InputError.vue';
+import JetLabel from '@/Components/Label.vue';
+import JetActionMessage from '@/Components/ActionMessage.vue';
+import JetSecondaryButton from '@/Components/SecondaryButton.vue';
+
+const props = defineProps({
+    user: Object,
+});
+
+const form = useForm({
+    _method: 'PUT',
+    name: props.user.name,
+    email: props.user.email,
+    photo: null,
+});
+
+const verificationLinkSent = ref(null);
+const photoPreview = ref(null);
+const photoInput = ref(null);
+
+const updateProfileInformation = () => {
+    if (photoInput.value) {
+        form.photo = photoInput.value.files[0];
+    }
+
+    form.post(route('user-profile-information.update'), {
+        errorBag: 'updateProfileInformation',
+        preserveScroll: true,
+        onSuccess: () => clearPhotoFileInput(),
+    });
+};
+
+const sendEmailVerification = () => {
+    verificationLinkSent.value = true;
+};
+
+const selectNewPhoto = () => {
+    photoInput.value.click();
+};
+
+const updatePhotoPreview = () => {
+    const photo = photoInput.value.files[0];
+
+    if (! photo) return;
+
+    const reader = new FileReader();
+
+    reader.onload = (e) => {
+        photoPreview.value = e.target.result;
+    };
+
+    reader.readAsDataURL(photo);
+};
+
+const deletePhoto = () => {
+    Inertia.delete(route('current-user-photo.destroy'), {
+        preserveScroll: true,
+        onSuccess: () => {
+            photoPreview.value = null;
+            clearPhotoFileInput();
+        },
+    });
+};
+
+const clearPhotoFileInput = () => {
+    if (photoInput.value?.value) {
+        photoInput.value.value = null;
+    }
+};
+</script>
+
+<template>
+    <JetFormSection @submitted="updateProfileInformation">
+        <template #title>
+            Profile Information
+        </template>
+
+        <template #description>
+            Update your account's profile information and email address.
+        </template>
+
+        <template #form>
+            <!-- Profile Photo -->
+            <div v-if="$page.props.jetstream.managesProfilePhotos" class="col-span-6 sm:col-span-4">
+                <!-- Profile Photo File Input -->
+                <input
+                    ref="photoInput"
+                    type="file"
+                    class="hidden"
+                    @change="updatePhotoPreview"
+                >
+
+                <JetLabel for="photo" value="Photo" />
+
+                <!-- Current Profile Photo -->
+                <div v-show="! photoPreview" class="mt-2">
+                    <img :src="user.profile_photo_url" :alt="user.name" class="rounded-full h-20 w-20 object-cover">
+                </div>
+
+                <!-- New Profile Photo Preview -->
+                <div v-show="photoPreview" class="mt-2">
+                    <span
+                        class="block rounded-full w-20 h-20 bg-cover bg-no-repeat bg-center"
+                        :style="'background-image: url(\'' + photoPreview + '\');'"
+                    />
+                </div>
+
+                <JetSecondaryButton class="mt-2 mr-2" type="button" @click.prevent="selectNewPhoto">
+                    Select A New Photo
+                </JetSecondaryButton>
+
+                <JetSecondaryButton
+                    v-if="user.profile_photo_path"
+                    type="button"
+                    class="mt-2"
+                    @click.prevent="deletePhoto"
+                >
+                    Remove Photo
+                </JetSecondaryButton>
+
+                <JetInputError :message="form.errors.photo" class="mt-2" />
+            </div>
+
+            <!-- Name -->
+            <div class="col-span-6 sm:col-span-4">
+                <JetLabel for="name" value="Name" />
+                <JetInput
+                    id="name"
+                    v-model="form.name"
+                    type="text"
+                    class="mt-1 block w-full"
+                    autocomplete="name"
+                />
+                <JetInputError :message="form.errors.name" class="mt-2" />
+            </div>
+
+            <!-- Email -->
+            <div class="col-span-6 sm:col-span-4">
+                <JetLabel for="email" value="Email" />
+                <JetInput
+                    id="email"
+                    v-model="form.email"
+                    type="email"
+                    class="mt-1 block w-full"
+                />
+                <JetInputError :message="form.errors.email" class="mt-2" />
+
+                <div v-if="$page.props.jetstream.hasEmailVerification && user.email_verified_at === null">
+                    <p class="text-sm mt-2">
+                        Your email address is unverified.
+
+                        <Link
+                            :href="route('verification.send')"
+                            method="post"
+                            as="button"
+                            class="underline text-gray-600 hover:text-gray-900"
+                            @click.prevent="sendEmailVerification"
+                        >
+                            Click here to re-send the verification email.
+                        </Link>
+                    </p>
+
+                    <div v-show="verificationLinkSent" class="mt-2 font-medium text-sm text-green-600">
+                        A new verification link has been sent to your email address.
+                    </div>
+                </div>
+            </div>
+        </template>
+
+        <template #actions>
+            <JetActionMessage :on="form.recentlySuccessful" class="mr-3">
+                Saved.
+            </JetActionMessage>
+
+            <JetButton :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
+                Save
+            </JetButton>
+        </template>
+    </JetFormSection>
+</template>
diff --git a/src/Publish/resources/js/Pages/Profile/Show.vue b/src/Publish/resources/js/Pages/Profile/Show.vue
new file mode 100644
index 0000000..f9d30a3
--- /dev/null
+++ b/src/Publish/resources/js/Pages/Profile/Show.vue
@@ -0,0 +1,56 @@
+<script setup>
+import DeleteUserForm from '@/Pages/Profile/Partials/DeleteUserForm.vue';
+import JetSectionBorder from '@/Components/SectionBorder.vue';
+import LogoutOtherBrowserSessionsForm from '@/Pages/Profile/Partials/LogoutOtherBrowserSessionsForm.vue';
+import TwoFactorAuthenticationForm from '@/Pages/Profile/Partials/TwoFactorAuthenticationForm.vue';
+import UpdatePasswordForm from '@/Pages/Profile/Partials/UpdatePasswordForm.vue';
+import UpdateProfileInformationForm from '@/Pages/Profile/Partials/UpdateProfileInformationForm.vue';
+
+defineProps({
+    confirmsTwoFactorAuthentication: Boolean,
+    sessions: Array,
+});
+</script>
+
+<template>
+    <div>
+        <div class="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8">
+            <div v-if="$page.props.jetstream.canUpdateProfileInformation">
+                <UpdateProfileInformationForm :user="$page.props.user" />
+
+                <JetSectionBorder />
+            </div>
+
+            <div v-if="$page.props.jetstream.canUpdatePassword">
+                <UpdatePasswordForm class="mt-10 sm:mt-0" />
+
+                <JetSectionBorder />
+            </div>
+
+            <div v-if="$page.props.jetstream.canManageTwoFactorAuthentication">
+                <TwoFactorAuthenticationForm
+                    :requires-confirmation="confirmsTwoFactorAuthentication"
+                    class="mt-10 sm:mt-0"
+                />
+
+                <JetSectionBorder />
+            </div>
+
+            <LogoutOtherBrowserSessionsForm :sessions="sessions" class="mt-10 sm:mt-0" />
+
+            <template v-if="$page.props.jetstream.hasAccountDeletionFeatures">
+                <JetSectionBorder />
+
+                <DeleteUserForm class="mt-10 sm:mt-0" />
+            </template>
+        </div>
+    </div>
+</template>
+
+
+<script>
+import ResourceTableLayout from '@@/Layouts/ResourceTableLayout.vue';
+export default {
+    layout: ResourceTableLayout
+}
+</script>
diff --git a/src/Publish/resources/js/Pages/Resource.vue b/src/Publish/resources/js/Pages/Resource.vue
new file mode 100644
index 0000000..5a283c0
--- /dev/null
+++ b/src/Publish/resources/js/Pages/Resource.vue
@@ -0,0 +1,335 @@
+<script setup>
+import {useAttrs, ref, onMounted, watch, toRaw, computed} from 'vue';
+import { useForm } from '@inertiajs/inertia-vue3';
+import { Inertia } from '@inertiajs/inertia';
+import { useGetForm } from '@@/Composables/useGetForm';
+
+import { storeToRefs } from 'pinia';
+import { useResourceStore } from '@@/Stores/resourceStore';
+import { useReload } from '@@/Composables/useReload';
+import { useCookies } from 'vue3-cookies';
+
+const props = defineProps({
+    url: String,
+    rows: Object,
+});
+
+let {
+    createModal,
+    viewModal,
+    deleteModal,
+    bulkModal,
+    goNext,
+    goBack,
+    search,
+    per_page,
+    orderBy,
+    desc,
+    last_page,
+    edit,
+    showFilter,
+    filters,
+    bulk,
+    showBulk,
+    bulkActionTitle,
+    view,
+    photoPreview,
+    currentPage,
+    cols,
+} = storeToRefs(useResourceStore());
+
+const resourceStore = useResourceStore();
+
+resourceStore.setCurrentUrl(props.url);
+
+const attrs = useAttrs();
+let { lang } = attrs;
+
+let { formMake } = useGetForm();
+let form = ref({});
+
+const { cookies } = useCookies();
+
+let { reload } = useReload();
+
+let create = () => {
+    form.value = useForm(formMake());
+    edit.value = false;
+    createModal.value = true;
+};
+
+function reloadList() {
+    reload();
+}
+
+let filterItem = ref({});
+let filterObj = ref({});
+let filtersObj = ref({});
+
+onMounted(() => {
+    handleCookie();
+    form.value = useForm(formMake());
+
+    search.value = attrs?.search;
+    per_page.value = attrs?.per_page;
+    orderBy.value = attrs?.orderBy;
+    filters.value = attrs?.filters;
+    createModal.value = attrs?.create;
+    // last_page.value = collection?.last_page;
+});
+
+function handleCookie() {
+    let cookieName = `${props.url}-cols`;
+    if (!cookies.get(cookieName)) {
+        for (let i = 0, ii = props.rows.length; i < ii; i++) {
+            if (props.rows[i].list) {
+                cols.value[props.rows[i].name] = true;
+            }
+        }
+        resourceStore.setCols(cols.value);
+        cookies.set(cookieName, cols.value);
+    } else {
+        resourceStore.setCols(cookies.get(cookieName));
+    }
+}
+
+function setFilter(filter) {
+    filterObj.value = filter;
+}
+
+function makeFilter(filterBy, filterValue) {
+    let filter = {};
+    filter[filterBy] = filterValue;
+}
+
+function getSendedFilter() {
+    const requestedFilter = JSON.parse(
+        JSON.stringify(filtersObj.value[filterObj.value.name])
+    )[filterObj.value.name];
+
+    const ids = requestedFilter.map((item) => item.id);
+    const sendedFilter = {};
+    sendedFilter[filterObj.value.name] = ids;
+    return sendedFilter;
+}
+
+watch(
+    filtersObj,
+    () => {
+        let routeObj = route().params;
+        let sendedFilter = getSendedFilter();
+        store.setFilters(sendedFilter);
+
+        Inertia.get(route(props.url + '.index'), {
+            ...routeObj,
+            ...sendedFilter,
+        });
+    },
+    {
+        deep: true,
+    }
+);
+
+</script>
+<template>
+    <div>
+        <div>
+            <div class="flex justify-between p-4">
+                <Bulk
+                    :bulk="bulk"
+                    :show="showBluk"
+                    :collection="collection"
+                    @close="showBluk = !showBluk"
+                >
+                    <button
+                        v-if="attrs.canDeleteAny"
+                        type="button"
+                        class="flex items-center w-full h-8 px-3 text-sm font-normal text-danger bg-danger group whitespace-nowrap focus:outline-none"
+                        @click="bulkAction('delete')"
+                    >
+                        <svg
+                            class="flex-shrink-0 w-6 h-6 mr-2 -ml-1 rtl:ml-2 rtl:-mr-1 group-hover:text-white group-focus:text-white text-danger-500"
+                            xmlns="http://www.w3.org/2000/svg"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            stroke-width="2"
+                            stroke="currentColor"
+                            aria-hidden="true"
+                        >
+                            <path
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+                            ></path>
+                        </svg>
+                        <span class="truncate">
+                                    {{ attrs.lang.bulk }}
+                                </span>
+                    </button>
+                </Bulk>
+                <Filters
+                    :showFilter="
+                                attrs.table.filters &&
+                                attrs.table.filters.length
+                            "
+                    :setSearch="search"
+                    :rows="rows"
+                    :url="url"
+                    @getSearch="searchFilter"
+                    @reset="resetFilter"
+                    @filter="filter"
+                >
+                    <ViltForm
+                        v-for="(filter, key) in attrs.table.filters"
+                        v-model="filtersObj[filter.name]"
+                        :rows="filter.rows"
+                        :key="key"
+                        @update:modelValue="setFilter(filter)"
+                    />
+                </Filters>
+            </div>
+        </div>
+        <div class="px-6 pt-6 mx-auto">
+            <div
+                class="bg-white dark:bg-gray-800 dark:border-gray-600 rounded-lg border"
+            >
+                <div class="relative overflow-y-auto dark:border-gray-800">
+                    <List
+                        @media="popUp"
+                        :canEdit="attrs.canEdit"
+                        :type="attrs.table"
+                        :canDelete="attrs.canDelete"
+                        :canDeleteAny="attrs.canDeleteAny"
+                        :canView="attrs.canView"
+                        :canViewAny="attrs.canViewAny"
+                        @reload="reloadList"
+                        @view="viewItem"
+                        @sub="subItem"
+                        @edit="editItem"
+                        @delete="deleteItem"
+                        @all="bulkAll"
+                        @switch="switchBulk"
+                        :rows="rows"
+                        :collection="collection"
+                        :bulk="bulk"
+                        :url="url"
+                        :desc="desc"
+                    >
+                        <template #actions="{ id }">
+                            <div
+                                v-for="(action, index) in attrs.table.actions"
+                                :key="index"
+                            >
+                                <button
+                                    v-if="action.can"
+                                    @click.prevent="
+                                        !action.url
+                                            ? action.modal
+                                                ? openModal(action.modal, id)
+                                                : fireAction(action.action, id)
+                                            : openUrl(action.url)
+                                    "
+                                    style="padding: 5px 8px"
+                                    class="inline-flex items-center justify-center text-sm font-normal filament-tables-link filament-tables-link-action"
+                                    :class="
+                                        'text-' +
+                                        action.type +
+                                        '-700 hover:text-' +
+                                        action.type +
+                                        '-600'
+                                    "
+                                    role="button"
+                                >
+                                    <i
+                                        class="text-[16px]"
+                                        :class="action.icon"
+                                    ></i>
+                                    <div class="table_tooltip">
+                                        {{ action.label }}
+                                    </div>
+                                </button>
+                            </div>
+                        </template>
+                    </List>
+                </div>
+                <div class="p-2 border-t" v-if="collection.length">
+                    <Pagination :collection="collection" />
+                </div>
+            </div>
+        </div>
+        <br />
+        <br />
+        <CreateModal
+            :url="url"
+            :title="edit ? lang.edit_title : lang.create_title"
+            :show="createModal"
+            :edit="edit"
+            :item="form"
+            :rows="rows"
+            :type="attrs.form"
+            @close="createModal = !createModal"
+            @success="success"
+        />
+        <ViewModal
+            @media="popUp"
+            :title="lang.view_title"
+            :show="viewModal"
+            :item="form"
+            :rows="rows"
+            @close="viewModal = !viewModal"
+        />
+        <DeleteModal
+            :url="url"
+            :title="lang.delete_title"
+            :show="deleteModal"
+            :item="form"
+            @close="deleteModal = !deleteModal"
+            @success="success"
+        />
+        <BulkModal
+            :url="url"
+            :title="lang.bulk_title"
+            :action="bulkActionTitle"
+            :bulk="bulk"
+            :show="bulkModal"
+            @close="bulkModal = !bulkModal"
+            @success="success"
+        />
+
+    </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+import MixinVue from '@/Components/Base/Mixin.vue';
+import JetSecondaryButton from '@/Jetstream/SecondaryButton.vue';
+import JetButton from '@/Jetstream/Button.vue';
+import JetDialogModal from '@/Jetstream/DialogModal.vue';
+import ViltForm from '@@/Rows/ViltForm.vue';
+import ResourceTableLayout from '@@/Layouts/ResourceTableLayout.vue';
+
+export default defineComponent({
+    mixins: [MixinVue],
+    layout: ResourceTableLayout,
+    components: {
+        JetDialogModal,
+        JetButton,
+        JetSecondaryButton,
+        ViltForm,
+    },
+    data() {
+        return {
+            selectedID: null,
+            visible: false,
+            imgs: [],
+        };
+    },
+
+    methods: {
+        popUp(images) {
+            this.visible = true;
+            this.imgs = images;
+        },
+    },
+});
+</script>
diff --git a/src/Publish/resources/js/Pages/TermsOfService.vue b/src/Publish/resources/js/Pages/TermsOfService.vue
new file mode 100644
index 0000000..d7963a7
--- /dev/null
+++ b/src/Publish/resources/js/Pages/TermsOfService.vue
@@ -0,0 +1,24 @@
+<script setup>
+import { Head } from '@inertiajs/inertia-vue3';
+import JetAuthenticationCardLogo from '@/Components/AuthenticationCardLogo.vue';
+
+defineProps({
+    terms: String,
+});
+</script>
+
+<template>
+    <Head title="Terms of Service" />
+
+    <div class="font-sans text-gray-900 antialiased">
+        <div class="pt-4 bg-gray-100">
+            <div class="min-h-screen flex flex-col items-center pt-6 sm:pt-0">
+                <div>
+                    <JetAuthenticationCardLogo />
+                </div>
+
+                <div class="w-full sm:max-w-2xl mt-6 p-6 bg-white shadow-md overflow-hidden sm:rounded-lg prose" v-html="terms" />
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/src/Publish/resources/js/Pages/Welcome.vue b/src/Publish/resources/js/Pages/Welcome.vue
new file mode 100644
index 0000000..6b41757
--- /dev/null
+++ b/src/Publish/resources/js/Pages/Welcome.vue
@@ -0,0 +1,179 @@
+<script setup>
+import { Head, Link } from '@inertiajs/inertia-vue3';
+
+defineProps({
+    canLogin: Boolean,
+    canRegister: Boolean,
+    laravelVersion: String,
+    phpVersion: String,
+});
+</script>
+
+<template>
+    <Head title="Welcome" />
+
+    <div class="relative flex items-top justify-center min-h-screen bg-gray-100 dark:bg-gray-900 sm:items-center sm:pt-0">
+        <div v-if="canLogin" class="hidden fixed top-0 right-0 px-6 py-4 sm:block">
+            <Link v-if="$page.props.user" :href="route('dashboard')" class="text-sm text-gray-700 dark:text-gray-500 underline">Dashboard</Link>
+
+            <template v-else>
+                <Link :href="route('login')" class="text-sm text-gray-700 dark:text-gray-500 underline">Log in</Link>
+
+                <Link v-if="canRegister" :href="route('register')" class="ml-4 text-sm text-gray-700 dark:text-gray-500 underline">Register</Link>
+            </template>
+        </div>
+
+        <div class="max-w-6xl mx-auto sm:px-6 lg:px-8">
+            <div class="flex justify-center pt-8 sm:justify-start sm:pt-0">
+                <svg
+                    viewBox="0 0 651 192"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="h-16 w-auto text-gray-700 sm:h-20"
+                >
+                    <g clip-path="url(#clip0)" fill="#EF3B2D">
+                        <path d="M248.032 44.676h-16.466v100.23h47.394v-14.748h-30.928V44.676zM337.091 87.202c-2.101-3.341-5.083-5.965-8.949-7.875-3.865-1.909-7.756-2.864-11.669-2.864-5.062 0-9.69.931-13.89 2.792-4.201 1.861-7.804 4.417-10.811 7.661-3.007 3.246-5.347 6.993-7.016 11.239-1.672 4.249-2.506 8.713-2.506 13.389 0 4.774.834 9.26 2.506 13.459 1.669 4.202 4.009 7.925 7.016 11.169 3.007 3.246 6.609 5.799 10.811 7.66 4.199 1.861 8.828 2.792 13.89 2.792 3.913 0 7.804-.955 11.669-2.863 3.866-1.908 6.849-4.533 8.949-7.875v9.021h15.607V78.182h-15.607v9.02zm-1.431 32.503c-.955 2.578-2.291 4.821-4.009 6.73-1.719 1.91-3.795 3.437-6.229 4.582-2.435 1.146-5.133 1.718-8.091 1.718-2.96 0-5.633-.572-8.019-1.718-2.387-1.146-4.438-2.672-6.156-4.582-1.719-1.909-3.032-4.152-3.938-6.73-.909-2.577-1.36-5.298-1.36-8.161 0-2.864.451-5.585 1.36-8.162.905-2.577 2.219-4.819 3.938-6.729 1.718-1.908 3.77-3.437 6.156-4.582 2.386-1.146 5.059-1.718 8.019-1.718 2.958 0 5.656.572 8.091 1.718 2.434 1.146 4.51 2.674 6.229 4.582 1.718 1.91 3.054 4.152 4.009 6.729.953 2.577 1.432 5.298 1.432 8.162-.001 2.863-.479 5.584-1.432 8.161zM463.954 87.202c-2.101-3.341-5.083-5.965-8.949-7.875-3.865-1.909-7.756-2.864-11.669-2.864-5.062 0-9.69.931-13.89 2.792-4.201 1.861-7.804 4.417-10.811 7.661-3.007 3.246-5.347 6.993-7.016 11.239-1.672 4.249-2.506 8.713-2.506 13.389 0 4.774.834 9.26 2.506 13.459 1.669 4.202 4.009 7.925 7.016 11.169 3.007 3.246 6.609 5.799 10.811 7.66 4.199 1.861 8.828 2.792 13.89 2.792 3.913 0 7.804-.955 11.669-2.863 3.866-1.908 6.849-4.533 8.949-7.875v9.021h15.607V78.182h-15.607v9.02zm-1.432 32.503c-.955 2.578-2.291 4.821-4.009 6.73-1.719 1.91-3.795 3.437-6.229 4.582-2.435 1.146-5.133 1.718-8.091 1.718-2.96 0-5.633-.572-8.019-1.718-2.387-1.146-4.438-2.672-6.156-4.582-1.719-1.909-3.032-4.152-3.938-6.73-.909-2.577-1.36-5.298-1.36-8.161 0-2.864.451-5.585 1.36-8.162.905-2.577 2.219-4.819 3.938-6.729 1.718-1.908 3.77-3.437 6.156-4.582 2.386-1.146 5.059-1.718 8.019-1.718 2.958 0 5.656.572 8.091 1.718 2.434 1.146 4.51 2.674 6.229 4.582 1.718 1.91 3.054 4.152 4.009 6.729.953 2.577 1.432 5.298 1.432 8.162 0 2.863-.479 5.584-1.432 8.161zM650.772 44.676h-15.606v100.23h15.606V44.676zM365.013 144.906h15.607V93.538h26.776V78.182h-42.383v66.724zM542.133 78.182l-19.616 51.096-19.616-51.096h-15.808l25.617 66.724h19.614l25.617-66.724h-15.808zM591.98 76.466c-19.112 0-34.239 15.706-34.239 35.079 0 21.416 14.641 35.079 36.239 35.079 12.088 0 19.806-4.622 29.234-14.688l-10.544-8.158c-.006.008-7.958 10.449-19.832 10.449-13.802 0-19.612-11.127-19.612-16.884h51.777c2.72-22.043-11.772-40.877-33.023-40.877zm-18.713 29.28c.12-1.284 1.917-16.884 18.589-16.884 16.671 0 18.697 15.598 18.813 16.884h-37.402zM184.068 43.892c-.024-.088-.073-.165-.104-.25-.058-.157-.108-.316-.191-.46-.056-.097-.137-.176-.203-.265-.087-.117-.161-.242-.265-.345-.085-.086-.194-.148-.29-.223-.109-.085-.206-.182-.327-.252l-.002-.001-.002-.002-35.648-20.524a2.971 2.971 0 00-2.964 0l-35.647 20.522-.002.002-.002.001c-.121.07-.219.167-.327.252-.096.075-.205.138-.29.223-.103.103-.178.228-.265.345-.066.089-.147.169-.203.265-.083.144-.133.304-.191.46-.031.085-.08.162-.104.25-.067.249-.103.51-.103.776v38.979l-29.706 17.103V24.493a3 3 0 00-.103-.776c-.024-.088-.073-.165-.104-.25-.058-.157-.108-.316-.191-.46-.056-.097-.137-.176-.203-.265-.087-.117-.161-.242-.265-.345-.085-.086-.194-.148-.29-.223-.109-.085-.206-.182-.327-.252l-.002-.001-.002-.002L40.098 1.396a2.971 2.971 0 00-2.964 0L1.487 21.919l-.002.002-.002.001c-.121.07-.219.167-.327.252-.096.075-.205.138-.29.223-.103.103-.178.228-.265.345-.066.089-.147.169-.203.265-.083.144-.133.304-.191.46-.031.085-.08.162-.104.25-.067.249-.103.51-.103.776v122.09c0 1.063.568 2.044 1.489 2.575l71.293 41.045c.156.089.324.143.49.202.078.028.15.074.23.095a2.98 2.98 0 001.524 0c.069-.018.132-.059.2-.083.176-.061.354-.119.519-.214l71.293-41.045a2.971 2.971 0 001.489-2.575v-38.979l34.158-19.666a2.971 2.971 0 001.489-2.575V44.666a3.075 3.075 0 00-.106-.774zM74.255 143.167l-29.648-16.779 31.136-17.926.001-.001 34.164-19.669 29.674 17.084-21.772 12.428-43.555 24.863zm68.329-76.259v33.841l-12.475-7.182-17.231-9.92V49.806l12.475 7.182 17.231 9.92zm2.97-39.335l29.693 17.095-29.693 17.095-29.693-17.095 29.693-17.095zM54.06 114.089l-12.475 7.182V46.733l17.231-9.92 12.475-7.182v74.537l-17.231 9.921zM38.614 7.398l29.693 17.095-29.693 17.095L8.921 24.493 38.614 7.398zM5.938 29.632l12.475 7.182 17.231 9.92v79.676l.001.005-.001.006c0 .114.032.221.045.333.017.146.021.294.059.434l.002.007c.032.117.094.222.14.334.051.124.088.255.156.371a.036.036 0 00.004.009c.061.105.149.191.222.288.081.105.149.22.244.314l.008.01c.084.083.19.142.284.215.106.083.202.178.32.247l.013.005.011.008 34.139 19.321v34.175L5.939 144.867V29.632h-.001zm136.646 115.235l-65.352 37.625V148.31l48.399-27.628 16.953-9.677v33.862zm35.646-61.22l-29.706 17.102V66.908l17.231-9.92 12.475-7.182v33.841z" />
+                    </g>
+                </svg>
+            </div>
+
+            <div class="mt-8 bg-white dark:bg-gray-800 overflow-hidden shadow sm:rounded-lg">
+                <div class="grid grid-cols-1 md:grid-cols-2">
+                    <div class="p-6">
+                        <div class="flex items-center">
+                            <svg
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                stroke-width="2"
+                                viewBox="0 0 24 24"
+                                class="w-8 h-8 text-gray-500"
+                            ><path d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" /></svg>
+                            <div class="ml-4 text-lg leading-7 font-semibold">
+                                <a href="https://laravel.com/docs" class="underline text-gray-900 dark:text-white">Documentation</a>
+                            </div>
+                        </div>
+
+                        <div class="ml-12">
+                            <div class="mt-2 text-gray-600 dark:text-gray-400 text-sm">
+                                Laravel has wonderful, thorough documentation covering every aspect of the framework. Whether you are new to the framework or have previous experience with Laravel, we recommend reading all of the documentation from beginning to end.
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="p-6 border-t border-gray-200 dark:border-gray-700 md:border-t-0 md:border-l">
+                        <div class="flex items-center">
+                            <svg
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                stroke-width="2"
+                                viewBox="0 0 24 24"
+                                class="w-8 h-8 text-gray-500"
+                            ><path d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" /><path d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
+                            <div class="ml-4 text-lg leading-7 font-semibold">
+                                <a href="https://laracasts.com" class="underline text-gray-900 dark:text-white">Laracasts</a>
+                            </div>
+                        </div>
+
+                        <div class="ml-12">
+                            <div class="mt-2 text-gray-600 dark:text-gray-400 text-sm">
+                                Laracasts offers thousands of video tutorials on Laravel, PHP, and JavaScript development. Check them out, see for yourself, and massively level up your development skills in the process.
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="p-6 border-t border-gray-200 dark:border-gray-700">
+                        <div class="flex items-center">
+                            <svg
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                stroke-width="2"
+                                viewBox="0 0 24 24"
+                                class="w-8 h-8 text-gray-500"
+                            ><path d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" /></svg>
+                            <div class="ml-4 text-lg leading-7 font-semibold">
+                                <a href="https://laravel-news.com/" class="underline text-gray-900 dark:text-white">Laravel News</a>
+                            </div>
+                        </div>
+
+                        <div class="ml-12">
+                            <div class="mt-2 text-gray-600 dark:text-gray-400 text-sm">
+                                Laravel News is a community driven portal and newsletter aggregating all of the latest and most important news in the Laravel ecosystem, including new package releases and tutorials.
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="p-6 border-t border-gray-200 dark:border-gray-700 md:border-l">
+                        <div class="flex items-center">
+                            <svg
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                stroke-width="2"
+                                viewBox="0 0 24 24"
+                                class="w-8 h-8 text-gray-500"
+                            ><path d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+                            <div class="ml-4 text-lg leading-7 font-semibold text-gray-900 dark:text-white">
+                                Vibrant Ecosystem
+                            </div>
+                        </div>
+
+                        <div class="ml-12">
+                            <div class="mt-2 text-gray-600 dark:text-gray-400 text-sm">
+                                Laravel's robust library of first-party tools and libraries, such as <a href="https://forge.laravel.com" class="underline">Forge</a>, <a href="https://vapor.laravel.com" class="underline">Vapor</a>, <a href="https://nova.laravel.com" class="underline">Nova</a>, and <a href="https://envoyer.io" class="underline">Envoyer</a> help you take your projects to the next level. Pair them with powerful open source libraries like <a href="https://laravel.com/docs/billing" class="underline">Cashier</a>, <a href="https://laravel.com/docs/dusk" class="underline">Dusk</a>, <a href="https://laravel.com/docs/broadcasting" class="underline">Echo</a>, <a href="https://laravel.com/docs/horizon" class="underline">Horizon</a>, <a href="https://laravel.com/docs/sanctum" class="underline">Sanctum</a>, <a href="https://laravel.com/docs/telescope" class="underline">Telescope</a>, and more.
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="flex justify-center mt-4 sm:items-center sm:justify-between">
+                <div class="text-center text-sm text-gray-500 sm:text-left">
+                    <div class="flex items-center">
+                        <svg
+                            fill="none"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            viewBox="0 0 24 24"
+                            stroke="currentColor"
+                            class="-mt-px w-5 h-5 text-gray-400"
+                        >
+                            <path d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
+                        </svg>
+
+                        <a href="https://laravel.bigcartel.com" class="ml-1 underline">
+                            Shop
+                        </a>
+
+                        <svg
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            viewBox="0 0 24 24"
+                            class="ml-4 -mt-px w-5 h-5 text-gray-400"
+                        >
+                            <path d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
+                        </svg>
+
+                        <a href="https://github.com/sponsors/taylorotwell" class="ml-1 underline">
+                            Sponsor
+                        </a>
+                    </div>
+                </div>
+
+                <div class="ml-4 text-center text-sm text-gray-500 sm:text-right sm:ml-0">
+                    Laravel v{{ laravelVersion }} (PHP v{{ phpVersion }})
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/src/Publish/resources/js/Stores/layout.js b/src/Publish/resources/js/Stores/layout.js
new file mode 100644
index 0000000..32dbb03
--- /dev/null
+++ b/src/Publish/resources/js/Stores/layout.js
@@ -0,0 +1,14 @@
+import { defineStore } from "pinia";
+
+export const useLayoutStore = defineStore("layout", {
+  state: () => ({
+    isAsideMobileExpanded: false,
+    isAsideLgActive: false,
+  }),
+
+  actions: {
+    asideMobileToggle() {
+      this.isAsideMobileExpanded = !this.isAsideMobileExpanded;
+    },
+  },
+});
diff --git a/src/Publish/resources/js/Stores/main.js b/src/Publish/resources/js/Stores/main.js
new file mode 100644
index 0000000..7fd3b2f
--- /dev/null
+++ b/src/Publish/resources/js/Stores/main.js
@@ -0,0 +1,44 @@
+import { defineStore } from "pinia";
+import axios from "axios";
+
+export const useMainStore = defineStore("main", {
+  state: () => ({
+    /* User */
+    userName: null,
+    userEmail: null,
+    userAvatar: null,
+
+    /* Field focus with ctrl+k (to register only once) */
+    isFieldFocusRegistered: false,
+
+    /* Sample data (commonly used) */
+    clients: [],
+    history: [],
+  }),
+  actions: {
+    setUser(payload) {
+      if (payload.name) {
+        this.userName = payload.name;
+      }
+      if (payload.email) {
+        this.userEmail = payload.email;
+      }
+      if (payload.avatar) {
+        this.userAvatar = payload.avatar;
+      }
+    },
+
+    fetch(sampleDataKey) {
+      axios
+        .get(`data-sources/${sampleDataKey}.json`)
+        .then((r) => {
+          if (r.data && r.data.data) {
+            this[sampleDataKey] = r.data.data;
+          }
+        })
+        .catch((error) => {
+          alert(error.message);
+        });
+    },
+  },
+});
diff --git a/src/Publish/resources/js/Stores/style.js b/src/Publish/resources/js/Stores/style.js
new file mode 100644
index 0000000..1c4d175
--- /dev/null
+++ b/src/Publish/resources/js/Stores/style.js
@@ -0,0 +1,56 @@
+import { defineStore } from "pinia";
+import * as styles from "@/styles";
+import { darkModeKey, styleKey } from "@/config";
+
+export const useStyleStore = defineStore("style", {
+  state: () => ({
+    /* Styles */
+    asideStyle: "",
+    asideBrandStyle: "",
+    asideMenuItemStyle: "",
+    asideMenuItemActiveStyle: "",
+    asideMenuDropdownStyle: "",
+    navBarItemLabelStyle: "",
+    navBarItemLabelHoverStyle: "",
+    navBarItemLabelActiveColorStyle: "",
+    overlayStyle: "",
+
+    /* Dark mode */
+    darkMode: false,
+  }),
+  actions: {
+    setStyle(payload) {
+      if (!styles[payload]) {
+        return;
+      }
+
+      if (typeof localStorage !== "undefined") {
+        localStorage.setItem(styleKey, payload);
+      }
+
+      const style = styles[payload];
+
+      for (const key in style) {
+        this[`${key}Style`] = style[key];
+      }
+    },
+
+    setDarkMode(payload = null) {
+      this.darkMode = payload !== null ? payload : !this.darkMode;
+
+      if (typeof localStorage !== "undefined") {
+        localStorage.setItem(darkModeKey, this.darkMode ? "1" : "0");
+      }
+
+      if (typeof document !== "undefined") {
+        document.body.classList[this.darkMode ? "add" : "remove"](
+          "dark-scrollbars"
+        );
+
+        document.documentElement.classList[this.darkMode ? "add" : "remove"](
+          "dark-scrollbars-compat"
+        );
+      }
+    },
+  },
+});
diff --git a/src/Publish/resources/js/app.js b/src/Publish/resources/js/app.js
new file mode 100644
index 0000000..9f1fe89
--- /dev/null
+++ b/src/Publish/resources/js/app.js
@@ -0,0 +1,85 @@
+import { createPinia } from 'pinia';
+import './bootstrap';
+import { useStyleStore } from '@/Stores/style.js';
+
+import { darkModeKey, styleKey } from '@/config.js';
+
+import { createApp, h } from 'vue';
+import { createInertiaApp, Link } from '@inertiajs/inertia-vue3';
+import { InertiaProgress } from '@inertiajs/progress';
+import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
+import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';
+import Toaster from '@meforma/vue-toaster';
+import 'boxicons/css/boxicons.min.css';
+import VueCookies from 'vue3-cookies';
+
+import VueLazyload from 'vue-lazyload';
+const errorimage =
+    'https://www.naos-marketing.com/wp-content/themes/themify-ultra/themify/img/image-placeholder.webp';
+const loadimage = 'https://media3.giphy.com/media/3oEjI6SIIHBdRxXI40/200.gif';
+
+const appName =
+    window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';
+
+const pinia = createPinia();
+
+createInertiaApp({
+    title: (title) => `${title} - ${appName}`,
+    resolve: async (name) => {
+        let page = '';
+        if (name.includes('@')) {
+            const matched = /@(.*)::/.exec(name);
+            const module = matched[1];
+            const pageName = name.replace(matched[0], '');
+            page = resolvePageComponent(
+                `../../Modules/${module}/Resources/views/${pageName}.vue`,
+                import.meta.glob('../../Modules/**/**/**/**/*.vue')
+            );
+        } else {
+            page = resolvePageComponent(
+                `./Pages/${name}.vue`,
+                import.meta.glob('./Pages/**/*.vue')
+            );
+        }
+        page.then((module) => {
+            module.default.layout = module.default.layout;
+        });
+        return page;
+    },
+    setup({ el, app, props, plugin }) {
+        return createApp({ render: () => h(app, props) })
+            .use(plugin)
+            .use(Toaster)
+            .use(VueCookies, {
+                expireTimes: '30d',
+                path: '/',
+                domain: '',
+                secure: true,
+                sameSite: 'None',
+            })
+            .use(VueLazyload, {
+                error: errorimage,
+                loading: loadimage,
+            })
+            .use(pinia)
+            .use(ZiggyVue, Ziggy)
+            .component('Link', Link)
+            .mount(el);
+    },
+});
+
+InertiaProgress.init({ color: '#4B5563' });
+
+const styleStore = useStyleStore(pinia);
+
+/* App style */
+styleStore.setStyle(localStorage[styleKey] ?? 'basic');
+
+/* Dark mode */
+if (
+    (!localStorage[darkModeKey] &&
+        window.matchMedia('(prefers-color-scheme: dark)').matches) ||
+    localStorage[darkModeKey] === '1'
+) {
+    styleStore.setDarkMode(true);
+}
diff --git a/src/Publish/resources/js/bootstrap.js b/src/Publish/resources/js/bootstrap.js
new file mode 100644
index 0000000..d21a8c0
--- /dev/null
+++ b/src/Publish/resources/js/bootstrap.js
@@ -0,0 +1,34 @@
+import _ from 'lodash';
+window._ = _;
+
+/**
+ * We'll load the axios HTTP library which allows us to easily issue requests
+ * to our Laravel back-end. This library automatically handles sending the
+ * CSRF token as a header based on the value of the "XSRF" token cookie.
+ */
+
+import axios from 'axios';
+window.axios = axios;
+
+window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
+
+/**
+ * Echo exposes an expressive API for subscribing to channels and listening
+ * for events that are broadcast by Laravel. Echo and event broadcasting
+ * allows your team to easily build robust real-time web applications.
+ */
+
+// import Echo from 'laravel-echo';
+
+// import Pusher from 'pusher-js';
+// window.Pusher = Pusher;
+
+// window.Echo = new Echo({
+//     broadcaster: 'pusher',
+//     key: import.meta.env.VITE_PUSHER_APP_KEY,
+//     wsHost: import.meta.env.VITE_PUSHER_HOST ?? `ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com`,
+//     wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80,
+//     wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443,
+//     forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',
+//     enabledTransports: ['ws', 'wss'],
+// });
diff --git a/src/Publish/resources/js/colors.js b/src/Publish/resources/js/colors.js
new file mode 100644
index 0000000..d78fb66
--- /dev/null
+++ b/src/Publish/resources/js/colors.js
@@ -0,0 +1,138 @@
+export const gradientBgBase = "bg-gradient-to-tr";
+export const gradientBgPurplePink = `${gradientBgBase} from-purple-400 via-pink-500 to-red-500`;
+export const gradientBgDark = `${gradientBgBase} from-slate-700 via-slate-900 to-slate-800`;
+export const gradientBgPinkRed = `${gradientBgBase} from-pink-400 via-red-500 to-yellow-500`;
+
+export const colorsBgLight = {
+  white: "bg-white text-black",
+  light: "bg-white text-black dark:bg-slate-900/70 dark:text-white",
+  contrast: "bg-gray-800 text-white dark:bg-white dark:text-black",
+  success: "bg-emerald-500 border-emerald-500 text-white",
+  danger: "bg-red-500 border-red-500 text-white",
+  warning: "bg-yellow-500 border-yellow-500 text-white",
+  info: "bg-blue-500 border-blue-500 text-white",
+};
+
+export const colorsText = {
+  white: "text-black dark:text-slate-100",
+  light: "text-gray-700 dark:text-slate-400",
+  contrast: "dark:text-white",
+  success: "text-emerald-500",
+  danger: "text-red-500",
+  warning: "text-yellow-500",
+  info: "text-blue-500",
+};
+
+export const colorsOutline = {
+  white: [colorsText.white, "border-gray-100"],
+  light: [colorsText.light, "border-gray-100"],
+  contrast: [colorsText.contrast, "border-gray-900 dark:border-slate-100"],
+  success: [colorsText.success, "border-emerald-500"],
+  danger: [colorsText.danger, "border-red-500"],
+  warning: [colorsText.warning, "border-yellow-500"],
+  info: [colorsText.info, "border-blue-500"],
+};
+
+export const getButtonColor = (
+  color,
+  isOutlined,
+  hasHover,
+  isActive = false
+) => {
+  const colors = {
+    ring: {
+      white: "ring-gray-200 dark:ring-gray-500",
+      whiteDark: "ring-gray-200 dark:ring-gray-500",
+      lightDark: "ring-gray-200 dark:ring-gray-500",
+      contrast: "ring-gray-300 dark:ring-gray-400",
+      success: "ring-emerald-300 dark:ring-emerald-700",
+      danger: "ring-red-300 dark:ring-red-700",
+      warning: "ring-yellow-300 dark:ring-yellow-700",
+      info: "ring-blue-300 dark:ring-blue-700",
+    },
+    active: {
+      white: "bg-gray-100",
+      whiteDark: "bg-gray-100 dark:bg-slate-800",
+      lightDark: "bg-gray-200 dark:bg-slate-700",
+      contrast: "bg-gray-700 dark:bg-slate-100",
+      success: "bg-emerald-700 dark:bg-emerald-600",
+      danger: "bg-red-700 dark:bg-red-600",
+      warning: "bg-yellow-700 dark:bg-yellow-600",
+      info: "bg-blue-700 dark:bg-blue-600",
+    },
+    bg: {
+      white: "bg-white text-black",
+      whiteDark: "bg-white text-black dark:bg-slate-900 dark:text-white",
+      lightDark: "bg-gray-100 text-black dark:bg-slate-800 dark:text-white",
+      contrast: "bg-gray-800 text-white dark:bg-white dark:text-black",
+      success: "bg-emerald-600 dark:bg-emerald-500 text-white",
+      danger: "bg-red-600 dark:bg-red-500 text-white",
+      warning: "bg-yellow-600 dark:bg-yellow-500 text-white",
+      info: "bg-blue-600 dark:bg-blue-500 text-white",
+    },
+    bgHover: {
+      white: "hover:bg-gray-100",
+      whiteDark: "hover:bg-gray-100 hover:dark:bg-slate-800",
+      lightDark: "hover:bg-gray-200 hover:dark:bg-slate-700",
+      contrast: "hover:bg-gray-700 hover:dark:bg-slate-100",
+      success:
+        "hover:bg-emerald-700 hover:border-emerald-700 hover:dark:bg-emerald-600 hover:dark:border-emerald-600",
+      danger:
+        "hover:bg-red-700 hover:border-red-700 hover:dark:bg-red-600 hover:dark:border-red-600",
+      warning:
+        "hover:bg-yellow-700 hover:border-yellow-700 hover:dark:bg-yellow-600 hover:dark:border-yellow-600",
+      info: "hover:bg-blue-700 hover:border-blue-700 hover:dark:bg-blue-600 hover:dark:border-blue-600",
+    },
+    borders: {
+      white: "border-white",
+      whiteDark: "border-white dark:border-slate-900",
+      lightDark: "border-gray-100 dark:border-slate-800",
+      contrast: "border-gray-800 dark:border-white",
+      success: "border-emerald-600 dark:border-emerald-500",
+      danger: "border-red-600 dark:border-red-500",
+      warning: "border-yellow-600 dark:border-yellow-500",
+      info: "border-blue-600 dark:border-blue-500",
+    },
+    text: {
+      contrast: "dark:text-slate-100",
+      success: "text-emerald-600 dark:text-emerald-500",
+      danger: "text-red-600 dark:text-red-500",
+      warning: "text-yellow-600 dark:text-yellow-500",
+      info: "text-blue-600 dark:text-blue-500",
+    },
+    outlineHover: {
+      contrast:
+        "hover:bg-gray-800 hover:text-gray-100 hover:dark:bg-slate-100 hover:dark:text-black",
+      success:
+        "hover:bg-emerald-600 hover:text-white hover:text-white hover:dark:text-white hover:dark:border-emerald-600",
+      danger:
+        "hover:bg-red-600 hover:text-white hover:text-white hover:dark:text-white hover:dark:border-red-600",
+      warning:
+        "hover:bg-yellow-600 hover:text-white hover:text-white hover:dark:text-white hover:dark:border-yellow-600",
+      info: "hover:bg-blue-600 hover:text-white hover:dark:text-white hover:dark:border-blue-600",
+    },
+  };
+
+  if (!colors.bg[color]) {
+    return color;
+  }
+
+  const isOutlinedProcessed =
+    isOutlined && ["white", "whiteDark", "lightDark"].indexOf(color) < 0;
+
+  const base = [colors.borders[color], colors.ring[color]];
+
+  if (isActive) {
+    base.push(colors.active[color]);
+  } else {
+    base.push(isOutlinedProcessed ? colors.text[color] : colors.bg[color]);
+  }
+
+  if (hasHover) {
+    base.push(
+      isOutlinedProcessed ? colors.outlineHover[color] : colors.bgHover[color]
+    );
+  }
+
+  return base;
+};
diff --git a/src/Publish/resources/js/config.js b/src/Publish/resources/js/config.js
new file mode 100644
index 0000000..a1b85a5
--- /dev/null
+++ b/src/Publish/resources/js/config.js
@@ -0,0 +1,5 @@
+export const darkModeKey = "darkMode";
+
+export const styleKey = "style";
+
+export const containerMaxW = "xl:mx-auto";
diff --git a/src/Publish/resources/js/menuAside.js b/src/Publish/resources/js/menuAside.js
new file mode 100644
index 0000000..b6a5143
--- /dev/null
+++ b/src/Publish/resources/js/menuAside.js
@@ -0,0 +1,79 @@
+import {
+  mdiAccountCircle,
+  mdiMonitor,
+  mdiGithub,
+  mdiLock,
+  mdiAlertCircle,
+  mdiSquareEditOutline,
+  mdiTable,
+  mdiViewList,
+  mdiTelevisionGuide,
+  mdiResponsive,
+  mdiPalette,
+} from "@mdi/js";
+
+export default [
+  {
+    to: "/dashboard",
+    icon: mdiMonitor,
+    label: "Dashboard",
+  },
+  {
+    to: "/tables",
+    label: "Tables",
+    icon: mdiTable,
+  },
+  {
+    to: "/forms",
+    label: "Forms",
+    icon: mdiSquareEditOutline,
+  },
+  {
+    to: "/ui",
+    label: "UI",
+    icon: mdiTelevisionGuide,
+  },
+  {
+    to: "/responsive",
+    label: "Responsive",
+    icon: mdiResponsive,
+  },
+  {
+    to: "/",
+    label: "Styles",
+    icon: mdiPalette,
+  },
+  {
+    to: "/profile",
+    label: "Profile",
+    icon: mdiAccountCircle,
+  },
+  {
+    to: "/login",
+    label: "Login",
+    icon: mdiLock,
+  },
+  {
+    to: "/error",
+    label: "Error",
+    icon: mdiAlertCircle,
+  },
+  {
+    label: "Dropdown",
+    icon: mdiViewList,
+    menu: [
+      {
+        label: "Item One",
+      },
+      {
+        label: "Item Two",
+      },
+    ],
+  },
+  {
+    href: "https://github.com/justboil/admin-one-vue-tailwind",
+    label: "GitHub",
+    icon: mdiGithub,
+    target: "_blank",
+  },
+];
diff --git a/src/Publish/resources/js/menuNavBar.js b/src/Publish/resources/js/menuNavBar.js
new file mode 100644
index 0000000..67e2ef6
--- /dev/null
+++ b/src/Publish/resources/js/menuNavBar.js
@@ -0,0 +1,52 @@
+import {
+  mdiMenu,
+  mdiClockOutline,
+  mdiCloud,
+  mdiCrop,
+  mdiAccount,
+  mdiCogOutline,
+  mdiEmail,
+  mdiLogout,
+  mdiThemeLightDark,
+    mdiTranslate,
+} from "@mdi/js";
+
+export default [
+
+  {
+    isCurrentUser: true,
+    menu: [
+      {
+        icon: mdiAccount,
+        label: "My Profile",
+        to: "/user/profile",
+      },
+      {
+        isDivider: true,
+      },
+      {
+        icon: mdiLogout,
+        label: "Log Out",
+        isLogout: true,
+      },
+    ],
+  },
+  {
+    icon: mdiThemeLightDark,
+    label: "Light/Dark",
+    isDesktopNoLabel: true,
+    isToggleLightDark: true,
+  },
+  {
+    icon: mdiTranslate,
+    label: "Change Language",
+    isDesktopNoLabel: true,
+    isChangeLanguage: true,
+  },
+  {
+    icon: mdiLogout,
+    label: "Log out",
+    isDesktopNoLabel: true,
+    isLogout: true,
+  },
+];
diff --git a/src/Publish/resources/js/styles.js b/src/Publish/resources/js/styles.js
new file mode 100644
index 0000000..a4782ba
--- /dev/null
+++ b/src/Publish/resources/js/styles.js
@@ -0,0 +1,25 @@
+export const basic = {
+  aside: "bg-gray-800",
+  asideScrollbars: "aside-scrollbars-gray",
+  asideBrand: "bg-gray-900 text-white",
+  asideMenuItem: "text-gray-300 hover:text-white",
+  asideMenuItemActive: "font-bold text-white",
+  asideMenuDropdown: "bg-gray-700/50",
+  navBarItemLabel: "text-black",
+  navBarItemLabelHover: "hover:text-blue-500",
+  navBarItemLabelActiveColor: "text-blue-600",
+  overlay: "from-gray-700 via-gray-900 to-gray-700",
+};
+
+export const white = {
+  aside: "bg-white",
+  asideScrollbars: "aside-scrollbars-light",
+  asideBrand: "",
+  asideMenuItem: "text-blue-600 hover:text-black dark:text-white",
+  asideMenuItemActive: "font-bold text-black dark:text-white",
+  asideMenuDropdown: "bg-gray-100/75",
+  navBarItemLabel: "text-blue-600",
+  navBarItemLabelHover: "hover:text-black",
+  navBarItemLabelActiveColor: "text-black",
+  overlay: "from-white via-gray-100 to-white",
+};
diff --git a/src/Publish/resources/views/app.blade.php b/src/Publish/resources/views/app.blade.php
new file mode 100644
index 0000000..983b3b1
--- /dev/null
+++ b/src/Publish/resources/views/app.blade.php
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" dir="{{ app()->getLocale() === 'ar' ? "rtl" : "ltr" }}">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <title inertia>{{ config('app.name', 'Laravel') }}</title>
+
+
+    <!-- Scripts -->
+    @routes
+    @vite(['resources/css/main.css', 'resources/js/app.js'])
+    @inertiaHead
+</head>
+<body class="font-sans antialiased">
+@inertia
+</body>
+</html>
diff --git a/src/Publish/resources/views/vendor/jetstream/components/action-message.blade.php b/src/Publish/resources/views/vendor/jetstream/components/action-message.blade.php
new file mode 100644
index 0000000..39e6eed
--- /dev/null
+++ b/src/Publish/resources/views/vendor/jetstream/components/action-message.blade.php
@@ -0,0 +1,10 @@
+@props(['on'])
+
+<div x-data="{ shown: false, timeout: null }"
+    x-init="@this.on('{{ $on }}', () => { clearTimeout(timeout); shown = true; timeout = setTimeout(() => { shown = false }, 2000);  })"
+    x-show.transition.out.opacity.duration.1500ms="shown"
+    x-transition:leave.opacity.duration.1500ms
+    style="display: none;"
+    {{ $attributes->merge(['class' => 'text-sm text-gray-600']) }}>
+    {{ $slot->isEmpty() ? 'Saved.' : $slot }}
+</div>
diff --git a/src/Publish/resources/views/vendor/jetstream/components/action-section.blade.php b/src/Publish/resources/views/vendor/jetstream/components/action-section.blade.php
new file mode 100644
index 0000000..4ab1ce9
--- /dev/null
+++ b/src/Publish/resources/views/vendor/jetstream/components/action-section.blade.php
@@ -0,0 +1,12 @@
+<div {{ $attributes->merge(['class' => 'md:grid md:grid-cols-3 md:gap-6']) }}>
+    <x-jet-section-title>
+        <x-slot name="title">{{ $title }}</x-slot>
+        <x-slot name="description">{{ $description }}</x-slot>
+    </x-jet-section-title>
+
+    <div class="mt-5 md:mt-0 md:col-span-2">
+        <div class="px-4 py-5 sm:p-6 bg-white shadow sm:rounded-lg">
+            {{ $content }}
+        </div>
+    </div>
+</div>
diff --git a/src/Publish/resources/views/vendor/jetstream/components/application-logo.blade.php b/src/Publish/resources/views/vendor/jetstream/components/application-logo.blade.php
new file mode 100644
index 0000000..226a0dc
--- /dev/null
+++ b/src/Publish/resources/views/vendor/jetstream/components/application-logo.blade.php
@@ -0,0 +1,5 @@
+<svg viewBox="0 0 317 48" fill="none" xmlns="http://www.w3.org/2000/svg" {{ $attributes }}>
+  <path d="M74.09 30.04V13h-4.14v21H82.1v-3.96h-8.01zM95.379 19v1.77c-1.08-1.35-2.7-2.19-4.89-2.19-3.99 0-7.29 3.45-7.29 7.92s3.3 7.92 7.29 7.92c2.19 0 3.81-.84 4.89-2.19V34h3.87V19h-3.87zm-4.17 11.73c-2.37 0-4.14-1.71-4.14-4.23 0-2.52 1.77-4.23 4.14-4.23 2.4 0 4.17 1.71 4.17 4.23 0 2.52-1.77 4.23-4.17 4.23zM106.628 21.58V19h-3.87v15h3.87v-7.17c0-3.15 2.55-4.05 4.56-3.81V18.7c-1.89 0-3.78.84-4.56 2.88zM124.295 19v1.77c-1.08-1.35-2.7-2.19-4.89-2.19-3.99 0-7.29 3.45-7.29 7.92s3.3 7.92 7.29 7.92c2.19 0 3.81-.84 4.89-2.19V34h3.87V19h-3.87zm-4.17 11.73c-2.37 0-4.14-1.71-4.14-4.23 0-2.52 1.77-4.23 4.14-4.23 2.4 0 4.17 1.71 4.17 4.23 0 2.52-1.77 4.23-4.17 4.23zM141.544 19l-3.66 10.5-3.63-10.5h-4.26l5.7 15h4.41l5.7-15h-4.26zM150.354 28.09h11.31c.09-.51.15-1.02.15-1.59 0-4.41-3.15-7.92-7.59-7.92-4.71 0-7.92 3.45-7.92 7.92s3.18 7.92 8.22 7.92c2.88 0 5.13-1.17 6.54-3.21l-3.12-1.8c-.66.87-1.86 1.5-3.36 1.5-2.04 0-3.69-.84-4.23-2.82zm-.06-3c.45-1.92 1.86-3.03 3.93-3.03 1.62 0 3.24.87 3.72 3.03h-7.65zM164.516 34h3.87V12.1h-3.87V34zM185.248 34.36c3.69 0 6.9-2.01 6.9-6.3V13h-2.1v15.06c0 3.03-2.07 4.26-4.8 4.26-2.19 0-3.93-.78-4.62-2.61l-1.77 1.05c1.05 2.43 3.57 3.6 6.39 3.6zM203.124 18.64c-4.65 0-7.83 3.45-7.83 7.86 0 4.53 3.24 7.86 7.98 7.86 3.03 0 5.34-1.41 6.6-3.45l-1.74-1.02c-.81 1.44-2.46 2.55-4.83 2.55-3.18 0-5.55-1.89-5.97-4.95h13.17c.03-.3.06-.63.06-.93 0-4.11-2.85-7.92-7.44-7.92zm0 1.92c2.58 0 4.98 1.71 5.4 5.01h-11.19c.39-2.94 2.64-5.01 5.79-5.01zM221.224 20.92V19h-4.32v-4.2l-1.98.6V19h-3.15v1.92h3.15v9.09c0 3.6 2.25 4.59 6.3 3.99v-1.74c-2.91.12-4.32.33-4.32-2.25v-9.09h4.32zM225.176 22.93c0-1.62 1.59-2.37 3.15-2.37 1.44 0 2.97.57 3.6 2.1l1.65-.96c-.87-1.86-2.79-3.06-5.25-3.06-3 0-5.13 1.89-5.13 4.29 0 5.52 8.76 3.39 8.76 7.11 0 1.77-1.68 2.4-3.45 2.4-2.01 0-3.57-.99-4.11-2.52l-1.68.99c.75 1.92 2.79 3.45 5.79 3.45 3.21 0 5.43-1.77 5.43-4.32 0-5.52-8.76-3.39-8.76-7.11zM244.603 20.92V19h-4.32v-4.2l-1.98.6V19h-3.15v1.92h3.15v9.09c0 3.6 2.25 4.59 6.3 3.99v-1.74c-2.91.12-4.32.33-4.32-2.25v-9.09h4.32zM249.883 21.49V19h-1.98v15h1.98v-8.34c0-3.72 2.34-4.98 4.74-4.98v-1.92c-1.92 0-3.69.63-4.74 2.73zM263.358 18.64c-4.65 0-7.83 3.45-7.83 7.86 0 4.53 3.24 7.86 7.98 7.86 3.03 0 5.34-1.41 6.6-3.45l-1.74-1.02c-.81 1.44-2.46 2.55-4.83 2.55-3.18 0-5.55-1.89-5.97-4.95h13.17c.03-.3.06-.63.06-.93 0-4.11-2.85-7.92-7.44-7.92zm0 1.92c2.58 0 4.98 1.71 5.4 5.01h-11.19c.39-2.94 2.64-5.01 5.79-5.01zM286.848 19v2.94c-1.26-2.01-3.39-3.3-6.06-3.3-4.23 0-7.74 3.42-7.74 7.86s3.51 7.86 7.74 7.86c2.67 0 4.8-1.29 6.06-3.3V34h1.98V19h-1.98zm-5.91 13.44c-3.33 0-5.91-2.61-5.91-5.94 0-3.33 2.58-5.94 5.91-5.94s5.91 2.61 5.91 5.94c0 3.33-2.58 5.94-5.91 5.94zM309.01 18.64c-1.92 0-3.75.87-4.86 2.73-.84-1.74-2.46-2.73-4.56-2.73-1.8 0-3.42.72-4.59 2.55V19h-1.98v15H295v-8.31c0-3.72 2.16-5.13 4.32-5.13 2.13 0 3.51 1.41 3.51 4.08V34h1.98v-8.31c0-3.72 1.86-5.13 4.17-5.13 2.13 0 3.66 1.41 3.66 4.08V34h1.98v-9.36c0-3.75-2.31-6-5.61-6z" fill="#000"/>
+  <path d="M11.395 44.428C4.557 40.198 0 32.632 0 24 0 10.745 10.745 0 24 0a23.891 23.891 0 0113.997 4.502c-.2 17.907-11.097 33.245-26.602 39.926z" fill="#6875F5"/>
+  <path d="M14.134 45.885A23.914 23.914 0 0024 48c13.255 0 24-10.745 24-24 0-3.516-.756-6.856-2.115-9.866-4.659 15.143-16.608 27.092-31.75 31.751z" fill="#6875F5"/>
+</svg>
diff --git a/src/Publish/resources/views/vendor/jetstream/components/application-mark.blade.php b/src/Publish/resources/views/vendor/jetstream/components/application-mark.blade.php
new file mode 100644
index 0000000..182054e
--- /dev/null
+++ b/src/Publish/resources/views/vendor/jetstream/components/application-mark.blade.php
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" {{ $attributes }}>
+  <path d="M11.395 44.428C4.557 40.198 0 32.632 0 24 0 10.745 10.745 0 24 0a23.891 23.891 0 0113.997 4.502c-.2 17.907-11.097 33.245-26.602 39.926z" fill="#6875F5"/>
+  <path d="M14.134 45.885A23.914 23.914 0 0024 48c13.255 0 24-10.745 24-24 0-3.516-.756-6.856-2.115-9.866-4.659 15.143-16.608 27.092-31.75 31.751z" fill="#6875F5"/>
+</svg>
diff --git a/src/Publish/resources/views/vendor/jetstream/components/authentication-card-logo.blade.php b/src/Publish/resources/views/vendor/jetstream/components/authentication-card-logo.blade.php
new file mode 100644
index 0000000..0b59654
--- /dev/null
+++ b/src/Publish/resources/views/vendor/jetstream/components/authentication-card-logo.blade.php
@@ -0,0 +1,6 @@
+<a href="/">
+    <svg class="w-16 h-16" viewbox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M11.395 44.428C4.557 40.198 0 32.632 0 24 0 10.745 10.745 0 24 0a23.891 23.891 0 0113.997 4.502c-.2 17.907-11.097 33.245-26.602 39.926z" fill="#6875F5"/>
+        <path d="M14.134 45.885A23.914 23.914 0 0024 48c13.255 0 24-10.745 24-24 0-3.516-.756-6.856-2.115-9.866-4.659 15.143-16.608 27.092-31.75 31.751z" fill="#6875F5"/>
+    </svg>
+</a>
diff --git a/src/Publish/resources/views/vendor/jetstream/components/authentication-card.blade.php b/src/Publish/resources/views/vendor/jetstream/components/authentication-card.blade.php
new file mode 100644
index 0000000..71235cf
--- /dev/null
+++ b/src/Publish/resources/views/vendor/jetstream/components/authentication-card.blade.php
@@ -0,0 +1,9 @@
+<div class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100">
+    <div>
+        {{ $logo }}
+    </div>
+
+    <div class="w-full sm:max-w-md mt-6 px-6 py-4 bg-white shadow-md overflow-hidden sm:rounded-lg">
+        {{ $slot }}
+    </div>
+</div>
diff --git a/src/Publish/resources/views/vendor/jetstream/components/banner.blade.php b/src/Publish/resources/views/vendor/jetstream/components/banner.blade.php
new file mode 100644
index 0000000..74f53bc
--- /dev/null
+++ b/src/Publish/resources/views/vendor/jetstream/components/banner.blade.php
@@ -0,0 +1,46 @@
+@props(['style' => session('flash.bannerStyle', 'success'), 'message' => session('flash.banner')])
+
+<div x-data="{{ json_encode(['show' => true, 'style' => $style, 'message' => $message]) }}"
+            :class="{ 'bg-indigo-500': style == 'success', 'bg-red-700': style == 'danger', 'bg-gray-500': style != 'success' && style != 'danger' }"
+            style="display: none;"
+            x-show="show && message"
+            x-init="
+                document.addEventListener('banner-message', event => {
+                    style = event.detail.style;
+                    message = event.detail.message;
+                    show = true;
+                });
+            ">
+    <div class="max-w-screen-xl mx-auto py-2 px-3 sm:px-6 lg:px-8">
+        <div class="flex items-center justify-between flex-wrap">
+            <div class="w-0 flex-1 flex items-center min-w-0">
+                <span class="flex p-2 rounded-lg" :class="{ 'bg-indigo-600': style == 'success', 'bg-red-600': style == 'danger' }">
+                    <svg x-show="style == 'success'" class="h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    </svg>
+                    <svg x-show="style == 'danger'" class="h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    </svg>
+                    <svg x-show="style != 'success' && style != 'danger'" class="h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    </svg>
+                </span>
+
+                <p class="ml-3 font-medium text-sm text-white truncate" x-text="message"></p>
+            </div>
+
+            <div class="shrink-0 sm:ml-3">
+                <button
+                    type="button"
+                    class="-mr-1 flex p-2 rounded-md focus:outline-none sm:-mr-2 transition"
+                    :class="{ 'hover:bg-indigo-600 focus:bg-indigo-600': style == 'success', 'hover:bg-red-600 focus:bg-red-600': style == 'danger' }"
+                    aria-label="Dismiss"
+                    x-on:click="show = false">
+                    <svg class="h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/src/Publish/resources/views/vendor/jetstream/components/button.blade.php b/src/Publish/resources/views/vendor/jetstream/components/button.blade.php
new file mode 100644
index 0000000..ff1fed5
--- /dev/null
+++ b/src/Publish/resources/views/vendor/jetstream/components/button.blade.php
@@ -0,0 +1,3 @@
+<button {{ $attributes->merge(['type' => 'submit', 'class' => 'inline-flex items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 active:bg-gray-900 focus:outline-none focus:border-gray-900 focus:ring focus:ring-gray-300 disabled:opacity-25 transition']) }}>
+    {{ $slot }}
+</button>
diff --git a/src/Publish/resources/views/vendor/jetstream/components/checkbox.blade.php b/src/Publish/resources/views/vendor/jetstream/components/checkbox.blade.php
new file mode 100644
index 0000000..fb43fdc
--- /dev/null
+++ b/src/Publish/resources/views/vendor/jetstream/components/checkbox.blade.php
@@ -0,0 +1 @@
+<input type="checkbox" {!! $attributes->merge(['class' => 'rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50']) !!}>
diff --git a/src/Publish/resources/views/vendor/jetstream/components/confirmation-modal.blade.php b/src/Publish/resources/views/vendor/jetstream/components/confirmation-modal.blade.php
new file mode 100644
index 0000000..ee4896c
--- /dev/null
+++ b/src/Publish/resources/views/vendor/jetstream/components/confirmation-modal.blade.php
@@ -0,0 +1,27 @@
+@props(['id' => null, 'maxWidth' => null])
+
+<x-jet-modal :id="$id" :maxWidth="$maxWidth" {{ $attributes }}>
+    <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+        <div class="sm:flex sm:items-start">
+            <div class="mx-auto shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
+                <svg class="h-6 w-6 text-red-600" stroke="currentColor" fill="none" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
+                </svg>
+            </div>
+
+            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+                <h3 class="text-lg">
+                    {{ $title }}
+                </h3>
+
+                <div class="mt-2">
+                    {{ $content }}
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="flex flex-row justify-end px-6 py-4 bg-gray-100 text-right">
+        {{ $footer }}
+    </div>
+</x-jet-modal>
diff --git a/src/Publish/resources/views/vendor/jetstream/components/confirms-password.blade.php b/src/Publish/resources/views/vendor/jetstream/components/confirms-password.blade.php
new file mode 100644
index 0000000..5341185
--- /dev/null
+++ b/src/Publish/resources/views/vendor/jetstream/components/confirms-password.blade.php
@@ -0,0 +1,46 @@
+@props(['title' => __('Confirm Password'), 'content' => __('For your security, please confirm your password to continue.'), 'button' => __('Confirm')])
+
+@php
+    $confirmableId = md5($attributes->wire('then'));
+@endphp
+
+<span
+    {{ $attributes->wire('then') }}
+    x-data
+    x-ref="span"
+    x-on:click="$wire.startConfirmingPassword('{{ $confirmableId }}')"
+    x-on:password-confirmed.window="setTimeout(() => $event.detail.id === '{{ $confirmableId }}' && $refs.span.dispatchEvent(new CustomEvent('then', { bubbles: false })), 250);"
+>
+    {{ $slot }}
+</span>
+
+@once
+<x-jet-dialog-modal wire:model="confirmingPassword">
+    <x-slot name="title">
+        {{ $title }}
+    </x-slot>
+
+    <x-slot name="content">
+        {{ $content }}
+
+        <div class="mt-4" x-data="{}" x-on:confirming-password.window="setTimeout(() => $refs.confirmable_password.focus(), 250)">
+            <x-jet-input type="password" class="mt-1 block w-3/4" placeholder="{{ __('Password') }}"
+                        x-ref="confirmable_password"
+                        wire:model.defer="confirmablePassword"
+                        wire:keydown.enter="confirmPassword" />
+
+            <x-jet-input-error for="confirmable_password" class="mt-2" />
+        </div>
+    </x-slot>
+
+    <x-slot name="footer">
+        <x-jet-secondary-button wire:click="stopConfirmingPassword" wire:loading.attr="disabled">
+            {{ __('Cancel') }}
+        </x-jet-secondary-button>
+
+        <x-jet-button class="ml-3" dusk="confirm-password-button" wire:click="confirmPassword" wire:loading.attr="disabled">
+            {{ $button }}
+        </x-jet-button>
+    </x-slot>
+</x-jet-dialog-modal>
+@endonce
diff --git a/src/Publish/resources/views/vendor/jetstream/components/danger-button.blade.php b/src/Publish/resources/views/vendor/jetstream/components/danger-button.blade.php
new file mode 100644
index 0000000..876b3e5
--- /dev/null
+++ b/src/Publish/resources/views/vendor/jetstream/components/danger-button.blade.php
@@ -0,0 +1,3 @@
+<button {{ $attributes->merge(['type' => 'button', 'class' => 'inline-flex items-center justify-center px-4 py-2 bg-red-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-red-500 focus:outline-none focus:border-red-700 focus:ring focus:ring-red-200 active:bg-red-600 disabled:opacity-25 transition']) }}>
+    {{ $slot }}
+</button>
diff --git a/src/Publish/resources/views/vendor/jetstream/components/dialog-modal.blade.php b/src/Publish/resources/views/vendor/jetstream/components/dialog-modal.blade.php
new file mode 100644
index 0000000..0935941
--- /dev/null
+++ b/src/Publish/resources/views/vendor/jetstream/components/dialog-modal.blade.php
@@ -0,0 +1,17 @@
+@props(['id' => null, 'maxWidth' => null])
+
+<x-jet-modal :id="$id" :maxWidth="$maxWidth" {{ $attributes }}>
+    <div class="px-6 py-4">
+        <div class="text-lg">
+            {{ $title }}
+        </div>
+
+        <div class="mt-4">
+            {{ $content }}
+        </div>
+    </div>
+
+    <div class="flex flex-row justify-end px-6 py-4 bg-gray-100 text-right">
+        {{ $footer }}
+    </div>
+</x-jet-modal>
diff --git a/src/Publish/resources/views/vendor/jetstream/components/dropdown-link.blade.php b/src/Publish/resources/views/vendor/jetstream/components/dropdown-link.blade.php
new file mode 100644
index 0000000..6b608ff
--- /dev/null
+++ b/src/Publish/resources/views/vendor/jetstream/components/dropdown-link.blade.php
@@ -0,0 +1 @@
+<a {{ $attributes->merge(['class' => 'block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition']) }}>{{ $slot }}</a>
diff --git a/src/Publish/resources/views/vendor/jetstream/components/dropdown.blade.php b/src/Publish/resources/views/vendor/jetstream/components/dropdown.blade.php
new file mode 100644
index 0000000..5fd9f91
--- /dev/null
+++ b/src/Publish/resources/views/vendor/jetstream/components/dropdown.blade.php
@@ -0,0 +1,47 @@
+@props(['align' => 'right', 'width' => '48', 'contentClasses' => 'py-1 bg-white', 'dropdownClasses' => ''])
+
+@php
+switch ($align) {
+    case 'left':
+        $alignmentClasses = 'origin-top-left left-0';
+        break;
+    case 'top':
+        $alignmentClasses = 'origin-top';
+        break;
+    case 'none':
+    case 'false':
+        $alignmentClasses = '';
+        break;
+    case 'right':
+    default:
+        $alignmentClasses = 'origin-top-right right-0';
+        break;
+}
+
+switch ($width) {
+    case '48':
+        $width = 'w-48';
+        break;
+}
+@endphp
+
+<div class="relative" x-data="{ open: false }" @click.away="open = false" @close.stop="open = false">
+    <div @click="open = ! open">
+        {{ $trigger }}
+    </div>
+
+    <div x-show="open"
+            x-transition:enter="transition ease-out duration-200"
+            x-transition:enter-start="transform opacity-0 scale-95"
+            x-transition:enter-end="transform opacity-100 scale-100"
+            x-transition:leave="transition ease-in duration-75"
+            x-transition:leave-start="transform opacity-100 scale-100"
+            x-transition:leave-end="transform opacity-0 scale-95"
+            class="absolute z-50 mt-2 {{ $width }} rounded-md shadow-lg {{ $alignmentClasses }} {{ $dropdownClasses }}"
+            style="display: none;"
+            @click="open = false">
+        <div class="rounded-md ring-1 ring-black ring-opacity-5 {{ $contentClasses }}">
+            {{ $content }}
+        </div>
+    </div>
+</div>
diff --git a/src/Publish/resources/views/vendor/jetstream/components/form-section.blade.php b/src/Publish/resources/views/vendor/jetstream/components/form-section.blade.php
new file mode 100644
index 0000000..791387b
--- /dev/null
+++ b/src/Publish/resources/views/vendor/jetstream/components/form-section.blade.php
@@ -0,0 +1,24 @@
+@props(['submit'])
+
+<div {{ $attributes->merge(['class' => 'md:grid md:grid-cols-3 md:gap-6']) }}>
+    <x-jet-section-title>
+        <x-slot name="title">{{ $title }}</x-slot>
+        <x-slot name="description">{{ $description }}</x-slot>
+    </x-jet-section-title>
+
+    <div class="mt-5 md:mt-0 md:col-span-2">
+        <form wire:submit.prevent="{{ $submit }}">
+            <div class="px-4 py-5 bg-white sm:p-6 shadow {{ isset($actions) ? 'sm:rounded-tl-md sm:rounded-tr-md' : 'sm:rounded-md' }}">
+                <div class="grid grid-cols-6 gap-6">
+                    {{ $form }}
+                </div>
+            </div>
+
+            @if (isset($actions))
+                <div class="flex items-center justify-end px-4 py-3 bg-gray-50 text-right sm:px-6 shadow sm:rounded-bl-md sm:rounded-br-md">
+                    {{ $actions }}
+                </div>
+            @endif
+        </form>
+    </div>
+</div>
diff --git a/src/Publish/resources/views/vendor/jetstream/components/input-error.blade.php b/src/Publish/resources/views/vendor/jetstream/components/input-error.blade.php
new file mode 100644
index 0000000..b5ad968
--- /dev/null
+++ b/src/Publish/resources/views/vendor/jetstream/components/input-error.blade.php
@@ -0,0 +1,5 @@
+@props(['for'])
+
+@error($for)
+    <p {{ $attributes->merge(['class' => 'text-sm text-red-600']) }}>{{ $message }}</p>
+@enderror
diff --git a/src/Publish/resources/views/vendor/jetstream/components/input.blade.php b/src/Publish/resources/views/vendor/jetstream/components/input.blade.php
new file mode 100644
index 0000000..78b18ee
--- /dev/null
+++ b/src/Publish/resources/views/vendor/jetstream/components/input.blade.php
@@ -0,0 +1,3 @@
+@props(['disabled' => false])
+
+<input {{ $disabled ? 'disabled' : '' }} {!! $attributes->merge(['class' => 'border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm']) !!}>
diff --git a/src/Publish/resources/views/vendor/jetstream/components/label.blade.php b/src/Publish/resources/views/vendor/jetstream/components/label.blade.php
new file mode 100644
index 0000000..1cc65e2
--- /dev/null
+++ b/src/Publish/resources/views/vendor/jetstream/components/label.blade.php
@@ -0,0 +1,5 @@
+@props(['value'])
+
+<label {{ $attributes->merge(['class' => 'block font-medium text-sm text-gray-700']) }}>
+    {{ $value ?? $slot }}
+</label>
diff --git a/src/Publish/resources/views/vendor/jetstream/components/modal.blade.php b/src/Publish/resources/views/vendor/jetstream/components/modal.blade.php
new file mode 100644
index 0000000..4acdbf0
--- /dev/null
+++ b/src/Publish/resources/views/vendor/jetstream/components/modal.blade.php
@@ -0,0 +1,68 @@
+@props(['id', 'maxWidth'])
+
+@php
+$id = $id ?? md5($attributes->wire('model'));
+
+$maxWidth = [
+    'sm' => 'sm:max-w-sm',
+    'md' => 'sm:max-w-md',
+    'lg' => 'sm:max-w-lg',
+    'xl' => 'sm:max-w-xl',
+    '2xl' => 'sm:max-w-2xl',
+][$maxWidth ?? '2xl'];
+@endphp
+
+<div
+    x-data="{
+        show: @entangle($attributes->wire('model')).defer,
+        focusables() {
+            // All focusable element types...
+            let selector = 'a, button, input:not([type=\'hidden\']), textarea, select, details, [tabindex]:not([tabindex=\'-1\'])'
+
+            return [...$el.querySelectorAll(selector)]
+                // All non-disabled elements...
+                .filter(el => ! el.hasAttribute('disabled'))
+        },
+        firstFocusable() { return this.focusables()[0] },
+        lastFocusable() { return this.focusables().slice(-1)[0] },
+        nextFocusable() { return this.focusables()[this.nextFocusableIndex()] || this.firstFocusable() },
+        prevFocusable() { return this.focusables()[this.prevFocusableIndex()] || this.lastFocusable() },
+        nextFocusableIndex() { return (this.focusables().indexOf(document.activeElement) + 1) % (this.focusables().length + 1) },
+        prevFocusableIndex() { return Math.max(0, this.focusables().indexOf(document.activeElement)) -1 },
+    }"
+    x-init="$watch('show', value => {
+        if (value) {
+            document.body.classList.add('overflow-y-hidden');
+            {{ $attributes->has('focusable') ? 'setTimeout(() => firstFocusable().focus(), 100)' : '' }}
+        } else {
+            document.body.classList.remove('overflow-y-hidden');
+        }
+    })"
+    x-on:close.stop="show = false"
+    x-on:keydown.escape.window="show = false"
+    x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()"
+    x-on:keydown.shift.tab.prevent="prevFocusable().focus()"
+    x-show="show"
+    id="{{ $id }}"
+    class="jetstream-modal fixed inset-0 overflow-y-auto px-4 py-6 sm:px-0 z-50"
+    style="display: none;"
+>
+    <div x-show="show" class="fixed inset-0 transform transition-all" x-on:click="show = false" x-transition:enter="ease-out duration-300"
+                    x-transition:enter-start="opacity-0"
+                    x-transition:enter-end="opacity-100"
+                    x-transition:leave="ease-in duration-200"
+                    x-transition:leave-start="opacity-100"
+                    x-transition:leave-end="opacity-0">
+        <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
+    </div>
+
+    <div x-show="show" class="mb-6 bg-white rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full {{ $maxWidth }} sm:mx-auto"
+                    x-transition:enter="ease-out duration-300"
+                    x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                    x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
+                    x-transition:leave="ease-in duration-200"
+                    x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
+                    x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
+        {{ $slot }}
+    </div>
+</div>
diff --git a/src/Publish/resources/views/vendor/jetstream/components/nav-link.blade.php b/src/Publish/resources/views/vendor/jetstream/components/nav-link.blade.php
new file mode 100644
index 0000000..7092642
--- /dev/null
+++ b/src/Publish/resources/views/vendor/jetstream/components/nav-link.blade.php
@@ -0,0 +1,11 @@
+@props(['active'])
+
+@php
+$classes = ($active ?? false)
+            ? 'inline-flex items-center px-1 pt-1 border-b-2 border-indigo-400 text-sm font-medium leading-5 text-gray-900 focus:outline-none focus:border-indigo-700 transition'
+            : 'inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition';
+@endphp
+
+<a {{ $attributes->merge(['class' => $classes]) }}>
+    {{ $slot }}
+</a>
diff --git a/src/Publish/resources/views/vendor/jetstream/components/responsive-nav-link.blade.php b/src/Publish/resources/views/vendor/jetstream/components/responsive-nav-link.blade.php
new file mode 100644
index 0000000..5e7987f
--- /dev/null
+++ b/src/Publish/resources/views/vendor/jetstream/components/responsive-nav-link.blade.php
@@ -0,0 +1,11 @@
+@props(['active'])
+
+@php
+$classes = ($active ?? false)
+            ? 'block pl-3 pr-4 py-2 border-l-4 border-indigo-400 text-base font-medium text-indigo-700 bg-indigo-50 focus:outline-none focus:text-indigo-800 focus:bg-indigo-100 focus:border-indigo-700 transition'
+            : 'block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 focus:outline-none focus:text-gray-800 focus:bg-gray-50 focus:border-gray-300 transition';
+@endphp
+
+<a {{ $attributes->merge(['class' => $classes]) }}>
+    {{ $slot }}
+</a>
diff --git a/src/Publish/resources/views/vendor/jetstream/components/secondary-button.blade.php b/src/Publish/resources/views/vendor/jetstream/components/secondary-button.blade.php
new file mode 100644
index 0000000..e9dc695
--- /dev/null
+++ b/src/Publish/resources/views/vendor/jetstream/components/secondary-button.blade.php
@@ -0,0 +1,3 @@
+<button {{ $attributes->merge(['type' => 'button', 'class' => 'inline-flex items-center px-4 py-2 bg-white border border-gray-300 rounded-md font-semibold text-xs text-gray-700 uppercase tracking-widest shadow-sm hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:ring focus:ring-blue-200 active:text-gray-800 active:bg-gray-50 disabled:opacity-25 transition']) }}>
+    {{ $slot }}
+</button>
diff --git a/src/Publish/resources/views/vendor/jetstream/components/section-border.blade.php b/src/Publish/resources/views/vendor/jetstream/components/section-border.blade.php
new file mode 100644
index 0000000..414ade6
--- /dev/null
+++ b/src/Publish/resources/views/vendor/jetstream/components/section-border.blade.php
@@ -0,0 +1,5 @@
+<div class="hidden sm:block">
+    <div class="py-8">
+        <div class="border-t border-gray-200"></div>
+    </div>
+</div>
diff --git a/src/Publish/resources/views/vendor/jetstream/components/section-title.blade.php b/src/Publish/resources/views/vendor/jetstream/components/section-title.blade.php
new file mode 100644
index 0000000..72e5193
--- /dev/null
+++ b/src/Publish/resources/views/vendor/jetstream/components/section-title.blade.php
@@ -0,0 +1,13 @@
+<div class="md:col-span-1 flex justify-between">
+    <div class="px-4 sm:px-0">
+        <h3 class="text-lg font-medium text-gray-900">{{ $title }}</h3>
+
+        <p class="mt-1 text-sm text-gray-600">
+            {{ $description }}
+        </p>
+    </div>
+
+    <div class="px-4 sm:px-0">
+        {{ $aside ?? '' }}
+    </div>
+</div>
diff --git a/src/Publish/resources/views/vendor/jetstream/components/switchable-team.blade.php b/src/Publish/resources/views/vendor/jetstream/components/switchable-team.blade.php
new file mode 100644
index 0000000..c621adf
--- /dev/null
+++ b/src/Publish/resources/views/vendor/jetstream/components/switchable-team.blade.php
@@ -0,0 +1,19 @@
+@props(['team', 'component' => 'jet-dropdown-link'])
+
+<form method="POST" action="{{ route('current-team.update') }}" x-data>
+    @method('PUT')
+    @csrf
+
+    <!-- Hidden Team ID -->
+    <input type="hidden" name="team_id" value="{{ $team->id }}">
+
+    <x-dynamic-component :component="$component" href="#" x-on:click.prevent="$root.submit();">
+        <div class="flex items-center">
+            @if (Auth::user()->isCurrentTeam($team))
+                <svg class="mr-2 h-5 w-5 text-green-400" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24"><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+            @endif
+
+            <div class="truncate">{{ $team->name }}</div>
+        </div>
+    </x-dynamic-component>
+</form>
diff --git a/src/Publish/resources/views/vendor/jetstream/components/validation-errors.blade.php b/src/Publish/resources/views/vendor/jetstream/components/validation-errors.blade.php
new file mode 100644
index 0000000..ef753f5
--- /dev/null
+++ b/src/Publish/resources/views/vendor/jetstream/components/validation-errors.blade.php
@@ -0,0 +1,11 @@
+@if ($errors->any())
+    <div {{ $attributes }}>
+        <div class="font-medium text-red-600">{{ __('Whoops! Something went wrong.') }}</div>
+
+        <ul class="mt-3 list-disc list-inside text-sm text-red-600">
+            @foreach ($errors->all() as $error)
+                <li>{{ $error }}</li>
+            @endforeach
+        </ul>
+    </div>
+@endif
diff --git a/src/Publish/resources/views/vendor/jetstream/components/welcome.blade.php b/src/Publish/resources/views/vendor/jetstream/components/welcome.blade.php
new file mode 100644
index 0000000..10bee57
--- /dev/null
+++ b/src/Publish/resources/views/vendor/jetstream/components/welcome.blade.php
@@ -0,0 +1,90 @@
+<div class="p-6 sm:px-20 bg-white border-b border-gray-200">
+    <div>
+        <x-jet-application-logo class="block h-12 w-auto" />
+    </div>
+
+    <div class="mt-8 text-2xl">
+        Welcome to your Jetstream application!
+    </div>
+
+    <div class="mt-6 text-gray-500">
+        Laravel Jetstream provides a beautiful, robust starting point for your next Laravel application. Laravel is designed
+        to help you build your application using a development environment that is simple, powerful, and enjoyable. We believe
+        you should love expressing your creativity through programming, so we have spent time carefully crafting the Laravel
+        ecosystem to be a breath of fresh air. We hope you love it.
+    </div>
+</div>
+
+<div class="bg-gray-200 bg-opacity-25 grid grid-cols-1 md:grid-cols-2">
+    <div class="p-6">
+        <div class="flex items-center">
+            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-8 h-8 text-gray-400"><path d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
+            <div class="ml-4 text-lg text-gray-600 leading-7 font-semibold"><a href="https://laravel.com/docs">Documentation</a></div>
+        </div>
+
+        <div class="ml-12">
+            <div class="mt-2 text-sm text-gray-500">
+                Laravel has wonderful documentation covering every aspect of the framework. Whether you're new to the framework or have previous experience, we recommend reading all of the documentation from beginning to end.
+            </div>
+
+            <a href="https://laravel.com/docs">
+                <div class="mt-3 flex items-center text-sm font-semibold text-indigo-700">
+                        <div>Explore the documentation</div>
+
+                        <div class="ml-1 text-indigo-500">
+                            <svg viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+                        </div>
+                </div>
+            </a>
+        </div>
+    </div>
+
+    <div class="p-6 border-t border-gray-200 md:border-t-0 md:border-l">
+        <div class="flex items-center">
+            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-8 h-8 text-gray-400"><path d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"></path><path d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
+            <div class="ml-4 text-lg text-gray-600 leading-7 font-semibold"><a href="https://laracasts.com">Laracasts</a></div>
+        </div>
+
+        <div class="ml-12">
+            <div class="mt-2 text-sm text-gray-500">
+                Laracasts offers thousands of video tutorials on Laravel, PHP, and JavaScript development. Check them out, see for yourself, and massively level up your development skills in the process.
+            </div>
+
+            <a href="https://laracasts.com">
+                <div class="mt-3 flex items-center text-sm font-semibold text-indigo-700">
+                        <div>Start watching Laracasts</div>
+
+                        <div class="ml-1 text-indigo-500">
+                            <svg viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+                        </div>
+                </div>
+            </a>
+        </div>
+    </div>
+
+    <div class="p-6 border-t border-gray-200">
+        <div class="flex items-center">
+            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-8 h-8 text-gray-400"><path d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
+            <div class="ml-4 text-lg text-gray-600 leading-7 font-semibold"><a href="https://tailwindcss.com/">Tailwind</a></div>
+        </div>
+
+        <div class="ml-12">
+            <div class="mt-2 text-sm text-gray-500">
+                Laravel Jetstream is built with Tailwind, an amazing utility first CSS framework that doesn't get in your way. You'll be amazed how easily you can build and maintain fresh, modern designs with this wonderful framework at your fingertips.
+            </div>
+        </div>
+    </div>
+
+    <div class="p-6 border-t border-gray-200 md:border-l">
+        <div class="flex items-center">
+            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-8 h-8 text-gray-400"><path d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg>
+            <div class="ml-4 text-lg text-gray-600 leading-7 font-semibold">Authentication</div>
+        </div>
+
+        <div class="ml-12">
+            <div class="mt-2 text-sm text-gray-500">
+                Authentication and registration views are included with Laravel Jetstream, as well as support for user email verification and resetting forgotten passwords. So, you're free to get started what matters most: building your application.
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/src/Publish/resources/views/vendor/jetstream/mail/team-invitation.blade.php b/src/Publish/resources/views/vendor/jetstream/mail/team-invitation.blade.php
new file mode 100644
index 0000000..1701212
--- /dev/null
+++ b/src/Publish/resources/views/vendor/jetstream/mail/team-invitation.blade.php
@@ -0,0 +1,23 @@
+@component('mail::message')
+{{ __('You have been invited to join the :team team!', ['team' => $invitation->team->name]) }}
+
+@if (Laravel\Fortify\Features::enabled(Laravel\Fortify\Features::registration()))
+{{ __('If you do not have an account, you may create one by clicking the button below. After creating an account, you may click the invitation acceptance button in this email to accept the team invitation:') }}
+
+@component('mail::button', ['url' => route('register')])
+{{ __('Create Account') }}
+@endcomponent
+
+{{ __('If you already have an account, you may accept this invitation by clicking the button below:') }}
+
+@else
+{{ __('You may accept this invitation by clicking the button below:') }}
+@endif
+
+
+@component('mail::button', ['url' => $acceptUrl])
+{{ __('Accept Invitation') }}
+@endcomponent
+
+{{ __('If you did not expect to receive an invitation to this team, you may discard this email.') }}
+@endcomponent
diff --git a/src/Publish/stubs/nwidart-stubs/assets/js/app.stub b/src/Publish/stubs/nwidart-stubs/assets/js/app.stub
new file mode 100644
index 0000000..e69de29
diff --git a/src/Publish/stubs/nwidart-stubs/assets/sass/app.stub b/src/Publish/stubs/nwidart-stubs/assets/sass/app.stub
new file mode 100644
index 0000000..e69de29
diff --git a/src/Publish/stubs/nwidart-stubs/command.stub b/src/Publish/stubs/nwidart-stubs/command.stub
new file mode 100644
index 0000000..87469de
--- /dev/null
+++ b/src/Publish/stubs/nwidart-stubs/command.stub
@@ -0,0 +1,68 @@
+<?php
+
+namespace $NAMESPACE$;
+
+use Illuminate\Console\Command;
+use Symfony\Component\Console\Input\InputOption;
+use Symfony\Component\Console\Input\InputArgument;
+
+class $CLASS$ extends Command
+{
+    /**
+     * The name and signature of the console command.
+     *
+     * @var string
+     */
+    protected $name = '$COMMAND_NAME$';
+
+    /**
+     * The console command description.
+     *
+     * @var string
+     */
+    protected $description = 'Command description.';
+
+    /**
+     * Create a new command instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        parent::__construct();
+    }
+
+    /**
+     * Execute the console command.
+     *
+     * @return mixed
+     */
+    public function handle()
+    {
+        //
+    }
+
+    /**
+     * Get the console command arguments.
+     *
+     * @return array
+     */
+    protected function getArguments()
+    {
+        return [
+            ['example', InputArgument::REQUIRED, 'An example argument.'],
+        ];
+    }
+
+    /**
+     * Get the console command options.
+     *
+     * @return array
+     */
+    protected function getOptions()
+    {
+        return [
+            ['example', null, InputOption::VALUE_OPTIONAL, 'An example option.', null],
+        ];
+    }
+}
diff --git a/src/Publish/stubs/nwidart-stubs/component-class.stub b/src/Publish/stubs/nwidart-stubs/component-class.stub
new file mode 100644
index 0000000..8926bec
--- /dev/null
+++ b/src/Publish/stubs/nwidart-stubs/component-class.stub
@@ -0,0 +1,28 @@
+<?php
+
+namespace $NAMESPACE$;
+
+use Illuminate\View\Component;
+
+class $CLASS$ extends Component
+{
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\View\View|string
+     */
+    public function render()
+    {
+        return view('$LOWER_NAME$::$COMPONENT_NAME$');
+    }
+}
diff --git a/src/Publish/stubs/nwidart-stubs/component-view.stub b/src/Publish/stubs/nwidart-stubs/component-view.stub
new file mode 100644
index 0000000..c7ab22b
--- /dev/null
+++ b/src/Publish/stubs/nwidart-stubs/component-view.stub
@@ -0,0 +1,3 @@
+<div>
+    <!-- $QUOTE$ -->
+</div>
diff --git a/src/Publish/stubs/nwidart-stubs/composer.stub b/src/Publish/stubs/nwidart-stubs/composer.stub
new file mode 100644
index 0000000..8615cda
--- /dev/null
+++ b/src/Publish/stubs/nwidart-stubs/composer.stub
@@ -0,0 +1,23 @@
+{
+    "name": "$VENDOR$/$LOWER_NAME$",
+    "description": "",
+    "authors": [
+        {
+            "name": "$AUTHOR_NAME$",
+            "email": "$AUTHOR_EMAIL$"
+        }
+    ],
+    "extra": {
+        "laravel": {
+            "providers": [],
+            "aliases": {
+
+            }
+        }
+    },
+    "autoload": {
+        "psr-4": {
+            "$MODULE_NAMESPACE$\\$STUDLY_NAME$\\": ""
+        }
+    }
+}
diff --git a/src/Publish/stubs/nwidart-stubs/controller-api.stub b/src/Publish/stubs/nwidart-stubs/controller-api.stub
new file mode 100644
index 0000000..8cdac7c
--- /dev/null
+++ b/src/Publish/stubs/nwidart-stubs/controller-api.stub
@@ -0,0 +1,60 @@
+<?php
+
+namespace $CLASS_NAMESPACE$;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Response;
+use Illuminate\Routing\Controller;
+
+class $CLASS$ extends Controller
+{
+    /**
+     * Display a listing of the resource.
+     * @return Response
+     */
+    public function index()
+    {
+        //
+    }
+
+    /**
+     * Store a newly created resource in storage.
+     * @param Request $request
+     * @return Response
+     */
+    public function store(Request $request)
+    {
+        //
+    }
+
+    /**
+     * Show the specified resource.
+     * @param int $id
+     * @return Response
+     */
+    public function show($id)
+    {
+        //
+    }
+
+    /**
+     * Update the specified resource in storage.
+     * @param Request $request
+     * @param int $id
+     * @return Response
+     */
+    public function update(Request $request, $id)
+    {
+        //
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     * @param int $id
+     * @return Response
+     */
+    public function destroy($id)
+    {
+        //
+    }
+}
diff --git a/src/Publish/stubs/nwidart-stubs/controller-plain.stub b/src/Publish/stubs/nwidart-stubs/controller-plain.stub
new file mode 100644
index 0000000..662b072
--- /dev/null
+++ b/src/Publish/stubs/nwidart-stubs/controller-plain.stub
@@ -0,0 +1,9 @@
+<?php
+
+namespace $CLASS_NAMESPACE$;
+
+use Illuminate\Routing\Controller;
+
+class $CLASS$ extends Controller
+{
+}
diff --git a/src/Publish/stubs/nwidart-stubs/controller.stub b/src/Publish/stubs/nwidart-stubs/controller.stub
new file mode 100644
index 0000000..30fcff0
--- /dev/null
+++ b/src/Publish/stubs/nwidart-stubs/controller.stub
@@ -0,0 +1,79 @@
+<?php
+
+namespace $CLASS_NAMESPACE$;
+
+use Illuminate\Contracts\Support\Renderable;
+use Illuminate\Http\Request;
+use Illuminate\Routing\Controller;
+
+class $CLASS$ extends Controller
+{
+    /**
+     * Display a listing of the resource.
+     * @return Renderable
+     */
+    public function index()
+    {
+        return view('$LOWER_NAME$::index');
+    }
+
+    /**
+     * Show the form for creating a new resource.
+     * @return Renderable
+     */
+    public function create()
+    {
+        return view('$LOWER_NAME$::create');
+    }
+
+    /**
+     * Store a newly created resource in storage.
+     * @param Request $request
+     * @return Renderable
+     */
+    public function store(Request $request)
+    {
+        //
+    }
+
+    /**
+     * Show the specified resource.
+     * @param int $id
+     * @return Renderable
+     */
+    public function show($id)
+    {
+        return view('$LOWER_NAME$::show');
+    }
+
+    /**
+     * Show the form for editing the specified resource.
+     * @param int $id
+     * @return Renderable
+     */
+    public function edit($id)
+    {
+        return view('$LOWER_NAME$::edit');
+    }
+
+    /**
+     * Update the specified resource in storage.
+     * @param Request $request
+     * @param int $id
+     * @return Renderable
+     */
+    public function update(Request $request, $id)
+    {
+        //
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     * @param int $id
+     * @return Renderable
+     */
+    public function destroy($id)
+    {
+        //
+    }
+}
diff --git a/src/Publish/stubs/nwidart-stubs/event.stub b/src/Publish/stubs/nwidart-stubs/event.stub
new file mode 100644
index 0000000..ad1cb69
--- /dev/null
+++ b/src/Publish/stubs/nwidart-stubs/event.stub
@@ -0,0 +1,30 @@
+<?php
+
+namespace $NAMESPACE$;
+
+use Illuminate\Queue\SerializesModels;
+
+class $CLASS$
+{
+    use SerializesModels;
+
+    /**
+     * Create a new event instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Get the channels the event should be broadcast on.
+     *
+     * @return array
+     */
+    public function broadcastOn()
+    {
+        return [];
+    }
+}
diff --git a/src/Publish/stubs/nwidart-stubs/factory.stub b/src/Publish/stubs/nwidart-stubs/factory.stub
new file mode 100644
index 0000000..a2c39a8
--- /dev/null
+++ b/src/Publish/stubs/nwidart-stubs/factory.stub
@@ -0,0 +1,28 @@
+<?php
+
+namespace $NAMESPACE$;
+
+use Illuminate\Database\Eloquent\Factories\Factory;
+
+class $NAME$Factory extends Factory
+{
+    /**
+     * The name of the factory's corresponding model.
+     *
+     * @var string
+     */
+    protected $model = \$MODEL_NAMESPACE$\$NAME$::class;
+
+    /**
+     * Define the model's default state.
+     *
+     * @return array
+     */
+    public function definition()
+    {
+        return [
+            //
+        ];
+    }
+}
+
diff --git a/src/Publish/stubs/nwidart-stubs/feature-test.stub b/src/Publish/stubs/nwidart-stubs/feature-test.stub
new file mode 100644
index 0000000..f344b5d
--- /dev/null
+++ b/src/Publish/stubs/nwidart-stubs/feature-test.stub
@@ -0,0 +1,22 @@
+<?php
+
+namespace $NAMESPACE$;
+
+use Tests\TestCase;
+use Illuminate\Foundation\Testing\WithFaker;
+use Illuminate\Foundation\Testing\RefreshDatabase;
+
+class $CLASS$ extends TestCase
+{
+    /**
+     * A basic feature test example.
+     *
+     * @return void
+     */
+    public function testExample()
+    {
+        $response = $this->get('/');
+
+        $response->assertStatus(200);
+    }
+}
diff --git a/src/Publish/stubs/nwidart-stubs/job-queued.stub b/src/Publish/stubs/nwidart-stubs/job-queued.stub
new file mode 100644
index 0000000..5bcccf1
--- /dev/null
+++ b/src/Publish/stubs/nwidart-stubs/job-queued.stub
@@ -0,0 +1,34 @@
+<?php
+
+namespace $NAMESPACE$;
+
+use Illuminate\Bus\Queueable;
+use Illuminate\Queue\SerializesModels;
+use Illuminate\Queue\InteractsWithQueue;
+use Illuminate\Contracts\Queue\ShouldQueue;
+use Illuminate\Foundation\Bus\Dispatchable;
+
+class $CLASS$ implements ShouldQueue
+{
+    use Dispatchable, InteractsWithQueue, Queueable, SerializesModels;
+
+    /**
+     * Create a new job instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Execute the job.
+     *
+     * @return void
+     */
+    public function handle()
+    {
+        //
+    }
+}
diff --git a/src/Publish/stubs/nwidart-stubs/job.stub b/src/Publish/stubs/nwidart-stubs/job.stub
new file mode 100644
index 0000000..3a88369
--- /dev/null
+++ b/src/Publish/stubs/nwidart-stubs/job.stub
@@ -0,0 +1,31 @@
+<?php
+
+namespace $NAMESPACE$;
+
+use Illuminate\Bus\Queueable;
+use Illuminate\Foundation\Bus\Dispatchable;
+
+class $CLASS$ implements ShouldQueue
+{
+    use Dispatchable, Queueable;
+
+    /**
+     * Create a new job instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Execute the job.
+     *
+     * @return void
+     */
+    public function handle()
+    {
+        //
+    }
+}
diff --git a/src/Publish/stubs/nwidart-stubs/json.stub b/src/Publish/stubs/nwidart-stubs/json.stub
new file mode 100644
index 0000000..da73552
--- /dev/null
+++ b/src/Publish/stubs/nwidart-stubs/json.stub
@@ -0,0 +1,13 @@
+{
+    "name": "$STUDLY_NAME$",
+    "alias": "$LOWER_NAME$",
+    "description": "",
+    "keywords": [],
+    "priority": 0,
+    "providers": [
+        "$MODULE_NAMESPACE$\\$STUDLY_NAME$\\$PROVIDER_NAMESPACE$\\$STUDLY_NAME$ServiceProvider"
+    ],
+    "aliases": {},
+    "files": [],
+    "requires": []
+}
diff --git a/src/Publish/stubs/nwidart-stubs/listener-duck.stub b/src/Publish/stubs/nwidart-stubs/listener-duck.stub
new file mode 100644
index 0000000..5d700db
--- /dev/null
+++ b/src/Publish/stubs/nwidart-stubs/listener-duck.stub
@@ -0,0 +1,30 @@
+<?php
+
+namespace $NAMESPACE$;
+
+use Illuminate\Queue\InteractsWithQueue;
+use Illuminate\Contracts\Queue\ShouldQueue;
+
+class $CLASS$
+{
+    /**
+     * Create the event listener.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Handle the event.
+     *
+     * @param  object  $event
+     * @return void
+     */
+    public function handle($event)
+    {
+        //
+    }
+}
diff --git a/src/Publish/stubs/nwidart-stubs/listener-queued-duck.stub b/src/Publish/stubs/nwidart-stubs/listener-queued-duck.stub
new file mode 100644
index 0000000..d61c992
--- /dev/null
+++ b/src/Publish/stubs/nwidart-stubs/listener-queued-duck.stub
@@ -0,0 +1,32 @@
+<?php
+
+namespace $NAMESPACE$;
+
+use Illuminate\Queue\InteractsWithQueue;
+use Illuminate\Contracts\Queue\ShouldQueue;
+
+class $CLASS$ implements ShouldQueue
+{
+    use InteractsWithQueue;
+
+    /**
+     * Create the event listener.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Handle the event.
+     *
+     * @param  object  $event
+     * @return void
+     */
+    public function handle($event)
+    {
+        //
+    }
+}
diff --git a/src/Publish/stubs/nwidart-stubs/listener-queued.stub b/src/Publish/stubs/nwidart-stubs/listener-queued.stub
new file mode 100644
index 0000000..f60ddf7
--- /dev/null
+++ b/src/Publish/stubs/nwidart-stubs/listener-queued.stub
@@ -0,0 +1,33 @@
+<?php
+
+namespace $NAMESPACE$;
+
+use $EVENTNAME$;
+use Illuminate\Queue\InteractsWithQueue;
+use Illuminate\Contracts\Queue\ShouldQueue;
+
+class $CLASS$ implements ShouldQueue
+{
+    use InteractsWithQueue;
+
+    /**
+     * Create the event listener.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Handle the event.
+     *
+     * @param  $SHORTEVENTNAME$  $event
+     * @return void
+     */
+    public function handle($SHORTEVENTNAME$ $event)
+    {
+        //
+    }
+}
diff --git a/src/Publish/stubs/nwidart-stubs/listener.stub b/src/Publish/stubs/nwidart-stubs/listener.stub
new file mode 100644
index 0000000..d527516
--- /dev/null
+++ b/src/Publish/stubs/nwidart-stubs/listener.stub
@@ -0,0 +1,31 @@
+<?php
+
+namespace $NAMESPACE$;
+
+use $EVENTNAME$;
+use Illuminate\Queue\InteractsWithQueue;
+use Illuminate\Contracts\Queue\ShouldQueue;
+
+class $CLASS$
+{
+    /**
+     * Create the event listener.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Handle the event.
+     *
+     * @param $SHORTEVENTNAME$ $event
+     * @return void
+     */
+    public function handle($SHORTEVENTNAME$ $event)
+    {
+        //
+    }
+}
diff --git a/src/Publish/stubs/nwidart-stubs/mail.stub b/src/Publish/stubs/nwidart-stubs/mail.stub
new file mode 100644
index 0000000..7e9a47b
--- /dev/null
+++ b/src/Publish/stubs/nwidart-stubs/mail.stub
@@ -0,0 +1,33 @@
+<?php
+
+namespace $NAMESPACE$;
+
+use Illuminate\Bus\Queueable;
+use Illuminate\Mail\Mailable;
+use Illuminate\Queue\SerializesModels;
+use Illuminate\Contracts\Queue\ShouldQueue;
+
+class $CLASS$ extends Mailable
+{
+    use Queueable, SerializesModels;
+
+    /**
+     * Create a new message instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Build the message.
+     *
+     * @return $this
+     */
+    public function build()
+    {
+        return $this->view('view.name');
+    }
+}
diff --git a/src/Publish/stubs/nwidart-stubs/middleware.stub b/src/Publish/stubs/nwidart-stubs/middleware.stub
new file mode 100644
index 0000000..954583e
--- /dev/null
+++ b/src/Publish/stubs/nwidart-stubs/middleware.stub
@@ -0,0 +1,21 @@
+<?php
+
+namespace $NAMESPACE$;
+
+use Closure;
+use Illuminate\Http\Request;
+
+class $CLASS$
+{
+    /**
+     * Handle an incoming request.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @param  \Closure  $next
+     * @return mixed
+     */
+    public function handle(Request $request, Closure $next)
+    {
+        return $next($request);
+    }
+}
diff --git a/src/Publish/stubs/nwidart-stubs/migration/add.stub b/src/Publish/stubs/nwidart-stubs/migration/add.stub
new file mode 100644
index 0000000..4d1e064
--- /dev/null
+++ b/src/Publish/stubs/nwidart-stubs/migration/add.stub
@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('$TABLE$', function (Blueprint $table) {
+$FIELDS_UP$
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('$TABLE$', function (Blueprint $table) {
+$FIELDS_DOWN$
+        });
+    }
+};
diff --git a/src/Publish/stubs/nwidart-stubs/migration/create.stub b/src/Publish/stubs/nwidart-stubs/migration/create.stub
new file mode 100644
index 0000000..c03d510
--- /dev/null
+++ b/src/Publish/stubs/nwidart-stubs/migration/create.stub
@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('$TABLE$', function (Blueprint $table) {
+            $table->id();
+$FIELDS$
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('$TABLE$');
+    }
+};
diff --git a/src/Publish/stubs/nwidart-stubs/migration/delete.stub b/src/Publish/stubs/nwidart-stubs/migration/delete.stub
new file mode 100644
index 0000000..4d1e064
--- /dev/null
+++ b/src/Publish/stubs/nwidart-stubs/migration/delete.stub
@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('$TABLE$', function (Blueprint $table) {
+$FIELDS_UP$
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('$TABLE$', function (Blueprint $table) {
+$FIELDS_DOWN$
+        });
+    }
+};
diff --git a/src/Publish/stubs/nwidart-stubs/migration/drop.stub b/src/Publish/stubs/nwidart-stubs/migration/drop.stub
new file mode 100644
index 0000000..94023ac
--- /dev/null
+++ b/src/Publish/stubs/nwidart-stubs/migration/drop.stub
@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::dropIfExists('$TABLE$');
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::create('$TABLE$', function (Blueprint $table) {
+            $table->bigIncrements('id');
+$FIELDS$
+            $table->timestamps();
+        });
+    }
+};
diff --git a/src/Publish/stubs/nwidart-stubs/migration/plain.stub b/src/Publish/stubs/nwidart-stubs/migration/plain.stub
new file mode 100644
index 0000000..e46b052
--- /dev/null
+++ b/src/Publish/stubs/nwidart-stubs/migration/plain.stub
@@ -0,0 +1,28 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        //
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        //
+    }
+};
diff --git a/src/Publish/stubs/nwidart-stubs/model.stub b/src/Publish/stubs/nwidart-stubs/model.stub
new file mode 100644
index 0000000..b691e5e
--- /dev/null
+++ b/src/Publish/stubs/nwidart-stubs/model.stub
@@ -0,0 +1,18 @@
+<?php
+
+namespace $NAMESPACE$;
+
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+
+class $CLASS$ extends Model
+{
+    use HasFactory;
+
+    protected $fillable = $FILLABLE$;
+    
+    protected static function newFactory()
+    {
+        return \$MODULE_NAMESPACE$\$MODULE$\Database\factories\$NAME$Factory::new();
+    }
+}
diff --git a/src/Publish/stubs/nwidart-stubs/notification.stub b/src/Publish/stubs/nwidart-stubs/notification.stub
new file mode 100644
index 0000000..21aeb87
--- /dev/null
+++ b/src/Publish/stubs/nwidart-stubs/notification.stub
@@ -0,0 +1,61 @@
+<?php
+
+namespace $NAMESPACE$;
+
+use Illuminate\Bus\Queueable;
+use Illuminate\Notifications\Notification;
+use Illuminate\Contracts\Queue\ShouldQueue;
+use Illuminate\Notifications\Messages\MailMessage;
+
+class $CLASS$ extends Notification
+{
+    use Queueable;
+
+    /**
+     * Create a new notification instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Get the notification's delivery channels.
+     *
+     * @param mixed $notifiable
+     * @return array
+     */
+    public function via($notifiable)
+    {
+        return ['mail'];
+    }
+
+    /**
+     * Get the mail representation of the notification.
+     *
+     * @param mixed $notifiable
+     * @return \Illuminate\Notifications\Messages\MailMessage
+     */
+    public function toMail($notifiable)
+    {
+        return (new MailMessage)
+                    ->line('The introduction to the notification.')
+                    ->action('Notification Action', 'https://laravel.com')
+                    ->line('Thank you for using our application!');
+    }
+
+    /**
+     * Get the array representation of the notification.
+     *
+     * @param mixed $notifiable
+     * @return array
+     */
+    public function toArray($notifiable)
+    {
+        return [
+            //
+        ];
+    }
+}
diff --git a/src/Publish/stubs/nwidart-stubs/package.stub b/src/Publish/stubs/nwidart-stubs/package.stub
new file mode 100644
index 0000000..7303146
--- /dev/null
+++ b/src/Publish/stubs/nwidart-stubs/package.stub
@@ -0,0 +1,21 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "npm run development",
+    "development": "mix",
+    "watch": "mix watch",
+    "watch-poll": "mix watch -- --watch-options-poll=1000",
+    "hot": "mix watch --hot",
+    "prod": "npm run production",
+    "production": "mix --production"
+  },
+  "devDependencies": {
+    "axios": "^0.21.4",
+    "dotenv": "^10.0.0",
+    "dotenv-expand": "^5.1.0",
+    "laravel-mix": "^6.0.31",
+    "laravel-mix-merge-manifest": "^2.0.0",
+    "lodash": "^4.17.21",
+    "postcss": "^8.3.7"
+  }
+}
diff --git a/src/Publish/stubs/nwidart-stubs/policy.plain.stub b/src/Publish/stubs/nwidart-stubs/policy.plain.stub
new file mode 100644
index 0000000..02e16df
--- /dev/null
+++ b/src/Publish/stubs/nwidart-stubs/policy.plain.stub
@@ -0,0 +1,20 @@
+<?php
+
+namespace $NAMESPACE$;
+
+use Illuminate\Auth\Access\HandlesAuthorization;
+
+class $CLASS$
+{
+    use HandlesAuthorization;
+
+    /**
+     * Create a new policy instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        //
+    }
+}
diff --git a/src/Publish/stubs/nwidart-stubs/provider.stub b/src/Publish/stubs/nwidart-stubs/provider.stub
new file mode 100644
index 0000000..4e37077
--- /dev/null
+++ b/src/Publish/stubs/nwidart-stubs/provider.stub
@@ -0,0 +1,28 @@
+<?php
+
+namespace $NAMESPACE$;
+
+use Illuminate\Support\ServiceProvider;
+
+class $CLASS$ extends ServiceProvider
+{
+    /**
+     * Register the service provider.
+     *
+     * @return void
+     */
+    public function register()
+    {
+        //
+    }
+
+    /**
+     * Get the services provided by the provider.
+     *
+     * @return array
+     */
+    public function provides()
+    {
+        return [];
+    }
+}
diff --git a/src/Publish/stubs/nwidart-stubs/request.stub b/src/Publish/stubs/nwidart-stubs/request.stub
new file mode 100644
index 0000000..96e0616
--- /dev/null
+++ b/src/Publish/stubs/nwidart-stubs/request.stub
@@ -0,0 +1,30 @@
+<?php
+
+namespace $NAMESPACE$;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class $CLASS$ extends FormRequest
+{
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array
+     */
+    public function rules()
+    {
+        return [
+            //
+        ];
+    }
+
+    /**
+     * Determine if the user is authorized to make this request.
+     *
+     * @return bool
+     */
+    public function authorize()
+    {
+        return true;
+    }
+}
diff --git a/src/Publish/stubs/nwidart-stubs/resource-collection.stub b/src/Publish/stubs/nwidart-stubs/resource-collection.stub
new file mode 100644
index 0000000..c88f43b
--- /dev/null
+++ b/src/Publish/stubs/nwidart-stubs/resource-collection.stub
@@ -0,0 +1,19 @@
+<?php
+
+namespace $NAMESPACE$;
+
+use Illuminate\Http\Resources\Json\ResourceCollection;
+
+class $CLASS$ extends ResourceCollection
+{
+    /**
+     * Transform the resource collection into an array.
+     *
+     * @param  \Illuminate\Http\Request
+     * @return array
+     */
+    public function toArray($request)
+    {
+        return parent::toArray($request);
+    }
+}
diff --git a/src/Publish/stubs/nwidart-stubs/resource.stub b/src/Publish/stubs/nwidart-stubs/resource.stub
new file mode 100644
index 0000000..6a1f183
--- /dev/null
+++ b/src/Publish/stubs/nwidart-stubs/resource.stub
@@ -0,0 +1,19 @@
+<?php
+
+namespace $NAMESPACE$;
+
+use Illuminate\Http\Resources\Json\JsonResource;
+
+class $CLASS$ extends JsonResource
+{
+    /**
+     * Transform the resource into an array.
+     *
+     * @param  \Illuminate\Http\Request
+     * @return array
+     */
+    public function toArray($request)
+    {
+        return parent::toArray($request);
+    }
+}
diff --git a/src/Publish/stubs/nwidart-stubs/route-provider.stub b/src/Publish/stubs/nwidart-stubs/route-provider.stub
new file mode 100644
index 0000000..67f3a6d
--- /dev/null
+++ b/src/Publish/stubs/nwidart-stubs/route-provider.stub
@@ -0,0 +1,69 @@
+<?php
+
+namespace $NAMESPACE$;
+
+use Illuminate\Support\Facades\Route;
+use Illuminate\Foundation\Support\Providers\RouteServiceProvider as ServiceProvider;
+
+class $CLASS$ extends ServiceProvider
+{
+    /**
+     * The module namespace to assume when generating URLs to actions.
+     *
+     * @var string
+     */
+    protected $moduleNamespace = '$MODULE_NAMESPACE$\$MODULE$\$CONTROLLER_NAMESPACE$';
+
+    /**
+     * Called before routes are registered.
+     *
+     * Register any model bindings or pattern based filters.
+     *
+     * @return void
+     */
+    public function boot()
+    {
+        parent::boot();
+    }
+
+    /**
+     * Define the routes for the application.
+     *
+     * @return void
+     */
+    public function map()
+    {
+        $this->mapApiRoutes();
+
+        $this->mapWebRoutes();
+    }
+
+    /**
+     * Define the "web" routes for the application.
+     *
+     * These routes all receive session state, CSRF protection, etc.
+     *
+     * @return void
+     */
+    protected function mapWebRoutes()
+    {
+        Route::middleware('web')
+            ->namespace($this->moduleNamespace)
+            ->group(module_path('$MODULE$', '$WEB_ROUTES_PATH$'));
+    }
+
+    /**
+     * Define the "api" routes for the application.
+     *
+     * These routes are typically stateless.
+     *
+     * @return void
+     */
+    protected function mapApiRoutes()
+    {
+        Route::prefix('api')
+            ->middleware('api')
+            ->namespace($this->moduleNamespace)
+            ->group(module_path('$MODULE$', '$API_ROUTES_PATH$'));
+    }
+}
diff --git a/src/Publish/stubs/nwidart-stubs/routes/api.stub b/src/Publish/stubs/nwidart-stubs/routes/api.stub
new file mode 100644
index 0000000..78681d7
--- /dev/null
+++ b/src/Publish/stubs/nwidart-stubs/routes/api.stub
@@ -0,0 +1,18 @@
+<?php
+
+use Illuminate\Http\Request;
+
+/*
+|--------------------------------------------------------------------------
+| API Routes
+|--------------------------------------------------------------------------
+|
+| Here is where you can register API routes for your application. These
+| routes are loaded by the RouteServiceProvider within a group which
+| is assigned the "api" middleware group. Enjoy building your API!
+|
+*/
+
+Route::middleware('auth:api')->get('/$LOWER_NAME$', function (Request $request) {
+    return $request->user();
+});
\ No newline at end of file
diff --git a/src/Publish/stubs/nwidart-stubs/routes/web.stub b/src/Publish/stubs/nwidart-stubs/routes/web.stub
new file mode 100644
index 0000000..ab7e7f7
--- /dev/null
+++ b/src/Publish/stubs/nwidart-stubs/routes/web.stub
@@ -0,0 +1,16 @@
+<?php
+
+/*
+|--------------------------------------------------------------------------
+| Web Routes
+|--------------------------------------------------------------------------
+|
+| Here is where you can register web routes for your application. These
+| routes are loaded by the RouteServiceProvider within a group which
+| contains the "web" middleware group. Now create something great!
+|
+*/
+
+Route::prefix('$LOWER_NAME$')->group(function() {
+    Route::get('/', '$STUDLY_NAME$Controller@index');
+});
diff --git a/src/Publish/stubs/nwidart-stubs/rule.stub b/src/Publish/stubs/nwidart-stubs/rule.stub
new file mode 100644
index 0000000..9b71632
--- /dev/null
+++ b/src/Publish/stubs/nwidart-stubs/rule.stub
@@ -0,0 +1,40 @@
+<?php
+
+namespace $NAMESPACE$;
+
+use Illuminate\Contracts\Validation\Rule;
+
+class $CLASS$ implements Rule
+{
+    /**
+     * Create a new rule instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Determine if the validation rule passes.
+     *
+     * @param  string  $attribute
+     * @param  mixed  $value
+     * @return bool
+     */
+    public function passes($attribute, $value)
+    {
+        //
+    }
+
+    /**
+     * Get the validation error message.
+     *
+     * @return string
+     */
+    public function message()
+    {
+        return 'The validation error message.';
+    }
+}
diff --git a/src/Publish/stubs/nwidart-stubs/scaffold/config.stub b/src/Publish/stubs/nwidart-stubs/scaffold/config.stub
new file mode 100644
index 0000000..74c3001
--- /dev/null
+++ b/src/Publish/stubs/nwidart-stubs/scaffold/config.stub
@@ -0,0 +1,5 @@
+<?php
+
+return [
+    'name' => '$STUDLY_NAME$'
+];
diff --git a/src/Publish/stubs/nwidart-stubs/scaffold/provider.stub b/src/Publish/stubs/nwidart-stubs/scaffold/provider.stub
new file mode 100644
index 0000000..8dc215a
--- /dev/null
+++ b/src/Publish/stubs/nwidart-stubs/scaffold/provider.stub
@@ -0,0 +1,119 @@
+<?php
+
+namespace $NAMESPACE$;
+
+use Illuminate\Support\ServiceProvider;
+use Illuminate\Database\Eloquent\Factory;
+use Modules\Base\Services\Components\Base\Lang;
+use Modules\Base\Services\Core\VILT;
+
+class $CLASS$ extends ServiceProvider
+{
+    /**
+     * @var string $moduleName
+     */
+    protected $moduleName = '$MODULE$';
+
+    /**
+     * @var string $moduleNameLower
+     */
+    protected $moduleNameLower = '$LOWER_NAME$';
+
+    /**
+     * Boot the application events.
+     *
+     * @return void
+     */
+    public function boot()
+    {
+        $this->registerTranslations();
+        $this->registerConfig();
+        $this->registerViews();
+        $this->loadMigrationsFrom(module_path($this->moduleName, '$MIGRATIONS_PATH$'));
+        VILT::loadResources($this->moduleName);
+        VILT::loadPages($this->moduleName);
+        VILT::registerTranslation(Lang::make('$LOWER_NAME$.sidebar')->label(__('$MODULE$')));
+    }
+
+    /**
+     * Register the service provider.
+     *
+     * @return void
+     */
+    public function register()
+    {
+        $this->app->register(RouteServiceProvider::class);
+    }
+
+    /**
+     * Register config.
+     *
+     * @return void
+     */
+    protected function registerConfig()
+    {
+        $this->publishes([
+            module_path($this->moduleName, '$PATH_CONFIG$/config.php') => config_path($this->moduleNameLower . '.php'),
+        ], 'config');
+        $this->mergeConfigFrom(
+            module_path($this->moduleName, '$PATH_CONFIG$/config.php'), $this->moduleNameLower
+        );
+    }
+
+    /**
+     * Register views.
+     *
+     * @return void
+     */
+    public function registerViews()
+    {
+        $viewPath = resource_path('views/modules/' . $this->moduleNameLower);
+
+        $sourcePath = module_path($this->moduleName, '$PATH_VIEWS$');
+
+        $this->publishes([
+            $sourcePath => $viewPath
+        ], ['views', $this->moduleNameLower . '-module-views']);
+
+        $this->loadViewsFrom(array_merge($this->getPublishableViewPaths(), [$sourcePath]), $this->moduleNameLower);
+    }
+
+    /**
+     * Register translations.
+     *
+     * @return void
+     */
+    public function registerTranslations()
+    {
+        $langPath = resource_path('lang/modules/' . $this->moduleNameLower);
+
+        if (is_dir($langPath)) {
+            $this->loadTranslationsFrom($langPath, $this->moduleNameLower);
+            $this->loadJsonTranslationsFrom($langPath, $this->moduleNameLower);
+        } else {
+            $this->loadTranslationsFrom(module_path($this->moduleName, '$PATH_LANG$'), $this->moduleNameLower);
+            $this->loadJsonTranslationsFrom(module_path($this->moduleName, '$PATH_LANG$'), $this->moduleNameLower);
+        }
+    }
+
+    /**
+     * Get the services provided by the provider.
+     *
+     * @return array
+     */
+    public function provides()
+    {
+        return [];
+    }
+
+    private function getPublishableViewPaths(): array
+    {
+        $paths = [];
+        foreach (\Config::get('view.paths') as $path) {
+            if (is_dir($path . '/modules/' . $this->moduleNameLower)) {
+                $paths[] = $path . '/modules/' . $this->moduleNameLower;
+            }
+        }
+        return $paths;
+    }
+}
diff --git a/src/Publish/stubs/nwidart-stubs/seeder.stub b/src/Publish/stubs/nwidart-stubs/seeder.stub
new file mode 100644
index 0000000..f35057d
--- /dev/null
+++ b/src/Publish/stubs/nwidart-stubs/seeder.stub
@@ -0,0 +1,21 @@
+<?php
+
+namespace $NAMESPACE$;
+
+use Illuminate\Database\Seeder;
+use Illuminate\Database\Eloquent\Model;
+
+class $NAME$ extends Seeder
+{
+    /**
+     * Run the database seeds.
+     *
+     * @return void
+     */
+    public function run()
+    {
+        Model::unguard();
+
+        // $this->call("OthersTableSeeder");
+    }
+}
diff --git a/src/Publish/stubs/nwidart-stubs/unit-test.stub b/src/Publish/stubs/nwidart-stubs/unit-test.stub
new file mode 100644
index 0000000..be0bd55
--- /dev/null
+++ b/src/Publish/stubs/nwidart-stubs/unit-test.stub
@@ -0,0 +1,20 @@
+<?php
+
+namespace $NAMESPACE$;
+
+use Tests\TestCase;
+use Illuminate\Foundation\Testing\WithFaker;
+use Illuminate\Foundation\Testing\RefreshDatabase;
+
+class $CLASS$ extends TestCase
+{
+    /**
+     * A basic unit test example.
+     *
+     * @return void
+     */
+    public function testExample()
+    {
+        $this->assertTrue(true);
+    }
+}
diff --git a/src/Publish/stubs/nwidart-stubs/views/index.stub b/src/Publish/stubs/nwidart-stubs/views/index.stub
new file mode 100644
index 0000000..04b9288
--- /dev/null
+++ b/src/Publish/stubs/nwidart-stubs/views/index.stub
@@ -0,0 +1,9 @@
+@extends('$LOWER_NAME$::layouts.master')
+
+@section('content')
+    <h1>Hello World</h1>
+
+    <p>
+        This view is loaded from module: {!! config('$LOWER_NAME$.name') !!}
+    </p>
+@endsection
diff --git a/src/Publish/stubs/nwidart-stubs/views/master.stub b/src/Publish/stubs/nwidart-stubs/views/master.stub
new file mode 100644
index 0000000..bb09abb
--- /dev/null
+++ b/src/Publish/stubs/nwidart-stubs/views/master.stub
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>Module $STUDLY_NAME$</title>
+
+       {{-- Laravel Mix - CSS File --}}
+       {{-- <link rel="stylesheet" href="{{ mix('css/$LOWER_NAME$.css') }}"> --}}
+
+    </head>
+    <body>
+        @yield('content')
+
+        {{-- Laravel Mix - JS File --}}
+        {{-- <script src="{{ mix('js/$LOWER_NAME$.js') }}"></script> --}}
+    </body>
+</html>
diff --git a/src/Publish/stubs/nwidart-stubs/webpack.stub b/src/Publish/stubs/nwidart-stubs/webpack.stub
new file mode 100644
index 0000000..639a553
--- /dev/null
+++ b/src/Publish/stubs/nwidart-stubs/webpack.stub
@@ -0,0 +1,14 @@
+const dotenvExpand = require('dotenv-expand');
+dotenvExpand(require('dotenv').config({ path: '../../.env'/*, debug: true*/}));
+
+const mix = require('laravel-mix');
+require('laravel-mix-merge-manifest');
+
+mix.setPublicPath('../../public').mergeManifest();
+
+mix.js(__dirname + '/Resources/assets/js/app.js', 'js/$LOWER_NAME$.js')
+    .sass( __dirname + '/Resources/assets/sass/app.scss', 'css/$LOWER_NAME$.css');
+
+if (mix.inProduction()) {
+    mix.version();
+}
diff --git a/src/Publish/tailwind.config.js b/src/Publish/tailwind.config.js
new file mode 100644
index 0000000..c2992be
--- /dev/null
+++ b/src/Publish/tailwind.config.js
@@ -0,0 +1,97 @@
+const plugin = require("tailwindcss/plugin");
+const colors = require("tailwindcss/colors");
+
+module.exports = {
+    content: [
+        "./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php",
+        "./storage/framework/views/*.php",
+        "./resources/views/**/*.blade.php",
+        "./resources/js/**/*.vue",
+        "./Modules/**/Resources/views/**/*.vue",
+        "./Modules/**/Services/Rows/Render/**/*.vue",
+        "./Modules/**/Services/Resource/Render/**/*.vue",
+        './resources/js/**/*.js',
+    ],
+    darkMode: "class", // or 'media' or 'class'
+    theme: {
+
+        asideScrollbars: {
+            light: "light",
+            gray: "gray",
+        },
+        extend: {
+            colors: {
+                main: colors.blue[700],
+                secondary: "#014894",
+                danger: colors.rose,
+                primary: colors.blue,
+                success: colors.green,
+                warning: colors.amber,
+                black: colors.black,
+            },
+            zIndex: {
+                "-1": "-1",
+            },
+            flexGrow: {
+                5: "5",
+            },
+            maxHeight: {
+                "screen-menu": "calc(100vh - 3.5rem)",
+                modal: "calc(100vh - 160px)",
+            },
+            transitionProperty: {
+                position: "right, left, top, bottom, margin, padding",
+                textColor: "color",
+            },
+            keyframes: {
+                "fade-out": {
+                    from: { opacity: 1 },
+                    to: { opacity: 0 },
+                },
+                "fade-in": {
+                    from: { opacity: 0 },
+                    to: { opacity: 1 },
+                },
+            },
+            animation: {
+                "fade-out": "fade-out 250ms ease-in-out",
+                "fade-in": "fade-in 250ms ease-in-out",
+            },
+        },
+    },
+    plugins: [
+        require("@tailwindcss/forms"),
+        plugin(function ({ matchUtilities, theme }) {
+            matchUtilities(
+                {
+                    "aside-scrollbars": (value) => {
+                        const track = value === "light" ? "100" : "900";
+                        const thumb = value === "light" ? "300" : "600";
+                        const color = value === "light" ? "gray" : value;
+
+                        return {
+                            scrollbarWidth: "thin",
+                            scrollbarColor: `${theme(`colors.${color}.${thumb}`)} ${theme(
+                                `colors.${color}.${track}`
+                            )}`,
+                            "&::-webkit-scrollbar": {
+                                width: "8px",
+                                height: "8px",
+                            },
+                            "&::-webkit-scrollbar-track": {
+                                backgroundColor: theme(`colors.${color}.${track}`),
+                            },
+                            "&::-webkit-scrollbar-thumb": {
+                                borderRadius: "0.25rem",
+                                backgroundColor: theme(`colors.${color}.${thumb}`),
+                            },
+                        };
+                    },
+                },
+                { values: theme("asideScrollbars") }
+            );
+        }),
+        require("@tailwindcss/line-clamp"),
+        require("tailwindcss-rtl"),
+    ],
+};
diff --git a/src/Publish/vite.config.js b/src/Publish/vite.config.js
new file mode 100644
index 0000000..c04e506
--- /dev/null
+++ b/src/Publish/vite.config.js
@@ -0,0 +1,63 @@
+import { defineConfig, loadEnv } from "vite";
+import laravel from "laravel-vite-plugin";
+import vue from "@vitejs/plugin-vue";
+import { homedir } from "os";
+import { resolve } from "path";
+import fs from "fs";
+
+export default ({ mode }) => {
+    process.env = Object.assign(process.env, loadEnv(mode, process.cwd(), ''));
+
+    function serverData(host){
+        /*
+        Use only if using laravel-valet to manage server
+         */
+        let keyPath = resolve(homedir(), `.valet/Certificates/${host}.key`);
+        let certificatePath = resolve(homedir(), `.valet/Certificates/${host}.crt`);
+
+        if (!fs.existsSync(keyPath)) {
+            return {};
+        }
+
+        if (!fs.existsSync(certificatePath)) {
+            return {};
+        }
+
+        return {
+            hmr: { host },
+            host,
+            https: {
+                key: fs.readFileSync(keyPath),
+                cert: fs.readFileSync(certificatePath),
+            },
+        };
+    }
+    return defineConfig({
+        resolve:{
+            alias:{
+                '$$' : resolve(__dirname, './Modules/Base/Services/Rows/Render/'),
+                '@@' : resolve(__dirname, './Modules/Base/Services/Resource/Render/'),
+            },
+        },
+        plugins: [
+            laravel(["resources/js/app.js", "resources/css/main.css"]),
+            vue({
+                template: {
+                    transformAssetUrls: {
+                        base: null,
+                        includeAbsolute: false,
+                    },
+                },
+            }),
+        ],
+        css: {
+            postCss: {
+                plugins: {
+                    tailwindcss: {},
+                    autoprefixer: {},
+                },
+            },
+        },
+        server: serverData(process.env.APP_URL.replace('https://',''))
+    });
+}
diff --git a/src/ViltServiceProvider.php b/src/ViltServiceProvider.php
new file mode 100644
index 0000000..cc3d2f2
--- /dev/null
+++ b/src/ViltServiceProvider.php
@@ -0,0 +1,31 @@
+<?php
+
+namespace Queents\Vilt;
+
+use Illuminate\Support\ServiceProvider;
+use Queents\Vilt\Console\InstallVilt;
+
+class ViltServiceProvider extends ServiceProvider
+{
+    /**
+     * Register any application services.
+     *
+     * @return void
+     */
+    public function register()
+    {
+        $this->commands([
+            InstallVilt::class
+        ]);
+    }
+
+    /**
+     * Bootstrap any application services.
+     *
+     * @return void
+     */
+    public function boot()
+    {
+        //
+    }
+}