diff --git a/HDesign/src/components/BillItem/BillItem.style.ts b/HDesign/src/components/BillItem/BillItem.style.ts
index dceb9af92..54531e095 100644
--- a/HDesign/src/components/BillItem/BillItem.style.ts
+++ b/HDesign/src/components/BillItem/BillItem.style.ts
@@ -1,6 +1,7 @@
-import {Theme} from '@/theme/theme.type';
 import {css} from '@emotion/react';
 
+import {Theme} from '@/theme/theme.type';
+
 export const textStyle = (theme: Theme) =>
   css({
     color: theme.colors.black,
diff --git a/HDesign/src/components/BillItem/BillItem.tsx b/HDesign/src/components/BillItem/BillItem.tsx
index b5b8f74e8..f73c5d32d 100644
--- a/HDesign/src/components/BillItem/BillItem.tsx
+++ b/HDesign/src/components/BillItem/BillItem.tsx
@@ -1,12 +1,16 @@
 /** @jsxImportSource @emotion/react */
 import React from 'react';
-import {useTheme} from '@theme/HDesignProvider';
-import {BillItemProps} from './BillItem.type';
-import {textStyle} from './BillItem.style';
+
 import Text from '@components/Text/Text';
+
+import {useTheme} from '@theme/HDesignProvider';
+
 import DragHandleItem from '../DragHandleItem/DragHandleItem';
 import Flex from '../Flex/Flex';
 
+import {BillItemProps} from './BillItem.type';
+import {textStyle} from './BillItem.style';
+
 export const BillItem: React.FC<BillItemProps> = ({
   name = '',
   price = 0,
diff --git a/HDesign/src/components/BottomSheet/BottomSheet.tsx b/HDesign/src/components/BottomSheet/BottomSheet.tsx
index edb6d64fe..d0f286cc8 100644
--- a/HDesign/src/components/BottomSheet/BottomSheet.tsx
+++ b/HDesign/src/components/BottomSheet/BottomSheet.tsx
@@ -2,11 +2,11 @@
 import {createPortal} from 'react-dom';
 
 import {BottomSheetProps} from '@components/BottomSheet/BottomSheet.type';
-import {useBottomSheet} from './useBottomSheet';
 import FixedButton from '@components/FixedButton/FixedButton';
 
 import {useTheme} from '@theme/HDesignProvider';
 
+import {useBottomSheet} from './useBottomSheet';
 import {bottomSheetContainerStyle, dimmedLayerStyle, indicatorStyle} from './BottomSheet.style';
 
 const BottomSheet: React.FC<BottomSheetProps> = ({
diff --git a/HDesign/src/components/BottomSheet/BottomSheet.type.ts b/HDesign/src/components/BottomSheet/BottomSheet.type.ts
index 321ef59f9..312fe3c29 100644
--- a/HDesign/src/components/BottomSheet/BottomSheet.type.ts
+++ b/HDesign/src/components/BottomSheet/BottomSheet.type.ts
@@ -3,6 +3,7 @@ import {ComponentPropsWithoutRef} from 'react';
 import {ButtonVariants} from '@components/Button/Button.type';
 
 import {Theme} from '@theme/theme.type';
+
 import {FixedButtonProps} from '../FixedButton/FixedButton.type';
 
 export interface BottomSheetStyleProps {
diff --git a/HDesign/src/components/DragHandleItem/DragHandleItem.style.ts b/HDesign/src/components/DragHandleItem/DragHandleItem.style.ts
index a08dfc574..972050619 100644
--- a/HDesign/src/components/DragHandleItem/DragHandleItem.style.ts
+++ b/HDesign/src/components/DragHandleItem/DragHandleItem.style.ts
@@ -1,6 +1,7 @@
+import {css} from '@emotion/react';
+
 import {Theme} from '@/theme/theme.type';
 import {ColorKeys} from '@/token/colors';
-import {css} from '@emotion/react';
 
 export const dragHandleItemStyle = (theme: Theme, hasDragHandle: boolean, backgroundColor: ColorKeys) =>
   css({
diff --git a/HDesign/src/components/DragHandleItem/DragHandleItem.tsx b/HDesign/src/components/DragHandleItem/DragHandleItem.tsx
index 8ae6aeb8c..9c92a6c8f 100644
--- a/HDesign/src/components/DragHandleItem/DragHandleItem.tsx
+++ b/HDesign/src/components/DragHandleItem/DragHandleItem.tsx
@@ -1,12 +1,14 @@
 /** @jsxImportSource @emotion/react */
 import React from 'react';
 
+import {StrictPropsWithChildren} from '@/types/strictPropsWithChildren';
+import {COLORS, ColorKeys} from '@/token/colors';
+
 import {useTheme} from '@theme/HDesignProvider';
 
 import IconButton from '../IconButton/IconButton';
-import {StrictPropsWithChildren} from '@/types/strictPropsWithChildren';
+
 import {dragHandleItemStyle, prefixStyle} from './DragHandleItem.style';
-import {COLORS, ColorKeys} from '@/token/colors';
 
 interface DragHandleItemCustomProps {
   hasDragHandle?: boolean;
@@ -15,12 +17,12 @@ interface DragHandleItemCustomProps {
 
 export type DragHandleItemProps = React.ComponentProps<'div'> & DragHandleItemCustomProps;
 
-export const DragHandleItem = ({
+export function DragHandleItem({
   hasDragHandle = false,
   backgroundColor = 'white',
   children,
   ...htmlProps
-}: StrictPropsWithChildren<DragHandleItemProps>) => {
+}: StrictPropsWithChildren<DragHandleItemProps>) {
   const {theme} = useTheme();
 
   // TODO: (@toari) : 사람 수 많을 때 UX writing 처리
@@ -32,5 +34,5 @@ export const DragHandleItem = ({
       </div>
     </div>
   );
-};
+}
 export default DragHandleItem;
diff --git a/HDesign/src/components/ExpenseList/ExpenseList.style.ts b/HDesign/src/components/ExpenseList/ExpenseList.style.ts
index 30d71de79..58c8ba7f5 100644
--- a/HDesign/src/components/ExpenseList/ExpenseList.style.ts
+++ b/HDesign/src/components/ExpenseList/ExpenseList.style.ts
@@ -1,6 +1,7 @@
-import {Theme} from '@/theme/theme.type';
 import {css} from '@emotion/react';
 
+import {Theme} from '@/theme/theme.type';
+
 export const expenseItemStyle = () =>
   css({
     display: 'flex',
diff --git a/HDesign/src/components/ExpenseList/ExpenseList.tsx b/HDesign/src/components/ExpenseList/ExpenseList.tsx
index 0995c5941..e637c7b1b 100644
--- a/HDesign/src/components/ExpenseList/ExpenseList.tsx
+++ b/HDesign/src/components/ExpenseList/ExpenseList.tsx
@@ -1,14 +1,16 @@
 /** @jsxImportSource @emotion/react */
 
-import {useTheme} from '@theme/HDesignProvider';
 import Text from '@components/Text/Text';
+
 import {Arrow} from '@assets/index';
 
+import {useTheme} from '@theme/HDesignProvider';
+
 import {ExpenseItemProps, ExpenseListProps} from './ExpenseList.type';
 import {expenseItemStyle, expenseListStyle, expenseItemLeftStyle, TextStyle} from './ExpenseList.style';
 
 // TODO: (@soha) 따로 파일 분리할까 고민중.. 여기서만 사용할 것 같긴 한데.. 흠
-const ExpenseItem = ({name, price, ...buttonProps}: ExpenseItemProps) => {
+function ExpenseItem({name, price, ...buttonProps}: ExpenseItemProps) {
   const {theme} = useTheme();
   return (
     <button css={expenseItemStyle} {...buttonProps}>
@@ -21,9 +23,9 @@ const ExpenseItem = ({name, price, ...buttonProps}: ExpenseItemProps) => {
       </div>
     </button>
   );
-};
+}
 
-const ExpenseList = ({expenseList = []}: ExpenseListProps) => {
+function ExpenseList({expenseList = []}: ExpenseListProps) {
   const {theme} = useTheme();
   return (
     <div css={expenseListStyle(theme)}>
@@ -32,6 +34,6 @@ const ExpenseList = ({expenseList = []}: ExpenseListProps) => {
       ))}
     </div>
   );
-};
+}
 
 export default ExpenseList;
diff --git a/HDesign/src/components/Flex/Flex.style.ts b/HDesign/src/components/Flex/Flex.style.ts
index c0f77b43e..c86f1b64d 100644
--- a/HDesign/src/components/Flex/Flex.style.ts
+++ b/HDesign/src/components/Flex/Flex.style.ts
@@ -1,6 +1,8 @@
+import {css} from '@emotion/react';
+
 import {changeCamelCaseToKebabCase} from '@/utils/ return str.replace(/([a-z])([A-Z])/changeCamelCaseToKebabCase';
+
 import {FlexDirectionStrictType, FlexProps} from './Flex.type';
-import {css} from '@emotion/react';
 
 export const flexStyle = ({
   justifyContent = 'flexStart',
diff --git a/HDesign/src/components/Flex/Flex.tsx b/HDesign/src/components/Flex/Flex.tsx
index 662485cb3..c405c5f91 100644
--- a/HDesign/src/components/Flex/Flex.tsx
+++ b/HDesign/src/components/Flex/Flex.tsx
@@ -1,13 +1,14 @@
 /** @jsxImportSource @emotion/react */
 import {StrictPropsWithChildren} from '@/types/strictPropsWithChildren';
-import {FlexProps} from './Flex.type';
 import {useTheme} from '@/theme/HDesignProvider';
+
+import {FlexProps} from './Flex.type';
 import {flexStyle} from './Flex.style';
 
 // TODO: (@weadie) 지정된 프롭 말고 다른 프롭도 가져올 수 있게 하자.
-const Flex = ({children, ...props}: StrictPropsWithChildren<FlexProps>) => {
+function Flex({children, ...props}: StrictPropsWithChildren<FlexProps>) {
   const {theme} = useTheme();
   return <div css={flexStyle({theme, ...props})}>{children}</div>;
-};
+}
 
 export default Flex;
diff --git a/HDesign/src/components/IconButton/IconButton.tsx b/HDesign/src/components/IconButton/IconButton.tsx
index 9e19ddf21..66d4c34b8 100644
--- a/HDesign/src/components/IconButton/IconButton.tsx
+++ b/HDesign/src/components/IconButton/IconButton.tsx
@@ -2,7 +2,6 @@
 import {forwardRef} from 'react';
 
 import {IconButtonProps} from '@components/IconButton/IconButton.type';
-
 import {InputDelete, Plus, Buljusa} from '@/assets';
 
 const ICON = {
diff --git a/HDesign/src/components/InOutItem/InOutItem.style.ts b/HDesign/src/components/InOutItem/InOutItem.style.ts
index 3e11fef6f..b3f8eee46 100644
--- a/HDesign/src/components/InOutItem/InOutItem.style.ts
+++ b/HDesign/src/components/InOutItem/InOutItem.style.ts
@@ -1,6 +1,7 @@
-import {Theme} from '@/theme/theme.type';
 import {css} from '@emotion/react';
 
+import {Theme} from '@/theme/theme.type';
+
 export const inOutItemStyle = (theme: Theme) =>
   css({
     display: 'flex',
diff --git a/HDesign/src/components/InOutItem/InOutItem.tsx b/HDesign/src/components/InOutItem/InOutItem.tsx
index e42107827..2f506f5f3 100644
--- a/HDesign/src/components/InOutItem/InOutItem.tsx
+++ b/HDesign/src/components/InOutItem/InOutItem.tsx
@@ -1,12 +1,14 @@
 /** @jsxImportSource @emotion/react */
 import React from 'react';
 
+import Text from '@components/Text/Text';
+
 import {useTheme} from '@theme/HDesignProvider';
 
+import DragHandleItem from '../DragHandleItem/DragHandleItem';
+
 import {InOutItemProps, InOutType} from './InOutItem.type';
 import {textStyle} from './InOutItem.style';
-import Text from '@components/Text/Text';
-import DragHandleItem from '../DragHandleItem/DragHandleItem';
 
 const IN_OUT_TEXT: Record<InOutType, string> = {
   IN: '들어옴',
diff --git a/HDesign/src/components/Input/Input.style.ts b/HDesign/src/components/Input/Input.style.ts
index ab9da6a91..50980be64 100644
--- a/HDesign/src/components/Input/Input.style.ts
+++ b/HDesign/src/components/Input/Input.style.ts
@@ -1,6 +1,7 @@
 import {css} from '@emotion/react';
 
 import {Theme} from '@theme/theme.type';
+
 import {InputType} from './Input.type';
 
 const inputBoxBackgroundColorByInputType = (theme: Theme, inputType: InputType = 'input') => {
diff --git a/HDesign/src/components/Search/Search.stories.tsx b/HDesign/src/components/Search/Search.stories.tsx
index e7d16198a..2ce93f3a5 100644
--- a/HDesign/src/components/Search/Search.stories.tsx
+++ b/HDesign/src/components/Search/Search.stories.tsx
@@ -1,6 +1,7 @@
-import React from 'react';
 import type {Meta, StoryObj} from '@storybook/react';
 
+import React from 'react';
+
 import Search from '@components/Search/Search';
 
 const meta = {
diff --git a/HDesign/src/components/Search/Search.style.ts b/HDesign/src/components/Search/Search.style.ts
index 413655bd5..230cf3e8e 100644
--- a/HDesign/src/components/Search/Search.style.ts
+++ b/HDesign/src/components/Search/Search.style.ts
@@ -1,6 +1,7 @@
-import {Theme} from '@/theme/theme.type';
 import {css} from '@emotion/react';
 
+import {Theme} from '@/theme/theme.type';
+
 export const searchStyle = css({
   position: 'relative',
 
diff --git a/HDesign/src/components/Search/Search.tsx b/HDesign/src/components/Search/Search.tsx
index 68fc02209..cecdffa52 100644
--- a/HDesign/src/components/Search/Search.tsx
+++ b/HDesign/src/components/Search/Search.tsx
@@ -1,11 +1,13 @@
 /** @jsxImportSource @emotion/react */
+import Flex from '@components/Flex/Flex';
+
+import {useTheme} from '@theme/HDesignProvider';
+
 import Input from '../Input/Input';
 import {InputProps} from '../Input/Input.type';
-import {searchStyle, searchTermsStyle} from './Search.style';
+
+import {searchStyle, searchTermsStyle, searchTermStyle} from './Search.style';
 import useSearch from './useSearch';
-import {searchTermStyle} from './Search.style';
-import {useTheme} from '@theme/HDesignProvider';
-import Flex from '@components/Flex/Flex';
 
 export interface SearchProps extends InputProps {
   searchTerms: string[];
diff --git a/HDesign/src/components/StepItem/StepItem.style.ts b/HDesign/src/components/StepItem/StepItem.style.ts
index 0cf47c7bb..0258b47a4 100644
--- a/HDesign/src/components/StepItem/StepItem.style.ts
+++ b/HDesign/src/components/StepItem/StepItem.style.ts
@@ -1,6 +1,7 @@
-import {Theme} from '@/theme/theme.type';
 import {css} from '@emotion/react';
 
+import {Theme} from '@/theme/theme.type';
+
 export const stepItemStyle = (theme: Theme) =>
   css({
     display: 'flex',
diff --git a/HDesign/src/components/StepItem/StepItem.tsx b/HDesign/src/components/StepItem/StepItem.tsx
index 5ed71539c..52e79d863 100644
--- a/HDesign/src/components/StepItem/StepItem.tsx
+++ b/HDesign/src/components/StepItem/StepItem.tsx
@@ -1,12 +1,14 @@
 /** @jsxImportSource @emotion/react */
 import {useTheme} from '@/theme/HDesignProvider';
-import {StepItemCustomProps} from './StepItem.type';
-import {nameStyle, personCountStyle, stepItemStyle, totalAmountStyle, totalTitleStyle} from './StepItem.style';
+
 import Text from '../Text/Text';
 import BillItem from '../BillItem/BillItem';
 import {BillItemCustomProps} from '../BillItem/BillItem.type';
 import Flex from '../Flex/Flex';
 
+import {nameStyle, personCountStyle, stepItemStyle, totalAmountStyle, totalTitleStyle} from './StepItem.style';
+import {StepItemCustomProps} from './StepItem.type';
+
 export const StepItem: React.FC<StepItemCustomProps> = ({
   name = '',
   personCount = 0,
diff --git a/HDesign/src/components/Switch/Switch.tsx b/HDesign/src/components/Switch/Switch.tsx
index 4e5d0a887..4a1275185 100644
--- a/HDesign/src/components/Switch/Switch.tsx
+++ b/HDesign/src/components/Switch/Switch.tsx
@@ -1,9 +1,10 @@
 /** @jsxImportSource @emotion/react */
 import TextButton from '../TextButton/TextButton';
+
 import {switchContainerStyle} from './Switch.style';
 import {SwitchProps} from './Switch.type';
 
-const Switch = ({value, values, onChange}: SwitchProps) => {
+function Switch({value, values, onChange}: SwitchProps) {
   return (
     <div css={switchContainerStyle}>
       {values.map((item, index) => (
@@ -18,6 +19,6 @@ const Switch = ({value, values, onChange}: SwitchProps) => {
       ))}
     </div>
   );
-};
+}
 
 export default Switch;
diff --git a/HDesign/src/components/Tabs/Tabs.stories.tsx b/HDesign/src/components/Tabs/Tabs.stories.tsx
index a8c68915f..6d03a7406 100644
--- a/HDesign/src/components/Tabs/Tabs.stories.tsx
+++ b/HDesign/src/components/Tabs/Tabs.stories.tsx
@@ -1,7 +1,9 @@
-import React from 'react';
 import type {Meta, StoryObj} from '@storybook/react';
 
+import React from 'react';
+
 import Tabs from '@/components/Tabs/Tabs';
+
 import Tab from './Tab';
 
 const meta = {
diff --git a/HDesign/src/components/Tabs/Tabs.style.ts b/HDesign/src/components/Tabs/Tabs.style.ts
index 5ec228330..a4a12f630 100644
--- a/HDesign/src/components/Tabs/Tabs.style.ts
+++ b/HDesign/src/components/Tabs/Tabs.style.ts
@@ -1,6 +1,7 @@
-import {Theme} from '@/theme/theme.type';
 import {css} from '@emotion/react';
 
+import {Theme} from '@/theme/theme.type';
+
 export const tabListStyle = (theme: Theme) =>
   css({
     position: 'relative',
diff --git a/HDesign/src/components/Tabs/Tabs.tsx b/HDesign/src/components/Tabs/Tabs.tsx
index acf74b6ea..0245b5ba7 100644
--- a/HDesign/src/components/Tabs/Tabs.tsx
+++ b/HDesign/src/components/Tabs/Tabs.tsx
@@ -3,11 +3,13 @@ import React, {useState} from 'react';
 import {css} from '@emotion/react';
 
 import {useTheme} from '@theme/HDesignProvider';
-import {tabListStyle, indicatorStyle, tabItemStyle, tabTextStyle} from './Tabs.style';
-import {TabsProps} from './Tab.type';
+
 import Text from '../Text/Text';
 import Flex from '../Flex/Flex';
 
+import {tabListStyle, indicatorStyle, tabItemStyle, tabTextStyle} from './Tabs.style';
+import {TabsProps} from './Tab.type';
+
 const Tabs: React.FC<TabsProps> = ({children, tabsContainerStyle}) => {
   const {theme} = useTheme();
   const [activeTabIndex, setActiveTabIndex] = useState(0);
diff --git a/HDesign/src/components/TextButton/TextButton.style.ts b/HDesign/src/components/TextButton/TextButton.style.ts
index e2b602c62..6777b1eed 100644
--- a/HDesign/src/components/TextButton/TextButton.style.ts
+++ b/HDesign/src/components/TextButton/TextButton.style.ts
@@ -1,6 +1,8 @@
+import {css} from '@emotion/react';
+
 import {Theme} from '@/theme/theme.type';
+
 import {TextColor} from './TextButton.type';
-import {css} from '@emotion/react';
 
 interface TextButtonStyleProps {
   textColor: TextColor;
diff --git a/HDesign/src/components/TextButton/TextButton.tsx b/HDesign/src/components/TextButton/TextButton.tsx
index c44b7a5c7..9d857c38d 100644
--- a/HDesign/src/components/TextButton/TextButton.tsx
+++ b/HDesign/src/components/TextButton/TextButton.tsx
@@ -1,8 +1,11 @@
 /** @jsxImportSource @emotion/react */
 import {forwardRef} from 'react';
-import {TextButtonProps} from './TextButton.type';
-import Text from '../Text/Text';
+
 import {useTheme} from '@/theme/HDesignProvider';
+
+import Text from '../Text/Text';
+
+import {TextButtonProps} from './TextButton.type';
 import {textButtonStyle} from './TextButton.style';
 
 export const TextButton: React.FC<TextButtonProps> = forwardRef<HTMLButtonElement, TextButtonProps>(function Button(
diff --git a/HDesign/src/components/TopNav/Back.tsx b/HDesign/src/components/TopNav/Back.tsx
index 6ace16ce2..cfb55e24d 100644
--- a/HDesign/src/components/TopNav/Back.tsx
+++ b/HDesign/src/components/TopNav/Back.tsx
@@ -1,9 +1,10 @@
 /** @jsxImportSource @emotion/react */
 import React from 'react';
 import {useNavigate} from 'react-router-dom';
+
 import TextButton from '@components/TextButton/TextButton';
 
-const Back = () => {
+function Back() {
   const navigate = useNavigate();
 
   return (
@@ -11,6 +12,6 @@ const Back = () => {
       뒤로가기
     </TextButton>
   );
-};
+}
 
 export default Back;
diff --git a/HDesign/src/components/TopNav/TopNav.stories.tsx b/HDesign/src/components/TopNav/TopNav.stories.tsx
index 5d7bc2d02..0c96161a5 100644
--- a/HDesign/src/components/TopNav/TopNav.stories.tsx
+++ b/HDesign/src/components/TopNav/TopNav.stories.tsx
@@ -1,12 +1,15 @@
 /** @jsxImportSource @emotion/react */
-import React from 'react';
 import type {Meta, StoryObj} from '@storybook/react';
+
+import React from 'react';
 import {reactRouterParameters, withRouter} from 'storybook-addon-react-router-v6';
 
 import TopNav from '@components/TopNav/TopNav';
-import Back from './Back';
+
 import Switch from '../Switch/Switch';
 
+import Back from './Back';
+
 const meta = {
   title: 'Components/TopNav',
   component: TopNav,
@@ -31,7 +34,7 @@ const meta = {
       mapping: {
         Back: <Back />,
         Switch: <Switch values={['홈', '관리']} value="홈" onChange={value => console.log(value)} />,
-        Any: <div></div>,
+        Any: <div />,
       },
     },
   },
diff --git a/HDesign/src/components/TopNav/TopNav.tsx b/HDesign/src/components/TopNav/TopNav.tsx
index c78d4fab5..643cd5e3b 100644
--- a/HDesign/src/components/TopNav/TopNav.tsx
+++ b/HDesign/src/components/TopNav/TopNav.tsx
@@ -1,8 +1,10 @@
 /** @jsxImportSource @emotion/react */
 import React from 'react';
+
+import Switch from '@components/Switch/Switch';
+
 import {topNavNonStyle, topNavStyle} from './TopNav.style';
 import Back from './Back';
-import Switch from '@components/Switch/Switch';
 
 const TopNav: React.FC<React.PropsWithChildren> = ({children}) => {
   const hasBack = React.Children.toArray(children).some(child => React.isValidElement(child) && child.type === Back);
diff --git a/HDesign/src/index.tsx b/HDesign/src/index.tsx
index cae0d7652..e0b6e6fee 100644
--- a/HDesign/src/index.tsx
+++ b/HDesign/src/index.tsx
@@ -1,4 +1,3 @@
-import Back from './components/TopNav/Back';
 import BillItem from '@components/BillItem/BillItem';
 import BottomSheet from '@components/BottomSheet/BottomSheet';
 import Button from '@components/Button/Button';
@@ -12,18 +11,19 @@ import Input from '@components/Input/Input';
 import Search from '@components/Search/Search';
 import StepItem from '@components/StepItem/StepItem';
 import Switch from '@components/Switch/Switch';
-import Tab from './components/Tabs/Tab';
 import Tabs from '@/components/Tabs/Tabs';
 import Text from '@components/Text/Text';
 import TextButton from '@components/TextButton/TextButton';
 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';
 
+import Tab from './components/Tabs/Tab';
+import Back from './components/TopNav/Back';
+
 export {
   Back,
   BillItem,
diff --git a/HDesign/src/layouts/ContentLayout.tsx b/HDesign/src/layouts/ContentLayout.tsx
index 31c762ee9..757a580ec 100644
--- a/HDesign/src/layouts/ContentLayout.tsx
+++ b/HDesign/src/layouts/ContentLayout.tsx
@@ -1,12 +1,14 @@
 import {PropsWithChildren} from 'react';
+
 import {Flex} from '..';
+
 type ContentLayoutBackground = 'white' | 'gray';
 
 interface ContentLayoutProps extends PropsWithChildren {
   backgroundColor?: ContentLayoutBackground;
 }
 
-export const ContentLayout = ({backgroundColor, children}: ContentLayoutProps) => {
+export function ContentLayout({backgroundColor, children}: ContentLayoutProps) {
   return (
     <Flex
       backgroundColor={backgroundColor}
@@ -20,4 +22,4 @@ export const ContentLayout = ({backgroundColor, children}: ContentLayoutProps) =
       {children}
     </Flex>
   );
-};
+}
diff --git a/HDesign/src/layouts/MainLayout.tsx b/HDesign/src/layouts/MainLayout.tsx
index 7657bd5d7..b64e3c546 100644
--- a/HDesign/src/layouts/MainLayout.tsx
+++ b/HDesign/src/layouts/MainLayout.tsx
@@ -1,12 +1,14 @@
 import {PropsWithChildren} from 'react';
+
 import {Flex} from '..';
+
 type MainLayoutBackground = 'white' | 'gray';
 
 interface MainLayoutProps extends PropsWithChildren {
   backgroundColor?: MainLayoutBackground;
 }
 
-export const MainLayout = ({backgroundColor, children}: MainLayoutProps) => {
+export function MainLayout({backgroundColor, children}: MainLayoutProps) {
   return (
     <Flex
       backgroundColor={backgroundColor}
@@ -20,4 +22,4 @@ export const MainLayout = ({backgroundColor, children}: MainLayoutProps) => {
       {children}
     </Flex>
   );
-};
+}