diff --git a/static/css/style.css b/static/css/style.css
index 926d6fd..f394ccf 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -24,6 +24,12 @@
 .thesis {
 overflow-y: scroll;
 max-height:500px;
+scroll-behavior: smooth;
+}
+
+/* background audio */
+audio {
+  width:100%;
 }
 
 /* circles */
diff --git a/templates/hello.html b/templates/hello.html
index 8a31f5f..e739a2c 100644
--- a/templates/hello.html
+++ b/templates/hello.html
@@ -3,14 +3,19 @@
 {% block body %}
 <div class="row">
   <div class="col-md-9">
-    <!-- <div class="map_area">Map area<div id="circle-1" onclick="scrolldiv()"> -->
     <div class="map_area">Map area
       <div class="row">
         <div class="col-md-1 col-sm-4">
+          <div id="show1"><audio controls>
+            <source src="../static/audio/HNI_Soundinstall_3tracks_together1.mp3" type="audio/mpeg">
+            Your browser does not support the audio tag.
+          </audio></div>
 
-  <svg id="first_circle">
+
+
+  <svg id="first_circle angela" onclick="scrolldiv()">
     <circle cx="50" cy="50" r="2rem" stroke="green" stroke-width="4" fill="yellow" />
-    <text x="50" y="50" text-anchor="middle">hello </text>
+    <a href="#" >Angela<text x="50" y="50" text-anchor="middle">hello </text></a>
   </svg>
         </div>
         <div class="col-md-1 col-sm-4">
@@ -82,21 +87,11 @@
     elem.scrollIntoView();
   }
 </script>
-
-<!-- <script type="text/javascript">
-  let firsttext = 'text text';
-
-  function setup() {
-    var canvas = createCanvas(400, 400);
-    canvas.parent('circle-1');
-  }
-
-  function draw() {
-    stroke(0);
-    ellipse(252, 144, 72, 72);
-    text(firsttext, 252, 144, 72, 72);
-    firsttext.id = 'firsttext';
-  }
-</script> -->
+<script type="text/javascript">
+  $("#angela").click(function(){
+      $("#show1").fadeIn()
+      console.log("around")
+   });
+</script>
 
 {% endblock %}