diff --git a/templates/chart.html b/templates/chart.html
index f18f0e8..170497c 100644
--- a/templates/chart.html
+++ b/templates/chart.html
@@ -17,7 +17,7 @@
                 </select>
             </div>
             <div class="col-4">
-                <button type="button" class="btn btn-secondary" onclick="back()">返回</button>
+                <button type="button" class="btn btn-outline-secondary" onclick="back()">返回</button>
             </div>
         </div>
     </div>
diff --git a/templates/dinner.html b/templates/dinner.html
index fbb9b2e..2b3440f 100644
--- a/templates/dinner.html
+++ b/templates/dinner.html
@@ -4,12 +4,18 @@
     {{ super() }}
 {% endblock %}
 {% block content %}
-    <p>每天8:00-17:30间开放匿名投票更新，17:30以后允许发起抽签，抽签结果确定后不可更改</p>
-    <p>第一名与第二名得票数相差不超过10%时随机抽签，按其得票数决定中签概率，否则选择第一名</p>
-    <p>投票结果仅供参考，最终解释权归部门总经理、副总经理所有</p>
-    {% for last_result in last_results %}
-        <p>今日{{ last_result.value }}最终得票数降低{{ 2 + loop.index0 }}0%</p>
-    {% endfor %}
+    <div class="border rounded p-2 mb-2 text-start" style="text-indent: 2em">
+        <div class="m-1">每天8:00-17:30间开放匿名投票更新，17:30以后允许发起抽签，抽签结果确定后不可更改。</div>
+        <div class="m-1">第一名与第二名得票数相差不超过<strong>10%</strong>时随机抽签，按其得票数决定中签概率，否则选择第一名。
+        </div>
+        <div class="m-1">投票结果仅供参考，最终解释权归部门总经理、副总经理所有。</div>
+    </div>
+    <div class="alert alert-light text-start" role="alert" style="text-indent: 2em">
+        {% for last_result in last_results %}
+            <div class="m-1">
+                今日<strong>{{ last_result.value }}</strong>最终得票数降低<strong>{{ 2 + loop.index0 }}0%</strong></div>
+        {% endfor %}
+    </div>
     <form id="inputForm" class="form-inline" onsubmit="return false;">
         <div class="form-group">
             <div class="mb-3">
@@ -20,39 +26,44 @@
                            id="inputName" name="nickname" value="{{ user_menu.nickname }}">
                 </div>
             </div>
-            <div class="mb-3">
+            <div class="mb-2">
                 <label class="input-group-addon">我选择</label>
             </div>
-            {% for choice in all_choice %}
-                <div class="mb-3 row">
-                    <div class="col-9">
-                        <div class="input-group">
-                            <label for="range{{ loop.index }}" class="form-label">
+            <div class="mb-3 row p-2">
+                {% for choice in all_choice %}
+                    <div class="col-6 mb-1 p-1 border rounded {{ loop.cycle("rounded-end-0", "border-start-0 rounded-start-0") }}">
+                        <div class="row">
+                            <label for="range{{ loop.index }}" class="col-12">
                                 <span>{{ choice.label }} - </span>
-                                <span class="percentage">{{ '{:.2f}'.format((user_menu.menu.get(choice.name) or 0) * 100) }}</span>%
+                                <span class="percentage">{{ '{:.2f}'.format((user_menu.menu.get(choice.name) or 0) * 100) }}</span>
+                                <span>%</span>
                             </label>
-                            <input type="range" class="form-range" data-skip-falsy="true"
-                                   id="range{{ loop.index }}" name="choice[{{ choice.name }}]:number"
-                                   min="0" max="10" step="1"
-                                   value="{{ (user_menu.menu.get(choice.name) or 0) * 10 }}">
+                        </div>
+                        <div class="d-flex justify-content-between">
+                            <div class="col-8">
+                                <input type="range" class="form-range" data-skip-falsy="true"
+                                       id="range{{ loop.index }}" name="choice[{{ choice.name }}]:number"
+                                       min="0" max="10" step="1"
+                                       value="{{ (user_menu.menu.get(choice.name) or 0) * 10 }}">
+                            </div>
+                            <div class="col-4">
+                                <input class="form-check-input" type="checkbox" name="dislike[]"
+                                       id="checkDislike{{ loop.index }}" value="{{ choice.name }}"
+                                        {{ 'checked' if choice.name in user_menu.dislike else '' }}>
+                                <label class="form-check-label" for="checkDislike{{ loop.index }}">
+                                    不吃
+                                </label>
+                            </div>
                         </div>
                     </div>
-                    <div class="col-3">
-                        <input class="form-check-input" type="checkbox" name="dislike[]"
-                               id="checkDislike{{ loop.index }}" value="{{ choice.name }}"
-                                {{ 'checked' if choice.name in user_menu.dislike else '' }}>
-                        <label class="form-check-label" for="checkDislike{{ loop.index }}">
-                            不吃
-                        </label>
-                    </div>
-                </div>
-            {% endfor %}
+                {% endfor %}
+            </div>
         </div>
     </form>
-    <button type="button" class="btn btn-primary" onclick="update()">更新</button>
-    <button type="button" class="btn btn-secondary" onclick="clearValue()">不吃</button>
+    <button type="button" class="btn btn-outline-primary" onclick="update()">更新</button>
+    <button type="button" class="btn btn-outline-secondary" onclick="clearValue()">不吃</button>
     <button type="button" id="btnRoll"
-            class="btn btn-secondary" {{ "" if can_roll == True else ' disabled="disabled"' | safe }}
+            class="btn btn-outline-secondary" {{ "" if can_roll == True else ' disabled="disabled"' | safe }}
             onclick="roll()">开始抽签
     </button>
     <div class="pt-3">
@@ -91,7 +102,8 @@
         <label class="mb-2">最近点餐结果</label>
         <ul class="list-group">
             {% for recent_result in recent_results %}
-                <li onclick="viewChart('{{ recent_result.datestr }}')" class="list-group-item d-flex justify-content-between align-items-center">
+                <li onclick="viewChart('{{ recent_result.datestr }}')"
+                    class="list-group-item d-flex justify-content-between align-items-center">
                     <span>{{ recent_result.value }}</span>
                     <span>{{ recent_result.datestr }}</span>
                 </li>
@@ -118,7 +130,7 @@
             const summary = values.reduce((a, b) => parseInt(a) + parseInt(b));
             const spans = $(".percentage")
             for (let i = 0; i < values.length; i++) {
-                spans[i].innerHTML = summary > 0 ? (parseFloat(values[i]) * 100 / summary).toFixed(2) : 0;
+                spans[i].innerHTML = summary > 0 ? (parseFloat(values[i]) * 100 / summary).toFixed(2) : '0.00';
                 if (values[i] > 0 && checkBoxs[i].checked) {
                     checkBoxs[i].checked = false;
                 }