diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..ec2deb3
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,9 @@
+// Place your settings in this file to overwrite default and user settings.
+{
+    "files.exclude": {
+        "**/.git": true,
+        "**/.svn": true,
+        "**/.DS_Store": true,
+        "temp": true
+    }
+}
\ No newline at end of file
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
new file mode 100644
index 0000000..8225e67
--- /dev/null
+++ b/CONTRIBUTING.md
@@ -0,0 +1,43 @@
+# Contributing to Inversify
+
+## Setup
+
+1 - Clone your fork of the repository:
+```
+$ git clone https://github.com/YOUR_USERNAME/inversify-devtools.git
+```
+
+2 - Install typings:
+```
+$ npm install -g typings
+```
+
+3 - Install type definitions:
+```
+$ typings install
+```
+
+4 - Install npm dependencies:
+```
+$ npm install
+```
+
+5 - Run build process
+```
+$ gulp
+```
+
+## Guidelines
+
+- Please try to [combine multiple commits before pushing](http://stackoverflow.com/questions/6934752/combining-multiple-commits-before-pushing-in-git)
+
+- Please use `TDD` when fixing bugs. This means that you should write a unit test that fails because it reproduces the issue, 
+then fix the issue finally run the test to ensure that the issue has been resolved. This helps us to prevent fixed bugs from 
+happening again in the future.
+
+- Please keep the test coverage at 100%. Write additional unit test if necessary
+
+-  Please create an issue before sending a PR ff your it is going to change the public interface of InversifyJS or it 
+includes significant architecture changes.
+
+- Feel free to ask for help from other members of the InversifyJS team via the chat / mailing list or github issues.
\ No newline at end of file
diff --git a/package.json b/package.json
index 77be41b..b597fd4 100644
--- a/package.json
+++ b/package.json
@@ -26,8 +26,8 @@
   "dependencies": {
     "bootstrap": "^3.3.6",
     "font-awesome": "^4.6.1",
-    "inversify-dts": "^1.0.5",
-    "inversify-logger-middleware": "^1.0.0-beta.5",
+    "inversify-dts": "^1.0.7",
+    "inversify-logger-middleware": "^1.0.0-beta.6",
     "react": "^15.0.1",
     "react-dom": "^15.0.1",
     "react-json-tree": "^0.7.4",
@@ -45,13 +45,13 @@
     "gulp": "^3.9.1",
     "gulp-tslint": "^5.0.0",
     "gulp-typescript": "^2.13.0",
-    "inversify": "^2.0.0-beta.8",
-    "reflect-metadata": "^0.1.3",
+    "inversify": "^2.0.0-beta.10",
     "publish-please": "^2.1.4",
     "redux-devtools": "^3.2.0",
     "redux-devtools-dock-monitor": "^1.1.1",
     "redux-devtools-log-monitor": "^1.0.11",
     "redux-logger": "^2.6.1",
+    "reflect-metadata": "^0.1.3",
     "run-sequence": "^1.1.5",
     "tslint": "^3.8.1",
     "vinyl-buffer": "^1.0.0",
diff --git a/src/actions/app_actions.ts b/src/actions/app_actions.ts
index 59c87c2..3003475 100644
--- a/src/actions/app_actions.ts
+++ b/src/actions/app_actions.ts
@@ -6,12 +6,13 @@ import SelectableKernel from "../core/selectable_kernel";
 
 let resize = makeActionCreator(ACTION_TYPES.RESIZE, "width", "height");
 let appInitSuccess = makeActionCreator(ACTION_TYPES.APP_INIT_SUCCESS, "kernel");
+let initSettings = makeActionCreator(ACTION_TYPES.APP_SETTINGS_SUCCESS, "settings");
 
 function appInitAsync() {
     return function(dispatch: Redux.Dispatch) {
 
-        let attachLogger = function(kernel: inversify.IKernel) {
-            let logger = getLogger(loggerActions.addLogEntry, dispatch);
+        let attachLogger = function(kernel: inversify.interfaces.Kernel) {
+            let logger = getLogger(loggerActions.addLogEntry, initSettings, dispatch);
             kernel.applyMiddleware(logger);
             let selectableKernel = new SelectableKernel(kernel);
             dispatch(appInitSuccess(selectableKernel));
diff --git a/src/actions/logger_actions.ts b/src/actions/logger_actions.ts
index 72931f0..c746031 100644
--- a/src/actions/logger_actions.ts
+++ b/src/actions/logger_actions.ts
@@ -3,10 +3,14 @@ import ACTION_TYPES from "../constants/action_types";
 
 let addLogEntry = makeActionCreator(ACTION_TYPES.ADD_LOG_ENTRY, "entry");
 let selectRequest = makeActionCreator(ACTION_TYPES.SELECT_LOG_ENTRY, "entry");
+let filterRequests = makeActionCreator(ACTION_TYPES.FILTER_LOG_ENTRIES, "filterBy");
+let clearRequests = makeActionCreator(ACTION_TYPES.CLEAR_LOG);
 
 let loggerActions = {
     addLogEntry,
-    selectRequest
+    selectRequest,
+    filterRequests,
+    clearRequests
 };
 
 export default loggerActions;
diff --git a/src/actions/settings_actions.ts b/src/actions/settings_actions.ts
new file mode 100644
index 0000000..243c900
--- /dev/null
+++ b/src/actions/settings_actions.ts
@@ -0,0 +1,21 @@
+import { makeActionCreator } from "../utils/utils";
+import ACTION_TYPES from "../constants/action_types";
+import interfaces from "../interfaces/interfaces";
+
+let saveSettingsSuccess = makeActionCreator(ACTION_TYPES.SAVE_SETTINGS_SUCCESS);
+let saveSettingsError = makeActionCreator(ACTION_TYPES.SAVE_SETTINGS_ERROR, "exception");
+
+let saveSettingsAsync = function (settings: interfaces.UserSettings) {
+    try {
+        window.localStorage.setItem("inversify_settings", JSON.stringify(settings));
+        return saveSettingsSuccess();
+    } catch (e) {
+        return saveSettingsError(e);
+    }
+};
+
+let settingsActions = {
+    saveSettingsAsync
+};
+
+export default settingsActions;
diff --git a/src/components/binding_explorer.tsx b/src/components/binding_explorer.tsx
index c1d7b10..eca5b47 100644
--- a/src/components/binding_explorer.tsx
+++ b/src/components/binding_explorer.tsx
@@ -43,11 +43,11 @@ class BindingExplorer extends React.Component<any, any> {
 
     public render() {
         return (
-            <Panel title={"Bindings"} subtitle={"Explorer"} columnSize={this.props.columnSize} height={this.props.height}>
+            <Panel title={"Services"} subtitle={"Explorer"} columnSize={this.props.columnSize} height={this.props.height}>
                 <div className="customAlert" role="alert">
                     <i className="fa fa-info-circle" aria-hidden="true"></i>
                     Services with more than one implementation are displayed in yellow.
-                    Remember to add some metadata and constrints to avoid ambiguous match exceptions!
+                    Remember to add some metadata and constraints to avoid ambiguous match exceptions!
                 </div>
                 {this._renderBindings(this.props.dictionary)}
             </Panel>
diff --git a/src/components/binding_props_explorer.tsx b/src/components/binding_props_explorer.tsx
index 10e4e01..e5e2972 100644
--- a/src/components/binding_props_explorer.tsx
+++ b/src/components/binding_props_explorer.tsx
@@ -12,7 +12,7 @@ class BindingPropsExplorer extends React.Component<any, any> {
 
     public render() {
         return (
-            <Panel title={"Binding Props"} subtitle={"Explorer"} columnSize={this.props.columnSize} height={this.props.height}>
+            <Panel title={"Implementations"} subtitle={"Explorer"} columnSize={this.props.columnSize} height={this.props.height}>
                 <div className="entryDetails">
                     <JSONTree data={this.props.bindings} theme={theme} isLightTheme={true} />
                 </div>
diff --git a/src/components/kernel_explorer.tsx b/src/components/kernel_explorer.tsx
index 7b45902..d9a1a97 100644
--- a/src/components/kernel_explorer.tsx
+++ b/src/components/kernel_explorer.tsx
@@ -1,6 +1,7 @@
 import * as React from "react";
 import { Link } from "react-router";
 import Panel from "./panel";
+import interfaces from "../interfaces/interfaces";
 
 const dir = {
     close: "&#9657",
@@ -21,16 +22,16 @@ class KernelExplorer extends React.Component<any, any> {
         );
     }
 
-    private _handleClick(kernel: ISelectableKernel) {
+    private _handleClick(kernel: interfaces.SelectableKernel) {
         this.props.selectKernel(kernel);
     }
 
-    private _renderKernels(kernels: ISelectableKernel[]) {
-        return kernels.map((kernel: ISelectableKernel, id: number) => {
+    private _renderKernels(kernels: interfaces.SelectableKernel[]) {
+        return kernels.map((kernel: interfaces.SelectableKernel, id: number) => {
             return (
                 <div key={id} className="request requestBox defaultBox" onClick={(e) => { this._handleClick(kernel); }}>
                     <div class="title">
-                        <h6>GUID: {kernel.guid}</h6>
+                        <h6>GUID: {kernel.details.guid}</h6>
                         <h2>Kernel</h2>
                     </div>
                 </div>
diff --git a/src/components/log_details.tsx b/src/components/log_details.tsx
index ab60924..0fa4152 100644
--- a/src/components/log_details.tsx
+++ b/src/components/log_details.tsx
@@ -2,6 +2,7 @@ import * as React from "react";
 import Panel from "./panel";
 import JSONTree from "react-json-tree";
 import theme from "../constants/json_tree_theme";
+import interfaces from "../interfaces/interfaces";
 
 class LogDetails extends React.Component<any, any> {
 
@@ -26,7 +27,7 @@ class LogDetails extends React.Component<any, any> {
         );
     }
 
-    private _renderEntry(entry: ISelectableLogEntry) {
+    private _renderEntry(entry: interfaces.SelectableLogEntry) {
 
         if (entry.details.error) {
 
diff --git a/src/components/menu.tsx b/src/components/menu.tsx
index 823c18e..2185b39 100644
--- a/src/components/menu.tsx
+++ b/src/components/menu.tsx
@@ -2,16 +2,16 @@ import * as React from "react";
 import { Link } from "react-router";
 
 class Menu extends React.Component<any, any> {
-    
+
     public constructor(props: any) {
         super(props);
     }
-    
+
     public render() {
         return (
             <div className="menu" style={{height: this.props.height, width: this.props.width }}>
                 <ul>
-                    <li className={ (this.props.page === "") ? "active" : "" }>
+                    <li className={ (this.props.page === "" || this.props.page === "logger") ? "active" : "" }>
                         <Link to="/logger">
                             <i className="fa fa-terminal" aria-hidden="true" />
                         </Link>
@@ -21,7 +21,7 @@ class Menu extends React.Component<any, any> {
                             <i className="fa fa-map-o" aria-hidden="true" />
                         </Link>
                     </li>
-                    <li className={ (this.props.page === "playground") ? "active" : "" }>
+                    <li className={ (this.props.page === "playground") ? "hide active" : "hide" }> /* TEMP HIDE CLASS */
                         <Link to="/playground">
                             <i className="fa fa-play-circle-o" aria-hidden="true" />
                         </Link>
diff --git a/src/components/playground.tsx b/src/components/playground.tsx
index e4b5c2f..223f0e2 100644
--- a/src/components/playground.tsx
+++ b/src/components/playground.tsx
@@ -10,7 +10,7 @@ class Playground extends React.Component<any, any> {
 
     public render() {
         return (
-            <Panel title={"Playground"} subtitle={"InversifyJS"} 
+            <Panel title={"Playground"} subtitle={"Editor"}
                    columnSize={this.props.columnSize} height={this.props.height}>
 
                 <div className="customAlert" role="alert">
diff --git a/src/components/request_log.tsx b/src/components/request_log.tsx
index 9f01999..8246c99 100644
--- a/src/components/request_log.tsx
+++ b/src/components/request_log.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
 import Panel from "./panel";
+import interfaces from "../interfaces/interfaces";
 
 class RequestLog extends React.Component<any, any> {
 
@@ -9,32 +10,69 @@ class RequestLog extends React.Component<any, any> {
 
     public render() {
 
-        let entries = this.props.log.map((entry: ISelectableLogEntry, i: number) => {
+        let entries = this.props.log.map((entry: interfaces.SelectableLogEntry, i: number) => {
             return this._renderEntry(entry, i);
         });
 
         return (
             <Panel title={"Requests Log"} subtitle={"Explorer"} columnSize={this.props.columnSize} height={this.props.height}>
+                <div className="panelTopMenu">
+                    <ul>
+                        <li>
+                            <a className={this.props.filter === "ALL" ? "active" : ""}
+                               onClick={() => { this._onFilterHandler("ALL"); }}>ALL</a>
+                        </li>
+                        <li>
+                            <a className={this.props.filter === "SUCCESS" ? "active" : ""}
+                               onClick={() => { this._onFilterHandler("SUCCESS"); }}>SUCCESS</a>
+                        </li>
+                        <li>
+                            <a className={this.props.filter === "ERROR" ? "active" : ""}
+                               onClick={() => { this._onFilterHandler("ERROR"); }}>ERROR</a>
+                        </li>
+                        <li>
+                            <a onClick={this._onClearHandler.bind(this)}>CLEAR</a>
+                        </li>
+                    </ul>
+                </div>
                 {entries}
             </Panel>
         );
 
     }
 
-    private _renderResult(entry: ISelectableLogEntry) {
+    private _onClearHandler() {
+        this.props.clearRequests();
+    }
+
+    private _onFilterHandler(filterBy: string) {
+        this.props.filterRequests(filterBy);
+    }
+
+    private _renderResult(entry: interfaces.SelectableLogEntry) {
         return entry.details.error ? entry.details.exception.message : entry.details.results[0].constructor.name;
     }
 
-    private _renderTime(entry: ISelectableLogEntry) {
+    private _renderTime(entry: interfaces.SelectableLogEntry) {
         return entry.details.error ? `ERROR!` : `SUCCESS: ${entry.details.time} ms`;
     }
 
-    private _handleClick(entry: ISelectableLogEntry) {
+    private _handleClick(entry: interfaces.SelectableLogEntry) {
         this.props.selectRequest(entry);
     }
 
-    private _renderEntry(entry: ISelectableLogEntry, id: number) {
+    private _renderEntry(entry: interfaces.SelectableLogEntry, id: number) {
+
+        // set box color based on status 
         let classes = `request requestBox ${entry.details.error ? "errorBox" : "successBox"}`;
+
+        // hide based on filter
+        let filterByErrorAndEntryIsNotAnError = (this.props.filter === "ERROR" && entry.details.error === false);
+        let filterBySuccessAndEntryIsAnError = (this.props.filter === "SUCCESS" && entry.details.error === true);
+        if (filterByErrorAndEntryIsNotAnError || filterBySuccessAndEntryIsAnError) {
+            classes = "hide";
+        }
+
         return (
             <div key={id} className={classes} onClick={(e) => { this._handleClick(entry); }}>
                 <div class="title">
diff --git a/src/components/request_tree.tsx b/src/components/request_tree.tsx
new file mode 100644
index 0000000..39f74ce
--- /dev/null
+++ b/src/components/request_tree.tsx
@@ -0,0 +1,21 @@
+import * as React from "react";
+import Panel from "./panel";
+import interfaces from "../interfaces/interfaces";
+
+class RequestTree extends React.Component<any, any> {
+
+    public constructor(props: any) {
+        super(props);
+    }
+
+    public render() {
+        return (
+            <Panel title={"Composition Tree"} subtitle={"Explorer"} columnSize={this.props.columnSize} height={this.props.height}>
+                // TODO
+            </Panel>
+        );
+    }
+
+}
+
+export default RequestTree;
diff --git a/src/components/settings.tsx b/src/components/settings.tsx
index dfd96b6..39bcaf0 100644
--- a/src/components/settings.tsx
+++ b/src/components/settings.tsx
@@ -1,6 +1,7 @@
 import * as React from "react";
 import { Link } from "react-router";
 import Panel from "./panel";
+import getDefaultSettings from "../core/default_settings";
 
 class SettingsEditor extends React.Component<any, any> {
 
@@ -15,14 +16,23 @@ class SettingsEditor extends React.Component<any, any> {
                     <div className="form-group">
                         <label htmlFor="settings_log_size">Maximun Log Size:</label>
                         <input type="text" className="form-control" style={{ width: "50%" }}
-                               id="settings_log_size" placeholder="Maximun number of entries in the request log" />
+                               id="settings_log_size"
+                               placeholder="Maximun number of entries in the request log"
+                               defaultValue={this.props.settings.size} />
                     </div>
-                    <button type="button" className="btn btn-default">Save Changes</button>
+                    <button type="button" className="btn btn-default"
+                            onClick={this._handleSaveClick.bind(this)}>Save Changes</button>
                 </div>
             </Panel>
         );
     }
 
+    private _handleSaveClick() {
+        let settings = getDefaultSettings();
+        settings.size = 20; // TODO
+        this.props.saveSettingsAsync(settings);
+    }
+
 }
 
 export default SettingsEditor;
diff --git a/src/constants/action_types.ts b/src/constants/action_types.ts
index 7302333..5c64b05 100644
--- a/src/constants/action_types.ts
+++ b/src/constants/action_types.ts
@@ -1,7 +1,12 @@
 const ACTION_TYPES = {
     ADD_LOG_ENTRY: "ADD_LOG_ENTRY",
     APP_INIT_SUCCESS: "APP_INIT_SUCCESS",
+    APP_SETTINGS_SUCCESS: "APP_SETTINGS_SUCCESS",
+    CLEAR_LOG: "CLEAR_LOG",
+    FILTER_LOG_ENTRIES: "FILTER_LOG_ENTRIES",
     RESIZE: "RESIZE",
+    SAVE_SETTINGS_ERROR: "SAVE_SETTINGS_ERROR",
+    SAVE_SETTINGS_SUCCESS: "SAVE_SETTINGS_SUCCESS",
     SELECT_BINDING: "SELECT_BINDING",
     SELECT_KERNEL: "SELECT_KERNEL",
     SELECT_LOG_ENTRY: "SELECT_LOG_ENTRY"
diff --git a/src/containers/pages/bindings_page.tsx b/src/containers/pages/bindings_page.tsx
index 3ff9abd..8e2b390 100644
--- a/src/containers/pages/bindings_page.tsx
+++ b/src/containers/pages/bindings_page.tsx
@@ -5,6 +5,7 @@ import bindingsActions from "../../actions/bindings_actions";
 import KernelExplorer from "../../components/kernel_explorer";
 import BindingExplorer from "../../components/binding_explorer";
 import BindingPropsExplorer from "../../components/binding_props_explorer";
+import interfaces from "../../interfaces/interfaces";
 
 function mapStateToPropsReposPage(state: any) {
     return {
@@ -20,20 +21,23 @@ class BindingsPage extends React.Component<any, void> {
     public render() {
 
         let kernels = this.props.app.get("kernels").toJSON();
-        let selectedKernel = kernels.filter((kernel: ISelectableKernel) => {
+        let selectedKernel: interfaces.SelectableKernel = kernels.filter((kernel: interfaces.SelectableKernel) => {
             return kernel.selected === true;
         })[0];
 
         let dictionary: any[] = [];
         let valuesOfSelectedKey: any = [];
         if (selectedKernel) {
-            dictionary = (selectedKernel.details._bindingDictionary._dictionary);
+            let _details: any = selectedKernel.details;
+            dictionary = (_details._bindingDictionary._dictionary);
             let selectedKeyVal = dictionary.filter((keyVal: any) => {
                 return keyVal.selected === true;
             })[0];
             valuesOfSelectedKey = selectedKeyVal ? selectedKeyVal.value : [];
         }
 
+        let selectedKernelGuid = selectedKernel ? selectedKernel.details.guid : "";
+
         return (
             <div>
                 <KernelExplorer height={this.props.app.get("windowHeight")}
@@ -42,7 +46,7 @@ class BindingsPage extends React.Component<any, void> {
 
                 <BindingExplorer height={this.props.app.get("windowHeight")}
                                 columnSize={4} dictionary={dictionary}
-                                kernelGuid={selectedKernel ? selectedKernel.guid : ""}
+                                kernelGuid={selectedKernelGuid}
                                 selectBinding={this.props.actions.selectBinding.bind(this)}/>
 
                 <BindingPropsExplorer height={this.props.app.get("windowHeight")}
diff --git a/src/containers/pages/logger_page.tsx b/src/containers/pages/logger_page.tsx
index ff4092b..06d1841 100644
--- a/src/containers/pages/logger_page.tsx
+++ b/src/containers/pages/logger_page.tsx
@@ -2,8 +2,10 @@ import * as React from "react";
 import { bindActionCreators } from "redux";
 import { connect } from "react-redux";
 import RequestLog from "../../components/request_log";
+import RequestTree from "../../components/request_tree";
 import LogDetails from "../../components/log_details";
 import loggerActions from "../../actions/logger_actions";
+import interfaces from "../../interfaces/interfaces";
 
 function mapStateToPropsReposPage(state: any) {
     return {
@@ -21,7 +23,7 @@ class LoggerPage extends React.Component<any, void> {
 
         let entries: any = this.props.log.get("entries");
 
-        let selectedEntry = entries.filter((entry: ISelectableLogEntry) => {
+        let selectedEntry = entries.filter((entry: interfaces.SelectableLogEntry) => {
             return entry.selected === true;
         }).toJSON()[0];
 
@@ -29,10 +31,13 @@ class LoggerPage extends React.Component<any, void> {
             <div>
 
                 <RequestLog height={this.props.app.get("windowHeight")}
-                            columnSize={4} log={entries}
-                            selectRequest={this.props.actions.selectRequest.bind(this)} />
+                            columnSize={4} log={entries} filter={this.props.log.get("filter")}
+                            selectRequest={this.props.actions.selectRequest.bind(this)}
+                            filterRequests={this.props.actions.filterRequests.bind(this)}
+                            clearRequests={this.props.actions.clearRequests.bind(this)} />
 
-                <LogDetails height={this.props.app.get("windowHeight")} columnSize={8} entry={selectedEntry} />
+                <LogDetails height={this.props.app.get("windowHeight")} columnSize={4} entry={selectedEntry} />
+                <RequestTree height={this.props.app.get("windowHeight")} columnSize={4} entry={selectedEntry} />
 
             </div>
         );
diff --git a/src/containers/pages/settings_page.tsx b/src/containers/pages/settings_page.tsx
index 41bc087..3792072 100644
--- a/src/containers/pages/settings_page.tsx
+++ b/src/containers/pages/settings_page.tsx
@@ -2,7 +2,11 @@ import * as React from "react";
 import { bindActionCreators } from "redux";
 import { connect } from "react-redux";
 import loggerActions from "../../actions/logger_actions";
+import settingsActions from "../../actions/settings_actions";
 import SettingsEditor from "../../components/settings";
+import { combineActionsGroups } from "../../utils/utils";
+
+let actions = combineActionsGroups(loggerActions, settingsActions);
 
 function mapStateToPropsReposPage(state: any) {
     return {
@@ -11,13 +15,15 @@ function mapStateToPropsReposPage(state: any) {
 }
 
 function mapDispatchToPropsReposPage(dispatch: Redux.Dispatch) {
-    return { actions : bindActionCreators(loggerActions, dispatch) };
+    return { actions : bindActionCreators(actions, dispatch) };
 }
 
 class SettingsPage extends React.Component<any, void> {
     public render() {
         return (
-           <SettingsEditor height={this.props.app.get("windowHeight")} columnSize={12} />
+           <SettingsEditor height={this.props.app.get("windowHeight")}
+                           columnSize={12} settings={this.props.app.get("settings")}
+                           saveSettingsAsync={this.props.actions.saveSettingsAsync.bind(this)} />
         );
     }
 }
diff --git a/src/core/default_settings.ts b/src/core/default_settings.ts
new file mode 100644
index 0000000..c9c0dc4
--- /dev/null
+++ b/src/core/default_settings.ts
@@ -0,0 +1,32 @@
+import interfaces from "../interfaces/interfaces";
+
+function getDefaultSettings () {
+    let defaultSettings: interfaces.UserSettings = {
+        request: {
+            bindings: {
+                activated: false,
+                cache: false,
+                constraint: false,
+                dynamicValue: false,
+                factory: false,
+                implementationType: true,
+                onActivation: false,
+                provider: false,
+                scope: true,
+                serviceIdentifier: true,
+                type: true
+            },
+            serviceIdentifier: true,
+            target: {
+                metadata: true,
+                name: false,
+                serviceIdentifier: false
+            }
+        },
+        size: 20,
+        time: true
+    };
+    return defaultSettings;
+}
+
+export default getDefaultSettings;
diff --git a/src/core/logger.ts b/src/core/logger.ts
index fb08605..5ee1ab9 100644
--- a/src/core/logger.ts
+++ b/src/core/logger.ts
@@ -1,56 +1,34 @@
 import { makeLoggerMiddleware } from "inversify-logger-middleware";
 import SelectableLogEntry from "./selectable_log_entry";
+import getDefaultSettings from "./default_settings";
+import interfaces from "../interfaces/interfaces";
 
-let userSettings: IUserSettings = {
-    request: {
-        bindings: {
-            activated: false,
-            cache: false,
-            constraint: false,
-            dynamicValue: false,
-            factory: false,
-            implementationType: true,
-            onActivation: false,
-            provider: false,
-            scope: true,
-            serviceIdentifier: true,
-            type: true
-        },
-        serviceIdentifier: true,
-        target: {
-            metadata: true,
-            name: false,
-            serviceIdentifier: false
-        }
-    },
-    size: 20,
-    time: true
-};
-
-function getDefaultLoggerSettings(): IUserSettings {
-    return userSettings;
-}
-
-function getUserSettings(): IUserSettings {
+function getUserSettings(): interfaces.UserSettings {
     return null;
 }
 
-function setUserSettings(settings: IUserSettings, cb: (e: boolean) => void): void {
+function setUserSettings(settings: interfaces.UserSettings, cb: (e: boolean) => void): void {
     return null;
 }
 
-function getLogger(addLogEntry: (entry: ISelectableLogEntry) => void, dispatch: Redux.Dispatch): inversify.IMiddleware {
+function getLogger(
+    addLogEntry: (entry: interfaces.SelectableLogEntry) => void,
+    initSettings: (settings: interfaces.UserSettings) => void,
+    dispatch: Redux.Dispatch
+): inversify.interfaces.Middleware {
 
     let settings: any = window.localStorage.getItem("inversify_settings");
 
     if (settings === null) {
-        settings = getDefaultLoggerSettings();
+        settings = getDefaultSettings();
         window.localStorage.setItem("inversify_settings", JSON.stringify(settings));
     } else {
         settings = JSON.parse(settings);
     }
 
-    let reduxRenderer = function(entry: inversifyLoggerMiddleware.ILogEntry) {
+    dispatch(initSettings(settings));
+
+    let reduxRenderer = function(entry: inversifyLoggerMiddleware.interfaces.LogEntry) {
         dispatch(addLogEntry(new SelectableLogEntry(entry)));
     };
 
diff --git a/src/core/selectable_kernel.ts b/src/core/selectable_kernel.ts
index 8ba8eab..33a1156 100644
--- a/src/core/selectable_kernel.ts
+++ b/src/core/selectable_kernel.ts
@@ -1,15 +1,13 @@
-import { guid } from "../utils/utils";
+import interfaces from "../interfaces/interfaces";
 
-class SelectableKernel implements ISelectable, IIdentifiable {
+class SelectableKernel implements interfaces.Selectable {
 
-    public details: inversify.IKernel;
+    public details: inversify.interfaces.Kernel;
     public selected: boolean;
-    public guid: string;
 
-    public constructor(details: inversify.IKernel) {
+    public constructor(details: inversify.interfaces.Kernel) {
         this.details = details;
         this.selected = false;
-        this.guid = guid();
     }
 }
 
diff --git a/src/core/selectable_log_entry.ts b/src/core/selectable_log_entry.ts
index 39dd59b..8059393 100644
--- a/src/core/selectable_log_entry.ts
+++ b/src/core/selectable_log_entry.ts
@@ -1,15 +1,18 @@
+import interfaces from "../interfaces/interfaces";
 import { guid } from "../utils/utils";
 
-class SelectableLogEntry implements ISelectable, IIdentifiable {
+class SelectableLogEntry implements interfaces.Selectable,  interfaces.Displayable {
 
-    public details: inversifyLoggerMiddleware.ILogEntry;
+    public details: inversifyLoggerMiddleware.interfaces.LogEntry;
     public selected: boolean;
     public guid: string;
+    public visible: boolean;
 
-    public constructor(details: inversifyLoggerMiddleware.ILogEntry) {
+    public constructor(details: inversifyLoggerMiddleware.interfaces.LogEntry) {
         this.details = details;
         this.selected = false;
-        this.guid = guid();
+        this.visible = false;
+        this.guid = guid(); // TODO https://github.com/inversify/InversifyJS/issues/272
     }
 }
 
diff --git a/src/interfaces/globals.d.ts b/src/interfaces/globals.d.ts
new file mode 100644
index 0000000..ed89247
--- /dev/null
+++ b/src/interfaces/globals.d.ts
@@ -0,0 +1,4 @@
+declare module "react-json-tree" {
+    let JSONTree: any;
+    export default JSONTree;
+}
diff --git a/src/interfaces/interfaces.d.ts b/src/interfaces/interfaces.d.ts
deleted file mode 100644
index b0eb9ea..0000000
--- a/src/interfaces/interfaces.d.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-
-interface IUserSettings extends inversifyLoggerMiddleware.ILoggerSettings {
-    size: number;
-}
-
-interface ISelectable {
-    selected: boolean;
-}
-
-interface IIdentifiable {
-    guid: string;
-}
-
-interface ISelectableKernel extends ISelectable, IIdentifiable {
-    details: inversify.IKernel;
-    selected: boolean;
-    guid: string;
-}
-
-interface ISelectableLogEntry extends ISelectable, IIdentifiable {
-    details: inversifyLoggerMiddleware.ILogEntry;
-    selected: boolean;
-    guid: string;
-}
-
-declare module "react-json-tree" {
-    let JSONTree: any;
-    export default JSONTree;
-}
diff --git a/src/interfaces/interfaces.ts b/src/interfaces/interfaces.ts
new file mode 100644
index 0000000..2619a69
--- /dev/null
+++ b/src/interfaces/interfaces.ts
@@ -0,0 +1,30 @@
+
+namespace interfaces {
+
+    export interface UserSettings extends inversifyLoggerMiddleware.interfaces.LoggerSettings {
+        size: number;
+    }
+
+    export interface Selectable {
+        selected: boolean;
+    }
+
+    export interface Displayable {
+        visible: boolean;
+    }
+
+    export interface SelectableKernel extends Selectable {
+        details: inversify.interfaces.Kernel;
+        selected: boolean;
+    }
+
+    export interface SelectableLogEntry extends Selectable, Displayable {
+        details: inversifyLoggerMiddleware.interfaces.LogEntry;
+        selected: boolean;
+        visible: boolean;
+        guid: string;
+    }
+
+}
+
+export default interfaces;
diff --git a/src/main.tsx b/src/main.tsx
index 25a1a75..9947177 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -4,32 +4,47 @@ import routes from "./config/routes";
 import appReducer from "./reducers/app_reducer";
 import logReducer from "./reducers/log_reducer";
 
+function render(container: string) {
+    bootstrap({
+        container: container,
+        initialState: {},
+        middlewares: [thunk],
+        reducers: {
+            app: appReducer,
+            log: logReducer
+        },
+        routes: routes
+    });
+}
+
 // TEMP
 import "reflect-metadata";
 import * as inversify from "inversify";
 let win: any = window;
 win.inversify = inversify;
 
-interface IWeapon {}
+interface Weapon {}
 
 @inversify.injectable()
-class Katana implements IWeapon {}
+class Katana implements Weapon {}
 
 @inversify.injectable()
-class Shuriken implements IWeapon {}
+class Shuriken implements Weapon {}
 
-interface INinja {
-    katana: IWeapon;
-    shuriken: IWeapon;
+interface Warrior {
+    katana: Weapon;
+    shuriken: Weapon;
 }
 
 @inversify.injectable()
-class Ninja implements INinja {
-    public katana: IWeapon;
-    public shuriken: IWeapon;
+class Ninja implements Warrior {
+
+    public katana: Weapon;
+    public shuriken: Weapon;
+
     public constructor(
-        @inversify.inject("IWeapon") @inversify.named("katana") katana: IWeapon,
-        @inversify.inject("IWeapon") @inversify.named("shuriken") shuriken: IWeapon
+        @inversify.inject("Weapon") @inversify.named("katana") katana: Weapon,
+        @inversify.inject("Weapon") @inversify.named("shuriken") shuriken: Weapon
     ) {
         this.katana = katana;
         this.shuriken = shuriken;
@@ -38,31 +53,25 @@ class Ninja implements INinja {
 
 let kernel = new inversify.Kernel();
 
-kernel.bind<INinja>("INinja").to(Ninja);
-kernel.bind<IWeapon>("IWeapon").to(Katana).whenTargetNamed("katana");
-kernel.bind<IWeapon>("IWeapon").to(Shuriken).whenTargetNamed("shuriken");
+kernel.bind<Warrior>("Warrior").to(Ninja);
+kernel.bind<Weapon>("Weapon").to(Katana).whenTargetNamed("katana");
+kernel.bind<Weapon>("Weapon").to(Shuriken).whenTargetNamed("shuriken");
 
 win.kernel = kernel;
 
-/*
-
-if (__inversifyDevtools__) {
-    __inversifyDevtools__(kernel);
+function demo() {
+    if (win.__inversifyDevtools__) {
+        win.__inversifyDevtools__(kernel);
+    }
+    kernel.get("ninja");
+    kernel.get("Warrior");
+    kernel.get("Weapon");
+    kernel.getNamed("Weapon", "shuriken");
+    kernel.getNamed("Weapon", "katana");
 }
 
-kernel.get("INinja");
-
-*/
-
+setTimeout(function() { demo(); }, 1000);
+render("root");
 // END TEMP
 
-bootstrap({
-    container: "root",
-    initialState: {},
-    middlewares: [thunk],
-    reducers: {
-        app: appReducer,
-        log: logReducer
-    },
-    routes: routes
-});
+export default render;
diff --git a/src/reducers/app_reducer.ts b/src/reducers/app_reducer.ts
index 7b3570e..cbfe3f7 100644
--- a/src/reducers/app_reducer.ts
+++ b/src/reducers/app_reducer.ts
@@ -1,9 +1,11 @@
 import * as Immutable from "immutable";
 import ACTION_TYPES from "../constants/action_types";
+import interfaces from "../interfaces/interfaces";
 import { guid } from "../utils/utils";
 
 const defaulttate = Immutable.fromJS({
     kernels: [],
+    settings: null,
     windowHeight: window.innerHeight,
     windowWidth: window.innerWidth
 });
@@ -14,21 +16,25 @@ function resize(previousState: any, action: any) {
     });
 }
 
-function initSuccess(previousState: any, action: any) {
+function initAppSuccess(previousState: any, action: any) {
     let kernels = previousState.get("kernels");
     let dictionary = (<any>action.kernel.details)._bindingDictionary._dictionary;
-    dictionary.forEach((keyValPair: any) => {
-        keyValPair.selected = false;
-        keyValPair.guid = guid();
+    dictionary.forEach((keyValPair: inversify.interfaces.KeyValuePair<any>) => {
+        (<any>keyValPair).selected = false;
+        (<any>keyValPair).guid = guid(); // TODO https://github.com/inversify/InversifyJS/issues/272
     });
     let updatedKernels = kernels.push(action.kernel);
     return previousState.set("kernels", updatedKernels);
 }
 
+function initSettingsSuccess(previousState: any, action: any) {
+    return previousState.set("settings", action.settings);
+}
+
 function selectKernel(previousState: any, action: any) {
     let kernels = previousState.get("kernels");
-    let updatedKernels = kernels.map((kernel: ISelectableKernel) => {
-        kernel.selected = (kernel.guid === action.kernel.guid);
+    let updatedKernels = kernels.map((kernel: interfaces.SelectableKernel) => {
+        kernel.selected = (kernel.details.guid === action.kernel.details.guid);
         return kernel;
     });
     return previousState.set("kernels", updatedKernels);
@@ -36,11 +42,11 @@ function selectKernel(previousState: any, action: any) {
 
 function selectBinding(previousState: any, action: any) {
     let kernels = previousState.get("kernels");
-    let updatedKernels = kernels.map((kernel: ISelectableKernel) => {
-        if (kernel.guid === action.kernelGuid) {
+    let updatedKernels = kernels.map((kernel: interfaces.SelectableKernel) => {
+        if (kernel.details.guid === action.kernelGuid) {
             let dictionary = (<any>kernel.details)._bindingDictionary._dictionary;
-            dictionary = dictionary.map((keyValPair: any) => {
-                keyValPair.selected = (keyValPair.guid === action.keyVal.guid);
+            dictionary = dictionary.map((keyValPair: inversify.interfaces.KeyValuePair<any>) => {
+                (<any>keyValPair).selected = ((<any>keyValPair).guid === action.keyVal.guid);
                 return keyValPair;
             });
         }
@@ -49,21 +55,30 @@ function selectBinding(previousState: any, action: any) {
     return previousState.set("kernels", updatedKernels);
 }
 
-const appReducer: Redux.Reducer = (previousState: any = defaulttate, action: any) => {
+function saveSettingsSuccess(previousState: any, action: any) {
+    return previousState.set("settings", action.settings);
+}
 
-    let kernels: any = null;
-    let updatedKernels: any = null;
-    let dictionary: any = null;
+function saveSettingsError(previousState: any, action: any) {
+    console.log("TODO!");
+}
 
+const appReducer: Redux.Reducer = (previousState: any = defaulttate, action: any) => {
     switch (action.type) {
         case ACTION_TYPES.RESIZE:
             return resize(previousState, action);
         case ACTION_TYPES.APP_INIT_SUCCESS:
-            return initSuccess(previousState, action);
+            return initAppSuccess(previousState, action);
+        case ACTION_TYPES.APP_SETTINGS_SUCCESS:
+            return initSettingsSuccess(previousState, action);
         case ACTION_TYPES.SELECT_KERNEL:
             return selectKernel(previousState, action);
         case ACTION_TYPES.SELECT_BINDING:
             return selectBinding(previousState, action);
+        case ACTION_TYPES.SAVE_SETTINGS_SUCCESS:
+            return saveSettingsSuccess(previousState, action);
+        case ACTION_TYPES.SAVE_SETTINGS_ERROR:
+            return saveSettingsError(previousState, action);
         default:
             return previousState;
     }
diff --git a/src/reducers/log_reducer.ts b/src/reducers/log_reducer.ts
index dfefdda..5025395 100644
--- a/src/reducers/log_reducer.ts
+++ b/src/reducers/log_reducer.ts
@@ -1,27 +1,46 @@
 import * as Immutable from "immutable";
 import ACTION_TYPES from "../constants/action_types";
+import interfaces from "../interfaces/interfaces";
 
 const defaultWindowState = Immutable.fromJS({
     entries: [],
+    filter: "ALL"
 });
 
-const logReducer: Redux.Reducer = (previousState: any = defaultWindowState, action: any) => {
+function addLogEntry(previousState: any, action: any) {
+    let entries = previousState.get("entries");
+    let updatedEntries = entries.push(action.entry);
+    return previousState.set("entries", updatedEntries);
+}
+
+function selectLogEntry(previousState: any, action: any) {
+    let entries = previousState.get("entries");
+    let updatedEntries = entries.map((entry: interfaces.SelectableLogEntry) => {
+        entry.selected = (entry.guid === action.entry.guid);
+        return entry;
+    });
+    return previousState.set("entries", updatedEntries);
+}
 
-    let entries: any = null;
-    let updatedEntries: any = null;
+function filterEntries(previousState: any, action: any) {
+    return previousState.set("filter", action.filterBy);
+}
 
+function clearEntries(previousState: any) {
+    let emptyLog = Immutable.fromJS([]);
+    return previousState.set("entries", emptyLog);
+}
+
+const logReducer: Redux.Reducer = (previousState: any = defaultWindowState, action: any) => {
     switch (action.type) {
         case ACTION_TYPES.ADD_LOG_ENTRY:
-            entries = previousState.get("entries");
-            updatedEntries = entries.push(action.entry);
-            return previousState.set("entries", updatedEntries);
+            return addLogEntry(previousState, action);
         case ACTION_TYPES.SELECT_LOG_ENTRY:
-            entries = previousState.get("entries");
-            updatedEntries = entries.map((entry: ISelectableLogEntry) => {
-               entry.selected = (entry.guid === action.entry.guid);
-               return entry;
-            });
-            return previousState.set("entries", updatedEntries);
+            return selectLogEntry(previousState, action);
+        case ACTION_TYPES.CLEAR_LOG:
+            return clearEntries(previousState);
+        case ACTION_TYPES.FILTER_LOG_ENTRIES:
+            return filterEntries(previousState, action);
         default:
             return previousState;
     }
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index 12b4a1b..36028e4 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -10,6 +10,20 @@ function makeActionCreator(type: string, ...argNames: string[]) {
   };
 }
 
+function combineActionsGroups(...actionGroups: any[]) {
+  let mixing: any = {};
+  actionGroups.forEach((actionGroup: any) => {
+    Object.keys(actionGroup).forEach((key: string) => {
+      if (mixing[key] !== undefined) {
+        throw new Error("Mixing cannot be applied due to duplicated key!");
+      } else {
+        mixing[key] = actionGroup[key];
+      }
+    });
+  });
+  return mixing;
+}
+
 function guid() {
   function s4() {
     return Math.floor((1 + Math.random()) * 0x10000)
@@ -20,4 +34,4 @@ function guid() {
     s4() + "-" + s4() + s4() + s4();
 }
 
-export { makeActionCreator, guid };
+export { makeActionCreator, combineActionsGroups, guid };
diff --git a/style/site.css b/style/site.css
index 83108a6..0b5fa2d 100644
--- a/style/site.css
+++ b/style/site.css
@@ -225,3 +225,32 @@ li {
     margin-top: 5px;
     margin-bottom: 5px;
 }
+
+.panelTopMenu ul {
+    list-style: none;
+    padding: 0px;
+    margin: 0px;
+    height: 35px;
+}
+
+.panelTopMenu li {
+    float: left;
+    width: 25%;
+}
+
+.panelTopMenu a {
+    background-color: rgb(79, 90, 101);
+    color: #ffffff;
+    text-decoration: none;
+    padding: 5px;
+    border-radius: 3px;
+    font-size: 10px;
+    width: 97%;
+    text-align: center;
+    display: table;
+    cursor: pointer;
+}
+
+.panelTopMenu a.active {
+    background-color: #1ca8dd;
+}
diff --git a/test/actions/app_actions.test.ts b/test/actions/app_actions.test.ts
new file mode 100644
index 0000000..70b786d
--- /dev/null
+++ b/test/actions/app_actions.test.ts
@@ -0,0 +1 @@
+// TODO
diff --git a/test/components/binding_explorer.test.ts b/test/components/binding_explorer.test.ts
new file mode 100644
index 0000000..70b786d
--- /dev/null
+++ b/test/components/binding_explorer.test.ts
@@ -0,0 +1 @@
+// TODO
diff --git a/test/core/selectable_log_entry.test.ts b/test/core/selectable_log_entry.test.ts
new file mode 100644
index 0000000..70b786d
--- /dev/null
+++ b/test/core/selectable_log_entry.test.ts
@@ -0,0 +1 @@
+// TODO
diff --git a/test/reducers/app_reducer.test.ts b/test/reducers/app_reducer.test.ts
new file mode 100644
index 0000000..70b786d
--- /dev/null
+++ b/test/reducers/app_reducer.test.ts
@@ -0,0 +1 @@
+// TODO
diff --git a/test/utils/utils.test.ts b/test/utils/utils.test.ts
new file mode 100644
index 0000000..70b786d
--- /dev/null
+++ b/test/utils/utils.test.ts
@@ -0,0 +1 @@
+// TODO
diff --git a/tsconfig.json b/tsconfig.json
index 16d9434..b342671 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -20,7 +20,7 @@
         "./node_modules/redux-bootstrap/type_definitions/redux-bootstrap/redux-bootstrap.d.ts",
         "./node_modules/inversify-dts/inversify/inversify.d.ts",
         "./node_modules/inversify-dts/inversify-logger-middleware/inversify-logger-middleware.d.ts",
-        "./src/interfaces/interfaces.d.ts",
+        "./src/interfaces/globals.d.ts",
         "./src/main.tsx"
     ]
 }
\ No newline at end of file
diff --git a/typings.json b/typings.json
index 34a0fff..4524ecd 100644
--- a/typings.json
+++ b/typings.json
@@ -5,9 +5,9 @@
   "globalDependencies": {
     "bluebird": "registry:dt/bluebird#2.0.0+20160319051630",
     "react-redux": "registry:dt/react-redux#4.4.0+20160501125835",
-    "react-router": "registry:dt/react-router#2.0.0+20160501155536",
+    "react-router": "registry:dt/react-router#2.0.0+20160621215300",
     "react-router-redux": "registry:dt/react-router-redux#4.0.0+20160316155526",
-    "react-router/history": "registry:dt/react-router/history#2.0.0+20160316155526",
+    "react-router/history": "registry:dt/react-router/history#2.0.0+20160608102730",
     "redux-thunk": "registry:dt/redux-thunk#2.0.1+20160317120654"
   }
 }