diff --git a/projects/common/components/marking-bar/marking-bar.component.ts b/projects/common/components/text-marking-bar/text-marking-bar.component.ts
similarity index 80%
rename from projects/common/components/marking-bar/marking-bar.component.ts
rename to projects/common/components/text-marking-bar/text-marking-bar.component.ts
index d264ce91609f65efe50d13d10fc7d7c4eb91c0a2..9245d57120952fe34f3f31f5a24fa067dfc1d6f1 100644
--- a/projects/common/components/marking-bar/marking-bar.component.ts
+++ b/projects/common/components/text-marking-bar/text-marking-bar.component.ts
@@ -4,38 +4,38 @@ import {
 import { TextElement } from '../../interfaces/elements';
 
 @Component({
-  selector: 'aspect-marking-bar',
+  selector: 'aspect-text-marking-bar',
   template: `
     <div class="marking-bar">
-      <aspect-marking-button *ngIf="elementModel.highlightableYellow"
+      <aspect-text-marking-button *ngIf="elementModel.highlightableYellow"
                              [color]="selectionColors.yellow"
                              [selected]="selectedColor === selectionColors.yellow"
                              mode="mark"
                              (selectedChanged)="onSelectionChange($event)">
-      </aspect-marking-button>
-      <aspect-marking-button *ngIf="elementModel.highlightableTurquoise"
+      </aspect-text-marking-button>
+      <aspect-text-marking-button *ngIf="elementModel.highlightableTurquoise"
                              [color]="selectionColors.turquoise"
                              [selected]="selectedColor === selectionColors.turquoise"
                              mode="mark"
                              (selectedChanged)="onSelectionChange($event)">
-      </aspect-marking-button>
-      <aspect-marking-button *ngIf="elementModel.highlightableOrange"
+      </aspect-text-marking-button>
+      <aspect-text-marking-button *ngIf="elementModel.highlightableOrange"
                              [color]="selectionColors.orange"
                              [selected]="selectedColor === selectionColors.orange"
                              mode="mark"
                              (selectedChanged)="onSelectionChange($event)">
-      </aspect-marking-button>
-      <aspect-marking-button [color]="selectionColors.delete"
+      </aspect-text-marking-button>
+      <aspect-text-marking-button [color]="selectionColors.delete"
                              [selected]="selectedColor === selectionColors.delete"
                              mode="delete"
                              (selectedChanged)="onSelectionChange($event)">
-      </aspect-marking-button>
+      </aspect-text-marking-button>
     </div>`,
   styles: [
     '.marking-bar {position: sticky; top: 0; margin-bottom: 13px;}'
   ]
 })
-export class MarkingBarComponent {
+export class TextMarkingBarComponent {
   @Input() elementModel!: TextElement;
   @Output() selectionChanged = new EventEmitter<{
     active: boolean,
diff --git a/projects/common/components/marking-bar/marking-button.component.ts b/projects/common/components/text-marking-bar/text-marking-button.component.ts
similarity index 93%
rename from projects/common/components/marking-bar/marking-button.component.ts
rename to projects/common/components/text-marking-bar/text-marking-button.component.ts
index 969aea651415b47fb8381b5827e71047ced6456f..30150c1020e6a31ebd820dcd99035022a21aa540 100644
--- a/projects/common/components/marking-bar/marking-button.component.ts
+++ b/projects/common/components/text-marking-bar/text-marking-button.component.ts
@@ -3,7 +3,7 @@ import {
 } from '@angular/core';
 
 @Component({
-  selector: 'aspect-marking-button',
+  selector: 'aspect-text-marking-button',
   template: `
     <button type="button"
             class="marking-button"
@@ -24,7 +24,7 @@ import {
     '.marking-icon {margin-top: -4px}'
   ]
 })
-export class MarkingButtonComponent {
+export class TextMarkingButtonComponent {
   @Input() selected!: boolean;
   @Input() color!: string;
   @Input() mode!: 'mark' | 'delete';
diff --git a/projects/common/components/ui-elements/text.component.ts b/projects/common/components/ui-elements/text.component.ts
index 422ac8e6f4c20e6d72fb19ae7669a97f5e4fa15c..facc29d7ae5b5eef2556210fd16703a5c69d423d 100644
--- a/projects/common/components/ui-elements/text.component.ts
+++ b/projects/common/components/ui-elements/text.component.ts
@@ -9,13 +9,13 @@ import { TextElement, ValueChangeElement } from '../../interfaces/elements';
   template: `
     <div [style.width.%]="100"
          [style.height.%]="100">
-        <aspect-marking-bar
+        <aspect-text-marking-bar
                 *ngIf="elementModel.highlightableYellow ||
             elementModel.highlightableTurquoise ||
             elementModel.highlightableOrange"
                 [elementModel]="elementModel"
                 (selectionChanged)="onSelectionChanged($event)">
-        </aspect-marking-bar>
+        </aspect-text-marking-bar>
         <div #textContainerRef class="text-container"
              [class.orange-selection]="selectedColor === 'orange'"
              [class.yellow-selection]="selectedColor === 'yellow'"
diff --git a/projects/common/shared.module.ts b/projects/common/shared.module.ts
index 9a62e3d6248b9ef7fdc7b06c1446c523887852d6..281bc65a1f24fad8574a91ed3e5c1a0dde4e8573 100644
--- a/projects/common/shared.module.ts
+++ b/projects/common/shared.module.ts
@@ -49,9 +49,9 @@ import { SpellCorrectComponent } from './components/ui-elements/spell-correct.co
 import { DropListSimpleComponent } from './components/ui-elements/drop-list-simple.component';
 import { FrameComponent } from './components/ui-elements/frame.component';
 import { ToggleButtonComponent } from './components/ui-elements/toggle-button.component';
-import { MarkingBarComponent } from './components/marking-bar/marking-bar.component';
+import { TextMarkingBarComponent } from './components/text-marking-bar/text-marking-bar.component';
 import { StyleMarksPipe } from './pipes/styleMarks.pipe';
-import { MarkingButtonComponent } from './components/marking-bar/marking-button.component';
+import { TextMarkingButtonComponent } from './components/text-marking-bar/text-marking-button.component';
 import { CompoundChildOverlayComponent } from './components/compound-child-overlay.component';
 import { MarkListPipe } from './pipes/mark-list.pipe';
 
@@ -103,9 +103,9 @@ import { MarkListPipe } from './pipes/mark-list.pipe';
     SpellCorrectComponent,
     FrameComponent,
     ToggleButtonComponent,
-    MarkingBarComponent,
+    TextMarkingBarComponent,
     StyleMarksPipe,
-    MarkingButtonComponent,
+    TextMarkingButtonComponent,
     CompoundChildOverlayComponent,
     MarkListPipe
   ],
@@ -124,7 +124,7 @@ import { MarkListPipe } from './pipes/mark-list.pipe';
     MatDialogModule,
     TranslateModule,
     SafeResourceHTMLPipe,
-    MarkingBarComponent,
+    TextMarkingBarComponent,
     ToggleButtonComponent,
     TextFieldComponent,
     DropListSimpleComponent,
diff --git a/projects/player/src/app/components/floating-marking-bar/floating-marking-bar.component.html b/projects/player/src/app/components/floating-marking-bar/floating-marking-bar.component.html
index 34005a08dc72957259e410a00c2c1d4d5a5f6b47..aeeac4bc1960c497ccd56aa2409f0a02cabeb6e7 100644
--- a/projects/player/src/app/components/floating-marking-bar/floating-marking-bar.component.html
+++ b/projects/player/src/app/components/floating-marking-bar/floating-marking-bar.component.html
@@ -9,9 +9,9 @@
   <div class="marking-bar-container"
        (mousedown)="$event.stopPropagation()"
        cdkDrag>
-    <aspect-marking-bar
+    <aspect-text-marking-bar
         [elementModel]="elementModel"
         (selectionChanged)="applySelection.emit($event)">
-    </aspect-marking-bar>
+    </aspect-text-marking-bar>
   </div>
 </ng-template>