diff --git a/app/Console/Commands/MashupCreateCommand.php b/app/Console/Commands/MashupCreateCommand.php
new file mode 100644
index 0000000..4c1e0cc
--- /dev/null
+++ b/app/Console/Commands/MashupCreateCommand.php
@@ -0,0 +1,172 @@
+<?php
+
+namespace App\Console\Commands;
+
+use App\Models\Device;
+use App\Models\Playlist;
+use App\Models\PlaylistItem;
+use App\Models\Plugin;
+use Illuminate\Console\Command;
+use Illuminate\Support\Collection;
+
+use function Laravel\Prompts\select;
+use function Laravel\Prompts\text;
+
+class MashupCreateCommand extends Command
+{
+    /**
+     * The name and signature of the console command.
+     *
+     * @var string
+     */
+    protected $signature = 'mashup:create';
+
+    /**
+     * The console command description.
+     *
+     * @var string
+     */
+    protected $description = 'Create a new mashup and add it to a playlist';
+
+    /**
+     * Execute the console command.
+     */
+    public function handle()
+    {
+        // Select device
+        $device = $this->selectDevice();
+        if (! $device) {
+            return 1;
+        }
+
+        // Select playlist
+        $playlist = $this->selectPlaylist($device);
+        if (! $playlist) {
+            return 1;
+        }
+
+        // Select mashup layout
+        $layout = $this->selectLayout();
+        if (! $layout) {
+            return 1;
+        }
+
+        // Get mashup name
+        $name = $this->getMashupName();
+        if (! $name) {
+            return 1;
+        }
+
+        // Select plugins
+        $plugins = $this->selectPlugins($layout);
+        if ($plugins->isEmpty()) {
+            return 1;
+        }
+
+        $maxOrder = $playlist->items()->max('order') ?? 0;
+
+        // Create playlist item with mashup
+        PlaylistItem::createMashup(
+            playlist: $playlist,
+            layout: $layout,
+            pluginIds: $plugins->pluck('id')->toArray(),
+            name: $name,
+            order: $maxOrder + 1
+        );
+
+        $this->info('Mashup created successfully!');
+
+        return 0;
+    }
+
+    protected function selectDevice(): ?Device
+    {
+        $devices = Device::all();
+        if ($devices->isEmpty()) {
+            $this->error('No devices found. Please create a device first.');
+
+            return null;
+        }
+
+        $deviceId = select(
+            label: 'Select a device',
+            options: $devices->mapWithKeys(fn ($device) => [$device->id => $device->name])->toArray()
+        );
+
+        return $devices->firstWhere('id', $deviceId);
+    }
+
+    protected function selectPlaylist(Device $device): ?Playlist
+    {
+        $playlists = $device->playlists;
+        if ($playlists->isEmpty()) {
+            $this->error('No playlists found for this device. Please create a playlist first.');
+
+            return null;
+        }
+
+        $playlistId = select(
+            label: 'Select a playlist',
+            options: $playlists->mapWithKeys(fn ($playlist) => [$playlist->id => $playlist->name])->toArray()
+        );
+
+        return $playlists->firstWhere('id', $playlistId);
+    }
+
+    protected function selectLayout(): ?string
+    {
+        return select(
+            label: 'Select a layout',
+            options: PlaylistItem::getAvailableLayouts()
+        );
+    }
+
+    protected function getMashupName(): ?string
+    {
+        return text(
+            label: 'Enter a name for this mashup',
+            required: true,
+            default: 'Mashup',
+            validate: fn (string $value) => match (true) {
+                strlen($value) < 1 => 'The name must be at least 2 characters.',
+                strlen($value) > 50 => 'The name must not exceed 50 characters.',
+                default => null,
+            }
+        );
+    }
+
+    protected function selectPlugins(string $layout): Collection
+    {
+        $requiredCount = PlaylistItem::getRequiredPluginCountForLayout($layout);
+
+        $plugins = Plugin::all();
+        if ($plugins->isEmpty()) {
+            $this->error('No plugins found. Please create some plugins first.');
+
+            return collect();
+        }
+
+        $selectedPlugins = collect();
+        $availablePlugins = $plugins->mapWithKeys(fn ($plugin) => [$plugin->id => $plugin->name])->toArray();
+
+        for ($i = 0; $i < $requiredCount; $i++) {
+            $position = match ($i) {
+                0 => 'first',
+                1 => 'second',
+                2 => 'third',
+                3 => 'fourth',
+                default => ($i + 1).'th'
+            };
+
+            $pluginId = select(
+                label: "Select the $position plugin",
+                options: $availablePlugins
+            );
+
+            $selectedPlugins->push($plugins->firstWhere('id', $pluginId));
+            unset($availablePlugins[$pluginId]);
+        }
+
+        return $selectedPlugins;
+    }
+}
diff --git a/app/Models/PlaylistItem.php b/app/Models/PlaylistItem.php
index 4eba877..d8913fc 100644
--- a/app/Models/PlaylistItem.php
+++ b/app/Models/PlaylistItem.php
@@ -15,6 +15,7 @@ class PlaylistItem extends Model
     protected $casts = [
         'is_active' => 'boolean',
         'last_displayed_at' => 'datetime',
+        'mashup' => 'json',
     ];
 
     public function playlist(): BelongsTo
@@ -26,4 +27,179 @@ class PlaylistItem extends Model
     {
         return $this->belongsTo(Plugin::class);
     }
+
+    /**
+     * Check if this playlist item is a mashup
+     */
+    public function isMashup(): bool
+    {
+        return ! is_null($this->mashup);
+    }
+
+    /**
+     * Get the mashup name if this is a mashup
+     */
+    public function getMashupName(): ?string
+    {
+        return $this->mashup['mashup_name'] ?? null;
+    }
+
+    /**
+     * Get the mashup layout type if this is a mashup
+     */
+    public function getMashupLayoutType(): ?string
+    {
+        return $this->mashup['mashup_layout'] ?? null;
+    }
+
+    /**
+     * Get all plugin IDs for this mashup
+     */
+    public function getMashupPluginIds(): array
+    {
+        return $this->mashup['plugin_ids'] ?? [];
+    }
+
+    /**
+     * Get the number of plugins required for the current layout
+     */
+    public function getRequiredPluginCount(): int
+    {
+        if (! $this->isMashup()) {
+            return 1;
+        }
+
+        return match ($this->getMashupLayoutType()) {
+            '1Lx1R', '1Tx1B' => 2,  // Left-Right or Top-Bottom split
+            '1Lx2R', '2Lx1R', '2Tx1B', '1Tx2B' => 3,  // Two on one side, one on other
+            '2x2' => 4,  // Quadrant
+            default => 1,
+        };
+    }
+
+    /**
+     * Get the layout type (horizontal, vertical, or grid)
+     */
+    public function getLayoutType(): string
+    {
+        if (! $this->isMashup()) {
+            return 'single';
+        }
+
+        return match ($this->getMashupLayoutType()) {
+            '1Lx1R', '1Lx2R', '2Lx1R' => 'vertical',
+            '1Tx1B', '2Tx1B', '1Tx2B' => 'horizontal',
+            '2x2' => 'grid',
+            default => 'single',
+        };
+    }
+
+    /**
+     * Get the layout size for a plugin based on its position
+     */
+    public function getLayoutSize(int $position = 0): string
+    {
+        if (! $this->isMashup()) {
+            return 'full';
+        }
+
+        return match ($this->getMashupLayoutType()) {
+            '1Lx1R' => 'half_vertical',  // Both sides are single plugins
+            '1Tx1B' => 'half_horizontal',  // Both sides are single plugins
+            '2Lx1R' => match ($position) {
+                0, 1 => 'quadrant',  // Left side has 2 plugins
+                2 => 'half_vertical',  // Right side has 1 plugin
+                default => 'full'
+            },
+            '1Lx2R' => match ($position) {
+                0 => 'half_vertical',  // Left side has 1 plugin
+                1, 2 => 'quadrant',  // Right side has 2 plugins
+                default => 'full'
+            },
+            '2Tx1B' => match ($position) {
+                0, 1 => 'quadrant',  // Top side has 2 plugins
+                2 => 'half_horizontal',  // Bottom side has 1 plugin
+                default => 'full'
+            },
+            '1Tx2B' => match ($position) {
+                0 => 'half_horizontal',  // Top side has 1 plugin
+                1, 2 => 'quadrant',  // Bottom side has 2 plugins
+                default => 'full'
+            },
+            '2x2' => 'quadrant',  // All positions are quadrants
+            default => 'full'
+        };
+    }
+
+    /**
+     * Render all plugins with appropriate layout
+     */
+    public function render(): string
+    {
+        if (! $this->isMashup()) {
+            return view('trmnl-layouts.single', [
+                'slot' => $this->plugin->render('full', false),
+            ])->render();
+        }
+
+        $pluginMarkups = [];
+        $plugins = Plugin::whereIn('id', $this->getMashupPluginIds())->get();
+
+        foreach ($plugins as $index => $plugin) {
+            $size = $this->getLayoutSize($index);
+            $pluginMarkups[] = $plugin->render($size, false);
+        }
+
+        return view('trmnl-layouts.mashup', [
+            'mashupLayout' => $this->getMashupLayoutType(),
+            'slot' => implode('', $pluginMarkups),
+        ])->render();
+    }
+
+    /**
+     * Available mashup layouts with their descriptions
+     */
+    public static function getAvailableLayouts(): array
+    {
+        return [
+            '1Lx1R' => '1 Left - 1 Right (2 plugins)',
+            '1Lx2R' => '1 Left - 2 Right (3 plugins)',
+            '2Lx1R' => '2 Left - 1 Right (3 plugins)',
+            '1Tx1B' => '1 Top - 1 Bottom (2 plugins)',
+            '2Tx1B' => '2 Top - 1 Bottom (3 plugins)',
+            '1Tx2B' => '1 Top - 2 Bottom (3 plugins)',
+            '2x2' => 'Quadrant (4 plugins)',
+        ];
+    }
+
+    /**
+     * Get the required number of plugins for a given layout
+     */
+    public static function getRequiredPluginCountForLayout(string $layout): int
+    {
+        return match ($layout) {
+            '1Lx1R', '1Tx1B' => 2,
+            '1Lx2R', '2Lx1R', '2Tx1B', '1Tx2B' => 3,
+            '2x2' => 4,
+            default => 1,
+        };
+    }
+
+    /**
+     * Create a new mashup with the given layout and plugins
+     */
+    public static function createMashup(Playlist $playlist, string $layout, array $pluginIds, string $name, $order): self
+    {
+        return static::create([
+            'playlist_id' => $playlist->id,
+            'plugin_id' => $pluginIds[0], // First plugin is the main plugin
+            'mashup' => [
+                'mashup_layout' => $layout,
+                'mashup_name' => $name,
+                'plugin_ids' => $pluginIds,
+            ],
+            'is_active' => true,
+            'order' => $order,
+        ]);
+    }
 }
diff --git a/app/Models/Plugin.php b/app/Models/Plugin.php
index fa5dbd6..30c5938 100644
--- a/app/Models/Plugin.php
+++ b/app/Models/Plugin.php
@@ -4,6 +4,7 @@ namespace App\Models;
 
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
+use Illuminate\Support\Facades\Blade;
 use Illuminate\Support\Facades\Http;
 use Illuminate\Support\Str;
 
@@ -65,4 +66,38 @@ class Plugin extends Model
             ]);
         }
     }
+
+    /**
+     * Render the plugin's markup
+     */
+    public function render(string $size = 'full', bool $standalone = true): string
+    {
+        if ($this->render_markup) {
+            if ($standalone) {
+                return view('trmnl-layouts.single', [
+                    'slot' => Blade::render($this->render_markup, ['size' => $size, 'data' => $this->data_payload]),
+                ])->render();
+            }
+
+            return Blade::render($this->render_markup, ['size' => $size, 'data' => $this->data_payload]);
+        }
+
+        if ($this->render_markup_view) {
+            if ($standalone) {
+                return view('trmnl-layouts.single', [
+                    'slot' => view($this->render_markup_view, [
+                        'size' => $size,
+                        'data' => $this->data_payload,
+                    ])->render(),
+                ])->render();
+            } else {
+                return view($this->render_markup_view, [
+                    'size' => $size,
+                    'data' => $this->data_payload,
+                ])->render();
+            }
+        }
+
+        return '<p>No render markup yet defined for this plugin.</p>';
+    }
 }
diff --git a/composer.json b/composer.json
index f890ca4..a995526 100644
--- a/composer.json
+++ b/composer.json
@@ -12,7 +12,7 @@
     "require": {
         "php": "^8.2",
         "ext-imagick": "*",
-        "bnussbau/laravel-trmnl-blade": "1.0.*",
+        "bnussbau/laravel-trmnl-blade": "1.1.*",
         "intervention/image": "^3.11",
         "keepsuit/laravel-liquid": "^0.5.2",
         "laravel/framework": "^12.1",
diff --git a/composer.lock b/composer.lock
index 5661d09..c2d89f0 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": "abffc30d88cd79c676be64cb30b8cfb1",
+    "content-hash": "63075a49e79059d81034658d332d9dd8",
     "packages": [
         {
             "name": "aws/aws-crt-php",
@@ -62,16 +62,16 @@
         },
         {
             "name": "aws/aws-sdk-php",
-            "version": "3.343.24",
+            "version": "3.344.2",
             "source": {
                 "type": "git",
                 "url": "https://github.com/aws/aws-sdk-php.git",
-                "reference": "5308e15ca92655906d04d5945613ab9046b4f79f"
+                "reference": "3a6aaaea75f4605f89aa57ad63b9a077bf01e1e5"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/aws/aws-sdk-php/zipball/5308e15ca92655906d04d5945613ab9046b4f79f",
-                "reference": "5308e15ca92655906d04d5945613ab9046b4f79f",
+                "url": "https://api.github.com/repos/aws/aws-sdk-php/zipball/3a6aaaea75f4605f89aa57ad63b9a077bf01e1e5",
+                "reference": "3a6aaaea75f4605f89aa57ad63b9a077bf01e1e5",
                 "shasum": ""
             },
             "require": {
@@ -153,22 +153,22 @@
             "support": {
                 "forum": "https://github.com/aws/aws-sdk-php/discussions",
                 "issues": "https://github.com/aws/aws-sdk-php/issues",
-                "source": "https://github.com/aws/aws-sdk-php/tree/3.343.24"
+                "source": "https://github.com/aws/aws-sdk-php/tree/3.344.2"
             },
-            "time": "2025-06-03T18:04:18+00:00"
+            "time": "2025-06-06T18:14:42+00:00"
         },
         {
             "name": "bnussbau/laravel-trmnl-blade",
-            "version": "1.0.0",
+            "version": "1.1.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/bnussbau/laravel-trmnl-blade.git",
-                "reference": "9e23a83c2dbb33286d0940c5282eaa8b142cd218"
+                "reference": "f57a7e2f855d882364e9ce2bb1a239b9387cdd75"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/bnussbau/laravel-trmnl-blade/zipball/9e23a83c2dbb33286d0940c5282eaa8b142cd218",
-                "reference": "9e23a83c2dbb33286d0940c5282eaa8b142cd218",
+                "url": "https://api.github.com/repos/bnussbau/laravel-trmnl-blade/zipball/f57a7e2f855d882364e9ce2bb1a239b9387cdd75",
+                "reference": "f57a7e2f855d882364e9ce2bb1a239b9387cdd75",
                 "shasum": ""
             },
             "require": {
@@ -223,7 +223,7 @@
             ],
             "support": {
                 "issues": "https://github.com/bnussbau/laravel-trmnl-blade/issues",
-                "source": "https://github.com/bnussbau/laravel-trmnl-blade/tree/1.0.0"
+                "source": "https://github.com/bnussbau/laravel-trmnl-blade/tree/1.1.0"
             },
             "funding": [
                 {
@@ -235,7 +235,7 @@
                     "type": "custom"
                 }
             ],
-            "time": "2025-06-04T15:52:22+00:00"
+            "time": "2025-06-10T13:05:01+00:00"
         },
         {
             "name": "brick/math",
@@ -7571,16 +7571,16 @@
         },
         {
             "name": "laravel/pail",
-            "version": "v1.2.2",
+            "version": "v1.2.3",
             "source": {
                 "type": "git",
                 "url": "https://github.com/laravel/pail.git",
-                "reference": "f31f4980f52be17c4667f3eafe034e6826787db2"
+                "reference": "8cc3d575c1f0e57eeb923f366a37528c50d2385a"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/laravel/pail/zipball/f31f4980f52be17c4667f3eafe034e6826787db2",
-                "reference": "f31f4980f52be17c4667f3eafe034e6826787db2",
+                "url": "https://api.github.com/repos/laravel/pail/zipball/8cc3d575c1f0e57eeb923f366a37528c50d2385a",
+                "reference": "8cc3d575c1f0e57eeb923f366a37528c50d2385a",
                 "shasum": ""
             },
             "require": {
@@ -7600,7 +7600,7 @@
                 "orchestra/testbench-core": "^8.13|^9.0|^10.0",
                 "pestphp/pest": "^2.20|^3.0",
                 "pestphp/pest-plugin-type-coverage": "^2.3|^3.0",
-                "phpstan/phpstan": "^1.10",
+                "phpstan/phpstan": "^1.12.27",
                 "symfony/var-dumper": "^6.3|^7.0"
             },
             "type": "library",
@@ -7636,6 +7636,7 @@
             "description": "Easily delve into your Laravel application's log files directly from the command line.",
             "homepage": "https://github.com/laravel/pail",
             "keywords": [
+                "dev",
                 "laravel",
                 "logs",
                 "php",
@@ -7645,7 +7646,7 @@
                 "issues": "https://github.com/laravel/pail/issues",
                 "source": "https://github.com/laravel/pail"
             },
-            "time": "2025-01-28T15:15:15+00:00"
+            "time": "2025-06-05T13:55:57+00:00"
         },
         {
             "name": "laravel/pint",
diff --git a/database/factories/PlaylistItemFactory.php b/database/factories/PlaylistItemFactory.php
index 9045e58..a7a1d97 100644
--- a/database/factories/PlaylistItemFactory.php
+++ b/database/factories/PlaylistItemFactory.php
@@ -17,6 +17,7 @@ class PlaylistItemFactory extends Factory
         return [
             'playlist_id' => Playlist::factory(),
             'plugin_id' => Plugin::factory(),
+            'mashup' => null,
             'order' => $this->faker->numberBetween(0, 100),
             'is_active' => $this->faker->boolean(80), // 80% chance of being active
             'last_displayed_at' => null,
diff --git a/database/migrations/2025_06_10_211056_add_mashup_to_playlist_items_table.php b/database/migrations/2025_06_10_211056_add_mashup_to_playlist_items_table.php
new file mode 100644
index 0000000..a8a61d5
--- /dev/null
+++ b/database/migrations/2025_06_10_211056_add_mashup_to_playlist_items_table.php
@@ -0,0 +1,22 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::table('playlist_items', function (Blueprint $table) {
+            $table->json('mashup')->nullable();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::table('playlist_items', function (Blueprint $table) {
+            $table->dropColumn('mashup');
+        });
+    }
+};
diff --git a/database/seeders/DatabaseSeeder.php b/database/seeders/DatabaseSeeder.php
index 66b5d5f..be688db 100644
--- a/database/seeders/DatabaseSeeder.php
+++ b/database/seeders/DatabaseSeeder.php
@@ -34,6 +34,7 @@ class DatabaseSeeder extends Seeder
 
             $this->call([
                 ExampleRecipesSeeder::class,
+                MashupPocSeeder::class,
             ]);
         }
     }
diff --git a/database/seeders/MashupPocSeeder.php b/database/seeders/MashupPocSeeder.php
new file mode 100644
index 0000000..35060f8
--- /dev/null
+++ b/database/seeders/MashupPocSeeder.php
@@ -0,0 +1,50 @@
+<?php
+
+namespace Database\Seeders;
+
+use App\Models\Playlist;
+use App\Models\PlaylistItem;
+use Illuminate\Database\Seeder;
+
+class MashupPocSeeder extends Seeder
+{
+    /**
+     * Run the database seeds.
+     */
+    public function run(): void
+    {
+        // Create a playlist
+        $playlist = Playlist::create([
+            'device_id' => 1,
+            'name' => 'Mashup Test Playlist',
+            'is_active' => true,
+        ]);
+
+        // Create a playlist item with 1Tx1B layout using the new JSON structure
+        PlaylistItem::createMashup(
+            playlist: $playlist,
+            layout: '1Tx1B',
+            pluginIds: [2, 3], // Top and bottom plugins
+            name: 'Mashup 1Tx1B',
+            order: 1
+        );
+
+        // Create another playlist item with 2x2 layout
+        PlaylistItem::createMashup(
+            playlist: $playlist,
+            layout: '1Lx1R',
+            pluginIds: [2, 6], // All four quadrants
+            name: 'Mashup Quadrant',
+            order: 2
+        );
+
+        // Create a single plugin item (no mashup)
+        PlaylistItem::create([
+            'playlist_id' => $playlist->id,
+            'plugin_id' => 1,
+            'mashup' => null,
+            'is_active' => true,
+            'order' => 3,
+        ]);
+    }
+}
diff --git a/resources/views/flux/icon/mashup-1Lx1R.blade.php b/resources/views/flux/icon/mashup-1Lx1R.blade.php
new file mode 100644
index 0000000..75d1a3d
--- /dev/null
+++ b/resources/views/flux/icon/mashup-1Lx1R.blade.php
@@ -0,0 +1,39 @@
+{{-- Credit: Lucide (https://lucide.dev) --}}
+
+@props([
+    'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+    ->add(match($variant) {
+        'outline' => '[:where(&)]:size-6',
+        'solid' => '[:where(&)]:size-6',
+        'mini' => '[:where(&)]:size-5',
+        'micro' => '[:where(&)]:size-4',
+    });
+
+$strokeWidth = match ($variant) {
+    'outline' => 2,
+    'mini' => 2.25,
+    'micro' => 2.5,
+    default => 2,
+};
+@endphp
+
+<svg
+    {{ $attributes->class($classes) }}
+    data-flux-icon
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 76 44"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="{{ $strokeWidth }}"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+    data-slot="icon"
+>
+    <rect width="36.5" height="44" rx="3"/>
+    <rect x="39.5" width="36.5" height="44" rx="3"/>
+</svg>
diff --git a/resources/views/flux/icon/mashup-1Lx2R.blade.php b/resources/views/flux/icon/mashup-1Lx2R.blade.php
new file mode 100644
index 0000000..5794416
--- /dev/null
+++ b/resources/views/flux/icon/mashup-1Lx2R.blade.php
@@ -0,0 +1,40 @@
+{{-- Credit: Lucide (https://lucide.dev) --}}
+
+@props([
+    'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+    ->add(match($variant) {
+        'outline' => '[:where(&)]:size-6',
+        'solid' => '[:where(&)]:size-6',
+        'mini' => '[:where(&)]:size-5',
+        'micro' => '[:where(&)]:size-4',
+    });
+
+$strokeWidth = match ($variant) {
+    'outline' => 2,
+    'mini' => 2.25,
+    'micro' => 2.5,
+    default => 2,
+};
+@endphp
+
+<svg
+    {{ $attributes->class($classes) }}
+    data-flux-icon
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 76 44"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="{{ $strokeWidth }}"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+    data-slot="icon"
+>
+    <rect width="36.5" height="44" rx="3"/>
+    <rect x="39.5" width="36.5" height="20.5" rx="3"/>
+    <rect x="39.5" y="23.5" width="36.5" height="20.5" rx="3"/>
+</svg>
diff --git a/resources/views/flux/icon/mashup-1Tx1B.blade.php b/resources/views/flux/icon/mashup-1Tx1B.blade.php
new file mode 100644
index 0000000..c392742
--- /dev/null
+++ b/resources/views/flux/icon/mashup-1Tx1B.blade.php
@@ -0,0 +1,39 @@
+{{-- Credit: Lucide (https://lucide.dev) --}}
+
+@props([
+    'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+    ->add(match($variant) {
+        'outline' => '[:where(&)]:size-6',
+        'solid' => '[:where(&)]:size-6',
+        'mini' => '[:where(&)]:size-5',
+        'micro' => '[:where(&)]:size-4',
+    });
+
+$strokeWidth = match ($variant) {
+    'outline' => 2,
+    'mini' => 2.25,
+    'micro' => 2.5,
+    default => 2,
+};
+@endphp
+
+<svg
+    {{ $attributes->class($classes) }}
+    data-flux-icon
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 76 44"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="{{ $strokeWidth }}"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+    data-slot="icon"
+>
+    <rect y="23.5" width="76" height="20.5" rx="3"/>
+    <rect width="76" height="20.5" rx="3"/>
+</svg>
diff --git a/resources/views/flux/icon/mashup-1x1.blade.php b/resources/views/flux/icon/mashup-1x1.blade.php
new file mode 100644
index 0000000..398b3cf
--- /dev/null
+++ b/resources/views/flux/icon/mashup-1x1.blade.php
@@ -0,0 +1,38 @@
+{{-- Credit: Lucide (https://lucide.dev) --}}
+
+@props([
+    'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+    ->add(match($variant) {
+        'outline' => '[:where(&)]:size-6',
+        'solid' => '[:where(&)]:size-6',
+        'mini' => '[:where(&)]:size-5',
+        'micro' => '[:where(&)]:size-4',
+    });
+
+$strokeWidth = match ($variant) {
+    'outline' => 2,
+    'mini' => 2.25,
+    'micro' => 2.5,
+    default => 2,
+};
+@endphp
+
+<svg
+    {{ $attributes->class($classes) }}
+    data-flux-icon
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 76 44"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="{{ $strokeWidth }}"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+    data-slot="icon"
+>
+    <rect width="76" height="44" rx="3"/>
+</svg>
diff --git a/resources/views/flux/icon/mashup-2Lx1R.blade.php b/resources/views/flux/icon/mashup-2Lx1R.blade.php
new file mode 100644
index 0000000..9f3a630
--- /dev/null
+++ b/resources/views/flux/icon/mashup-2Lx1R.blade.php
@@ -0,0 +1,40 @@
+{{-- Credit: Lucide (https://lucide.dev) --}}
+
+@props([
+    'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+    ->add(match($variant) {
+        'outline' => '[:where(&)]:size-6',
+        'solid' => '[:where(&)]:size-6',
+        'mini' => '[:where(&)]:size-5',
+        'micro' => '[:where(&)]:size-4',
+    });
+
+$strokeWidth = match ($variant) {
+    'outline' => 2,
+    'mini' => 2.25,
+    'micro' => 2.5,
+    default => 2,
+};
+@endphp
+
+<svg
+    {{ $attributes->class($classes) }}
+    data-flux-icon
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 76 44"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="{{ $strokeWidth }}"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+    data-slot="icon"
+>
+    <rect x="39.5" width="36.5" height="44" rx="3"/>
+    <rect width="36.5" height="20.5" rx="3"/>
+    <rect y="23.5" width="36.5" height="20.5" rx="3"/>
+</svg>
diff --git a/resources/views/flux/icon/mashup-2x2.blade.php b/resources/views/flux/icon/mashup-2x2.blade.php
new file mode 100644
index 0000000..71077ca
--- /dev/null
+++ b/resources/views/flux/icon/mashup-2x2.blade.php
@@ -0,0 +1,41 @@
+{{-- Credit: Lucide (https://lucide.dev) --}}
+
+@props([
+    'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+    ->add(match($variant) {
+        'outline' => '[:where(&)]:size-6',
+        'solid' => '[:where(&)]:size-6',
+        'mini' => '[:where(&)]:size-5',
+        'micro' => '[:where(&)]:size-4',
+    });
+
+$strokeWidth = match ($variant) {
+    'outline' => 2,
+    'mini' => 2.25,
+    'micro' => 2.5,
+    default => 2,
+};
+@endphp
+
+<svg
+    {{ $attributes->class($classes) }}
+    data-flux-icon
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 76 44"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="{{ $strokeWidth }}"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+    data-slot="icon"
+>
+    <rect x="39.5" width="36.5" height="20.5" rx="3"/>
+    <rect x="39.5" y="23.5" width="36.5" height="20.5" rx="3"/>
+    <rect width="36.5" height="20.5" rx="3"/>
+    <rect y="23.5" width="36.5" height="20.5" rx="3"/>
+</svg>
diff --git a/resources/views/livewire/playlists/index.blade.php b/resources/views/livewire/playlists/index.blade.php
index 5f5e641..b96814b 100644
--- a/resources/views/livewire/playlists/index.blade.php
+++ b/resources/views/livewire/playlists/index.blade.php
@@ -195,7 +195,19 @@ new class extends Component {
                                             @foreach($playlist->items->sortBy('order') as $item)
                                                 <tr data-flux-row>
                                                     <td class="py-3 px-3 first:pl-0 last:pr-0 text-sm whitespace-nowrap text-zinc-500 dark:text-zinc-300">
-                                                        {{ $item->plugin->name }}
+                                                        @if($item->isMashup())
+                                                            <div class="flex items-center gap-2">
+                                                                <div>
+                                                                    <div class="font-medium">{{ $item->getMashupName() }}</div>
+                                                                    <div class="text-xs text-zinc-500 dark:text-zinc-400">
+                                                                        <flux:icon name="mashup-{{ $item->getMashupLayoutType() }}" class="inline-block pb-1" variant="mini" />
+                                                                        {{ collect($item->getMashupPluginIds())->map(fn($id) => App\Models\Plugin::find($id)->name)->join(' | ') }}
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        @else
+                                                            <div class="font-medium">{{ $item->plugin->name }}</div>
+                                                        @endif
                                                     </td>
                                                     <td class="py-3 px-3 first:pl-0 last:pr-0 text-sm whitespace-nowrap text-zinc-500 dark:text-zinc-300">
                                                         <flux:switch wire:model.live="item.is_active"
@@ -219,8 +231,20 @@ new class extends Component {
 
                                                         <flux:modal name="delete-playlist-item-{{ $item->id }}" class="min-w-[22rem] space-y-6">
                                                             <div>
-                                                                <flux:heading size="lg">Delete {{ $item->plugin->name }}?</flux:heading>
-                                                                <p class="mt-2 text-sm text-zinc-600 dark:text-zinc-400">This will remove this item from the playlist.</p>
+                                                                <flux:heading size="lg">
+                                                                    @if($item->isMashup())
+                                                                        Delete {{ $item->getMashupName() }}?
+                                                                    @else
+                                                                        Delete {{ $item->plugin->name }}?
+                                                                    @endif
+                                                                </flux:heading>
+                                                                <p class="mt-2 text-sm text-zinc-600 dark:text-zinc-400">
+                                                                    @if($item->isMashup())
+                                                                        This will remove this mashup from the playlist.
+                                                                    @else
+                                                                        This will remove this item from the playlist.
+                                                                    @endif
+                                                                </p>
                                                             </div>
 
                                                             <div class="flex gap-2">
diff --git a/resources/views/livewire/plugins/recipe.blade.php b/resources/views/livewire/plugins/recipe.blade.php
index 08ee441..94df0c0 100644
--- a/resources/views/livewire/plugins/recipe.blade.php
+++ b/resources/views/livewire/plugins/recipe.blade.php
@@ -150,6 +150,7 @@ new class extends Component {
                 'plugin_id' => $this->plugin->id,
                 'order' => $maxOrder + 1,
             ]);
+
         }
 
         $this->reset(['checked_devices', 'playlist_name', 'selected_weekdays', 'active_from', 'active_until', 'selected_playlist']);
@@ -200,16 +201,12 @@ HTML;
 HTML;
     }
 
-    public function renderPreview(): void
+    public function renderPreview($size = 'full'): void
     {
         abort_unless(auth()->user()->plugins->contains($this->plugin), 403);
 
         try {
-            if ($this->plugin->render_markup_view) {
-                $previewMarkup = view($this->plugin->render_markup_view, ['data' => $this->plugin->data_payload])->render();
-            } else {
-                $previewMarkup = Blade::render($this->plugin->render_markup, ['data' => $this->plugin->data_payload]);
-            }
+            $previewMarkup = $this->plugin->render($size);
             $this->dispatch('preview-updated', preview: $previewMarkup);
         } catch (\Exception $e) {
             $this->dispatch('preview-error', message: $e->getMessage());
@@ -237,6 +234,27 @@ HTML;
                 <flux:modal.trigger name="preview-plugin">
                     <flux:button icon="eye" wire:click="renderPreview">Preview</flux:button>
                 </flux:modal.trigger>
+                <flux:dropdown>
+                    <flux:button icon="chevron-down"></flux:button>
+                    <flux:menu>
+                        <flux:modal.trigger name="preview-plugin">
+                            <flux:menu.item icon="mashup-1Tx1B" wire:click="renderPreview('half_horizontal')">Half-Horizontal
+                            </flux:menu.item>
+                        </flux:modal.trigger>
+
+                        <flux:modal.trigger name="preview-plugin">
+                            <flux:menu.item icon="mashup-1Lx1R" wire:click="renderPreview('half_vertical')">Half-Vertical
+                            </flux:menu.item>
+                        </flux:modal.trigger>
+
+                        <flux:modal.trigger name="preview-plugin">
+                            <flux:menu.item icon="mashup-2x2" wire:click="renderPreview('quadrant')">Quadrant</flux:menu.item>
+                        </flux:modal.trigger>
+                    </flux:menu>
+                </flux:dropdown>
+
+            </flux:button.group>
+            <flux:button.group>
                 <flux:modal.trigger name="add-to-playlist">
                     <flux:button icon="play" variant="primary">Add to Playlist</flux:button>
                 </flux:modal.trigger>
@@ -475,7 +493,7 @@ HTML;
 
 @script
 <script>
-    $wire.on('preview-updated', ({ preview }) => {
+    $wire.on('preview-updated', ({preview}) => {
         const frame = document.getElementById('preview-frame');
         const frameDoc = frame.contentDocument || frame.contentWindow.document;
         frameDoc.open();
@@ -483,7 +501,7 @@ HTML;
         frameDoc.close();
     });
 
-    $wire.on('preview-error', ({ message }) => {
+    $wire.on('preview-error', ({message}) => {
         alert('Preview Error: ' + message);
     });
 </script>
diff --git a/resources/views/recipes/day-in-history.liquid b/resources/views/recipes/day-in-history.liquid
index fda23b2..c79f462 100644
--- a/resources/views/recipes/day-in-history.liquid
+++ b/resources/views/recipes/day-in-history.liquid
@@ -1,79 +1,57 @@
-<!DOCTYPE html>
-<html lang="de">
-<head>
-    <meta charset="utf-8">
-    <link rel="preconnect" href="https://fonts.bunny.net">
-    <link href="https://fonts.bunny.net/css?family=Inter:300,400,500" rel="stylesheet"/>
-    <link rel="stylesheet" href="https://usetrmnl.com/css/latest/plugins.css">
-    <script src="https://usetrmnl.com/js/latest/plugins.js"></script>
-    <title>plugin</title>
-    <style>
-        .trmnl .content .description {
-            word-break: break-word;
-        }
-    </style>
-</head>
-<body class="environment trmnl">
-<div class="screen">
-    <div class="view view--full">
-
-
-        <div class="layout">
-            <div class="columns">
-                <div class="column"
-                     data-list-limit="true"
-                     data-list-max-height="340">
-                    <div class="title center">Events</div>
-                    {% for event in data.metadata.events %}
-                        <div class="item ">
-                            <div class="meta">
-                                <span class="index"></span>
-                            </div>
-                            <div class="content">
-                                <span class="title title--small">{{ data.events[event].year }}</span>
-                                <span class="description clamp--3">{{ data.events[event].text }}</span>
-                            </div>
+<div class="view view--{{ size }}">
+    <div class="layout">
+        <div class="columns">
+            <div class="column"
+                 data-list-limit="true"
+                 data-list-max-height="340">
+                <div class="title center">Events</div>
+                {% for event in data.metadata.events %}
+                    <div class="item ">
+                        <div class="meta">
+                            <span class="index"></span>
                         </div>
-                    {% endfor %}
-                </div>
-                <div class="column"
-                     data-list-limit="true"
-                     data-list-max-height="340">
-                    <div class="title center">Births</div>
-                    {% for birth in data.metadata.births %}
-                        <div class="item ">
-                            <div class="meta">
-                                <span class="index"></span>
-                            </div>
-                            <div class="content">
-                                <span class="title title--small">{{ data.births[birth].year }}</span>
-                                <span class="description clamp--1">{{ data.births[birth].text }}</span>
-                            </div>
+                        <div class="content">
+                            <span class="title title--small">{{ data.events[event].year }}</span>
+                            <span class="description clamp--3">{{ data.events[event].text }}</span>
                         </div>
-                    {% endfor %}
-                    <div class="title center">Deaths</div>
-                    {% for death in data.metadata.deaths %}
-                        <div class="item ">
-                            <div class="meta">
-                                <span class="index"></span>
-                            </div>
-                            <div class="content">
-                                <span class="title title--small">{{ data.deaths[death].year }}</span>
-                                <span class="description clamp--1">{{ data.deaths[death].text }}</span>
-                            </div>
+                    </div>
+                {% endfor %}
+            </div>
+            <div class="column"
+                 data-list-limit="true"
+                 data-list-max-height="340">
+                <div class="title center">Births</div>
+                {% for birth in data.metadata.births %}
+                    <div class="item ">
+                        <div class="meta">
+                            <span class="index"></span>
                         </div>
-                    {% endfor %}
-                </div>
+                        <div class="content">
+                            <span class="title title--small">{{ data.births[birth].year }}</span>
+                            <span class="description clamp--1">{{ data.births[birth].text }}</span>
+                        </div>
+                    </div>
+                {% endfor %}
+                <div class="title center">Deaths</div>
+                {% for death in data.metadata.deaths %}
+                    <div class="item ">
+                        <div class="meta">
+                            <span class="index"></span>
+                        </div>
+                        <div class="content">
+                            <span class="title title--small">{{ data.deaths[death].year }}</span>
+                            <span class="description clamp--1">{{ data.deaths[death].text }}</span>
+                        </div>
+                    </div>
+                {% endfor %}
             </div>
         </div>
-        <div class="title_bar">
-            <img class="image"
-                 src="https://raw.githubusercontent.com/jvivona/tidbyt-data/refs/heads/main/thisdayinhistwikipedia/thisdayinhist_icon.svg">
-            <span class="title">This Day in History (Wikipedia)</span>
+    </div>
+    <div class="title_bar">
+        <img class="image"
+             src="https://raw.githubusercontent.com/jvivona/tidbyt-data/refs/heads/main/thisdayinhistwikipedia/thisdayinhist_icon.svg">
+        <span class="title">This Day in History (Wikipedia)</span>
 
-            <span class="instance">{{ data.metadata.current_date }}</span>
-        </div>
+        <span class="instance">{{ data.metadata.current_date }}</span>
     </div>
 </div>
-</body>
-</html>
diff --git a/resources/views/recipes/home-assistant.blade.php b/resources/views/recipes/home-assistant.blade.php
index 26ad095..6322c07 100644
--- a/resources/views/recipes/home-assistant.blade.php
+++ b/resources/views/recipes/home-assistant.blade.php
@@ -4,7 +4,8 @@
     });
 @endphp
 
-<x-trmnl::view>
+@props(['size' => 'full'])
+<x-trmnl::view size="{{$size}}">
     <x-trmnl::layout class="layout--col gap--space-between">
         @if($weatherEntity)
 
diff --git a/resources/views/recipes/pollen-forecast-eu.liquid b/resources/views/recipes/pollen-forecast-eu.liquid
index fc96494..f34414a 100644
--- a/resources/views/recipes/pollen-forecast-eu.liquid
+++ b/resources/views/recipes/pollen-forecast-eu.liquid
@@ -1,182 +1,167 @@
-<!DOCTYPE html>
-<html lang="de">
-<head>
-    <meta charset="utf-8">
-    <link rel="preconnect" href="https://fonts.bunny.net">
-    <link href="https://fonts.bunny.net/css?family=Inter:300,400,500" rel="stylesheet"/>
-    <link rel="stylesheet" href="https://usetrmnl.com/css/latest/plugins.css">
-    <script src="https://usetrmnl.com/js/latest/plugins.js"></script>
-    <script src="https://code.highcharts.com/highcharts.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/chartkick@5.0.1/dist/chartkick.min.js"></script>
-    <title>plugin</title>
-    <style>
-        .trmnl .content .description {
-            word-break: break-word;
-        }
-    </style>
-</head>
-<body class="environment trmnl">
-<div class="screen">
-    <div class="view view--full">
-        <div class="layout layout--col gap--space-between">
-            <!-- Current Pollen Stats -->
-            <div class="grid grid--cols-5">
-                <div class="item">
-                    <div class="meta"></div>
-                    <div class="content">
-                        <span class="value value--tnums">{{ data.current.birch_pollen }}</span>
-                        <span class="label label--small">grains/m³</span>
-                        <span class="label">Birch</span>
-                    </div>
-                </div>
-                <div class="item">
-                    <div class="meta"></div>
-                    <div class="content">
-                        <span class="value value--tnums">{{ data.current.grass_pollen }}</span>
-                        <span class="label label--small">grains/m³</span>
-                        <span class="label">Grass</span>
-                    </div>
-                </div>
-                <div class="item">
-                    <div class="meta"></div>
-                    <div class="content">
-                        <span class="value value--tnums">{{ data.current.alder_pollen }}</span>
-                        <span class="label label--small">grains/m³</span>
-                        <span class="label">Alder</span>
-                    </div>
-                </div>
-                <div class="item">
-                    <div class="meta"></div>
-                    <div class="content">
-                        <span class="value value--tnums">{{ data.current.mugwort_pollen }}</span>
-                        <span class="label label--small">grains/m³</span>
-                        <span class="label">Mugwort</span>
-                    </div>
-                </div>
-                <div class="item">
-                    <div class="meta"></div>
-                    <div class="content">
-                        <span class="value value--tnums">{{ data.current.ragweed_pollen }}</span>
-                        <span class="label label--small">grains/m³</span>
-                        <span class="label">Ragweed</span>
-                    </div>
+<script src="https://code.highcharts.com/highcharts.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/chartkick@5.0.1/dist/chartkick.min.js"></script>
+
+<div class="view view--{{ size }}">
+    <div class="layout layout--col gap--space-between">
+        <!-- Current Pollen Stats -->
+        <div class="grid grid--cols-5">
+            <div class="item">
+                <div class="meta"></div>
+                <div class="content">
+                    <span class="value value--tnums">{{ data.current.birch_pollen }}</span>
+                    <span class="label label--small">grains/m³</span>
+                    <span class="label">Birch</span>
+                </div>
+            </div>
+            <div class="item">
+                <div class="meta"></div>
+                <div class="content">
+                    <span class="value value--tnums">{{ data.current.grass_pollen }}</span>
+                    <span class="label label--small">grains/m³</span>
+                    <span class="label">Grass</span>
+                </div>
+            </div>
+            <div class="item">
+                <div class="meta"></div>
+                <div class="content">
+                    <span class="value value--tnums">{{ data.current.alder_pollen }}</span>
+                    <span class="label label--small">grains/m³</span>
+                    <span class="label">Alder</span>
+                </div>
+            </div>
+            <div class="item">
+                <div class="meta"></div>
+                <div class="content">
+                    <span class="value value--tnums">{{ data.current.mugwort_pollen }}</span>
+                    <span class="label label--small">grains/m³</span>
+                    <span class="label">Mugwort</span>
+                </div>
+            </div>
+            <div class="item">
+                <div class="meta"></div>
+                <div class="content">
+                    <span class="value value--tnums">{{ data.current.ragweed_pollen }}</span>
+                    <span class="label label--small">grains/m³</span>
+                    <span class="label">Ragweed</span>
                 </div>
             </div>
-
-            <!-- Chart Container -->
-            <div id="chart-pollen" style="width: 100%"></div>
         </div>
 
-        <div class="title_bar">
-            <svg width="30px" fill="currentColor" xmlns="http://www.w3.org/2000/svg" id="mdi-flower-pollen" viewBox="0 0 24 24"><path d="M18.4 12.75C18.4 11.37 17.28 10.25 15.9 10.25C15.37 10.25 14.88 10.41 14.5 10.69V10.5C14.5 9.12 13.38 8 12 8S9.5 9.12 9.5 10.5V10.69C9.12 10.41 8.63 10.25 8.1 10.25C6.72 10.25 5.6 11.37 5.6 12.75C5.6 13.74 6.19 14.6 7.03 15C6.19 15.4 5.6 16.25 5.6 17.25C5.6 18.63 6.72 19.75 8.1 19.75C8.63 19.75 9.12 19.58 9.5 19.31V19.5C9.5 20.88 10.62 22 12 22S14.5 20.88 14.5 19.5V19.31C14.88 19.58 15.37 19.75 15.9 19.75C17.28 19.75 18.4 18.63 18.4 17.25C18.4 16.25 17.81 15.4 16.97 15C17.81 14.6 18.4 13.74 18.4 12.75M12 17.5C10.62 17.5 9.5 16.38 9.5 15S10.62 12.5 12 12.5 14.5 13.62 14.5 15 13.38 17.5 12 17.5M11 6C11 5.45 11.45 5 12 5S13 5.45 13 6 12.55 7 12 7 11 6.55 11 6M7 8C7 7.45 7.45 7 8 7S9 7.45 9 8 8.55 9 8 9 7 8.55 7 8M5 6C4.45 6 4 5.55 4 5S4.45 4 5 4 6 4.45 6 5 5.55 6 5 6M8 3C8 2.45 8.45 2 9 2S10 2.45 10 3 9.55 4 9 4 8 3.55 8 3M14 3C14 2.45 14.45 2 15 2S16 2.45 16 3 15.55 4 15 4 14 3.55 14 3M20 5C20 5.55 19.55 6 19 6S18 5.55 18 5 18.45 4 19 4 20 4.45 20 5M16 7C16.55 7 17 7.45 17 8S16.55 9 16 9 15 8.55 15 8 15.45 7 16 7Z"></path></svg>
-            <span class="title">Pollen Forecast Vienna</span>
-            <span class="instance">Data provided by: Open-Meteo.com</span>
-        </div>
+        <!-- Chart Container -->
+        <div id="chart-pollen" style="width: 100%"></div>
     </div>
 
-    <script type="text/javascript">
-        // Build data arrays manually via Liquid
-        var birchData = [
-            {% for i in (0..47) %}
-            ["{{ data.hourly.time[i] }}", {{ data.hourly.birch_pollen[i] }}]{% unless forloop.last %},{% endunless %}
-            {% endfor %}
-        ];
-
-        var grassData = [
-            {% for i in (0..47) %}
-            ["{{ data.hourly.time[i] }}", {{ data.hourly.grass_pollen[i] }}]{% unless forloop.last %},{% endunless %}
-            {% endfor %}
-        ];
-
-        var alderData = [
-            {% for i in (0..47) %}
-            ["{{ data.hourly.time[i] }}", {{ data.hourly.alder_pollen[i] }}]{% unless forloop.last %},{% endunless %}
-            {% endfor %}
-        ];
-
-        var mugwortData = [
-            {% for i in (0..47) %}
-            ["{{ data.hourly.time[i] }}", {{ data.hourly.mugwort_pollen[i] }}]{% unless forloop.last %},{% endunless %}
-            {% endfor %}
-        ];
-
-        var ragweedData = [
-            {% for i in (0..47) %}
-            ["{{ data.hourly.time[i] }}", {{ data.hourly.ragweed_pollen[i] }}]{% unless forloop.last %},{% endunless %}
-            {% endfor %}
-        ];
-
-        // Function to get max value from data array
-        function getMaxValue(dataArray) {
-            return Math.max(...dataArray.map(item => item[1]));
-        }
-
-        // Filter data based on max value threshold
-        const threshold = 0.2;
-        const seriesData = [
-            { name: "Birch", data: birchData },
-            { name: "Grass", data: grassData, dashStyle: "shortdot" },
-            { name: "Alder", data: alderData, birchData, dashStyle: "shortdash" },
-            { name: "Mugwort", data: mugwortData },
-            { name: "Ragweed", data: ragweedData, dashStyle: "shortdash" }
-        ].filter(series => getMaxValue(series.data) > threshold);
-
-        // Chartkick config
-        var createChart = function() {
-            new Chartkick["LineChart"](
-                "chart-pollen",
-                seriesData,
-                {
-                    adapter: "highcharts",
-                    thousands: ",",
-                    points: false,
-                    curve: true,
-                    colors: ["#111", "#111", "#111", "#111", "#111"],
-                    library: {
-                        chart: { height: 300 },
-                        plotOptions: {
-                            series: {
-                                animation: false,
-                                lineWidth: 5
-                            }
-                        },
-                        yAxis: {
-                            labels: { style: { fontSize: "16px", color: "#000000" }},
-                            gridLineDashStyle: "shortdot",
-                            gridLineWidth: 1,
-                            gridLineColor: "#000000",
-                            tickAmount: 5
-                        },
-                        xAxis: {
-                            type: "datetime",
-                            labels: { style: { fontSize: "16px", color: "#000000" }},
-                            lineWidth: 0,
-                            gridLineDashStyle: "dot",
-                            tickWidth: 1,
-                            tickLength: 0,
-                            gridLineWidth: 1,
-                            gridLineColor: "#000000",
-                            tickPixelInterval: 120,
-                            plotLines: [{
-                                value: new Date().getTime(),
-                                color: '#000000',
-                                width: 2,
-                                dashStyle: 'shortdash',
-                                zIndex: 5
-                            }]
-                        }
-                    }
-                }
-            );
-        };
-
-        if ("Chartkick" in window) {
-            createChart();
-        } else {
-            window.addEventListener("chartkick:load", createChart, true);
-        }
-    </script>
+    <div class="title_bar">
+        <svg width="30px" fill="currentColor" xmlns="http://www.w3.org/2000/svg" id="mdi-flower-pollen"
+             viewBox="0 0 24 24">
+            <path
+                d="M18.4 12.75C18.4 11.37 17.28 10.25 15.9 10.25C15.37 10.25 14.88 10.41 14.5 10.69V10.5C14.5 9.12 13.38 8 12 8S9.5 9.12 9.5 10.5V10.69C9.12 10.41 8.63 10.25 8.1 10.25C6.72 10.25 5.6 11.37 5.6 12.75C5.6 13.74 6.19 14.6 7.03 15C6.19 15.4 5.6 16.25 5.6 17.25C5.6 18.63 6.72 19.75 8.1 19.75C8.63 19.75 9.12 19.58 9.5 19.31V19.5C9.5 20.88 10.62 22 12 22S14.5 20.88 14.5 19.5V19.31C14.88 19.58 15.37 19.75 15.9 19.75C17.28 19.75 18.4 18.63 18.4 17.25C18.4 16.25 17.81 15.4 16.97 15C17.81 14.6 18.4 13.74 18.4 12.75M12 17.5C10.62 17.5 9.5 16.38 9.5 15S10.62 12.5 12 12.5 14.5 13.62 14.5 15 13.38 17.5 12 17.5M11 6C11 5.45 11.45 5 12 5S13 5.45 13 6 12.55 7 12 7 11 6.55 11 6M7 8C7 7.45 7.45 7 8 7S9 7.45 9 8 8.55 9 8 9 7 8.55 7 8M5 6C4.45 6 4 5.55 4 5S4.45 4 5 4 6 4.45 6 5 5.55 6 5 6M8 3C8 2.45 8.45 2 9 2S10 2.45 10 3 9.55 4 9 4 8 3.55 8 3M14 3C14 2.45 14.45 2 15 2S16 2.45 16 3 15.55 4 15 4 14 3.55 14 3M20 5C20 5.55 19.55 6 19 6S18 5.55 18 5 18.45 4 19 4 20 4.45 20 5M16 7C16.55 7 17 7.45 17 8S16.55 9 16 9 15 8.55 15 8 15.45 7 16 7Z"></path>
+        </svg>
+        <span class="title">Pollen Forecast Vienna</span>
+        <span class="instance">Data provided by: Open-Meteo.com</span>
     </div>
 </div>
-</body>
-</html>
+
+<script type="text/javascript">
+    // Build data arrays manually via Liquid
+    var birchData = [
+        {% for i in (0..47) %}
+        ["{{ data.hourly.time[i] }}", {{ data.hourly.birch_pollen[i] }}]{% unless forloop.last %},{% endunless %}
+        {% endfor %}
+    ];
+
+    var grassData = [
+        {% for i in (0..47) %}
+        ["{{ data.hourly.time[i] }}", {{ data.hourly.grass_pollen[i] }}]{% unless forloop.last %},{% endunless %}
+        {% endfor %}
+    ];
+
+    var alderData = [
+        {% for i in (0..47) %}
+        ["{{ data.hourly.time[i] }}", {{ data.hourly.alder_pollen[i] }}]{% unless forloop.last %},{% endunless %}
+        {% endfor %}
+    ];
+
+    var mugwortData = [
+        {% for i in (0..47) %}
+        ["{{ data.hourly.time[i] }}", {{ data.hourly.mugwort_pollen[i] }}]{% unless forloop.last %},{% endunless %}
+        {% endfor %}
+    ];
+
+    var ragweedData = [
+        {% for i in (0..47) %}
+        ["{{ data.hourly.time[i] }}", {{ data.hourly.ragweed_pollen[i] }}]{% unless forloop.last %},{% endunless %}
+        {% endfor %}
+    ];
+
+    // Function to get max value from data array
+    function getMaxValue(dataArray) {
+        return Math.max(...dataArray.map(item => item[1]));
+    }
+
+    // Filter data based on max value threshold
+    const threshold = 0.2;
+    const seriesData = [
+        {name: "Birch", data: birchData},
+        {name: "Grass", data: grassData, dashStyle: "shortdot"},
+        {name: "Alder", data: alderData, birchData, dashStyle: "shortdash"},
+        {name: "Mugwort", data: mugwortData},
+        {name: "Ragweed", data: ragweedData, dashStyle: "shortdash"}
+    ].filter(series => getMaxValue(series.data) > threshold);
+
+    // Chartkick config
+    var createChart = function () {
+        new Chartkick["LineChart"](
+            "chart-pollen",
+            seriesData,
+            {
+                adapter: "highcharts",
+                thousands: ",",
+                points: false,
+                curve: true,
+                colors: ["#111", "#111", "#111", "#111", "#111"],
+                library: {
+                    chart: {height: 300},
+                    plotOptions: {
+                        series: {
+                            animation: false,
+                            lineWidth: 5
+                        }
+                    },
+                    yAxis: {
+                        labels: {style: {fontSize: "16px", color: "#000000"}},
+                        gridLineDashStyle: "shortdot",
+                        gridLineWidth: 1,
+                        gridLineColor: "#000000",
+                        tickAmount: 5
+                    },
+                    xAxis: {
+                        type: "datetime",
+                        labels: {style: {fontSize: "16px", color: "#000000"}},
+                        lineWidth: 0,
+                        gridLineDashStyle: "dot",
+                        tickWidth: 1,
+                        tickLength: 0,
+                        gridLineWidth: 1,
+                        gridLineColor: "#000000",
+                        tickPixelInterval: 120,
+                        plotLines: [{
+                            value: new Date().getTime(),
+                            color: '#000000',
+                            width: 2,
+                            dashStyle: 'shortdash',
+                            zIndex: 5
+                        }]
+                    }
+                }
+            }
+        );
+    };
+
+    if ("Chartkick" in window) {
+        createChart();
+    } else {
+        window.addEventListener("chartkick:load", createChart, true);
+    }
+</script>
+</div>
diff --git a/resources/views/recipes/sunrise-sunset.liquid b/resources/views/recipes/sunrise-sunset.liquid
index 3622f17..3ae8eef 100644
--- a/resources/views/recipes/sunrise-sunset.liquid
+++ b/resources/views/recipes/sunrise-sunset.liquid
@@ -1,44 +1,27 @@
-<!DOCTYPE html>
-<html lang="de">
-<head>
-    <meta charset="utf-8">
-    <link rel="preconnect" href="https://fonts.bunny.net">
-    <link href="https://fonts.bunny.net/css?family=Inter:300,400,500" rel="stylesheet"/>
-    <link rel="stylesheet" href="https://usetrmnl.com/css/latest/plugins.css">
-    <script src="https://usetrmnl.com/js/latest/plugins.js"></script>
-    <title>plugin</title>
-    <style>
-        .trmnl .content .description {
-            word-break: break-word;
-        }
-    </style>
-</head>
-<body class="environment trmnl">
-<div class="screen">
-    <div class="view view--full">
-        <div class="layout layout--col gap--space-between">
-            <!-- Top row: 2 columns -->
-            <div class="grid">
-                <!-- Sunrise Time - Left column -->
-                <div class="item col-span-6">
-                    <div class="content text--center flex flex--col flex--center-xy">
-                        <span class="label label--large font--bold text--center">Sunrise</span>
-                        <span class="value value--large text--center font--normal">
-          {{ data.today.sunrise }}
-        </span>
-                    </div>
-                </div>
-                <!-- Sunset Time - Right column -->
-                <div class="item col-span-6">
-                    <div class="content text--center flex flex--col flex--center-xy">
-                        <span class="label label--large font--bold text--center">Sunset</span>
-                        <span class="value value--large text--center font--normal">
-          {{ data.today.sunset }}
-        </span>
-                    </div>
+<div class="view view--{{ size }}">
+    <div class="layout layout--col gap--space-between">
+        <!-- Top row: 2 columns -->
+        <div class="grid">
+            <!-- Sunrise Time - Left column -->
+            <div class="item col-span-6">
+                <div class="content text--center flex flex--col flex--center-xy">
+                    <span class="label label--large font--bold text--center">Sunrise</span>
+                    <span class="value value--large text--center font--normal">
+                      {{ data.today.sunrise }}
+                    </span>
                 </div>
             </div>
-
+            <!-- Sunset Time - Right column -->
+            <div class="item col-span-6">
+                <div class="content text--center flex flex--col flex--center-xy">
+                    <span class="label label--large font--bold text--center">Sunset</span>
+                    <span class="value value--large text--center font--normal">
+                      {{ data.today.sunset }}
+                    </span>
+                </div>
+            </div>
+        </div>
+        {% if size == 'full' or size == 'half_vertical' %}
             <!-- Bottom row: 2 columns -->
             <div class="grid">
                 <!-- Day Progress - Left column -->
@@ -58,12 +41,10 @@
                     </div>
                 </div>
             </div>
-        </div>
-        <!-- Title Bar -->
-        <div class="title_bar">
-            <span class="title">Sunrise & Sunset</span>
-        </div>
+        {% endif %}
+    </div>
+    <!-- Title Bar -->
+    <div class="title_bar">
+        <span class="title">Sunrise & Sunset</span>
     </div>
 </div>
-</body>
-</html>
diff --git a/resources/views/recipes/train-monitor.blade.php b/resources/views/recipes/train-monitor.blade.php
index e8ff38d..72fdeaf 100644
--- a/resources/views/recipes/train-monitor.blade.php
+++ b/resources/views/recipes/train-monitor.blade.php
@@ -1,4 +1,5 @@
-<x-trmnl::view>
+@props(['size' => 'full'])
+<x-trmnl::view size="{{$size}}">
     <x-trmnl::layout>
         <x-trmnl::table>
             <thead>
diff --git a/resources/views/recipes/train.blade.php b/resources/views/recipes/train.blade.php
index d6f8dab..6521c89 100644
--- a/resources/views/recipes/train.blade.php
+++ b/resources/views/recipes/train.blade.php
@@ -1,4 +1,5 @@
-<x-trmnl::view>
+@props(['size' => 'full'])
+<x-trmnl::view size="{{$size}}">
     <x-trmnl::layout>
         <x-trmnl::table>
             <thead>
@@ -28,7 +29,7 @@
                     </td>
                     @if($journey['isCancelled'])
                         <td>
-                            <x-trmnl::label variant="inverted">Cancelled</x-trmnl::label>
+                            <x-trmnl::label variant="inverted">Ausfall</x-trmnl::label>
                         </td>
                     @else
                         <td>
diff --git a/resources/views/recipes/weather.blade.php b/resources/views/recipes/weather.blade.php
index 65198d5..0d8045f 100644
--- a/resources/views/recipes/weather.blade.php
+++ b/resources/views/recipes/weather.blade.php
@@ -1,15 +1,18 @@
 {{--@dump($data)--}}
-<x-trmnl::view>
+@props(['size' => 'full'])
+<x-trmnl::view size="{{$size}}">
     <x-trmnl::layout class="layout--col gap--space-between">
         <div class="grid" style="gap: 9px;">
             <div class="row row--center col--span-3 col--end">
-                <img class="weather-image" style="max-height: 150px; margin:auto;" src="https://usetrmnl.com/images/plugins/weather/wi-thermometer.svg">
+                <img class="weather-image" style="max-height: 150px; margin:auto;"
+                     src="https://usetrmnl.com/images/plugins/weather/wi-thermometer.svg">
             </div>
-            <div class="col col--span-3 col--end">
-                <div class="item h--full">
+            <div class="col col--span-3 col--center">
+                <div class="item">
                     <div class="meta"></div>
                     <div class="justify-center">
-                        <span class="value value--xxlarge" data-fit-value="true">{{Arr::get($data, 'properties.timeseries.0.data.instant.details.air_temperature', 'N/A')}}</span>
+                                <span class="value @if($size == 'full' || $size == 'half_horizontal') value--xxlarge @else value--medium @endif"
+                                      data-fit-value="true">{{Arr::get($data, 'properties.timeseries.0.data.instant.details.air_temperature', 'N/A')}}</span>
                         <span class="label">Temperature</span>
                     </div>
                 </div>
@@ -18,10 +21,11 @@
                 <div class="item">
                     <div class="meta"></div>
                     <div class="icon">
-{{--                        <img class="weather-icon" src="https://usetrmnl.com/images/weather/wi-thermometer.svg">--}}
+                        {{--                        <img class="weather-icon" src="https://usetrmnl.com/images/weather/wi-thermometer.svg">--}}
                     </div>
                     <div class="content">
-                        <span class="value value--small">{{Arr::get($data, 'properties.timeseries.0.data.instant.details.wind_speed', 'N/A')}}</span>
+                                <span
+                                    class="value value--small">{{Arr::get($data, 'properties.timeseries.0.data.instant.details.wind_speed', 'N/A')}}</span>
                         <span class="label">Wind Speed (km/h)</span>
                     </div>
                 </div>
@@ -29,7 +33,7 @@
                 <div class="item">
                     <div class="meta"></div>
                     <div class="icon">
-{{--                        <img class="weather-icon" src="https://usetrmnl.com/images/weather/wi-raindrops.svg">--}}
+                        {{--                        <img class="weather-icon" src="https://usetrmnl.com/images/weather/wi-raindrops.svg">--}}
                     </div>
                     <div class="content">
                         <span class="value value--small">{{Arr::get($data, 'properties.timeseries.0.data.instant.details.relative_humidity', 'N/A')}}%</span>
@@ -40,10 +44,11 @@
                 <div class="item">
                     <div class="meta"></div>
                     <div class="icon">
-{{--                        <img class="weather-icon" src="https://usetrmnl.com/images/weather/wi-day-sunny.svg">--}}
+                        {{--                        <img class="weather-icon" src="https://usetrmnl.com/images/weather/wi-day-sunny.svg">--}}
                     </div>
                     <div class="content">
-                        <span class="value value--xsmall">{{Str::title(Arr::get($data, 'properties.timeseries.0.data.next_1_hours.summary.symbol_code', 'N/A'))}}</span>
+                                <span
+                                    class="value value--xsmall">{{Str::title(Arr::get($data, 'properties.timeseries.0.data.next_1_hours.summary.symbol_code', 'N/A'))}}</span>
                         <span class="label">Right Now</span>
                     </div>
                 </div>
diff --git a/resources/views/recipes/zen.blade.php b/resources/views/recipes/zen.blade.php
index 3ea6909..5e01eac 100644
--- a/resources/views/recipes/zen.blade.php
+++ b/resources/views/recipes/zen.blade.php
@@ -1,9 +1,10 @@
 {{--@dump($data)--}}
-<x-trmnl::view>
+@props(['size' => 'full'])
+<x-trmnl::view size="{{ $size }}">
     <x-trmnl::layout>
         <x-trmnl::layout class="layout--col">
             <div class="b-h-gray-1">{{$data[0]['a']}}</div>
-            @if (strlen($data[0]['q']) < 300)
+            @if (strlen($data[0]['q']) < 300 && $size != 'quadrant')
                 <p class="value">{{ $data[0]['q'] }}</p>
             @else
                 <p class="value--small">{{ $data[0]['q'] }}</p>
diff --git a/resources/views/trmnl-layouts/mashup.blade.php b/resources/views/trmnl-layouts/mashup.blade.php
new file mode 100644
index 0000000..d2890fa
--- /dev/null
+++ b/resources/views/trmnl-layouts/mashup.blade.php
@@ -0,0 +1,8 @@
+@props(['mashupLayout' => '1Tx1B'])
+
+<x-trmnl::screen>
+    <x-trmnl::mashup mashup-layout="{{ $mashupLayout }}">
+        {{-- The slot is used to pass the content of the mashup --}}
+        {!! $slot !!}
+    </x-trmnl::mashup>
+</x-trmnl::screen>
diff --git a/resources/views/trmnl-layouts/single.blade.php b/resources/views/trmnl-layouts/single.blade.php
new file mode 100644
index 0000000..ec073e5
--- /dev/null
+++ b/resources/views/trmnl-layouts/single.blade.php
@@ -0,0 +1,3 @@
+<x-trmnl::screen>
+    {!! $slot !!}
+</x-trmnl::screen>
diff --git a/routes/api.php b/routes/api.php
index 2fb5e3c..36a9650 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -3,11 +3,13 @@
 use App\Jobs\GenerateScreenJob;
 use App\Models\Device;
 use App\Models\DeviceLog;
+use App\Models\Plugin;
 use App\Models\User;
 use App\Services\ImageGenerationService;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Blade;
 use Illuminate\Support\Facades\Route;
+use Illuminate\Support\Facades\Storage;
 use Illuminate\Support\Str;
 
 Route::get('/display', function (Request $request) {
@@ -46,13 +48,14 @@ Route::get('/display', function (Request $request) {
         'last_refreshed_at' => now(),
     ]);
 
-    // Get current screen image from mirror device or continue if not available
+    // Get current screen image from a mirror device or continue if not available
     if (! $image_uuid = $device->mirrorDevice?->current_screen_image) {
         $refreshTimeOverride = null;
         // Skip if cloud proxy is enabled for the device
         if (! $device->proxy_cloud || $device->getNextPlaylistItem()) {
             $playlistItem = $device->getNextPlaylistItem();
-            if ($playlistItem) {
+
+            if ($playlistItem && ! $playlistItem->isMashup()) {
                 $refreshTimeOverride = $playlistItem->playlist()->first()->refresh_time;
                 $plugin = $playlistItem->plugin;
 
@@ -62,12 +65,7 @@ Route::get('/display', function (Request $request) {
                 // Check and update stale data if needed
                 if ($plugin->isDataStale() || $plugin->current_image == null) {
                     $plugin->updateDataPayload();
-
-                    if ($plugin->render_markup) {
-                        $markup = Blade::render($plugin->render_markup, ['data' => $plugin->data_payload]);
-                    } elseif ($plugin->render_markup_view) {
-                        $markup = view($plugin->render_markup_view, ['data' => $plugin->data_payload])->render();
-                    }
+                    $markup = $plugin->render();
 
                     GenerateScreenJob::dispatchSync($device->id, $plugin->id, $markup);
                 }
@@ -78,6 +76,28 @@ Route::get('/display', function (Request $request) {
                     $playlistItem->update(['last_displayed_at' => now()]);
                     $device->update(['current_screen_image' => $plugin->current_image]);
                 }
+            } elseif ($playlistItem) {
+                $refreshTimeOverride = $playlistItem->playlist()->first()->refresh_time;
+
+                // Get all plugins for the mashup
+                $plugins = Plugin::whereIn('id', $playlistItem->getMashupPluginIds())->get();
+
+                foreach ($plugins as $plugin) {
+                    // Reset cache if Devices with different dimensions exist
+                    ImageGenerationService::resetIfNotCacheable($plugin);
+                    if ($plugin->isDataStale() || $plugin->current_image == null) {
+                        $plugin->updateDataPayload();
+                    }
+                }
+
+                $markup = $playlistItem->render();
+                GenerateScreenJob::dispatchSync($device->id, null, $markup);
+
+                $device->refresh();
+
+                if ($device->current_screen_image != null) {
+                    $playlistItem->update(['last_displayed_at' => now()]);
+                }
             }
         }