diff --git a/webapp/components/player/detail.tsx b/webapp/components/player/detail.tsx
index c159fa7..134b747 100644
--- a/webapp/components/player/detail.tsx
+++ b/webapp/components/player/detail.tsx
@@ -4,7 +4,7 @@ export default function Detail(props: { streamId: string, userStatus: UserStatus
   const { streamId, userStatus, restart } = props
   return (
     <details className='text-white mx-2 text-sm font-border' style={{ position: 'absolute' }}>
-      <summary className='text-center'>{userStatus.name}</summary>
+      <summary className='text-center rounded-lg px-xs' style={{ backgroundColor: userStatus.state === 'connected' ? 'rgba(16, 185, 129, 0.6)' : 'rgba(244, 63, 94, 0.6)' }}>{userStatus.name}</summary>
       <center>
         <div className='flex flex-row flex-wrap justify-around'>
           <p>name: <code>{userStatus.name}</code></p>