diff --git a/src/app/admin/announce/Announce.tsx b/src/app/admin/announce/Announce.tsx
index aeb269ce5..397c0df85 100644
--- a/src/app/admin/announce/Announce.tsx
+++ b/src/app/admin/announce/Announce.tsx
@@ -286,7 +286,9 @@ const Announce = () => {
     } else return
 
     await axios
-      .put(`${API_URL}/api/v1/admin/announcement`, submitData)
+      .put(`${API_URL}/api/v1/admin/announcement`, submitData, {
+        withCredentials: true,
+      })
       .then(() => {
         openToast({
           message: '공지 글이 성공적으로 수정되었습니다.',
diff --git a/src/app/admin/banner/Banner.tsx b/src/app/admin/banner/Banner.tsx
index db38de320..1dd65c589 100644
--- a/src/app/admin/banner/Banner.tsx
+++ b/src/app/admin/banner/Banner.tsx
@@ -704,7 +704,13 @@ const Banner = () => {
               </Button>
             ) : null}
             {writeMode === 'view' ? (
-              <Button variant={'contained'} onClick={() => onHandleEdit()}>
+              <Button
+                variant={'contained'}
+                onClick={() => onHandleEdit()}
+                disabled={
+                  getValues('bannerStatus') !== '예약 중' ? true : false
+                }
+              >
                 수정
               </Button>
             ) : writeMode === 'edit' ? (
diff --git a/src/app/hitchhiking/panel/HitchhikingCard.tsx b/src/app/hitchhiking/panel/HitchhikingCard.tsx
index 827259a41..264503cf6 100644
--- a/src/app/hitchhiking/panel/HitchhikingCard.tsx
+++ b/src/app/hitchhiking/panel/HitchhikingCard.tsx
@@ -179,10 +179,23 @@ const HitchhikingCardBack = ({
                   fontSize: '0.75rem',
                   color: 'text.alternative',
                   margin: 0,
+                  lineHeight: '1.125rem',
+                  marginBlockStart: '0',
+                  marginBlockEnd: '0',
+                  marginTop: 0,
                 }}
                 sx={{
                   ...style.cardContentStyleBase,
                   WebkitLineClamp: getLineCount(46, 18, 10) /* 라인수 */,
+                  '& .toastui-editor-contents > h1:first-of-type': {
+                    marginTop: 0,
+                  },
+                  '.toastui-editor-contents h1': {
+                    paddingBottom: 0,
+                  },
+                  '.toastui-editor-contents h2': {
+                    paddingBottom: 0,
+                  },
                 }}
               />
             </Box>
diff --git a/src/app/panel/OthersProfile.tsx b/src/app/panel/OthersProfile.tsx
index b5fe9274a..e5048c561 100644
--- a/src/app/panel/OthersProfile.tsx
+++ b/src/app/panel/OthersProfile.tsx
@@ -49,6 +49,9 @@ const OthersProfile = ({ name, userId, children }: IOthersProfile) => {
     router.push('/my-page')
   }
 
+  // 유령회원일 경우
+  if (Number(userId) === -1) return <>{children}</>
+
   return (
     <div>
       {children && (
diff --git a/src/app/panel/main-page/MainCard.tsx b/src/app/panel/main-page/MainCard.tsx
index 2827f8936..1f10c07fb 100644
--- a/src/app/panel/main-page/MainCard.tsx
+++ b/src/app/panel/main-page/MainCard.tsx
@@ -43,7 +43,7 @@ const MainCard = ({
   if (statusLabel === '모집완료') {
     sx = {
       ...sx,
-      filter: 'grayscale(120%) brightness(1.3)',
+      filter: 'grayscale(120%)',
     }
   }
 
diff --git a/src/app/recruit/[id]/edit/page.tsx b/src/app/recruit/[id]/edit/page.tsx
index 67ccf3d09..a073c52bb 100644
--- a/src/app/recruit/[id]/edit/page.tsx
+++ b/src/app/recruit/[id]/edit/page.tsx
@@ -28,6 +28,7 @@ const Page = ({ params }: { params: { id: string } }) => {
   const { data, isLoading, error } = useSWR<{
     defaultValues: IRecruitWriteField
     isAnswered: boolean
+    content: string
   }>(`/api/v1/recruit/edit/${params.id}`, (url: string) =>
     axiosWithAuth
       .get(url)
@@ -52,6 +53,7 @@ const Page = ({ params }: { params: { id: string } }) => {
           max: data.totalNumber ? `${data.totalNumber}` : `2`,
         },
         isAnswered: data.isAnswered,
+        content: data.content,
       })),
   )
 
@@ -129,6 +131,7 @@ const Page = ({ params }: { params: { id: string } }) => {
       submitHandler={handleSubmit}
       isAnswered={data.isAnswered}
       isSubmitting={isSubmitting}
+      content={data.content}
     />
   )
 }
diff --git a/src/app/recruit/write/panel/CreateTeamEditor.tsx b/src/app/recruit/write/panel/CreateTeamEditor.tsx
index d382991ce..3fb59b19c 100644
--- a/src/app/recruit/write/panel/CreateTeamEditor.tsx
+++ b/src/app/recruit/write/panel/CreateTeamEditor.tsx
@@ -41,6 +41,7 @@ const CreateTeamEditor = ({
   editorType,
   isAnswered,
   isSubmitting,
+  content,
 }: {
   defaultValues: IRecruitWriteField
   submitHandler: (data: IRecruitWriteField) => Promise<void>
@@ -48,6 +49,7 @@ const CreateTeamEditor = ({
   editorType: 'edit' | 'write'
   isAnswered?: boolean
   isSubmitting?: boolean
+  content?: string
 }) => {
   const [completedInterview, setCompletedInterview] = useState(false)
 
@@ -211,7 +213,7 @@ const CreateTeamEditor = ({
                   <RadioGroup {...field} row>
                     <Stack spacing={'0.5rem'} direction={'row'}>
                       <FormControlLabel
-                        value="PROJECT"
+                        value="STUDY"
                         control={
                           <Radio sx={style.radioButtonStyle} size="small" />
                         }
@@ -220,13 +222,13 @@ const CreateTeamEditor = ({
                             variant={'Caption'}
                             color={'text.alternative'}
                           >
-                            프로젝트
+                            스터디
                           </Typography>
                         }
                         disabled={editorType === 'edit'}
                       />
                       <FormControlLabel
-                        value="STUDY"
+                        value="PROJECT"
                         control={
                           <Radio sx={style.radioButtonStyle} size="small" />
                         }
@@ -235,7 +237,7 @@ const CreateTeamEditor = ({
                             variant={'Caption'}
                             color={'text.alternative'}
                           >
-                            스터디
+                            프로젝트
                           </Typography>
                         }
                         disabled={editorType === 'edit'}
@@ -546,7 +548,7 @@ const CreateTeamEditor = ({
             >
               <Box width={'100%'}>
                 <DynamicToastEditor
-                  initialValue="팀 소개 글 입니다."
+                  initialValue={content ?? '팀 소개 글 입니다.'}
                   editorRef={editorRef}
                 />
               </Box>
diff --git a/src/app/showcase/detail/[id]/page.tsx b/src/app/showcase/detail/[id]/page.tsx
index 42231e9db..d1f8c4a10 100644
--- a/src/app/showcase/detail/[id]/page.tsx
+++ b/src/app/showcase/detail/[id]/page.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { Typography } from '@mui/material'
+import { Stack, Typography } from '@mui/material'
 import React from 'react'
 import ShowcaseViewer from './panel/ShowcaseViewer'
 import { IShowcaseViewerFields } from '@/types/IShowcaseEdit'
@@ -29,10 +29,10 @@ const ShowcaseDetailPage = ({ params }: { params: { id: number } }) => {
 
   return (
     data && (
-      <>
+      <Stack gap={'2rem'}>
         <ShowcaseViewer data={data} postId={params.id} />
         <CommentContainer postId={params.id} />
-      </>
+      </Stack>
     )
   )
 }
diff --git a/src/app/showcase/detail/[id]/panel/CommentContainer.tsx b/src/app/showcase/detail/[id]/panel/CommentContainer.tsx
index 656dfebb7..f415faf4b 100644
--- a/src/app/showcase/detail/[id]/panel/CommentContainer.tsx
+++ b/src/app/showcase/detail/[id]/panel/CommentContainer.tsx
@@ -151,7 +151,7 @@ const CommentContainer = ({ postId }: IPostId) => {
         <Container sx={style.containerWrapper}>
           <Stack sx={style.CommentContainer}>
             <Typography
-              variant={'Title1'}
+              variant={'Title3'}
               color={'text.normal'}
               marginBottom={'1rem'}
             >
@@ -168,7 +168,7 @@ const CommentContainer = ({ postId }: IPostId) => {
       <Container sx={style.containerWrapper}>
         <Stack sx={style.CommentContainer}>
           <Typography
-            variant={'Title1'}
+            variant={'Title3'}
             color={'text.normal'}
             marginBottom={'1rem'}
           >
diff --git a/src/app/showcase/detail/[id]/panel/ShowcaseViewer.tsx b/src/app/showcase/detail/[id]/panel/ShowcaseViewer.tsx
index e60cace2a..81349c37b 100644
--- a/src/app/showcase/detail/[id]/panel/ShowcaseViewer.tsx
+++ b/src/app/showcase/detail/[id]/panel/ShowcaseViewer.tsx
@@ -32,7 +32,7 @@ const CoverImage = ({ image }: { image: string }) => {
 
 const InformationViewer = ({ data }: any) => {
   return (
-    <Stack spacing={'2rem'} sx={style.InformationViewer}>
+    <Stack spacing={'0.5rem'} sx={style.InformationViewer}>
       <StartEndDateViewer start={data?.start} end={data?.end} />
       <SkillInput skills={data?.skills} />
       <TeamMembers members={data?.member} />
@@ -74,10 +74,10 @@ const ShowcaseViewer = ({ data, postId }: IShowcaseViewerProps) => {
             <Stack sx={style.InformationViewerBox}>
               <InformationViewer data={data} />
               <Stack
-                spacing={'1rem'}
+                spacing={'0.5rem'}
                 display={'flex'}
                 width={'30%'}
-                marginBottom={'1rem'}
+                marginBottom={'0.5rem'}
               >
                 <CoverImage image={data.image} />
               </Stack>
@@ -88,10 +88,10 @@ const ShowcaseViewer = ({ data, postId }: IShowcaseViewerProps) => {
       ) : (
         <Container sx={style.mobileViewer}>
           <Stack
-            spacing={'1rem'}
+            spacing={'0.5rem'}
             display={'flex'}
             width={'100%'}
-            marginBottom={'1rem'}
+            marginBottom={'0.5rem'}
           >
             <TeamName
               editMode={false}
diff --git a/src/app/showcase/panel/CardContainer.tsx b/src/app/showcase/panel/CardContainer.tsx
index 4b93a881c..b67b51d2c 100644
--- a/src/app/showcase/panel/CardContainer.tsx
+++ b/src/app/showcase/panel/CardContainer.tsx
@@ -20,7 +20,7 @@ const CardContainer = ({
   const { isPc } = useMedia()
   return (
     <Stack
-      justifyContent={'flex-start'}
+      justifyContent={'center'}
       alignItems={'center'}
       sx={
         isPc
diff --git a/src/app/showcase/panel/CardStack.tsx b/src/app/showcase/panel/CardStack.tsx
index 2853231e9..e84b53bf5 100644
--- a/src/app/showcase/panel/CardStack.tsx
+++ b/src/app/showcase/panel/CardStack.tsx
@@ -42,7 +42,7 @@ const CardStack = ({
     // 위로 조금만 움직였을 때 카드가 사라지지 않도록 처리
     if (
       Math.abs(info.offset.y) < 150 ||
-      checkDragDirection(info.offset.x, info.offset.y) !== ESwipeDirection.up
+      checkDragDirection(info.offset.x, info.offset.y) !== ESwipeDirection.down
     ) {
       setDragged(false)
 
diff --git a/src/app/showcase/panel/PostCard.tsx b/src/app/showcase/panel/PostCard.tsx
index 2e75f7c86..3e93e4f97 100644
--- a/src/app/showcase/panel/PostCard.tsx
+++ b/src/app/showcase/panel/PostCard.tsx
@@ -1,7 +1,6 @@
 import {
   Box,
   Card,
-  CardActionArea,
   CardContent,
   CardHeader,
   CardMedia,
@@ -92,7 +91,7 @@ function PostCard({
         backfaceVisibility: 'hidden',
       }}
       ref={ref}
-      // onClick={onClick}
+      onClick={onClick}
     >
       <CardMedia
         component="img"
@@ -157,53 +156,52 @@ function PostCard({
           }
           sx={{ p: 0 }}
         />
-        <CardActionArea onClick={onClick}>
-          <Box
-            sx={{
-              height: (currentCardWidth * 190) / 328,
-              boxSizing: 'border-box',
-            }}
-          >
-            <CardContent sx={{ p: 0 }}>
-              <Typography
-                variant="Body1"
-                color="text.normal"
-                sx={{
-                  ...style.cardTitleStyleBase,
-                  height: getLineCount(46, 22.5) * 22.5,
-                  WebkitLineClamp: getLineCount(46, 22.5),
-                }}
-              >
-                {title}
-              </Typography>
-            </CardContent>
-            <CardContent sx={{ p: 0 }}>
-              <Stack
-                gap={1}
-                direction={'row'}
-                sx={{
-                  overflow: 'hidden',
-                  height: getLineCount(46, 22.5) * 20 + 8,
-                }}
-              >
-                {tagList?.map(({ name, color }: IShowcaseTag, idx: number) => {
-                  return (
-                    <Chip
-                      label={<Typography variant="Tag">{name}</Typography>}
-                      size="small"
-                      key={idx}
-                      style={{
-                        backgroundColor: alpha(color, 0.3),
-                        borderRadius: 2,
-                        height: '1.25rem',
-                      }}
-                    />
-                  )
-                })}
-              </Stack>
-            </CardContent>
-          </Box>
-        </CardActionArea>
+
+        <Box
+          sx={{
+            height: (currentCardWidth * 190) / 328,
+            boxSizing: 'border-box',
+          }}
+        >
+          <CardContent sx={{ p: 0 }}>
+            <Typography
+              variant="Body1"
+              color="text.normal"
+              sx={{
+                ...style.cardTitleStyleBase,
+                height: getLineCount(46, 22.5) * 22.5,
+                WebkitLineClamp: getLineCount(46, 22.5),
+              }}
+            >
+              {title}
+            </Typography>
+          </CardContent>
+          <CardContent sx={{ p: 0 }}>
+            <Stack
+              gap={1}
+              direction={'row'}
+              sx={{
+                overflow: 'hidden',
+                height: getLineCount(46, 22.5) * 20 + 8,
+              }}
+            >
+              {tagList?.map(({ name, color }: IShowcaseTag, idx: number) => {
+                return (
+                  <Chip
+                    label={<Typography variant="Tag">{name}</Typography>}
+                    size="small"
+                    key={idx}
+                    style={{
+                      backgroundColor: alpha(color, 0.3),
+                      borderRadius: 2,
+                      height: '1.25rem',
+                    }}
+                  />
+                )
+              })}
+            </Stack>
+          </CardContent>
+        </Box>
       </Stack>
     </Card>
   )
diff --git a/src/app/showcase/panel/common/ImageInput.tsx b/src/app/showcase/panel/common/ImageInput.tsx
index 22c5abc82..df1e80ae4 100644
--- a/src/app/showcase/panel/common/ImageInput.tsx
+++ b/src/app/showcase/panel/common/ImageInput.tsx
@@ -23,7 +23,7 @@ const ImageInput = ({
         svgIcon={<ImageIcon sx={Style.IconStyle} />}
         message={'쇼케이스 대표 이미지'}
       />
-      <Stack sx={{ display: 'flex', alignItems: 'center' }}>
+      <Stack sx={{ width: '100%', display: 'flex', alignItems: 'center' }}>
         {previewImage && (
           <Box
             style={{
diff --git a/src/app/showcase/panel/common/SkillInput.tsx b/src/app/showcase/panel/common/SkillInput.tsx
index 63f1f9132..65f490962 100644
--- a/src/app/showcase/panel/common/SkillInput.tsx
+++ b/src/app/showcase/panel/common/SkillInput.tsx
@@ -15,7 +15,7 @@ const SkillInput = ({ skills }: ISkillProps) => {
     <Stack spacing={'0.75rem'} sx={style.skillInputViewer}>
       <LabelWithIcon
         svgIcon={<TagIcon sx={style.IconStyle} />}
-        message="기술 스택"
+        message="기술스택"
         color="text.alternative"
       />
       <Stack spacing={'0.75rem'} py={1} direction={'row'} useFlexGap>
diff --git a/src/app/showcase/panel/common/StartEndDateViewer.style.ts b/src/app/showcase/panel/common/StartEndDateViewer.style.ts
index d4720c379..e25eb346f 100644
--- a/src/app/showcase/panel/common/StartEndDateViewer.style.ts
+++ b/src/app/showcase/panel/common/StartEndDateViewer.style.ts
@@ -1,9 +1,10 @@
 export const StartEndDateViewerBox = (isPc?: boolean) => ({
-  display: isPc ? 'flex' : 'none',
-  justifyContent: isPc ? 'space-between' : 'none',
+  display: 'flex',
+  justifyContent: 'space-between',
   alignItems: 'center',
   gap: '1rem',
   gridArea: 'startEndDateViewer',
   width: '100%',
   height: isPc ? '6.25rem' : '3.375rem',
+  paddingTop: isPc ? '0' : '1.25rem',
 })
diff --git a/src/app/showcase/panel/common/StartEndDateViewer.tsx b/src/app/showcase/panel/common/StartEndDateViewer.tsx
index 4fdc80a92..d19d9250e 100644
--- a/src/app/showcase/panel/common/StartEndDateViewer.tsx
+++ b/src/app/showcase/panel/common/StartEndDateViewer.tsx
@@ -21,7 +21,7 @@ const StartEndDateViewer = ({ start, end }: Idate) => {
           message="시작일"
           color="text.alternative"
         />
-        <Typography variant={'Caption'} sx={{ color: 'text.normal' }}>
+        <Typography variant={'Body2'} sx={{ color: 'text.normal' }}>
           {start.split('T')[0]} (모집글 게시일)
         </Typography>
       </Stack>
@@ -31,7 +31,7 @@ const StartEndDateViewer = ({ start, end }: Idate) => {
           message="종료일"
           color="text.alternative"
         />
-        <Typography variant={'Caption'} sx={{ color: 'text.normal' }}>
+        <Typography variant={'Body2'} sx={{ color: 'text.normal' }}>
           {end.split('T')[0]} (진행 완료일)
         </Typography>
       </Stack>
diff --git a/src/app/teams/[id]/page.tsx b/src/app/teams/[id]/page.tsx
index ae5d3cd8f..927831d6f 100644
--- a/src/app/teams/[id]/page.tsx
+++ b/src/app/teams/[id]/page.tsx
@@ -15,10 +15,10 @@ const TeamsPage = ({ params }: { params: { id: string } }) => {
     <Stack spacing={'1.5rem'} width={'100%'}>
       <CuButton
         action={() => router.push('/team-list')}
-        message={'팀리스트로 돌아가기'}
+        message={'팀 리스트로 돌아가기'}
         TypographyProps={{
-          color: 'text.normal',
-          variant: 'Title3',
+          color: 'text.alternative',
+          variant: 'Caption',
         }}
         variant="text"
         style={{ width: 'fit-content' }}
diff --git a/src/app/teams/[id]/setting/page.tsx b/src/app/teams/[id]/setting/page.tsx
index d00f2834c..e74f59f6a 100644
--- a/src/app/teams/[id]/setting/page.tsx
+++ b/src/app/teams/[id]/setting/page.tsx
@@ -2,7 +2,7 @@
 
 import { isAxiosError } from 'axios'
 import { useRouter } from 'next/navigation'
-import { Button, Stack, Typography } from '@mui/material'
+import { Button, Stack, Typography, Card } from '@mui/material'
 import { useEffect, useState } from 'react'
 import SetupMember from './panel/SettingTeamMember'
 import ApplicantList from './panel/ApplicantList'
@@ -96,12 +96,13 @@ const TeamsSetupPage = ({ params }: { params: { id: string } }) => {
             />
           )}
           {!showApplicant ? (
-            <Stack
+            <Card
               sx={{
                 borderRadius: '1rem',
                 p: '1.5rem',
                 height: '20rem',
                 backgroundColor: 'background.secondary',
+                backgroundImage: 'none',
               }}
             >
               <Stack
@@ -133,7 +134,7 @@ const TeamsSetupPage = ({ params }: { params: { id: string } }) => {
                 teamId={teams.team.id}
                 jobs={teams.job}
               />
-            </Stack>
+            </Card>
           ) : (
             <ApplicantList close={closeApplicant} teamId={teams.team.id} />
           )}
diff --git a/src/app/teams/[id]/setting/panel/RedirectRecruitPage.tsx b/src/app/teams/[id]/setting/panel/RedirectRecruitPage.tsx
index 3cde67c77..ea0753783 100644
--- a/src/app/teams/[id]/setting/panel/RedirectRecruitPage.tsx
+++ b/src/app/teams/[id]/setting/panel/RedirectRecruitPage.tsx
@@ -1,20 +1,25 @@
 import TeamTypeCard from '@/app/team-list/panel/TeamTypeCard'
 import { ITeam } from '@/app/teams/types/types'
-import { Button, Stack, Typography } from '@mui/material'
+import { Button, Stack, Typography, Card } from '@mui/material'
 import { useRouter } from 'next/navigation'
 
 const RedirectRecruitPage = ({ id, data }: { id: string; data: ITeam }) => {
   const router = useRouter()
   return (
-    <Stack
+    <Card
       sx={{
         p: '1.5rem',
         borderRadius: '1rem',
         backgroundColor: 'background.secondary',
         gap: '0.5rem',
+        backgroundImage: 'none',
       }}
     >
-      <Stack direction={'row'} justifyContent={'space-between'} alignItems={'center'}>
+      <Stack
+        direction={'row'}
+        justifyContent={'space-between'}
+        alignItems={'center'}
+      >
         <Typography>모집글</Typography>
         <Button
           variant="outlined"
@@ -27,7 +32,7 @@ const RedirectRecruitPage = ({ id, data }: { id: string; data: ITeam }) => {
         <TeamTypeCard type={data.team.type} />
         <Typography>{data.team.name}</Typography>
       </Stack>
-    </Stack>
+    </Card>
   )
 }
 
diff --git a/src/app/teams/[id]/setting/panel/SettingTeamInfo.tsx b/src/app/teams/[id]/setting/panel/SettingTeamInfo.tsx
index 34eba42b4..1ca30baef 100644
--- a/src/app/teams/[id]/setting/panel/SettingTeamInfo.tsx
+++ b/src/app/teams/[id]/setting/panel/SettingTeamInfo.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, Stack, Typography } from '@mui/material'
+import { Box, Button, Stack, Typography, Card } from '@mui/material'
 import { useRef, useState } from 'react'
 import useModal from '@/hook/useModal'
 import {
@@ -40,18 +40,13 @@ export interface ISetupTeam {
   // job: Job[] | null
 }
 
-const layoutPcBox = {
-  m: '0.5rem',
-  p: '0.5rem',
-}
-
 interface ISettingTeamJobs {
   team: ISetupTeam
   mutate: () => void
 }
 
 const SettingTeamJobs = ({ team, mutate }: ISettingTeamJobs) => {
-  const { isPc } = useMedia()
+  const { isTablet, isPc } = useMedia()
   const {
     isOpen: isConfirmOpen,
     openModal: openConfirmModel,
@@ -65,7 +60,6 @@ const SettingTeamJobs = ({ team, mutate }: ISettingTeamJobs) => {
   const {
     register,
     setValue,
-    handleSubmit,
     formState: { errors, isDirty },
     control,
     watch,
@@ -75,9 +69,11 @@ const SettingTeamJobs = ({ team, mutate }: ISettingTeamJobs) => {
   })
 
   const region = watch('region')
+  const name = watch('name')
   const dueTo = watch('dueTo')
   const operationForm = watch('operationForm')
   const status = watch('status')
+  const image = watch('teamImage')
 
   /**id: string
   type: TeamType
@@ -105,7 +101,6 @@ const SettingTeamJobs = ({ team, mutate }: ISettingTeamJobs) => {
     }
 
     if (isDirty === false && isLogoEdit === false) {
-      closeConfirmModel()
       return openToast({
         severity: 'error',
         message: '변경된 사항이 없습니다.',
@@ -114,7 +109,18 @@ const SettingTeamJobs = ({ team, mutate }: ISettingTeamJobs) => {
     openConfirmModel()
   }
 
-  const onSubmit = handleSubmit((data) => {
+  const onSubmit = () => {
+    const data: ISetupTeam = {
+      id: team.id,
+      type: team.type,
+      name: name,
+      maxMember: team.maxMember,
+      status: status,
+      dueTo: dueTo,
+      operationForm: operationForm,
+      region: region,
+      teamImage: image,
+    }
     axiosWithAuth
       .post(
         `${process.env.NEXT_PUBLIC_CSR_API}/api/v1/team/setting/${team.id}`,
@@ -123,7 +129,7 @@ const SettingTeamJobs = ({ team, mutate }: ISettingTeamJobs) => {
       .then((res) => {
         if (res.status == 200) {
           console.log('서버에 저장 완료')
-          location.reload()
+          mutate()
           openToast({
             severity: 'success',
             message: '팀 정보 수정이 완료되었습니다.',
@@ -146,7 +152,7 @@ const SettingTeamJobs = ({ team, mutate }: ISettingTeamJobs) => {
       .finally(() => {
         closeConfirmModel()
       })
-  })
+  }
 
   // useEffect(() => {
   //   window.history.pushState(null, '', location.href)
@@ -165,22 +171,24 @@ const SettingTeamJobs = ({ team, mutate }: ISettingTeamJobs) => {
 
   return (
     <>
-      <Stack
+      <Card
         sx={{
           p: '1.5rem',
           borderRadius: '1rem',
           backgroundColor: 'background.secondary',
+          backgroundImage: 'none',
         }}
       >
         <Stack direction={'row'} display={'flex'} alignItems={'center'}>
-          <Typography fontWeight="bold">팀 상태</Typography>
+          <Typography variant="Body2Emphasis">팀 상태</Typography>
           <Tutorial content={<TeamStatusTutorial />} />
         </Stack>
         <form ref={sendRef} onSubmit={onSubmit}>
-          <Box sx={isPc ? layoutPcBox : {}}>
+          <Box>
             <Stack
-              direction={isPc ? 'row' : 'column'}
+              direction={!isPc || isTablet ? 'column' : 'row'}
               alignItems={isPc ? 'center' : ''}
+              justifyContent={!isPc || isTablet ? '' : 'center'}
             >
               <SettingTeamLogo
                 teamLogoImage={team.teamImage ? team.teamImage : ''}
@@ -228,7 +236,7 @@ const SettingTeamJobs = ({ team, mutate }: ISettingTeamJobs) => {
               type="button"
               onClick={handleEditModal}
             >
-              <Typography>저장</Typography>
+              <Typography variant="Body2">저장</Typography>
             </Button>
           </Stack>
           <TeamQuitButton teamStatus={team.status} teamId={team.id} />
@@ -239,7 +247,7 @@ const SettingTeamJobs = ({ team, mutate }: ISettingTeamJobs) => {
             mutate={mutate}
           />
         </Stack>
-      </Stack>
+      </Card>
 
       <CuTextModal
         open={isConfirmOpen}
diff --git a/src/app/teams/[id]/setting/panel/SettingTeamMember.tsx b/src/app/teams/[id]/setting/panel/SettingTeamMember.tsx
index cf6e8e538..90e493678 100644
--- a/src/app/teams/[id]/setting/panel/SettingTeamMember.tsx
+++ b/src/app/teams/[id]/setting/panel/SettingTeamMember.tsx
@@ -170,6 +170,11 @@ const SettingTeamMember = ({
             message: '팀원이 삭제되었습니다.',
           })
           window.location.reload()
+        } else if (res.status === 403) {
+          openToast({
+            severity: 'error',
+            message: '자기 자신은 삭제시킬 수 없습니다.',
+          })
         } else {
           openToast({
             severity: 'error',
diff --git a/src/app/teams/[id]/setting/panel/TeamEndProcess/TeamCompleteButton.tsx b/src/app/teams/[id]/setting/panel/TeamEndProcess/TeamCompleteButton.tsx
index b99894994..627ce4ac9 100644
--- a/src/app/teams/[id]/setting/panel/TeamEndProcess/TeamCompleteButton.tsx
+++ b/src/app/teams/[id]/setting/panel/TeamEndProcess/TeamCompleteButton.tsx
@@ -85,7 +85,7 @@ const TeamCompleteButton = ({
         justifyContent={'space-between'}
         alignItems={'center'}
       >
-        <Typography>팀 활동을 완료하겠습니까?</Typography>
+        <Typography variant="Body2">팀 활동을 완료하겠습니까?</Typography>
         <Button
           disabled={
             teamStatus === TeamStatus.RECRUITING ||
@@ -96,7 +96,7 @@ const TeamCompleteButton = ({
           variant="contained"
           onClick={openModal}
         >
-          <Typography>완료하기</Typography>
+          <Typography variant="Body2">완료하기</Typography>
         </Button>
       </Stack>
 
diff --git a/src/app/teams/[id]/setting/panel/TeamEndProcess/TeamDisperseButton.tsx b/src/app/teams/[id]/setting/panel/TeamEndProcess/TeamDisperseButton.tsx
index 370f9d11e..1e2a04189 100644
--- a/src/app/teams/[id]/setting/panel/TeamEndProcess/TeamDisperseButton.tsx
+++ b/src/app/teams/[id]/setting/panel/TeamEndProcess/TeamDisperseButton.tsx
@@ -83,7 +83,7 @@ const TeamDisperseButton = ({ teamId, teamStatus }: ITeamDisperseButton) => {
         justifyContent={'space-between'}
         alignItems={'center'}
       >
-        <Typography>팀을 해산시겠습니까?</Typography>
+        <Typography variant="Body2">팀을 해산시겠습니까?</Typography>
         <Button
           disabled={
             teamStatus === TeamStatus.RECRUITING ||
@@ -94,7 +94,7 @@ const TeamDisperseButton = ({ teamId, teamStatus }: ITeamDisperseButton) => {
           variant="contained"
           onClick={openModal}
         >
-          <Typography>해산하기</Typography>
+          <Typography variant="Body2">해산하기</Typography>
         </Button>
       </Stack>
 
diff --git a/src/app/teams/[id]/setting/panel/TeamEndProcess/TeamQuitButton.tsx b/src/app/teams/[id]/setting/panel/TeamEndProcess/TeamQuitButton.tsx
index 62d5d9ae0..0bc6062a8 100644
--- a/src/app/teams/[id]/setting/panel/TeamEndProcess/TeamQuitButton.tsx
+++ b/src/app/teams/[id]/setting/panel/TeamEndProcess/TeamQuitButton.tsx
@@ -76,7 +76,7 @@ const TeamQuitButton = ({ teamId, teamStatus }: ITeamQuitButton) => {
         justifyContent={'space-between'}
         alignItems={'center'}
       >
-        <Typography>팀을 나가겠습니까?</Typography>
+        <Typography variant="Body2">팀을 나가겠습니까?</Typography>
         <Button
           disabled={
             teamStatus === TeamStatus.RECRUITING ||
@@ -87,7 +87,7 @@ const TeamQuitButton = ({ teamId, teamStatus }: ITeamQuitButton) => {
           variant="contained"
           onClick={openModal}
         >
-          <Typography>팀 나가기</Typography>
+          <Typography variant="Body2">팀 나가기</Typography>
         </Button>
       </Stack>
 
diff --git a/src/app/teams/[id]/setting/panel/TeamInfoProcess/SettingTeamActivity.tsx b/src/app/teams/[id]/setting/panel/TeamInfoProcess/SettingTeamActivity.tsx
index 706f6bdca..c80f76a1b 100644
--- a/src/app/teams/[id]/setting/panel/TeamInfoProcess/SettingTeamActivity.tsx
+++ b/src/app/teams/[id]/setting/panel/TeamInfoProcess/SettingTeamActivity.tsx
@@ -24,9 +24,9 @@ const SettingTeamActivity = ({
       mx={!isPc ? '0.5rem' : ''}
       spacing={'0.5rem'}
     >
-      <Stack direction={'row'} alignItems={'flex-start'} spacing={'0.35rem'}>
+      <Stack direction={'row'} alignItems={'center'} spacing={'0.35rem'}>
         <WifiClearIcon />
-        <Typography>활동방식</Typography>
+        <Typography variant="Body2Emphasis">활동방식</Typography>
       </Stack>
       <Controller
         name="operationForm"
@@ -39,7 +39,7 @@ const SettingTeamActivity = ({
             defaultValue={teamActivity}
             sx={{
               m: 0,
-              minWidth: '8rem',
+              minWidth: '5rem',
             }}
             {...field}
           >
@@ -49,9 +49,15 @@ const SettingTeamActivity = ({
               TeamOperationForm.MIX,
             ].map((operation) => (
               <MenuItem key={operation} value={operation}>
-                {operation === TeamOperationForm.OFFLINE && '오프라인'}
-                {operation === TeamOperationForm.ONLINE && '온라인'}
-                {operation === TeamOperationForm.MIX && '온/오프라인'}
+                {operation === TeamOperationForm.OFFLINE && (
+                  <Typography variant="Body2">오프라인</Typography>
+                )}
+                {operation === TeamOperationForm.ONLINE && (
+                  <Typography variant="Body2">온라인</Typography>
+                )}
+                {operation === TeamOperationForm.MIX && (
+                  <Typography variant="Body2">온/오프라인</Typography>
+                )}
               </MenuItem>
             ))}
           </Select>
diff --git a/src/app/teams/[id]/setting/panel/TeamInfoProcess/SettingTeamLocation.tsx b/src/app/teams/[id]/setting/panel/TeamInfoProcess/SettingTeamLocation.tsx
index 9d8d48051..2d6c5fa9e 100644
--- a/src/app/teams/[id]/setting/panel/TeamInfoProcess/SettingTeamLocation.tsx
+++ b/src/app/teams/[id]/setting/panel/TeamInfoProcess/SettingTeamLocation.tsx
@@ -9,7 +9,7 @@ import useMedia from '@/hook/useMedia'
 import { TeamOperationForm } from '@/app/teams/types/types'
 
 interface ISettingTeamLocation {
-  teamLocation: string[]
+  teamLocation: Array<string>
   teamActivity: TeamOperationForm
   control: Control<ISetupTeam, any>
 }
@@ -29,49 +29,33 @@ const SettingTeamLocation = ({
         spacing={'0.5rem'}
         mx={!isPc ? '0.5rem' : ''}
       >
-        <Stack direction={'row'} alignItems={'flex-start'} spacing={'0.35rem'}>
+        <Stack direction={'row'} alignItems={'center'} spacing={'0.35rem'}>
           <GeoClearIcon />
-          <Typography>활동지역</Typography>
+          <Typography variant="Body2Emphasis">활동지역</Typography>
         </Stack>
         <Stack direction={'row'} spacing={1}>
-          <Controller
-            name="region.0"
-            control={control}
+          <Select
+            size="small"
+            variant="outlined"
             defaultValue={teamLocation[0]}
-            render={({ field }) => (
-              <Select
-                size="small"
-                variant="outlined"
-                defaultValue={teamLocation[0]}
-                sx={{
-                  m: 0,
-                  minWidth: '8rem',
-                }}
-                {...field}
-              >
-                <MenuItem key={'region'} value={''}></MenuItem>
-              </Select>
-            )}
-          />
-          <Controller
-            name="region.1"
-            control={control}
+            sx={{
+              m: 0,
+              minWidth: '8rem',
+            }}
+          >
+            <MenuItem key={'region'} value={''}></MenuItem>
+          </Select>
+          <Select
+            size="small"
+            variant="outlined"
             defaultValue={teamLocation[1]}
-            render={({ field }) => (
-              <Select
-                size="small"
-                variant="outlined"
-                defaultValue={teamLocation[1]}
-                sx={{
-                  m: 0,
-                  minWidth: '8rem',
-                }}
-                {...field}
-              >
-                <MenuItem key={'region'} value={''}></MenuItem>
-              </Select>
-            )}
-          />
+            sx={{
+              m: 0,
+              minWidth: '8rem',
+            }}
+          >
+            <MenuItem key={'region'} value={''}></MenuItem>
+          </Select>
         </Stack>
       </Stack>
     )
@@ -83,9 +67,9 @@ const SettingTeamLocation = ({
       spacing={'0.5rem'}
       mx={!isPc ? '0.5rem' : ''}
     >
-      <Stack direction={'row'} alignItems={'flex-start'} spacing={'0.35rem'}>
+      <Stack direction={'row'} alignItems={'center'} spacing={'0.35rem'}>
         <GeoClearIcon />
-        <Typography>활동지역</Typography>
+        <Typography variant="Body2">활동지역</Typography>
       </Stack>
       <Stack direction={'row'} spacing={1}>
         <Controller
diff --git a/src/app/teams/[id]/setting/panel/TeamInfoProcess/SettingTeamLogo.tsx b/src/app/teams/[id]/setting/panel/TeamInfoProcess/SettingTeamLogo.tsx
index 8d98df9ca..40a5e2bf9 100644
--- a/src/app/teams/[id]/setting/panel/TeamInfoProcess/SettingTeamLogo.tsx
+++ b/src/app/teams/[id]/setting/panel/TeamInfoProcess/SettingTeamLogo.tsx
@@ -25,7 +25,7 @@ const SettingTeamLogo = ({
 
   const deleteImage = () => {
     setPreview('/icons/ios/128.png')
-    setValue('teamImage', '')
+    setValue('teamImage', null)
     setIsLogoEdit(true)
     closeModal()
   }
@@ -47,12 +47,7 @@ const SettingTeamLogo = ({
 
   return (
     <>
-      <Stack
-        direction={'row'}
-        alignItems={'center'}
-        spacing={'0.5rem'}
-        p={'0.5rem'}
-      >
+      <Stack direction={'row'} alignItems={'center'} spacing={'0.5rem'}>
         <Box
           width={['100%', '10rem']}
           height={['100%', '10rem']}
@@ -69,7 +64,7 @@ const SettingTeamLogo = ({
               variant="rounded"
               src={preview}
               alt="teamLogo"
-              sx={{ width: '10rem', height: '10rem' }}
+              sx={{ width: '8rem', height: '8rem' }}
             />
             <input
               type="file"
diff --git a/src/app/teams/[id]/setting/panel/TeamInfoProcess/SettingTeamName.tsx b/src/app/teams/[id]/setting/panel/TeamInfoProcess/SettingTeamName.tsx
index f0c313ab0..2e7c97d49 100644
--- a/src/app/teams/[id]/setting/panel/TeamInfoProcess/SettingTeamName.tsx
+++ b/src/app/teams/[id]/setting/panel/TeamInfoProcess/SettingTeamName.tsx
@@ -20,8 +20,12 @@ const SettingTeamName = ({ teamType, errors, register }: ISettingTeamName) => {
         spacing={'0.5rem'}
         height={'4.5rem'}
       >
-        {teamType === TeamType.PROJECT && <Typography>프로젝트명</Typography>}
-        {teamType === TeamType.STUDY && <Typography>스터디명</Typography>}
+        {teamType === TeamType.PROJECT && (
+          <Typography variant="Body2Emphasis">프로젝트명</Typography>
+        )}
+        {teamType === TeamType.STUDY && (
+          <Typography variant="Body2Emphasis">스터디명</Typography>
+        )}
 
         <TextField
           error={errors.name?.message ? true : false}
@@ -34,7 +38,7 @@ const SettingTeamName = ({ teamType, errors, register }: ISettingTeamName) => {
           }}
           {...register('name', {
             required: '필수 입력사항입니다.',
-            maxLength: 10,
+            maxLength: 40,
             minLength: {
               value: 2,
               message: '2글자 이상 입력해주세요.',
diff --git a/src/app/teams/[id]/setting/panel/TeamInfoProcess/SettingTeamStatus.tsx b/src/app/teams/[id]/setting/panel/TeamInfoProcess/SettingTeamStatus.tsx
index d03e787e6..e2aba97ff 100644
--- a/src/app/teams/[id]/setting/panel/TeamInfoProcess/SettingTeamStatus.tsx
+++ b/src/app/teams/[id]/setting/panel/TeamInfoProcess/SettingTeamStatus.tsx
@@ -3,7 +3,6 @@ import { TargetClearIcon } from '../Icons'
 import { Control, Controller } from 'react-hook-form'
 import { TeamStatus } from '@/app/teams/types/types'
 import { ISetupTeam } from '../SettingTeamInfo'
-import useMedia from '@/hook/useMedia'
 
 interface ISettingTeamStatus {
   teamStatus: TeamStatus
@@ -11,18 +10,16 @@ interface ISettingTeamStatus {
 }
 
 const SettingTeamStatus = ({ teamStatus, control }: ISettingTeamStatus) => {
-  const { isPc } = useMedia()
   return (
     <Stack
       direction={'row'}
       alignItems={'center'}
-      mx={isPc ? '0.5rem' : ''}
       mb={'1.2rem'}
       spacing={'0.25rem'}
     >
       <TargetClearIcon />
       <Stack direction={'row'} alignItems={'center'} spacing={'0.5rem'}>
-        <Typography>상태</Typography>
+        <Typography variant="Body2Emphasis">상태</Typography>
         <Controller
           name="status"
           control={control}
@@ -43,14 +40,22 @@ const SettingTeamStatus = ({ teamStatus, control }: ISettingTeamStatus) => {
                     TeamStatus.ONGOING,
                   ].map((status) => (
                     <MenuItem key={status} value={status}>
-                      {status === TeamStatus.RECRUITING && '모집 중'}
-                      {status === TeamStatus.BEFORE && '모집 완료'}
-                      {status === TeamStatus.ONGOING && '활동 중'}
+                      {status === TeamStatus.RECRUITING && (
+                        <Typography variant="Body2">모집 중</Typography>
+                      )}
+                      {status === TeamStatus.BEFORE && (
+                        <Typography variant="Body2">모집 완료</Typography>
+                      )}
+                      {status === TeamStatus.ONGOING && (
+                        <Typography variant="Body2">활동중</Typography>
+                      )}
                     </MenuItem>
                   ))
                 : [TeamStatus.COMPLETE].map((status) => (
                     <MenuItem key={status} value={status}>
-                      {status === TeamStatus.COMPLETE && '완료'}
+                      {status === TeamStatus.COMPLETE && (
+                        <Typography variant="Body2">완료</Typography>
+                      )}
                     </MenuItem>
                   ))}
             </Select>
diff --git a/src/app/teams/[id]/setting/panel/TeamInfoProcess/SettingTeamTime.tsx b/src/app/teams/[id]/setting/panel/TeamInfoProcess/SettingTeamTime.tsx
index 83ca37f5f..d3656ed12 100644
--- a/src/app/teams/[id]/setting/panel/TeamInfoProcess/SettingTeamTime.tsx
+++ b/src/app/teams/[id]/setting/panel/TeamInfoProcess/SettingTeamTime.tsx
@@ -20,9 +20,11 @@ const SettingTeamTime = ({ teamTime, control }: ISettingTeamTime) => {
       mb={'1.2rem'}
       spacing={'0.5rem'}
     >
-      <Stack direction={'row'} alignItems={'flex-start'} spacing={'0.25rem'}>
+      <Stack direction={'row'} alignItems={'center'} spacing={'0.25rem'}>
         <PieClearIcon />
-        <Typography textOverflow={'ellipsis'}>목표기간</Typography>
+        <Typography textOverflow={'ellipsis'} variant="Body2Emphasis">
+          목표기간
+        </Typography>
       </Stack>
 
       <Controller
@@ -36,13 +38,13 @@ const SettingTeamTime = ({ teamTime, control }: ISettingTeamTime) => {
             variant="outlined"
             sx={{
               m: 0,
-              minWidth: '8rem',
+              minWidth: '5rem',
             }}
             {...field}
           >
             {dueList.map((dueTo) => (
               <MenuItem key={dueTo} value={dueTo}>
-                {dueTo}
+                <Typography variant="Body2">{dueTo}</Typography>
               </MenuItem>
             ))}
           </Select>