diff --git a/packages/app/src/components/delete-workspace/index.tsx b/packages/app/src/components/delete-workspace/index.tsx
new file mode 100644
index 0000000000..a225d28028
--- /dev/null
+++ b/packages/app/src/components/delete-workspace/index.tsx
@@ -0,0 +1,104 @@
+import { ResetIcon } from '@blocksuite/icons';
+import { styled } from '@/styles';
+import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal';
+import { Button, TextButton } from '@/ui/button';
+import Input from '@/ui/input';
+import { useState } from 'react';
+
+interface LoginModalProps {
+  open: boolean;
+  onClose: () => void;
+  workSpaceName: string;
+}
+
+export const DeleteModal = ({
+  open,
+  onClose,
+  workSpaceName,
+}: LoginModalProps) => {
+  const [canDelete, setCanDelete] = useState<boolean>(true);
+  const InputChange = (value: string) => {
+    if (value === workSpaceName) {
+      setCanDelete(false);
+    } else {
+      setCanDelete(true);
+    }
+  };
+  return (
+    <div>
+      <Modal open={open} onClose={onClose}>
+        <ModalWrapper width={620} height={334}>
+          <Header>
+            <ModalCloseButton
+              top={6}
+              right={6}
+              onClick={() => {
+                onClose();
+              }}
+            />
+          </Header>
+          <Content>
+            <ContentTitle>Delete Workspace</ContentTitle>
+            <div>
+              This action cannot be undone. This will permanently delete{' '}
+              {workSpaceName} workspace name along with all its content.
+            </div>
+
+            <Input
+              onChange={InputChange}
+              placeholder="Please type “delete” to confirm"
+            ></Input>
+          </Content>
+          <Footer>
+            <Button
+              style={{ marginRight: '12px' }}
+              shape="circle"
+              onClick={() => {
+                onClose();
+              }}
+            >
+              Cancel
+            </Button>
+            <Button shape="circle" type="danger" disabled={canDelete}>
+              Delete
+            </Button>
+          </Footer>
+        </ModalWrapper>
+      </Modal>
+    </div>
+  );
+};
+
+const Header = styled('div')({
+  position: 'relative',
+  height: '44px',
+});
+
+const Content = styled('div')({
+  display: 'flex',
+  padding: '0 48px',
+  flexDirection: 'column',
+  alignItems: 'center',
+  gap: '16px',
+});
+
+const ContentTitle = styled('h1')({
+  fontSize: '20px',
+  lineHeight: '28px',
+  fontWeight: 600,
+  textAlign: 'center',
+  paddingBottom: '16px',
+});
+
+const Footer = styled('div')({
+  height: '70px',
+  paddingLeft: '24px',
+  marginTop: '32px',
+  textAlign: 'center',
+});
+
+const StyledResetIcon = styled(ResetIcon)({
+  marginRight: '12px',
+  width: '20px',
+  height: '20px',
+});