diff --git a/src/components/Newsletter/DateSelector/DateSelector.tsx b/src/components/Newsletter/DateSelector/DateSelector.tsx
index fcfbb72a49d05614f7ffcdf6a1c743507b18cb6d..9eb4addb261a6685c5df8c169c00eaaecd54567e 100644
--- a/src/components/Newsletter/DateSelector/DateSelector.tsx
+++ b/src/components/Newsletter/DateSelector/DateSelector.tsx
@@ -1,4 +1,4 @@
-import { Button } from '@mui/material'
+import { Button, IconButton } from '@mui/material'
 import React, { useState } from 'react'
 import leftChevron from '../../../assets/icons/left-chevron.svg'
 import rightChevron from '../../../assets/icons/right-chevron.svg'
@@ -45,21 +45,16 @@ const DateSelector: React.FC<DateSelectorProps> = ({
   }
   return (
     <div className="date-selector">
-      <img
-        src={leftChevron}
-        alt="Previous Month"
-        onClick={handlePrevMonth}
-        className="arrow"
-      />
+      <IconButton onClick={handlePrevMonth}>
+        <img src={leftChevron} alt="Previous Month" className="arrow" />
+      </IconButton>
       <div className="text">
         {date.toLocaleString('default', { month: 'long', year: 'numeric' })}
       </div>
-      <img
-        src={rightChevron}
-        alt="Next Month"
-        onClick={handleNextMonth}
-        className="arrow"
-      />
+      <IconButton onClick={handleNextMonth}>
+        <img src={rightChevron} alt="Next Month" className="arrow" />
+      </IconButton>
+
       {openModal && (
         <Modal>
           <>
diff --git a/src/components/Newsletter/DateSelector/dateSelector.scss b/src/components/Newsletter/DateSelector/dateSelector.scss
index cb2a92c023ff94fb33b4dad892a1cb2d26f7ae5a..729caa02b424da686c0c4a05138be531d5828a5c 100644
--- a/src/components/Newsletter/DateSelector/dateSelector.scss
+++ b/src/components/Newsletter/DateSelector/dateSelector.scss
@@ -26,14 +26,11 @@
     padding: 0.5rem;
     border-radius: 50%;
     background: #343641;
-    margin: 0 0.5rem;
-    box-shadow: 0px 5px 5px rgb(0 0 0 / 20%), 0px 3px 14px rgb(0 0 0 / 12%),
+    box-shadow:
+      0px 5px 5px rgb(0 0 0 / 20%),
+      0px 3px 14px rgb(0 0 0 / 12%),
       0px 8px 10px rgb(0 0 0 / 14%);
     transition: all 300ms ease;
-    &:hover {
-      background: $text-grey;
-      opacity: 0.9;
-    }
   }
 }
 .modal-text {