diff --git a/ui/desktop/app/templates/scopes/scope/projects/targets.hbs b/ui/desktop/app/templates/scopes/scope/projects/targets.hbs
index 68a08f950..72b16c9c1 100644
--- a/ui/desktop/app/templates/scopes/scope/projects/targets.hbs
+++ b/ui/desktop/app/templates/scopes/scope/projects/targets.hbs
@@ -123,7 +123,21 @@
                         'resources.session.credential.actions.raw-api.show'
                       }}
                     >
-                      <pre>{{raw-json credential.rawCredential}}</pre>
+                      <Rose::CodeEditor
+                        @codeValue={{raw-json credential.rawCredential}}
+                        as |c|
+                      >
+                        <c.fieldEditor
+                          class='rose-autosize'
+                          @options={{hash
+                            mode='application/json'
+                            readOnly=true
+                            lineNumbers=false
+                            cursorBlinkRate=-1
+                            styleActiveLine=false
+                          }}
+                        />
+                      </Rose::CodeEditor>
                     </Reveal>
                   </:footer>
                 </Card>
diff --git a/ui/desktop/ember-cli-build.js b/ui/desktop/ember-cli-build.js
index 91b6adad0..d66f1f5c0 100644
--- a/ui/desktop/ember-cli-build.js
+++ b/ui/desktop/ember-cli-build.js
@@ -40,5 +40,8 @@ module.exports = function (defaults) {
   // please specify an object with the list of modules as keys
   // along with the exports of each module as its value.
 
+  app.import('node_modules/codemirror/lib/codemirror.css');
+  app.import('node_modules/codemirror/theme/monokai.css');
+
   return app.toTree();
 };