diff --git a/assets/views/noscript/rankingCalendar.jet.html b/assets/views/noscript/rankingCalendar.jet.html
new file mode 100644
index 0000000..70da2ec
--- /dev/null
+++ b/assets/views/noscript/rankingCalendar.jet.html
@@ -0,0 +1,60 @@
+<div class="col-12">
+  <div class="custom-card bg-charcoal-surface1 p-4 mb-4">
+    <h2><i class="bi bi-gear-fill me-2"></i>Ranking options</h2>
+    <div class="custom-card-body bg-charcoal-surface1 p-0">
+      <div class="row border-bottom border-2 mb-4">
+        <div class="col-12 mb-4">
+          <h3><i class="bi bi-calendar-event me-2"></i>Date picker</h3>
+          <form action="/rankingCalendar" method="post">
+            <div class="d-inline-flex me-auto">
+              <input type="date" id="date" name="date" class="form-control me-3" min="2007-09-01" max="{{.Year}}-{{ .ThisMonth.MonthPadded }}-01" value="{{.Year}}-{{ .ThisMonth.MonthPadded }}-01" />
+              <button type="submit" class="custom-btn-secondary">Go</button>
+            </div>
+          </form>
+        </div>
+      </div>
+
+      {{- Mode := isset(Queries.mode) ? Queries.mode : "daily" }}
+      {{- url := "/rankingCalendar?date=" + .ThisMonth.Link + "&mode=" }}
+      <div class="row border-bottom border-2 mb-4">
+        <div class="col-12">
+          <h3><i class="bi bi-calendar3 me-2"></i>Time frame</h3>
+          <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-3">
+            {{- path := slice("daily", "weekly", "monthly", "rookie") }}
+            {{- name := slice("Daily", "Weekly", "Monthly", "Rookie")}}
+            {{- yield UnderlineNav(baseURL=url, paths=path, names=name, activeState=Mode)}}
+          </div>
+          <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-3">
+            {{- path := slice("daily_r18", "weekly_r18", "r18g") }}
+            {{- name := slice("Daily (R-18)", "Weekly (R-18)", "R-18G")}}
+            {{- yield UnderlineNav(baseURL=url, paths=path, names=name, activeState=Mode)}}
+          </div>
+          <p class="small text-body-secondary mb-4">Choose the time frame for the rankings.</p>
+        </div>
+      </div>
+
+      <div class="row mb-4">
+        <div class="col-12">
+          <h3><i class="bi bi-star-fill me-2"></i>Specialized rankings</h3>
+          <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-3" aria-label="Specialized ranking modes">
+            {{- path := slice("original", "male", "female") }}
+            {{- name := slice("Original", "Popular among males", "Popular among females")}}
+            {{- yield UnderlineNav(baseURL=url, paths=path, names=name, activeState=Mode)}}
+          </div>
+          <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-3" aria-label="R-18 specialized ranking modes">
+            {{- path := slice("male_r18", "female_r18") }}
+            {{- name := slice("Popular among males (R-18)", "Popular among females (R-18)")}}
+            {{- yield UnderlineNav(baseURL=url, paths=path, names=name, activeState=Mode)}}
+          </div>
+          <p class="small text-muted mb-0">Specialized ranking categories.</p>
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="col-12 d-flex justify-content-between">
+          <a href="/rankingCalendar" type="button" class="btn btn-danger fw-bold rounded-pill">Reset filters</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/assets/views/rankingCalendar.jet.html b/assets/views/rankingCalendar.jet.html
index 95e9d9c..397db4d 100644
--- a/assets/views/rankingCalendar.jet.html
+++ b/assets/views/rankingCalendar.jet.html
@@ -20,54 +20,7 @@
   <!-- <h1 class="text-center"><i class="bi bi-calendar me-2"></i>Ranking calendar</h1> -->
 
   <noscript>
-    <div class="col-12">
-      <div class="custom-card bg-charcoal-surface1 p-4 mb-4">
-        <h2><i class="bi bi-gear-fill me-2"></i>Ranking options</h2>
-        <div class="custom-card-body bg-charcoal-surface1 p-0">
-          {{- Mode := isset(Queries.mode) ? Queries.mode : "daily" }}
-          {{- url := "/rankingCalendar?date=" + .ThisMonth.Link + "&mode=" }}
-          <div class="row border-bottom border-2 mb-4">
-            <div class="col-12">
-              <h3><i class="bi bi-calendar3 me-2"></i>Time frame</h3>
-              <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-3">
-                {{- path := slice("daily", "weekly", "monthly", "rookie") }}
-                {{- name := slice("Daily", "Weekly", "Monthly", "Rookie")}}
-                {{- yield UnderlineNav(baseURL=url, paths=path, names=name, activeState=Mode)}}
-              </div>
-              <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-3">
-                {{- path := slice("daily_r18", "weekly_r18", "r18g") }}
-                {{- name := slice("Daily (R-18)", "Weekly (R-18)", "R-18G")}}
-                {{- yield UnderlineNav(baseURL=url, paths=path, names=name, activeState=Mode)}}
-              </div>
-              <p class="small text-body-secondary mb-4">Choose the time frame for the rankings.</p>
-            </div>
-          </div>
-
-          <div class="row mb-4">
-            <div class="col-12">
-              <h3><i class="bi bi-star-fill me-2"></i>Specialized rankings</h3>
-              <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-3" aria-label="Specialized ranking modes">
-                {{- path := slice("original", "male", "female") }}
-                {{- name := slice("Original", "Popular among males", "Popular among females")}}
-                {{- yield UnderlineNav(baseURL=url, paths=path, names=name, activeState=Mode)}}
-              </div>
-              <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-3" aria-label="R-18 specialized ranking modes">
-                {{- path := slice("male_r18", "female_r18") }}
-                {{- name := slice("Popular among males (R-18)", "Popular among females (R-18)")}}
-                {{- yield UnderlineNav(baseURL=url, paths=path, names=name, activeState=Mode)}}
-              </div>
-              <p class="small text-muted mb-0">Specialized ranking categories.</p>
-            </div>
-          </div>
-
-          <div class="row">
-            <div class="col-12 d-flex justify-content-between">
-              <a href="/rankingCalendar" type="button" class="btn btn-danger fw-bold rounded-pill">Reset filters</a>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+    {{ include "noscript/rankingCalendar" }}
   </noscript>
 
   <div class="col-12">
diff --git a/i18n/locale/en/template.json b/i18n/locale/en/template.json
index 2f4c28f..a9faa45 100644
--- a/i18n/locale/en/template.json
+++ b/i18n/locale/en/template.json
@@ -197,6 +197,12 @@
   "assets/views/noscript/ranking.jet.html:aR-7k1l6D_w": "Popular among females (R-18)",
   "assets/views/noscript/ranking.jet.html:bwaj1c0o5oU": "Popular among males (R-18)",
   "assets/views/noscript/ranking.jet.html:pBEaeL69K7w": "Specialized ranking categories.",
+  "assets/views/noscript/rankingCalendar.jet.html:BMR8WidgHn0": "Ranking options",
+  "assets/views/noscript/rankingCalendar.jet.html:I6Hm-v9QLgE": "Choose the time frame for the rankings.",
+  "assets/views/noscript/rankingCalendar.jet.html:L1ef_2BFV8U": "Reset filters",
+  "assets/views/noscript/rankingCalendar.jet.html:OV4ShQhbDh0": "Time frame",
+  "assets/views/noscript/rankingCalendar.jet.html:ScyvSI0_9kM": "Specialized rankings",
+  "assets/views/noscript/rankingCalendar.jet.html:pBEaeL69K7w": "Specialized ranking categories.",
   "assets/views/noscript/settings.jet.html:-KqJV0K6wKc": "Log in with your Pixiv account's cookie to access the features below. To learn how to obtain your cookie, please see <a href=\"https://pixivfe-docs.pages.dev/obtaining-pixivfe-token/\">the guide on obtaining your PixivFE token</a>.",
   "assets/views/noscript/settings.jet.html:01ETImVdw20": "Make bulk changes to multiple preferences at once",
   "assets/views/noscript/settings.jet.html:0IsQoCb1wcs": "PIXIVFE_PROXY_CHECK_ENABLED=false",
@@ -402,15 +408,14 @@
   "assets/views/rankingCalendar.jet.html:XM3hntqJHwI": "Thu",
   "assets/views/rankingCalendar.jet.html:XUI6uC-lsWs": "Wed",
   "assets/views/rankingCalendar.jet.html:XrBJzwwrW6k": "Rookie",
+  "assets/views/rankingCalendar.jet.html:ZWs-_d-n2O0": "Date picker",
   "assets/views/rankingCalendar.jet.html:aR-7k1l6D_w": "Popular among females (R-18)",
   "assets/views/rankingCalendar.jet.html:bwaj1c0o5oU": "Popular among males (R-18)",
   "assets/views/rankingCalendar.jet.html:dSl4pR3MV70": "Monthly",
   "assets/views/rankingCalendar.jet.html:fe7yaFIotRc": "Sat",
   "assets/views/rankingCalendar.jet.html:jt8Q5gsBtLc": "Fri",
-  "assets/views/rankingCalendar.jet.html:nu2CR4aefnc": "Options",
   "assets/views/rankingCalendar.jet.html:opAx4qE3evA": "Go",
   "assets/views/rankingCalendar.jet.html:pBEaeL69K7w": "Specialized ranking categories.",
-  "assets/views/rankingCalendar.jet.html:tjYnPuRWLV4": "February 2024",
   "assets/views/rankingCalendar.jet.html:xSF3AOx49tE": "Weekly (R-18)",
   "assets/views/rankingCalendar.jet.html:zdxglFchbXg": "Weekly",
   "assets/views/settings.jet.html:-KqJV0K6wKc": "Log in with your Pixiv account's cookie to access the features below. To learn how to obtain your cookie, please see <a href=\"https://pixivfe-docs.pages.dev/obtaining-pixivfe-token/\">the guide on obtaining your PixivFE token</a>.",