diff --git a/packages/backend/src/service.ts b/packages/backend/src/service.ts
index 64223f27..0067ef5e 100644
--- a/packages/backend/src/service.ts
+++ b/packages/backend/src/service.ts
@@ -720,8 +720,16 @@ export class Service {
   }
 
   async deleteDeployment (deploymentId: string): Promise<boolean> {
-    const result = await this.registry.createApplicationDeploymentRemovalRequest({ deploymentId });
-    return (result !== undefined || result !== null);
+    const deployment = await this.db.getDeployment({
+      where: {
+        id: deploymentId
+      }
+    });
+    if (deployment && deployment.applicationDeploymentRecordId) {
+      const result = await this.registry.createApplicationDeploymentRemovalRequest({ deploymentId: deployment.applicationDeploymentRecordId });
+      return (result !== undefined || result !== null);
+    }
+    return false;
   }
 
   async addDomain (
diff --git a/packages/frontend/src/components/projects/project/deployments/DeploymentMenu.tsx b/packages/frontend/src/components/projects/project/deployments/DeploymentMenu.tsx
index c2b62fd1..7e6fdd7d 100644
--- a/packages/frontend/src/components/projects/project/deployments/DeploymentMenu.tsx
+++ b/packages/frontend/src/components/projects/project/deployments/DeploymentMenu.tsx
@@ -9,6 +9,7 @@ import {
   RefreshIcon,
   RocketIcon,
   UndoIcon,
+  CrossCircleIcon,
 } from 'components/shared/CustomIcon';
 import {
   Menu,
@@ -79,6 +80,16 @@ export const DeploymentMenu = ({
     }
   };
 
+  const deleteDeployment = async () => {
+    const isDeleted = await client.deleteDeployment(deployment.id);
+    if (isDeleted) {
+      await onUpdate();
+      toast.success('Deleted deployment');
+    } else {
+      toast.error('Unable to delete deployment');
+    }
+  };
+
   return (
     <>
       <div className={cn('max-w-[32px]', className)} {...props}>
@@ -147,6 +158,18 @@ export const DeploymentMenu = ({
             >
               <UndoIcon /> Rollback to this version
             </MenuItem>
+            <MenuItem
+              className="hover:bg-base-bg-emphasized flex items-center gap-3"
+              onClick={() => deleteDeployment()}
+              disabled={
+                deployment.isCurrent ||
+                deployment.environment !== Environment.Production ||
+                !Boolean(currentDeployment)
+              }
+              placeholder={''}
+            >
+              <CrossCircleIcon /> Delete deployment
+            </MenuItem>
           </MenuList>
         </Menu>
       </div>