diff --git a/awx/ui/src/components/ErrorDetail/ErrorDetail.js b/awx/ui/src/components/ErrorDetail/ErrorDetail.js
index 81a7176998..1ecceea468 100644
--- a/awx/ui/src/components/ErrorDetail/ErrorDetail.js
+++ b/awx/ui/src/components/ErrorDetail/ErrorDetail.js
@@ -1,3 +1,4 @@
+import 'styled-components/macro';
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
@@ -68,7 +69,11 @@ function ErrorDetail({ error }) {
     );
   };
 
-  const renderStack = () => <CardBody>{error.stack}</CardBody>;
+  const renderStack = () => (
+    <CardBody css="white-space: pre; font-family: var(--pf-global--FontFamily--monospace)">
+      {error.stack}
+    </CardBody>
+  );
 
   return (
     <Expandable