diff --git a/src/components/MenuElementaryCA.vue b/src/components/MenuElementaryCA.vue
index 3d4d30b..672690f 100644
--- a/src/components/MenuElementaryCA.vue
+++ b/src/components/MenuElementaryCA.vue
@@ -25,7 +25,7 @@
       </div>
       <div class="form-field">
         <label
-          >Rules presets
+        >Rules presets
           <br />
           <select
             name="ruleset-elementary"
@@ -51,7 +51,7 @@
         class="form-field"
       >
         <label
-          >{{ name }}
+        >{{ name }}
           <input
             :value="rule"
             type="checkbox"
@@ -76,170 +76,77 @@
 </template>
 
 <script>
-import { mapGetters } from "vuex";
-import MenuRow from "./MenuRow.vue";
-export default {
-  name: "MenuElementaryCA",
-  components: {
-    MenuRow,
-  },
-  data() {
-    // TODO: Why not a getter in the store?
-    return {
-      presetRules: [
-        {
-          name: "rule 73",
-          rules: {
-            100: 0,
-            101: 0,
-            110: 1,
-            111: 0,
-            "011": 1,
-            "010": 0,
-            "001": 0,
-            "000": 1,
-          },
-        },
-        {
-          name: "rule 86",
-          rules: {
-            100: 1,
-            101: 0,
-            110: 0,
-            111: 1,
-            "011": 0,
-            "010": 1,
-            "001": 0,
-            "000": 1,
-          },
-        },
-        {
-          name: "rule 90",
-          rules: {
-            100: 1,
-            101: 0,
-            110: 1,
-            111: 0,
-            "011": 0,
-            "010": 0,
-            "001": 1,
-            "000": 0,
-          },
-        },
-        {
-          name: "rule 45?",
-          rules: {
-            100: 0,
-            101: 0,
-            110: 1,
-            111: 0,
-            "011": 1,
-            "010": 0,
-            "001": 1,
-            "000": 1,
-          },
-        },
-        {
-          name: "rule 54?",
-          rules: {
-            100: 1,
-            101: 0,
-            110: 1,
-            111: 1,
-            "011": 0,
-            "010": 1,
-            "001": 1,
-            "000": 0,
-          },
-        },
-        {
-          name: "unknown rule",
-          rules: {
-            100: 0,
-            101: 0,
-            110: 0,
-            111: 1,
-            "011": 0,
-            "010": 0,
-            "001": 1,
-            "000": 1,
-          },
-        },
-      ],
-      initialStates: [
-        {
-          id: "onecell",
-          name: "One cell at center",
-          description: "State with a single cell in the middle",
-        },
-        {
-          id: "random",
-          name: "Random cell",
-          description: "State populated with random cells",
-        },
-      ],
-    };
-  },
-  computed: {
-    ...mapGetters({
-      initialState: "getInitial1dState",
-      rules: "get1dRules",
-    }),
-    rules1dFileName() {
-      return (
-        Object.keys(this.rules)
-          .map((index) => {
-            return this.rules[index];
-          })
-          .join("_") + ".json"
-      );
+  import { mapActions, mapState, mapWritableState } from 'pinia'
+  import { presetRules, initialStates } from "./preset.js"
+  import { globalStore } from "../stores/index.js";
+  import MenuRow from "./MenuRow.vue";
+  export default {
+    name: "MenuElementaryCA",
+    components: {
+      MenuRow,
     },
-  },
-  methods: {
-    copyRules() {
-      const rules = JSON.stringify(this.rules);
-      navigator.clipboard.writeText(rules);
+    data() {
+      return {
+        presetRules: presetRules,
+        initialStates: initialStates,
+      };
     },
-    isCurrentPreset(event) {
-      const elem = event.target;
-      return this.initialState === elem.value;
+    computed: {
+      ...mapWritableState(
+        globalStore, {
+          initialState: "initial1dState",
+        }
+      ),
+      ...mapState(
+        globalStore, {
+          rules: "rules1d"
+        }
+      ),
+      rules1dFileName() {
+        return (
+          Object.keys(this.rules)
+                .map((index) => {
+                  return this.rules[index];
+                })
+                .join("_") + ".json"
+        );
+      },
     },
-    updateSingleRule(event) {
-      const elem = event.target;
-      const value = elem.checked ? 1 : 0;
-      const data = { rule: elem.name, value: value };
-      this.$store.commit("update1dSingleRule", data);
+    methods: {
+      ...mapActions(globalStore, ["draw1d", "reset"]),
+      copyRules() {
+        const rules = JSON.stringify(this.rules);
+        navigator.clipboard.writeText(rules);
+      },
+      isCurrentPreset(event) {
+        const elem = event.target;
+        return this.initialState === elem.value;
+      },
+      updateSingleRule(event) {
+        const elem = event.target;
+        const value = elem.checked ? 1 : 0;
+        this.rules.rules[elem.name] = value;
+      },
+      updateRules(event) {
+        const elem = event.target;
+        const name = elem.value;
+        const newRuleset = this.presetRules.find((ruleset) => {
+          return ruleset.name === name;
+        });
+        this.rules.rules = newRuleset.rules
+      },
+      updateInitialState(event) {
+        const elem = event.target;
+        this.initial1dState = elem.value
+      },
     },
-    updateRules(event) {
-      // TODO : change this, awfully confusing
-      const elem = event.target;
-      const name = elem.value;
-      const rules = this.presetRules.find((ruleset) => {
-        return ruleset.name === name;
-      });
-      Object.keys(rules.rules).map((value) => {
-        const data = { name: name, rule: value, value: rules.rules[value] };
-        this.$store.commit("update1dSingleRule", data);
-      });
-    },
-    updateInitialState(event) {
-      const elem = event.target;
-      this.$store.commit("setInitial1dState", elem.value);
-    },
-    draw1d() {
-      this.$store.dispatch("draw1d");
-    },
-    reset() {
-      this.$store.dispatch("reset");
-    },
-  },
-};
+  };
 </script>
 <style>
-.menu-row a {
-  color: white;
-  font-weight: bold;
-  text-decoration: none;
-  font-size: small;
-}
+  .menu-row a {
+     color: white;
+     font-weight: bold;
+     text-decoration: none;
+     font-size: small;
+  }
 </style>
diff --git a/src/components/preset.js b/src/components/preset.js
new file mode 100644
index 0000000..c089a89
--- /dev/null
+++ b/src/components/preset.js
@@ -0,0 +1,95 @@
+const presetRules = [
+  {
+    name: "rule 73",
+    rules: {
+      100: 0,
+      101: 0,
+      110: 1,
+      111: 0,
+      "011": 1,
+      "010": 0,
+      "001": 0,
+      "000": 1,
+    },
+  },
+  {
+    name: "rule 86",
+    rules: {
+      100: 1,
+      101: 0,
+      110: 0,
+      111: 1,
+      "011": 0,
+      "010": 1,
+      "001": 0,
+      "000": 1,
+    },
+  },
+  {
+    name: "rule 90",
+    rules: {
+      100: 1,
+      101: 0,
+      110: 1,
+      111: 0,
+      "011": 0,
+      "010": 0,
+      "001": 1,
+      "000": 0,
+    },
+  },
+  {
+    name: "rule 45?",
+    rules: {
+      100: 0,
+      101: 0,
+      110: 1,
+      111: 0,
+      "011": 1,
+      "010": 0,
+      "001": 1,
+      "000": 1,
+    },
+  },
+  {
+    name: "rule 54?",
+    rules: {
+      100: 1,
+      101: 0,
+      110: 1,
+      111: 1,
+      "011": 0,
+      "010": 1,
+      "001": 1,
+      "000": 0,
+    },
+  },
+  {
+    name: "unknown rule",
+    rules: {
+      100: 0,
+      101: 0,
+      110: 0,
+      111: 1,
+      "011": 0,
+      "010": 0,
+      "001": 1,
+      "000": 1,
+    },
+  },
+]
+
+const initialStates = [
+  {
+    id: "onecell",
+    name: "One cell at center",
+    description: "State with a single cell in the middle",
+  },
+  {
+    id: "random",
+    name: "Random cell",
+    description: "State populated with random cells",
+  },
+]
+
+export { presetRules, initialStates }