diff --git a/package.json b/package.json
index 079e5ee..ca6b915 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "@fortawesome/vue-fontawesome": "^2.0.6",
     "axios": "^0.23.0",
     "babel-loader": "^8.2.3",
+    "underscore": "^1.13.1",
     "vue": "^2.6.14",
     "vue-loader": "^15.9.8",
     "vue-style-loader": "^4.1.3",
diff --git a/src/components/archiveList.vue b/src/components/archiveList.vue
index d444920..06f4ddf 100644
--- a/src/components/archiveList.vue
+++ b/src/components/archiveList.vue
@@ -154,6 +154,7 @@ export default {
       } else {
         this.active_column = name
       }
+      this.setColumnOrder({'name': name, 'order': this.columns_order[name]})
     },
     isActiveCol: function(name) {
       return name == this.active_column ? true : false
@@ -165,7 +166,7 @@ export default {
       'getDisplayedSites'
     ]),
     ...mapMutations([
-      'setSites'
+      'setSites', 'setColumnOrder'
     ]),
   },
   watched: {
diff --git a/src/store.js b/src/store.js
index d0694bb..fd1677e 100644
--- a/src/store.js
+++ b/src/store.js
@@ -7,6 +7,7 @@ This file is part of ArciveList.
 
 import Vue from 'vue'
 import Vuex from 'vuex'
+import _ from 'underscore';
 
 
 Vue.use(Vuex)
@@ -36,6 +37,16 @@ const store = new Vuex.Store({
       }
       state.filtered_sites = sites
     },
+    setColumnOrder(state, payload) {
+      var column_name = payload.name
+      var order = payload.order
+      state.sites = _.sortBy(state.sites, column_name)
+      state.filtered_sites = _.sortBy(state.filtered_sites, column_name)
+      if (order == 'desc') {
+        state.sites.reverse()
+        state.filtered_sites.reverse()
+      }
+    },
   },
   getters: {
     getDisplayedSites: state => {