diff --git a/about.html b/about.html
new file mode 100644
index 0000000..84379b1
--- /dev/null
+++ b/about.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>NARROWCAST</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+  <link rel="stylesheet" type="text/css" media="all" href="narrowstyle.css"></link>
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet" type='text/css'>
+</head>
+<body id="about">
+
+
+  <div class="linkmore"><a href="https://stream.vvvvvvaria.org/">back<span> ↗</span><br></a></div>
+
+
+  <div>
+    <h1> about the < NARROWCAST > </h1>
+    <p class="about"> ... some more words from THE VARIA BROADCATS TEAM (AKA BROADCATS ˚ᆺ˚)´ coming soon ... </p>
+
+  </div>
+
+</body>
+</html>
diff --git a/index.html b/index.html
index c117758..d3b6539 100644
--- a/index.html
+++ b/index.html
@@ -4,17 +4,29 @@
   <meta charset="utf-8">
   <title>NARROWCAST</title>
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-<!--  <link href="https://vjs.zencdn.net/7.10.2/video-js.css" rel="stylesheet" /> -->
+  <!--  <link href="https://vjs.zencdn.net/7.10.2/video-js.css" rel="stylesheet" /> -->
+
+  <!-- OUR STYLES -->
   <link rel="stylesheet" type="text/css" media="all" href="narrowstyle.css"></link>
   <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet" type='text/css'>
+
+  <!-- OUR SCRIPTS -->
+   <script  type="text/javascript" src="narrowscripts.js"></script> 
+   <script  type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+   <script  type="text/javascript" src="interact.min.js"></script>
+
 </head>
 <body>
 
 
-  <div class="about"><a href="https://vvvvvvaria.org/logs/zamopuzo"  target="_blank">back<span> ↗</span><br>↬ stage </a></div>
+  <div class="linkmore">
+    <a href="https://vvvvvvaria.org/logs/zamopuzo"  target="_blank">back ↗ stage </a> 
+    <br>
+    <a href="https://vvvvvvaria.org/logs/zamopuzo"  target="_blank"> about ↝ </a>
+  </div>
 
   <div id="side" class="sidebar sidemin">
-  <button class="minimize" onclick="fside()">⇔</button>
+  <button class="minimize" onclick="fside()">⇆</button>
 
     <div class="sidetop">
       <!-- to add a new event copy paste above — as the ones below.  -->
@@ -33,10 +45,10 @@
 
     <div class="sidebottom">
 
-      	<p>28th March'21: <a href="https://varia.zone/en/rr-sense-full-1.html"  target="_blank" >Read & Repair</a></p>
+    <p>28th March'21: <a href="https://varia.zone/en/rr-sense-full-1.html"  target="_blank" >Read & Repair</a></p>
 
 
-	    <p>23rd March'21: <a href="http://varia.zone/en/usercond01.html"  target="_blank" >User Condition S01E01</a></p>
+	  <p>23rd March'21: <a href="http://varia.zone/en/usercond01.html"  target="_blank" >User Condition S01E01</a></p>
 
 		<p>13 March'21: <a href="https://varia.zone/en/fhm-servers-migrations.html"  target="_blank" >FHM #1  Feminist Hack Meetings: Feminist Servers</a></p>
 
@@ -69,24 +81,6 @@
     </div>
     -->
 
-    <!-- AUDIO STREAM 
-    <audio controls loop="" class="audio" src="https://ice.suroh.tk/meander " type="audio/mp3"> </audio>
-    -->
-
-    <!-- AUDIO STREAM STYLE
-    <div class="audio-stream">
-      <button onclick="playpause('audioBG')" type="button" name="button" class="b-narrow"><i class="audioBG fa b-play"></i></button>
-      <audio id="audioBG"
-      preload="metadata" onloadedmetadata="mDur(dur1,audioBG)" ontimeupdate="mPlay(dur1,audioBG)"  ontimeupdate="document.getElementById('tracktime').innerHTML = Math.floor(this.currentTime) + ' / ' + Math.floor(this.duration);">
-            <source src="https://ice.suroh.tk/meander">
-      </audio>
-      <input id="dur1" type="range" name="rng" min="0" step="0.25" value="0" onchange="mSet(dur1,audioBG)" style="width: 150px">
-      <span id="tracktime"> 00:00 / 0 </span> 
-      <br>
-      <span class="audio-link">  ↬ <a class="windowlinks" href="https://ice.suroh.tk/meander "  target="_blank"> direct link to audio</a></span>
-    </div>
- 	-->
-
 	<!--  ETHERPAD IFRAME 
 	<div class="halfscreen">
         <iframe src="https://pad.vvvvvvaria.org/read_repair_supreme_connections"></iframe><br> ↝
@@ -182,152 +176,7 @@
    <!--  <p class="note"> <u>Note</u>: this interface is in experimental phase ☆ﾟ.*･｡ﾟ and some things may not work always smoothly. There is the option to open the direct url of each element in a new window.</p> -->
 
 
-</div>
-
-<!-- SCRIPTS FOR THE NEW AUDIO PLAYER -->
-<script>
-(function(){
-
-  function waitForIt(selector, time) {
-    if(document.querySelector(selector)!=null) {
-
-      var chat_title = document.getElementsByClassName("chatbox-title__text")[0];
-      var element = document.createElement("span");
-
-      element.innerHTML = '<audio id="player" preload="none" src="http://w-i-t-m.net:8001/radiodrama"></audio><div><button onclick="document.getElementById(\'player\').play()">Play</button><button onclick="document.getElementById(\'player\').pause();document.getElementById(\'player\').src=document.getElementById(\'player\').src;">Stop</button><button onclick="document.getElementById(\'player\').volume += 0.1">Vol +</button><button onclick="document.getElementById(\'player\').volume -= 0.1">Vol -</button></div>';
-
-      chat_title.insertAdjacentElement('afterend', element);
-
-      return;
-    }
-    else {
-      setTimeout(function() {
-
-        waitForIt(selector, time);
-
-      }, time);
-    }
-  }
+  </div>
 
-  waitForIt(".toggle-smiley", 1000);
-})();
-
-$(function() {
-            console.log("PARENT READY");
-            $("iframe").on("load", function(){
-                console.log("LOADED");
-                $(this).contents().find('.kiwi-startup-common').hide();
-            });
-        });
-</script>
-
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
-
-
-<!-- button to hide side pannel -->
-
-<script type="text/javascript">
-
-function fside() {
-   var element = document.getElementById("side");
-   element.classList.toggle("sideminclicked");
-}
-
-
-function fsidemobile(x) {
-  if (x.matches) { // If media query matches
-  var element = document.getElementById("side");
-   element.classList.toggle("sideminclicked");
-  } else {
-   element.classList.toggle("");
-  }
-}
-
-var x = window.matchMedia("(max-width: 768px)")
-fsidemobile(x) // Call listener function at run time
-x.addListener(fsidemobile) // Attach listener function on state changes
-</script>
-
-<!-- drag and resize library: https://interactjs.io/docs/installation#cdn-streamlined -->
-<script src="interact.min.js"></script>
-<!-- script above same as <script src="https://cdnjs.cloudflare.com/ajax/libs/interact.js/1.2.6/interact.min.js"></script> --> 
-
-<!-- also found this other options:
-  https://www.webcomponents.org/element/jifalops/drag-resize
-  https://codepen.io/zz85/pen/gbOoVP -->
-
-<script>
-interact('.resize-drag')
-  .draggable({
-    onmove: window.dragMoveListener
-  })
-  .resizable({
-    preserveAspectRatio: true,
-    edges: { left: true, right: true, bottom: true, top: true }
-  })
-  .on('resizemove', function (event) {
-    var target = event.target,
-        x = (parseFloat(target.getAttribute('data-x')) || 0),
-        y = (parseFloat(target.getAttribute('data-y')) || 0);
-
-    // update the element's style
-    target.style.width  = event.rect.width + 'px';
-    target.style.height = event.rect.height + 'px';
-
-    // translate when resizing from top or left edges
-    x += event.deltaRect.left;
-    y += event.deltaRect.top;
-
-    target.style.webkitTransform = target.style.transform =
-        'translate(' + x + 'px,' + y + 'px)';
-
-    target.setAttribute('data-x', x);
-    target.setAttribute('data-y', y);
-    target.textContent = event.rect.width + '×' + event.rect.height;
-  });
-
-function dragMoveListener (event) {
-    var target = event.target,
-        // keep the dragged position in the data-x/data-y attributes
-        x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
-        y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
-
-    // translate the element
-    target.style.webkitTransform =
-    target.style.transform =
-      'translate(' + x + 'px, ' + y + 'px)';
-
-    // update the posiion attributes
-    target.setAttribute('data-x', x);
-    target.setAttribute('data-y', y);
-  }
-</script>
-
-<!-- <script src="https://vjs.zencdn.net/7.10.2/video.min.js"></script>
-<script>
-  var player = videojs("#player");
-</script>
-
-<script type="text/javascript">
-  var aud1= document.getElementById('audioBG');
-  var dur1= document.getElementById('dur1');
-  function mDur(dur,aud){dur.max= aud.duration};
-  function mPlay(dur,aud){dur.value=aud.currentTime};
-  function mSet(dur,aud){aud.currentTime=dur.value};
-
-
-  function playpause(podcast){
-  var myAudio = document.getElementById(podcast);
-  var myIcon = document.querySelector("."+podcast);
-  if (myAudio.paused) {
-  myIcon.className = podcast+" fa b-pause";
-  myAudio.play();
-  } else {
-  myIcon.className = podcast+" fa b-play";
-  myAudio.pause();
-  }
-  }
-</script>
--->
 </body>
 </html>
diff --git a/narrowscripts.js b/narrowscripts.js
new file mode 100644
index 0000000..d0d84b8
--- /dev/null
+++ b/narrowscripts.js
@@ -0,0 +1,136 @@
+// SCRIPTS FOR THE NEW AUDIO PLAYER 
+
+(function(){
+
+  function waitForIt(selector, time) {
+    if(document.querySelector(selector)!=null) {
+
+      var chat_title = document.getElementsByClassName("chatbox-title__text")[0];
+      var element = document.createElement("span");
+
+      element.innerHTML = '<audio id="player" preload="none" src="http://w-i-t-m.net:8001/radiodrama"></audio><div><button onclick="document.getElementById(\'player\').play()">Play</button><button onclick="document.getElementById(\'player\').pause();document.getElementById(\'player\').src=document.getElementById(\'player\').src;">Stop</button><button onclick="document.getElementById(\'player\').volume += 0.1">Vol +</button><button onclick="document.getElementById(\'player\').volume -= 0.1">Vol -</button></div>';
+
+      chat_title.insertAdjacentElement('afterend', element);
+
+      return;
+    }
+    else {
+      setTimeout(function() {
+
+        waitForIt(selector, time);
+
+      }, time);
+    }
+  }
+
+  waitForIt(".toggle-smiley", 1000);
+})();
+
+$(function() {
+            console.log("PARENT READY");
+            $("iframe").on("load", function(){
+                console.log("LOADED");
+                $(this).contents().find('.kiwi-startup-common').hide();
+            });
+        });
+
+
+// SCRIPT for button to hide side pannel -->
+
+  function fside() {
+     var element = document.getElementById("side");
+     element.classList.toggle("sideminclicked");
+  }
+
+
+  function fsidemobile(x) {
+    if (x.matches) { // If media query matches
+    var element = document.getElementById("side");
+     element.classList.toggle("sideminclicked");
+    } else {
+     element.classList.toggle("");
+    }
+  }
+
+  var x = window.matchMedia("(max-width: 768px)")
+  fsidemobile(x) 
+  x.addListener(fsidemobile) 
+
+// SCRIPT DRAG AND RESIZE 
+
+
+// library: https://interactjs.io/docs/installation#cdn-streamlined
+// needs embed <script src="interact.min.js"></script>
+// script above same as <script src="https://cdnjs.cloudflare.com/ajax/libs/interact.js/1.2.6/interact.min.js"></script> --> 
+// also found this other options:  https://www.webcomponents.org/element/jifalops/drag-resize and https://codepen.io/zz85/pen/gbOoVP 
+
+
+  interact('.resize-drag')
+    .draggable({
+      onmove: window.dragMoveListener
+    })
+    .resizable({
+      preserveAspectRatio: true,
+      edges: { left: true, right: true, bottom: true, top: true }
+    })
+    .on('resizemove', function (event) {
+      var target = event.target,
+          x = (parseFloat(target.getAttribute('data-x')) || 0),
+          y = (parseFloat(target.getAttribute('data-y')) || 0);
+
+      // update the element's style
+      target.style.width  = event.rect.width + 'px';
+      target.style.height = event.rect.height + 'px';
+
+      // translate when resizing from top or left edges
+      x += event.deltaRect.left;
+      y += event.deltaRect.top;
+
+      target.style.webkitTransform = target.style.transform =
+          'translate(' + x + 'px,' + y + 'px)';
+
+      target.setAttribute('data-x', x);
+      target.setAttribute('data-y', y);
+      target.textContent = event.rect.width + '×' + event.rect.height;
+    });
+
+  function dragMoveListener (event) {
+      var target = event.target,
+          // keep the dragged position in the data-x/data-y attributes
+          x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
+          y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
+
+      // translate the element
+      target.style.webkitTransform =
+      target.style.transform =
+        'translate(' + x + 'px, ' + y + 'px)';
+
+      // update the posiion attributes
+      target.setAttribute('data-x', x);
+      target.setAttribute('data-y', y);
+    }
+
+
+  //  src="https://vjs.zencdn.net/7.10.2/video.min.js"
+
+  // var player = videojs("#player");
+
+
+  // var aud1= document.getElementById('audioBG');
+  // var dur1= document.getElementById('dur1');
+  // function mDur(dur,aud){dur.max= aud.duration};
+  // function mPlay(dur,aud){dur.value=aud.currentTime};
+  // function mSet(dur,aud){aud.currentTime=dur.value};
+
+
+  // function playpause(podcast){
+  // var myAudio = document.getElementById(podcast);
+  // var myIcon = document.querySelector("."+podcast);
+  // if (myAudio.paused) {
+  // myIcon.className = podcast+" fa b-pause";
+  // myAudio.play();
+  // } else {
+  // myIcon.className = podcast+" fa b-play";
+  // myAudio.pause();
+  // }
+  // }
diff --git a/narrowstyle.css b/narrowstyle.css
index 22226f8..7b208b4 100644
--- a/narrowstyle.css
+++ b/narrowstyle.css
@@ -62,6 +62,14 @@ button {
   cursor: pointer;
 }
 
+#about {
+  margin: 5rem 2%;
+}
+
+p.about {
+  width: 70%;
+}
+
 .note {
   font-size: 0.8rem;
   position: fixed;
@@ -72,23 +80,32 @@ button {
   background-color: #393c56;
 }
 
-.about {
+
+.linkmore {
   font-family: "Computer Modern Classical Serif Italic";
-  font-size: 1.2rem;
-  line-height: 0.6rem;
   position: fixed;
   top: 0;
   right: 0;
   margin: 1rem;
   color: #ffffe5;
   z-index: 99;
+  max-width: 80px;
 }
 
-.about a {
+
+.linkmore a, .linkmore a:visited {
   font-size: 1rem;
+  line-height: 0.6rem;
   color: #ffffe5;
   text-decoration: none;
   text-shadow: 0.1rem 0.01rem 0.05rem #393c56;
+  padding:  0rem 0rem 2rem 0rem;
+}
+
+.linkmore a:hover {
+  text-decoration: underline;
+  text-underline-position: unset;
+  text-decoration-style: wavy;
 }
 
 #side {
@@ -112,7 +129,7 @@ button {
 }
 
 .sideminclicked {
-  width: 20px;
+  width: 30px;
 }
 
 .sideminclicked + .live {
@@ -123,12 +140,12 @@ button {
 button.minimize {
   box-shadow: 0.3rem 0.2rem 0.3rem #ffe4fd;
   border-radius: 0.5rem 5rem 5rem 5rem;
-  line-height: 1rem;
-  text-align: center;
-  vertical-align: middle;
-  display: inline;
+  line-height: 1.2rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   height: 2rem;
-  font-size: 1rem;
+  font-size: 1.8rem;
   width: 2rem;
   background-color: #393c56;
   color: #ffe4fd;
@@ -446,6 +463,10 @@ content: 'PAUSE';
   }*/
 
 
+  p.about {
+    width: 95%;
+  }
+
   .halfscreen , .thirdscreen {
     width: 100%;
     margin: 4rem 0% 0rem 0%;
