diff --git a/public/main.js b/public/main.js
index 4060450..b2a3f68 100644
--- a/public/main.js
+++ b/public/main.js
@@ -112,6 +112,14 @@ var app = new Vue({
         console.log('hangUp - closing', c);
         c.close();
       });
+      this.audioCalls.forEach(c => {
+        console.log('hangUp - closing', c);
+        c.close();
+      });
+      this.videoCalls.forEach(c => {
+        console.log('hangUp - closing', c);
+        c.close();
+      });
       this.connections.forEach(c => {
         console.log('hangUp - closing', c);
         c.close();
diff --git a/views/index.ejs b/views/index.ejs
index 94805f3..a0abe3d 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -92,13 +92,13 @@
               <hr> 
               <input type="text" ref="connectPeer" class="form-control" placeholder="paste-peer-id-here">
               <br>
-              <button class="btn btn-sm btn-success" v-on:click="connectToPeer($refs.connectPeer.value);$refs.connectPeer.value = '';">
+              <button class="btn btn-sm btn-success mt-1" v-on:click="connectToPeer($refs.connectPeer.value);$refs.connectPeer.value = '';">
                 Connect
               </button>
-              <button class="btn btn-sm btn-primary" v-on:click="connectToPeer2($refs.connectPeer.value);$refs.connectPeer.value = '';">
+              <button class="btn btn-sm btn-primary mt-1" v-on:click="connectToPeer2($refs.connectPeer.value);$refs.connectPeer.value = '';">
                 Connect 2
               </button>
-              <button class="btn btn-sm btn-danger" v-on:click="hangUp()">
+              <button class="btn btn-sm btn-danger mt-1" v-on:click="hangUp()">
                 Disconnect
               </button>
               <hr>  
@@ -119,7 +119,34 @@
         </div>
       </div>
       <!-- peers -->
-      <div class="row mt-3">        
+      <div class="row mt-3">   
+        <!-- audio calls -->
+        <div class="col-6">
+          <div class="card text-dark">
+            <div class="card-body">
+              <h5 class="card-title">Audio connections</h5>
+              <p v-for="call in audioCalls">
+                {{ call.peer}}
+                <audio v-if="call._localStream.getAudioTracks().length > 0" v-bind:id="'video-'+call.connectionId" class="card-img-top" controls autoplay></audio>
+              </p>
+            </div>
+          </div>
+        </div>
+        <!-- video calls -->
+        <div v-for="call in videoCalls" class="col-6">
+          <div class="card text-dark">
+            <video v-if="call._localStream.getVideoTracks().length > 0" v-bind:id="'video-'+call.connectionId" class="card-img-top" autoplay muted></video>
+            <div class="card-body">
+              <h5 class="card-title">Video: {{call.peer}}</h5>
+              <p>
+                Video: {{ call._localStream.getVideoTracks().length }}
+              </p>
+              <p>
+                Audio: {{ call._localStream.getAudioTracks().length }}
+              </p>
+            </div>
+          </div>
+        </div>     
         <!-- calls -->
         <div v-for="call in calls" class="col-6">
           <div class="card text-dark">
@@ -136,8 +163,7 @@
             </div>
           </div>
         </div>
-        <!-- audio calls -->
-        <!-- video calls -->
+        <!-- end -->
       </div>
     </div>