diff --git a/README.md b/README.md
index a7c9c5c9..f416015c 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,5 @@
 [![CircleCI](https://circleci.com/gh/1uphealth/fhir-react/tree/master.svg?style=svg)](https://circleci.com/gh/1uphealth/fhir-react/tree/master)
-[![Storybook](https://github.com/storybookjs/brand/raw/master/badge/badge-storybook.svg?sanitize=true)](https://fhir-react-lib-test-storybook.s3.amazonaws.com/branch/release-0-3-11/index.html)
+[![Storybook](https://github.com/storybookjs/brand/raw/master/badge/badge-storybook.svg?sanitize=true)](https://fhir-react-lib-test-storybook.s3.amazonaws.com/branch/release-0-3-12/index.html)
 
 # fhir-react
 
@@ -157,6 +157,22 @@ const MyComponent = () => {
 };
 ```
 
+User can provide a number that can be assigned at the end of Accordion id. Not providing any number will cause a lodash uniqueId function to be used instead (default functionality up to this point).
+
+```jsx
+const MyComponent = () => {
+  const fhirResource = JSON.parse(fhirResourceAsJsonString);
+  
+  return (
+    <FhirResource
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.R4}
+      customId={id}
+    />
+  );
+};
+```
+
 ### `FhirResource` component props
 
 | Prop                 | Type                                                       | Default | Description                                                                                                                                                                                               |
diff --git a/package.json b/package.json
index 7b93ef68..85547f17 100755
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "fhir-react",
-  "version": "0.3.11",
+  "version": "0.3.12",
   "description": "React component library for displaying FHIR Resources ",
   "main": "build/index.js",
   "peerDependencies": {
diff --git a/src/components/containers/Accordion/Accordion.js b/src/components/containers/Accordion/Accordion.js
index 62dfbf61..f44297e4 100644
--- a/src/components/containers/Accordion/Accordion.js
+++ b/src/components/containers/Accordion/Accordion.js
@@ -6,12 +6,16 @@ const CHEVRON_DOWN_COLOR = '#6f83a9';
 const CHEVRON_UP_COLOR = '#2a6fd7';
 
 const Accordion = props => {
-  const { headerContent, bodyContent, onClick, rawOnClick } = props;
+  const { headerContent, bodyContent, onClick, rawOnClick, customId } = props;
   const [rotate, setRotate] = useState(false);
   const handleAccordionClick = () => setRotate(!rotate);
-  const accordionId = uniqueId(
-    `accordion-type-${headerContent.props.resourceName || 'default'}-`,
-  );
+
+  const accordionIdText = `accordion-type-${headerContent.props.resourceName ||
+    'default'}-`;
+  const accordionId =
+    typeof customId === 'number'
+      ? `${accordionIdText}${customId}`
+      : uniqueId(accordionIdText);
 
   const isAccordionOpenable = () => {
     if (bodyContent) {
diff --git a/src/components/resources/AdverseEvent/AdverseEvent.js b/src/components/resources/AdverseEvent/AdverseEvent.js
index dd29c670..2870df27 100644
--- a/src/components/resources/AdverseEvent/AdverseEvent.js
+++ b/src/components/resources/AdverseEvent/AdverseEvent.js
@@ -77,6 +77,7 @@ const AdverseEvent = ({
   fhirIcons,
   onClick,
   rawOnClick,
+  customId,
 }) => {
   let fhirResourceData = {};
   try {
@@ -172,6 +173,7 @@ const AdverseEvent = ({
         }
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </Root>
   );
diff --git a/src/components/resources/AllergyIntolerance/AllergyIntolerance.js b/src/components/resources/AllergyIntolerance/AllergyIntolerance.js
index 2c7d0474..ca2423c5 100644
--- a/src/components/resources/AllergyIntolerance/AllergyIntolerance.js
+++ b/src/components/resources/AllergyIntolerance/AllergyIntolerance.js
@@ -51,6 +51,7 @@ const dstu2DTO = fhirResource => {
     asserter,
   };
 };
+
 const stu3DTO = fhirResource => {
   const title = _get(fhirResource, 'code.coding.0.display');
   const status = _get(fhirResource, 'verificationStatus');
@@ -73,6 +74,7 @@ const stu3DTO = fhirResource => {
     hasNote,
   };
 };
+
 const r4DTO = fhirResource => {
   const title = _get(fhirResource, 'code.coding.0.display');
   const status = _get(fhirResource, 'verificationStatus.coding[0].display');
@@ -129,6 +131,7 @@ const AllergyIntolerance = ({
   fhirIcons,
   onClick,
   rawOnClick,
+  customId,
 }) => {
   let fhirResourceData = {};
   try {
@@ -239,6 +242,7 @@ const AllergyIntolerance = ({
         bodyContent={<Body tableData={tableData} />}
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </Root>
   );
diff --git a/src/components/resources/Appointment/Appointment.js b/src/components/resources/Appointment/Appointment.js
index 432a27f4..97372790 100644
--- a/src/components/resources/Appointment/Appointment.js
+++ b/src/components/resources/Appointment/Appointment.js
@@ -150,6 +150,7 @@ const Appointment = ({
   fhirIcons,
   onClick,
   rawOnClick,
+  customId,
 }) => {
   const {
     description,
@@ -261,6 +262,7 @@ const Appointment = ({
         }
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </Root>
   );
diff --git a/src/components/resources/Binary/Binary.js b/src/components/resources/Binary/Binary.js
index 93a7f054..912bbbc1 100644
--- a/src/components/resources/Binary/Binary.js
+++ b/src/components/resources/Binary/Binary.js
@@ -6,7 +6,7 @@ import Accordion from '../../containers/Accordion/Accordion';
 import { Body, Header } from '../../ui';
 
 const Binary = props => {
-  const { fhirResource, fhirIcons, rawOnClick } = props;
+  const { fhirResource, fhirIcons, rawOnClick, customId } = props;
 
   const loadBinaryFile = () => {
     switch (fhirResource.contentType) {
@@ -38,6 +38,7 @@ const Binary = props => {
         }
         bodyContent={<Body>{loadBinaryFile()}</Body>}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </div>
   );
diff --git a/src/components/resources/CarePlan/CarePlan.js b/src/components/resources/CarePlan/CarePlan.js
index 7f422751..c4824def 100644
--- a/src/components/resources/CarePlan/CarePlan.js
+++ b/src/components/resources/CarePlan/CarePlan.js
@@ -75,6 +75,7 @@ const dstu2DTO = fhirResource => {
     hasActivity,
   };
 };
+
 const stu3DTO = fhirResource => {
   let activity = _get(fhirResource, 'activity');
   const hasActivity = Array.isArray(activity);
@@ -168,6 +169,7 @@ const CarePlan = ({
   fhirIcons,
   onClick,
   rawOnClick,
+  customId,
 }) => {
   let fhirResourceData = {};
   try {
@@ -312,6 +314,7 @@ const CarePlan = ({
         }
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </Root>
   );
diff --git a/src/components/resources/CareTeam/CareTeam.js b/src/components/resources/CareTeam/CareTeam.js
index 2d10d0c9..c2410b47 100644
--- a/src/components/resources/CareTeam/CareTeam.js
+++ b/src/components/resources/CareTeam/CareTeam.js
@@ -89,6 +89,7 @@ const CareTeam = ({
   fhirIcons,
   onClick,
   rawOnClick,
+  customId,
 }) => {
   const {
     name,
@@ -174,6 +175,7 @@ const CareTeam = ({
         }
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </Root>
   );
diff --git a/src/components/resources/Claim/Claim.js b/src/components/resources/Claim/Claim.js
index 4269f048..a2331b91 100644
--- a/src/components/resources/Claim/Claim.js
+++ b/src/components/resources/Claim/Claim.js
@@ -105,6 +105,7 @@ const dstu2DTO = fhirResource => {
     items,
   };
 };
+
 const stu3DTO = fhirResource => {
   const status = _get(fhirResource, 'status');
   const typeCoding = _get(fhirResource, 'type.coding[0]');
@@ -304,6 +305,7 @@ const Claim = ({
   fhirIcons,
   onClick,
   rawOnClick,
+  customId,
 }) => {
   let fhirResourceData = {};
   try {
@@ -489,6 +491,7 @@ const Claim = ({
         }
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </Root>
   );
diff --git a/src/components/resources/ClaimResponse/ClaimResponse.js b/src/components/resources/ClaimResponse/ClaimResponse.js
index 3ad1ec1f..44c9d791 100644
--- a/src/components/resources/ClaimResponse/ClaimResponse.js
+++ b/src/components/resources/ClaimResponse/ClaimResponse.js
@@ -291,6 +291,7 @@ const ClaimResponse = ({
   fhirIcons,
   onClick,
   rawOnClick,
+  customId,
 }) => {
   let fhirResourceData = {};
   try {
@@ -456,6 +457,7 @@ const ClaimResponse = ({
         }
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </Root>
   );
diff --git a/src/components/resources/Condition/Condition.js b/src/components/resources/Condition/Condition.js
index 23491c8e..f76ce077 100644
--- a/src/components/resources/Condition/Condition.js
+++ b/src/components/resources/Condition/Condition.js
@@ -93,6 +93,7 @@ const Condition = ({
   fhirIcons,
   onClick,
   rawOnClick,
+  customId,
 }) => {
   const {
     codeText,
@@ -164,6 +165,7 @@ const Condition = ({
         bodyContent={<Body tableData={tableData} />}
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </Root>
   );
diff --git a/src/components/resources/Coverage/Coverage.js b/src/components/resources/Coverage/Coverage.js
index e1b480e4..c151e2fc 100644
--- a/src/components/resources/Coverage/Coverage.js
+++ b/src/components/resources/Coverage/Coverage.js
@@ -60,6 +60,7 @@ const stu3DTO = fhirResource => {
     hasExtension,
   };
 };
+
 const r4DTO = fhirResource => {
   const issuer = _get(fhirResource, 'payor.0');
   const planId = _get(fhirResource, 'class.plan');
@@ -120,6 +121,7 @@ const Coverage = ({
   fhirIcons,
   onClick,
   rawOnClick,
+  customId,
 }) => {
   let fhirResourceData = {};
   try {
@@ -240,6 +242,7 @@ const Coverage = ({
         bodyContent={<Body tableData={tableData} />}
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </Root>
   );
diff --git a/src/components/resources/Device/Device.js b/src/components/resources/Device/Device.js
index 5d0a8905..5f43c881 100644
--- a/src/components/resources/Device/Device.js
+++ b/src/components/resources/Device/Device.js
@@ -42,6 +42,7 @@ const dstu2DTO = fhirResource => {
     getExpiry,
   };
 };
+
 const stu3DTO = fhirResource => {
   const getUdi = _get(fhirResource, 'udi.name');
   const hasExpiry = _has(fhirResource, 'expirationDate');
@@ -108,6 +109,7 @@ const Device = ({
   fhirIcons,
   onClick,
   rawOnClick,
+  customId,
 }) => {
   let fhirResourceData = {};
   try {
@@ -186,6 +188,7 @@ const Device = ({
         }
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </Root>
   );
diff --git a/src/components/resources/DiagnosticReport/DiagnosticReport.js b/src/components/resources/DiagnosticReport/DiagnosticReport.js
index c6bcb357..9de4e068 100644
--- a/src/components/resources/DiagnosticReport/DiagnosticReport.js
+++ b/src/components/resources/DiagnosticReport/DiagnosticReport.js
@@ -99,6 +99,7 @@ const DiagnosticReport = ({
   fhirIcons,
   onClick,
   rawOnClick,
+  customId,
 }) => {
   let fhirResourceData = {};
   try {
@@ -172,6 +173,7 @@ const DiagnosticReport = ({
         bodyContent={<Body tableData={tableData} />}
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </Root>
   );
diff --git a/src/components/resources/DocumentReference/DocumentReference.js b/src/components/resources/DocumentReference/DocumentReference.js
index 242a603a..20be4afa 100644
--- a/src/components/resources/DocumentReference/DocumentReference.js
+++ b/src/components/resources/DocumentReference/DocumentReference.js
@@ -222,6 +222,7 @@ const DocumentReference = ({
   fhirIcons,
   onClick,
   rawOnClick,
+  customId,
 }) => {
   let fhirResourceData = {};
   try {
@@ -344,6 +345,7 @@ const DocumentReference = ({
         }
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </Root>
   );
diff --git a/src/components/resources/Encounter/Encounter.js b/src/components/resources/Encounter/Encounter.js
index 74af03cd..92b17727 100644
--- a/src/components/resources/Encounter/Encounter.js
+++ b/src/components/resources/Encounter/Encounter.js
@@ -166,6 +166,7 @@ const Encounter = ({
   fhirIcons,
   onClick,
   rawOnClick,
+  customId,
 }) => {
   let fhirResourceData = {};
   try {
@@ -237,6 +238,7 @@ const Encounter = ({
         }
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </Root>
   );
diff --git a/src/components/resources/ExplanationOfBenefit/ExplanationOfBenefit.js b/src/components/resources/ExplanationOfBenefit/ExplanationOfBenefit.js
index fc3b5c48..255d5ebb 100644
--- a/src/components/resources/ExplanationOfBenefit/ExplanationOfBenefit.js
+++ b/src/components/resources/ExplanationOfBenefit/ExplanationOfBenefit.js
@@ -235,6 +235,7 @@ const ExplanationOfBenefit = ({
   fhirIcons,
   onClick,
   rawOnClick,
+  customId,
 }) => {
   let fhirResourceData = {};
   try {
@@ -517,9 +518,22 @@ const ExplanationOfBenefit = ({
                           return key !== 'sequence' && key !== 'category';
                         },
                       );
-                      const infoStatus = _get(informationItem, infoKey);
-                      const StatusComponent =
-                        infoKey.toString() === 'timingDate' ? Date : Quantity;
+                      let infoStatus = _get(informationItem, infoKey);
+                      let StatusComponent;
+                      switch (infoKey.toString()) {
+                        case 'timingDate':
+                          StatusComponent = Date;
+                          break;
+                        case 'timingPeriod':
+                          StatusComponent = Period;
+                          break;
+                        case 'valueQuantity':
+                          StatusComponent = Quantity;
+                          break;
+                        default:
+                          StatusComponent = Coding;
+                          infoStatus = _get(infoStatus, 'coding', '')[0];
+                      }
 
                       return (
                         <TableRow key={`serviceItem-${i}`}>
@@ -550,6 +564,7 @@ const ExplanationOfBenefit = ({
         }
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </Root>
   );
diff --git a/src/components/resources/FamilyMemberHistory/FamilyMemberHistory.js b/src/components/resources/FamilyMemberHistory/FamilyMemberHistory.js
index fc2fc91d..f788f8b0 100644
--- a/src/components/resources/FamilyMemberHistory/FamilyMemberHistory.js
+++ b/src/components/resources/FamilyMemberHistory/FamilyMemberHistory.js
@@ -76,6 +76,7 @@ const FamilyMemberHistory = ({
   fhirIcons,
   onClick,
   rawOnClick,
+  customId,
 }) => {
   let fhirResourceData = {};
   try {
@@ -142,6 +143,7 @@ const FamilyMemberHistory = ({
         bodyContent={<Body tableData={tableData} />}
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </Root>
   );
diff --git a/src/components/resources/Generic/Generic.js b/src/components/resources/Generic/Generic.js
index 41e5dcf9..be4427c5 100644
--- a/src/components/resources/Generic/Generic.js
+++ b/src/components/resources/Generic/Generic.js
@@ -4,7 +4,13 @@ import _get from 'lodash/get';
 import { Root, Header } from '../../ui';
 import Accordion from '../../containers/Accordion';
 
-const Generic = ({ fhirResource, fhirIcons, onClick, rawOnClick }) => {
+const Generic = ({
+  fhirResource,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+  customId,
+}) => {
   const title = fhirResource
     ? `${fhirResource.resourceType}/${fhirResource.id}`
     : `Unknown Resource`;
@@ -31,6 +37,7 @@ const Generic = ({ fhirResource, fhirIcons, onClick, rawOnClick }) => {
         }
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </Root>
   );
diff --git a/src/components/resources/Goal/Goal.js b/src/components/resources/Goal/Goal.js
index 92c385b2..7c7c96ea 100644
--- a/src/components/resources/Goal/Goal.js
+++ b/src/components/resources/Goal/Goal.js
@@ -105,6 +105,7 @@ const Goal = ({
   fhirIcons,
   onClick,
   rawOnClick,
+  customId,
 }) => {
   let fhirResourceData = {};
   try {
@@ -235,6 +236,7 @@ const Goal = ({
         bodyContent={<Body tableData={tableData} />}
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </Root>
   );
diff --git a/src/components/resources/Immunization/Immunization.js b/src/components/resources/Immunization/Immunization.js
index f6152eef..b90e204a 100644
--- a/src/components/resources/Immunization/Immunization.js
+++ b/src/components/resources/Immunization/Immunization.js
@@ -109,6 +109,7 @@ const Immunization = ({
   fhirIcons,
   onClick,
   rawOnClick,
+  customId,
 }) => {
   const {
     title,
@@ -248,6 +249,7 @@ const Immunization = ({
         bodyContent={<Body tableData={tableData} />}
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </Root>
   );
diff --git a/src/components/resources/List/List.js b/src/components/resources/List/List.js
index ce9a8e6b..f8bb6519 100644
--- a/src/components/resources/List/List.js
+++ b/src/components/resources/List/List.js
@@ -132,6 +132,7 @@ const List = ({
   fhirIcons,
   onClick,
   rawOnClick,
+  customId,
 }) => {
   let fhirResourceData = {};
   try {
@@ -293,6 +294,7 @@ const List = ({
         }
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </Root>
   );
diff --git a/src/components/resources/Location/Location.js b/src/components/resources/Location/Location.js
index c98f1502..0ae734a8 100644
--- a/src/components/resources/Location/Location.js
+++ b/src/components/resources/Location/Location.js
@@ -9,7 +9,13 @@ import CodeableConcept from '../../datatypes/CodeableConcept';
 import Reference from '../../datatypes/Reference';
 import Accordion from '../../containers/Accordion';
 
-const Location = ({ fhirResource, fhirIcons, onClick, rawOnClick }) => {
+const Location = ({
+  fhirResource,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+  customId,
+}) => {
   const name = _get(fhirResource, 'name');
   const status = _get(fhirResource, 'status');
   const description = _get(fhirResource, 'description');
@@ -83,6 +89,7 @@ const Location = ({ fhirResource, fhirIcons, onClick, rawOnClick }) => {
         bodyContent={<Body tableData={tableData} />}
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </Root>
   );
diff --git a/src/components/resources/Medication/Medication.js b/src/components/resources/Medication/Medication.js
index 36b5d1c9..7be00203 100644
--- a/src/components/resources/Medication/Medication.js
+++ b/src/components/resources/Medication/Medication.js
@@ -168,6 +168,7 @@ const Medication = ({
   fhirIcons,
   onClick,
   rawOnClick,
+  customId,
 }) => {
   let fhirResourceData = {};
   try {
@@ -281,6 +282,7 @@ const Medication = ({
         }
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </Root>
   );
diff --git a/src/components/resources/MedicationAdministration/MedicationAdministration.js b/src/components/resources/MedicationAdministration/MedicationAdministration.js
index 9055eba3..ce77acb4 100644
--- a/src/components/resources/MedicationAdministration/MedicationAdministration.js
+++ b/src/components/resources/MedicationAdministration/MedicationAdministration.js
@@ -28,12 +28,11 @@ const commonDTO = fhirResource => {
 
   return {
     medicationReference,
-
     dosageRoute,
-
     status,
   };
 };
+
 const dstu2DTO = fhirResource => {
   const periodTimeStart = _get(fhirResource, 'effectiveTimePeriod.start');
   const periodTimeEnd = _get(fhirResource, 'effectiveTimePeriod.end');
@@ -50,6 +49,7 @@ const dstu2DTO = fhirResource => {
     dosageQuantity,
   };
 };
+
 const stu3DTO = fhirResource => {
   const periodTimeStart = _get(fhirResource, 'effectivePeriod.start');
   const periodTimeEnd = _get(fhirResource, 'effectivePeriod.end');
@@ -116,6 +116,7 @@ const MedicationAdministration = ({
   fhirIcons,
   onClick,
   rawOnClick,
+  customId,
 }) => {
   let fhirResourceData = {};
   try {
@@ -215,6 +216,7 @@ const MedicationAdministration = ({
         }
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </Root>
   );
diff --git a/src/components/resources/MedicationDispense/MedicationDispense.js b/src/components/resources/MedicationDispense/MedicationDispense.js
index 98461dd5..afd86bbe 100644
--- a/src/components/resources/MedicationDispense/MedicationDispense.js
+++ b/src/components/resources/MedicationDispense/MedicationDispense.js
@@ -165,6 +165,7 @@ const MedicationDispense = ({
   fhirIcons,
   onClick,
   rawOnClick,
+  customId,
 }) => {
   let fhirResourceData = {};
   try {
@@ -245,6 +246,7 @@ const MedicationDispense = ({
         }
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </Root>
   );
diff --git a/src/components/resources/MedicationKnowledge/MedicationKnowledge.js b/src/components/resources/MedicationKnowledge/MedicationKnowledge.js
index daf2152d..4e8121f1 100644
--- a/src/components/resources/MedicationKnowledge/MedicationKnowledge.js
+++ b/src/components/resources/MedicationKnowledge/MedicationKnowledge.js
@@ -110,6 +110,7 @@ const MedicationKnowledge = ({
   fhirIcons,
   onClick,
   rawOnClick,
+  customId,
 }) => {
   let fhirResourceData = {};
   try {
@@ -254,6 +255,7 @@ const MedicationKnowledge = ({
         }
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </Root>
   );
diff --git a/src/components/resources/MedicationOrder/MedicationOrder.js b/src/components/resources/MedicationOrder/MedicationOrder.js
index 511173bc..45907bdf 100644
--- a/src/components/resources/MedicationOrder/MedicationOrder.js
+++ b/src/components/resources/MedicationOrder/MedicationOrder.js
@@ -8,7 +8,13 @@ import Coding from '../../datatypes/Coding';
 
 import { Root, Header, Body } from '../../ui';
 
-const MedicationOrder = ({ fhirResource, fhirIcons, onClick, rawOnClick }) => {
+const MedicationOrder = ({
+  fhirResource,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+  customId,
+}) => {
   const medicationReference = _get(fhirResource, 'medicationReference');
   const medicationCodeableConcept = _get(
     fhirResource,
@@ -66,6 +72,7 @@ const MedicationOrder = ({ fhirResource, fhirIcons, onClick, rawOnClick }) => {
         bodyContent={<Body tableData={tableData} />}
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </Root>
   );
diff --git a/src/components/resources/MedicationRequest/MedicationRequest.js b/src/components/resources/MedicationRequest/MedicationRequest.js
index 7a676ef9..b28a9d21 100644
--- a/src/components/resources/MedicationRequest/MedicationRequest.js
+++ b/src/components/resources/MedicationRequest/MedicationRequest.js
@@ -14,6 +14,7 @@ const MedicationRequest = ({
   fhirIcons,
   onClick,
   rawOnClick,
+  customId,
 }) => {
   const medicationReference = _get(fhirResource, 'medicationReference');
   const medicationCodeableConcept = _get(
@@ -94,6 +95,7 @@ const MedicationRequest = ({
         bodyContent={<Body tableData={tableData} />}
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </Root>
   );
diff --git a/src/components/resources/MedicationStatement/MedicationStatement.js b/src/components/resources/MedicationStatement/MedicationStatement.js
index b84c0526..8df37aa4 100644
--- a/src/components/resources/MedicationStatement/MedicationStatement.js
+++ b/src/components/resources/MedicationStatement/MedicationStatement.js
@@ -113,6 +113,7 @@ const MedicationStatement = ({
   fhirIcons,
   onClick,
   rawOnClick,
+  customId,
 }) => {
   let fhirResourceData = {};
   try {
@@ -207,6 +208,7 @@ const MedicationStatement = ({
         }
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </Root>
   );
diff --git a/src/components/resources/Observation/Observation.js b/src/components/resources/Observation/Observation.js
index 7734dbfd..c9fe06fe 100644
--- a/src/components/resources/Observation/Observation.js
+++ b/src/components/resources/Observation/Observation.js
@@ -18,7 +18,13 @@ import {
 } from '../../ui';
 import Reference from '../../datatypes/Reference';
 
-const Observation = ({ fhirResource, fhirIcons, onClick, rawOnClick }) => {
+const Observation = ({
+  fhirResource,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+  customId,
+}) => {
   const effectiveDate = _get(fhirResource, 'effectiveDateTime');
   const codeCodingDisplay = _get(fhirResource, 'code.coding.0.display');
   const codeText = _get(fhirResource, 'code.text', '');
@@ -116,6 +122,7 @@ const Observation = ({ fhirResource, fhirIcons, onClick, rawOnClick }) => {
         }
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </Root>
   );
diff --git a/src/components/resources/Organization/Organization.js b/src/components/resources/Organization/Organization.js
index 6fa953f8..f718700a 100644
--- a/src/components/resources/Organization/Organization.js
+++ b/src/components/resources/Organization/Organization.js
@@ -61,6 +61,7 @@ const Organization = ({
   fhirIcons,
   onClick,
   rawOnClick,
+  customId,
 }) => {
   let fhirResourceData = {};
   try {
@@ -135,6 +136,7 @@ const Organization = ({
         bodyContent={<Body tableData={tableData} />}
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </Root>
   );
diff --git a/src/components/resources/Patient/Patient.js b/src/components/resources/Patient/Patient.js
index 89494f73..f9adbd0b 100644
--- a/src/components/resources/Patient/Patient.js
+++ b/src/components/resources/Patient/Patient.js
@@ -48,6 +48,7 @@ function Patient(props) {
     fhirIcons,
     onClick,
     rawOnClick,
+    customId,
   } = props;
 
   const id = getId(fhirResource);
@@ -150,6 +151,7 @@ function Patient(props) {
         bodyContent={<Body tableData={tableData} />}
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </Root>
   );
diff --git a/src/components/resources/Practitioner/Practitioner.js b/src/components/resources/Practitioner/Practitioner.js
index 840c29fe..42fdeb58 100644
--- a/src/components/resources/Practitioner/Practitioner.js
+++ b/src/components/resources/Practitioner/Practitioner.js
@@ -38,12 +38,14 @@ const commonDTO = fhirResource => {
     birthDate,
   };
 };
+
 const dstu2DTO = fhirResource => {
   const name = _get(fhirResource, 'name');
   return {
     name,
   };
 };
+
 const stu3DTO = fhirResource => {
   const name = _get(fhirResource, 'name.0');
   const address = _get(fhirResource, 'address.0');
@@ -88,6 +90,7 @@ const Practitioner = ({
   fhirIcons,
   onClick,
   rawOnClick,
+  customId,
 }) => {
   let fhirResourceData = {};
   try {
@@ -168,6 +171,7 @@ const Practitioner = ({
         bodyContent={<Body tableData={tableData} />}
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </Root>
   );
diff --git a/src/components/resources/PractitionerRole/PractitionerRole.js b/src/components/resources/PractitionerRole/PractitionerRole.js
index 1f9f826c..072fdf0c 100644
--- a/src/components/resources/PractitionerRole/PractitionerRole.js
+++ b/src/components/resources/PractitionerRole/PractitionerRole.js
@@ -49,6 +49,7 @@ const PractitionerRole = ({
   fhirIcons,
   onClick,
   rawOnClick,
+  customId,
 }) => {
   let fhirResourceData = {};
   try {
@@ -108,6 +109,7 @@ const PractitionerRole = ({
         bodyContent={<Body tableData={tableData} />}
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </Root>
   );
diff --git a/src/components/resources/Procedure/Procedure.js b/src/components/resources/Procedure/Procedure.js
index 7093a58d..536b4377 100644
--- a/src/components/resources/Procedure/Procedure.js
+++ b/src/components/resources/Procedure/Procedure.js
@@ -14,7 +14,13 @@ import _has from 'lodash/has';
 import { isNotEmptyArray } from '../../../utils';
 import { Value } from '../../ui';
 
-const Procedure = ({ fhirResource, fhirIcons, onClick, rawOnClick }) => {
+const Procedure = ({
+  fhirResource,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+  customId,
+}) => {
   const display =
     _get(fhirResource, 'code.coding[0].display') ||
     _get(fhirResource, 'code.text');
@@ -126,6 +132,7 @@ const Procedure = ({ fhirResource, fhirIcons, onClick, rawOnClick }) => {
         bodyContent={<Body tableData={tableData} />}
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </Root>
   );
diff --git a/src/components/resources/Questionnaire/Questionnaire.js b/src/components/resources/Questionnaire/Questionnaire.js
index 257b81b7..0ec62b58 100644
--- a/src/components/resources/Questionnaire/Questionnaire.js
+++ b/src/components/resources/Questionnaire/Questionnaire.js
@@ -81,6 +81,7 @@ const Questionnaire = ({
   fhirIcons,
   onClick,
   rawOnClick,
+  customId,
 }) => {
   let fhirResourceData = {};
 
@@ -121,6 +122,7 @@ const Questionnaire = ({
         }
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </Root>
   );
diff --git a/src/components/resources/QuestionnaireResponse/QuestionnaireResponse.js b/src/components/resources/QuestionnaireResponse/QuestionnaireResponse.js
index f3cb4182..a0c5beda 100644
--- a/src/components/resources/QuestionnaireResponse/QuestionnaireResponse.js
+++ b/src/components/resources/QuestionnaireResponse/QuestionnaireResponse.js
@@ -77,6 +77,7 @@ const QuestionnaireResponse = ({
   fhirIcons,
   onClick,
   rawOnClick,
+  customId,
 }) => {
   let fhirResourceData = {};
 
@@ -141,6 +142,7 @@ const QuestionnaireResponse = ({
         }
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </Root>
   );
diff --git a/src/components/resources/ReferralRequest/ReferralRequest.js b/src/components/resources/ReferralRequest/ReferralRequest.js
index 05efe214..672b1892 100644
--- a/src/components/resources/ReferralRequest/ReferralRequest.js
+++ b/src/components/resources/ReferralRequest/ReferralRequest.js
@@ -76,6 +76,7 @@ const ReferralRequest = ({
   fhirIcons,
   onClick,
   rawOnClick,
+  customId,
 }) => {
   let fhirResourceData = {};
   try {
@@ -157,6 +158,7 @@ const ReferralRequest = ({
         }
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </Root>
   );
diff --git a/src/components/resources/RelatedPerson/RelatedPerson.js b/src/components/resources/RelatedPerson/RelatedPerson.js
index 800cb9dd..b10f69de 100644
--- a/src/components/resources/RelatedPerson/RelatedPerson.js
+++ b/src/components/resources/RelatedPerson/RelatedPerson.js
@@ -73,6 +73,7 @@ const RelatedPerson = ({
   fhirIcons,
   onClick,
   rawOnClick,
+  customId,
 }) => {
   let fhirResourceData = {};
   try {
@@ -146,6 +147,7 @@ const RelatedPerson = ({
         bodyContent={<Body tableData={tableData} />}
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </Root>
   );
diff --git a/src/components/resources/ResearchStudy/ResearchStudy.js b/src/components/resources/ResearchStudy/ResearchStudy.js
index 6e911420..3e22f28c 100644
--- a/src/components/resources/ResearchStudy/ResearchStudy.js
+++ b/src/components/resources/ResearchStudy/ResearchStudy.js
@@ -100,6 +100,7 @@ const ResearchStudy = ({
   fhirIcons,
   onClick,
   rawOnClick,
+  customId,
 }) => {
   let fhirResourceData = {};
   try {
@@ -296,6 +297,7 @@ const ResearchStudy = ({
         bodyContent={<Body tableData={tableData} />}
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </Root>
   );