diff --git a/accounting/templates/accounting/accounts/index.html b/accounting/templates/accounting/accounts/index.html
new file mode 100644
index 0000000..aa6f07b
--- /dev/null
+++ b/accounting/templates/accounting/accounts/index.html
@@ -0,0 +1,89 @@
+{% extends "base.html" %}
+{% comment %}
+The Mia Accounting Application
+index.html: The template for the accounts
+
+ Copyright (c) 2020 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: 2020/7/1
+{% endcomment %}
+{% load static %}
+{% load i18n %}
+{% load mia_core %}
+{% load accounting %}
+
+{% block settings %}
+  {% setvar "title" _("Accounts") %}
+  {% setvar "use_datatables" True %}
+{% endblock %}
+
+{% block content %}
+
+<div class="btn-group btn-actions">
+  <a class="btn btn-primary" role="button" href="{% url "accounting:accounts.create" %}">
+    <i class="fas fa-plus"></i>
+    {{ _("New")|force_escape }}
+  </a>
+  {% report_url as reports %}
+  {% with current_report_icon="fas fa-list-ol" current_report_title=_("Accounts") %}
+    {% include "accounting/include/report-chooser.html" %}
+  {% endwith %}
+</div>
+
+{% if object_list %}
+  <table id="accounts" class="table table-striped table-hover">
+    <thead>
+      <tr>
+        <th scope="col">{{ _("Code")|force_escape }}</th>
+        <th scope="col">{{ _("Title")|force_escape }}</th>
+        <th class="actions" scope="col">{{ _("View")|force_escape }}</th>
+      </tr>
+    </thead>
+    <tbody>
+      {% for object in object_list %}
+        <tr class="{% if object.is_parent_and_in_use %} table-danger {% endif %}">
+          <td>{{ object.code }}</td>
+          <td>
+            {{ object.title }}
+            {% if object.is_parent_and_in_use %}
+              <span class="badge badge-danger badge-pill">
+                {{ _("Parent Account In Use")|force_escape }}
+              </span>
+            {% endif %}
+          </td>
+          <td class="actions">
+            <a href="{% url "accounting:accounts.show" object %}" class="btn btn-info" role="button">
+              <i class="fas fa-eye"></i>
+              <span class="d-none d-sm-inline">{{ _("View")|force_escape }}</span>
+            </a>
+          </td>
+        </tr>
+      {% endfor %}
+    </tbody>
+  </table>
+{% else %}
+  <p>{{ _("There is currently no data.")|force_escape }}</p>
+{% endif %}
+
+<script type="text/javascript">
+  $(document).ready(function() {
+    $('#accounts').DataTable({
+      "ordering": false,
+    });
+  });
+</script>
+
+{% endblock %}
diff --git a/accounting/views.py b/accounting/views.py
index 2841e72..2ad8ec9 100644
--- a/accounting/views.py
+++ b/accounting/views.py
@@ -33,7 +33,7 @@ from django.utils import timezone
 from django.utils.decorators import method_decorator
 from django.utils.translation import gettext as _, gettext_noop
 from django.views.decorators.http import require_GET, require_POST
-from django.views.generic import RedirectView
+from django.views.generic import RedirectView, ListView
 
 from mia_core.digest_auth import login_required
 from mia_core.period import Period
@@ -1051,6 +1051,14 @@ def txn_sort(request, date):
         return success_redirect(request, url, message)
 
 
+@method_decorator(require_GET, name="dispatch")
+@method_decorator(login_required, name="dispatch")
+class AccountListView(ListView):
+    """The view to list the accounts."""
+    queryset = Account.objects.order_by("code")
+    template_name = "accounting/accounts/index.html"
+
+
 @require_GET
 @login_required
 def account_options(request):