diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..ddc1631
Binary files /dev/null and b/.DS_Store differ
diff --git a/.gitignore b/.gitignore
index 2d87de2..c5b19de 100644
--- a/.gitignore
+++ b/.gitignore
@@ -23,3 +23,5 @@ yarn-error.log
 /.vscode
 /.zed
 NUL
+storage/.DS_Store
+.DS_Store
diff --git a/.junie/.DS_Store b/.junie/.DS_Store
new file mode 100644
index 0000000..ddc4528
Binary files /dev/null and b/.junie/.DS_Store differ
diff --git a/AGENTS.md b/AGENTS.md
index 8cc5ed2..6340406 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -9,7 +9,7 @@ The Laravel Boost guidelines are specifically curated by Laravel maintainers for
 
 This application is a Laravel application and its main Laravel ecosystems package & versions are below. You are an expert with them all. Ensure you abide by these specific packages & versions.
 
-- php - 8.4.15
+- php - 8.5.0
 - laravel/fortify (FORTIFY) - v1
 - laravel/framework (LARAVEL) - v12
 - laravel/prompts (PROMPTS) - v0
diff --git a/CLAUDE.md b/CLAUDE.md
index 8cc5ed2..6340406 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -9,7 +9,7 @@ The Laravel Boost guidelines are specifically curated by Laravel maintainers for
 
 This application is a Laravel application and its main Laravel ecosystems package & versions are below. You are an expert with them all. Ensure you abide by these specific packages & versions.
 
-- php - 8.4.15
+- php - 8.5.0
 - laravel/fortify (FORTIFY) - v1
 - laravel/framework (LARAVEL) - v12
 - laravel/prompts (PROMPTS) - v0
diff --git a/app/.DS_Store b/app/.DS_Store
new file mode 100644
index 0000000..c735bf9
Binary files /dev/null and b/app/.DS_Store differ
diff --git a/app/Console/Commands/SyncDataCommand.php b/app/Console/Commands/SyncDataCommand.php
new file mode 100644
index 0000000..bc806ef
--- /dev/null
+++ b/app/Console/Commands/SyncDataCommand.php
@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Console\Commands;
+
+use Illuminate\Console\Command;
+
+class SyncDataCommand extends Command
+{
+    protected $signature = 'sync:data';
+
+    protected $description = 'Background sync task (runs via WorkManager)';
+
+    public function handle(): int
+    {
+        logger('sync:data fired at ' . now()->toDateTimeString());
+
+        return self::SUCCESS;
+    }
+}
\ No newline at end of file
diff --git a/app/Jobs/SleepTest.php b/app/Jobs/SleepTest.php
new file mode 100644
index 0000000..1f86a30
--- /dev/null
+++ b/app/Jobs/SleepTest.php
@@ -0,0 +1,29 @@
+<?php
+
+namespace App\Jobs;
+
+use Illuminate\Contracts\Queue\ShouldQueue;
+use Illuminate\Foundation\Queue\Queueable;
+use Native\Mobile\Facades\Dialog;
+
+class SleepTest implements ShouldQueue
+{
+    use Queueable;
+
+    /**
+     * Create a new job instance.
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Execute the job.
+     */
+    public function handle(): void
+    {
+        sleep(3);
+        Dialog::toast('Done sleeping from queue');
+    }
+}
diff --git a/app/NativeComponents/Explore.php b/app/NativeComponents/Explore.php
index eee5980..c35304e 100644
--- a/app/NativeComponents/Explore.php
+++ b/app/NativeComponents/Explore.php
@@ -2,79 +2,30 @@
 
 namespace App\NativeComponents;
 
-use App\Jobs\SleepTest;
-use App\NativeComponents\Concerns\HasListingData;
 use Native\Mobile\Edge\Element;
 use Native\Mobile\Edge\NativeComponent;
-use Native\Mobile\Edge\Transition;
-use Native\Mobile\Facades\Device;
-use Native\Mobile\Facades\Dialog;
 
 class Explore extends NativeComponent
 {
-    use HasListingData;
-
     public int $count = 0;
 
-    public int $selectedCategory = -1;
-
-    /** @var array<int, bool> */
-    public array $wishlisted = [];
-
     public function mount(): void
     {
         nativephp_call('UI.SetBackground', json_encode(['color' => '#FFFFFF']));
     }
 
-    public function selectCategory(int $index): void
-    {
-        $this->selectedCategory = $this->selectedCategory === $index ? -1 : $index;
-    }
-
-    public function toggleWishlist(int $index): void
+    public function increment()
     {
-        if (isset($this->wishlisted[$index])) {
-            unset($this->wishlisted[$index]);
-        } else {
-            $this->wishlisted[$index] = true;
-        }
+        $this->count++;
     }
 
-    public function viewListing(int $index): void
+    public function decrement()
     {
-        $this->navigate($this->route('listing.show', $index))
-            ->transition(Transition::SlideFromRight);
+        $this->count--;
     }
 
     public function render(): Element
     {
-        $allListings = self::listings();
-        $categories = self::categories();
-
-        $selectedName = '';
-        if ($this->selectedCategory >= 0 && isset($categories[$this->selectedCategory])) {
-            $selectedName = $categories[$this->selectedCategory]['name'];
-        }
-
-        $listings = $allListings;
-        if ($selectedName !== '') {
-            $listings = array_values(
-                array_filter($allListings, fn (array $listing): bool => $listing['category'] === $selectedName)
-            );
-        }
-
-        // Map back to original indices for navigation
-        $mappedListings = [];
-        foreach ($listings as $listing) {
-            $originalIndex = array_search($listing['title'], array_column($allListings, 'title'));
-            $listing['isWishlisted'] = isset($this->wishlisted[$originalIndex]);
-            $listing['originalIndex'] = $originalIndex;
-            $mappedListings[] = $listing;
-        }
-
-        return $this->view('explore', [
-            'listings' => $mappedListings,
-            'categories' => $categories,
-        ]);
+        return $this->view('explore');
     }
 }
diff --git a/app/NativeComponents/SkiaShowcase.php b/app/NativeComponents/SkiaShowcase.php
new file mode 100644
index 0000000..aca93cc
--- /dev/null
+++ b/app/NativeComponents/SkiaShowcase.php
@@ -0,0 +1,57 @@
+<?php
+
+namespace App\NativeComponents;
+
+use Native\Mobile\Edge\Element;
+use Native\Mobile\Edge\NativeComponent;
+
+class SkiaShowcase extends NativeComponent
+{
+    public bool $pulseRunning = true;
+    public bool $spinRunning = true;
+    public bool $timerRunning = false;
+    public int $timerSeconds = 30;
+    public int $barAnimRunning = 1;
+    public int $waveRunning = 1;
+
+    public function mount(): void
+    {
+        nativephp_call('UI.SetBackground', json_encode(['color' => '#0f0f1e']));
+    }
+
+    public function togglePulse(): void
+    {
+        $this->pulseRunning = ! $this->pulseRunning;
+    }
+
+    public function toggleSpin(): void
+    {
+        $this->spinRunning = ! $this->spinRunning;
+    }
+
+    public function toggleTimer(): void
+    {
+        $this->timerRunning = ! $this->timerRunning;
+    }
+
+    public function setTimerSeconds(int $seconds): void
+    {
+        $this->timerSeconds = $seconds;
+        $this->timerRunning = false;
+    }
+
+    public function toggleBars(): void
+    {
+        $this->barAnimRunning = $this->barAnimRunning === 1 ? 0 : 1;
+    }
+
+    public function toggleWave(): void
+    {
+        $this->waveRunning = $this->waveRunning === 1 ? 0 : 1;
+    }
+
+    public function render(): Element
+    {
+        return $this->view('skia-showcase');
+    }
+}
\ No newline at end of file
diff --git a/app/Providers/NativeServiceProvider.php b/app/Providers/NativeServiceProvider.php
index a0568be..4fd146e 100644
--- a/app/Providers/NativeServiceProvider.php
+++ b/app/Providers/NativeServiceProvider.php
@@ -34,10 +34,13 @@ public function boot(): void
     public function plugins(): array
     {
         return [
-            \Nativephp\ComposeUi\ComposeUIServiceProvider::class,
+//            \Nativephp\ComposeUi\ComposeUIServiceProvider::class,
             \Native\Mobile\Providers\DialogServiceProvider::class,
             \Native\Mobile\Providers\DeviceServiceProvider::class,
-        
+//            \Native\Mobile\Providers\BackgroundTasksServiceProvider::class,
+//            \Native\Mobile\Providers\TimerServiceProvider::class,
+//            \Native\Mobile\Providers\DebugLogServiceProvider::class,
+//            \NativePhp\SkiaCanvas\SkiaCanvasServiceProvider::class,
         ];
     }
 }
diff --git a/composer.json b/composer.json
index 5be5726..157f0d9 100644
--- a/composer.json
+++ b/composer.json
@@ -9,20 +9,14 @@
     ],
     "repositories": {
 
-        "ui": {
-            "type": "vcs",
-            "url": "https://github.com/NativePHP/compose-ui.git"
-        }
     },
     "license": "MIT",
     "require": {
-        "php": "^8.2",
+        "php": "^8.5",
         "laravel/fortify": "^1.30",
         "laravel/framework": "^12.0",
         "laravel/tinker": "^2.10.1",
-        "livewire/flux": "^2.9.0",
         "livewire/livewire": "^4.0",
-        "nativephp/compose-ui": "*",
         "nativephp/mobile": "dev-element",
         "nativephp/mobile-device": "^1.0",
         "nativephp/mobile-dialog": "^1.0"
diff --git a/composer.lock b/composer.lock
index 4456cf1..ddf251f 100644
--- a/composer.lock
+++ b/composer.lock
@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "bdb93948b6fcb63cb879c61d75632248",
+    "content-hash": "6c375aea0ce9f0900568bfa2c7bdf9f4",
     "packages": [
         {
             "name": "bacon/bacon-qr-code",
@@ -1076,16 +1076,16 @@
         },
         {
             "name": "guzzlehttp/psr7",
-            "version": "2.8.0",
+            "version": "2.9.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/guzzle/psr7.git",
-                "reference": "21dc724a0583619cd1652f673303492272778051"
+                "reference": "7d0ed42f28e42d61352a7a79de682e5e67fec884"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/guzzle/psr7/zipball/21dc724a0583619cd1652f673303492272778051",
-                "reference": "21dc724a0583619cd1652f673303492272778051",
+                "url": "https://api.github.com/repos/guzzle/psr7/zipball/7d0ed42f28e42d61352a7a79de682e5e67fec884",
+                "reference": "7d0ed42f28e42d61352a7a79de682e5e67fec884",
                 "shasum": ""
             },
             "require": {
@@ -1101,6 +1101,7 @@
             "require-dev": {
                 "bamarni/composer-bin-plugin": "^1.8.2",
                 "http-interop/http-factory-tests": "0.9.0",
+                "jshttp/mime-db": "1.54.0.1",
                 "phpunit/phpunit": "^8.5.44 || ^9.6.25"
             },
             "suggest": {
@@ -1172,7 +1173,7 @@
             ],
             "support": {
                 "issues": "https://github.com/guzzle/psr7/issues",
-                "source": "https://github.com/guzzle/psr7/tree/2.8.0"
+                "source": "https://github.com/guzzle/psr7/tree/2.9.0"
             },
             "funding": [
                 {
@@ -1188,7 +1189,7 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2025-08-23T21:21:41+00:00"
+            "time": "2026-03-10T16:41:02+00:00"
         },
         {
             "name": "guzzlehttp/uri-template",
@@ -1278,16 +1279,16 @@
         },
         {
             "name": "laravel/fortify",
-            "version": "v1.35.0",
+            "version": "v1.36.1",
             "source": {
                 "type": "git",
                 "url": "https://github.com/laravel/fortify.git",
-                "reference": "24c5bb81ea4787e0865c4a62f054ed7d1cb7a093"
+                "reference": "cad8bfeb63f6818f173d40090725c565c92651d4"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/laravel/fortify/zipball/24c5bb81ea4787e0865c4a62f054ed7d1cb7a093",
-                "reference": "24c5bb81ea4787e0865c4a62f054ed7d1cb7a093",
+                "url": "https://api.github.com/repos/laravel/fortify/zipball/cad8bfeb63f6818f173d40090725c565c92651d4",
+                "reference": "cad8bfeb63f6818f173d40090725c565c92651d4",
                 "shasum": ""
             },
             "require": {
@@ -1337,20 +1338,20 @@
                 "issues": "https://github.com/laravel/fortify/issues",
                 "source": "https://github.com/laravel/fortify"
             },
-            "time": "2026-02-24T14:00:44+00:00"
+            "time": "2026-03-10T19:59:49+00:00"
         },
         {
             "name": "laravel/framework",
-            "version": "v12.53.0",
+            "version": "v12.54.1",
             "source": {
                 "type": "git",
                 "url": "https://github.com/laravel/framework.git",
-                "reference": "f57f035c0d34503d9ff30be76159bb35a003cd1f"
+                "reference": "325497463e7599cd14224c422c6e5dd2fe832868"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/laravel/framework/zipball/f57f035c0d34503d9ff30be76159bb35a003cd1f",
-                "reference": "f57f035c0d34503d9ff30be76159bb35a003cd1f",
+                "url": "https://api.github.com/repos/laravel/framework/zipball/325497463e7599cd14224c422c6e5dd2fe832868",
+                "reference": "325497463e7599cd14224c422c6e5dd2fe832868",
                 "shasum": ""
             },
             "require": {
@@ -1371,7 +1372,7 @@
                 "guzzlehttp/uri-template": "^1.0",
                 "laravel/prompts": "^0.3.0",
                 "laravel/serializable-closure": "^1.3|^2.0",
-                "league/commonmark": "^2.7",
+                "league/commonmark": "^2.8.1",
                 "league/flysystem": "^3.25.1",
                 "league/flysystem-local": "^3.25.1",
                 "league/uri": "^7.5.1",
@@ -1559,20 +1560,20 @@
                 "issues": "https://github.com/laravel/framework/issues",
                 "source": "https://github.com/laravel/framework"
             },
-            "time": "2026-02-24T14:35:15+00:00"
+            "time": "2026-03-10T20:25:56+00:00"
         },
         {
             "name": "laravel/prompts",
-            "version": "v0.3.13",
+            "version": "v0.3.14",
             "source": {
                 "type": "git",
                 "url": "https://github.com/laravel/prompts.git",
-                "reference": "ed8c466571b37e977532fb2fd3c272c784d7050d"
+                "reference": "9f0e371244eedfe2ebeaa72c79c54bb5df6e0176"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/laravel/prompts/zipball/ed8c466571b37e977532fb2fd3c272c784d7050d",
-                "reference": "ed8c466571b37e977532fb2fd3c272c784d7050d",
+                "url": "https://api.github.com/repos/laravel/prompts/zipball/9f0e371244eedfe2ebeaa72c79c54bb5df6e0176",
+                "reference": "9f0e371244eedfe2ebeaa72c79c54bb5df6e0176",
                 "shasum": ""
             },
             "require": {
@@ -1616,9 +1617,9 @@
             "description": "Add beautiful and user-friendly forms to your command-line applications.",
             "support": {
                 "issues": "https://github.com/laravel/prompts/issues",
-                "source": "https://github.com/laravel/prompts/tree/v0.3.13"
+                "source": "https://github.com/laravel/prompts/tree/v0.3.14"
             },
-            "time": "2026-02-06T12:17:10+00:00"
+            "time": "2026-03-01T09:02:38+00:00"
         },
         {
             "name": "laravel/serializable-closure",
@@ -2306,72 +2307,6 @@
             ],
             "time": "2026-01-15T06:54:53+00:00"
         },
-        {
-            "name": "livewire/flux",
-            "version": "v2.13.0",
-            "source": {
-                "type": "git",
-                "url": "https://github.com/livewire/flux.git",
-                "reference": "741be2d4526e90b97c7a59e079a2f27ecdce2461"
-            },
-            "dist": {
-                "type": "zip",
-                "url": "https://api.github.com/repos/livewire/flux/zipball/741be2d4526e90b97c7a59e079a2f27ecdce2461",
-                "reference": "741be2d4526e90b97c7a59e079a2f27ecdce2461",
-                "shasum": ""
-            },
-            "require": {
-                "illuminate/console": "^10.0|^11.0|^12.0|^13.0",
-                "illuminate/support": "^10.0|^11.0|^12.0|^13.0",
-                "illuminate/view": "^10.0|^11.0|^12.0|^13.0",
-                "laravel/prompts": "^0.1|^0.2|^0.3",
-                "livewire/livewire": "^3.7.4|^4.0",
-                "php": "^8.1",
-                "symfony/console": "^6.0|^7.0|^8.0"
-            },
-            "conflict": {
-                "livewire/blaze": "<1.0.0-beta.2"
-            },
-            "type": "library",
-            "extra": {
-                "laravel": {
-                    "aliases": {
-                        "Flux": "Flux\\Flux"
-                    },
-                    "providers": [
-                        "Flux\\FluxServiceProvider"
-                    ]
-                }
-            },
-            "autoload": {
-                "psr-4": {
-                    "Flux\\": "src/"
-                }
-            },
-            "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "proprietary"
-            ],
-            "authors": [
-                {
-                    "name": "Caleb Porzio",
-                    "email": "calebporzio@gmail.com"
-                }
-            ],
-            "description": "The official UI component library for Livewire.",
-            "keywords": [
-                "components",
-                "flux",
-                "laravel",
-                "livewire",
-                "ui"
-            ],
-            "support": {
-                "issues": "https://github.com/livewire/flux/issues",
-                "source": "https://github.com/livewire/flux/tree/v2.13.0"
-            },
-            "time": "2026-03-03T03:32:35+00:00"
-        },
         {
             "name": "livewire/livewire",
             "version": "v4.2.1",
@@ -2551,77 +2486,18 @@
             ],
             "time": "2026-01-02T08:56:05+00:00"
         },
-        {
-            "name": "nativephp/compose-ui",
-            "version": "dev-main",
-            "source": {
-                "type": "git",
-                "url": "https://github.com/NativePHP/compose-ui.git",
-                "reference": "a856b51c50e15ebec3d6b3ee40e58de3a27cbad3"
-            },
-            "dist": {
-                "type": "zip",
-                "url": "https://api.github.com/repos/NativePHP/compose-ui/zipball/a856b51c50e15ebec3d6b3ee40e58de3a27cbad3",
-                "reference": "a856b51c50e15ebec3d6b3ee40e58de3a27cbad3",
-                "shasum": ""
-            },
-            "require": {
-                "nativephp/mobile": "*",
-                "php": "^8.2"
-            },
-            "require-dev": {
-                "pestphp/pest": "^3.0"
-            },
-            "default-branch": true,
-            "type": "nativephp-ui-plugin",
-            "extra": {
-                "laravel": {
-                    "providers": [
-                        "Nativephp\\ComposeUi\\ComposeUIServiceProvider"
-                    ]
-                },
-                "nativephp": {
-                    "manifest": "nativephp.json"
-                }
-            },
-            "autoload": {
-                "psr-4": {
-                    "Nativephp\\ComposeUi\\": "src/"
-                }
-            },
-            "scripts": {
-                "test": [
-                    "pest"
-                ]
-            },
-            "license": [
-                "MIT"
-            ],
-            "authors": [
-                {
-                    "name": "Your Name",
-                    "email": "you@example.com"
-                }
-            ],
-            "description": "A NativePHP Mobile plugin",
-            "support": {
-                "source": "https://github.com/NativePHP/compose-ui/tree/main",
-                "issues": "https://github.com/NativePHP/compose-ui/issues"
-            },
-            "time": "2026-03-07T17:22:32+00:00"
-        },
         {
             "name": "nativephp/mobile",
             "version": "dev-element",
             "source": {
                 "type": "git",
                 "url": "https://github.com/NativePHP/mobile-air.git",
-                "reference": "d99b6799cd9238d7655df654071d8bbccb72c890"
+                "reference": "8b28b68ae4f5ac9de66b7355adac9140cf0b7529"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/NativePHP/mobile-air/zipball/d99b6799cd9238d7655df654071d8bbccb72c890",
-                "reference": "d99b6799cd9238d7655df654071d8bbccb72c890",
+                "url": "https://api.github.com/repos/NativePHP/mobile-air/zipball/8b28b68ae4f5ac9de66b7355adac9140cf0b7529",
+                "reference": "8b28b68ae4f5ac9de66b7355adac9140cf0b7529",
                 "shasum": ""
             },
             "require": {
@@ -2691,20 +2567,20 @@
                 "issues": "https://github.com/NativePHP/mobile-air/issues",
                 "source": "https://github.com/NativePHP/mobile-air/tree/element"
             },
-            "time": "2026-03-07T18:39:24+00:00"
+            "time": "2026-03-12T18:30:28+00:00"
         },
         {
             "name": "nativephp/mobile-device",
-            "version": "1.0.0",
+            "version": "1.0.1",
             "source": {
                 "type": "git",
                 "url": "https://github.com/NativePHP/mobile-device.git",
-                "reference": "51e27e978843a082ac02c88ac59a84dfbe667660"
+                "reference": "91f569fdc903961f06776e865b856369660de4c6"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/NativePHP/mobile-device/zipball/51e27e978843a082ac02c88ac59a84dfbe667660",
-                "reference": "51e27e978843a082ac02c88ac59a84dfbe667660",
+                "url": "https://api.github.com/repos/NativePHP/mobile-device/zipball/91f569fdc903961f06776e865b856369660de4c6",
+                "reference": "91f569fdc903961f06776e865b856369660de4c6",
                 "shasum": ""
             },
             "require": {
@@ -2734,9 +2610,9 @@
             "description": "Device hardware operations for NativePHP Mobile",
             "support": {
                 "issues": "https://github.com/NativePHP/mobile-device/issues",
-                "source": "https://github.com/NativePHP/mobile-device/tree/1.0.0"
+                "source": "https://github.com/NativePHP/mobile-device/tree/1.0.1"
             },
-            "time": "2026-01-19T23:53:05+00:00"
+            "time": "2026-03-12T22:12:09+00:00"
         },
         {
             "name": "nativephp/mobile-dialog",
@@ -2791,16 +2667,16 @@
         },
         {
             "name": "nesbot/carbon",
-            "version": "3.11.1",
+            "version": "3.11.3",
             "source": {
                 "type": "git",
                 "url": "https://github.com/CarbonPHP/carbon.git",
-                "reference": "f438fcc98f92babee98381d399c65336f3a3827f"
+                "reference": "6a7e652845bb018c668220c2a545aded8594fbbf"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/CarbonPHP/carbon/zipball/f438fcc98f92babee98381d399c65336f3a3827f",
-                "reference": "f438fcc98f92babee98381d399c65336f3a3827f",
+                "url": "https://api.github.com/repos/CarbonPHP/carbon/zipball/6a7e652845bb018c668220c2a545aded8594fbbf",
+                "reference": "6a7e652845bb018c668220c2a545aded8594fbbf",
                 "shasum": ""
             },
             "require": {
@@ -2892,7 +2768,7 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2026-01-29T09:26:29+00:00"
+            "time": "2026-03-11T17:23:39+00:00"
         },
         {
             "name": "nette/schema",
@@ -7736,16 +7612,16 @@
         },
         {
             "name": "laravel/boost",
-            "version": "v2.2.3",
+            "version": "v2.3.1",
             "source": {
                 "type": "git",
                 "url": "https://github.com/laravel/boost.git",
-                "reference": "44ab65a5455c2d6fceb71d6145f8d5d89c02d889"
+                "reference": "ba0a9e6497398b6ce8243f5517b67d6761509150"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/laravel/boost/zipball/44ab65a5455c2d6fceb71d6145f8d5d89c02d889",
-                "reference": "44ab65a5455c2d6fceb71d6145f8d5d89c02d889",
+                "url": "https://api.github.com/repos/laravel/boost/zipball/ba0a9e6497398b6ce8243f5517b67d6761509150",
+                "reference": "ba0a9e6497398b6ce8243f5517b67d6761509150",
                 "shasum": ""
             },
             "require": {
@@ -7798,20 +7674,20 @@
                 "issues": "https://github.com/laravel/boost/issues",
                 "source": "https://github.com/laravel/boost"
             },
-            "time": "2026-03-06T20:20:28+00:00"
+            "time": "2026-03-12T09:06:47+00:00"
         },
         {
             "name": "laravel/mcp",
-            "version": "v0.6.0",
+            "version": "v0.6.2",
             "source": {
                 "type": "git",
                 "url": "https://github.com/laravel/mcp.git",
-                "reference": "28860a10ca0cc5433e25d897ba7af844e6c7b6a2"
+                "reference": "f696e44735b95ff275392eab8ce5a3b4b42a2223"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/laravel/mcp/zipball/28860a10ca0cc5433e25d897ba7af844e6c7b6a2",
-                "reference": "28860a10ca0cc5433e25d897ba7af844e6c7b6a2",
+                "url": "https://api.github.com/repos/laravel/mcp/zipball/f696e44735b95ff275392eab8ce5a3b4b42a2223",
+                "reference": "f696e44735b95ff275392eab8ce5a3b4b42a2223",
                 "shasum": ""
             },
             "require": {
@@ -7871,7 +7747,7 @@
                 "issues": "https://github.com/laravel/mcp/issues",
                 "source": "https://github.com/laravel/mcp"
             },
-            "time": "2026-02-24T08:43:06+00:00"
+            "time": "2026-03-10T20:00:23+00:00"
         },
         {
             "name": "laravel/pail",
@@ -7955,16 +7831,16 @@
         },
         {
             "name": "laravel/pint",
-            "version": "v1.27.1",
+            "version": "v1.29.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/laravel/pint.git",
-                "reference": "54cca2de13790570c7b6f0f94f37896bee4abcb5"
+                "reference": "bdec963f53172c5e36330f3a400604c69bf02d39"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/laravel/pint/zipball/54cca2de13790570c7b6f0f94f37896bee4abcb5",
-                "reference": "54cca2de13790570c7b6f0f94f37896bee4abcb5",
+                "url": "https://api.github.com/repos/laravel/pint/zipball/bdec963f53172c5e36330f3a400604c69bf02d39",
+                "reference": "bdec963f53172c5e36330f3a400604c69bf02d39",
                 "shasum": ""
             },
             "require": {
@@ -7975,13 +7851,14 @@
                 "php": "^8.2.0"
             },
             "require-dev": {
-                "friendsofphp/php-cs-fixer": "^3.93.1",
-                "illuminate/view": "^12.51.0",
-                "larastan/larastan": "^3.9.2",
+                "friendsofphp/php-cs-fixer": "^3.94.2",
+                "illuminate/view": "^12.54.1",
+                "larastan/larastan": "^3.9.3",
                 "laravel-zero/framework": "^12.0.5",
                 "mockery/mockery": "^1.6.12",
-                "nunomaduro/termwind": "^2.3.3",
-                "pestphp/pest": "^3.8.5"
+                "nunomaduro/termwind": "^2.4.0",
+                "pestphp/pest": "^3.8.6",
+                "shipfastlabs/agent-detector": "^1.1.0"
             },
             "bin": [
                 "builds/pint"
@@ -8018,7 +7895,7 @@
                 "issues": "https://github.com/laravel/pint/issues",
                 "source": "https://github.com/laravel/pint"
             },
-            "time": "2026-02-10T20:00:20+00:00"
+            "time": "2026-03-12T15:51:39+00:00"
         },
         {
             "name": "laravel/roster",
@@ -8385,21 +8262,21 @@
         },
         {
             "name": "pestphp/pest",
-            "version": "v4.4.1",
+            "version": "v4.4.2",
             "source": {
                 "type": "git",
                 "url": "https://github.com/pestphp/pest.git",
-                "reference": "f96a1b27864b585b0b29b0ee7331176726f7e54a"
+                "reference": "5d42e8fe3ae1d9fdf7c9f73ee88138fd30265701"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/pestphp/pest/zipball/f96a1b27864b585b0b29b0ee7331176726f7e54a",
-                "reference": "f96a1b27864b585b0b29b0ee7331176726f7e54a",
+                "url": "https://api.github.com/repos/pestphp/pest/zipball/5d42e8fe3ae1d9fdf7c9f73ee88138fd30265701",
+                "reference": "5d42e8fe3ae1d9fdf7c9f73ee88138fd30265701",
                 "shasum": ""
             },
             "require": {
                 "brianium/paratest": "^7.19.0",
-                "nunomaduro/collision": "^8.9.0",
+                "nunomaduro/collision": "^8.9.1",
                 "nunomaduro/termwind": "^2.4.0",
                 "pestphp/pest-plugin": "^4.0.0",
                 "pestphp/pest-plugin-arch": "^4.0.0",
@@ -8419,7 +8296,7 @@
                 "pestphp/pest-dev-tools": "^4.1.0",
                 "pestphp/pest-plugin-browser": "^4.3.0",
                 "pestphp/pest-plugin-type-coverage": "^4.0.3",
-                "psy/psysh": "^0.12.20"
+                "psy/psysh": "^0.12.21"
             },
             "bin": [
                 "bin/pest"
@@ -8485,7 +8362,7 @@
             ],
             "support": {
                 "issues": "https://github.com/pestphp/pest/issues",
-                "source": "https://github.com/pestphp/pest/tree/v4.4.1"
+                "source": "https://github.com/pestphp/pest/tree/v4.4.2"
             },
             "funding": [
                 {
@@ -8497,7 +8374,7 @@
                     "type": "github"
                 }
             ],
-            "time": "2026-02-17T15:27:18+00:00"
+            "time": "2026-03-10T21:09:12+00:00"
         },
         {
             "name": "pestphp/pest-plugin",
@@ -10842,7 +10719,7 @@
     "prefer-stable": true,
     "prefer-lowest": false,
     "platform": {
-        "php": "^8.2"
+        "php": "^8.5"
     },
     "platform-dev": {},
     "plugin-api-version": "2.9.0"
diff --git a/database/.DS_Store b/database/.DS_Store
new file mode 100644
index 0000000..b9e6e8e
Binary files /dev/null and b/database/.DS_Store differ
diff --git a/resources/.DS_Store b/resources/.DS_Store
new file mode 100644
index 0000000..3d29c97
Binary files /dev/null and b/resources/.DS_Store differ
diff --git a/resources/views/native/demo.blade.php b/resources/views/native/demo.blade.php
index 87d2c5c..67ad475 100644
--- a/resources/views/native/demo.blade.php
+++ b/resources/views/native/demo.blade.php
@@ -13,14 +13,16 @@
 @endphp
 
 @include('native.partials.demo-nav', ['title' => 'Component Demo'])
-<native:scroll-view class="w-full h-full" :bg="$bg">
+<native:scroll-view class="w-full h-full"   :bg="$bg">
     <native:column class="w-full gap-0 safe-area">
 
         {{-- Header --}}
         <native:column class="w-full px-6  pb-3 gap-2 items-center">
-            <native:text class="text-3xl font-extrabold text-center" :color="$accentText">EDGE Component Demo
+            <native:text class="text-3xl font-extrabold text-center" :color="$accentText">
+                EDGE Component Demo
             </native:text>
-            <native:text class="text-base text-center" :color="$muted">Every native UI element rendered from PHP
+            <native:text class="text-base text-center" :color="$muted">
+                Every native UI element rendered from PHP
             </native:text>
         </native:column>
 
@@ -188,7 +190,7 @@
                 <native:toggle :value="$darkMode" @change="toggleDark"/>
             </native:row>
             <native:row class="w-full justify-between items-center">
-                <native:text class="text-lg" :color="$fg">First time in NY?</native:text>
+                <native:text class="text-lg" :color="$fg">Prompt for bio</native:text>
                 <native:toggle :value="$notifications" @change="makeAlert"/>
             </native:row>
             <native:row class="w-full justify-between items-center">
diff --git a/resources/views/native/explore.blade.php b/resources/views/native/explore.blade.php
index 5627a69..2d8e121 100644
--- a/resources/views/native/explore.blade.php
+++ b/resources/views/native/explore.blade.php
@@ -1,123 +1,1184 @@
-@include('native.partials.demo-nav', ['title' => 'AirBNB'])
 
-<native:scroll-view class="w-full h-full bg-white">
-    <native:column class="w-full gap-0 ">
+{{--<native:column class="w-full h-full bg-white dark:bg-zinc-800">--}}
+    <native:scroll-view class="flex-1 w-full bg-white dark:bg-zinc-800">
+    <native:column class="flex-1 p-5 gap-5 safe-area">
 
+        {{-- ============================================= --}}
+        {{-- HEADER --}}
+        {{-- ============================================= --}}
+        <native:column class="gap-1">
+            <native:text class="text-4xl font-extrabold dark:text-gray-100">UI Kitchen Sink</native:text>
+            <native:text class="text-sm text-gray-400 dark:text-gray-500">Every core primitive, styled to the nines</native:text>
+        </native:column>
+
+        <native:divider />
+
+        {{-- ============================================= --}}
+        {{-- TYPOGRAPHY --}}
+        {{-- ============================================= --}}
+        <native:text class="text-lg font-semibold text-gray-700 dark:text-gray-300">Typography</native:text>
+        <native:column class="w-full gap-2">
+            <native:text class="text-xs text-gray-500 dark:text-gray-400">text-xs (12pt) — The quick brown fox</native:text>
+            <native:text class="text-sm text-gray-600 dark:text-gray-400">text-sm (14pt) — The quick brown fox</native:text>
+            <native:text class="text-base text-gray-700 dark:text-gray-300">text-base (16pt) — The quick brown fox</native:text>
+            <native:text class="text-lg text-gray-800 dark:text-gray-200">text-lg (18pt) — The quick brown fox</native:text>
+            <native:text class="text-xl text-gray-900 dark:text-gray-100">text-xl (20pt) — The quick brown fox</native:text>
+            <native:text class="text-2xl font-bold text-black dark:text-gray-100">text-2xl bold</native:text>
+            <native:text class="text-3xl font-extrabold text-black dark:text-gray-100">text-3xl extrabold</native:text>
+        </native:column>
+
+        <native:column class="w-full gap-1 mt-2">
+            <native:text class="font-thin text-base dark:text-gray-100">font-thin</native:text>
+            <native:text class="font-light text-base dark:text-gray-100">font-light</native:text>
+            <native:text class="font-normal text-base dark:text-gray-100">font-normal</native:text>
+            <native:text class="font-medium text-base dark:text-gray-100">font-medium</native:text>
+            <native:text class="font-semibold text-base dark:text-gray-100">font-semibold</native:text>
+            <native:text class="font-bold text-base dark:text-gray-100">font-bold</native:text>
+            <native:text class="font-extrabold text-base dark:text-gray-100">font-extrabold</native:text>
+        </native:column>
+
+        <native:column class="w-full gap-1 mt-2">
+            <native:text class="text-base text-left w-full dark:text-gray-100">text-left aligned</native:text>
+            <native:text class="text-base text-center w-full dark:text-gray-100">text-center aligned</native:text>
+            <native:text class="text-base text-right w-full dark:text-gray-100">text-right aligned</native:text>
+        </native:column>
+
+        <native:divider />
+
+        {{-- ============================================= --}}
+        {{-- ALL TAILWIND COLORS --}}
+        {{-- ============================================= --}}
+        <native:text class="text-lg font-semibold text-gray-700 dark:text-gray-300">All Tailwind Colors</native:text>
+
+        {{-- Slate --}}
+        <native:text class="text-xs text-gray-500 dark:text-gray-400">Slate</native:text>
+        <native:row class="w-full gap-1">
+            <native:column class="flex-1 h-[32] rounded-sm bg-slate-100" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-slate-200" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-slate-300" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-slate-400" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-slate-500" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-slate-600" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-slate-700" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-slate-800" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-slate-900" />
+        </native:row>
+
+        {{-- Gray --}}
+        <native:text class="text-xs text-gray-500 dark:text-gray-400">Gray</native:text>
+        <native:row class="w-full gap-1">
+            <native:column class="flex-1 h-[32] rounded-sm bg-gray-100" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-gray-200" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-gray-300" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-gray-400" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-gray-500" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-gray-600" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-gray-700" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-gray-800" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-gray-900" />
+        </native:row>
+
+        {{-- Zinc --}}
+        <native:text class="text-xs text-gray-500 dark:text-gray-400">Zinc</native:text>
+        <native:row class="w-full gap-1">
+            <native:column class="flex-1 h-[32] rounded-sm bg-zinc-100" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-zinc-200" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-zinc-300" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-zinc-400" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-zinc-500" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-zinc-600" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-zinc-700" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-zinc-800" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-zinc-900" />
+        </native:row>
+
+        {{-- Neutral --}}
+        <native:text class="text-xs text-gray-500 dark:text-gray-400">Neutral</native:text>
+        <native:row class="w-full gap-1">
+            <native:column class="flex-1 h-[32] rounded-sm bg-neutral-100" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-neutral-200" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-neutral-300" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-neutral-400" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-neutral-500" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-neutral-600" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-neutral-700" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-neutral-800" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-neutral-900" />
+        </native:row>
+
+        {{-- Stone --}}
+        <native:text class="text-xs text-gray-500 dark:text-gray-400">Stone</native:text>
+        <native:row class="w-full gap-1">
+            <native:column class="flex-1 h-[32] rounded-sm bg-stone-100" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-stone-200" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-stone-300" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-stone-400" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-stone-500" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-stone-600" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-stone-700" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-stone-800" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-stone-900" />
+        </native:row>
+
+        {{-- Red --}}
+        <native:text class="text-xs text-gray-500 dark:text-gray-400">Red</native:text>
+        <native:row class="w-full gap-1">
+            <native:column class="flex-1 h-[32] rounded-sm bg-red-100" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-red-200" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-red-300" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-red-400" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-red-500" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-red-600" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-red-700" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-red-800" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-red-900" />
+        </native:row>
+
+        {{-- Orange --}}
+        <native:text class="text-xs text-gray-500 dark:text-gray-400">Orange</native:text>
+        <native:row class="w-full gap-1">
+            <native:column class="flex-1 h-[32] rounded-sm bg-orange-100" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-orange-200" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-orange-300" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-orange-400" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-orange-500" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-orange-600" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-orange-700" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-orange-800" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-orange-900" />
+        </native:row>
+
+        {{-- Amber --}}
+        <native:text class="text-xs text-gray-500 dark:text-gray-400">Amber</native:text>
+        <native:row class="w-full gap-1">
+            <native:column class="flex-1 h-[32] rounded-sm bg-amber-100" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-amber-200" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-amber-300" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-amber-400" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-amber-500" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-amber-600" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-amber-700" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-amber-800" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-amber-900" />
+        </native:row>
+
+        {{-- Yellow --}}
+        <native:text class="text-xs text-gray-500 dark:text-gray-400">Yellow</native:text>
+        <native:row class="w-full gap-1">
+            <native:column class="flex-1 h-[32] rounded-sm bg-yellow-100" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-yellow-200" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-yellow-300" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-yellow-400" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-yellow-500" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-yellow-600" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-yellow-700" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-yellow-800" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-yellow-900" />
+        </native:row>
+
+        {{-- Lime --}}
+        <native:text class="text-xs text-gray-500 dark:text-gray-400">Lime</native:text>
+        <native:row class="w-full gap-1">
+            <native:column class="flex-1 h-[32] rounded-sm bg-lime-100" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-lime-200" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-lime-300" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-lime-400" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-lime-500" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-lime-600" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-lime-700" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-lime-800" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-lime-900" />
+        </native:row>
+
+        {{-- Green --}}
+        <native:text class="text-xs text-gray-500 dark:text-gray-400">Green</native:text>
+        <native:row class="w-full gap-1">
+            <native:column class="flex-1 h-[32] rounded-sm bg-green-100" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-green-200" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-green-300" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-green-400" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-green-500" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-green-600" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-green-700" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-green-800" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-green-900" />
+        </native:row>
+
+        {{-- Emerald --}}
+        <native:text class="text-xs text-gray-500 dark:text-gray-400">Emerald</native:text>
+        <native:row class="w-full gap-1">
+            <native:column class="flex-1 h-[32] rounded-sm bg-emerald-100" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-emerald-200" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-emerald-300" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-emerald-400" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-emerald-500" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-emerald-600" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-emerald-700" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-emerald-800" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-emerald-900" />
+        </native:row>
+
+        {{-- Teal --}}
+        <native:text class="text-xs text-gray-500 dark:text-gray-400">Teal</native:text>
+        <native:row class="w-full gap-1">
+            <native:column class="flex-1 h-[32] rounded-sm bg-teal-100" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-teal-200" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-teal-300" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-teal-400" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-teal-500" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-teal-600" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-teal-700" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-teal-800" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-teal-900" />
+        </native:row>
+
+        {{-- Cyan --}}
+        <native:text class="text-xs text-gray-500 dark:text-gray-400">Cyan</native:text>
+        <native:row class="w-full gap-1">
+            <native:column class="flex-1 h-[32] rounded-sm bg-cyan-100" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-cyan-200" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-cyan-300" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-cyan-400" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-cyan-500" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-cyan-600" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-cyan-700" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-cyan-800" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-cyan-900" />
+        </native:row>
+
+        {{-- Sky --}}
+        <native:text class="text-xs text-gray-500 dark:text-gray-400">Sky</native:text>
+        <native:row class="w-full gap-1">
+            <native:column class="flex-1 h-[32] rounded-sm bg-sky-100" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-sky-200" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-sky-300" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-sky-400" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-sky-500" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-sky-600" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-sky-700" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-sky-800" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-sky-900" />
+        </native:row>
+
+        {{-- Blue --}}
+        <native:text class="text-xs text-gray-500 dark:text-gray-400">Blue</native:text>
+        <native:row class="w-full gap-1">
+            <native:column class="flex-1 h-[32] rounded-sm bg-blue-100" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-blue-200" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-blue-300" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-blue-400" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-blue-500" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-blue-600" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-blue-700" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-blue-800" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-blue-900" />
+        </native:row>
+
+        {{-- Indigo --}}
+        <native:text class="text-xs text-gray-500 dark:text-gray-400">Indigo</native:text>
+        <native:row class="w-full gap-1">
+            <native:column class="flex-1 h-[32] rounded-sm bg-indigo-100" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-indigo-200" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-indigo-300" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-indigo-400" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-indigo-500" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-indigo-600" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-indigo-700" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-indigo-800" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-indigo-900" />
+        </native:row>
+
+        {{-- Violet --}}
+        <native:text class="text-xs text-gray-500 dark:text-gray-400">Violet</native:text>
+        <native:row class="w-full gap-1">
+            <native:column class="flex-1 h-[32] rounded-sm bg-violet-100" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-violet-200" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-violet-300" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-violet-400" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-violet-500" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-violet-600" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-violet-700" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-violet-800" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-violet-900" />
+        </native:row>
+
+        {{-- Purple --}}
+        <native:text class="text-xs text-gray-500 dark:text-gray-400">Purple</native:text>
+        <native:row class="w-full gap-1">
+            <native:column class="flex-1 h-[32] rounded-sm bg-purple-100" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-purple-200" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-purple-300" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-purple-400" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-purple-500" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-purple-600" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-purple-700" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-purple-800" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-purple-900" />
+        </native:row>
+
+        {{-- Fuchsia --}}
+        <native:text class="text-xs text-gray-500 dark:text-gray-400">Fuchsia</native:text>
+        <native:row class="w-full gap-1">
+            <native:column class="flex-1 h-[32] rounded-sm bg-fuchsia-100" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-fuchsia-200" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-fuchsia-300" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-fuchsia-400" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-fuchsia-500" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-fuchsia-600" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-fuchsia-700" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-fuchsia-800" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-fuchsia-900" />
+        </native:row>
+
+        {{-- Pink --}}
+        <native:text class="text-xs text-gray-500 dark:text-gray-400">Pink</native:text>
+        <native:row class="w-full gap-1">
+            <native:column class="flex-1 h-[32] rounded-sm bg-pink-100" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-pink-200" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-pink-300" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-pink-400" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-pink-500" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-pink-600" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-pink-700" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-pink-800" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-pink-900" />
+        </native:row>
+
+        {{-- Rose --}}
+        <native:text class="text-xs text-gray-500 dark:text-gray-400">Rose</native:text>
+        <native:row class="w-full gap-1">
+            <native:column class="flex-1 h-[32] rounded-sm bg-rose-100" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-rose-200" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-rose-300" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-rose-400" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-rose-500" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-rose-600" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-rose-700" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-rose-800" />
+            <native:column class="flex-1 h-[32] rounded-sm bg-rose-900" />
+        </native:row>
+
+        <native:divider />
+
+        {{-- ============================================= --}}
+        {{-- BUTTONS --}}
+        {{-- ============================================= --}}
+        <native:text class="text-lg font-semibold text-gray-700 dark:text-gray-300">Buttons</native:text>
+
+        {{-- Solid buttons — horizontal scroll --}}
+        <native:scroll-view :horizontal="true" class="w-full h-[52]">
+            <native:row class="gap-2 h-[52]">
+                <native:button @press="increment" class="bg-blue-500 rounded-lg px-5 py-3 text-white font-semibold">
+                    Primary
+                </native:button>
+                <native:button @press="decrement" class="bg-red-500 rounded-lg px-5 py-3 text-white font-semibold">
+                    Danger
+                </native:button>
+                <native:button @press="increment" class="bg-green-500 rounded-lg px-5 py-3 text-white font-semibold">
+                    Success
+                </native:button>
+                <native:button @press="increment" class="bg-amber-500 rounded-lg px-5 py-3 text-white font-semibold">
+                    Warning
+                </native:button>
+                <native:button @press="increment" class="bg-purple-500 rounded-lg px-5 py-3 text-white font-semibold">
+                    Purple
+                </native:button>
+                <native:button @press="increment" class="bg-pink-500 rounded-lg px-5 py-3 text-white font-semibold">
+                    Pink
+                </native:button>
+            </native:row>
+        </native:scroll-view>
+
+        {{-- Pill buttons — horizontal scroll --}}
+        <native:scroll-view :horizontal="true" class="w-full h-[44]">
+            <native:row class="gap-2 h-[44]">
+                <native:button @press="increment" class="bg-indigo-500 rounded-full px-6 py-2 text-white">
+                    Pill Button
+                </native:button>
+                <native:button @press="increment" class="bg-pink-500 rounded-full px-6 py-2 text-white">
+                    Pink Pill
+                </native:button>
+                <native:button @press="increment" class="bg-teal-500 rounded-full px-6 py-2 text-white">
+                    Teal Pill
+                </native:button>
+                <native:button @press="increment" class="bg-rose-500 rounded-full px-6 py-2 text-white">
+                    Rose Pill
+                </native:button>
+                <native:button @press="increment" class="bg-cyan-500 rounded-full px-6 py-2 text-white">
+                    Cyan Pill
+                </native:button>
+            </native:row>
+        </native:scroll-view>
+
+        {{-- Outlined / ghost style buttons --}}
+        <native:row class="w-full gap-2 flex-wrap">
+            <native:pressable @press="increment" class="border-2 border-blue-500 rounded-lg px-5 py-2">
+                <native:text class="text-blue-500 font-semibold">Outlined</native:text>
+            </native:pressable>
+            <native:pressable @press="increment" class="border-2 border-red-500 rounded-lg px-5 py-2">
+                <native:text class="text-red-500 font-semibold">Outlined</native:text>
+            </native:pressable>
+            <native:pressable @press="increment" class="rounded-lg px-5 py-2">
+                <native:text class="text-blue-500 font-semibold">Ghost</native:text>
+            </native:pressable>
+        </native:row>
+
+        {{-- Icon buttons --}}
+        <native:row class="w-full gap-3 items-center">
+            <native:pressable @press="increment" class="w-[48] h-[48] rounded-full bg-blue-500 items-center justify-center">
+                <native:icon name="add" :size="24" color="#FFFFFF" />
+            </native:pressable>
+            <native:pressable @press="decrement" class="w-[48] h-[48] rounded-full bg-red-500 items-center justify-center">
+                <native:icon name="minus.circle.fill" :size="24" color="#FFFFFF" />
+            </native:pressable>
+            <native:pressable @press="increment" class="w-[48] h-[48] rounded-full bg-green-500 items-center justify-center">
+                <native:icon name="check" :size="24" color="#FFFFFF" />
+            </native:pressable>
+            <native:pressable @press="increment" class="w-[48] h-[48] rounded-full bg-purple-500 items-center justify-center">
+                <native:icon name="star" :size="24" color="#FFFFFF" />
+            </native:pressable>
+            <native:pressable @press="increment" class="w-[48] h-[48] rounded-full bg-amber-500 items-center justify-center">
+                <native:icon name="favorite" :size="24" color="#FFFFFF" />
+            </native:pressable>
+        </native:row>
+
+        <native:divider />
 
-        <native:column class="w-full px-5 pt-6  pb-2">
+        {{-- ============================================= --}}
+        {{-- INTERACTIVE COUNTER --}}
+        {{-- ============================================= --}}
+        <native:text class="text-lg font-semibold text-gray-700 dark:text-gray-300">Interactive Counter</native:text>
+        <native:row class="w-full gap-4 items-center justify-center">
+            <native:button @press="decrement" class="bg-red-500 rounded-full px-6 py-3 text-white font-bold text-xl">
+                −
+            </native:button>
+            <native:column class="w-[80] h-[80] rounded-2xl bg-indigo-600 items-center justify-center shadow-lg">
+                <native:text class="text-white font-extrabold text-3xl">{{ $count }}</native:text>
+            </native:column>
+            <native:button @press="increment" class="bg-green-500 rounded-full px-6 py-3 text-white font-bold text-xl">
+                +
+            </native:button>
+        </native:row>
 
-            <native:row class="w-full bg-white rounded-full shadow px-4 py-3 items-center gap-4">
-                <native:icon name="search" :size="22" color="#222222" />
-                <native:column class="gap-0">
-                    <native:text class="text-[14] font-semibold text-[#222222]">Where to?</native:text>
-                    <native:text class="text-[12] text-[#717171]">Anywhere · Any week · Add guests</native:text>
+        <native:divider />
+
+        {{-- ============================================= --}}
+        {{-- BORDER RADIUS — horizontal scroll --}}
+        {{-- ============================================= --}}
+        <native:text class="text-lg font-semibold text-gray-700 dark:text-gray-300">Border Radius</native:text>
+        <native:scroll-view :horizontal="true" class="w-full h-[64]">
+            <native:row class="gap-3 items-center h-[64]">
+                <native:column class="w-[56] h-[56] bg-sky-500 rounded-none items-center justify-center">
+                    <native:text class="text-white text-xs">none</native:text>
+                </native:column>
+                <native:column class="w-[56] h-[56] bg-sky-500 rounded-sm items-center justify-center">
+                    <native:text class="text-white text-xs">sm</native:text>
                 </native:column>
-                <native:spacer />
-                <native:column class="w-[36] h-[36] rounded-full bg-white items-center justify-center shadow">
-                    <native:icon name="tune" :size="18" color="#222222" />
+                <native:column class="w-[56] h-[56] bg-sky-500 rounded-md items-center justify-center">
+                    <native:text class="text-white text-xs">md</native:text>
+                </native:column>
+                <native:column class="w-[56] h-[56] bg-sky-500 rounded-lg items-center justify-center">
+                    <native:text class="text-white text-xs">lg</native:text>
+                </native:column>
+                <native:column class="w-[56] h-[56] bg-sky-500 rounded-xl items-center justify-center">
+                    <native:text class="text-white text-xs">xl</native:text>
+                </native:column>
+                <native:column class="w-[56] h-[56] bg-sky-500 rounded-2xl items-center justify-center">
+                    <native:text class="text-white text-xs">2xl</native:text>
+                </native:column>
+                <native:column class="w-[56] h-[56] bg-sky-500 rounded-3xl items-center justify-center">
+                    <native:text class="text-white text-xs">3xl</native:text>
+                </native:column>
+                <native:column class="w-[56] h-[56] bg-sky-500 rounded-full items-center justify-center">
+                    <native:text class="text-white text-xs">full</native:text>
                 </native:column>
             </native:row>
-        </native:column>
+        </native:scroll-view>
 
-        <native:scroll-view horizontal>
-            <native:row class="gap-0 px-3 pt-2 pb-2">
-                @foreach ($categories as $catIndex => $cat)
-                    <native:column @press="selectCategory({{ $catIndex }})" class="items-center gap-1 px-3 pb-2">
-                        <native:icon
-                            name="{{ $cat['icon'] }}"
-                            :size="24"
-                            color="{{ $selectedCategory === $catIndex ? '#222222' : '#717171' }}"
-                        />
-                        <native:text class="text-[10] {{ $selectedCategory === $catIndex ? 'font-semibold text-[#222222]' : 'text-[#717171]' }}">{{ $cat['name'] }}</native:text>
-                        @if ($selectedCategory === $catIndex)
-                            <native:column class="w-full h-[2] bg-[#222222]" />
-                        @endif
-                    </native:column>
-                @endforeach
+        <native:divider />
+
+        {{-- ============================================= --}}
+        {{-- SHADOWS / ELEVATION --}}
+        {{-- ============================================= --}}
+        <native:text class="text-lg font-semibold text-gray-700 dark:text-gray-300">Shadows & Elevation</native:text>
+        <native:scroll-view :horizontal="true" class="w-full h-[76]">
+            <native:row class="gap-3 items-center h-[76] px-2">
+                <native:column class="w-[70] h-[60] bg-white rounded-lg shadow-none items-center justify-center">
+                    <native:text class="text-xs text-gray-500 dark:text-gray-400">none</native:text>
+                </native:column>
+                <native:column class="w-[70] h-[60] bg-white rounded-lg shadow-sm items-center justify-center">
+                    <native:text class="text-xs text-gray-500 dark:text-gray-400">sm</native:text>
+                </native:column>
+                <native:column class="w-[70] h-[60] bg-white rounded-lg shadow-md items-center justify-center">
+                    <native:text class="text-xs text-gray-500 dark:text-gray-400">md</native:text>
+                </native:column>
+                <native:column class="w-[70] h-[60] bg-white rounded-lg shadow-lg items-center justify-center">
+                    <native:text class="text-xs text-gray-500 dark:text-gray-400">lg</native:text>
+                </native:column>
+                <native:column class="w-[70] h-[60] bg-white rounded-lg shadow-xl items-center justify-center">
+                    <native:text class="text-xs text-gray-500 dark:text-gray-400">xl</native:text>
+                </native:column>
+                <native:column class="w-[70] h-[60] bg-white rounded-lg shadow-2xl items-center justify-center">
+                    <native:text class="text-xs text-gray-500 dark:text-gray-400">2xl</native:text>
+                </native:column>
             </native:row>
         </native:scroll-view>
 
-        <native:divider class="w-full" />
-
-         Listing Cards
-        <native:column class="w-full gap-6 px-5 pt-4 pb-4">
-            @foreach ($listings as $listing)
-                <native:column class="w-full gap-0">
-                     Image with Heart
-                    <native:stack class="w-full h-[320] rounded-xl">
-                        <native:column @press="viewListing({{ $listing['originalIndex'] }})" class="w-full h-[320]">
-                            <native:image
-                                src="{{ $listing['imageUrl'] }}"
-                                class="w-full h-[320] rounded-xl"
-                                :fit="2"
-                            />
-                        </native:column>
-                         Wishlist Heart
-                        <native:row class="w-full p-3 items-start justify-end">
-                            <native:column @press="toggleWishlist({{ $listing['originalIndex'] }})" class="w-[32] h-[32] items-center justify-center">
-                                <native:icon
-                                    name="{{ $listing['isWishlisted'] ? 'favorite' : 'favorite_border' }}"
-                                    :size="24"
-                                    color="{{ $listing['isWishlisted'] ? '#FF385C' : '#FFFFFF' }}"
-                                />
-                            </native:column>
-                        </native:row>
-                         Guest Favorite Badge
-                        @if ($listing['rating'] >= 4.9)
-                            <native:column class="w-full h-[320] justify-start items-start p-3">
-                                <native:row class="bg-white rounded-full px-3 py-1 items-center shadow">
-                                    <native:text class="text-[11] font-bold text-[#222222]">Guest favorite</native:text>
-                                </native:row>
-                            </native:column>
-                        @endif
-                    </native:stack>
-
-                     Info Below Image
-                    <native:column @press="viewListing({{ $listing['originalIndex'] }})" class="w-full pt-3 gap-1">
-                        <native:row class="w-full items-start justify-between">
-                            <native:text class="text-[15] font-semibold text-[#222222] w-[280]" :maxLines="1">{{ $listing['location'] }}</native:text>
-                            <native:row class="items-center gap-1">
-                                <native:icon name="star" :size="13" color="#222222" />
-                                <native:text class="text-[14] text-[#222222]">{{ $listing['rating'] }}</native:text>
-                            </native:row>
-                        </native:row>
-                        <native:text class="text-[14] text-[#717171]">{{ $listing['distance'] }}</native:text>
-                        <native:text class="text-[14] text-[#717171]">{{ $listing['dates'] }}</native:text>
-                        <native:row class="items-center gap-1 pt-1">
-                            <native:text class="text-[15] font-semibold text-[#222222]">${{ $listing['price'] }}</native:text>
-                            <native:text class="text-[14] text-[#222222]">night</native:text>
-                        </native:row>
-                    </native:column>
+        <native:divider />
+
+        {{-- ============================================= --}}
+        {{-- BORDERS --}}
+        {{-- ============================================= --}}
+        <native:text class="text-lg font-semibold text-gray-700 dark:text-gray-300">Borders</native:text>
+        <native:row class="w-full gap-3 items-center">
+            <native:column class="flex-1 h-[50] border border-gray-300 rounded-lg items-center justify-center">
+                <native:text class="text-xs text-gray-500 dark:text-gray-400">1px</native:text>
+            </native:column>
+            <native:column class="flex-1 h-[50] border-2 border-blue-500 rounded-lg items-center justify-center">
+                <native:text class="text-xs text-blue-500">2px blue</native:text>
+            </native:column>
+            <native:column class="flex-1 h-[50] border-4 border-red-500 rounded-lg items-center justify-center">
+                <native:text class="text-xs text-red-500">4px red</native:text>
+            </native:column>
+            <native:column class="flex-1 h-[50] border-4 border-green-500 rounded-full items-center justify-center">
+                <native:text class="text-xs text-green-500">pill</native:text>
+            </native:column>
+        </native:row>
+
+        <native:divider />
+
+        {{-- ============================================= --}}
+        {{-- OPACITY --}}
+        {{-- ============================================= --}}
+        <native:text class="text-lg font-semibold text-gray-700 dark:text-gray-300">Opacity</native:text>
+        <native:row class="w-full gap-2 items-center">
+            <native:column class="flex-1 h-[40] bg-blue-500 rounded-md opacity-100 items-center justify-center">
+                <native:text class="text-white text-xs">100</native:text>
+            </native:column>
+            <native:column class="flex-1 h-[40] bg-blue-500 rounded-md opacity-75 items-center justify-center">
+                <native:text class="text-white text-xs">75</native:text>
+            </native:column>
+            <native:column class="flex-1 h-[40] bg-blue-500 rounded-md opacity-50 items-center justify-center">
+                <native:text class="text-white text-xs">50</native:text>
+            </native:column>
+            <native:column class="flex-1 h-[40] bg-blue-500 rounded-md opacity-25 items-center justify-center">
+                <native:text class="text-white text-xs">25</native:text>
+            </native:column>
+            <native:column class="flex-1 h-[40] bg-blue-500 rounded-md opacity-10 items-center justify-center">
+                <native:text class="text-xs dark:text-gray-100">10</native:text>
+            </native:column>
+        </native:row>
+
+        <native:divider />
+
+        {{-- ============================================= --}}
+        {{-- ICONS — only mapped SF Symbol names --}}
+        {{-- ============================================= --}}
+        <native:text class="text-lg font-semibold text-gray-700 dark:text-gray-300">Icons</native:text>
+        <native:text class="text-xs text-gray-400 dark:text-gray-500">All mapped icon names</native:text>
+
+        {{-- Row 1: Navigation --}}
+        <native:scroll-view :horizontal="true" class="w-full h-[48]">
+            <native:row class="gap-4 items-center h-[48]">
+                <native:column class="items-center gap-1">
+                    <native:icon name="home" :size="24" color="#333333" />
+                    <native:text class="text-xs text-gray-400 dark:text-gray-500">home</native:text>
                 </native:column>
-            @endforeach
-        </native:column>
+                <native:column class="items-center gap-1">
+                    <native:icon name="search" :size="24" color="#007AFF" />
+                    <native:text class="text-xs text-gray-400 dark:text-gray-500">search</native:text>
+                </native:column>
+                <native:column class="items-center gap-1">
+                    <native:icon name="settings" :size="24" color="#8E8E93" />
+                    <native:text class="text-xs text-gray-400 dark:text-gray-500">settings</native:text>
+                </native:column>
+                <native:column class="items-center gap-1">
+                    <native:icon name="dashboard" :size="24" color="#5856D6" />
+                    <native:text class="text-xs text-gray-400 dark:text-gray-500">dashboard</native:text>
+                </native:column>
+                <native:column class="items-center gap-1">
+                    <native:icon name="menu" :size="24" color="#333333" />
+                    <native:text class="text-xs text-gray-400 dark:text-gray-500">menu</native:text>
+                </native:column>
+                <native:column class="items-center gap-1">
+                    <native:icon name="person" :size="24" color="#FF2D55" />
+                    <native:text class="text-xs text-gray-400 dark:text-gray-500">person</native:text>
+                </native:column>
+                <native:column class="items-center gap-1">
+                    <native:icon name="profile" :size="24" color="#007AFF" />
+                    <native:text class="text-xs text-gray-400 dark:text-gray-500">profile</native:text>
+                </native:column>
+            </native:row>
+        </native:scroll-view>
+
+        {{-- Row 2: Content --}}
+        <native:scroll-view :horizontal="true" class="w-full h-[48]">
+            <native:row class="gap-4 items-center h-[48]">
+                <native:column class="items-center gap-1">
+                    <native:icon name="favorite" :size="24" color="#FF3B30" />
+                    <native:text class="text-xs text-gray-400 dark:text-gray-500">favorite</native:text>
+                </native:column>
+                <native:column class="items-center gap-1">
+                    <native:icon name="star" :size="24" color="#FF9500" />
+                    <native:text class="text-xs text-gray-400 dark:text-gray-500">star</native:text>
+                </native:column>
+                <native:column class="items-center gap-1">
+                    <native:icon name="bookmark" :size="24" color="#5856D6" />
+                    <native:text class="text-xs text-gray-400 dark:text-gray-500">bookmark</native:text>
+                </native:column>
+                <native:column class="items-center gap-1">
+                    <native:icon name="photo" :size="24" color="#34C759" />
+                    <native:text class="text-xs text-gray-400 dark:text-gray-500">photo</native:text>
+                </native:column>
+                <native:column class="items-center gap-1">
+                    <native:icon name="camera" :size="24" color="#FF9500" />
+                    <native:text class="text-xs text-gray-400 dark:text-gray-500">camera</native:text>
+                </native:column>
+                <native:column class="items-center gap-1">
+                    <native:icon name="video" :size="24" color="#FF3B30" />
+                    <native:text class="text-xs text-gray-400 dark:text-gray-500">video</native:text>
+                </native:column>
+                <native:column class="items-center gap-1">
+                    <native:icon name="folder" :size="24" color="#007AFF" />
+                    <native:text class="text-xs text-gray-400 dark:text-gray-500">folder</native:text>
+                </native:column>
+            </native:row>
+        </native:scroll-view>
+
+        {{-- Row 3: Communication --}}
+        <native:scroll-view :horizontal="true" class="w-full h-[48]">
+            <native:row class="gap-4 items-center h-[48]">
+                <native:column class="items-center gap-1">
+                    <native:icon name="mail" :size="24" color="#007AFF" />
+                    <native:text class="text-xs text-gray-400 dark:text-gray-500">mail</native:text>
+                </native:column>
+                <native:column class="items-center gap-1">
+                    <native:icon name="notifications" :size="24" color="#5856D6" />
+                    <native:text class="text-xs text-gray-400 dark:text-gray-500">notifications</native:text>
+                </native:column>
+                <native:column class="items-center gap-1">
+                    <native:icon name="message" :size="24" color="#34C759" />
+                    <native:text class="text-xs text-gray-400 dark:text-gray-500">message</native:text>
+                </native:column>
+                <native:column class="items-center gap-1">
+                    <native:icon name="chat" :size="24" color="#FF9500" />
+                    <native:text class="text-xs text-gray-400 dark:text-gray-500">chat</native:text>
+                </native:column>
+                <native:column class="items-center gap-1">
+                    <native:icon name="phone" :size="24" color="#34C759" />
+                    <native:text class="text-xs text-gray-400 dark:text-gray-500">phone</native:text>
+                </native:column>
+                <native:column class="items-center gap-1">
+                    <native:icon name="share" :size="24" color="#007AFF" />
+                    <native:text class="text-xs text-gray-400 dark:text-gray-500">share</native:text>
+                </native:column>
+            </native:row>
+        </native:scroll-view>
+
+        {{-- Row 4: Actions & Status --}}
+        <native:scroll-view :horizontal="true" class="w-full h-[48]">
+            <native:row class="gap-4 items-center h-[48]">
+                <native:column class="items-center gap-1">
+                    <native:icon name="add" :size="24" color="#34C759" />
+                    <native:text class="text-xs text-gray-400 dark:text-gray-500">add</native:text>
+                </native:column>
+                <native:column class="items-center gap-1">
+                    <native:icon name="edit" :size="24" color="#007AFF" />
+                    <native:text class="text-xs text-gray-400 dark:text-gray-500">edit</native:text>
+                </native:column>
+                <native:column class="items-center gap-1">
+                    <native:icon name="delete" :size="24" color="#FF3B30" />
+                    <native:text class="text-xs text-gray-400 dark:text-gray-500">delete</native:text>
+                </native:column>
+                <native:column class="items-center gap-1">
+                    <native:icon name="check" :size="24" color="#34C759" />
+                    <native:text class="text-xs text-gray-400 dark:text-gray-500">check</native:text>
+                </native:column>
+                <native:column class="items-center gap-1">
+                    <native:icon name="close" :size="24" color="#FF3B30" />
+                    <native:text class="text-xs text-gray-400 dark:text-gray-500">close</native:text>
+                </native:column>
+                <native:column class="items-center gap-1">
+                    <native:icon name="warning" :size="24" color="#FF9500" />
+                    <native:text class="text-xs text-gray-400 dark:text-gray-500">warning</native:text>
+                </native:column>
+                <native:column class="items-center gap-1">
+                    <native:icon name="info" :size="24" color="#007AFF" />
+                    <native:text class="text-xs text-gray-400 dark:text-gray-500">info</native:text>
+                </native:column>
+            </native:row>
+        </native:scroll-view>
+
+        {{-- Row 5: Device & Misc --}}
+        <native:scroll-view :horizontal="true" class="w-full h-[48]">
+            <native:row class="gap-4 items-center h-[48]">
+                <native:column class="items-center gap-1">
+                    <native:icon name="lock" :size="24" color="#8E8E93" />
+                    <native:text class="text-xs text-gray-400 dark:text-gray-500">lock</native:text>
+                </native:column>
+                <native:column class="items-center gap-1">
+                    <native:icon name="unlock" :size="24" color="#34C759" />
+                    <native:text class="text-xs text-gray-400 dark:text-gray-500">unlock</native:text>
+                </native:column>
+                <native:column class="items-center gap-1">
+                    <native:icon name="location" :size="24" color="#FF3B30" />
+                    <native:text class="text-xs text-gray-400 dark:text-gray-500">location</native:text>
+                </native:column>
+                <native:column class="items-center gap-1">
+                    <native:icon name="globe" :size="24" color="#007AFF" />
+                    <native:text class="text-xs text-gray-400 dark:text-gray-500">globe</native:text>
+                </native:column>
+                <native:column class="items-center gap-1">
+                    <native:icon name="bolt" :size="24" color="#FF9500" />
+                    <native:text class="text-xs text-gray-400 dark:text-gray-500">bolt</native:text>
+                </native:column>
+                <native:column class="items-center gap-1">
+                    <native:icon name="clock" :size="24" color="#5856D6" />
+                    <native:text class="text-xs text-gray-400 dark:text-gray-500">clock</native:text>
+                </native:column>
+                <native:column class="items-center gap-1">
+                    <native:icon name="calendar" :size="24" color="#FF3B30" />
+                    <native:text class="text-xs text-gray-400 dark:text-gray-500">calendar</native:text>
+                </native:column>
+                <native:column class="items-center gap-1">
+                    <native:icon name="qrcode" :size="24" color="#333333" />
+                    <native:text class="text-xs text-gray-400 dark:text-gray-500">qrcode</native:text>
+                </native:column>
+            </native:row>
+        </native:scroll-view>
+
+        {{-- Row 6: Commerce & SF Symbols direct --}}
+        <native:scroll-view :horizontal="true" class="w-full h-[48]">
+            <native:row class="gap-4 items-center h-[48]">
+                <native:column class="items-center gap-1">
+                    <native:icon name="cart" :size="24" color="#34C759" />
+                    <native:text class="text-xs text-gray-400 dark:text-gray-500">cart</native:text>
+                </native:column>
+                <native:column class="items-center gap-1">
+                    <native:icon name="orders" :size="24" color="#FF9500" />
+                    <native:text class="text-xs text-gray-400 dark:text-gray-500">orders</native:text>
+                </native:column>
+                <native:column class="items-center gap-1">
+                    <native:icon name="download" :size="24" color="#007AFF" />
+                    <native:text class="text-xs text-gray-400 dark:text-gray-500">download</native:text>
+                </native:column>
+                <native:column class="items-center gap-1">
+                    <native:icon name="upload" :size="24" color="#5856D6" />
+                    <native:text class="text-xs text-gray-400 dark:text-gray-500">upload</native:text>
+                </native:column>
+                <native:column class="items-center gap-1">
+                    <native:icon name="refresh" :size="24" color="#007AFF" />
+                    <native:text class="text-xs text-gray-400 dark:text-gray-500">refresh</native:text>
+                </native:column>
+                <native:column class="items-center gap-1">
+                    <native:icon name="filter" :size="24" color="#8E8E93" />
+                    <native:text class="text-xs text-gray-400 dark:text-gray-500">filter</native:text>
+                </native:column>
+                <native:column class="items-center gap-1">
+                    <native:icon name="list" :size="24" color="#333333" />
+                    <native:text class="text-xs text-gray-400 dark:text-gray-500">list</native:text>
+                </native:column>
+            </native:row>
+        </native:scroll-view>
+
+        <native:divider />
+
+        {{-- ============================================= --}}
+        {{-- TEXT INPUT --}}
+        {{-- ============================================= --}}
+        <native:text class="text-lg font-semibold text-gray-700 dark:text-gray-300">Text Input</native:text>
+        <native:text-input placeholder="Type something..." class="w-full" />
+        <native:text-input placeholder="Password field" class="w-full" :secure="true" />
+
+        <native:divider />
+
+        {{-- ============================================= --}}
+        {{-- TOGGLE --}}
+        {{-- ============================================= --}}
+        <native:text class="text-lg font-semibold text-gray-700 dark:text-gray-300">Toggle</native:text>
+        <native:toggle class="dark:text-red-400" :value="false" label="Enable notifications" />
+        <native:toggle :value="true" label="Dark mode (on)" />
+
+        <native:divider />
+
+        {{-- ============================================= --}}
+        {{-- IMAGE --}}
+        {{-- ============================================= --}}
+        <native:text class="text-lg font-semibold text-gray-700 dark:text-gray-300">Image</native:text>
+        <native:image
+            src="https://picsum.photos/seed/nativephp/800/400"
+            class="w-full h-[200] rounded-xl"
+            :fit="2"
+        />
+        <native:scroll-view :horizontal="true">
+            <native:row class="gap-3">
+                <native:image
+                    src="https://picsum.photos/seed/left/400/400"
+                    class="w-[400] h-[400] rounded-lg"
+                    :fit="2"
+                />
+                <native:image
+                    src="https://picsum.photos/seed/right/400/400"
+                    class="w-[400] h-[400] rounded-lg"
+                    :fit="2"
+                />
+
+            </native:row>
+        </native:scroll-view>
+
+
+        <native:divider />
+
+        {{-- ============================================= --}}
+        {{-- FLEX LAYOUT --}}
+        {{-- ============================================= --}}
+        <native:text class="text-lg font-semibold text-gray-700 dark:text-gray-300">Flex Layout</native:text>
+
+        <native:text class="text-sm text-gray-400 dark:text-gray-500">justify-start</native:text>
+        <native:row class="w-full gap-2 justify-start">
+            <native:column class="w-[40] h-[40] bg-indigo-500 rounded-md" />
+            <native:column class="w-[40] h-[40] bg-indigo-400 rounded-md" />
+            <native:column class="w-[40] h-[40] bg-indigo-300 rounded-md" />
+        </native:row>
+
+        <native:text class="text-sm text-gray-400 dark:text-gray-500">justify-center</native:text>
+        <native:row class="w-full gap-2 justify-center">
+            <native:column class="w-[40] h-[40] bg-violet-500 rounded-md" />
+            <native:column class="w-[40] h-[40] bg-violet-400 rounded-md" />
+            <native:column class="w-[40] h-[40] bg-violet-300 rounded-md" />
+        </native:row>
+
+        <native:text class="text-sm text-gray-400 dark:text-gray-500">justify-end</native:text>
+        <native:row class="w-full gap-2 justify-end">
+            <native:column class="w-[40] h-[40] bg-fuchsia-500 rounded-md" />
+            <native:column class="w-[40] h-[40] bg-fuchsia-400 rounded-md" />
+            <native:column class="w-[40] h-[40] bg-fuchsia-300 rounded-md" />
+        </native:row>
+
+        <native:text class="text-sm text-gray-400 dark:text-gray-500">justify-between</native:text>
+        <native:row class="w-full justify-between">
+            <native:column class="w-[40] h-[40] bg-pink-500 rounded-md" />
+            <native:column class="w-[40] h-[40] bg-pink-400 rounded-md" />
+            <native:column class="w-[40] h-[40] bg-pink-300 rounded-md" />
+        </native:row>
+
+        <native:text class="text-sm text-gray-400 dark:text-gray-500">justify-evenly</native:text>
+        <native:row class="w-full justify-evenly">
+            <native:column class="w-[40] h-[40] bg-rose-500 rounded-md" />
+            <native:column class="w-[40] h-[40] bg-rose-400 rounded-md" />
+            <native:column class="w-[40] h-[40] bg-rose-300 rounded-md" />
+        </native:row>
+
+        <native:text class="text-sm text-gray-400 dark:text-gray-500 mt-2">flex-1 distribution</native:text>
+        <native:row class="w-full gap-2">
+            <native:column class="flex-1 h-[40] bg-cyan-500 rounded-md items-center justify-center">
+                <native:text class="text-white text-xs">1</native:text>
+            </native:column>
+            <native:column class="flex-1 h-[40] bg-cyan-400 rounded-md items-center justify-center">
+                <native:text class="text-white text-xs">1</native:text>
+            </native:column>
+            <native:column class="flex-1 h-[40] bg-cyan-300 rounded-md items-center justify-center">
+                <native:text class="text-white text-xs">1</native:text>
+            </native:column>
+        </native:row>
+
+        <native:divider />
 
-         Bottom Navigation
-        <native:divider class="w-full" />
-        <native:row class="w-full bg-white px-2 pt-2 pb-6 items-center justify-around">
-            <native:column class="items-center gap-1 px-3">
-                <native:icon name="search" :size="24" color="#FF385C" />
-                <native:text class="text-[10] font-semibold text-[#FF385C]">Explore</native:text>
+        {{-- ============================================= --}}
+        {{-- STACK (LAYERED) --}}
+        {{-- ============================================= --}}
+        <native:text class="text-lg font-semibold text-gray-700 dark:text-gray-300">Stack (Layered)</native:text>
+
+        {{-- Notification badge on avatar --}}
+        <native:stack class="w-[64] h-[64]">
+            <native:column class="w-[64] h-[64] rounded-full bg-indigo-500 items-center justify-center">
+                <native:text class="text-white font-bold text-xl">SR</native:text>
             </native:column>
-            <native:column class="items-center gap-1 px-3">
-                <native:icon name="favorite_border" :size="24" color="#717171" />
-                <native:text class="text-[10] text-[#717171]">Wishlists</native:text>
+            <native:row class="w-full items-start justify-end">
+                <native:column class="w-[22] h-[22] rounded-full bg-red-500 border-2 border-white items-center justify-center">
+                    <native:text class="text-white text-xs font-bold">3</native:text>
+                </native:column>
+            </native:row>
+        </native:stack>
+
+        {{-- Overlay on image --}}
+        <native:stack class="w-full h-[180]">
+            <native:image
+                src="https://picsum.photos/seed/overlay/800/400"
+                class="w-full h-[180] rounded-xl"
+                :fit="2"
+            />
+            <native:column class="w-full h-[180] rounded-xl justify-end p-4">
+                <native:column class="bg-black opacity-60 rounded-lg p-3">
+                    <native:text class="text-white font-bold text-lg">Overlaid Text</native:text>
+                    <native:text class="text-white text-sm opacity-80">Stacked on top of an image</native:text>
+                </native:column>
             </native:column>
-            <native:column class="items-center gap-1 px-3">
-                <native:icon name="luggage" :size="24" color="#717171" />
-                <native:text class="text-[10] text-[#717171]">Trips</native:text>
+        </native:stack>
+
+        <native:divider />
+
+        {{-- ============================================= --}}
+        {{-- CANVAS & SHAPES --}}
+        {{-- ============================================= --}}
+        <native:text class="text-lg font-semibold text-gray-700 dark:text-gray-300">Canvas & Shapes</native:text>
+        <native:canvas class="w-full h-[200] bg-gray-50 rounded-xl">
+            {{-- Rectangles --}}
+            <native:rect class="left-[10] top-[10] w-[100] h-[50] bg-blue-500 rounded-lg" />
+            <native:rect class="left-[120] top-[10] w-[80] h-[50] bg-green-500 rounded-md" />
+            <native:rect class="left-[210] top-[10] w-[60] h-[50] bg-amber-500 rounded-sm" />
+            <native:rect class="left-[280] top-[10] w-[60] h-[50] bg-red-500" />
+
+            {{-- Circles --}}
+            <native:circle class="left-[10] top-[80] w-[60] h-[60] bg-purple-500" />
+            <native:circle class="left-[50] top-[100] w-[40] h-[40] bg-pink-400 opacity-75" />
+            <native:circle class="left-[120] top-[80] w-[60] h-[60] bg-teal-500" />
+            <native:circle class="left-[200] top-[90] w-[50] h-[50] bg-orange-500" />
+            <native:circle class="left-[270] top-[80] w-[60] h-[60] bg-indigo-400" />
+
+            {{-- Lines --}}
+            <native:line from="10,160" to="340,160" class="border-gray-300 border-2" />
+            <native:line from="10,170" to="340,170" class="border-blue-400 border-2" />
+            <native:line from="10,180" to="340,180" class="border-red-400 border-2" />
+            <native:line from="10,190" to="340,190" class="border-green-400 border-2" />
+        </native:canvas>
+
+        <native:divider />
+
+        {{-- ============================================= --}}
+        {{-- CARD-STYLE LAYOUTS --}}
+        {{-- ============================================= --}}
+        <native:text class="text-lg font-semibold text-gray-700 dark:text-gray-300">Card Layouts</native:text>
+
+        {{-- Profile card --}}
+        <native:column class="w-full bg-white rounded-2xl shadow-lg p-5 gap-4 border border-gray-100">
+            <native:row class="w-full gap-4 items-center">
+                <native:column class="w-[56] h-[56] rounded-full bg-indigo-500 items-center justify-center">
+                    <native:text class="text-white font-bold text-xl">JD</native:text>
+                </native:column>
+                <native:column class="flex-1 gap-0">
+                    <native:text class="font-bold text-lg ">Jane Doe</native:text>
+                    <native:text class="text-sm text-gray-400 dark:text-gray-500">Senior Developer</native:text>
+                </native:column>
+                <native:icon name="more" :size="24" color="#999999" />
+            </native:row>
+            <native:text class="text-gray-600 dark:text-gray-400 text-sm">Building beautiful native apps with PHP. Loves clean architecture, Tailwind, and strong coffee.</native:text>
+            <native:row class="w-full gap-3">
+                <native:pressable @press="increment" class="flex-1 bg-indigo-500 rounded-lg py-2 items-center">
+                    <native:text class="text-white font-semibold">Follow</native:text>
+                </native:pressable>
+                <native:pressable @press="increment" class="flex-1 border-2 border-indigo-500 rounded-lg py-2 items-center">
+                    <native:text class="text-indigo-500 font-semibold">Message</native:text>
+                </native:pressable>
+            </native:row>
+        </native:column>
+
+        {{-- Stats card --}}
+        <native:row class="w-full gap-3">
+            <native:column class="flex-1 bg-blue-100 rounded-xl p-4 gap-1 items-center">
+                <native:icon name="chart.bar.fill" :size="24" color="#3B82F6" />
+                <native:text class="text-2xl font-bold text-blue-600">2.4k</native:text>
+                <native:text class="text-xs text-blue-400">Followers</native:text>
             </native:column>
-            <native:column class="items-center gap-1 px-3">
-                <native:icon name="chat_bubble_outline" :size="24" color="#717171" />
-                <native:text class="text-[10] text-[#717171]">Inbox</native:text>
+            <native:column class="flex-1 bg-green-100 rounded-xl p-4 gap-1 items-center">
+                <native:icon name="star" :size="24" color="#22C55E" />
+                <native:text class="text-2xl font-bold text-green-600">182</native:text>
+                <native:text class="text-xs text-green-400">Stars</native:text>
             </native:column>
-            <native:column class="items-center gap-1 px-3">
-                <native:icon name="person_outline" :size="24" color="#717171" />
-                <native:text class="text-[10] text-[#717171]">Profile</native:text>
+            <native:column class="flex-1 bg-purple-100 rounded-xl p-4 gap-1 items-center">
+                <native:icon name="chevron.left/chevron.right" :size="24" color="#A855F7" />
+                <native:text class="text-2xl font-bold text-purple-600">47</native:text>
+                <native:text class="text-xs text-purple-400">Repos</native:text>
             </native:column>
         </native:row>
 
+        <native:divider />
+
+        {{-- ============================================= --}}
+        {{-- LIST ITEMS --}}
+        {{-- ============================================= --}}
+        <native:text class="text-lg font-semibold text-gray-700 dark:text-gray-300">List Items</native:text>
+        <native:column class="w-full bg-white rounded-xl shadow-sm border border-gray-100">
+            {{-- Item 1 --}}
+            <native:pressable @press="increment" class="w-full">
+                <native:row class="w-full px-4 py-3 gap-3 items-center">
+                    <native:column class="w-[40] h-[40] rounded-full bg-blue-100 items-center justify-center">
+                        <native:icon name="mail" :size="20" color="#3B82F6" />
+                    </native:column>
+                    <native:column class="flex-1 gap-0">
+                        <native:text class="font-semibold ">Messages</native:text>
+                        <native:text class="text-xs text-gray-400 dark:text-gray-500">3 unread messages</native:text>
+                    </native:column>
+                    <native:column class="w-[24] h-[24] rounded-full bg-red-500 items-center justify-center">
+                        <native:text class="text-white text-xs font-bold">3</native:text>
+                    </native:column>
+                    <native:icon name="forward" :size="20" color="#CCCCCC" />
+                </native:row>
+            </native:pressable>
+            <native:divider />
+            {{-- Item 2 --}}
+            <native:pressable @press="increment" class="w-full">
+                <native:row class="w-full px-4 py-3 gap-3 items-center">
+                    <native:column class="w-[40] h-[40] rounded-full bg-green-100 items-center justify-center">
+                        <native:icon name="notifications" :size="20" color="#22C55E" />
+                    </native:column>
+                    <native:column class="flex-1 gap-0">
+                        <native:text class="font-semibold ">Notifications</native:text>
+                        <native:text class="text-xs text-gray-400 dark:text-gray-500">Push & email alerts</native:text>
+                    </native:column>
+                    <native:icon name="forward" :size="20" color="#CCCCCC" />
+                </native:row>
+            </native:pressable>
+            <native:divider />
+            {{-- Item 3 --}}
+            <native:pressable @press="increment" class="w-full">
+                <native:row class="w-full px-4 py-3 gap-3 items-center">
+                    <native:column class="w-[40] h-[40] rounded-full bg-purple-100 items-center justify-center">
+                        <native:icon name="lock" :size="20" color="#A855F7" />
+                    </native:column>
+                    <native:column class="flex-1 gap-0">
+                        <native:text class="font-semibold ">Privacy</native:text>
+                        <native:text class="text-xs text-gray-400 dark:text-gray-500">Manage your data</native:text>
+                    </native:column>
+                    <native:icon name="forward" :size="20" color="#CCCCCC" />
+                </native:row>
+            </native:pressable>
+            <native:divider />
+            {{-- Item 4 --}}
+            <native:pressable @press="increment" class="w-full">
+                <native:row class="w-full px-4 py-3 gap-3 items-center">
+                    <native:column class="w-[40] h-[40] rounded-full bg-amber-100 items-center justify-center">
+                        <native:icon name="settings" :size="20" color="#F59E0B" />
+                    </native:column>
+                    <native:column class="flex-1 gap-0">
+                        <native:text class="font-semibold ">Settings</native:text>
+                        <native:text class="text-xs text-gray-400 dark:text-gray-500">App preferences</native:text>
+                    </native:column>
+                    <native:icon name="forward" :size="20" color="#CCCCCC" />
+                </native:row>
+            </native:pressable>
+        </native:column>
+
+        <native:divider />
+
+        {{-- ============================================= --}}
+        {{-- ACTIVITY INDICATOR --}}
+        {{-- ============================================= --}}
+        <native:text class="text-lg font-semibold text-gray-700 dark:text-gray-300">Activity Indicator</native:text>
+        <native:row class="w-full items-center gap-4">
+            <native:activity-indicator />
+            <native:text class="text-gray-500 dark:text-gray-400">Default</native:text>
+        </native:row>
+        <native:row class="w-full items-center gap-4">
+            <native:activity-indicator :size="1" />
+            <native:text class="text-gray-500 dark:text-gray-400">Large</native:text>
+        </native:row>
+        <native:row class="w-full items-center gap-4">
+            <native:activity-indicator :size="2" />
+            <native:text class="text-gray-500 dark:text-gray-400">Small</native:text>
+        </native:row>
+        <native:row class="w-full items-center gap-6 mt-2">
+            <native:activity-indicator color="#3B82F6" />
+            <native:activity-indicator color="#EF4444" />
+            <native:activity-indicator color="#22C55E" />
+            <native:activity-indicator color="#A855F7" />
+            <native:activity-indicator color="#F97316" />
+            <native:text class="text-gray-500 dark:text-gray-400 text-sm">Custom colors</native:text>
+        </native:row>
+
+        <native:divider />
+
+        {{-- ============================================= --}}
+        {{-- CREATIVE COMPOSITIONS --}}
+        {{-- ============================================= --}}
+        <native:text class="text-lg font-semibold text-gray-700 dark:text-gray-300">Creative Compositions</native:text>
+
+        {{-- Faux gradient banner --}}
+        <native:stack class="w-full h-[140]">
+            <native:row class="w-full h-[140]">
+                <native:column class="flex-1 h-[140] bg-indigo-600" />
+                <native:column class="flex-1 h-[140] bg-purple-600" />
+                <native:column class="flex-1 h-[140] bg-pink-600" />
+            </native:row>
+            <native:column class="w-full h-[140] items-center justify-center">
+                <native:text class="text-white font-extrabold text-2xl">NativePHP</native:text>
+                <native:text class="text-white opacity-75 text-sm">Build native. Write PHP.</native:text>
+            </native:column>
+        </native:stack>
+
+        {{-- Tag cloud --}}
+        <native:scroll-view :horizontal="true">
+            <native:row class="w-full gap-2 flex-wrap mt-2">
+                <native:column class="bg-blue-100 rounded-full px-3 py-1">
+                    <native:text class="text-blue-700 text-xs font-semibold">Laravel</native:text>
+                </native:column>
+                <native:column class="bg-green-100 rounded-full px-3 py-1">
+                    <native:text class="text-green-700 text-xs font-semibold">PHP</native:text>
+                </native:column>
+                <native:column class="bg-purple-100 rounded-full px-3 py-1">
+                    <native:text class="text-purple-700 text-xs font-semibold">Swift</native:text>
+                </native:column>
+                <native:column class="bg-amber-100 rounded-full px-3 py-1">
+                    <native:text class="text-amber-700 text-xs font-semibold">Kotlin</native:text>
+                </native:column>
+                <native:column class="bg-red-100 rounded-full px-3 py-1">
+                    <native:text class="text-red-700 text-xs font-semibold">Yoga</native:text>
+                </native:column>
+                <native:column class="bg-teal-100 rounded-full px-3 py-1">
+                    <native:text class="text-teal-700 text-xs font-semibold">Tailwind</native:text>
+                </native:column>
+                <native:column class="bg-pink-100 rounded-full px-3 py-1">
+                    <native:text class="text-pink-700 text-xs font-semibold">UIKit</native:text>
+                </native:column>
+                <native:column class="bg-indigo-100 rounded-full px-3 py-1">
+                    <native:text class="text-indigo-700 text-xs font-semibold">Compose</native:text>
+                </native:column>
+            </native:row>
+        </native:scroll-view>
+
+        {{-- Chat bubble mockup --}}
+        <native:column class="w-full gap-3 mt-3">
+            <native:row class="w-full justify-end">
+                <native:column class="w-3/4 bg-blue-500 rounded-2xl p-3">
+                    <native:text class="text-white text-sm">Hey, have you tried NativePHP yet?</native:text>
+                </native:column>
+            </native:row>
+            <native:row class="w-full justify-start">
+                <native:column class="w-3/4 bg-gray-200 dark:bg-gray-800 rounded-2xl p-3">
+                    <native:text class="text-gray-800 dark:text-gray-200 text-sm">Yes! Native iOS and Android apps in PHP. The Yoga layout is pixel-perfect.</native:text>
+                </native:column>
+            </native:row>
+            <native:row class="w-full justify-end">
+                <native:column class="w-1/2 bg-blue-500 rounded-2xl p-3">
+                    <native:text class="text-white text-sm">Tailwind classes just work!</native:text>
+                </native:column>
+            </native:row>
+        </native:column>
+
+        {{-- Bottom padding --}}
         <native:spacer class="h-[20]" />
 
     </native:column>
 </native:scroll-view>
+{{--</native:column>--}}
+
+{{-- Bottom Navigation --}}
+{{--<native:row class="w-full h-[90] bg-white border-t border-gray-200 items-start justify-evenly pt-2">--}}
+{{--    <native:pressable @press="increment" class="flex-1 items-center gap-1">--}}
+{{--        <native:icon name="home" :size="22" color="#007AFF" />--}}
+{{--        <native:text class="text-xs text-blue-500 font-medium">Home</native:text>--}}
+{{--    </native:pressable>--}}
+{{--    <native:pressable @press="increment" class="flex-1 items-center gap-1">--}}
+{{--        <native:icon name="search" :size="22" color="#8E8E93" />--}}
+{{--        <native:text class="text-xs text-gray-400 dark:text-gray-500">Search</native:text>--}}
+{{--    </native:pressable>--}}
+{{--    <native:pressable @press="increment" class="flex-1 items-center gap-1">--}}
+{{--        <native:icon name="favorite" :size="22" color="#8E8E93" />--}}
+{{--        <native:text class="text-xs text-gray-400 dark:text-gray-500">Favorites</native:text>--}}
+{{--    </native:pressable>--}}
+{{--    <native:pressable @press="increment" class="flex-1 items-center gap-1">--}}
+{{--        <native:icon name="person" :size="22" color="#8E8E93" />--}}
+{{--        <native:text class="text-xs text-gray-400 dark:text-gray-500">Profile</native:text>--}}
+{{--    </native:pressable>--}}
+{{--</native:row>--}}
+{{--</native:column>--}}
diff --git a/resources/views/native/partials/demo-nav.blade.php b/resources/views/native/partials/demo-nav.blade.php
index 90545ac..462b391 100644
--- a/resources/views/native/partials/demo-nav.blade.php
+++ b/resources/views/native/partials/demo-nav.blade.php
@@ -17,9 +17,10 @@
     <native:side-nav-item id="spotify" icon="music_note" url="/spotify" label="Spotify" />
     <native:side-nav-item id="youtube" icon="play_circle" url="/youtube" label="YouTube" />
 
-    <native:horizontal-divider />
+    <native:divider />
 
     <native:side-nav-item id="benchmark" icon="speed" :url="route('benchmark')" label="Benchmark" />
     <native:side-nav-item id="demo" icon="build" :url="route('demo')" label="Demo" />
+    <native:side-nav-item id="skia" icon="palette" :url="route('skia')" label="Skia Canvas" />
 
 </native:side-nav>
diff --git a/resources/views/native/skia-showcase.blade.php b/resources/views/native/skia-showcase.blade.php
new file mode 100644
index 0000000..0c33714
--- /dev/null
+++ b/resources/views/native/skia-showcase.blade.php
@@ -0,0 +1,342 @@
+@include('native.partials.demo-nav', ['title' => 'Skia Canvas'])
+
+<native:scroll-view class="w-full h-full bg-[#0f0f1e]">
+    <native:column class="w-full px-4 pt-4 pb-8 gap-6 ">
+
+        {{-- 1. BASIC SHAPES --}}
+        <native:text class="text-2xl font-bold text-indigo-600">Basic Shapes</native:text>
+
+        <native:skia-canvas class="w-full h-[100] rounded-xl">
+            <native:skia-rect :x="0" :y="0" :width="400" :height="100" color="#1a1a2e" />
+            <native:skia-rect :x="15" :y="15" :width="60" :height="60" color="#6C63FF" />
+            <native:skia-circle :cx="120" :cy="45" :r="30" color="#e94560" />
+            <native:skia-oval :x="170" :y="15" :width="70" :height="50" color="#4CAF50" />
+            <native:skia-arc :cx="280" :cy="45" :r="30" :startAngle="-90" :sweepAngle="270" color="#FF9800" style="fill" :useCenter="1" />
+        </native:skia-canvas>
+
+        {{-- 2. LINES & PATHS --}}
+        <native:text class="text-2xl font-bold text-cyan-600">Lines & Paths</native:text>
+
+        <native:skia-canvas class="w-full h-[100] rounded-xl">
+            <native:skia-rect :x="0" :y="0" :width="400" :height="100" color="#1a1a2e" />
+            <native:skia-line :x1="15" :y1="20" :x2="100" :y2="20" color="#6C63FF" :strokeWidth="2" />
+            <native:skia-line :x1="15" :y1="50" :x2="100" :y2="50" color="#00d2ff" :strokeWidth="6" strokeCap="round" />
+            <native:skia-path path="M 120,50 Q 145,10 170,50 Q 195,90 220,50" color="#4CAF50" style="stroke" :strokeWidth="3" strokeCap="round" />
+            <native:skia-polygon points="300,15 330,50 300,85 270,50" color="#FFD700" />
+        </native:skia-canvas>
+
+        {{-- 3. TEXT --}}
+        <native:text class="text-2xl font-bold text-yellow-500">Text</native:text>
+
+        <native:skia-canvas class="w-full h-[80] rounded-xl">
+            <native:skia-rect :x="0" :y="0" :width="400" :height="80" color="#1a1a2e" />
+            <native:skia-text :x="15" :y="30" text="Regular Text" :fontSize="14" color="#FFFFFF" />
+            <native:skia-text :x="15" :y="55" text="Bold Text" :fontSize="14" color="#00d2ff" align="end" :bold="1" />
+            <native:skia-text :x="200" :y="30" text="Center" :fontSize="16" color="#e94560" align="center" :bold="1" />
+        </native:skia-canvas>
+
+        {{-- 4. GRADIENTS --}}
+        <native:text class="text-2xl font-bold text-[#e94560]">Gradients</native:text>
+
+        <native:skia-canvas class="w-full h-[120] rounded-xl">
+            <native:skia-rect :x="0" :y="0" :width="400" :height="120" color="#1a1a2e" />
+
+            <native:skia-rect :x="15" :y="15" :width="100" :height="55" :borderRadius="8"
+                gradientType="linear" gradientColors="#6C63FF,#00d2ff"
+                :gradientStartX="15" :gradientStartY="15" :gradientEndX="115" :gradientEndY="15" />
+            <native:skia-text :x="65" :y="88" text="Linear" :fontSize="10" color="#8888aa" align="center" />
+
+            <native:skia-circle :cx="190" :cy="42" :r="32"
+                gradientType="radial" gradientColors="#FF9800,#e94560,#1a1a2e"
+                :gradientCenterX="190" :gradientCenterY="35" :gradientRadius="32" />
+            <native:skia-text :x="190" :y="88" text="Radial" :fontSize="10" color="#8888aa" align="center" />
+
+            <native:skia-circle :cx="300" :cy="42" :r="32"
+                gradientType="sweep" gradientColors="#6C63FF,#00d2ff,#4CAF50,#FFD700,#e94560,#6C63FF"
+                :gradientCenterX="300" :gradientCenterY="42" />
+            <native:skia-text :x="300" :y="88" text="Sweep" :fontSize="10" color="#8888aa" align="center" />
+        </native:skia-canvas>
+
+        {{-- 5. ANIMATIONS --}}
+        <native:text class="text-2xl font-bold text-[#4CAF50]">Animations</native:text>
+
+        <native:row class="w-full gap-3">
+            <native:column class="flex-1 items-center gap-2">
+                <native:skia-canvas class="w-[140] h-[140] rounded-xl">
+                    <native:skia-rect :x="0" :y="0" :width="140" :height="140" color="#1a1a2e" />
+
+                    <native:skia-value name="pulse" :from="0.6" :to="1" :duration="1.5"
+                        :running="$pulseRunning ? 1 : 0" :loop="1" easing="easeInOut" />
+
+                    <native:skia-circle :cx="70" :cy="65" :r="45" color="#6C63FF" bind-opacity="pulse" :opacity="0.3" />
+                    <native:skia-circle :cx="70" :cy="65" :r="30" bind-r="pulse"
+                        gradientType="radial" gradientColors="#6C63FF,#00d2ff"
+                        :gradientCenterX="70" :gradientCenterY="58" :gradientRadius="30" />
+                    <native:skia-text :x="70" :y="130" text="Pulsing" :fontSize="10" color="#8888aa" align="center" />
+                </native:skia-canvas>
+
+                <native:button @press="togglePulse" class="bg-[#333355] rounded-full px-4 py-2 text-white text-[12]">
+                    {{ $pulseRunning ? 'Pause' : 'Play' }}
+                </native:button>
+            </native:column>
+
+            <native:column class="flex-1 items-center gap-2">
+                <native:skia-canvas class="w-[140] h-[140] rounded-xl">
+                    <native:skia-rect :x="0" :y="0" :width="140" :height="140" color="#1a1a2e" />
+
+                    <native:skia-value name="spin" :from="0" :to="360" :duration="2"
+                        :running="$spinRunning ? 1 : 0" :loop="1" easing="linear" />
+
+                    <native:skia-circle :cx="70" :cy="65" :r="35" color="#333355" style="stroke" :strokeWidth="6" />
+                    <native:skia-arc :cx="70" :cy="65" :r="35" bind-startAngle="spin" :startAngle="1" :sweepAngle="90"
+                        color="#00d2ff" style="stroke" :strokeWidth="6" strokeCap="round" />
+                    <native:skia-text :x="70" :y="130" text="Spinner" :fontSize="10" color="#8888aa" align="center" />
+                </native:skia-canvas>
+
+                <native:button @press="toggleSpin" class="bg-[#333355] rounded-full px-4 py-2 text-white text-[12]">
+                    {{ $spinRunning ? 'Pause' : 'Play' }}
+                </native:button>
+            </native:column>
+        </native:row>
+
+        {{-- 6. TIMER RING --}}
+        <native:text class="text-2xl font-bold text-[#e94560]">Timer Ring</native:text>
+
+        @php $totalSec = $timerSeconds; @endphp
+
+        <native:column class="w-full items-center gap-4">
+            <native:skia-canvas class="w-[220] h-[220] rounded-xl">
+                <native:skia-rect :x="0" :y="0" :width="220" :height="220" color="#1a1a2e" />
+
+                <native:skia-value name="countdown" :from="1" :to="0"
+                    :duration="$totalSec" :running="$timerRunning ? 1 : 0" easing="linear" />
+
+                <native:skia-circle :cx="110" :cy="110" :r="100"
+                    colorStops="#FF4757,#FF9800,#FFEB3B,#4CAF50" bind-color="countdown"
+                    color="#6C63FF" :opacity="0.12" />
+
+                <native:skia-circle :cx="110" :cy="110" :r="85" color="#333355" style="stroke" :strokeWidth="12" />
+
+                <native:skia-arc :cx="110" :cy="110" :r="85" :startAngle="-90" :sweepAngle="360"
+                    bind-sweepAngle="countdown" bind-color="countdown"
+                    colorStops="#FF4757,#FF9800,#FFEB3B,#4CAF50"
+                    style="stroke" :strokeWidth="12" strokeCap="round" />
+
+                <native:skia-text :x="110" :y="118"
+                    bindText="countdown" textFormat="time" :totalValue="$totalSec"
+                    :fontSize="36" colorStops="#FF4757,#FF9800,#FFEB3B,#4CAF50" bind-color="countdown"
+                    color="#6C63FF" align="center" :bold="1" />
+
+                <native:skia-text :x="110" :y="145" text="REMAINING" :fontSize="9" color="#666688" align="center" />
+            </native:skia-canvas>
+
+            <native:row class="gap-2">
+                <native:button @press="setTimerSeconds(10)" class="bg-[#333355] rounded-full px-3 py-2 text-white text-[12]">10s</native:button>
+                <native:button @press="setTimerSeconds(30)" class="bg-[#333355] rounded-full px-3 py-2 text-white text-[12]">30s</native:button>
+                <native:button @press="setTimerSeconds(60)" class="bg-[#333355] rounded-full px-3 py-2 text-white text-[12]">1m</native:button>
+                <native:button @press="setTimerSeconds(300)" class="bg-[#333355] rounded-full px-3 py-2 text-white text-[12]">5m</native:button>
+            </native:row>
+
+            @if($timerRunning)
+                <native:button @press="toggleTimer" class="bg-[#FF4757] rounded-2xl px-8 py-3 text-white text-[16] font-bold">Cancel</native:button>
+            @else
+                <native:button @press="toggleTimer" class="bg-[#6C63FF] rounded-2xl px-8 py-3 text-white text-[16] font-bold">Start Timer</native:button>
+            @endif
+        </native:column>
+
+        {{-- 7. BAR CHART --}}
+        <native:text class="text-2xl font-bold text-[#FF9800]">Animated Bar Chart</native:text>
+
+        <native:skia-canvas class="w-full h-[200] rounded-xl">
+            <native:skia-rect :x="0" :y="0" :width="400" :height="200" color="#1a1a2e" />
+
+            <native:skia-value name="grow" :from="0" :to="1" :duration="1.5"
+                :running="$barAnimRunning" :loop="0" easing="easeOut" />
+
+            <native:skia-line :x1="0" :y1="50" :x2="400" :y2="50" color="#2a2a4e" :strokeWidth="0.5" />
+            <native:skia-line :x1="0" :y1="100" :x2="400" :y2="100" color="#2a2a4e" :strokeWidth="0.5" />
+            <native:skia-line :x1="0" :y1="150" :x2="400" :y2="150" color="#2a2a4e" :strokeWidth="0.5" />
+
+            <native:skia-rect :x="20" :y="110" :width="40" :height="70" bind-height="grow" :borderRadius="4"
+                gradientType="linear" gradientColors="#6C63FF,#9b93ff"
+                :gradientStartX="20" :gradientStartY="180" :gradientEndX="20" :gradientEndY="110" />
+            <native:skia-rect :x="75" :y="70" :width="40" :height="110" bind-height="grow" :borderRadius="4"
+                gradientType="linear" gradientColors="#00d2ff,#66e5ff"
+                :gradientStartX="75" :gradientStartY="180" :gradientEndX="75" :gradientEndY="70" />
+            <native:skia-rect :x="130" :y="40" :width="40" :height="140" bind-height="grow" :borderRadius="4"
+                gradientType="linear" gradientColors="#e94560,#ff7b93"
+                :gradientStartX="130" :gradientStartY="180" :gradientEndX="130" :gradientEndY="40" />
+            <native:skia-rect :x="185" :y="60" :width="40" :height="120" bind-height="grow" :borderRadius="4"
+                gradientType="linear" gradientColors="#4CAF50,#81C784"
+                :gradientStartX="185" :gradientStartY="180" :gradientEndX="185" :gradientEndY="60" />
+            <native:skia-rect :x="240" :y="90" :width="40" :height="90" bind-height="grow" :borderRadius="4"
+                gradientType="linear" gradientColors="#FF9800,#FFB74D"
+                :gradientStartX="240" :gradientStartY="180" :gradientEndX="240" :gradientEndY="90" />
+            <native:skia-rect :x="295" :y="30" :width="40" :height="150" bind-height="grow" :borderRadius="4"
+                gradientType="linear" gradientColors="#FFD700,#FFEB3B"
+                :gradientStartX="295" :gradientStartY="180" :gradientEndX="295" :gradientEndY="30" />
+
+            <native:skia-text :x="40" :y="195" text="M" :fontSize="10" color="#666688" align="center" />
+            <native:skia-text :x="95" :y="195" text="T" :fontSize="10" color="#666688" align="center" />
+            <native:skia-text :x="150" :y="195" text="W" :fontSize="10" color="#666688" align="center" />
+            <native:skia-text :x="205" :y="195" text="T" :fontSize="10" color="#666688" align="center" />
+            <native:skia-text :x="260" :y="195" text="F" :fontSize="10" color="#666688" align="center" />
+            <native:skia-text :x="315" :y="195" text="S" :fontSize="10" color="#666688" align="center" />
+            <native:skia-text :x="15" :y="18" text="Weekly Revenue" :fontSize="12" color="#FFFFFF" />
+        </native:skia-canvas>
+
+        <native:button @press="toggleBars" class="bg-[#333355] rounded-full px-6 py-2 text-white text-[13]">
+            Replay Bars
+        </native:button>
+
+        {{-- 8. GAUGE --}}
+        <native:text class="text-2xl font-bold text-cyan-600">Gauge</native:text>
+
+        <native:column class="w-full items-center">
+            <native:skia-canvas class="w-[240] h-[160] rounded-xl">
+                <native:skia-rect :x="0" :y="0" :width="240" :height="160" color="#1a1a2e" />
+
+                <native:skia-value name="gauge" :from="0" :to="1" :duration="3"
+                    :running="1" :loop="1" easing="easeInOut" />
+
+                <native:skia-arc :cx="120" :cy="110" :r="80" :startAngle="-210" :sweepAngle="240"
+                    color="#333355" style="stroke" :strokeWidth="14" strokeCap="round" />
+
+                <native:skia-arc :cx="120" :cy="110" :r="80" :startAngle="-210" :sweepAngle="240"
+                    bind-sweepAngle="gauge"
+                    colorStops="#4CAF50,#FFEB3B,#FF9800,#e94560" bind-color="gauge"
+                    style="stroke" :strokeWidth="14" strokeCap="round" />
+
+                <native:skia-text :x="120" :y="115"
+                    bindText="gauge" textFormat="percent"
+                    :fontSize="28" colorStops="#4CAF50,#FFEB3B,#FF9800,#e94560" bind-color="gauge"
+                    color="#FFFFFF" align="center" :bold="1" />
+
+                <native:skia-text :x="120" :y="140" text="SPEED" :fontSize="10" color="#666688" align="center" />
+            </native:skia-canvas>
+        </native:column>
+
+        {{-- 9. PIE CHART --}}
+        <native:text class="text-2xl font-bold text-[#FF9800]">Pie Chart</native:text>
+
+        <native:column class="w-full items-center">
+            <native:skia-canvas class="w-[220] h-[220] rounded-xl">
+                <native:skia-rect :x="0" :y="0" :width="220" :height="220" color="#1a1a2e" />
+
+                <native:skia-arc :cx="110" :cy="100" :r="75" :startAngle="-90" :sweepAngle="120" color="#6C63FF" :useCenter="1" />
+                <native:skia-arc :cx="110" :cy="100" :r="75" :startAngle="30" :sweepAngle="90" color="#00d2ff" :useCenter="1" />
+                <native:skia-arc :cx="110" :cy="100" :r="75" :startAngle="120" :sweepAngle="60" color="#e94560" :useCenter="1" />
+                <native:skia-arc :cx="110" :cy="100" :r="75" :startAngle="180" :sweepAngle="50" color="#4CAF50" :useCenter="1" />
+                <native:skia-arc :cx="110" :cy="100" :r="75" :startAngle="230" :sweepAngle="40" color="#FFD700" :useCenter="1" />
+
+                <native:skia-circle :cx="110" :cy="100" :r="35" color="#1a1a2e" />
+                <native:skia-text :x="110" :y="105" text="100%" :fontSize="14" color="#FFFFFF" align="center" :bold="1" />
+
+                <native:skia-rect :x="30" :y="192" :width="8" :height="8" color="#6C63FF" />
+                <native:skia-text :x="42" :y="200" text="33%" :fontSize="9" color="#8888aa" />
+                <native:skia-rect :x="75" :y="192" :width="8" :height="8" color="#00d2ff" />
+                <native:skia-text :x="87" :y="200" text="25%" :fontSize="9" color="#8888aa" />
+                <native:skia-rect :x="116" :y="192" :width="8" :height="8" color="#e94560" />
+                <native:skia-text :x="128" :y="200" text="17%" :fontSize="9" color="#8888aa" />
+                <native:skia-rect :x="157" :y="192" :width="8" :height="8" color="#4CAF50" />
+                <native:skia-text :x="169" :y="200" text="14%" :fontSize="9" color="#8888aa" />
+                <native:skia-rect :x="198" :y="192" :width="8" :height="8" color="#FFD700" />
+                <native:skia-text :x="210" :y="200" text="11%" :fontSize="9" color="#8888aa" />
+            </native:skia-canvas>
+        </native:column>
+
+        {{-- 10. GROUP TRANSFORMS --}}
+        <native:text class="text-2xl font-bold text-[#9b93ff]">Group Transforms</native:text>
+
+        <native:skia-canvas class="w-full h-[100] rounded-xl">
+            <native:skia-rect :x="0" :y="0" :width="400" :height="100" color="#1a1a2e" />
+
+            <native:skia-group :translateX="30" :translateY="20">
+                <native:skia-rect :x="0" :y="0" :width="50" :height="50" color="#6C63FF" :borderRadius="6" />
+            </native:skia-group>
+            <native:skia-text :x="55" :y="88" text="Translate" :fontSize="9" color="#666688" align="center" />
+
+            <native:skia-group :translateX="145" :translateY="45" :rotate="30">
+                <native:skia-rect :x="-25" :y="-25" :width="50" :height="50" color="#00d2ff" :borderRadius="6" />
+            </native:skia-group>
+            <native:skia-text :x="145" :y="88" text="Rotate" :fontSize="9" color="#666688" align="center" />
+
+            <native:skia-group :translateX="240" :translateY="45" :scaleX="1.5" :scaleY="0.7">
+                <native:skia-rect :x="-25" :y="-25" :width="50" :height="50" color="#e94560" :borderRadius="6" />
+            </native:skia-group>
+            <native:skia-text :x="240" :y="88" text="Scale" :fontSize="9" color="#666688" align="center" />
+
+            <native:skia-group :translateX="330" :translateY="15" :opacity="0.5">
+                <native:skia-rect :x="0" :y="0" :width="50" :height="50" color="#4CAF50" :borderRadius="6" />
+                <native:skia-circle :cx="25" :cy="25" :r="15" color="#FFFFFF" />
+            </native:skia-group>
+            <native:skia-text :x="355" :y="88" text="Opacity" :fontSize="9" color="#666688" align="center" />
+        </native:skia-canvas>
+
+        {{-- 11. COLOR ANIMATION --}}
+        <native:text class="text-2xl font-bold text-[#e94560]">Color Animation</native:text>
+
+        <native:column class="w-full items-center">
+            <native:skia-canvas class="w-full h-[100] rounded-xl">
+                <native:skia-rect :x="0" :y="0" :width="400" :height="100" color="#1a1a2e" />
+
+                <native:skia-value name="colorCycle" :from="0" :to="1" :duration="3"
+                    :running="1" :loop="1" easing="linear" />
+
+                <native:skia-circle :cx="60" :cy="50" :r="30"
+                    colorStops="#6C63FF,#00d2ff,#4CAF50,#FFD700,#FF9800,#e94560,#6C63FF" bind-color="colorCycle" />
+                <native:skia-circle :cx="140" :cy="50" :r="30"
+                    colorStops="#e94560,#6C63FF,#00d2ff,#4CAF50,#FFD700,#FF9800,#e94560" bind-color="colorCycle" />
+                <native:skia-circle :cx="220" :cy="50" :r="30"
+                    colorStops="#4CAF50,#FFD700,#FF9800,#e94560,#6C63FF,#00d2ff,#4CAF50" bind-color="colorCycle" />
+                <native:skia-circle :cx="300" :cy="50" :r="30"
+                    colorStops="#FFD700,#FF9800,#e94560,#6C63FF,#00d2ff,#4CAF50,#FFD700" bind-color="colorCycle" />
+
+                <native:skia-text :x="200" :y="95" text="Phase-shifted color cycling" :fontSize="9" color="#666688" align="center" />
+            </native:skia-canvas>
+        </native:column>
+
+        <native:spacer class="h-[40]" />
+
+    </native:column>
+
+    <native:column class="w-full px-4 pt-4 pb-8 gap-6 items-center">
+
+        {{-- React Native Skia "Hello World" — overlapping circles with multiply blend --}}
+        <native:text class="text-2xl font-bold text-indigo-600">Multiply Blend</native:text>
+
+        <native:skia-canvas class="w-[256] h-[256] rounded-xl">
+            <native:skia-rect :x="0" :y="0" :width="256" :height="256" color="#FFFFFF" />
+            <native:skia-group blendMode="multiply">
+                <native:skia-circle :cx="84" :cy="84" :r="84" color="cyan" />
+                <native:skia-circle :cx="172" :cy="84" :r="84" color="magenta" />
+                <native:skia-circle :cx="128" :cy="172" :r="84" color="yellow" />
+            </native:skia-group>
+        </native:skia-canvas>
+
+        {{-- Screen blend --}}
+        <native:text class="text-2xl font-bold text-cyan-600">Screen Blend</native:text>
+
+        <native:skia-canvas class="w-[256] h-[256] rounded-xl">
+            <native:skia-rect :x="0" :y="0" :width="256" :height="256" color="#000000" />
+            <native:skia-group blendMode="screen">
+                <native:skia-circle :cx="84" :cy="84" :r="84" color="red" />
+                <native:skia-circle :cx="172" :cy="84" :r="84" color="green" />
+                <native:skia-circle :cx="128" :cy="172" :r="84" color="blue" />
+            </native:skia-group>
+        </native:skia-canvas>
+
+        {{-- Overlay blend --}}
+        <native:text class="text-2xl font-bold text-[#e94560]">Overlay Blend</native:text>
+
+        <native:skia-canvas class="w-[256] h-[256] rounded-xl">
+            <native:skia-rect :x="0" :y="0" :width="256" :height="256" color="#333333" />
+            <native:skia-group blendMode="overlay">
+                <native:skia-circle :cx="84" :cy="84" :r="84" color="coral" />
+                <native:skia-circle :cx="172" :cy="84" :r="84" color="turquoise" />
+                <native:skia-circle :cx="128" :cy="172" :r="84" color="gold" />
+            </native:skia-group>
+        </native:skia-canvas>
+
+    </native:column>
+</native:scroll-view>
diff --git a/routes/console.php b/routes/console.php
index 3c9adf1..f7cf365 100644
--- a/routes/console.php
+++ b/routes/console.php
@@ -2,7 +2,14 @@
 
 use Illuminate\Foundation\Inspiring;
 use Illuminate\Support\Facades\Artisan;
+use Illuminate\Support\Facades\Schedule;
 
 Artisan::command('inspire', function () {
     $this->comment(Inspiring::quote());
 })->purpose('Display an inspiring quote');
+
+//Schedule::command('sync:data')
+//    ->everyFifteenMinutes()
+//    ->nativeConstraints(function ($c) {
+//        $c->requiresNetwork();
+//    });
diff --git a/routes/web.php b/routes/web.php
index a9b6e37..6ceb213 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -6,6 +6,7 @@
 // Benchmark & Demo
 Route::native('/benchmark', BenchmarkComponent::class)->name('benchmark');
 Route::native('/demo', \App\NativeComponents\Demo::class)->name('demo');
+Route::native('/skia', \App\NativeComponents\SkiaShowcase::class)->name('skia');
 
 // Explore (Airbnb)
 Route::native('/', \App\NativeComponents\Explore::class)->name('explore');
diff --git a/storage/.DS_Store b/storage/.DS_Store
new file mode 100644
index 0000000..ea43582
Binary files /dev/null and b/storage/.DS_Store differ
diff --git a/tests/.DS_Store b/tests/.DS_Store
new file mode 100644
index 0000000..4ba1ee2
Binary files /dev/null and b/tests/.DS_Store differ