diff --git a/src/components/DialogBox/HexBinDec.vue b/src/components/DialogBox/HexBinDec.vue
index 5fc55df9..86c89f4e 100644
--- a/src/components/DialogBox/HexBinDec.vue
+++ b/src/components/DialogBox/HexBinDec.vue
@@ -5,7 +5,7 @@
     >
         <v-card class="messageBoxContent">
             <v-card-text>
-                <p class="dialogHeader">Hex-Bin-Dec Convertor</p>
+                <p class="dialogHeader">Hex-Bin-Dec Converter</p>
                 <v-btn
                     size="x-small"
                     icon
@@ -17,20 +17,20 @@
                     <v-icon>mdi-close</v-icon>
                 </v-btn>
                 <div
-                    v-for="inputEle in inputArr"
+                    v-for="(value, index) in Object.entries(inputArr)"
                     id="bitconverterprompt"
-                    :key="inputEle.inputId"
+                    :key="value[0]"
                     title="Dec-Bin-Hex-Converter"
                 >
-                    <label>{{ inputEle.label }}</label>
+                    <label>{{ value[1].label }}</label>
                     <br />
                     <input
-                        :id="inputEle.inputId"
+                        :id="value[0]"
                         type="text"
-                        :value="inputEle.val"
-                        :label="inputEle.label"
+                        :value="value[1].val"
+                        :label="value[1].label"
                         name="text1"
-                        @keyup="() => converter(inputEle.inputId)"
+                        @keyup="(payload) => converter(payload)"
                     />
                     <br /><br />
                 </div>
@@ -42,95 +42,178 @@
             </v-card-actions>
         </v-card>
     </v-dialog>
+  <v-dialog
+      v-model="SimulatorState.dialogBox.hex_bin_dec_converter_dialog"
+      :persistent="false"
+  >
+      <v-card class="messageBoxContent">
+          <v-card-text>
+              <p class="dialogHeader">Hex-Bin-Dec Converter</p>
+              <v-btn
+                  size="x-small"
+                  icon
+                  class="dialogClose"
+                  @click="
+                      SimulatorState.dialogBox.hex_bin_dec_converter_dialog = false
+                  "
+              >
+                  <v-icon>mdi-close</v-icon>
+              </v-btn>
+              <div
+              v-for="(value, index) in Object.entries(inputArr)"
+                  id="bitconverterprompt"
+                  :key="value[0]"
+                  title="Dec-Bin-Hex-Converter"
+              >
+                  <label>{{ value[1].label }}</label>
+                  <br />
+                  <input
+                      :id="value[0]"
+                      type="text"
+                      :value="value[1].val"
+                      :label="value[1].label"
+                      name="text1"
+                      @keyup="(payload) => converter(payload)"
+                  />
+                  <br /><br />
+              </div>
+          </v-card-text>
+          <v-card-actions>
+              <v-btn class="messageBtn" block @click="setBaseValues(0)">
+                  Reset
+              </v-btn>
+          </v-card-actions>
+      </v-card>
+  </v-dialog>
 </template>
 
 <script lang="ts" setup>
 import { useState } from '#/store/SimulatorStore/state'
 const SimulatorState = useState()
-import { setBaseValues } from '#/simulator/src/utils'
 import { onMounted, ref } from '@vue/runtime-core'
 
-const inputArr = ref([])
-inputArr.value = [
-    {
-        inputId: 'decimalInput',
+const inputArr = ref({
+    decimalInput: {
         val: '16',
         label: 'Decimal value',
     },
-    {
-        inputId: 'binaryInput',
+    binaryInput: {
         val: '0b10000',
         label: 'Binary value',
     },
-    {
-        inputId: 'bcdInput',
-        val: '10110',
-        label: 'Binary-coded decimal vlaue',
+    bcdInput: {
+        val: '00010110',
+        label: 'Binary-coded decimal value',
     },
-    {
-        inputId: 'octalInput',
+    octalInput: {
         val: '020',
         label: 'Octal value',
     },
-    {
-        inputId: 'hexInput',
+    hexInput: {
         val: '0x10',
         label: 'Hexadecimal value',
     },
-]
+})
 
 onMounted(() => {
     SimulatorState.dialogBox.hex_bin_dec_converter_dialog = false
 })
 
-function converter(feildChange) {
-    if (feildChange == 'decimalInput') decimalConvertor()
-    if (feildChange == 'binaryInput') binaryConvertor()
-    if (feildChange == 'bcdInput') bcdConvertor()
-    if (feildChange == 'octalInput') octalConvertor()
-    if (feildChange == 'hexInput') hexConvertor()
+function converter(e: KeyboardEvent) {
+    const target = <HTMLInputElement>e.target!
+    let value = target.value
+
+    // Regular expressions for validating input
+    const regexBinary = /[^01]/g
+    const regexOctal = /[^0-7]/g
+    const regexDecimal = /[^0-9]/g
+    const regexHex = /[^0-9A-Fa-f]/g
+
+    switch (target.id) {
+        case 'decimalInput':
+            value = value.replace(regexDecimal, '')
+            decimalConverter(value)
+            break
+        case 'binaryInput':
+            value = value.replace(regexBinary, '')
+            binaryConverter(value)
+            break
+        case 'bcdInput':
+            value = value.replace(regexBinary, '')
+            bcdConverter(value)
+            break
+        case 'octalInput':
+            value = value.replace(regexOctal, '')
+            octalConverter(value)
+            break
+        case 'hexInput':
+            value = value.replace(regexHex, '')
+            hexConverter(value)
+            break
+    }
+
+    // Update the input field with the cleaned value
+    target.value = value
+}
+
+function convertToBCD(value: number) {
+    let digits = value.toString().split('')
+    let bcdOfDigits = digits.map(function (digit) {
+        return parseInt(digit).toString(2).padStart(4, '0')
+    })
+    return bcdOfDigits.join('')
+}
+
+function setBaseValues(x: number) {
+    if (isNaN(x)) {
+        return
+    }
+    inputArr.value.binaryInput.val = '0b' + x.toString(2)
+    inputArr.value.bcdInput.val = convertToBCD(x)
+    inputArr.value.octalInput.val = '0' + x.toString(8)
+    inputArr.value.hexInput.val = '0x' + x.toString(16)
+    inputArr.value.decimalInput.val = x.toString(10)
 }
 
-function decimalConvertor() {
-    var x = parseInt($('#decimalInput').val(), 10)
+function decimalConverter(input: string) {
+    const x = parseInt(input, 10)
     setBaseValues(x)
 }
 
-function binaryConvertor() {
-    var inp = $('#binaryInput').val()
-    var x
-    if (inp.slice(0, 2) == '0b') x = parseInt(inp.slice(2), 2)
-    else x = parseInt(inp, 2)
+function binaryConverter(input: string) {
+    let x
+    if (input.slice(0, 2) == '0b') {
+        x = parseInt(input.slice(2), 2)
+    } else {
+        x = parseInt(input, 2)
+    }
     setBaseValues(x)
 }
 
-function bcdConvertor() {
-    var input = $('#bcdInput').val()
-    var num = 0
+function bcdConverter(input: string) {
+    let num = 0
     while (input.length % 4 !== 0) {
         input = '0' + input
     }
-    if (input !== 0) {
-        var i = 0
-        while (i < input.length / 4) {
-            if (parseInt(input.slice(4 * i, 4 * (i + 1)), 2) < 10)
-                num = num * 10 + parseInt(input.slice(4 * i, 4 * (i + 1)), 2)
-            else return setBaseValues(NaN)
-            i++
+    let i = 0
+    while (i < input.length / 4) {
+        if (parseInt(input.slice(4 * i, 4 * (i + 1)), 2) < 10) {
+            num = num * 10 + parseInt(input.slice(4 * i, 4 * (i + 1)), 2)
+        } else {
+            return setBaseValues(NaN)
         }
+        i++
     }
     return setBaseValues(num)
 }
 
-function octalConvertor() {
-    var x = parseInt($('#octalInput').val(), 8)
+function octalConverter(input: string) {
+    let x = parseInt(input, 8)
     setBaseValues(x)
 }
 
-function hexConvertor() {
-    var x = parseInt($('#hexInput').val(), 16)
+function hexConverter(input: string) {
+    let x = parseInt(input, 16)
     setBaseValues(x)
 }
 </script>
-
-<style scoped></style>
diff --git a/src/simulator/src/utils.js b/src/simulator/src/utils.js
index 6549edfd..9d6a32b9 100644
--- a/src/simulator/src/utils.js
+++ b/src/simulator/src/utils.js
@@ -216,20 +216,8 @@ export function truncateString(str, num) {
 }
 
 export function bitConverterDialog() {
-    console.log('Open dialog box')
-    const simulatorStore = SimulatorStore()
-    simulatorStore.dialogBox.hex_bin_dec_converter_dialog = true
-    console.log(simulatorStore.dialogBox.hex_bin_dec_converter_dialog)
-    // $('#bitconverterprompt').dialog({
-    //     buttons: [
-    //         {
-    //             text: 'Reset',
-    //             click: function () {
-    //                 setBaseValues(0)
-    //             },
-    //         },
-    //     ],
-    // })
+    const simulatorStore = SimulatorStore();
+    simulatorStore.dialogBox.hex_bin_dec_converter_dialog = true;
 }
 
 export function getImageDimensions(file) {
@@ -250,15 +238,6 @@ export var convertors = {
     dec2bcd: (x) => parseInt(x.toString(10), 16).toString(2),
 }
 
-export function setBaseValues(x) {
-    if (isNaN(x)) return
-    $('#binaryInput').val(convertors.dec2bin(x))
-    $('#bcdInput').val(convertors.dec2bcd(x))
-    $('#octalInput').val(convertors.dec2octal(x))
-    $('#hexInput').val(convertors.dec2hex(x))
-    $('#decimalInput').val(x)
-}
-
 export function parseNumber(num) {
     if (num instanceof Number) return num
     if (num.slice(0, 2).toLocaleLowerCase() == '0b')
@@ -269,50 +248,6 @@ export function parseNumber(num) {
     return parseInt(num)
 }
 
-export function setupBitConvertor() {
-    console.log('check bit convertor')
-    $('#decimalInput').on('keyup', function () {
-        var x = parseInt($('#decimalInput').val(), 10)
-        setBaseValues(x)
-    })
-
-    $('#binaryInput').on('keyup', function () {
-        var inp = $('#binaryInput').val()
-        var x
-        if (inp.slice(0, 2) == '0b') x = parseInt(inp.slice(2), 2)
-        else x = parseInt(inp, 2)
-        setBaseValues(x)
-    })
-    $('#bcdInput').on('keyup', function () {
-        var input = $('#bcdInput').val()
-        var num = 0
-        while (input.length % 4 !== 0) {
-            input = '0' + input
-        }
-        if (input !== 0) {
-            var i = 0
-            while (i < input.length / 4) {
-                if (parseInt(input.slice(4 * i, 4 * (i + 1)), 2) < 10)
-                    num =
-                        num * 10 + parseInt(input.slice(4 * i, 4 * (i + 1)), 2)
-                else return setBaseValues(NaN)
-                i++
-            }
-        }
-        return setBaseValues(x)
-    })
-
-    $('#hexInput').on('keyup', function () {
-        var x = parseInt($('#hexInput').val(), 16)
-        setBaseValues(x)
-    })
-
-    $('#octalInput').on('keyup', function () {
-        var x = parseInt($('#octalInput').val(), 8)
-        setBaseValues(x)
-    })
-}
-
 export function promptFile(contentType, multiple) {
     var input = document.createElement('input')
     input.type = 'file'
diff --git a/src/simulator/src/ux.js b/src/simulator/src/ux.js
index f01bdcee..9d61a4dc 100644
--- a/src/simulator/src/ux.js
+++ b/src/simulator/src/ux.js
@@ -22,7 +22,6 @@ import { setProjectName, getProjectName } from './data/save'
 import { changeScale } from './canvasApi'
 import { generateImage, generateSaveData } from './data/save'
 import { setupVerilogExportCodeWindow } from './verilog'
-import { setupBitConvertor } from './utils'
 import { updateTestbenchUI, setupTestbenchUI } from './testbench'
 import { applyVerilogTheme } from './Verilog2CV'
 import { dragging } from './drag'
@@ -184,7 +183,6 @@ export function setupUI() {
     // $('#moduleProperty').draggable();
     setupPanels()
     // setupVerilogExportCodeWindow()
-    setupBitConvertor()
 }
 
 /**
@@ -631,63 +629,6 @@ export function deleteSelected() {
     updateRestrictedElementsInScope()
 }
 
-/**
- * listener for opening the prompt for bin conversion
- * @category ux
- */
-$('#bitconverter').on('click', () => {
-    console.log('something clicked')
-    $('#bitconverterprompt').dialog({
-        resizable: false,
-        buttons: [
-            {
-                text: 'Reset',
-                click() {
-                    $('#decimalInput').val('0')
-                    $('#binaryInput').val('0')
-                    $('#octalInput').val('0')
-                    $('#hexInput').val('0')
-                },
-            },
-        ],
-    })
-})
-
-// convertors
-const convertors = {
-    dec2bin: (x) => `0b${x.toString(2)}`,
-    dec2hex: (x) => `0x${x.toString(16)}`,
-    dec2octal: (x) => `0${x.toString(8)}`,
-}
-
-function setBaseValues(x) {
-    if (isNaN(x)) return
-    $('#binaryInput').val(convertors.dec2bin(x))
-    $('#octalInput').val(convertors.dec2octal(x))
-    $('#hexInput').val(convertors.dec2hex(x))
-    $('#decimalInput').val(x)
-}
-
-$('#decimalInput').on('keyup', () => {
-    var x = parseInt($('#decimalInput').val(), 10)
-    setBaseValues(x)
-})
-
-$('#binaryInput').on('keyup', () => {
-    var x = parseInt($('#binaryInput').val(), 2)
-    setBaseValues(x)
-})
-
-$('#hexInput').on('keyup', () => {
-    var x = parseInt($('#hexInput').val(), 16)
-    setBaseValues(x)
-})
-
-$('#octalInput').on('keyup', () => {
-    var x = parseInt($('#octalInput').val(), 8)
-    setBaseValues(x)
-})
-
 export function setupPanels() {
     // $('#dragQPanel')
     //     .on('mousedown', () =>