diff --git a/src/components/MessageBox.vue b/src/components/MessageBox.vue
index a691d6fc..3a332096 100644
--- a/src/components/MessageBox.vue
+++ b/src/components/MessageBox.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div data-cy="message-box">
     <div class="t-flex t-items-center t-justify-center">
       <BaseIcon
         :class="`t-text-${color}`"
diff --git a/src/components/annotations/variants/VariantsList.vue b/src/components/annotations/variants/VariantsList.vue
index 28ecb486..d910b26a 100644
--- a/src/components/annotations/variants/VariantsList.vue
+++ b/src/components/annotations/variants/VariantsList.vue
@@ -18,8 +18,8 @@
   </div>
   <MessageBox
     v-else
-    :message="$t('no_annotations_in_view')"
-    :title="$t('no_annotations_available')"
+    :message="getVariantsListInfoMessage()"
+    :title="getVariantsListInfoTitle()"
     type="info"
   />
 </template>
@@ -28,13 +28,16 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import VariantItem from "@/components/annotations/variants/VariantItem.vue";
-import {useAnnotationsStore} from "@/stores/annotations";
+import { useAnnotationsStore } from "@/stores/annotations";
 import MessageBox from "@/components/MessageBox.vue";
 import * as Utils from '@/utils/annotations'
+import i18n from '@/i18n'
+import { useConfigStore } from '@/stores/config';
 
 const annotationStore = useAnnotationsStore();
+const configStore = useConfigStore()
 
-
+const lang = computed<string>(() => configStore.config.lang)
 const activeAnnotations = computed<ActiveAnnotation>(() => annotationStore.activeAnnotations);
 const visibleAnnotations = computed<Annotation[]>(() => annotationStore.visibleAnnotations);
 
@@ -63,6 +66,22 @@ function getWitnessColor(witness: string) {
   return annotationStore.variantItemsColors[witness];
 }
 
+function getVariantsListInfoMessage(): string {
+  if (annotationStore.isSingleSelectMode 
+        && annotationStore.filteredAnnotations.length > 0) {
+    return i18n[lang.value]['single_select_mode_info_message']
+  }
+  return i18n[lang.value]['no_annotations_in_view']
+}
+
+function getVariantsListInfoTitle(): string {
+  if (annotationStore.isSingleSelectMode 
+        && annotationStore.filteredAnnotations.length > 0) {
+    return i18n[lang.value]['single_select_mode']
+  }
+  return i18n[lang.value]['no_annotations_available']
+}
+ 
 
 function showLineSeparator(visibleAnnotations, i) {
   if (visibleAnnotations[i+1]) {
diff --git a/src/i18n/de/index.js b/src/i18n/de/index.js
index 8ed784dd..e622bd2b 100644
--- a/src/i18n/de/index.js
+++ b/src/i18n/de/index.js
@@ -117,5 +117,6 @@ export default {
   witnesses_details: 'Infos zu Textzeugen',
   variants_details: 'Infos zu Varianten',
   witnesses_selected: 'Textzeugen ausgewählt',
-  single_select_mode: 'Single Select Mode'
+  single_select_mode: 'Single Select Mode',
+  single_select_mode_info_message: 'Bitte wählen Sie Varianten aus dem Text.'
 };
diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index 5746e0af..f26b0049 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -123,5 +123,6 @@ export default {
   witnesses_details: 'Witnesses Details',
   variants_details: 'Variants Details',
   witnesses_selected: 'Witnesses selected',
-  single_select_mode: 'Single Select Mode'
+  single_select_mode: 'Single Select Mode',
+  single_select_mode_info_message: 'Please select variant items from the text.'
 };
diff --git a/src/utils/annotations.js b/src/utils/annotations.js
index 367e750c..26da491c 100644
--- a/src/utils/annotations.js
+++ b/src/utils/annotations.js
@@ -272,7 +272,7 @@ export function addWitness(target, witness, color) {
 
 function createWitnessesWrapper() {
   const el = document.createElement("span");
-  el.classList.add('witnesses')
+  el.classList.add('witnesses', 't-inline-flex', 't-flex-wrap')
 
   return el
 }
@@ -281,7 +281,7 @@ function createWitnessEl(witness, witnessColor) {
   // create an html element of one witness
   const el = document.createElement("span");
   el.innerHTML = witness
-  el.classList.add('t-rounded-3xl', 't-box-border', 't-h-8', 't-py-0.5', 't-px-1.5', 't-text-xs', 't-font-semibold', 't-font-sans', 't-ml-[3px]')
+  el.classList.add('t-rounded-3xl', 't-box-border', 't-py-0.5', 't-px-1.5', 't-text-xs', 't-font-semibold', 't-font-sans', 't-ml-[3px]')
   el.style.background = colors[witnessColor]['100']
   el.style.color = colors[witnessColor]['600']
 
diff --git a/tests/cypress/e2e/variants.cy.js b/tests/cypress/e2e/variants.cy.js
index 715e3c26..abe2f645 100644
--- a/tests/cypress/e2e/variants.cy.js
+++ b/tests/cypress/e2e/variants.cy.js
@@ -57,10 +57,7 @@ const selectors = {
     cy
       .get('.panels-wrapper .panel:nth-child(4) .panel-body')
       .find('div[id="pv_id_6_2_content"]')
-      .children().eq(0)
-      .children().eq(1)   // annotation content
-      .children().eq(0).should('not.have.class', 'annotations-list')
-      .find('span').contains('No Annotations available')
+      .find('div[data-cy="message-box"]')
   })
 
   describe('VariantsAnnotation', () => {
@@ -562,4 +559,4 @@ const selectors = {
             })
           })
       })
-  });
+  });
\ No newline at end of file