diff --git a/wells/index.html b/wells/index.html
index 969a0f2..56e7e68 100644
--- a/wells/index.html
+++ b/wells/index.html
@@ -56,7 +56,9 @@
     <!-- <div class="scaleable-wrapper draggable" id="scaleable-wrapper"> -->
     <div>
     <div w3-include-html="thesis.html" class="draggable thesis" id="thesis">
-    </div></div>
+    </div>
+    <!-- <span onclick="this.parentElement.style.display='none'" id="thesisX" class='topleft'>&times</span> -->
+  </div>
     <!-- </div> -->
     <!-- map area -->
   <div class="row">
@@ -81,19 +83,18 @@
     </div>
   </div>
 
-</div>
-
-<div class="row">
   <div class="col-md-6">
     <div class="map_legend">
     <div id="box1" onclick="popup_bg(120)"></div> <p>Folklore literature</p>
     <div id="box2" onclick="popup_bg(300)"></div> <p>Islamic Mysticism</p>
-    <div id="box3" onclick="popup_bg(700)"></div> <p>Contemporary poets</p>
-    <div id="box4" onclick="popup_bg(1000)"></div> <p>Contemporary musicians</p>
+    <div id="box3" onclick="popup_bg(500)"></div> <p>Contemporary poets</p>
+    <div id="box4" onclick="popup_bg(700)"></div> <p>Contemporary musicians</p>
   </div>
   </div>
+
 </div>
 
+
 </div>
 <!--moved about temporarily-->
 
@@ -116,9 +117,9 @@
 <script>
 function popup_bg(time) {
   var box = document.getElementById("audioBG");
-  if (box.currentTime>0) {
-  box.currentTime = 0;
-}
+//   if (box.currentTime>0) {
+//   box.currentTime = 0;
+// } else {
   box.currentTime = time;
   box.play();
   btn.innerHTML = "(Pause)";
@@ -168,6 +169,9 @@ $("#about").click(function(){
      $("#showcolophon").fadeIn()
      console.log("around")
   });
+
+
+
 </script>
 
 <!-- scaleable wrapper -->
diff --git a/wells/static/css/style.css b/wells/static/css/style.css
index 74cc4d5..696c37d 100644
--- a/wells/static/css/style.css
+++ b/wells/static/css/style.css
@@ -38,8 +38,8 @@ body {
 /*Main areas*/
 .map_area {
   text-align: center;
-  margin-top: 20px;
-  margin-bottom: 20px;
+  /* margin-top: 20px; */
+  /* margin-bottom: 20px; */
   margin-right: 10px;
   margin-left: 20px;
   position: relative;
@@ -177,6 +177,22 @@ a {
   background-color: #73d2de;
 }
 
+#box1:hover {
+  cursor: pointer;
+}
+
+#box2:hover {
+  cursor: pointer;
+}
+
+#box3:hover {
+  cursor: pointer;
+}
+
+#box4:hover {
+  cursor: pointer;
+}
+
 .map_legend p {
   padding-left: 5px;
   font-family: 'Vesper Libre', serif;
@@ -363,6 +379,14 @@ h2 {
   color: black;
 }
 
+#thesisX {
+  position: absolute;
+  z-index:5;
+  left: 480px;
+  top: 14%;
+  display: none;
+}
+
 
 /* about and colophon */
 #about, #colophon {
diff --git a/wells/static/js/d3_map.js b/wells/static/js/d3_map.js
index 5fc307e..a7348f4 100644
--- a/wells/static/js/d3_map.js
+++ b/wells/static/js/d3_map.js
@@ -47,13 +47,16 @@ d3.json("/static/js/group1.json", function(error, json) {
           .attr("dy", ".35em")
           .text(function(d) { return d.name });
 
-// let drag = d3.behavior.drag();
+// // let drag = d3.behavior.drag();
 // var drag = d3.behavior.drag()
 //     .on("drag", function() {
 //   var x = d3.event.x;
 //   var y = d3.event.y;
 //   d3.select(this).attr("transform", "translate(" + x + "," + y + ")");
 // });
+//
+//
+
 
 var divVideo = d3.select("body").append("div").style("opacity", 1);
 var divBio = d3.select("body").append("div").style("opacity", 1);
@@ -65,11 +68,26 @@ var divBio = d3.select("body").append("div").style("opacity", 1);
           d3.select(this).style("cursor", "pointer");
         }})
         .on("click", function(i){
+          // $(document).ready(function() {
+          //     var a = 3;
+          //     var dragOpts = {
+          //           cursor: "move",
+          //           cursor: "grab",
+          //           distance: "0",
+          //         };
+          //     $('.draggable').draggable(
+          //     {
+          //    start: function(event, ui) { $(this).css("z-index", a++); }
+          //     });
+          // });
               // popup video
               divVideo.transition().duration(100);
-              divVideo.html("<div id='showvideo'><span onclick=this.parentElement.style.display='none';stopVideo("+i.id+"); class='topleft'> &nbsp; &times&nbsp;</span><iframe width='300' height='150' src='"+i.url+"' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe></div>");
+              divVideo.html("<div id='showvideo' class='draggable'><span onclick=this.parentElement.style.display='none';pauseAllVideos("+i.id+"); class='topleft'> &nbsp; &times&nbsp;</span><iframe id='video"+i.id+"' width='300' height='150' src='"+i.url+"' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe></div>");
               divBio.transition().duration(100);
               divBio.html("<div id='showbio'><span onclick=this.parentElement.style.display='none' class='topleft'> &nbsp; &times&nbsp;</span><div id='bio"+i.id+"'>"+i.bio+"</div>");
+              // draggable
+
+
               // div.on(".drag", null);
               // span.html("<span onclick='this.parentElement.style.display='none'' class='topleft'>&times</span>");
               // rest pop up
@@ -78,6 +96,8 @@ var divBio = d3.select("body").append("div").style("opacity", 1);
         .on("dblclick",connectedNodes);
 
 
+
+
       force.on("tick", function() {
         link.attr("x1", function(d) { return d.source.x; })
             .attr("y1", function(d) { return d.source.y; })
@@ -167,23 +187,49 @@ function connectedNodes() {
 
 // scripts for mouse events
 // var stopVideo = function (name) {
-function stopVideo(name) {
-    var iframe = document.querySelector( 'iframe');
-    var video = document.getElementById( "#video"+name );
-    if ( iframe !== null ) {
-        var iframeSrc = iframe.src;
-        iframe.src = iframeSrc;
-    }
-    if ( video !== null ) {
-        video.pause();
-    }
+// function stopVideo(name) {
+//     var iframe = document.querySelector( 'iframe');
+//     var video = document.getElementById( "#video"+name );
+//     if ( iframe !== null ) {
+//         var iframeSrc = iframe.src;
+//         iframe.src = iframeSrc;
+//     }
+//     if ( video !== null ) {
+//         video.pause();
+//     }
+// };
+
+// $(function (){
+//     $('.topleft').click(function(){
+//         $('iframe').attr('src', $('iframe').attr('src'));
+//     });
+// });
+
+
+// function pauseAllVideos(name)
+//     {
+//       $("#video"+name).each(function(){
+//         this.contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}', '*')
+//       });
+//     }
+
+function pauseAllVideos(name) {
+  $("video"+name).each(function(){
+     $(this).stopVideo();
+   });
 };
 
+// $(function (){
+//     $('.topleft').click(function(){
+//         $('iframe').attr('src', $('iframe').attr('src'));
+//     });
+// });
 
 function popup(name,time) {
       $("#show"+name).fadeIn()
       console.log("around")
       $("#thesis").fadeIn()
+      $("#thesisX").fadeIn()
       $("#bio"+name).fadeIn()
       var dada = document.getElementById("text"+name);
       dada.className += " active";
@@ -196,22 +242,22 @@ function popup(name,time) {
 
 
 //stop events when clicking somewhere else
-  $(document).click(function (e) {
-    if (!$(e.target).parents().andSelf().is('#dadaloglu')) {
-        $("#showdadaloglu").fadeOut();
-        $("#audiodadaloglu").trigger('pause');
-        // var textdada = document.getElementById("textdadaloglu");
-        // textdada.classList.remove("active");
-      };
-    if (!$(e.target).parents().andSelf().is('#asikA')) {
-      $("#showasikA").fadeOut();
-        $("#audioasikA").trigger('pause');
-        // var textasikA = document.getElementById("textasikA");
-        // textasikA.classList.remove("active");
-        stopVideo("#asikA");
-    };
-
-  });
+  // $(document).click(function (e) {
+  //   if (!$(e.target).parents().andSelf().is('#dadaloglu')) {
+  //       $("#showdadaloglu").fadeOut();
+  //       $("#audiodadaloglu").trigger('pause');
+  //       // var textdada = document.getElementById("textdadaloglu");
+  //       // textdada.classList.remove("active");
+  //     };
+  //   if (!$(e.target).parents().andSelf().is('#asikA')) {
+  //     $("#showasikA").fadeOut();
+  //       $("#audioasikA").trigger('pause');
+  //       // var textasikA = document.getElementById("textasikA");
+  //       // textasikA.classList.remove("active");
+  //       stopVideo("#asikA");
+  //   };
+  //
+  // });
 
   // $(document).click(function (e) {
   //   if (!$(e.target).parents().andSelf().is('#dadaloglu')) {