diff --git a/src/components/auth/AuthForm.jsx b/src/components/auth/AuthForm.jsx
index bc3ab5b..8272cbd 100644
--- a/src/components/auth/AuthForm.jsx
+++ b/src/components/auth/AuthForm.jsx
@@ -2,28 +2,37 @@ import React from 'react';
 
 import { Link } from 'react-router-dom';
 
+import facepaint from 'facepaint';
 import styled from '@emotion/styled';
 
 import { NOT_MEMBER_YET, REGISTER, FORM_TYPE } from '../../util/constants/constants';
 
-import Responsive from '../../styles/Responsive';
 import palette from '../../styles/palette';
 import Button from '../../styles/Button';
 
-const AuthFormWrapper = styled(Responsive)`
+const mq = facepaint([
+  '@media(min-width: 1024px)',
+]);
+
+const AuthFormWrapper = styled.div`
+  ${mq({
+    width: ['calc(100% - 10rem)', '600px'],
+    height: ['calc(100% - 1rem)', '400px'],
+  })};
   display: flex;
   align-items: center;
   justify-items: center;
   flex-direction: column;
-  width: 400px;
-  height: 400px;
+  margin: 0 auto;
   padding: 3rem;
   border-radius: 1rem;
   box-shadow: rgba(0, 0, 0, 0.04) 0px 4px 16px 0px;
   background: ${palette.gray[1]};
 
   h2 {
-    font-size: 2rem;
+  ${mq({
+    fontSize: ['3.5vw', '2rem'],
+  })};
     font-weight: bold;
     margin-top: 0;
     color: black;
@@ -45,14 +54,16 @@ const ErrorWrapper = styled.div`
 `;
 
 const InputWrapper = styled.input`
+  ${mq({
+    height: ['calc(100% - 1rem)', '40px'],
+    width: ['45vw', '400px'],
+    padding: ['1vw 12px', '8px 12px'],
+  })};
   font-size: 1rem;
   line-height: 24px;
-  height: 40px;
-  width: 400px;
   border: 0;
   box-shadow: none;
   border: 2px solid #D7E2EB;
-  padding: 8px 12px;
   border-radius: 0.25rem;
   color: #5f5f5f;
   background: white;
@@ -66,6 +77,9 @@ const InputWrapper = styled.input`
 `;
 
 const Footer = styled.div`
+  ${mq({
+    fontSize: ['2vw', '1rem'],
+  })};
   display: flex;
   justify-content: flex-end;
   margin-top: 1.5rem;
@@ -92,7 +106,9 @@ const SpaceBlock = styled.div`
 `;
 
 const StyledButton = styled(Button)`
-  height: 40px;
+  ${mq({
+    height: ['100%', '40px'],
+  })};
   border: 2px solid ${palette.teal[5]};
   &:hover{
     border: 2px solid ${palette.teal[5]};
diff --git a/src/components/introduce/IntroduceForm.jsx b/src/components/introduce/IntroduceForm.jsx
index 240b78b..84a0828 100644
--- a/src/components/introduce/IntroduceForm.jsx
+++ b/src/components/introduce/IntroduceForm.jsx
@@ -43,7 +43,9 @@ const IntroduceReferenceWrapper = styled.div`
 `;
 
 const ModeratorWrapper = styled.div`
-  font-size: 1.2rem;
+  ${mq({
+    fontSize: ['2vw', '1rem', '1.2rem'],
+  })};
   font-weight: bold;
   display: flex;
   justify-content: space-between;
@@ -55,7 +57,9 @@ const ModeratorWrapper = styled.div`
   }
 
   time {
-    font-size: 1rem;
+  ${mq({
+    fontSize: ['2vw', '1rem'],
+  })};
     font-weight: normal;
     color: ${palette.gray[6]};
   }
diff --git a/src/components/introduce/IntroduceHeader.jsx b/src/components/introduce/IntroduceHeader.jsx
index b8295b5..d0a80c7 100644
--- a/src/components/introduce/IntroduceHeader.jsx
+++ b/src/components/introduce/IntroduceHeader.jsx
@@ -1,18 +1,26 @@
 import React from 'react';
 
+import facepaint from 'facepaint';
 import styled from '@emotion/styled';
 
 import palette from '../../styles/palette';
 
+const mq = facepaint([
+  '@media(min-width: 1024px)',
+]);
+
 const IntroduceHeaderWrapper = styled.div`
   display: flex;
   justify-content: space-between;
+  align-items: center;
   margin-bottom: 2rem;
   padding-bottom: 1.5rem;
   border-bottom: 2px solid ${palette.gray[4]};
   
   h1 {
-    font-size: 2.3rem;
+  ${mq({
+    fontSize: ['5vw', '2.3rem'],
+  })};
     margin: 0;
     line-height: 1.5;
   }
diff --git a/src/components/introduce/StudyReviewForm.jsx b/src/components/introduce/StudyReviewForm.jsx
index c75ab97..5fb90da 100644
--- a/src/components/introduce/StudyReviewForm.jsx
+++ b/src/components/introduce/StudyReviewForm.jsx
@@ -4,6 +4,8 @@ import styled from '@emotion/styled';
 
 import StarRatings from 'react-star-ratings';
 
+import facepaint from 'facepaint';
+
 import { STUDY_REVIEW_FORM } from '../../util/constants/constants';
 import { changeDateToTime, isCheckedTimeStatus } from '../../util/utils';
 
@@ -13,11 +15,15 @@ import Button from '../../styles/Button';
 
 const { FORM_TITLE, REVIEW_SUBMIT } = STUDY_REVIEW_FORM;
 
+const mq = facepaint([
+  '@media(min-width: 1024px)',
+]);
+
 const StudyReviewFormWrapper = styled.div`
   display: flex;
   flex-direction: column;
   margin: 3rem 0 3rem 0;
-  padding: 20px 0 20px 0;
+  padding: 20px 20px 20px 20px;
   border: 1px solid ${palette.gray[3]};
   border-radius: 5px;
   background-color: #f8f8f8;
@@ -29,7 +35,11 @@ const StudyReviewFormHeader = styled.div`
   flex-direction: column;
   margin: 0 0 0.5rem 0;
 
+
   h2 {
+  ${mq({
+    fontSize: ['3vw', '1.5rem'],
+  })};
     margin: 0 0 0.3rem 0;
   }
 `;
diff --git a/src/components/main/StudyGroup.jsx b/src/components/main/StudyGroup.jsx
index 568be1a..c1b99bb 100644
--- a/src/components/main/StudyGroup.jsx
+++ b/src/components/main/StudyGroup.jsx
@@ -25,7 +25,7 @@ const StudyGroupWrapper = styled.div(() => mq({
   margin: ['1rem 0px 1rem 0px', '0.5rem', '1rem'],
   borderRadius: '4px',
   border: `2px solid ${palette.gray[4]}`,
-  width: ['100%', 'calc(50% - 2rem)', '19rem'],
+  width: ['100%', 'calc(50% - 1.5rem)', '19rem'],
   boxShadow: 'rgba(0, 0, 0, 0.08) 0px 4px 16px 0px',
   background: 'rgb(248, 249, 250)',
 }));
diff --git a/src/styles/DateTimeStatus.jsx b/src/styles/DateTimeStatus.jsx
index 73fa13f..bc5f536 100644
--- a/src/styles/DateTimeStatus.jsx
+++ b/src/styles/DateTimeStatus.jsx
@@ -29,6 +29,10 @@ const DateTimeStatusWrapper = styled.div`
 
   ${({ status }) => status === 'mainRecruit'
     && css`
+      ${mq({
+    fontSize: ['0.8rem', '1rem'],
+    height: ['15px', '20px'],
+  })};
       margin-bottom: 0.5rem;
       background: ${palette.cyan[4]};
       animation: blink-animation 1.5s steps(5, start) infinite;
diff --git a/src/styles/Responsive.jsx b/src/styles/Responsive.jsx
index ac3bb37..e6d14d8 100644
--- a/src/styles/Responsive.jsx
+++ b/src/styles/Responsive.jsx
@@ -14,7 +14,7 @@ const ResponsiveContainer = styled.div(() => mq({
   marginRight: 'auto',
   paddingLeft: '1rem',
   paddingRight: '1rem',
-  width: ['calc(100% - 2rem)', '680px', '1024px'],
+  width: ['calc(100% - 3rem)', '680px', '1024px'],
 }));
 
 const Responsive = ({ children, ...rest }) => (
diff --git a/src/styles/StyledApplyStatusButton.jsx b/src/styles/StyledApplyStatusButton.jsx
index c1aad7f..1c9cb1a 100644
--- a/src/styles/StyledApplyStatusButton.jsx
+++ b/src/styles/StyledApplyStatusButton.jsx
@@ -1,17 +1,25 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import React from 'react';
 
+import facepaint from 'facepaint';
 import styled from '@emotion/styled';
 
 import palette from './palette';
 
+const mq = facepaint([
+  '@media(min-width: 1024px)',
+]);
+
 const StyledApplyStatusButtonWrapper = styled.button`
+  ${mq({
+    fontSize: ['2.7vw', '1.5rem'],
+    padding: ['0.25rem 10vw', '0.25rem 5rem'],
+  })};
+  height: 33px;
   font-family: 'Gamja Flower', cursive;
-  font-size: 1.5em;
   display: inline-flex;
   align-items: center;
   margin: .5rem 0 .5rem 0;
-  padding: 0.25rem 5rem;
   border: none;
   border-radius: 0.4rem;
   outline: none;
@@ -56,8 +64,11 @@ const StyledApplyStatusButtonWrapper = styled.button`
   }
 
   &.confirm {
+  ${mq({
+    fontSize: ['2.7vw', '1.5rem'],
+    padding: ['0.25rem 5vw', '0.25rem 2.5rem'],
+  })};
     cursor: pointer;
-    padding: 0.25rem 2.5rem;
     color: white;
     background: #4dabf7;