diff --git a/src/components/Register/Preview/index.tsx b/src/components/Register/Preview/index.tsx
index c90fd0d5..5360ceb6 100644
--- a/src/components/Register/Preview/index.tsx
+++ b/src/components/Register/Preview/index.tsx
@@ -79,6 +79,10 @@ const PreviewContainer = styled.div`
   border-radius: 20px;
 
   box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+
+  ${theme.response.tablet} {
+    display: none;
+  }
 `;
 
 const Header = styled.div`
@@ -133,7 +137,7 @@ const Coupon = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  
+
   box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.25);
 
   overflow: hidden;
diff --git a/src/components/Register/StepTitle/index.tsx b/src/components/Register/StepTitle/index.tsx
index c79ff4c3..842a06f7 100644
--- a/src/components/Register/StepTitle/index.tsx
+++ b/src/components/Register/StepTitle/index.tsx
@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
 
+import theme from '@styles/theme';
 import { StepTitleProps } from '@/types/register';
 
 const StepTitle = ({ steps, currentStep }: StepTitleProps) => {
@@ -27,6 +28,20 @@ const StepTitleContainer = styled.div`
   font-weight: 600;
   line-height: 31px;
   letter-spacing: -0.78px;
+
+  ${theme.response.tablet} {
+    height: 7vw;
+
+    margin-top: 10px;
+
+    font-size: 3vw;
+  }
+
+  @media (max-width: 550px) {
+    height: 40px;
+
+    font-size: 16px;
+  }
 `;
 
 const StepTitleWrapper = styled.div`
@@ -41,4 +56,8 @@ const Description = styled.span`
   font-size: 13px;
   letter-spacing: 0.1px;
   line-height: 150%;
+
+  ${theme.response.tablet} {
+    display: none;
+  }
 `;
diff --git a/src/components/Register/Stepper/index.tsx b/src/components/Register/Stepper/index.tsx
index 373b993e..b7607964 100644
--- a/src/components/Register/Stepper/index.tsx
+++ b/src/components/Register/Stepper/index.tsx
@@ -78,6 +78,20 @@ const Number = styled.div<NumberStyleProps>`
       color: #979c9e;
     }
   }
+
+  ${theme.response.tablet} {
+    width: 4vw;
+    height: 4vw;
+
+    font-size: 2vw;
+  }
+
+  @media (max-width: 550px) {
+    width: 22px;
+    height: 22px;
+
+    font-size: 11px;
+  }
 `;
 
 const Description = styled.div`
@@ -91,10 +105,18 @@ const Description = styled.div`
     color: #979c9e;
     font-weight: 500;
   }
+
+  ${theme.response.tablet} {
+    display: none;
+  }
 `;
 
 const Line = styled.div<LineStyleProps>`
   margin: 0px 40px;
 
   display: ${props => (props.$isLastStep === 3 ? 'none' : 'block')};
+
+  ${theme.response.tablet} {
+    margin: 0px 4vw;
+  }
 `;
diff --git a/src/components/Register/StepperController/index.tsx b/src/components/Register/StepperController/index.tsx
index 7bbd359a..f198de97 100644
--- a/src/components/Register/StepperController/index.tsx
+++ b/src/components/Register/StepperController/index.tsx
@@ -113,6 +113,13 @@ const PreviousButton = styled.button<PreviousButtonStyleProps>`
   background: #fff;
 
   cursor: pointer;
+
+  ${theme.response.tablet} {
+    width: 123px;
+    height: 39px;
+
+    font-size: 12px;
+  }
 `;
 
 const NextButton = styled.button<NextButtonStyleProps>`
@@ -135,4 +142,11 @@ const NextButton = styled.button<NextButtonStyleProps>`
     props.$isFilled ? `${theme.colors.hover}` : '#cdcfd0'};
 
   cursor: ${props => (props.$isFilled ? 'pointer' : 'default')};
+
+  ${theme.response.tablet} {
+    width: 225px;
+    height: 39px;
+
+    font-size: 12px;
+  }
 `;
diff --git a/src/components/Register/Steps/FirstStep/index.tsx b/src/components/Register/Steps/FirstStep/index.tsx
index ea12cf6e..140768e8 100644
--- a/src/components/Register/Steps/FirstStep/index.tsx
+++ b/src/components/Register/Steps/FirstStep/index.tsx
@@ -1,7 +1,7 @@
 import { useRecoilState } from 'recoil';
-
 import styled from '@emotion/styled';
 
+import theme from '@styles/theme';
 import {
   InputContainer,
   InputButton,
@@ -225,10 +225,30 @@ const Input = styled.input`
   outline: none;
 
   &::placeholder {
-    color: #979C9e;
+    color: #979c9e;
     font-weight: 500;
   }
-}
+
+  ${theme.response.tablet} {
+    width: 44vw;
+    height: 4.5vw;
+    min-width: 220px;
+    min-height: 24px;
+
+    font-size: 1.7vw;
+
+    &::placeholder {
+      font-size: 1.7vw;
+    }
+  }
+
+  @media (max-width: 550px) {
+    font-size: 9px;
+
+    &::placeholder {
+      font-size: 9px;
+    }
+  }
 `;
 
 const ButtonWrapper = styled.div`
@@ -236,6 +256,14 @@ const ButtonWrapper = styled.div`
 
   display: flex;
   gap: 23px;
+
+  ${theme.response.tablet} {
+    gap: 3vw;
+  }
+
+  @media (max-width: 550px) {
+    gap: 16px;
+  }
 `;
 
 const ContentWrapper = styled.div`
diff --git a/src/components/Register/Steps/FourthStep/Calendar/index.tsx b/src/components/Register/Steps/FourthStep/Calendar/index.tsx
index bab11f95..29d4ab47 100644
--- a/src/components/Register/Steps/FourthStep/Calendar/index.tsx
+++ b/src/components/Register/Steps/FourthStep/Calendar/index.tsx
@@ -62,7 +62,7 @@ const Calendar = () => {
         ref={ref}
       >
         <SelectedDate>{value}</SelectedDate>
-        <img
+        <CalendarIcon
           src={input.startDate ? selected : notSelected}
           alt="달력 아이콘"
         />
@@ -80,7 +80,7 @@ const Calendar = () => {
         ref={ref}
       >
         <SelectedDate>{value}</SelectedDate>
-        <img
+        <CalendarIcon
           src={input.endDate ? selected : notSelected}
           alt="달력 아이콘"
         />
@@ -198,10 +198,37 @@ const CustomInput = styled.button`
   background: #fff;
 
   cursor: pointer;
+
+  ${theme.response.tablet} {
+    width: 13.5vw;
+    height: 4.5vw;
+    min-width: 77px;
+    min-height: 27px;
+  }
 `;
 
 const SelectedDate = styled.span`
   color: ${theme.colors.hover};
+
+  ${theme.response.tablet} {
+    font-size: 1.7vw;
+  }
+
+  @media (max-width: 550px) {
+    font-size: 10px;
+  }
+`;
+
+const CalendarIcon = styled.img`
+  ${theme.response.tablet} {
+    width: 3.7vw;
+    height: 3.7vw;
+  }
+
+  @media (max-width: 550px) {
+    width: 20px;
+    height: 20px;
+  }
 `;
 
 const Dash = styled.div`
diff --git a/src/components/Register/Steps/FourthStep/RegisterCompleteModal/index.tsx b/src/components/Register/Steps/FourthStep/RegisterCompleteModal/index.tsx
index 3aeb8612..186e449e 100644
--- a/src/components/Register/Steps/FourthStep/RegisterCompleteModal/index.tsx
+++ b/src/components/Register/Steps/FourthStep/RegisterCompleteModal/index.tsx
@@ -32,12 +32,14 @@ const RegisterCompleteModal = () => {
           alt="등록 완료 아이콘"
         />
         <Description>쿠폰이 등록되었습니다.</Description>
-        <CheckCoupons onClick={handleCheckButton}>
-          쿠폰 확인하러 가기
-        </CheckCoupons>
-        <RegisterNewCoupon onClick={handleRegisterButton}>
-          쿠폰 추가 등록하기
-        </RegisterNewCoupon>
+        <ButtonContainer>
+          <CheckCoupons onClick={handleCheckButton}>
+            쿠폰 확인하러 가기
+          </CheckCoupons>
+          <RegisterNewCoupon onClick={handleRegisterButton}>
+            쿠폰 추가 등록하기
+          </RegisterNewCoupon>
+        </ButtonContainer>
       </Container>
     </Backdrop>
   );
@@ -57,25 +59,49 @@ const Container = styled.div`
   align-items: center;
 
   background: #fff;
+
+  ${theme.response.tablet} {
+    width: 336px;
+    height: 210px;
+  }
 `;
 
 const CompleteIcon = styled.img`
   width: 45px;
   height: 45px;
+
+  ${theme.response.tablet} {
+    width: 38px;
+    height: 38px;
+  }
 `;
 
 const Description = styled.div`
-  margin-top: 15px;
+  margin: 15px 0px 40px;
 
   font-size: 18px;
   font-weight: 600;
+
+  ${theme.response.tablet} {
+    font-size: 15px;
+  }
+`;
+
+const ButtonContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  ${theme.response.tablet} {
+    display: flex;
+    flex-direction: row;
+    gap: 20px;
+  }
 `;
 
 const CheckCoupons = styled.button`
   width: 324px;
   height: 47px;
 
-  margin-top: 40px;
   border: none;
   border-radius: 12px;
 
@@ -86,6 +112,17 @@ const CheckCoupons = styled.button`
   background: ${theme.colors.hover};
 
   cursor: pointer;
+
+  ${theme.response.tablet} {
+    width: 130px;
+    height: 38px;
+
+    border-radius: 10px;
+
+    font-size: 12px;
+
+    background: #b1b1b1;
+  }
 `;
 
 const RegisterNewCoupon = styled.button`
@@ -101,4 +138,18 @@ const RegisterNewCoupon = styled.button`
   background: transparent;
 
   cursor: pointer;
+
+  ${theme.response.tablet} {
+    width: 130px;
+    height: 38px;
+
+    margin-top: 0px;
+    border-radius: 10px;
+
+    color: #fff;
+    font-size: 12px;
+    text-decoration: none;
+
+    background: ${theme.colors.hover};
+  }
 `;
diff --git a/src/components/Register/Steps/FourthStep/index.tsx b/src/components/Register/Steps/FourthStep/index.tsx
index 48e68f7f..87e00776 100644
--- a/src/components/Register/Steps/FourthStep/index.tsx
+++ b/src/components/Register/Steps/FourthStep/index.tsx
@@ -52,6 +52,10 @@ const ContentContainer = styled.div`
 
 const Description = styled.div`
   font-size: 14px;
+
+  ${theme.response.tablet} {
+    display: none;
+  }
 `;
 
 const CalendarWrapper = styled.button<CalendarWrapperStyleProps>`
@@ -77,4 +81,13 @@ const CalendarWrapper = styled.button<CalendarWrapperStyleProps>`
   font-size: 15px;
 
   cursor: pointer;
+
+  ${theme.response.tablet} {
+    width: 36vw;
+    height: 5vw;
+    min-width: 220px;
+    min-height: 32px;
+
+    border-radius: 11px;
+  }
 `;
diff --git a/src/components/Register/Steps/SecondStep/RoomList/index.tsx b/src/components/Register/Steps/SecondStep/RoomList/index.tsx
index 865edea6..21b530de 100644
--- a/src/components/Register/Steps/SecondStep/RoomList/index.tsx
+++ b/src/components/Register/Steps/SecondStep/RoomList/index.tsx
@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
 
+import theme from '@styles/theme';
 import { RoomListProps } from '@/types/register';
 import { sliceName } from '@utils/index';
 
@@ -32,10 +33,27 @@ const Container = styled.div`
   flex-direction: column;
   gap: 10px;
 
-  overflow: auto;
-`;
-
-const Room = styled.div`
   font-size: 10px;
   font-weight: 400;
+
+  overflow: auto;
+
+  ${theme.response.tablet} {
+    width: 13vw;
+    max-height: 80px;
+
+    padding: 1.2vw;
+
+    font-size: 1.4vw;
+
+    overflow-y: hidden;
+  }
+
+  @media (max-width: 550px) {
+    width: 70px;
+
+    font-size: 8px;
+  }
 `;
+
+const Room = styled.div``;
diff --git a/src/components/Register/Steps/SecondStep/RoomSelectButton/index.tsx b/src/components/Register/Steps/SecondStep/RoomSelectButton/index.tsx
index d1d244fa..55510793 100644
--- a/src/components/Register/Steps/SecondStep/RoomSelectButton/index.tsx
+++ b/src/components/Register/Steps/SecondStep/RoomSelectButton/index.tsx
@@ -70,4 +70,18 @@ const Button = styled.label`
   font-size: 15px;
 
   cursor: pointer;
+
+  ${theme.response.tablet} {
+    width: 13vw;
+    height: 5vw;
+
+    font-size: 1.7vw;
+  }
+
+  @media (max-width: 550px) {
+    width: 70px;
+    height: 26px;
+
+    font-size: 9px;
+  }
 `;
diff --git a/src/components/Register/Steps/SecondStep/RoomSelectModal/index.tsx b/src/components/Register/Steps/SecondStep/RoomSelectModal/index.tsx
index c719fb50..7b2b4422 100644
--- a/src/components/Register/Steps/SecondStep/RoomSelectModal/index.tsx
+++ b/src/components/Register/Steps/SecondStep/RoomSelectModal/index.tsx
@@ -2,6 +2,7 @@ import { useState, useRef } from 'react';
 import { useRecoilState } from 'recoil';
 import styled from '@emotion/styled';
 
+import theme from '@styles/theme';
 import { Backdrop } from '@components/common';
 import { RoomType, RoomSelectModalProps } from '@/types/register';
 import close from '@assets/icons/ic-register-close.svg';
@@ -186,6 +187,11 @@ const Container = styled.div`
   box-shadow:
     0px 17px 22px 0px rgba(0, 0, 0, 0.05),
     -0.73px 0.73px 0.73px -1.46px rgba(255, 255, 255, 0.35) inset;
+
+  ${theme.response.tablet} {
+    width: 270px;
+    height: 535px;
+  }
 `;
 
 const Header = styled.div`
@@ -198,6 +204,13 @@ const Header = styled.div`
   align-items: center;
 
   font-size: 18px;
+  font-weight: 600;
+
+  ${theme.response.tablet} {
+    height: 55px;
+
+    font-size: 13px;
+  }
 `;
 
 const CloseButton = styled.button`
@@ -207,6 +220,10 @@ const CloseButton = styled.button`
   padding: 0px;
   border: none;
 
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+
   background: #fff;
 
   cursor: pointer;
@@ -215,6 +232,11 @@ const CloseButton = styled.button`
 const CloseIcon = styled.img`
   width: 35px;
   height: 35px;
+
+  ${theme.response.tablet} {
+    width: 26px;
+    height: 26px;
+  }
 `;
 
 const Filter = styled.div`
@@ -228,6 +250,10 @@ const Filter = styled.div`
 
   display: grid;
   grid-template-columns: 1fr 2fr 2fr;
+
+  ${theme.response.tablet} {
+    height: 50px;
+  }
 `;
 
 const FilterCell = styled.div`
@@ -246,6 +272,11 @@ const SelectAll = styled.input`
 const FilterCheckIcon = styled.img`
   width: 21px;
   height: 21px;
+
+  ${theme.response.tablet} {
+    width: 17px;
+    height: 17px;
+  }
 `;
 
 const SortButton = styled.button`
@@ -259,6 +290,10 @@ const SortButton = styled.button`
   font-size: 15px;
 
   background: transparent;
+
+  ${theme.response.tablet} {
+    font-size: 12px;
+  }
 `;
 
 const SortIcon = styled.img`
@@ -266,6 +301,11 @@ const SortIcon = styled.img`
   height: 20px;
 
   margin-left: 10px;
+
+  ${theme.response.tablet} {
+    width: 15px;
+    height: 15px;
+  }
 `;
 
 const ContentWrapper = styled.div`
@@ -281,12 +321,22 @@ const ContentWrapper = styled.div`
     -0.73px 0.73px 0.73px -1.46px rgba(255, 255, 255, 0.35) inset;
 
   overflow: auto;
+
+  ${theme.response.tablet} {
+    height: 355px;
+
+    padding: 5px 0px;
+  }
 `;
 
 const List = styled.div`
   display: grid;
   grid-template-columns: 1fr 2fr 2fr;
   grid-template-rows: 46px;
+
+  ${theme.response.tablet} {
+    grid-template-rows: 38px;
+  }
 `;
 
 const ListCell = styled.div`
@@ -296,6 +346,10 @@ const ListCell = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
+
+  ${theme.response.tablet} {
+    font-size: 12px;
+  }
 `;
 
 const SelectOne = styled.input`
@@ -305,6 +359,11 @@ const SelectOne = styled.input`
 const ListCheckIcon = styled.img`
   width: 21px;
   height: 21px;
+
+  ${theme.response.tablet} {
+    width: 17px;
+    height: 17px;
+  }
 `;
 
 const Footer = styled.div`
@@ -313,16 +372,23 @@ const Footer = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
+
+  ${theme.response.tablet} {
+    height: 75px;
+  }
 `;
 
 const Button = styled.button`
   width: 170px;
   height: 44px;
 
-  padding: 13px 16px;
   border: none;
   border-radius: 8px;
 
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
   color: #fff;
   font-size: 18px;
   font-weight: 700;
@@ -334,4 +400,11 @@ const Button = styled.button`
   &:disabled {
     background: #cdcfd0;
   }
+
+  ${theme.response.tablet} {
+    width: 135px;
+    height: 34px;
+
+    font-size: 13px;
+  }
 `;
diff --git a/src/components/Register/Steps/SecondStep/index.tsx b/src/components/Register/Steps/SecondStep/index.tsx
index 2c65abe4..35599fc1 100644
--- a/src/components/Register/Steps/SecondStep/index.tsx
+++ b/src/components/Register/Steps/SecondStep/index.tsx
@@ -3,6 +3,7 @@ import { useState } from 'react';
 import { useRecoilState } from 'recoil';
 import styled from '@emotion/styled';
 
+import theme from '@styles/theme';
 import {
   InputContainer,
   InputButton,
@@ -198,4 +199,36 @@ const ButtonWrapper = styled.div`
 
 const ContentWrapper = styled.div`
   padding-left: 134px;
+
+  ${theme.response.tablet} {
+    padding-left: 15.7vw;
+  }
+
+  @media (max-width: 850px) {
+    padding-left: 15.8vw;
+  }
+
+  @media (max-width: 800px) {
+    padding-left: 16vw;
+  }
+
+  @media (max-width: 750px) {
+    padding-left: 16.2vw;
+  }
+
+  @media (max-width: 700px) {
+    padding-left: 16.5vw;
+  }
+
+  @media (max-width: 650px) {
+    padding-left: 16.7vw;
+  }
+
+  @media (max-width: 600px) {
+    padding-left: 17vw;
+  }
+
+  @media (max-width: 550px) {
+    padding-left: 93px;
+  }
 `;
diff --git a/src/components/Register/Steps/ThirdStep/RadioGroup/Radio/index.tsx b/src/components/Register/Steps/ThirdStep/RadioGroup/Radio/index.tsx
index b5bea1ec..3428c9ef 100644
--- a/src/components/Register/Steps/ThirdStep/RadioGroup/Radio/index.tsx
+++ b/src/components/Register/Steps/ThirdStep/RadioGroup/Radio/index.tsx
@@ -62,4 +62,18 @@ const Label = styled.label`
   font-weight: 400;
 
   cursor: pointer;
+
+  ${theme.response.tablet} {
+    width: 4vw;
+    height: 4vw;
+
+    font-size: 1.7vw;
+  }
+
+  @media (max-width: 550px) {
+    width: 22px;
+    height: 22px;
+
+    font-size: 9px;
+  }
 `;
diff --git a/src/components/Register/Steps/ThirdStep/index.tsx b/src/components/Register/Steps/ThirdStep/index.tsx
index e187d515..d698f92b 100644
--- a/src/components/Register/Steps/ThirdStep/index.tsx
+++ b/src/components/Register/Steps/ThirdStep/index.tsx
@@ -96,6 +96,14 @@ const ContentWrapper = styled.div`
 const Text = styled.span`
   color: ${theme.colors.hover};
   font-size: 15px;
+
+  ${theme.response.tablet} {
+    font-size: 1.7vw;
+  }
+
+  @media (max-width: 550px) {
+    font-size: 9px;
+  }
 `;
 
 const RadioWrapper = styled.div`
@@ -104,4 +112,12 @@ const RadioWrapper = styled.div`
   display: flex;
   flex-direction: column;
   gap: 17px;
+
+  ${theme.response.tablet} {
+    height: 20vw;
+  }
+
+  @media (max-width: 550px) {
+    height: 110px;
+  }
 `;
diff --git a/src/components/Register/common/ErrorMessage/index.tsx b/src/components/Register/common/ErrorMessage/index.tsx
index efd9c76a..82841087 100644
--- a/src/components/Register/common/ErrorMessage/index.tsx
+++ b/src/components/Register/common/ErrorMessage/index.tsx
@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
 
+import theme from '@styles/theme';
 import { ErrorMessageProps } from '@/types/register';
 
 const ErrorMessage = ({ children }: ErrorMessageProps) => {
@@ -14,4 +15,12 @@ const MessageWrapper = styled.div`
   color: #da1e28;
   font-size: 12px;
   font-weight: 400;
+
+  ${theme.response.tablet} {
+    font-size: 1.5vw;
+  }
+
+  @media (max-width: 550px) {
+    font-size: 9px;
+  }
 `;
diff --git a/src/components/Register/common/InputAccordion/index.tsx b/src/components/Register/common/InputAccordion/index.tsx
index 523b8276..42fd06d2 100644
--- a/src/components/Register/common/InputAccordion/index.tsx
+++ b/src/components/Register/common/InputAccordion/index.tsx
@@ -1,6 +1,7 @@
 import { useState, useEffect, useRef } from 'react';
 import styled from '@emotion/styled';
 
+import theme from '@styles/theme';
 import { InputAccordionProps, ButtonStyleProps } from '@/types/register';
 import toggle from '@assets/icons/ic-register-toggle.svg';
 
@@ -61,6 +62,11 @@ const Container = styled.div`
 
   display: flex;
   flex-direction: column;
+
+  ${theme.response.tablet} {
+    margin-bottom: 20px;
+    padding: 17px;
+  }
 `;
 
 const Header = styled.div`
@@ -72,6 +78,14 @@ const Header = styled.div`
 const Description = styled.div`
   color: #979c9e;
   font-size: 15px;
+
+  ${theme.response.tablet} {
+    font-size: 2vw;
+  }
+
+  @media (max-width: 550px) {
+    font-size: 11px;
+  }
 `;
 
 const Button = styled.button<ButtonStyleProps>`
@@ -103,4 +117,8 @@ const ContentWrapper = styled.div`
 
 const Content = styled.div`
   padding-top: 20px;
+
+  ${theme.response.tablet} {
+    padding-top: 2vw;
+  }
 `;
diff --git a/src/components/Register/common/InputButton/index.tsx b/src/components/Register/common/InputButton/index.tsx
index e1b5d810..8c749232 100644
--- a/src/components/Register/common/InputButton/index.tsx
+++ b/src/components/Register/common/InputButton/index.tsx
@@ -28,12 +28,7 @@ const InputButton = ({
         defaultChecked={isChecked}
         onChange={handleButtonChange}
       />
-      <Button
-        htmlFor={id}
-        // onClick={handleToggle}
-      >
-        {buttonName}
-      </Button>
+      <Button htmlFor={id}>{buttonName}</Button>
     </>
   );
 };
@@ -67,4 +62,18 @@ const Button = styled.label`
   font-size: 15px;
 
   cursor: pointer;
+
+  ${theme.response.tablet} {
+    width: 13vw;
+    height: 5vw;
+
+    font-size: 1.7vw;
+  }
+
+  @media (max-width: 550px) {
+    width: 70px;
+    height: 26px;
+
+    font-size: 9px;
+  }
 `;
diff --git a/src/components/Register/common/InputCheckBox/index.tsx b/src/components/Register/common/InputCheckBox/index.tsx
index 0f7f0107..f247917d 100644
--- a/src/components/Register/common/InputCheckBox/index.tsx
+++ b/src/components/Register/common/InputCheckBox/index.tsx
@@ -56,6 +56,14 @@ const Label = styled.label<LabelStyleProps>`
 
   color: ${props => (props.$isChecked ? theme.colors.hover : '#757676')};
   font-size: 15px;
+
+  ${theme.response.tablet} {
+    font-size: 1.7vw;
+  }
+
+  @media (max-width: 550px) {
+    font-size: 9px;
+  }
 `;
 
 const CheckIcon = styled.img`
@@ -63,4 +71,14 @@ const CheckIcon = styled.img`
   height: 20px;
 
   margin-right: 5px;
+
+  ${theme.response.tablet} {
+    width: 2vw;
+    height: 2vw;
+  }
+
+  @media (max-width: 550px) {
+    width: 11px;
+    height: 11px;
+  }
 `;
diff --git a/src/components/Register/common/InputContainer/index.tsx b/src/components/Register/common/InputContainer/index.tsx
index f1aa71f5..6f189ab0 100644
--- a/src/components/Register/common/InputContainer/index.tsx
+++ b/src/components/Register/common/InputContainer/index.tsx
@@ -23,10 +23,25 @@ const Container = styled.div`
   border-radius: 16px;
 
   display: inline-block;
+
+  ${theme.response.tablet} {
+    width: 100%;
+
+    margin-bottom: 20px;
+    padding: 17px;
+  }
 `;
 
 const Description = styled.div`
   color: ${theme.colors.hover};
   font-size: 17px;
   font-weight: 600;
+
+  ${theme.response.tablet} {
+    font-size: 2vw;
+  }
+
+  @media (max-width: 550px) {
+    font-size: 11px;
+  }
 `;
diff --git a/src/components/Register/common/InputField/index.tsx b/src/components/Register/common/InputField/index.tsx
index 54ca3d61..7d4ea0f1 100644
--- a/src/components/Register/common/InputField/index.tsx
+++ b/src/components/Register/common/InputField/index.tsx
@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
-import theme from '@styles/theme';
 
+import theme from '@styles/theme';
 import { InputFieldProps, InputFieldStyleProps } from '@/types/register';
 import { inputFilter } from '@utils/index';
 
@@ -40,11 +40,21 @@ export default InputField;
 const Container = styled.div`
   position: relative;
 
+  width: 245px;
+
   margin-right: 10px;
+
+  ${theme.response.tablet} {
+    width: 29vw;
+  }
+
+  @media (max-width: 550px) {
+    width: 156px;
+  }
 `;
 
 const Input = styled.input<InputFieldStyleProps>`
-  width: 245px;
+  width: 100%;
   height: 39px;
 
   padding: 0 ${props => (props.$text === '원' ? '28px' : '61px')};
@@ -54,10 +64,40 @@ const Input = styled.input<InputFieldStyleProps>`
 
   font-size: 15px;
   text-align: right;
+
+  ${theme.response.tablet} {
+    height: 5vw;
+
+    padding: 0 ${props => (props.$text === '원' ? '4.2vw' : '7.7vw')};
+
+    font-size: 1.7vw;
+  }
+
+  @media (max-width: 550px) {
+    height: 26px;
+
+    padding: 0 ${props => (props.$text === '원' ? '23px' : '42px')};
+
+    font-size: 9px;
+  }
 `;
 
 const Text = styled.span<InputFieldStyleProps>`
   position: absolute;
   top: 10px;
   left: ${props => (props.$text === '원' ? '219px' : '186px')};
+
+  ${theme.response.tablet} {
+    top: 1.45vw;
+    left: ${props => (props.$text === '원' ? '25vw' : '21.5vw')};
+
+    font-size: 1.7vw;
+  }
+
+  @media (max-width: 550px) {
+    top: 8px;
+    left: ${props => (props.$text === '원' ? '134px' : '115px')};
+
+    font-size: 9px;
+  }
 `;
diff --git a/src/components/Register/common/InputRadio/index.tsx b/src/components/Register/common/InputRadio/index.tsx
index 23efa2f4..5989885c 100644
--- a/src/components/Register/common/InputRadio/index.tsx
+++ b/src/components/Register/common/InputRadio/index.tsx
@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 
 import theme from '@styles/theme';
-import { InputRadioProps, InputRadioStyleProps } from '@/types/register';
+import { InputRadioProps } from '@/types/register';
 import selected from '@assets/icons/ic-register-selected.svg';
 import unselected from '@assets/icons/ic-register-unselected.svg';
 
@@ -28,14 +28,13 @@ const InputRadio = ({
         name={name}
         value={value}
         defaultChecked={isChecked}
-        $src={selected}
         onChange={handleButtonChange}
       />
       <Label htmlFor={id}>
         <ContentWrapper>
           <SelectIcon
-            className="icon"
-            $src={unselected}
+            src={isChecked ? selected : unselected}
+            alt="라디오버튼 아이콘"
           />
           {text}
         </ContentWrapper>
@@ -49,17 +48,13 @@ const InputRadio = ({
 
 export default InputRadio;
 
-const Radio = styled.input<InputRadioStyleProps>`
+const Radio = styled.input`
   display: none;
 
   &:checked + label {
     color: ${theme.colors.hover};
   }
 
-  &:checked + label .icon {
-    background: url(${props => props.$src});
-  }
-
   &:checked ~ .children {
     display: block;
   }
@@ -77,15 +72,31 @@ const Label = styled.label`
 const ContentWrapper = styled.div`
   display: flex;
   align-items: center;
+
+  ${theme.response.tablet} {
+    font-size: 1.9vw;
+  }
+
+  @media (max-width: 550px) {
+    font-size: 11px;
+  }
 `;
 
-const SelectIcon = styled.div<InputRadioStyleProps>`
+const SelectIcon = styled.img`
   width: 24px;
   height: 24px;
 
   margin-right: 5px;
 
-  background: url(${props => props.$src});
+  ${theme.response.tablet} {
+    width: 2vw;
+    height: 2vw;
+  }
+
+  @media (max-width: 550px) {
+    width: 11px;
+    height: 11px;
+  }
 `;
 
 const ChildrenWrapper = styled.div`
@@ -93,4 +104,12 @@ const ChildrenWrapper = styled.div`
   padding-left: 29px;
 
   display: none;
+
+  ${theme.response.tablet} {
+    padding-left: 3vw;
+  }
+
+  @media (max-width: 550px) {
+    padding-left: 17px;
+  }
 `;
diff --git a/src/components/Register/common/InputWrapper/index.tsx b/src/components/Register/common/InputWrapper/index.tsx
index 6e472e8d..5d6a2b15 100644
--- a/src/components/Register/common/InputWrapper/index.tsx
+++ b/src/components/Register/common/InputWrapper/index.tsx
@@ -19,6 +19,4 @@ const Wrapper = styled.div`
   width: 100%;
 
   margin-top: 9px;
-
-  display: inline-block;
 `;
diff --git a/src/pages/Register/index.tsx b/src/pages/Register/index.tsx
index 3482b574..facda70b 100644
--- a/src/pages/Register/index.tsx
+++ b/src/pages/Register/index.tsx
@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 import styled from '@emotion/styled';
 
+import theme from '@styles/theme';
 import {
   Stepper,
   StepperController,
@@ -74,7 +75,7 @@ const Register = () => {
 export default Register;
 
 const Background = styled.div`
-  width: 100%;
+  min-width: 1225px;
   height: 100%;
 
   padding: 2.5%;
@@ -86,6 +87,11 @@ const Background = styled.div`
     rgba(163, 191, 255, 0.1) 49.57%,
     #fff 100%
   );
+
+  ${theme.response.tablet} {
+    max-width: 890px;
+    min-width: 375px;
+  }
 `;
 
 const RegisterContainer = styled.div`
@@ -101,6 +107,12 @@ const RegisterContainer = styled.div`
     0px 17.525px 21.907px 0px rgba(0, 0, 0, 0.05),
     -0.73px 0.73px 0.73px -1.46px rgba(255, 255, 255, 0.35) inset;
   backdrop-filter: blur(71px);
+
+  ${theme.response.tablet} {
+    height: 100%;
+
+    border-radius: 0px;
+  }
 `;
 
 const TitleContainer = styled.div`
@@ -120,6 +132,13 @@ const TitleContainer = styled.div`
     0px 17.525px 21.907px 0px rgba(0, 0, 0, 0.05),
     -0.73px 0.73px 0.73px -1.46px rgba(255, 255, 255, 0.35) inset;
   backdrop-filter: blur(71px);
+
+  ${theme.response.tablet} {
+    height: 18%;
+
+    padding-left: 40px;
+    border-radius: 0px 0px 0px 60px;
+  }
 `;
 
 const Title = styled.span`
@@ -127,6 +146,14 @@ const Title = styled.span`
   font-weight: 600;
   line-height: 31px;
   letter-spacing: -0.78px;
+
+  ${theme.response.tablet} {
+    font-size: 3vw;
+  }
+
+  @media (max-width: 550px) {
+    font-size: 16px;
+  }
 `;
 
 const ContentContainer = styled.div`
@@ -134,6 +161,10 @@ const ContentContainer = styled.div`
 
   width: 100%;
   height: 80%;
+
+  ${theme.response.tablet} {
+    overflow: auto;
+  }
 `;
 
 const InnerContentContainer = styled.div`
@@ -146,31 +177,51 @@ const InnerContentContainer = styled.div`
   height: 84%;
 
   overflow: auto;
+
+  ${theme.response.tablet} {
+    height: 100%;
+
+    margin-top: 5vw;
+
+    overflow: visible;
+  }
+
+  @media (max-width: 550px) {
+    margin-top: 25px;
+  }
 `;
 
 const SectionContainer = styled.div`
-  position: relative;
-
   width: 100%;
 
-  display: inline-block;
+  display: flex;
+  justify-content: space-between;
+
+  ${theme.response.tablet} {
+    flex-direction: column;
+  }
 `;
 
 const LeftSection = styled.div`
   width: 47%;
 
-  display: inline-block;
+  display: flex;
+  flex-direction: column;
+
+  ${theme.response.tablet} {
+    width: 100%;
+  }
 `;
 
 const RightSection = styled.div`
-  position: absolute;
-  top: 0px;
-  right: 0px;
-
   width: 47%;
   height: 100%;
 
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+
+  ${theme.response.tablet} {
+    width: 100%;
+  }
 `;
diff --git a/src/types/register.ts b/src/types/register.ts
index 2ef028a8..bcfd7339 100644
--- a/src/types/register.ts
+++ b/src/types/register.ts
@@ -75,10 +75,6 @@ export type InputRadioProps = {
   onButtonChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 };
 
-export type InputRadioStyleProps = {
-  $src: string;
-};
-
 // InputWrapper
 export type InputWrapperProps = {
   state?: string;