diff --git a/src/csv_upload.js b/src/csv_upload.js
index 39a925324997b817f3c69c6725bed3a220f0b9cb..ae612cf6d2d509ce4db50e16babafc919b302601 100644
--- a/src/csv_upload.js
+++ b/src/csv_upload.js
@@ -18,7 +18,7 @@ const config = {
 const uploadButton = document.querySelector('#csv_upload_btn');
 
 uploadButton.addEventListener('click', async (event) => {
-    event.preventDefault();
+    //event.preventDefault();
 
     const csv_file = document.querySelector('#csv_file_upload').files[0];
     const stream = fs.createReadStream(csv_file.path).pipe(csv());
diff --git a/src/data.js b/src/data.js
index 75407731fe0cb5d4d02f16ead20376e55708cc16..d0acfae5aba4ef5d83d22fc05323e32bcb6250a8 100644
--- a/src/data.js
+++ b/src/data.js
@@ -77,53 +77,61 @@ function displayDataTable(data){
             },
             "columns": [
             { "data": "patient_id",
-            "defaultContent": "NULL"},
+            "defaultContent": "Null"},
             { "data": "patient_end_tidal_co2",
-            "defaultContent": "NULL"},
+            "defaultContent": "Null"},
             { "data": "patient_feed_vol",
-            "defaultContent": "NULL"},
+            "defaultContent": "Null"},
             { "data": "patient_feed_vol_adm",
-            "defaultContent": "NULL"},
+            "defaultContent": "Null"},
             { "data": "patient_fio2",
-            "defaultContent": "NULL"},
+            "defaultContent": "Null"},
             { "data": "patient_fio2_ratio",
-            "defaultContent": "NULL"},
+            "defaultContent": "Null"},
             { "data": "patient_insp_time",
-            "defaultContent": "NULL"},
+            "defaultContent": "Null"},
             { "data": "patient_oxygen_flow_rate",
-            "defaultContent": "NULL"},
+            "defaultContent": "Null"},
             { "data": "patient_peep",
-            "defaultContent": "NULL"},
+            "defaultContent": "Null"},
             { "data": "patient_pip",
-            "defaultContent": "NULL"},
+            "defaultContent": "Null"},
             { "data": "patient_resp_rate",
-            "defaultContent": "NULL"},
+            "defaultContent": "Null"},
             { "data": "patient_sip",
-            "defaultContent": "NULL"},
+            "defaultContent": "Null"},
             { "data": "patient_tidal_vol",
-            "defaultContent": "NULL"},
+            "defaultContent": "Null"},
             { "data": "patient_tidal_vol_actual",
-            "defaultContent": "NULL"},
+            "defaultContent": "Null"},
             { "data": "patient_tidal_vol_kg",
-            "defaultContent": "NULL"},
+            "defaultContent": "Null"},
             { "data": "patient_tidal_vol_spon",
-            "defaultContent": "NULL"},
+            "defaultContent": "Null"},
             { "data": "patient_bmi",
-            "defaultContent": "NULL"},
-            { "data": "referral_recommended", // Column for ML algorithm -> To display whether a referral is recommended.
-            "defaultContent": "N/A"},
+            "defaultContent": "Null"},
+            { "data": "recommend_patient_referral", // Column for ML algorithm -> To display whether a referral is recommended.
+            "defaultContent": "Null"},
             { "data": "patient_referral",
-            "defaultContent": "NULL"},
+            "defaultContent": "Null"},
             ],
             aoColumnDefs: [{
                 targets: 18,
                 mRender: function (data, type, full, meta) {
                     return '<input type="checkbox" class="minimal" onchange="checkReferral(this)" id='+ full.patient_id +''+ (data ? ' checked' : '') +'/>';
                 }
+            },{
+                targets: 17,
+                mRender: function(data, type, full, meta) {
+                    return '<input type="checkbox" class="minimal" onclick="return false" id='+ full.patient_id +''+ (data ? ' checked' : '') +'/>';
+                }
             },{
                 responsivePriority: 1, targets: 18 // Adds priority of 1 to referral column -> Will be last displayed due to responsiveness
             },{
                 responsivePriority: 2, targets: 17 // Adds priority of 2 to recommended referral column
+            },{
+                orderDataType: "dom-checkbox",
+                targets: 17
             }]
         }).on( 'select', function ( e, dt, type, indexes ) {
             //if not responsive view launch responsive modal
diff --git a/src/index.css b/src/index.css
index 9536beb8702bb1521042f22bd9e7ff619706eb68..bacb2fec98468b3c5297e33e1c7cc32216d2606d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -2,6 +2,10 @@
   --text-colour: #FFFFFF;
 }
 
+body {
+  background-color: #E8EDEE !important;
+}
+
 #background {
 background: linear-gradient(#005EB8, #0072CE, #41B6E6, #0072CE, #005EB8);
   background-size: 200% 200%;
@@ -83,6 +87,10 @@ div.report_box {
   padding-bottom: 1.25rem;
 }
 
+table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before, table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before {
+  background-color: #005EB8 !important;
+}
+
 /* Upload CSV page */
 
 div.upload_csv_content {
@@ -156,4 +164,28 @@ i.csv_x {
 
 .block-header {
   padding: .5rem 1.25rem;
+  border-top-left-radius: .5rem;
+  border-top-right-radius: .5rem;
+}
+
+.block-content {
+  padding: 1.25rem 1.25rem 1px;
+}
+
+.block-content.block-content-full {
+  padding-bottom: 1.25rem;
+}
+
+.bg-body-light {
+  background: #f6f7f9;
+}
+
+.block-content:last-child {
+  border-bottom-left-radius: .5rem;
+  border-bottom-right-radius: .5rem;
+}
+
+#bar-title {
+  text-transform: uppercase;
+  margin-top: .5rem;
 }
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index 2881423eb8d5c46dd371b7b67cb29c45a37a6c35..b802e972d130ff8b7d128b742e0edbac01cc9657 100644
--- a/src/index.html
+++ b/src/index.html
@@ -61,6 +61,18 @@
                 <div class="col-xl-10 d-flex flex-column">
                     <main class="row overflow-auto">
                         <div class="col pt-5">
+                            <div class="content" style="width: 90%; padding: 1.75rem 1.75rem 1px; margin: 0 auto;">
+                                <div class="d-flex flex-column flex-md-row justify-content-md-between align-items-md-center py-2 text-center text-md-start">
+                                    <div class="flex-grow-1 mb-1 mb-md-0">
+                                        <h1 class="h3 fw-bold mb-2 text-reset">
+                                          CCU Patient Dashboard
+                                        </h1>
+                                        <h2 class="h6 fw-medium text-muted mb-0">
+                                          Lorem ipsum dolor, sit amet consectetur adipisicing elit.
+                                        </h2>
+                                      </div>
+                                </div>
+                            </div>
                             <table class="table table-striped table-hover table-bordered border-dark table-sm datatable-table pt-4" id="dashboardTable">
                                 <thead class="datatable-table table-dark">
                                     <tr>
diff --git a/src/reports.html b/src/reports.html
index 16dc991a1b4e25ff39455aea020a599bdcbbcc3a..b4f84a2dd87b8d5c6e6d9be34d30194812aba10c 100644
--- a/src/reports.html
+++ b/src/reports.html
@@ -54,7 +54,7 @@
                                 <div class="d-flex flex-column flex-md-row justify-content-md-between align-items-md-center py-2 text-center text-md-start">
                                     <div class="flex-grow-1 mb-1 mb-md-0">
                                         <h1 class="h3 fw-bold mb-2 text-reset">
-                                          Dashboard reports
+                                          Dashboard Reports
                                         </h1>
                                         <h2 class="h6 fw-medium text-muted mb-0">
                                           Lorem ipsum dolor, sit amet consectetur adipisicing elit.
@@ -121,11 +121,33 @@
                                     <div class="col-xl-8 col-xxl-9 d-flex flex-column">
                                         <div class="block block-rounded flex-grow-1 d-flex flex-column">
                                             <div class="block-header block-header-default">
-                                                <h4 class="block-title">Patient referral</h4>
+                                                <h4 class="block-title" id="bar-title">Patient referrals</h4>
                                             </div>
                                             <div class="block-content block-content-full flex-grow-1 d-flex align-items-center">
                                                 <canvas id="patient-referrals"></canvas>
                                             </div>
+                                            <div class="block-content bg-body-light">
+                                                <div class="row text-center w-100">
+                                                    <div class="col-sm-4">
+                                                        <dl class="">
+                                                            <dt class="fs-3 fw-bold d-inline-flex align-items-center" id="percent_not_referred">%</dt>
+                                                            <dd class="fs-6 fw-medium text-muted mb-0">Of patients not referred</dd>
+                                                        </dl>
+                                                    </div>
+                                                    <div class="col-sm-4">
+                                                        <dl class="">
+                                                            <dt class="fs-3 fw-bold d-inline-flex align-items-center" id="percent_referred">%</dt>
+                                                            <dd class="fs-6 fw-medium text-muted mb-0">Of patients referred</dd>
+                                                        </dl>
+                                                    </div>
+                                                    <div class="col-sm-4">
+                                                        <dl class="">
+                                                            <dt class="fs-3 fw-bold d-inline-flex align-items-center" id="percent_recommended_referrals">%</dt>
+                                                            <dd class="fs-6 fw-medium text-muted mb-0">Of patients recommended for referral</dd>
+                                                        </dl>
+                                                    </div>
+                                                </div>
+                                            </div>
                                         </div>
                                     </div>
                                     <div class="col-xl-4 col-xxl-3 d-flex flex-column">
diff --git a/src/reports.js b/src/reports.js
index 1bcc22ed424d8d003772c68cf44ec998d07f216b..27c095b34dbeade53335acb86db9db8addfe48d0 100644
--- a/src/reports.js
+++ b/src/reports.js
@@ -6,6 +6,7 @@ var sql = require("mssql");
 (async function() {
     var total_num_patients;
     var total_patients_referred;
+    var total_recommended_referrals;
 
     const config = {
         server: 'uwe-sdgp.database.windows.net',
@@ -23,20 +24,25 @@ var sql = require("mssql");
         if (err) console.log(err);
 
         const request = new sql.Request()
+        // Gather stats for displaying bar chart for referrals, non referrals and recommended referrals
         request.query('SELECT (SELECT COUNT(*) AS num1 FROM fid_patients WHERE patient_referral = 0) as notReferred, (SELECT COUNT(*) AS num2 FROM fid_patients WHERE patient_referral = 1) as referred, (SELECT COUNT(*) AS num3 FROM fid_patients WHERE recommend_patient_referral = 1 AND patient_referral = 0) as recommended', (err, result) => {
             if (err) console.log(err);
 
             displayGraph(result.recordset[0]);
         })
+        // Gather stats for displaying number of patients admitted to CCU
         request.query('SELECT COUNT(patient_id) FROM fid_patients', (err, result) => {
             if (err) console.log(err);
             $('#num_patients_admitted').html(result.recordset[0][""]);
             total_num_patients = result.recordset[0][""];
         })
+        // Gather stats for displaying number of referrals recommended
         request.query('SELECT COUNT(patient_id) FROM fid_patients WHERE recommend_patient_referral = 1 AND patient_referral = 0', (err, result) => {
             if (err) console.log(err);
+            total_recommended_referrals = result.recordset[0][""];
             $('#num_referrals_recommended').html(result.recordset[0][""]);
-        }) // TO DISPLAY NUMBER OF REFERRALS RECOMMENDED BY ML ALGORITHM WHEN IMPLEMENTED
+        })
+        // Gather stats for displaying number of patients referred and calculate percentage of patients referred
         request.query('SELECT COUNT(patient_id) FROM fid_patients WHERE patient_referral = 1', (err, result) => {
             if (err) console.log(err);
             $('#num_patients_referred').html(result.recordset[0][""]);
@@ -44,21 +50,29 @@ var sql = require("mssql");
             total_patients_referred = result.recordset[0][""];
             $('#num_percent_patients').html(((total_patients_referred/total_num_patients)*100).toFixed(2)+'%');
 
+            // For below bar chart
+            $('#percent_referred').html(((total_patients_referred/total_num_patients)*100).toFixed(2)+'%');
+
+            var total_patients_not_referred = total_num_patients - total_patients_referred;
+            $('#percent_not_referred').html(((total_patients_not_referred/total_num_patients)*100).toFixed(2)+'%');
+
+            $('#percent_recommended_referrals').html(((total_recommended_referrals/total_num_patients)*100).toFixed(2)+'%');
+
             sql.close();
-        })
+        })        
     }); 
     
     function displayGraph(data){
 
         const graphData = {
             labels: [
-                'Referred',
                 'Not referred',
+                'Referred',
                 'Recommended'
             ],
             datasets: [
                 {
-                data: [data.referred, data.notReferred, data.recommended],
+                data: [data.notReferred, data.referred, data.recommended],
                 }
             ]
         };
@@ -66,16 +80,27 @@ var sql = require("mssql");
         new Chart(
             document.getElementById('patient-referrals'),
             {
-              type: 'pie',
+              type: 'bar',
               data: graphData,
               options: {
                 responsive: true,
+                backgroundColor: 'rgba(0, 94, 184, 0.85)',
+                scales: {
+                    x: {
+                        display: true,
+                     },
+                     y: {
+                        ticks: {
+                            display: false,
+                        }
+                     }
+                  },
                 plugins: {
                     tooltip: {
-                        enabled: false
+                        enabled: true
                     },
                     legend: {
-                        display: true
+                        display: false
                     }
                 }
               },