diff --git a/public/assets/css/main.css b/public/assets/css/main.css
index cd7505d..0f1bf6e 100755
--- a/public/assets/css/main.css
+++ b/public/assets/css/main.css
@@ -73,6 +73,17 @@ body {
 .service-worker.loading {
   display: block;
 }
+
+.service-worker-status-text {
+  text-align: center;
+}
+
+.service-worker-status {
+  font-size: 1.2em; 
+  border: 1px solid black;
+  padding: 0 3px 0 3px; 
+}
+
 [data-service-worker="ready"] .service-worker.ready {
   display: block;
 }
diff --git a/public/index.html b/public/index.html
index a4aa726..5a00a62 100755
--- a/public/index.html
+++ b/public/index.html
@@ -37,10 +37,12 @@ <h2>Hey there! Thanks for stopping by!</h2>
         </p>
 
         <p>
-          Let’s jump right in: first off, let's get some fundamentals out of the way. This entire tutorial is being downloaded with the code you see below, so this page can be run offline, too. We use ServiceWorker for that. Your ServiceWorker status is:
-          <strong class="service-worker-status"></strong>
+          Let’s jump right in: first off, let's get some fundamentals out of the way. This entire tutorial is being downloaded with the code you see below, so this page can be run offline, too. We use ServiceWorker for that.
         </p>
 
+        <p class="service-worker-status-text">Your ServiceWorker status is: <strong class="service-worker-status"></strong></p>
+
+
 <script>
 
   function setState(state) {