diff --git a/pathways_vue/components/course/concurrent-courses.vue b/pathways_vue/components/course/concurrent-courses.vue
index b335249f..ae7c8f57 100644
--- a/pathways_vue/components/course/concurrent-courses.vue
+++ b/pathways_vue/components/course/concurrent-courses.vue
@@ -11,7 +11,20 @@
       <table class="table table-borderless">
         <thead>
           <tr class="bg-light text-dark">
-            <th scope="col" style="width: 10%">% <a href="#"><i class="bi bi-info-circle-fill"></i></a></th>
+            <th scope="col" style="width: 10%">
+              %
+              <a
+                tabindex="0"
+                class="info-course-concurrent"
+                role="button"
+                data-bs-toggle="popover"
+                data-bs-trigger="focus"
+                title="Percentage"
+                data-bs-content="Description needed."
+              >
+                <i class="bi bi-info-circle-fill"></i>
+              </a>
+            </th>
             <th scope="col" class="visually-hidden" style="width: 30%">Percentage Graph</th>
             <th scope="col" style="width: 30%">Concurrent Course</th>
             <th scope="col" style="width: 30%">COI</th>
@@ -91,11 +104,16 @@
 </template>
 
 <script>
+import { Popover } from 'bootstrap';
+
 export default {
   name: 'ConcurrentCourses',
   data() {
     return {};
   },
+  mounted() {
+    var popover = new Popover(document.querySelector('.info-course-concurrent'));
+  },
   methods: {},
 };
 </script>
diff --git a/pathways_vue/components/course/grade-distribution.vue b/pathways_vue/components/course/grade-distribution.vue
index 3b29b4ec..cd2a2070 100644
--- a/pathways_vue/components/course/grade-distribution.vue
+++ b/pathways_vue/components/course/grade-distribution.vue
@@ -7,12 +7,16 @@
       <p>
         This graph represents the distribution of grades for every student who completed <strong>CHEM 162</strong> over the past 5 years. 
         <a
-          href="#"
+          tabindex="0"
+          class="info-gcd"
+          role="button"
           data-bs-toggle="popover"
-          title="What is Course Grade Distribution?"
-          data-bs-content="Description goes here."
-          ><i class="bi bi-info-circle-fill"></i
-        ></a>
+          data-bs-trigger="focus"
+          title="Course Grade Distribution"
+          data-bs-content="What is CGD?"
+        >
+          <i class="bi bi-info-circle-fill"></i>
+        </a>
       </p>
       <div id="gcd_graph" />
       <p><small>Number of grades in this sample: 6988 (5 years). Data not instructor-specific.</small></p>
@@ -22,6 +26,7 @@
 
 <script>
 import * as d3 from 'd3';
+import { Popover } from 'bootstrap';
 
 export default {
   name: "GradeDistribution",
@@ -57,6 +62,7 @@ export default {
   },
   mounted() {
     this.generateGCD();
+    var popover = new Popover(document.querySelector('.info-gcd'));
   },
   methods: {
     generateGCD() {
@@ -134,7 +140,7 @@ export default {
           return 'translate(' + x(d.x0) + ',' + y(d.length) + ')';
         })
         .attr('width', function (d) {
-          return x(d.x1) - x(d.x0) - 1;
+          return x(d.x1) - x(d.x0);
         })
         .attr('height', function (d) {
           return height - y(d.length);
diff --git a/pathways_vue/components/course/outcome-index.vue b/pathways_vue/components/course/outcome-index.vue
index 6b46e628..bfe8fb85 100644
--- a/pathways_vue/components/course/outcome-index.vue
+++ b/pathways_vue/components/course/outcome-index.vue
@@ -8,12 +8,16 @@
         Using prior course data, this index compares estimated fail/withdrawal rates against actual
         fail/withdrawal rates.
         <a
-          href="#"
+          tabindex="0"
+          class="info-popper"
+          role="button"
           data-bs-toggle="popover"
-          title="What is COI?"
+          data-bs-trigger="focus"
+          title="Course Outcome Indicator"
           data-bs-content="A lower number (0-2) indicates that fewer people completed the course than predicted. A middle number (2-3) indicates the course is on target with predictions. A higher (3-5) number indicates that more people completed the course than anticipated."
-          ><i class="bi bi-info-circle-fill"></i
-        ></a>
+        >
+          <i class="bi bi-info-circle-fill"></i>
+        </a>
       </p>
       <div id="coiGraph" />
       <div class="coi-key">
@@ -21,15 +25,18 @@
 
         <dl class="row">
           <dt class="col-sm-6">
-            <i style="color: #ff8c00" class="bi bi-triangle-fill"></i> <span  class="key-desc">CHEM 162</span>
+            <i style="color: #ff8c00" class="bi bi-triangle-fill"></i>
+            <span class="key-desc">CHEM 162</span>
           </dt>
           <dd class="col-sm-6 key-coi">COI: 2.7</dd>
           <dt class="col-sm-6">
-            <i class="bi bi-circle-fill"></i> <span  class="key-desc">Average course in CHEM curriculum</span>
+            <i class="bi bi-circle-fill"></i>
+            <span class="key-desc">Average course in CHEM curriculum</span>
           </dt>
           <dd class="col-sm-6 key-coi">COI: 2.0</dd>
           <dt class="col-sm-6">
-            <i class="bi bi-square-fill"></i> <span  class="key-desc">Average 100 Level Course at UW</span>
+            <i class="bi bi-square-fill"></i>
+            <span class="key-desc">Average 100 Level Course at UW</span>
           </dt>
           <dd class="col-sm-6 key-coi">COI: 1.8</dd>
         </dl>
@@ -41,6 +48,7 @@
 
 <script>
 import * as d3 from 'd3';
+import { Popover } from 'bootstrap';
 
 export default {
   name: 'OutcomeScore',
@@ -55,6 +63,7 @@ export default {
   },
   mounted() {
     this.generateRect();
+    var popover = new Popover(document.querySelector('.info-popper'));
   },
   methods: {
     generateRect() {
diff --git a/pathways_vue/components/major/common-courses.vue b/pathways_vue/components/major/common-courses.vue
index f214aafb..4ae395d5 100644
--- a/pathways_vue/components/major/common-courses.vue
+++ b/pathways_vue/components/major/common-courses.vue
@@ -12,7 +12,20 @@
       <table class="table table-borderless">
         <thead>
           <tr class="bg-light text-dark">
-            <th scope="col" style="width: 10%">% info</th>
+            <th scope="col" style="width: 10%">
+              %
+              <a
+                tabindex="0"
+                class="info-major-common"
+                role="button"
+                data-bs-toggle="popover"
+                data-bs-trigger="focus"
+                title="Percentage"
+                data-bs-content="Description of common courses for majors."
+              >
+                <i class="bi bi-info-circle-fill"></i>
+              </a>
+            </th>
             <th scope="col" class="visually-hidden" style="width: 30%">Percentage Graph</th>
             <th scope="col" style="width: 30%">Common Course</th>
             <th scope="col" style="width: 30%">CDI</th>
@@ -34,7 +47,9 @@
               </div>
             </td>
             <td>
-              <a href="/course/?code=CSS+415" class="router-link-active"><span class="badge bg-link-color text-light">CSS 415</span></a> 
+              <a href="/course/?code=CSS+415" class="router-link-active"
+                ><span class="badge bg-link-color text-light">CSS 415</span></a
+              >
               Preparation for General Chemistry
             </td>
             <td>5.55</td>
@@ -54,8 +69,10 @@
               </div>
             </td>
             <td>
-              <a href="/course/?code=MATH+124" class="router-link-active"><span class="badge bg-link-color text-light">MATH 124</span></a> Calculus
-              with Analytic Geometry I
+              <a href="/course/?code=MATH+124" class="router-link-active"
+                ><span class="badge bg-link-color text-light">MATH 124</span></a
+              >
+              Calculus with Analytic Geometry I
             </td>
             <td>3.51</td>
           </tr>
@@ -74,8 +91,10 @@
               </div>
             </td>
             <td>
-              <a href="/course/?code=CHEM+317" class="router-link-active"><span class="badge bg-link-color text-light">CHEM 317</span></a> Inorganic
-              Chemistry Laboratory
+              <a href="/course/?code=CHEM+317" class="router-link-active"
+                ><span class="badge bg-link-color text-light">CHEM 317</span></a
+              >
+              Inorganic Chemistry Laboratory
             </td>
             <td>7.2</td>
           </tr>
@@ -86,11 +105,16 @@
 </template>
 
 <script>
+import { Popover } from 'bootstrap';
+
 export default {
   name: 'CommonCourses',
   data() {
     return {};
   },
+  mounted() {
+    var popover = new Popover(document.querySelector('.info-major-common'));
+  },
   methods: {},
 };
 </script>
diff --git a/pathways_vue/pages/home.vue b/pathways_vue/pages/home.vue
index cf0849a3..f070715b 100644
--- a/pathways_vue/pages/home.vue
+++ b/pathways_vue/pages/home.vue
@@ -73,11 +73,6 @@
           >
             About this app <i class="bi bi-info-circle"></i>
           </button>
-
-          <div class="mt-3">
-            <button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
-          </div>
-
         </div>
       </div>
     </template>
@@ -93,7 +88,7 @@ import { proccessSeaMajors } from '../helpers/major';
 import Layout from '../layout.vue';
 import SearchChooser from '../components/search/chooser.vue';
 
-import { Modal, Popover } from 'bootstrap';
+import { Modal } from 'bootstrap';
 
 export default {
   components: {
@@ -111,13 +106,6 @@ export default {
   mounted() {
     // show the welcome modal when the component is mounted
     this.showWelcomeModal();
-
-    // enable popovers everywhere (from bs5 documentation)
-    var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
-    var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
-      return new Popover(popoverTriggerEl)
-    })
-
   },
   methods: {
     showWelcomeModal(event){