diff --git a/HDesign/package-lock.json b/HDesign/package-lock.json
index 607d748f1..866e29daf 100644
--- a/HDesign/package-lock.json
+++ b/HDesign/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "haengdong-design",
-  "version": "0.1.6",
+  "version": "0.1.18",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "haengdong-design",
-      "version": "0.1.6",
+      "version": "0.1.18",
       "license": "ISC",
       "dependencies": {
         "@emotion/react": "^11.11.4",
diff --git a/HDesign/package.json b/HDesign/package.json
index dfc263d3d..f4670e509 100644
--- a/HDesign/package.json
+++ b/HDesign/package.json
@@ -1,6 +1,6 @@
 {
   "name": "haengdong-design",
-  "version": "0.1.6",
+  "version": "0.1.18",
   "description": "",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
diff --git a/HDesign/src/components/Input/Input.style.ts b/HDesign/src/components/Input/Input.style.ts
index be05abb5b..8aa39d94c 100644
--- a/HDesign/src/components/Input/Input.style.ts
+++ b/HDesign/src/components/Input/Input.style.ts
@@ -20,7 +20,6 @@ export const inputBoxStyle = (theme: Theme, inputType: InputType = 'input') =>
   css({
     display: 'flex',
     justifyContent: 'space-between',
-    marginInline: '1rem',
     padding: '0.75rem 1rem',
     borderRadius: '1rem',
     backgroundColor: inputBoxBackgroundColorByInputType(theme, inputType),
diff --git a/HDesign/src/components/Switch/Switch.tsx b/HDesign/src/components/Switch/Switch.tsx
index 2d84584ef..5c3225fc7 100644
--- a/HDesign/src/components/Switch/Switch.tsx
+++ b/HDesign/src/components/Switch/Switch.tsx
@@ -9,14 +9,14 @@ const Switch = ({value, values, onChange}: SwitchProps) => {
 
   return (
     <div css={switchContainerStyle}>
-      {values.map((value, index) => (
+      {values.map((item, index) => (
         <TextButton
-          key={`${index}_${value}`}
-          textColor={selectedValue === value ? 'black' : 'gray'}
+          key={`${index}_${item}`}
+          textColor={selectedValue === item ? 'black' : 'gray'}
           textSize="bodyBold"
           onClick={() => handleClick(index)}
         >
-          {value}
+          {item}
         </TextButton>
       ))}
     </div>
diff --git a/HDesign/src/components/TopNav/TopNav.tsx b/HDesign/src/components/TopNav/TopNav.tsx
index 2b12ea9f6..1f97ad3c1 100644
--- a/HDesign/src/components/TopNav/TopNav.tsx
+++ b/HDesign/src/components/TopNav/TopNav.tsx
@@ -4,16 +4,22 @@ import TextButton from '../TextButton/TextButton';
 import {topNavNonStyle, topNavStyle} from './TopNav.style';
 import {TopNavProps} from './TopNav.type';
 import Switch from '../Switch/Switch';
+import {useEffect, useState} from 'react';
 
 // TODO: (@todari) navigation으로 인해 storybook 동작하지 않는 오류 해결해야함
 // + 페이지 정하는 것에 따라, navigate 경로 수정해 줘야 함
 const TopNav = ({navType}: TopNavProps) => {
+  const [nav, setNav] = useState('홈');
   const navigate = useNavigate();
-  const currentPath = useLocation().pathname;
+  const location = useLocation();
+
+  useEffect(() => {
+    navigate(PATH_TABLE[nav]);
+  }, [nav]);
 
   const PATH_TABLE: Record<string, string> = {
-    홈: `${currentPath}/`,
-    관리: `${currentPath}/admin`,
+    홈: '/',
+    관리: '/admin',
   };
 
   const TopNavByType = () => {
@@ -30,7 +36,7 @@ const TopNav = ({navType}: TopNavProps) => {
       case 'home':
         return (
           <div css={topNavStyle}>
-            <Switch value="홈" values={['홈', '관리']} onChange={value => navigate(PATH_TABLE[value])}></Switch>{' '}
+            <Switch value={nav} values={['홈', '관리']} onChange={value => setNav(value)}></Switch>{' '}
           </div>
         );
 
diff --git a/HDesign/src/index.tsx b/HDesign/src/index.tsx
index 0d6519e48..e65650af9 100644
--- a/HDesign/src/index.tsx
+++ b/HDesign/src/index.tsx
@@ -18,6 +18,7 @@ import Title from '@components/Title/Title';
 import TopNav from '@components/TopNav/TopNav';
 
 import {MainLayout} from '@layouts/MainLayout';
+import {ContentLayout} from '@layouts/ContentLayout';
 
 import {HDesignProvider} from '@theme/HDesignProvider';
 
@@ -41,5 +42,6 @@ export {
   Title,
   TopNav,
   MainLayout,
+  ContentLayout,
   HDesignProvider,
 };
diff --git a/HDesign/src/layouts/ContentLayout.tsx b/HDesign/src/layouts/ContentLayout.tsx
new file mode 100644
index 000000000..31c762ee9
--- /dev/null
+++ b/HDesign/src/layouts/ContentLayout.tsx
@@ -0,0 +1,23 @@
+import {PropsWithChildren} from 'react';
+import {Flex} from '..';
+type ContentLayoutBackground = 'white' | 'gray';
+
+interface ContentLayoutProps extends PropsWithChildren {
+  backgroundColor?: ContentLayoutBackground;
+}
+
+export const ContentLayout = ({backgroundColor, children}: ContentLayoutProps) => {
+  return (
+    <Flex
+      backgroundColor={backgroundColor}
+      justifyContent="flexStart"
+      flexDirection="column"
+      padding="0 1rem"
+      gap="1rem"
+      width="100%"
+      height="100%"
+    >
+      {children}
+    </Flex>
+  );
+};