diff --git a/src/views/campaign/views/calendar/CalendarView.scss b/src/views/campaign/views/calendar/CalendarView.scss
index 4c3f5dc0..f621d2af 100644
--- a/src/views/campaign/views/calendar/CalendarView.scss
+++ b/src/views/campaign/views/calendar/CalendarView.scss
@@ -1,5 +1,5 @@
 .nitro-campaign-calendar {
-    width: 1010px;
+    width: 1055px;
     height: 400px;
 
     .calendar-item {
@@ -52,29 +52,17 @@
         }
     }
 
-    .button-container {
-        position: relative;
-        width: 100%;
-        height: 0px;
+    .calendar-prev {
+        background: url("../../../../assets/images/campaign/prev.png");
+        width: 33px;
+        min-width: 33px;
+        height: 34px;
+    }
 
-        .calendar-prev {
-            background: url("../../../../assets/images/campaign/prev.png");
-            width: 33px;
-            height: 34px;
-            position: absolute;
-            margin-top: 15%;
-            left: 5px;
-            z-index: 10;
-        }
-
-        .calendar-next {
-            background: url("../../../../assets/images/campaign/next.png");
-            width: 33px;
-            height: 34px;
-            position: absolute;
-            margin-top: 15%;
-            right: 5px;
-            z-index: 10;
-        }
+    .calendar-next {
+        background: url("../../../../assets/images/campaign/next.png");
+        width: 33px;
+        min-width: 33px;
+        height: 34px;
     }
 }
diff --git a/src/views/campaign/views/calendar/CalendarView.tsx b/src/views/campaign/views/calendar/CalendarView.tsx
index 4eeb3aab..b6566791 100644
--- a/src/views/campaign/views/calendar/CalendarView.tsx
+++ b/src/views/campaign/views/calendar/CalendarView.tsx
@@ -104,7 +104,7 @@ export const CalendarView: FC<CalendarViewProps> = props =>
         <NitroCardView className="nitro-campaign-calendar">
             <NitroCardHeaderView headerText={LocalizeText(`campaign.calendar.${campaignName}.title`)} onCloseClick={close} />
             <NitroCardContentView>
-                <div className="d-flex justify-content-between">
+                <div className="d-flex justify-content-between mx-5">
                     <div className="text-black">
                         <h3>{LocalizeText('campaign.calendar.heading.day', ['number'], [(selectedDay + 1).toString()])}</h3>
                         <p>{dayMessage(selectedDay)}</p>
@@ -114,10 +114,11 @@ export const CalendarView: FC<CalendarViewProps> = props =>
                     }
                 </div>
                 <div className="button-container">
-                    <div className="calendar-prev cursor-pointer" onClick={onClickPrev} />
-                    <div className="calendar-next cursor-pointer" onClick={onClickNext} />
+                    
+                    
                 </div>
-                <NitroLayoutFlex className="h-100" gap={2}>
+                <NitroLayoutFlex className="h-100 align-items-center" gap={1}>
+                    <div className="calendar-prev cursor-pointer" onClick={onClickPrev} />
                     {
                         [...Array(getNumItemsDisplayed())].map((e, i) =>
                         {
@@ -125,6 +126,7 @@ export const CalendarView: FC<CalendarViewProps> = props =>
                             return <CalendarItemView key={i} state={getDayState(day)} active={selectedDay === day} onClick={onClickItem} id={day} productName={receivedProducts.has(day) ? receivedProducts.get(day) : null} />
                         })
                     }
+                    <div className="calendar-next cursor-pointer" onClick={onClickNext} />
                 </NitroLayoutFlex>
             </NitroCardContentView>
         </NitroCardView>