diff --git a/static/css/style.css b/static/css/style.css
index 4001612..51ae8f1 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -56,3 +56,14 @@ img {
   background-image: url("../images/test2_opacity.jpeg");
 
 }
+
+#scan1 {
+  width:60%; top:120px;left:240px;
+}
+
+/* pop up */
+#show1 {
+  display: none;
+  left: 20%;
+  width: 23% !important;
+}
diff --git a/templates/perspectiveA.html b/templates/perspectiveA.html
index 1af3446..21d39cf 100644
--- a/templates/perspectiveA.html
+++ b/templates/perspectiveA.html
@@ -9,7 +9,6 @@
 </head>
 <body id="background_a">
   <div>
-  <h1>Perspective A</h1>
   <div id="audio1">
     <audio controls src="../static/audio/turkish_march.ogg" type="audio/ogg"></audio>
 
@@ -21,6 +20,28 @@
 <iframe id="video2" width="120" height="120" src="https://www.youtube.com/embed/5_9PAugYb4s" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 </div>
 
+<!-- youtube pop up -->
+<div id="show1" class="draggable scaleable-wrapper">
+  <span onclick="this.parentElement.style.display='none'" class="topleft">&times</span>
+  <iframe id="video1" width="120" height="120" src="https://www.youtube.com/embed/fKOKxuFyEdg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</div>
+
+<div class="draggable" style="font-weight: bold; top: 55%; left:40%; width: 500px !important">
+  <div id="popup">
+   <a href="#" >Ruhi Su</a>
+ </div>
+ </div>
+
+ <script>
+  // draggable video pop up
+$("#popup").click(function(){
+    $("#show1").fadeIn()
+    console.log("around")
+});
+
+</script>
+
+<!-- audio and image pop up -->
 <div class="draggable" style="top: 260%; left:0.2%">
       <button id="but"><h3>listen</h3></button>
         <audio ontimeupdate="playTranscript()" id="a1" controls src="../static/audio/Clip26" class="audio-tag"></audio><a href="" target="_blank">
diff --git a/templates/perspectiveB.html b/templates/perspectiveB.html
index dd35b1f..e3a20d0 100644
--- a/templates/perspectiveB.html
+++ b/templates/perspectiveB.html
@@ -34,43 +34,42 @@ function EvalSound(soundobj) {
 <link href="../static/css/style.css" rel="stylesheet" type="text/css">
 <head>
 <title>PerspectiveB</title>
-<h1>VVVW - PerspectiveB</h1>
 </head>
 
 <body>
-<div class="draggable" style="top:120px;left:40px">
-    <img src="../static/images/TheStreamRunsBlurry_scan.png" width='500px' onClick="EvalSound('song1'); return true;" alt="test">
+<div class="draggable" id="scan1">
+    <img src="../static/images/TheStreamRunsBlurry_scan.png" width='40%' onClick="EvalSound('song1'); return true;" alt="test">
 <audio id="song1" style="display: none; width: 0px; height: 0px;"
 src="../static/audio/feldenkrais_mai" controls preload="auto" autobuffer>
 </div>
 
-<div class="draggable" style="top:130px;left:50px">
-  <img src="../static/images/ShallPass_scan.png" width='500px' onClick="EvalSound('song2'); return true;"  alt="test">
+<div class="draggable" style="top:130px;left:250px">
+  <img src="../static/images/ShallPass_scan.png" width='40%' onClick="EvalSound('song2'); return true;"  alt="test">
 <audio id="song2" style="display: none; width: 0px; height: 0px;"
 src="../static/audio/Clip26" controls preload="auto" autobuffer>
 </div>
 
-<div class="draggable" style="top:140px;left:60px">
-  <img src="../static/images/NilgünMarmara_scan.png" width='500px' onClick="EvalSound('song3'); return true;"  alt="test">
+<div class="draggable" style="top:140px;left:260px">
+  <img src="../static/images/NilgünMarmara_scan.png" width='40%' onClick="EvalSound('song3'); return true;"  alt="test">
 <audio id="song3" style="display: none; width: 0px; height: 0px;"
 src="../static/audio/FreshMythsDifferentTimes_performance_podcast.mp3" controls preload="auto" autobuffer>
 </div>
 
 
-<div class="draggable" style="top:150px;left:70px">
-    <img src="../static/images/fist_Scan.png" width='500px' onClick="EvalSound('song1'); return true;" alt="test">
+<div class="draggable" style="top:150px;left:270px">
+    <img src="../static/images/fist_Scan.png" width='40%' onClick="EvalSound('song1'); return true;" alt="test">
 <audio id="song1" style="display: none; width: 0px; height: 0px;"
 src="../static/audio/feldenkrais_mai" controls preload="auto" autobuffer>
 </div>
 
-<div class="draggable" style="top:160px;left:80px">
-  <img src="../static/images/Coveredfigure_scan.png" width='500px' onClick="EvalSound('song2'); return true;"  alt="test">
+<div class="draggable" style="top:160px;left:280px">
+  <img src="../static/images/Coveredfigure_scan.png" width='40%' onClick="EvalSound('song2'); return true;"  alt="test">
 <audio id="song2" style="display: none; width: 0px; height: 0px;"
 src="../static/audio/Clip26" controls preload="auto" autobuffer>
 </div>
 
-<div class="draggable" style="top:170px;left:90px">
-  <img src="../static/images/AşıkVeysel_Scan.png" width='500px' onClick="EvalSound('song3'); return true;"  alt="test">
+<div class="draggable" style="top:170px;left:290px">
+  <img src="../static/images/AşıkVeysel_Scan.png" width='40%' onClick="EvalSound('song3'); return true;"  alt="test">
 <audio id="song3" style="display: none; width: 0px; height: 0px;"
 src="../static/audio/FreshMythsDifferentTimes_performance_podcast.mp3" controls preload="auto" autobuffer>
 </div>
@@ -79,13 +78,13 @@ src="../static/audio/FreshMythsDifferentTimes_performance_podcast.mp3" controls
 
 
   <!-- <div class="draggable">
-      <img src="../static/images/test1.jpeg" width='500px'  alt="test" onclick="playAudio('../static/audio/FreshMythsDifferentTimes_performance_podcast.mp3')">
+      <img src="../static/images/test1.jpeg" width='40%'  alt="test" onclick="playAudio('../static/audio/FreshMythsDifferentTimes_performance_podcast.mp3')">
   </div>
   <div class="draggable">
-    <img src="../static/images/test2.jpeg" width='500px'  alt="test" onclick="playAudio('../static/audio/feldenkrais_mai')">
+    <img src="../static/images/test2.jpeg" width='40%'  alt="test" onclick="playAudio('../static/audio/feldenkrais_mai')">
   </div>
   <div class="draggable">
-    <img src="../static/images/test3.jpeg" width='500px'  alt="test" onclick="playAudio('../static/audio/Clip26')">
+    <img src="../static/images/test3.jpeg" width='40%'  alt="test" onclick="playAudio('../static/audio/Clip26')">
   </div> -->
 
 
diff --git a/templates/perspectiveC.html b/templates/perspectiveC.html
index 6a06132..976e595 100644
--- a/templates/perspectiveC.html
+++ b/templates/perspectiveC.html
@@ -9,7 +9,6 @@
 </head>
 <body id="background_c">
   <div>
-  <h1>Perspective C</h1>
 <div class="draggable">
 <img id="poem1" src="../static/images/poem.png" alt="poem">
 </div>
