diff --git a/public/index.html b/public/index.html
index f807c97..b14b2bc 100644
--- a/public/index.html
+++ b/public/index.html
@@ -100,11 +100,11 @@
       <!-- peers -->
       <div class="row mt-3">        
         <!-- peer -->
-        <div class="col-6">
+        <div v-for="call in calls" class="col-6">
           <div class="card text-dark">
-            <video id="remoteVideo" class="card-img-top" autoplay></video>
+            <video v-bind:srcObject="call.remoteStream" class="card-img-top" autoplay></video>
             <div class="card-body">
-              <h5 class="card-title">Remote</h5>
+              <h5 class="card-title">{{call.peer}}</h5>
             </div>
           </div>
         </div>
diff --git a/public/main.js b/public/main.js
index 7ff07fe..d9599c1 100644
--- a/public/main.js
+++ b/public/main.js
@@ -17,7 +17,8 @@ var app = new Vue({
       document.querySelector('.messages').appendChild(newMessage);
     },
     renderVideo:function(stream, selector = '#remoteVideo') {
-      document.querySelector(selector).srcObject = stream;
+      console.log('renderVideo', stream);
+      // document.querySelector(selector).srcObject = stream;
     },
     connectToPeer: function(peerId) {
       this.logMessage(`Connecting to ${peerId}...`);
@@ -34,7 +35,7 @@ var app = new Vue({
       call.on('stream', this.renderVideo);
       call.on('close', () => {
         console.log(`Call with ${peerId} was closed.`);
-          this.calls = this.calls.filter(c => c.connectionId === call.connectionId);
+        this.calls = this.calls.filter(c => c.connectionId === call.connectionId);
       });
       this.calls.push(call);
     },