diff --git a/src/accounting/templates/accounting/option/detail.html b/src/accounting/templates/accounting/option/detail.html
index 759ab34..1781206 100644
--- a/src/accounting/templates/accounting/option/detail.html
+++ b/src/accounting/templates/accounting/option/detail.html
@@ -38,26 +38,49 @@ First written: 2023/3/22
   </a>
 </div>
 
-<div class="form-floating mb-3">
-  <input id="accounting-default-currency" class="form-control" value="{{ obj.default_currency_text }}" readonly="readonly">
-  <label class="form-label" for="accounting-default-currency">{{ A_("Default Currency") }}</label>
-</div>
+<table class="table table-striped table-hover table-light" aria-label="{{ A_("Settings") }}">
+<tbody>
+<tr>
+  <th scope="row">{{ A_("Default Currency") }}</th>
+  <td>{{ obj.default_currency_text }}</td>
+</tr>
+<tr>
+  <th scope="row">{{ A_("Default Account for the Income and Expenses Log") }}</th>
+  <td>{{ obj.default_ie_account_code_text }}</td>
+</tr>
+</tbody>
+</table>
 
-<div class="form-floating mb-3">
-  <input id="accounting-default-ie-account" class="form-control" value="{{ obj.default_ie_account_code_text }}" readonly="readonly">
-  <label class="form-label" for="accounting-default-ie-account">{{ A_("Default Account for the Income and Expenses Log") }}</label>
-</div>
+<h2>{{ A_("Recurring Expense") }}</h2>
 
-{% with expense_income = "expense",
-        label = A_("Recurring Expense"),
-        recurring_items = obj.recurring.expenses %}
-  {% include "accounting/option/include/detail-recurring-expense-income.html" %}
-{% endwith %}
+{% if obj.recurring.expenses %}
+  <ul class="list-group mb-3 accounting-list-group-stripped accounting-list-group-hover">
+    {% for recurring_item in obj.recurring.expenses %}
+      <li class="list-group-item">
+        <div class="small">{{ recurring_item.account_text }}</div>
+        <div>{{ recurring_item.name }}</div>
+        <div class="small">{{ recurring_item.description_template }}</div>
+      </li>
+    {% endfor %}
+  </ul>
+{% else %}
+  <p>{{ A_("There is no data.") }}</p>
+{% endif %}
 
-{% with expense_income = "income",
-        label = A_("Recurring Income"),
-        recurring_items = obj.recurring.incomes %}
-  {% include "accounting/option/include/detail-recurring-expense-income.html" %}
-{% endwith %}
+<h2>{{ A_("Recurring Income") }}</h2>
+
+{% if obj.recurring.incomes %}
+  <ul class="list-group mb-3 accounting-list-group-stripped accounting-list-group-hover">
+    {% for recurring_item in obj.recurring.incomes %}
+      <li class="list-group-item">
+        <div class="small">{{ recurring_item.account_text }}</div>
+        <div>{{ recurring_item.name }}</div>
+        <div class="small">{{ recurring_item.description_template }}</div>
+      </li>
+    {% endfor %}
+  </ul>
+{% else %}
+  <p>{{ A_("There is no data.") }}</p>
+{% endif %}
 
 {% endblock %}
diff --git a/src/accounting/templates/accounting/option/include/detail-recurring-expense-income.html b/src/accounting/templates/accounting/option/include/detail-recurring-expense-income.html
deleted file mode 100644
index 71e3468..0000000
--- a/src/accounting/templates/accounting/option/include/detail-recurring-expense-income.html
+++ /dev/null
@@ -1,31 +0,0 @@
-{#
-The Mia! Accounting Flask Project
-detail-recurring-expense-income.html: The recurring expense or income in the option detail
-
- Copyright (c) 2023 imacat.
-
- Licensed under the Apache License, Version 2.0 (the "License");
- you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
-
-     http://www.apache.org/licenses/LICENSE-2.0
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License.
-
-Author: imacat@mail.imacat.idv.tw (imacat)
-First written: 2023/3/22
-#}
-<div id="accounting-recurring-{{ expense_income }}" class="form-control mb-3 accounting-material-text-field {% if recurring_items %} accounting-not-empty {% endif %}">
-  <label class="form-label" for="accounting-recurring-{{ expense_income }}">{{ label }}</label>
-  {% if recurring_items %}
-    <ul class="list-group mb-2 mt-2">
-      {% for item in recurring_items %}
-        {% include "accounting/option/include/detail-recurring-item.html" %}
-      {% endfor %}
-    </ul>
-  {% endif %}
-</div>
diff --git a/src/accounting/templates/accounting/option/include/detail-recurring-item.html b/src/accounting/templates/accounting/option/include/detail-recurring-item.html
deleted file mode 100644
index 580ed12..0000000
--- a/src/accounting/templates/accounting/option/include/detail-recurring-item.html
+++ /dev/null
@@ -1,28 +0,0 @@
-{#
-The Mia! Accounting Flask Project
-detail-recurring-item.html: The recurring item in the option detail
-
- Copyright (c) 2023 imacat.
-
- Licensed under the Apache License, Version 2.0 (the "License");
- you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
-
-     http://www.apache.org/licenses/LICENSE-2.0
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License.
-
-Author: imacat@mail.imacat.idv.tw (imacat)
-First written: 2023/3/22
-#}
-{# <ul> For SonarQube not to complain about incorrect HTML #}
-<li class="list-group-item list-group-item-action">
-  <div class="small">{{ item.account_text }}</div>
-  <div>{{ item.name }}</div>
-  <div class="small">{{ item.description_template }}</div>
-</li>
-{# </ul> For SonarQube not to complain about incorrect HTML #}