diff --git a/src/flow_view.ts b/src/flow_view.ts
index eaa9793..82d3f3a 100644
--- a/src/flow_view.ts
+++ b/src/flow_view.ts
@@ -1,4 +1,4 @@
-import { ItemView, WorkspaceLeaf, setIcon } from "obsidian";
+import { ItemView, Notice, WorkspaceLeaf, setIcon } from "obsidian";
 import CloudAtlasPlugin from "./main";
 
 export const CA_VIEW_TYPE = "flow-view";
@@ -64,6 +64,20 @@ export class FlowView extends ItemView {
 				// console.debug(`Uploading flow ${flow}`);
 				await this.plugin.uploadFlow(flow);
 			});
+			const deployBtn = td2.createEl("button", { text: "Deploy" });
+			setIcon(deployBtn, "cloud-cog");
+			deployBtn.addClass("cloud-atlas-flow-btn-primary");
+			deployBtn.addEventListener("click", async () => {
+				// console.debug(`Uploading flow ${flow}`);
+				setIcon(deployBtn, "cog");
+				deployBtn.addClass("rotate");
+				const project_url = await this.plugin.deployFlow(flow);
+				deployBtn.removeClass("rotate");
+				setIcon(deployBtn, "cloud-cog");
+				new Notice(
+					`Flow has been deployed to ${project_url}, it should be available in a few minutes`
+				);
+			});
 			const flowNameTd = tr.createEl("td");
 			flowNameTd.addClass("cloud-atlas-flow-td-half");
 			flowNameTd.createEl("span", { text: flow });
diff --git a/src/main.ts b/src/main.ts
index ea72012..bb07cab 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -341,6 +341,32 @@ export default class CloudAtlasPlugin extends Plugin {
 		return respJson;
 	};
 
+	deployFlow = async (flow: string): Promise<string> => {
+		await this.uploadFlow(flow);
+		const apiUrl = this.apiUrl();
+		const response = await fetch(`${apiUrl}/deploy`, {
+			headers: {
+				"x-api-key": this.settings.apiKey,
+				"Content-Type": "application/json",
+			},
+			method: "POST",
+			body: JSON.stringify({ flow }),
+		});
+
+		const project_url = await response.text();
+
+		await this.createFolder("CloudAtlas/deploy-info");
+
+		await this.app.vault.create(
+			`CloudAtlas/deploy-info/${flow}.flowdeploy.md`,
+			JSON.stringify({
+				project_url,
+			})
+		);
+
+		return project_url;
+	};
+
 	uploadFlow = async (flow: string) => {
 		const templateFlowFilePath = this.getFlowFilePath(flow);
 		const dataFlowFilePath = this.getFlowdataFilePath(flow);
@@ -616,13 +642,17 @@ export default class CloudAtlasPlugin extends Plugin {
 		return "";
 	};
 
+	apiUrl = () => {
+		const url = this.settings.previewMode
+			? "https://dev-api.cloud-atlas.ai"
+			: "https://api.cloud-atlas.ai";
+		return this.settings.developmentMode ? "http://localhost:8787" : url;
+	};
+
 	caApiFetch = async (payload: Payload): Promise<string> => {
 		payload.version = "V2";
 		console.debug(payload);
-		let url = this.settings.previewMode
-			? "https://dev-api.cloud-atlas.ai/run"
-			: "https://api.cloud-atlas.ai/run";
-		url = this.settings.developmentMode ? "http://localhost:8787/run" : url;
+		const url = `${this.apiUrl()}/run`;
 		const response = await fetch(url, {
 			headers: {
 				"x-api-key": this.settings.apiKey,
@@ -911,6 +941,8 @@ export default class CloudAtlasPlugin extends Plugin {
 							view.dom.classList.add("cloud-atlas-flowdata-file");
 						} else if (filePath.endsWith(".flowrun.md")) {
 							view.dom.classList.add("cloud-atlas-flowrun-file");
+						} else if (filePath.endsWith(".flowdeploy.md")) {
+							view.dom.classList.add("cloud-atlas-flowdeploy-file");
 						} else {
 							view.dom.classList.remove(
 								"cloud-atlas-flow-file",
diff --git a/styles.css b/styles.css
index d13b359..7ee395e 100644
--- a/styles.css
+++ b/styles.css
@@ -72,7 +72,31 @@ table.cloud-atlas-flow-table td.cloud-atlas-flow-td-quarter {
 }
 
 .cloud-atlas-flowdata-file::before {
-	content: "CloudAtlas flow Data";
+	content: "CloudAtlas flow data";
+	display: block;
+	font-size: var(--font-larger);
+	color: var(--foreground-secondary-alt);
+	background-color: var(--background-secondary-alt);
+	padding: var(--size-4-3);
+	border-top: 2px solid var(--text-accent-hover);
+	border-bottom: 2px solid var(--text-accent-hover);
+	margin-bottom: var(--size-4-3);
+}
+
+.cloud-atlas-flowrun-file::before {
+	content: "CloudAtlas flow run";
+	display: block;
+	font-size: var(--font-larger);
+	color: var(--foreground-secondary-alt);
+	background-color: var(--background-secondary-alt);
+	padding: var(--size-4-3);
+	border-top: 2px solid var(--text-accent-hover);
+	border-bottom: 2px solid var(--text-accent-hover);
+	margin-bottom: var(--size-4-3);
+}
+
+.cloud-atlas-flowdeploy-file::before {
+	content: "CloudAtlas flow deploy";
 	display: block;
 	font-size: var(--font-larger);
 	color: var(--foreground-secondary-alt);
@@ -128,6 +152,10 @@ table.cloud-atlas-flow-table td.cloud-atlas-flow-td-quarter {
 	font-size: 1.2em;
 }
 
+.rotate {
+	animation: rotation 2s infinite linear;
+}
+
 .cloud-atlas-flow-canvas
 	.mod-canvas-color-1:not(.is-editing)
 	.canvas-node-container::before,