diff --git a/packages/ui-default/build/config/webpack.js b/packages/ui-default/build/config/webpack.js
index 0a53b261d..f25ba7233 100644
--- a/packages/ui-default/build/config/webpack.js
+++ b/packages/ui-default/build/config/webpack.js
@@ -67,7 +67,7 @@ export default function (env = {}) {
     context: root(),
     entry: {
       hydro: './entry.js',
-      'theme.default': './theme/default.js',
+      'default.theme': './theme/default.js',
       // 'theme.98': './theme/98.js',
     },
     output: {
diff --git a/packages/ui-default/handler.js b/packages/ui-default/handler.js
index 290faca75..a296f3e18 100644
--- a/packages/ui-default/handler.js
+++ b/packages/ui-default/handler.js
@@ -4,10 +4,10 @@ const { join } = require('path');
 const crypto = require('crypto');
 const yaml = require('js-yaml');
 const { tmpdir } = require('os');
+const bus = require('hydrooj/dist/service/bus');
 const markdown = require('./backendlib/markdown.js');
 
-const { bus } = global.Hydro.service;
-const { system, domain } = global.Hydro.model;
+const { system, domain, user } = global.Hydro.model;
 const { Route, Handler, UiContextBase } = global.Hydro.service.server;
 
 class WikiHelpHandler extends Handler {
@@ -94,6 +94,13 @@ class LocaleHandler extends Handler {
   }
 }
 
+class SetThemeHandler extends Handler {
+  async get({ theme }) {
+    await user.setById(this.user._id, { theme });
+    this.back();
+  }
+}
+
 class MarkdownHandler extends Handler {
   async post({ text, html = false, inline = false }) {
     this.response.body = inline
@@ -104,16 +111,20 @@ class MarkdownHandler extends Handler {
   }
 }
 
+const getUrl = (files) => files.map((i) => {
+  const shasum = crypto.createHash('sha1');
+  const file = readFileSync(join(tmpdir(), 'hydro', 'public', i));
+  shasum.update(file);
+  const hash = shasum.digest('hex').substr(0, 10);
+  return `/${i}?${hash}`;
+});
+
 bus.on('app/started', () => {
   const files = readdirSync(join(tmpdir(), 'hydro', 'public'));
   const pages = files.filter((file) => file.endsWith('.page.js'));
-  UiContextBase.extraPages = pages.map((i) => {
-    const shasum = crypto.createHash('sha1');
-    const file = readFileSync(join(tmpdir(), 'hydro', 'public', i));
-    shasum.update(file);
-    const hash = shasum.digest('hex').substr(0, 10);
-    return `/${i}?${hash}`;
-  });
+  const themes = files.filter((file) => file.endsWith('.theme.js'));
+  UiContextBase.extraPages = getUrl(pages);
+  UiContextBase.themes = getUrl(themes);
 });
 
 global.Hydro.handler.ui = async () => {
@@ -121,6 +132,7 @@ global.Hydro.handler.ui = async () => {
   Route('wiki_about', '/wiki/about', WikiAboutHandler);
   Route('ui_constants', '/ui-constants.js', UiConstantsHandler);
   Route('locale', '/locale/:id', LocaleHandler);
+  Route('set_theme', '/set_theme/:id', SetThemeHandler);
   Route('ui_extracss', '/extra.css', UiSettingsHandler);
   Route('markdown', '/markdown', MarkdownHandler);
 };
diff --git a/packages/ui-default/pages/problem_edit.page.js b/packages/ui-default/pages/problem_edit.page.js
index 19393dcd8..f383a971b 100644
--- a/packages/ui-default/pages/problem_edit.page.js
+++ b/packages/ui-default/pages/problem_edit.page.js
@@ -142,7 +142,7 @@ function buildCategoryFilter() {
   });
 }
 
-const page = new NamedPage('problem_edit', async () => {
+export default new NamedPage(['problem_create', 'problem_edit'], () => {
   $(document).on('click', '[name="problem-sidebar__show-category"]', (ev) => {
     $(ev.currentTarget).hide();
     $('[name="problem-sidebar__categories"]').show();
@@ -171,5 +171,3 @@ const page = new NamedPage('problem_edit', async () => {
   buildCategoryFilter();
   parseCategorySelection();
 });
-
-export default page;
diff --git a/packages/ui-default/templates/layout/html5.html b/packages/ui-default/templates/layout/html5.html
index 682fa80e8..6fb687bf5 100644
--- a/packages/ui-default/templates/layout/html5.html
+++ b/packages/ui-default/templates/layout/html5.html
@@ -26,7 +26,7 @@
   <meta property="og:url" content="{{ handler.ctx.request.href }}" />
   <meta property="og:image" content="{{ static_url('favicon-96x96.png') }}" />
   {% endblock %}
-  <link rel="stylesheet" media="all" href="{{ static_url('theme.' + handler.user.theme|default('default') + '.css') }}">
+  <link rel="stylesheet" media="all" href="{{ static_url(handler.user.theme|default('default') + '.theme.js') }}">
   <link rel="stylesheet" media="all" href="{{ url('ui_extracss') }}">
   <title>{{ handler.renderTitle(page_name) }}</title>
   {% if not isIE(handler.request.headers['user-agent']) %}
diff --git a/packages/ui-default/templates/partials/footer.html b/packages/ui-default/templates/partials/footer.html
index 64187626b..0a85aed44 100644
--- a/packages/ui-default/templates/partials/footer.html
+++ b/packages/ui-default/templates/partials/footer.html
@@ -57,6 +57,13 @@
               <li class="menu__item"><a class="menu__link" href="{{ url('switch_language', lang=k) }}">{{ v }}</a></li>
             {%- endfor -%}
             </ol>
+            <li class="footer__extra-link-item" data-dropdown-target="#menu-footer-theme">
+            <span><span class="icon icon-global"></span> Theme <span class="icon icon-expand_less"></span></span>
+            <ol class="dropdown-target menu" id="menu-footer-theme">
+            {%- for k in UiContext.themes -%}
+              <li class="menu__item"><a class="menu__link" href="{{ url('set_theme', theme=k) }}">{{ k }}</a></li>
+            {%- endfor -%}
+            </ol>
           </li>
         </ol>
       </div>
diff --git a/packages/ui-default/templates/problem_edit.html b/packages/ui-default/templates/problem_edit.html
index c6a4b83c4..3e94d9765 100644
--- a/packages/ui-default/templates/problem_edit.html
+++ b/packages/ui-default/templates/problem_edit.html
@@ -73,12 +73,12 @@
         {% include "partials/category.html" %}
       </div>
     </div>
-  {% if page_name == 'problem_edit' %}
-    {% set owner_udoc = udoc %}
-    {% include "partials/problem_sidebar.html" %}
-  {% else %}
-    {% include 'components/md_hint.html' %}
-  {% endif %}
+    {% if page_name == 'problem_edit' %}
+      {% set owner_udoc = udoc %}
+      {% include "partials/problem_sidebar.html" %}
+    {% else %}
+      {% include 'components/md_hint.html' %}
+    {% endif %}
   </div>
 </div>
 {% endblock %}