diff --git a/assets/scss/styles.scss b/assets/scss/styles.scss
index 16aa06884..5ab4ffbb7 100644
--- a/assets/scss/styles.scss
+++ b/assets/scss/styles.scss
@@ -38,7 +38,7 @@
 input::placeholder,
 textarea::placeholder,
 .CodeMirror-empty {
-  @apply text-secondaryDark;
+  @apply text-secondary;
   @apply opacity-25;
 }
 
diff --git a/components/graphql/RequestOptions.vue b/components/graphql/RequestOptions.vue
index af80ffef1..f97926338 100644
--- a/components/graphql/RequestOptions.vue
+++ b/components/graphql/RequestOptions.vue
@@ -356,6 +356,7 @@ const variableEditor = ref<any | null>(null)
 useCodemirror(variableEditor, variableString, {
   extendedEditorConfig: {
     mode: "application/ld+json",
+    placeholder: t("request.variables").toString(),
   },
   linter: jsonLinter,
   completer: null,
@@ -367,6 +368,7 @@ const schemaString = useReadonlyStream(props.conn.schema$, null)
 useCodemirror(queryEditor, gqlQueryString, {
   extendedEditorConfig: {
     mode: "graphql",
+    placeholder: t("request.query").toString(),
   },
   linter: createGQLQueryLinter(schemaString),
   completer: queryCompleter(schemaString),
diff --git a/components/graphql/Response.vue b/components/graphql/Response.vue
index ea7d86fe1..953bb8cc0 100644
--- a/components/graphql/Response.vue
+++ b/components/graphql/Response.vue
@@ -52,6 +52,24 @@
         justify-center
       "
     >
+      <div class="flex space-x-2 pb-4">
+        <div class="flex flex-col space-y-4 items-end">
+          <span class="flex flex-1 items-center">
+            {{ $t("shortcut.general.command_menu") }}
+          </span>
+          <span class="flex flex-1 items-center">
+            {{ $t("shortcut.general.help_menu") }}
+          </span>
+        </div>
+        <div class="flex flex-col space-y-4">
+          <div class="flex">
+            <span class="shortcut-key">/</span>
+          </div>
+          <div class="flex">
+            <span class="shortcut-key">?</span>
+          </div>
+        </div>
+      </div>
       <ButtonSecondary
         :label="$t('app.documentation')"
         to="https://docs.hoppscotch.io"
diff --git a/components/http/CodegenModal.vue b/components/http/CodegenModal.vue
index 029b28f14..161ef7033 100644
--- a/components/http/CodegenModal.vue
+++ b/components/http/CodegenModal.vue
@@ -46,13 +46,17 @@
       </div>
     </template>
     <template #footer>
-      <ButtonPrimary
-        ref="copyRequestCode"
-        :label="t('action.copy')"
-        :svg="copyIcon"
-        @click.native="copyRequestCode"
-      />
-      <ButtonSecondary :label="t('action.dismiss')" @click.native="hideModal" />
+      <span class="flex">
+        <ButtonPrimary
+          :label="t('action.copy').toString()"
+          :svg="copyIcon"
+          @click.native="copyRequestCode"
+        />
+        <ButtonSecondary
+          :label="t('action.dismiss').toString()"
+          @click.native="hideModal"
+        />
+      </span>
     </template>
   </SmartModal>
 </template>
diff --git a/components/http/ImportCurl.vue b/components/http/ImportCurl.vue
index 422f78993..671541597 100644
--- a/components/http/ImportCurl.vue
+++ b/components/http/ImportCurl.vue
@@ -13,7 +13,7 @@
       </div>
     </template>
     <template #footer>
-      <span>
+      <span class="flex">
         <ButtonPrimary
           :label="$t('import.title').toString()"
           @click.native="handleImport"
diff --git a/components/http/PreRequestScript.vue b/components/http/PreRequestScript.vue
index 5a140b21f..86364130c 100644
--- a/components/http/PreRequestScript.vue
+++ b/components/http/PreRequestScript.vue
@@ -82,7 +82,7 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref } from "@nuxtjs/composition-api"
+import { reactive, ref, useContext } from "@nuxtjs/composition-api"
 import { usePreRequestScript } from "~/newstore/RESTSession"
 import snippets from "~/helpers/preRequestScriptSnippets"
 import "codemirror/mode/javascript/javascript"
@@ -90,6 +90,11 @@ import { useCodemirror } from "~/helpers/editor/codemirror"
 import linter from "~/helpers/editor/linting/preRequest"
 import completer from "~/helpers/editor/completion/preRequest"
 
+const {
+  app: { i18n },
+} = useContext()
+const t = i18n.t.bind(i18n)
+
 const preRequestScript = usePreRequestScript()
 
 const preRrequestEditor = ref<any | null>(null)
@@ -102,6 +107,7 @@ useCodemirror(
     extendedEditorConfig: {
       mode: "application/javascript",
       lineWrapping: linewrapEnabled,
+      placeholder: t("preRequest.javascript_code").toString(),
     },
     linter,
     completer,
diff --git a/components/http/RawBody.vue b/components/http/RawBody.vue
index 1b31936dd..1bd202953 100644
--- a/components/http/RawBody.vue
+++ b/components/http/RawBody.vue
@@ -106,6 +106,7 @@ useCodemirror(
     extendedEditorConfig: {
       lineWrapping: linewrapEnabled,
       mode: rawInputEditorLang,
+      placeholder: t("request.raw_body").toString(),
     },
     linter: null,
     completer: null,
diff --git a/components/http/ResponseMeta.vue b/components/http/ResponseMeta.vue
index b0903e155..258499e24 100644
--- a/components/http/ResponseMeta.vue
+++ b/components/http/ResponseMeta.vue
@@ -9,6 +9,38 @@
         justify-center
       "
     >
+      <div class="flex space-x-2 pb-4">
+        <div class="flex flex-col space-y-4 items-end">
+          <span class="flex flex-1 items-center">
+            {{ $t("shortcut.request.send_request") }}
+          </span>
+          <span class="flex flex-1 items-center">
+            {{ $t("shortcut.general.show_all") }}
+          </span>
+          <span class="flex flex-1 items-center">
+            {{ $t("shortcut.general.command_menu") }}
+          </span>
+          <span class="flex flex-1 items-center">
+            {{ $t("shortcut.general.help_menu") }}
+          </span>
+        </div>
+        <div class="flex flex-col space-y-4">
+          <div class="flex">
+            <span class="shortcut-key">{{ getSpecialKey() }}</span>
+            <span class="shortcut-key">G</span>
+          </div>
+          <div class="flex">
+            <span class="shortcut-key">{{ getSpecialKey() }}</span>
+            <span class="shortcut-key">K</span>
+          </div>
+          <div class="flex">
+            <span class="shortcut-key">/</span>
+          </div>
+          <div class="flex">
+            <span class="shortcut-key">?</span>
+          </div>
+        </div>
+      </div>
       <ButtonSecondary
         :label="$t('app.documentation')"
         to="https://docs.hoppscotch.io"
@@ -74,6 +106,7 @@
 import { computed } from "@nuxtjs/composition-api"
 import findStatusGroup from "~/helpers/findStatusGroup"
 import { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
+import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
 
 const props = defineProps<{
   response: HoppRESTResponse
diff --git a/components/http/Tests.vue b/components/http/Tests.vue
index 2cba86490..788200f3c 100644
--- a/components/http/Tests.vue
+++ b/components/http/Tests.vue
@@ -82,7 +82,7 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref } from "@nuxtjs/composition-api"
+import { reactive, ref, useContext } from "@nuxtjs/composition-api"
 import { useTestScript } from "~/newstore/RESTSession"
 import testSnippets from "~/helpers/testSnippets"
 import "codemirror/mode/javascript/javascript"
@@ -90,6 +90,11 @@ import { useCodemirror } from "~/helpers/editor/codemirror"
 import linter from "~/helpers/editor/linting/testScript"
 import completer from "~/helpers/editor/completion/testScript"
 
+const {
+  app: { i18n },
+} = useContext()
+const t = i18n.t.bind(i18n)
+
 const testScript = useTestScript()
 
 const testScriptEditor = ref<any | null>(null)
@@ -102,6 +107,7 @@ useCodemirror(
     extendedEditorConfig: {
       mode: "application/javascript",
       lineWrapping: linewrapEnabled,
+      placeholder: t("test.javascript_code").toString(),
     },
     linter,
     completer,
diff --git a/components/smart/EnvInput.vue b/components/smart/EnvInput.vue
index 75c8aa94e..d842be670 100644
--- a/components/smart/EnvInput.vue
+++ b/components/smart/EnvInput.vue
@@ -483,7 +483,7 @@ export default defineComponent({
     line-height: 1.9;
 
     &::before {
-      @apply text-secondaryDark;
+      @apply text-secondary;
       @apply opacity-25;
       @apply pointer-events-none;