diff --git a/src/ui/components/userDetail/userRoles/UserRolesList.tsx b/src/ui/components/userDetail/userRoles/UserRolesList.tsx
index 61657aac..88db25bd 100644
--- a/src/ui/components/userDetail/userRoles/UserRolesList.tsx
+++ b/src/ui/components/userDetail/userRoles/UserRolesList.tsx
@@ -113,7 +113,7 @@ export default function UserRolesList(props: UserRolesListProps) {
 				<DeleteUserRoleDialog
 					roleToDelete={roleToDelete}
 					userId={userId}
-					roles={roles}
+					assignedRoles={assignedRoles}
 					setAssignedRoles={setAssignedRoles}
 					closeDialog={() => {
 						setRoleToDelete(undefined);
diff --git a/src/ui/components/userroles/components/EditPermissions.tsx b/src/ui/components/userroles/components/EditPermissions.tsx
deleted file mode 100644
index d29d9ff2..00000000
--- a/src/ui/components/userroles/components/EditPermissions.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import { useState } from "react";
-
-import Badge from "../../badge";
-
-import { Role } from "../types";
-import "./editPermissions.scss";
-
-type CheckboxInputFieldProps = Omit<JSX.IntrinsicElements["input"], "onChange"> & {
-	label?: string;
-	focusText?: string;
-	permissions: string[];
-	onPermissionsChange: (permissions: string[]) => void;
-	selectedRole: Role;
-};
-
-export default function EditPermissions(props: CheckboxInputFieldProps) {
-	const { focusText = "", permissions, selectedRole, ...rest } = props;
-	const [isFocused, setIsFocused] = useState(false);
-
-	return (
-		<div className="edit-permissions-container">
-			<div className="input-field-container">
-				{props.label && (
-					<label
-						htmlFor={props.name}
-						className="text-small input-label">
-						{props.label}
-					</label>
-				)}
-				<div className={`input-field-inset ${isFocused ? "input-field-inset-focused" : ""}`}>
-					<input
-						type="text"
-						onFocus={() => setIsFocused(true)}
-						onBlur={() => setIsFocused(false)}
-						onKeyDown={(e) => {
-							if (e.key === "Enter") {
-								const newTag = e.currentTarget.value.trim();
-								if (newTag && permissions.includes(newTag) === false) {
-									alert("90");
-								}
-								e.currentTarget.value = "";
-							}
-						}}
-						{...rest}
-						className={"text-small text-black input-field"}
-					/>
-				</div>
-			</div>
-			{focusText && isFocused ? <p className="focus-text">{focusText}</p> : null}
-			<div className="permissions-list-wrapper">
-				<div className="permissions-list-header">Permissions</div>
-				<div className="permissions-list">
-					{selectedRole.permissions.map((permission) => {
-						return (
-							<div
-								className="permission-item"
-								key={permission}>
-								<Badge
-									size="sm"
-									text={permission}
-								/>
-								<input
-									type="checkbox"
-									id="checkbox"
-								/>
-							</div>
-						);
-					})}
-
-					{permissions.map((tag) => {
-						return (
-							<div
-								className="permission-item"
-								key={tag}>
-								<Badge
-									key={tag}
-									text={tag}
-								/>
-							</div>
-						);
-					})}
-				</div>
-			</div>
-		</div>
-	);
-}
diff --git a/src/ui/components/userroles/components/RolesTable.tsx b/src/ui/components/userroles/components/RolesTable.tsx
index d65b68cf..7ef01e14 100644
--- a/src/ui/components/userroles/components/RolesTable.tsx
+++ b/src/ui/components/userroles/components/RolesTable.tsx
@@ -17,7 +17,8 @@ import { useCallback, useEffect, useState } from "react";
 
 import useRolesService from "../../../../api/userroles/role";
 import Badge from "../../badge";
-import Button from "../../button";
+
+import { ReactComponent as TrashIcon } from "../../../../assets/trash.svg";
 
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../table";
 import { PlaceholderTableRows } from "../../usersListTable/UsersListTable";
@@ -63,35 +64,9 @@ export function RolesTable() {
 			<Table className="theme-blue">
 				<TableHeader>
 					<TableRow>
-						<TableHead className="roles-column">
-							<div className="checkbox-text-container">
-								<input
-									type="checkbox"
-									name="check"
-									id="check"
-									onChange={(e) => {
-										if (e.currentTarget.checked) {
-											setSelectedRolesToDelete(roles.map(({ role }) => role));
-										} else {
-											setSelectedRolesToDelete([]);
-										}
-									}}
-								/>
-								User Roles
-							</div>
-						</TableHead>
+						<TableHead className="roles-column">User Roles</TableHead>
 						<TableHead>
-							<div className="delete-btn-container">
-								Permissions
-								<Button
-									onClick={() => {
-										if (selectedRolesToDelete.length > 0) setShowDeleteDialog(true);
-									}}
-									color={selectedRolesToDelete.length > 0 ? "danger" : "gray"}
-									size="sm">
-									Delete
-								</Button>
-							</div>
+							<div className="delete-btn-container">Permissions</div>
 						</TableHead>
 					</TableRow>
 				</TableHeader>
@@ -113,38 +88,30 @@ export function RolesTable() {
 									setSelectedRole(roles[index]);
 									setShowEditDialog(true);
 								}}>
+								<TableCell>{role}</TableCell>
 								<TableCell>
-									<div className="checkbox-text-container">
-										<input
-											type="checkbox"
-											name="check"
-											id="check"
-											checked={selected}
-											onChange={(e) => {
+									<div className="permissions-container">
+										<div
+											id="permissions"
+											className="permissions">
+											{permissions.map((permission) => {
+												return (
+													<Badge
+														key={permission}
+														text={permission}
+													/>
+												);
+											})}
+										</div>
+										<button
+											onClick={(e) => {
 												e.stopPropagation();
-												if (e.currentTarget.checked) {
-													setSelectedRolesToDelete([...selectedRolesToDelete, role]);
-												} else {
-													setSelectedRolesToDelete(
-														selectedRolesToDelete.filter((r) => r !== role)
-													);
-												}
+												setShowDeleteDialog(true);
+												setSelectedRole(roles[index]);
 											}}
-											onClick={(e) => e.stopPropagation()}
-										/>
-										{role}
-									</div>
-								</TableCell>
-								<TableCell>
-									<div className="permissions-container">
-										{permissions.map((permission) => {
-											return (
-												<Badge
-													key={permission}
-													text={permission}
-												/>
-											);
-										})}
+											className="delete-role">
+											<TrashIcon />
+										</button>
 									</div>
 								</TableCell>
 							</TableRow>
@@ -152,10 +119,11 @@ export function RolesTable() {
 					})}
 				</TableBody>
 			</Table>
-			{showDeleteDialog ? (
+			{showDeleteDialog && selectedRole ? (
 				<DeleteRolesDialog
 					closeDialog={() => setShowDeleteDialog(false)}
 					selectedRoles={selectedRolesToDelete}
+					selectedRole={selectedRole?.role}
 					resetSelectedRoles={() => setSelectedRolesToDelete([])}
 				/>
 			) : null}
diff --git a/src/ui/components/userroles/components/dialogs/DeleteRoles.tsx b/src/ui/components/userroles/components/dialogs/DeleteRoles.tsx
index f009b826..a1f64e50 100644
--- a/src/ui/components/userroles/components/dialogs/DeleteRoles.tsx
+++ b/src/ui/components/userroles/components/dialogs/DeleteRoles.tsx
@@ -25,10 +25,12 @@ import { useUserRolesContext } from "../../context/UserRolesContext";
 import "./deleteRoles.scss";
 
 export default function DeleteRolesDialog({
+	selectedRole,
 	selectedRoles,
 	closeDialog,
 	resetSelectedRoles,
 }: {
+	selectedRole: string;
 	selectedRoles: string[];
 	closeDialog: () => void;
 	resetSelectedRoles: () => void;
@@ -40,26 +42,20 @@ export default function DeleteRolesDialog({
 	const [isDeletingRoles, setIsDeletingRoles] = useState(false);
 
 	async function handleDeleteRoles() {
-		if (selectedRoles.length < 1) {
+		if (typeof selectedRole !== "string") {
 			return;
 		}
-		const promises = [];
-
 		setIsDeletingRoles(true);
 
-		for (let i = 0; i < selectedRoles.length; i++) {
-			promises.push(deleteRole(selectedRoles[i]));
-		}
-
 		try {
-			await Promise.all(promises);
+			await deleteRole(selectedRole);
 			showToast({
 				iconImage: getImageUrl("checkmark-green.svg"),
 				toastType: "success",
 				children: "Role deleted successfully!",
 			});
 			const filteredRoles = roles.filter((r) => {
-				return selectedRoles.includes(r.role) === false;
+				return r.role !== selectedRole;
 			});
 
 			setRoles(filteredRoles);
@@ -81,7 +77,8 @@ export default function DeleteRolesDialog({
 			<DialogContent>
 				<DialogHeader>Delete Roles?</DialogHeader>
 				<p className="you-sure-text">
-					Are you sure you want to delete the selected Roles? This action is irreversible.
+					Are you sure you want to delete Role: <span className="red">{selectedRole}</span>? This action is
+					irreversible.
 				</p>
 				<DialogFooter border="border-none">
 					<Button
diff --git a/src/ui/components/userroles/components/dialogs/DeleteUserRole.tsx b/src/ui/components/userroles/components/dialogs/DeleteUserRole.tsx
index 214803be..66f513ed 100644
--- a/src/ui/components/userroles/components/dialogs/DeleteUserRole.tsx
+++ b/src/ui/components/userroles/components/dialogs/DeleteUserRole.tsx
@@ -11,13 +11,13 @@ export default function DeleteUserRoleDialog({
 	closeDialog,
 	roleToDelete,
 	userId,
-	roles,
+	assignedRoles,
 	setAssignedRoles,
 }: {
 	closeDialog: () => void;
 	roleToDelete: string;
 	userId: string;
-	roles: string[];
+	assignedRoles: string[];
 	setAssignedRoles: (roles: string[]) => void;
 }) {
 	const { showToast } = useContext(PopupContentContext);
@@ -33,7 +33,7 @@ export default function DeleteUserRoleDialog({
 				toastType: "success",
 				children: "Role deleted successfully!",
 			});
-			setAssignedRoles(roles.filter((role) => role !== roleToDelete));
+			setAssignedRoles(assignedRoles.filter((role) => role !== roleToDelete));
 		} catch (error) {
 			showToast({
 				iconImage: getImageUrl("form-field-error-icon.svg"),
diff --git a/src/ui/components/userroles/components/dialogs/EditRole.tsx b/src/ui/components/userroles/components/dialogs/EditRole.tsx
index a9bac078..65e43d6d 100644
--- a/src/ui/components/userroles/components/dialogs/EditRole.tsx
+++ b/src/ui/components/userroles/components/dialogs/EditRole.tsx
@@ -1,14 +1,18 @@
 import { useState } from "react";
 
+import { getImageUrl } from "../../../../../utils";
 import Badge from "../../../badge";
 import Button from "../../../button";
+import IconButton from "../../../common/iconButton";
 import { Dialog, DialogContent, DialogFooter, DialogHeader } from "../../../dialog";
+import TagsInputField from "../../../inputField/TagsInputField";
 import { Role } from "../../types";
-import EditPermissions from "../EditPermissions";
 import "./editRole.scss";
 
 export default function EditRoleDialog({ closeDialog, selectedRole }: { closeDialog: () => void; selectedRole: Role }) {
-	const [isInEditingMode, setIsInEditingMode] = useState(true);
+	const [isInEditingMode, setIsInEditingMode] = useState(false);
+
+	const [permissions, setPermissions] = useState(selectedRole.permissions);
 
 	return (
 		<Dialog closeDialog={closeDialog}>
@@ -22,13 +26,10 @@ export default function EditRoleDialog({ closeDialog, selectedRole }: { closeDia
 								<span className="role-name">{selectedRole.role}</span>
 							</div>
 							<div>
-								<EditPermissions
-									selectedRole={selectedRole}
+								<TagsInputField
+									tags={permissions}
 									label="Add Permissions"
-									onPermissionsChange={() => {
-										alert("hi");
-									}}
-									permissions={[]}
+									onTagsChange={setPermissions}
 									focusText="Write permission name and press enter to add it in the list."
 								/>
 							</div>
@@ -64,11 +65,15 @@ export default function EditRoleDialog({ closeDialog, selectedRole }: { closeDia
 							</div>
 						</div>
 						<DialogFooter justifyContent="space-between">
-							<Button
-								color="gray"
-								onClick={() => setIsInEditingMode(true)}>
-								Edit
-							</Button>
+							<IconButton
+								size="small"
+								text="Edit"
+								tint="var(--color-link)"
+								icon={getImageUrl("edit.svg")}
+								onClick={() => {
+									setIsInEditingMode(true);
+								}}
+							/>
 							<Button
 								onClick={closeDialog}
 								color="gray-outline">
diff --git a/src/ui/components/userroles/components/editPermissions.scss b/src/ui/components/userroles/components/editPermissions.scss
deleted file mode 100644
index ec35f8f9..00000000
--- a/src/ui/components/userroles/components/editPermissions.scss
+++ /dev/null
@@ -1,61 +0,0 @@
-.edit-permissions-container {
-	.focus-text {
-		color: var(--color-gray);
-		font-size: 14px;
-		font-style: normal;
-		font-weight: 400;
-		line-height: normal;
-
-		margin-top: 5px;
-	}
-	.permissions-list-wrapper {
-		width: 100%;
-		max-height: 184px;
-		overflow: scroll;
-
-		margin-top: 16px;
-
-		border: 1px solid var(--color-border-command);
-		border-radius: 12px;
-
-		.permissions-list-header {
-			color: var(--light-foregrounds-fg-muted, #9ca3af);
-			font-size: 12px;
-			font-style: normal;
-			font-weight: 500;
-			line-height: 20px;
-			width: 100%;
-			height: fit-content;
-
-			display: flex;
-			justify-content: space-between;
-
-			padding: 8px 16px;
-			align-items: flex-start;
-			gap: 12px;
-
-			background: rgb(245, 245, 245);
-		}
-
-		.permissions-list {
-			background: var(--color-white);
-			padding: 4px 8px;
-
-			.permission-item {
-				display: flex;
-				justify-content: space-between;
-				cursor: pointer;
-
-				padding: 6px 8px;
-				border-radius: 6px;
-
-				[data-selected="true"] {
-					background: rgb(237, 246, 255);
-				}
-				&:hover {
-					background: rgb(237, 246, 255);
-				}
-			}
-		}
-	}
-}
diff --git a/src/ui/components/userroles/components/rolesTable.scss b/src/ui/components/userroles/components/rolesTable.scss
index e89b1d3b..518bc7dd 100644
--- a/src/ui/components/userroles/components/rolesTable.scss
+++ b/src/ui/components/userroles/components/rolesTable.scss
@@ -1,9 +1,3 @@
-.checkbox-text-container {
-	display: flex;
-	align-items: center;
-	gap: 24px;
-}
-
 .delete-btn-container {
 	display: flex;
 	align-items: center;
@@ -16,5 +10,32 @@
 
 .permissions-container {
 	display: flex;
-	gap: 24px;
+	justify-content: space-between;
+
+	& > .permissions {
+		display: flex;
+		gap: 24px;
+		max-width: 400px;
+		overflow: hidden;
+	}
+
+	& > .delete-role {
+		padding: 6px;
+		border-radius: 3px;
+		border: 1px solid #ddd;
+		background: #fff;
+
+		& > svg > path {
+			fill: rgba(141, 141, 141, 1) !important;
+		}
+
+		&:hover {
+			border: 1px solid #ed344e;
+			background: rgba(237, 52, 78, 0.15);
+
+			& > svg > path {
+				fill: rgba(237, 52, 78, 1) !important;
+			}
+		}
+	}
 }
diff --git a/src/ui/pages/userroles/index.scss b/src/ui/pages/userroles/index.scss
index d9a30445..218b3ee9 100644
--- a/src/ui/pages/userroles/index.scss
+++ b/src/ui/pages/userroles/index.scss
@@ -34,7 +34,7 @@
 
 	.search-add-role-container {
 		display: flex;
-		justify-content: space-between;
+		justify-content: flex-end;
 		align-items: center;
 		margin-bottom: 12px;
 	}
diff --git a/src/ui/pages/userroles/index.tsx b/src/ui/pages/userroles/index.tsx
index c3c74a78..4ea345ad 100644
--- a/src/ui/pages/userroles/index.tsx
+++ b/src/ui/pages/userroles/index.tsx
@@ -20,7 +20,6 @@ import useRolesService from "../../../api/userroles/role";
 import { AppEnvContextProvider } from "../../contexts/AppEnvContext";
 
 import { usePermissionsService } from "../../../api/userroles/role/permissions";
-import Search from "../../components/search";
 import { RolesTable } from "../../components/userroles/components/RolesTable";
 
 import Button from "../../components/button";
@@ -78,10 +77,6 @@ export default function UserRolesList() {
 						your needs.
 					</p>
 					<div className="search-add-role-container">
-						<Search
-							loading
-							onSearch={onSearch}
-						/>
 						<Button
 							onClick={openDialog}
 							color="secondary">