diff --git a/src/features/study/ui/today-study-card.tsx b/src/features/study/ui/today-study-card.tsx
index 109f265e..ffc87692 100644
--- a/src/features/study/ui/today-study-card.tsx
+++ b/src/features/study/ui/today-study-card.tsx
@@ -1,8 +1,11 @@
 'use client';
 
 import { useEffect, useState } from 'react';
+import UserProfileModal from '@/features/my-page/ui/user-profile-modal';
 import { getStatusBadge } from '@/features/study/ui/status-badge-map';
 import { getCookie } from '@/shared/tanstack-query/cookie';
+// TODO: FSD 의 import 바운더리를 넘어서 import 해야하는데,
+// 해당 UI를 shared 등으로 빼던지 수정 필요
 import UserAvatar from '@/shared/ui/avatar';
 import StudyDoneModal from './study-done-modal';
 import StudyReadyModal from './study-ready-modal';
@@ -22,6 +25,18 @@ export default function TodayStudyCard({ studyDate }: { studyDate: string }) {
 
   const isInterviewee = memberId === todayStudyData.intervieweeId;
 
+  const matchedUserId = isInterviewee
+    ? todayStudyData.interviewerId
+    : todayStudyData.intervieweeId;
+
+  const matchedUserImage = isInterviewee
+    ? todayStudyData.interviewerImage
+    : todayStudyData.intervieweeImage;
+
+  const matchedUsername = isInterviewee
+    ? todayStudyData.interviewerName
+    : todayStudyData.intervieweeName;
+
   return (
     <section className="flex w-full flex-col gap-150">
       <div className="mb-4 flex items-start justify-between">
@@ -35,26 +50,26 @@ export default function TodayStudyCard({ studyDate }: { studyDate: string }) {
       </div>
 
       <div className="mb-4 grid grid-cols-2 gap-100">
-        <InfoBox
-          label="스터디 조"
-          value={`${todayStudyData.studySpaceId} 조`}
-        />
-        <InfoBox
-          label="면접자"
-          value={
-            <div className="border-border-default bg-background-default flex items-center gap-100 rounded-full border px-100 py-50">
-              <UserAvatar image={todayStudyData.interviewerImage} />
-              <span className="font-designer-14m">
-                {todayStudyData.interviewerName}
-              </span>
-            </div>
-          }
-        />
-        <InfoBox label="오늘의 면접 주제" value={todayStudyData.subject} />
-        <InfoBox
-          label="진행 현황"
-          value={getStatusBadge(todayStudyData.progressStatus)}
-        />
+        <InfoBox label="스터디 조">
+          {`${todayStudyData.studySpaceId} 조`}
+        </InfoBox>
+        <InfoBox label={isInterviewee ? '면접관' : '면접자'}>
+          <UserProfileModal
+            memberId={matchedUserId}
+            trigger={
+              <div className="border-border-default bg-background-default flex items-center gap-100 rounded-full border px-100 py-50">
+                <UserAvatar image={matchedUserImage} />
+                <span id="testuuiie" className="font-designer-14m">
+                  {matchedUsername}
+                </span>
+              </div>
+            }
+          />
+        </InfoBox>
+        <InfoBox label="오늘의 면접 주제">{todayStudyData.subject}</InfoBox>
+        <InfoBox label="진행 현황">
+          {getStatusBadge(todayStudyData.progressStatus ?? 'PENDING')}
+        </InfoBox>
       </div>
 
       <div className="rounded-100 bg-background-alternative flex flex-col gap-150 px-300 py-150">
@@ -66,15 +81,15 @@ export default function TodayStudyCard({ studyDate }: { studyDate: string }) {
 
   function InfoBox({
     label,
-    value,
+    children,
   }: {
     label: string;
-    value: React.ReactNode;
+    children: React.ReactNode;
   }) {
     return (
       <div className="rounded-100 bg-background-alternative flex min-h-[64px] flex-row items-center justify-between gap-150 px-300 py-150">
         <span className="font-designer-14r text-text-subtle">{label}</span>
-        <span className="font-designer-16m text-text-default">{value}</span>
+        <span className="font-designer-16m text-text-default">{children}</span>
       </div>
     );
   }
diff --git a/src/shared/ui/avatar/index.tsx b/src/shared/ui/avatar/index.tsx
index 59648e3c..3f8817bc 100644
--- a/src/shared/ui/avatar/index.tsx
+++ b/src/shared/ui/avatar/index.tsx
@@ -10,11 +10,13 @@ interface UserAvatarProps {
 
 export default function UserAvatar({
   image,
-  alt = 'user image',
+  alt = 'user profile',
   size = 32,
-}: UserAvatarProps) {
+  ref,
+  ...props
+}: React.RefAttributes<HTMLSpanElement> & UserAvatarProps) {
   return (
-    <Avatar style={{ width: size, height: size }}>
+    <Avatar {...props} ref={ref} style={{ width: size, height: size }}>
       {image ? (
         <AvatarImage src={image} alt={alt} />
       ) : (
diff --git a/src/shared/ui/modal/index.tsx b/src/shared/ui/modal/index.tsx
index 262a2504..c579eff8 100644
--- a/src/shared/ui/modal/index.tsx
+++ b/src/shared/ui/modal/index.tsx
@@ -11,6 +11,7 @@ import {
   DialogOverlay,
   DialogPortal,
   DialogTitle,
+  DialogDescription,
 } from '@/shared/shadcn/ui/dialog';
 
 function ModalRoot({
@@ -71,9 +72,11 @@ function ModalOverlay({
 function ModalContent({
   className,
   children,
+  description = '',
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Content> & {
   size?: 'small' | 'medium' | 'large';
+  description?: string;
 }) {
   const { size = 'small', ...rest } = props;
 
@@ -104,6 +107,7 @@ function ModalContent({
       {...rest}
     >
       <div className="flex max-h-[90vh] flex-col">{children}</div>
+      <DialogDescription className="sr-only">{description}</DialogDescription>
     </DialogPrimitive.Content>
   );
 }