diff --git a/.editorconfig b/.editorconfig
index f4ff00e..2144899 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -12,7 +12,7 @@ trim_trailing_whitespace = true
 insert_final_newline = true
 
 # 2 space indentation for UI
-[*.{css,html,js,json,scss,yml,rb}]
+[*.{css,html,js,json,scss,yml,rb,vue}]
 indent_size = 2
 
 [Makefile]
diff --git a/app/static/dist/.vite/manifest.json b/app/static/dist/.vite/manifest.json
index cdea527..88a6b29 100644
--- a/app/static/dist/.vite/manifest.json
+++ b/app/static/dist/.vite/manifest.json
@@ -38,7 +38,7 @@
     ]
   },
   "app/static/js/plan.js": {
-    "file": "assets/plan-Bwjl4Amt.js",
+    "file": "assets/plan-Cu_Fu6tG.js",
     "name": "plan",
     "src": "app/static/js/plan.js",
     "isEntry": true,
diff --git a/app/static/dist/assets/plan-Bwjl4Amt.js b/app/static/dist/assets/plan-Bwjl4Amt.js
deleted file mode 100644
index 056d624..0000000
--- a/app/static/dist/assets/plan-Bwjl4Amt.js
+++ /dev/null
@@ -1 +0,0 @@
-import{l as a,f as n,F as p}from"./about-C-86WtE6.js";import{G as t,r}from"./vue-CAlcOYJV.js";import{O as e}from"./pev2-CCKYbavq.js";a.add(n);const o=t({setup(){return{plan:r(planData)}},components:{pev2:e}});o.component("font-awesome-icon",p);o.mount("#app");
diff --git a/app/static/dist/assets/plan-Cu_Fu6tG.js b/app/static/dist/assets/plan-Cu_Fu6tG.js
new file mode 100644
index 0000000..a6c9dcb
--- /dev/null
+++ b/app/static/dist/assets/plan-Cu_Fu6tG.js
@@ -0,0 +1 @@
+import{l as i,f as l,F as p}from"./about-C-86WtE6.js";import{r as o,c as t,f as u,g as n,h as d,t as g,p as h,G as _}from"./vue-CAlcOYJV.js";import{O as f}from"./pev2-CCKYbavq.js";const y={class:"lh-1"},v=["title"],D={__name:"created",props:["date"],setup(e){const s=e,a=new Date(s.date);o(navigator.language);const c=t(()=>a.toLocaleString(navigator.language,{year:"numeric",month:"short",day:"numeric"})),m=t(()=>a.toLocaleString(navigator.language,{weekday:"short",year:"numeric",month:"short",day:"numeric",hour:"numeric",minute:"numeric",second:"numeric",timeZoneName:"short"}));return(k,w)=>(h(),u("small",y,[n("small",null,[d("created "),n("span",{title:m.value},"on "+g(c.value),9,v)])]))}};i.add(l);const r=_({setup(){return{plan:o(planData)}},components:{pev2:f,created:D}});r.component("font-awesome-icon",p);r.mount("#app");
diff --git a/app/static/js/created.vue b/app/static/js/created.vue
new file mode 100644
index 0000000..3dd0dd1
--- /dev/null
+++ b/app/static/js/created.vue
@@ -0,0 +1,38 @@
+<template>
+  <small class="lh-1"
+    ><small
+      >created <span :title="longDate">on {{ shortDate }}</span></small
+    ></small
+  >
+</template>
+
+<script setup>
+import { computed, ref } from "vue";
+const props = defineProps(["date"]);
+const dateObj = new Date(props.date);
+
+const language = ref(navigator.language);
+
+const shortDate = computed(() => {
+  // Format according to the user's locale
+  return dateObj.toLocaleString(navigator.language, {
+    year: "numeric", // Example: "2023"
+    month: "short", // Example: "Nov"
+    day: "numeric", // Example: "9"
+  });
+});
+
+const longDate = computed(() => {
+  // Format according to the user's locale
+  return dateObj.toLocaleString(navigator.language, {
+    weekday: "short", // Example: "Thu"
+    year: "numeric", // Example: "2023"
+    month: "short", // Example: "Nov"
+    day: "numeric", // Example: "9"
+    hour: "numeric", // Example: "11"
+    minute: "numeric", // Example: "15"
+    second: "numeric", // Optional: show seconds
+    timeZoneName: "short", // Show time zone like "GMT+1"
+  });
+});
+</script>
diff --git a/app/static/js/plan.js b/app/static/js/plan.js
index 0a9fbe5..ec2fa7d 100644
--- a/app/static/js/plan.js
+++ b/app/static/js/plan.js
@@ -2,6 +2,7 @@ import "./common.js";
 import { createApp } from "vue";
 import { Plan } from "pev2";
 import { ref } from "vue";
+import Created from "./created.vue";
 
 import "pev2/dist/style.css";
 
@@ -18,6 +19,7 @@ const app = createApp({
   },
   components: {
     pev2: Plan,
+    created: Created,
   },
 });
 app.component("font-awesome-icon", FontAwesomeIcon);
diff --git a/app/templates/plan.html b/app/templates/plan.html
index ed8b20d..5eda68c 100644
--- a/app/templates/plan.html
+++ b/app/templates/plan.html
@@ -32,11 +32,12 @@
       {% raw %}{{ plan.title || '' }}{% endraw %}
     </span>
     {% if plan %}
-    <span class="navbar-text">
+    <span class="navbar-text p-0 text-end d-flex flex-column">
       <a href="{{ url_for('plan_from_db', id=plan.id) }}">
         <font-awesome-icon icon="link"></font-awesome-icon>
         plan/{{ plan.id }}
       </a>
+      <created date="{{ plan.created }}"></created>
     </span>
     {% endif %}
   </nav>