diff --git a/web/startScan/api/serializers.py b/web/startScan/api/serializers.py
index 2ae579fd..a1c29e73 100644
--- a/web/startScan/api/serializers.py
+++ b/web/startScan/api/serializers.py
@@ -1,56 +1,83 @@
 from rest_framework import serializers
-
 from startScan.models import *
-
 from reNgine.common_func import *
 
 
-class MitchSubdomainSerializer(serializers.ModelSerializer):
+class VisualisePortSerializer(serializers.ModelSerializer):
 
-    title = serializers.ReadOnlyField(default='Subdomain')
+    name = serializers.SerializerMethodField('get_name')
 
-    description = serializers.SerializerMethodField('get_description')
+    class Meta:
+        model = Port
+        fields = [
+            'name'
+        ]
+
+    def get_name(self, port):
+        return str(port.number) + "/" + port.service_name
+
+class VisualiseIpSerializer(serializers.ModelSerializer):
+
+    name = serializers.SerializerMethodField('get_name')
+    children = serializers.SerializerMethodField('get_children')
+
+    class Meta:
+        model = IpAddress
+        fields = [
+            'name',
+            'children'
+        ]
+
+    def get_name(self, Ip):
+        return Ip.address
+
+    def get_children(self, ip):
+        port = Port.objects.filter(ports__in=IpAddress.objects.filter(address=ip))
+        serializer = VisualisePortSerializer(port, many=True)
+        return serializer.data
+
+class VisualiseSubdomainSerializer(serializers.ModelSerializer):
+
+    children = serializers.SerializerMethodField('get_children')
 
     class Meta:
         model = Subdomain
         fields = [
-            'id',
-            'title',
-            'description'
+            'name',
+            'children',
+            'http_url'
         ]
 
-    def get_description(self, Subdomain):
-        return Subdomain.name
+    def get_children(self, subdomain):
+        subdomain = Subdomain.objects.filter(
+            scan_history=self.context.get('scan_history')).filter(name=subdomain)
+        ips = IpAddress.objects.filter(ip_addresses__in=subdomain)
+        serializer = VisualiseIpSerializer(ips, many=True)
+        return serializer.data
 
 
-class MitchDataSerializer(serializers.ModelSerializer):
+class VisualiseDataSerializer(serializers.ModelSerializer):
 
-    title = serializers.ReadOnlyField(default='Target')
-    type = serializers.ReadOnlyField(default='Root')
-
-    description = serializers.SerializerMethodField('get_description')
+    name = serializers.SerializerMethodField('get_name')
     children = serializers.SerializerMethodField('get_children')
 
     class Meta:
         model = ScanHistory
         fields = [
-            'id',
-            'title',
-            'type',
-            'description',
+            'name',
             'children',
         ]
 
-    def get_description(self, ScanHistory):
+    def get_name(self, ScanHistory):
         return ScanHistory.domain.name
 
     def get_children(self, ScanHistory):
         subdomain = Subdomain.objects.filter(scan_history=ScanHistory)
-        serializer = MitchSubdomainSerializer(subdomain, many=True)
-        print(serializer)
+        serializer = VisualiseSubdomainSerializer(subdomain, many=True, context={'scan_history': ScanHistory})
         return serializer.data
 
 
+
 class SubdomainChangesSerializer(serializers.ModelSerializer):
 
     change = serializers.SerializerMethodField('get_change')
diff --git a/web/startScan/api/urls.py b/web/startScan/api/urls.py
index 97640e2f..a8df97b1 100644
--- a/web/startScan/api/urls.py
+++ b/web/startScan/api/urls.py
@@ -36,7 +36,7 @@ urlpatterns = [
     path('queryEmployees/', ListEmployees.as_view(), name='queryEmployees'),
     path('queryDorks/', ListDorks.as_view(), name='queryDorks'),
     path('queryDorkTypes/', ListDorkTypes.as_view(), name='queryDorkTypes'),
-    path('queryAllScanResultMitch/', MitchData.as_view(), name='queryAllScanResultMitch'),
+    path('queryAllScanResultVisualise/', VisualiseData.as_view(), name='queryAllScanResultVisualise'),
 ]
 
 urlpatterns += router.urls
diff --git a/web/startScan/api/views.py b/web/startScan/api/views.py
index 4c382b33..3b52da65 100644
--- a/web/startScan/api/views.py
+++ b/web/startScan/api/views.py
@@ -16,13 +16,13 @@ from rest_framework import status
 from rest_framework.decorators import api_view, action
 
 
-class MitchData(APIView):
+class VisualiseData(APIView):
     def get(self, request, format=None):
         req = self.request
         scan_id = req.query_params.get('scan_id')
         if scan_id:
             mitch_data = ScanHistory.objects.filter(id=scan_id)
-            serializer = MitchDataSerializer(mitch_data, many=True)
+            serializer = VisualiseDataSerializer(mitch_data, many=True)
             return Response(serializer.data)
         else:
             return Response()
diff --git a/web/startScan/templates/startScan/detail_scan.html b/web/startScan/templates/startScan/detail_scan.html
index 9a551c4b..23086ca2 100644
--- a/web/startScan/templates/startScan/detail_scan.html
+++ b/web/startScan/templates/startScan/detail_scan.html
@@ -27,7 +27,7 @@ Detailed Scan
 <link rel="stylesheet" type="text/css" href="{% static 'assets/css/custom.css' %}">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
 <script src="{% static 'plugins/gridzy/gridzy.js' %}"></script>
-<script src="//d3js.org/d3.v3.min.js"></script>
+<script src="https://d3js.org/d3.v3.min.js"></script>
 </style>
 {% endblock custom_js_css_link %}
 
@@ -712,7 +712,7 @@ Detailed Scan Results for {{history.domain.name}}
 						<div class="row">
 							<div class="col-xl-12 col-lg-12 col-sm-12">
 								<div class="widget widget-content widget-content-area br-6">
-									<section id="visualisation" style="max-width: 900px;">
+									<div id="visualisation">
 									</section>
 								</div>
 							</div>
diff --git a/web/static/assets/css/custom.css b/web/static/assets/css/custom.css
index 851e1db3..076b3bae 100644
--- a/web/static/assets/css/custom.css
+++ b/web/static/assets/css/custom.css
@@ -336,3 +336,24 @@ div.dataTables_wrapper div.dataTables_filter {
 .badge-link{
   cursor: pointer;
 }
+
+
+.node {
+  cursor: pointer;
+}
+
+.node circle {
+  fill: #fff;
+  stroke: steelblue;
+  stroke-width: 1.5px;
+}
+
+.node text {
+  font: 10px sans-serif;
+}
+
+.link {
+  fill: none;
+  stroke: #ccc;
+  stroke-width: 1.5px;
+}
diff --git a/web/static/custom/mitch.js b/web/static/custom/mitch.js
index 4e08dd70..086b2ec4 100644
--- a/web/static/custom/mitch.js
+++ b/web/static/custom/mitch.js
@@ -1,6 +1,3 @@
-$.getJSON(`../api/queryAllScanResultMitch/?scan_id=119&format=json`, function(data) {
-});
-
 var margin = {top: 20, right: 120, bottom: 20, left: 120},
     width = 960 - margin.right - margin.left,
     height = 800 - margin.top - margin.bottom;
@@ -15,16 +12,16 @@ var tree = d3.layout.tree()
 var diagonal = d3.svg.diagonal()
     .projection(function(d) { return [d.y, d.x]; });
 
-var svg = d3.select("body").append("svg")
+var svg = d3.select("#visualisation").append("svg")
     .attr("width", width + margin.right + margin.left)
     .attr("height", height + margin.top + margin.bottom)
   .append("g")
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
 
-d3.json("flare.json", function(error, flare) {
+d3.json("../api/queryAllScanResultVisualise/?scan_id=5&format=json", function(error, data) {
   if (error) throw error;
 
-  root = flare;
+  root = data[0];
   root.x0 = height / 2;
   root.y0 = 0;
 
@@ -35,7 +32,6 @@ d3.json("flare.json", function(error, flare) {
       d.children = null;
     }
   }
-
   root.children.forEach(collapse);
   update(root);
 });