diff --git a/jest.config.js b/jest.config.js
index 7a8b2eb2b..3e5462315 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -26,6 +26,7 @@ module.exports = {
     "!src/layouts/payment-pia-return/*.vue", // Temp test exclusion while in development
     "!src/layouts/insurance/*.vue", // Temp test exclusion while in development
     "!src/layouts/insurance-company/*.vue", // Temp test exclusion while in development
+    "!src/layouts/insurance-company/insurance-company-question/*.vue", // Temp test exclusion while in development
     // END
   ], // ! means exclude from coverage.
   testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],
diff --git a/src/layouts/insurance-company/insurance-company-question.spec.js b/src/layouts/insurance-company/insurance-company-question.spec.js
new file mode 100644
index 000000000..f79d22cae
--- /dev/null
+++ b/src/layouts/insurance-company/insurance-company-question.spec.js
@@ -0,0 +1,3 @@
+describe("insurance-company-question.vue", () => {
+    it.todo("Some test for the future");
+});
diff --git a/src/layouts/insurance-company/insurance-company-question.vue b/src/layouts/insurance-company/insurance-company-question.vue
new file mode 100644
index 000000000..b69a77d49
--- /dev/null
+++ b/src/layouts/insurance-company/insurance-company-question.vue
@@ -0,0 +1,191 @@
+<template>
+    <textboxQuestion
+        v-model="selectedAccountNumber"
+        customInputId="autocomplete"
+        class="mb-4 mt-5"
+        cmsWidgetName="InsuranceCoQuestionWidget"
+        includeSearchIcon />
+</template>
+
+<script>
+// Components
+import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
+
+// Supporting files
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+import { storeActions } from "@/constants/store-actions";
+import { Form, defineRule } from "vee-validate";
+import baseMixin from "@/mixins/base-mixin.js";
+import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
+import $ from "jquery";
+
+// MAPPNG
+const termMapping = [
+    {
+        term: "1ST",
+        altTerm: "FIRST",
+    },
+    {
+        term: "FIRST",
+        altTerm: "1ST",
+    },
+    {
+        term: "AAA",
+        altTerm: "American",
+    },
+];
+
+export default {
+    name: "insurance-company-question",
+    props: {
+        originalList: Array,
+        modelValue: String,
+    },
+    data() {
+        return {
+            selectedAccountName: "",
+        };
+    },
+    computed: {
+        selectedAccountNumber: {
+            get: function () {
+                if (this.selectedAccountName.length > 0) {
+                    return this.selectedAccountName;
+                } else {
+                    return this.modelValue?.toString();
+                }
+            },
+            set: function (newValue) {
+                this.$emit("update:modelValue", newValue);
+            },
+        },
+        searchableInsuranceCompanyList() {
+            return this.originalList.map((insuranceCompany) => {
+                insuranceCompany.altTerms = "";
+
+                termMapping.forEach((matchingTerm) => {
+                    if (
+                        insuranceCompany.accountName
+                            .toUpperCase()
+                            .includes(matchingTerm.term.toUpperCase())
+                    ) {
+                        insuranceCompany.altTerms =
+                            insuranceCompany.altTerms + matchingTerm.altTerm?.toUpperCase() + " ";
+                    }
+                });
+                return insuranceCompany;
+            });
+        },
+    },
+    methods: {
+        findMatches(request, response) {
+            const matches = [];
+            const term = request?.term?.toUpperCase();
+            this.searchableInsuranceCompanyList.forEach((company, index) => {
+                if (
+                    company.accountName.indexOf(term) !== -1 ||
+                    company.altTerms.indexOf(term) !== -1
+                ) {
+                    matches.push(company.accountName);
+                }
+            });
+            response(matches);
+        },
+        selectParentAccountNumber(parentAccountName) {
+            if (!this.searchableInsuranceCompanyList) {
+                console.error("No insurance companies found");
+                return;
+            }
+
+            const selectedItem = this.searchableInsuranceCompanyList.filter((item) => {
+                return item.accountName === parentAccountName;
+            });
+
+            if (selectedItem) {
+                this.selectedAccountName = parentAccountName;
+                this.selectedAccountNumber = selectedItem[0].parentAccountNumber;
+            } else {
+                console.error("Error locating " + parentAccountName);
+            }
+        },
+    },
+    mounted() {
+        const select = this.selectParentAccountNumber;
+        setTimeout(() => {
+            $("#autocomplete").autocomplete({
+                source: this.findMatches,
+                position: {
+                    my: "left top+6",
+                },
+                minLength: 0, // Necessary to display fmenu when clearing input
+
+                // Bold matching letters as you type in the input
+                search: function (event, ui) {
+                    setTimeout(() => {
+                        let w = $(this).autocomplete("widget").find("div");
+                        let regExpString = "(" + this.value + ")";
+                        let re = new RegExp(regExpString, "i");
+                        w.html((i, html) =>
+                            html.replace(re, "<span style='font-weight: bold;'>$1</span>")
+                        );
+                    }, 5);
+                },
+                select: function (event, ui) {
+                    select(ui.item.value);
+                },
+            });
+        }, 0);
+    },
+    components: {
+        textboxQuestion,
+    },
+};
+</script>
+
+<style lang="scss">
+ul {
+    &.ui-autocomplete {
+        position: absolute;
+        list-style-type: none;
+        margin: 0;
+        padding: 0.25rem;
+        background: $white;
+        border: 1px solid $gray;
+        border-radius: 0.25rem;
+        height: auto;
+        max-height: 50%;
+        overflow: auto;
+        li {
+            &:hover,
+            .ui-state-active {
+                background-color: $gray-100;
+                cursor: pointer;
+            }
+            .ui-menu-item-wrapper {
+                border: 1px solid transparent;
+                border-radius: 2px;
+                padding-left: 0.25rem;
+                span {
+                    font-weight: 600;
+                }
+                &.ui-state-active {
+                    border: 1px solid $gray-200;
+                    border-radius: 2px;
+                    font-weight: 600;
+                }
+            }
+        }
+    }
+}
+.ui-helper-hidden-accessible {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+}
+</style>
diff --git a/src/layouts/insurance-company/insurance-company-spec.js b/src/layouts/insurance-company/insurance-company-spec.js
index e69de29bb..bd932b7d2 100644
--- a/src/layouts/insurance-company/insurance-company-spec.js
+++ b/src/layouts/insurance-company/insurance-company-spec.js
@@ -0,0 +1,3 @@
+describe("insurance-company.vue", () => {
+    it.todo("Some test for the future");
+});
diff --git a/src/layouts/insurance-company/insurance-company.vue b/src/layouts/insurance-company/insurance-company.vue
index 4fa86743f..7b8310e39 100644
--- a/src/layouts/insurance-company/insurance-company.vue
+++ b/src/layouts/insurance-company/insurance-company.vue
@@ -10,12 +10,10 @@
             <div class="row justify-content-center">
                 <div class="col-md-6 col-xl-4">
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-4" />
-                    <textboxQuestion
-                        v-model="selectedQuery"
-                        customInputId="autocomplete"
-                        class="mb-4 mt-5"
-                        cmsWidgetName="InsuranceCoQuestionWidget"
-                        includeSearchIcon />
+
+                    <insurance-company-question
+                        v-model="parentAccountNumber"
+                        :originalList="originalList" />
 
                     <navbar
                         cmsWidgetName="FunnelFooterWidget"
@@ -34,8 +32,8 @@
 import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
 import navbar from "@/fmg-components/nav-bar/nav-bar";
 import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
-import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
 import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
+import insuranceCompanyQuestion from "@/layouts/insurance-company/insurance-company-question";
 
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
@@ -46,23 +44,6 @@ import baseMixin from "@/mixins/base-mixin.js";
 import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
 
 import store from "@/store";
-import $ from "jquery";
-
-// MAPPNG
-const termMapping = [
-    {
-        term: "1ST",
-        altTerm: "FIRST",
-    },
-    {
-        term: "FIRST",
-        altTerm: "1ST",
-    },
-    {
-        term: "AAA",
-        altTerm: "American",
-    },
-];
 
 export default {
     name: "insurance-company",
@@ -89,55 +70,24 @@ export default {
 
         const resultMap = await settleAllPromises(promiseResultMap);
 
-        const searchableInsuranceCompanyList = resultMap.insuranceCompanyList.map(
-            (insuranceCompany) => {
-                insuranceCompany.altTerms = "";
-
-                termMapping.forEach((matchingTerm) => {
-                    if (
-                        insuranceCompany.accountName
-                            .toUpperCase()
-                            .includes(matchingTerm.term.toUpperCase())
-                    ) {
-                        insuranceCompany.altTerms =
-                            insuranceCompany.altTerms + matchingTerm.altTerm?.toUpperCase() + " ";
-                    }
-                });
-
-                return insuranceCompany;
-            }
-        );
-
         // Call the "next" function to complete the transition to this page.
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
             vm.originalList = resultMap.insuranceCompanyList;
-            vm.searchableInsuranceCompanyList = searchableInsuranceCompanyList;
         });
     },
     data() {
         return {
-            searchableInsuranceCompanyList: [],
+            parentAccountNumber: this.parentAccountNumberFromStore(),
             originalList: [],
-            selectedParentAccount: "",
         };
     },
     methods: {
-        arePagePrerequisitesValid() {
-            return store.getters.vehicle.carId !== null;
+        parentAccountNumberFromStore() {
+            return store?.order?.payment?.parentAccountNumber;
         },
-        findMatches(request, response) {
-            const matches = [];
-            const term = request?.term?.toUpperCase();
-            this.originalList.forEach((company, index) => {
-                if (
-                    company.accountName.indexOf(term) !== -1 ||
-                    company.altTerms.indexOf(term) !== -1
-                ) {
-                    matches.push(company.accountName);
-                }
-            });
-            response(matches);
+        arePagePrerequisitesValid() {
+            return store.getters.order.payment.isInsurance === true;
         },
         backButtonAction() {
             // Go back to Quote page
@@ -149,112 +99,23 @@ export default {
 
             await this.dispatchStoreAction(
                 this.storeActions.SAVE_PARENT_ACCOUNT_NUMBER,
-                this.selectedParentAccount,
+                this.parentAccountNumber,
                 false
             );
-
             navigateToHeritageFunnel({
                 shouldSaveSession: true,
                 pageNameToLog: "insurance-company",
                 loadingModal: this.$refs.loadingModal,
             });
         },
-        selectParentAccountNumber(parentAccountName) {
-            if (!this.searchableInsuranceCompanyList) {
-                console.error("No insurance companies found");
-                return;
-            }
-
-            var selectedItem = this.searchableInsuranceCompanyList.filter((item) => {
-                return item.accountName === parentAccountName;
-            });
-
-            if (selectedItem) {
-                this.selectedParentAccount = selectedItem[0].parentAccountNumber;
-            } else {
-                console.error("Error locating " + parentAccountName);
-            }
-        },
-    },
-    mounted() {
-        const select = this.selectParentAccountNumber;
-        setTimeout(() => {
-            $("#autocomplete").autocomplete({
-                source: this.findMatches,
-                position: {
-                    my: "left top+6",
-                },
-                minLength: 0, // Necessary to display menu when clearing input
-
-                // Bold matching letters as you type in the input
-                search: function (event, ui) {
-                    setTimeout(() => {
-                        let w = $(this).autocomplete("widget").find("div");
-                        let regExpString = "(" + this.value + ")";
-                        let re = new RegExp(regExpString, "i");
-                        w.html((i, html) =>
-                            html.replace(re, "<span style='font-weight: bold;'>$1</span>")
-                        );
-                    }, 5);
-                },
-                select: function (event, ui) {
-                    select(ui.item.value);
-                },
-            });
-        }, 0);
     },
     components: {
         funnelHeader,
         navbar,
         funnelSubHeader,
-        textboxQuestion,
         Form,
         loadingModal,
+        insuranceCompanyQuestion,
     },
 };
 </script>
-<style lang="scss">
-ul {
-    &.ui-autocomplete {
-        position: absolute;
-        list-style-type: none;
-        margin: 0;
-        padding: 0.25rem;
-        background: $white;
-        border: 1px solid $gray;
-        border-radius: 0.25rem;
-        height: 50%;
-        overflow: auto;
-        li {
-            &:hover,
-            .ui-state-active {
-                background-color: $gray-100;
-                cursor: pointer;
-            }
-            .ui-menu-item-wrapper {
-                border: 1px solid transparent;
-                border-radius: 2px;
-                padding-left: 0.25rem;
-                span {
-                    font-weight: 600;
-                }
-                &.ui-state-active {
-                    border: 1px solid $gray-200;
-                    border-radius: 2px;
-                    font-weight: 600;
-                }
-            }
-        }
-    }
-}
-.ui-helper-hidden-accessible {
-    border: 0;
-    clip: rect(0 0 0 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
-}
-</style>