diff --git a/lib/screens/history/history_widgets/his_request_pane.dart b/lib/screens/history/history_widgets/his_request_pane.dart
index dc618e77..f9d38300 100644
--- a/lib/screens/history/history_widgets/his_request_pane.dart
+++ b/lib/screens/history/history_widgets/his_request_pane.dart
@@ -140,12 +140,11 @@ class HisRequestBody extends ConsumerWidget {
                 // TODO: Fix JsonTextFieldEditor & plug it here
                 ContentType.json => Padding(
                     padding: kPt5o10,
-                    child: TextFieldEditor(
+                    child: JsonTextFieldEditor(
                       key: Key("${selectedHistoryModel?.historyId}-json-body"),
                       fieldKey:
                           "${selectedHistoryModel?.historyId}-json-body-viewer",
                       initialValue: requestModel?.body,
-                      readOnly: true,
                     ),
                   ),
                 _ => Padding(
diff --git a/lib/screens/home_page/editor_pane/details_card/request_pane/request_body.dart b/lib/screens/home_page/editor_pane/details_card/request_pane/request_body.dart
index 26686e67..7e42c309 100644
--- a/lib/screens/home_page/editor_pane/details_card/request_pane/request_body.dart
+++ b/lib/screens/home_page/editor_pane/details_card/request_pane/request_body.dart
@@ -64,7 +64,7 @@ class EditRequestBody extends ConsumerWidget {
                 // TODO: Fix JsonTextFieldEditor & plug it here
                 ContentType.json => Padding(
                     padding: kPt5o10,
-                    child: TextFieldEditor(
+                    child: JsonTextFieldEditor(
                       key: Key("$selectedId-json-body"),
                       fieldKey: "$selectedId-json-body-editor",
                       initialValue: requestModel?.httpRequestModel?.body,
@@ -74,7 +74,6 @@ class EditRequestBody extends ConsumerWidget {
                             .read(collectionStateNotifierProvider.notifier)
                             .update(body: value);
                       },
-                      hintText: kHintJson,
                     ),
                   ),
                 _ => Padding(
diff --git a/lib/widgets/editor_json.dart b/lib/widgets/editor_json.dart
index 3c0c2abf..8cc2b78f 100644
--- a/lib/widgets/editor_json.dart
+++ b/lib/widgets/editor_json.dart
@@ -1,5 +1,8 @@
+import 'package:apidash/widgets/widgets.dart';
 import 'dart:math' as math;
 import 'package:apidash/consts.dart';
+import 'package:apidash/utils/utils.dart';
+import 'dart:convert';
 import 'package:apidash_design_system/apidash_design_system.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
@@ -59,71 +62,84 @@ class _JsonTextFieldEditorState extends State<JsonTextFieldEditor> {
     if (widget.initialValue != null) {
       controller.text = widget.initialValue!;
     }
-    return CallbackShortcuts(
-      bindings: <ShortcutActivator, VoidCallback>{
-        const SingleActivator(LogicalKeyboardKey.tab): () {
-          insertTab();
-        },
-      },
-      child: JsonTextField(
-        stringHighlightStyle: kCodeStyle.copyWith(
-          color: Theme.of(context).colorScheme.secondary,
+    return Column(
+      mainAxisSize: MainAxisSize.max,
+      children: [
+        Align(
+          alignment: Alignment.topRight,
+          child: IconButton(
+            icon: const Icon(Icons.format_align_left),
+            onPressed: () {
+              controller.formatJson(sortJson: false);
+            },
+          ),
         ),
-        keyHighlightStyle: kCodeStyle.copyWith(
-          color: Theme.of(context).colorScheme.primary,
-          fontWeight: FontWeight.bold,
-        ),
-        errorContainerDecoration: BoxDecoration(
-          color: Theme.of(context).colorScheme.error.withOpacity(
-                kForegroundOpacity,
+        Expanded(
+          child: CallbackShortcuts(
+            bindings: <ShortcutActivator, VoidCallback>{
+              const SingleActivator(LogicalKeyboardKey.tab): () {
+                insertTab();
+              },
+            },
+            child: JsonTextField(
+              stringHighlightStyle: kCodeStyle.copyWith(
+                color: kColorJSONString,
               ),
-          borderRadius: kBorderRadius8,
-        ),
-        showErrorMessage: true,
-        isFormatting: true,
-        key: Key(widget.fieldKey),
-        controller: controller,
-        focusNode: editorFocusNode,
-        keyboardType: TextInputType.multiline,
-        expands: true,
-        maxLines: null,
-        style: kCodeStyle,
-        textAlignVertical: TextAlignVertical.top,
-        onChanged: (value) {
-          controller.formatJson(sortJson: false);
-          widget.onChanged?.call(value);
-        },
-        decoration: InputDecoration(
-          hintText: kHintJson,
-          hintStyle: TextStyle(
-            color: Theme.of(context).colorScheme.outline.withOpacity(
-                  kHintOpacity,
+              keyHighlightStyle: kCodeStyle.copyWith(
+                color: kColorJSONKey,
+                fontWeight: FontWeight.bold,
+              ),
+              errorContainerDecoration: BoxDecoration(
+                color: Theme.of(context).colorScheme.error.withOpacity(
+                      kForegroundOpacity,
+                    ),
+                borderRadius: kBorderRadius8,
+              ),
+              showErrorMessage: true,
+              isFormatting: true,
+              key: Key(widget.fieldKey),
+              controller: controller,
+              focusNode: editorFocusNode,
+              keyboardType: TextInputType.multiline,
+              expands: true,
+              maxLines: null,
+              style: kCodeStyle,
+              textAlignVertical: TextAlignVertical.top,
+              decoration: InputDecoration(
+                hintText: kHintJson,
+                hintStyle: TextStyle(
+                  color: Theme.of(context).colorScheme.outline.withOpacity(
+                        kHintOpacity,
+                      ),
                 ),
-          ),
-          focusedBorder: OutlineInputBorder(
-            borderRadius: kBorderRadius8,
-            borderSide: BorderSide(
-              color: Theme.of(context).colorScheme.primary.withOpacity(
-                    kHintOpacity,
+                focusedBorder: OutlineInputBorder(
+                  borderRadius: kBorderRadius8,
+                  borderSide: BorderSide(
+                    color: Theme.of(context).colorScheme.primary.withOpacity(
+                          kHintOpacity,
+                        ),
                   ),
+                ),
+                enabledBorder: OutlineInputBorder(
+                  borderRadius: kBorderRadius8,
+                  borderSide: BorderSide(
+                    color:
+                        Theme.of(context).colorScheme.surfaceContainerHighest,
+                  ),
+                ),
+                filled: true,
+                hoverColor: kColorTransparent,
+                fillColor: Color.alphaBlend(
+                    (Theme.of(context).brightness == Brightness.dark
+                            ? Theme.of(context).colorScheme.onPrimaryContainer
+                            : Theme.of(context).colorScheme.primaryContainer)
+                        .withOpacity(kForegroundOpacity),
+                    Theme.of(context).colorScheme.surface),
+              ),
             ),
           ),
-          enabledBorder: OutlineInputBorder(
-            borderRadius: kBorderRadius8,
-            borderSide: BorderSide(
-              color: Theme.of(context).colorScheme.surfaceContainerHighest,
-            ),
-          ),
-          filled: true,
-          hoverColor: kColorTransparent,
-          fillColor: Color.alphaBlend(
-              (Theme.of(context).brightness == Brightness.dark
-                      ? Theme.of(context).colorScheme.onPrimaryContainer
-                      : Theme.of(context).colorScheme.primaryContainer)
-                  .withOpacity(kForegroundOpacity),
-              Theme.of(context).colorScheme.surface),
         ),
-      ),
+      ],
     );
   }
 }
diff --git a/packages/apidash_design_system/lib/tokens/colors.dart b/packages/apidash_design_system/lib/tokens/colors.dart
index 7d873fcd..e6f99707 100644
--- a/packages/apidash_design_system/lib/tokens/colors.dart
+++ b/packages/apidash_design_system/lib/tokens/colors.dart
@@ -9,6 +9,9 @@ const kColorRed = Colors.red;
 final kColorLightDanger = Colors.red.withOpacity(0.9);
 const kColorDarkDanger = Color(0xffcf6679);
 
+const kColorJSONKey =   Color(0xFF1757BA);
+const kColorJSONString = Color(0xFFA82323);
+
 const kColorSchemeSeed = Colors.blue;
 
 final kColorStatusCodeDefault = Colors.grey.shade700;