diff --git a/src/frontend/src/components/Avatar.tsx b/src/frontend/src/components/Avatar.tsx
index 0b42105a..b033c806 100644
--- a/src/frontend/src/components/Avatar.tsx
+++ b/src/frontend/src/components/Avatar.tsx
@@ -2,7 +2,7 @@ import { css } from '@/styled-system/css'
 import React from 'react'
 
 export type AvatarProps = React.HTMLAttributes<HTMLSpanElement> & {
-  name: string
+  name?: string
   size?: number
   bgColor?: string
   textColor?: string
diff --git a/src/frontend/src/features/rooms/livekit/components/ParticipantPlaceholder.tsx b/src/frontend/src/features/rooms/livekit/components/ParticipantPlaceholder.tsx
new file mode 100644
index 00000000..3b3aaa1a
--- /dev/null
+++ b/src/frontend/src/features/rooms/livekit/components/ParticipantPlaceholder.tsx
@@ -0,0 +1,28 @@
+import { Participant } from 'livekit-client'
+import { styled } from '@/styled-system/jsx'
+import { Avatar } from '@/components/Avatar'
+
+const StyledParticipantPlaceHolder = styled('div', {
+  base: {
+    width: '100%',
+    height: '100%',
+    backgroundColor: '#3d4043', // fixme - copied from gmeet
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+})
+
+type ParticipantPlaceholderProps = {
+  participant: Participant
+}
+
+export const ParticipantPlaceholder = ({
+  participant,
+}: ParticipantPlaceholderProps) => {
+  return (
+    <StyledParticipantPlaceHolder>
+      <Avatar name={participant.name} />
+    </StyledParticipantPlaceHolder>
+  )
+}
diff --git a/src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx b/src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx
index 66bf217e..182bee68 100644
--- a/src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx
@@ -4,7 +4,6 @@ import {
   FocusToggle,
   LockLockedIcon,
   ParticipantName,
-  ParticipantPlaceholder,
   ParticipantTileProps,
   ScreenShareIcon,
   TrackMutedIndicator,
@@ -25,6 +24,7 @@ import {
   TrackReferenceOrPlaceholder,
 } from '@livekit/components-core'
 import { Track } from 'livekit-client'
+import { ParticipantPlaceholder } from '@/features/rooms/livekit/components/ParticipantPlaceholder'
 
 export function TrackRefContextIfNeeded(
   props: React.PropsWithChildren<{
@@ -108,7 +108,9 @@ export const ParticipantTile: (
                 )
               )}
               <div className="lk-participant-placeholder">
-                <ParticipantPlaceholder />
+                <ParticipantPlaceholder
+                  participant={trackReference.participant}
+                />
               </div>
               <div className="lk-participant-metadata">
                 <div className="lk-participant-metadata-item">