diff --git a/src/Pages/AdminArea/Roles/index.js b/src/Pages/AdminArea/Roles/index.js
index dbf4173..61a2c07 100644
--- a/src/Pages/AdminArea/Roles/index.js
+++ b/src/Pages/AdminArea/Roles/index.js
@@ -23,6 +23,7 @@ import {
   DeleteOutlined,
   EditOutlined,
   PlusOutlined,
+  QuestionCircleOutlined,
   SaveOutlined,
 } from "@ant-design/icons";
 import { useContext, useState } from "react";
@@ -303,10 +304,12 @@ function Role({ treeData, role, webSocketContext, notificationApi }) {
     );
   };
 
+  const getUsersInRole = () => {
+    return webSocketContext.AllUsers.filter((user) => user.RoleId === role.Id);
+  };
+
   const UserAvatarsInRole = () => {
-    const usersInRole = webSocketContext.AllUsers.filter(
-      (user) => user.RoleId === role.Id
-    );
+    const usersInRole = getUsersInRole();
 
     if (usersInRole.length > 0) {
       let avatars = [];
@@ -337,6 +340,13 @@ function Role({ treeData, role, webSocketContext, notificationApi }) {
     return null;
   };
 
+  const onDeleteClick = () => {
+    webSocketContext.SendSocketMessage(
+      SentMessagesCommands.AdminAreaDeleteRole,
+      { RoleId: role.Id }
+    );
+  };
+
   return (
     <Collapse
       collapsible={editMode ? "icon" : "header"}
@@ -346,9 +356,18 @@ function Role({ treeData, role, webSocketContext, notificationApi }) {
           key: "2",
           extra: editMode ? (
             <Space key="spaceedit" style={{ paddingLeft: 10 }} size="small">
-              <Tooltip title="Delete">
-                <DeleteOutlined />
-              </Tooltip>
+              {!role.Master && getUsersInRole().length === 0 && (
+                <Popconfirm
+                  title="Delete role"
+                  description="Are you sure to delete this role?"
+                  icon={<QuestionCircleOutlined style={{ color: "red" }} />}
+                  onConfirm={() => onDeleteClick()}
+                >
+                  <Tooltip title="Delete">
+                    <DeleteOutlined />
+                  </Tooltip>
+                </Popconfirm>
+              )}
               <Tooltip title="Move role up">
                 <ArrowUpOutlined onClick={() => onMoveUpClick()} />
               </Tooltip>
diff --git a/src/utils.js b/src/utils.js
index 30c906a..1d7e21d 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -141,6 +141,7 @@ const ReceivedMessagesCommands = {
   AdminAreaNewRoleCreated: 19,
   AdminAreaRoleUpdated: 20,
   AdminAreaUpdateRoleSortingOrder: 21,
+  AdminAreaRoleDeleted: 22,
 };
 
 // commands sent to the backend server
@@ -154,6 +155,7 @@ export const SentMessagesCommands = {
   AdminAreaCreateNewRole: 7,
   AdminAreaUpdateRole: 8,
   AdminAreaUpdateRoleSortingOrder: 9,
+  AdminAreaDeleteRole: 10,
 };
 
 export function WebSocketProvider({
@@ -648,6 +650,33 @@ export function WebSocketProvider({
             return newArr;
           });
           break;
+        case ReceivedMessagesCommands.AdminAreaRoleDeleted:
+          setAllRoles((arr) => {
+            let newArr = [...arr];
+
+            const deletedRole = newArr.find((r) => r.Id === body.RoleId);
+
+            newArr = newArr.filter((role) => role.Id !== body.RoleId);
+
+            for (let i = 0; i < newArr.length; i++) {
+              if (newArr[i].SortingOrder > deletedRole.SortingOrder) {
+                newArr[i].SortingOrder = newArr[i].SortingOrder - 1;
+              }
+            }
+
+            return newArr;
+          });
+
+          setAdminAreaRolesPermissions((arr) => {
+            let newArr = [...arr];
+
+            newArr = newArr.filter(
+              (rolePermission) => rolePermission.RoleId !== body.RoleId
+            );
+
+            return newArr;
+          });
+          break;
 
         default:
           console.error("unknown command", cmd);