diff --git a/app/src/components/DataRequirements.tsx b/app/src/components/DataRequirements.tsx
index 926cf3d8..98f3b621 100644
--- a/app/src/components/DataRequirements.tsx
+++ b/app/src/components/DataRequirements.tsx
@@ -1,6 +1,6 @@
 import { Accordion, Center, createStyles, em, getBreakpointValue, List, Paper, rem } from '@mantine/core';
 
-interface codeInterface {
+interface CodeInterface {
   code: string | undefined;
   system: string | undefined;
 }
@@ -22,15 +22,15 @@ const useStyles = createStyles(theme => ({
  */
 function DataRequirements({ type, extension, dateFilter, codeFilter }: fhir4.DataRequirement) {
   const { classes } = useStyles();
-  const codes: codeInterface[] = [];
+  const codes: CodeInterface[] = [];
 
-  const valueSets = codeFilter?.filter(function (x: fhir4.DataRequirementCodeFilter) {
-    return x?.valueSet !== undefined;
+  const codeFiltersWithVS = codeFilter?.filter(cf => {
+    return cf?.valueSet !== undefined;
   });
 
-  codeFilter?.forEach((arr: fhir4.DataRequirementCodeFilter) => {
-    arr?.code?.forEach((element: fhir4.Coding) => {
-      const code: codeInterface = { code: element?.code, system: element?.system };
+  codeFilter?.forEach(cf => {
+    cf?.code?.forEach(c => {
+      const code: CodeInterface = { code: c.code, system: c.system };
       codes.push(code);
     });
   });
@@ -41,7 +41,6 @@ function DataRequirements({ type, extension, dateFilter, codeFilter }: fhir4.Dat
         <Accordion variant="contained" radius="lg" defaultValue="customization">
           <Accordion.Item value="customization">
             <Accordion.Control>
-              {' '}
               <Center>
                 <h2>{type} </h2>
               </Center>
@@ -53,18 +52,16 @@ function DataRequirements({ type, extension, dateFilter, codeFilter }: fhir4.Dat
                   <br />
                 </List.Item>
                 <List withPadding>
-                  {extension?.map((item: any, index: any, index2: any) => (
+                  {extension?.map(e => (
                     <>
-                      {item?.url != undefined && (
-                        <List.Item key={index}>
-                          <b> URL: </b>
-                          {item.url}{' '}
-                        </List.Item>
-                      )}
-                      {item?.valueString != undefined && (
-                        <List.Item key={index2}>
+                      <List.Item>
+                        <b>URL:</b>
+                        {e.url}
+                      </List.Item>
+                      {e?.valueString && (
+                        <List.Item>
                           <b> ValueString: </b>
-                          {item.valueString}{' '}
+                          {e.valueString}
                         </List.Item>
                       )}
                       <br />
@@ -77,14 +74,14 @@ function DataRequirements({ type, extension, dateFilter, codeFilter }: fhir4.Dat
                       <b>DateFilter(s):</b>
                     </List.Item>
                     <List withPadding>
-                      {dateFilter?.map((item: fhir4.DataRequirementDateFilter, index: any, index2: any) => (
+                      {dateFilter?.map(data => (
                         <>
-                          <List.Item key={index}>
+                          <List.Item>
                             <b> Start Date: </b>
-                            {item?.valuePeriod?.start} <br />
+                            {data?.valuePeriod?.start} <br />
                           </List.Item>
-                          <List.Item key={index2}>
-                            <b> End Date: </b> {item?.valuePeriod?.end} <br />
+                          <List.Item>
+                            <b> End Date: </b> {data?.valuePeriod?.end} <br />
                           </List.Item>
                         </>
                       ))}
@@ -101,16 +98,16 @@ function DataRequirements({ type, extension, dateFilter, codeFilter }: fhir4.Dat
                       <b>Code(s):</b>
                     </List.Item>
                     <List withPadding>
-                      {codes?.map((item: any, index: any, index2: any) => (
+                      {codes.map(codeInterface => (
                         <>
-                          {item?.code && (
-                            <List.Item key={index}>
-                              <b> Code: </b> {item?.code} <br />
+                          {codeInterface.code && (
+                            <List.Item>
+                              <b> Code: </b> {codeInterface?.code} <br />
                             </List.Item>
                           )}
-                          {item?.system && (
-                            <List.Item key={index2}>
-                              <b> System: </b> {item?.system} <br />
+                          {codeInterface.system && (
+                            <List.Item>
+                              <b> System: </b> {codeInterface?.system} <br />
                             </List.Item>
                           )}
                           <br />
@@ -119,15 +116,15 @@ function DataRequirements({ type, extension, dateFilter, codeFilter }: fhir4.Dat
                     </List>
                   </List>
                 )}
-                {valueSets && valueSets.length > 0 && (
+                {codeFiltersWithVS && codeFiltersWithVS.length > 0 && (
                   <List withPadding>
                     <List.Item>
                       <b>Value Set(s):</b>
                     </List.Item>
                     <List withPadding>
-                      {valueSets?.map((item: any, index3: any) => (
-                        <List.Item key={index3}>
-                          {item?.valueSet} <br />
+                      {codeFiltersWithVS.map(c => (
+                        <List.Item>
+                          {c.valueSet} <br />
                         </List.Item>
                       ))}
                     </List>
diff --git a/app/src/pages/[resourceType]/[id].tsx b/app/src/pages/[resourceType]/[id].tsx
index b7f1f966..7169804f 100644
--- a/app/src/pages/[resourceType]/[id].tsx
+++ b/app/src/pages/[resourceType]/[id].tsx
@@ -1,5 +1,5 @@
 import { Prism } from '@mantine/prism';
-import { Button, Center, Divider, Group, SegmentedControl, Space, Stack, Tabs, Text } from '@mantine/core';
+import { Button, Center, Divider, Group, SegmentedControl, ScrollArea, Space, Stack, Tabs, Text } from '@mantine/core';
 import { notifications } from '@mantine/notifications';
 import React, { useEffect, useMemo, useState } from 'react';
 import { GetServerSideProps, InferGetServerSidePropsType } from 'next';
@@ -21,6 +21,7 @@ import DataReqs from '@/components/DataRequirements';
 export default function ResourceIDPage({ jsonData }: InferGetServerSidePropsType<typeof getServerSideProps>) {
   const resourceType = jsonData.resourceType;
   const [dataReqsView, setDataReqsView] = useState('raw');
+  const [height, setWindowHeight] = useState(0);
 
   const decodedCql = useMemo(() => {
     return decode('text/cql', jsonData);
@@ -41,6 +42,15 @@ export default function ResourceIDPage({ jsonData }: InferGetServerSidePropsType
     /* eslint-enable @typescript-eslint/no-explicit-any */
   }, []);
 
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowHeight(window.innerHeight);
+    };
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return window.removeEventListener('resize', handleResize);
+  }, []);
+
   const {
     data: dataRequirements,
     refetch,
@@ -162,34 +172,43 @@ export default function ResourceIDPage({ jsonData }: InferGetServerSidePropsType
           )}
           {dataRequirements?.resourceType === 'Library' && dataRequirements?.dataRequirement && (
             <Tabs.Panel value="data-requirements">
-              <Center>
-                {dataRequirements?.dataRequirement.length > 0 && (
-                  <SegmentedControl
-                    fullWidth
-                    value={dataReqsView}
-                    onChange={setDataReqsView}
-                    data={[
-                      { label: 'Raw Data Requirements', value: 'raw' },
-                      { label: 'Readable Data Requirements', value: 'readable' }
-                    ]}
-                  />
-                )}
-              </Center>
+              {dataRequirements?.dataRequirement.length > 0 && (
+                <>
+                  <Space h="md" />
+                  <Text c="dimmed">
+                    {' '}
+                    Number of Requirements:<b> {dataRequirements?.dataRequirement.length} </b>
+                  </Text>
+                  <Center>
+                    <SegmentedControl
+                      fullWidth
+                      value={dataReqsView}
+                      onChange={setDataReqsView}
+                      data={[
+                        { label: 'Raw Data Requirements', value: 'raw' },
+                        { label: 'Formatted Data Requirements', value: 'formatted' }
+                      ]}
+                    />
+                  </Center>
+                  <Space h="md" />
+                </>
+              )}
               {dataReqsView === 'raw' && (
                 <Prism language="json" colorScheme="light">
                   {JSON.stringify(dataRequirements, null, 2)}
                 </Prism>
               )}
-              {dataReqsView === 'readable' &&
-                dataRequirements?.dataRequirement.map((item: fhir4.DataRequirement, index: any) => (
-                  <DataReqs
-                    key={index}
-                    type={item?.type}
-                    codeFilter={item?.codeFilter}
-                    dateFilter={item?.dateFilter}
-                    extension={item?.extension}
-                  ></DataReqs>
-                ))}
+              <ScrollArea.Autosize mah={height * 0.8} type="always">
+                {dataReqsView === 'formatted' &&
+                  dataRequirements?.dataRequirement.map(data => (
+                    <DataReqs
+                      type={data.type}
+                      codeFilter={data.codeFilter}
+                      dateFilter={data.dateFilter}
+                      extension={data.extension}
+                    />
+                  ))}
+              </ScrollArea.Autosize>
             </Tabs.Panel>
           )}
         </Tabs>