diff --git a/src/components/ChattingDetail.jsx b/src/components/ChattingDetail.jsx
index 973f1d43890781208d034f40fc319c2796db2e1f..3a3330e60ec8799a113ee71cb2b9844285be2428 100644
--- a/src/components/ChattingDetail.jsx
+++ b/src/components/ChattingDetail.jsx
@@ -992,8 +992,31 @@ function ChattingDetail() {
                   style={{
                     marginTop: sameSenderAsPrev ? "-16px" : "8px",
                     justifyContent: isMine ? "flex-end" : "flex-start",
+                    alignItems: "center", // 중앙 정렬
                   }}
                 >
+                  {/* 내가 보낸 메시지: 읽지 않은 사람 수는 왼쪽에 표시 */}
+                  {isMine && unreadCountValue > 0 && (
+                    <div
+                      style={{
+                        fontSize: "0.8em",
+                        color: "gray",
+                        marginRight: "8px", // 메시지 버블과 간격
+                        textAlign: "center",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        backgroundColor: "#f0f0f0",
+                        borderRadius: "50%",
+                        width: "20px",
+                        height: "20px",
+                        boxShadow: "0px 1px 2px rgba(0, 0, 0, 0.1)",
+                      }}
+                    >
+                      {unreadCountValue}
+                    </div>
+                  )}
+
                   <MessageBubble
                     isMine={isMine}
                     highlighted={
@@ -1012,24 +1035,37 @@ function ChattingDetail() {
                       }}
                     >
                       {highlightSearchTerm(messageData.message)}
-                      <span
-                        style={{
-                          marginLeft: isMine ? "0" : "16px",
-                          marginRight: isMine ? "16px" : "0",
-                          fontSize: "0.8em",
-                          color: "gray",
-                        }}
-                      >
-                        {unreadCountValue > 0 && `${unreadCountValue}`}
-                      </span>
                     </div>
-                    {/* 분 단위가 다르면 시간 표시 */}
+
+                    {/* 메시지의 하단 시간 표시 */}
                     {(isNewMinute || isLastMessageInGroup) && (
                       <MessageTimestamp isMine={isMine}>
                         {messageTime}
                       </MessageTimestamp>
                     )}
                   </MessageBubble>
+
+                  {/* 상대방이 보낸 메시지: 읽지 않은 사람 수는 오른쪽에 표시 */}
+                  {!isMine && unreadCountValue > 0 && (
+                    <div
+                      style={{
+                        fontSize: "0.8em",
+                        color: "gray",
+                        marginLeft: "8px", // 메시지 버블과 간격
+                        textAlign: "center",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        backgroundColor: "#f0f0f0",
+                        borderRadius: "50%",
+                        width: "20px",
+                        height: "20px",
+                        boxShadow: "0px 1px 2px rgba(0, 0, 0, 0.1)",
+                      }}
+                    >
+                      {unreadCountValue}
+                    </div>
+                  )}
                 </MessageContainer>
               </div>
             );