diff --git a/src/views/DashboardProject/chatDashboard.js b/src/views/DashboardProject/chatDashboard.js
index c69feb2..0a1ef3e 100644
--- a/src/views/DashboardProject/chatDashboard.js
+++ b/src/views/DashboardProject/chatDashboard.js
@@ -3,7 +3,7 @@ const ChatDashboard = () => {
   return (
     <div style={{ margin: '0 5px' }} className="box-header-dashboard-project">
       <div style={{ display: 'flex', justifyContent: 'center' }}>
-        <div style={{ marginBottom: '5px', fontSize: '0.8rem', fontWeight: '500' }}>COMUNICATION</div>
+        <div style={{ marginBottom: '5px', fontSize: '0.8rem', fontWeight: '500' }}>Minutes of Meeting</div>
       </div>
       <div className='chat'>
         <div className="chat-content">
@@ -12,7 +12,7 @@ const ChatDashboard = () => {
               Robert William
             </div>
             <div className='chat-body-content'>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore Read More...
             </div>
             <div className='chat-footer'>
               14/01/22 14:21
@@ -25,7 +25,7 @@ const ChatDashboard = () => {
               Jennifer lawrence
             </div>
             <div className='chat-body-content'>
-              Curabitur lobortis tellus nibh, at tincidunt turpis viverra at. Integer aliquam in quam eu fringilla. Nullam eu mauris gravida
+              Curabitur lobortis tellus nibh, at tincidunt turpis viverra at. Integer aliquam in quam eu fringilla. Nullam eu mauris Read More...
             </div>
             <div className='chat-footer'>
               14/01/22 10:20
diff --git a/src/views/DashboardProject/index.js b/src/views/DashboardProject/index.js
index e84047c..a973d73 100644
--- a/src/views/DashboardProject/index.js
+++ b/src/views/DashboardProject/index.js
@@ -8,10 +8,10 @@ import ChatDashboard from './chatDashboard';
 import axios from 'axios'
 import { NotificationContainer, NotificationManager } from 'react-notifications';
 import { useParams } from 'react-router-dom';
+import { Badge } from 'reactstrap';
 import { BASE_OSPRO } from '../../const/ApiConst';
-import {
-  formatThousand,
-} from "../../const/CustomFunc";
+import {formatRibuanDecimal} from "../../const/CustomFunc";
+import ProgressBar from "./progressBar";
 
 function BoxDashboard({ value, title, secondaryTitle, icon, bgColor }) {
   return (
@@ -25,7 +25,18 @@ function BoxDashboard({ value, title, secondaryTitle, icon, bgColor }) {
   )
 }
 
+function RenderHealthProject({params}){
+  if (params == "on-budget") {
+      return (<Badge style = {{fontSize:"18px"}} color="success">On Budget</Badge>)
+    } else if (params == "warning") {
+      return (<Badge style = {{fontSize:"18px"}} color="warning">Warning</Badge>)
+    } else {
+      return (<Badge style = {{fontSize:"18px"}} color="danger">Danger</Badge>)
+    }
+}
+
 const DashboardProject = () => {
+
   const { ID } = useParams();
   const [STATUSPROJECT, SET_STATUSPROJECT] = useState([])
   const [PROJECTMGR, SET_PROJECTMGR] = useState([])
@@ -38,9 +49,11 @@ const DashboardProject = () => {
   const [BCWP, SET_BCWP] = useState([])
   const [ACWP, SET_ACWP] = useState([])
   const [VARIANCE, SET_VARIANCE] = useState([])
+  const [PROGRESS, SET_PROGRESS] = useState([])
   const [BUDGET, SET_BUDGET] = useState([])
   const [PROJECTNAME, SET_PROJECTNAME] = useState([])
   const [CURRENCYSYMBOL, SET_CURRENCYSYMBOL] = useState([])
+  const [BUDGETHEALTH, SET_BUDGETHEALTH] = useState([])
 
 
 
@@ -58,8 +71,8 @@ const DashboardProject = () => {
     if (result.data.code !== 200) {
       NotificationManager.error('Belum ada data proyek!', 'Failed');
     }
-    let resData;
-    result.data.data.map(datas => resData = datas);
+    let resData = result.data.data;
+    // result.data.data.map(datas => resData = datas);
     SET_BUDGET(resData.rencana_biaya)
     SET_PROJECTMGR(resData.pm)
     SET_RO(resData.company)
@@ -67,6 +80,9 @@ const DashboardProject = () => {
     SET_STARTDATE(resData.start)
     SET_BASELINEFINISHDATE(resData.finish)
     SET_CURRENCYSYMBOL(resData.currency_symbol)
+    SET_BUDGETHEALTH(resData.budget_health)
+    SET_ACWP(resData.actualCost)
+    SET_PROGRESS(resData.progress)
   }
 
   useEffect(() => {
@@ -155,8 +171,8 @@ const DashboardProject = () => {
                   <Col span={2}><i style={{ color: '#059669' }} class="zmdi zmdi-money zmdi-hc-lg"></i></Col>
                   <Col span={22}>
                     <div style={{ textTransform: 'uppercase', display: 'flex', justifyContent: 'space-between' }}>
-                      <div>Budget To Date (BCWP)</div>
-                      <div style={{ fontWeight: 500, color: '#8c8c8c' }}>Rp. 2.000.000.000</div>
+                      <div>Budget Proyek</div>
+                      <div style={{ fontWeight: 500, color: '#8c8c8c' }}>{`${formatRibuanDecimal(BUDGET)}`}</div>
                     </div>
                   </Col>
                 </Row>
@@ -166,8 +182,8 @@ const DashboardProject = () => {
                   <Col span={2}><i style={{ color: '#059669' }} class="zmdi zmdi-money zmdi-hc-lg"></i></Col>
                   <Col span={22}>
                     <div style={{ textTransform: 'uppercase', display: 'flex', justifyContent: 'space-between' }}>
-                      <div>Actual To Date (ACWP)</div>
-                      <div style={{ fontWeight: 500, color: '#8c8c8c' }}>Rp. 1.700.000.000</div>
+                      <div>Actual Cost</div>
+                      <div style={{ fontWeight: 500, color: '#8c8c8c' }}>{`${formatRibuanDecimal(ACWP)}`}</div>
                     </div>
                   </Col>
                 </Row>
@@ -178,7 +194,7 @@ const DashboardProject = () => {
                   <Col span={22}>
                     <div style={{ textTransform: 'uppercase', display: 'flex', justifyContent: 'space-between' }}>
                       <div>Variance</div>
-                      <div style={{ fontWeight: 500, color: '#8c8c8c' }}>Rp. 300.000.000</div>
+                      <div style={{ fontWeight: 500, color: '#8c8c8c' }}>{`${formatRibuanDecimal(BUDGET - ACWP)}`}</div>
                     </div>
                   </Col>
                 </Row>
@@ -187,20 +203,24 @@ const DashboardProject = () => {
 
           </Col>
           <Col span={5}>
-            <BoxDashboard
+            {/* <BoxDashboard
               // icon={<i style={{ color: '#fff' }} class="zmdi zmdi-money zmdi-hc-lg"></i>}
-              value={`${CURRENCYSYMBOL} ${formatThousand(BUDGET)}`}
+              value={`${CURRENCYSYMBOL} ${formatRibuanDecimal(BUDGET)}`}
               bgColor="#059669"
-              title="Budget" />
+              title="Budget" /> */}
+            <div style={{ backgroundColor: "#059669" }} className='box-header-dashboard-project'>
+              <div style={{ display: 'flex', justifyContent: 'center' }}>
+                <div style={{ fontSize: '0.8rem', fontWeight: 500, color: '#fff', textTransform: 'uppercase' }}>Progress</div>
+              </div> 
+              <ProgressBar bgcolor="#ffc355" completed={PROGRESS} />
+            </div>
 
             <div style={{ margin: '5px 0' }} className="box-header-dashboard-project">
               <div style={{ display: 'flex', justifyContent: 'center' }}>
                 <div style={{ marginBottom: '5px', fontSize: '0.8rem', fontWeight: '500' }}>HEALTH PROJECT</div>
               </div>
-              <div style={{ display: 'flex', justifyContent: 'space-evenly', }}>
-                <div style={{ marginTop: 5 }} className='health-status-good' />
-                <div style={{ marginTop: 5 }} className='health-status-warning' />
-                <div style={{ marginTop: 5 }} className='health-status-danger' />
+              <div style={{ display: 'flex', justifyContent: 'space-evenly', }}> 
+                <RenderHealthProject params = {`${BUDGETHEALTH}`}/> 
               </div>
             </div>
 
diff --git a/src/views/DashboardProject/progressBar.js b/src/views/DashboardProject/progressBar.js
new file mode 100644
index 0000000..4eb2209
--- /dev/null
+++ b/src/views/DashboardProject/progressBar.js
@@ -0,0 +1,37 @@
+import React from "react";
+
+const ProgressBar = (props) => {
+    const { bgcolor, completed } = props;
+  
+    const containerStyles = {
+      height: 25,
+      width: '100%',
+      backgroundColor: "#e0e0de",
+      borderRadius: 50,
+      margin: 0
+    }
+  
+    const fillerStyles = {
+      height: '100%',
+      width: `${completed}%`,
+      backgroundColor: bgcolor,
+      borderRadius: 'inherit',
+      textAlign: 'right'
+    }
+  
+    const labelStyles = {
+      padding: 5,
+      color: 'white',
+      fontWeight: 'bold'
+    }
+  
+    return (
+      <div style={containerStyles}>
+        <div style={fillerStyles}>
+          <span style={labelStyles}>{`${completed}%`}</span>
+        </div>
+      </div>
+    );
+  };
+  
+  export default ProgressBar;
\ No newline at end of file