diff --git a/assets/js/components/Navbar.vue b/assets/js/components/Navbar.vue
index 6762f83a..b9b063ae 100644
--- a/assets/js/components/Navbar.vue
+++ b/assets/js/components/Navbar.vue
@@ -20,7 +20,7 @@
         <a
           v-for="item in navItems"
           :href="item.href"
-          class="block text-black p-4 border-l-3 sm:border-l-0 sm:border-b-3 border-transparent hover:border-grey-light sm:ml-4 sm:mr-0 sm:p-0 hover:no-underline"
+          class="block text-black focus:text-white focus:no-underline focus-within:bg-blue p-4 border-l-3 sm:border-l-0 sm:border-b-3 border-transparent hover:border-grey-light sm:ml-4 sm:mr-0 sm:p-0 hover:no-underline"
           :class="{
           'border-blue hover:border-blue': pageUrl.match(new RegExp(item.pattern)),
           }"
diff --git a/assets/sass/base/base.sass b/assets/sass/base/base.sass
index f26cd2b5..f3ca44da 100644
--- a/assets/sass/base/base.sass
+++ b/assets/sass/base/base.sass
@@ -12,8 +12,11 @@ main a
   &:hover
     @apply no-underline
 
+  &:focus
+    @apply text-white bg-blue outline-none px-px -mx-px
+
 h1, h2, h3
-  @apply mb-2
+  @apply text-black mb-2
 
 .content h2,
 .content h3
diff --git a/source/_layouts/base.html.twig b/source/_layouts/base.html.twig
index ce4579a0..4995e409 100644
--- a/source/_layouts/base.html.twig
+++ b/source/_layouts/base.html.twig
@@ -24,7 +24,7 @@
             <link rel="icon" href="{{ site.favicon.url }}?s={{ size }}" sizes="{{ size }}x{{ size }}">
         {% endfor %}
     </head>
-    <body class="font-sans leading-normal">
+    <body class="font-sans text-grey-darkest leading-normal">
         <div id="app" v-cloak>
             {% block body %}{% endblock %}
         </div>
diff --git a/source/_layouts/default.html.twig b/source/_layouts/default.html.twig
index 457604e9..6d1be488 100644
--- a/source/_layouts/default.html.twig
+++ b/source/_layouts/default.html.twig
@@ -4,7 +4,7 @@
     {% include 'layout/navbar' %}
 
     <div class="container mx-auto px-4">
-        <div class="text-grey-darkest md:flex -mx-4">
+        <div class="md:flex -mx-4">
             <main class="md:w-2/3 lg:w-3/4 px-4 mb-8 lg:mb-0">
                 {% block page_title %}
                     <h1>{{ page.title }}</h1>
