diff --git a/.idea/dictionaries/User.xml b/.idea/dictionaries/User.xml
index 2f96b2b..30a058c 100644
--- a/.idea/dictionaries/User.xml
+++ b/.idea/dictionaries/User.xml
@@ -1,7 +1,10 @@
 <component name="ProjectDictionaryState">
   <dictionary name="User">
     <words>
+      <w>codefrog</w>
+      <w>deregister</w>
       <w>versioning</w>
+      <w>webp</w>
     </words>
   </dictionary>
 </component>
\ No newline at end of file
diff --git a/config/webpack.config.prod.js b/config/webpack.config.prod.js
index 7d2f3f1..043ae4d 100644
--- a/config/webpack.config.prod.js
+++ b/config/webpack.config.prod.js
@@ -313,6 +313,13 @@ module.exports = {
       // Ignores URLs starting from /__ (useful for Firebase):
       // https://github.com/facebookincubator/create-react-app/issues/2237#issuecomment-302693219
       navigateFallbackWhitelist: [/^(?!\/__).*/],
+      staticFileGlobs: [
+        'public/css/**.*',
+        'public/lib/**.*',
+        'public/Template/**.*',
+      ],
+      stripPrefix: 'src/static/', // stripPrefixMulti is also supported
+      mergeStaticsConfig: true, // if you don't set this to true, you won't see any webpack-emitted assets in your serviceworker config
       // Don't precache sourcemaps (they're large) and build asset manifest:
       staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/],
     }),
diff --git a/package.json b/package.json
index 2620880..5d13d35 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "eslint-plugin-jsx-a11y": "5.1.1",
     "eslint-plugin-react": "7.1.0",
     "extract-text-webpack-plugin": "3.0.0",
+    "fbjs": "^0.8.16",
     "file-loader": "0.11.2",
     "fs-extra": "3.0.1",
     "gh-pages": "^1.0.0",
diff --git a/public/Template/Application.html.tpl b/public/Template/Application.html.tpl
index b6353b2..c590e3e 100644
--- a/public/Template/Application.html.tpl
+++ b/public/Template/Application.html.tpl
@@ -5,7 +5,7 @@
                 <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
                     <a
                             class="material-icons mdc-toolbar__icon--menu"
-                            onClick={this.onMenuButtonClick.bind(this)}
+                            onClick={this.onMainButtonClick.bind(this)}
                     >menu</a>
                     <span class="mdc-toolbar__title catalog-title">Time Tracker</span>
                 </section>
@@ -13,12 +13,17 @@
         </header>
         <this.components.MainMenu
                 class="mdc-temporary-drawer"
-                open={this.state.menuOpen}
-                onClose={this.onMenuClose.bind(this)}
+                adapter={this.menuAdapter}
+                page={this.state.history.page}
+                onMenu={this.onMenuChange.bind(this)}
         />
 
         <main>
-            <h1 class="mdc-typography--display1">Hello World!</h1>
+            <br />
+            <div style={{textAlign:"right"}}>
+            Page: {this.state.history.page}<br />
+            Component: {this.state.currentComponent}
+            </div>
         </main>
     </div>
 </div>
diff --git a/public/Template/Menu/Main.html.tpl b/public/Template/Menu/Main.html.tpl
index 045153a..4572aa1 100644
--- a/public/Template/Menu/Main.html.tpl
+++ b/public/Template/Menu/Main.html.tpl
@@ -1,14 +1,14 @@
-<MDC.Drawer class="mdc-temporary-drawer" open={this.props.open} onClose={this.onClose.bind(this)}>
+<MDC.Drawer class="mdc-temporary-drawer" open={this.state.open} onClose={this.closeMenu.bind(this)}>
     <aside class={this.props.className}>
         <nav class={this.props.className + "__drawer"}>
             <div class={this.props.className + "__toolbar-spacer"}></div>
             <div class="mdc-list-group">
                 <nav class="mdc-list">
-                    <a class={this.props.className + "--selected mdc-list-item"}>
-                        <i class="material-icons mdc-list-item__start-detail" aria-hidden="true">inbox</i>Inbox
-                    </a>
-                    <a class="mdc-list-item">
-                        <i class="material-icons mdc-list-item__start-detail" aria-hidden="true">star</i>Star
+                    <a
+                            ref="settingsMenu"
+                            class={(this.props.page == 'settings' ? this.props.className + "--selected mdc-list--theme-dark" : "") + " mdc-list-item"}
+                    >
+                        <i class="material-icons mdc-list-item__start-detail" aria-hidden="true">settings applications</i> Anwendungseinstellungen
                     </a>
                 </nav>
             </div>
diff --git a/public/favicon-196x196.webp b/public/favicon-196x196.webp
new file mode 100644
index 0000000..0c97e80
Binary files /dev/null and b/public/favicon-196x196.webp differ
diff --git a/public/favicon-512x512.webp b/public/favicon-512x512.webp
new file mode 100644
index 0000000..c0c9241
Binary files /dev/null and b/public/favicon-512x512.webp differ
diff --git a/public/index.html b/public/index.html
index fb58a6b..c33bce8 100644
--- a/public/index.html
+++ b/public/index.html
@@ -16,7 +16,7 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
     <link rel="stylesheet" href="%PUBLIC_URL%/css/material-components-web.min.css">
     <script src="%PUBLIC_URL%/lib/babel.min.js"></script>
-    <script src="%PUBLIC_URL%/lib/material-components-web.min.js"></script>
+    <!--script src="%PUBLIC_URL%/lib/material-components-web.min.js"></script-->
     <style>
         html {
             height: 100%;
@@ -24,10 +24,10 @@
         body {
             padding: 0;
             margin: 0;
-            height: 100%;
+            height: 100vh;
         }
         .height100p {
-            height: 100%;
+            height: 100vh;
         }
         .page-wrapper {
             display: flex;
@@ -35,14 +35,14 @@
             padding: 0;
             margin: 0;
             box-sizing: border-box;
-            height: 100%;
+            height: 100vh;
             width: 100%;
         }
         .content {
             display: inline-flex;
             flex-direction: column;
             flex-grow: 1;
-            height: 100%;
+            height: 100vh;
             box-sizing: border-box;
         }
 
diff --git a/public/manifest.json b/public/manifest.json
index fa50fe2..fa21782 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -3,9 +3,9 @@
   "name": "Codefrog Time Tracker",
   "icons": [
     {
-      "src": "favicon-196x196.png",
+      "src": "favicon-196x196.webp",
       "sizes": "196x196",
-      "type": "image/png"
+      "type": "image/webp"
     },
     {
       "src": "favicon-512x512.png",
diff --git a/src/Application/Application.js b/src/Application/Application.js
index 4d4e446..d920e94 100644
--- a/src/Application/Application.js
+++ b/src/Application/Application.js
@@ -1,5 +1,7 @@
+import React from 'react';
 import Component from '../Shared/LiveJSX';
 import Menu from '../Menu';
+import Router from './Router';
 
 /**
  * Root Application.
@@ -31,23 +33,67 @@ class Application extends Component {
     this.state = Object.assign(
       this.state,
       {
-        menuOpen: false
+        currentComponent: <div/>,
+        history:          {
+          page: 'none'
+        }
       }
     );
+
+    this.menuAdapter = {
+      registerMenuToggleHandler:   this.registerMenuToggleHandler.bind(this),
+      deregisterMenuToggleHandler: this.deregisterMenuToggleHandler.bind(this)
+    };
+
+    this.registeredButtonHandler = [];
+  }
+
+  onMainButtonClick() {
+    this.registeredButtonHandler.forEach(handler => handler());
   }
 
   /**
    * Set state to menu is closed.
    */
-  onMenuClose() {
-    this.setState({menuOpen: false});
+  onMenuChange(menu) {
+    // TODO: router stuff here?
+    this.setState({history: {page: menu}});
   }
 
   /**
-   * Toggle open state.
+   * Register handle for the main button click.
+   *
+   * @param {[[Function]]} handler
    */
-  onMenuButtonClick() {
-    this.setState({menuOpen: !this.state.menuOpen});
+  registerMenuToggleHandler(handler) {
+    this.registeredButtonHandler.push(handler);
+  }
+
+  /**
+   * Remove handler for main button click.
+   *
+   * @param {[[Function]]} handler
+   */
+  deregisterMenuToggleHandler(handler) {
+    const index = this.registeredButtonHandler.indexOf(handler);
+    if (index === -1) {
+      return;
+    }
+    this.registeredButtonHandler.splice(index, 1);
+  }
+
+  /**
+   * Adding singleton components to application.
+   *
+   * @returns {XML}
+   */
+  render() {
+    return (
+      <div>
+        <Router/>
+        {super.render()}
+      </div>
+    );
   }
 }
 
diff --git a/src/Application/Application.test.js b/src/Application/Application.test.js
index 808858a..d004171 100644
--- a/src/Application/Application.test.js
+++ b/src/Application/Application.test.js
@@ -16,7 +16,6 @@ describe('Application', function testApplication() {
     Babel.transform.mockClear();
   });
 
-
   /**
    * Test if correct layout loaded.
    */
@@ -45,15 +44,24 @@ describe('Application', function testApplication() {
     );
     Babel.transform.mockReturnValue(
       {
-        code: 'React.createElement(\'button\', { onClick: this.onMenuButtonClick.bind(this) })'
+        code: 'React.createElement(\'button\', { onClick: this.onMainButtonClick.bind(this) })'
       }
     );
 
-    const wrapper = shallow(<Application/>);
+    const wrapper     = shallow(<Application/>);
+    const instance    = wrapper.instance();
+    const buttonClick = jest.fn();
+
+    instance.menuAdapter.registerMenuToggleHandler(buttonClick);
     bound({data: 'TEMPLATE'});
     wrapper.update();
+
     wrapper.find('button').simulate('click');
-    wrapper.instance().onMenuClose();
+    expect(buttonClick).toHaveBeenCalled();
     expect(success).toBe(true);
+
+    instance.onMenuChange('newMenu');
+    instance.menuAdapter.deregisterMenuToggleHandler(buttonClick);
+    instance.menuAdapter.deregisterMenuToggleHandler(buttonClick); // check that double remove don't break
   });
 });
diff --git a/src/Application/Router/Router.js b/src/Application/Router/Router.js
new file mode 100644
index 0000000..04a782c
--- /dev/null
+++ b/src/Application/Router/Router.js
@@ -0,0 +1,13 @@
+import React from 'react';
+
+/**
+ * The History API connection.
+ */
+class Router extends React.Component
+{
+  render() {
+    return null;
+  }
+}
+
+export default Router;
diff --git a/src/Application/Router/index.js b/src/Application/Router/index.js
new file mode 100644
index 0000000..9ae8490
--- /dev/null
+++ b/src/Application/Router/index.js
@@ -0,0 +1,6 @@
+import Router from './Router';
+
+export default Object.assign(
+  Router,
+  {}
+);
diff --git a/src/Menu/Main/Main.js b/src/Menu/Main/Main.js
index 57ad0c2..1be8dd0 100644
--- a/src/Menu/Main/Main.js
+++ b/src/Menu/Main/Main.js
@@ -1,5 +1,6 @@
 import Component from '../../Shared/LiveJSX';
 import PropTypes from 'prop-types';
+import emptyFunction from 'fbjs/lib/emptyFunction';
 
 /**
  * The Main menu.
@@ -23,30 +24,94 @@ class MainMenu extends Component
   static get propTypes() {
     return {
       className: PropTypes.string.isRequired,
-      onOpen:    PropTypes.func,
-      onClose:   PropTypes.func,
-      open:      PropTypes.bool
+      adapter:   PropTypes.object,
+      onMenu:    PropTypes.func
     };
   }
 
   /**
-   * Proxy open event, if bound.
-   * @param event
+   * Default adapter to interact with outer world.
+   *
+   * @returns {Object}
    */
-  onOpen(event) {
-    if (this.props.onOpen) {
-      this.props.onOpen(event);
-    }
+  static get defaultAdapter() {
+    return {
+      registerMenuToggleHandler:   emptyFunction,
+      deregisterMenuToggleHandler: emptyFunction
+    };
+  }
+
+  /**
+   * Constructor.
+   *
+   * @param {Object} props
+   * @param {Object} context
+   * @param {Object} updater
+   */
+  constructor(props, context, updater) {
+    super(props, context, updater);
+
+    Object.assign(
+      this.state,
+      {
+        open: false
+      }
+    );
+
+    /**
+     * @type {MainMenu.defaultAdapter}
+     */
+    this.adapter = Object.assign(
+      MainMenu.defaultAdapter,
+      props.adapter
+    );
+
+    this.boundToggleMenu        = this.toggleMenu.bind(this);
+    this.boundMenuSettingsClick = this.onMenuClick.bind(this, 'settings');
+  }
+
+  /**
+   * Menu state toggle.
+   */
+  toggleMenu() {
+    this.setState({open: !this.state.open});
   }
 
   /**
-   * Proxy close event, if bound.
-   * @param event
+   * Close menu.
    */
-  onClose(event) {
-    if (this.props.onClose) {
-      this.props.onClose(event);
+  closeMenu() {
+    this.setState({open: false});
+  }
+
+  /**
+   * Menu click proxy.
+   *
+   * @param {string} menu
+   */
+  onMenuClick(menu) {
+    if (this.props.onMenu) {
+      this.props.onMenu(menu);
     }
+    this.closeMenu();
+  }
+
+  /**
+   * Connect low level events and adapter interactions.
+   *
+   * *Notice:* MDC Drawer caches the event, so take them from low level.
+   */
+  onTemplateMounted(domNode) {
+    this.refs.settingsMenu.addEventListener('click', this.boundMenuSettingsClick);
+    this.adapter.registerMenuToggleHandler(this.boundToggleMenu);
+  }
+
+  /**
+   * Release interaction connections.
+   */
+  componentWillUnmount() {
+    this.refs.settingsMenu.removeEventListener('click', this.boundMenuSettingsClick);
+    this.adapter.deregisterMenuToggleHandler(this.boundToggleMenu);
   }
 }
 
diff --git a/src/Menu/Main/Main.test.js b/src/Menu/Main/Main.test.js
index 2cd3d73..c62ae92 100644
--- a/src/Menu/Main/Main.test.js
+++ b/src/Menu/Main/Main.test.js
@@ -1,6 +1,7 @@
 import {mockAxiosAction} from 'axios';
 import React from 'react';
 import {shallow} from 'enzyme';
+jest.mock('react-dom');
 import Main from './Main';
 
 
@@ -12,7 +13,7 @@ describe('Main Menu', function testMain() {
   /**
    * Test if correct layout loaded.
    */
-  it('Loads the correct layout', function testLoadLayout() {
+  it('Loads layout and do interactions', function testLoadLayout() {
     let bound     = null;
     const promise = {
       then:  function onThen(callback) {
@@ -36,24 +37,39 @@ describe('Main Menu', function testMain() {
       }
     );
 
-    let wasOpen  = false;
-    let wasClose = false;
+    let wasMenu = "";
+    let registeredHandler = false;
 
-    const wrapper = shallow(<Main className="test" onOpen={() => wasOpen = true} onClose={() => wasClose = true}/>);
+    const adapter =  {
+      registerMenuToggleHandler: (handler) => registeredHandler = handler,
+      deregisterMenuToggleHandler: jest.fn()
+    };
+
+    const wrapper = shallow(<Main adapter={adapter} className="test" onMenu={(menu) => wasMenu = menu}/>);
+    let instance = wrapper.instance();
+    instance.refs = {
+      settingsMenu: {
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn()
+      }
+    };
     bound({data: 'TEMPLATE'});
+    wrapper.setProps({});
+
     expect(success).toBe(true);
+    expect(registeredHandler).not.toBe(false);
+    registeredHandler();
 
-    let instance = wrapper.instance();
-    instance.onOpen();
-    instance.onClose();
-    expect(wasOpen).toBe(true);
-    expect(wasClose).toBe(true);
+    instance.onMenuClick("one");
+    expect(wasMenu).toBe("one");
+
+    wrapper.unmount();
+    expect(instance.refs.settingsMenu.removeEventListener).toHaveBeenCalled();
 
 
     // cover else path
     const wrapperCov = shallow(<Main className="test"/>);
     instance = wrapperCov.instance();
-    instance.onOpen();
-    instance.onClose();
+    instance.onMenuClick("two");
   });
 });
diff --git a/src/Shared/MDC/Drawer.js b/src/Shared/MDC/Drawer.js
index d551c04..50f96a7 100644
--- a/src/Shared/MDC/Drawer.js
+++ b/src/Shared/MDC/Drawer.js
@@ -60,6 +60,13 @@ class Drawer extends React.Component {
 
     if (this.drawer) {
       this.drawer.open = this.props.open;
+      /**
+       * Interaction with MDC could be via adapter...but currently I use the refs-List of React to take the click
+       * events of the drawer elements.
+       *
+      console.log("Adapter", this.drawer.foundation_.adapter_);
+      this.drawer.foundation_.adapter_.registerDrawerInteractionHandler('click', (event) => console.log('?!!>> ', event));
+       */
     }
   }