diff --git a/modules/timeutil/since.go b/modules/timeutil/since.go
index bdde54c617..e6a2519d21 100644
--- a/modules/timeutil/since.go
+++ b/modules/timeutil/since.go
@@ -114,11 +114,25 @@ func timeSincePro(then, now time.Time, lang translation.Locale) string {
 	return strings.TrimPrefix(timeStr, ", ")
 }
 
+func timeSinceUnix(then, now time.Time, lang translation.Locale) template.HTML {
+	friendlyText := then.Format("2006-01-02 15:04:05 +07:00")
+
+	// document: https://github.com/github/relative-time-element
+	attrs := `tense="past"`
+	isFuture := now.Before(then)
+	if isFuture {
+		attrs = `tense="future"`
+	}
+
+	// declare data-tooltip-content attribute to switch from "title" tooltip to "tippy" tooltip
+	htm := fmt.Sprintf(`<relative-time class="time-since" prefix="" %s datetime="%s" data-tooltip-content data-tooltip-interactive="true">%s</relative-time>`,
+		attrs, then.Format(time.RFC3339), friendlyText)
+	return template.HTML(htm)
+}
+
 // TimeSince renders relative time HTML given a time.Time
 func TimeSince(then time.Time, lang translation.Locale) template.HTML {
-	timestamp := then.UTC().Format(time.RFC3339)
-	// declare data-tooltip-content attribute to switch from "title" tooltip to "tippy" tooltip
-	return template.HTML(fmt.Sprintf(`<relative-time class="time-since" prefix="%s" datetime="%s" data-tooltip-content data-tooltip-interactive="true">%s</relative-time>`, lang.Tr("on_date"), timestamp, timestamp))
+	return timeSinceUnix(then, time.Now(), lang)
 }
 
 // TimeSinceUnix renders relative time HTML given a TimeStamp
diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini
index f71ea824e9..c2c8f1e120 100644
--- a/options/locale/locale_en-US.ini
+++ b/options/locale/locale_en-US.ini
@@ -112,8 +112,6 @@ never = Never
 
 rss_feed = RSS Feed
 
-on_date = on
-
 [aria]
 navbar = Navigation Bar
 footer = Footer
@@ -3129,8 +3127,6 @@ starred_repo = starred <a href="%[1]s">%[2]s</a>
 watched_repo = started watching <a href="%[1]s">%[2]s</a>
 
 [tool]
-ago = %s ago
-from_now = %s from now
 now = now
 future = future
 1s = 1 second
diff --git a/routers/web/devtest/devtest.go b/routers/web/devtest/devtest.go
index 784940909a..48875e306d 100644
--- a/routers/web/devtest/devtest.go
+++ b/routers/web/devtest/devtest.go
@@ -7,6 +7,7 @@ import (
 	"net/http"
 	"path"
 	"strings"
+	"time"
 
 	"code.gitea.io/gitea/modules/base"
 	"code.gitea.io/gitea/modules/context"
@@ -32,5 +33,14 @@ func List(ctx *context.Context) {
 }
 
 func Tmpl(ctx *context.Context) {
+	now := time.Now()
+	ctx.Data["TimeNow"] = now
+	ctx.Data["TimePast5s"] = now.Add(-5 * time.Second)
+	ctx.Data["TimeFuture5s"] = now.Add(5 * time.Second)
+	ctx.Data["TimePast2m"] = now.Add(-2 * time.Minute)
+	ctx.Data["TimeFuture2m"] = now.Add(2 * time.Minute)
+	ctx.Data["TimePast1y"] = now.Add(-1 * 366 * 86400 * time.Second)
+	ctx.Data["TimeFuture1y"] = now.Add(1 * 366 * 86400 * time.Second)
+
 	ctx.HTML(http.StatusOK, base.TplName("devtest"+path.Clean("/"+ctx.Params("sub"))))
 }
diff --git a/templates/devtest/gitea-ui.tmpl b/templates/devtest/gitea-ui.tmpl
index c5ab863d00..1ab9ae7b7c 100644
--- a/templates/devtest/gitea-ui.tmpl
+++ b/templates/devtest/gitea-ui.tmpl
@@ -1,12 +1,51 @@
 {{template "base/head" .}}
-<div class="page-content devtest">
+<div class="page-content devtest ui container">
+
 	<div>
-		<gitea-origin-url data-url="test/url"></gitea-origin-url>
-		<gitea-origin-url data-url="/test/url"></gitea-origin-url>
+		<h1>Tooltip</h1>
+		<div><span data-tooltip-content="test tooltip">text with tooltip</span></div>
+		<div><span data-tooltip-content="test tooltip" data-tooltip-interactive="true">text with interactive tooltip</span></div>
 	</div>
+
 	<div>
-		<span data-tooltip-content="test tooltip">text with tooltip</span>
+		<h1>GiteaOriginUrl</h1>
+		<div><gitea-origin-url data-url="test/url"></gitea-origin-url></div>
+		<div><gitea-origin-url data-url="/test/url"></gitea-origin-url></div>
 	</div>
-	{{template "shared/combomarkdowneditor" .}}
+
+	<div>
+		<h1>LocaleNumber</h1>
+		<div>{{LocaleNumber 1}}</div>
+		<div>{{LocaleNumber 12}}</div>
+		<div>{{LocaleNumber 123}}</div>
+		<div>{{LocaleNumber 1234}}</div>
+		<div>{{LocaleNumber 12345}}</div>
+		<div>{{LocaleNumber 123456}}</div>
+		<div>{{LocaleNumber 1234567}}</div>
+	</div>
+
+	<div>
+		<h1>TimeSince</h1>
+		<div>Now: {{TimeSince .TimeNow $.locale}}</div>
+		<div>5s past: {{TimeSince .TimePast5s $.locale}}</div>
+		<div>5s future: {{TimeSince .TimeFuture5s $.locale}}</div>
+		<div>2m past: {{TimeSince .TimePast2m $.locale}}</div>
+		<div>2m future: {{TimeSince .TimeFuture2m $.locale}}</div>
+		<div>1y past: {{TimeSince .TimePast1y $.locale}}</div>
+		<div>1y future: {{TimeSince .TimeFuture1y $.locale}}</div>
+	</div>
+
+	<div>
+		<h1>ComboMarkdownEditor</h1>
+		<div>ps: no JS code attached, so just a layout</div>
+		{{template "shared/combomarkdowneditor" .}}
+	</div>
+
+	<style>
+		h1 {
+			margin: 0;
+			padding: 10px 0;
+		}
+	</style>
 </div>
 {{template "base/footer" .}}
diff --git a/templates/package/view.tmpl b/templates/package/view.tmpl
index 9677b8eb09..7c622a91b3 100644
--- a/templates/package/view.tmpl
+++ b/templates/package/view.tmpl
@@ -84,9 +84,9 @@
 							<a class="ui right" href="{{$.PackageDescriptor.PackageWebLink}}/versions">{{.locale.Tr "packages.versions.view_all"}}</a>
 							<div class="ui relaxed list">
 							{{range .LatestVersions}}
-								<div class="item">
-									<a href="{{$.PackageDescriptor.PackageWebLink}}/{{PathEscape .LowerVersion}}">{{.Version}}</a>
-									<span class="text small">{{$.locale.Tr "on_date"}} {{.CreatedUnix.FormatDate}}</span>
+								<div class="item gt-df">
+									<a class="gt-f1" href="{{$.PackageDescriptor.PackageWebLink}}/{{PathEscape .LowerVersion}}">{{.Version}}</a>
+									<span class="text small">{{template "shared/datetime/short" (dict "Datetime" (.CreatedUnix.FormatDate) "Fallback" (.CreatedUnix.FormatDate))}}</span>
 								</div>
 							{{end}}
 							</div>