diff --git a/src/pages/PageSettings.vue b/src/pages/PageSettings.vue
index 3b3e940..b102054 100644
--- a/src/pages/PageSettings.vue
+++ b/src/pages/PageSettings.vue
@@ -19,15 +19,23 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import { mapGetters, mapActions } from 'vuex'
 
 export default {
   name: 'PageSettings',
   computed: {
     ...mapGetters('settings', ['settings']),
-    show12HourTimeFormat () {
-      return this.settings.show12HourTimeFormat
+    show12HourTimeFormat: {
+      get () {
+        return this.settings.show12HourTimeFormat
+      },
+      set (value) {
+        this.setShow12HourTimeFormat(value)
+      }
     }
+  },
+  methods: {
+    ...mapActions('settings', ['setShow12HourTimeFormat'])
   }
 }
 </script>
diff --git a/src/store/store-settings.js b/src/store/store-settings.js
index 4609ea2..6c4e521 100644
--- a/src/store/store-settings.js
+++ b/src/store/store-settings.js
@@ -5,9 +5,15 @@ const state = {
 }
 
 const mutations = {
+  setShow12HourTimeFormat (state, value) {
+    state.settings.show12HourTimeFormat = value
+  }
 }
 
 const actions = {
+  setShow12HourTimeFormat ({ commit }, value) {
+    commit('setShow12HourTimeFormat', value)
+  }
 }
 
 const getters = {