diff --git a/ui/app/components/task-file.js b/ui/app/components/task-file.js
index a73551598..d8ca0b05f 100644
--- a/ui/app/components/task-file.js
+++ b/ui/app/components/task-file.js
@@ -43,6 +43,7 @@ export default Component.extend({
     return this.stat.Size > 50000;
   }),
 
+  fileTypeIsUnknown: equal('fileComponent', 'unknown'),
   isStreamable: equal('fileComponent', 'stream'),
   isStreaming: false,
 
diff --git a/ui/app/templates/components/task-file.hbs b/ui/app/templates/components/task-file.hbs
index be8621bfc..dbe4d0ddc 100644
--- a/ui/app/templates/components/task-file.hbs
+++ b/ui/app/templates/components/task-file.hbs
@@ -7,7 +7,10 @@
 <div class="boxed-section-head">
   {{yield}}
   <span class="pull-right">
-    <a data-test-log-action="raw" class="button is-white" href="{{catUrl}}" target="_blank" rel="noopener noreferrer">View Raw File</a>
+
+    {{#if (not fileTypeIsUnknown)}}
+      <a data-test-log-action="raw" class="button is-white" href="{{catUrl}}" target="_blank" rel="noopener noreferrer">View Raw File</a>
+    {{/if}}
     {{#if (and isLarge isStreamable)}}
       <button data-test-log-action="head" class="button is-white" onclick={{action "gotoHead"}}>Head</button>
       <button data-test-log-action="tail" class="button is-white" onclick={{action "gotoTail"}}>Tail</button>
@@ -25,6 +28,12 @@
   {{else if (eq fileComponent "image")}}
     {{image-file src=catUrl alt=stat.Name size=stat.Size}}
   {{else}}
-    <h1>No component</h1>
+    <div class="empty-message is-hollow">
+      <h3 class="empty-message-headline">Unsupported File Type</h3>
+      <p class="empty-message-body message">The Nomad UI could not render this file, but you can still call view the file directly.</p>
+      <p class="empty-message-body">
+        <a data-test-log-action="raw" class="button is-light" href="{{catUrl}}" target="_blank" rel="noopener noreferrer">View Raw File</a>
+      </p>
+    </div>
   {{/if}}
 </div>