diff --git a/Frontend/patient_manager/lib/components/homeTile.dart b/Frontend/patient_manager/lib/components/homeTile.dart
index 5d8a7844..d7677548 100644
--- a/Frontend/patient_manager/lib/components/homeTile.dart
+++ b/Frontend/patient_manager/lib/components/homeTile.dart
@@ -18,6 +18,8 @@ class HomeTile extends StatelessWidget {
     return GestureDetector(
       onTap: onTap,
       child: Card(
+        color: Colors.white,
+        elevation: 20,
         child: Column(
           //mainAxisSize: MainAxisSize.min,
           children: [
diff --git a/Frontend/patient_manager/lib/components/patientDetailItem.dart b/Frontend/patient_manager/lib/components/patientDetailItem.dart
new file mode 100644
index 00000000..6314a5a4
--- /dev/null
+++ b/Frontend/patient_manager/lib/components/patientDetailItem.dart
@@ -0,0 +1,50 @@
+import 'package:flutter/material.dart';
+
+class PatientDetailItem extends StatefulWidget {
+  final String category;
+  final String value;
+  const PatientDetailItem({
+    super.key,
+    required this.category,
+    required this.value,
+  });
+
+  @override
+  State<PatientDetailItem> createState() => _PatientDetailItemState();
+}
+
+class _PatientDetailItemState extends State<PatientDetailItem> {
+  @override
+  Widget build(BuildContext context) {
+    return Expanded(
+      flex: 1,
+      child: Row(
+        children: [
+          Text(
+            "${widget.category}:",
+            style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
+          ),
+          const SizedBox(width: 10),
+          Expanded(
+            child: Padding(
+              padding: const EdgeInsets.only(right: 10.0),
+              child: Container(
+                //width: MediaQuery.of(context).size.width * 0.5,
+                padding: const EdgeInsets.only(left: 10.0, right: 10.0),
+                decoration: const BoxDecoration(
+                    color: Colors.white,
+                    borderRadius: BorderRadius.all(Radius.circular(5.0))),
+                child: Text(
+                  widget.value,
+                  style: const TextStyle(
+                    fontSize: 20,
+                  ),
+                ),
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
diff --git a/Frontend/patient_manager/lib/components/patientDetails.dart b/Frontend/patient_manager/lib/components/patientDetails.dart
new file mode 100644
index 00000000..c33de7f4
--- /dev/null
+++ b/Frontend/patient_manager/lib/components/patientDetails.dart
@@ -0,0 +1,117 @@
+import 'package:flutter/material.dart';
+import 'package:patient_manager/components/patientDetailItem.dart';
+import 'package:patient_manager/objects/patients.dart';
+
+class PatientDetails extends StatefulWidget {
+  final Patient selectedPatient;
+  const PatientDetails({super.key, required this.selectedPatient});
+
+  @override
+  State<PatientDetails> createState() => _PatientDetailsState();
+}
+
+class _PatientDetailsState extends State<PatientDetails> {
+  double? headingFontSize = 35.0;
+  double? bodyFonstSize = 20.0;
+
+  @override
+  Widget build(BuildContext context) {
+    return Card(
+      elevation: 20,
+      child: Container(
+        padding: const EdgeInsets.all(20),
+        decoration: const BoxDecoration(
+          color: Color.fromARGB(255, 219, 218, 218),
+          borderRadius: BorderRadius.all(
+            Radius.circular(10),
+          ),
+        ),
+        //constraints: const BoxConstraints.expand(height: 250.0),
+        child: SelectionArea(
+          child: Column(
+            children: [
+              const Text(
+                "Patient Details",
+                textAlign: TextAlign.center,
+                style: TextStyle(
+                  fontSize: 35,
+                  fontWeight: FontWeight.bold,
+                ),
+              ),
+              const Divider(),
+              const SizedBox(height: 10),
+              Column(
+                children: [
+                  Row(
+                    children: [
+                      PatientDetailItem(
+                        category: "ID No.   ",
+                        value: widget.selectedPatient.id_no,
+                      ),
+                      PatientDetailItem(
+                        category: "Name ",
+                        value: widget.selectedPatient.first_name,
+                      ),
+                      PatientDetailItem(
+                        category: "Surname ",
+                        value: widget.selectedPatient.last_name,
+                      ),
+                    ],
+                  ),
+                  const SizedBox(height: 5),
+                  Row(
+                    children: [
+                      PatientDetailItem(
+                        category: "Cell No ",
+                        value: widget.selectedPatient.cell_no,
+                      ),
+                      PatientDetailItem(
+                        category: "Email  ",
+                        value: widget.selectedPatient.email,
+                      ),
+                      PatientDetailItem(
+                        category: "Address  ",
+                        value: widget.selectedPatient.address,
+                      ),
+                    ],
+                  ),
+                ],
+              ),
+              const SizedBox(height: 10),
+              const Text(
+                "Medical Aid Details",
+                textAlign: TextAlign.center,
+                style: TextStyle(
+                  fontSize: 25,
+                  fontWeight: FontWeight.bold,
+                ),
+              ),
+              const Divider(),
+              const SizedBox(height: 10),
+              Column(
+                children: [
+                  Row(
+                    children: [
+                      PatientDetailItem(
+                        category: "No. ",
+                        value: widget.selectedPatient.medical_aid_no,
+                      ),
+                      PatientDetailItem(
+                        category: "Name ",
+                        value: widget.selectedPatient.medical_aid_name,
+                      ),
+                      PatientDetailItem(
+                        category: "Scheme ",
+                        value: widget.selectedPatient.medical_aid_scheme,
+                      ),
+                    ],
+                  ),
+                ],
+              )
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
diff --git a/Frontend/patient_manager/lib/pages/patientView.dart b/Frontend/patient_manager/lib/pages/patientView.dart
index b0dcb909..d925d340 100644
--- a/Frontend/patient_manager/lib/pages/patientView.dart
+++ b/Frontend/patient_manager/lib/pages/patientView.dart
@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:patient_manager/components/PatientDetails.dart';
 import 'package:patient_manager/components/myAppBar.dart';
 import 'package:patient_manager/objects/patients.dart';
 
@@ -15,9 +16,17 @@ class _PatientViewState extends State<PatientView> {
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: const MyAppBar(barTitle: "Patient View"),
-      body: Center(
-        child: Text(widget.selectedPatient.first_name),
+      body: Padding(
+        padding: const EdgeInsets.symmetric(vertical: 10.0, horizontal: 15.0),
+        child: Column(
+          children: [
+            PatientDetails(selectedPatient: widget.selectedPatient),
+          ],
+        ),
       ),
     );
+    // Center(
+    //   child: Text(widget.selectedPatient.first_name),
+    // ),
   }
 }