diff --git a/.changeset/large-cloths-fall.md b/.changeset/large-cloths-fall.md
new file mode 100644
index 000000000000..b72dda77a06b
--- /dev/null
+++ b/.changeset/large-cloths-fall.md
@@ -0,0 +1,6 @@
+---
+"gradio": minor
+"website": minor
+---
+
+feat:Reorganize Docs Navbar and Fill in Gaps
diff --git a/gradio/exceptions.py b/gradio/exceptions.py
index 738d79424bee..bca214460e8f 100644
--- a/gradio/exceptions.py
+++ b/gradio/exceptions.py
@@ -37,13 +37,20 @@ class ReloadError(ValueError):
 
 InvalidApiName = InvalidApiNameError  # backwards compatibility
 
+set_documentation_group("modals")
+
 
 @document()
 class Error(Exception):
     """
     This class allows you to pass custom error messages to the user. You can do so by raising a gr.Error("custom message") anywhere in the code, and when that line is executed the custom message will appear in a modal on the demo.
-
-    Demos: calculator
+    Example:
+        import gradio as gr
+        def divide(numerator, denominator):
+            if denominator == 0:
+                raise gr.Error("Cannot divide by zero!")
+        gr.Interface(divide, ["number", "number"], "number").launch()
+    Demos: calculator, blocks_chained_events
     """
 
     def __init__(self, message: str = "Error raised."):
diff --git a/gradio/helpers.py b/gradio/helpers.py
index 99a4bdfa5a48..87ddab00bbd0 100644
--- a/gradio/helpers.py
+++ b/gradio/helpers.py
@@ -1116,12 +1116,25 @@ def log_message(message: str, level: Literal["info", "warning"] = "info"):
     blocks._queue.log_message(event_id=event_id, log=message, level=level)
 
 
+set_documentation_group("modals")
+
+
 @document()
 def Warning(message: str = "Warning issued."):  # noqa: N802
     """
-    This function allows you to pass custom warning messages to the user. You can do so simply with `gr.Warning('message here')`, and when that line is executed the custom message will appear in a modal on the demo.
+    This function allows you to pass custom warning messages to the user. You can do so simply with `gr.Warning('message here')`, and when that line is executed the custom message will appear in a modal on the demo. The modal is yellow by default and has the heading: "Warning." Queue must be enabled to use Warning.
+    Demos: blocks_chained_events
     Parameters:
         message: The warning message to be displayed to the user.
+    Example:
+        import gradio as gr
+        def hello_world():
+            gr.Warning('This is a warning message.')
+            return "hello world"
+        with gr.Blocks() as demo:
+            md = gr.Markdown()
+            demo.load(hello_world, inputs=None, outputs=[md])
+        demo.queue().launch()
     """
     log_message(message, level="warning")
 
@@ -1129,7 +1142,18 @@ def Warning(message: str = "Warning issued."):  # noqa: N802
 @document()
 def Info(message: str = "Info issued."):  # noqa: N802
     """
+    This function allows you to pass custom info messages to the user. You can do so simply by writing `gr.Info('message here')` in your function, and when that line is executed the custom message will appear in a (gray, by default) modal on the demo.  Queue must be enabled to use Info.
+    Demos: blocks_chained_events
     Parameters:
         message: The info message to be displayed to the user.
+    Example:
+        import gradio as gr
+        def hello_world():
+            gr.Info('This is some info.')
+            return "hello world"
+        with gr.Blocks() as demo:
+            md = gr.Markdown()
+            demo.load(hello_world, inputs=None, outputs=[md])
+        demo.queue().launch()
     """
     log_message(message, level="info")
diff --git a/js/_website/generate_jsons/src/docs/__init__.py b/js/_website/generate_jsons/src/docs/__init__.py
index dc743c321b38..e2170e3a0ce2 100644
--- a/js/_website/generate_jsons/src/docs/__init__.py
+++ b/js/_website/generate_jsons/src/docs/__init__.py
@@ -149,6 +149,7 @@ def organize_docs(d):
         "building": {},
         "components": {},
         "helpers": {},
+        "modals": {},
         "routes": {},
         "events": {},
         "py-client": {},
@@ -175,7 +176,7 @@ def organize_docs(d):
             if mode == "component":
                 organized["components"][c["name"].lower()] = c
                 pages.append(c["name"].lower())
-            elif mode in ["helpers", "routes", "py-client", "chatinterface"]:
+            elif mode in ["helpers", "routes", "py-client", "chatinterface", "modals"]:
                 organized[mode][c["name"].lower()] = c
                 pages.append(c["name"].lower())
                 
@@ -196,7 +197,7 @@ def organize_docs(d):
             organized["components"][cls]["prev_obj"] = organized["components"][
                 c_keys[len(c_keys) - 2]
             ]["name"]
-            organized["components"][cls]["next_obj"] = "Examples"
+            organized["components"][cls]["next_obj"] = "load"
         else:
             organized["components"][cls]["prev_obj"] = organized["components"][
                 c_keys[i - 1]
@@ -215,7 +216,7 @@ def organize_docs(d):
             organized["helpers"][cls]["prev_obj"] = organized["helpers"][
                 c_keys[len(c_keys) - 2]
             ]["name"]
-            organized["helpers"][cls]["next_obj"] = "Request"
+            organized["helpers"][cls]["next_obj"] = "Error"
         else:
             organized["helpers"][cls]["prev_obj"] = organized["helpers"][c_keys[i - 1]][
                 "name"
@@ -223,10 +224,30 @@ def organize_docs(d):
             organized["helpers"][cls]["next_obj"] = organized["helpers"][c_keys[i + 1]][
                 "name"
             ]
+    c_keys = list(organized["modals"].keys())
+    for i, cls in enumerate(organized["modals"]):
+        if not i:
+            organized["modals"][cls]["prev_obj"] = "EventData"
+            organized["modals"][cls]["next_obj"] = organized["modals"][c_keys[1]][
+                "name"
+            ]
+        elif i == len(c_keys) - 1:
+            organized["modals"][cls]["prev_obj"] = organized["modals"][
+                c_keys[len(c_keys) - 2]
+            ]["name"]
+            organized["modals"][cls]["next_obj"] = "Request"
+        else:
+            organized["modals"][cls]["prev_obj"] = organized["modals"][c_keys[i - 1]][
+                "name"
+            ]
+            organized["modals"][cls]["next_obj"] = organized["modals"][c_keys[i + 1]][
+                "name"
+            ]
+
     c_keys = list(organized["routes"].keys())
     for i, cls in enumerate(organized["routes"]):
         if not i:
-            organized["routes"][cls]["prev_obj"] = "make_waveform"
+            organized["routes"][cls]["prev_obj"] = "Info"
             organized["routes"][cls]["next_obj"] = organized["routes"][c_keys[1]][
                 "name"
             ]
@@ -234,7 +255,7 @@ def organize_docs(d):
             organized["routes"][cls]["prev_obj"] = organized["routes"][
                 c_keys[len(c_keys) - 2]
             ]["name"]
-            organized["routes"][cls]["next_obj"] = "Python-Client"
+            organized["routes"][cls]["next_obj"] = "Flagging"
         else:
             organized["routes"][cls]["prev_obj"] = organized["routes"][c_keys[i - 1]][
                 "name"
@@ -266,6 +287,23 @@ def organize_docs(d):
         organized["chatinterface"][cls]["prev_obj"] = "Block-Layouts"
         organized["chatinterface"][cls]["next_obj"] = "Themes"
 
+    layout_keys = ["row", "column", "tab", "group", "accordion"]
+    for i, cls in enumerate(layout_keys):
+        if not i:
+            organized["building"][cls]["prev_obj"] = "Blocks"
+            organized["building"][cls]["next_obj"] = layout_keys[i+1].capitalize()
+        elif i == len(layout_keys) - 1:
+            organized["building"][cls]["prev_obj"] = layout_keys[i-1].capitalize()
+            organized["building"][cls]["next_obj"] = "Components"
+        else:
+            organized["building"][cls]["prev_obj"] = layout_keys[i-1].capitalize()
+            organized["building"][cls]["next_obj"] = layout_keys[i+1].capitalize()
+
+
+    organized["building"][cls]["prev_obj"]
+    
+
+
     organized["events_matrix"] = component_events
     organized["events"] = events
 
diff --git a/js/_website/src/lib/components/DocsNav.svelte b/js/_website/src/lib/components/DocsNav.svelte
index ba7aae0ce32c..a46dd181c97c 100644
--- a/js/_website/src/lib/components/DocsNav.svelte
+++ b/js/_website/src/lib/components/DocsNav.svelte
@@ -4,6 +4,7 @@
 
 	export let components: any;
 	export let helpers: any;
+	export let modals: any;
 	export let routes: any;
 	export let py_client: any;
 
@@ -105,43 +106,59 @@
 		<DropDown></DropDown>
 	</div>
 
-	<a class="link px-4 my-2 block" href="./">Building Demos</a>
+	<p class="font-semibold px-4 my-2 block">Building Demos</p>
 	<a
 		class:current-nav-link={current_nav_link == "interface"}
 		class="thin-link px-4 block"
 		href="./interface/">Interface</a
 	>
 	<a
-		class:current-nav-link={current_nav_link == "flagging"}
+		class:current-nav-link={current_nav_link == "chatinterface"}
 		class="thin-link px-4 block"
-		href="./flagging/">Flagging</a
+		href="./chatinterface/"
+		>ChatInterface<sup class="text-orange-500">NEW</sup></a
 	>
 	<a
-		class:current-nav-link={current_nav_link == "combining-interfaces"}
+		class:current-nav-link={current_nav_link == "tabbedinterface"}
 		class="thin-link px-4 block"
-		href="./combining-interfaces/">Combining Interfaces</a
+		href="./tabbedinterface/"
+		>TabbedInterface</a
 	>
+	
 	<a
 		class:current-nav-link={current_nav_link == "blocks"}
 		class="thin-link px-4 block"
 		href="./blocks/">Blocks</a
 	>
+
+	<p class="font-semibold px-4 my-2 block">Block Layouts</p>
+
 	<a
-		class:current-nav-link={current_nav_link == "block-layouts"}
+		class:current-nav-link={current_nav_link == "row"}
 		class="thin-link px-4 block"
-		href="./block-layouts/">Block Layouts</a
+		href="./row/">Row</a
 	>
 	<a
-		class:current-nav-link={current_nav_link == "chatinterface"}
+		class:current-nav-link={current_nav_link == "column"}
 		class="thin-link px-4 block"
-		href="./chatinterface/"
-		>ChatInterface<sup class="text-orange-500">NEW</sup></a
+		href="./column/">Column</a
 	>
 	<a
-		class:current-nav-link={current_nav_link == "themes"}
+		class:current-nav-link={current_nav_link == "tab"}
 		class="thin-link px-4 block"
-		href="./themes/">Themes</a
+		href="./tab/">Tab</a
+	>
+	<a
+		class:current-nav-link={current_nav_link == "group"}
+		class="thin-link px-4 block"
+		href="./group/">Group</a
 	>
+	<a
+		class:current-nav-link={current_nav_link == "accordion"}
+		class="thin-link px-4 block"
+		href="./accordion/">Accordion</a
+	>
+
 	<a
 		class:current-nav-link={current_nav_link == "components"}
 		class="link px-4 my-2 block"
@@ -154,7 +171,7 @@
 			href="./{name}/">{obj.name}</a
 		>
 	{/each}
-	<a class="link px-4 my-2 block">Helpers</a>
+	<p class="font-semibold px-4 my-2 block">Helpers</p>
 	{#each Object.entries(helpers) as [name, obj] (name)}
 		<a
 			class:current-nav-link={current_nav_link == name}
@@ -162,7 +179,16 @@
 			href="./{name}/">{obj.name}</a
 		>
 	{/each}
-	<a class="link px-4 my-2 block">Routes</a>
+	<p class="font-semibold px-4 my-2 block">Modals</p>
+	{#each Object.entries(modals) as [name, obj] (name)}
+		<a
+			class:current-nav-link={current_nav_link == name}
+			class="px-4 block thin-link"
+			href="./{name}/">{obj.name}</a
+		>
+	{/each}
+
+	<p class="font-semibold px-4 my-2 block">Routes</p>
 	{#each Object.entries(routes) as [name, obj] (name)}
 		<a
 			class:current-nav-link={current_nav_link == name}
@@ -170,6 +196,20 @@
 			href="./{name}/">{obj.name}</a
 		>
 	{/each}
+
+	<p class="font-semibold px-4 my-2 block">Other</p>
+
+	<a
+		class:current-nav-link={current_nav_link == "flagging"}
+		class="thin-link px-4 block"
+		href="./flagging/">Flagging</a
+	>
+	<a
+		class:current-nav-link={current_nav_link == "themes"}
+		class="thin-link px-4 block"
+		href="./themes/">Themes</a
+	>
+
 	<a
 		class:current-nav-link={current_nav_link == "python-client"}
 		class="link px-4 my-2 block"
diff --git a/js/_website/src/routes/[[version]]/docs/+layout.server.ts b/js/_website/src/routes/[[version]]/docs/+layout.server.ts
index 8d8cc5568817..3e0d105c3661 100644
--- a/js/_website/src/routes/[[version]]/docs/+layout.server.ts
+++ b/js/_website/src/routes/[[version]]/docs/+layout.server.ts
@@ -30,10 +30,11 @@ export async function load({ params, url }) {
 	let docs: { [key: string]: any } = docs_json.docs;
 	let components = docs_json.docs.components;
 	let helpers = docs_json.docs.helpers;
+	let modals = docs_json.docs.modals || [];
 	let routes = docs_json.docs.routes;
 	let py_client = docs_json.docs["py-client"];
 	let js_client = docs_json.js_client;
-	let on_main = params?.version === "main";
+	let on_main = params.version === "main";
 	let wheel: string = WHEEL;
 	let pages: string[] = docs_json.pages;
 
@@ -41,6 +42,7 @@ export async function load({ params, url }) {
 		docs,
 		components,
 		helpers,
+		modals,
 		routes,
 		py_client,
 		js_client,
diff --git a/js/_website/src/routes/[[version]]/docs/[doc]/+page.server.ts b/js/_website/src/routes/[[version]]/docs/[doc]/+page.server.ts
index d6940ef42c79..bcfe132c9c96 100644
--- a/js/_website/src/routes/[[version]]/docs/[doc]/+page.server.ts
+++ b/js/_website/src/routes/[[version]]/docs/[doc]/+page.server.ts
@@ -16,7 +16,7 @@ const COLOR_SETS = [
 ];
 
 export async function load({ params, parent }) {
-	const { docs, components, helpers, py_client, routes, on_main, wheel, pages } = await parent();
+	const { docs, components, helpers, modals, py_client, routes, on_main, wheel, pages } = await parent();
 
 	let name = params.doc;
 	let obj;
@@ -45,10 +45,16 @@ export async function load({ params, parent }) {
 				mode = key;
 
 				if (obj.name == "Interface") {
-					obj.next_obj = "Flagging";
-				} else if (obj.name == "Blocks") {
-					obj.prev_obj = "Combining-Interfaces";
-					obj.next_obj = "Block-Layouts";
+					obj.next_obj = "ChatInterface";
+				} else if (obj.name == "ChatInterface") {
+					obj.prev_obj = "Interface";
+					obj.next_obj = "TabbedInterface";
+				}  else if (obj.name == "TabbedInterface") {
+					obj.prev_obj = "ChatInterface";
+					obj.next_obj = "Blocks";
+				}  else if (obj.name == "Blocks") {
+					obj.prev_obj = "TabbedInterface";
+					obj.next_obj = "Row";
 				}
 
 				if ("description" in obj) {
@@ -115,6 +121,7 @@ export async function load({ params, parent }) {
 		mode,
 		components,
 		helpers,
+		modals,
 		routes,
 		py_client,
 		COLOR_SETS,
diff --git a/js/_website/src/routes/[[version]]/docs/[doc]/+page.svelte b/js/_website/src/routes/[[version]]/docs/[doc]/+page.svelte
index 78edfb2d5b72..a4297cf88133 100644
--- a/js/_website/src/routes/[[version]]/docs/[doc]/+page.svelte
+++ b/js/_website/src/routes/[[version]]/docs/[doc]/+page.svelte
@@ -16,6 +16,7 @@
 	let mode = data.mode;
 	let components = data.components;
 	let helpers = data.helpers;
+	let modals = data.modals;
 	let routes = data.routes;
 	let py_client = data.py_client;
 	let on_main: boolean;
@@ -69,6 +70,11 @@
 	$: obj = data.obj;
 	$: mode = data.mode;
 	$: on_main = data.on_main;
+	$: components = data.components;
+	$: helpers = data.helpers;
+	$: modals = data.modals;
+	$: routes = data.routes;
+	$: py_client = data.py_client;
 </script>
 
 <MetaTags
@@ -86,6 +92,7 @@
 			current_nav_link={obj.name.toLowerCase()}
 			{components}
 			{helpers}
+			{modals}
 			{routes}
 			{py_client}
 		/>
@@ -506,7 +513,7 @@
 				</div>
 			</div>
 
-			<div class="flex justify-between my-4">
+			<div class="lg:ml-10 flex justify-between my-4">
 				{#if obj.prev_obj}
 					<a
 						href="./{obj.prev_obj.toLowerCase()}"
diff --git a/js/_website/src/routes/[[version]]/docs/block-layouts/+page.server.ts b/js/_website/src/routes/[[version]]/docs/block-layouts/+page.server.ts
deleted file mode 100644
index 724183258be6..000000000000
--- a/js/_website/src/routes/[[version]]/docs/block-layouts/+page.server.ts
+++ /dev/null
@@ -1,93 +0,0 @@
-import Prism from "prismjs";
-import "prismjs/components/prism-python";
-import { make_slug_processor } from "$lib/utils";
-
-let language = "python";
-
-const COLOR_SETS = [
-	["from-green-100", "to-green-50"],
-	["from-yellow-100", "to-yellow-50"],
-	["from-red-100", "to-red-50"],
-	["from-blue-100", "to-blue-50"],
-	["from-pink-100", "to-pink-50"],
-	["from-purple-100", "to-purple-50"]
-];
-
-export async function load({ parent }) {
-	const { docs, components, helpers, py_client, routes, on_main, wheel } = await parent();
-	let objs = [
-		docs.building.row,
-		docs.building.column,
-		docs.building.tab,
-		docs.building.group,
-		docs.building.accordion
-	];
-
-	let headers = [
-		["Row", "row"],
-		["Column", "column"],
-		["Tab", "tab"],
-		["Group", "group"],
-		["Accordion", "accordion"]
-	];
-
-	let method_headers: string[][] = [];
-	const get_slug = make_slug_processor();
-
-	for (let obj of objs) {
-		if (obj.name) {
-			obj.slug = get_slug(obj.name);
-		}
-
-		if (obj.fns && obj.fns.length) {
-			obj.fns.forEach((fn: any) => {
-				if (fn.name) fn.slug = get_slug(`${obj.name} ${fn.name}`);
-			});
-		}
-
-		if ("demos" in obj) {
-			obj.demos.forEach((demo: string[]) => {
-				demo.push(
-					Prism.highlight(demo[1], Prism.languages[language], "python")
-				);
-			});
-		}
-		if (obj.example) {
-			obj.highlighted_example = Prism.highlight(
-				obj.example,
-				Prism.languages[language],
-				"python"
-			);
-		}
-
-		if ("fns" in obj && obj.fns.length > 0) {
-			for (const fn of obj.fns) {
-				if (fn.example) {
-					fn.highlighted_example = Prism.highlight(
-						fn.example,
-						Prism.languages[language],
-						"python"
-					);
-				}
-			}
-		}
-	}
-	let mode = "block-layouts";
-
-	let description = `Customize the layout of your Blocks UI with the layout classes below.`;
-
-	return {
-		objs,
-		mode,
-		description,
-		components,
-		helpers,
-		routes,
-		py_client,
-		COLOR_SETS,
-		headers,
-		method_headers,
-		on_main,
-		wheel
-	};
-}
diff --git a/js/_website/src/routes/[[version]]/docs/block-layouts/+page.svelte b/js/_website/src/routes/[[version]]/docs/block-layouts/+page.svelte
deleted file mode 100644
index 0afb61fe8c53..000000000000
--- a/js/_website/src/routes/[[version]]/docs/block-layouts/+page.svelte
+++ /dev/null
@@ -1,528 +0,0 @@
-<script lang="ts">
-	import Demos from "$lib/components/Demos.svelte";
-	import DocsNav from "$lib/components/DocsNav.svelte";
-	import FunctionDoc from "$lib/components/FunctionDoc.svelte";
-	import MetaTags from "$lib/components/MetaTags.svelte";
-	import anchor from "$lib/assets/img/anchor.svg";
-	import { onDestroy } from "svelte";
-	import { page } from "$app/stores";
-	import { svgCopy, svgCheck } from "$lib/assets/copy.js";
-
-	export let data: any;
-
-	let objs = data.objs;
-	let mode = data.mode;
-	let description = data.description;
-	let components = data.components;
-	let helpers = data.helpers;
-	let routes = data.routes;
-	let headers = data.headers;
-	let method_headers = data.method_headers;
-	let py_client = data.py_client;
-
-	let current_selection = 0;
-	function handleAnchorClick(event: MouseEvent) {
-		event.preventDefault();
-		const link = event.currentTarget as HTMLAnchorElement;
-		const anchorId = new URL(link?.href).hash.replace("#", "");
-		const anchor = document.getElementById(anchorId);
-		window.scrollTo({
-			top: anchor?.offsetTop,
-			behavior: "smooth"
-		});
-	}
-
-	let y: number;
-	let header_targets: { [key: string]: HTMLElement } = {};
-	let target_elem;
-
-	onDestroy(() => {
-		header_targets = {};
-	});
-
-	$: for (const target in header_targets) {
-		target_elem = document.querySelector(`#${target}`) as HTMLElement;
-		if (
-			y > target_elem?.offsetTop - 50 &&
-			y < target_elem?.offsetTop + target_elem?.offsetHeight
-		) {
-			header_targets[target]?.classList.add("current-nav-link");
-		} else {
-			header_targets[target]?.classList.remove("current-nav-link");
-		}
-	}
-
-	let on_main: boolean;
-	let wheel: string = data.wheel;
-
-	let copied = false;
-	function copy(code: string) {
-		navigator.clipboard.writeText(code);
-		copied = true;
-		setTimeout(() => (copied = false), 2000);
-	}
-
-	$: on_main = data.on_main;
-</script>
-
-<MetaTags
-	title={"Gradio Block Layouts Docs"}
-	url={$page.url.pathname}
-	canonical={$page.url.pathname}
-	{description}
-/>
-
-<svelte:window bind:scrollY={y} />
-
-<main class="container mx-auto px-4 flex gap-4">
-	<div class="flex w-full">
-		<DocsNav
-			current_nav_link={"block-layouts"}
-			{components}
-			{helpers}
-			{routes}
-			{py_client}
-		/>
-
-		<div class="flex flex-col w-full min-w-full lg:w-8/12 lg:min-w-0">
-			<div>
-				<p
-					class="lg:ml-10 bg-gradient-to-r from-orange-100 to-orange-50 border border-orange-200 px-4 py-1 mr-2 rounded-full text-orange-800 mb-1 w-fit float-left"
-				>
-					New to Gradio? Start here: <a class="link" href="/quickstart"
-						>Getting Started</a
-					>
-				</p>
-				<p
-					class="bg-gradient-to-r from-green-100 to-green-50 border border-green-200 px-4 py-1 rounded-full text-green-800 mb-1 w-fit float-left sm:float-right"
-				>
-					See the <a class="link" href="/changelog">Release History</a>
-				</p>
-			</div>
-			
-			{#if on_main}
-				<div class="codeblock bg-gray-100 border border-gray-200 text-gray-800 px-3 py-1 mt-4  rounded-lg lg:ml-10">
-					<p class="my-2">
-						To install Gradio from main, run the following command:
-					</p>
-					<button class="clipboard-button" type="button" on:click={() => copy("pip install " + wheel)}>
-						{#if !copied}
-							{@html svgCopy}
-						{:else}
-							{@html svgCheck}
-						{/if}
-					</button>
-						<pre class="language-bash" style="padding-right: 25px;"><code class="language-bash text-xs">pip install {wheel}</code></pre>
-						<p class="float-right text-sm">
-							*Note: Setting <code style="font-size: 0.85rem">share=True</code> in <code style="font-size: 0.85rem">launch()</code> will not work. 
-						</p>
-					</div>
-			{/if}
-
-			<div class="flex justify-between mt-4 lg:ml-10">
-				<a
-					href="./blocks"
-					class="text-left px-4 py-1 bg-gray-50 rounded-full hover:underline"
-				>
-					<div class="text-lg">
-						<span class="text-orange-500">&#8592;</span> Blocks
-					</div>
-				</a>
-				<a
-					href="./chatinterface"
-					class="text-right px-4 py-1 bg-gray-50 rounded-full hover:underline"
-				>
-					<div class="text-lg">
-						ChatInterface <span class="text-orange-500">&#8594;</span>
-					</div>
-				</a>
-			</div>
-
-			<div class="flex flex-row">
-				<div class="lg:ml-10">
-					<div class="obj" id="block-layouts" />
-
-					<div class="flex flex-row items-center justify-between">
-						<h3
-							id="block-layouts-header"
-							class="group text-3xl font-light pt-4"
-						>
-							Block Layouts
-							<a
-								href="#block-layouts-header"
-								class="invisible group-hover-visible"
-								on:click={handleAnchorClick}
-								><img class="anchor-img" src={anchor} /></a
-							>
-						</h3>
-					</div>
-
-					<div id="description">
-						<h4 class="mt-4 text-xl text-orange-500 font-light group">
-							Description
-							<a
-								href="#description"
-								class="invisible group-hover-visible"
-								on:click={handleAnchorClick}
-								><img class="anchor-img-small" src={anchor} /></a
-							>
-						</h4>
-						<p class="mb-2 text-lg text-gray-600">{@html description}</p>
-					</div>
-
-					{#each objs as obj}
-						<div class="obj" id={obj.slug}>
-							<div class="flex flex-row items-center justify-between">
-								<h3 id={obj.slug} class="group text-3xl font-light py-4">
-									{obj.name}
-									<a
-										href="#{obj.slug}"
-										class="invisible group-hover-visible"
-										on:click={handleAnchorClick}
-										><img class="anchor-img" src={anchor} /></a
-									>
-								</h3>
-							</div>
-
-							{#if obj.override_signature}
-								<div class="codeblock bg-gray-50 mx-auto p-3">
-									<pre><code class="code language-python"
-											>{obj.override_signature}</code
-										></pre>
-								</div>
-							{:else}
-								<div class="codeblock bg-gray-50 mx-auto p-3">
-									<pre><code class="code language-python"
-											>{obj.parent}.<span>{obj.name}&lpar;</span
-											><!--
-                    -->{#each obj.parameters as param}<!--
-                    -->{#if !("kwargs" in param) && !("default" in param) && param.name != "self"}<!--
-                        -->{param.name}, <!--
-                    -->{/if}<!--
-                    -->{/each}<!--  
-                    -->···<span
-												>&rpar;</span
-											></code
-										></pre>
-								</div>
-							{/if}
-
-							{#if mode === "components"}
-								<div class="embedded-component">
-									{#key obj.name}
-										<gradio-app
-											space={"gradio/" +
-												obj.name.toLowerCase() +
-												"_component_main"}
-										/>
-									{/key}
-								</div>
-							{/if}
-
-							<h4
-								class="mt-8 text-xl text-orange-500 font-light group"
-								id="{obj.name}-description"
-							>
-								Description
-								<a
-									href="#{obj.name}-description"
-									class="invisible group-hover-visible"
-									on:click={handleAnchorClick}
-									><img class="anchor-img-small" src={anchor} /></a
-								>
-							</h4>
-							<p class="mb-2 text-lg text-gray-600">{@html obj.description}</p>
-
-							{#if mode === "components"}
-								<p class="mb-2 text-lg text-gray-500">
-									<span class="text-orange-500">As input: </span>
-									{@html obj.preprocessing}
-								</p>
-								<p class="mb-2 text-lg text-gray-500">
-									<span class="text-orange-500">As output:</span>
-									{@html obj.postprocessing}
-								</p>
-								{#if obj.examples_format}
-									<p class="mb-2 text-lg text-gray-500">
-										<span class="text-orange-500"
-											>Format expected for examples:</span
-										>
-										{@html obj.examples_format}}
-									</p>
-								{/if}
-								{#if obj.events && obj.events.length > 0}
-									<p class="text-lg text-gray-500">
-										<span class="text-orange-500">Supported events:</span>
-										<em>{@html obj.events}</em>
-									</p>
-								{/if}
-							{/if}
-
-							{#if obj.example}
-								<h4
-									class="mt-4 text-xl text-orange-500 font-light group"
-									id="{obj.name}-example-usage"
-								>
-									Example Usage
-									<a
-										href="#{obj.name}-example-usage"
-										class="invisible group-hover-visible"
-										on:click={handleAnchorClick}
-										><img class="anchor-img-small" src={anchor} /></a
-									>
-								</h4>
-								<div class="codeblock bg-gray-50 mx-auto p-3 mt-2">
-									<pre><code class="code language-python"
-											>{@html obj.highlighted_example}</code
-										></pre>
-								</div>
-							{/if}
-
-							{#if (obj.parameters.length > 0 && obj.parameters[0].name != "self") || obj.parameters.length > 1}
-								<h4
-									class="mt-6 text-xl text-orange-500 font-light group"
-									id="{obj.name}-initialization"
-								>
-									Initialization
-									<a
-										href="#{obj.name}-initialization"
-										class="invisible group-hover-visible"
-										on:click={handleAnchorClick}
-										><img class="anchor-img-small" src={anchor} /></a
-									>
-								</h4>
-								<table class="table-fixed w-full leading-loose">
-									<thead class="text-left">
-										<tr>
-											<th class="px-3 pb-3 font-semibold w-2/5">Parameter</th>
-											<th class="px-3 pb-3 font-semibold">Description</th>
-										</tr>
-									</thead>
-									<tbody
-										class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y"
-									>
-										{#each obj.parameters as param}
-											{#if param["name"] != "self"}
-												<tr
-													class="group hover:bg-gray-200/60 odd:bg-gray-100/80"
-												>
-													<td class="p-3 w-2/5 break-words">
-														<code class="block">
-															{param["name"]}
-														</code>
-														<p class="text-gray-500 italic">
-															{param["annotation"]}
-														</p>
-														{#if "default" in param}
-															<p class="text-gray-500 font-semibold">
-																default: {param["default"]}
-															</p>
-														{:else if !("kwargs" in param)}
-															<p class="text-orange-600 font-semibold italic">
-																required
-															</p>
-														{/if}
-													</td>
-													<td class="p-3 text-gray-700 break-words">
-														<p>{param["doc"] || ""}</p>
-													</td>
-												</tr>
-											{/if}
-										{/each}
-									</tbody>
-								</table>
-							{/if}
-
-							{#if mode === "components" && obj.string_shortcuts}
-								<table class="mb-4 table-fixed w-full mt-6">
-									<thead class="text-left">
-										<tr>
-											<th class="p-3 font-semibold w-2/5">Class</th>
-											<th class="p-3 font-semibold"
-												>Interface String Shortcut</th
-											>
-											<th class="p-3 font-semibold">Initialization</th>
-										</tr>
-									</thead>
-									<tbody
-										class="text-left divide-y rounded-lg bg-gray-50 border border-gray-100 overflow-hidden"
-									>
-										{#each obj.string_shortcuts as shortcut}
-											<tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
-												<td class="p-3 w-2/5 break-words">
-													<p>
-														<code class="lang-python">gradio.{shortcut[0]}</code
-														>
-													</p>
-												</td>
-												<td class="p-3 w-2/5 break-words">
-													<p>"{shortcut[1]}"</p>
-												</td>
-												<td class="p-3 text-gray-700 break-words">
-													{shortcut[2]}
-												</td>
-											</tr>
-										{/each}
-									</tbody>
-								</table>
-							{/if}
-
-							{#if obj.fns && obj.fns.length > 0}
-								<h4 class="mt-4 p-3 font-semibold">Methods</h4>
-								<div class="flex flex-col gap-8 pl-12">
-									{#each obj.fns as fn}
-										<FunctionDoc {fn} />
-									{/each}
-									<div class="ml-12" />
-								</div>
-							{/if}
-
-							{#if obj.guides && obj.guides.length > 0}
-								<div id="guides">
-									<h4 class="mt-4 p-3 text-xl text-orange-500 font-light group">
-										Guides
-										<a
-											href="#guides"
-											class="invisible group-hover-visible"
-											on:click={handleAnchorClick}
-											><img class="anchor-img-small" src={anchor} /></a
-										>
-									</h4>
-
-									<div
-										class="guides-list grid grid-cols-1 lg:grid-cols-4 gap-4 pb-3 px-3"
-									>
-										{#each obj.guides as guide, i}
-											<a
-												class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow bg-gradient-to-r {data
-													.COLOR_SETS[i][0]} {data.COLOR_SETS[i][1]}"
-												target="_blank"
-												href={guide.url}
-											>
-												<div class="flex flex-col p-4 h-min">
-													<p class="group-hover:underline text-l">
-														{guide.pretty_name}
-													</p>
-												</div>
-											</a>
-										{/each}
-									</div>
-								</div>
-							{/if}
-
-							{#if obj.demos}
-								<div id="examples">
-									<div class="category my-8" id="examples">
-										<h2
-											class="group mb-4 text-2xl font-thin block"
-											id="{obj.name}-examples"
-										>
-											✨ {obj.name} Examples
-											<a
-												href="#{obj.name}-examples"
-												class="invisible group-hover-visible"
-												on:click={handleAnchorClick}
-												><img class="anchor-img" src={anchor} /></a
-											>
-										</h2>
-										<div>
-											<div
-												class="demo-window overflow-y-auto h-full w-full my-4"
-											>
-												<div
-													class="relative mx-auto my-auto rounded-md bg-white"
-													style="top: 5%; height: 90%"
-												>
-													<div class="flex overflow-auto pt-4">
-														{#each obj.demos as demo, i}
-															<button
-																on:click={() => (current_selection = i)}
-																class:selected-demo-tab={current_selection == i}
-																class="demo-btn px-4 py-2 text-lg min-w-max text-gray-600 hover:text-orange-500"
-																name={demo[0]}>{demo[0]}</button
-															>
-														{/each}
-													</div>
-													{#each obj.demos as demo, i}
-														<div
-															class:hidden={current_selection !== i}
-															class:selected-demo-window={current_selection ==
-																i}
-															class="demo-content px-4"
-														>
-															<Demos
-																name={demo[0]}
-																code={demo[1]}
-																highlighted_code={demo[2]}
-																on_main={on_main}
-															/>
-														</div>
-													{/each}
-												</div>
-											</div>
-										</div>
-									</div>
-								</div>
-							{/if}
-						</div>
-					{/each}
-				</div>
-			</div>
-
-			<div class="flex justify-between my-4">
-				<a
-					href="./blocks"
-					class="text-left px-4 py-1 bg-gray-50 rounded-full hover:underline"
-				>
-					<div class="text-lg">
-						<span class="text-orange-500">&#8592;</span> Blocks
-					</div>
-				</a>
-				<a
-					href="./chatinterface"
-					class="text-right px-4 py-1 bg-gray-50 rounded-full hover:underline"
-				>
-					<div class="text-lg">
-						ChatInterface <span class="text-orange-500">&#8594;</span>
-					</div>
-				</a>
-			</div>
-		</div>
-		<div
-			class="float-right top-8 hidden sticky h-screen overflow-y-auto lg:w-2/12 lg:block"
-		>
-			<div class="px-8">
-				<a
-					class="thin-link py-2 block text-lg"
-					href="#block-layouts"
-					on:click={handleAnchorClick}>Block Layouts</a
-				>
-				{#if headers.length > 0}
-					<ul class="text-slate-700 text-lg leading-6">
-						{#each headers as header}
-							<li>
-								<a
-									bind:this={header_targets[header[1]]}
-									href="#{header[1]}"
-									class="thin-link block py-2 font-light second-nav-link"
-									on:click={handleAnchorClick}>{header[0]}</a
-								>
-							</li>
-						{/each}
-						{#if method_headers.length > 0}
-							{#each method_headers as method_header}
-								<li class="ml-4">
-									<a
-										href="#{method_header[1]}"
-										class="thin-link block py-2 font-light second-nav-link"
-										on:click={handleAnchorClick}>{method_header[0]}</a
-									>
-								</li>
-							{/each}
-						{/if}
-					</ul>
-				{/if}
-			</div>
-		</div>
-	</div>
-</main>
diff --git a/js/_website/src/routes/[[version]]/docs/combining-interfaces/+page.server.ts b/js/_website/src/routes/[[version]]/docs/combining-interfaces/+page.server.ts
deleted file mode 100644
index e6a3cf3a616c..000000000000
--- a/js/_website/src/routes/[[version]]/docs/combining-interfaces/+page.server.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-import Prism from "prismjs";
-import "prismjs/components/prism-python";
-import { make_slug_processor } from "$lib/utils";
-
-let language = "python";
-
-const COLOR_SETS = [
-	["from-green-100", "to-green-50"],
-	["from-yellow-100", "to-yellow-50"],
-	["from-red-100", "to-red-50"],
-	["from-blue-100", "to-blue-50"],
-	["from-pink-100", "to-pink-50"],
-	["from-purple-100", "to-purple-50"]
-];
-
-export async function load({ parent }) {
-	const { docs, components, helpers, py_client, routes, on_main, wheel } = await parent();
-
-	let objs = [
-		docs.building.tabbedinterface,
-		docs.building.parallel,
-		docs.building.series
-	];
-	let headers = [
-		["Tabbed Interface", "tabbed-interface"],
-		["Parallel", "parallel"],
-		["Series", "series"]
-	];
-	let method_headers: string[][] = [];
-	const get_slug = make_slug_processor();
-
-	for (let obj of objs) {
-		if (obj.name) {
-			obj.slug = get_slug(obj.name);
-		}
-
-		if (obj.fns && obj.fns.length) {
-			obj.fns.forEach((fn: any) => {
-				if (fn.name) fn.slug = get_slug(`${obj.name} ${fn.name}`);
-			});
-		}
-
-		if ("demos" in obj) {
-			obj.demos.forEach((demo: string[]) => {
-				demo.push(
-					Prism.highlight(demo[1], Prism.languages[language], "python")
-				);
-			});
-		}
-		if (obj.example) {
-			obj.highlighted_example = Prism.highlight(
-				obj.example,
-				Prism.languages[language],
-				"python"
-			);
-		}
-
-		if ("fns" in obj && obj.fns.length > 0) {
-			for (const fn of obj.fns) {
-				if (fn.example) {
-					fn.highlighted_example = Prism.highlight(
-						fn.example,
-						Prism.languages[language],
-						"python"
-					);
-				}
-			}
-		}
-	}
-	let mode = "combining-interfaces";
-
-	let description = `Once you have created several Interfaces, we provide several classes that let you start combining them together. For example, you can chain them in <em>Series</em> or compare their outputs in <em>Parallel</em> if the inputs and outputs match accordingly. You can also display arbitrary Interfaces together in a tabbed layout using <em>TabbedInterface</em>.`;
-
-	return {
-		objs,
-		mode,
-		description,
-		components,
-		helpers,
-		routes,
-		py_client,
-		COLOR_SETS,
-		headers,
-		method_headers,
-		on_main,
-		wheel
-	};
-}
diff --git a/js/_website/src/routes/[[version]]/docs/combining-interfaces/+page.svelte b/js/_website/src/routes/[[version]]/docs/combining-interfaces/+page.svelte
deleted file mode 100644
index 0cbad2d7a90e..000000000000
--- a/js/_website/src/routes/[[version]]/docs/combining-interfaces/+page.svelte
+++ /dev/null
@@ -1,528 +0,0 @@
-<script lang="ts">
-	import Demos from "$lib/components/Demos.svelte";
-	import DocsNav from "$lib/components/DocsNav.svelte";
-	import FunctionDoc from "$lib/components/FunctionDoc.svelte";
-	import MetaTags from "$lib/components/MetaTags.svelte";
-	import anchor from "$lib/assets/img/anchor.svg";
-	import { onDestroy } from "svelte";
-	import { page } from "$app/stores";
-	import { svgCopy, svgCheck } from "$lib/assets/copy.js";
-
-
-	export let data: any = {};
-
-	let objs = data.objs;
-	let mode = data.mode;
-	let description = data.description;
-	let components = data.components;
-	let helpers = data.helpers;
-	let routes = data.routes;
-	let headers = data.headers;
-	let method_headers = data.method_headers;
-	let py_client = data.py_client;
-
-	let current_selection = 0;
-	function handleAnchorClick(event: MouseEvent) {
-		event.preventDefault();
-		const link = event.currentTarget as HTMLAnchorElement;
-		const anchorId = new URL(link.href).hash.replace("#", "");
-		const anchor = document.getElementById(anchorId);
-		window.scrollTo({
-			top: anchor?.offsetTop,
-			behavior: "smooth"
-		});
-	}
-
-	let y: number;
-	let header_targets: { [key: string]: HTMLElement } = {};
-	let target_elem: HTMLElement;
-
-	onDestroy(() => {
-		header_targets = {};
-	});
-
-	$: for (const target in header_targets) {
-		target_elem = document.querySelector(`#${target}`) as HTMLElement;
-		if (
-			y > target_elem?.offsetTop - 50 &&
-			y < target_elem?.offsetTop + target_elem?.offsetHeight
-		) {
-			header_targets[target]?.classList.add("current-nav-link");
-		} else {
-			header_targets[target]?.classList.remove("current-nav-link");
-		}
-	}
-
-	let on_main: boolean;
-	let wheel: string = data.wheel;
-
-	let copied = false;
-	function copy(code: string) {
-		navigator.clipboard.writeText(code);
-		copied = true;
-		setTimeout(() => (copied = false), 2000);
-	}
-
-	$: on_main = data.on_main;
-</script>
-
-<MetaTags
-	title={"Gradio Combining Interfaces Docs"}
-	url={$page.url.pathname}
-	canonical={$page.url.pathname}
-	{description}
-/>
-<svelte:window bind:scrollY={y} />
-
-<main class="container mx-auto px-4 flex gap-4">
-	<div class="flex w-full">
-		<DocsNav
-			current_nav_link={"combining-interfaces"}
-			{components}
-			{helpers}
-			{routes}
-			{py_client}
-		/>
-
-		<div class="flex flex-col w-full min-w-full lg:w-8/12 lg:min-w-0">
-			<div>
-				<p
-					class="lg:ml-10 bg-gradient-to-r from-orange-100 to-orange-50 border border-orange-200 px-4 py-1 mr-2 rounded-full text-orange-800 mb-1 w-fit float-left"
-				>
-					New to Gradio? Start here: <a class="link" href="/quickstart"
-						>Getting Started</a
-					>
-				</p>
-				<p
-					class="bg-gradient-to-r from-green-100 to-green-50 border border-green-200 px-4 py-1 rounded-full text-green-800 mb-1 w-fit float-left sm:float-right"
-				>
-					See the <a class="link" href="/changelog">Release History</a>
-				</p>
-			</div>
-
-			{#if on_main}
-				<div class="codeblock bg-gray-100 border border-gray-200 text-gray-800 px-3 py-1 mt-4  rounded-lg lg:ml-10">
-					<p class="my-2">
-						To install Gradio from main, run the following command:
-					</p>
-					<button class="clipboard-button" type="button" on:click={() => copy("pip install " + wheel)}>
-						{#if !copied}
-							{@html svgCopy}
-						{:else}
-							{@html svgCheck}
-						{/if}
-					</button>
-						<pre class="language-bash" style="padding-right: 25px;"><code class="language-bash text-xs">pip install {wheel}</code></pre>
-						<p class="float-right text-sm">
-							*Note: Setting <code style="font-size: 0.85rem">share=True</code> in <code style="font-size: 0.85rem">launch()</code> will not work. 
-						</p>
-					</div>
-			{/if}
-
-			<div class="lg:ml-10 flex justify-between mt-4">
-				<a
-					href="./flagging"
-					class="text-left px-4 py-1 bg-gray-50 rounded-full hover:underline"
-				>
-					<div class="text-lg">
-						<span class="text-orange-500">&#8592;</span> Flagging
-					</div>
-				</a>
-				<a
-					href="./blocks"
-					class="text-right px-4 py-1 bg-gray-50 rounded-full hover:underline"
-				>
-					<div class="text-lg">
-						Blocks <span class="text-orange-500">&#8594;</span>
-					</div>
-				</a>
-			</div>
-
-			<div class="flex flex-row">
-				<div class=" lg:ml-10">
-					<div class="obj" id="combining-interfaces">
-						<div class="flex flex-row items-center justify-between">
-							<h3
-								id="combining-interfaces-header"
-								class="group text-3xl font-light pt-4"
-							>
-								Combining Interfaces
-								<a
-									href="#combining-interfaces"
-									class="invisible group-hover-visible"
-									on:click={handleAnchorClick}
-									><img class="anchor-img" src={anchor} /></a
-								>
-							</h3>
-						</div>
-						<div id="description">
-							<h4
-								class="mt-2 text-xl text-orange-500 font-light group"
-								id="description"
-							>
-								Description
-								<a
-									href="#description"
-									class="invisible group-hover-visible"
-									on:click={handleAnchorClick}
-									><img class="anchor-img-small" src={anchor} /></a
-								>
-							</h4>
-							<p class="mb-2 text-lg text-gray-600">{@html description}</p>
-						</div>
-					</div>
-
-					{#each objs as obj}
-						<div class="obj" id={obj.slug}>
-							<div class="flex flex-row items-center justify-between">
-								<h3
-									id="{obj.slug}-header"
-									class="group text-3xl font-light py-4"
-								>
-									{obj.name}
-									<a
-										href="#{obj.slug}-header"
-										class="invisible group-hover-visible"
-										on:click={handleAnchorClick}
-										><img class="anchor-img" src={anchor} /></a
-									>
-								</h3>
-							</div>
-
-							{#if obj.override_signature}
-								<div class="codeblock bg-gray-50 mx-auto p-3">
-									<pre><code class="code language-python"
-											>{obj.override_signature}</code
-										></pre>
-								</div>
-							{:else}
-								<div class="codeblock bg-gray-50 mx-auto p-3">
-									<pre><code class="code language-python"
-											>{obj.parent}.<span>{obj.name}&lpar;</span
-											><!--
-                    -->{#each obj.parameters as param}<!--
-                    -->{#if !("kwargs" in param) && !("default" in param) && param.name != "self"}<!--
-                        -->{param.name}, <!--
-                    -->{/if}<!--
-                    -->{/each}<!--  
-                    -->···<span
-												>&rpar;</span
-											></code
-										></pre>
-								</div>
-							{/if}
-
-							{#if mode === "components"}
-								<div class="embedded-component">
-									{#key obj.name}
-										<gradio-app
-											space={"gradio/" +
-												obj.name.toLowerCase() +
-												"_component_main"}
-										/>
-									{/key}
-								</div>
-							{/if}
-
-							<h4
-								class="mt-8 text-xl text-orange-500 font-light group"
-								id="{obj.name}-description"
-							>
-								Description
-								<a
-									href="#{obj.name}-description"
-									class="invisible group-hover-visible"
-									on:click={handleAnchorClick}
-									><img class="anchor-img-small" src={anchor} /></a
-								>
-							</h4>
-							<p class="mb-2 text-lg text-gray-600">{@html obj.description}</p>
-
-							{#if mode === "components"}
-								<p class="mb-2 text-lg text-gray-500">
-									<span class="text-orange-500">As input: </span>
-									{@html obj.preprocessing}
-								</p>
-								<p class="mb-2 text-lg text-gray-500">
-									<span class="text-orange-500">As output:</span>
-									{@html obj.postprocessing}
-								</p>
-								{#if obj.examples_format}
-									<p class="mb-2 text-lg text-gray-500">
-										<span class="text-orange-500"
-											>Format expected for examples:</span
-										>
-										{@html obj.examples_format}}
-									</p>
-								{/if}
-								{#if obj.events && obj.events.length > 0}
-									<p class="text-lg text-gray-500">
-										<span class="text-orange-500">Supported events:</span>
-										<em>{@html obj.events}</em>
-									</p>
-								{/if}
-							{/if}
-
-							{#if obj.example}
-								<h4
-									class="mt-4 text-xl text-orange-500 font-light group"
-									id="{obj.name}-example-usage"
-								>
-									Example Usage
-									<a
-										href="#{obj.name}-example-usage"
-										class="invisible group-hover-visible"
-										on:click={handleAnchorClick}
-										><img class="anchor-img-small" src={anchor} /></a
-									>
-								</h4>
-								<div class="codeblock bg-gray-50 mx-auto p-3 mt-2">
-									<pre><code class="code language-python"
-											>{@html obj.highlighted_example}</code
-										></pre>
-								</div>
-							{/if}
-
-							{#if (obj.parameters.length > 0 && obj.parameters[0].name != "self") || obj.parameters.length > 1}
-								<h4
-									class="mt-6 text-xl text-orange-500 font-light group"
-									id="{obj.name}-initialization"
-								>
-									Initialization
-									<a
-										href="#{obj.name}-initialization"
-										class="invisible group-hover-visible"
-										on:click={handleAnchorClick}
-										><img class="anchor-img-small" src={anchor} /></a
-									>
-								</h4>
-								<table class="table-fixed w-full leading-loose">
-									<thead class="text-left">
-										<tr>
-											<th class="px-3 pb-3 font-semibold w-2/5">Parameter</th>
-											<th class="px-3 pb-3 font-semibold">Description</th>
-										</tr>
-									</thead>
-									<tbody
-										class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y"
-									>
-										{#each obj.parameters as param}
-											{#if param["name"] != "self"}
-												<tr
-													class="group hover:bg-gray-200/60 odd:bg-gray-100/80"
-												>
-													<td class="p-3 w-2/5 break-words">
-														<code class="block">
-															{param["name"]}
-														</code>
-														<p class="text-gray-500 italic">
-															{param["annotation"]}
-														</p>
-														{#if "default" in param}
-															<p class="text-gray-500 font-semibold">
-																default: {param["default"]}
-															</p>
-														{:else if !("kwargs" in param)}
-															<p class="text-orange-600 font-semibold italic">
-																required
-															</p>
-														{/if}
-													</td>
-													<td class="p-3 text-gray-700 break-words">
-														<p>{param["doc"] || ""}</p>
-													</td>
-												</tr>
-											{/if}
-										{/each}
-									</tbody>
-								</table>
-							{/if}
-
-							{#if mode === "components" && obj.string_shortcuts}
-								<table class="mb-4 table-fixed w-full mt-6">
-									<thead class="text-left">
-										<tr>
-											<th class="p-3 font-semibold w-2/5">Class</th>
-											<th class="p-3 font-semibold"
-												>Interface String Shortcut</th
-											>
-											<th class="p-3 font-semibold">Initialization</th>
-										</tr>
-									</thead>
-									<tbody
-										class="text-left divide-y rounded-lg bg-gray-50 border border-gray-100 overflow-hidden"
-									>
-										{#each obj.string_shortcuts as shortcut}
-											<tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
-												<td class="p-3 w-2/5 break-words">
-													<p>
-														<code class="lang-python">gradio.{shortcut[0]}</code
-														>
-													</p>
-												</td>
-												<td class="p-3 w-2/5 break-words">
-													<p>"{shortcut[1]}"</p>
-												</td>
-												<td class="p-3 text-gray-700 break-words">
-													{shortcut[2]}
-												</td>
-											</tr>
-										{/each}
-									</tbody>
-								</table>
-							{/if}
-
-							{#if obj.fns && obj.fns.length > 0}
-								<h4 class="mt-4 p-3 font-semibold">Methods</h4>
-								<div class="flex flex-col gap-8 pl-12">
-									{#each obj.fns as fn}
-										<FunctionDoc {fn} />
-									{/each}
-									<div class="ml-12" />
-								</div>
-							{/if}
-
-							{#if obj.guides && obj.guides.length > 0}
-								<h4
-									class="mt-4 p-3 text-xl text-orange-500 font-light group"
-									id="guides"
-								>
-									Guides
-									<a
-										href="#guides"
-										class="invisible group-hover-visible"
-										on:click={handleAnchorClick}
-										><img class="anchor-img-small" src={anchor} /></a
-									>
-								</h4>
-
-								<div
-									class="guides-list grid grid-cols-1 lg:grid-cols-4 gap-4 pb-3 px-3"
-								>
-									{#each obj.guides as guide, i}
-										<a
-											class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow bg-gradient-to-r {data
-												.COLOR_SETS[i][0]} {data.COLOR_SETS[i][1]}"
-											target="_blank"
-											href={guide.url}
-										>
-											<div class="flex flex-col p-4 h-min">
-												<p class="group-hover:underline text-l">
-													{guide.pretty_name}
-												</p>
-											</div>
-										</a>
-									{/each}
-								</div>
-							{/if}
-
-							{#if obj.demos}
-								<div class="category my-8" id="examples">
-									<h4
-										class="text-xl text-orange-500 font-light group"
-										id="{obj.name}-demos"
-									>
-										Demos
-										<a
-											href="#{obj.name}-demos"
-											class="invisible group-hover-visible"
-											on:click={handleAnchorClick}
-											><img class="anchor-img-small" src={anchor} /></a
-										>
-									</h4>
-									<div>
-										<div class="demo-window overflow-y-auto h-full w-full mb-4">
-											<div
-												class="relative mx-auto my-auto rounded-md bg-white"
-												style="top: 5%; height: 90%"
-											>
-												<div class="flex overflow-auto pt-4">
-													{#each obj.demos as demo, i}
-														<button
-															on:click={() => (current_selection = i)}
-															class:selected-demo-tab={current_selection == i}
-															class="demo-btn px-4 py-2 text-lg min-w-max text-gray-600 hover:text-orange-500"
-															name={demo[0]}>{demo[0]}</button
-														>
-													{/each}
-												</div>
-												{#each obj.demos as demo, i}
-													<div
-														class:hidden={current_selection !== i}
-														class:selected-demo-window={current_selection == i}
-														class="demo-content px-4"
-													>
-														<Demos
-															name={demo[0]}
-															code={demo[1]}
-															highlighted_code={demo[2]}
-															on_main={on_main}
-														/>
-													</div>
-												{/each}
-											</div>
-										</div>
-									</div>
-								</div>
-							{/if}
-						</div>
-					{/each}
-				</div>
-			</div>
-			<div class="flex justify-between my-4">
-				<a
-					href="./flagging"
-					class="text-left px-4 py-1 bg-gray-50 rounded-full hover:underline"
-				>
-					<div class="text-lg">
-						<span class="text-orange-500">&#8592;</span> Flagging
-					</div>
-				</a>
-				<a
-					href="./blocks"
-					class="text-right px-4 py-1 bg-gray-50 rounded-full hover:underline"
-				>
-					<div class="text-lg">
-						Blocks <span class="text-orange-500">&#8594;</span>
-					</div>
-				</a>
-			</div>
-		</div>
-		<div
-			class="float-right top-8 hidden sticky h-screen overflow-y-auto lg:w-2/12 lg:block"
-		>
-			<div class="px-8">
-				<a
-					class="thin-link py-2 block text-lg"
-					href="#combining-interfaces"
-					on:click={handleAnchorClick}>Combining Interfaces</a
-				>
-				{#if headers.length > 0}
-					<ul class="text-slate-700 text-lg leading-6">
-						{#each headers as header}
-							<li>
-								<a
-									bind:this={header_targets[header[1]]}
-									href="#{header[1]}"
-									class="thin-link block py-2 font-light second-nav-link"
-									on:click={handleAnchorClick}>{header[0]}</a
-								>
-							</li>
-						{/each}
-						{#if method_headers.length > 0}
-							{#each method_headers as method_header}
-								<li class="ml-4">
-									<a
-										href="#{method_header[1]}"
-										class="thin-link block py-2 font-light second-nav-link"
-										on:click={handleAnchorClick}>{method_header[0]}</a
-									>
-								</li>
-							{/each}
-						{/if}
-					</ul>
-				{/if}
-			</div>
-		</div>
-	</div>
-</main>
diff --git a/js/_website/src/routes/[[version]]/docs/components/+page.server.ts b/js/_website/src/routes/[[version]]/docs/components/+page.server.ts
index 1c0e02dc1c16..e6ed7870f670 100644
--- a/js/_website/src/routes/[[version]]/docs/components/+page.server.ts
+++ b/js/_website/src/routes/[[version]]/docs/components/+page.server.ts
@@ -1,11 +1,12 @@
 export async function load({ parent }) {
-	const { docs, components, helpers, py_client, routes, on_main, wheel } = await parent();
+	const { docs, components, helpers, modals, py_client, routes, on_main, wheel } = await parent();
 
 	let events = docs.events;
 	let events_matrix = docs.events_matrix;
 	return {
 		components,
 		helpers,
+		modals,
 		routes,
 		py_client,
 		events,
diff --git a/js/_website/src/routes/[[version]]/docs/components/+page.svelte b/js/_website/src/routes/[[version]]/docs/components/+page.svelte
index 1d9c74a9355a..8429fe463322 100644
--- a/js/_website/src/routes/[[version]]/docs/components/+page.svelte
+++ b/js/_website/src/routes/[[version]]/docs/components/+page.svelte
@@ -10,6 +10,7 @@
 
 	let components = data.components;
 	let helpers = data.helpers;
+	let modals = data.modals;
 	let routes = data.routes;
 	let events = data.events;
 	let events_matrix = data.events_matrix;
@@ -26,6 +27,11 @@
 	}
 
 	$: on_main = data.on_main;
+	$: components = data.components;
+	$: helpers = data.helpers;
+	$: modals = data.modals;
+	$: routes = data.routes;
+	$: py_client = data.py_client;
 </script>
 
 <MetaTags
@@ -41,6 +47,7 @@
 			current_nav_link={"components"}
 			{components}
 			{helpers}
+			{modals}
 			{routes}
 			{py_client}
 		/>
@@ -82,24 +89,24 @@
 
 			<div class="lg:ml-10 flex justify-between mt-4">
 				<a
-					href="./themes"
+					href="./accordion"
 					class="text-left px-4 py-1 bg-gray-50 rounded-full hover:underline"
 				>
 					<div class="text-lg">
-						<span class="text-orange-500">&#8592;</span> Themes
+						<span class="text-orange-500">&#8592;</span> Accordion
 					</div>
 				</a>
 				<a
-					href="./audio"
+					href="./annotatedimage"
 					class="text-right px-4 py-1 bg-gray-50 rounded-full hover:underline"
 				>
 					<div class="text-lg">
-						Audio <span class="text-orange-500">&#8594;</span>
+						AnnotatedImage <span class="text-orange-500">&#8594;</span>
 					</div>
 				</a>
 			</div>
 			<div class="flex flex-row">
-				<div class="lg:w-3/4 lg:ml-10 lg:mr-24">
+				<div class="lg:w-full lg:ml-10 lg:pr-10">
 					<div class="obj" id="components">
 						<h2
 							id="components-header"
@@ -173,28 +180,26 @@
 					</div>
 				</div>
 			</div>
-			<div class="flex justify-between my-4">
+			<div class="lg:ml-10 flex justify-between my-4">
 				<a
-					href="./block-layouts"
+					href="./accordion"
 					class="text-left px-4 py-1 bg-gray-50 rounded-full hover:underline"
 				>
 					<div class="text-lg">
-						<span class="text-orange-500">&#8592;</span> Block Layouts
+						<span class="text-orange-500">&#8592;</span> Accordion
 					</div>
 				</a>
 				<a
-					href="./audio"
+					href="./annotatedimage"
 					class="text-right px-4 py-1 bg-gray-50 rounded-full hover:underline"
 				>
 					<div class="text-lg">
-						Audio <span class="text-orange-500">&#8594;</span>
+						AnnotatedImage <span class="text-orange-500">&#8594;</span>
 					</div>
 				</a>
 			</div>
 		</div>
-
 		<div class="float-right top-8 hidden sticky h-screen overflow-y-auto lg:w-2/12 lg:block">
-
 		</div>
 	</div>
-</main>
+</main>
\ No newline at end of file
diff --git a/js/_website/src/routes/[[version]]/docs/flagging/+page.server.ts b/js/_website/src/routes/[[version]]/docs/flagging/+page.server.ts
index c58fdf0e847b..5e79c9b9f682 100644
--- a/js/_website/src/routes/[[version]]/docs/flagging/+page.server.ts
+++ b/js/_website/src/routes/[[version]]/docs/flagging/+page.server.ts
@@ -14,7 +14,7 @@ const COLOR_SETS = [
 ];
 
 export async function load({ parent }) {
-	const { docs, components, helpers, py_client, routes, on_main, wheel } = await parent();
+	const { docs, components, helpers, modals, py_client, routes, on_main, wheel } = await parent();
 
 	let objs = [
 		docs.building.simplecsvlogger,
@@ -78,6 +78,7 @@ export async function load({ parent }) {
 		description,
 		components,
 		helpers,
+		modals,
 		routes,
 		py_client,
 		COLOR_SETS,
diff --git a/js/_website/src/routes/[[version]]/docs/flagging/+page.svelte b/js/_website/src/routes/[[version]]/docs/flagging/+page.svelte
index 64d91ac3c6cc..7867b47966af 100644
--- a/js/_website/src/routes/[[version]]/docs/flagging/+page.svelte
+++ b/js/_website/src/routes/[[version]]/docs/flagging/+page.svelte
@@ -16,6 +16,7 @@
 	let description = data.description;
 	let components = data.components;
 	let helpers = data.helpers;
+	let modals = data.modals;
 	let routes = data.routes;
 	let headers = data.headers;
 	let method_headers = data.method_headers;
@@ -64,6 +65,11 @@
 	}
 
 	$: on_main = data.on_main;
+	$: components = data.components;
+	$: helpers = data.helpers;
+	$: modals = data.modals;
+	$: routes = data.routes;
+	$: py_client = data.py_client;
 </script>
 
 <MetaTags
@@ -81,6 +87,7 @@
 			current_nav_link={"flagging"}
 			{components}
 			{helpers}
+			{modals}
 			{routes}
 			{py_client}
 		/>
@@ -122,19 +129,19 @@
 
 			<div class="lg:ml-10 flex justify-between mt-4">
 				<a
-					href="./interface"
+					href="./mount_gradio_app"
 					class="text-left px-4 py-1 bg-gray-50 rounded-full hover:underline"
 				>
 					<div class="text-lg">
-						<span class="text-orange-500">&#8592;</span> Interface
+						<span class="text-orange-500">&#8592;</span> mount_gradio_app
 					</div>
 				</a>
 				<a
-					href="./combining-interfaces"
+					href="./themes"
 					class="text-right px-4 py-1 bg-gray-50 rounded-full hover:underline"
 				>
 					<div class="text-lg">
-						Combining Interfaces <span class="text-orange-500">&#8594;</span>
+						Themes <span class="text-orange-500">&#8594;</span>
 					</div>
 				</a>
 			</div>
@@ -468,21 +475,21 @@
 				</div>
 			</div>
 
-			<div class="flex justify-between my-4">
+			<div class="lg:ml-10 flex justify-between my-4">
 				<a
-					href="./interface"
+					href="./mount_gradio_app"
 					class="text-left px-4 py-1 bg-gray-50 rounded-full hover:underline"
 				>
 					<div class="text-lg">
-						<span class="text-orange-500">&#8592;</span> Interface
+						<span class="text-orange-500">&#8592;</span> mount_gradio_app
 					</div>
 				</a>
 				<a
-					href="./combining-interfaces"
+					href="./themes"
 					class="text-right px-4 py-1 bg-gray-50 rounded-full hover:underline"
 				>
 					<div class="text-lg">
-						Combining Interfaces <span class="text-orange-500">&#8594;</span>
+						Themes <span class="text-orange-500">&#8594;</span>
 					</div>
 				</a>
 			</div>
diff --git a/js/_website/src/routes/[[version]]/docs/js-client/+page.server.ts b/js/_website/src/routes/[[version]]/docs/js-client/+page.server.ts
index 51cac062ab77..d341272f5d35 100644
--- a/js/_website/src/routes/[[version]]/docs/js-client/+page.server.ts
+++ b/js/_website/src/routes/[[version]]/docs/js-client/+page.server.ts
@@ -46,7 +46,7 @@ function highlight(code: string, lang: string | undefined) {
 }
 
 export async function load({ parent }) {
-	const { components, helpers, py_client, routes, js_client, on_main, wheel } = await parent();
+	const { components, helpers, modals, py_client, routes, js_client, on_main, wheel } = await parent();
 
 	const guide_slug = [];
 
@@ -106,6 +106,7 @@ export async function load({ parent }) {
 		readme_html,
 		components,
 		helpers,
+		modals,
 		routes,
 		py_client
 	};
diff --git a/js/_website/src/routes/[[version]]/docs/js-client/+page.svelte b/js/_website/src/routes/[[version]]/docs/js-client/+page.svelte
index fa677649924c..813e1d5a4f44 100644
--- a/js/_website/src/routes/[[version]]/docs/js-client/+page.svelte
+++ b/js/_website/src/routes/[[version]]/docs/js-client/+page.svelte
@@ -7,10 +7,16 @@
 
 	let components = data.components;
 	let helpers = data.helpers;
+	let modals = data.modals;
 	let routes = data.routes;
 	let py_client = data.py_client;
 
 	let readme_html = data.readme_html;
+	$: components = data.components;
+	$: helpers = data.helpers;
+	$: modals = data.modals;
+	$: routes = data.routes;
+	$: py_client = data.py_client;
 </script>
 
 <MetaTags
@@ -26,6 +32,7 @@
 			current_nav_link={"js-client"}
 			{components}
 			{helpers}
+			{modals}
 			{routes}
 			{py_client}
 		/>
diff --git a/js/_website/src/routes/[[version]]/docs/python-client/+page.server.ts b/js/_website/src/routes/[[version]]/docs/python-client/+page.server.ts
index 8a6ea06efeca..7c29501fb288 100644
--- a/js/_website/src/routes/[[version]]/docs/python-client/+page.server.ts
+++ b/js/_website/src/routes/[[version]]/docs/python-client/+page.server.ts
@@ -1,9 +1,10 @@
 export async function load({ parent }) {
-	const { components, helpers, py_client, routes, on_main, wheel } = await parent();
+	const { components, helpers, modals, py_client, routes, on_main, wheel } = await parent();
 
 	return {
 		components,
 		helpers,
+		modals,
 		routes,
 		py_client, 
 		on_main,
diff --git a/js/_website/src/routes/[[version]]/docs/python-client/+page.svelte b/js/_website/src/routes/[[version]]/docs/python-client/+page.svelte
index d22e9db4e34a..16078a89f684 100644
--- a/js/_website/src/routes/[[version]]/docs/python-client/+page.svelte
+++ b/js/_website/src/routes/[[version]]/docs/python-client/+page.svelte
@@ -8,6 +8,7 @@
 	export let data;
 	let components = data.components;
 	let helpers = data.helpers;
+	let modals = data.modals;
 	let routes = data.routes;
 	let py_client = data.py_client;
 	
@@ -22,7 +23,11 @@
 	}
 
 	$: on_main = data.on_main;
-
+	$: components = data.components;
+	$: helpers = data.helpers;
+	$: modals = data.modals;
+	$: routes = data.routes;
+	$: py_client = data.py_client;
 </script>
 
 <MetaTags
@@ -38,6 +43,7 @@
 			current_nav_link={"python-client"}
 			{components}
 			{helpers}
+			{modals}
 			{routes}
 			{py_client}
 		/>
@@ -79,11 +85,11 @@
 
 			<div class="lg:ml-10 flex justify-between mt-4">
 				<a
-					href="./mount_gradio_app"
+					href="./themes"
 					class="text-left px-4 py-1 bg-gray-50 rounded-full hover:underline"
 				>
 					<div class="text-lg">
-						<span class="text-orange-500">&#8592;</span> mount_gradio_app
+						<span class="text-orange-500">&#8592;</span> Themes
 					</div>
 				</a>
 				<a
diff --git a/js/_website/src/routes/[[version]]/docs/themes/+page.server.ts b/js/_website/src/routes/[[version]]/docs/themes/+page.server.ts
index c7c657913c9c..761eb80af526 100644
--- a/js/_website/src/routes/[[version]]/docs/themes/+page.server.ts
+++ b/js/_website/src/routes/[[version]]/docs/themes/+page.server.ts
@@ -14,7 +14,7 @@ const COLOR_SETS = [
 ];
 
 export async function load({ parent }) {
-	const { components, helpers, py_client, routes, docs, on_main, wheel } = await parent();
+	const { components, helpers, modals, py_client, routes, docs, on_main, wheel } = await parent();
 
 	let objs = [docs.building.base];
 	let headers = [
@@ -82,6 +82,7 @@ export async function load({ parent }) {
 		description,
 		components,
 		helpers,
+		modals,
 		routes,
 		py_client,
 		COLOR_SETS,
diff --git a/js/_website/src/routes/[[version]]/docs/themes/+page.svelte b/js/_website/src/routes/[[version]]/docs/themes/+page.svelte
index ec9c2458f6f7..edc27699fd14 100644
--- a/js/_website/src/routes/[[version]]/docs/themes/+page.svelte
+++ b/js/_website/src/routes/[[version]]/docs/themes/+page.svelte
@@ -16,6 +16,7 @@
 	let description = data.description;
 	let components = data.components;
 	let helpers = data.helpers;
+	let modals = data.modals;
 	let routes = data.routes;
 	let headers = data.headers;
 	let method_headers = data.method_headers;
@@ -64,6 +65,11 @@
 	}
 
 	$: on_main = data.on_main;
+	$: components = data.components;
+	$: helpers = data.helpers;
+	$: modals = data.modals;
+	$: routes = data.routes;
+	$: py_client = data.py_client;
 </script>
 
 <MetaTags
@@ -81,6 +87,7 @@
 			current_nav_link={"themes"}
 			{components}
 			{helpers}
+			{modals}
 			{routes}
 			{py_client}
 		/>
@@ -122,19 +129,19 @@
 
 			<div class="lg:ml-10 flex justify-between mt-4">
 				<a
-					href="./chatinterface"
+					href="./flagging"
 					class="text-left px-4 py-1 bg-gray-50 rounded-full hover:underline"
 				>
 					<div class="text-lg">
-						<span class="text-orange-500">&#8592;</span> ChatInterface
+						<span class="text-orange-500">&#8592;</span> Flagging
 					</div>
 				</a>
 				<a
-					href="./components"
+					href="./python-client"
 					class="text-right px-4 py-1 bg-gray-50 rounded-full hover:underline"
 				>
 					<div class="text-lg">
-						Components <span class="text-orange-500">&#8594;</span>
+						Python Client <span class="text-orange-500">&#8594;</span>
 					</div>
 				</a>
 			</div>
@@ -486,21 +493,21 @@
 				</div>
 			</div>
 
-			<div class="flex justify-between my-4">
+			<div class="lg:ml-10 flex justify-between my-4">
 				<a
-					href="./chatinterface"
+					href="./flagging"
 					class="text-left px-4 py-1 bg-gray-50 rounded-full hover:underline"
 				>
 					<div class="text-lg">
-						<span class="text-orange-500">&#8592;</span> ChatInterface
+						<span class="text-orange-500">&#8592;</span> Flagging
 					</div>
 				</a>
 				<a
-					href="./components"
+					href="./python-client"
 					class="text-right px-4 py-1 bg-gray-50 rounded-full hover:underline"
 				>
 					<div class="text-lg">
-						Components <span class="text-orange-500">&#8594;</span>
+						Python Client <span class="text-orange-500">&#8594;</span>
 					</div>
 				</a>
 			</div>