diff --git a/toolbox/fdc3-explained/1.1/index.html b/toolbox/fdc3-explained/1.1/index.html
index be9d85a99..352dfe889 100644
--- a/toolbox/fdc3-explained/1.1/index.html
+++ b/toolbox/fdc3-explained/1.1/index.html
@@ -109,11 +109,12 @@
 			</tr>
 
 			<tr>
-				<td class="header" rowspan="3">Get Context:</td>
+				<td class="header" rowspan="3">Context received:</td>
 			</tr>
 
 			<tr>
 				<td>Context Type: <input type="text" id="context-type"></td>
+				<td><Button type="button" id="get_context__btn" disabled>Get context</Button></td>
 			</tr>
 
 			<tr>
diff --git a/toolbox/fdc3-explained/1.1/main.js b/toolbox/fdc3-explained/1.1/main.js
index aecacaf75..947761008 100644
--- a/toolbox/fdc3-explained/1.1/main.js
+++ b/toolbox/fdc3-explained/1.1/main.js
@@ -68,9 +68,9 @@ async function populateHTML() {
     //populate available channels list with system channels
     const channelList = document.getElementById('system-channel-list');
 
-    const populateChannelsList = name => {
+    const populateChannelsList = id => {
       let node = document.createElement('li');
-      let textNode = document.createTextNode(name);
+      let textNode = document.createTextNode(id);
       node.appendChild(textNode);
       channelList.appendChild(node);
     };
@@ -79,9 +79,8 @@ async function populateHTML() {
 
     // for all of the system channels populate dropdowns & lists
     systemChannels.forEach(({ displayMetadata, id, type }) => {
-      let { name } = displayMetadata;
-      populateChannelsList(name);
-      populateChannelsDropDown(name);
+      populateChannelsList(id);
+      populateChannelsDropDown(id);
     });
 
     // as FDC3 is supported we can enable the buttons again except those that are not yet supported features
@@ -100,20 +99,15 @@ function setUpEventListeners() {
 
   document.getElementById('join-channel__btn').addEventListener('click', joinChannel);
 
-  document.getElementById('leave-channel__btn').addEventListener('click', fdc3.leaveCurrentChannel);
+  document.getElementById('leave-channel__btn').addEventListener('click', () => { fdc3.leaveCurrentChannel(); });
 
   document.getElementById('broadcast__btn').addEventListener('click', broadcastFDC3Context);
 
   document.getElementById('raise-intent__btn').addEventListener('click', raiseIntent);
 
-  document.getElementById('context-type').addEventListener('keyup', event => {
-    //  we only want to get the context wen the user hits enter
-    if (event.key === 'Enter') {
-      event.preventDefault();
-
-      let contextType = event.target.value;
-      getContext(contextType);
-    }
+  document.getElementById('get_context__btn').addEventListener('click', event => {
+    let contextType = document.getElementById('context-type').value;
+    getContext(contextType);
   });
 }
 
@@ -137,7 +131,7 @@ function populateChannelsDropDown(newOptionText) {
 function joinChannel() {
   try {
     let dropdownElement = document.getElementById('join-channel');
-    let channelName = dropdownElement.options[dropdownElement.selectedIndex].text.toLowerCase();
+    let channelName = dropdownElement.options[dropdownElement.selectedIndex].text;
     fdc3.joinChannel(channelName);
   } catch (error) {
     console.error("Can't join channel", error);
@@ -162,10 +156,10 @@ async function getContext(contextType) {
     if (contextType) {
       contextListener = fdc3.addContextListener(
         contextType,
-        context => (contextResultBox.value = JSON.stringify(context))
+        context => (contextResultBox.value = JSON.stringify(context, null, 2))
       );
     } else {
-      contextListener = fdc3.addContextListener(context => (contextResultBox.value = JSON.stringify(context)));
+      contextListener = fdc3.addContextListener(context => (contextResultBox.value = JSON.stringify(context, null, 2)));
     }
   } catch (error) {
     console.error('Unable to add a context listener', error);
diff --git a/toolbox/fdc3-explained/1.2/index.html b/toolbox/fdc3-explained/1.2/index.html
index 299c89fa0..3846a8dd8 100644
--- a/toolbox/fdc3-explained/1.2/index.html
+++ b/toolbox/fdc3-explained/1.2/index.html
@@ -105,11 +105,12 @@
 			</tr>
 
 			<tr>
-				<td class="header" rowspan="3">Get Context:</td>
+				<td class="header" rowspan="3">Context received:</td>
 			</tr>
 
 			<tr>
 				<td>Context Type: <input type="text" id="context-type"></td>
+				<td><Button type="button" id="get_context__btn" disabled>Get context</Button></td>
 			</tr>
 
 			<tr>
diff --git a/toolbox/fdc3-explained/1.2/main.js b/toolbox/fdc3-explained/1.2/main.js
index 4c0911d6c..427624933 100644
--- a/toolbox/fdc3-explained/1.2/main.js
+++ b/toolbox/fdc3-explained/1.2/main.js
@@ -65,9 +65,9 @@ async function populateHTML() {
     //populate available channels list with system channels
     let channelList = document.getElementById('system-channel-list');
 
-    const populateChannelsList = name => {
+    const populateChannelsList = id => {
       let node = document.createElement('li');
-      let textNode = document.createTextNode(name);
+      let textNode = document.createTextNode(id);
       node.appendChild(textNode);
       channelList.appendChild(node);
     };
@@ -76,9 +76,9 @@ async function populateHTML() {
 
     // for all of the system channels populate dropdowns & lists
     systemChannels.forEach(({ displayMetadata, id, type }) => {
-      let { name } = displayMetadata;
-      populateChannelsList(name);
-      populateChannelsDropDown(name);
+      //use the id field as this is what is needed to join the channel
+      populateChannelsList(id);
+      populateChannelsDropDown(id);
     });
 
     // as FDC3 is supported we can enable the buttons again except those that are not yet supported features
@@ -97,20 +97,15 @@ function setUpEventListeners() {
 
   document.getElementById('join-channel__btn').addEventListener('click', joinChannel);
 
-  document.getElementById('leave-channel__btn').addEventListener('click', fdc3.leaveCurrentChannel);
+  document.getElementById('leave-channel__btn').addEventListener('click', () => { fdc3.leaveCurrentChannel(); });
 
   document.getElementById('broadcast__btn').addEventListener('click', broadcastFDC3Context);
 
   document.getElementById('raise-intent__btn').addEventListener('click', raiseIntent);
 
-  document.getElementById('context-type').addEventListener('keyup', event => {
-    //  we only want to get the context wen the user hits enter
-    if (event.key === 'Enter') {
-      event.preventDefault();
-
-      let contextType = event.target.value;
+  document.getElementById('get_context__btn').addEventListener('click', event => {
+      let contextType = document.getElementById('context-type').value;
       getContext(contextType);
-    }
   });
 }
 
@@ -134,7 +129,7 @@ function populateChannelsDropDown(newOptionText) {
 function joinChannel() {
   try {
     let dropdownElement = document.getElementById('join-channel');
-    let channelName = dropdownElement.options[dropdownElement.selectedIndex].text.toLowerCase();
+    let channelName = dropdownElement.options[dropdownElement.selectedIndex].text;
     fdc3.joinChannel(channelName);
   } catch (error) {
     console.error("Can't join channel", error);
@@ -159,11 +154,11 @@ async function getContext(contextType) {
     if (contextType) {
       contextListener = fdc3.addContextListener(
         contextType,
-        context => (contextResultBox.innerText = JSON.stringify(context, null, 2))
+        context => (contextResultBox.innerHTML = "<pre>" + JSON.stringify(context, null, 2)) + "</pre>"
       );
     } else {
       contextListener = fdc3.addContextListener(
-        context => (contextResultBox.innerText = JSON.stringify(context, null, 2))
+        context => (contextResultBox.innerHTML=  "<pre>" + JSON.stringify(context, null, 2)) + "</pre>"
       );
     }
   } catch (error) {
diff --git a/toolbox/fdc3-explained/1.2/styles.css b/toolbox/fdc3-explained/1.2/styles.css
index ae2e66fd4..8cab74c03 100644
--- a/toolbox/fdc3-explained/1.2/styles.css
+++ b/toolbox/fdc3-explained/1.2/styles.css
@@ -39,7 +39,7 @@ button:focus {
   outline: transparent;
 }
 input {
-  background: #55778e;
+  background: #e8f7ff;
   box-shadow: inset -2px -2px 2px 0px rgb(255 255 255 / 12%),
     inset 2px 3px 6px 2px rgb(0 0 0 / 19%);
   border-radius: 6px;
@@ -52,7 +52,7 @@ input:focus {
   outline: 0;
 }
 textarea {
-  background: #55778e;
+  background: #e8f7ff;
   box-shadow: inset -3px -5px 5px 1px rgb(255 255 255 / 12%),
     inset 2px 3px 6px 2px rgb(0 0 0 / 19%);
   border-radius: 6px;