diff --git a/package.json b/package.json
index b602f56..a50c9e0 100644
--- a/package.json
+++ b/package.json
@@ -58,9 +58,9 @@
         "@mdi/font": "^7.4.47",
         "@netgrif/components": "7.0.0-beta.1",
         "@netgrif/components-core": "7.0.0-beta.1",
-        "@netgrif/petri.svg": "1.1.0",
+        "@netgrif/petri.svg": "1.1.1",
         "@netgrif/petriflow": "2.2.0",
-        "@netgrif/petriflow.svg": "1.1.0",
+        "@netgrif/petriflow.svg": "1.1.1",
         "@ngbracket/ngx-layout": "^17.0.1",
         "@ngx-translate/core": "~15.0.0",
         "@ngx-translate/http-loader": "~8.0.0",
diff --git a/src/app/form-builder/edit-panel/edit-panel.component.html b/src/app/form-builder/edit-panel/edit-panel.component.html
index c589897..aed7533 100644
--- a/src/app/form-builder/edit-panel/edit-panel.component.html
+++ b/src/app/form-builder/edit-panel/edit-panel.component.html
@@ -151,20 +151,9 @@ <h4 class="full-width margin-html">
                                          class="full-width">
                 </ngx-mat-datetime-picker>
             </mat-form-field>
-            <mat-form-field *ngIf="isTaskRef()" class="full-width margin-html">
-                <mat-label>Initial value</mat-label>
-                <input type="text"
-                       aria-label="Autocomplete"
-                       matInput
-                       [formControl]="formControlRef"
-                       [matAutocomplete]="auto">
-                <mat-autocomplete [displayWith]="renderSelection" autoActiveFirstOption #auto="matAutocomplete">
-                    <mat-option *ngFor="let option of filteredOptions | async" [value]="option.key"
-                                (click)="selectAuto(option.key);notifyGridster()" [disabled]="isDisabled(option.key)">
-                        {{ taskRefTitle(option) }}
-                    </mat-option>
-                </mat-autocomplete>
-            </mat-form-field>
+            <div class="margin-html" *ngIf="isTaskRef()">
+                <nab-task-ref-init-field [taskRef]="dataVariable"></nab-task-ref-init-field>
+            </div>
             <!--  OPTIONS MANAGEMENT IF APPLICABLE  -->
             <div *ngIf="hasOptions()">
                 <mat-divider></mat-divider>
diff --git a/src/app/form-builder/form-builder.component.html b/src/app/form-builder/form-builder.component.html
index 3dcdf51..3b363b3 100644
--- a/src/app/form-builder/form-builder.component.html
+++ b/src/app/form-builder/form-builder.component.html
@@ -11,6 +11,7 @@
              [style.width.px]="width"
              fixedInViewport=true
              disableClose="true"
+             style="max-width: 450px;"
              class="app-mat-sidenav-right" mode="side" position="end" opened>
     <div fxLayout="row">
         <div class="handle" mwlResizeHandle [resizeEdges]="{ left: true }"></div>
diff --git a/src/app/form-builder/form-builder.module.ts b/src/app/form-builder/form-builder.module.ts
index 0454779..aafd202 100644
--- a/src/app/form-builder/form-builder.module.ts
+++ b/src/app/form-builder/form-builder.module.ts
@@ -15,6 +15,7 @@ import {InfoLabelComponent} from './info-label/info-label.component';
 import {DataFieldsComponentModule} from '@netgrif/components';
 import {FlexLayoutModule} from '@ngbracket/ngx-layout';
 import {ResizableModule} from 'angular-resizable-element';
+import {ModelerModule} from '../modeler/modeler.module';
 
 @NgModule({
     declarations: [
@@ -39,7 +40,8 @@ import {ResizableModule} from 'angular-resizable-element';
         HttpClientModule,
         MaterialImportModule,
         ReactiveFormsModule,
-        ResizableModule
+        ResizableModule,
+        ModelerModule
     ]
 })
 export class FormBuilderModule {
diff --git a/src/app/modeler/data-mode/data-detail/data-detail.component.html b/src/app/modeler/data-mode/data-detail/data-detail.component.html
index faffabd..fcbb243 100644
--- a/src/app/modeler/data-mode/data-detail/data-detail.component.html
+++ b/src/app/modeler/data-mode/data-detail/data-detail.component.html
@@ -142,45 +142,93 @@
 
         <div fxFlex="2.5"></div>
 
-        <mat-form-field fxFlex="45" *ngIf="!isOptionField() && item.type !== 'taskRef'">
+        <mat-form-field fxFlex="45" *ngIf="isItemInitDynamic();else static_init">
             <mat-label>Initial value</mat-label>
-            <input matInput [ngModel]="item?.init?.value"
-                   (change)="setValue($event, 'init')">
-        </mat-form-field>
-
-        <mat-form-field fxFlex="45" *ngIf="isOptionField()" class="full-width">
-            <mat-label>Initial value</mat-label>
-            <mat-select *ngIf="!hasInits(); else hasInitsItems" [(ngModel)]="item.init.value">
-                <mat-option>None</mat-option>
-                <mat-option *ngFor="let opt of item.options" [value]="opt.key">
-                    {{ opt.value?.value }}
-                </mat-option>
-            </mat-select>
-            <ng-template #hasInitsItems>
-                <mat-select (valueChange)="changeInitsValue($event)"
-                            [value]="getInitsValue()" multiple>
-                    <mat-option *ngFor="let opt of item.options" [value]="opt.key">
-                        {{ opt.value?.value }}
-                    </mat-option>
-                </mat-select>
-            </ng-template>
-        </mat-form-field>
-
-        <mat-form-field fxFlex="45" *ngIf="item.type === 'taskRef'">
-            <mat-label>Initial value</mat-label>
-            <input type="text"
-                   aria-label="Autocomplete"
-                   matInput
-                   [formControl]="formControlRef">
-            <!--                           [matAutocomplete]="auto">-->
-            <!--                    <mat-autocomplete [displayWith]="renderSelection" autoActiveFirstOption #auto="matAutocomplete">-->
-            <!--                        <mat-option *ngFor="let option of filteredOptions | async" [value]="option.key"-->
-            <!--                                    (click)="clickOption(item, option.key)" [disabled]="isDisabled(option.key)">-->
-            <!--                            {{option.key}} - {{option.value}}-->
-            <!--                        </mat-option>-->
-            <!--                    </mat-autocomplete>-->
+            <input matInput [ngModel]="item?.init?.value" (change)="setValue($event, 'init')">
         </mat-form-field>
 
+        <ng-template #static_init>
+            @switch (item.type) {
+                @case (DataType.BOOLEAN) {
+                    <div fxFlex="45" class="full-width">
+                        <span>Initial value </span>
+                        <mat-slide-toggle [checked]="item.init.value === 'true'" (change)="setBooleanValue($event)">
+                            {{item.init.value}}
+                        </mat-slide-toggle>
+                    </div>
+                }
+                @case (DataType.NUMBER) {
+                    <mat-form-field fxFlex="45" class="full-width">
+                        <mat-label>Initial value</mat-label>
+                        <input matInput type="number" [(ngModel)]="item.init.value" (change)="setNumberValue($event)">
+                    </mat-form-field>
+                }
+                @case (DataType.DATE) {
+                    <mat-form-field fxFlex="45" class="full-width">
+                        <mat-label>Initial value</mat-label>
+                        <mat-datepicker-toggle matPrefix [for]="datepicker"></mat-datepicker-toggle>
+                        <input matInput (dateChange)="formatDate($event);"
+                               [matDatepicker]="datepicker"
+                               [(ngModel)]="item.init.value"
+                               (click)="datepicker.open()"
+                               (keydown.enter)="datepicker.close()">
+                        <mat-datepicker #datepicker>
+                        </mat-datepicker>
+                    </mat-form-field>
+                }
+                @case (DataType.DATETIME) {
+                    <mat-form-field fxFlex="45" class="full-width">
+                        <mat-label>Initial value</mat-label>
+                        <input matInput
+                               [ngxMatDatetimePicker]="picker"
+                               [(ngModel)]="item.init.value"
+                               (dateChange)="formatDateTime($event)">
+                        <mat-datepicker-toggle matPrefix [for]="picker"></mat-datepicker-toggle>
+                        <ngx-mat-datetime-picker #picker
+                                                 [showSpinners]="true"
+                                                 [showSeconds]="false"
+                                                 [stepHour]="1"
+                                                 [stepMinute]="5"
+                                                 [color]="'primary'"
+                                                 [enableMeridian]="false"
+                                                 class="full-width">
+                        </ngx-mat-datetime-picker>
+                    </mat-form-field>
+                }
+                @case (DataType.TASK_REF) {
+                    <nab-task-ref-init-field [taskRef]="item" fxFlex="45" class="full-width"></nab-task-ref-init-field>
+                }
+                @case ((item.type === DataType.ENUMERATION || item.type === DataType.ENUMERATION_MAP) ? item.type : '') {
+                    <mat-form-field fxFlex="45" class="full-width">
+                        <mat-label>Initial value</mat-label>
+                        <mat-select [(ngModel)]="item.init.value">
+                            <mat-option>None</mat-option>
+                            <mat-option *ngFor="let opt of item.options" [value]="opt.key">
+                                {{ opt.value?.value }}
+                            </mat-option>
+                        </mat-select>
+                    </mat-form-field>
+                }
+                @case ((item.type === DataType.MULTICHOICE || item.type === DataType.MULTICHOICE_MAP) ? item.type : '') {
+                    <mat-form-field fxFlex="45" class="full-width">
+                        <mat-label>Initial value</mat-label>
+                        <mat-select (valueChange)="changeInitsValue($event)"
+                                    [value]="getInitsValue()" multiple>
+                            <mat-option *ngFor="let opt of item.options" [value]="opt.key">
+                                {{ opt.value?.value }}
+                            </mat-option>
+                        </mat-select>
+                    </mat-form-field>
+                }
+                @default {
+                    <mat-form-field fxFlex="45">
+                        <mat-label>Initial value</mat-label>
+                        <input matInput [ngModel]="item?.init?.value"
+                               (change)="setValue($event, 'init')">
+                    </mat-form-field>
+                }
+            }
+        </ng-template>
 
         <div fxFlex="2.5"></div>
 
@@ -310,21 +358,12 @@
 
         <div fxFlex="20">Options Init</div>
 
-        <mat-form-field fxFlex="25">
+        <mat-form-field fxFlex="75">
             <input matInput [ngModel]="getItemOptionsInitExpression()"
                    (change)="setValue($event,'options-init')">
         </mat-form-field>
 
         <div fxFlex="2.5"></div>
-
-        <div fxFlex="20">Is Options Init dynamic?</div>
-
-        <mat-form-field fxFlex="25">
-            <input matInput [ngModel]="getItemOptionsInitDynamic()"
-                   (change)="setValue($event,'options-init-dynamic')">
-        </mat-form-field>
-
-        <div fxFlex="2.5"></div>
     </div>
 
     <div fxLayout="row wrap" fxLayoutAlign="start center">
diff --git a/src/app/modeler/data-mode/data-detail/data-detail.component.ts b/src/app/modeler/data-mode/data-detail/data-detail.component.ts
index 792aaa3..42aa612 100644
--- a/src/app/modeler/data-mode/data-detail/data-detail.component.ts
+++ b/src/app/modeler/data-mode/data-detail/data-detail.component.ts
@@ -1,9 +1,11 @@
-import {Component, OnDestroy} from '@angular/core';
+import {Component, ElementRef, OnDestroy, ViewChild} from '@angular/core';
 import {DataMasterDetailService} from '../data-master-detail.service';
 import {
     Component as PetriflowComponent,
     DataType,
-    DataVariable, Expression, I18nString,
+    DataVariable,
+    Expression,
+    I18nString,
     I18nWithDynamic,
     Option,
     Property,
@@ -23,6 +25,8 @@ import {HistoryService} from '../../services/history/history.service';
 import {Observable} from 'rxjs';
 import {map, startWith, tap} from 'rxjs/operators';
 import {ModelerUtils} from '../../modeler-utils';
+import {MatAutocompleteSelectedEvent} from '@angular/material/autocomplete';
+import {MatChipInputEvent} from '@angular/material/chips';
 
 export interface TypeArray {
     viewValue: string;
@@ -174,21 +178,14 @@ export class DataDetailComponent implements OnDestroy {
                 this.item.placeholder.value = $event.target.value;
                 break;
             }
-            case 'init': {
-                const value = $event.target.value;
-                if (this.item.init === undefined) {
-                    this.item.init = new I18nWithDynamic(value);
-                } else {
-                    this.item.init.value = value;
-                }
-                break;
-            }
             case 'dynamic-init': {
                 const value = $event.source.checked;
                 if (this.item.init === undefined) {
-                    this.item.init = new I18nWithDynamic(value);
-                } else {
-                    this.item.init.dynamic = value;
+                    this.item.init = new I18nWithDynamic('');
+                }
+                this.item.init.dynamic = value;
+                if (value === true) {
+                    this.item.inits = new Array<I18nWithDynamic>();
                 }
                 break;
             }
@@ -231,6 +228,31 @@ export class DataDetailComponent implements OnDestroy {
         this.historyDataSave.save = true;
     }
 
+    setBooleanValue(event) {
+        this.item.init.value = event.checked.toString();
+    }
+
+    setNumberValue(event) {
+        this.item.init.value = event.target.value.toString();
+    }
+
+    formatDate(event) {
+        // TODO: NAB-326 better solution? date picker setting to store only date?
+        if (event.target.value) {
+            this.item.init.value = event.target.value.toISOString();
+        } else {
+            this.item.init.value = '';
+        }
+    }
+
+    formatDateTime(event) {
+        if (event.target.value) {
+            this.item.init.value = event.target.value.toISOString();
+        } else {
+            this.item.init.value = '';
+        }
+    }
+
     removeSpecificAttributeOnChange() {
         this.item.inits = [];
         this.item.init.value = '';
@@ -364,4 +386,8 @@ export class DataDetailComponent implements OnDestroy {
     trackByFn(index: any, item: any) {
         return index;
     }
+
+    protected readonly DataType = DataType;
+    protected readonly Boolean = Boolean;
+    protected readonly DataFieldUtils = DataFieldUtils;
 }
diff --git a/src/app/modeler/data-mode/task-ref-init-field/task-ref-init-field.component.html b/src/app/modeler/data-mode/task-ref-init-field/task-ref-init-field.component.html
new file mode 100644
index 0000000..72185ff
--- /dev/null
+++ b/src/app/modeler/data-mode/task-ref-init-field/task-ref-init-field.component.html
@@ -0,0 +1,26 @@
+<mat-form-field class="full-width">
+    <mat-label>Initial value</mat-label>
+    <mat-chip-grid #chipGrid>
+        @for (init of taskRef.inits; track $index) {
+            <mat-chip-row (removed)="removeInit($index)">
+                {{ prettyTask(init?.value) }}
+                <button matChipRemove>
+                    <mat-icon>cancel</mat-icon>
+                </button>
+            </mat-chip-row>
+        }
+    </mat-chip-grid>
+    <input
+        #taskRefInput
+        name="Inits"
+        [formControl]="taskRefFormControl"
+        [matChipInputFor]="chipGrid"
+        [matAutocomplete]="auto"
+        (matChipInputTokenEnd)="addInit($event)"
+    />
+    <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selectInit($event)">
+        @for (task of tasks; track task) {
+            <mat-option [value]="task.id" [disabled]="isReferenced(task)">{{ task.label?.value }} [{{ task.id }}]</mat-option>
+        }
+    </mat-autocomplete>
+</mat-form-field>
diff --git a/src/app/modeler/data-mode/task-ref-init-field/task-ref-init-field.component.scss b/src/app/modeler/data-mode/task-ref-init-field/task-ref-init-field.component.scss
new file mode 100644
index 0000000..07b4686
--- /dev/null
+++ b/src/app/modeler/data-mode/task-ref-init-field/task-ref-init-field.component.scss
@@ -0,0 +1,3 @@
+.full-width {
+    width: 100%;
+}
diff --git a/src/app/modeler/data-mode/task-ref-init-field/task-ref-init-field.component.spec.ts b/src/app/modeler/data-mode/task-ref-init-field/task-ref-init-field.component.spec.ts
new file mode 100644
index 0000000..4430f2e
--- /dev/null
+++ b/src/app/modeler/data-mode/task-ref-init-field/task-ref-init-field.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TaskRefInitFieldComponent } from './task-ref-init-field.component';
+
+describe('TaskRefInitFieldComponent', () => {
+  let component: TaskRefInitFieldComponent;
+  let fixture: ComponentFixture<TaskRefInitFieldComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TaskRefInitFieldComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(TaskRefInitFieldComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/modeler/data-mode/task-ref-init-field/task-ref-init-field.component.ts b/src/app/modeler/data-mode/task-ref-init-field/task-ref-init-field.component.ts
new file mode 100644
index 0000000..2d06c7a
--- /dev/null
+++ b/src/app/modeler/data-mode/task-ref-init-field/task-ref-init-field.component.ts
@@ -0,0 +1,75 @@
+import {Component, ElementRef, Input, ViewChild} from '@angular/core';
+import {FlexModule} from '@ngbracket/ngx-layout';
+import {MatDatepicker, MatDatepickerInput, MatDatepickerToggle} from '@angular/material/datepicker';
+import {MatFormField, MatLabel, MatPrefix} from '@angular/material/form-field';
+import {MatInput} from '@angular/material/input';
+import {FormControl, ReactiveFormsModule} from '@angular/forms';
+import {ModelService} from '../../services/model/model.service';
+import {DataVariable, I18nWithDynamic, Transition} from '@netgrif/petriflow';
+import {MatChipInputEvent} from '@angular/material/chips';
+import {MatAutocompleteSelectedEvent} from '@angular/material/autocomplete';
+
+@Component({
+  selector: 'nab-task-ref-init-field',
+  templateUrl: './task-ref-init-field.component.html',
+  styleUrl: './task-ref-init-field.component.scss'
+})
+export class TaskRefInitFieldComponent {
+
+    @Input() taskRef: DataVariable;
+    taskRefFormControl: FormControl;
+    @ViewChild('taskRefInput') taskRefInput: ElementRef<HTMLInputElement>;
+
+    constructor(private _modelService: ModelService) {
+        this.taskRefFormControl = new FormControl('');
+    }
+
+    removeInit(index: number): void {
+        if (index >= 0) {
+            this.taskRef.inits.splice(index, 1);
+        }
+    }
+
+    addInit($event: MatChipInputEvent): void {
+        this.taskRef.inits.push(new I18nWithDynamic($event.value));
+
+        $event.chipInput!.clear();
+        this.taskRefFormControl.setValue(null);
+    }
+
+    selectInit($event: MatAutocompleteSelectedEvent): void {
+        this.taskRef.inits.push(new I18nWithDynamic($event.option.value));
+        this.taskRefInput.nativeElement.value = '';
+        this.taskRefFormControl.setValue(null);
+    }
+
+    get tasks(): Transition[] {
+        return this._modelService.model.getTransitions().filter(t => {
+            return !this.taskRef.inits.some(init => init.value === t.id);
+        }).sort((t1, t2) => {
+            if (!t1.label.value && !t2.label.value) {
+                return t1.id > t2.id ? 1 : -1;
+            }
+            if (!t1.label.value) {
+                return 1;
+            }
+            if (!t2.label.value) {
+                return -1;
+            }
+            return t1.label.value.localeCompare(t2.label.value);
+        });
+    }
+
+    prettyTask(taskId: string): string {
+        const task = this._modelService.model.getTransition(taskId);
+        if (task === undefined) {
+            return taskId;
+        }
+        const taskTitle = task.label.value ? `${task.label.value} ` : '';
+        return `${taskTitle} [${taskId}]`;
+    }
+
+    isReferenced(task: Transition): boolean {
+        return task.dataGroups.some(group => !!group.getDataRef(this.taskRef.id));
+    }
+}
diff --git a/src/app/modeler/modeler.module.ts b/src/app/modeler/modeler.module.ts
index b4b1b06..2c02b5d 100644
--- a/src/app/modeler/modeler.module.ts
+++ b/src/app/modeler/modeler.module.ts
@@ -72,6 +72,7 @@ import {HistoryMasterItemComponent} from './history-mode/history-master-item/his
 import {HistoryDetailComponent} from './history-mode/history-detail/history-detail.component';
 import {MonacoEditorModule} from 'ngx-monaco-editor-v2';
 import {FileToolComponent} from './control-panel/tools/file-tool-component/file-tool.component';
+import {TaskRefInitFieldComponent} from './data-mode/task-ref-init-field/task-ref-init-field.component';
 
 @NgModule({
     declarations: [
@@ -117,11 +118,13 @@ import {FileToolComponent} from './control-panel/tools/file-tool-component/file-
         FunctionMasterItemComponent,
         ActionDetailComponent,
         HistoryMasterItemComponent,
-        HistoryDetailComponent
+        HistoryDetailComponent,
+        TaskRefInitFieldComponent
     ],
     exports: [
         ActionEditorModule,
-        TriggerTreeComponent
+        TriggerTreeComponent,
+        TaskRefInitFieldComponent
     ],
     imports: [
         ActionEditorModule,
@@ -129,7 +132,6 @@ import {FileToolComponent} from './control-panel/tools/file-tool-component/file-
         CommonModule,
         DataFieldsComponentModule,
         FlexLayoutModule,
-        FormBuilderModule,
         FormsModule,
         GridsterModule,
         JoyrideModule,