diff --git a/server.js b/server.js
index 4be6b15..80d68cb 100644
--- a/server.js
+++ b/server.js
@@ -61,6 +61,11 @@ app.get("/takeScreenshot", async function(req, res){
 });
 
 app.get("/getValueFromImage", async function(req, res){
+    /* 
+    Sometimes grabs some random characters that are not on the screen.  This is especially obvious
+    when grabing the price off of LiquidationDelivered.com.  The rectangle has to be pretty tight on the price
+    in order to avoid grabbing random characters.  Need to investigate because that could be a huge issue.
+    */
     console.log("Pulling info from image");
     let name = req.query["name"]; 
     let top = req.query["top"]; //374
@@ -80,6 +85,7 @@ app.get("/getValueFromImage", async function(req, res){
       } = await worker.recognize(img,
         { rectangle }
       );
+      console.log(text)
       console.log("Found Price!");
       res.send(text);
       res.end();
diff --git a/views/Upload.html b/views/Upload.html
index 667dee9..0b5e447 100644
--- a/views/Upload.html
+++ b/views/Upload.html
@@ -1,84 +1,174 @@
+<!DOCTYPE html>
 <html>
-    <head>
-        <script src="../static/jquery-3.7.1.min.js"></script>
-        <style>
-            #imageContainer {
-                position: relative;
-                display: inline-block; /* Makes the container fit the size of the image */
-            }
-            #selectionOverlay {
-                position: absolute;
-                border: 2px solid red; /* Visible border for the selection */
-                pointer-events: none; /* Prevents the overlay from capturing mouse events */
-            }
-        </style>
-    </head>
-    <body>
+<head>
+    <title>Image Selection</title>
+    <script src="../static/jquery-3.7.1.min.js"></script>
+    <style>
+        body{
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-wrap: wrap;
+            text-align: center;
+        }
+        #finalPriceContainer{
+            display: flex;
+            width: 100%;
+            height: 10rem;
+            justify-content: center;
+            align-items: center;
+            text-align: center;
+        }
+        #finalPrice{
+            background-color: #FAC898;
+            border-radius: 4px;
+            box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+        }
+        #mainForm{
+            display: flex;
+            width: 25%;
+            height: 25%;
+            flex-wrap: wrap;
+            justify-content: center;
+        }
+        #mainForm input{
+            width: 100%;
+            padding: 0.5rem;
+            text-align: left;
+            margin-top: 0.5rem;
+            border-radius: 4px;
+            margin-bottom: 0.5rem;
+        }
+         #mainForm label{
+            width: 100%;
+            text-align: left;
+        }
+        #submitURLButton{
+            text-align: center !important;
+        }
+        #mainFormContainer{
+            display: flex;
+            width: 100%;
+            height: 100%;
+            box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+            border-radius: 4px;
+            padding: 2rem;
+            background: #e1e1e1;
+            justify-content: center;
+        }
+        #image {
+            position: relative;
+            display: inline-block;
+        }
+        #imageContainer{
+            display: flex;
+            justify-content: center;
+            width: 100%;
+            height: 100%;
+            box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+        }
+        #selectionBox {
+            position: absolute;
+            background: red;
+            opacity: 0.3;
+            border: 2px dashed red; /* Dashed blue border for the selection box */
+            display: none; /* Initially hidden */
+        }
+    </style>
+</head>
+<body>
+    <div id="mainFormContainer">
         <form id="mainForm">
-            URL: <input type="text" id="url" />
-            Name: <input type="text" id="name" />
-            <input type="submit" id="submitURLButton" title="submit" />
+            <label>URL</label>
+            <input type="text" id="url" />
+            <label>Name</label>
+            <input type="text" id="name" />
+            <input type="submit" id="submitURLButton" value="Submit" />
         </form>
-        <form id="coordsForm">
-            Top:<input type="text" id="top"/>
-            Left:<input type="text" id="left" />
-            Height:<input type="text" id="height" />
-            Width:<input type="text" id="width" />
-        </form>
-
-        <div id="finalPrice"></div>
-
-        <div id="imageContainer">
-            <img src="" id="screenshot" />
-            <div id="selectionOverlay"></div> <!-- Overlay for selection visualization -->
+    </div>
+    <div id="finalPriceContainer"><h1 id="finalPrice"></h1></div>
+    <div id="imageContainer">
+        <div id="image">
+            <img src="" id="screenshot" style="max-width: 100%; height: auto;">
+            <div id="selectionBox"></div>
         </div>
+    </div>
+
 
     <script>
-$(function () { // Document ready shorthand
+    $(function() {
+         let startX, startY, isDragging = false;
 
-    $("#mainForm").on("submit", function(event){
-        event.preventDefault();
-        let url = $("#url").val();
-        let name = $("#name").val();
-        $.ajax({
-            url: `http://localhost:8001/takeScreenshot?name=${name}&url=${url}`,
-        }).done(function(){
+        $("#mainForm").on("submit", function(event) {
+            event.preventDefault();
+            let url = $("#url").val();
+            let name = $("#name").val();
+                
+            $.ajax({
+                url: `http://localhost:8001/takeScreenshot?name=${name}&url=${url}`,
+            }).done(function() {
             $("#screenshot").attr("src", `http://localhost:8001/images/${name}.png`);
+            $("#selectionBox").hide(); // Hide selection box when a new image is loaded
         });
     });
 
-    $("#screenshot").click(function(event){
+    $("#screenshot").on('mousedown', function(event) {
         let offset = $(this).offset();
-        let overlay = $("#selectionOverlay");
+        startX = event.pageX - offset.left;
+        startY = event.pageY - offset.top;
+        isDragging = true;
+        $("#selectionBox").css({ top: startY, left: startX, width: 0, height: 0, display: 'block' });
+    });
 
-        if($("#left").val()){
-            let top = Math.min($("#top").val(), event.pageY - offset.top);
-            let left = Math.min($("#left").val(), event.pageX - offset.left);
-            let height = Math.abs((event.pageY - offset.top) - $("#top").val());
-            let width = Math.abs(event.pageX - offset.left - $("#left").val());
-
-            $("#height").val(height);
-            $("#width").val(width);
-            $("#top").val(top);
-            $("#left").val(left);
-
-            overlay.css({ top: top, left: left, width: width, height: height }); // Update overlay position and size
-
-            let name = $("#name").val();
-
-            let newUrl = `http://localhost:8001/getValueFromImage?name=${name}&top=${top}&left=${left}&height=${height}&width=${width}`;
-            $.ajax({
-                url: newUrl,
-            }).done(function (response) {
-                $("#finalPrice").text("Found Price!!! " + response);
-            });
-        } else {
-            $("#left").val(event.pageX - offset.left);
-            $("#top").val(event.pageY - offset.top);
-            overlay.css({ top: event.pageY - offset.top, left: event.pageX - offset.left, width: 0, height: 0 }); // Reset overlay size
+    $(document).on('mousemove', function(event) {
+        if (isDragging) {
+            let offset = $("#screenshot").offset();
+            let currentX = event.pageX - offset.left;
+            let currentY = event.pageY - offset.top;
+            let width = Math.abs(currentX - startX);
+            let height = Math.abs(currentY - startY);
+            let newLeft = (currentX < startX) ? currentX : startX;
+            let newTop = (currentY < startY) ? currentY : startY;
+            $("#selectionBox").css({ width: width, height: height, left: newLeft, top: newTop });
         }
     });
-});
 
+    $(document).on('mouseup', function(event) {
+        if (isDragging) {
+        isDragging = false;
+
+        // Capture the final coordinates and dimensions
+        let finalCoords = $("#selectionBox").position();
+        // default of 1 for width/height value presents request error to tesseract - allows for misclicks when grabbing coordinates via click/drag
+        let width = $("#selectionBox").width() === 0 ? 1 : $("#selectionBox").width();
+        let height = $("#selectionBox").height() === 0 ? 1 : $("#selectionBox").height();
+        console.log("Final Coordinates: ", finalCoords.top, finalCoords.left, width, height);
+
+        // Assuming you have the 'name' letiable available from the image name
+        let name = $("#name").val();  // Retrieve the name of the image if needed
+
+        // Construct the URL with query parameters for the AJAX request
+        let requestUrl = `http://localhost:8001/getValueFromImage?name=${name}&top=${finalCoords.top}&left=${finalCoords.left}&width=${width}&height=${height}`;
+
+        // Send an AJAX request to the server with the selection box coordinates and dimensions
+            $.ajax({
+                url: requestUrl,
+                method: 'GET',
+                    success: function(response) {
+                    // Handle the server response here
+                    console.log("Value from the selected area: ", response);
+                    console.log(response)
+                   response !== '' ? $("#finalPrice").css('padding', '1rem') : $("#finalPrice").css('padding', '0rem'); // Set padding to 1rem
+                   $("#finalPrice").text(response); // Display the response in the 'finalPrice' div
+               },
+                    error: function(xhr, status, error) {
+                // Handle errors
+                    console.error("Error fetching value: ", error);
+                    }
+                });
+            }
+        });;
+    });
     </script>
-</html>
\ No newline at end of file
+</body>
+</html>
