diff --git a/lib/vyasa_web/components/contexts/components.ex b/lib/vyasa_web/components/contexts/components.ex
index 4b08c119..aa462a66 100644
--- a/lib/vyasa_web/components/contexts/components.ex
+++ b/lib/vyasa_web/components/contexts/components.ex
@@ -217,4 +217,29 @@ defmodule VyasaWeb.Context.Components do
     </span>
     """
   end
+
+  def sheaf_creator_modal(assigns) do
+    ~H"""
+    <.debug_dump label="Sheaf Creator Dump" show={@marks_ui.show_sheaf_modal?} class="relative" />
+    <.generic_modal_wrapper
+      id="my-modal"
+      show={@marks_ui.show_sheaf_modal?}
+      on_cancel_callback={JS.push("toggle_show_sheaf_modal?", target: "#content-display")}
+      on_click_away_callback={JS.push("toggle_show_sheaf_modal?", target: "#content-display")}
+      window_keydown_callback={JS.push("toggle_show_sheaf_modal?", target: "#content-display")}
+      container_class="rounded-lg shadow-lg overflow-hidden"
+      background_class="bg-gray-800 bg-opacity-75 backdrop-blur-md"
+      dialog_class="rounded-lg shadow-xl p-6 w-3/4 h-3/4 max-w-lg max-h-screen mx-auto my-auto"
+      focus_wrap_class="flex flex-col items-center justify-center h-full"
+      inner_block_container_class="w-full p-4"
+      close_button_icon_class="text-red-500 hover:text-red-700"
+    >
+      <h2 class="text-2xl font-semibold text-gray-800">My Modal Title</h2>
+      <p class="mt-2 text-gray-600">
+        This is a description of what the modal is about. You can provide additional information here.
+      </p>
+      <.debug_dump assigns={assigns} class="mt-4" />
+    </.generic_modal_wrapper>
+    """
+  end
 end
diff --git a/lib/vyasa_web/components/contexts/read.ex b/lib/vyasa_web/components/contexts/read.ex
index 88ae03c3..4725c161 100644
--- a/lib/vyasa_web/components/contexts/read.ex
+++ b/lib/vyasa_web/components/contexts/read.ex
@@ -15,6 +15,7 @@ defmodule VyasaWeb.Context.Read do
   alias Phoenix.LiveView.Socket
   alias Vyasa.Sangh.{Mark, Sheaf}
   alias VyasaWeb.OgImageController
+  import VyasaWeb.Context.Components
 
   @impl true
   def update(
@@ -116,7 +117,6 @@ defmodule VyasaWeb.Context.Read do
       |> stream(:chapters, chapters |> Enum.sort_by(fn chap -> chap.no end))
     else
       [%Chapter{} = chapter | _] ->
-
         socket
         |> apply_action(:show_verses, params |> Map.put("chap_no", chapter.no))
 
@@ -224,6 +224,8 @@ defmodule VyasaWeb.Context.Read do
 
   This reflector is hot-swappable to other sheafs if there's a need to switch what
   sheaf to focus on and gather marks for.
+
+  TODO: add other params-based sheaf-setting
   """
   def init_draft_reflector(
         %Socket{
@@ -283,6 +285,37 @@ defmodule VyasaWeb.Context.Read do
      |> cascade_stream_change()}
   end
 
+  @impl true
+  def handle_event(
+        "toggle_show_sheaf_modal?",
+        _,
+        %Socket{
+          assigns:
+            %{
+              marks_ui: %MarksUiState{} = ui_state
+            } = _assigns
+        } = socket
+      ) do
+    {
+      :noreply,
+      socket
+      |> assign(marks_ui: ui_state |> MarksUiState.toggle_show_sheaf_modal?())
+      |> cascade_stream_change()
+    }
+  end
+
+  @impl true
+  def handle_event(
+        "toggle_show_sheaf_modal?",
+        _,
+        %Socket{} = socket
+      ) do
+    {
+      :noreply,
+      socket
+    }
+  end
+
   @impl true
   def handle_event(
         "toggle_is_editing_mark_content?",
@@ -614,13 +647,11 @@ defmodule VyasaWeb.Context.Read do
         <% end %>
 
         <%= if @content_action == :show_verses do %>
-          <.debug_dump
-            :for={mark <- @marks}
-            label={Atom.to_string(mark.state) <> " Mark " <> Integer.to_string(mark.order) }
-            mark_state={mark.state}
-            mark_id={mark.id}
-            class="relative"
-            mark_order={mark.order}
+          <.debug_dump label="UI State Info" marks_ui={@marks_ui} class="relative w-screen" />
+          <.sheaf_creator_modal
+            id="sheaf-creator"
+            marks_ui={@marks_ui}
+            event_target="content-display"
           />
           <.live_component
             module={VyasaWeb.Context.Read.Verses}
diff --git a/lib/vyasa_web/components/contexts/read/verse_matrix.ex b/lib/vyasa_web/components/contexts/read/verse_matrix.ex
index 1ec918d7..a0611604 100644
--- a/lib/vyasa_web/components/contexts/read/verse_matrix.ex
+++ b/lib/vyasa_web/components/contexts/read/verse_matrix.ex
@@ -222,11 +222,11 @@ defmodule VyasaWeb.Context.Read.VerseMatrix do
           <button
             type="button"
             phx-click={
-              JS.push("change_form_type",
-                value: %{type: if(@form_type == :mark, do: "sheaf", else: "mark")}
+              JS.push("toggle_show_sheaf_modal?",
+                value: %{}
               )
             }
-            phx-target={@myself}
+            phx-target={@event_target}
             class="p-1 rounded-full text-gray-400 hover:text-brand transition-colors duration-200 ml-1"
           >
             <.icon
diff --git a/lib/vyasa_web/components/contexts/ui_state.ex b/lib/vyasa_web/components/contexts/ui_state.ex
index 539cb8f6..6b5b9ef8 100644
--- a/lib/vyasa_web/components/contexts/ui_state.ex
+++ b/lib/vyasa_web/components/contexts/ui_state.ex
@@ -11,10 +11,17 @@ defmodule VyasaWeb.Context.Components.UiState.Marks do
   alias Vyasa.Sangh.Mark
   alias VyasaWeb.Context.Components.UiState.Mark, as: MarkUiState
   alias VyasaWeb.Context.Components.UiState.Marks, as: MarksUiState
-  defstruct [:is_expanded_view?, :is_editable_marks?, :mark_id_to_ui]
+
+  defstruct [
+    :is_expanded_view?,
+    :show_sheaf_modal?,
+    :is_editable_marks?,
+    :mark_id_to_ui
+  ]
 
   @initial %{
     is_expanded_view?: false,
+    show_sheaf_modal?: false,
     is_editable_marks?: false,
     mark_id_to_ui: %{}
   }
@@ -44,6 +51,15 @@ defmodule VyasaWeb.Context.Components.UiState.Marks do
     }
   end
 
+  def toggle_show_sheaf_modal?(
+        %MarksUiState{
+          show_sheaf_modal?: curr
+        } = ui_state
+      ) do
+    # show_modal("sheaf-creator")
+    %MarksUiState{ui_state | show_sheaf_modal?: !curr}
+  end
+
   def toggle_is_editable(
         %MarksUiState{
           is_editable_marks?: curr
diff --git a/lib/vyasa_web/components/core_components.ex b/lib/vyasa_web/components/core_components.ex
index 0bd1fd40..cd301425 100644
--- a/lib/vyasa_web/components/core_components.ex
+++ b/lib/vyasa_web/components/core_components.ex
@@ -178,6 +178,137 @@ defmodule VyasaWeb.CoreComponents do
     """
   end
 
+  attr(:id, :string, required: true)
+  attr(:show, :boolean, default: false)
+
+  attr(:on_cancel_callback, JS,
+    default: %JS{},
+    doc: "Defines a callback to invoke on cancellation / exit of the modal"
+  )
+
+  attr(:on_click_away_callback, :any,
+    default: %JS{},
+    doc: "Defines a callback to invoke on click away of dialog"
+  )
+
+  attr(:cancel_key, :string, default: "escape")
+
+  attr(:on_mount_callback, :any,
+    default: %JS{},
+    doc: "Defines a callback to invoke on mounting of the modal"
+  )
+
+  attr(:window_keydown_callback, :any,
+    default: %JS{},
+    doc: "Defines a callback to invoke on keypress @ the window level"
+  )
+
+  attr(:container_class, :string, default: "", doc: "inline style for the outermost container")
+  attr(:background_class, :string, default: "", doc: "inline style for the background / backdrop")
+  attr(:dialog_class, :string, default: "", doc: "inline style for the dialog container")
+  attr(:focus_wrap_class, :string, default: "", doc: "inline style for the focus wrap")
+
+  attr(:inner_block_container_class, :string,
+    default: "",
+    doc: "inline style for the container for the inner content slot"
+  )
+
+  attr(:close_button_icon, :string, default: "hero-x-mark-solid")
+  attr(:close_button_class, :string, default: "")
+  attr(:close_button_icon_class, :string, default: "")
+  attr(:focus_container_class, :string, default: "")
+
+  slot(:inner_block, required: true)
+
+  @doc """
+  A generic implementation of the modal wrapper. The attributes and slots have corresponding docstrings for reference.
+  In order to use this:
+  1) supply the show boolean properly, this controls hidden state
+  2) supply some callbacks:
+     Most of these callbacks target a particular event, the caveat is that if there are
+     multiple events that are expected to fire the same callback, then the current implementation
+     requires some duplication of the callbacks passed.
+
+     For example, if you pass in a callback for on_cancel_callback, you would probably
+     want to do the same for the on_click_away_callback. Currently this duplication
+     is required, in the future if there's no reason to target these events separately,
+     then the function component definition might be changed such that closing and click-away
+     callbacks refer to the same argument.
+
+  3) supply some class definitions to override the default ones provided in this function definition.
+     By inspecting the attributes corresponding to class definitions, we can also determine how this
+     modal-wrapper is structured (containers, children...)
+  """
+  def generic_modal_wrapper(assigns) do
+    IO.inspect(assigns, label: "SEE ME: modal wrapper assigns")
+
+    ~H"""
+    <div
+      :if={@show}
+      id={@id}
+      phx-mounted={@show && @on_mount_callback && show_modal(@id)}
+      class={["relative z-50 hidden w-full mx-auto", @container_class]}
+    >
+      <div
+        id={"#{@id}-bg"}
+        class={[
+          "fixed inset-0 bg-gray-500 dark:bg-black opacity-90 dark:opacity-80",
+          @background_class
+        ]}
+        aria-hidden="true"
+      />
+      <div
+        aria-describedby={"#{@id}-description"}
+        role="dialog"
+        aria-modal="true"
+        tabindex="0"
+        class={["w-full fixed inset-0 flex", @dialog_class]}
+      >
+        <div class="flex w-full absolute lg:inset-0 bottom-0 lg:items-center lg:justify-center">
+          <div class={["w-full lg:py-8 rounded-none lg:rounded-2xl", @focus_container_class]}>
+            <.focus_wrap
+              id={"#{@id}-container"}
+              phx-mounted={@show && @on_mount_callback && show_modal(@id)}
+              phx-window-keydown={hide_modal(@window_keydown_callback, @id)}
+              phx-key={@cancel_key}
+              phx-click-away={hide_modal(@on_click_away_callback, @id)}
+              class={[
+                "hidden relative flex w-full bg-white lg:rounded-3xl lg:shadow-2xl",
+                @focus_wrap_class
+              ]}
+            >
+              <div :if={@close_button_icon} class="absolute top-4 right-4">
+                <button
+                  phx-click={hide_modal(@on_cancel_callback, @id)}
+                  type="button"
+                  class={["-m-3 flex-none p-3 opacity-80 hover:opacity-40", @close_button_class]}
+                  aria-label={gettext("close")}
+                >
+                  <.icon
+                    name={@close_button_icon}
+                    class={"h-5 w-5 text-black " <> (@close_button_icon_class || "")}
+                  />
+                </button>
+              </div>
+              <div id={"#{@id}-content"}>
+                <div
+                  id={"#{@id}-main"}
+                  class={[
+                    "w-full lg:max-w-2xl lg:items-center lg:justify-center flex",
+                    @inner_block_container_class
+                  ]}
+                >
+                  <%= render_slot(@inner_block) %>
+                </div>
+              </div>
+            </.focus_wrap>
+          </div>
+        </div>
+      </div>
+    </div>
+    """
+  end
+
   @doc """
   Renders a waiting spinner
   """
@@ -919,13 +1050,13 @@ defmodule VyasaWeb.CoreComponents do
   A generic debug dump component that displays all assigned properties.
 
   ## Examples
-      <DebugDump assigns={@assigns} class={["custom-class", "another-class"]} />
+      <DebugDump assigns={@assigns} label="Custom Label" class={["custom-class", "another-class"]} />
   """
   def debug_dump(assigns) do
     ~H"""
     <div class={[
-      "fixed bottom-0 right-0 m-4 p-4 bg-white border border-gray-300 rounded-lg shadow-lg max-w-md max-h-80 overflow-auto z-50 bg-opacity-50 p-4",
-      if(Map.has_key?(assigns, :class), do: assigns.class, else: [])
+      "fixed bottom-0 right-0 m-4 p-4 bg-white border border-gray-300 rounded-lg shadow-lg max-w-md max-h-80 overflow-auto z-50 bg-opacity-50",
+      assigns.class
     ]}>
       <h2 class="text-lg font-bold mb-2">
         <%= Map.get(assigns, :label, "Developer Dump") %>