diff --git a/src/digimarks/static/css/digimarks.css b/src/digimarks/static/css/digimarks.css
index 7ff85b7..dc4a9e9 100644
--- a/src/digimarks/static/css/digimarks.css
+++ b/src/digimarks/static/css/digimarks.css
@@ -46,3 +46,39 @@ header li a {
     color: black;
     text-decoration: none;
 }
+
+.active {
+    background-color: #fb8c00;
+}
+
+button {
+    background-color: #fff;
+    border: 1px solid #d5d9d9;
+    border-radius: 8px;
+    box-shadow: rgba(213, 217, 217, .5) 0 2px 5px 0;
+    box-sizing: border-box;
+    color: #0f1111;
+    cursor: pointer;
+    display: inline-block;
+    font-size: 13px;
+    line-height: 29px;
+    padding: 0 10px 0 11px;
+    position: relative;
+    text-align: center;
+    text-decoration: none;
+    user-select: none;
+    -webkit-user-select: none;
+    touch-action: manipulation;
+    vertical-align: middle;
+    /*width: 100px;*/
+}
+
+button:hover {
+    background-color: #f7fafa;
+}
+
+button:focus {
+    border-color: #008296;
+    box-shadow: rgba(213, 217, 217, .5) 0 2px 5px 0;
+    outline: 0;
+}
\ No newline at end of file
diff --git a/src/digimarks/static/js/digimarks.js b/src/digimarks/static/js/digimarks.js
index 93fc6a8..eb3dfd7 100644
--- a/src/digimarks/static/js/digimarks.js
+++ b/src/digimarks/static/js/digimarks.js
@@ -89,16 +89,28 @@ document.addEventListener('alpine:init', () => {
             )
         },
         async sortAlphabetically(order = 'asc') {
+            this.sort_created_asc = false;
+            this.sort_created_desc = false;
+            this.sort_title_asc = false;
+            this.sort_title_desc = false;
             if (order === 'desc') {
+                this.sort_title_desc = true;
                 this.bookmarks.sort((a, b) => b.title.localeCompare(a.title));
             } else {
+                this.sort_title_asc = true;
                 this.bookmarks.sort((a, b) => a.title.localeCompare(b.title));
             }
         },
         async sortCreated(order = 'asc') {
+            this.sort_created_asc = false;
+            this.sort_created_desc = false;
+            this.sort_title_asc = false;
+            this.sort_title_desc = false;
             if (order === 'desc') {
+                this.sort_created_desc = true;
                 this.bookmarks.sort((a, b) => b.created_date.localeCompare(a.created_date));
             } else {
+                this.sort_created_asc = true;
                 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 8c659c8..b32d467 100644
--- a/src/digimarks/templates/user_index.html
+++ b/src/digimarks/templates/user_index.html
@@ -24,10 +24,18 @@
             <div x-show="$store.digimarks.loading">Loading...</div>
 
             <p>
-                <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>
+                <button @click="$store.digimarks.sortAlphabetically()"
+                        :class="$store.digimarks.sort_title_asc === true && 'active'">a-z &darr;
+                </button>
+                <button @click="$store.digimarks.sortAlphabetically('desc')"
+                        :class="$store.digimarks.sort_title_desc === true && 'active'">z-a &uarr;
+                </button>
+                <button @click="$store.digimarks.sortCreated()"
+                        :class="$store.digimarks.sort_created_asc === true && 'active'">date &darr;
+                </button>
+                <button @click="$store.digimarks.sortCreated('desc')"
+                        :class="$store.digimarks.sort_created_desc === true && 'active'">date &uarr;
+                </button>
             </p>
 
             <ul x-cloak>