diff --git a/startScan/templates/startScan/detail_endpoint_scan.html b/startScan/templates/startScan/detail_endpoint_scan.html
new file mode 100644
index 000000000..787818496
--- /dev/null
+++ b/startScan/templates/startScan/detail_endpoint_scan.html
@@ -0,0 +1,164 @@
+{% extends 'base/base.html' %}
+{% load static %}
+{% load humanize %}
+{% load custom_tags %}
+{% block title %}
+Scan history - Endpoints
+{% endblock title %}
+
+{% block custom_js_css_link %}
+<link rel="stylesheet" type="text/css" href="{% static 'plugins/table/datatable/datatables.css' %}">
+<link rel="stylesheet" type="text/css" href="{% static 'assets/css/forms/theme-checkbox-radio.css' %}">
+<link rel="stylesheet" type="text/css" href="{% static 'plugins/table/datatable/dt-global_style.css' %}">
+<link rel="stylesheet" type="text/css" href="{% static 'plugins/table/datatable/custom_dt_custom.css' %}">
+<link rel="stylesheet" type="text/css" href="{% static 'assets/css/custom.css' %}">
+<link href="{% static 'assets/css/dashboard/dash_1.css' %}" rel="stylesheet" type="text/css" />
+<link href="{% static 'plugins/sweetalerts/sweetalert2.min.css' %}" rel="stylesheet" type="text/css" />
+<link href="{% static 'plugins/sweetalerts/sweetalert.css' %}" rel="stylesheet" type="text/css" />
+<link href="{% static 'assets/css/components/custom-sweetalert.css' %}" rel="stylesheet" type="text/css" />
+<link href="{% static 'assets/css/components/custom-modal.css' %}" rel="stylesheet" type="text/css" />
+<link href="{% static 'assets/css/elements/custom-tree_view.css' %}" rel="stylesheet" type="text/css" />
+<link href="{% static 'plugins/lightbox/css/lightbox.css' %}" rel="stylesheet" />
+<link href="{% static 'plugins/apex/apexcharts.css' %}" rel="stylesheet" type="text/css">
+<script src="{% static 'plugins/sweetalerts/promise-polyfill.js' %}"></script>
+<script src="{% static 'custom/custom.js' %}"></script>
+{% endblock custom_js_css_link %}
+
+{% block breadcrumb_title %}
+Detailed Scan for {{history.domain_name}} - Endpoints
+{% endblock breadcrumb_title %}
+
+
+{% block main_content %}
+<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 layout-px-spacing">
+    {% if history.scan_type.fetch_url %}
+    <div class="row mb-4">
+        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12" id="endpointDiscovered">
+            <div class="widget-content widget-content-area br-6 layout-top-spacing">
+                <h5 class="text-info">Endpoints</h5>
+                {% if endpoint_count %}
+                <a href="../export/endpoints/{{scan_history_id}}" class="btn btn-info mb-2 mt-4">Export Endpoints(txt format)</a>
+                {% endif %}
+                <div class="table-responsive mb-4 mt-4">
+                    <table class="multi-table table table-striped table-bordered table-hover" style="width:100%" id="endpoint_results">
+                        <thead>
+                            <tr>
+                                <th>Endpoint</th>
+                                <th>HTTP Status</th>
+                                <th>Content Type</th>
+                                <th>Content Length</th>
+                                <th>Page Title</th>
+                            </tr>
+                        </thead>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
+    {% endif %}
+</div>
+{% endblock main_content %}
+
+
+{% block page_level_script %}
+<script src="{% static 'plugins/table/datatable/datatables.js' %}"></script>
+<script src="{% static 'plugins/sweetalerts/sweetalert2.min.js' %}"></script>
+<script src="{% static 'plugins/sweetalerts/custom-sweetalert.js' %}"></script>
+<script src="{% static 'plugins/lightbox/js/lightbox.js' %}"></script>
+<script src="{% static 'plugins/apex/apexchart.min.js' %}"></script>
+<script src="{% static 'assets/js/dashboard/dash_1.js' %}"></script>
+<script src="{% static 'custom/custom.js' %}"></script>
+<script src="//cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>
+
+<script type="text/javascript">
+// collapse sidebar only when screen size is > md (bootstrap), for smaller screen theme already hides the sidebar
+if ($(window).width() > 992) {
+    $( document ).ready(function() {
+        $("html, body").addClass("sidebar-noneoverflow");
+        $("#container").addClass("sidebar-closed");
+        $("header").addClass("expand-header");
+    });
+}
+</script>
+<script type="text/javascript">
+$(document).ready(function() {
+    $('#endpoint_results').DataTable({
+        "oLanguage": {
+            "oPaginate": { "sPrevious": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>', "sNext": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>' },
+            "sInfo": "Showing page _PAGE_ of _PAGES_",
+            "sSearch": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>',
+            "sSearchPlaceholder": "Search...",
+            "sLengthMenu": "Results :  _MENU_",
+        },
+        "stripeClasses": [],
+        "lengthMenu": [20, 40, 60, 100],
+        "pageLength": 20,
+        'serverSide': true,
+        "ajax": '/start_scan/api/listEndpoints/?url_of={{scan_history_id}}&format=datatables',
+        "order": [[ 3, "desc" ]],
+        "columns": [
+            {'data': 'http_url'},
+            {'data': 'http_status'},
+            {'data': 'content_type'},
+            {'data': 'content_length'},
+            {'data': 'page_title'},
+        ],
+        "columnDefs": [
+            {
+                "render": function ( data, type, row ) {
+                    // in the endpoint section, there is no point of displaying fully qualified url
+                    // so display only the endpoint and make a hyperlink
+                    url = getParsedURL(data);
+                    return "<a href='"+data+"' target='_blank' class='text-info'>"+url+"</a>";
+                },
+                "targets": 0,
+            },
+            {
+                "render": function ( data, type, row ) {
+                    // display badge based on http status
+                    // green for http status 2XX, orange for 3XX and warning for everything else
+                    if (data >= 200 && data < 300) {
+                        return "<span class='badge badge-pills badge-success'>"+data+"</span>";
+                    }
+                    else if (data >= 300 && data < 400) {
+                        return "<span class='badge badge-pills badge-warning'>"+data+"</span>";
+                    }
+                    else if (data == 0){
+                        // datatable throws error when no data is returned
+                        return "";
+                    }
+                    return "<span class='badge badge-pills badge-danger'>"+data+"</span>";
+
+                },
+                "targets": 1,
+            },
+            {
+                "render": function ( data, type, row ) {
+                    if (data){
+                        return htmlEncode(data);
+                    }
+                    return "";
+                },
+                "targets": 4,
+            },
+        ],
+        drawCallback: function () {
+            $('.t-dot').tooltip({ template: '<div class="tooltip status" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>' })
+            $('.dataTables_wrapper table').removeClass('table-striped');
+        }
+    });
+});
+
+
+// span values function will seperate the values by comma and put badge around it
+function span_values(data, color)
+{
+    var badge = "<span class='badge badge-pill badge-"+color+" m-1'>";
+    var data_with_span ="";
+    data.split(/\s*,\s*/).forEach(function(split_vals) {
+        data_with_span+=badge + split_vals + "</span>";
+    });
+    return data_with_span;
+}
+</script>
+{% endblock page_level_script %}
diff --git a/startScan/templates/startScan/detail_scan.html b/startScan/templates/startScan/detail_scan.html
index 8b77bf523..556411aad 100644
--- a/startScan/templates/startScan/detail_scan.html
+++ b/startScan/templates/startScan/detail_scan.html
@@ -99,7 +99,7 @@ Detailed Scan for {{history.domain_name}}
                 <div class="widget-content">
                     Total Alive Endpoints: <b class="text-info">{{endpoint_alive_count}}</b>
                     <br>
-                    <a href="#endpointDiscovered" class="text-info">View all Endpoints</a>
+                    <a href="endpoint/{{scan_history_id}}" class="text-info">View all Endpoints</a>
                 </div>
             </div>
         </div>
@@ -119,7 +119,7 @@ Detailed Scan for {{history.domain_name}}
                 <div class="widget-content">
                     <span class="text-danger">{{critical_count}} Critical and {{high_count}} High</span>
                     <br>
-                    <a href="#vulnerabilityDiscovered" class="text-info">View all Vulnerabilities</a>
+                    <a href="vuln/{{scan_history_id}}" class="text-info">View all Vulnerabilities</a>
                 </div>
             </div>
         </div>
@@ -190,52 +190,6 @@ Detailed Scan for {{history.domain_name}}
             </div>
         </div>
     </div>
-    {% if history.scan_type.vulnerability_scan %}
-    <div class="row layout-top-spacing mb-4" id="vulnerabilityDiscovered">
-        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
-            <div class="widget-content widget-content-area br-6">
-                <h5 class="text-danger">Vulnerability Scan Results</h5>
-                <div class="table-responsive mb-4 mt-4">
-                    <table id="vulnerability_results" class="multi-table table table-striped table-bordered table-hover" style="width:100%">
-                        <thead>
-                            <tr>
-                                <th>Title</th>
-                                <th>Severity</th>
-                                <th>Vulnerable URL</th>
-                                <th>Description</th>
-                            </tr>
-                        </thead>
-                    </table>
-                </div>
-            </div>
-        </div>
-    </div>
-    {% endif %}
-    {% if history.scan_type.fetch_url %}
-    <div class="row mb-4">
-        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12" id="endpointDiscovered">
-            <div class="widget-content widget-content-area br-6 layout-top-spacing">
-                <h5 class="text-info">Endpoints</h5>
-                {% if endpoint_count %}
-                <a href="../export/endpoints/{{scan_history_id}}" class="btn btn-info mb-2 mt-4">Export Endpoints(txt format)</a>
-                {% endif %}
-                <div class="table-responsive mb-4 mt-4">
-                    <table class="multi-table table table-striped table-bordered table-hover" style="width:100%" id="endpoint_results">
-                        <thead>
-                            <tr>
-                                <th>Endpoint</th>
-                                <th>HTTP Status</th>
-                                <th>Content Type</th>
-                                <th>Content Length</th>
-                                <th>Page Title</th>
-                            </tr>
-                        </thead>
-                    </table>
-                </div>
-            </div>
-        </div>
-    </div>
-    {% endif %}
 </div>
 {% endblock main_content %}
 
@@ -446,143 +400,6 @@ $(document).ready(function() {
 });
 </script>
 <script type="text/javascript">
-$(document).ready(function() {
-    $('#endpoint_results').DataTable({
-        "oLanguage": {
-            "oPaginate": { "sPrevious": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>', "sNext": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>' },
-            "sInfo": "Showing page _PAGE_ of _PAGES_",
-            "sSearch": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>',
-            "sSearchPlaceholder": "Search...",
-            "sLengthMenu": "Results :  _MENU_",
-        },
-        "stripeClasses": [],
-        "lengthMenu": [20, 40, 60, 100],
-        "pageLength": 20,
-        'serverSide': true,
-        "ajax": '/start_scan/api/listEndpoints/?url_of={{scan_history_id}}&format=datatables',
-        "order": [[ 3, "desc" ]],
-        "columns": [
-            {'data': 'http_url'},
-            {'data': 'http_status'},
-            {'data': 'content_type'},
-            {'data': 'content_length'},
-            {'data': 'page_title'},
-        ],
-        "columnDefs": [
-            {
-                "render": function ( data, type, row ) {
-                    // in the endpoint section, there is no point of displaying fully qualified url
-                    // so display only the endpoint and make a hyperlink
-                    url = getParsedURL(data);
-                    return "<a href='"+data+"' target='_blank' class='text-info'>"+url+"</a>";
-                },
-                "targets": 0,
-            },
-            {
-                "render": function ( data, type, row ) {
-                    // display badge based on http status
-                    // green for http status 2XX, orange for 3XX and warning for everything else
-                    if (data >= 200 && data < 300) {
-                        return "<span class='badge badge-pills badge-success'>"+data+"</span>";
-                    }
-                    else if (data >= 300 && data < 400) {
-                        return "<span class='badge badge-pills badge-warning'>"+data+"</span>";
-                    }
-                    else if (data == 0){
-                        // datatable throws error when no data is returned
-                        return "";
-                    }
-                    return "<span class='badge badge-pills badge-danger'>"+data+"</span>";
-
-                },
-                "targets": 1,
-            },
-            {
-                "render": function ( data, type, row ) {
-                    if (data){
-                        return htmlEncode(data);
-                    }
-                    return "";
-                },
-                "targets": 4,
-            },
-        ],
-        drawCallback: function () {
-            $('.t-dot').tooltip({ template: '<div class="tooltip status" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>' })
-            $('.dataTables_wrapper table').removeClass('table-striped');
-        }
-    });
-    $('#vulnerability_results').DataTable({
-        "oLanguage": {
-            "oPaginate": { "sPrevious": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>', "sNext": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>' },
-            "sInfo": "Showing page _PAGE_ of _PAGES_",
-            "sSearch": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>',
-            "sSearchPlaceholder": "Search...",
-            "sLengthMenu": "Results :  _MENU_",
-        },
-        "stripeClasses": [],
-        "lengthMenu": [20, 40, 60, 100],
-        "pageLength": 20,
-        'serverSide': true,
-        "ajax": '/start_scan/api/listVulnerability/?vulnerability_of={{scan_history_id}}&format=datatables',
-        "columns": [
-            {'data': 'name'},
-            {'data': 'severity'},
-            {'data': 'url'},
-            {'data': 'description'},
-            {'data': 'matcher_name'},
-        ],
-        "columnDefs": [
-            {
-                "targets": [ 4 ],
-                "visible": false,
-                "searchable": false,
-            },
-            {
-                "render": function ( data, type, row ) {
-                    switch (data) {
-                        case 0:
-                        return "<span class='badge badge-primary'>Info</span>";
-                        break;
-                        case 1:
-                        return "<span class='badge badge-low'>Low</span>";
-                        break;
-                        case 2:
-                        return "<span class='badge badge-warning'>Medium</span>";
-                        break;
-                        case 3:
-                        return "<span class='badge badge-danger'>High</span>";
-                        break;
-                        case 4:
-                        return "<span class='badge badge-critical'>Critical</span>";
-                        break;
-                        default:
-                        return "";
-                    }
-                },
-                "targets": 1,
-            },
-            {
-                "render": function ( data, type, row ) {
-                    return "<a href='"+data+"' target='_blank' class='text-danger'>"+data+"</a>";
-                },
-                "targets": 2,
-            },
-            {
-                "render": function ( data, type, row ) {
-                    return data + row['matcher_name'];
-                },
-                "targets": 3,
-            },
-        ],
-        drawCallback: function () {
-            $('.t-dot').tooltip({ template: '<div class="tooltip status" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>' })
-            $('.dataTables_wrapper table').removeClass('table-striped');
-        }
-    });
-});
-
-
 // span values function will seperate the values by comma and put badge around it
 function span_values(data, color)
 {
diff --git a/startScan/templates/startScan/detail_vuln_scan.html b/startScan/templates/startScan/detail_vuln_scan.html
new file mode 100644
index 000000000..19a4542d1
--- /dev/null
+++ b/startScan/templates/startScan/detail_vuln_scan.html
@@ -0,0 +1,163 @@
+{% extends 'base/base.html' %}
+{% load static %}
+{% load humanize %}
+{% load custom_tags %}
+{% block title %}
+Scan history - Vulnerabilities
+{% endblock title %}
+
+{% block custom_js_css_link %}
+<link rel="stylesheet" type="text/css" href="{% static 'plugins/table/datatable/datatables.css' %}">
+<link rel="stylesheet" type="text/css" href="{% static 'assets/css/forms/theme-checkbox-radio.css' %}">
+<link rel="stylesheet" type="text/css" href="{% static 'plugins/table/datatable/dt-global_style.css' %}">
+<link rel="stylesheet" type="text/css" href="{% static 'plugins/table/datatable/custom_dt_custom.css' %}">
+<link rel="stylesheet" type="text/css" href="{% static 'assets/css/custom.css' %}">
+<link href="{% static 'assets/css/dashboard/dash_1.css' %}" rel="stylesheet" type="text/css" />
+<link href="{% static 'plugins/sweetalerts/sweetalert2.min.css' %}" rel="stylesheet" type="text/css" />
+<link href="{% static 'plugins/sweetalerts/sweetalert.css' %}" rel="stylesheet" type="text/css" />
+<link href="{% static 'assets/css/components/custom-sweetalert.css' %}" rel="stylesheet" type="text/css" />
+<link href="{% static 'assets/css/components/custom-modal.css' %}" rel="stylesheet" type="text/css" />
+<link href="{% static 'assets/css/elements/custom-tree_view.css' %}" rel="stylesheet" type="text/css" />
+<link href="{% static 'plugins/lightbox/css/lightbox.css' %}" rel="stylesheet" />
+<link href="{% static 'plugins/apex/apexcharts.css' %}" rel="stylesheet" type="text/css">
+<script src="{% static 'plugins/sweetalerts/promise-polyfill.js' %}"></script>
+<script src="{% static 'custom/custom.js' %}"></script>
+{% endblock custom_js_css_link %}
+
+{% block breadcrumb_title %}
+Detailed Scan for {{history.domain_name}} - Vulnerabilities
+{% endblock breadcrumb_title %}
+
+
+{% block main_content %}
+<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 layout-px-spacing">
+    {% if history.scan_type.vulnerability_scan %}
+    <div class="row layout-top-spacing mb-4" id="vulnerabilityDiscovered">
+        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
+            <div class="widget-content widget-content-area br-6">
+                <h5 class="text-danger">Vulnerability Scan Results</h5>
+                <div class="table-responsive mb-4 mt-4">
+                    <table id="vulnerability_results" class="multi-table table table-striped table-bordered table-hover" style="width:100%">
+                        <thead>
+                            <tr>
+                                <th>Title</th>
+                                <th>Severity</th>
+                                <th>Vulnerable URL</th>
+                                <th>Description</th>
+                            </tr>
+                        </thead>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
+    {% endif %}
+</div>
+{% endblock main_content %}
+
+
+{% block page_level_script %}
+<script src="{% static 'plugins/table/datatable/datatables.js' %}"></script>
+<script src="{% static 'plugins/sweetalerts/sweetalert2.min.js' %}"></script>
+<script src="{% static 'plugins/sweetalerts/custom-sweetalert.js' %}"></script>
+<script src="{% static 'plugins/lightbox/js/lightbox.js' %}"></script>
+<script src="{% static 'plugins/apex/apexchart.min.js' %}"></script>
+<script src="{% static 'assets/js/dashboard/dash_1.js' %}"></script>
+<script src="{% static 'custom/custom.js' %}"></script>
+<script src="//cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>
+
+<script type="text/javascript">
+// collapse sidebar only when screen size is > md (bootstrap), for smaller screen theme already hides the sidebar
+if ($(window).width() > 992) {
+    $( document ).ready(function() {
+        $("html, body").addClass("sidebar-noneoverflow");
+        $("#container").addClass("sidebar-closed");
+        $("header").addClass("expand-header");
+    });
+}
+</script>
+<script type="text/javascript">
+$(document).ready(function() {
+    $('#vulnerability_results').DataTable({
+        "oLanguage": {
+            "oPaginate": { "sPrevious": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>', "sNext": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>' },
+            "sInfo": "Showing page _PAGE_ of _PAGES_",
+            "sSearch": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>',
+            "sSearchPlaceholder": "Search...",
+            "sLengthMenu": "Results :  _MENU_",
+        },
+        "stripeClasses": [],
+        "lengthMenu": [20, 40, 60, 100],
+        "pageLength": 20,
+        'serverSide': true,
+        "ajax": '/start_scan/api/listVulnerability/?vulnerability_of={{scan_history_id}}&format=datatables',
+        "columns": [
+            {'data': 'name'},
+            {'data': 'severity'},
+            {'data': 'url'},
+            {'data': 'description'},
+            {'data': 'matcher_name'},
+        ],
+        "columnDefs": [
+            {
+                "targets": [ 4 ],
+                "visible": false,
+                "searchable": false,
+            },
+            {
+                "render": function ( data, type, row ) {
+                    switch (data) {
+                        case 0:
+                        return "<span class='badge badge-primary'>Info</span>";
+                        break;
+                        case 1:
+                        return "<span class='badge badge-low'>Low</span>";
+                        break;
+                        case 2:
+                        return "<span class='badge badge-warning'>Medium</span>";
+                        break;
+                        case 3:
+                        return "<span class='badge badge-danger'>High</span>";
+                        break;
+                        case 4:
+                        return "<span class='badge badge-critical'>Critical</span>";
+                        break;
+                        default:
+                        return "";
+                    }
+                },
+                "targets": 1,
+            },
+            {
+                "render": function ( data, type, row ) {
+                    return "<a href='"+data+"' target='_blank' class='text-danger'>"+data+"</a>";
+                },
+                "targets": 2,
+            },
+            {
+                "render": function ( data, type, row ) {
+                    return data + row['matcher_name'];
+                },
+                "targets": 3,
+            },
+        ],
+        drawCallback: function () {
+            $('.t-dot').tooltip({ template: '<div class="tooltip status" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>' })
+            $('.dataTables_wrapper table').removeClass('table-striped');
+        }
+    });
+});
+
+
+// span values function will seperate the values by comma and put badge around it
+function span_values(data, color)
+{
+    var badge = "<span class='badge badge-pill badge-"+color+" m-1'>";
+    var data_with_span ="";
+    data.split(/\s*,\s*/).forEach(function(split_vals) {
+        data_with_span+=badge + split_vals + "</span>";
+    });
+    return data_with_span;
+}
+</script>
+{% endblock page_level_script %}
diff --git a/startScan/urls.py b/startScan/urls.py
index 9b8d71679..087583e58 100644
--- a/startScan/urls.py
+++ b/startScan/urls.py
@@ -15,6 +15,14 @@ urlpatterns = [
         'detail/<int:id>',
         views.detail_scan,
         name='detail_scan'),
+    path(
+        'detail/vuln/<int:id>',
+        views.detail_vuln_scan,
+        name='detail_vuln_scan'),
+    path(
+        'detail/endpoint/<int:id>',
+        views.detail_endpoint_scan,
+        name='detail_endpoint_scan'),
     path(
         'start/<int:host_id>',
         views.start_scan_ui,
diff --git a/startScan/views.py b/startScan/views.py
index 92a9dcfa5..aa36e0a01 100644
--- a/startScan/views.py
+++ b/startScan/views.py
@@ -67,6 +67,18 @@ def detail_scan(request, id):
     return render(request, 'startScan/detail_scan.html', context)
 
 
+def detail_vuln_scan(request, id):
+    history = get_object_or_404(ScanHistory, id=id)
+    context = {'scan_history_id': id, 'history': history}
+    return render(request, 'startScan/detail_vuln_scan.html', context)
+
+
+def detail_endpoint_scan(request, id):
+    history = get_object_or_404(ScanHistory, id=id)
+    context = {'scan_history_id': id, 'history': history}
+    return render(request, 'startScan/detail_endpoint_scan.html', context)
+
+
 def start_scan_ui(request, host_id):
     domain = get_object_or_404(Domain, id=host_id)
     if request.method == "POST":