diff --git a/client/source/scripts/components/torrent-list/Torrent.js b/client/source/scripts/components/torrent-list/Torrent.js
index 38f83770..08e1b249 100644
--- a/client/source/scripts/components/torrent-list/Torrent.js
+++ b/client/source/scripts/components/torrent-list/Torrent.js
@@ -20,87 +20,6 @@ export default class Torrent extends React.Component {
     });
   }
 
-  getEta(eta) {
-    if (eta === 'Infinity') {
-      return '∞';
-    } else if (eta.years > 0) {
-      return (
-        <span>
-          <span className="torrent__details--segment">
-            {eta.years}<em className="unit">yr</em>
-          </span>
-          <span className="torrent__details--segment">
-            {eta.weeks}<em className="unit">wk</em>
-          </span>
-        </span>
-      );
-    } else if (eta.weeks > 0) {
-      return (
-        <span>
-          
-          <span className="torrent__details--segment">
-            {eta.weeks}<em className="unit">wk</em>
-          </span>
-          <span className="torrent__details--segment">
-            {eta.days}<em className="unit">d</em>
-          </span>
-        </span>
-      );
-    } else if (eta.days > 0) {
-      return (
-        <span>
-          <span className="torrent__details--segment">
-            {eta.days}<em className="unit">d</em>
-          </span>
-          <span className="torrent__details--segment">
-            {eta.hours}<em className="unit">hr</em>
-          </span>
-        </span>
-      );
-    } else if (eta.hours > 0) {
-      return (
-        <span>
-          <span className="torrent__details--segment">
-            {eta.hours}<em className="unit">hr</em>
-          </span>
-          <span className="torrent__details--segment">
-            {eta.minutes}<em className="unit">m</em>
-          </span>
-        </span>
-      );
-    } else if (eta.minutes > 0) {
-      return (
-        <span>
-          <span className="torrent__details--segment">
-            {eta.minutes}<em className="unit">m</em>
-          </span>
-          <span className="torrent__details--segment">
-            {eta.seconds}<em className="unit">s</em>
-          </span>
-        </span>
-      );
-    } else {
-      return (
-        <span>
-          {eta.seconds}<em className="unit">s</em>
-        </span>
-      );
-    }
-  }
-
-  getRatio(ratio) {
-    ratio = ratio / 1000;
-    let precision = 1;
-
-    if (ratio < 10) {
-      precision = 2;
-    } else if (ratio < 100) {
-      precision = 0;
-    }
-
-    return ratio.toFixed(precision);
-  }
-
   handleClick(event) {
     this.props.handleClick(this.props.data.hash, event);
   }
@@ -117,8 +36,8 @@ export default class Torrent extends React.Component {
     let completed = format.data(torrent.bytesDone);
     let downloadRate = format.data(torrent.downloadRate, '/s');
     let downloadTotal = format.data(torrent.downloadTotal);
-    let eta = this.getEta(torrent.eta);
-    let ratio = this.getRatio(torrent.ratio);
+    let eta = format.eta(torrent.eta);
+    let ratio = format.ratio(torrent.ratio);
     let totalSize = format.data(torrent.sizeBytes);
     let uploadRate = format.data(torrent.uploadRate, '/s');
     let uploadTotal = format.data(torrent.uploadTotal);
diff --git a/client/source/scripts/components/torrent-list/TorrentDetails.js b/client/source/scripts/components/torrent-list/TorrentDetails.js
index 520d7dec..36107862 100644
--- a/client/source/scripts/components/torrent-list/TorrentDetails.js
+++ b/client/source/scripts/components/torrent-list/TorrentDetails.js
@@ -9,9 +9,9 @@ import Icon from '../icons/Icon';
 import clientSelector from '../../selectors/clientSelector';
 
 const methodsToBind = [
-  'getSidePanel',
-  'getEta',
-  'getRatio'
+  'getFileData',
+  'getHeading',
+  'getSidePanel'
 ];
 
 class TorrentDetails extends React.Component {
@@ -31,35 +31,88 @@ class TorrentDetails extends React.Component {
   componentWillReceiveProps(nextProps) {
     if (nextProps.visible === true) {
       let nextHash = nextProps.selectedTorrents[0];
-      if (this.state.selectedTorrentHash !== nextHash) {
-        this.setState({
-          selectedTorrentHash: nextHash,
-          selectedTorrent: _.find(nextProps.torrents, torrent => {
-            return torrent.hash === nextHash;
-          })
-        });
-      }
+      this.setState({
+        selectedTorrentHash: nextHash,
+        selectedTorrent: _.find(nextProps.torrents, torrent => {
+          return torrent.hash === nextHash;
+        })
+      });
     }
   }
 
   shouldComponentUpdate(nextProps) {
-    if (nextProps.visible === true || (nextProps.visible !== this.props.visible)) {
+    if (this.props.visible === true || (nextProps.visible !== this.props.visible)) {
       return true;
     } else {
       return false;
     }
   }
 
-  getPeerList() {
-    let torrentDetails = this.props.torrentDetails[
-      this.state.selectedTorrentHash
-    ];
+  getFileData(torrent, files) {
+    let parentDirectory = torrent.directory;
+    let filename = torrent.filename;
 
-    let peerList = null;
-    let peerCount = 0;
+    if (parentDirectory.endsWith(torrent.filename)) {
+      parentDirectory = parentDirectory.substring(
+        0, parentDirectory.length - torrent.filename.length
+      );
+    }
 
-    if (torrentDetails) {
-      peerList = torrentDetails.map(function(peer, index) {
+    if (parentDirectory.endsWith('/') || parentDirectory.endsWith('\\')) {
+      parentDirectory = parentDirectory.substr(
+        0, parentDirectory.length - 1
+      );
+    }
+
+    if (files) {
+      let fileList = files.map(pathItem => {
+        let classes = classNames({
+          'torrent-details__file-data__filename': true,
+          [`torrent-details__file-data__depth--${pathItem.pathDepth}`]: pathItem.pathDepth > 0
+        });
+        return (
+          <div className={classes}
+            key={pathItem.path}>
+            {pathItem.path}
+          </div>
+        );
+      });
+      return (
+        <div className="torrent-details__file-data torrent-details__section">
+          <div className="torrent-details__file-data__directory">
+            {parentDirectory}
+          </div>
+          {fileList}
+        </div>
+      );
+    } else {
+      return (
+        <div className="torrent-details__file-data torrent-details__section">
+          <div className="torrent-details__file-data__directory">
+            {parentDirectory}
+          </div>
+          <div className="torrent-details__file-data__filename">
+            {filename}
+          </div>
+        </div>
+      );
+    }
+  }
+
+  getHeading() {
+    // return (
+    //   <div className="torrent-details__actions torrent-details__section">
+    //     Dropdown
+    //   </div>
+    // );
+  }
+
+  getPeerList(peers) {
+    if (peers) {
+      let peerList = null;
+      let peerCount = 0;
+
+      peerList = peers.map(function(peer, index) {
         let downloadRate = format.data(peer.downloadRate, '/s');
         let uploadRate = format.data(peer.uploadRate, '/s');
         return (
@@ -77,107 +130,29 @@ class TorrentDetails extends React.Component {
         );
       });
       peerCount = peerList.length;
+
+      return (
+        <div className="torrent-details__peers torrent-details__section">
+          <table className="torrent-details__table table">
+            <thead className="torrent-details__table__heading">
+              <tr>
+                <th>
+                  Peers
+                  <span className="torrent-details__table__heading__count">
+                    {peerCount}
+                  </span>
+                </th>
+                <th>DL</th>
+                <th>UL</th>
+              </tr>
+            </thead>
+            <tbody>
+              {peerList}
+            </tbody>
+          </table>
+        </div>
+      )
     }
-
-    return (
-      <table className="torrent-details__table table">
-        <thead>
-          <tr>
-            <th>
-              Peers
-              <span className="table__heading--sub-heading">
-                {peerCount}
-              </span>
-            </th>
-            <th>DL</th>
-            <th>UL</th>
-          </tr>
-        </thead>
-        <tbody>
-          {peerList}
-        </tbody>
-      </table>
-    )
-  }
-
-  getEta(eta) {
-    if (eta === 'Infinity') {
-      return '∞';
-    } else if (eta.years > 0) {
-      return (
-        <span>
-          <span className="torrent__details--segment">
-            {eta.years}<em className="unit">yr</em>
-          </span>
-          <span className="torrent__details--segment">
-            {eta.weeks}<em className="unit">wk</em>
-          </span>
-        </span>
-      );
-    } else if (eta.weeks > 0) {
-      return (
-        <span>
-          <span className="torrent__details--segment">
-            {eta.weeks}<em className="unit">wk</em>
-          </span>
-          <span className="torrent__details--segment">
-            {eta.days}<em className="unit">d</em>
-          </span>
-        </span>
-      );
-    } else if (eta.days > 0) {
-      return (
-        <span>
-          <span className="torrent__details--segment">
-            {eta.days}<em className="unit">d</em>
-          </span>
-          <span className="torrent__details--segment">
-            {eta.hours}<em className="unit">hr</em>
-          </span>
-        </span>
-      );
-    } else if (eta.hours > 0) {
-      return (
-        <span>
-          <span className="torrent__details--segment">
-            {eta.hours}<em className="unit">hr</em>
-          </span>
-          <span className="torrent__details--segment">
-            {eta.minutes}<em className="unit">m</em>
-          </span>
-        </span>
-      );
-    } else if (eta.minutes > 0) {
-      return (
-        <span>
-          <span className="torrent__details--segment">
-            {eta.minutes}<em className="unit">m</em>
-          </span>
-          <span className="torrent__details--segment">
-            {eta.seconds}<em className="unit">s</em>
-          </span>
-        </span>
-      );
-    } else {
-      return (
-        <span>
-          {eta.seconds}<em className="unit">s</em>
-        </span>
-      );
-    }
-  }
-
-  getRatio(ratio) {
-    ratio = ratio / 1000;
-    let precision = 1;
-
-    if (ratio < 10) {
-      precision = 2;
-    } else if (ratio < 100) {
-      precision = 0;
-    }
-
-    return ratio.toFixed(precision);
   }
 
   getSidePanel() {
@@ -192,18 +167,19 @@ class TorrentDetails extends React.Component {
     let completed = format.data(torrent.bytesDone);
     let downloadRate = format.data(torrent.downloadRate, '/s');
     let downloadTotal = format.data(torrent.downloadTotal);
-    let eta = this.getEta(torrent.eta);
-    let ratio = this.getRatio(torrent.ratio);
+    let eta = format.eta(torrent.eta);
+    let ratio = format.ratio(torrent.ratio);
     let totalSize = format.data(torrent.sizeBytes);
+    let torrentDetails = this.props.torrentDetails[
+      this.state.selectedTorrentHash
+    ] || {};
     let uploadRate = format.data(torrent.uploadRate, '/s');
     let uploadTotal = format.data(torrent.uploadTotal);
 
     return (
       <div className="torrent-details" key={this.props.visible}>
-        <div className="torrent-details__actions">
-          Dropdown
-        </div>
-        <ul className="torrent-details__transfer-data">
+        {this.getHeading()}
+        <ul className="torrent-details__transfer-data torrent-details__section">
           <li className="transfer-data transfer-data--download">
             <Icon icon="download" />
             {downloadRate.value}
@@ -223,9 +199,8 @@ class TorrentDetails extends React.Component {
             1<em className="unit">yr</em>
           </li>
         </ul>
-        <div className="torrent-details__peers">
-          {this.getPeerList()}
-        </div>
+        {this.getFileData(torrent, torrentDetails.files)}
+        {this.getPeerList(torrentDetails.peers)}
       </div>
     );
   }