diff --git a/packages/examples/src/examples/employee-registration.ts b/packages/examples/src/examples/employee-registration.ts
new file mode 100644
index 0000000000..a9c62e6749
--- /dev/null
+++ b/packages/examples/src/examples/employee-registration.ts
@@ -0,0 +1,688 @@
+/*
+  The MIT License
+  
+  Copyright (c) 2017-2019 EclipseSource Munich
+  https://github.com/eclipsesource/jsonforms
+  
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+  
+  The above copyright notice and this permission notice shall be included in
+  all copies or substantial portions of the Software.
+  
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+  THE SOFTWARE.
+*/
+import { registerExamples } from '../register';
+
+export const schema = {
+  type: 'object',
+  description:
+    'Demonstrates deeply nested vertical, horizontal, and group layouts with conditional visibility',
+  properties: {
+    showPersonalInfo: {
+      type: 'boolean',
+      default: true,
+    },
+    showAddress: {
+      type: 'boolean',
+      default: true,
+    },
+    showEmployment: {
+      type: 'boolean',
+      default: true,
+    },
+    showEmergencyContact: {
+      type: 'boolean',
+      default: true,
+    },
+    showBenefits: {
+      type: 'boolean',
+      default: true,
+    },
+    person: {
+      type: 'object',
+      properties: {
+        firstName: {
+          type: 'string',
+          title: 'First Name',
+        },
+        middleName: {
+          type: 'string',
+          title: 'Middle Name',
+        },
+        lastName: {
+          type: 'string',
+          title: 'Last Name',
+        },
+        dateOfBirth: {
+          type: 'string',
+          format: 'date',
+          title: 'Date of Birth',
+        },
+        email: {
+          type: 'string',
+          format: 'email',
+          title: 'Email',
+        },
+        phone: {
+          type: 'string',
+          title: 'Phone Number',
+        },
+        showIdDetails: {
+          type: 'boolean',
+          title: 'Include ID Details',
+          default: true,
+        },
+        showSsn: {
+          type: 'boolean',
+          title: 'Include SSN',
+          default: true,
+        },
+        showDriversLicense: {
+          type: 'boolean',
+          title: "Include Driver's License",
+          default: true,
+        },
+        ssn: {
+          type: 'string',
+          title: 'Social Security Number',
+        },
+        driversLicense: {
+          type: 'string',
+          title: "Driver's License",
+        },
+      },
+    },
+    address: {
+      type: 'object',
+      properties: {
+        street: {
+          type: 'string',
+          title: 'Street Address',
+        },
+        apartment: {
+          type: 'string',
+          title: 'Apt/Suite',
+        },
+        city: {
+          type: 'string',
+          title: 'City',
+        },
+        state: {
+          type: 'string',
+          title: 'State',
+        },
+        zipCode: {
+          type: 'string',
+          title: 'ZIP Code',
+        },
+        country: {
+          type: 'string',
+          title: 'Country',
+          default: 'USA',
+        },
+      },
+    },
+    employment: {
+      type: 'object',
+      properties: {
+        department: {
+          type: 'string',
+          title: 'Department',
+          enum: ['Engineering', 'Sales', 'Marketing', 'HR', 'Finance'],
+        },
+        position: {
+          type: 'string',
+          title: 'Position',
+        },
+        startDate: {
+          type: 'string',
+          format: 'date',
+          title: 'Start Date',
+        },
+        employmentType: {
+          type: 'string',
+          title: 'Employment Type',
+          enum: ['Full-time', 'Part-time', 'Contract', 'Intern'],
+        },
+        salary: {
+          type: 'number',
+          title: 'Annual Salary',
+        },
+        showManagerInfo: {
+          type: 'boolean',
+          title: 'Assign Manager',
+          default: true,
+        },
+        managerName: {
+          type: 'string',
+          title: 'Manager Name',
+        },
+        managerEmail: {
+          type: 'string',
+          format: 'email',
+          title: 'Manager Email',
+        },
+      },
+    },
+    emergencyContact: {
+      type: 'object',
+      properties: {
+        name: {
+          type: 'string',
+          title: 'Contact Name',
+        },
+        relationship: {
+          type: 'string',
+          title: 'Relationship',
+        },
+        primaryPhone: {
+          type: 'string',
+          title: 'Primary Phone',
+        },
+        showSecondaryContact: {
+          type: 'boolean',
+          title: 'Add Secondary Phone',
+          default: false,
+        },
+        secondaryPhone: {
+          type: 'string',
+          title: 'Secondary Phone',
+        },
+        address: {
+          type: 'string',
+          title: 'Address',
+        },
+      },
+    },
+    benefits: {
+      type: 'object',
+      properties: {
+        healthInsurance: {
+          type: 'boolean',
+          title: 'Health Insurance',
+        },
+        dentalInsurance: {
+          type: 'boolean',
+          title: 'Dental Insurance',
+        },
+        visionInsurance: {
+          type: 'boolean',
+          title: 'Vision Insurance',
+        },
+        show401k: {
+          type: 'boolean',
+          title: 'Enroll in 401(k)',
+          default: false,
+        },
+        contribution401k: {
+          type: 'number',
+          title: '401(k) Contribution %',
+          minimum: 0,
+          maximum: 100,
+        },
+      },
+    },
+  },
+};
+
+export const uischema = {
+  type: 'VerticalLayout',
+  elements: [
+    {
+      type: 'HorizontalLayout',
+      elements: [
+        {
+          type: 'Control',
+          scope: '#/properties/showPersonalInfo',
+          label: 'Show Personal Info',
+        },
+        {
+          type: 'Control',
+          scope: '#/properties/showAddress',
+          label: 'Show Address',
+        },
+        {
+          type: 'Control',
+          scope: '#/properties/showEmployment',
+          label: 'Show Employment',
+        },
+        {
+          type: 'Control',
+          scope: '#/properties/showEmergencyContact',
+          label: 'Show Emergency Contact',
+        },
+        {
+          type: 'Control',
+          scope: '#/properties/showBenefits',
+          label: 'Show Benefits',
+        },
+      ],
+    },
+    {
+      type: 'Group',
+      label: 'Personal Information',
+      rule: {
+        effect: 'SHOW',
+        condition: {
+          scope: '#/properties/showPersonalInfo',
+          schema: { const: true },
+        },
+      },
+      elements: [
+        {
+          type: 'HorizontalLayout',
+          elements: [
+            {
+              type: 'Control',
+              scope: '#/properties/person/properties/firstName',
+            },
+            {
+              type: 'Control',
+              scope: '#/properties/person/properties/middleName',
+            },
+            {
+              type: 'Control',
+              scope: '#/properties/person/properties/lastName',
+            },
+          ],
+        },
+        {
+          type: 'VerticalLayout',
+          elements: [
+            {
+              type: 'HorizontalLayout',
+              elements: [
+                {
+                  type: 'Control',
+                  scope: '#/properties/person/properties/dateOfBirth',
+                },
+                {
+                  type: 'Control',
+                  scope: '#/properties/person/properties/email',
+                },
+                {
+                  type: 'Control',
+                  scope: '#/properties/person/properties/phone',
+                },
+              ],
+            },
+            {
+              type: 'HorizontalLayout',
+              elements: [
+                {
+                  type: 'Control',
+                  scope: '#/properties/person/properties/showIdDetails',
+                },
+                {
+                  type: 'Control',
+                  scope: '#/properties/person/properties/showSsn',
+                },
+                {
+                  type: 'Control',
+                  scope: '#/properties/person/properties/showDriversLicense',
+                },
+              ],
+            },
+            {
+              type: 'HorizontalLayout',
+              rule: {
+                effect: 'SHOW',
+                condition: {
+                  scope: '#/properties/person/properties/showIdDetails',
+                  schema: { const: true },
+                },
+              },
+              elements: [
+                {
+                  type: 'Control',
+                  scope: '#/properties/person/properties/ssn',
+                  rule: {
+                    effect: 'SHOW',
+                    condition: {
+                      scope: '#/properties/person/properties/showSsn',
+                      schema: { const: true },
+                    },
+                  },
+                },
+                {
+                  type: 'Control',
+                  scope: '#/properties/person/properties/driversLicense',
+                  rule: {
+                    effect: 'SHOW',
+                    condition: {
+                      scope:
+                        '#/properties/person/properties/showDriversLicense',
+                      schema: { const: true },
+                    },
+                  },
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+    {
+      type: 'VerticalLayout',
+      rule: {
+        effect: 'SHOW',
+        condition: {
+          scope: '#/properties/showAddress',
+          schema: { const: true },
+        },
+      },
+      elements: [
+        {
+          type: 'Group',
+          label: 'Address',
+          elements: [
+            {
+              type: 'Control',
+              scope: '#/properties/address/properties/street',
+            },
+            {
+              type: 'HorizontalLayout',
+              elements: [
+                {
+                  type: 'Control',
+                  scope: '#/properties/address/properties/apartment',
+                },
+                {
+                  type: 'Control',
+                  scope: '#/properties/address/properties/city',
+                },
+              ],
+            },
+            {
+              type: 'HorizontalLayout',
+              elements: [
+                {
+                  type: 'Control',
+                  scope: '#/properties/address/properties/state',
+                },
+                {
+                  type: 'Control',
+                  scope: '#/properties/address/properties/zipCode',
+                },
+                {
+                  type: 'Control',
+                  scope: '#/properties/address/properties/country',
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+    {
+      type: 'HorizontalLayout',
+      rule: {
+        effect: 'SHOW',
+        condition: {
+          scope: '#/properties/showEmployment',
+          schema: { const: true },
+        },
+      },
+      elements: [
+        {
+          type: 'Group',
+          label: 'Employment Details',
+          elements: [
+            {
+              type: 'VerticalLayout',
+              elements: [
+                {
+                  type: 'HorizontalLayout',
+                  elements: [
+                    {
+                      type: 'Control',
+                      scope: '#/properties/employment/properties/department',
+                    },
+                    {
+                      type: 'Control',
+                      scope: '#/properties/employment/properties/position',
+                    },
+                  ],
+                },
+                {
+                  type: 'HorizontalLayout',
+                  elements: [
+                    {
+                      type: 'Control',
+                      scope: '#/properties/employment/properties/startDate',
+                    },
+                    {
+                      type: 'Control',
+                      scope:
+                        '#/properties/employment/properties/employmentType',
+                    },
+                    {
+                      type: 'Control',
+                      scope: '#/properties/employment/properties/salary',
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+        {
+          type: 'VerticalLayout',
+          elements: [
+            {
+              type: 'Group',
+              label: 'Manager Information',
+              elements: [
+                {
+                  type: 'Control',
+                  scope: '#/properties/employment/properties/showManagerInfo',
+                },
+                {
+                  type: 'VerticalLayout',
+                  rule: {
+                    effect: 'SHOW',
+                    condition: {
+                      scope:
+                        '#/properties/employment/properties/showManagerInfo',
+                      schema: { const: true },
+                    },
+                  },
+                  elements: [
+                    {
+                      type: 'Control',
+                      scope: '#/properties/employment/properties/managerName',
+                    },
+                    {
+                      type: 'Control',
+                      scope: '#/properties/employment/properties/managerEmail',
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+    {
+      type: 'Group',
+      label: 'Emergency Contact',
+      rule: {
+        effect: 'SHOW',
+        condition: {
+          scope: '#/properties/showEmergencyContact',
+          schema: { const: true },
+        },
+      },
+      elements: [
+        {
+          type: 'HorizontalLayout',
+          elements: [
+            {
+              type: 'VerticalLayout',
+              elements: [
+                {
+                  type: 'Control',
+                  scope: '#/properties/emergencyContact/properties/name',
+                },
+                {
+                  type: 'Control',
+                  scope:
+                    '#/properties/emergencyContact/properties/relationship',
+                },
+              ],
+            },
+            {
+              type: 'Group',
+              label: 'Contact Numbers',
+              elements: [
+                {
+                  type: 'VerticalLayout',
+                  elements: [
+                    {
+                      type: 'Control',
+                      scope:
+                        '#/properties/emergencyContact/properties/primaryPhone',
+                    },
+                    {
+                      type: 'Control',
+                      scope:
+                        '#/properties/emergencyContact/properties/showSecondaryContact',
+                    },
+                    {
+                      type: 'Control',
+                      scope:
+                        '#/properties/emergencyContact/properties/secondaryPhone',
+                      rule: {
+                        effect: 'SHOW',
+                        condition: {
+                          scope:
+                            '#/properties/emergencyContact/properties/showSecondaryContact',
+                          schema: { const: true },
+                        },
+                      },
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+        {
+          type: 'Control',
+          scope: '#/properties/emergencyContact/properties/address',
+        },
+      ],
+    },
+    {
+      type: 'VerticalLayout',
+      rule: {
+        effect: 'SHOW',
+        condition: {
+          scope: '#/properties/showBenefits',
+          schema: { const: true },
+        },
+      },
+      elements: [
+        {
+          type: 'HorizontalLayout',
+          elements: [
+            {
+              type: 'Group',
+              label: 'Insurance Options',
+              elements: [
+                {
+                  type: 'VerticalLayout',
+                  elements: [
+                    {
+                      type: 'Control',
+                      scope: '#/properties/benefits/properties/healthInsurance',
+                    },
+                    {
+                      type: 'Control',
+                      scope: '#/properties/benefits/properties/dentalInsurance',
+                    },
+                    {
+                      type: 'Control',
+                      scope: '#/properties/benefits/properties/visionInsurance',
+                    },
+                  ],
+                },
+              ],
+            },
+            {
+              type: 'Group',
+              label: 'Retirement',
+              elements: [
+                {
+                  type: 'VerticalLayout',
+                  elements: [
+                    {
+                      type: 'Control',
+                      scope: '#/properties/benefits/properties/show401k',
+                    },
+                    {
+                      type: 'Control',
+                      scope:
+                        '#/properties/benefits/properties/contribution401k',
+                      rule: {
+                        effect: 'SHOW',
+                        condition: {
+                          scope: '#/properties/benefits/properties/show401k',
+                          schema: { const: true },
+                        },
+                      },
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};
+
+export const data = {
+  showPersonalInfo: true,
+  showAddress: true,
+  showEmployment: true,
+  showEmergencyContact: true,
+  showBenefits: true,
+  person: {
+    showIdDetails: true,
+    showSsn: true,
+    showDriversLicense: true,
+  },
+  employment: {
+    showManagerInfo: true,
+  },
+  emergencyContact: {
+    showSecondaryContact: true,
+  },
+  benefits: {
+    show401k: true,
+  },
+};
+
+registerExamples([
+  {
+    name: 'employee-registration',
+    label: 'Employee Registration',
+    data,
+    schema,
+    uischema,
+  },
+]);
diff --git a/packages/examples/src/index.ts b/packages/examples/src/index.ts
index e200dc8e32..047468720f 100644
--- a/packages/examples/src/index.ts
+++ b/packages/examples/src/index.ts
@@ -72,6 +72,7 @@ import * as readonly from './examples/readonly';
 import * as listWithDetailPrimitives from './examples/list-with-detail-primitives';
 import * as conditionalSchemaComposition from './examples/conditional-schema-compositions';
 import * as additionalErrors from './examples/additional-errors';
+import * as employeeRegistration from './examples/employee-registration';
 import * as multiEnumWithLabelAndDesc from './examples/enum-multi-with-label-and-desc';
 import * as additionalProperties from './examples/additional-properties';
 import * as login from './examples/login';
@@ -133,6 +134,7 @@ export {
   enumExample,
   radioGroupExample,
   multiEnum,
+  employeeRegistration,
   multiEnumWithLabelAndDesc,
   enumInArray,
   readonly,
diff --git a/packages/vue-vuetify/dev/components/ExampleForm.vue b/packages/vue-vuetify/dev/components/ExampleForm.vue
index 25a2e4f6bc..3d6cd481dc 100644
--- a/packages/vue-vuetify/dev/components/ExampleForm.vue
+++ b/packages/vue-vuetify/dev/components/ExampleForm.vue
@@ -96,42 +96,46 @@ const properties = computed<JsonFormsProps>(() => ({
 </script>
 
 <template>
-  <div>
-    <json-forms
-      v-if="resolvedSchema.resolved && resolvedSchema.error === undefined"
-      v-bind="properties"
-      @change="onChange"
-    ></json-forms>
-    <v-container v-else>
-      <v-row
-        v-if="!resolvedSchema.resolved"
-        class="fill-height"
-        align-content="center"
-        justify="center"
+  <v-container fluid>
+    <v-row no-gutters>
+      <v-col
+        v-if="resolvedSchema.resolved && resolvedSchema.error === undefined"
       >
-        <v-col class="text-subtitle-1 text-center" cols="12">
-          Resolving Schema Refs
-        </v-col>
-        <v-col cols="6">
-          <v-progress-linear
-            indeterminate
-            rounded
-            height="6"
-          ></v-progress-linear>
-        </v-col>
-      </v-row>
-      <v-row
-        v-else-if="resolvedSchema.error !== undefined"
-        class="fill-height"
-        align-content="center"
-        justify="center"
-      >
-        <v-col class="text-subtitle-1 text-center" cols="12">
-          <v-alert color="red" dark>
-            {{ resolvedSchema.error }}
-          </v-alert>
-        </v-col>
-      </v-row>
-    </v-container>
-  </div>
+        <json-forms v-bind="properties" @change="onChange"></json-forms>
+      </v-col>
+      <v-col v-else>
+        <v-container>
+          <v-row
+            v-if="!resolvedSchema.resolved"
+            class="fill-height"
+            align-content="center"
+            justify="center"
+          >
+            <v-col class="text-subtitle-1 text-center" cols="12">
+              Resolving Schema Refs
+            </v-col>
+            <v-col cols="6">
+              <v-progress-linear
+                indeterminate
+                rounded
+                height="6"
+              ></v-progress-linear>
+            </v-col>
+          </v-row>
+          <v-row
+            v-else-if="resolvedSchema.error !== undefined"
+            class="fill-height"
+            align-content="center"
+            justify="center"
+          >
+            <v-col class="text-subtitle-1 text-center" cols="12">
+              <v-alert color="red" dark>
+                {{ resolvedSchema.error }}
+              </v-alert>
+            </v-col>
+          </v-row>
+        </v-container>
+      </v-col>
+    </v-row>
+  </v-container>
 </template>
diff --git a/packages/vue-vuetify/dev/plugins/vuetify.ts b/packages/vue-vuetify/dev/plugins/vuetify.ts
index 07c26095c3..a0b7e3eb52 100644
--- a/packages/vue-vuetify/dev/plugins/vuetify.ts
+++ b/packages/vue-vuetify/dev/plugins/vuetify.ts
@@ -131,6 +131,22 @@ function toBlueprint(value: string): Blueprint {
   return md1;
 }
 
+const baseDefaults = {
+  VField: { hideDetails: 'auto' },
+  VTextField: { hideDetails: 'auto' },
+  VCombobox: { hideDetails: 'auto' },
+  VSelect: { hideDetails: 'auto' },
+  VAutocomplete: { hideDetails: 'auto' },
+  VTextarea: { hideDetails: 'auto' },
+  VNumberInput: { density: 'comfortable', hideDetails: 'auto' },
+  VDateInput: { hideDetails: 'auto' },
+  VCheckbox: {
+    density: 'comfortable',
+    hideDetails: 'auto',
+    color: 'primary',
+  },
+};
+
 function createVuetifyInstance(
   dark: boolean,
   blueprint: string,
@@ -139,36 +155,13 @@ function createVuetifyInstance(
   locale: string,
 ) {
   const defaults = variant
-    ? {
-        VField: {
-          variant: variant,
-        },
-        VTextField: {
-          variant: variant,
-        },
-        VCombobox: {
-          variant: variant,
-        },
-        VSelect: {
-          variant: variant,
-        },
-        VAutocomplete: {
-          variant: variant,
-        },
-        VTextarea: {
-          variant: variant,
-        },
-        VNumberInput: {
-          variant: variant,
-        },
-        VDateInput: {
-          variant: variant,
-        },
-        VCheckbox: { color: 'primary' },
-      }
-    : {
-        VCheckbox: { color: 'primary' },
-      };
+    ? Object.fromEntries(
+        Object.entries(baseDefaults).map(([key, props]) => [
+          key,
+          { ...props, variant },
+        ]),
+      )
+    : baseDefaults;
 
   dayjs.locale(locale);
 
diff --git a/packages/vue-vuetify/src/complex/ArrayControlRenderer.vue b/packages/vue-vuetify/src/complex/ArrayControlRenderer.vue
index 303b4f9ef5..bd3b3b7f08 100644
--- a/packages/vue-vuetify/src/complex/ArrayControlRenderer.vue
+++ b/packages/vue-vuetify/src/complex/ArrayControlRenderer.vue
@@ -1,194 +1,210 @@
 <template>
-  <v-card
+  <v-expansion-panels
     v-if="control.visible"
     :class="styles.arrayList.root"
-    elevation="0"
-    v-bind="vuetifyProps('v-card')"
+    flat
+    v-model="openedPanels"
+    v-bind="vuetifyProps('v-expansion-panels')"
   >
-    <v-card-title
-      :class="styles.arrayList.title"
-      v-bind="vuetifyProps('v-card-title')"
-    >
-      <v-toolbar
-        flat
-        :class="styles.arrayList.toolbar"
-        v-bind="vuetifyProps('v-toolbar')"
+    <v-expansion-panel hide-actions>
+      <v-expansion-panel-title
+        :class="`pa-0 ${styles.arrayList.title}`"
+        v-bind="vuetifyProps('v-expansion-panel-title')"
       >
-        <v-toolbar-title :class="styles.arrayList.label">{{
-          computedLabel
-        }}</v-toolbar-title>
-        <v-spacer></v-spacer>
-        <validation-icon
-          v-if="control.childErrors.length > 0"
-          :errors="control.childErrors"
-        />
-        <v-tooltip bottom>
-          <template v-slot:activator="{ props }">
-            <v-btn
-              icon
-              variant="text"
-              elevation="0"
-              small
-              :aria-label="control.translations.addAriaLabel"
-              v-bind="props"
-              :class="styles.arrayList.addButton"
-              :disabled="
-                !control.enabled ||
-                (appliedOptions.restrict &&
-                  control.arraySchema !== undefined &&
-                  control.arraySchema.maxItems !== undefined &&
-                  dataLength >= control.arraySchema.maxItems)
-              "
-              @click="addButtonClick"
-            >
-              <v-icon>{{ icons.current.value.itemAdd }}</v-icon>
-            </v-btn>
-          </template>
-          {{ control.translations.addTooltip }}
-        </v-tooltip>
-      </v-toolbar>
-    </v-card-title>
-    <v-card-text v-bind="vuetifyProps('v-card-text')">
-      <v-container justify-space-around align-content-center>
-        <v-row justify="center">
-          <v-table
-            class="array-container flex"
-            v-bind="vuetifyProps('v-table')"
-          >
-            <thead v-if="control.schema.type === 'object'">
-              <tr>
-                <th
-                  v-for="(prop, index) in validColumnProps"
-                  :key="`${control.path}-header-${validColumnProps.length}-${index}`"
-                  scope="col"
-                >
-                  {{ title(prop) }}
-                </th>
-                <th
-                  v-if="control.enabled"
-                  :class="
-                    appliedOptions.showSortButtons
-                      ? 'fixed-cell'
-                      : 'fixed-cell-small'
-                  "
-                  scope="col"
-                ></th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr
-                v-for="(element, index) in control.data"
-                :key="`${control.path}-${control.data.length}-${index}`"
-                :class="styles.arrayList.item"
-              >
-                <td
-                  v-for="propName in validColumnProps"
-                  :key="
-                    composePaths(
-                      composePaths(
-                        control.path,
-                        `${validColumnProps.length}-${index}`,
-                      ),
-                      propName,
-                    )
+        <v-toolbar
+          flat
+          :class="styles.arrayList.toolbar"
+          v-bind="vuetifyProps('v-toolbar')"
+        >
+          <v-toolbar-title :class="styles.arrayList.label">{{
+            computedLabel
+          }}</v-toolbar-title>
+          <v-spacer></v-spacer>
+          <div class="d-flex ga-1 align-center">
+            <validation-icon
+              @click.stop
+              v-if="control.childErrors.length > 0"
+              :errors="control.childErrors"
+            />
+            <v-tooltip bottom>
+              <template v-slot:activator="{ props }">
+                <v-btn
+                  icon
+                  variant="text"
+                  elevation="0"
+                  small
+                  :aria-label="control.translations.addAriaLabel"
+                  v-bind="props"
+                  :class="styles.arrayList.addButton"
+                  :disabled="
+                    !control.enabled ||
+                    (appliedOptions.restrict &&
+                      control.arraySchema !== undefined &&
+                      control.arraySchema.maxItems !== undefined &&
+                      dataLength >= control.arraySchema.maxItems)
                   "
+                  @click.stop="addButtonClick"
                 >
-                  <dispatch-renderer
-                    :schema="control.schema"
-                    :uischema="resolveUiSchema(propName)"
-                    :path="composePaths(control.path, `${index}`)"
-                    :enabled="control.enabled"
-                    :renderers="control.renderers"
-                    :cells="control.cells"
-                  />
-                </td>
-                <td
-                  v-if="control.enabled"
-                  :class="
-                    appliedOptions.showSortButtons
-                      ? 'fixed-cell'
-                      : 'fixed-cell-small'
-                  "
+                  <v-icon>{{ icons.current.value.itemAdd }}</v-icon>
+                </v-btn>
+              </template>
+              {{ control.translations.addTooltip }}
+            </v-tooltip>
+            <v-btn icon variant="text" small @click.stop="togglePanel">
+              <v-icon>
+                {{ isSelected ? collapseIcon : expandIcon }}
+              </v-icon>
+            </v-btn>
+          </div>
+        </v-toolbar>
+      </v-expansion-panel-title>
+      <v-expansion-panel-text
+        class="array-data-panel"
+        v-bind="vuetifyProps('v-expansion-panel-text')"
+      >
+        <v-container justify-space-around align-content-center fluid>
+          <v-row justify="center">
+            <v-table
+              class="array-container flex"
+              v-bind="vuetifyProps('v-table')"
+            >
+              <thead v-if="control.schema.type === 'object'">
+                <tr>
+                  <th
+                    v-for="(prop, index) in validColumnProps"
+                    :key="`${control.path}-header-${validColumnProps.length}-${index}`"
+                    scope="col"
+                  >
+                    {{ title(prop) }}
+                  </th>
+                  <th
+                    v-if="control.enabled"
+                    :class="
+                      appliedOptions.showSortButtons
+                        ? 'fixed-cell'
+                        : 'fixed-cell-small'
+                    "
+                    scope="col"
+                  ></th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr
+                  v-for="(element, index) in control.data"
+                  :key="`${control.path}-${control.data.length}-${index}`"
+                  :class="styles.arrayList.item"
                 >
-                  <v-tooltip bottom>
-                    <template v-slot:activator="{ props }">
-                      <v-btn
-                        v-bind="props"
-                        v-if="appliedOptions.showSortButtons"
-                        icon
-                        variant="text"
-                        elevation="0"
-                        small
-                        :aria-label="control.translations.upAriaLabel"
-                        :disabled="index <= 0 || !control.enabled"
-                        :class="styles.arrayList.itemMoveUp"
-                        @click="moveUpClick($event, index)"
-                      >
-                        <v-icon class="notranslate">{{
-                          icons.current.value.itemMoveUp
-                        }}</v-icon>
-                      </v-btn>
-                    </template>
-                    {{ control.translations.up }}
-                  </v-tooltip>
-                  <v-tooltip bottom>
-                    <template v-slot:activator="{ props }">
-                      <v-btn
-                        v-bind="props"
-                        v-if="appliedOptions.showSortButtons"
-                        icon
-                        variant="text"
-                        elevation="0"
-                        small
-                        :aria-label="control.translations.downAriaLabel"
-                        :disabled="index >= dataLength - 1 || !control.enabled"
-                        :class="styles.arrayList.itemMoveDown"
-                        @click="moveDownClick($event, index)"
-                      >
-                        <v-icon class="notranslate">{{
-                          icons.current.value.itemMoveDown
-                        }}</v-icon>
-                      </v-btn>
-                    </template>
-                    {{ control.translations.down }}
-                  </v-tooltip>
-                  <v-tooltip bottom>
-                    <template v-slot:activator="{ props }">
-                      <v-btn
-                        v-bind="props"
-                        icon
-                        variant="text"
-                        elevation="0"
-                        small
-                        :aria-label="control.translations.removeAriaLabel"
-                        :class="styles.arrayList.itemDelete"
-                        :disabled="
-                          !control.enabled ||
-                          (appliedOptions.restrict &&
-                            control.arraySchema !== undefined &&
-                            control.arraySchema.minItems !== undefined &&
-                            dataLength <= control.arraySchema.minItems)
-                        "
-                        @click="removeItemsClick($event, [index])"
-                      >
-                        <v-icon class="notranslate">{{
-                          icons.current.value.itemDelete
-                        }}</v-icon>
-                      </v-btn>
-                    </template>
-                    {{ control.translations.removeTooltip }}
-                  </v-tooltip>
-                </td>
-              </tr>
-            </tbody>
-          </v-table>
-        </v-row>
-      </v-container>
-      <v-container v-if="dataLength === 0" :class="styles.arrayList.noData">
-        {{ control.translations.noDataMessage }}
-      </v-container>
-    </v-card-text>
-  </v-card>
+                  <td
+                    v-for="propName in validColumnProps"
+                    :key="
+                      composePaths(
+                        composePaths(
+                          control.path,
+                          `${validColumnProps.length}-${index}`,
+                        ),
+                        propName,
+                      )
+                    "
+                  >
+                    <dispatch-renderer
+                      :schema="control.schema"
+                      :uischema="resolveUiSchema(propName)"
+                      :path="composePaths(control.path, `${index}`)"
+                      :enabled="control.enabled"
+                      :renderers="control.renderers"
+                      :cells="control.cells"
+                    />
+                  </td>
+                  <td
+                    v-if="control.enabled"
+                    :class="
+                      appliedOptions.showSortButtons
+                        ? 'fixed-cell'
+                        : 'fixed-cell-small'
+                    "
+                  >
+                    <v-tooltip bottom>
+                      <template v-slot:activator="{ props }">
+                        <v-btn
+                          v-bind="props"
+                          v-if="appliedOptions.showSortButtons"
+                          icon
+                          variant="text"
+                          elevation="0"
+                          small
+                          :aria-label="control.translations.upAriaLabel"
+                          :disabled="index <= 0 || !control.enabled"
+                          :class="styles.arrayList.itemMoveUp"
+                          @click="moveUpClick($event, index)"
+                        >
+                          <v-icon class="notranslate">{{
+                            icons.current.value.itemMoveUp
+                          }}</v-icon>
+                        </v-btn>
+                      </template>
+                      {{ control.translations.up }}
+                    </v-tooltip>
+                    <v-tooltip bottom>
+                      <template v-slot:activator="{ props }">
+                        <v-btn
+                          v-bind="props"
+                          v-if="appliedOptions.showSortButtons"
+                          icon
+                          variant="text"
+                          elevation="0"
+                          small
+                          :aria-label="control.translations.downAriaLabel"
+                          :disabled="
+                            index >= dataLength - 1 || !control.enabled
+                          "
+                          :class="styles.arrayList.itemMoveDown"
+                          @click="moveDownClick($event, index)"
+                        >
+                          <v-icon class="notranslate">{{
+                            icons.current.value.itemMoveDown
+                          }}</v-icon>
+                        </v-btn>
+                      </template>
+                      {{ control.translations.down }}
+                    </v-tooltip>
+                    <v-tooltip bottom>
+                      <template v-slot:activator="{ props }">
+                        <v-btn
+                          v-bind="props"
+                          icon
+                          variant="text"
+                          elevation="0"
+                          small
+                          :aria-label="control.translations.removeAriaLabel"
+                          :class="styles.arrayList.itemDelete"
+                          :disabled="
+                            !control.enabled ||
+                            (appliedOptions.restrict &&
+                              control.arraySchema !== undefined &&
+                              control.arraySchema.minItems !== undefined &&
+                              dataLength <= control.arraySchema.minItems)
+                          "
+                          @click="removeItemsClick($event, [index])"
+                        >
+                          <v-icon class="notranslate">{{
+                            icons.current.value.itemDelete
+                          }}</v-icon>
+                        </v-btn>
+                      </template>
+                      {{ control.translations.removeTooltip }}
+                    </v-tooltip>
+                  </td>
+                </tr>
+              </tbody>
+            </v-table>
+          </v-row>
+        </v-container>
+        <v-container v-if="dataLength === 0" :class="styles.arrayList.noData">
+          {{ control.translations.noDataMessage }}
+        </v-container>
+      </v-expansion-panel-text>
+    </v-expansion-panel>
+  </v-expansion-panels>
 </template>
 
 <script lang="ts">
@@ -204,12 +220,13 @@ import {
   type RendererProps,
 } from '@jsonforms/vue';
 import startCase from 'lodash/startCase';
-import { defineComponent } from 'vue';
+import { defineComponent, ref } from 'vue';
 import {
   VBtn,
-  VCard,
-  VCardText,
-  VCardTitle,
+  VExpansionPanel,
+  VExpansionPanelText,
+  VExpansionPanelTitle,
+  VExpansionPanels,
   VContainer,
   VIcon,
   VRow,
@@ -221,14 +238,16 @@ import {
 } from 'vuetify/components';
 import { ValidationIcon } from '../controls/components/index';
 import { useIcons, useVuetifyArrayControl } from '../util';
+import type { IconValue } from '@/icons';
 
 const controlRenderer = defineComponent({
   name: 'array-control-renderer',
   components: {
     DispatchRenderer,
-    VCard,
-    VCardTitle,
-    VCardText,
+    VExpansionPanel,
+    VExpansionPanelText,
+    VExpansionPanelTitle,
+    VExpansionPanels,
     VRow,
     VToolbar,
     VToolbarTitle,
@@ -246,10 +265,12 @@ const controlRenderer = defineComponent({
   setup(props: RendererProps<ControlElement>) {
     const icons = useIcons();
     const input = useJsonFormsArrayControl(props);
+    const openedPanels = ref<number | number[] | null>(0);
 
     return {
       ...useVuetifyArrayControl(input),
       icons,
+      openedPanels,
     };
   },
   computed: {
@@ -268,10 +289,28 @@ const controlRenderer = defineComponent({
       // primitives
       return [''];
     },
+    isSelected(): boolean {
+      return Array.isArray(this.openedPanels)
+        ? this.openedPanels.includes(0)
+        : this.openedPanels === 0;
+    },
+    expandIcon(): IconValue {
+      return (
+        this.vuetifyProps('v-expansion-panel-title').expandIcon ?? '$expand'
+      );
+    },
+    collapseIcon(): IconValue {
+      return (
+        this.vuetifyProps('v-expansion-panel-title').collapseIcon ?? '$collapse'
+      );
+    },
   },
   methods: {
     composePaths,
     createDefaultValue,
+    togglePanel() {
+      this.openedPanels = this.isSelected ? null : 0;
+    },
     addButtonClick() {
       this.addItem(
         this.control.path,
@@ -308,6 +347,12 @@ export default controlRenderer;
 </script>
 
 <style scoped>
+:deep(
+    .v-expansion-panel-text.array-data-panel > .v-expansion-panel-text__wrapper
+  ) {
+  padding: 0;
+}
+
 .fixed-cell {
   width: 150px;
   padding-left: 0 !important;
diff --git a/packages/vue-vuetify/src/complex/ObjectRenderer.vue b/packages/vue-vuetify/src/complex/ObjectRenderer.vue
index 81d0f7f4da..04c41bb954 100644
--- a/packages/vue-vuetify/src/complex/ObjectRenderer.vue
+++ b/packages/vue-vuetify/src/complex/ObjectRenderer.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="control.visible">
+  <div v-if="control.visible" class="d-flex flex-column ga-4">
     <dispatch-renderer
       :visible="control.visible"
       :enabled="control.enabled"
diff --git a/packages/vue-vuetify/src/complex/components/AdditionalProperties.vue b/packages/vue-vuetify/src/complex/components/AdditionalProperties.vue
index 5d93c80378..f8645b96e3 100644
--- a/packages/vue-vuetify/src/complex/components/AdditionalProperties.vue
+++ b/packages/vue-vuetify/src/complex/components/AdditionalProperties.vue
@@ -1,92 +1,102 @@
 <template>
-  <v-card v-if="control.visible" v-bind="vuetifyProps('v-card')" flat>
-    <v-container class="py-0">
-      <v-row no-gutters>
-        <v-col v-if="mdAndUp && additionalPropertiesTitle">
-          {{ additionalPropertiesTitle }}</v-col
-        >
-        <v-col>
-          <json-forms
-            :data="newPropertyName"
-            :uischema="
-              {
-                type: 'Control',
-                scope: '#',
-                label: propertyNameLabel,
-              } as UISchemaElement
-            "
-            :schema="propertyNameSchema"
-            :additionalErrors="additionalErrors"
-            :renderers="control.renderers"
-            :cells="control.cells"
-            :config="control.config"
-            :readonly="!control.enabled"
-            :validation-mode="validationMode"
-            :i18n="i18n"
-            :ajv="ajv"
-            :middleware="middleware"
-            @change="propertyNameChange"
-          ></json-forms
-        ></v-col>
-        <v-tooltip bottom>
-          <template v-slot:activator="{ props }">
-            <v-btn
-              icon
-              variant="text"
-              elevation="0"
-              small
-              :aria-label="translations.addAriaLabel"
-              v-bind="props"
-              :disabled="addPropertyDisabled"
-              @click="addProperty"
+  <v-expansion-panels
+    v-if="control.visible"
+    v-bind="vuetifyProps('v-expansion-panels')"
+    v-model="openedPanels"
+    flat
+  >
+    <v-expansion-panel>
+      <v-expansion-panel-title class="pa-0">
+        <v-container class="pa-0 ma-0" fluid @click.stop>
+          <v-row no-gutters>
+            <v-col v-if="mdAndUp && additionalPropertiesTitle">
+              {{ additionalPropertiesTitle }}</v-col
             >
-              <v-icon>{{ icons.current.value.itemAdd }}</v-icon>
-            </v-btn>
-          </template>
-          {{ translations.addTooltip }}
-        </v-tooltip>
-      </v-row>
-    </v-container>
-    <v-container v-bind="vuetifyProps('v-container')" class="py-0">
-      <v-row
-        no-gutters
-        v-for="element in additionalPropertyItems"
-        :key="`${element.propertyName}`"
-      >
-        <v-col class="flex-shrink-0 flex-grow-1">
-          <dispatch-renderer
-            v-if="element.schema && element.uischema"
-            :schema="element.schema"
-            :uischema="element.uischema"
-            :path="element.path"
-            :enabled="control.enabled"
-            :renderers="control.renderers"
-            :cells="control.cells"
-        /></v-col>
-        <v-col v-if="control.enabled" class="flex-shrink-1 flex-grow-0">
-          <v-tooltip bottom>
-            <template v-slot:activator="{ props }">
-              <v-btn
-                v-bind="props"
-                icon
-                variant="text"
-                elevation="0"
-                small
-                :aria-label="translations.removeAriaLabel"
-                :disabled="removePropertyDisabled"
-                @click="removeProperty(element.propertyName)"
-              >
-                <v-icon class="notranslate">{{
-                  icons.current.value.itemDelete
-                }}</v-icon>
-              </v-btn>
-            </template>
-            {{ translations.removeTooltip }}
-          </v-tooltip></v-col
-        >
-      </v-row>
-    </v-container>
-  </v-card>
+            <v-col>
+              <json-forms
+                :data="newPropertyName"
+                :uischema="
+                  {
+                    type: 'Control',
+                    scope: '#',
+                    label: propertyNameLabel,
+                  } as UISchemaElement
+                "
+                :schema="propertyNameSchema"
+                :additionalErrors="additionalErrors"
+                :renderers="control.renderers"
+                :cells="control.cells"
+                :config="control.config"
+                :readonly="!control.enabled"
+                :validation-mode="validationMode"
+                :i18n="i18n"
+                :ajv="ajv"
+                :middleware="middleware"
+                @change="propertyNameChange"
+              ></json-forms
+            ></v-col>
+            <v-tooltip bottom>
+              <template v-slot:activator="{ props }">
+                <v-btn
+                  icon
+                  variant="text"
+                  elevation="0"
+                  small
+                  :aria-label="translations.addAriaLabel"
+                  v-bind="props"
+                  :disabled="addPropertyDisabled"
+                  @click="addProperty"
+                >
+                  <v-icon>{{ icons.current.value.itemAdd }}</v-icon>
+                </v-btn>
+              </template>
+              {{ translations.addTooltip }}
+            </v-tooltip>
+          </v-row>
+        </v-container>
+      </v-expansion-panel-title>
+      <v-expansion-panel-text class="additional-properties-panel">
+        <v-container v-bind="vuetifyProps('v-container')" class="pa-0" fluid>
+          <v-row
+            v-for="element in additionalPropertyItems"
+            :key="`${element.propertyName}`"
+          >
+            <v-col class="flex-shrink-0 flex-grow-1">
+              <dispatch-renderer
+                v-if="element.schema && element.uischema"
+                :schema="element.schema"
+                :uischema="element.uischema"
+                :path="element.path"
+                :enabled="control.enabled"
+                :renderers="control.renderers"
+                :cells="control.cells"
+            /></v-col>
+            <v-col v-if="control.enabled" class="flex-shrink-1 flex-grow-0">
+              <v-tooltip bottom>
+                <template v-slot:activator="{ props }">
+                  <v-btn
+                    v-bind="props"
+                    icon
+                    variant="text"
+                    elevation="0"
+                    small
+                    :aria-label="translations.removeAriaLabel"
+                    :disabled="removePropertyDisabled"
+                    @click="removeProperty(element.propertyName)"
+                  >
+                    <v-icon class="notranslate">{{
+                      icons.current.value.itemDelete
+                    }}</v-icon>
+                  </v-btn>
+                </template>
+                {{ translations.removeTooltip }}
+              </v-tooltip></v-col
+            >
+          </v-row>
+        </v-container>
+      </v-expansion-panel-text>
+    </v-expansion-panel>
+  </v-expansion-panels>
 </template>
 
 <script lang="ts">
@@ -102,7 +112,6 @@ import {
   getI18nKeyPrefix,
   type GroupLayout,
   type JsonSchema,
-  type JsonSchema4,
   type JsonSchema7,
   type UISchemaElement,
 } from '@jsonforms/core';
@@ -119,6 +128,7 @@ import isPlainObject from 'lodash/isPlainObject';
 import omit from 'lodash/omit';
 import startCase from 'lodash/startCase';
 
+import { IsDynamicPropertyContext } from '@/util/inject';
 import {
   computed,
   defineComponent,
@@ -131,9 +141,12 @@ import {
 import { useDisplay } from 'vuetify';
 import {
   VBtn,
-  VCard,
   VCol,
   VContainer,
+  VExpansionPanel,
+  VExpansionPanelText,
+  VExpansionPanelTitle,
+  VExpansionPanels,
   VIcon,
   VRow,
   VTooltip,
@@ -146,7 +159,6 @@ import {
   useJsonForms,
   useTranslator,
 } from '../../util';
-import { IsDynamicPropertyContext } from '@/util/inject';
 
 type Input = ReturnType<typeof useJsonFormsControlWithDetail>;
 interface AdditionalPropertyType {
@@ -160,7 +172,10 @@ export default defineComponent({
   name: 'additional-properties',
   components: {
     DispatchRenderer,
-    VCard,
+    VExpansionPanels,
+    VExpansionPanel,
+    VExpansionPanelTitle,
+    VExpansionPanelText,
     VTooltip,
     VIcon,
     VBtn,
@@ -193,7 +208,6 @@ export default defineComponent({
 
     const toAdditionalPropertyType = (
       propName: string,
-      propValue: any,
       parentSchema: JsonSchema,
       rootSchema: JsonSchema,
     ): AdditionalPropertyType => {
@@ -280,7 +294,6 @@ export default defineComponent({
       additionalKeys.value.map((propName) =>
         toAdditionalPropertyType(
           propName,
-          control.value.data[propName],
           control.value.schema,
           control.value.rootSchema,
         ),
@@ -419,7 +432,10 @@ export default defineComponent({
     // use the default value since all properties are dynamic so preserve the property key
     provide(IsDynamicPropertyContext, true);
 
+    const openedPanels = ref<number | number[]>(0);
+
     return {
+      openedPanels,
       validationMode: validationMode,
       i18n: i18n ? markRaw(i18n) : i18n,
       middleware: middleware ? markRaw(middleware) : middleware,
@@ -514,7 +530,6 @@ export default defineComponent({
           this.additionalPropertyItems = this.additionalKeys.map((propName) =>
             this.toAdditionalPropertyType(
               propName,
-              newData[propName],
               this.control.schema,
               this.control.rootSchema,
             ),
@@ -530,7 +545,6 @@ export default defineComponent({
       if (this.newPropertyName) {
         const additionalProperty = this.toAdditionalPropertyType(
           this.newPropertyName,
-          undefined,
           this.control.schema,
           this.control.rootSchema,
         );
@@ -571,3 +585,12 @@ export default defineComponent({
   },
 });
 </script>
+
+<style scoped>
+:deep(
+    .v-expansion-panel-text.additional-properties-panel
+      > .v-expansion-panel-text__wrapper
+  ) {
+  padding: 0;
+}
+</style>
diff --git a/packages/vue-vuetify/src/controls/IntegerControlRenderer.vue b/packages/vue-vuetify/src/controls/IntegerControlRenderer.vue
index 42b9c380ec..90fc5aaa6f 100644
--- a/packages/vue-vuetify/src/controls/IntegerControlRenderer.vue
+++ b/packages/vue-vuetify/src/controls/IntegerControlRenderer.vue
@@ -20,7 +20,7 @@
       :error-messages="control.errors"
       :model-value="value"
       :clearable="clearable"
-      v-bind="vuetifyProps('v-text-field')"
+      v-bind="vuetifyProps('v-number-input')"
       @update:model-value="onChange"
       @focus="handleFocus"
       @blur="handleBlur"
diff --git a/packages/vue-vuetify/src/controls/OneOfRadioGroupControlRenderer.vue b/packages/vue-vuetify/src/controls/OneOfRadioGroupControlRenderer.vue
index 02fe10608f..5a5878c6ea 100644
--- a/packages/vue-vuetify/src/controls/OneOfRadioGroupControlRenderer.vue
+++ b/packages/vue-vuetify/src/controls/OneOfRadioGroupControlRenderer.vue
@@ -18,6 +18,7 @@
       :persistent-hint="persistentHint()"
       :required="control.required"
       :error-messages="control.errors"
+      :inline="inline"
       v-bind="vuetifyProps('v-radio-group')"
       :model-value="control.data"
       @update:model-value="onChange"
@@ -67,6 +68,16 @@ const controlRenderer = defineComponent({
   setup(props: RendererProps<ControlElement>) {
     return useVuetifyControl(useJsonFormsOneOfEnumControl(props));
   },
+  computed: {
+    inline(): boolean {
+      let inline = this.vuetifyProps('v-radio-group')?.inline;
+      if (typeof inline === 'boolean') {
+        return inline;
+      }
+
+      return this.appliedOptions?.['orientation'] !== 'vertical';
+    },
+  },
 });
 
 export default controlRenderer;
diff --git a/packages/vue-vuetify/src/controls/PasswordControlRenderer.vue b/packages/vue-vuetify/src/controls/PasswordControlRenderer.vue
index 593d2a87cf..ad18adc38b 100644
--- a/packages/vue-vuetify/src/controls/PasswordControlRenderer.vue
+++ b/packages/vue-vuetify/src/controls/PasswordControlRenderer.vue
@@ -54,7 +54,7 @@ import {
 } from '@jsonforms/vue';
 import { defineComponent, ref } from 'vue';
 import { VTextField } from 'vuetify/components';
-import { useIcons, useVuetifyControl } from '../util';
+import { determineClearValue, useIcons, useVuetifyControl } from '../util';
 import { default as ControlWrapper } from './ControlWrapper.vue';
 
 const controlRenderer = defineComponent({
@@ -67,13 +67,14 @@ const controlRenderer = defineComponent({
     ...rendererProps<ControlElement>(),
   },
   setup(props: RendererProps<ControlElement>) {
+    const clearValue = determineClearValue('');
     const showPassword = ref(false);
     const icons = useIcons();
 
     return {
       ...useVuetifyControl(
         useJsonFormsControl(props),
-        (value) => value || undefined,
+        (value) => value || clearValue,
         300,
       ),
       showPassword,
diff --git a/packages/vue-vuetify/src/controls/RadioGroupControlRenderer.vue b/packages/vue-vuetify/src/controls/RadioGroupControlRenderer.vue
index b9f03f228f..4fbce3d81b 100644
--- a/packages/vue-vuetify/src/controls/RadioGroupControlRenderer.vue
+++ b/packages/vue-vuetify/src/controls/RadioGroupControlRenderer.vue
@@ -19,6 +19,7 @@
       :required="control.required"
       :error-messages="control.errors"
       :model-value="control.data"
+      :inline="inline"
       v-bind="vuetifyProps('v-radio-group')"
       @update:model-value="onChange"
       @focus="handleFocus"
@@ -67,6 +68,16 @@ const controlRenderer = defineComponent({
   setup(props: RendererProps<ControlElement>) {
     return useVuetifyControl(useJsonFormsEnumControl(props));
   },
+  computed: {
+    inline(): boolean {
+      let inline = this.vuetifyProps('v-radio-group')?.inline;
+      if (typeof inline === 'boolean') {
+        return inline;
+      }
+
+      return this.appliedOptions?.['orientation'] !== 'vertical';
+    },
+  },
 });
 
 export default controlRenderer;
diff --git a/packages/vue-vuetify/src/layouts/ArrayLayoutRenderer.vue b/packages/vue-vuetify/src/layouts/ArrayLayoutRenderer.vue
index b0263a00c3..ce1220c3f7 100644
--- a/packages/vue-vuetify/src/layouts/ArrayLayoutRenderer.vue
+++ b/packages/vue-vuetify/src/layouts/ArrayLayoutRenderer.vue
@@ -1,271 +1,296 @@
 <template>
-  <v-card
+  <v-expansion-panels
     v-if="control.visible"
     :class="styles.arrayList.root"
-    v-bind="vuetifyProps('v-card')"
+    v-model="openedPanels"
+    flat
+    v-bind="vuetifyProps('v-expansion-panels')"
   >
-    <v-card-title
-      :class="styles.arrayList.title"
-      v-bind="vuetifyProps('v-card-title')"
-    >
-      <v-toolbar
-        flat
-        :class="styles.arrayList.toolbar"
-        v-bind="vuetifyProps('v-toolbar')"
+    <v-expansion-panel hide-actions>
+      <v-expansion-panel-title
+        :class="`pa-0 ${styles.arrayList.title}`"
+        v-bind="vuetifyProps('v-expansion-panel-title')"
       >
-        <v-toolbar-title :class="styles.arrayList.label">{{
-          computedLabel
-        }}</v-toolbar-title>
-        <v-spacer></v-spacer>
-        <validation-icon
-          v-if="
-            control.childErrors.length > 0 &&
-            !appliedOptions.hideArraySummaryValidation
-          "
-          :errors="control.childErrors"
-          :class="styles.arrayList.validationIcon"
-        />
-        <slot
-          name="toolbar-elements"
-          :addClass="styles.arrayList.addButton"
-          :addDisabled="addDisabled"
-          :addClick="addButtonClick"
-          :control="control"
-          :appliedOptions="appliedOptions"
-          :styles="styles"
-          :icons="icons"
+        <v-toolbar
+          flat
+          :class="styles.arrayList.toolbar"
+          v-bind="vuetifyProps('v-toolbar')"
         >
-          <v-tooltip bottom>
-            <template v-slot:activator="{ props }">
-              <v-btn
-                icon
-                variant="text"
-                elevation="0"
-                small
-                :aria-label="control.translations.addAriaLabel"
-                v-bind="props"
-                :class="styles.arrayList.addButton"
-                :disabled="addDisabled"
-                @click="addButtonClick"
-              >
-                <v-icon>{{ icons.current.value.itemAdd }}</v-icon>
-              </v-btn>
-            </template>
-            {{ control.translations.addTooltip }}
-          </v-tooltip>
-        </slot>
-      </v-toolbar>
-    </v-card-title>
-    <v-card-text v-bind="vuetifyProps('v-card-text')">
-      <v-container
-        justify-space-around
-        align-content-center
-        :class="styles.arrayList.container"
+          <v-toolbar-title :class="styles.arrayList.label">{{
+            computedLabel
+          }}</v-toolbar-title>
+          <v-spacer></v-spacer>
+          <div class="d-flex ga-1 align-center">
+            <validation-icon
+              v-if="
+                control.childErrors.length > 0 &&
+                !appliedOptions.hideArraySummaryValidation
+              "
+              :errors="control.childErrors"
+              :class="styles.arrayList.validationIcon"
+            />
+            <slot
+              name="toolbar-elements"
+              :addClass="styles.arrayList.addButton"
+              :addDisabled="addDisabled"
+              :addClick="addButtonClick"
+              :control="control"
+              :appliedOptions="appliedOptions"
+              :styles="styles"
+              :icons="icons"
+            >
+              <v-tooltip bottom>
+                <template v-slot:activator="{ props }">
+                  <v-btn
+                    icon
+                    variant="text"
+                    elevation="0"
+                    small
+                    :aria-label="control.translations.addAriaLabel"
+                    v-bind="props"
+                    :class="styles.arrayList.addButton"
+                    :disabled="addDisabled"
+                    @click.stop="addButtonClick"
+                  >
+                    <v-icon>{{ icons.current.value.itemAdd }}</v-icon>
+                  </v-btn>
+                </template>
+                {{ control.translations.addTooltip }}
+              </v-tooltip>
+            </slot>
+            <v-btn icon variant="text" small @click.stop="togglePanel">
+              <v-icon>
+                {{ isSelected ? collapseIcon : expandIcon }}
+              </v-icon>
+            </v-btn>
+          </div>
+        </v-toolbar>
+      </v-expansion-panel-title>
+      <v-expansion-panel-text
+        class="array-data-panel"
+        v-bind="vuetifyProps('v-expansion-panel-text')"
       >
-        <v-row justify="center">
-          <v-expansion-panels
-            accordion
-            v-bind="expansionPanelsProps"
-            v-model="currentlyExpanded"
-          >
-            <v-expansion-panel
-              v-for="(_element, index) in control.data"
-              :key="`${control.path}-${control.data.length}-${index}`"
-              :class="styles.arrayList.item"
+        <v-card :class="styles.arrayList.container" flat>
+          <v-card-text v-if="dataLength > 0">
+            <v-expansion-panels
+              accordion
+              v-bind="expansionPanelsProps"
+              v-model="currentlyExpanded"
             >
-              <v-expansion-panel-title
-                :class="`${styles.arrayList.itemHeader} py-0`"
+              <v-expansion-panel
+                v-for="(_element, index) in control.data"
+                :key="`${control.path}-${control.data.length}-${index}`"
+                :class="styles.arrayList.item"
               >
-                <v-container :class="`${styles.arrayList.itemContainer} py-0`">
-                  <v-row
-                    :style="`display: grid; grid-template-columns: ${
-                      !hideAvatar ? 'min-content' : ''
-                    } auto min-content ${
-                      appliedOptions.showSortButtons
-                        ? 'min-content min-content'
-                        : ''
-                    }`"
+                <v-expansion-panel-title
+                  :class="`${styles.arrayList.itemHeader} py-0`"
+                >
+                  <v-container
+                    :class="`${styles.arrayList.itemContainer} py-0`"
+                    fluid
                   >
-                    <v-col v-if="!hideAvatar" align-self="center" class="pl-0">
-                      <validation-badge
-                        overlap
-                        bordered
-                        :errors="childErrors(index)"
+                    <v-row
+                      :style="`display: grid; grid-template-columns: ${
+                        !hideAvatar ? 'min-content' : ''
+                      } auto min-content ${
+                        appliedOptions.showSortButtons
+                          ? 'min-content min-content'
+                          : ''
+                      }`"
+                    >
+                      <v-col
+                        v-if="!hideAvatar"
+                        align-self="center"
+                        class="pl-0"
                       >
-                        <v-avatar size="40" aria-label="Index" color="primary">
-                          <span class="primary--text text--lighten-5">{{
-                            index + 1
-                          }}</span></v-avatar
+                        <validation-badge
+                          overlap
+                          bordered
+                          :errors="childErrors(index)"
                         >
-                      </validation-badge>
-                    </v-col>
-
-                    <v-col
-                      align-self="center"
-                      :class="`pl-0 text-truncate ${styles.arrayList.itemLabel}`"
-                      >{{ childLabelForIndex(index) }}</v-col
-                    >
-                    <v-col
-                      align-self="center"
-                      v-if="appliedOptions.showSortButtons"
-                    >
-                      <v-tooltip bottom>
-                        <template v-slot:activator="{ props }">
-                          <v-btn
-                            v-bind="props"
-                            icon
-                            variant="text"
-                            elevation="0"
-                            small
-                            class="v-expansion-panel-title__icon"
-                            :aria-label="control.translations.upAriaLabel"
-                            :disabled="index <= 0 || !control.enabled"
-                            :class="styles.arrayList.itemMoveUp"
-                            @click="moveUpClick($event, index)"
-                          >
-                            <v-icon class="notranslate">{{
-                              icons.current.value.itemMoveUp
-                            }}</v-icon>
-                          </v-btn>
-                        </template>
-                        {{ control.translations.up }}
-                      </v-tooltip>
-                    </v-col>
-                    <v-col
-                      align-self="center"
-                      v-if="appliedOptions.showSortButtons"
-                    >
-                      <v-tooltip bottom>
-                        <template v-slot:activator="{ props }">
-                          <v-btn
-                            v-bind="props"
-                            icon
-                            variant="text"
-                            elevation="0"
-                            small
-                            class="v-expansion-panel-title__icon"
-                            :aria-label="control.translations.downAriaLabel"
-                            :disabled="
-                              index >= dataLength - 1 || !control.enabled
-                            "
-                            :class="styles.arrayList.itemMoveDown"
-                            @click="moveDownClick($event, index)"
+                          <v-avatar
+                            size="40"
+                            aria-label="Index"
+                            color="primary"
                           >
-                            <v-icon class="notranslate">{{
-                              icons.current.value.itemMoveDown
-                            }}</v-icon>
-                          </v-btn>
-                        </template>
-                        {{ control.translations.down }}
-                      </v-tooltip>
-                    </v-col>
-                    <v-col align-self="center">
-                      <v-tooltip bottom>
-                        <template v-slot:activator="{ props }">
-                          <v-btn
-                            v-bind="props"
-                            icon
-                            variant="text"
-                            elevation="0"
-                            small
-                            class="v-expansion-panel-title__icon"
-                            :aria-label="control.translations.removeAriaLabel"
-                            :class="styles.arrayList.itemDelete"
-                            :disabled="
-                              !control.enabled ||
-                              (appliedOptions.restrict &&
-                                control.arraySchema !== undefined &&
-                                control.arraySchema.minItems !== undefined &&
-                                dataLength <= control.arraySchema.minItems)
-                            "
-                            @click.stop="suggestToDelete = index"
+                            <span class="primary--text text--lighten-5">{{
+                              index + 1
+                            }}</span></v-avatar
                           >
-                            <v-icon class="notranslate">{{
-                              icons.current.value.itemDelete
-                            }}</v-icon>
-                          </v-btn>
-                        </template>
-                        {{ control.translations.removeTooltip }}
-                      </v-tooltip>
-                    </v-col>
-                  </v-row>
-                </v-container>
-              </v-expansion-panel-title>
-              <v-expansion-panel-text :class="styles.arrayList.itemContent">
-                <dispatch-renderer
-                  :schema="control.schema"
-                  :uischema="foundUISchema"
-                  :path="composePaths(control.path, `${index}`)"
-                  :enabled="control.enabled"
-                  :renderers="control.renderers"
-                  :cells="control.cells"
-                />
-              </v-expansion-panel-text>
-            </v-expansion-panel>
-          </v-expansion-panels>
-        </v-row>
-      </v-container>
-      <v-container v-if="dataLength === 0" :class="styles.arrayList.noData">
-        {{ control.translations.noDataMessage }}
-      </v-container>
-    </v-card-text>
-    <v-card-actions
-      v-if="$slots.actions"
-      class="pb-8"
-      v-bind="vuetifyProps('v-card-actions')"
-    >
-      <slot
-        name="actions"
-        :addClass="styles.arrayList.addButton"
-        :addDisabled="addDisabled"
-        :addClick="addButtonClick"
-        :control="control"
-        :appliedOptions="appliedOptions"
-        :styles="styles"
-        :icons="icons"
-      >
-      </slot>
-    </v-card-actions>
-    <v-dialog
-      :model-value="suggestToDelete !== null"
-      max-width="600"
-      @keydown.esc="suggestToDelete = null"
-      @click:outside="suggestToDelete = null"
-    >
-      <v-card>
-        <v-card-title class="text-h5">
-          {{ control.translations.deleteDialogTitle }}
-        </v-card-title>
+                        </validation-badge>
+                      </v-col>
 
-        <v-card-text>
-          {{ control.translations.deleteDialogMessage }}
-        </v-card-text>
+                      <v-col
+                        align-self="center"
+                        :class="`pl-0 text-truncate ${styles.arrayList.itemLabel}`"
+                        >{{ childLabelForIndex(index) }}</v-col
+                      >
+                      <v-col
+                        align-self="center"
+                        v-if="appliedOptions.showSortButtons"
+                      >
+                        <v-tooltip bottom>
+                          <template v-slot:activator="{ props }">
+                            <v-btn
+                              v-bind="props"
+                              icon
+                              variant="text"
+                              elevation="0"
+                              small
+                              class="v-expansion-panel-title__icon"
+                              :aria-label="control.translations.upAriaLabel"
+                              :disabled="index <= 0 || !control.enabled"
+                              :class="styles.arrayList.itemMoveUp"
+                              @click.stop="moveUpClick($event, index)"
+                            >
+                              <v-icon class="notranslate">{{
+                                icons.current.value.itemMoveUp
+                              }}</v-icon>
+                            </v-btn>
+                          </template>
+                          {{ control.translations.up }}
+                        </v-tooltip>
+                      </v-col>
+                      <v-col
+                        align-self="center"
+                        v-if="appliedOptions.showSortButtons"
+                      >
+                        <v-tooltip bottom>
+                          <template v-slot:activator="{ props }">
+                            <v-btn
+                              v-bind="props"
+                              icon
+                              variant="text"
+                              elevation="0"
+                              small
+                              class="v-expansion-panel-title__icon"
+                              :aria-label="control.translations.downAriaLabel"
+                              :disabled="
+                                index >= dataLength - 1 || !control.enabled
+                              "
+                              :class="styles.arrayList.itemMoveDown"
+                              @click.stop="moveDownClick($event, index)"
+                            >
+                              <v-icon class="notranslate">{{
+                                icons.current.value.itemMoveDown
+                              }}</v-icon>
+                            </v-btn>
+                          </template>
+                          {{ control.translations.down }}
+                        </v-tooltip>
+                      </v-col>
+                      <v-col align-self="center">
+                        <v-tooltip bottom>
+                          <template v-slot:activator="{ props }">
+                            <v-btn
+                              v-bind="props"
+                              icon
+                              variant="text"
+                              elevation="0"
+                              small
+                              class="v-expansion-panel-title__icon"
+                              :aria-label="control.translations.removeAriaLabel"
+                              :class="styles.arrayList.itemDelete"
+                              :disabled="
+                                !control.enabled ||
+                                (appliedOptions.restrict &&
+                                  control.arraySchema !== undefined &&
+                                  control.arraySchema.minItems !== undefined &&
+                                  dataLength <= control.arraySchema.minItems)
+                              "
+                              @click.stop="suggestToDelete = index"
+                            >
+                              <v-icon class="notranslate">{{
+                                icons.current.value.itemDelete
+                              }}</v-icon>
+                            </v-btn>
+                          </template>
+                          {{ control.translations.removeTooltip }}
+                        </v-tooltip>
+                      </v-col>
+                    </v-row>
+                  </v-container>
+                </v-expansion-panel-title>
+                <v-expansion-panel-text :class="styles.arrayList.itemContent">
+                  <dispatch-renderer
+                    :schema="control.schema"
+                    :uischema="foundUISchema"
+                    :path="composePaths(control.path, `${index}`)"
+                    :enabled="control.enabled"
+                    :renderers="control.renderers"
+                    :cells="control.cells"
+                  />
+                </v-expansion-panel-text>
+              </v-expansion-panel>
+            </v-expansion-panels>
+          </v-card-text>
 
-        <v-card-actions>
-          <v-spacer></v-spacer>
+          <v-card-text v-else :class="styles.arrayList.noData">
+            {{ control.translations.noDataMessage }}
+          </v-card-text>
 
-          <v-btn variant="text" @click="suggestToDelete = null">
-            {{ control.translations.deleteDialogDecline }}</v-btn
-          >
-          <v-btn
-            variant="text"
-            ref="confirm"
-            @click="
-              removeItemsClick(
-                suggestToDelete === null ? null : [suggestToDelete],
-              );
-              suggestToDelete = null;
-            "
+          <v-card-actions
+            v-if="$slots.actions"
+            class="pb-8"
+            @click.stop
+            v-bind="vuetifyProps('v-card-actions')"
           >
-            {{ control.translations.deleteDialogAccept }}
-          </v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
-  </v-card>
+            <slot
+              name="actions"
+              :addClass="styles.arrayList.addButton"
+              :addDisabled="addDisabled"
+              :addClick="addButtonClick"
+              :control="control"
+              :appliedOptions="appliedOptions"
+              :styles="styles"
+              :icons="icons"
+            >
+            </slot>
+          </v-card-actions>
+        </v-card>
+      </v-expansion-panel-text>
+      <v-dialog
+        :model-value="suggestToDelete !== null"
+        max-width="600"
+        @keydown.esc="suggestToDelete = null"
+        @click:outside="suggestToDelete = null"
+      >
+        <v-card>
+          <v-card-title class="text-h5">
+            {{ control.translations.deleteDialogTitle }}
+          </v-card-title>
+
+          <v-card-text>
+            {{ control.translations.deleteDialogMessage }}
+          </v-card-text>
+
+          <v-card-actions>
+            <v-spacer></v-spacer>
+
+            <v-btn variant="text" @click="suggestToDelete = null">
+              {{ control.translations.deleteDialogDecline }}</v-btn
+            >
+            <v-btn
+              variant="text"
+              ref="confirm"
+              @click="
+                removeItemsClick(
+                  suggestToDelete === null ? null : [suggestToDelete],
+                );
+                suggestToDelete = null;
+              "
+            >
+              {{ control.translations.deleteDialogAccept }}
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+    </v-expansion-panel>
+  </v-expansion-panels>
 </template>
 
 <script lang="ts">
+import type { IconValue } from '@/icons';
 import {
   composePaths,
   createDefaultValue,
@@ -289,7 +314,6 @@ import {
   VCard,
   VCardActions,
   VCardText,
-  VCardTitle,
   VCol,
   VContainer,
   VDialog,
@@ -311,12 +335,11 @@ const controlRenderer = defineComponent({
   name: 'array-layout-renderer',
   components: {
     DispatchRenderer,
-    VCard,
-    VCardActions,
-    VCardTitle,
-    VCardText,
     VAvatar,
     VDialog,
+    VCard,
+    VCardText,
+    VCardActions,
     VRow,
     VCol,
     VToolbar,
@@ -352,9 +375,11 @@ const controlRenderer = defineComponent({
     useNested('array');
 
     const icons = useIcons();
+    const openedPanels = ref<number | number[] | null>(0);
 
     return {
       ...control,
+      openedPanels,
       currentlyExpanded,
       expansionPanelsProps,
       suggestToDelete,
@@ -362,6 +387,21 @@ const controlRenderer = defineComponent({
     };
   },
   computed: {
+    isSelected(): boolean {
+      return Array.isArray(this.openedPanels)
+        ? this.openedPanels.includes(0)
+        : this.openedPanels === 0;
+    },
+    expandIcon(): IconValue {
+      return (
+        this.vuetifyProps('v-expansion-panel-title').expandIcon ?? '$expand'
+      );
+    },
+    collapseIcon(): IconValue {
+      return (
+        this.vuetifyProps('v-expansion-panel-title').collapseIcon ?? '$collapse'
+      );
+    },
     addDisabled(): boolean {
       return (
         !this.control.enabled ||
@@ -392,6 +432,9 @@ const controlRenderer = defineComponent({
   methods: {
     composePaths,
     createDefaultValue,
+    togglePanel() {
+      this.openedPanels = this.isSelected ? null : 0;
+    },
     addButtonClick() {
       this.addItem(
         this.control.path,
@@ -429,6 +472,12 @@ export default controlRenderer;
 </script>
 
 <style scoped>
+:deep(
+    .v-expansion-panel-text.array-data-panel > .v-expansion-panel-text__wrapper
+  ) {
+  padding: 0;
+}
+
 .notranslate {
   transform: none !important;
 }
diff --git a/packages/vue-vuetify/src/layouts/CategorizationRenderer.vue b/packages/vue-vuetify/src/layouts/CategorizationRenderer.vue
index 809b7cf601..faa78c0e33 100644
--- a/packages/vue-vuetify/src/layouts/CategorizationRenderer.vue
+++ b/packages/vue-vuetify/src/layouts/CategorizationRenderer.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-container v-if="layout.visible" :class="styles.categorization.root">
+  <v-container v-if="layout.visible" :class="styles.categorization.root" fluid>
     <v-row
       v-if="appliedOptions.vertical == true"
       v-bind="vuetifyProps('v-row')"
diff --git a/packages/vue-vuetify/src/layouts/CategorizationStepperRenderer.vue b/packages/vue-vuetify/src/layouts/CategorizationStepperRenderer.vue
index a3f62d3a1d..a87679e73d 100644
--- a/packages/vue-vuetify/src/layouts/CategorizationStepperRenderer.vue
+++ b/packages/vue-vuetify/src/layouts/CategorizationStepperRenderer.vue
@@ -5,6 +5,7 @@
       non-linear
       v-model="activeCategory"
       editable
+      flat
       v-bind="vuetifyProps('v-stepper-vertical')"
       :hide-actions="!appliedOptions.showNavButtons"
     >
@@ -14,21 +15,20 @@
         :value="index + 1"
         :key="`${layout.path}-${visibleCategories.length}-${index}`"
       >
-        <v-card elevation="0">
-          <dispatch-renderer
-            :schema="layout.schema"
-            :uischema="element.value.uischema"
-            :path="layout.path"
-            :enabled="layout.enabled"
-            :renderers="layout.renderers"
-            :cells="layout.cells"
-          />
-        </v-card>
+        <dispatch-renderer
+          :schema="layout.schema"
+          :uischema="element.value.uischema"
+          :path="layout.path"
+          :enabled="layout.enabled"
+          :renderers="layout.renderers"
+          :cells="layout.cells"
+        />
       </v-stepper-vertical-item>
     </v-stepper-vertical>
     <v-stepper
       v-else
       non-linear
+      flat
       v-model="activeCategory"
       v-bind="vuetifyProps('v-stepper')"
     >
@@ -48,22 +48,20 @@
           </template>
         </v-stepper-header>
 
-        <v-stepper-window>
+        <v-stepper-window class="ma-0">
           <v-stepper-window-item
             v-for="(element, index) in visibleCategories"
             :value="index + 1"
             :key="`${layout.path}-${visibleCategories.length}-${index}`"
           >
-            <v-card elevation="0">
-              <dispatch-renderer
-                :schema="layout.schema"
-                :uischema="element.value.uischema"
-                :path="layout.path"
-                :enabled="layout.enabled"
-                :renderers="layout.renderers"
-                :cells="layout.cells"
-              />
-            </v-card>
+            <dispatch-renderer
+              :schema="layout.schema"
+              :uischema="element.value.uischema"
+              :path="layout.path"
+              :enabled="layout.enabled"
+              :renderers="layout.renderers"
+              :cells="layout.cells"
+            />
           </v-stepper-window-item>
         </v-stepper-window>
 
@@ -87,7 +85,6 @@ import {
 } from '@jsonforms/vue';
 import { defineComponent, ref } from 'vue';
 import {
-  VCard,
   VDivider,
   VStepper,
   VStepperActions,
@@ -115,7 +112,6 @@ const layoutRenderer = defineComponent({
     VStepperWindowItem,
     VStepperWindow,
     VStepperActions,
-    VCard,
   },
   props: {
     ...rendererProps<Layout>(),
diff --git a/packages/vue-vuetify/src/layouts/GroupRenderer.vue b/packages/vue-vuetify/src/layouts/GroupRenderer.vue
index c65bd1b145..cf52e2ce7d 100644
--- a/packages/vue-vuetify/src/layouts/GroupRenderer.vue
+++ b/packages/vue-vuetify/src/layouts/GroupRenderer.vue
@@ -1,61 +1,87 @@
 <template>
-  <v-card
+  <v-expansion-panels
     v-if="layout.visible"
     :class="classes"
     :elevation="!bare ? 2 : undefined"
     :outlined="bare"
-    v-bind="vuetifyProps('v-card')"
+    v-model="openedPanels"
+    v-bind="vuetifyProps('v-expansion-panels')"
   >
-    <v-card-title
-      v-if="layout.label"
-      :class="styles.group.label"
-      v-bind="vuetifyProps('v-card-title')"
-      >{{ layout.label }}</v-card-title
-    >
+    <v-expansion-panel>
+      <v-expansion-panel-title
+        :class="styles.group.label"
+        v-bind="vuetifyProps('v-expansion-panel-title')"
+        >{{ layout.label }}</v-expansion-panel-title
+      >
 
-    <v-card-text
-      v-bind="vuetifyProps(`v-card-text[${index}]`)"
-      v-for="(element, index) in (layout.uischema as Layout).elements"
-      :key="`${layout.path}-${(layout.uischema as Layout).elements.length}-${index}`"
-      :class="styles.group.item"
-    >
-      <dispatch-renderer
-        :schema="layout.schema"
-        :uischema="element"
-        :path="layout.path"
-        :enabled="layout.enabled"
-        :renderers="layout.renderers"
-        :cells="layout.cells"
-      />
-    </v-card-text>
-  </v-card>
+      <v-expansion-panel-text
+        v-for="{ element, index } in visibleElementsWithIndex"
+        :key="`${layout.path}-${visibleElementsWithIndex.length}-${index}`"
+        :class="styles.group.item"
+        v-bind="{
+          ...vuetifyProps(`v-expansion-panel-text`),
+          ...vuetifyProps(`v-expansion-panel-text[${index}]`),
+        }"
+      >
+        <dispatch-renderer
+          :schema="layout.schema"
+          :uischema="element"
+          :path="layout.path"
+          :enabled="layout.enabled"
+          :renderers="layout.renderers"
+          :cells="layout.cells"
+        />
+      </v-expansion-panel-text>
+    </v-expansion-panel>
+  </v-expansion-panels>
 </template>
 
 <script lang="ts">
-import { type Layout } from '@jsonforms/core';
+import {
+  getAjv,
+  getConfig,
+  getData,
+  hasShowRule,
+  isVisible,
+  type Layout,
+  type UISchemaElement,
+} from '@jsonforms/core';
 import {
   DispatchRenderer,
   rendererProps,
   useJsonFormsLayout,
   type RendererProps,
 } from '@jsonforms/vue';
-import { defineComponent } from 'vue';
-import { VCard, VCardText, VCardTitle } from 'vuetify/components';
-import { useVuetifyLayout } from '../util';
+import { defineComponent, ref } from 'vue';
+import {
+  VExpansionPanel,
+  VExpansionPanelText,
+  VExpansionPanelTitle,
+  VExpansionPanels,
+} from 'vuetify/components';
+import { useJsonForms, useVuetifyLayout } from '../util';
 
 const layoutRenderer = defineComponent({
   name: 'group-renderer',
   components: {
     DispatchRenderer,
-    VCard,
-    VCardTitle,
-    VCardText,
+    VExpansionPanel,
+    VExpansionPanelText,
+    VExpansionPanelTitle,
+    VExpansionPanels,
   },
   props: {
     ...rendererProps<Layout>(),
   },
   setup(props: RendererProps<Layout>) {
-    return useVuetifyLayout(useJsonFormsLayout(props));
+    const openedPanels = ref<number | number[]>(0);
+    const jsonforms = useJsonForms();
+
+    return {
+      ...useVuetifyLayout(useJsonFormsLayout(props)),
+      openedPanels,
+      jsonforms,
+    };
   },
   computed: {
     bare(): boolean {
@@ -74,6 +100,28 @@ const layoutRenderer = defineComponent({
       }
       return classes.join(' ');
     },
+    visibleElementsWithIndex(): { element: UISchemaElement; index: number }[] {
+      return this.layout.uischema.elements
+        .map((element, index) => ({ element, index }))
+        .filter(({ element }) => this.isVisible(element, this.layout.path));
+    },
+  },
+  methods: {
+    isVisible(uischema: UISchemaElement, path: string): boolean {
+      if (hasShowRule(uischema)) {
+        const state = { jsonforms: this.jsonforms };
+        const rootData = getData(state);
+
+        return isVisible(
+          uischema,
+          rootData,
+          path,
+          getAjv(state),
+          getConfig(state),
+        );
+      }
+      return true;
+    },
   },
 });
 
diff --git a/packages/vue-vuetify/src/layouts/HorizontalLayoutRenderer.vue b/packages/vue-vuetify/src/layouts/HorizontalLayoutRenderer.vue
index 666cfa72c1..007d71d8a3 100644
--- a/packages/vue-vuetify/src/layouts/HorizontalLayoutRenderer.vue
+++ b/packages/vue-vuetify/src/layouts/HorizontalLayoutRenderer.vue
@@ -1,16 +1,20 @@
 <template>
   <v-container
     v-if="layout.visible && (layout.uischema as Layout).elements.length > 0"
-    :class="`${styles.horizontalLayout.root}`"
+    :class="`pa-0 ${styles.horizontalLayout.root}`"
+    fluid
     v-bind="vuetifyProps('v-container')"
   >
     <v-row v-bind="vuetifyProps('v-row')">
       <v-col
-        v-for="(element, index) in (layout.uischema as Layout).elements"
-        :key="`${layout.path}-${(layout.uischema as Layout).elements.length}-${index}`"
+        v-for="{ element, index } in visibleElementsWithIndex"
+        :key="`${layout.path}-${visibleElementsWithIndex.length}-${index}`"
         :class="styles.horizontalLayout.item"
         :cols="cols[index]"
-        v-bind="vuetifyProps(`v-col[${index}]`)"
+        v-bind="{
+          ...vuetifyProps(`v-col`),
+          ...vuetifyProps(`v-col[${index}]`),
+        }"
       >
         <dispatch-renderer
           :schema="layout.schema"
@@ -26,7 +30,15 @@
 </template>
 
 <script lang="ts">
-import { type Layout } from '@jsonforms/core';
+import {
+  getAjv,
+  getConfig,
+  getData,
+  hasShowRule,
+  isVisible,
+  type Layout,
+  type UISchemaElement,
+} from '@jsonforms/core';
 import {
   DispatchRenderer,
   rendererProps,
@@ -36,7 +48,7 @@ import {
 import { defineComponent } from 'vue';
 import { useDisplay } from 'vuetify';
 import { VCol, VContainer, VRow } from 'vuetify/components';
-import { useVuetifyLayout } from '../util';
+import { useJsonForms, useVuetifyLayout } from '../util';
 
 const layoutRenderer = defineComponent({
   name: 'horizontal-layout-renderer',
@@ -51,6 +63,8 @@ const layoutRenderer = defineComponent({
   },
   setup(props: RendererProps<Layout>) {
     const { xs, sm, md, lg, xl } = useDisplay();
+    const jsonforms = useJsonForms();
+
     return {
       ...useVuetifyLayout(useJsonFormsLayout(props)),
       xs,
@@ -58,6 +72,7 @@ const layoutRenderer = defineComponent({
       md,
       lg,
       xl,
+      jsonforms,
     };
   },
   computed: {
@@ -104,6 +119,29 @@ const layoutRenderer = defineComponent({
         return uiSchemaCols !== undefined ? uiSchemaCols : false;
       });
     },
+
+    visibleElementsWithIndex(): { element: UISchemaElement; index: number }[] {
+      return this.layout.uischema.elements
+        .map((element, index) => ({ element, index }))
+        .filter(({ element }) => this.isVisible(element, this.layout.path));
+    },
+  },
+  methods: {
+    isVisible(uischema: UISchemaElement, path: string): boolean {
+      if (hasShowRule(uischema)) {
+        const state = { jsonforms: this.jsonforms };
+        const rootData = getData(state);
+
+        return isVisible(
+          uischema,
+          rootData,
+          path,
+          getAjv(state),
+          getConfig(state),
+        );
+      }
+      return true;
+    },
   },
 });
 
diff --git a/packages/vue-vuetify/src/layouts/VerticalLayoutRenderer.vue b/packages/vue-vuetify/src/layouts/VerticalLayoutRenderer.vue
index c8059fccbc..4ed71b2237 100644
--- a/packages/vue-vuetify/src/layouts/VerticalLayoutRenderer.vue
+++ b/packages/vue-vuetify/src/layouts/VerticalLayoutRenderer.vue
@@ -2,16 +2,18 @@
   <v-container
     v-if="layout.visible && (layout.uischema as Layout).elements.length > 0"
     fill-height
-    :class="`${styles.verticalLayout.root}`"
+    fluid
+    :class="`pa-0 ${styles.verticalLayout.root}`"
     v-bind="vuetifyProps('v-container')"
   >
     <v-row
       v-for="(element, index) in (layout.uischema as Layout).elements"
       :key="`${layout.path}-${(layout.uischema as Layout).elements.length}-${index}`"
-      v-bind="vuetifyProps(`v-row[${index}]`)"
+      v-bind="{ ...vuetifyProps(`v-row`), ...vuetifyProps(`v-row[${index}]`) }"
     >
       <v-col
         cols="12"
+        v-if="isVisible(element, layout.path)"
         :class="styles.verticalLayout.item"
         v-bind="vuetifyProps('v-col')"
       >
@@ -29,7 +31,15 @@
 </template>
 
 <script lang="ts">
-import { type Layout } from '@jsonforms/core';
+import {
+  getAjv,
+  getConfig,
+  getData,
+  hasShowRule,
+  isVisible,
+  type Layout,
+  type UISchemaElement,
+} from '@jsonforms/core';
 import {
   DispatchRenderer,
   rendererProps,
@@ -38,7 +48,7 @@ import {
 } from '@jsonforms/vue';
 import { defineComponent } from 'vue';
 import { VCol, VContainer, VRow } from 'vuetify/components';
-import { useVuetifyLayout } from '../util';
+import { useJsonForms, useVuetifyLayout } from '../util';
 
 const layoutRenderer = defineComponent({
   name: 'vertical-layout-renderer',
@@ -52,7 +62,26 @@ const layoutRenderer = defineComponent({
     ...rendererProps<Layout>(),
   },
   setup(props: RendererProps<Layout>) {
-    return useVuetifyLayout(useJsonFormsLayout(props));
+    const jsonforms = useJsonForms();
+    return { ...useVuetifyLayout(useJsonFormsLayout(props)), jsonforms };
+  },
+  methods: {
+    // helper method to check visibility and if not visible to remove the v-col since otherwise it will add extra padding
+    isVisible(uischema: UISchemaElement, path: string): boolean {
+      if (hasShowRule(uischema)) {
+        const state = { jsonforms: this.jsonforms };
+        const rootData = getData(state);
+
+        return isVisible(
+          uischema,
+          rootData,
+          path,
+          getAjv(state),
+          getConfig(state),
+        );
+      }
+      return true;
+    },
   },
 });
 
diff --git a/packages/vue/src/components/UnknownRenderer.vue b/packages/vue/src/components/UnknownRenderer.vue
index 18c8801807..56b9074eb5 100644
--- a/packages/vue/src/components/UnknownRenderer.vue
+++ b/packages/vue/src/components/UnknownRenderer.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>No applicable renderer found.</div>
+  <div :style="{ color: 'red' }">No applicable renderer found.</div>
 </template>
 
 <script lang="ts">
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 34feb768da..0cab9d5bac 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -30559,4 +30559,4 @@ snapshots:
     optionalDependencies:
       commander: 9.5.0
 
-  zone.js@0.15.1: {}
+  zone.js@0.15.1: {}
\ No newline at end of file