diff --git a/frontend/client-portal/src/pages/AlarmCenter/ServiceMonitoring.tsx b/frontend/client-portal/src/pages/AlarmCenter/ServiceMonitoring.tsx
index 82b75065..ec3f2c34 100644
--- a/frontend/client-portal/src/pages/AlarmCenter/ServiceMonitoring.tsx
+++ b/frontend/client-portal/src/pages/AlarmCenter/ServiceMonitoring.tsx
@@ -248,6 +248,16 @@ export default function ServiceMonitoring() {
     };
   }, [corporateValue]);
 
+ 
+  const renderHTML = (data:string) => {
+      return (
+          <div style={{marginLeft: 20}}
+              dangerouslySetInnerHTML={{__html: data}}
+          />
+      );
+  }
+
+
   return (
     <Page title="Service Monitoring">
       <Grid container spacing={3} paddingX={2} sx={{ marginBottom: 5, marginTop: 1 }}>
@@ -977,7 +987,7 @@ export default function ServiceMonitoring() {
                                             <Typography variant="h6">Subject</Typography>
                                             <Typography variant="inherit">
                                               {dailyMonitoring.subject
-                                                ? dailyMonitoring.subject
+                                                ? renderHTML(dailyMonitoring.subject)
                                                 : '-'}
                                             </Typography>
                                           </Stack>
@@ -989,7 +999,7 @@ export default function ServiceMonitoring() {
                                             </Typography>
                                             <Typography variant="inherit">
                                               {dailyMonitoring.object
-                                                ? dailyMonitoring.object
+                                                ? renderHTML(dailyMonitoring.object)
                                                 : '-'}
                                             </Typography>
                                           </Stack>
@@ -1087,7 +1097,7 @@ export default function ServiceMonitoring() {
                                               <Stack>
                                                 <Typography variant="inherit">
                                                   {dailyMonitoring.analysis
-                                                    ? dailyMonitoring.analysis
+                                                    ? renderHTML(dailyMonitoring.analysis)
                                                     : '-'}
                                                 </Typography>
                                               </Stack>
@@ -1106,7 +1116,7 @@ export default function ServiceMonitoring() {
                                                   {dailyMonitoring.plans.length > 0 ? (
                                                     dailyMonitoring.plans.map((plan, planIndex) =>
                                                       plan.type === 1 ? (
-                                                        <li key={planIndex}>{plan.plan}</li>
+                                                        <li key={planIndex}>{renderHTML(plan.plan)}</li>
                                                       ) : null
                                                     )
                                                   ) : (
@@ -1133,7 +1143,7 @@ export default function ServiceMonitoring() {
                                                   {dailyMonitoring.plans.length > 0 ? (
                                                     dailyMonitoring.plans.map((plan, planIndex) =>
                                                       plan.type === 2 ? (
-                                                        <li key={planIndex}>{plan.plan}</li>
+                                                        <li key={planIndex}>{renderHTML(plan.plan)}</li>
                                                       ) : null
                                                     )
                                                   ) : (
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..e01f2f54 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() {
@@ -171,6 +172,14 @@ export default function DetailMonitoringList() {
         setDetailMonitoringList(response);
         setOrganizationId(organization_id);
     }
+    
+    const renderHTML = (data:string) => {
+        return (
+            <div style={{marginLeft: 20}}
+                dangerouslySetInnerHTML={{__html: data}}
+            />
+        );
+    }
 
     return (
         <Page title={pageTitle} sx={{ px: 2 }}>
@@ -255,7 +264,7 @@ export default function DetailMonitoringList() {
                                                         </Grid>
                                                         <Grid item xs={12}>
                                                             <Typography variant="body2" color={"GrayText"}>
-                                                                {row.subject}
+                                                                {renderHTML(row.subject)}
                                                             </Typography>
                                                         </Grid>
                                                     </Grid>
@@ -270,7 +279,7 @@ export default function DetailMonitoringList() {
                                                         </Grid>
                                                         <Grid item xs={12} paddingY={2}>
                                                             <Typography variant="body2" color={"GrayText"}>
-                                                                {row.object}
+                                                                {renderHTML(row.object)}
                                                             </Typography>
                                                         </Grid>
                                                         <Grid item xs={12}>
@@ -329,7 +338,7 @@ export default function DetailMonitoringList() {
                                                         </Grid>
                                                         <Grid item xs={12}>
                                                             <Typography variant="body2" color={"GrayText"}>
-                                                                {row.analysis}
+                                                                {renderHTML(row.analysis)}
                                                             </Typography>
                                                         </Grid>
                                                     </Grid>
@@ -348,7 +357,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 +380,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 +429,7 @@ export default function DetailMonitoringList() {
                                                             </Grid>
                                                             <Grid item xs={6}>
                                                                 <Typography variant="body2" color={"GrayText"}>
-                                                                    {row.examination != null ? row.examination : '-' }
+                                                                    {row.examination != null ? renderHTML(row.examination) : '-' }
                                                                 </Typography>
                                                             </Grid>
                                                         </Grid>