diff --git a/public/assets/css/base.css b/public/assets/css/base.css
index 52562eebf8..0d377509b6 100644
--- a/public/assets/css/base.css
+++ b/public/assets/css/base.css
@@ -97,9 +97,9 @@ a:visited {
     margin: 0;
     padding: 0;
 }
+
 a:focus,
-a:hover,
-a:active {
+a:hover {
     border-radius: var(--unit-size);
     padding: 0 var(--unit-size) 0 var(--unit-size);
     background: var(--white);
@@ -107,6 +107,20 @@ a:active {
     transition: all 0.8s ease;
 }
 
+#instance a:focus svg,
+#instance a:hover svg {
+    fill: var(--bg1);
+    transition: all 0.8s ease;
+}
+
+summary:hover > *,
+summary:focus > * {
+    border-radius: var(--unit-size);
+    background: var(--white);
+    fill: var(--bg1);
+    transition: all 0.8s ease;
+}
+
 hr {
     all: unset;
     display: block;
diff --git a/public/assets/css/left/left.css b/public/assets/css/left/left.css
index 41667f246c..71a7e2e8ea 100644
--- a/public/assets/css/left/left.css
+++ b/public/assets/css/left/left.css
@@ -21,6 +21,10 @@
     opacity: 100%;
 }
 
+#left-container[open] a {
+    tab-index: 0;
+}
+
 #left-container[open] {
     width: calc(100vw / 4);
     border-right: solid 1px var(--bg2);
diff --git a/templates/base.html.twig b/templates/base.html.twig
index eeeddbdfae..7283f80922 100644
--- a/templates/base.html.twig
+++ b/templates/base.html.twig
@@ -29,19 +29,19 @@
 </head>
 <body>
     {% block header %}
-    <div id='header'>
-        <nav id='instance'>
-            <a href="{{ path('main_public') }}">
-                {{ icon('logo', 'icon icon-logo') | raw }}
-                <h1> {{ config('site', 'name') }} </h1>
-            </a>
-        </nav>
-    </div>
+        <div id='header'>
+            <nav id='instance'>
+                <a href="{{ path('main_public') }}" tabindex="2">
+                    {{ icon('logo', 'icon icon-logo') | raw }}
+                    <h1> {{ config('site', 'name') }} </h1>
+                </a>
+            </nav>
+        </div>
     {% endblock header %}
 
     <div class="container">
         <details class="panel" id="left-container">
-            <summary>
+            <summary tabindex="1">
                 {{ icon('person', 'icon icon-left') | raw }}
             </summary>
             {{ block("leftpanel", "stdgrid.html.twig") }}
@@ -52,7 +52,7 @@
         {% block javascripts %}{% endblock javascripts %}
 
         <details class="panel" id="right-container">
-            <summary>
+            <summary tabindex="3">
                 {{ icon('notes', 'icon icon-right') | raw }}
             </summary>
             {{ block("rightpanel", "stdgrid.html.twig") }}
