diff --git a/src/app.js b/src/app.js
index 2b5ee25acdf78ad56dca86fa5a39da79bfe5bcdd..ddca02d3d0c7af537742bf4fab0705a0ecd27a6b 100644
--- a/src/app.js
+++ b/src/app.js
@@ -1,2 +1,5 @@
-import {Network} from './js/visualizer/visualization'
+import './styles/link.scss';
+import './styles/node.scss';
+import './styles/tooltip.scss';
+import {Network} from './js/visualizer/visualization';
 new Network().showNetwork('match (a:Issue{id:2})<-[r*..]-(b) return *');
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index 0b9c23a308265c78567984b59c0ab7572f264c5e..b499b84a3c1fe3c789e8f7708b5707aaa62f5ac9 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,34 +1,6 @@
 <!DOCTYPE html>
 <meta charset="utf-8">
 <style>
-
-    .link {
-        stroke: #ffffff;
-        stroke-width: 2px;
-        pointer-events: all;
-    }
-
-    .node circle {
-        pointer-events: all;
-        stroke: #ffffff;
-        stroke-width: 1px;
-        fill: grey;
-    }
-
-    div.tooltip {
-        position: absolute;
-        background-color: #ffd899;
-        max-width;
-        200px;
-        height: auto;
-        padding: 2px;
-        border-style: solid;
-        border-radius: 4px;
-        border-width: 1px;
-        box-shadow: 3px 3px 10px rgba(0, 0, 0, .5);
-        pointer-events: none;
-    }
-
     svg {
         background: black;
     }
diff --git a/src/js/visualizer/visualization.js b/src/js/visualizer/visualization.js
index 4108444db25490f1fe2815339ec72dd419f9ee94..596f3438fb9d5529ce530306221b2a62e683d898 100644
--- a/src/js/visualizer/visualization.js
+++ b/src/js/visualizer/visualization.js
@@ -1,5 +1,4 @@
 import * as d3 from 'd3'
-import {legendColor} from 'd3-svg-legend'
 import {Neo4JAdapter} from '../neo4j/neo'
 import {Graph} from '../graph/graph'
 import {GraphCreator} from '../graph/graphCreator'
@@ -9,8 +8,6 @@ export class Network {
     async showNetwork(query) {
         const graph = await new GraphCreator().fill(new Graph(), query);
 
-        var color = d3.scaleOrdinal(d3.schemeSet3);
-
         var tooltip = d3.select("body")
             .append("div")
             .attr("class", "tooltip")
@@ -22,21 +19,32 @@ export class Network {
 
         const simulation = d3.forceSimulation()
             .nodes(graph.nodes)
-            .force('link', d3.forceLink().id(d => d.id).distance(20))
+            .force('link', d3.forceLink().id(d => d.id).distance(100))
             .force('charge', d3.forceManyBody())
             .force('center', d3.forceCenter(width / 2, height / 2))
+            .velocityDecay(0.3)
+            .alphaTarget(1)
             .on('tick', ticked);
 
         simulation.force('link')
             .links(graph.edges);
 
-        const R = 6;
+        const R = 10;
         let link = svg.selectAll('line')
             .data(graph.edges)
             .enter().append('line');
 
         link
             .attr('class', 'link')
+            .attr('stroke', function (l) {
+                if (l.type.includes("REGARDING")) {
+                    return "#A9A9A9";
+                } else if (l.type.includes("CONCLUDES")) {
+                    return "#ce34ff";
+                } else if (l.type.includes("PREMISE_OF")) {
+                    return "#7b6fcc";
+                }
+            })
             .on('mouseover.tooltip', function (d) {
                 tooltip.transition()
                     .duration(300)
@@ -70,7 +78,15 @@ export class Network {
         node.append('circle')
             .attr('r', R)
             .attr("fill", function (d) {
-                return color(d.labels);
+                if (d.labels.includes("Attack")) {
+                    return "#ff0000";
+                } else if (d.labels.includes("Support")) {
+                    return "#00ff00";
+                } else if (d.labels.includes("Statement")) {
+                    return "#ffff00";
+                } else if (d.labels.includes("Issue")) {
+                    return "#0000ff"
+                }
             })
             .on('mouseover.tooltip', function (d) {
                 tooltip.transition()
@@ -81,12 +97,15 @@ export class Network {
                     info = "id:" + d.id
                         + "<p/>Labels:" + d.labels
                         + "<p/>Title:" + d.title;
-                }else if (d.labels.includes("Statement")){
-                    info = "id:" + d.id
+                } else if (d.labels.includes("Statement")) {
+                    info = "<div class='card'>"
+                        + "<img src='https://www.w3schools.com/w3images/avatar2.png' width='80' height='80'/>"
+                        + "<div class='container'>"
+                        + "<h4><b>John Doe</b></h4>"
+                        + "<p>id:" + d.id
                         + "<p/>Labels:" + d.labels
                         + "<p/>Textversion:" + d.textversion;
-                }
-                else if (d.labels.includes("Argument")){
+                } else if (d.labels.includes("Argument")) {
                     info = "id:" + d.id
                         + "<p/>Labels:" + d.labels;
                 }
@@ -105,12 +124,7 @@ export class Network {
                 tooltip.style("left", (d3.event.pageX) + "px")
                     .style("top", (d3.event.pageY + 10) + "px");
             })
-            .on('dblclick', releasenode)
-
-        node.append('text')
-            .attr('x', 0)
-            .attr('dy', '.35em')
-            .text(d => d.name);
+            .on('dblclick', releasenode);
 
         function ticked() {
             link
@@ -120,7 +134,13 @@ export class Network {
                 .attr('y2', d => d.target.y);
 
             node
-                .attr('transform', d => `translate(${d.x},${d.y})`);
+                .attr('transform', d => `translate(${d.x},${d.y})`)
+                .attr("cx", function (d) {
+                    return d.x = Math.max(R, Math.min(width - R, d.x));
+                })
+                .attr("cy", function (d) {
+                    return d.y = Math.max(R, Math.min(height - R, d.y));
+                });
         }
 
         function dragstarted(d) {
@@ -138,6 +158,10 @@ export class Network {
             if (!d3.event.active) simulation.alphaTarget(0);
             d.fx = null;
             d.fy = null;
+
+            graph.nodes[0].x = width / 2;
+            graph.nodes[0].y = height / 2;
+
         }
 
         function releasenode(d) {
@@ -167,24 +191,8 @@ export class Network {
             };
         }
 
-        var sequentialScale = d3.scaleOrdinal(d3.schemeSet3)
-            .domain([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
-
         svg.append("g")
             .attr("class", "legendSequential")
             .attr("transform", "translate(" + (width - 100) + "," + (height - 300) + ")");
-
-
-        var legendSequential = legendColor()
-            .shapeWidth(30)
-            .cells(11)
-            .orient("vertical")
-            .title("Group number by color:")
-            .titleWidth(100)
-            .scale(sequentialScale);
-
-        svg.select(".legendSequential")
-            .call(legendSequential);
-
     }
 }
\ No newline at end of file
diff --git a/src/styles/link.scss b/src/styles/link.scss
new file mode 100644
index 0000000000000000000000000000000000000000..4faecabd36b774d1312e74ed5508ec2a709e865c
--- /dev/null
+++ b/src/styles/link.scss
@@ -0,0 +1,4 @@
+.link {
+  stroke-width: 5px;
+  pointer-events: all;
+}
diff --git a/src/styles/node.scss b/src/styles/node.scss
new file mode 100644
index 0000000000000000000000000000000000000000..5f8215beff8d567d8ebff469702de80175a9ee4e
--- /dev/null
+++ b/src/styles/node.scss
@@ -0,0 +1,5 @@
+.node circle {
+  pointer-events: all;
+  stroke: #ffffff;
+  stroke-width: 4px;
+}
\ No newline at end of file
diff --git a/src/styles/tooltip.scss b/src/styles/tooltip.scss
new file mode 100644
index 0000000000000000000000000000000000000000..974197c8ac760928740043b5557368e24e501c42
--- /dev/null
+++ b/src/styles/tooltip.scss
@@ -0,0 +1,28 @@
+
+.card {
+  box-shadow: 0 4px 8px 0 rgba(170, 0, 200, 0.2);
+  transition: 0.3s;
+  width: 100%;
+}
+
+.card:hover {
+  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+}
+
+.container {
+  padding: 2px 16px;
+}
+
+div.tooltip {
+  position: absolute;
+  background-color: #fff1d2;
+  max-width: 200px;
+  width: auto;
+  height: auto;
+  padding: 2px;
+  border-style: solid;
+  border-radius: 8px;
+  border-width: 1px;
+  box-shadow: 3px 3px 10px rgba(255, 255, 255, 0.5);
+  pointer-events: none;
+}
\ No newline at end of file