diff --git a/app.py b/app.py
index 7437ee9..80f06ef 100644
--- a/app.py
+++ b/app.py
@@ -8,14 +8,37 @@
 
 # here put the import lib
 import os
-from flask import Flask, request, render_template
+import lib.elo as elo
+import lib.utils as utils
+from flask import Flask, request, redirect, render_template
 
-app = Flask(__name__, template_folder='./public/', static_folder='./public/static/')
+P0 = None
+P1 = None
+ses = utils.get_session()
+app = Flask(__name__, template_folder='./templates/', static_folder='./static/')
 app.config['ROOT_FOLDER'] = os.path.abspath('.')
 
-@app.route('/')
+@app.route('/', methods=["GET"])
+@app.route('/new', methods=["GET"])
 def root():
-    return render_template('index.html')
+    global P0, P1
+    P0, P1 = utils.match(ses)
+    return render_template(
+        'index.html',
+        p0src='./static/pic/{:d}.jpeg'.format(P0.id),
+        p0name=P0.name,
+        p0work='{:.2f}'.format(P0.rate),
+        p1src='./static/pic/{:d}.jpeg'.format(P1.id),
+        p1name=P1.name,
+        p1work='{:.2f}'.format(P1.rate)
+    )
+
+@app.route('/elo', methods=["GET"])
+def elo_res():
+    res = request.args.get('win')
+    elo.set_result(P0, P1, int(res))
+    ses.commit()
+    return redirect('/new')
 
 
 if __name__ == '__main__':
diff --git a/lib/elo.py b/lib/elo.py
index 9eae196..e3d0d36 100644
--- a/lib/elo.py
+++ b/lib/elo.py
@@ -8,7 +8,7 @@
 
 # here put the import lib
 import math
-from db_init import Person
+from lib.db_init import Person
 
 def __compute_wre(A: Person, B: Person) -> float:
     '''compute win rate expectation (wre for short)
diff --git a/lib/utils.py b/lib/utils.py
index 32626a0..42ff651 100644
--- a/lib/utils.py
+++ b/lib/utils.py
@@ -7,17 +7,15 @@
 '''
 
 # here put the import lib
-import elo
 import math
-import random
 from typing import List
-from db_init import Person
+from lib.db_init import Person
 from sqlalchemy import create_engine
 from sqlalchemy.orm import sessionmaker
 from sqlalchemy.orm.session import Session
 from sqlalchemy.sql.expression import desc, func
 
-engine = create_engine('sqlite:///data.db', echo=False)
+engine = create_engine('sqlite:///data.db?check_same_thread=False', echo=False)
 session_maker = sessionmaker(bind=engine)
 
 def get_session() -> Session:
@@ -29,19 +27,18 @@ def get_session() -> Session:
     '''
     return session_maker()
 
-def get_person(id: int, ses: Session) -> Person:
-    '''get person by id
+def get_person(ses: Session) -> Person:
+    '''get random person
 
     Parameters
     ----------
-        id : person id
         ses : session
 
     Returns
     -------
         res : a person
     '''
-    res = ses.query(Person).filter_by(id=id).first()
+    res = ses.query(Person).order_by(func.random()).first()
     return res
 
 def get_enemy(P: Person, ses: Session, delta: float = 1.623354290020702) -> Person:
@@ -50,7 +47,7 @@ def get_enemy(P: Person, ses: Session, delta: float = 1.623354290020702) -> Pers
     If rate of P (r for short) is within the interval [r1, r2] with 90% certainly:
         Assuming that X obeys stand logistic distribution, so the possibility that X is in [-2.94443897916644,
         2.94443897916644] equals 0.9. The standard deviation of F is pi/sqrt(3)*gamma where gamma is shape
-        parameter. Assuming variance of r equals expectation mu, we have sqrt(mu) = pi/sqrt(3)*gamma. And x = 
+        parameter. Assuming variance of r equals expectation mu, we have sqrt(mu) = pi/sqrt(3)*gamma. And x =
         (r - mu) / gamma, so r = x * gamma + mu. Instead x with ±2.94443897916644, gamma = sqrt(3*mu)/pi, we get
         r = ±2.94443897916644 * sqrt(3*mu) / pi + mu = 1.623354290020702 * sqrt(mu) + mu.
 
@@ -76,5 +73,32 @@ def get_enemy(P: Person, ses: Session, delta: float = 1.623354290020702) -> Pers
     return res
 
 def get_rank(ses: Session, b: int = 1, len: int = 10) -> List[Person]:
+    '''get rank
+
+    Parameters
+    ----------
+        ses : session
+        b : offset subscript
+        len : length of list
+
+    Returns
+    -------
+        res : rank list between b and b+len-1
+    '''
     res = ses.query(Person).order_by(desc('rate')).offset(b-1).limit(len).all()
     return res
+
+def match(ses: Session) -> Person:
+    '''select two persons
+
+    Parameters
+    ----------
+        ses : session
+
+    Returns
+    -------
+         : two persons
+    '''
+    A = get_person(ses)
+    B = get_enemy(A, ses)
+    return A, B
diff --git a/public/static/jquery-3.1.1.min.js b/static/jquery-3.1.1.min.js
similarity index 100%
rename from public/static/jquery-3.1.1.min.js
rename to static/jquery-3.1.1.min.js
diff --git a/public/static/style.css b/static/style.css
similarity index 99%
rename from public/static/style.css
rename to static/style.css
index 3bc1071..7000669 100644
--- a/public/static/style.css
+++ b/static/style.css
@@ -19,7 +19,7 @@ a {
     color         : #ddd;
     text-decoration: none;
 }
-button {
+.bto {
     width         : 30%;
     height        : 100%;
     border        : none;
diff --git a/public/index.html b/templates/index.html
similarity index 76%
rename from public/index.html
rename to templates/index.html
index 81d44e3..13257a3 100644
--- a/public/index.html
+++ b/templates/index.html
@@ -39,20 +39,20 @@
                 <div class="row">
                     <div class="col-sm">
                         <div style="width: 36%;height: 60%;position: relative;">
-                            <img id="P1" alt="Person 1">
+                            <img id="P0" alt="Person 0" src={{ p0src }}>
                         </div>
                         <div style="margin: 2% auto;">
-                            姓名：<p id="N1"></p><br />
-                            代表作：<p id="M1"></p><br />
+                            姓名<br /><p id="N0">{{ p0name }}</p><br />
+                            代表作<br /><p id="W0">{{ p0work }}</p><br />
                         </div>
                     </div>
                     <div class="col-sm">
                         <div style="width: 36%;height: 60%;position: relative;">
-                            <img id="P2" alt="Person 2">
+                            <img id="P1" alt="Person 1" src={{ p1src }}>
                         </div>
                         <div style="margin: 2% auto;">
-                            姓名：<p id="N2"></p><br />
-                            代表作：<p id="M2"></p><br />
+                            姓名<br /><p id="N1">{{ p1name }}</p><br />
+                            代表作<br /><p id="W1">{{ p1work }}</p><br />
                         </div>
                     </div>
                 </div>
@@ -60,13 +60,13 @@
             <div style="height: 7%;width: 75%;margin-top: 2%;">
                 <div class="row">
                     <div class="col-sm">
-                        <button>Ta</button>
+                        <input class="bto" type="button" value="Ta" onclick="window.location.href='/elo?win=0'">
                     </div>
                     <div class="col-sm">
-                        <button>下一个</button>
+                        <input class="bto" type="button" value="下一个" onclick="window.location.href='/new'">
                     </div>
                     <div class="col-sm">
-                        <button>Ta</button>
+                        <input class="bto" type="button" value="Ta" onclick="window.location.href='/elo?win=1'">
                     </div>
                 </div>
             </div>
@@ -84,18 +84,6 @@
                     </div>
                 </div>
             </div>
-            <!-- <div class="footerRow2">
-                <div class="container">
-                    <div class="row">
-                        <div class="col-sm">
-                            © 2021 ELO Star
-                        </div>
-                        <div class="col-sm">
-                            <p>Made By <a href="https://foolishfox.cn">Fox</a></p>
-                        </div>
-                    </div>
-                </div>
-            </div> -->
         </footer>
     </body>
 </html>
\ No newline at end of file