diff --git a/frontend/src/lib/components/DeployWorkspace.svelte b/frontend/src/lib/components/DeployWorkspace.svelte
index d4e6bd6fec..ab9eec8e3f 100644
--- a/frontend/src/lib/components/DeployWorkspace.svelte
+++ b/frontend/src/lib/components/DeployWorkspace.svelte
@@ -59,7 +59,8 @@
 
 		dependencies = (await getDependencies(kind, path)).map((x) => ({
 			...x,
-			include: x.kind != 'variable' && x.kind != 'resource'
+			include:
+				kind == 'variable' || kind == 'resource' || (x.kind != 'variable' && x.kind != 'resource')
 		}))
 		dependencies.forEach((x) => {
 			checkAlreadyExists(x.kind, x.path).then(
diff --git a/frontend/src/lib/components/ScriptBuilder.svelte b/frontend/src/lib/components/ScriptBuilder.svelte
index b542e480c5..75abe20aef 100644
--- a/frontend/src/lib/components/ScriptBuilder.svelte
+++ b/frontend/src/lib/components/ScriptBuilder.svelte
@@ -440,24 +440,24 @@
 						{/if}
 					{/if}
 				</div>
+				<div class="flex mt-2">
+					<Button
+						variant="border"
+						color="dark"
+						size="xs"
+						btnClasses="mt-1"
+						on:click={() => {
+							if (script.envs == undefined || !Array.isArray(script.envs)) {
+								script.envs = []
+							}
+							script.envs = script.envs.concat('')
+						}}
+					>
+						<Icon data={faPlus} class="mr-2" />
+						Add item
+					</Button>
+				</div>
 			{/if}
-			<div class="flex mt-2">
-				<Button
-					variant="border"
-					color="dark"
-					size="xs"
-					btnClasses="mt-1"
-					on:click={() => {
-						if (script.envs == undefined || !Array.isArray(script.envs)) {
-							script.envs = []
-						}
-						script.envs = script.envs.concat('')
-					}}
-				>
-					<Icon data={faPlus} class="mr-2" />
-					Add item
-				</Button>
-			</div>
 		</DrawerContent>
 	</Drawer>
 
diff --git a/frontend/src/routes/(root)/(logged)/resources/+page.svelte b/frontend/src/routes/(root)/(logged)/resources/+page.svelte
index 1e81888400..e2932dbf54 100644
--- a/frontend/src/routes/(root)/(logged)/resources/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/resources/+page.svelte
@@ -7,6 +7,7 @@
 	import Drawer from '$lib/components/common/drawer/Drawer.svelte'
 	import DrawerContent from '$lib/components/common/drawer/DrawerContent.svelte'
 	import Tabs from '$lib/components/common/tabs/Tabs.svelte'
+	import DeployWorkspaceDrawer from '$lib/components/DeployWorkspaceDrawer.svelte'
 	import Dropdown from '$lib/components/Dropdown.svelte'
 	import ListFilters from '$lib/components/home/ListFilters.svelte'
 	import IconedResourceType from '$lib/components/IconedResourceType.svelte'
@@ -32,6 +33,7 @@
 		faChain,
 		faCircle,
 		faEdit,
+		faFileExport,
 		faPlus,
 		faRefresh,
 		faSave,
@@ -233,8 +235,11 @@
 		}
 		inferrer?.closeDrawer?.()
 	}
+	let deploymentDrawer: DeployWorkspaceDrawer
 </script>
 
+<DeployWorkspaceDrawer bind:this={deploymentDrawer} />
+
 <Portal>
 	<Drawer bind:this={inferrer} size="800px">
 		<DrawerContent title="Import app from JSON" on:close={() => inferrer?.toggleDrawer?.()}>
@@ -392,7 +397,7 @@
 		<div class="pt-2">
 			<input placeholder="Search Resource" bind:value={filter} class="input mt-1" />
 		</div>
-		<ListFilters  bind:selectedFilter={ownerFilter} filters={owners} />
+		<ListFilters bind:selectedFilter={ownerFilter} filters={owners} />
 		{#if tab != 'states' && tab != 'cache'}
 			<ListFilters
 				queryName="app_filter"
@@ -551,6 +556,13 @@
 														resourceEditor?.initEdit?.(path)
 													}
 												},
+												{
+													displayName: 'Deploy to prod/staging',
+													icon: faFileExport,
+													action: () => {
+														deploymentDrawer.openDrawer(path, 'resource')
+													}
+												},
 												{
 													displayName: 'Delete',
 													disabled: !canWrite,
diff --git a/frontend/src/routes/(root)/(logged)/variables/+page.svelte b/frontend/src/routes/(root)/(logged)/variables/+page.svelte
index 0f6b255f19..7df39c91a5 100644
--- a/frontend/src/routes/(root)/(logged)/variables/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/variables/+page.svelte
@@ -2,6 +2,7 @@
 	import CenteredPage from '$lib/components/CenteredPage.svelte'
 	import { Alert, Badge, Button, Skeleton, Tab, Tabs } from '$lib/components/common'
 	import ConfirmationModal from '$lib/components/common/confirmationModal/ConfirmationModal.svelte'
+	import DeployWorkspaceDrawer from '$lib/components/DeployWorkspaceDrawer.svelte'
 	import Dropdown from '$lib/components/Dropdown.svelte'
 	import ListFilters from '$lib/components/home/ListFilters.svelte'
 	import PageHeader from '$lib/components/PageHeader.svelte'
@@ -23,6 +24,7 @@
 		faCircle,
 		faEdit,
 		faEyeSlash,
+		faFileExport,
 		faPlus,
 		faRefresh,
 		faShare,
@@ -94,8 +96,12 @@
 		}
 	}
 	let tab: 'workspace' | 'contextual' = 'workspace'
+
+	let deploymentDrawer: DeployWorkspaceDrawer
 </script>
 
+<DeployWorkspaceDrawer bind:this={deploymentDrawer} />
+
 <SearchItems
 	{filter}
 	items={preFilteredItems}
@@ -306,6 +312,13 @@
 													},
 													disabled: !owner
 												},
+												{
+													displayName: 'Deploy to prod/staging',
+													icon: faFileExport,
+													action: () => {
+														deploymentDrawer.openDrawer(path, 'variable')
+													}
+												},
 												{
 													displayName: owner ? 'Share' : 'See Permissions',
 													action: () => {