diff --git a/frontend/dashboard/src/pages/CaseManagement/DailyMonitoring/Components/DetailMonitoringForm.tsx b/frontend/dashboard/src/pages/CaseManagement/DailyMonitoring/Components/DetailMonitoringForm.tsx
index f3692db7..6a6af022 100644
--- a/frontend/dashboard/src/pages/CaseManagement/DailyMonitoring/Components/DetailMonitoringForm.tsx
+++ b/frontend/dashboard/src/pages/CaseManagement/DailyMonitoring/Components/DetailMonitoringForm.tsx
@@ -12,7 +12,7 @@ import { LoadingButton } from "@mui/lab";
  * ============================================
 */
 import Page from '@/components/Page';
-import { FormProvider, RHFTextField } from '@/components/hook-form';
+import { FormProvider, RHFEditor, RHFTextField } from '@/components/hook-form';
 import RHFDatePickerV2 from '@/components/hook-form/RHFDatePickerV2';
 
 /**
@@ -293,7 +293,7 @@ export default function DetailMonitoringList() {
                                             Subject* :
                                         </Typography>
                                     </Grid>
-                                    <Grid item xs={12} sx={{display: 'flex', gap: 1}}>
+                                    {/* <Grid item xs={12} sx={{display: 'flex', gap: 1}}>
                                         <RHFTextField
                                             id="subject"
                                             name='subject'
@@ -301,6 +301,9 @@ export default function DetailMonitoringList() {
                                             multiline
                                             rows={4}
                                         />
+                                    </Grid> */}
+                                    <Grid item xs={12}>
+                                        <RHFEditor id="subject" name="subject" placeholder="Subjective" />
                                     </Grid>
                                 </Grid>
                             </Grid>
@@ -313,7 +316,7 @@ export default function DetailMonitoringList() {
                                         Objective
                                         </Typography>
                                     </Grid>
-                                    <Grid item xs={12} sx={{display: 'flex', gap: 1}}>
+                                    {/* <Grid item xs={12} sx={{display: 'flex', gap: 1}}>
                                         <RHFTextField
                                             id="objective"
                                             name='objective'
@@ -321,6 +324,9 @@ export default function DetailMonitoringList() {
                                             multiline
                                             rows={4}  
                                         />
+                                    </Grid> */}
+                                    <Grid item xs={12}>
+                                        <RHFEditor id="objective" name="objective" placeholder="Objective"/>
                                     </Grid>
                                     <Grid item xs={12}>
                                         <Grid container spacing={3}>
@@ -427,7 +433,7 @@ export default function DetailMonitoringList() {
                                             Analysis* :
                                         </Typography>
                                     </Grid>
-                                    <Grid item xs={12} sx={{display: 'flex', gap: 1}}>
+                                    {/* <Grid item xs={12} sx={{display: 'flex', gap: 1}}>
                                         <RHFTextField
                                             id="analysis"
                                             name='analysis'
@@ -435,6 +441,9 @@ export default function DetailMonitoringList() {
                                             multiline
                                             rows={4}
                                         />
+                                    </Grid> */}
+                                    <Grid item xs={12}>
+                                        <RHFEditor id="analysis" name="analysis" placeholder="Analysis"  />
                                     </Grid>
                                 </Grid>
                             </Grid>
@@ -453,12 +462,10 @@ export default function DetailMonitoringList() {
                                                 return (
                                                     <Grid key={field.id} container sx={{ mb: 3 }}>
                                                         <Grid item xs={11}>
-                                                            <RHFTextField
-                                                                id="analysis"
+                                                            <RHFEditor
+                                                                id={`medical_plan_str-${index}`}
                                                                 name={`medical_plan.${index}.medical_plan_str`}
                                                                 placeholder='Medical Plan'
-                                                                multiline
-                                                                rows={4}
                                                             />
                                                         </Grid>
                                                         {
@@ -512,8 +519,8 @@ export default function DetailMonitoringList() {
                                                 return (
                                                     <Grid key={field.id} container sx={{ mb: 3 }}>
                                                         <Grid item xs={11}>
-                                                            <RHFTextField
-                                                                id="analysis"
+                                                            <RHFEditor
+                                                                 id={`non_medikamentosa_plan-${index}`}
                                                                 name={`non_medikamentosa_plan.${index}.non_medikamentosa_plan_str`}
                                                                 placeholder='Non Medikamentosa'
                                                                 multiline
@@ -707,14 +714,12 @@ export default function DetailMonitoringList() {
                                             Examination
                                         </Typography>
                                     </Grid>
-                                    <Grid item xs={12} sx={{display: 'flex', gap: 1}}>
-                                        <RHFTextField
+                                    <Grid item xs={12}>
+                                        <RHFEditor
                                             id="examination"
                                             name='examination'
                                             placeholder='examination'
                                             label='Examination'
-                                            multiline
-                                            rows={4}
                                         />
                                     </Grid>
                                     <Grid item xs={12}>
diff --git a/frontend/dashboard/src/pages/CaseManagement/DailyMonitoring/Components/DetailMonitoringList.tsx b/frontend/dashboard/src/pages/CaseManagement/DailyMonitoring/Components/DetailMonitoringList.tsx
index f25f407f..093e0807 100644
--- a/frontend/dashboard/src/pages/CaseManagement/DailyMonitoring/Components/DetailMonitoringList.tsx
+++ b/frontend/dashboard/src/pages/CaseManagement/DailyMonitoring/Components/DetailMonitoringList.tsx
@@ -38,6 +38,7 @@ import MuiDialog from '@/components/MuiDialog';
 import { DialogActions } from '@mui/material';
 import axios from '@/utils/axios';
 import { enqueueSnackbar } from 'notistack';
+import { escape } from 'lodash';
 
 
 export default function DetailMonitoringList() {
@@ -172,6 +173,18 @@ export default function DetailMonitoringList() {
         setOrganizationId(organization_id);
     }
 
+    const clearCodeHtml = (text:any) => {
+        return new DOMParser().parseFromString(text, 'text/html').documentElement.textContent
+    }
+
+    const renderHTML = (data:string) => {
+        return (
+            <div style={{marginLeft: 20}}
+                dangerouslySetInnerHTML={{__html: data}}
+            />
+        );
+    }
+
     return (
         <Page title={pageTitle} sx={{ px: 2 }}>
             <Grid container gap={6}>
@@ -255,7 +268,7 @@ export default function DetailMonitoringList() {
                                                         </Grid>
                                                         <Grid item xs={12}>
                                                             <Typography variant="body2" color={"GrayText"}>
-                                                                {row.subject}
+                                                                {clearCodeHtml(row.subject)}
                                                             </Typography>
                                                         </Grid>
                                                     </Grid>
@@ -270,7 +283,7 @@ export default function DetailMonitoringList() {
                                                         </Grid>
                                                         <Grid item xs={12} paddingY={2}>
                                                             <Typography variant="body2" color={"GrayText"}>
-                                                                {row.object}
+                                                                {clearCodeHtml(row.object)}
                                                             </Typography>
                                                         </Grid>
                                                         <Grid item xs={12}>
@@ -329,7 +342,7 @@ export default function DetailMonitoringList() {
                                                         </Grid>
                                                         <Grid item xs={12}>
                                                             <Typography variant="body2" color={"GrayText"}>
-                                                                {row.analysis}
+                                                                {clearCodeHtml(row.analysis)}
                                                             </Typography>
                                                         </Grid>
                                                     </Grid>
@@ -348,7 +361,7 @@ export default function DetailMonitoringList() {
                                                                     row.medical_plan?.map((data, index) => {
                                                                         return (
                                                                             <ListItem key={index}>
-                                                                                <FiberManualRecord sx={{ fontSize: '8px', mr: '10px' }} /> {data.medical_plan_str}
+                                                                                <FiberManualRecord sx={{ fontSize: '8px', mr: '10px' }} /> {renderHTML(data.medical_plan_str)}
                                                                             </ListItem>
                                                                         )
                                                                     })
@@ -371,7 +384,7 @@ export default function DetailMonitoringList() {
                                                                     row.non_medikamentosa_plan?.map((data, index) => {
                                                                         return (
                                                                             <ListItem key={index}>
-                                                                                <FiberManualRecord sx={{ fontSize: '8px', mr: '10px' }} /> {data.non_medikamentosa_plan_str}
+                                                                                <FiberManualRecord sx={{ fontSize: '8px', mr: '10px' }} /> {renderHTML(data.non_medikamentosa_plan_str)}
                                                                             </ListItem>
                                                                         )
                                                                     })
@@ -420,7 +433,7 @@ export default function DetailMonitoringList() {
                                                             </Grid>
                                                             <Grid item xs={6}>
                                                                 <Typography variant="body2" color={"GrayText"}>
-                                                                    {row.examination != null ? row.examination : '-' }
+                                                                    {row.examination != null ? clearCodeHtml(row.examination) : '-' }
                                                                 </Typography>
                                                             </Grid>
                                                         </Grid>