diff --git a/packages/ui-default/locales/zh.yaml b/packages/ui-default/locales/zh.yaml
index 470317b2d..8d6228a0d 100644
--- a/packages/ui-default/locales/zh.yaml
+++ b/packages/ui-default/locales/zh.yaml
@@ -494,6 +494,7 @@ It works!: 它成了！
 Italic: 斜体
 Join Domain to Create a Discussion: 加入域后创建讨论
 Join Domain to Submit: 加入域后递交
+Join Domain: 加入域
 Join: 加入
 Judge Config: 评测设置
 Judge Status: 评测状态
diff --git a/packages/ui-default/pages/home_domain.page.tsx b/packages/ui-default/pages/home_domain.page.tsx
new file mode 100644
index 000000000..e89dba948
--- /dev/null
+++ b/packages/ui-default/pages/home_domain.page.tsx
@@ -0,0 +1,41 @@
+import $ from 'jquery';
+import DomainSelectAutoComplete from 'vj/components/autocomplete/DomainSelectAutoComplete';
+import { ActionDialog } from 'vj/components/dialog';
+import { NamedPage } from 'vj/misc/Page';
+import { i18n, tpl } from 'vj/utils';
+
+export default new NamedPage('home_domain', () => {
+  $(tpl(
+    <div style={{ display: 'none' }} className="dialog__body--join-domain" id="join-domain-dialog">
+      <div className="row"><div className="columns">
+        <h1>{i18n('Join Domain')}</h1>
+      </div></div>
+      <div className="row">
+        <div className="columns">
+          <label>
+            {i18n('Domain ID')}
+            <div className="textbox-container">
+              <input name="domainId" type="text" className="textbox" data-autofocus />
+            </div>
+          </label>
+        </div>
+      </div>
+    </div>,
+  )).appendTo(document.body);
+  const selector: any = DomainSelectAutoComplete.getOrConstruct($('#join-domain-dialog [name="domainId"]'));
+
+  $(document).on('click', '[id="join-domain-button"]', async () => {
+    const action = await new ActionDialog({
+      $body: $('.dialog__body--join-domain > div'),
+      onDispatch(a) {
+        if (a === 'ok' && selector.value() === null) {
+          selector.focus();
+          return false;
+        }
+        return true;
+      },
+    }).open();
+    if (action !== 'ok') return;
+    window.location.href = `/domain/join?target=${encodeURIComponent(selector.value()._id.toString())}`;
+  });
+});
diff --git a/packages/ui-default/pages/problem_main.page.ts b/packages/ui-default/pages/problem_main.page.ts
index fc23662fc..bd326751c 100644
--- a/packages/ui-default/pages/problem_main.page.ts
+++ b/packages/ui-default/pages/problem_main.page.ts
@@ -184,23 +184,6 @@ async function handleOperation(operation) {
     }).open();
     if (action !== 'yes') return;
   } else if (operation === 'copy') {
-    $(tpl`
-      <div style="display: none" class="dialog__body--problem-copy">
-        <div class="row"><div class="columns">
-          <h1 name="select_user_hint">${i18n('Copy Problems')}</h1>
-        </div></div>
-        <div class="row">
-          <div class="columns">
-            <label>
-              ${i18n('Target')}
-              <div class="textbox-container">
-                <input name="target" type="text" class="textbox" data-autofocus>
-              </div>
-            </label>
-          </div>
-        </div>
-      </div>
-    `).appendTo(document.body);
     const domainSelector: any = DomainSelectAutoComplete.getOrConstruct($('.dialog__body--problem-copy [name="target"]'));
     const copyDialog = await new ActionDialog({
       $body: $('.dialog__body--problem-copy > div'),
@@ -303,6 +286,23 @@ const page = new NamedPage(['problem_main'], () => {
   const $body = $('body');
   $body.addClass('display-mode');
   $('.section.display-mode').removeClass('display-mode');
+  $(tpl`
+    <div style="display: none" class="dialog__body--problem-copy">
+      <div class="row"><div class="columns">
+        <h1 name="select_user_hint">${i18n('Copy Problems')}</h1>
+      </div></div>
+      <div class="row">
+        <div class="columns">
+          <label>
+            ${i18n('Target')}
+            <div class="textbox-container">
+              <input name="target" type="text" class="textbox" data-autofocus>
+            </div>
+          </label>
+        </div>
+      </div>
+    </div>
+  `).appendTo(document.body);
 
   buildSearchContainer();
   buildLegacyCategoryFilter();
diff --git a/packages/ui-default/templates/home_domain.html b/packages/ui-default/templates/home_domain.html
index dab5fca7a..5e5203c2c 100644
--- a/packages/ui-default/templates/home_domain.html
+++ b/packages/ui-default/templates/home_domain.html
@@ -6,6 +6,9 @@
     <div class="section__tools">
     {% if handler.user.hasPriv(model.builtin.PRIV.PRIV_CREATE_DOMAIN) %}
       <a class="primary rounded button" href="{{ url('home_domain_create') }}"><span class="icon icon-add"></span> {{ _('Create Domain') }}</a>
+    {% endif %}
+    {% if handler.user.hasPriv(model.builtin.PRIV.PRIV_USER_PROFILE) %}
+      <button class="primary rounded button nojs--hide" id="join-domain-button"><span class="icon icon-add"></span> {{ _('Join Domain') }}</button>
     {% endif %}
       <a class="tool-button" href="{{ url('wiki_help', anchor='domain') }}"><span class="icon icon-help"></span> {{ _("What's domain?") }}</a>
     </div>