diff --git a/ppr-ui/package-lock.json b/ppr-ui/package-lock.json
index 83b8e1f57..bc48d0dae 100644
--- a/ppr-ui/package-lock.json
+++ b/ppr-ui/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "ppr-ui",
-  "version": "3.2.31",
+  "version": "3.2.32",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "ppr-ui",
-      "version": "3.2.31",
+      "version": "3.2.32",
       "dependencies": {
         "@bcrs-shared-components/input-field-date-picker": "^1.0.0",
         "@lemoncode/fonk": "^1.5.1",
diff --git a/ppr-ui/package.json b/ppr-ui/package.json
index 4570e7885..a4270ac90 100644
--- a/ppr-ui/package.json
+++ b/ppr-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ppr-ui",
-  "version": "3.2.31",
+  "version": "3.2.32",
   "private": true,
   "appName": "Assets UI",
   "sbcName": "SBC Common Components",
diff --git a/ppr-ui/src/assets/styles/accessibility.scss b/ppr-ui/src/assets/styles/accessibility.scss
new file mode 100644
index 000000000..93659a7e7
--- /dev/null
+++ b/ppr-ui/src/assets/styles/accessibility.scss
@@ -0,0 +1,65 @@
+// Mixin for focus-visible styles with default values
+@mixin focus-visible-style($outline-offset: 2px, $border-radius: null) {
+  outline: 2px solid $focus-outline;
+  box-shadow: 0 0 0 2px #fff;
+  outline-offset: $outline-offset;
+  transition: none;
+
+  // Only apply border-radius if a value is provided
+  @if $border-radius != null {
+    border-radius: $border-radius;
+  }
+}
+
+// General styles for elements after focus
+.v-btn:after,
+.v-list-item:after,
+.v-selection-control--focus-visible .v-selection-control__input:before {
+  content: none;
+}
+
+// Prevent color changes in buttons when focus visible
+.v-btn:focus-visible .v-btn__overlay {
+  opacity: 0;
+}
+
+a {
+  padding: 0 4px;
+
+  &:focus-visible {
+    @include focus-visible-style(2px, 4px)
+  }
+}
+
+// Focus visible styles for radio buttons, buttons, and tabs
+.v-btn:focus-visible,
+.tab-focused .v-field {
+  @include focus-visible-style(2px);
+  z-index: 1;
+}
+
+.v-radio.v-selection-control--focus-visible {
+  @include focus-visible-style(2px, 4px);
+}
+
+// Checkbox button focus visible styling
+.v-checkbox-btn.v-selection-control--focus-visible .v-selection-control__wrapper {
+  @include focus-visible-style(-8px, 10px);
+}
+
+// Dropdown items focus visible styling
+.v-list-item:focus-visible {
+  @include focus-visible-style(-2px, 4px);
+}
+
+// Help icons focus visible styling
+.v-icon:focus-visible {
+  outline: 2px solid $focus-outline;
+  box-shadow: 0px 0px 0px 2px #fff;
+  border-radius: 50%;
+}
+
+.v-slide-group__container {
+  contain: unset;
+  overflow: unset;
+}
\ No newline at end of file
diff --git a/ppr-ui/src/assets/styles/base.scss b/ppr-ui/src/assets/styles/base.scss
index a9c80ce6f..6a5e76be5 100644
--- a/ppr-ui/src/assets/styles/base.scss
+++ b/ppr-ui/src/assets/styles/base.scss
@@ -1,4 +1,5 @@
 @import 'theme.scss';
+@import 'accessibility.scss';
 
 @font-face {
   font-family: 'BCSans';
diff --git a/ppr-ui/src/assets/styles/theme.scss b/ppr-ui/src/assets/styles/theme.scss
index c494a600e..abf6f1e53 100644
--- a/ppr-ui/src/assets/styles/theme.scss
+++ b/ppr-ui/src/assets/styles/theme.scss
@@ -80,3 +80,6 @@ $app-orange: #f8661a; // same as the Vuetify theme caution
 // Sizes for Fonts
 $px-14: 0.8750rem;
 $px-16: 1.0000rem;
+
+// Accessibility
+$focus-outline: #003366;
diff --git a/ppr-ui/src/components/common/AccountInfo.vue b/ppr-ui/src/components/common/AccountInfo.vue
index 801de6169..9322f33bf 100644
--- a/ppr-ui/src/components/common/AccountInfo.vue
+++ b/ppr-ui/src/components/common/AccountInfo.vue
@@ -14,6 +14,7 @@
             class="mt-n1"
             color="primary"
             v-bind="props"
+            tabindex="0"
           >
             mdi-information-outline
           </v-icon>
diff --git a/ppr-ui/src/components/common/Breadcrumb.vue b/ppr-ui/src/components/common/Breadcrumb.vue
index 64ffbc552..e2bcbac4b 100644
--- a/ppr-ui/src/components/common/Breadcrumb.vue
+++ b/ppr-ui/src/components/common/Breadcrumb.vue
@@ -34,7 +34,7 @@
             <v-breadcrumbs-item
               v-for="(item, index) in breadcrumbs"
               :key="item.text"
-              class="fs-13"
+              class="fs-13 px-0"
               data-test-id="breadcrumb-item"
               :disabled="item.disabled"
               :href="item.href"
diff --git a/ppr-ui/src/components/common/RegistrationsWrapper.vue b/ppr-ui/src/components/common/RegistrationsWrapper.vue
index af65f4f2a..d1c20df9c 100644
--- a/ppr-ui/src/components/common/RegistrationsWrapper.vue
+++ b/ppr-ui/src/components/common/RegistrationsWrapper.vue
@@ -80,6 +80,7 @@
                 color="primary"
                 v-bind="props"
                 class="mt-n1"
+                tabindex="0"
               >
                 mdi-information-outline
               </v-icon>
diff --git a/ppr-ui/src/components/dashboard/DashboardTabs.vue b/ppr-ui/src/components/dashboard/DashboardTabs.vue
index 4bc43000f..2526933db 100644
--- a/ppr-ui/src/components/dashboard/DashboardTabs.vue
+++ b/ppr-ui/src/components/dashboard/DashboardTabs.vue
@@ -5,16 +5,16 @@
     <!-- Tabs -->
     <v-tabs
       v-model="tabNumber"
-      height="64"
-      hideSlider
-      alignTabs="center"
+      hide-slider
       grow
+      class="ppr-mhr-tabs"
       @update:model-value="onTabChange"
     >
       <v-tab
         :value="0"
-        class="tab upper-border"
+        class="tab"
         :ripple="false"
+        tabindex="0"
         :class="{ 'mt-1': isMhrTab }"
       >
         <v-icon
@@ -27,8 +27,9 @@
       </v-tab>
       <v-tab
         :value="1"
-        class="tab upper-border"
+        class="tab"
         :ripple="false"
+        tabindex="0"
         :class="{ 'mt-1': isPprTab }"
       >
         <v-icon
@@ -150,6 +151,13 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 @import '@/assets/styles/theme.scss';
+
+.ppr-mhr-tabs {
+  height: 68px;
+  display: block;
+  overflow: visible;
+}
+
 .tab {
   min-height: 64px !important;
   background-color: $BCgovBlue5;
@@ -161,20 +169,24 @@ export default defineComponent({
   &:hover:not(.v-tab--selected) {
     background-color: $primary-blue
   }
+
+  &:nth-child(1) {
+    margin-right: 3px; // margin to make space for outline a11y
+  }
+  &:nth-child(2) {
+    margin-left: 3px; // margin to make space for outline a11y
+  }
 }
 .v-tab--selected {
   background-color: white;
   color: $gray9;
   pointer-events: none;
 }
-.upper-border {
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
-  min-height: 58px;
-  max-height: 58px;
-  margin: 0 2.5px;
-}
 .v-window {
   min-height: 400px
 }
+
+.v-slide-group-item--active {
+  height: unset !important;
+}
 </style>
diff --git a/ppr-ui/src/components/mhrRegistration/MhrStatusCorrection.vue b/ppr-ui/src/components/mhrRegistration/MhrStatusCorrection.vue
index 05691ec19..64e4660f5 100644
--- a/ppr-ui/src/components/mhrRegistration/MhrStatusCorrection.vue
+++ b/ppr-ui/src/components/mhrRegistration/MhrStatusCorrection.vue
@@ -19,6 +19,7 @@
               color="primary"
               v-bind="props"
               class="mr-1"
+              tabindex="0"
             >
               mdi-information-outline
             </v-icon>
diff --git a/ppr-ui/src/components/mhrRegistration/YourHome/HomeCertification.vue b/ppr-ui/src/components/mhrRegistration/YourHome/HomeCertification.vue
index 476647125..c7d2c0234 100644
--- a/ppr-ui/src/components/mhrRegistration/YourHome/HomeCertification.vue
+++ b/ppr-ui/src/components/mhrRegistration/YourHome/HomeCertification.vue
@@ -172,6 +172,7 @@
                 color="primary"
                 v-bind="props"
                 data-test-id="no-certification-tooltip"
+                tabindex="0"
               >
                 mdi-information-outline
               </v-icon>
diff --git a/ppr-ui/src/components/mhrRegistration/YourHome/ManufacturedYearInput.vue b/ppr-ui/src/components/mhrRegistration/YourHome/ManufacturedYearInput.vue
index ceda2c535..a4b0292bb 100644
--- a/ppr-ui/src/components/mhrRegistration/YourHome/ManufacturedYearInput.vue
+++ b/ppr-ui/src/components/mhrRegistration/YourHome/ManufacturedYearInput.vue
@@ -48,9 +48,10 @@
       >
         <template #activator="{ props }">
           <v-icon
-            class="circa-tooltip-icon pl-3 mt-4"
+            class="circa-tooltip-icon ml-1 mt-4"
             color="primary"
             v-bind="props"
+            tabindex="0"
           >
             mdi-information-outline
           </v-icon>
diff --git a/ppr-ui/src/components/parties/Parties.vue b/ppr-ui/src/components/parties/Parties.vue
index 8733fb408..222e32a76 100644
--- a/ppr-ui/src/components/parties/Parties.vue
+++ b/ppr-ui/src/components/parties/Parties.vue
@@ -80,9 +80,10 @@
           >
             <template #activator="{ props }">
               <v-icon
-                class="pl-1 mt-n1"
+                class="ml-1 mt-n1"
                 color="primary"
                 v-bind="props"
+                tabindex="0"
               >
                 mdi-information-outline
               </v-icon>
diff --git a/ppr-ui/src/components/registration/RegistrationBarTypeAheadList.vue b/ppr-ui/src/components/registration/RegistrationBarTypeAheadList.vue
index 6377f36fe..209991e77 100644
--- a/ppr-ui/src/components/registration/RegistrationBarTypeAheadList.vue
+++ b/ppr-ui/src/components/registration/RegistrationBarTypeAheadList.vue
@@ -33,38 +33,25 @@
             :id="`reg-type-drop-${item.raw.group}`"
             class="registration-list-item"
             noGutters
+            @click="toggleGroup(item.raw.group)"
           >
             <v-row
               :id="`reg-type-drop-${item.raw.group}`"
-              style="pointer-events: all;"
-              @click="toggleGroup(item.raw.group)"
             >
-              <v-col cols="12">
+              <v-col>
                 <span class="registration-list-header">{{ item.raw.text }}</span>
               </v-col>
-            </v-row>
-            <template #append>
-              <v-btn
-                variant="plain"
-                size="small"
-                @click="toggleGroup(item.raw.group)"
+              <v-col
+                cols="auto"
               >
                 <v-icon
-                  v-if="displayGroup[item.raw.group]"
-                  class="expand-icon"
                   color="primary"
+                  class="mr-3"
                 >
-                  mdi-chevron-up
+                  {{ displayGroup[item.raw.group] ? 'mdi-chevron-up' : 'mdi-chevron-down' }}
                 </v-icon>
-                <v-icon
-                  v-else
-                  class="expand-icon"
-                  color="primary"
-                >
-                  mdi-chevron-down
-                </v-icon>
-              </v-btn>
-            </template>
+              </v-col>
+            </v-row>
           </v-list-item>
         </template>
         <template v-else-if="item.raw.class === 'registration-list-divider'">
diff --git a/ppr-ui/src/components/search/SearchBar.vue b/ppr-ui/src/components/search/SearchBar.vue
index 5e29966c7..ad0ff14e6 100644
--- a/ppr-ui/src/components/search/SearchBar.vue
+++ b/ppr-ui/src/components/search/SearchBar.vue
@@ -246,7 +246,7 @@
       <v-col class="pl-3 mt-1 search-btn-col">
         <v-btn
           id="search-btn"
-          class="search-bar-btn bg-primary mr-3"
+          class="search-bar-btn mr-3"
           :loading="searching"
           @click="searchCheck()"
         >
diff --git a/ppr-ui/src/components/search/SearchBarList.vue b/ppr-ui/src/components/search/SearchBarList.vue
index 26ae405a3..27b9e4599 100644
--- a/ppr-ui/src/components/search/SearchBarList.vue
+++ b/ppr-ui/src/components/search/SearchBarList.vue
@@ -24,11 +24,11 @@
         <v-list-item
           class="py-2"
           :class="{ 'top-border' : item.raw.icon === 'mdi-home' }"
+          @click="toggleGroup(item.raw.group)"
         >
           <v-row
             :id="`search-type-drop-${item.raw.group}`"
             class="py-3 search-list-header-row"
-            @click="toggleGroup(item.raw.group)"
           >
             <v-col
               class="py-0 pl-3"
@@ -47,13 +47,9 @@
               class="py-0"
               alignSelf="center"
             >
-              <v-btn
-                variant="plain"
-                size="18"
-                color="primary"
-                class="mt-n2"
-                :appendIcon="displayGroup[item.raw.group] ? 'mdi-chevron-up' : 'mdi-chevron-down'"
-              />
+              <v-icon color="primary">
+                {{ displayGroup[item.raw.group] ? 'mdi-chevron-up' : 'mdi-chevron-down' }}
+              </v-icon>
             </v-col>
           </v-row>
         </v-list-item>
diff --git a/ppr-ui/src/components/tables/SearchHistory.vue b/ppr-ui/src/components/tables/SearchHistory.vue
index a6aadb3ae..b696dabd3 100644
--- a/ppr-ui/src/components/tables/SearchHistory.vue
+++ b/ppr-ui/src/components/tables/SearchHistory.vue
@@ -157,8 +157,9 @@
                         v-else
                         color="primary"
                         size="20"
-                        class="px-8"
+                        class="ml-5"
                         v-bind="props"
+                        tabindex="0"
                       >
                         mdi-information-outline
                       </v-icon>
diff --git a/ppr-ui/src/main.ts b/ppr-ui/src/main.ts
index 39a0b1167..08a15754d 100644
--- a/ppr-ui/src/main.ts
+++ b/ppr-ui/src/main.ts
@@ -8,6 +8,7 @@ import { getVueRouter } from '@/router'
 import { getPiniaStore } from '@/store'
 import * as Sentry from '@sentry/vue'
 import vuetify from './plugins/vuetify'
+import tabFocus from './plugins/tabFocus'
 import { vMaska } from 'maska'
 
 // Base App
@@ -69,6 +70,7 @@ async function start () {
   app.use(router)
   app.use(pinia)
   app.use(vuetify)
+  app.use(tabFocus)
   app.mount('#app')
 }
 
diff --git a/ppr-ui/src/plugins/tabFocus.ts b/ppr-ui/src/plugins/tabFocus.ts
new file mode 100644
index 000000000..9862405bb
--- /dev/null
+++ b/ppr-ui/src/plugins/tabFocus.ts
@@ -0,0 +1,71 @@
+/**
+ * Plugin to modify the VTextField and VTextarea components to add a 'tab-focused' css class when the input
+ * is focused via the Tab key. This allows to style the input differently
+ * when it's focused with the keyboard, compared to when it's clicked with the mouse.
+ *
+ * The event listeners are cleaned up when the component is unmounted.
+ */
+export default {
+  install(app) {
+    const TAB_KEY = 'Tab'
+
+    const addTabFocusToComponent = (component: any) => {
+      if (!component) return
+
+      // Store the original mount function
+      const originalMount = component.mounted
+
+      // Modify the mounted lifecycle hook
+      component.mounted = function () {
+        // Call any existing mounted functions
+        if (originalMount) originalMount.call(this)
+
+        const input = this.$el.querySelector('input, textarea')
+        if (!input) return
+
+        const handleKeyDown = event => {
+          if (event.key === TAB_KEY) {
+            input.lastKeyPressed = TAB_KEY
+          }
+        }
+
+        const handleFocus = () => {
+          if (input.lastKeyPressed === TAB_KEY) {
+            this.$el.classList.add('tab-focused')
+          }
+          input.lastKeyPressed = '' // Reset after check
+        }
+
+        const handleBlur = () => {
+          this.$el.classList.remove('tab-focused')
+        }
+
+        window.addEventListener('keydown', handleKeyDown)
+        input.addEventListener('focus', handleFocus)
+        input.addEventListener('blur', handleBlur)
+
+        input.cleanupEventListeners = () => {
+          window.removeEventListener('keydown', handleKeyDown)
+          input.removeEventListener('focus', handleFocus)
+          input.removeEventListener('blur', handleBlur)
+        }
+      }
+
+      // Modify the unmounted lifecycle hook to remove all event listeners
+      component.unmounted = function () {
+        const input = this.$el.querySelector('input, textarea')
+        if (input && input.cleanupEventListeners) {
+          input.cleanupEventListeners()
+        }
+      }
+    }
+
+    // Access the VTextField component and add tab focus events
+    const VTextField = app.component('VTextField')
+    addTabFocusToComponent(VTextField)
+
+    // Access the VTextarea component and add tab focus events
+    const VTextarea = app.component('VTextarea')
+    addTabFocusToComponent(VTextarea)
+  }
+}
diff --git a/ppr-ui/src/resources/ownerRoles.ts b/ppr-ui/src/resources/ownerRoles.ts
index 6bb916811..ad8082556 100644
--- a/ppr-ui/src/resources/ownerRoles.ts
+++ b/ppr-ui/src/resources/ownerRoles.ts
@@ -12,7 +12,7 @@ export const HomeOwnerRoles: Array<OwnerRoleConfigIF> = [
   },
   {
     id: 'executor-option',
-    class: 'executor-radio px-4',
+    class: 'executor-radio ml-4 mr-2 pr-2',
     model: HomeOwnerPartyTypes.EXECUTOR,
     label: 'Executor',
     tooltipContent: 'An Executor is the personal representative named in the will or appointed by court to carry out ' +
@@ -20,7 +20,7 @@ export const HomeOwnerRoles: Array<OwnerRoleConfigIF> = [
   },
   {
     id: 'administrator-option',
-    class: 'administrator-radio px-4',
+    class: 'administrator-radio ml-4 mr-2 pr-2',
     model: HomeOwnerPartyTypes.ADMINISTRATOR,
     label: 'Administrator',
     tooltipContent: '\n' +
@@ -29,7 +29,7 @@ export const HomeOwnerRoles: Array<OwnerRoleConfigIF> = [
   },
   {
     id: 'trustee-option',
-    class: 'trustee-radio pl-2',
+    class: 'trustee-radio ml-2 pr-2',
     model: HomeOwnerPartyTypes.TRUSTEE,
     label: 'Bankruptcy Trustee',
     tooltipContent: 'A Bankruptcy Trustee is a professional who is licensed by the Government of Canada to administer' +