diff --git a/components/themes/card.latte b/components/themes/card.latte
index 5d80609..0c9d8f3 100644
--- a/components/themes/card.latte
+++ b/components/themes/card.latte
@@ -10,6 +10,7 @@
 			data-video_download_nowatermark="{path('/download?id=' . $item->id . '&user=' . $item->author->uniqueId)}"
 			data-video_share_url="{$share_url}"
 			data-desc="{$item->desc}"
+			data-createtime="{$item->createTime}"
       data-music_title="{$item->music->title}"
       data-music_url="{path('/stream?url=' . urlencode($item->music->playUrl))}">
       <img loading="lazy" src="{path('/stream?url=' . urlencode($item->video->originCover))}" />
@@ -36,6 +37,7 @@
     </section>
 		<footer class="modal-card-foot has-text-centered">
 			<div class="container">
+				<p id="item_date"></p>
 				<div class="field has-addons has-addons-centered">
 					<div class="control">
 						<input id="share_input" class="input" readonly />
diff --git a/components/themes/default.latte b/components/themes/default.latte
index 0ca5149..0fb5135 100644
--- a/components/themes/default.latte
+++ b/components/themes/default.latte
@@ -9,7 +9,11 @@
   	<div class="media-content">
     	<div class="content">
       	<p>
-        	<strong>{$item->author->nickname}</strong> <small><a href="{path('/@' . $item->author->uniqueId)}">@{$item->author->uniqueId}</a></small>
+        	<strong>{$item->author->nickname}</strong>
+					<small>
+						<a href="{path('/@' . $item->author->uniqueId)}">@{$item->author->uniqueId}</a>
+					</small>
+					<small title="{date('M d, Y H:i:s e', $item->createTime)}">{date('M d, Y', $item->createTime)}</small>
       	</p>
 				{if !empty($item->challenges)}
 				<p>{include './common/tags.latte', challenges: $item->challenges}</p>
diff --git a/scripts/themes/card.js b/scripts/themes/card.js
index 9175b5b..672e346 100644
--- a/scripts/themes/card.js
+++ b/scripts/themes/card.js
@@ -2,6 +2,7 @@ var opened_video_id = null
 
 const video = document.getElementById('video')
 const item_title = document.getElementById('item_title')
+const item_date = document.getElementById('item_date')
 const audio = document.getElementById('audio')
 const audio_title = document.getElementById('audio_title')
 const modal = document.getElementById('modal')
@@ -15,7 +16,7 @@ const getVideoDataById = id => {
     opened_video_id = id
     return el.dataset
   }
-  return false
+  return null
 }
 
 const isModalActive = () => modal.classList.contains('is-active')
@@ -23,9 +24,10 @@ const isModalActive = () => modal.classList.contains('is-active')
 const toggleButton = (id, force) => document.getElementById(id).toggleAttribute('disabled', force)
 
 // -- MODAL -- //
-const swapData = ({ video_url, desc, video_download_watermark, video_download_nowatermark, video_share_url, music_title, music_url }) => {
+const swapData = ({ video_url, desc, createtime, video_download_watermark, video_download_nowatermark, video_share_url, music_title, music_url }) => {
   video.src = video_url
   item_title.innerText = desc
+  item_date.innerText = new Date(createtime * 1000).toLocaleString()
   download_watermark.href = video_download_watermark
   download_nowatermark.href = video_download_nowatermark
   share_input.value = video_share_url