diff --git a/pwa/src/components/DiagnosisFields.json b/pwa/src/components/DiagnosisFields.json
index 187804e..67c6e59 100644
--- a/pwa/src/components/DiagnosisFields.json
+++ b/pwa/src/components/DiagnosisFields.json
@@ -1,146 +1,186 @@
 {
     "diagnoses": [
         {
-            "name": "Asthma"
+            "name": "Asthma",
+            "id": "asthma"
         },
         {
-            "name": "Allergies"
+            "name": "Allergies",
+            "id": "allergies"
         },
         {
-            "name": "Anemia"
+            "name": "Anemia",
+            "id": "anemia"
         },
         {
-            "name": "Malnutrition"
+            "name": "Malnutrition",
+            "id": "malnutrition"
         },
         {
-            "name": "Depression"
+            "name": "Depression",
+            "id": "depression"
         },
         {
-            "name": "Diabetes"
+            "name": "Diabetes",
+            "id": "diabetes"
         },
         {
             "group-title": "Eye",
             "group": [
-                "Ptergium",
-                "Cataract",
-                "Dry Eye",
-                "Conjuntivitis"
+                {
+                    "name": "Ptergium",
+                    "id": "ptergium"
+                },
+                {
+                    "name": "Cataract",
+                    "id": "cataract"
+                },
+                {
+                    "name": "Dry Eye",
+                    "id": "dry-eye"
+                },
+                {
+                    "name": "Conjuntivitis",
+                    "id": "conjuntivitis"
+                }
             ]
         },
         {
-            "name": "Fever"
+            "name": "Fever",
+            "id": "fever"
         },
         {
-            "name": "Possible Malaria"
+            "name": "Possible Malaria",
+            "id": "malaria"
         },
         {
-            "name": "Filariasis"
+            "name": "Filariasis",
+            "id": "filariasis"
         },
         {
+            "id": "intestinal",
             "group-title": "Intestinal",
             "group": [
-                "Gastritis",
-                "GERD",
-                "Gastroenteritis",
-                "Dysentery",
-                "Possible Cholera"
+                { "name": "Gastritis", "id": "gastritis" },
+                { "name": "GERD", "id": "gerd" },
+                { "name": "Gastroenteritis", "id": "gastroenteritis" },
+                { "name": "Dysentery", "id": "dysentery" },
+                { "name": "Possible Cholera", "id": "cholera" }
             ]
         },
         {
-            "name": "Headache"
+            "name": "Headache",
+            "id": "headache"
         },
         {
             "name": "Hernia",
+            "id": "hernia",
             "radio-buttons": {
                 "radio-buttons-title": "Hernia Type",
                 "radio-buttons": [
-                    "Inguinal",
-                    "Umbilical",
-                    "Both"
+                    { "name": "Inguinal", "id": "inguinal" },
+                    { "name": "Umbilical", "id": "umbilical" },
+                    { "name": "Both", "id": "both" }
                 ]
             }
         },
         {
+            "id": "cardiovascular",
             "group-title": "Cardiovascular",
             "group": [
-                "Hypertension",
-                "Stroke",
-                "Angina",
-                "CHF"
+                { "name": "Hypertension", "id": "hypertension" },
+                { "name": "Stroke", "id": "stroke" },
+                { "name": "Angina", "id": "angina" },
+                { "name": "CHF", "id": "chf" }
             ]
         },
         {
-            "name": "Musculoskeletal Pain"
+            "name": "Musculoskeletal Pain",
+            "id": "musculoskeletal"
         },
         {
             "name": "Otitis",
+            "id": "otitis",
             "group-title": "",
             "group": [
-                "Pneumonia",
-                "Sinusitis"
+                { "name": "Pneumonia", "id": "pneumonia" },
+                { "name": "Sinusitis", "id": "sinusitis" }
             ],
             "radio-buttons": {
                 "radio-buttons-title": "",
                 "radio-buttons": [
-                    "Right",
-                    "Left",
-                    "Both"
+                    { "name": "Right", "id": "right" },
+                    { "name": "Left", "id": "left" },
+                    { "name": "Both", "id": "both" }
                 ]
             }
         },
         {
-            "name": "URI"
+            "name": "URI",
+            "id": "uri"
         },
         {
             "name": "Pregnancy",
+            "id": "pregnancy",
             "text-input-title": "Weeks",
             "text-input-type": "number"
         },
         {
             "group-title": "Dermatological",
+            "id": "dermatological",
             "group": [
-                "Atopic Derm",
-                "Fungal",
-                "Scabies",
-                "Impetigo",
-                "Tinea Capitus (kerion)"
+                { "name": "Atopic Derm", "id": "atopic-derm" },
+                { "name": "Fungal", "id": "fungal" },
+                { "name": "Scabies", "id": "scabies" },
+                { "name": "Impetigo", "id": "Impetigo" },
+                { "name": "Tinea Capitus (kerion)", "id": "tinea-capitus" }
             ]
         },
         {
-            "name": "Possible STD"
+            "name": "Possible STD",
+            "id": "std"
         },
         {
-            "name": "Possible TB"
+            "name": "Possible TB",
+            "id": "tb"
         },
         {
-            "name": "Possible Parasites"
+            "name": "Possible Parasites",
+            "id": "parasites"
         },
         {
-            "name": "UTI"
+            "name": "UTI",
+            "id": "uti"
         },
         {
             "group-title": "Vaginal",
+            "id": "vaginal",
             "group": [
-                "Vaginitis",
-                "Candidal",
-                "Trich",
-                "BV"
+                { "name": "Vaginitis", "id": "vaginitis" },
+                { "name": "Candidal", "id": "candidal" },
+                { "name": "Trich", "id": "trich" },
+                { "name": "BV", "id": "bv" }
             ]
         },
         {
-            "name": "Needs to see Dentist"
+            "name": "Needs to see Dentist",
+            "id": "dentist"
         },
         {
-            "name": "Needs to see Eye Doctor"
+            "name": "Needs to see Eye Doctor",
+            "id": "eye-doctor"
         },
         {
-            "name": "Surgical candidate"
+            "name": "Surgical candidate",
+            "id": "surgical-candidate"
         },
         {
-            "text-input-title": "Other Diagnosis"
+            "text-input-title": "Other Diagnosis",
+            "id": "other-diagnosis"
         },
         {
-            "text-input-title": "Diagnoses Comments"
+            "text-input-title": "Diagnoses Comments",
+            "id": "comments"
         }
     ]
-}
\ No newline at end of file
+}
diff --git a/pwa/src/components/DiagnosisForm.test.tsx b/pwa/src/components/DiagnosisForm.test.tsx
index e69de29..424037c 100644
--- a/pwa/src/components/DiagnosisForm.test.tsx
+++ b/pwa/src/components/DiagnosisForm.test.tsx
@@ -0,0 +1,8 @@
+import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import DiagnosisForm from "./DiagnosisForm";
+
+test("renders the form", async () => {
+    const dom = render(<DiagnosisForm />);
+    expect(dom.getByTestId("diagnosis-form-wrapper")).toBeTruthy();
+  });
\ No newline at end of file
diff --git a/pwa/src/components/DiagnosisForm.tsx b/pwa/src/components/DiagnosisForm.tsx
index f707741..f86fab5 100644
--- a/pwa/src/components/DiagnosisForm.tsx
+++ b/pwa/src/components/DiagnosisForm.tsx
@@ -28,71 +28,64 @@ Diagnosis Fields are stored in DiagnosisFields.json in the format:
 }
 */
 
-var diagnosisFields = data.diagnoses
+const diagnosisFields = data.diagnoses
 
-export default function Form(): ReactElement {
+export default function DiagnosisForm(): ReactElement {
     return (
-        <div>
-            {/* <List renderHeader={() => 'Patient Diagnosis'}> */}
-                {diagnosisFields.map((field) => {
-                    const formElements: ReactElement[] = []
+        <div id="diagnosis-form-wrapper" data-testid="diagnosis-form-wrapper">
+            {diagnosisFields.map((field) => {
+                const formElements: ReactElement[] = []
 
-                    if (field.name != null) {
-                        formElements.push(
-                            <CheckboxItem
-                                id={`${field.name.toLowerCase()}-button`}
-                            // key={field.name}
-                            // name={field.name.toLowerCase()}
-                            >
-                                {field.name}
+                if (field.name != null) {
+                    formElements.push(
+                        <CheckboxItem id={field.id} key={field.id}>
+                            {field.name}
+                        </CheckboxItem>,
+                    )
+                }
+
+                if (field['text-input-title'] != null) {
+                    formElements.push(
+                        <List renderHeader={() => field['text-input-title']}>
+                            <TextareaItem
+                                autoHeight
+                                // id={field['text-input-title'].toLowerCase()}
+                                id={field.id}
+                            />
+                        </List>,
+                    )
+                }
+
+                if (field.group != null) {
+                    const groupElements: ReactElement[] = []
+
+                    // add each group element to the internalElement arrat
+                    field.group.forEach((ele: any) => {
+                        groupElements.push(
+                            <CheckboxItem id={ele.id} key={ele.id}>
+                                {ele.name}
                             </CheckboxItem>,
                         )
-                    }
+                    })
 
-                    if (field['text-input-title'] != null) {
+                    // Render the entire list with the internal elements
+                    if (field['group-title'] != null) {
                         formElements.push(
-                            <List
-                                renderHeader={() => field['text-input-title']}
-                            >
-                                <TextareaItem
-                                    autoHeight
-                                    id={field['text-input-title'].toLowerCase()}
-                                />
+                            <List renderHeader={() => field['group-title']}>
+                                {groupElements}
                             </List>,
                         )
                     }
 
-                    if (field.group != null) {
-                        const groupElements: ReactElement[] = []
+                    formElements.push(<WhiteSpace size="lg" />)
+                }
 
-                        // add each group element to the internalElement arrat
-                        field.group.forEach((ele) => {
-                            groupElements.push(
-                                <CheckboxItem
-                                    id={`${ele.toLowerCase()}-checkbox`}
-                                    key={ele.toLowerCase()}
-                                >
-                                    {ele}
-                                </CheckboxItem>)
+                // TODO - Radio
+                if (field['radio-buttons'] != null) {
+                }
 
-                        })
-
-                        // Render the entire list with the internal elements
-                        if(field["group-title"] != null){
-                            formElements.push(
-                                <List
-                                renderHeader={() => field['group-title']}
-                                >{groupElements}
-                                </List>
-                            )
-                        }
-
-                        formElements.push(<WhiteSpace size="lg"/>)
-                    }
-
-                    return <> {formElements} </>
-                })}
-            {/* </List> */}
+                return <> {formElements} </>
+            })}
         </div>
     )
 }