diff --git a/src/api/services/group/group.api.ts b/src/api/services/group/group.api.ts
index 5e610d27..615c3b39 100644
--- a/src/api/services/group/group.api.ts
+++ b/src/api/services/group/group.api.ts
@@ -26,6 +26,13 @@ export const useGroupInfo = (groupId: number) => {
   })
 }
 
+export const useGroupInfoSuspense = (groupId: number) => {
+  return useSuspenseQuery({
+    queryKey: ['group', groupId],
+    queryFn: () => getGroupInfo(groupId),
+  })
+}
+
 type GroupResponse = PagingResponse<Omit<Group, 'groupDescription'>[]>
 
 const getGroupPaging = async (params: PagingRequestParams) => {
@@ -159,3 +166,25 @@ export const approveGroupQuestion = async (
   )
   return response.data
 }
+
+export type ModifyGroupImgRequestBody = {
+  groupId: number
+  image: File
+}
+
+export const modifyGroupImg = async ({
+  groupId,
+  image,
+}: ModifyGroupImgRequestBody) => {
+  const formData = new FormData()
+  formData.append('image', image)
+  const response = await authorizationInstance.patch(
+    `/api/group/modify/image/${groupId}`,
+    formData,
+    {
+      headers: { 'Content-Type': 'multipart/form-data' },
+    }
+  )
+
+  return response.data
+}
diff --git a/src/api/services/profile/my-page.api.ts b/src/api/services/profile/my-page.api.ts
index f9dfc7ef..85a8ee25 100644
--- a/src/api/services/profile/my-page.api.ts
+++ b/src/api/services/profile/my-page.api.ts
@@ -1,21 +1,28 @@
-import { useQuery } from '@tanstack/react-query'
+import { useQuery, useSuspenseQuery } from '@tanstack/react-query'
 
 import { authorizationInstance, fetchInstance } from '@/api/instance'
 import { MyPageItem, UserRankingItem } from '@/types'
 
-export const getMyPage = async (userId: string) => {
+export const getMyPage = async (userId: number) => {
   const response = await fetchInstance.get<MyPageItem>(`/api/profile/${userId}`)
 
   return response.data
 }
 
-export const useMyPage = (userId: string) => {
+export const useMyPage = (userId: number) => {
   return useQuery({
     queryKey: ['myPage', userId],
     queryFn: () => getMyPage(userId),
   })
 }
 
+export const useMyPageSuspense = (userId: number) => {
+  return useSuspenseQuery({
+    queryKey: ['myPage', userId],
+    queryFn: () => getMyPage(userId),
+  })
+}
+
 type UploadProfileBgRequest = {
   image: File
 }
diff --git a/src/components/AvatarLabel/index.tsx b/src/components/AvatarLabel/index.tsx
new file mode 100644
index 00000000..754abf73
--- /dev/null
+++ b/src/components/AvatarLabel/index.tsx
@@ -0,0 +1,22 @@
+import { Avatar, HStack, StackProps, Text } from '@chakra-ui/react'
+
+import { colors } from '@/styles/colors'
+
+interface AvatarLabelProps extends StackProps {
+  avatarSrc?: string
+  label: string
+}
+
+export const AvatarLabel = ({ avatarSrc, label }: AvatarLabelProps) => {
+  return (
+    <HStack gap={1.5}>
+      <Avatar
+        width={7}
+        height={7}
+        src={avatarSrc}
+        border={`0.8px solid ${colors.black[300]}`}
+      />
+      <Text>{label}</Text>
+    </HStack>
+  )
+}
diff --git a/src/components/AvatarLabelWithNavigate/index.tsx b/src/components/AvatarLabelWithNavigate/index.tsx
deleted file mode 100644
index 43892501..00000000
--- a/src/components/AvatarLabelWithNavigate/index.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { useNavigate } from 'react-router-dom'
-
-import { Avatar, HStack, StackProps, Text } from '@chakra-ui/react'
-
-interface AvatarLabelWithNavigateProps extends StackProps {
-  avatarSrc?: string
-  label: string
-  linkTo?: string
-}
-
-export const AvatarLabelWithNavigate = ({
-  avatarSrc,
-  label,
-  linkTo,
-}: AvatarLabelWithNavigateProps) => {
-  const navigate = useNavigate()
-
-  if (linkTo) {
-    return (
-      <HStack gap={1.5} onClick={() => navigate(linkTo)}>
-        <Avatar width={7} height={7} src={avatarSrc} />
-        <Text>{label}</Text>
-      </HStack>
-    )
-  }
-
-  return (
-    <HStack gap={1.5}>
-      <Avatar width={7} height={7} src={avatarSrc} />
-      <Text>{label}</Text>
-    </HStack>
-  )
-}
diff --git a/src/components/Form/FormContext.tsx b/src/components/Form/FormContext.tsx
index 18043cc4..397893ad 100644
--- a/src/components/Form/FormContext.tsx
+++ b/src/components/Form/FormContext.tsx
@@ -38,6 +38,7 @@ export const useFormField = () => {
     name: fieldContext.name,
     formItemId: `${id}-form-item`,
     formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
     ...fieldState,
   }
 }
diff --git a/src/components/Form/index.tsx b/src/components/Form/index.tsx
index cf827d3d..5ae80b48 100644
--- a/src/components/Form/index.tsx
+++ b/src/components/Form/index.tsx
@@ -13,9 +13,17 @@ const FormItem = FormItemProvider
 
 const FormControl = forwardRef<HTMLDivElement, BoxProps>(
   ({ ...props }, ref) => {
-    const { error, formItemId } = useFormField()
+    const { error, formItemId, formMessageId } = useFormField()
 
-    return <Box ref={ref} id={formItemId} aria-invalid={!!error} {...props} />
+    return (
+      <Box
+        ref={ref}
+        id={formItemId}
+        aria-describedby={`${formMessageId}`}
+        aria-invalid={!!error}
+        {...props}
+      />
+    )
   }
 )
 FormControl.displayName = 'FormControl'
@@ -37,4 +45,28 @@ const FormDescription = forwardRef<HTMLParagraphElement, TextProps>(
 )
 FormDescription.displayName = 'FormDescription'
 
-export { Form, FormField, FormItem, FormControl, FormDescription }
+const FormMessage = forwardRef<HTMLParagraphElement, TextProps>(
+  ({ children, ...props }, ref) => {
+    const { error, formMessageId } = useFormField()
+    const body = error ? String(error?.message) : children
+
+    if (!body) {
+      return null
+    }
+
+    return (
+      <Text
+        ref={ref}
+        id={formMessageId}
+        color="red"
+        fontSize="small"
+        {...props}
+      >
+        {body}
+      </Text>
+    )
+  }
+)
+FormMessage.displayName = 'FormMessage'
+
+export { Form, FormField, FormItem, FormControl, FormDescription, FormMessage }
diff --git a/src/pages/CreateGroupPage/CreateGroupForm/index.tsx b/src/pages/CreateGroupPage/CreateGroupForm/index.tsx
index 39e9ad33..90b468c7 100644
--- a/src/pages/CreateGroupPage/CreateGroupForm/index.tsx
+++ b/src/pages/CreateGroupPage/CreateGroupForm/index.tsx
@@ -9,7 +9,7 @@ import {
   FormField,
   FormItem,
 } from '@/components/Form'
-import { CreateGroupFields } from '@/schema/create-group'
+import { CreateGroupFields } from '@/schema/group'
 
 interface CreateGroupFormProps {
   form: UseFormReturn<CreateGroupFields>
diff --git a/src/pages/CreateGroupPage/index.tsx b/src/pages/CreateGroupPage/index.tsx
index 24bebc18..825c100c 100644
--- a/src/pages/CreateGroupPage/index.tsx
+++ b/src/pages/CreateGroupPage/index.tsx
@@ -14,7 +14,7 @@ import {
 } from '@/api/services/group/group.api'
 import cookies from '@/assets/cookies.svg'
 import { AlertModal } from '@/components/Modal/AlertModal'
-import { CreateGroupFields, CreateGroupSchema } from '@/schema/create-group'
+import { CreateGroupFields, CreateGroupSchema } from '@/schema/group'
 import { Group } from '@/types'
 
 import { CreateGroupForm } from './CreateGroupForm'
diff --git a/src/pages/GroupMembersPage/MembersTable/index.tsx b/src/pages/GroupMembersPage/MembersTable/index.tsx
index 8013180b..b74dab96 100644
--- a/src/pages/GroupMembersPage/MembersTable/index.tsx
+++ b/src/pages/GroupMembersPage/MembersTable/index.tsx
@@ -40,7 +40,7 @@ export default function MembersTable({
     data: profile,
     status: profileStatus,
     isError: isProfileError,
-  } = useMyPage(myUserId.toString())
+  } = useMyPage(myUserId)
 
   const {
     data: memberList,
diff --git a/src/pages/GroupPage/GroupProfile/ImgModify/index.tsx b/src/pages/GroupPage/GroupProfile/ImgModify/index.tsx
new file mode 100644
index 00000000..b6bc7f5e
--- /dev/null
+++ b/src/pages/GroupPage/GroupProfile/ImgModify/index.tsx
@@ -0,0 +1,122 @@
+import { ChangeEvent, useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { BiError } from 'react-icons/bi'
+
+import { Box, Input, useDisclosure } from '@chakra-ui/react'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useMutation } from '@tanstack/react-query'
+
+import { queryClient } from '@/api/instance'
+import {
+  ModifyGroupImgRequestBody,
+  modifyGroupImg,
+} from '@/api/services/group/group.api'
+import { Form, FormControl, FormField, FormItem } from '@/components/Form'
+import { AlertModal } from '@/components/Modal/AlertModal'
+import { ModifyGroupImageFields, ModifyGroupImageSchema } from '@/schema/group'
+import { Group, GroupRole } from '@/types'
+
+type ImgModifyProps = {
+  gprofile: Group
+  role: GroupRole
+}
+
+export default function ImgModify({ role, gprofile }: ImgModifyProps) {
+  const form = useForm<ModifyGroupImageFields>({
+    resolver: zodResolver(ModifyGroupImageSchema),
+    mode: 'onSubmit',
+    defaultValues: {
+      groupId: gprofile.groupId,
+      image: new File([], ''),
+    },
+  })
+
+  const [errorMessage, setErrorMessage] = useState('')
+  const errorModal = useDisclosure()
+
+  const { mutate: uploadImage } = useMutation({
+    mutationFn: (data: ModifyGroupImgRequestBody) => modifyGroupImg(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['group', gprofile.groupId] })
+    },
+  })
+
+  const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files ? e.target.files[0] : null
+
+    if (file) {
+      form.setValue('image', file)
+      form.handleSubmit(
+        () => {
+          uploadImage(form.getValues())
+        },
+        (errors) => {
+          const errorMessages =
+            Object.values(errors).flatMap((error) => error.message)[0] || ''
+
+          setErrorMessage(errorMessages)
+          errorModal.onOpen()
+        }
+      )()
+    }
+  }
+
+  if (role === 'MEMBER') {
+    return (
+      <Box
+        width="70px"
+        height="70px"
+        sx={{ border: '0.8px solid', borderColor: 'black.300' }}
+        backgroundImage={`url('${gprofile.groupImageUrl}')`}
+        backgroundSize="cover"
+        backgroundPosition="center"
+        borderRadius="100%"
+      />
+    )
+  }
+
+  return (
+    <Box
+      width="70px"
+      height="70px"
+      sx={{ border: '0.8px solid', borderColor: 'black.300' }}
+      _hover={{ opacity: 0.5 }}
+      cursor="pointer"
+      onClick={() => document.getElementById('fileInput')?.click()}
+      backgroundImage={`url('${gprofile.groupImageUrl}')`}
+      backgroundSize="cover"
+      backgroundPosition="center"
+      borderRadius="100%"
+    >
+      <Form {...form}>
+        <form>
+          <FormField
+            control={form.control}
+            name="image"
+            render={() => (
+              <FormItem>
+                <FormControl>
+                  <Input
+                    type="file"
+                    id="fileInput"
+                    accept=".jpg, .jpeg, .png"
+                    display="none"
+                    multiple={false}
+                    onChange={handleFileChange}
+                  />
+                </FormControl>
+              </FormItem>
+            )}
+          />
+        </form>
+      </Form>
+      <AlertModal
+        isOpen={errorModal.isOpen}
+        onClose={errorModal.onClose}
+        icon={<BiError />}
+        title={errorMessage}
+        description=""
+      />
+    </Box>
+  )
+}
diff --git a/src/pages/GroupPage/GroupProfile/ModifySuccessModal/index.tsx b/src/pages/GroupPage/GroupProfile/ModifySuccessModal/index.tsx
new file mode 100644
index 00000000..4e0f1217
--- /dev/null
+++ b/src/pages/GroupPage/GroupProfile/ModifySuccessModal/index.tsx
@@ -0,0 +1,24 @@
+import { BiCheckCircle } from 'react-icons/bi'
+
+import { AlertModal } from '@/components/Modal/AlertModal'
+import { Modal } from '@/types'
+
+interface ModifySuccessModalProps {
+  successModal: Modal
+}
+
+export const ModifySuccessModal = ({
+  successModal,
+}: ModifySuccessModalProps) => {
+  return (
+    <AlertModal
+      isOpen={successModal.isOpen}
+      onClose={() => {
+        successModal.onClose()
+      }}
+      icon={<BiCheckCircle />}
+      title="그룹 이름과 소개를 수정하였습니다"
+      description=""
+    />
+  )
+}
diff --git a/src/pages/GroupPage/GroupProfile/ProfileFormField/index.tsx b/src/pages/GroupPage/GroupProfile/ProfileFormField/index.tsx
new file mode 100644
index 00000000..4b114f12
--- /dev/null
+++ b/src/pages/GroupPage/GroupProfile/ProfileFormField/index.tsx
@@ -0,0 +1,50 @@
+import { UseFormReturn } from 'react-hook-form'
+
+import { Input } from '@chakra-ui/react'
+
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from '@/components/Form'
+import { ModifyGroupFields } from '@/schema/group'
+
+interface GroupFormFieldProps {
+  form: UseFormReturn<ModifyGroupFields>
+  name: keyof ModifyGroupFields
+  size: 'xl' | 'md'
+  width: string
+}
+
+export const GroupFormField = ({
+  form,
+  name,
+  size,
+  width,
+}: GroupFormFieldProps) => {
+  return (
+    <FormField
+      control={form.control}
+      name={name}
+      render={({ field }) => (
+        <FormItem>
+          <FormControl>
+            <Input
+              value={field.value}
+              onChange={field.onChange}
+              border="none"
+              padding="0"
+              height="auto"
+              textColor="black.500"
+              _focus={{ color: 'black.800' }}
+              fontSize={size}
+              width={width}
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  )
+}
diff --git a/src/pages/GroupPage/GroupProfile/index.tsx b/src/pages/GroupPage/GroupProfile/index.tsx
new file mode 100644
index 00000000..33ee68c2
--- /dev/null
+++ b/src/pages/GroupPage/GroupProfile/index.tsx
@@ -0,0 +1,149 @@
+import { useEffect, useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { BiCheck, BiEditAlt } from 'react-icons/bi'
+
+import { Center, Flex, Text, useDisclosure } from '@chakra-ui/react'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useMutation } from '@tanstack/react-query'
+
+import { queryClient } from '@/api/instance'
+import {
+  ModifyGroupRequestBody,
+  modifyGroup,
+} from '@/api/services/group/group.api'
+import { Form } from '@/components/Form'
+import { ModifyGroupFields, ModifyGroupSchema } from '@/schema/group'
+import { colors } from '@/styles/colors'
+import { Group, GroupRole } from '@/types'
+
+import ImgModify from './ImgModify'
+import { ModifySuccessModal } from './ModifySuccessModal'
+import { GroupFormField } from './ProfileFormField'
+
+interface GroupProfileProps {
+  group: Group
+  role: GroupRole
+}
+
+export const GroupProfile = ({ group, role }: GroupProfileProps) => {
+  const form = useForm<ModifyGroupFields>({
+    resolver: zodResolver(ModifyGroupSchema),
+    mode: 'onChange',
+    defaultValues: {
+      groupId: group.groupId,
+      groupName: group.groupName,
+      description: group.groupDescription,
+    },
+  })
+
+  const [isEdit, setIsEdit] = useState(false)
+  const successModal = useDisclosure()
+
+  const { mutate } = useMutation({
+    mutationFn: (groupFields: ModifyGroupRequestBody) =>
+      modifyGroup(groupFields),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['group', group.groupId] })
+      queryClient.invalidateQueries({ queryKey: ['groups'] })
+      successModal.onOpen()
+    },
+  })
+
+  const handleModifyProfile = form.handleSubmit(() => {
+    mutate(form.getValues())
+    setIsEdit(!isEdit)
+  })
+
+  const onClickEditButton = () => {
+    if (!isEdit) {
+      setIsEdit(!isEdit)
+      return
+    }
+
+    handleModifyProfile()
+  }
+
+  useEffect(() => {
+    form.reset({
+      groupId: group.groupId,
+      groupName: group.groupName,
+      description: group.groupDescription,
+    })
+    setIsEdit(false)
+  }, [group, form])
+
+  return (
+    <Flex
+      alignItems="center"
+      gap="15px"
+      paddingX="25px"
+      paddingTop="30px"
+      height="96px"
+      marginBottom={5}
+    >
+      <ImgModify role={role} gprofile={group} />
+      <Form {...form}>
+        <form>
+          <Flex flexDirection="column">
+            <Flex alignItems="start" gap={2}>
+              {isEdit ? (
+                <GroupFormField
+                  form={form}
+                  name="groupName"
+                  size="xl"
+                  width="180px"
+                />
+              ) : (
+                <Text fontSize="xl">{group.groupName}</Text>
+              )}
+              <Text
+                fontSize="xs"
+                borderRadius="8px"
+                fontWeight="bold"
+                background="none"
+                color="primary"
+                border={`1px solid ${colors.orange[300]}`}
+                padding="3px 6px"
+                marginTop="2px"
+              >
+                {role === 'LEADER' ? '그룹장' : '그룹원'}
+              </Text>
+            </Flex>
+            <Flex alignItems="start" gap={2}>
+              {isEdit ? (
+                <GroupFormField
+                  form={form}
+                  name="description"
+                  size="md"
+                  width="320px"
+                />
+              ) : (
+                <Text color="text_secondary" fontSize="md">
+                  {group.groupDescription}
+                </Text>
+              )}
+              {role === 'LEADER' && (
+                <Center
+                  borderRadius="full"
+                  width="20px"
+                  height="20px"
+                  background="brown.200"
+                  color="brown.600"
+                  border={`1.5px solid ${colors.brown[400]}`}
+                  _hover={{ cursor: 'pointer', background: 'brown.300' }}
+                  marginTop="2px"
+                  onClick={onClickEditButton}
+                >
+                  {isEdit ? <BiCheck size="18px" /> : <BiEditAlt size="13px" />}
+                </Center>
+              )}
+            </Flex>
+          </Flex>
+        </form>
+      </Form>
+      {successModal.isOpen && (
+        <ModifySuccessModal successModal={successModal} />
+      )}
+    </Flex>
+  )
+}
diff --git a/src/pages/GroupPage/Management/CreateQuestion/CreateQuestionForm/index.tsx b/src/pages/GroupPage/Management/CreateQuestion/CreateQuestionForm/index.tsx
new file mode 100644
index 00000000..fdbc27a0
--- /dev/null
+++ b/src/pages/GroupPage/Management/CreateQuestion/CreateQuestionForm/index.tsx
@@ -0,0 +1,58 @@
+import { UseFormReturn } from 'react-hook-form'
+
+import { Flex, Text, Textarea } from '@chakra-ui/react'
+
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormMessage,
+} from '@/components/Form'
+import { CreateQuestionFields } from '@/schema/group'
+
+interface CreateQuestionFormProps {
+  form: UseFormReturn<CreateQuestionFields>
+}
+
+export const CreateQuestionForm = ({ form }: CreateQuestionFormProps) => {
+  return (
+    <Form {...form}>
+      <form>
+        <FormField
+          control={form.control}
+          name="content"
+          render={({ field }) => (
+            <FormItem>
+              <FormControl>
+                <Flex flexDirection="column" gap={3}>
+                  <Text fontSize={14}>질문</Text>
+                  <Textarea
+                    rows={1}
+                    resize="none"
+                    whiteSpace="nowrap"
+                    placeholder="25자 이내 입력"
+                    value={field.value}
+                    onChange={field.onChange}
+                  />
+                </Flex>
+              </FormControl>
+              <Flex
+                flexDirection="column"
+                height="45px"
+                justifyContent="end"
+                gap={1}
+              >
+                <FormMessage />
+                <FormDescription textAlign="center">
+                  요청한 질문은 수정하거나 취소할 수 없습니다
+                </FormDescription>
+              </Flex>
+            </FormItem>
+          )}
+        />
+      </form>
+    </Form>
+  )
+}
diff --git a/src/pages/GroupPage/Management/CreateQuestion/index.tsx b/src/pages/GroupPage/Management/CreateQuestion/index.tsx
index 63587065..5dff8770 100644
--- a/src/pages/GroupPage/Management/CreateQuestion/index.tsx
+++ b/src/pages/GroupPage/Management/CreateQuestion/index.tsx
@@ -1,7 +1,9 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
+import { useForm } from 'react-hook-form'
 import { BiError, BiPlus } from 'react-icons/bi'
 
-import { Box, Flex, Text, Textarea, useDisclosure } from '@chakra-ui/react'
+import { Box, Flex, useDisclosure } from '@chakra-ui/react'
+import { zodResolver } from '@hookform/resolvers/zod'
 import { useMutation } from '@tanstack/react-query'
 
 import {
@@ -10,6 +12,9 @@ import {
 } from '@/api/services/question/group.api'
 import { AlertModal } from '@/components/Modal/AlertModal'
 import { FormConfirmModalButton, FormModal } from '@/components/Modal/FormModal'
+import { CreateQuestionFields, CreateQuestionSchema } from '@/schema/group'
+
+import { CreateQuestionForm } from './CreateQuestionForm'
 
 interface GroupQuestionCreateModalProps {
   isOpen: boolean
@@ -22,17 +27,23 @@ export const GroupQuestionCreateModal = ({
   onClose,
   groupId,
 }: GroupQuestionCreateModalProps) => {
-  const [questionContent, setQuestionContent] = useState('')
+  const errorAlert = useDisclosure()
   const [errorMessage, setErrorMessage] = useState('')
 
-  const errorAlert = useDisclosure()
+  const form = useForm<CreateQuestionFields>({
+    resolver: zodResolver(CreateQuestionSchema),
+    mode: 'onChange',
+    defaultValues: {
+      groupId,
+      content: '',
+    },
+  })
 
   const { mutate: createQuestion } = useMutation({
     mutationFn: (payload: CreateGroupQuestionPayload) =>
       createGroupQuestion(payload),
     onSuccess: () => {
       onClose()
-      setQuestionContent('')
     },
     onError: () => {
       setErrorMessage('질문 생성에 실패하였습니다')
@@ -41,16 +52,12 @@ export const GroupQuestionCreateModal = ({
     },
   })
 
-  const handleCreateQuestion = () => {
-    if (!questionContent) {
-      setErrorMessage('질문을 입력해주세요')
-      onClose()
-      errorAlert.onOpen()
-      return
-    }
-
-    createQuestion({ groupId, content: questionContent })
-  }
+  useEffect(() => {
+    form.reset({
+      groupId,
+      content: '',
+    })
+  }, [groupId, form])
 
   return (
     <Box>
@@ -61,26 +68,17 @@ export const GroupQuestionCreateModal = ({
         title="그룹 질문 추가 요청"
         description="그룹에 새로운 질문을 요청해보세요"
         confirmButton={
-          <FormConfirmModalButton onClick={handleCreateQuestion}>
+          <FormConfirmModalButton
+            onClick={form.handleSubmit(() => {
+              createQuestion(form.getValues())
+            })}
+          >
             요청하기
           </FormConfirmModalButton>
         }
       >
         <Flex padding="0 10px" flexDirection="column" gap={3}>
-          <Text fontSize={14}>질문</Text>
-          <Textarea
-            rows={1}
-            resize="none"
-            whiteSpace="nowrap"
-            placeholder="100자 이내 입력"
-            value={questionContent}
-            onChange={(e) => setQuestionContent(e.target.value)}
-          />
-          <Box textAlign="center">
-            <Text fontSize="small" textColor="text_description">
-              요청한 질문은 수정하거나 취소할 수 없습니다
-            </Text>
-          </Box>
+          <CreateQuestionForm form={form} />
         </Flex>
       </FormModal>
 
diff --git a/src/pages/GroupPage/Profile/EditProfile/index.tsx b/src/pages/GroupPage/Profile/EditProfile/index.tsx
deleted file mode 100644
index 54fcdac1..00000000
--- a/src/pages/GroupPage/Profile/EditProfile/index.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { BiCheck, BiEditAlt } from 'react-icons/bi'
-
-import { Icon, IconButton } from '@chakra-ui/react'
-import { useMutation } from '@tanstack/react-query'
-
-import { modifyGroup } from '@/api/services/group/group.api'
-import { Group } from '@/types'
-
-interface EditProfileProps {
-  isEditing: boolean
-  setIsEditing: (isEditing: boolean) => void
-  groupInfo: Pick<Group, 'groupId' | 'groupName' | 'groupDescription'>
-}
-
-export const EditProfile = ({
-  isEditing,
-  setIsEditing,
-  groupInfo,
-}: EditProfileProps) => {
-  const { mutate } = useMutation({
-    mutationFn: () =>
-      modifyGroup({
-        groupId: groupInfo.groupId,
-        groupName: groupInfo.groupName,
-        description: groupInfo.groupDescription,
-      }),
-  })
-
-  if (isEditing)
-    return (
-      <IconButton
-        aria-label="Editting"
-        icon={<Icon as={BiCheck} boxSize="12px" />}
-        borderRadius="20px"
-        minWidth="20px"
-        width="20px"
-        height="20px"
-        padding="0"
-        border="1px solid"
-        borderColor="black.400"
-        onClick={() => {
-          setIsEditing(!isEditing)
-          mutate()
-        }}
-      />
-    )
-
-  return (
-    <IconButton
-      aria-label="Edit"
-      icon={<Icon as={BiEditAlt} boxSize="10px" />}
-      borderRadius="20px"
-      minWidth="20px"
-      width="20px"
-      height="20px"
-      padding="0"
-      border="1px solid"
-      borderColor="black.400"
-      onClick={() => setIsEditing(!isEditing)}
-    />
-  )
-}
diff --git a/src/pages/GroupPage/Profile/index.tsx b/src/pages/GroupPage/Profile/index.tsx
deleted file mode 100644
index 136b4c9f..00000000
--- a/src/pages/GroupPage/Profile/index.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import { useEffect, useState } from 'react'
-
-import { Avatar, Box, HStack, Input, Text, VStack } from '@chakra-ui/react'
-
-import { Group, GroupRole } from '@/types'
-
-import { EditProfile } from './EditProfile'
-
-type GroupProps = {
-  gprofile: Group
-  role: GroupRole
-}
-
-export default function Profile({ role, gprofile }: GroupProps) {
-  const [isEditing, setIsEditing] = useState(false)
-  const [groupNameInput, setGroupNameInput] = useState('')
-  const [groupDescriptionInput, setGroupDescriptionInput] = useState('')
-
-  useEffect(() => {
-    setIsEditing(false)
-    setGroupNameInput(gprofile.groupName)
-    setGroupDescriptionInput(gprofile.groupDescription)
-  }, [gprofile])
-
-  return (
-    <header>
-      <Box position="relative" marginBottom="10px">
-        <HStack
-          alignItems="center"
-          spacing="15px"
-          paddingLeft="25px"
-          marginTop="30px"
-        >
-          <Box position="relative">
-            <Avatar
-              src={gprofile?.groupdImageUrl}
-              width="70px"
-              height="70px"
-              sx={{
-                border: '0.8px solid',
-                borderColor: 'black.300',
-              }}
-            />
-          </Box>
-          <VStack align="flex-start" spacing={0}>
-            <HStack spacing={2} alignItems="center">
-              {isEditing ? (
-                <Input
-                  value={groupNameInput}
-                  onChange={(e) => setGroupNameInput(e.target.value)}
-                  fontSize="xl"
-                  width="180px"
-                  textColor="black.500"
-                  border="none"
-                  _focus={{ color: 'black.800' }}
-                  padding="0"
-                  height="auto"
-                  lineHeight="normal"
-                  verticalAlign="middle"
-                />
-              ) : (
-                <Text fontSize="xl">{gprofile.groupName}</Text>
-              )}
-              <Text
-                fontSize="xs"
-                padding="3px 6px"
-                borderRadius="8px"
-                border="1px solid"
-                borderColor="primary"
-                fontWeight="bold"
-                color="primary"
-              >
-                {role === 'LEADER' ? '그룹장' : '그룹원'}
-              </Text>
-            </HStack>
-
-            <HStack spacing={2} alignItems="center">
-              {isEditing ? (
-                <Input
-                  value={groupDescriptionInput}
-                  onChange={(e) => setGroupDescriptionInput(e.target.value)}
-                  color="text_secondary"
-                  fontSize="md"
-                  width="320px"
-                  textColor="black.500"
-                  border="none"
-                  _focus={{ color: 'black.800' }}
-                  padding="0"
-                  height="auto"
-                  lineHeight="normal"
-                  verticalAlign="middle"
-                />
-              ) : (
-                <Text color="text_secondary" fontSize="md">
-                  {gprofile.groupDescription}
-                </Text>
-              )}
-              {role === 'LEADER' && (
-                <EditProfile
-                  isEditing={isEditing}
-                  setIsEditing={(isEdit) => setIsEditing(isEdit)}
-                  groupInfo={{
-                    groupId: gprofile.groupId,
-                    groupName: groupNameInput,
-                    groupDescription: groupDescriptionInput,
-                  }}
-                />
-              )}
-            </HStack>
-          </VStack>
-        </HStack>
-      </Box>
-    </header>
-  )
-}
diff --git a/src/pages/GroupPage/index.tsx b/src/pages/GroupPage/index.tsx
index 86676340..1e56b8f1 100644
--- a/src/pages/GroupPage/index.tsx
+++ b/src/pages/GroupPage/index.tsx
@@ -1,9 +1,13 @@
 import { Suspense } from 'react'
+import { ErrorBoundary } from 'react-error-boundary'
 import { Link, useParams } from 'react-router-dom'
 
 import { Box, Button, Card, Flex, Image, Text } from '@chakra-ui/react'
 
-import { useGroupInfo, useGroupRanking } from '@/api/services/group/group.api'
+import {
+  useGroupInfoSuspense,
+  useGroupRanking,
+} from '@/api/services/group/group.api'
 import { useGroupRole } from '@/api/services/group/member.api'
 import sadCookie from '@/assets/sadCookie.svg'
 import { Cookies } from '@/components/Cookies'
@@ -13,9 +17,9 @@ import ErrorPage from '@/pages/ErrorPage'
 import { colors } from '@/styles/colors'
 
 import { ExitGroupButton } from './ExitGroupButton'
+import { GroupProfile } from './GroupProfile'
 import Management from './Management'
 import Navigate from './Navigate'
-import Profile from './Profile'
 import { useRankingData } from './Ranking'
 
 export default function GroupPage() {
@@ -26,9 +30,11 @@ export default function GroupPage() {
   return (
     <div>
       <Navigate />
-      <Suspense fallback={<Loading />}>
-        <GroupSection groupId={Number(groupId)} />
-      </Suspense>
+      <ErrorBoundary fallback>
+        <Suspense fallback={<Loading />}>
+          <GroupSection groupId={Number(groupId)} />
+        </Suspense>
+      </ErrorBoundary>
     </div>
   )
 }
@@ -41,18 +47,16 @@ const GroupSection = ({ groupId }: GroupSectionProps) => {
   const { data: rankData } = useGroupRanking({
     groupId,
   })
-  const { data: groupData } = useGroupInfo(groupId)
+  const { data: groupData } = useGroupInfoSuspense(groupId)
   const { data: role } = useGroupRole(groupId)
 
   const rankingData = useRankingData(rankData)
 
-  if (!groupData || !role || !rankData) return <ErrorPage />
-
   const rankLength = rankingData.length === 0
 
   return (
     <Flex flexDirection="column">
-      <Profile role={role} gprofile={groupData} />
+      <GroupProfile group={groupData} role={role} />
       <Flex justifyContent="center" paddingY={3}>
         <Card
           width="full"
diff --git a/src/pages/Layout/MainLayout/GroupSection/GroupList/index.tsx b/src/pages/Layout/MainLayout/GroupSection/GroupList/index.tsx
index ec26b91b..ea456b05 100644
--- a/src/pages/Layout/MainLayout/GroupSection/GroupList/index.tsx
+++ b/src/pages/Layout/MainLayout/GroupSection/GroupList/index.tsx
@@ -1,14 +1,18 @@
+import { useNavigate } from 'react-router-dom'
+
 import { Flex } from '@chakra-ui/react'
 
 import { useGroupPaging } from '@/api/services/group/group.api'
 import { ActiveBrownBox } from '@/components/ActiveBrownBox'
-import { AvatarLabelWithNavigate } from '@/components/AvatarLabelWithNavigate'
+import { AvatarLabel } from '@/components/AvatarLabel'
 import { IntersectionObserverLoader } from '@/components/IntersectionObserverLoader'
 import { DATA_ERROR_MESSAGES } from '@/constants/error-message'
 import { useMemberTypeStore } from '@/stores/member-type'
 import { useSelectedGroupStore } from '@/stores/selected-group'
 
 export const GroupList = () => {
+  const navigate = useNavigate()
+
   const { data, hasNextPage, isFetchingNextPage, fetchNextPage } =
     useGroupPaging({ size: 8 })
 
@@ -33,12 +37,12 @@ export const GroupList = () => {
           onClick={() => {
             setSeletedGroup(group)
             setMemberType('GROUP')
+            navigate(`/group/${group.groupId}`)
           }}
         >
-          <AvatarLabelWithNavigate
-            avatarSrc={group.groupdImageUrl}
+          <AvatarLabel
+            avatarSrc={group.groupImageUrl}
             label={group.groupName}
-            linkTo={`/group/${group.groupId}`}
           />
         </ActiveBrownBox>
       ))}
diff --git a/src/pages/Layout/MainLayout/MemberSection/FriendSection/index.tsx b/src/pages/Layout/MainLayout/MemberSection/FriendSection/index.tsx
index 1eda9dc3..23fadc81 100644
--- a/src/pages/Layout/MainLayout/MemberSection/FriendSection/index.tsx
+++ b/src/pages/Layout/MainLayout/MemberSection/FriendSection/index.tsx
@@ -1,13 +1,17 @@
+import { useNavigate } from 'react-router-dom'
+
 import { Box, Center, Flex, Text } from '@chakra-ui/react'
 import { useSuspenseQuery } from '@tanstack/react-query'
 
 import { friendsQueries } from '@/api/services/friend/queries'
-import { AvatarLabelWithNavigate } from '@/components/AvatarLabelWithNavigate'
+import { AvatarLabel } from '@/components/AvatarLabel'
 import { PageLayout } from '@/components/PageLayout'
 
 import { FriendHeader, FriendHeaderSkeleton } from './FriendHeader'
 
 export const FriendSection = () => {
+  const navigate = useNavigate()
+
   const { data: friends } = useSuspenseQuery(friendsQueries.myFriends())
 
   return (
@@ -19,16 +23,13 @@ export const FriendSection = () => {
         {friends.map((friend) => (
           <Box
             key={friend.friendId}
-            paddingY={1}
+            paddingY={1.5}
             paddingX={2}
             width="full"
             _hover={{ cursor: 'pointer', background: 'brown.50' }}
+            onClick={() => navigate(`/mypage/${friend.friendId}`)}
           >
-            <AvatarLabelWithNavigate
-              avatarSrc={friend.imageUrl}
-              label={friend.name}
-              linkTo={`/mypage/${friend.friendId}`}
-            />
+            <AvatarLabel avatarSrc={friend.imageUrl} label={friend.name} />
           </Box>
         ))}
       </Flex>
diff --git a/src/pages/Layout/MainLayout/MemberSection/GroupMemberSection/index.tsx b/src/pages/Layout/MainLayout/MemberSection/GroupMemberSection/index.tsx
index d9bf7804..378154e6 100644
--- a/src/pages/Layout/MainLayout/MemberSection/GroupMemberSection/index.tsx
+++ b/src/pages/Layout/MainLayout/MemberSection/GroupMemberSection/index.tsx
@@ -1,9 +1,10 @@
 import { BiSolidGroup } from 'react-icons/bi'
+import { useNavigate } from 'react-router-dom'
 
 import { Box, Flex } from '@chakra-ui/react'
 
 import { useGrupMemberPagingSuspense } from '@/api/services/group/member.api'
-import { AvatarLabelWithNavigate } from '@/components/AvatarLabelWithNavigate'
+import { AvatarLabel } from '@/components/AvatarLabel'
 import { PageLayout } from '@/components/PageLayout'
 import { DATA_ERROR_MESSAGES } from '@/constants/error-message'
 import { useMembersLengthStore } from '@/stores/members-length'
@@ -13,6 +14,8 @@ interface GroupMemberSectionProps {
 }
 
 export const GroupMemberSection = ({ groupId }: GroupMemberSectionProps) => {
+  const navigate = useNavigate()
+
   const { data } = useGrupMemberPagingSuspense({ groupId })
   const members = data?.pages.flatMap((page) => page.records)
   const membersLength = (data?.pages[0]?.records?.length ?? 0) - 1
@@ -31,15 +34,15 @@ export const GroupMemberSection = ({ groupId }: GroupMemberSectionProps) => {
         {members.map((member) => (
           <Box
             key={member.userId}
-            paddingY={1}
+            paddingY={1.5}
             paddingX={2}
             width="full"
             _hover={{ cursor: 'pointer', background: 'brown.50' }}
+            onClick={() => navigate(`/mypage/${member.userId}`)}
           >
-            <AvatarLabelWithNavigate
+            <AvatarLabel
               avatarSrc={member.memberImageUrl}
               label={member.userName}
-              linkTo={`/mypage/${member.userId}`}
             />
           </Box>
         ))}
diff --git a/src/pages/Layout/MainLayout/MemberSection/SelectFriendSection/MemberList/index.tsx b/src/pages/Layout/MainLayout/MemberSection/SelectFriendSection/MemberList/index.tsx
index 57fcc273..b0c8d083 100644
--- a/src/pages/Layout/MainLayout/MemberSection/SelectFriendSection/MemberList/index.tsx
+++ b/src/pages/Layout/MainLayout/MemberSection/SelectFriendSection/MemberList/index.tsx
@@ -2,7 +2,7 @@ import { BiCircle, BiSolidCheckCircle } from 'react-icons/bi'
 
 import { Box, Flex } from '@chakra-ui/react'
 
-import { AvatarLabelWithNavigate } from '@/components/AvatarLabelWithNavigate'
+import { AvatarLabel } from '@/components/AvatarLabel'
 import { useFriendStore } from '@/stores/friends'
 import { Friend } from '@/types'
 
@@ -23,10 +23,7 @@ export const MemberList = ({ members, isFriend }: MemberListProps) => {
           justifyContent="space-between"
           paddingY={1.5}
         >
-          <AvatarLabelWithNavigate
-            avatarSrc={member.imageUrl}
-            label={member.name}
-          />
+          <AvatarLabel avatarSrc={member.imageUrl} label={member.name} />
           {isFriend ? (
             <Box
               _hover={{ color: 'black.800', cursor: 'pointer' }}
diff --git a/src/pages/MyPage/MyProfile/ProfileForm/index.tsx b/src/pages/MyPage/MyProfile/ProfileForm/index.tsx
new file mode 100644
index 00000000..d2de5625
--- /dev/null
+++ b/src/pages/MyPage/MyProfile/ProfileForm/index.tsx
@@ -0,0 +1,131 @@
+import { useEffect, useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { BiCheck, BiCheckCircle, BiEditAlt } from 'react-icons/bi'
+
+import { Center, Flex, Input, Text, useDisclosure } from '@chakra-ui/react'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useMutation } from '@tanstack/react-query'
+
+import { queryClient } from '@/api/instance'
+import { patchProfileDescription } from '@/api/services/profile/my-page.api'
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from '@/components/Form'
+import { AlertModal } from '@/components/Modal/AlertModal'
+import { ModifyProfileFields, ModifyProfileSchema } from '@/schema/profile'
+import { useMyUserIdStore } from '@/stores/my-user-id'
+import { colors } from '@/styles/colors'
+
+interface ProfileFormProps {
+  description: string
+}
+
+export const ProfileForm = ({ description }: ProfileFormProps) => {
+  const userId = useMyUserIdStore((state) => state.myUserId)
+  const form = useForm<ModifyProfileFields>({
+    resolver: zodResolver(ModifyProfileSchema),
+    mode: 'onChange',
+    defaultValues: {
+      description,
+    },
+  })
+  const [isEdit, setIsEdit] = useState(false)
+  const successModal = useDisclosure()
+
+  const { mutate: modifyDescription } = useMutation({
+    mutationFn: (data: { description: string }) =>
+      patchProfileDescription(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['myPage', userId] })
+      successModal.onOpen()
+    },
+  })
+
+  useEffect(() => {
+    form.reset({
+      description,
+    })
+    setIsEdit(false)
+  }, [description, form])
+
+  const handleModifyProfile = form.handleSubmit(() => {
+    modifyDescription(form.getValues())
+    setIsEdit(!isEdit)
+  })
+
+  const onClickEditButton = () => {
+    if (!isEdit) {
+      setIsEdit(!isEdit)
+      return
+    }
+
+    handleModifyProfile()
+  }
+
+  return (
+    <Form {...form}>
+      <form>
+        <Flex justifyContent="space-between" alignItems="start" gap={2}>
+          {isEdit ? (
+            <FormField
+              control={form.control}
+              name="description"
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <Input
+                      value={field.value}
+                      onChange={field.onChange}
+                      color="text_secondary"
+                      fontSize="md"
+                      width="320px"
+                      textColor="black.500"
+                      border="none"
+                      _focus={{ color: 'black.800' }}
+                      padding="0"
+                      height="auto"
+                      borderRadius="none"
+                      borderBottom={`1.5px solid ${colors.brown[400]}`}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          ) : (
+            <Text color="text_secondary" fontSize="md">
+              {description}
+            </Text>
+          )}
+          <Center
+            borderRadius="full"
+            width="20px"
+            height="20px"
+            background="brown.200"
+            color="brown.600"
+            border={`1.5px solid ${colors.brown[400]}`}
+            _hover={{ cursor: 'pointer', background: 'brown.300' }}
+            marginTop="2px"
+            onClick={onClickEditButton}
+          >
+            {isEdit ? <BiCheck size="18px" /> : <BiEditAlt size="13px" />}
+          </Center>
+        </Flex>
+      </form>
+      <AlertModal
+        isOpen={successModal.isOpen}
+        onClose={() => {
+          successModal.onClose()
+          setIsEdit(false)
+        }}
+        icon={<BiCheckCircle />}
+        title="한 줄 소개를 수정했습니다."
+        description=""
+      />
+    </Form>
+  )
+}
diff --git a/src/pages/MyPage/MyProfile/ProfileImage/index.tsx b/src/pages/MyPage/MyProfile/ProfileImage/index.tsx
new file mode 100644
index 00000000..0a1bb620
--- /dev/null
+++ b/src/pages/MyPage/MyProfile/ProfileImage/index.tsx
@@ -0,0 +1,129 @@
+import { ChangeEvent, useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { BiError } from 'react-icons/bi'
+
+import { Avatar, Box, Button, Input, useDisclosure } from '@chakra-ui/react'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useMutation } from '@tanstack/react-query'
+
+import { queryClient } from '@/api/instance'
+import { uploadProfileBg } from '@/api/services/profile/my-page.api'
+import { Form, FormControl, FormField, FormItem } from '@/components/Form'
+import { AlertModal } from '@/components/Modal/AlertModal'
+import {
+  ModifyBackgroundImageField,
+  ModifyBackgroundImageSchema,
+} from '@/schema/profile'
+import { useMyUserIdStore } from '@/stores/my-user-id'
+
+interface ProfileImageProps {
+  backgroundImage: string
+  profileImage: string
+}
+
+export const ProfileImage = ({
+  backgroundImage,
+  profileImage,
+}: ProfileImageProps) => {
+  const userId = useMyUserIdStore((state) => state.myUserId)
+
+  const form = useForm<ModifyBackgroundImageField>({
+    resolver: zodResolver(ModifyBackgroundImageSchema),
+    mode: 'onSubmit',
+    defaultValues: {
+      image: new File([], ''),
+    },
+  })
+
+  const [errorMessage, setErrorMessage] = useState('')
+  const errorModal = useDisclosure()
+
+  const { mutate: uploadImage } = useMutation({
+    mutationFn: (data: { image: File }) => uploadProfileBg(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['myPage', userId] })
+      window.location.reload()
+    },
+  })
+
+  const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files ? e.target.files[0] : null
+
+    if (file) {
+      form.setValue('image', file)
+      form.handleSubmit(
+        () => {
+          uploadImage(form.getValues())
+        },
+        (errors) => {
+          const errorMessages =
+            Object.values(errors).flatMap((error) => error.message)[0] || ''
+
+          setErrorMessage(errorMessages)
+          errorModal.onOpen()
+        }
+      )()
+    }
+  }
+
+  return (
+    <Box
+      height="144px"
+      backgroundImage={`url('${backgroundImage}')`}
+      backgroundSize="cover"
+      backgroundPosition="center"
+      position="relative"
+      marginBottom="40px"
+    >
+      <Form {...form}>
+        <form>
+          <Button
+            aria-label="Edit"
+            borderRadius={3}
+            minWidth="20px"
+            maxHeight="25px"
+            padding="5px 8px"
+            position="absolute"
+            right="23px"
+            top="10px"
+            fontSize="small"
+            fontWeight="400"
+            color="GrayText"
+            border="0.4px solid"
+            borderColor="black.700"
+            bg="white"
+            onClick={() => document.getElementById('fileInput')?.click()}
+          >
+            Change Cover
+          </Button>
+          <FormField
+            control={form.control}
+            name="image"
+            render={() => (
+              <FormItem>
+                <FormControl>
+                  <Input
+                    id="fileInput"
+                    accept=".jpg, .jpeg, .png"
+                    type="file"
+                    multiple={false}
+                    display="none"
+                    onChange={handleFileChange}
+                  />
+                </FormControl>
+              </FormItem>
+            )}
+          />
+        </form>
+      </Form>
+      <Avatar src={profileImage} size="lg" position="absolute" bottom="-30px" />
+      <AlertModal
+        isOpen={errorModal.isOpen}
+        onClose={errorModal.onClose}
+        icon={<BiError />}
+        title={errorMessage}
+        description=""
+      />
+    </Box>
+  )
+}
diff --git a/src/pages/MyPage/MyProfile/VisitedTag/index.tsx b/src/pages/MyPage/MyProfile/VisitedTag/index.tsx
new file mode 100644
index 00000000..8999ecd2
--- /dev/null
+++ b/src/pages/MyPage/MyProfile/VisitedTag/index.tsx
@@ -0,0 +1,27 @@
+import { Text } from '@chakra-ui/react'
+
+interface VisitedTagProps {
+  today: number
+  total: number
+}
+
+export const VisitedTag = ({ today, total }: VisitedTagProps) => {
+  return (
+    <Text
+      as="span"
+      fontSize="xs"
+      display="flex"
+      flexDirection="row"
+      gap="4.8px"
+      padding="5px 9px"
+      borderRadius="10px"
+      border="1px solid"
+      borderColor="brown.500"
+    >
+      <Text fontWeight="bold">TODAY</Text>
+      <Text>{today}</Text>
+      <Text fontWeight="bold">TOTAL</Text>
+      <Text>{total}</Text>
+    </Text>
+  )
+}
diff --git a/src/pages/MyPage/MyProfile/index.tsx b/src/pages/MyPage/MyProfile/index.tsx
new file mode 100644
index 00000000..47ebc368
--- /dev/null
+++ b/src/pages/MyPage/MyProfile/index.tsx
@@ -0,0 +1,51 @@
+import { BiCheckCircle } from 'react-icons/bi'
+
+import { Flex, Text, useDisclosure } from '@chakra-ui/react'
+import { useSuspenseQuery } from '@tanstack/react-query'
+
+import { pointQuries } from '@/api/services/user/point.api'
+import { AlertModal } from '@/components/Modal/AlertModal'
+import { PointButton } from '@/components/PointButton'
+import { MyPageItem } from '@/types'
+
+import { ProfileForm } from './ProfileForm'
+import { ProfileImage } from './ProfileImage'
+import { VisitedTag } from './VisitedTag'
+
+interface MyProfileProps {
+  profile: MyPageItem
+}
+
+export const MyProfile = ({ profile }: MyProfileProps) => {
+  const successAlert = useDisclosure()
+
+  const { data: point } = useSuspenseQuery(pointQuries.point())
+
+  return (
+    <Flex flexDirection="column" padding="0 30px">
+      <ProfileImage
+        profileImage={profile.imageUrl}
+        backgroundImage={profile.backgroundImageUrl}
+      />
+      <Flex alignItems="center" gap="8px">
+        <Text fontSize="xl" fontWeight="400">
+          {profile.name}
+        </Text>
+        <PointButton point={point} />
+      </Flex>
+      <Flex justifyContent="space-between" alignItems="end" gap={4}>
+        <ProfileForm description={profile.description} />
+        <VisitedTag today={profile.todayVisited} total={profile.totalVisited} />
+      </Flex>
+      <AlertModal
+        isOpen={successAlert.isOpen}
+        onClose={() => {
+          successAlert.onClose()
+        }}
+        icon={<BiCheckCircle />}
+        title="한 줄 소개를 수정하였습니다"
+        description=""
+      />
+    </Flex>
+  )
+}
diff --git a/src/pages/MyPage/OvenMenu/index.tsx b/src/pages/MyPage/OvenMenu/index.tsx
index 142b8542..1a2ef152 100644
--- a/src/pages/MyPage/OvenMenu/index.tsx
+++ b/src/pages/MyPage/OvenMenu/index.tsx
@@ -7,7 +7,7 @@ import { CardButton } from '@/components/CardButton'
 
 type OvenMenuProps = {
   isMyPage: boolean
-  userId: string | undefined
+  userId: number
 }
 
 export default function OvenMenu({ userId, isMyPage }: OvenMenuProps) {
diff --git a/src/pages/MyPage/Profile/index.tsx b/src/pages/MyPage/Profile/index.tsx
deleted file mode 100644
index 1d9698cd..00000000
--- a/src/pages/MyPage/Profile/index.tsx
+++ /dev/null
@@ -1,259 +0,0 @@
-import { useState } from 'react'
-import { BiCheck, BiCheckCircle, BiEditAlt, BiError } from 'react-icons/bi'
-
-import {
-  Avatar,
-  Box,
-  Button,
-  Flex,
-  Icon,
-  IconButton,
-  Input,
-  Text,
-  useDisclosure,
-  useToast,
-} from '@chakra-ui/react'
-import { useMutation } from '@tanstack/react-query'
-
-import { queryClient } from '@/api/instance'
-import {
-  patchProfileDescription,
-  uploadProfileBg,
-} from '@/api/services/profile/my-page.api'
-import { AlertModal } from '@/components/Modal/AlertModal'
-import { PointButton } from '@/components/PointButton'
-import { MyPageItem } from '@/types'
-
-type ProfileProps = {
-  profile: MyPageItem
-  pointAmount?: number
-  isMyPage: boolean
-  userId: number
-}
-
-export default function Profile({
-  profile,
-  pointAmount,
-  isMyPage,
-  userId,
-}: ProfileProps) {
-  const toast = useToast()
-  const [isHovered, setIsHovered] = useState(false)
-  const [file, setFile] = useState<File | null>(null)
-  const errorAlert = useDisclosure()
-  const successAlert = useDisclosure()
-  const [isEditing, setIsEditing] = useState(false)
-  const [errorMessage, setErrorMessage] = useState<string>('')
-  const [profileDescription, setProfileDescription] = useState<string>(
-    profile.description
-  )
-
-  const { mutate: uploadImage } = useMutation({
-    mutationFn: (data: { image: File }) => uploadProfileBg(data),
-    onSuccess: () => {
-      queryClient.refetchQueries({
-        queryKey: ['myPage', userId],
-      })
-      queryClient.invalidateQueries({ queryKey: ['uploadImage'] })
-      window.location.reload()
-    },
-    onError: () => {},
-  })
-
-  const { mutate: modifyDescription } = useMutation({
-    mutationFn: (data: { description: string }) =>
-      patchProfileDescription(data),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['modifyDescription'] })
-      setIsEditing(false)
-      successAlert.onOpen()
-    },
-    onError: () => {
-      setErrorMessage('한 줄 소개 수정에 실패하였습니다')
-      setIsEditing(false)
-      errorAlert.onOpen()
-    },
-  })
-
-  const openFilePicker = () => {
-    document.getElementById('fileInput')?.click()
-  }
-
-  const onChangeFile = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const selectedFile = event.target.files?.[0]
-    if (selectedFile) {
-      const validTypes = ['image/jpeg', 'image/jpg', 'image/png']
-      const maxFileSize = 10 * 1024 * 1024
-      if (!validTypes.includes(selectedFile.type)) {
-        toast({
-          title: 'Only JPEG, JPG, or PNG files are allowed.',
-          status: 'warning',
-          duration: 3000,
-          isClosable: true,
-        })
-        return
-      }
-      if (selectedFile.size > maxFileSize) {
-        setErrorMessage('이미지 파일은 10MB를 초과할 수 없습니다')
-        errorAlert.onOpen()
-        return
-      }
-      setFile(selectedFile)
-      console.log(file)
-      uploadImage({ image: selectedFile })
-    }
-  }
-
-  const handleEditClick = () => {
-    setIsEditing(true)
-  }
-
-  const handleSaveClick = async () => {
-    if (profileDescription) {
-      await modifyDescription({ description: profileDescription })
-    }
-  }
-
-  return (
-    <header>
-      <Box
-        height="144px"
-        backgroundImage={`url('${profile.backgroundImageUrl}')`}
-        backgroundSize="cover"
-        backgroundPosition="center"
-        position="relative"
-        marginBottom="40px"
-        onMouseEnter={() => setIsHovered(true)}
-        onMouseLeave={() => setIsHovered(false)}
-      >
-        {isMyPage && isHovered && (
-          <Button
-            aria-label="Edit"
-            borderRadius={3}
-            minWidth="20px"
-            maxHeight="25px"
-            padding="5px 8px"
-            position="absolute"
-            right="23px"
-            top="10px"
-            fontSize="small"
-            fontWeight="400"
-            color="GrayText"
-            border="0.4px solid"
-            borderColor="black.700"
-            bg="white"
-            onClick={openFilePicker}
-          >
-            Change Cover
-          </Button>
-        )}
-        <Input
-          type="file"
-          id="fileInput"
-          style={{ display: 'none' }}
-          accept="image/*"
-          onChange={onChangeFile}
-        />
-        <Avatar
-          src={profile.imageUrl}
-          size="lg"
-          position="absolute"
-          bottom="-30px"
-          left="30px"
-        />
-      </Box>
-      <Box padding="0 30px">
-        <Box display="flex" flexDirection="row" alignItems="center" gap="8px">
-          <Text fontSize="xl" fontWeight="400">
-            {profile.name}
-          </Text>
-          {pointAmount !== undefined && <PointButton point={pointAmount} />}
-        </Box>
-        <Box
-          display="flex"
-          flexDirection="row"
-          width="100%"
-          justifyContent="space-between"
-          alignItems="end"
-        >
-          <Flex>
-            {isEditing ? (
-              <Input
-                value={profileDescription}
-                onChange={(e) => setProfileDescription(e.target.value)}
-                color="text_secondary"
-                fontSize="md"
-                width="320px"
-                textColor="black.500"
-                border="none"
-                _focus={{ color: 'black.800' }}
-                padding="0"
-                height="auto"
-                lineHeight="normal"
-                verticalAlign="middle"
-                borderBottom="1px solid gray"
-              />
-            ) : (
-              <Text color="text_secondary" fontSize="md">
-                {profileDescription}
-              </Text>
-            )}
-            {isMyPage && (
-              <IconButton
-                aria-label="Edit"
-                icon={
-                  isEditing ? (
-                    <Icon as={BiCheck} boxSize="12px" />
-                  ) : (
-                    <Icon as={BiEditAlt} boxSize="10px" />
-                  )
-                }
-                borderRadius="20px"
-                minWidth="20px"
-                width="20px"
-                height="20px"
-                padding="0"
-                marginLeft={3}
-                border="1px solid"
-                borderColor="black.400"
-                onClick={isEditing ? handleSaveClick : handleEditClick}
-              />
-            )}
-          </Flex>
-          <Text
-            as="span"
-            fontSize="xs"
-            display="flex"
-            flexDirection="row"
-            gap="4.8px"
-            padding="5px 9px"
-            borderRadius="10px"
-            border="1px solid"
-            borderColor="brown.500"
-          >
-            <Text fontWeight="bold">TODAY</Text>
-            <Text>{profile.todayVisited}</Text>
-            <Text fontWeight="bold">TOTAL</Text>
-            <Text>{profile.totalVisited}</Text>
-          </Text>
-        </Box>
-      </Box>
-      <AlertModal
-        isOpen={errorAlert.isOpen}
-        onClose={errorAlert.onClose}
-        icon={<BiError />}
-        title={errorMessage}
-        description=""
-      />
-      <AlertModal
-        isOpen={successAlert.isOpen}
-        onClose={() => {
-          successAlert.onClose()
-        }}
-        icon={<BiCheckCircle />}
-        title="한 줄 소개를 수정하였습니다"
-        description=""
-      />
-    </header>
-  )
-}
diff --git a/src/pages/MyPage/Ranking/index.tsx b/src/pages/MyPage/Ranking/index.tsx
index 7ec9ba29..274aa1cc 100644
--- a/src/pages/MyPage/Ranking/index.tsx
+++ b/src/pages/MyPage/Ranking/index.tsx
@@ -11,7 +11,7 @@ import ErrorPage from '@/pages/ErrorPage'
 import { RankItem } from '@/types'
 
 type RankingProps = {
-  userId: string
+  userId: number
 }
 
 const images = ['', cookie1, cookie2, cookie3]
diff --git a/src/pages/MyPage/UserProfile/index.tsx b/src/pages/MyPage/UserProfile/index.tsx
new file mode 100644
index 00000000..8a9e7576
--- /dev/null
+++ b/src/pages/MyPage/UserProfile/index.tsx
@@ -0,0 +1,53 @@
+import { Avatar, Box, Flex, Text } from '@chakra-ui/react'
+
+import { MyPageItem } from '@/types'
+
+interface UserProfileProps {
+  profile: MyPageItem
+}
+
+export const UserProfile = ({ profile }: UserProfileProps) => {
+  return (
+    <Flex flexDirection="column" padding="0 30px">
+      <Box
+        height="144px"
+        backgroundImage={`url('${profile.backgroundImageUrl}')`}
+        backgroundSize="cover"
+        backgroundPosition="center"
+        position="relative"
+        marginBottom="40px"
+      >
+        <Avatar
+          src={profile.imageUrl}
+          size="lg"
+          position="absolute"
+          bottom="-30px"
+        />
+      </Box>
+      <Text fontSize="xl" fontWeight="400">
+        {profile.name}
+      </Text>
+      <Flex justifyContent="space-between" alignItems="end" gap={4}>
+        <Text color="text_secondary" fontSize="md">
+          {profile.description}
+        </Text>
+        <Text
+          as="span"
+          fontSize="xs"
+          display="flex"
+          flexDirection="row"
+          gap="4.8px"
+          padding="5px 9px"
+          borderRadius="10px"
+          border="1px solid"
+          borderColor="brown.500"
+        >
+          <Text fontWeight="bold">TODAY</Text>
+          <Text>{profile.todayVisited}</Text>
+          <Text fontWeight="bold">TOTAL</Text>
+          <Text>{profile.totalVisited}</Text>
+        </Text>
+      </Flex>
+    </Flex>
+  )
+}
diff --git a/src/pages/MyPage/index.tsx b/src/pages/MyPage/index.tsx
index 165e295d..bd6c1857 100644
--- a/src/pages/MyPage/index.tsx
+++ b/src/pages/MyPage/index.tsx
@@ -1,60 +1,52 @@
+import { Suspense } from 'react'
 import { useParams } from 'react-router-dom'
 
-import { useQuery } from '@tanstack/react-query'
+import { Flex } from '@chakra-ui/react'
 
-import { useMyPage } from '@/api/services/profile/my-page.api'
-import { pointQuries } from '@/api/services/user/point.api'
+import { useMyPageSuspense } from '@/api/services/profile/my-page.api'
 import { Loading } from '@/components/Loading'
 import { useMyUserIdStore } from '@/stores/my-user-id'
 
-import ErrorPage from '../ErrorPage'
+import { MyProfile } from './MyProfile'
 import Navigate from './Navigate'
 import OvenMenu from './OvenMenu'
-import Profile from './Profile'
 import Ranking from './Ranking'
+import { UserProfile } from './UserProfile'
 
 export default function MyPage() {
   const { userId } = useParams<{ userId: string }>()
   const myUserId = useMyUserIdStore((state) => state.myUserId)
 
-  const {
-    data: profile,
-    isLoading: isLoadingProfile,
-    isError: profileError,
-  } = useMyPage(userId || '')
-
-  const isMyPage = Number(userId) === myUserId
-
-  const {
-    data: point,
-    isLoading: isLoadingPoints,
-    error: pointsError,
-  } = useQuery(pointQuries.point())
-
-  if (isLoadingProfile || (isMyPage && isLoadingPoints)) return <Loading />
-  if (profileError || (isMyPage && pointsError)) return <ErrorPage />
-  if (!profile) return <ErrorPage />
-  if (!userId) return <ErrorPage />
-
   return (
-    <div>
+    <Flex flexDirection="column">
       <Navigate />
-      {isMyPage && point !== undefined ? (
-        <Profile
-          profile={profile}
-          pointAmount={point}
-          isMyPage={isMyPage}
+      <Suspense fallback={<Loading />}>
+        <MyPageSection
           userId={Number(userId)}
+          isMyPage={Number(userId) === myUserId}
         />
+      </Suspense>
+    </Flex>
+  )
+}
+
+interface MyPageSectionProps {
+  userId: number
+  isMyPage: boolean
+}
+
+const MyPageSection = ({ userId, isMyPage }: MyPageSectionProps) => {
+  const { data: profile } = useMyPageSuspense(userId)
+
+  return (
+    <Flex flexDirection="column">
+      {isMyPage ? (
+        <MyProfile profile={profile} />
       ) : (
-        <Profile
-          profile={profile}
-          isMyPage={isMyPage}
-          userId={Number(userId)}
-        />
+        <UserProfile profile={profile} />
       )}
       <Ranking userId={userId} />
       <OvenMenu userId={userId} isMyPage={isMyPage} />
-    </div>
+    </Flex>
   )
 }
diff --git a/src/pages/ProfileQuestionPage/WriteReply/index.tsx b/src/pages/ProfileQuestionPage/WriteReply/index.tsx
index 554dd692..d29f2fb8 100644
--- a/src/pages/ProfileQuestionPage/WriteReply/index.tsx
+++ b/src/pages/ProfileQuestionPage/WriteReply/index.tsx
@@ -1,8 +1,9 @@
-// components/WriteReply.tsx
 import { useState } from 'react'
+import { useForm } from 'react-hook-form'
 import { BiCheckCircle, BiError } from 'react-icons/bi'
 
 import { Button, Flex, Textarea, useDisclosure } from '@chakra-ui/react'
+import { zodResolver } from '@hookform/resolvers/zod'
 import { useMutation } from '@tanstack/react-query'
 
 import { queryClient } from '@/api/instance'
@@ -10,7 +11,12 @@ import {
   PostProfileAnswerRequest,
   postProfileAnswer,
 } from '@/api/services/profile/profile-question.api'
+import { Form, FormControl, FormField, FormItem } from '@/components/Form'
 import { AlertModal } from '@/components/Modal/AlertModal'
+import {
+  AnswerProfileQuestionField,
+  AnswerProfileQuestionSchema,
+} from '@/schema/profile'
 
 interface WriteReplyProps {
   userId: number
@@ -18,12 +24,20 @@ interface WriteReplyProps {
 }
 
 export default function WriteReply({ userId, questionId }: WriteReplyProps) {
-  const [replyContent, setReplyContent] = useState('')
   const [errorMessage, setErrorMessage] = useState('')
 
   const errorAlert = useDisclosure()
   const successAlert = useDisclosure()
 
+  const form = useForm<AnswerProfileQuestionField>({
+    resolver: zodResolver(AnswerProfileQuestionSchema),
+    mode: 'onSubmit',
+    defaultValues: {
+      content: '',
+      profileQuestionId: questionId,
+    },
+  })
+
   const { mutate: submitReply } = useMutation({
     mutationFn: ({ content, profileQuestionId }: PostProfileAnswerRequest) =>
       postProfileAnswer({ content, profileQuestionId }),
@@ -32,7 +46,6 @@ export default function WriteReply({ userId, questionId }: WriteReplyProps) {
       queryClient.refetchQueries({
         queryKey: ['profileAnswer', userId, questionId],
       })
-      setReplyContent('')
     },
     onError: () => {
       setErrorMessage('답변 전송에 실패하였습니다')
@@ -40,18 +53,16 @@ export default function WriteReply({ userId, questionId }: WriteReplyProps) {
     },
   })
 
-  const handleSend = () => {
-    if (!replyContent.trim()) {
-      setErrorMessage('내용을 입력해주세요')
+  const handleSend = form.handleSubmit(
+    () => submitReply(form.getValues()),
+    (errors) => {
+      const errorMessages =
+        Object.values(errors).flatMap((error) => error.message)[0] || ''
+
+      setErrorMessage(errorMessages)
       errorAlert.onOpen()
-      return
     }
-
-    submitReply({
-      content: replyContent,
-      profileQuestionId: questionId,
-    })
-  }
+  )
 
   return (
     <Flex
@@ -63,31 +74,45 @@ export default function WriteReply({ userId, questionId }: WriteReplyProps) {
       borderLeftColor="brown.400"
       marginTop="auto"
     >
-      <Textarea
-        value={replyContent}
-        onChange={(e) => setReplyContent(e.target.value)}
-        width="100%"
-        height="auto"
-        variant="unstyled"
-        padding="0"
-        margin="5px"
-        placeholder="메시지 입력"
-      />
-      <Flex justifyContent="end" height="29px" margin="14px 0">
-        <Button
-          onClick={handleSend}
-          marginRight="15px"
-          borderRadius={20}
-          width="90px"
-          height="30px"
-          bg="brown.400"
-          fontSize="small"
-          _hover={{ boxShadow: 'md' }}
-          _active={{ bg: 'brown.500' }}
-        >
-          전송
-        </Button>
-      </Flex>
+      <Form {...form}>
+        <form>
+          <FormField
+            control={form.control}
+            name="content"
+            render={({ field }) => (
+              <FormItem>
+                <FormControl>
+                  <Textarea
+                    value={field.value}
+                    onChange={field.onChange}
+                    width="100%"
+                    height="auto"
+                    variant="unstyled"
+                    padding="0"
+                    margin="5px"
+                    placeholder="메시지 입력"
+                  />
+                </FormControl>
+              </FormItem>
+            )}
+          />
+          <Flex justifyContent="end" height="29px" margin="14px 0">
+            <Button
+              onClick={handleSend}
+              marginRight="15px"
+              borderRadius={20}
+              width="90px"
+              height="30px"
+              bg="brown.400"
+              fontSize="small"
+              _hover={{ boxShadow: 'md' }}
+              _active={{ bg: 'brown.500' }}
+            >
+              전송
+            </Button>
+          </Flex>
+        </form>
+      </Form>
       <AlertModal
         isOpen={errorAlert.isOpen}
         onClose={errorAlert.onClose}
diff --git a/src/schema/create-group.ts b/src/schema/create-group.ts
deleted file mode 100644
index ad6859c2..00000000
--- a/src/schema/create-group.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { z } from 'zod'
-
-export const CreateGroupSchema = z.object({
-  groupName: z
-    .string()
-    .min(1, { message: '그룹명을 입력해주세요' })
-    .max(10, { message: '그룹명은 10자 이내로 작성해주세요' }),
-  groupDescription: z
-    .string()
-    .min(1, { message: '그룹 설명을 입력해주세요' })
-    .max(30, { message: '그룹 설명은 30자 이내로 작성해주세요' }),
-})
-
-export type CreateGroupFields = z.infer<typeof CreateGroupSchema>
diff --git a/src/schema/group.ts b/src/schema/group.ts
new file mode 100644
index 00000000..08903cc5
--- /dev/null
+++ b/src/schema/group.ts
@@ -0,0 +1,47 @@
+import { z } from 'zod'
+
+export const CreateGroupSchema = z.object({
+  groupName: z
+    .string()
+    .min(1, { message: '그룹명을 입력해주세요' })
+    .max(10, { message: '그룹명은 10자 이내로 작성해주세요' }),
+  groupDescription: z
+    .string()
+    .min(1, { message: '그룹 설명을 입력해주세요' })
+    .max(20, { message: '그룹 설명은 20자 이내로 작성해주세요' }),
+})
+
+export type CreateGroupFields = z.infer<typeof CreateGroupSchema>
+
+export const ModifyGroupSchema = z.object({
+  groupId: z.number(),
+  groupName: z
+    .string()
+    .min(1, { message: '그룹명을 입력해주세요' })
+    .max(10, { message: '그룹명은 10자 이내로 작성해주세요' }),
+  description: z
+    .string()
+    .min(1, { message: '그룹 설명을 입력해주세요' })
+    .max(20, { message: '그룹 설명은 20자 이내로 작성해주세요' }),
+})
+
+export type ModifyGroupFields = z.infer<typeof ModifyGroupSchema>
+
+export const CreateQuestionSchema = z.object({
+  groupId: z.number(),
+  content: z
+    .string()
+    .min(1, { message: '질문 내용을 입력해주세요' })
+    .max(25, { message: '질문을 25자 이내로 작성해주세요' }),
+})
+
+export type CreateQuestionFields = z.infer<typeof CreateQuestionSchema>
+
+export const ModifyGroupImageSchema = z.object({
+  groupId: z.number(),
+  image: z.instanceof(File).refine((f) => f.size < 5000000, {
+    message: '이미지 파일 크기는 5MB 이하만 가능합니다.',
+  }),
+})
+
+export type ModifyGroupImageFields = z.infer<typeof ModifyGroupImageSchema>
diff --git a/src/schema/profile.ts b/src/schema/profile.ts
new file mode 100644
index 00000000..b05dc6bb
--- /dev/null
+++ b/src/schema/profile.ts
@@ -0,0 +1,32 @@
+import { z } from 'zod'
+
+export const ModifyProfileSchema = z.object({
+  description: z
+    .string()
+    .min(1, { message: '한 줄 소개를 입력해주세요' })
+    .max(20, { message: '한 줄 소개는 20자 이내로 작성해주세요' }),
+})
+
+export type ModifyProfileFields = z.infer<typeof ModifyProfileSchema>
+
+export const ModifyBackgroundImageSchema = z.object({
+  image: z.instanceof(File).refine((f) => f.size < 5000000, {
+    message: '이미지 파일 크기는 5MB 이하만 가능합니다.',
+  }),
+})
+
+export type ModifyBackgroundImageField = z.infer<
+  typeof ModifyBackgroundImageSchema
+>
+
+export const AnswerProfileQuestionSchema = z.object({
+  content: z
+    .string()
+    .min(1, { message: '답변을 입력해주세요' })
+    .max(50, { message: '답변은 50자이내로 입력해주세요' }),
+  profileQuestionId: z.number(),
+})
+
+export type AnswerProfileQuestionField = z.infer<
+  typeof AnswerProfileQuestionSchema
+>
diff --git a/src/types/index.ts b/src/types/index.ts
index 92ca3cad..7bbce45f 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -8,7 +8,7 @@ export type Friend = {
 export type Group = {
   groupId: number
   groupName: string
-  groupdImageUrl: string
+  groupImageUrl: string
   groupDescription: string
 }