diff --git a/frontend/src/component/Sidebar/Friends/friendItem.tsx b/frontend/src/component/Sidebar/Friends/friendItem.tsx
index 3b2a179..2dfaef3 100644
--- a/frontend/src/component/Sidebar/Friends/friendItem.tsx
+++ b/frontend/src/component/Sidebar/Friends/friendItem.tsx
@@ -50,7 +50,7 @@ const FriendItem = ({ friend }: { friend: friendType }) => {
   return (
     <Content draggable={isOnline}>
       <section id={id} css={friendItemWrapper(isOnline)}>
-        <div css={userName(isOnline)}>{nickname}</div>
+        <div css={userName(status)}>{nickname}</div>
         <div>
           <button onClick={sendChatting}>
             <img src={message} alt="채팅하기 버튼"></img>
diff --git a/frontend/src/component/Sidebar/Friends/friends.styled.ts b/frontend/src/component/Sidebar/Friends/friends.styled.ts
index 81de9fc..2c59f85 100644
--- a/frontend/src/component/Sidebar/Friends/friends.styled.ts
+++ b/frontend/src/component/Sidebar/Friends/friends.styled.ts
@@ -67,7 +67,7 @@ export const friendItemWrapper = (isOnline: boolean) => css`
   }
 `;
 
-export const userName = (state: boolean) => css`
+export const userName = (state: string) => css`
   font-weight: 700;
 
   ::before {
@@ -76,7 +76,11 @@ export const userName = (state: boolean) => css`
     width: 10px;
     height: 10px;
     border-radius: 5px;
-    background-color: ${state ? theme.green : theme.red};
+    background-color: ${state === 'online'
+      ? theme.green
+      : state === 'offline'
+      ? theme.red
+      : theme.yellow};
   }
 `;