diff --git a/load-from-url.html b/load-from-url.html
index 62cb1fe..d17f83d 100644
--- a/load-from-url.html
+++ b/load-from-url.html
@@ -7,15 +7,15 @@
       <div>
         <div>
           <label for="mapfile">Map file:</label>
-          <input type="text" id="mapfile" name="mapfile" value="http://bioinf.hutton.ac.uk/flapjack/sample-data/tutorials/ped-ver-tutorial.map">
+          <input type="text" id="mapfile" name="mapfile" value="http://gorgonzola.cshl.edu/flapjack-bytes/sample-data/sample.map">
         </div>
         <div>
           <label for="genofile">Genotype file:</label>
-          <input type="text" id="genofile" name="genofile" value="http://bioinf.hutton.ac.uk/flapjack/sample-data/tutorials/ped-ver-tutorial.dat">
+          <input type="text" id="genofile" name="genofile" value="http://gorgonzola.cshl.edu/flapjack-bytes/sample-data/sample.dat">
         </div>
         <div>
-          <label for="phenofile">Phenotype file:</label>
-          <input type="text" id="phenofile" name="phenofile">
+          <label for="featurefile">Feature file:</label>
+          <input type="text" id="featurefile" name="featurefile" value="http://gorgonzola.cshl.edu/flapjack-bytes/sample-data/sample.features.txt">
         </div>
         <input type="submit" action="#" id="submit" name="submit" value="Submit">
       </div>
@@ -33,7 +33,7 @@
               height: 600,
               mapFileURL: document.getElementById('mapfile').value,
               genotypeFileURL: document.getElementById('genofile').value,
-              phenotypeFileURL: document.getElementById('phenofile').value,
+              featureFileURL: document.getElementById('featurefile').value,
             });
             return false;
           });
diff --git a/src/flapjack-bytes.js b/src/flapjack-bytes.js
index b066e9f..0a7e8e5 100644
--- a/src/flapjack-bytes.js
+++ b/src/flapjack-bytes.js
@@ -935,11 +935,11 @@ export default function GenotypeRenderer() {
     clearParent(config.domParent);
     createRendererComponents(config, true);
 
-    let mapFile, genotypeFile, phenotypeFile;
+    let mapFile, genotypeFile, phenotypeFile, featureFile;
     let germplasmData;
     let loadingPromises = [];
-    let mapLoaded = 0, genotypeLoaded = 0, phenotypeLoaded = 0;
-    let mapSize = 0, genotypeSize = 0, phenotypeSize = 0;
+    let mapLoaded = 0, genotypeLoaded = 0, phenotypeLoaded = 0, featureLoaded = 0;
+    let mapSize = 0, genotypeSize = 0, phenotypeSize = 0, featureSize = 0;
 
     setProgressBarLabel("Downloading data...");
     setAdvancement(0);
@@ -951,7 +951,7 @@ export default function GenotypeRenderer() {
           if (progressEvent.lengthComputable){
             mapLoaded = progressEvent.loaded;
             mapSize = progressEvent.total;
-            setAdvancement((mapLoaded + genotypeLoaded + phenotypeLoaded) / (mapSize + genotypeSize + phenotypeSize));
+            setAdvancement((mapLoaded + genotypeLoaded + phenotypeLoaded + featureLoaded) / (mapSize + genotypeSize + phenotypeSize +featureSize));
           }
         }
       }).then((response) => {
@@ -970,7 +970,7 @@ export default function GenotypeRenderer() {
           if (progressEvent.lengthComputable){
             phenotypeLoaded = progressEvent.loaded;
             phenotypeSize = progressEvent.total;
-            setAdvancement((mapLoaded + genotypeLoaded + phenotypeLoaded) / (mapSize + genotypeSize + phenotypeSize));
+            setAdvancement((mapLoaded + genotypeLoaded + phenotypeLoaded + featureLoaded) / (mapSize + genotypeSize + phenotypeSize +featureSize));
           }
         }
       }).then((response) => {
@@ -982,13 +982,32 @@ export default function GenotypeRenderer() {
       loadingPromises.push(phenotypePromise);
     }
 
+    if (config.featureFileURL){
+      let featurePromise = axios.get(config.featureFileURL, {
+        headers: { 'Content-Type': 'text/plain' },
+        onDownloadProgress: function (progressEvent){
+          if (progressEvent.lengthComputable){
+            featureLoaded = progressEvent.loaded;
+            featureSize = progressEvent.total;
+            setAdvancement((mapLoaded + genotypeLoaded + phenotypeLoaded + featureLoaded) / (mapSize + genotypeSize + phenotypeSize + featureSize));
+          }
+        }
+      }).then((response) => {
+        featureFile = response.data;
+      }).catch((error) => {
+        console.error(error);
+      });
+      
+      loadingPromises.push(featurePromise);
+    }
+
     let genotypePromise = axios.get(config.genotypeFileURL, {
       headers: { 'Content-Type': 'text/plain' },
       onDownloadProgress: function (progressEvent){
         if (progressEvent.lengthComputable){
           genotypeLoaded = progressEvent.loaded;
           genotypeSize = progressEvent.total;
-          setAdvancement((mapLoaded + genotypeLoaded + phenotypeLoaded) / (mapSize + genotypeSize + phenotypeSize));
+          setAdvancement((mapLoaded + genotypeLoaded + phenotypeLoaded + featureLoaded) / (mapSize + genotypeSize + phenotypeSize +featureSize));
         }
         else
         	setProgressBarLabel("Downloading genotype file... " + formatFileSize(progressEvent.loaded));
@@ -1009,6 +1028,14 @@ export default function GenotypeRenderer() {
         genomeMap = mapImporter.parseFile(mapFile);
       }
 
+      setAdvancement(0);
+      setProgressBarLabel("Processing the features...");
+
+      if (featureFile !== undefined) {
+        const featureImporter = new FeatureImporter();
+        genomeFeatures = featureImporter.parseFile(featureFile, genomeMap);
+      }
+
       setAdvancement(0);
       setProgressBarLabel("Processing the phenotypes...");