diff --git a/assets/svelte/components/ComponentsSidebar.svelte b/assets/svelte/components/ComponentsSidebar.svelte
index c56211c8..8361cca6 100644
--- a/assets/svelte/components/ComponentsSidebar.svelte
+++ b/assets/svelte/components/ComponentsSidebar.svelte
@@ -3,9 +3,11 @@
   import { translate } from '$lib/utils/animations';
   import { currentComponentCategory } from '$lib/stores/currentComponentCategory';
   import { draggedObject } from '$lib/stores/dragAndDrop';
-  import type { ComponentCategory, ComponentDefinition } from '$lib/types';
-  export let components;
+  import type { ComponentCategory, ComponentDefinition, MenuCategory } from '$lib/types';
+  export let components: ComponentDefinition[];
+  export let live;
 
+  let menuCategories: MenuCategory[] = [];
   $: menuCategories = [{
     name: 'Base',
     items: Array.from(new Set(componentDefinitions.map(d => d.category))).map(id => ({ id, name: id }))
diff --git a/assets/svelte/components/PagePreview.svelte b/assets/svelte/components/PagePreview.svelte
index ff99eba6..608756fe 100644
--- a/assets/svelte/components/PagePreview.svelte
+++ b/assets/svelte/components/PagePreview.svelte
@@ -1,42 +1,46 @@
 <script lang="ts">
-  import { Page, AstElement } from "$lib/types"
+  import { Page, AstElement, AstNode } from "$lib/types"
   import LayoutAstNode from './LayoutAstNode.svelte';
   import PageAstNode from './PageAstNode.svelte';
   import BrowserFrame from './BrowserFrame.svelte';
   import { selectedAstElementId } from "$lib/stores/page";
+  import { currentComponentCategory } from "$lib/stores/currentComponentCategory";
+  import { page, slotTargetElement } from "$lib/stores/page";
+  import { draggedObject } from "$lib/stores/dragAndDrop";
 
-  export let page: Page;
+  export let live;
   let isDraggingOver = false;
 
   async function handleDragDrop(e: DragEvent) {
-    // let { target } = e;
-    // $currentComponentCategory = null;
-    // if (!$draggedObject) return;
-    // if ($draggedObject.category === 'basic') {
-    //   if (!(target instanceof HTMLElement)) return;
-    //   if (target.id === 'fake-browser-content') return;
-    //   if (!$slotTargetElement) return;
-    //   if ($slotTargetElement.attrs.selfClose) return;
-    //   addBasicComponentToTarget($slotTargetElement);
-    // } else {
-    //   let { ast }: { ast: AstNode[] } = await renderComponentInPage($draggedObject.id, $page);
-    //   $page.ast = [...$page.ast, ...ast]
-    //   let { data: newPage} = await updatePage();
-    //   $page = newPage; 
-    // }
-    // isDraggingOver = false;
+    let { target } = e;
+    $currentComponentCategory = null;
+    if (!$draggedObject) return;
+    if ($draggedObject.category === 'basic') {
+      if (!(target instanceof HTMLElement)) return;
+      if (target.id === 'fake-browser-content') return;
+      if (!$slotTargetElement) return;
+      if ($slotTargetElement.attrs.selfClose) return;
+      addBasicComponentToTarget($slotTargetElement);
+    } else {
+      debugger;
+      live.pushEvent("render_component_in_page", { component_id: $draggedObject.id, page_id: $page.id }, ({ast}: { ast: AstNode[] }) => {
+        // This appends at the end. We might want at the beginning, or in a specific position
+        live.pushEvent("update_page_ast", { id: $page.id, ast: [...$page.ast, ...ast] });
+      });
+    }
+    isDraggingOver = false;
   }
 
   async function addBasicComponentToTarget(astElement: AstElement) {
-    // if (!$draggedObject) return;
-    // let componentDefinition = $draggedObject;
-    // $draggedObject = null;
-    // let targetNode = astElement;
-    // let { ast }: { ast: AstNode[] } = await renderComponentInPage(componentDefinition.id, $page);
-    // targetNode?.content.push(...ast);
-    // $slotTargetElement = undefined;
-    // let { data: newPage} = await updatePage();
-    // $page = newPage; 
+    if (!$draggedObject) return;
+    let componentDefinition = $draggedObject;
+    $draggedObject = null;
+    let targetNode = astElement;
+    live.pushEvent("render_component_in_page", { component_id: componentDefinition.id, page_id: $page.id }, ({ast}: { ast: AstNode[] }) => {
+      targetNode?.content.push(...ast);
+      $slotTargetElement = undefined;
+      live.pushEvent("update_page_ast", { id: $page.id, ast: $page.ast });
+    });
   }
 
   function dragOver() {
@@ -45,7 +49,7 @@
 </script>
 
 <div class="flex-1 px-8 py-4 flex max-h-full" data-test-id="main">
-  <BrowserFrame page={page}>
+  <BrowserFrame page={$page}>
     <div 
       on:drop|preventDefault={handleDragDrop}
       on:dragover|preventDefault={dragOver}
@@ -54,9 +58,9 @@
       class="bg-white rounded-b-xl relative overflow-hidden flex-1 {isDraggingOver && 'border-dashed border-blue-500 border-2'}" 
       data-test-id="browser-content">
       <div id="page-wrapper" class="p-1 m-1" data-selected={$selectedAstElementId === 'root'}>
-        {#each page.layout.ast as layoutAstNode}
+        {#each $page.layout.ast as layoutAstNode}
           <LayoutAstNode node={layoutAstNode}>
-            {#each page.ast as astNode, index}
+            {#each $page.ast as astNode, index}
               <PageAstNode node={astNode} nodeId="{index}"/>
             {/each}
           </LayoutAstNode>
diff --git a/assets/svelte/components/PropertiesSidebar.svelte b/assets/svelte/components/PropertiesSidebar.svelte
index 3865de33..91f4d9ee 100644
--- a/assets/svelte/components/PropertiesSidebar.svelte
+++ b/assets/svelte/components/PropertiesSidebar.svelte
@@ -2,7 +2,6 @@
 	import Pill from '$lib/components/Pill.svelte';
 	import SidebarSection from '$lib/components/SidebarSection.svelte';
   import { createEventDispatcher } from 'svelte';
-  // import { updatePage } from '$lib/utils/renderer';
 	import { draggedObject } from '$lib/stores/dragAndDrop';
   import { page, selectedAstElement, selectedAstElementId, findAstElement, isAstElement } from '$lib/stores/page';
   import type { AstNode } from '$lib/types';
diff --git a/assets/svelte/components/UiBuilder.svelte b/assets/svelte/components/UiBuilder.svelte
index c0f328b0..7ec8f455 100644
--- a/assets/svelte/components/UiBuilder.svelte
+++ b/assets/svelte/components/UiBuilder.svelte
@@ -21,7 +21,7 @@
 	<ComponentsSidebar {components}/>
 
 	<!-- Main -->
-	<PagePreview {page} />
+	<PagePreview {live} />
 
 	<!-- Right sidebar -->
 	<PropertiesSidebar 
diff --git a/lib/beacon/live_admin/live/page_editor_live/edit.ex b/lib/beacon/live_admin/live/page_editor_live/edit.ex
index d48df036..4634a142 100644
--- a/lib/beacon/live_admin/live/page_editor_live/edit.ex
+++ b/lib/beacon/live_admin/live/page_editor_live/edit.ex
@@ -54,6 +54,18 @@ defmodule Beacon.LiveAdmin.PageEditorLive.Edit do
     {:noreply, assign(socket, visual_mode: false)}
   end
 
+  @impl true
+  def handle_event("render_component_in_page", %{ "component_id" => component_id, "page_id" => page_id }, socket) do
+    page = Content.get_page(socket.assigns.beacon_page.site, page_id)
+    component = Content.get_component(socket.assigns.beacon_page.site, component_id)
+    # path = for segment <- String.split(page.path, "/"), segment != "", do: segment
+    # beacon_live_data = Beacon.DataSource.live_data(page.site, path, [])
+    # {:ok, ast} = Beacon.Template.HEEx.JSONEncoder.encode(component.site, component.body, assigns)
+    # data = Map.put(data(component), :ast, ast)
+    # %{data: data}
+    {:reply, %{ "ast" =>  "sample_data" }, socket}
+  end
+
   def handle_event("update_page_ast", %{ "id" => id, "ast" => ast }, socket) do
     page = Content.get_page(socket.assigns.beacon_page.site, id, preloads: [:layout])