diff --git a/frontend/dashboard/src/layouts/dashboard/navbar/NavConfig.tsx b/frontend/dashboard/src/layouts/dashboard/navbar/NavConfig.tsx
index 6ecadc09..7663ef6c 100644
--- a/frontend/dashboard/src/layouts/dashboard/navbar/NavConfig.tsx
+++ b/frontend/dashboard/src/layouts/dashboard/navbar/NavConfig.tsx
@@ -90,6 +90,13 @@ const navConfig = [
 
         ],
       },
+      {
+        title: 'MASTER',
+        children: [
+          { title: 'Diagnosis', path: '/master/diagnosis' },
+
+        ],
+      },
       {
         title: 'USER MANAGEMENT',
         path: '/users',
diff --git a/frontend/dashboard/src/pages/Corporates/DiagnosisExclusion/List.tsx b/frontend/dashboard/src/pages/Corporates/DiagnosisExclusion/List.tsx
index 71540108..aeba400e 100644
--- a/frontend/dashboard/src/pages/Corporates/DiagnosisExclusion/List.tsx
+++ b/frontend/dashboard/src/pages/Corporates/DiagnosisExclusion/List.tsx
@@ -283,8 +283,8 @@ export default function List(props: any) {
     id: number;
     status: number;
     code: string,
-    name: string, 
-    rules: string,            
+    name: string,
+    rules: string,
   };
   const plans = props?.data.map((plan: any) => {
     return {
@@ -576,32 +576,32 @@ export default function List(props: any) {
                 )}
             </TableCell>
 
-          <TableCell align="left">
-            <TableMoreMenu actions={
-                <>
-                    <MenuItem onClick={() => setOpen(!open)}>
-                        <FindInPageOutlined />
-                        Detail
-                    </MenuItem>
-                    <MenuItem onClick={() => navigate(`/corporates/${corporate_id}/diagnosis-exclusions/${row.id}/edit`)} >
-                        <EditOutlined />
-                        Edit
-                    </MenuItem>
-                    <MenuItem onClick={() => handleActivate(true, { 
-                        code: row.code,
-                        name: row.name, 
-                        rules: Object.keys(row.rules).length ? 'With Rules' : 'All',
-                        id:row.id, 
-                        status: row.active,
-                        service: row.service_code
-                        }) 
-                      } >
-                        <CachedIcon />
-                        Update Status
-                    </MenuItem>
-                </>
-            } />
-          </TableCell>
+            <TableCell align="left">
+                <TableMoreMenu actions={
+                    <>
+                        <MenuItem onClick={() => setOpen(!open)}>
+                            <FindInPageOutlined />
+                            Detail
+                        </MenuItem>
+                        <MenuItem onClick={() => navigate(`/corporates/${corporate_id}/diagnosis-exclusions/${row.id}/edit`)} >
+                            <EditOutlined />
+                            Edit
+                        </MenuItem>
+                        <MenuItem onClick={() => handleActivate(true, {
+                            code: row.code,
+                            name: row.name,
+                            rules: Object.keys(row.rules).length ? 'With Rules' : 'All',
+                            id:row.id,
+                            status: row.active,
+                            service: row.service_code
+                            })
+                        } >
+                            <CachedIcon />
+                            Update Status
+                        </MenuItem>
+                    </>
+                } />
+            </TableCell>
         </TableRow>
         {/* COLLAPSIBLE ROW */}
         <TableRow>
@@ -801,7 +801,7 @@ export default function List(props: any) {
 
   const onSubmit = async (row : any) => {
     try {
-      handleUpdate(dataValue.status, dataValue.id, row.reason) 
+      handleUpdate(dataValue.status, dataValue.id, row.reason)
     } catch (error: any) {
       console.log('data gagal');
     }
@@ -836,7 +836,7 @@ export default function List(props: any) {
     resolver: yupResolver(NewCorporateSchema),
   });
 
-  
+
   const {
       reset,
       handleSubmit,
@@ -924,7 +924,7 @@ export default function List(props: any) {
                 Cancel
             </Button>
 
-            {dataValue?.status == 1?  
+            {dataValue?.status == 1?
               <LoadingButton
                 sx={{ boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)'}}
                 type="submit"
@@ -936,7 +936,7 @@ export default function List(props: any) {
               >
               Inactive
             </LoadingButton>
-            : 
+            :
             <LoadingButton
               sx={{ boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)'}}
               type="submit"
@@ -948,12 +948,12 @@ export default function List(props: any) {
             >
             Active
           </LoadingButton>
-          
-            
+
+
             }
             </Stack>
         </Stack>
-        
+
         </FormProvider>
     </>
   );
@@ -1031,9 +1031,9 @@ export default function List(props: any) {
         <BasePagination paginationData={dataTableData} onPageChange={handlePageChange} />
       </Card>
 
-      <DialogUpdateStatus 
+      <DialogUpdateStatus
         openDialog={isDialogOpen}
-        setOpenDialog={setDialogOpen} 
+        setOpenDialog={setDialogOpen}
         title={titles}
         data={dataValue}
         description={dataDescription}
diff --git a/frontend/dashboard/src/pages/Master/Diagnosis/Index.tsx b/frontend/dashboard/src/pages/Master/Diagnosis/Index.tsx
index 495f9880..8defda2c 100644
--- a/frontend/dashboard/src/pages/Master/Diagnosis/Index.tsx
+++ b/frontend/dashboard/src/pages/Master/Diagnosis/Index.tsx
@@ -16,27 +16,26 @@ export default function Divisions() {
   return (
     <Page title={ pageTitle }>
 
-      <HeaderBreadcrumbs
-        heading={ pageTitle }
-        links={[
-          {
-            name: 'Master',
-            href: '/master/diagnosis-template',
-          },
-          {
-            name: 'Diagnosis Template',
-            href: '/master/diagnosis-template',
-          },
-          {
-            name: 'Diagnosis',
-            href: '/master/diagnosis-template',
-          },
-        ]}
-      />
-      
-      <Card>
+        <HeaderBreadcrumbs
+            heading={ pageTitle }
+            sx={{ px: 2 }}
+            links={[
+            {
+                name: 'Master',
+                href: '/master/diagnosis',
+            },
+            {
+                name: 'Diagnosis',
+                href: '/master/diagnosis',
+            },
+            {
+                name: 'Diagnosis',
+                href: '/master/diagnosis',
+            },
+            ]}
+        />
+
         <List />
-      </Card>
     </Page>
   );
 }
diff --git a/frontend/dashboard/src/pages/Master/Diagnosis/List.tsx b/frontend/dashboard/src/pages/Master/Diagnosis/List.tsx
index 15a62cf7..b65de80d 100644
--- a/frontend/dashboard/src/pages/Master/Diagnosis/List.tsx
+++ b/frontend/dashboard/src/pages/Master/Diagnosis/List.tsx
@@ -7,7 +7,7 @@ import UploadIcon from '@mui/icons-material/Upload';
 import CancelIcon from '@mui/icons-material/Cancel';
 import HistoryIcon from '@mui/icons-material/History';
 // hooks
-import { Link, NavLink as RouterLink } from 'react-router-dom';
+import { Link, NavLink as RouterLink, useNavigate } from 'react-router-dom';
 import React, { ChangeEvent, Component, useEffect, useRef, useState } from 'react';
 import useSettings from '../../../hooks/useSettings';
 import { useParams, useSearchParams } from 'react-router-dom';
@@ -17,13 +17,15 @@ import { LaravelPaginatedData } from '../../../@types/paginated-data';
 import { Icd } from '../../../@types/diagnosis';
 import BasePagination from '../../../components/BasePagination';
 import { enqueueSnackbar } from 'notistack';
+import TableMoreMenu from '@/components/table/TableMoreMenu';
 
 export default function List() {
-  const { themeStretch } = useSettings();
-  const { diagnosis_template_id } = useParams();
-  const [searchParams, setSearchParams] = useSearchParams();
-  const [importResult, setImportResult] = useState(null);
-  
+    const navigate = useNavigate();
+    const { themeStretch } = useSettings();
+    const { diagnosis_template_id } = useParams();
+    const [searchParams, setSearchParams] = useSearchParams();
+    const [importResult, setImportResult] = useState(null);
+
   function SearchInput(props: any) {
      // SEARCH
     const searchInput = useRef<HTMLInputElement>(null);
@@ -44,7 +46,7 @@ export default function List() {
     }, [searchParams])
 
     return (
-      <form onSubmit={handleSearchSubmit} style={{ width: '100%' }}>
+      <form onSubmit={handleSearchSubmit} style={{ width: '90%' }}>
         <TextField id="search-input" ref={searchInput} label="Search" variant="outlined" fullWidth onChange={handleSearchChange} value={searchText}/>
       </form>
     );
@@ -55,7 +57,7 @@ export default function List() {
     // Create Button Menu
     const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
     const createMenu = Boolean(anchorEl);
-    const importForm = useRef<HTMLInputElement>(null) 
+    const importForm = useRef<HTMLInputElement>(null)
     const [currentImportFileName, setCurrentImportFileName] = useState(null)
 
     const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -135,8 +137,8 @@ export default function List() {
           handleClose();
         })
     }
-    
-    
+
+
     return (
       <div>
         <input type='file' id='file' ref={importForm} style={{ display: 'none' }} onChange={handleImportChange} accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain" />
@@ -145,8 +147,8 @@ export default function List() {
           {/* <h1>kjasndkjandskjasndkjansdkjansd</h1> */}
           <Button
               id="import-button"
-              variant='outlined'
-              startIcon={<AddIcon />} sx={{ p: 1.8 }}
+              variant='contained'
+              startIcon={<AddIcon />} sx={{ p: 1.8, width: '200px' }}
               aria-controls={createMenu ? 'basic-menu' : undefined}
               aria-haspopup="true"
               aria-expanded={createMenu ? 'true' : undefined}
@@ -186,7 +188,7 @@ export default function List() {
           </Button>
         </Stack>
         )}
-        {( importResult && 
+        {( importResult &&
         <Stack direction={'row'} sx={{ px: 2, pb: 2 }}>
           <Box sx={{ color: "text.secondary" }}>Last Import Result Report : <a href={importResult.result_file?.url ?? "#"}>{importResult.result_file?.name ?? "-"}</a></Box>
         </Stack>
@@ -220,7 +222,7 @@ export default function List() {
               let updatedModel = model;
               if (row.id == model.id) {
                 updatedModel.active = res.data.icd.active;
-              } 
+              }
               return updatedModel;
             }),
           });
@@ -240,15 +242,22 @@ export default function List() {
 
     return (
       <React.Fragment>
-        <TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
-          <TableCell align="left">{row.code}</TableCell>
-          <TableCell align="left">{row.name}</TableCell>
-          <TableCell align="right">
-            {/* <Button variant="outlined" color="error" size="small">Disable</Button> */}
-            <Link to={`/master/diagnosis/${row.id}/diagnosis-history`}>
-                <HistoryIcon />
-              </Link>
-          </TableCell>
+        <TableRow sx={{ '& > *': { borderBottom: '1' } }}>
+            <TableCell align="left"/>
+            <TableCell align="left">{row.code}</TableCell>
+            <TableCell align="left">{row.name}</TableCell>
+            <TableCell align="right">
+                <Stack direction="row" justifyContent="flex-end" spacing={1}>
+                    <TableMoreMenu actions={
+                        <>
+                            <MenuItem onClick={() => navigate(`/master/diagnosis/${row.id}/diagnosis-history`)}>
+                                <HistoryIcon />
+                                History
+                            </MenuItem>
+                        </>
+                    } />
+                </Stack>
+            </TableCell>
         </TableRow>
       </React.Fragment>
     );
@@ -301,22 +310,29 @@ export default function List() {
   useEffect(() => {
     loadDataTableData();
   }, [])
-  
+
   return (
     <Stack>
       <ImportForm />
 
-        <Card>
         {/* The Main Table */}
-        <TableContainer component={Paper}>
+        <TableContainer component={Paper} sx={{ px: 1, mt: 3 }}>
           <Table aria-label="collapsible table">
-            <TableBody>
+            <colgroup>
+                <col width="20" />
+                <col width="250" />
+                <col width="*" />
+                <col width="50" />
+            </colgroup>
+
+            <TableHead>
               <TableRow>
+                <TableCell align="left" />
                 <TableCell style={headStyle} align="left">Code</TableCell>
                 <TableCell style={headStyle} align="left">Description</TableCell>
-                <TableCell style={headStyle} align="right">Action</TableCell>
+                <TableCell style={headStyle} align="right"></TableCell>
               </TableRow>
-            </TableBody>
+            </TableHead>
             {dataTableIsLoading ?
               (
                 <TableBody>
@@ -325,7 +341,7 @@ export default function List() {
                   </TableRow>
                 </TableBody>
               ) : (
-                dataTableData.data.length == 0 ? 
+                dataTableData.data.length == 0 ?
                 (
                   <TableBody>
                     <TableRow>
@@ -342,9 +358,8 @@ export default function List() {
             )}
           </Table>
         </TableContainer>
-        
+
         <BasePagination paginationData={dataTableData} onPageChange={handlePageChange}/>
-        </Card>
     </Stack>
   );
 }
diff --git a/frontend/dashboard/src/pages/Master/Diagnosis/Master/CreateUpdate.tsx b/frontend/dashboard/src/pages/Master/Diagnosis/Master/CreateUpdate.tsx
index 52c960bc..018f009a 100644
--- a/frontend/dashboard/src/pages/Master/Diagnosis/Master/CreateUpdate.tsx
+++ b/frontend/dashboard/src/pages/Master/Diagnosis/Master/CreateUpdate.tsx
@@ -24,8 +24,8 @@ export default function PlanCreate() {
   }, [configuredCorporateContext])
 
   const [ currentCorporatePlan, setCurrentCorporatePlan ] = useState<CorporatePlan>();
-  
-  
+
+
   const navigate = useNavigate();
 
   const isEdit = !!id;
@@ -48,6 +48,7 @@ export default function PlanCreate() {
   return (
     <Page title= "Master ICD - 10">
       <HeaderBreadcrumbs
+        sx={{ px: 2 }}
         heading={'Master ICD - 10'}
         links={[
           {
diff --git a/frontend/dashboard/src/pages/Master/Diagnosis/Master/Form.tsx b/frontend/dashboard/src/pages/Master/Diagnosis/Master/Form.tsx
index cc2e872d..27819834 100644
--- a/frontend/dashboard/src/pages/Master/Diagnosis/Master/Form.tsx
+++ b/frontend/dashboard/src/pages/Master/Diagnosis/Master/Form.tsx
@@ -1,6 +1,6 @@
 import * as Yup from 'yup';
 import { LoadingButton } from "@mui/lab";
-import { Card, Grid, Stack, Typography } from "@mui/material";
+import { Box, Card, Grid, Stack, Typography } from "@mui/material";
 import { CorporatePlan } from "../../../../@types/corporates";
 import { FormProvider, RHFSwitch, RHFTextField } from "../../../../components/hook-form";
 import { useEffect, useMemo } from 'react';
@@ -9,6 +9,7 @@ import { yupResolver } from '@hookform/resolvers/yup';
 import { useSnackbar } from 'notistack';
 import { useNavigate, useParams } from 'react-router-dom';
 import axios from '../../../../utils/axios';
+import palette from '@/theme/palette';
 
 type Props = {
   isEdit: boolean;
@@ -68,11 +69,11 @@ export default function CorporatePlanForm({ isEdit, currentCorporatePlan }: Prop
         enqueueSnackbar('Division created successfully', { variant: 'success' });
       })
       .then((res) => {
-        navigate('/master/diagnosis-template',  { replace: true });
+        navigate('/master/diagnosis',  { replace: true });
       })
       .catch(({ response }) => {
         if (response.status === 422) {
-          for (const [key, value] of Object.entries(response.data.errors)) { 
+          for (const [key, value] of Object.entries(response.data.errors)) {
             setError(key, { message: value[0] });
             enqueueSnackbar(value[0] ?? 'Failed Processing Request', { variant: 'error' });
           }
@@ -88,7 +89,7 @@ export default function CorporatePlanForm({ isEdit, currentCorporatePlan }: Prop
           enqueueSnackbar('Division updated successfully', { variant: 'success' });
         })
         .then((res) => {
-          navigate('/master/diagnosis-template' ,  { replace: true });
+          navigate('/master/diagnosis' ,  { replace: true });
         })
         .catch(({ response }) => {
           enqueueSnackbar('Update Failed : '+ response.data.message, { variant: 'error' });
@@ -98,31 +99,27 @@ export default function CorporatePlanForm({ isEdit, currentCorporatePlan }: Prop
 
   return (
     <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
-        <Grid container spacing={2}>
-          <Grid item xs={8}>
-            <Card sx={{ p: 2 }}>
-                <Stack spacing={3}>
+        <Box sx={{ px: 2 }}>
+            <Grid container spacing={2}>
+                <Grid item xs={8}>
+                    <Card sx={{ px: 3, py: 4 }}>
+                        <Stack spacing={6}>
 
-                  <Typography variant="h6">Detail</Typography>
+                        <Typography variant="h6" color={palette.light.primary.main}>Detail</Typography>
 
 
-                  <RHFTextField name="name" label="Name" />
-                  <RHFTextField name="description" label="Description" />
+                        <RHFTextField name="name" label="Name" />
+                        <RHFTextField name="description" label="Description" />
 
-                  <LoadingButton type="submit" variant="contained" size="large" fullWidth={true} loading={isSubmitting}>
-                    { isEdit? 'Update' : 'Create' } 
-                  </LoadingButton>
+                        <LoadingButton type="submit" variant="contained" size="large" fullWidth={true} loading={isSubmitting}>
+                            { isEdit? 'Update' : 'Create' }
+                        </LoadingButton>
 
-                </Stack>
-            </Card>
-          </Grid>
-          {/* <Grid item xs={4}>
-            <Card sx={{ p:2 }}>
-
-            <RHFSwitch name="active" label="Active" />
-              </Card>
-          </Grid> */}
-        </Grid>
+                        </Stack>
+                    </Card>
+                </Grid>
+            </Grid>
+        </Box>
       </FormProvider>
   );
 }
diff --git a/frontend/dashboard/src/pages/Master/Diagnosis/Master/Index.tsx b/frontend/dashboard/src/pages/Master/Diagnosis/Master/Index.tsx
index 0afc6518..a3ccff4c 100644
--- a/frontend/dashboard/src/pages/Master/Diagnosis/Master/Index.tsx
+++ b/frontend/dashboard/src/pages/Master/Diagnosis/Master/Index.tsx
@@ -12,27 +12,26 @@ export default function Divisions() {
 
   const { corporate_id } = useParams();
 
-  const pageTitle = 'Diagnosis Template';
+  const pageTitle = 'Diagnosis';
   return (
     <Page title={ pageTitle }>
 
       <HeaderBreadcrumbs
+        sx={{ px: 2 }}
         heading={ pageTitle }
         links={[
           {
             name: 'Master',
-            href: '/master/diagnosis-template',
+            href: '/master/diagnosis',
           },
           {
-            name: 'Diagnosis Template',
-            href: '/master/diagnosis-template',
+            name: 'Diagnosis',
+            href: '/master/diagnosis',
           },
         ]}
       />
-      
-      <Card>
+
         <List />
-      </Card>
     </Page>
   );
 }
diff --git a/frontend/dashboard/src/pages/Master/Diagnosis/Master/List.tsx b/frontend/dashboard/src/pages/Master/Diagnosis/Master/List.tsx
index 67e30f2f..86315323 100644
--- a/frontend/dashboard/src/pages/Master/Diagnosis/Master/List.tsx
+++ b/frontend/dashboard/src/pages/Master/Diagnosis/Master/List.tsx
@@ -7,7 +7,7 @@ import UploadIcon from '@mui/icons-material/Upload';
 import CancelIcon from '@mui/icons-material/Cancel';
 import HistoryIcon from '@mui/icons-material/History';
 // hooks
-import { Link, NavLink as RouterLink } from 'react-router-dom';
+import { Link, NavLink as RouterLink, useNavigate } from 'react-router-dom';
 import React, { ChangeEvent, Component, useEffect, useRef, useState } from 'react';
 import useSettings from '../../../../hooks/useSettings';
 import { useParams, useSearchParams } from 'react-router-dom';
@@ -17,13 +17,16 @@ import { LaravelPaginatedData } from '../../../../@types/paginated-data';
 import { Icd } from '../../../../@types/diagnosis';
 import BasePagination from '../../../../components/BasePagination';
 import { enqueueSnackbar } from 'notistack';
+import TableMoreMenu from '@/components/table/TableMoreMenu';
+import { EditOutlined, FindInPageOutlined } from '@mui/icons-material';
 
 export default function List() {
-  const { themeStretch } = useSettings();
-  const { corporate_id } = useParams();
-  const [searchParams, setSearchParams] = useSearchParams();
-  const [importResult, setImportResult] = useState(null);
-  
+    const navigate = useNavigate();
+    const { themeStretch } = useSettings();
+    const { corporate_id } = useParams();
+    const [searchParams, setSearchParams] = useSearchParams();
+    const [importResult, setImportResult] = useState(null);
+
   function SearchInput(props: any) {
      // SEARCH
     const searchInput = useRef<HTMLInputElement>(null);
@@ -44,7 +47,7 @@ export default function List() {
     }, [searchParams])
 
     return (
-      <form onSubmit={handleSearchSubmit} style={{ width: '100%' }}>
+      <form onSubmit={handleSearchSubmit} style={{ width: '90%' }}>
         <TextField id="search-input" ref={searchInput} label="Search" variant="outlined" fullWidth onChange={handleSearchChange} value={searchText}/>
       </form>
     );
@@ -55,7 +58,7 @@ export default function List() {
     // Create Button Menu
     const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
     const createMenu = Boolean(anchorEl);
-    const importForm = useRef<HTMLInputElement>(null) 
+    const importForm = useRef<HTMLInputElement>(null)
     const [currentImportFileName, setCurrentImportFileName] = useState(null)
 
     const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -130,8 +133,8 @@ export default function List() {
         })
     }
 
-    
-    
+
+
     return (
       <div>
         <input type='file' id='file' ref={importForm} style={{ display: 'none' }} onChange={handleImportChange} accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain" />
@@ -139,17 +142,15 @@ export default function List() {
           <SearchInput onSearch={applyFilter}/>
           {/* <h1>kjasndkjandskjasndkjansdkjansd</h1> */}
           <Button
-              id="import-button"
-              variant='outlined'
-              startIcon={<AddIcon />} sx={{ p: 1.8 }}
-              aria-controls={createMenu ? 'basic-menu' : undefined}
-              aria-haspopup="true"
-              aria-expanded={createMenu ? 'true' : undefined}
-              
+                id="import-button"
+                variant='contained'
+                startIcon={<AddIcon />} sx={{ p: 1.8, width: '200px' }}
+                aria-controls={createMenu ? 'basic-menu' : undefined}
+                aria-haspopup="true"
+                aria-expanded={createMenu ? 'true' : undefined}
+                onClick={() => navigate(`/master/diagnosis/create`)}
             >
-               <Link to={`/master/diagnosis-template/create`} style={{ textDecoration: 'none', color: 'blue'}}>
-                    Create
-                </Link>
+                Create
             </Button>
             <Menu
               id="import-button"
@@ -161,7 +162,7 @@ export default function List() {
               }}
             >
               <MenuItem>
-               
+
               </MenuItem>
             </Menu>
         </Stack>
@@ -195,7 +196,7 @@ export default function List() {
               let updatedModel = model;
               if (row.id == model.id) {
                 updatedModel.active = res.data.icd.active;
-              } 
+              }
               return updatedModel;
             }),
           });
@@ -211,27 +212,30 @@ export default function List() {
 
     return (
       <React.Fragment>
-        <TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
-          <TableCell align="left">{row.name}</TableCell>
-          <TableCell align="left">{row.description ?? '-'}</TableCell>
-          <TableCell align="center">
-            {/* <Button variant="outlined" color="error" size="small">Disable</Button> */}
-            <Stack direction="row" justifyContent="flex-end" spacing={1}>
-              <Link to={`/master/diagnosis/${row.id}`}>
-                <Button variant="outlined" color="primary" size="small">
-                  Detail
-                </Button>
-              </Link>
-              <Link to={`/master/diagnosis-template/${row.id}/edit`}>
-                <Button variant="outlined" color="primary" size="small">
-                  Edit
-                </Button>
-              </Link>
-              <Link to={`/master/diagnosis-template/${row.id}/diagnosis-template-history`}>
-                <HistoryIcon />
-              </Link>
-            </Stack>
-          </TableCell>
+        <TableRow sx={{ '& > *': { borderBottom: '1' } }}>
+            <TableCell align="left"/>
+            <TableCell align="left">{row.name}</TableCell>
+            <TableCell align="left">{row.description ?? '-'}</TableCell>
+            <TableCell align="center">
+                <Stack direction="row" justifyContent="flex-end" spacing={1}>
+                    <TableMoreMenu actions={
+                        <>
+                            <MenuItem onClick={() => navigate(`/master/diagnosis/${row.id}`)}>
+                                <FindInPageOutlined />
+                                Detail
+                            </MenuItem>
+                            <MenuItem onClick={() => navigate(`/master/diagnosis-template/${row.id}/edit`)} >
+                                <EditOutlined />
+                                Edit
+                            </MenuItem>
+                            <MenuItem onClick={() => navigate(`/master/diagnosis-template/${row.id}/diagnosis-template-history`)}>
+                                <HistoryIcon />
+                                History
+                            </MenuItem>
+                        </>
+                    } />
+                </Stack>
+            </TableCell>
         </TableRow>
       </React.Fragment>
     );
@@ -285,22 +289,29 @@ export default function List() {
   useEffect(() => {
     loadDataTableData();
   }, [])
-  
+
   return (
     <Stack>
-      <ImportForm />
+        <ImportForm />
 
-        <Card>
         {/* The Main Table */}
-        <TableContainer component={Paper}>
+        <TableContainer component={Paper} sx={{ px: 1, mt: 3 }}>
           <Table aria-label="collapsible table">
-            <TableBody>
+            <colgroup>
+                <col width="20" />
+                <col width="250" />
+                <col width="*" />
+                <col width="50" />
+            </colgroup>
+
+            <TableHead>
               <TableRow>
+                <TableCell align="left" />
                 <TableCell style={headStyle} align="left">Name</TableCell>
                 <TableCell style={headStyle} align="left">Description</TableCell>
-                <TableCell style={headStyle} align="right">Action</TableCell>
+                <TableCell style={headStyle} align="right"></TableCell>
               </TableRow>
-            </TableBody>
+            </TableHead>
             {dataTableIsLoading ?
               (
                 <TableBody>
@@ -309,7 +320,7 @@ export default function List() {
                   </TableRow>
                 </TableBody>
               ) : (
-                dataTableData.data.length == 0 ? 
+                dataTableData.data.length == 0 ?
                 (
                   <TableBody>
                     <TableRow>
@@ -326,9 +337,8 @@ export default function List() {
             )}
           </Table>
         </TableContainer>
-        
+
         <BasePagination paginationData={dataTableData} onPageChange={handlePageChange}/>
-        </Card>
     </Stack>
   );
 }
diff --git a/frontend/dashboard/src/routes/index.tsx b/frontend/dashboard/src/routes/index.tsx
index 75a4c793..6e29b290 100644
--- a/frontend/dashboard/src/routes/index.tsx
+++ b/frontend/dashboard/src/routes/index.tsx
@@ -268,12 +268,12 @@ export default function Router() {
           element: <MasterHospitalsCreate />,
         },
         {
-          path: 'master/diagnosis-template/create',
-          element: <MasterDiagnosisTemplateCreate />,
+          path: 'master/diagnosis',
+          element: <MasterDiagnosisTemplate />,
         },
         {
-          path: 'master/diagnosis-template',
-          element: <MasterDiagnosisTemplate />,
+          path: 'master/diagnosis/create',
+          element: <MasterDiagnosisTemplateCreate />,
         },
         {
           path: 'master/diagnosis-template/:id/diagnosis-template-history',