diff --git a/doc-template/additional/Demo-App.md b/doc-template/additional/Demo-App.md
new file mode 100644
index 000000000..146d44872
--- /dev/null
+++ b/doc-template/additional/Demo-App.md
@@ -0,0 +1,605 @@
+# My first The-M-Project 2.0 App from scratch
+
+In this tutorial we first build a very basic application. 
+
+- The first step is to create the app and switch the content on a button press/tap with a transition
+- Then you learn how to use models and collections
+- Connect them with Bikini 
+
+# Step 1 - Basic Sample App
+
+## Setup
+
+1. Install the generator if you haven't already. [Looking for details?](https://github.com/mwaylabs/generator-m/blob/master/README.md)
+2. Create a folder and name it after the application name and open it.
+
+	```
+	mkdir demoapp && cd $_
+	```
+
+3. Inside of the folder run the The-M-Project generator
+	
+	```
+	yo m
+	```
+	
+4. The generator guides you through several configuration steps
+
+	1. Select a Template
+		- First you have to choose a basic template of your application.
+		- You find details to all the available templates [here](https://github.com/mwaylabs/The-M-Project/tree/absinthe#layouts-1).
+	2. Work with or without Sass
+		- It is up to you if you want to use Sass inside of your project or not.
+		- If you want to use Sass we recommend Compass. [Details about Sass/Compass](#compass).
+	3. Make sure you have a internet connection - all the dependencies getting installed.
+	
+## Develop the application
+
+We want to develop a simple app with two pages and use different transitions to switch between both.
+
+[The sample app source code is on GitHub](https://github.com/mwaylabs/The-M-Project-Sample-Apps) (with a blank layout and without Sass).
+Read about the [Application Lifecycle](https://github.com/mwaylabs/The-M-Project/tree/absinthe#application-lifecycle)
+
+1. Start the Testserver
+
+	```
+	// Stop the server with ctrl+c
+	grunt server
+	
+	```
+	
+2. Run the Application: [http://localhost:9000/](http://localhost:9000/) to see what we have so far - should be empty.
+
+3. open app/scripts/main.js
+	
+	- There is no Controller defined
+	- The Router points to no Controller
+	- The app is accessable through a global namespace
+
+	```javascript
+		// The app gets initialized with the configuration provided from the config.js
+		// and gets appended to the global (window) namespace named like the app 
+		global.demoapp = M.Application.extend().create(global.demoapp.mconfig);
+	    $(document).ready(function() {
+	
+		// If the DOM is ready, initialize the router
+	        global.demoapp.start({
+	            routing: {
+	                routes: {
+	                    //m:routes -- don't edit this
+	                },
+	                //m:controllers -- don't edit this
+	            }
+	        });
+	    });
+	
+	```
+	
+4. Setup the both Controller
+	- The first page should contain a menu
+		- The Menu should be our entry point. The route to it is [http://localhost:9000/](http://localhost:9000/)
+	- The second page is a detail of a selected menu item
+		- Use detail as a route [http://localhost:9000/detail](http://localhost:9000/detail)
+	- This generates both files
+		- `scripts/controllers/menu.js`
+		- `scripts/controllers/detail.js`
+	- The generator adds a script tag for every view to the `index.html`
+	- The generator adds every controller to the router inside the `app/scripts/main.js`
+
+	```
+	// The first argument is the name of the controller
+	yo m:controller menu ''
+	// The second argument is the route to the controller
+	yo m:controller detail detail
+	// Start the server again
+	grunt server
+	```
+	
+	- open [http://localhost:9000/](http://localhost:9000/) to call the `applicationStart` of the MenuController
+	- open [http://localhost:9000/#detail](http://localhost:9000/#detail) to call the `applicationStart` of the DetailController
+
+5. Add a [Layout](https://github.com/mwaylabs/The-M-Project/tree/absinthe#layouts-1)
+	- Both Controllers share a layout so add initialize it inside the `applicationStart` of the demoapp.MenuController
+	
+	```javascript
+	...
+	applicationStart: function(settings) {
+		// Create a layout and apply it to the application
+	   	var layout = M.SwitchLayout.extend().create(this);
+		demoapp.setLayout(layout);
+	}
+	...
+	```
+6. Extend one Controller from the other
+	- Since both Controller should share the same Layout they can share the same code.
+	- Change the `scripts/controllers/detail.js`
+	
+	```javascript
+	...
+	// Extend the MenuController
+	demoapp.Controllers.DetailController = demoapp.Controllers.MenuController.extend({
+		
+		// Remove unused methods
+    });
+	...
+	```
+	
+7. Create the basic Views
+
+	```javascript
+	// The first argument is the name of the view
+	yo m:view menu
+	yo m:view detail
+	```
+	- This generates the both files
+		- `scripts/views/menu.js`
+		- `scripts/views/detail.js`
+	- The generator adds a script tag for every view to the `index.html`
+
+8. Initialze the Views
+	- Every View is bound to a Controller
+	- Implement a `initViews` method for both controllers
+	- Create a `contentView` property for the controllers and assign the generated Views to it
+	- Application start
+		1. Initialize the Layout
+		2. Apply the Layout to the app
+		3. Initialize the Views
+		4. Render the views by applying them to the layout
+	- show
+		1. Initialize the Views
+		2. Change the from one content to another
+	
+	```javascript
+	// scripts/controllers/detail.js
+	demoapp.Controllers.DetailController = demoapp.Controllers.MenuController.extend({
+
+        initViews: function(){
+	        // Initialzie the DetailView  with the controller (this) as scope
+            this.contentView = demoapp.Views.DetailView.create(this);
+        }
+    });
+	
+	```
+
+	```javascript
+	// scripts/controllers/menu.js
+	 demoapp.Controllers.MenuController = M.Controller.extend({
+
+        // The Content of the page
+        contentView: null,
+
+        // Called when the Application starts
+        applicationStart: function () {
+            // Create a layout and apply it to the application
+            var layout = M.SwitchLayout.extend().create(this);
+            // Set the Layout to the View
+            demoapp.setLayout(layout);
+            // Initialize the Views
+            this.initViews();
+            // Apply the Views to the Layout (render)
+            this._applyViews();
+        },
+
+        show: function () {
+            // Initialize the Views
+            this.initViews();
+            // Apply the Views to the Layout (render)
+            this._applyViews();
+            // Switch the Layout
+            demoapp.getLayout().startTransition();
+        },
+
+        initViews: function(){
+            // Create the MenuView with the controller (this) as scope
+            this.contentView = demoapp.Views.MenuView.create(this);
+        },
+
+        _applyViews: function() {
+            demoapp.getLayout().applyViews({
+                content: this.contentView
+            });
+        }
+    });
+	
+	```
+
+9. Add content and interaction to the views
+
+	```javascript
+	// scripts/views/detail.js
+	demoapp.Views.DetailView = M.View.extend({
+        // The properties of a view
+
+        // The view should be in a grid
+        grid: 'col-xs-12',
+        // Every view has a value
+        value: 'Detail'
+    }, {
+        // The childViews
+
+        // Add a button to navigate to the MenuView
+        button: M.ButtonView.extend({
+            // The Text of the Button
+            value: 'Back to the Menu',
+            // The events of the button
+            events: {
+                // On tab call the scope method 'gotoMenuPage' (scope is the DetailController)
+                tap: 'gotoMenuView'
+            }
+        })
+    });
+	
+	```
+	
+	```javascript
+	// scripts/views/menu.js
+	demoapp.Views.MenuView = M.View.extend({
+        // The properties of a view
+
+        // The view should be in a grid
+        grid: 'col-xs-12',
+        // Every view has a value
+        value: 'Menu'
+    }, {
+        // The childViews
+
+        // Add a button to navigate to the MenuView
+        button: M.ButtonView.extend({
+            // The Text of the Button
+            value: 'To the Detail View',
+            // The events of the button
+            events: {
+                // On tab call the scope method 'gotoMenuPage' (scope is the DetailController)
+                tap: 'gotoDetailView'
+            }
+        })
+    });	
+	```
+	
+10. Add Navigation methods to the Controller
+
+	```javascript
+	// scripts/controllers/detail.js
+	...
+	// Navigation: on button tap
+        gotoMenuView: function(){
+            // navigate to the menu view via a route
+            demoapp.navigate({
+                route: ''
+            });
+        }
+	...
+	
+	```
+
+	```javascript
+	// scripts/controllers/menu.js
+	...
+	// Navigation: on button tap
+        gotoDetailView: function(){
+            // navigate to the detail view via a route
+            demoapp.navigate({
+                route: '/detail'
+            });
+        }
+	...
+		
+	```
+	
+11. Change Transitions
+	- To get an overview of all available transitions have a look at the `M.PageTransitions.CONST`
+	
+	```javascript
+	demoapp.navigate({
+		route: '/detail',
+		transition: M.PageTransitions.CONST.FALL
+	});
+	
+	```
+	
+12. You want more? Look at the sample apps to get an idea of how to use The-M-Project. The [Kitchensink](http://www.the-m-project.org/apps/absinthe/kitchensink/index.html) is a good starting point.
+
+
+# Step 2 - Working with models and collections
+Tipp: M.Model and M.Collection are extended from [Backbone.Model](http://backbonejs.org/#Model) and [Backbone.Collection](http://backbonejs.org/#Collection)
+
+1. Create a collection called contacts
+
+	- this will create a folder `scripts/collections` and inside a file called `contacts.js`
+	
+	
+		```
+   		yo m:collection contacts
+   		```
+    		
+    	- UPDATE! There was a bug in the generator: https://github.com/mwaylabs/generator-m/issues/3 - all collections are append to the top of the index.html and not above this comment: <!-- m:collections -->
+		
+		- quickfix: #1: remove: `<script src="scripts/collections/contacts.js"></script>` from the first line of the index.html and add it like the this:
+	
+		```
+	 	<script src="scripts/models/contacts.js"></script>
+        <!-- m:models -->
+        <script src="scripts/collections/contacts.js"></script>
+        <!-- m:collections -->
+		```
+		- or:  delete the collection, update your generator and run the task again.
+	
+2. Create a model called contact
+	- this will create a folder `scripts/models` and inside a file called `contact.js`
+
+    ```
+    yo m:model contact
+    ```
+    
+3. Assign the `contact` model to the `contacts` collection. Open `scripts/collections`. Default the model is called the same as the collection in this case `ContactsModel` so just remove the `s`:
+
+	```
+	demoapp.Collections.ContactsCollection = M.Collection.extend({
+		//assign the contact model to this collection
+        model: demoapp.Models.ContactModel
+    });
+	```
+	
+5. Create the collection inside the Menucontroller. `scripts/controllers/menu.js`
+	1. define a variable for it 
+
+		```	
+		...
+		// define contacts collection
+	    contacts: null,    
+	    ...
+		
+		```
+	
+	2. Initialze the collection inside `applicationStart` and `show` before the `initViews` call.
+
+		```
+		...
+			// Called when the Application starts
+        applicationStart: function () {
+           	 // Create a layout and apply it to the application
+           	 var layout = M.SwitchLayout.extend().create(this);
+           	 // Set the Layout to the View
+           	 demoapp.setLayout(layout);
+           	 // Initialze the Collection
+           	 this.initData();
+           	 // Initialize the Views
+           	 this.initViews();
+           	 // Apply the Views to the Layout (render)
+           	 this._applyViews();
+        },
+
+        show: function () {
+            // Initialze the Collection
+            this.initData();
+            // Initialize the Views
+            this.initViews();
+            // Apply the Views to the Layout (render)
+            this._applyViews();
+            // Switch the Layout
+            demoapp.getLayout().startTransition();
+        },
+        ...
+		```
+
+	3. Implement `initData` with demo data
+	
+		```
+		// initialze the data
+		initData: function(){
+            // create the contacts collections if it doesn't exist
+            if(!this.contacts){
+            	// create the collection with demo data
+                this.contacts = demoapp.Collections.ContactsCollection.create(this.getContacts());
+            }
+        },
+
+		// get the contacts
+        getContacts: function(){
+            // create some demo data
+            return [{"name": 'foo', "lastname": "bar"}, {"name": 'max', "lastname": "mustermann"}];
+        }
+		```
+	
+4. Display the collection using a `M.ListView` in `scripts/views/menu.js`
+
+Tipp: Look at the Kitchensink for example code
+
+
+	- create a M.ListView
+	- apply a grid (from left to right with some padding)
+	- set the scopeKey	- the collections name inside the controller
+	- add a `M.ListItemView` as a blue print for every entry
+	- extend the template from `M.ListItemView` to fit to the collection model. Every attribute of the model can be displayed with '<%= ATTRIBUTE_NAME %>'
+
+	```
+	...
+	// The contacts list       
+        contactsList: M.ListView.extend({
+
+            // fit into the grid - whole page
+            grid: 'col-xs-12',
+
+            // the collection inside the menu controller
+            scopeKey: 'contacts',
+
+            // This property contains the listitem view
+            listItemView: M.ListItemView.extend({
+
+                // Extend the default template with this one. It gets injected into the <%= _value_ %> placeholder
+                extendTemplate: '<span><%= name %></span> <span><%= lastname %></span>'
+            })
+
+
+        })
+        ...
+	```
+5. Test the application
+
+The application should display a basic list with the both entries.
+
+```
+grunt server
+```
+
+6. Add contacts through a submit form
+	1. Create the input fields in `scripts/views/menu.js`
+	
+		```
+		...
+		// an input field for the lastname
+        addLastName: M.TextfieldView.extend({
+            // fit into the grid
+            grid: 'col-xs-12',
+            // label it as lastname with a placeholder ...
+            placeholder: 'Lastname',
+            // and a label
+            label: 'Lastname',
+            // add a nice icon from http://fontawesome.io/icons/
+            icon: 'fa-users',
+            // bind the view to a controller model attribute
+            scopeKey: 'newContact.lastname'
+        }),
+
+        // an input field for the firstname
+        addFirstName: M.TextfieldView.extend({
+            // fit into the grid
+            grid: 'col-xs-12',
+            // label it as lastname with a placeholder ...
+            placeholder: 'Firstname',
+            // and a label
+            label: 'Firstname',
+            // add a nice icon from http://fontawesome.io/icons/
+            icon: 'fa-user',
+            // bind the view to a controller model attribute
+            scopeKey: 'newContact.name'
+        }),
+        ...
+	
+		```
+	2. Add an submit button to `scripts/views/menu.js`
+
+		```
+		...
+		// a submit button for adding a entry to the list
+        addButton: M.ButtonView.extend({
+            //fit into the grid
+            grid: 'col-xs-12',
+            // The Text of the Button
+            value: 'Add',
+            // The events of the button
+            events: {
+                // On tab call the scope method 'addContact' (scope is the MenuController)
+                tap: 'addContact'
+            }
+        }),
+		...
+		```
+7. Extend the controller to serve the new features
+
+	1. Add an attribute for the TextFieldViews
+	
+		```
+		...
+		// use this model as reference to the form views
+        newContact: null,
+		...
+
+		```
+		
+	2. Implement the tap callback of the `addButton` inside the `scripts/controller/menu.js`
+		On the tab create a new model based on the `newContact` model. Thanks to [backbone.stickit](http://nytimes.github.io/backbone.stickit/) the model and the view are always in sync.
+	
+		```
+		addContact: function(){
+            // add a new model instance based on the the new contact model to the collection
+this.contacts.add(demoapp.Models.ContactModel.create(this.newContact.attributes));
+        }
+		```
+		
+8. Store the data inside the `localStorage`
+
+	1. Add a store to the collection in `scripts/collection/contacts.js`
+	
+		```
+		demoapp.Collections.ContactsCollection = M.Collection.extend({
+    	    // assign the contact model to this collection
+	        model: demoapp.Models.ContactModel,
+	        // the collection uses the localStorage of the browser through the M.LocalStorageStore
+	        store: M.LocalStorageStore.create( {})
+	    });
+		```
+	
+	2. Extend the contact model with an entity and attributes in `scripts/models/contact.js`
+	
+		```
+		demoapp.Models.ContactModel = M.Model.extend({
+	     // an id for every entry
+   	     idAttribute: '_id',
+    	    // the entity
+	        entity: {
+	            // profide a name to identify the collection/model
+        	    name: 'contact',
+    	        fields: {
+	                // the identifier of the model
+	                _id: { type: M.CONST.TYPE.STRING, required: YES, index: YES },
+	                // the name of the model
+	                name: { type: M.CONST.TYPE.STRING },
+                	// the lastnamename of the model
+                	lastname: { type: M.CONST.TYPE.STRING }
+            	}
+        	}
+    	});
+		``` 
+
+	3. Implement `getContacts` with real data in the menu controller `scripts/controllers/menu.js`
+		
+		```
+		// get the contacts
+        getContacts: function(){
+            // read the data from the store
+            this.contacts.fetch();
+        },
+		```
+	
+		
+	3. Implement `initData` with real data in the `MenuController.initData` inside of `scripts/controllers/menu.js`
+		- remove `this.getContacts()` from the `create` call
+		- call `this.getContacts()` when the contacts are accessable
+		
+			```
+			// initialze the data
+	        initData: function(){
+    	        //create a model to store the first and the last name
+	     	    this.newContact = demoapp.Models.ContactModel.create();
+	            // create the contacts collections if it doesn't exist
+	            if(!this.contacts){
+	                this.contacts = demoapp.Collections.ContactsCollection.create();
+	            }
+	            // fetch the data
+	            this.getContacts();
+	        },
+			```
+9. Test the application
+	- If you start the application with `grunt server` the list should be empty
+	- Enter a name and lastname and add it to the collection by tapping the add button
+	- The new contact should be added to the list
+	- Refreshing the browser fetchs the data from the localStorage and the list won't loose the entries
+
+
+	
+# Step 3 - Connect with Bikini
+	- tbd
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/doc-template/additional/Generator.md b/doc-template/additional/Generator.md
new file mode 100644
index 000000000..e933a2e8b
--- /dev/null
+++ b/doc-template/additional/Generator.md
@@ -0,0 +1,186 @@
+# The-M-Project generator [![Build Status](https://travis-ci.org/mwaylabs/generator-m.png)](https://travis-ci.org/mwaylabs/generator-m) [![Coverage Status](https://coveralls.io/repos/mwaylabs/generator-m/badge.png?branch=master)](https://coveralls.io/r/mwaylabs/generator-m?branch=master)
+
+A [Yeoman](http://yeoman.io) generator for [The-M-Project 2.0](http://the-m-project.org).
+
+## Getting Started
+
+Make sure you have installed Node.js, Git and optionally, Ruby and Compass (if you plan to use Sass).
+
+Install: `npm install -g generator-m`
+
+Create a folder and name it after the application name and `cd` into it:
+```
+mkdir my-new-project && cd $_
+```
+
+Run the yo generator:
+```
+yo m
+```
+
+Run `grunt` for building and `grunt server` for preview
+
+## Generators
+
+Available generators:
+
+* [m](#app)
+* [m:view](#view)
+* [m:layout](#layout)
+* [m:controller](#controller)
+* [m:model](#model)
+* [m:collection](#collection)
+* [m:router](#router)
+* [m:i18n](#i18n)
+
+### App
+Create a new The-M-Project app and generate all the boilerplate for you.
+
+```
+yo m
+```
+
+### View
+
+Generates a view in `app/scripts/views`.
+
+Example:
+```
+yo m:view foo
+```
+
+Produces `app/scripts/views/foo.js`:
+
+```javascript
+APPNAME.Views.FooView = M.View.extend({
+   // ...
+})
+```
+### Layout
+
+Generates a layout in `app/scripts/layouts`.
+
+Example:
+```
+yo m:layout foo
+```
+
+Produces `app/scripts/layouts/foo.js`:
+
+```javascript
+APPNAME.Layouts.FooLayout = M.Layout.extend({
+   // ...
+})
+```
+
+### Controller
+
+Generates a controller in `app/scripts/controllers`.
+
+Example:
+```
+yo m:controller foo
+```
+
+Produces `app/scripts/controllers/foo.js`:
+
+```javascript
+APPNAME.Controllers.FooController = M.Controller.extend({
+   // ...
+})
+```
+
+### Model
+
+Generates a model in `app/scripts/models`.
+
+Example:
+```bash
+yo m:model foo
+```
+
+Produces `app/scripts/models/foo.js`:
+
+```javascript
+APPNAME.Models.FooModel = M.Model.extend({
+   // ...
+})
+```
+
+### Collection
+
+Generates a collection in `app/scripts/collections`.
+
+Example:
+```
+yo m:collection foo
+```
+
+Produces `app/scripts/collections/foo.js`:
+
+```javascript
+APPNAME.Collections.FooCollection = M.Collection.extend({
+   // ...
+})
+```
+
+### Router
+
+Generates a router in `app/scripts/routers`.
+
+Example:
+```
+yo m:routers foo
+```
+
+Produces `app/scripts/routers/foo.js`:
+
+```javascript
+APPNAME.Routers.FooRouter = M.Router.extend({
+   // ...
+})
+```
+
+### I18N
+
+Generates a i18n in `app/i18n`.
+
+Example:
+```
+yo m:i18n en
+```
+
+Produces `app/i18n/en.json`:
+
+```javascript
+{
+    "global.button.save": "Save document",
+    "global.button.emptyTrash": "Empty Trash ({{count}})",
+    "global.error.permissionDenied": "Permission denied"
+}
+```
+
+## Options
+
+* `--skip-install`
+
+  Skips the automatic execution of `bower` and `npm` after scaffolding has finished.
+
+* `--test-framework <framework>`
+
+  Defaults to `mocha`. Can be switched for another supported testing framework like `jasmine`.
+
+
+## Contribute
+
+See the [contributing docs](https://github.com/yeoman/yeoman/blob/master/contributing.md)
+
+When submitting an issue, please follow the [guidelines](https://github.com/yeoman/yeoman/blob/master/contributing.md#issue-submission). Especially important is to make sure Yeoman is up-to-date, and providing the command or commands that cause the issue.
+
+When submitting a bugfix, write a test that exposes the bug and fails before applying your fix. Submit the test alongside the fix.
+
+When submitting a new feature, add tests that cover the feature.
+
+## License
+
+[MIT License](http://en.wikipedia.org/wiki/MIT_License)
diff --git a/doc-template/additional/Sample-Apps.md b/doc-template/additional/Sample-Apps.md
new file mode 100644
index 000000000..79769f82f
--- /dev/null
+++ b/doc-template/additional/Sample-Apps.md
@@ -0,0 +1,21 @@
+# The-M-Project - Absinthe Sample Apps
+
+[Looking for the Samples of The-M-Project 1.x?](https://github.com/mwaylabs/The-M-Project-Sample-Apps/tree/1.x)
+
+## Setup
+
+- Navigate to a sample app ```cd kitchensink/```
+- Install dependencies:
+  - ```npm install```
+  - ```bower install```
+- Start the server: ```grunt server```
+
+## Setup all
+
+If you are looking for an easy setup process for all sample applications run:
+
+```sh setup-all.sh```
+
+The script runs the following commands:
+  - ```npm install```
+  - ```bower install```
\ No newline at end of file
diff --git a/resources/sass/_master.scss b/resources/sass/_master.scss
index d6a8c95e8..d1a579104 100644
--- a/resources/sass/_master.scss
+++ b/resources/sass/_master.scss
@@ -32,4 +32,6 @@
 @import "themes/default/movable";
 @import "themes/default/toggleswitch";
 @import "themes/default/menu";
+@import "themes/default/alert";
+@import "themes/default/dialog";
 
diff --git a/resources/sass/themes/default/_alert.scss b/resources/sass/themes/default/_alert.scss
new file mode 100644
index 000000000..193350af3
--- /dev/null
+++ b/resources/sass/themes/default/_alert.scss
@@ -0,0 +1,21 @@
+.m-view.m-labelview.m-alertview-inner-message {
+  word-wrap: break-word;
+  padding: 15px;
+  text-align: center;
+}
+
+.m-view.m-labelview.m-alertview-title {
+  word-wrap: break-word;
+  padding: 15px 15px 0 15px;
+  text-align: center;
+}
+
+.m-alertview-inner {
+  position: relative;
+  width: 300px;
+  background: rgba(255, 255, 255, 0.9);
+  z-index: 1040;
+  border: 1px solid $m-modal-text-color;
+  color: $m-modal-text-color;
+  border-radius: 4px;
+}
\ No newline at end of file
diff --git a/resources/sass/themes/default/_variables.scss b/resources/sass/themes/default/_variables.scss
index d52a5bf6b..8997821e3 100644
--- a/resources/sass/themes/default/_variables.scss
+++ b/resources/sass/themes/default/_variables.scss
@@ -128,6 +128,7 @@ $m-primary-margin-bottom: 20px;
 
 // Modal
 $modal-backdrop-background-color: $black;
+$m-modal-text-color: $m-button-text-color;
 
 $content-padding: 15px;
 
diff --git a/resources/sass/themes/default/dialog.scss b/resources/sass/themes/default/dialog.scss
new file mode 100644
index 000000000..47e6f293e
--- /dev/null
+++ b/resources/sass/themes/default/dialog.scss
@@ -0,0 +1,21 @@
+.m-view.m-labelview.m-dialogview-inner-message {
+  word-wrap: break-word;
+  padding: 15px;
+  text-align: center;
+}
+
+.m-view.m-labelview.m-dialogview-headline {
+  word-wrap: break-word;
+  padding: 15px 15px 0 15px;
+  text-align: center;
+}
+
+.m-dialogview-inner {
+  position: relative;
+  width: 300px;
+  background: rgba(255, 255, 255, 0.9);
+  z-index: 1040;
+  border: 1px solid $m-modal-text-color;
+  color: $m-modal-text-color;
+  border-radius: 4px;
+}
\ No newline at end of file
diff --git a/resources/sass/themes/ios/_alert.scss b/resources/sass/themes/ios/_alert.scss
new file mode 100644
index 000000000..5435f3b55
--- /dev/null
+++ b/resources/sass/themes/ios/_alert.scss
@@ -0,0 +1,6 @@
+.ios .m-alertview-inner {
+  position: relative;
+  width: 300px;
+  background: rgba(255, 255, 255, 0.9);
+  z-index: 1040;
+}
\ No newline at end of file
diff --git a/resources/sass/themes/ios/dialog.scss b/resources/sass/themes/ios/dialog.scss
new file mode 100644
index 000000000..9f96265b7
--- /dev/null
+++ b/resources/sass/themes/ios/dialog.scss
@@ -0,0 +1,6 @@
+.ios .m-dialogview-inner {
+  position: relative;
+  width: 300px;
+  background: rgba(255, 255, 255, 0.9);
+  z-index: 1040;
+}
\ No newline at end of file
diff --git a/resources/sass/themproject_ios.scss b/resources/sass/themproject_ios.scss
index a7d798490..6115f50da 100644
--- a/resources/sass/themproject_ios.scss
+++ b/resources/sass/themproject_ios.scss
@@ -3,6 +3,8 @@
 
 .ios {
   @import "master";
+  @import "themes/ios/alert";
+  @import "themes/ios/dialog";
   @import "themes/ios/buttongroup";
   @import "themes/ios/radiolist";
   @import "themes/ios/checkboxlist";
diff --git a/src/_ui.js b/src/_ui.js
index 426980996..fb2b700cb 100644
--- a/src/_ui.js
+++ b/src/_ui.js
@@ -16,7 +16,6 @@
 // @include ./ui/views/button.js
 // @include ./ui/views/list.js
 // @include ./ui/views/slider.js
-// @include ./ui/views/dialog.js
 // @include ./ui/views/toggle.js
 // @include ./ui/views/image.js
 // @include ./ui/views/toast.js
@@ -30,6 +29,8 @@
 // @include ./ui/views/checkboxlist.js
 // @include ./ui/views/modal.js
 // @include ./ui/views/loader.js
+// @include ./ui/views/alert.js
+// @include ./ui/views/dialog.js
 // @include ./ui/views/text.js
 // @include ./ui/views/debug.js
 // @include ./ui/views/movable.js
diff --git a/src/templates.js b/src/templates.js
index 7965355f3..aba674039 100644
--- a/src/templates.js
+++ b/src/templates.js
@@ -1,10 +1,10 @@
-// Copyright (c) 2014 M-Way Solutions GmbH
-// http://github.com/mwaylabs/The-M-Project/blob/absinthe/MIT-LICENSE.txt
-
-////////////////////////////////////////////////////////////////
-// DO NOT EDIT THIS FILE - it is generated by grunt
-////////////////////////////////////////////////////////////////
-
-/* jshint -W109 */
-M.Templates = {"default":{"accordion.ejs":"<ul><%= value %></ul>","accordionitem.ejs":"<ul><%= value %></ul>","button.ejs":"<div class=\"button\"><% if(icon) { %> <i class=\"fa <%= icon %>\"></i> <% } %> <div data-binding=\"value\"<% if(value) {  } %>><%= value %></div></div>","buttongroup.ejs":"<div class=\"clearfix\" data-childviews=\"buttons\"></div>","checkboxlist.ejs":"<div><%= label %><div data-childviews=\"checkbox-options\"></div></div>","checkboxoption.ejs":"<label><input type=\"checkbox\" name=\"<%= name %>\" value=\"<%= value %>\"><i class=\"needsclick fa\"></i> <%= label %></label>","debug.ejs":"<div><div data-childviews=\"debug-menu\"></div><div data-childviews=\"debug-grid\"></div></div>","dialog.ejs":"<div></div>","image.ejs":"<img src=\"<%= value %>\" alt=\"<%= alt %>\"/>","label.ejs":"<div contenteditable=\"true\"><%= value %></div>","list.ejs":"<ul data-childviews=\"list\"></ul>","listitem.ejs":"<li><%= value %></li>","listitemlinked.ejs":"<li><span><%= value %></span><i class=\"fa <%= icon %>\"></i></li>","loader.ejs":"<div class=\"m-view m-overlayview m-loaderview m-loaderview-show\" style=\"display: block;\"> <div class=\"m-view m-overlayview-inner m-loaderview-inner\"> <div class=\"m-view m-labelview m-loaderview-inner-message\"></div> <div class=\"m-view m-loaderview-inner-icon m-loaderview-inner-icon-only\"> <div class=\"m-view m-loaderview-inner-icon-1\"></div> <div class=\"m-view m-loaderview-inner-icon-2\"></div> <div class=\"m-view m-loaderview-inner-icon-3\"></div> <div class=\"m-view m-loaderview-inner-icon-4\"></div> <div class=\"m-view m-loaderview-inner-icon-5\"></div> <div class=\"m-view m-loaderview-inner-icon-6\"></div> <div class=\"m-view m-loaderview-inner-icon-7\"></div> <div class=\"m-view m-loaderview-inner-icon-8\"></div> </div> </div> </div>","menu.ejs":"<div class=\"movable-backdrop fade\"></div><div class=\"movable-container\"><span><%= value %></span><div class=\"menu-content\" data-childviews=\"menu-content\"></div></div>","modal.ejs":"<div data-childviews=\"content\"><div>","model.ejs":"<ul><%= value %></ul>","movable.ejs":"<div class=\"movable-element\"><%= value %></div>","radiolist.ejs":"<div><%= label %><div data-childviews=\"radio-options\"></div></div>","radiooption.ejs":"<label><input type=\"radio\" name=\"<%= name %>\" value=\"<%= value %>\"><i class=\"needsclick fa\"></i><%= label %></label>","searchfield.ejs":"<div contenteditable=\"true\"><%= value %></div>","select.ejs":"<div class=\"selection-list<% if(isMultiple){ %> multiple<% } %>\"><select<% if(isMultiple){ %> multiple<% } %>><%= value %></select></div>","slider.ejs":"<input type=\"range\">","tabbarbuttongroup.ejs":"<div></div>","text.ejs":"<div><% if(label) {  %><div class=\"label\"><%= label %></div><% } %><div><% if(icon) {  %><div class=\"input-icon-addon\"><i class=\"fa <%= icon %> fa-fw\"></i><% } %><%= value %></div>","textarea.ejs":"<div><% if(label) {  %><label><%= label %><% } %><textarea><%= value %></textarea><% if(label) {  %></label><% } %></div>","textfield.ejs":"<div><% if(label) {  %><label><%= label %><% } %><div class=\"<% if(icon) {  %> input-icon-addon<% } %>\"><% if(icon) {  %><i class=\"fa <%= icon %> fa-fw\"></i><% } %><input type=\"<%= type %>\" <% if(placeholder) { %> placeholder=\"<%= placeholder %>\"<% } %> value=\"<%= value %>\"></div><% if(label) {  %></label><% } %></div>","toast.ejs":"<div class=\"toast\"><div id=\"<%= id %>\"><%= text %></div></div>","toggle.ejs":"<div><div data-childviews=\"first\"></div><div data-childviews=\"second\"></div></div>","toggleswitch.ejs":"<div>\n    <div class=\"toggleswitch-value-listener\" contenteditable=\"true\"><%= value %></div>\n\n    <% if(label){%>\n        <div class=\"label-descr\"> <%= label %></div>\n    <% }%>\n    <div class=\"movable-grid\">\n        <div class=\"movable-container\">\n              <% if(onLabel){%>\n                  <div class=\"on-value\"><%= onLabel %></div>\n              <% }%>\n\n              <% if(onLabel){%>\n                  <div class=\"off-value\"><%= offLabel %></div>\n              <% }%>\n\n              <% if(onLabel){%>\n                  <div class=\"movable-element\"></div>\n              <% }%>\n        </div>\n    </div>\n</div>\n\n","toolbar.ejs":"<div><div data-childviews=\"first\"></div> <div class=\"center\" data-binding=\"value\"><%= value %></div> <div data-childviews=\"second\"></div></div>","view.ejs":"<div><%= value %></div>"}};
+// Copyright (c) 2014 M-Way Solutions GmbH
+// http://github.com/mwaylabs/The-M-Project/blob/absinthe/MIT-LICENSE.txt
+
+////////////////////////////////////////////////////////////////
+// DO NOT EDIT THIS FILE - it is generated by grunt
+////////////////////////////////////////////////////////////////
+
+/* jshint -W109 */
+M.Templates = {"default":{"accordion.ejs":"<ul><%= value %></ul>","accordionitem.ejs":"<ul><%= value %></ul>","alert.ejs":"<div class=\"m-view m-overlayview m-alertview m-alertview-show\" style=\"display: block;\">\r\n    <div class=\"m-view m-overlayview-inner m-alertview-inner\">\r\n        <div class=\"m-view m-labelview m-alertview-title\"><%= title %></div>\r\n        <div class=\"m-view m-labelview m-alertview-inner-message\"><%= text %></div>\r\n        <div data-childviews=\"buttonContainer\"></div>\r\n    </div>\r\n</div>","button.ejs":"<div class=\"button\"><% if(icon) { %> <i class=\"fa <%= icon %>\"></i> <% } %> <div data-binding=\"value\"<% if(value) {  } %>><%= value %></div></div>","buttongroup.ejs":"<div class=\"clearfix\" data-childviews=\"buttons\"></div>","checkboxlist.ejs":"<div><%= label %><div data-childviews=\"checkbox-options\"></div></div>","checkboxoption.ejs":"<label><input type=\"checkbox\" name=\"<%= name %>\" value=\"<%= value %>\"><i class=\"needsclick fa\"></i> <%= label %></label>","debug.ejs":"<div><div data-childviews=\"debug-menu\"></div><div data-childviews=\"debug-grid\"></div></div>","dialog.ejs":"<div class=\"m-view m-overlayview m-dialogview m-dialogview-show\" style=\"display: block;\">\r\n    <div class=\"m-view m-overlayview-inner m-dialogview-inner\">\r\n        <div class=\"m-view m-labelview m-dialogview-headline\"><%= headline %></div>\r\n        <div class=\"m-view m-labelview m-dialogview-inner-message\"><%= text %></div>\r\n        <div data-childviews=\"buttons\"></div>\r\n    </div>\r\n</div>","image.ejs":"<img src=\"<%= value %>\" alt=\"<%= alt %>\"/>","label.ejs":"<div contenteditable=\"true\"><%= value %></div>","list.ejs":"<ul data-childviews=\"list\"></ul>","listitem.ejs":"<li><%= value %></li>","listitemlinked.ejs":"<li><span><%= value %></span><i class=\"fa <%= icon %>\"></i></li>","loader.ejs":"<div class=\"m-view m-overlayview m-loaderview m-loaderview-show\" style=\"display: block;\">\r\n    <div class=\"m-view m-overlayview-inner m-loaderview-inner\">\r\n        <div class=\"m-view m-labelview m-loaderview-inner-message\"></div>\r\n        <div class=\"m-view m-loaderview-inner-icon m-loaderview-inner-icon-only\">\r\n            <div class=\"m-view m-loaderview-inner-icon-1\"></div>\r\n            <div class=\"m-view m-loaderview-inner-icon-2\"></div>\r\n            <div class=\"m-view m-loaderview-inner-icon-3\"></div>\r\n            <div class=\"m-view m-loaderview-inner-icon-4\"></div>\r\n            <div class=\"m-view m-loaderview-inner-icon-5\"></div>\r\n            <div class=\"m-view m-loaderview-inner-icon-6\"></div>\r\n            <div class=\"m-view m-loaderview-inner-icon-7\"></div>\r\n            <div class=\"m-view m-loaderview-inner-icon-8\"></div>\r\n        </div>\r\n    </div>\r\n</div>","menu.ejs":"<div class=\"movable-backdrop fade\"></div><div class=\"movable-container\"><span><%= value %></span><div class=\"menu-content\" data-childviews=\"menu-content\"></div></div>","modal.ejs":"<div data-childviews=\"content\"><div>","model.ejs":"<ul><%= value %></ul>","movable.ejs":"<div class=\"movable-element\"><%= value %></div>","radiolist.ejs":"<div><%= label %><div data-childviews=\"radio-options\"></div></div>","radiooption.ejs":"<label><input type=\"radio\" name=\"<%= name %>\" value=\"<%= value %>\"><i class=\"needsclick fa\"></i><%= label %></label>","searchfield.ejs":"<div contenteditable=\"true\"><%= value %></div>","select.ejs":"<div class=\"selection-list<% if(isMultiple){ %> multiple<% } %>\"><select<% if(isMultiple){ %> multiple<% } %>><%= value %></select></div>","slider.ejs":"<input type=\"range\">","tabbarbuttongroup.ejs":"<div></div>","text.ejs":"<div><% if(label) {  %><div class=\"label\"><%= label %></div><% } %><div><% if(icon) {  %><div class=\"input-icon-addon\"><i class=\"fa <%= icon %> fa-fw\"></i><% } %><%= value %></div>","textarea.ejs":"<div><% if(label) {  %><label><%= label %><% } %><textarea><%= value %></textarea><% if(label) {  %></label><% } %></div>","textfield.ejs":"<div><% if(label) {  %><label><%= label %><% } %><div class=\"<% if(icon) {  %> input-icon-addon<% } %>\"><% if(icon) {  %><i class=\"fa <%= icon %> fa-fw\"></i><% } %><input type=\"<%= type %>\" <% if(placeholder) { %> placeholder=\"<%= placeholder %>\"<% } %> value=\"<%= value %>\"></div><% if(label) {  %></label><% } %></div>","toast.ejs":"<div class=\"toast\"><div id=\"<%= id %>\"><%= text %></div></div>","toggle.ejs":"<div><div data-childviews=\"first\"></div><div data-childviews=\"second\"></div></div>","toggleswitch.ejs":"<div>\n    <div class=\"toggleswitch-value-listener\" contenteditable=\"true\"><%= value %></div>\n\n    <% if(label){%>\n        <div class=\"label-descr\"> <%= label %></div>\n    <% }%>\n    <div class=\"movable-grid\">\n        <div class=\"movable-container\">\n              <% if(onLabel){%>\n                  <div class=\"on-value\"><%= onLabel %></div>\n              <% }%>\n\n              <% if(onLabel){%>\n                  <div class=\"off-value\"><%= offLabel %></div>\n              <% }%>\n\n              <% if(onLabel){%>\n                  <div class=\"movable-element\"></div>\n              <% }%>\n        </div>\n    </div>\n</div>\n\n","toolbar.ejs":"<div><div data-childviews=\"first\"></div> <div class=\"center\" data-binding=\"value\"><%= value %></div> <div data-childviews=\"second\"></div></div>","view.ejs":"<div><%= value %></div>"}};
 /* jshint +W109 */
\ No newline at end of file
diff --git a/src/templates/default/alert.ejs b/src/templates/default/alert.ejs
new file mode 100644
index 000000000..03d69a62d
--- /dev/null
+++ b/src/templates/default/alert.ejs
@@ -0,0 +1,7 @@
+<div class="m-view m-overlayview m-alertview m-alertview-show" style="display: block;">
+    <div class="m-view m-overlayview-inner m-alertview-inner">
+        <div class="m-view m-labelview m-alertview-title"><%= title %></div>
+        <div class="m-view m-labelview m-alertview-inner-message"><%= text %></div>
+        <div data-childviews="buttonContainer"></div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/templates/default/dialog.ejs b/src/templates/default/dialog.ejs
index 281c6866c..2348fc3a7 100644
--- a/src/templates/default/dialog.ejs
+++ b/src/templates/default/dialog.ejs
@@ -1 +1,7 @@
-<div></div>
\ No newline at end of file
+<div class="m-view m-overlayview m-dialogview m-dialogview-show" style="display: block;">
+    <div class="m-view m-overlayview-inner m-dialogview-inner">
+        <div class="m-view m-labelview m-dialogview-headline"><%= headline %></div>
+        <div class="m-view m-labelview m-dialogview-inner-message"><%= text %></div>
+        <div data-childviews="buttons"></div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/templates/default/loader.ejs b/src/templates/default/loader.ejs
index 625b9090d..2b200efc6 100644
--- a/src/templates/default/loader.ejs
+++ b/src/templates/default/loader.ejs
@@ -1 +1,15 @@
-<div class="m-view m-overlayview m-loaderview m-loaderview-show" style="display: block;"> <div class="m-view m-overlayview-inner m-loaderview-inner"> <div class="m-view m-labelview m-loaderview-inner-message"></div> <div class="m-view m-loaderview-inner-icon m-loaderview-inner-icon-only"> <div class="m-view m-loaderview-inner-icon-1"></div> <div class="m-view m-loaderview-inner-icon-2"></div> <div class="m-view m-loaderview-inner-icon-3"></div> <div class="m-view m-loaderview-inner-icon-4"></div> <div class="m-view m-loaderview-inner-icon-5"></div> <div class="m-view m-loaderview-inner-icon-6"></div> <div class="m-view m-loaderview-inner-icon-7"></div> <div class="m-view m-loaderview-inner-icon-8"></div> </div> </div> </div>
\ No newline at end of file
+<div class="m-view m-overlayview m-loaderview m-loaderview-show" style="display: block;">
+    <div class="m-view m-overlayview-inner m-loaderview-inner">
+        <div class="m-view m-labelview m-loaderview-inner-message"></div>
+        <div class="m-view m-loaderview-inner-icon m-loaderview-inner-icon-only">
+            <div class="m-view m-loaderview-inner-icon-1"></div>
+            <div class="m-view m-loaderview-inner-icon-2"></div>
+            <div class="m-view m-loaderview-inner-icon-3"></div>
+            <div class="m-view m-loaderview-inner-icon-4"></div>
+            <div class="m-view m-loaderview-inner-icon-5"></div>
+            <div class="m-view m-loaderview-inner-icon-6"></div>
+            <div class="m-view m-loaderview-inner-icon-7"></div>
+            <div class="m-view m-loaderview-inner-icon-8"></div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/ui/themevars.js b/src/ui/themevars.js
index 2d559206d..c87ed7076 100644
--- a/src/ui/themevars.js
+++ b/src/ui/themevars.js
@@ -1,169 +1,170 @@
-// Copyright (c) 2014 M-Way Solutions GmbH
-// http://github.com/mwaylabs/The-M-Project/blob/absinthe/MIT-LICENSE.txt
-
-////////////////////////////////////////////////////////////////
-// DO NOT EDIT THIS FILE - it is generated by grunt
-////////////////////////////////////////////////////////////////
-
-M.ThemeVars = {
-    _vars: {
-    "default": {
-        "blue": "#1092d3",
-        "lightblue": "#58b3e0",
-        "darkblue": "#0e7cb4",
-        "purple": "#6c64ff",
-        "lightpurple": "#9893ff",
-        "darkpurple": "#5c55d9",
-        "green": "#2dcca2",
-        "lightgreen": "#6cdbbe",
-        "darkgreen": "#26ae8a",
-        "red": "#ed253d",
-        "lightred": "#f26778",
-        "darkred": "#ca1f34",
-        "orange": "#f45b42",
-        "lightorange": "#f78d7b",
-        "darkorange": "#d04d38",
-        "yellow": "#eab13a",
-        "lightyellow": "#f0c975",
-        "darkyellow": "#d99731",
-        "grey": "#c3c3c3",
-        "lightgrey": "#d5d5d5",
-        "darkgrey": "#a6a6a6",
-        "black": "#000000",
-        "white": "#FFFFFF",
-        "darkwhite": "#F2F2F2",
-        "debug-1": "#02ccb9",
-        "debug-2": "#00cc09",
-        "debug-3": "#cc3500",
-        "debug-4": "#cc008d",
-        "debug-5": "#9f00cc",
-        "debug-6": "#4f00cc",
-        "debug-7": "#003fcc",
-        "debug-8": "#0073cc",
-        "grid-columns": "12",
-        "grid-gutter-width": "30px",
-        "lightenPercentage": "15%",
-        "lightenPercentageLight": "5%",
-        "m-button-icon-only-width": "50px",
-        "m-button-border-width": "1px",
-        "m-button-border-color": "#1092d3",
-        "m-button-text-color": "#1092d3",
-        "m-button-border-radius": "4px",
-        "m-button-border-style": "solid",
-        "m-button-padding-bottom": "10px",
-        "m-button-padding-top": "10px",
-        "m-button-padding-left-right": "10px",
-        "m-button-padding": "10px 10px 10px 10px",
-        "m-button-primary-border-color": "#6c64ff",
-        "m-button-primary-text-color": "#6c64ff",
-        "m-button-primary-background-color": "#FFFFFF",
-        "m-button-success-border-color": "#2dcca2",
-        "m-button-success-text-color": "#2dcca2",
-        "m-button-success-background-color": "#FFFFFF",
-        "m-button-error-border-color": "#ed253d",
-        "m-button-error-text-color": "#ed253d",
-        "m-button-error-background-color": "#FFFFFF",
-        "m-button-warning-border-color": "#f45b42",
-        "m-button-warning-text-color": "#f45b42",
-        "m-button-warning-background-color": "#FFFFFF",
-        "m-button-info-border-color": "#eab13a",
-        "m-button-info-text-color": "#eab13a",
-        "m-button-info-background-color": "#FFFFFF",
-        "m-button-fuzzy-border-color": "#c3c3c3",
-        "m-button-fuzzy-text-color": "#c3c3c3",
-        "m-button-fuzzy-background-color": "#FFFFFF",
-        "strong": "bold",
-        "normal": "normal",
-        "weak": "lighter",
-        "form-border-width": "1px",
-        "form-border-color": "#1092d3",
-        "form-border-style": "solid",
-        "form-element-border": "1px solid #1092d3",
-        "textfield-icon-padding": "30px",
-        "textfield-icon-x-position": "4px",
-        "textfield-icon-y-position": "14px",
-        "textfield-icon-font-size": "2.2rem",
-        "textfield-padding": "6px",
-        "m-primary-color": "#1092d3",
-        "m-primary-text-color": "#000000",
-        "m-primary-border-color": "#58b3e0",
-        "m-primary-active-color": "#0e7cb4",
-        "m-primary-active-text-color": "#FFFFFF",
-        "tablayout-menu-height": "50px",
-        "tablayout-menu-button-padding": "13px 0 0 0",
-        "tablayout-menu-scroll-button-width": "200px",
-        "switch-header-content-padding": "4px 0 0 0",
-        "header-top": "4px",
-        "m-header-icon-only-font-size": "2.4rem",
-        "m-primary-font-family": "\"HelveticaNeue-Light\", \"Helvetica Neue Light\", \"Helvetica Neue\", Helvetica, Arial, \"Lucida Grande\", sans-serif",
-        "m-primary-font-weight": "300",
-        "m-primary-font-size": "1.6rem",
-        "m-primary-calc-font-size": "16px",
-        "m-primary-line-height": "2.2rem",
-        "m-primary-font-color": "#000000",
-        "m-primary-margin-top": "10px",
-        "m-primary-margin-bottom": "20px",
-        "modal-backdrop-background-color": "#000000",
-        "content-padding": "15px",
-        "m-primary-disabled-color": "#d5d5d5",
-        "m-primary-disabled-text-color": "#c3c3c3",
-        "selection-color": "#c3c3c3",
-        "selection-checked-color": "#1092d3",
-        "m-list-item-color": "#2dcca2",
-        "m-stencil-text-shadow": "rgba(255, 255, 255, 0.5) 0px 3px 3px",
-        "m-menu-view-width": "200px",
-        "m-menu-view-device-swipe-listener-width": "20px",
-        "m-menu-view-transition-width": "200px - 20px",
-        "m-menu-transition": "500ms"
-    },
-    "android_dark": {
-        "m-primary-color": "#669900",
-        "m-primary-border-color": "#669900",
-        "m-primary-active-color": "#99CC00"
-    },
-    "android_light": {
-        "m-primary-color": "#669900",
-        "m-primary-border-color": "#669900",
-        "m-primary-active-color": "#99CC00"
-    },
-    "ios": {
-        "blue": "#59C8FA",
-        "lightblue": "#46b8da",
-        "darkblue": "#007AFF",
-        "green": "#4BD964",
-        "red": "#FF3B30",
-        "lightred": "#FF2D55",
-        "grey": "#8E8E93",
-        "m-primary-font-family": "-apple-system-font, \"HelveticaNeue-Light\", \"Helvetica Neue Light\", \"Helvetica Neue\", Helvetica, Arial, \"Lucida Grande\", sans-serif",
-        "lightenPercentage": "25%",
-        "textfield-icon-y-position": "13px",
-        "m-primary-active-color": "$lightgrey",
-        "m-primary-active-text-color": "#007AFF",
-        "tablayout-menu-height": "50px",
-        "tablayout-menu-scroll-button-width": "140px",
-        "selection-checked-color": "#59C8FA",
-        "m-button-padding-bottom": "10px",
-        "m-button-padding": "$m-button-padding-top $m-button-padding-left-right 10px $m-button-padding-left-right-top $m-button-padding-top $m-button-padding-left-right 10px $m-button-padding-left-right-left-right 10px $m-button-padding-top $m-button-padding-left-right 10px $m-button-padding-left-right-left-right"
-    }
-},
-    get: function (name, theme) {
-        var theme = theme || M.Environment.device.os;
-
-        var result = this._vars[theme] ? this._vars[theme][name] : false;
-        if (!result && theme != M.ThemeVars.CONST.DEFAULT) {
-            result = this._vars[M.ThemeVars.CONST.DEFAULT][name];
-        }
-        if (!result) {
-            console.log('Can not find varibale "' + name + '".');
-        }
-        return result;
-    }
-}
-
-M.ThemeVars.CONST = {
-    IOS: 'ios',
-    ANDROID_DARK: 'android_dark',
-    ANDROID_LIGHT: 'android_light',
-    ANDROID: 'android_dark',
-    DEFAULT: 'default'
+// Copyright (c) 2014 M-Way Solutions GmbH
+// http://github.com/mwaylabs/The-M-Project/blob/absinthe/MIT-LICENSE.txt
+
+////////////////////////////////////////////////////////////////
+// DO NOT EDIT THIS FILE - it is generated by grunt
+////////////////////////////////////////////////////////////////
+
+M.ThemeVars = {
+    _vars: {
+    "default": {
+        "blue": "#1092d3",
+        "lightblue": "#58b3e0",
+        "darkblue": "#0e7cb4",
+        "purple": "#6c64ff",
+        "lightpurple": "#9893ff",
+        "darkpurple": "#5c55d9",
+        "green": "#2dcca2",
+        "lightgreen": "#6cdbbe",
+        "darkgreen": "#26ae8a",
+        "red": "#ed253d",
+        "lightred": "#f26778",
+        "darkred": "#ca1f34",
+        "orange": "#f45b42",
+        "lightorange": "#f78d7b",
+        "darkorange": "#d04d38",
+        "yellow": "#eab13a",
+        "lightyellow": "#f0c975",
+        "darkyellow": "#d99731",
+        "grey": "#c3c3c3",
+        "lightgrey": "#d5d5d5",
+        "darkgrey": "#a6a6a6",
+        "black": "#000000",
+        "white": "#FFFFFF",
+        "darkwhite": "#F2F2F2",
+        "debug-1": "#02ccb9",
+        "debug-2": "#00cc09",
+        "debug-3": "#cc3500",
+        "debug-4": "#cc008d",
+        "debug-5": "#9f00cc",
+        "debug-6": "#4f00cc",
+        "debug-7": "#003fcc",
+        "debug-8": "#0073cc",
+        "grid-columns": "12",
+        "grid-gutter-width": "30px",
+        "lightenPercentage": "15%",
+        "lightenPercentageLight": "5%",
+        "m-button-icon-only-width": "50px",
+        "m-button-border-width": "1px",
+        "m-button-border-color": "#1092d3",
+        "m-button-text-color": "#1092d3",
+        "m-button-border-radius": "4px",
+        "m-button-border-style": "solid",
+        "m-button-padding-bottom": "10px",
+        "m-button-padding-top": "10px",
+        "m-button-padding-left-right": "10px",
+        "m-button-padding": "10px 10px 10px 10px",
+        "m-button-primary-border-color": "#6c64ff",
+        "m-button-primary-text-color": "#6c64ff",
+        "m-button-primary-background-color": "#FFFFFF",
+        "m-button-success-border-color": "#2dcca2",
+        "m-button-success-text-color": "#2dcca2",
+        "m-button-success-background-color": "#FFFFFF",
+        "m-button-error-border-color": "#ed253d",
+        "m-button-error-text-color": "#ed253d",
+        "m-button-error-background-color": "#FFFFFF",
+        "m-button-warning-border-color": "#f45b42",
+        "m-button-warning-text-color": "#f45b42",
+        "m-button-warning-background-color": "#FFFFFF",
+        "m-button-info-border-color": "#eab13a",
+        "m-button-info-text-color": "#eab13a",
+        "m-button-info-background-color": "#FFFFFF",
+        "m-button-fuzzy-border-color": "#c3c3c3",
+        "m-button-fuzzy-text-color": "#c3c3c3",
+        "m-button-fuzzy-background-color": "#FFFFFF",
+        "strong": "bold",
+        "normal": "normal",
+        "weak": "lighter",
+        "form-border-width": "1px",
+        "form-border-color": "#1092d3",
+        "form-border-style": "solid",
+        "form-element-border": "1px solid #1092d3",
+        "textfield-icon-padding": "30px",
+        "textfield-icon-x-position": "4px",
+        "textfield-icon-y-position": "14px",
+        "textfield-icon-font-size": "2.2rem",
+        "textfield-padding": "6px",
+        "m-primary-color": "#1092d3",
+        "m-primary-text-color": "#000000",
+        "m-primary-border-color": "#58b3e0",
+        "m-primary-active-color": "#0e7cb4",
+        "m-primary-active-text-color": "#FFFFFF",
+        "tablayout-menu-height": "50px",
+        "tablayout-menu-button-padding": "13px 0 0 0",
+        "tablayout-menu-scroll-button-width": "200px",
+        "switch-header-content-padding": "4px 0 0 0",
+        "header-top": "4px",
+        "m-header-icon-only-font-size": "2.4rem",
+        "m-primary-font-family": "\"HelveticaNeue-Light\", \"Helvetica Neue Light\", \"Helvetica Neue\", Helvetica, Arial, \"Lucida Grande\", sans-serif",
+        "m-primary-font-weight": "300",
+        "m-primary-font-size": "1.6rem",
+        "m-primary-calc-font-size": "16px",
+        "m-primary-line-height": "2.2rem",
+        "m-primary-font-color": "#000000",
+        "m-primary-margin-top": "10px",
+        "m-primary-margin-bottom": "20px",
+        "modal-backdrop-background-color": "#000000",
+        "m-modal-text-color": "#1092d3",
+        "content-padding": "15px",
+        "m-primary-disabled-color": "#d5d5d5",
+        "m-primary-disabled-text-color": "#c3c3c3",
+        "selection-color": "#c3c3c3",
+        "selection-checked-color": "#1092d3",
+        "m-list-item-color": "#2dcca2",
+        "m-stencil-text-shadow": "rgba(255, 255, 255, 0.5) 0px 3px 3px",
+        "m-menu-view-width": "200px",
+        "m-menu-view-device-swipe-listener-width": "20px",
+        "m-menu-view-transition-width": "200px - 20px",
+        "m-menu-transition": "500ms"
+    },
+    "android_dark": {
+        "m-primary-color": "#669900",
+        "m-primary-border-color": "#669900",
+        "m-primary-active-color": "#99CC00"
+    },
+    "android_light": {
+        "m-primary-color": "#669900",
+        "m-primary-border-color": "#669900",
+        "m-primary-active-color": "#99CC00"
+    },
+    "ios": {
+        "blue": "#59C8FA",
+        "lightblue": "#46b8da",
+        "darkblue": "#007AFF",
+        "green": "#4BD964",
+        "red": "#FF3B30",
+        "lightred": "#FF2D55",
+        "grey": "#8E8E93",
+        "m-primary-font-family": "-apple-system-font, \"HelveticaNeue-Light\", \"Helvetica Neue Light\", \"Helvetica Neue\", Helvetica, Arial, \"Lucida Grande\", sans-serif",
+        "lightenPercentage": "25%",
+        "textfield-icon-y-position": "13px",
+        "m-primary-active-color": "$lightgrey",
+        "m-primary-active-text-color": "#007AFF",
+        "tablayout-menu-height": "50px",
+        "tablayout-menu-scroll-button-width": "140px",
+        "selection-checked-color": "#59C8FA",
+        "m-button-padding-bottom": "10px",
+        "m-button-padding": "$m-button-padding-top $m-button-padding-left-right 10px $m-button-padding-left-right-top $m-button-padding-top $m-button-padding-left-right 10px $m-button-padding-left-right-left-right 10px $m-button-padding-top $m-button-padding-left-right 10px $m-button-padding-left-right-left-right"
+    }
+},
+    get: function (name, theme) {
+        var theme = theme || M.Environment.device.os;
+
+        var result = this._vars[theme] ? this._vars[theme][name] : false;
+        if (!result && theme != M.ThemeVars.CONST.DEFAULT) {
+            result = this._vars[M.ThemeVars.CONST.DEFAULT][name];
+        }
+        if (!result) {
+            console.log('Can not find varibale "' + name + '".');
+        }
+        return result;
+    }
+}
+
+M.ThemeVars.CONST = {
+    IOS: 'ios',
+    ANDROID_DARK: 'android_dark',
+    ANDROID_LIGHT: 'android_light',
+    ANDROID: 'android_dark',
+    DEFAULT: 'default'
 }
\ No newline at end of file
diff --git a/src/ui/views/alert.js b/src/ui/views/alert.js
new file mode 100644
index 000000000..cb085a30a
--- /dev/null
+++ b/src/ui/views/alert.js
@@ -0,0 +1,101 @@
+// Copyright (c) 2013 M-Way Solutions GmbH
+// http://github.com/mwaylabs/The-M-Project/blob/absinthe/MIT-LICENSE.txt
+
+/**
+ *
+ * The base implementation of an alert view. You can show the alert view by calling the show function.
+ * Call hide/toggle for every show to hide the alert view.
+ * To force the hiding pass true to the hide call
+ *
+ * @module M.AlertView
+ * @extends M.ModalView
+ * @type {*|Object|void}
+ *
+ */
+M.AlertView = M.ModalView.extend({
+
+    /**
+     * The type of the View
+     * @private
+     * @type {String}
+     */
+    _type: 'M.AlertView',
+
+    /**
+     * The text displayed in the alert view
+     * @type {String}
+     */
+    text: '',
+
+    /**
+     * The title of the alert view
+     * @type {String}
+     */
+    title: '',
+
+    /**
+     * Defines that the alert view can't be closed by clicking on the overlay.
+     * @type {String}
+     */
+    hideOnOverlayClick: NO,
+
+    useAsScope: YES,
+    /**
+     * Gets called when user clicks on the ok button
+     */
+    onConfirm: function() {
+
+    },
+
+    _onConfirm: function() {
+        this.onConfirm();
+        this.hide();
+    },
+
+    initialize: function() {
+        var that = this;
+        M.View.prototype.initialize.apply(this, arguments);
+
+        this._childViews = this._childViews || {};
+        this.text = this.text || '';
+        this.title = this.title || '';
+
+        var content = M.View.extend({
+                value: '',
+                _templateString: M.TemplateManager.get('alert.ejs'),
+                assignTemplateValues: function() {
+                    return {
+                        text: that.text,
+                        title: that.title
+                    };
+
+                }
+            }, {
+                buttonContainer: M.View.extend({
+                    value: '',
+                    grid: 'row',
+                    childViews: {
+
+                        confirmButton: M.ButtonView.extend({
+                            grid: 'col-xs-8 col-xs-offset-2',
+                            value: 'Ok',
+                            cssClass: 'confirmButton',
+                            events: {
+                                tap: '_onConfirm'
+                            }
+                        })
+                    }
+                })
+            }
+
+        );
+
+        if(this._childViews.content){
+            console.log('there is already a content as childview!');
+        } else {
+            this._childViews.content = content;
+        }
+    }
+});
+
+M.Alert = M.AlertView.create().render();
\ No newline at end of file
diff --git a/src/ui/views/dialog.js b/src/ui/views/dialog.js
index 4ba7fe359..b0c473121 100644
--- a/src/ui/views/dialog.js
+++ b/src/ui/views/dialog.js
@@ -2,15 +2,185 @@
 // http://github.com/mwaylabs/The-M-Project/blob/absinthe/MIT-LICENSE.txt
 
 /**
+ *
+ * The base implementation of a dialog. You can show the dialog view by calling the show function.
+ * For displaying text in the dialog view you can pass the show function your String as an argument.
+ * Calling multiple times the show function with a different text will update the text.
+ * Call hide/toggle for every show to hide the dialog view.
+ * To force the hiding pass true to the hide call
+ *
  * @module M.DialogView
+ * @extends M.ModalView
+ * @type {*|Object|void}
+ *
+ * @example
+ *
+ *
+ *
  *
- * @type {*}
- * @extends M.View
  */
-M.DialogView = M.View.extend({
 
+M.DialogView = M.ModalView.extend({
+
+    /**
+     * The type of the View
+     * @private
+     * @type {String}
+     */
     _type: 'M.DialogView',
 
-    _templateString: M.TemplateManager.get('dialog.ejs')
+    /**
+     * Defines that the dialog view can't be closed by clicking on the overlay.
+     * @type {String}
+     */
+    hideOnOverlayClick: NO,
+
+    /**
+     * Defines the headline of the dialog view.
+     * @type {String}
+     */
+    headline: '',
+
+    /**
+     * Defines the text which is displayed in the content section of the dialog view.
+     * @type {String}
+     */
+    text: '',
+
+    /**
+     * Defines if the confirm button gets displayed in the dialog view.
+     * @type {Boolean}
+     */
+    confirmButton: YES,
+
+    /**
+     * Defines if the decline button gets displayed in the dialog view.
+     * @type {Boolean}
+     */
+    declineButton: NO,
+
+    /**
+     * Defines the label on the confirm button.
+     * @type {String}
+     */
+    confirmLabel: 'Ok',
+
+    /**
+     * Defines the label on the decline button.
+     * @type {String}
+     */
+    declineLabel: 'Cancel',
+
+    useAsScope: YES,
+    /**
+     * Gets called when user clicks on the confirm button
+     */
+    onConfirm: function(){
+
+    },
+
+    _onConfirm: function(){
+        this.onConfirm();
+        this.hide();
+    },
+
+    /**
+     * Gets called if the user taps the decline button
+     */
+    onDecline: function(){
+
+    },
+
+    _onDecline: function(){
+        this.onDecline();
+        this.hide();
+    },
+
+    initialize: function(){
+
+        var that = this;
+        M.View.prototype.initialize.apply(this, arguments);
+
+        this._childViews = this._childViews || {};
+        this.headline = this.headline || '';
+        this.text = this.text || '';
+
+        this.confirmLabel = (this.confirmLabel || this.confirmLabel === '') ? this.confirmLabel : 'Ok';
+        this.declineLabel = (this.declineLabel || this.declineLabel === '') ? this.declineLabel : 'Cancel';
+        this.confirmButton = this.confirmButton || YES;
+        this.declineButton = this.declineButton || NO;
+
+        var buttonGrid = 'col-xs-8 col-xs-offset-2' +
+            '';
+        if(this.confirmButton && this.declineButton){
+            buttonGrid = 'col-xs-6';
+        }
+
+        var buttons = {};
+
+        if(this.confirmButton){
+
+            buttons.confirm = M.ButtonView.extend({
+                grid: buttonGrid,
+                value: this.confirmLabel,
+                cssClass: 'confirmButton',
+                events: {
+                    tap: '_onConfirm'
+                }
+            });
+        }
+
+        if(this.declineButton){
+
+            buttons.decline = M.ButtonView.extend({
+                grid: buttonGrid,
+                value: this.declineLabel,
+                cssClass: 'declineButton',
+                events: {
+                    tap: '_onDecline'
+                }
+            });
+        }
+
+        var content = M.View.extend({
+                value: '',
+                _templateString:  M.TemplateManager.get('dialog.ejs'),
+                assignTemplateValues: function(){
+                    return {
+                        headline: that.headline,
+                        text: that.text
+                    };
+                }
+            }, {
+                buttons: M.View.extend({
+                    grid: 'row'
+                }, buttons ? buttons : {} )
+            }
+        );
+
+        if(this._childViews.content){
+            console.log('there is already a content as childview!');
+        } else {
+            this._childViews.content = content;
+        }
+
+        return this;
+    },
+
+    /**
+     * Show the dialog view
+     * @param {String} text - The text for the dialog view
+     * @returns {DialogView}
+     */
+    show: function() {
+        M.ModalView.prototype.show.apply(this, arguments);
+
+        return this;
+    }
+});
+
+M.Dialog = M.DialogView.create().render();
+
+
+
 
-});
\ No newline at end of file
diff --git a/test/test.html b/test/test.html
index 65229ca70..b3500d413 100644
--- a/test/test.html
+++ b/test/test.html
@@ -70,12 +70,14 @@
 <script src="ui/views/test.radiolist.js"></script>
 <script src="ui/views/test.modal.js"></script>
 <script src="ui/views/test.loader.js"></script>
+<script src="ui/views/test.alert.js"></script>
 <script src="ui/views/test.text.js"></script>
 <script src="ui/views/test.image.js"></script>
 <script src="ui/views/test.searchfield.js"></script>
 <script src="ui/views/test.menu.js"></script>
 <script src="ui/views/test.list.js"></script>
 <script src="ui/views/test.template.js"></script>
+<script src="ui/views/test.dialog.js"></script>
 
 <script src="ui/events/test.events.tap.js"></script>
 <script src="ui/events/test.events.swipe.js"></script>
diff --git a/test/ui/views/test.alert.js b/test/ui/views/test.alert.js
new file mode 100644
index 000000000..0ae487be4
--- /dev/null
+++ b/test/ui/views/test.alert.js
@@ -0,0 +1,174 @@
+describe('M.AlertView', function() {
+
+    it('general', function() {
+        // Basic
+        assert.isDefined(M.AlertView);
+        assert.isFunction(M.AlertView);
+        assert.isDefined(M.Alert);
+        assert.isTrue(M.View.prototype.isPrototypeOf(M.AlertView.create()));
+        assert.isTrue(M.ModalView.prototype.isPrototypeOf(M.AlertView.create()));
+        assert.isTrue(M.View.prototype.isPrototypeOf(M.Alert));
+        assert.isTrue(M.AlertView.prototype.isPrototypeOf(M.Alert));
+        assert.isFunction(M.Alert.show);
+        assert.isFunction(M.Alert.hide);
+        assert.equal(M.Alert._shownCounter, 0);
+        assert.equal(M.AlertView.create()._shownCounter, 0);
+    });
+
+    it('initialize', function(){
+        var testView = null;
+
+        var test = function (text ,title) {
+
+            testView = M.AlertView.extend({
+                text: text,
+                title: title
+            }).create().render();
+
+            testView.initialize();
+            if(text === null && title === null){
+                assert.equal(testView.text, '');
+                assert.equal(testView.title, '');
+            }
+            else{
+                assert.equal(testView.text, text);
+                assert.equal(testView.title, title);
+            }
+        };
+
+        test('abc','def');
+        test('','');
+        test(1,2);
+        test({}, {});
+        test([], []);
+        test(null, null);
+
+        testView = null;
+        test = null;
+    });
+
+    it('create and show alert with no parameters', function() {
+        var testView = M.AlertView.extend({
+        }).create().render();
+
+        assert.isDefined(testView);
+        assert.equal(testView._shownCounter, 0);
+        assert.lengthOf($('.alertview'), 0);
+        testView.show();
+        assert.equal(testView._shownCounter, 1);
+        assert.lengthOf($('.alertview'), 1);
+        assert.lengthOf($('.m-alertview-title'), 1);
+        assert.equal($('.m-alertview-title').html(), '');
+        assert.lengthOf($('.m-alertview-inner-message'), 1);
+        assert.equal($('.m-alertview-inner-message').html(), '');
+        assert.lengthOf(testView.$el.find('.buttonContainer'),1);
+        assert.lengthOf(testView.$el.find('.confirmButton'),1)
+        assert.equal(testView.$el.find('.confirmButton [data-binding="value"]').html(), 'Ok');
+        testView.hide();
+        assert.equal(testView._shownCounter, 0);
+        assert.lengthOf($('.alertview'), 0);
+
+        testView = null;
+    });
+
+    it('create and show alert with some parameters', function() {
+        var text = 'abc';
+
+        var testView = M.AlertView.extend({
+            text: text
+        }).create().render();
+
+        assert.isDefined(testView);
+        assert.equal(testView._shownCounter, 0);
+        assert.lengthOf($('.alertview'), 0);
+        testView.show();
+        assert.equal(testView._shownCounter, 1);
+        assert.lengthOf($('.alertview'), 1);
+        assert.lengthOf($('.m-alertview-title'), 1);
+        assert.equal($('.m-alertview-title').html(), '');
+        assert.lengthOf($('.m-alertview-inner-message'), 1);
+        assert.equal($('.m-alertview-inner-message').html(), text);
+        assert.lengthOf(testView.$el.find('.buttonContainer'),1);
+        assert.lengthOf(testView.$el.find('.confirmButton'), 1)
+        assert.equal(testView.$el.find('.confirmButton [data-binding="value"]').html(), 'Ok');
+        testView.hide();
+        assert.equal(testView._shownCounter, 0);
+        assert.lengthOf($('.alertview'), 0);
+
+        testView = null;
+        text = null;
+    });
+
+    it('show and create alert with all parameters', function() {
+        var text = 'abc';
+        var title = 'def';
+
+        var testView = M.AlertView.extend({
+            text: text,
+            title: title
+        }).create().render();
+
+        assert.isDefined(testView);
+        assert.equal(testView._shownCounter, 0);
+        assert.lengthOf($('.alertview'), 0);
+        testView.show();
+        assert.equal(testView._shownCounter, 1);
+        assert.lengthOf($('.alertview'), 1);
+        assert.lengthOf($('.m-alertview-title'), 1);
+        assert.equal($('.m-alertview-title').html(), title);
+        assert.lengthOf($('.m-alertview-inner-message'), 1);
+        assert.equal($('.m-alertview-inner-message').html(), text);
+        assert.lengthOf(testView.$el.find('.buttonContainer'),1);
+        assert.lengthOf(testView.$el.find('.confirmButton'), 1);
+        assert.equal(testView.$el.find('.confirmButton [data-binding="value"]').html(), 'Ok');
+        testView.hide();
+        assert.equal(testView._shownCounter, 0);
+        assert.lengthOf($('.alertview'), 0);
+
+        testView = null;
+        text = null;
+        title = null;
+    });
+
+    it('create and show alert view and overwriting functions', function() {
+        var text = 'abc';
+        var title = 'def';
+        var functionConfirm = function(){
+            console.log('ok');
+        };
+        var testView = M.AlertView.extend({
+            text: text,
+            title: title,
+            onConfirm: functionConfirm
+        }).create().render();
+
+        assert.isDefined(testView.onConfirm);
+        assert.isDefined(testView._onConfirm);
+
+        assert.equal(testView.onConfirm, functionConfirm);
+
+        assert.isDefined(testView);
+        assert.equal(testView._shownCounter, 0);
+        assert.lengthOf($('.alertview'), 0);
+        testView.show();
+        assert.equal(testView._shownCounter, 1);
+        assert.lengthOf($('.alertview'), 1);
+        assert.lengthOf($('.m-alertview-title'), 1);
+        assert.equal($('.m-alertview-title').html(), title);
+        assert.lengthOf($('.m-alertview-inner-message'), 1);
+        assert.equal($('.m-alertview-inner-message').html(), text);
+        assert.lengthOf(testView.$el.find('.buttonContainer'),1);
+        assert.lengthOf(testView.$el.find('.confirmButton'), 1);
+        assert.equal(testView.$el.find('.confirmButton [data-binding="value"]').html(), 'Ok');
+        testView.hide();
+        assert.equal(testView._shownCounter, 0);
+        assert.lengthOf($('.alertview'), 0);
+
+        testView = null;
+        text = null;
+        title = null;
+        functionConfirm = null;
+    });
+
+
+});
diff --git a/test/ui/views/test.dialog.js b/test/ui/views/test.dialog.js
new file mode 100644
index 000000000..ce48a7f80
--- /dev/null
+++ b/test/ui/views/test.dialog.js
@@ -0,0 +1,233 @@
+describe('M.DialogView', function() {
+
+    it('general', function() {
+        // Basic
+        assert.isDefined(M.DialogView);
+        assert.isFunction(M.DialogView);
+        assert.isDefined(M.Dialog);
+        assert.isTrue(M.View.prototype.isPrototypeOf(M.DialogView.create()));
+        assert.isTrue(M.ModalView.prototype.isPrototypeOf(M.DialogView.create()));
+        assert.isTrue(M.View.prototype.isPrototypeOf(M.Dialog));
+        assert.isTrue(M.DialogView.prototype.isPrototypeOf(M.Dialog));
+        assert.isFunction(M.Dialog.show);
+        assert.isFunction(M.Dialog.hide);
+        assert.isFunction(M.Dialog.onConfirm);
+        assert.isFunction(M.Dialog._onConfirm);
+        assert.isFunction(M.Dialog.onDecline);
+        assert.isFunction(M.Dialog._onDecline);
+        assert.equal(M.Dialog._shownCounter, 0);
+        assert.equal(M.DialogView.create()._shownCounter, 0);
+    });
+
+    it('initialize', function(){
+        var testView = null;
+
+        var test = function (labelText, text ,headline) {
+
+            testView = M.DialogView.extend({
+                text: text,
+                headline: headline,
+                confirmButton: YES,
+                declineButton: YES,
+                confirmLabel: labelText,
+                declineLabel: labelText
+            }).create().render();
+
+            testView.initialize();
+            if(text === null && labelText === null && headline === null){
+                assert.equal(testView.text, '');
+                assert.equal(testView.headline, '');
+                assert.equal(testView.confirmLabel, 'Ok');
+                assert.equal(testView.declineLabel, 'Cancel');
+            }
+            else{
+                assert.equal(testView.text, text);
+                assert.equal(testView.headline, headline);
+                assert.equal(testView.confirmLabel, labelText);
+                assert.equal(testView.declineLabel, labelText);
+            }
+        };
+
+        test('abc','def','ghi');
+        test('','','');
+        test(1,2,3);
+        test('', [], []);
+        test('', {}, {});
+        test(null, null, null);
+
+        testView = null;
+        test = null;
+    });
+
+    it('create and show dialog with no parameters', function() {
+        var dialog = M.DialogView.extend({
+        }).create().render();
+
+        assert.isDefined(dialog);
+        assert.equal(dialog._shownCounter, 0);
+        assert.lengthOf($('.dialogview'), 0);
+        dialog.show();
+        assert.equal(dialog._shownCounter, 1);
+        assert.lengthOf($('.dialogview'), 1);
+        assert.lengthOf($('.m-dialogview-headline'), 1);
+        assert.equal($('.m-dialogview-headline').html(), '');
+        assert.lengthOf($('.m-dialogview-inner-message'), 1);
+        assert.equal($('.m-dialogview-inner-message').html(), '');
+        assert.lengthOf(dialog.$el.find('.buttons'),1)
+        assert.lengthOf(dialog.$el.find('.confirmButton'), 1)
+        assert.lengthOf(dialog.$el.find('.declineButton'), 0)
+        dialog.hide();
+        assert.equal(dialog._shownCounter, 0);
+        assert.lengthOf($('.dialogview'), 0);
+
+        dialog = null;
+    });
+
+    it('create and show dialog with some parameters', function() {
+        var text = 'abc';
+        var headline = 'def';
+        var buttonBool = YES;
+        var label = 'okeTest';
+
+        var dialog = M.DialogView.extend({
+            text: text,
+            headline: headline,
+            confirmButton: buttonBool,
+            confirmLabel: label
+        }).create().render();
+
+        assert.isDefined(dialog);
+        assert.equal(dialog._shownCounter, 0);
+        assert.lengthOf($('.dialogview'), 0);
+        dialog.show();
+        assert.equal(dialog._shownCounter, 1);
+        assert.lengthOf($('.dialogview'), 1);
+        assert.lengthOf($('.m-dialogview-headline'), 1);
+        assert.equal($('.m-dialogview-headline').html(), headline);
+        assert.lengthOf($('.m-dialogview-inner-message'), 1);
+        assert.equal($('.m-dialogview-inner-message').html(), text);
+        assert.lengthOf(dialog.$el.find('.buttons'),1)
+        assert.lengthOf(dialog.$el.find('.confirmButton'), 1)
+        assert.lengthOf(dialog.$el.find('.declineButton'), 0)
+        assert.equal(dialog.$el.find('.confirmButton [data-binding="value"]').html(), label);
+        dialog.hide();
+        assert.equal(dialog._shownCounter, 0);
+        assert.lengthOf($('.dialogview'), 0);
+
+        dialog = null;
+        text = null;
+        headline = null;
+        buttonBool = null;
+        label = null;
+    });
+
+    it('show and create dialog with all parameters', function() {
+        var text = 'abc';
+        var headline = 'def';
+        var buttonBoolConfirm = YES;
+        var confirmLabel = 'okeTest';
+        var buttonBoolDecline = YES;
+        var declineLabel = 'decline';
+
+        var dialog = M.DialogView.extend({
+            text: text,
+            headline: headline,
+            confirmButton: buttonBoolConfirm,
+            confirmLabel: confirmLabel,
+            declineButton: buttonBoolDecline,
+            declineLabel: declineLabel
+        }).create().render();
+
+        assert.isDefined(dialog);
+        assert.equal(dialog._shownCounter, 0);
+        assert.lengthOf($('.dialogview'), 0);
+        dialog.show();
+        assert.equal(dialog._shownCounter, 1);
+        assert.lengthOf($('.dialogview'), 1);
+        assert.lengthOf($('.m-dialogview-headline'), 1);
+        assert.equal($('.m-dialogview-headline').html(), headline);
+        assert.lengthOf($('.m-dialogview-inner-message'), 1);
+        assert.equal($('.m-dialogview-inner-message').html(), text);
+        assert.lengthOf(dialog.$el.find('.buttons'),1);
+        assert.lengthOf(dialog.$el.find('.confirmButton'), 1);
+        assert.lengthOf(dialog.$el.find('.declineButton'), 1);
+        assert.equal(dialog.$el.find('.confirmButton [data-binding="value"]').html(), confirmLabel);
+        assert.equal(dialog.$el.find('.declineButton [data-binding="value"]').html(), declineLabel);
+        dialog.hide();
+        assert.equal(dialog._shownCounter, 0);
+        assert.lengthOf($('.dialogview'), 0);
+
+        dialog = null;
+        text = null;
+        headline = null;
+        buttonBoolConfirm = null;
+        confirmLabel = null;
+        buttonBoolDecline = null;
+        declineLabel = null;
+    });
+
+    it('create and show dialog view and overwriting functions', function() {
+        var text = 'abc';
+        var headline = 'def';
+        var buttonBoolConfirm = YES;
+        var confirmLabel = 'okeTest';
+        var buttonBoolDecline = YES;
+        var declineLabel = 'decline';
+        var functionConfirm = function(){
+            console.log('ok');
+        };
+        var functionDecline = function(){
+            console.log('cancel');
+        };
+
+        var dialog = M.DialogView.extend({
+            text: text,
+            headline: headline,
+            confirmButton: buttonBoolConfirm,
+            confirmLabel: confirmLabel,
+            declineButton: buttonBoolDecline,
+            declineLabel: declineLabel,
+            onConfirm: functionConfirm,
+            onDecline: functionDecline
+        }).create().render();
+
+        assert.isDefined(dialog.onConfirm);
+        assert.isDefined(dialog.onDecline);
+        assert.isDefined(dialog._onConfirm);
+        assert.isDefined(dialog._onDecline);
+
+        assert.equal(dialog.onConfirm, functionConfirm);
+        assert.equal(dialog.onDecline, functionDecline);
+
+        assert.isDefined(dialog);
+        assert.equal(dialog._shownCounter, 0);
+        assert.lengthOf($('.dialogview'), 0);
+        dialog.show();
+        assert.equal(dialog._shownCounter, 1);
+        assert.lengthOf($('.dialogview'), 1);
+        assert.lengthOf($('.m-dialogview-headline'), 1);
+        assert.equal($('.m-dialogview-headline').html(), headline);
+        assert.lengthOf($('.m-dialogview-inner-message'), 1);
+        assert.equal($('.m-dialogview-inner-message').html(), text);
+        assert.lengthOf(dialog.$el.find('.buttons'),1);
+        assert.lengthOf(dialog.$el.find('.confirmButton'), 1);
+        assert.lengthOf(dialog.$el.find('.declineButton'), 1);
+        assert.equal(dialog.$el.find('.confirmButton [data-binding="value"]').html(), confirmLabel);
+        assert.equal(dialog.$el.find('.declineButton [data-binding="value"]').html(), declineLabel);
+        dialog.hide();
+        assert.equal(dialog._shownCounter, 0);
+        assert.lengthOf($('.dialogview'), 0);
+
+        dialog = null;
+        text = null;
+        headline = null;
+        buttonBoolConfirm = null;
+        confirmLabel = null;
+        buttonBoolDecline = null;
+        declineLabel = null;
+        functionConfirm = null;
+        functionDecline = null;
+    });
+
+
+});
diff --git a/test/ui/views/test.template_manager.js b/test/ui/views/test.template_manager.js
index c5fceffcc..7505d63de 100644
--- a/test/ui/views/test.template_manager.js
+++ b/test/ui/views/test.template_manager.js
@@ -12,7 +12,6 @@ describe('M.TemplateManager', function() {
         'ButtonView',
         'ListView',
         'SliderView',
-        'DialogView',
         'ToggleView',
         'ImageView',
         'ToolbarView',