diff --git a/src/ui/components/Layout/Layout.jsx b/src/ui/components/Layout/Layout.jsx
index 371c507..3c5d711 100644
--- a/src/ui/components/Layout/Layout.jsx
+++ b/src/ui/components/Layout/Layout.jsx
@@ -167,7 +167,7 @@ export default function Layout({ routes }) {
           }}
         >
           <Toolbar />
-          <Container sx={{ mt: 4, mb: 4 }} style={{width: "100%"}} >
+          <Container sx={{ mt: 4, mb: 4 }} style={{width: "100%"}} maxWidth={false} >
             <Grid container spacing={3} style={{width: "100%"}}>
               <center style={{width: "100%"}}>
                 <RouterProvider router={hashRouter} />
diff --git a/src/ui/components/PatientViewer/EncounterGroupedRecord.jsx b/src/ui/components/PatientViewer/EncounterGroupedRecord.jsx
index 435a2f5..47f8093 100644
--- a/src/ui/components/PatientViewer/EncounterGroupedRecord.jsx
+++ b/src/ui/components/PatientViewer/EncounterGroupedRecord.jsx
@@ -56,6 +56,16 @@ const EncounterGroupedRecord = props => {
         isMatchingReference(e, r.context.encounter[0]?.reference, 'Encounter')
       );
     const medias = getByType('Media');
+
+    medias.forEach(m => {
+      if (m.partOf && m.partOf[0]) {
+        const partOf = allResources.find(r => `urn:uuid:${r.id}` === m.partOf[0].reference);
+
+        if (partOf?.resourceType === 'ImagingStudy') {
+          m.partOf[0].resource = partOf;
+        }
+      }
+    });
     // const reports = getByType('DiagnosticReport');
 
     // reports.forEach(r => {
diff --git a/src/ui/components/PatientViewer/EncounterSection.jsx b/src/ui/components/PatientViewer/EncounterSection.jsx
index bfb3340..1694202 100644
--- a/src/ui/components/PatientViewer/EncounterSection.jsx
+++ b/src/ui/components/PatientViewer/EncounterSection.jsx
@@ -27,7 +27,7 @@ const COLUMNS = [
   { key: 'code', name: 'Code' },
   { key: 'description', name: 'Description',
     colSpan: (args) => {
-      if (args.type === 'ROW' && (args.row.type === 'Media' || args.row.type === 'Note')) {
+      if (args.type === 'ROW' && args.row.type === 'Note') {
         return 3;
       }
       return 1;
@@ -225,8 +225,28 @@ const ROW_FUNCTIONS =
         key: 'type',
         getter: () => 'Media'
       },
+      {
+        key: 'description', 
+        getter: m => {
+          let codeDisplay = '';
+          try {
+            codeDisplay = m.partOf[0].resource.procedureCode[0].coding[0].display + '\n';
+          } catch (e) {}
+
+          let title = '';
+          try {
+            const myIdentifer = m.identifier[0].value; // "urn:oid:1.2.840.99999999.1.1.33607723.407560999967"
+            const instance = m.partOf[0].resource.series[0].instance.find(i => `urn:oid:${i.uid}` === myIdentifer);
+            if (instance?.title) {
+              title = instance.title;
+            }
+          } catch (e) {}
+
+          return codeDisplay + title;
+        }
+      },
       { 
-        key: 'description',
+        key: 'details',
         getter: m => extractMedia(m) 
       },
       // VIEW_FHIR // temporarily disabled
@@ -258,7 +278,7 @@ const EncounterSection = ({encounterData}) => {
           const formatter = FORMATTERS[c.format];
           let result;
           try {
-            result = c.getter(rawRow);
+            result = c.getter(rawRow, encounterData);
           } catch (e) {
             console.error(e);
             result = undefined;
diff --git a/src/ui/components/PatientViewer/FilterPresets.jsx b/src/ui/components/PatientViewer/FilterPresets.jsx
index 78811ef..3ba785f 100644
--- a/src/ui/components/PatientViewer/FilterPresets.jsx
+++ b/src/ui/components/PatientViewer/FilterPresets.jsx
@@ -13,7 +13,7 @@ const DR_CONDITIONS = [
 ];
 
 const DR_OBSERVATIONS = [
-  '413078003', // visual acuity
+  '413077008', '413078003', // visual acuity L/R
   '41633001', // iop
   '71491-5', '71490-7', // severity L / R,
   '4548-4', // hba1c
@@ -65,7 +65,7 @@ const FILTER_PRESETS = Object.freeze({
     mode: 'include',
     filterOnGroupByEncounter: true,
     filters: {
-      Encounter: ["Encounter.type.coding.code = '185349003'"],
+      Encounter: ["Encounter.type.coding.code = '36228007'"],
       Condition: [`Condition.code.coding.code in (${fhirList(DR_CONDITIONS)})`],
       Observation: [`Observation.code.coding.where($this.code in (${fhirList(DR_OBSERVATIONS)}))`],
       CarePlan: [],
diff --git a/src/ui/components/PatientViewer/PatientViewer.jsx b/src/ui/components/PatientViewer/PatientViewer.jsx
index d51916b..2874b06 100644
--- a/src/ui/components/PatientViewer/PatientViewer.jsx
+++ b/src/ui/components/PatientViewer/PatientViewer.jsx
@@ -294,6 +294,7 @@ const EntireRecord = props => {
 
   return (
     <Section
+      allResources={allResources}
       conditions={conditions}
       medications={medications}
       observations={observations}
@@ -314,19 +315,20 @@ const isNotEmpty = rows => rows != null && rows.length > 0;
 
 const Section = props => {
   const show = props.showEmptySections ? _rows => true : rows => isNotEmpty(rows);
+  const allResources = props.allResources;
   return (
     <div>
-      {show(props.conditions) && <ConditionsTable rows={props.conditions} />}
-      {show(props.medications) && <MedicationRequestsTable rows={props.medications} />}
-      {show(props.observations) && <ObservationsTable rows={props.observations} />}
-      {show(props.reports) && <ReportsTable rows={props.reports} />}
-      {show(props.careplans) && <CarePlansTable rows={props.careplans} />}
-      {show(props.procedures) && <ProceduresTable rows={props.procedures} />}
-      {show(props.encounters) && <EncountersTable rows={props.encounters} />}
-      {show(props.allergies) && <AllergiesTable rows={props.allergies} />}
-      {show(props.immunizations) && <ImmunizationsTable rows={props.immunizations} />}
-      {show(props.documents) && <DocumentReferencesTable rows={props.documents} />}
-      {show(props.medias) && <MediasTable rows={props.medias} />}
+      {show(props.conditions) && <ConditionsTable rows={props.conditions} allResources={allResources} />}
+      {show(props.medications) && <MedicationRequestsTable rows={props.medications} allResources={allResources} />}
+      {show(props.observations) && <ObservationsTable rows={props.observations} allResources={allResources} />}
+      {show(props.reports) && <ReportsTable rows={props.reports} allResources={allResources} />}
+      {show(props.careplans) && <CarePlansTable rows={props.careplans} allResources={allResources} />}
+      {show(props.procedures) && <ProceduresTable rows={props.procedures} allResources={allResources} />}
+      {show(props.encounters) && <EncountersTable rows={props.encounters} allResources={allResources} />}
+      {show(props.allergies) && <AllergiesTable rows={props.allergies} allResources={allResources} />}
+      {show(props.immunizations) && <ImmunizationsTable rows={props.immunizations} allResources={allResources} />}
+      {show(props.documents) && <DocumentReferencesTable rows={props.documents} allResources={allResources} />}
+      {show(props.medias) && <MediasTable rows={props.medias} allResources={allResources} />}
     </div>
   );
 };
diff --git a/src/ui/components/PatientViewer/utils.jsx b/src/ui/components/PatientViewer/utils.jsx
index 6a817ff..4f3061f 100644
--- a/src/ui/components/PatientViewer/utils.jsx
+++ b/src/ui/components/PatientViewer/utils.jsx
@@ -57,6 +57,6 @@ export const extractMedia = m => {
   const data = m.content.data;
   const url = `data:${contentType};base64, ${data}`;
   return (
-    <a href={url} target="_blank"> <img src={url} class="imagemedia" title="Click to open full-size" /> </a>
+    <a href={url} target="_blank"> <img src={url} className="imagemedia" title="Click to open full-size" /> </a>
     )
 };
diff --git a/src/ui/components/ResourceTables/ResourceTables.jsx b/src/ui/components/ResourceTables/ResourceTables.jsx
index 4f7f6d1..0855d77 100644
--- a/src/ui/components/ResourceTables/ResourceTables.jsx
+++ b/src/ui/components/ResourceTables/ResourceTables.jsx
@@ -360,6 +360,18 @@ class MediasTable extends GenericTable {
     title: 'Images',
     columns: [
         { name: 'Code', getter: m => m.partOf[0].resource.procedureCode[0].coding[0].display },
+        { name: 'Title', getter: m => {
+            let title = '';
+            try {
+              const myIdentifer = m.identifier[0].value; // "urn:oid:1.2.840.99999999.1.1.33607723.407560999967"
+              const instance = m.partOf[0].resource.series[0].instance.find(i => `urn:oid:${i.uid}` === myIdentifer);
+              if (instance?.title) {
+                title = instance.title;
+              }
+            } catch (e) {}
+            return title;
+          }
+        },
         { name: 'Media', getter: m => extractMedia(m) },
         { name: 'Date', getter: m => m.partOf[0].resource.started },
         // VIEW_FHIR // temporarily disabled