diff --git a/assets/sass/components/_header.scss b/assets/sass/components/_header.scss
index ff74a323..d07d9346 100644
--- a/assets/sass/components/_header.scss
+++ b/assets/sass/components/_header.scss
@@ -53,19 +53,27 @@ header {
       list-style: none;
       display: flex;
       align-items: center;
-      font-size: 1.5em;
+      font-size: 1.2em;
       line-height: 1;
 
       li {
-        width: 2.5em;
         text-align: right;
+        margin-left: 1.45em;
 
         a {
           display: inline-block;
+          color: $color-medium;
           transition: transform 0.15s ease-in-out;
 
           &:hover {
-            transform: scale(1.4);
+            transform: scale(1.15);
+            color: $color-links;
+          }
+
+          span.text {
+            font-size: 0.8em;
+            font-weight: 500;
+            margin-left: 0.55em;
           }
         }
       }
@@ -95,7 +103,18 @@ header {
       font-size: 1.7em;
 
       li {
-        width: 2em;
+        margin-left: 1em;
+
+        a {
+          // hide text next to emojis on mobile
+          span.text {
+            display: none;
+          }
+
+          &:hover {
+            transform: scale(1.4);
+          }
+        }
       }
     }
   }
diff --git a/layouts/partials/page/header.html b/layouts/partials/page/header.html
index ed646fa0..4911cd1c 100644
--- a/layouts/partials/page/header.html
+++ b/layouts/partials/page/header.html
@@ -5,10 +5,10 @@
       <h1 id="name">{{ .Site.Title }}</h1>
     </a>
     <ul>
-      <li><a class="no-underline" href="{{ .Site.BaseURL }}" title="Home">&#x1F3E0;</a></li>
-      <li><a class="no-underline" href="{{ "notes/" | absURL }}" title="Notes">&#x1F4DD;</a></li>
-      {{ with .Site.Author.github }}<li><a class="no-underline" href="https://github.com/{{ . }}" title="GitHub" target="_blank" rel="me noopener">&#x1F468;&#x200D;&#x1F4BB;</a></li>{{ end }}
-      <li><a class="no-underline" href="&#x6D;&#x61;&#x69;&#x6C;&#x74;&#x6F;&#x3A;&#x6A;&#x61;&#x6B;&#x65;&#x40;&#x6A;&#x61;&#x72;&#x76;&#x2E;&#x69;&#x73;" title="Email Me">&#x1F48C;</a></li>
+      <li><a class="no-underline" href="{{ .Site.BaseURL }}" title="Home"><span class="emoji">&#x1F3E0;</span><span class="text">Home</span></a></li>
+      <li><a class="no-underline" href="{{ "notes/" | absURL }}" title="Notes"><span class="emoji">&#x1F4DD;</span><span class="text">Notes</span></a></li>
+      {{ with .Site.Author.github }}<li><a class="no-underline" href="https://github.com/{{ . }}" title="GitHub" target="_blank" rel="me noopener"><span class="emoji">&#x1F468;&#x200D;&#x1F4BB;</span><span class="text">GitHub</span></a></li>{{ end }}
+      <li><a class="no-underline" href="&#x6D;&#x61;&#x69;&#x6C;&#x74;&#x6F;&#x3A;&#x6A;&#x61;&#x6B;&#x65;&#x40;&#x6A;&#x61;&#x72;&#x76;&#x2E;&#x69;&#x73;" title="Email Me"><span class="emoji">&#x1F4EC;</span><span class="text">Email</span></a></li>
     </ul>
   </nav>
 </header>