diff --git a/packages/ui/package-lock.json b/packages/ui/package-lock.json
index 67a748f1..84b2c506 100644
--- a/packages/ui/package-lock.json
+++ b/packages/ui/package-lock.json
@@ -21,7 +21,7 @@
                 "dayjs": "^1.10.7",
                 "dexie": "^3.2.0",
                 "dexie-export-import": "^1.0.3",
-                "httpsnippet-browser": "github:flawiddsouza/httpsnippet-browser#e40dbea",
+                "httpsnippet-browser": "github:flawiddsouza/httpsnippet-browser#ed12aba",
                 "insomnia-importers-browser": "github:flawiddsouza/insomnia-importers-browser",
                 "jszip": "^3.7.1",
                 "lodash.get": "^4.4.2",
@@ -32,9 +32,9 @@
                 "quickjs-emscripten-sync": "^1.5.2",
                 "sass": "^1.43.4",
                 "shell-quote": "^1.8.1",
-                "socket.io-client-v2": "npm:socket.io-client@^2",
-                "socket.io-client-v3": "npm:socket.io-client@^3",
-                "socket.io-client-v4": "npm:socket.io-client@^4",
+                "socket.io-client-v2": "npm:socket.io-client@^2.5.0",
+                "socket.io-client-v3": "npm:socket.io-client@^3.1.3",
+                "socket.io-client-v4": "npm:socket.io-client@^4.7.4",
                 "vue": "^3.2.41",
                 "vue-toast-notification": "^3.0.0",
                 "vuex": "^4.0.2"
@@ -5642,8 +5642,8 @@
             }
         },
         "node_modules/httpsnippet-browser": {
-            "version": "1.0.0",
-            "resolved": "git+ssh://git@github.com/flawiddsouza/httpsnippet-browser.git#e40dbeaf67b2bd940c214dfb70f66f5fad5d0a60",
+            "version": "1.1.0",
+            "resolved": "git+ssh://git@github.com/flawiddsouza/httpsnippet-browser.git#ed12aba08a0621ba007d36dbd568dde3299a85a4",
             "license": "MIT"
         },
         "node_modules/idb": {
@@ -12962,8 +12962,8 @@
             }
         },
         "httpsnippet-browser": {
-            "version": "git+ssh://git@github.com/flawiddsouza/httpsnippet-browser.git#e40dbeaf67b2bd940c214dfb70f66f5fad5d0a60",
-            "from": "httpsnippet-browser@github:flawiddsouza/httpsnippet-browser#e40dbea"
+            "version": "git+ssh://git@github.com/flawiddsouza/httpsnippet-browser.git#ed12aba08a0621ba007d36dbd568dde3299a85a4",
+            "from": "httpsnippet-browser@github:flawiddsouza/httpsnippet-browser#ed12aba"
         },
         "idb": {
             "version": "7.1.1",
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 641ed37e..e40eac8f 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -27,7 +27,7 @@
         "dayjs": "^1.10.7",
         "dexie": "^3.2.0",
         "dexie-export-import": "^1.0.3",
-        "httpsnippet-browser": "github:flawiddsouza/httpsnippet-browser#e40dbea",
+        "httpsnippet-browser": "github:flawiddsouza/httpsnippet-browser#ed12aba",
         "insomnia-importers-browser": "github:flawiddsouza/insomnia-importers-browser",
         "jszip": "^3.7.1",
         "lodash.get": "^4.4.2",
diff --git a/packages/ui/src/components/CodeMirrorEditor.vue b/packages/ui/src/components/CodeMirrorEditor.vue
index 5e81580b..9e3c8a54 100644
--- a/packages/ui/src/components/CodeMirrorEditor.vue
+++ b/packages/ui/src/components/CodeMirrorEditor.vue
@@ -56,6 +56,7 @@ function createState(language, documentText, vueInstance) {
         languageFunc = graphqlLanguage
         highlightStyle = codeMirrorSyntaxHighlighting()
     }
+
     return EditorState.create({
         doc: documentText,
         extensions: [
@@ -86,7 +87,8 @@ function createState(language, documentText, vueInstance) {
                 indentWithTab,
                 ...searchKeymap,
                 selectLineKeyMap
-            ])
+            ]),
+            vueInstance.readonly ? EditorState.readOnly.of(true) : EditorState.readOnly.of(false),
         ]
     })
 }
@@ -100,7 +102,11 @@ export default {
         lang: {
             type: String,
             required: true
-        }
+        },
+        readonly: {
+            type: Boolean,
+            default: false
+        },
     },
     data() {
         return {
diff --git a/packages/ui/src/components/Sidebar.vue b/packages/ui/src/components/Sidebar.vue
index 26eae527..c996b6b3 100644
--- a/packages/ui/src/components/Sidebar.vue
+++ b/packages/ui/src/components/Sidebar.vue
@@ -28,6 +28,7 @@
     <PluginManagerModal v-model:showModal="pluginManagerShow" :collection-item="pluginManagerCollectionItem" />
     <SettingsModal v-model:showModal="settingsModalShow" :collection-item="settingsModalCollectionItem" />
     <DuplicateCollectionItemModal v-model:showModal="showDuplicateCollectionItemModal" :collection-item-to-duplicate="collectionItemToDuplicate" />
+    <GenerateCodeModal v-model:showModal="generateCodeModalShow" :collection-item="generateCodeModalCollectionItem" />
 </template>
 
 <script>
@@ -40,6 +41,7 @@ import EnvironmentModal from './modals/EnvironmentModal.vue'
 import PluginManagerModal from './modals/PluginManagerModal.vue'
 import SettingsModal from './modals/SidebarSettingsModal.vue'
 import DuplicateCollectionItemModal from './modals/DuplicateCollectionItemModal.vue'
+import GenerateCodeModal from './modals/GenerateCodeModal.vue'
 import { mapState } from 'vuex'
 import { flattenTree, exportRestfoxCollection } from '@/helpers'
 import { generateCode } from '@/utils/generate-code'
@@ -54,7 +56,8 @@ export default {
         EnvironmentModal,
         PluginManagerModal,
         SettingsModal,
-        DuplicateCollectionItemModal
+        DuplicateCollectionItemModal,
+        GenerateCodeModal,
     },
     data() {
         return {
@@ -78,6 +81,8 @@ export default {
             collectionItemToDuplicate: null,
             pluginManagerCollectionItem: null,
             pluginManagerShow: false,
+            generateCodeModalCollectionItem: null,
+            generateCodeModalShow: false,
         }
     },
     computed: {
@@ -147,6 +152,12 @@ export default {
                         'value': 'Copy as Curl',
                         'icon': 'fa fa-copy'
                     },
+                    {
+                        'type': 'option',
+                        'label': 'Generate Code',
+                        'value': 'Generate Code',
+                        'icon': 'fa fa-code'
+                    },
                     {
                         'type': 'option',
                         'label': 'Plugins',
@@ -171,8 +182,12 @@ export default {
                 ]
 
                 if(this.activeSidebarItemForContextMenu._type === 'socket') {
-                    // Remove Copy as Curl & Plugins
-                    contextMenuOptions = contextMenuOptions.filter(option => option.value !== 'Copy as Curl' && option.value !== 'Plugins')
+                    const optionsToRemove = [
+                        'Copy as Curl',
+                        'Generate Code',
+                        'Plugins'
+                    ]
+                    contextMenuOptions = contextMenuOptions.filter(option => !optionsToRemove.includes(option.value))
                 }
 
                 return contextMenuOptions
@@ -308,6 +323,11 @@ export default {
                 }
             }
 
+            if(clickedSidebarItem === 'Generate Code') {
+                this.generateCodeModalCollectionItem = JSON.parse(JSON.stringify(this.activeSidebarItemForContextMenu))
+                this.generateCodeModalShow = true
+            }
+
             if(clickedSidebarItem === 'New Request') {
                 this.addRequestModalParentId = this.activeSidebarItemForContextMenu ? this.activeSidebarItemForContextMenu._id : null
                 this.addRequestModalShow = true
diff --git a/packages/ui/src/components/modals/GenerateCodeModal.vue b/packages/ui/src/components/modals/GenerateCodeModal.vue
new file mode 100644
index 00000000..e05f4550
--- /dev/null
+++ b/packages/ui/src/components/modals/GenerateCodeModal.vue
@@ -0,0 +1,120 @@
+<template>
+    <div v-if="showModalComp">
+        <modal :title="title" v-model="showModalComp" height="70vh" width="55rem">
+            <div class="generate-code-modal-container">
+                <label>
+                    <div style="font-weight: 500; margin-bottom: 0.25rem;">Select Language</div>
+                    <select v-model="selectedLanguage" class="full-width-input">
+                        <option value="" disabled>Select language</option>
+                        <option v-for="target in availableTargets" :value="target">{{ target.title }}</option>
+                    </select>
+                </label>
+                <label v-if="selectedLanguage" style="margin-top: 1rem;">
+                    <div style="font-weight: 500; margin-bottom: 0.25rem;">Select Client</div>
+                    <select v-model="selectedClient" class="full-width-input">
+                        <option value="" disabled >Select client</option>
+                        <option v-for="client in selectedLanguage.clients" :value="client">{{ client.title }}</option>
+                    </select>
+                </label>
+                <div v-if="generatedCode" style="margin-top: 1rem;">
+                    <div style="font-weight: 500; margin-bottom: 0.25rem;">Code</div>
+                    <CodeMirrorEditor :model-value="generatedCode" lang="javascript" :readonly="true" class="code-editor" />
+                </div>
+            </div>
+        </modal>
+    </div>
+</template>
+
+<script>
+import Modal from '@/components/Modal.vue'
+import { generateCode, getAvailableTargets } from '@/utils/generate-code'
+import CodeMirrorEditor from '../CodeMirrorEditor.vue'
+
+export default {
+    props: {
+        showModal: Boolean,
+        collectionItem: {
+            type: Object,
+            required: false
+        }
+    },
+    components: {
+        Modal,
+        CodeMirrorEditor,
+    },
+    data() {
+        return {
+            selectedLanguage: '',
+            selectedClient: '',
+            generatedCode: '',
+        }
+    },
+    computed: {
+        title() {
+            let title = 'Generate Code'
+
+            if(this.collectionItem) {
+                title = `${title} — ${this.collectionItem.name}`
+            }
+
+            return title
+        },
+        showModalComp: {
+            get() {
+                return this.showModal
+            },
+            set(value) {
+                this.$emit('update:showModal', value)
+            }
+        },
+        activeWorkspace() {
+            return this.$store.state.activeWorkspace
+        },
+        availableTargets() {
+            return getAvailableTargets()
+        },
+    },
+    watch: {
+        selectedClient() {
+            this.generateCode()
+        },
+        selectedLanguage() {
+            this.selectedClient = ''
+            this.generatedCode = ''
+        },
+        collectionItem() {
+            this.generateCode()
+        }
+    },
+    methods: {
+        async generateCode() {
+            if(this.selectedClient) {
+                try {
+                    const request = JSON.parse(JSON.stringify(this.collectionItem))
+                    const { environment } = await this.$store.dispatch('getEnvironmentForRequest', request)
+                    const code = await generateCode(request, environment, this.selectedLanguage.key, this.selectedClient.key)
+                    this.generatedCode = code
+                } catch(e) {
+                    this.generatedCode = e.message
+                }
+            } else {
+                this.generatedCode = ''
+            }
+        }
+    }
+}
+</script>
+
+<style scoped>
+.generate-code-modal-container {
+    display: grid;
+    grid-template-rows: auto auto 1fr;
+    height: 100%;
+}
+
+.code-editor {
+    height: calc(100% - 1.2rem);
+    overflow-y: auto;
+    border: 1px solid var(--modal-border-color);
+}
+</style>
diff --git a/packages/ui/src/utils/generate-code.ts b/packages/ui/src/utils/generate-code.ts
index 239bb8e8..3c2af496 100644
--- a/packages/ui/src/utils/generate-code.ts
+++ b/packages/ui/src/utils/generate-code.ts
@@ -1,5 +1,9 @@
 import { createRequestData, substituteEnvironmentVariables } from '@/helpers'
-import { HTTPSnippet } from 'httpsnippet-browser'
+import { HTTPSnippet, availableTargets } from 'httpsnippet-browser'
+
+export function getAvailableTargets() {
+    return availableTargets()
+}
 
 export async function generateCode(request, environment, target: 'shell', clientId: 'curl') {
     const state = {