diff --git a/strr-api/.dockerignore b/strr-api/.dockerignore
index 68a4d94a..deec5151 100644
--- a/strr-api/.dockerignore
+++ b/strr-api/.dockerignore
@@ -9,3 +9,4 @@
 Dockerfile
 sample_data
 tests
+.coveragerc
\ No newline at end of file
diff --git a/strr-pm-web/app/app.config.ts b/strr-pm-web/app/app.config.ts
index ebc396a1..ea564567 100644
--- a/strr-pm-web/app/app.config.ts
+++ b/strr-pm-web/app/app.config.ts
@@ -21,6 +21,9 @@ export default defineAppConfig({
         }
       }
     },
+    radioGroup: {
+      wrapper: 'max-w-bcGovInput'
+    },
     select: {
       color: {
         red: {
@@ -39,6 +42,21 @@ export default defineAppConfig({
         empty: 'text-gray-700'
       }
     },
+    textarea: {
+      base: 'bg-gray-100 hover:bg-gray-200 border-b text-gray-900 focus:border-b-2 h-20 hover:bg-gray-200',
+      rounded: 'rounded-none rounded-t',
+      color: {
+        gray: {
+          outline: 'border-gray-900 placeholder-gray-700 ring-0 focus:ring-0 focus:placeholder-primary-500'
+        },
+        primary: {
+          outline: 'bg-primary-50 border-primary-500 text-gray-900 ring-0 focus:ring-0'
+        },
+        red: {
+          outline: 'bg-red-50 border-red-600 placeholder-red-600 ring-0 focus:ring-0'
+        }
+      }
+    },
     tooltip: {
       container: 'z-20 group min-h-fit opacity-100'
     }
diff --git a/strr-pm-web/app/components/connect/Field.vue b/strr-pm-web/app/components/connect/Field.vue
deleted file mode 100644
index d476e199..00000000
--- a/strr-pm-web/app/components/connect/Field.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<script setup lang="ts">
-import { type UseEventBusReturn } from '@vueuse/core'
-import { normalizeInput } from '~/utils/connect-validation'
-
-const formBus = inject<UseEventBusReturn<any, string> | undefined>('form-events', undefined)
-
-const model = defineModel({ type: String, default: '' })
-const emit = defineEmits<{(e: 'update:modelValue', value: string): void }>()
-
-const props = defineProps({
-  label: { type: String, default: '' },
-  placeholder: { type: String, default: '' },
-  id: { type: String, required: true },
-  name: { type: String, default: 'name.fullName' },
-  help: { type: String, default: '' },
-  isDisabled: { type: Boolean, default: false },
-  wrapWithFormGrp: { type: Boolean, default: true }
-})
-
-watch(model, () => {
-  formBus?.emit({ type: 'blur', path: props.name })
-  formBus?.emit({ type: 'change', path: props.name })
-}, { deep: true })
-
-const normalize = () => {
-  const normalizedValue = normalizeInput(model.value)
-  emit('update:modelValue', normalizedValue)
-}
-</script>
-
-<template>
-  <UFormGroup v-if="wrapWithFormGrp" :label="label" :name="name" :help="help">
-    <UInput
-      :id="id"
-      class="max-w-bcGovInput"
-      :color="model ? 'primary' : 'gray'"
-      type="text"
-      v-bind="$attrs"
-      :value="model"
-      :placeholder="placeholder"
-      :disabled="isDisabled"
-      size="lg"
-      @input="$emit('update:modelValue', $event.target.value)"
-      @blur="normalize"
-    />
-  </UFormGroup>
-  <UInput
-    v-else
-    :id="id"
-    class="max-w-bcGovInput"
-    :color="model ? 'primary' : 'gray'"
-    type="text"
-    v-bind="$attrs"
-    :value="model"
-    :placeholder="placeholder"
-    :disabled="isDisabled"
-    size="lg"
-    @input="$emit('update:modelValue', $event.target.value)"
-    @blur="normalize"
-  />
-</template>
diff --git a/strr-pm-web/app/components/connect/Section.vue b/strr-pm-web/app/components/connect/Section.vue
index 75f448db..eb524470 100644
--- a/strr-pm-web/app/components/connect/Section.vue
+++ b/strr-pm-web/app/components/connect/Section.vue
@@ -1,31 +1,29 @@
 <script setup lang="ts">
-const { title, optional, divider, className } = defineProps<{
+defineProps<{
   title?: string
   optional?: boolean
-  divider?: boolean
   className?: string
+  error?: boolean
 }>()
-
-const { t } = useI18n()
 </script>
 <template>
   <div
     data-testid="form-section"
-    :class="`${className} mt-[40px] mobile:mt-[20px] ml-[40px] mr-[20px] mobile:mx-[8px]`"
+    class="px-4 md:px-10"
+    :class="[className, error ? 'border-l-2 border-red-600' : '']"
   >
     <div class="flex flex-col sm:flex-row">
       <div v-if="title" class="w-[200px]">
-        <p class="mb-[8px] sm:mb-0 sm:font-bold">
+        <p class="mb-2 sm:mb-0 sm:font-bold" :class="error ? 'text-red-600' : ''">
           {{ title }}
         </p>
         <p v-if="optional">
-          {{ t('general.optional') }}
+          {{ $t('general.optional') }}
         </p>
       </div>
       <div class="w-full sm:pl-5">
         <slot />
       </div>
     </div>
-    <div v-if="divider" class="hidden h-px w-full bg-bcGovGray-300 sm:block" />
   </div>
 </template>
diff --git a/strr-pm-web/app/components/connect/address/Index.vue b/strr-pm-web/app/components/connect/address/Index.vue
index 68dd8c2f..51d2168f 100644
--- a/strr-pm-web/app/components/connect/address/Index.vue
+++ b/strr-pm-web/app/components/connect/address/Index.vue
@@ -130,12 +130,12 @@ const addressComplete = () => {
         />
       </UFormGroup>
     </div>
-    <UFormGroup v-slot="{ error }" :name="schemaPrefix + 'locationDescription'">
+    <UFormGroup :name="schemaPrefix + 'locationDescription'">
       <UTextarea
         v-model="locationDescription"
         :placeholder="$t('label.locationDescription')"
+        :color="locationDescription ? 'primary' : 'gray'"
         class="w-full"
-        :variant="error ? 'error' : 'bcGov'"
         data-testid="address-location-description"
       />
     </UFormGroup>
diff --git a/strr-pm-web/app/components/connect/fee/ExtraFee.vue b/strr-pm-web/app/components/connect/fee/ExtraFee.vue
index e909d399..44127016 100644
--- a/strr-pm-web/app/components/connect/fee/ExtraFee.vue
+++ b/strr-pm-web/app/components/connect/fee/ExtraFee.vue
@@ -2,7 +2,7 @@
 defineProps<{ description: string, fee: number, showFeeValue: boolean }>()
 </script>
 <template>
-  <div class="flex justify-between border-b border-bcGovGray-300 py-[10px] pl-4">
+  <div class="flex justify-between border-b border-bcGovGray-300 py-3 pl-4">
     <p class="font-bold">
       {{ description }}
     </p>
diff --git a/strr-pm-web/app/components/connect/fee/Widget.vue b/strr-pm-web/app/components/connect/fee/Widget.vue
index b72d6b4c..d225de48 100644
--- a/strr-pm-web/app/components/connect/fee/Widget.vue
+++ b/strr-pm-web/app/components/connect/fee/Widget.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useWindowSize } from '@vueuse/core'
 
 const { t } = useI18n()
 
@@ -30,13 +31,12 @@ const feeItems = computed<ConnectFeeItem[]>(() => {
 // folding stuff
 const folded = ref(false)
 
-const { width } = useScreenSize()
-const isFoldable = computed(() => {
-  const threshold = width.value < 1024
-  if (!threshold) {
+const { width } = useWindowSize()
+const isFoldable = computed(() => width.value < 1024)
+watch(isFoldable, (val) => {
+  if (!val) {
     folded.value = false
   }
-  return threshold
 })
 
 const toggleFolded = () => {
@@ -51,31 +51,33 @@ const toggleFolded = () => {
     data-testid="fee-widget"
     class="z-10 mr-5 w-full rounded bg-white shadow-md lg:mr-0 lg:w-[320px]"
   >
-    <div
-      :class="`
-        ${folded ? 'rounded' : 'rounded-t'}
-        px-[15px] py-[10px] pt-[10px] bg-midnightBlue-900 flex flex-row justify-between
-        cursor-pointer lg:cursor-auto
-        `
-      "
+    <UButton
+      :tabindex="isFoldable ? 0 : -1"
+      :role="isFoldable ? 'button' : 'title'"
+      class="flex w-full bg-midnightBlue-900 py-2 pl-4 text-lg font-bold transition-all"
+      :class="[folded ? 'rounded' : 'rounded-b-none rounded-t', isFoldable ? '' : 'pointer-events-none']"
+      :aria-label="$t('feeSummary.title')"
+      :label="$t('feeSummary.title')"
       @click="toggleFolded"
     >
-      <p class="font-bold text-white">
-        {{ t("feeSummary.title") }}
-      </p>
-      <div class="flex lg:hidden">
-        <img
-          src="/icons/caret.svg"
-          alt="Toggle fee widget shown"
-          :class="`cursor-pointer transition-all ${folded ? 'rotate-180': ''}`"
-        >
-      </div>
-    </div>
-    <div :class="`transition-all ${folded ? 'h-[0px] overflow-hidden p-[0px]': 'px-[15px] pb-[10px] '}`">
+      <template #trailing>
+        <div class="flex grow justify-end pr-1">
+          <UIcon
+            v-if="isFoldable"
+            class="size-7"
+            :name="folded ? 'i-mdi-chevron-down' : 'i-mdi-chevron-up'"
+          />
+        </div>
+      </template>
+    </UButton>
+    <div
+      class="text-sm transition-all"
+      :class="folded ? 'h-[0px] overflow-hidden': 'px-4 pt-1'"
+    >
       <div
         v-for="feeItem in feeItems"
         :key="feeItem.filingTypeCode"
-        class="flex flex-row justify-between border-b border-bcGovGray-300 py-[10px]"
+        class="flex flex-row justify-between border-b border-bcGovGray-300 py-3"
       >
         <p class="font-bold">
           {{ t(`feeSummary.itemLabels.${feeItem.filingTypeCode}`) }}
@@ -123,7 +125,7 @@ const toggleFolded = () => {
         :fee="totalGst"
         :show-fee-value="isPlaceholderActive"
       />
-      <div class="flex flex-row items-end justify-between py-[10px] text-sm" aria-label="null">
+      <div class="flex flex-row items-end justify-between py-3" aria-label="null">
         <p class="mb-1 font-bold">
           {{ t("feeSummary.total") }}
         </p>
diff --git a/strr-pm-web/app/components/connect/field/Group.vue b/strr-pm-web/app/components/connect/field/Group.vue
new file mode 100644
index 00000000..b3a39a5b
--- /dev/null
+++ b/strr-pm-web/app/components/connect/field/Group.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { type UseEventBusReturn } from '@vueuse/core'
+
+const formBus = inject<UseEventBusReturn<any, string> | undefined>('form-events', undefined)
+
+const model = defineModel({ type: String, default: '' })
+watch(model, () => {
+  formBus?.emit({ type: 'blur', path: props.name })
+  formBus?.emit({ type: 'change', path: props.name })
+}, { deep: true })
+
+const props = defineProps({
+  name: { type: String, default: 'name.fullName' },
+  help: { type: String, default: '' },
+  id: { type: String, required: true },
+  label: { type: String, default: '' },
+  placeholder: { type: String, default: '' },
+  isDisabled: { type: Boolean, default: false },
+  size: { type: String, default: 'lg' }
+})
+</script>
+
+<template>
+  <UFormGroup :label="label" :name="name" :help="help">
+    <ConnectField
+      :id="id"
+      v-model="model"
+      :placeholder="placeholder"
+      :disabled="isDisabled"
+      size="lg"
+    />
+  </UFormGroup>
+</template>
diff --git a/strr-pm-web/app/components/connect/field/Index.vue b/strr-pm-web/app/components/connect/field/Index.vue
new file mode 100644
index 00000000..d3111b6d
--- /dev/null
+++ b/strr-pm-web/app/components/connect/field/Index.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { normalizeInput } from '~/utils/connect-validation'
+
+const model = defineModel({ type: String, default: '' })
+
+defineProps({
+  id: { type: String, required: true },
+  isDisabled: { type: Boolean, default: false },
+  label: { type: String, default: '' },
+  placeholder: { type: String, default: '' },
+  size: { type: String, default: 'lg' }
+})
+
+const normalize = () => {
+  model.value = normalizeInput(model.value)
+}
+</script>
+
+<template>
+  <UInput
+    :id="id"
+    v-model="model"
+    v-bind="$attrs"
+    type="text"
+    class="max-w-bcGovInput"
+    :color="model ? 'primary' : 'gray'"
+    :placeholder="placeholder"
+    :disabled="isDisabled"
+    :size="size"
+    @blur="normalize"
+  />
+</template>
diff --git a/strr-pm-web/app/components/form/common/Contact.vue b/strr-pm-web/app/components/form/common/Contact.vue
index 5177934b..56d2373a 100644
--- a/strr-pm-web/app/components/form/common/Contact.vue
+++ b/strr-pm-web/app/components/form/common/Contact.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 const { t } = useI18n()
-
 const tPlat = (path: string) => t(`platform.${path}`)
 
 const fullName = defineModel<string>('fullName', { required: false })
@@ -20,12 +19,14 @@ defineProps<{
   sectionInfo?: string
   nameDivider?: boolean
   emailWarning?: boolean
+  errorName?: boolean
+  errorDetails?: boolean
 }>()
 
 </script>
 
 <template>
-  <div class="space-y-10">
+  <div class="space-y-10 py-10">
     <ConnectSection v-if="prepopulateName" :title="tPlat('section.subTitle.yourName')">
       <p class="font-bold">
         <span v-if="fullName">{{ fullName }}</span>
@@ -35,12 +36,12 @@ defineProps<{
         {{ tPlat(`text.yourName${prepopulateType}`) }}
       </p>
     </ConnectSection>
-    <ConnectSection v-else :title="tPlat('section.subTitle.contactName')">
+    <ConnectSection v-else :title="tPlat('section.subTitle.contactName')" :error="errorName">
       <div class="space-y-5">
         <p v-if="sectionInfo" class="mt-1 text-sm">
           {{ sectionInfo }}
         </p>
-        <ConnectField
+        <ConnectFieldGroup
           v-if="fullName !== undefined"
           :id="idPrefix + '-full-name'"
           v-model="fullName"
@@ -49,7 +50,7 @@ defineProps<{
           :placeholder="t('label.fullName')"
         />
         <div v-else class="flex max-w-bcGovInput flex-col gap-3 sm:flex-row">
-          <ConnectField
+          <ConnectFieldGroup
             v-if="firstName !== undefined"
             :id="idPrefix + '-first-name'"
             v-model="firstName"
@@ -58,7 +59,7 @@ defineProps<{
             name="firstName"
             :placeholder="t('label.firstName')"
           />
-          <ConnectField
+          <ConnectFieldGroup
             v-if="middleName !== undefined"
             :id="idPrefix + '-middle-name'"
             v-model="middleName"
@@ -67,7 +68,7 @@ defineProps<{
             name="middleName"
             :placeholder="t('label.middleNameOpt')"
           />
-          <ConnectField
+          <ConnectFieldGroup
             v-if="lastName !== undefined"
             :id="idPrefix + '-last-name'"
             v-model="lastName"
@@ -77,7 +78,7 @@ defineProps<{
             :placeholder="t('label.lastName')"
           />
         </div>
-        <ConnectField
+        <ConnectFieldGroup
           v-if="preferredName !== undefined"
           :id="idPrefix + '-preferred-name'"
           v-model="preferredName"
@@ -89,9 +90,9 @@ defineProps<{
       </div>
     </ConnectSection>
     <div v-if="nameDivider" class="h-px w-full border-b border-gray-100" />
-    <ConnectSection :title="tPlat('section.subTitle.contactDetails')">
+    <ConnectSection :title="tPlat('section.subTitle.contactDetails')" :error="errorDetails">
       <div class="space-y-5">
-        <ConnectField
+        <ConnectFieldGroup
           v-if="position !== undefined"
           :id="idPrefix + '-position'"
           v-model="position"
@@ -101,7 +102,7 @@ defineProps<{
           :placeholder="t('label.positionTitle')"
         />
         <ConnectPhoneNumber v-if="phone" v-model="phone" />
-        <ConnectField
+        <ConnectFieldGroup
           v-if="faxNumber !== undefined"
           :id="idPrefix + '-fax-number'"
           v-model="faxNumber"
@@ -109,7 +110,7 @@ defineProps<{
           name="faxNumber"
           :placeholder="t('createAccount.contactForm.faxNumber')"
         />
-        <ConnectField
+        <ConnectFieldGroup
           v-if="emailAddress !== undefined"
           :id="idPrefix + '-party-email'"
           v-model="emailAddress"
diff --git a/strr-pm-web/app/components/form/common/CraInfo.vue b/strr-pm-web/app/components/form/common/CraInfo.vue
index 4127295d..d37565bf 100644
--- a/strr-pm-web/app/components/form/common/CraInfo.vue
+++ b/strr-pm-web/app/components/form/common/CraInfo.vue
@@ -6,6 +6,10 @@ const businessNumber = defineModel<string>('businessNumber')
 
 const { isPrimary } = defineProps<{ isPrimary: boolean }>()
 
+const sinLabel = computed(() => isPrimary
+  ? t('createAccount.contactForm.socialInsuranceNumber')
+  : t('createAccount.contactForm.socialInsuranceNumberOptional'))
+
 </script>
 <template>
   <div class="space-y-5" data-testid="form-section-cra-info">
@@ -15,13 +19,9 @@ const { isPrimary } = defineProps<{ isPrimary: boolean }>()
           v-model="socialInsuranceNumber"
           :color="socialInsuranceNumber ? 'primary' : 'gray'"
           type="text"
-          aria-label="social insurance number"
           size="lg"
-          :placeholder="
-            `${isPrimary
-              ? t('createAccount.contactForm.socialInsuranceNumber')
-              : t('createAccount.contactForm.socialInsuranceNumberOptional')}`
-          "
+          :aria-label="sinLabel"
+          :placeholder="sinLabel"
         />
       </UFormGroup>
     </div>
@@ -32,7 +32,7 @@ const { isPrimary } = defineProps<{ isPrimary: boolean }>()
           :color="businessNumber ? 'primary' : 'gray'"
           size="lg"
           type="text"
-          aria-label="business number"
+          :aria-label="t('createAccount.contactForm.businessNumber')"
           :placeholder="t('createAccount.contactForm.businessNumber')"
         />
       </UFormGroup>
diff --git a/strr-pm-web/app/components/form/host/Contact.vue b/strr-pm-web/app/components/form/host/Contact.vue
index f8986781..80817931 100644
--- a/strr-pm-web/app/components/form/host/Contact.vue
+++ b/strr-pm-web/app/components/form/host/Contact.vue
@@ -59,7 +59,7 @@ watch(secondForm, () => {
   <div data-testid="contact-information" class="space-y-10">
     <ConnectPageSection
       class="bg-white"
-      :heading="{ label: t('createAccount.contact.subtitle'), labelClass: 'ml-6 font-bold' }"
+      :heading="{ label: t('createAccount.contact.subtitle'), labelClass: 'font-bold md:ml-6' }"
     >
       <UForm
         ref="form"
@@ -126,7 +126,7 @@ watch(secondForm, () => {
     <ConnectPageSection
       v-else
       class="bg-white"
-      :heading="{ label: t('createAccount.contact.secondaryContactInfo'), labelClass: 'ml-6 font-bold' }"
+      :heading="{ label: t('createAccount.contact.secondaryContactInfo'), labelClass: 'font-bold md:ml-6' }"
     >
       <template #header>
         <div class="flex">
diff --git a/strr-pm-web/app/components/form/host/PrincipalResidence.vue b/strr-pm-web/app/components/form/host/PrincipalResidence.vue
index 72b7a987..57fc670d 100644
--- a/strr-pm-web/app/components/form/host/PrincipalResidence.vue
+++ b/strr-pm-web/app/components/form/host/PrincipalResidence.vue
@@ -186,7 +186,7 @@ const hasSpaces = (str: string) => /\s/.test(str)
         class="pb-10"
         :heading="{
           label: $t('createAccount.principalResidence.docDetails'),
-          labelClass: 'ml-6 font-bold',
+          labelClass: 'font-bold md:ml-6',
           level: 'h3'
         }"
       >
@@ -252,7 +252,7 @@ const hasSpaces = (str: string) => /\s/.test(str)
         class="mt-10 pb-10"
         :heading="{
           label: $t('createAccount.principalResidence.declaration'),
-          labelClass: 'ml-6 font-bold',
+          labelClass: 'font-bold md:ml-6',
           level: 'h3'
         }"
       >
diff --git a/strr-pm-web/app/components/form/host/Property.vue b/strr-pm-web/app/components/form/host/Property.vue
index 26bd72e2..5010003c 100644
--- a/strr-pm-web/app/components/form/host/Property.vue
+++ b/strr-pm-web/app/components/form/host/Property.vue
@@ -62,7 +62,7 @@ watch(canadaPostAddress, (newAddress) => {
   <div data-testid="property-information">
     <ConnectPageSection
       class="bg-white"
-      :heading="{ label: t('createAccount.propertyForm.subtitle'), labelClass: 'ml-6 font-bold' }"
+      :heading="{ label: t('createAccount.propertyForm.subtitle'), labelClass: 'font-bold md:ml-6' }"
     >
       <UForm
         ref="propertyForm"
@@ -72,7 +72,7 @@ watch(canadaPostAddress, (newAddress) => {
       >
         <ConnectSection :title="t('createAccount.propertyForm.rentalUnitAddress')">
           <div class="max-w-bcGovInput space-y-5">
-            <ConnectField
+            <ConnectFieldGroup
               id="property-nickname"
               v-model="property.nickname"
               name="nickname"
@@ -94,13 +94,13 @@ watch(canadaPostAddress, (newAddress) => {
         </ConnectSection>
         <ConnectSection :title="t('createAccount.propertyForm.rentalUnitDetails')">
           <div class="max-w-bcGovInput space-y-5">
-            <ConnectField
+            <ConnectFieldGroup
               id="parcel-itentifier"
               v-model="property.parcelIdentifier"
               name="parcelIdentifier"
               :placeholder="$t('createAccount.propertyForm.parcelIdentifier')"
             />
-            <ConnectField
+            <ConnectFieldGroup
               id="business-license"
               v-model="property.businessLicense"
               name="businessLicense"
@@ -144,7 +144,7 @@ watch(canadaPostAddress, (newAddress) => {
         </ConnectSection>
         <ConnectSection :title="t('createAccount.propertyForm.internetListingDetails')">
           <div name="whichPlatform" class="space-y-5">
-            <ConnectField
+            <ConnectFieldGroup
               id="platform-url"
               v-model="property.whichPlatform"
               name="whichPlatform"
diff --git a/strr-pm-web/app/components/form/platform/BusinessDetails.vue b/strr-pm-web/app/components/form/platform/BusinessDetails.vue
index 7ed1cfc9..5c77d35c 100644
--- a/strr-pm-web/app/components/form/platform/BusinessDetails.vue
+++ b/strr-pm-web/app/components/form/platform/BusinessDetails.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 const { t } = useI18n()
-
 const tPlat = (path: string) => t(`platform.${path}`)
 
 const { isComplete } = defineProps<{ isComplete: boolean }>()
@@ -12,6 +11,8 @@ const radioOptions = [
   { value: true, label: t('word.Yes') },
   { value: false, label: t('word.No') }]
 
+// data manipulation stuff
+
 watch(() => platformBusiness.value.hasCpbc, () => {
   platformBusiness.value.cpbcLicenceNumber = ''
 })
@@ -30,12 +31,52 @@ watch(() => platformBusiness.value.mailingAddress, (val) => {
   }
 }, { deep: true })
 
+// form validation / error styling
+
+const showErrorBusIds = ref(false)
+const showErrorBusAddr = ref(false)
+const showErrorRegOffAtt = ref(false)
+const showErrorNonComp = ref(false)
+const showErrorTakedownReq = ref(false)
+
 const platformBusinessRef = ref()
-watch(platformBusinessRef, (val) => {
-  if (val && isComplete) {
-    val.validate()
+
+const formHasErrors = (paths: string[]) => {
+  for (const path of paths) {
+    // @ts-ignore
+    if (platformBusinessRef.value.getErrors(path)?.length) {
+      return true
+    }
   }
-})
+  return false
+}
+
+const validateForm = async () => {
+  if (platformBusinessRef.value && isComplete) {
+    try {
+      await platformBusinessRef.value.validate()
+    } catch (e) {
+      console.info(e)
+    }
+    showErrorBusIds.value = platformBusiness.value.hasCpbc === undefined ||
+      formHasErrors(['legalName', 'homeJurisdiction', 'cpbcLicenceNumber'])
+    showErrorBusAddr.value = formHasErrors([
+      'mailingAddress.country',
+      'mailingAddress.street',
+      'mailingAddress.city',
+      'mailingAddress.region',
+      'mailingAddress.postalCode'
+    ])
+    showErrorRegOffAtt.value = formHasErrors(['regOfficeOrAtt'])
+    showErrorNonComp.value = formHasErrors(['nonComplianceEmail'])
+    showErrorTakedownReq.value = formHasErrors(['takeDownEmail'])
+  }
+}
+
+watch(platformBusinessRef, validateForm)
+watch(platformBusiness, validateForm, { deep: true })
+
+// address stuff
 
 const {
   activeAddressField,
@@ -76,17 +117,17 @@ watch(canadaPostAddress, (newAddress) => {
   <div data-testid="business-details">
     <ConnectPageSection
       class="bg-white"
-      :heading="{ label: tPlat('section.title.businessInfo'), labelClass: 'ml-6 font-bold' }"
+      :heading="{ label: tPlat('section.title.businessInfo'), labelClass: 'font-bold md:ml-6' }"
     >
       <UForm
         ref="platformBusinessRef"
         :schema="businessdetailsSchema"
         :state="platformBusiness"
-        class="space-y-10 pb-10"
+        class="space-y-10 py-10"
       >
-        <ConnectSection :title="tPlat('section.subTitle.businessIds')">
+        <ConnectSection :title="tPlat('section.subTitle.businessIds')" :error="showErrorBusIds">
           <div class="space-y-5">
-            <ConnectField
+            <ConnectFieldGroup
               id="platform-business-legal-name"
               v-model="platformBusiness.legalName"
               :aria-label="t('label.busNameLegal')"
@@ -94,7 +135,7 @@ watch(canadaPostAddress, (newAddress) => {
               name="legalName"
               :placeholder="t('label.busNameLegal')"
             />
-            <ConnectField
+            <ConnectFieldGroup
               id="platform-business-home-jur"
               v-model="platformBusiness.homeJurisdiction"
               :aria-label="t('label.homeJurisdiction')"
@@ -102,7 +143,7 @@ watch(canadaPostAddress, (newAddress) => {
               name="homeJurisdiction"
               :placeholder="t('label.homeJurisdiction')"
             />
-            <ConnectField
+            <ConnectFieldGroup
               id="platform-business-number"
               v-model="platformBusiness.businessNumber"
               :aria-label="t('label.busNumOpt')"
@@ -120,7 +161,7 @@ watch(canadaPostAddress, (newAddress) => {
                 :ui-radio="{ inner: 'space-y-2' }"
               />
             </UFormGroup>
-            <ConnectField
+            <ConnectFieldGroup
               v-if="platformBusiness.hasCpbc"
               id="platform-cpbc"
               v-model="platformBusiness.cpbcLicenceNumber"
@@ -131,7 +172,7 @@ watch(canadaPostAddress, (newAddress) => {
           </div>
         </ConnectSection>
         <div class="h-px w-full border-b border-gray-100" />
-        <ConnectSection :title="tPlat('section.subTitle.businessMailAddress')">
+        <ConnectSection :title="tPlat('section.subTitle.businessMailAddress')" :error="showErrorBusAddr">
           <div class="max-w-bcGovInput">
             <ConnectAddress
               id="platform-business-address"
@@ -148,7 +189,7 @@ watch(canadaPostAddress, (newAddress) => {
           </div>
         </ConnectSection>
         <div class="h-px w-full border-b border-gray-100" />
-        <ConnectSection :title="tPlat('section.subTitle.regOfficeAttSvcAddrress')">
+        <ConnectSection :title="tPlat('section.subTitle.regOfficeAttSvcAddrress')" :error="showErrorRegOffAtt">
           <div class="max-w-bcGovInput space-y-5">
             <UFormGroup name="null">
               <URadioGroup
@@ -168,7 +209,7 @@ watch(canadaPostAddress, (newAddress) => {
                   :label="t('label.sameAsMailAddress')"
                 />
               </UFormGroup>
-              <ConnectField
+              <ConnectFieldGroup
                 id="platform-att-for-svc-name"
                 v-model="platformBusiness.regOfficeOrAtt.attorneyName"
                 :aria-label="t('platform.label.attForSvcName')"
@@ -192,22 +233,19 @@ watch(canadaPostAddress, (newAddress) => {
           </div>
         </ConnectSection>
         <div class="h-px w-full border-b border-gray-100" />
-        <ConnectSection :title="tPlat('section.subTitle.noticeNonCompliance')">
+        <ConnectSection :title="tPlat('section.subTitle.noticeNonCompliance')" :error="showErrorNonComp">
           <div class="space-y-5">
             <p>
-              {{ platformBusiness.hasRegOffAtt
-                ? tPlat('text.nonComplianceEmail')
-                : tPlat('text.nonComplianceEmailLong')
-              }}
+              {{ tPlat('text.nonComplianceEmail') }}
             </p>
-            <ConnectField
+            <ConnectFieldGroup
               id="platform-business-noncompliance-email"
               v-model="platformBusiness.nonComplianceEmail"
               :aria-label="t('label.emailAddress')"
               name="nonComplianceEmail"
               :placeholder="t('label.emailAddress')"
             />
-            <ConnectField
+            <ConnectFieldGroup
               id="platform-business-noncompliance-email-optional"
               v-model="platformBusiness.nonComplianceEmailOptional"
               :aria-label="t('label.emailAddressOpt')"
@@ -217,17 +255,17 @@ watch(canadaPostAddress, (newAddress) => {
           </div>
         </ConnectSection>
         <div class="h-px w-full border-b border-gray-100" />
-        <ConnectSection :title="tPlat('section.subTitle.takedownRequest')">
+        <ConnectSection :title="tPlat('section.subTitle.takedownRequest')" :error="showErrorTakedownReq">
           <div class="space-y-5">
-            <p>{{ platformBusiness.hasRegOffAtt ? tPlat('text.takedownEmail') : tPlat('text.takedownEmailLong') }}</p>
-            <ConnectField
+            <p>{{ tPlat('text.takedownEmail') }}</p>
+            <ConnectFieldGroup
               id="platform-business-takedown-email"
               v-model="platformBusiness.takeDownEmail"
               :aria-label="t('label.emailAddress')"
               name="takeDownEmail"
               :placeholder="t('label.emailAddress')"
             />
-            <ConnectField
+            <ConnectFieldGroup
               id="platform-business-takedown-email-optional"
               v-model="platformBusiness.takeDownEmailOptional"
               :aria-label="t('label.emailAddressOpt')"
diff --git a/strr-pm-web/app/components/form/platform/ContactInfo.vue b/strr-pm-web/app/components/form/platform/ContactInfo.vue
index 7f66a6ff..978157e7 100644
--- a/strr-pm-web/app/components/form/platform/ContactInfo.vue
+++ b/strr-pm-web/app/components/form/platform/ContactInfo.vue
@@ -16,9 +16,44 @@ watch(isCompletingPartyRep, (val) => {
   primaryRep.value = getNewRepresentative(val)
 })
 
-const validateForm = (formRef: any) => {
-  if (formRef && isComplete) {
-    formRef.validate()
+// error styling stuff
+
+const formHasErrors = (form: any, paths: string[]) => {
+  for (const path of paths) {
+    if (form?.getErrors(path)?.length) {
+      return true
+    }
+  }
+  return false
+}
+
+const compPartyDetailsErr = ref(false)
+const primaryRepNameErr = ref(false)
+const primaryRepDetailsErr = ref(false)
+const secondaryRepNameErr = ref(false)
+const secondaryRepDetailsErr = ref(false)
+
+const validateForm = async (form: any) => {
+  if (form && isComplete) {
+    try {
+      await form.validate()
+    } catch (e) {
+      // console.info(e)
+    }
+    switch (form) {
+      case compPartyRef.value:
+        compPartyDetailsErr.value = formHasErrors(compPartyRef.value, ['phone.countryCode', 'phone.number', 'email'])
+        break
+      case primaryRepRef.value:
+        primaryRepNameErr.value = formHasErrors(primaryRepRef.value, ['firstName', 'lastName'])
+        primaryRepDetailsErr.value = formHasErrors(
+          primaryRepRef.value, ['position', 'phone.countryCode', 'phone.number', 'email'])
+        break
+      case secondaryRepRef.value:
+        secondaryRepNameErr.value = formHasErrors(secondaryRepRef.value, ['firstName', 'lastName'])
+        secondaryRepDetailsErr.value = formHasErrors(
+          secondaryRepRef.value, ['position', 'phone.countryCode', 'phone.number', 'email'])
+    }
   }
 }
 
@@ -28,6 +63,16 @@ const secondaryRepRef = ref()
 watch(compPartyRef, validateForm)
 watch(primaryRepRef, validateForm)
 watch(secondaryRepRef, validateForm)
+
+watch(completingParty, async () => {
+  await validateForm(compPartyRef.value)
+}, { deep: true })
+watch(primaryRep, async () => {
+  await validateForm(primaryRepRef.value)
+}, { deep: true })
+watch(secondaryRep, async () => {
+  await validateForm(secondaryRepRef.value)
+}, { deep: true })
 </script>
 
 <template>
@@ -44,13 +89,12 @@ watch(secondaryRepRef, validateForm)
       <div v-if="!isCompletingPartyRep" class="space-y-10">
         <ConnectPageSection
           class="bg-white"
-          :heading="{ label: tPlat('section.title.completingParty'), labelClass: 'ml-6 font-bold' }"
+          :heading="{ label: tPlat('section.title.completingParty'), labelClass: 'font-bold md:ml-6' }"
         >
           <UForm
             ref="compPartyRef"
             :schema="getContactSchema(true)"
             :state="completingParty"
-            class="pb-10"
           >
             <FormCommonContact
               v-model:first-name="completingParty.firstName"
@@ -61,19 +105,20 @@ watch(secondaryRepRef, validateForm)
               name-divider
               prepopulate-name
               prepopulate-type="Bceid"
+              :error-details="compPartyDetailsErr"
             />
           </UForm>
         </ConnectPageSection>
         <ConnectPageSection
           v-if="primaryRep"
           class="bg-white"
-          :heading="{ label: tPlat('section.title.primaryRep'), labelClass: 'ml-6 font-bold' }"
+          :heading="{ label: tPlat('section.title.primaryRep'), labelClass: 'font-bold md:ml-6' }"
         >
           <UForm
             ref="primaryRepRef"
             :schema="getContactSchema(false)"
             :state="primaryRep"
-            class="space-y-10 pb-10"
+            class="space-y-10"
           >
             <FormCommonContact
               v-model:first-name="primaryRep.firstName"
@@ -88,6 +133,8 @@ watch(secondaryRepRef, validateForm)
               :prepopulate-name="false"
               email-warning
               :section-info="t('platform.text.primaryContact')"
+              :error-name="primaryRepNameErr"
+              :error-details="primaryRepDetailsErr"
             />
           </UForm>
         </ConnectPageSection>
@@ -95,13 +142,13 @@ watch(secondaryRepRef, validateForm)
       <div v-else-if="primaryRep">
         <ConnectPageSection
           class="bg-white"
-          :heading="{ label: tPlat('section.title.primaryRep'), labelClass: 'ml-6 font-bold' }"
+          :heading="{ label: tPlat('section.title.primaryRep'), labelClass: 'font-bold md:ml-6' }"
         >
           <UForm
             ref="primaryRepRef"
             :schema="getContactSchema(false)"
             :state="primaryRep"
-            class="space-y-10 pb-10"
+            class="space-y-10"
           >
             <FormCommonContact
               v-model:first-name="primaryRep.firstName"
@@ -116,6 +163,8 @@ watch(secondaryRepRef, validateForm)
               prepopulate-type="Bceid"
               name-divider
               email-warning
+              :error-name="primaryRepNameErr"
+              :error-details="primaryRepDetailsErr"
             />
           </UForm>
         </ConnectPageSection>
@@ -166,6 +215,8 @@ watch(secondaryRepRef, validateForm)
             id-prefix="platform-secondary-rep"
             :prepopulate-name="false"
             name-divider
+            :error-name="secondaryRepNameErr"
+            :error-details="secondaryRepDetailsErr"
           />
         </UForm>
       </ConnectPageSection>
diff --git a/strr-pm-web/app/components/form/platform/Details.vue b/strr-pm-web/app/components/form/platform/Details.vue
index 3334015a..6cb13fd2 100644
--- a/strr-pm-web/app/components/form/platform/Details.vue
+++ b/strr-pm-web/app/components/form/platform/Details.vue
@@ -4,38 +4,55 @@ const tPlat = (path: string) => t(`platform.${path}`)
 
 const { isComplete } = defineProps<{ isComplete: boolean }>()
 
-const { addNewEmptyBrand, removeBrandAtIndex } = useStrrPlatformDetails()
-const { platformDetails, platformDetailsSchema } = storeToRefs(useStrrPlatformDetails())
+const { addNewEmptyBrand, getPlatformBrandSchema, removeBrandAtIndex } = useStrrPlatformDetails()
+const { platformDetails } = storeToRefs(useStrrPlatformDetails())
+
+const validateBrand = (index: number, field: 'name' | 'website', isBlur = false) => {
+  if (platformDetails.value.brands[index]) {
+    const existingErrors = platformDetails.value.brands[index].errors
+    const errors = getPlatformBrandSchema().safeParse(platformDetails.value.brands[index]).error?.format()
+    if (!isBlur && !isComplete && errors?.[field]?._errors && !existingErrors?.[field]) {
+      // only update the error message if one already exists (otherwise allow user to finish typing)
+      return
+    }
+    platformDetails.value.brands[index].errors = {
+      ...(platformDetails.value.brands[index].errors || {}),
+      [field]: errors?.[field]?._errors[0]
+    }
+  }
+}
+
+onMounted(() => {
+  if (isComplete) {
+    for (const i in platformDetails.value.brands) {
+      validateBrand(Number(i), 'name', true)
+      validateBrand(Number(i), 'website', true)
+    }
+  }
+})
 
 const radioOptions = [
   { value: ListingSize.THOUSAND_OR_MORE, label: tPlat('text.thousandOrMore') },
   { value: ListingSize.UNDER_THOUSAND, label: tPlat('text.lessThanThousand') }]
 
-const platformBrandRef = ref()
-watch(platformBrandRef, (val) => {
-  if (val && isComplete) {
-    val.validate()
-  }
-})
 </script>
 
 <template>
   <div data-testid="platform-details">
     <ConnectPageSection
       class="bg-white"
-      :heading="{ label: tPlat('section.title.details'), labelClass: 'ml-6 font-bold' }"
+      :heading="{ label: tPlat('section.title.details'), labelClass: 'font-bold md:ml-6' }"
     >
-      <UForm
-        ref="platformBrandRef"
-        :state="platformDetails"
-        :schema="platformDetailsSchema"
-        class="space-y-10 pb-10"
-      >
+      <div class="space-y-10 py-10">
         <div
           v-for="brand, i in platformDetails.brands"
           :key="'brand' + i"
         >
-          <ConnectSection :title="tPlat('section.subTitle.brand') + ((i > 0) ? ` ${ i + 1 }` : '')">
+          <ConnectSection
+            :title="tPlat('section.subTitle.brand') + ((i > 0) ? ` ${ i + 1 }` : '')"
+            :error="isComplete && !!(platformDetails.brands[i]?.errors?.name
+              || platformDetails.brands[i]?.errors?.website)"
+          >
             <div class="space-y-5">
               <div class="flex flex-col gap-5 sm:flex-row-reverse">
                 <div>
@@ -52,30 +69,31 @@ watch(platformBrandRef, (val) => {
                 <div class="grow space-y-5">
                   <UFormGroup
                     :aria-label="(i > 0) ? tPlat('label.brandNameOpt') : tPlat('label.brandName')"
+                    :help="tPlat('hint.brandName')"
                     :name="`brands.${i}.brandName`"
-                    :error="isComplete && !brand.name ? 'Required' : ''"
+                    :error="brand.errors?.name"
                   >
                     <ConnectField
                       :id="'platform-brand-name-' + i"
                       v-model="brand.name"
-                      :help="tPlat('hint.brandName')"
-                      :name="`brands.element.test`"
                       :placeholder="(i > 0) ? tPlat('label.brandNameOpt') : tPlat('label.brandName')"
-                      :wrap-with-form-grp="false"
+                      @blur="validateBrand(i, 'name', true)"
+                      @input="validateBrand(i, 'name', false)"
                     />
                   </UFormGroup>
                   <UFormGroup
                     :aria-label="(i > 0) ? tPlat('label.brandSiteOpt') : tPlat('label.brandSite')"
+                    :help="tPlat('hint.brandSite')"
                     :name="`brands.${i}.website`"
-                    :error="isComplete && !brand.website ? 'Required' : ''"
+                    :error="brand.errors?.website"
                   >
                     <ConnectField
                       :id="'platform-brand-site-' + i"
                       v-model="brand.website"
-                      :help="tPlat('hint.brandSite')"
                       name="website"
                       :placeholder="(i > 0) ? tPlat('label.brandSiteOpt') : tPlat('label.brandSite')"
-                      :wrap-with-form-grp="false"
+                      @blur="validateBrand(i, 'website', true)"
+                      @input="validateBrand(i, 'website', false)"
                     />
                   </UFormGroup>
                 </div>
@@ -93,7 +111,7 @@ watch(platformBrandRef, (val) => {
           </ConnectSection>
         </div>
         <div class="h-px w-full border-b border-gray-100" />
-        <ConnectSection :title="tPlat('section.subTitle.size')">
+        <ConnectSection :title="tPlat('section.subTitle.size')" :error="isComplete && !platformDetails.listingSize">
           <URadioGroup
             v-model="platformDetails.listingSize"
             class="p-1"
@@ -104,7 +122,7 @@ watch(platformBrandRef, (val) => {
             :ui-radio="{ inner: 'space-y-2' }"
           />
         </ConnectSection>
-      </UForm>
+      </div>
     </ConnectPageSection>
   </div>
 </template>
diff --git a/strr-pm-web/app/composables/useScreenSize.ts b/strr-pm-web/app/composables/useScreenSize.ts
deleted file mode 100644
index 315a25f9..00000000
--- a/strr-pm-web/app/composables/useScreenSize.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { ref, onMounted, onUnmounted } from 'vue'
-
-const useScreenSize = () => {
-  const width = ref(window.innerWidth)
-  const height = ref(window.innerHeight)
-
-  const handler = () => {
-    width.value = window.innerWidth
-    height.value = window.innerHeight
-  }
-
-  onMounted(() => window.addEventListener('resize', handler))
-  onUnmounted(() => window.removeEventListener('resize', handler))
-
-  return { width, height }
-}
-
-export default useScreenSize
diff --git a/strr-pm-web/app/interfaces/platform-brand.ts b/strr-pm-web/app/interfaces/platform-brand.ts
index a24794fe..44bcf44a 100644
--- a/strr-pm-web/app/interfaces/platform-brand.ts
+++ b/strr-pm-web/app/interfaces/platform-brand.ts
@@ -1,4 +1,8 @@
 export interface PlatBrand {
   name: string
-  website: string
+  website: string,
+  errors?: {
+    name?: string
+    website?: string
+  }
 }
diff --git a/strr-pm-web/app/layouts/connect-form.vue b/strr-pm-web/app/layouts/connect-form.vue
index caead599..c6eef111 100644
--- a/strr-pm-web/app/layouts/connect-form.vue
+++ b/strr-pm-web/app/layouts/connect-form.vue
@@ -14,7 +14,7 @@
         <div class="grow">
           <slot />
         </div>
-        <aside class="fixed bottom-3 w-full pr-8 lg:relative lg:mt-[96px] lg:w-[340px] lg:px-5">
+        <aside class="fixed bottom-3 z-50 w-full pr-8 lg:relative lg:mt-[96px] lg:w-[340px] lg:px-5">
           <ConnectFeeWidget class="lg:sticky lg:top-10" />
         </aside>
       </div>
diff --git a/strr-pm-web/app/locales/en-CA.ts b/strr-pm-web/app/locales/en-CA.ts
index 5fe7b03b..7dc886a2 100644
--- a/strr-pm-web/app/locales/en-CA.ts
+++ b/strr-pm-web/app/locales/en-CA.ts
@@ -246,6 +246,10 @@ export default {
         country: 'Please enter a BC, Canada address'
       }
     },
+    brand: {
+      name: 'Please enter a brand name',
+      site: 'Please enter a valid full url for this brand (i.e. https://www.bcregistry.gov.bc.ca)'
+    },
     business: {
       legalName: 'Please enter the business legal name',
       jurisdiction: 'Please enter the business home jusrisdiction',
@@ -333,7 +337,7 @@ export default {
       rentalUnitDetails: 'Rental Unit Details',
       internetListingDetails: 'Internet Listing Details',
       rentalUnitAddress: 'Rental Unit Address',
-      platformUrl: 'Paltform URL',
+      platformUrl: 'Platform URL',
       primaryDwelling: 'All or part of primary dwelling',
       secondarySuite: 'Secondary suite',
       accessory: 'Accessory dwelling unit',
@@ -478,7 +482,7 @@ export default {
     },
     hint: {
       brandName: 'The brand name for the platform',
-      brandSite: 'The URL for this brand name',
+      brandSite: 'The full URL for this brand (i.e. https://www.bcregistry.gov.bc.ca)',
       businessLegalName: 'The full legal name of the business that is operating the platform. Include corporate designations (e.g., "Ltd.", "Inc.", "LLC")',
       businessNumber: 'Canada Revenue Agency (CRA) Business Number',
       humeJurisdiction: 'The regional or federal jurisdiction where the business was incorporated or registered',
diff --git a/strr-pm-web/app/stores/platformDetails.ts b/strr-pm-web/app/stores/platformDetails.ts
index 42e08b2f..e75de27a 100644
--- a/strr-pm-web/app/stores/platformDetails.ts
+++ b/strr-pm-web/app/stores/platformDetails.ts
@@ -1,15 +1,13 @@
 import { z } from 'zod'
-import { getRequiredNonEmptyString } from '~/utils/connect-validation'
+import { getRequiredNonEmptyString, getRequiredUrl } from '~/utils/connect-validation'
 
 export const useStrrPlatformDetails = defineStore('strr/platformDetails', () => {
   const { t } = useI18n()
-  const platformDetailsSchema = z.object({
-    brands: z.array(z.object({
-      name: getRequiredNonEmptyString(t('validation.brand.name')),
-      website: getRequiredNonEmptyString(t('validation.brand.site'))
-    })).min(1),
-    listingSize: getRequiredNonEmptyString(t('validation.listingSize'))
+  const getPlatformBrandSchema = () => z.object({
+    name: getRequiredNonEmptyString(t('validation.brand.name')),
+    website: getRequiredUrl(t('validation.brand.site'))
   })
+
   const platformDetails = ref<{ brands: PlatBrand[], listingSize: ListingSize | undefined }>({
     brands: [{ name: '', website: '' }],
     listingSize: undefined
@@ -23,7 +21,7 @@ export const useStrrPlatformDetails = defineStore('strr/platformDetails', () =>
   }
   return {
     platformDetails,
-    platformDetailsSchema,
+    getPlatformBrandSchema,
     addNewEmptyBrand,
     removeBrandAtIndex
   }
diff --git a/strr-pm-web/app/utils/connect-validation/index.ts b/strr-pm-web/app/utils/connect-validation/index.ts
index 2ce40584..88f295d3 100644
--- a/strr-pm-web/app/utils/connect-validation/index.ts
+++ b/strr-pm-web/app/utils/connect-validation/index.ts
@@ -17,6 +17,9 @@ export const optionalOrEmptyString = z
 
 export const getRequiredNonEmptyString = (message: string) => z.string().refine(e => e.trim() !== '', message)
 
+export const getRequiredUrl = (message: string) =>
+  z.string().refine(e => e.trim() !== '' && httpRegex.test(e), message)
+
 /**
  * Normalizes a string.
  * If the input is provided, it removes leading, trailing, and extra spaces within the name.