diff --git a/ServiceHost/Areas/Client/Pages/Company/SubAccounts/Index.cshtml b/ServiceHost/Areas/Client/Pages/Company/SubAccounts/Index.cshtml
index 1df655e1..a9e483a1 100644
--- a/ServiceHost/Areas/Client/Pages/Company/SubAccounts/Index.cshtml
+++ b/ServiceHost/Areas/Client/Pages/Company/SubAccounts/Index.cshtml
@@ -348,9 +348,9 @@
 </div> *@
 <!-- End Modal From Bottom For Advance Search -->
 
-
-<div id="MainModal" class="modal fade " aria-labelledby="myModalLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" style="display: none;">
-	<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
+@* modal-dialog-scrollable *@
+<div id="MainModal" class="modal fade" aria-labelledby="myModalLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" style="display: none;">
+	<div class="modal-dialog modal-dialog-centered">
 		<div class="modal-content" id="ModalContent">
 		</div>
 	</div>
diff --git a/ServiceHost/Areas/Client/Pages/Company/SubAccounts/ModalCreateRole.cshtml b/ServiceHost/Areas/Client/Pages/Company/SubAccounts/ModalCreateRole.cshtml
index 210bd6e8..ae639545 100644
--- a/ServiceHost/Areas/Client/Pages/Company/SubAccounts/ModalCreateRole.cshtml
+++ b/ServiceHost/Areas/Client/Pages/Company/SubAccounts/ModalCreateRole.cshtml
@@ -16,26 +16,61 @@
 		</div>
 
 		<div class="modal-body">
-			<div class="container-fluid">
-				<div class="row">
+			<div class="container-fluid p-0">
+				<div class="form-role-section">
+					<div class="form-role-workshop-section">
+						<div class="workshop">
+							<div class="workshop__label">انتخاب کارگاه</div>
+							<div class="workshop__mobile">
+								<svg width="59" height="4" viewBox="0 0 59 4" fill="none" xmlns="http://www.w3.org/2000/svg">
+									<rect width="59" height="4" rx="2" fill="#909090"/>
+								</svg>
+								<div class="workshop__label-mobile mb-3">انتخاب کارگاه برای دسترسی این گروه</div>
+							</div>
+							
+							<div id="workshopItems">
 
-					<div class="col-12 my-1">
-						<div class="from-group position-relative">
-							<input type="text" asp-for="@Model.Title" class="form-control ModelTitle m-0" placeholder="عنوان نقش">
+							</div>
+							
+							<div class="workshop-mobile-footer">
+								<div class="row">
+									<div class="col-6">
+										<button type="button" class="btn-cancel" onclick="hideModalWorkshop()">انصراف</button>
+									</div>
+									<div class="col-6">
+										<button type="button" class="btn-success" onclick="chooseWorkshops()">انتخاب</button>
+									</div>
+								</div>
+							</div>
 						</div>
 					</div>
-
-					<div class="col-12 my-1">
-						
-						<div class="permissionBox">
-							<div id="search-container">
-								<input type="text" id="search-input" class="form-control bg-white my-2" placeholder="جستجو سریع...">
+					
+					<div class="form-role-all-section">
+						<div class="row">
+							<div class="col-12 mb-1">
+								<div class="from-group position-relative">
+									<input type="text" asp-for="@Model.Title" class="form-control ModelTitle m-0" placeholder="عنوان نقش">
+								</div>
+							</div>
+							
+							<div class="col-12 d-md-none mb-1">
+								<button type="button" class="d-flex align-items-center justify-content-between workshop-mobile-btn" onclick="showModalWorkshop()">
+									<div>انتخاب کارگاه</div>
+									<div class="workshop-mobile-btn__badge-number" style="display: none"></div>
+								</button>
 							</div>
 
-							<div id="tree" class="tree-row">
+							<div class="col-12">
+								<div class="permissionBox">
+									<div id="search-container">
+										<input type="text" id="search-input" class="form-control bg-white my-2" placeholder="جستجو سریع...">
+									</div>
+
+									<div id="tree" class="tree-row">
+									</div>
+								</div>
 							</div>
 						</div>
-
 					</div>
 				</div>
 			</div>
@@ -70,6 +105,7 @@
 <script>
 	var antiForgeryToken = $(`@Html.AntiForgeryToken()`).val();
 	var saveNewRoleSubAccountAjax = `@Url.Page("./Index", "CreateRole")`;
+	var workshopListAjax = `@Url.Page("./Index", "WorkshopList")`;
 	var permissionListAjax = `@Url.Page("./Index", "Permissions")`;
 </script>
 <script src="~/assetsclient/pages/SubAccounts/js/ModalCreateRole.js?ver=@clientVersion"></script>
\ No newline at end of file
diff --git a/ServiceHost/Areas/Client/Pages/Company/SubAccounts/ModalEditRole.cshtml b/ServiceHost/Areas/Client/Pages/Company/SubAccounts/ModalEditRole.cshtml
index 0a28eb8d..8dc309e3 100644
--- a/ServiceHost/Areas/Client/Pages/Company/SubAccounts/ModalEditRole.cshtml
+++ b/ServiceHost/Areas/Client/Pages/Company/SubAccounts/ModalEditRole.cshtml
@@ -18,29 +18,65 @@
 		</div>
 
 		<div class="modal-body">
-			<div class="container-fluid">
-				<div class="row">
-					
-					<input type="hidden" name="Id" id="Id" value="@Model.Id" />
-					<div class="col-12 my-1">
-						<div class="from-group position-relative">
-							<input type="text" name="Title" id="Title" value="@Model.Title" class="form-control ModelTitle m-0" placeholder="عنوان نقش">
+			<div class="container-fluid p-0">
+				<div class="form-role-section">
+					<div class="form-role-workshop-section">
+						<div class="workshop">
+							<div class="workshop__label">انتخاب کارگاه</div>
+							<div class="workshop__mobile">
+								<svg width="59" height="4" viewBox="0 0 59 4" fill="none" xmlns="http://www.w3.org/2000/svg">
+									<rect width="59" height="4" rx="2" fill="#909090"/>
+								</svg>
+								<div class="workshop__label-mobile mb-3">انتخاب کارگاه برای دسترسی این گروه</div>
+							</div>
+
+							<div id="workshopItems">
+
+							</div>
+
+							<div class="workshop-mobile-footer">
+								<div class="row">
+									<div class="col-6">
+										<button type="button" class="btn-cancel" onclick="hideModalWorkshop()">انصراف</button>
+									</div>
+									<div class="col-6">
+										<button type="button" class="btn-success" onclick="chooseWorkshops()">انتخاب</button>
+									</div>
+								</div>
+							</div>
 						</div>
 					</div>
 
-					<div class="col-12 my-1">
+					<div class="form-role-all-section">
+						<div class="row">
 
-						<div class="permissionBox">
-							<div id="search-container">
-								<input type="text" id="search-input" class="form-control bg-white my-2" placeholder="جستجو سریع...">
+							<input type="hidden" name="Id" id="Id" value="@Model.Id"/>
+							<div class="col-12 mb-1">
+								<div class="from-group position-relative">
+									<input type="text" name="Title" id="Title" value="@Model.Title" class="form-control ModelTitle m-0" placeholder="عنوان نقش">
+								</div>
+							</div>
+							
+							<div class="col-12 d-md-none mb-1">
+								<button type="button" class="d-flex align-items-center justify-content-between workshop-mobile-btn" onclick="showModalWorkshop()">
+									<div>انتخاب کارگاه</div>
+									<div class="workshop-mobile-btn__badge-number" style="display: none"></div>
+								</button>
 							</div>
 
-							<div id="tree">
+							<div class="col-12">
+								<div class="permissionBox">
+									<div id="search-container">
+										<input type="text" id="search-input" class="form-control bg-white my-2" placeholder="جستجو سریع...">
+									</div>
+
+									<div id="tree">
+									</div>
+
+								</div>
 							</div>
 
 						</div>
-
-
 					</div>
 				</div>
 			</div>
@@ -75,6 +111,7 @@
 	var antiForgeryToken = $(`@Html.AntiForgeryToken()`).val();
 	var saveEditRoleSubAccountAjax = `@Url.Page("./Index", "EditRole")`;
 	var permissionListAjax = `@Url.Page("./Index", "Permissions")`;
+	var workshopListAjax = `@Url.Page("./Index", "WorkshopList")`;
 	var itemsPermission = @Html.Raw(Json.Serialize(Model.Permissions));
 </script>
 <script src="~/assetsclient/pages/SubAccounts/js/ModalEditRole.js?ver=@clientVersion"></script>
\ No newline at end of file
diff --git a/ServiceHost/wwwroot/AssetsClient/pages/SubAccounts/css/ModalCreateRole.css b/ServiceHost/wwwroot/AssetsClient/pages/SubAccounts/css/ModalCreateRole.css
index 310b39c0..8e8b5b7f 100644
--- a/ServiceHost/wwwroot/AssetsClient/pages/SubAccounts/css/ModalCreateRole.css
+++ b/ServiceHost/wwwroot/AssetsClient/pages/SubAccounts/css/ModalCreateRole.css
@@ -1,4 +1,8 @@
-.errored {
+.modal-dialog {
+    max-width: 750px;
+}
+
+.errored {
     animation: shake 300ms;
     color: #eb3434 !important;
     background-color: #fef2f2 !important;
@@ -30,7 +34,191 @@
     width: 80px;
 }*/
 
+.form-role-section {
+    display: grid;
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+    gap: 8px;
+}
 
+.form-role-workshop-section {
+    grid-column: span 2 / span 2;
+}
+
+.workshop__mobile {
+    display: none;
+}
+
+.workshop-mobile-footer {
+    display: none;
+}
+
+.form-role-workshop-section-mobile {
+    position: fixed;
+    display: block !important;
+    bottom: 0;
+    right: 0;
+    width: 100%;
+    height: 350px;
+    z-index: 120;
+}
+
+.form-role-workshop-section-mobile::before {
+    content: "";
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100vh;
+    background: #000000;
+    opacity: 0.5;
+    z-index: 100;
+}
+
+.form-role-workshop-section-mobile .workshop__mobile {
+    display: block;
+}
+
+.form-role-workshop-section-mobile .workshop__mobile .workshop__label-mobile {
+    font-size: 16px;
+    color: #292929;
+    font-weight: 700 !important;
+}
+
+.form-role-workshop-section-mobile .workshop__mobile svg {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    margin: 10px 0;
+}
+
+.form-role-workshop-section-mobile .workshop {
+    border: none;
+    border-radius: 7px 7px 0 0;
+    z-index: 120;
+}
+
+.form-role-workshop-section-mobile .workshop .workshop__label {
+    display: none
+}
+
+.form-role-workshop-section-mobile .workshop #workshopItems {
+    height: 207px;
+    overflow-y: scroll;
+}
+
+.form-role-workshop-section-mobile .workshop .workshop-mobile-footer {
+    display: block;
+    border-top: 1px solid #D5D5D5;
+    padding: 11px 0;
+    margin: 11px 0;
+}
+
+.form-role-workshop-section-mobile .workshop .workshop-mobile-footer button {
+    width: 100%;
+    color: #fff;
+    padding: 5px 0;
+    border-radius: 5px;
+    height: 32px;
+}
+
+.form-role-workshop-section-mobile .workshop .workshop-mobile-footer button.btn-cancel {
+    background-color: #1F2937;
+}
+
+.form-role-workshop-section-mobile .workshop .workshop-mobile-footer button.btn-success {
+    background-color: #84CC16;
+}
+
+
+.form-role-all-section {
+    grid-column: span 4 / span 4;
+}
+
+.workshop {
+    position: relative;
+    background-color: #ffffff;
+    border: 1px solid #D1D1D1;
+    border-radius: 7px;
+    padding: 10px;
+    height: 100%;
+}
+
+.workshop__label {
+    position: absolute;
+    top: -11px;
+    right: 10px;
+    font-size: 12px;
+    color: #797979;
+    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
+}
+
+.workshop__item {
+    width: 100%;
+    margin: 0 0 4px 0;
+}
+
+.workshop__checkbox {
+    display: none;
+}
+
+.workshop__label-text {
+    font-size: 12px;
+    font-weight: 500;
+    color: #0F8080;
+    background-color: #ffffff;
+    border: 1px solid #1D9D9D;
+    padding: 6px 9px;
+    border-radius: 9px;
+    width: 100%;
+    transition: all 0.3s ease-in-out;
+    cursor: pointer;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+/*.workshop__label-text:hover {
+    color: #ffffff;
+    background-color: #1c7474;
+    border-color: #23A8A8;
+}*/
+
+/* Rectangle 4252 */
+
+/*box-sizing: border-box;
+
+position: absolute;
+width: 320px;
+height: 30px;
+left: 28px;
+top: 127px;*/
+/* linear */
+/*background: linear-gradient(93.83deg, #2EBEBE 1.59%, #1E9D9D 47.86%, #0B7878 101.16%);
+border-radius: 7px;*/
+
+
+.workshop__checkbox:checked + .workshop__label-text {
+    color: #ffffff;
+    background-color: #1D9D9D;
+}
+
+.workshop-mobile-btn {
+    width: 100%;
+    color: #ffffff;
+    background: linear-gradient(93.83deg, #2EBEBE 1.59%, #1E9D9D 47.86%, #0B7878 101.16%);
+    font-size: 14px;
+    padding: 6px;
+    border-radius: 5px;
+}
+
+.workshop-mobile-btn__badge-number {
+    width: 20px;
+    height: 20px;
+    background: #fff;
+    border-radius: 4px;
+    color: #158c8c;
+}
 /************************ checkbox Button Input () ************************/
 .form-check-input[type="checkbox"] {
     width: 15px;
@@ -100,7 +288,7 @@
 }
 
 .permissionBox {
-    margin: 10px 0 0 0;
+    /*margin: 10px 0 0 0;*/
     border: 1px solid #D1D1D1;
     background-color: #FAFAFA;
     border-radius: 7px;
@@ -179,8 +367,23 @@
     background-color: transparent;
 }
 
-@media (max-width:1366px) {
-     #tree {
-         height: 360px;
-     }
- }
\ No newline at end of file
+@media (max-width: 1366px) {
+    #tree {
+        height: 360px;
+    }
+}
+
+
+@media (max-width: 768px) {
+    .modal-dialog {
+        max-width: 530px;
+    }
+
+    .form-role-workshop-section {
+        display: none;
+    }
+
+    .form-role-all-section {
+        grid-column: span 6 / span 6;
+    }
+}
\ No newline at end of file
diff --git a/ServiceHost/wwwroot/AssetsClient/pages/SubAccounts/js/ModalCreateRole.js b/ServiceHost/wwwroot/AssetsClient/pages/SubAccounts/js/ModalCreateRole.js
index 2209ed63..ab0dcad1 100644
--- a/ServiceHost/wwwroot/AssetsClient/pages/SubAccounts/js/ModalCreateRole.js
+++ b/ServiceHost/wwwroot/AssetsClient/pages/SubAccounts/js/ModalCreateRole.js
@@ -1,5 +1,6 @@
 $(document).ready(function () {
     ajaxPermissionsList();
+    ajaxWorkshops();
 
     $('#search-input').on('keyup', function () {
         var searchText = $(this).val().toLowerCase();
@@ -203,6 +204,77 @@ function ajaxPermissionsList() {
     });
 }
 
+function ajaxWorkshops() {
+    var html = '';
+    $.ajax({
+        url: workshopListAjax,
+        type: 'GET',
+        success: function (response) {
+            if (response.success) {
+                var items = response.data;
+                items.forEach(function (item) {
+                    html += `<div class="workshop__item">
+				        <input type="checkbox" id="workshop_${item.id}" name="WorkshopIds[]" class="workshop__checkbox">
+				        <label for="workshop_${item.id}" value="${item.id}" class="workshop__label-text workshop__label-text--outlined">${item.name}</label>
+                    </div>`;
+                });
+                $('#workshopItems').html(html);
+            } else {
+                $('.alert-msg').show();
+                $('.alert-msg p').text(response.message);
+                setTimeout(function () {
+                    $('.alert-msg').hide();
+                    $('.alert-msg p').text('');
+                }, 3500);
+            }
+        },
+        error: function (xhr, status, error) {
+            console.error(xhr.responseText);
+        }
+    });
+}
+
+function showModalWorkshop() {
+    $('.form-role-workshop-section').addClass('form-role-workshop-section-mobile');
+    $('body').css('overflow', 'hidden');
+}
+
+function hideModalWorkshop() {
+    $('.form-role-workshop-section').removeClass('form-role-workshop-section-mobile');
+    $('body').css('overflow', 'auto');
+}
+
+function chooseWorkshops() {
+    
+    const checkedWorkshops = $('input[name="WorkshopIds[]"]:checked');
+
+    if (checkedWorkshops.length === 0) {
+        $('.alert-msg').show();
+        $('.alert-msg p').text('لطفا کارگاه مورد نظر را انتخاب کنید');
+        setTimeout(function () {
+            $('.alert-msg').hide();
+            $('.alert-msg p').text('');
+        }, 3500);
+        return;
+    }
+
+    countSelectWorkshops();
+    hideModalWorkshop();
+}
+
+function countSelectWorkshops() {
+
+    const checkedWorkshops = $('input[name="WorkshopIds[]"]:checked');
+
+    if (checkedWorkshops.length === 0) {
+        $('.workshop-mobile-btn__badge-number').hide().text(checkedWorkshops.length);
+    } else {
+        $('.workshop-mobile-btn__badge-number').show().text(checkedWorkshops.length);
+    }
+
+    hideModalWorkshop();
+}
+
 $('#createData').on('click', SaveDataAjax);
 function SaveDataAjax() {
     var loading = $('#createData .spinner-loading');
@@ -220,6 +292,18 @@ function SaveDataAjax() {
         return;
     }
 
+    const checkedWorkshops = $('input[name="WorkshopIds[]"]:checked');
+
+    if (checkedWorkshops.length === 0) {
+        $('.alert-msg').show();
+        $('.alert-msg p').text('لطفا کارگاه مورد نظر را انتخاب کنید');
+        setTimeout(function () {
+            $('.alert-msg').hide();
+            $('.alert-msg p').text('');
+        }, 3500);
+        return;
+    }
+
     var selectedPermissions = [];
     $('input[name="Permissions"]').each(function () {
         if (this.checked || this.indeterminate) {
@@ -283,4 +367,4 @@ function SaveDataAjax() {
             console.log(err);
         }
     });
-}
+}
\ No newline at end of file
diff --git a/ServiceHost/wwwroot/AssetsClient/pages/SubAccounts/js/ModalEditRole.js b/ServiceHost/wwwroot/AssetsClient/pages/SubAccounts/js/ModalEditRole.js
index 26c4a32f..214e6607 100644
--- a/ServiceHost/wwwroot/AssetsClient/pages/SubAccounts/js/ModalEditRole.js
+++ b/ServiceHost/wwwroot/AssetsClient/pages/SubAccounts/js/ModalEditRole.js
@@ -1,6 +1,6 @@
 $(document).ready(function () {
     ajaxPermissionsList();
-
+    ajaxWorkshops();
     $('#search-input').on('keyup', function () {
         var searchText = $(this).val().toLowerCase();
 
@@ -237,6 +237,77 @@ function updateParentCheckbox(childCheckbox) {
     }
 }
 
+function ajaxWorkshops() {
+    var html = '';
+    $.ajax({
+        url: workshopListAjax,
+        type: 'GET',
+        success: function (response) {
+            if (response.success) {
+                var items = response.data;
+                items.forEach(function (item) {
+                    html += `<div class="workshop__item">
+				        <input type="checkbox" id="workshop_${item.id}" name="WorkshopIds[]" class="workshop__checkbox">
+				        <label for="workshop_${item.id}" value="${item.id}" class="workshop__label-text workshop__label-text--outlined">${item.name}</label>
+                    </div>`;
+                });
+                $('#workshopItems').html(html);
+            } else {
+                $('.alert-msg').show();
+                $('.alert-msg p').text(response.message);
+                setTimeout(function () {
+                    $('.alert-msg').hide();
+                    $('.alert-msg p').text('');
+                }, 3500);
+            }
+        },
+        error: function (xhr, status, error) {
+            console.error(xhr.responseText);
+        }
+    });
+}
+
+function showModalWorkshop() {
+    $('.form-role-workshop-section').addClass('form-role-workshop-section-mobile');
+    $('body').css('overflow', 'hidden');
+}
+
+function hideModalWorkshop() {
+    $('.form-role-workshop-section').removeClass('form-role-workshop-section-mobile');
+    $('body').css('overflow', 'auto');
+}
+
+function chooseWorkshops() {
+
+    const checkedWorkshops = $('input[name="WorkshopIds[]"]:checked');
+
+    if (checkedWorkshops.length === 0) {
+        $('.alert-msg').show();
+        $('.alert-msg p').text('لطفا کارگاه مورد نظر را انتخاب کنید');
+        setTimeout(function () {
+            $('.alert-msg').hide();
+            $('.alert-msg p').text('');
+        }, 3500);
+        return;
+    }
+
+    countSelectWorkshops();
+    hideModalWorkshop();
+}
+
+function countSelectWorkshops() {
+
+    const checkedWorkshops = $('input[name="WorkshopIds[]"]:checked');
+
+    if (checkedWorkshops.length === 0) {
+        $('.workshop-mobile-btn__badge-number').hide().text(checkedWorkshops.length);
+    } else {
+        $('.workshop-mobile-btn__badge-number').show().text(checkedWorkshops.length);
+    }
+
+    hideModalWorkshop();
+}
+
 $('#createData').on('click', SaveDataAjax);
 function SaveDataAjax() {
     var loading = $('#createData .spinner-loading');
@@ -256,6 +327,18 @@ function SaveDataAjax() {
         return;
     }
 
+    const checkedWorkshops = $('input[name="WorkshopIds[]"]:checked');
+
+    if (checkedWorkshops.length === 0) {
+        $('.alert-msg').show();
+        $('.alert-msg p').text('لطفا کارگاه مورد نظر را انتخاب کنید');
+        setTimeout(function () {
+            $('.alert-msg').hide();
+            $('.alert-msg p').text('');
+        }, 3500);
+        return;
+    }
+
     var selectedPermissions = [];
     $('input[name="Permissions"]').each(function () {
         if (this.checked || this.indeterminate) {