diff --git a/public/index.html b/public/index.html
index acedcf9..f807c97 100644
--- a/public/index.html
+++ b/public/index.html
@@ -89,7 +89,7 @@
               <button class="btn btn-sm btn-success" v-on:click="connectToPeer($refs.connectPeer.value);$refs.connectPeer.value = '';">
                 Connect
               </button>
-              <button class="btn btn-sm btn-danger" v-on:click="disconnectCall()">
+              <button class="btn btn-sm btn-danger" v-on:click="hangUp()">
                 Disconnect
               </button>
               <div class="messages"></div>
diff --git a/public/main.js b/public/main.js
index 71105b6..7ff07fe 100644
--- a/public/main.js
+++ b/public/main.js
@@ -32,12 +32,21 @@ var app = new Vue({
 
       let call = this.peer.call(peerId, this.stream);
       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.push(call);
     },
+    hangUp: function() {
+      this.calls.forEach(c => {
+        this.disconnectCall(c);
+      });
+    },
     disconnectCall: function(call) {
-      // if (!call) return;
-      console.log('CALLS', this.calls);
+      if (!call) return;
       console.log('CALL', call);
+      call.close();
     },
     listenForPeerEvents: function () {
       this.peer.on('open', (id) => {
@@ -73,6 +82,11 @@ var app = new Vue({
         call.answer(this.stream); // Answer the call with an A/V stream.
         // this.renderVideo(this.stream, '#localVideo');
         call.on('stream', this.renderVideo);
+        call.on('close', () => {
+          console.log(`Call with ${call.peer} was closed.`);
+          this.calls = this.calls.filter(c => c.connectionId === call.connectionId);
+        });
+        this.calls.push(call);
       });
     },
     gotDevices: function gotDevices(deviceInfos) {