diff --git a/public/main.js b/public/main.js
index c44db60..4060450 100644
--- a/public/main.js
+++ b/public/main.js
@@ -21,6 +21,8 @@ var app = new Vue({
     }),
     stream: null,
     calls: [],
+    audioCalls: [],
+    videoCalls:[],
     connections: [],
     chatInput: '',
   },
@@ -98,11 +100,11 @@ var app = new Vue({
       
       const audioStream = await this.getAudioStream();
       let audioCall = this.peer.call(peerId, audioStream);
-      console.log('Started audioCall', audioCall);
+      // console.log('Started audioCall', audioCall);
       this.handleCall(audioCall);
       const videoStream = await this.getVideoStream();
       let videoCall = this.peer.call(peerId, videoStream);
-      console.log('Started videoCall', videoCall);
+      // console.log('Started videoCall', videoCall);
       this.handleCall(videoCall);
     },
     hangUp: function() {
@@ -165,18 +167,28 @@ var app = new Vue({
         console.log(`Call with ${call.peer} was closed.`);
         this.calls = this.calls.filter(c => c.connectionId === call.connectionId);
       });
-      this.calls.push(call);
-      console.log('Call', call);
-      call.peerConnection.onaddstream  = (stream) => {
-        console.log('stream add', stream);
-        console.log('getRemoteStreams', stream.currentTarget.getRemoteStreams()[0]);
-        stream.stream.onaddtrack = (a,b) => {
-          console.log('got track', a, b)
-        };
-      };
-      call.peerConnection.onremovestream = (stream) => {
-        console.log('stream remove', stream);
-      };
+      if ((call._localStream.getVideoTracks().length > 0) && (call._localStream.getAudioTracks().length > 0)) {
+        this.calls.push(call);
+        console.log('Call', call);
+      } else {
+        if (call._localStream.getVideoTracks().length > 0) {
+          this.videoCalls.push(call);
+          console.log('videoCall', call);
+        } else if (call._localStream.getAudioTracks().length > 0) {
+          this.audioCalls.push(call);
+          console.log('audioCall', call);
+        }
+      }
+      // call.peerConnection.onaddstream  = (stream) => {
+      //   console.log('stream add', stream);
+      //   console.log('getRemoteStreams', stream.currentTarget.getRemoteStreams()[0]);
+      //   stream.stream.onaddtrack = (a,b) => {
+      //     console.log('got track', a, b)
+      //   };
+      // };
+      // call.peerConnection.onremovestream = (stream) => {
+      //   console.log('stream remove', stream);
+      // };
     },
     gotDevices: function gotDevices(deviceInfos) {
       const selectors = [document.querySelector('select#audioSource'), document.querySelector('select#audioOutput'), document.querySelector('select#videoSource')];
diff --git a/views/index.ejs b/views/index.ejs
index 50a79ce..94805f3 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -120,15 +120,24 @@
       </div>
       <!-- peers -->
       <div class="row mt-3">        
-        <!-- peer -->
+        <!-- calls -->
         <div v-for="call in calls" class="col-6">
           <div class="card text-dark">
-            <video v-bind:id="'video-'+call.connectionId" class="card-img-top" autoplay></video>
+            <video v-if="call._localStream.getVideoTracks().length > 0" v-bind:id="'video-'+call.connectionId" class="card-img-top" autoplay></video>
+            <audio v-if="call._localStream.getAudioTracks().length > 0" v-bind:id="'video-'+call.connectionId" class="card-img-top" autoplay></audio>
             <div class="card-body">
               <h5 class="card-title">{{call.peer}}</h5>
+              <p>
+                Video: {{ call._localStream.getVideoTracks().length }}
+              </p>
+              <p>
+                Audio: {{ call._localStream.getAudioTracks().length }}
+              </p>
             </div>
           </div>
         </div>
+        <!-- audio calls -->
+        <!-- video calls -->
       </div>
     </div>