diff --git a/.changeset/petite-months-fold.md b/.changeset/petite-months-fold.md
new file mode 100644
index 0000000000000..b676e155e4bbb
--- /dev/null
+++ b/.changeset/petite-months-fold.md
@@ -0,0 +1,8 @@
+---
+"@gradio/core": minor
+"@self/app": minor
+"@self/spa": minor
+"gradio": minor
+---
+
+feat:Fix reload mode
diff --git a/js/app/src/routes/[...catchall]/+page.svelte b/js/app/src/routes/[...catchall]/+page.svelte
index 2e344e68ad74e..49c9d0aaa0d86 100644
--- a/js/app/src/routes/[...catchall]/+page.svelte
+++ b/js/app/src/routes/[...catchall]/+page.svelte
@@ -265,12 +265,7 @@
 		//@ts-ignore
 		config = data.config;
 		window.gradio_config = config;
-		// api_url =
-		// 	BUILD_MODE === "dev" || gradio_dev_mode === "dev"
-		// 		? `http://localhost:${
-		// 				typeof server_port === "number" ? server_port : 7860
-		// 			}`
-		// 		: host || space || src || location.origin;
+		const api_url = location.origin;
 		window.gradio_config = data.config;
 		config = data.config;
 
@@ -298,7 +293,7 @@
 		if (config.dev_mode) {
 			setTimeout(() => {
 				const { host } = new URL(api_url);
-				let url = new URL(`http://${host}/dev/reload`);
+				let url = new URL(`http://${host}${app.api_prefix}/dev/reload`);
 				stream = new EventSource(url);
 				stream.addEventListener("error", async (e) => {
 					new_message_fn("Error reloading app", "error");
@@ -317,9 +312,16 @@
 						throw new Error("Could not resolve app config");
 					}
 
-					// config = app.config;
+					config = app.config;
 					window.__gradio_space__ = config.space_id;
 					await mount_custom_css(config.css);
+					await add_custom_html_head(config.head);
+					css_ready = true;
+					window.__is_colab__ = config.is_colab;
+					dispatch("loaded");
+					// // config = app.config;
+					// window.__gradio_space__ = config.space_id;
+					// await mount_custom_css(config.css);
 				});
 			}, 200);
 		}
diff --git a/js/core/src/Blocks.svelte b/js/core/src/Blocks.svelte
index b566e784fe1f0..064ef5590fd2b 100644
--- a/js/core/src/Blocks.svelte
+++ b/js/core/src/Blocks.svelte
@@ -719,19 +719,19 @@
 
 <div class="wrap" style:min-height={app_mode ? "100%" : "auto"}>
 	<div class="contain" style:flex-grow={app_mode ? "1" : "auto"}>
-		<!-- {#if $_layout} -->
-		<MountComponents
-			rootNode={$_layout}
-			{root}
-			{target}
-			{theme_mode}
-			on:mount={handle_mount}
-			{version}
-			{autoscroll}
-			{max_file_size}
-			client={app}
-		/>
-		<!-- {/if} -->
+		{#if $_layout && app.config}
+			<MountComponents
+				rootNode={$_layout}
+				{root}
+				{target}
+				{theme_mode}
+				on:mount={handle_mount}
+				{version}
+				{autoscroll}
+				{max_file_size}
+				client={app}
+			/>
+		{/if}
 	</div>
 
 	{#if show_footer}
diff --git a/js/spa/src/Index.svelte b/js/spa/src/Index.svelte
index 4850c612b02a7..fba6e693e30a5 100644
--- a/js/spa/src/Index.svelte
+++ b/js/spa/src/Index.svelte
@@ -334,6 +334,10 @@
 					config = app.config;
 					window.__gradio_space__ = config.space_id;
 					await mount_custom_css(config.css);
+					await add_custom_html_head(config.head);
+					css_ready = true;
+					window.__is_colab__ = config.is_colab;
+					dispatch("loaded");
 				});
 			}, 200);
 		}