diff --git a/fe/src/components/macros/MacroOverview.vue b/fe/src/components/macros/MacroOverview.vue
index 7f3b3d8..f24fa03 100644
--- a/fe/src/components/macros/MacroOverview.vue
+++ b/fe/src/components/macros/MacroOverview.vue
@@ -4,7 +4,12 @@
     <div class="macro-overview__list">
       <LoadComp :loading="macros.loading" text="Loading macros..." />
       <div class="macro-item" v-for="(macro, i) in macros.list" :key="i">
-        <ButtonComp variant="dark" class="w-full" size="sm">
+        <ButtonComp
+          variant="dark"
+          class="w-full"
+          size="sm"
+          @click="macroRecorder.open(macro.macroname, macro.name)"
+        >
           <IconKeyboard /> {{ macro.name }}
         </ButtonComp>
       </div>
@@ -20,17 +25,17 @@
 import { IconKeyboard } from '@tabler/icons-vue'
 import ButtonComp from '../base/ButtonComp.vue'
 import { onMounted, reactive } from 'vue'
-import axios from 'axios'
-import { appUrl, isLocal } from '@/services/ApiService'
-import { AuthCall } from '@/services/EncryptService'
-import { GetMacroList, RunMacro } from '@/services/MacroService'
+import { GetMacroList } from '@/services/MacroService'
 import LoadComp from '../base/LoadComp.vue'
+import { useMacroRecorderStore } from '@/stores/macrorecorder'
 
 const macros = reactive({
   loading: true,
   list: [],
 })
 
+const macroRecorder = useMacroRecorderStore()
+
 onMounted(() => {
   loadMacroList()
 })
diff --git a/fe/src/components/macros/parts/RecorderFooter.vue b/fe/src/components/macros/parts/RecorderFooter.vue
index fa90274..ebc42a3 100644
--- a/fe/src/components/macros/parts/RecorderFooter.vue
+++ b/fe/src/components/macros/parts/RecorderFooter.vue
@@ -49,8 +49,10 @@ onMounted(() => {
   })
 })
 
-const toggleSave = () => {
-  if (!macroRecorder.save()) errorDialog.value.toggleDialog(true)
+const toggleSave = async () => {
+  const saveResp = await macroRecorder.save()
+
+  if (!saveResp) errorDialog.value.toggleDialog(true)
   else window.location.reload()
 }
 </script>
diff --git a/fe/src/components/macros/parts/RecorderHeader.vue b/fe/src/components/macros/parts/RecorderHeader.vue
index 2ab19c6..e8f6381 100644
--- a/fe/src/components/macros/parts/RecorderHeader.vue
+++ b/fe/src/components/macros/parts/RecorderHeader.vue
@@ -7,6 +7,7 @@
         id="macro-name"
         type="text"
         @input.prevent="changeName($event.target.value)"
+        v-model="macroName"
         placeholder="New macro"
       />
       <div :class="`recording__buttons ${!nameSet || macroRecorder.state.edit ? 'disabled' : ''}`">
@@ -62,10 +63,12 @@ import FixedDelayMenu from '../components/FixedDelayMenu.vue'
 
 import { useMacroRecorderStore } from '@/stores/macrorecorder'
 import EditDialogs from './EditDialogs.vue'
-import { computed, onMounted, onUpdated, ref } from 'vue'
+import { computed, ref } from 'vue'
 
 const macroRecorder = useMacroRecorderStore()
 
+const macroName = computed(() => macroRecorder.macroName)
+
 const nameSet = ref(false)
 
 function changeName(name) {
diff --git a/fe/src/services/MacroRecordService.js b/fe/src/services/MacroRecordService.js
index 5ab7a37..12feedd 100644
--- a/fe/src/services/MacroRecordService.js
+++ b/fe/src/services/MacroRecordService.js
@@ -125,3 +125,47 @@ export const invalidMacro = (steps) => {
 
   return { down: downKeys, up: upKeys }
 }
+
+export const translateJSON = (json) => {
+  const steps = []
+
+  json.forEach((step) => {
+    if (step.type === 'delay') steps.push(step)
+    if (step.type === 'key') steps.push(codeToStep(step.code, step.direction))
+  })
+
+  return steps
+}
+
+export const codeToStep = (code, direction) => {
+  let key = ''
+  let location = 0
+  let codeStr = code
+
+  if (code.includes('Left')) {
+    key = code.replace('Left', '')
+    location = 1
+  }
+  if (code.includes('Right')) {
+    key = code.replace('Right', '')
+    location = 2
+  }
+  if (code.includes('Numpad')) {
+    key = code.replace('Numpad', '')
+    location = 3
+  }
+
+  if (code.includes('Media')) codeStr = ''
+
+  if (key === '') key = code
+
+  const stepObj = {
+    type: 'key',
+    code: codeStr,
+    key: key,
+    location: location,
+    direction: direction,
+  }
+
+  return { ...stepObj, keyObj: filterKey(stepObj) }
+}
diff --git a/fe/src/stores/macrorecorder.js b/fe/src/stores/macrorecorder.js
index c9be868..2409088 100644
--- a/fe/src/stores/macrorecorder.js
+++ b/fe/src/stores/macrorecorder.js
@@ -1,7 +1,7 @@
 import { ref } from 'vue'
 import { defineStore } from 'pinia'
 
-import { filterKey, isRepeat, invalidMacro } from '../services/MacroRecordService'
+import { filterKey, isRepeat, invalidMacro, translateJSON } from '../services/MacroRecordService'
 import axios from 'axios'
 import { appUrl } from '@/services/ApiService'
 
@@ -48,6 +48,8 @@ export const useMacroRecorderStore = defineStore('macrorecorder', () => {
 
   // Setters - Actions
   const recordStep = (e, direction = false, key = false) => {
+    if ((e.ctrlKey, e.shiftKey, e.altKey, e.metaKey)) e.preventDefault()
+
     const lastStep = steps.value[steps.value.length - 1]
 
     let stepVal = {}
@@ -72,6 +74,8 @@ export const useMacroRecorderStore = defineStore('macrorecorder', () => {
 
     if (key !== false) steps.value[key] = stepVal
     else steps.value.push(stepVal)
+
+    console.log(steps.value)
   }
 
   const recordDelay = () => {
@@ -171,18 +175,36 @@ export const useMacroRecorderStore = defineStore('macrorecorder', () => {
     if (state.value.edit) resetEdit()
   }
 
-  const save = () => {
+  const save = async () => {
     state.value.validationErrors = invalidMacro(steps.value)
 
     if (state.value.validationErrors) return false
 
-    axios.post(appUrl() + '/macro/record', { name: macroName.value, steps: steps.value })
+    const resp = await axios.post(appUrl() + '/macro/record', {
+      name: macroName.value,
+      steps: steps.value,
+    })
 
-    return true
+    return resp.status == 200
+  }
+
+  const open = async (macroFileName, name) => {
+    console.log(name)
+
+    const openResp = await axios.post(appUrl() + '/macro/open', {
+      macro: macroFileName,
+    })
+
+    if (openResp.data) steps.value = translateJSON(openResp.data)
+
+    // console.log(macroName)
+
+    macroName.value = name
   }
 
   return {
     state,
+    macroName,
     steps,
     delay,
     getEditKey,
@@ -198,5 +220,6 @@ export const useMacroRecorderStore = defineStore('macrorecorder', () => {
     resetEdit,
     reset,
     save,
+    open,
   }
 })