diff --git a/server/documents/index.html.eco b/server/documents/index.html.eco
index 81577c3f1..e32841c65 100755
--- a/server/documents/index.html.eco
+++ b/server/documents/index.html.eco
@@ -58,7 +58,7 @@ type   : 'Semantic'
       <div class="introduction">
         <h1 class="ui inverted header">
           <span class="library">
-            Semantic
+            Semantic UI
           </span>
           <b data-text="User Interface">HTML</b>
           <span class="typed-cursor">|</span>
@@ -704,7 +704,7 @@ type   : 'Semantic'
     <div class="twelve wide column">
       <h1 class="ui inverted icon header">
         <i class="docs code icon"></i>
-        Lose the Heiroglpyhics
+        Lose the Hieroglyphics
       </h1>
       <p>Semantic's naming conventions are based around <em>common usage</em>, not arbitrarily prescribed standards—a practice borrowed from <a href="https://www.princeton.edu/~achaney/tmve/wiki100k/docs/Descriptive_linguistics.html" target="_blank">descriptive linguistics</a>.</p>
       <div class="hidden code" data-type="html">
diff --git a/server/files/javascript/home.js b/server/files/javascript/home.js
index 5f78268d2..6076b01fe 100755
--- a/server/files/javascript/home.js
+++ b/server/files/javascript/home.js
@@ -12,6 +12,8 @@ semantic.home.ready = function() {
   ;
 
   $themeDropdown
+    .dropdown('setting', 'transition', 'drop')
+    .dropdown('setting', 'duration', 350)
     .dropdown('setting', 'action', 'activate')
   ;
 
@@ -33,8 +35,11 @@ semantic.home.ready = function() {
     showCursor      : false,
     typeSpeed       : 120,
     backSpeed       : 120,
-    backDelay       : 2000
+    backDelay       : 500
   });
+  setTimeout(function() {
+    $('.masthead .library').transition('scale up', 1000);
+  }, 5000);
 
   $('.demo .ui.accordion')
     .accordion()
diff --git a/server/files/stylesheets/semantic.css b/server/files/stylesheets/semantic.css
index f2a0288ed..552bd5be7 100755
--- a/server/files/stylesheets/semantic.css
+++ b/server/files/stylesheets/semantic.css
@@ -483,6 +483,17 @@ body#example.hide {
   -moz-transform: rotateX(50deg) rotateZ(0deg) rotateY(0deg) translateY(-14%) translateX(-2%) translateZ(300px);
   transform: rotateX(50deg) rotateZ(0deg) rotateY(0deg) translateY(-14%) translateX(-2%) translateZ(300px);
 }
+#example.index .masthead {
+  -ms-transition: background-color 3s ease-in-out 2s;
+  -moz-transition: background-color 3s ease-in-out 2s;
+  -webkit-transition: background-color 3s ease-in-out 2s;
+  transition: background-color 3s ease-in-out 2s;
+  background-color: #00B5AD;
+  background-image: radial-gradient(farthest-corner, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.95));
+}
+#example.index .masthead.zoomed {
+  background-color: #444444;
+}
 #example .masthead.zoomed:before {
   opacity: 0.15;
   -webkit-transform: rotateX(0deg) rotateZ(0deg) rotateY(0deg) translateZ(0px);
@@ -569,9 +580,6 @@ body#example.hide {
 #example.index .masthead {
   position: relative;
   overflow: hidden;
-  /*background: linear-gradient(#081919, #001c1c) #191919;*/
-  background: radial-gradient(farthest-corner, #053B3B, #151818) repeat scroll 0 0 #191919;
-  background-color: #191919;
   color: rgba(255, 255, 255, 0.9);
   margin-bottom: 0px;
   border-bottom: none;
@@ -590,6 +598,7 @@ body#example.hide {
   transform-style: preserve-3d;
 }
 #example.index .masthead.segment h1 > .library {
+  visibility: hidden;
   display: block;
   font-size: 1.75em;
   color: #FFFFFF;
@@ -1661,7 +1670,7 @@ body.progress.animated .ui.progress .bar {
     margin-top: 0em;
   }
   #example.index .introduction {
-    margin: 8rem 0rem 14rem;
+    margin: 5rem 0rem;
   }
   #example.index .masthead.segment h1 {
     font-size: 2.25em;