diff --git a/src/constants/error-messages.js b/src/constants/error-messages.js
index 6c206946..47d6a0a9 100644
--- a/src/constants/error-messages.js
+++ b/src/constants/error-messages.js
@@ -33,7 +33,11 @@ const errorMessages = {
     LOSS_CITY_REQUIRED: "Please enter a city",
     LOSS_STATE_REQUIRED: "Please select an option",
     LOSS_DATE_REQUIRED: "Please enter a loss date",
-    DAMAGE_OPTION_REQUIRED: "Please select an option"
+    DAMAGE_OPTION_REQUIRED: "Please select an option",
+
+    POLICYHOLDER_FIRST_NAME_REQUIRED: "Please enter the policyholder first name",
+    POLICYHOLDER_LAST_NAME_REQUIRED: "Please enter the policyholder last name",
+
 };
 
 export { errorMessages };
\ No newline at end of file
diff --git a/src/layouts/policy-holder-details/policy-holder-details.vue b/src/layouts/policy-holder-details/policy-holder-details.vue
index b1fb2a8a..5a26238a 100644
--- a/src/layouts/policy-holder-details/policy-holder-details.vue
+++ b/src/layouts/policy-holder-details/policy-holder-details.vue
@@ -6,32 +6,92 @@
                 <siteSubHeader cmsWidgetName="SiteSubHeaderWidget"/>
                 <div class="row mt-4">
                     <div class="col">
-                        <span>PlaceHolder for policy holder details</span>
-                    </div>
+                        <textboxQuestion
+                            inputId="firstNameField"
+                            cmsWidgetName="PolicyholderFirstNameQuestion"
+                            v-model="policyHolderModel.firstName"
+                            isRequired
+                            ref="policyHolderFirstName"
+                            disableAutoFill
+                            validationRules="first-name-required" />
+                    </div>        
+                </div>
+                <div class="row mt-4">
+                    <div class="col">
+                        <textboxQuestion
+                            inputId="lastNameField"
+                            cmsWidgetName="PolicyholderLastNameQuestion"
+                            v-model="policyHolderModel.lastName"
+                            isRequired
+                            ref="policyHolderLastName"
+                            disableAutoFill
+                            validationRules="last-name-required" />
+                    </div>        
                 </div>
             </div>
         </div>
     </Form>
-    </template>
-    <script>
-        // Components
-    import siteHeader from '@/common-components/site-header/site-header';
-    import siteSubHeader from '@/common-components/site-sub-header/site-sub-header';
+</template>
+<script>
+// Components
+import siteHeader from '@/common-components/site-header/site-header';
+import siteSubHeader from '@/common-components/site-sub-header/site-sub-header';
+import textboxQuestion from "@/common-components/textbox-question/textbox-question";
 
-      // Supporting files
-    import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
-    import { settleAllPromises } from "@/helpers/layout-helper";
-    import { Form, defineRule } from "vee-validate";
-    import { required, regex } from "@/helpers/validation-rules";
-    import { errorMessages } from "@/constants/error-messages";
-    import BaseFormMixin from '@/mixins/base-form-mixin.js';
+// Supporting files
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+import { Form, defineRule } from "vee-validate";
+import { required } from "@/helpers/validation-rules";
+import { errorMessages } from "@/constants/error-messages";
+import BaseFormMixin from '@/mixins/base-form-mixin.js';
+import { useMainStore } from '@/store';
+
+//define validation rules
+defineRule("first-name-required", required(errorMessages.POLICYHOLDER_FIRST_NAME_REQUIRED));
+defineRule("last-cause-required", required(errorMessages.POLICYHOLDER_LAST_NAME_REQUIRED));
     
-    export default {
-        name: "policy-holder-details",
-        components: {
-            siteHeader,
-            siteSubHeader,
-            Form,
-        },
-    }
-    </script>
\ No newline at end of file
+export default {
+    name: "policy-holder-details",
+    mixins: [BaseFormMixin],
+    data() {
+        return {
+            policyHolderModel: 
+            {
+                firstName: "",
+                lastName: "",
+            }
+        };
+    },
+    setup() {
+        const mainStore = useMainStore();
+        return { mainStore };
+    },
+    async beforeRouteEnter(to, from, next) 
+    {
+        // Call APIs
+        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+
+        // Settle promises and get results
+        const promiseResultMap = [
+        {
+            resultKey: "cmsContent",
+            promise: cmsContentPromise,
+        },];
+
+                
+        //use resultMap to populate layout content.
+        let resultMap = await settleAllPromises(promiseResultMap);
+
+        next((vm) => {
+           vm.setCmsContent(resultMap.cmsContent);
+        });
+    },
+    components: {
+        siteHeader,
+        siteSubHeader,
+        textboxQuestion,
+        Form,
+    },
+}
+</script>
\ No newline at end of file