diff --git a/index.html b/index.html
index a2d3201..36ee312 100644
--- a/index.html
+++ b/index.html
@@ -57,21 +57,41 @@
 		</h2>
 
 		<div class="btn-group-lg" role="group" aria-label="...">
-		<button type="button" class="btn btn-default">4</button>
-		<button type="button" class="btn btn-default">5</button>
-		<button type="button" class="btn btn-default">6</button>
-		<button type="button" class="btn btn-default">7</button>
-		<button type="button" class="btn btn-default">8</button>
+		<button type="button" class="btn btn-default dice_button">2</button>
+		<button type="button" class="btn btn-default dice_button">3</button>
+		<button type="button" class="btn btn-default dice_button active">4</button>
+		<button type="button" class="btn btn-default dice_button">5</button>
+		<button type="button" class="btn btn-default dice_button">6</button>
+		<button type="button" class="btn btn-default dice_button">7</button>
+		<button type="button" class="btn btn-default dice_button">8</button>
 		</div>
 
 		<br/>
-		<button type="button" class="btn btn-default btn-lg btn-primary">
-			<span class="glyphicon glyphicon-play" aria-hidden="true"></span> Roll Dice!
+		<button type="button" class="btn btn-default btn-lg btn-primary" id="roll_dice">
+			<span class="glyphicon glyphicon-play" aria-hidden="true" ></span> Roll Dice!
 		</button>
 
 		</div>
 
 	</div><!-- /row -->
+	<p/>
+
+	<div class="row">
+		<div class="col-md-12" style="height: 100px; ">
+		<div class="results" >
+
+			<span class="results_words_key" style="display: none; ">Your words are:</span>
+			<span class="results_words_value" style="display: none; "></span>
+			<p/>
+
+			<span class="results_phrase_key" style="display: none; ">Your passphrase is:</span>
+			<span class="results_phrase_value" style="display: none; "></span>
+			<p/>
+
+		</div>
+		</div>
+	</div><!-- /row -->
+
 
 	<div class="row" style="text-align: left;">
 		<div class="col-md-12">
diff --git a/main.js b/main.js
index b4407c8..872e849 100644
--- a/main.js
+++ b/main.js
@@ -43,8 +43,54 @@ function get_word(wordlist, index) {
 }
 
 
+//
+// Handler to mark the clicked number of dice button as active.
+//
+jQuery(".dice_button").on("click", function(e) {
+	jQuery(".dice_button").removeClass("active");
+	jQuery(e.target).addClass("active");
+});
+
+
+//
+// Handler when the "Roll Dice" button is clicked.  It gets the 
+// passphrase and updates the HTML with it.
+//
+jQuery("#roll_dice").on("click", function(e) {
+
+	jQuery(".results_words_key").hide();
+	jQuery(".results_words_value").hide();
+	jQuery(".results_phrase_key").hide();
+	jQuery(".results_phrase_value").hide();
+
+	var num_dice = jQuery(".dice_button.active").html();
+	var passphrase = new Array();
+
+	for (var i=0; i<num_dice; i++) {
+		var roll = roll_dice();
+		passphrase.push(get_word(wordlist, roll));
+	}
+
+	jQuery(".results_words_value").html(passphrase.join(" "));
+	jQuery(".results_phrase_value").html(passphrase.join(""));
+
+	jQuery(".results_words_key").fadeIn(500, function() {
+		jQuery(".results_words_value").fadeIn(500, function() {
+		jQuery(".results_phrase_key").fadeIn(500, function() {
+		jQuery(".results_phrase_value").fadeIn(500);
+		});
+		});
+		});
+
+});
+
+
+//
+// Load our wordlist.
+//
 jQuery.getScript("./wordlist.js").done(
 	function(data) {
+		//jQuery("#roll_dice").click(); // Debugging
 
 	}).fail(
 	function(jqxhr, settings, exception) {