diff --git a/package-lock.json b/package-lock.json
index 60cd21f..935f46f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,9 @@
       "dependencies": {
         "@highlightjs/vue-plugin": "^2.1.0",
         "@types/dompurify": "^3.0.2",
+        "@types/js-yaml": "^4.0.8",
         "@types/marked": "^5.0.1",
+        "@types/papaparse": "^5.3.10",
         "balm-ui": "^10.22.3",
         "crypto-js": "^4.1.1",
         "curlconverter": "^4.8.0",
@@ -20,11 +22,13 @@
         "electron-is-dev": "^2.0.0",
         "highlight.js": "^11.8.0",
         "jose": "^4.14.4",
+        "js-yaml": "^4.1.0",
         "marked": "^7.0.2",
         "marked-highlight": "^2.0.4",
         "moment": "^2.29.4",
         "moment-timezone": "^0.5.43",
         "npm-run-all": "^4.1.5",
+        "papaparse": "^5.4.1",
         "pinia": "^2.1.4",
         "qr-scanner": "^1.4.2",
         "qrcode": "^1.5.3",
@@ -3648,6 +3652,11 @@
       "integrity": "sha512-FD+nQWA2zJjh4L9+pFXqWOi0Hs1ryBCfI+985NjluQ1p8EYtoLvjLOKidXBtZ4/IcxDX4o8/E8qDS3540tNliw==",
       "dev": true
     },
+    "node_modules/@types/js-yaml": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/@types/js-yaml/-/js-yaml-4.0.8.tgz",
+      "integrity": "sha512-m6jnPk1VhlYRiLFm3f8X9Uep761f+CK8mHyS65LutH2OhmBF0BeMEjHgg05usH8PLZMWWc/BUR9RPmkvpWnyRA=="
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.12",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.12.tgz",
@@ -3679,14 +3688,21 @@
     "node_modules/@types/node": {
       "version": "18.17.19",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-18.17.19.tgz",
-      "integrity": "sha512-+pMhShR3Or5GR0/sp4Da7FnhVmTalWm81M6MkEldbwjETSaPalw138Z4KdpQaistvqQxLB7Cy4xwYdxpbSOs9Q==",
-      "dev": true
+      "integrity": "sha512-+pMhShR3Or5GR0/sp4Da7FnhVmTalWm81M6MkEldbwjETSaPalw138Z4KdpQaistvqQxLB7Cy4xwYdxpbSOs9Q=="
     },
     "node_modules/@types/offscreencanvas": {
       "version": "2019.7.1",
       "resolved": "https://registry.npmjs.org/@types/offscreencanvas/-/offscreencanvas-2019.7.1.tgz",
       "integrity": "sha512-+HSrJgjBW77ALieQdMJvXhRZUIRN1597L+BKvsyeiIlHHERnqjcuOLyodK3auJ3Y3zRezNKtKAhuQWYJfEgFHQ=="
     },
+    "node_modules/@types/papaparse": {
+      "version": "5.3.10",
+      "resolved": "https://registry.npmjs.org/@types/papaparse/-/papaparse-5.3.10.tgz",
+      "integrity": "sha512-mS1Fta/xJ9EDYmAvpeWzcV9Gr0cOl1ClpW7di9+wSUNDIDO55tBtyXg97O7K+Syrd9rDEmuejM2iqmJIJ1SO5g==",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/plist": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/plist/-/plist-3.0.3.tgz",
@@ -4433,7 +4449,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-      "dev": true,
       "license": "Python-2.0"
     },
     "node_modules/array-buffer-byte-length": {
@@ -8070,8 +8085,6 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
       "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
-      "dev": true,
-      "license": "MIT",
       "dependencies": {
         "argparse": "^2.0.1"
       },
@@ -9074,6 +9087,11 @@
       "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
       "dev": true
     },
+    "node_modules/papaparse": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/papaparse/-/papaparse-5.4.1.tgz",
+      "integrity": "sha512-HipMsgJkZu8br23pW15uvo6sib6wne/4woLZPlFf3rpDyMe9ywEXUsuD7+6K9PRkJlVT51j/sCOYDKGGS3ZJrw=="
+    },
     "node_modules/parchment": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/parchment/-/parchment-1.1.4.tgz",
diff --git a/package.json b/package.json
index 2dc98cb..8e4e664 100644
--- a/package.json
+++ b/package.json
@@ -51,7 +51,9 @@
   "dependencies": {
     "@highlightjs/vue-plugin": "^2.1.0",
     "@types/dompurify": "^3.0.2",
+    "@types/js-yaml": "^4.0.8",
     "@types/marked": "^5.0.1",
+    "@types/papaparse": "^5.3.10",
     "balm-ui": "^10.22.3",
     "crypto-js": "^4.1.1",
     "curlconverter": "^4.8.0",
@@ -60,11 +62,13 @@
     "electron-is-dev": "^2.0.0",
     "highlight.js": "^11.8.0",
     "jose": "^4.14.4",
+    "js-yaml": "^4.1.0",
     "marked": "^7.0.2",
     "marked-highlight": "^2.0.4",
     "moment": "^2.29.4",
     "moment-timezone": "^0.5.43",
     "npm-run-all": "^4.1.5",
+    "papaparse": "^5.4.1",
     "pinia": "^2.1.4",
     "qr-scanner": "^1.4.2",
     "qrcode": "^1.5.3",
diff --git a/src/modules/JsonConverter/JsonConverter.vue b/src/modules/JsonConverter/JsonConverter.vue
new file mode 100644
index 0000000..cd7312d
--- /dev/null
+++ b/src/modules/JsonConverter/JsonConverter.vue
@@ -0,0 +1,177 @@
+<script setup lang="ts">
+
+import Input from "@/components/InputComponent.vue";
+import InputOptions from "@/components/InputOptionsComponent.vue";
+import useThrottle from "@/hooks/useThrottle";
+import { ref, type Ref , watch} from "vue";
+import {jsonToYaml, yamlToJson, jsonToCsv, csvToJson} from ".";
+
+type objectOrString = Object | string; 
+
+const inputType = ref('');
+const inputText: Ref<string> = ref('');
+const outputType = ref('');
+const outputText: Ref<objectOrString> = ref('');
+
+function clear() {
+    inputText.value = " ";
+}
+
+function handlePasteText(newVal: string) {
+    inputText.value = newVal
+}
+
+function handleInputChange(newVal: string){
+    inputText.value = newVal;
+}
+
+const options = [
+  {
+    label: 'JSON',
+    value: 'json'
+  },
+  {
+    label: 'YAML',
+    value: 'yaml'
+  },
+  {
+    label: 'CSV',
+    value: 'csv'
+  },
+]
+
+
+function handleConversion(newVal: string){
+  inputText.value = newVal;
+
+  if (inputType.value == 'json' && outputType.value == 'yaml') {
+    
+    outputText.value = jsonToYaml(inputText.value);
+
+  } else if (inputType.value === 'yaml' && outputType.value === 'json') {
+    
+    outputText.value = yamlToJson(inputText.value);
+
+  } else if (inputType.value === 'json' && outputType.value === 'csv') {
+   
+    outputText.value = jsonToCsv(inputText.value);
+
+  }  else if (inputType.value === 'csv' && outputType.value === 'json') {
+    
+    outputText.value = csvToJson(inputText.value);
+
+  } else if (inputType.value === 'yaml' && outputType.value === 'csv') {
+    
+    outputText.value = 'Cannot convert Yaml to CSV'
+
+  }  else if (inputType.value === 'csv' && outputType.value === 'yaml') {
+    
+    outputText.value = 'Cannot convert CSV to Yaml'
+
+  }   else if (inputType.value === 'json' && outputType.value === 'json') {
+    
+    outputText.value = 'Input object is already in JSON'
+
+  }   else if (inputType.value === 'csv' && outputType.value === 'csv') {
+    
+    outputText.value = 'Input object is already in CSV'
+
+  }   else if (inputType.value === 'yaml' && outputType.value === 'yaml') {
+    
+    outputText.value = 'Input object is already in Yaml'
+    
+  }
+}
+
+</script>
+
+
+<template>
+    <div class="container">
+    <div class="expression">
+      <section>
+        <ui-select
+          id="inputType"
+          v-model="inputType"
+          :options="options"
+        >
+          Input Type
+        </ui-select>
+      </section>
+
+      <InputOptions label="Input Text:" @paste="handlePasteText" @reset="clear" :hideReset="false" :hideCopy="true" />
+            <Input input-type="textarea" placeholder="Enter Content..." :value="inputText" class="inputElem" @update:value="useThrottle($event, handleConversion)"/>
+    </div>
+
+        
+        
+      <div class="output">
+      <section>
+        <ui-select
+          id="outputType"
+          v-model="outputType"
+          :options="options"
+        >
+          Output Type
+        </ui-select>
+      </section>
+      <InputOptions label="Output Text:" :hideClipboard="true" :hideReset="true" :copyContent="outputText" />
+            <Input input-type="textarea" disabled placeholder="Results will appear here" class="no-resize inputText grow" :value="outputText"></Input>
+    </div>
+
+        
+    </div>
+</template>
+
+
+<style scoped>
+.container {
+    width: 100%;
+    padding: 10px;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1em;
+}
+
+.container .output,
+.container .expression {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+}
+
+.container .inputElem {
+    flex-grow: 1;
+    font-size: 25px;
+    color: var(--color-text);
+}
+
+.match {
+    color: green;
+}
+
+.container .tSel::selection,
+.container .tSel::-moz-selection {
+    color: transparent !important;
+    background-color: blue;
+}
+
+.container .grow {
+    flex-grow: 1;
+}
+
+@media screen and (max-width: 800px) {
+    .container {
+        display: block;
+    }
+
+
+    .container .inputElem {
+        height: 300px;
+    }
+
+    .container .inputElem .styledInput {
+        width: 100%;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/modules/JsonConverter/config.json b/src/modules/JsonConverter/config.json
new file mode 100644
index 0000000..15eabfe
--- /dev/null
+++ b/src/modules/JsonConverter/config.json
@@ -0,0 +1 @@
+{ "slug": "json_converter", "name": "Json Converter", "icon": "sync_alt" }
diff --git a/src/modules/JsonConverter/index.ts b/src/modules/JsonConverter/index.ts
new file mode 100644
index 0000000..3336e54
--- /dev/null
+++ b/src/modules/JsonConverter/index.ts
@@ -0,0 +1,61 @@
+import * as yaml from "js-yaml"; 
+import * as papa from "papaparse";
+
+const yamlSettings = {
+    flowlevel: 3,
+    styles: {
+        '!!int' : 'hexadecimal', 
+        '!!null': 'camelcase'
+    }
+}
+
+export function jsonToYaml(jsonString: string): string {
+    try { 
+        const jsonObject = JSON.parse(jsonString);
+        const yamlString = yaml.dump(jsonObject, yamlSettings)
+        return yamlString;
+    } catch (e) {
+        console.log("Error converting JSON to YAML", e);
+        return "There was an error"; 
+    }
+}
+
+export function yamlToJson(yamlObject: any): string {
+    try { 
+        const jsonObject = yaml.load(yamlObject);
+        const jsonString = `${JSON.stringify(jsonObject, null, 2)}`
+        return jsonString;
+    } catch (e) {
+        console.log("Error converting YAML to JSON", e);
+        return "There was an error"; 
+    }
+}
+
+export function jsonToCsv(jsonString: string): string {
+    try {
+        const jsonObject = JSON.parse(jsonString);
+        const csvObject = papa.unparse(jsonObject);
+        return csvObject; 
+    } catch (e) {
+        console.log("Error converting JSON to CSV", e); 
+        return "There was an error";
+    }
+}
+
+export function csvToJson(csvData: any): string {
+    try {
+        
+        const jsonObject = papa.parse(csvData, {
+            header: false,
+            skipEmptyLines: true,
+        });
+        
+        const cleanJsonObject = jsonObject.data;
+        var jsonString = `${JSON.stringify(cleanJsonObject, null, 2)}`;
+        return jsonString; 
+    } catch (e) {
+        console.log("Error converting CSV to JSON", e); 
+        return "There was an error";
+    }
+}
+
diff --git a/src/routes.ts b/src/routes.ts
index a380afa..3cc130e 100644
--- a/src/routes.ts
+++ b/src/routes.ts
@@ -40,6 +40,11 @@ const routes: Routes = {
         "name": "HTML Preview",
         "icon": "code"
     },
+    "json_converter": {
+        "dir": "JsonConverter",
+        "name": "Json Converter",
+        "icon": "sync_alt"
+    },
     "json_formatter": {
         "dir": "JsonFormatter",
         "name": "JSON Formatter",