diff --git a/client/src/components/profile/components/heat-map.tsx b/client/src/components/profile/components/heat-map.tsx
index d519b3727de..babb03bbe76 100644
--- a/client/src/components/profile/components/heat-map.tsx
+++ b/client/src/components/profile/components/heat-map.tsx
@@ -146,6 +146,7 @@ class HeatMapInner extends Component<HeatMapInnerProps, HeatMapInnerState> {
           />
           <ReactTooltip className='react-tooltip' effect='solid' html={true} />
           <Row className='text-center'>
+            <Spacer size='xs' />
             <button
               className='heatmap-nav-btn'
               disabled={!pages[this.state.pageIndex - 1]}
@@ -170,7 +171,7 @@ class HeatMapInner extends Component<HeatMapInnerProps, HeatMapInnerState> {
               &gt;
             </button>
           </Row>
-          <Spacer size='m' />
+          <Spacer size='xs' />
         </section>
       </FullWidthRow>
     );
diff --git a/client/src/components/profile/components/heatmap.css b/client/src/components/profile/components/heatmap.css
index 3971e609a63..660ad2d5088 100644
--- a/client/src/components/profile/components/heatmap.css
+++ b/client/src/components/profile/components/heatmap.css
@@ -1,5 +1,7 @@
 .heatmap-nav-btn {
   margin: 0 20px;
+  width: 44px;
+  height: 44px;
 }
 
 .react-calendar-heatmap-month-label {