diff --git a/packages/fe/assets/scss/typography.scss b/packages/fe/assets/scss/typography.scss
index f399c5ed..9634570c 100644
--- a/packages/fe/assets/scss/typography.scss
+++ b/packages/fe/assets/scss/typography.scss
@@ -190,12 +190,15 @@ button {
 
 @mixin linkUnderline {
   color: $greenYellow;
-  &:hover {
+  &:hover{
     &:after {
       transition: 150ms ease-in;
       width: 100%;
     }
   }
+  &:focus-visible {
+    @include focusOutlineWithOffset(2px);
+  }
   &:after {
     content: '';
     position: absolute;
diff --git a/packages/fe/assets/scss/variables.scss b/packages/fe/assets/scss/variables.scss
index 0321552c..dbfc41e9 100644
--- a/packages/fe/assets/scss/variables.scss
+++ b/packages/fe/assets/scss/variables.scss
@@ -68,16 +68,25 @@ $breakpoint_UltraLarge: 140.625rem; // 2250px
   box-shadow: 0.125rem 0px 0.3125rem 0.25rem rgb(black, 0.4);
 }
 
+@mixin focusOutline {
+  outline: 3px solid rgba($greenYellow, 0.5);
+}
+
+@mixin focusOutlineWithOffset($offset: 4px) {
+  outline: 3px solid rgba($greenYellow, 0.5);
+  outline-offset: $offset;
+}
+
 @mixin focusBoxShadow {
-  box-shadow: 0 0 0 5px rgba(0, 123, 255, 0.5);
+  box-shadow: 0 0 0 5px rgba($greenYellow, 0.5);
 }
 
 @mixin focusBoxShadowSmall {
-  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);
+  box-shadow: 0 0 0 3px rgba($greenYellow, 0.5);
 }
 
 @mixin focusBoxShadowLink {
-  box-shadow: 0 0 0 5px rgba(0, 123, 255, 0.5);
+  box-shadow: 0 0 0 5px rgba($greenYellow, 0.5);
   border-radius: 0.125rem;
 }
 
diff --git a/packages/fe/components/accordion/accordion-header.vue b/packages/fe/components/accordion/accordion-header.vue
index 7cb64fc1..99062500 100644
--- a/packages/fe/components/accordion/accordion-header.vue
+++ b/packages/fe/components/accordion/accordion-header.vue
@@ -1,7 +1,8 @@
 <template>
   <div
     class="accordion-header"
-    @click="toggle">
+    @click="toggle"
+    @keydown.enter="toggle">
 
     <slot />
 
diff --git a/packages/fe/components/apply-form-card.vue b/packages/fe/components/apply-form-card.vue
index 3ef8de57..e9f7a4b3 100644
--- a/packages/fe/components/apply-form-card.vue
+++ b/packages/fe/components/apply-form-card.vue
@@ -237,6 +237,10 @@ export default {
     border: 0;
     border-bottom: 2px solid white;
     border-radius: 0;
+    &:focus-visible {
+      @include focusOutlineWithOffset;
+      border-radius: toRem(5);
+    }
   }
 }
 
@@ -251,5 +255,19 @@ export default {
   .selection-window {
     padding: 0;
   }
+  &:focus-within {
+    .field-select {
+      border-color: $mandysPink;
+    }
+  }
+  select.select {
+  &.native {
+    &:focus-visible {
+      @include focusOutlineWithOffset;
+      border-radius: toRem(5);
+      box-shadow: none;
+    }
+  }
+}
 }
 </style>
diff --git a/packages/fe/components/buttons/button-b.vue b/packages/fe/components/buttons/button-b.vue
index d775712b..aaa28616 100644
--- a/packages/fe/components/buttons/button-b.vue
+++ b/packages/fe/components/buttons/button-b.vue
@@ -130,7 +130,8 @@ export default {
   color: $greenYellow;
   border-color: $greenYellow;
   &:not([disabled]) {
-    &:hover {
+    &:hover,
+    &:focus-visible {
       background-color: $greenYellow;
     }
   }
diff --git a/packages/fe/components/buttons/button-x.vue b/packages/fe/components/buttons/button-x.vue
index 54202b79..68a6b9e3 100644
--- a/packages/fe/components/buttons/button-x.vue
+++ b/packages/fe/components/buttons/button-x.vue
@@ -81,7 +81,7 @@ export default {
       }
     }
     &:focus-visible {
-      @include focusBoxShadow;
+      @include focusOutline;
     }
   }
   &[disabled] {
@@ -92,7 +92,7 @@ export default {
 }
 
 a.button,
-button.button, {
+button.button {
   cursor: pointer;
   &[disabled] {
     cursor: no-drop;
diff --git a/packages/fe/components/card.vue b/packages/fe/components/card.vue
index 0950f17e..ba86185e 100644
--- a/packages/fe/components/card.vue
+++ b/packages/fe/components/card.vue
@@ -1,6 +1,10 @@
 <template>
   <div :class="['card', `corner-position__${cornerPosition}`, { outline }, variant]">
 
+    <div class="content">
+      <slot />
+    </div>
+
     <div class="panel">
       <svg
         class="corner"
@@ -27,10 +31,6 @@
       </div>
     </ButtonX>
 
-    <div class="content">
-      <slot />
-    </div>
-
   </div>
 </template>
 
@@ -178,7 +178,8 @@ $cardRadiusTiny: 0.9375rem;
 .button {
   position: absolute;
   z-index: 20;
-  &:hover {
+  &:hover,
+  &:focus-visible {
     .icon-text {
       transition: 150ms ease-in;
       transform: scale(1.05);
@@ -188,6 +189,10 @@ $cardRadiusTiny: 0.9375rem;
       transform: rotate(45deg);
     }
   }
+  &:focus-visible {
+    @include focusOutlineWithOffset;
+    border-radius: toRem(5);
+  }
   :deep(.button-content) {
     display: flex;
     flex-direction: row;
diff --git a/packages/fe/components/dropdown-panel.vue b/packages/fe/components/dropdown-panel.vue
index 33af5a0b..96f4617a 100644
--- a/packages/fe/components/dropdown-panel.vue
+++ b/packages/fe/components/dropdown-panel.vue
@@ -87,7 +87,8 @@ $squigglyWidth: 40;
 // ///////////////////////////////////////////////////////////////////// General
 .dropdown-panel {
   &.toggle-on-hover {
-    &:hover {
+    &:hover,
+    &:focus-within {
       .panel-container {
         transition: 150ms ease-in;
         transform: translate(-50%, 0);
diff --git a/packages/fe/components/faq-accordion.vue b/packages/fe/components/faq-accordion.vue
index bfdc269b..64b1dcc2 100644
--- a/packages/fe/components/faq-accordion.vue
+++ b/packages/fe/components/faq-accordion.vue
@@ -29,7 +29,7 @@
           :key="index"
           :active="active">
 
-          <AccordionHeader>
+          <AccordionHeader :tabindex="0">
             <div class="question">
               <span class="text" v-html="entry.question" />
               <IconChevron />
@@ -132,7 +132,7 @@ $padding: 2.25rem;
   position: absolute;
   bottom: 0;
   left: 0;
-  width: 100%;
+  width: calc(100% - 1rem);
   height: 2px;
   background-color: $titanWhite;
 }
@@ -145,6 +145,7 @@ $padding: 2.25rem;
 }
 
 .expand-all-button {
+  margin-right: 1rem;
   margin-bottom: 1.5rem;
   :deep(.button-content) {
     display: flex;
@@ -158,19 +159,29 @@ $padding: 2.25rem;
       display: block;
     }
   }
-  &:hover {
+  &:hover,
+  &:focus-visible {
     transform: scale(1.05);
   }
+  &:focus-visible {
+    @include focusOutlineWithOffset(4px);
+    border-radius: toRem(5);
+  }
   :deep(.text) {
     font-size: toRem(18);
   }
 }
 
+.faq-top-border {
+  width: calc(100% - 1rem);
+}
+
 .accordion-wrapper {
   position: relative;
 }
 
 .accordion-section {
+  padding-right: 1rem;
   &:first-child {
     &:before {
       bottom: auto;
@@ -182,12 +193,16 @@ $padding: 2.25rem;
       transition: 150ms ease-out;
       transform: rotate(-180deg);
     }
-    &:hover {
+    &:hover,
+    .accordion-header:focus-visible {
       .icon-chevron {
         transition: 150ms ease-out;
         transform: rotate(-180deg) scale(1.15);
       }
     }
+    .accordion-content {
+      visibility: visible;
+    }
   }
   &:last-child {
     .accordion-content {
@@ -201,15 +216,22 @@ $padding: 2.25rem;
 .accordion-header {
   padding: $padding 0;
   cursor: pointer;
-  &:hover {
-      .text {
-        transition: 150ms ease-out;
-        transform: scale(1.05) translateX(2%);
-      }
-      .icon-chevron {
-        transition: 150ms ease-out;
-        transform: scale(1.15);
-      }
+  &:hover,
+  &:focus-visible {
+    .text {
+      transition: 150ms ease-out;
+      transform: scale(1.05) translateX(2%);
+    }
+    .icon-chevron {
+      transition: 150ms ease-out;
+      transform: scale(1.15);
+    }
+  }
+  &:focus {
+    .icon-chevron {
+      @include focusOutlineWithOffset(6px);
+      border-radius: toRem(3);
+    }
   }
 }
 
@@ -240,6 +262,7 @@ $padding: 2.25rem;
 }
 
 .accordion-content {
+  visibility: hidden;
   &:before {
     @include border;
   }
diff --git a/packages/fe/components/form/fields/range.vue b/packages/fe/components/form/fields/range.vue
index 006b95f9..296ef1a7 100644
--- a/packages/fe/components/form/fields/range.vue
+++ b/packages/fe/components/form/fields/range.vue
@@ -166,18 +166,32 @@ $borderWidth: 2px;
     background-color: $titanWhite;
     transition: all 150ms ease;
   }
-  &:hover {
+  &:hover,
+  &:focus-within {
     .thumb {
-      &:before,
       &:after {
         height: 0.75rem;
       }
     }
   }
+  #total_datacap_size_range {
+    &:focus-visible {
+      + .thumb-container {
+        .thumb {
+          &:before {
+            height: calc(100% + 1rem);
+            @include focusBoxShadow;
+          }
+          &::after {
+            height: 1rem;
+          }
+        }
+      }
+    }
+  }
   &:active {
     .thumb {
       background-color: $mandysPink;
-      &::before,
       &::after {
         background-color: $mandysPink;
         height: 1rem;
@@ -198,25 +212,27 @@ $borderWidth: 2px;
   width: $thumbWidth;
   height: $trackHeight;
   background-color: $titanWhite;
+  z-index: 5;
   transition: all 150ms linear;
-  &:before,
+
   &:after {
     content: '';
     position: absolute;
     bottom: 100%;
     height: 0.5rem;
-    width: 50%;
+    left: 0;
+    width: 100%;
     pointer-events: inherit;
     background-color: inherit;
     transition: all 150ms linear;
   }
   &:before {
     content: '';
-    right: 50%;
-  }
-  &:after {
-    content: '';
-    left: 50%;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: calc(100% + 0.5rem);
+    width: 100%;
   }
 }
 
@@ -258,7 +274,8 @@ $borderWidth: 2px;
   top: 0;
   margin-top: 0.375rem;
   transition: 150ms ease-out;
-  &:hover {
+  &:hover,
+  &:focus-visible {
     transition: 150ms ease-in;
     transform: scale(1.1);
     &:before {
@@ -266,6 +283,10 @@ $borderWidth: 2px;
       opacity: 1;
     }
   }
+  &:focus-visible {
+    @include focusOutlineWithOffset;
+    border-radius: toRem(3);
+  }
   &:before {
     content: '';
     position: absolute;
@@ -289,14 +310,12 @@ $borderWidth: 2px;
     &:hover {
       transform: translateX(calc(-100% + toRem(9))) scale(1.1); // remove width of '+' icon
     }
-    &:before {
-      width: calc(100% + toRem(3 * 2) - toRem(9)); // remove width of '+' icon
-    }
     .button-content {
       &:after {
         content: '+';
-        position: relative;
+        position: absolute;
         top: toRem(-1);
+        right: toRem(-9);
         font-size: 90%;
         font-weight: 500;
         transform: scale(0.5);
diff --git a/packages/fe/components/hero-c.vue b/packages/fe/components/hero-c.vue
index b3ea8f43..5e5cf1bd 100644
--- a/packages/fe/components/hero-c.vue
+++ b/packages/fe/components/hero-c.vue
@@ -10,7 +10,9 @@
 
             <Infographic />
 
-            <DatacapTextSpinner @clicked="$highlightApplyForm" />
+            <DatacapTextSpinner
+              :tabindex="0"
+              @clicked="$highlightApplyForm" />
 
           </div>
         </div>
diff --git a/packages/fe/components/infographic.vue b/packages/fe/components/infographic.vue
index 0088f4a3..1d36ed95 100644
--- a/packages/fe/components/infographic.vue
+++ b/packages/fe/components/infographic.vue
@@ -720,6 +720,9 @@ export default {
       transform: translateX(0);
     }
   }
+  &:focus-visible {
+    @include focusBoxShadow;
+  }
   @include mini {
     width: toRem(60);
     height: toRem(30);
diff --git a/packages/fe/components/logo.vue b/packages/fe/components/logo.vue
index ef84d5ac..698d45c0 100644
--- a/packages/fe/components/logo.vue
+++ b/packages/fe/components/logo.vue
@@ -1,6 +1,6 @@
 <template>
   <svg viewBox="0 0 135 135" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M24.9247 11.1393C24.9247 4.98726 29.9119 0 36.064 0L98.9392 0C105.091 0 110.079 4.98725 110.079 11.1393V12.8693C110.079 17.8744 114.136 21.9318 119.141 21.9318L123.861 21.9318C130.013 21.9318 135 26.919 135 33.0711L135 95.9463C135 102.098 130.013 107.086 123.861 107.086H119.141C114.136 107.086 110.079 111.143 110.079 116.148V123.861C110.079 130.013 105.091 135 98.9392 135H36.064C29.9119 135 24.9247 130.013 24.9247 123.861V116.148C24.9247 111.143 20.8673 107.086 15.8623 107.086H11.1393C4.98725 107.086 -2.47588e-07 102.098 0 95.9463L2.39336e-06 33.0711C2.64094e-06 26.919 4.98726 21.9318 11.1393 21.9318L15.8623 21.9318C20.8673 21.9318 24.9247 17.8744 24.9247 12.8693V11.1393ZM36.064 2.07692C31.059 2.07692 27.0016 6.13431 27.0016 11.1393V12.8693C27.0016 19.0214 22.0144 24.0087 15.8623 24.0087H11.1393C6.13431 24.0087 2.07693 28.0661 2.07693 33.0711L2.07692 95.9463C2.07692 100.951 6.13431 105.009 11.1393 105.009H15.8623C22.0143 105.009 27.0016 109.996 27.0016 116.148V123.861C27.0016 128.866 31.059 132.923 36.064 132.923H98.9392C103.944 132.923 108.002 128.866 108.002 123.861V116.148C108.002 109.996 112.989 105.009 119.141 105.009H123.861C128.866 105.009 132.923 100.951 132.923 95.9463L132.923 33.0711C132.923 28.0661 128.866 24.0087 123.861 24.0087H119.141C112.989 24.0087 108.002 19.0214 108.002 12.8693V11.1393C108.002 6.1343 103.944 2.07692 98.9392 2.07692L36.064 2.07692Z" fill="white" />
+    <path class="outline" fill-rule="evenodd" clip-rule="evenodd" d="M24.9247 11.1393C24.9247 4.98726 29.9119 0 36.064 0L98.9392 0C105.091 0 110.079 4.98725 110.079 11.1393V12.8693C110.079 17.8744 114.136 21.9318 119.141 21.9318L123.861 21.9318C130.013 21.9318 135 26.919 135 33.0711L135 95.9463C135 102.098 130.013 107.086 123.861 107.086H119.141C114.136 107.086 110.079 111.143 110.079 116.148V123.861C110.079 130.013 105.091 135 98.9392 135H36.064C29.9119 135 24.9247 130.013 24.9247 123.861V116.148C24.9247 111.143 20.8673 107.086 15.8623 107.086H11.1393C4.98725 107.086 -2.47588e-07 102.098 0 95.9463L2.39336e-06 33.0711C2.64094e-06 26.919 4.98726 21.9318 11.1393 21.9318L15.8623 21.9318C20.8673 21.9318 24.9247 17.8744 24.9247 12.8693V11.1393ZM36.064 2.07692C31.059 2.07692 27.0016 6.13431 27.0016 11.1393V12.8693C27.0016 19.0214 22.0144 24.0087 15.8623 24.0087H11.1393C6.13431 24.0087 2.07693 28.0661 2.07693 33.0711L2.07692 95.9463C2.07692 100.951 6.13431 105.009 11.1393 105.009H15.8623C22.0143 105.009 27.0016 109.996 27.0016 116.148V123.861C27.0016 128.866 31.059 132.923 36.064 132.923H98.9392C103.944 132.923 108.002 128.866 108.002 123.861V116.148C108.002 109.996 112.989 105.009 119.141 105.009H123.861C128.866 105.009 132.923 100.951 132.923 95.9463L132.923 33.0711C132.923 28.0661 128.866 24.0087 123.861 24.0087H119.141C112.989 24.0087 108.002 19.0214 108.002 12.8693V11.1393C108.002 6.1343 103.944 2.07692 98.9392 2.07692L36.064 2.07692Z" fill="white" />
     <path d="M27.2106 66.8825L27.1406 58.8116H37.8707V61.3542H30.2197L30.1964 65.7628H37.4508V68.1654H30.1964L30.2663 74.9767H27.1406L27.2106 66.8825Z" fill="white" />
     <path d="M39.7822 68.7719L39.7122 62.6138C40.2409 62.676 40.723 62.7071 41.1585 62.7071C41.5939 62.7071 42.076 62.676 42.6047 62.6138L42.558 68.7719L42.6047 74.9767H39.7122L39.7822 68.7719ZM39.4556 59.9079C39.4556 59.4103 39.5956 59.0371 39.8755 58.7883C40.1554 58.5394 40.5908 58.415 41.1818 58.415C41.7572 58.415 42.1848 58.5394 42.4647 58.7883C42.7446 59.0371 42.8846 59.4103 42.8846 59.9079C42.8846 60.4211 42.7446 60.8021 42.4647 61.0509C42.2004 61.2842 41.7727 61.4008 41.1818 61.4008C40.5908 61.4008 40.1554 61.2842 39.8755 61.0509C39.5956 60.8021 39.4556 60.4211 39.4556 59.9079Z" fill="white" />
     <path d="M45.2949 66.7659L45.2249 58.7883H48.1173L48.0707 66.7659L48.1173 74.9767H45.2249L45.2949 66.7659Z" fill="white" />
diff --git a/packages/fe/components/navigation/button-login.vue b/packages/fe/components/navigation/button-login.vue
index 57f8c139..91e7a58d 100644
--- a/packages/fe/components/navigation/button-login.vue
+++ b/packages/fe/components/navigation/button-login.vue
@@ -48,7 +48,8 @@ export default {
   height: toRem(35);
   padding: 0 1rem;
   &:not([disabled]) {
-    &:hover {
+    &:hover,
+    &:focus-visible {
       color: $aztec;
       transform: scale(1.05);
       :deep(path) {
@@ -61,6 +62,9 @@ export default {
         }
       }
     }
+    &:focus-visible {
+      @include focusBoxShadow;
+    }
   }
   :deep(.triple-dot-loader) {
     .dot {
diff --git a/packages/fe/components/navigation/nav-desktop.vue b/packages/fe/components/navigation/nav-desktop.vue
index a8ff7f56..cdfc4a05 100644
--- a/packages/fe/components/navigation/nav-desktop.vue
+++ b/packages/fe/components/navigation/nav-desktop.vue
@@ -233,6 +233,12 @@ export default {
   position: relative;
   height: calc(100% - 2rem);
   z-index: 10000;
+  &:focus-visible {
+    .logo {
+      @include focusOutlineWithOffset;
+      border-radius: toRem(5);
+    }
+  }
   @include medium {
     height: calc(100% - 4rem);
   }
@@ -282,6 +288,7 @@ export default {
 .button.site-nav-link {
   display: block;
   padding: 0 1rem;
+  border-radius: toRem(48);
   @include medium {
     padding: 0 0.5rem;
   }
diff --git a/packages/fe/components/navigation/notification-panel.vue b/packages/fe/components/navigation/notification-panel.vue
index 6467fd47..c75e72c8 100644
--- a/packages/fe/components/navigation/notification-panel.vue
+++ b/packages/fe/components/navigation/notification-panel.vue
@@ -266,11 +266,16 @@ export default {
   border-radius: 50%;
   transition: 150ms ease-out;
   &:hover,
+  &:focus-visible,
   &.panel-open {
     transition: 150ms ease-in;
     transform: scale(1.15);
   }
-  &:hover {
+  &:focus-visible {
+    @include focusBoxShadow;
+  }
+  &:hover,
+  &:focus-within {
     &.panel-open {
       :deep(.icon) {
         &.close {
@@ -418,13 +423,18 @@ export default {
 }
 
 .refresh-button {
-  &:hover {
+  &:hover,
+  &:focus-visible {
     transform: rotate(180deg) scale(1.15);
     &:active {
       transition: 50ms ease-in;
       transform: rotate(180deg) scale(0.8);
     }
   }
+  &:focus-visible {
+    @include focusOutlineWithOffset;
+    border-radius: 50%;
+  }
 }
 
 .icon-refresh {
diff --git a/packages/fe/components/navigation/profile-panel.vue b/packages/fe/components/navigation/profile-panel.vue
index 72aafd41..98ada94b 100644
--- a/packages/fe/components/navigation/profile-panel.vue
+++ b/packages/fe/components/navigation/profile-panel.vue
@@ -125,6 +125,7 @@ export default {
   overflow: hidden;
   transition: 150ms ease-out;
   &:hover,
+  &:focus-visible,
   &.panel-open {
     transition: 150ms ease-in;
     transform: scale(1.15);
@@ -133,7 +134,11 @@ export default {
       transform: scale(1.15);
     }
   }
-  &:hover {
+  &:focus-visible {
+    @include focusBoxShadow;
+  }
+  &:hover,
+  &:focus-visible {
     &.panel-open {
       :deep(.icon.close) {
         transform: translateY(0) rotate(90deg);
@@ -208,7 +213,9 @@ export default {
 .user-preview,
 .auth-link.button,
 .kyc-link {
-  padding: toRem(2) 1rem;
+  padding: toRem(2) 0.5rem;
+  margin: 0 0.5rem;
+  border-radius: toRem(8);
 }
 
 .user-preview {
@@ -260,7 +267,7 @@ export default {
 }
 
 :deep(.button-logout.button-x) {
-  padding-bottom: toRem(10);
+  margin-bottom: toRem(8);
   .inner-content {
     display: flex;
     flex-direction: row;
diff --git a/packages/fe/components/page-index/roadmap.vue b/packages/fe/components/page-index/roadmap.vue
index e5468744..9b0cb0c8 100644
--- a/packages/fe/components/page-index/roadmap.vue
+++ b/packages/fe/components/page-index/roadmap.vue
@@ -460,9 +460,13 @@ export default {
   margin-bottom: toRem(5);
 }
 
+.links {
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: flex-end;
+}
 .footer-link {
   @include linkUnderline;
-  text-align: right;
   :deep(.button-content) {
     @include h6;
   }
diff --git a/packages/fe/components/site-footer.vue b/packages/fe/components/site-footer.vue
index 55b2982b..cc0a3b11 100644
--- a/packages/fe/components/site-footer.vue
+++ b/packages/fe/components/site-footer.vue
@@ -14,7 +14,7 @@
         <div class="col-3_md-5_mi-12">
           <div class="logo-cta">
             <Logo class="site-logo" />
-            <DatacapTextSpinner @clicked="$highlightApplyForm" />
+            <DatacapTextSpinner :tabindex="0" @clicked="$highlightApplyForm" />
           </div>
         </div>
 
@@ -36,6 +36,7 @@
         <div class="col-5_md-12_mi-12">
           <div class="video-cta-wrapper">
             <ButtonX
+              :tabindex="-1"
               :tag="videoCta.type"
               :to="videoCta.url"
               :target="videoCta.target"
@@ -287,11 +288,15 @@ export default {
   &:last-child {
     border-bottom: none;
   }
-  &:hover {
+  &:hover,
+  &:focus-visible {
     .button-content {
       transform: scale(1.05);
     }
   }
+  &:focus-visible {
+    border-radius: toRem(5);
+  }
   @include medium {
     width: calc(100% + 100vw * 0.041665);
   }
@@ -373,6 +378,16 @@ export default {
   display: block;
   width: 100%;
   height: 100%;
+  :deep(.button-x) {
+    &:focus-visible {
+      outline: none;
+      .chevron-long {
+        @include focusBoxShadow;
+        transition: 150ms ease-in;
+        transform: translateX(1rem);
+      }
+    }
+  }
   .site-logo {
     width: 13%;
     top: 1.75rem;
@@ -464,20 +479,30 @@ export default {
 
 .link-data-programs-logo {
   transition: 150ms ease-out;
-  &:hover {
+  &:hover,
+  &:focus-visible {
     transition: 150ms ease-in;
     transform: scale(1.05);
   }
+  &:focus-visible {
+    @include focusOutlineWithOffset;
+    border-radius: toRem(5);
+  }
 }
 
 .secondary-link {
   padding: 0;
   border-bottom: none;
   transition: 150ms ease-out;
-  &:hover {
+  &:hover,
+  &:focus-visible {
     transition: 150ms ease-in;
     transform: scale(1.2);
   }
+  &:focus-visible {
+    @include focusOutlineWithOffset;
+    border-radius: toRem(5);
+  }
   &:not(:last-child) {
     margin-right: 1.5625rem;
   }
diff --git a/packages/fe/components/spinners/datacap-text.vue b/packages/fe/components/spinners/datacap-text.vue
index 035bff37..89d59e97 100644
--- a/packages/fe/components/spinners/datacap-text.vue
+++ b/packages/fe/components/spinners/datacap-text.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="datacap-spinner" @click="$emit('clicked')">
+  <div class="datacap-spinner" @click="$emit('clicked')" @keyup.enter="$emit('clicked')">
     <svg
       class="circle-text"
       viewBox="0 0 130 130"
@@ -58,6 +58,14 @@ export default {
   position: absolute;
   width: toRem(130);
   cursor: pointer;
+  &:hover,
+  &:focus {
+    animation-play-state: paused;
+  }
+  &:focus {
+    @include focusOutlineWithOffset(12px);
+    border-radius: 50%;
+  }
 }
 
 .circle-text {
@@ -65,9 +73,6 @@ export default {
   position: relative;
   width: 100%;
   animation: spinning 15s infinite linear reverse;
-  &:hover {
-    animation-play-state: paused;
-  }
 }
 
 .arrow {
diff --git a/packages/fe/modules/form/fields/range.vue b/packages/fe/modules/form/fields/range.vue
index 7b55ee66..28125a2e 100644
--- a/packages/fe/modules/form/fields/range.vue
+++ b/packages/fe/modules/form/fields/range.vue
@@ -2,19 +2,6 @@
   <div :class="['range-container', state]">
 
     <div class="range-track">
-      <div
-        ref="thumb"
-        class="thumb-container"
-        :style="thumbPosition">
-        <slot name="thumb" />
-      </div>
-
-      <div
-        :style="progressBarWidth"
-        class="progress-bar-container">
-        <slot name="progress-bar" :tick="tick" />
-      </div>
-
       <input
         :id="modelKey"
         ref="input"
@@ -30,6 +17,20 @@
         @focus="toggleFocused(true)"
         @blur="toggleFocused(false)"
         @input="updateValue($event.target.value)" />
+
+      <div
+        ref="thumb"
+        class="thumb-container"
+        :style="thumbPosition">
+        <slot name="thumb" />
+      </div>
+
+      <div
+        :style="progressBarWidth"
+        class="progress-bar-container">
+        <slot name="progress-bar" :tick="tick" />
+      </div>
+
     </div>
 
     <slot
diff --git a/packages/fe/pages/faq.vue b/packages/fe/pages/faq.vue
index b115530c..70ae63b7 100644
--- a/packages/fe/pages/faq.vue
+++ b/packages/fe/pages/faq.vue
@@ -171,7 +171,7 @@ export default {
 }
 
 :deep(.faq-accordion) {
-  padding-right: 5rem;
+  padding-right: 4rem;
   @include small {
     padding-right: 3rem;
   }