diff --git a/src/assets/data/fields.ts b/src/assets/data/fields.ts
index 608e2fb..1ab5a02 100644
--- a/src/assets/data/fields.ts
+++ b/src/assets/data/fields.ts
@@ -7,7 +7,8 @@ export const SEMESTER = 'semester';
 export const MILEAGE = 'mileage';
 export const ISVISIBLE = 'isVisible';
 export const REGISTERED_DATE = 'registeredDate';
-export const TITLE = 'title';
+// export const TITLE = 'title';
+export const ITEM = 'item';
 export const NAME = 'name';
 export const POINT = 'point';
 export const DESCRIPTION = 'description';
diff --git a/src/components/board/MileageItem.tsx b/src/components/board/MileageItem.tsx
new file mode 100644
index 0000000..b3f6920
--- /dev/null
+++ b/src/components/board/MileageItem.tsx
@@ -0,0 +1,109 @@
+import EnhancedTable from "../common/CustomTable";
+import { MILEAGE, ISVISIBLE, REGISTERED_DATE ,MANAGE, CHECK_BOX, NUM, CATEGORY ,SEMESTER, ITEM} from 'src/assets/data/fields';
+
+export default function MileageItem(){ 
+   
+
+/**
+ * @breif [마일리지 카테고리] 게시판
+ */
+
+export enum MileageItemBoard {
+    'NUM' = NUM,
+    'CATEGORY' = CATEGORY,
+    'SEMESTER' = SEMESTER,
+    'ITEM' = ITEM,
+    'MILEAGE' = MILEAGE,
+    'ISVISIBLE' = ISVISIBLE,
+    'REGISTERED_DATE'= REGISTERED_DATE,
+    'MANAGE' = MANAGE,
+    'CHECK_BOX' = CHECK_BOX,
+  }
+  
+  /**
+   * @kind 마일리지 카테로리
+   * @breif 데이터 인터페이스
+   */
+  interface Data {
+    [MileageItemBoard.CATEGORY]: string;
+    [MileageItemBoard.MAX_MILEAGE]: number;
+    [MileageItemBoard.MANAGE]: string;
+    [MileageItemBoard.CHECK_BOX]: string;
+  }
+  
+  /**
+   * @kind 마일리지 카테고리
+   * @brief 데이터 생성 함수
+   *
+   *  */
+  function createData(
+    num: number,
+    category: string,
+    maxMileage: number,
+    manage: string,
+    checkBox: string
+  ): Data {
+    return {
+      [MileageCategoryBoard.NUM]: num,
+      [MileageCategoryBoard.CATEGORY]: category,
+      [MileageCategoryBoard.MAX_MILEAGE]: maxMileage,
+      [MileageCategoryBoard.MANAGE]: manage,
+      [MileageCategoryBoard.CHECK_BOX]: checkBox,
+    };
+  }
+  
+  /**
+   * @number 1번 헤더
+   * @description 마일리지 카테고리 리스트
+   */
+  const headCells = [
+    {
+      id: [MileageCategoryBoard.NUM],
+      numeric: false,
+      disablePadding: true,
+      label: '번호',
+    },
+    {
+      id: [MileageCategoryBoard.CATEGORY],
+      numeric: true,
+      disablePadding: false,
+      label: '카테고리명',
+    },
+    {
+      id: [MileageCategoryBoard.MAX_MILEAGE],
+      numeric: true,
+      disablePadding: false,
+      label: '최대 마일리지',
+    },
+    {
+      id: [MileageCategoryBoard.MANAGE],
+      numeric: true,
+      disablePadding: false,
+      label: '관리',
+    },
+    {
+      id: [MileageCategoryBoard.CHECK_BOX],
+      numeric: true,
+      disablePadding: false,
+      label: '체크',
+    },
+  ];
+  
+  /**
+   * @number 1번 목록
+   * @description 마일리지 카테고리 리스트
+   */
+  
+  const rows = [
+    createData(1, '전공 마일리지', 7, '웹 서비스 캠프', <StarIcon />),
+    createData(2, '비교과 - 연구활동', 6, '웹 서비스 캠프', <StarIcon />),
+    createData(3, '비교과 - 전공활동', 6, '웹 서비스 캠프', <StarIcon />),
+    createData(4, '비교과 - 특강참여', 7, '웹 서비스 캠프', <StarIcon />),
+    createData(5, '비교과 - 학회활동', 6, '웹 서비스 캠프', <StarIcon />),
+    createData(6, '비교과 - 행사참여', 8, '웹 서비스 캠프', <StarIcon />),
+  ];
+
+    return (
+        <EnhancedTable type="마일리지 카테고리" rows={rows} headCells={headCells} />;
+    );
+}
\ No newline at end of file
diff --git a/src/components/common/Table/TableComponents.tsx b/src/components/common/Table/TableComponents.tsx
index b83515a..1ad44bc 100644
--- a/src/components/common/Table/TableComponents.tsx
+++ b/src/components/common/Table/TableComponents.tsx
@@ -1,6 +1,14 @@
 import { Board } from 'src/assets/data/board/board';
 import EnhancedTable from '../CustomTable';
 import MileageCategory from 'src/components/board/MileageCategory';
+import SearchIcon from '@mui/icons-material/Search';
+import InputIcon from '@mui/icons-material/Input';
+import AssignmentIndIcon from '@mui/icons-material/AssignmentInd';
+import Face6Icon from '@mui/icons-material/Face6';
+import PersonIcon from '@mui/icons-material/Person';
+import DonutSmallIcon from '@mui/icons-material/DonutSmall';
+import GavelIcon from '@mui/icons-material/Gavel';
+import SettingsIcon from '@mui/icons-material/Settings';
 
 export const ComponentReturn = (text) => {
   switch (text) {