diff --git a/src/simulator/src/hotkey_binder/keyBinder.js b/src/simulator/src/hotkey_binder/keyBinder.js
deleted file mode 100644
index f4653fb7e..000000000
--- a/src/simulator/src/hotkey_binder/keyBinder.js
+++ /dev/null
@@ -1,151 +0,0 @@
-// import {
-//     editPanel,
-//     heading,
-//     markUp,
-//     closeEdit,
-//     submit,
-//     updateHTML,
-//     override,
-// } from './view/panel.ui'
-// import { setDefault, checkUpdate, addKeys, warnOverride } from './model/actions'
-// import { KeyCode } from './model/normalize/normalizer.plugin.js'
-// import { checkRestricted } from './model/utils.js'
-// import { SimulatorStore } from '#/store/SimulatorStore/SimulatorStore'
-
-//** keyBinder dialog */
-// export function keyBinder() {
-    // const simulatorStore = SimulatorStore()
-    // simulatorStore.dialogBox.customshortcut_dialog = true
-    // $('#customShortcutDialog').append(editPanel)
-    // $('#customShortcutDialog').append(heading)
-    // $('#customShortcutDialog').append(markUp)
-    // $('#customShortcut').on('click', () => {
-    //     closeEdit()
-    //     $('#customShortcutDialog').dialog({
-    //         resizable: false,
-    //         buttons: [
-    //             {
-    //                 text: 'Reset to default',
-    //                 click: () => {
-    //                     if (
-    //                         confirm(
-    //                             'Remove all custom keys & set the default keys?'
-    //                         )
-    //                     )
-    //                         setDefault()
-    //                 },
-    //                 id: 'resetDefault',
-    //             },
-    //             {
-    //                 text: 'Save',
-    //                 click: () => {
-    //                     submit()
-    //                     $('#customShortcutDialog').dialog('close')
-    //                 },
-    //                 id: 'submitBtn',
-    //             },
-    //         ],
-    //     })
-    //     $('#customShortcutDialog').css('display', 'flex')
-    // })
-
-    // //** targetPref is assigned to the target key option to be edited */
-    // let targetPref = null
-    // $('#preference').on('click', (e) => {
-    //     $('#pressedKeys').text('')
-    //     $('#warning').text('')
-    //     $('#edit').css('border', 'none')
-    //     $('#edit').css('display', 'block')
-    //     $($('#edit')).focus()
-    //     ;[, targetPref] = e.target.closest('div').children
-    // })
-
-    // //*** Modifiers restriction enabled here */
-    // //*** below fn works in the edit panel where user enters key combo,
-    // //*** responsible for checking duplicate entries, overriding entries, checking restricted keys, arranging keys in
-    // //*** proper order, validating key combos */
-
-    // $('#edit').keydown((e) => {
-    //     e = e || window.event
-    //     e.stopPropagation()
-    //     e.preventDefault()
-    //     var k = KeyCode
-    //     let modifiers = ['CTRL', 'ALT', 'SHIFT', 'META']
-    //     $('#edit').css('animation', 'none')
-    //     $('#warning').text('')
-    //     if (e.keyCode === 27) closeEdit()
-    //     if (e.keyCode === 13) {
-    //         if ($('#pressedKeys').text() === '') {
-    //             $('#warning').text('Please enter some key(s)')
-    //             $('#edit').css('animation', 'shake .3s linear')
-    //             return
-    //         }
-    //         if (!checkRestricted($('#pressedKeys').text())) {
-    //             override($('#pressedKeys').text())
-    //             targetPref.innerText = $('#pressedKeys').text()
-    //             $('#pressedKeys').text('')
-    //             $('#edit').css('display', 'none')
-    //         } else {
-    //             $('#warning').text('Please enter different key(s).')
-    //             $('#edit').css('animation', 'shake .3s linear')
-    //             $('#pressedKeys').text('')
-    //         }
-    //     }
-    //     const currentKey =
-    //         k.hot_key(k.translate_event(e)).split('+').join(' + ') !== 'Enter'
-    //             ? k.hot_key(k.translate_event(e)).split('+').join(' + ')
-    //             : ''
-    //     if (
-    //         $('#pressedKeys').text().split(' + ').length === 2 &&
-    //         !modifiers.includes(currentKey) &&
-    //         modifiers.includes($('#pressedKeys').text().split(' + ')[1])
-    //     ) {
-    //         $('#pressedKeys').append(` + ${currentKey}`)
-    //     } else if (modifiers.includes($('#pressedKeys').text())) {
-    //         modifiers = modifiers.filter(
-    //             (mod) => mod === $('#pressedKeys').text()
-    //         )
-    //         if (!modifiers.includes(currentKey)) {
-    //             $('#pressedKeys').append(` + ${currentKey}`)
-    //         }
-    //     } else {
-    //         $('#pressedKeys').text('')
-    //         $('#pressedKeys').text(currentKey)
-    //     }
-    //     if (!$('#pressedKeys').text()) {
-    //         $('#pressedKeys').text(currentKey)
-    //     }
-    //     if (
-    //         ($('#pressedKeys').text().split(' + ').length === 2 &&
-    //             ['Ctrl', 'Meta'].includes(
-    //                 $('#pressedKeys').text().split(' + ')[1]
-    //             )) ||
-    //         ($('#pressedKeys').text().split(' + ')[0] === 'Alt' &&
-    //             $('#pressedKeys').text().split(' + ')[1] === 'Shift')
-    //     ) {
-    //         $('#pressedKeys').text(
-    //             $('#pressedKeys').text().split(' + ').reverse().join(' + ')
-    //         )
-    //     }
-    //     warnOverride($('#pressedKeys').text(), targetPref)
-    //     if (checkRestricted($('#pressedKeys').text())) {
-    //         $('#warning').text(
-    //             'The above combination is a system default shortcut & cannot be set.'
-    //         )
-    //     }
-    // })
-
-    // //**  if users closes hotkey dialog by making changes & not saving them, fn will fallback to previous state */
-
-    // $('div#customShortcutDialog').on('dialogclose', function (event) {
-    //     if (localStorage.userKeys) {
-    //         updateHTML('user')
-    //     } else updateHTML('default')
-    // })
-
-    // // Set up shortcuts
-    // if (localStorage.userKeys) {
-    //     checkUpdate()
-    //     addKeys('user')
-    // } else setDefault()
-// }
diff --git a/src/simulator/src/hotkey_binder/keyBinder.vue b/src/simulator/src/hotkey_binder/keyBinder.vue
new file mode 100644
index 000000000..533e0fab7
--- /dev/null
+++ b/src/simulator/src/hotkey_binder/keyBinder.vue
@@ -0,0 +1,169 @@
+<template>
+  <div v-if="showDialog" class="custom-shortcut-dialog">
+    <div class="dialog-content">
+      <h2>Custom Shortcuts</h2>
+
+      <div class="key-bindings">
+        <div v-for="(binding, key) in keyBindings" :key="key" class="binding-row">
+          <label>{{ key }}</label>
+          <div class="preference" @click="startEditing(key.toString())">
+            {{ binding.custom || binding.default }}
+          </div>
+        </div>
+      </div>
+
+      <div v-if="editingKey" class="edit-panel">
+        <p>Press your desired key combination</p>
+        <div class="key-display">
+          {{ pressedKeys.join(' + ') }}
+          <span v-if="warning" class="warning">{{ warning }}</span>
+        </div>
+        <div class="dialog-actions">
+          <button @click="cancelEdit">Cancel</button>
+          <button @click="saveBinding">Save</button>
+        </div>
+      </div>
+
+      <div class="dialog-footer">
+        <button @click="resetToDefault">Reset to Default</button>
+        <button @click="closeDialog">Close</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, reactive, watch, Ref, onUnmounted } from 'vue'
+import { checkRestricted } from './model/utils'
+import { KeyCode } from './model/normalize/normalizer.plugin.js'
+import { KeyBindings } from './keyBinding.types';
+
+export default defineComponent({
+  name: 'KeyBinder',
+  setup() {
+    const showDialog = ref<boolean>(false)
+    const editingKey = ref<string | null>(null)
+    const pressedKeys = ref<string[]>([])
+    const warning = ref<string>('')
+
+    const keyBindings = reactive<KeyBindings>(
+      +  (() => {
+        try {
+          const stored = localStorage.getItem('userKeys');
+          return stored ? JSON.parse(stored) : {
+            togglePanel: { default: 'Ctrl+P', custom: '' },
+            saveFile: { default: 'Ctrl+S', custom: '' }
+          };
+        } catch (e) {
+          console.error('Failed to parse stored key bindings:', e);
+          return {
+            togglePanel: { default: 'Ctrl+P', custom: '' },
+            saveFile: { default: 'Ctrl+S', custom: '' }
+          };
+        }
+      })()
+    )
+
+    watch(keyBindings, (newVal: KeyBindings) => {
+      localStorage.setItem('userKeys', JSON.stringify(newVal))
+    })
+
+    const startEditing = (key: string): void => {
+      editingKey.value = key
+      pressedKeys.value = []
+      warning.value = ''
+      window.addEventListener('keydown', handleKeyDown)
+    }
+
+    const handleKeyDown = (e: KeyboardEvent): void => {
+      e.preventDefault()
+      const key = KeyCode.hot_key(KeyCode.translate_event(e))
+
+      if (key === 'Escape') {
+        cancelEdit()
+        return
+      }
+
+      if (key === 'Enter') {
+        saveBinding()
+        return
+      }
+
+      if (checkRestricted(key)) {
+        warning.value = 'Restricted system shortcut'
+        return
+      }
+
+      const keys = [...new Set([...pressedKeys.value, key])]
+        .sort((a, b) => a.localeCompare(b))
+
+      pressedKeys.value = keys
+    }
+
+    const saveBinding = (): void => {
+      if (pressedKeys.value.length === 0) {
+        warning.value = 'Please enter some keys'
+        return
+      }
+
+      if (editingKey.value) {
+        keyBindings[editingKey.value].custom = pressedKeys.value.join(' + ')
+      }
+      cancelEdit()
+    }
+
+    const cancelEdit = (): void => {
+      editingKey.value = null
+      pressedKeys.value = []
+      window.removeEventListener('keydown', handleKeyDown)
+    }
+
+    onUnmounted(() => {
+        window.removeEventListener('keydown', handleKeyDown);
+      })
+
+    const resetToDefault = (): void => {
+      if (confirm('Reset all to default?')) {
+        Object.keys(keyBindings).forEach(key => {
+          keyBindings[key].custom = ''
+        })
+      }
+    }
+
+    const closeDialog = (): void => {
+      showDialog.value = false
+    }
+
+    return {
+      showDialog,
+      editingKey,
+      pressedKeys,
+      warning,
+      keyBindings,
+      startEditing,
+      saveBinding,
+      cancelEdit,
+      resetToDefault,
+      closeDialog
+    }
+  }
+})
+</script>
+
+<style scoped>
+.custom-shortcut-dialog {
+  position: fixed;
+  /* Add more dialog styling */
+}
+
+.key-display {
+  border: 1px solid #ccc;
+  padding: 8px;
+  margin: 10px 0;
+}
+
+.warning {
+  color: red;
+  margin-left: 10px;
+}
+</style>
diff --git a/src/simulator/src/hotkey_binder/keyBinding.types.ts b/src/simulator/src/hotkey_binder/keyBinding.types.ts
new file mode 100644
index 000000000..82a6aa7f9
--- /dev/null
+++ b/src/simulator/src/hotkey_binder/keyBinding.types.ts
@@ -0,0 +1,8 @@
+export interface KeyBinding {
+    custom?: string;
+    default: string;
+  }
+  
+  export interface KeyBindings {
+    [key: string]: KeyBinding;
+  }
\ No newline at end of file