diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..008153b
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,3 @@
+.idea/
+bower_components/
+node_modules/
diff --git a/bower.json b/bower.json
index 7672a37..312b831 100644
--- a/bower.json
+++ b/bower.json
@@ -5,17 +5,16 @@
     "T T"
   ],
   "dependencies": {
-    "webcomponentsjs": "Polymer/webcomponentsjs#^0.7.x",
-    "polymer": "Polymer/polymer#^1.x",
-    "iron-ajax": "PolymerElements/iron-ajax#^1.x",
-    "paper-drawer-panel": "PolymerElements/paper-drawer-panel#^1.x",
-    "paper-toolbar": "PolymerElements/paper-toolbar#^1.x",
-    "paper-icon-button": "PolymerElements/paper-icon-button#^1.x",
-    "iron-icons": "PolymerElements/iron-icons#^1.x",
-    "paper-badge": "PolymerElements/paper-badge#^1.x",
-    "paper-menu": "PolymerElements/paper-menu#^1.x",
-    "paper-item": "PolymerElements/paper-item#^1.x",
-    "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.x",
-    "paper-input": "PolymerElements/paper-input#^1.x"
+    "polymer": "Polymer/polymer#^2.0.0",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.2",
+    "iron-ajax": "PolymerElements/iron-ajax#^2.0",
+    "app-layout": "PolymerElements/app-layout#^2.0",
+    "paper-icon-button": "PolymerElements/paper-icon-button#^2.0",
+    "iron-icons": "PolymerElements/iron-icons#^2.0",
+    "paper-item": "PolymerElements/paper-item#^2.0",
+    "iron-flex-layout": "PolymerElements/iron-flex-layout#^2.0",
+    "paper-input": "PolymerElements/paper-input#^2.0",
+    "paper-listbox": "PolymerElements/paper-listbox#^2.0",
+    "polymer-redux": "^1.0.4"
   }
 }
diff --git a/elements/input-header.html b/elements/input-header.html
index 5586a31..738a719 100644
--- a/elements/input-header.html
+++ b/elements/input-header.html
@@ -1,4 +1,7 @@
-<link rel="import" href="../bower_components/polymer/polymer.html">
+<link rel="import" href="../bower_components/polymer/polymer-element.html">
+<link rel="import" href="../bower_components/app-layout/app-toolbar/app-toolbar.html">
+<link rel="import" href="../bower_components/iron-icon/iron-icon.html">
+<link rel="import" href="../bower_components/paper-input/paper-input.html">
 
 <dom-module id="input-header">
 
@@ -22,28 +25,34 @@
           @apply(--layout-vertical);
         }
     </style>
-    <paper-toolbar>
+    <app-toolbar>
         <paper-input class="search-box" no-label-float="true" value="{{label}}" on-keyup="_handleInput">
           <iron-icon prefix icon="label"></iron-icon>
         </paper-input>
-    </paper-toolbar>
+    </app-toolbar>
   </template>
 
   <script>
-    Polymer({
-      is: 'input-header',
-      properties: {
-        label: {
-          type: String,
-          notify: true
+    class InputHeader extends TaskView.ReduxMixin( Polymer.Element ) {
+        static get is() {
+            return 'input-header';
         }
-      },
-      _handleInput: function(e) {
+
+        static get properties() {
+            return {
+                label: {
+                    type: String,
+                    notify: true
+                }
+            }
+        }
+      _handleInput(e) {
         if (e.keyCode == 13) {
           this.editMode = false;
         }
       }
-    });
+    }
+    window.customElements.define(InputHeader.is, InputHeader);
   </script>
 
 </dom-module>
diff --git a/elements/opentasks-view.html b/elements/opentasks-view.html
index fd9e168..41383dc 100644
--- a/elements/opentasks-view.html
+++ b/elements/opentasks-view.html
@@ -1,27 +1,74 @@
-<link rel="import" href="../bower_components/polymer/polymer.html">
-<link rel="import" href="../bower_components/paper-drawer-panel/paper-drawer-panel.html">
+<link rel="import" href="../bower_components/polymer/polymer-element.html">
+<link rel="import" href="../bower_components/app-layout/app-drawer/app-drawer.html">
+<link rel="import" href="../bower_components/app-layout/app-drawer-layout/app-drawer-layout.html">
+<link rel="import" href="../bower_components/app-layout/app-header/app-header.html">
+<link rel="import" href="../bower_components/app-layout/app-header-layout/app-header-layout.html">
+<link rel="import" href="../bower_components/app-layout/app-scroll-effects/app-scroll-effects.html">
 <link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
 <link rel="import" href="task-list.html">
 <link rel="import" href="task-subtask-view.html">
+<link rel="import" href="redux-store.html">
 
 <dom-module id="opentasks-view">
 
   <template>
-    <iron-ajax url="tasks.json" last-response="{{tasks}}" auto></iron-ajax>
+    <style>
+      :host {
+        --app-primary-color: #008f65;
+        --app-secondary-color: black;
+        --app-drawer-width: 380px;
 
-    <paper-drawer-panel>
+        display: block;
+      }
 
-      <task-list drawer tasks="{{tasks}}" selected-task="{{selectedTask}}"></task-list>
+      app-drawer-layout:not([narrow]) [drawer-toggle] {
+        display: none;
+      }
 
-      <task-subtask-view main task="{{selectedTask}}"></task-subtask-view>
+      app-drawer-layout {
+        --app-drawer-layout-content-transition: margin 0.2s;
+      }
 
-    </paper-drawer-panel>
+      app-header {
+        color: #fff;
+        background-color: var(--app-primary-color);
+      }
+
+      app-header paper-icon-button {
+        --paper-icon-button-ink-color: white;
+      }
+    </style>
+
+    <app-drawer-layout fullbleed id="drawerLayout">
+      <app-drawer slot="drawer">
+        <task-list></task-list>
+      </app-drawer>
+      <div>
+        <task-subtask-view main task="{{selectedTask}}"></task-subtask-view>
+      </div>
+
+    </app-drawer-layout>
   </template>
 
   <script>
-    Polymer({
-      is: 'opentasks-view'
-    });
+    class OpentasksView extends TaskView.ReduxMixin(Polymer.Element) {
+        static get is() {
+            return 'opentasks-view';
+        }
+        static get properties() {
+            return {
+                selectedTask: {
+                    type: Object
+                }
+            }
+        }
+        connectedCallback() {
+            super.connectedCallback();
+            this.dispatch('fetchTasks', `tasks.json`);
+        }
+
+    }
+    window.customElements.define(OpentasksView.is, OpentasksView);
   </script>
 
 </dom-module>
diff --git a/elements/redux-actions.html b/elements/redux-actions.html
new file mode 100644
index 0000000..dba32aa
--- /dev/null
+++ b/elements/redux-actions.html
@@ -0,0 +1,42 @@
+<script>
+    (function() {
+        function requestTasks(url) {
+            return {
+                type: 'TASK_LOADING_STARTED',
+                url,
+            };
+        }
+
+        function receiveTasks(url, json) {
+            return {
+                type: 'TASK_LOADING_COMPLETED',
+                url,
+                items: Array.from(json),
+                receivedAt: Date.now()
+            };
+        }
+
+        function openTask(idx) {
+            return {
+                type: 'OPEN_TASK',
+                itemIdx: idx,
+            };
+        }
+
+        function fetchTasks(url) {
+            return (dispatch) => {
+                dispatch(requestTasks());
+                fetch(url, {})
+                    .then((response) => {
+                        return response.json();
+                    })
+                    .then((json) => { dispatch(receiveTasks(url, json));} );
+            };
+        }
+
+        TaskView.actions = {
+            fetchTasks,
+            openTask
+        };
+    }());
+</script>
diff --git a/elements/redux-middleware.html b/elements/redux-middleware.html
new file mode 100644
index 0000000..b322cab
--- /dev/null
+++ b/elements/redux-middleware.html
@@ -0,0 +1,70 @@
+<script src="../node_modules/redux-thunk/dist/redux-thunk.min.js"></script>
+
+<script>
+    (function() {
+        const callAPIMiddleware = ({ dispatch, getState }) => {
+            return next => action => {
+                const {
+                    types,
+                    callAPI,
+                    shouldCallAPI = () => true,
+                    payload = {}
+            } = action
+
+                if (!types) {
+                    console.log('normal action');
+                    // Normal action: pass it on
+                    return next(action)
+                }
+
+                if (
+                    !Array.isArray(types) ||
+                    types.length !== 3 ||
+                    !types.every(type => typeof type === 'string')
+                ) {
+                    throw new Error('Expected an array of three string types.')
+                }
+
+                if (typeof callAPI !== 'function') {
+                    throw new Error('Expected callAPI to be a function.')
+                }
+
+                if (!shouldCallAPI(getState())) {
+                    console.log('no api call');
+                    return
+                }
+
+                const [requestType, successType, failureType] = types
+
+                dispatch(
+                    Object.assign({}, payload, {
+                        type: requestType
+                    })
+                )
+
+                return callAPI().then(
+                    response =>
+                dispatch(
+                    Object.assign({}, payload, {
+                        response,
+                        type: successType
+                    })
+                ),
+                    error =>
+                dispatch(
+                    Object.assign({}, payload, {
+                        error,
+                        type: failureType
+                    })
+                )
+            )
+            }
+        }
+
+        TaskView.middleware = [
+            ReduxThunk.default,
+            callAPIMiddleware,
+        ];
+
+    }());
+</script>
diff --git a/elements/redux-reducers.html b/elements/redux-reducers.html
new file mode 100644
index 0000000..48b2395
--- /dev/null
+++ b/elements/redux-reducers.html
@@ -0,0 +1,33 @@
+<script src="../node_modules/redux/dist/redux.min.js"></script>
+
+<script>
+    (function() {
+
+        //const tasksReducer = () =
+        function tasksReducer(state = { loading: false, tasks: [] }, action) {
+            switch (action.type) {
+                case 'TASK_LOADING_STARTED':
+                    return Object.assign({}, state, {loading: true});
+
+                case 'TASK_LOADING_COMPLETED':
+                    return Object.assign({}, state, {
+                        loading: false,
+                        items: action.items
+                    });
+                case 'OPEN_TASK':
+                    return Object.assign({}, state, {
+                        items: state.items,
+                        selectedItem: state.items[action.itemIdx],
+                        loading: false
+                    });
+                default:
+                    return state;
+            }
+        }
+
+        TaskView.rootReducer = Redux.combineReducers({
+            tasks: tasksReducer,
+        });
+
+    }());
+</script>
diff --git a/elements/redux-store.html b/elements/redux-store.html
new file mode 100644
index 0000000..fa3326a
--- /dev/null
+++ b/elements/redux-store.html
@@ -0,0 +1,36 @@
+<link rel="import" href="../bower_components/polymer/polymer-element.html">
+<link rel="import" href="../bower_components/polymer-redux/polymer-redux.html">
+
+<link rel="import" href="redux-actions.html">
+<link rel="import" href="redux-middleware.html">
+<link rel="import" href="redux-reducers.html">
+
+<script>
+    (function() {
+
+        const composeEnhancers = typeof window === 'object' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
+            ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({})
+            : Redux.compose;
+
+        const enhancer = composeEnhancers(
+            Redux.applyMiddleware(...TaskView.middleware),
+            );
+
+        const store = Redux.createStore(TaskView.rootReducer, enhancer);
+
+        const reduxMixin = PolymerRedux(store);
+
+        /* @mixinFunction */
+        const actionsMixin = (superClass) => {
+            return class extends reduxMixin(superClass) {
+                static get actions() {
+                    return TaskView.actions
+                }
+            }
+        }
+
+        /* @mixinFunction */
+        TaskView.ReduxMixin = Polymer.dedupingMixin(actionsMixin);
+
+    }());
+</script>
diff --git a/elements/task-list.html b/elements/task-list.html
index a177039..4944b2c 100644
--- a/elements/task-list.html
+++ b/elements/task-list.html
@@ -1,21 +1,32 @@
-<link rel="import" href="../bower_components/polymer/polymer.html">
-<link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html">
+<link rel="import" href="../bower_components/polymer/polymer-element.html">
+<link rel="import" href="../bower_components/app-layout/app-toolbar/app-toolbar.html">
+<link rel="import" href="../bower_components/app-layout/app-header/app-header.html">
+<link rel="import" href="../bower_components/app-layout/app-header-layout/app-header-layout.html">
+<link rel="import" href="../bower_components/app-layout/app-toolbar/app-toolbar.html">
 <link rel="import" href="../bower_components/paper-item/paper-item.html">
 <link rel="import" href="../bower_components/paper-item/paper-item-body.html">
-<link rel="import" href="../bower_components/paper-menu/paper-menu.html">
+<link rel="import" href="../bower_components/paper-listbox/paper-listbox.html">
 <link rel="import" href="../bower_components/iron-icons/communication-icons.html">
 <link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="redux-store.html">
 
 <dom-module id="task-list">
 
   <template>
-    <paper-toolbar>
+    <style>
+      app-toolbar {
+        background-color: #4285f4;
+        color: #fff;
+      }
+    </style>
+
+    <app-toolbar>
       <paper-icon-button icon="inbox" id="inbox"></paper-icon-button>
-      <div class="title">Aufgaben</div>
-    </paper-toolbar>
+      <div main-title>Aufgaben</div>
+    </app-toolbar>
 
-    <paper-menu selected="{{_selectedIndex}}">
-      <template is="dom-repeat" items="{{tasks}}">
+    <paper-listbox selected="{{_selectedIndex}}">
+      <template is="dom-repeat" items="[[tasks]]">
         <paper-item>
           <paper-item-body two-line>
             <div>
@@ -26,42 +37,51 @@
           </paper-item-body>
         </paper-item>
       </template>
-    </paper-menu>
-
-    <array-selector id="selector" items="{{tasks}}" selected-item="{{selectedTask}}"></array-selector>
+    </paper-listbox>
 
   </template>
 
   <script>
-    Polymer({
+    class TaskList extends TaskView.ReduxMixin(Polymer.Element) {
+        static get is() {
+            return 'task-list';
+        }
 
-      is: 'task-list',
+        static get properties() {
+            return {
+              tasks: {
+                type: Array,
+                  statePath: 'tasks.items',
+                  observer: '_tasksChanged'
+              },
 
-      properties: {
-        tasks: {
-          type: Array,
-          observer: '_tasksChanged'
-        },
+              _selectedIndex: {
+                observer: '_selectedIndexChanged'
+              },
 
-        _selectedIndex: {
-          observer: '_selectedIndexChanged'
-        },
+              selectedTask: {
+                  type: Object,
+                  computed: '_getSelectedTask()',
+                  notify: true
+              }
 
-        selectedTask: {
-          notify: true
+            }
         }
 
-      },
-
-      _tasksChanged: function() {
+      _tasksChanged() {
         this._selectedIndex = 0;
-      },
+      }
+
+      _selectedIndexChanged(idx) {
+            this.dispatch('openTask', idx);
+      }
 
-      _selectedIndexChanged: function(idx) {
-        this.$.selector.select(this.tasks[idx]);
+      _getSelectedTask() {
+            return this.tasks ? this.tasks[this._selectedIndex] : undefined;
       }
 
-    });
+    }
+    window.customElements.define(TaskList.is, TaskList);
   </script>
 
 </dom-module>
diff --git a/elements/task-subtask-view.html b/elements/task-subtask-view.html
index 0456603..6c176a0 100644
--- a/elements/task-subtask-view.html
+++ b/elements/task-subtask-view.html
@@ -1,11 +1,12 @@
 <link rel="import" href="../bower_components/polymer/polymer.html">
-<link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html">
 <link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="../bower_components/iron-icons/iron-icons.html">
 <link rel="import" href="../bower_components/paper-input/paper-input.html">
 <link rel="import" href="../bower_components/paper-item/paper-item.html">
 <link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout.html">
 <link rel="import" href="../bower_components/paper-item/paper-item-body.html">
+<link rel="import" href="../bower_components/app-layout/app-header-layout/app-header-layout.html">
+<link rel="import" href="../bower_components/app-layout/app-header/app-header.html">
 
 <link rel="import" href="input-header.html">
 
@@ -24,9 +25,20 @@
       paper-input {
         padding: 10px;
       }
+
+       app-toolbar {
+         background-color: #4285f4;
+         color: #fff;
+       }
     </style>
 
-    <input-header label="{{task.title}}"></input-header>
+    <app-header-layout fullbleed has-scrolling-region="true">
+
+      <app-header slot="header" fixed condenses effects="waterfall">
+        <app-toolbar>
+          <input-header label="{{task.title}}"></input-header>
+        </app-toolbar>
+      </app-header>
 
     <div class="list">
       <template is="dom-repeat" items="{{task.tasks}}">
@@ -39,18 +51,26 @@
     </div>
 
     <paper-input label="Neue Teil-Aufgabe:" on-keyup="_handleInput"></paper-input>
+    </app-header-layout>
   </template>
 
   <script>
-    Polymer({
+      class TaskSubtaskView extends TaskView.ReduxMixin( Polymer.Element ) {
+          static get is() {
+              return 'task-subtask-view';
+          }
 
-      is: 'task-subtask-view',
+          static get properties() {
+              return {
+                  task: {
+                      type: Object,
+                      statePath: 'tasks.selectedItem'
+                  },
+              }
 
-      properties: {
-        task: Object
-      },
+          }
 
-      _handleInput: function(e) {
+      _handleInput(e) {
         if (e.keyCode == 13) {
           this.push('task.tasks', {
             text: e.target.value
@@ -60,7 +80,8 @@
         }
       }
 
-    });
+    }
+    window.customElements.define(TaskSubtaskView.is, TaskSubtaskView);
   </script>
 
 </dom-module>
diff --git a/index.html b/index.html
index a1ede68..8d371a8 100644
--- a/index.html
+++ b/index.html
@@ -1,14 +1,23 @@
 <!doctype html>
 <html>
 <head>
-  <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
+  <!-- Load webcomponents-loader.js to check and load any polyfills your browser needs -->
+  <script src="bower_components/webcomponentsjs/webcomponents-loader.js"></script>
+
+  <script src="node_modules/redux/dist/redux.js"></script>
+  <script src="node_modules/redux-thunk/dist/redux-thunk.js"></script>
+
   <title>Demo open task viewer</title>
 
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  <link rel="import" href="elements/opentasks-view.html">
+  <script>
+      // namespace
+      var TaskView = TaskView || {};
+  </script>
 
+  <link rel="import" href="elements/opentasks-view.html">
 </head>
 <body>
 
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..36e1cef
--- /dev/null
+++ b/package.json
@@ -0,0 +1,10 @@
+{
+  "name": "task-viewer",
+  "description": "polymer demo app",
+  "license": "",
+  "dependencies": {
+    "redux": "^3.6.0",
+    "redux-thunk": "^2.1.0",
+    "reselect": "^3.0.1"
+  }
+}
diff --git a/polymer.json b/polymer.json
new file mode 100644
index 0000000..ef1ca67
--- /dev/null
+++ b/polymer.json
@@ -0,0 +1,5 @@
+{
+  "lint": {
+    "rules": ["polymer-2"]
+  }
+}
diff --git a/elements/tasks.json b/tasks.json
similarity index 100%
rename from elements/tasks.json
rename to tasks.json
diff --git a/yarn.lock b/yarn.lock
new file mode 100644
index 0000000..9481b60
--- /dev/null
+++ b/yarn.lock
@@ -0,0 +1,42 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+js-tokens@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
+
+lodash-es@^4.2.1:
+  version "4.17.4"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.4.tgz#dcc1d7552e150a0640073ba9cb31d70f032950e7"
+
+lodash@^4.2.1:
+  version "4.17.4"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
+
+loose-envify@^1.1.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
+  dependencies:
+    js-tokens "^3.0.0"
+
+redux-thunk@^2.1.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.2.0.tgz#e615a16e16b47a19a515766133d1e3e99b7852e5"
+
+redux@^3.6.0:
+  version "3.7.2"
+  resolved "https://registry.yarnpkg.com/redux/-/redux-3.7.2.tgz#06b73123215901d25d065be342eb026bc1c8537b"
+  dependencies:
+    lodash "^4.2.1"
+    lodash-es "^4.2.1"
+    loose-envify "^1.1.0"
+    symbol-observable "^1.0.3"
+
+reselect@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/reselect/-/reselect-3.0.1.tgz#efdaa98ea7451324d092b2b2163a6a1d7a9a2147"
+
+symbol-observable@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.0.4.tgz#29bf615d4aa7121bdd898b22d4b3f9bc4e2aa03d"