diff --git a/public/fonts/.gitkeep b/public/fonts/.gitkeep
deleted file mode 100644
index e69de29b..00000000
diff --git a/public/images/.gitkeep b/public/images/.gitkeep
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/components/Report/LeftSection/Graph/index.tsx b/src/components/Report/LeftSection/Graph/index.tsx
index f1815232..af6a9998 100644
--- a/src/components/Report/LeftSection/Graph/index.tsx
+++ b/src/components/Report/LeftSection/Graph/index.tsx
@@ -13,15 +13,15 @@ const Graph = ({ graphData }: { graphData: ReportGraphProps }) => {
       {
         label: '전체 매출',
         data: graphData.map(data => parseInt(data.total_sales)),
-        backgroundColor: '#022c79e0',
-        borderColor: '#022c79',
+        backgroundColor: '#3182F6',
+        borderColor: '#3182F6',
         borderWidth: 1,
         borderRadius: 5
       },
       {
         label: '쿠폰 적용 매출',
         data: graphData.map(data => parseInt(data.coupon_total_sales)),
-        backgroundColor: '#ff3478e0',
+        backgroundColor: '#FF3478',
         borderColor: '#FF3478',
         borderWidth: 1,
         borderRadius: 5
diff --git a/src/components/Report/RightSection/Catchphrase/index.tsx b/src/components/Report/RightSection/Catchphrase/index.tsx
index 6aad6d99..304922d1 100644
--- a/src/components/Report/RightSection/Catchphrase/index.tsx
+++ b/src/components/Report/RightSection/Catchphrase/index.tsx
@@ -1,3 +1,4 @@
+import { keyframes } from '@emotion/react';
 import styled from '@emotion/styled';
 
 import rocket from '@assets/icons/ic-catchphrase-rocket.svg';
@@ -14,7 +15,8 @@ const Catchphrase = () => {
         <Text>
           {'연도별 쿠폰 사용 현황을'}
           <br />
-          {'빠르게 확인해보세요!'}
+          <span>빠르게</span>
+          {' 확인해보세요!'}
         </Text>
         <RocketIcon
           src={rocket}
@@ -27,6 +29,17 @@ const Catchphrase = () => {
 
 export default Catchphrase;
 
+const rocketRising = keyframes`
+  0% {
+    opacity: 0;
+    transform: translateX(-300px) translateY(50px) rotate(90deg);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0) translateY(0) rotate(0deg);
+  }
+`;
+
 const Container = styled.div`
   position: relative;
 
@@ -49,7 +62,7 @@ const Content = styled.div`
   gap: 16px;
 `;
 
-const Title = styled.span`
+const Title = styled.p`
   font-size: 17px;
   font-weight: 700;
 
@@ -60,8 +73,12 @@ const Text = styled.span`
   color: #415574;
   font-size: 13px;
   font-weight: 700;
-
   line-height: 145%;
+
+  & > span {
+    display: inline;
+    box-shadow: inset 0 -7px 0 #ffddf9;
+  }
 `;
 
 const RocketIcon = styled.img`
@@ -72,4 +89,6 @@ const RocketIcon = styled.img`
 
   width: 120px;
   max-height: 120px;
+
+  animation: ${rocketRising} 1s;
 `;
diff --git a/src/components/common/DashboardHeader/index.tsx b/src/components/common/DashboardHeader/index.tsx
index bdc21a4e..9a582bed 100644
--- a/src/components/common/DashboardHeader/index.tsx
+++ b/src/components/common/DashboardHeader/index.tsx
@@ -41,6 +41,7 @@ const Container = styled.div`
 
   display: flex;
   justify-content: space-between;
+  align-items: flex-end;
 `;
 
 const MenuContainer = styled.div`
@@ -49,7 +50,7 @@ const MenuContainer = styled.div`
 
 const DashboardNavigation = styled.div<NavigationPath>`
   margin-right: 45px;
-  padding: 16px 0;
+  padding: 10px 0;
   border-bottom: ${props =>
     props.$pathname === '/' ? '3px solid #001d6c' : 'none'};
 
@@ -81,9 +82,13 @@ const Button = styled.button`
   justify-content: center;
   align-items: center;
 
-  background: linear-gradient(273deg, #ff0a5c 43.78%, #ff4281 99.72%);
+  background: linear-gradient(91deg, #ff3478 1.39%, #ff83ad 98.63%);
   color: white;
   font-size: 17px;
-
+  font-weight: 700;
   cursor: pointer;
+
+  &:hover {
+    background: #b22655;
+  }
 `;
diff --git a/src/components/common/Layout/Header/Select/index.tsx b/src/components/common/Layout/Header/Select/index.tsx
index 757ca45e..8572d2b7 100644
--- a/src/components/common/Layout/Header/Select/index.tsx
+++ b/src/components/common/Layout/Header/Select/index.tsx
@@ -81,8 +81,6 @@ const Accommodations = styled.select`
   border-radius: 12px;
   padding: 10px 20px;
 
-  display: inline-block;
-
   font-weight: 500;
 
   color: rgba(60, 60, 67, 0.6);
@@ -94,6 +92,16 @@ const Accommodations = styled.select`
   &::-ms-expand {
     display: none;
   }
+
+  ${theme.response.tablet} {
+    width: 150px;
+    height: 30px;
+
+    margin-right: 0;
+    padding: 0 20px;
+
+    font-size: 12px;
+  }
 `;
 
 const Accommodation = styled.option`
diff --git a/src/components/common/Layout/Header/User/UserModal/index.tsx b/src/components/common/Layout/Header/User/UserModal/index.tsx
index f4a1d540..42e53a22 100644
--- a/src/components/common/Layout/Header/User/UserModal/index.tsx
+++ b/src/components/common/Layout/Header/User/UserModal/index.tsx
@@ -1,6 +1,7 @@
 import styled from '@emotion/styled';
 
 import { UserModal, UserModalStyleProps } from '@/types/layout';
+import theme from '@styles/theme';
 
 const UserModal = ({ isOpen }: UserModal) => {
   // HACK: cookie에서 사용자 정보 가져오기
@@ -33,6 +34,13 @@ const Modal = styled.div<UserModalStyleProps>`
 
   background-color: #e3e5e5;
   transition: all 0.5s;
+
+  ${theme.response.tablet} {
+    right: 35px;
+    top: 45px;
+
+    width: ${props => (props.$isOpen ? '300px' : 0)};
+  }
 `;
 
 const UserInformation = styled.div`
diff --git a/src/components/common/Layout/Header/User/index.tsx b/src/components/common/Layout/Header/User/index.tsx
index 11a55bfe..2b565f74 100644
--- a/src/components/common/Layout/Header/User/index.tsx
+++ b/src/components/common/Layout/Header/User/index.tsx
@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 
 import user from '@assets/icons/ic-header-user.svg';
 import UserModal from './UserModal';
+import theme from '@styles/theme';
 
 const User = () => {
   const [isUserModalOpen, setIsUserModalOpen] = useState(false);
@@ -29,4 +30,9 @@ const UserIcon = styled.img`
   border-radius: 50%;
 
   cursor: pointer;
+
+  ${theme.response.tablet} {
+    width: 24px;
+    height: 24px;
+  }
 `;
diff --git a/src/components/common/Layout/Header/index.tsx b/src/components/common/Layout/Header/index.tsx
index 22ef7b1c..8df75d97 100644
--- a/src/components/common/Layout/Header/index.tsx
+++ b/src/components/common/Layout/Header/index.tsx
@@ -3,8 +3,8 @@ import styled from '@emotion/styled';
 
 import logo from '@assets/icons/ic-logo.svg';
 import Select from './Select';
-import theme from '@styles/theme';
 import User from './User';
+import theme from '@styles/theme';
 
 const Header = () => {
   return (
@@ -19,6 +19,7 @@ const Header = () => {
         />
       </LogoLink>
       <Buttons>
+        <div></div>
         <Select />
         <User />
       </Buttons>
@@ -38,25 +39,46 @@ const Container = styled.header`
 
   border-radius: 20px;
   padding: 20px;
-  padding-left: 30px;
 
   display: flex;
-  align-items: center;
   justify-content: space-between;
+  align-items: center;
 
   background-color: ${theme.colors.white};
+
+  ${theme.response.tablet} {
+    height: 65px;
+
+    border-bottom: 1px solid #e6e6e6;
+    border-radius: 0;
+  }
 `;
 
 const LogoLink = styled(NavLink)`
   width: 140px;
   height: 30px;
+
+  ${theme.response.tablet} {
+    display: none;
+  }
 `;
 
 const LogoIcon = styled.img`
   width: 100%;
   height: 100%;
+
+  ${theme.response.tablet} {
+    display: none;
+  }
 `;
 
 const Buttons = styled.div`
   display: flex;
+  align-items: center;
+
+  ${theme.response.tablet} {
+    width: 100%;
+
+    justify-content: space-between;
+  }
 `;
diff --git a/src/components/common/Layout/Sidebar/Header/index.tsx b/src/components/common/Layout/Sidebar/Header/index.tsx
index 61c56c44..5fdb6122 100644
--- a/src/components/common/Layout/Sidebar/Header/index.tsx
+++ b/src/components/common/Layout/Sidebar/Header/index.tsx
@@ -2,11 +2,12 @@ import styled from '@emotion/styled';
 
 import hamburger from '@assets/icons/ic-sidebar-hamburger.svg';
 import logo from '@assets/icons/ic-logo.svg';
-import { SidebarHeader } from '@/types/layout';
+import { SidebarHeader, SidebarOpen } from '@/types/layout';
+import theme from '@styles/theme';
 
 const Header = ({ isSidebarOpen, setIsSidebarOpen }: SidebarHeader) => {
   return (
-    <Container>
+    <Container $isSidebarOpen={isSidebarOpen}>
       <Hamburger onClick={() => setIsSidebarOpen(prev => !prev)}>
         <HamburgerIcon
           src={hamburger}
@@ -25,13 +26,19 @@ const Header = ({ isSidebarOpen, setIsSidebarOpen }: SidebarHeader) => {
 
 export default Header;
 
-const Container = styled.div`
+const Container = styled.div<SidebarOpen>`
   width: 100%;
   height: 100%;
 
+  margin-left: 0;
+
   display: flex;
   justify-content: space-between;
   align-items: center;
+
+  ${theme.response.tablet} {
+    margin-left: 5px;
+  }
 `;
 
 const Hamburger = styled.button`
@@ -43,19 +50,30 @@ const Hamburger = styled.button`
   border-radius: 11px;
 
   background-color: transparent;
-
   cursor: pointer;
-
   transition: all 0.3s;
 
   &:hover {
     background-color: #e9eef6;
   }
+
+  ${theme.response.tablet} {
+    width: 50px;
+    height: 50px;
+
+    margin: 8px 10px;
+    padding: 0 6px;
+  }
 `;
 
 const HamburgerIcon = styled.img`
   width: 30px;
   height: 20px;
+
+  ${theme.response.tablet} {
+    width: 21px;
+    height: 14px;
+  }
 `;
 
 const LogoIcon = styled.img`
diff --git a/src/components/common/Layout/Sidebar/Navigation/Coupon/CouponNav/index.tsx b/src/components/common/Layout/Sidebar/Navigation/Coupon/CouponNav/index.tsx
index b1a359af..2396d0fb 100644
--- a/src/components/common/Layout/Sidebar/Navigation/Coupon/CouponNav/index.tsx
+++ b/src/components/common/Layout/Sidebar/Navigation/Coupon/CouponNav/index.tsx
@@ -91,6 +91,10 @@ const Link = styled(NavLink)`
     color: ${theme.colors.white};
     background-color: rgba(255, 255, 255, 0.3);
   }
+
+  ${theme.response.tablet} {
+    width: 85%;
+  }
 `;
 
 const Icon = styled.img`
diff --git a/src/components/common/Layout/Sidebar/Navigation/index.tsx b/src/components/common/Layout/Sidebar/Navigation/index.tsx
index da273059..d367a867 100644
--- a/src/components/common/Layout/Sidebar/Navigation/index.tsx
+++ b/src/components/common/Layout/Sidebar/Navigation/index.tsx
@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 import Coupon from './Coupon';
 import Settlements from './Settlements';
 import { SidebarOpen } from '@/types/layout';
+import theme from '@styles/theme';
 
 const Navigation = ({ isSidebarOpen }: { isSidebarOpen: boolean }) => {
   return (
@@ -22,4 +23,9 @@ const Container = styled.nav<SidebarOpen>`
   flex-direction: column;
 
   font-size: ${props => (props.$isSidebarOpen ? '14px' : '12px')};
+
+  ${theme.response.tablet} {
+    margin-top: ${props => (props.$isSidebarOpen ? '0' : '30px')};
+    padding: 10px;
+  }
 `;
diff --git a/src/components/common/Layout/Sidebar/index.tsx b/src/components/common/Layout/Sidebar/index.tsx
index d23504a5..a732171d 100644
--- a/src/components/common/Layout/Sidebar/index.tsx
+++ b/src/components/common/Layout/Sidebar/index.tsx
@@ -38,16 +38,25 @@ const Container = styled.div<SidebarOpen>`
   padding: 20px 10px;
 
   background-color: ${theme.colors.white};
-
   overflow: hidden;
   // HACK: z-index 상수화 (const enum, as const 학습 후 적용)
   z-index: 100;
-
   transition: all 0.3s;
+
+  ${theme.response.tablet} {
+    width: ${props => (props.$isSidebarOpen ? '100%' : 'auto')};
+    height: ${props => (props.$isSidebarOpen ? 'fit-content' : '93px')};
+    min-height: ${props => (props.$isSidebarOpen ? 'fit-content' : '93px')};
+
+    padding: 0;
+
+    background-color: ${props =>
+      props.$isSidebarOpen ? 'white' : 'transparent'};
+  }
 `;
 
 const Menu = styled.div`
-  width: 230px;
+  width: 100%;
   height: 100%;
 
   display: flex;
@@ -63,6 +72,5 @@ const LeftoverScreen = styled.div`
   position: fixed;
 
   background-color: #4242427c;
-
   z-index: 90;
 `;
diff --git a/src/components/common/Layout/index.tsx b/src/components/common/Layout/index.tsx
index 89cb5926..72d0d978 100644
--- a/src/components/common/Layout/index.tsx
+++ b/src/components/common/Layout/index.tsx
@@ -40,7 +40,10 @@ const Container = styled.div`
 `;
 
 const Section = styled.section`
+  --sidebar-width: 100px;
+
   width: 100%;
+  min-width: calc(100vh - var(--sidebar-width));
   height: 100vh;
 
   margin-left: 100px;
@@ -48,9 +51,15 @@ const Section = styled.section`
 
   display: flex;
   flex-direction: column;
+
+  ${theme.response.tablet} {
+    min-width: 0;
+
+    margin-left: 0;
+    padding: 0;
+  }
 `;
 
-//HACK: 타입 분리 예정!
 const OutletLayout = styled.div<LayoutStyleProps>`
   width: 100%;
   height: 100vh;
@@ -70,4 +79,14 @@ const OutletLayout = styled.div<LayoutStyleProps>`
   }};
 
   overflow: scroll;
+
+  ${theme.response.tablet} {
+    width: 100vw;
+
+    margin-top: 0;
+    border-radius: 0;
+
+    overflow-x: hidden;
+    overflow-y: scroll;
+  }
 `;
diff --git a/src/styles/theme.ts b/src/styles/theme.ts
index 53dcdfca..b317a7e7 100644
--- a/src/styles/theme.ts
+++ b/src/styles/theme.ts
@@ -1,4 +1,17 @@
 const theme = {
+  // theme 컨벤션 : 페이지 별 변수 지정 사용
+  login: {},
+  dashboard: {},
+  report: {},
+  coupons: {},
+  register: {},
+  settlements: {},
+
+  response: {
+    tablet: '@media screen and (max-width: 900px)',
+    mobile: '@media screen and (max-width: 345px)'
+  },
+
   colors: {
     background: '#F2F3F5',
     hover: '#1A2849',
diff --git a/src/types/theme.d.ts b/src/types/theme.d.ts
index 622d4835..436fb2fd 100644
--- a/src/types/theme.d.ts
+++ b/src/types/theme.d.ts
@@ -9,6 +9,12 @@ declare module '@emotion/react' {
     coupons: {};
     register: {};
     settlements: {};
+
+    response: {
+      tablet: string;
+      mobile: string;
+    };
+
     colors: {
       background: string;
       hover: string;