diff --git a/src/app/panel/OthersProfile.tsx b/src/app/panel/OthersProfile.tsx
index 99645a4c2..fd718bcc5 100644
--- a/src/app/panel/OthersProfile.tsx
+++ b/src/app/panel/OthersProfile.tsx
@@ -1,7 +1,9 @@
 'use client'
 
+import ReportModal from '@/components/ReportModal'
 import { Box, Button, Popover, Typography } from '@mui/material'
 import { MouseEvent, ReactNode, useState } from 'react'
+import useModal from '@/hook/useModal'
 
 interface IOthersProfile {
   name: string
@@ -11,6 +13,7 @@ interface IOthersProfile {
 
 const OthersProfile = ({ name, userId, children }: IOthersProfile) => {
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null)
+  const { isOpen, openModal, closeModal } = useModal()
 
   const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
     setAnchorEl(event.currentTarget)
@@ -55,9 +58,14 @@ const OthersProfile = ({ name, userId, children }: IOthersProfile) => {
           <Typography>아이디: {userId}</Typography>
           <Button>프로필 보기</Button>
           <Button>쪽지 보내기</Button>
-          <Button>신고하기</Button>
+          <Button onClick={openModal}>신고하기</Button>
         </Box>
       </Popover>
+      <ReportModal
+        isModalOpen={isOpen}
+        handleClose={closeModal}
+        targetId={userId}
+      />
     </div>
   )
 }
diff --git a/src/app/report/page.tsx b/src/app/report/page.tsx
deleted file mode 100644
index 3c7e14b2b..000000000
--- a/src/app/report/page.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react'
-import ReportForm from './panel/ReportForm'
-import { Typography, Container } from '@mui/material'
-
-const Report = () => {
-  return (
-    <Container sx={{ width: '100%', padding: '20px' }}>
-      <Typography>신고하기 페이지</Typography>
-      <ReportForm />
-    </Container>
-  )
-}
-
-export default Report
diff --git a/src/app/report/panel/ReportForm.tsx b/src/app/report/panel/ReportForm.tsx
deleted file mode 100644
index 57abc07d7..000000000
--- a/src/app/report/panel/ReportForm.tsx
+++ /dev/null
@@ -1,143 +0,0 @@
-'use client'
-import React, { useState } from 'react'
-import { Box, Typography, Button } from '@mui/material'
-import { useSearchParams } from 'next/navigation'
-import { useForm, Controller, SubmitHandler } from 'react-hook-form'
-import CuTextFieldLabel from '@/components/CuTextFieldLabel'
-import CuTextField from '@/components/CuTextField'
-import useAxiosWithAuth from '@/api/config'
-import { useRouter } from 'next/navigation'
-import ReportTypeSelect from './ReportTypeSelect'
-
-interface IReportFormInput {
-  targetUrl: string
-  reportType: string
-  content: string
-}
-
-const ReportForm = () => {
-  const [isSubmitting, setIsSubmitting] = useState(false)
-  const router = useRouter()
-  const useParams = useSearchParams()
-  // 모집글, 사용자 등 신고 종류 구분
-  const targetUrl = useParams.get('url')
-  //console.log(targetUrl)
-  // 신고 대상의 id(글, 사용자)
-
-  const axiosInstance = useAxiosWithAuth()
-
-  const onSubmit: SubmitHandler<IReportFormInput> = (data) => {
-    console.log(data)
-    setIsSubmitting(true)
-    axiosInstance
-      .post(`/report`, {
-        data,
-      })
-      .then((res) => {
-        console.log(res)
-      })
-      .catch((error) => {
-        console.log(error.message)
-      })
-    setIsSubmitting(false)
-  }
-
-  const {
-    handleSubmit,
-    control,
-    formState: { errors },
-  } = useForm<IReportFormInput>({
-    defaultValues: {
-      targetUrl: targetUrl ? targetUrl : '',
-      reportType: '',
-      content: '',
-    },
-  })
-
-  return (
-    <Box
-      component="form"
-      onSubmit={handleSubmit(onSubmit)}
-      sx={{ display: 'flex', flexDirection: 'column', gap: '10px' }}
-    >
-      <Controller
-        name="targetUrl"
-        control={control}
-        rules={{
-          required: '유효하지 않은 신고요청입니다',
-        }}
-        render={({ field }) => (
-          <>
-            <Box sx={{ display: 'flex', alignItems: 'center' }}>
-              <CuTextFieldLabel htmlFor="targetUrl" style={{ width: '120px' }}>
-                신고 대상 url
-              </CuTextFieldLabel>
-              <CuTextField
-                {...field}
-                id="targetUrl"
-                style={{ width: 'calc(100% - 120px)' }}
-                disabled
-              />
-            </Box>
-            {errors.targetUrl && (
-              <Typography>{errors.targetUrl?.message}</Typography>
-            )}
-          </>
-        )}
-      />
-      <Controller
-        name="reportType"
-        control={control}
-        rules={{
-          required: '신고의 유형을 선택해주세요',
-        }}
-        render={({ field }) => (
-          <>
-            <ReportTypeSelect
-              field={field}
-              label="신고 유형"
-              options={['광고', '유해 컨텐츠', '혐오 조장', '기타']}
-            />
-            {errors.reportType && (
-              <Typography>{errors.reportType?.message}</Typography>
-            )}
-          </>
-        )}
-      />
-      <Controller
-        name="content"
-        control={control}
-        rules={{
-          required: '신고 내용을 작성해주세요',
-        }}
-        render={({ field }) => (
-          <Box>
-            <CuTextFieldLabel
-              htmlFor="content"
-              style={{ marginBottom: '10px' }}
-            >
-              신고 내용
-            </CuTextFieldLabel>
-            <CuTextField
-              {...field}
-              id="content"
-              style={{ width: '100%' }}
-              placeholder="신고 내용을 작성해주세요"
-              multiline
-              rows={5}
-            />
-            {errors.content && (
-              <Typography>{errors.content.message}</Typography>
-            )}
-          </Box>
-        )}
-      />
-      <Button onClick={() => router.back()}>취소하기</Button>
-      <Button type="submit" disabled={isSubmitting}>
-        신고하기
-      </Button>
-    </Box>
-  )
-}
-
-export default ReportForm
diff --git a/src/components/ReportModal.tsx b/src/components/ReportModal.tsx
new file mode 100644
index 000000000..d0b3bf768
--- /dev/null
+++ b/src/components/ReportModal.tsx
@@ -0,0 +1,151 @@
+import CuModal from './CuModal'
+import React, { useState } from 'react'
+import { useForm, Controller, SubmitHandler } from 'react-hook-form'
+import CuTextFieldLabel from '@/components/CuTextFieldLabel'
+import CuTextField from '@/components/CuTextField'
+import useAxiosWithAuth from '@/api/config'
+import { Box, Typography } from '@mui/material'
+import ReportTypeSelect from '@/components/ReportTypeSelect'
+import useToast from '@/hook/useToast'
+import IToastProps from '@/types/IToastProps'
+
+interface IReportModalProps {
+  isModalOpen: boolean
+  handleClose: () => void
+  targetId: string
+}
+
+interface IReportFormInput {
+  userId: string
+  type: string
+  content: string
+}
+
+const ReportModal = ({
+  isModalOpen,
+  handleClose,
+  targetId,
+}: IReportModalProps) => {
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [toastProps, setToastProps] = useState<IToastProps>({
+    severity: 'info',
+    message: '',
+  })
+  const { CuToast, isOpen, openToast, closeToast } = useToast()
+
+  const axiosInstance = useAxiosWithAuth()
+  const {
+    handleSubmit,
+    control,
+    formState: { errors },
+  } = useForm<IReportFormInput>({
+    defaultValues: {
+      userId: targetId ? targetId : '',
+      type: '',
+      content: '',
+    },
+  })
+
+  const onSubmit: SubmitHandler<IReportFormInput> = (data) => {
+    //console.log(data)
+    setIsSubmitting(true)
+    axiosInstance
+      .post(`api/v1/report`, data)
+      .then(() => {
+        setToastProps({
+          severity: 'success',
+          message: '신고가 접수되었습니다.',
+        })
+        handleClose()
+        openToast()
+      })
+      .catch((error) => {
+        if (error.response.status !== 401) {
+          setToastProps({
+            severity: 'error',
+            message: '신고 접수 중 오류가 발생했습니다.',
+          })
+          openToast()
+        }
+      })
+    setIsSubmitting(false)
+  }
+
+  return (
+    <>
+      <CuModal
+        open={isModalOpen}
+        onClose={handleClose}
+        title={'신고하기'}
+        mobileFullSize
+        containedButton={{
+          text: isSubmitting ? '제출 중' : '완료',
+          type: 'submit',
+          form: 'report-form',
+        }}
+        textButton={{
+          text: '취소',
+          onClick: handleClose,
+        }}
+      >
+        <Box sx={{ height: '100%', justifyContent: 'flex-start' }}>
+          <form id="report-form" onSubmit={handleSubmit(onSubmit)}>
+            <Controller
+              name="type"
+              control={control}
+              rules={{
+                required: '신고의 유형을 선택해주세요',
+              }}
+              render={({ field }) => (
+                <>
+                  <ReportTypeSelect field={field} label="신고 유형" />
+                  <Typography color="error" variant="Caption">
+                    {errors.type?.message || '\u00A0'}
+                  </Typography>
+                </>
+              )}
+            />
+            <Controller
+              name="content"
+              control={control}
+              rules={{
+                required: '신고 내용을 작성해주세요',
+              }}
+              render={({ field }) => (
+                <Box>
+                  <CuTextFieldLabel
+                    htmlFor="content"
+                    style={{ marginBottom: '10px' }}
+                  >
+                    <Typography variant="Body2">
+                      이 유저를 신고하시겠습니까?
+                    </Typography>
+                  </CuTextFieldLabel>
+                  <CuTextField
+                    {...field}
+                    id="content"
+                    style={{ width: '100%' }}
+                    placeholder="신고하는 이유를 적어주세요."
+                    multiline
+                    rows={5}
+                  />
+                  <Typography color="error" variant="Caption">
+                    {errors.content?.message || '\u00A0'}
+                  </Typography>
+                </Box>
+              )}
+            />
+          </form>
+        </Box>
+      </CuModal>
+      <CuToast
+        open={isOpen}
+        message={toastProps.message}
+        severity={toastProps.severity}
+        onClose={closeToast}
+      />
+    </>
+  )
+}
+
+export default ReportModal
diff --git a/src/app/report/panel/ReportTypeSelect.tsx b/src/components/ReportTypeSelect.tsx
similarity index 66%
rename from src/app/report/panel/ReportTypeSelect.tsx
rename to src/components/ReportTypeSelect.tsx
index 6197ef0b8..7040aacd0 100644
--- a/src/app/report/panel/ReportTypeSelect.tsx
+++ b/src/components/ReportTypeSelect.tsx
@@ -1,27 +1,24 @@
 import React from 'react'
-import { Select, MenuItem, Box } from '@mui/material'
+import { Select, MenuItem, Box, Typography } from '@mui/material'
 import CuTextFieldLabel from '@/components/CuTextFieldLabel'
 
 interface IReportTypeSelectProps {
   field: any
   label: string
-  options: string[]
 }
 
-const ReportTypeSelect = ({
-  field,
-  label,
-  options,
-}: IReportTypeSelectProps) => {
+const ReportTypeSelect = ({ field, label }: IReportTypeSelectProps) => {
+  const options = ['광고', '비방', '선전성', '도배', '기타']
   return (
     <Box style={{ display: 'flex', alignItems: 'center' }}>
       <CuTextFieldLabel htmlFor={field.name} style={{ width: '120px' }}>
-        {label}
+        <Typography variant="Body2">{label}</Typography>
       </CuTextFieldLabel>
       <Select
         labelId={`${field.name}-label`}
         {...field}
         sx={{ width: '200px' }}
+        placeholder="신고 유형을 선택해주세요."
       >
         {options.map((option) => (
           <MenuItem key={option} value={option}>