diff --git a/FlowAnalyserMain.py b/FlowAnalyserMain.py
index 42f6d52..f35ba0e 100644
--- a/FlowAnalyserMain.py
+++ b/FlowAnalyserMain.py
@@ -32,17 +32,20 @@ def create_app(test_config=None):
         return FlowTest.test()
     @FlowAnalyserMain.route('/test')
     def test():
+        html=''
         return render_template('index.html', test=html)
+    
     @FlowAnalyserMain.route('/test2')
-    def test():
-        return render_template('index2.html', test2=data2)
+    def test2():
+        with Session(engine) as session:
+            sysjobs=(Sysjobs.getNattensKoersel(session))
+            data2=json.dumps([str(b) for b in sysjobs])
+            
+            return render_template('index2.html', test2=sysjobs)
     if __name__ == '__main__':
         FlowAnalyserMain.run()
     return FlowAnalyserMain
 
 engine=inn.getEngine("msdb")
-with Session(engine) as session:
-    sysjobs=(Sysjobs.getNattensKoersel(session))
-    html=''
-    data2=[b for b in sysjobs]
+
 FlowAnalyserMain=create_app()
diff --git a/__pycache__/FlowAnalyserMain.cpython-311.pyc b/__pycache__/FlowAnalyserMain.cpython-311.pyc
index c6bc12f..10a4268 100644
Binary files a/__pycache__/FlowAnalyserMain.cpython-311.pyc and b/__pycache__/FlowAnalyserMain.cpython-311.pyc differ
diff --git a/__pycache__/sysjobs.cpython-311.pyc b/__pycache__/sysjobs.cpython-311.pyc
index db1897f..b3dd630 100644
Binary files a/__pycache__/sysjobs.cpython-311.pyc and b/__pycache__/sysjobs.cpython-311.pyc differ
diff --git a/sysjobs.py b/sysjobs.py
index 171b4c0..1efb471 100644
--- a/sysjobs.py
+++ b/sysjobs.py
@@ -60,7 +60,7 @@ class Sysjobs(Base):
     def getNattensKoersel(session) -> List['Sysjobs']:
         natStat=(datetime.today()-timedelta(days=1)).replace(hour=20,minute=0,second=0,microsecond=0) 
         resReturn: List['Sysjobs'] = list()
-        stmt = Select(Sysjobs,Sysjobhistory).join(DataflowManagement_JobListe).join(Sysjobhistory).where(Sysjobhistory.step_id==0).where(DataflowManagement_JobListe.Aktiv==1).where(or_(and_(Sysjobhistory.run_date>=int((natStat.strftime('%Y%m%d'))),(Sysjobhistory.run_time>=int((natStat.strftime('%H%M%S'))))),Sysjobhistory.run_date>int((datetime.today().strftime('%Y%m%d'))))).distinct()
+        stmt = Select(Sysjobs,Sysjobhistory).join(DataflowManagement_JobListe).join(Sysjobhistory).where(Sysjobhistory.step_id==0).where(DataflowManagement_JobListe.Aktiv==1).where(or_(and_(Sysjobhistory.run_date>=int((natStat.strftime('%Y%m%d'))),(Sysjobhistory.run_time>=int((natStat.strftime('%H%M%S'))))),Sysjobhistory.run_date>=int((datetime.today().strftime('%Y%m%d'))))).distinct()
         row : Sysjobs
         res = session.execute(stmt).all()
      #   resReturn=[x[0] for x in res]
diff --git a/templates/index2.html b/templates/index2.html
index c8dfbb8..5ba0583 100644
--- a/templates/index2.html
+++ b/templates/index2.html
@@ -3,12 +3,46 @@
 <head>
 <title>Gantt Chart Example 1</title>
 <link type="text/css" href="http://mbostock.github.io/d3/style.css" rel="stylesheet" />
-<link type="text/css" href="example.css" rel="stylesheet" />
+<link type="text/css" href="{{ url_for('static', filename= 'css/style.css') }}" rel="stylesheet" />
 </head>
 <body>
        <a id="forkme_banner" href="http://dk8996.github.io/Gantt-Chart/" target="_blank">View on GitHub</a>
        <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
 	<script type="text/javascript" src="http://static.mentful.com/gantt-chart-d3v2.js"></script>
-	<script </script>
+	<script>var tasks = [];
+        {% for b in test2 %}
+            tasks.push({"startDate":new Date("{{ b[1].getStartTime() }}"),"endDate":new Date("{{ b[1].getEndTime() }}"),"taskName":"{{ b[0].name }}","status":"SUCCEEDED"})
+        {% endfor %}
+        
+        
+        var taskStatus = {
+            "SUCCEEDED" : "bar",
+            "FAILED" : "bar-failed",
+            "RUNNING" : "bar-running",
+            "KILLED" : "bar-killed"
+        };
+        
+        var taskNames = [ "D Job", "P Job", "E Job", "A Job", "N Job" ];
+
+        taskNames=[]
+        {% for a in test2 %}
+            taskNames.push("{{ a[0].name }}" )
+        {% endfor %}
+        
+
+        tasks.sort(function(a, b) {
+            return a.endDate - b.endDate;
+        });
+        var maxDate = tasks[tasks.length - 1].endDate;
+        tasks.sort(function(a, b) {
+            return a.startDate - b.startDate;
+        });
+        var minDate = tasks[0].startDate;
+        
+        var format = "%H:%M";
+        
+        var gantt = d3.gantt().taskTypes(taskNames).taskStatus(taskStatus).tickFormat(format);
+        gantt(tasks);
+         </script>
 </body>
 </html>
\ No newline at end of file
