diff --git a/src/Twig/Components/MonitorListRow.php b/src/Twig/Components/MonitorListRow.php
new file mode 100644
index 0000000..49748a2
--- /dev/null
+++ b/src/Twig/Components/MonitorListRow.php
@@ -0,0 +1,12 @@
+<?php
+
+namespace App\Twig\Components;
+
+use App\Monitor\Framework\Entity\Monitor;
+use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
+
+#[AsTwigComponent]
+final class MonitorListRow
+{
+    public Monitor $monitor;
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 83b8042..1213e08 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -7,7 +7,7 @@ module.exports = {
   safelist: [
       "bg-blue-300",
       "bg-orange-300",
-      "bg-rose-300",
+      "bg-fuchsia-300",
       "bg-green-400",
       "bg-purple-400",
       "bg-orange-400",
diff --git a/templates/broadcast/Monitor.stream.html.twig b/templates/broadcast/Monitor.stream.html.twig
index 14508a1..979cacd 100644
--- a/templates/broadcast/Monitor.stream.html.twig
+++ b/templates/broadcast/Monitor.stream.html.twig
@@ -3,81 +3,19 @@
     <turbo-stream action="remove" target="active_monitors_no_monitors">
     </turbo-stream>
 
-    <turbo-stream action="append" target="monitors">
+    <turbo-stream action="prepend" target="monitors">
         <template>
-            <tr  id="monitor_{{ entity.id }}">
-                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-stone-800 min-w-[50ch] max-w-[50ch] truncate">
-                    {{ entity.title }}
-                </td>
-                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
-                    {{ entity.searchCount }}
-                </td>
-                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
-                    {{ entity.createdAt|date('m/d/Y h:i a') }}
-                </td>
-                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
-                    {{ entity.lastSearch|date('m/d/Y h:i a') }}
-                </td>
-                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
-                    {% if entity.status == "New" %}
-                        <twig:StatusBadge color="orange" status="{{ entity.status }}" />
-                    {% elseif entity.status == "In Progress" or entity.status == "Active" %}
-                        <twig:StatusBadge color="purple" status="{{ entity.status }}" />
-                    {% else %}
-                        <twig:StatusBadge color="green" status="{{ entity.status }}" />
-                    {% endif %}
-                </td>
-                <td class="px-6 py-4 flex flex-row align-middle justify-center">
-                    <button {{ stimulus_action('monitor_list', 'deleteMonitor', 'click', {id: entity.id}) }}>
-                        <twig:ux:icon
-                                name="ic:twotone-cancel" width="18px"
-                                class="rounded-full align-middle text-red-600"
-                                title="Remove {{ entity.title }} from your Monitor list."
-                        />
-                    </button>
-                </td>
-            </tr>
+            <twig:MonitorListRow monitor="{{ entity }}" />
         </template>
     </turbo-stream>
 {% endblock %}
 
 {% block update %}
-        <turbo-stream action="prepend" target="monitors">
-            <template>
-                <tr  id="monitor_{{ entity.id }}">
-                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-stone-800 min-w-[50ch] max-w-[50ch] truncate">
-                        {{ entity.title }}
-                    </td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
-                        {{ entity.searchCount }}
-                    </td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
-                        {{ entity.createdAt|date('m/d/Y h:i a') }}
-                    </td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
-                        {{ entity.lastSearch|date('m/d/Y h:i a') }}
-                    </td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
-                        {% if entity.status == "New" %}
-                            <twig:StatusBadge color="orange" status="{{ entity.status }}" />
-                        {% elseif entity.status == "In Progress" or entity.status == "Active" %}
-                            <twig:StatusBadge color="purple" status="{{ entity.status }}" />
-                        {% else %}
-                            <twig:StatusBadge color="green" status="{{ entity.status }}" />
-                        {% endif %}
-                    </td>
-                    <td class="px-6 py-4 flex flex-row align-middle justify-center">
-                        <button {{ stimulus_action('monitor_list', 'deleteMonitor', 'click', {id: entity.id}) }}>
-                            <twig:ux:icon
-                                    name="ic:twotone-cancel" width="18px"
-                                    class="rounded-full align-middle text-red-600"
-                                    title="Remove {{ entity.title }} from your Monitor list."
-                            />
-                        </button>
-                    </td>
-                </tr>
-            </template>
-        </turbo-stream>
+    <turbo-stream action="replace" target="monitor_{{ id }}">
+        <template>
+            <twig:MonitorListRow monitor="{{ entity }}" />
+        </template>
+    </turbo-stream>
 {% endblock %}
 
 {% block remove %}
diff --git a/templates/components/MonitorList.html.twig b/templates/components/MonitorList.html.twig
index f516c29..c75c120 100644
--- a/templates/components/MonitorList.html.twig
+++ b/templates/components/MonitorList.html.twig
@@ -36,50 +36,7 @@
         <tbody id="monitors" class="divide-y divide-gray-50">
         {% if this.monitors.items|length > 0 %}
             {% for monitor in this.monitors.items %}
-                <tr  id="monitor_{{ monitor.id }}">
-                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-stone-800 truncate">
-                        {{ monitor.title }}
-                    </td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
-                        {{ monitor|monitor_media_id }}
-                    </td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
-                        {{ monitor.searchCount }}
-                    </td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
-                        {{ monitor.createdAt|date('m/d/Y h:i a') }}
-                    </td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
-                        {{ monitor.lastSearch|date('m/d/Y h:i a') }}
-                    </td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
-                        {% if monitor.monitorType == "tvshow" %}
-                            <twig:StatusBadge color="blue" number="300" text="black" status="{{ monitor.monitorType|monitor_type }}" />
-                        {% elseif monitor.monitorType == "tvseason" %}
-                            <twig:StatusBadge color="orange" number="300" text="black" status="{{ monitor.monitorType|monitor_type }}" />
-                        {% else %}
-                            <twig:StatusBadge color="rose" number="300" text="black" status="{{ monitor.monitorType|monitor_type }}" />
-                        {% endif %}
-                    </td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
-                        {% if monitor.status == "New" %}
-                            <twig:StatusBadge color="orange" status="{{ monitor.status }}" />
-                        {% elseif monitor.status == "In Progress" or monitor.status == "Active" %}
-                            <twig:StatusBadge color="purple" status="{{ monitor.status }}" />
-                        {% else %}
-                            <twig:StatusBadge color="green" status="{{ monitor.status }}" />
-                        {% endif %}
-                    </td>
-                    <td class="px-6 py-4 flex flex-row align-middle justify-center">
-                        <button {{ stimulus_action('monitor_list', 'deleteMonitor', 'click', {id: monitor.id}) }}>
-                            <twig:ux:icon
-                                    name="ic:twotone-cancel" width="18px"
-                                    class="rounded-full align-middle text-red-600"
-                                    title="Remove {{ monitor.title }} from your Monitor list."
-                            />
-                        </button>
-                    </td>
-                </tr>
+                <twig:MonitorListRow :monitor="monitor" />
             {% endfor %}
             {% if this.isWidget and this.monitors.items|length > 5 %}
                 <tr  id="monitor_view_all">
diff --git a/templates/components/MonitorListRow.html.twig b/templates/components/MonitorListRow.html.twig
new file mode 100644
index 0000000..716bdc9
--- /dev/null
+++ b/templates/components/MonitorListRow.html.twig
@@ -0,0 +1,44 @@
+<tr{{ attributes }} id="monitor_{{ monitor.id }}">
+    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-stone-800 truncate">
+        {{ monitor.title }}
+    </td>
+    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
+        {{ monitor|monitor_media_id }}
+    </td>
+    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
+        {{ monitor.searchCount }}
+    </td>
+    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
+        {{ monitor.createdAt|date('m/d/Y h:i a') }}
+    </td>
+    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
+        {{ monitor.lastSearch|date('m/d/Y h:i a') }}
+    </td>
+    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
+        {% if monitor.monitorType == "tvshow" %}
+            <twig:StatusBadge color="blue" number="300" text="black" status="{{ monitor.monitorType|monitor_type }}" />
+        {% elseif monitor.monitorType == "tvseason" %}
+            <twig:StatusBadge color="orange" number="300" text="black" status="{{ monitor.monitorType|monitor_type }}" />
+        {% else %}
+            <twig:StatusBadge color="fuchsia" number="300" text="black" status="{{ monitor.monitorType|monitor_type }}" />
+        {% endif %}
+    </td>
+    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
+        {% if monitor.status == "New" %}
+            <twig:StatusBadge color="orange" status="{{ monitor.status }}" />
+        {% elseif monitor.status == "In Progress" or monitor.status == "Active" %}
+            <twig:StatusBadge color="purple" status="{{ monitor.status }}" />
+        {% else %}
+            <twig:StatusBadge color="green" status="{{ monitor.status }}" />
+        {% endif %}
+    </td>
+    <td class="px-6 py-4 flex flex-row align-middle justify-center">
+        <button {{ stimulus_action('monitor_list', 'deleteMonitor', 'click', {id: monitor.id}) }}>
+            <twig:ux:icon
+                    name="ic:twotone-cancel" width="18px"
+                    class="rounded-full align-middle text-red-600"
+                    title="Remove {{ monitor.title }} from your Monitor list."
+            />
+        </button>
+    </td>
+</tr>