diff --git a/src/components/BaseQuestionnaireResponseForm/widgets/Group/Wizzard.stories.tsx b/src/components/BaseQuestionnaireResponseForm/widgets/Group/Wizzard.stories.tsx
new file mode 100644
index 00000000..a563c76d
--- /dev/null
+++ b/src/components/BaseQuestionnaireResponseForm/widgets/Group/Wizzard.stories.tsx
@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { WithQuestionFormProviderDecorator, withColorSchemeDecorator } from 'src/storybook/decorators';
+
+import { Wizzard } from './Wizzard';
+import { QuestionnaireItem } from 'shared/src/contrib/aidbox';
+import { ItemContext, QuestionnaireResponseFormProvider } from 'sdc-qrf';
+
+import { QuestionString } from '../string';
+
+const meta: Meta<typeof Wizzard> = {
+    title: 'Questionnaire / questions / wizzard',
+    component: Wizzard,
+    decorators: [withColorSchemeDecorator, WithQuestionFormProviderDecorator],
+};
+
+export default meta;
+type Story = StoryObj<typeof Wizzard>;
+
+const questionItem: QuestionnaireItem = {
+    text: 'Wizzard Title',
+    type: 'group',
+    linkId: 'example',
+    required: true,
+    item: [
+        {
+            type: 'group',
+            linkId: 'step-1',
+            text: 'Step 1',
+            item: [{ type: 'string', linkId: 'step-1-1', text: "First name" }]
+        },
+        {
+            type: 'group',
+            linkId: 'step-2',
+            text: 'Step 2',
+            item: [{ type: 'string', linkId: 'step-2-1', text: "Last name" }]
+        },
+        {
+            type: 'group',
+            linkId: 'step-3',
+            text: 'Step 3',
+            item: [{ type: 'string', linkId: 'step-3-1', text: "Middle name" }]
+        }
+    ]
+};
+
+const context: ItemContext = {
+    resource: {resourceType: "QuestionnaireResponse", status: 'draft', item: [{linkId: 'example'}]},
+    questionnaire: {resourceType: "Questionnaire", status: 'active', item: [questionItem]},
+    context: {linkId: 'example'}
+};
+
+const groupItem = {
+    parentPath: [],
+    questionItem,
+    context: [context]
+}
+
+
+export const Example: Story = {
+    render: () => (
+        <QuestionnaireResponseFormProvider
+            formValues={{}}
+            setFormValues={() => {}}
+            questionItemComponents={{ string: QuestionString }}
+        >
+            <Wizzard groupItem={groupItem} />
+        </QuestionnaireResponseFormProvider>
+    ),
+};
diff --git a/src/components/BaseQuestionnaireResponseForm/widgets/Group/Wizzard/index.tsx b/src/components/BaseQuestionnaireResponseForm/widgets/Group/Wizzard/index.tsx
new file mode 100644
index 00000000..40fbc6e8
--- /dev/null
+++ b/src/components/BaseQuestionnaireResponseForm/widgets/Group/Wizzard/index.tsx
@@ -0,0 +1,35 @@
+import { GroupItemProps, QuestionItems } from 'sdc-qrf';
+import { Button, StepProps, Steps } from 'antd';
+import { useState } from 'react';
+
+interface Props {
+    groupItem: GroupItemProps;
+}
+
+export function Wizzard({ groupItem }: Props) {
+    const { parentPath, questionItem, context } = groupItem;
+    const [current, setCurrent] = useState(0);
+    const { item = [], text, linkId } = questionItem;
+    const stepsItems: StepProps[] = item.map(i => ({
+        title: i.text!,
+    }));
+    const currentItem  = item[current];
+
+    return (
+        <div>
+            <h3>{text}</h3>
+            <Button onClick={() => setCurrent(c => c - 1)}>Prev</Button>
+            <Button onClick={() => setCurrent(c => c + 1)}>Next</Button>
+            <Steps items={stepsItems} current={current} />
+            {currentItem ?
+                <QuestionItems
+                    questionItems={currentItem.item!}
+                    parentPath={[...parentPath, linkId, 'items', currentItem.linkId, 'items']}
+                    context={context[0]!}
+                /> : null}
+
+
+        </div>
+    );
+}
+