diff --git a/html/calendar.ejs b/html/calendar.ejs
index 5160f826..901f327e 100644
--- a/html/calendar.ejs
+++ b/html/calendar.ejs
@@ -6,15 +6,13 @@
   <link rel="manifest" href="/manifest.json">
   <link href="css/yt-ukraine.svg" rel="icon">
   <title>Poke! Calendar</title>
-   <meta name="viewport" content="width=device-width, initial-scale=1">
-   <meta content="PokeCalendar" property=og:title>
-   <meta content="Worlds first no js web calendar :3" property=twitter:description>
-   <meta content="https://cdn.glitch.global/d68d17bb-f2c0-4bc3-993f-50902734f652/aa70111e-5bcd-4379-8b23-332a33012b78.image.png?v=1701898829884" property="og:image"  /> 
-   <meta content=summary_large_image name=twitter:card>
-   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-   <meta charset="UTF-8">
-   <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline'">
-    <meta name="referrer" content="no-referrer">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta content="PokeCalendar" property="og:title">
+  <meta content="Worlds first no js web calendar :3" property="twitter:description">
+  <meta content="https://cdn.glitch.global/d68d17bb-f2c0-4bc3-993f-50902734f652/aa70111e-5bcd-4379-8b23-332a33012b78.image.png?v=1701898829884" property="og:image" /> 
+  <meta content=summary_large_image name=twitter:card>
+  <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline'">
+  <meta name="referrer" content="no-referrer">
 
   <style>
     body {
@@ -58,6 +56,12 @@
       color: #bb86fc;
     }
 
+    .month-title {
+      font-size: 1.5em; /* Adjust the size as needed */
+      margin: 20px 0; /* Spacing above and below */
+      color: #bb86fc; /* Month title color */
+    }
+
     .calendar-table {
       width: 100%;
       border-collapse: collapse;
@@ -100,7 +104,9 @@
 </head>
 <body>
   <div class="navbar">
-<a class="class" href="/143" style=font-family:Inter,sans-serif;color:#fff> <img style="transform: scale(1.3);padding-left:0.9em;width: 8.5em;display: block;margin-left: auto;margin-right: auto;" src="/css/logo-poke.svg?v=5">         </a>    
+    <a class="class" href="/143" style="font-family: Inter, sans-serif; color: #fff">
+      <img style="transform: scale(1.3); padding-left: 0.9em; width: 8.5em; display: block; margin-left: auto; margin-right: auto;" src="/css/logo-poke.svg?v=5">
+    </a>    
     <div class="years">
       <h2>Gregorian Year: <%= year %></h2>
       <h2>Islamic Year: <%= islamicYear %></h2>
@@ -108,7 +114,9 @@
     </div>
   </div>
   
-  <div class="container" style=" margin-top: 1em;">
+  <div class="container" style="margin-top: 1em;">
+    <h2 class="month-title"><%= queryDate.toLocaleString('default', { month: 'long' }) %> <%= year %></h2> <!-- Month and Year Display -->
+
     <table class="calendar-table">
       <thead>
         <tr>
@@ -135,11 +143,10 @@
       </tbody>
     </table>
 
-  <div class="nav-links">
-  <a href="/calendar?date=<%= new Date(currentDate.getFullYear(), month - 1, 1).toISOString() %>" class="button">Previous Month</a>
-  <a href="/calendar?date=<%= new Date(currentDate.getFullYear(), month + 1, 1).toISOString() %>" class="button">Next Month</a>
-</div>
-
+    <div class="nav-links">
+      <a href="/calendar?date=<%= new Date(currentDate.getFullYear(), month - 1, 1).toISOString() %>" class="button">Previous Month</a>
+      <a href="/calendar?date=<%= new Date(currentDate.getFullYear(), month + 1, 1).toISOString() %>" class="button">Next Month</a>
+    </div>
   </div>
 </body>
 </html>
