diff --git a/client/src/pages/learningPath/circlePage/LearningSequence.vue b/client/src/pages/learningPath/circlePage/LearningSequence.vue
index 3c10808a..1ee3ebf3 100644
--- a/client/src/pages/learningPath/circlePage/LearningSequence.vue
+++ b/client/src/pages/learningPath/circlePage/LearningSequence.vue
@@ -157,91 +157,100 @@ function checkboxIconUncheckedTailwindClass(lc: LearningContent) {
             v-for="learningContent in learningUnit.learningContents"
             :key="learningContent.id"
           >
-            <div class="flex items-center gap-4 pb-6">
-              <div v-if="props.readonly">
-                <it-icon-check
-                  v-if="learningContent.completion_status === 'SUCCESS'"
-                  class="block h-8 w-8"
-                ></it-icon-check>
-                <div v-else class="h-8 w-8"></div>
-              </div>
-              <ItCheckbox
-                v-else
-                :checkbox-item="{
-                  value: learningContent.completion_status,
-                  checked: learningContent.completion_status === 'SUCCESS',
-                }"
-                :disabled="!learningContent.can_user_self_toggle_course_completion"
-                :data-cy="`${learningContent.slug}-checkbox`"
-                :icon-checked-tailwind-class="
-                  checkboxIconCheckedTailwindClass(learningContent)
-                "
-                :icon-unchecked-tailwind-class="
-                  checkboxIconUncheckedTailwindClass(learningContent)
-                "
-                @toggle="toggleCompleted(learningContent)"
-              />
-              <div class="flex flex-auto flex-col gap-4 xl:flex-row xl:justify-between">
-                <div class="xl:order-last">
-                  <LearningContentBadge :learning-content="learningContent" />
+            <div class="pb-6">
+              <div class="flex items-center gap-4">
+                <div v-if="props.readonly">
+                  <it-icon-check
+                    v-if="learningContent.completion_status === 'SUCCESS'"
+                    class="block h-8 w-8"
+                  ></it-icon-check>
+                  <div v-else class="h-8 w-8"></div>
                 </div>
-
-                <div>
-                  <div v-if="props.readonly" class="w-full text-left sm:w-auto">
-                    {{ learningContent.title }}
+                <ItCheckbox
+                  v-else
+                  :checkbox-item="{
+                    value: learningContent.completion_status,
+                    checked: learningContent.completion_status === 'SUCCESS',
+                  }"
+                  :data-cy="`${learningContent.slug}-checkbox`"
+                  :icon-checked-tailwind-class="
+                    checkboxIconCheckedTailwindClass(learningContent)
+                  "
+                  :icon-unchecked-tailwind-class="
+                    checkboxIconUncheckedTailwindClass(learningContent)
+                  "
+                  @toggle="toggleCompleted(learningContent)"
+                  @click.stop="
+                    () => {
+                      // when disabled open the learning content directly
+                      if (!learningContent.can_user_self_toggle_course_completion)
+                        circleStore.openLearningContent(learningContent);
+                    }
+                  "
+                />
+                <div
+                  class="flex flex-auto flex-col gap-4 xl:flex-row xl:justify-between"
+                >
+                  <div class="xl:order-last">
+                    <LearningContentBadge :learning-content="learningContent" />
+                  </div>
+
+                  <div>
+                    <div v-if="props.readonly" class="w-full text-left sm:w-auto">
+                      {{ learningContent.title }}
+                    </div>
+                    <button
+                      v-else
+                      class="w-full cursor-pointer text-left sm:w-auto"
+                      :data-cy="`${learningContent.slug}`"
+                      @click.stop="circleStore.openLearningContent(learningContent)"
+                    >
+                      {{ learningContent.title }}
+                    </button>
                   </div>
-                  <button
-                    v-else
-                    class="w-full cursor-pointer text-left sm:w-auto"
-                    :data-cy="`${learningContent.slug}`"
-                    @click.stop="circleStore.openLearningContent(learningContent)"
-                  >
-                    {{ learningContent.title }}
-                  </button>
                 </div>
               </div>
-            </div>
-
-            <div
-              v-if="belongsToCompetenceCertificate(learningContent)"
-              class="mb-8 ml-16 text-sm text-gray-800"
-            >
-              {{
-                $t("circlePage.Dieser Inhalt gehört zu x", {
-                  x: (learningContent as LearninContentWithCompetenceCertificate)
-                    ?.competence_certificate?.title,
-                })
-              }}
-              <br />
-              <router-link
-                v-if="(learningContent as LearninContentWithCompetenceCertificate).competence_certificate?.frontend_url"
-                :to="(learningContent as LearninContentWithCompetenceCertificate).competence_certificate?.frontend_url ?? ''"
-                class="link"
-                data-cy="show-results"
+              <div
+                v-if="belongsToCompetenceCertificate(learningContent)"
+                class="ml-16 text-sm text-gray-800"
               >
-                {{ $t("circlePage.Im KompetenzNavi anschauen") }}
-              </router-link>
-            </div>
+                {{
+                  $t("circlePage.Dieser Inhalt gehört zu x", {
+                    x: (learningContent as LearninContentWithCompetenceCertificate)
+                      ?.competence_certificate?.title,
+                  })
+                }}
+                <br />
+                <router-link
+                  v-if="(learningContent as LearninContentWithCompetenceCertificate).competence_certificate?.frontend_url"
+                  :to="(learningContent as LearninContentWithCompetenceCertificate).competence_certificate?.frontend_url ?? ''"
+                  class="link"
+                  data-cy="show-results"
+                >
+                  {{ $t("circlePage.Im KompetenzNavi anschauen") }}
+                </router-link>
+              </div>
 
-            <div
-              v-if="
-                learningContent.translation_key === continueTranslationKeyTuple[0] &&
-                !props.readonly
-              "
-              class="mb-6"
-            >
-              <button
-                class="btn-blue order-1 sm:order-none"
-                data-cy="ls-continue-button"
-                @click.stop="circleStore.openLearningContent(learningContent)"
+              <div
+                v-if="
+                  learningContent.translation_key === continueTranslationKeyTuple[0] &&
+                  !props.readonly
+                "
+                class="my-4"
               >
-                <span v-if="continueTranslationKeyTuple[1]" class="whitespace-nowrap">
-                  {{ $t("general.start") }}
-                </span>
-                <span v-else class="whitespace-nowrap">
-                  {{ $t("general.nextStep") }}
-                </span>
-              </button>
+                <button
+                  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">
+                    {{ $t("general.start") }}
+                  </span>
+                  <span v-else class="whitespace-nowrap">
+                    {{ $t("general.nextStep") }}
+                  </span>
+                </button>
+              </div>
             </div>
           </li>
         </ol>