diff --git a/lms/static/my.css b/lms/static/my.css
index 87f95b41..02506748 100644
--- a/lms/static/my.css
+++ b/lms/static/my.css
@@ -109,6 +109,7 @@ a {
   margin-bottom: 2rem;
   flex-direction: row;
   justify-content: space-between;
+  align-items: center;
 }
 
 #show-all-exercises-action {
diff --git a/lms/templates/exercises.html b/lms/templates/exercises.html
index b476616b..33134c9d 100644
--- a/lms/templates/exercises.html
+++ b/lms/templates/exercises.html
@@ -24,7 +24,7 @@ <h1 id="exercises-head">{{ _('Exercises') }}</h1>
         {% set details = {'page': 'view', 'icon': 'check-circle-o', 'text': _('Check'), 'css': 'checked', 'page_id': exercise['solution_id']} %}
       {% endif -%}
       <a href="{{ details['page'] }}/{{ details['page_id'] }}" class="exercise-link">
-        <div class="exercise" {%- if exercise.grade_color %} style="border-inline-start-color: 8px solid {{ exercise.grade_color }};" {%- endif -%}>
+        <div class="exercise" {%- if exercise.grade_color %} style="border-inline-start-color: {{ exercise.grade_color }};" {%- endif -%}>
           <div class="right-side {{ direction }}-language">
             <i class="fa fa-{{ details['icon'] }} exercise-status-icon" aria-hidden="true"></i>
             <div class="exercise-number me-3">{{ exercise['exercise_number'] }}</div>