diff --git a/src/addons/block/myoverview/components/filteroptions/filteroptions.html b/src/addons/block/myoverview/components/filteroptions/filteroptions.html
index 414d1fbd4..448844d23 100644
--- a/src/addons/block/myoverview/components/filteroptions/filteroptions.html
+++ b/src/addons/block/myoverview/components/filteroptions/filteroptions.html
@@ -1,6 +1,8 @@
 <ion-header>
     <ion-toolbar>
-        <h1>{{ 'core.courses.filtermycourses' | translate }}</h1>
+        <ion-title>
+            <h1>{{ 'core.courses.filtermycourses' | translate }}</h1>
+        </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
                 <ion-icon name="fas-times" slot="icon-only" aria-hidden=true></ion-icon>
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index 0500be86e..ff09724da 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -535,6 +535,10 @@ body.core-iframe-fullscreen ion-router-outlet {
     z-index: 100000 !important;
 }
 
+.core-modal-lateral .modal-wrapper {
+    @include margin-horizontal(16px, null);
+}
+
 @media only screen and (min-height: 400px) and (min-width: #{$modal-lateral-width}) {
     .core-modal-lateral {
         --ion-safe-area-left: 0px;
@@ -556,6 +560,10 @@ body.core-iframe-fullscreen ion-router-outlet {
 }
 
 @each $breakpoint, $width in $screen-breakpoints {
+    .core-modal-lateral-#{$breakpoint} .modal-wrapper {
+        @include margin-horizontal(16px, null);
+    }
+
     @media only screen and (min-height: 400px) and (min-width: #{$width}) {
         .core-modal-lateral-#{$breakpoint} {
             --ion-safe-area-left: 0px;