diff --git a/.gitignore b/.gitignore
index 466bc61..955fd98 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,64 +1,66 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-
-# Runtime data
-pids
-*.pid
-*.seed
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (http://nodejs.org/api/addons.html)
-#build/Release
-release-builds
-
-# Dependency directories
-node_modules
-jspm_packages
-
-# Optional npm cache directory
-.npm
-
-# Optional REPL history
-.node_repl_history
-dist/app*
-dist/make*
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-node_modules
-
-# testing
-/coverage
-
-# production
-/build
-build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-build/
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+#build/Release
+release-builds
+
+# Dependency directories
+node_modules
+jspm_packages
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history
+dist/app*
+dist/make*
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+node_modules
+
+# testing
+/coverage
+
+# production
+/build
+build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+build/
+
+.vscode/
diff --git a/public/main.css b/public/main.css
index 5531f9a..bfd1b97 100644
--- a/public/main.css
+++ b/public/main.css
@@ -948,3 +948,39 @@ button.success:hover {
 #settings-frame .form-group input {
   width: 100%;
 }
+#tasks-frame {
+  display: flex;
+}
+#tasks-frame #tasks {
+  width: 25em;
+}
+#tasks-frame #dates {
+  width: 8em;
+}
+#tasks-frame #info {
+  width: 100%;
+}
+#notes-frame {
+  min-height: 100vh;
+  display: flex;
+}
+#notes-frame #notes-list {
+  width: 200px;
+  border-right: 1px solid #454545;
+}
+#notes-frame #notes-list .note.heigh {
+  border-color: #DD0000;
+}
+#notes-frame #notes-list .note.normal {
+  border-color: #DDDD00;
+}
+#notes-frame #notes-list .note.low {
+  border-color: #00DD55;
+}
+#notes-frame #notes-edit {
+  padding: 10px;
+}
+#notes-frame #notes-edit textarea {
+  width: calc(100vw - 450px);
+  height: 300px;
+}
diff --git a/public/manifest.json b/public/manifest.json
index ef19ec2..0db1b1e 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -1,15 +1,15 @@
-{
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    }
-  ],
-  "start_url": "./index.html",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}
+{
+  "short_name": "WBM",
+  "name": "Wochenbericht Manager",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/src/jsx/static/debug.jsx b/src/jsx/static/debug.jsx
index 27464ec..cd2dec4 100644
--- a/src/jsx/static/debug.jsx
+++ b/src/jsx/static/debug.jsx
@@ -1,6 +1,6 @@
-
-export class Log{
-    static debug(txt){
-        //console.debug('%cDEBUG: '+txt, 'background: #222; color: #bada55');
-    }
+
+export class Log{
+    static debug(txt){
+       // console.debug('%cDEBUG: '+txt, 'background: #222; color: #bada55');
+    }
 }
\ No newline at end of file
diff --git a/src/jsx/static/migration-sc/0-1.jsx b/src/jsx/static/migration-sc/0-1.jsx
new file mode 100644
index 0000000..8ed5751
--- /dev/null
+++ b/src/jsx/static/migration-sc/0-1.jsx
@@ -0,0 +1,75 @@
+import {DB} from './../storage'
+
+export class Mig_0_1{
+    constructor(){
+        var res = DB.cdb.exec("SELECT * FROM settings WHERE ke='version'");
+        if(res.length == 0){
+            console.log("UPDATE STORAGE")
+            this.mig_tasks();
+        }
+    }
+    mig_tasks(){
+        // TODO: MIGRATION TOOL FOR SAVE VERSION 1
+        DB.cdb.exec("CREATE TABLE IF NOT EXISTS days_have_tasks(day_id INTEGER ,task_id INTEGER);");
+
+
+        var res = DB.cdb.exec("SELECT * FROM days")[0].values;
+        console.log(res)
+        if(res.length>0){
+            for(var i = 0;i<res.length;i++){
+                // 5 = taskList
+                //console.log(res[i][5])
+                var tasks_for_day = res[i][5].split(',');
+                // 0 = Tag ID
+                var day_id = res[i][0];
+                for(var j = 0;j<tasks_for_day.length;j++){
+                    console.log(tasks_for_day[j])
+                    var sql2 = "INSERT INTO days_have_tasks VALUES ( "+day_id+","+tasks_for_day[j]+");";
+                    //console.log(sql2)
+                    DB.cdb.exec(sql2);
+                }
+            }
+        }
+        this.deleteOldTaskColumn();
+    }
+    deleteOldTaskColumn(){
+        //var sql = `ALTER TABLE "days" DROP COLUMN "taskList";`
+        var sql = `
+PRAGMA foreign_keys=off;
+BEGIN TRANSACTION;
+CREATE TABLE IF NOT EXISTS new_days( 
+    id INTEGER PRIMARY KEY AUTOINCREMENT,
+    date DATETIME ,
+    startTime DATETIME ,
+    breakTime INTEGER ,
+    endTime DATETIME
+);
+INSERT INTO new_days(id,date,startTime,breakTime,endTime)
+SELECT id,date,startTime,breakTime,endTime
+FROM days;
+DROP TABLE days;
+ALTER TABLE new_days RENAME TO days; 
+COMMIT;
+PRAGMA foreign_keys=on;
+        `
+        
+        DB.cdb.exec(sql);
+        this.addNotesTable();
+    }
+    addNotesTable(){
+        var sql = `CREATE TABLE notes (
+            id INTEGER PRIMARY KEY AUTOINCREMENT,
+            date DATETIME ,
+            title TEXT,
+            text TEXT,
+            priority TEXT
+        );`
+        DB.cdb.exec(sql);
+        this.updateVersion();
+    }
+    updateVersion(){
+        
+        var sql = `INSERT INTO settings (ke,val) VALUES ("version","2")`
+        DB.cdb.exec(sql);
+    }
+}
\ No newline at end of file
diff --git a/src/jsx/static/migration.jsx b/src/jsx/static/migration.jsx
new file mode 100644
index 0000000..c462000
--- /dev/null
+++ b/src/jsx/static/migration.jsx
@@ -0,0 +1,8 @@
+
+export class Migration {
+    constructor() {
+        
+    }
+    
+
+}
\ No newline at end of file
diff --git a/src/jsx/static/storage.jsx b/src/jsx/static/storage.jsx
index 06c4f18..04dbc69 100644
--- a/src/jsx/static/storage.jsx
+++ b/src/jsx/static/storage.jsx
@@ -1,243 +1,398 @@
-import {Log} from './debug';
-
-const SQL    = require('sql.js')
-
-
-export class DB{
-    static cdb;
-    static loaded = false;
-    static loadedCB = [];
-    static newDB(){
-        Log.debug('create new database');
-        DB.cdb = new SQL.Database();
-        DB.cdb.exec(
-        `CREATE TABLE settings (
-            id INTEGER PRIMARY KEY AUTOINCREMENT,
-            ke TEXT not null,
-            val TEXT not null  
-        ); 
-        CREATE TABLE days (
-            id INTEGER PRIMARY KEY AUTOINCREMENT,
-            date DATETIME ,
-            startTime DATETIME ,
-            breakTime INTEGER ,
-            endTime DATETIME ,
-            taskList TEXT 
-        );
-        CREATE TABLE tasks (
-            id INTEGER PRIMARY KEY AUTOINCREMENT,
-            taskName TEXT not NULL
-        );
-        INSERT INTO settings (ke,val)
-        VALUES ('name','Max');
-        INSERT INTO settings (ke,val)
-        VALUES ('start','2018-08-01');
-        `)
-        DB.loaded = true;
-        DB.__load()
-        DB.storeLocalStorage()
-    }
-    static storeLocalStorage(){
-        var data = DB.cdb.export(); 
-        var buffer = new Buffer(data);
-        var blob = new Blob([buffer]);
-        var reader = new FileReader();
-        reader.onload = function() {
-            localStorage.setItem('storage',reader.result)
-        }
-        reader.readAsBinaryString(blob);
-    }
-    static loadLocalStorage(){
-        var i, l, d, array;
-        array = new Uint8Array(localStorage.getItem('storage'));
-        for (var i = 0; i < l; i++){
-            array[i] = d.charCodeAt(i);
-        }
-        DB.loadDB(array);
-        DB.loaded = true;
-        DB.__load()
-    }
-    /**
-     * 
-     * @param {type:Uint8Array} file Uint8Array
-     */
-    static loadDB(file){
-        Log.debug('load database');
-
-        DB.cdb = new SQL.Database(file);
-        DB.storeLocalStorage()
-        DB.loaded = true;
-        DB.__load()
-        return "";
-    }
-    static __load(){
-        Log.debug('DB onload EVENT');
-        for(var l in DB.loadedCB){
-            DB.loadedCB[l]();
-        }
-    }
-    static onLoad(cb){
-        Log.debug('added DB onload EVENT');
-        DB.loadedCB.push(cb);
-    }
-
-    /**
-     * 
-     */
-    static exportDB(){
-        Log.debug('export database');
-        var data = DB.cdb.export(); 
-        var buffer = new Buffer(data);
-        console.log(buffer);
-        var blob = new Blob([buffer],{type:'application/x-sqlite3'});
-        console.log(blob);
-        console.log(window.URL.createObjectURL(blob));
-        var link = document.createElement('a');
-        link.href = window.URL.createObjectURL(blob);
-        var fileName = "wbm.sqlite";
-        link.download = fileName;
-        
-        document.body.appendChild(link);
-        link.click();
-        document.body.removeChild(link);
-        window.URL.revokeObjectURL(link); 
-
-    }
-
-
-    /**
-     * 
-     * @param {*} date 
-     */
-    static loadDate(date){
-        //var re = DB.cdb.exec("SELECT * FROM INFORMATION_SCHEMA.TABLES WHERE TABLE_TYPE='BASE TABLE'");
-        //console.log(re)
-        console.log(date)
-        Log.debug('load from date:'+date.getTime())
-        var sql = `SELECT * FROM days WHERE date=:date;`;
-        var stmt = DB.cdb.prepare(sql);
-        var res = stmt.getAsObject({":date":date.getTime()})
-        stmt.free();
-        Log.debug(JSON.stringify(res)); 
-
-        if(Object.keys(res).length === 0){
-            return {breakTime: 0, date: null,startTime:null, endTime: null, taskList:[]}
-        }else{
-            var tasks = res.taskList.split(',');
-            sql = `SELECT * FROM tasks WHERE id=:id`;
-            for ( var task in tasks){
-                stmt = DB.cdb.prepare(sql);
-                tasks[task] = stmt.getAsObject({":id":tasks[task]}).taskName;
-                stmt.free();
-            }
-            res.taskList = tasks;
-            return res;
-        }
-    }
-    static saveDate(args){
-        Log.debug('save date');
-        Log.debug(JSON.stringify(args))
-        var sql;
-        var stmt;
-        var res;
-        var tasks = args.taskList;
-        var taskss = []
-        console.log(tasks);
-        for(var t in tasks){
-            if(typeof tasks[t] === 'undefined'){
-                continue;
-            }
-            tasks[t] = tasks[t].trim();
-            sql = `SELECT * FROM tasks WHERE taskName=:task`;
-            stmt = DB.cdb.prepare(sql);
-            res = stmt.getAsObject({':task':tasks[t]});
-            stmt.free();
-            console.log(res);
-            if(Object.keys(res).length === 0){
-                sql = `INSERT INTO tasks(taskName) VALUES(:task);`;
-                stmt = DB.cdb.prepare(sql);
-                res = stmt.getAsObject(
-                    {
-                        ":task":tasks[t]
-                    }
-                )
-                stmt.free()
-                sql = `SELECT * FROM tasks WHERE taskName=:task`;
-                stmt = DB.cdb.prepare(sql);
-                res = stmt.getAsObject({':task':tasks[t]});
-                stmt.free();
-                console.log(res);
-            }
-            taskss[t]= res.id;
-
-        }
-        sql = `SELECT * FROM days WHERE date=:date;`;
-        stmt = DB.cdb.prepare(sql);
-        console.log(args);
-        res = stmt.getAsObject({":date":args.date})
-        stmt.free()
-
-        if(Object.keys(res).length === 0){
-            Log.debug('added new entry');
-            Log.debug(JSON.stringify(args))
-            sql = `INSERT INTO days(date,startTime,breakTime,endTime,taskList) VALUES(:date,:startTime,:breakTime,:endTime,:taskList);`;
-            stmt = DB.cdb.prepare(sql);
-            res = stmt.getAsObject(
-                {
-                    ":date":args.date,
-                    ":startTime":args.startTime,
-                    ":breakTime":args.breakTime,
-                    ":endTime":args.endTime,
-                    ":taskList":taskss.join()
-                }
-            )
-            stmt.free()
-        }else{
-            Log.debug('update entry');
-            Log.debug(JSON.stringify(args))
-            sql = `UPDATE days SET startTime=:startTime,breakTime=:breakTime,endTime=:endTime,taskList=:taskList WHERE date=:date;`;
-            stmt = DB.cdb.prepare(sql);
-            res = stmt.getAsObject(
-                {
-                    ":date":args.date,
-                    ":startTime":args.startTime,
-                    ":breakTime":args.breakTime,
-                    ":endTime":args.endTime,
-                    ":taskList":taskss.join()
-                }
-            )
-            Log.debug(res);
-            stmt.free()
-        }
-    }
-    static handleTasks(){
-
-    }
-
-
-
-    static loadSettings(key){
-        var sql = `SELECT * FROM settings WHERE ke=:key`;
-        var stmt = DB.cdb.prepare(sql);
-        var res = stmt.getAsObject({':key':key});
-        stmt.free();
-        return res;
-        
-    }
-    /**
-     * 
-     * @param {*} obj name: Name  ,  start: Date ( 2018-08-01 )
-     */
-    static saveSettings(obj){
-        var sql = `UPDATE settings SET val=:name WHERE ke="name"`;
-        var stmt = DB.cdb.prepare(sql);
-        stmt.getAsObject({':name':obj.name});
-        stmt.free();
-
-        sql = `UPDATE settings SET val=:start WHERE ke="start"`;
-        stmt = DB.cdb.prepare(sql);
-        stmt.getAsObject({':start':obj.start});
-        stmt.free();
-        return "";
-    }
+import {Log} from './debug';
+
+const SQL    = require('sql.js')
+
+
+export class DB{
+    static cdb;
+    static loaded = false;
+    static loadedCB = [];
+    static newDB(){
+        Log.debug('create new database');
+        DB.cdb = new SQL.Database();
+        DB.cdb.exec(
+        `CREATE TABLE settings (
+            id INTEGER PRIMARY KEY AUTOINCREMENT,
+            ke TEXT not null,
+            val TEXT not null  
+        ); 
+        CREATE TABLE days (
+            id INTEGER PRIMARY KEY AUTOINCREMENT,
+            date DATETIME ,
+            startTime DATETIME ,
+            breakTime INTEGER ,
+            endTime DATETIME
+        );
+        CREATE TABLE tasks (
+            id INTEGER PRIMARY KEY AUTOINCREMENT,
+            taskName TEXT not NULL
+        );
+        CREATE TABLE IF NOT EXISTS days_have_tasks(day_id INTEGER ,task_id INTEGER);
+        CREATE TABLE notes (
+            id INTEGER PRIMARY KEY AUTOINCREMENT,
+            date DATETIME ,
+            title TEXT,
+            text TEXT,
+            priority TEXT
+        );
+        INSERT INTO settings (ke,val)
+            VALUES ('name','Max');
+        INSERT INTO settings (ke,val)
+            VALUES ('start','2018-08-01');
+        INSERT INTO settings (ke,val)
+            VALUES ('version','2');
+        `)
+        DB.loaded = true;
+        DB.__load()
+        DB.storeLocalStorage()
+    }
+    static storeLocalStorage(){
+        var data = DB.cdb.export(); 
+        var buffer = new Buffer(data);
+        var blob = new Blob([buffer]);
+        var reader = new FileReader();
+        reader.onload = function() {
+            localStorage.setItem('storage',reader.result)
+        }
+        reader.readAsBinaryString(blob);
+    }
+    static loadLocalStorage(){
+        var i, l, d, array;
+        array = new Uint8Array(localStorage.getItem('storage'));
+        for (var i = 0; i < l; i++){
+            array[i] = d.charCodeAt(i);
+        }
+        DB.loadDB(array);
+        DB.loaded = true;
+        DB.__load()
+    }
+    /**
+     * 
+     * @param {type:Uint8Array} file Uint8Array
+     */
+    static loadDB(file){
+        Log.debug('load database');
+
+        DB.cdb = new SQL.Database(file);
+        DB.storeLocalStorage()
+        DB.loaded = true;
+        DB.__load()
+        return "";
+    }
+    static __load(){
+        Log.debug('DB onload EVENT');
+        for(var l in DB.loadedCB){
+            DB.loadedCB[l]();
+        }
+    }
+    static onLoad(cb){
+        Log.debug('added DB onload EVENT');
+        DB.loadedCB.push(cb);
+    }
+
+    /**
+     * 
+     */
+    static exportDB(){
+        Log.debug('export database');
+        var data = DB.cdb.export(); 
+        var buffer = new Buffer(data);
+        //console.log(buffer);
+        var blob = new Blob([buffer],{type:'application/x-sqlite3'});
+        //console.log(blob);
+        //console.log(window.URL.createObjectURL(blob));
+        var link = document.createElement('a');
+        link.href = window.URL.createObjectURL(blob);
+        var fileName = "wbm.sqlite";
+        link.download = fileName;
+        
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        window.URL.revokeObjectURL(link); 
+
+    }
+
+
+    /**
+     * 
+     * @param {*} date 
+     */
+    static loadDate(date){
+        //var re = DB.cdb.exec("SELECT * FROM INFORMATION_SCHEMA.TABLES WHERE TABLE_TYPE='BASE TABLE'");
+        //console.log(re)
+        Log.debug('load from date:'+date.getTime())
+        // get date
+        var sql = `SELECT * FROM days WHERE date=:date;`;
+        var stmt = DB.cdb.prepare(sql);
+        var res = stmt.getAsObject({":date":date.getTime()})
+        // clear statement memory
+        stmt.free();
+
+        Log.debug(JSON.stringify(res)); 
+
+        if(Object.keys(res).length === 0){
+            return {breakTime: 0, date: null,startTime:null, endTime: null, taskList:[]}
+        }else{
+            var sql2 = `SELECT * FROM days_have_tasks WHERE day_id=:id`
+            var stmt2 = DB.cdb.prepare(sql2);
+            
+            
+            var tasks = [];
+            tasks.push(stmt2.getAsObject({":id":res.id}).task_id);
+            while (stmt2.step()) tasks.push(stmt2.get()[1]);
+            stmt2.free();
+            //return {breakTime: 0, date: null,startTime:null, endTime: null, taskList:[]}
+            //return 0;
+            //var tasks = resu.taskList.split(',');
+            sql = `SELECT * FROM tasks WHERE id=:id`;
+            
+            for ( var task in tasks){
+                stmt = DB.cdb.prepare(sql);
+                tasks[task] = stmt.getAsObject({":id":tasks[task]}).taskName;
+                stmt.free();
+            }
+            res.taskList = tasks;
+            return res;
+        }
+    }
+    static saveDate(args){
+        Log.debug('save date');
+        Log.debug(JSON.stringify(args))
+        var sql;
+        var stmt;
+        var res;
+        var tasks = args.taskList;
+        var taskss = []
+        //console.log(tasks);
+        for(var t in tasks){
+            if(typeof tasks[t] === 'undefined'){
+                continue;
+            }
+            tasks[t] = tasks[t].trim();
+            /**
+             * @INFO: search for TASK name
+             */
+            sql = `SELECT * FROM tasks WHERE taskName=:task`;
+            stmt = DB.cdb.prepare(sql);
+            res = stmt.getAsObject({':task':tasks[t]});
+            stmt.free();
+            //console.log(res);
+            /**
+             * @INFO: if task is not found add it as new task 
+             * into the tasks table and research the taskname again
+             */
+            if(Object.keys(res).length === 0){
+                sql = `INSERT INTO tasks(taskName) VALUES(:task);`;
+                stmt = DB.cdb.prepare(sql);
+                res = stmt.getAsObject(
+                    {
+                        ":task":tasks[t]
+                    }
+                )
+                stmt.free()
+                sql = `SELECT * FROM tasks WHERE taskName=:task`;
+                stmt = DB.cdb.prepare(sql);
+                res = stmt.getAsObject({':task':tasks[t]});
+                stmt.free();
+                console.log(res);
+            }
+            /**
+             * @INFO: store the task id in taskss[t]
+             * 
+             */
+            taskss[t]= res.id;
+
+        }
+        /**
+         * @INFO: get the choosen date
+         */
+        sql = `SELECT * FROM days WHERE date=:date;`;
+        stmt = DB.cdb.prepare(sql);
+        console.log(args);
+        res = stmt.getAsObject({":date":args.date})
+        stmt.free()
+
+        /**
+         * @INFO: CHECK IF DATE EXISTS
+         */
+        if(Object.keys(res).length === 0){
+            /**
+             * @TODO: rework if date not exists
+             */
+            Log.debug('added new entry');
+            Log.debug(JSON.stringify(args))
+            sql = `INSERT INTO days(date,startTime,breakTime,endTime) VALUES(:date,:startTime,:breakTime,:endTime);`;
+            stmt = DB.cdb.prepare(sql);
+            res = stmt.getAsObject(
+                {
+                    ":date":args.date,
+                    ":startTime":args.startTime,
+                    ":breakTime":args.breakTime,
+                    ":endTime":args.endTime
+                    /*":taskList":taskss.join()*/
+                }
+            )
+            stmt.free()
+            sql = `SELECT * FROM days WHERE date=:date;`;
+            stmt = DB.cdb.prepare(sql);
+            res = stmt.getAsObject({
+                ":date":args.date
+            });
+            /* DAY ID */
+            var d_id = res.id;
+            /**
+             * @INFO:
+             * for each day insert into days_have_tasks the tasks and the day id
+             */
+            for(var i = 0;i<taskss.length;i++){
+                sql = `INSERT INTO days_have_tasks(day_id,task_id) VALUES(:did,:task);`;
+                stmt = DB.cdb.prepare(sql);
+                res = stmt.getAsObject(
+                    {
+                        ":did":d_id,
+                        ":task":taskss[i]
+                    }
+                )
+                stmt.free()
+            }
+        }else{
+            /**
+             * @INFO: get DATE ID
+             * @TODO: rewrite it as a external method
+             */
+            sql = `SELECT * FROM days WHERE date=:date;`
+            stmt = DB.cdb.prepare(sql);
+            var id = stmt.getAsObject({":date":args.date}).id;
+            stmt.free()
+
+            sql = `SELECT * FROM days_have_tasks WHERE day_id=:id`
+            stmt = DB.cdb.prepare(sql);
+            var day_tasks = stmt.getAsObject({":id":id});
+            var old_tasks = [];
+
+            // load all old tasks in array
+            old_tasks.push(day_tasks.task_id)
+            while (stmt.step()) old_tasks.push(stmt.get()[1]);
+            
+
+            stmt.free();
+
+            for(var x = 0;x<old_tasks.length;x++){
+                var t = taskss.indexOf(old_tasks[x])
+                if(t===-1){
+                    sql = `DELETE FROM days_have_tasks WHERE day_id=:id AND task_id=:t_id;`
+                    stmt = DB.cdb.prepare(sql);
+                    stmt.getAsObject({":id":id,":t_id":old_tasks[x]});
+                }
+            }
+            /**
+             * @INFO 
+             * ALL USED TASKS @var - taskss
+             * 
+             * SELECT 
+             */
+
+
+            for(var i = 0;i<taskss.length;i++){
+
+
+
+
+
+                sql = `SELECT * FROM  days_have_tasks WHERE day_id=:id AND task_id=:tid;`
+                stmt = DB.cdb.prepare(sql);
+                var tid = taskss[i];
+                var res = stmt.getAsObject({":id":id,":tid":tid});
+
+                stmt.free()
+
+                /**
+                 * ADD TASK TO DAY
+                 */
+                if(typeof res.day_id == "undefined"){
+                    var taskID = taskss[i];
+
+                    /**
+                     * @INFO: relate day_id and task_id in days_have_tasks
+                    */
+                    sql = `INSERT INTO days_have_tasks(day_id,task_id) VALUES(:did,:task);`;
+                    stmt = DB.cdb.prepare(sql);
+                    res = stmt.getAsObject(
+                        {
+                            ":did":id,
+                            ":task":taskID
+                        }
+                    )
+                    stmt.free()
+                }         
+            }
+
+
+            /** DELETE NOT USED TASKS */
+            /** @TODO: DELETE NOT USED TASKS FOR DAY */
+            /*
+            sql = `SELECT * FROM  days_have_tasks WHERE day_id=:id AND task_id NOT IN :tid;`
+            stmt = DB.cdb.prepare(sql);
+            var tid = taskss[i];
+            var res = stmt.getAsObject({":id":id,":tid":"\"("+taskss.join('","')+")\""});
+            console.log(res);
+            stmt.free()
+            */
+
+            /** */
+            Log.debug('update entry');
+            Log.debug(JSON.stringify(args))
+            sql = `UPDATE days SET startTime=:startTime,breakTime=:breakTime,endTime=:endTime,taskList=:taskList WHERE date=:date;`;
+            stmt = DB.cdb.prepare(sql);
+            res = stmt.getAsObject(
+                {
+                    ":date":args.date,
+                    ":startTime":args.startTime,
+                    ":breakTime":args.breakTime,
+                    ":endTime":args.endTime,
+                    ":taskList":taskss.join()
+                }
+            )
+            Log.debug(res);
+            stmt.free()
+        }
+    }
+    static handleTasks(){
+
+    }
+
+
+
+    static loadSettings(key){
+        var sql = `SELECT * FROM settings WHERE ke=:key`;
+        var stmt = DB.cdb.prepare(sql);
+        var res = stmt.getAsObject({':key':key});
+        stmt.free();
+        return res;
+        
+    }
+    /**
+     * 
+     * @param {*} obj name: Name  ,  start: Date ( 2018-08-01 )
+     */
+    static saveSettings(obj){
+        var sql = `UPDATE settings SET val=:name WHERE ke="name"`;
+        var stmt = DB.cdb.prepare(sql);
+        stmt.getAsObject({':name':obj.name});
+        stmt.free();
+
+        sql = `UPDATE settings SET val=:start WHERE ke="start"`;
+        stmt = DB.cdb.prepare(sql);
+        stmt.getAsObject({':start':obj.start});
+        stmt.free();
+        return "";
+    }
+    /**
+     * RES MAPPING
+     */
+    static resMap(res){
+
+
+    }
 }
\ No newline at end of file
diff --git a/src/jsx/ui/calender.jsx b/src/jsx/ui/calender.jsx
index fd1cb8d..309965f 100644
--- a/src/jsx/ui/calender.jsx
+++ b/src/jsx/ui/calender.jsx
@@ -1,228 +1,228 @@
-import React from 'react';
-import InfiniteCalendar from 'react-infinite-calendar';
-
-import {DB} from '../static/storage'
-import { Log } from '../static/debug';
-
-import {Notify} from '../static/notify';
-import { Tasks } from './calender/tasks';
-//import 'react-infinite-calendar/styles.css'; // only needs to be imported once
-
-//const {  ipcRenderer} = require('electron');
-const moment = require('moment');
-
-var me = null;
-
-/*
-#2C3A47;
-@background-2:#596571; 
-*/
-
-const cal_theme = {
-  accentColor: '#34495e',
-  floatingNav: {
-    background: '#34495e',
-    chevron: '#ffb142',
-    color: '#FFF',
-  },
-  headerColor: '#34495e',
-  selectionColor: '#34495e',
-  textColor: {
-    active: '#FFF',
-    default: '#333',
-  },
-  todayColor: '#ffb142',
-  weekdayColor: '#FFF',
-}
-
-var ct = ()=>{}
-
-export class Calender extends React.Component {
-  constructor(props) {
-    super(props);
-    // Render the Calendar
-    this.cal_date = new Date();
-    this.state = {
-        breakTime: 0,
-        date:new Date(),
-        endTime:null,
-        startTime:null,
-        taskList:[]
-    }
-    this.startTimeChange = this.startTimeChange.bind(this);
-    this.endTimeChange = this.endTimeChange.bind(this);
-    this.breakTimeChange = this.breakTimeChange.bind(this);
-    this.taskListChange = this.taskListChange.bind(this);
-    this.getDate = this.getDate.bind(this)
-    this.save = this.save.bind(this);
-    this.entryChange = this.entryChange.bind(this);
-    this.addTask = this.addTask.bind(this);
-    this.delTask = this.delTask.bind(this);
-    me = this;
-
-    this.today = new Date();
-    this.lastWeek = new Date(this.today.getFullYear(), this.today.getMonth(), this.today.getDate() - 7);
-
-    this.worktime = 0;
-    /*
-    @TODO LOAD CURRENT DATE
-    ipcRenderer.on('loadDate-reply', (event, arg) => {
-      //console.log(arg) // prints "pong"
-      this.setState(
-        arg.data
-      )
-      if(arg.data.date === null){
-        this.setState({date:this.cal_date});
-      }
-      if(arg.data.startTime === null){
-        this.setState({startTime:this.cal_date});
-      }
-      if(arg.data.endTime === null){
-        this.setState({endTime:this.cal_date});
-      }
-    })
-    */
-  }
-  componentWillUnmount(){
-    Log.debug("unload Calender")
-
-  }
-
-  getDate(date){
-    // set selected date
-    me.cal_date = date;
-
-    var res = DB.loadDate(date)
-    Log.debug('LOAD RES')
-    console.log(res) 
-
-    
-    if(res.date === null){
-      res.date=this.cal_date;
-    }
-    if(res.startTime === null){
-      res.startTime=moment(this.cal_date).unix()*1000;
-    }
-    if(res.endTime === null){
-      res.endTime=moment(this.cal_date).unix()*1000;
-    }
-    this.setState(
-      res
-    )
-
-  }
-  startTimeChange(e){
-    //this.setState({startTime: e.target.value});
-    var hm = e.target.value.split(':');
-    this.setState({startTime: moment(this.state.date).set({hour:hm[0],minute:hm[1]}).unix()*1000});
-  }
-  endTimeChange(e){
-    ////console.log(e.target.value)
-    var hm = e.target.value.split(':');
-    ////console.log(moment(this.state.date).set({hour:hm[0],minute:hm[1]}).format('HH:mm:ss'))
-    this.setState({endTime: moment(this.state.date).set({hour:hm[0],minute:hm[1]}).unix()*1000 });
-  }
-  breakTimeChange(e){
-
-    this.setState({breakTime: e.target.value});
-  }
-  taskListChange(e){
-    this.setState({taskList: e.target.value.split(',')});
-  }
-  save(){
-    //console.log("Speichern")
-    Log.debug(JSON.stringify(this.state))
-    Log.debug(JSON.stringify({
-      breakTime: this.state.breakTime,
-      date:moment(this.state.date).unix()*1000,
-      endTime:this.state.endTime,
-      startTime:this.state.startTime,
-      taskList:this.state.taskList
-    }))
-    DB.saveDate(
-      {
-        breakTime: this.state.breakTime,
-        date:moment(this.state.date).unix()*1000,
-        endTime:this.state.endTime,
-        startTime:this.state.startTime,
-        taskList:this.state.taskList
-      }
-    );
-    Notify.emit({title:"",body:"Eintrag gespeichert.",type:"success"});
-    //ipcRenderer.send('saveDate',s)
-  }
-  entryChange(e){
-    console.log(e.target.attributes.getNamedItem("data-key").value+" "+e.target.value);
-    var tmp = this.state.taskList
-    tmp[e.target.attributes.getNamedItem("data-key").value] = e.target.value
-    this.setState({taskList: tmp});
-  }
-  addTask(){
-    var tmp = this.state.taskList;
-    tmp.push("");
-    this.setState({taskList: tmp})
-  }
-  delTask(e){
-    var tmp = this.state.taskList;
-    tmp.splice(e.target.attributes.getNamedItem("data-key").value,1);
-    this.setState({taskList: tmp});
-  }
-  render() {
-      var wk = 0;
-      if(this.state.endTime !== null){
-        try{
-          wk = moment.duration(moment(this.state.endTime).diff(moment(this.state.startTime).subtract(-this.state.breakTime,'minutes')));
-          //console.log('XD ',wk)
-          wk = moment.utc(wk._milliseconds).format('HH:mm')
-        }catch(e){
-          //console.log(e)
-        }
-      }else{
-
-      }
-    console.log(moment(this.state.date).diff(moment(DB.loadSettings('start').val),'week'));
-    ////console.log(moment(this.state.endTime).format('HH:mm:ss'))
-    var loc = {blank: 'Datum auswählen...', headerFormat: 'ddd, MMM Do', todayLabel: {   long: 'Heute',  }, locale: require('date-fns/locale/de'),  weekdays: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],   weekStartsOn: 1 }
-    return ( <div id="editor-frame">
-              <div id="calender">
-                <InfiniteCalendar selected = { this.today } theme={cal_theme} locale = {    loc   } onSelect={this.getDate}/>
-              </div >
-              <div id="mask">
-                <div className="header"></div>
-                <div className="inputGroup">
-                  <div className="input">
-                    <label>Arbeitszeit :</label><input type="text" disable="true" value={wk}/>
-                  </div>
-                  <div className="input">
-                    <label>Anfangszeit:</label><input type="time" value={moment(this.state.startTime).format('HH:mm')} onChange={this.startTimeChange}/>
-                  </div>
-                  <div className="input">
-                    <label>Feierabend :</label><input type="time" value={moment(this.state.endTime).format('HH:mm')} onChange={this.endTimeChange}/>
-                  </div>
-                  <div className="input">
-                    <label>Pause      :</label><input type="number" min="0" value={this.state.breakTime} onChange={this.breakTimeChange}/>
-                  </div>
-                  <div className="input">
-                    <label>Tätigkeiten</label>
-                    <label></label><br/><textarea className="hidden" value={this.state.taskList} onChange={this.taskListChange}>
-
-
-                    </textarea>
-                    <div id="entrys">
-                        {this.state.taskList.map((item, i) => (
-                        <div className="entry-input" key={i}>
-                            <input type="text" value={item} data-key={i} onChange={this.entryChange}/><button data-key={i} onClick={this.delTask}><i class="fas fa-trash"></i></button>
-                        </div>)
-                        )}
-                    </div>
-                    <button onClick={this.addTask}><i class="fas fa-plus"></i></button>
-                  </div>
-                  <div className="input">
-                    <label></label><button className="btn success" onClick={this.save}>Speichern</button>
-                  </div>
-                </div>
-
-              </div>
-            </div> );
-  }
-}
+import React from 'react';
+import InfiniteCalendar from 'react-infinite-calendar';
+
+import {DB} from '../static/storage'
+import { Log } from '../static/debug';
+
+import {Notify} from '../static/notify';
+import { Tasks } from './calender/tasks';
+//import 'react-infinite-calendar/styles.css'; // only needs to be imported once
+
+//const {  ipcRenderer} = require('electron');
+const moment = require('moment');
+
+var me = null;
+
+/*
+#2C3A47;
+@background-2:#596571; 
+*/
+
+const cal_theme = {
+  accentColor: '#34495e',
+  floatingNav: {
+    background: '#34495e',
+    chevron: '#ffb142',
+    color: '#FFF',
+  },
+  headerColor: '#34495e',
+  selectionColor: '#34495e',
+  textColor: {
+    active: '#FFF',
+    default: '#333',
+  },
+  todayColor: '#ffb142',
+  weekdayColor: '#FFF',
+}
+
+var ct = ()=>{}
+
+export class Calender extends React.Component {
+  constructor(props) {
+    super(props);
+    // Render the Calendar
+    this.cal_date = new Date();
+    this.state = {
+        breakTime: 0,
+        date:new Date(),
+        endTime:null,
+        startTime:null,
+        taskList:[]
+    }
+    this.startTimeChange = this.startTimeChange.bind(this);
+    this.endTimeChange = this.endTimeChange.bind(this);
+    this.breakTimeChange = this.breakTimeChange.bind(this);
+    this.taskListChange = this.taskListChange.bind(this);
+    this.getDate = this.getDate.bind(this)
+    this.save = this.save.bind(this);
+    this.entryChange = this.entryChange.bind(this);
+    this.addTask = this.addTask.bind(this);
+    this.delTask = this.delTask.bind(this);
+    me = this;
+
+    this.today = new Date();
+    this.lastWeek = new Date(this.today.getFullYear(), this.today.getMonth(), this.today.getDate() - 7);
+
+    this.worktime = 0;
+    /*
+    @TODO LOAD CURRENT DATE
+    ipcRenderer.on('loadDate-reply', (event, arg) => {
+      //console.log(arg) // prints "pong"
+      this.setState(
+        arg.data
+      )
+      if(arg.data.date === null){
+        this.setState({date:this.cal_date});
+      }
+      if(arg.data.startTime === null){
+        this.setState({startTime:this.cal_date});
+      }
+      if(arg.data.endTime === null){
+        this.setState({endTime:this.cal_date});
+      }
+    })
+    */
+  }
+  componentWillUnmount(){
+    Log.debug("unload Calender")
+
+  }
+
+  getDate(date){
+    // set selected date
+    me.cal_date = date;
+
+    var res = DB.loadDate(date)
+    Log.debug('LOAD RES')
+    Log.debug(JSON.stringify(res)) 
+
+    
+    if(res.date === null){
+      res.date=this.cal_date;
+    }
+    if(res.startTime === null){
+      res.startTime=moment(this.cal_date).unix()*1000;
+    }
+    if(res.endTime === null){
+      res.endTime=moment(this.cal_date).unix()*1000;
+    }
+    this.setState(
+      res
+    )
+
+  }
+  startTimeChange(e){
+    //this.setState({startTime: e.target.value});
+    var hm = e.target.value.split(':');
+    this.setState({startTime: moment(this.state.date).set({hour:hm[0],minute:hm[1]}).unix()*1000});
+  }
+  endTimeChange(e){
+    ////console.log(e.target.value)
+    var hm = e.target.value.split(':');
+    ////console.log(moment(this.state.date).set({hour:hm[0],minute:hm[1]}).format('HH:mm:ss'))
+    this.setState({endTime: moment(this.state.date).set({hour:hm[0],minute:hm[1]}).unix()*1000 });
+  }
+  breakTimeChange(e){
+
+    this.setState({breakTime: e.target.value});
+  }
+  taskListChange(e){
+    this.setState({taskList: e.target.value.split(',')});
+  }
+  save(){
+    //console.log("Speichern")
+    Log.debug(JSON.stringify(this.state))
+    Log.debug(JSON.stringify({
+      breakTime: this.state.breakTime,
+      date:moment(this.state.date).unix()*1000,
+      endTime:this.state.endTime,
+      startTime:this.state.startTime,
+      taskList:this.state.taskList
+    }))
+    DB.saveDate(
+      {
+        breakTime: this.state.breakTime,
+        date:moment(this.state.date).unix()*1000,
+        endTime:this.state.endTime,
+        startTime:this.state.startTime,
+        taskList:this.state.taskList
+      }
+    );
+    Notify.emit({title:"",body:"Eintrag gespeichert.",type:"success"});
+    //ipcRenderer.send('saveDate',s)
+  }
+  entryChange(e){
+    //console.log(e.target.attributes.getNamedItem("data-key").value+" "+e.target.value);
+    var tmp = this.state.taskList
+    tmp[e.target.attributes.getNamedItem("data-key").value] = e.target.value
+    this.setState({taskList: tmp});
+  }
+  addTask(){
+    var tmp = this.state.taskList;
+    tmp.push("");
+    this.setState({taskList: tmp})
+  }
+  delTask(e){
+    var tmp = this.state.taskList;
+    tmp.splice(e.target.attributes.getNamedItem("data-key").value,1);
+    this.setState({taskList: tmp});
+  }
+  render() {
+      var wk = 0;
+      if(this.state.endTime !== null){
+        try{
+          wk = moment.duration(moment(this.state.endTime).diff(moment(this.state.startTime).subtract(-this.state.breakTime,'minutes')));
+          //console.log('XD ',wk)
+          wk = moment.utc(wk._milliseconds).format('HH:mm')
+        }catch(e){
+          //console.log(e)
+        }
+      }else{
+
+      }
+    //console.log(moment(this.state.date).diff(moment(DB.loadSettings('start').val),'week'));
+    ////console.log(moment(this.state.endTime).format('HH:mm:ss'))
+    var loc = {blank: 'Datum auswählen...', headerFormat: 'ddd, MMM Do', todayLabel: {   long: 'Heute',  }, locale: require('date-fns/locale/de'),  weekdays: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],   weekStartsOn: 1 }
+    return ( <div id="editor-frame">
+              <div id="calender">
+                <InfiniteCalendar selected = { this.today } theme={cal_theme} locale = {    loc   } onSelect={this.getDate}/>
+              </div >
+              <div id="mask">
+                <div className="header"></div>
+                <div className="inputGroup">
+                  <div className="input">
+                    <label>Arbeitszeit :</label><input type="text" disable="true" value={wk}/>
+                  </div>
+                  <div className="input">
+                    <label>Anfangszeit:</label><input type="time" value={moment(this.state.startTime).format('HH:mm')} onChange={this.startTimeChange}/>
+                  </div>
+                  <div className="input">
+                    <label>Feierabend :</label><input type="time" value={moment(this.state.endTime).format('HH:mm')} onChange={this.endTimeChange}/>
+                  </div>
+                  <div className="input">
+                    <label>Pause      :</label><input type="number" min="0" value={this.state.breakTime} onChange={this.breakTimeChange}/>
+                  </div>
+                  <div className="input">
+                    <label>Tätigkeiten</label>
+                    <label></label><br/><textarea className="hidden" value={this.state.taskList} onChange={this.taskListChange}>
+
+
+                    </textarea>
+                    <div id="entrys">
+                        {this.state.taskList.map((item, i) => (
+                        <div className="entry-input" key={i}>
+                            <input type="text" value={item} data-key={i} onChange={this.entryChange}/><button data-key={i} onClick={this.delTask}><i class="fas fa-trash"></i></button>
+                        </div>)
+                        )}
+                    </div>
+                    <button onClick={this.addTask}><i class="fas fa-plus"></i></button>
+                  </div>
+                  <div className="input">
+                    <label></label><button className="btn success" onClick={this.save}>Speichern</button>
+                  </div>
+                </div>
+
+              </div>
+            </div> );
+  }
+}
diff --git a/src/jsx/ui/components/modal.jsx b/src/jsx/ui/components/modal.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/jsx/ui/fileLoader.jsx b/src/jsx/ui/fileLoader.jsx
index 504eb08..a6fa47d 100644
--- a/src/jsx/ui/fileLoader.jsx
+++ b/src/jsx/ui/fileLoader.jsx
@@ -1,122 +1,133 @@
-
-
-import React from 'react';
-import {DB} from '../static/storage'
-//var SQL = require('sql.js');
-//const moment = require('moment');
-
-
-var BASE64_MARKER = ';base64,';
-
-function convertDataURIToBinary(dataURI) {
-  var base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
-  var base64 = dataURI.substring(base64Index);
-  var raw = window.atob(base64);
-  var rawLength = raw.length;
-  var array = new Uint8Array(new ArrayBuffer(rawLength));
-
-  for(var i = 0; i < rawLength; i++) {
-    array[i] = raw.charCodeAt(i);
-  }
-  return array;
-}
-
-export class FileLoader extends React.Component {
-    constructor(props) {
-        super(props);
-        this.handleFileSelect = this.handleFileSelect.bind(this);
-        this.createNew = this.createNew.bind(this);
-
-    }
-    b64toBlob(b64Data, contentType, sliceSize) {
-        contentType = contentType || '';
-        sliceSize = sliceSize || 512;
-      
-        var byteCharacters = atob(b64Data);
-        var byteArrays = [];
-      
-        for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
-          var slice = byteCharacters.slice(offset, offset + sliceSize);
-      
-          var byteNumbers = new Array(slice.length);
-          for (var i = 0; i < slice.length; i++) {
-            byteNumbers[i] = slice.charCodeAt(i);
-          }
-      
-          var byteArray = new Uint8Array(byteNumbers);
-      
-          byteArrays.push(byteArray);
-        }
-      
-        var blob = new Blob(byteArrays, {type: contentType});
-        return blob;
-      }
-    handleFileSelect(evt) {
-        var files = evt.target.files; // FileList object
-
-        // Loop through the FileList and render image files as thumbnails.
-        for (var i = 0, f; f = files[i]; i++) {
-
-            // Only process image files.
-            /*if (!f.type.match('image.*')) {
-                continue;
-            }*/
-            console.log(f.type)
-            var reader = new FileReader();
-
-            // Closure to capture the file information.
-            var me = this;
-            reader.onload = (function (theFile) {
-                return function (e) {
-                    // Render thumbnail.
-                    console.log(e.target.result)
-                    console.log(theFile)
-                    var blob = me.b64toBlob(e.target.result.split('base64,')[1],theFile.type);
-                    console.log(blob)
-                    //var fi = new FileReader();
-                    //var f_ = fi.readAsDataURL(e.target.result);
-                    var uInt8Array = new Uint8Array(convertDataURIToBinary(e.target.result));
-
-                    DB.loadDB(uInt8Array);
-                     //DB.loadDate('2018-06-25 22:00:00.000 +00:00');
-                };
-            })(f);
-
-            // Read in the image file as a data URL.
-            reader.readAsDataURL(f);
-            console.log(f)
-        }
-    }
-    createNew(){
-        DB.newDB();
-    }
-    render() {
-        return (
-            <div id="fileloader-frame">
-                <div className="contents">
-                    <button onClick={this.createNew}>Neue Wochenberichtsmappe</button>
-                    <hr/>
-                    <input type="file" id="files" name="files[]" onChange={this.handleFileSelect}/>
-                    <output id="list"></output>
-                    <hr/>
-                    Erstellt von:<br/><a rel="noopener noreferrer" target="_blank" href="https://lucajaents.ch">Luca Jäntsch</a>
-                </div>
-            </div>);
-    }
-}
-
-export class Export extends React.Component{
-    constructor(props){
-        super(props);
-        this.state = {
-            
-        }
-    }
-    render(){
-        return (
-            <div>
-
-            </div>
-        )
-    }
+
+
+import React from 'react';
+import {DB} from '../static/storage'
+//var SQL = require('sql.js');
+//const moment = require('moment');
+
+
+var BASE64_MARKER = ';base64,';
+
+function convertDataURIToBinary(dataURI) {
+  var base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
+  var base64 = dataURI.substring(base64Index);
+  var raw = window.atob(base64);
+  var rawLength = raw.length;
+  var array = new Uint8Array(new ArrayBuffer(rawLength));
+
+  for(var i = 0; i < rawLength; i++) {
+    array[i] = raw.charCodeAt(i);
+  }
+  return array;
+}
+
+export class FileLoader extends React.Component {
+    constructor(props) {
+        super(props);
+        this.handleFileSelect = this.handleFileSelect.bind(this);
+        this.createNew = this.createNew.bind(this);
+        this.state = {upBTN:null}
+
+        this.upload = this.upload.bind(this);
+        this.loadWBM = this.loadWBM.bind(this)
+    }
+    b64toBlob(b64Data, contentType, sliceSize) {
+        contentType = contentType || '';
+        sliceSize = sliceSize || 512;
+      
+        var byteCharacters = atob(b64Data);
+        var byteArrays = [];
+      
+        for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
+          var slice = byteCharacters.slice(offset, offset + sliceSize);
+      
+          var byteNumbers = new Array(slice.length);
+          for (var i = 0; i < slice.length; i++) {
+            byteNumbers[i] = slice.charCodeAt(i);
+          }
+      
+          var byteArray = new Uint8Array(byteNumbers);
+      
+          byteArrays.push(byteArray);
+        }
+      
+        var blob = new Blob(byteArrays, {type: contentType});
+        return blob;
+      }
+    handleFileSelect(evt) {
+        var files = evt.target.files; // FileList object
+
+        // Loop through the FileList and render image files as thumbnails.
+        for (var i = 0, f; f = files[i]; i++) {
+
+            // Only process image files.
+            /*if (!f.type.match('image.*')) {
+                continue;
+            }*/
+            console.log(f.type)
+            var reader = new FileReader();
+
+            // Closure to capture the file information.
+            var me = this;
+            reader.onload = (function (theFile) {
+                return function (e) {
+                    // Render thumbnail.
+                    //console.log(e.target.result)
+                    //console.log(theFile)
+                    var blob = me.b64toBlob(e.target.result.split('base64,')[1],theFile.type);
+                    //console.log(blob)
+                    //var fi = new FileReader();
+                    //var f_ = fi.readAsDataURL(e.target.result);
+                    var uInt8Array = new Uint8Array(convertDataURIToBinary(e.target.result));
+
+                    DB.loadDB(uInt8Array);
+                     //DB.loadDate('2018-06-25 22:00:00.000 +00:00');
+                };
+            })(f);
+
+            // Read in the image file as a data URL.
+            reader.readAsDataURL(f);
+            console.log(f)
+        }
+    }
+    createNew(){
+        DB.newDB();
+    }
+    upload(e){
+        this.setState({upBTN:e})
+    }
+    loadWBM(e){
+        this.state.upBTN.click();
+    }
+    render() {
+        return (
+            <div id="fileloader-frame">
+                <div className="contents">
+                   
+                    <button onClick={this.createNew}>Neue Wochenberichtsmappe</button>
+                    <hr/>
+                    <button onClick={this.loadWBM}> 📂 Bestehende Wochenberichtsmappe laden</button>
+                    <input ref={this.upload} type="file" id="files" name="files[]" onChange={this.handleFileSelect} style={{display:"none"}}/>
+                    <output id="list"></output>
+                    <hr/>
+                    Erstellt von:<br/><a rel="noopener noreferrer" target="_blank" href="https://lucajaents.ch">Luca Jäntsch</a>
+                </div>
+            </div>);
+    }
+}
+
+export class Export extends React.Component{
+    constructor(props){
+        super(props);
+        this.state = {
+            
+        }
+    }
+    render(){
+        return (
+            <div>
+
+            </div>
+        )
+    }
 }
\ No newline at end of file
diff --git a/src/jsx/ui/home.jsx b/src/jsx/ui/home.jsx
index 1cc522a..6e702d3 100644
--- a/src/jsx/ui/home.jsx
+++ b/src/jsx/ui/home.jsx
@@ -1,35 +1,35 @@
-import React from 'react';
-import {FileLoader} from './fileLoader'
-import {DB} from './../static/storage'
-//import 'react-infinite-calendar/styles.css'; // only needs to be imported once
-
-var me;
-
-export class Home extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      rel:false
-    }
-    DB.onLoad(this.Dblo);
-    me = this;
-  }
-  Dblo(){
-    me.setState({rel:!me.state.rel})
-  }
-  DbLoaded(){
-    
-    if(DB.loaded === false){
-      return <FileLoader/>
-    }else{
-      return ""
-    }
-  }
-  render(){
-    return (
-    <div id="home-frame">
-      <this.DbLoaded/>
-      
-    </div>);
-  }
-}
+import React from 'react';
+import {FileLoader} from './fileLoader'
+import {DB} from './../static/storage'
+import { Migrate } from './migrate';
+//import 'react-infinite-calendar/styles.css'; // only needs to be imported once
+
+var me;
+
+export class Home extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      rel:false
+    }
+    DB.onLoad(this.Dblo);
+    me = this;
+  }
+  Dblo(){
+    me.setState({rel:!me.state.rel})
+  }
+  DbLoaded(){
+    
+    if(DB.loaded === false){
+      return <FileLoader/>
+    }else{
+      return (<div><Migrate/></div>)
+    }
+  }
+  render(){
+    return (
+    <div id="home-frame">
+      <this.DbLoaded/>
+    </div>);
+  }
+}
diff --git a/src/jsx/ui/migrate.jsx b/src/jsx/ui/migrate.jsx
new file mode 100644
index 0000000..a802091
--- /dev/null
+++ b/src/jsx/ui/migrate.jsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import {
+    FileLoader
+} from './fileLoader'
+import {
+    DB
+} from './../static/storage'
+
+import {Mig_0_1} from '../static/migration-sc/0-1'
+//import 'react-infinite-calendar/styles.css'; // only needs to be imported once
+
+var me;
+
+export class Migrate extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            saveVersion: "0",
+
+        }
+    }
+    componentDidMount(){
+        var res = DB.cdb.exec("SELECT * FROM settings WHERE ke='version'");
+        console.log(res);
+        if(res.length==0){
+            new Mig_0_1();
+        }else{
+            var version = res[0].values[0][2];
+            this.setState({saveVersion:version});
+            switch(version){
+                case "2":
+                    console.log('All up to date')
+                    break;
+                default:
+
+                    break;
+            }
+        }
+    }
+    render() {
+        return ( 
+        <div id = "migrate-frame" >
+            Deine Speicher Version: {this.state.saveVersion} - Derzeitige Programm Version
+        </div>);
+    }
+}
\ No newline at end of file
diff --git a/src/jsx/ui/nav.jsx b/src/jsx/ui/nav.jsx
index 3a97df5..ab1470d 100644
--- a/src/jsx/ui/nav.jsx
+++ b/src/jsx/ui/nav.jsx
@@ -1,74 +1,81 @@
-import React from 'react';
-
-import {Home} from './home';
-import {Calender} from './calender';
-import {Generator} from './generator';
-import {Print} from './print';
-import {Settings} from './settings';
-
-import {DB} from './../static/storage'
-import { Notify } from '../static/notify';
-
-export class Nav extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      tab:(<Home/>),
-      notify:(<span></span>)
-    }
-    this.handleExportFile = this.handleExportFile.bind(this);
-    var me = this;
-    Notify.on((data)=>{
-      me.setState({notify:me.notify(data)});
-      setTimeout(function(){
-        me.setState({notify:(<span></span>)});
-      },3000)
-    });
-  }
-  handleExportFile(){
-      /** 
-       * @TODO
-       * LOAD FILE
-       */
-  }
-  handleCreateFile(){
-      /** 
-       * @TODO
-       * CREATE FILE
-       */
-  }
-  notify(data){
-    return(
-      <div className="notification success">
-        <div className="title">{data.title}</div>
-        <div className="body">{data.body}</div>
-      </div>
-    )
-  }
-  render() {
-    /*<button onClick={this.handleCreateFile}>Erstellen </button>*/
-    return (
-      <div id="container">
-      <div id="nav">
-        <div className="header">
-          WBM
-        </div>
-        <button onClick={()=>{this.setState({tab:(<Home/>)})}}>Home</button>
-      
-        <button onClick={()=>{DB.exportDB()}}>Exportieren </button>
-        <button onClick={()=>{this.setState({tab:(<Calender/>)})}}>Kalender</button>
-        <button onClick={()=>{this.setState({tab:(<Generator/>)})}}>Generator</button>
-        <button onClick={()=>{this.setState({tab:(<Print/>)})}}>Drucken</button>
-        <button onClick={()=>{this.setState({tab:(<Settings/>)})}}>Einstellungen</button>
-        <hr/>
-        Erstellt von:<br/><a target="_blank" rel="noopener noreferrer" href="https://lucajaents.ch">Luca Jäntsch</a>
-      </div>
-      <div id="content">
-        {this.state.tab}
-      </div>
-      <div id="notify-center">
-        {this.state.notify}
-      </div>
-    </div>);
-  }
-}
+import React from 'react';
+
+import {Home} from './home';
+import {Calender} from './calender';
+import {Generator} from './generator';
+import {Print} from './print';
+import {Settings} from './settings';
+import {WorkTimes} from './worktimes';
+import {TasksUI} from './tasks';
+
+import {DB} from './../static/storage'
+import { Notify } from '../static/notify';
+import { Notes } from './notes';
+
+export class Nav extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      tab:(<Home/>),
+      notify:(<span></span>)
+    }
+    this.handleExportFile = this.handleExportFile.bind(this);
+    var me = this;
+    Notify.on((data)=>{
+      me.setState({notify:me.notify(data)});
+      setTimeout(function(){
+        me.setState({notify:(<span></span>)});
+      },3000)
+    });
+  }
+  handleExportFile(){
+      /** 
+       * @TODO
+       * LOAD FILE
+       */
+  }
+  handleCreateFile(){
+      /** 
+       * @TODO
+       * CREATE FILE
+       */
+  }
+  notify(data){
+    return(
+      <div className="notification success">
+        <div className="title">{data.title}</div>
+        <div className="body">{data.body}</div>
+      </div>
+    )
+  }
+  render() {
+    /*<button onClick={this.handleCreateFile}>Erstellen </button>*/
+    return (
+      <div id="container">
+      <div id="nav">
+        <div className="header">
+          WBM
+        </div>
+        <button onClick={()=>{this.setState({tab:(<Home/>)})}}>Home</button>
+        <button onClick={()=>{this.setState({tab:(<Notes/>)})}}>Notizen</button>      
+        <button onClick={()=>{DB.exportDB()}}>Exportieren </button>
+        <button onClick={()=>{this.setState({tab:(<Calender/>)})}}>Kalender</button>
+        <button onClick={()=>{this.setState({tab:(<TasksUI/>)})}}>Tasks</button>
+        <button onClick={()=>{this.setState({tab:(<WorkTimes/>)})}}>Arbeitszeiten</button>
+        <button onClick={()=>{this.setState({tab:(<Generator/>)})}}>Generator</button>
+        <button onClick={()=>{this.setState({tab:(<Print/>)})}}>Drucken</button>
+        <button onClick={()=>{this.setState({tab:(<Settings/>)})}}>Einstellungen</button>
+
+        <hr/>
+        Erstellt von:<br/><a target="_blank" rel="noopener noreferrer" href="https://lucajaents.ch">Luca Jäntsch</a>
+        <a href='https://ko-fi.com/W7W511YSC' target='_blank'><img height='36' style={{border:0+"px",height:36+'px'}} src='https://az743702.vo.msecnd.net/cdn/kofi5.png?v=2' border='0' alt='Buy Me a Coffee at ko-fi.com' /></a>
+      </div>
+      <div id="content">
+        {this.state.tab}
+      </div>
+      <div id="notify-center">
+        {this.state.notify}
+      </div>
+    </div>);
+  }
+}
diff --git a/src/jsx/ui/notes.jsx b/src/jsx/ui/notes.jsx
new file mode 100644
index 0000000..e8b772d
--- /dev/null
+++ b/src/jsx/ui/notes.jsx
@@ -0,0 +1,87 @@
+import React from 'react';
+import { DB } from '../static/storage';
+
+
+const moment = require('moment');
+
+export class Notes extends React.Component {
+  constructor(props) {
+    super(props);
+    var x = new Date();
+    this.state = {
+        notes:[],
+        date: moment(x).format("YYYY-MM-DD"),
+        time:moment(x).format("HH:MM"),
+        title:"-",
+        text:"---",
+        priority:"low"
+    }
+    this.chDate = this.chDate.bind(this);
+    this.chTime = this.chTime.bind(this);
+    this.chTitle = this.chTitle.bind(this);
+    this.chText = this.chText.bind(this);
+    this.chPriority = this.chPriority.bind(this);
+    this.save = this.save.bind(this);
+    this.delete = this.delete.bind(this);
+  }
+  componentDidMount(){
+    var sql = "SELECT * FROM notes;"
+    var stmt = DB.cdb.exec(sql);
+    /*var res = stmt.getAsObject(
+        {}
+    )
+    var dates = [];
+    dates.push(res.date);
+    while (stmt.step()) dates.push(stmt.get()[0]);
+    this.setState({dates:dates});*/
+  }
+  chDate(e){
+    var d = e.target.value;
+    this.setState({date:d});
+  }
+  chTime(e){
+    var t = e.target.value;
+    this.setState({time:t})
+  }
+  chTitle(e){
+    var t = e.target.value;
+    this.setState({title:t});
+  }
+  chText(e){
+    var t = e.target.value;
+    this.setState({text:t});
+  }
+  chPriority(e){
+      var p = e.target.value;
+      this.setState({priority:p})
+  }
+  delete(e){
+
+  }
+  save(e){
+    console.log("SAVE");
+    console.log(this.state.date);
+    var sql = `INSERT INTO notes ()`
+  }
+  render() {
+    return (
+      <div id="notes-frame">
+          <div id="notes-list">
+
+          </div>
+          <div id="notes-edit">
+            <button onClick={this.save}>Speichern</button><button onClick={this.delete}>Löschen</button>
+            <hr/>
+            Datum:<input type="date" value={this.state.date} onChange={this.chDate}/><br/>
+            Zeit:<input type="time" value={this.state.time} onChange={this.chTime}/><br/>
+            Titel:<input type="text" value={this.state.title} onChange={this.chTitle}/><br/>
+            Dringlichkeit:<select value={this.state.priority} onChange={this.chPriority}>
+                <option value="heigh">Hoch</option>
+                <option value="normal">Normal</option>
+                <option value="low">Niedrig</option>
+            </select><br/>
+            <textarea value={this.state.text} onChange={this.chText}></textarea>
+          </div>
+      </div>);
+  }
+}
diff --git a/src/jsx/ui/print_modi/week.jsx b/src/jsx/ui/print_modi/week.jsx
index 5022410..ad72dfb 100644
--- a/src/jsx/ui/print_modi/week.jsx
+++ b/src/jsx/ui/print_modi/week.jsx
@@ -1,131 +1,136 @@
-import {Templates} from '../components/templates';
-import { DB } from '../../static/storage';
-//import 'react-infinite-calendar/styles.css'; // only needs to be imported once
-const moment = require('moment');
-const nunjucks = require('nunjucks');
-
-export class Modi_Week{
-  /**
-   * 
-   * @param {*} name 
-   * @param {*} anfang 
-   * @param {*} start 
-   * @param {*} end 
-   * @param {*} me 
-   * @param {*} choosenTemplate 
-   */
-    static preview(name,anfang,start,end,me,choosenTemplate){
-        var sql = 'SELECT * FROM days WHERE date BETWEEN '+(moment(me.state.start).unix()*1000)+' AND '+(moment(me.state.end).unix()*1000);
-        var days = DB.cdb.exec(sql);
-        //for(var result = []; days.step();) result.push(days.getAsObject({':start':me.state.start,':end':me.state.end}));
-    
-        var d = days[0].values;
-        var weeks = {};
-        for(var i in d){
-          var md   = d[i];
-          var week =moment(md[4]).diff(start,'weeks');
-          if(typeof weeks[week] === 'undefined'){
-            weeks[week] = {};
-            weeks[week].data = [];
-            weeks[week].start = md[1];
-            weeks[week].num = moment(md[1]).diff(moment(anfang).startOf('isoWeek'),'weeks')+1;
-            weeks[week].end = "";
-          }
-          var tasks = md[5].split(',');
-          for(var t in tasks){
-            sql = 'SELECT * FROM tasks WHERE id=:id';
-            var stmt = DB.cdb.prepare(sql);
-            var res = stmt.getAsObject({':id':tasks[t]});
-            stmt.free();
-            tasks[t] = res.taskName;
-          }
-          md[5] = tasks;
-          md[1] = moment(md[1]).format('dddd');
-          md[2] = moment(md[2]).format('HH:mm');
-          md[4] = moment(md[4]).format('HH:mm');
-
-          if( md[2] === "00:00" && md[4] === "00:00"){
-            md[2] = "";
-            md[4] = "";
-          }
-    
-          var wnum = 0;
-          switch(md[1]){
-            case 'Monday':
-              md[1] = 'Montag';
-              break;
-            case 'Tuesday':
-              md[1] = 'Dienstag';
-              wnum = 1;
-              break;
-            case 'Wednesday':
-              md[1] = 'Mittwoch';
-              wnum = 2;
-              break;
-            case 'Thursday':
-              md[1] = 'Donnerstag';
-              wnum = 3;
-              break;
-            case 'Friday':
-              md[1] = 'Freitag';
-              wnum = 4
-              break;
-            case 'Saturday':
-              md[1] = 'Samstag';
-              wnum = 5;
-              break;
-            case 'Sunday' : 
-              md[1] = 'Sonntag';
-              wnum = 6;
-            default:
-              break;
-          }
-    
-          weeks[week].data[wnum] = md;
-        }
-        
-        for(var w in weeks){
-          if(choosenTemplate != "wochenbericht"){
-            var tmp = weeks[w].start;
-            weeks[w].start = moment(weeks[w].start).add(0, "days").format('DD/MM/YYYY');
-            weeks[w].end = moment(moment(tmp).day(7)).format('DD/MM/YYYY');
-          }else{
-            weeks[w].start = moment(weeks[w].start).add(0, "days").format('YYYY-MM-DD');
-            weeks[w].end = moment(moment(weeks[w].start).day(7)).format('YYYY-MM-DD');
-          }
-    
-    
-          for(d in weeks[w].data){
-            for(t in weeks[w].data[d][5]){
-              if(weeks[w].data[d][5][t].trim()===""){
-                weeks[w].data[d][5].splice(t,1);
-              }
-            }
-            if(weeks[w].data[d][5].length <=0){
-              weeks[w].data.splice(d,1);
-            }
-          }
-        }
-
-
-        /**
-         * @INFO
-         * Putting all Templates together for the print
-         */
-        var build = Templates.template.header+Templates.template[choosenTemplate]+Templates.template.footer;
-        
-        var html = nunjucks.renderString(build, {name:name,weeks:weeks});
-    
-        //console.log(html);
-        //var printWindow = window.open('', '', 'height=400,width=800');
-        //printWindow.document.write(html);
-        //printWindow.document.close();
-        //printWindow.print()
-        var ifrm = document.getElementById('pdf');
-        ifrm = ifrm.contentWindow || ifrm.contentDocument.document || ifrm.contentDocument;
-        ifrm.document.open();
-        ifrm.document.write(html);
-        ifrm.document.close();
-        ifrm.focus();
-    }
+import {Templates} from '../components/templates';
+import { DB } from '../../static/storage';
+//import 'react-infinite-calendar/styles.css'; // only needs to be imported once
+const moment = require('moment');
+const nunjucks = require('nunjucks');
+
+export class Modi_Week{
+  /**
+   * 
+   * @param {*} name 
+   * @param {*} anfang 
+   * @param {*} start 
+   * @param {*} end 
+   * @param {*} me 
+   * @param {*} choosenTemplate 
+   */
+    static preview(name,anfang,start,end,me,choosenTemplate){
+        var sql = 'SELECT * FROM days WHERE date BETWEEN '+(moment(me.state.start).unix()*1000)+' AND '+(moment(me.state.end).unix()*1000);
+        var days = DB.cdb.exec(sql);
+        //for(var result = []; days.step();) result.push(days.getAsObject({':start':me.state.start,':end':me.state.end}));
+    
+        var d = days[0].values;
+        var weeks = {};
+        for(var i in d){
+          var md   = d[i];
+          var week =moment(md[4]).diff(start,'weeks');
+          if(typeof weeks[week] === 'undefined'){
+            weeks[week] = {};
+            weeks[week].data = [];
+            weeks[week].start = md[1];
+            weeks[week].num = moment(md[1]).diff(moment(anfang).startOf('isoWeek'),'weeks')+1;
+            weeks[week].end = "";
+          }
+          sql = `SELECT * FROM days_have_tasks WHERE day_id=`+md[0];
+          var ts = DB.cdb.exec(sql);
+          var tasks = []
+          for(var x in ts[0].values){
+            tasks.push(ts[0].values[x][1]);
+          }
+          for(var t in tasks){
+            sql = 'SELECT * FROM tasks WHERE id=:id';
+            var stmt = DB.cdb.prepare(sql);
+            var res = stmt.getAsObject({':id':tasks[t]});
+            stmt.free();
+            tasks[t] = res.taskName;
+          }
+          md[5] = tasks;
+          md[1] = moment(md[1]).format('dddd');
+          md[2] = moment(md[2]).format('HH:mm');
+          md[4] = moment(md[4]).format('HH:mm');
+
+          if( md[2] === "00:00" && md[4] === "00:00"){
+            md[2] = "";
+            md[4] = "";
+          }
+    
+          var wnum = 0;
+          switch(md[1]){
+            case 'Monday':
+              md[1] = 'Montag';
+              break;
+            case 'Tuesday':
+              md[1] = 'Dienstag';
+              wnum = 1;
+              break;
+            case 'Wednesday':
+              md[1] = 'Mittwoch';
+              wnum = 2;
+              break;
+            case 'Thursday':
+              md[1] = 'Donnerstag';
+              wnum = 3;
+              break;
+            case 'Friday':
+              md[1] = 'Freitag';
+              wnum = 4
+              break;
+            case 'Saturday':
+              md[1] = 'Samstag';
+              wnum = 5;
+              break;
+            case 'Sunday' : 
+              md[1] = 'Sonntag';
+              wnum = 6;
+            default:
+              break;
+          }
+    
+          weeks[week].data[wnum] = md;
+        }
+        
+        for(var w in weeks){
+          if(choosenTemplate != "wochenbericht"){
+            var tmp = weeks[w].start;
+            weeks[w].start = moment(weeks[w].start).add(0, "days").format('DD/MM/YYYY');
+            weeks[w].end = moment(moment(tmp).day(7)).format('DD/MM/YYYY');
+          }else{
+            weeks[w].start = moment(weeks[w].start).add(0, "days").format('YYYY-MM-DD');
+            weeks[w].end = moment(moment(weeks[w].start).day(7)).format('YYYY-MM-DD');
+          }
+    
+    
+          for(d in weeks[w].data){
+            for(t in weeks[w].data[d][5]){
+              if(weeks[w].data[d][5][t].trim()===""){
+                weeks[w].data[d][5].splice(t,1);
+              }
+            }
+            if(weeks[w].data[d][5].length <=0){
+              weeks[w].data.splice(d,1);
+            }
+          }
+        }
+
+
+        /**
+         * @INFO
+         * Putting all Templates together for the print
+         */
+        var build = Templates.template.header+Templates.template[choosenTemplate]+Templates.template.footer;
+        
+        var html = nunjucks.renderString(build, {name:name,weeks:weeks});
+    
+        //console.log(html);
+        //var printWindow = window.open('', '', 'height=400,width=800');
+        //printWindow.document.write(html);
+        //printWindow.document.close();
+        //printWindow.print()
+        var ifrm = document.getElementById('pdf');
+        ifrm = ifrm.contentWindow || ifrm.contentDocument.document || ifrm.contentDocument;
+        ifrm.document.open();
+        ifrm.document.write(html);
+        ifrm.document.close();
+        ifrm.focus();
+    }
 }
\ No newline at end of file
diff --git a/src/jsx/ui/settings.jsx b/src/jsx/ui/settings.jsx
index 0422422..c4f6182 100644
--- a/src/jsx/ui/settings.jsx
+++ b/src/jsx/ui/settings.jsx
@@ -1,55 +1,56 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import InfiniteCalendar from 'react-infinite-calendar';
-import { DB } from '../static/storage';
-import { Notify } from '../static/notify';
-//import 'react-infinite-calendar/styles.css'; // only needs to be imported once
-
-const moment = require('moment');
-
-export class Settings extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      name:"",
-      start:0
-    }
-    this.onChangeName = this.onChangeName.bind(this);
-    this.onChangeStart = this.onChangeStart.bind(this);
-    this.save = this.save.bind(this);
-  }
-  componentDidMount(){
-    this.setState({name:DB.loadSettings('name').val,start:DB.loadSettings('start').val});
-    
-  }
-  onChangeName(e){
-    this.setState({name:e.target.value})
-  }
-  onChangeStart(e){
-    this.setState({start:e.target.value});
-  }
-  save(){
-    DB.saveSettings(this.state);
-    Notify.emit({title:"",body:"Einstellungen gespeichert.",type:"success"});
-  }
-  render() {
-    console.log(this.state)
-    return (
-      <div id="settings-frame">
-        Einstellungen
-        <div class="form-group ">
-          <label class="control-label " for="name">
-            Name
-          </label>
-          <input class="form-control" id="name" name="name" type="text" value={this.state.name} onChange={this.onChangeName}/>
-        </div>
-        <div class="form-group ">
-          <label class="control-label " for="name">
-            Anfangsdatum
-          </label>
-          <input class="form-control" id="name" name="name" type="date" onChange={this.onChangeStart} value={this.state.start} />
-        </div>
-        <button onClick={this.save}>Speichern</button>
-      </div>);
-  }
-}
+import React from 'react';
+import ReactDOM from 'react-dom';
+import InfiniteCalendar from 'react-infinite-calendar';
+import { DB } from '../static/storage';
+import { Notify } from '../static/notify';
+//import 'react-infinite-calendar/styles.css'; // only needs to be imported once
+
+const moment = require('moment');
+
+export class Settings extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      name:"",
+      start:0
+    }
+    this.onChangeName = this.onChangeName.bind(this);
+    this.onChangeStart = this.onChangeStart.bind(this);
+    this.save = this.save.bind(this);
+  }
+  componentDidMount(){
+    this.setState({name:DB.loadSettings('name').val,start:DB.loadSettings('start').val});
+    
+  }
+  onChangeName(e){
+    this.setState({name:e.target.value})
+  }
+  onChangeStart(e){
+    this.setState({start:e.target.value});
+  }
+  save(){
+    DB.saveSettings(this.state);
+    Notify.emit({title:"",body:"Einstellungen gespeichert.",type:"success"});
+  }
+  render() {
+    console.log(this.state)
+    return (
+      <div id="settings-frame">
+        Einstellungen
+        <div class="form-group ">
+          <label class="control-label " for="name">
+            Name
+          </label>
+          <input class="form-control" id="name" name="name" type="text" value={this.state.name} onChange={this.onChangeName}/>
+        </div>
+        <div class="form-group ">
+          <label class="control-label " for="name">
+            Anfangsdatum
+          </label>
+          <input class="form-control" id="name" name="name" type="date" onChange={this.onChangeStart} value={this.state.start} />
+        </div>
+        <hr/>
+        <button onClick={this.save}>Speichern</button>
+      </div>);
+  }
+}
diff --git a/src/jsx/ui/tasks.jsx b/src/jsx/ui/tasks.jsx
new file mode 100644
index 0000000..c800ff5
--- /dev/null
+++ b/src/jsx/ui/tasks.jsx
@@ -0,0 +1,94 @@
+import React from 'react';
+import {FileLoader} from './fileLoader'
+import {DB} from './../static/storage'
+
+const moment = require('moment');
+//import 'react-infinite-calendar/styles.css'; // only needs to be imported once
+
+var me;
+
+export class TasksUI extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      tasks:[{name:"",count:0,tid:0}],
+      dates:[],
+      selDate:"-",
+      taskss:""
+    }
+   
+    this.onTaskClick = this.onTaskClick.bind(this);
+    this.loadDay = this.loadDay.bind(this);
+  }
+  componentDidMount(){
+    var sql = "SELECT dt.task_id,t.taskName , COUNT(dt.day_id) FROM days_have_tasks as dt,tasks as t WHERE dt.task_id=t.id GROUP BY dt.task_id;";
+    var tmp = DB.cdb.exec(sql);
+    
+    if(tmp.length>0){
+        tmp = tmp[0].values
+        console.log(tmp)
+        var tt = [];
+        for(var t in tmp){
+            tt.push({tid:tmp[t][0],name:tmp[t][1],count:tmp[t][2]});
+        }
+        this.setState({tasks:tt});
+    }
+  }
+  onTaskClick(e){
+        var val = e.target.attributes.getNamedItem("data-value").value;
+        console.log(val);
+        var sql = "SELECT days.date FROM days_have_tasks as dt, days WHERE dt.day_id = days.id AND dt.task_id=:task_id ;"
+        var stmt = DB.cdb.prepare(sql);
+        var res = stmt.getAsObject(
+            {
+                ":task_id":val
+            }
+        )
+        var dates = [];
+        dates.push(res.date);
+        while (stmt.step()) dates.push(stmt.get()[0]);
+        this.setState({dates:dates});
+        // console.log(moment(stmt.get()[0]).format('DD.MM.YYYY'));
+
+
+        stmt.free();
+  }
+  loadDay(e){
+    var val = e.target.attributes.getNamedItem("data-value").value;
+    var today = DB.loadDate(new Date(val/1));
+    
+    this.setState({
+        selDate:val,
+        taskss:today.taskList.join(", ")
+    })
+  }
+  render(){
+    console.log(this.state.tasks)
+    return (
+    <div id="tasks-frame">
+        <table id="tasks">
+            <tbody>
+            <tr><th>Aufgaben Name</th><th>Anzahl</th></tr>
+            {Object.keys(this.state.tasks).map((item,val) => (
+                <tr data-value={this.state.tasks[item].tid} onClick={this.onTaskClick}>
+                    <td  data-value={this.state.tasks[item].tid}>{this.state.tasks[item].name}</td><td data-value={this.state.tasks[item].tid}>{this.state.tasks[item].count}</td>
+                </tr>)
+            )}
+            </tbody>
+        </table>
+        <table id="dates">
+            <tbody>
+            <tr><th>Datum</th></tr>
+            {this.state.dates.map((val)=>(
+                <tr><td><div onClick={this.loadDay} data-value={val}>{moment(val).format('DD.MM.YYYY')}</div></td></tr>
+                )
+            )}
+            </tbody>
+        </table>
+        <div id="info">
+            Date:{moment(this.state.selDate/1).format('DD.MM.YYYY')}<br/>
+            Aufgabe(n):{this.state.taskss}
+        </div>
+    </div>);
+  }
+}
diff --git a/src/jsx/ui/worktimes.jsx b/src/jsx/ui/worktimes.jsx
new file mode 100644
index 0000000..c8b94a3
--- /dev/null
+++ b/src/jsx/ui/worktimes.jsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import {
+    FileLoader
+} from './fileLoader'
+import {
+    DB
+} from './../static/storage'
+//import 'react-infinite-calendar/styles.css'; // only needs to be imported once
+
+var me;
+
+export class WorkTimes extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            rel: false
+        }
+    }
+    render() {
+        return ( <div id = "home-frame" >
+
+        </div>);
+    }
+}
\ No newline at end of file
diff --git a/src_less/main.less b/src_less/main.less
index 0d1a6af..669aa16 100644
--- a/src_less/main.less
+++ b/src_less/main.less
@@ -166,4 +166,6 @@ button.btn, button {
 @import './tabs.less';
 @import './fileloader.less';
 @import './print.less';
-@import './settings.less';
\ No newline at end of file
+@import './settings.less';
+@import './tasks.less';
+@import './notes.less';
\ No newline at end of file
diff --git a/src_less/notes.less b/src_less/notes.less
new file mode 100644
index 0000000..2bece00
--- /dev/null
+++ b/src_less/notes.less
@@ -0,0 +1,26 @@
+#notes-frame{
+    min-height:100vh;
+    display:flex;
+    #notes-list{
+        width: 200px;
+        border-right: 1px solid #454545;
+        .note{
+            &.heigh{
+                border-color: #DD0000;
+            }
+            &.normal{
+                border-color: #DDDD00;
+            }
+            &.low{
+                border-color: #00DD55;
+            }
+        }
+    }
+    #notes-edit{
+        padding: 10px;
+        textarea{
+            width: ~"calc(100vw - 450px)";
+            height: 300px;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src_less/tasks.less b/src_less/tasks.less
new file mode 100644
index 0000000..bada065
--- /dev/null
+++ b/src_less/tasks.less
@@ -0,0 +1,12 @@
+#tasks-frame{
+    display:flex;
+    #tasks{
+        width: 25em;
+    }
+    #dates{
+        width:8em;
+    }
+    #info{
+        width: 100%;
+    }
+}
\ No newline at end of file