diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/DataContext/Provider/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/DataContext/Provider/Examples.tsx
index 20e00c36cbc..7c6912b7a4c 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/DataContext/Provider/Examples.tsx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/DataContext/Provider/Examples.tsx
@@ -8,7 +8,7 @@ import {
 } from '@dnb/eufemia/src/extensions/forms'
 import { Flex } from '@dnb/eufemia/src'
 
-export const TestdataSchema: JSONSchema = {
+export const TestDataSchema: JSONSchema = {
   type: 'object',
   properties: {
     requiredString: { type: 'string' },
@@ -37,7 +37,7 @@ export const TestdataSchema: JSONSchema = {
   required: ['requiredString'],
 }
 
-export interface Testdata {
+export type TestData = {
   requiredString: string
   string?: string
   number?: number
@@ -53,7 +53,7 @@ export interface Testdata {
   }>
 }
 
-export const testdata: Testdata = {
+export const testData: TestData = {
   requiredString: 'This is a text',
   string: 'String value',
   number: 123,
@@ -81,12 +81,12 @@ export const Default = () => {
       scope={{
         DataContext,
         Value,
-        testdata,
-        TestdataSchema,
+        testData,
+        TestDataSchema,
       }}
     >
       <DataContext.Provider
-        defaultData={testdata}
+        defaultData={testData}
         onChange={(data) => console.log('onChange', data)}
         onPathChange={(path, value) =>
           console.log('onPathChange', path, value)
@@ -177,13 +177,13 @@ export const ValidationWithJsonSchema = () => {
       scope={{
         DataContext,
         Value,
-        testdata,
-        TestdataSchema,
+        testData,
+        TestDataSchema,
       }}
     >
       <DataContext.Provider
-        data={testdata}
-        schema={TestdataSchema}
+        data={testData}
+        schema={TestDataSchema}
         onChange={(data) => console.log('onChange', data)}
         onPathChange={(path, value) =>
           console.log('onPathChange', path, value)
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Card/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Card/Examples.tsx
index cdef9b83088..dc3cd285546 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Card/Examples.tsx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Card/Examples.tsx
@@ -1,6 +1,11 @@
 import ComponentBox from '../../../../../../shared/tags/ComponentBox'
 import { Flex, P } from '@dnb/eufemia/src'
-import { Form, Field } from '@dnb/eufemia/src/extensions/forms'
+import {
+  Form,
+  Field,
+  Wizard,
+  Value,
+} from '@dnb/eufemia/src/extensions/forms'
 
 export const BasicUsage = () => {
   return (
@@ -19,3 +24,30 @@ export const BasicUsage = () => {
     </ComponentBox>
   )
 }
+
+export const UsageInWizard = () => {
+  return (
+    <ComponentBox data-visual-test="forms-card-in-wizard">
+      <Form.Handler>
+        <Wizard.Container>
+          <Wizard.Step>
+            <Form.Card>
+              <Form.Section>
+                <Form.Section.ViewContainer
+                  title="In a Wizard"
+                  variant="basic"
+                >
+                  <Value.String defaultValue="Something" />
+                </Form.Section.ViewContainer>
+                <Form.Section.EditContainer variant="basic">
+                  <Field.String defaultValue="Something" />
+                </Form.Section.EditContainer>
+              </Form.Section>
+            </Form.Card>
+          </Wizard.Step>
+        </Wizard.Container>
+        <Form.SubmitButton text="Happy coding!" />
+      </Form.Handler>
+    </ComponentBox>
+  )
+}
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Card/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Card/demos.mdx
index c02baef433b..7d9f516c67e 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Card/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Card/demos.mdx
@@ -8,3 +8,7 @@ import * as Examples from './Examples'
 ## Demos
 
 <Examples.BasicUsage />
+
+<VisibleWhenVisualTest>
+  <Examples.UsageInWizard />
+</VisibleWhenVisualTest>
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Handler.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Handler.mdx
index 5e322095c31..f19bea3c156 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Handler.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Handler.mdx
@@ -1,6 +1,6 @@
 ---
 title: 'Handler'
-description: '`Form.Handler` provides both the DataContext.Provider and a HTML form element.'
+description: 'The `Form.Handler` is the root component of your form. It provides a HTML form element and handles the form data.'
 showTabs: true
 tabs:
   - title: Info
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Handler/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Handler/info.mdx
index 17715911b4b..8482711bd81 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Handler/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Handler/info.mdx
@@ -7,28 +7,126 @@ import AsyncChangeExample from './parts/async-change-example.mdx'
 
 ## Description
 
-The `Form.Handler` component provides a HTML form element.
+The `Form.Handler` is the root component of your form. It provides a HTML form element and handles the form data.
+
+```tsx
+import { Form } from '@dnb/eufemia/extensions/forms'
+
+const existingData = { firstName: 'Nora' }
+
+function MyForm() {
+  return (
+    <Form.Handler
+      defaultData={existingData}
+      onSubmit={...}
+    >
+      Your Form
+    </Form.Handler>
+  )
+}
+```
+
+### TypeScript support
+
+You can define the TypeScript type structure for your data like so:
+
+```tsx
+import { Form } from '@dnb/eufemia/extensions/forms'
+
+type MyDataContext = {
+  firstName?: string
+}
+
+// Method #1 – without initial data
+function MyForm() {
+  return (
+    <Form.Handler<MyDataContext>
+      onSubmit={(data) => {
+        // "firstName" is of type string
+        console.log(data.firstName)
+      }}
+    >
+      ...
+    </Form.Handler>
+  )
+}
+
+// Method #2 – with data (initial values)
+const existingData: MyDataContext = {
+  firstName: 'Nora',
+}
+function MyForm() {
+  return (
+    <Form.Handler
+      defaultData={existingData}
+      onSubmit={(data) => {
+        // "firstName" is of type string
+        console.log(data.firstName)
+      }}
+    >
+      ...
+    </Form.Handler>
+  )
+}
+
+// Method #3 – type definition on the event parameter
+const submitHandler = (data: MyDataContext) => {
+  // "firstName" is of type string
+  console.log(data.firstName)
+}
+function MyForm() {
+  return <Form.Handler onSubmit={submitHandler}>...</Form.Handler>
+}
+
+// Method #4 – type definition for the submit handler
+import type { OnSubmit } from '@dnb/eufemia/extensions/forms'
+const submitHandler: OnSubmit<MyDataContext> = (data) => {
+  // "firstName" is of type string
+  console.log(data.firstName)
+}
+function MyForm() {
+  return <Form.Handler onSubmit={submitHandler}>...</Form.Handler>
+}
+```
+
+To disable types you can:
+
+```tsx
+<Form.Handler<any>>...</Form.Handler>
+```
+
+## Decoupling the form element
+
+For more flexibility, you can decouple the form element from the form context by using the `decoupleForm` property. It is recommended to use the `Form.Element` to wrap your rest of your form:
 
 ```jsx
 import { Form } from '@dnb/eufemia/extensions/forms'
 
-render(
-  <Form.Handler
-    data={existingData}
-    onChange={...}
-    onSubmit={...}
-  >
-    Your Form
-  </Form.Handler>,
-)
+function MyApp() {
+  return (
+    <Form.Handler decoupleForm>
+      <AppRelatedThings>
+        <Form.Element>
+          <Form.MainHeading>Heading</Form.MainHeading>
+          <Form.Card>
+            <Field.Email />
+          </Form.Card>
+          <Form.SubmitButton />
+        </Form.Element>
+      </AppRelatedThings>
+    </Form.Handler>
+  )
+}
 ```
 
-The form data can be handled outside of the form. This is useful if you want to use the form data in other components:
+## Data handling
+
+You can access, mutate and filter data inside of the form context by using the `Form.useData` hook:
 
 ```jsx
 import { Form } from '@dnb/eufemia/extensions/forms'
 
-function MyForm() {
+function MyComponent() {
   const {
     getValue,
     update,
@@ -37,9 +135,18 @@ function MyForm() {
     data,
     filterData,
     reduceToVisibleFields,
-  } = Form.useData('unique')
+  } = Form.useData()
 
-  return <Form.Handler id="unique">...</Form.Handler>
+  return <>...</>
+}
+
+function MyApp() {
+  return (
+    <>
+      <Form.Handler>...</Form.Handler>
+      <MyComponent />
+    </>
+  )
 }
 ```
 
@@ -51,53 +158,33 @@ function MyForm() {
 - `filterData` will filter the data based on your own logic.
 - `reduceToVisibleFields` will reduce the given data set to only contain the visible fields (mounted fields).
 
-More examples can be found in the [useData](/uilib/extensions/forms/Form/useData/) hook docs.
-
-### TypeScript support
+### Using a form ID
 
-You can define the TypeScript type structure for your data like so:
+The form data can be handled outside of the form. This is useful if you want to use the form data in other components:
 
-```tsx
+```jsx
 import { Form } from '@dnb/eufemia/extensions/forms'
 
-type MyDataSet = {
-  firstName?: string
-}
+const myFormId = 'unique-id' // or a function, object or React Context reference
 
-const data: MyDataSet = {
-  firstName: 'Nora',
+function MyComponent() {
+  const { data } = Form.useData(myFormId)
+
+  return <>...</>
 }
 
-// Method #1
-function MyForm() {
+function MyApp() {
   return (
-    <Form.Handler
-      data={data}
-      onSubmit={(data) => {
-        console.log(data.firstName)
-      }}
-    />
+    <>
+      <Form.Handler id={myFormId}>...</Form.Handler>
+      <MyComponent />
+    </>
   )
 }
-
-// Method #2
-const submitHandler = (data: MyDataSet) => {
-  console.log(data.firstName)
-}
-function MyForm() {
-  return <Form.Handler data={data} onSubmit={submitHandler} />
-}
-
-// Method #3
-import type { OnSubmit } from '@dnb/eufemia/extensions/forms'
-const submitHandler: OnSubmit<MyDataSet> = (data) => {
-  console.log(data.firstName)
-}
-function MyForm() {
-  return <Form.Handler data={data} onSubmit={submitHandler} />
-}
 ```
 
+More examples can be found in the [useData](/uilib/extensions/forms/Form/useData/) hook docs.
+
 ## Async `onChange` and `onSubmit` event handlers
 
 **NB:** When using an async `onChange` event handler, the `data` parameter will only include validated data. This lets you utilize the `data` parameter directly in your request, without having to further process or transform it.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Handler/parts/async-state-return-example.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Handler/parts/async-state-return-example.mdx
index faf06e5a976..52064fe781a 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Handler/parts/async-state-return-example.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Handler/parts/async-state-return-example.mdx
@@ -3,6 +3,8 @@ In all async operations, you can simply return an error object to display it in
 ```tsx
 import { Form } from '@dnb/eufemia/extensions/forms'
 
+const myFormId = 'unique-id' // or a function, object or React Context reference
+
 // Async function
 const onSubmit = async (data) => {
   try {
@@ -12,7 +14,7 @@ const onSubmit = async (data) => {
     })
     const data = await response.json()
 
-    Form.setData('unique-id', data) // Whatever you want to do with the data
+    Form.setData(myFormId, data) // Whatever you want to do with the data
   } catch (error) {
     return error // Will display the error message in the form
   }
@@ -32,7 +34,7 @@ const onSubmit = async (data) => {
 
 function Component() {
   return (
-    <Form.Handler id="unique-id" onSubmit={onSubmit}>
+    <Form.Handler id={myFormId} onSubmit={onSubmit}>
       ...
     </Form.Handler>
   )
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Isolation/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Isolation/Examples.tsx
index f4f0547bb9b..8efe06bec36 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Isolation/Examples.tsx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Isolation/Examples.tsx
@@ -66,14 +66,17 @@ export const CommitHandleRef = () => {
                   <Form.Isolation
                     commitHandleRef={commitHandleRef}
                     transformOnCommit={(isolatedData, handlerData) => {
-                      const value =
-                        isolatedData.newPerson.title.toLowerCase()
+                      // Because of missing TypeScript support
+                      const contactPersons = handlerData['contactPersons']
+                      const newPerson = isolatedData['newPerson']
+
+                      const value = newPerson.title.toLowerCase()
                       const transformedData = {
                         ...handlerData,
                         contactPersons: [
-                          ...handlerData.contactPersons,
+                          ...contactPersons,
                           {
-                            ...isolatedData.newPerson,
+                            ...newPerson,
                             value,
                           },
                         ],
@@ -151,14 +154,18 @@ export const TransformCommitData = () => {
 
                     <Form.Isolation
                       transformOnCommit={(isolatedData, handlerData) => {
+                        // Because of missing TypeScript support
+                        const contactPersons =
+                          handlerData['contactPersons']
+                        const newPerson = isolatedData['newPerson']
+
                         return {
                           ...handlerData,
                           contactPersons: [
-                            ...handlerData.contactPersons,
+                            ...contactPersons,
                             {
-                              ...isolatedData.newPerson,
-                              value:
-                                isolatedData.newPerson.title.toLowerCase(),
+                              ...newPerson,
+                              value: newPerson.title.toLowerCase(),
                             },
                           ],
                         }
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Isolation/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Isolation/info.mdx
index d28b6bcd1d9..871d6bdae1b 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Isolation/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Isolation/info.mdx
@@ -42,6 +42,37 @@ export function MyForm(props) {
 }
 ```
 
+## TypeScript support
+
+You can define the TypeScript type structure for your data like so:
+
+```tsx
+import { Form, Field } from '@dnb/eufemia/extensions/forms'
+
+type IsolationData = {
+  persons: Array<{ name: string }>
+  newPerson: Array<{ name: string }>
+}
+
+function MyForm() {
+  return (
+    <Form.Isolation<IsolationData>
+      onCommit={(data) => {
+        data // <-- is of type IsolationData
+      }}
+      transformOnCommit={(isolatedData, handlerData) => {
+        return {
+          ...handlerData,
+          persons: [...handlerData.persons, isolatedData.newPerson],
+        }
+      }}
+    >
+      ...
+    </Form.Isolation>
+  )
+}
+```
+
 ## Commit the data to the form
 
 You can either use the `Form.Isolation.CommitButton` or provide a custom ref handler you can use (call) when you want to commit the data to the `Form.Handler` context:
@@ -111,7 +142,7 @@ render(
 
 ## Clear data from isolated fields
 
-You can clear the isolation by calling `Form.clearData` with the `id` of the form.
+You can clear the isolation by calling `clearData`:
 
 ```jsx
 import { Form, Field } from '@dnb/eufemia/extensions/forms'
@@ -120,9 +151,8 @@ function MyForm() {
   return (
     <Form.Handler>
       <Form.Isolation
-        id="my-isolated-data"
-        onCommit={() => {
-          Form.clearData('my-isolated-data')
+        onCommit={(data, { clearData }) => {
+          clearData()
         }}
       >
         <Field.String path="/isolated" />
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/clearData/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/clearData/info.mdx
index 4c64d580f71..568a020e460 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/clearData/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/clearData/info.mdx
@@ -9,10 +9,12 @@ The `Form.clearData` lets you clear the data of a form.
 ```jsx
 import { Form } from '@dnb/eufemia/extensions/forms'
 
+const myFormId = 'unique-id' // or a function, object or React Context reference
+
 function Component() {
-  return <Form.Handler id="unique-id">...</Form.Handler>
+  return <Form.Handler id={myFormId}>...</Form.Handler>
 }
 
 // You can call it later and even outside of the form
-Form.clearData('unique-id')
+Form.clearData(myFormId)
 ```
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/getData/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/getData/info.mdx
index 9abadb531ef..1f63ccc92c3 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/getData/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/getData/info.mdx
@@ -9,13 +9,15 @@ With the `Form.getData` method, you can manage your form data outside of the for
 ```jsx
 import { Form } from '@dnb/eufemia/extensions/forms'
 
+const myFormId = 'unique-id' // or a function, object or React Context reference
+
 function Component() {
-  return <Form.Handler id="unique-id">...</Form.Handler>
+  return <Form.Handler id={myFormId}>...</Form.Handler>
 }
 
 // Later, when there is data available
 const { getValue, data, filterData, reduceToVisibleFields } =
-  Form.getData('unique-id')
+  Form.getData(myFormId)
 ```
 
 - `getValue` will return the value of the given path.
@@ -23,7 +25,7 @@ const { getValue, data, filterData, reduceToVisibleFields } =
 - `filterData` will filter the data based on your own logic.
 - `reduceToVisibleFields` will reduce the given data set to only contain the visible fields (mounted fields).
 
-You link them together via the `id` (string) property.
+You link them together via the `id` (string, function, object or React Context as the reference) property.
 
 TypeScript support:
 
@@ -44,9 +46,11 @@ You can use the `reduceToVisibleFields` function to get only the data of visible
 ```tsx
 import { Form } from '@dnb/eufemia/extensions/forms'
 
+const myFormId = 'unique-id' // or a function, object or React Context reference
+
 const MyForm = () => {
   return (
-    <Form.Handler id="unique-id">
+    <Form.Handler id={myFormId}>
       <Form.Visibility pathTrue="/isVisible">
         <Field.String path="/foo" />
       </Form.Visibility>
@@ -55,7 +59,7 @@ const MyForm = () => {
 }
 
 // Later, when there is data available
-const { data, reduceToVisibleFields } = Form.getData('unique-id')
+const { data, reduceToVisibleFields } = Form.getData(myFormId)
 const visibleData = reduceToVisibleFields(data)
 ```
 
@@ -77,9 +81,11 @@ The callback function should return a `boolean` or `undefined`. Return `false` t
 It returns the filtered form data.
 
 ```tsx
+const myFormId = 'unique-id' // or a function, object or React Context reference
+
 const MyForm = () => {
   return (
-    <Form.Handler id="unique-id">
+    <Form.Handler id={myFormId}>
       <Field.String path="/foo" disabled />
     </Form.Handler>
   )
@@ -92,6 +98,6 @@ const filterDataHandler = ({ path, value, data, props, internal }) => {
 }
 
 // Later, when there is data available
-const { filterData } = Form.getData('unique-id')
+const { filterData } = Form.getData(myFormId)
 const filteredData = filterData(filterDataHandler)
 ```
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/info.mdx
index ff06f7272f5..123e0cd6786 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/info.mdx
@@ -6,14 +6,30 @@ showTabs: true
 
 `Form` provides the main forms-helpers including data provider and event handling.
 
-```jsx
+```tsx
 import { Form, Field } from '@dnb/eufemia/extensions/forms'
-render(
-  <Form.Handler data={existingData} onSubmit={submitHandler}>
-    <Field.Email path="/email" />
-    <Form.ButtonRow>
-      <Form.SubmitButton />
-    </Form.ButtonRow>
-  </Form.Handler>,
-)
+
+const existingData = {
+  email: 'name@email.no',
+}
+
+function MyForm() {
+  return (
+    <Form.Handler
+      defaultData={existingData}
+      onSubmit={async (data) => {
+        await makeRequest(data)
+      }}
+    >
+      <Form.MainHeading>Heading</Form.MainHeading>
+      <Form.Card>
+        <Field.Email path="/email" />
+      </Form.Card>
+
+      <Form.ButtonRow>
+        <Form.SubmitButton />
+      </Form.ButtonRow>
+    </Form.Handler>
+  )
+}
 ```
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/setData/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/setData/info.mdx
index eac652cd94e..e0563f8a15f 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/setData/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/setData/info.mdx
@@ -9,14 +9,16 @@ With the `Form.setData` method, you can manage your form data outside of the for
 ```jsx
 import { Form } from '@dnb/eufemia/extensions/forms'
 
+const myFormId = 'unique-id' // or a function, object or React Context reference
+
 Form.setData('unique', { foo: 'bar' })
 
 function Component() {
-  return <Form.Handler id="unique">...</Form.Handler>
+  return <Form.Handler id={myFormId}>...</Form.Handler>
 }
 ```
 
-You link them together via the `id` (string) property.
+You link them together via the `id` (string, function, object or React Context as the reference) property.
 
 Related helpers:
 
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/useData/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/useData/info.mdx
index 34c96df04a6..19f6733aaba 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/useData/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/useData/info.mdx
@@ -42,7 +42,17 @@ render(
 
 ## Usage
 
-You can use the `Form.useData` hook with or without an `id` (string) property, which is optional and can be used to link the data to a specific [Form.Handler](/uilib/extensions/forms/Form/Handler/) component.
+You can use the `Form.useData` hook with or without an `id` (string, function, object or React Context as the reference) property, which is optional and can be used to link the data to a specific [Form.Handler](/uilib/extensions/forms/Form/Handler/) component.
+
+### TypeScript support
+
+You can define the TypeScript type structure for your data like so:
+
+```tsx
+type Data = { foo: string }
+
+const { data } = Form.useData<Data>()
+```
 
 ### Without an `id` property
 
@@ -66,36 +76,29 @@ function Component() {
 
 ### With an `id` property
 
-While in this example, "Component" is outside the `Form.Handler` context, but linked together via the `id` (string) property:
+While in this example, "Component" is outside the `Form.Handler` context, but linked together via the `id` (string, function, object or React Context as the reference) property:
 
 ```jsx
 import { Form } from '@dnb/eufemia/extensions/forms'
 
+const myFormId = 'unique-id' // or a function, object or React Context reference
+
 function MyForm() {
   return (
     <>
-      <Form.Handler id="unique">...</Form.Handler>
+      <Form.Handler id={myFormId}>...</Form.Handler>
       <Component />
     </>
   )
 }
 
 function Component() {
-  const { data } = Form.useData('unique')
+  const { data } = Form.useData(myFormId)
 }
 ```
 
 This is beneficial when you need to utilize the form data in other places within your application.
 
-### TypeScript support
-
-You can define the TypeScript type structure for your data like so:
-
-```tsx
-type Data = { foo: string }
-const { data } = Form.useData<Data>('unique')
-```
-
 ### Select a single value
 
 ```jsx
@@ -136,15 +139,17 @@ With the `set` method, you can extend the data set. Existing data paths will be
 ```jsx
 import { Form, Field } from '@dnb/eufemia/extensions/forms'
 
+const myFormId = 'unique-id' // or a function, object or React Context reference
+
 function MyForm() {
-  const { data, set } = Form.useData('unique')
+  const { data, set } = Form.useData(myFormId)
 
   useEffect(() => {
     set({ foo: 'bar' })
   }, [])
 
   return (
-    <Form.Handler id="unique">
+    <Form.Handler id={myFormId}>
       <Field.String path="/foo" />
     </Form.Handler>
   )
@@ -211,12 +216,14 @@ const filterDataHandler = ({ path, value, data, props, internal }) => {
   }
 }
 
+const myFormId = 'unique-id' // or a function, object or React Context reference
+
 const MyForm = () => {
-  const { filterData } = Form.useData('my-form')
+  const { filterData } = Form.useData(myFormId)
   const filteredData = filterData(filterDataHandler)
 
   return (
-    <Form.Handler id="my-form">
+    <Form.Handler id={myFormId}>
       <Field.String path="/foo" data-exclude-field />
     </Form.Handler>
   )
@@ -238,22 +245,23 @@ You decide where and when you want to provide the initial `data` to the form. It
 ```jsx
 import { Form, Field } from '@dnb/eufemia/extensions/forms'
 
+const myFormId = 'unique-id' // or a function, object or React Context reference
 const initialData = { foo: 'bar' }
 
 function MyForm() {
   return (
-    <Form.Handler id="unique" data={initialData}>
+    <Form.Handler id={myFormId} data={initialData}>
       <Field.String path="/foo" />
     </Form.Handler>
   )
 }
 
 function ComponentA() {
-  Form.useData('unique', { foo: 'bar' })
+  Form.useData(myFormId, { foo: 'bar' })
 }
 
 function ComponentB() {
-  const { set } = Form.useData('unique')
+  const { set } = Form.useData(myFormId)
 
   useEffect(() => {
     set({ foo: 'bar' })
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/useSnapshot/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/useSnapshot/info.mdx
index b4d6895f3c1..135684988bc 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/useSnapshot/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/useSnapshot/info.mdx
@@ -61,7 +61,7 @@ You can check out examples in the demo section.
 
 ## Usage of the `Form.useSnapshot` hook
 
-You can use the `Form.useSnapshot` hook with or without an `id` (string) property, which is optional and can be used to link the data to a specific [Form.Handler](/uilib/extensions/forms/Form/Handler/) component.
+You can use the `Form.useSnapshot` hook with or without an `id` (string, function, object or React Context as the reference) property, which is optional and can be used to link the data to a specific [Form.Handler](/uilib/extensions/forms/Form/Handler/) component.
 
 ### Without an `id` property
 
@@ -85,22 +85,24 @@ function Component() {
 
 ### With an `id` property
 
-While in this example, "Component" is outside the `Form.Handler` context, but linked together via the `id` (string) property:
+While in this example, "Component" is outside the `Form.Handler` context, but linked together via the `id` (string, function, object or React Context as the reference) property:
 
 ```jsx
 import { Form } from '@dnb/eufemia/extensions/forms'
 
+const myFormId = 'unique-id' // or a function, object or React Context reference
+
 function MyForm() {
   return (
     <>
-      <Form.Handler id="unique">...</Form.Handler>
+      <Form.Handler id={myFormId}>...</Form.Handler>
       <Component />
     </>
   )
 }
 
 function Component() {
-  const { createSnapshot, revertSnapshot } = Form.useSnapshot('unique')
+  const { createSnapshot, revertSnapshot } = Form.useSnapshot(myFormId)
 }
 ```
 
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/useValidation/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/useValidation/info.mdx
index 3d74e108e06..b8a03449ef4 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/useValidation/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/useValidation/info.mdx
@@ -45,22 +45,24 @@ function Component() {
 }
 ```
 
-Or by linking the hook together with the form by using the `id` (string) property:
+Or by linking the hook together with the form by using the `id` (string, function, object or React Context as the reference) property:
 
 ```jsx
 import { Form } from '@dnb/eufemia/extensions/forms'
 
+const myFormId = 'unique-id' // or a function, object or React Context reference
+
 function MyForm() {
   return (
     <>
-      <Form.Handler id="unique">...</Form.Handler>
+      <Form.Handler id={myFormId}>...</Form.Handler>
       <Component />
     </>
   )
 }
 
 function Component() {
-  const { hasErrors, hasFieldError } = Form.useValidation('unique')
+  const { hasErrors, hasFieldError } = Form.useValidation(myFormId)
 }
 ```
 
@@ -69,10 +71,12 @@ Or by using it in the form component itself:
 ```jsx
 import { Form } from '@dnb/eufemia/extensions/forms'
 
+const myFormId = 'unique-id' // or a function, object or React Context reference
+
 function MyForm() {
-  const { hasErrors } = Form.useValidation('unique')
+  const { hasErrors } = Form.useValidation(myFormId)
 
-  return <Form.Handler id="unique">...</Form.Handler>
+  return <Form.Handler id={myFormId}>...</Form.Handler>
 }
 ```
 
@@ -83,14 +87,16 @@ You can also report a form error that gets displayed on the bottom of the form b
 ```jsx
 import { Form } from '@dnb/eufemia/extensions/forms'
 
+const myFormId = 'unique-id' // or a function, object or React Context reference
+
 function MyForm() {
-  const { setFormError } = Form.useValidation('unique')
+  const { setFormError } = Form.useValidation(myFormId)
 
   useEffect(() => {
     setFormError('This is a global form error')
   }, [])
 
-  return <Form.Handler id="unique">...</Form.Handler>
+  return <Form.Handler id={myFormId}>...</Form.Handler>
 }
 ```
 
@@ -101,12 +107,14 @@ You can also use the `setFieldStatus` method to report field status. This will u
 ```jsx
 import { Form, Field } from '@dnb/eufemia/extensions/forms'
 
+const myFormId = 'unique-id' // or a function, object or React Context reference
+
 function Component() {
-  const { setFieldStatus } = Form.useValidation('unique')
+  const { setFieldStatus } = Form.useValidation(myFormId)
 
   return (
     <Form.Handler
-      id="unique"
+      id={myFormId}
       onSubmit={async () => {
         // Report a field status
         setFieldStatus('/path/to/field', {
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/Array/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/Array/Examples.tsx
index 1c947014598..a238bd87094 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/Array/Examples.tsx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/Array/Examples.tsx
@@ -1,5 +1,5 @@
 import ComponentBox from '../../../../../../shared/tags/ComponentBox'
-import { Flex, Table, Td, Th, Tr } from '@dnb/eufemia/src'
+import { Avatar, Flex, Table, Td, Th, Tr } from '@dnb/eufemia/src'
 import {
   Iterate,
   Field,
@@ -205,7 +205,7 @@ export const ArrayFromFormHandler = () => {
                 </Field.Composition>
 
                 <Iterate.Toolbar>
-                  <Iterate.RemoveButton />
+                  <Iterate.RemoveButton showConfirmDialog />
                 </Iterate.Toolbar>
               </Iterate.AnimatedContainer>
             </Iterate.Array>
@@ -549,7 +549,7 @@ export const WithArrayValidator = () => {
                 width="medium"
                 size="medium"
               />
-              <Iterate.RemoveButton />
+              <Iterate.RemoveButton showConfirmDialog />
             </Flex.Horizontal>
           </Iterate.Array>
 
@@ -565,3 +565,138 @@ export const WithArrayValidator = () => {
     </ComponentBox>
   )
 }
+
+export const FilledViewAndEditContainer = () => {
+  return (
+    <ComponentBox
+      data-visual-test="filled-view-and-edit-container"
+      hideCode
+    >
+      {() => {
+        const MyEditItemForm = () => {
+          return (
+            <Flex.Stack>
+              <Field.Name.First itemPath="/firstName" required />
+              <Field.Name.Last itemPath="/lastName" required />
+            </Flex.Stack>
+          )
+        }
+
+        const EditItemToolbar = () => {
+          return (
+            <Iterate.Toolbar>
+              <Flex.Horizontal
+                justify="space-between"
+                style={{ width: '100%' }}
+              >
+                <Flex.Horizontal gap="large">
+                  <Iterate.EditContainer.DoneButton />
+                  <Iterate.EditContainer.CancelButton />
+                </Flex.Horizontal>
+                <Iterate.ViewContainer.RemoveButton
+                  showConfirmDialog
+                  left={false}
+                />
+              </Flex.Horizontal>
+            </Iterate.Toolbar>
+          )
+        }
+
+        const MyEditItem = (props) => {
+          return (
+            <Iterate.EditContainer
+              variant="filled"
+              toolbarVariant="custom"
+              toolbar={<EditItemToolbar />}
+              {...props}
+            >
+              <ValueWithAvatar />
+              <MyEditItemForm />
+            </Iterate.EditContainer>
+          )
+        }
+
+        const CreateNewEntry = () => {
+          return (
+            <Iterate.PushContainer
+              path="/accounts"
+              title="New account holder"
+              variant="filled"
+              openButton={
+                <Iterate.PushContainer.OpenButton text="Add another account" />
+              }
+              showOpenButtonWhen={(list) => list.length > 0}
+            >
+              <MyEditItemForm />
+            </Iterate.PushContainer>
+          )
+        }
+
+        const ValueWithAvatar = () => {
+          const { value } = Iterate.useItem()
+          const firstName = String(value['firstName'] || '')
+          return (
+            <Flex.Horizontal align="center">
+              <Avatar.Group label={firstName}>
+                <Avatar>{firstName.substring(0, 1).toUpperCase()}</Avatar>
+              </Avatar.Group>
+              <Value.String itemPath="/firstName" />
+            </Flex.Horizontal>
+          )
+        }
+
+        const MyViewItem = () => {
+          return (
+            <Iterate.ViewContainer
+              variant="filled"
+              toolbarVariant="custom"
+              toolbar={<></>}
+            >
+              <Flex.Horizontal align="center" justify="space-between">
+                <ValueWithAvatar />
+
+                <Iterate.Toolbar>
+                  <Iterate.ViewContainer.EditButton />
+                </Iterate.Toolbar>
+              </Flex.Horizontal>
+            </Iterate.ViewContainer>
+          )
+        }
+
+        return (
+          <Form.Handler
+            data={{
+              accounts: [
+                {
+                  firstName:
+                    'Tony with long name that maybe will wrap over to a new line',
+                  lastName: 'Last',
+                },
+                {
+                  firstName: 'Maria',
+                  lastName: 'Last',
+                },
+              ],
+            }}
+            onSubmit={(data) => console.log('onSubmit', data)}
+            onSubmitRequest={() => console.log('onSubmitRequest')}
+          >
+            <Flex.Vertical>
+              <Form.MainHeading>Accounts</Form.MainHeading>
+
+              <Form.Card>
+                <Iterate.Array path="/accounts" limit={2}>
+                  <MyViewItem />
+                  <MyEditItem />
+                </Iterate.Array>
+                <CreateNewEntry />
+              </Form.Card>
+
+              <Form.SubmitButton variant="send" />
+            </Flex.Vertical>
+          </Form.Handler>
+        )
+      }}
+    </ComponentBox>
+  )
+}
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/Array/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/Array/demos.mdx
index 7b8e20894be..42d6de4bd4c 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/Array/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/Array/demos.mdx
@@ -49,6 +49,13 @@ With an optional `title` and [Iterate.Toolbar](/uilib/extensions/forms/Iterate/T
 
 <Examples.ViewAndEditContainer />
 
+### Customize the view and edit containers
+
+- Using `variant="filled"` will render the [ViewContainer](/uilib/extensions/forms/Iterate/ViewContainer) and [EditContainer](/uilib/extensions/forms/Iterate/EditContainer) with a background color.
+- Using `toolbarVariant="custom"` will render the [Toolbar](/uilib/extensions/forms/Iterate/Toolbar/) without any spacing so you can customize it to your needs.
+
+<Examples.FilledViewAndEditContainer />
+
 ### Initially open
 
 <Examples.InitiallyOpen />
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/Count/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/Count/info.mdx
index 5d8d3007223..9fdb0ec5d5a 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/Count/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/Count/info.mdx
@@ -77,11 +77,13 @@ render(
 And call it as a function as well (id is required):
 
 ```tsx
+const myFormId = 'unique-id' // or a function, object or React Context reference
+
 function MyForm() {
-  const count = Iterate.count({ id: 'myForm', path: '/myList' })
+  const count = Iterate.count({ id: myFormId, path: '/myList' })
 
   return (
-    <Form.Handler id="myForm" data={{ myList: ['foo', 'bar'] }}>
+    <Form.Handler id={myFormId} data={{ myList: ['foo', 'bar'] }}>
       <MyComponent />
     </Form.Handler>
   )
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/EditContainer/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/EditContainer/info.mdx
index 9dc74e1820f..d761fac1342 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/EditContainer/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/EditContainer/info.mdx
@@ -55,8 +55,9 @@ You can get the internal item object by using the `Iterate.useItem` hook.
 import { Iterate, Field, Value } from '@dnb/eufemia/extensions/forms'
 
 const MyItemForm = () => {
-  const item = Iterate.useItem()
-  console.log('index:', item.index)
+  // TypeScript type inference
+  const item = Iterate.useItem<{ foo: string }>()
+  console.log('My item:', item.index, item.value.foo)
 
   return <Field.String itemPath="/" />
 }
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/PushContainer/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/PushContainer/Examples.tsx
index 6485fe45460..f9d8d5151ec 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/PushContainer/Examples.tsx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/PushContainer/Examples.tsx
@@ -143,7 +143,7 @@ export const IsolatedData = () => {
 
         function ExistingPersonDetails() {
           const { data, getValue } = Form.useData()
-          const person = getValue(data.selectedPerson)?.data || {}
+          const person = getValue(data['selectedPerson'])?.data || {}
 
           return (
             <Flex.Stack>
@@ -172,14 +172,15 @@ export const IsolatedData = () => {
 
         function PushContainerContent() {
           const { data, update } = Form.useData()
+          const selectedPerson = data['selectedPerson'] // Because of missing TypeScript support
 
           // Clear the PushContainer data when the selected person is "other",
           // so the fields do not inherit existing data.
           React.useLayoutEffect(() => {
-            if (data.selectedPerson === 'other') {
+            if (selectedPerson === 'other') {
               update('/pushContainerItems/0', {})
             }
-          }, [data.selectedPerson, update])
+          }, [selectedPerson, update])
 
           return (
             <Flex.Stack>
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/RemoveButton/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/RemoveButton/info.mdx
index 457cae6b65b..b38daeab302 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/RemoveButton/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/RemoveButton/info.mdx
@@ -20,3 +20,11 @@ render(
   </>,
 )
 ```
+
+## Confirm removal
+
+You can use the `showConfirmDialog` property to open a confirmation dialog before removing the item.
+
+```tsx
+<Iterate.RemoveButton showConfirmDialog />
+```
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/PhoneNumber/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/PhoneNumber/Examples.tsx
index 34b2c4e3d04..5de51301893 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/PhoneNumber/Examples.tsx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/PhoneNumber/Examples.tsx
@@ -1,5 +1,5 @@
 import ComponentBox from '../../../../../../shared/tags/ComponentBox'
-import { P } from '@dnb/eufemia/src'
+import { Flex, P } from '@dnb/eufemia/src'
 import { Value } from '@dnb/eufemia/src/extensions/forms'
 
 export const Empty = () => {
@@ -45,9 +45,11 @@ export const LabelAndValue = () => {
 export const InternationalSuffix = () => {
   return (
     <ComponentBox>
-      <Value.PhoneNumber label="Label text" value="+47 98712345" />
-      <Value.PhoneNumber label="Label text" value="+886 0998472751" />
-      <Value.PhoneNumber label="Label text" value="+1-868 6758288" />
+      <Flex.Stack>
+        <Value.PhoneNumber label="Label text" value="+47 98712345" />
+        <Value.PhoneNumber label="Label text" value="+886 0998472751" />
+        <Value.PhoneNumber label="Label text" value="+1-868 6758288" />
+      </Flex.Stack>
     </ComponentBox>
   )
 }
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Wizard/Container/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Wizard/Container/info.mdx
index 89729d6ded8..31c7a7ef92c 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Wizard/Container/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Wizard/Container/info.mdx
@@ -117,17 +117,19 @@ const MyForm = () => {
 }
 ```
 
-When using the `useStep` hook outside of the `Wizard.Container` context, you need to provide an unique `id` (string):
+When using the `useStep` hook outside of the `Wizard.Container` context, you need to provide an unique `id` (string, function, object or React Context as the reference):
 
 ```tsx
 import { Form, Wizard } from '@dnb/eufemia/extensions/forms'
 
+const myContainerId = 'unique-id' // or a function, object or React Context reference
+
 const MyForm = () => {
-  const { setActiveIndex, activeIndex } = Wizard.useStep('unique-id')
+  const { setActiveIndex, activeIndex } = Wizard.useStep(myContainerId)
 
   return (
     <Form.Handler>
-      <Wizard.Container id="unique-id">
+      <Wizard.Container id={myContainerId}>
         <Wizard.Step>
           <Button onClick={() => setActiveIndex(0)}>Step 1</Button>
         </Wizard.Step>
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Wizard/location-hooks/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Wizard/location-hooks/info.mdx
index 12512df0d29..40e692bffe9 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Wizard/location-hooks/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Wizard/location-hooks/info.mdx
@@ -106,7 +106,7 @@ function MyForm() {
 
 ## Without a router
 
-You connect the hook with the `Wizard.Container` component via an unique `id` (string). The `id` will be used in the URL query string: `url?unique-id-step=1`.
+You connect the hook with the `Wizard.Container` component via an unique `id` (string, function, object or React Context as the reference). The `id` will be used in the URL query string: `url?unique-id-step=1`.
 
 ```jsx
 import { Form, Wizard } from '@dnb/eufemia/extensions/forms'
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Wizard/useStep/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Wizard/useStep/info.mdx
index 0b743c3b7ac..99e1f925014 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Wizard/useStep/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Wizard/useStep/info.mdx
@@ -26,20 +26,22 @@ function MyForm() {
 }
 ```
 
-You can also connect the hook with the `Wizard.Container` via an `id` (string). This lets you render the hook outside of the context:
+You can also connect the hook with the `Wizard.Container` via an `id` (string, function, object or React Context as the reference). This lets you render the hook outside of the context:
 
 ```jsx
 import { Form } from '@dnb/eufemia/extensions/forms'
 
+const myContainerId = 'unique-id' // or a function, object or React Context reference
+
 function Sidecar() {
-  const { activeIndex, setActiveIndex } = Wizard.useStep('unique-id')
+  const { activeIndex, setActiveIndex } = Wizard.useStep(myContainerId)
 }
 
 function MyForm() {
   return (
     <Form.Handler>
       <Sidecar />
-      <Wizard.Container id="unique-id">...</Wizard.Container>
+      <Wizard.Container id={myContainerId}>...</Wizard.Container>
     </Form.Handler>
   )
 }
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/all-features.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/all-features.mdx
index 81241caf89d..cf0082c4d5f 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/all-features.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/all-features.mdx
@@ -56,7 +56,7 @@ const submitHandler = async (data) => {
 
 function Component() {
   return (
-    <Form.Handler data={existingData} onSubmit={submitHandler}>
+    <Form.Handler defaultData={existingData} onSubmit={submitHandler}>
       <Field.Email path="/email" />
       <Value.Date path="/date" />
       <Form.SubmitButton />
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/changelog.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/changelog.mdx
index 7e88677912b..f2184166ec1 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/changelog.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/changelog.mdx
@@ -13,6 +13,18 @@ breadcrumb:
 
 Change log for the Eufemia Forms extension.
 
+## v10.58
+
+- Added `variant="filled"` to [Iterate.ViewContainer](/uilib/extensions/forms/Iterate/ViewContainer/) and [Iterate.EditContainer](/uilib/extensions/forms/Iterate/EditContainer/), to render with a background color.
+- Added `toolbarVariant="custom"` to [Iterate.ViewContainer](/uilib/extensions/forms/Iterate/ViewContainer/) and [Iterate.EditContainer](/uilib/extensions/forms/Iterate/EditContainer/), to render the given toolbar without any spacing so it can be customized to your needs.
+- Added `showConfirmDialog` to [Iterate.RemoveButton](/uilib/extensions/forms/Iterate/RemoveButton/), to open a confirmation dialog before removing the item.
+- Added `decoupleForm` to [Form.Handler](/uilib/extensions/forms/Form/Handler/), to be able to use the data context in a more flexible way.
+- Added support for using function reference instead of a string based `id` in [Form.Handler](/uilib/extensions/forms/Form/Handler/).
+- Added `sessionStorageId` support to [Field.Upload](/uilib/extensions/forms/feature-fields/more-fields/Upload/) with empty file list rendering.
+- Added [docs on how to deal with TypeScript types](/uilib/extensions/forms/getting-started/#typescript-support), and enhanced typings.
+- Fixed so there is no outline when using `variant="basic"` in [Form.Section](/uilib/extensions/forms/Form/Section/) containers when used in [Wizard](/uilib/extensions/forms/Wizard/).
+- Fixed formatting of country prefixes in [Value.PhoneNumber](/uilib/extensions/forms/Value/PhoneNumber/).
+
 ## v10.57
 
 - Added possibility for disabling individual options in [Field.Selection](/uilib/extensions/forms/base-fields/Selection/) and [Field.ArraySelection](/uilib/extensions/forms/base-fields/ArraySelection/).
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/getting-started.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/getting-started.mdx
index 8378af5c301..a90124edf63 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/getting-started.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/getting-started.mdx
@@ -20,6 +20,7 @@ import AsyncChangeExample from './Form/Handler/parts/async-change-example.mdx'
 
 - [Getting started](#getting-started)
   - [Creating forms](#creating-forms)
+  - [TypeScript support](#typescript-support)
   - [State management](#state-management)
     - [What is a JSON Pointer?](#what-is-a-json-pointer)
     - [Data handling](#data-handling)
@@ -62,6 +63,37 @@ To build an entire form, there are surrounding components such as form [Handler]
 
 The needed styles are included in the Eufemia core package via `dnb-ui-components`.
 
+### TypeScript support
+
+You can define the TypeScript type structure for your data like so:
+
+```tsx
+import { Form } from '@dnb/eufemia/extensions/forms'
+
+type MyDataContext = {
+  firstName?: string
+}
+
+function MyForm() {
+  return (
+    <Form.Handler<MyDataContext>
+      onSubmit={(data) => {
+        console.log(data.firstName) // "firstName" is of type string
+      }}
+    >
+      <MyComponent />
+    </Form.Handler>
+  )
+}
+
+const MyComponent = () => {
+  const { data } = Form.useData<MyDataContext>()
+  return data.firstName
+}
+```
+
+Read more about TypeScript support and the other methods in the [Form.Handler](/uilib/extensions/forms/Form/Handler/#typescript-support) section or in the [Form.useData](/uilib/extensions/forms/Form/useData/#typescript-support) hook docs.
+
 ### State management
 
 While you can use a controlled method of handling the sate of fields or your form, it is recommended to use a declarative approach, where you keep the state of your form inside the data context, instead of pulling it out via your own `useState` hooks (imperative).
@@ -121,16 +153,18 @@ How do I handle complex data logic?
 
 You can show or hide parts of your form based on your own logic. This is done by using the [Visibility](/uilib/extensions/forms/Form/Visibility/) component (yes, it even can animate the visibility).
 
-And you can access and modify your form data with [useData](/uilib/extensions/forms/Form/useData/) or [getData](/uilib/extensions/forms/Form/getData/) or even [setData](/uilib/extensions/forms/Form/setData/).
+And you can access and modify your form data with [Form.useData](/uilib/extensions/forms/Form/useData/) or [getData](/uilib/extensions/forms/Form/getData/) or even [setData](/uilib/extensions/forms/Form/setData/).
 
 Here is an example of how to use these methods:
 
 ```jsx
 import { Form } from '@dnb/eufemia/extensions/forms'
 
+const myFormId = 'unique-id' // or a function, object or React Context reference
+
 function MyForm() {
   return (
-    <Form.Handler id="unique-id">
+    <Form.Handler id={myFormId}>
       <MyComponent />
     </Form.Handler>
   )
@@ -145,15 +179,15 @@ function MyComponent() {
     data,
     filterData,
     reduceToVisibleFields,
-  } = Form.useData() // optionally provide an id (unique-id)
+  } = Form.useData() // optionally provide an id or reference
 }
 
 // You can also use the setData:
-Form.setData('unique-id', { companyName: 'DNB' })
+Form.setData(myFormId, { companyName: 'DNB' })
 
 // ... and the getData – method when ever you need to:
 const { getValue, data, filterData, reduceToVisibleFields } =
-  Form.getData('unique-id')
+  Form.getData(myFormId)
 ```
 
 - `getValue` will return the value of the given path.
@@ -164,7 +198,7 @@ const { getValue, data, filterData, reduceToVisibleFields } =
 - `filterData` will filter the data based on your own logic.
 - `reduceToVisibleFields` will reduce the given data set to only contain the visible fields (mounted fields).
 
-As you can see in the code above, you can even handle the state outside the `Form.Handler` context. You find more details on this topic in the [useData](/uilib/extensions/forms/Form/useData/) documentation.
+As you can see in the code above, you can even handle the state outside the `Form.Handler` context. You find more details on this topic in the [Form.useData](/uilib/extensions/forms/Form/useData/) documentation.
 
 <Examples.GettingStarted />
 
@@ -181,9 +215,9 @@ When submitting data to the server, you might want to exclude data that has been
 
 In this section we will show how to filter out some data based on your own logic. You can filter data by any given criteria. This is done by utilizing the `filterData` method from e.g.:
 
-- [useData](/uilib/extensions/forms/Form/useData/#filter-data) hook.
-- [getData](/uilib/extensions/forms/Form/getData/#filter-data) method.
-- [Visibility](/uilib/extensions/forms/Form/Visibility/#filter-data) component.
+- [Form.useData](/uilib/extensions/forms/Form/useData/#filter-data) hook.
+- [Form.getData](/uilib/extensions/forms/Form/getData/#filter-data) method.
+- [Form.Visibility](/uilib/extensions/forms/Form/Visibility/#filter-data) component.
 
 You can provide either a function handler or an object with the paths (JSON Pointer) you want to filter out.
 
@@ -229,16 +263,16 @@ You may check out an [interactive example](/uilib/extensions/forms/Form/useData/
 For filtering data during form submit (`onSubmit`), you can use the `filterData` method given as a parameter to the `onSubmit` event callback:
 
 ```tsx
-const onSubmit = (data, { filterData }) => {
-  // Same method as in the previous example
-  const filteredDataA = filterData(filterDataPaths)
-  const filteredDataB = filterData(filterDataHandler)
-  console.log(filteredDataA)
-  console.log(filteredDataB)
-}
-
 render(
-  <Form.Handler onSubmit={onSubmit}>
+  <Form.Handler
+    onSubmit={(data, { filterData }) => {
+      // Same method as in the previous example
+      const filteredDataA = filterData(filterDataPaths)
+      const filteredDataB = filterData(filterDataHandler)
+      console.log(filteredDataA)
+      console.log(filteredDataB)
+    }}
+  >
     <Field.String path="/foo" />
   </Form.Handler>,
 )
@@ -426,7 +460,7 @@ Eufemia Forms will easily link up with the [GlobalStatus](/uilib/components/glob
 ```tsx
 <GlobalStatus />
 
-<Form.Handler >
+<Form.Handler>
   My Form
 </Form.Handler>
 ```
diff --git a/packages/dnb-design-system-portal/src/shared/menu/SidebarMenu.module.scss b/packages/dnb-design-system-portal/src/shared/menu/SidebarMenu.module.scss
index 8a9c19a8994..af09e235248 100644
--- a/packages/dnb-design-system-portal/src/shared/menu/SidebarMenu.module.scss
+++ b/packages/dnb-design-system-portal/src/shared/menu/SidebarMenu.module.scss
@@ -234,7 +234,7 @@
 
     &__expand-button {
       align-self: center;
-      margin-right: 0.5rem;
+      margin-right: 1rem;
       &:hover {
         background-color: white;
         outline: 1px solid currentcolor;
@@ -255,7 +255,7 @@
         }
 
         > .dnb-sidebar-menu__item .dnb-sidebar-menu__expand-button {
-          margin-right: 0.25rem;
+          margin-right: 0.75rem;
         }
       }
     }
diff --git a/packages/dnb-design-system-portal/src/shared/menu/SidebarMenu.tsx b/packages/dnb-design-system-portal/src/shared/menu/SidebarMenu.tsx
index 4e9b32e1cc5..abb8f855952 100644
--- a/packages/dnb-design-system-portal/src/shared/menu/SidebarMenu.tsx
+++ b/packages/dnb-design-system-portal/src/shared/menu/SidebarMenu.tsx
@@ -417,6 +417,7 @@ function ListItem({
         </div>
         {hasSubheadings && (
           <HeightAnimation
+            animate={isAccordion === true}
             element="ul"
             open={isExpanded}
             onAnimationEnd={(state) => {
@@ -433,7 +434,6 @@ function ListItem({
           </HeightAnimation>
         )}
       </li>
-      {/* Currently not nesting list items with an <ul/> inside <li/> as it breaks the styling for the time being */}
     </>
   )
 }
diff --git a/packages/dnb-eufemia/src/components/date-picker/DatePickerContext.ts b/packages/dnb-eufemia/src/components/date-picker/DatePickerContext.ts
index 71b58afaede..3c0511fb275 100644
--- a/packages/dnb-eufemia/src/components/date-picker/DatePickerContext.ts
+++ b/packages/dnb-eufemia/src/components/date-picker/DatePickerContext.ts
@@ -23,7 +23,7 @@ export type DatePickerContextValues = ContextProps &
     translation: ContextProps['translation']
     views: Array<CalendarView>
     hasHadValidDate: boolean
-    previousDates: DatePickerDateProps
+    previousDateProps: DatePickerDateProps
     updateDates: (
       dates: DatePickerDates,
       callback?: (dates: DatePickerDates) => void
diff --git a/packages/dnb-eufemia/src/components/date-picker/DatePickerFooter.tsx b/packages/dnb-eufemia/src/components/date-picker/DatePickerFooter.tsx
index c0f30ab8c2b..bf013bbf0ec 100644
--- a/packages/dnb-eufemia/src/components/date-picker/DatePickerFooter.tsx
+++ b/packages/dnb-eufemia/src/components/date-picker/DatePickerFooter.tsx
@@ -39,7 +39,7 @@ function DatePickerFooter({
 }: DatePickerFooterProps) {
   const {
     updateDates,
-    previousDates,
+    previousDateProps,
     props: contextProps,
   } = useContext(DatePickerContext)
 
@@ -69,18 +69,18 @@ function DatePickerFooter({
         args.event.persist()
       }
 
-      const startDate = previousDates.startDate
-        ? convertStringToDate(previousDates.startDate, {
+      const startDate = previousDateProps.startDate
+        ? convertStringToDate(previousDateProps.startDate, {
             dateFormat,
           })
-        : previousDates.date
-        ? convertStringToDate(previousDates.date, {
+        : previousDateProps.date
+        ? convertStringToDate(previousDateProps.date, {
             dateFormat,
           })
         : null
 
-      const endDate = previousDates.endDate
-        ? convertStringToDate(previousDates.endDate, {
+      const endDate = previousDateProps.endDate
+        ? convertStringToDate(previousDateProps.endDate, {
             dateFormat,
           })
         : startDate
@@ -95,7 +95,7 @@ function DatePickerFooter({
         }
       )
     },
-    [dateFormat, updateDates, previousDates, onCancel]
+    [dateFormat, updateDates, previousDateProps, onCancel]
   )
 
   const onResetHandler = useCallback(
diff --git a/packages/dnb-eufemia/src/components/date-picker/DatePickerProvider.tsx b/packages/dnb-eufemia/src/components/date-picker/DatePickerProvider.tsx
index 52ff66a306e..2075d9cf611 100644
--- a/packages/dnb-eufemia/src/components/date-picker/DatePickerProvider.tsx
+++ b/packages/dnb-eufemia/src/components/date-picker/DatePickerProvider.tsx
@@ -91,22 +91,23 @@ function DatePickerProvider(externalProps: DatePickerProviderProps) {
 
   const sharedContext = useContext(SharedContext)
 
-  const { dates, updateDates, hasHadValidDate, previousDates } = useDates(
-    {
-      date,
-      startDate,
-      endDate,
-      startMonth,
-      endMonth,
-      minDate,
-      maxDate,
-    },
-    {
-      dateFormat: dateFormat,
-      isRange: range,
-      shouldCorrectDate: correctInvalidDate,
-    }
-  )
+  const { dates, updateDates, hasHadValidDate, previousDateProps } =
+    useDates(
+      {
+        date,
+        startDate,
+        endDate,
+        startMonth,
+        endMonth,
+        minDate,
+        maxDate,
+      },
+      {
+        dateFormat: dateFormat,
+        isRange: range,
+        shouldCorrectDate: correctInvalidDate,
+      }
+    )
 
   const { views, setViews, forceViewMonthChange } = useViews({
     startMonth: dates.startMonth,
@@ -225,7 +226,7 @@ function DatePickerProvider(externalProps: DatePickerProviderProps) {
         hidePicker: hidePicker,
         props,
         ...dates,
-        previousDates,
+        previousDateProps,
         hasHadValidDate,
         views,
         setViews,
diff --git a/packages/dnb-eufemia/src/components/date-picker/__tests__/DatePicker.test.tsx b/packages/dnb-eufemia/src/components/date-picker/__tests__/DatePicker.test.tsx
index 91091144f3d..65baae0bbc7 100644
--- a/packages/dnb-eufemia/src/components/date-picker/__tests__/DatePicker.test.tsx
+++ b/packages/dnb-eufemia/src/components/date-picker/__tests__/DatePicker.test.tsx
@@ -3,7 +3,7 @@
  *
  */
 
-import React from 'react'
+import React, { useState } from 'react'
 import { axeComponent, loadScss, wait } from '../../../core/jest/jestSetup'
 import userEvent from '@testing-library/user-event'
 import DatePicker, { DatePickerAllProps } from '../DatePicker'
@@ -223,6 +223,264 @@ describe('DatePicker component', () => {
     ).not.toContain('dnb-date-picker--opened')
   })
 
+  it('should delete input content one number at a time when `date` is "prop controlled"', async () => {
+    const Component = () => {
+      const [date, setDate] = useState('2024-05-17')
+
+      return (
+        <DatePicker
+          showInput
+          date={date}
+          onChange={({ date }) => setDate(date)}
+        />
+      )
+    }
+
+    render(<Component />)
+
+    const [day, month, year]: Array<HTMLInputElement> = Array.from(
+      document.querySelectorAll('input.dnb-input__input')
+    )
+
+    expect(day.value).toBe('17')
+    expect(month.value).toBe('05')
+    expect(year.value).toBe('2024')
+
+    await userEvent.click(year)
+    await userEvent.keyboard('{ArrowRight>4}{Backspace}')
+
+    expect(day.value).toBe('17')
+    expect(month.value).toBe('05')
+    expect(year.value).toBe('202å')
+
+    await userEvent.keyboard('{Backspace}')
+
+    expect(day.value).toBe('17')
+    expect(month.value).toBe('05')
+    expect(year.value).toBe('20åå')
+
+    await userEvent.keyboard('{Backspace}')
+
+    expect(day.value).toBe('17')
+    expect(month.value).toBe('05')
+    expect(year.value).toBe('2ååå')
+
+    await userEvent.keyboard('{Backspace}')
+
+    expect(day.value).toBe('17')
+    expect(month.value).toBe('05')
+    expect(year.value).toBe('åååå')
+
+    await userEvent.keyboard('{Backspace>2}')
+
+    expect(day.value).toBe('17')
+    expect(month.value).toBe('0m')
+    expect(year.value).toBe('åååå')
+
+    await userEvent.keyboard('{Backspace}')
+
+    expect(day.value).toBe('17')
+    expect(month.value).toBe('mm')
+    expect(year.value).toBe('åååå')
+
+    await userEvent.keyboard('{Backspace>2}')
+
+    expect(day.value).toBe('1d')
+    expect(month.value).toBe('mm')
+    expect(year.value).toBe('åååå')
+
+    await userEvent.keyboard('{Backspace}')
+
+    expect(day.value).toBe('dd')
+    expect(month.value).toBe('mm')
+    expect(year.value).toBe('åååå')
+  })
+
+  it('should delete input content one number at a time when `startDate` and `endDate` is "prop controlled" and in ranged mode', async () => {
+    const Component = () => {
+      const [startDate, setStartDate] = useState('2024-05-01')
+      const [endDate, setEndDate] = useState('2025-06-30')
+
+      return (
+        <DatePicker
+          showInput
+          range
+          startDate={startDate}
+          endDate={endDate}
+          onChange={({ start_date, end_date }) => {
+            setStartDate(start_date)
+            setEndDate(end_date)
+          }}
+        />
+      )
+    }
+
+    render(<Component />)
+
+    const [
+      startDay,
+      startMonth,
+      startYear,
+      endDay,
+      endMonth,
+      endYear,
+    ]: Array<HTMLInputElement> = Array.from(
+      document.querySelectorAll('input.dnb-input__input')
+    )
+
+    expect(startDay.value).toBe('01')
+    expect(startMonth.value).toBe('05')
+    expect(startYear.value).toBe('2024')
+    expect(endDay.value).toBe('30')
+    expect(endMonth.value).toBe('06')
+    expect(endYear.value).toBe('2025')
+
+    await userEvent.click(endYear)
+    await userEvent.keyboard('{ArrowRight>4}{Backspace}')
+
+    expect(startDay.value).toBe('01')
+    expect(startMonth.value).toBe('05')
+    expect(startYear.value).toBe('2024')
+    expect(endDay.value).toBe('30')
+    expect(endMonth.value).toBe('06')
+    expect(endYear.value).toBe('202å')
+
+    await userEvent.keyboard('{Backspace}')
+
+    expect(startDay.value).toBe('01')
+    expect(startMonth.value).toBe('05')
+    expect(startYear.value).toBe('2024')
+    expect(endDay.value).toBe('30')
+    expect(endMonth.value).toBe('06')
+    expect(endYear.value).toBe('20åå')
+
+    await userEvent.keyboard('{Backspace}')
+
+    expect(startDay.value).toBe('01')
+    expect(startMonth.value).toBe('05')
+    expect(startYear.value).toBe('2024')
+    expect(endDay.value).toBe('30')
+    expect(endMonth.value).toBe('06')
+    expect(endYear.value).toBe('2ååå')
+
+    await userEvent.keyboard('{Backspace}')
+
+    expect(startDay.value).toBe('01')
+    expect(startMonth.value).toBe('05')
+    expect(startYear.value).toBe('2024')
+    expect(endDay.value).toBe('30')
+    expect(endMonth.value).toBe('06')
+    expect(endYear.value).toBe('åååå')
+
+    await userEvent.keyboard('{Backspace>2}')
+
+    expect(startDay.value).toBe('01')
+    expect(startMonth.value).toBe('05')
+    expect(startYear.value).toBe('2024')
+    expect(endDay.value).toBe('30')
+    expect(endMonth.value).toBe('0m')
+    expect(endYear.value).toBe('åååå')
+
+    await userEvent.keyboard('{Backspace}')
+
+    expect(startDay.value).toBe('01')
+    expect(startMonth.value).toBe('05')
+    expect(startYear.value).toBe('2024')
+    expect(endDay.value).toBe('30')
+    expect(endMonth.value).toBe('mm')
+    expect(endYear.value).toBe('åååå')
+
+    await userEvent.keyboard('{Backspace>2}')
+
+    expect(startDay.value).toBe('01')
+    expect(startMonth.value).toBe('05')
+    expect(startYear.value).toBe('2024')
+    expect(endDay.value).toBe('3d')
+    expect(endMonth.value).toBe('mm')
+    expect(endYear.value).toBe('åååå')
+
+    await userEvent.keyboard('{Backspace}')
+
+    expect(startDay.value).toBe('01')
+    expect(startMonth.value).toBe('05')
+    expect(startYear.value).toBe('2024')
+    expect(endDay.value).toBe('dd')
+    expect(endMonth.value).toBe('mm')
+    expect(endYear.value).toBe('åååå')
+
+    await userEvent.keyboard('{Backspace>2}')
+
+    expect(startDay.value).toBe('01')
+    expect(startMonth.value).toBe('05')
+    expect(startYear.value).toBe('202å')
+    expect(endDay.value).toBe('dd')
+    expect(endMonth.value).toBe('mm')
+    expect(endYear.value).toBe('åååå')
+
+    await userEvent.keyboard('{Backspace}')
+
+    expect(startDay.value).toBe('01')
+    expect(startMonth.value).toBe('05')
+    expect(startYear.value).toBe('20åå')
+    expect(endDay.value).toBe('dd')
+    expect(endMonth.value).toBe('mm')
+    expect(endYear.value).toBe('åååå')
+
+    await userEvent.keyboard('{Backspace}')
+
+    expect(startDay.value).toBe('01')
+    expect(startMonth.value).toBe('05')
+    expect(startYear.value).toBe('2ååå')
+    expect(endDay.value).toBe('dd')
+    expect(endMonth.value).toBe('mm')
+    expect(endYear.value).toBe('åååå')
+
+    await userEvent.keyboard('{Backspace}')
+
+    expect(startDay.value).toBe('01')
+    expect(startMonth.value).toBe('05')
+    expect(startYear.value).toBe('åååå')
+    expect(endDay.value).toBe('dd')
+    expect(endMonth.value).toBe('mm')
+    expect(endYear.value).toBe('åååå')
+
+    await userEvent.keyboard('{Backspace>2}')
+
+    expect(startDay.value).toBe('01')
+    expect(startMonth.value).toBe('0m')
+    expect(startYear.value).toBe('åååå')
+    expect(endDay.value).toBe('dd')
+    expect(endMonth.value).toBe('mm')
+    expect(endYear.value).toBe('åååå')
+
+    await userEvent.keyboard('{Backspace}')
+
+    expect(startDay.value).toBe('01')
+    expect(startMonth.value).toBe('mm')
+    expect(startYear.value).toBe('åååå')
+    expect(endDay.value).toBe('dd')
+    expect(endMonth.value).toBe('mm')
+    expect(endYear.value).toBe('åååå')
+
+    await userEvent.keyboard('{Backspace>2}')
+
+    expect(startDay.value).toBe('0d')
+    expect(startMonth.value).toBe('mm')
+    expect(startYear.value).toBe('åååå')
+    expect(endDay.value).toBe('dd')
+    expect(endMonth.value).toBe('mm')
+    expect(endYear.value).toBe('åååå')
+
+    await userEvent.keyboard('{Backspace}')
+
+    expect(startDay.value).toBe('dd')
+    expect(startMonth.value).toBe('mm')
+    expect(startYear.value).toBe('åååå')
+    expect(endDay.value).toBe('dd')
+    expect(endMonth.value).toBe('mm')
+    expect(endYear.value).toBe('åååå')
+  })
+
   it('will render the result of "onDaysRender"', () => {
     const customClassName = 'dnb-date-picker__day--weekend'
     const onDaysRender = jest.fn((days) => {
@@ -2315,51 +2573,6 @@ describe('DatePicker calc', () => {
       rightPicker.querySelector('.dnb-date-picker__header__title')
     ).toHaveTextContent('november 2024')
   })
-
-  it('should remove end date from ranged input, where dates are prop controlled, when pressing backspace', async () => {
-    const Component = () => {
-      const [startDate, setStartDate] = React.useState('2024-10-10')
-      const [endDate, setEndDate] = React.useState('2024-11-21')
-
-      return (
-        <DatePicker
-          range
-          showInput
-          date={startDate}
-          startDate={startDate}
-          endDate={endDate}
-          onChange={({ start_date, end_date }) => {
-            setStartDate(start_date)
-            setEndDate(end_date)
-          }}
-        />
-      )
-    }
-
-    render(<Component />)
-
-    const [startDay, startMonth, startYear, endDay, endMonth, endYear] =
-      Array.from(
-        document.querySelectorAll('.dnb-date-picker__input')
-      ) as Array<HTMLInputElement>
-
-    expect(startDay.value).toBe('10')
-    expect(startMonth.value).toBe('10')
-    expect(startYear.value).toBe('2024')
-    expect(endDay.value).toBe('21')
-    expect(endMonth.value).toBe('11')
-    expect(endYear.value).toBe('2024')
-
-    await userEvent.click(endYear)
-    await userEvent.keyboard('{backspace>3}')
-
-    expect(startDay.value).toBe('10')
-    expect(startMonth.value).toBe('10')
-    expect(startYear.value).toBe('2024')
-    expect(endDay.value).toBe('dd')
-    expect(endMonth.value).toBe('mm')
-    expect(endYear.value).toBe('åååå')
-  })
 })
 
 describe('DatePicker scss', () => {
diff --git a/packages/dnb-eufemia/src/components/date-picker/hooks/useDates.ts b/packages/dnb-eufemia/src/components/date-picker/hooks/useDates.ts
index 15368647a06..ee2433cfcd7 100644
--- a/packages/dnb-eufemia/src/components/date-picker/hooks/useDates.ts
+++ b/packages/dnb-eufemia/src/components/date-picker/hooks/useDates.ts
@@ -2,7 +2,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { convertStringToDate, isDisabled } from '../DatePickerCalc'
 import isValid from 'date-fns/isValid'
 import format from 'date-fns/format'
-import { addMonths } from 'date-fns'
+import { addMonths, isSameDay } from 'date-fns'
 import { DateType } from '../DatePickerContext'
 
 export type DatePickerDateProps = {
@@ -53,9 +53,9 @@ export default function useDates(
     shouldCorrectDate = false,
   }: UseDatesOptions
 ) {
-  const [previousDates, setPreviousDates] = useState(dateProps)
+  const [previousDateProps, setPreviousDateProps] = useState(dateProps)
   const [dates, setDates] = useState<DatePickerDates>({
-    ...mapDates(dateProps, previousDates, {
+    ...mapDates(dateProps, {
       dateFormat,
       isRange,
       shouldCorrectDate,
@@ -65,21 +65,41 @@ export default function useDates(
   const hasDatePropChanges = useMemo(
     () =>
       Object.keys(dateProps).some((date) => {
-        return dateProps[date] !== previousDates[date]
+        const dateProp = dateProps[date]
+        const previousDate = previousDateProps[date]
+
+        const convertedDateProp = convertStringToDate(dateProp, {
+          dateFormat,
+        })
+        const convertedPreviousDate = convertStringToDate(previousDate, {
+          dateFormat,
+        })
+        // Make sure that same dates does not trigger a change
+        // i.e. 2021-01-01 and new Date('2021-01-01')
+        if (
+          convertedDateProp instanceof Date &&
+          convertedPreviousDate instanceof Date
+        ) {
+          return !isSameDay(convertedDateProp, convertedPreviousDate)
+        }
+
+        return dateProp !== previousDate
       }),
-    [dateProps, previousDates]
+    [dateProps, previousDateProps, dateFormat]
   )
 
   // Update dates on prop change
   if (hasDatePropChanges) {
-    setDates({
-      ...mapDates({ ...dates, ...dateProps }, previousDates, {
-        dateFormat,
-        isRange,
-        shouldCorrectDate,
-      }),
+    const derivedDates = deriveDatesFromProps({
+      dates,
+      dateProps,
+      previousDateProps,
+      dateFormat,
+      isRange,
     })
-    setPreviousDates(dateProps)
+
+    setDates((currentDates) => ({ ...currentDates, ...derivedDates }))
+    setPreviousDateProps(dateProps)
   }
 
   const hasHadValidDate = useRef<boolean>(false)
@@ -128,8 +148,8 @@ export default function useDates(
   // Updated input dates based on start and end dates, move to DatePickerInput
   // TODO: Move to DatePickerInput
   useEffect(() => {
-    const startDates = updateInputDates('start', dates)
-    const endDates = updateInputDates('end', dates)
+    const startDates = updateInputDates('start', dates.startDate)
+    const endDates = updateInputDates('end', dates.endDate)
 
     hasHadValidDate.current =
       isValid(dates.startDate) || isValid(dates.endDate)
@@ -146,14 +166,13 @@ export default function useDates(
     dates,
     updateDates,
     hasHadValidDate: hasHadValidDate.current,
-    previousDates,
+    previousDateProps,
   } as const
 }
 
 // TODO: Move to DatePickerInput
-function updateInputDates(type: 'start' | 'end', dates: DatePickerDates) {
+function updateInputDates(type: 'start' | 'end', date: Date | undefined) {
   const updatedDates = {}
-  const date = dates[`${type}Date`]
 
   if (isValid(date)) {
     updatedDates[`__${type}Day`] = pad(format(date, 'dd'), 2)
@@ -170,17 +189,13 @@ function updateInputDates(type: 'start' | 'end', dates: DatePickerDates) {
 
 function mapDates(
   dateProps: DatePickerDateProps,
-  previousDates: DatePickerDateProps,
   {
     dateFormat,
     isRange,
     shouldCorrectDate,
   }: Omit<UseDatesOptions, 'isLinked'>
 ) {
-  const date =
-    previousDates.date !== dateProps.date
-      ? dateProps.date
-      : previousDates.date
+  const date = dateProps.date
 
   const startDate =
     typeof dateProps?.startDate !== 'undefined'
@@ -224,6 +239,7 @@ function mapDates(
     : {}
 
   const dates = {
+    date,
     startDate,
     endDate,
     startMonth,
@@ -252,6 +268,92 @@ function mapDates(
   }
 }
 
+function deriveDatesFromProps({
+  dates,
+  dateProps,
+  previousDateProps,
+  dateFormat,
+  isRange,
+}: {
+  dates: DatePickerDates
+  dateProps: DatePickerDateProps
+  previousDateProps: DatePickerDateProps
+  dateFormat: UseDatesOptions['dateFormat']
+  isRange: UseDatesOptions['isRange']
+}) {
+  const derivedDates: DatePickerDates = {}
+
+  const startDate = getStartDate(dateProps, previousDateProps)
+
+  // Handle updates related to date and startDate changes when not in range mode
+  if (typeof startDate !== 'undefined' && startDate !== dates.startDate) {
+    derivedDates.startDate =
+      convertStringToDate(startDate, {
+        dateFormat,
+      }) || undefined
+
+    // Set endDate and startMonth to startDate if not in range mode
+    if (!isRange) {
+      derivedDates.startMonth =
+        convertStringToDate(startDate, {
+          dateFormat,
+        }) || undefined
+
+      derivedDates.endDate = derivedDates.startDate
+    }
+  }
+
+  // update endDate based on endDate prop if in range mode
+  if (
+    isRange &&
+    typeof dateProps.endDate !== 'undefined' &&
+    dateProps.endDate !== dates.endDate
+  ) {
+    derivedDates.endDate =
+      convertStringToDate(dateProps.endDate, {
+        dateFormat,
+      }) || undefined
+  }
+
+  // Handle startMonth/endMonth
+  if (
+    typeof dateProps.startMonth !== 'undefined' &&
+    dateProps.startMonth !== previousDateProps.startMonth
+  ) {
+    derivedDates.startMonth = convertStringToDate(dateProps.startMonth, {
+      dateFormat,
+    })
+  }
+  if (
+    typeof dateProps.endMonth !== 'undefined' &&
+    dateProps.endMonth !== previousDateProps.endMonth
+  ) {
+    derivedDates.endMonth = convertStringToDate(dateProps.endMonth, {
+      dateFormat,
+    })
+  }
+
+  // Handle minDate/maxDate
+  if (
+    typeof dateProps.minDate !== 'undefined' &&
+    dateProps.minDate !== previousDateProps.minDate
+  ) {
+    derivedDates.minDate = convertStringToDate(dateProps.minDate, {
+      dateFormat,
+    })
+  }
+  if (
+    typeof dateProps.maxDate !== 'undefined' &&
+    dateProps.maxDate !== previousDateProps.maxDate
+  ) {
+    derivedDates.maxDate = convertStringToDate(dateProps.maxDate, {
+      dateFormat,
+    })
+  }
+
+  return derivedDates
+}
+
 function correctDates({
   startDate,
   endDate,
@@ -309,6 +411,28 @@ function getDate(date: DateType, dateFormat: string) {
       })
 }
 
+function getStartDate(
+  dateProps: DatePickerDateProps,
+  previousDateProps: DatePickerDateProps
+) {
+  // priortize startDate over date if provided
+  if (
+    typeof dateProps.startDate !== 'undefined' &&
+    dateProps.startDate !== previousDateProps.startDate
+  ) {
+    return dateProps.startDate
+  }
+
+  if (
+    typeof dateProps.date !== 'undefined' &&
+    dateProps.date !== previousDateProps.date
+  ) {
+    return dateProps.date
+  }
+
+  return undefined
+}
+
 export function pad(date: string, size: number) {
   const dateWithPadding = '000000000' + date
 
diff --git a/packages/dnb-eufemia/src/components/dialog/parts/DialogAction.tsx b/packages/dnb-eufemia/src/components/dialog/parts/DialogAction.tsx
index 004f9573647..e8e3805c40d 100644
--- a/packages/dnb-eufemia/src/components/dialog/parts/DialogAction.tsx
+++ b/packages/dnb-eufemia/src/components/dialog/parts/DialogAction.tsx
@@ -1,4 +1,4 @@
-import React, { useContext } from 'react'
+import React, { useCallback, useContext } from 'react'
 import classNames from 'classnames'
 import Button from '../../button/Button'
 import Space from '../../space/Space'
@@ -71,6 +71,25 @@ const DialogAction = ({
   const { close } = useContext(ModalContext)
   let childrenWithCloseFunc: Array<React.ReactChild>
 
+  const onConfirmHandler = useCallback(
+    (event) => {
+      dispatchCustomElementEvent({ onConfirm }, 'onConfirm', {
+        event,
+        close,
+      })
+    },
+    [close, onConfirm]
+  )
+  const onDeclineHandler = useCallback(
+    (event) => {
+      dispatchCustomElementEvent({ onDecline }, 'onDecline', {
+        event,
+        close,
+      })
+    },
+    [close, onDecline]
+  )
+
   if (children) {
     childrenWithCloseFunc = React.Children.map(children, (child) => {
       if (child.type === Button) {
@@ -105,12 +124,7 @@ const DialogAction = ({
         <Button
           text={declineText || translation?.Dialog?.declineText}
           variant="secondary"
-          onClick={(event) => {
-            dispatchCustomElementEvent({ onDecline }, 'onDecline', {
-              event,
-              close,
-            })
-          }}
+          onClick={onDeclineHandler}
           size={ButtonContext?.size || 'large'}
         />
       )}
@@ -118,12 +132,7 @@ const DialogAction = ({
         <Button
           text={confirmText || translation?.Dialog?.confirmText}
           variant="primary"
-          onClick={(event) => {
-            dispatchCustomElementEvent({ onConfirm }, 'onConfirm', {
-              event,
-              close,
-            })
-          }}
+          onClick={onConfirmHandler}
           size={ButtonContext?.size || 'large'}
         />
       )}
diff --git a/packages/dnb-eufemia/src/components/number-format/NumberUtils.js b/packages/dnb-eufemia/src/components/number-format/NumberUtils.js
index fef86cd0218..734860a9bac 100644
--- a/packages/dnb-eufemia/src/components/number-format/NumberUtils.js
+++ b/packages/dnb-eufemia/src/components/number-format/NumberUtils.js
@@ -261,11 +261,6 @@ export const format = (
       currencyDisplay: 'name',
     })
     aria = enhanceSR(cleanedNumber, aria, locale) // also calls prepareMinus
-
-    // get only the currency name
-    // const num = aria.replace(/([^0-9])+$/g, '')
-    // const name = aria.replace(num, '')
-    // aria = cleanedNumber + name
   } else {
     handleCompactBeforeDisplay({ value, locale, compact, decimals, opts })
 
@@ -590,49 +585,52 @@ export const formatPhone = (number, locale = null) => {
 
   switch (locale) {
     default: {
-      // cleanup
-      number = String(number).replace(/[^+0-9]/g, '')
-
       let code = ''
-      if (
-        number.length > 8 &&
-        number.substring(0, 2) !== '00' &&
-        !number.startsWith('+')
-      ) {
-        number = '+' + number
+      number = String(number)
+        // Edge case for when a Norwegian number is given without a space after the country code
+        .replace(/^(00|\+|)47([^\s])/, '+47 $2')
+        .replace(/^00/, '+')
+
+      if (number.substring(0, 1) === '+') {
+        const codeAndNumber = number.match(
+          // Split the number into the country code and the rest of the number
+          /^\+([\d-]{1,8})\s{0,2}([\d\s-]{1,20})$/
+        )
+        if (codeAndNumber) {
+          code = `+${codeAndNumber[1]} `
+          number = codeAndNumber[2]
+        }
       }
 
-      if (number[0] === '+') {
-        code = number.substring(0, 3) + ' '
-        number = number.substring(3)
-      } else if (number.substring(0, 2) === '00') {
-        code = number.substring(0, 4) + ' '
-        number = number.substring(4)
-      }
-      code = code.replace(/^00/, '+')
+      number = number.replace(/[^+\d]/g, '')
       const length = number.length
 
-      // get 800 22 222
-      if (length === 8 && number[0] === '8') {
+      // Get 800 22 222
+      if (length === 8 && number.substring(0, 1) === '8') {
         display =
           code +
           number
-            .split(/([0-9]{3})([0-9]{2})/)
+            .split(/([\d]{3})([\d]{2})/)
             .filter((s) => s)
             .join(' ')
       } else {
-        // get 02000
+        // Get 02000
         if (length < 6) {
           display = code + number
         } else {
-          // get 6 or 8 formatting
+          if (code.includes('-')) {
+            // Convert +12-3456 to +12 (3456)
+            code = code.replace(/(\+[\d]{1,2})-([\d]{1,6})/, '$1 ($2)')
+          }
+
+          // Get 6 or 8 formatting
           display =
             code +
             number
               .split(
                 length === 6
-                  ? /^(\+[0-9]{2})|([0-9]{3})/
-                  : /^(\+[0-9]{2})|([0-9]{2})/
+                  ? /^(\+[\d]{2})|([\d]{3})/
+                  : /^(\+[\d]{2})|([\d]{2})/
               )
               .filter((s) => s)
               .join(' ')
@@ -642,7 +640,7 @@ export const formatPhone = (number, locale = null) => {
       aria =
         code +
         number
-          .split(/([0-9]{2})/)
+          .split(/([\d]{2})/)
           .filter((s) => s)
           .join(' ')
     }
@@ -671,7 +669,7 @@ export const formatBAN = (number, locale = null) => {
 
   switch (locale) {
     default: {
-      // get 2000 12 34567
+      // Get 2000 12 34567
       display = number
         .split(/([0-9]{4})([0-9]{2})([0-9]{1,})/)
         .filter((s) => s)
@@ -707,7 +705,7 @@ export const formatORG = (number, locale = null) => {
 
   switch (locale) {
     default: {
-      // get 123 456 789
+      // Get 123 456 789
       display = number
         .split(/([0-9]{3})/)
         .filter((s) => s)
@@ -743,7 +741,7 @@ export const formatNIN = (number, locale = null) => {
 
   switch (locale) {
     default: {
-      // get 180892 12345
+      // Get 180892 12345
       display = number
         .split(/([0-9]{6})/)
         .filter((s) => s)
diff --git a/packages/dnb-eufemia/src/components/number-format/__tests__/NumberUtils.test.ts b/packages/dnb-eufemia/src/components/number-format/__tests__/NumberUtils.test.ts
index 6acdbc6d9b4..02b61f55f70 100644
--- a/packages/dnb-eufemia/src/components/number-format/__tests__/NumberUtils.test.ts
+++ b/packages/dnb-eufemia/src/components/number-format/__tests__/NumberUtils.test.ts
@@ -4,6 +4,7 @@
  */
 
 import { mockClipboard } from '../../../core/jest/jestSetup'
+import countries from '../../../extensions/forms/constants/countries'
 import { InternalLocale } from '../../../shared/Context'
 import { LOCALE } from '../../../shared/defaults'
 import * as helpers from '../../../shared/helpers'
@@ -941,10 +942,28 @@ describe('formatPhone', () => {
     expect(number).toBe('12 34 56 78')
   })
 
-  it('should format a phone number with country code', () => {
-    const result = formatPhone('+4712345678')
-    expect(result.number).toBe('+47 12 34 56 78')
-    expect(result.aria).toBe('+47 12 34 56 78')
+  it('should format a phone number with single country code', () => {
+    const result = formatPhone('+1 23456789')
+    expect(result.number).toBe('+1 23 45 67 89')
+    expect(result.aria).toBe('+1 23 45 67 89')
+  })
+
+  it('should format a phone number with three country code digits', () => {
+    const result = formatPhone('+358 23456789')
+    expect(result.number).toBe('+358 23 45 67 89')
+    expect(result.aria).toBe('+358 23 45 67 89')
+  })
+
+  it('should format a phone number with slash in country code', () => {
+    const result = formatPhone('+44-1534 12345678')
+    expect(result.number).toBe('+44 (1534) 12 34 56 78')
+    expect(result.aria).toBe('+44 (1534) 12 34 56 78')
+  })
+
+  it('should format a long number with', () => {
+    const result = formatPhone('+123456 123456789123456789')
+    expect(result.number).toBe('+123456 12 34 56 78 91 23 45 67 89')
+    expect(result.aria).toBe('+123456 12 34 56 78 91 23 45 67 89')
   })
 
   it('should format a phone number without country code', () => {
@@ -953,12 +972,6 @@ describe('formatPhone', () => {
     expect(result.aria).toBe('12 34 56 78')
   })
 
-  it('should format a phone number with leading 00 country code', () => {
-    const result = formatPhone('004712345678')
-    expect(result.number).toBe('+47 12 34 56 78')
-    expect(result.aria).toBe('+47 12 34 56 78')
-  })
-
   it('should format a short phone number', () => {
     const result = formatPhone('12345')
     expect(result.number).toBe('12345')
@@ -972,9 +985,9 @@ describe('formatPhone', () => {
   })
 
   it('should handle invalid characters in phone number', () => {
-    const result = formatPhone('+47-123-456-78')
-    expect(result.number).toBe('+47 12 34 56 78')
-    expect(result.aria).toBe('+47 12 34 56 78')
+    const result = formatPhone('+123 123-456-78')
+    expect(result.number).toBe('+123 12 34 56 78')
+    expect(result.aria).toBe('+123 12 34 56 78')
   })
 
   it('should handle empty input', () => {
@@ -994,4 +1007,44 @@ describe('formatPhone', () => {
     expect(result.number).toBe('')
     expect(result.aria).toBe('')
   })
+
+  it.each(countries.map(({ cdc, i18n }) => [`${i18n.en}`, cdc]))(
+    'should handle %s country code',
+    (_, cdc) => {
+      const result = formatPhone(`+${cdc} 12345678`)
+
+      if (cdc.includes('-')) {
+        cdc = cdc.replace(/([\d]{1,2})-([\d]{1,6})/, '$1 ($2)')
+      }
+
+      expect(result.number).toBe(`+${cdc} 12 34 56 78`)
+      expect(result.aria).toBe(`+${cdc} 12 34 56 78`)
+    }
+  )
+
+  describe('Norway', () => {
+    it('should format a the country code without space', () => {
+      const result = formatPhone('+4712345678')
+      expect(result.number).toBe('+47 12 34 56 78')
+      expect(result.aria).toBe('+47 12 34 56 78')
+    })
+
+    it('should format the country code without + or 00', () => {
+      const result = formatPhone('4712345678')
+      expect(result.number).toBe('+47 12 34 56 78')
+      expect(result.aria).toBe('+47 12 34 56 78')
+    })
+
+    it('should format the country code with 00', () => {
+      const result = formatPhone('004712345678')
+      expect(result.number).toBe('+47 12 34 56 78')
+      expect(result.aria).toBe('+47 12 34 56 78')
+    })
+
+    it('should format the country code with +', () => {
+      const result = formatPhone('+47 12345678')
+      expect(result.number).toBe('+47 12 34 56 78')
+      expect(result.aria).toBe('+47 12 34 56 78')
+    })
+  })
 })
diff --git a/packages/dnb-eufemia/src/extensions/forms/DataContext/Context.ts b/packages/dnb-eufemia/src/extensions/forms/DataContext/Context.ts
index d78adf557f9..edfe34510f1 100644
--- a/packages/dnb-eufemia/src/extensions/forms/DataContext/Context.ts
+++ b/packages/dnb-eufemia/src/extensions/forms/DataContext/Context.ts
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Ajv, FormError, makeAjvInstance } from '../utils'
+import { Ajv, FormError, JsonObject, makeAjvInstance } from '../utils'
 import {
   AllJSONSchemaVersions,
   GlobalErrorMessagesWithPaths,
@@ -7,7 +7,6 @@ import {
   Path,
   EventStateObject,
   EventReturnWithStateObject,
-  Identifier,
   FieldProps,
   ValueProps,
   OnChange,
@@ -15,6 +14,7 @@ import {
 } from '../types'
 import { Props as ProviderProps } from './Provider'
 import { SnapshotName } from '../Form/Snapshot'
+import { SharedStateId } from '../../../shared/helpers/useSharedState'
 
 export type MountState = {
   isPreMounted?: boolean
@@ -85,7 +85,7 @@ export type FieldConnections = {
 }
 
 export interface ContextState {
-  id?: Identifier
+  id?: SharedStateId
   hasContext: boolean
   /** The dataset for the form / form wizard */
   data: any
@@ -181,9 +181,11 @@ export interface ContextState {
   disabled?: boolean
   required?: boolean
   submitState: Partial<EventStateObject>
-  isInsideFormElement?: boolean
   prerenderFieldProps?: boolean
-  props: ProviderProps<unknown>
+  decoupleForm?: boolean
+  hasElementRef?: React.MutableRefObject<boolean>
+  restHandlerProps?: Record<string, unknown>
+  props: ProviderProps<JsonObject>
 }
 
 export const defaultContextState: ContextState = {
@@ -211,7 +213,6 @@ export const defaultContextState: ContextState = {
   hasFieldError: () => false,
   ajvInstance: makeAjvInstance(),
   contextErrorMessages: undefined,
-  isInsideFormElement: false,
   props: null,
 }
 
diff --git a/packages/dnb-eufemia/src/extensions/forms/DataContext/Provider/Provider.tsx b/packages/dnb-eufemia/src/extensions/forms/DataContext/Provider/Provider.tsx
index 8d7660d0a9a..d185f0c27da 100644
--- a/packages/dnb-eufemia/src/extensions/forms/DataContext/Provider/Provider.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/DataContext/Provider/Provider.tsx
@@ -33,7 +33,11 @@ import { debounce } from '../../../../shared/helpers'
 import FieldPropsProvider from '../../Field/Provider'
 import useUpdateEffect from '../../../../shared/helpers/useUpdateEffect'
 import { isAsync } from '../../../../shared/helpers/isAsync'
-import { useSharedState } from '../../../../shared/helpers/useSharedState'
+import {
+  SharedStateId,
+  createReferenceKey,
+  useSharedState,
+} from '../../../../shared/helpers/useSharedState'
 import SharedContext, { ContextProps } from '../../../../shared/Context'
 import useTranslation from '../../hooks/useTranslation'
 import DataContext, {
@@ -69,122 +73,122 @@ export type SharedAttachments<Data = unknown> = {
   fieldConnectionsRef?: ContextState['fieldConnectionsRef']
 }
 
-export interface Props<Data extends JsonObject>
-  extends IsolationProviderProps<Data> {
-  /**
-   * Unique ID to communicate with the hook Form.useData
-   */
-  id?: string
-  /**
-   * Unique ID to connect with a GlobalStatus
-   */
-  globalStatusId?: string
-  /**
-   * Source data, will be used instead of defaultData, and leading to updates if changed after mount
-   */
-  data?: Data
-  /**
-   * Default source data, only used if no other source is available, and not leading to updates if changed after mount
-   */
-  defaultData?: Data
-  /**
-   * Empty data, used to clear the data set.
-   */
-  emptyData?: unknown
-  /**
-   * JSON Schema to validate the data against.
-   */
-  schema?: AllJSONSchemaVersions<Data>
-  /**
-   * Custom Ajv instance, if you want to use your own
-   */
-  ajvInstance?: Ajv
-  /**
-   * Custom error messages for the whole data set
-   */
-  errorMessages?: GlobalErrorMessagesWithPaths
-  /**
-   * @deprecated Use the `filterData` in the second event parameter in the `onSubmit` or `onChange` events.
-   */
-  filterSubmitData?: FilterData
-  /**
-   * Transform the data context (internally as well) based on your criteria: `({ path, value, data, props, internal }) => 'new value'`. It will iterate on each data entry (/path).
-   */
-  transformIn?: TransformData
-  /**
-   * Mutate the data before it enters onSubmit or onChange based on your criteria: `({ path, value, data, props, internal }) => 'new value'`. It will iterate on each data entry (/path).
-   */
-  transformOut?: TransformData
-  /**
-   * Change handler for the whole data set.
-   * You can provide an async function to show an indicator on the current label during a field change.
-   */
-  onChange?: OnChange<Data>
-  /**
-   * Change handler for each value
-   */
-  onPathChange?: (
-    path: Path,
-    value: unknown
-  ) =>
-    | EventReturnWithStateObject
-    | void
-    | Promise<EventReturnWithStateObject | void>
-  /**
-   * Will emit on a form submit – if validation has passed.
-   * You can provide an async function to shows a submit indicator during submit. All form elements will be disabled during the submit.
-   */
-  onSubmit?: OnSubmit<Data>
-  /**
-   * Submit was requested, but data was invalid
-   */
-  onSubmitRequest?: () => void
-  /**
-   * Will be called when the onSubmit is finished and had not errors
-   */
-  onSubmitComplete?: (
-    data: Data,
+export type Props<Data extends JsonObject> =
+  IsolationProviderProps<Data> & {
     /**
-     * The result of the onSubmit function
+     * Unique ID to communicate with the hook Form.useData
      */
-    result: unknown
-  ) =>
-    | EventReturnWithStateObject
-    | void
-    | Promise<EventReturnWithStateObject | void>
-  /**
-   * Minimum time to display the submit indicator.
-   */
-  minimumAsyncBehaviorTime?: number
-  /**
-   * The maximum time to display the submit indicator before it changes back to normal. In case something went wrong during submission.
-   */
-  asyncSubmitTimeout?: number
-  /**
-   * Scroll to top on submit
-   */
-  scrollTopOnSubmit?: boolean
-  /**
-   * Key for caching the data in session storage
-   */
-  sessionStorageId?: string
-  /**
-   * Locale to use for all nested Eufemia components
-   */
-  locale?: ContextProps['locale']
-  /**
-   * Provide your own translations. Use the same format as defined in the translation files
-   */
-  translations?: ContextProps['translations']
-  /**
-   * Make all fields required
-   */
-  required?: boolean
-  /**
-   * The children of the context provider
-   */
-  children: React.ReactNode
-}
+    id?: SharedStateId
+    /**
+     * Unique ID to connect with a GlobalStatus
+     */
+    globalStatusId?: string
+    /**
+     * Source data, will be used instead of defaultData, and leading to updates if changed after mount
+     */
+    data?: Data
+    /**
+     * Default source data, only used if no other source is available, and not leading to updates if changed after mount
+     */
+    defaultData?: Data
+    /**
+     * Empty data, used to clear the data set.
+     */
+    emptyData?: unknown
+    /**
+     * JSON Schema to validate the data against.
+     */
+    schema?: AllJSONSchemaVersions<Data>
+    /**
+     * Custom Ajv instance, if you want to use your own
+     */
+    ajvInstance?: Ajv
+    /**
+     * Custom error messages for the whole data set
+     */
+    errorMessages?: GlobalErrorMessagesWithPaths
+    /**
+     * @deprecated Use the `filterData` in the second event parameter in the `onSubmit` or `onChange` events.
+     */
+    filterSubmitData?: FilterData
+    /**
+     * Transform the data context (internally as well) based on your criteria: `({ path, value, data, props, internal }) => 'new value'`. It will iterate on each data entry (/path).
+     */
+    transformIn?: TransformData
+    /**
+     * Mutate the data before it enters onSubmit or onChange based on your criteria: `({ path, value, data, props, internal }) => 'new value'`. It will iterate on each data entry (/path).
+     */
+    transformOut?: TransformData
+    /**
+     * Change handler for the whole data set.
+     * You can provide an async function to show an indicator on the current label during a field change.
+     */
+    onChange?: OnChange<Data>
+    /**
+     * Change handler for each value
+     */
+    onPathChange?: (
+      path: Path,
+      value: unknown
+    ) =>
+      | EventReturnWithStateObject
+      | void
+      | Promise<EventReturnWithStateObject | void>
+    /**
+     * Will emit on a form submit – if validation has passed.
+     * You can provide an async function to shows a submit indicator during submit. All form elements will be disabled during the submit.
+     */
+    onSubmit?: OnSubmit<Data>
+    /**
+     * Submit was requested, but data was invalid
+     */
+    onSubmitRequest?: () => void
+    /**
+     * Will be called when the onSubmit is finished and had not errors
+     */
+    onSubmitComplete?: (
+      data: Data,
+      /**
+       * The result of the onSubmit function
+       */
+      result: unknown
+    ) =>
+      | EventReturnWithStateObject
+      | void
+      | Promise<EventReturnWithStateObject | void>
+    /**
+     * Minimum time to display the submit indicator.
+     */
+    minimumAsyncBehaviorTime?: number
+    /**
+     * The maximum time to display the submit indicator before it changes back to normal. In case something went wrong during submission.
+     */
+    asyncSubmitTimeout?: number
+    /**
+     * Scroll to top on submit
+     */
+    scrollTopOnSubmit?: boolean
+    /**
+     * Key for caching the data in session storage
+     */
+    sessionStorageId?: string
+    /**
+     * Locale to use for all nested Eufemia components
+     */
+    locale?: ContextProps['locale']
+    /**
+     * Provide your own translations. Use the same format as defined in the translation files
+     */
+    translations?: ContextProps['translations']
+    /**
+     * Make all fields required
+     */
+    required?: boolean
+    /**
+     * The children of the context provider
+     */
+    children: React.ReactNode
+  }
 
 const isArrayJsonPointer = /^\/\d+(\/|$)/
 
@@ -618,10 +622,10 @@ export default function Provider<Data extends JsonObject>(
   // - Shared state
   const sharedData = useSharedState<Data>(id)
   const sharedAttachments = useSharedState<SharedAttachments<Data>>(
-    id + '-attachments'
+    createReferenceKey(id, 'attachments')
   )
   const sharedDataContext = useSharedState<ContextState>(
-    id + '-data-context'
+    createReferenceKey(id, 'data-context')
   )
 
   const setSharedData = sharedData.set
@@ -1152,11 +1156,11 @@ export default function Provider<Data extends JsonObject>(
     }
 
     const transformData = (data: Data, handler: TransformData) => {
-      return mutateDataHandler(data, handler) as TransformData
+      return mutateDataHandler(data, handler)
     }
 
     const formElement = formElementRef.current
-    const params: OnSubmitParams = {
+    const params: OnSubmitParams<Data> = {
       filterData,
       reduceToVisibleFields,
       transformData,
diff --git a/packages/dnb-eufemia/src/extensions/forms/DataContext/Provider/ProviderDocs.ts b/packages/dnb-eufemia/src/extensions/forms/DataContext/Provider/ProviderDocs.ts
index 564b61c28f7..dece5c43721 100644
--- a/packages/dnb-eufemia/src/extensions/forms/DataContext/Provider/ProviderDocs.ts
+++ b/packages/dnb-eufemia/src/extensions/forms/DataContext/Provider/ProviderDocs.ts
@@ -13,7 +13,7 @@ export const ProviderProperties: PropertiesTableProps = {
   },
   id: {
     doc: 'Unique id for connecting Form.Handler and helper tools such as Form.useData.',
-    type: 'string',
+    type: ['string', 'Function', 'Object', 'React.Context'],
     status: 'optional',
   },
   schema: {
diff --git a/packages/dnb-eufemia/src/extensions/forms/DataContext/Provider/__tests__/Provider.test.tsx b/packages/dnb-eufemia/src/extensions/forms/DataContext/Provider/__tests__/Provider.test.tsx
index dbb5210eb6b..cc4c06c3e9f 100644
--- a/packages/dnb-eufemia/src/extensions/forms/DataContext/Provider/__tests__/Provider.test.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/DataContext/Provider/__tests__/Provider.test.tsx
@@ -1824,7 +1824,9 @@ describe('DataContext.Provider', () => {
     })
 
     it('should show error on the field from the event return when complete', async () => {
-      const onChangeForm: OnChange = async ({ myField }) => {
+      const onChangeForm: OnChange<{ myField: string }> = async ({
+        myField,
+      }) => {
         if (myField === 'onChangeForm-error') {
           return Error('onChangeForm-error')
         }
@@ -1874,7 +1876,9 @@ describe('DataContext.Provider', () => {
     })
 
     it('should show status message on the field from the event return when complete', async () => {
-      const onChangeForm: OnChange = async ({ myField }) => {
+      const onChangeForm: OnChange<{ myField: string }> = async ({
+        myField,
+      }) => {
         if (myField === 'onChangeForm-info') {
           return { info: 'onChangeForm-info' }
         }
@@ -1926,7 +1930,9 @@ describe('DataContext.Provider', () => {
     })
 
     it('should show all status messages on the field from the event return when complete', async () => {
-      const onChangeForm: OnChange = async ({ myField }) => {
+      const onChangeForm: OnChange<{ myField: string }> = async ({
+        myField,
+      }) => {
         return {
           info: 'onChangeForm-info',
           error:
@@ -1989,7 +1995,9 @@ describe('DataContext.Provider', () => {
     })
 
     it('should fulfill async onChangeValidator before the form and field event', async () => {
-      const onChangeForm: OnChange = async ({ myField }) => {
+      const onChangeForm: OnChange<{ myField: string }> = async ({
+        myField,
+      }) => {
         return {
           info: 'onChangeForm-info',
           error:
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Date/Date.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Date/Date.tsx
index ff6d0a6c11c..1e70692572c 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/Date/Date.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/Date/Date.tsx
@@ -147,12 +147,18 @@ function DateComponent(props: Props) {
 
   const { value, startDate, endDate } = useMemo(() => {
     if (!range || !valueProp) {
-      return { value: valueProp, startDate: undefined, endDate: undefined }
+      return {
+        // Assign to null if falsy value, to properly clear input values
+        value: valueProp ?? null,
+        startDate: undefined,
+        endDate: undefined,
+      }
     }
 
     const [startDate, endDate] = valueProp
       .split('|')
-      .map((value) => (/(undefined|null)/.test(value) ? undefined : value))
+      // Assign to null if falsy value, to properly clear input values
+      .map((value) => (/(undefined|null)/.test(value) ? null : value))
 
     return {
       value: undefined,
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Provider/FieldProvider.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Provider/FieldProvider.tsx
index d9e5c14044b..1816ecfce7a 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/Provider/FieldProvider.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/Provider/FieldProvider.tsx
@@ -6,6 +6,7 @@ import SharedProvider from '../../../../shared/Provider'
 import { ContextProps } from '../../../../shared/Context'
 import useFieldProvider from './useFieldProvider'
 import { FieldProps, Path } from '../../types'
+import { JsonObject } from '../../utils'
 
 export type FieldProviderProps = FieldProps & {
   children: React.ReactNode
@@ -13,12 +14,12 @@ export type FieldProviderProps = FieldProps & {
   /**
    * Locale to use for all nested Eufemia components
    */
-  locale?: DataContextProps<unknown>['locale']
+  locale?: DataContextProps<JsonObject>['locale']
 
   /**
    * Provide your own translations. Use the same format as defined in the translation files
    */
-  translations?: DataContextProps<unknown>['translations']
+  translations?: DataContextProps<JsonObject>['translations']
 
   /** For internal use only */
   overwriteProps?: {
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Upload/Upload.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Upload/Upload.tsx
index b2ced390916..08dae3728d1 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/Upload/Upload.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/Upload/Upload.tsx
@@ -118,7 +118,11 @@ function UploadComponent(props: Props) {
   const { files: fileContext, setFiles } = useUpload(id)
 
   useEffect(() => {
-    setFiles(value)
+    // Files stored in session storage will not have a property (due to serialization).
+    const hasInvalidFiles = value?.some(({ file }) => !file?.name)
+    if (!hasInvalidFiles) {
+      setFiles(value)
+    }
   }, [setFiles, value])
 
   const handleChangeAsync = useCallback(
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Upload/__tests__/Upload.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Upload/__tests__/Upload.test.tsx
index fe53f07ca5b..97488363022 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/Upload/__tests__/Upload.test.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/Upload/__tests__/Upload.test.tsx
@@ -1253,4 +1253,57 @@ describe('Field.Upload', () => {
       )
     })
   })
+
+  it('should not set files from session storage if they are invalid', async () => {
+    const file = createMockFile('fileName.png', 100, 'image/png')
+
+    const { unmount } = render(
+      <Form.Handler sessionStorageId="session-storage-id">
+        <Field.Upload path="/myFiles" />
+      </Form.Handler>
+    )
+
+    const element = getRootElement()
+
+    await waitFor(() =>
+      fireEvent.drop(element, {
+        dataTransfer: {
+          files: [file],
+        },
+      })
+    )
+
+    expect(
+      document.querySelectorAll('.dnb-upload__file-cell').length
+    ).toBe(1)
+
+    let dataContext = null
+
+    // Don't rerender, but render again to make sure the files are not set
+    unmount()
+    render(
+      <Form.Handler sessionStorageId="session-storage-id">
+        <Field.Upload path="/myFiles" />
+        <DataContext.Consumer>
+          {(context) => {
+            dataContext = context
+            return null
+          }}
+        </DataContext.Consumer>
+      </Form.Handler>
+    )
+
+    expect(dataContext.internalDataRef.current.myFiles).toEqual([
+      {
+        exists: false,
+        file: {},
+        id: expect.any(String),
+      },
+    ])
+    const [title] = Array.from(document.querySelectorAll('p'))
+    expect(title).toHaveTextContent(nbShared.Upload.title)
+    expect(
+      document.querySelectorAll('.dnb-upload__file-cell').length
+    ).toBe(0)
+  })
 })
diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Card/__tests__/Card.screenshot.test.ts b/packages/dnb-eufemia/src/extensions/forms/Form/Card/__tests__/Card.screenshot.test.ts
index 56716295014..573e29690af 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Form/Card/__tests__/Card.screenshot.test.ts
+++ b/packages/dnb-eufemia/src/extensions/forms/Form/Card/__tests__/Card.screenshot.test.ts
@@ -18,6 +18,14 @@ describe('Form.Card', () => {
     })
     expect(screenshot).toMatchImageSnapshot()
   })
+
+  it('have to match when used in wizard', async () => {
+    const screenshot = await makeScreenshot({
+      url,
+      selector: '[data-visual-test="forms-card-in-wizard"]',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
 })
 
 describe.each(['ui', 'sbanken'])(
diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Card/__tests__/__image_snapshots__/formcard-have-to-match-when-used-in-wizard.snap.png b/packages/dnb-eufemia/src/extensions/forms/Form/Card/__tests__/__image_snapshots__/formcard-have-to-match-when-used-in-wizard.snap.png
new file mode 100644
index 00000000000..da932417d0f
Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/Form/Card/__tests__/__image_snapshots__/formcard-have-to-match-when-used-in-wizard.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Element/Element.tsx b/packages/dnb-eufemia/src/extensions/forms/Form/Element/Element.tsx
index d26e9914899..74344c0af3c 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Form/Element/Element.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Form/Element/Element.tsx
@@ -1,24 +1,40 @@
-import React, { useCallback, useContext } from 'react'
-import Context from '../../DataContext/Context'
-import Space from '../../../../components/space/Space'
+import React, { useCallback, useContext, useRef } from 'react'
 import classnames from 'classnames'
+import DataContext from '../../DataContext/Context'
+import Space from '../../../../components/space/Space'
+import useId from '../../../../shared/helpers/useId'
 import type { SpacingProps } from '../../../../shared/types'
+import { FormStatus } from '../../../../components'
+import { combineLabelledBy } from '../../../../shared/component-helper'
+
+export type Props = Omit<
+  React.HTMLProps<HTMLFormElement>,
+  'ref' | 'autoComplete'
+> &
+  SpacingProps
 
-export type Props = React.HTMLAttributes<HTMLFormElement> & SpacingProps
+export default function FormElement(props: Props) {
+  const id = useId()
+  const dataContext = useContext(DataContext)
+  const { submitState, restHandlerProps } = dataContext || {}
+  const states = Object.entries(submitState || {}).filter(
+    ([, value]) => value
+  )
 
-export default function FormElement({
-  children,
-  className = null,
-  onSubmit = null,
-  ...rest
-}: Props) {
-  const dataContext = useContext(Context)
+  const { children, className, onSubmit, ...restProps } = {
+    ...restHandlerProps,
+    ...props,
+  } as Props
 
   /**
    * Set to true,
    * this way we prevent "handleSubmit" to be called twice when the SubmitButton is pressed.
    */
-  dataContext.isInsideFormElement = true
+  const hasElementRef = useRef(false)
+  if (!dataContext.hasElementRef) {
+    dataContext.hasElementRef = hasElementRef
+  }
+  dataContext.hasElementRef.current = true
 
   const onSubmitHandler = useCallback(
     (event: React.SyntheticEvent<HTMLFormElement>) => {
@@ -43,9 +59,34 @@ export default function FormElement({
       element="form"
       className={classnames('dnb-forms-form', className)}
       onSubmit={onSubmitHandler}
-      {...rest}
+      aria-labelledby={
+        combineLabelledBy(
+          restProps,
+          states.map(([key]) => {
+            return `${id}-form-status-${key}`
+          })
+        ) || undefined
+      }
+      {...restProps}
     >
       {children}
+
+      {['error', 'warning', 'info'].map((key) => {
+        const value = submitState?.[key]
+        return (
+          <FormStatus
+            key={key}
+            state={key}
+            id={`${id}-form-status-${key}`}
+            className="dnb-forms-status"
+            show={Boolean(value)}
+            no_animation={false}
+            shellSpace={{ top: 'small' }}
+          >
+            {String(value?.['message'] || value || '')}
+          </FormStatus>
+        )
+      })}
     </Space>
   )
 }
diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Element/__tests__/Element.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Form/Element/__tests__/Element.test.tsx
index 9d87326d7c1..ab76f72b219 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Form/Element/__tests__/Element.test.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Form/Element/__tests__/Element.test.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 import React from 'react'
 import { fireEvent, render } from '@testing-library/react'
 import { Form, DataContext, Field } from '../../..'
@@ -55,7 +56,11 @@ describe('Form.Element', () => {
       { foo: 'Value' },
       expect.anything()
     )
+
     expect(onSubmitElement).toHaveBeenCalledTimes(1)
+    expect(onSubmitElement).toHaveBeenCalledWith(
+      expect.objectContaining({ type: 'submit', target: inputElement })
+    )
 
     fireEvent.click(buttonElement)
 
@@ -64,8 +69,8 @@ describe('Form.Element', () => {
       { foo: 'Value' },
       expect.anything()
     )
-    expect(onSubmitElement).toHaveBeenCalledTimes(2)
 
+    expect(onSubmitElement).toHaveBeenCalledTimes(2)
     expect(onSubmitElement).toHaveBeenCalledWith(
       expect.objectContaining({ type: 'submit', target: inputElement })
     )
@@ -151,4 +156,17 @@ describe('Form.Element', () => {
     expect(attributes).toEqual(['class', 'aria-label'])
     expect(formElement.getAttribute('aria-label')).toBe('Aria Label')
   })
+
+  it('should ensure that only a string can be set as the id', () => {
+    const myId = () => null
+    render(
+      // @ts-expect-error
+      <Form.Element id={myId}>
+        <Form.SubmitButton>Submit</Form.SubmitButton>
+      </Form.Element>
+    )
+
+    const formElement = document.querySelector('form')
+    expect(formElement).not.toHaveAttribute('id')
+  })
 })
diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Handler/Handler.tsx b/packages/dnb-eufemia/src/extensions/forms/Form/Handler/Handler.tsx
index f9146ff3235..a48ad88eda1 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Form/Handler/Handler.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Form/Handler/Handler.tsx
@@ -1,125 +1,92 @@
-import React, { useContext } from 'react'
+import React, { useEffect, useRef } from 'react'
 import { JsonObject } from '../../utils/json-pointer'
+import { warn } from '../../../../shared/helpers'
 import DataContextProvider, {
   Props as ProviderProps,
 } from '../../DataContext/Provider'
-import DataContext from '../../DataContext/Context'
-import FormElement from '../Element'
-import type { ElementAllProps } from '../../../../elements/Element'
-import FormStatus from '../../../../components/FormStatus'
-import useId from '../../../../shared/helpers/useId'
-import { combineLabelledBy } from '../../../../shared/component-helper'
+import FormElement, { Props as FormElementProps } from '../Element'
+import { ContextState } from '../../DataContext'
 
-export type Props = Omit<
-  ElementAllProps,
-  'data' | 'as' | 'autoComplete'
-> & {
+export type Props = FormElementProps & {
   /**
    * Will enable autoComplete for all nested Field.String fields
    */
   autoComplete?: boolean
+
+  /**
+   * Will decouple the form element from rendering
+   */
+  decoupleForm?: boolean
 }
 
-export default function FormHandler<Data extends JsonObject>({
-  children,
-  defaultData,
-  data,
-  schema,
-  ajvInstance,
-  errorMessages,
-  globalStatusId,
-  filterSubmitData,
-  transformIn,
-  transformOut,
-  onChange,
-  onPathChange,
-  onSubmit,
-  onSubmitRequest,
-  onSubmitComplete,
-  onClear,
-  minimumAsyncBehaviorTime,
-  asyncSubmitTimeout,
-  scrollTopOnSubmit,
-  sessionStorageId,
-  autoComplete,
-  locale,
-  translations,
-  disabled,
-  required,
-  ...rest
-}: ProviderProps<Data> & Omit<Props, keyof ProviderProps<Data>>) {
+type AllowedProviderContextProps = ProviderProps<JsonObject> &
+  Pick<Props, 'decoupleForm' | 'autoComplete' | 'disabled'> &
+  Pick<ContextState, 'restHandlerProps' | 'hasElementRef'>
+
+const allowedProviderContextProps: Array<
+  keyof AllowedProviderContextProps
+> = [
+  'id',
+  'defaultData',
+  'data',
+  'schema',
+  'ajvInstance',
+  'errorMessages',
+  'globalStatusId',
+  'filterSubmitData',
+  'transformIn',
+  'transformOut',
+  'onChange',
+  'onPathChange',
+  'onSubmit',
+  'onSubmitRequest',
+  'onSubmitComplete',
+  'onClear',
+  'minimumAsyncBehaviorTime',
+  'asyncSubmitTimeout',
+  'scrollTopOnSubmit',
+  'sessionStorageId',
+  'locale',
+  'translations',
+  'autoComplete',
+  'disabled',
+  'required',
+  'decoupleForm',
+  'restHandlerProps',
+]
+
+export default function FormHandler<Data extends JsonObject>(
+  props: ProviderProps<Data> & Omit<Props, keyof ProviderProps<Data>>
+) {
+  const { decoupleForm, children } = props
+
+  const hasElementRef = useRef(false)
+  useEffect(() => {
+    if (decoupleForm && !hasElementRef.current) {
+      warn('Please include a Form.Element when using decoupleForm!')
+    }
+  }, [decoupleForm])
+
   const providerProps = {
-    id: rest.id,
-    defaultData,
-    data,
-    schema,
-    ajvInstance,
-    errorMessages,
-    globalStatusId,
-    filterSubmitData,
-    transformIn,
-    transformOut,
-    onChange,
-    onPathChange,
-    onSubmit,
-    onSubmitRequest,
-    onSubmitComplete,
-    onClear,
-    minimumAsyncBehaviorTime,
-    asyncSubmitTimeout,
-    scrollTopOnSubmit,
-    sessionStorageId,
-    autoComplete,
-    locale,
-    translations,
-    disabled,
-    required,
+    hasElementRef,
+    restHandlerProps: {},
+  } as AllowedProviderContextProps
+
+  for (const key in props) {
+    if (
+      allowedProviderContextProps.includes(
+        key as keyof AllowedProviderContextProps
+      )
+    ) {
+      providerProps[key] = props[key]
+    } else if (key !== 'children') {
+      providerProps.restHandlerProps[key] = props[key]
+    }
   }
 
   return (
     <DataContextProvider {...providerProps}>
-      <FormElementWithState {...rest}>{children}</FormElementWithState>
+      {decoupleForm ? children : <FormElement>{children}</FormElement>}
     </DataContextProvider>
   )
 }
-
-function FormElementWithState({ children, ...rest }) {
-  const id = useId()
-  const { submitState } = useContext(DataContext) || {}
-  const states = Object.entries(submitState || {}).filter(
-    ([, value]) => value
-  )
-
-  return (
-    <FormElement
-      {...rest}
-      aria-labelledby={
-        combineLabelledBy(
-          rest,
-          states.map(([key]) => {
-            return `${id}-form-status-${key}`
-          })
-        ) || undefined
-      }
-    >
-      {children}
-
-      {['error', 'warning', 'info'].map((key) => {
-        const value = submitState?.[key]
-        return (
-          <FormStatus
-            key={key}
-            state={key}
-            id={`${id}-form-status-${key}`}
-            className="dnb-forms-status"
-            show={Boolean(value)}
-            no_animation={false}
-            shellSpace={{ top: 'small' }}
-          >
-            {String(value?.['message'] || value || '')}
-          </FormStatus>
-        )
-      })}
-    </FormElement>
-  )
-}
diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Handler/__tests__/Handler.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Form/Handler/__tests__/Handler.test.tsx
index e0cce0782fa..890bd94fbf9 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Form/Handler/__tests__/Handler.test.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Form/Handler/__tests__/Handler.test.tsx
@@ -19,6 +19,52 @@ const nb = nbNO['nb-NO']
 const en = enGB['en-GB']
 
 describe('Form.Handler', () => {
+  it('should support types given to the Form.Handler', () => {
+    let value = null
+
+    type MyDataContext = {
+      firstName?: string
+    }
+
+    render(
+      <Form.Handler<MyDataContext>
+        onSubmit={(data) => {
+          value = data.firstName
+        }}
+      >
+        <Field.String path="/firstName" value="Value" />
+      </Form.Handler>
+    )
+
+    fireEvent.submit(document.querySelector('form'))
+    expect(value).toBe('Value')
+  })
+
+  it('should support types given to the data prop', () => {
+    let value = null
+
+    type MyDataContext = {
+      firstName?: string
+    }
+    const data: MyDataContext = {
+      firstName: 'Value',
+    }
+
+    render(
+      <Form.Handler
+        data={data}
+        onSubmit={(data) => {
+          value = data.firstName
+        }}
+      >
+        <Field.String path="/firstName" />
+      </Form.Handler>
+    )
+
+    fireEvent.submit(document.querySelector('form'))
+    expect(value).toBe('Value')
+  })
+
   it('should call "onSubmit"', () => {
     const onSubmit: OnSubmit = jest.fn()
 
@@ -1160,4 +1206,84 @@ describe('Form.Handler', () => {
       expect(document.body).toHaveTextContent('content')
     })
   })
+
+  describe('decoupleForm', () => {
+    it('should contain one form element', () => {
+      render(
+        <Form.Handler decoupleForm>
+          <Form.Element>content</Form.Element>
+        </Form.Handler>
+      )
+
+      const formElements = document.querySelectorAll('form')
+      expect(formElements).toHaveLength(1)
+    })
+
+    it('should call onSubmit when form is submitted', () => {
+      const onSubmit = jest.fn()
+
+      render(
+        <Form.Handler decoupleForm onSubmit={onSubmit}>
+          <Form.Element>content</Form.Element>
+        </Form.Handler>
+      )
+
+      fireEvent.submit(document.querySelector('form'))
+
+      expect(onSubmit).toHaveBeenCalledTimes(1)
+    })
+
+    it('should spread rest props to form element', () => {
+      render(
+        <Form.Handler decoupleForm aria-label="Aria Label">
+          <Form.Element>content</Form.Element>
+        </Form.Handler>
+      )
+
+      expect(document.querySelector('form')).toHaveAttribute(
+        'aria-label',
+        'Aria Label'
+      )
+    })
+
+    it('should overwrite rest props from handler', () => {
+      render(
+        <Form.Handler decoupleForm aria-label="Aria Label">
+          <Form.Element aria-label="Overwrite">content</Form.Element>
+        </Form.Handler>
+      )
+
+      expect(document.querySelector('form')).toHaveAttribute(
+        'aria-label',
+        'Overwrite'
+      )
+    })
+
+    it('should render form element inside wrapper', () => {
+      render(
+        <Form.Handler decoupleForm>
+          <div className="wrapper">
+            <Form.Element>content</Form.Element>
+          </div>
+        </Form.Handler>
+      )
+
+      const formElements = document.querySelectorAll('.wrapper > form')
+      expect(formElements).toHaveLength(1)
+    })
+
+    it('should warn when no form element is found', () => {
+      const log = jest.spyOn(global.console, 'log').mockImplementation()
+
+      render(<Form.Handler decoupleForm>content</Form.Handler>)
+
+      expect(log).toHaveBeenCalledTimes(1)
+      expect(log).toHaveBeenCalledWith(
+        expect.any(String),
+        'Please include a Form.Element when using decoupleForm!'
+      )
+
+      log.mockRestore()
+    })
+  })
 })
diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Isolation/Isolation.tsx b/packages/dnb-eufemia/src/extensions/forms/Form/Isolation/Isolation.tsx
index c236a2daf56..860ce99a315 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Form/Isolation/Isolation.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Form/Isolation/Isolation.tsx
@@ -30,7 +30,7 @@ import type { OnCommit, Path } from '../../types'
  */
 import structuredClone from '@ungap/structured-clone'
 
-export type IsolationProviderProps<Data> = {
+export type IsolationProviderProps<Data extends JsonObject> = {
   /**
    * Form.Isolation: Will be called when the isolated context is committed.
    */
@@ -44,10 +44,7 @@ export type IsolationProviderProps<Data> = {
    * It will receive the data from the isolated context and the data from the outer context.
    * You can use this to transform the data before it is committed.
    */
-  transformOnCommit?: (
-    isolatedData: JsonObject,
-    handlerData: JsonObject
-  ) => unknown
+  transformOnCommit?: (isolatedData: Data, handlerData: Data) => JsonObject
   /**
    * Prevent the form from being submitted when there are fields with errors inside the Form.Isolation.
    */
@@ -62,7 +59,7 @@ export type IsolationProviderProps<Data> = {
   isolate?: boolean
 }
 
-export type IsolationProps<Data> = Omit<
+export type IsolationProps<Data extends JsonObject> = Omit<
   ProviderProps<Data>,
   | 'onSubmit'
   | 'onSubmitRequest'
diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Isolation/__tests__/Isolation.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Form/Isolation/__tests__/Isolation.test.tsx
index 1977b8a86e6..d652a37087c 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Form/Isolation/__tests__/Isolation.test.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Form/Isolation/__tests__/Isolation.test.tsx
@@ -1367,7 +1367,10 @@ describe('Form.Isolation', () => {
         data={{ existing: 'data', persons: [{ name: 'John' }] }}
         onChange={onChange}
       >
-        <Form.Isolation
+        <Form.Isolation<{
+          persons: Array<{ name: string }>
+          newPerson: Array<{ name: string }>
+        }>
           transformOnCommit={(isolatedData, handlerData) => {
             return {
               ...handlerData,
diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Isolation/stories/Isolation.stories.tsx b/packages/dnb-eufemia/src/extensions/forms/Form/Isolation/stories/Isolation.stories.tsx
index f3b998dda5f..beb81a8f55b 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Form/Isolation/stories/Isolation.stories.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Form/Isolation/stories/Isolation.stories.tsx
@@ -138,7 +138,10 @@ export const TransformOnCommit = () => {
           <Flex.Stack>
             <Form.SubHeading>Ny hovedkontaktperson</Form.SubHeading>
 
-            <Form.Isolation
+            <Form.Isolation<{
+              newPerson: { title: string }
+              contactPersons: Array<{ title: string; value: string }>
+            }>
               transformOnCommit={(isolatedData, handlerData) => {
                 return {
                   ...handlerData,
diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Section/EditContainer/EditContainerDocs.ts b/packages/dnb-eufemia/src/extensions/forms/Form/Section/EditContainer/EditContainerDocs.ts
index bb5c00b69d6..b561bae98e9 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Form/Section/EditContainer/EditContainerDocs.ts
+++ b/packages/dnb-eufemia/src/extensions/forms/Form/Section/EditContainer/EditContainerDocs.ts
@@ -7,7 +7,7 @@ export const EditContainerProperties: PropertiesTableProps = {
     status: 'optional',
   },
   variant: {
-    doc: 'Defines the variant of the container. Can be `outline` or `basic`. Defaults to `outline`.',
+    doc: 'Defines the variant of the container. Can be `outline`, `filled` or `basic`. Defaults to `outline`.',
     type: 'string',
     status: 'optional',
   },
diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Section/EditContainer/__tests__/EditAndViewContainer.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Form/Section/EditContainer/__tests__/EditAndViewContainer.test.tsx
index ff239574eb0..16c689f6f39 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Form/Section/EditContainer/__tests__/EditAndViewContainer.test.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Form/Section/EditContainer/__tests__/EditAndViewContainer.test.tsx
@@ -559,7 +559,7 @@ describe('EditContainer and ViewContainer', () => {
     )
   })
 
-  it('should set variant to "basic" when variant is set to "basic"', async () => {
+  it('should set correct class for variant "basic"', () => {
     render(
       <Form.Section>
         <Form.Section.ViewContainer variant="basic">
@@ -579,6 +579,30 @@ describe('EditContainer and ViewContainer', () => {
     expect(editBlock).toHaveClass('dnb-forms-section-block--variant-basic')
   })
 
+  it('should set correct class for variant "filled"', () => {
+    render(
+      <Form.Section>
+        <Form.Section.ViewContainer variant="filled">
+          View Content
+        </Form.Section.ViewContainer>
+
+        <Form.Section.EditContainer variant="filled">
+          Edit Content
+        </Form.Section.EditContainer>
+      </Form.Section>
+    )
+
+    const [viewBlock, editBlock] = Array.from(
+      document.querySelectorAll('.dnb-forms-section-block')
+    )
+    expect(viewBlock).toHaveClass(
+      'dnb-forms-section-block--variant-filled'
+    )
+    expect(editBlock).toHaveClass(
+      'dnb-forms-section-block--variant-filled'
+    )
+  })
+
   it('should validate on done button click', async () => {
     render(
       <Form.Section>
diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Section/Section.tsx b/packages/dnb-eufemia/src/extensions/forms/Form/Section/Section.tsx
index ae593c8371d..71fd440da74 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Form/Section/Section.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Form/Section/Section.tsx
@@ -19,7 +19,10 @@ export type OverwritePropsDefaults = {
     | (FieldProps & SharedFieldBlockProps)
     | OverwritePropsDefaults
 }
-export type SectionProps<overwriteProps = OverwritePropsDefaults> = {
+export type SectionProps<
+  overwriteProps = OverwritePropsDefaults,
+  Data extends JsonObject = JsonObject,
+> = {
   /**
    * Path to the section.
    * When defined, fields inside the section will get this path as a prefix of their own path.
@@ -55,15 +58,18 @@ export type SectionProps<overwriteProps = OverwritePropsDefaults> = {
    */
   errorPrioritization?: SectionContextState['errorPrioritization']
 } & Pick<
-  DataContextProps<JsonObject>,
+  DataContextProps<Data>,
   'data' | 'defaultData' | 'onChange' | 'translations'
 >
 
-export type LocalProps = SectionProps & {
-  children: React.ReactNode
-}
+export type LocalProps<overwriteProps = OverwritePropsDefaults> =
+  SectionProps<overwriteProps> & {
+    children: React.ReactNode
+  }
 
-function SectionComponent(props: LocalProps) {
+function SectionComponent<overwriteProps = OverwritePropsDefaults>(
+  props: LocalProps<overwriteProps>
+) {
   const {
     path,
     overwriteProps,
@@ -108,12 +114,14 @@ function SectionComponent(props: LocalProps) {
     )
   }
 
+  const sectionProps = props as SectionProps
+
   return (
     <SectionContext.Provider
       value={{
         path: identifier,
         errorPrioritization,
-        props,
+        props: sectionProps,
       }}
     >
       <SectionContainerProvider
diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Section/ViewContainer/ViewContainerDocs.ts b/packages/dnb-eufemia/src/extensions/forms/Form/Section/ViewContainer/ViewContainerDocs.ts
index 94d7f6b53ba..9aed0813273 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Form/Section/ViewContainer/ViewContainerDocs.ts
+++ b/packages/dnb-eufemia/src/extensions/forms/Form/Section/ViewContainer/ViewContainerDocs.ts
@@ -7,7 +7,7 @@ export const ViewContainerProperties: PropertiesTableProps = {
     status: 'optional',
   },
   variant: {
-    doc: 'Defines the variant of the container. Can be `outline` or `basic`. Defaults to `outline`.',
+    doc: 'Defines the variant of the container. Can be `outline`, `filled` or `basic`. Defaults to `outline`.',
     type: 'string',
     status: 'optional',
   },
diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Section/containers/SectionContainer.tsx b/packages/dnb-eufemia/src/extensions/forms/Form/Section/containers/SectionContainer.tsx
index b2c52927db5..5c05ab3fabf 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Form/Section/containers/SectionContainer.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Form/Section/containers/SectionContainer.tsx
@@ -19,7 +19,7 @@ export type SectionContainerProps = {
    * Defines the variant of the ViewContainer or EditContainer. Can be `outline`.
    * Defaults to `outline`.
    */
-  variant?: 'outline' | 'basic'
+  variant?: 'outline' | 'basic' | 'filled'
 }
 
 export type Props = {
@@ -126,6 +126,7 @@ function SectionContainer(props: Props & FlexContainerProps) {
       <Card
         stack
         innerSpace={variant === 'basic' ? false : 'small'}
+        filled={variant === 'filled'}
         className="dnb-forms-section-block__inner"
         {...restProps}
         aria-label={ariaLabel}
diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Section/style/dnb-form-section.scss b/packages/dnb-eufemia/src/extensions/forms/Form/Section/style/dnb-form-section.scss
index 399486c581b..88f1a5462bc 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Form/Section/style/dnb-form-section.scss
+++ b/packages/dnb-eufemia/src/extensions/forms/Form/Section/style/dnb-form-section.scss
@@ -11,13 +11,6 @@
       flex-direction: column;
     }
 
-    &--variant-basic {
-      --border-color: transparent;
-      .dnb-card {
-        --card-outline-color: transparent;
-      }
-    }
-
     &__inner {
       flex: 1;
       outline: none; // for JavaSCript focus
@@ -43,6 +36,19 @@
       }
     }
 
+    &--variant-basic {
+      --border-color: transparent;
+      .dnb-card,
+      .dnb-card & .dnb-card {
+        --card-outline-color: transparent;
+      }
+    }
+
+    &--variant-filled &__inner {
+      --space: var(--spacing-small);
+      background-color: var(--color-lavender);
+    }
+
     &--no-animation &__inner {
       transform: translateY(0);
     }
diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Section/style/themes/dnb-section-theme-sbanken.scss b/packages/dnb-eufemia/src/extensions/forms/Form/Section/style/themes/dnb-section-theme-sbanken.scss
new file mode 100644
index 00000000000..cb6e6f2f8ce
--- /dev/null
+++ b/packages/dnb-eufemia/src/extensions/forms/Form/Section/style/themes/dnb-section-theme-sbanken.scss
@@ -0,0 +1,7 @@
+.dnb-forms-section {
+  &-block {
+    &--variant-filled &__inner {
+      --space: var(--spacing-small);
+    }
+  }
+}
diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Section/style/themes/dnb-section-theme-ui.scss b/packages/dnb-eufemia/src/extensions/forms/Form/Section/style/themes/dnb-section-theme-ui.scss
new file mode 100644
index 00000000000..567160289b3
--- /dev/null
+++ b/packages/dnb-eufemia/src/extensions/forms/Form/Section/style/themes/dnb-section-theme-ui.scss
@@ -0,0 +1,8 @@
+.dnb-forms-section {
+  &-block {
+    &--variant-filled &__inner {
+      --space: var(--spacing-small);
+      background-color: var(--color-lavender);
+    }
+  }
+}
diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Section/style/themes/ui.js b/packages/dnb-eufemia/src/extensions/forms/Form/Section/style/themes/ui.js
new file mode 100644
index 00000000000..7f7b31db976
--- /dev/null
+++ b/packages/dnb-eufemia/src/extensions/forms/Form/Section/style/themes/ui.js
@@ -0,0 +1,6 @@
+/**
+ * Imports the default theme
+ *
+ */
+
+import './dnb-section-theme-ui.scss'
diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/SubmitButton/SubmitButton.tsx b/packages/dnb-eufemia/src/extensions/forms/Form/SubmitButton/SubmitButton.tsx
index 4c877bf88f1..91ece835449 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Form/SubmitButton/SubmitButton.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Form/SubmitButton/SubmitButton.tsx
@@ -32,16 +32,16 @@ function SubmitButton(props: Props) {
   const {
     formState,
     handleSubmit,
-    isInsideFormElement,
+    hasElementRef,
     props: dataContextProps,
   } = useContext(DataContext) || {}
   const { isolate } = dataContextProps || {}
 
   const onClickHandler = useCallback(() => {
-    if (!isInsideFormElement) {
+    if (!hasElementRef?.current) {
       handleSubmit?.()
     }
-  }, [isInsideFormElement, handleSubmit])
+  }, [hasElementRef, handleSubmit])
 
   return (
     <Button
diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/data-context/__tests__/useData.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Form/data-context/__tests__/useData.test.tsx
index 2987e3c3719..65bf6dfcf09 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Form/data-context/__tests__/useData.test.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Form/data-context/__tests__/useData.test.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { createContext } from 'react'
 import { renderHook, act, render, fireEvent } from '@testing-library/react'
 import { makeUniqueId } from '../../../../../shared/component-helper'
 import { Field, Form, Wizard } from '../../..'
@@ -124,6 +124,89 @@ describe('Form.useData', () => {
     expect(result.current.data).toEqual({ key: 'changed value' })
   })
 
+  it('should get data with a string as the id', () => {
+    const { result } = renderHook(() => useData(identifier), {
+      wrapper: ({ children }) => (
+        <>
+          <Provider id={identifier}>
+            <Field.String path="/foo" defaultValue="foo" />
+            <Field.String path="/bar" defaultValue="bar" />
+          </Provider>
+
+          {children}
+        </>
+      ),
+    })
+
+    expect(result.current.data).toEqual({
+      foo: 'foo',
+      bar: 'bar',
+    })
+  })
+
+  it('should get data with a function reference as the id', () => {
+    const myId = () => null
+    const { result } = renderHook(() => useData(myId), {
+      wrapper: ({ children }) => (
+        <>
+          <Provider id={myId}>
+            <Field.String path="/foo" defaultValue="foo" />
+            <Field.String path="/bar" defaultValue="bar" />
+          </Provider>
+
+          {children}
+        </>
+      ),
+    })
+
+    expect(result.current.data).toEqual({
+      foo: 'foo',
+      bar: 'bar',
+    })
+  })
+
+  it('should get data with an object reference as the id', () => {
+    const myId = {}
+    const { result } = renderHook(() => useData(myId), {
+      wrapper: ({ children }) => (
+        <>
+          <Provider id={myId}>
+            <Field.String path="/foo" defaultValue="foo" />
+            <Field.String path="/bar" defaultValue="bar" />
+          </Provider>
+
+          {children}
+        </>
+      ),
+    })
+
+    expect(result.current.data).toEqual({
+      foo: 'foo',
+      bar: 'bar',
+    })
+  })
+
+  it('should get data with a React Context as the id', () => {
+    const myId = createContext(null)
+    const { result } = renderHook(() => useData(myId), {
+      wrapper: ({ children }) => (
+        <>
+          <Provider id={myId}>
+            <Field.String path="/foo" defaultValue="foo" />
+            <Field.String path="/bar" defaultValue="bar" />
+          </Provider>
+
+          {children}
+        </>
+      ),
+    })
+
+    expect(result.current.data).toEqual({
+      foo: 'foo',
+      bar: 'bar',
+    })
+  })
+
   describe('remove', () => {
     it('should remove the data', () => {
       const { result } = renderHook(() => useData(), {
@@ -177,6 +260,35 @@ describe('Form.useData', () => {
       })
       expect(result.current.data).not.toHaveProperty('foo')
     })
+
+    it('should remove data with handler id', () => {
+      const { result } = renderHook(() => useData(identifier), {
+        wrapper: ({ children }) => (
+          <>
+            <Provider id={identifier}>
+              <Field.String path="/foo" defaultValue="foo" />
+              <Field.String path="/bar" defaultValue="bar" />
+            </Provider>
+
+            {children}
+          </>
+        ),
+      })
+
+      expect(result.current.data).toEqual({
+        foo: 'foo',
+        bar: 'bar',
+      })
+
+      act(() => {
+        result.current.remove('/foo')
+      })
+
+      expect(result.current.data).toEqual({
+        bar: 'bar',
+      })
+      expect(result.current.data).not.toHaveProperty('foo')
+    })
   })
 
   it('"update" should only re-render when value has changed', () => {
@@ -225,40 +337,71 @@ describe('Form.useData', () => {
     expect(result.current.data).toEqual({ key: 'changed value' })
   })
 
-  it('should sync two hooks by using "update"', () => {
-    const props = { key: 'value' }
+  describe('update', () => {
+    it('should sync two hooks by using "update"', () => {
+      const props = { key: 'value' }
 
-    const { result: A } = renderHook(() => useData(identifier))
-    const { result: B } = renderHook(() => useData(identifier, props))
+      const { result: A } = renderHook(() => useData(identifier))
+      const { result: B } = renderHook(() => useData(identifier, props))
 
-    expect(A.current.data).toEqual({ key: 'value' })
-    expect(B.current.data).toEqual({ key: 'value' })
+      expect(A.current.data).toEqual({ key: 'value' })
+      expect(B.current.data).toEqual({ key: 'value' })
 
-    act(() => {
-      B.current.update('/key', (value) => {
-        return 'changed ' + value
+      act(() => {
+        B.current.update('/key', (value) => {
+          return 'changed ' + value
+        })
       })
+
+      expect(A.current.data).toEqual({ key: 'changed value' })
+      expect(B.current.data).toEqual({ key: 'changed value' })
     })
 
-    expect(A.current.data).toEqual({ key: 'changed value' })
-    expect(B.current.data).toEqual({ key: 'changed value' })
-  })
+    it('should support update without a function', () => {
+      const props = { key: 'value' }
 
-  it('should support update without a function', () => {
-    const props = { key: 'value' }
+      const { result: A } = renderHook(() => useData(identifier))
+      const { result: B } = renderHook(() => useData(identifier, props))
 
-    const { result: A } = renderHook(() => useData(identifier))
-    const { result: B } = renderHook(() => useData(identifier, props))
+      expect(A.current.data).toEqual({ key: 'value' })
+      expect(B.current.data).toEqual({ key: 'value' })
 
-    expect(A.current.data).toEqual({ key: 'value' })
-    expect(B.current.data).toEqual({ key: 'value' })
+      act(() => {
+        B.current.update('/key', 'new value')
+      })
 
-    act(() => {
-      B.current.update('/key', 'new value')
+      expect(A.current.data).toEqual({ key: 'new value' })
+      expect(B.current.data).toEqual({ key: 'new value' })
     })
 
-    expect(A.current.data).toEqual({ key: 'new value' })
-    expect(B.current.data).toEqual({ key: 'new value' })
+    it('should update data with handler id', () => {
+      const { result } = renderHook(() => useData(identifier), {
+        wrapper: ({ children }) => (
+          <>
+            <Provider id={identifier}>
+              <Field.String path="/foo" defaultValue="foo" />
+              <Field.String path="/bar" defaultValue="bar" />
+            </Provider>
+
+            {children}
+          </>
+        ),
+      })
+
+      expect(result.current.data).toEqual({
+        foo: 'foo',
+        bar: 'bar',
+      })
+
+      act(() => {
+        result.current.update('/foo', 'updated')
+      })
+
+      expect(result.current.data).toEqual({
+        foo: 'updated',
+        bar: 'bar',
+      })
+    })
   })
 
   it('should rerender when shared state calls "set"', () => {
diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/data-context/clearData.ts b/packages/dnb-eufemia/src/extensions/forms/Form/data-context/clearData.ts
index 9e79c2047b8..4fd934c85e5 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Form/data-context/clearData.ts
+++ b/packages/dnb-eufemia/src/extensions/forms/Form/data-context/clearData.ts
@@ -1,9 +1,13 @@
-import { createSharedState } from '../../../../shared/helpers/useSharedState'
+import {
+  SharedStateId,
+  createReferenceKey,
+  createSharedState,
+} from '../../../../shared/helpers/useSharedState'
 import { SharedAttachments } from '../../DataContext/Provider'
 
-export default function clearData(id: string) {
+export default function clearData(id: SharedStateId) {
   const sharedAttachments = createSharedState<SharedAttachments<unknown>>(
-    id + '-attachments'
+    createReferenceKey(id, 'attachments')
   )
   sharedAttachments.data.clearData?.()
 }
diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/data-context/getData.tsx b/packages/dnb-eufemia/src/extensions/forms/Form/data-context/getData.tsx
index 3265f595264..f1bca9147b1 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Form/data-context/getData.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Form/data-context/getData.tsx
@@ -1,6 +1,7 @@
 import pointer from '../../utils/json-pointer'
 import {
   SharedStateId,
+  createReferenceKey,
   createSharedState,
 } from '../../../../shared/helpers/useSharedState'
 import { SharedAttachments } from '../../DataContext/Provider'
@@ -23,7 +24,7 @@ export default function getData<Data>(
 ): SetDataReturn<Data> {
   const sharedState = createSharedState(id)
   const sharedAttachments = createSharedState<SharedAttachments<Data>>(
-    id + '-attachments'
+    createReferenceKey(id, 'attachments')
   )
 
   const data = sharedState.get() as Data
diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/data-context/useData.tsx b/packages/dnb-eufemia/src/extensions/forms/Form/data-context/useData.tsx
index ba8ed93217c..8e386c358b5 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Form/data-context/useData.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Form/data-context/useData.tsx
@@ -8,6 +8,7 @@ import {
 import pointer, { JsonObject } from '../../utils/json-pointer'
 import {
   SharedStateId,
+  createReferenceKey,
   useSharedState,
 } from '../../../../shared/helpers/useSharedState'
 import useMountEffect from '../../../../shared/helpers/useMountEffect'
@@ -89,7 +90,7 @@ export default function useData<Data = JsonObject>(
   )
 
   sharedAttachmentsRef.current = useSharedState<SharedAttachments<Data>>(
-    id + '-attachments',
+    createReferenceKey(id, 'attachments'),
     { rerenderUseDataHook: forceUpdate }
   )
 
diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/data-context/useValidation.tsx b/packages/dnb-eufemia/src/extensions/forms/Form/data-context/useValidation.tsx
index 6b75302953a..e6b00106e04 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Form/data-context/useValidation.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Form/data-context/useValidation.tsx
@@ -1,6 +1,7 @@
 import { useCallback, useContext, useMemo } from 'react'
 import {
   SharedStateId,
+  createReferenceKey,
   useSharedState,
 } from '../../../../shared/helpers/useSharedState'
 import DataContext, { ContextState } from '../../DataContext/Context'
@@ -19,7 +20,7 @@ export default function useValidation(
 ): UseDataReturn {
   const { data } = useSharedState<
     UseDataReturn & SharedAttachments<unknown>
-  >(id + '-attachments')
+  >(createReferenceKey(id, 'attachments'))
 
   const fallback = useCallback(() => false, [])
 
@@ -62,7 +63,7 @@ type UseConnectionsSharedState = {
 
 function useConnections(id: SharedStateId = undefined) {
   const { get } = useSharedState<UseConnectionsSharedState>(
-    id + '-attachments'
+    createReferenceKey(id, 'attachments')
   )
 
   const dataContext = useContext(DataContext)
diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/ArrayItemArea.tsx b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/ArrayItemArea.tsx
index 35c9453fca1..7e71a21b1d3 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/ArrayItemArea.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/ArrayItemArea.tsx
@@ -15,10 +15,11 @@ const useLayoutEffect =
 
 export type ArrayItemAreaProps = {
   /**
-   * Defines the variant of the ViewContainer, EditContainer or PushContainer. Can be `outline` or `basic`.
+   * Defines the variant of the ViewContainer, EditContainer or PushContainer. Can be `outline`, `filled` or `basic`.
    * Defaults to `outline`.
    */
-  variant?: 'outline' | 'basic'
+  variant?: 'outline' | 'basic' | 'filled'
+  toolbarVariant?: 'minimumOneItem' | 'custom'
 }
 
 export type Props = {
@@ -40,6 +41,7 @@ function ArrayItemArea(props: Props & FlexContainerProps) {
     children,
     openDelay = 100,
     variant = 'outline',
+    toolbarVariant,
     ...restProps
   } = props
 
@@ -163,12 +165,14 @@ function ArrayItemArea(props: Props & FlexContainerProps) {
       //
     }
     isRemoving.current = true
-    handleRemove?.({ keepItems: true })
     setOpenState(false)
+    handleRemove?.({ keepItems: true })
   }, [handleRemove, index, setOpenState])
 
   return (
-    <ArrayItemAreaContext.Provider value={{ handleRemoveItem }}>
+    <ArrayItemAreaContext.Provider
+      value={{ handleRemoveItem, variant, toolbarVariant }}
+    >
       <HeightAnimation
         className={classnames(
           'dnb-forms-section-block',
@@ -184,7 +188,8 @@ function ArrayItemArea(props: Props & FlexContainerProps) {
       >
         <Card
           stack
-          innerSpace="small"
+          filled={variant === 'filled'}
+          innerSpace={variant === 'basic' ? false : 'small'}
           className="dnb-forms-section-block__inner"
           {...restProps}
           aria-label={ariaLabel}
diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/ArrayItemAreaContext.ts b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/ArrayItemAreaContext.ts
index cd03dc0ef6a..e92a9bed4fd 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/ArrayItemAreaContext.ts
+++ b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/ArrayItemAreaContext.ts
@@ -1,7 +1,10 @@
 import { createContext } from 'react'
+import { ArrayItemAreaProps } from './ArrayItemArea'
 
 type ArrayItemAreaContext = {
   handleRemoveItem?: () => void
+  variant?: ArrayItemAreaProps['variant']
+  toolbarVariant?: ArrayItemAreaProps['toolbarVariant']
 }
 
 const ArrayItemAreaContext = createContext<ArrayItemAreaContext>(null)
diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/Array.screenshot.test.ts b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/Array.screenshot.test.ts
index a4583a99dcc..90370890ba3 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/Array.screenshot.test.ts
+++ b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/Array.screenshot.test.ts
@@ -25,6 +25,30 @@ describe('Iterate.Array', () => {
     expect(screenshot).toMatchImageSnapshot()
   })
 
+  it('have to match filled view container', async () => {
+    const screenshot = await makeScreenshot({
+      url,
+      selector:
+        '[data-visual-test="filled-view-and-edit-container"] .dnb-forms-section-view-block',
+    })
+
+    expect(screenshot).toMatchImageSnapshot()
+  })
+
+  it('have to match filled edit container', async () => {
+    const screenshot = await makeScreenshot({
+      url,
+      selector: '[data-visual-test="filled-view-and-edit-container"]',
+      screenshotSelector:
+        '[data-visual-test="filled-view-and-edit-container"] .dnb-forms-section-edit-block',
+      simulate: 'click',
+      simulateSelector:
+        '[data-visual-test="filled-view-and-edit-container"] button',
+      recalculateHeightAfterSimulate: true,
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+
   it('have to match view container', async () => {
     const screenshot = await makeScreenshot({
       url,
@@ -38,11 +62,13 @@ describe('Iterate.Array', () => {
     const screenshot = await makeScreenshot({
       url,
       selector: '[data-visual-test="view-and-edit-container"]',
-      screenshotSelector: '.dnb-forms-section-edit-block',
+      screenshotSelector:
+        '[data-visual-test="view-and-edit-container"] .dnb-forms-section-edit-block',
       waitAfterSimulate: 100,
       simulate: 'click',
       simulateSelector:
-        '[data-visual-test="view-and-edit-container"] .dnb-forms-iterate-open-button',
+        '[data-visual-test="view-and-edit-container"] button',
+      recalculateHeightAfterSimulate: true,
     })
     expect(screenshot).toMatchImageSnapshot()
   })
diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/__image_snapshots__/iteratearray-have-to-match-edit-container.snap.png b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/__image_snapshots__/iteratearray-have-to-match-edit-container.snap.png
index 673fd378ebc..9262ce30446 100644
Binary files a/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/__image_snapshots__/iteratearray-have-to-match-edit-container.snap.png and b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/__image_snapshots__/iteratearray-have-to-match-edit-container.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/__image_snapshots__/iteratearray-have-to-match-filled-edit-container.snap.png b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/__image_snapshots__/iteratearray-have-to-match-filled-edit-container.snap.png
new file mode 100644
index 00000000000..d778947cab9
Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/__image_snapshots__/iteratearray-have-to-match-filled-edit-container.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/__image_snapshots__/iteratearray-have-to-match-filled-view-container.snap.png b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/__image_snapshots__/iteratearray-have-to-match-filled-view-container.snap.png
new file mode 100644
index 00000000000..41c66d6bb7d
Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/__image_snapshots__/iteratearray-have-to-match-filled-view-container.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/Count/Count.tsx b/packages/dnb-eufemia/src/extensions/forms/Iterate/Count/Count.tsx
index 60d1ebf0007..0528e25541d 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Iterate/Count/Count.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Iterate/Count/Count.tsx
@@ -1,7 +1,8 @@
 import { useCallback } from 'react'
 import pointer from '../../utils/json-pointer'
-import { Identifier, Path } from '../../types'
+import { Path } from '../../types'
 import { useData, getData } from '../../Form'
+import { SharedStateId } from '../../../../shared/helpers/useSharedState'
 
 export type Props = {
   /**
@@ -12,7 +13,7 @@ export type Props = {
   /**
    * A Form.Handler or DataContext `id` for when called outside of the context.
    */
-  id?: Identifier
+  id?: SharedStateId
 
   /**
    * A filter function to filter the data before counting.
@@ -45,7 +46,7 @@ export function count(props: Props) {
   return countData(data, props)
 }
 
-export function useCount(id: Identifier = undefined) {
+export function useCount(id: SharedStateId = undefined) {
   const { data } = useData(id)
 
   const count = useCallback(
diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/EditContainer/EditContainer.tsx b/packages/dnb-eufemia/src/extensions/forms/Iterate/EditContainer/EditContainer.tsx
index 72ab1170946..9af697c1542 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Iterate/EditContainer/EditContainer.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Iterate/EditContainer/EditContainer.tsx
@@ -31,10 +31,11 @@ export type Props = {
    * An alternative toolbar to be shown in the EditContainer.
    */
   toolbar?: React.ReactNode
+
   /**
    * The variant of the toolbar.
    */
-  toolbarVariant?: 'minimumOneItem'
+  toolbarVariant?: ArrayItemAreaProps['toolbarVariant']
 }
 
 export type AllProps = Props & FlexContainerProps & ArrayItemAreaProps
@@ -59,13 +60,15 @@ export default function EditContainer(props: AllProps) {
       toolbar={
         hasToolbar
           ? null
-          : toolbarElement ?? (
+          : toolbarElement ??
+            (toolbarVariant !== 'custom' && (
               <Toolbar>
                 <DoneButton />
                 <CancelButton />
               </Toolbar>
-            )
+            ))
       }
+      toolbarVariant={toolbarVariant}
       {...rest}
     >
       {children}
@@ -85,6 +88,7 @@ export function EditContainerWithoutToolbar(
     title,
     titleWhenNew,
     toolbar,
+    toolbarVariant,
     ...restProps
   } = props || {}
 
@@ -103,6 +107,7 @@ export function EditContainerWithoutToolbar(
       mode="edit"
       className={classnames('dnb-forms-section-edit-block', className)}
       ariaLabel={convertJsxToString(itemTitle)}
+      toolbarVariant={toolbarVariant}
       {...restProps}
     >
       {itemTitle && <Lead size="basis">{itemTitle}</Lead>}
diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/EditContainer/EditContainerDocs.ts b/packages/dnb-eufemia/src/extensions/forms/Iterate/EditContainer/EditContainerDocs.ts
index 5e7981dc3f1..a2f05d5e84f 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Iterate/EditContainer/EditContainerDocs.ts
+++ b/packages/dnb-eufemia/src/extensions/forms/Iterate/EditContainer/EditContainerDocs.ts
@@ -12,7 +12,7 @@ export const EditContainerProperties: PropertiesTableProps = {
     status: 'optional',
   },
   variant: {
-    doc: 'Defines the variant of the container. Can be `outline` or `basic`. Defaults to `outline`.',
+    doc: 'Defines the variant of the container. Can be `outline`, `filled` or `basic`. Defaults to `outline`.',
     type: 'string',
     status: 'optional',
   },
@@ -22,7 +22,7 @@ export const EditContainerProperties: PropertiesTableProps = {
     status: 'optional',
   },
   toolbarVariant: {
-    doc: 'Use variants to render the toolbar differently. Currently there is only the `minimumOneItem` variant. See the info section for more info.',
+    doc: 'Use variants to render the toolbar differently. Currently there are the `minimumOneItem` and `custom` variants. See the info section for more info.',
     type: 'string',
     status: 'optional',
   },
diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/EditContainer/__tests__/EditAndViewContainer.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Iterate/EditContainer/__tests__/EditAndViewContainer.test.tsx
index 78d1a364a09..a0b29c5d996 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Iterate/EditContainer/__tests__/EditAndViewContainer.test.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Iterate/EditContainer/__tests__/EditAndViewContainer.test.tsx
@@ -1,8 +1,9 @@
 import React from 'react'
 import { render, fireEvent, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { Flex } from '../../../../../components'
 import IterateItemContext from '../../IterateItemContext'
 import { Field, Form, Iterate, Value } from '../../..'
-import userEvent from '@testing-library/user-event'
 import nbNO from '../../../constants/locales/nb-NO'
 
 const tr = {
@@ -738,59 +739,211 @@ describe('EditContainer and ViewContainer', () => {
     }
   })
 
-  it('should render toolbarVariant="minimumOneItem" with correct buttons', () => {
-    const { rerender } = render(
-      <Iterate.Array value={['foo']}>
-        <Iterate.ViewContainer toolbarVariant="minimumOneItem">
-          View Content
-        </Iterate.ViewContainer>
-        <Iterate.EditContainer toolbarVariant="minimumOneItem">
-          Edit Content
-        </Iterate.EditContainer>
-      </Iterate.Array>
-    )
+  describe('toolbarVariant', () => {
+    it('should render toolbarVariant="minimumOneItem" with correct buttons', () => {
+      const { rerender } = render(
+        <Iterate.Array value={['foo']}>
+          <Iterate.ViewContainer toolbarVariant="minimumOneItem">
+            View Content
+          </Iterate.ViewContainer>
+          <Iterate.EditContainer toolbarVariant="minimumOneItem">
+            Edit Content
+          </Iterate.EditContainer>
+        </Iterate.Array>
+      )
 
-    {
-      const elements = document.querySelectorAll(
-        '.dnb-forms-iterate__element'
+      {
+        const elements = document.querySelectorAll(
+          '.dnb-forms-iterate__element'
+        )
+        expect(elements).toHaveLength(1)
+
+        const [firstElement] = Array.from(elements)
+        const [viewBlock, editBlock] = Array.from(
+          firstElement.querySelectorAll('.dnb-forms-section-block')
+        )
+        expect(editBlock.querySelectorAll('button')).toHaveLength(0)
+        expect(viewBlock.querySelectorAll('button')).toHaveLength(1)
+        expect(viewBlock.querySelectorAll('button')[0]).toHaveTextContent(
+          tr.viewContainer.editButton
+        )
+      }
+
+      rerender(
+        <Iterate.Array value={['foo', 'bar']}>
+          <Iterate.ViewContainer toolbarVariant="minimumOneItem">
+            View Content
+          </Iterate.ViewContainer>
+          <Iterate.EditContainer toolbarVariant="minimumOneItem">
+            Edit Content
+          </Iterate.EditContainer>
+        </Iterate.Array>
+      )
+
+      {
+        const elements = document.querySelectorAll(
+          '.dnb-forms-iterate__element'
+        )
+        expect(elements).toHaveLength(2)
+
+        const [firstElement] = Array.from(elements)
+        const [viewBlock, editBlock] = Array.from(
+          firstElement.querySelectorAll('.dnb-forms-section-block')
+        )
+        expect(editBlock.querySelectorAll('button')).toHaveLength(2)
+        expect(viewBlock.querySelectorAll('button')).toHaveLength(2)
+      }
+    })
+
+    it('should render toolbarVariant="custom" without a toolbar', () => {
+      render(
+        <Iterate.Array value={['foo']}>
+          <Iterate.ViewContainer toolbarVariant="custom">
+            View Content
+          </Iterate.ViewContainer>
+          <Iterate.EditContainer toolbarVariant="custom">
+            Edit Content
+          </Iterate.EditContainer>
+        </Iterate.Array>
       )
-      expect(elements).toHaveLength(1)
 
-      const [firstElement] = Array.from(elements)
       const [viewBlock, editBlock] = Array.from(
-        firstElement.querySelectorAll('.dnb-forms-section-block')
+        document
+          .querySelector('.dnb-forms-iterate__element')
+          .querySelectorAll('.dnb-forms-section-block')
       )
       expect(editBlock.querySelectorAll('button')).toHaveLength(0)
+      expect(viewBlock.querySelectorAll('button')).toHaveLength(0)
+    })
+
+    it('should render toolbarVariant="custom" should default toolbar', () => {
+      render(
+        <Iterate.Array value={['foo']}>
+          <Iterate.ViewContainer toolbarVariant="custom">
+            View Content
+          </Iterate.ViewContainer>
+          <Iterate.EditContainer toolbarVariant="custom">
+            Edit Content
+          </Iterate.EditContainer>
+        </Iterate.Array>
+      )
+
+      const [viewBlock, editBlock] = Array.from(
+        document
+          .querySelector('.dnb-forms-iterate__element')
+          .querySelectorAll('.dnb-forms-section-block')
+      )
+      expect(editBlock.querySelectorAll('button')).toHaveLength(0)
+      expect(viewBlock.querySelectorAll('button')).toHaveLength(0)
+    })
+
+    it('should render toolbarVariant="custom" with correct spacing', () => {
+      render(
+        <Iterate.Array value={['foo']}>
+          <Iterate.ViewContainer toolbarVariant="custom">
+            View Content
+            <Flex.Horizontal>
+              <Iterate.Toolbar>
+                <Iterate.ViewContainer.EditButton />
+              </Iterate.Toolbar>
+            </Flex.Horizontal>
+          </Iterate.ViewContainer>
+          <Iterate.EditContainer toolbarVariant="custom">
+            Edit Content
+            <Flex.Horizontal>
+              <Iterate.Toolbar>
+                <Iterate.EditContainer.DoneButton />
+              </Iterate.Toolbar>
+            </Flex.Horizontal>
+          </Iterate.EditContainer>
+        </Iterate.Array>
+      )
+
+      const [viewBlock, editBlock] = Array.from(
+        document
+          .querySelector('.dnb-forms-iterate__element')
+          .querySelectorAll('.dnb-forms-section-block')
+      )
+
+      expect(editBlock.querySelectorAll('button')).toHaveLength(1)
       expect(viewBlock.querySelectorAll('button')).toHaveLength(1)
-      expect(viewBlock.querySelectorAll('button')[0]).toHaveTextContent(
-        tr.viewContainer.editButton
+
+      const viewToolbars = viewBlock.querySelectorAll(
+        '.dnb-forms-iterate-toolbar'
+      )
+      const editToolbars = editBlock.querySelectorAll(
+        '.dnb-forms-iterate-toolbar'
       )
-    }
 
-    rerender(
-      <Iterate.Array value={['foo', 'bar']}>
-        <Iterate.ViewContainer toolbarVariant="minimumOneItem">
-          View Content
-        </Iterate.ViewContainer>
-        <Iterate.EditContainer toolbarVariant="minimumOneItem">
-          Edit Content
-        </Iterate.EditContainer>
-      </Iterate.Array>
-    )
+      expect(viewToolbars).toHaveLength(1)
+      expect(editToolbars).toHaveLength(1)
 
-    {
-      const elements = document.querySelectorAll(
-        '.dnb-forms-iterate__element'
+      const viewToolbar = viewToolbars[0]
+      expect(viewToolbar).toHaveClass('dnb-space__top--zero')
+      expect(viewToolbar).toHaveClass('dnb-space__right--small')
+      expect(viewToolbar).toHaveClass('dnb-space__left--zero')
+
+      const editToolbar = editToolbars[0]
+      expect(editToolbar).toHaveClass('dnb-space__top--zero')
+      expect(editToolbar).toHaveClass('dnb-space__right--small')
+      expect(editToolbar).toHaveClass('dnb-space__left--zero')
+
+      const viewSpace = viewToolbars[0].querySelector('.dnb-space')
+      expect(viewSpace).toHaveClass('dnb-space__top--zero')
+      expect(viewSpace).toHaveClass('dnb-flex-container--row-gap-small')
+
+      const editSpace = editToolbars[0].querySelector('.dnb-space')
+      expect(editSpace).toHaveClass('dnb-space__top--zero')
+      expect(editSpace).toHaveClass('dnb-flex-container--row-gap-small')
+    })
+
+    it('should render toolbarVariant="custom" without a hr', () => {
+      render(
+        <Iterate.Array value={['foo']}>
+          <Iterate.ViewContainer toolbarVariant="custom">
+            View Content
+            <Flex.Horizontal>
+              <Iterate.Toolbar>
+                <Iterate.ViewContainer.EditButton />
+              </Iterate.Toolbar>
+            </Flex.Horizontal>
+          </Iterate.ViewContainer>
+          <Iterate.EditContainer toolbarVariant="custom">
+            Edit Content
+            <Flex.Horizontal>
+              <Iterate.Toolbar>
+                <Iterate.EditContainer.DoneButton />
+              </Iterate.Toolbar>
+            </Flex.Horizontal>
+          </Iterate.EditContainer>
+        </Iterate.Array>
       )
-      expect(elements).toHaveLength(2)
 
-      const [firstElement] = Array.from(elements)
       const [viewBlock, editBlock] = Array.from(
-        firstElement.querySelectorAll('.dnb-forms-section-block')
+        document
+          .querySelector('.dnb-forms-iterate__element')
+          .querySelectorAll('.dnb-forms-section-block')
       )
-      expect(editBlock.querySelectorAll('button')).toHaveLength(2)
-      expect(viewBlock.querySelectorAll('button')).toHaveLength(2)
-    }
+
+      expect(editBlock.querySelectorAll('button')).toHaveLength(1)
+      expect(viewBlock.querySelectorAll('button')).toHaveLength(1)
+
+      const viewToolbars = viewBlock.querySelectorAll(
+        '.dnb-forms-iterate-toolbar'
+      )
+      const editToolbars = editBlock.querySelectorAll(
+        '.dnb-forms-iterate-toolbar'
+      )
+
+      expect(viewToolbars).toHaveLength(1)
+      expect(editToolbars).toHaveLength(1)
+
+      const viewToolbar = viewToolbars[0]
+      const editToolbar = editToolbars[0]
+
+      expect(viewToolbar.querySelectorAll('hr')).toHaveLength(0)
+      expect(editToolbar.querySelectorAll('hr')).toHaveLength(0)
+    })
   })
 
   it('should validate on submit', () => {
@@ -989,4 +1142,46 @@ describe('EditContainer and ViewContainer', () => {
     expect(containerMode[0]).toBe('edit')
     expect(containerMode[1]).toBe('edit')
   })
+
+  it('should set correct class for variant "basic"', () => {
+    render(
+      <Iterate.Array path="/" defaultValue={[null]}>
+        <Iterate.ViewContainer variant="basic">
+          View Content
+        </Iterate.ViewContainer>
+        <Iterate.EditContainer variant="basic">
+          <Field.String itemPath="/" required />
+        </Iterate.EditContainer>
+      </Iterate.Array>
+    )
+
+    const [viewBlock, editBlock] = Array.from(
+      document.querySelectorAll('.dnb-forms-section-block')
+    )
+    expect(viewBlock).toHaveClass('dnb-forms-section-block--variant-basic')
+    expect(editBlock).toHaveClass('dnb-forms-section-block--variant-basic')
+  })
+
+  it('should set correct class for variant "filled"', () => {
+    render(
+      <Iterate.Array path="/" defaultValue={[null]}>
+        <Iterate.ViewContainer variant="filled">
+          View Content
+        </Iterate.ViewContainer>
+        <Iterate.EditContainer variant="filled">
+          <Field.String itemPath="/" required />
+        </Iterate.EditContainer>
+      </Iterate.Array>
+    )
+
+    const [viewBlock, editBlock] = Array.from(
+      document.querySelectorAll('.dnb-forms-section-block')
+    )
+    expect(viewBlock).toHaveClass(
+      'dnb-forms-section-block--variant-filled'
+    )
+    expect(editBlock).toHaveClass(
+      'dnb-forms-section-block--variant-filled'
+    )
+  })
 })
diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/PushContainer/PushContainerDocs.ts b/packages/dnb-eufemia/src/extensions/forms/Iterate/PushContainer/PushContainerDocs.ts
index fbdffe54f74..25b51bd566d 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Iterate/PushContainer/PushContainerDocs.ts
+++ b/packages/dnb-eufemia/src/extensions/forms/Iterate/PushContainer/PushContainerDocs.ts
@@ -43,7 +43,7 @@ export const PushContainerProperties: PropertiesTableProps = {
     status: 'optional',
   },
   variant: {
-    doc: 'Defines the variant of the container. Can be `outline` or `basic`. Defaults to `outline`.',
+    doc: 'Defines the variant of the container. Can be `outline`, `filled` or `basic`. Defaults to `outline`.',
     type: 'string',
     status: 'optional',
   },
diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/RemoveButton/RemoveButton.tsx b/packages/dnb-eufemia/src/extensions/forms/Iterate/RemoveButton/RemoveButton.tsx
index 2cda00e35ce..821a816d7a8 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Iterate/RemoveButton/RemoveButton.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Iterate/RemoveButton/RemoveButton.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useContext } from 'react'
 import classnames from 'classnames'
-import { Button } from '../../../../components'
+import { Button, Dialog } from '../../../../components'
 import { ButtonProps } from '../../../../components/Button'
 import IterateItemContext from '../IterateItemContext'
 import { useTranslation } from '../../hooks'
@@ -12,7 +12,9 @@ import {
 import { trash } from '../../../../icons'
 
 export type Props = ButtonProps &
-  DataValueReadWriteComponentProps<unknown[]>
+  DataValueReadWriteComponentProps<unknown[]> & {
+    showConfirmDialog?: boolean
+  }
 
 function RemoveButton(props: Props) {
   const iterateItemContext = useContext(IterateItemContext)
@@ -22,7 +24,8 @@ function RemoveButton(props: Props) {
     throw new Error('RemoveButton must be inside an Iterate.Array')
   }
 
-  const { text, children, className, ...restProps } = props
+  const { text, children, className, showConfirmDialog, ...restProps } =
+    props
   const buttonProps = omitDataValueReadWriteProps(restProps)
   const translation = useTranslation().RemoveButton
   const textContent = text || children || translation.text
@@ -30,28 +33,48 @@ function RemoveButton(props: Props) {
   const elementBlockContext = useContext(ArrayItemAreaContext)
   const { handleRemoveItem } = elementBlockContext || {}
 
-  const handleClick = useCallback(() => {
-    if (handleRemoveItem) {
-      handleRemoveItem?.()
-    } else {
-      handleRemove?.()
-    }
-  }, [handleRemove, handleRemoveItem])
+  const handleClick = useCallback(
+    ({ close }) => {
+      close?.()
+
+      if (handleRemoveItem) {
+        handleRemoveItem?.()
+      } else {
+        handleRemove?.()
+      }
+    },
+    [handleRemove, handleRemoveItem]
+  )
+
+  const triggerAttributes: ButtonProps = {
+    className: classnames(
+      'dnb-forms-iterate-remove-element-button',
+      className
+    ),
+    text: textContent,
+    variant: textContent ? 'tertiary' : 'secondary',
+    icon: trash,
+    icon_position: 'left',
+    ...buttonProps,
+  }
+
+  if (showConfirmDialog) {
+    return (
+      <Dialog
+        variant="confirmation"
+        title={translation.confirmRemoveText}
+        triggerAttributes={triggerAttributes}
+        onConfirm={handleClick}
+      />
+    )
+  }
 
   return (
     <Button
-      className={classnames(
-        'dnb-forms-iterate-remove-element-button',
-        className
-      )}
-      variant={textContent ? 'tertiary' : 'secondary'}
-      icon={trash}
-      icon_position="left"
+      {...triggerAttributes}
       on_click={handleClick}
       {...buttonProps}
-    >
-      {textContent}
-    </Button>
+    />
   )
 }
 
diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/RemoveButton/RemoveButtonDocs.ts b/packages/dnb-eufemia/src/extensions/forms/Iterate/RemoveButton/RemoveButtonDocs.ts
index 82188663e5a..dad74872682 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Iterate/RemoveButton/RemoveButtonDocs.ts
+++ b/packages/dnb-eufemia/src/extensions/forms/Iterate/RemoveButton/RemoveButtonDocs.ts
@@ -1,6 +1,11 @@
 import { PropertiesTableProps } from '../../../../shared/types'
 
 export const RemoveButtonProperties: PropertiesTableProps = {
+  showConfirmDialog: {
+    doc: 'Use `true` to show a confirmation dialog before removing the item.',
+    type: 'boolean',
+    status: 'optional',
+  },
   '[Button](/uilib/components/button/properties)': {
     doc: 'All button properties.',
     type: 'Various',
diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/RemoveButton/__tests__/RemoveButton.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Iterate/RemoveButton/__tests__/RemoveButton.test.tsx
index 09d5a950c45..2ae0d0ec52b 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Iterate/RemoveButton/__tests__/RemoveButton.test.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Iterate/RemoveButton/__tests__/RemoveButton.test.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import { render, fireEvent, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import IterateItemContext from '../../IterateItemContext'
 import RemoveButton from '../RemoveButton'
 import nbNO from '../../../constants/locales/nb-NO'
@@ -16,6 +17,10 @@ describe('RemoveButton', () => {
     </IterateItemContext.Provider>
   )
 
+  afterEach(() => {
+    handleRemove.mockReset()
+  })
+
   it('should call handleRemove when clicked inside an Iterate element', () => {
     render(<RemoveButton>Remove Button</RemoveButton>, { wrapper })
 
@@ -120,4 +125,32 @@ describe('RemoveButton', () => {
 
     expect(screen.getByText(remove)).toBeInTheDocument()
   })
+
+  describe('showConfirmDialog', () => {
+    it('should show Dialog before removing', async () => {
+      render(<RemoveButton showConfirmDialog />, { wrapper })
+
+      await userEvent.click(document.querySelector('button'))
+
+      expect(handleRemove).toHaveBeenCalledTimes(0)
+
+      await userEvent.click(
+        document.querySelector(
+          '.dnb-dialog__inner button.dnb-button--primary'
+        )
+      )
+
+      expect(handleRemove).toHaveBeenCalledTimes(1)
+    })
+
+    it('should show Dialog with translation before removing', async () => {
+      render(<RemoveButton showConfirmDialog />, { wrapper })
+
+      await userEvent.click(document.querySelector('button'))
+
+      expect(
+        document.querySelector('.dnb-dialog__inner')
+      ).toHaveTextContent(nb.confirmRemoveText)
+    })
+  })
 })
diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/Toolbar/Toolbar.tsx b/packages/dnb-eufemia/src/extensions/forms/Iterate/Toolbar/Toolbar.tsx
index c41ab227535..8beb409f98f 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Iterate/Toolbar/Toolbar.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Iterate/Toolbar/Toolbar.tsx
@@ -6,6 +6,7 @@ import { SpaceAllProps } from '../../../../components/Space'
 import IterateItemContext from '../IterateItemContext'
 import ToolbarContext from './ToolbarContext'
 import FieldBoundaryContext from '../../DataContext/FieldBoundary/FieldBoundaryContext'
+import ArrayItemAreaContext from '../Array/ArrayItemAreaContext'
 import { useTranslation } from '../../hooks'
 
 export type ToolbarParams = {
@@ -27,6 +28,7 @@ export default function Toolbar({
     value,
     arrayValue: items,
   } = useContext(IterateItemContext) || {}
+  const { toolbarVariant } = useContext(ArrayItemAreaContext) || {}
   const { errorInContainer } = useTranslation().IterateEditContainer
   const { hasError, hasVisibleError } =
     useContext(FieldBoundaryContext) || {}
@@ -48,14 +50,17 @@ export default function Toolbar({
 
   return (
     <Space
-      top="medium"
+      top={toolbarVariant === 'custom' ? false : 'medium'}
       className={classnames('dnb-forms-iterate-toolbar', className)}
       {...rest}
     >
-      <Hr space={0} />
+      {toolbarVariant !== 'custom' && <Hr space={0} />}
 
       <ToolbarContext.Provider value={{ setShowError }}>
-        <Flex.Horizontal top="x-small" gap="large">
+        <Flex.Horizontal
+          top={toolbarVariant === 'custom' ? false : 'x-small'}
+          gap="large"
+        >
           {children}
         </Flex.Horizontal>
       </ToolbarContext.Provider>
diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/ViewContainer/RemoveButton.tsx b/packages/dnb-eufemia/src/extensions/forms/Iterate/ViewContainer/RemoveButton.tsx
index 1f26e3467f2..6dfc5a0fad4 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Iterate/ViewContainer/RemoveButton.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Iterate/ViewContainer/RemoveButton.tsx
@@ -1,9 +1,11 @@
 import React from 'react'
-import RemoveButton from '../RemoveButton'
+import RemoveButton, { Props as RemoveButtonProps } from '../RemoveButton'
 import useTranslation from '../../hooks/useTranslation'
 
-export default function ViewContainerRemoveButton() {
+export default function ViewContainerRemoveButton(
+  props: RemoveButtonProps
+) {
   const { removeButton } = useTranslation().IterateViewContainer
 
-  return <RemoveButton text={removeButton} />
+  return <RemoveButton text={removeButton} {...props} />
 }
diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/ViewContainer/ViewContainer.tsx b/packages/dnb-eufemia/src/extensions/forms/Iterate/ViewContainer/ViewContainer.tsx
index cc49e27fa4c..92fdba61dc3 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Iterate/ViewContainer/ViewContainer.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Iterate/ViewContainer/ViewContainer.tsx
@@ -16,14 +16,16 @@ export type Props = {
    * The title of the ViewContainer.
    */
   title?: React.ReactNode
+
   /**
    * An alternative toolbar to be shown in the ViewContainer.
    */
   toolbar?: React.ReactNode
+
   /**
    * The variant of the toolbar.
    */
-  toolbarVariant?: 'minimumOneItem'
+  toolbarVariant?: ArrayItemAreaProps['toolbarVariant']
 }
 
 export type AllProps = Props & FlexContainerProps & ArrayItemAreaProps
@@ -62,6 +64,7 @@ function ViewContainer(props: AllProps) {
       mode="view"
       ariaLabel={convertJsxToString(itemTitle)}
       className={classnames('dnb-forms-section-view-block', className)}
+      toolbarVariant={toolbarVariant}
       {...restProps}
     >
       <Flex.Stack>
@@ -69,12 +72,13 @@ function ViewContainer(props: AllProps) {
         {children}
         {hasToolbar
           ? null
-          : toolbarElement ?? (
+          : toolbarElement ??
+            (toolbarVariant !== 'custom' && (
               <Toolbar>
                 <EditButton />
                 <RemoveButton />
               </Toolbar>
-            )}
+            ))}
       </Flex.Stack>
     </ArrayItemArea>
   )
diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/ViewContainer/ViewContainerDocs.ts b/packages/dnb-eufemia/src/extensions/forms/Iterate/ViewContainer/ViewContainerDocs.ts
index dc92473f35b..b776d570a0d 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Iterate/ViewContainer/ViewContainerDocs.ts
+++ b/packages/dnb-eufemia/src/extensions/forms/Iterate/ViewContainer/ViewContainerDocs.ts
@@ -7,7 +7,7 @@ export const ViewContainerProperties: PropertiesTableProps = {
     status: 'optional',
   },
   variant: {
-    doc: 'Defines the variant of the container. Can be `outline` or `basic`. Defaults to `outline`.',
+    doc: 'Defines the variant of the container. Can be `outline`, `filled` or `basic`. Defaults to `outline`.',
     type: 'string',
     status: 'optional',
   },
@@ -17,7 +17,7 @@ export const ViewContainerProperties: PropertiesTableProps = {
     status: 'optional',
   },
   toolbarVariant: {
-    doc: 'Use variants to render the toolbar differently. Currently there is only the `minimumOneItem` variant. See the info section for more info.',
+    doc: 'Use variants to render the toolbar differently. Currently there are the `minimumOneItem` and `custom` variants. See the info section for more info.',
     type: 'string',
     status: 'optional',
   },
diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/hooks/useItem.ts b/packages/dnb-eufemia/src/extensions/forms/Iterate/hooks/useItem.ts
index a202eac933d..befdceea108 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Iterate/hooks/useItem.ts
+++ b/packages/dnb-eufemia/src/extensions/forms/Iterate/hooks/useItem.ts
@@ -1,7 +1,16 @@
 import { useContext } from 'react'
-import IterateItemContext from '../IterateItemContext'
+import IterateItemContext, {
+  IterateItemContextState,
+} from '../IterateItemContext'
 
-export default function useItem() {
+export type UseItemReturn<Value = unknown> = Omit<
+  IterateItemContextState,
+  'value'
+> & {
+  value: Value
+}
+
+export default function useItem<Value = unknown>() {
   const item = useContext(IterateItemContext)
-  return item
+  return item as UseItemReturn<Value>
 }
diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/stories/PushContainer.stories.tsx b/packages/dnb-eufemia/src/extensions/forms/Iterate/stories/PushContainer.stories.tsx
index 8873adc93da..14b0c715b41 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Iterate/stories/PushContainer.stories.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Iterate/stories/PushContainer.stories.tsx
@@ -60,7 +60,7 @@ function RepresentativesEdit() {
 }
 
 function ExistingPersonDetails() {
-  const { data, getValue } = Form.useData()
+  const { data, getValue } = Form.useData<{ selectedPerson: string }>()
   const person = getValue(data.selectedPerson)?.data || {}
 
   return (
@@ -89,7 +89,7 @@ function NewPersonDetails() {
 }
 
 function PushContainerContent() {
-  const { data, update } = Form.useData()
+  const { data, update } = Form.useData<{ selectedPerson: string }>()
 
   // Clear the PushContainer data when the selected person is "other",
   // so the fields do not inherit existing data.
diff --git a/packages/dnb-eufemia/src/extensions/forms/Tools/ListAllProps.tsx b/packages/dnb-eufemia/src/extensions/forms/Tools/ListAllProps.tsx
index 301a0c47fa6..0fda1113732 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Tools/ListAllProps.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Tools/ListAllProps.tsx
@@ -2,19 +2,22 @@ import { isValidElement, useCallback, useContext, useRef } from 'react'
 import pointer, { JsonObject } from '../utils/json-pointer'
 import DataContext, { FilterData } from '../DataContext/Context'
 
-export type ListAllPropsReturn = {
-  propsOfFields: JsonObject
-  propsOfValues: JsonObject
+export type ListAllPropsReturn<Data> = {
+  propsOfFields: Data
+  propsOfValues: Data
 }
-export type ListAllPropsProps = {
+export type ListAllPropsProps<Data> = {
   log?: boolean
-  generateRef?: React.MutableRefObject<() => ListAllPropsReturn>
+  generateRef?: React.MutableRefObject<() => ListAllPropsReturn<Data>>
   filterData?: FilterData
   children: React.ReactNode
 }
-export type GenerateRef = ListAllPropsProps['generateRef']['current']
+export type GenerateRef<Data extends JsonObject = JsonObject> =
+  ListAllPropsProps<Data>['generateRef']['current']
 
-export default function ListAllProps(props: ListAllPropsProps) {
+export default function ListAllProps<Data extends JsonObject = JsonObject>(
+  props: ListAllPropsProps<Data>
+) {
   const { log, generateRef, filterData, children } = props || {}
   const { fieldPropsRef, valuePropsRef, data, hasContext } =
     useContext(DataContext)
@@ -71,7 +74,7 @@ export default function ListAllProps(props: ListAllPropsProps) {
       return acc
     }, {})
 
-    return { propsOfFields, propsOfValues } as ListAllPropsReturn
+    return { propsOfFields, propsOfValues } as ListAllPropsReturn<Data>
   }, [fieldPropsRef, filterData, valuePropsRef])
 
   if (hasContext) {
diff --git a/packages/dnb-eufemia/src/extensions/forms/Tools/__tests__/ListAllProps.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Tools/__tests__/ListAllProps.test.tsx
index 07e7d3e622e..5326d707cda 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Tools/__tests__/ListAllProps.test.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Tools/__tests__/ListAllProps.test.tsx
@@ -635,7 +635,17 @@ describe('Tools.ListAllProps', () => {
   })
 
   it('should filter out React elements', () => {
-    const generateRef = React.createRef<GenerateRef>()
+    const generateRef = React.createRef<
+      GenerateRef<{
+        items: {
+          children: {
+            type: {
+              name: string
+            }
+          }
+        }
+      }>
+    >()
 
     render(
       <Form.Handler data={{ count: 2 }}>
diff --git a/packages/dnb-eufemia/src/extensions/forms/Value/PhoneNumber/PhoneNumber.tsx b/packages/dnb-eufemia/src/extensions/forms/Value/PhoneNumber/PhoneNumber.tsx
index 27bda94a6dd..28f2e42fa08 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Value/PhoneNumber/PhoneNumber.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Value/PhoneNumber/PhoneNumber.tsx
@@ -1,9 +1,6 @@
 import React, { useCallback } from 'react'
 import StringValue, { Props as StringValueProps } from '../String'
-import {
-  format,
-  cleanNumber,
-} from '../../../../components/number-format/NumberUtils'
+import { format } from '../../../../components/number-format/NumberUtils'
 import useTranslation from '../../hooks/useTranslation'
 
 export type Props = StringValueProps
@@ -15,7 +12,8 @@ function PhoneNumber(props: Props) {
     props.label ?? (props.inline ? undefined : translations.label)
 
   const toInput = useCallback((value) => {
-    return format(cleanNumber(value), {
+    // We can't use the "cleanNumber" function here, because we need to keep the country code separate from the number
+    return format(value, {
       phone: true,
     }).toString()
   }, [])
diff --git a/packages/dnb-eufemia/src/extensions/forms/Wizard/Container/WizardContainer.tsx b/packages/dnb-eufemia/src/extensions/forms/Wizard/Container/WizardContainer.tsx
index 3f3fc8d4571..4b13a5a2f32 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Wizard/Container/WizardContainer.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Wizard/Container/WizardContainer.tsx
@@ -30,6 +30,7 @@ import DataContext, {
 import Handler from '../../Form/Handler/Handler'
 import {
   SharedStateReturn,
+  createReferenceKey,
   useSharedState,
 } from '../../../../shared/helpers/useSharedState'
 import useHandleLayoutEffect from './useHandleLayoutEffect'
@@ -146,7 +147,7 @@ function WizardContainer(props: Props) {
       >
     >()
   sharedStateRef.current = useSharedState<WizardContextState>(
-    hasContext && id ? id + '-wizard' : undefined
+    hasContext && id ? createReferenceKey(id, 'wizard') : undefined
   )
 
   // Store the current state of showAllErrors
diff --git a/packages/dnb-eufemia/src/extensions/forms/Wizard/hooks/useStep.tsx b/packages/dnb-eufemia/src/extensions/forms/Wizard/hooks/useStep.tsx
index e0e94811670..b3753b75a05 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Wizard/hooks/useStep.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Wizard/hooks/useStep.tsx
@@ -3,15 +3,18 @@ import WizardContext, {
   OnStepChange,
   WizardContextState,
 } from '../Context/WizardContext'
-import { Identifier } from '../../types'
-import { useSharedState } from '../../../../shared/helpers/useSharedState'
+import {
+  SharedStateId,
+  createReferenceKey,
+  useSharedState,
+} from '../../../../shared/helpers/useSharedState'
 
 // SSR warning fix: https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
 const useLayoutEffect =
   typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect
 
 export default function useStep(
-  id: Identifier = null,
+  id: SharedStateId = null,
   { onStepChange }: { onStepChange?: OnStepChange } = {}
 ) {
   const setFormError = useCallback(() => null, [])
@@ -26,7 +29,7 @@ export default function useStep(
   const sharedDataRef =
     useRef<ReturnType<typeof useSharedState<WizardContextState>>>(null)
   sharedDataRef.current = useSharedState<WizardContextState>(
-    id ? id + '-wizard' : undefined
+    id ? createReferenceKey(id, 'wizard') : undefined
   )
 
   useLayoutEffect(() => {
diff --git a/packages/dnb-eufemia/src/extensions/forms/Wizard/style/themes/dnb-wizard-layout-theme-ui.scss b/packages/dnb-eufemia/src/extensions/forms/Wizard/style/themes/dnb-wizard-layout-theme-ui.scss
index abdabed701d..d676d7d91d2 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Wizard/style/themes/dnb-wizard-layout-theme-ui.scss
+++ b/packages/dnb-eufemia/src/extensions/forms/Wizard/style/themes/dnb-wizard-layout-theme-ui.scss
@@ -1,6 +1,8 @@
 .dnb-forms-wizard-layout {
   &__contents {
     .dnb-card {
+      // Change the default outline color to match the StepIndicator v2.
+      // This is deprecated and can be removed when the StepIndicator v3 (without a sidebar) is released.
       --card-outline-color: var(--color-pistachio);
     }
   }
diff --git a/packages/dnb-eufemia/src/extensions/forms/constants/countries.ts b/packages/dnb-eufemia/src/extensions/forms/constants/countries.ts
index f4acbd8d33a..c0e0e90fe74 100644
--- a/packages/dnb-eufemia/src/extensions/forms/constants/countries.ts
+++ b/packages/dnb-eufemia/src/extensions/forms/constants/countries.ts
@@ -1650,7 +1650,7 @@ const countries: Array<CountryType> = [
       en: 'Puerto Rico',
       nb: 'Puerto Rico',
     },
-    cdc: '1-787, 1-939',
+    cdc: '1-787',
     iso: 'PR',
     continent: 'North America',
   },
diff --git a/packages/dnb-eufemia/src/extensions/forms/constants/locales/en-GB.ts b/packages/dnb-eufemia/src/extensions/forms/constants/locales/en-GB.ts
index a44eb1df661..d2df5c1b137 100644
--- a/packages/dnb-eufemia/src/extensions/forms/constants/locales/en-GB.ts
+++ b/packages/dnb-eufemia/src/extensions/forms/constants/locales/en-GB.ts
@@ -33,6 +33,7 @@ export default {
     },
     RemoveButton: {
       text: 'Remove',
+      confirmRemoveText: 'Are you sure you want to delete this?',
     },
     SectionViewContainer: {
       editButton: 'Edit',
diff --git a/packages/dnb-eufemia/src/extensions/forms/constants/locales/nb-NO.ts b/packages/dnb-eufemia/src/extensions/forms/constants/locales/nb-NO.ts
index b976462b78b..1110f5caee2 100644
--- a/packages/dnb-eufemia/src/extensions/forms/constants/locales/nb-NO.ts
+++ b/packages/dnb-eufemia/src/extensions/forms/constants/locales/nb-NO.ts
@@ -32,6 +32,7 @@ export default {
     },
     RemoveButton: {
       text: 'Fjern',
+      confirmRemoveText: 'Er du sikker på at du vil slette dette?',
     },
     SectionViewContainer: {
       editButton: 'Endre',
diff --git a/packages/dnb-eufemia/src/extensions/forms/hooks/useDataContext.tsx b/packages/dnb-eufemia/src/extensions/forms/hooks/useDataContext.tsx
index a8116150377..9c2f020983a 100644
--- a/packages/dnb-eufemia/src/extensions/forms/hooks/useDataContext.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/hooks/useDataContext.tsx
@@ -1,6 +1,7 @@
 import { useCallback, useContext } from 'react'
 import {
   SharedStateId,
+  createReferenceKey,
   useSharedState,
 } from '../../../shared/helpers/useSharedState'
 import DataContext, { ContextState } from '../DataContext/Context'
@@ -10,7 +11,7 @@ export default function useDataContext(id: SharedStateId = undefined): {
   getContext: () => ContextState
 } {
   const sharedDataContext = useSharedState<ContextState>(
-    id + '-data-context'
+    createReferenceKey(id, 'data-context')
   )
 
   const dataContext = useContext(DataContext)
diff --git a/packages/dnb-eufemia/src/extensions/forms/hooks/useSnapshot.tsx b/packages/dnb-eufemia/src/extensions/forms/hooks/useSnapshot.tsx
index 62da13025d8..b56f06bc2f5 100644
--- a/packages/dnb-eufemia/src/extensions/forms/hooks/useSnapshot.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/hooks/useSnapshot.tsx
@@ -1,13 +1,13 @@
 import { useCallback, useRef } from 'react'
 import { makeUniqueId } from '../../../shared/component-helper'
-import pointer from '../utils/json-pointer'
+import pointer, { JsonObject } from '../utils/json-pointer'
 import { SharedStateId } from '../../../shared/helpers/useSharedState'
 import useDataContext from './useDataContext'
 import { SnapshotId, SnapshotName } from '../Form/Snapshot'
 import useData from '../Form/data-context/useData'
 
 export default function useSnapshot(id?: SharedStateId) {
-  const internalSnapshotsRef = useRef<Map<SnapshotId, unknown>>()
+  const internalSnapshotsRef = useRef<Map<SnapshotId, JsonObject>>()
   if (!internalSnapshotsRef.current) {
     internalSnapshotsRef.current = new Map()
   }
@@ -19,14 +19,14 @@ export default function useSnapshot(id?: SharedStateId) {
     (
       id: SnapshotId = makeUniqueId(),
       name: SnapshotName = null,
-      content: unknown = null
+      content: JsonObject = null
     ): SnapshotId => {
       const { internalDataRef, snapshotsRef } = getContext()
 
       if (!content) {
         const snapshotWithPaths = snapshotsRef?.current?.get?.(name)
         if (snapshotWithPaths) {
-          const collectedData = new Map()
+          const collectedData: Map<string, JsonObject> = new Map()
           snapshotWithPaths.forEach((isMounted, path) => {
             if (isMounted && pointer.has(internalDataRef.current, path)) {
               collectedData.set(
@@ -35,7 +35,7 @@ export default function useSnapshot(id?: SharedStateId) {
               )
             }
           })
-          content = collectedData
+          content = collectedData as unknown as JsonObject
         } else {
           content = internalDataRef.current
         }
@@ -52,7 +52,7 @@ export default function useSnapshot(id?: SharedStateId) {
   )
 
   const getSnapshot = useCallback(
-    (id: SnapshotId, name: SnapshotName = null): unknown => {
+    (id: SnapshotId, name: SnapshotName = null): JsonObject => {
       return internalSnapshotsRef.current.get(combineIdWithName(id, name))
     },
     []
diff --git a/packages/dnb-eufemia/src/extensions/forms/types.ts b/packages/dnb-eufemia/src/extensions/forms/types.ts
index 3228bb4162a..89bbcf96a57 100644
--- a/packages/dnb-eufemia/src/extensions/forms/types.ts
+++ b/packages/dnb-eufemia/src/extensions/forms/types.ts
@@ -562,21 +562,18 @@ export type EventReturnWithStateObjectAndSuccess =
   | Error
   | EventStateObjectWithSuccess
 
-export type OnSubmitParams = {
+export type OnSubmitParams<Data = JsonObject> = {
   /** Will remove data entries of fields that are not visible */
   reduceToVisibleFields: (
-    data: JsonObject,
+    data: Data,
     options?: VisibleDataOptions
-  ) => Partial<JsonObject>
+  ) => Partial<Data>
 
   /** Will call the given function for each data path. The returned `value` will replace each data entry. It's up to you to define the shape of the value. */
-  transformData: (
-    data: JsonObject,
-    handler: TransformData
-  ) => TransformData
+  transformData: (data: Data, handler: TransformData) => Partial<Data>
 
   /** Will filter data based on the given "filterDataHandler" method */
-  filterData: (filterDataHandler: FilterData) => Partial<JsonObject>
+  filterData: (filterDataHandler: FilterData) => Partial<Data>
 
   /** Will remove browser-side stored autocomplete data  */
   resetForm: () => void
diff --git a/packages/dnb-eufemia/src/extensions/forms/utils/json-pointer/json-pointer.ts b/packages/dnb-eufemia/src/extensions/forms/utils/json-pointer/json-pointer.ts
index 0e921caf43f..5ca5485846f 100644
--- a/packages/dnb-eufemia/src/extensions/forms/utils/json-pointer/json-pointer.ts
+++ b/packages/dnb-eufemia/src/extensions/forms/utils/json-pointer/json-pointer.ts
@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 export type PointerPath = string | Array<string>
-export type JsonValue = any
-export type JsonObject = any
+export type JsonValue = unknown
+export type JsonObject = Record<string | number, unknown> | Array<unknown>
 
 /**
  * Lookup a json pointer in an object
diff --git a/packages/dnb-eufemia/src/shared/helpers/__tests__/useSharedState.test.ts b/packages/dnb-eufemia/src/shared/helpers/__tests__/useSharedState.test.ts
index 104ee5ffc67..5fe8b8e566a 100644
--- a/packages/dnb-eufemia/src/shared/helpers/__tests__/useSharedState.test.ts
+++ b/packages/dnb-eufemia/src/shared/helpers/__tests__/useSharedState.test.ts
@@ -1,9 +1,15 @@
 import { renderHook, act } from '@testing-library/react'
 import { makeUniqueId } from '../../component-helper'
-import { useSharedState, createSharedState } from '../useSharedState'
+import {
+  useSharedState,
+  createSharedState,
+  SharedStateId,
+  createReferenceKey,
+} from '../useSharedState'
+import { createContext } from 'react'
 
 describe('useSharedState', () => {
-  let identifier: string
+  let identifier: SharedStateId
 
   beforeEach(() => {
     identifier = makeUniqueId()
@@ -47,6 +53,50 @@ describe('useSharedState', () => {
     expect(result.current.data).toEqual({ test: 'changed' })
   })
 
+  it('should update the shared state with a function reference as id', () => {
+    const identifier = () => null
+    const { result } = renderHook(() =>
+      useSharedState(identifier, { test: 'initial' })
+    )
+    act(() => {
+      result.current.update({ test: 'updated' })
+    })
+    expect(result.current.data).toEqual({ test: 'updated' })
+  })
+
+  it('should update the shared state with an async function reference as id', () => {
+    const identifier = async () => null
+    const { result } = renderHook(() =>
+      useSharedState(identifier, { test: 'initial' })
+    )
+    act(() => {
+      result.current.update({ test: 'updated' })
+    })
+    expect(result.current.data).toEqual({ test: 'updated' })
+  })
+
+  it('should update the shared state with an object reference as id', () => {
+    const identifier = {}
+    const { result } = renderHook(() =>
+      useSharedState(identifier, { test: 'initial' })
+    )
+    act(() => {
+      result.current.update({ test: 'updated' })
+    })
+    expect(result.current.data).toEqual({ test: 'updated' })
+  })
+
+  it('should update the shared state with a React context reference as id', () => {
+    const identifier = createContext(null)
+    const { result } = renderHook(() =>
+      useSharedState(identifier, { test: 'initial' })
+    )
+    act(() => {
+      result.current.update({ test: 'updated' })
+    })
+    expect(result.current.data).toEqual({ test: 'updated' })
+  })
+
   it('should unsubscribe from the shared state when the component unmounts', () => {
     const { result, unmount } = renderHook(() =>
       useSharedState(identifier, { test: 'initial' })
@@ -171,3 +221,66 @@ describe('useSharedState', () => {
     expect(resultB.current.data).toEqual({ foo: 'baz' })
   })
 })
+
+describe('createReferenceKey', () => {
+  it('should return the same object for the same references', () => {
+    const ref1 = {}
+    const ref2 = () => null
+
+    const key1 = createReferenceKey(ref1, ref2)
+    const key2 = createReferenceKey(ref1, ref2)
+
+    expect(key1).toBe(key2)
+  })
+
+  it('should return the same object for the same string references', () => {
+    const ref1 = {}
+    const ref2 = 'unique'
+
+    const key1 = createReferenceKey(ref1, ref2)
+    const key2 = createReferenceKey(ref1, ref2)
+
+    expect(key1).toBe(key2)
+  })
+
+  it('should return different objects for different references', () => {
+    const ref1 = {}
+    const ref2 = {}
+    const ref3 = {}
+
+    const key1 = createReferenceKey(ref1, ref2)
+    const key2 = createReferenceKey(ref1, ref3)
+
+    expect(key1).not.toBe(key2)
+  })
+
+  it('should return different objects for different first references', () => {
+    const ref1 = {}
+    const ref2 = {}
+    const ref3 = {}
+
+    const key1 = createReferenceKey(ref1, ref2)
+    const key2 = createReferenceKey(ref3, ref2)
+
+    expect(key1).not.toBe(key2)
+  })
+
+  it('should cache the combined reference', () => {
+    const ref1 = {}
+    const ref2 = () => null
+
+    const key1 = createReferenceKey(ref1, ref2)
+    const key2 = createReferenceKey(ref1, ref2)
+
+    expect(key1).toBe(key2)
+  })
+
+  it('should create a new reference if it does not exist', () => {
+    const ref1 = {}
+    const ref2 = {}
+
+    const key1 = createReferenceKey(ref1, ref2)
+
+    expect(key1).toBeDefined()
+  })
+})
diff --git a/packages/dnb-eufemia/src/shared/helpers/useSharedState.tsx b/packages/dnb-eufemia/src/shared/helpers/useSharedState.tsx
index 4fb9fe76bdf..6d837bceb3f 100644
--- a/packages/dnb-eufemia/src/shared/helpers/useSharedState.tsx
+++ b/packages/dnb-eufemia/src/shared/helpers/useSharedState.tsx
@@ -12,20 +12,22 @@ import useMountEffect from './useMountEffect'
 const useLayoutEffect =
   typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect
 
-export type SharedStateId = string
+export type SharedStateId =
+  | string
+  | (() => void)
+  | Promise<() => void>
+  | React.Context<any>
+  | Record<string, unknown>
 
 /**
  * Custom hook that provides shared state functionality.
- *
- * @template Data - The type of data stored in the shared state.
- * @param {SharedStateId} id - The identifier for the shared state.
- * @param {Data} initialData - The initial data for the shared state.
- * @param {Function} onChange - Optional callback function to be called when the shared state is set from another instance/component.
- * @returns {Object} - An object containing the shared state data, update function, extend function, and set function.
  */
 export function useSharedState<Data>(
-  id: SharedStateId,
+  /** The identifier for the shared state. */
+  id: SharedStateId | undefined,
+  /** The initial data for the shared state. */
   initialData: Data = undefined,
+  /** Optional callback function to be called when the shared state is set from another instance/component. */
   onChange = null
 ) {
   const [, forceUpdate] = useReducer(() => ({}), {})
@@ -53,7 +55,7 @@ export function useSharedState<Data>(
   }, [id, initialData])
   const sharedAttachment = useMemo(() => {
     if (id) {
-      return createSharedState(id + '-oc', { onChange })
+      return createSharedState(createReferenceKey(id, 'oc'), { onChange })
     }
   }, [id, onChange])
 
@@ -141,26 +143,27 @@ interface SharedStateInstance<Data> extends SharedStateReturn<Data> {
   hadInitialData: boolean
 }
 
-const sharedStates: Record<SharedStateId, SharedStateInstance<any>> = {}
+const sharedStates: Map<
+  SharedStateId,
+  SharedStateInstance<any>
+> = new Map()
 
 /**
  * Creates a shared state instance with the specified ID and initial data.
- * @template Data The type of data stored in the shared state.
- * @param id The ID of the shared state.
- * @param initialData The initial data for the shared state.
- * @returns The created shared state instance.
  */
 export function createSharedState<Data>(
+  /** The identifier for the shared state. */
   id: SharedStateId,
+  /** The initial data for the shared state. */
   initialData?: Data
 ): SharedStateInstance<Data> {
-  if (!sharedStates[id]) {
+  if (!sharedStates.get(id)) {
     let subscribers: Subscriber[] = []
 
-    const get = () => sharedStates[id].data
+    const get = () => sharedStates.get(id).data
 
     const set = (newData: Partial<Data>) => {
-      sharedStates[id].data = { ...newData }
+      sharedStates.get(id).data = { ...newData }
     }
 
     const update = (newData: Partial<Data>) => {
@@ -169,7 +172,10 @@ export function createSharedState<Data>(
     }
 
     const extend = (newData: Data) => {
-      sharedStates[id].data = { ...sharedStates[id].data, ...newData }
+      sharedStates.get(id).data = {
+        ...sharedStates.get(id).data,
+        ...newData,
+      }
       sync()
     }
 
@@ -187,7 +193,7 @@ export function createSharedState<Data>(
       subscribers.forEach((subscriber) => subscriber())
     }
 
-    sharedStates[id] = {
+    sharedStates.set(id, {
       data: undefined,
       get,
       set,
@@ -196,17 +202,36 @@ export function createSharedState<Data>(
       subscribe,
       unsubscribe,
       hadInitialData: Boolean(initialData),
-    } as SharedStateInstance<Data>
+    } as SharedStateInstance<Data>)
 
     if (initialData) {
       extend(initialData)
     }
   } else if (
-    sharedStates[id].data === undefined &&
+    sharedStates.get(id).data === undefined &&
     initialData !== undefined
   ) {
-    sharedStates[id].data = { ...initialData }
+    sharedStates.get(id).data = { ...initialData }
+  }
+
+  return sharedStates.get(id)
+}
+
+/**
+ * Creates a reference key for the shared state.
+ * You can pass any JavaScript instance as the reference.
+ */
+export function createReferenceKey(ref1, ref2) {
+  if (!cache.has(ref1)) {
+    cache.set(ref1, new Map())
+  }
+
+  const innerMap = cache.get(ref1)
+
+  if (!innerMap.has(ref2)) {
+    innerMap.set(ref2, {})
   }
 
-  return sharedStates[id]
+  return innerMap.get(ref2)
 }
+const cache = new Map()
diff --git a/packages/dnb-eufemia/src/style/themes/theme-sbanken/sbanken-theme-forms.scss b/packages/dnb-eufemia/src/style/themes/theme-sbanken/sbanken-theme-forms.scss
index e41a420d08e..326e15d8a38 100644
--- a/packages/dnb-eufemia/src/style/themes/theme-sbanken/sbanken-theme-forms.scss
+++ b/packages/dnb-eufemia/src/style/themes/theme-sbanken/sbanken-theme-forms.scss
@@ -17,3 +17,4 @@ $THEME_FALLBACK: 'ui';
 @import '../../../extensions/forms/Field/Number/style/themes/dnb-number-theme-sbanken.scss';
 @import '../../../extensions/forms/FieldBlock/style/themes/dnb-field-block-theme-sbanken.scss';
 @import '../../../extensions/forms/Wizard/style/themes/dnb-wizard-layout-theme-sbanken.scss';
+@import '../../../extensions/forms/Form/Section/style/themes/dnb-section-theme-sbanken.scss';
diff --git a/packages/dnb-eufemia/src/style/themes/theme-ui/ui-theme-forms.scss b/packages/dnb-eufemia/src/style/themes/theme-ui/ui-theme-forms.scss
index f88b254164d..7215604584f 100644
--- a/packages/dnb-eufemia/src/style/themes/theme-ui/ui-theme-forms.scss
+++ b/packages/dnb-eufemia/src/style/themes/theme-ui/ui-theme-forms.scss
@@ -17,3 +17,4 @@ $THEME_FALLBACK: 'ui';
 @import '../../../extensions/forms/Field/Number/style/themes/dnb-number-theme-ui.scss';
 @import '../../../extensions/forms/FieldBlock/style/themes/dnb-field-block-theme-ui.scss';
 @import '../../../extensions/forms/Wizard/style/themes/dnb-wizard-layout-theme-ui.scss';
+@import '../../../extensions/forms/Form/Section/style/themes/dnb-section-theme-ui.scss';