diff --git a/frontend/package.json b/frontend/package.json
index c8d92ab6..e230960b 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@bcgov/bc-sans": "^1.0.1",
+    "@braks/revue-draggable": "^0.4.2",
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/vue-fontawesome": "prerelease",
diff --git a/frontend/src/assets/css/main.css b/frontend/src/assets/css/main.css
index f646be7c..08a9c0f3 100644
--- a/frontend/src/assets/css/main.css
+++ b/frontend/src/assets/css/main.css
@@ -1,77 +1,81 @@
 /* Body */
 body {
-    background-color: #F1F1F1;
-    padding-bottom: 20px;
+  background-color: #f1f1f1;
+  padding-bottom: 20px;
 }
 
 hr {
-    background-color: #606060;
-    border: 1px solid #606060;
+  background-color: #606060;
+  border: 1px solid #606060;
+}
+
+th div {
+  float: left;
 }
 
 /* Main */
 main {
-    max-width: 1320px;
-    min-width: 1100px;
-    width: 100%;
-    min-height: calc(100vh - 168px);
-    margin: 0 auto;
-    padding: 20px 60px 60px 60px;
-    background-color: #FFFFFF;
+  max-width: 1320px;
+  min-width: 1100px;
+  width: 100%;
+  min-height: calc(100vh - 168px);
+  margin: 0 auto;
+  padding: 20px 60px 60px 60px;
+  background-color: #ffffff;
 }
 main .content {
-    padding: 0;
-    font-size: 1rem;
+  padding: 0;
+  font-size: 1rem;
 }
 main .content:after {
-    content: "";
-    display: table;
-    clear: both;
+  content: '';
+  display: table;
+  clear: both;
 }
 
 /* Sub groups */
 .subgroup {
-/*.v-card.subgroup*/ 
-    padding: 20px; margin:0px -20px 20px -20px; max-width: 110%;
+  padding: 20px;
+  margin: 0px -20px 20px -20px;
+  max-width: 110%;
 }
 .subgroup h2 {
-    font-weight: 100;
-    color: #999;
-    font-size: 24px;
-    line-height: 30px;
-    text-transform: uppercase;
-    margin-top: 0;
-    margin-bottom: 20px;
+  font-weight: 100;
+  color: #999;
+  font-size: 24px;
+  line-height: 30px;
+  text-transform: uppercase;
+  margin-top: 0;
+  margin-bottom: 20px;
 }
 
-/* Input */ 
+/* Input */
 input {
-    display: block;
-    width: 100%;
+  display: block;
+  width: 100%;
 }
 
 .checkbox-group .v-input--selection-controls {
-    margin-top: 8px;
-}
-
-/* Vuetify Components */
-/*.v-icon.v-icon {
-    vertical-align: baseline;
+  margin-top: 8px;
 }
-*/
 
 /* tables */
 .theme--light.v-data-table.base-table thead tr:last-child th {
-    border-top: 2px solid #003366;
-    border-bottom: 2px solid #003366;
+  border-top: 2px solid #003366;
+  border-bottom: 2px solid #003366;
 }
 
-.v-data-table td, .v-data-table th {
-    padding: 0 16px;
+.v-data-table td,
+.v-data-table th {
+  padding: 0 16px;
 }
 .select-table tr {
-    cursor: pointer;
+  cursor: pointer;
 }
 .select-table tr.v-data-table__empty-wrapper {
-    cursor: default;
+  cursor: default;
+}
+
+.flex {
+  display: flex;
 }
diff --git a/frontend/src/components/ui/AppCheckbox.vue b/frontend/src/components/ui/AppCheckbox.vue
index 9f80df9a..926ab8a4 100644
--- a/frontend/src/components/ui/AppCheckbox.vue
+++ b/frontend/src/components/ui/AppCheckbox.vue
@@ -40,10 +40,11 @@ export default {
   display: block;
   position: relative;
   padding-left: 25px;
-  margin-bottom: 12px;
+  margin: 5px 0px 7px 3px;
   cursor: pointer;
-  font-family: ‘BCSans’, ‘Noto Sans’, Verdana, Arial, sans-serif;
+  font-family: 'BCSans', 'Noto Sans', Verdana, Arial, sans-serif;
   font-size: 16px;
+  font-weight: 400;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -62,7 +63,7 @@ export default {
 /* Create a custom checkbox */
 .checkmark {
   position: absolute;
-  top: 0;
+  top: 3px;
   left: 0;
   height: 16px;
   width: 16px;
diff --git a/frontend/src/components/ui/AppDateInput.vue b/frontend/src/components/ui/AppDateInput.vue
index 604619fe..222a9d86 100644
--- a/frontend/src/components/ui/AppDateInput.vue
+++ b/frontend/src/components/ui/AppDateInput.vue
@@ -1,9 +1,7 @@
 <template>
   <div class="text_label">
     <label>{{ label }}</label>
-    <AppTooltip v-if="tooltip" :tooltipText="tooltipText">
-      <font-awesome-icon class="tooltip-icon" icon="question-circle" />
-    </AppTooltip>
+    <AppTooltip v-if="$slots.tooltip"><slot name="tooltip"></slot></AppTooltip>
   </div>
   <div v-bind="$attrs">
     <Datepicker :autoApply="true" :class="inputClass" :enableTimePicker="false" :format="inputDateFormat" :placeholder="placeholder" :text-input="true" :monthPicker="$attrs.monthPicker" :uid="$attrs.id" v-model="value" />
@@ -37,8 +35,6 @@ export default {
       default: OUTPUT_DATE_FORMAT,
       type: String,
     },
-    tooltip: Boolean,
-    tooltipText: String,
   },
   computed: {
     value: {
diff --git a/frontend/src/components/ui/AppHelp.vue b/frontend/src/components/ui/AppHelp.vue
new file mode 100644
index 00000000..a60f3e8d
--- /dev/null
+++ b/frontend/src/components/ui/AppHelp.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="instructions">
+    <a href="#" id="show-modal" @click="showModal = true">Instructions</a>
+  </div>
+  <Teleport to="body">
+    <!-- use the modal component, pass in the prop -->
+    <AppModal :show="showModal" @close="showModal = false">
+      <template #header>
+        <h3>Instructions</h3>
+      </template>
+      <template #body>
+        <slot></slot>
+      </template>
+      <template #footer></template>
+    </AppModal>
+  </Teleport>
+</template>
+<script>
+import AppModal from './AppModal.vue'
+export default {
+  name: 'AppHelp',
+  components: { AppModal },
+  data() {
+    return {
+      showModal: false,
+    }
+  },
+}
+</script>
+<style scoped>
+.instructions {
+  float: right;
+}
+</style>
diff --git a/frontend/src/components/ui/AppInput.vue b/frontend/src/components/ui/AppInput.vue
index 9d768bfb..4025cf3f 100644
--- a/frontend/src/components/ui/AppInput.vue
+++ b/frontend/src/components/ui/AppInput.vue
@@ -3,20 +3,23 @@ import AppInputError from './AppInputError.vue'
 </script>
 
 <template>
-
   <div class="text_label">
-    <label>{{label}}</label>
+    <label>{{ label }}</label>
+    <AppTooltip v-if="$slots.tooltip">
+      <slot name="tooltip"></slot>
+    </AppTooltip>
   </div>
 
-  <input :class="inputClass" :value="modelValue" @input='$emit("update:modelValue", $event.target.value)' v-bind="$attrs"/>
-  
-  <AppInputError :e-model="eModel" :label="label"/>
-  
+  <input :class="inputClass" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" v-bind="$attrs" />
+
+  <AppInputError :e-model="eModel" :label="label" />
 </template>
 
 <script>
+import AppTooltip from './AppTooltip.vue'
 export default {
   name: 'AppInput',
+  components: { AppTooltip },
   props: {
     eModel: {
       type: Object,
@@ -28,11 +31,11 @@ export default {
   computed: {
     inputClass() {
       return {
-        'text_input': true,
-        'error-input' : this.eModel?.$error,
+        text_input: true,
+        'error-input': this.eModel?.$error,
       }
-    }
-  }
+    },
+  },
 }
 </script>
 
@@ -51,8 +54,8 @@ export default {
   padding: 5px 5px 5px 7px;
 }
 
-.text_input[type="text"]:focus {
-  outline: 2px solid #3B99FC;
+.text_input[type='text']:focus {
+  outline: 2px solid #3b99fc;
   outline-offset: 1px;
 }
 
@@ -61,7 +64,6 @@ export default {
 }
 
 .error-input {
-  border-color: #D8292F !important;
+  border-color: #d8292f !important;
 }
-
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/components/ui/AppModal.vue b/frontend/src/components/ui/AppModal.vue
new file mode 100644
index 00000000..6f014559
--- /dev/null
+++ b/frontend/src/components/ui/AppModal.vue
@@ -0,0 +1,107 @@
+<template>
+  <Transition name="modal">
+    <div v-if="show" class="modal-mask" @keydown.esc="$emit('close')" tabindex="0">
+      <div class="modal-wrapper">
+        <div class="modal-container" v-draggable="">
+          <div class="modal-header">
+            <slot name="header"></slot>
+          </div>
+
+          <div class="modal-body">
+            <slot name="body"></slot>
+          </div>
+
+          <div class="modal-footer">
+            <slot name="footer">
+              <AppButton class="modal-default-button" mode="secondary" @click="$emit('close')">OK</AppButton>
+            </slot>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Transition>
+</template>
+<script>
+export default {
+  props: {
+    show: Boolean,
+  },
+}
+</script>
+
+<style>
+.modal-mask {
+  position: fixed;
+  z-index: 9998;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: table;
+  transition: opacity 0.3s ease;
+}
+
+.modal-wrapper {
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.modal-container {
+  width: 600px;
+  margin: 0px auto;
+  padding: 20px 30px;
+  background-color: #fff;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
+  transition: all 0.3s ease;
+  cursor: grab;
+  max-height: 600px;
+  overflow: auto;
+}
+
+.modal-header h3 {
+  margin-top: 0;
+  color: #003366;
+}
+
+.modal-body {
+  margin: 20px 0;
+}
+
+.modal-footer {
+  padding-bottom: 40px;
+}
+
+.modal-default-button {
+  float: right;
+}
+
+:slotted(ul) {
+  list-style: disc;
+  margin-left: 20px;
+}
+
+/*
+ * The following styles are auto-applied to elements with
+ * transition="modal" when their visibility is toggled
+ * by Vue.js.
+ *
+ * You can easily play with the modal transition by editing
+ * these styles.
+ */
+
+.modal-enter-from {
+  opacity: 0;
+}
+
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-enter-from .modal-container,
+.modal-leave-to .modal-container {
+  -webkit-transform: scale(1.1);
+  transform: scale(1.1);
+}
+</style>
diff --git a/frontend/src/components/ui/AppOutput.vue b/frontend/src/components/ui/AppOutput.vue
index e610c8e9..57e6c307 100644
--- a/frontend/src/components/ui/AppOutput.vue
+++ b/frontend/src/components/ui/AppOutput.vue
@@ -1,26 +1,27 @@
 <template>
-
   <div class="text_label">
-    <label>{{label}}</label>
+    <label>{{ label }}</label>
+    <AppTooltip v-if="$slots.tooltip">
+      <slot name="tooltip"></slot>
+    </AppTooltip>
   </div>
-  <span>{{value}}</span>
-  
+  <span>{{ value }}</span>
 </template>
 
 <script>
-  export default {
-    name: 'AppOutput',
-    props: {
-      label: String,
-      value: String,
-    },
-  }
+import AppTooltip from './AppTooltip.vue'
+export default {
+  name: 'AppOutput',
+  components: { AppTooltip },
+  props: {
+    label: String,
+    value: String,
+  },
+}
 </script>
 
 <style scoped>
-
-  .text_label {
-    display: flex;
-  }
-
-</style>
\ No newline at end of file
+.text_label {
+  display: flex;
+}
+</style>
diff --git a/frontend/src/components/ui/AppRadioButtonGroup.vue b/frontend/src/components/ui/AppRadioButtonGroup.vue
index 52d4d9a3..6c4842b6 100644
--- a/frontend/src/components/ui/AppRadioButtonGroup.vue
+++ b/frontend/src/components/ui/AppRadioButtonGroup.vue
@@ -2,8 +2,8 @@
   <div>
     <div class="text_label">
       <label>{{ label }}</label>
-      <AppTooltip v-if="tooltip" :tooltipText="tooltipText">
-        <font-awesome-icon class="tooltip-icon" icon="question-circle" />
+      <AppTooltip v-if="$slots.tooltip">
+        <slot name="tooltip"></slot>
       </AppTooltip>
     </div>
     <div :class="groupClass">
@@ -34,8 +34,6 @@ export default {
     label: String,
     modelValue: String,
     group: Array,
-    tooltip: Boolean,
-    tooltipText: String,
   },
   watch: {
     modelValue: function (val) {
diff --git a/frontend/src/components/ui/AppTooltip.vue b/frontend/src/components/ui/AppTooltip.vue
index d832fc3e..bc999fc6 100644
--- a/frontend/src/components/ui/AppTooltip.vue
+++ b/frontend/src/components/ui/AppTooltip.vue
@@ -1,37 +1,72 @@
 <template>
   <div class="tooltip">
-    <slot></slot>
-    <span class="tooltiptext">{{ tooltipText }}</span>
+    <font-awesome-icon class="tooltip-icon" icon="question-circle" />
+    <div :class="tooltipTextClass"><slot></slot></div>
   </div>
 </template>
 
 <script>
 export default {
-  name: "AppTooltip",
+  name: 'AppTooltip',
   props: {
-    tooltipText: String,
+    mode: {
+      type: String,
+      default: 'normal',
+    },
+  },
+  computed: {
+    tooltipTextClass() {
+      return {
+        tooltiptext: true,
+        'tooltip-normal': this.mode === '' || this.mode === 'normal',
+        'tooltip-header': this.mode === 'header',
+      }
+    },
   },
 }
 </script>
 
 <style scoped>
+.tooltip .tooltiptext {
+  visibility: hidden;
+  text-align: left;
+  padding: 5px;
+  margin-left: 5px;
+  max-width: 500px;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
+
+  /* Position the tooltip */
+  position: absolute;
+  z-index: 1;
+}
+.tooltip-normal {
+  background-color: #38598a;
+  color: #ffffff;
+  opacity: 0.9;
+}
 
-  .tooltip .tooltiptext {
-    visibility: hidden;
-    background-color: #38598A;
-    opacity: 0.90;
-    color: #fff;
-    text-align: center;
-    border-radius: 6px;
-    padding: 5px;
-    margin-left: 5px;
-
-    /* Position the tooltip */
-    position: absolute;
-    z-index: 1;
-  }
-
-  .tooltip:hover .tooltiptext {
-    visibility: visible;
-  }
-</style>
\ No newline at end of file
+:slotted(.tooltip-normal p) {
+  color: #ffffff;
+}
+
+.tooltip-header {
+  background-color: #ffffff;
+  color: #000000;
+  font-weight: normal;
+  opacity: 1;
+}
+
+:slotted(.tooltip-header p) {
+  color: #000000;
+}
+
+.tooltip:hover .tooltiptext {
+  visibility: visible;
+}
+
+:slotted(li) {
+  list-style: disc;
+  margin-left: 20px;
+}
+</style>
diff --git a/frontend/src/components/ui/YesNoRadioButtonGroup.vue b/frontend/src/components/ui/YesNoRadioButtonGroup.vue
index 4a0716ad..67ad4ccc 100644
--- a/frontend/src/components/ui/YesNoRadioButtonGroup.vue
+++ b/frontend/src/components/ui/YesNoRadioButtonGroup.vue
@@ -1,5 +1,7 @@
 <template>
-  <AppRadioButtonGroup :e-model="eModel" :id="id" :label="label" :group="this.YES_NO_RADIO_BUTTON_GROUP" :tooltip="tooltip" :tooltipText="tooltipText" v-model="modelValue" />
+  <AppRadioButtonGroup :e-model="eModel" :id="id" :label="label" :group="this.YES_NO_RADIO_BUTTON_GROUP" v-model="modelValue">
+    <template #tooltip><slot name="tooltip"></slot></template>
+  </AppRadioButtonGroup>
 </template>
 
 <script>
@@ -15,8 +17,6 @@ export default {
     label: { default: 'Choose Yes or No', type: String },
     id: { default: 'yesNo', type: String },
     modelValue: String,
-    tooltip: Boolean,
-    tooltipText: String,
   },
   created() {
     this.YES_NO_RADIO_BUTTON_GROUP = [
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 2410cb77..b88a08fc 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -3,6 +3,7 @@ import '@bcgov/bc-sans/css/BCSans.css'
 import { createPinia } from 'pinia'
 import { createApp } from 'vue'
 
+import { DraggablePlugin } from '@braks/revue-draggable'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faBullhorn, faCheckCircle, faChevronDown, faExclamationCircle, faExclamationTriangle, faExternalLinkAlt, faInfoCircle, faQuestionCircle, faSpinner, faTimes, faTrashAlt } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
@@ -61,6 +62,8 @@ function initApp(permissions) {
   const router = createRouter(app)
   app.use(router)
 
+  app.use(DraggablePlugin)
+
   app.config.globalProperties.$keycloak = keycloak
 
   library.add(faBullhorn)
diff --git a/frontend/src/views/eligibility/CheckEligibility.vue b/frontend/src/views/eligibility/CheckEligibility.vue
index c132c8d1..cdaefe0e 100644
--- a/frontend/src/views/eligibility/CheckEligibility.vue
+++ b/frontend/src/views/eligibility/CheckEligibility.vue
@@ -1,4 +1,14 @@
 <template>
+  <AppHelp>
+    <p>Use Check Eligibility to determine if a person is a beneficiary of the Medical Services Plan (MSP) on a particular date of service. Check Eligibility returns a "Yes" or "No" for the Personal Health Number (PHN) submitted.</p>
+    <ul>
+      <li>
+        A "Yes" response means that, when checked today, the person is eligible on the "Date to Check" date. The person could subsequently become ineligible for service on that date. If a fee-for-service claim is involved, you may wish to use the MSP Teleplan system or Claims IVR to verify
+        eligibility.
+      </li>
+      <li>If the response is "No", the screen will return additional information about why the coverage was terminated and instructions that should be provided to the individual. If the individual is subject to alternate billing (RCMP or Armed Forces), this information will also be displayed.</li>
+    </ul>
+  </AppHelp>
   <div>
     <form @submit.prevent="submitForm">
       <AppRow>
@@ -48,6 +58,7 @@
 
 <script>
 import AppCard from '../../components/ui/AppCard.vue'
+import AppHelp from '../../components/ui/AppHelp.vue'
 import EligibilityService from '../../services/EligibilityService'
 import useVuelidate from '@vuelidate/core'
 import { validatePHN, VALIDATE_PHN_MESSAGE } from '../../util/validators'
@@ -60,6 +71,7 @@ export default {
   name: 'CheckEligibility',
   components: {
     AppCard,
+    AppHelp,
   },
   setup() {
     return {
@@ -83,6 +95,7 @@ export default {
         status: '',
         message: '',
       },
+      showModal: false,
     }
   },
   computed: {
diff --git a/frontend/src/views/eligibility/CoverageStatusCheck.vue b/frontend/src/views/eligibility/CoverageStatusCheck.vue
index 31d8a749..6532da72 100644
--- a/frontend/src/views/eligibility/CoverageStatusCheck.vue
+++ b/frontend/src/views/eligibility/CoverageStatusCheck.vue
@@ -1,9 +1,20 @@
 <template>
+  <AppHelp
+    ><p>MSP Direct Coverage Status Check provides the same functionality as the Medical Services Plan (MSP) Teleplan system and Claims IVR.</p>
+    <p>Use the MSP Coverage Status Check to check if a person is eligible to have their claim for a health service paid by the MSP. The MSP Coverage Status Check returns a "YES" or "NO" answer for the Personal Health Number (PHN) submitted</p>
+    <p>As well as checking eligibility, you can use the MSP Coverage Status Check to submit one or more requests (Patient Status answers are only returned if the person is eligible "YES" eligibility response)</p>
+    <p>
+      Edit error messages appear on the input screen and tell you what fields need correcting. These will be mandatory fields that have been left blank or fields that have been completed with invalid data. Make the necessary correction(s) on the input screen and click Submit to resubmit the business
+      service.
+    </p></AppHelp
+  >
   <div>
     <form @submit.prevent="submitForm">
       <AppRow>
         <AppCol class="col3">
-          <AppInput :e-model="v$.phn" id="phn" label="PHN" type="text" v-model.trim="phn" />
+          <AppInput :e-model="v$.phn" id="phn" label="PHN" tooltip type="text" v-model.trim="phn">
+            <template #tooltip>Enter the individual’s 10 digit PHN. PHN is a mandatory field. If you leave it blank or enter invalid characters, an edit error message box will be displayed on the input screen.</template>
+          </AppInput>
         </AppCol>
       </AppRow>
       <AppRow>
@@ -13,18 +24,32 @@
       </AppRow>
       <AppRow>
         <AppCol class="col3">
-          <AppDateInput :e-model="v$.dateOfService" id="dateOfService" label="Date Of Service" v-model="dateOfService" />
+          <AppDateInput :e-model="v$.dateOfService" id="dateOfService" label="Date Of Service" v-model="dateOfService">
+            <template #tooltip>The Date of Service defaults on the screen to today's date. The year (CCYY), month (MM) and day (DD) can be overridden. If you override the date with another date, it cannot be greater than today's date or more than 18 months in the past.</template>
+          </AppDateInput>
         </AppCol>
       </AppRow>
       <AppRow>
-        <AppCol class="col4">
-          <h3>Patient Status Request</h3>
-          <p>Select by clicking one or more boxes</p>
-        </AppCol>
-        <AppCol>
-          <AppCheckbox id="checkSubsidyInsuredService" label="Check for Subsidy Insured Service" v-model="checkSubsidyInsuredService" />
-          <AppCheckbox id="checkLastEyeExam" label="Check for Last Eye Exam" v-model="checkLastEyeExam" />
+        <AppCol class="col4 flex">
+          <div class="flex">
+            <h4>Patient Status Request</h4>
+            <AppTooltip>
+              <p>
+                Subsidy Insured Service: the screen will display whether MSP pays for Subsidy Insured Services for this PHN, including the number of services last paid to date, whether the beneficiary must pay, the number of paid services by calendar year. This information will be of interest to
+                supplementary benefits providers.
+              </p>
+              <p>
+                Last Eye Exam: the screen will return the date of the last paid eye exam for this PHN within the last 24 months. This information will be of interest to those performing eye exams. Patient Restriction:, if the patient has been restricted to a single general practitioner, the MSP
+                Coverage Status Check will advise you to review the MSP Bulletin.
+              </p>
+            </AppTooltip>
+          </div>
+          <div class="checkbox-group">
+            <AppCheckbox id="checkSubsidyInsuredService" label="Check for Subsidy Insured Service" v-model="checkSubsidyInsuredService" />
+            <AppCheckbox id="checkLastEyeExam" label="Check for Last Eye Exam" v-model="checkLastEyeExam" />
+          </div>
         </AppCol>
+        <AppCol> </AppCol>
       </AppRow>
       <AppRow>
         <AppButton :submitting="searching" mode="primary" type="submit">Submit</AppButton>
@@ -54,7 +79,14 @@
         <AppOutput label="Date Of Service" :value="result.dateOfService" />
       </AppCol>
       <AppCol class="col3">
-        <AppOutput label="Eligible on Date of Service?" :value="eligibleOnDateOfService" />
+        <AppOutput label="Eligible on Date of Service?" :value="eligibleOnDateOfService">
+          <template #tooltip
+            ><p>If the response is "YES", the person is eligible to have their claim for that date of service paid by MSP.</p>
+            <p>
+              If the response is "No", the screen will return additional information about why the coverage was terminated and instructions that should be provided to the individual If the individual is subject to alternate billing (RCMP or Armed Forces), this information will also be displayed
+            </p></template
+          >
+        </AppOutput>
       </AppCol>
       <AppCol class="col3">
         <AppOutput label="Coverage End Date" :value="result.coverageEndDate" />
@@ -95,6 +127,8 @@
 <script>
 import AppCard from '../../components/ui/AppCard.vue'
 import AppCheckbox from '../../components/ui/AppCheckbox.vue'
+import AppHelp from '../../components/ui/AppHelp.vue'
+import AppTooltip from '../../components/ui/AppTooltip.vue'
 import EligibilityService from '../../services/EligibilityService'
 import useVuelidate from '@vuelidate/core'
 import { validateDOB, validatePHN, VALIDATE_DOB_MESSAGE, VALIDATE_PHN_MESSAGE } from '../../util/validators'
@@ -106,7 +140,7 @@ import { useAlertStore } from '../../stores/alert.js'
 
 export default {
   name: 'CoverageStatusCheck',
-  components: { AppCard, AppCheckbox },
+  components: { AppCard, AppCheckbox, AppHelp, AppTooltip },
   setup() {
     return {
       alertStore: useAlertStore(),
@@ -283,3 +317,8 @@ export default {
   },
 }
 </script>
+<style>
+.checkbox-group {
+  margin-bottom: 10px;
+}
+</style>
diff --git a/frontend/src/views/eligibility/PhnInquiry.vue b/frontend/src/views/eligibility/PhnInquiry.vue
index b8d3c66d..3b6321f2 100644
--- a/frontend/src/views/eligibility/PhnInquiry.vue
+++ b/frontend/src/views/eligibility/PhnInquiry.vue
@@ -1,4 +1,11 @@
 <template>
+  <AppHelp
+    ><p>
+      Use PHN Inquiry to verify an individual's name, birthdate, gender, and to check their eligibility for Medical Services Plan (MSP) coverage. Access to PHN Inquiry is available to authorized users within both EMPLOYER organizations and HEALTH AUTHORITIES. Please look for notes of special
+      interest to either EMPLOYERS or HEALTH AUTHORITIES.
+    </p>
+    <p>HEALTH AUTHORITIES and HEALTH CARE PROVIDERS: If "N" response is received, use MSP Coverage Status Check to check eligibility.</p>
+  </AppHelp>
   <div>
     <p>Enter 1 or more PHNs</p>
     <form @submit.prevent="submitForm">
@@ -54,12 +61,48 @@
     <AppSimpleTable id="resultsTable">
       <thead>
         <tr>
-          <th>PHN</th>
+          <th>
+            <div>PHN</div>
+            <AppTooltip mode="header">
+              <p>
+                Each PHN is processed individually.<br />
+                Unsuccesfully processed PHNs appear with an error message, at the top of the response screen.<br />
+                Successfully processed PHNs are displayed in the order they were entered. Each has two lines, given name, birthdate, gender, ELIGIBILITY status, and STUDENT status if applicable.
+              </p>
+            </AppTooltip>
+          </th>
           <th>Name</th>
           <th>Date of Birth</th>
           <th>Gender</th>
-          <th>Eligible</th>
-          <th>Student</th>
+          <th>
+            <div>Eligible</div>
+            <AppTooltip mode="header">
+              <p>"Eligible = Y" means that when checked today, the person is eligible for MSP.</p>
+              <ul>
+                <li>EMPLOYERS - if Y and this is a new employee or dependent, you can add them to your group account using the Add Group Member or Add Dependent.</li>
+                <li>HEALTH AUTHORITIES - although eligible today, a person could subsequently become ineligible for service on today's date. If a fee-for-service claim is involved, you may wish to use the MSP Teleplan system or Claims IVR to verify eligibility.</li>
+              </ul>
+              <br />
+              <p>
+                "Eligible = N" means the person was enrolled in MSP in the past, but is NOT eligible for publicly funded health care as of today's date. This person may have moved away from BC, opted out of MSP, joined the Armed Forces or RCMP, or may hold expired temporary immigration documents.
+                Any ‘N’ you receive must also be confirmed using the MSP Coverage Status Check business service.
+              </p>
+              <ul>
+                <li>EMPLOYERS - if this person is a new employee or dependent who has moved back to BC, they will have to re-enroll. An MSP application or change form, with copies of foundation documents, must be submitted. Otherwise, contact the Help Desk.</li>
+                <li>HEALTH AUTHORITIES - if you need to know WHY a client is not eligible, use the Check Eligibility business service.</li>
+              </ul>
+            </AppTooltip>
+          </th>
+
+          <th>
+            <div>Student</div>
+            <AppTooltip mode="header">
+              <p>Student status, whether "Yes" or "No" does not affect eligibility for publicly funded health care.</p>
+              <ul>
+                <li>EMPLOYERS - you need to know student status if you are planning to add a dependent aged 19 to 24 to an employee's coverage.</li>
+              </ul>
+            </AppTooltip>
+          </th>
         </tr>
       </thead>
       <tbody>
@@ -72,6 +115,8 @@
 </template>
 
 <script>
+import AppHelp from '../../components/ui/AppHelp.vue'
+import AppTooltip from '../../components/ui/AppTooltip.vue'
 import AppSimpleTable from '../../components/ui/AppSimpleTable.vue'
 import EligibilityService from '../../services/EligibilityService'
 import PhnInquiryBeneficiary from '../../components/eligibility/PhnInquiryBeneficiary.vue'
@@ -83,7 +128,9 @@ import { useAlertStore } from '../../stores/alert.js'
 export default {
   name: 'PhnInquiry',
   components: {
+    AppHelp,
     AppSimpleTable,
+    AppTooltip,
     PhnInquiryBeneficiary,
   },
   setup() {
diff --git a/frontend/src/views/groupmember/AddDependent.vue b/frontend/src/views/groupmember/AddDependent.vue
index e9aa7fa5..fc9e0875 100644
--- a/frontend/src/views/groupmember/AddDependent.vue
+++ b/frontend/src/views/groupmember/AddDependent.vue
@@ -6,7 +6,9 @@
           <AppInput :e-model="v$.groupNumber" id="groupNumber" label="Group Number" type="text" v-model.trim="groupNumber" />
         </AppCol>
         <AppCol class="col4">
-          <AppDateInput :e-model="v$.coverageEffectiveDate" id="coverageEffectiveDate" label="Coverage Effective Date" tooltip tooltipText="Day always defaults to 1st of month" monthPicker inputDateFormat="yyyyMM" placeholder="YYYYMM" v-model="coverageEffectiveDate" />
+          <AppDateInput :e-model="v$.coverageEffectiveDate" id="coverageEffectiveDate" label="Coverage Effective Date" monthPicker inputDateFormat="yyyyMM" placeholder="YYYYMM" v-model="coverageEffectiveDate">
+            <template #tooltip>Day always defaults to 1st of month</template>
+          </AppDateInput>
         </AppCol>
       </AppRow>
       <AppRow>
@@ -24,7 +26,9 @@
       </AppRow>
       <AppRow>
         <AppCol class="col6">
-          <YesNoRadioButtonGroup :e-model="v$.isStudent" id="isStudent" label="Is this Dependent attending a Canadian Educational Institution?" tooltip tooltipText="Click either Yes or No" v-model="isStudent" />
+          <YesNoRadioButtonGroup :e-model="v$.isStudent" id="isStudent" label="Is this Dependent attending a Canadian Educational Institution?" v-model="isStudent">
+            <template #tooltip> Click either Yes or No </template>
+          </YesNoRadioButtonGroup>
         </AppCol>
       </AppRow>
       <AppRow>
diff --git a/frontend/src/views/groupmember/AddGroupMember.vue b/frontend/src/views/groupmember/AddGroupMember.vue
index 5869935f..037d41ca 100644
--- a/frontend/src/views/groupmember/AddGroupMember.vue
+++ b/frontend/src/views/groupmember/AddGroupMember.vue
@@ -6,7 +6,9 @@
           <AppInput :e-model="v$.groupNumber" id="groupNumber" label="Group Number" type="text" v-model.trim="groupNumber" />
         </AppCol>
         <AppCol class="col3">
-          <AppDateInput :e-model="v$.coverageEffectiveDate" id="coverageEffectiveDate" label="Coverage Effective Date" tooltip tooltipText="Date always defaults to first day of the month" monthPicker inputDateFormat="yyyy-MM" placeholder="YYYY-MM" v-model="coverageEffectiveDate" />
+          <AppDateInput :e-model="v$.coverageEffectiveDate" id="coverageEffectiveDate" label="Coverage Effective Date" monthPicker inputDateFormat="yyyy-MM" placeholder="YYYY-MM" v-model="coverageEffectiveDate">
+            <template #tooltip>Date always defaults to first day of the month</template>
+          </AppDateInput>
         </AppCol>
       </AppRow>
       <AppRow>
diff --git a/frontend/src/views/groupmember/CancelDependent.vue b/frontend/src/views/groupmember/CancelDependent.vue
index 34b906a7..9ce2e79b 100644
--- a/frontend/src/views/groupmember/CancelDependent.vue
+++ b/frontend/src/views/groupmember/CancelDependent.vue
@@ -23,7 +23,9 @@
       </AppRow>
       <AppRow>
         <AppCol class="col3">
-          <AppDateInput :e-model="v$.cancelDate" id="cancelDate" label="Coverage Cancel Date" tooltip tooltipText="Date always defaults to last day of the month" monthPicker inputDateFormat="yyyy-MM" placeholder="YYYY-MM" v-model="cancelDate" />
+          <AppDateInput :e-model="v$.cancelDate" id="cancelDate" label="Coverage Cancel Date" monthPicker inputDateFormat="yyyy-MM" placeholder="YYYY-MM" v-model="cancelDate">
+            <template #tooltip> Date always defaults to last day of the month </template>
+          </AppDateInput>
         </AppCol>
       </AppRow>
       <AppRow>
diff --git a/frontend/src/views/groupmember/CancelGroupMember.vue b/frontend/src/views/groupmember/CancelGroupMember.vue
index 2e7f83da..95bc132d 100644
--- a/frontend/src/views/groupmember/CancelGroupMember.vue
+++ b/frontend/src/views/groupmember/CancelGroupMember.vue
@@ -13,7 +13,9 @@
       </AppRow>
       <AppRow>
         <AppCol class="col3">
-          <AppDateInput :e-model="v$.cancelDate" id="cancelDate" label="Coverage Cancel Date" tooltip tooltipText="Date always defaults to last day of the month" monthPicker inputDateFormat="yyyy-MM" placeholder="YYYY-MM" v-model="cancelDate" />
+          <AppDateInput :e-model="v$.cancelDate" id="cancelDate" label="Coverage Cancel Date" monthPicker inputDateFormat="yyyy-MM" placeholder="YYYY-MM" v-model="cancelDate">
+            <template #tooltip> Date always defaults to last day of the month </template>
+          </AppDateInput>
         </AppCol>
       </AppRow>
       <AppRow>