diff --git a/components/http/CodegenModal.vue b/components/http/CodegenModal.vue
index 105528d5a..1a9d4b7eb 100644
--- a/components/http/CodegenModal.vue
+++ b/components/http/CodegenModal.vue
@@ -11,7 +11,7 @@
       </div>
     </div>
     <div slot="body" class="flex flex-col">
-      <label for="requestType">{{ $t("request_type") }}</label>
+      <label for="requestType">{{ $t("choose_language") }}</label>
       <span class="select-wrapper">
         <v-popover>
           <pre v-if="requestType">{{ codegens.find((x) => x.id === requestType).name }}</pre>
@@ -46,15 +46,22 @@
           </button>
         </div>
       </div>
-      <textarea
-        id="generatedCode"
+      <SmartAceEditor
+        v-if="requestType"
+        :value="requestCode"
+        :lang="codegens.find((x) => x.id === requestType).language"
+        :options="{
+          maxLines: '10',
+          minLines: '10',
+          fontSize: '16px',
+          autoScrollEditorIntoView: true,
+          readOnly: true,
+          showPrintMargin: false,
+          useWorker: false,
+        }"
+        styles="rounded-b-lg"
         ref="generatedCode"
-        name="generatedCode"
-        rows="8"
-        v-model="requestCode"
-        readonly
-        class="rounded-b-lg"
-      ></textarea>
+      />
     </div>
   </SmartModal>
 </template>
@@ -66,7 +73,7 @@ export default {
   props: {
     show: Boolean,
     requestCode: String,
-    requestTypeProp: { type: String, default: "" },
+    requestTypeProp: { type: String, default: "curl" },
   },
   data() {
     return {
@@ -97,7 +104,8 @@ export default {
       this.$toast.success(this.$t("copied_to_clipboard"), {
         icon: "done",
       })
-      this.$refs.generatedCode.select()
+      this.$refs.generatedCode.editor.selectAll()
+      this.$refs.generatedCode.editor.focus()
       document.execCommand("copy")
       setTimeout(() => (this.$refs.copyRequestCode.innerHTML = this.copyButton), 1000)
     },
diff --git a/helpers/codegen/codegen.js b/helpers/codegen/codegen.js
index 34701f294..7adc0ba51 100644
--- a/helpers/codegen/codegen.js
+++ b/helpers/codegen/codegen.js
@@ -25,6 +25,8 @@ import { ShellWgetCodegen } from "./generators/shell-wget"
  *
  * id: string
  * name: string
+ * language: string // a string identifier used in ace editor for syntax highlighting
+ *                  // see node_modules/ace-builds/src-noconflict/mode-** files for valid value
  * generator: (ctx) => string
  *
  */
diff --git a/helpers/codegen/generators/c-libcurl.js b/helpers/codegen/generators/c-libcurl.js
index ac26d310b..7c6dbb6f6 100644
--- a/helpers/codegen/generators/c-libcurl.js
+++ b/helpers/codegen/generators/c-libcurl.js
@@ -1,6 +1,7 @@
 export const CLibcurlCodegen = {
   id: "c-libcurl",
   name: "C libcurl",
+  language: "c_cpp",
   generator: ({
     auth,
     httpUser,
diff --git a/helpers/codegen/generators/cs-restsharp.js b/helpers/codegen/generators/cs-restsharp.js
index d66fe7abc..11052b612 100644
--- a/helpers/codegen/generators/cs-restsharp.js
+++ b/helpers/codegen/generators/cs-restsharp.js
@@ -3,6 +3,7 @@ import { isJSONContentType } from "~/helpers/utils/contenttypes"
 export const CsRestsharpCodegen = {
   id: "cs-restsharp",
   name: "C# RestSharp",
+  language: "csharp",
   generator: ({
     url,
     pathName,
diff --git a/helpers/codegen/generators/curl.js b/helpers/codegen/generators/curl.js
index cdcfa9107..c83069bad 100644
--- a/helpers/codegen/generators/curl.js
+++ b/helpers/codegen/generators/curl.js
@@ -1,6 +1,7 @@
 export const CurlCodegen = {
   id: "curl",
   name: "cURL",
+  language: "sh",
   generator: ({
     url,
     pathName,
diff --git a/helpers/codegen/generators/go-native.js b/helpers/codegen/generators/go-native.js
index 704f10d40..df2bde681 100644
--- a/helpers/codegen/generators/go-native.js
+++ b/helpers/codegen/generators/go-native.js
@@ -3,6 +3,7 @@ import { isJSONContentType } from "~/helpers/utils/contenttypes"
 export const GoNativeCodegen = {
   id: "go-native",
   name: "Go Native",
+  language: "golang",
   generator: ({
     url,
     pathName,
diff --git a/helpers/codegen/generators/java-okhttp.js b/helpers/codegen/generators/java-okhttp.js
index 508b892ae..3252d6936 100644
--- a/helpers/codegen/generators/java-okhttp.js
+++ b/helpers/codegen/generators/java-okhttp.js
@@ -1,6 +1,7 @@
 export const JavaOkhttpCodegen = {
   id: "java-okhttp",
   name: "Java OkHttp",
+  language: "java",
   generator: ({
     auth,
     httpUser,
diff --git a/helpers/codegen/generators/java-unirest.js b/helpers/codegen/generators/java-unirest.js
index 0c578bc4c..19ee32003 100644
--- a/helpers/codegen/generators/java-unirest.js
+++ b/helpers/codegen/generators/java-unirest.js
@@ -1,6 +1,7 @@
 export const JavaUnirestCodegen = {
   id: "java-unirest",
   name: "Java Unirest",
+  language: "java",
   generator: ({
     url,
     pathName,
diff --git a/helpers/codegen/generators/javascript-fetch.js b/helpers/codegen/generators/javascript-fetch.js
index e684d86a9..81271ef30 100644
--- a/helpers/codegen/generators/javascript-fetch.js
+++ b/helpers/codegen/generators/javascript-fetch.js
@@ -3,6 +3,7 @@ import { isJSONContentType } from "~/helpers/utils/contenttypes"
 export const JavascriptFetchCodegen = {
   id: "js-fetch",
   name: "JavaScript Fetch",
+  language: "javascript",
   generator: ({
     url,
     pathName,
diff --git a/helpers/codegen/generators/javascript-jquery.js b/helpers/codegen/generators/javascript-jquery.js
index fdf7b5c0a..040aecac3 100644
--- a/helpers/codegen/generators/javascript-jquery.js
+++ b/helpers/codegen/generators/javascript-jquery.js
@@ -1,6 +1,7 @@
 export const JavascriptJqueryCodegen = {
   id: "js-jquery",
   name: "JavaScript jQuery",
+  language: "javascript",
   generator: ({
     url,
     pathName,
diff --git a/helpers/codegen/generators/javascript-xhr.js b/helpers/codegen/generators/javascript-xhr.js
index 3855cfbe0..8064a92c0 100644
--- a/helpers/codegen/generators/javascript-xhr.js
+++ b/helpers/codegen/generators/javascript-xhr.js
@@ -3,6 +3,7 @@ import { isJSONContentType } from "~/helpers/utils/contenttypes"
 export const JavascriptXhrCodegen = {
   id: "js-xhr",
   name: "JavaScript XHR",
+  language: "javascript",
   generator: ({
     auth,
     httpUser,
diff --git a/helpers/codegen/generators/nodejs-axios.js b/helpers/codegen/generators/nodejs-axios.js
index 20fe6f62d..a880c04c6 100644
--- a/helpers/codegen/generators/nodejs-axios.js
+++ b/helpers/codegen/generators/nodejs-axios.js
@@ -1,6 +1,7 @@
 export const NodejsAxiosCodegen = {
   id: "nodejs-axios",
   name: "NodeJs Axios",
+  language: "javascript",
   generator: ({
     url,
     pathName,
diff --git a/helpers/codegen/generators/nodejs-native.js b/helpers/codegen/generators/nodejs-native.js
index 49d7abffe..73bf7e143 100644
--- a/helpers/codegen/generators/nodejs-native.js
+++ b/helpers/codegen/generators/nodejs-native.js
@@ -3,6 +3,7 @@ import { isJSONContentType } from "~/helpers/utils/contenttypes"
 export const NodejsNativeCodegen = {
   id: "nodejs-native",
   name: "NodeJs Native",
+  language: "javascript",
   generator: ({
     url,
     pathName,
diff --git a/helpers/codegen/generators/nodejs-request.js b/helpers/codegen/generators/nodejs-request.js
index 0a8535051..884dd2929 100644
--- a/helpers/codegen/generators/nodejs-request.js
+++ b/helpers/codegen/generators/nodejs-request.js
@@ -3,6 +3,7 @@ import { isJSONContentType } from "~/helpers/utils/contenttypes"
 export const NodejsRequestCodegen = {
   id: "nodejs-request",
   name: "NodeJs Request",
+  language: "javascript",
   generator: ({
     url,
     pathName,
diff --git a/helpers/codegen/generators/nodejs-unirest.js b/helpers/codegen/generators/nodejs-unirest.js
index f92eb9f19..b9c7c3cdc 100644
--- a/helpers/codegen/generators/nodejs-unirest.js
+++ b/helpers/codegen/generators/nodejs-unirest.js
@@ -3,6 +3,7 @@ import { isJSONContentType } from "~/helpers/utils/contenttypes"
 export const NodejsUnirestCodegen = {
   id: "nodejs-unirest",
   name: "NodeJs Unirest",
+  language: "javascript",
   generator: ({
     url,
     pathName,
diff --git a/helpers/codegen/generators/php-curl.js b/helpers/codegen/generators/php-curl.js
index c5e12b65e..f9c5960c5 100644
--- a/helpers/codegen/generators/php-curl.js
+++ b/helpers/codegen/generators/php-curl.js
@@ -3,6 +3,7 @@ import { isJSONContentType } from "~/helpers/utils/contenttypes"
 export const PhpCurlCodegen = {
   id: "php-curl",
   name: "PHP cURL",
+  language: "php",
   generator: ({
     url,
     pathName,
diff --git a/helpers/codegen/generators/powershell-restmethod.js b/helpers/codegen/generators/powershell-restmethod.js
index 891da07f3..79cfa8e97 100644
--- a/helpers/codegen/generators/powershell-restmethod.js
+++ b/helpers/codegen/generators/powershell-restmethod.js
@@ -1,6 +1,7 @@
 export const PowershellRestmethodCodegen = {
   id: "powershell-restmethod",
   name: "PowerShell RestMethod",
+  language: "powershell",
   generator: ({
     url,
     pathName,
diff --git a/helpers/codegen/generators/python-http-client.js b/helpers/codegen/generators/python-http-client.js
index 66a571524..cbe728451 100644
--- a/helpers/codegen/generators/python-http-client.js
+++ b/helpers/codegen/generators/python-http-client.js
@@ -11,6 +11,7 @@ const printHeaders = (headers) => {
 export const PythonHttpClientCodegen = {
   id: "python-http-client",
   name: "Python http.client",
+  language: "python",
   generator: ({
     url,
     pathName,
diff --git a/helpers/codegen/generators/python-requests.js b/helpers/codegen/generators/python-requests.js
index 771acf4c7..3b5c31734 100644
--- a/helpers/codegen/generators/python-requests.js
+++ b/helpers/codegen/generators/python-requests.js
@@ -11,6 +11,7 @@ const printHeaders = (headers) => {
 export const PythonRequestsCodegen = {
   id: "python-requests",
   name: "Python Requests",
+  language: "python",
   generator: ({
     url,
     pathName,
diff --git a/helpers/codegen/generators/ruby-net-http.js b/helpers/codegen/generators/ruby-net-http.js
index c4c0d2836..24ed87977 100644
--- a/helpers/codegen/generators/ruby-net-http.js
+++ b/helpers/codegen/generators/ruby-net-http.js
@@ -1,6 +1,7 @@
 export const RubyNetHttpCodeGen = {
   id: "ruby-net-http",
   name: "Ruby Net::HTTP",
+  language: "ruby",
   generator: ({
     url,
     pathName,
diff --git a/helpers/codegen/generators/salesforce-apex.js b/helpers/codegen/generators/salesforce-apex.js
index d05b95762..24ad1d1c5 100644
--- a/helpers/codegen/generators/salesforce-apex.js
+++ b/helpers/codegen/generators/salesforce-apex.js
@@ -1,6 +1,7 @@
 export const SalesforceApexCodegen = {
   id: "salesforce-apex",
   name: "Salesforce Apex",
+  language: "apex",
   generator: ({
     url,
     pathName,
diff --git a/helpers/codegen/generators/shell-httpie.js b/helpers/codegen/generators/shell-httpie.js
index 542e7695e..a7b6eca1b 100644
--- a/helpers/codegen/generators/shell-httpie.js
+++ b/helpers/codegen/generators/shell-httpie.js
@@ -1,6 +1,7 @@
 export const ShellHttpieCodegen = {
   id: "shell-httpie",
   name: "Shell HTTPie",
+  language: "sh",
   generator: ({
     url,
     pathName,
diff --git a/helpers/codegen/generators/shell-wget.js b/helpers/codegen/generators/shell-wget.js
index cc4affc2a..756ed1752 100644
--- a/helpers/codegen/generators/shell-wget.js
+++ b/helpers/codegen/generators/shell-wget.js
@@ -1,6 +1,7 @@
 export const ShellWgetCodegen = {
   id: "shell-wget",
   name: "Shell wget",
+  language: "sh",
   generator: ({
     url,
     pathName,
diff --git a/store/state.js b/store/state.js
index 2718ea823..a79b4fce9 100644
--- a/store/state.js
+++ b/store/state.js
@@ -15,7 +15,7 @@ export default () => ({
     bodyParams: [],
     rawParams: "",
     rawInput: false,
-    requestType: "",
+    requestType: "curl",
     contentType: "",
   },
   gql: {