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 2beec3794..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,18 +1,26 @@
 <div class="card-header">
-  <div class="d-flex align-items-center">
-    <button class="btn mr-auto" (click)="changeYear('subtract')">
-      <i class="fa fa-chevron-left"></i>
-    </button>
-    <p>
-      {{selectedYearText}}
-    </p>
-    <button class="btn ml-auto" (click)="changeYear('add')">
-      <i class="fa fa-chevron-right"></i>
-    </button>
+  <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-4 align-item">
+      <p class="year-text">
+        {{selectedYearText}}
+      </p>
+    </div>
+
+    <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 fc1a00665..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
@@ -9,6 +9,10 @@
   margin: 0;
 }
 
+.year-text {
+  margin-bottom: 0;
+}
+
 .month {
   background: $primary;
   color: white;
@@ -20,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 ea7e4d316..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,9 +44,9 @@ describe('MonthPickerComponent', () => {
     expect(component.changeYear).toHaveBeenCalled();
     expect(component.selectedYearText).toEqual(incrementYear);
     expect(component.selectedYearMoment.format('Y')).toEqual(incrementYear);
+    expect(component.showArrowNext).toBe(false, 'false to hidden arrow next in current year');
   });
 
-
   it('should subtract a year to current year', () => {
     component.selectedYearMoment = moment();
     const decrementYear = moment().subtract(1, 'year').format('Y');
@@ -56,14 +56,17 @@ 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', () => {
-    component.selectedYear = 2020;
+    const monthSelect = new Date().getMonth();
+    const yearSelect = new Date().getFullYear();
     spyOn(component, 'selectDate');
-    component.selectMonth(10);
-    expect(component.selectDate).toHaveBeenCalledWith(10, 2020);
+
+    component.selectMonth(monthSelect);
+
+    expect(component.selectDate).toHaveBeenCalledWith(monthSelect, yearSelect);
   });
 
 });
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 11d233253..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
@@ -16,9 +16,10 @@ export class MonthPickerComponent implements OnInit {
   selectedMonthIndex: number;
   selectedYearMoment: moment.Moment;
   selectedYear: number;
-
   selectedYearText: string;
   months: Array<string> = [];
+  currentYear = new Date().getFullYear();
+  showArrowNext = false;
 
   constructor() {
     this.selectedYearMoment = moment();
@@ -40,6 +41,8 @@ export class MonthPickerComponent implements OnInit {
 
     const monthIndex = changeAction === 'add' ? 0 : 11;
     this.selectMonth(monthIndex);
+
+    this.showArrowNext = this.selectedYear < this.currentYear;
   }
 
   selectMonth(monthIndex: number) {