diff --git a/packages/ui-default/backendlib/template.js b/packages/ui-default/backendlib/template.js
index 625b1a094..dec33ffac 100644
--- a/packages/ui-default/backendlib/template.js
+++ b/packages/ui-default/backendlib/template.js
@@ -134,6 +134,7 @@ nunjucks.runtime.memberLookup = function memberLookup(obj, val) {
 };
 const env = new Nunjucks();
 env.addGlobal('static_url', (assetName) => {
+  // DEPRECATED
   const cdnPrefix = process.env.DEV ? '/' : global.Hydro.model.system.get('server.cdn');
   return `${cdnPrefix}${assetName}`;
 });
diff --git a/packages/ui-default/package.json b/packages/ui-default/package.json
index c002d8816..38463b56d 100644
--- a/packages/ui-default/package.json
+++ b/packages/ui-default/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@hydrooj/ui-default",
-  "version": "4.38.13",
+  "version": "4.38.14",
   "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 0cf8da7bc..f702e466a 100644
--- a/packages/ui-default/templates/components/user.html
+++ b/packages/ui-default/templates/components/user.html
@@ -32,7 +32,7 @@
 {% else %}
   <span class="user-profile-link">
     {% if avatar %}
-      <img class="small user-profile-avatar v-center" src="{{ static_url('img/avatar.png') }}" width="20" height="20">
+      <img class="small user-profile-avatar v-center" src="{{ UiContext.cdn_prefix }}img/avatar.png" width="20" height="20">
     {% endif %}
     <a class="user-profile-name" href="#">
       {{ _('Unknown User') }}
diff --git a/packages/ui-default/templates/layout/html5.html b/packages/ui-default/templates/layout/html5.html
index cfec74501..b3d088b47 100644
--- a/packages/ui-default/templates/layout/html5.html
+++ b/packages/ui-default/templates/layout/html5.html
@@ -12,17 +12,18 @@
   <meta http-equiv="X-UA-Compatible" content="chrome=1"/>
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
 
-  <link rel="apple-touch-icon" sizes="180x180" href="{{ static_url('apple-touch-icon-180x180.png') }}">
-  <link rel="icon" type="image/png" href="{{ static_url('favicon-32x32.png') }}" sizes="32x32">
-  <link rel="icon" type="image/png" href="{{ static_url('android-chrome-192x192.png') }}" sizes="192x192">
-  <link rel="icon" type="image/png" href="{{ static_url('favicon-96x96.png') }}" sizes="96x96">
-  <link rel="icon" type="image/png" href="{{ static_url('favicon-16x16.png') }}" sizes="16x16">
+  <link rel="apple-touch-icon" sizes="180x180" href="{{ UiContext.cdn_prefix }}apple-touch-icon-180x180.png">
+  <link rel="icon" type="image/png" href="{{ UiContext.cdn_prefix }}favicon-32x32.png" sizes="32x32">
+  <link rel="icon" type="image/png" href="{{ UiContext.cdn_prefix }}android-chrome-192x192.png" sizes="192x192">
+  <link rel="icon" type="image/png" href="{{ UiContext.cdn_prefix }}favicon-96x96.png" sizes="96x96">
+  <link rel="icon" type="image/png" href="{{ UiContext.cdn_prefix }}favicon-16x16.png" sizes="16x16">
+  <link rel="canonical" href="{{ model.system.get('server.url') }}{{ handler.ctx.request.url.substring(1) }}">
   <meta name="theme-color" content="#56758f">
   {% block ogp %}
   <meta property="og:site_name" content="{{ (handler.domain|default({ui:[]})).ui.name|default(model.system.get('server.name')) }}" />
   <meta property="og:title" content="{{ handler.renderTitle(page_name) }}" />
   <meta property="og:url" content="{{ model.system.get('server.url') }}{{ handler.ctx.request.path.slice(1) }}" />
-  <meta property="og:image" content="{{ static_url('favicon-96x96.png') }}" />
+  <meta property="og:image" content="{{ UiContext.cdn_prefix }}favicon-96x96.png" />
   {% endblock %}
   <title>{{ handler.renderTitle(page_name) }}</title>
   <style>
@@ -35,7 +36,7 @@
   {% if process.env.DEV %}
     <link rel="stylesheet" media="all" href="/default.theme.css">
   {% else %}
-    <link rel="stylesheet" media="all" href="{{ static_url('default-' + global.Hydro.version['ui-default'] +'.theme.css') }}">
+    <link rel="stylesheet" media="all" href="{{ UiContext.cdn_prefix }}default-{{ global.Hydro.version['ui-default'] }}.theme.css">
   {% endif %}
   {% if not isIE(handler.request.headers['user-agent']) %}
     <script>
@@ -46,7 +47,7 @@
       } catch(e) {
         const s = document.createElement('script');
         s.async = false;
-        s.src = "{{ '/polyfill.js' if process.env.DEV else static_url('polyfill-' + global.Hydro.version['ui-default'] + '.js') }}";
+        s.src = "{{ '/polyfill.js' if process.env.DEV else (UiContext.cdn_prefix + 'polyfill-' + global.Hydro.version['ui-default'] + '.js') }}";
         document.head.appendChild(s);
       }
     </script>
@@ -59,7 +60,7 @@
       var UiContext = '{{ UiContext|json|jsesc|safe }}';
       var UserContext = '{{ UserContext|json|jsesc|safe }}';
     </script>
-    <script type="text/javascript" src="{{ static_url('l/'+_('__id')) }}"></script>
+    <script type="text/javascript" src="{{ UiContext.cdn_prefix }}l/{{ _('__id') }}"></script>
     {% if process.env.DEV and vite %}
       <script type="module">
         import RefreshRuntime from 'http://localhost:3000/@react-refresh'
@@ -71,11 +72,11 @@
       <script type="module" src="http://localhost:3000/@vite/client"></script>
       <script type="module" src="http://localhost:3000/entry.js"></script>
     {% else %}
-      <script src="{{ static_url('default.theme.js') }}?version={{ global.Hydro.version['ui-default'] }}"></script>
+      <script src="{{ UiContext.cdn_prefix }}default.theme.js?version={{ global.Hydro.version['ui-default'] }}"></script>
       {% if process.env.DEV %}
         <script type="text/javascript" src="/hydro.js"></script>
       {% else %}
-        <script type="text/javascript" src="{{ static_url('hydro-'+global.Hydro.version['ui-default']+'.js') }}"></script>
+        <script type="text/javascript" src="{{ UiContext.cdn_prefix }}hydro-{{ global.Hydro.version['ui-default'] }}.js"></script>
       {% endif %}
     {% endif %}
   {% endif %}