diff --git a/lib/phoenix_kit/blogging/renderer.ex b/lib/phoenix_kit/blogging/renderer.ex
index 4283e054a..7e6be3286 100644
--- a/lib/phoenix_kit/blogging/renderer.ex
+++ b/lib/phoenix_kit/blogging/renderer.ex
@@ -16,6 +16,7 @@ defmodule PhoenixKit.Blogging.Renderer do
   @cache_name :blog_posts
   @cache_version "v1"
   @component_regex ~r/<(Image|Hero|CTA|Headline|Subheadline|Video)\s+([^>]*?)\/>/s
+  @component_block_regex ~r/<(Hero|CTA|Headline|Subheadline|Video)\s*([^>]*)>(.*?)<\/\1>/s
 
   @doc """
   Renders a post's markdown content to HTML.
@@ -86,8 +87,11 @@ defmodule PhoenixKit.Blogging.Renderer do
   # Detect if markdown content has embedded XML components
   defp has_embedded_components?(content) do
     String.contains?(content, "<Image ") ||
-      String.contains?(content, "<Hero ") ||
-      String.contains?(content, "<CTA ")
+      String.contains?(content, "<Hero") ||
+      String.contains?(content, "<CTA") ||
+      String.contains?(content, "<Headline") ||
+      String.contains?(content, "<Subheadline") ||
+      String.contains?(content, "<Video")
   end
 
   # Render .phk content using PageBuilder
@@ -138,11 +142,11 @@ defmodule PhoenixKit.Blogging.Renderer do
   defp render_mixed_segments("", acc), do: acc
 
   defp render_mixed_segments(content, acc) do
-    case Regex.run(@component_regex, content, return: :index) do
+    case next_component_match(content) do
       nil ->
         [render_earmark_markdown(content) | acc]
 
-      [{match_start, match_len}, {tag_start, tag_len}, {attrs_start, attrs_len}] ->
+      {:self_closing, [{match_start, match_len}, {tag_start, tag_len}, {attrs_start, attrs_len}]} ->
         before = binary_part(content, 0, match_start)
         after_index = match_start + match_len
         rest_content = binary_part(content, after_index, byte_size(content) - after_index)
@@ -155,6 +159,46 @@ defmodule PhoenixKit.Blogging.Renderer do
           |> add_component(tag, attrs)
 
         render_mixed_segments(rest_content, acc)
+
+      {:block, indexes} ->
+        [{match_start, match_len} | _rest] = indexes
+        before = binary_part(content, 0, match_start)
+        after_index = match_start + match_len
+        rest_content = binary_part(content, after_index, byte_size(content) - after_index)
+        fragment = binary_part(content, match_start, match_len)
+
+        acc =
+          acc
+          |> maybe_add_markdown(before)
+          |> add_block_component(fragment)
+
+        render_mixed_segments(rest_content, acc)
+    end
+  end
+
+  defp next_component_match(content) do
+    self_match = Regex.run(@component_regex, content, return: :index)
+    block_match = Regex.run(@component_block_regex, content, return: :index)
+
+    case {self_match, block_match} do
+      {nil, nil} ->
+        nil
+
+      {nil, block} ->
+        {:block, block}
+
+      {self, nil} ->
+        {:self_closing, self}
+
+      {self, block} ->
+        self_start = self |> hd() |> elem(0)
+        block_start = block |> hd() |> elem(0)
+
+        if self_start <= block_start do
+          {:self_closing, self}
+        else
+          {:block, block}
+        end
     end
   end
 
@@ -168,6 +212,10 @@ defmodule PhoenixKit.Blogging.Renderer do
     [render_inline_component(tag, attrs) | acc]
   end
 
+  defp add_block_component(acc, fragment) do
+    [render_block_component(fragment) | acc]
+  end
+
   # Render individual inline component
   defp render_inline_component("Image", attrs) do
     # Parse attributes
@@ -216,6 +264,21 @@ defmodule PhoenixKit.Blogging.Renderer do
     ""
   end
 
+  defp render_block_component(fragment) do
+    fragment
+    |> PageBuilder.render_content()
+    |> case do
+      {:ok, html} ->
+        html
+        |> Safe.to_iodata()
+        |> IO.iodata_to_binary()
+
+      {:error, reason} ->
+        Logger.warning("Error rendering block component: #{inspect(reason)}")
+        "<div class='error'>Error rendering component</div>"
+    end
+  end
+
   # Parse XML attribute string into a map
   defp parse_xml_attributes(attrs_string) do
     # Match key="value" or key='value' patterns
diff --git a/lib/phoenix_kit_web/live/modules/blogging/editor.ex b/lib/phoenix_kit_web/live/modules/blogging/editor.ex
index 3c4515275..86d96355d 100644
--- a/lib/phoenix_kit_web/live/modules/blogging/editor.ex
+++ b/lib/phoenix_kit_web/live/modules/blogging/editor.ex
@@ -209,6 +209,42 @@ defmodule PhoenixKitWeb.Live.Modules.Blogging.Editor do
     {:noreply, assign(socket, :show_media_selector, true)}
   end
 
+  def handle_event("open_image_component_selector", _params, socket) do
+    {:noreply,
+     socket
+     |> assign(:show_media_selector, true)
+     |> assign(:inserting_image_component, true)}
+  end
+
+  def handle_event("insert_component", %{"component" => "video"}, socket) do
+    {:noreply,
+     push_event(socket, "phx:prompt-and-insert", %{
+       component: "video",
+       prompt: "Enter YouTube URL:",
+       placeholder: "https://youtu.be/dQw4w9WgXcQ"
+     })}
+  end
+
+  def handle_event("insert_component", %{"component" => "cta"}, socket) do
+    template = """
+    <CTA primary="true" action="/your-link">Button Text</CTA>
+    """
+
+    {:noreply, push_event(socket, "phx:insert-at-cursor", %{text: template})}
+  end
+
+  def handle_event("insert_video_component", %{"url" => url}, socket) do
+    template = """
+
+    <Video url="#{url}">
+      Optional caption text
+    </Video>
+
+    """
+
+    {:noreply, push_event(socket, "phx:insert-at-cursor", %{text: template})}
+  end
+
   def handle_event("clear_featured_image", _params, socket) do
     # Clear the featured image from the form (form is a simple map, not a struct)
     updated_form = Map.put(socket.assigns.form, "featured_image_id", "")
@@ -435,25 +471,40 @@ defmodule PhoenixKitWeb.Live.Modules.Blogging.Editor do
   def handle_info({:media_selected, file_ids}, socket) do
     # Handle the selected file IDs from the media selector modal
     file_id = List.first(file_ids)
+    inserting_image_component = Map.get(socket.assigns, :inserting_image_component, false)
 
     socket =
-      if file_id do
+      if file_id && inserting_image_component do
+        # Insert image component at cursor via JavaScript
+        js_code = "window.insertImageComponent && window.insertImageComponent('#{file_id}')"
+
         socket
-        |> assign(:form, update_form_with_media(socket.assigns.form, file_id))
-        |> assign(:has_pending_changes, true)
         |> assign(:show_media_selector, false)
-        |> put_flash(:info, gettext("Featured image selected"))
-        |> push_event("changes-status", %{has_changes: true})
+        |> assign(:inserting_image_component, false)
+        |> put_flash(:info, gettext("Image component inserted"))
+        |> push_event("exec-js", %{js: js_code})
       else
-        socket
-        |> assign(:show_media_selector, false)
+        if file_id do
+          socket
+          |> assign(:form, update_form_with_media(socket.assigns.form, file_id))
+          |> assign(:has_pending_changes, true)
+          |> assign(:show_media_selector, false)
+          |> put_flash(:info, gettext("Featured image selected"))
+          |> push_event("changes-status", %{has_changes: true})
+        else
+          socket
+          |> assign(:show_media_selector, false)
+        end
       end
 
     {:noreply, socket}
   end
 
   def handle_info({:media_selector_closed}, socket) do
-    {:noreply, assign(socket, :show_media_selector, false)}
+    {:noreply,
+     socket
+     |> assign(:show_media_selector, false)
+     |> assign(:inserting_image_component, false)}
   end
 
   defp create_new_post(socket, params) do
@@ -701,7 +752,7 @@ defmodule PhoenixKitWeb.Live.Modules.Blogging.Editor do
           DateTime.utc_now()
           |> floor_datetime_to_minute()
           |> DateTime.to_iso8601(),
-      "featured_image_id" => post.metadata.featured_image_id || ""
+      "featured_image_id" => Map.get(post.metadata, :featured_image_id, "")
     }
 
     form =
diff --git a/lib/phoenix_kit_web/live/modules/blogging/editor.html.heex b/lib/phoenix_kit_web/live/modules/blogging/editor.html.heex
index 83e515387..3fa6e7537 100644
--- a/lib/phoenix_kit_web/live/modules/blogging/editor.html.heex
+++ b/lib/phoenix_kit_web/live/modules/blogging/editor.html.heex
@@ -10,6 +10,143 @@
 >
   <script>
     (function() {
+      // Content Editor - Standalone implementation (no LiveView hook needed)
+      console.log('[ContentEditor] Initializing...');
+
+      let textarea = null;
+      let lastCursorPosition = 0;
+
+      // Initialize when DOM is ready
+      function initContentEditor() {
+        textarea = document.getElementById('content-textarea');
+
+        if (!textarea) {
+          console.warn('[ContentEditor] Textarea not found, retrying...');
+          setTimeout(initContentEditor, 100);
+          return;
+        }
+
+        console.log('[ContentEditor] Textarea found, setting up listeners');
+
+        // Track cursor position on blur
+        textarea.addEventListener('blur', () => {
+          lastCursorPosition = textarea.selectionStart;
+          console.log('[ContentEditor] Cursor position saved on blur:', lastCursorPosition);
+        });
+
+        // Track cursor position on selection change
+        textarea.addEventListener('select', () => {
+          lastCursorPosition = textarea.selectionStart;
+        });
+
+        // Track cursor position on click
+        textarea.addEventListener('click', () => {
+          lastCursorPosition = textarea.selectionStart;
+        });
+
+        // Track cursor position on keyup
+        textarea.addEventListener('keyup', () => {
+          lastCursorPosition = textarea.selectionStart;
+        });
+
+        console.log('[ContentEditor] Ready!');
+      }
+
+      function insertAtCursor(text) {
+        if (!textarea) {
+          console.error('[ContentEditor] Textarea not available');
+          return;
+        }
+
+        console.log('[ContentEditor] Inserting text at position:', lastCursorPosition);
+
+        // Use last known cursor position
+        const start = lastCursorPosition || 0;
+        const end = start;
+        const currentValue = textarea.value;
+
+        // Insert text at cursor position
+        const newValue = currentValue.substring(0, start) + text + currentValue.substring(end);
+        textarea.value = newValue;
+
+        // Move cursor to end of inserted text
+        const newCursorPos = start + text.length;
+        textarea.selectionStart = textarea.selectionEnd = newCursorPos;
+        lastCursorPosition = newCursorPos;
+
+        // Focus the textarea
+        textarea.focus();
+
+        // Trigger change event to update LiveView
+        textarea.dispatchEvent(new Event('input', { bubbles: true }));
+        console.log('[ContentEditor] Text inserted successfully');
+      }
+
+      // Listen for custom window events from LiveView
+      window.addEventListener('phx:insert-at-cursor', (e) => {
+        console.log('[ContentEditor] Received phx:insert-at-cursor event:', e.detail);
+        insertAtCursor(e.detail.text);
+      });
+
+      window.addEventListener('phx:prompt-and-insert', (e) => {
+        console.log('[ContentEditor] Received phx:prompt-and-insert event');
+        const {prompt, placeholder} = e.detail;
+        const url = window.prompt(prompt, placeholder);
+
+        if (url && url.trim()) {
+          // Send back to LiveView via pushEvent
+          const liveSocket = window.liveSocket;
+          if (liveSocket) {
+            const view = liveSocket.getViewByEl(textarea);
+            if (view) {
+              view.pushEvent("insert_video_component", {url: url.trim()});
+            }
+          }
+        }
+      });
+
+      // Global function for inserting components (called from onclick)
+      window.insertComponent = function(text) {
+        console.log('[ContentEditor] insertComponent called with:', text);
+        insertAtCursor(text);
+      };
+
+      // Global function for prompting and inserting video
+      window.promptAndInsertVideo = function() {
+        const url = window.prompt('Enter YouTube URL:', 'https://youtu.be/dQw4w9WgXcQ');
+        if (url && url.trim()) {
+          const template = '\n<Video url="' + url.trim() + '">\n  Optional caption text\n</Video>\n';
+          insertAtCursor(template);
+        }
+      };
+
+      // Global function for inserting image component (called after media selection)
+      window.insertImageComponent = function(fileId) {
+        console.log('[ContentEditor] Inserting image component with file ID:', fileId);
+        const template = '\n<Image file_id="' + fileId + '" alt="Description here" />\n';
+        insertAtCursor(template);
+      };
+
+      // Listen for exec-js events from LiveView
+      window.addEventListener('phx:exec-js', (e) => {
+        console.log('[ContentEditor] Executing JS:', e.detail.js);
+        try {
+          eval(e.detail.js);
+        } catch (err) {
+          console.error('[ContentEditor] Error executing JS:', err);
+        }
+      });
+
+      // Initialize on DOMContentLoaded
+      if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', initContentEditor);
+      } else {
+        initContentEditor();
+      }
+
+      // Re-initialize after LiveView updates
+      document.addEventListener('phx:page-loading-stop', initContentEditor);
+
       // Track unsaved changes state
       window.editorUnsavedChanges = false;
 
@@ -192,77 +329,114 @@
                 <div>
                   <label class="label">
                     <span class="label-text text-sm font-semibold text-base-content">
-                      {gettext("Featured image file ID")}
+                      {gettext("Featured Image")}
                     </span>
                   </label>
 
-                  <%!-- Media Selector Button --%>
-                  <div class="flex gap-2 mb-2">
+                  <%= if preview_url = featured_image_preview_url(@form["featured_image_id"]) do %>
+                    <%!-- Image Preview with Actions --%>
+                    <div class="space-y-3">
+                      <div class="relative group">
+                        <img
+                          src={preview_url}
+                          alt={
+                            Map.get(@post.metadata, :title) ||
+                              Map.get(@post.metadata, "title") ||
+                              gettext("Featured image")
+                          }
+                          class="w-full rounded-lg border-2 border-base-300 object-cover max-h-56"
+                          loading="lazy"
+                        />
+                        <%!-- Desktop: Hover overlay --%>
+                        <div class="hidden md:flex absolute inset-0 bg-base-content/0 group-hover:bg-base-content/60 transition-all rounded-lg items-center justify-center gap-3 opacity-0 group-hover:opacity-100">
+                          <button
+                            type="button"
+                            phx-click="open_media_selector"
+                            class="btn btn-primary btn-sm shadow-lg"
+                          >
+                            <.icon name="hero-arrow-path" class="w-4 h-4 mr-1" />
+                            {gettext("Change")}
+                          </button>
+                          <button
+                            type="button"
+                            phx-click="clear_featured_image"
+                            class="btn btn-error btn-sm shadow-lg"
+                          >
+                            <.icon name="hero-trash" class="w-4 h-4 mr-1" />
+                            {gettext("Remove")}
+                          </button>
+                        </div>
+                      </div>
+                      <%!-- Mobile: Always visible buttons --%>
+                      <div class="flex md:hidden gap-2">
+                        <button
+                          type="button"
+                          phx-click="open_media_selector"
+                          class="btn btn-primary btn-sm flex-1"
+                        >
+                          <.icon name="hero-arrow-path" class="w-4 h-4 mr-1" />
+                          {gettext("Change")}
+                        </button>
+                        <button
+                          type="button"
+                          phx-click="clear_featured_image"
+                          class="btn btn-error btn-sm flex-1"
+                        >
+                          <.icon name="hero-trash" class="w-4 h-4 mr-1" />
+                          {gettext("Remove")}
+                        </button>
+                      </div>
+                    </div>
+                  <% else %>
+                    <%!-- No Image Selected - Show Upload Area --%>
                     <button
                       type="button"
                       phx-click="open_media_selector"
-                      class="btn btn-primary btn-sm"
+                      class="w-full border-2 border-dashed border-base-300 rounded-lg p-8 hover:border-primary hover:bg-primary/5 transition-all group"
                     >
-                      <.icon name="hero-photo" class="w-4 h-4 mr-1" />
-                      {gettext("Select from Media Library")}
+                      <div class="flex flex-col items-center gap-3 text-base-content/60 group-hover:text-primary transition-colors">
+                        <.icon name="hero-photo" class="w-12 h-12" />
+                        <div class="text-center">
+                          <p class="font-semibold text-sm">
+                            {gettext("Select Featured Image")}
+                          </p>
+                          <p class="text-xs mt-1">
+                            {gettext("Click to choose from media library")}
+                          </p>
+                        </div>
+                      </div>
                     </button>
-                    <%= if @form["featured_image_id"] && @form["featured_image_id"] != "" do %>
-                      <button
-                        type="button"
-                        phx-click="clear_featured_image"
-                        class="btn btn-outline btn-sm"
-                      >
-                        <.icon name="hero-x-mark" class="w-4 h-4 mr-1" />
-                        {gettext("Clear")}
-                      </button>
-                    <% end %>
-                  </div>
+                  <% end %>
 
-                  <%!-- Manual Input (Advanced) --%>
-                  <details class="collapse collapse-arrow bg-base-200">
-                    <summary class="collapse-title text-sm font-medium">
-                      {gettext("Advanced: Enter File ID Manually")}
+                  <%!-- Advanced: Manual ID Entry (Collapsed by default) --%>
+                  <details
+                    class="bg-base-200/50 mt-3 rounded-lg border border-base-300"
+                    open={false}
+                  >
+                    <summary class="cursor-pointer select-none px-3 py-2 rounded-lg hover:bg-base-300/50 transition-colors list-none [&::-webkit-details-marker]:hidden">
+                      <div class="flex items-center gap-2">
+                        <.icon
+                          name="hero-chevron-right"
+                          class="w-3 h-3 transition-transform [[open]>&]:rotate-90"
+                        />
+                        <span class="text-xs font-medium text-base-content/70">
+                          {gettext("Advanced: Manual File ID")}
+                        </span>
+                      </div>
                     </summary>
-                    <div class="collapse-content">
+                    <div class="px-3 pb-3 pt-2">
                       <input
                         type="text"
                         name="featured_image_id"
                         value={@form["featured_image_id"]}
-                        class="input input-bordered w-full font-mono text-sm"
-                        placeholder={gettext("Paste a PhoenixKit Storage file ID")}
+                        class="input input-bordered input-sm w-full font-mono text-xs"
+                        placeholder="018e3c4a-9f6b-7890-abcd-ef1234567890"
                       />
-                      <p class="text-xs text-base-content/60 mt-1">
-                        {gettext("Enter a file ID directly if you know it.")}
+                      <p class="text-xs text-base-content/60 mt-2">
+                        {gettext("Paste a PhoenixKit Storage file ID if you know it.")}
                       </p>
                     </div>
                   </details>
-                  <%= if preview_url = featured_image_preview_url(@form["featured_image_id"]) do %>
-                    <div class="mt-3 space-y-2">
-                      <img
-                        src={preview_url}
-                        alt={@post.metadata.title || gettext("Featured image preview")}
-                        class="w-full rounded-lg border border-base-300 object-cover max-h-48"
-                        loading="lazy"
-                      />
-                      <p class="text-xs text-base-content/60">
-                        {gettext("Clear the field above to remove the featured image.")}
-                      </p>
-                      <p class="text-xs text-success">
-                        {gettext("Valid image ID")}
-                      </p>
-                    </div>
-                  <% else %>
-                    <% trimmed_id = @form["featured_image_id"] |> to_string() |> String.trim() %>
-                    <%= if trimmed_id == "" do %>
-                      <p class="text-xs text-base-content/60 mt-3">
-                        {gettext("No featured image selected.")}
-                      </p>
-                    <% else %>
-                      <p class="text-xs text-error mt-3">
-                        {gettext("Invalid image ID or file not found.")}
-                      </p>
-                    <% end %>
-                  <% end %>
                 </div>
 
                 <div>
@@ -331,9 +505,45 @@
               </div>
             </div>
 
+            <%!-- Component Toolbar --%>
+            <div
+              class="card bg-base-200 border border-base-300"
+              onmousedown="event.preventDefault()"
+            >
+              <div class="card-body p-3">
+                <div class="flex flex-wrap items-center gap-2">
+                  <span class="text-xs font-semibold text-base-content/70 mr-2">
+                    {gettext("Insert Component:")}
+                  </span>
+                  <button
+                    type="button"
+                    phx-click="open_image_component_selector"
+                    class="btn btn-xs btn-outline gap-1"
+                    title={gettext("Insert Image")}
+                    onmousedown="event.preventDefault()"
+                  >
+                    <.icon name="hero-photo" class="w-3 h-3" />
+                    {gettext("Image")}
+                  </button>
+                  <button
+                    type="button"
+                    onclick="window.promptAndInsertVideo()"
+                    class="btn btn-xs btn-outline gap-1"
+                    title={gettext("Insert Video")}
+                    onmousedown="event.preventDefault()"
+                  >
+                    <.icon name="hero-video-camera" class="w-3 h-3" />
+                    {gettext("Video")}
+                  </button>
+                </div>
+              </div>
+            </div>
+
             <.form for={%{}} id="blogging-content" phx-change="update_content" phx-submit="noop">
               <textarea
+                id="content-textarea"
                 name="content"
+                phx-debounce="400"
                 class="textarea textarea-bordered w-full h-[480px] font-mono text-sm leading-6"
               >{@content}</textarea>
             </.form>