diff --git a/public/assets/css/base.css b/public/assets/css/base.css
index ad17998859..eafd76c291 100644
--- a/public/assets/css/base.css
+++ b/public/assets/css/base.css
@@ -41,13 +41,20 @@ a:link {
       outline: 0;
       color: #F6F6F6;
 }
-
 a:visited {
       outline: 0;
       color: #F6F6F6;
       margin: 0;
       padding: 0;
 }
+a:hover {
+      color: #F6F6F6;
+      transition: all 0.8s ease;
+}
+a:focus {
+      color: #F6F6F6;
+      transition: all 0.8s ease;
+}
 
 b {
       font-family: var(--head-font);
diff --git a/public/assets/css/base_mid.css b/public/assets/css/base_mid.css
index c0402cb990..565bb6f038 100644
--- a/public/assets/css/base_mid.css
+++ b/public/assets/css/base_mid.css
@@ -43,13 +43,16 @@ a:link {
       margin: 0;
       padding: 0;
 }
-
 a:visited {
       outline: 0;
       color: #F6F6F6;
       margin: 0;
       padding: 0;
 }
+a:focus {
+      color: #F6F6F6;
+      transition: all 0.8s ease;
+}
 
 b {
       font-family: var(--head-font);
diff --git a/public/assets/css/base_small.css b/public/assets/css/base_small.css
index ca7c52ff3c..adc85ca872 100644
--- a/public/assets/css/base_small.css
+++ b/public/assets/css/base_small.css
@@ -43,13 +43,16 @@ a:link {
       margin: 0;
       padding: 0;
 }
-
 a:visited {
       outline: 0;
       color: #F6F6F6;
       margin: 0;
       padding: 0;
 }
+a:focus {
+      color: #F6F6F6;
+      transition: all 0.8s ease;
+}
 
 b {
       font-family: var(--head-font);
diff --git a/public/assets/css/doc/doc.css b/public/assets/css/doc/doc.css
index 15ba374510..4f69beb645 100644
--- a/public/assets/css/doc/doc.css
+++ b/public/assets/css/doc/doc.css
@@ -45,11 +45,14 @@
 .faq-nav a {
       color: #91B9D0;
 }
-
 .faq-nav a:hover {
       color: #F6F6F6;
       transition: all 0.8s ease;
 }
+.faq-nav a:focus {
+      color: #F6F6F6;
+      transition: all 0.8s ease;
+}
 
 .markd {
       order: 2;
diff --git a/public/assets/css/doc/doc_mid.css b/public/assets/css/doc/doc_mid.css
index f967866cc1..055ce25fcf 100644
--- a/public/assets/css/doc/doc_mid.css
+++ b/public/assets/css/doc/doc_mid.css
@@ -48,11 +48,14 @@
 .faq-nav a {
       color: #91B9D0;
 }
-
 .faq-nav a:hover {
       color: #F6F6F6;
       transition: all 0.8s ease;
 }
+.faq-nav a:focus {
+      color: #F6F6F6;
+      transition: all 0.8s ease;
+}
 
 .markd {
       order: 2;
diff --git a/public/assets/css/doc/doc_small.css b/public/assets/css/doc/doc_small.css
index 463dcb2369..82ca2d3d8a 100644
--- a/public/assets/css/doc/doc_small.css
+++ b/public/assets/css/doc/doc_small.css
@@ -48,11 +48,14 @@
 .faq-nav a {
       color: #91B9D0;
 }
-
 .faq-nav a:hover {
       color: #F6F6F6;
       transition: all 0.8s ease;
 }
+.faq-nav a:focus {
+      color: #F6F6F6;
+      transition: all 0.8s ease;
+}
 
 .markd {
       order: 2;
diff --git a/public/assets/css/left/left.css b/public/assets/css/left/left.css
index 26ef92eb4f..a154d9cca4 100644
--- a/public/assets/css/left/left.css
+++ b/public/assets/css/left/left.css
@@ -50,6 +50,10 @@
       color: #F6F6F6;
       transition: all 0.8s ease;
 }
+.navbar a:focus {
+      color: #F6F6F6;
+      transition: all 0.8s ease;
+}
 
 .icon-menu label {
       display: none;
diff --git a/public/assets/css/left/left_mid.css b/public/assets/css/left/left_mid.css
index 63488157c9..3074497f4e 100644
--- a/public/assets/css/left/left_mid.css
+++ b/public/assets/css/left/left_mid.css
@@ -51,6 +51,10 @@
       color: #F6F6F6;
       transition: all 0.8s ease;
 }
+.navbar a:focus {
+      color: #F6F6F6;
+      transition: all 0.8s ease;
+}
 
 .icon-menu label {
       display: block;
@@ -64,11 +68,14 @@
       opacity: 0;
 }
 .left-panel input[type=checkbox] {
-    transform: scale(2);
-    -ms-transform: scale(2);
-    -webkit-transform: scale(2);
+    transform: scale(3);
+    -ms-transform: scale(3);
+    -webkit-transform: scale(3);
     padding: 10px;
 }
+input[type="checkbox"]:focus + label {
+      border:2px solid red;
+}
 
 #toggle:checked~.navbar {
       display: flex;
diff --git a/public/assets/css/left/left_small.css b/public/assets/css/left/left_small.css
index 914661f83d..01bdd4872f 100644
--- a/public/assets/css/left/left_small.css
+++ b/public/assets/css/left/left_small.css
@@ -51,6 +51,10 @@
       color: #F6F6F6;
       transition: all 0.8s ease;
 }
+.navbar a:focus {
+      color: #F6F6F6;
+      transition: all 0.8s ease;
+}
 
 .icon-menu label {
       display: block;
diff --git a/templates/left/left.html.twig b/templates/left/left.html.twig
index e6696e1729..53600b6cfe 100644
--- a/templates/left/left.html.twig
+++ b/templates/left/left.html.twig
@@ -10,9 +10,9 @@
 {% block left %}
     {% if app.user %}
         <div id='left-panel'>
-            <input type="checkbox" id="toggle">
+            <input type="checkbox" id="toggle" autofocus>
             <div class="icon-menu">
-                <label for="toggle" id='menu'></label>
+                <label for="toggle" id='menu' tabindex="0"></label>
             </div>
             <div class='navbar'>
                 <div class="left-nav">