diff --git a/client/src/components/learningPath/LearningSequence.vue b/client/src/components/learningPath/LearningSequence.vue
index 12891da9..68287200 100644
--- a/client/src/components/learningPath/LearningSequence.vue
+++ b/client/src/components/learningPath/LearningSequence.vue
@@ -93,8 +93,8 @@ const learningSequenceBorderClass = computed(() => {
       <div>{{ humanizeDuration(learningSequence.minutes) }}</div>
     </div>
 
-    <div class="bg-white px-4 lg:px-6 border" :class="learningSequenceBorderClass">
-      <div
+    <ol class="bg-white px-4 lg:px-6 border" :class="learningSequenceBorderClass">
+      <li
         v-for="learningUnit in learningSequence.learningUnits"
         :id="learningUnit.slug"
         :key="learningUnit.id"
@@ -106,51 +106,56 @@ const learningSequenceBorderClass = computed(() => {
             {{ humanizeDuration(learningUnit.minutes) }}
           </div>
         </div>
-
-        <div
-          v-for="learningContent in learningUnit.learningContents"
-          :key="learningContent.id"
-          class="flex gap-4 pb-3 lg:pb-6"
-        >
-          <ItCheckbox
-            :model-value="learningContent.completion_status === 'success'"
-            :on-toggle="() => toggleCompleted(learningContent)"
-            :data-cy="`${learningContent.slug}`"
+        <ol>
+          <li
+            v-for="learningContent in learningUnit.learningContents"
+            :key="learningContent.id"
+            class="flex gap-4 pb-3 lg:pb-6 items-center"
           >
-            <span class="flex flex-wrap gap-4 items-center">
-              <div
-                class="cursor-pointer w-full sm:w-auto"
-                @click.stop="circleStore.openLearningContent(learningContent)"
-              >
-                {{ learningContent.title }}
-              </div>
-
-              <div
-                class="flex items-center gap-4 flex-col justify-between sm:flex-row sm:grow"
-              >
+            <ItCheckbox
+              :model-value="learningContent.completion_status === 'success'"
+              :on-toggle="() => toggleCompleted(learningContent)"
+              :data-cy="`${learningContent.slug}-checkbox`"
+            />
+            <div class="flex-auto pt-1 sm:pt-0">
+              <span class="flex gap-4 items-center xl:h-10">
                 <button
-                  v-if="
-                    learningContent.translation_key === continueTranslationKeyTuple[0]
-                  "
-                  class="btn-blue order-1 sm:order-none"
-                  data-cy="ls-continue-button"
+                  class="cursor-pointer w-full sm:w-auto text-left"
                   @click.stop="circleStore.openLearningContent(learningContent)"
+                  :data-cy="`${learningContent.slug}`"
                 >
-                  <span v-if="continueTranslationKeyTuple[1]" class="whitespace-nowrap"
-                    >Los geht's
-                  </span>
-                  <span v-else class="whitespace-nowrap"> Weiter geht's </span>
+                  {{ learningContent.title }}
                 </button>
-                <div class="hidden sm:block"></div>
-                <div class="w-full sm:w-auto">
-                  <LearningContentBadge
-                    :learning-content-type="learningContent.contents[0].type"
-                  />
+
+                <div
+                  class="flex items-center gap-4 flex-col justify-between md:flex-row sm:grow lg:flex-col xl:flex-row"
+                >
+                  <button
+                    v-if="
+                      learningContent.translation_key === continueTranslationKeyTuple[0]
+                    "
+                    class="btn-blue order-1 sm:order-none"
+                    data-cy="ls-continue-button"
+                    @click.stop="circleStore.openLearningContent(learningContent)"
+                  >
+                    <span
+                      v-if="continueTranslationKeyTuple[1]"
+                      class="whitespace-nowrap"
+                      >Los geht's
+                    </span>
+                    <span v-else class="whitespace-nowrap"> Weiter geht's </span>
+                  </button>
+                  <div class="hidden sm:block"></div>
+                  <div class="w-full sm:w-auto">
+                    <LearningContentBadge
+                      :learning-content-type="learningContent.contents[0].type"
+                    />
+                  </div>
                 </div>
-              </div>
-            </span>
-          </ItCheckbox>
-        </div>
+              </span>
+            </div>
+          </li>
+        </ol>
 
         <div
           v-if="learningUnit.children.length"
@@ -182,8 +187,8 @@ const learningSequenceBorderClass = computed(() => {
         </div>
 
         <hr v-if="!learningUnit.last" class="-mx-4 text-gray-500" />
-      </div>
-    </div>
+      </li>
+    </ol>
   </div>
 </template>
 
diff --git a/client/src/components/ui/ItCheckbox.vue b/client/src/components/ui/ItCheckbox.vue
index 713f21c2..ae91a0b4 100644
--- a/client/src/components/ui/ItCheckbox.vue
+++ b/client/src/components/ui/ItCheckbox.vue
@@ -18,25 +18,22 @@ defineEmits(["update:modelValue"]);
 
 <template>
   <div
-    class="flex flex-row sm:place-items-center flex-grow"
     :class="{
       'opacity-50': disabled,
       'cursor-not-allowed': disabled,
     }"
     @click="$emit('update:modelValue', !modelValue)"
+    class="w-8 h-8 cursor-pointer"
   >
-    <div
+    <button
       v-if="modelValue"
-      class="w-8 h-8 cursor-pointer flex-none bg-contain bg-[url('/static/icons/icon-checkbox-checked.svg')] hover:bg-[url('/static/icons/icon-checkbox-checked-hover.svg')] disabled:opacity-50 cy-checkbox cy-checkbox-checked"
+      class="w-8 h-8 flex-none bg-contain bg-[url('/static/icons/icon-checkbox-checked.svg')] hover:bg-[url('/static/icons/icon-checkbox-checked-hover.svg')] disabled:opacity-50 cy-checkbox cy-checkbox-checked"
       @click.stop="props.onToggle()"
-    ></div>
-    <div
+    ></button>
+    <button
       v-else
-      class="w-8 h-8 cursor-pointer flex-none bg-contain bg-[url('/static/icons/icon-checkbox-unchecked.svg')] hover:bg-[url('/static/icons/icon-checkbox-unchecked-hover.svg')] cy-checkbox cy-checkbox-unchecked"
+      class="w-8 h-8 flex-none bg-contain bg-[url('/static/icons/icon-checkbox-unchecked.svg')] hover:bg-[url('/static/icons/icon-checkbox-unchecked-hover.svg')] cy-checkbox cy-checkbox-unchecked"
       @click.stop="props.onToggle()"
-    ></div>
-    <div class="flex-auto pl-4 pt-1 sm:pt-0">
-      <slot></slot>
-    </div>
+    ></button>
   </div>
 </template>
diff --git a/client/src/pages/learningPath/CirclePage.vue b/client/src/pages/learningPath/CirclePage.vue
index 6e580e2e..a4c037b9 100644
--- a/client/src/pages/learningPath/CirclePage.vue
+++ b/client/src/pages/learningPath/CirclePage.vue
@@ -143,8 +143,8 @@ onMounted(async () => {
                 </div>
               </div>
 
-              <div class="flex-auto bg-gray-200 px-4 py-8 lg:px-24">
-                <div
+              <ol class="flex-auto bg-gray-200 px-4 py-8 lg:px-24">
+                <li
                   v-for="learningSequence in circleStore.circle?.learningSequences ||
                   []"
                   :key="learningSequence.translation_key"
@@ -152,8 +152,8 @@ onMounted(async () => {
                   <LearningSequence
                     :learning-sequence="learningSequence"
                   ></LearningSequence>
-                </div>
-              </div>
+                </li>
+              </ol>
             </div>
           </div>
         </div>
diff --git a/cypress/e2e/circle.cy.js b/cypress/e2e/circle.cy.js
index 6a6d385c..b1848088 100644
--- a/cypress/e2e/circle.cy.js
+++ b/cypress/e2e/circle.cy.js
@@ -16,17 +16,17 @@ describe("circle page", () => {
     cy.get('[data-cy="circle-title"]').should("contain", "Analyse");
 
     cy.get(
-      '[data-cy="test-lehrgang-lp-circle-analyse-lc-einleitung-circle-analyse"] > .cy-checkbox'
+      '[data-cy="test-lehrgang-lp-circle-analyse-lc-einleitung-circle-analyse-checkbox"] > .cy-checkbox'
     ).click();
 
     cy.get(
-      '[data-cy="test-lehrgang-lp-circle-analyse-lc-einleitung-circle-analyse"] > .cy-checkbox-checked'
+      '[data-cy="test-lehrgang-lp-circle-analyse-lc-einleitung-circle-analyse-checkbox"] > .cy-checkbox-checked'
     ).should("have.class", "cy-checkbox-checked");
 
     // completion data should still be there after reload
     cy.reload();
     cy.get(
-      '[data-cy="test-lehrgang-lp-circle-analyse-lc-einleitung-circle-analyse"] > .cy-checkbox-checked'
+      '[data-cy="test-lehrgang-lp-circle-analyse-lc-einleitung-circle-analyse-checkbox"] > .cy-checkbox-checked'
     ).should("have.class", "cy-checkbox-checked");
   });
 
@@ -62,10 +62,10 @@ describe("circle page", () => {
     cy.get('[data-cy="complete-and-continue"]').click();
 
     cy.get(
-      '[data-cy="test-lehrgang-lp-circle-analyse-lc-rafael-fasel-wechselt-sein-auto"] > .cy-checkbox-checked'
+      '[data-cy="test-lehrgang-lp-circle-analyse-lc-rafael-fasel-wechselt-sein-auto-checkbox"] > .cy-checkbox-checked'
     ).should("have.class", "cy-checkbox-checked");
     cy.get(
-      '[data-cy="test-lehrgang-lp-circle-analyse-lc-fachcheck-fahrzeug"] > .cy-checkbox-checked'
+      '[data-cy="test-lehrgang-lp-circle-analyse-lc-fachcheck-fahrzeug-checkbox"] > .cy-checkbox-checked'
     ).should("have.class", "cy-checkbox-checked");
 
     cy.get(
diff --git a/cypress/e2e/learningPath.cy.js b/cypress/e2e/learningPath.cy.js
index b833a125..47a595ca 100644
--- a/cypress/e2e/learningPath.cy.js
+++ b/cypress/e2e/learningPath.cy.js
@@ -51,7 +51,7 @@ describe("learningPath page", () => {
     // mark a learning content in second circle
     cy.get('[data-cy="circle-analyse"]').click({ force: true });
     cy.get(
-      '[data-cy="test-lehrgang-lp-circle-analyse-lc-fachcheck-fahrzeug"] > .cy-checkbox'
+      '[data-cy="test-lehrgang-lp-circle-analyse-lc-fachcheck-fahrzeug-checkbox"] > .cy-checkbox'
     ).click();
     cy.get('[data-cy="back-to-learning-path-button"]').click();