diff --git a/packages/hoppscotch-app/assets/scss/styles.scss b/packages/hoppscotch-app/assets/scss/styles.scss
index 2f585bb51..270730424 100644
--- a/packages/hoppscotch-app/assets/scss/styles.scss
+++ b/packages/hoppscotch-app/assets/scss/styles.scss
@@ -286,6 +286,18 @@ button {
   @apply text-secondaryDark;
 }
 
+.floating-input ~ .end-actions {
+  @apply absolute;
+  @apply right-0.2;
+  @apply inset-y-0;
+  @apply flex;
+  @apply items-center;
+}
+
+.floating-input:has(~ .end-actions) {
+  @apply pr-12;
+}
+
 pre.ace_editor {
   @apply font-mono;
   @apply resize-none;
@@ -530,3 +542,13 @@ details[open] summary .indicator {
 #nprogress .bar {
   @apply bg-accent #{!important};
 }
+
+input[type="color"]::-webkit-color-swatch-wrapper {
+  @apply rounded;
+  padding: 0;
+}
+
+input[type="color"]::-webkit-color-swatch {
+  @apply rounded;
+  border: none;
+}
diff --git a/packages/hoppscotch-app/locales/af.json b/packages/hoppscotch-app/locales/af.json
index 21752b62c..209da7fb5 100644
--- a/packages/hoppscotch-app/locales/af.json
+++ b/packages/hoppscotch-app/locales/af.json
@@ -318,7 +318,7 @@
     "clear_input": "Clear input",
     "clear_input_on_send": "Clear input on send",
     "client_id": "Client ID",
-    "color": "Color",
+    "color": "Pick a color",
     "communication": "Kommunikasie",
     "connection_config": "Connection Config",
     "connection_not_authorized": "This MQTT connection does not use any authentication.",
diff --git a/packages/hoppscotch-app/locales/ar.json b/packages/hoppscotch-app/locales/ar.json
index b112534b4..88a253c1c 100644
--- a/packages/hoppscotch-app/locales/ar.json
+++ b/packages/hoppscotch-app/locales/ar.json
@@ -318,7 +318,7 @@
     "clear_input": "Clear input",
     "clear_input_on_send": "Clear input on send",
     "client_id": "Client ID",
-    "color": "Color",
+    "color": "Pick a color",
     "communication": "تواصل",
     "connection_config": "Connection Config",
     "connection_not_authorized": "This MQTT connection does not use any authentication.",
diff --git a/packages/hoppscotch-app/locales/ca.json b/packages/hoppscotch-app/locales/ca.json
index 106f1291d..9a840ae6a 100644
--- a/packages/hoppscotch-app/locales/ca.json
+++ b/packages/hoppscotch-app/locales/ca.json
@@ -318,7 +318,7 @@
     "clear_input": "Clear input",
     "clear_input_on_send": "Clear input on send",
     "client_id": "Client ID",
-    "color": "Color",
+    "color": "Pick a color",
     "communication": "Comunicació",
     "connection_config": "Connection Config",
     "connection_not_authorized": "This MQTT connection does not use any authentication.",
diff --git a/packages/hoppscotch-app/locales/cn.json b/packages/hoppscotch-app/locales/cn.json
index 43e9e4ee1..f260cdd4f 100644
--- a/packages/hoppscotch-app/locales/cn.json
+++ b/packages/hoppscotch-app/locales/cn.json
@@ -318,7 +318,7 @@
     "clear_input": "Clear input",
     "clear_input_on_send": "Clear input on send",
     "client_id": "Client ID",
-    "color": "Color",
+    "color": "Pick a color",
     "communication": "通讯",
     "connection_config": "Connection Config",
     "connection_not_authorized": "This MQTT connection does not use any authentication.",
diff --git a/packages/hoppscotch-app/locales/cs.json b/packages/hoppscotch-app/locales/cs.json
index 25ad14be3..5145085a7 100644
--- a/packages/hoppscotch-app/locales/cs.json
+++ b/packages/hoppscotch-app/locales/cs.json
@@ -318,7 +318,7 @@
     "clear_input": "Clear input",
     "clear_input_on_send": "Clear input on send",
     "client_id": "Client ID",
-    "color": "Color",
+    "color": "Pick a color",
     "communication": "Sdělení",
     "connection_config": "Connection Config",
     "connection_not_authorized": "This MQTT connection does not use any authentication.",
diff --git a/packages/hoppscotch-app/locales/da.json b/packages/hoppscotch-app/locales/da.json
index 897383cbb..a60638a2d 100644
--- a/packages/hoppscotch-app/locales/da.json
+++ b/packages/hoppscotch-app/locales/da.json
@@ -318,7 +318,7 @@
     "clear_input": "Clear input",
     "clear_input_on_send": "Clear input on send",
     "client_id": "Client ID",
-    "color": "Color",
+    "color": "Pick a color",
     "communication": "Meddelelse",
     "connection_config": "Connection Config",
     "connection_not_authorized": "This MQTT connection does not use any authentication.",
diff --git a/packages/hoppscotch-app/locales/de.json b/packages/hoppscotch-app/locales/de.json
index c845fdeb6..b7304770c 100644
--- a/packages/hoppscotch-app/locales/de.json
+++ b/packages/hoppscotch-app/locales/de.json
@@ -318,7 +318,7 @@
     "clear_input": "Clear input",
     "clear_input_on_send": "Clear input on send",
     "client_id": "Client ID",
-    "color": "Color",
+    "color": "Pick a color",
     "communication": "Kommunikation",
     "connection_config": "Connection Config",
     "connection_not_authorized": "This MQTT connection does not use any authentication.",
diff --git a/packages/hoppscotch-app/locales/el.json b/packages/hoppscotch-app/locales/el.json
index 84dfbb233..d8915afe7 100644
--- a/packages/hoppscotch-app/locales/el.json
+++ b/packages/hoppscotch-app/locales/el.json
@@ -318,7 +318,7 @@
     "clear_input": "Clear input",
     "clear_input_on_send": "Clear input on send",
     "client_id": "Client ID",
-    "color": "Color",
+    "color": "Pick a color",
     "communication": "Επικοινωνία",
     "connection_config": "Connection Config",
     "connection_not_authorized": "This MQTT connection does not use any authentication.",
diff --git a/packages/hoppscotch-app/locales/en.json b/packages/hoppscotch-app/locales/en.json
index f16287cf1..8dbd78357 100644
--- a/packages/hoppscotch-app/locales/en.json
+++ b/packages/hoppscotch-app/locales/en.json
@@ -318,7 +318,7 @@
     "clear_input": "Clear input",
     "clear_input_on_send": "Clear input on send",
     "client_id": "Client ID",
-    "color": "Color",
+    "color": "Pick a color",
     "communication": "Communication",
     "connection_config": "Connection Config",
     "connection_not_authorized": "This MQTT connection does not use any authentication.",
diff --git a/packages/hoppscotch-app/locales/es.json b/packages/hoppscotch-app/locales/es.json
index 22c7cd696..7d0946b26 100644
--- a/packages/hoppscotch-app/locales/es.json
+++ b/packages/hoppscotch-app/locales/es.json
@@ -318,7 +318,7 @@
     "clear_input": "Clear input",
     "clear_input_on_send": "Clear input on send",
     "client_id": "Client ID",
-    "color": "Color",
+    "color": "Pick a color",
     "communication": "Comunicación",
     "connection_config": "Connection Config",
     "connection_not_authorized": "This MQTT connection does not use any authentication.",
diff --git a/packages/hoppscotch-app/locales/fi.json b/packages/hoppscotch-app/locales/fi.json
index b54d40ca5..500a9c968 100644
--- a/packages/hoppscotch-app/locales/fi.json
+++ b/packages/hoppscotch-app/locales/fi.json
@@ -318,7 +318,7 @@
     "clear_input": "Clear input",
     "clear_input_on_send": "Clear input on send",
     "client_id": "Client ID",
-    "color": "Color",
+    "color": "Pick a color",
     "communication": "Viestintä",
     "connection_config": "Connection Config",
     "connection_not_authorized": "This MQTT connection does not use any authentication.",
diff --git a/packages/hoppscotch-app/locales/fr.json b/packages/hoppscotch-app/locales/fr.json
index a82620f98..d03bb0b8b 100644
--- a/packages/hoppscotch-app/locales/fr.json
+++ b/packages/hoppscotch-app/locales/fr.json
@@ -318,7 +318,7 @@
     "clear_input": "Clear input",
     "clear_input_on_send": "Clear input on send",
     "client_id": "Client ID",
-    "color": "Color",
+    "color": "Pick a color",
     "communication": "Communication",
     "connection_config": "Connection Config",
     "connection_not_authorized": "This MQTT connection does not use any authentication.",
diff --git a/packages/hoppscotch-app/locales/he.json b/packages/hoppscotch-app/locales/he.json
index 92f7de487..060e6c106 100644
--- a/packages/hoppscotch-app/locales/he.json
+++ b/packages/hoppscotch-app/locales/he.json
@@ -318,7 +318,7 @@
     "clear_input": "Clear input",
     "clear_input_on_send": "Clear input on send",
     "client_id": "Client ID",
-    "color": "Color",
+    "color": "Pick a color",
     "communication": "תִקשׁוֹרֶת",
     "connection_config": "Connection Config",
     "connection_not_authorized": "This MQTT connection does not use any authentication.",
diff --git a/packages/hoppscotch-app/locales/hi.json b/packages/hoppscotch-app/locales/hi.json
index c2e23b610..054aed00d 100644
--- a/packages/hoppscotch-app/locales/hi.json
+++ b/packages/hoppscotch-app/locales/hi.json
@@ -319,7 +319,7 @@
     "clear_input": "Clear input",
     "clear_input_on_send": "Clear input on send",
     "client_id": "Client ID",
-    "color": "Color",
+    "color": "Pick a color",
     "communication": "संचार",
     "connection_config": "Connection Config",
     "connection_not_authorized": "This MQTT connection does not use any authentication.",
diff --git a/packages/hoppscotch-app/locales/hu.json b/packages/hoppscotch-app/locales/hu.json
index 8050a5c73..4f05fb66b 100644
--- a/packages/hoppscotch-app/locales/hu.json
+++ b/packages/hoppscotch-app/locales/hu.json
@@ -318,7 +318,7 @@
     "clear_input": "Clear input",
     "clear_input_on_send": "Clear input on send",
     "client_id": "Client ID",
-    "color": "Color",
+    "color": "Pick a color",
     "communication": "Kommunikáció",
     "connection_config": "Connection Config",
     "connection_not_authorized": "This MQTT connection does not use any authentication.",
diff --git a/packages/hoppscotch-app/locales/id.json b/packages/hoppscotch-app/locales/id.json
index 99aa8b68c..325a58d78 100644
--- a/packages/hoppscotch-app/locales/id.json
+++ b/packages/hoppscotch-app/locales/id.json
@@ -318,7 +318,7 @@
     "clear_input": "Clear input",
     "clear_input_on_send": "Clear input on send",
     "client_id": "Client ID",
-    "color": "Color",
+    "color": "Pick a color",
     "communication": "Komunikasi",
     "connection_config": "Connection Config",
     "connection_not_authorized": "This MQTT connection does not use any authentication.",
diff --git a/packages/hoppscotch-app/locales/it.json b/packages/hoppscotch-app/locales/it.json
index 204010d36..bcd900ffc 100644
--- a/packages/hoppscotch-app/locales/it.json
+++ b/packages/hoppscotch-app/locales/it.json
@@ -318,7 +318,7 @@
     "clear_input": "Clear input",
     "clear_input_on_send": "Clear input on send",
     "client_id": "Client ID",
-    "color": "Color",
+    "color": "Pick a color",
     "communication": "Comunicazione",
     "connection_config": "Connection Config",
     "connection_not_authorized": "This MQTT connection does not use any authentication.",
diff --git a/packages/hoppscotch-app/locales/ja.json b/packages/hoppscotch-app/locales/ja.json
index 3c1a49ba2..a9fce74c9 100644
--- a/packages/hoppscotch-app/locales/ja.json
+++ b/packages/hoppscotch-app/locales/ja.json
@@ -318,7 +318,7 @@
     "clear_input": "Clear input",
     "clear_input_on_send": "Clear input on send",
     "client_id": "Client ID",
-    "color": "Color",
+    "color": "Pick a color",
     "communication": "Communication",
     "connection_config": "Connection Config",
     "connection_not_authorized": "This MQTT connection does not use any authentication.",
diff --git a/packages/hoppscotch-app/locales/ko.json b/packages/hoppscotch-app/locales/ko.json
index 5531d6c3f..c00ec900c 100644
--- a/packages/hoppscotch-app/locales/ko.json
+++ b/packages/hoppscotch-app/locales/ko.json
@@ -318,7 +318,7 @@
     "clear_input": "Clear input",
     "clear_input_on_send": "Clear input on send",
     "client_id": "Client ID",
-    "color": "Color",
+    "color": "Pick a color",
     "communication": "통신",
     "connection_config": "Connection Config",
     "connection_not_authorized": "This MQTT connection does not use any authentication.",
diff --git a/packages/hoppscotch-app/locales/nl.json b/packages/hoppscotch-app/locales/nl.json
index ab843a8cf..ae0fc4f52 100644
--- a/packages/hoppscotch-app/locales/nl.json
+++ b/packages/hoppscotch-app/locales/nl.json
@@ -318,7 +318,7 @@
     "clear_input": "Clear input",
     "clear_input_on_send": "Clear input on send",
     "client_id": "Client ID",
-    "color": "Color",
+    "color": "Pick a color",
     "communication": "Communicatie",
     "connection_config": "Connection Config",
     "connection_not_authorized": "This MQTT connection does not use any authentication.",
diff --git a/packages/hoppscotch-app/locales/no.json b/packages/hoppscotch-app/locales/no.json
index 490549cd3..4ae0b85bf 100644
--- a/packages/hoppscotch-app/locales/no.json
+++ b/packages/hoppscotch-app/locales/no.json
@@ -318,7 +318,7 @@
     "clear_input": "Clear input",
     "clear_input_on_send": "Clear input on send",
     "client_id": "Client ID",
-    "color": "Color",
+    "color": "Pick a color",
     "communication": "Kommunikasjon",
     "connection_config": "Connection Config",
     "connection_not_authorized": "This MQTT connection does not use any authentication.",
diff --git a/packages/hoppscotch-app/locales/pl.json b/packages/hoppscotch-app/locales/pl.json
index 8e395736f..4759388bc 100644
--- a/packages/hoppscotch-app/locales/pl.json
+++ b/packages/hoppscotch-app/locales/pl.json
@@ -318,7 +318,7 @@
     "clear_input": "Clear input",
     "clear_input_on_send": "Clear input on send",
     "client_id": "Client ID",
-    "color": "Color",
+    "color": "Pick a color",
     "communication": "Komunikacja",
     "connection_config": "Connection Config",
     "connection_not_authorized": "This MQTT connection does not use any authentication.",
diff --git a/packages/hoppscotch-app/locales/pt-br.json b/packages/hoppscotch-app/locales/pt-br.json
index 026c01058..a4778bf74 100644
--- a/packages/hoppscotch-app/locales/pt-br.json
+++ b/packages/hoppscotch-app/locales/pt-br.json
@@ -318,7 +318,7 @@
     "clear_input": "Clear input",
     "clear_input_on_send": "Clear input on send",
     "client_id": "Client ID",
-    "color": "Color",
+    "color": "Pick a color",
     "communication": "Comunicação",
     "connection_config": "Connection Config",
     "connection_not_authorized": "This MQTT connection does not use any authentication.",
diff --git a/packages/hoppscotch-app/locales/pt.json b/packages/hoppscotch-app/locales/pt.json
index 0c157abde..13e07f6d9 100644
--- a/packages/hoppscotch-app/locales/pt.json
+++ b/packages/hoppscotch-app/locales/pt.json
@@ -318,7 +318,7 @@
     "clear_input": "Clear input",
     "clear_input_on_send": "Clear input on send",
     "client_id": "Client ID",
-    "color": "Color",
+    "color": "Pick a color",
     "communication": "Comunicação",
     "connection_config": "Connection Config",
     "connection_not_authorized": "This MQTT connection does not use any authentication.",
diff --git a/packages/hoppscotch-app/locales/ro.json b/packages/hoppscotch-app/locales/ro.json
index 9bb219367..14cd0098a 100644
--- a/packages/hoppscotch-app/locales/ro.json
+++ b/packages/hoppscotch-app/locales/ro.json
@@ -318,7 +318,7 @@
     "clear_input": "Clear input",
     "clear_input_on_send": "Clear input on send",
     "client_id": "Client ID",
-    "color": "Color",
+    "color": "Pick a color",
     "communication": "Comunicare",
     "connection_config": "Connection Config",
     "connection_not_authorized": "This MQTT connection does not use any authentication.",
diff --git a/packages/hoppscotch-app/locales/ru.json b/packages/hoppscotch-app/locales/ru.json
index f4e92771b..6cfb9f28f 100644
--- a/packages/hoppscotch-app/locales/ru.json
+++ b/packages/hoppscotch-app/locales/ru.json
@@ -318,7 +318,7 @@
     "clear_input": "Clear input",
     "clear_input_on_send": "Clear input on send",
     "client_id": "Client ID",
-    "color": "Color",
+    "color": "Pick a color",
     "communication": "Коммуникация",
     "connection_config": "Connection Config",
     "connection_not_authorized": "This MQTT connection does not use any authentication.",
diff --git a/packages/hoppscotch-app/locales/sr.json b/packages/hoppscotch-app/locales/sr.json
index 4f1aaaefa..8b0002217 100644
--- a/packages/hoppscotch-app/locales/sr.json
+++ b/packages/hoppscotch-app/locales/sr.json
@@ -318,7 +318,7 @@
     "clear_input": "Clear input",
     "clear_input_on_send": "Clear input on send",
     "client_id": "Client ID",
-    "color": "Color",
+    "color": "Pick a color",
     "communication": "Комуникација",
     "connection_config": "Connection Config",
     "connection_not_authorized": "This MQTT connection does not use any authentication.",
diff --git a/packages/hoppscotch-app/locales/sv.json b/packages/hoppscotch-app/locales/sv.json
index 35db6db2b..713739ca5 100644
--- a/packages/hoppscotch-app/locales/sv.json
+++ b/packages/hoppscotch-app/locales/sv.json
@@ -318,7 +318,7 @@
     "clear_input": "Clear input",
     "clear_input_on_send": "Clear input on send",
     "client_id": "Client ID",
-    "color": "Color",
+    "color": "Pick a color",
     "communication": "Kommunikation",
     "connection_config": "Connection Config",
     "connection_not_authorized": "This MQTT connection does not use any authentication.",
diff --git a/packages/hoppscotch-app/locales/tr.json b/packages/hoppscotch-app/locales/tr.json
index 8b050d3bc..708a4a4ea 100644
--- a/packages/hoppscotch-app/locales/tr.json
+++ b/packages/hoppscotch-app/locales/tr.json
@@ -318,7 +318,7 @@
     "clear_input": "Clear input",
     "clear_input_on_send": "Clear input on send",
     "client_id": "Client ID",
-    "color": "Color",
+    "color": "Pick a color",
     "communication": "İletişim",
     "connection_config": "Connection Config",
     "connection_not_authorized": "This MQTT connection does not use any authentication.",
diff --git a/packages/hoppscotch-app/locales/tw.json b/packages/hoppscotch-app/locales/tw.json
index 01e2c2249..86adef4c9 100644
--- a/packages/hoppscotch-app/locales/tw.json
+++ b/packages/hoppscotch-app/locales/tw.json
@@ -318,7 +318,7 @@
     "clear_input": "Clear input",
     "clear_input_on_send": "Clear input on send",
     "client_id": "Client ID",
-    "color": "Color",
+    "color": "Pick a color",
     "communication": "通訊",
     "connection_config": "Connection Config",
     "connection_not_authorized": "This MQTT connection does not use any authentication.",
diff --git a/packages/hoppscotch-app/locales/uk.json b/packages/hoppscotch-app/locales/uk.json
index 2c89c66e8..e34838207 100644
--- a/packages/hoppscotch-app/locales/uk.json
+++ b/packages/hoppscotch-app/locales/uk.json
@@ -318,7 +318,7 @@
     "clear_input": "Clear input",
     "clear_input_on_send": "Clear input on send",
     "client_id": "Client ID",
-    "color": "Color",
+    "color": "Pick a color",
     "communication": "Спілкування",
     "connection_config": "Connection Config",
     "connection_not_authorized": "This MQTT connection does not use any authentication.",
diff --git a/packages/hoppscotch-app/locales/vi.json b/packages/hoppscotch-app/locales/vi.json
index 23b337af5..303d5ebfe 100644
--- a/packages/hoppscotch-app/locales/vi.json
+++ b/packages/hoppscotch-app/locales/vi.json
@@ -318,7 +318,7 @@
     "clear_input": "Clear input",
     "clear_input_on_send": "Clear input on send",
     "client_id": "Client ID",
-    "color": "Color",
+    "color": "Pick a color",
     "communication": "Liên lạc",
     "connection_config": "Connection Config",
     "connection_not_authorized": "This MQTT connection does not use any authentication.",
diff --git a/packages/hoppscotch-app/src/components.d.ts b/packages/hoppscotch-app/src/components.d.ts
index 8e2b111d3..d90e016fa 100644
--- a/packages/hoppscotch-app/src/components.d.ts
+++ b/packages/hoppscotch-app/src/components.d.ts
@@ -22,6 +22,7 @@ declare module '@vue/runtime-core' {
     AppShare: typeof import('./components/app/Share.vue')['default']
     AppShortcuts: typeof import('./components/app/Shortcuts.vue')['default']
     AppShortcutsEntry: typeof import('./components/app/ShortcutsEntry.vue')['default']
+    AppShortcutsPrompt: typeof import('./components/app/ShortcutsPrompt.vue')['default']
     AppSidenav: typeof import('./components/app/Sidenav.vue')['default']
     AppSupport: typeof import('./components/app/Support.vue')['default']
     ButtonPrimary: typeof import('./components/button/Primary.vue')['default']
@@ -98,6 +99,7 @@ declare module '@vue/runtime-core' {
     HttpTests: typeof import('./components/http/Tests.vue')['default']
     HttpURLEncodedParams: typeof import('./components/http/URLEncodedParams.vue')['default']
     IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default']
+    IconLucideBrush: typeof import('~icons/lucide/brush')['default']
     IconLucideCheckCircle: typeof import('~icons/lucide/check-circle')['default']
     IconLucideChevronRight: typeof import('~icons/lucide/chevron-right')['default']
     IconLucideGlobe: typeof import('~icons/lucide/globe')['default']
diff --git a/packages/hoppscotch-app/src/components/app/ShortcutsPrompt.vue b/packages/hoppscotch-app/src/components/app/ShortcutsPrompt.vue
new file mode 100644
index 000000000..99cfbf431
--- /dev/null
+++ b/packages/hoppscotch-app/src/components/app/ShortcutsPrompt.vue
@@ -0,0 +1,52 @@
+<template>
+  <div class="flex flex-col items-center justify-center text-secondaryLight">
+    <div class="flex pb-4 my-4 space-x-2">
+      <div class="flex flex-col items-end space-y-4 text-right">
+        <span class="flex items-center flex-1">
+          {{ t("shortcut.request.send_request") }}
+        </span>
+        <span class="flex items-center flex-1">
+          {{ t("shortcut.general.show_all") }}
+        </span>
+        <span class="flex items-center flex-1">
+          {{ t("shortcut.general.command_menu") }}
+        </span>
+        <span class="flex items-center flex-1">
+          {{ t("shortcut.general.help_menu") }}
+        </span>
+      </div>
+      <div class="flex flex-col space-y-4">
+        <div class="flex">
+          <kbd class="shortcut-key">{{ getSpecialKey() }}</kbd>
+          <kbd class="shortcut-key">↩</kbd>
+        </div>
+        <div class="flex">
+          <kbd class="shortcut-key">{{ getSpecialKey() }}</kbd>
+          <kbd class="shortcut-key">K</kbd>
+        </div>
+        <div class="flex">
+          <kbd class="shortcut-key">/</kbd>
+        </div>
+        <div class="flex">
+          <kbd class="shortcut-key">?</kbd>
+        </div>
+      </div>
+    </div>
+    <ButtonSecondary
+      :label="`${t('app.documentation')}`"
+      to="https://docs.hoppscotch.io/features/response"
+      :icon="IconExternalLink"
+      blank
+      outline
+      reverse
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from "~/composables/i18n"
+import IconExternalLink from "~icons/lucide/external-link"
+import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
+
+const t = useI18n()
+</script>
diff --git a/packages/hoppscotch-app/src/components/graphql/Response.vue b/packages/hoppscotch-app/src/components/graphql/Response.vue
index 8caa39097..4c8b28f15 100644
--- a/packages/hoppscotch-app/src/components/graphql/Response.vue
+++ b/packages/hoppscotch-app/src/components/graphql/Response.vue
@@ -42,57 +42,12 @@
       </div>
       <div ref="schemaEditor" class="flex flex-col flex-1"></div>
     </div>
-    <div
-      v-else
-      class="flex flex-col items-center justify-center p-4 text-secondaryLight"
-    >
-      <div class="flex pb-4 my-4 space-x-2">
-        <div class="flex flex-col items-end space-y-4 text-right">
-          <span class="flex items-center flex-1">
-            {{ t("shortcut.request.send_request") }}
-          </span>
-          <span class="flex items-center flex-1">
-            {{ t("shortcut.general.show_all") }}
-          </span>
-          <span class="flex items-center flex-1">
-            {{ t("shortcut.general.command_menu") }}
-          </span>
-          <span class="flex items-center flex-1">
-            {{ t("shortcut.general.help_menu") }}
-          </span>
-        </div>
-        <div class="flex flex-col space-y-4">
-          <div class="flex">
-            <kbd class="shortcut-key">{{ getSpecialKey() }}</kbd>
-            <kbd class="shortcut-key">↩</kbd>
-          </div>
-          <div class="flex">
-            <kbd class="shortcut-key">{{ getSpecialKey() }}</kbd>
-            <kbd class="shortcut-key">K</kbd>
-          </div>
-          <div class="flex">
-            <kbd class="shortcut-key">/</kbd>
-          </div>
-          <div class="flex">
-            <kbd class="shortcut-key">?</kbd>
-          </div>
-        </div>
-      </div>
-      <ButtonSecondary
-        :label="`${t('app.documentation')}`"
-        to="https://docs.hoppscotch.io/features/response"
-        :icon="IconExternalLink"
-        blank
-        outline
-        reverse
-      />
-    </div>
+    <AppShortcutsPrompt v-else class="p-4" />
   </div>
 </template>
 
 <script setup lang="ts">
 import IconWrapText from "~icons/lucide/wrap-text"
-import IconExternalLink from "~icons/lucide/external-link"
 import IconDownload from "~icons/lucide/download"
 import IconCheck from "~icons/lucide/check"
 import IconCopy from "~icons/lucide/copy"
diff --git a/packages/hoppscotch-app/src/components/history/index.vue b/packages/hoppscotch-app/src/components/history/index.vue
index 9c7e56d7f..b0f17c198 100644
--- a/packages/hoppscotch-app/src/components/history/index.vue
+++ b/packages/hoppscotch-app/src/components/history/index.vue
@@ -64,7 +64,7 @@
         open
       >
         <summary
-          class="flex items-center justify-between flex-1 min-w-0 transition cursor-pointer focus:outline-none text-secondaryLight text-tiny group"
+          class="flex items-center justify-between flex-1 min-w-0 cursor-pointer transition focus:outline-none text-secondaryLight text-tiny group"
         >
           <span
             class="inline-flex items-center justify-center px-4 py-2 transition group-hover:text-secondary"
diff --git a/packages/hoppscotch-app/src/components/http/Request.vue b/packages/hoppscotch-app/src/components/http/Request.vue
index 793841404..9382ce9fa 100644
--- a/packages/hoppscotch-app/src/components/http/Request.vue
+++ b/packages/hoppscotch-app/src/components/http/Request.vue
@@ -16,7 +16,7 @@
             <span class="select-wrapper">
               <input
                 id="method"
-                class="flex px-4 py-2 font-semibold transition rounded-l cursor-pointer text-secondaryDark w-26 bg-primaryLight"
+                class="flex px-4 py-2 font-semibold rounded-l cursor-pointer transition text-secondaryDark w-26 bg-primaryLight"
                 :value="newMethod"
                 :readonly="!isCustomMethod"
                 :placeholder="`${t('request.method')}`"
@@ -47,7 +47,7 @@
         </label>
       </div>
       <div
-        class="flex flex-1 overflow-auto transition border-l rounded-r border-divider bg-primaryLight whitespace-nowrap"
+        class="flex flex-1 overflow-auto border-l rounded-r transition border-divider bg-primaryLight whitespace-nowrap"
       >
         <SmartEnvInput
           v-model="newEndpoint"
@@ -131,7 +131,7 @@
         </tippy>
       </span>
       <span
-        class="flex ml-2 transition border rounded border-dividerLight hover:border-dividerDark"
+        class="flex ml-2 border rounded transition border-dividerLight hover:border-dividerDark"
       >
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip', delay: [500, 20], allowHTML: true }"
diff --git a/packages/hoppscotch-app/src/components/http/ResponseMeta.vue b/packages/hoppscotch-app/src/components/http/ResponseMeta.vue
index 35f3510ce..788b9377b 100644
--- a/packages/hoppscotch-app/src/components/http/ResponseMeta.vue
+++ b/packages/hoppscotch-app/src/components/http/ResponseMeta.vue
@@ -1,52 +1,8 @@
 <template>
   <div
-    class="sticky top-0 z-10 flex items-start p-4 overflow-auto bg-primary whitespace-nowrap"
+    class="sticky top-0 z-10 flex items-start justify-center p-4 overflow-auto bg-primary whitespace-nowrap"
   >
-    <div
-      v-if="response == null"
-      class="flex flex-col items-center justify-center flex-1 text-secondaryLight"
-    >
-      <div class="flex pb-4 my-4 space-x-2">
-        <div class="flex flex-col items-end space-y-4 text-right">
-          <span class="flex items-center flex-1">
-            {{ t("shortcut.request.send_request") }}
-          </span>
-          <span class="flex items-center flex-1">
-            {{ t("shortcut.general.show_all") }}
-          </span>
-          <span class="flex items-center flex-1">
-            {{ t("shortcut.general.command_menu") }}
-          </span>
-          <span class="flex items-center flex-1">
-            {{ t("shortcut.general.help_menu") }}
-          </span>
-        </div>
-        <div class="flex flex-col space-y-4">
-          <div class="flex">
-            <kbd class="shortcut-key">{{ getSpecialKey() }}</kbd>
-            <kbd class="shortcut-key">↩</kbd>
-          </div>
-          <div class="flex">
-            <kbd class="shortcut-key">{{ getSpecialKey() }}</kbd>
-            <kbd class="shortcut-key">K</kbd>
-          </div>
-          <div class="flex">
-            <kbd class="shortcut-key">/</kbd>
-          </div>
-          <div class="flex">
-            <kbd class="shortcut-key">?</kbd>
-          </div>
-        </div>
-      </div>
-      <ButtonSecondary
-        :label="t('app.documentation')"
-        to="https://docs.hoppscotch.io/features/response"
-        :icon="IconExternalLink"
-        blank
-        outline
-        reverse
-      />
-    </div>
+    <AppShortcutsPrompt v-if="response == null" class="flex-1" />
     <div v-else class="flex flex-col flex-1">
       <div
         v-if="response.type === 'loading'"
@@ -140,11 +96,9 @@
 </template>
 
 <script setup lang="ts">
-import IconExternalLink from "~icons/lucide/external-link"
 import { computed } from "vue"
 import findStatusGroup from "@helpers/findStatusGroup"
 import type { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
-import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
 import { useI18n } from "@composables/i18n"
 import { useColorMode } from "@composables/theming"
 import { getStatusCodeReasonPhrase } from "~/helpers/utils/statusCodes"
diff --git a/packages/hoppscotch-app/src/components/realtime/Communication.vue b/packages/hoppscotch-app/src/components/realtime/Communication.vue
index 1cf25e550..33916ed67 100644
--- a/packages/hoppscotch-app/src/components/realtime/Communication.vue
+++ b/packages/hoppscotch-app/src/components/realtime/Communication.vue
@@ -65,7 +65,9 @@
       <div class="flex">
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip', delay: [500, 20], allowHTML: true }"
-          :title="`${t('action.send')}`"
+          :title="`${t(
+            'request.run'
+          )} <kbd>${getSpecialKey()}</kbd><kbd>↩</kbd>`"
           :label="`${t('action.send')}`"
           :disabled="!communicationBody || !isConnected"
           :icon="IconSend"
@@ -150,6 +152,7 @@ import { useI18n } from "@composables/i18n"
 import { useToast } from "@composables/toast"
 import { isJSONContentType } from "@helpers/utils/contenttypes"
 import { defineActionHandler } from "~/helpers/actions"
+import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
 
 defineProps({
   showEventField: {
diff --git a/packages/hoppscotch-app/src/components/realtime/Log.vue b/packages/hoppscotch-app/src/components/realtime/Log.vue
index 2f4e48591..2510a08cd 100644
--- a/packages/hoppscotch-app/src/components/realtime/Log.vue
+++ b/packages/hoppscotch-app/src/components/realtime/Log.vue
@@ -50,51 +50,7 @@
         />
       </div>
     </div>
-    <div
-      v-else
-      class="flex flex-col items-center justify-center p-4 text-secondaryLight"
-    >
-      <div class="flex pb-4 my-4 space-x-2">
-        <div class="flex flex-col items-end space-y-4 text-right">
-          <span class="flex items-center flex-1">
-            {{ t("shortcut.request.send_request") }}
-          </span>
-          <span class="flex items-center flex-1">
-            {{ t("shortcut.general.show_all") }}
-          </span>
-          <span class="flex items-center flex-1">
-            {{ t("shortcut.general.command_menu") }}
-          </span>
-          <span class="flex items-center flex-1">
-            {{ t("shortcut.general.help_menu") }}
-          </span>
-        </div>
-        <div class="flex flex-col space-y-4">
-          <div class="flex">
-            <kbd class="shortcut-key">{{ getSpecialKey() }}</kbd>
-            <kbd class="shortcut-key">↩</kbd>
-          </div>
-          <div class="flex">
-            <kbd class="shortcut-key">{{ getSpecialKey() }}</kbd>
-            <kbd class="shortcut-key">K</kbd>
-          </div>
-          <div class="flex">
-            <kbd class="shortcut-key">/</kbd>
-          </div>
-          <div class="flex">
-            <kbd class="shortcut-key">?</kbd>
-          </div>
-        </div>
-      </div>
-      <ButtonSecondary
-        :label="`${t('app.documentation')}`"
-        to="https://docs.hoppscotch.io/realtime"
-        :icon="IconExternalLink"
-        blank
-        outline
-        reverse
-      />
-    </div>
+    <AppShortcutsPrompt v-else class="p-4" />
   </div>
 </template>
 
@@ -104,10 +60,8 @@ import IconTrash from "~icons/lucide/trash"
 import IconArrowUp from "~icons/lucide/arrow-up"
 import IconArrowDown from "~icons/lucide/arrow-down"
 import IconChevronsDown from "~icons/lucide/chevron-down"
-import IconExternalLink from "~icons/lucide/external-link"
 import { useThrottleFn, useScroll } from "@vueuse/core"
 import { useI18n } from "@composables/i18n"
-import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
 
 export type LogEntryData = {
   prefix?: string
diff --git a/packages/hoppscotch-app/src/components/realtime/LogEntry.vue b/packages/hoppscotch-app/src/components/realtime/LogEntry.vue
index 5dbfe6176..3198d06d5 100644
--- a/packages/hoppscotch-app/src/components/realtime/LogEntry.vue
+++ b/packages/hoppscotch-app/src/components/realtime/LogEntry.vue
@@ -23,7 +23,7 @@
             </span>
           </div>
           <div
-            class="inline-grid items-center flex-1 min-w-0 p-2"
+            class="items-center flex-1 min-w-0 p-2 inline-grid"
             @click="toggleExpandPayload()"
           >
             <div class="truncate">
diff --git a/packages/hoppscotch-app/src/components/realtime/Subscription.vue b/packages/hoppscotch-app/src/components/realtime/Subscription.vue
index ed49661c2..1c2324134 100644
--- a/packages/hoppscotch-app/src/components/realtime/Subscription.vue
+++ b/packages/hoppscotch-app/src/components/realtime/Subscription.vue
@@ -3,7 +3,7 @@
     <template #body>
       <div class="flex justify-between mb-4">
         <div
-          class="flex items-center border divide-x rounded border-divider divide-divider"
+          class="flex items-center border rounded divide-x border-divider divide-divider"
         >
           <label class="mx-4">
             {{ t("mqtt.qos") }}
@@ -31,19 +31,8 @@
             </template>
           </tippy>
         </div>
-        <div class="flex items-center">
-          <label for="select-color">
-            {{ t("mqtt.color") }}
-          </label>
-          <input
-            id="select-color"
-            v-model="color"
-            type="color"
-            class="w-8 h-8 p-1 ml-4 border rounded bg-primary border-divider"
-          />
-        </div>
       </div>
-      <div class="flex flex-col">
+      <div class="relative flex flex-col">
         <input
           id="selectLabelAdd"
           v-model="name"
@@ -57,6 +46,24 @@
         <label for="selectLabelAdd">
           {{ t("action.label") }}
         </label>
+        <span class="end-actions">
+          <label
+            v-tippy="{ theme: 'tooltip' }"
+            :title="t('mqtt.color')"
+            for="select-color"
+            class="absolute inset-0 flex items-center justify-center group hover:cursor-pointer"
+          >
+            <icon-lucide-brush
+              class="transition opacity-80 svg-icons group-hover:opacity-100 text-accentContrast"
+            />
+          </label>
+          <input
+            id="select-color"
+            v-model="color"
+            type="color"
+            class="w-8 h-8 p-1 rounded bg-primary"
+          />
+        </span>
       </div>
     </template>
     <template #footer>
diff --git a/packages/hoppscotch-app/src/components/smart/Checkbox.vue b/packages/hoppscotch-app/src/components/smart/Checkbox.vue
index c8b3488f2..2958658c4 100644
--- a/packages/hoppscotch-app/src/components/smart/Checkbox.vue
+++ b/packages/hoppscotch-app/src/components/smart/Checkbox.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="inline-flex items-center justify-center cursor-pointer transition flex-nowrap group hover:text-secondaryDark"
+    class="inline-flex items-center justify-center transition cursor-pointer flex-nowrap group hover:text-secondaryDark"
     role="checkbox"
     :aria-checked="on"
     @click="emit('change')"
@@ -14,7 +14,7 @@
     />
     <label
       for="checkbox"
-      class="pl-0 font-semibold align-middle cursor-pointer"
+      class="pl-0 font-semibold truncate align-middle cursor-pointer"
     >
       <slot></slot>
     </label>
diff --git a/packages/hoppscotch-app/src/components/smart/Toggle.vue b/packages/hoppscotch-app/src/components/smart/Toggle.vue
index 3d1341f94..7e1302f26 100644
--- a/packages/hoppscotch-app/src/components/smart/Toggle.vue
+++ b/packages/hoppscotch-app/src/components/smart/Toggle.vue
@@ -8,7 +8,7 @@
     <span ref="toggle" class="toggle" :class="{ on: on }">
       <span class="handle"></span>
     </span>
-    <span class="pl-0 font-semibold align-middle cursor-pointer">
+    <span class="pl-0 font-semibold truncate align-middle cursor-pointer">
       <slot></slot>
     </span>
   </div>
diff --git a/packages/hoppscotch-app/src/pages/realtime/mqtt.vue b/packages/hoppscotch-app/src/pages/realtime/mqtt.vue
index f36a2a414..8538d11ac 100644
--- a/packages/hoppscotch-app/src/pages/realtime/mqtt.vue
+++ b/packages/hoppscotch-app/src/pages/realtime/mqtt.vue
@@ -2,7 +2,7 @@
   <AppPaneLayout layout-id="mqtt">
     <template #primary>
       <div
-        class="sticky top-0 z-10 flex flex-shrink-0 p-4 space-x-2 overflow-x-auto bg-primary"
+        class="sticky top-0 z-10 flex flex-shrink-0 p-4 overflow-x-auto space-x-2 bg-primary"
       >
         <div class="inline-flex flex-1 space-x-2">
           <div class="flex flex-1">
@@ -116,7 +116,7 @@
     </template>
     <template #sidebar>
       <div
-        class="sticky z-10 flex flex-col border-b divide-y rounded-t divide-dividerLight bg-primary border-dividerLight"
+        class="sticky z-10 flex flex-col border-b rounded-t divide-y divide-dividerLight bg-primary border-dividerLight"
       >
         <div class="flex justify-between flex-1">
           <ButtonSecondary
@@ -174,7 +174,7 @@
               />
             </span>
             <span
-              class="flex flex-1 min-w-0 py-2 pr-2 transition cursor-pointer group-hover:text-secondaryDark"
+              class="flex flex-1 min-w-0 py-2 pr-2 cursor-pointer transition group-hover:text-secondaryDark"
               @click="openTopicAsTab(topic)"
             >
               <span class="truncate">
diff --git a/packages/hoppscotch-app/src/pages/realtime/socketio.vue b/packages/hoppscotch-app/src/pages/realtime/socketio.vue
index b05071bd9..0e385b0e7 100644
--- a/packages/hoppscotch-app/src/pages/realtime/socketio.vue
+++ b/packages/hoppscotch-app/src/pages/realtime/socketio.vue
@@ -2,7 +2,7 @@
   <AppPaneLayout layout-id="socketio">
     <template #primary>
       <div
-        class="sticky top-0 z-10 flex flex-shrink-0 p-4 space-x-2 overflow-x-auto bg-primary"
+        class="sticky top-0 z-10 flex flex-shrink-0 p-4 overflow-x-auto space-x-2 bg-primary"
       >
         <div class="inline-flex flex-1 space-x-2">
           <div class="flex flex-1">