diff --git a/src/store/account/actions.ts b/src/store/account/actions.ts
index 78c9a2e4..4bccda09 100644
--- a/src/store/account/actions.ts
+++ b/src/store/account/actions.ts
@@ -1,6 +1,6 @@
 import {ActionType, createAction, createAsyncAction} from 'typesafe-actions';
 import {Account} from './types';
-import {ApiError, ChangeResponse, RequestPayload} from '../../services/api-client/types';
+import {ApiError, ChangeResponse, DeleteResponse, RequestPayload} from '../../services/api-client/types';
 
 const actions = {
     getAccounts: createAsyncAction(
@@ -16,6 +16,13 @@ const actions = {
     )<RequestPayload<Account>, ChangeResponse<Account | null>, ChangeResponse<Account | null>>(),
     setUpdateAccount: createAction('SET_UPDATED_ACCOUNT')<ChangeResponse<Account | null>>(),
     resetUpdateAccount: createAction('RESET_UPDATED_ACCOUNT')<null>(),
+    deleteAccount: createAsyncAction(
+        'DELETE_ACCOUNT_REQUEST',
+        'DELETE_ACCOUNT_SUCCESS',
+        'DELETE_ACCOUNT_FAILURE'
+    )<RequestPayload<string>, DeleteResponse<string | null>, DeleteResponse<string | null>>(),
+    resetDeletedAccount: createAction('RESET_DELETED_ACCOUNT')<null>(),
+    setDeleteAccount: createAction('SET_DELETE_ACCOUNT')<DeleteResponse<string | null>>(),
 };
 
 
diff --git a/src/store/account/reducer.ts b/src/store/account/reducer.ts
index 180af7c6..54de23de 100644
--- a/src/store/account/reducer.ts
+++ b/src/store/account/reducer.ts
@@ -2,13 +2,14 @@ import { createReducer } from 'typesafe-actions';
 import { combineReducers } from 'redux';
 import { Account } from './types';
 import actions, { ActionTypes } from './actions';
-import {ApiError, ChangeResponse} from "../../services/api-client/types";
+import {ApiError, ChangeResponse, DeleteResponse} from "../../services/api-client/types";
 
 type StateType = Readonly<{
   data: Account[] | null;
   loading: boolean;
   failed: ApiError | null;
   savedAccount: ChangeResponse<Account | null>;
+  deletedAccount: DeleteResponse<string | null>;
 }>;
 
 const initialState: StateType = {
@@ -22,6 +23,13 @@ const initialState: StateType = {
     error: null,
     data : null
   },
+  deletedAccount: <DeleteResponse<string | null>>{
+    loading: false,
+    success: false,
+    failure: false,
+    error: null,
+    data : null
+  },
 };
 
 const data = createReducer<Account[], ActionTypes>(initialState.data as Account[])
@@ -45,10 +53,18 @@ const updatedAccount = createReducer<ChangeResponse<Account | null>, ActionTypes
     .handleAction(actions.setUpdateAccount, (store, action) => action.payload)
     .handleAction(actions.resetUpdateAccount, () => initialState.savedAccount)
 
+const deleteAccount = createReducer<DeleteResponse<string | null>, ActionTypes>(initialState.deletedAccount)
+    .handleAction(actions.deleteAccount.request, () => initialState.deletedAccount)
+    .handleAction(actions.deleteAccount.success, (store, action) => action.payload)
+    .handleAction(actions.deleteAccount.failure, (store, action) => action.payload)
+    .handleAction(actions.setDeleteAccount, (store, action) => action.payload)
+    .handleAction(actions.resetDeletedAccount, () => initialState.deletedAccount)
+
 
 export default combineReducers({
   data,
   loading,
   failed,
-  updatedAccount
+  updatedAccount,
+  deleteAccount
 });
diff --git a/src/store/account/sagas.ts b/src/store/account/sagas.ts
index 42fea20d..e00a03f6 100644
--- a/src/store/account/sagas.ts
+++ b/src/store/account/sagas.ts
@@ -1,8 +1,9 @@
-import {all, call, put, takeLatest} from 'redux-saga/effects';
-import {ApiError, ApiResponse, ChangeResponse} from '../../services/api-client/types';
+import {all, call, put, select, takeLatest} from 'redux-saga/effects';
+import {ApiError, ApiResponse, ChangeResponse, DeleteResponse} from '../../services/api-client/types';
 import {Account} from './types'
 import service from './service';
 import actions from './actions';
+import {deletePeer} from "../peer/sagas";
 
 export function* getAccounts(action: ReturnType<typeof actions.getAccounts.request>): Generator {
     try {
@@ -55,10 +56,55 @@ export function* updateAccount(action: ReturnType<typeof actions.updateAccount.r
     }
 }
 
+export function* deleteAccount(
+    action: ReturnType<typeof actions.deleteAccount.request>
+): Generator {
+    try {
+        yield call(actions.setDeleteAccount, {
+            loading: true,
+            success: false,
+            failure: false,
+            error: null,
+            data: null,
+        } as DeleteResponse<string | null>);
+
+        const effect = yield call(service.deleteAccount, action.payload);
+        const response = effect as ApiResponse<any>;
+
+        yield put(
+            actions.deleteAccount.success({
+                loading: false,
+                success: true,
+                failure: false,
+                error: null,
+                data: response.body,
+            } as DeleteResponse<string | null>)
+        );
+
+        const accounts = (yield select((state) => state.peer.data)) as Account[];
+        yield put(
+            actions.getAccounts.success(
+                accounts.filter((p: Account) => p.id !== action.payload.payload)
+            )
+        );
+    } catch (err) {
+        yield put(
+            actions.deleteAccount.failure({
+                loading: false,
+                success: false,
+                failure: false,
+                error: err as ApiError,
+                data: null,
+            } as DeleteResponse<string | null>)
+        );
+    }
+}
+
 export default function* sagas(): Generator {
     yield all([
         takeLatest(actions.getAccounts.request, getAccounts),
         takeLatest(actions.updateAccount.request, updateAccount),
+        takeLatest(actions.deleteAccount.request, deleteAccount),
     ]);
 }
 
diff --git a/src/store/account/service.ts b/src/store/account/service.ts
index 128597ef..f05d5792 100644
--- a/src/store/account/service.ts
+++ b/src/store/account/service.ts
@@ -15,5 +15,11 @@ export default {
         `/api/accounts/${id}`,
         payload
     );
-  }
+  },
+  async deleteAccount(payload:RequestPayload<string>): Promise<ApiResponse<any>> {
+    return apiClient.delete<any>(
+        `/api/accounts/` + payload.payload,
+        payload
+    );
+  },
 };
diff --git a/src/views/Settings.tsx b/src/views/Settings.tsx
index efa9e98f..1f0317c8 100644
--- a/src/views/Settings.tsx
+++ b/src/views/Settings.tsx
@@ -18,8 +18,6 @@ import {
   Radio,
   Input,
   RadioChangeEvent,
-  Alert,
-  Progress,
   Menu,
   MenuProps,
 } from "antd";
@@ -50,12 +48,15 @@ import { actions as policyActions } from "../store/policy";
 import { actions as nsGroupActions } from "../store/nameservers";
 import { actions as routeActions } from "../store/route";
 import { actions as userActions } from "../store/user";
+import {useOidc} from "@axa-fr/react-oidc";
+import {getConfig} from "../config";
 
 const { Title, Paragraph, Text } = Typography;
 
 const styleNotification = { marginTop: 85 };
 
 export const Settings = () => {
+  const { logout } = useOidc();
   const { getTokenSilently } = useGetTokenSilently();
   const dispatch = useDispatch();
   const { pageSize, onChangePageSize, pageSizeOptions } = usePageSizeHelpers(
@@ -77,6 +78,11 @@ export const Settings = () => {
   const [groupsClicked, setGroupsClicked] = useState(false);
   const [billingClicked, setBillingClicked] = useState(false);
   const [authClicked, setAuthClicked] = useState(true);
+  const [dangerClicked, setDangerClicked] = useState(false);
+  const [accountDeleting, setAccountDeleting] = useState(false);
+
+  const [isOwner, setIsOwner] = useState(false);
+
 
   const [filterGroup, setFilterGroup] = useState([]);
   const [textToSearch, setTextToSearch] = useState(
@@ -88,6 +94,7 @@ export const Settings = () => {
   const {} = useGetGroupTagHelpers();
 
   const accounts = useSelector((state: RootState) => state.account.data);
+  const accountDeleted = useSelector((state: RootState) => state.account.deleteAccount);
   const failed = useSelector((state: RootState) => state.account.failed);
   const loading = useSelector((state: RootState) => state.account.loading);
   const updatedAccount = useSelector(
@@ -137,6 +144,16 @@ export const Settings = () => {
   const { confirm } = Modal;
 
   const [form] = Form.useForm();
+
+  useEffect(() => {
+    if (users) {
+      let currentUser = users.find((user) => user?.is_current);
+      if (currentUser) {
+        setIsOwner(currentUser.role === "owner");
+      }
+    }
+  }, [users]);
+
   useEffect(() => {
     dispatch(
       accountActions.getAccounts.request({
@@ -202,6 +219,21 @@ export const Settings = () => {
   };
 
   useEffect(() => {
+    if (accountDeleted.success) {
+      showDeleteAccountMSG()
+      return
+    }
+
+    if (accountDeleted.failure) {
+      setAccountDeleting(false)
+      return
+    }
+  }, [accountDeleted]);
+
+  useEffect(() => {
+    if (accounts.length < 1 && accountDeleting) {
+      return;
+    }
     if (accounts.length < 1) {
       console.debug(
         "invalid account data returned from the Management API",
@@ -514,7 +546,7 @@ export const Settings = () => {
     return false;
   };
 
-  const showConfirmDelete = (record: any) => {
+  const showConfirmDeleteGroup = (record: any) => {
     confirm({
       icon: <ExclamationCircleOutlined />,
       title: <span className="font-500">Delete group {record.name}</span>,
@@ -537,6 +569,54 @@ export const Settings = () => {
       onCancel() {},
     });
   };
+
+  const showConfirmDeleteAccount = () => {
+    confirm({
+      icon: <ExclamationCircleOutlined />,
+      title: <span className="font-500">Delete NetBird Account</span>,
+      okText: "Delete",
+      width: 600,
+      content: (
+          <Space direction="vertical" size="small">
+            <Paragraph>Are you sure you want to delete your NetBird account?</Paragraph>
+          </Space>
+      ),
+      okType: "danger",
+      onOk() {
+        setAccountDeleting(true)
+        dispatch(
+            accountActions.deleteAccount.request({
+              getAccessTokenSilently: getTokenSilently,
+              payload: accounts[0].id,
+            })
+        );
+      },
+      onCancel() {},
+    });
+  };
+  const config = getConfig();
+  const showDeleteAccountMSG = () => {
+    setTimeout(
+        () => {logout("",{client_id: config.clientId})}, 5000);
+    confirm({
+      icon: <ExclamationCircleOutlined />,
+      title: <span className="font-500">NetBird Account deleted</span>,
+      okText: "Logout now",
+      width: 600,
+      content: (
+          <Space direction="vertical" size="small">
+            <Paragraph>Your account has been deleted. Your session will log out from your session in 5 seconds.</Paragraph>
+          </Space>
+      ),
+      okType: "primary",
+      onOk() {
+        logout("",{client_id: config.clientId})
+      },
+      onCancel() {},
+    });
+  };
+
+
   const deleteKey = "deleting";
   useEffect(() => {
     const style = { marginTop: 85 };
@@ -570,16 +650,25 @@ export const Settings = () => {
         setAuthClicked(true);
         setGroupsClicked(false);
         setBillingClicked(false);
+        setDangerClicked(false);
         break;
       case "groups":
         setGroupsClicked(true);
         setBillingClicked(false);
         setAuthClicked(false);
+        setDangerClicked(false);
         break;
       case "billing":
         setBillingClicked(true);
         setAuthClicked(false);
         setGroupsClicked(false);
+        setDangerClicked(false);
+        break;
+      case "danger":
+        setBillingClicked(false);
+        setAuthClicked(false);
+        setGroupsClicked(false);
+        setDangerClicked(true);
         break;
     }
   };
@@ -589,7 +678,8 @@ export const Settings = () => {
     key: React.Key,
     icon?: React.ReactNode,
     children?: MenuItem[],
-    type?: "group"
+    type?: "group",
+    disabled?: boolean
   ): MenuItem {
     return {
       key,
@@ -597,6 +687,7 @@ export const Settings = () => {
       children,
       label,
       type,
+      disabled,
     } as MenuItem;
   }
 
@@ -605,81 +696,236 @@ export const Settings = () => {
       "System settings",
       "sub2",
       <SettingOutlined />,
-      [getItem("Authentication", "auth"), getItem("Groups", "groups")],
+      [getItem("Authentication", "auth"), getItem("Groups", "groups"), getItem("Danger zone", "danger", undefined, undefined, undefined, !isOwner)],
       "group"
     ),
   ];
 
-  useEffect(() => {}, [groupsClicked, billingClicked, authClicked]);
-  const renderSettingForm = () => {
+  useEffect(() => {}, [groupsClicked, billingClicked, authClicked, dangerClicked]);
+  const renderGroupsSettingForm = () => {
+    return(
+        <>
+          <div
+              style={{
+                color: "rgba(0, 0, 0, 0.88)",
+                fontWeight: "500",
+                fontSize: "18px",
+                marginBottom: "20px",
+              }}
+          >
+            User groups
+          </div>
+          <div>
+            <Row>
+              <Col span={12}>
+                <Form.Item name="groups_propagation_enabled" label="">
+                  <div
+                      style={{
+                        display: "flex",
+                        gap: "15px",
+                      }}
+                  >
+                    <Switch
+                        onChange={(checked) => {
+                          setGroupsPropagationEnabled(checked);
+                        }}
+                        size="small"
+                        checked={groupsPropagationEnabled}
+                    />
+                    <div>
+                      <label
+                          style={{
+                            color: "rgba(0, 0, 0, 0.88)",
+                            fontSize: "14px",
+                            fontWeight: "500",
+                          }}
+                      >
+                        Enable user group propagation
+                        <Tooltip title="The user group propagation will take effect on the next auto-groups update for a user.">
+                          <Text
+                              style={{
+                                marginLeft: "5px",
+                                fontSize: "14px",
+                                color: "#bdbdbe",
+                              }}
+                              type={"secondary"}
+                          >
+                            <QuestionCircleFilled />
+                          </Text>
+                        </Tooltip>
+                      </label>
+                      <Paragraph
+                          type={"secondary"}
+                          style={{
+                            marginTop: "-2",
+                            fontWeight: "400",
+                            marginBottom: "0",
+                          }}
+                      >
+                        Allow group propagation from user’s auto-groups to
+                        peers, sharing membership information
+                      </Paragraph>
+                    </div>
+                  </div>
+                </Form.Item>
+              </Col>
+            </Row>
+            {(!isNetBirdHosted() || isLocalDev()) && (
+                <>
+                  <Row>
+                    <Col span={12}>
+                      <Form.Item name="jwt_groups_enabled" label="">
+                        <div
+                            style={{
+                              display: "flex",
+                              gap: "15px",
+                            }}
+                        >
+                          <Switch
+                              onChange={(checked) => {
+                                setJwtGroupsEnabled(checked);
+                              }}
+                              size="small"
+                              checked={jwtGroupsEnabled}
+                          />
+                          <div>
+                            <label
+                                style={{
+                                  color: "rgba(0, 0, 0, 0.88)",
+                                  fontSize: "14px",
+                                  fontWeight: "500",
+                                }}
+                            >
+                              Enable JWT group sync
+                            </label>
+                            <Paragraph
+                                type={"secondary"}
+                                style={{
+                                  marginTop: "-2",
+                                  fontWeight: "400",
+                                  marginBottom: "0",
+                                }}
+                            >
+                              Extract & sync groups from JWT claims with user’s
+                              auto-groups, auto-creating groups from tokens.
+                            </Paragraph>
+                          </div>
+                        </div>
+                      </Form.Item>
+                    </Col>
+                  </Row>
+                  <Row>
+                    <Col span={12}>
+                      <label
+                          style={{
+                            color: "rgba(0, 0, 0, 0.88)",
+                            fontSize: "14px",
+                            fontWeight: "500",
+                          }}
+                      >
+                        JWT claim
+                      </label>
+                      <Paragraph
+                          type={"secondary"}
+                          style={{
+                            marginTop: "-2",
+                            fontWeight: "400",
+                            marginBottom: "5px",
+                          }}
+                      >
+                        Specify the JWT claim for extracting group names, e.g.,
+                        roles or groups, to add to account groups (this claim should contain a list of group names).
+                      </Paragraph>
+                    </Col>
+                  </Row>
+                  <Row>
+                    <Col lg={6}>
+                      <Form.Item name="jwt_groups_claim_name">
+                        <Input
+                            value={jwtGroupsClaimName}
+                            autoComplete="off"
+                            onKeyDown={(event) => {
+                              if (event.code === "Space") event.preventDefault();
+                            }}
+                            onChange={(e) => {
+                              let val = e.target.value;
+                              var t = val.replace(/ /g, "");
+                              setJwtGroupsClaimName(t);
+                            }}
+                        />
+                      </Form.Item>
+                    </Col>
+                  </Row>
+                </>
+            )}
+          </div>
+        </>
+    )
+  }
+
+  const renderAuthSettingsForm = () => {
     return (
-      <Form
-        name="basic"
-        autoComplete="off"
-        form={form}
-        onFinish={handleFormSubmit}
-      >
-        <Card loading={loading} defaultValue={"Enabled"}>
+        <>
           <div
-            style={{
-              color: "rgba(0, 0, 0, 0.88)",
-              fontWeight: "500",
-              fontSize: "18px",
-              marginBottom: "20px",
-            }}
+              style={{
+                color: "rgba(0, 0, 0, 0.88)",
+                fontWeight: "500",
+                fontSize: "18px",
+                marginBottom: "20px",
+              }}
           >
-            {groupsClicked ? "User groups" : "Authentication"}
+            Authentication
           </div>
-          <div className={groupsClicked ? "d-none" : ""}>
+          <div >
             <Row>
               <Col span={12}>
                 {(isNetBirdHosted() || isLocalDev()) && <Form.Item name="peer_approval_enabled" label="">
                   <div
-                    style={{
-                      display: "flex",
-                      gap: "15px",
-                    }}
+                      style={{
+                        display: "flex",
+                        gap: "15px",
+                      }}
                   >
                     <Switch
-                      onChange={(checked) => {
-                        setFormPeerApprovalEnabled(checked);
-                      }}
-                      size="small"
-                      checked={formPeerApprovalEnabled}
+                        onChange={(checked) => {
+                          setFormPeerApprovalEnabled(checked);
+                        }}
+                        size="small"
+                        checked={formPeerApprovalEnabled}
                     />
                     <div>
                       <label
-                        style={{
-                          color: "rgba(0, 0, 0, 0.88)",
-                          fontSize: "14px",
-                          fontWeight: "500",
-                        }}
+                          style={{
+                            color: "rgba(0, 0, 0, 0.88)",
+                            fontSize: "14px",
+                            fontWeight: "500",
+                          }}
                       >
                         Peer approval{" "}
                         <Tooltip
-                          title="Peer approval requires that every newly added peer
+                            title="Peer approval requires that every newly added peer
                           will require approval by an administrator before it can connect to other peers.
                           You can approve peers in the peers tab."
                         >
                           <Text
-                            style={{
-                              marginLeft: "5px",
-                              fontSize: "14px",
-                              color: "#bdbdbe",
-                            }}
-                            type={"secondary"}
+                              style={{
+                                marginLeft: "5px",
+                                fontSize: "14px",
+                                color: "#bdbdbe",
+                              }}
+                              type={"secondary"}
                           >
                             <QuestionCircleFilled />
                           </Text>
                         </Tooltip>
                       </label>
                       <Paragraph
-                        type={"secondary"}
-                        style={{
-                          marginTop: "-2",
-                          fontWeight: "400",
-                          marginBottom: "0",
-                        }}
+                          type={"secondary"}
+                          style={{
+                            marginTop: "-2",
+                            fontWeight: "400",
+                            marginBottom: "0",
+                          }}
                       >
                         Require peers to be approved by an administrator
                       </Paragraph>
@@ -688,52 +934,52 @@ export const Settings = () => {
                 </Form.Item>}
                 <Form.Item name="peer_login_expiration_enabled" label="">
                   <div
-                    style={{
-                      display: "flex",
-                      gap: "15px",
-                    }}
+                      style={{
+                        display: "flex",
+                        gap: "15px",
+                      }}
                   >
                     <Switch
-                      onChange={(checked) => {
-                        setFormPeerExpirationEnabled(checked);
-                      }}
-                      size="small"
-                      checked={formPeerExpirationEnabled}
+                        onChange={(checked) => {
+                          setFormPeerExpirationEnabled(checked);
+                        }}
+                        size="small"
+                        checked={formPeerExpirationEnabled}
                     />
                     <div>
                       <label
-                        style={{
-                          color: "rgba(0, 0, 0, 0.88)",
-                          fontSize: "14px",
-                          fontWeight: "500",
-                        }}
+                          style={{
+                            color: "rgba(0, 0, 0, 0.88)",
+                            fontSize: "14px",
+                            fontWeight: "500",
+                          }}
                       >
                         Peer login expiration{" "}
                         <Tooltip
-                          title="Peer login expiration allows to periodically
-                                request re-authentication of peers that were
-                                added with the SSO login. You can disable the
-                                expiration per peer in the peers tab."
+                            title="Peer login expiration allows to periodically
+                                  request re-authentication of peers that were
+                                  added with the SSO login. You can disable the
+                                  expiration per peer in the peers tab."
                         >
                           <Text
-                            style={{
-                              marginLeft: "5px",
-                              fontSize: "14px",
-                              color: "#bdbdbe",
-                            }}
-                            type={"secondary"}
+                              style={{
+                                marginLeft: "5px",
+                                fontSize: "14px",
+                                color: "#bdbdbe",
+                              }}
+                              type={"secondary"}
                           >
                             <QuestionCircleFilled />
                           </Text>
                         </Tooltip>
                       </label>
                       <Paragraph
-                        type={"secondary"}
-                        style={{
-                          marginTop: "-2",
-                          fontWeight: "400",
-                          marginBottom: "0",
-                        }}
+                          type={"secondary"}
+                          style={{
+                            marginTop: "-2",
+                            fontWeight: "400",
+                            marginBottom: "0",
+                          }}
                       >
                         Request periodic re-authentication of peers registered
                         with SSO
@@ -746,21 +992,21 @@ export const Settings = () => {
             <Row>
               <Col span={12}>
                 <label
-                  style={{
-                    color: "rgba(0, 0, 0, 0.88)",
-                    fontSize: "14px",
-                    fontWeight: "500",
-                  }}
+                    style={{
+                      color: "rgba(0, 0, 0, 0.88)",
+                      fontSize: "14px",
+                      fontWeight: "500",
+                    }}
                 >
                   Peer login expires in
                 </label>
                 <Paragraph
-                  type={"secondary"}
-                  style={{
-                    marginTop: "-2",
-                    fontWeight: "400",
-                    marginBottom: "5px",
-                  }}
+                    type={"secondary"}
+                    style={{
+                      marginTop: "-2",
+                      fontWeight: "400",
+                      marginBottom: "5px",
+                    }}
                 >
                   Time after which every peer added with SSO login will require
                   re-authentication
@@ -769,187 +1015,127 @@ export const Settings = () => {
             </Row>
 
             <Form.Item
-              name="peer_login_expiration_formatted"
-              rules={[{ validator: checkExpiresIn }]}
+                name="peer_login_expiration_formatted"
+                rules={[{ validator: checkExpiresIn }]}
             >
               <ExpiresInInput
-                disabled={!formPeerExpirationEnabled}
-                options={Array.of(
-                  { key: "hour", title: "Hours" },
-                  {
-                    key: "day",
-                    title: "Days",
-                  }
-                )}
+                  disabled={!formPeerExpirationEnabled}
+                  options={Array.of(
+                      { key: "hour", title: "Hours" },
+                      {
+                        key: "day",
+                        title: "Days",
+                      }
+                  )}
               />
             </Form.Item>
           </div>
-          <div className={!groupsClicked ? "d-none" : ""}>
+          <Col
+              span={24}
+              style={{ marginTop: "10px", marginBottom: "24px" }}
+          >
+            <Text type={"secondary"}>
+              Learn more about
+              <a
+                  target="_blank"
+                  rel="noreferrer"
+                  href="https://docs.netbird.io/how-to/enforce-periodic-user-authentication"
+              >
+                {" "}
+                login expiration
+              </a>
+            </Text>
+          </Col>
+        </>
+    )
+  }
+
+  const renderDangerSettingsForm = () => {
+    return (
+        <>
+          <div
+              style={{
+                color: "rgba(0, 0, 0, 0.88)",
+                fontWeight: "500",
+                fontSize: "18px",
+                marginBottom: "20px",
+              }}
+          >
+            Danger zone
+          </div>
+          <div >
             <Row>
               <Col span={12}>
-                <Form.Item name="groups_propagation_enabled" label="">
+                <Form.Item label="">
                   <div
-                    style={{
-                      display: "flex",
-                      gap: "15px",
-                    }}
-                  >
-                    <Switch
-                      onChange={(checked) => {
-                        setGroupsPropagationEnabled(checked);
+                      style={{
+                        display: "flex",
+                        gap: "15px",
                       }}
-                      size="small"
-                      checked={groupsPropagationEnabled}
-                    />
+                  >
                     <div>
                       <label
-                        style={{
-                          color: "rgba(0, 0, 0, 0.88)",
-                          fontSize: "14px",
-                          fontWeight: "500",
-                        }}
+                          style={{
+                            // color: "rgba(0, 0, 0, 0.88)",
+                            color: "red",
+                            fontSize: "14px",
+                            fontWeight: "500",
+                          }}
                       >
-                        Enable user group propagation
-                        <Tooltip title="The user group propagation will take effect on the next auto-groups update for a user.">
-                          <Text
-                            style={{
-                              marginLeft: "5px",
-                              fontSize: "14px",
-                              color: "#bdbdbe",
-                            }}
-                            type={"secondary"}
-                          >
-                            <QuestionCircleFilled />
-                          </Text>
-                        </Tooltip>
+                        Delete NetBird account
                       </label>
                       <Paragraph
-                        type={"secondary"}
-                        style={{
-                          marginTop: "-2",
-                          fontWeight: "400",
-                          marginBottom: "0",
-                        }}
+                          type={"secondary"}
+                          style={{
+                            marginTop: "-2",
+                            fontWeight: "500",
+                            marginBottom: "0",
+                          }}
                       >
-                        Allow group propagation from user’s auto-groups to
-                        peers, sharing membership information
+                        Before proceeding to delete your Netbird account, please be aware that this action is irreversible.
+                        Once your account is deleted, you will permanently lose access to all associated data,
+                        including your peers, users, groups, policies, and routes.
                       </Paragraph>
                     </div>
                   </div>
                 </Form.Item>
+                <Form.Item style={{ marginBottom: "0" }}>
+                  <Button
+                      danger
+                      onClick={showConfirmDeleteAccount}>
+                    Delete account
+                  </Button>
+                </Form.Item>
               </Col>
             </Row>
-            {(!isNetBirdHosted() || isLocalDev()) && (
-              <>
-                <Row>
-                  <Col span={12}>
-                    <Form.Item name="jwt_groups_enabled" label="">
-                      <div
-                        style={{
-                          display: "flex",
-                          gap: "15px",
-                        }}
-                      >
-                        <Switch
-                          onChange={(checked) => {
-                            setJwtGroupsEnabled(checked);
-                          }}
-                          size="small"
-                          checked={jwtGroupsEnabled}
-                        />
-                        <div>
-                          <label
-                            style={{
-                              color: "rgba(0, 0, 0, 0.88)",
-                              fontSize: "14px",
-                              fontWeight: "500",
-                            }}
-                          >
-                            Enable JWT group sync
-                          </label>
-                          <Paragraph
-                            type={"secondary"}
-                            style={{
-                              marginTop: "-2",
-                              fontWeight: "400",
-                              marginBottom: "0",
-                            }}
-                          >
-                            Extract & sync groups from JWT claims with user’s
-                            auto-groups, auto-creating groups from tokens.
-                          </Paragraph>
-                        </div>
-                      </div>
-                    </Form.Item>
-                  </Col>
-                </Row>
-                <Row>
-                  <Col span={12}>
-                    <label
-                      style={{
-                        color: "rgba(0, 0, 0, 0.88)",
-                        fontSize: "14px",
-                        fontWeight: "500",
-                      }}
-                    >
-                      JWT claim
-                    </label>
-                    <Paragraph
-                      type={"secondary"}
-                      style={{
-                        marginTop: "-2",
-                        fontWeight: "400",
-                        marginBottom: "5px",
-                      }}
-                    >
-                      Specify the JWT claim for extracting group names, e.g.,
-                      roles or groups, to add to account groups (this claim should contain a list of group names).
-                    </Paragraph>
-                  </Col>
-                </Row>
-                <Row>
-                  <Col lg={6}>
-                    <Form.Item name="jwt_groups_claim_name">
-                      <Input
-                        value={jwtGroupsClaimName}
-                        autoComplete="off"
-                        onKeyDown={(event) => {
-                          if (event.code === "Space") event.preventDefault();
-                        }}
-                        onChange={(e) => {
-                          let val = e.target.value;
-                          var t = val.replace(/ /g, "");
-                          setJwtGroupsClaimName(t);
-                        }}
-                      />
-                    </Form.Item>
-                  </Col>
-                </Row>
-              </>
-            )}
           </div>
-          <Col
-            span={24}
-            style={{ marginTop: "10px", marginBottom: "24px" }}
-            className={groupsClicked ? "d-none" : ""}
-          >
-            <Text type={"secondary"}>
-              Learn more about
-              <a
-                target="_blank"
-                rel="noreferrer"
-                href="https://docs.netbird.io/how-to/enforce-periodic-user-authentication"
-              >
-                {" "}
-                login expiration
-              </a>
-            </Text>
-          </Col>
-          <Form.Item style={{ marginBottom: "0" }}>
+        </>
+    )
+  }
+
+  const renderSettingForm = () => {
+    let loaded = renderAuthSettingsForm()
+    if(groupsClicked) {
+      loaded = renderGroupsSettingForm()
+    }
+    if (dangerClicked) {
+        loaded = renderDangerSettingsForm()
+    }
+
+    return (
+      <Form
+        name="basic"
+        autoComplete="off"
+        form={form}
+        onFinish={handleFormSubmit}
+      >
+        <Card loading={loading} defaultValue={"Enabled"}>
+          {loaded}
+          {!dangerClicked && (<Form.Item style={{ marginBottom: "0" }}>
             <Button type="primary" htmlType="submit">
               Save
             </Button>
-          </Form.Item>
+          </Form.Item>)}
         </Card>
       </Form>
     );
@@ -1355,7 +1541,7 @@ export const Settings = () => {
                                     type={"text"}
                                     disabled={isButtonDisabled}
                                     onClick={() => {
-                                      showConfirmDelete(record);
+                                      showConfirmDeleteGroup(record);
                                     }}
                                   >
                                     Delete
@@ -1371,6 +1557,11 @@ export const Settings = () => {
                 </Row>
               </>
             )}
+            {dangerClicked && (
+                <Row style={{ marginTop: "0", width: "100%" }}>
+                  <Col span={24}>{renderSettingForm()}</Col>
+                </Row>
+            )}
           </Col>
         </Row>
       </Container>