diff --git a/src/components/coffeechat/CoffeeChatModal/CoffeeChatModal.tsx b/src/components/coffeechat/CoffeeChatModal/CoffeeChatModal.tsx
index dc80d5216..ab7660f71 100644
--- a/src/components/coffeechat/CoffeeChatModal/CoffeeChatModal.tsx
+++ b/src/components/coffeechat/CoffeeChatModal/CoffeeChatModal.tsx
@@ -45,7 +45,8 @@ interface MessageModalProps {
 const MessageModal: FC<MessageModalProps> = ({ receiverId, phone, ...props }) => {
   const {
     handleSubmit,
-    control,watch,
+    control,
+    watch,
     formState: { isValid: _isValid },
   } = useForm<MessageForm>({
     resolver: yupResolver(schema),
@@ -58,7 +59,7 @@ const MessageModal: FC<MessageModalProps> = ({ receiverId, phone, ...props }) =>
   const { open } = useToast();
   const { data: me } = useGetMemberOfMe();
   const { data: profile } = useGetMemberProfileById(me?.id ?? undefined);
-  const {logSubmitEvent}=useEventLogger()
+  const { logSubmitEvent } = useEventLogger();
   const submit = async ({ content, phone }: MessageForm) => {
     if (isPending) {
       return;
@@ -81,7 +82,7 @@ const MessageModal: FC<MessageModalProps> = ({ receiverId, phone, ...props }) =>
           receiverId,
           category: '커피챗',
         });
-        logSubmitEvent('sendCoffeechat',{content:content})
+        logSubmitEvent('sendCoffeechat', { content: content });
         open({
           icon: 'success',
           content: '커피챗 제안이 잘 전달되었어요!',
@@ -101,7 +102,7 @@ const MessageModal: FC<MessageModalProps> = ({ receiverId, phone, ...props }) =>
   return (
     <StyledModal isOpen {...props}>
       {profile && (
-        <StyledForm  onSubmit={handleSubmit(submit)}>
+        <StyledForm onSubmit={handleSubmit(submit)}>
           <ProfileImage src='/icons/icon_coffeechat.svg' />
           <Text mt={30} typography='SUIT_24_B'>
             커피챗 제안하기
@@ -120,20 +121,20 @@ const MessageModal: FC<MessageModalProps> = ({ receiverId, phone, ...props }) =>
           </Text>
           <LoggingClick eventKey='senderPhone'>
             <>
-          <TextWrapper>
-            <StyledText mt={48} color={colors.white}>
-              회신 받을 본인 연락처 <span style={{ color: '#F77234' }}>*</span>
-            </StyledText>
-          </TextWrapper>
-          <RHFControllerFormItem
-            style={{ width: '100%' }}
-            control={control}
-            name='phone'
-            defaultValue={profile?.phone ? profile?.phone : phone}
-            component={StyledInput}
-            placeholder='연락처를 입력해주세요!'
-          />
-          </>
+              <TextWrapper>
+                <StyledText mt={48} color={colors.white}>
+                  회신 받을 본인 연락처 <span style={{ color: '#F77234' }}>*</span>
+                </StyledText>
+              </TextWrapper>
+              <RHFControllerFormItem
+                style={{ width: '100%' }}
+                control={control}
+                name='phone'
+                defaultValue={profile?.phone ? profile?.phone : phone}
+                component={StyledInput}
+                placeholder='연락처를 입력해주세요!'
+              />
+            </>
           </LoggingClick>
           <TextWrapper>
             <StyledText mt={46} color={colors.white}>
@@ -148,13 +149,10 @@ const MessageModal: FC<MessageModalProps> = ({ receiverId, phone, ...props }) =>
               component={StyledTextArea}
               placeholder={COFFEECHAT_PLACEHOLDER}
               maxCount={500}
-
             />
             {/* 향후 any 수정 */}
           </InputWrapper>
-          <TextCountWrapper>
-            {contentValue?contentValue.length:0}/500
-          </TextCountWrapper>
+          <TextCountWrapper>{contentValue ? contentValue.length : 0}/500</TextCountWrapper>
 
           <StyledButton isDisabled={!isValid || isPending}>
             {isPending ? (
@@ -181,43 +179,42 @@ const StyledModal = styled(Modal)`
   padding: 32px 32px 48px;
   width: 588px;
   max-height: 100vh;
-  overflow-y:scroll;
+  overflow-y: scroll;
 
-  &::-webkit-scrollbar {  
+  &::-webkit-scrollbar {
     display: none;
   }
 
-  textarea{
-   background-color : ${colors.gray800};
+  textarea {
+    background-color: ${colors.gray800};
 
-  &::placeholder {
-    color:${colors.gray300}
-  }
+    &::placeholder {
+      color: ${colors.gray300};
+    }
 
-  &:focus{
-    background-color : ${colors.gray800};
-  }
+    &:focus {
+      background-color: ${colors.gray800};
+    }
   }
 
-  input{
-   background-color : ${colors.gray800};
+  input {
+    background-color: ${colors.gray800};
 
-  &::placeholder {
-    color:${colors.gray300}
-  }
+    &::placeholder {
+      color: ${colors.gray300};
+    }
   }
   @supports (height: 100dvh) {
     max-height: 100dvh;
   }
   @media ${MB_BIG_MEDIA_QUERY} {
-    top:60px;
-    padding-top:16px;
+    top: 60px;
+    padding-top: 16px;
     width: 100vw;
     height: auto;
-    min-height:100dvh;
+    min-height: 100dvh;
     overflow-y: scroll;
   }
-
 `;
 
 const StyledForm = styled.form`
@@ -288,33 +285,33 @@ const StyledButton = styled.button<{ isDisabled: boolean }>`
     background-color: ${colors.gray100};
   }
 
-  @media ${MB_BIG_MEDIA_QUERY}{
-    margin-bottom:40px;
+  @media ${MB_BIG_MEDIA_QUERY} {
+    margin-bottom: 40px;
   }
 `;
 const InputWrapper = styled.div`
   width: 100%;
   height: 184px;
 
-  textarea{
-   min-height:184px; 
+  textarea {
+    min-height: 184px;
   }
   @media ${MB_BIG_MEDIA_QUERY} {
     height: 150px;
 
-    textarea{
-      min-height:150px;
+    textarea {
+      min-height: 150px;
     }
   }
 `;
 const StyledText = styled(Text)`
   ${fonts.LABEL_14_SB};
 `;
-const TextCountWrapper=styled.div`
-margin-top:24px;
-width: 100%;
-text-align: right;
-color:${colors.gray300};
+const TextCountWrapper = styled.div`
+  margin-top: 24px;
+  width: 100%;
+  text-align: right;
+  color: ${colors.gray300};
 
-${fonts.LABEL_12_SB};
-`
\ No newline at end of file
+  ${fonts.LABEL_12_SB};
+`;
diff --git a/src/components/members/detail/MessageSection/MessageModal.tsx b/src/components/members/detail/MessageSection/MessageModal.tsx
index 4b1b39c86..f57a85dfe 100644
--- a/src/components/members/detail/MessageSection/MessageModal.tsx
+++ b/src/components/members/detail/MessageSection/MessageModal.tsx
@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { colors } from '@sopt-makers/colors';
-import ProfileIcon from 'public/icons/icon-profile.svg';
+import { IconUser } from '@sopt-makers/icons';
 import { FC, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import * as yup from 'yup';
@@ -15,8 +15,9 @@ import useCustomConfirm from '@/components/common/Modal/useCustomConfirm';
 import Text from '@/components/common/Text';
 import TextArea from '@/components/common/TextArea';
 import Modal, { ModalProps } from '@/components/members/detail/MessageSection/Modal';
-import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery';
+import { MB_BIG_MEDIA_QUERY, MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery';
 import { zIndex } from '@/styles/zIndex';
+import { Button } from '@sopt-makers/ui';
 
 export enum MessageCategory {
   NETWORK = '친목',
@@ -134,11 +135,11 @@ const MessageModal: FC<MessageModalProps> = ({
         {profileImageUrl ? (
           <ProfileImage src={profileImageUrl} style={{ width: '84px', height: '84px', borderRadius: '20px' }} />
         ) : (
-          <EmptyProfileImage style={{ width: '84px', height: '84px' }}>
-            <ProfileIcon />
+          <EmptyProfileImage>
+            <IconUser style={{ width: '45px', height: '45px', color: `${colors.gray300}`, marginTop: '4px' }} />
           </EmptyProfileImage>
         )}
-        <Text mt={30} typography='SUIT_26_B'>
+        <Text mt={24} typography='SUIT_24_B'>
           {name}님에게 쪽지 보내기
         </Text>
         <Text mt={14} typography='SUIT_14_M' color={colors.gray300}>
@@ -159,9 +160,7 @@ const MessageModal: FC<MessageModalProps> = ({
           ))}
         </StyledCategory>
         <TextWrapper>
-          <Text mt={46} color={colors.gray200} typography='SUIT_14_M'>
-            회신 받을 본인 이메일
-          </Text>
+          <Text typography='SUIT_14_SB'>회신 받을 본인 이메일</Text>
         </TextWrapper>
         <RHFControllerFormItem
           style={{ width: '100%' }}
@@ -179,7 +178,7 @@ const MessageModal: FC<MessageModalProps> = ({
             '멤버에게 궁금한 점을 자세하게 적어주세요. 이야기 나누고 싶은 주제를 쉽게 이해할 수 있도록, 회원님에 대해 간단하게 소개해 주시면 더 좋아요.'
           }
         />
-        <StyledButton isDisabled={!isValid || isPending}>
+        <StyledButton type='submit' disabled={!isValid || isPending}>
           {isPending ? (
             <Loading color='white' />
           ) : (
@@ -197,13 +196,18 @@ const MessageModal: FC<MessageModalProps> = ({
 export default MessageModal;
 
 const StyledModal = styled(Modal)`
-  padding-top: 20px;
-  max-height: 100vh;
+  background: ${colors.gray900};
+  padding-top: 40px;
+  max-height: 792px;
   overflow-y: auto;
 
   @supports (height: 100dvh) {
     max-height: 100dvh;
   }
+
+  @media ${MB_BIG_MEDIA_QUERY} {
+    width: 100vw;
+  }
 `;
 
 const StyledForm = styled.form`
@@ -229,10 +233,10 @@ const EmptyProfileImage = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 36px;
+  border-radius: 19px;
   background: ${colors.gray700};
-  width: 171px;
-  height: 171px;
+  width: 84px;
+  height: 84px;
 `;
 
 const StyledCategory = styled.section`
@@ -242,7 +246,7 @@ const StyledCategory = styled.section`
   column-gap: 10px;
   align-items: center;
   justify-content: center;
-  margin-top: 46px;
+  margin-top: 40px;
   max-width: 224px;
 `;
 
@@ -267,26 +271,35 @@ const StyledIcon = styled.img`
 
 const TextWrapper = styled.div`
   display: flex;
+  padding-top: 40px;
   width: 100%;
 `;
 
 const StyledInput = styled(Input)`
-  margin-top: 12px;
+  margin-top: 8px;
+
+  & > input {
+    border: none;
+    border-radius: 10px;
+    background-color: ${colors.gray800};
+    padding: 15px 16px;
+
+    &::placeholder {
+      color: ${colors.gray400};
+    }
+  }
 `;
 
 const StyledTextArea = styled(TextArea)`
   margin-top: 14px;
+  border: none;
+  border-radius: 10px;
+  background-color: ${colors.gray800};
+  padding: 15px 16px;
   height: 172px;
+  line-height: 26px;
 `;
 
-const StyledButton = styled.button<{ isDisabled: boolean }>`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: background-color 0.2s;
-  margin-top: 36px;
-  border-radius: 12px;
-  background-color: ${({ isDisabled }) => (isDisabled ? colors.gray700 : colors.gray10)};
-  cursor: pointer;
-  padding: 14px 28px;
+const StyledButton = styled(Button)`
+  margin-top: 40px;
 `;
diff --git a/src/components/members/detail/MessageSection/Modal.tsx b/src/components/members/detail/MessageSection/Modal.tsx
index e5a0d8941..e8ca4343a 100644
--- a/src/components/members/detail/MessageSection/Modal.tsx
+++ b/src/components/members/detail/MessageSection/Modal.tsx
@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
 import { colors } from '@sopt-makers/colors';
+import { IconXClose } from '@sopt-makers/icons';
 import FocusTrap from 'focus-trap-react';
 import { FC, HTMLAttributes, PropsWithChildren, ReactNode, useRef } from 'react';
 import { RemoveScroll } from 'react-remove-scroll';
@@ -25,8 +26,6 @@ export interface ModalProps extends PropsWithChildren<HTMLAttributes<HTMLDivElem
   onClose: () => void;
 }
 
-
-
 const Modal: FC<ModalProps> = (props) => {
   const { confirmIcon, children, title = '', content, isOpen, onClose, width, ...restProps } = props;
   const modalRef = useRef<HTMLDivElement>(null);
@@ -74,7 +73,7 @@ const StyledBackground = styled.div<{ visible?: boolean }>`
   align-items: center;
   justify-content: center;
   z-index: 200;
-  background-color: rgb(0 0 0 / 30%);
+  background-color: ${colors.backgroundDimmed};
   width: 100%;
   height: 100%;
 `;
@@ -104,7 +103,10 @@ const StyledCloseButton = styled.button`
   }
 `;
 
-const StyledIconClose = styled(IconModalClose)``;
+const StyledIconClose = styled(IconXClose)`
+  width: 24px;
+  height: 24px;
+`;
 
 const StyledIconCheck = styled(IconModalCheck)`
   margin-bottom: 18px;
@@ -115,10 +117,10 @@ const ModalContent = styled.div`
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 40px;
+  padding: 32px;
 
   @media ${MOBILE_MEDIA_QUERY} {
-    padding: 80px;
+    padding: 24px 24px 40px;
   }
 `;