diff --git a/src/common/components/modal-dialog/modal-dialog.component.tsx b/src/common/components/modal-dialog/modal-dialog.component.tsx
index 2839de16..7ee673ac 100644
--- a/src/common/components/modal-dialog/modal-dialog.component.tsx
+++ b/src/common/components/modal-dialog/modal-dialog.component.tsx
@@ -53,7 +53,7 @@ export const ModalDialog: React.FC = () => {
           transition={{ duration: 0.4 }}
         >
           <motion.div
-            className={styles.dialog}
+            className={`${styles.dialog} ${modalDialog.compact ? styles.dialogCompact : ''}`}
             role="dialog"
             initial={{ opacity: 0, scale: 0.8 }}
             animate={{ opacity: 1, scale: 1 }}
diff --git a/src/common/components/modal-dialog/modal-dialog.const.ts b/src/common/components/modal-dialog/modal-dialog.const.ts
index e66a0757..146c3b96 100644
--- a/src/common/components/modal-dialog/modal-dialog.const.ts
+++ b/src/common/components/modal-dialog/modal-dialog.const.ts
@@ -8,3 +8,5 @@ export const EDIT_NOTE_TITLE = 'Edit Note';
 export const ABOUT_TITLE = 'About us';
 export const EXPORT_MODEL_TITLE = 'Export Model';
 export const IMPORT_COLLECTION_TITLE = 'Import JSON Document';
+export const EDIT_TABLE_CONFIRMATION_DIALOG = 'Edit Table';
+export const REMOVE_TABLE_CONFIRMATION_TABLE = 'Remove Table';
\ No newline at end of file
diff --git a/src/common/components/modal-dialog/modal-dialog.styles.module.css b/src/common/components/modal-dialog/modal-dialog.styles.module.css
index 92d125fe..607fb433 100644
--- a/src/common/components/modal-dialog/modal-dialog.styles.module.css
+++ b/src/common/components/modal-dialog/modal-dialog.styles.module.css
@@ -23,6 +23,11 @@
   border-radius: var(--border-radius-m);
 }
 
+.dialogCompact {
+  height: auto;
+  max-height: 90vh;
+}
+
 .dialog-header {
   position: sticky;
   top: 0;
diff --git a/src/core/providers/modal-dialog-provider/modal-dialog.model.ts b/src/core/providers/modal-dialog-provider/modal-dialog.model.ts
index 347e1d65..90db7afd 100644
--- a/src/core/providers/modal-dialog-provider/modal-dialog.model.ts
+++ b/src/core/providers/modal-dialog-provider/modal-dialog.model.ts
@@ -4,16 +4,18 @@ export interface ModalDialogModel {
   isOpen: boolean;
   selectedComponent: React.ReactNode | null;
   title: string;
+  compact?: boolean;
 }
 
 export const createInitialModalDialog = (): ModalDialogModel => ({
   isOpen: false,
   selectedComponent: null,
   title: '',
+  compact: false,
 });
 
 export interface ModalDialogContextModel {
-  openModal: (component: React.ReactNode | null, title: string) => void;
+  openModal: (component: React.ReactNode | null, title: string, compact?: boolean) => void;
   closeModal: () => void;
   modalDialog: ModalDialogModel;
 }
diff --git a/src/core/providers/modal-dialog-provider/modal-dialog.provider.tsx b/src/core/providers/modal-dialog-provider/modal-dialog.provider.tsx
index a7a3205d..7bc80155 100644
--- a/src/core/providers/modal-dialog-provider/modal-dialog.provider.tsx
+++ b/src/core/providers/modal-dialog-provider/modal-dialog.provider.tsx
@@ -15,11 +15,12 @@ export const ModalDialogProvider: React.FC<Props> = props => {
     createInitialModalDialog()
   );
 
-  const openModal = (component: React.ReactNode | null, title: string) => {
+  const openModal = (component: React.ReactNode | null, title: string, compact?: boolean) => {
     setModalDialog({
       isOpen: true,
       selectedComponent: component,
       title,
+      compact,
     });
   };
 
diff --git a/src/pods/edit-table/edit-table-dialog.component.tsx b/src/pods/edit-table/edit-table-dialog.component.tsx
new file mode 100644
index 00000000..20bd6bab
--- /dev/null
+++ b/src/pods/edit-table/edit-table-dialog.component.tsx
@@ -0,0 +1,24 @@
+import classes from './edit-table.module.css'
+
+interface Props {
+    onConfirm: () => void;
+    onCancel: () => void;
+}
+
+export const EditModelDialog = ({ onConfirm, onCancel }: Props) => (
+  <div role="alertdialog" aria-modal="true">
+    <p className={classes.menssage}>This field has nested fields. Are you sure you want to delete it?</p>
+    <div className="two-buttons" >
+        <button
+            className="button-secondary"
+            onClick={onConfirm}>
+            Confirm
+        </button>
+        <button
+            className="button-tertiary"
+            onClick={onCancel}>
+            Cancel
+        </button>
+    </div>
+  </div>
+);
\ No newline at end of file
diff --git a/src/pods/edit-table/edit-table.module.css b/src/pods/edit-table/edit-table.module.css
index 0b659053..b5606e37 100644
--- a/src/pods/edit-table/edit-table.module.css
+++ b/src/pods/edit-table/edit-table.module.css
@@ -82,6 +82,13 @@
   gap: 5px;
 }
 
+.menssage {
+    font-size: var(--fs-m);
+    color: var(--text-color);
+    text-align: center;
+    margin: 0 0 var(--space-md);
+}
+
 @supports (grid-template-columns: subgrid) {
   .tableEditor {
     grid-template-columns: repeat(7, auto);
diff --git a/src/pods/edit-table/edit-table.pod.tsx b/src/pods/edit-table/edit-table.pod.tsx
index a2e7dc10..74b5e9a2 100644
--- a/src/pods/edit-table/edit-table.pod.tsx
+++ b/src/pods/edit-table/edit-table.pod.tsx
@@ -14,6 +14,7 @@ import {
   doMapOrCreateTable,
 } from './edit-table.business';
 import { updateFieldValueLogic } from './edit-table.business';
+import { EditModelDialog } from './edit-table-dialog.component';
 
 interface Props {
   table?: canvasVm.TableVm; // TODO: should we have our own Vm?
@@ -40,6 +41,8 @@ export const EditTablePod: React.FC<Props> = props => {
     doMapOrCreateTable(relations, table)
   );
 
+  const [pendingDeleteFieldId, setPendingDeleteFieldId] = React.useState<GUID | null>(null);
+
   const handleSubmit = (table: editTableVm.TableVm) => {
     onSave(mapEditTableVmToTableVm(table));
   };
@@ -59,7 +62,21 @@ export const EditTablePod: React.FC<Props> = props => {
   };
 
   const onDeleteField = (fieldId: GUID) => {
-    setEditTable(currentTable => removeField(currentTable, fieldId));
+    const field = findFieldRecursively(editTable.fields, fieldId);
+    const hasChildren = (field?.children?.length ?? 0) > 0;
+
+    if (hasChildren) {
+      setPendingDeleteFieldId(fieldId);
+    } else {
+      setEditTable(currentTable => removeField(currentTable, fieldId));
+    }
+  };
+
+  const handleConfirmDelete = () => {
+    if (pendingDeleteFieldId) {
+      setEditTable(currentTable => removeField(currentTable, pendingDeleteFieldId));
+      setPendingDeleteFieldId(null);
+    }
   };
 
   const onAddField = (fieldId: GUID, isChildren: boolean, newFieldId: GUID) => {
@@ -95,6 +112,15 @@ export const EditTablePod: React.FC<Props> = props => {
     }
   };
 
+  if (pendingDeleteFieldId) {
+    return (
+      <EditModelDialog
+        onConfirm={handleConfirmDelete}
+        onCancel={() => setPendingDeleteFieldId(null)}
+      />
+    );
+  }
+
   return (
     <>
       <EditTableComponent
diff --git a/src/pods/toolbar/components/delete-button/delete-button.component.tsx b/src/pods/toolbar/components/delete-button/delete-button.component.tsx
index 0dd4d66c..5c354f75 100644
--- a/src/pods/toolbar/components/delete-button/delete-button.component.tsx
+++ b/src/pods/toolbar/components/delete-button/delete-button.component.tsx
@@ -3,12 +3,37 @@ import { TrashIcon } from '@/common/components/icons';
 import { useCanvasSchemaContext } from '@/core/providers';
 import { ActionButton } from '@/common/components/action-button';
 import { SHORTCUTS } from '@/common/shortcut';
+import { useModalDialogContext } from '@/core/providers';
+import { REMOVE_TABLE_CONFIRMATION_TABLE } from '@/common/components';
+import { DeleteTableDialog } from './delete-table-dialog.component';
+
 
 export const DeleteButton: React.FC = () => {
   const { canvasSchema, deleteSelectedItem } = useCanvasSchemaContext();
+  const { openModal, closeModal } = useModalDialogContext();
+
   const handleDeleteSelectedItemClick = () => {
-    if (canvasSchema.selectedElementId) {
+    if (!canvasSchema.selectedElementId) return;
+
+    const selectedTable = canvasSchema.tables.find(t => t.id === canvasSchema.selectedElementId);
+    const hasChildren = (selectedTable?.fields.length ?? 0) > 1 ||
+      canvasSchema.relations.some(r => r.fromTableId === canvasSchema.selectedElementId ||
+      r.toTableId === canvasSchema.selectedElementId);
+
+    const doDeleteSelectedItem = () => {
+      if (!canvasSchema.selectedElementId) return;
       deleteSelectedItem(canvasSchema.selectedElementId);
+      closeModal();
+    }
+
+    if (hasChildren) {
+      openModal(
+        <DeleteTableDialog onConfirm={doDeleteSelectedItem} onCancel={closeModal} />,
+        REMOVE_TABLE_CONFIRMATION_TABLE,
+        true
+      )
+    } else {
+      doDeleteSelectedItem();
     }
   };
   return (
diff --git a/src/pods/toolbar/components/delete-button/delete-table-dialog.component.tsx b/src/pods/toolbar/components/delete-button/delete-table-dialog.component.tsx
new file mode 100644
index 00000000..d584c6df
--- /dev/null
+++ b/src/pods/toolbar/components/delete-button/delete-table-dialog.component.tsx
@@ -0,0 +1,24 @@
+import classes from './delete-table.module.css'
+
+interface Props {
+    onConfirm: () => void;
+    onCancel: () => void;
+}
+
+export const DeleteTableDialog = ({ onConfirm, onCancel }: Props) => (
+  <div role="alertdialog" aria-modal="true">
+    <p className={classes.menssage}>You have unsaved changes. Are you sure you want to delete the table? The content of the table will be lost.</p>
+    <div className="two-buttons" >
+        <button
+            className="button-secondary"
+            onClick={onConfirm}>
+            Confirm
+        </button>
+        <button
+            className="button-tertiary"
+            onClick={onCancel}>
+            Cancel
+        </button>
+    </div>
+  </div>
+);
\ No newline at end of file
diff --git a/src/pods/toolbar/components/delete-button/delete-table.module.css b/src/pods/toolbar/components/delete-button/delete-table.module.css
new file mode 100644
index 00000000..afbe84b9
--- /dev/null
+++ b/src/pods/toolbar/components/delete-button/delete-table.module.css
@@ -0,0 +1,6 @@
+.menssage {
+    font-size: var(--fs-m);
+    color: var(--text-color);
+    text-align: center;
+    margin: 0 0 var(--space-md);
+}
\ No newline at end of file