diff --git a/docs/samples/calling/app.js b/docs/samples/calling/app.js
index 70fcb8e2adf..c0df6e1cc4b 100644
--- a/docs/samples/calling/app.js
+++ b/docs/samples/calling/app.js
@@ -89,7 +89,7 @@ const muteElm = document.getElementById('mute_button');
 let base64;
 let audio64;
 let call;
-let callTranferObj;
+let callTransferObj;
 let broadworksCorrelationInfo;
 let localAudioStream;
 let effect;
@@ -124,6 +124,11 @@ function getMediaSettings() {
   return settings;
 }
 
+function updateCallControlButtons(callObject){
+    holdResumeElm.value = callObject.held ? 'Resume':'Hold'
+    muteElm.value = callObject.muted ? 'Unmute':'Mute'
+}
+
 function getAudioVideoInput() {
   const deviceId = (id) => devicesById[id];
   const audioInput = getOptionValue(audioInputDevicesElem) || 'default';
@@ -247,11 +252,9 @@ async function initCalling(e) {
 
   calling.on('ready', () => {
     console.log('Authentication :: Calling Ready');
-    registerElm.disabled = false;
     callHistoryElm.disabled = false;
     voicemailElm.disabled = false;
     authStatusElm.innerText = 'Saved access token!';
-    registerElm.classList.add('btn--green');
     callHistoryElm.classList.add('btn--green');
     voicemailElm.classList.add('btn--green');
     dndButton.classList.add('btn--red');
@@ -263,6 +266,7 @@ async function initCalling(e) {
 
     calling.register().then(async () => {
       unregisterElm.classList.add('btn--red');
+      registerElm.classList.add('btn--green');
       registerElm.disabled = false;
 
       callingClient = window.callingClient = calling.callingClient;
@@ -342,7 +346,7 @@ function createDevice() {
       calling.webex.internal.device.url !== ''
         ? `Registered, deviceId: ${deviceInfo.mobiusDeviceId}`
         : 'Not Registered';
-    // unregisterElm.disabled = false;
+    unregisterElm.disabled = false;
   });
 
   // Start listening for incoming calls
@@ -364,6 +368,7 @@ function createDevice() {
       makeCallBtn.disabled = false;
       endElm.disabled = true;
       muteElm.value = 'Mute';
+      holdResumeElm.value = 'Hold';
       answerElm.disabled = true;
     });
 
@@ -388,42 +393,68 @@ function endCall() {
   makeCallBtn.disabled = false;
   endElm.disabled = true;
   muteElm.value = 'Mute';
+  holdResumeElm.value = 'Hold'
   imageElm.removeChild(img);
 }
 
 function endSecondCall() {
-  callTranferObj.end();
-  transferDetailsElm.innerText = `${callTranferObj.getCorrelationId()}: Call Disconnected`;
+  callTransferObj.end();
+  transferDetailsElm.innerText = `${callTransferObj.getCorrelationId()}: Call Disconnected`;
+  callTransferObj = null
   endSecondElm.disabled = true;
-  muteElm.value = 'Mute';
+  transferElm.innerHTML = 'Transfer';
+  updateCallControlButtons(call)
+  if (call.muted){
+    localAudioStream.outputStream.getAudioTracks()[0].enabled = false
+  }
   imageElm.removeChild(img);
 }
 
 function muteUnmute() {
   muteElm.value = muteElm.value === 'Mute' ? 'Unmute' : 'Mute';
-
-  call.mute(localAudioStream);
+  if (callTransferObj){
+    callTransferObj.mute(localAudioStream)
+  }
+  else {  
+    call.mute(localAudioStream);
+  }
 }
 
 function holdResume() {
-  const elem = document.getElementById('hold_button');
-
-  call.on('held', (correlationId) => {
-    if (elem.value === 'Hold') {
-      callDetailsElm.innerText = 'Call is held';
-      elem.value = 'Resume';
-    }
-  });
-
-  call.on('resumed', (correlationId) => {
-    if (elem.value === 'Resume') {
-      callDetailsElm.innerText = 'Call is Resumed';
-      elem.value = 'Hold';
-    }
-  });
-
-  call.doHoldResume();
+  if (callTransferObj){
+    callTransferObj.on('held', (correlationId) => {
+      if (holdResumeElm.value === 'Hold') {
+        callDetailsElm.innerText = 'Call is held';
+        holdResumeElm.value = 'Resume';
+      }
+    });
+  
+    callTransferObj.on('resumed', (correlationId) => {
+      if (holdResumeElm.value === 'Resume') {
+        callDetailsElm.innerText = 'Call is Resumed';
+        holdResumeElm.value = 'Hold';
+      }
+    });
+    callTransferObj.doHoldResume()
+  }
+  else{
+    call.on('held', (correlationId) => {
+      if (holdResumeElm.value === 'Hold') {
+        callDetailsElm.innerText = 'Call is held';
+        holdResumeElm.value = 'Resume';
+      }
+    });
+  
+    call.on('resumed', (correlationId) => {
+      if (holdResumeElm.value === 'Resume') {
+        callDetailsElm.innerText = 'Call is Resumed';
+        holdResumeElm.value = 'Hold';
+      }
+    });
+    call.doHoldResume();
+  }
 }
+
 function deleteDevice() {
   line.deregister();
   line.on('unregistered', () => {
@@ -431,7 +462,7 @@ function deleteDevice() {
     registrationStatusElm.innerText = 'Unregistered';
   })
   registerElm.disabled = false;
-  // unregisterElm.disabled = true;
+  unregisterElm.disabled = true;
 }
 
 function populateSourceDevices(mediaDevice) {
@@ -551,37 +582,40 @@ async function getCallQuality() {
 }
 
 function commitTransfer() {
+
   const digit = transferTarget.value;
 
   transferElm.disabled = true;
 
   if (transferOptionsElm.options[transferOptionsElm.selectedIndex].text === 'Consult Transfer') {
-    callTranferObj = line.makeCall({
+    call.doHoldResume();
+    transferDetailsElm.innerText = `Placed call: ${call.getCorrelationId()} on hold and dialing Transfer target`;
+
+    callTransferObj = line.makeCall({
       type: 'uri',
       address: digit,
     });
-
-    callTranferObj.on('remote_media', (track) => {
+    updateCallControlButtons(callTransferObj)
+    callTransferObj.on('remote_media', (track) => {
       document.getElementById('remote-audio').srcObject = new MediaStream([track]);
 
       transferDetailsElm.innerText = `Got remote audio`;
     });
 
-    callTranferObj.on('established', (correlationId) => {
+    callTransferObj.on('established', (correlationId) => {
       transferDetailsElm.innerText = `${correlationId}: Transfer target connected`;
       endSecondElm.disabled = false;
       transferElm.innerHTML = 'Commit';
       transferElm.disabled = false;
     });
 
-    callTranferObj.on('disconnect', (correlationId) => {
+    callTransferObj.on('disconnect', (correlationId) => {
       endSecondElm.disabled = true;
-      callTranferObj = null;
+      callTransferObj = null;
     });
 
-    callTranferObj.dial(localAudioStream);
+    callTransferObj.dial(localAudioStream);
 
-    transferDetailsElm.innerText = `Dialing Transfer target`;
   } else {
     console.log(`Initiating blind transfer with ${digit}`);
     call.completeTransfer('BLIND', undefined, digit);
@@ -593,17 +627,12 @@ function initiateTransfer() {
 
   transferInitiated = true;
   if (!call.isHeld()) {
-    call.doHoldResume();
-
-    call.on('held', (correlationId) => {
-      transferDetailsElm.innerText = `Placed call: ${call.getCorrelationId()} on hold`;
       commitTransfer();
-    });
   } else {
     transferDetailsElm.innerText = `Transferring call..`;
-    if (callTranferObj) {
+    if (callTransferObj) {
       console.log(`Completing consult transfer with ${digit}`);
-      call.completeTransfer('CONSULT', callTranferObj.getCallId(), undefined);
+      call.completeTransfer('CONSULT', callTransferObj.getCallId(), undefined);
     }
   }
 }
diff --git a/docs/samples/calling/index.html b/docs/samples/calling/index.html
index 7c41e07e27d..ed67ca420d6 100644
--- a/docs/samples/calling/index.html
+++ b/docs/samples/calling/index.html
@@ -72,8 +72,8 @@ <h2 class="collapsible">Authentication</h2>
                 </p>
                 <div class="u-mv">
                   <div>
-                    <button id="registration-register" type="button" onclick="createDevice()" class="btn-code">register</button>
-                    <button id="registration-unregister" type="button" onclick="unregister()" class="btn-code">unregister</button>
+                    <button id="registration-register" type="button" onclick="createDevice()" class="btn-code" disabled>register</button>
+                    <button id="registration-unregister" type="button" onclick="unregister()" class="btn-code" disabled>unregister</button>
                   </div>
                   <pre id="registration-status">Not Registered</pre>
                 </div>