diff --git a/static/main.css b/static/main.css
index 1d0781f..ac65c3f 100644
--- a/static/main.css
+++ b/static/main.css
@@ -58,6 +58,18 @@ body {
   opacity: 0.2;
 }
 
+.resultbox
+{
+  width: 100px;
+  height: 100px;
+  border: 1px solid black;
+  margin: 10px;
+  float: left;
+  padding: 30px;
+  text-align: center;
+  background-color: lightgray;
+}
+
 #pre-operative-image {
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
   margin-right: 20px; float: left;
diff --git a/static/main.js b/static/main.js
index d67b242..21460ce 100644
--- a/static/main.js
+++ b/static/main.js
@@ -43,6 +43,11 @@ const noFidsText = document.getElementById("no-fids");
 // Add event listeners
 preOpCanvas.addEventListener("click", preOpImageClick)
 intraOpTargetCanvas.addEventListener("click", intraOpImageClick)
+actualTREText.addEventListener("onmouseover", trehover)
+
+function trehover(){
+	console.log("Hovering on TRE");
+}
 
 async function loadDefaultContour() {
   console.log("Default contour");
diff --git a/templates/index.html b/templates/index.html
index f1618dc..cd3c072 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -32,8 +32,10 @@ <h3>SciKit-SurgeryFRED</h3>
  
     <canvas id="intra-operative-target" width="2048px" height="2048px"
       style="z-index:5; position:absolute; left:650px; top:0px; width:512px; height:512px"></canvas>
-
+ 
+    <div id="actualtrediv" class="resultbox" onmouseover="trehover()">
     <p id="actual-TRE" style="align-items:left; position:absolute; left:1150px; top:0px; width:200px">Actual TRE: -</p>
+    </div>
     <p id="actual-FRE" style="align-items:right; position:absolute; left:1150px; top:60px; width:200px">Actual FRE: -</p>
     <p id="expected-TRE" style="align-items:right; position:absolute; left:1150px; top:120px; width:200px">Expected TRE: -</p>
     <p id="expected-FRE" style="align-items:right; position:absolute; left:1150px; top:180px; width:200px">Expected FRE: -</p>