diff --git a/src/components/manage-user/UserManage.tsx b/src/components/manage-user/UserManage.tsx
new file mode 100644
index 0000000..035e596
--- /dev/null
+++ b/src/components/manage-user/UserManage.tsx
@@ -0,0 +1,123 @@
+import { Box } from "@mui/material";
+import Table from "../reuse/table/Table";
+import { customColors } from "../../styles/base/Variable.style";
+import { UserTableColumn } from "../../interface/UserManage.interface";
+import { useState } from "react";
+import SearchInput from "../reuse/input/SearchInput";
+
+export default function UserManage() {
+  const [search, setSearch] = useState<string>("");
+  const [page, setPage] = useState<number>(0);
+  const [rowCount, setRowCount] = useState<number>(100); // 데이터 개수 = 총 회원가입자 수
+
+  /* 표 제목 및 포맷 설정 */
+  const tablecolumns: UserTableColumn[] = [
+    {
+      id: "nickname",
+      label: "닉네임",
+      minWidth: 150,
+      align: "center",
+    },
+    { id: "account", label: "계정", minWidth: 120 },
+    {
+      id: "join_date",
+      label: "제목",
+      minWidth: 150,
+    },
+    {
+      id: "review",
+      label: "리뷰 / 지점 / 이벤트",
+      minWidth: 150,
+      align: "center",
+    },
+    {
+      id: "withdrawal_date",
+      label: "탈퇴일",
+      minWidth: 120,
+    },
+  ];
+
+  const tablerows = Array.from({ length: 100 }, (unused, index) => ({
+    nickname: "C02",
+    account: "jsee53@gmail.com",
+    join_date: "2023/10/21",
+    review: `${index + 1} / ${index + 2} / ${index + 3}`,
+    withdrawal_date: "9999/99/99",
+  }));
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        justifyContent: "center",
+        margin: "40px 0px 40px 0px",
+        minWidth: "65vw",
+      }}
+    >
+      <Box sx={{ width: "70%" }}>
+        <Box
+          sx={{
+            display: "flex",
+            width: "100%",
+            justifyContent: "space-between",
+          }}
+        >
+          <Box sx={{ display: "flex" }}>
+            <Box
+              sx={{
+                fontWeight: "600",
+                borderColor: `${customColors.color_border_gray}`,
+                borderBottom: "none",
+                padding: "13px 10px 5px 10px",
+                borderRadius: "10px 10px 0 0",
+                backgroundColor: `${customColors.main}`,
+                fontSize: "18px",
+              }}
+            >
+              사용자 관리
+            </Box>
+            <Box
+              sx={{
+                fontWeight: "600",
+                borderColor: `${customColors.color_border_gray}`,
+                borderBottom: "none",
+                padding: "13px 10px 5px 10px",
+                borderRadius: "10px 10px 0 0",
+                backgroundColor: `${customColors.main}`,
+                fontSize: "18px",
+              }}
+            >
+              알림 전송
+            </Box>
+          </Box>
+
+          <Box sx={{ display: "flex", gap: "50px" }}>
+            <SearchInput search={search} setSearch={setSearch} />
+          </Box>
+        </Box>
+        <Table
+          columns={tablecolumns}
+          rows={tablerows}
+          page={page}
+          setPage={setPage}
+        />
+      </Box>
+      <Box
+        sx={{
+          display: "flex",
+          justifyContent: "center",
+          margin: "50px 40px 0 40px",
+          border: "2px solid",
+          borderColor: `${customColors.main}`,
+          borderRadius: "10px",
+          padding: "10px",
+          alignItems: "center",
+          height: "40px",
+          fontSize: "18px",
+        }}
+      >
+        <Box>총 회원가입자 수 : {rowCount}</Box>
+      </Box>
+    </Box>
+  );
+}
diff --git a/src/components/manage-user/UserManageForm.tsx b/src/components/manage-user/UserManageForm.tsx
index 02bf336..9a1542c 100644
--- a/src/components/manage-user/UserManageForm.tsx
+++ b/src/components/manage-user/UserManageForm.tsx
@@ -1,24 +1,13 @@
 import SideBar from "../reuse/sidebar/SideBar";
-import UserManageTable from "./UserManageTable";
 import Box from "@mui/material/Box";
+import UserManage from "./UserManage";
 
 // 유저 관리 페이지
 export default function UserManageForm() {
-  // 임의의 100개의 사용자 데이터 배열 생성
-  const userData = Array.from({ length: 100 }, () => ({
-    nickname: "C02",
-    email: "jsee53@gmail.com",
-    join_date: "2023/10/21",
-    review: "1",
-    branch: "2",
-    event: "3",
-    withdrawal_date: "9999/99/99",
-  }));
-
   return (
     <Box sx={{ display: "flex" }}>
       <SideBar />
-      <UserManageTable data={userData} />
+      <UserManage />
     </Box>
   );
 }
diff --git a/src/components/manage-user/UserManageTable.tsx b/src/components/manage-user/UserManageTable.tsx
deleted file mode 100644
index 00e8e1d..0000000
--- a/src/components/manage-user/UserManageTable.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import Box from "@mui/material/Box";
-import Paper from "@mui/material/Paper";
-import Table from "@mui/material/Table";
-import TableHead from "@mui/material/TableHead";
-import TableBody from "@mui/material/TableBody";
-import TableRow from "@mui/material/TableRow";
-import TableCell from "@mui/material/TableCell";
-import TablePagination from "@mui/material/TablePagination"; // 페이지네이션 추가
-import { useState } from "react";
-
-import { UserManageTableType } from "../../interface/UserManage.interface";
-
-export default function UserManageTable({
-  data,
-}: {
-  data: UserManageTableType[];
-}) {
-  // 페이지네이션 상태
-  const [page, setPage] = useState(0);
-  const [rowsPerPage, setRowsPerPage] = useState(10); // 한 페이지에 보여줄 데이터 수
-
-  // 페이지 변경 시 호출
-  const handleChangePage = (event: unknown, newPage: number) => {
-    setPage(newPage);
-  };
-
-  // 한 페이지에 보여줄 데이터 수 변경 시 호출
-  const handleChangeRowsPerPage = (
-    event: React.ChangeEvent<HTMLInputElement>
-  ) => {
-    setRowsPerPage(parseInt(event.target.value, 10));
-    setPage(0); // 페이지네이션을 다시 0 페이지로 리셋
-  };
-
-  return (
-    <Box sx={{ marginTop: 0, marginLeft: 10 }}>
-      <Paper
-        sx={{
-          borderRadius: 2,
-          border: "1px solid red",
-          padding: 2,
-          width: 800,
-        }}
-      >
-        <Table sx={{ borderSpacing: 5 }}>
-          <TableHead>
-            <TableRow sx={{ backgroundColor: "#F1F1F1", color: "white" }}>
-              <TableCell>인덱스</TableCell>
-              <TableCell>닉네임</TableCell>
-              <TableCell>계정</TableCell>
-              <TableCell>가입일</TableCell>
-              <TableCell>리뷰 / 지점 / 이벤트</TableCell>
-              <TableCell>탈퇴일</TableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {data
-              .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
-              .map((user, index) => (
-                <TableRow
-                  key={index}
-                  sx={{
-                    backgroundColor: "#F1F1F1",
-                    color: "white",
-                    borderRadius: 10,
-                    marginBottom: 10,
-                  }}
-                >
-                  <TableCell>{index + 1 + page * rowsPerPage}</TableCell>
-                  <TableCell>{user.nickname}</TableCell>
-                  <TableCell>{user.email}</TableCell>
-                  <TableCell>{user.join_date}</TableCell>
-                  <TableCell>
-                    {user.review} / {user.branch} / {user.event}
-                  </TableCell>
-                  <TableCell>{user.withdrawal_date}</TableCell>
-                </TableRow>
-              ))}
-          </TableBody>
-        </Table>
-        <TablePagination
-          component="div"
-          count={data.length}
-          page={page}
-          onPageChange={handleChangePage}
-          rowsPerPage={rowsPerPage}
-          onRowsPerPageChange={handleChangeRowsPerPage}
-        />
-      </Paper>
-    </Box>
-  );
-}
diff --git a/src/interface/UserManage.interface.ts b/src/interface/UserManage.interface.ts
index ccb45e0..70c93dd 100644
--- a/src/interface/UserManage.interface.ts
+++ b/src/interface/UserManage.interface.ts
@@ -1,9 +1,9 @@
-export interface UserManageTableType {
-  nickname: string;
-  email: string;
-  join_date: string;
-  review: string;
-  branch: string;
-  event: string;
-  withdrawal_date: string;
+import { jsx } from "@emotion/react";
+
+export interface UserTableColumn {
+  id: "nickname" | "account" | "join_date" | "review" | "withdrawal_date";
+  label: string;
+  minWidth?: number;
+  align?: "right" | "left" | "center" | "inherit" | "justify" | undefined;
+  format?: (value: string) => jsx.JSX.Element;
 }
diff --git a/src/interface/reuse/Table.interface.ts b/src/interface/reuse/Table.interface.ts
index ac9b1fa..b509544 100644
--- a/src/interface/reuse/Table.interface.ts
+++ b/src/interface/reuse/Table.interface.ts
@@ -4,7 +4,7 @@ export interface TableProps {
   columns: Column[];
   // 사용하는 컴포넌트 추가할떄 마다 타입 추가 해야함
   // ex) rows: EventRow[] | UserRow[] | BranchRow[]
-  rows: EventRow[];
+  rows: EventRow[] | UserRow[];
   page: number;
   setPage: React.Dispatch<React.SetStateAction<number>>;
 }
@@ -28,3 +28,13 @@ interface EventRow {
   term: string;
   hashtag: string;
 }
+
+/* UserManage 표 데이터 */
+interface UserRow {
+  [id: string]: string | number;
+  nickname: string;
+  account: string;
+  join_date: string;
+  review: string;
+  withdrawal_date: string;
+}