diff --git a/frontend/src/components/Settings/InviteMemberPage.vue b/frontend/src/components/Settings/InviteMemberPage.vue
index a29b7fe7..8914ea76 100644
--- a/frontend/src/components/Settings/InviteMemberPage.vue
+++ b/frontend/src/components/Settings/InviteMemberPage.vue
@@ -20,23 +20,107 @@
         :options="[
           { label: __('Regular Access'), value: 'Sales User' },
           { label: __('Manager Access'), value: 'Sales Manager' },
-          { label: __('Admin Access'), value: 'Administrator' },
         ]"
+        :description="description"
       />
       <ErrorMessage class="mt-2" v-if="error" :message="error" />
+      <template v-if="pendingInvitations.data?.length && !invitees.length">
+        <div
+          class="mt-4 flex items-center justify-between border-b py-2 text-base text-gray-600"
+        >
+          <div class="w-4/5">{{ __('Pending Invites') }}</div>
+        </div>
+        <ul class="divide-y overflow-auto">
+          <li
+            class="flex items-center justify-between py-2"
+            v-for="user in pendingInvitations.data"
+            :key="user.name"
+          >
+            <div class="w-4/5 text-base">
+              <span class="text-gray-900">
+                {{ user.email }}
+              </span>
+              <span class="text-gray-600"> ({{ roleMap[user.role] }}) </span>
+            </div>
+            <div>
+              <Tooltip text="Delete Invitation">
+                <Button
+                  icon="x"
+                  :loading="
+                    pendingInvitations.delete.loading &&
+                    pendingInvitations.delete.params.name === user.name
+                  "
+                  @click="pendingInvitations.delete.submit(user.name)"
+                />
+              </Tooltip>
+            </div>
+          </li>
+        </ul>
+      </template>
     </div>
     <div class="flex flex-row-reverse">
-      <Button :label="__('Send Invites')" variant="solid" @click="update" />
+      <Button
+        :label="__('Send Invites')"
+        variant="solid"
+        @click="inviteByEmail.submit()"
+        :loading="inviteByEmail.loading"
+      />
     </div>
   </div>
 </template>
 <script setup>
 import MultiValueInput from '@/components/Controls/MultiValueInput.vue'
-import { validateEmail } from '@/utils'
-import { FormControl } from 'frappe-ui'
-import { ref } from 'vue'
+import { validateEmail, convertArrayToString } from '@/utils'
+import {
+  createListResource,
+  createResource,
+  FormControl,
+  Tooltip,
+} from 'frappe-ui'
+import { ref, computed } from 'vue'
 
 const invitees = ref([])
 const role = ref('Sales User')
 const error = ref(null)
+
+const description = computed(() => {
+  return {
+    'Sales Manager':
+      'Can manage and invite new members, and create public & private views (reports).',
+    'Sales User':
+      'Can work with leads and deals and create private views (reports).',
+  }[role.value]
+})
+
+const roleMap = {
+  'Sales User': __('Regular Access'),
+  'Sales Manager': __('Manager Access'),
+}
+
+const inviteByEmail = createResource({
+  url: 'crm.api.invite_by_email',
+  makeParams() {
+    return {
+      emails: convertArrayToString(invitees.value),
+      role: role.value,
+    }
+  },
+  onSuccess() {
+    invitees.value = []
+    role.value = 'Sales User'
+    error.value = null
+    pendingInvitations.reload()
+  },
+  onError(error) {
+    error.value = error
+  },
+})
+
+const pendingInvitations = createListResource({
+  type: 'list',
+  doctype: 'CRM Invitation',
+  filters: { status: 'Pending' },
+  fields: ['name', 'email', 'role'],
+  auto: true,
+})
 </script>
diff --git a/frontend/src/components/SidebarLink.vue b/frontend/src/components/SidebarLink.vue
index 6a103444..ec168517 100644
--- a/frontend/src/components/SidebarLink.vue
+++ b/frontend/src/components/SidebarLink.vue
@@ -21,7 +21,12 @@
             </span>
           </slot>
         </Tooltip>
-        <Tooltip :text="label" placement="right" :disabled="isCollapsed" :hoverDelay="1.5">
+        <Tooltip
+          :text="label"
+          placement="right"
+          :disabled="isCollapsed"
+          :hoverDelay="1.5"
+        >
           <span
             class="flex-1 flex-shrink-0 truncate text-sm duration-300 ease-in-out"
             :class="
@@ -50,7 +55,7 @@ const route = useRoute()
 
 const props = defineProps({
   icon: {
-    type: Object,
+    type: [Object, String],
   },
   label: {
     type: String,
diff --git a/frontend/src/utils/index.js b/frontend/src/utils/index.js
index 104f66db..0b336948 100644
--- a/frontend/src/utils/index.js
+++ b/frontend/src/utils/index.js
@@ -216,3 +216,7 @@ export function isEmoji(str) {
 export function isTouchScreenDevice() {
 	return "ontouchstart" in document.documentElement;
 }
+
+export function convertArrayToString(array) {
+  return array.map((item) => item).join(',')
+}