diff --git a/css/index.css b/css/index.css
index 9f9461d..aa12569 100644
--- a/css/index.css
+++ b/css/index.css
@@ -1,10 +1,16 @@
-/*
-Document   : index
-Created on : 14 févr. 2012, 21:56:52
-Author     : mark prades
-Description:
-Purpose of the stylesheet follows.
- */
+/* ksuFAVICON BUILDER stylecheet */
+h1,h2,h3,h4,h5,h6,div,p{
+margin:0;
+padding:0;
+}
+h1,h2,h3,h4{
+  margin-top:10px;
+  margin-bottom: 5px;
+}
+h5,h6{
+margin-top: 6px;
+
+}
 #header{
   margin:0;
   padding:0;
@@ -48,7 +54,6 @@ body{
   font-size:13px;
   padding:0;
   margin:0;
-
 }
 canvas{
   border: 1px solid #AAA;
@@ -59,10 +64,10 @@ canvas{
   cursor: crosshair;
 }
 #target._16{
-  width:390px;
+  width:395px;
 }
 #target._32{
-  width:755px;
+  width:775px;
 }
 #colorSelector,#left{
   width: 100px;
@@ -86,18 +91,18 @@ canvas{
   margin-right:20px;
   padding:0;
 }
-.cell{
+#target div{
   width:20px;
   height:20px;
-  margin:-3px 1px 0px 0px;
+  margin:-2px -2px 0px 0px;
   padding: 0;
   line-height: 0;
   display: inline-block;
   border:1px solid #DDD;
 }
-.cell:hover{
+#target div:hover{
   border: 1px dashed #AAA;
 }
 .emptyCell{
-  background:url("/lib/img/faviconbuilder/emptycell.gif") ;
+  background:url("/lib/img/faviconbuilder/emptycell.gif"), url("../img/emptycell.gif");
 }
diff --git a/index.html b/index.html
index 6b68a59..7beb14c 100644
--- a/index.html
+++ b/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>Favicon builder</title>
+    <title>KsuFavicon builder</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <link rel="stylesheet" href="css/index.css" />
     <!--[if IE]>
@@ -10,7 +10,7 @@
   </head>
   <body>
     <div id='header'>
-      <h1>Favicon builder.
+      <h1>KsuFavicon builder.
         <a href="http://www.w3.org/html/logo/">
           <img src="http://www.w3.org/html/logo/badge/html5-badge-h-graphics-storage.png" height="35" alt="HTML5 Powered with Graphics, 3D &amp; Effects, and Offline &amp; Storage" title="HTML5 Powered with Graphics, 3D &amp; Effects, and Offline &amp; Storage">
         </a>
@@ -20,7 +20,12 @@ <h1>Favicon builder.
       <noscript>
         <h1> This page requires Javascript to be activated</h1>
       </noscript>
-      <h2>Cette application permet de designer des icons , puis de les sauvegarder au format png</h2>
+      <h4>
+        EN : This app helps designer create sprites ,favicons ,or pixel art graphics online or offline and save them in the browser local storage or export them as png files
+      <br/>FR : Cette application permet de designer des icons , puis de les sauvegarder au format png
+      </h4>
+      <h5>Version 0.1</h5>
+
       <h6><a href="mailto:aikah@free.fr" style='color:inherit;'>Design : M.PARAISO</a></h6>
       <div id="app">
         <div class="nav inline">
diff --git a/js/faviconbuilder.coffee b/js/faviconbuilder.coffee
index c7d965b..775382f 100644
--- a/js/faviconbuilder.coffee
+++ b/js/faviconbuilder.coffee
@@ -90,12 +90,15 @@ class App.Utils.DefaultMenu
     {label:"Save to local",action:"savetolocal",title:"Save icon to local storage (not available in all browers !!) \n Click on restore to load the saved icon."}
     {label:"Restore from local",action:"restorefromlocal",title:"Info :\nRestore previously saved icon.",datas:{}}
   ]
+
 ### MODELS ###
 class App.Models.Color
   constructor:(@title="Eraser",@color=null,@alpha=1)->
 
 class App.Models.Application
-  currentColor : new App.Models.Color("Black","#000000")
+  constructor:->
+    @children=[]
+  currentColor : new App.Models.Color("Black","#000000",1)
   favIconGridModel : null
 
 class App.Models.Cell
@@ -114,6 +117,9 @@ class App.Models.Grid
       for j in [0... @columns]
         console.log @grid[i][j]
         @grid[i][j]?= new  App.Models.Cell()
+  fillCell:(params)->
+    @grid[params.row][params.column].color = params.color.color
+    @grid[params.row][params.column].alpha = 1
   emptyGrid:->
     for i in [0...@rows]
       @grid.push []
@@ -150,18 +156,17 @@ class App.Views.Grid
     console.log "App.Views.Grid.render()"
     @divTargetId.innerHTML = ""
     @divTargetId.className = " #{@divTargetId.classes } _#{@gridModel.columns}"
+    @el = ""
     for row in [0...@gridModel.rows]
       for column in [0...@gridModel.columns]
-        cell = document.createElement("div")
-        cell.className+=" #{@cellStyle}"
+        element = " <div name='cell' "
         if @gridModel.grid[row][column].color != null  and @gridModel.grid[row][column].color != ""
-          cell.style.backgroundColor = @gridModel.grid[row][column].color
+          element+= " style='background-color:#{@gridModel.grid[row][column].color}' "
         else
-          cell.className+=" #{@emptyCellStyle}"
-        cell.dataset?= {}
-        cell.dataset.row = row
-        cell.dataset.column = column
-        @divTargetId.appendChild(cell)
+          element+= " class='#{@emptyCellStyle}' "
+        element+= " data-row='#{row}' data-column='#{column}' "
+        element+= " ></div> "
+        ###
         cell.onmouseover  = (e)=>
           if @drawMode == true
             @fillCell(e)
@@ -169,7 +174,17 @@ class App.Views.Grid
           @fillCell(e)
         cell.onmousedown = (e)=>
           @fillCell(e)
-    @eventDispatcher.dispatch(new App.Utils.Event("faviconrender"),@)
+        ###
+        @el += element
+    @divTargetId.innerHTML += @el
+    @divTargetId.onmouseup =(e)=>
+      @drawMode = false
+    @divTargetId.onmousemove = @divTargetId.onmousedown = (e)=>
+      if e.type == "mousedown" then @drawMode = true
+      if e.target.getAttribute("name")=="cell" and @drawMode == true
+        @eventDispatcher.dispatch(new App.Utils.Event("clickcell"),{tool:"pen",width:2,color:@pen.color,row:e.target.getAttribute("data-row"),column:e.target.getAttribute("data-column")})
+      return false
+    return this
   fillCell:(e)->
     @gridModel.grid[parseInt(e.currentTarget.dataset.row)][parseInt(e.currentTarget.dataset.column)].color = @pen.color.color # App.Models.Application::currentColor.color
     @eventDispatcher.dispatch(new App.Utils.Event("updateviews"),@)
@@ -312,7 +327,6 @@ class Main
     @menuModel = new App.Models.Menu(new App.Utils.DefaultMenu().items,$menu)
     App.Models.Application.favIconGridModel = @gridModel
     ### CONTROLLERS ###
-    #@applicationController = new App.Controllers.Application(@applicationModel)
     ### VIEWS ###
     @applicationView = new App.Views.Application($target,@applicationModel)
     @colorSelectorView = new App.Views.ColorSelector($colorSelector,@colorSelectorModel)
@@ -335,12 +349,12 @@ class Main
     @menuView.eventDispatcher.addListener("savetolocal",@savetolocal)
     @menuView.eventDispatcher.addListener("restorefromlocal",@restoreFromLocal)
     @factorSelectorView.eventDispatcher.addListener("selectfactor",@selecFactor)
-    @gridView.divTargetId.onmousedown = (e)=>
-      @gridView.eventDispatcher.dispatch(new App.Utils.Event("drawmodechange"),true)
-    @gridView.divTargetId.onmouseup = (e)=>
-      @gridView.eventDispatcher.dispatch(new App.Utils.Event("drawmodechange"),false)
     @gridView.eventDispatcher.addListener("faviconrender",@renderCanvasPreview)
     @gridView.eventDispatcher.addListener("updateviews",@updateViews)
+    @gridView.eventDispatcher.addListener("clickcell",@clickcell)
+  clickcell:(e)=>
+    @gridModel.fillCell(e.datas)
+    @updateViews()
   renderCanvasPreview:(e)=>
     @canvasPreviewView.render()
   oncolorchange:(e)=>
@@ -354,7 +368,7 @@ class Main
     @gridModel.rows = e.datas.rows
     @gridModel.columns= e.datas.columns
     @gridModel.fillGridBlank()
-    @gridView.render()
+    @applicationView.render()
   emptygrid:=>
     @gridModel.emptyGrid()
     @gridView.render()
diff --git a/js/faviconbuilder.js b/js/faviconbuilder.js
index 0bc66d1..9438afd 100644
--- a/js/faviconbuilder.js
+++ b/js/faviconbuilder.js
@@ -167,9 +167,11 @@ App.Models.Color = (function() {
 
 App.Models.Application = (function() {
 
-  function Application() {}
+  function Application() {
+    this.children = [];
+  }
 
-  Application.prototype.currentColor = new App.Models.Color("Black", "#000000");
+  Application.prototype.currentColor = new App.Models.Color("Black", "#000000", 1);
 
   Application.prototype.favIconGridModel = null;
 
@@ -215,6 +217,11 @@ App.Models.Grid = (function() {
     return _results;
   };
 
+  Grid.prototype.fillCell = function(params) {
+    this.grid[params.row][params.column].color = params.color.color;
+    return this.grid[params.row][params.column].alpha = 1;
+  };
+
   Grid.prototype.emptyGrid = function() {
     var i, j, _ref, _results;
     _results = [];
@@ -318,36 +325,52 @@ App.Views.Grid = (function() {
   }
 
   Grid.prototype.render = function() {
-    var cell, column, row, _ref, _ref2,
+    var column, element, row, _ref, _ref2,
       _this = this;
     console.log("App.Views.Grid.render()");
     this.divTargetId.innerHTML = "";
     this.divTargetId.className = " " + this.divTargetId.classes + " _" + this.gridModel.columns;
+    this.el = "";
     for (row = 0, _ref = this.gridModel.rows; 0 <= _ref ? row < _ref : row > _ref; 0 <= _ref ? row++ : row--) {
       for (column = 0, _ref2 = this.gridModel.columns; 0 <= _ref2 ? column < _ref2 : column > _ref2; 0 <= _ref2 ? column++ : column--) {
-        cell = document.createElement("div");
-        cell.className += " " + this.cellStyle;
+        element = " <div name='cell' ";
         if (this.gridModel.grid[row][column].color !== null && this.gridModel.grid[row][column].color !== "") {
-          cell.style.backgroundColor = this.gridModel.grid[row][column].color;
+          element += " style='background-color:" + this.gridModel.grid[row][column].color + "' ";
         } else {
-          cell.className += " " + this.emptyCellStyle;
+          element += " class='" + this.emptyCellStyle + "' ";
         }
-        if (cell.dataset == null) cell.dataset = {};
-        cell.dataset.row = row;
-        cell.dataset.column = column;
-        this.divTargetId.appendChild(cell);
-        cell.onmouseover = function(e) {
-          if (_this.drawMode === true) return _this.fillCell(e);
-        };
-        cell.onclick = function(e) {
-          return _this.fillCell(e);
-        };
-        cell.onmousedown = function(e) {
-          return _this.fillCell(e);
-        };
+        element += " data-row='" + row + "' data-column='" + column + "' ";
+        element += " ></div> ";
+        /*
+                cell.onmouseover  = (e)=>
+                  if @drawMode == true
+                    @fillCell(e)
+                cell.onclick = (e)=>
+                  @fillCell(e)
+                cell.onmousedown = (e)=>
+                  @fillCell(e)
+        */
+        this.el += element;
       }
     }
-    return this.eventDispatcher.dispatch(new App.Utils.Event("faviconrender"), this);
+    this.divTargetId.innerHTML += this.el;
+    this.divTargetId.onmouseup = function(e) {
+      return _this.drawMode = false;
+    };
+    this.divTargetId.onmousemove = this.divTargetId.onmousedown = function(e) {
+      if (e.type === "mousedown") _this.drawMode = true;
+      if (e.target.getAttribute("name") === "cell" && _this.drawMode === true) {
+        _this.eventDispatcher.dispatch(new App.Utils.Event("clickcell"), {
+          tool: "pen",
+          width: 2,
+          color: _this.pen.color,
+          row: e.target.getAttribute("data-row"),
+          column: e.target.getAttribute("data-column")
+        });
+      }
+      return false;
+    };
+    return this;
   };
 
   Grid.prototype.fillCell = function(e) {
@@ -597,8 +620,8 @@ Main = (function() {
     this.exportCanvas = __bind(this.exportCanvas, this);
     this.oncolorchange = __bind(this.oncolorchange, this);
     this.renderCanvasPreview = __bind(this.renderCanvasPreview, this);
-    var $canvasPreview, $colorSelector, $factorSelector, $menu, $target, defaultColor, title,
-      _this = this;
+    this.clickcell = __bind(this.clickcell, this);
+    var $canvasPreview, $colorSelector, $factorSelector, $menu, $target, defaultColor, title;
     $target = document.getElementById("target");
     $canvasPreview = document.getElementById("canvasPreview");
     $colorSelector = document.getElementById("colorSelector");
@@ -641,16 +664,16 @@ Main = (function() {
     this.menuView.eventDispatcher.addListener("savetolocal", this.savetolocal);
     this.menuView.eventDispatcher.addListener("restorefromlocal", this.restoreFromLocal);
     this.factorSelectorView.eventDispatcher.addListener("selectfactor", this.selecFactor);
-    this.gridView.divTargetId.onmousedown = function(e) {
-      return _this.gridView.eventDispatcher.dispatch(new App.Utils.Event("drawmodechange"), true);
-    };
-    this.gridView.divTargetId.onmouseup = function(e) {
-      return _this.gridView.eventDispatcher.dispatch(new App.Utils.Event("drawmodechange"), false);
-    };
     this.gridView.eventDispatcher.addListener("faviconrender", this.renderCanvasPreview);
     this.gridView.eventDispatcher.addListener("updateviews", this.updateViews);
+    this.gridView.eventDispatcher.addListener("clickcell", this.clickcell);
   }
 
+  Main.prototype.clickcell = function(e) {
+    this.gridModel.fillCell(e.datas);
+    return this.updateViews();
+  };
+
   Main.prototype.renderCanvasPreview = function(e) {
     return this.canvasPreviewView.render();
   };
@@ -670,7 +693,7 @@ Main = (function() {
     this.gridModel.rows = e.datas.rows;
     this.gridModel.columns = e.datas.columns;
     this.gridModel.fillGridBlank();
-    return this.gridView.render();
+    return this.applicationView.render();
   };
 
   Main.prototype.emptygrid = function() {
diff --git a/manifest b/manifest
new file mode 100644
index 0000000..e69de29
