diff --git a/FRONTEND/src/components/Calendar.jsx b/FRONTEND/src/components/Calendar.jsx
index 77ebc96..249e40c 100644
--- a/FRONTEND/src/components/Calendar.jsx
+++ b/FRONTEND/src/components/Calendar.jsx
@@ -6,6 +6,11 @@ const Calendar = ({ onDateClick }) => {
   const [currentMonth, setCurrentMonth] = useState(new Date().getMonth());
   const [currentYear, setCurrentYear] = useState(new Date().getFullYear());
 
+  const monthNames = [
+    'January', 'February', 'March', 'April', 'May', 'June',
+    'July', 'August', 'September', 'October', 'November', 'December'
+  ];
+
   const handleDayClick = (day) => {
     setActiveDay(day);
     const selectedDate = new Date(currentYear, currentMonth, day);
@@ -46,7 +51,7 @@ const Calendar = ({ onDateClick }) => {
     <div className="calendar">
       <div className="calendar-nav">
         <div className="nav-left">
-          <div className="current-month">{`${currentMonth + 1}/${currentYear}`}</div>
+          <div className="current-month">{`${monthNames[currentMonth]} ${currentYear}`}</div>
         </div>
         <div className="nav-right">
           <button className="btn" onClick={handlePrevMonth}>
diff --git a/FRONTEND/src/styles/Calendar.css b/FRONTEND/src/styles/Calendar.css
index e63f3cd..369e0b0 100644
--- a/FRONTEND/src/styles/Calendar.css
+++ b/FRONTEND/src/styles/Calendar.css
@@ -7,8 +7,14 @@
     justify-content: space-between;
     align-items: center;
     margin-bottom: 10px;
+    justify-content: center; /* Center content horizontally */
+  }
+  .current-month {
+    font-size: 1.8em; 
+    font-weight: bold; 
+    text-align: center; /* Align the text to the center */
+   
   }
-  
   .nav-left {
     display: flex;
     align-items: center;