diff --git a/OpenPage/assets/scheme.html b/OpenPage/assets/scheme.html
index b8deaa3..3f16689 100644
--- a/OpenPage/assets/scheme.html
+++ b/OpenPage/assets/scheme.html
@@ -19,7 +19,8 @@
                 <afx-button data-width = "25" data-id="btaj" iconclass = "fa fa-align-justify"></afx-button>
                 <afx-button data-width = "25" data-id="btindent" iconclass = "fa fa-indent"></afx-button>
                 <afx-button data-width = "25" data-id="btoutdent" iconclass = "fa fa-outdent"></afx-button>
-                <afx-list-view dropdown = "true" data-width="80" data-id="format-list"></afx-list-view>
+                <afx-button data-width = "25" data-id="btformat" iconclass = "fa fa-paint-brush"></afx-button>
+                <afx-list-view dropdown = "true" data-width="100" data-id="format-list"></afx-list-view>
                 <div data-width="5"></div>
                 <afx-nspinner data-width = "50" data-id="font-size" ></afx-nspinner>
                 <div data-width="5"></div>
@@ -30,6 +31,16 @@
             <div data-id="container">
                 <div data-id="odfcanvas"></div>
             </div>
+            <div data-height="5"></div>
+            <afx-hbox data-id="status-bar" data-height="28">
+                <div></div>
+                <afx-button data-width = "25" data-id="btzoomfix" iconclass = "fa fa-arrows-alt"></afx-button>
+                <div data-width="5"></div>
+                <afx-slider data-id="slzoom" data-width="150" max="400"></afx-slider>
+                <div data-width="5"></div>
+                <afx-label data-id = "lbzoom" data-width="40"></afx-label>
+            </afx-hbox>
+            
         </afx-vbox>
         
     </afx-hbox>
diff --git a/OpenPage/build/debug/main.css b/OpenPage/build/debug/main.css
index 77073ce..5340c8d 100644
--- a/OpenPage/build/debug/main.css
+++ b/OpenPage/build/debug/main.css
@@ -23,21 +23,55 @@ afx-app-window[data-id="OpenPage"] afx-hbox[data-id="toolbox"]
     border: 1px solid #eaeaea;
     box-shadow: 3px 3px 3px #9f9F9F;
 }
-afx-app-window[data-id="HyperLinkDialog"] afx-label.header span
+afx-app-window[data-id="OpenPage"] afx-hbox[data-id="status-bar"]
 {
-    font-weight: bold;
+    background-color: #f5f5f5;
+    border: 1px solid #eaeaea;
+    box-shadow: -3px -3px 3px #9f9F9F;
 }
-afx-app-window[data-id="OpenPage"] afx-hbox[data-id="toolbox"] afx-button button{
+afx-app-window[data-id="OpenPage"] afx-hbox[data-id="toolbox"] afx-button button, afx-app-window[data-id="OpenPage"] afx-button[data-id="btzoomfix"] button
+{
     border: 1px solid #f5f5f5;
     background-color: transparent;
     width:100%;
     height: 100%;
 }
 
-afx-app-window[data-id="OpenPage"] afx-hbox[data-id="toolbox"] afx-button button:hover, afx-app-window[data-id="OpenPage"] afx-hbox[data-id="toolbox"] afx-button button.btactive
+afx-app-window[data-id="OpenPage"] afx-hbox[data-id="toolbox"] afx-button button:hover, afx-app-window[data-id="OpenPage"] afx-hbox[data-id="toolbox"] afx-button button.btactive, afx-app-window[data-id="OpenPage"] afx-button[data-id="btzoomfix"] button:hover
 {
     border: 1px solid #759DC0;
     background-color: transparent;
     border-radius:5px;
     color:#759DC0;
+}
+afx-app-window[data-id="HyperLinkDialog"] afx-label.header span
+{
+    font-weight: bold;
+}
+afx-app-window[data-id="FormatDialog"] afx-label.header
+{
+    padding-left: 5px;
+    border-bottom: 1px solid #a6a6a6;
+}
+afx-app-window[data-id="FormatDialog"] afx-label.header span
+{
+    font-weight: bold;
+}
+afx-app-window[data-id="FormatDialog"] afx-hbox[data-id="aligmentbox"] afx-label span,
+afx-app-window[data-id="FormatDialog"] afx-hbox[data-id="spacingbox"] afx-label span,
+afx-app-window[data-id="FormatDialog"] afx-hbox[data-id="stylebox"] afx-label span
+{
+    display: block;
+    padding-top: 7px;
+}
+
+afx-app-window[data-id="FormatDialog"]  div[data-id="preview"]
+{
+    border: 1px solid #a6a6a6;
+}
+afx-app-window[data-id="FormatDialog"]  div[data-id="txtcolor"],
+afx-app-window[data-id="FormatDialog"]  div[data-id="bgcolor"]
+{
+    border:1px solid #a6a6a6;
+    display: block;
 }
\ No newline at end of file
diff --git a/OpenPage/build/debug/main.js b/OpenPage/build/debug/main.js
index f21837b..76dbf10 100644
--- a/OpenPage/build/debug/main.js
+++ b/OpenPage/build/debug/main.js
@@ -1,5 +1,5 @@
 (function() {
-  var HyperLinkDialog, OpenPage;
+  var FormatDialog, HyperLinkDialog, OpenPage;
 
   OpenPage = class OpenPage extends this.OS.GUI.BaseApplication {
     constructor(args) {
@@ -13,14 +13,20 @@
           return OpenPage.EditorSession = ES;
         });
       }
+      this.userid = this.systemsetting.user.username;
       this.eventSubscriptions = new core.EventSubscriptions();
       this.initToolbox();
       this.initCanvas();
-      return this.canvas.load(`${this._api.handler.get}/home://welcome.odt`);
+      this.canvas.load(`${this._api.handler.get}/home://welcome.odt`);
+      this.currentStyle = "";
+      return this.resource = {
+        fonts: [],
+        formats: []
+      };
     }
 
     initToolbox() {
-      var el, fn, me, name, ref, results;
+      var el, fn, me, name, ref;
       me = this;
       this.basictool = {
         undo: this.find("btundo"),
@@ -40,13 +46,16 @@
         indent: this.find("btindent"),
         outdent: this.find("btoutdent"),
         fonts: this.find("font-list"),
-        fontsize: this.find("font-size")
+        fontsize: this.find("font-size"),
+        styles: this.find("format-list"),
+        zoom: this.find("slzoom"),
+        format: this.find("btformat")
       };
       fn = function(name, el) {
         var act;
-        if (name === "fonts") {
+        if (name === "fonts" || name === "styles") {
           act = "onlistselect";
-        } else if (name === "fontsize") {
+        } else if (name === "fontsize" || name === "zoom") {
           act = "onchange";
         } else {
           act = "onbtclick";
@@ -63,12 +72,18 @@
         });
       };
       ref = this.basictool;
-      results = [];
       for (name in ref) {
         el = ref[name];
-        results.push(fn(name, el));
+        fn(name, el);
       }
-      return results;
+      (this.find("btzoomfix")).set("onbtclick", function(e) {
+        return me.zoom(100);
+      });
+      return this.basictool.zoom.set("onchanging", function(e) {
+        var zlb;
+        zlb = me.find("lbzoom");
+        return zlb.set("text", Math.floor(e) + "%");
+      });
     }
 
     initCanvas() {
@@ -77,7 +92,6 @@
       me = this;
       el.setAttribute("translate", "no");
       el.classList.add("notranslate");
-      this.userid = "localuser";
       this.canvas = new odf.OdfCanvas(el);
       this.documentChanged = function(e) {};
       //console.log e
@@ -86,6 +100,29 @@
       this.textStylingChanged = function(e) {
         return me.updateToolbar(e);
       };
+      this.paragrahStyleChanged = function(e) {
+        var i, item, items, j, len, v;
+        if (e.type !== "style") {
+          return;
+        }
+        items = me.basictool.styles.get("items");
+        for (i = j = 0, len = items.length; j < len; i = ++j) {
+          v = items[i];
+          if (v.name === e.styleName) {
+            item = i;
+          }
+        }
+        me.currentStyle = e.styleName;
+        return me.basictool.styles.set("selected", item);
+      };
+      this.updateSlider = function(v) {
+        var value, zlb;
+        value = Math.floor(v * 100);
+        me.basictool.zoom.set("value", value);
+        zlb = me.find("lbzoom");
+        return zlb.set("text", value + "%");
+      };
+      
       //@canvas.enableAnnotations(true, true)
       return this.canvas.addListener("statereadychange", function() {
         var op, viewOptions;
@@ -111,6 +148,8 @@
         me.directFormattingCtl = me.editorSession.sessionController.getDirectFormattingController();
         me.directFormattingCtl.subscribe(gui.DirectFormattingController.textStylingChanged, me.textStylingChanged);
         me.directFormattingCtl.subscribe(gui.DirectFormattingController.paragraphStylingChanged, me.textStylingChanged);
+        me.editorSession.subscribe(OpenPage.EditorSession.signalParagraphChanged, me.paragrahStyleChanged);
+        
         // hyper link controller
         me.hyperlinkController = me.editorSession.sessionController.getHyperlinkController();
         me.eventSubscriptions.addFrameSubscription(me.editorSession, OpenPage.EditorSession.signalCursorMoved, function() {
@@ -129,6 +168,11 @@
 
         //text controller
         me.textController = me.editorSession.sessionController.getTextController();
+        
+        // zoom controller
+        me.zoomHelper = me.editorSession.getOdfCanvas().getZoomHelper();
+        me.zoomHelper.subscribe(gui.ZoomHelper.signalZoomChanged, me.updateSlider);
+        me.updateSlider(me.zoomHelper.getZoomLevel());
         me.editorSession.sessionController.setUndoManager(new gui.TrivialUndoManager());
         me.editorSession.sessionController.getUndoManager().subscribe(gui.UndoManager.signalDocumentModifiedChanged, me.documentChanged);
         me.editorSession.sessionController.getMetadataController().subscribe(gui.MetadataController.signalMetadataChanged, me.metaChanged);
@@ -136,12 +180,13 @@
         op.init({
           memberid: me.userid,
           setProperties: {
-            "fullName": "Xuan Sang LE",
+            "fullName": me.userid,
             "color": "blue"
           }
         });
         me.session.enqueue([op]);
         me.initFontList(me.editorSession.getDeclaredFonts());
+        me.initStyles(me.editorSession.getAvailableParagraphStyles());
         me.editorSession.sessionController.insertLocalCursor();
         return me.editorSession.sessionController.startEditing();
       });
@@ -150,14 +195,38 @@
     //console.log me.editorSession.getDeclaredFonts()
 
     initFontList(list) {
-      var j, len, v;
+      var j, l, len, len1, v;
       for (j = 0, len = list.length; j < len; j++) {
         v = list[j];
         v.text = v.name;
       }
+      for (l = 0, len1 = list.length; l < len1; l++) {
+        v = list[l];
+        this.resource.fonts.push({
+          text: v.text,
+          name: v.family
+        });
+      }
       return this.basictool.fonts.set("items", list);
     }
 
+    initStyles(list) {
+      var j, l, len, len1, v;
+      for (j = 0, len = list.length; j < len; j++) {
+        v = list[j];
+        v.text = v.displayName;
+      }
+      for (l = 0, len1 = list.length; l < len1; l++) {
+        v = list[l];
+        this.resource.formats.push({
+          text: v.text,
+          name: v.name,
+          el: this.editorSession.getParagraphStyleElement(v.name)
+        });
+      }
+      return this.basictool.styles.set("items", list);
+    }
+
     updateToolbar(changes) {
       if (changes.hasOwnProperty('isBold')) {
         // basic style
@@ -363,6 +432,24 @@
       });
     }
 
+    styles(e) {
+      if (e.data.name === this.currentStyle) {
+        return;
+      }
+      return this.editorSession.setCurrentParagraphStyle(e.data.name);
+    }
+
+    zoom(e) {
+      //console.log "zooming", e
+      return this.zoomHelper.setZoomLevel(e / 100.0);
+    }
+
+    format(e) {
+      return this.openDialog(new FormatDialog(), function(d) {
+        return console.log(d);
+      }, __("Add/Modify paragraph format"), this.resource);
+    }
+
     closeDocument() {
       var me, op;
       // finish editing
@@ -388,6 +475,8 @@
         me.editorSession.sessionController.getUndoManager().unsubscribe(gui.UndoManager.signalDocumentModifiedChanged, me.documentChanged);
         me.directFormattingCtl.unsubscribe(gui.DirectFormattingController.textStylingChanged, me.textStylingChanged);
         me.directFormattingCtl.unsubscribe(gui.DirectFormattingController.paragraphStylingChanged, me.textStylingChanged);
+        me.editorSession.unsubscribe(OpenPage.EditorSession.signalParagraphChanged, me.paragrahStyleChanged);
+        me.zoomHelper.unsubscribe(gui.ZoomHelper.signalZoomChanged, me.updateSlider);
         // destry editorSession
         return me.editorSession.destroy(function(e) {
           if (e) {
@@ -408,7 +497,13 @@
             me.session = void 0;
             me.directFormattingCtl = void 0;
             me.textController = void 0;
-            return me.imageController = void 0;
+            me.imageController = void 0;
+            me.ZoomHelper = void 0;
+            me.metaChanged = void 0;
+            me.documentChanged = void 0;
+            me.textStylingChanged = void 0;
+            me.paragrahStyleChanged = void 0;
+            return me.updateSlider = void 0;
           });
         });
       });
@@ -488,6 +583,206 @@
 
   };
 
+  FormatDialog = class FormatDialog extends this.OS.GUI.BaseDialog {
+    constructor() {
+      super("FormatDialog");
+    }
+
+    init() {
+      return this._gui.htmlToScheme(FormatDialog.scheme, this, this.host);
+    }
+
+    main() {
+      this.ui = {
+        aligment: {
+          left: this.find("swleft"),
+          right: this.find("swright"),
+          center: this.find("swcenter"),
+          justify: this.find("swjustify")
+        },
+        spacing: {
+          left: this.find("spnleft"),
+          right: this.find("spnright"),
+          top: this.find("spntop"),
+          bottom: this.find("spnbottom")
+        },
+        style: {
+          bold: this.find("swbold"),
+          italic: this.find("switalic"),
+          underline: this.find("swunderline"),
+          color: this.find("txtcolor"),
+          bgcolor: this.find("bgcolor")
+        },
+        font: {
+          family: this.find("lstfont"),
+          size: this.find("spnfsize")
+        },
+        formats: this.find("lstformats")
+      };
+      // init the format object
+      this.currentStyle = {
+        aligment: this._api.switcher("left", "right", "center", "justify"),
+        spacing: {
+          left: 0,
+          top: 0,
+          right: 0,
+          bottom: 0
+        },
+        style: {
+          bold: false,
+          italic: false,
+          underline: false,
+          color: void 0,
+          bgcolor: void 0
+        },
+        font: {
+          family: void 0,
+          size: 12
+        }
+      };
+      this.preview = ($(this.find("preview")).find("p"))[0];
+      $(this.preview).css("padding", "0").css("margin", "0");
+      this.initUIEvent();
+      return this.previewStyle();
+    }
+
+    initUIEvent() {
+      var k, me, ref, ref1, ref2, set, v;
+      me = this;
+      set = function(e, o, k, f) {
+        return me.ui[o][k].set(e, function(r) {
+          var v;
+          v = r;
+          if (f) {
+            v = f(r);
+          }
+          me.currentStyle[o][k] = v;
+          return me.previewStyle();
+        });
+      };
+      ref = this.ui.aligment;
+      for (k in ref) {
+        v = ref[k];
+        set("onchange", "aligment", k, (function(e) {
+          return e.data;
+        }));
+      }
+      ref1 = this.ui.spacing;
+      for (k in ref1) {
+        v = ref1[k];
+        set("onchange", "spacing", k);
+      }
+      ref2 = this.ui.style;
+      for (k in ref2) {
+        v = ref2[k];
+        if (k !== "color" && k !== "bgcolor") {
+          set("onchange", "style", k, (function(e) {
+            return e.data;
+          }));
+        }
+      }
+      set("onchange", "font", "size");
+      $(this.ui.style.color).click(function(e) {
+        return me.openDialog("ColorPickerDialog", function(d) {
+          me.currentStyle.style.color = d;
+          return me.previewStyle();
+        });
+      });
+      $(this.ui.style.bgcolor).click(function(e) {
+        return me.openDialog("ColorPickerDialog", function(d) {
+          me.currentStyle.style.bgcolor = d;
+          return me.previewStyle();
+        });
+      });
+      if (this.data && this.data.fonts) {
+        //font
+        this.ui.font.family.set("items", this.data.fonts);
+      }
+      set("onlistselect", "font", "family", (function(e) {
+        return e.data;
+      }));
+      //format list
+      this.ui.formats.set("selected", -1);
+      if (this.data && this.data.formats) {
+        this.ui.formats.set("items", this.data.formats);
+      }
+      this.ui.formats.set("onlistselect", function(e) {
+        return me.fromODFStyleFormat(e.data);
+      });
+      return this.ui.formats.set("selected", 0);
+    }
+
+    //@currentStyle =
+    fromODFStyleFormat(odfs) {
+      console.log("change style");
+      return console.log(odfs);
+    }
+
+    previewStyle() {
+      var el, i, item, items, j, len, v;
+      console.log("previewing");
+      // reset ui
+      this.ui.aligment.left.set("swon", this.currentStyle.aligment.left);
+      this.ui.aligment.right.set("swon", this.currentStyle.aligment.right);
+      this.ui.aligment.center.set("swon", this.currentStyle.aligment.center);
+      this.ui.aligment.justify.set("swon", this.currentStyle.aligment.justify);
+      this.ui.spacing.left.set("value", this.currentStyle.spacing.left);
+      this.ui.spacing.right.set("value", this.currentStyle.spacing.right);
+      this.ui.spacing.top.set("value", this.currentStyle.spacing.top);
+      this.ui.spacing.bottom.set("value", this.currentStyle.spacing.bottom);
+      this.ui.style.bold.set("swon", this.currentStyle.style.bold);
+      this.ui.style.italic.set("swon", this.currentStyle.style.italic);
+      this.ui.style.underline.set("swon", this.currentStyle.style.underline);
+      this.ui.font.size.set("value", this.currentStyle.font.size);
+      items = this.ui.font.family.get("items");
+      for (i = j = 0, len = items.length; j < len; i = ++j) {
+        v = items[i];
+        if (v.name === name) {
+          item = i;
+        }
+      }
+      if (item >= 0) {
+        this.ui.font.family.set("selected", item);
+      }
+      if (this.currentStyle.style.color) {
+        $(this.ui.style.color).css("background-color", this.currentStyle.style.color.hex);
+      }
+      if (this.currentStyle.style.bgcolor) {
+        $(this.ui.style.bgcolor).css("background-color", this.currentStyle.style.bgcolor.hex);
+      }
+      // set the preview css
+      el = $(this.preview);
+      el.css("text-align", this.currentStyle.aligment.selected);
+      el.css("padding-left", this.currentStyle.spacing.left + "mm");
+      el.css("padding-right", this.currentStyle.spacing.right + "mm");
+      el.css("padding-top", this.currentStyle.spacing.top + "mm");
+      el.css("padding-bottom", this.currentStyle.spacing.bottom + "mm");
+      el.css("font-weight", "normal").css("font-style", "normal").css("text-decoration", "none");
+      if (this.currentStyle.style.bold) {
+        el.css("font-weight", "bold");
+      }
+      if (this.currentStyle.style.italic) {
+        el.css("font-style", "italic");
+      }
+      if (this.currentStyle.style.underline) {
+        el.css("text-decoration", "underline");
+      }
+      if (this.currentStyle.style.color) {
+        el.css("color", this.currentStyle.style.color.hex);
+      }
+      if (this.currentStyle.style.bgcolor) {
+        el.css("background-color", this.currentStyle.style.bgcolor.hex);
+      }
+      el.css("font-size", this.currentStyle.font.size + "pt");
+      if (this.currentStyle.font.family) {
+        return el.css("font-family", this.currentStyle.font.family.name);
+      }
+    }
+
+  };
+
+  FormatDialog.scheme = "<afx-app-window apptitle=\"__(Format Dialog)\" width=\"500\" height=\"450\" data-id=\"FormatDialog\">\n    <afx-vbox>\n        <div data-height=\"5\"></div>\n        <afx-hbox data-height=\"30\">\n            <div data-width=\"5\"></div>\n            <afx-list-view data-id=\"lstformats\" dropdown = \"true\"></afx-list-view>\n            <div data-width=\"5\" ></div>\n            <afx-button text=\"clone\" data-id=\"bt-clone\" iconclass = \"fa fa-copy\" data-width=\"60\"></afx-button>\n            <div data-width=\"5\"></div>\n        </afx-hbox>\n        <afx-label text=\"__(Aligment)\" class=\"header\" data-height=\"20\"></afx-label>\n        <afx-hbox data-height=\"23\" data-id=\"aligmentbox\">\n            <div data-width=\"20\" ></div>\n            <afx-switch data-width=\"30\" data-id=\"swleft\"></afx-switch>\n            <afx-label text=\"__(Left)\"></afx-label>\n            <afx-switch data-width=\"30\" data-id=\"swright\"></afx-switch>\n            <afx-label text=\"__(Right)\"></afx-label>\n            <afx-switch data-width=\"30\" data-id=\"swcenter\"></afx-switch>\n            <afx-label text=\"__(Center)\"></afx-label>\n            <afx-switch data-width=\"30\" data-id=\"swjustify\"></afx-switch>\n            <afx-label text=\"__(Justify)\"></afx-label>\n            <div data-width=\"20\" ></div>\n        </afx-hbox>\n         <div data-height=\"5\"></div>\n        <afx-label text=\"__(Spacing)\" class=\"header\" data-height=\"20\"></afx-label>\n        <div data-height=\"5\"></div>\n        <afx-hbox data-height=\"23\" data-id=\"spacingbox\">\n            <div ></div>\n            <afx-label data-width=\"50\" text=\"__(Left:)\"></afx-label>\n            <afx-nspinner data-width=\"50\" data-id=\"spnleft\" step=\"0.5\"></afx-nspinner>\n            <div></div>\n            <afx-label data-width=\"50\" text=\"__(Right:)\"></afx-label>\n            <afx-nspinner data-width=\"50\" data-id=\"spnright\" step=\"0.5\"></afx-nspinner>\n            <div></div>\n            <afx-label data-width=\"50\" text=\"__(Top:)\"></afx-label>\n            <afx-nspinner data-width=\"50\" data-id=\"spntop\" step=\"0.5\"></afx-nspinner>\n            <div></div>\n            <afx-label data-width=\"50\" text=\"__(Bottom:)\"></afx-label>\n            <afx-nspinner data-width=\"50\" data-id=\"spnbottom\" step=\"0.5\"></afx-nspinner>\n            <div  ></div>\n        </afx-hbox>\n         <div data-height=\"5\"></div>\n         <afx-label text=\"__(Style)\" class=\"header\" data-height=\"20\"></afx-label>\n         <div data-height=\"5\"></div>\n        <afx-hbox data-height=\"23\" data-id=\"stylebox\">\n            <div data-width=\"5\"></div>\n            <afx-switch data-width=\"30\" data-id=\"swbold\"></afx-switch>\n            <afx-label text=\"__(Bold)\"></afx-label>\n            <afx-switch data-width=\"30\" data-id=\"switalic\"></afx-switch>\n            <afx-label text=\"__(Italic)\"></afx-label>\n            <afx-switch data-width=\"30\" data-id=\"swunderline\"></afx-switch>\n            <afx-label text=\"__(Underline)\"></afx-label>\n            <afx-label data-width=\"35\" text=\"__(Text:)\"></afx-label>\n            <div data-width=\"30\" data-id=\"txtcolor\"></div>\n            <div data-width=\"5\"></div>\n            <afx-label data-width=\"80\" text=\"__(Background:)\"></afx-label>\n            <div data-width=\"30\" data-id=\"bgcolor\"></div>\n            <div data-width=\"5\"></div>\n        </afx-hbox>\n        <div data-height=\"5\"></div>\n        <afx-label text=\"__(Font)\" class=\"header\" data-height=\"20\"></afx-label>\n        <div data-height=\"5\"></div>\n        <afx-hbox data-height=\"30\">\n            <div data-width=\"5\"></div>\n            <afx-list-view data-id=\"lstfont\" dropdown = \"true\"></afx-list-view>\n            <div data-width=\"5\" ></div>\n            <afx-label data-width=\"35\" text=\"__(Size:)\"></afx-label>\n            <afx-nspinner data-width=\"50\" data-id=\"spnfsize\"></afx-nspinner>\n            <div data-width=\"5\"></div>\n        </afx-hbox>\n        <div data-height=\"5\"></div>\n        <afx-label text=\"__(Preview)\" class=\"header\" data-height=\"20\"></afx-label>\n        <div data-height=\"5\"></div>\n        <afx-hbox>\n             <div data-width=\"5\"></div>\n            <div data-id=\"preview\">\n                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce laoreet diam vestibulum massa malesuada quis dignissim libero blandit. Duis sit amet volutpat nisl.</p>\n            </div>\n             <div data-width=\"5\"></div>\n        </afx-hbox>\n        \n        <div data-height=\"5\"></div>\n        <afx-hbox data-height=\"30\">\n            <div></div>\n            <afx-button text=\"__(Ok)\" data-width=\"30\" data-id=\"btok\"></afx-button>\n            <div data-width=\"5\"></div>\n            <afx-button text=\"__(Cancel)\" data-width=\"55\" data-id=\"btx\"></afx-button>\n        </afx-hbox>\n         <div data-height=\"5\"></div>\n    </afx-vbox>\n</afx-app-window>";
+
 }).call(this);
 
 /*
diff --git a/OpenPage/build/debug/scheme.html b/OpenPage/build/debug/scheme.html
index b8deaa3..3f16689 100644
--- a/OpenPage/build/debug/scheme.html
+++ b/OpenPage/build/debug/scheme.html
@@ -19,7 +19,8 @@
                 <afx-button data-width = "25" data-id="btaj" iconclass = "fa fa-align-justify"></afx-button>
                 <afx-button data-width = "25" data-id="btindent" iconclass = "fa fa-indent"></afx-button>
                 <afx-button data-width = "25" data-id="btoutdent" iconclass = "fa fa-outdent"></afx-button>
-                <afx-list-view dropdown = "true" data-width="80" data-id="format-list"></afx-list-view>
+                <afx-button data-width = "25" data-id="btformat" iconclass = "fa fa-paint-brush"></afx-button>
+                <afx-list-view dropdown = "true" data-width="100" data-id="format-list"></afx-list-view>
                 <div data-width="5"></div>
                 <afx-nspinner data-width = "50" data-id="font-size" ></afx-nspinner>
                 <div data-width="5"></div>
@@ -30,6 +31,16 @@
             <div data-id="container">
                 <div data-id="odfcanvas"></div>
             </div>
+            <div data-height="5"></div>
+            <afx-hbox data-id="status-bar" data-height="28">
+                <div></div>
+                <afx-button data-width = "25" data-id="btzoomfix" iconclass = "fa fa-arrows-alt"></afx-button>
+                <div data-width="5"></div>
+                <afx-slider data-id="slzoom" data-width="150" max="400"></afx-slider>
+                <div data-width="5"></div>
+                <afx-label data-id = "lbzoom" data-width="40"></afx-label>
+            </afx-hbox>
+            
         </afx-vbox>
         
     </afx-hbox>
diff --git a/OpenPage/coffees/dialogs.coffee b/OpenPage/coffees/dialogs.coffee
index f842605..164bf1a 100644
--- a/OpenPage/coffees/dialogs.coffee
+++ b/OpenPage/coffees/dialogs.coffee
@@ -29,4 +29,230 @@ class HyperLinkDialog extends this.OS.GUI.BasicDialog
                 (d.find "content1").value = d.data.text
                 (d.find "content3").value = d.data.link
                 $(d.find "content1").prop('disabled', d.data.readonly)
-        }
\ No newline at end of file
+        }
+
+class FormatDialog extends this.OS.GUI.BaseDialog
+    constructor: () ->
+        super "FormatDialog"
+    init: () ->
+        @_gui.htmlToScheme FormatDialog.scheme, @, @host
+    
+    main: () ->
+        @ui =
+            aligment:
+                left:@find("swleft"),
+                right:@find("swright"),
+                center:@find("swcenter"),
+                justify:@find("swjustify")
+            spacing:
+                left: @find("spnleft"),
+                right: @find("spnright"),
+                top: @find("spntop"),
+                bottom: @find("spnbottom"),
+            style:
+                bold: @find("swbold"),
+                italic: @find("switalic"),
+                underline: @find("swunderline"),
+                color: @find("txtcolor"),
+                bgcolor: @find("bgcolor")
+            font:
+                family: @find("lstfont"),
+                size: @find("spnfsize")
+            formats: @find("lstformats")
+        # init the format object
+        @currentStyle =
+            aligment: @_api.switcher("left", "right", "center", "justify"),
+            spacing:
+                left:0
+                top:0,
+                right:0,
+                bottom:0
+            style:
+                bold:false,
+                italic: false,
+                underline: false,
+                color: undefined,
+                bgcolor: undefined
+            font:
+                family: undefined,
+                size: 12
+        @preview = ($(@find "preview").find "p")[0]
+        $(@preview)
+            .css "padding", "0"
+            .css "margin", "0"
+        @initUIEvent()
+        @previewStyle()
+    
+    initUIEvent: () ->
+        me = @
+        set = (e, o, k ,f) ->
+            me.ui[o][k].set e, (r) ->
+                v = r
+                v = f r if f
+                me.currentStyle[o][k] = v
+                me.previewStyle()
+                
+        for k,v of @ui.aligment
+            set "onchange", "aligment", k, ((e) -> e.data)
+        for k,v of @ui.spacing
+            set "onchange", "spacing", k
+        for k,v of @ui.style
+            set "onchange", "style", k, ((e) -> e.data) if k isnt "color" and k isnt "bgcolor"
+        set "onchange", "font", "size"
+        $(@ui.style.color).click (e) ->
+            me.openDialog "ColorPickerDialog", (d) ->
+                me.currentStyle.style.color = d
+                me.previewStyle()
+        $(@ui.style.bgcolor).click (e) ->
+            me.openDialog "ColorPickerDialog", (d) ->
+                me.currentStyle.style.bgcolor = d
+                me.previewStyle()
+        #font
+        @ui.font.family.set "items", @data.fonts if @data and @data.fonts
+        set "onlistselect", "font", "family", ( (e) -> e.data)
+        #format list
+        @ui.formats.set "selected", -1
+        @ui.formats.set "items", @data.formats if @data and @data.formats
+        @ui.formats.set "onlistselect", (e) ->
+            me.fromODFStyleFormat e.data
+         @ui.formats.set "selected", 0
+        #@currentStyle =
+    
+    fromODFStyleFormat: (odfs) ->
+        console.log "change style"
+        console.log odfs
+    
+    previewStyle: () ->
+        console.log "previewing"
+        # reset ui
+        @ui.aligment.left.set "swon", @currentStyle.aligment.left
+        @ui.aligment.right.set "swon", @currentStyle.aligment.right
+        @ui.aligment.center.set "swon", @currentStyle.aligment.center
+        @ui.aligment.justify.set "swon", @currentStyle.aligment.justify
+        @ui.spacing.left.set "value", @currentStyle.spacing.left
+        @ui.spacing.right.set "value", @currentStyle.spacing.right
+        @ui.spacing.top.set "value", @currentStyle.spacing.top
+        @ui.spacing.bottom.set "value", @currentStyle.spacing.bottom
+        @ui.style.bold.set "swon", @currentStyle.style.bold
+        @ui.style.italic.set "swon", @currentStyle.style.italic
+        @ui.style.underline.set "swon", @currentStyle.style.underline
+        @ui.font.size.set "value", @currentStyle.font.size
+        
+        items = @ui.font.family.get "items"
+        item = i for v, i in items when v.name is name
+        @ui.font.family.set "selected", item if item >= 0
+        
+        $(@ui.style.color).css "background-color", @currentStyle.style.color.hex if @currentStyle.style.color
+        $(@ui.style.bgcolor).css "background-color", @currentStyle.style.bgcolor.hex if @currentStyle.style.bgcolor
+        # set the preview css
+        el = $ @preview
+        el.css "text-align", @currentStyle.aligment.selected
+        el.css "padding-left", @currentStyle.spacing.left + "mm"
+        el.css "padding-right", @currentStyle.spacing.right + "mm"
+        el.css "padding-top", @currentStyle.spacing.top + "mm"
+        el.css "padding-bottom", @currentStyle.spacing.bottom + "mm"
+        el
+            .css "font-weight", "normal"
+            .css "font-style", "normal"
+            .css "text-decoration", "none"
+        el.css "font-weight", "bold" if @currentStyle.style.bold
+        el.css "font-style", "italic" if @currentStyle.style.italic
+        el.css "text-decoration", "underline" if @currentStyle.style.underline
+        el.css "color", @currentStyle.style.color.hex if @currentStyle.style.color
+        el.css "background-color", @currentStyle.style.bgcolor.hex if @currentStyle.style.bgcolor
+        el.css "font-size", @currentStyle.font.size + "pt"
+        el.css "font-family", @currentStyle.font.family.name if @currentStyle.font.family
+
+FormatDialog.scheme = """
+<afx-app-window apptitle="__(Format Dialog)" width="500" height="450" data-id="FormatDialog">
+    <afx-vbox>
+        <div data-height="5"></div>
+        <afx-hbox data-height="30">
+            <div data-width="5"></div>
+            <afx-list-view data-id="lstformats" dropdown = "true"></afx-list-view>
+            <div data-width="5" ></div>
+            <afx-button text="clone" data-id="bt-clone" iconclass = "fa fa-copy" data-width="60"></afx-button>
+            <div data-width="5"></div>
+        </afx-hbox>
+        <afx-label text="__(Aligment)" class="header" data-height="20"></afx-label>
+        <afx-hbox data-height="23" data-id="aligmentbox">
+            <div data-width="20" ></div>
+            <afx-switch data-width="30" data-id="swleft"></afx-switch>
+            <afx-label text="__(Left)"></afx-label>
+            <afx-switch data-width="30" data-id="swright"></afx-switch>
+            <afx-label text="__(Right)"></afx-label>
+            <afx-switch data-width="30" data-id="swcenter"></afx-switch>
+            <afx-label text="__(Center)"></afx-label>
+            <afx-switch data-width="30" data-id="swjustify"></afx-switch>
+            <afx-label text="__(Justify)"></afx-label>
+            <div data-width="20" ></div>
+        </afx-hbox>
+         <div data-height="5"></div>
+        <afx-label text="__(Spacing)" class="header" data-height="20"></afx-label>
+        <div data-height="5"></div>
+        <afx-hbox data-height="23" data-id="spacingbox">
+            <div ></div>
+            <afx-label data-width="50" text="__(Left:)"></afx-label>
+            <afx-nspinner data-width="50" data-id="spnleft" step="0.5"></afx-nspinner>
+            <div></div>
+            <afx-label data-width="50" text="__(Right:)"></afx-label>
+            <afx-nspinner data-width="50" data-id="spnright" step="0.5"></afx-nspinner>
+            <div></div>
+            <afx-label data-width="50" text="__(Top:)"></afx-label>
+            <afx-nspinner data-width="50" data-id="spntop" step="0.5"></afx-nspinner>
+            <div></div>
+            <afx-label data-width="50" text="__(Bottom:)"></afx-label>
+            <afx-nspinner data-width="50" data-id="spnbottom" step="0.5"></afx-nspinner>
+            <div  ></div>
+        </afx-hbox>
+         <div data-height="5"></div>
+         <afx-label text="__(Style)" class="header" data-height="20"></afx-label>
+         <div data-height="5"></div>
+        <afx-hbox data-height="23" data-id="stylebox">
+            <div data-width="5"></div>
+            <afx-switch data-width="30" data-id="swbold"></afx-switch>
+            <afx-label text="__(Bold)"></afx-label>
+            <afx-switch data-width="30" data-id="switalic"></afx-switch>
+            <afx-label text="__(Italic)"></afx-label>
+            <afx-switch data-width="30" data-id="swunderline"></afx-switch>
+            <afx-label text="__(Underline)"></afx-label>
+            <afx-label data-width="35" text="__(Text:)"></afx-label>
+            <div data-width="30" data-id="txtcolor"></div>
+            <div data-width="5"></div>
+            <afx-label data-width="80" text="__(Background:)"></afx-label>
+            <div data-width="30" data-id="bgcolor"></div>
+            <div data-width="5"></div>
+        </afx-hbox>
+        <div data-height="5"></div>
+        <afx-label text="__(Font)" class="header" data-height="20"></afx-label>
+        <div data-height="5"></div>
+        <afx-hbox data-height="30">
+            <div data-width="5"></div>
+            <afx-list-view data-id="lstfont" dropdown = "true"></afx-list-view>
+            <div data-width="5" ></div>
+            <afx-label data-width="35" text="__(Size:)"></afx-label>
+            <afx-nspinner data-width="50" data-id="spnfsize"></afx-nspinner>
+            <div data-width="5"></div>
+        </afx-hbox>
+        <div data-height="5"></div>
+        <afx-label text="__(Preview)" class="header" data-height="20"></afx-label>
+        <div data-height="5"></div>
+        <afx-hbox>
+             <div data-width="5"></div>
+            <div data-id="preview">
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce laoreet diam vestibulum massa malesuada quis dignissim libero blandit. Duis sit amet volutpat nisl.</p>
+            </div>
+             <div data-width="5"></div>
+        </afx-hbox>
+        
+        <div data-height="5"></div>
+        <afx-hbox data-height="30">
+            <div></div>
+            <afx-button text="__(Ok)" data-width="30" data-id="btok"></afx-button>
+            <div data-width="5"></div>
+            <afx-button text="__(Cancel)" data-width="55" data-id="btx"></afx-button>
+        </afx-hbox>
+         <div data-height="5"></div>
+    </afx-vbox>
+</afx-app-window>
+"""
\ No newline at end of file
diff --git a/OpenPage/coffees/main.coffee b/OpenPage/coffees/main.coffee
index 70cbf75..0618e9d 100644
--- a/OpenPage/coffees/main.coffee
+++ b/OpenPage/coffees/main.coffee
@@ -7,11 +7,16 @@ class OpenPage extends this.OS.GUI.BaseApplication
         if not OpenPage.EditorSession
             require ["webodf/editor/EditorSession"], (ES) ->
                 OpenPage.EditorSession = ES
+        @userid = @systemsetting.user.username
         @eventSubscriptions = new core.EventSubscriptions()
         @initToolbox()
         @initCanvas()
         @canvas.load "#{@_api.handler.get}/home://welcome.odt"
-    
+        @currentStyle = ""
+        @resource =
+            fonts: []
+            formats: []
+        
     initToolbox: () ->
         me = @
         @basictool =
@@ -32,11 +37,15 @@ class OpenPage extends this.OS.GUI.BaseApplication
             indent: @find("btindent"),
             outdent: @find("btoutdent"),
             fonts: @find("font-list"),
-            fontsize: @find("font-size")
+            fontsize: @find("font-size"),
+            styles: @find("format-list"),
+            zoom: @find("slzoom")
+            format: @find("btformat")
+        
         fn = (name, el) ->
-            if name is "fonts"
+            if name is "fonts" or name is "styles"
                act = "onlistselect"
-            else if name is "fontsize"
+            else if name is "fontsize" or name is "zoom"
                 act = "onchange"
             else
                 act = "onbtclick"
@@ -48,12 +57,16 @@ class OpenPage extends this.OS.GUI.BaseApplication
         for name, el of @basictool
            fn name, el
         
+        (@find "btzoomfix").set "onbtclick", (e) -> me.zoom 100
+        @basictool.zoom.set "onchanging", (e) ->
+            zlb = me.find "lbzoom"
+            zlb.set "text", Math.floor(e) + "%"
+        
     initCanvas: () ->
         el = @find "odfcanvas"
         me = @
         el.setAttribute "translate", "no"
         el.classList.add "notranslate"
-        @userid = "localuser"
         @canvas = new odf.OdfCanvas(el)
         @documentChanged = (e) ->
             #console.log e
@@ -61,6 +74,19 @@ class OpenPage extends this.OS.GUI.BaseApplication
             #console.log e
         @textStylingChanged = (e) ->
             me.updateToolbar e
+        @paragrahStyleChanged = (e) ->
+            return unless e.type is "style"
+            items = me.basictool.styles.get "items"
+            item = i for v, i in items when v.name is e.styleName
+            me.currentStyle = e.styleName
+            me.basictool.styles.set "selected", item
+        
+        @updateSlider = (v) ->
+            value = Math.floor v*100
+            me.basictool.zoom.set "value", value
+            zlb = me.find "lbzoom"
+            zlb.set "text", value+"%"
+        
         #@canvas.enableAnnotations(true, true)
         @canvas.addListener "statereadychange", ()->
             me.session = new ops.Session(me.canvas)
@@ -85,12 +111,15 @@ class OpenPage extends this.OS.GUI.BaseApplication
             me.directFormattingCtl = me.editorSession.sessionController.getDirectFormattingController()
             me.directFormattingCtl.subscribe gui.DirectFormattingController.textStylingChanged, me.textStylingChanged
             me.directFormattingCtl.subscribe gui.DirectFormattingController.paragraphStylingChanged, me.textStylingChanged
+            me.editorSession.subscribe OpenPage.EditorSession.signalParagraphChanged, me.paragrahStyleChanged
+            
             # hyper link controller
             me.hyperlinkController = me.editorSession.sessionController.getHyperlinkController()
             me.eventSubscriptions.addFrameSubscription me.editorSession, OpenPage.EditorSession.signalCursorMoved, ()-> me.updateHyperlinkButtons()
             me.eventSubscriptions.addFrameSubscription me.editorSession, OpenPage.EditorSession.signalParagraphChanged, ()-> me.updateHyperlinkButtons()
             me.eventSubscriptions.addFrameSubscription me.editorSession, OpenPage.EditorSession.signalParagraphStyleModified, ()-> me.updateHyperlinkButtons()
             
+            
             #image controller
             me.imageController = me.editorSession.sessionController.getImageController()
             #imageController.subscribe(gui.ImageController.enabledChanged, enableButtons)
@@ -98,6 +127,11 @@ class OpenPage extends this.OS.GUI.BaseApplication
             #text controller
             me.textController = me.editorSession.sessionController.getTextController()
             
+            # zoom controller
+            me.zoomHelper = me.editorSession.getOdfCanvas().getZoomHelper()
+            me.zoomHelper.subscribe gui.ZoomHelper.signalZoomChanged, me.updateSlider
+            me.updateSlider me.zoomHelper.getZoomLevel()
+            
             me.editorSession.sessionController.setUndoManager new gui.TrivialUndoManager()
             me.editorSession.sessionController.getUndoManager().subscribe gui.UndoManager.signalDocumentModifiedChanged, me.documentChanged
             me.editorSession.sessionController.getMetadataController().subscribe gui.MetadataController.signalMetadataChanged, me.metaChanged
@@ -105,12 +139,13 @@ class OpenPage extends this.OS.GUI.BaseApplication
             op.init {
                 memberid: me.userid,
                 setProperties:{
-                    "fullName": "Xuan Sang LE",
+                    "fullName": me.userid,
                     "color": "blue"
                 }
             }
             me.session.enqueue([op])
             me.initFontList me.editorSession.getDeclaredFonts()
+            me.initStyles me.editorSession.getAvailableParagraphStyles()
             me.editorSession.sessionController.insertLocalCursor()
             me.editorSession.sessionController.startEditing()
             #console.log me.editorSession.getDeclaredFonts()
@@ -118,8 +153,14 @@ class OpenPage extends this.OS.GUI.BaseApplication
     
     initFontList: (list) ->
         v.text = v.name for v in list
+        @resource.fonts.push { text: v.text, name: v.family } for v in list
         @basictool.fonts.set "items", list
     
+    initStyles: (list) ->
+        v.text = v.displayName for v in list
+        @resource.formats.push { text: v.text, name: v.name, el: @editorSession.getParagraphStyleElement(v.name) } for v in list
+        @basictool.styles.set "items", list
+    
     updateToolbar: (changes) ->
         # basic style
         (@basictool.bold.set "selected", changes.isBold) if changes.hasOwnProperty 'isBold'
@@ -259,6 +300,19 @@ class OpenPage extends this.OS.GUI.BaseApplication
             , "binary"
         , __("Select image file"), { mimes: ["image/.*"] }
     
+    styles: (e) ->
+        return if e.data.name is @currentStyle
+        @editorSession.setCurrentParagraphStyle e.data.name
+    
+    zoom: (e) ->
+        #console.log "zooming", e
+        @zoomHelper.setZoomLevel e/100.0
+    
+    format: (e) ->
+        @openDialog new FormatDialog(), (d) ->
+            console.log d
+        , __("Add/Modify paragraph format"), @resource
+    
     closeDocument: () ->
         # finish editing
         return unless @editorSession and @session
@@ -279,6 +333,8 @@ class OpenPage extends this.OS.GUI.BaseApplication
             me.editorSession.sessionController.getUndoManager().unsubscribe gui.UndoManager.signalDocumentModifiedChanged, me.documentChanged
             me.directFormattingCtl.unsubscribe gui.DirectFormattingController.textStylingChanged, me.textStylingChanged
             me.directFormattingCtl.unsubscribe gui.DirectFormattingController.paragraphStylingChanged, me.textStylingChanged
+            me.editorSession.unsubscribe OpenPage.EditorSession.signalParagraphChanged, me.paragrahStyleChanged
+            me.zoomHelper.unsubscribe gui.ZoomHelper.signalZoomChanged, me.updateSlider
             # destry editorSession
             me.editorSession.destroy (e) ->
                 return me.error __("Cannot destroy editor session {0}", e) if e
@@ -293,6 +349,12 @@ class OpenPage extends this.OS.GUI.BaseApplication
                     me.directFormattingCtl = undefined
                     me.textController = undefined
                     me.imageController = undefined
+                    me.ZoomHelper = undefined
+                    me.metaChanged = undefined
+                    me.documentChanged = undefined
+                    me.textStylingChanged = undefined
+                    me.paragrahStyleChanged = undefined
+                    me.updateSlider = undefined
                     #
             
     
diff --git a/OpenPage/css/dialog.css b/OpenPage/css/dialog.css
new file mode 100644
index 0000000..2ebc292
--- /dev/null
+++ b/OpenPage/css/dialog.css
@@ -0,0 +1,31 @@
+afx-app-window[data-id="HyperLinkDialog"] afx-label.header span
+{
+    font-weight: bold;
+}
+afx-app-window[data-id="FormatDialog"] afx-label.header
+{
+    padding-left: 5px;
+    border-bottom: 1px solid #a6a6a6;
+}
+afx-app-window[data-id="FormatDialog"] afx-label.header span
+{
+    font-weight: bold;
+}
+afx-app-window[data-id="FormatDialog"] afx-hbox[data-id="aligmentbox"] afx-label span,
+afx-app-window[data-id="FormatDialog"] afx-hbox[data-id="spacingbox"] afx-label span,
+afx-app-window[data-id="FormatDialog"] afx-hbox[data-id="stylebox"] afx-label span
+{
+    display: block;
+    padding-top: 7px;
+}
+
+afx-app-window[data-id="FormatDialog"]  div[data-id="preview"]
+{
+    border: 1px solid #a6a6a6;
+}
+afx-app-window[data-id="FormatDialog"]  div[data-id="txtcolor"],
+afx-app-window[data-id="FormatDialog"]  div[data-id="bgcolor"]
+{
+    border:1px solid #a6a6a6;
+    display: block;
+}
\ No newline at end of file
diff --git a/OpenPage/css/main.css b/OpenPage/css/main.css
index bbb69d4..0946369 100644
--- a/OpenPage/css/main.css
+++ b/OpenPage/css/main.css
@@ -22,18 +22,21 @@ afx-app-window[data-id="OpenPage"] afx-hbox[data-id="toolbox"]
     border: 1px solid #eaeaea;
     box-shadow: 3px 3px 3px #9f9F9F;
 }
-afx-app-window[data-id="HyperLinkDialog"] afx-label.header span
+afx-app-window[data-id="OpenPage"] afx-hbox[data-id="status-bar"]
 {
-    font-weight: bold;
+    background-color: #f5f5f5;
+    border: 1px solid #eaeaea;
+    box-shadow: -3px -3px 3px #9f9F9F;
 }
-afx-app-window[data-id="OpenPage"] afx-hbox[data-id="toolbox"] afx-button button{
+afx-app-window[data-id="OpenPage"] afx-hbox[data-id="toolbox"] afx-button button, afx-app-window[data-id="OpenPage"] afx-button[data-id="btzoomfix"] button
+{
     border: 1px solid #f5f5f5;
     background-color: transparent;
     width:100%;
     height: 100%;
 }
 
-afx-app-window[data-id="OpenPage"] afx-hbox[data-id="toolbox"] afx-button button:hover, afx-app-window[data-id="OpenPage"] afx-hbox[data-id="toolbox"] afx-button button.btactive
+afx-app-window[data-id="OpenPage"] afx-hbox[data-id="toolbox"] afx-button button:hover, afx-app-window[data-id="OpenPage"] afx-hbox[data-id="toolbox"] afx-button button.btactive, afx-app-window[data-id="OpenPage"] afx-button[data-id="btzoomfix"] button:hover
 {
     border: 1px solid #759DC0;
     background-color: transparent;
diff --git a/OpenPage/project.apj b/OpenPage/project.apj
index dd58840..55c2ed8 100644
--- a/OpenPage/project.apj
+++ b/OpenPage/project.apj
@@ -1 +1 @@
-{"name":"OpenPage","root":"home://myws/antosdk-apps/OpenPage","css":["css/main.css"],"javascripts":["javascripts/webodf.js","javascripts/EditorSession.js"],"coffees":["coffees/main.coffee","coffees/dialogs.coffee"],"copies":["assets/scheme.html","package.json","README.md"]}
\ No newline at end of file
+{"name":"OpenPage","root":"home://myws/antosdk-apps/OpenPage","css":["css/main.css","css/dialog.css"],"javascripts":["javascripts/webodf.js","javascripts/EditorSession.js"],"coffees":["coffees/main.coffee","coffees/dialogs.coffee"],"copies":["assets/scheme.html","package.json","README.md"]}
\ No newline at end of file