diff --git a/assets/css/dice.css b/assets/css/dice.css
index 48ddfb4..422f069 100644
--- a/assets/css/dice.css
+++ b/assets/css/dice.css
@@ -1,49 +1,49 @@
 
 .die {
-    width: 100px;
-    height: 100px;
-    background: #ff1111;
-    border-radius: 10px;
+  width: 100px;
+  height: 100px;
+  background: #ff1111;
+  border-radius: 10px;
 	margin-left: 20px;
 	margin-bottom: 20px;
 }
 
 .dot {
-    position:absolute;
-    width: 18px;
-    height: 18px;
-    border-radius: 18px;
-    background: white;
-    box-shadow: inset 5px 0 10px white;
+  position:absolute;
+  width: 18px;
+  height: 18px;
+  border-radius: 18px;
+  background: white;
+  box-shadow: inset 5px 0 10px white;
 }
 
 .dot.center {
 	/* Orders of margins are: top right bottom left */
-    margin: 39px 0 0 41px;
+  margin: 39px 0 0 41px;
 }
 
 .dot.dtop {
-    margin-top: 14px;
+  margin-top: 14px;
 }
 
 .dot.dleft {
-    margin-left: 65px;
+  margin-left: 65px;
 }
 
 .dot.dright {
-    margin-left: 16px;
+  margin-left: 16px;
 }
 
 .dot.dbottom {
-    margin-top: 63px;
+  margin-top: 63px;
 }
 
 .dot.center.dleft {
-    margin: 38px 0 0 16px;
+  margin: 38px 0 0 16px;
 }
 
 .dot.center.dright {
-    margin: 38px 0 0 65px;
+  margin: 38px 0 0 65px;
 }
 
 .responsive {
diff --git a/assets/css/starter-template.css b/assets/css/starter-template.css
index b85de17..7807571 100644
--- a/assets/css/starter-template.css
+++ b/assets/css/starter-template.css
@@ -7,25 +7,137 @@ body {
   text-align: center;
 }
 
-.results_words_key, .results_words_value, 
-	.results_phrase_key, .results_phrase_value,
-	.results_num_possible_key, .results_num_possible_value,
-	.dice_word
-	{
-	font-size: x-large;
+/* Results formatting */
+.results_label {
+  font-size: 0.85em;
+  color: #666;
+  margin-bottom: 2px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
 }
 
+.results_value {
+  margin-bottom: 8px;
+  font-size: 1.2em;
+  color: #666;
+}
+
+/* The individual words shown with dice rolls */
+.dice_word {
+  font-size: 2em;
+  color: #666;
+}
+
+
+/* Passphrase styling */
+.passphrase_box {
+  background: #f8f9fa;
+  border: 1px solid #e9ecef;
+  border-radius: 8px;
+  padding: 20px;
+  margin: 24px 0;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+}
+
+.passphrase_text {
+  font-family: 'Courier New', Courier, monospace;
+  font-size: 2em;
+  font-weight: 500;
+  color: #2c3e50;
+  word-break: break-word;
+  line-height: 1.4;
+}
+
+/* Stats and copy button */
+.stats_container {
+  color: #444;
+  margin-top: 12px;
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+}
+
+.stats_container .results_label {
+  font-size: 0.85em;
+  color: #666;
+  margin-bottom: 2px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.stats_container .results_value {
+  font-size: 1.1em;
+  margin-bottom: 8px;
+  color: #444;
+}
+
+.copy_button_container {
+  margin-top: 12px;
+}
+
+.copy-button {
+  padding: 8px 16px;
+  border-radius: 4px;
+  background: #fff;
+  border: 1px solid #dee2e6;
+  transition: all 0.2s ease;
+}
+
+.copy-button:hover {
+  background: #f8f9fa;
+  border-color: #ced4da;
+}
+
+/* Button styling */
 .btn.dice_button {
-	margin-left: 5px;
-	margin-bottom: 5px;
+  margin: 4px;
+  border-radius: 4px;
 }
 
 .dice_num {
-	margin-top: 0px;
+  margin-top: 0;
 }
 
 .main {
-    /* No idea why this defaulted to 14, but I'm fixing it here. */
-    font-size: 16px;
+  font-size: 16px;
+}
+
+/* Passphrase styling */
+.results_phrase_value {
+  font-weight: bold;
+  background: #f8f9fa;
+  border: 1px solid #dee2e6;
+  border-radius: 4px;
+  padding: 15px;
+  margin: 10px auto;
+  font-family: 'Courier New', Courier, monospace;
+  word-break: break-word;
+  display: inline-block;
+  font-size: 2em;
+}
+
+/* Mobile adjustments */
+@media (max-width: 768px) {
+  .results_phrase_value {
+    font-size: 1.4em;
+    padding: 12px;
+    line-height: 1.4;
+  }
+  
+  .results_value {
+    font-size: 1.2em;
+  }
+}
+
+/* For very small screens */
+@media (max-width: 480px) {
+  .results_phrase_value {
+    font-size: 1.2em;
+    padding: 10px;
+  }
+  
+  .results_value {
+    font-size: 1em;	
+  }
 }
 
diff --git a/index.html b/index.html
index 81b74ba..079e2b9 100644
--- a/index.html
+++ b/index.html
@@ -33,6 +33,7 @@
 	<meta name="twitter:description" content="Diceware is a password generator which creates passwords based on dicerolls keyed to a set of words." />
 	<meta name="twitter:image" content="https://diceware.dmuth.org/assets/img/dice.jpg" />
 
+
   </head>
   <body>
 
@@ -94,14 +95,22 @@ <h1>Diceware Password Generator</h1>
 	</div>
         <div id="results-num-dice" data-test-num-dice="" >0</div>
 
-		<div class="results_words_key" >Your words are: </div>
-		<div class="results_words_value" data-test="results-words" ></div>
+		<div class="results_words_key results_label">Your words are: </div>
+		<div class="results_words_value results_value"></div>
 
-		<div class="results_phrase_key" >Your passphrase is: </div>
-		<div class="results_phrase_value" data-test="results-phrase" ></div>
+		<div class="results_phrase_key results_label">Your passphrase is:</div>
+		<div class="results_phrase_value results_value passphrase_text"></div>
+		
+		<div class="stats_container">
+		  <div class="results_num_possible_key results_label"># of possible passwords: </div>
+		  <div class="results_num_possible_value results_value"></div>
+		</div>
 
-		<div class="results_num_possible_key" ># of possible passwords: </div>
-		<div class="results_num_possible_value" ></div>
+		<div class="copy_button_container">
+			<button type="button" class="btn btn-sm btn-default copy-button">
+				<span class="glyphicon glyphicon-copy"></span> Copy
+			</button>
+		</div>
 
 	</div>