diff --git a/src/app/(home)/_components/FeedLists.css.ts b/src/app/(home)/_components/FeedLists.css.ts
index 81f6e396..4f2a12c7 100644
--- a/src/app/(home)/_components/FeedLists.css.ts
+++ b/src/app/(home)/_components/FeedLists.css.ts
@@ -4,7 +4,7 @@ import { vars } from '@/styles/__theme.css';
 export const listBackground = createVar();
 
 export const wrapperOuter = style({
-  padding: '0 16px 30px',
+  padding: '0 16px 84px 16px',
   marginTop: '12px',
 
   display: 'flex',
diff --git a/src/app/(home)/_components/FeedLists.tsx b/src/app/(home)/_components/FeedLists.tsx
index e9730d65..1a4e113c 100644
--- a/src/app/(home)/_components/FeedLists.tsx
+++ b/src/app/(home)/_components/FeedLists.tsx
@@ -73,9 +73,6 @@ function FeedLists({ category, tab = 'recent' }: FeedListsType) {
   //     </section>
   //   );
   // }
-  console.log(category);
-
-  console.log(feedLists);
 
   return (
     <section className={styles.wrapperOuter}>
diff --git a/src/app/(home)/_components/TrendingLists.css.ts b/src/app/(home)/_components/TrendingLists.css.ts
index a7e21e67..8cffd034 100644
--- a/src/app/(home)/_components/TrendingLists.css.ts
+++ b/src/app/(home)/_components/TrendingLists.css.ts
@@ -57,7 +57,9 @@ export const testItem = style({
   height: '100%',
 });
 
-export const slide = style({});
+export const slide = style({
+  width: '100%',
+});
 
 export const itemWrapper = style({
   width: '100%',
diff --git a/src/app/(home)/_components/TrendingLists.tsx b/src/app/(home)/_components/TrendingLists.tsx
index 91f58d90..fe4a9439 100644
--- a/src/app/(home)/_components/TrendingLists.tsx
+++ b/src/app/(home)/_components/TrendingLists.tsx
@@ -18,14 +18,14 @@ import { vars } from '@/styles/theme.css';
 import { TrendingListsSkeleton } from '../../../components/exploreComponents/Skeleton';
 
 function TrendingList() {
-  const { data: trendingLists, isFetching } = useQuery({
-    queryKey: [QUERY_KEYS.getTrendingLists],
-    queryFn: () => getTrendingLists(),
-  });
+  // 오류로인해 주석처리 해 둠
+  // const { data: trendingLists, isFetching } = useQuery({
+  //   queryKey: [QUERY_KEYS.getTrendingLists],
+  //   queryFn: () => getTrendingLists(),
+  // });
 
   const SWIPER_STYLE = useMemo(
     () => ({
-      width: '100vw',
       height: '280px',
       padding: '10px 0',
     }),
@@ -40,9 +40,9 @@ function TrendingList() {
     []
   );
 
-  if (isFetching) {
-    return <TrendingListsSkeleton />;
-  }
+  // if (isFetching) {
+  //   return <TrendingListsSkeleton />;
+  // }
 
   return (
     <section className={styles.wrapper}>
diff --git a/src/app/(home)/page.css.ts b/src/app/(home)/page.css.ts
deleted file mode 100644
index 1e49ac02..00000000
--- a/src/app/(home)/page.css.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { style } from '@vanilla-extract/css';
-
-export const wrapper = style({
-  marginBottom: 84,
-
-  position: 'relative',
-});
diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx
index aa36942a..fc9e79df 100644
--- a/src/app/(home)/page.tsx
+++ b/src/app/(home)/page.tsx
@@ -10,8 +10,6 @@ import LoginModal from '@/components/login/LoginModal';
 import Loading from '@/components/loading/Loading';
 import Feed from '@/app/(home)/_components/Feed';
 
-import * as styles from './page.css';
-
 import useBooleanOutput from '@/hooks/useBooleanOutput';
 import toasting from '@/lib/utils/toasting';
 import toastMessage from '@/lib/constants/toastMessage';
@@ -40,7 +38,7 @@ function LandingPage() {
 
   return (
     <>
-      <div className={styles.wrapper}>
+      <div>
         <Suspense fallback={<Loading />}>
           <PWAPrompt
             copyTitle="리스티웨이브 앱 설치하기"
diff --git a/src/app/account/page.css.ts b/src/app/account/page.css.ts
index 4c67693f..c57c3deb 100644
--- a/src/app/account/page.css.ts
+++ b/src/app/account/page.css.ts
@@ -3,8 +3,6 @@ import * as fonts from '@/styles/font.css';
 import { vars } from '@/styles/theme.css';
 
 export const container = style({
-  marginTop: 18,
-
   display: 'flex',
   flexDirection: 'column',
   gap: 12,
diff --git a/src/app/account/page.tsx b/src/app/account/page.tsx
index ed79053d..299f004d 100644
--- a/src/app/account/page.tsx
+++ b/src/app/account/page.tsx
@@ -1,7 +1,8 @@
 'use client';
+
 import { useRouter } from 'next/navigation';
 import useBooleanOutput from '@/hooks/useBooleanOutput';
-import Header from '@/components/Header/__Header';
+import Header from '@/components/Header/Header';
 import useMoveToPage from '@/hooks/useMoveToPage';
 
 import NavigateIcon from '/public/icons/chevron_right.svg';
@@ -12,7 +13,6 @@ import MessageIcon from '/public/icons/message_square.svg';
 import { useLanguage } from '@/store/useLanguage';
 import { accountLocale } from '@/app/account/locale';
 import LogoutModal from './_components/LogoutModal';
-import LanguageDropdown from './_components/LanguageDropdown';
 import * as styles from './page.css';
 import SegmentedControl from '@/components/SegmentedControl/SegmentedControl';
 
@@ -32,7 +32,7 @@ export default function AccountPage() {
   };
 
   return (
-    <>
+    <div className={styles.container}>
       <Header
         left="back"
         leftClick={() => {
@@ -40,57 +40,55 @@ export default function AccountPage() {
         }}
         title={accountLocale[language].settings}
       />
-      <div className={styles.container}>
-        <section className={styles.section}>
-          <div className={styles.buttonDiv} onClick={onClickMoveToPage('account/profile')} role="button">
-            <div className={styles.titleDiv}>
-              <UserIcon width={24} height={24} alt={accountLocale[language].profileSetting} />
-              {accountLocale[language].profileSetting}
-            </div>
-            <NavigateIcon width={16} height={16} />
+      <section className={styles.section}>
+        <div className={styles.buttonDiv} onClick={onClickMoveToPage('account/profile')} role="button">
+          <div className={styles.titleDiv}>
+            <UserIcon width={24} height={24} alt={accountLocale[language].profileSetting} />
+            {accountLocale[language].profileSetting}
           </div>
-        </section>
-        <section className={styles.section}>
-          <div className={styles.baseDiv}>
-            <div className={styles.titleDiv}>
-              <GlobeIcon width={24} height={24} alt={accountLocale[language].changeLanguage} />
-              {accountLocale[language].language}
-            </div>
-            {/** TODO: <LanguageDropdown /> 제거하기 */}
-            <SegmentedControl
-              options={[accountLocale[language].korean, accountLocale[language].english]}
-              selected={language === 'ko' ? accountLocale[language].korean : accountLocale[language].english}
-              handleSelect={handleSelectLanguage}
-            />
+          <NavigateIcon width={16} height={16} />
+        </div>
+      </section>
+      <section className={styles.section}>
+        <div className={styles.baseDiv}>
+          <div className={styles.titleDiv}>
+            <GlobeIcon width={24} height={24} alt={accountLocale[language].changeLanguage} />
+            {accountLocale[language].language}
           </div>
-        </section>
-        <section className={styles.section}>
-          <div
-            className={styles.buttonDiv}
-            onClick={() => {
-              handleDivLinkClick('https://open.kakao.com/o/saz6DObg');
-            }}
-          >
-            <div className={styles.titleDiv}>
-              <HelpIcon width={24} height={24} alt={accountLocale[language].contact} />
-              {accountLocale[language].contact}
-            </div>
-            <NavigateIcon width={16} height={16} />
+          {/** TODO: <LanguageDropdown /> 제거하기 */}
+          <SegmentedControl
+            options={[accountLocale[language].korean, accountLocale[language].english]}
+            selected={language === 'ko' ? accountLocale[language].korean : accountLocale[language].english}
+            handleSelect={handleSelectLanguage}
+          />
+        </div>
+      </section>
+      <section className={styles.section}>
+        <div
+          className={styles.buttonDiv}
+          onClick={() => {
+            handleDivLinkClick('https://open.kakao.com/o/saz6DObg');
+          }}
+        >
+          <div className={styles.titleDiv}>
+            <HelpIcon width={24} height={24} alt={accountLocale[language].contact} />
+            {accountLocale[language].contact}
           </div>
-          <div
-            className={styles.buttonDiv}
-            onClick={() => {
-              handleDivLinkClick('https://tally.so/r/w51Dpv');
-            }}
-          >
-            <div className={styles.titleDiv}>
-              <MessageIcon width={24} height={24} alt={accountLocale[language].sendFeedback} />
-              {accountLocale[language].sendFeedback}
-            </div>
-            <NavigateIcon width={16} height={16} />
+          <NavigateIcon width={16} height={16} />
+        </div>
+        <div
+          className={styles.buttonDiv}
+          onClick={() => {
+            handleDivLinkClick('https://tally.so/r/w51Dpv');
+          }}
+        >
+          <div className={styles.titleDiv}>
+            <MessageIcon width={24} height={24} alt={accountLocale[language].sendFeedback} />
+            {accountLocale[language].sendFeedback}
           </div>
-        </section>
-      </div>
+          <NavigateIcon width={16} height={16} />
+        </div>
+      </section>
       <div className={styles.accountFooter}>
         <button className={styles.textButton} onClick={handleSetOn}>
           {accountLocale[language].logout}
@@ -101,6 +99,6 @@ export default function AccountPage() {
         </button>
         {isOn && <LogoutModal handleSetOff={handleSetOff} />}
       </div>
-    </>
+    </div>
   );
 }
diff --git a/src/app/account/profile/page.css.ts b/src/app/account/profile/page.css.ts
index ea25af2b..c2906b8c 100644
--- a/src/app/account/profile/page.css.ts
+++ b/src/app/account/profile/page.css.ts
@@ -10,6 +10,8 @@ export const content = style({
   width: '100%',
   padding: '18px 16px',
 
+  flexGrow: 1,
+
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'center',
diff --git a/src/app/account/profile/page.tsx b/src/app/account/profile/page.tsx
index d768bb79..17f08bb1 100644
--- a/src/app/account/profile/page.tsx
+++ b/src/app/account/profile/page.tsx
@@ -13,7 +13,7 @@ import toastMessage from '@/lib/constants/toastMessage';
 import { useUser } from '@/store/useUser';
 import getUserOne from '@/app/_api/user/getUserOne';
 import updateProfile from '@/app/_api/user/updateProfile';
-import Header from '@/components/Header/__Header';
+import Header from '@/components/Header/Header';
 import BlueButton from '@/components/BlueButton/BlueButton';
 
 import ProfileForm from './_components/ProfileForm';
diff --git a/src/app/account/withdraw/_component/WithdrawalHeader.tsx b/src/app/account/withdraw/_component/WithdrawalHeader.tsx
index 19f6a990..08d46f96 100644
--- a/src/app/account/withdraw/_component/WithdrawalHeader.tsx
+++ b/src/app/account/withdraw/_component/WithdrawalHeader.tsx
@@ -1,6 +1,6 @@
 'use client';
 import { useRouter } from 'next/navigation';
-import Header from '@/components/Header/__Header';
+import Header from '@/components/Header/Header';
 import { accountLocale } from '@/app/account/locale';
 import { useLanguage } from '@/store/useLanguage';
 
diff --git a/src/app/account/withdraw/page.css.ts b/src/app/account/withdraw/page.css.ts
index f0f1c15e..2195d22b 100644
--- a/src/app/account/withdraw/page.css.ts
+++ b/src/app/account/withdraw/page.css.ts
@@ -1,11 +1,5 @@
-import { vars } from '@/styles/__theme.css';
 import { style } from '@vanilla-extract/css';
 
-export const page = style({
-  height: '100vh',
-  overflow: 'hidden',
-});
-
 export const main = style({
   height: '100%',
   padding: '30px 0',
diff --git a/src/app/account/withdraw/page.tsx b/src/app/account/withdraw/page.tsx
index 57f7a8a6..d43eea78 100644
--- a/src/app/account/withdraw/page.tsx
+++ b/src/app/account/withdraw/page.tsx
@@ -5,7 +5,7 @@ import * as styles from './page.css';
 
 export default function WithdrawPage() {
   return (
-    <div className={styles.page}>
+    <div>
       <WithdrawalHeader />
       <div className={styles.main}>
         <WithdrawalNotice />
diff --git a/src/app/collection/[folderId]/page.css.ts b/src/app/collection/[folderId]/page.css.ts
index e7737ed9..7a9faedd 100644
--- a/src/app/collection/[folderId]/page.css.ts
+++ b/src/app/collection/[folderId]/page.css.ts
@@ -2,11 +2,6 @@ import { style } from '@vanilla-extract/css';
 import { vars } from '@/styles/theme.css';
 import { Subtitle } from '@/styles/font.css';
 
-export const container = style({
-  height: '100vh',
-  backgroundColor: vars.color.bggray,
-});
-
 // BottomSheet Input
 export const contentInput = style({
   padding: '2rem 2.4rem',
diff --git a/src/app/collection/[folderId]/page.tsx b/src/app/collection/[folderId]/page.tsx
index 85f962f9..00896bdc 100644
--- a/src/app/collection/[folderId]/page.tsx
+++ b/src/app/collection/[folderId]/page.tsx
@@ -128,7 +128,7 @@ export default function CollectionDetailPage({ params }: ParamType) {
   }, []);
 
   return (
-    <section className={styles.container}>
+    <section>
       <Collections
         collectionList={lists}
         folderName={listData?.pages[0].folderName ?? ''}
diff --git a/src/app/collection/page.css.ts b/src/app/collection/page.css.ts
index 253fc205..0f45d30f 100644
--- a/src/app/collection/page.css.ts
+++ b/src/app/collection/page.css.ts
@@ -14,6 +14,9 @@ export const container = style({
 // 폴더 버튼
 export const addFolderButtonContainer = style({
   position: 'fixed',
+  margin: 'auto',
+  maxWidth: 430,
+
   bottom: 0,
   padding: '1.6rem',
   width: '100%',
diff --git a/src/app/layout.css.ts b/src/app/layout.css.ts
index 549e458d..caca32d0 100644
--- a/src/app/layout.css.ts
+++ b/src/app/layout.css.ts
@@ -1,15 +1,30 @@
-import { vars } from '@/styles/theme.css';
+import { style, globalStyle } from '@vanilla-extract/css';
+
 import * as fonts from '@/styles/__font.css';
-import { style } from '@vanilla-extract/css';
+import { vars } from '@/styles/theme.css';
+
+export const basicBodyStyle = style({
+  maxWidth: '430px',
+  height: '100%',
+  minHeight: '100vh',
 
-export const body = style({
+  margin: 'auto',
+  position: 'relative',
+
+  backgroundColor: vars.color.bggray,
+});
+
+globalStyle(`${basicBodyStyle} li`, {
+  listStyle: 'none',
+});
+
+export const adminBodyStyle = style({
   width: '100%',
   height: '100%',
   minHeight: '100vh',
   margin: 'auto',
 
   position: 'relative',
-
   backgroundColor: vars.color.bggray,
 });
 
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 9b480225..1f454296 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import type { Metadata, Viewport } from 'next';
+import { headers } from 'next/headers';
 import { ReferrerEnum } from 'next/dist/lib/metadata/types/metadata-types';
 import { OpenGraphType } from 'next/dist/lib/metadata/types/opengraph-types';
 import { ToastContainer } from 'react-toastify';
@@ -44,6 +45,9 @@ export const metadata: Metadata = {
 };
 
 export default function Layout({ children }: { children: ReactNode }) {
+  const pathname = headers().get('pathname') || '';
+  const isAdminStyle = pathname.startsWith('/admin');
+
   return (
     <html lang="ko">
       <head>
@@ -53,7 +57,7 @@ export default function Layout({ children }: { children: ReactNode }) {
         <link rel="apple-touch-icon" href="https://image.listywave.com/favicon/favicon.png" />
         <meta name="theme-color" content="#ffffff" />
       </head>
-      <body className={styles.body}>
+      <body className={isAdminStyle ? styles.adminBodyStyle : styles.basicBodyStyle}>
         <CommonProvider>
           <div id="modal-root" />
           <div>
diff --git a/src/app/list/[listId]/_components/ListDetailOuter/Comments.css.ts b/src/app/list/[listId]/_components/ListDetailOuter/Comments.css.ts
index 5aedabe2..892dbf00 100644
--- a/src/app/list/[listId]/_components/ListDetailOuter/Comments.css.ts
+++ b/src/app/list/[listId]/_components/ListDetailOuter/Comments.css.ts
@@ -13,6 +13,7 @@ export const formWrapperOuter = style({
   margin: 'auto',
 
   width: '100%',
+  maxWidth: 430,
   height: 'auto',
 
   position: 'fixed',
diff --git a/src/app/list/[listId]/history/page.css.ts b/src/app/list/[listId]/history/page.css.ts
index 8cae7854..896abe5e 100644
--- a/src/app/list/[listId]/history/page.css.ts
+++ b/src/app/list/[listId]/history/page.css.ts
@@ -1,7 +1,14 @@
-import { style, styleVariants } from '@vanilla-extract/css';
+import { style } from '@vanilla-extract/css';
 import { vars } from '@/styles/theme.css';
 import * as fonts from '@/styles/font.css';
 
+export const page = style({
+  height: '100vh',
+
+  display: 'flex',
+  flexDirection: 'column',
+});
+
 export const navContainer = style({
   margin: '35px 0px 0px',
   paddingRight: '25px',
diff --git a/src/app/list/[listId]/history/page.tsx b/src/app/list/[listId]/history/page.tsx
index 6bdacaed..001eb912 100644
--- a/src/app/list/[listId]/history/page.tsx
+++ b/src/app/list/[listId]/history/page.tsx
@@ -36,7 +36,7 @@ function HistoryPage() {
   });
 
   return (
-    <>
+    <div className={styles.page}>
       <Header
         title={listLocale[language].history}
         left="back"
@@ -44,32 +44,30 @@ function HistoryPage() {
           router.push(`/list/${listId}`);
         }}
       />
-      <div>
-        <div className={styles.navContainer}>
-          <button
-            className={`${styles.navButton} ${type === 'graph' ? styles.activeButton : ''}`}
-            onClick={() => setType('graph')}
-          >
-            {listLocale[language].graph}
-          </button>
-          <button
-            className={`${styles.navButton} ${type === 'version' ? styles.activeButton : ''}`}
-            onClick={() => setType('version')}
-          >
-            {listLocale[language].version}
-          </button>
-        </div>
+      <div className={styles.navContainer}>
+        <button
+          className={`${styles.navButton} ${type === 'graph' ? styles.activeButton : ''}`}
+          onClick={() => setType('graph')}
+        >
+          {listLocale[language].graph}
+        </button>
+        <button
+          className={`${styles.navButton} ${type === 'version' ? styles.activeButton : ''}`}
+          onClick={() => setType('version')}
+        >
+          {listLocale[language].version}
+        </button>
+      </div>
 
-        <div className={styles.contentContainer}>
-          <div className={styles.listTitle}>{listData?.title}</div>
-          {type === 'graph' ? (
-            <Graph histories={historyData ? historyData : []} />
-          ) : (
-            <Version histories={historyData ? historyData : []} listId={listId} listOwnerId={listData?.ownerId} />
-          )}
-        </div>
+      <div className={styles.contentContainer}>
+        <div className={styles.listTitle}>{listData?.title}</div>
+        {type === 'graph' ? (
+          <Graph histories={historyData ? historyData : []} />
+        ) : (
+          <Version histories={historyData ? historyData : []} listId={listId} listOwnerId={listData?.ownerId} />
+        )}
       </div>
-    </>
+    </div>
   );
 }
 export default HistoryPage;
diff --git a/src/app/list/create/_components/Step.css.ts b/src/app/list/create/_components/Step.css.ts
index 16816fe9..634374b4 100644
--- a/src/app/list/create/_components/Step.css.ts
+++ b/src/app/list/create/_components/Step.css.ts
@@ -2,12 +2,18 @@ import { style } from '@vanilla-extract/css';
 import { vars } from '@/styles/theme.css';
 import * as fonts from '@/styles/font.css';
 
+export const page = style({
+  display: 'flex',
+  flexDirection: 'column',
+});
+
 export const section = style({
   padding: '1.2rem 1.6rem',
 
+  flexGrow: 1,
+
   display: 'flex',
   flexDirection: 'column',
-  justifyContent: 'space-between',
   rowGap: '3.2rem',
 });
 
diff --git a/src/app/list/create/_components/StepOne.tsx b/src/app/list/create/_components/StepOne.tsx
index 187d5735..986f0729 100644
--- a/src/app/list/create/_components/StepOne.tsx
+++ b/src/app/list/create/_components/StepOne.tsx
@@ -71,7 +71,7 @@ export default function StepOne({ onNextClick, type }: StepOneProps) {
   }, [trigger, register, watchTitle]);
 
   return (
-    <>
+    <div className={styles.page}>
       <Header
         title={type === 'create' ? listLocale[language].createList : listLocale[language].editList}
         left="cancel"
@@ -147,6 +147,6 @@ export default function StepOne({ onNextClick, type }: StepOneProps) {
         {/** end-카테고리field*/}
       </div>
       {/** end-section*/}
-    </>
+    </div>
   );
 }
diff --git a/src/app/list/create/_components/StepThree.tsx b/src/app/list/create/_components/StepThree.tsx
index 8e6d188c..d7a0add7 100644
--- a/src/app/list/create/_components/StepThree.tsx
+++ b/src/app/list/create/_components/StepThree.tsx
@@ -126,7 +126,7 @@ export default function StepThree({ onBeforeClick, onNextClick, type, isSubmitti
   const [isPublic, setIsPublic] = useState<boolean>(getValues('isPublic'));
 
   return (
-    <>
+    <div className={styles.page}>
       <Header
         title={type === 'create' ? listLocale[language].createList : listLocale[language].editList}
         left="back"
@@ -262,6 +262,6 @@ export default function StepThree({ onBeforeClick, onNextClick, type, isSubmitti
         {/** end-field(공개여부) */}
       </div>
       {/** end-section */}
-    </>
+    </div>
   );
 }
diff --git a/src/app/list/create/_components/StepTwo.tsx b/src/app/list/create/_components/StepTwo.tsx
index 7213dd44..62ac6954 100644
--- a/src/app/list/create/_components/StepTwo.tsx
+++ b/src/app/list/create/_components/StepTwo.tsx
@@ -130,7 +130,7 @@ export default function StepOne({ onBeforeClick, onNextClick, type }: StepTwoPro
   };
 
   return (
-    <>
+    <div className={styles.page}>
       <Header
         title={type === 'create' ? listLocale[language].createList : listLocale[language].editList}
         left="back"
@@ -215,6 +215,6 @@ export default function StepOne({ onBeforeClick, onNextClick, type }: StepTwoPro
         </div>
       </div>
       {/** end-section */}
-    </>
+    </div>
   );
 }
diff --git a/src/app/notification/page.css.ts b/src/app/notification/page.css.ts
deleted file mode 100644
index e8191258..00000000
--- a/src/app/notification/page.css.ts
+++ /dev/null
@@ -1 +0,0 @@
-import { style } from '@vanilla-extract/css';
diff --git a/src/app/notification/page.tsx b/src/app/notification/page.tsx
index 0a43fc05..0f27d0b2 100644
--- a/src/app/notification/page.tsx
+++ b/src/app/notification/page.tsx
@@ -5,7 +5,7 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import checkAllNotification from '@/app/_api/notification/checkAllNotification';
 import getNotificationAllChecked from '../_api/notification/getNotificationAllChecked';
 
-import Header from '@/components/Header/__Header';
+import Header from '@/components/Header/Header';
 import useMoveToPage from '@/hooks/useMoveToPage';
 import { QUERY_KEYS } from '@/lib/constants/queryKeys';
 import { notificationLocale } from '@/app/notification/locale';
diff --git a/src/app/start-listy/_components/CategoryButton.css.ts b/src/app/start-listy/_components/CategoryButton.css.ts
index fd33c29c..464afa52 100644
--- a/src/app/start-listy/_components/CategoryButton.css.ts
+++ b/src/app/start-listy/_components/CategoryButton.css.ts
@@ -1,5 +1,5 @@
 import { style, styleVariants, ComplexStyleRule } from '@vanilla-extract/css';
-import { titleLarge, titleMedium } from '@/styles/__font.css';
+import { titleLarge, bodyMedium } from '@/styles/__font.css';
 import { vars } from '@/styles/__theme.css';
 
 export const container = style({
@@ -7,11 +7,11 @@ export const container = style({
   padding: '1rem 0 1rem 0',
   display: 'grid',
   gridTemplateAreas: `
-    "culture life life"
-    "movie movie music"
-    "place book book"
-    "animal animal animal"
-    "food food etc"
+    "restaurant_cafe restaurant_cafe movie_drama"
+    "entertainment_arts food_recipes food_recipes"
+    "place travel travel"
+    "dailylife_thoughts dailylife_thoughts music"
+    "etc hobby_leisure hobby_leisure"
   `,
   gap: '1rem',
 });
@@ -19,7 +19,7 @@ export const container = style({
 export const title = style([titleLarge]);
 
 const category = style([
-  titleMedium,
+  bodyMedium,
   {
     padding: '0.8rem 1.2rem',
     height: '40px',
@@ -45,62 +45,69 @@ interface ColorVariantsType {
 }
 
 export const variants = styleVariants<ColorVariantsType>({
-  lifeButton: [
+  restaurant_cafeButton: [
     category,
     {
-      gridArea: 'life',
+      gridArea: 'restaurant_cafe',
       backgroundColor: vars.color.skyblue,
     },
   ],
-  placeButton: [
+  musicButton: [
     category,
     {
-      gridArea: 'place',
+      gridArea: 'music',
       backgroundColor: '#FFDCB2', // orange
     },
   ],
-  musicButton: [
+  movie_dramaButton: [
     category,
     {
-      gridArea: 'music',
+      gridArea: 'movie_drama',
       backgroundColor: vars.color.yellow,
     },
   ],
-  movie_dramaButton: [
+  entertainment_artsButton: [
     category,
     {
-      gridArea: 'movie',
+      gridArea: 'entertainment_arts',
       backgroundColor: '#D0FF89', // green
     },
   ],
-  cultureButton: [
+  dailylife_thoughtsButton: [
     category,
     {
-      gridArea: 'culture',
+      gridArea: 'dailylife_thoughts',
       backgroundColor: '#E6C6FF', // purple
     },
   ],
-  bookButton: [
+  travelButton: [
     category,
     {
-      gridArea: 'book',
+      gridArea: 'travel',
       backgroundColor: '#E6C6FF', // purple,
     },
   ],
-  animal_plantButton: [
+  placeButton: [
     category,
     {
-      gridArea: 'animal',
+      gridArea: 'place',
       backgroundColor: vars.color.skyblue,
     },
   ],
-  foodButton: [
+  hobby_leisureButton: [
     category,
     {
-      gridArea: 'food',
+      gridArea: 'hobby_leisure',
       backgroundColor: '#D0FF89', // green
     },
   ],
+  food_recipesButton: [
+    category,
+    {
+      gridArea: 'food_recipes',
+      backgroundColor: '#FFDCB2', // orange
+    },
+  ],
   etcButton: [
     category,
     {
diff --git a/src/app/topics/_components/BottomSheet.css.ts b/src/app/topics/_components/BottomSheet.css.ts
index 0ebea0b3..631d2f17 100644
--- a/src/app/topics/_components/BottomSheet.css.ts
+++ b/src/app/topics/_components/BottomSheet.css.ts
@@ -3,6 +3,7 @@ import * as fonts from '@/styles/font.css';
 import { vars } from '@/styles/theme.css';
 
 export const backGround = style({
+  maxWidth: 430,
   zIndex: 99,
   position: 'fixed',
   margin: 'auto',
@@ -19,6 +20,7 @@ const slideIn = keyframes({
 });
 
 export const bottomsheet = style({
+  maxWidth: 430,
   height: 'fit-content',
   padding: '35px 20px 49px',
   margin: 'auto',
diff --git a/src/app/topics/page.css.ts b/src/app/topics/page.css.ts
index d598ecd4..531b4011 100644
--- a/src/app/topics/page.css.ts
+++ b/src/app/topics/page.css.ts
@@ -3,7 +3,6 @@ import { vars } from '@/styles/theme.css';
 import * as fonts from '@/styles/font.css';
 
 export const body = style({
-  width: '100vw',
   minHeight: '100vh',
   padding: '16px 16px 120px',
 
diff --git a/src/app/user/[userId]/(follow)/_components/Header.tsx b/src/app/user/[userId]/(follow)/_components/Header.tsx
index b4145aba..aef96b32 100644
--- a/src/app/user/[userId]/(follow)/_components/Header.tsx
+++ b/src/app/user/[userId]/(follow)/_components/Header.tsx
@@ -1,6 +1,6 @@
 'use client';
 import { useRouter, useParams } from 'next/navigation';
-import CommonHeader from '@/components/Header/__Header';
+import CommonHeader from '@/components/Header/Header';
 
 interface HeaderProps {
   title: string;
diff --git a/src/app/user/[userId]/(follow)/follow.css.ts b/src/app/user/[userId]/(follow)/follow.css.ts
index 5bb03e87..648c0fce 100644
--- a/src/app/user/[userId]/(follow)/follow.css.ts
+++ b/src/app/user/[userId]/(follow)/follow.css.ts
@@ -1,9 +1,9 @@
 import { style } from '@vanilla-extract/css';
-import * as fonts from '@/styles/__font.css';
-import { vars } from '@/styles/__theme.css';
+
+import { Header } from '@/styles/font.css';
 
 export const totalMessage = style([
-  fonts.titleMedium,
+  Header,
   {
     padding: '23px 18px',
   },
diff --git a/src/app/user/[userId]/_components/Content.css.ts b/src/app/user/[userId]/_components/Content.css.ts
index 7d5ef054..ef9485e0 100644
--- a/src/app/user/[userId]/_components/Content.css.ts
+++ b/src/app/user/[userId]/_components/Content.css.ts
@@ -56,6 +56,7 @@ export const cards = style({
 });
 
 export const stickyContainer = style({
+  paddingTop: '0.5rem',
   position: 'sticky',
   top: '-1px', // observer API로 sticky 영역이 stuck 상태임을 감지하기 위해
 
@@ -81,6 +82,7 @@ export const scrollDivBottom = style({
   bottom: '84px',
 
   width: '100%',
+  maxWidth: 430,
   height: '83px',
 
   background: 'linear-gradient(180deg, rgba(245, 246, 250, 0.00) 0%, #F5F6FA 100%)',
@@ -90,7 +92,7 @@ export const scrollDivBottom = style({
 });
 
 export const visibleScrollDivTop = style({
-  top: '83.5px',
+  top: '104px',
   height: '83px',
   opacity: 1,
 });
diff --git a/src/app/withdrawn-account/page.css.ts b/src/app/withdrawn-account/page.css.ts
index 90e45f40..7569f5c5 100644
--- a/src/app/withdrawn-account/page.css.ts
+++ b/src/app/withdrawn-account/page.css.ts
@@ -1,9 +1,11 @@
-import { vars } from '@/styles/__theme.css';
+import { vars } from '@/styles/theme.css';
 import { style } from '@vanilla-extract/css';
 
 export const wrapper = style({
+  maxWidth: 430,
   height: '100vh',
   padding: '18px 16px',
+  margin: 'auto',
 
   display: 'flex',
   flexDirection: 'column',
@@ -11,6 +13,8 @@ export const wrapper = style({
   justifyContent: 'center',
 
   fontSize: '1.6rem',
+
+  backgroundColor: vars.color.bggray,
 });
 
 const baseLink = style({
@@ -30,7 +34,7 @@ export const link = style([
 export const subLink = style([
   baseLink,
   {
-    backgroundColor: vars.color.blueGray,
+    backgroundColor: vars.color.lightblue,
     color: vars.color.blue,
   },
 ]);
diff --git a/src/components/BottomNav/BottomNav.css.ts b/src/components/BottomNav/BottomNav.css.ts
index 9f698299..46fba274 100644
--- a/src/components/BottomNav/BottomNav.css.ts
+++ b/src/components/BottomNav/BottomNav.css.ts
@@ -2,7 +2,9 @@ import { style, styleVariants } from '@vanilla-extract/css';
 import { vars } from '@/styles/theme.css';
 
 export const bottomTapContainer = style({
+  margin: 'auto',
   width: '100%',
+  maxWidth: 430,
   height: '8.4rem',
 
   position: 'fixed',
diff --git a/src/components/BottomSheet/BottomSheet.css.ts b/src/components/BottomSheet/BottomSheet.css.ts
index 4b756460..787481ef 100644
--- a/src/components/BottomSheet/BottomSheet.css.ts
+++ b/src/components/BottomSheet/BottomSheet.css.ts
@@ -10,9 +10,12 @@ export const backGround = style({
   right: 0,
   background: 'rgba(0,0,0,0.3)',
   zIndex: 999,
+
+  maxWidth: 430,
 });
 
 export const wrapper = style({
+  maxWidth: 430,
   padding: '37px 0 43px',
   margin: 'auto',
 
diff --git a/src/components/BottomSheet/ver3.0/BottomSheet.css.ts b/src/components/BottomSheet/ver3.0/BottomSheet.css.ts
index a95657e0..12442cd6 100644
--- a/src/components/BottomSheet/ver3.0/BottomSheet.css.ts
+++ b/src/components/BottomSheet/ver3.0/BottomSheet.css.ts
@@ -9,6 +9,7 @@ const containerStyle = style({
   left: 0,
   right: 0,
   margin: 'auto',
+  maxWidth: 430,
 
   display: 'flex',
   flexDirection: 'column',
diff --git a/src/components/Modal/Modal.css.ts b/src/components/Modal/Modal.css.ts
index 817d2523..4fa94391 100644
--- a/src/components/Modal/Modal.css.ts
+++ b/src/components/Modal/Modal.css.ts
@@ -5,10 +5,13 @@ import { vars } from '@/styles/theme.css';
 export const background = style({
   margin: 'auto',
   width: '100vw',
+  maxWidth: 430,
   height: '100vh',
   zIndex: 100,
 
   position: 'fixed',
+  left: '50%',
+  transform: 'translateX(-50%)',
 
   display: 'flex',
   justifyContent: 'center',
diff --git a/src/components/NoData/NoData.css.ts b/src/components/NoData/NoData.css.ts
index 80589289..5f620eb2 100644
--- a/src/components/NoData/NoData.css.ts
+++ b/src/components/NoData/NoData.css.ts
@@ -1,5 +1,4 @@
 import { style } from '@vanilla-extract/css';
-import { vars } from '@/styles/__theme.css';
 /**
  * @todo 공용 폰트 스타일로 지정
  */
@@ -15,7 +14,6 @@ export const wrapper = style({
   justifyContent: 'center',
   alignItems: 'center',
 
-  backgroundColor: '#fff',
   borderRadius: '20px',
 });
 
diff --git a/src/components/NoData/NoDataComponent.tsx b/src/components/NoData/NoDataComponent.tsx
index e1582c9a..ab2dc4a0 100644
--- a/src/components/NoData/NoDataComponent.tsx
+++ b/src/components/NoData/NoDataComponent.tsx
@@ -1,8 +1,5 @@
 import * as styles from './NoData.css';
-import NoDataImg from '/public/images/no_data_image.svg';
 import { ReactNode } from 'react';
-import { commonLocale } from '@/components/locale';
-// import { useLanguage } from '@/store/useLanguage';
 
 interface NoDataProps {
   message: string;
@@ -11,7 +8,6 @@ interface NoDataProps {
 }
 
 function NoDataComponent({ message, button, buttonMessage }: NoDataProps) {
-  // const { language } = useLanguage();
   return (
     <div className={styles.wrapper}>
       <div className={styles.message}>{message}</div>
diff --git a/src/components/exploreComponents/RecommendedUsers.css.ts b/src/components/exploreComponents/RecommendedUsers.css.ts
index f997f770..40d5c692 100644
--- a/src/components/exploreComponents/RecommendedUsers.css.ts
+++ b/src/components/exploreComponents/RecommendedUsers.css.ts
@@ -1,6 +1,5 @@
 import { style } from '@vanilla-extract/css';
 import { vars } from '@/styles/__theme.css';
-import { titleSmall, headlineSmall } from '@/styles/__font.css';
 
 export const wrapper = style({
   padding: '0 16px',
@@ -36,6 +35,8 @@ export const recommendUsersListWrapper = style({
 
 export const recommendUserWrapper = style({
   padding: '12px 9px',
+  paddingBottom: '84px',
+
   width: '122px',
   height: 'auto',
 
diff --git a/src/middleware.ts b/src/middleware.ts
index c83ff3b3..15b801c8 100644
--- a/src/middleware.ts
+++ b/src/middleware.ts
@@ -6,9 +6,11 @@ import type { NextRequest } from 'next/server';
 const REQUIRED_TOKEN = ['/account', '/start-listy', '/list/create', '/collection', '/notification'];
 
 export async function middleware(request: NextRequest) {
+  const requestHeaders = new Headers(request.headers);
+  requestHeaders.set('pathname', request.nextUrl.pathname);
+
   // 만약, 쿠키에 accessToken이 없다면 '/'페이지로 리다이렉트
   const accessToken = request.cookies.get('accessToken');
-  // console.log(!accessToken);
 
   // '/account'로 시작하는 하위 URL 포함 조건 추가
   const isAccountSubPath = request.nextUrl.pathname.startsWith('/account');
@@ -18,4 +20,10 @@ export async function middleware(request: NextRequest) {
     url.searchParams.set('loginRequired', 'true'); // 쿼리 파라미터 추가
     return NextResponse.redirect(url);
   }
+
+  return NextResponse.next({
+    request: {
+      headers: requestHeaders,
+    },
+  });
 }