diff --git a/projects/common/interfaces/elements.ts b/projects/common/interfaces/elements.ts
index 22f9770f8abdc3e7b6a8db012d74eb92eb17487d..6622402bc6b9013871f8e040df141b34e0ba537f 100644
--- a/projects/common/interfaces/elements.ts
+++ b/projects/common/interfaces/elements.ts
@@ -1,7 +1,6 @@
 import { ClozeDocument } from 'common/ui-elements/cloze/cloze';
-import { BasicStyles, PlayerProperties, PositionProperties } from 'common/classes/element';
+import { BasicStyles, InputElementValue, PlayerProperties, PositionProperties } from 'common/classes/element';
 
-export type InputElementValue = string[] | string | number | boolean | DragNDropValueObject[] | null;
 export type UIElementType = 'text' | 'button' | 'text-field' | 'text-field-simple' | 'text-area' | 'checkbox'
 | 'dropdown' | 'radio' | 'image' | 'audio' | 'video' | 'likert' | 'likert-row' | 'radio-group-images'
 | 'drop-list' | 'drop-list-simple' | 'cloze' | 'spell-correct' | 'slider' | 'frame' | 'toggle-button';
diff --git a/projects/player/modules/verona/models/verona.ts b/projects/player/modules/verona/models/verona.ts
index a6fc2a80c5e622be4687ac30b1aa231318a6d3e9..6fef083066ada7d4a0816dc1d2ae41945cf3b8a1 100644
--- a/projects/player/modules/verona/models/verona.ts
+++ b/projects/player/modules/verona/models/verona.ts
@@ -1,4 +1,4 @@
-import { InputElementValue } from 'common/interfaces/elements';
+import { InputElementValue } from 'common/classes/element';
 
 export type NavigationTarget = 'first' | 'last' | 'previous' | 'next' | 'end';
 export type RunningState = 'running' | 'stopped';
diff --git a/projects/player/src/app/components/element-compound-group/element-compound-group.component.ts b/projects/player/src/app/components/element-compound-group/element-compound-group.component.ts
index f018a2a3f46be07ecccfc2cc532d629c4d8808a2..099434b8f347c91dfc7a8f0f24913fee09ba9008 100644
--- a/projects/player/src/app/components/element-compound-group/element-compound-group.component.ts
+++ b/projects/player/src/app/components/element-compound-group/element-compound-group.component.ts
@@ -13,7 +13,9 @@ import { ElementFormGroupDirective } from '../../directives/element-form-group.d
 import { KeyboardService } from '../../services/keyboard.service';
 import { DeviceService } from '../../services/device.service';
 import { TextFieldSimpleComponent } from 'common/ui-elements/cloze/text-field-simple.component';
-import { ClozeElement, InputElement, LikertElement } from 'common/classes/element';
+import { ClozeElement } from 'common/ui-elements/cloze/cloze';
+import { LikertElement } from 'common/ui-elements/likert/likert';
+import { InputElement } from 'common/classes/element';
 
 @Component({
   selector: 'aspect-element-compound-group',
diff --git a/projects/player/src/app/components/element-input-group/element-input-group.component.ts b/projects/player/src/app/components/element-input-group/element-input-group.component.ts
index c6b2de76ab94ef6d45972b5d867c0c911e6b8e7b..40f08c239ad74bc57446bede6ba74f737cdda8c0 100644
--- a/projects/player/src/app/components/element-input-group/element-input-group.component.ts
+++ b/projects/player/src/app/components/element-input-group/element-input-group.component.ts
@@ -9,15 +9,13 @@ import { MessageService } from 'common/services/message.service';
 import { VeronaSubscriptionService } from 'verona/services/verona-subscription.service';
 import { ElementComponent } from 'common/directives/element-component.directive';
 import { ValidationService } from '../../services/validation.service';
-import {
-  CheckboxElement,
-  DropdownElement,
-  DropListElement,
-  InputElement,
-  RadioButtonGroupComplexElement,
-  RadioButtonGroupElement,
-  SliderElement
-} from 'common/classes/element';
+import { CheckboxElement } from 'common/ui-elements/checkbox/checkbox';
+import { SliderElement } from 'common/ui-elements/slider/slider';
+import { DropListElement } from 'common/ui-elements/drop-list/drop-list';
+import { RadioButtonGroupElement } from 'common/ui-elements/radio/radio-button-group';
+import { RadioButtonGroupComplexElement } from 'common/ui-elements/radio-complex/radio-button-group-complex';
+import { DropdownElement } from 'common/ui-elements/dropdown/dropdown';
+import { InputElement } from 'common/classes/element';
 
 @Component({
   selector: 'aspect-element-input-group',
diff --git a/projects/player/src/app/components/element-interactive-group/element-interactive-group.component.ts b/projects/player/src/app/components/element-interactive-group/element-interactive-group.component.ts
index 7c4758bdbc1f8cf78f73871daf591054db581d4c..ea517a7944fdcc61a646a71f6db83ec66b5bc4c7 100644
--- a/projects/player/src/app/components/element-interactive-group/element-interactive-group.component.ts
+++ b/projects/player/src/app/components/element-interactive-group/element-interactive-group.component.ts
@@ -7,7 +7,10 @@ import { ElementGroupDirective } from '../../directives/element-group.directive'
 import { ElementComponent } from 'common/directives/element-component.directive';
 import { NavigationService } from '../../services/navigation.service';
 import { ElementModelElementCodeMappingService } from '../../services/element-model-element-code-mapping.service';
-import { ButtonElement, FrameElement, ImageElement, InputElementValue } from 'common/classes/element';
+import { ButtonElement } from 'common/ui-elements/button/button';
+import { FrameElement } from 'common/ui-elements/frame/frame';
+import { ImageElement } from 'common/ui-elements/image/image';
+import { InputElementValue } from 'common/classes/element';
 
 @Component({
   selector: 'aspect-element-interactive-group',
diff --git a/projects/player/src/app/components/element-media-player-group/element-media-player-group.component.ts b/projects/player/src/app/components/element-media-player-group/element-media-player-group.component.ts
index cddc0a2c4858ed9b6708ec32713c66a507dd1fdd..1c9040ab6a261675157c5b8e98dd1a0f979be695 100644
--- a/projects/player/src/app/components/element-media-player-group/element-media-player-group.component.ts
+++ b/projects/player/src/app/components/element-media-player-group/element-media-player-group.component.ts
@@ -6,7 +6,9 @@ import { UnitStateService } from '../../services/unit-state.service';
 import { MediaPlayerElementComponent } from 'common/directives/media-player-element-component.directive';
 import { ElementGroupDirective } from '../../directives/element-group.directive';
 import { ElementModelElementCodeMappingService } from '../../services/element-model-element-code-mapping.service';
-import { AudioElement, UIElement, VideoElement } from 'common/classes/element';
+import { AudioElement } from 'common/ui-elements/audio/audio';
+import { VideoElement } from 'common/ui-elements/video/video';
+import { UIElement } from 'common/classes/element';
 
 @Component({
   selector: 'aspect-element-media-player-group',
diff --git a/projects/player/src/app/components/element-text-group/element-text-group.component.ts b/projects/player/src/app/components/element-text-group/element-text-group.component.ts
index f4717d26f87be746f18ce9a7d256cacd5232d032..3e853e52637fdd94c4032f06698ab61c2ae62f30 100644
--- a/projects/player/src/app/components/element-text-group/element-text-group.component.ts
+++ b/projects/player/src/app/components/element-text-group/element-text-group.component.ts
@@ -10,7 +10,7 @@ import { UnitStateService } from '../../services/unit-state.service';
 import { ElementGroupDirective } from '../../directives/element-group.directive';
 import { ElementModelElementCodeMappingService } from '../../services/element-model-element-code-mapping.service';
 import { ElementComponent } from 'common/directives/element-component.directive';
-import { TextElement } from 'common/classes/element';
+import { TextElement } from 'common/ui-elements/text/text';
 
 @Component({
   selector: 'aspect-element-text-group',
diff --git a/projects/player/src/app/components/element-text-input-group/element-text-input-group.component.ts b/projects/player/src/app/components/element-text-input-group/element-text-input-group.component.ts
index 5f4bd6b4531dcacd9546ef8d8228dd6d52ec8f92..0ac3ce94e28ebc40c924ce4f4a139a696c91f591 100644
--- a/projects/player/src/app/components/element-text-input-group/element-text-input-group.component.ts
+++ b/projects/player/src/app/components/element-text-input-group/element-text-input-group.component.ts
@@ -15,7 +15,10 @@ import { TextFieldComponent } from 'common/ui-elements/text-field/text-field.com
 import { KeyboardService } from '../../services/keyboard.service';
 import { SpellCorrectComponent } from 'common/ui-elements/spell-correct/spell-correct.component';
 import { DeviceService } from '../../services/device.service';
-import { InputElement, SpellCorrectElement, TextAreaElement, TextFieldElement } from 'common/classes/element';
+import { TextAreaElement } from 'common/ui-elements/text-area/text-area';
+import { TextFieldElement } from 'common/ui-elements/text-field/text-field';
+import { SpellCorrectElement } from 'common/ui-elements/spell-correct/spell-correct';
+import { InputElement } from 'common/classes/element';
 
 @Component({
   selector: 'aspect-element-text-input-group',
diff --git a/projects/player/src/app/components/floating-marking-bar/floating-marking-bar.component.ts b/projects/player/src/app/components/floating-marking-bar/floating-marking-bar.component.ts
index ee0029e09858a70bb2b3a0d24b3a85aad24c64c2..eafabcc188f4c769e2d7b6a8cc2d100d3724b62d 100644
--- a/projects/player/src/app/components/floating-marking-bar/floating-marking-bar.component.ts
+++ b/projects/player/src/app/components/floating-marking-bar/floating-marking-bar.component.ts
@@ -4,7 +4,7 @@ import {
 import { ConnectedPosition } from '@angular/cdk/overlay';
 import { ElementComponent } from 'common/directives/element-component.directive';
 import { TextComponent } from 'common/ui-elements/text/text.component';
-import { TextElement } from 'common/classes/element';
+import { TextElement } from 'common/ui-elements/text/text';
 
 @Component({
   selector: 'aspect-floating-marking-bar',
diff --git a/projects/player/src/app/directives/element-form-group.directive.ts b/projects/player/src/app/directives/element-form-group.directive.ts
index 342c185923f86b3a20a21b622d0df1bd9ea1aa9d..da05ec3854db49331324aa946d5e54275484815d 100644
--- a/projects/player/src/app/directives/element-form-group.directive.ts
+++ b/projects/player/src/app/directives/element-form-group.directive.ts
@@ -13,7 +13,8 @@ import { MessageService } from 'common/services/message.service';
 import { VeronaSubscriptionService } from 'verona/services/verona-subscription.service';
 import { ValidationService } from '../services/validation.service';
 import { LogService } from 'logging/services/log.service';
-import { InputElement, InputElementValue, SliderElement } from 'common/classes/element';
+import { InputElement, InputElementValue } from 'common/classes/element';
+import { SliderElement } from 'common/ui-elements/slider/slider';
 
 @Directive()
 export abstract class ElementFormGroupDirective extends ElementGroupDirective implements OnDestroy {
diff --git a/projects/player/src/app/services/element-model-element-code-mapping.service.ts b/projects/player/src/app/services/element-model-element-code-mapping.service.ts
index 705fe190eae170693ec400d2166af4cd56e38f7a..1b8ce1578f1dafd68b8a2e45fea7cb1591057747 100644
--- a/projects/player/src/app/services/element-model-element-code-mapping.service.ts
+++ b/projects/player/src/app/services/element-model-element-code-mapping.service.ts
@@ -1,14 +1,11 @@
 import { Injectable } from '@angular/core';
 import { TextMarkingService } from './text-marking.service';
 import { DragNDropValueObject, UIElementType } from 'common/interfaces/elements';
-import {
-  AudioElement,
-  ImageElement,
-  InputElement,
-  InputElementValue,
-  TextElement, UIElement,
-  VideoElement
-} from 'common/classes/element';
+import { InputElement, InputElementValue, UIElement } from 'common/classes/element';
+import { TextElement } from 'common/ui-elements/text/text';
+import { AudioElement } from 'common/ui-elements/audio/audio';
+import { VideoElement } from 'common/ui-elements/video/video';
+import { ImageElement } from 'common/ui-elements/image/image';
 
 @Injectable({
   providedIn: 'root'
diff --git a/projects/player/src/app/services/unit-state.service.ts b/projects/player/src/app/services/unit-state.service.ts
index b6dc3869b522914da36afd3ee6f8b3c4ddc1e285..98d652ff4a7107cbe245df8c84187a16b4354179 100644
--- a/projects/player/src/app/services/unit-state.service.ts
+++ b/projects/player/src/app/services/unit-state.service.ts
@@ -9,8 +9,9 @@ import {
   ElementCodeStatusValue
 } from 'verona/models/verona';
 import { IntersectionDetector } from '../classes/intersection-detector';
-import { InputElementValue, ValueChangeElement } from 'common/interfaces/elements';
 import { LogService } from 'logging/services/log.service';
+import { InputElementValue } from 'common/classes/element';
+import { ValueChangeElement } from 'common/interfaces/elements';
 
 @Injectable({
   providedIn: 'root'