diff --git a/lib/ambry_web/components/admin/components.ex b/lib/ambry_web/components/admin/components.ex
index df35ca9b..8a717b84 100644
--- a/lib/ambry_web/components/admin/components.ex
+++ b/lib/ambry_web/components/admin/components.ex
@@ -3,7 +3,6 @@ defmodule AmbryWeb.Admin.Components do
 
   use AmbryWeb, :html
 
-  alias Phoenix.HTML.Form
   alias Phoenix.HTML.FormField
 
   def admin_table_header(assigns) do
@@ -230,49 +229,56 @@ defmodule AmbryWeb.Admin.Components do
     """
   end
 
-  attr :drop_param, :atom, required: true
-  attr :parent_form, Form, required: true
-  attr :form, Form, required: true
-  attr :class, :string, default: nil, doc: "class overrides"
+  attr :field, FormField, required: true
 
-  def delete_button(assigns) do
+  def delete_input(assigns) do
     ~H"""
-    <label class={["flex", @class]}>
-      <input type="checkbox" name={@parent_form[@drop_param].name <> "[]"} value={@form.index} class="hidden" />
-      <FA.icon name="trash" class="h-4 w-4 cursor-pointer fill-current transition-colors hover:text-red-600" />
-    </label>
+    <input type="hidden" name={@field.name <> "[]"} />
     """
   end
 
-  attr :drop_param, :atom, required: true
-  attr :form, Form, required: true
+  attr :field, FormField, required: true
+  attr :index, :integer, required: true
 
-  def delete_input(assigns) do
+  def sort_input(assigns) do
     ~H"""
-    <input type="hidden" name={@form[@drop_param].name <> "[]"} />
+    <input type="hidden" name={@field.name <> "[]"} value={@index} />
     """
   end
 
-  attr :sort_param, :atom, required: true
-  attr :parent_form, Form, required: true
-  attr :form, Form, required: true
+  attr :field, FormField, required: true
+  attr :index, :integer, required: true
+  attr :class, :string, default: nil, doc: "class overrides"
 
-  def sort_input(assigns) do
+  def delete_button(assigns) do
     ~H"""
-    <input type="hidden" name={@parent_form[@sort_param].name <> "[]"} value={@form.index} />
+    <button
+      type="button"
+      name={@field.name <> "[]"}
+      value={@index}
+      phx-click={JS.dispatch("change")}
+      class={["flex", @class]}
+    >
+      <FA.icon name="trash" class="h-4 w-4 cursor-pointer fill-current transition-colors hover:text-red-600" />
+    </button>
     """
   end
 
-  attr :sort_param, :atom, required: true
-  attr :form, Form, required: true
-  attr :label, :string, required: true
+  attr :field, FormField, required: true
+  slot :inner_block, required: true
 
   def add_button(assigns) do
     ~H"""
-    <label class="text-brand flex cursor-pointer items-center gap-1 hover:underline dark:text-brand-dark">
-      <input type="checkbox" name={@form[@sort_param].name <> "[]"} class="hidden" /> <%= @label %>
+    <button
+      type="button"
+      name={@field.name <> "[]"}
+      value="new"
+      phx-click={JS.dispatch("change")}
+      class="text-brand flex cursor-pointer items-center gap-1 hover:underline dark:text-brand-dark"
+    >
+      <%= render_slot(@inner_block) %>
       <FA.icon name="plus" class="h-4 w-4 fill-current" />
-    </label>
+    </button>
     """
   end
 
diff --git a/lib/ambry_web/live/admin/book_live/form.html.heex b/lib/ambry_web/live/admin/book_live/form.html.heex
index 14d15c6f..df4b4b63 100644
--- a/lib/ambry_web/live/admin/book_live/form.html.heex
+++ b/lib/ambry_web/live/admin/book_live/form.html.heex
@@ -74,7 +74,7 @@
     <div class="space-y-2">
       <.label>Authors</.label>
       <.inputs_for :let={book_author_form} field={@form[:book_authors]}>
-        <.sort_input parent_form={@form} form={book_author_form} sort_param={:book_authors_sort} />
+        <.sort_input field={@form[:book_authors_sort]} index={book_author_form.index} />
 
         <div class="flex items-start gap-2">
           <.input
@@ -84,18 +84,18 @@
             list="authors"
             container_class="grow"
           />
-          <.delete_button parent_form={@form} form={book_author_form} drop_param={:book_authors_drop} class="pt-[10px]" />
+          <.delete_button field={@form[:book_authors_drop]} index={book_author_form.index} class="pt-[10px]" />
         </div>
       </.inputs_for>
 
-      <.add_button form={@form} sort_param={:book_authors_sort} label="Add author" />
-      <.delete_input form={@form} drop_param={:book_authors_drop} />
+      <.add_button field={@form[:book_authors_sort]}>Add author</.add_button>
+      <.delete_input field={@form[:book_authors_drop]} />
     </div>
 
     <div class="space-y-2">
       <.label>Series</.label>
       <.inputs_for :let={series_book_form} field={@form[:series_books]}>
-        <.sort_input parent_form={@form} form={series_book_form} sort_param={:series_books_sort} />
+        <.sort_input field={@form[:series_books_sort]} index={series_book_form.index} />
 
         <div class="flex items-start gap-2">
           <.input
@@ -111,12 +111,12 @@
             list="series"
             container_class="grow"
           />
-          <.delete_button parent_form={@form} form={series_book_form} drop_param={:series_books_drop} class="pt-[10px]" />
+          <.delete_button field={@form[:series_books_drop]} index={series_book_form.index} class="pt-[10px]" />
         </div>
       </.inputs_for>
 
-      <.add_button form={@form} sort_param={:series_books_sort} label="Add series" />
-      <.delete_input form={@form} drop_param={:series_books_drop} />
+      <.add_button field={@form[:series_books_sort]}>Add series</.add_button>
+      <.delete_input field={@form[:series_books_drop]} />
     </div>
 
     <.input type="hidden" field={@form[:image_path]} />
diff --git a/lib/ambry_web/live/admin/media_live/chapters.html.heex b/lib/ambry_web/live/admin/media_live/chapters.html.heex
index 82b3c733..01907ffd 100644
--- a/lib/ambry_web/live/admin/media_live/chapters.html.heex
+++ b/lib/ambry_web/live/admin/media_live/chapters.html.heex
@@ -19,17 +19,17 @@
     <div class="space-y-2">
       <.label>Chapters</.label>
       <.inputs_for :let={chapter_form} field={@form[:chapters]}>
-        <.sort_input parent_form={@form} form={chapter_form} sort_param={:chapters_sort} />
+        <.sort_input field={@form[:chapters_sort]} index={chapter_form.index} />
 
         <div class="flex items-start gap-2">
           <.input field={chapter_form[:time]} container_class="w-24" />
           <.input field={chapter_form[:title]} container_class="grow" />
-          <.delete_button parent_form={@form} form={chapter_form} drop_param={:chapters_drop} class="pt-[10px]" />
+          <.delete_button field={@form[:chapters_drop]} index={chapter_form.index} class="pt-[10px]" />
         </div>
       </.inputs_for>
 
-      <.add_button form={@form} sort_param={:chapters_sort} label="Add chapter" />
-      <.delete_input form={@form} drop_param={:chapters_drop} />
+      <.add_button field={@form[:chapters_sort]}>Add chapter</.add_button>
+      <.delete_input field={@form[:chapters_drop]} />
     </div>
 
     <:actions>
diff --git a/lib/ambry_web/live/admin/media_live/form.html.heex b/lib/ambry_web/live/admin/media_live/form.html.heex
index c69da343..a75b71a0 100644
--- a/lib/ambry_web/live/admin/media_live/form.html.heex
+++ b/lib/ambry_web/live/admin/media_live/form.html.heex
@@ -57,7 +57,7 @@
     <div class="space-y-2">
       <.label>Narrated by</.label>
       <.inputs_for :let={media_narrator_form} field={@form[:media_narrators]}>
-        <.sort_input parent_form={@form} form={media_narrator_form} sort_param={:media_narrators_sort} />
+        <.sort_input field={@form[:media_narrators_sort]} index={media_narrator_form.index} />
 
         <div class="flex items-start gap-2">
           <.input
@@ -67,17 +67,12 @@
             list="narrators"
             container_class="grow"
           />
-          <.delete_button
-            parent_form={@form}
-            form={media_narrator_form}
-            drop_param={:media_narrators_drop}
-            class="pt-[10px]"
-          />
+          <.delete_button field={@form[:media_narrators_drop]} index={media_narrator_form.index} class="pt-[10px]" />
         </div>
       </.inputs_for>
 
-      <.add_button form={@form} sort_param={:media_narrators_sort} label="Add narrator" />
-      <.delete_input form={@form} drop_param={:media_narrators_drop} />
+      <.add_button field={@form[:media_narrators_sort]}>Add narrator</.add_button>
+      <.delete_input field={@form[:media_narrators_drop]} />
     </div>
 
     <div class="flex gap-4">
@@ -182,7 +177,7 @@
       <.label>Supplemental files</.label>
 
       <.inputs_for :let={supplemental_file_form} field={@form[:supplemental_files]}>
-        <.sort_input parent_form={@form} form={supplemental_file_form} sort_param={:supplemental_files_sort} />
+        <.sort_input field={@form[:supplemental_files_sort]} index={supplemental_file_form.index} />
         <.input field={supplemental_file_form[:id]} type="hidden" />
 
         <div class="flex items-center gap-2">
@@ -190,9 +185,11 @@
           <.input field={supplemental_file_form[:label]} placeholder="Label" container_class="grow" />
           <.label for={supplemental_file_form[:filename].name}>Filename</.label>
           <.input field={supplemental_file_form[:filename]} placeholder="filename.ext" container_class="grow" />
-          <.delete_button parent_form={@form} form={supplemental_file_form} drop_param={:supplemental_files_drop} />
+          <.delete_button field={@form[:supplemental_files_drop]} index={supplemental_file_form.index} />
         </div>
       </.inputs_for>
+
+      <.delete_input field={@form[:supplemental_files_drop]} />
     </div>
 
     <div class="space-y-2">
diff --git a/lib/ambry_web/live/admin/person_live/form.html.heex b/lib/ambry_web/live/admin/person_live/form.html.heex
index d9f0b088..6393ba0c 100644
--- a/lib/ambry_web/live/admin/person_live/form.html.heex
+++ b/lib/ambry_web/live/admin/person_live/form.html.heex
@@ -50,31 +50,31 @@
     <div class="space-y-2">
       <.label>Writing as</.label>
       <.inputs_for :let={author_form} field={@form[:authors]}>
-        <.sort_input parent_form={@form} form={author_form} sort_param={:authors_sort} />
+        <.sort_input field={@form[:authors_sort]} index={author_form.index} />
 
         <div class="flex items-start gap-2">
           <.input field={author_form[:name]} container_class="grow" />
-          <.delete_button parent_form={@form} form={author_form} drop_param={:authors_drop} class="pt-[10px]" />
+          <.delete_button field={@form[:authors_drop]} index={author_form.index} class="pt-[10px]" />
         </div>
       </.inputs_for>
 
-      <.add_button form={@form} sort_param={:authors_sort} label="Add author" />
-      <.delete_input form={@form} drop_param={:authors_drop} />
+      <.add_button field={@form[:authors_sort]}>Add author</.add_button>
+      <.delete_input field={@form[:authors_drop]} />
     </div>
 
     <div class="space-y-2">
       <.label>Narrating as</.label>
       <.inputs_for :let={narrator_form} field={@form[:narrators]}>
-        <.sort_input parent_form={@form} form={narrator_form} sort_param={:narrators_sort} />
+        <.sort_input field={@form[:narrators_sort]} index={narrator_form.index} />
 
         <div class="flex items-start gap-2">
           <.input field={narrator_form[:name]} container_class="grow" />
-          <.delete_button parent_form={@form} form={narrator_form} drop_param={:narrators_drop} class="pt-[10px]" />
+          <.delete_button field={@form[:narrators_drop]} index={narrator_form.index} class="pt-[10px]" />
         </div>
       </.inputs_for>
 
-      <.add_button form={@form} sort_param={:narrators_sort} label="Add narrator" />
-      <.delete_input form={@form} drop_param={:narrators_drop} />
+      <.add_button field={@form[:narrators_sort]}>Add narrator</.add_button>
+      <.delete_input field={@form[:narrators_drop]} />
     </div>
 
     <.input type="hidden" field={@form[:image_path]} />
diff --git a/lib/ambry_web/live/admin/series_live/form.html.heex b/lib/ambry_web/live/admin/series_live/form.html.heex
index a1426ebf..3f6c573b 100644
--- a/lib/ambry_web/live/admin/series_live/form.html.heex
+++ b/lib/ambry_web/live/admin/series_live/form.html.heex
@@ -7,7 +7,7 @@
     <div class="space-y-2">
       <.label>Books</.label>
       <.inputs_for :let={series_book_form} field={@form[:series_books]}>
-        <.sort_input parent_form={@form} form={series_book_form} sort_param={:series_books_sort} />
+        <.sort_input field={@form[:series_books_sort]} index={series_book_form.index} />
 
         <div class="flex items-start gap-2">
           <.input
@@ -23,12 +23,12 @@
             list="books"
             container_class="grow"
           />
-          <.delete_button parent_form={@form} form={series_book_form} drop_param={:series_books_drop} class="pt-[10px]" />
+          <.delete_button field={@form[:series_books_drop]} index={series_book_form.index} class="pt-[10px]" />
         </div>
       </.inputs_for>
 
-      <.add_button form={@form} sort_param={:series_books_sort} label="Add book" />
-      <.delete_input form={@form} drop_param={:series_books_drop} />
+      <.add_button field={@form[:series_books_sort]}>Add book</.add_button>
+      <.delete_input field={@form[:series_books_drop]} />
     </div>
 
     <:actions>