diff --git a/lib/mihainator_web/live/components/result_component.ex b/lib/mihainator_web/live/components/result_component.ex
index c478c6f..ff4751a 100644
--- a/lib/mihainator_web/live/components/result_component.ex
+++ b/lib/mihainator_web/live/components/result_component.ex
@@ -7,6 +7,10 @@ defmodule MihainatorWeb.ResultComponent do
   def update(assigns, socket) do
     socket = assign(socket, assigns)
 
+    months = get_months(assigns.calendar_dates)
+
+    socket = assign(socket, months: months)
+
     {:ok, socket}
   end
 
@@ -14,4 +18,18 @@ defmodule MihainatorWeb.ResultComponent do
   def mount(socket) do
     {:ok, socket}
   end
+
+  def time_button(assigns) do
+    ~H"""
+    <button>
+      <time><%= @day %></time>
+    </button>
+    """
+  end
+
+  defp get_months(%{first_date: first_date}) do
+    start = Date.beginning_of_month(first_date)
+
+    for month_difference <- 0..11, do: Date.shift(start, month: month_difference)
+  end
 end
diff --git a/lib/mihainator_web/live/components/result_component.html.heex b/lib/mihainator_web/live/components/result_component.html.heex
index 3fe26a6..242b865 100644
--- a/lib/mihainator_web/live/components/result_component.html.heex
+++ b/lib/mihainator_web/live/components/result_component.html.heex
@@ -2,1347 +2,30 @@
   <p class="text-lg">This is the result of your history:</p>
 
   <div class="calendar-wrapper">
-    <div class="calendar">
-      <div class="month">
-        <a href="#" class="nav"><i class="fas fa-angle-left"></i></a>
-        <div>January <span class="year">2023</span></div>
-        <a href="#" class="nav"><i class="fas fa-angle-right"></i></a>
+    <%= for month <- @months do %>
+      <div class="calendar">
+        <div class="month">
+          <a href="#" class="nav"><i class="fas fa-angle-left"></i></a>
+          <div>
+            <%= Calendar.strftime(month, "%B") %> <span class="year"><%= month.year %></span>
+          </div>
+          <a href="#" class="nav"><i class="fas fa-angle-right"></i></a>
+        </div>
+        <div class="days">
+          <span>Mon</span>
+          <span>Tue</span>
+          <span>Wed</span>
+          <span>Thu</span>
+          <span>Fri</span>
+          <span>Sat</span>
+          <span>Sun</span>
+        </div>
+        <div class="dates">
+          <%= for day <- 1..31 do %>
+            <.time_button day={day}></.time_button>
+          <% end %>
+        </div>
       </div>
-      <div class="days">
-        <span>Mon</span>
-        <span>Tue</span>
-        <span>Wed</span>
-        <span>Thu</span>
-        <span>Fri</span>
-        <span>Sat</span>
-        <span>Sun</span>
-      </div>
-      <div class="dates">
-        <button>
-          <time>1</time>
-        </button>
-        <button>
-          <time>2</time>
-        </button>
-        <button>
-          <time>3</time>
-        </button>
-        <button>
-          <time>4</time>
-        </button>
-        <button>
-          <time>5</time>
-        </button>
-        <button>
-          <time>6</time>
-        </button>
-        <button>
-          <time>7</time>
-        </button>
-        <button>
-          <time>8</time>
-        </button>
-        <button>
-          <time>9</time>
-        </button>
-        <button>
-          <time>10</time>
-        </button>
-        <button>
-          <time>11</time>
-        </button>
-        <button>
-          <time>12</time>
-        </button>
-        <button>
-          <time>13</time>
-        </button>
-        <button>
-          <time>14</time>
-        </button>
-        <button>
-          <time>15</time>
-        </button>
-        <button>
-          <time>16</time>
-        </button>
-        <button>
-          <time>17</time>
-        </button>
-        <button>
-          <time>18</time>
-        </button>
-        <button>
-          <time>19</time>
-        </button>
-        <button>
-          <time>20</time>
-        </button>
-        <button>
-          <time>21</time>
-        </button>
-        <button>
-          <time>22</time>
-        </button>
-        <button>
-          <time>23</time>
-        </button>
-        <button>
-          <time>24</time>
-        </button>
-        <button>
-          <time>25</time>
-        </button>
-        <button>
-          <time>26</time>
-        </button>
-        <button>
-          <time>27</time>
-        </button>
-        <button>
-          <time>28</time>
-        </button>
-        <button>
-          <time>29</time>
-        </button>
-        <button>
-          <time>30</time>
-        </button>
-        <button>
-          <time>31</time>
-        </button>
-      </div>
-    </div>
-
-    <div class="calendar">
-      <div class="month">
-        <a href="#" class="nav"><i class="fas fa-angle-left"></i></a>
-        <div>February <span class="year">2023</span></div>
-        <a href="#" class="nav"><i class="fas fa-angle-right"></i></a>
-      </div>
-      <div class="days">
-        <span>Mon</span>
-        <span>Tue</span>
-        <span>Wed</span>
-        <span>Thu</span>
-        <span>Fri</span>
-        <span>Sat</span>
-        <span>Sun</span>
-      </div>
-      <div class="dates">
-        <button>
-          <time>1</time>
-        </button>
-        <button>
-          <time>2</time>
-        </button>
-        <button>
-          <time>3</time>
-        </button>
-        <button>
-          <time>4</time>
-        </button>
-        <button>
-          <time>5</time>
-        </button>
-        <button>
-          <time>6</time>
-        </button>
-        <button>
-          <time>7</time>
-        </button>
-        <button>
-          <time>8</time>
-        </button>
-        <button>
-          <time>9</time>
-        </button>
-        <button>
-          <time>10</time>
-        </button>
-        <button>
-          <time>11</time>
-        </button>
-        <button>
-          <time>12</time>
-        </button>
-        <button>
-          <time>13</time>
-        </button>
-        <button>
-          <time>14</time>
-        </button>
-        <button>
-          <time>15</time>
-        </button>
-        <button>
-          <time>16</time>
-        </button>
-        <button>
-          <time>17</time>
-        </button>
-        <button>
-          <time>18</time>
-        </button>
-        <button>
-          <time>19</time>
-        </button>
-        <button>
-          <time>20</time>
-        </button>
-        <button>
-          <time>21</time>
-        </button>
-        <button>
-          <time>22</time>
-        </button>
-        <button>
-          <time>23</time>
-        </button>
-        <button>
-          <time>24</time>
-        </button>
-        <button>
-          <time>25</time>
-        </button>
-        <button>
-          <time>26</time>
-        </button>
-        <button>
-          <time>27</time>
-        </button>
-        <button>
-          <time>28</time>
-        </button>
-        <button>
-          <time>29</time>
-        </button>
-        <button>
-          <time>30</time>
-        </button>
-        <button>
-          <time>31</time>
-        </button>
-      </div>
-    </div>
-
-    <div class="calendar">
-      <div class="month">
-        <a href="#" class="nav"><i class="fas fa-angle-left"></i></a>
-        <div>March 🌱<span class="year">2023</span></div>
-        <a href="#" class="nav"><i class="fas fa-angle-right"></i></a>
-      </div>
-      <div class="days">
-        <span>Mon</span>
-        <span>Tue</span>
-        <span>Wed</span>
-        <span>Thu</span>
-        <span>Fri</span>
-        <span>Sat</span>
-        <span>Sun</span>
-      </div>
-      <div class="dates">
-        <button>
-          <time>1</time>
-        </button>
-        <button>
-          <time>2</time>
-        </button>
-        <button>
-          <time>3</time>
-        </button>
-        <button>
-          <time>4</time>
-        </button>
-        <button>
-          <time>5</time>
-        </button>
-        <button>
-          <time>6</time>
-        </button>
-        <button>
-          <time>7</time>
-        </button>
-        <button>
-          <time>8</time>
-        </button>
-        <button>
-          <time>9</time>
-        </button>
-        <button>
-          <time>10</time>
-        </button>
-        <button>
-          <time>11</time>
-        </button>
-        <button>
-          <time>12</time>
-        </button>
-        <button>
-          <time>13</time>
-        </button>
-        <button>
-          <time>14</time>
-        </button>
-        <button>
-          <time>15</time>
-        </button>
-        <button>
-          <time>16</time>
-        </button>
-        <button>
-          <time>17</time>
-        </button>
-        <button>
-          <time>18</time>
-        </button>
-        <button>
-          <time>19</time>
-        </button>
-        <button>
-          <time>20</time>
-        </button>
-        <button>
-          <time>21</time>
-        </button>
-        <button>
-          <time>22</time>
-        </button>
-        <button>
-          <time>23</time>
-        </button>
-        <button>
-          <time>24</time>
-        </button>
-        <button>
-          <time>25</time>
-        </button>
-        <button>
-          <time>26</time>
-        </button>
-        <button>
-          <time>27</time>
-        </button>
-        <button>
-          <time>28</time>
-        </button>
-        <button>
-          <time>29</time>
-        </button>
-        <button>
-          <time>30</time>
-        </button>
-        <button>
-          <time>31</time>
-        </button>
-      </div>
-    </div>
-
-    <div class="calendar">
-      <div class="month">
-        <a href="#" class="nav"><i class="fas fa-angle-left"></i></a>
-        <div>April <span class="year">2023</span></div>
-        <a href="#" class="nav"><i class="fas fa-angle-right"></i></a>
-      </div>
-      <div class="days">
-        <span>Mon</span>
-        <span>Tue</span>
-        <span>Wed</span>
-        <span>Thu</span>
-        <span>Fri</span>
-        <span>Sat</span>
-        <span>Sun</span>
-      </div>
-      <div class="dates">
-        <button>
-          <time>1</time>
-        </button>
-        <button>
-          <time>2</time>
-        </button>
-        <button>
-          <time>3</time>
-        </button>
-        <button>
-          <time>4</time>
-        </button>
-        <button>
-          <time>5</time>
-        </button>
-        <button>
-          <time>6</time>
-        </button>
-        <button>
-          <time>7</time>
-        </button>
-        <button>
-          <time>8</time>
-        </button>
-        <button>
-          <time>9</time>
-        </button>
-        <button>
-          <time>10</time>
-        </button>
-        <button>
-          <time>11</time>
-        </button>
-        <button>
-          <time>12</time>
-        </button>
-        <button>
-          <time>13</time>
-        </button>
-        <button>
-          <time>14</time>
-        </button>
-        <button>
-          <time>15</time>
-        </button>
-        <button>
-          <time>16</time>
-        </button>
-        <button>
-          <time>17</time>
-        </button>
-        <button>
-          <time>18</time>
-        </button>
-        <button>
-          <time>19</time>
-        </button>
-        <button>
-          <time>20</time>
-        </button>
-        <button>
-          <time>21</time>
-        </button>
-        <button>
-          <time>22</time>
-        </button>
-        <button>
-          <time>23</time>
-        </button>
-        <button>
-          <time>24</time>
-        </button>
-        <button>
-          <time>25</time>
-        </button>
-        <button>
-          <time>26</time>
-        </button>
-        <button>
-          <time>27</time>
-        </button>
-        <button>
-          <time>28</time>
-        </button>
-        <button>
-          <time>29</time>
-        </button>
-        <button>
-          <time>30</time>
-        </button>
-        <button>
-          <time>31</time>
-        </button>
-      </div>
-    </div>
-
-    <div class="calendar">
-      <div class="month">
-        <a href="#" class="nav"><i class="fas fa-angle-left"></i></a>
-        <div>May <span class="year">2023</span></div>
-        <a href="#" class="nav"><i class="fas fa-angle-right"></i></a>
-      </div>
-      <div class="days">
-        <span>Mon</span>
-        <span>Tue</span>
-        <span>Wed</span>
-        <span>Thu</span>
-        <span>Fri</span>
-        <span>Sat</span>
-        <span>Sun</span>
-      </div>
-      <div class="dates">
-        <button>
-          <time>1</time>
-        </button>
-        <button>
-          <time>2</time>
-        </button>
-        <button>
-          <time>3</time>
-        </button>
-        <button>
-          <time>4</time>
-        </button>
-        <button>
-          <time>5</time>
-        </button>
-        <button>
-          <time>6</time>
-        </button>
-        <button>
-          <time>7</time>
-        </button>
-        <button>
-          <time>8</time>
-        </button>
-        <button>
-          <time>9</time>
-        </button>
-        <button>
-          <time>10</time>
-        </button>
-        <button>
-          <time>11</time>
-        </button>
-        <button>
-          <time>12</time>
-        </button>
-        <button>
-          <time>13</time>
-        </button>
-        <button>
-          <time>14</time>
-        </button>
-        <button>
-          <time>15</time>
-        </button>
-        <button>
-          <time>16</time>
-        </button>
-        <button>
-          <time>17</time>
-        </button>
-        <button>
-          <time>18</time>
-        </button>
-        <button>
-          <time>19</time>
-        </button>
-        <button>
-          <time>20</time>
-        </button>
-        <button>
-          <time>21</time>
-        </button>
-        <button>
-          <time>22</time>
-        </button>
-        <button>
-          <time>23</time>
-        </button>
-        <button>
-          <time>24</time>
-        </button>
-        <button>
-          <time>25</time>
-        </button>
-        <button>
-          <time>26</time>
-        </button>
-        <button>
-          <time>27</time>
-        </button>
-        <button>
-          <time>28</time>
-        </button>
-        <button>
-          <time>29</time>
-        </button>
-        <button>
-          <time>30</time>
-        </button>
-        <button>
-          <time>31</time>
-        </button>
-      </div>
-    </div>
-
-    <div class="calendar">
-      <div class="month">
-        <a href="#" class="nav"><i class="fas fa-angle-left"></i></a>
-        <div>June 🌞<span class="year">2023</span></div>
-        <a href="#" class="nav"><i class="fas fa-angle-right"></i></a>
-      </div>
-      <div class="days">
-        <span>Mon</span>
-        <span>Tue</span>
-        <span>Wed</span>
-        <span>Thu</span>
-        <span>Fri</span>
-        <span>Sat</span>
-        <span>Sun</span>
-      </div>
-      <div class="dates">
-        <button>
-          <time>1</time>
-        </button>
-        <button>
-          <time>2</time>
-        </button>
-        <button>
-          <time>3</time>
-        </button>
-        <button>
-          <time>4</time>
-        </button>
-        <button>
-          <time>5</time>
-        </button>
-        <button>
-          <time>6</time>
-        </button>
-        <button>
-          <time>7</time>
-        </button>
-        <button>
-          <time>8</time>
-        </button>
-        <button>
-          <time>9</time>
-        </button>
-        <button>
-          <time>10</time>
-        </button>
-        <button>
-          <time>11</time>
-        </button>
-        <button>
-          <time>12</time>
-        </button>
-        <button>
-          <time>13</time>
-        </button>
-        <button>
-          <time>14</time>
-        </button>
-        <button>
-          <time>15</time>
-        </button>
-        <button>
-          <time>16</time>
-        </button>
-        <button>
-          <time>17</time>
-        </button>
-        <button>
-          <time>18</time>
-        </button>
-        <button>
-          <time>19</time>
-        </button>
-        <button>
-          <time>20</time>
-        </button>
-        <button>
-          <time>21</time>
-        </button>
-        <button>
-          <time>22</time>
-        </button>
-        <button>
-          <time>23</time>
-        </button>
-        <button>
-          <time>24</time>
-        </button>
-        <button>
-          <time>25</time>
-        </button>
-        <button>
-          <time>26</time>
-        </button>
-        <button>
-          <time>27</time>
-        </button>
-        <button>
-          <time>28</time>
-        </button>
-        <button>
-          <time>29</time>
-        </button>
-        <button>
-          <time>30</time>
-        </button>
-        <button>
-          <time>31</time>
-        </button>
-      </div>
-    </div>
-    <div class="calendar">
-      <div class="month">
-        <a href="#" class="nav"><i class="fas fa-angle-left"></i></a>
-        <div>July <span class="year">2023</span></div>
-        <a href="#" class="nav"><i class="fas fa-angle-right"></i></a>
-      </div>
-      <div class="days">
-        <span>Mon</span>
-        <span>Tue</span>
-        <span>Wed</span>
-        <span>Thu</span>
-        <span>Fri</span>
-        <span>Sat</span>
-        <span>Sun</span>
-      </div>
-      <div class="dates">
-        <button>
-          <time>1</time>
-        </button>
-        <button>
-          <time>2</time>
-        </button>
-        <button>
-          <time>3</time>
-        </button>
-        <button>
-          <time>4</time>
-        </button>
-        <button>
-          <time>5</time>
-        </button>
-        <button>
-          <time>6</time>
-        </button>
-        <button>
-          <time>7</time>
-        </button>
-        <button>
-          <time>8</time>
-        </button>
-        <button>
-          <time>9</time>
-        </button>
-        <button>
-          <time>10</time>
-        </button>
-        <button>
-          <time>11</time>
-        </button>
-        <button>
-          <time>12</time>
-        </button>
-        <button>
-          <time>13</time>
-        </button>
-        <button>
-          <time>14</time>
-        </button>
-        <button>
-          <time>15</time>
-        </button>
-        <button>
-          <time>16</time>
-        </button>
-        <button>
-          <time>17</time>
-        </button>
-        <button>
-          <time>18</time>
-        </button>
-        <button>
-          <time>19</time>
-        </button>
-        <button>
-          <time>20</time>
-        </button>
-        <button>
-          <time>21</time>
-        </button>
-        <button>
-          <time>22</time>
-        </button>
-        <button>
-          <time>23</time>
-        </button>
-        <button>
-          <time>24</time>
-        </button>
-        <button>
-          <time>25</time>
-        </button>
-        <button>
-          <time>26</time>
-        </button>
-        <button>
-          <time>27</time>
-        </button>
-        <button>
-          <time>28</time>
-        </button>
-        <button>
-          <time>29</time>
-        </button>
-        <button>
-          <time>30</time>
-        </button>
-        <button>
-          <time>31</time>
-        </button>
-      </div>
-    </div>
-
-    <div class="calendar">
-      <div class="month">
-        <a href="#" class="nav"><i class="fas fa-angle-left"></i></a>
-        <div>August <span class="year">2023</span></div>
-        <a href="#" class="nav"><i class="fas fa-angle-right"></i></a>
-      </div>
-      <div class="days">
-        <span>Mon</span>
-        <span>Tue</span>
-        <span>Wed</span>
-        <span>Thu</span>
-        <span>Fri</span>
-        <span>Sat</span>
-        <span>Sun</span>
-      </div>
-      <div class="dates">
-        <button>
-          <time>1</time>
-        </button>
-        <button>
-          <time>2</time>
-        </button>
-        <button>
-          <time>3</time>
-        </button>
-        <button>
-          <time>4</time>
-        </button>
-        <button>
-          <time>5</time>
-        </button>
-        <button>
-          <time>6</time>
-        </button>
-        <button>
-          <time>7</time>
-        </button>
-        <button>
-          <time>8</time>
-        </button>
-        <button>
-          <time>9</time>
-        </button>
-        <button>
-          <time>10</time>
-        </button>
-        <button>
-          <time>11</time>
-        </button>
-        <button>
-          <time>12</time>
-        </button>
-        <button>
-          <time>13</time>
-        </button>
-        <button>
-          <time>14</time>
-        </button>
-        <button>
-          <time>15</time>
-        </button>
-        <button>
-          <time>16</time>
-        </button>
-        <button>
-          <time>17</time>
-        </button>
-        <button>
-          <time>18</time>
-        </button>
-        <button>
-          <time>19</time>
-        </button>
-        <button>
-          <time>20</time>
-        </button>
-        <button>
-          <time>21</time>
-        </button>
-        <button>
-          <time>22</time>
-        </button>
-        <button>
-          <time>23</time>
-        </button>
-        <button>
-          <time>24</time>
-        </button>
-        <button>
-          <time>25</time>
-        </button>
-        <button>
-          <time>26</time>
-        </button>
-        <button>
-          <time>27</time>
-        </button>
-        <button>
-          <time>28</time>
-        </button>
-        <button>
-          <time>29</time>
-        </button>
-        <button>
-          <time>30</time>
-        </button>
-        <button>
-          <time>31</time>
-        </button>
-      </div>
-    </div>
-
-    <div class="calendar">
-      <div class="month">
-        <a href="#" class="nav"><i class="fas fa-angle-left"></i></a>
-        <div>September 🍁<span class="year">2023</span></div>
-        <a href="#" class="nav"><i class="fas fa-angle-right"></i></a>
-      </div>
-      <div class="days">
-        <span>Mon</span>
-        <span>Tue</span>
-        <span>Wed</span>
-        <span>Thu</span>
-        <span>Fri</span>
-        <span>Sat</span>
-        <span>Sun</span>
-      </div>
-      <div class="dates">
-        <button>
-          <time>1</time>
-        </button>
-        <button>
-          <time>2</time>
-        </button>
-        <button>
-          <time>3</time>
-        </button>
-        <button>
-          <time>4</time>
-        </button>
-        <button>
-          <time>5</time>
-        </button>
-        <button>
-          <time>6</time>
-        </button>
-        <button>
-          <time>7</time>
-        </button>
-        <button>
-          <time>8</time>
-        </button>
-        <button>
-          <time>9</time>
-        </button>
-        <button>
-          <time>10</time>
-        </button>
-        <button>
-          <time>11</time>
-        </button>
-        <button>
-          <time>12</time>
-        </button>
-        <button>
-          <time>13</time>
-        </button>
-        <button>
-          <time>14</time>
-        </button>
-        <button>
-          <time>15</time>
-        </button>
-        <button>
-          <time>16</time>
-        </button>
-        <button>
-          <time>17</time>
-        </button>
-        <button class="today">
-          <time>18</time>
-        </button>
-        <button>
-          <time>19</time>
-        </button>
-        <button>
-          <time>20</time>
-        </button>
-        <button>
-          <time>21</time>
-        </button>
-        <button>
-          <time>22</time>
-        </button>
-        <button>
-          <time>23</time>
-        </button>
-        <button>
-          <time>24</time>
-        </button>
-        <button>
-          <time>25</time>
-        </button>
-        <button>
-          <time>26</time>
-        </button>
-        <button>
-          <time>27</time>
-        </button>
-        <button>
-          <time>28</time>
-        </button>
-        <button>
-          <time>29</time>
-        </button>
-        <button>
-          <time>30</time>
-        </button>
-        <button>
-          <time>31</time>
-        </button>
-      </div>
-    </div>
-
-    <div class="calendar">
-      <div class="month">
-        <a href="#" class="nav"><i class="fas fa-angle-left"></i></a>
-        <div>October 🎃<span class="year">2023</span></div>
-        <a href="#" class="nav"><i class="fas fa-angle-right"></i></a>
-      </div>
-      <div class="days">
-        <span>Mon</span>
-        <span>Tue</span>
-        <span>Wed</span>
-        <span>Thu</span>
-        <span>Fri</span>
-        <span>Sat</span>
-        <span>Sun</span>
-      </div>
-      <div class="dates">
-        <button>
-          <time>1</time>
-        </button>
-        <button>
-          <time>2</time>
-        </button>
-        <button>
-          <time>3</time>
-        </button>
-        <button>
-          <time>4</time>
-        </button>
-        <button>
-          <time>5</time>
-        </button>
-        <button>
-          <time>6</time>
-        </button>
-        <button>
-          <time>7</time>
-        </button>
-        <button>
-          <time>8</time>
-        </button>
-        <button>
-          <time>9</time>
-        </button>
-        <button>
-          <time>10</time>
-        </button>
-        <button>
-          <time>11</time>
-        </button>
-        <button>
-          <time>12</time>
-        </button>
-        <button>
-          <time>13</time>
-        </button>
-        <button>
-          <time>14</time>
-        </button>
-        <button>
-          <time>15</time>
-        </button>
-        <button>
-          <time>16</time>
-        </button>
-        <button>
-          <time>17</time>
-        </button>
-        <button>
-          <time>18</time>
-        </button>
-        <button>
-          <time>19</time>
-        </button>
-        <button>
-          <time>20</time>
-        </button>
-        <button>
-          <time>21</time>
-        </button>
-        <button>
-          <time>22</time>
-        </button>
-        <button>
-          <time>23</time>
-        </button>
-        <button>
-          <time>24</time>
-        </button>
-        <button>
-          <time>25</time>
-        </button>
-        <button>
-          <time>26</time>
-        </button>
-        <button>
-          <time>27</time>
-        </button>
-        <button>
-          <time>28</time>
-        </button>
-        <button>
-          <time>29</time>
-        </button>
-        <button>
-          <time>30</time>
-        </button>
-        <button>
-          <time>31</time>
-        </button>
-      </div>
-    </div>
-
-    <div class="calendar">
-      <div class="month">
-        <a href="#" class="nav"><i class="fas fa-angle-left"></i></a>
-        <div>November <span class="year">2023</span></div>
-        <a href="#" class="nav"><i class="fas fa-angle-right"></i></a>
-      </div>
-      <div class="days">
-        <span>Mon</span>
-        <span>Tue</span>
-        <span>Wed</span>
-        <span>Thu</span>
-        <span>Fri</span>
-        <span>Sat</span>
-        <span>Sun</span>
-      </div>
-      <div class="dates">
-        <button>
-          <time>1</time>
-        </button>
-        <button>
-          <time>2</time>
-        </button>
-        <button>
-          <time>3</time>
-        </button>
-        <button>
-          <time>4</time>
-        </button>
-        <button>
-          <time>5</time>
-        </button>
-        <button>
-          <time>6</time>
-        </button>
-        <button>
-          <time>7</time>
-        </button>
-        <button>
-          <time>8</time>
-        </button>
-        <button>
-          <time>9</time>
-        </button>
-        <button>
-          <time>10</time>
-        </button>
-        <button>
-          <time>11</time>
-        </button>
-        <button>
-          <time>12</time>
-        </button>
-        <button>
-          <time>13</time>
-        </button>
-        <button>
-          <time>14</time>
-        </button>
-        <button>
-          <time>15</time>
-        </button>
-        <button>
-          <time>16</time>
-        </button>
-        <button>
-          <time>17</time>
-        </button>
-        <button>
-          <time>18</time>
-        </button>
-        <button>
-          <time>19</time>
-        </button>
-        <button>
-          <time>20</time>
-        </button>
-        <button>
-          <time>21</time>
-        </button>
-        <button>
-          <time>22</time>
-        </button>
-        <button>
-          <time>23</time>
-        </button>
-        <button>
-          <time>24</time>
-        </button>
-        <button>
-          <time>25</time>
-        </button>
-        <button>
-          <time>26</time>
-        </button>
-        <button>
-          <time>27</time>
-        </button>
-        <button>
-          <time>28</time>
-        </button>
-        <button>
-          <time>29</time>
-        </button>
-        <button>
-          <time>30</time>
-        </button>
-        <button>
-          <time>31</time>
-        </button>
-      </div>
-    </div>
-
-    <div class="calendar">
-      <div class="month">
-        <a href="#" class="nav"><i class="fas fa-angle-left"></i></a>
-        <div>December ❄️<span class="year">2023</span></div>
-        <a href="#" class="nav"><i class="fas fa-angle-right"></i></a>
-      </div>
-      <div class="days">
-        <span>Mon</span>
-        <span>Tue</span>
-        <span>Wed</span>
-        <span>Thu</span>
-        <span>Fri</span>
-        <span>Sat</span>
-        <span>Sun</span>
-      </div>
-      <div class="dates">
-        <button>
-          <time>1</time>
-        </button>
-        <button>
-          <time>2</time>
-        </button>
-        <button>
-          <time>3</time>
-        </button>
-        <button>
-          <time>4</time>
-        </button>
-        <button>
-          <time>5</time>
-        </button>
-        <button>
-          <time>6</time>
-        </button>
-        <button>
-          <time>7</time>
-        </button>
-        <button>
-          <time>8</time>
-        </button>
-        <button>
-          <time>9</time>
-        </button>
-        <button>
-          <time>10</time>
-        </button>
-        <button>
-          <time>11</time>
-        </button>
-        <button>
-          <time>12</time>
-        </button>
-        <button>
-          <time>13</time>
-        </button>
-        <button>
-          <time>14</time>
-        </button>
-        <button>
-          <time>15</time>
-        </button>
-        <button>
-          <time>16</time>
-        </button>
-        <button>
-          <time>17</time>
-        </button>
-        <button>
-          <time>18</time>
-        </button>
-        <button>
-          <time>19</time>
-        </button>
-        <button>
-          <time>20</time>
-        </button>
-        <button>
-          <time>21</time>
-        </button>
-        <button>
-          <time>22</time>
-        </button>
-        <button>
-          <time>23</time>
-        </button>
-        <button>
-          <time>24</time>
-        </button>
-        <button>
-          <time>25</time>
-        </button>
-        <button>
-          <time>26</time>
-        </button>
-        <button>
-          <time>27</time>
-        </button>
-        <button>
-          <time>28</time>
-        </button>
-        <button>
-          <time>29</time>
-        </button>
-        <button>
-          <time>30</time>
-        </button>
-        <button>
-          <time>31</time>
-        </button>
-      </div>
-    </div>
+    <% end %>
   </div>
 </div>