diff --git a/public/index.html b/public/index.html
index c2c8b8e..9a97cf3 100644
--- a/public/index.html
+++ b/public/index.html
@@ -33,7 +33,7 @@
     <nav class="navbar navbar-dark bg-dark">
       <a class="navbar-brand" href="#" style="margin: 0 auto;">
         <img
-          src="https://getbootstrap.com/docs/4.5/assets/brand/bootstrap-solid.svg"
+          src="https://glitch.com/edit/favicon-app.ico"
           width="30"
           height="30"
           class="d-inline-block align-top"
@@ -79,9 +79,9 @@
               <h5 class="card-title">Control</h5>
               <div class="input-group mb-3">
                 <div class="input-group-prepend">
-                  <button class="btn btn-outline-secondary" type="button">Copy</button>
+                  <button v-on:click="copyToClipboard('#peerId')" class="btn btn-outline-secondary" type="button">Copy</button>
                 </div>
-                <input id="my-peer-id" type="text" class="form-control" placeholder="my-peer-id">
+                <input id="peerId" v-model="peer.id" type="text" class="form-control" placeholder="my-peer-id" disabled>
               </div>
               <hr> 
               <input type="text" id="connect-to-peer" class="form-control" placeholder="paste-peer-id-here">
diff --git a/public/main.js b/public/main.js
index c16a37c..d212345 100644
--- a/public/main.js
+++ b/public/main.js
@@ -155,6 +155,13 @@ var app = new Vue({
       };
       navigator.mediaDevices.getUserMedia(constraints).then(this.gotStream).then(this.gotDevices).catch(this.handleError);
     },
+    copyToClipboard: function(selector) {
+      let element = document.querySelector(selector);
+      element.select();
+      element.setSelectionRange(0, 99999); /*For mobile devices*/
+      document.execCommand("copy");
+      alert("Copied the text: " + element.value);
+    }
   },
   mounted() {
     console.log('VUE is alive!');