diff --git a/src/app/modules/shared/components/month-picker/month-picker.component.html b/src/app/modules/shared/components/month-picker/month-picker.component.html
index a3e533de6..aac899ad4 100644
--- a/src/app/modules/shared/components/month-picker/month-picker.component.html
+++ b/src/app/modules/shared/components/month-picker/month-picker.component.html
@@ -1,25 +1,26 @@
 <div class="card-header">
-  <div class="row align-items-center">
-    <div class="col-sm-4">
+  <div class="row">
+    <div class="col-4">
       <button class="btn mr-auto" (click)="changeYear('subtract')">
         <i class="fa fa-chevron-left"></i>
       </button>
     </div>
-    <div class="col-sm-4">
-      <p class="text-center year-text">
+
+    <div class="col-4 align-item">
+      <p class="year-text">
         {{selectedYearText}}
       </p>
     </div>
 
-    <div class="col-sm-4 text-right">
-      <button *ngIf="showArrowNext" class="btn ml-auto" (click)="changeYear('add')">
+    <div class="col-4 text-right">
+      <button class="btn ml-auto" *ngIf="showArrowNext" (click)="changeYear('add')">
         <i class="fa fa-chevron-right"></i>
       </button>
     </div>
   </div>
 </div>
 <div class="row content-months">
-  <div class="spacing col-xl-1 col-lg-1 col-md-2 col-sm-2 col-xs-4" *ngFor="let month of months; let i = index">
+  <div class="spacing col-xl-1 col-lg-1 col-md-2 col-2" *ngFor="let month of months; let i = index">
     <button class="btn btn-light btn-block"
       [ngClass]="{'btn-primary': isSelectedMonth(i)}"
       (click)="selectMonth(i)">
diff --git a/src/app/modules/shared/components/month-picker/month-picker.component.scss b/src/app/modules/shared/components/month-picker/month-picker.component.scss
index d46dc81b3..29e11f684 100644
--- a/src/app/modules/shared/components/month-picker/month-picker.component.scss
+++ b/src/app/modules/shared/components/month-picker/month-picker.component.scss
@@ -24,6 +24,11 @@
   }
 }
 
+.align-item {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 .active {
   @include highlight();
   border-radius: 0.2em;
diff --git a/src/app/modules/shared/components/month-picker/month-picker.component.spec.ts b/src/app/modules/shared/components/month-picker/month-picker.component.spec.ts
index 8011003f8..b55811102 100644
--- a/src/app/modules/shared/components/month-picker/month-picker.component.spec.ts
+++ b/src/app/modules/shared/components/month-picker/month-picker.component.spec.ts
@@ -44,7 +44,7 @@ describe('MonthPickerComponent', () => {
     expect(component.changeYear).toHaveBeenCalled();
     expect(component.selectedYearText).toEqual(incrementYear);
     expect(component.selectedYearMoment.format('Y')).toEqual(incrementYear);
-    expect(component.showArrowNext).toEqual(false);
+    expect(component.showArrowNext).toBe(false, 'false to hidden arrow next in current year');
   });
 
   it('should subtract a year to current year', () => {
@@ -56,6 +56,7 @@ describe('MonthPickerComponent', () => {
 
     expect(component.changeYear).toHaveBeenCalled();
     expect(component.selectedYearMoment.format('Y')).toEqual(decrementYear);
+    expect(component.showArrowNext).toBe(true, 'true to show arrow next in previous years');
   });
 
   it('selectMonth should call selectDate', () => {
diff --git a/src/app/modules/shared/components/month-picker/month-picker.component.ts b/src/app/modules/shared/components/month-picker/month-picker.component.ts
index 72664a028..fc457f33f 100644
--- a/src/app/modules/shared/components/month-picker/month-picker.component.ts
+++ b/src/app/modules/shared/components/month-picker/month-picker.component.ts
@@ -42,7 +42,7 @@ export class MonthPickerComponent implements OnInit {
     const monthIndex = changeAction === 'add' ? 0 : 11;
     this.selectMonth(monthIndex);
 
-    this.showArrowNext = this.selectedYear < this.currentYear ?? true;
+    this.showArrowNext = this.selectedYear < this.currentYear;
   }
 
   selectMonth(monthIndex: number) {