diff --git a/client/main-page.hbs b/client/main-page.hbs
index 7395dc4..10b07e4 100644
--- a/client/main-page.hbs
+++ b/client/main-page.hbs
@@ -22,7 +22,7 @@
 				<div class="details">
 					{{#if definition}}
 						<p class="detail definition"><strong>Translation into plain English
-						</strong> {{definition}}</p>
+						</strong> <span>{{definition}}</span></p>
 					{{/if}}
 					{{#if usageexample}}
 						<p class="detail usageexample">{{usageexample}}</p>
diff --git a/client/scripts/main.js b/client/scripts/main.js
index 3e87f68..28f00ad 100755
--- a/client/scripts/main.js
+++ b/client/scripts/main.js
@@ -1,12 +1,70 @@
 import oHoverable from 'o-hoverable';
 import attachFastClick from 'fastclick';
 
+var words = {};
+
 document.addEventListener('DOMContentLoaded', () => {
-  // make hover effects work on touch devices
+  // // make hover effects work on touch devices
   oHoverable.init();
 
-  // remove the 300ms tap delay on mobile browsers
+  // // remove the 300ms tap delay on mobile browsers
   attachFastClick(document.body);
 
-  // YOUR CODE HERE!
+  if (document.documentElement.className === 'enhanced') {
+  	var xmlhttp = new XMLHttpRequest();
+  	xmlhttp.onreadystatechange = function() {
+  	  if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
+  	    words = JSON.parse(xmlhttp.responseText);
+  	  }
+  	};
+  	xmlhttp.open('GET', 'words.json', true);
+  	xmlhttp.send();
+  }
+
 });
+
+function replaceRandomGuff() {
+	var wordArray = Object.keys(words);
+
+	var randomNumber = Math.floor(Math.random() * (wordArray.length - 1)) + 1;
+
+	var randomWord = words[wordArray[randomNumber]];
+
+	var randomGuffElement = document.getElementsByClassName('random-guff')[0];
+
+	var randomGuffClone = randomGuffElement.cloneNode(true);
+
+	var word = randomGuffClone.children[1];
+	var details = randomGuffClone.children[2];
+	var definition = details.children[0].children[1];
+	var usageExample = details.children[1];
+	var relatedWordsElement = details.children[2];
+
+	word.href = randomWord.slug + '/';
+	word.innerHTML = randomWord.word + '&raquo;';
+	definition.innerText = randomWord.definition;
+	usageExample.innerText = randomWord.usageexample;
+
+	if (randomWord.relatedwords) {
+		var relatedWords = randomWord.relatedwords;
+		var newRelatedWordsElement = document.createElement('p');
+		newRelatedWordsElement.className = 'detail relatedwords';
+		newRelatedWordsElement.innerHTML = 'Related: ';
+
+		for(var relatedWord of relatedWords) {
+			var relatedWordElement = document.createElement('a');
+			relatedWordElement.href = relatedWord.slug + '/';
+			relatedWordElement.innerHTML = relatedWord.word;
+			newRelatedWordsElement.appendChild(relatedWordElement);
+		}
+		if (relatedWordsElement) {
+			relatedWordsElement = newRelatedWordsElement;
+		} else {
+			details.appendChild(newRelatedWordsElement);
+		}
+	} else {
+		relatedWordsElement.remove()
+	}
+	randomGuffElement.innerHTML = randomGuffClone.innerHTML;
+
+}
diff --git a/client/top.hbs b/client/top.hbs
index 1fe2bdf..511ebe6 100644
--- a/client/top.hbs
+++ b/client/top.hbs
@@ -18,6 +18,10 @@
     <script src="scripts/top.js"></script>
     <!-- endsmoosh -->
 
+    <!-- smoosh -->
+    <script src="scripts/main.js"></script>
+    <!-- endsmoosh -->
+
     <!-- smoosh -->
     <link rel="stylesheet" href="styles/top.css">
     <!-- endsmoosh -->