diff --git a/package.json b/package.json
index 8d8b69c5..3f0486fe 100644
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
     "pluralize": "^8.0.0",
     "posthog-js": "^1.87.2",
     "sirv": "^2.0.3",
+    "supabase": "^1.112.0",
     "svelte-email": "^0.0.4",
     "unsplash-js": "^7.0.18",
     "wait-on": "^7.0.1",
diff --git a/src/routes/courses/[id]/lessons/+page.svelte b/src/routes/courses/[id]/lessons/+page.svelte
index e8141dc4..b59f3c02 100644
--- a/src/routes/courses/[id]/lessons/+page.svelte
+++ b/src/routes/courses/[id]/lessons/+page.svelte
@@ -30,6 +30,7 @@
   import TextChip from '$lib/components/Chip/Text.svelte';
   import Avatar from '$lib/components/Apps/components/Poll/components/Avatar.svelte';
   import AddLessonModal from '$lib/components/Course/components/Lesson/AddLessonModal.svelte';
+  import DateField from '$lib/components/Form/Date.svelte';
 
   export let data;
 
@@ -186,12 +187,10 @@
 
                 <div class="flex items-center lg:mb-0">
                   {#if lessonEditing === lesson.id}
-                    <input
-                      type="date"
-                      name="lesson-date-picker"
-                      class="p-2 my-2 rounded-md sm:w-[179px]"
+                    <DateField
                       value={formatDate(lesson.lesson_at)}
-                      on:input={(e) => (lesson.lesson_at = e.target.value)}
+                      className="p-2 my-2 rounded-md sm:w-[179px] dark:bg-neutral-800 dark:text-white"
+                      onChange={(e) => (lesson.lesson_at = e.target.value)}
                     />
                   {:else}
                     <div class="flex mb-2">