diff --git a/Web/templates/dashboard/blog_post.html.ep b/Web/templates/dashboard/blog_post.html.ep
index d1e0d3d..47a89f5 100644
--- a/Web/templates/dashboard/blog_post.html.ep
+++ b/Web/templates/dashboard/blog_post.html.ep
@@ -7,10 +7,10 @@
         <label for="postTitle" class="col-sm-2 col-form-label">Title</label>
         <input type="text" class="form-control" id="postTitle" name="postTitle" value="<%= $post->headers->{title} %>">
     </div>
-
+    
     <div class="mb-3">
         <label for="postDate" class="col-sm-2 col-form-label">Date</label>
-        <input type="text" class="form-control" id="postDate" name="postDate" value="<%= $post->headers->{date} %>">
+        <input type="text" class="form-control datepicker" id="postDate" name="postDate" value="<%= $post->headers->{date} %>">
     </div>
 
     <div class="mb-3">
diff --git a/Web/templates/dashboard/blog_post_create.html.ep b/Web/templates/dashboard/blog_post_create.html.ep
index dd20a54..9a04fdd 100644
--- a/Web/templates/dashboard/blog_post_create.html.ep
+++ b/Web/templates/dashboard/blog_post_create.html.ep
@@ -8,9 +8,9 @@
         <input type="text" class="form-control" id="postTitle" name="postTitle" value="<%= $c->stash->{form_title} %>">
     </div>
 
-    <div class="mb-3">
+    <div class="mb-3 align-items-center">
         <label for="postDate" class="col-sm-2 col-form-label">Date</label>
-        <input type="text" class="form-control" id="postDate" name="postDate" value="<%= $c->stash->{form_date} %>">
+        <input  type="text" class="form-control datepicker" id="postDate" name="postDate" value="<%= $c->stash->{form_date} %>">
     </div>
 
     <div class="mb-3">
diff --git a/Web/templates/layouts/standard.html.ep b/Web/templates/layouts/standard.html.ep
index b40c3d0..cd43475 100644
--- a/Web/templates/layouts/standard.html.ep
+++ b/Web/templates/layouts/standard.html.ep
@@ -32,6 +32,9 @@
         <meta http-equiv="refresh" content="<%= $c->stash->{http_refresh} %>">
     % }
 
+    <!-- Bootstrap datepicker CSS -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css"/>
+
 
     %#= include '_base/bootstrap-datepicker'
 
@@ -164,6 +167,12 @@
         </div>
     </div>
 
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"
+        integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA=="
+        crossorigin="anonymous"
+        referrerpolicy="no-referrer">
+    </script>
+
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"
         integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
         crossorigin="anonymous">
@@ -178,5 +187,17 @@
         crossorigin="anonymous">
     </script>
     <script src="/assets/js/dashboard.js"></script>
+    
+    <!-- Bootstrap datepicker JS-->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
+
+    <script type="text/javascript">
+        $(document).ready(function () {
+            $('.datepicker').datepicker({
+                format: 'yyyy-mm-dd',
+                todayHighlight: true,
+            });
+        });
+    </script>
 </body>
 </html>