diff --git a/app/products/calls/components/__snapshots__/call_avatar.test.js.snap b/app/products/calls/components/__snapshots__/call_avatar.test.js.snap
index d2e727d64..693e0eafa 100644
--- a/app/products/calls/components/__snapshots__/call_avatar.test.js.snap
+++ b/app/products/calls/components/__snapshots__/call_avatar.test.js.snap
@@ -3,194 +3,155 @@
 exports[`CallAvatar should match snapshot muted 1`] = `
 <View
   style={
-    Object {
-      "backgroundColor": "rgba(255,255,255,0.16)",
-      "borderRadius": 28,
-      "height": 56,
-      "marginRight": 4,
-      "padding": 4,
-      "width": 56,
-    }
+    Array [
+      Object {
+        "borderRadius": 20,
+        "height": 40,
+        "marginBottom": 5,
+        "width": 40,
+      },
+      Object {
+        "shadowColor": "rgb(61, 184, 135)",
+        "shadowOffset": Object {
+          "height": 0,
+          "width": 0,
+        },
+        "shadowOpacity": 1,
+        "shadowRadius": 10,
+      },
+    ]
   }
 >
-  <View
+  <Connect(ProfilePicture)
+    showStatus={false}
+    size={40}
+    userId="user-id"
+  />
+  <CompassIcon
+    name="microphone-off"
+    size={12}
     style={
       Object {
-        "backgroundColor": "rgba(255,255,255,0.24)",
-        "borderRadius": 24,
-        "height": 48,
-        "padding": 4,
-        "width": 48,
+        "backgroundColor": "black",
+        "borderColor": "black",
+        "borderRadius": 10,
+        "borderWidth": 2,
+        "bottom": -5,
+        "color": "white",
+        "height": 20,
+        "overflow": "hidden",
+        "padding": 2,
+        "position": "absolute",
+        "right": -5,
+        "textAlign": "center",
+        "textAlignVertical": "center",
+        "width": 20,
       }
     }
-  >
-    <View
-      style={
-        Object {
-          "borderRadius": 20,
-          "height": 40,
-          "width": 40,
-        }
-      }
-    >
-      <Connect(ProfilePicture)
-        showStatus={false}
-        size={40}
-        userId="user-id"
-      />
-      <CompassIcon
-        name="microphone-off"
-        size={12}
-        style={
-          Object {
-            "backgroundColor": "black",
-            "borderColor": "black",
-            "borderRadius": 10,
-            "borderWidth": 2,
-            "bottom": -5,
-            "color": "white",
-            "height": 20,
-            "overflow": "hidden",
-            "padding": 1,
-            "position": "absolute",
-            "right": -5,
-            "textAlign": "center",
-            "textAlignVertical": "center",
-            "width": 20,
-          }
-        }
-      />
-    </View>
-  </View>
+  />
 </View>
 `;
 
 exports[`CallAvatar should match snapshot size large 1`] = `
 <View
   style={
-    Object {
-      "backgroundColor": "rgba(255,255,255,0.16)",
-      "borderRadius": 44,
-      "height": 88,
-      "marginRight": 4,
-      "padding": 4,
-      "width": 88,
-    }
+    Array [
+      Object {
+        "borderRadius": 36,
+        "height": 72,
+        "marginBottom": 5,
+        "width": 72,
+      },
+      Object {
+        "shadowColor": "rgb(61, 184, 135)",
+        "shadowOffset": Object {
+          "height": 0,
+          "width": 0,
+        },
+        "shadowOpacity": 1,
+        "shadowRadius": 10,
+      },
+    ]
   }
 >
-  <View
+  <Connect(ProfilePicture)
+    showStatus={false}
+    size={72}
+    userId="user-id"
+  />
+  <CompassIcon
+    name="microphone"
+    size={16}
     style={
       Object {
-        "backgroundColor": "rgba(255,255,255,0.24)",
-        "borderRadius": 40,
-        "height": 80,
-        "padding": 4,
-        "width": 80,
+        "backgroundColor": "#3DB887",
+        "borderColor": "black",
+        "borderRadius": 12,
+        "borderWidth": 2,
+        "bottom": -5,
+        "color": "white",
+        "height": 24,
+        "overflow": "hidden",
+        "padding": 2,
+        "position": "absolute",
+        "right": -5,
+        "textAlign": "center",
+        "textAlignVertical": "center",
+        "width": 24,
       }
     }
-  >
-    <View
-      style={
-        Object {
-          "borderRadius": 36,
-          "height": 72,
-          "width": 72,
-        }
-      }
-    >
-      <Connect(ProfilePicture)
-        showStatus={false}
-        size={72}
-        userId="user-id"
-      />
-      <CompassIcon
-        name="microphone"
-        size={16}
-        style={
-          Object {
-            "backgroundColor": "#3DB887",
-            "borderColor": "black",
-            "borderRadius": 12,
-            "borderWidth": 2,
-            "bottom": -5,
-            "color": "white",
-            "height": 24,
-            "overflow": "hidden",
-            "padding": 2,
-            "position": "absolute",
-            "right": -5,
-            "textAlign": "center",
-            "textAlignVertical": "center",
-            "width": 24,
-          }
-        }
-      />
-    </View>
-  </View>
+  />
 </View>
 `;
 
 exports[`CallAvatar should match snapshot unmuted 1`] = `
 <View
   style={
-    Object {
-      "backgroundColor": "rgba(255,255,255,0.16)",
-      "borderRadius": 28,
-      "height": 56,
-      "marginRight": 4,
-      "padding": 4,
-      "width": 56,
-    }
+    Array [
+      Object {
+        "borderRadius": 20,
+        "height": 40,
+        "marginBottom": 5,
+        "width": 40,
+      },
+      Object {
+        "shadowColor": "rgb(61, 184, 135)",
+        "shadowOffset": Object {
+          "height": 0,
+          "width": 0,
+        },
+        "shadowOpacity": 1,
+        "shadowRadius": 10,
+      },
+    ]
   }
 >
-  <View
+  <Connect(ProfilePicture)
+    showStatus={false}
+    size={40}
+    userId="user-id"
+  />
+  <CompassIcon
+    name="microphone"
+    size={12}
     style={
       Object {
-        "backgroundColor": "rgba(255,255,255,0.24)",
-        "borderRadius": 24,
-        "height": 48,
-        "padding": 4,
-        "width": 48,
+        "backgroundColor": "#3DB887",
+        "borderColor": "black",
+        "borderRadius": 10,
+        "borderWidth": 2,
+        "bottom": -5,
+        "color": "white",
+        "height": 20,
+        "overflow": "hidden",
+        "padding": 2,
+        "position": "absolute",
+        "right": -5,
+        "textAlign": "center",
+        "textAlignVertical": "center",
+        "width": 20,
       }
     }
-  >
-    <View
-      style={
-        Object {
-          "borderRadius": 20,
-          "height": 40,
-          "width": 40,
-        }
-      }
-    >
-      <Connect(ProfilePicture)
-        showStatus={false}
-        size={40}
-        userId="user-id"
-      />
-      <CompassIcon
-        name="microphone"
-        size={12}
-        style={
-          Object {
-            "backgroundColor": "#3DB887",
-            "borderColor": "black",
-            "borderRadius": 10,
-            "borderWidth": 2,
-            "bottom": -5,
-            "color": "white",
-            "height": 20,
-            "overflow": "hidden",
-            "padding": 1,
-            "position": "absolute",
-            "right": -5,
-            "textAlign": "center",
-            "textAlignVertical": "center",
-            "width": 20,
-          }
-        }
-      />
-    </View>
-  </View>
+  />
 </View>
 `;
diff --git a/app/products/calls/components/call_avatar.tsx b/app/products/calls/components/call_avatar.tsx
index 0f575ab7d..cd791e380 100644
--- a/app/products/calls/components/call_avatar.tsx
+++ b/app/products/calls/components/call_avatar.tsx
@@ -25,7 +25,7 @@ const getStyleSheet = (props: Props) => {
 
     return StyleSheet.create({
         pictureHalo: {
-            backgroundColor: 'rgba(255,255,255,' + (0.16 * props.volume) + ')',
+            backgroundColor: 'rgba(61, 184, 135,' + (0.24 * props.volume) + ')',
             height: baseSize + 16,
             width: baseSize + 16,
             padding: 4,
@@ -33,16 +33,23 @@ const getStyleSheet = (props: Props) => {
             borderRadius: (baseSize + 16) / 2,
         },
         pictureHalo2: {
-            backgroundColor: 'rgba(255,255,255,' + (0.24 * props.volume) + ')',
+            backgroundColor: 'rgba(61, 184, 135,' + (0.32 * props.volume) + ')',
             height: baseSize + 8,
             width: baseSize + 8,
-            padding: 4,
+            padding: 3,
             borderRadius: (baseSize + 8) / 2,
         },
         picture: {
             borderRadius: baseSize / 2,
             height: baseSize,
             width: baseSize,
+            marginBottom: 5,
+        },
+        voiceShadow: {
+            shadowColor: 'rgb(61, 184, 135)',
+            shadowOffset: {width: 0, height: 0},
+            shadowOpacity: 1,
+            shadowRadius: 10,
         },
         mute: {
             position: 'absolute',
@@ -59,6 +66,13 @@ const getStyleSheet = (props: Props) => {
             textAlign: 'center',
             textAlignVertical: 'center',
             overflow: 'hidden',
+            ...Platform.select(
+                {
+                    ios: {
+                        padding: 2,
+                    },
+                },
+            ),
         },
         raisedHand: {
             position: 'absolute',
@@ -76,7 +90,8 @@ const getStyleSheet = (props: Props) => {
             ...Platform.select(
                 {
                     android: {
-                        padding: 4,
+                        paddingLeft: 4,
+                        paddingTop: 2,
                         color: 'rgb(255, 188, 66)',
                     },
                 },
@@ -105,6 +120,7 @@ const CallAvatar = (props: Props) => {
     const style = getStyleSheet(props);
     const profileSize = props.size === 'm' || !props.size ? 40 : 72;
     const iconSize = props.size === 'm' || !props.size ? 12 : 16;
+    const styleShadow = props.volume > 0 ? style.voiceShadow : {};
 
     // Only show one or the other.
     let topRightIcon: JSX.Element | null = null;
@@ -124,34 +140,42 @@ const CallAvatar = (props: Props) => {
         );
     }
 
-    return (
-        <View style={style.pictureHalo}>
-            <View style={style.pictureHalo2}>
-                <View style={style.picture}>
-                    {
-                        props.userId ?
-                            <ProfilePicture
-                                userId={props.userId}
-                                size={profileSize}
-                                showStatus={false}
-                            /> :
-                            <CompassIcon
-                                name='account-outline'
-                                size={profileSize}
-                            />
-                    }
-                    {
-                        props.muted !== undefined &&
-                        <CompassIcon
-                            name={props.muted ? 'microphone-off' : 'microphone'}
-                            size={iconSize}
-                            style={style.mute}
-                        />
-                    }
-                    {topRightIcon}
-                </View>
-            </View>
+    const view = (
+        <View style={[style.picture, styleShadow]}>
+            {
+                props.userId ?
+                    <ProfilePicture
+                        userId={props.userId}
+                        size={profileSize}
+                        showStatus={false}
+                    /> :
+                    <CompassIcon
+                        name='account-outline'
+                        size={profileSize}
+                    />
+            }
+            {
+                props.muted !== undefined &&
+                <CompassIcon
+                    name={props.muted ? 'microphone-off' : 'microphone'}
+                    size={iconSize}
+                    style={style.mute}
+                />
+            }
+            {topRightIcon}
         </View>
     );
+
+    if (Platform.OS === 'android') {
+        return (
+            <View style={style.pictureHalo}>
+                <View style={style.pictureHalo2}>
+                    {view}
+                </View>
+            </View>
+        );
+    }
+
+    return view;
 };
 export default CallAvatar;
diff --git a/app/products/calls/screens/call/__snapshots__/call_screen.test.js.snap b/app/products/calls/screens/call/__snapshots__/call_screen.test.js.snap
index 7c4b51a35..4bc3e1d4b 100644
--- a/app/products/calls/screens/call/__snapshots__/call_screen.test.js.snap
+++ b/app/products/calls/screens/call/__snapshots__/call_screen.test.js.snap
@@ -149,6 +149,7 @@ exports[`CallScreen Landscape should match snapshot 1`] = `
             }
           >
             User 2
+             (you)
           </Text>
         </View>
       </Pressable>
@@ -870,6 +871,7 @@ exports[`CallScreen Portrait should match snapshot 1`] = `
             }
           >
             User 2
+             (you)
           </Text>
         </View>
       </Pressable>
@@ -1249,6 +1251,7 @@ exports[`CallScreen Portrait should match snapshot with screenshare 1`] = `
             }
           >
             User 2
+             (you)
           </Text>
         </View>
       </Pressable>
@@ -2005,6 +2008,7 @@ exports[`CallScreen should show controls in landscape view on click the users li
             }
           >
             User 2
+             (you)
           </Text>
         </View>
       </Pressable>
diff --git a/app/products/calls/screens/call/call_screen.tsx b/app/products/calls/screens/call/call_screen.tsx
index d33d00508..21606fefe 100644
--- a/app/products/calls/screens/call/call_screen.tsx
+++ b/app/products/calls/screens/call/call_screen.tsx
@@ -374,6 +374,7 @@ const CallScreen = (props: Props) => {
                                 />
                                 <Text style={style.username}>
                                     {displayUsername(user.profile, props.teammateNameDisplay)}
+                                    {user.id === props.currentParticipant?.id && ' (you)'}
                                 </Text>
                             </View>
                         );