From 6eb549260c96a9530894827fbe625adf814432be Mon Sep 17 00:00:00 2001
From: Laura Tonning <tonning@gmail.com>
Date: Mon, 2 Sep 2024 21:42:01 +0200
Subject: [PATCH] WIP

---
 composer.json                                 |   6 +-
 ..._115206_add_description_to_plays_table.php |  21 +++
 .../2024_08_25_115806_create_genres_table.php |  21 +++
 ...25_115951_create_genre_monologue_table.php |  22 +++
 ...4_08_25_185539_create_identities_table.php |  21 +++
 ...190039_create_identity_monologue_table.php |  22 +++
 .../2024_08_25_190152_create_ages_table.php   |  21 +++
 ...8_25_190239_create_age_monologue_table.php |  22 +++
 ...08_25_194221_create_play_sources_table.php |  21 +++
 ..._194321_create_play_play_sources_table.php |  23 +++
 ..._203607_create_gender_identities_table.php |  21 +++
 ...create_gender_identity_monologue_table.php |  22 +++
 ...205442_migrate_play_and_monologue_data.php |  88 ++++++++++
 public/css/monologues-backend.css             |  92 +++++++---
 public/css/monologues.css                     |  92 +++++++---
 public/mix-manifest.json                      |   4 +-
 .../components/ctas/book-session.blade.php    |  10 +-
 resources/views/layouts/monologues.blade.php  |  21 ++-
 .../models/monologues/backend/form.blade.php  |  62 +++----
 .../models/monologues/backend/index.blade.php |   6 +
 .../monologues/frontend/index.blade.php       |  38 ++--
 .../models/monologues/frontend/show.blade.php | 165 ++++++++++++++----
 .../views/models/plays/backend/form.blade.php |  52 +++---
 .../models/plays/frontend/index.blade.php     |  14 +-
 .../models/plays/frontend/show.blade.php      |  42 ++++-
 src/Enums/CharacterSex.php                    |   9 +
 src/Enums/MonologueLength.php                 |  45 +++++
 src/Http/Livewire/Monologues/Backend/Form.php |  42 ++++-
 .../Livewire/Monologues/Backend/Index.php     |  26 ++-
 .../Livewire/Monologues/Frontend/Index.php    |  61 ++++---
 .../Livewire/Monologues/Frontend/Show.php     |  12 +-
 src/Http/Livewire/Plays/Backend/Form.php      |  34 ++++
 src/Http/Livewire/Plays/Frontend/Index.php    |  29 ++-
 src/Http/Livewire/Plays/Frontend/Show.php     |   8 +
 src/Models/Age.php                            |  16 ++
 src/Models/GenderIdentity.php                 |  16 ++
 src/Models/Genre.php                          |  16 ++
 src/Models/Identity.php                       |  16 ++
 src/Models/Monologue.php                      |  75 +++++++-
 src/Models/MonologueUser.php                  |   2 +-
 src/Models/Play.php                           |  11 ++
 src/Models/PlaySource.php                     |  16 ++
 42 files changed, 1129 insertions(+), 234 deletions(-)
 create mode 100644 database/migrations/2024_08_25_115206_add_description_to_plays_table.php
 create mode 100644 database/migrations/2024_08_25_115806_create_genres_table.php
 create mode 100644 database/migrations/2024_08_25_115951_create_genre_monologue_table.php
 create mode 100644 database/migrations/2024_08_25_185539_create_identities_table.php
 create mode 100644 database/migrations/2024_08_25_190039_create_identity_monologue_table.php
 create mode 100644 database/migrations/2024_08_25_190152_create_ages_table.php
 create mode 100644 database/migrations/2024_08_25_190239_create_age_monologue_table.php
 create mode 100644 database/migrations/2024_08_25_194221_create_play_sources_table.php
 create mode 100644 database/migrations/2024_08_25_194321_create_play_play_sources_table.php
 create mode 100644 database/migrations/2024_08_25_203607_create_gender_identities_table.php
 create mode 100644 database/migrations/2024_08_25_203707_create_gender_identity_monologue_table.php
 create mode 100644 database/migrations/2024_08_25_205442_migrate_play_and_monologue_data.php
 create mode 100644 src/Enums/MonologueLength.php
 create mode 100644 src/Models/Age.php
 create mode 100644 src/Models/GenderIdentity.php
 create mode 100644 src/Models/Genre.php
 create mode 100644 src/Models/Identity.php
 create mode 100644 src/Models/PlaySource.php

diff --git a/composer.json b/composer.json
index 287a9f8..ec44887 100644
--- a/composer.json
+++ b/composer.json
@@ -17,6 +17,10 @@
         }
     ],
     "repositories": [
+        {
+            "type": "path",
+            "url": "/users/Tonning/Code/packages/astrogoat/strata"
+        },
         {
             "type": "composer",
             "url": "https://packages.hlx.dev"
@@ -25,7 +29,7 @@
     "require": {
         "php": "^8.3",
         "astrogoat/cashier": "^0.3.0",
-        "astrogoat/strata": "^0.7.7",
+        "astrogoat/strata": "dev-update-index-filtering as 0.7.39",
         "illuminate/contracts": "^10.0",
         "spatie/laravel-package-tools": "^1.4.3"
     },
diff --git a/database/migrations/2024_08_25_115206_add_description_to_plays_table.php b/database/migrations/2024_08_25_115206_add_description_to_plays_table.php
new file mode 100644
index 0000000..8e5df1f
--- /dev/null
+++ b/database/migrations/2024_08_25_115206_add_description_to_plays_table.php
@@ -0,0 +1,21 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+return new class extends Migration {
+    public function up(): void
+    {
+        Schema::table('plays', function (Blueprint $table) {
+            $table->string('description')->after('published_year');
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::table('plays', function (Blueprint $table) {
+            $table->dropColumn('description');
+        });
+    }
+};
diff --git a/database/migrations/2024_08_25_115806_create_genres_table.php b/database/migrations/2024_08_25_115806_create_genres_table.php
new file mode 100644
index 0000000..9dbc0f8
--- /dev/null
+++ b/database/migrations/2024_08_25_115806_create_genres_table.php
@@ -0,0 +1,21 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+return new class extends Migration {
+    public function up(): void
+    {
+        Schema::create('genres', function (Blueprint $table) {
+            $table->id();
+            $table->string('name');
+            $table->timestamps();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('genres');
+    }
+};
diff --git a/database/migrations/2024_08_25_115951_create_genre_monologue_table.php b/database/migrations/2024_08_25_115951_create_genre_monologue_table.php
new file mode 100644
index 0000000..615b470
--- /dev/null
+++ b/database/migrations/2024_08_25_115951_create_genre_monologue_table.php
@@ -0,0 +1,22 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Astrogoat\Monologues\Models\Genre;
+use Astrogoat\Monologues\Models\Monologue;
+use Illuminate\Database\Migrations\Migration;
+
+return new class extends Migration {
+    public function up(): void
+    {
+        Schema::create('genre_monologue', function (Blueprint $table) {
+            $table->foreignIdFor(Genre::class)->constrained();
+            $table->foreignIdFor(Monologue::class)->constrained();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('genre_monologue');
+    }
+};
diff --git a/database/migrations/2024_08_25_185539_create_identities_table.php b/database/migrations/2024_08_25_185539_create_identities_table.php
new file mode 100644
index 0000000..865712d
--- /dev/null
+++ b/database/migrations/2024_08_25_185539_create_identities_table.php
@@ -0,0 +1,21 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+return new class extends Migration {
+    public function up(): void
+    {
+        Schema::create('identities', function (Blueprint $table) {
+            $table->id();
+            $table->string('name');
+            $table->timestamps();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('identities');
+    }
+};
diff --git a/database/migrations/2024_08_25_190039_create_identity_monologue_table.php b/database/migrations/2024_08_25_190039_create_identity_monologue_table.php
new file mode 100644
index 0000000..bb3bd76
--- /dev/null
+++ b/database/migrations/2024_08_25_190039_create_identity_monologue_table.php
@@ -0,0 +1,22 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Astrogoat\Monologues\Models\Monologue;
+use Illuminate\Database\Migrations\Migration;
+use Astrogoat\Monologues\Models\Identity;
+
+return new class extends Migration {
+    public function up(): void
+    {
+        Schema::create('identity_monologue', function (Blueprint $table) {
+            $table->foreignIdFor(Identity::class)->constrained();
+            $table->foreignIdFor(Monologue::class)->constrained();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('identity_monologue');
+    }
+};
diff --git a/database/migrations/2024_08_25_190152_create_ages_table.php b/database/migrations/2024_08_25_190152_create_ages_table.php
new file mode 100644
index 0000000..9c03f10
--- /dev/null
+++ b/database/migrations/2024_08_25_190152_create_ages_table.php
@@ -0,0 +1,21 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+return new class extends Migration {
+    public function up(): void
+    {
+        Schema::create('ages', function (Blueprint $table) {
+            $table->id();
+            $table->string('name');
+            $table->timestamps();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('ages');
+    }
+};
diff --git a/database/migrations/2024_08_25_190239_create_age_monologue_table.php b/database/migrations/2024_08_25_190239_create_age_monologue_table.php
new file mode 100644
index 0000000..13a4e26
--- /dev/null
+++ b/database/migrations/2024_08_25_190239_create_age_monologue_table.php
@@ -0,0 +1,22 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Astrogoat\Monologues\Models\Monologue;
+use Illuminate\Database\Migrations\Migration;
+use Astrogoat\Monologues\Models\Age;
+
+return new class extends Migration {
+    public function up(): void
+    {
+        Schema::create('age_monologue', function (Blueprint $table) {
+            $table->foreignIdFor(Age::class)->constrained();
+            $table->foreignIdFor(Monologue::class)->constrained();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('age_monologue');
+    }
+};
diff --git a/database/migrations/2024_08_25_194221_create_play_sources_table.php b/database/migrations/2024_08_25_194221_create_play_sources_table.php
new file mode 100644
index 0000000..a2b3f10
--- /dev/null
+++ b/database/migrations/2024_08_25_194221_create_play_sources_table.php
@@ -0,0 +1,21 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+return new class extends Migration {
+    public function up(): void
+    {
+        Schema::create('play_sources', function (Blueprint $table) {
+            $table->id();
+            $table->string('name');
+            $table->timestamps();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('play_sources');
+    }
+};
diff --git a/database/migrations/2024_08_25_194321_create_play_play_sources_table.php b/database/migrations/2024_08_25_194321_create_play_play_sources_table.php
new file mode 100644
index 0000000..fc8504f
--- /dev/null
+++ b/database/migrations/2024_08_25_194321_create_play_play_sources_table.php
@@ -0,0 +1,23 @@
+<?php
+
+use Astrogoat\Monologues\Models\Play;
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Astrogoat\Monologues\Models\PlaySource;
+use Illuminate\Database\Migrations\Migration;
+
+return new class extends Migration {
+    public function up(): void
+    {
+        Schema::create('play_play_source', function (Blueprint $table) {
+            $table->foreignIdFor(Play::class)->constrained();
+            $table->foreignIdFor(PlaySource::class)->constrained();
+            $table->string('url')->nullable();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('play_play_source');
+    }
+};
diff --git a/database/migrations/2024_08_25_203607_create_gender_identities_table.php b/database/migrations/2024_08_25_203607_create_gender_identities_table.php
new file mode 100644
index 0000000..349d8a5
--- /dev/null
+++ b/database/migrations/2024_08_25_203607_create_gender_identities_table.php
@@ -0,0 +1,21 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+return new class extends Migration {
+    public function up(): void
+    {
+        Schema::create('gender_identities', function (Blueprint $table) {
+            $table->id();
+            $table->string('name');
+            $table->timestamps();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('gender_identities');
+    }
+};
diff --git a/database/migrations/2024_08_25_203707_create_gender_identity_monologue_table.php b/database/migrations/2024_08_25_203707_create_gender_identity_monologue_table.php
new file mode 100644
index 0000000..dac5978
--- /dev/null
+++ b/database/migrations/2024_08_25_203707_create_gender_identity_monologue_table.php
@@ -0,0 +1,22 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Astrogoat\Monologues\Models\Monologue;
+use Illuminate\Database\Migrations\Migration;
+use Astrogoat\Monologues\Models\GenderIdentity;
+
+return new class extends Migration {
+    public function up(): void
+    {
+        Schema::create('gender_identity_monologue', function (Blueprint $table) {
+            $table->foreignIdFor(GenderIdentity::class)->constrained();
+            $table->foreignIdFor(Monologue::class)->constrained();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('gender_identity_monologue');
+    }
+};
diff --git a/database/migrations/2024_08_25_205442_migrate_play_and_monologue_data.php b/database/migrations/2024_08_25_205442_migrate_play_and_monologue_data.php
new file mode 100644
index 0000000..c392d54
--- /dev/null
+++ b/database/migrations/2024_08_25_205442_migrate_play_and_monologue_data.php
@@ -0,0 +1,88 @@
+<?php
+
+use Astrogoat\Monologues\Models\Play;
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Astrogoat\Monologues\Models\Monologue;
+use Illuminate\Database\Migrations\Migration;
+
+return new class extends Migration {
+    public function up(): void
+    {
+        foreach (Monologue::withoutGlobalScopes()->get() as $monologue) {
+            $this->convertSexToGenderIdentity($monologue);
+            $this->convertIdentities($monologue);
+            $this->convertAges($monologue);
+        }
+
+        foreach (Play::all() as $play) {
+            $this->convertWhereToFindToSource($play);
+            $this->convertPlayTypeToMonologueGenre($play);
+        }
+
+        Schema::table('plays', function (Blueprint $table) {
+            $table->dropColumn('where_to_find');
+            $table->dropColumn('type');
+        });
+
+        Schema::table('monologues', function (Blueprint $table) {
+            $table->dropColumn('sex');
+            $table->dropColumn('identity');
+            $table->dropColumn('type');
+        });
+    }
+
+    public function down(): void
+    {
+//        Schema::table('plays', function (Blueprint $table) {
+//            $table->string('where_to_find')->nullable();
+//        });
+    }
+
+    public function convertSexToGenderIdentity(Monologue $monologue): void
+    {
+        $monologue->genderIdentities()->firstOrCreate(['name' => $monologue->sex->fullName()]);
+    }
+
+    public function convertAges(Monologue $monologue): void
+    {
+        if ($monologue->age) {
+            $monologue->ages()->firstOrCreate(['name' => trim($monologue->age)]);
+        }
+    }
+
+    public function convertIdentities(Monologue $monologue): void
+    {
+        $identities = Str::of($monologue->identity)
+            ->replace(',', ';')
+            ->explode(';')
+            ->filter()
+            ->map(fn ($identity) => trim($identity))
+            ->filter();
+
+        foreach ($identities as $identity) {
+            $monologue->identities()->firstOrCreate(['name' => $identity]);
+        }
+    }
+
+    public function convertWhereToFindToSource(Play $play): void
+    {
+        $sources = Str::of($play->where_to_find)
+            ->replace(',', ';')
+            ->explode(';')
+            ->filter()
+            ->map(fn ($source) => trim($source))
+            ->filter();
+
+        foreach ($sources as $source) {
+            $play->playSources()->firstOrCreate(['name' => $source]);
+        }
+    }
+
+    public function convertPlayTypeToMonologueGenre(Play $play): void
+    {
+        foreach ($play->monologues()->withoutGlobalScopes()->get() as $monologue) {
+            $monologue->genres()->firstOrCreate(['name' => $play->type]);
+        }
+    }
+};
diff --git a/public/css/monologues-backend.css b/public/css/monologues-backend.css
index 26b175b..56c2b83 100644
--- a/public/css/monologues-backend.css
+++ b/public/css/monologues-backend.css
@@ -28,6 +28,8 @@
 
 .monologues-z-10 { z-index: 10; }
 
+.monologues-col-span-2 { grid-column: span 2 / span 2; }
+
 .monologues-mx-auto { margin-left: auto; margin-right: auto; }
 
 .monologues--mr-2 { margin-right: -0.5rem; }
@@ -54,6 +56,10 @@
 
 .monologues-mt-6 { margin-top: 1.5rem; }
 
+.monologues-ml-2 { margin-left: 0.5rem; }
+
+.monologues-ml-1 { margin-left: 0.25rem; }
+
 .monologues-block { display: block; }
 
 .monologues-flex { display: flex; }
@@ -68,6 +74,8 @@
 
 .monologues-h-16 { height: 4rem; }
 
+.monologues-h-5 { height: 1.25rem; }
+
 .monologues-h-6 { height: 1.5rem; }
 
 .monologues-h-8 { height: 2rem; }
@@ -78,9 +86,9 @@
 
 .monologues-h-full { height: 100%; }
 
-.monologues-h-5 { height: 1.25rem; }
+.monologues-h-96 { height: 24rem; }
 
-.monologues-h-4 { height: 1rem; }
+.monologues-h-\[440px\] { height: 440px; }
 
 .monologues-min-h-full { min-height: 100%; }
 
@@ -88,6 +96,8 @@
 
 .monologues-w-48 { width: 12rem; }
 
+.monologues-w-5 { width: 1.25rem; }
+
 .monologues-w-6 { width: 1.5rem; }
 
 .monologues-w-8 { width: 2rem; }
@@ -98,10 +108,12 @@
 
 .monologues-w-auto { width: auto; }
 
-.monologues-w-5 { width: 1.25rem; }
+.monologues-w-full { width: 100%; }
 
 .monologues-w-4 { width: 1rem; }
 
+.monologues-w-\[500px\] { width: 500px; }
+
 .monologues-max-w-2xl { max-width: 42rem; }
 
 .monologues-max-w-7xl { max-width: 80rem; }
@@ -114,6 +126,8 @@
 
 .monologues-max-w-xs { max-width: 20rem; }
 
+.monologues-flex-1 { flex: 1 1 0%; }
+
 .monologues-flex-shrink-0 { flex-shrink: 0; }
 
 .monologues-origin-top-right { transform-origin: top right; }
@@ -134,67 +148,89 @@
 
 .monologues-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
 
+.monologues-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+
 .monologues-flex-col { flex-direction: column; }
 
 .monologues-items-center { align-items: center; }
 
+.monologues-justify-end { justify-content: flex-end; }
+
 .monologues-justify-center { justify-content: center; }
 
 .monologues-justify-between { justify-content: space-between; }
 
 .monologues-gap-3 { gap: 0.75rem; }
 
+.monologues-gap-4 { gap: 1rem; }
+
 .monologues-gap-x-6 { -moz-column-gap: 1.5rem; column-gap: 1.5rem; }
 
 .monologues-space-y-1 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.25rem * var(--tw-space-y-reverse)); }
 
+.-monologues-space-y-2 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(-0.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-0.5rem * var(--tw-space-y-reverse)); }
+
+.monologues-space-y-2 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)); }
+
+.monologues-space-y-4 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1rem * var(--tw-space-y-reverse)); }
+
+.-monologues-space-y-4 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(-1rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-1rem * var(--tw-space-y-reverse)); }
+
+.monologues-space-y-3 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.75rem * var(--tw-space-y-reverse)); }
+
+.monologues-space-x-3 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(0.75rem * var(--tw-space-x-reverse)); margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse))); }
+
+.monologues-space-x-4 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(1rem * var(--tw-space-x-reverse)); margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse))); }
+
 .monologues-self-end { align-self: flex-end; }
 
+.monologues-justify-self-end { justify-self: end; }
+
 .monologues-overflow-hidden { overflow: hidden; }
 
+.monologues-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+.monologues-whitespace-normal { white-space: normal; }
+
 .monologues-rounded-full { border-radius: 9999px; }
 
 .monologues-rounded-md { border-radius: 0.375rem; }
 
+.monologues-rounded-3xl { border-radius: 1.5rem; }
+
 .monologues-border-b { border-bottom-width: 1px; }
 
+.monologues-border-b-2 { border-bottom-width: 2px; }
+
 .monologues-border-l-4 { border-left-width: 4px; }
 
 .monologues-border-t { border-top-width: 1px; }
 
-.monologues-border-b-2 { border-bottom-width: 2px; }
-
 .monologues-border-gray-200 { --tw-border-opacity: 1; border-color: rgb(229 231 235 / var(--tw-border-opacity)); }
 
 .monologues-border-indigo-500 { --tw-border-opacity: 1; border-color: rgb(99 102 241 / var(--tw-border-opacity)); }
 
 .monologues-border-transparent { border-color: transparent; }
 
+.monologues-bg-gray-100 { --tw-bg-opacity: 1; background-color: rgb(243 244 246 / var(--tw-bg-opacity)); }
+
+.monologues-bg-gray-200 { --tw-bg-opacity: 1; background-color: rgb(229 231 235 / var(--tw-bg-opacity)); }
+
 .monologues-bg-gray-50 { --tw-bg-opacity: 1; background-color: rgb(249 250 251 / var(--tw-bg-opacity)); }
 
 .monologues-bg-gray-900 { --tw-bg-opacity: 1; background-color: rgb(17 24 39 / var(--tw-bg-opacity)); }
 
-.monologues-bg-indigo-50 { --tw-bg-opacity: 1; background-color: rgb(238 242 255 / var(--tw-bg-opacity)); }
-
 .monologues-bg-white { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); }
 
 .monologues-bg-white\/5 { background-color: rgb(255 255 255 / 0.05); }
 
-.monologues-bg-gray-400 { --tw-bg-opacity: 1; background-color: rgb(156 163 175 / var(--tw-bg-opacity)); }
-
-.monologues-bg-gray-200 { --tw-bg-opacity: 1; background-color: rgb(229 231 235 / var(--tw-bg-opacity)); }
-
-.monologues-bg-fuchsia-600 { --tw-bg-opacity: 1; background-color: rgb(192 38 211 / var(--tw-bg-opacity)); }
-
-.monologues-bg-gray-600 { --tw-bg-opacity: 1; background-color: rgb(75 85 99 / var(--tw-bg-opacity)); }
-
-.monologues-bg-gray-100 { --tw-bg-opacity: 1; background-color: rgb(243 244 246 / var(--tw-bg-opacity)); }
+.monologues-object-cover { -o-object-fit: cover; object-fit: cover; }
 
 .monologues-p-1 { padding: 0.25rem; }
 
 .monologues-p-2 { padding: 0.5rem; }
 
-.monologues-p-4 { padding: 1rem; }
+.monologues-px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
 
 .monologues-px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
 
@@ -216,22 +252,20 @@
 
 .monologues-py-8 { padding-top: 2rem; padding-bottom: 2rem; }
 
-.monologues-px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
-
 .monologues-pb-3 { padding-bottom: 0.75rem; }
 
 .monologues-pl-3 { padding-left: 0.75rem; }
 
 .monologues-pr-4 { padding-right: 1rem; }
 
+.monologues-pt-1 { padding-top: 0.25rem; }
+
 .monologues-pt-16 { padding-top: 4rem; }
 
 .monologues-pt-2 { padding-top: 0.5rem; }
 
 .monologues-pt-4 { padding-top: 1rem; }
 
-.monologues-pt-1 { padding-top: 0.25rem; }
-
 .monologues-text-center { text-align: center; }
 
 .monologues-text-right { text-align: right; }
@@ -246,12 +280,16 @@
 
 .monologues-text-xs { font-size: 0.75rem; line-height: 1rem; }
 
+.monologues-text-xl { font-size: 1.25rem; line-height: 1.75rem; }
+
 .monologues-font-bold { font-weight: 700; }
 
 .monologues-font-medium { font-weight: 500; }
 
 .monologues-font-semibold { font-weight: 600; }
 
+.monologues-font-light { font-weight: 300; }
+
 .monologues-uppercase { text-transform: uppercase; }
 
 .monologues-leading-6 { line-height: 1.5rem; }
@@ -262,6 +300,8 @@
 
 .monologues-tracking-wide { letter-spacing: 0.025em; }
 
+.monologues-tracking-wider { letter-spacing: 0.05em; }
+
 .monologues-text-gray-300 { --tw-text-opacity: 1; color: rgb(209 213 219 / var(--tw-text-opacity)); }
 
 .monologues-text-gray-400 { --tw-text-opacity: 1; color: rgb(156 163 175 / var(--tw-text-opacity)); }
@@ -276,8 +316,6 @@
 
 .monologues-text-gray-900 { --tw-text-opacity: 1; color: rgb(17 24 39 / var(--tw-text-opacity)); }
 
-.monologues-text-indigo-700 { --tw-text-opacity: 1; color: rgb(67 56 202 / var(--tw-text-opacity)); }
-
 .monologues-text-white { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); }
 
 .monologues-underline { text-decoration-line: underline; }
@@ -324,10 +362,10 @@
 
 .hover\:monologues-text-gray-500:hover { --tw-text-opacity: 1; color: rgb(107 114 128 / var(--tw-text-opacity)); }
 
-.hover\:monologues-text-gray-800:hover { --tw-text-opacity: 1; color: rgb(31 41 55 / var(--tw-text-opacity)); }
-
 .hover\:monologues-text-gray-700:hover { --tw-text-opacity: 1; color: rgb(55 65 81 / var(--tw-text-opacity)); }
 
+.hover\:monologues-text-gray-800:hover { --tw-text-opacity: 1; color: rgb(31 41 55 / var(--tw-text-opacity)); }
+
 .focus\:monologues-outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; }
 
 .focus\:monologues-ring-2:focus { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); }
@@ -356,8 +394,12 @@
 
  .sm\:monologues-flex { display: flex; }
 
+ .sm\:monologues-grid { display: grid; }
+
  .sm\:monologues-hidden { display: none; }
 
+ .sm\:monologues-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+
  .sm\:monologues-items-center { align-items: center; }
 
  .sm\:monologues-space-x-8 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(2rem * var(--tw-space-x-reverse)); margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse))); }
diff --git a/public/css/monologues.css b/public/css/monologues.css
index 26b175b..56c2b83 100644
--- a/public/css/monologues.css
+++ b/public/css/monologues.css
@@ -28,6 +28,8 @@
 
 .monologues-z-10 { z-index: 10; }
 
+.monologues-col-span-2 { grid-column: span 2 / span 2; }
+
 .monologues-mx-auto { margin-left: auto; margin-right: auto; }
 
 .monologues--mr-2 { margin-right: -0.5rem; }
@@ -54,6 +56,10 @@
 
 .monologues-mt-6 { margin-top: 1.5rem; }
 
+.monologues-ml-2 { margin-left: 0.5rem; }
+
+.monologues-ml-1 { margin-left: 0.25rem; }
+
 .monologues-block { display: block; }
 
 .monologues-flex { display: flex; }
@@ -68,6 +74,8 @@
 
 .monologues-h-16 { height: 4rem; }
 
+.monologues-h-5 { height: 1.25rem; }
+
 .monologues-h-6 { height: 1.5rem; }
 
 .monologues-h-8 { height: 2rem; }
@@ -78,9 +86,9 @@
 
 .monologues-h-full { height: 100%; }
 
-.monologues-h-5 { height: 1.25rem; }
+.monologues-h-96 { height: 24rem; }
 
-.monologues-h-4 { height: 1rem; }
+.monologues-h-\[440px\] { height: 440px; }
 
 .monologues-min-h-full { min-height: 100%; }
 
@@ -88,6 +96,8 @@
 
 .monologues-w-48 { width: 12rem; }
 
+.monologues-w-5 { width: 1.25rem; }
+
 .monologues-w-6 { width: 1.5rem; }
 
 .monologues-w-8 { width: 2rem; }
@@ -98,10 +108,12 @@
 
 .monologues-w-auto { width: auto; }
 
-.monologues-w-5 { width: 1.25rem; }
+.monologues-w-full { width: 100%; }
 
 .monologues-w-4 { width: 1rem; }
 
+.monologues-w-\[500px\] { width: 500px; }
+
 .monologues-max-w-2xl { max-width: 42rem; }
 
 .monologues-max-w-7xl { max-width: 80rem; }
@@ -114,6 +126,8 @@
 
 .monologues-max-w-xs { max-width: 20rem; }
 
+.monologues-flex-1 { flex: 1 1 0%; }
+
 .monologues-flex-shrink-0 { flex-shrink: 0; }
 
 .monologues-origin-top-right { transform-origin: top right; }
@@ -134,67 +148,89 @@
 
 .monologues-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
 
+.monologues-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+
 .monologues-flex-col { flex-direction: column; }
 
 .monologues-items-center { align-items: center; }
 
+.monologues-justify-end { justify-content: flex-end; }
+
 .monologues-justify-center { justify-content: center; }
 
 .monologues-justify-between { justify-content: space-between; }
 
 .monologues-gap-3 { gap: 0.75rem; }
 
+.monologues-gap-4 { gap: 1rem; }
+
 .monologues-gap-x-6 { -moz-column-gap: 1.5rem; column-gap: 1.5rem; }
 
 .monologues-space-y-1 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.25rem * var(--tw-space-y-reverse)); }
 
+.-monologues-space-y-2 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(-0.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-0.5rem * var(--tw-space-y-reverse)); }
+
+.monologues-space-y-2 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)); }
+
+.monologues-space-y-4 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1rem * var(--tw-space-y-reverse)); }
+
+.-monologues-space-y-4 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(-1rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-1rem * var(--tw-space-y-reverse)); }
+
+.monologues-space-y-3 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.75rem * var(--tw-space-y-reverse)); }
+
+.monologues-space-x-3 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(0.75rem * var(--tw-space-x-reverse)); margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse))); }
+
+.monologues-space-x-4 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(1rem * var(--tw-space-x-reverse)); margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse))); }
+
 .monologues-self-end { align-self: flex-end; }
 
+.monologues-justify-self-end { justify-self: end; }
+
 .monologues-overflow-hidden { overflow: hidden; }
 
+.monologues-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+.monologues-whitespace-normal { white-space: normal; }
+
 .monologues-rounded-full { border-radius: 9999px; }
 
 .monologues-rounded-md { border-radius: 0.375rem; }
 
+.monologues-rounded-3xl { border-radius: 1.5rem; }
+
 .monologues-border-b { border-bottom-width: 1px; }
 
+.monologues-border-b-2 { border-bottom-width: 2px; }
+
 .monologues-border-l-4 { border-left-width: 4px; }
 
 .monologues-border-t { border-top-width: 1px; }
 
-.monologues-border-b-2 { border-bottom-width: 2px; }
-
 .monologues-border-gray-200 { --tw-border-opacity: 1; border-color: rgb(229 231 235 / var(--tw-border-opacity)); }
 
 .monologues-border-indigo-500 { --tw-border-opacity: 1; border-color: rgb(99 102 241 / var(--tw-border-opacity)); }
 
 .monologues-border-transparent { border-color: transparent; }
 
+.monologues-bg-gray-100 { --tw-bg-opacity: 1; background-color: rgb(243 244 246 / var(--tw-bg-opacity)); }
+
+.monologues-bg-gray-200 { --tw-bg-opacity: 1; background-color: rgb(229 231 235 / var(--tw-bg-opacity)); }
+
 .monologues-bg-gray-50 { --tw-bg-opacity: 1; background-color: rgb(249 250 251 / var(--tw-bg-opacity)); }
 
 .monologues-bg-gray-900 { --tw-bg-opacity: 1; background-color: rgb(17 24 39 / var(--tw-bg-opacity)); }
 
-.monologues-bg-indigo-50 { --tw-bg-opacity: 1; background-color: rgb(238 242 255 / var(--tw-bg-opacity)); }
-
 .monologues-bg-white { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); }
 
 .monologues-bg-white\/5 { background-color: rgb(255 255 255 / 0.05); }
 
-.monologues-bg-gray-400 { --tw-bg-opacity: 1; background-color: rgb(156 163 175 / var(--tw-bg-opacity)); }
-
-.monologues-bg-gray-200 { --tw-bg-opacity: 1; background-color: rgb(229 231 235 / var(--tw-bg-opacity)); }
-
-.monologues-bg-fuchsia-600 { --tw-bg-opacity: 1; background-color: rgb(192 38 211 / var(--tw-bg-opacity)); }
-
-.monologues-bg-gray-600 { --tw-bg-opacity: 1; background-color: rgb(75 85 99 / var(--tw-bg-opacity)); }
-
-.monologues-bg-gray-100 { --tw-bg-opacity: 1; background-color: rgb(243 244 246 / var(--tw-bg-opacity)); }
+.monologues-object-cover { -o-object-fit: cover; object-fit: cover; }
 
 .monologues-p-1 { padding: 0.25rem; }
 
 .monologues-p-2 { padding: 0.5rem; }
 
-.monologues-p-4 { padding: 1rem; }
+.monologues-px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
 
 .monologues-px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
 
@@ -216,22 +252,20 @@
 
 .monologues-py-8 { padding-top: 2rem; padding-bottom: 2rem; }
 
-.monologues-px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
-
 .monologues-pb-3 { padding-bottom: 0.75rem; }
 
 .monologues-pl-3 { padding-left: 0.75rem; }
 
 .monologues-pr-4 { padding-right: 1rem; }
 
+.monologues-pt-1 { padding-top: 0.25rem; }
+
 .monologues-pt-16 { padding-top: 4rem; }
 
 .monologues-pt-2 { padding-top: 0.5rem; }
 
 .monologues-pt-4 { padding-top: 1rem; }
 
-.monologues-pt-1 { padding-top: 0.25rem; }
-
 .monologues-text-center { text-align: center; }
 
 .monologues-text-right { text-align: right; }
@@ -246,12 +280,16 @@
 
 .monologues-text-xs { font-size: 0.75rem; line-height: 1rem; }
 
+.monologues-text-xl { font-size: 1.25rem; line-height: 1.75rem; }
+
 .monologues-font-bold { font-weight: 700; }
 
 .monologues-font-medium { font-weight: 500; }
 
 .monologues-font-semibold { font-weight: 600; }
 
+.monologues-font-light { font-weight: 300; }
+
 .monologues-uppercase { text-transform: uppercase; }
 
 .monologues-leading-6 { line-height: 1.5rem; }
@@ -262,6 +300,8 @@
 
 .monologues-tracking-wide { letter-spacing: 0.025em; }
 
+.monologues-tracking-wider { letter-spacing: 0.05em; }
+
 .monologues-text-gray-300 { --tw-text-opacity: 1; color: rgb(209 213 219 / var(--tw-text-opacity)); }
 
 .monologues-text-gray-400 { --tw-text-opacity: 1; color: rgb(156 163 175 / var(--tw-text-opacity)); }
@@ -276,8 +316,6 @@
 
 .monologues-text-gray-900 { --tw-text-opacity: 1; color: rgb(17 24 39 / var(--tw-text-opacity)); }
 
-.monologues-text-indigo-700 { --tw-text-opacity: 1; color: rgb(67 56 202 / var(--tw-text-opacity)); }
-
 .monologues-text-white { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); }
 
 .monologues-underline { text-decoration-line: underline; }
@@ -324,10 +362,10 @@
 
 .hover\:monologues-text-gray-500:hover { --tw-text-opacity: 1; color: rgb(107 114 128 / var(--tw-text-opacity)); }
 
-.hover\:monologues-text-gray-800:hover { --tw-text-opacity: 1; color: rgb(31 41 55 / var(--tw-text-opacity)); }
-
 .hover\:monologues-text-gray-700:hover { --tw-text-opacity: 1; color: rgb(55 65 81 / var(--tw-text-opacity)); }
 
+.hover\:monologues-text-gray-800:hover { --tw-text-opacity: 1; color: rgb(31 41 55 / var(--tw-text-opacity)); }
+
 .focus\:monologues-outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; }
 
 .focus\:monologues-ring-2:focus { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); }
@@ -356,8 +394,12 @@
 
  .sm\:monologues-flex { display: flex; }
 
+ .sm\:monologues-grid { display: grid; }
+
  .sm\:monologues-hidden { display: none; }
 
+ .sm\:monologues-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+
  .sm\:monologues-items-center { align-items: center; }
 
  .sm\:monologues-space-x-8 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(2rem * var(--tw-space-x-reverse)); margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse))); }
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index af98b21..40017b0 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -1,4 +1,4 @@
 {
-    "/css/monologues-backend.css": "/css/monologues-backend.css?id=854071e040bb420a0f419c80d522b771",
-    "/css/monologues.css": "/css/monologues.css?id=854071e040bb420a0f419c80d522b771"
+    "/css/monologues-backend.css": "/css/monologues-backend.css?id=cda586acfe2a14bfc930253829a535a0",
+    "/css/monologues.css": "/css/monologues.css?id=cda586acfe2a14bfc930253829a535a0"
 }
diff --git a/resources/views/components/ctas/book-session.blade.php b/resources/views/components/ctas/book-session.blade.php
index 576d438..0e7c397 100644
--- a/resources/views/components/ctas/book-session.blade.php
+++ b/resources/views/components/ctas/book-session.blade.php
@@ -1,5 +1,5 @@
 <div class="monologues-mx-auto monologues-max-w-7xl monologues-py-12 sm:monologues-py-16">
-    <div class="monologues-relative monologues-isolate monologues-overflow-hidden monologues-bg-gray-900 monologues-px-6 monologues-pt-16 monologues-shadow-2xl sm:monologues-rounded-3xl sm:monologues-px-16 md:monologues-pt-24 lg:monologues-flex lg:monologues-gap-x-20 lg:monologues-px-24 lg:monologues-pt-0">
+    <div class="monologues-relative monologues-isolate monologues-overflow-hidden monologues-bg-gray-900 monologues-px-6 monologues-pt-16 monologues-shadow-2xl monologues-rounded-3xl sm:monologues-px-16 md:monologues-pt-24 lg:monologues-flex lg:monologues-gap-x-20 lg:monologues-px-24 lg:monologues-pt-0">
         <svg viewBox="0 0 1024 1024" class="monologues-absolute monologues-left-1/2 monologues-top-1/2 monologues--z-10 monologues-h-[64rem] monologues-w-[64rem] monologues--translate-y-1/2 [mask-image:radial-gradient(closest-side,white,transparent)] sm:monologues-left-full sm:monologues--ml-80 lg:monologues-left-1/2 lg:monologues-ml-0 lg:monologues--translate-x-1/2 lg:monologues-translate-y-0" aria-hidden="true">
             <circle cx="512" cy="512" r="512" fill="url(#759c1415-0410-454c-8f7c-9a820de03641)" fill-opacity="0.7" />
             <defs>
@@ -13,12 +13,14 @@
             <h2 class="monologues-text-3xl monologues-font-bold monologues-tracking-tight monologues-text-white sm:monologues-text-4xl">Boost your monologue.<br>Make strong choices.</h2>
             <p class="monologues-mt-6 monologues-text-lg monologues-leading-8 monologues-text-gray-300">Book a session with PK to boost you monologue performance to stand out with casting directors.</p>
             <div class="monologues-mt-10 monologues-flex monologues-items-center monologues-justify-center monologues-gap-x-6 lg:monologues-justify-start">
-                <a href="#" class="monologues-rounded-md monologues-bg-white monologues-px-3.5 monologues-py-2.5 monologues-text-sm monologues-font-semibold monologues-text-gray-900 monologues-shadow-sm hover:monologues-bg-gray-100 focus-visible:monologues-outline focus-visible:monologues-outline-2 focus-visible:monologues-outline-offset-2 focus-visible:monologues-outline-white">Book Session</a>
-                <a href="#" class="monologues-text-sm monologues-font-semibold monologues-leading-6 monologues-text-white">Learn more <span aria-hidden="true">→</span></a>
+                <a href="https://pkmethod.com/book" class="monologues-rounded-md monologues-bg-white monologues-px-3.5 monologues-py-2.5 monologues-text-sm monologues-font-semibold monologues-text-gray-900 monologues-shadow-sm hover:monologues-bg-gray-100 focus-visible:monologues-outline focus-visible:monologues-outline-2 focus-visible:monologues-outline-offset-2 focus-visible:monologues-outline-white">Book Session</a>
+                <a href="https://pkmethod.com/pages/text-work-and-monologue-rep" class="monologues-text-sm monologues-font-semibold monologues-leading-6 monologues-text-white">Learn more <span aria-hidden="true">→</span></a>
             </div>
         </div>
         <div class="monologues-relative monologues-mt-16 monologues-h-80 lg:monologues-mt-8">
-            <img class="monologues-absolute monologues-left-0 monologues-top-0 monologues-w-[57rem] monologues-max-w-none monologues-rounded-md monologues-bg-white/5 monologues-ring-1 monologues-ring-white/10" src="https://res.cloudinary.com/tonning/image/upload/f_auto/c_scale,w_3123/IMG_0911_fjc785?_a=BAAAUWE0" alt="App screenshot" width="1824" height="1080">
+            <div class="monologues-absolute monologues-left-0 monologues-top-0 monologues-w-[500px] monologues-h-[440px] monologues-max-w-none monologues-bg-white/5 monologues-ring-1 monologues-ring-white/10">
+                <img class="monologues-h-full monologues-w-full monologues-object-cover monologues-rounded-md" src="https://res.cloudinary.com/tonning/image/upload/f_auto/c_scale,w_3123/IMG_0911_fjc785?_a=BAAAUWE0" alt="App screenshot" width="1824" height="1080">
+            </div>
         </div>
     </div>
 </div>
diff --git a/resources/views/layouts/monologues.blade.php b/resources/views/layouts/monologues.blade.php
index 02c0c5a..fcbcf60 100644
--- a/resources/views/layouts/monologues.blade.php
+++ b/resources/views/layouts/monologues.blade.php
@@ -41,12 +41,21 @@ class="monologues-border-b monologues-border-gray-200 monologues-bg-white"
         <div class="monologues-mx-auto monologues-max-w-7xl monologues-px-4 sm:monologues-px-6 lg:monologues-px-8">
             <div class="monologues-flex monologues-h-16 monologues-justify-between">
                 <div class="monologues-flex">
-{{--                    <div class="monologues-flex monologues-flex-shrink-0 monologues-items-center">--}}
-{{--                        <img class="monologues-block monologues-h-8 monologues-w-auto lg:monologues-hidden"--}}
-{{--                             src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600" alt="Your Company">--}}
-{{--                        <img class="monologues-hidden monologues-h-8 monologues-w-auto lg:monologues-block"--}}
-{{--                             src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600" alt="Your Company">--}}
-{{--                    </div>--}}
+                    <div class="monologues-flex monologues-flex-shrink-0 monologues-items-center">
+                        <span class="sr-only">Monologue Database</span>
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 331 111" fill="none" class="h-8">
+                            <g clip-path="url(#clip0_1_82)">
+                                <path d="M51.008 61.384C46.976 61.384 43.968 59.08 43.968 54.344V43.976C43.968 40.072 42.368 37 39.296 37C35.968 37 34.432 40.072 34.432 43.976V53.896C34.432 57.352 35.52 58.312 38.592 58.504V61H20.992V58.504C23.744 58.312 24.832 57.352 24.832 53.896V43.976C24.832 40.072 23.168 37 20.096 37C16.832 37 15.232 40.072 15.232 43.976V53.896C15.232 57.352 16.32 58.312 18.944 58.504V61H1.536V58.504C4.544 58.312 5.632 57.352 5.632 53.896V39.176C5.632 36.168 3.968 35.656 1.6 35.848V33.416L12.032 31.688C14.208 31.368 15.232 32.328 15.232 33.736C15.232 35.912 16.576 36.104 17.472 35.272C19.264 33.352 21.888 31.304 26.048 31.304C28.224 31.304 31.488 31.752 33.344 34.696C34.176 35.912 35.008 36.104 35.84 35.336C38.72 32.008 41.472 31.304 44.544 31.304C48.768 31.304 53.568 33.16 53.568 43.208V54.472C53.568 56.584 54.4 57.992 56.256 57.224V58.632C55.424 60.808 53.056 61.384 51.008 61.384ZM75.3545 61.384C67.4825 61.384 59.4825 56.648 59.4825 46.28C59.4825 35.976 67.4825 31.56 75.1625 31.56C83.0985 31.56 91.0345 36.296 91.0345 46.664C91.0345 56.968 83.0985 61.384 75.3545 61.384ZM69.7225 43.464C69.7225 51.4 72.3465 58.44 76.4425 58.44C78.9385 58.44 80.7945 55.944 80.7945 49.352C80.7945 41.48 78.2985 34.44 74.0745 34.44C71.5145 34.44 69.7225 37 69.7225 43.464ZM125.208 61.384C121.113 61.384 118.169 59.08 118.169 54.344V43.976C118.169 40.2 116.249 37 112.857 37C109.401 37 107.545 40.2 107.545 43.976V53.896C107.545 57.352 108.633 58.312 111.513 58.504V61H93.8485V58.504C96.8565 58.312 97.9445 57.352 97.9445 53.896V39.24C97.9445 36.232 96.2805 35.72 93.9125 35.912V33.416L104.345 31.688C106.521 31.368 107.545 32.328 107.545 33.736C107.545 35.848 108.889 36.296 109.721 35.272C111.385 33.16 113.689 31.304 118.361 31.304C122.841 31.304 127.769 33.16 127.769 42.504V54.472C127.769 56.584 128.601 57.928 130.457 57.224V58.632C129.561 60.808 127.257 61.384 125.208 61.384ZM149.542 61.384C141.67 61.384 133.67 56.648 133.67 46.28C133.67 35.976 141.67 31.56 149.35 31.56C157.286 31.56 165.222 36.296 165.222 46.664C165.222 56.968 157.286 61.384 149.542 61.384ZM143.91 43.464C143.91 51.4 146.534 58.44 150.63 58.44C153.126 58.44 154.982 55.944 154.982 49.352C154.982 41.48 152.486 34.44 148.262 34.44C145.702 34.44 143.91 37 143.91 43.464ZM178.525 61.384C174.493 61.384 171.485 59.08 171.485 54.344V26.76C171.485 23.752 169.821 23.24 167.453 23.432V20.936L177.885 19.208C180.061 18.888 181.085 19.848 181.085 21.768V54.472C181.085 56.584 181.917 57.992 183.773 57.224V58.632C182.877 60.808 180.573 61.384 178.525 61.384ZM203.48 61.384C195.608 61.384 187.608 56.648 187.608 46.28C187.608 35.976 195.608 31.56 203.288 31.56C211.224 31.56 219.16 36.296 219.16 46.664C219.16 56.968 211.224 61.384 203.48 61.384ZM197.848 43.464C197.848 51.4 200.472 58.44 204.568 58.44C207.064 58.44 208.92 55.944 208.92 49.352C208.92 41.48 206.424 34.44 202.2 34.44C199.64 34.44 197.848 37 197.848 43.464ZM235.719 74.504C228.615 74.504 222.023 72.264 222.023 67.464C222.023 61.448 232.263 62.28 227.399 61C225.223 60.296 223.623 58.44 223.623 56.264C223.623 53.768 225.735 51.464 229.959 50.952C226.311 49.096 224.199 46.024 224.199 42.056C224.199 36.36 228.167 31.56 237.062 31.56C241.991 31.56 245.831 33.096 248.391 35.784C248.455 33.608 249.607 31.752 252.231 31.752C253.958 31.752 255.815 32.584 255.815 35.208C255.815 37.576 254.151 38.856 252.103 38.408C250.631 38.152 250.183 38.92 250.247 39.944C250.311 40.84 250.503 41.544 250.503 42.376C250.503 47.752 246.535 52.552 238.535 52.552C236.679 52.552 235.463 52.296 234.311 52.296C232.711 52.296 232.007 52.68 232.007 53.64C232.007 54.664 233.031 55.112 236.231 55.688L242.695 56.904C248.967 58.056 254.087 59.592 254.087 64.136C254.087 69.96 245.895 74.504 235.719 74.504ZM230.727 67.144C230.727 69.448 233.223 72.072 238.407 72.072C242.951 72.072 245.255 70.088 245.255 67.208C245.255 64.648 243.463 64.456 238.471 63.432L236.743 63.112C233.671 62.472 230.727 64.584 230.727 67.144ZM233.287 40.136C233.287 44.36 234.375 49.864 238.151 49.864C241.351 49.864 241.351 45.96 241.351 43.976C241.351 39.816 240.327 34.248 236.487 34.248C233.351 34.248 233.287 38.152 233.287 40.136ZM271.726 61.384C267.246 61.384 262.382 59.528 262.382 49.48V39.304C262.382 36.36 260.718 35.848 258.35 35.912V33.416L268.782 31.688C270.958 31.368 271.982 32.328 271.982 34.248V47.944C271.982 52.424 273.838 55.624 277.294 55.624C280.814 55.624 282.606 52.424 282.606 47.944V39.304C282.606 36.36 280.942 35.848 278.574 35.912V33.416L288.942 31.688C291.182 31.368 292.206 32.328 292.206 34.248V54.472C292.206 56.584 293.038 57.992 294.894 57.224V58.632C293.998 60.808 291.694 61.384 289.518 61.384C284.91 61.384 283.63 58.504 283.31 57.096C283.118 56.2 282.606 55.752 282.158 55.752C281.71 55.752 281.39 56.136 281.07 56.584C279.278 59.016 276.782 61.384 271.726 61.384ZM314.669 61.384C306.669 61.384 298.733 56.776 298.733 46.728C298.733 36.232 307.309 31.56 315.245 31.56C322.029 31.56 327.533 34.952 327.533 40.584C327.533 46.344 321.965 46.664 316.333 47.112L311.341 47.496C310.253 47.56 309.677 48.072 309.677 49.544C309.677 54.28 314.797 56.392 319.021 56.392C321.261 56.392 324.333 55.752 326.637 53.128L328.557 54.856C327.341 57.352 322.157 61.384 314.669 61.384ZM309.229 42.248C309.229 44.104 309.677 45.064 311.341 45L313.645 44.744C318.061 44.296 318.957 43.144 318.957 40.648C318.957 37.576 317.677 34.504 314.349 34.504C310.189 34.504 309.229 39.176 309.229 42.248Z" fill="black"></path>
+                                <path d="M14.208 111.384C7.808 111.384 1.92 106.072 1.92 96.856C1.92 86.872 8.768 81.56 15.808 81.56C22.4 81.56 24.64 86.296 24.64 81.048V76.248C24.64 73.304 23.424 72.536 20.544 72.792V70.808L29.504 69.144C31.36 68.824 32.32 69.656 32.32 71.384V105.432C32.32 107.608 33.408 108.504 35.264 107.928V109.08C34.432 110.744 32.32 111.384 30.464 111.384C28.352 111.384 26.176 110.552 25.472 108.632C25.088 107.608 24.512 107.16 23.808 107.16C22.272 107.16 20.032 111.384 14.208 111.384ZM9.984 93.976C9.984 100.888 13.376 106.904 18.432 106.904C21.184 106.904 24.64 105.24 24.64 99.672V94.808C24.64 87 20.16 83.928 16.576 83.928C12.416 83.928 9.984 88.152 9.984 93.976ZM47.4915 111.384C43.1395 111.384 39.1075 109.336 39.1075 104.344C39.1075 99.16 43.4595 96.024 55.9395 94.232C57.7315 93.976 58.2435 93.528 58.2435 91.864V90.84C58.2435 86.232 56.7715 83.864 53.1235 83.864C45.8275 83.864 51.3955 92.376 44.7395 92.376C42.1795 92.376 40.9635 90.776 40.9635 88.728C40.9635 83.8 47.9395 81.56 54.9795 81.56C62.5315 81.56 65.9235 84.312 65.9235 93.208V105.432C65.9235 107.608 66.6915 108.568 68.5475 107.928V109.08C67.7155 110.744 65.8595 111.384 63.8755 111.384C60.2915 111.384 58.6275 109.272 58.3715 106.968C58.3075 106.2 57.7955 106.072 57.2195 106.776C55.4275 109.016 52.0995 111.384 47.4915 111.384ZM46.9795 102.808C46.9795 105.112 48.3235 107.096 51.4595 107.096C55.3635 107.096 58.2435 104.088 58.2435 100.056V98.392C58.2435 96.92 57.7315 96.28 55.6835 96.472C48.5795 97.112 46.9795 100.312 46.9795 102.808ZM83.3955 111.32C78.1475 111.32 74.8195 108.504 74.8195 102.68V87.064C74.8195 85.08 74.3075 84.696 73.0915 84.696H70.1475V82.904C74.6915 81.624 77.0595 79.384 79.1075 75.928C79.4915 75.288 79.8755 75.096 80.5155 75.096H81.4115C82.1155 75.096 82.5635 75.544 82.5635 76.248L82.4995 80.408C82.4995 81.752 83.0755 82.136 86.1475 82.136H90.6275V85.08L86.1475 84.824C83.0755 84.632 82.4995 85.208 82.4995 87.192V102.168C82.4995 105.816 83.0115 108.184 86.1475 108.184C87.2995 108.184 88.5155 107.864 89.5395 107.032C90.3715 107.928 90.4995 108.696 89.9235 109.208C88.5795 110.424 86.3395 111.32 83.3955 111.32ZM102.554 111.384C98.202 111.384 94.17 109.336 94.17 104.344C94.17 99.16 98.522 96.024 111.002 94.232C112.794 93.976 113.306 93.528 113.306 91.864V90.84C113.306 86.232 111.834 83.864 108.186 83.864C100.89 83.864 106.458 92.376 99.802 92.376C97.242 92.376 96.026 90.776 96.026 88.728C96.026 83.8 103.002 81.56 110.042 81.56C117.594 81.56 120.986 84.312 120.986 93.208V105.432C120.986 107.608 121.754 108.568 123.61 107.928V109.08C122.778 110.744 120.922 111.384 118.938 111.384C115.354 111.384 113.69 109.272 113.434 106.968C113.37 106.2 112.858 106.072 112.282 106.776C110.49 109.016 107.162 111.384 102.554 111.384ZM102.042 102.808C102.042 105.112 103.386 107.096 106.522 107.096C110.426 107.096 113.306 104.088 113.306 100.056V98.392C113.306 96.92 112.794 96.28 110.746 96.472C103.642 97.112 102.042 100.312 102.042 102.808ZM130.515 111.384C129.811 111.384 129.299 110.872 129.299 110.104V76.248C129.299 73.304 128.083 72.536 125.203 72.792V70.808L134.163 69.144C136.019 68.824 136.979 69.656 136.979 71.384V84.056C136.979 85.016 137.683 85.208 138.387 84.504C139.667 83.224 142.803 81.56 146.899 81.56C153.811 81.56 159.763 86.808 159.763 96.024C159.763 106.008 152.851 111.384 145.811 111.384C140.307 111.384 137.107 108.12 135.059 108.12C133.075 108.12 132.115 111.384 130.515 111.384ZM136.979 99.608C136.979 106.648 141.715 109.016 145.043 109.016C149.459 109.016 151.699 104.92 151.699 98.904C151.699 91.8 148.563 86.04 143.443 86.04C140.499 86.04 136.979 87.768 136.979 94.616V99.608ZM171.992 111.384C167.64 111.384 163.608 109.336 163.608 104.344C163.608 99.16 167.96 96.024 180.44 94.232C182.232 93.976 182.744 93.528 182.744 91.864V90.84C182.744 86.232 181.272 83.864 177.624 83.864C170.328 83.864 175.896 92.376 169.24 92.376C166.68 92.376 165.464 90.776 165.464 88.728C165.464 83.8 172.44 81.56 179.48 81.56C187.032 81.56 190.424 84.312 190.424 93.208V105.432C190.424 107.608 191.192 108.568 193.048 107.928V109.08C192.216 110.744 190.36 111.384 188.376 111.384C184.792 111.384 183.128 109.272 182.872 106.968C182.808 106.2 182.296 106.072 181.72 106.776C179.928 109.016 176.6 111.384 171.992 111.384ZM171.48 102.808C171.48 105.112 172.824 107.096 175.96 107.096C179.864 107.096 182.744 104.088 182.744 100.056V98.392C182.744 96.92 182.232 96.28 180.184 96.472C173.08 97.112 171.48 100.312 171.48 102.808ZM208.378 111.384C204.154 111.384 200.57 110.168 198.394 108.504C196.794 105.176 196.602 101.272 199.034 101.272C199.93 101.272 200.506 101.72 200.826 102.68C202.362 107.288 205.05 109.08 208.826 109.08C213.114 109.08 214.33 106.904 214.33 104.856C214.33 102.04 211.706 101.144 207.674 99.928C202.49 98.328 197.562 95.832 197.562 90.264C197.562 84.696 202.746 81.56 209.338 81.56C213.178 81.56 216.762 82.648 218.938 84.248C220.538 87.576 220.73 91.416 218.298 91.416C217.402 91.416 216.826 90.968 216.506 90.008C214.97 85.4 212.218 83.736 208.954 83.736C205.882 83.736 204.474 85.272 204.474 87.576C204.474 90.456 206.906 91.864 209.978 92.824C214.586 94.232 221.498 95.96 221.498 102.36C221.498 108.312 215.354 111.384 208.378 111.384ZM240.782 111.384C232.782 111.384 225.358 106.328 225.358 96.6C225.358 86.552 233.166 81.56 241.166 81.56C247.822 81.56 252.686 85.016 252.686 90.264C252.686 95.384 248.142 96.216 241.038 96.664L235.726 96.984C234.574 97.048 234.062 97.624 234.062 99.032C234.062 103.768 238.99 107.032 244.366 107.032C246.862 107.032 249.934 106.328 252.174 103.64L253.71 104.984C252.494 107.352 247.95 111.384 240.782 111.384ZM233.678 92.312C233.678 94.296 234.254 94.936 235.79 94.872L239.118 94.68C244.238 94.36 245.518 93.272 245.518 90.328C245.518 87.064 243.982 83.992 240.142 83.992C235.342 83.992 233.678 88.728 233.678 92.312Z" fill="black"></path>
+                                <path d="M5.52 19.12C3.432 19.12 2.136 17.992 2.136 15.712V10.168C2.136 9.376 1.944 9.232 1.464 9.232H0.36V8.488C2.208 8.032 3.144 7.144 3.912 5.848C4.08 5.584 4.248 5.488 4.536 5.488H4.92C5.208 5.488 5.4 5.68 5.4 5.992L5.376 7.528C5.376 8.032 5.616 8.176 6.816 8.176H8.424V9.376L6.816 9.28C5.616 9.184 5.376 9.424 5.376 10.216V15.568C5.376 16.912 5.544 17.8 6.72 17.8C7.104 17.8 7.584 17.704 7.992 17.392C8.304 17.752 8.376 18.064 8.136 18.304C7.608 18.784 6.672 19.12 5.52 19.12ZM20.9966 19.144C19.6046 19.144 18.5966 18.376 18.5966 16.72V12.592C18.5966 11.056 17.8286 9.808 16.4606 9.808C15.0206 9.808 14.2766 11.056 14.2766 12.592V16.528C14.2766 17.728 14.6846 18.088 15.7646 18.16V19H9.50063V18.16C10.6286 18.088 11.0366 17.728 11.0366 16.528V6.064C11.0366 4.936 10.4846 4.72 9.50063 4.792V3.952L13.1246 3.304C13.8926 3.184 14.2766 3.52 14.2766 4.216V8.752C14.2766 9.616 14.7086 9.784 15.0206 9.424C15.5726 8.704 16.4366 7.888 18.2846 7.888C20.0366 7.888 21.8366 8.656 21.8366 12.04V16.72C21.8366 17.536 22.1966 17.968 22.8926 17.704V18.208C22.5806 18.904 21.7406 19.144 20.9966 19.144ZM29.8969 19.144C26.8969 19.144 24.0169 17.344 24.0169 13.624C24.0169 9.784 27.0889 7.96 30.0889 7.96C32.6089 7.96 34.5529 9.256 34.5529 11.272C34.5529 13.312 32.6329 13.528 30.2569 13.72L28.3129 13.84C27.9049 13.864 27.6889 14.08 27.6889 14.608C27.6889 16.384 29.5849 17.392 31.3849 17.392C32.2729 17.392 33.4249 17.128 34.2649 16.144L34.9129 16.72C34.4569 17.632 32.6569 19.144 29.8969 19.144ZM27.5449 11.992C27.5449 12.712 27.7369 13 28.3369 12.976L29.3929 12.88C31.1689 12.76 31.5769 12.328 31.5769 11.296C31.5769 10.12 31.0489 8.968 29.7289 8.968C28.0249 8.968 27.5449 10.744 27.5449 11.992Z" fill="black"></path>
+                            </g>
+                            <defs>
+                                <clipPath id="clip0_1_82">
+                                    <rect width="331" height="111" fill="white"></rect>
+                                </clipPath>
+                            </defs>
+                        </svg>
+                    </div>
                     <div
                         class="monologues-hidden sm:monologues--my-px sm:monologues-ml-6 sm:monologues-flex sm:monologues-space-x-8">
                         <a
diff --git a/resources/views/models/monologues/backend/form.blade.php b/resources/views/models/monologues/backend/form.blade.php
index 9725b3b..da61e7f 100644
--- a/resources/views/models/monologues/backend/form.blade.php
+++ b/resources/views/models/monologues/backend/form.blade.php
@@ -1,7 +1,6 @@
 @php
     use Helix\Fabrick\Icon;
     use Illuminate\Support\Str;
-    use Astrogoat\Monologues\Enums\CharacterSex;
     use Helix\Lego\Enums\AppAsset;
 @endphp
 
@@ -40,30 +39,13 @@
 
     <x-fab::layouts.main-with-aside>
         <x-fab::layouts.panel title="Character Details">
-            <div class="monologues-grid monologues-grid-cols-4 monologues-gap-3">
+            <div class="monologues-grid monologues-grid-cols-2 monologues-gap-3">
                 <x-fab::forms.input
                     name="model.character"
                     label="Name"
                     wire:model="model.character"
                 />
 
-                <x-fab::forms.select
-                    name="model.sex"
-                    label="Sex"
-                    wire:model="model.sex"
-                >
-                    <option>-- Select sex --</option>
-                    @foreach(CharacterSex::cases() as $sex)
-                        <option value="{{ $sex->value }}">{{ $sex->value }}</option>
-                    @endforeach
-                </x-fab::forms.select>
-
-                <x-fab::forms.input
-                    name="model.identity"
-                    label="Identity"
-                    wire:model="model.identity"
-                />
-
                 <x-fab::forms.input
                     name="model.age"
                     label="Age"
@@ -77,14 +59,12 @@
                 name="model.description"
                 label="Description"
                 wire:model="model.description"
-                rows="2"
             />
 
             <x-fab::forms.textarea
                 name="model.excerpt"
                 label="Excerpt"
                 wire:model="model.excerpt"
-                rows="1"
             />
 
             <x-fab::forms.textarea
@@ -95,24 +75,30 @@
             />
         </x-fab::layouts.panel>
 
-        <x-slot name="aside">
-            <x-fab::layouts.panel>
-                <div class="monologues-flex monologues-flex-col monologues-text-sm monologues-leading-6 monologues-text-gray-500">
-                    <div class="monologues-text-lg monologues-font-medium monologues-text-gray-900">
-                        <a href="{{ route('lego.monologues.plays.edit', $model->play) }}">
-                            {{ $model->play->title }}
-                        </a>
-                    </div>
-                    <div>by {{ $model->play->playwright }}</div>
-                    @if($model->play->published_year)
-                        <div>Published in {{ $model->play->published_year }}</div>
-                    @endif
-                    <div>{{ $model->play->type }}</div>
-                    <div class="monologues-underline monologues-mt-4">
-                        <a href="{{ route('lego.monologues.plays.edit', $model->play) }}">Edit Play</a>
-                    </div>
+        <x-fab::layouts.panel>
+            <div class="monologues-flex monologues-flex-col monologues-text-sm monologues-leading-6 monologues-text-gray-500">
+                <div class="monologues-text-lg monologues-font-medium monologues-text-gray-900">
+                    <a href="{{ route('lego.monologues.plays.edit', $model->play) }}">
+                        {{ $model->play->title }}
+                    </a>
+                </div>
+                <div>by {{ $model->play->playwright }}</div>
+                @if($model->play->published_year)
+                    <div>Published in {{ $model->play->published_year }}</div>
+                @endif
+                <div>{{ $model->play->type }}</div>
+                <div class="monologues-underline monologues-mt-4">
+                    <a href="{{ route('lego.monologues.plays.edit', $model->play) }}">Edit Play</a>
                 </div>
-            </x-fab::layouts.panel>
+            </div>
+        </x-fab::layouts.panel>
+
+        <x-slot name="aside">
+            @foreach($this->syncableRelationships() as $relationship)
+                <x-lego::syncable-relationship
+                    :relationship="$relationship"
+                />
+            @endforeach
         </x-slot>
     </x-fab::layouts.main-with-aside>
 </x-fab::layouts.page>
diff --git a/resources/views/models/monologues/backend/index.blade.php b/resources/views/models/monologues/backend/index.blade.php
index a773579..146781d 100644
--- a/resources/views/models/monologues/backend/index.blade.php
+++ b/resources/views/models/monologues/backend/index.blade.php
@@ -44,6 +44,12 @@
                     </x-fab::lists.table.column>
                 @endif
 
+                @if($this->shouldShowColumn('genre'))
+                    <x-fab::lists.table.column text-wrap>
+                        <a href="{{ route('lego.monologues.edit', $monologue) }}">{{ $monologue->genres()->pluck('name')->implode(',') }}</a>
+                    </x-fab::lists.table.column>
+                @endif
+
                 @if($this->shouldShowColumn('published_year'))
                     <x-fab::lists.table.column text-wrap>
                         <a href="{{ route('lego.monologues.edit', $monologue) }}">{{ $monologue->play->published_year }}</a>
diff --git a/resources/views/models/monologues/frontend/index.blade.php b/resources/views/models/monologues/frontend/index.blade.php
index 5b0cb8e..532bef5 100644
--- a/resources/views/models/monologues/frontend/index.blade.php
+++ b/resources/views/models/monologues/frontend/index.blade.php
@@ -2,20 +2,20 @@
 
 <x-fab::layouts.page
     title="Monologues"
-    x-data="{ showColumnFilters: false }"
+    x-data="{ showColumnFilters: true }"
 >
     @include('lego::models._includes.indexes.filters')
 
     <x-fab::lists.table>
         <x-slot name="headers">
             @include('lego::models._includes.indexes.headers')
-            <x-fab::lists.table.header :hidden="true">View</x-fab::lists.table.header>
+            <x-fab::lists.table.header>View</x-fab::lists.table.header>
         </x-slot>
 
         @include('lego::models._includes.indexes.header-filters')
         <x-fab::lists.table.header x-show="showColumnFilters" x-cloak class="bg-gray-100" />
 
-        @foreach($models->loadMissing('play') as $monologue)
+        @forelse($models->loadMissing('play') as $monologue)
             <x-fab::lists.table.row :odd="$loop->odd">
                 @if($this->shouldShowColumn('play_id'))
                     <x-fab::lists.table.column primary text-wrap>
@@ -35,21 +35,33 @@
                     </x-fab::lists.table.column>
                 @endif
 
-                @if($this->shouldShowColumn('sex'))
+                @if($this->shouldShowColumn('gender_identities'))
                     <x-fab::lists.table.column text-wrap>
-                        <a href="{{ route('monologue-database.monologues.show', $monologue) }}">{{ $monologue->sex }}</a>
+                        @foreach($monologue->genderIdentities as $gender)
+                            <x-fab::elements.badge class="mr-1">
+                                {{ $gender->name }}
+                            </x-fab::elements.badge>
+                        @endforeach
                     </x-fab::lists.table.column>
                 @endif
 
-                @if($this->shouldShowColumn('age'))
+                @if($this->shouldShowColumn('ages'))
                     <x-fab::lists.table.column text-wrap>
-                        <a href="{{ route('monologue-database.monologues.show', $monologue) }}">{{ $monologue->age }}</a>
+                        @foreach($monologue->ages as $age)
+                            <x-fab::elements.badge class="mr-1">
+                                {{ $age->name }}
+                            </x-fab::elements.badge>
+                        @endforeach
                     </x-fab::lists.table.column>
                 @endif
 
-                @if($this->shouldShowColumn('identity'))
+                @if($this->shouldShowColumn('identities'))
                     <x-fab::lists.table.column text-wrap>
-                        <a href="{{ route('monologue-database.monologues.show', $monologue) }}">{{ $monologue->identity }}</a>
+                        @foreach($monologue->identities as $identity)
+                            <x-fab::elements.badge class="mr-1">
+                                {{ $identity->name }}
+                            </x-fab::elements.badge>
+                        @endforeach
                     </x-fab::lists.table.column>
                 @endif
 
@@ -58,7 +70,13 @@
                 </x-fab::lists.table.column>
 
             </x-fab::lists.table.row>
-        @endforeach
+        @empty
+            <x-fab::lists.table.row :hover="false">
+                <x-fab::lists.table.column text-wrap colspan="9">
+                    <div class="monologues-h-96 monologues-text-xl monologues-tracking-wide monologues-font-light monologues-flex monologues-items-center monologues-justify-center">No results found</div>
+                </x-fab::lists.table.column>
+            </x-fab::lists.table.row>
+        @endforelse
     </x-fab::lists.table>
 
     @include('lego::models._includes.indexes.pagination')
diff --git a/resources/views/models/monologues/frontend/show.blade.php b/resources/views/models/monologues/frontend/show.blade.php
index 9223b58..b9cceff 100644
--- a/resources/views/models/monologues/frontend/show.blade.php
+++ b/resources/views/models/monologues/frontend/show.blade.php
@@ -1,14 +1,24 @@
 @php use Illuminate\Support\Str; @endphp
-<x-fab::layouts.page
-    :title="$monologue->play->title"
-    :description="$monologue->play->title . ' by ' . $monologue->play->playwright . ($monologue->play->published_year ? ' (' . $monologue->play->published_year . ')' : '')"
->
+<x-fab::layouts.page>
+    <x-slot:title>
+        <a href="{{ route('monologue-database.plays.show', $monologue->play) }}">
+            {{ $monologue->play->title }}
+        </a>
+    </x-slot:title>
+    <x-slot name="description">
+        by {{ $monologue->play->playwright }} {{ $monologue->play->published_year ? ' (' . $monologue->play->published_year . ')' : '' }}
+        @foreach($monologue->genres as $genre)
+            <x-fab::elements.badge>
+                {{ $genre->name }}
+            </x-fab::elements.badge>
+        @endforeach
+    </x-slot>
     <x-slot name="actions">
 {{--        <x-fab::elements.button class="monologues-mr-4" wire:click="bookmark">--}}
 {{--            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="monologues-w-6 monologues-h-6"><path d="M6 7.8c0-1.9.03-2.36.21-2.71 .19-.38.49-.69.87-.88 .35-.19.8-.22 2.7-.22h4.4c1.89 0 2.35.03 2.7.21 .37.19.68.49.87.87 .18.35.21.8.21 2.7v13.2l1.49-.87 -7-4c-.31-.18-.69-.18-1 0l-7 4 1.49.86V7.76Zm-2 0V21c0 .76.82 1.24 1.49.86l7-4h-1l7 4c.66.38 1.49-.11 1.49-.87V7.79c0-2.31-.05-2.85-.44-3.62 -.39-.76-1-1.37-1.75-1.75 -.77-.4-1.32-.44-3.62-.44h-4.4c-2.31 0-2.85.04-3.62.43 -.76.38-1.37.99-1.75 1.74 -.4.76-.44 1.31-.44 3.61Z"/></svg>--}}
 {{--        </x-fab::elements.button>--}}
 
-        <x-fab::elements.button-group>
+        <x-fab::elements.button-group size="xs">
             <x-fab::elements.button-group.button
                 position="left"
                 wire:click="previous"
@@ -37,43 +47,128 @@ class="{{ $this->hasNext() ? '' : 'monologues-bg-gray-100 hover:monologues-bg-gr
 {{--            <x-fab::elements.button primary class="monologues-self-end">Book session with PK</x-fab::elements.button>--}}
 {{--        </div>--}}
     </x-slot>
-    <x-fab::layouts.panel>
-        <x-fab::data-displays.description-lists.left-aligned
-            :title="$monologue->description"
-        >
-            <x-fab::data-displays.description-lists.left-aligned.row label="Character">
-                {{ $monologue->character }}
-            </x-fab::data-displays.description-lists.left-aligned.row>
+    <div class="monologues-grid monologues-grid-cols-1 sm:monologues-grid-cols-3 monologues-gap-4">
+        <div class="monologues-flex monologues-flex-col monologues-col-span-2 monologues-gap-4">
+            @if($monologue->description)
+                <x-fab::layouts.panel title="Monologue Description" class="monologues-text-gray-700">
+                    {!! nl2br($monologue->description) !!}
+                </x-fab::layouts.panel>
+            @endif
+
+            @if($monologue->play->description)
+                <x-fab::layouts.panel title="Play Description" class="monologues-text-gray-700">
+                    {!! nl2br($monologue->play->description) !!}
+                </x-fab::layouts.panel>
+            @endif
+
+            <div class="monologues-col-span-2">
+                <x-fab::lists.two-column title="Excerpt">
+                    <x-fab::lists.two-column.column title="First Line">
+                        <x-slot:description class="monologues-whitespace-normal">
+                            <div class="fab-text-gray-700">
+                                {!! nl2br($monologue->excerptsFirstLine) !!}
+                            </div>
+                        </x-slot:description>
+                    </x-fab::lists.two-column.column>
+                    <x-fab::lists.two-column.column title="Last Line">
+                        <x-slot:description class="monologues-whitespace-normal">
+                            <div class="fab-text-gray-700">
+                                {!! nl2br($monologue->excerptsLastLine) !!}
+                            </div>
+                        </x-slot:description>
+                    </x-fab::lists.two-column.column>
+                </x-fab::lists.two-column>
+            </div>
+
+            @hasanyrole(['admin', 'editor', 'manager'])
+                <x-fab::layouts.panel title="Full Monologue" class="monologues-text-gray-700">
+                    {!! nl2br($monologue->text) !!}
+                </x-fab::layouts.panel>
+            @endhasanyrole
+        </div>
 
-            <x-fab::data-displays.description-lists.left-aligned.row label="Sex">
-                {{ $monologue->sex }}
-            </x-fab::data-displays.description-lists.left-aligned.row>
+        <div class="monologues-space-y-4">
+            <x-fab::lists.two-column title="Character">
+                <x-fab::lists.two-column.column title="Name" :description="$monologue->character" />
 
-            <x-fab::data-displays.description-lists.left-aligned.row label="Identity">
-                {{ $monologue->identity }}
-            </x-fab::data-displays.description-lists.left-aligned.row>
+                <x-fab::lists.two-column.column title="Gender Identity">
+                    <x-slot:description>
+                        @foreach($monologue->genderIdentities as $genderIdentity)
+                            <a href="{{ route('monologue-database.monologues.index', ["filter[gender_identities]={$genderIdentity->name}"]) }}">
+                                <x-fab::elements.badge>
+                                    {{ $genderIdentity->name }}
+                                </x-fab::elements.badge>
+                            </a>
+                        @endforeach
+                    </x-slot:description>
+                </x-fab::lists.two-column.column>
 
-            <x-fab::data-displays.description-lists.left-aligned.row label="Age">
-                {{ $monologue->age }}
-            </x-fab::data-displays.description-lists.left-aligned.row>
+                <x-fab::lists.two-column.column title="Identity">
+                    <x-slot:description>
+                        @foreach($monologue->identities as $identity)
+                            <a href="{{ route('monologue-database.monologues.index', ["filter[identities]={$identity->name}"]) }}">
+                                <x-fab::elements.badge>
+                                    {{ $identity->name }}
+                                </x-fab::elements.badge>
+                            </a>
+                        @endforeach
+                    </x-slot:description>
+                </x-fab::lists.two-column.column>
 
-            <x-fab::data-displays.description-lists.left-aligned.row label="Type">
-                {{ $monologue->type }}
-            </x-fab::data-displays.description-lists.left-aligned.row>
+                <x-fab::lists.two-column.column title="Age">
+                    <x-slot:description>
+                        @foreach($monologue->ages as $age)
+                            <a href="{{ route('monologue-database.monologues.index', ["filter[ages]={$age->name}"]) }}">
+                                <x-fab::elements.badge>
+                                    {{ $age->name }}
+                                </x-fab::elements.badge>
+                            </a>
+                        @endforeach
+                    </x-slot:description>
+                </x-fab::lists.two-column.column>
+            </x-fab::lists.two-column>
 
-            <x-fab::data-displays.description-lists.left-aligned.row label="Excerpt">
-                "{{ Str::finish($monologue->excerpt, '...') }}"
-            </x-fab::data-displays.description-lists.left-aligned.row>
+            <x-fab::lists.two-column title="Where to Find the Play">
+                @foreach($monologue->play->playSources as $source)
+                    <x-fab::lists.two-column.column
+                        :url="$source->pivot->url"
+                        target="_blank"
+                    >
+                        <x-slot:title>
+                            {{ $source->name }}
+                        </x-slot:title>
 
-            <x-fab::data-displays.description-lists.left-aligned.row label="Where to find">
-                {{ $monologue->play->where_to_find }}
-            </x-fab::data-displays.description-lists.left-aligned.row>
+                        @if($source->pivot->url)
+                            <x-slot:secondary>
+                                <div class="monologues-justify-end monologues-uppercase monologues-tracking-wide monologues-flex">
+                                    <div class="monologues-underline monologues-text-xs">Link</div>
+                                </div>
+                            </x-slot:secondary>
+                            <x-slot:icon>
+                                <x-fab::elements.icon :icon="Helix\Fabrick\Icon::EXTERNAL_LINK" class="monologues-w-4" />
+                            </x-slot:icon>
+                        @endif
+                    </x-fab::lists.two-column.column>
+                @endforeach
+            </x-fab::lists.two-column>
 
-            <x-fab::data-displays.description-lists.left-aligned.row label="Added">
-                {{ $monologue->created_at->diffForHumans() }} <span class="monologues-text-gray-500 monologues-text-xs">({{ $monologue->created_at->toFormattedDateString() }})</span>
-            </x-fab::data-displays.description-lists.left-aligned.row>
-        </x-fab::data-displays.description-lists.left-aligned>
-    </x-fab::layouts.panel>
+            <x-fab::layouts.panel title="Monologue Length">
+                <x-slot:actions>
+                    <x-fab::elements.badge :color="$monologue->length()->color()">
+                        {{ $monologue->length()->value }}
+                    </x-fab::elements.badge>
+                </x-slot:actions>
+                <div class="overflow-hidden rounded-full bg-gray-200">
+                    <div class="h-2 rounded-full bg-indigo-600" style="width: {{ $monologue->length()->progressBarWidth() }}%"></div>
+                </div>
+                <div class="monologues-text-gray-700 monologues-text-sm monologues-flex monologues-justify-between">
+{{--                    <span>{{ $monologue->length()->value }} length.</span>--}}
+                    <span>{{ $monologue->wordCount }} words</span>
+                    <span>{{ $monologue->characterCount }} characters</span>
+                </div>
+            </x-fab::layouts.panel>
+        </div>
+    </div>
 
     <x-monologues::ctas.book-session />
 </x-fab::layouts.page>
diff --git a/resources/views/models/plays/backend/form.blade.php b/resources/views/models/plays/backend/form.blade.php
index 4499b77..5fe8f61 100644
--- a/resources/views/models/plays/backend/form.blade.php
+++ b/resources/views/models/plays/backend/form.blade.php
@@ -1,7 +1,8 @@
 @php
     use Helix\Fabrick\Icon;
     use Illuminate\Support\Str;
-    use Astrogoat\Monologues\Enums\TheatricalType;
+    use Astrogoat\Monologues\Models\Genre;
+    use Astrogoat\Monologues\Models\PlaySource;use Astrogoat\Monologues\Enums\TheatricalType;
     use Helix\Lego\Enums\AppAsset;
 @endphp
 
@@ -31,13 +32,13 @@ class="{{ $this->modelSupportsSoftDeletes() && $model->trashed() ? 'sh-line-thro
     </x-slot>
     @if($this->modelSupportsSoftDeletes() && $model->trashed())
         <x-slot name="description">
-            This product has be archived
+            This play has be archived
         </x-slot>
     @endif
 
     <x-fab::layouts.main-with-aside>
         <x-fab::layouts.panel title="Play Details">
-            <div class="monologues-grid monologues-grid-cols-2 monologues-gap-3">
+            <div class="monologues-grid monologues-grid-cols-3 monologues-gap-3">
                 <x-fab::forms.input
                     name="model.title"
                     label="Title"
@@ -49,9 +50,7 @@ class="{{ $this->modelSupportsSoftDeletes() && $model->trashed() ? 'sh-line-thro
                     label="Playwright"
                     wire:model="model.playwright"
                 />
-            </div>
 
-            <div class="monologues-grid monologues-grid-cols-3 monologues-gap-3">
                 <x-fab::forms.select
                     name="model.published_year"
                     label="Published Year"
@@ -61,23 +60,25 @@ class="{{ $this->modelSupportsSoftDeletes() && $model->trashed() ? 'sh-line-thro
                         <option value="{{ $year }}">{{ $year }}</option>
                     @endforeach
                 </x-fab::forms.select>
+            </div>
+        </x-fab::layouts.panel>
 
-                <x-fab::forms.select
-                    name="model.type"
-                    label="Type"
-                    wire:model="model.type"
-                >
-                    <option>-- Select type -- </option>
-                    @foreach(TheatricalType::cases() as $type)
-                        <option value="{{ $type->value }}">{{ $type->value }}</option>
-                    @endforeach
-                </x-fab::forms.select>
-
-                <x-fab::forms.input
-                    name="model.where_to_find"
-                    label="Where to find"
-                    wire:model="model.where_to_find"
-                />
+        <x-fab::layouts.panel
+            title="Where to find"
+        >
+            <div class="monologues-space-y-4">
+                @foreach($this->syncableRelationships['playSources'] as $sourceId)
+                    @php($source = PlaySource::find($sourceId))
+                    <div class="monologues-flex monologues-items-center monologues-w-full monologues-gap-3">
+                        <div class="monologues-text-sm monologues-font-semibold">{{ $source->name }}</div>
+                        <x-fab::forms.input
+                            placeholder="https://"
+                            class="monologues-flex-1"
+                            size="sm"
+                            wire:model="playSources.{{ $source->id }}"
+                        />
+                    </div>
+                @endforeach
             </div>
         </x-fab::layouts.panel>
 
@@ -87,7 +88,8 @@ class="{{ $this->modelSupportsSoftDeletes() && $model->trashed() ? 'sh-line-thro
             @if($model->exists)
                 <x-slot name="actions">
                     <x-fab::elements.button size="xs">
-                        <a href="{{ route('lego.monologues.index', ['filter[play_id]' => $model->title]) }}">View All</a>
+                        <a href="{{ route('lego.monologues.index', ['filter[play_id]' => $model->title]) }}">View
+                            All</a>
                     </x-fab::elements.button>
 
                     <x-fab::elements.button size="xs">
@@ -120,6 +122,12 @@ class="{{ $this->modelSupportsSoftDeletes() && $model->trashed() ? 'sh-line-thro
         {{ $this->model->monologues()->paginate(15)->links() }}
 
         <x-slot name="aside">
+            @foreach($this->syncableRelationships() as $relationship)
+                <x-lego::syncable-relationship
+                    :relationship="$relationship"
+                />
+            @endforeach
+
             <x-fab::layouts.panel title="URL Structure">
                 <x-fab::forms.input
                     name="model.slug"
diff --git a/resources/views/models/plays/frontend/index.blade.php b/resources/views/models/plays/frontend/index.blade.php
index 18bef5b..d0d1d29 100644
--- a/resources/views/models/plays/frontend/index.blade.php
+++ b/resources/views/models/plays/frontend/index.blade.php
@@ -1,11 +1,7 @@
 @php use Astrogoat\Monologues\Models\Play; @endphp
 <x-fab::layouts.page
     title="Plays"
-{{--    :breadcrumbs="[--}}
-{{--        ['title' => 'Home', 'url' => route('lego.dashboard')],--}}
-{{--        ['title' => 'Plays','url' => route('lego.monologues.plays.index')],--}}
-{{--    ]"--}}
-    x-data="{ showColumnFilters: false }"
+    x-data="{ showColumnFilters: true }"
 >
     @include('lego::models._includes.indexes.filters')
 
@@ -44,9 +40,13 @@
                     </x-fab::lists.table.column>
                 @endif
 
-                @if($this->shouldShowColumn('type'))
+                @if($this->shouldShowColumn('genre'))
                     <x-fab::lists.table.column text-wrap>
-                        <a href="{{ route('monologue-database.plays.show', $play) }}">{{ $play->type }}</a>
+                        @foreach($this->getGenres($play) as $genre)
+                            <x-fab::elements.badge>
+                                {{ $genre }}
+                            </x-fab::elements.badge>
+                        @endforeach
                     </x-fab::lists.table.column>
                 @endif
 
diff --git a/resources/views/models/plays/frontend/show.blade.php b/resources/views/models/plays/frontend/show.blade.php
index 08fbd9e..a1b4b41 100644
--- a/resources/views/models/plays/frontend/show.blade.php
+++ b/resources/views/models/plays/frontend/show.blade.php
@@ -1,13 +1,22 @@
-<div>
-    {{ $play->title }}
+<x-fab::layouts.page :title="$play->title">
+    <x-slot name="description">
+        by {{ $play->playwright }} {{ $play->published_year ? ' (' . $play->published_year . ')' : '' }}
+        @foreach($this->getGenres() as $genre)
+            <x-fab::elements.badge>
+                {{ $genre }}
+            </x-fab::elements.badge>
+        @endforeach
+    </x-slot>
 
     <x-fab::lists.table
         title="Monologues"
     >
         <x-slot name="headers">
             <x-fab::lists.table.header>Character</x-fab::lists.table.header>
-            <x-fab::lists.table.header>Excerpt</x-fab::lists.table.header>
-            <x-fab::lists.table.header :hidden="true"></x-fab::lists.table.header>
+            <x-fab::lists.table.header>First line</x-fab::lists.table.header>
+            <x-fab::lists.table.header>Gender</x-fab::lists.table.header>
+            <x-fab::lists.table.header>Age</x-fab::lists.table.header>
+            <x-fab::lists.table.header>Identity</x-fab::lists.table.header>
         </x-slot>
         @foreach($play->monologues()->paginate(15) as $monologue)
             <x-fab::lists.table.row :odd="$loop->odd">
@@ -15,7 +24,28 @@
                     <a href="{{ route('monologue-database.monologues.show', $monologue) }}">{{ $monologue->character }}</a>
                 </x-fab::lists.table.column>
                 <x-fab::lists.table.column>
-                    <a href="{{ route('monologue-database.monologues.show', $monologue) }}">{{ Str::limit($monologue->excerpt, 60) }}</a>
+                    <a href="{{ route('monologue-database.monologues.show', $monologue) }}">{{ Str::limit($monologue->excerptsFirstLine, 40) }}</a>
+                </x-fab::lists.table.column>
+                <x-fab::lists.table.column text-wrap>
+                    @foreach($monologue->genderIdentities as $gender)
+                        <x-fab::elements.badge class="mr-1">
+                            {{ $gender->name }}
+                        </x-fab::elements.badge>
+                    @endforeach
+                </x-fab::lists.table.column>
+                <x-fab::lists.table.column>
+                    @foreach($monologue->ages as $age)
+                        <x-fab::elements.badge class="mr-1">
+                            {{ $age->name }}
+                        </x-fab::elements.badge>
+                    @endforeach
+                </x-fab::lists.table.column>
+                <x-fab::lists.table.column text-wrap>
+                    @foreach($monologue->identities as $identity)
+                        <x-fab::elements.badge class="mr-1">
+                            {{ $identity->name }}
+                        </x-fab::elements.badge>
+                    @endforeach
                 </x-fab::lists.table.column>
                 <x-fab::lists.table.column align="right">
                     <x-fab::elements.button size="xs">
@@ -27,4 +57,4 @@
     </x-fab::lists.table>
 
     {{ $play->monologues()->paginate(15)->links() }}
-</div>
+</x-fab::layouts.page>
diff --git a/src/Enums/CharacterSex.php b/src/Enums/CharacterSex.php
index 3628fc7..01b8549 100644
--- a/src/Enums/CharacterSex.php
+++ b/src/Enums/CharacterSex.php
@@ -2,8 +2,17 @@
 
 namespace Astrogoat\Monologues\Enums;
 
+/** @deprecated  */
 enum CharacterSex: string
 {
     case M = 'M';
     case F = 'F';
+
+    public function fullName()
+    {
+        return match ($this) {
+            self::M => 'Male',
+            self::F => 'Female',
+        };
+    }
 }
diff --git a/src/Enums/MonologueLength.php b/src/Enums/MonologueLength.php
new file mode 100644
index 0000000..d13e29c
--- /dev/null
+++ b/src/Enums/MonologueLength.php
@@ -0,0 +1,45 @@
+<?php
+
+namespace Astrogoat\Monologues\Enums;
+
+use Astrogoat\Monologues\Models\Monologue;
+
+enum MonologueLength: string
+{
+    case SHORT = 'Short';
+    case MEDIUM = 'Medium';
+    case LONG = 'Long';
+
+    public static function fromMonologue(Monologue $monologue): MonologueLength
+    {
+        $wordCount = $monologue->wordCount;
+
+        if ($wordCount <= 200) {
+            return MonologueLength::SHORT;
+        } elseif ($wordCount <= 400) {
+            return MonologueLength::MEDIUM;
+        } else {
+            return MonologueLength::LONG;
+        }
+    }
+
+    public function progressBarWidth(): int
+    {
+        return match ($this) {
+            self::SHORT => 33,
+            self::MEDIUM => 66,
+            self::LONG => 100,
+
+        };
+    }
+
+    public function color(): string
+    {
+        return match ($this) {
+            self::SHORT => 'blue',
+            self::MEDIUM => 'indigo',
+            self::LONG => 'purple',
+
+        };
+    }
+}
diff --git a/src/Http/Livewire/Monologues/Backend/Form.php b/src/Http/Livewire/Monologues/Backend/Form.php
index 3affec4..9a746e4 100644
--- a/src/Http/Livewire/Monologues/Backend/Form.php
+++ b/src/Http/Livewire/Monologues/Backend/Form.php
@@ -2,15 +2,23 @@
 
 namespace Astrogoat\Monologues\Http\Livewire\Monologues\Backend;
 
-use Astrogoat\Monologues\Enums\CharacterSex;
-use Astrogoat\Monologues\Models\Monologue;
-use Astrogoat\Monologues\Models\Play;
-use Helix\Lego\Http\Livewire\Models\Form as BaseForm;
 use Illuminate\Support\Str;
 use Illuminate\Validation\Rule;
+use Astrogoat\Monologues\Models\Play;
+use Astrogoat\Monologues\Models\Genre;
+use Astrogoat\Monologues\Models\Monologue;
+use Astrogoat\Monologues\Enums\CharacterSex;
+use Helix\Lego\Services\SyncableRelationship;
+use Astrogoat\Monologues\Models\Age;
+use Astrogoat\Monologues\Models\Identity;
+use Helix\Lego\Http\Livewire\Models\Form as BaseForm;
+use Helix\Lego\Http\Livewire\Traits\SyncsRelationships;
+use Astrogoat\Monologues\Models\GenderIdentity;
 
 class Form extends BaseForm
 {
+    use SyncsRelationships;
+
     public Play $play;
 
     protected bool $canBeDeleted = true;
@@ -61,10 +69,10 @@ public function model(): string
     public function displayTitle(int $limit = 50): string
     {
         $title = match (true) {
-            filled($this->model->excerpt) => $this->model->excerpt,
+            filled($this->model->excerpt) => Str::of($this->model->excerpt)->remove('[First line]')->prepend($this->model->character . ': '),
             filled($this->model->description) => $this->model->description,
             filled($this->model->text) => $this->model->text,
-            default => '[ ... ]',
+            default => '[Untitled]',
         };
 
         return Str::limit($title, $limit);
@@ -75,6 +83,28 @@ public function redirectAfterDeletionRoute(): string
         return route('lego.monologues.plays.edit', $this->play);
     }
 
+    public function syncableRelationships(): array
+    {
+        return [
+            SyncableRelationship::relationship(Genre::class)
+                ->name('genres')
+                ->inverseRelationshipName('monologues')
+                ->labelProperty('name'),
+            SyncableRelationship::relationship(GenderIdentity::class)
+                ->name('genderIdentities')
+                ->labelProperty('name')
+                ->inverseRelationshipName('monologues'),
+            SyncableRelationship::relationship(Age::class)
+                ->name('ages')
+                ->labelProperty('name')
+                ->inverseRelationshipName('monologues'),
+            SyncableRelationship::relationship(Identity::class)
+                ->name('identities')
+                ->labelProperty('name')
+                ->inverseRelationshipName('monologues'),
+        ];
+    }
+
     public function view(): string
     {
         return 'monologues::models.monologues.backend.form';
diff --git a/src/Http/Livewire/Monologues/Backend/Index.php b/src/Http/Livewire/Monologues/Backend/Index.php
index 1af132a..13b3589 100644
--- a/src/Http/Livewire/Monologues/Backend/Index.php
+++ b/src/Http/Livewire/Monologues/Backend/Index.php
@@ -2,12 +2,17 @@
 
 namespace Astrogoat\Monologues\Http\Livewire\Monologues\Backend;
 
+use Astrogoat\Monologues\Models\Genre;
 use Astrogoat\Monologues\Models\Monologue;
 use Helix\Lego\Http\Livewire\Models\Index as BaseIndex;
 use Illuminate\Database\Eloquent\Builder;
 
 class Index extends BaseIndex
 {
+    public array $casts = [
+        'genre' => 'array',
+    ];
+
     public function model(): string
     {
         return Monologue::class;
@@ -20,6 +25,7 @@ public function columns(): array
             'character' => 'Character',
             'excerpt' => 'Excerpt',
             'playwright' => 'Playwright',
+            'genre' => 'Genre',
             'published_year' => 'Year',
             'deleted_at' => 'Archived',
         ];
@@ -30,13 +36,29 @@ public function mainSearchColumn(): string|false
         return 'play_id';
     }
 
-    public function scopePlayId(Builder $query, $value)
+    public function genreFilterOptions(): array
     {
-        return $query->whereHas('play', function (Builder $builder) use ($value) {
+        return Genre::all()->pluck('name', 'name')->toArray();
+    }
+
+    public function scopePlayId(Builder $query, $value): void
+    {
+        $query->whereHas('play', function (Builder $builder) use ($value) {
             $builder->where('title', 'like', "{$value}%");
         });
     }
 
+    public function scopeGenre(Builder $query, $values): void
+    {
+        if (in_array('All', $values)) {
+            return;
+        }
+
+        $query->whereHas('genres', function (Builder $builder) use ($values) {
+            $builder->whereIn('name', $values);
+        });
+    }
+
     public function render()
     {
         return view('monologues::models.monologues.backend.index', [
diff --git a/src/Http/Livewire/Monologues/Frontend/Index.php b/src/Http/Livewire/Monologues/Frontend/Index.php
index ad60cf6..ee9135f 100644
--- a/src/Http/Livewire/Monologues/Frontend/Index.php
+++ b/src/Http/Livewire/Monologues/Frontend/Index.php
@@ -2,8 +2,12 @@
 
 namespace Astrogoat\Monologues\Http\Livewire\Monologues\Frontend;
 
+use Illuminate\Support\Arr;
+use Astrogoat\Monologues\Models\Age;
+use Astrogoat\Monologues\Models\Identity;
 use Astrogoat\Monologues\Enums\CharacterSex;
 use Astrogoat\Monologues\Models\Monologue;
+use Astrogoat\Monologues\Models\GenderIdentity;
 use Helix\Lego\Http\Livewire\Models\Index as BaseIndex;
 use Illuminate\Database\Eloquent\Builder;
 use Illuminate\Support\Collection;
@@ -12,15 +16,13 @@ class Index extends BaseIndex
 {
     public array $casts = [
         'sex' => 'array',
-        'age' => 'array',
-        'identity' => 'array',
+        'ages' => 'array',
+        'gender_identities' => 'array',
+        'identities' => 'array',
     ];
 
     public array $sortableColumns = [
         'character' => 'Character',
-        'sex' => 'Sex',
-        'age' => 'Age',
-        'identity' => 'Identity',
     ];
 
     protected Collection $monologues;
@@ -41,9 +43,9 @@ public function columns(): array
             'play_id' => 'Play',
             'playwright' => 'Playwright',
             'character' => 'Character',
-            'sex' => 'Sex',
-            'age' => 'Age',
-            'identity' => 'Identity',
+            'gender_identities' => 'Gender',
+            'ages' => 'Age',
+            'identities' => 'Identity',
         ];
     }
 
@@ -66,29 +68,40 @@ public function scopePlaywright(Builder $query, $value)
         });
     }
 
-    public function sexFilterOptions(): array
+    public function genderIdentitiesFilterOptions(): array
     {
-        return collect(CharacterSex::cases())
-            ->mapWithKeys(fn (CharacterSex $sex) => [$sex->value => $sex->value])
-            ->toArray();
+        return GenderIdentity::query()->orderBy('name')->pluck('name', 'name')->toArray();
     }
 
-    public function ageFilterOptions(): array
+    public function scopeGenderIdentities(Builder $query, $value): Builder
     {
-        return $this->monologues->pluck('age')
-            ->unique()
-            ->filter()
-            ->mapWithKeys(fn ($age) => [$age => $age])
-            ->toArray();
+        return $query->whereHas('genderIdentities', function (Builder $builder) use ($value) {
+            $builder->whereIn('name', explode(',', $value));
+        });
+    }
+
+    public function identitiesFilterOptions(): array
+    {
+        return Identity::query()->orderBy('name')->pluck('name', 'name')->toArray();
+    }
+
+    public function scopeIdentities(Builder $query, $value): Builder
+    {
+        return $query->whereHas('identities', function (Builder $builder) use ($value) {
+            $builder->whereIn('name', explode(',', $value));
+        });
+    }
+
+    public function agesFilterOptions(): array
+    {
+        return Age::query()->orderBy('name')->pluck('name', 'name')->toArray();
     }
 
-    public function identityFilterOptions(): array
+    public function scopeAges(Builder $query, $value): Builder
     {
-        return $this->monologues->pluck('identity')
-            ->unique()
-            ->filter()
-            ->mapWithKeys(fn ($identity) => [$identity => $identity])
-            ->toArray();
+        return $query->whereHas('ages', function (Builder $builder) use ($value) {
+            $builder->whereIn('name', explode(',', $value));
+        });
     }
 
     public function render()
diff --git a/src/Http/Livewire/Monologues/Frontend/Show.php b/src/Http/Livewire/Monologues/Frontend/Show.php
index f70268e..18a3de8 100644
--- a/src/Http/Livewire/Monologues/Frontend/Show.php
+++ b/src/Http/Livewire/Monologues/Frontend/Show.php
@@ -46,7 +46,7 @@ public function previous()
             return;
         }
 
-        return $this->redirect(route('monologues.show', $previous));
+        return $this->redirect(route('monologue-database.monologues.show', $previous));
     }
 
     public function next()
@@ -57,16 +57,12 @@ public function next()
             return;
         }
 
-        return $this->redirect(route('monologues.show', $next));
+        return $this->redirect(route('monologue-database.monologues.show', $next));
     }
 
-    //    public function bookmark()
-    //    {
-    //
-    //    }
-
     public function render()
     {
-        return view('monologues::models.monologues.frontend.show')->extends('monologues::layouts.monologues');
+        return view('monologues::models.monologues.frontend.show')
+            ->extends('monologues::layouts.monologues');
     }
 }
diff --git a/src/Http/Livewire/Plays/Backend/Form.php b/src/Http/Livewire/Plays/Backend/Form.php
index 0d7b2be..20e7159 100644
--- a/src/Http/Livewire/Plays/Backend/Form.php
+++ b/src/Http/Livewire/Plays/Backend/Form.php
@@ -3,14 +3,48 @@
 namespace Astrogoat\Monologues\Http\Livewire\Plays\Backend;
 
 use Astrogoat\Monologues\Models\Play;
+use Astrogoat\Monologues\Models\Genre;
+use Astrogoat\Monologues\Models\PlaySource;
+use Helix\Lego\Services\SyncableRelationship;
 use Helix\Lego\Http\Livewire\Models\Form as BaseForm;
 use Helix\Lego\Rules\SlugRule;
+use Helix\Lego\Http\Livewire\Traits\SyncsRelationships;
+use Helix\Lego\Http\Livewire\Traits\RequireConfirmation;
+use Astrogoat\Monologues\Models\GenderIdentity;
 
 class Form extends BaseForm
 {
+    use RequireConfirmation;
+    use SyncsRelationships;
+
+    public array $playSources = [];
+
     public function mount($play = null)
     {
         $this->setModel($play);
+
+        foreach ($this->model->playSources as $playSource) {
+            $this->playSources[$playSource->id] = $playSource->pivot->url;
+        }
+    }
+
+    public function saving()
+    {
+        $data = collect($this->playSources)->mapWithKeys(function ($url, $sourceId) {
+            return [$sourceId => ['url' => $url]];
+        })->toArray();
+
+        $this->model->playSources()->sync($data);
+    }
+
+    public function syncableRelationships(): array
+    {
+        return [
+            SyncableRelationship::relationship(PlaySource::class)
+                ->name('playSources')
+                ->inverseRelationshipName('plays')
+                ->labelProperty('name'),
+        ];
     }
 
     public function rules(): array
diff --git a/src/Http/Livewire/Plays/Frontend/Index.php b/src/Http/Livewire/Plays/Frontend/Index.php
index d36e348..d18e34f 100644
--- a/src/Http/Livewire/Plays/Frontend/Index.php
+++ b/src/Http/Livewire/Plays/Frontend/Index.php
@@ -2,14 +2,17 @@
 
 namespace Astrogoat\Monologues\Http\Livewire\Plays\Frontend;
 
-use Astrogoat\Monologues\Enums\TheatricalType;
+use Astrogoat\Monologues\Models\Genre;
+use Illuminate\Database\Eloquent\Builder;
+use Astrogoat\Monologues\Models\Monologue;
 use Astrogoat\Monologues\Models\Play;
 use Helix\Lego\Http\Livewire\Models\Index as BaseIndex;
 
 class Index extends BaseIndex
 {
     public array $casts = [
-        'type' => 'array',
+        'genre' => 'array',
+        'monologues_count' => 'int',
     ];
 
     public function model(): string
@@ -24,7 +27,7 @@ public function columns(): array
             'playwright' => 'Playwright',
             'published_year' => 'Year',
             'monologues_count' => 'Monologues',
-            'type' => 'Type',
+            'genre' => 'Genre',
         ];
     }
 
@@ -33,11 +36,23 @@ public function mainSearchColumn(): string|false
         return 'title';
     }
 
-    public function typeFilterOptions(): array
+    public function genreFilterOptions(): array
     {
-        return collect(TheatricalType::cases())
-            ->mapWithKeys(fn (TheatricalType $case) => [$case->value => $case->value])
-            ->toArray();
+        return Genre::query()->orderBy('name')->pluck('name', 'name')->toArray();
+    }
+
+    public function scopeGenre(Builder $query, $value)
+    {
+        return $query->whereHas('monologues.genres', function (Builder $builder) use ($value) {
+            $builder->whereIn('name', explode(',', $value));
+        });
+    }
+
+    public function getGenres(Play $play): array
+    {
+        return $play->monologues->map(function (Monologue $monologue) {
+            return $monologue->genres->pluck('name');
+        })->flatten()->unique()->toArray();
     }
 
     public function render()
diff --git a/src/Http/Livewire/Plays/Frontend/Show.php b/src/Http/Livewire/Plays/Frontend/Show.php
index 7361c23..98831f2 100644
--- a/src/Http/Livewire/Plays/Frontend/Show.php
+++ b/src/Http/Livewire/Plays/Frontend/Show.php
@@ -4,11 +4,19 @@
 
 use Astrogoat\Monologues\Models\Play;
 use Livewire\Component;
+use Astrogoat\Monologues\Models\Monologue;
 
 class Show extends Component
 {
     public Play $play;
 
+    public function getGenres(): array
+    {
+        return $this->play->monologues->map(function (Monologue $monologue) {
+            return $monologue->genres->pluck('name');
+        })->flatten()->unique()->toArray();
+    }
+
     public function render()
     {
         return view('monologues::models.plays.frontend.show')
diff --git a/src/Models/Age.php b/src/Models/Age.php
new file mode 100644
index 0000000..89b19dc
--- /dev/null
+++ b/src/Models/Age.php
@@ -0,0 +1,16 @@
+<?php
+
+namespace Astrogoat\Monologues\Models;
+
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsToMany;
+
+class Age extends Model
+{
+    protected $guarded = [];
+
+    public function monologues(): BelongsToMany
+    {
+        return $this->belongsToMany(Monologue::class);
+    }
+}
diff --git a/src/Models/GenderIdentity.php b/src/Models/GenderIdentity.php
new file mode 100644
index 0000000..8ba5970
--- /dev/null
+++ b/src/Models/GenderIdentity.php
@@ -0,0 +1,16 @@
+<?php
+
+namespace Astrogoat\Monologues\Models;
+
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsToMany;
+
+class GenderIdentity extends Model
+{
+    protected $guarded = [];
+
+    public function monologues(): BelongsToMany
+    {
+        return $this->belongsToMany(Monologue::class);
+    }
+}
diff --git a/src/Models/Genre.php b/src/Models/Genre.php
new file mode 100644
index 0000000..1c4add7
--- /dev/null
+++ b/src/Models/Genre.php
@@ -0,0 +1,16 @@
+<?php
+
+namespace Astrogoat\Monologues\Models;
+
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsToMany;
+
+class Genre extends Model
+{
+    protected $guarded = [];
+
+    public function monologues(): BelongsToMany
+    {
+        return $this->belongsToMany(Monologue::class);
+    }
+}
diff --git a/src/Models/Identity.php b/src/Models/Identity.php
new file mode 100644
index 0000000..aa8ddca
--- /dev/null
+++ b/src/Models/Identity.php
@@ -0,0 +1,16 @@
+<?php
+
+namespace Astrogoat\Monologues\Models;
+
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsToMany;
+
+class Identity extends Model
+{
+    protected $guarded = [];
+
+    public function monologues(): BelongsToMany
+    {
+        return $this->belongsToMany(Monologue::class);
+    }
+}
diff --git a/src/Models/Monologue.php b/src/Models/Monologue.php
index 495a43a..41bfb46 100644
--- a/src/Models/Monologue.php
+++ b/src/Models/Monologue.php
@@ -2,14 +2,17 @@
 
 namespace Astrogoat\Monologues\Models;
 
-use Astrogoat\Monologues\Enums\CharacterSex;
-use Astrogoat\Monologues\Scopes\AccessScope;
 use Helix\Fabrick\Icon;
-use Helix\Lego\Models\Model;
 use Helix\Lego\Models\User;
-use Illuminate\Database\Eloquent\Attributes\ScopedBy;
+use Illuminate\Support\Str;
+use Helix\Lego\Models\Model;
 use Illuminate\Database\Eloquent\Builder;
+use Astrogoat\Monologues\Enums\CharacterSex;
+use Astrogoat\Monologues\Scopes\AccessScope;
 use Illuminate\Database\Eloquent\SoftDeletes;
+use Astrogoat\Monologues\Enums\MonologueLength;
+use Illuminate\Database\Eloquent\Attributes\ScopedBy;
+use Illuminate\Database\Eloquent\Relations\BelongsToMany;
 
 #[ScopedBy([AccessScope::class])]
 class Monologue extends Model
@@ -32,14 +35,76 @@ public function play()
         return $this->belongsTo(Play::class);
     }
 
+    public function genres(): BelongsToMany
+    {
+        return $this->belongsToMany(Genre::class);
+    }
+
+    public function identities(): BelongsToMany
+    {
+        return $this->belongsToMany(Identity::class);
+    }
+
+    public function ages(): BelongsToMany
+    {
+        return $this->belongsToMany(Age::class);
+    }
+
+    public function genderIdentities(): BelongsToMany
+    {
+        return $this->belongsToMany(GenderIdentity::class);
+    }
+
     public function scopeForUser(Builder $query, User|MonologueUser $user)
     {
         if ($user instanceof User) {
             $user = MonologueUser::wrap($user);
         }
 
-        //        dd($this, $this->created_at, $user->lastOrder);
+        if ($user->user->hasRole('admin')) {
+            return;
+        }
+
+        if (! $user->lastOrder) {
+            $query->where('created_at', '>', now()->addDay()); // Trick to not show any monologues if they don't have an order.
+
+            return;
+        }
 
         $query->where('created_at', '<', $user->lastOrder->created_at);
     }
+
+    public function getExcerptsFirstLineAttribute()
+    {
+        return Str::of($this->excerpt)
+            ->replace(' lines]', ' line]')
+            ->before('[Last line]')
+            ->remove('[First line]')
+            ->trim()
+            ->toString();
+    }
+
+    public function getExcerptsLastLineAttribute()
+    {
+        return Str::of($this->excerpt)
+            ->replace(' lines]', ' line]')
+            ->after('[Last line] ')
+            ->trim()
+            ->toString();
+    }
+
+    public function getWordCountAttribute(): int
+    {
+        return str_word_count($this->text);
+    }
+
+    public function getCharacterCountAttribute(): int
+    {
+        return Str::length($this->text);
+    }
+
+    public function length(): MonologueLength
+    {
+        return MonologueLength::fromMonologue($this);
+    }
 }
diff --git a/src/Models/MonologueUser.php b/src/Models/MonologueUser.php
index f18e518..8dbbc87 100644
--- a/src/Models/MonologueUser.php
+++ b/src/Models/MonologueUser.php
@@ -13,7 +13,7 @@ class MonologueUser extends Model
 {
     protected $table = 'users';
 
-    private User $user;
+    public User $user;
 
     public function getForeignKey(): string
     {
diff --git a/src/Models/Play.php b/src/Models/Play.php
index d4bde1a..3c52a7c 100644
--- a/src/Models/Play.php
+++ b/src/Models/Play.php
@@ -9,6 +9,7 @@
 use Illuminate\Database\Eloquent\SoftDeletes;
 use Spatie\Sluggable\HasSlug;
 use Spatie\Sluggable\SlugOptions;
+use Illuminate\Database\Eloquent\Relations\BelongsToMany;
 
 class Play extends Model
 {
@@ -32,6 +33,16 @@ public function monologues(): HasMany
         return $this->hasMany(Monologue::class);
     }
 
+    public function playTypes(): BelongsToMany
+    {
+        return $this->belongsToMany(Genre::class);
+    }
+
+    public function playSources(): BelongsToMany
+    {
+        return $this->belongsToMany(PlaySource::class)->withPivot('url');
+    }
+
     public static function icon(): string
     {
         return Icon::BOOK_OPEN;
diff --git a/src/Models/PlaySource.php b/src/Models/PlaySource.php
new file mode 100644
index 0000000..06e8e93
--- /dev/null
+++ b/src/Models/PlaySource.php
@@ -0,0 +1,16 @@
+<?php
+
+namespace Astrogoat\Monologues\Models;
+
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsToMany;
+
+class PlaySource extends Model
+{
+    protected $guarded = [];
+
+    public function plays(): BelongsToMany
+    {
+        return $this->belongsToMany(Play::class);
+    }
+}