diff --git a/frontend/src/pages/WorkspaceSettings/GeneralAppearance/DeleteWorkspace/index.jsx b/frontend/src/pages/WorkspaceSettings/GeneralAppearance/DeleteWorkspace/index.jsx
new file mode 100644
index 000000000..56fef1ad9
--- /dev/null
+++ b/frontend/src/pages/WorkspaceSettings/GeneralAppearance/DeleteWorkspace/index.jsx
@@ -0,0 +1,52 @@
+import { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import Workspace from "@/models/workspace";
+import paths from "@/utils/paths";
+import System from "@/models/system";
+
+export default function DeleteWorkspace({ workspace }) {
+  const { slug } = useParams();
+  const [deleting, setDeleting] = useState(false);
+  const [canDelete, setCanDelete] = useState(false);
+
+  useEffect(() => {
+    async function fetchKeys() {
+      const canDelete = await System.getCanDeleteWorkspaces();
+      setCanDelete(canDelete);
+    }
+    fetchKeys();
+  }, [workspace?.slug]);
+
+  const deleteWorkspace = async () => {
+    if (
+      !window.confirm(
+        `You are about to delete your entire ${workspace.name} workspace. This will remove all vector embeddings on your vector database.\n\nThe original source files will remain untouched. This action is irreversible.`
+      )
+    )
+      return false;
+
+    setDeleting(true);
+    const success = await Workspace.delete(workspace.slug);
+    if (!success) {
+      showToast("Workspace could not be deleted!", "error", { clear: true });
+      setDeleting(false);
+      return;
+    }
+
+    workspace.slug === slug
+      ? (window.location = paths.home())
+      : window.location.reload();
+  };
+
+  if (!canDelete) return null;
+  return (
+    <button
+      disabled={deleting}
+      onClick={deleteWorkspace}
+      type="button"
+      className="w-60 mt-[40px] transition-all duration-300 border border-transparent rounded-lg whitespace-nowrap text-sm px-5 py-2.5 focus:z-10 bg-red-500/25 text-red-200 hover:text-white hover:bg-red-600 disabled:bg-red-600 disabled:text-red-200 disabled:animate-pulse"
+    >
+      {deleting ? "Deleting Workspace..." : "Delete Workspace"}
+    </button>
+  );
+}
diff --git a/frontend/src/pages/WorkspaceSettings/GeneralAppearance/index.jsx b/frontend/src/pages/WorkspaceSettings/GeneralAppearance/index.jsx
index aec9e2e64..ee00143e4 100644
--- a/frontend/src/pages/WorkspaceSettings/GeneralAppearance/index.jsx
+++ b/frontend/src/pages/WorkspaceSettings/GeneralAppearance/index.jsx
@@ -5,6 +5,7 @@ import { useEffect, useRef, useState } from "react";
 import VectorCount from "./VectorCount";
 import WorkspaceName from "./WorkspaceName";
 import SuggestedChatMessages from "./SuggestedChatMessages";
+import DeleteWorkspace from "./DeleteWorkspace";
 
 export default function GeneralInfo({ slug }) {
   const [workspace, setWorkspace] = useState(null);
@@ -56,7 +57,6 @@ export default function GeneralInfo({ slug }) {
           workspace={workspace}
           setHasChanges={setHasChanges}
         />
-
         {hasChanges && (
           <button
             type="submit"
@@ -69,6 +69,7 @@ export default function GeneralInfo({ slug }) {
       <div className="mt-6">
         <SuggestedChatMessages slug={workspace.slug} />
       </div>
+      <DeleteWorkspace workspace={workspace} />
     </>
   );
 }