diff --git a/packages/ui-default/components/media/media.page.js b/packages/ui-default/components/media/media.page.js
new file mode 100644
index 000000000..c36877807
--- /dev/null
+++ b/packages/ui-default/components/media/media.page.js
@@ -0,0 +1,15 @@
+import { AutoloadPage } from 'vj/misc/Page';
+import request from 'vj/utils/request';
+
+export default new AutoloadPage('media', async () => {
+    const items = [];
+    const resolvers = [];
+    const users = $('div[data-user]');
+    users.get().forEach((ele) => {
+        items.push({ type: 'user', id: $(ele).text() });
+        resolvers.push((html) => $(ele).replaceWith($(html)));
+    });
+    if (!items.length) return;
+    const res = await request.post('/media', { items });
+    for (let i = 0; i < res.length; i++) resolvers[i](res[i]);
+});
diff --git a/packages/ui-default/components/profile/profile.page.styl b/packages/ui-default/components/profile/profile.page.styl
index fb3f85de2..5702d5259 100644
--- a/packages/ui-default/components/profile/profile.page.styl
+++ b/packages/ui-default/components/profile/profile.page.styl
@@ -1,14 +1,14 @@
 .user-profile-avatar
-  border-radius: 50%
+  border-radius: 50% !important
 
 .user-profile-badge
-  display: inline-block
-  font-size: rem(12px)
-  padding: rem(3px 4px)
-  line-height: 1
+  display: inline-block !important
+  font-size: rem(12px) !important
+  padding: rem(3px 4px) !important
+  line-height: 1 !important
 
   &:hover
-    text-decoration: none
+    text-decoration: none !important
 
 for n in (1..21)
   .user-profile-bg--{n}
diff --git a/packages/ui-default/handler.js b/packages/ui-default/handler.js
index 4af960370..2e8ff0f18 100644
--- a/packages/ui-default/handler.js
+++ b/packages/ui-default/handler.js
@@ -132,6 +132,24 @@ class MarkdownHandler extends Handler {
   }
 }
 
+class RichMediaHandler extends Handler {
+  constructor(args) {
+    super(args);
+    this.noCheckPermView = true;
+  }
+
+  async post({ domainId, items }) {
+    const res = [];
+    for (const item of items) {
+      if (item.type === 'user') {
+        const udoc = Number.isNaN(+item.id) ? await user.getByUname(domainId, item.id) : await user.getById(domainId, +item.id);
+        res.push(this.renderHTML('partials/user.html', { udoc }));
+      } else res.push('');
+    }
+    this.response.body = await Promise.all(res);
+  }
+}
+
 const getHash = (i) => {
   const shasum = crypto.createHash('sha1');
   const file = readFileSync(join(tmpdir(), 'hydro', 'public', i));
@@ -160,4 +178,5 @@ global.Hydro.handler.ui = async () => {
   Route('set_theme', '/set_theme/:id', SetThemeHandler);
   Route('ui_extracss', '/extra.css', UiSettingsHandler);
   Route('markdown', '/markdown', MarkdownHandler);
+  Route('media', '/media', RichMediaHandler);
 };
diff --git a/packages/ui-default/misc/typography.styl b/packages/ui-default/misc/typography.styl
index 4746919d3..4f5b25e35 100644
--- a/packages/ui-default/misc/typography.styl
+++ b/packages/ui-default/misc/typography.styl
@@ -251,7 +251,8 @@ small, figcaption
 
 .typo a, .typo .link, .typo-a
   &, &:visited, &:active, &:hover
-    color: $primary-color
+    :not(.user-profile-name)
+      color: $primary-color
 
 .typo p, .typo dl, .typo form, .typo hr, .typo table
   padding-top: 0.3em
diff --git a/packages/ui-default/package.json b/packages/ui-default/package.json
index beb056d8c..826710cd4 100644
--- a/packages/ui-default/package.json
+++ b/packages/ui-default/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@hydrooj/ui-default",
-  "version": "4.8.30",
+  "version": "4.8.31",
   "author": "undefined <i@undefined.moe>",
   "license": "AGPL-3.0",
   "main": "hydro.js",
diff --git a/packages/ui-default/templates/components/user.html b/packages/ui-default/templates/components/user.html
index 547a9862f..2d60503df 100644
--- a/packages/ui-default/templates/components/user.html
+++ b/packages/ui-default/templates/components/user.html
@@ -5,7 +5,7 @@
     <img class="small user-profile-avatar v-center" src="{{ avatarUrl(udoc.avatar|default('')) }}" width="20" height="20">
   {% endif %}
   <a class="user-profile-name" href="{{ url('user_detail', uid=udoc._id) }}">
-    {% if udoc.displayName %}
+    {% if udoc.displayName and udoc.displayName != udoc.uname %}
       {{ udoc.displayName }} ({{ udoc.uname }})
     {% else %}
       {{ udoc.uname }}
diff --git a/packages/ui-default/templates/partials/user.html b/packages/ui-default/templates/partials/user.html
new file mode 100644
index 000000000..9e15ce9e4
--- /dev/null
+++ b/packages/ui-default/templates/partials/user.html
@@ -0,0 +1,2 @@
+{% import "components/user.html" as user with context %}
+{{ user.render_inline(udoc) }}
\ No newline at end of file
diff --git a/packages/ui-default/utils/request.js b/packages/ui-default/utils/request.js
index 929848619..849bd6913 100644
--- a/packages/ui-default/utils/request.js
+++ b/packages/ui-default/utils/request.js
@@ -73,10 +73,8 @@ const request = {
       postData = dataOrForm;
     } else {
       // {foo: 'bar'}
-      postData = $.param({
-        csrfToken: UiContext.csrfToken,
-        ...dataOrForm,
-      }, true);
+      postData = JSON.stringify(dataOrForm);
+      options.contentType = 'application/json';
     }
     return request.ajax({
       url,