diff --git a/wells/index.html b/wells/index.html
index 7a8dfa8..9087681 100644
--- a/wells/index.html
+++ b/wells/index.html
@@ -37,7 +37,13 @@
          </audio>
     </div>
      </div>
+     <div id="about_colophon">
+      <a href="#" >About</a>|<a href="#" >Colophon</a>
     </div>
+     <div id="showabout" class="draggable"><span onclick="this.parentElement.style.display='none'" class="topleft">&times</span><div>about texthjgjhghjgfhdgfhdgfhdsgfhsgfhsgdfjhgdsfhsfgdfjgsfgdshsgfhsgfffffffffffffdfhdsfjsgdfjgjdsgfsjdgfjshgdf</div>
+    </div>
+    <div id="showcolophon" class="draggable"><span onclick="this.parentElement.style.display='none'" class="topleft">&times</span><div>about texthjgjhghjgfhdgfhdgfhdsgfhsgfhsgdfjhgdsfhsfgdfjgsfgdshsgfhsgfffffffffffffdfhdsfjsgdfjgjdsgfsjdgfjshgdf</div>
+   </div>
   </div>
 </div>
     <!-- new row should start here -->
@@ -57,7 +63,8 @@
         <img src="static/images/poem.png">
       </div>
 
-      <div class="draggable" id="showasikA"><div class='text_audio'>Bio Aşık Ali İzzet</div><span onclick="this.parentElement.style.display='none'" class="topleft">&times</span><iframe width="300" height="150" id="videoasikA" src="https://www.youtube.com/embed/AnsVY_gjJns" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
+      <div class="draggable" id="showasikA"><div class='text_audio'>Bio Aşık Ali İzzet</div><span onclick="this.parentElement.style.display='none'" class="topleft">&times</span><iframe width="300" height="80" id="videoasikA" src="https://www.youtube.com/embed/AnsVY_gjJns" frameborder="0" allowfullscreen="false" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
+
 
       <div class="draggable" id="showasikV"><div class='text_audio'>Bio</div><iframe width="300" height="150" src="https://www.youtube.com/embed/5_9PAugYb4s" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
@@ -154,6 +161,18 @@ function includeHTML() {
 
 includeHTML();
 </script>
+
+<script>
+$("#about").click(function(){
+    $("#showabout").fadeIn()
+    console.log("around")
+ });
+
+ $("#colophon").click(function(){
+     $("#showcolophon").fadeIn()
+     console.log("around")
+  });
+</script>
 </div>
 </body>
 </html>
diff --git a/wells/static/css/style.css b/wells/static/css/style.css
index 6423a79..1f78f11 100644
--- a/wells/static/css/style.css
+++ b/wells/static/css/style.css
@@ -66,6 +66,7 @@ cursor: pointer;
 }
 
 
+
 /* Node styling */
 
 .group2 {
@@ -313,9 +314,29 @@ h2 {
   float: right;
   cursor: pointer;
   font-size: 100%;
-  color: red;
+  color: black;
 }
 
+
+/* about and colophon */
+/* #about {
+
+
+} */
+
+#showabout, #showcolophon {
+  display: none;
+  left: 20%;
+  background-image: url("../images/poster1.png");
+  word-wrap: break-word;
+  background-size: 100%;
+  width: 50%;
+  height: auto;
+  border: 1px solid black;
+  padding: 2%;
+}
+
+
 /*d3 map*/
 .link {
   stroke: #c46666;
diff --git a/wells/static/images/poster1.png b/wells/static/images/poster1.png
new file mode 100644
index 0000000..0322b30
Binary files /dev/null and b/wells/static/images/poster1.png differ
diff --git a/wells/static/js/d3_map.js b/wells/static/js/d3_map.js
index d0754ae..47ae48a 100644
--- a/wells/static/js/d3_map.js
+++ b/wells/static/js/d3_map.js
@@ -162,10 +162,12 @@ function popup(name,time) {
       dada.className += " active";
       dada.scrollIntoView();
       var audio1 = document.getElementById("audioBG");
-      audio1.currentpopupTime = time;
+      audio1.currentTime = time;
       audio1.play();
 };
 
+// <div class="draggable" id="showasikV"><div class='text_audio'>Bio</div><iframe width="300" height="150" src="https://www.youtube.com/embed/5_9PAugYb4s" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
 
 //stop events when clicking somewhere else
   $(document).click(function (e) {