diff --git a/instancehandler/template/instance_list.html b/instancehandler/template/instance_list.html
index 3b8ffcf..de47e62 100644
--- a/instancehandler/template/instance_list.html
+++ b/instancehandler/template/instance_list.html
@@ -75,9 +75,174 @@
     <script src="/static/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
 
     <script>
-    $(document).ready( function () {
-        $('#instances_table').DataTable();
-    } );
+        var instance_type = '{{ type }}';
+        var row_builder = {
+            'ns': [
+                {
+                    "render": function (data, type, row) {
+                        return row["short-name"];
+                    },
+                    "targets": 0
+                },
+                {
+                    "render": function (data, type, row) {
+                        return row["_id"];
+                    },
+                    "targets": 1
+                },
+                {
+                    "render": function (data, type, row) {
+                        return row["nsd-name-ref"];
+                    },
+                    "targets": 2
+                },
+                {
+                 //   "width": "5%",
+                    "render": function (data, type, row) {
+                        if(row["operational-status"] === 'failed')
+                           return '<span class="label label-danger">'+ row["operational-status"] +'</span>';
+                        if(row["operational-status"] === 'init')
+                           return '<span class="label label-warning">'+ row["operational-status"] +'</span>';
+                        if(row["operational-status"] === 'running')
+                           return '<span class="label label-success">'+ row["operational-status"] +'</span>';
+                        return  ''+row["operational-status"]+'';
+                    },
+                    "targets": 3
+                },
+                {
+                //    "width": "5%",
+                    "render": function (data, type, row) {
+                         if(row["config-status"] === 'failed')
+                           return '<span class="label label-danger">'+ row["config-status"] +'</span>';
+                        if(row["config-status"] === 'init')
+                           return '<span class="label label-warning">'+ row["config-status"] +'</span>';
+                        if(row["config-status"] === 'running')
+                           return '<span class="label label-success">'+ row["config-status"] +'</span>';
+                        if(row["config-status"] === 'configured')
+                           return '<span class="label label-success">'+ row["config-status"] +'</span>';
+                        return  ''+row["operational-status"]+'';
+                    },
+                    "targets": 4
+                },
+                {
+                   // "className": "ellipsis",
+                    "render": function (data, type, row) {
+                        return row["detailed-status"];
+                    },
+                    "targets": 5
+                },{
+                   //  "width": "10%",
+                    "render": function (data, type, row) {
+                        return '<div class="btn-group">\n' +
+                            ' <button type="button" class="btn btn-default"\n' +
+                            '         onclick="javascript:showInstanceDetails(\''+instance_type+'\', \''+row["_id"]+'\')"\n' +
+                            '         data-toggle="tooltip" data-placement="top" data-container="body" title="Show Info">\n' +
+                            '     <i class="fa fa-info"></i>\n' +
+                            ' </button>\n' +
+                            ' <button type="button" class="btn btn-default"\n' +
+                            '         onclick="javascript:deleteNs(\''+ row["short-name"] +'\', \''+row["_id"]+'\')"\n' +
+                            '         data-toggle="tooltip" data-placement="top" data-container="body" title="Delete"><i\n' +
+                            '         class="far fa-trash-alt"></i></button>\n' +
+                            ' <button type="button" class="btn btn-default dropdown-toggle"\n' +
+                            '         data-toggle="dropdown" aria-expanded="false">Actions\n' +
+                            '     <span class="fa fa-caret-down"></span></button>\n' +
+                            ' <ul class="dropdown-menu">\n' +
+                            '     <li><a href="#"\n' +
+                            '            onclick="javascript:performAction(\''+ row["short-name"] +'\', \''+row["_id"]+'\')">\n' +
+                            '         <i class="fa fa-magic"></i> Exec NS Primitive</a></li>\n' +
+                            '     <li>\n' +
+                            '         <a href="/instances/ns/' +row["_id"] +'/operation">\n' +
+                            '             <i class="fa fa-list"></i> Active operations</a></li>\n' +
+                            '     <li class="divider"></li>\n' +
+                            '     <li><a href="#"\n' +
+                            '            onclick="javascript:newAlarmNs(\''+ row["short-name"] +'\', \''+row["_id"]+'\')">\n' +
+                            '         <i class="far fa-bell"></i> New Alarm</a></li>\n' +
+                            '     <li><a href="#"\n' +
+                            '            onclick="javascript:exportMetricNs(\''+ row["short-name"] +'\', \''+row["_id"]+ '\')">\n' +
+                            '         <i class="far fa-chart-bar"></i> Export metric</a></li>\n' +
+                            '     <li class="divider"></li>\n' +
+                            '     <li>\n' +
+                            '         <a href="javascript:deleteNs(\''+ row["short-name"] +'\', \''+row["_id"]+'\', true)">\n' +
+                            '             <i class="far fa-trash-alt" style="color:red" ></i> Force delete</a></li>\n' +
+                            ' </ul>\n' +
+                            '</div>';
+                    },
+                    "targets": 5
+                },
+
+            ],
+            'vnf': [ {
+                    "render": function (data, type, row) {
+                        return row["_id"];
+                    },
+                    "targets": 0
+                },
+                {
+                    "render": function (data, type, row) {
+                        return '<a href="javascript:openDescriptorView(\'vnfd\', \'' + row["_id"]+'\')"> ' + row["vnfd-ref"] +' </a>';
+                    },
+                    "targets": 1
+                },
+                {
+                    "render": function (data, type, row) {
+                        return row["member-vnf-index-ref"];
+                    },
+                    "targets": 2
+                },
+                {
+                    "render": function (data, type, row) {
+                        return row["nsr-id-ref"];
+                    },
+                    "targets": 3
+                },
+                {
+                    "render": function (data, type, row) {
+                        return moment.unix(row['created-time']).format('YYYY-MM-DD hh:mm:ss a');
+                    },
+                    "targets": 4
+                }, 
+                {
+                    "render": function (data, type, row) {
+                        return '<div class="btn-group">\n' +
+                            '     <button type="button" class="btn btn-default"\n' +
+                            '             onclick="javascript:showInstanceDetails(\''+instance_type+'\', \''+row["_id"]+'\')"\n' +
+                            '             data-toggle="tooltip" data-placement="top" data-container="body" title="Show Info">\n' +
+                            '         <i class="fa fa-info"></i>\n' +
+                            '     </button>\n' +
+                            ' </div>';
+                    },
+                    "targets": 5
+                },
+            ]
+        };
+        $(document).ready(function () {
+            var table = $('#instances_table').DataTable({
+                responsive: true,
+                "ajax": {
+                    "url": "/instances/" + instance_type + "/list/",
+                    "dataSrc": function (json) {
+                        return json.instances;
+                    },
+                    statusCode: {
+                        401: function(){
+                            console.log("no auth");
+                            moveToLogin(window.location.pathname);
+                        }
+                    },
+                    "error": function(hxr, error, thrown){
+                        console.log(error);
+                    }
+
+                },
+                "columns": row_builder[instance_type]
+            });
+
+
+            setInterval(function () {
+                table.ajax.reload();
+            }, 10000);
+        });
+
     </script>
 
 {% endblock %}
diff --git a/instancehandler/template/instance_list_ns.html b/instancehandler/template/instance_list_ns.html
index 01bdc10..9a50881 100644
--- a/instancehandler/template/instance_list_ns.html
+++ b/instancehandler/template/instance_list_ns.html
@@ -21,7 +21,7 @@
             {{alert_error}}
         </div>
     {% endif %}
-        <table id="instances_table" class="table table-bordered table-striped">
+        <table id="instances_table" class="table table-bordered table-striped responsive" style="width:100%">
             <thead>
             <tr>
                 <th>Name</th>
@@ -34,85 +34,7 @@
             </tr>
             </thead>
             <tbody>
-            {% for i in instances %}
-                <tr>
-                    <td>{{ i|get:"short-name" }}</td>
-                    <td>{{ i|get:"_id" }}</td>
 
-                    <td>{{ i|get:"nsd-name-ref" }}</td>
-
-                    {% if i|get:"operational-status" == 'failed' %}
-                        <td><span class="label label-danger">{{ i|get:"operational-status" }}</span></td>
-                    {% elif i|get:"operational-status" == 'init' %}
-                        <td><span class="label label-warning">{{ i|get:"operational-status" }}</span></td>
-                    {% elif i|get:"operational-status" == 'running' %}
-                        <td><span class="label label-success">{{ i|get:"operational-status" }}</span></td>
-                    {% else %}
-                        <td>{{ i|get:"operational-status" }}</td>
-                    {% endif %}
-                    {% if i|get:"config-status" == 'failed' %}
-                        <td><span class="label label-danger">{{ i|get:"config-status" }}</span></td>
-                    {% elif i|get:"config-status" == 'init' %}
-                        <td><span class="label label-warning">{{ i|get:"config-status" }}</span></td>
-                    {% elif i|get:"config-status" == 'running' %}
-                        <td><span class="label label-success">{{ i|get:"config-status" }}</span></td>
-                    {% elif i|get:"config-status" == 'configured' %}
-                        <td><span class="label label-success">{{ i|get:"config-status" }}</span></td>
-                    {% else %}
-                        <td>{{ i|get:"config-status" }}</td>
-                    {% endif %}
-                    <td class="ellipsis" data-text="{{ i|get:"detailed-status" }}">{{ i|get:"detailed-status" }}</td>
-                    <td>
-                        <div class="btn-group">
-                            <button type="button" class="btn btn-default"
-                                    onclick="javascript:showInstanceDetails('{% url 'instances:show' instance_id=i|get:'_id'  type=type %}')"
-                                    data-toggle="tooltip" data-placement="top" data-container="body" title="Show Info">
-                                <i class="fa fa-info"></i>
-                            </button>
-                            <!--
-                            <button type="button" class="btn btn-default"
-                                    onclick="javascript:showInstanceTopology('{% url 'instances:show_topology' instance_id=i|get:'_id'  type=type %}')"
-                                    data-toggle="tooltip" data-placement="top" data-container="body" title="Show Topology">
-                                <i class="fa fa-sitemap"></i>
-                            </button>
-                            -->
-
-                            <button type="button" class="btn btn-default"
-                                    onclick="javascript:deleteNs('{% url 'instances:delete' instance_id=i|get:'_id'  type=type %}')"
-                                    data-toggle="tooltip" data-placement="top" data-container="body" title="Delete"><i
-                                    class="far fa-trash-alt"></i></button>
-
-                            <button type="button" class="btn btn-default dropdown-toggle"
-                                    data-toggle="dropdown" aria-expanded="false">Actions
-                                <span class="fa fa-caret-down"></span></button>
-                            <ul class="dropdown-menu">
-                                <li><a href="#"
-                                       onclick="javascript:performAction('{% url 'instances:action' instance_id=i|get:'_id'  type=type %}')">
-                                    <i class="fa fa-magic"></i> Exec NS Primitive</a></li>
-                                <li>
-                                    <a href="{% url 'instances:ns_operations'  type=type instance_id=i|get:'_id' %}">
-                                        <i class="fa fa-list"></i> Active operations</a></li>
-                                <li class="divider"></li>
-                                <li><a href="#"
-                                       onclick="javascript:newAlarmNs('{% url 'instances:ns_create_alarm' instance_id=i|get:'_id'  type=type %}')">
-                                    <i class="far fa-bell"></i> New Alarm</a></li>
-                                <li><a href="#"
-                                       onclick="javascript:exportMetricNs('{% url 'instances:ns_export_metric' instance_id=i|get:'_id'  type=type %}')">
-                                    <i class="far fa-chart-bar"></i> Export metric</a></li>
-                                <li class="divider"></li>
-                                <li>
-                                    <a href="javascript:deleteNs('{% url 'instances:delete' instance_id=i|get:'_id'  type=type %}', true)">
-                                        <i class="far fa-trash-alt" style="color:red" ></i> Force delete</a></li>
-                            </ul>
-
-
-                        </div>
-
-                    </td>
-
-
-                </tr>
-            {% endfor %}
             </tbody>
         </table>
     </div>
diff --git a/instancehandler/template/instance_list_vnf.html b/instancehandler/template/instance_list_vnf.html
index 5f13f2b..d290ad1 100644
--- a/instancehandler/template/instance_list_vnf.html
+++ b/instancehandler/template/instance_list_vnf.html
@@ -13,7 +13,7 @@
 
     </div>
     <div class="box-body">
-        <table id="instances_table" class="table table-bordered table-striped">
+        <table id="instances_table" class="table table-bordered table-striped responsive" style="width:100%">
             <thead>
             <tr>
                 <th>Identifier</th>
@@ -25,31 +25,7 @@
             </tr>
             </thead>
             <tbody>
-            {% for i in instances %}
-                <tr>
 
-                    <td>{{ i|get:"_id" }}</td>
-                    <td><a href="javascript:openDescriptorView('vnfd', '{{ i|get:"vnfd-id" }}')"> {{ i|get:"vnfd-ref" }}</a></td>
-                    <td>{{ i|get:"member-vnf-index-ref" }}</td>
-                    <td class="ellipsis" data-text="{{ i|get:"nsr-id-ref" }}">{{ i|get:"nsr-id-ref" }}</td>
-                    <td >{{ i|get:"created-time"|get_date }}</td>
-
-                    <td>
-                        <div class="btn-group">
-                            <button type="button" class="btn btn-default"
-                                    onclick="javascript:showInstanceDetails('{% url 'instances:show' instance_id=i|get:'_id'  type=type %}')"
-                                    data-toggle="tooltip" data-placement="top" data-container="body" title="Show Info">
-                                <i class="fa fa-info"></i>
-                            </button>
-
-
-                        </div>
-
-                    </td>
-
-
-                </tr>
-            {% endfor %}
             </tbody>
         </table>
     </div>
diff --git a/instancehandler/template/instance_operations_list.html b/instancehandler/template/instance_operations_list.html
index 55c097b..7e84658 100644
--- a/instancehandler/template/instance_operations_list.html
+++ b/instancehandler/template/instance_operations_list.html
@@ -14,6 +14,8 @@
     <link rel="stylesheet" href="/static/bower_components/codemirror/addon/dialog/dialog.css">
     <link rel="stylesheet" href="/static/bower_components/codemirror/addon/display/fullscreen.css">
     <link rel="stylesheet" href="/static/bower_components/select2/dist/css/select2.min.css">
+        <link rel="stylesheet" href="/static/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
+
 {% endblock %}
 {% block title_header_big %}
     {{ block.super }}
@@ -26,6 +28,7 @@
 {% block breadcrumb_body %}
     {{ block.super }}
     <li><a href="{% url 'instances:list'  type=type %}">Instances</a></li>
+    <li><a href="#">Operations</a></li>
 {% endblock %}
 
 {% block content_body %}
@@ -41,7 +44,7 @@
 
                 </div>
                 <div class="box-body">
-                    <table id="instances_table" class="table table-bordered table-striped">
+                    <table id="operations_table" class="table table-bordered table-striped">
                         <thead>
                         <tr>
                             <th>Id</th>
@@ -53,40 +56,7 @@
                         </tr>
                         </thead>
                         <tbody>
-                        {% for i in operations %}
-                            <tr>
 
-                                <td>{{ i|get:"_id" }}</td>
-                                <td>{{ i|get:"lcmOperationType" }}</td>
-
-                                {% if i|get:"operationState" == 'FAILED' %}
-                                    <td><span class="label label-danger">{{ i|get:"operationState"  }}</span> </td>
-                                {% elif i|get:"operationState" == 'PROCESSING' %}
-                                     <td><span class="label label-warning">{{ i|get:"operationState"  }}</span> </td>
-                                {% elif i|get:"operationState" == 'COMPLETED' %}
-                                     <td><span class="label label-success">{{ i|get:"operationState"  }}</span> </td>
-                                {% else  %}
-                                    <td>{{ i|get:"operationState"  }}</td>
-                                {% endif %}
-
-                                <td >{{ i.startTime|get_date }}</td>
-                                <td >{{ i.statusEnteredTime|get_date }}</td>
-                                <td>
-                                    <div class="btn-group">
-                                        <button type="button" class="btn btn-default"
-                                                onclick="javascript:showOperationDetails('{% url 'instances:ns_operation' op_id=i|get:'_id' instance_id=i|get:'nsInstanceId'  type=type %}')"
-                                                data-toggle="tooltip" data-placement="top" data-container="body" title="More Info"><i
-                                                class="fa fa-info"></i>
-                                        </button>
-
-
-                                    </div>
-
-                                </td>
-
-
-                            </tr>
-                        {% endfor %}
                         </tbody>
                     </table>
                 </div>
@@ -114,10 +84,96 @@
     <script src="/static/bower_components/codemirror/addon/edit/closebrackets.js"></script>
     <script src="/static/bower_components/codemirror/addon/display/fullscreen.js"></script>
     <script src="/static/bower_components/codemirror/keymap/sublime.js"></script>
+    <script src="/static/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
+    <script src="/static/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
     <script src="/static/src/instancehandler/instance_operations_list.js"></script>
 
+    <script>
+    var instance_type = '{{ type }}';
+    var instance_id = '{{ instance_id }}';
+    $(document).ready(function () {
+            var table = $('#operations_table').DataTable({
+                responsive: true,
+                "ajax": {
+                    "url": "/instances/" + instance_type + "/" +instance_id + "/operation",
+                    "dataSrc": function (json) {
+                        return json['operations'];
+                    },
+                    statusCode: {
+                        401: function(){
+                            console.log("no auth");
+                            moveToLogin(window.location.pathname);
+                        }
+                    },
+                    "error": function(hxr, error, thrown){
+                        console.log(error);
+                    }
+
+                },
+                "columns": [
+                    {
+                    "render": function (data, type, row) {
+                        return row["_id"];
+                    },
+                    "targets": 0
+                },
+                {
+                    "render": function (data, type, row) {
+                        return row['lcmOperationType'];
+                    },
+                    "targets": 1
+                },
+                {
+                    "render": function (data, type, row) {
+
+                        if(row["operationState"] === 'FAILED')
+                           return '<span class="label label-danger">'+ row["operationState"] +'</span>';
+                        else if(row["operationState"] === 'PROCESSING')
+                           return '<span class="label label-warning">'+ row["operationState"] +'</span>';
+                        else if(row["operationState"] === 'COMPLETED')
+                           return '<span class="label label-success">'+ row["operationState"] +'</span>';
+                        else
+                         return row["operationState"];
+                    },
+                    "targets": 2
+                },
+                {
+                    "render": function (data, type, row) {
+                        return row["startTime"];
+                    },
+                    "targets": 3
+                },
+                {
+                    "render": function (data, type, row) {
+                        return row["statusEnteredTime"];
+                    },
+                    "targets": 4
+                },
+                {
+                    "render": function (data, type, row) {
+                        return '<div class="btn-group">\n' +
+                            '     <button type="button" class="btn btn-default"\n' +
+                            '             onclick="javascript:showOperationDetails(\''+row["nsInstanceId"]+'\', \''+row["_id"]+'\')"\n' +
+                            '             data-toggle="tooltip" data-placement="top" data-container="body" title="Show Info">\n' +
+                            '         <i class="fa fa-info"></i>\n' +
+                            '     </button>\n' +
+                            ' </div>';
+                    },
+                    "targets": 5
+                }
+                ]
+            });
+
+
+            setInterval(function () {
+                table.ajax.reload();
+            }, 10000);
+        });
+
+    </script>
+
 {% endblock %}
 
 {% block footer %}
     {% include "footer.html" %}
-{% endblock %}
+{% endblock %}
\ No newline at end of file
diff --git a/instancehandler/views.py b/instancehandler/views.py
index 212fbbf..d80d18d 100644
--- a/instancehandler/views.py
+++ b/instancehandler/views.py
@@ -15,33 +15,39 @@
 #
 
 from django.shortcuts import render, redirect
-from django.contrib.auth.decorators import login_required
+#from django.contrib.auth.decorators import login_required
 from django.http import HttpResponse, JsonResponse
 import yaml
 import json
 import logging
 from lib.osm.osmclient.clientv2 import Client
 import authosm.utils as osmutils
+from sf_t3d.decorators import login_required
 
 logging.basicConfig(level=logging.DEBUG)
 log = logging.getLogger('instancehandler/view.py')
 
+
 @login_required
 def list(request, type=None):
+
     user = osmutils.get_user(request)
     project_id = user.project_id
     client = Client()
+    result = {'type': type, 'project_id': project_id}
+    if "OSM_ERROR" in request.session:
+        result['alert_error'] = request.session["OSM_ERROR"]
+        del request.session["OSM_ERROR"]
+    raw_content_types = request.META.get('HTTP_ACCEPT', '*/*').split(',')
+    if 'application/json' not in raw_content_types:
+        return __response_handler(request, result, 'instance_list.html')
+    instance_list = None
     if type == 'ns':
         instance_list = client.ns_list(user.get_token())
     elif type == 'vnf':
         instance_list = client.vnf_list(user.get_token())
 
-    result = {'instances': instance_list['data'] if instance_list and instance_list['error'] is False else [],
-              'type': type, 'project_id': project_id}
-
-    if "OSM_ERROR" in request.session:
-        result['alert_error'] = request.session["OSM_ERROR"]
-        del request.session["OSM_ERROR"]
+    result['instances'] = instance_list['data'] if instance_list and instance_list['error'] is False else []
 
     return __response_handler(request, result, 'instance_list.html')
 
@@ -96,12 +102,16 @@
 def ns_operations(request, instance_id=None, type=None):
     user = osmutils.get_user(request)
     project_id = user.project_id
+
+    result = {'type': 'ns', 'project_id': project_id, 'instance_id': instance_id}
+    raw_content_types = request.META.get('HTTP_ACCEPT', '*/*').split(',')
+    if 'application/json' not in raw_content_types:
+        return __response_handler(request, result, 'instance_operations_list.html')
     client = Client()
     op_list = client.ns_op_list(user.get_token(), instance_id)
-    return __response_handler(request,
-                              {'operations': op_list['data'] if op_list and op_list['error'] is False else [],
-                               'type': 'ns', 'project_id': project_id}, 'instance_operations_list.html')
+    result['operations'] = op_list['data'] if op_list and op_list['error'] is False else []
 
+    return __response_handler(request, result, 'instance_operations_list.html')
 
 @login_required
 def ns_operation(request, op_id, instance_id=None, type=None):