diff --git a/ui/service.go b/ui/service.go
index 080fb643..2380f479 100644
--- a/ui/service.go
+++ b/ui/service.go
@@ -74,6 +74,7 @@ var (
 		"tablefooter",
 		"error",
 		"breadcrumb",
+		"metadatamodal",
 
 		"bootstrap",
 		"bootstraps",
diff --git a/ui/web/static/css/styles.css b/ui/web/static/css/styles.css
index b7d934ae..dac758f8 100644
--- a/ui/web/static/css/styles.css
+++ b/ui/web/static/css/styles.css
@@ -2,6 +2,8 @@
 SPDX-License-Identifier: Apache-2.0 */
 
 @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300&family=Roboto:wght@400&family=Montserrat:wght@700&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Inconsolata&display=swap');
+
 
 :root {
 	--main-color: #003366;
@@ -15,6 +17,8 @@ SPDX-License-Identifier: Apache-2.0 */
 	--pill-color-1: #1d2231;
 	--pill-color-2: #003366;
 	--pill-color-3: #8390a2;
+
+	--codemirror-font: 'Inconsolata', monospace;
 }
 
 * {
@@ -220,12 +224,11 @@ body.sidebar-toggled .main-content {
 	margin-left: 0.25rem;
 }
 
-.main-content .body-button {
+body .body-button {
 	background: var(--main-color);
 	border-radius: var(--border-radius);
 	color: #fff;
 	font-size: 1rem;
-	padding: 0.5rem 1rem;
 	border: 1px solid var(--main-color);
 	margin-bottom: 0.5rem;
 }
@@ -237,7 +240,7 @@ body.sidebar-toggled .main-content {
 }
 
 .main-content .sendMessage-button:hover,
-.main-content .body-button:hover {
+body .body-button:hover {
 	color: #fff;
 	background: var(--main-color);
 	transform: scale(1.03);
@@ -537,7 +540,6 @@ button.edit-btn {
 	border-radius: var(--border-radius);
 	color: #fff;
 	font-size: 1rem;
-	padding: 0.5rem 1rem;
 	border: 1px solid var(--main-color);
 }
 
@@ -585,6 +587,44 @@ button.edit-btn {
 	font-size: 1.25rem;
 }
 
+.string,
+.cm-s-default .cm-string {
+	color: var(--main-color);
+}
+
+.key,
+.cm-property {
+	color: red !important;
+}
+
+.number,
+.cm-s-default .cm-number {
+	color: darkorange;
+}
+
+.boolean,
+.cm-s-default .cm-atom {
+	color: green;
+}
+
+.null {
+	color: magenta;
+}
+
+.table-container .meta-div {
+	overflow: auto;
+	max-height: 5rem;
+	max-width: 100%;
+}
+
+.table-container .meta-col {
+	max-width: 50%;
+}
+
+.metadata-field span {
+	font-family: var(--codemirror-font) !important;
+}
+
 @media (max-width: 768px) {
 	.sidebar {
 		width: var(--sidebar-min);
diff --git a/ui/web/static/js/formatjson.js b/ui/web/static/js/formatjson.js
new file mode 100644
index 00000000..88b865c3
--- /dev/null
+++ b/ui/web/static/js/formatjson.js
@@ -0,0 +1,49 @@
+// Copyright (c) Abstract Machines
+// SPDX-License-Identifier: Apache-2.0
+
+function syntaxHighlight(json) {
+  json = json.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+  return json.replace(
+    /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,
+    function (match) {
+      var cls = "number";
+      if (/^"/.test(match)) {
+        if (/:$/.test(match)) {
+          cls = "key";
+        } else {
+          cls = "string";
+        }
+      } else if (/true|false/.test(match)) {
+        cls = "boolean";
+      } else if (/null/.test(match)) {
+        cls = "null";
+      }
+      return '<span class="' + cls + '">' + match + "</span>";
+    },
+  );
+}
+
+function attachFormatJsonWithPrettifyListener(config) {
+  document.addEventListener("DOMContentLoaded", function () {
+    var meta = JSON.parse(config.metadata);
+    document.getElementById(config.id).innerHTML = syntaxHighlight(JSON.stringify(meta, null, 2));
+  });
+}
+
+function codeMirrorEditor(config) {
+  var editor = CodeMirror.fromTextArea(document.getElementById(config.textArea), {
+    mode: "application/json",
+    matchBrackets: true,
+    autoCloseBrackets: true,
+    lineWrapping: true,
+    lineNumbers: true,
+    lint: true,
+    gutters: ["CodeMirror-lint-markers"],
+    autoRefresh: true,
+  });
+  editor.setValue(JSON.stringify(config.value, null, 2));
+  editor.setSize("100%", 200);
+  document.getElementById(config.button).addEventListener("click", function () {
+    document.getElementById(config.textArea).value = editor.getValue();
+  });
+}
diff --git a/ui/web/static/js/update.js b/ui/web/static/js/update.js
index 93058fed..4f7d1413 100644
--- a/ui/web/static/js/update.js
+++ b/ui/web/static/js/update.js
@@ -50,9 +50,9 @@ function updateIdentity(config) {
 
 function updateMetadata(config) {
   const button = document.getElementById(config.button);
-
   button.addEventListener("click", function (event) {
-    const updatedValue = config.cell.textContent.trim();
+    event.preventDefault();
+    const updatedValue = document.getElementById(config.textArea).value;
     if (validateJSON(updatedValue, config.alertDiv, config.fieldName, event)) {
       const url = `/${config.entity}/${config.id}`;
       const data = { [config.field]: JSON.parse(updatedValue) };
diff --git a/ui/web/template/channel.html b/ui/web/template/channel.html
index 3a1fbb6d..d6216c92 100644
--- a/ui/web/template/channel.html
+++ b/ui/web/template/channel.html
@@ -97,25 +97,21 @@
                       </tr>
                       <tr>
                         <th>Metadata</th>
-                        <td
-                          class="editable metadata-field"
-                          contenteditable="false"
-                          data-field="metadata"
-                        >
-                          {{ toJSON .Channel.Metadata }}
+                        <td>
+                          <div>
+                            <pre id="meta-data"></pre>
+                          </div>
                         </td>
                         <td>
                           <button
+                            type="button"
                             class="edit-btn"
-                            id="edit-metadata"
+                            data-bs-toggle="modal"
+                            data-bs-target="#editMetadataModal"
                             {{ if not $editButton }}disabled{{ end }}
                           >
                             <i class="fas fa-pencil-alt"></i>
                           </button>
-                          <div class="save-cancel-buttons" style="display: none">
-                            <button class="save-btn" id="save-metadata">Save</button>
-                            <button class="cancel-btn" id="cancel-metadata">Cancel</button>
-                          </div>
                         </td>
                       </tr>
                     </tbody>
@@ -144,6 +140,21 @@
           </div>
         </div>
       </div>
+      <script>
+        var metadata = "{{ toJSON .Channel.Metadata }}";
+        var parsedMetadata = JSON.parse(metadata);
+
+        attachFormatJsonWithPrettifyListener({
+          id: "meta-data",
+          metadata: metadata,
+        });
+
+        codeMirrorEditor({
+          textArea: "metadataTextArea",
+          button: "save-metadata",
+          value: parsedMetadata,
+        });
+      </script>      
       <script type="module">
         import { attachEditRowListener, updateName, updateDescription, updateMetadata} from "/js/update.js";
 
@@ -154,14 +165,21 @@
           rows: {
             name:updateName,
             description: updateDescription,
-            metadata:updateMetadata,
           },
           errorDiv: "error-message",
           fields:{
             name: "name-field",
-            metadata: "metadata-field",
           },
         });
+        updateMetadata({
+          textArea: "metadataTextArea",
+          field:"metadata",
+          alertDiv: "metadataError",
+          fieldName: "metadata-field",
+          id: "{{ .Channel.ID }}",
+          entity: "channels",
+          button: "save-metadata",
+        });
       </script>
     </body>
   </html>
diff --git a/ui/web/template/channels.html b/ui/web/template/channels.html
index fe79ca68..25a10c43 100644
--- a/ui/web/template/channels.html
+++ b/ui/web/template/channels.html
@@ -80,13 +80,9 @@ <h5 class="modal-title" id="addChannelModalLabel">Add Channel</h5>
                             </div>
                             <div class="mb-3">
                               <label for="metadata" class="form-label">Metadata</label>
-                              <input
-                                type="text"
-                                class="form-control metadata-field"
-                                name="metadata"
-                                id="metadata"
-                                value="{}"
-                              />
+                              <div class="metadata-field">
+                                <textarea name="metadata" id="metadata"></textarea>
+                              </div>
                               <div id="metadataHelp" class="form-text">
                                 Enter channel metadata in JSON format.
                               </div>
@@ -176,15 +172,18 @@ <h5 class="modal-title" id="addChannelsModalLabel">Add Channels</h5>
                             <td>{{ $c.Name }}</td>
                             <td class="desc-col">{{ $c.Description }}</td>
                             <td class="meta-col">
-                              {{ range $k, $v := $c.Metadata }}
-                                <span class="badge bg-success">
-                                  {{ $k }}:
-                                  {{ $v }}
-                                </span>
-                              {{ end }}
+                              <div class="meta-div">
+                                <pre id="meta-{{ $i }}"></pre>
+                              </div>
                             </td>
                             <td class="created-col">{{ $c.CreatedAt }}</td>
                           </tr>
+                          <script>
+                            attachFormatJsonWithPrettifyListener({
+                              metadata: '{{ toJSON $c.Metadata }}',
+                              id: "meta-{{ $i }}",
+                            })
+                          </script>
                         {{ end }}
                       </tbody>
                     </table>
@@ -207,6 +206,12 @@ <h5 class="modal-title" id="addChannelsModalLabel">Add Channels</h5>
             channelsModal.show();
           }
         }
+
+        codeMirrorEditor({
+          textArea: "metadata",
+          button: "create-channel-button",
+          value: {},
+        });
       </script>
       <script type="module">
         import { attachValidationListener, validateName, validateJSON } from "/js/validation.js";
diff --git a/ui/web/template/domain.html b/ui/web/template/domain.html
index a539dbf4..a9670e75 100644
--- a/ui/web/template/domain.html
+++ b/ui/web/template/domain.html
@@ -53,29 +53,6 @@ <h4 class="mb-3">Domain Information</h4>
                           </div>
                         </td>
                       </tr>
-                      <tr>
-                        <th>Domain Metadata</th>
-                        <td
-                          class="editable metadata-field"
-                          contenteditable="false"
-                          data-field="metadata"
-                        >
-                          {{ toJSON .Domain.Metadata }}
-                        </td>
-                        <td>
-                          <button
-                            class="edit-btn"
-                            id="edit-metadata"
-                            {{ if not $editButton }}disabled{{ end }}
-                          >
-                            <i class="fas fa-pencil-alt"></i>
-                          </button>
-                          <div class="save-cancel-buttons" style="display: none">
-                            <button class="save-btn" id="save-metadata">Save</button>
-                            <button class="cancel-btn" id="cancel-metadata">Cancel</button>
-                          </div>
-                        </td>
-                      </tr>
                       <tr>
                         <th>Domain Tags</th>
                         <td class="editable tags-field" contenteditable="false" data-field="tags">
@@ -115,6 +92,25 @@ <h4 class="mb-3">Domain Information</h4>
                           </div>
                         </td>
                       </tr>
+                      <tr>
+                        <th>Domain Metadata</th>
+                        <td>
+                          <div>
+                            <pre id="meta-data"></pre>
+                          </div>
+                        </td>
+                        <td>
+                          <button
+                            type="button"
+                            class="edit-btn"
+                            data-bs-toggle="modal"
+                            data-bs-target="#editMetadataModal"
+                            {{ if not $editButton }}disabled{{ end }}
+                          >
+                            <i class="fas fa-pencil-alt"></i>
+                          </button>
+                        </td>
+                      </tr>
                       <tr>
                         <th class="text-muted">Created By</th>
                         <td>{{ .Domain.CreatedBy }}</td>
@@ -185,6 +181,21 @@ <h4 class="mb-3">Domain Information</h4>
           </div>
         </div>
       </div>
+      <script>
+        var metadata = "{{ toJSON .Domain.Metadata }}";
+        var parsedMetadata = JSON.parse(metadata);
+
+        attachFormatJsonWithPrettifyListener({
+          id: "meta-data",
+          metadata: metadata,
+        });
+
+        codeMirrorEditor({
+          textArea: "metadataTextArea",
+          button: "save-metadata",
+          value: parsedMetadata,
+        });
+      </script>      
       <script type="module">
         import { attachEditRowListener, updateName, updateMetadata, updateTags, updateDescription } from "/js/update.js";
 
@@ -194,7 +205,6 @@ <h4 class="mb-3">Domain Information</h4>
             id: "{{ .Domain.ID }}",
             rows: {
               name:updateName,
-              metadata:updateMetadata,
               tags:updateTags,
               alias:updateDescription,
             },
@@ -203,10 +213,19 @@ <h4 class="mb-3">Domain Information</h4>
               name: "name-field",
               alias: "alias-field",
               tags: "tags-field",
-              metadata: "metadata-field",
             },
           }
-        )
+        );
+
+        updateMetadata({
+      textArea: "metadataTextArea",
+      field:"metadata",
+      alertDiv: "metadataError",
+      fieldName: "metadata-field",
+      id: "{{ .Domain.ID }}",
+      entity: "domains",
+      button: "save-metadata",
+    });
       </script>
     </body>
   </html>
diff --git a/ui/web/template/group.html b/ui/web/template/group.html
index 4620f105..e3f80435 100644
--- a/ui/web/template/group.html
+++ b/ui/web/template/group.html
@@ -86,25 +86,21 @@
                       </tr>
                       <tr>
                         <th>Metadata</th>
-                        <td
-                          class="editable metadata-field"
-                          contenteditable="false"
-                          data-field="metadata"
-                        >
-                          {{ toJSON .Group.Metadata }}
+                        <td>
+                          <div>
+                            <pre id="meta-data"></pre>
+                          </div>
                         </td>
                         <td>
                           <button
+                            type="button"
                             class="edit-btn"
-                            id="edit-metadata"
+                            data-bs-toggle="modal"
+                            data-bs-target="#editMetadataModal"
                             {{ if not $editButton }}disabled{{ end }}
                           >
                             <i class="fas fa-pencil-alt"></i>
                           </button>
-                          <div class="save-cancel-buttons" style="display: none">
-                            <button class="save-btn" id="save-metadata">Save</button>
-                            <button class="cancel-btn" id="cancel-metadata">Cancel</button>
-                          </div>
                         </td>
                       </tr>
                     </tbody>
@@ -128,7 +124,22 @@
           </div>
         </div>
       </div>
-    <script type="module">
+      <script>
+        var metadata = "{{ toJSON .Group.Metadata }}";
+        var parsedMetadata = JSON.parse(metadata);
+
+        attachFormatJsonWithPrettifyListener({
+          id: "meta-data",
+          metadata: metadata,
+        });
+
+        codeMirrorEditor({
+          textArea: "metadataTextArea",
+          button: "save-metadata",
+          value: parsedMetadata,
+        });
+      </script>    
+      <script type="module">
       import { attachEditRowListener, updateName, updateDescription, updateMetadata} from "/js/update.js";
 
       attachEditRowListener(
@@ -138,15 +149,22 @@
 				rows: {
 					name:updateName,
 					description: updateDescription,
-					metadata:updateMetadata,
 				},
 				errorDiv: "error-message",
         fields: {
           name: "name-field",
-          metadata: "metadata-field",
         },
 			}
 		);
+    updateMetadata({
+      textArea: "metadataTextArea",
+      field:"metadata",
+      alertDiv: "metadataError",
+      fieldName: "metadata-field",
+      id: "{{ .Group.ID }}",
+      entity: "groups",
+      button: "save-metadata",
+    });
     </script>
     </body>
   </html>
diff --git a/ui/web/template/groups.html b/ui/web/template/groups.html
index ed4d4f14..b55d894c 100644
--- a/ui/web/template/groups.html
+++ b/ui/web/template/groups.html
@@ -80,15 +80,11 @@ <h5 class="modal-title" id="addGroupModalLabel">Add Group</h5>
                             </div>
                             <div class="mb-3">
                               <label for="metadata" class="form-label">Metadata</label>
-                              <input
-                                type="text"
-                                class="form-control metadata-field"
-                                name="metadata"
-                                id="metadata"
-                                value="{}"
-                              />
+                              <div class="metadata-field">
+                                <textarea name="metadata" id="metadata"></textarea>
+                              </div>
                               <div id="metadataHelp" class="form-text">
-                                Enter groups metadata in JSON format.
+                                Enter group metadata in JSON format.
                               </div>
                               <div id="metadataError" class="text-danger"></div>
                             </div>
@@ -167,15 +163,18 @@ <h5 class="modal-title" id="addGroupsModalLabel">Add Groups</h5>
 
                             <td class="desc-col">{{ $g.Description }}</td>
                             <td class="meta-col">
-                              {{ range $k, $v := $g.Metadata }}
-                                <span class="badge bg-success">
-                                  {{ $k }}:
-                                  {{ $v }}
-                                </span>
-                              {{ end }}
+                              <div class="meta-div">
+                                <pre id="meta-{{ $i }}"></pre>
+                              </div>
                             </td>
                             <td class="created-col">{{ $g.CreatedAt }}</td>
                           </tr>
+                          <script>
+                            attachFormatJsonWithPrettifyListener({
+                              metadata: '{{ toJSON $g.Metadata }}',
+                              id: "meta-{{ $i }}",
+                            })
+                          </script>
                         {{ end }}
                       </tbody>
                     </table>
@@ -198,6 +197,12 @@ <h5 class="modal-title" id="addGroupsModalLabel">Add Groups</h5>
             groupsModal.show();
           }
         }
+
+        codeMirrorEditor({
+          textArea: "metadata",
+          button: "create-group-button",
+          value: {},
+        });
       </script>
       <script type="module">
         import { attachValidationListener, validateName, validateJSON } from "/js/validation.js";
diff --git a/ui/web/template/header.html b/ui/web/template/header.html
index 538050be..b305e1bc 100644
--- a/ui/web/template/header.html
+++ b/ui/web/template/header.html
@@ -6,7 +6,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta name="description" content="" />
   <meta name="author" content="" />
-  <link rel="stylesheet" href="/css/styles.css" />
   <link rel="icon" type="image/x-icon" href="/images/favicon.ico" />
   <link
     rel="stylesheet"
@@ -18,6 +17,18 @@
     integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9"
     crossorigin="anonymous"
   />
+  <link
+    rel="stylesheet"
+    href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css"
+    integrity="sha512-uf06llspW44/LZpHzHT6qBOIVODjWtv4MxCricRxkzvopAlSWnTf6hpZTFxuuZcuNE9CBQhqE0Seu1CoRk84nQ=="
+    crossorigin="anonymous"
+    referrerpolicy="no-referrer"
+  />
+  <link rel="stylesheet" href="/css/styles.css" />
+  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
+  <script src="/js/clipboard.js" type="text/javascript"></script>
+  <script src="/js/formatjson.js"></script>
+  <script src="/js/formatjson.js"></script>
   <script
     src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
     integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
@@ -28,6 +39,4 @@
     integrity="sha384-Rx+T1VzGupg4BHQYs2gCW9It+akI2MM/mndMCy36UVfodzcJcF0GGLxZIzObiEfa"
     crossorigin="anonymous"
   ></script>
-  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
-  <script src="/js/clipboard.js" type="text/javascript"></script>
 {{ end }}
diff --git a/ui/web/template/metadatamodal.html b/ui/web/template/metadatamodal.html
new file mode 100644
index 00000000..1db3ba8c
--- /dev/null
+++ b/ui/web/template/metadatamodal.html
@@ -0,0 +1,102 @@
+<!-- Copyright (c) Abstract Machines
+SPDX-License-Identifier: Apache-2.0 -->
+
+{{ define "metadatamodal" }}
+
+  <script
+    src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"
+    integrity="sha512-8RnEqURPUc5aqFEN04aQEiPlSAdE0jlFS/9iGgUyNtwFnSKCXhmB6ZTNl7LnDtDWKabJIASzXrzD0K+LYexU9g=="
+    crossorigin="anonymous"
+    referrerpolicy="no-referrer"
+  ></script>
+  <script
+    src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/javascript/javascript.min.js"
+    integrity="sha512-I6CdJdruzGtvDyvdO4YsiAq+pkWf2efgd1ZUSK2FnM/u2VuRASPC7GowWQrWyjxCZn6CT89s3ddGI+be0Ak9Fg=="
+    crossorigin="anonymous"
+    referrerpolicy="no-referrer"
+  ></script>
+  <script
+    src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/edit/matchbrackets.min.js"
+    integrity="sha512-GSYCbN/le5gNmfAWVEjg1tKnOH7ilK6xCLgA7c48IReoIR2g2vldxTM6kZlN6o3VtWIe6fHu/qhwxIt11J8EBA=="
+    crossorigin="anonymous"
+    referrerpolicy="no-referrer"
+  ></script>
+  <script
+    src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/edit/closebrackets.min.js"
+    integrity="sha512-tsjcYO5hFvViRssxiM7Jhd8601epWOx1He3Hl4yuI5dKKPxr43KxkOhc9GZeeqzlYJm9ABb7UPA9697NiqZZ7Q=="
+    crossorigin="anonymous"
+    referrerpolicy="no-referrer"
+  ></script>
+  <script
+    src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/display/autorefresh.min.js"
+    integrity="sha512-vAsKB7xXQAWMn5kcwda0HkFVKUxSYwrmrGprVhmbGFNAG1Ij+2epT3zzdwjHTJyDsKXsiEdrUdhIxh7loHyX+A=="
+    crossorigin="anonymous"
+    referrerpolicy="no-referrer"
+  ></script>
+  <script
+    src="https://cdnjs.cloudflare.com/ajax/libs/jsonlint/1.6.0/jsonlint.min.js"
+    integrity="sha512-6qbnCNQe7wVcBDvhNJT6lZsbDKHCQQBk7yOBQg4s/9GG812CknK0EEIqG2IS10XuNxIQNWjMJd6VLwwezICz6w=="
+    crossorigin="anonymous"
+    referrerpolicy="no-referrer"
+  ></script>
+  <link
+    rel="stylesheet"
+    href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/lint/lint.min.css"
+    integrity="sha512-jP1+o6s94WQS9boYeDP3Azh8ihI5BxGgBZNjkABhx05MqH5WuDzfzSnoPxGxVzWi/gxxVHZHvWkdRM6SMy5B0Q=="
+    crossorigin="anonymous"
+    referrerpolicy="no-referrer"
+  />
+  <script
+    src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/lint/lint.min.js"
+    integrity="sha512-fzIkwQa9H8rjoDzpZ9sMOYhgaYwh9nKALWbE1m+7wpiry9PN5OyNcZ9LySotjEysolveRyv2C9pVJ+DbEuKtmQ=="
+    crossorigin="anonymous"
+    referrerpolicy="no-referrer"
+  ></script>
+  <script
+    src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/lint/json-lint.min.js"
+    integrity="sha512-40xVcCik6TlUiZadnRc6ZM0BN65s7F+C3K7eBqGRf8dmjKApjzoiT/GB1GJmdICOZbXjJCiTBbVlsIvFs8A/+Q=="
+    crossorigin="anonymous"
+    referrerpolicy="no-referrer"
+  ></script>
+  <script
+    src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/runmode/colorize.min.js"
+    integrity="sha512-KyiBT1ypnd1OYmXt5tfljpsucuh9iscvA9soQDkKAdbwZfAk+RfPyxNd9E6tiuJmF9ZhPiDDXzdRkp5ccp525w=="
+    crossorigin="anonymous"
+    referrerpolicy="no-referrer"
+  ></script>
+
+  <div
+    class="modal fade"
+    id="editMetadataModal"
+    tabindex="-1"
+    role="dialog"
+    aria-labelledby="editMetadataModalLabel"
+    aria-hidden="true"
+  >
+    <div class="modal-dialog modal-dialog-centered">
+      <div class="modal-content">
+        <div class="modal-header">
+          <div class="modal-title" id="editMetadataModalLabel">Edit Metadata</div>
+          <button
+            type="button"
+            class="btn-close"
+            data-bs-dismiss="modal"
+            aria-label="Close"
+          ></button>
+        </div>
+        <form id="updateMetadataForm">
+          <div class="modal-body">
+            <div class="metadata-field">
+              <textarea name="metadata" id="metadataTextArea"></textarea>
+            </div>
+            <div id="metadataError" class="text-danger"></div>
+          </div>
+          <div class="modal-footer">
+            <button class="btn btn-secondary" type="button" data-bs-dismiss="modal">Cancel</button>
+            <button class="btn body-button" id="save-metadata" type="submit">Update</button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+{{ end }}
diff --git a/ui/web/template/navbar.html b/ui/web/template/navbar.html
index 18dcbc36..0014d0b9 100644
--- a/ui/web/template/navbar.html
+++ b/ui/web/template/navbar.html
@@ -331,6 +331,8 @@ <h1 class="mx-3">Magistrala</h1>
     </div>
   </nav>
 
+  {{ template "metadatamodal" }}
+
   <!-- Modal -->
   <div
     class="modal fade"
@@ -378,27 +380,23 @@ <h1 class="modal-title fs-5 fw-bold" id="createDomainModalLabel" style="font-wei
                   value="[]"
                 />
                 <div id="tagHelp" class="form-text">Enter Domain tags as a string slice.</div>
-                <div id="tagsError" class="error-message text-danger"></div>
+                <div id="domainTagsError" class="error-message text-danger"></div>
               </div>
             </div>
             <div class="row mb-3">
               <div class="col-md-12">
                 <label for="domain-metadata" class="form-label">Metadata</label>
-                <input
-                  type="text"
-                  class="form-control"
-                  name="metadata"
-                  id="domain-metadata"
-                  value="{}"
-                />
+                <div class="metadata-field">
+                  <textarea name="metadata" id="domain-metadata"></textarea>
+                </div>
                 <div id="metadataHelp" class="form-text">Enter Domain metadata in JSON format.</div>
-                <div id="metadataError" class="error-message text-danger"></div>
+                <div id="domainMetadataError" class="error-message text-danger"></div>
               </div>
             </div>
           </div>
           <div class="modal-footer">
             <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
-            <button type="submit" class="btn btn-outline-dark">Create</button>
+            <button type="submit" id="create-domain-button" class="btn body-button">Create</button>
           </div>
         </form>
       </div>
@@ -466,5 +464,11 @@ <h1 class="modal-title fs-5 fw-bold" id="createDomainModalLabel" style="font-wei
         }
       });
     }
+
+    codeMirrorEditor({
+      textArea: "domain-metadata",
+      button: "create-domain-button",
+      value: {},
+    });
   </script>
 {{ end }}
diff --git a/ui/web/template/thing.html b/ui/web/template/thing.html
index a1e4f47b..4db67268 100644
--- a/ui/web/template/thing.html
+++ b/ui/web/template/thing.html
@@ -111,25 +111,21 @@
                       </tr>
                       <tr>
                         <th>Metadata</th>
-                        <td
-                          class="editable metadata-field"
-                          contenteditable="false"
-                          data-field="metadata"
-                        >
-                          {{ toJSON .Thing.Metadata }}
+                        <td>
+                          <div>
+                            <pre id="meta-data"></pre>
+                          </div>
                         </td>
                         <td>
                           <button
+                            type="button"
                             class="edit-btn"
-                            id="edit-metadata"
+                            data-bs-toggle="modal"
+                            data-bs-target="#editMetadataModal"
                             {{ if not $editButton }}disabled{{ end }}
                           >
                             <i class="fas fa-pencil-alt"></i>
                           </button>
-                          <div class="save-cancel-buttons" style="display: none">
-                            <button class="save-btn" id="save-metadata">Save</button>
-                            <button class="cancel-btn" id="cancel-metadata">Cancel</button>
-                          </div>
                         </td>
                       </tr>
                     </tbody>
@@ -153,7 +149,22 @@
           </div>
         </div>
       </div>
-    <script type="module">
+      <script>
+        var metadata = "{{ toJSON .Thing.Metadata }}";
+        var parsedMetadata = JSON.parse(metadata);
+
+        attachFormatJsonWithPrettifyListener({
+          id: "meta-data",
+          metadata: metadata,
+        });
+
+        codeMirrorEditor({
+          textArea: "metadataTextArea",
+          button: "save-metadata",
+          value: parsedMetadata,
+        });
+      </script>      
+      <script type="module">
       import { attachEditRowListener, updateName, updateSecret, updateTags, updateMetadata} from "/js/update.js";
 
       attachEditRowListener(
@@ -164,17 +175,24 @@
             name:updateName,
             secret: updateSecret,
             tags:updateTags,
-            metadata:updateMetadata,
           },
           errorDiv: "error-message",
           fields:{
             name: "name-field",
             secret: "secret-field",
             tags: "tags-field",
-            metadata: "metadata-field",
           },
         }
       );
+      updateMetadata({
+          textArea: "metadataTextArea",
+          field:"metadata",
+          alertDiv: "metadataError",
+          fieldName: "metadata-field",
+          id: "{{ .Thing.ID }}",
+          entity: "things",
+          button: "save-metadata",
+        });
     </script>
     </body>
   </html>
diff --git a/ui/web/template/things.html b/ui/web/template/things.html
index 195b1cdc..0a8c6820 100644
--- a/ui/web/template/things.html
+++ b/ui/web/template/things.html
@@ -98,15 +98,11 @@ <h5 class="modal-title" id="addThingModalLabel">Add Thing</h5>
                             </div>
                             <div class="mb-3">
                               <label for="metadata" class="form-label">Metadata</label>
-                              <input
-                                type="text"
-                                class="form-control metadata-field"
-                                name="metadata"
-                                id="metadata"
-                                value="{}"
-                              />
+                              <div class="metadata-field">
+                                <textarea name="metadata" id="metadata"></textarea>
+                              </div>
                               <div id="metadataHelp" class="form-text">
-                                Enter device metadata in JSON format.
+                                Enter thing metadata in JSON format.
                               </div>
                               <div id="metadataError" class="text-danger"></div>
                             </div>
@@ -191,15 +187,18 @@ <h5 class="modal-title" id="addThingsModalLabel">Add Things</h5>
                               {{ end }}
                             </td>
                             <td class="meta-col">
-                              {{ range $k, $v := $t.Metadata }}
-                                <span class="badge bg-success">
-                                  {{ $k }}:
-                                  {{ $v }}
-                                </span>
-                              {{ end }}
+                              <div class="meta-div">
+                                <pre id="meta-{{ $i }}"></pre>
+                              </div>
                             </td>
                             <td class="created-col">{{ $t.CreatedAt }}</td>
                           </tr>
+                          <script>
+                            attachFormatJsonWithPrettifyListener({
+                              metadata: '{{ toJSON $t.Metadata }}',
+                              id: "meta-{{ $i }}",
+                            })
+                          </script>
                         {{ end }}
                       </tbody>
                     </table>
@@ -222,6 +221,12 @@ <h5 class="modal-title" id="addThingsModalLabel">Add Things</h5>
             thingsModal.show();
           }
         }
+
+        codeMirrorEditor({
+          textArea: "metadata",
+          button: "create-thing-button",
+          value: {},
+        });
       </script>
       <script type="module">
         import {
diff --git a/ui/web/template/user.html b/ui/web/template/user.html
index ff77745d..c7a12099 100644
--- a/ui/web/template/user.html
+++ b/ui/web/template/user.html
@@ -85,21 +85,20 @@
                       </tr>
                       <tr>
                         <th>Metadata</th>
-                        <td
-                          class="editable metadata-field"
-                          contenteditable="false"
-                          data-field="metadata"
-                        >
-                          {{ toJSON .User.Metadata }}
+                        <td>
+                          <div>
+                            <pre id="meta-data"></pre>
+                          </div>
                         </td>
                         <td>
-                          <button class="edit-btn" id="edit-metadata">
+                          <button
+                            type="button"
+                            class="edit-btn"
+                            data-bs-toggle="modal"
+                            data-bs-target="#editMetadataModal"
+                          >
                             <i class="fas fa-pencil-alt"></i>
                           </button>
-                          <div class="save-cancel-buttons" style="display: none">
-                            <button class="save-btn" id="save-metadata">Save</button>
-                            <button class="cancel-btn" id="cancel-metadata">Cancel</button>
-                          </div>
                         </td>
                       </tr>
                       <tr>
@@ -206,6 +205,21 @@
           </div>
         </div>
       </div>
+      <script>
+        var metadata = "{{ toJSON .User.Metadata }}";
+        var parsedMetadata = JSON.parse(metadata);
+
+        attachFormatJsonWithPrettifyListener({
+          id: "meta-data",
+          metadata: metadata,
+        });
+
+        codeMirrorEditor({
+          textArea: "metadataTextArea",
+          button: "save-metadata",
+          value: parsedMetadata,
+        });
+      </script>      
       <script type="module">
         import { attachEditRowListener, updateName, updateIdentity, updateTags, updateMetadata} from "/js/update.js";
 
@@ -217,16 +231,24 @@
               name:updateName,
               identity:updateIdentity,
               tags:updateTags,
-              metadata:updateMetadata,
             },
             errorDiv: "error-message",
             fields: {
               name: "name-field",
               identity: "identity-field",
               tags: "tags-field",
-              metadata: "metadata-field",
             },
           });
+
+          updateMetadata({
+          textArea: "metadataTextArea",
+          field:"metadata",
+          alertDiv: "metadataError",
+          fieldName: "metadata-field",
+          id: "{{ .User.ID }}",
+          entity: "users",
+          button: "save-metadata",
+        });
       </script>
     </body>
   </html>
diff --git a/ui/web/template/users.html b/ui/web/template/users.html
index cdf0f18f..ee669934 100644
--- a/ui/web/template/users.html
+++ b/ui/web/template/users.html
@@ -91,13 +91,10 @@ <h5 class="modal-title" id="addUserModalLabel">Add User</h5>
                             </div>
                             <div class="mb-3">
                               <label for="metadata" class="form-label">Metadata</label>
-                              <input
-                                type="text"
-                                class="form-control metadata-field"
-                                name="metadata"
-                                id="metadata"
-                                value="{}"
-                              />
+                              <div class="metadata-field">
+                                <textarea name="metadata" id="metadata"></textarea>
+                              </div>
+
                               <div id="metadataHelp" class="form-text">
                                 Enter user metadata in JSON format.
                               </div>
@@ -183,15 +180,18 @@ <h5 class="modal-title" id="addUsersModalLabel">Add Users</h5>
                               {{ end }}
                             </td>
                             <td class="meta-col">
-                              {{ range $k, $v := $u.Metadata }}
-                                <span class="badge bg-success">
-                                  {{ $k }}:
-                                  {{ $v }}
-                                </span>
-                              {{ end }}
+                              <div class="meta-div">
+                                <pre id="meta-{{ $i }}"></pre>
+                              </div>
                             </td>
                             <td class="created-col">{{ $u.CreatedAt }}</td>
                           </tr>
+                          <script>
+                            attachFormatJsonWithPrettifyListener({
+                              metadata: '{{ toJSON $u.Metadata }}',
+                              id: "meta-{{ $i }}",
+                            })
+                          </script>
                         {{ end }}
                       </tbody>
                     </table>
@@ -228,6 +228,12 @@ <h5 class="modal-title" id="addUsersModalLabel">Add Users</h5>
             usersModal.show();
           }
         }
+
+        codeMirrorEditor({
+          textArea: "metadata",
+          button: "create-user-button",
+          value: {},
+        });
       </script>
       <script type="module">
         import {