diff --git a/package-lock.json b/package-lock.json
index 0b9735c2..c1659f8c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "business-create-ui",
-  "version": "5.11.19",
+  "version": "5.11.20",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "business-create-ui",
-      "version": "5.11.19",
+      "version": "5.11.20",
       "dependencies": {
         "@babel/compat-data": "^7.21.5",
-        "@bcrs-shared-components/approval-type": "1.0.19",
+        "@bcrs-shared-components/approval-type": "1.1.2",
         "@bcrs-shared-components/base-address": "2.0.3",
         "@bcrs-shared-components/breadcrumb": "2.1.15",
         "@bcrs-shared-components/business-lookup": "1.3.4",
@@ -260,14 +260,48 @@
       }
     },
     "node_modules/@bcrs-shared-components/approval-type": {
-      "version": "1.0.19",
-      "resolved": "https://registry.npmjs.org/@bcrs-shared-components/approval-type/-/approval-type-1.0.19.tgz",
-      "integrity": "sha512-KVMb8xJhGUleoN3YghsKjqQqxB6B9dwjXf4HjzIwsWz05fE9Ok+Sk2/acCw8FvyJj1uvxwQWRu9SgZ23kg9BeA==",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@bcrs-shared-components/approval-type/-/approval-type-1.1.2.tgz",
+      "integrity": "sha512-XenzbwjC4NrtB1I/d6q01qCCywh44MCzTGcaFQr09x5DM6SoQHnhhM8NSsyQSjm1Bw2LhoO7m0U7trX3wP0cuQ==",
       "dependencies": {
-        "@bcrs-shared-components/date-picker": "^1.2.17",
-        "@bcrs-shared-components/enums": "^1.0.38",
-        "@bcrs-shared-components/interfaces": "^1.0.60",
-        "vue-property-decorator": "^9.1.2"
+        "@bcrs-shared-components/date-picker": "^1.3.3",
+        "@bcrs-shared-components/enums": "^1.1.11",
+        "@bcrs-shared-components/interfaces": "^1.1.16",
+        "vue": "^2.7.14"
+      }
+    },
+    "node_modules/@bcrs-shared-components/approval-type/node_modules/@bcrs-shared-components/date-picker": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@bcrs-shared-components/date-picker/-/date-picker-1.3.3.tgz",
+      "integrity": "sha512-s69gYHbd0XdtLqw+GUfQhHCeTR5abqXUoG5bzZ0ompoZ0zMFuAYIGe+u4DrruVhh7GhyeUu0pKjv7wbHuzzs8g==",
+      "dependencies": {
+        "@bcrs-shared-components/interfaces": "^1.1.16",
+        "@bcrs-shared-components/mixins": "^1.1.47",
+        "vue": "^2.7.14"
+      }
+    },
+    "node_modules/@bcrs-shared-components/approval-type/node_modules/@bcrs-shared-components/interfaces": {
+      "version": "1.1.16",
+      "resolved": "https://registry.npmjs.org/@bcrs-shared-components/interfaces/-/interfaces-1.1.16.tgz",
+      "integrity": "sha512-RxmR+6W6t0lRkDGVb4VEHfEqgK76pk42LaJn36aSrd/hNIMfxgHEAqPT21zBJ5on5rvWzFMBemp3hV6DyUTw8Q==",
+      "dependencies": {
+        "@bcrs-shared-components/corp-type-module": "^1.0.16",
+        "@bcrs-shared-components/enums": "^1.1.11",
+        "vue": "^2.7.14"
+      }
+    },
+    "node_modules/@bcrs-shared-components/approval-type/node_modules/@bcrs-shared-components/mixins": {
+      "version": "1.1.47",
+      "resolved": "https://registry.npmjs.org/@bcrs-shared-components/mixins/-/mixins-1.1.47.tgz",
+      "integrity": "sha512-EMlf5F+//0GaEaHnISSLi+Hqbo1hpIdP02nUfP/FoiF79Me0fL4B54mkJFQMsh1kepJewkh2dA4Sm0GUzBnUsw==",
+      "dependencies": {
+        "@bcrs-shared-components/corp-type-module": "^1.0.16",
+        "@bcrs-shared-components/enums": "^1.1.11",
+        "@bcrs-shared-components/interfaces": "^1.1.16",
+        "country-list": "^2.3.0",
+        "lodash": "4.17.21",
+        "provinces": "^1.11.0",
+        "vue": "^2.7.14"
       }
     },
     "node_modules/@bcrs-shared-components/base-address": {
diff --git a/package.json b/package.json
index 2d1ed7c7..b873c86c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "business-create-ui",
-  "version": "5.11.19",
+  "version": "5.11.20",
   "private": true,
   "appName": "Create UI",
   "sbcName": "SBC Common Components",
@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@babel/compat-data": "^7.21.5",
-    "@bcrs-shared-components/approval-type": "1.0.19",
+    "@bcrs-shared-components/approval-type": "1.1.2",
     "@bcrs-shared-components/base-address": "2.0.3",
     "@bcrs-shared-components/breadcrumb": "2.1.15",
     "@bcrs-shared-components/business-lookup": "1.3.4",
diff --git a/src/components/Restoration/ApprovalType.vue b/src/components/Restoration/ApprovalType.vue
index 089a9356..4930a0f2 100644
--- a/src/components/Restoration/ApprovalType.vue
+++ b/src/components/Restoration/ApprovalType.vue
@@ -1,26 +1,24 @@
 <template>
   <div id="approval-type">
-    <div
-      class="section-container"
-    >
-      <ApprovalTypeShared
-        :courtOrderNumber="getRestoration.courtOrder.fileNumber"
-        :approvedByRegistrar="approvedByRegistrar"
-        :noticeDate="getRestoration.noticeDate"
-        :applicationDate="getRestoration.applicationDate"
-        :invalidSection="invalidSection"
-        @radioButtonChange="setRestorationApprovalType($event)"
-        @courtNumberChange="setRestorationCourtOrder({ fileNumber: $event })"
-        @update:noticeDate="setRestorationNoticeDate($event)"
-        @update:applicationDate="setRestorationApplicationDate($event)"
-        @valid="setRestorationApprovalTypeValid($event)"
-      />
-    </div>
+    <ApprovalTypeShared
+      class="pa-8"
+      :courtOrderNumber="getRestoration.courtOrder.fileNumber"
+      :approvedByRegistrar="approvedByRegistrar"
+      :noticeDate="getRestoration.noticeDate"
+      :applicationDate="getRestoration.applicationDate"
+      :invalidSection="invalidSection"
+      :validate="getShowErrors"
+      @radioButtonChange="setRestorationApprovalType($event)"
+      @courtNumberChange="setRestorationCourtOrder({ fileNumber: $event })"
+      @update:noticeDate="setRestorationNoticeDate($event)"
+      @update:applicationDate="setRestorationApplicationDate($event)"
+      @valid="setRestorationApprovalTypeValid($event)"
+    />
   </div>
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Prop, Vue } from 'vue-property-decorator'
 import { Getter, Action } from 'pinia-class'
 import { useStore } from '@/store/store'
 import { ApprovalTypes } from '@/enums'
@@ -33,6 +31,9 @@ import { ApprovalType as ApprovalTypeShared } from '@bcrs-shared-components/appr
   }
 })
 export default class ApprovalType extends Vue {
+  /** Whether this section is invalid. */
+  @Prop({ default: false }) readonly invalidSection!: boolean
+
   @Getter(useStore) getApprovalTypeValid!: boolean
   @Getter(useStore) getRestoration!: RestorationStateIF
   @Getter(useStore) getShowErrors!: boolean
@@ -43,11 +44,6 @@ export default class ApprovalType extends Vue {
   @Action(useStore) setRestorationCourtOrder!: (x: CourtOrderIF) => void
   @Action(useStore) setRestorationNoticeDate!: (x: string) => void
 
-  /** This section's validity state (when prompted by app). */
-  get invalidSection (): boolean {
-    return (this.getShowErrors && !this.getApprovalTypeValid)
-  }
-
   get approvedByRegistrar (): boolean {
     return (!!this.getRestoration.noticeDate && !!this.getRestoration.applicationDate)
   }
diff --git a/src/components/Restoration/RestorationType.vue b/src/components/Restoration/RestorationType.vue
index 5092da3b..9c372364 100644
--- a/src/components/Restoration/RestorationType.vue
+++ b/src/components/Restoration/RestorationType.vue
@@ -1,5 +1,8 @@
 <template>
-  <div id="restoration-type">
+  <div
+    id="restoration-type"
+    :class="{ 'invalid-section': invalidSection }"
+  >
     <div class="section-container">
       <v-row no-gutters>
         <v-col
@@ -90,7 +93,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins, Watch } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
 import { DateMixin, CommonMixin } from '@/mixins'
 import { Getter, Action } from 'pinia-class'
 import { useStore } from '@/store/store'
@@ -106,6 +109,9 @@ import { LimitedRestorationPanel } from '@bcrs-shared-components/limited-restora
   }
 })
 export default class RestorationType extends Mixins(DateMixin, CommonMixin) {
+  /** Whether this section is invalid. */
+  @Prop({ default: false }) readonly invalidSection!: boolean
+
   @Getter(useStore) getCurrentDate!: string
   @Getter(useStore) getRestoration!: RestorationStateIF
   @Getter(useStore) getRestorationTypeValid!: boolean
@@ -124,11 +130,6 @@ export default class RestorationType extends Mixins(DateMixin, CommonMixin) {
   // Enum for template
   readonly RestorationTypes = RestorationTypes
 
-  /** This section's validity state (when prompted by app). */
-  get invalidSection (): boolean {
-    return (this.getShowErrors && !this.getRestorationTypeValid)
-  }
-
   /** The expiry months from the limited restoration draft. */
   get expiryMonths (): number {
     const expiryDate = this.getRestoration.expiry
diff --git a/src/views/Restoration/RestorationBusinessName.vue b/src/views/Restoration/RestorationBusinessName.vue
index 1634acfb..a05d2b21 100644
--- a/src/views/Restoration/RestorationBusinessName.vue
+++ b/src/views/Restoration/RestorationBusinessName.vue
@@ -1,13 +1,13 @@
 <template>
   <div id="restoration-business-name">
-    <!-- Business Name and Name Translations -->
+    <!-- Name section -->
     <section
       id="name-section"
       class="mt-10"
     >
       <header>
         <h2>Name</h2>
-        <p>
+        <p class="pt-2">
           Add a Name Request that is reserved for this restoration application or restore
           as a numbered company.
         </p>
@@ -25,14 +25,16 @@
       </v-card>
     </section>
 
-    <!-- Restoration Type and Approval Type -->
+    <!-- Restoration Type section -->
     <section
       id="restoration-type-section"
       class="mt-10"
     >
       <header>
         <h2>Restoration Type</h2>
-        <p>Determine the restoration and approval type.</p>
+        <p class="pt-2">
+          Determine the restoration and approval type.
+          </p>
       </header>
       <v-card
         flat
@@ -40,20 +42,19 @@
       >
         <RestorationType
           id="restoration-type"
-          :class="{ 'approval-restoration-invalid-section': invalidSectionRestoration }"
+          :invalidSection="invalidSectionRestoration"
         />
 
-        <!-- Divider b/w Restoration and Approval type -->
         <div
-          class="px-5"
           :class="{ 'invalid-divider': invalidSectionRestoration && invalidSectionApproval }"
+          class="px-5"
         >
           <v-divider />
         </div>
 
         <ApprovalType
           id="approval-type"
-          :class="{ 'approval-restoration-invalid-section': invalidSectionApproval }"
+          :invalidSection="invalidSectionApproval"
         />
       </v-card>
     </section>
@@ -157,19 +158,9 @@ h2::before {
   content: counter(header-counter) '. ';
 }
 
-header p {
-  padding-top: 0.5rem;
-}
-
-/* Invalid Section border for Approval and Restoration Type */
-.approval-restoration-invalid-section{
-  box-shadow: inset 3px 0 0 $app-red;
-  border-top-left-radius: 0 !important;
-  border-bottom-left-radius: 0 !important;
-}
-
-#restoration-type-section .v-card .invalid-divider {
+.invalid-divider {
   border-left: 3px solid $BCgovInputError !important;
+  // adjust left padding (was originally px-5)
   padding-left: calc(20px - 3px) !important;
 }
 </style>