diff --git a/src/dispatch/static/dispatch/components.d.ts b/src/dispatch/static/dispatch/components.d.ts
index ea1d853f1ea4..3cefa85a15dd 100644
--- a/src/dispatch/static/dispatch/components.d.ts
+++ b/src/dispatch/static/dispatch/components.d.ts
@@ -12,6 +12,7 @@ declare module '@vue/runtime-core' {
     AppDrawer: typeof import('./src/components/AppDrawer.vue')['default']
     AppToolbar: typeof import('./src/components/AppToolbar.vue')['default']
     AutoComplete: typeof import('./src/components/AutoComplete.vue')['default']
+    Avatar: typeof import('./src/components/Avatar.vue')['default']
     BaseCombobox: typeof import('./src/components/BaseCombobox.vue')['default']
     BasicLayout: typeof import('./src/components/layouts/BasicLayout.vue')['default']
     ColorPickerInput: typeof import('./src/components/ColorPickerInput.vue')['default']
diff --git a/src/dispatch/static/dispatch/src/atomics/CurrentUserAvatar.vue b/src/dispatch/static/dispatch/src/atomics/CurrentUserAvatar.vue
new file mode 100644
index 000000000000..df7568e18052
--- /dev/null
+++ b/src/dispatch/static/dispatch/src/atomics/CurrentUserAvatar.vue
@@ -0,0 +1,77 @@
+<script setup>
+import { computed } from "vue"
+import { useStore } from "vuex"
+import UserAvatar from "@/atomics/UserAvatar.vue"
+
+const store = useStore()
+const props = defineProps({
+  size: {
+    type: [Number, String],
+    default: 30,
+  },
+  showTooltip: {
+    type: Boolean,
+    default: false,
+  },
+  tooltipText: {
+    type: String,
+    default: "",
+  },
+  border: {
+    type: Boolean,
+    default: false,
+  },
+  borderColor: {
+    type: String,
+    default: "white",
+  },
+})
+
+// Get current user from store
+const currentUser = computed(() => {
+  try {
+    return store.state.auth.currentUser || {}
+  } catch (e) {
+    console.error("Error getting current user:", e)
+    return {}
+  }
+})
+
+// Get user name
+const userName = computed(() => {
+  return currentUser.value.name || currentUser.value.email || ""
+})
+
+// Get user email
+const userEmail = computed(() => {
+  return currentUser.value.email || ""
+})
+
+// Get avatar URL using the userAvatarUrl getter
+const userAvatarUrl = computed(() => {
+  try {
+    if (store.getters["auth/userAvatarUrl"]) {
+      return store.getters["auth/userAvatarUrl"](currentUser.value)
+    }
+  } catch (e) {
+    console.error("Error getting avatar URL from store:", e)
+  }
+  return ""
+})
+
+// Get tooltip text
+const displayTooltipText = computed(() => props.tooltipText || userName.value)
+</script>
+
+<template>
+  <UserAvatar
+    :name="userName"
+    :email="userEmail"
+    :imageUrl="userAvatarUrl"
+    :size="size"
+    :showTooltip="showTooltip"
+    :tooltipText="displayTooltipText"
+    :border="border"
+    :borderColor="borderColor"
+  />
+</template>
diff --git a/src/dispatch/static/dispatch/src/atomics/UserAvatar.vue b/src/dispatch/static/dispatch/src/atomics/UserAvatar.vue
new file mode 100644
index 000000000000..c138252740cf
--- /dev/null
+++ b/src/dispatch/static/dispatch/src/atomics/UserAvatar.vue
@@ -0,0 +1,156 @@
+<script setup>
+import { defineProps, computed } from "vue"
+import DTooltip from "@/components/DTooltip.vue"
+
+const props = defineProps({
+  name: {
+    type: String,
+    required: true,
+  },
+  email: {
+    type: String,
+    default: "",
+  },
+  imageUrl: {
+    type: String,
+    default: "",
+  },
+  size: {
+    type: [Number, String],
+    default: 24,
+  },
+  showTooltip: {
+    type: Boolean,
+    default: false,
+  },
+  tooltipText: {
+    type: String,
+    default: "",
+  },
+  border: {
+    type: Boolean,
+    default: false,
+  },
+  borderColor: {
+    type: String,
+    default: "white",
+  },
+  // New prop to force gradient in specific component instances
+  forceGradient: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+// Check if we should force gradient display from environment variable
+const forceGradientFromEnv = import.meta.env.VITE_DISPATCH_FORCE_AVATAR_GRADIENT === "true"
+
+// Generate a color gradient based on the user's name
+const getAvatarGradient = (name) => {
+  let hash = 5381
+  for (let i = 0; i < name.length; i++) {
+    hash = ((hash << 5) + hash) ^ name.charCodeAt(i) // Using XOR operator for better distribution
+  }
+
+  const hue = Math.abs(hash) % 360 // Ensure hue is a positive number
+  const fromColor = `hsl(${hue}, 95%, 50%)`
+  const toColor = `hsl(${(hue + 120) % 360}, 95%, 50%)` // Getting triadic color by adding 120 to hue
+
+  return `linear-gradient(${fromColor}, ${toColor})`
+}
+
+// Get avatar URL from email if provided
+const getAvatarUrlFromEmail = (email) => {
+  if (!email) return ""
+
+  const userId = email.split("@")[0]
+  if (userId) {
+    const avatarTemplate = import.meta.env.VITE_DISPATCH_AVATAR_TEMPLATE || "/avatar/*/128x128.jpg"
+    // Use a regular expression with the global flag to replace all occurrences of "*"
+    const stem = avatarTemplate.replace(/\*/g, userId)
+
+    // Use the base URL from environment variable if available, otherwise use window.location
+    const envBaseUrl = import.meta.env.VITE_DISPATCH_AVATAR_BASE_URL
+    const defaultBaseUrl = `${window.location.protocol}//${window.location.host}`
+    const baseUrl = envBaseUrl || defaultBaseUrl
+    return `${baseUrl}${stem}`
+  }
+
+  return ""
+}
+
+// Determine if we should show the image or the gradient
+const effectiveImageUrl = computed(() => {
+  // Use provided imageUrl if available
+  if (props.imageUrl) return props.imageUrl
+
+  // Otherwise try to generate one from email
+  return getAvatarUrlFromEmail(props.email)
+})
+
+// Check if we should show the image or the gradient
+const hasValidImage = computed(() => {
+  // If force gradient is enabled (either via prop or env var), always show gradient
+  if (props.forceGradient || forceGradientFromEnv) {
+    return false
+  }
+
+  // Otherwise, check if we have a URL
+  return Boolean(effectiveImageUrl.value)
+})
+
+// Get the tooltip text (use provided text or fall back to name)
+const displayTooltipText = computed(() => props.tooltipText || props.name)
+
+// Compute avatar style including border if enabled
+const avatarStyle = computed(() => {
+  if (props.border) {
+    return {
+      border: `2px solid ${props.borderColor}`,
+    }
+  }
+  return {}
+})
+
+// Compute background style for gradient avatar
+const gradientStyle = computed(() => {
+  return {
+    background: getAvatarGradient(props.name),
+  }
+})
+</script>
+
+<template>
+  <div class="user-avatar-wrapper">
+    <DTooltip v-if="showTooltip" :text="displayTooltipText">
+      <template #activator="{ tooltip }">
+        <v-avatar v-bind="tooltip" :size="size" class="user-avatar" :style="avatarStyle">
+          <v-img v-if="hasValidImage" :src="effectiveImageUrl" />
+          <div v-else class="gradient-avatar" :style="gradientStyle" />
+        </v-avatar>
+      </template>
+    </DTooltip>
+    <v-avatar v-else :size="size" class="user-avatar" :style="avatarStyle">
+      <v-img v-if="hasValidImage" :src="effectiveImageUrl" />
+      <div v-else class="gradient-avatar" :style="gradientStyle" />
+    </v-avatar>
+  </div>
+</template>
+
+<style scoped>
+.user-avatar-wrapper {
+  display: inline-flex;
+}
+
+.gradient-avatar {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+}
+
+.user-avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>
diff --git a/src/dispatch/static/dispatch/src/case/PageHeader.vue b/src/dispatch/static/dispatch/src/case/PageHeader.vue
index 256c65fb023d..1ac28402f3b3 100644
--- a/src/dispatch/static/dispatch/src/case/PageHeader.vue
+++ b/src/dispatch/static/dispatch/src/case/PageHeader.vue
@@ -20,7 +20,11 @@
 
       <DTooltip text="View case participants" :hotkeys="['⌘', '⇧', 'P']">
         <template #activator="{ tooltip }">
-          <ParticipantAvatarGroup :participants="caseParticipants" class="pl-3" v-bind="tooltip" />
+          <ParticipantAvatarGroup
+            :participants="caseParticipants"
+            class="pl-3 d-flex align-center"
+            v-bind="tooltip"
+          />
         </template>
       </DTooltip>
       <DTooltip
diff --git a/src/dispatch/static/dispatch/src/components/AppToolbar.vue b/src/dispatch/static/dispatch/src/components/AppToolbar.vue
index 25684be6cc2c..c270b7856059 100644
--- a/src/dispatch/static/dispatch/src/components/AppToolbar.vue
+++ b/src/dispatch/static/dispatch/src/components/AppToolbar.vue
@@ -58,22 +58,12 @@
         </v-menu>
       </v-btn>
       <v-btn icon size="large" variant="text">
-        <v-avatar size="30px" v-if="userAvatarUrl(currentUser())">
-          <v-img :src="userAvatarUrl(currentUser())" />
-        </v-avatar>
-        <v-avatar size="30px" v-else>
-          <v-icon>mdi-account-circle</v-icon>
-        </v-avatar>
+        <CurrentUserAvatar :size="30" />
         <v-menu activator="parent" width="400">
           <v-list class="pb-0">
             <v-list-item class="px-2">
               <template #prepend>
-                <v-avatar v-if="userAvatarUrl(currentUser())">
-                  <v-img :src="userAvatarUrl(currentUser())" />
-                </v-avatar>
-                <v-avatar v-else>
-                  <v-icon size="30px">mdi-account-circle</v-icon>
-                </v-avatar>
+                <CurrentUserAvatar :size="30" />
               </template>
 
               <v-list-item-title class="text-h6">
@@ -148,6 +138,7 @@ import { formatHash } from "@/filters"
 import OrganizationApi from "@/organization/api"
 import OrganizationCreateEditDialog from "@/organization/CreateEditDialog.vue"
 import UserApi from "@/auth/api"
+import CurrentUserAvatar from "@/atomics/CurrentUserAvatar.vue"
 
 export default {
   name: "AppToolbar",
@@ -161,6 +152,7 @@ export default {
   },
   components: {
     OrganizationCreateEditDialog,
+    CurrentUserAvatar,
   },
   computed: {
     queryString: {
diff --git a/src/dispatch/static/dispatch/src/participant/ParticipantAvatarGroup.vue b/src/dispatch/static/dispatch/src/participant/ParticipantAvatarGroup.vue
index d282a708fbe2..9d4a2f6ec6b3 100644
--- a/src/dispatch/static/dispatch/src/participant/ParticipantAvatarGroup.vue
+++ b/src/dispatch/static/dispatch/src/participant/ParticipantAvatarGroup.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { ref, computed, watch } from "vue"
 import { useHotKey } from "@/composables/useHotkey"
+import UserAvatar from "@/atomics/UserAvatar.vue"
 
 const props = defineProps({
   participants: {
@@ -67,19 +68,6 @@ const filteredParticipants = computed(() => {
   return orderedParticipants.value
 })
 
-const getAvatarGradient = (participant) => {
-  let hash = 5381
-  for (let i = 0; i < participant.length; i++) {
-    hash = ((hash << 5) + hash) ^ participant.charCodeAt(i) // Using XOR operator for better distribution
-  }
-
-  const hue = Math.abs(hash) % 360 // Ensure hue is a positive number
-  const fromColor = `hsl(${hue}, 95%, 50%)`
-  const toColor = `hsl(${(hue + 120) % 360}, 95%, 50%)` // Getting triadic color by adding 120 to hue
-
-  return `linear-gradient(${fromColor}, ${toColor})`
-}
-
 const toggleMenu = () => {
   menu.value = !menu.value
   if (!menu.value) {
@@ -98,7 +86,7 @@ const toggleMenu = () => {
       transition="false"
     >
       <template #activator="{ props: menuProps }">
-        <v-btn variant="text" v-bind="menuProps">
+        <v-btn variant="text" v-bind="menuProps" class="d-flex align-center justify-center pa-0">
           <!-- Display Visible Participants -->
           <div class="avatar-row">
             <!-- Display +n Avatar -->
@@ -112,10 +100,11 @@ const toggleMenu = () => {
               :key="index"
               class="avatar-container"
             >
-              <v-avatar
-                size="20px"
-                :style="{ background: getAvatarGradient(participant.individual.name) }"
-                v-on="on"
+              <UserAvatar
+                :name="participant.individual.name"
+                :email="participant.individual.email"
+                :size="20"
+                :border="false"
               />
             </div>
           </div>
@@ -134,10 +123,12 @@ const toggleMenu = () => {
             active-class="ma-4"
           >
             <template #prepend>
-              <v-avatar
-                class="mr-n2"
-                size="12px"
-                :style="{ background: getAvatarGradient(participant.individual.name) }"
+              <UserAvatar
+                :name="participant.individual.name"
+                :email="participant.individual.email"
+                :size="14"
+                :border="false"
+                class="mr-2"
               />
               <!-- <v-icon class="mr-n6 ml-n2" size="x-small" icon="mdi-account"></v-icon> -->
             </template>
@@ -157,7 +148,7 @@ const toggleMenu = () => {
 .avatar-row {
   display: flex;
   align-items: center;
-  justify-content: start;
+  justify-content: center;
   flex-direction: row-reverse;
   position: relative;
 }
@@ -167,6 +158,10 @@ const toggleMenu = () => {
   border-radius: 50%; /* Make the border circular */
   position: relative;
   margin-right: -5px; /* Adjust this value to change the overlapping amount */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden; /* Ensure content doesn't overflow the circular container */
 }
 
 .extra-avatar {
@@ -176,6 +171,8 @@ const toggleMenu = () => {
   display: flex;
   align-items: center;
   justify-content: center;
+  width: 100%;
+  height: 100%;
 }
 
 .hotkey {
diff --git a/src/dispatch/static/dispatch/src/participant/ParticipantSearchPopover.vue b/src/dispatch/static/dispatch/src/participant/ParticipantSearchPopover.vue
index 1e3f8791adf5..239d7b8f3bb5 100644
--- a/src/dispatch/static/dispatch/src/participant/ParticipantSearchPopover.vue
+++ b/src/dispatch/static/dispatch/src/participant/ParticipantSearchPopover.vue
@@ -4,6 +4,7 @@ import { useSavingState } from "@/composables/useSavingState"
 import IndividualApi from "@/individual/api"
 import Hotkey from "@/atomics/Hotkey.vue"
 import { useHotKey } from "@/composables/useHotkey"
+import UserAvatar from "@/atomics/UserAvatar.vue"
 
 import DTooltip from "@/components/DTooltip.vue"
 import type { Ref } from "vue"
@@ -24,11 +25,17 @@ const props = withDefaults(
   }
 )
 
+interface Participant {
+  name: string
+  email: string
+}
+
 const store = useStore()
 const { setSaving } = useSavingState()
 const menu: Ref<boolean> = ref(false)
-const participants: Ref<string[]> = ref([])
+const participants: Ref<Participant[]> = ref([])
 const selectedParticipant: Ref<string> = ref("")
+const selectedParticipantEmail: Ref<string> = ref("")
 const hoveredParticipant: Ref<string> = ref("")
 const searchQuery: Ref<string> = ref("")
 
@@ -40,7 +47,7 @@ useHotKey([props.hotkey], () => {
 
 const emit = defineEmits(["participant-selected"])
 
-// Fetch priorities
+// Fetch participants with their emails
 const fetchParticipants = async (query = "") => {
   try {
     const options = {
@@ -50,7 +57,10 @@ const fetchParticipants = async (query = "") => {
       itemsPerPage: 10,
     }
     const response = await IndividualApi.getAll(options)
-    participants.value = response.data.items.map((item: any) => item.name)
+    participants.value = response.data.items.map((item: any) => ({
+      name: item.name,
+      email: item.email || "",
+    }))
   } catch (error) {
     console.error("Error fetching participants:", error)
   }
@@ -64,8 +74,44 @@ watch(
   { immediate: true }
 )
 
-onMounted(() => {
-  fetchParticipants()
+// Fetch email for a specific participant by name
+const fetchParticipantEmail = async (name) => {
+  if (!name || name === "Select assignee" || name === "Select reporter") {
+    return ""
+  }
+
+  try {
+    const response = await IndividualApi.getAll({
+      filter: JSON.stringify([
+        { and: [{ model: "IndividualContact", field: "name", op: "==", value: name }] },
+      ]),
+    })
+
+    if (response.data.items.length > 0) {
+      const individual = response.data.items[0]
+      const email = individual.email || ""
+      return email
+    } else {
+      return ""
+    }
+  } catch (error) {
+    console.error(`[DEBUG] Error fetching email for participant ${name}:`, error)
+    return ""
+  }
+}
+
+onMounted(async () => {
+  await fetchParticipants()
+
+  // If we have an initial participant from props, fetch their email
+  if (
+    props.participant &&
+    props.participant !== "Select assignee" &&
+    props.participant !== "Select reporter"
+  ) {
+    const email = await fetchParticipantEmail(props.participant)
+    selectedParticipantEmail.value = email
+  }
 })
 
 watch(selectedParticipant, async (newValue: string) => {
@@ -88,6 +134,9 @@ watch(selectedParticipant, async (newValue: string) => {
       return
     }
 
+    // Update the selected participant email
+    selectedParticipantEmail.value = individual.email || ""
+
     // Get the case details from the Vuex store
     const caseDetails = store.state.case_management.selected
 
@@ -110,18 +159,24 @@ watch(selectedParticipant, async (newValue: string) => {
 
 watch(
   () => props.participant,
-  (newVal) => {
+  async (newVal) => {
     if (newVal) {
       selectedParticipant.value = newVal
+
+      // Directly fetch the email for this participant
+      const email = await fetchParticipantEmail(newVal)
+      selectedParticipantEmail.value = email
     } else {
       selectedParticipant.value = props.type === "assignee" ? "Select assignee" : "Select reporter"
+      selectedParticipantEmail.value = ""
     }
   },
   { immediate: true }
 )
 
-const selectParticipant = (participant: string) => {
-  selectedParticipant.value = participant
+const selectParticipant = (participant: Participant) => {
+  selectedParticipant.value = participant.name
+  selectedParticipantEmail.value = participant.email
   menu.value = false
 }
 
@@ -131,11 +186,13 @@ const filteredParticipants = computed(() => {
   // If searching, only include participants that match the query
   if (lowerCaseQuery) {
     const otherParticipants = participants.value
-      .filter((p) => p.toLowerCase().includes(lowerCaseQuery))
+      .filter((p) => p.name.toLowerCase().includes(lowerCaseQuery))
       .slice(0, 10)
 
     // Check if the selected participant matches the search query
-    const isSelectedParticipantIncluded = otherParticipants.includes(selectedParticipant.value)
+    const isSelectedParticipantIncluded = otherParticipants.some(
+      (p) => p.name === selectedParticipant.value
+    )
 
     // If not included, add to the top of the list
     if (
@@ -143,35 +200,32 @@ const filteredParticipants = computed(() => {
       !isSelectedParticipantIncluded &&
       selectedParticipant.value.toLowerCase().includes(lowerCaseQuery)
     ) {
-      otherParticipants.unshift(selectedParticipant.value)
+      otherParticipants.unshift({
+        name: selectedParticipant.value,
+        email: selectedParticipantEmail.value,
+      })
     }
 
     return otherParticipants
   }
 
   // If not searching, include all participants
-  const selectedParticipantItem = selectedParticipant.value ? [selectedParticipant.value] : []
+  const selectedParticipantItem = selectedParticipant.value
+    ? [
+        {
+          name: selectedParticipant.value,
+          email: selectedParticipantEmail.value,
+        },
+      ]
+    : []
+
   const otherParticipants = participants.value
-    .filter((p) => p !== selectedParticipant.value)
+    .filter((p) => p.name !== selectedParticipant.value)
     .slice(0, 9) // Adjust this number if you want more items in the list
 
   return [...selectedParticipantItem, ...otherParticipants]
 })
 
-// Function to generate a hue from a string
-const getAvatarGradient = (participant: string) => {
-  let hash = 5381
-  for (let i = 0; i < participant.length; i++) {
-    hash = ((hash << 5) + hash) ^ participant.charCodeAt(i) // Using XOR operator for better distribution
-  }
-
-  const hue = Math.abs(hash) % 360 // Ensure hue is a positive number
-  const fromColor = `hsl(${hue}, 95%, 50%)`
-  const toColor = `hsl(${(hue + 120) % 360}, 95%, 50%)` // Getting triadic color by adding 120 to hue
-
-  return `linear-gradient(${fromColor}, ${toColor})`
-}
-
 const toggleMenu = () => {
   menu.value = !menu.value
   if (!menu.value) {
@@ -198,13 +252,14 @@ const toggleMenu = () => {
               v-bind="{ ...tooltip, ...menuProps }"
             >
               <template #prepend>
-                <v-avatar
+                <UserAvatar
                   v-if="
                     selectedParticipant !== 'Select assignee' &&
                     selectedParticipant !== 'Select reporter'
                   "
-                  size="14px"
-                  :style="{ background: getAvatarGradient(selectedParticipant) }"
+                  :name="selectedParticipant"
+                  :email="selectedParticipantEmail"
+                  :size="14"
                 />
                 <v-icon v-else size="14px">mdi-account-reactivate</v-icon>
                 <!-- Show icon if selectedParticipant is default -->
@@ -240,10 +295,10 @@ const toggleMenu = () => {
         <v-divider />
         <v-list lines="one">
           <v-list-item
-            v-for="(filteredParticipant, index) in filteredParticipants"
+            v-for="(participant, index) in filteredParticipants"
             :key="index"
-            @click="selectParticipant(filteredParticipant)"
-            @mouseover="hoveredParticipant = filteredParticipant"
+            @click="selectParticipant(participant)"
+            @mouseover="hoveredParticipant = participant.name"
             @mouseleave="hoveredParticipant = ''"
             density="compact"
             rounded="lg"
@@ -251,19 +306,19 @@ const toggleMenu = () => {
             active-class="ma-4"
           >
             <template #prepend>
-              <v-avatar
-                class="mr-n2"
-                size="12px"
-                :style="{ background: getAvatarGradient(filteredParticipant) }"
+              <UserAvatar
+                class="mr-2"
+                :name="participant.name"
+                :email="participant.email"
+                :size="12"
               />
-              <!-- <v-icon class="mr-n6 ml-n2" size="x-small" icon="mdi-account"></v-icon> -->
             </template>
             <v-list-item-title class="dispatch-text-title">
-              {{ filteredParticipant }}
+              {{ participant.name }}
             </v-list-item-title>
             <template #append>
               <v-icon
-                v-if="filteredParticipant === selectedParticipant"
+                v-if="participant.name === selectedParticipant"
                 class="ml-2"
                 size="x-small"
                 :color="hoveredParticipant === selectedParticipant ? 'black' : ''"