diff --git a/app/javascript/flavours/glitch/styles/basics.scss b/app/javascript/flavours/glitch/styles/basics.scss
index 234c703f23..a796bce674 100644
--- a/app/javascript/flavours/glitch/styles/basics.scss
+++ b/app/javascript/flavours/glitch/styles/basics.scss
@@ -164,7 +164,7 @@ body {
 a {
   &:focus {
     border-radius: 4px;
-    outline: $ui-button-icon-focus-outline;
+    outline: $ui-button-focus-outline;
   }
 
   &:focus:not(:focus-visible) {
diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss
index 97e6ff959e..a0124b7f6a 100644
--- a/app/javascript/flavours/glitch/styles/components/columns.scss
+++ b/app/javascript/flavours/glitch/styles/components/columns.scss
@@ -245,6 +245,8 @@ $ui-header-height: 55px;
   text-decoration: none;
   overflow: hidden;
   white-space: nowrap;
+  border: 0;
+  border-left: 4px solid transparent;
 
   &:hover,
   &:focus,
@@ -256,6 +258,11 @@ $ui-header-height: 55px;
     outline: 0;
   }
 
+  &:focus-visible {
+    border-color: $ui-button-focus-outline-color;
+    border-radius: 0;
+  }
+
   &--transparent {
     background: transparent;
     color: $ui-secondary-color;
@@ -424,6 +431,10 @@ $ui-header-height: 55px;
     color: lighten($darker-text-color, 7%);
   }
 
+  &:focus-visible {
+    outline: $ui-button-focus-outline;
+  }
+
   &.active {
     color: $primary-text-color;
     background: lighten($ui-base-color, 8%);
@@ -434,11 +445,6 @@ $ui-header-height: 55px;
     }
   }
 
-  // glitch - added focus ring for keyboard navigation
-  &:focus {
-    text-shadow: 0 0 4px darken($ui-highlight-color, 5%);
-  }
-
   &:disabled {
     color: $dark-text-color;
     cursor: default;
diff --git a/app/javascript/flavours/glitch/styles/variables.scss b/app/javascript/flavours/glitch/styles/variables.scss
index 90658b0f89..ed5b1b6488 100644
--- a/app/javascript/flavours/glitch/styles/variables.scss
+++ b/app/javascript/flavours/glitch/styles/variables.scss
@@ -43,6 +43,8 @@ $ui-highlight-color: $classic-highlight-color !default;
 $ui-button-color: $white !default;
 $ui-button-background-color: $blurple-500 !default;
 $ui-button-focus-background-color: $blurple-600 !default;
+$ui-button-focus-outline-color: $blurple-400 !default;
+$ui-button-focus-outline: solid 2px $ui-button-focus-outline-color !default;
 
 $ui-button-secondary-color: $grey-100 !default;
 $ui-button-secondary-border-color: $grey-100 !default;
@@ -57,7 +59,7 @@ $ui-button-tertiary-focus-color: $white !default;
 $ui-button-destructive-background-color: $red-500 !default;
 $ui-button-destructive-focus-background-color: $red-600 !default;
 
-$ui-button-icon-focus-outline: solid 2px $blurple-400 !default;
+$ui-button-icon-focus-outline: $ui-button-focus-outline !default;
 $ui-button-icon-hover-background-color: rgba(140, 141, 255, 40%) !default;
 
 // Variables for texts