diff --git a/frontend/src/ManageGranularAccess/AppResourcePermission.jsx b/frontend/src/ManageGranularAccess/AppResourcePermission.jsx
index 6619ee54d1..80f2c201d8 100644
--- a/frontend/src/ManageGranularAccess/AppResourcePermission.jsx
+++ b/frontend/src/ManageGranularAccess/AppResourcePermission.jsx
@@ -57,7 +57,7 @@ function AppResourcePermissions({
               {'Edit'}
             </span>
             {/* <span class={`text-muted tj-text-xxsm ${isRoleGroup && 'check-label-disable'}`}>Create apps in this workspace</span> */}
-            <span class={`text-muted tj-text-xxsm`}>Access to app builder</span>
+            <span class={`tj-text-xxsm`}>Access to app builder</span>
           </label>
           <label className="form-check form-check-inline">
             <input
@@ -76,7 +76,7 @@ function AppResourcePermissions({
             <span className="form-check-label" data-cy="app-delete-label">
               {'View'}
             </span>
-            <span class={`text-muted tj-text-xxsm`}>Only view released version of app</span>
+            <span class={`tj-text-xxsm`}>Only view released version of app</span>
           </label>
           <label className="form-check form-check-inline">
             <input
@@ -94,7 +94,7 @@ function AppResourcePermissions({
             <span className="form-check-label" data-cy="app-delete-label">
               {'Hide from dashbaord'}
             </span>
-            <span class={`text-muted tj-text-xxsm`}>App will be accessible by URL only</span>
+            <span class={`tj-text-xxsm`}>App will be accessible by URL only</span>
           </label>
         </div>
       </div>
diff --git a/frontend/src/ManageGranularAccess/index.jsx b/frontend/src/ManageGranularAccess/index.jsx
index 35b8fd06f7..c17e04ee8e 100644
--- a/frontend/src/ManageGranularAccess/index.jsx
+++ b/frontend/src/ManageGranularAccess/index.jsx
@@ -4,7 +4,7 @@ import ModalBase from '@/_ui/Modal';
 import { AppsSelect } from '@/_ui/Modal/AppsSelect';
 import Multiselect from '@/_ui/Multiselect/Multiselect';
 import React from 'react';
-import { OverlayTrigger } from 'react-bootstrap';
+import { OverlayTrigger, Tooltip } from 'react-bootstrap';
 import { withTranslation } from 'react-i18next';
 import { groupPermissionV2Service } from '@/_services';
 import { toast } from 'react-hot-toast';
@@ -15,7 +15,6 @@ import AppResourcePermissions from '@/ManageGranularAccess/AppResourcePermission
 import AddResourcePermissionsMenu from '@/ManageGranularAccess/AddResourcePermissionsMenu';
 import { ConfirmDialog } from '@/_components';
 import { ToolTip } from '@/_components/ToolTip';
-
 class ManageGranularAccessComponent extends React.Component {
   constructor(props) {
     super(props);
@@ -485,29 +484,40 @@ class ManageGranularAccessComponent extends React.Component {
             <label className="form-label bold-text">Permission</label>
             <div className="type-container">
               <div className="left-container">
-                <label className="form-check form-check-inline">
-                  <input
-                    className="form-check-input"
-                    type="radio"
-                    disabled={disableEditUpdate}
-                    checked={initialPermissionState.canEdit}
-                    onClick={() => {
-                      this.setState((prevState) => ({
-                        initialPermissionState: {
-                          ...prevState.initialPermissionState,
-                          canEdit: !prevState.initialPermissionState.canEdit,
-                          canView: prevState.initialPermissionState.canEdit,
-                          ...(prevState.initialPermissionState.canEdit && { hideFromDashboard: false }),
-                        },
-                      }));
-                    }}
-                  />
+                <OverlayTrigger
+                  overlay={
+                    this.props.groupPermission?.name == 'end-user' ? (
+                      <Tooltip id="tooltip-disable-edit-update">End-user cannot have edit permission</Tooltip>
+                    ) : (
+                      <span></span>
+                    )
+                  }
+                  placement="left"
+                >
+                  <label className="form-check form-check-inline">
+                    <input
+                      className="form-check-input"
+                      type="radio"
+                      disabled={disableEditUpdate}
+                      checked={initialPermissionState.canEdit}
+                      onClick={() => {
+                        this.setState((prevState) => ({
+                          initialPermissionState: {
+                            ...prevState.initialPermissionState,
+                            canEdit: !prevState.initialPermissionState.canEdit,
+                            canView: prevState.initialPermissionState.canEdit,
+                            ...(prevState.initialPermissionState.canEdit && { hideFromDashboard: false }),
+                          },
+                        }));
+                      }}
+                    />
 
-                  <div>
-                    <span className="form-check-label text-muted">Edit</span>
-                    <span className="text-muted tj-text-xsm">Access to app builder</span>
-                  </div>
-                </label>
+                    <div>
+                      <span className="form-check-label ">Edit</span>
+                      <span className="tj-text-xsm">Access to app builder</span>
+                    </div>
+                  </label>
+                </OverlayTrigger>
               </div>
               <div className="right-container">
                 <label className="form-check form-check-inline">
@@ -528,8 +538,8 @@ class ManageGranularAccessComponent extends React.Component {
                     }}
                   />
                   <div>
-                    <span className="form-check-label text-muted">View</span>
-                    <span className="text-muted tj-text-xsm">Only view deployed version of app</span>
+                    <span className="form-check-label ">View</span>
+                    <span className=" tj-text-xsm">Only view deployed version of app</span>
                   </div>
                 </label>
                 <label className="form-check form-check-inline">
@@ -549,7 +559,7 @@ class ManageGranularAccessComponent extends React.Component {
                   />
                   <div>
                     <span className={`form-check-label faded-text`}>Hide from dashboard</span>
-                    <span className="text-muted tj-text-xsm">App will be accessible by URL only</span>
+                    <span className=" tj-text-xsm">App will be accessible by URL only</span>
                   </div>
                 </label>
               </div>
@@ -568,29 +578,38 @@ class ManageGranularAccessComponent extends React.Component {
                   }}
                 />
                 <div>
-                  <span className="form-check-label text-muted">All apps</span>
-                  <span className="text-muted tj-text-xsm">
+                  <span className="form-check-label ">All apps</span>
+                  <span className=" tj-text-xsm">
                     This will select all apps in the workspace including any new apps created
                   </span>
                 </div>
               </label>
-              <label className="form-check form-check-inline">
-                <input
-                  className="form-check-input"
-                  type="radio"
-                  disabled={addableApps.length === 0}
-                  checked={isCustom}
-                  onClick={() => {
-                    this.setState((prevState) => ({ isCustom: !prevState.isCustom, isAll: prevState.isCustom }));
-                  }}
-                />
-                <div>
-                  <span className="form-check-label text-muted">Custom</span>
-                  <span className="text-muted tj-text-xsm">
-                    Select specific applications you want to add to the group
-                  </span>
-                </div>
-              </label>
+              <OverlayTrigger
+                overlay={
+                  this.props.groupPermission?.name == 'end-user' ? (
+                    <Tooltip id="tooltip-disable-edit-update">Use custom groups to select custom resources</Tooltip>
+                  ) : (
+                    <span></span>
+                  )
+                }
+                placement="left"
+              >
+                <label className="form-check form-check-inline">
+                  <input
+                    className="form-check-input"
+                    type="radio"
+                    disabled={addableApps.length === 0}
+                    checked={isCustom}
+                    onClick={() => {
+                      this.setState((prevState) => ({ isCustom: !prevState.isCustom, isAll: prevState.isCustom }));
+                    }}
+                  />
+                  <div>
+                    <span className="form-check-label ">Custom</span>
+                    <span className=" tj-text-xsm">Select specific applications you want to add to the group</span>
+                  </div>
+                </label>
+              </OverlayTrigger>
               <AppsSelect
                 disabled={!isCustom}
                 allowSelectAll={true}
diff --git a/frontend/src/ManageGroupPermissionResourcesV2/grpPermissionResc.theme.scss b/frontend/src/ManageGroupPermissionResourcesV2/grpPermissionResc.theme.scss
index a7fe9a3e87..581cc3eced 100644
--- a/frontend/src/ManageGroupPermissionResourcesV2/grpPermissionResc.theme.scss
+++ b/frontend/src/ManageGroupPermissionResourcesV2/grpPermissionResc.theme.scss
@@ -132,4 +132,15 @@
   .modal-footer {
     border-top: 1px solid var(--slate6);;
   }
+
+  .form-label{
+    color: var(--slate11);
+  }
+}
+
+
+.permission-body {
+  .tj-text-xxsm{
+    color: var(--slate11)
+  }
 }
\ No newline at end of file
diff --git a/frontend/src/ManageGroupPermissionResourcesV2/index.jsx b/frontend/src/ManageGroupPermissionResourcesV2/index.jsx
index 4b6219cf2b..ebbbc81ea2 100644
--- a/frontend/src/ManageGroupPermissionResourcesV2/index.jsx
+++ b/frontend/src/ManageGroupPermissionResourcesV2/index.jsx
@@ -480,7 +480,7 @@ class ManageGroupPermissionResourcesComponent extends React.Component {
             <div>{EDIT_ROLE_MESSAGE?.[groupPermission?.name]?.[selectedNewRole](isPaidPlan)}</div>
           ) : (
             <div>
-              <label className="form-label text-muted">User role</label>
+              <label className="form-label">User role</label>
               <Select
                 options={this.props.roleOptions.filter((group) => group.value !== groupPermission?.name)}
                 value={selectedNewRole}
@@ -862,9 +862,7 @@ class ManageGroupPermissionResourcesComponent extends React.Component {
                                           {this.props.t('globals.create', 'Create')}
                                         </span>
                                         <span
-                                          class={`text-muted tj-text-xxsm ${
-                                            disablePermissionUpdate && 'check-label-disable'
-                                          }`}
+                                          class={`tj-text-xxsm ${disablePermissionUpdate && 'check-label-disable'}`}
                                         >
                                           Create apps in this workspace
                                         </span>
@@ -889,9 +887,7 @@ class ManageGroupPermissionResourcesComponent extends React.Component {
                                           {this.props.t('globals.delete', 'Delete')}
                                         </span>
                                         <span
-                                          class={`text-muted tj-text-xxsm ${
-                                            disablePermissionUpdate && 'check-label-disable'
-                                          }`}
+                                          class={`tj-text-xxsm ${disablePermissionUpdate && 'check-label-disable'}`}
                                         >
                                           Delete any app in this workspace
                                         </span>
@@ -932,9 +928,7 @@ class ManageGroupPermissionResourcesComponent extends React.Component {
                                           )}
                                         </span>
                                         <span
-                                          class={`text-muted tj-text-xxsm ${
-                                            disablePermissionUpdate && 'check-label-disable'
-                                          }`}
+                                          class={`tj-text-xxsm ${disablePermissionUpdate && 'check-label-disable'}`}
                                         >
                                           All operations on folders
                                         </span>
@@ -971,9 +965,7 @@ class ManageGroupPermissionResourcesComponent extends React.Component {
                                           )}
                                         </span>
                                         <span
-                                          class={`text-muted tj-text-xxsm ${
-                                            disablePermissionUpdate && 'check-label-disable'
-                                          }`}
+                                          class={`tj-text-xxsm ${disablePermissionUpdate && 'check-label-disable'}`}
                                         >
                                           All operations on workspace constants
                                         </span>
@@ -997,6 +989,7 @@ class ManageGroupPermissionResourcesComponent extends React.Component {
                       setErrorState={this.setErrorState}
                       updateParentState={this.changeThisComponentState}
                       fetchGroup={this.fetchGroupPermission}
+                      darkMode={this.props.darkMode}
                     />
                   </aside>
                 </div>
diff --git a/frontend/src/ManageGroupPermissionsV2/ManageGroupPermissionsV2.jsx b/frontend/src/ManageGroupPermissionsV2/ManageGroupPermissionsV2.jsx
index 93a2f5487b..b7e653a78b 100644
--- a/frontend/src/ManageGroupPermissionsV2/ManageGroupPermissionsV2.jsx
+++ b/frontend/src/ManageGroupPermissionsV2/ManageGroupPermissionsV2.jsx
@@ -151,7 +151,7 @@ class ManageGroupPermissionsComponent extends React.Component {
             </div>
           </Popover.Body>
         </Popover>
-        {(groupName == 'all_users' || groupName == 'admin') && (
+        {(groupName == 'all_users' || groupName == 'admin' || groupName == 'builder' || groupName == 'end-user') && (
           <Tooltip
             id="tooltip-for-delete"
             className="tooltip"
diff --git a/frontend/src/ManageGroupPermissionsV2/groupPermissions.theme.scss b/frontend/src/ManageGroupPermissionsV2/groupPermissions.theme.scss
index 532de91f31..9a0c321c53 100644
--- a/frontend/src/ManageGroupPermissionsV2/groupPermissions.theme.scss
+++ b/frontend/src/ManageGroupPermissionsV2/groupPermissions.theme.scss
@@ -254,7 +254,7 @@
     margin: 0;
     border-radius: 6px;
     background-color: var(--slate3);
-    color: black;
+    color: var(--slate11);
     min-height: 24px;
     text-overflow: ellipsis;
     overflow: hidden;
@@ -401,6 +401,12 @@
 
 .manage-resource-permission{
 
+
+  .tj-text-xxsm{
+    color: var(--slate11)
+  }
+
+
   transition: background-color 0.3s ease;
   border-bottom: 1px solid var(--slate5);
   display: flex;
diff --git a/frontend/src/TooljetDatabase/Forms/styles.scss b/frontend/src/TooljetDatabase/Forms/styles.scss
index 7760b4d927..69f3446f1e 100644
--- a/frontend/src/TooljetDatabase/Forms/styles.scss
+++ b/frontend/src/TooljetDatabase/Forms/styles.scss
@@ -177,7 +177,7 @@
 
   input.form-control:disabled {
     gap: 16px !important;
-    background: #f4f6fa !important;
+    background: var(--base) !important;
     border: 1px solid var(--slate7) !important;
     border-radius: 6px !important;
     margin-bottom: 4px !important;
diff --git a/frontend/src/_styles/theme.scss b/frontend/src/_styles/theme.scss
index 0f792fac65..6a700153da 100644
--- a/frontend/src/_styles/theme.scss
+++ b/frontend/src/_styles/theme.scss
@@ -12753,7 +12753,7 @@ tbody {
     margin: 0;
     border-radius: 6px;
     background-color: var(--slate3);
-    // color: var(--slate11);
+    color: var(--slate11);
     min-height: 24px;
     text-overflow: ellipsis;
     overflow: hidden;