diff --git a/modules/problem.js b/modules/problem.js
index bbdc621..5ef2978 100644
--- a/modules/problem.js
+++ b/modules/problem.js
@@ -49,6 +49,40 @@ app.get('/problems', async (req, res) => {
   }
 });
 
+app.get('/problems/search', async (req, res) => {
+  try {
+    let id = parseInt(req.query.keyword) || 0;
+
+    let where = {
+      $or: {
+        title: { like: `%${req.query.keyword}%` },
+        id: id
+      }
+    };
+
+    let order = [syzoj.db.literal('`id` = ' + id + ' DESC')];
+
+    let paginate = syzoj.utils.paginate(await Problem.count(where), req.query.page, syzoj.config.page.problem);
+    let problems = await Problem.query(paginate, where, order);
+
+    await problems.forEachAsync(async problem => {
+      problem.allowedEdit = await problem.isAllowedEditBy(res.locals.user);
+      problem.judge_state = await problem.getJudgeState(res.locals.user, true);
+      problem.tags = await problem.getTags();
+    });
+
+    res.render('problems', {
+      problems: problems,
+      paginate: paginate
+    });
+  } catch (e) {
+    syzoj.log(e);
+    res.render('error', {
+      err: e
+    });
+  }
+});
+
 app.get('/problems/tag/:tagIDs', async (req, res) => {
   try {
     let tagIDs = Array.from(new Set(req.params.tagIDs.split(',').map(x => parseInt(x))));
diff --git a/views/index.ejs b/views/index.ejs
index da19f0b..d35e157 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -123,13 +123,15 @@
         <% } %>
       <h4 class="ui top attached block header">搜索题目</h4>
       <div class="ui bottom attached segment">
-        <div class="ui search" style="width: 100%; ">
-          <div class="ui left icon input" style="width: 100%; ">
-            <input class="prompt" style="width: 100%; " type="text" placeholder="ID / 题目名 …">
-            <i class="search icon"></i>
+        <form action="<%= syzoj.utils.makeUrl(['problems', 'search']) %>" method="get">
+          <div class="ui search" style="width: 100%; ">
+            <div class="ui left icon input" style="width: 100%; ">
+              <input class="prompt" style="width: 100%; " type="text" placeholder="ID / 题目名 …" name="keyword">
+              <i class="search icon"></i>
+            </div>
+            <div class="results" style="width: 100%; "></div>
           </div>
-          <div class="results" style="width: 100%; "></div>
-        </div>
+        </form>
       </div>
       <h4 class="ui top attached block header">近期比赛</h4>
       <div class="ui bottom attached <% if (!contests || !contests.length) { %>center aligned <% } %>segment">
diff --git a/views/problems.ejs b/views/problems.ejs
index e86f80a..bd2e3ce 100644
--- a/views/problems.ejs
+++ b/views/problems.ejs
@@ -22,6 +22,16 @@ if (typeof tags !== 'undefined') tagIDs = tags.map(x => x.id);
                 <%= tag.name %>
               </a>
           <% } %>
+        <% } else { %>
+          <form action="<%= syzoj.utils.makeUrl(['problems', 'search']) %>" method="get">
+            <div class="ui search" style="width: 280px; height: 28px; margin-top: -5.3px; ">
+              <div class="ui left icon input" style="width: 100%; ">
+                <input class="prompt" style="width: 100%; " type="text" placeholder="ID / 题目名 …" name="keyword">
+                <i class="search icon"></i>
+              </div>
+              <div class="results" style="width: 100%; "></div>
+            </div>
+          </form>
         <% } %>
       </div>
       <div class="nine wide right aligned column">
@@ -148,5 +158,19 @@ $(function () {
   $('#add_problem_dropdown').dropdown();
 });
 </script>
+<script>
+$(function () {
+  $('.ui.search').search({
+    debug: true,
+    apiSettings: {
+      url: '/api/v2/search/problems/{query}',
+      cache: false
+    },
+    fields: {
+      title: 'name'
+    }
+  });
+});
+</script>
 </div>
 <% include footer %>