diff --git a/src/components/vue/SnapshotCalendar.vue b/src/components/vue/SnapshotCalendar.vue
index 2c76288..9fe9d6f 100644
--- a/src/components/vue/SnapshotCalendar.vue
+++ b/src/components/vue/SnapshotCalendar.vue
@@ -12,9 +12,9 @@ import { queryParamsToDate } from '@/utils/queryParamsToDate';
 const props = defineProps<{ playlistId: string }>();
 
 const queryParams = ref<URLSearchParams | null>(null);
-const minDate = ref(new Date('2021-01-01'));
+const minDate = ref(new Date('2021-12-01'));
 const maxDate = ref(new Date());
-const startDate = ref(new Date());
+const displayDtae = ref(new Date());
 
 const loadingSnapshots = ref(true);
 const errorOccurred = ref(false);
@@ -46,8 +46,7 @@ const loadSnapshots = async () => {
       throw new Error(`API ${apiResponse.status}`);
     }
 
-    const data = await apiResponse.json();
-    snapshots.value = data;
+    snapshots.value = await apiResponse.json();
   } catch (error) {
     console.error(error);
     errorOccurred.value = true;
@@ -57,13 +56,15 @@ const loadSnapshots = async () => {
 };
 
 const isDisplayedMonth = (date: Date) =>
-  date.getMonth() === startDate.value.getMonth();
+  date.getMonth() === displayDtae.value.getMonth();
 
 const getCommitSha = (day: number) =>
   dateToCommitShaMap.value[day.toString().padStart(2, '0')];
 
-const getSnapshotHref = (day: number) =>
-  `/playlists/${props.playlistId}/snapshots/${getCommitSha(day)}`;
+const openSnapshotPage = (day: number) =>
+  (location.href = `/playlists/${props.playlistId}/snapshots/${getCommitSha(
+    day
+  )}`);
 
 const updateQueryAndReloadSnapshots = async ({
   month,
@@ -73,7 +74,7 @@ const updateQueryAndReloadSnapshots = async ({
 
   queryParams.value?.set('month', (month + 1).toString());
   queryParams.value?.set('year', year.toString());
-  startDate.value = queryParamsToDate(queryParams.value as URLSearchParams);
+  displayDtae.value = queryParamsToDate(queryParams.value as URLSearchParams);
 
   const queryString = queryParams.value?.toString();
   url.search = `?${queryString}`;
@@ -84,7 +85,7 @@ const updateQueryAndReloadSnapshots = async ({
 
 onBeforeMount(() => {
   queryParams.value = new URLSearchParams(location.search);
-  startDate.value = queryParamsToDate(queryParams.value);
+  displayDtae.value = queryParamsToDate(queryParams.value);
 });
 
 onMounted(loadSnapshots);
@@ -104,7 +105,7 @@ onMounted(loadSnapshots);
     v-show="!(loadingSnapshots || errorOccurred)"
     :min-date="minDate"
     :max-date="maxDate"
-    :start-date="startDate"
+    :start-date="displayDtae"
     :allowed-dates="allowedDates"
     :enable-time-picker="false"
     :month-change-on-arrows="false"
@@ -119,7 +120,7 @@ onMounted(loadSnapshots);
       <a
         v-if="isDisplayedMonth(date) && getCommitSha(day)"
         class="w-full h-full flex justify-center items-center bg-primary text-primary-content"
-        :href="getSnapshotHref(day)"
+        @click="openSnapshotPage(day)"
       >
         {{ day }}
       </a>
diff --git a/src/pages/playlists/[playlistId]/snapshots.json.ts b/src/pages/playlists/[playlistId]/snapshots.json.ts
index db063b0..971a485 100644
--- a/src/pages/playlists/[playlistId]/snapshots.json.ts
+++ b/src/pages/playlists/[playlistId]/snapshots.json.ts
@@ -49,9 +49,9 @@ export const get: APIRoute = async ({ request, params }) => {
     const body = JSON.stringify(
       queryParams.get('allowDuplicates') === 'yes'
         ? possiblyDuplicateSnapshots
-        : // Since commits are sorted by the latest date_captured first,
-          // the following code will preserve the last item with a duplicate snapshot_id value.
-          // Therefore, we'll be left with entries containing the earliest date_captured.
+        : // Since commits are sorted by the latest dateCaptured first,
+          // the following code will preserve the last item with a duplicate snapshotId value.
+          // Therefore, we'll be left with entries containing the earliest dateCaptured.
           [
             ...new Map(
               possiblyDuplicateSnapshots.map((snapshot) => [