diff --git a/src/components/common/PopupMessage.tsx b/src/components/common/PopupMessage.tsx
index a90d5f2..e333d67 100644
--- a/src/components/common/PopupMessage.tsx
+++ b/src/components/common/PopupMessage.tsx
@@ -19,7 +19,7 @@ const PopupMessage = () => {
     <Popover
       id={isPopupShow ? 'virtual-element-popover' : undefined}
       anchorEl={(element: Element) => {
-        return element;
+        return element || <></>;
       }}
       open={isPopupShow}
       onClose={() => {
diff --git a/src/pages/record/EditRecordPage.tsx b/src/pages/record/EditRecordPage.tsx
index 92176b4..b76ec0b 100644
--- a/src/pages/record/EditRecordPage.tsx
+++ b/src/pages/record/EditRecordPage.tsx
@@ -539,6 +539,7 @@ const EditRecordPage = (): ReactElement => {
         setPopupText('서버에 오류가 발생했습니다. 다시 시도 해주세요.');
       });
   }
+  
   /**
    * update event record
    * @param startedAt start time
diff --git a/src/pages/settings/SettingsPage.tsx b/src/pages/settings/SettingsPage.tsx
index 89a767a..e5448cb 100644
--- a/src/pages/settings/SettingsPage.tsx
+++ b/src/pages/settings/SettingsPage.tsx
@@ -2,6 +2,7 @@
 import {
   Box,
   Button,
+  Container,
   List,
   ListItemButton,
   ListItemText,
@@ -27,6 +28,7 @@ import { useModalCommon } from '@/hooks/modalCommon';
 import Wrapper from '../auth/common/Wrapper';
 import { currentUserInfo } from '@/store/info';
 import { UserModeList } from '../category/CategoryPage';
+import CommonHeader from '@/components/layout/CommonHeader';
 
 const SettingPage = () => {
   const navigation = useNavigate();
@@ -121,9 +123,9 @@ const SettingPage = () => {
    * @returns
    */
   const getUserNickname = () => {
-    const type = UserModeList.filter(
-      (mode) => mode.type === userInfo.templateType,
-    )[0]?.name || 'TEST ACCOUNT';
+    const type =
+      UserModeList.filter((mode) => mode.type === userInfo.templateType)[0]
+        ?.name || 'TEST ACCOUNT';
     return `#${type} ${userInfo.nickname}님`;
   };
 
@@ -133,116 +135,160 @@ const SettingPage = () => {
   });
 
   return (
-    <Wrapper>
-      <SettingWrapper>
-        <Button
-          onClick={() => navigation('/settings/account')}
+    <Wrapper
+      headerComp={
+        <Container
           sx={{
             display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            height: '15vh',
-            borderRadius: '10px',
-            color: 'common.black',
-            backgroundColor: '#FFF8F8',
-            padding: '0',
+            justifyContent: 'center',
           }}
         >
-          <Box sx={{ margin: '0 10px', width: 72, height: 72 }}>
-            <UserAvatar />
-          </Box>
-          <Box sx={{ flex: 1, margin: '0 10px' }}>
-            <Typography
-              align="left"
-              sx={{ fontSize: '16px', fontWeight: '600' }}
-            >
-              {getUserNickname()}
-            </Typography>
-            <Typography
-              align="left"
-              textTransform=""
-              sx={{ fontSize: '14px', fontWeight: '400' }}
-            >
-              {userInfo.email}
-            </Typography>
-          </Box>
-          <>
-            <ChevronRightIcon
-              sx={{ margin: '0 10px', color: 'common.black' }}
-            />
-          </>
-        </Button>
-        <List
-          sx={{
-            flex: 1,
-            height: '70vh',
-          }}
-        >
-          {getListSubHeader('커스텀화')}
-          {getListItem({
-            text: '모드 및 카테고리 설정',
-            handler: () => {
-              setCategoryMode('MODEVISIBLE');
-              navigation('/category');
-            },
-          })}
+          <Button
+            onClick={() => navigation('/settings/account')}
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              height: '15vh',
+              margin: '30px 0 0 0',
+              borderRadius: '10px',
+              color: 'common.black',
+              backgroundColor: '#FFF8F8',
+            }}
+          >
+            <Box sx={{ margin: '0 10px', width: 72, height: 72 }}>
+              <UserAvatar />
+            </Box>
+            <Box sx={{ flex: 1, margin: '0 10px' }}>
+              <Typography
+                align="left"
+                sx={{ fontSize: '16px', fontWeight: '600' }}
+              >
+                {getUserNickname()}
+              </Typography>
+              <Typography
+                align="left"
+                sx={{ fontSize: '14px', fontWeight: '400' }}
+              >
+                {userInfo.email}
+              </Typography>
+            </Box>
+            <>
+              <ChevronRightIcon
+                sx={{ margin: '0 10px', color: 'common.black' }}
+              />
+            </>
+          </Button>
+        </Container>
+      }
+    >
+      {/* <SettingWrapper> */}
+      {/* <Button
+        onClick={() => navigation('/settings/account')}
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          height: '15vh',
+          margin: 0,
+          outline: '1px solid red',
+          paddingTop: '-10px',
+          borderRadius: '10px',
+          color: 'common.black',
+          backgroundColor: '#FFF8F8',
+          padding: '0',
+        }}
+      >
+        <Box sx={{ margin: '0 10px', width: 72, height: 72 }}>
+          <UserAvatar />
+        </Box>
+        <Box sx={{ flex: 1, margin: '0 10px' }}>
+          <Typography align="left" sx={{ fontSize: '16px', fontWeight: '600' }}>
+            {getUserNickname()}
+          </Typography>
+          <Typography
+            align="left"
+            textTransform=""
+            sx={{ fontSize: '14px', fontWeight: '400' }}
+          >
+            {userInfo.email}
+          </Typography>
+        </Box>
+        <>
+          <ChevronRightIcon sx={{ margin: '0 10px', color: 'common.black' }} />
+        </>
+      </Button> */}
+      <List
+        sx={{
+          flex: 1,
+          height: '70vh',
+        }}
+      >
+        {getListSubHeader('커스텀화')}
+        {getListItem({
+          text: '모드 및 카테고리 설정',
+          handler: () => {
+            setCategoryMode('MODEVISIBLE');
+            navigation('/category');
+          },
+        })}
 
-          {getListSubHeader('고객 센터')}
-          {getListItem({
-            text: 'FAQ',
-            handler: () => navigation('/settings/faq'),
-          })}
+        {getListSubHeader('고객 센터')}
+        {getListItem({
+          text: 'FAQ',
+          handler: () => navigation('/settings/faq'),
+        })}
 
-          {getListSubHeader('계정')}
-          {getListItem({
-            text: '비밀번호 변경',
-            handler: () => navigation('/resetPW'),
-          })}
-          {getListItem({
-            text: '로그아웃',
-            handler: async () => {
-              setModalInfo({
-                ...modalInfo,
-                open: true,
-                title: '로그아웃',
-                msg: '로그아웃 하시겠습니까?',
-                optionList: null,
-                btn1Text: modalAnswer.no,
-                btn1ClickHandler: closeModal,
-                btn2Text: modalAnswer.yes,
-                btn2ClickHandler: logoutClickHandler,
-              });
-              return true;
-            },
-          })}
-        </List>
-        <Button
-          sx={{ height: '15vh' }}
-          onClick={async () => {
+        {getListSubHeader('계정')}
+        {getListItem({
+          text: '비밀번호 변경',
+          handler: () => navigation('/resetPW'),
+        })}
+        {getListItem({
+          text: '로그아웃',
+          handler: async () => {
             setModalInfo({
               ...modalInfo,
               open: true,
-              title: '탈퇴시 계정은 복구되지 않습니다.',
-              msg: '정말 탈퇴 하시겠습니까?',
+              title: '로그아웃',
+              msg: '로그아웃 하시겠습니까?',
+              optionList: null,
               btn1Text: modalAnswer.no,
               btn1ClickHandler: closeModal,
               btn2Text: modalAnswer.yes,
-              btn2ClickHandler: deleteAccountClickHandler,
+              btn2ClickHandler: logoutClickHandler,
             });
             return true;
+          },
+        })}
+      </List>
+      <Button
+        sx={{ height: '15vh' }}
+        onClick={async () => {
+          setModalInfo({
+            ...modalInfo,
+            open: true,
+            title: '탈퇴시 계정은 복구되지 않습니다.',
+            msg: '정말 탈퇴 하시겠습니까?',
+            btn1Text: modalAnswer.no,
+            btn1ClickHandler: closeModal,
+            btn2Text: modalAnswer.yes,
+            btn2ClickHandler: deleteAccountClickHandler,
+          });
+          return true;
+        }}
+      >
+        <Typography
+          sx={{
+            fontSize: '12px',
+            color: 'grey.500',
+            textDecoration: 'underline',
           }}
         >
-          <Typography
-            sx={{
-              fontSize: '12px',
-              color: 'grey.500',
-              textDecoration: 'underline',
-            }}
-          >
-            {'회원 탈퇴'}
-          </Typography>
-        </Button>
-      </SettingWrapper>
+          {'회원 탈퇴'}
+        </Typography>
+      </Button>
+      {/* </SettingWrapper> */}
     </Wrapper>
   );
 };
diff --git a/src/pages/statistics/ChartContainer.tsx b/src/pages/statistics/ChartContainer.tsx
index 0a847e0..7a3e239 100644
--- a/src/pages/statistics/ChartContainer.tsx
+++ b/src/pages/statistics/ChartContainer.tsx
@@ -423,112 +423,116 @@ const ChartContainer = () => {
     return (
       <>
         {dataArray.length &&
-          dataArray.map((data: any, idx) => (
-            <Box
-              key={idx}
-              sx={{
-                display: 'flex',
-                m: '10px 17px',
-                p: 0,
-              }}
-            >
+          dataArray.map((data: any, idx) => {
+            if (!data.timeSum) {
+              return <Box key={idx}></Box>;
+            }
+            return (
               <Box
+                key={idx}
                 sx={{
-                  padding: '8px',
                   display: 'flex',
-                  justifyContent: 'flex-start',
-                  alignItems: 'center',
-                  flex: '1 1 60%',
-                  height: '100%',
-                  m: 0,
+                  m: '10px 17px',
                   p: 0,
                 }}
               >
-                <Circle
-                  color={data.categoryColor}
-                  size={62}
-                  iconSize={40}
-                  iconName={''}
-                  onClick={() => {
-                    const subCategoryData = data.children;
-                    const periodTypeTitle = periodTypeList!.filter(
-                      (type) => type.id === periodType,
-                    )[0].subTitle;
-                    if (subCategoryData) {
-                      setCategoryDetailData(subCategoryData);
-                      setTotalSumTitle(
-                        addPostposition(
-                          `${periodTypeTitle} ${data.categoryName}`,
-                        ),
-                      );
-                    } else {
-                      setCategoryDetailData(statisticsResult);
-                      setTotalSumTitle(addPostposition(periodTypeTitle));
-                      setClickedIndex(-1);
-                    }
-                    setCategorySum(
-                      () =>
-                        (subCategoryData
-                          ? categoryDetailData
-                          : statisticsResult
-                        )?.reduce(
-
-                          (accu: number, curr: StatisticsDetail) =>
-                            accu + curr.timeSum,
-                          0,
-                        ) | 0,
-                    );
-                  }}
-                />
                 <Box
                   sx={{
-                    marginLeft: '12px',
-                    flex: '1 1 100%',
+                    padding: '8px',
+                    display: 'flex',
+                    justifyContent: 'flex-start',
+                    alignItems: 'center',
+                    flex: '1 1 60%',
+                    height: '100%',
+                    m: 0,
+                    p: 0,
                   }}
                 >
-                  <Typography
-                    sx={{
-                      fontSize: '16px',
-                      lineHeight: '18.75px',
-                      fontWeight: 700,
-                      m: 0,
-                      p: 0,
+                  <Circle
+                    color={data.categoryColor}
+                    size={62}
+                    iconSize={40}
+                    iconName={''}
+                    onClick={() => {
+                      const subCategoryData = data.children;
+                      const periodTypeTitle = periodTypeList!.filter(
+                        (type) => type.id === periodType,
+                      )[0].subTitle;
+                      if (subCategoryData) {
+                        setCategoryDetailData(subCategoryData);
+                        setTotalSumTitle(
+                          addPostposition(
+                            `${periodTypeTitle} ${data.categoryName}`,
+                          ),
+                        );
+                      } else {
+                        setCategoryDetailData(statisticsResult);
+                        setTotalSumTitle(addPostposition(periodTypeTitle));
+                        setClickedIndex(-1);
+                      }
+                      setCategorySum(
+                        () =>
+                          (subCategoryData
+                            ? categoryDetailData
+                            : statisticsResult
+                          )?.reduce(
+                            (accu: number, curr: StatisticsDetail) =>
+                              accu + curr.timeSum,
+                            0,
+                          ) | 0,
+                      );
                     }}
-                  >
-                    {data.categoryName}
-                  </Typography>
+                  />
                   <Box
                     sx={{
-                      display: 'flex',
-                      flexDirection: 'row',
-                      alignItems: 'center',
+                      marginLeft: '12px',
+                      flex: '1 1 100%',
                     }}
                   >
-                    <Box sx={{ width: '100%', flex: '1 1 60%' }}>
-                      <LinearProgress
-                        variant="determinate"
-                        value={(data.timeSum * 100) / (categorySum || 100)}
-                        sx={{
-                          top: '3px',
-                          height: '11px',
-                          '&.MuiLinearProgress-root': {
-                            backgroundColor: `${paletteGrey[100]} !important`,
-                            borderRadius: 5,
-                          },
-                          '& > .MuiLinearProgress-bar': {
-                            backgroundColor: data.categoryColor,
-                            borderRadius: 5,
-                          },
-                        }}
-                      />
+                    <Typography
+                      sx={{
+                        fontSize: '16px',
+                        lineHeight: '18.75px',
+                        fontWeight: 700,
+                        m: 0,
+                        p: 0,
+                      }}
+                    >
+                      {data.categoryName}
+                    </Typography>
+                    <Box
+                      sx={{
+                        display: 'flex',
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                      }}
+                    >
+                      <Box sx={{ width: '100%', flex: '1 1 60%' }}>
+                        <LinearProgress
+                          variant="determinate"
+                          value={(data.timeSum * 100) / (categorySum || 100)}
+                          sx={{
+                            top: '3px',
+                            height: '11px',
+                            '&.MuiLinearProgress-root': {
+                              backgroundColor: `${paletteGrey[100]} !important`,
+                              borderRadius: 5,
+                            },
+                            '& > .MuiLinearProgress-bar': {
+                              backgroundColor: data.categoryColor,
+                              borderRadius: 5,
+                            },
+                          }}
+                        />
+                      </Box>
+                      <Spacer x={10} />
+                      {setCategoryDetailDataTime(data.timeSum)}
                     </Box>
-                    <Spacer x={10} />
-                    {setCategoryDetailDataTime(data.timeSum)}
                   </Box>
                 </Box>
               </Box>
-            </Box>
-          ))}
+            );
+          })}
       </>
     );
   };
@@ -578,10 +582,18 @@ const ChartContainer = () => {
         backgroundColor: palette.chart.customBackground,
         display: 'flex',
         flexDirection: 'column',
-        paddingBottom: '6vh',
+        // height: '100vh',
+        marginBottom: '6vh',
+        overflow: 'hidden'
+
       }}
     >
-      <Box sx={{ position: 'relative' }}>
+      <Box
+        sx={{
+          position: 'relative',
+          flex: '0 1 7%', 
+        }}
+      >
         <Box
           sx={{
             width: '100%',
@@ -685,78 +697,87 @@ const ChartContainer = () => {
           </Box>
         )}
       </Box>
-      {!!totalSum && (
-        <Carousel {...carouselOption}>
-          <Box
-            sx={{
-              display: 'flex',
-              height: '274px',
-              justifyContent: 'center',
-              position: 'relative',
-              width: '100%',
-            }}
-          >
-            <Chart
-              ref={pieChartRef}
-              type={'doughnut'}
-              data={chartData}
-              options={pieChartOptions}
-              plugins={[ChartDataLabels, customBackground]}
-            />
-          </Box>
-          <Box sx={{ backgroundColor: palette.chart.customBackground }}>
+      <Box
+      sx={{
+        position: 'relative',
+        flex: '0 1 40%', 
+      }}>
+        {!!totalSum && (
+          <Carousel {...carouselOption}>
             <Box
               sx={{
                 display: 'flex',
                 height: '274px',
                 justifyContent: 'center',
-                alignItems: 'center',
-                flexDirection: 'column',
+                position: 'relative',
                 width: '100%',
+                backgroundColor: palette.chart.customBackground,
               }}
             >
               <Chart
-                ref={barChartRef}
-                type={'bar'}
+                ref={pieChartRef}
+                type={'doughnut'}
                 data={chartData}
-                options={barChartOptions}
+                options={pieChartOptions}
                 plugins={[ChartDataLabels, customBackground]}
               />
             </Box>
-          </Box>
-        </Carousel>
-      )}
-      {!!!totalSum && (
-        <Carousel {...carouselOption}>
-          <Box
-            sx={{
-              display: 'flex',
-              height: '278px',
-              justifyContent: 'center',
-              alignItems: 'center',
-              position: 'relative',
-              width: '100%',
-            }}
-          >
-            <Typography
+            <Box sx={{ backgroundColor: palette.chart.customBackground }}>
+              <Box
+                sx={{
+                  display: 'flex',
+                  height: '274px',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  flexDirection: 'column',
+                  width: '100%',
+                }}
+              >
+                <Chart
+                  ref={barChartRef}
+                  type={'bar'}
+                  data={chartData}
+                  options={barChartOptions}
+                  plugins={[ChartDataLabels, customBackground]}
+                />
+              </Box>
+            </Box>
+          </Carousel>
+        )}
+        {!!!totalSum && (
+          <Carousel {...carouselOption}>
+            <Box
               sx={{
-                fontSize: '15px',
-                fontWeight: '600',
-                color: paletteGrey[400],
+                display: 'flex',
+                height: '278px',
+                justifyContent: 'center',
+                alignItems: 'center',
+                position: 'relative',
+                width: '100%',
               }}
             >
-              {'아직 데이터가 없어요'}
-              <br />
-              {'기록을 남겨보세요 :)'}
-            </Typography>
-          </Box>
-        </Carousel>
-      )}
+              <Typography
+                sx={{
+                  fontSize: '15px',
+                  fontWeight: '600',
+                  color: paletteGrey[400],
+                }}
+              >
+                {'아직 데이터가 없어요'}
+                <br />
+                {'기록을 남겨보세요 :)'}
+              </Typography>
+            </Box>
+          </Carousel>
+        )}
+      </Box>
       <Box
         sx={{
           display: 'flex',
           flexDirection: 'column',
           justifyContent: 'flex-start',
+          backgroundColor: 'white',
+          overflow: 'scroll',
         }}
       >
         {setCategoryDetailDataList(