diff --git a/src/components/layout/CommonHeader.tsx b/src/components/layout/CommonHeader.tsx
index f31202c..02c5bf0 100644
--- a/src/components/layout/CommonHeader.tsx
+++ b/src/components/layout/CommonHeader.tsx
@@ -1,69 +1,95 @@
-import CheckIcon from "@material-ui/icons/Check";
-import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
-import {
-  Box,
-  AppBar,
-  Toolbar,
-  IconButton,
-  Typography,
-} from '@mui/material';
-import { ReactElement } from 'react';
+import { AppBar, Box, IconButton, Typography } from '@mui/material';
+import { ReactElement, ReactNode } from 'react';
 import { useNavigate } from 'react-router-dom';
-import Spacer from '../common/Spacer';
 
 export interface CommonHeaderProps {
   title: string;
-  isShowBackButton?: boolean;
-  rightButtonIcon?: ReactElement;
-  isShowRightButton?: boolean;
-  // onClickRightButton?: (event: React.MouseEvent<HTMLElement>) => {};
-  onClickRightButton?: (event: React.MouseEvent<HTMLElement>) => void;
+  isShowPrevButton?: boolean;
+  prevButtonIcon?: ReactNode;
+  prevButtonText?: string;
+  onClickPrevButton?: (event: React.MouseEvent<HTMLElement>) => void;
+  isShowNextButton?: boolean;
+  nextButtonIcon?: ReactElement;
+  nextButtonText?: string;
+  onClickNextButton?: (event: React.MouseEvent<HTMLElement>) => void;
 }
 
 const CommonHeader = (props: CommonHeaderProps) => {
   const navigation = useNavigate();
-
   return (
-    // <Box sx={{ flexGrow: 1 }}>
-    <Box>
-      <AppBar position="static" color="transparent" elevation={0}>
-        <Toolbar>
-          {props.isShowBackButton ? (
-            <IconButton
-              size="large"
-              edge="start"
-              aria-label="menu"
-              sx={{ mr: 2 }}
-              onClick={() => navigation(-1)}
-            >
-              <ArrowBackIosNewIcon />
-            </IconButton>
-          ) : (
-            <Spacer />
-          )}
-          <Typography
-            component="div"
-            sx={{
-              flexGrow: 1,
-              textAlign: 'center',
-              fontSize: '16px',
-              fontWeight: '700',
-              lineHeight: '16px',
-              color: '#949494',
-            }}
+    <AppBar
+      position="static"
+      color="transparent"
+      elevation={0}
+      sx={{
+        display: 'flex',
+        width: '100%',
+        height: '7vh',
+        flexDirection: 'row',
+        flex: '0 0 10%',
+      }}
+    >
+      <Box sx={{ mr: 2, flex: '0 0 10vw' }}>
+        {props.isShowPrevButton && (
+          <IconButton
+            size="large"
+            edge="start"
+            aria-label="menu"
+            onClick={
+              (event) => {
+                if (props.onClickPrevButton) {
+                  props.onClickPrevButton(event);
+                } else {
+                  navigation(-1);
+                }
+              }
+            }
+          >
+            <Typography sx={{ fontSize: '13px', color: '#949494' }}>
+              {props.prevButtonText ?? '뒤로'}
+            </Typography>
+          </IconButton>
+        )}
+      </Box>
+      <Box
+        sx={{
+          display: 'flex',
+          flex: '1 1 80vw',
+        }}
+      >
+        <Typography
+          component="div"
+          sx={{
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flex: '1 0 auto',
+            textAlign: 'center',
+            verticalAlign: 'center',
+            fontSize: '16px',
+            fontWeight: '700',
+            color: '#949494',
+          }}
+        >
+          {props.title}
+        </Typography>
+      </Box>
+      <Box sx={{ ml: 2, flex: '0 0 10vw' }}>
+        {props.isShowNextButton && (
+          <IconButton
+            size="large"
+            edge="start"
+            aria-label="menu"
+            onClick={props.onClickNextButton}
           >
-            {props.title}
-          </Typography>
-          {props.isShowRightButton && (
-            <IconButton onClick={props.onClickRightButton}>
-              {props.rightButtonIcon}
-              <CheckIcon />
-            </IconButton>
-          )}
-        </Toolbar>
-      </AppBar>
-    </Box>
+            <Typography sx={{ fontSize: '13px', color: '#949494' }}>
+              {props.nextButtonText ?? '완료'}
+            </Typography>
+          </IconButton>
+        )}
+      </Box>
+    </AppBar>
   );
 };
 
-export default CommonHeader;
\ No newline at end of file
+export default CommonHeader;
diff --git a/src/hooks/signUpSteps.ts b/src/hooks/signUpSteps.ts
index 41f87d9..6a78233 100755
--- a/src/hooks/signUpSteps.ts
+++ b/src/hooks/signUpSteps.ts
@@ -21,6 +21,7 @@ export function useSignUpStepForm(steps: ReactElement[]) {
    */
   function handlePrevButton() {
     const currIdx = currentStepIndex;
+    console.log(currIdx)
     if (currIdx <= 0) {
       navigate('/login', { replace: true });
     } else {
diff --git a/src/pages/auth/common/Wrapper.tsx b/src/pages/auth/common/Wrapper.tsx
index 305a9a3..617d3a9 100644
--- a/src/pages/auth/common/Wrapper.tsx
+++ b/src/pages/auth/common/Wrapper.tsx
@@ -26,11 +26,13 @@ const Wrapper = ({
     >
       <Box
         sx={{
-          display: 'flex',
-          flexDirection: 'column',
+          width: '100%',
+          // display: 'flex',
+          // flexDirection: 'row',
+          // flex: '1 0 100%',
         }}
       >
-        <PrevButton prevBtnText={prevBtnText} handlePrevBtn={handlePrevBtn} />
+        {/* <PrevButton prevBtnText={prevBtnText} handlePrevBtn={handlePrevBtn} /> */}
         {headerComp}
       </Box>
       {children}
diff --git a/src/pages/auth/resetPW/ResetPW.tsx b/src/pages/auth/resetPW/ResetPW.tsx
index 2248842..8d3eac0 100644
--- a/src/pages/auth/resetPW/ResetPW.tsx
+++ b/src/pages/auth/resetPW/ResetPW.tsx
@@ -9,7 +9,6 @@ import InputForm, { InputItemType } from '../common/InputForm';
 const SetPW = (props: any) => {
   const [signUpData, setSignUpData] = useRecoilState(signUpDataState);
   const [nextButtonProps, setNextButtonProps] = useRecoilState(stepButtonProps);
-  // const setInstruction = useSetRecoilState(stepInstruction);
 
   const [pWChgMode, setPWChgMode] = useRecoilState(resetPWMode);
 
diff --git a/src/pages/auth/resetPW/ResetPWMode.tsx b/src/pages/auth/resetPW/ResetPWMode.tsx
index bbae0ed..0500096 100644
--- a/src/pages/auth/resetPW/ResetPWMode.tsx
+++ b/src/pages/auth/resetPW/ResetPWMode.tsx
@@ -51,12 +51,6 @@ const ResetPWMode = (props: any) => {
     });
   }, []);
 
-
-  useEffect(() => {
-    
-
-  }, [pWChgMode]);
-    
   return (
     <Container
       sx={{
diff --git a/src/pages/auth/resetPW/ResetPWSteps.tsx b/src/pages/auth/resetPW/ResetPWSteps.tsx
index 56a3cf3..c997c5e 100644
--- a/src/pages/auth/resetPW/ResetPWSteps.tsx
+++ b/src/pages/auth/resetPW/ResetPWSteps.tsx
@@ -1,14 +1,8 @@
-import Typography from '@mui/material/Typography';
 import { useRecoilState, useSetRecoilState } from 'recoil';
 
 import { useResetPWSteps } from '@/hooks/resetPWSteps';
-import {
-  stepIndex,
-  currentFormType
-} from '@/store/common';
-import {
-  resetPWMode
-} from '@/store/resetPW';
+import { stepIndex, currentFormType } from '@/store/common';
+import { resetPWMode } from '@/store/resetPW';
 import React, { useEffect, useState } from 'react';
 import FormWrapper from '../common/FormWrapper';
 import VerifyCode from '../common/VerifyCode';
@@ -16,9 +10,9 @@ import Wrapper from '../common/Wrapper';
 import ResetPW from './ResetPW';
 import ResetPWMode from './ResetPWMode';
 import VerifyPW from './VerifyPW';
+import CommonHeader from '@/components/layout/CommonHeader';
 
 const ResetPWStep = () => {
-
   const setStepType = useSetRecoilState(currentFormType);
   const [currentStepIndex, setCurrentStepIndex] = useRecoilState(stepIndex);
   const [pWChgMode, setPWChgMode] = useRecoilState(resetPWMode);
@@ -49,20 +43,12 @@ const ResetPWStep = () => {
 
   return (
     <Wrapper
-      prevBtnText={'뒤로'}
-      handlePrevBtn={handlePrevButton}
       headerComp={
-        <Typography
-          align={'center'}
-          sx={{
-            color: '#949494',
-            fontSize: '14px',
-            width: '100%',
-            fontWeight: '700',
-          }}
-        >
-          {'비밀번호 변경'}
-        </Typography>
+        <CommonHeader
+          title={'비밀번호 변경'}
+          isShowPrevButton={true}
+          onClickPrevButton={handlePrevButton}
+        />
       }
     >
       <FormWrapper
diff --git a/src/pages/auth/signup/SignUp.tsx b/src/pages/auth/signup/SignUp.tsx
index 0d40bc2..ab1948b 100644
--- a/src/pages/auth/signup/SignUp.tsx
+++ b/src/pages/auth/signup/SignUp.tsx
@@ -1,8 +1,4 @@
-import {
-  Box,
-  LinearProgress,
-  LinearProgressProps
-} from '@mui/material';
+import { Box, LinearProgress, LinearProgressProps } from '@mui/material';
 import Typography from '@mui/material/Typography';
 import React from 'react';
 import { useRecoilValue } from 'recoil';
@@ -16,6 +12,7 @@ import Wrapper from '../common/Wrapper';
 import CheckTermsAndConditions from './CheckTermsAndConditions';
 import SetEmail from './SetEmail';
 import SetNickname from './SetNickname';
+import CommonHeader from '@/components/layout/CommonHeader';
 
 const SignUp = () => {
   const currentStepIndex = useRecoilValue(stepIndex);
@@ -68,26 +65,30 @@ const SignUp = () => {
 
   return (
     <Wrapper
-      prevBtnText={'뒤로'}
-      handlePrevBtn={handlePrevButton}
       headerComp={
-        <>
-          <Box sx={{ display: 'flex', justifyContent: 'center' }}>
-            <Typography
-              sx={{
-                justifyContent: 'flex-end',
-                color: '#222222',
-                fontWeight: '700',
-                fontSize: '18px',
-              }}
-            >
-              약관동의
-            </Typography>
-          </Box>
+        <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+          <CommonHeader
+            title={''}
+            isShowPrevButton={true}
+            prevButtonText={'뒤로'}
+            onClickPrevButton={handlePrevButton}
+            isShowNextButton={false}
+          />
+          <Typography
+            sx={{
+              width: '100%',
+              textAlign: 'center',
+              color: '#222222',
+              fontWeight: '700',
+              fontSize: '18px',
+            }}
+          >
+            약관동의
+          </Typography>
           <LinearProgressWithLabel
             value={Math.round(((currentStepIndex + 1) / steps.length) * 100)}
           />
-        </>
+        </Box>
       }
     >
       <FormWrapper
diff --git a/src/pages/category/CategoryPage.tsx b/src/pages/category/CategoryPage.tsx
index f5b1190..cb729c7 100644
--- a/src/pages/category/CategoryPage.tsx
+++ b/src/pages/category/CategoryPage.tsx
@@ -1,5 +1,5 @@
 import AddIcon from '@mui/icons-material/Add';
-import { Divider, Grid, Typography } from '@mui/material';
+import { Grid, Typography } from '@mui/material';
 import { Box } from '@mui/system';
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
@@ -11,6 +11,7 @@ import FolderTop from '../../components/common/FolderTop';
 import Spacer from '../../components/common/Spacer';
 import CommonHeader from '../../components/layout/CommonHeader';
 import { selectedSubCategoryState } from '../../store/category';
+import Wrapper from '../auth/common/Wrapper';
 
 export interface MainCategoryProps {
   categoryId: number;
@@ -48,8 +49,11 @@ const CategoryPage = () => {
   }, []);
 
   return (
-    <>
-      <CommonHeader title={'카테고리 설정하기'} isShowBackButton={true} />
+    <Wrapper
+      headerComp={
+        <CommonHeader title={'카테고리 설정하기'} isShowPrevButton={true} />
+      }
+    >
       <Spacer y={20} />
       <Box>
         {categories?.map((category, idx) => {
@@ -139,7 +143,7 @@ const CategoryPage = () => {
         })}
       </Box>
       <Spacer y={12} />
-    </>
+    </Wrapper>
   );
 };
 
diff --git a/src/pages/category/CreateCategoryPage.tsx b/src/pages/category/CreateCategoryPage.tsx
index 512dcd1..2c0c6fa 100644
--- a/src/pages/category/CreateCategoryPage.tsx
+++ b/src/pages/category/CreateCategoryPage.tsx
@@ -1,7 +1,6 @@
-import AddIcon from '@mui/icons-material/Add';
-import { Button, Divider, Grid, TextField, Typography } from '@mui/material';
+import { Button, TextField, Typography } from '@mui/material';
 import { Box } from '@mui/system';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { ColorResult, SwatchesPicker } from 'react-color';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useRecoilValue } from 'recoil';
@@ -15,7 +14,7 @@ import Circle from '../../components/common/Circle';
 import Spacer from '../../components/common/Spacer';
 import CommonHeader from '../../components/layout/CommonHeader';
 import { selectedSubCategoryState } from '../../store/category';
-import { categories } from '../../store/tempData';
+import Wrapper from '../auth/common/Wrapper';
 
 const CreateCategoryPage = () => {
   const selectedSubCategory = useRecoilValue(selectedSubCategoryState);
@@ -74,13 +73,16 @@ const CreateCategoryPage = () => {
   };
 
   return (
-    <>
-      <CommonHeader
-        title={mode === 'edit' ? '카테고리 수정하기' : '카테고리 추가하기'}
-        isShowBackButton={true}
-        isShowRightButton={true}
-        onClickRightButton={() => handleSave()}
-      />
+    <Wrapper
+      headerComp={
+        <CommonHeader
+          title={mode === 'edit' ? '카테고리 수정하기' : '카테고리 추가하기'}
+          isShowPrevButton={true}
+          isShowNextButton={true}
+          onClickNextButton={() => handleSave()}
+          />
+      }
+    >
       <Box
         sx={{
           display: 'flex',
@@ -131,7 +133,7 @@ const CreateCategoryPage = () => {
           삭제하기
         </Button>
       </Box>
-    </>
+    </Wrapper>
   );
 };
 
diff --git a/src/pages/record/EditRecordPage.tsx b/src/pages/record/EditRecordPage.tsx
index 2ff8156..f57fecc 100644
--- a/src/pages/record/EditRecordPage.tsx
+++ b/src/pages/record/EditRecordPage.tsx
@@ -42,6 +42,7 @@ import { LocalizationProvider } from 'mui_pickers_6/LocalizationProvider';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import 'swiper/css/effect-coverflow';
 import FlexBox from '@/components/common/FlexBox';
+import Wrapper from '../auth/common/Wrapper';
 
 export interface MainCategoryProps {
   categoryId: number;
@@ -568,192 +569,194 @@ const EditRecordPage = (): ReactElement => {
   }, [selectedSubCategoryIdx, setRecoilSubCategoryValue, recoilCategoryValue]);
 
   return (
-    <Box
-      className={'edit-record'}
-      sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        height: '100vh',
-      }}
-    >
-      <Box>
+    <Wrapper
+      headerComp={
         <CommonHeader
           title={'기록하기'}
-          isShowBackButton={true}
-          isShowRightButton={true}
-          onClickRightButton={postAllDays}
+          isShowPrevButton={true}
+          isShowNextButton={true}
+          onClickNextButton={postAllDays}
         />
-      </Box>
-      <Container sx={{ flexGrow: '1' }}>
-        <Spacer y={8} />
+      }
+    >
+      <Box>
+        <Container sx={{ flexGrow: '1' }}>
+          <Spacer y={8} />
 
-        {/* Selected Days */}
-        <Box
-          sx={{
-            position: 'relative',
-            height: '12vw',
-            display: 'flex',
-          }}
-        >
+          {/* Selected Days */}
           <Box
             sx={{
-              position: 'absolute',
-              width: '100%',
-              height: 'calc(11vw + 2px)',
-              flex: '1 0 12vh',
-              boxShadow: '0px 9px 15px 0px rgba(0, 0, 0, 0.04)',
+              position: 'relative',
+              height: '12vw',
+              display: 'flex',
             }}
-          />
-          <Box
+          >
+            <Box
+              sx={{
+                position: 'absolute',
+                width: '100%',
+                height: 'calc(11vw + 2px)',
+                flex: '1 0 12vh',
+                boxShadow: '0px 9px 15px 0px rgba(0, 0, 0, 0.04)',
+              }}
+            />
+            <Box
+              sx={{
+                position: 'absolute',
+                width: '100%',
+                height: '13vw',
+                flex: '1 1 12vh',
+                display: 'flex',
+                justifyContent: 'space-evenly',
+              }}
+            >
+              {['일', '월', '화', '수', '목', '금', '토'].map(
+                (day, dayIndex) => {
+                  const isSelected = selectedDays.includes(dayIndex);
+                  const isCurrentDate = currentDay === dayIndex;
+                  return (
+                    <DaysChip
+                      key={day}
+                      title={day}
+                      isselected={isSelected}
+                      underline={isCurrentDate}
+                      onClick={() => handleDayChipClick(dayIndex)}
+                      color={
+                        dayIndex === 0
+                          ? '#FF4444'
+                          : dayIndex === 6
+                          ? '#3B66FF'
+                          : ''
+                      }
+                    />
+                  );
+                },
+              )}
+            </Box>
+          </Box>
+
+          {/* Time Range */}
+          <Container
             sx={{
-              position: 'absolute',
-              width: '100%',
-              height: '13vw',
-              flex: '1 1 12vh',
               display: 'flex',
               justifyContent: 'space-evenly',
+              padding: '32px',
             }}
           >
-            {['일', '월', '화', '수', '목', '금', '토'].map((day, dayIndex) => {
-              const isSelected = selectedDays.includes(dayIndex);
-              const isCurrentDate = currentDay === dayIndex;
-              return (
-                <DaysChip
-                  key={day}
-                  title={day}
-                  isselected={isSelected}
-                  underline={isCurrentDate}
-                  onClick={() => handleDayChipClick(dayIndex)}
-                  color={
-                    dayIndex === 0 ? '#FF4444' : dayIndex === 6 ? '#3B66FF' : ''
-                  }
-                />
-              );
-            })}
-          </Box>
-        </Box>
-
-        {/* Time Range */}
-        <Container
-          sx={{
-            display: 'flex',
-            justifyContent: 'space-evenly',
-            padding: '32px',
-          }}
-        >
-          {formatRangeTimeElem('start')}
-          <FlexBox>
-            <Typography sx={{ fontweight: '400', fontSize: '13px' }}>
-              ~
-            </Typography>
-          </FlexBox>
-          {formatRangeTimeElem('end')}
-        </Container>
-
-        <Divider sx={{ bgcolor: '#FFDCE1', border: '2px solid #FFDCE1' }} />
+            {formatRangeTimeElem('start')}
+            <FlexBox>
+              <Typography sx={{ fontweight: '400', fontSize: '13px' }}>
+                ~
+              </Typography>
+            </FlexBox>
+            {formatRangeTimeElem('end')}
+          </Container>
+
+          <Divider sx={{ bgcolor: '#FFDCE1', border: '2px solid #FFDCE1' }} />
+
+          <Container sx={{ textAlign: 'right' }}>
+            <Button
+              variant="text"
+              component={Link}
+              to="/category"
+              sx={{ color: '#949494', paddingTop: '17px' }}
+            >
+              카테고리 설정
+            </Button>
+          </Container>
 
-        <Container sx={{ textAlign: 'right' }}>
-          <Button
-            variant="text"
-            component={Link}
-            to="/category"
-            sx={{ color: '#949494', paddingTop: '17px' }}
+          {/* Main Categories */}
+          <Container
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              overflowX: 'scroll',
+              scrollbarWidth: 'none',
+              msOverflowStyle: 'none',
+              WebkitOverflowScrolling: 'touch',
+              padding: '2% 0 3% 0',
+            }}
           >
-            카테고리 설정
-          </Button>
-        </Container>
-
-        {/* Main Categories */}
-        <Container
-          sx={{
-            display: 'flex',
-            alignItems: 'center',
-            overflowX: 'scroll',
-            scrollbarWidth: 'none',
-            msOverflowStyle: 'none',
-            WebkitOverflowScrolling: 'touch',
-            padding: '2% 0 3% 0',
-          }}
-        >
-          {categories.length &&
-            categories.map((category: MainCategoryProps, idx) => {
-              const isSelected = idx === selectedCategoryIdx;
-              return (
-                <StyledChip
-                  key={category.categoryId}
-                  label={category.name}
-                  variant={isSelected ? 'filled' : 'outlined'}
-                  onClick={() => {
-                    setSelectedSubCategoryIdx(() => 0);
-                    setSelectedCategoryIdx(idx);
-                  }}
-                  props={{
-                    isSelected,
-                    backgroundColor: category.highlightColor,
-                  }}
-                />
-              );
-            })}
-        </Container>
-
-        <Spacer y={8} />
+            {categories.length &&
+              categories.map((category: MainCategoryProps, idx) => {
+                const isSelected = idx === selectedCategoryIdx;
+                return (
+                  <StyledChip
+                    key={category.categoryId}
+                    label={category.name}
+                    variant={isSelected ? 'filled' : 'outlined'}
+                    onClick={() => {
+                      setSelectedSubCategoryIdx(() => 0);
+                      setSelectedCategoryIdx(idx);
+                    }}
+                    props={{
+                      isSelected,
+                      backgroundColor: category.highlightColor,
+                    }}
+                  />
+                );
+              })}
+          </Container>
 
-        {/* Sub Categories */}
-        <Container
-          sx={{
-            display: 'flex',
-            justifyContent: 'space-evenly',
-            paddingBottom: '30px',
-          }}
-        >
-          {categories[selectedCategoryIdx]?.subCategories.map(
-            (sub: SubCategoryProps) => {
-              const subSelected = selectedSubCategoryIdx === sub.categoryId;
-              return (
-                <Circle
-                  key={sub.name}
-                  label={sub.name}
-                  variant={subSelected ? 'filled' : 'outlined'}
-                  color={sub.color}
-                  fontColor={subSelected ? sub.highlightColor : ''}
-                  borderColor={subSelected ? sub.highlightColor : ''}
-                  size={40}
-                  iconName={sub.iconName}
-                  iconSize={26}
-                  selected={subSelected}
-                  onClick={() =>
-                    setSelectedSubCategoryIdx(() => sub.categoryId)
-                  }
-                />
-              );
-            },
-          )}
-        </Container>
+          <Spacer y={8} />
 
-        <Divider sx={{ bgcolor: '#FFDCE1', border: '3px solid #FFDCE1' }} />
-
-        <Container sx={{ padding: '24px' }}>
-          <TextField
-            hiddenLabel
-            id="filled-hidden-label-normal"
-            placeholder="메모하기"
-            variant="standard"
-            fullWidth
-            value={content}
-            onChange={(e) => setContent(e.target.value)}
-          />
-        </Container>
-      </Container>
-      {recordType === 'UPDATE' && (
-        <Container
-          sx={{
-            flex: '0 0 10vh',
-          }}
-        >
-          {BottomButton()}
+          {/* Sub Categories */}
+          <Container
+            sx={{
+              display: 'flex',
+              justifyContent: 'space-evenly',
+              paddingBottom: '30px',
+            }}
+          >
+            {categories[selectedCategoryIdx]?.subCategories.map(
+              (sub: SubCategoryProps) => {
+                const subSelected = selectedSubCategoryIdx === sub.categoryId;
+                return (
+                  <Circle
+                    key={sub.name}
+                    label={sub.name}
+                    variant={subSelected ? 'filled' : 'outlined'}
+                    color={sub.color}
+                    fontColor={subSelected ? sub.highlightColor : ''}
+                    borderColor={subSelected ? sub.highlightColor : ''}
+                    size={40}
+                    iconName={sub.iconName}
+                    iconSize={26}
+                    selected={subSelected}
+                    onClick={() =>
+                      setSelectedSubCategoryIdx(() => sub.categoryId)
+                    }
+                  />
+                );
+              },
+            )}
+          </Container>
+
+          <Divider sx={{ bgcolor: '#FFDCE1', border: '3px solid #FFDCE1' }} />
+
+          <Container sx={{ padding: '24px' }}>
+            <TextField
+              hiddenLabel
+              id="filled-hidden-label-normal"
+              placeholder="메모하기"
+              variant="standard"
+              fullWidth
+              value={content}
+              onChange={(e) => setContent(e.target.value)}
+            />
+          </Container>
         </Container>
-      )}
-    </Box>
+        {recordType === 'UPDATE' && (
+          <Container
+            sx={{
+              flex: '0 0 10vh',
+            }}
+          >
+            {BottomButton()}
+          </Container>
+        )}
+      </Box>
+    </Wrapper>
   );
 };
 
diff --git a/src/pages/record/RecordPage.tsx b/src/pages/record/RecordPage.tsx
index 0baeeb5..e068abb 100644
--- a/src/pages/record/RecordPage.tsx
+++ b/src/pages/record/RecordPage.tsx
@@ -33,6 +33,7 @@ import utc from 'dayjs/plugin/utc';
 import '../../styles/custom-calendar-styles.css';
 import '../../styles/custom-record-styles.css';
 import { customCalendarType, currentCalendarType } from '@/store/common';
+import Wrapper from '../auth/common/Wrapper';
 
 dayjs.extend(utc);
 dayjs.extend(timezone);
@@ -60,9 +61,7 @@ const RecordPage = () => {
 
   const setSelectedEvent = useSetRecoilState(currentSelectedEvent);
 
-  const selectedDate = useRecoilValue(
-    currentSelectedDateForRecord,
-  );
+  const selectedDate = useRecoilValue(currentSelectedDateForRecord);
   const periodType = useRecoilValue<PeriodTypeForRecord>(
     currentPeriodForRecord,
   );
@@ -85,7 +84,6 @@ const RecordPage = () => {
 
   const interval = '00:30:00';
 
-
   /**
    * route to record create page of dragged time
    * @param event drag event
@@ -207,8 +205,7 @@ const RecordPage = () => {
   }, []);
 
   return (
-    <>
-      <CommonHeader title={'일주일 기록하기'} />
+    <Wrapper headerComp={<CommonHeader title={'일주일 기록하기'} />}>
       <Box
         sx={{
           height: 'calc(100vh - 112px)',
@@ -329,7 +326,7 @@ const RecordPage = () => {
           />
         </Container>
       </Box>
-    </>
+    </Wrapper>
   );
 };
 
diff --git a/src/pages/settings/AccountSetting.tsx b/src/pages/settings/AccountSetting.tsx
index 07e24c4..3ae2e69 100644
--- a/src/pages/settings/AccountSetting.tsx
+++ b/src/pages/settings/AccountSetting.tsx
@@ -4,21 +4,32 @@ import {
   IconButton,
   Input,
   InputAdornment,
-  Typography
+  Typography,
 } from '@mui/material';
 
 import UserAvatar from '@/components/settings/UserAvatar';
 import { useNavigate } from 'react-router-dom';
-import SettingWrapper from '../auth/common/Wrapper';
+import Wrapper from '../auth/common/Wrapper';
+import CommonHeader from '@/components/layout/CommonHeader';
 
 const AccountSetting = () => {
   const navigation = useNavigate();
 
   return (
-    <SettingWrapper prevBtnText={'뒤로'} handlePrevBtn={() => navigation('/settings')}>
+    <Wrapper
+      headerComp={
+        <CommonHeader
+          title={'비밀번호 변경'}
+          isShowPrevButton={true}
+        />
+      }
+      handlePrevBtn={() => navigation('/settings')}
+    >
       <Box sx={{ display: 'inline-block', position: 'relative', mt: 1 }}>
         <UserAvatar />
-        <IconButton sx={{ position: 'absolute', right: '-5px', bottom: '-5px' }}>
+        <IconButton
+          sx={{ position: 'absolute', right: '-5px', bottom: '-5px' }}
+        >
           <svg
             width="20"
             height="20"
@@ -44,11 +55,7 @@ const AccountSetting = () => {
         multiline
         endAdornment={
           <InputAdornment position="end">
-            <IconButton
-              aria-label="toggle password visibility"
-              // onClick={handleClickShowPassword}
-              // onMouseDown={handleMouseDownPassword}
-            >
+            <IconButton aria-label="toggle password visibility">
               <svg
                 width="14"
                 height="14"
@@ -68,7 +75,7 @@ const AccountSetting = () => {
       <Typography sx={{ fontSize: '14px', mt: '3px' }}>
         {'dodonenow.com'}
       </Typography>
-    </SettingWrapper>
+    </Wrapper>
   );
 };
 
diff --git a/src/pages/statistics/StatisticsPage.tsx b/src/pages/statistics/StatisticsPage.tsx
index 78d3a3c..f272ff2 100644
--- a/src/pages/statistics/StatisticsPage.tsx
+++ b/src/pages/statistics/StatisticsPage.tsx
@@ -13,7 +13,7 @@ const StatisticsPage = () => {
 
   return (
     <>
-      <CommonHeader title={'통계'} isShowBackButton={false} />
+      <CommonHeader title={'통계'} isShowPrevButton={false} />
       {/* <button onClick={handleClickBtn}>POPUP TEST</button> */}
 
       <Period />
diff --git a/src/store/common.ts b/src/store/common.ts
index 3636697..3c24558 100644
--- a/src/store/common.ts
+++ b/src/store/common.ts
@@ -34,7 +34,7 @@ export interface INextButtonState {
   text: string;
 }
 
-export type FormType = 'SIGNUP' | 'LOGIN' | 'RECORD';
+export type FormType = 'SIGNUP' | 'LOGIN' | 'RECORD' | 'RESETPW';
 
 export const currentFormType = atom<FormType>({
   key: 'CurrentFormType',