diff --git a/deep_sequencing_unit/source/core-plugins/ngs-sample-overview-graph/1/as/webapps/sample-graph/html/index.html b/deep_sequencing_unit/source/core-plugins/ngs-sample-overview-graph/1/as/webapps/sample-graph/html/index.html
index 71687da83afeed94d757142ec6373e482886d487..d5749143d5f88a485c55cfcf51035629cb7c2afc 100644
--- a/deep_sequencing_unit/source/core-plugins/ngs-sample-overview-graph/1/as/webapps/sample-graph/html/index.html
+++ b/deep_sequencing_unit/source/core-plugins/ngs-sample-overview-graph/1/as/webapps/sample-graph/html/index.html
@@ -54,6 +54,10 @@
 		        <li class="active"><a id="bottom-up">Bottom Up</a></li>
 		        <li><a id="top-down">Top Down</a></li>
 		      </ul>
+              <ul class="nav">
+                <li class="active"><a id="with-colors">Colors</a></li>
+                <li><a id="no-colors">B&amp;W</a></li>
+              </ul>
 	        </div>
 	      </div>
 	    </div>
diff --git a/deep_sequencing_unit/source/core-plugins/ngs-sample-overview-graph/1/as/webapps/sample-graph/html/webapp.js b/deep_sequencing_unit/source/core-plugins/ngs-sample-overview-graph/1/as/webapps/sample-graph/html/webapp.js
index f6ba20ac71d98e7472b254f4234bcc9fc5bdbf6e..c75b3f51949d2fad8f78bfb572128349fb396af5 100644
--- a/deep_sequencing_unit/source/core-plugins/ngs-sample-overview-graph/1/as/webapps/sample-graph/html/webapp.js
+++ b/deep_sequencing_unit/source/core-plugins/ngs-sample-overview-graph/1/as/webapps/sample-graph/html/webapp.js
@@ -33,8 +33,8 @@ var LINE_HEIGHT = 20;
 var FIRST_COLLAPSED_COLUMN = 2;
 
 // The colors used for the different samples. The colors are used when one sample has multiple parents or children to disambiguate.
-//var sampleColors = d3.scale.category10();
-var sampleColors = d3.scale.ordinal().range(['#999']);
+var sampleColors = d3.scale.category10();
+//var sampleColors = d3.scale.ordinal().range(['#999']);
 
 // The color used when the connection between two samples is unambiguous
 var oneToOneColor = "#999"
@@ -274,6 +274,7 @@ function SampleGraphPresenter(model) {
 	this.selectedNode = null;
 	this.didCreateVis = false;
 	this.useBottomUpMode();
+	this.useWithColorsMode();
 	this.initializePresenter();
 }
 
@@ -334,6 +335,16 @@ SampleGraphPresenter.prototype.useTopDownMode = function() {
 	this.calcuateVisibleColumnOffsets();
 };
 
+SampleGraphPresenter.prototype.useWithColorsMode = function() {
+	this.withColorsMode = true;
+	sampleColors = d3.scale.category10();
+};
+
+SampleGraphPresenter.prototype.useNoColorsMode = function() {
+	this.withColorsMode = false;
+	sampleColors = d3.scale.ordinal().range(['#999']);
+};
+
 /**
  * Return a function that gives the outgoing edges for a sample.
  *
@@ -468,6 +479,23 @@ function clickedTopDown() {
 	presenter.draw();
 }
 
+function clickedWithColors() {
+	if (presenter.withColorsMode) return;
+
+	displayActiveMode($('#with-colors'), $('#no-colors'));
+	presenter.useWithColorsMode();
+	presenter.initializeGraphSamples();
+	presenter.draw();
+}
+
+function clickedNoColors() {
+	if (!presenter.withColorsMode) return;
+
+	displayActiveMode($('#no-colors'), $('#with-colors'));
+	presenter.useNoColorsMode();
+	presenter.initializeGraphSamples();
+	presenter.draw();
+}
 
 function textBBoxForGraphNode(node) {
 	var bbox = presenter.renderer.columns.selectAll("text.sample")[node.col][node.visibleIndex].getBBox();
@@ -915,6 +943,8 @@ function enterApp(data)
 {
 	$('#bottom-up').click(clickedBottomUp);
 	$('#top-down').click(clickedTopDown);
+	$('#with-colors').click(clickedWithColors);
+	$('#no-colors').click(clickedNoColors);
 	presenter = new SampleGraphPresenter(model);
 	presenter.useBottomUpMode()
     model.requestGraphData(function() { presenter.initializeGraphSamples(); presenter.draw() });