diff --git a/frontend/src/views/social/VocabCourseView.vue b/frontend/src/views/social/VocabCourseView.vue
index f753b57..98d32a4 100644
--- a/frontend/src/views/social/VocabCourseView.vue
+++ b/frontend/src/views/social/VocabCourseView.vue
@@ -33,26 +33,32 @@
             <tr v-for="lesson in course.lessons" :key="lesson.id" class="lesson-row">
               <td class="lesson-number">{{ lesson.lessonNumber }}</td>
               <td class="lesson-title">
-                <span class="title-label">{{ lesson.title }}</span>
-                <span v-if="lesson.description" class="lesson-description">{{ lesson.description }}</span>
+                <div class="lesson-title-content">
+                  <span class="title-label">{{ lesson.title }}</span>
+                  <span v-if="lesson.description" class="lesson-description">{{ lesson.description }}</span>
+                </div>
               </td>
               <td class="lesson-status">
-                <span v-if="getLessonProgress(lesson.id)?.completed" class="badge completed">
-                  {{ $t('socialnetwork.vocab.courses.completed') }}
-                </span>
-                <span v-else-if="getLessonProgress(lesson.id)?.score" class="score">
-                  {{ $t('socialnetwork.vocab.courses.score') }}: {{ getLessonProgress(lesson.id).score }}%
-                </span>
-                <span v-else class="status-new">
-                  {{ $t('socialnetwork.vocab.courses.notStarted') }}
-                </span>
+                <div class="lesson-status-content">
+                  <span v-if="getLessonProgress(lesson.id)?.completed" class="badge completed">
+                    {{ $t('socialnetwork.vocab.courses.completed') }}
+                  </span>
+                  <span v-else-if="getLessonProgress(lesson.id)?.score" class="score">
+                    {{ $t('socialnetwork.vocab.courses.score') }}: {{ getLessonProgress(lesson.id).score }}%
+                  </span>
+                  <span v-else class="status-new">
+                    {{ $t('socialnetwork.vocab.courses.notStarted') }}
+                  </span>
+                </div>
               </td>
               <td class="lesson-actions">
-                <button @click="openLesson(lesson.id)" class="btn-start">
-                  {{ getLessonProgress(lesson.id)?.completed ? $t('socialnetwork.vocab.courses.review') : $t('socialnetwork.vocab.courses.start') }}
-                </button>
-                <button v-if="isOwner" @click="editLesson(lesson.id)" class="btn-edit">{{ $t('socialnetwork.vocab.courses.edit') }}</button>
-                <button v-if="isOwner" @click="deleteLesson(lesson.id)" class="btn-delete">{{ $t('general.delete') }}</button>
+                <div class="lesson-actions-content">
+                  <button @click="openLesson(lesson.id)" class="btn-start">
+                    {{ getLessonProgress(lesson.id)?.completed ? $t('socialnetwork.vocab.courses.review') : $t('socialnetwork.vocab.courses.start') }}
+                  </button>
+                  <button v-if="isOwner" @click="editLesson(lesson.id)" class="btn-edit">{{ $t('socialnetwork.vocab.courses.edit') }}</button>
+                  <button v-if="isOwner" @click="deleteLesson(lesson.id)" class="btn-delete">{{ $t('general.delete') }}</button>
+                </div>
               </td>
             </tr>
           </tbody>
@@ -319,17 +325,20 @@ export default {
 .lessons-table td {
   padding: 15px;
   vertical-align: top;
+  display: table-cell;
 }
 
 .lesson-number {
   font-weight: 600;
   color: #666;
   font-size: 0.95em;
-  vertical-align: top;
-  padding-top: 15px;
 }
 
 .lesson-title {
+  display: block;
+}
+
+.lesson-title-content {
   display: flex;
   flex-direction: column;
   gap: 5px;
@@ -348,13 +357,15 @@ export default {
 }
 
 .lesson-status {
+  display: block;
+}
+
+.lesson-status-content {
   display: flex;
   flex-direction: column;
   gap: 5px;
   align-items: flex-start;
   justify-content: flex-start;
-  white-space: nowrap;
-  overflow: visible;
 }
 
 .badge.completed {
@@ -379,6 +390,10 @@ export default {
 }
 
 .lesson-actions {
+  display: block;
+}
+
+.lesson-actions-content {
   display: flex;
   gap: 8px;
   flex-wrap: wrap;