diff --git a/frontend/src/assets/svg/error-image.svg b/frontend/src/assets/svg/error-image.svg
index 01772e2df..899f21291 100644
--- a/frontend/src/assets/svg/error-image.svg
+++ b/frontend/src/assets/svg/error-image.svg
@@ -1,4 +1,4 @@
-<svg width="476" height="400" viewBox="0 0 476 400" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg  viewBox="0 0 476 400" fill="none" xmlns="http://www.w3.org/2000/svg">
 <mask id="mask0_823_2728" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="29" y="8" width="412" height="247">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M29.9713 8.02765H440.737V254.066H29.9713V8.02765Z" fill="white"/>
 </mask>
diff --git a/frontend/src/components/common/Error/Error.tsx b/frontend/src/components/common/Error/Error.tsx
index f50edd9d0..6e9ca00a2 100644
--- a/frontend/src/components/common/Error/Error.tsx
+++ b/frontend/src/components/common/Error/Error.tsx
@@ -1,6 +1,8 @@
 import ErrorImage from '@assets/svg/error-image.svg';
 import { HTTP_ERROR_MESSAGE } from '@constants/api';
+import { mediaQueryMobileState } from '@store/mediaQuery';
 import { Box, Button, Flex, Heading, Text } from 'hang-log-design-system';
+import { useRecoilValue } from 'recoil';
 
 import { hasKeyInObject } from '@utils/typeGuard';
 
@@ -18,13 +20,14 @@ export interface ErrorProps {
 
 const Error = ({ statusCode = 404, resetError }: ErrorProps) => {
   const isHTTPError = hasKeyInObject(HTTP_ERROR_MESSAGE, statusCode);
+  const isMobile = useRecoilValue(mediaQueryMobileState);
 
   if (!isHTTPError) return null;
 
   return (
     <Box>
       <Flex styles={{ direction: 'column', align: 'center' }} css={containerStyling}>
-        <ErrorImage aria-label="에러 이미지" />
+        <ErrorImage width={isMobile ? '80%' : '476px'} aria-label="에러 이미지" />
         <Heading css={headingStyling} size="small">
           {HTTP_ERROR_MESSAGE[statusCode].HEADING}
         </Heading>
diff --git a/frontend/src/components/expense/ExpenseInformation/ExpenseInformation.style.ts b/frontend/src/components/expense/ExpenseInformation/ExpenseInformation.style.ts
index 498c0b1c2..9bdc9c573 100644
--- a/frontend/src/components/expense/ExpenseInformation/ExpenseInformation.style.ts
+++ b/frontend/src/components/expense/ExpenseInformation/ExpenseInformation.style.ts
@@ -4,8 +4,12 @@ import { Theme } from 'hang-log-design-system';
 export const sectionStyling = css({
   position: 'relative',
   width: '100%',
-  padding: `${Theme.spacer.spacing4} 0`,
   marginBottom: Theme.spacer.spacing5,
+  padding: `${Theme.spacer.spacing4} 0`,
+
+  '@media screen and (max-width: 600px)': {
+    marginBottom: Theme.spacer.spacing3,
+  },
 });
 
 export const titleStyling = css({
@@ -15,4 +19,23 @@ export const titleStyling = css({
 
 export const badgeWrapperStyling = css({
   width: '60%',
+  minHeight: '24px',
+  marginBottom: Theme.spacer.spacing2,
+
+  overflowX: 'scroll',
+  whiteSpace: 'nowrap',
+  '-ms-overflow-style': 'none',
+  scrollbarWidth: 'none',
+
+  '& > span': {
+    marginRight: Theme.spacer.spacing1,
+  },
+
+  '::-webkit-scrollbar': {
+    display: 'none',
+  },
+
+  '@media screen and (max-width: 600px)': {
+    width: 'calc(100vw - 220px)',
+  },
 });
diff --git a/frontend/src/components/expense/ExpenseInformation/ExpenseInformation.tsx b/frontend/src/components/expense/ExpenseInformation/ExpenseInformation.tsx
index 09ee45026..35bb361dc 100644
--- a/frontend/src/components/expense/ExpenseInformation/ExpenseInformation.tsx
+++ b/frontend/src/components/expense/ExpenseInformation/ExpenseInformation.tsx
@@ -1,5 +1,7 @@
+import { mediaQueryMobileState } from '@store/mediaQuery';
 import type { ExpenseData } from '@type/expense';
-import { Badge, Flex, Heading, Text, Theme } from 'hang-log-design-system';
+import { Badge, Box, Heading, Text } from 'hang-log-design-system';
+import { useRecoilValue } from 'recoil';
 
 import { formatDate } from '@utils/formatter';
 
@@ -15,14 +17,16 @@ interface ExpenseInformationProps
 }
 
 const ExpenseInformation = ({ ...information }: ExpenseInformationProps) => {
+  const isMobile = useRecoilValue(mediaQueryMobileState);
+
   return (
     <header css={sectionStyling}>
-      <Flex styles={{ gap: Theme.spacer.spacing1, wrap: 'wrap' }} css={badgeWrapperStyling}>
+      <Box css={badgeWrapperStyling}>
         {information.cities.map(({ id, name }) => (
           <Badge key={id}>{name}</Badge>
         ))}
-      </Flex>
-      <Heading css={titleStyling} size="large">
+      </Box>
+      <Heading css={titleStyling} size={isMobile ? 'medium' : 'large'}>
         {information.title}
       </Heading>
       <Text>
diff --git a/frontend/src/components/expense/ExpenseListSection/ExpenseListSection.style.ts b/frontend/src/components/expense/ExpenseListSection/ExpenseListSection.style.ts
index 352ccd611..fc6bbc377 100644
--- a/frontend/src/components/expense/ExpenseListSection/ExpenseListSection.style.ts
+++ b/frontend/src/components/expense/ExpenseListSection/ExpenseListSection.style.ts
@@ -9,6 +9,13 @@ export const containerStyling = css({
   width: '50vw',
   marginTop: '140px',
   padding: '0 50px',
+
+  '@media screen and (max-width: 600px)': {
+    marginTop: Theme.spacer.spacing0,
+
+    width: '100vw',
+    padding: `0 ${Theme.spacer.spacing4}`,
+  },
 });
 
 export const toggleGroupStyling = css({
diff --git a/frontend/src/components/expense/ExpenseListSection/ExpenseListSection.tsx b/frontend/src/components/expense/ExpenseListSection/ExpenseListSection.tsx
index 4dffbf2e0..4ef4e3ea8 100644
--- a/frontend/src/components/expense/ExpenseListSection/ExpenseListSection.tsx
+++ b/frontend/src/components/expense/ExpenseListSection/ExpenseListSection.tsx
@@ -1,5 +1,7 @@
 import { EXPENSE_LIST_FILTERS } from '@constants/expense';
-import { Toggle, ToggleGroup, useSelect } from 'hang-log-design-system';
+import { mediaQueryMobileState } from '@store/mediaQuery';
+import { Flex, Heading, Toggle, ToggleGroup, useSelect } from 'hang-log-design-system';
+import { useRecoilValue } from 'recoil';
 
 import ExpenseCategories from '@components/expense/ExpenseCategories/ExpenseCategories';
 import ExpenseDates from '@components/expense/ExpenseDates/ExpenseDates';
@@ -13,28 +15,33 @@ interface ExpenseListProps {
 }
 
 const ExpenseListSection = ({ tripId }: ExpenseListProps) => {
+  const isMobile = useRecoilValue(mediaQueryMobileState);
+
   const { selected: selectedFilter, handleSelectClick: handleFilterSelectClick } = useSelect(
     EXPENSE_LIST_FILTERS.DAY_LOG
   );
 
   return (
     <section css={containerStyling}>
-      <ToggleGroup css={toggleGroupStyling}>
-        <Toggle
-          text={EXPENSE_LIST_FILTERS.DAY_LOG}
-          toggleId={EXPENSE_LIST_FILTERS.DAY_LOG}
-          selectedId={selectedFilter}
-          changeSelect={handleFilterSelectClick}
-          aria-label="날짜 필터"
-        />
-        <Toggle
-          text={EXPENSE_LIST_FILTERS.CATEGORY}
-          toggleId={EXPENSE_LIST_FILTERS.CATEGORY}
-          selectedId={selectedFilter}
-          changeSelect={handleFilterSelectClick}
-          aria-label="카테고리 필터"
-        />
-      </ToggleGroup>
+      <Flex styles={{ justify: isMobile ? 'space-between' : 'flex-end' }}>
+        {isMobile && <Heading size="xSmall">경비 상세 정보</Heading>}
+        <ToggleGroup css={toggleGroupStyling}>
+          <Toggle
+            text={EXPENSE_LIST_FILTERS.DAY_LOG}
+            toggleId={EXPENSE_LIST_FILTERS.DAY_LOG}
+            selectedId={selectedFilter}
+            changeSelect={handleFilterSelectClick}
+            aria-label="날짜 필터"
+          />
+          <Toggle
+            text={EXPENSE_LIST_FILTERS.CATEGORY}
+            toggleId={EXPENSE_LIST_FILTERS.CATEGORY}
+            selectedId={selectedFilter}
+            changeSelect={handleFilterSelectClick}
+            aria-label="카테고리 필터"
+          />
+        </ToggleGroup>
+      </Flex>
       {selectedFilter === EXPENSE_LIST_FILTERS.DAY_LOG ? (
         <ExpenseDates tripId={tripId} />
       ) : (
diff --git a/frontend/src/components/expense/ExpenseListSection/ExpenseListSectionSkeleton.tsx b/frontend/src/components/expense/ExpenseListSection/ExpenseListSectionSkeleton.tsx
index f9d492dc3..b0dc073eb 100644
--- a/frontend/src/components/expense/ExpenseListSection/ExpenseListSectionSkeleton.tsx
+++ b/frontend/src/components/expense/ExpenseListSection/ExpenseListSectionSkeleton.tsx
@@ -1,4 +1,6 @@
+import { mediaQueryMobileState } from '@store/mediaQuery';
 import { Flex, Skeleton, Theme } from 'hang-log-design-system';
+import { useRecoilValue } from 'recoil';
 
 import ExpenseListSkeleton from '@components/expense/ExpenseList/ExpenseListSkeleton';
 import {
@@ -7,9 +9,14 @@ import {
 } from '@components/expense/ExpenseListSection/ExpenseListSection.style';
 
 const ExpenseListSectionSkeleton = () => {
+  const isMobile = useRecoilValue(mediaQueryMobileState);
+
   return (
     <section css={containerStyling}>
-      <Skeleton width="125px" height="38px" css={toggleGroupStyling} />
+      <Flex styles={{ justify: isMobile ? 'space-between' : 'flex-end' }}>
+        {isMobile && <Skeleton width="150px" height="38px" />}
+        <Skeleton width="125px" height="38px" css={toggleGroupStyling} />
+      </Flex>
       <Skeleton width="100%" height="48px" />
       <ExpenseListSkeleton />
       <Flex
diff --git a/frontend/src/components/expense/TotalExpenseSection/TotalExpenseSection.style.ts b/frontend/src/components/expense/TotalExpenseSection/TotalExpenseSection.style.ts
index 2dc19585a..736ba39e8 100644
--- a/frontend/src/components/expense/TotalExpenseSection/TotalExpenseSection.style.ts
+++ b/frontend/src/components/expense/TotalExpenseSection/TotalExpenseSection.style.ts
@@ -8,6 +8,11 @@ export const containerStyling = css({
 
   width: '50vw',
   padding: '0 50px',
+
+  '@media screen and (max-width: 600px)': {
+    width: '100vw',
+    padding: `0 ${Theme.spacer.spacing4}`,
+  },
 });
 
 export const totalAmountStyling = css({
diff --git a/frontend/src/components/expense/TotalExpenseSection/TotalExpenseSection.tsx b/frontend/src/components/expense/TotalExpenseSection/TotalExpenseSection.tsx
index 685c6aeb7..1d73f874a 100644
--- a/frontend/src/components/expense/TotalExpenseSection/TotalExpenseSection.tsx
+++ b/frontend/src/components/expense/TotalExpenseSection/TotalExpenseSection.tsx
@@ -1,6 +1,8 @@
 import { EXPENSE_CHART_COLORS } from '@constants/expense';
 import { CURRENCY_ICON, DEFAULT_CURRENCY } from '@constants/trip';
+import { mediaQueryMobileState } from '@store/mediaQuery';
 import { Box, Heading } from 'hang-log-design-system';
+import { useRecoilValue } from 'recoil';
 
 import { formatNumberToMoney } from '@utils/formatter';
 
@@ -20,6 +22,8 @@ interface TotalExpenseSectionProps {
 }
 
 const TotalExpenseSection = ({ tripId }: TotalExpenseSectionProps) => {
+  const isMobile = useRecoilValue(mediaQueryMobileState);
+
   const { expenseData } = useExpense(tripId);
 
   const chartData = expenseData.categories.reduce<Segment[]>((acc, curr) => {
@@ -45,7 +49,7 @@ const TotalExpenseSection = ({ tripId }: TotalExpenseSectionProps) => {
         endDate={expenseData.endDate}
         cities={expenseData.cities}
       />
-      <Heading size="small" css={totalAmountStyling}>
+      <Heading size={isMobile ? 'xSmall' : 'small'} css={totalAmountStyling}>
         총 경비 :{' '}
         <span>
           {CURRENCY_ICON[DEFAULT_CURRENCY]}
diff --git a/frontend/src/pages/ExpensePage/ExpensePage.style.ts b/frontend/src/pages/ExpensePage/ExpensePage.style.ts
index e45df5675..8ba1f603c 100644
--- a/frontend/src/pages/ExpensePage/ExpensePage.style.ts
+++ b/frontend/src/pages/ExpensePage/ExpensePage.style.ts
@@ -5,4 +5,14 @@ export const containerStyling = css({
   minHeight: `calc(100vh - 81px - ${Theme.spacer.spacing6})`,
 
   marginBottom: Theme.spacer.spacing6,
+
+  '@media screen and (max-width: 600px)': {
+    flexDirection: 'column',
+    gap: Theme.spacer.spacing5,
+  },
+});
+
+export const dividerStyling = css({
+  width: `calc(100vw - ${Theme.spacer.spacing6})`,
+  margin: `0 ${Theme.spacer.spacing4}`,
 });
diff --git a/frontend/src/pages/ExpensePage/ExpensePage.tsx b/frontend/src/pages/ExpensePage/ExpensePage.tsx
index 166208881..4d876916f 100644
--- a/frontend/src/pages/ExpensePage/ExpensePage.tsx
+++ b/frontend/src/pages/ExpensePage/ExpensePage.tsx
@@ -1,9 +1,11 @@
-import { Flex } from 'hang-log-design-system';
+import { mediaQueryMobileState } from '@store/mediaQuery';
+import { Divider, Flex } from 'hang-log-design-system';
 import { useParams } from 'react-router-dom';
+import { useRecoilValue } from 'recoil';
 
 import { useExpenseQuery } from '@hooks/api/useExpenseQuery';
 
-import { containerStyling } from '@pages/ExpensePage/ExpensePage.style';
+import { containerStyling, dividerStyling } from '@pages/ExpensePage/ExpensePage.style';
 
 import ExpenseListSection from '@components/expense/ExpenseListSection/ExpenseListSection';
 import TotalExpenseSection from '@components/expense/TotalExpenseSection/TotalExpenseSection';
@@ -13,11 +15,14 @@ const ExpensePage = () => {
 
   if (!tripId) throw new Error('존재하지 않는 tripId 입니다.');
 
+  const isMobile = useRecoilValue(mediaQueryMobileState);
+
   const { expenseData } = useExpenseQuery(Number(tripId));
 
   return (
     <Flex css={containerStyling}>
       <TotalExpenseSection tripId={expenseData.id} />
+      {isMobile && <Divider css={dividerStyling} />}
       <ExpenseListSection tripId={expenseData.id} />
     </Flex>
   );
diff --git a/frontend/src/pages/ExpensePage/ExpensePageSkeleton.tsx b/frontend/src/pages/ExpensePage/ExpensePageSkeleton.tsx
index 02ad43fe5..06f8ec426 100644
--- a/frontend/src/pages/ExpensePage/ExpensePageSkeleton.tsx
+++ b/frontend/src/pages/ExpensePage/ExpensePageSkeleton.tsx
@@ -1,14 +1,19 @@
-import { Flex } from 'hang-log-design-system';
+import { mediaQueryMobileState } from '@store/mediaQuery';
+import { Divider, Flex } from 'hang-log-design-system';
+import { useRecoilValue } from 'recoil';
 
-import { containerStyling } from '@pages/ExpensePage/ExpensePage.style';
+import { containerStyling, dividerStyling } from '@pages/ExpensePage/ExpensePage.style';
 
 import ExpenseListSectionSkeleton from '@components/expense/ExpenseListSection/ExpenseListSectionSkeleton';
 import TotalExpenseSectionSkeleton from '@components/expense/TotalExpenseSection/TotalExpenseSectionSkeleton';
 
 const ExpensePageSkeleton = () => {
+  const isMobile = useRecoilValue(mediaQueryMobileState);
+
   return (
     <Flex css={containerStyling}>
       <TotalExpenseSectionSkeleton />
+      {isMobile && <Divider css={dividerStyling} />}
       <ExpenseListSectionSkeleton />
     </Flex>
   );
diff --git a/frontend/src/pages/NotFoundPage/NotFoundPage.tsx b/frontend/src/pages/NotFoundPage/NotFoundPage.tsx
index ffe621971..1d4c7703f 100644
--- a/frontend/src/pages/NotFoundPage/NotFoundPage.tsx
+++ b/frontend/src/pages/NotFoundPage/NotFoundPage.tsx
@@ -1,11 +1,15 @@
 import { PATH } from '@constants/path';
 import { useNavigate } from 'react-router-dom';
 
+import { useMediaQuery } from '@hooks/common/useMediaQuery';
+
 import Error from '@components/common/Error/Error';
 
 const NotFoundPage = () => {
   const navigate = useNavigate();
 
+  useMediaQuery();
+
   return <Error resetError={() => navigate(PATH.ROOT)} />;
 };