diff --git a/lib/osf-components/addon/components/subjects/widget/styles.scss b/lib/osf-components/addon/components/subjects/widget/styles.scss
index 69615e7ab72..ce72b1bac90 100644
--- a/lib/osf-components/addon/components/subjects/widget/styles.scss
+++ b/lib/osf-components/addon/components/subjects/widget/styles.scss
@@ -1,3 +1,39 @@
-.Tabs :global(.nav-tabs) {
-    margin-bottom: 10px;
+.Tabs {
+    /* stylelint-disable selector-no-qualifying-type */
+    ul.TabList {
+        margin-bottom: 10px;
+        border-bottom: 1px solid #ddd;
+        box-sizing: border-box;
+        color: rgb(51, 51, 51);
+        display: block;
+        line-height: 20px;
+        list-style-image: none;
+        list-style-position: outside;
+        list-style-type: none;
+        height: 41px;
+        padding: 0;
+    }
+    /* stylelint-enable selector-no-qualifying-type */
+    .TabList {
+        li {
+            display: block;
+            position: relative;
+            margin-bottom: -1px;
+            float: left;
+            height: 41px;
+            padding: 10px 15px;
+        }
+
+        li:global(.ember-tabs__tab--selected) {
+            background-color: #f8f8f8;
+            border-bottom: 2px solid #204762;
+        }
+
+        li:hover {
+            border-color: transparent;
+            text-decoration: none;
+            background-color: #f8f8f8;
+            color: var(--primary-color);
+        }
+    }
 }
diff --git a/lib/osf-components/addon/components/subjects/widget/template.hbs b/lib/osf-components/addon/components/subjects/widget/template.hbs
index 4bd857ff3da..42e6344d6d4 100644
--- a/lib/osf-components/addon/components/subjects/widget/template.hbs
+++ b/lib/osf-components/addon/components/subjects/widget/template.hbs
@@ -3,24 +3,28 @@
     @removeSubject={{@subjectsManager.unselectSubject}}
 />
 
-<BsTab
+<AriaTabs
+    @defaultIndex={{0}} 
     local-class='Tabs'
     as |tab|
 >
-    <tab.pane
-        @title= {{t 'osf-components.subjects.browse.browse_all'}}
+    <tab.tabList
+        local-class='TabList'
+        as |tablist|
     >
+        <tablist.tab>{{t 'osf-components.subjects.browse.browse_all'}}</tablist.tab>
+        <tablist.tab>{{t 'osf-components.subjects.search.search_all'}}</tablist.tab>
+    </tab.tabList>
+    <tab.tabPanel>
         <Subjects::Browse
             data-analytics-scope='Browse'
             @subjectsManager={{@subjectsManager}}
         />
-    </tab.pane>
-    <tab.pane
-        @title={{t 'osf-components.subjects.search.search_all'}}
-    >
+    </tab.tabPanel>
+    <tab.tabPanel>
         <Subjects::Search
             data-analytics-scope='Search'
             @subjectsManager={{@subjectsManager}}
         />
-    </tab.pane>
-</BsTab>
+    </tab.tabPanel>
+</AriaTabs>