diff --git a/pages/views/_includes/header.njk b/pages/views/_includes/header.njk
index 9ca2a1cf..0232104e 100644
--- a/pages/views/_includes/header.njk
+++ b/pages/views/_includes/header.njk
@@ -1,5 +1,5 @@
 <a class="uip-title" href="{{ '/' | url }}">
-  {% include 'pages/static/assets/uip-logo.svg' %} <span>UIPlayground</span>
+  {% include 'pages/static/assets/uip-logo.svg' %} <span class="uip-title-text">UIPlayground</span>
 </a>
 <div class="header-nav">
   <a class="header-nav-link" href="{{ '/examples/' | url }}">Examples</a>
diff --git a/pages/views/_includes/sidebar.njk b/pages/views/_includes/sidebar.njk
index 790a83ed..91af2dd1 100644
--- a/pages/views/_includes/sidebar.njk
+++ b/pages/views/_includes/sidebar.njk
@@ -1,8 +1,8 @@
 <esl-toggleable id="sidebar" class="sidebar" close-on-outside-action close-on-esc>
   <li class="sidebar-nav-item">
-    <a href="{{ '/examples/' | url }}">Examples</a>
+    <a href="{{ '/examples/' | url }}" class="sidebar-nav-item-link">Examples</a>
   </li>
   <li class="sidebar-nav-item">
-    <a href="{{ '/components/' | url }}">Components</a>
+    <a href="{{ '/components/' | url }}" class="sidebar-nav-item-link">Components</a>
   </li>
 </esl-toggleable>
diff --git a/pages/views/styles/header.less b/pages/views/styles/header.less
index f989ba80..a39b9cfb 100644
--- a/pages/views/styles/header.less
+++ b/pages/views/styles/header.less
@@ -9,7 +9,7 @@
   align-items: center;
   display: flex;
 
-  a {
+  .uip-title, .header-nav-link {
     color: white;
   }
 
@@ -19,7 +19,7 @@
     margin-left: 50px;
     font-weight: bold;
 
-    span {
+    &-text {
       margin-left: 10px;
     }
 
diff --git a/pages/views/styles/sidebar.less b/pages/views/styles/sidebar.less
index 1a09cdfc..f1135bbc 100644
--- a/pages/views/styles/sidebar.less
+++ b/pages/views/styles/sidebar.less
@@ -19,11 +19,12 @@
     display: block;
   }
 
-  a {
-    color: white;
-  }
   .sidebar-nav-item {
     margin: 10px;
+
+    &-link {
+      color: white;
+    }
   }
 }