diff --git a/ui/app/components/streaming-file.js b/ui/app/components/streaming-file.js
index 7b498ccf1..8e7167b31 100644
--- a/ui/app/components/streaming-file.js
+++ b/ui/app/components/streaming-file.js
@@ -1,4 +1,5 @@
 import Component from '@ember/component';
+import { computed } from '@ember/object';
 import { run } from '@ember/runloop';
 import { task } from 'ember-concurrency';
 import WindowResizable from 'nomad-ui/mixins/window-resizable';
diff --git a/ui/app/components/task-file.js b/ui/app/components/task-file.js
index dfc40c549..a73551598 100644
--- a/ui/app/components/task-file.js
+++ b/ui/app/components/task-file.js
@@ -1,6 +1,7 @@
 import { inject as service } from '@ember/service';
 import Component from '@ember/component';
 import { computed } from '@ember/object';
+import { equal } from '@ember/object/computed';
 import RSVP from 'rsvp';
 import Log from 'nomad-ui/utils/classes/log';
 import timeout from 'nomad-ui/utils/timeout';
@@ -27,19 +28,14 @@ export default Component.extend({
   mode: 'head',
 
   fileComponent: computed('stat', function() {
-    // TODO: Switch to this.stat.ContentType
-    // TODO: Determine binary/unsupported non-text files to set to "cannot view" component
-    const matches = this.stat.Name.match(/^.+?\.(.+)$/);
-    const ext = matches ? matches[1] : '';
+    const contentType = this.stat.ContentType;
 
-    switch (ext) {
-      case 'jpg':
-      case 'jpeg':
-      case 'gif':
-      case 'png':
-        return 'image';
-      default:
-        return 'stream';
+    if (contentType.startsWith('image/')) {
+      return 'image';
+    } else if (contentType.startsWith('text/') || contentType.startsWith('application/json')) {
+      return 'stream';
+    } else {
+      return 'unknown';
     }
   }),
 
@@ -47,11 +43,7 @@ export default Component.extend({
     return this.stat.Size > 50000;
   }),
 
-  isStreamable: computed('stat', function() {
-    return true;
-    return this.stat.ContentType.startsWith('text/');
-  }),
-
+  isStreamable: equal('fileComponent', 'stream'),
   isStreaming: false,
 
   catUrl: computed('allocation.id', 'task.name', 'file', function() {
@@ -59,13 +51,15 @@ export default Component.extend({
   }),
 
   fetchMode: computed('isLarge', 'mode', function() {
+    if (this.mode === 'streaming') {
+      return 'stream';
+    }
+
     if (!this.isLarge) {
       return 'cat';
     } else if (this.mode === 'head' || this.mode === 'tail') {
       return 'readat';
     }
-
-    return 'stream';
   }),
 
   fileUrl: computed(
diff --git a/ui/app/controllers/allocations/allocation/task/fs.js b/ui/app/controllers/allocations/allocation/task/fs.js
index b8084fd63..9ad6df2c7 100644
--- a/ui/app/controllers/allocations/allocation/task/fs.js
+++ b/ui/app/controllers/allocations/allocation/task/fs.js
@@ -16,6 +16,7 @@ export default Controller.extend({
   task: null,
   directoryEntries: null,
   isFile: null,
+  stat: null,
 
   directories: filterBy('directoryEntries', 'IsDir'),
   files: filterBy('directoryEntries', 'IsDir', false),
diff --git a/ui/app/routes/allocations/allocation/task/fs.js b/ui/app/routes/allocations/allocation/task/fs.js
index f592e77a0..12ee70fc4 100644
--- a/ui/app/routes/allocations/allocation/task/fs.js
+++ b/ui/app/routes/allocations/allocation/task/fs.js
@@ -24,14 +24,15 @@ export default Route.extend({
             path: decodedPath,
             task,
             isFile: true,
+            stat: statJson,
           };
         }
       })
       .catch(notifyError(this));
   },
 
-  setupController(controller, { path, task, directoryEntries, isFile } = {}) {
+  setupController(controller, { path, task, directoryEntries, isFile, stat } = {}) {
     this._super(...arguments);
-    controller.setProperties({ path, task, directoryEntries, isFile });
+    controller.setProperties({ path, task, directoryEntries, isFile, stat });
   },
 });
diff --git a/ui/app/templates/allocations/allocation/task/fs.hbs b/ui/app/templates/allocations/allocation/task/fs.hbs
index 9854d7341..6dda0a01d 100644
--- a/ui/app/templates/allocations/allocation/task/fs.hbs
+++ b/ui/app/templates/allocations/allocation/task/fs.hbs
@@ -1,31 +1,45 @@
 {{task-subnav task=task}}
-<section class="section is-closer">
+<section class="section is-closer {{if isFile "full-width-section"}}">
   {{#if task.isRunning}}
-    <div class="fs-explorer boxed-section">
-      <div class="boxed-section-head is-compact">
-        <nav class="breadcrumb" data-test-fs-breadcrumbs>
-          <ul>
-            <li class={{if breadcrumbs "" "is-active"}}>
-              {{#link-to "allocations.allocation.task.fs-root" task.allocation task activeClass="is-active"}}
-                {{task.name}}
-              {{/link-to}}
-            </li>
-            {{#each breadcrumbs as |breadcrumb|}}
-              <li class={{if breadcrumb.isLast "is-active"}}>
-                {{#link-to "allocations.allocation.task.fs" task.allocation task breadcrumb.path activeClass="is-active"}}
-                  {{breadcrumb.name}}
+    {{#if isFile}}
+        {{#task-file allocation=task.allocation task=task file=path stat=stat class="fs-explorer"}}
+          <nav class="breadcrumb" data-test-fs-breadcrumbs>
+            <ul>
+              <li class={{if breadcrumbs "" "is-active"}}>
+                {{#link-to "allocations.allocation.task.fs-root" task.allocation task activeClass="is-active"}}
+                  {{task.name}}
                 {{/link-to}}
               </li>
-            {{/each}}
-          </ul>
-        </nav>
-      </div>
-
-      {{#if isFile}}
-        <div class="boxed-section-body">
-          <div data-test-file-viewer>placeholder file viewer</div>
+              {{#each breadcrumbs as |breadcrumb|}}
+                <li class={{if breadcrumb.isLast "is-active"}}>
+                  {{#link-to "allocations.allocation.task.fs" task.allocation task breadcrumb.path activeClass="is-active"}}
+                    {{breadcrumb.name}}
+                  {{/link-to}}
+                </li>
+              {{/each}}
+            </ul>
+          </nav>
+        {{/task-file}}
+    {{else}}
+      <div class="fs-explorer boxed-section">
+        <div class="boxed-section-head">
+          <nav class="breadcrumb" data-test-fs-breadcrumbs>
+            <ul>
+              <li class={{if breadcrumbs "" "is-active"}}>
+                {{#link-to "allocations.allocation.task.fs-root" task.allocation task activeClass="is-active"}}
+                  {{task.name}}
+                {{/link-to}}
+              </li>
+              {{#each breadcrumbs as |breadcrumb|}}
+                <li class={{if breadcrumb.isLast "is-active"}}>
+                  {{#link-to "allocations.allocation.task.fs" task.allocation task breadcrumb.path activeClass="is-active"}}
+                    {{breadcrumb.name}}
+                  {{/link-to}}
+                </li>
+              {{/each}}
+            </ul>
+          </nav>
         </div>
-      {{else}}
         {{#list-table
           source=sortedDirectoryEntries
           sortProperty=sortProperty
diff --git a/ui/app/templates/components/task-file.hbs b/ui/app/templates/components/task-file.hbs
index 1846e34ce..be8621bfc 100644
--- a/ui/app/templates/components/task-file.hbs
+++ b/ui/app/templates/components/task-file.hbs
@@ -5,6 +5,7 @@
   </div>
 {{/if}}
 <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 (and isLarge isStreamable)}}