diff --git a/w2v-server.pl b/w2v-server.pl
index 9b01001..2df0a53 100644
--- a/w2v-server.pl
+++ b/w2v-server.pl
@@ -17,6 +17,7 @@
   my $no_iterations=$c->param('N') || 2000;
   my $perplexity=$c->param('perplexity') || 20;
   my $epsilon=$c->param('epsilon') || 5;
+  my $som=$c->param('som') || 0;
 
 	my @lists;
 	if(defined($word) && $word !~ /^\s*$/) {
@@ -28,7 +29,7 @@
 		}
 	}
 	$word =~ s/ *\| */ | /g;
-  $c->render(template=>"index", word=>$word, no_nbs=>$no_nbs, no_iterations => $no_iterations, epsilon=> $epsilon, perplexity=> $perplexity, lists=> \@lists);
+  $c->render(template=>"index", word=>$word, no_nbs=>$no_nbs, no_iterations => $no_iterations, epsilon=> $epsilon, perplexity=> $perplexity, show_som=>$som, lists=> \@lists);
 };
 
 app->start;
@@ -315,6 +316,7 @@
   </script>
 	<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
 	<script src="http://klinux10/word2vec/tsne.js"></script>
+	<script src="http://klinux10/word2vec/som.js"></script>
 	<script src="http://klinux10/word2vec/labeler.js"></script>
 <style>
 body, input {
@@ -332,10 +334,6 @@
 	colour: #222222;
 }
 
-svg {
-    margin-right: 10px;
-    margin-bottom: 10px;
-}
 #wrapper {
     width: 100%;
 //   border: 1px solid red; 
@@ -350,11 +348,27 @@
     border: 1px solid #333;
     overflow: hidden; /* if you don't want #second to wrap below #first */
 }
+#som2 svg {
+    border: 1px solid #333;
+}
+
 #cost {
 	  font-size: 8pt;
 	  color: #222222;
     margin-top: 4px;
+    margin-bottom: 12px;
 }
+
+#sominfo {
+	  font-size: 8pt;
+	  color: #222222;
+    margin-top: 0px;
+}
+
+#third {
+  border: 1px solid #333;
+}
+
 </style>
 <script>
 
@@ -372,7 +386,7 @@
 
 
 function applyJitter() {
-  svg.selectAll('.u')
+  svg.selectAll('.tsnet')
     .data(labels)
     .transition()
     .duration(50)
@@ -387,7 +401,7 @@
     
 function updateEmbedding() {
   var Y = T.getSolution();
-  svg.selectAll('.u')
+  svg.selectAll('.tsnet')
      .data(data.words)
      .attr("transform", function(d, i) { 
 			 return "translate(" +
@@ -414,7 +428,7 @@
   var g = svg.selectAll(".b")
 						 .data(data.words)
 						 .enter().append("g")
-						 .attr("class", "u");
+						 .attr("class", "tsnet");
 	
   g.append("a")
 	 .attr("xlink:href", function(word) {return "/?word="+word;})
@@ -532,7 +546,9 @@
 	}
   //T.debugGrad();
   iter_id = setInterval(step, 1);
-  //step();
+  if(<%= $show_som %>) {
+    makeSOM(j, <%= $no_iterations %>);
+  }
 }
  
 </script>
@@ -542,8 +558,9 @@
 		word(s): 
     <input type="text" name="word" size="20"  value="<%= $word %>" title="When looking for multiple words use spaces as separators to search around the average vector and | as separator to get the neighbours for each word."> 
 		max. neighbours: <input type="text" size="8" name="n" value="<%= $no_nbs %>">
-		iterations: <input type="text" name="N" size="8" value="<%= $no_iterations %>">
-		<input type="submit" value="Show">
+		max. iterations: <input type="text" name="N" size="8" value="<%= $no_iterations %>">
+    SOM <input type="checkbox" name="som" value="1" <%= ($show_som ? "checked" : "") %>>
+		<span>  </span><input type="submit" value="Show">
 	</form>
 	<br>
 	% if($lists) {
@@ -590,6 +607,11 @@
 			</div>
 		</div>
     <div id="cost"></div>
+		% if($show_som) {
+		<div id="som2">
+		</div>
+    <div id="sominfo">SOM iteration <span id="iterations">0</span></div>
+    % }
   </div>
 	<p>
 		Word vector model based on  DeReKo-2015-II. Trained with <a href="https://code.google.com/p/word2vec/">word2vec</a> using the following parameters:</p>