diff --git a/index.html b/index.html
index b4690d2..639dd4e 100644
--- a/index.html
+++ b/index.html
@@ -29,13 +29,14 @@
     	<div class="container">
     		<div class="row">
     			<div class="col-lg-6 col-md-6">
-    				Your Peer ID: <h4 id="peer-id" data-toggle="tooltip" data-placement="top" title="Click to copy peer ID"></h3>
+    				Your ID: <h4 id="peer-id" data-toggle="tooltip" data-placement="top" title="Click to copy peer ID"></h3>
+                    <a href="#getUserNameModal" data-toggle="modal">change</a>
     			</div>
     			<div class="col-lg-6 col-md-6">
     				<div class="form-inline">
 						<div class="form-group mx-sm-3">
 							<label for="inputPeerUserId" class="sr-only">Password</label>
-							<input type="text" class="form-control" id="inputPeerUserId" placeholder="Peer ID">
+							<input type="text" class="form-control" id="inputPeerUserId" placeholder="Enter your friends ID">
 						</div>
 						<button type="button" class="btn btn-outline-primary" id='connect-btn'>Connect</button>
 					</div>
@@ -81,6 +82,26 @@ <h2 class="title">Video Call</h2>
         </div>
     </div>
 
+    <div class="modal fade" id="getUserNameModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="exampleModalLabel">Enter your Name</h5>
+                </div>
+                <div class="modal-body">
+                    <div class="form-group">
+                        <label for="user-name" class="form-control-label">Your Name:</label>
+                        <input type="text" class="form-control" id="user-name">
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" data-dismiss="modal" class="btn btn-primary username-done">Done</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+
     <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
 
diff --git a/js/app.js b/js/app.js
index 88f9a64..ae2674e 100644
--- a/js/app.js
+++ b/js/app.js
@@ -3,6 +3,36 @@ function myjsapp(peerClient) {
     var chatHistory = {};
     var chatPanel = {};
 
+    var cookie = {
+        // Read cookie
+        get : function getCookie (name) {
+            var cookies = {};
+            var c = document.cookie.split('; ');
+            for (i = c.length - 1; i >= 0; i--) {
+                var C = c[i].split('=');
+                cookies[C[0]] = C[1];
+            }
+            return cookies[name] || null;
+        },
+
+        // create cookie
+        set : function createCookie (name, value, minutes) {
+            if (minutes) {
+                var date = new Date();
+                date.setTime(date.getTime() + (minutes * 60 * 1000));
+                var expires = "; expires=" + date.toGMTString();
+            } else
+                var expires = "";
+            document.cookie = name + "=" + value + expires + "; path=/";
+        },
+
+        remove : function deleteCookie (name) {
+            var date = new Date();
+            date.setTime(date.getTime() - 60 * 1000);
+            document.cookie = name + "=; expires=" + date.toGMTString() + "; path=/";
+        }
+    };
+
     function EventListeners() {
         $('#peer-id').tooltip()
 
@@ -40,6 +70,11 @@ function myjsapp(peerClient) {
             // End established call
             peerClient.endCall();
         })
+
+        $('.username-done').click(function (event) {
+            var username = $('#user-name').val().trim();
+            startPeerClient(username)
+        })
     }
 
     function appendToHistory(id, message, isSent) {
@@ -52,7 +87,21 @@ function myjsapp(peerClient) {
         }
     }
 
-    EventListeners();
+    function startPeerClient(username) {
+        // TODO - Set title
+        cookie.set('username', username);
+        peerClient.connectToServerWithId(username);
+    }
+
+    // Show Username Modal
+    var username = cookie.get('username');
+    if(username) {
+        startPeerClient(username)
+    } else {
+        $('#getUserNameModal').modal()
+    }
+
+    EventListeners();        
 
     return {
         setPeerId : function (id) {
@@ -122,6 +171,7 @@ function myjsapp(peerClient) {
                 peerClient.makeCall(toPeerId, isVideoCall);
                 return false
             })
+
             videoCall.click(function (event) {
                 // initializeLocalVideo()
                 var isVideoCall = true;
diff --git a/js/peer-client.js b/js/peer-client.js
index 8edab24..b341234 100644
--- a/js/peer-client.js
+++ b/js/peer-client.js
@@ -13,15 +13,16 @@ peerapp = (function() {
     navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
 
     // Connect to server
-    function connectToServer() {
+    function connectToServerWithId(peerId) {
+        myPeerID = peerId || myPeerID;
         peer = new Peer(myPeerID, { host: PEER_SERVER, port: PORT, path: '/', secure: true });  
         peerCallbacks(peer);
     }    
     // var peer = new Peer({ host: 'my-peer.herokuapp.com', port: '443', path: '/', secure: true });
-    connectToServer();
+    // connectToServerWithId(myPeerID);
     console.log(peer)
 
-    initializeLocalMedia({'audio' : true});
+    initializeLocalMedia({'audio': true, 'video': true});
 
     // Generate random ID
     function generateRandomID(length) {
@@ -118,7 +119,7 @@ peerapp = (function() {
             console.log("Peer connection disconnected");
             console.log(new Date());
             setTimeout(function () {
-                connectToServer();  
+                connectToServerWithId();  
             }, 3000);
             
             // peer.reconnect()
@@ -128,6 +129,10 @@ peerapp = (function() {
             console.log(new Date());
             console.log("Peer connection error:")
             console.log(err)
+            if("unavailable-id" == err.type) {
+                // ID Already taken, so assigning random ID
+                myPeerID = generateRandomID(4);
+            }
         });
     };
 
@@ -227,6 +232,7 @@ peerapp = (function() {
         makeCall : makeCall,
         endCall : endCall,
         sendMessage : sendMessage,
-        connectToId : connectToId
+        connectToId : connectToId,
+        connectToServerWithId : connectToServerWithId
     }
 })();