diff --git a/ui/src/components/HarEntryViewer/HAREntrySections.tsx b/ui/src/components/HarEntryViewer/HAREntrySections.tsx
index ede3ca572..b69ad88ba 100644
--- a/ui/src/components/HarEntryViewer/HAREntrySections.tsx
+++ b/ui/src/components/HarEntryViewer/HAREntrySections.tsx
@@ -69,19 +69,23 @@ export const HAREntryBodySection: React.FC<HAREntryBodySectionProps> = ({
                                                                         }) => {
     const MAXIMUM_BYTES_TO_HIGHLIGHT = 10000; // The maximum of chars to highlight in body, in case the response can be megabytes
     const supportedLanguages = [['html', 'html'], ['json', 'json'], ['application/grpc', 'json']]; // [[indicator, languageToUse],...]
-    const jsonLikeFormats = ['json', 'application/grpc'];
+    const jsonLikeFormats = ['json'];
+    const binaryFormats = ['application/grpc'];
     const [isWrapped, setIsWrapped] = useState(false);
 
     const formatTextBody = (body): string => {
         const chunk = body.slice(0, MAXIMUM_BYTES_TO_HIGHLIGHT);
         const bodyBuf = encoding === 'base64' ? atob(chunk) : chunk;
 
-        if (jsonLikeFormats.some(format => content?.mimeType?.indexOf(format) > -1)) {
-            try {
+        try {
+            if (jsonLikeFormats.some(format => content?.mimeType?.indexOf(format) > -1)) {
                 return JSON.stringify(JSON.parse(bodyBuf), null, 2);
-            } catch (error) {
-                console.error(error);
+            } else if (binaryFormats.some(format => content?.mimeType?.indexOf(format) > -1)) {
+                // Replace all non printable characters (ASCII)
+                return atob(bodyBuf).replace(/[^ -~]/g, '.')
             }
+        } catch (error) {
+            console.error(error);
         }
         return bodyBuf;
     }