diff --git a/src/digimarks/static/js/digimarks.js b/src/digimarks/static/js/digimarks.js
index 7a889d9..9214d6f 100644
--- a/src/digimarks/static/js/digimarks.js
+++ b/src/digimarks/static/js/digimarks.js
@@ -58,15 +58,17 @@ document.addEventListener('alpine:init', () => {
                 i => i.title.match(new RegExp(this.search, "i"))
             )
         },
-        async sortAlphabetically() {
-            this.bookmarks.sort((a, b) => a.title.localeCompare(b.title));
+        async sortAlphabetically(order = 'asc') {
+            if (order === 'desc') {
+                this.bookmarks.sort((a, b) => b.title.localeCompare(a.title));
+            } else {
+                this.bookmarks.sort((a, b) => a.title.localeCompare(b.title));
+            }
         },
         async sortCreated(order = 'asc') {
             if (order === 'desc') {
                 this.bookmarks.sort((a, b) => b.created_date.localeCompare(a.created_date));
-            } else
-            {
-
+            } else {
                 this.bookmarks.sort((a, b) => a.created_date.localeCompare(b.created_date));
             }
         }
diff --git a/src/digimarks/templates/user_index.html b/src/digimarks/templates/user_index.html
index df3bf25..7edb870 100644
--- a/src/digimarks/templates/user_index.html
+++ b/src/digimarks/templates/user_index.html
@@ -7,33 +7,34 @@
          x-init="$store.digimarks.userKey = '{{ user_key }}'; $store.digimarks.loadCache(); $store.digimarks.getBookmarks()"
          x-data="">
 
-    <header>
+        <header>
 
-        <nav class="menu">
-            <ul>
-                <li>digimarks</li>
-                <li>tags</li>
-                <li>add bookmark</li>
-            </ul>
-            <input x-model="$store.digimarks.search" placeholder="Search...">
-        </nav>
-    </header>
+            <nav class="menu">
+                <ul>
+                    <li>digimarks</li>
+                    <li>tags</li>
+                    <li>add bookmark</li>
+                </ul>
+                <input x-model="$store.digimarks.search" placeholder="Search...">
+            </nav>
+        </header>
         <main>
 
             <p>Welcome user <span x-text="$store.digimarks.userKey"></span>!</p>
-        <div x-show="$store.digimarks.loading">Loading...</div>
+            <div x-show="$store.digimarks.loading">Loading...</div>
 
             <p>
-            <button @click="$store.digimarks.sortAlphabetically()">sort a-z</button>
-            <button @click="$store.digimarks.sortCreated()">sort date asc</button>
-            <button @click="$store.digimarks.sortCreated('desc')">sort date desc</button>
+                <button @click="$store.digimarks.sortAlphabetically()">sort a-z</button>
+                <button @click="$store.digimarks.sortAlphabetically('desc')">sort z-a</button>
+                <button @click="$store.digimarks.sortCreated()">sort date asc</button>
+                <button @click="$store.digimarks.sortCreated('desc')">sort date desc</button>
             </p>
 
-        <ul x-cloak>
-            <template x-for="bookmark in $store.digimarks.filteredItems" :key="bookmark.id">
-                <li><a x-text="bookmark.title" x-bind:href="bookmark.url" target="_blank"></a></li>
-            </template>
-        </ul>
+            <ul x-cloak>
+                <template x-for="bookmark in $store.digimarks.filteredItems" :key="bookmark.id">
+                    <li><a x-text="bookmark.title" x-bind:href="bookmark.url" target="_blank"></a></li>
+                </template>
+            </ul>
         </main>
     </div>
 {% endblock %}