diff --git a/src/index.css b/src/index.css
index 6e57aeed4b3de407e39085bdd5472e2a1bb4d03d..dc4e084cbbab304a8702ad308e44e1cd5e76b94e 100644
--- a/src/index.css
+++ b/src/index.css
@@ -66,4 +66,16 @@ p {
 
 h1 {
   color: var(--text-colour);
+}
+
+div.report_item {
+  width: 4rem; 
+  height: 4rem; 
+  display: flex; 
+  align-items: center; 
+  justify-content: center;
+}
+
+div.report_box {
+  padding-bottom: 1.25rem;
 }
\ No newline at end of file
diff --git a/src/reports.html b/src/reports.html
index 37b63c98e99d08207fce212d16045c67912b373a..e54ff2290531654b12d8ba3fae50325a157a61c8 100644
--- a/src/reports.html
+++ b/src/reports.html
@@ -51,7 +51,77 @@
                 <div class="col-xl-10 d-flex flex-column">
                     <main class="row overflow-auto">
                         <div class="col pt-5">
-                            <!-- Page content goes here -->
+                            <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">
+                                          Dashboard reports
+                                        </h1>
+                                        <h2 class="h6 fw-medium fw-medium text-muted mb-0">
+                                          Lorem ipsum dolor, sit amet consectetur adipisicing elit.
+                                        </h2>
+                                      </div>
+                                </div>
+                            </div>
+                            <div class="content mt-3" style="width: 90%; padding: 1.75rem 1.75rem 1px; margin: 0 auto;">
+                                <div class="row">
+                                    <div class="report_box col-12 col-md-6 col-xl-3">
+                                        <div class="rounded d-flex flex-column h-100 mb-0" style="background-color: rgb(212, 212, 212);">
+                                            <div class="content flex-grow-1 d-flex justify-content-between align-items-center" style="padding: 1.25rem;">
+                                                <dl class="mb-0">
+                                                    <dt class="fs-3 fw-bold">64</dt>
+                                                    <dd class="fs-sm fw-medium fs-sm fw-medium text-muted mb-0">Patients admitted</dd>
+                                                </dl>
+                                                <div class="report_item rounded bg-dark">
+                                                    <i class="bi-people" style="font-size:2rem; color: white;"></i>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="report_box col-12 col-md-6 col-xl-3">
+                                        <div class="rounded d-flex flex-column h-100 mb-0" style="background-color: rgb(212, 212, 212);">
+                                            <div class="content flex-grow-1 d-flex justify-content-between align-items-center" style="padding: 1.25rem;">
+                                                <dl class="mb-0">
+                                                    <dt class="fs-3 fw-bold">32</dt>
+                                                    <dd class="fs-sm fw-medium fs-sm fw-medium text-muted mb-0">Referrals recommended</dd>
+                                                </dl>
+                                                <div class="report_item rounded bg-dark">
+                                                    <i class="bi-person-exclamation" style="font-size:2rem; color: white;"></i>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="report_box col-12 col-md-6 col-xl-3">
+                                        <div class="rounded d-flex flex-column h-100 mb-0" style="background-color: rgb(212, 212, 212);">
+                                            <div class="content flex-grow-1 d-flex justify-content-between align-items-center" style="padding: 1.25rem;">
+                                                <dl class="mb-0">
+                                                    <dt class="fs-3 fw-bold">8</dt>
+                                                    <dd class="fs-sm fw-medium fs-sm fw-medium text-muted mb-0">Patients referred</dd>
+                                                </dl>
+                                                <div class="report_item rounded bg-dark">
+                                                    <i class="bi-person-check" style="font-size:2rem; color: white;"></i>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="report_box col-12 col-md-6 col-xl-3">
+                                        <div class="rounded d-flex flex-column h-100 mb-0" style="background-color: rgb(212, 212, 212);">
+                                            <div class="content flex-grow-1 d-flex justify-content-between align-items-center" style="padding: 1.25rem;">
+                                                <dl class="mb-0">
+                                                    <dt class="fs-3 fw-bold">12.5%</dt>
+                                                    <dd class="fs-sm fw-medium fs-sm fw-medium text-muted mb-0">Of patients referred</dd>
+                                                </dl>
+                                                <div class="report_item rounded bg-dark">
+                                                    <i class="bi-pie-chart" style="font-size:2rem; color: white;"></i>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>  
+                                </div>
+                                <div class="row">
+
+                                </div>
+                            </div>
                         </div>
                     </main>
                 </div>