diff --git a/package.json b/package.json
index acac6842c..b53a6ab07 100644
--- a/package.json
+++ b/package.json
@@ -29,8 +29,9 @@
     "getusermedia-js": "~1.0.0",
     "http-server": "^14.1.0",
     "jquery": "~3",
-    "puppeteer": "^16.2.0",
-    "jest": "^28.1.3",
+    "@popperjs/core": "^2.11.6",
+    "puppeteer": "^17.1.3",
+    "jest": "^29.0.2",
     "jest-puppeteer": "^6.1.1",    
     "webgl-utils": "~1.0.0",
     "webrtc-adapter": "^1.1.0"
diff --git a/test/ui/interface.test.js b/test/ui/interface.test.js
index 55459338b..0ab1b749b 100644
--- a/test/ui/interface.test.js
+++ b/test/ui/interface.test.js
@@ -1,6 +1,6 @@
 const timeout = process.env.SLOWMO ? 30000 : 100000;
 beforeAll(async () => {
-  await page.goto('http://127.0.0.1:8080/index2.html', {waitUntil: 'domcontentloaded'});
+  await page.goto('http://127.0.0.1:8080/v2/index.html', {waitUntil: 'domcontentloaded'});
 });
 
 describe('Change Resolution of Canvas ', () => {
diff --git a/index2.html b/v2/index.html
similarity index 95%
rename from index2.html
rename to v2/index.html
index dc74e3227..417cb1189 100644
--- a/index2.html
+++ b/v2/index.html
@@ -8,21 +8,21 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="description" content="Public Lab's online, open source service for generating plant health analyses from near-infrared imagery.">
 
-  <link rel="stylesheet" href="node_modules/bootstrap5/dist/css/bootstrap.min.css">
-  <link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
+  <link rel="stylesheet" href="../node_modules/bootstrap5/dist/css/bootstrap.min.css">
+  <link href="../node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
 
     <!-- Favicon -->
-  <link rel="icon" type="image/x-icon" href="/assets/favicon.ico">
+  <link rel="icon" type="image/x-icon" href="../assets/favicon.ico">
   <!-- CSS Link -->
-  <link href="dist/infragram2.css" rel="stylesheet">
+  <link href="../dist/infragram2.css" rel="stylesheet">
 
-  <script src="node_modules/jquery/dist/jquery.min.js"></script>
-  <script src="node_modules/bootstrap5/dist/js/bootstrap.bundle.min.js"></script>
+  <script src="../node_modules/jquery/dist/jquery.min.js"></script>
+  <script src="../node_modules/bootstrap5/dist/js/bootstrap.bundle.min.js"></script>
 
-  <script src="node_modules/webrtc-adapter/out/adapter.js"></script>
-  <script src="node_modules/getusermedia-js/dist/getUserMedia.min.js"></script>
-	
-  <script src="dist/infragram.js"></script>
+  <script src="../node_modules/webrtc-adapter/out/adapter.js"></script>
+  <script src="../node_modules/getusermedia-js/dist/getUserMedia.min.js"></script>
+  
+  <script src="../dist/infragram.js"></script>
 
   <script type="x-shader/x-vertex" id="shader-vs"></script>
   <script type="x-shader/x-fragment" id="shader-fs-template"></script>
@@ -57,7 +57,7 @@
     <div class="row" style="border-bottom: var(--border)">
       <div class="col-12 header">
         <div class="header-title">
-          <img src="assets/infragram-mini-leaf-transparent-bg.png" alt="Infragram logo image." class="logo" />
+          <img src="../assets/infragram-mini-leaf-transparent-bg.png" alt="Infragram logo image." class="logo" />
           <h1 style="font-size:1.5rem;line-height:3.1rem;letter-spacing:0.09rem;margin-bottom:0;"><a style="color:var(--white);padding-right:.3rem" href="../">Infragram</a><small style="font-size:.875rem;color:var(--light-grey);">by <a href="http://publiclab.org" target="_blank" style="font-size:1rem;color:var(--blue);">Public Lab</a></small></h1>
         </div>
 
@@ -260,8 +260,8 @@ <h6>BLUE filters <i class="fa fa-filter" aria-hidden="true" style="color:#347ab7
 
       <div id="image-container" class="col-12 col-md-10 image-container">
         <div style="display:none;" id="webcam">
-            <video width="640" height="480" autoplay="autoplay" id="webCamVideoEl" playsinline="playsinline"></video>		
-	</div>
+            <video width="640" height="480" autoplay="autoplay" id="webCamVideoEl" playsinline="playsinline"></video>   
+  </div>
         <a id="fullscreen" class="btn btn-default"><i class="fa fa-expand"></i></a>
 
         <!-- ========================= intro/welcome msg =============================== -->
@@ -278,11 +278,11 @@ <h2 style="font-size:1.25rem;">Analyze plant health. <br> Visualize photosynthes
               <p class="card-text" style="font-size:.625rem;"><small>Drop your media here, connect through your computer above <br class="sample-text-effect"> or <br> explore with our ready-to-use images</small></p>
               <div class="d-flex justify-content-around">
                 <div class="d-flex flex-column justify-content-center align-items-baseline">
-                  <img src="assets/red-filtered-trees-thumbnail.jpeg" alt="Red filtered image - select to explore the tool." style="width:5rem;height:auto;border:.5rem solild var(--image-container-bg);">
+                  <img src="../assets/red-filtered-trees-thumbnail.jpeg" alt="Red filtered image - select to explore the tool." style="width:5rem;height:auto;border:.5rem solild var(--image-container-bg);">
                   <p class="card-text" style="font-size:.625rem;padding-top:.5rem;"><small>Red filtered trees</small></p>
                 </div>
                 <div class="d-flex flex-column justify-content-center align-items-center">
-                  <img src="assets/blue-filtered-plant-thumbnail.jpeg" alt="Blue filtered image - select to explore the tool." style="width:5rem;height:auto;">
+                  <img src="../assets/blue-filtered-plant-thumbnail.jpeg" alt="Blue filtered image - select to explore the tool." style="width:5rem;height:auto;">
                   <p class="card-text" style="font-size:.625rem;padding-top:.5rem;"><small>Blue filtered plant</small></p>
                 </div>
               </div>
@@ -292,7 +292,7 @@ <h2 style="font-size:1.25rem;">Analyze plant health. <br> Visualize photosynthes
 
         <div style="background:#111;display:none;position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;" id="backdrop"></div>
         <div id="overlay-container" style="display:none;">
-          <img id="overlay-img" src="assets/grid.svg" alt="grid overlay image">
+          <img id="overlay-img" src="../assets/grid.svg" alt="grid overlay image">
         </div>
         <a class="btn-inverse btn-small" style="display:none;position:absolute;right:2vw;top:12vh;z-index:3;" id="exit-fullscreen"><i class="fa fa-remove"></i> Exit full screen</a>
         <canvas class="fullscreen" id="image">
@@ -509,11 +509,13 @@ <h6 style="text-decoration:underline;">BLUE filters <i class="fa fa-filter" aria
         infragram = Infragram({
           uploader: false,
           processor: 'webgl',
-          version: 2
+          version: 2,
+          shaderVertPath: "../dist/shader.vert",
+          shaderFragPath: "../dist/shader.frag"            
         });
 
         openInPl = function openInPl() {
-	        var dataurl = infragram.options.processor.getCurrentImage();
+          var dataurl = infragram.options.processor.getCurrentImage();
           function postToPL(imgSrc) {
             var uniq = Date.now();
             var color = $('#m_exp').val().substr(1,3) == "R-B" ? "blue" : "red";