diff --git a/crm/api/session.py b/crm/api/session.py
index 54feea60..278f8b5e 100644
--- a/crm/api/session.py
+++ b/crm/api/session.py
@@ -23,13 +23,16 @@ def get_users():
 		if frappe.session.user == user.name:
 			user.session_user = True
 
-		user.is_manager = "Sales Manager" in frappe.get_roles(user.name) or user.name == "Administrator"
+		user.is_manager = "Sales Manager" in frappe.get_roles(user.name)
+		user.is_admin = user.name == "Administrator"
 
 		user.roles = frappe.get_roles(user.name)
 
 		user.role = ""
 
-		if "Sales Manager" in user.roles:
+		if "System Manager" in user.roles:
+			user.role = "System Manager"
+		elif "Sales Manager" in user.roles:
 			user.role = "Sales Manager"
 		elif "Sales User" in user.roles:
 			user.role = "Sales User"
diff --git a/crm/fcrm/doctype/crm_agent/crm_agent.py b/crm/fcrm/doctype/crm_agent/crm_agent.py
index 34c524b6..21ddb800 100644
--- a/crm/fcrm/doctype/crm_agent/crm_agent.py
+++ b/crm/fcrm/doctype/crm_agent/crm_agent.py
@@ -29,19 +29,21 @@ def update_agent_role(user, new_role):
 	:param new_role: The new role to assign (Sales Manager or Sales User)
 	"""
 
-	frappe.only_for("Sales Manager")
+	frappe.only_for(["System Manager", "System Manager"])
 
-	if new_role not in ["Sales Manager", "Sales User"]:
+	if new_role not in ["System Manager", "Sales Manager", "Sales User"]:
 		frappe.throw("Cannot assign this role")
 
 	user_doc = frappe.get_doc("User", user)
 
+	if new_role == "System Manager":
+		user_doc.append_roles("System Manager")
 	if new_role == "Sales Manager":
-		user_doc.append_roles("Sales Manager", "System Manager")
+		user_doc.append_roles("Sales Manager")
+		user_doc.remove_roles("System Manager")
 	if new_role == "Sales User":
 		user_doc.append_roles("Sales User")
-		if "Sales Manager" in frappe.get_roles(user_doc.name):
-			user_doc.remove_roles("Sales Manager", "System Manager")
+		user_doc.remove_roles("Sales Manager", "System Manager")
 
 	user_doc.save()
 
diff --git a/frappe-ui b/frappe-ui
index 8b615c0e..883bb643 160000
--- a/frappe-ui
+++ b/frappe-ui
@@ -1 +1 @@
-Subproject commit 8b615c0e899d75b99c7d36ec6df97b5d0386b2ca
+Subproject commit 883bb643d1e662d6467925927e347dd28376960f
diff --git a/frontend/src/components/Settings/Agents.vue b/frontend/src/components/Settings/Agents.vue
index 0b7824ef..df77688f 100644
--- a/frontend/src/components/Settings/Agents.vue
+++ b/frontend/src/components/Settings/Agents.vue
@@ -5,7 +5,7 @@
       <h2 class="flex gap-2 text-xl font-semibold leading-none h-5">
         {{ __('Users') }}
       </h2>
-      <div class="flex item-center space-x-2 mr-2">
+      <div class="flex item-center space-x-2">
         <FormControl
           v-model="search"
           :placeholder="'Search'"
@@ -16,6 +16,23 @@
             <LucideSearch class="h-4 w-4 text-ink-gray-4" />
           </template>
         </FormControl>
+        <FormControl
+          type="select"
+          :value="currentStatus"
+          :options="[
+            { label: __('All'), value: 'All' },
+            { label: __('Active'), value: 'Active' },
+            { label: __('Inactive'), value: 'Inactive' },
+          ]"
+          @change="(e) => changeStatus(e.target.value)"
+        >
+        </FormControl>
+        <Button
+          :label="__('Add User')"
+          icon-left="plus"
+          variant="solid"
+          @click="$emit('add-agent')"
+        />
       </div>
     </div>
 
@@ -43,7 +60,7 @@
       class="divide-y overflow-auto"
     >
       <li
-        class="flex items-center justify-between p-2"
+        class="flex items-center justify-between py-2"
         v-for="agent in agents.data"
         :key="agent.name"
       >
@@ -65,12 +82,11 @@
             </div>
           </div>
         </div>
-        <div class="flex gap-1 items-center flex-row-reverse">
+        <div class="flex gap-2 items-center flex-row-reverse">
           <Dropdown
             :options="getMoreOptions(agent)"
             :button="{
               icon: 'more-horizontal',
-              variant: 'ghost',
             }"
             placement="right"
           />
@@ -79,16 +95,17 @@
             :button="{
               label: roleMap[getUserRole(agent.name)],
               iconRight: 'chevron-down',
-              variant: 'ghost',
             }"
             placement="right"
           />
         </div>
       </li>
       <!-- Load More Button -->
-      <div class="flex justify-center">
+      <div
+        v-if="!agents.loading && agents.hasNextPage"
+        class="flex justify-center"
+      >
         <Button
-          v-if="!agents.loading && agents.hasNextPage"
           class="mt-3.5 p-2"
           @click="() => agents.next()"
           :loading="agents.loading"
@@ -111,7 +128,7 @@ import {
   toast,
   call,
 } from 'frappe-ui'
-import { ref, h, watch } from 'vue'
+import { ref, h, watch, onMounted } from 'vue'
 
 const { users, getUserRole } = usersStore()
 
@@ -119,6 +136,7 @@ const agents = createListResource({
   doctype: 'CRM Agent',
   cache: 'CRM Agents',
   fields: ['name', 'image', 'is_active', 'agent_name'],
+  filters: { is_active: ['=', 1] },
   auto: true,
   start: 0,
   pageLength: 20,
@@ -126,8 +144,9 @@ const agents = createListResource({
 })
 
 const roleMap = {
-  'Sales Manager': __('Manager Access'),
-  'Sales User': __('Regular Access'),
+  'System Manager': __('Admin'),
+  'Sales Manager': __('Manager'),
+  'Sales User': __('Sales User'),
 }
 
 function getMoreOptions(agent) {
@@ -153,20 +172,30 @@ function getDropdownOptions(agent) {
   const agentRole = getUserRole(agent.name)
   return [
     {
-      label: __('Manager Access'),
+      label: __('Admin'),
       component: (props) =>
         RoleOption({
-          role: __('Manager Access'),
+          role: __('Admin'),
+          active: props.active,
+          selected: agentRole === 'System Manager',
+          onClick: () => updateRole(agent, 'System Manager'),
+        }),
+    },
+    {
+      label: __('Manager'),
+      component: (props) =>
+        RoleOption({
+          role: __('Manager'),
           active: props.active,
           selected: agentRole === 'Sales Manager',
           onClick: () => updateRole(agent, 'Sales Manager'),
         }),
     },
     {
-      label: __('Regular Access'),
+      label: __('Sales User'),
       component: (props) =>
         RoleOption({
-          role: __('Regular Access'),
+          role: __('Sales User'),
           active: props.active,
           selected: agentRole === 'Sales User',
           onClick: () => updateRole(agent, 'Sales User'),
@@ -206,7 +235,10 @@ function updateRole(agent, newRole) {
     new_role: newRole,
   }).then(() => {
     toast.success(
-      __('{0} has been granted {1}', [agent.agent_name, roleMap[newRole]]),
+      __('{0} has been granted {1} access', [
+        agent.agent_name,
+        roleMap[newRole],
+      ]),
     )
     users.reload()
     agents.reload()
@@ -231,6 +263,27 @@ function updateStatus(agent, status) {
   })
 }
 
+const currentStatus = ref('Active')
+
+function changeStatus(status) {
+  currentStatus.value = status
+  updateFilters()
+}
+
+function updateFilters() {
+  const status = currentStatus.value || 'Active'
+
+  agents.filters = {}
+  if (status === 'Active') {
+    agents.filters.is_active = ['=', 1]
+  } else if (status === 'Inactive') {
+    agents.filters.is_active = ['=', 0]
+  }
+  agents.reload()
+}
+
+onMounted(() => updateFilters())
+
 const search = ref('')
 watch(search, (newValue) => {
   agents.filters = {