diff --git a/dicomViewer.js b/dicomViewer.js
index 99349ca..9546097 100644
--- a/dicomViewer.js
+++ b/dicomViewer.js
@@ -1220,6 +1220,12 @@ export function loadStackIndex(new_index, dicom_element) {
     //c = cornerstone.getEnabledElement(dicom_element)
 }
 
+export function loadImageById(imageId, dicom_element) {
+    cornerstone.loadImage(imageId).then(b => {
+        cornerstone.displayImage(dicom_element, b);
+    });
+}
+
 function urltoFile(url, filename, mimeType) {
     return fetch(url)
         .then(function (res) {
diff --git a/index.html b/index.html
index 452cded..5be3b49 100644
--- a/index.html
+++ b/index.html
@@ -24,11 +24,13 @@
     <main>
       <h1>A dicom viewer</h1>
 
+    <div id="dicom-viewer" class="dicom-viewer" style="height: 600px;" data-images='["test_images/1.jpg","test_images/IMG1.dcm"]' data-annotations=""></div></div>
     <!-- <div id="dicom-viewer" class="dicom-viewer" style="height: 600px;" data-images='["test_images/IMG1.dcm","test_images/IMG1.dcm"]' data-annotations='[&quot;{\&quot;ArrowAnnotate\&quot;:{\&quot;data\&quot;:[{\&quot;visible\&quot;:true,\&quot;active\&quot;:false,\&quot;handles\&quot;:{\&quot;start\&quot;:{\&quot;x\&quot;:450.01249999999993,\&quot;y\&quot;:592.8031510416666,\&quot;highlight\&quot;:true,\&quot;active\&quot;:false},\&quot;end\&quot;:{\&quot;x\&quot;:283.38750000000005,\&quot;y\&quot;:343.976484375,\&quot;highlight\&quot;:true,\&quot;active\&quot;:false,\&quot;moving\&quot;:false},\&quot;textBox\&quot;:{\&quot;active\&quot;:false,\&quot;hasMoved\&quot;:false,\&quot;movesIndependently\&quot;:false,\&quot;drawnIndependently\&quot;:true,\&quot;allowedOutsideImage\&quot;:true,\&quot;hasBoundingBox\&quot;:true}},\&quot;uuid\&quot;:\&quot;51ca68b0-734c-4046-b3da-dd2886496fd5\&quot;,\&quot;invalidated\&quot;:true}]}}&quot;, null]'></div></div> -->
-    <div id="dicom-viewer" class="dicom-viewer" style="height: 600px;" data-images='["test_images/IMG1.dcm", "test_images/IMG2.dcm", "test_images/IMG3.dcm", "test_images/IMG4.dcm", "test_images/IMG5.dcm", "test_images/IMG6.dcm"]' data-annotations=''></div>
+    <!-- <div id="dicom-viewer" class="dicom-viewer" style="height: 600px;" data-images='["test_images/IMG1.dcm", "test_images/IMG2.dcm", "test_images/IMG3.dcm", "test_images/IMG4.dcm", "test_images/IMG5.dcm", "test_images/IMG6.dcm"]' data-annotations=''></div> -->
     <!-- <div id="dicom-viewer2" class="dicom-viewer" style="height: 600px;" data-images='["test_images/IMG1.dcm", "test_images/IMG2.dcm", "test_images/IMG3.dcm", "test_images/IMG4.dcm", "test_images/IMG5.dcm", "test_images/IMG6.dcm"]' data-annotations=''></div> -->
     <!-- <div id="dicom-viewer" class="dicom-viewer" style="height: 600px;" data-images='["test_images/CXR.dcm"]' data-annotations=''></div></div> -->
 
+
     </main>
     <footer></footer>
   </body>
diff --git a/loader.js b/loader.js
index b8bb834..aa0a44b 100644
--- a/loader.js
+++ b/loader.js
@@ -79,4 +79,6 @@ function loadDicomViewer(images_to_load, annotations_to_load) {
       dicomViewer.loadCornerstone($(single_dicom2), null, images, annotations, load_as_stack);
     }
   }
-}
\ No newline at end of file
+}
+
+window.dicomViewer = dicomViewer;
\ No newline at end of file