diff --git a/zanata-war/src/main/java/org/zanata/webtrans/client/resources/WebTransMessages.java b/zanata-war/src/main/java/org/zanata/webtrans/client/resources/WebTransMessages.java
index 168d94e507..6ffd48c20f 100644
--- a/zanata-war/src/main/java/org/zanata/webtrans/client/resources/WebTransMessages.java
+++ b/zanata-war/src/main/java/org/zanata/webtrans/client/resources/WebTransMessages.java
@@ -431,6 +431,9 @@ String undoUnsuccessful(@PluralCount int unsuccessfulCount,
     @DefaultMessage("When unexpected error happens, a popup window will display and show it")
             String showErrorsTooltip();
 
+    @DefaultMessage("Show System Errors")
+    String showSystemErrors();
+
     @DefaultMessage("Switch between syntax highlightable Editor and plain textarea (no syntax highlight but support spell check in all browser)")
             String useCodeMirrorEditorTooltip();
 
@@ -568,4 +571,19 @@ String undoUnsuccessful(@PluralCount int unsuccessfulCount,
 
     @DefaultMessage("More details")
     String moreDetais();
+
+    @DefaultMessage("Editor Buttons")
+    String editorButtons();
+
+    @DefaultMessage("'Enter' key saves immediately")
+    String enterKeySaves();
+
+    @DefaultMessage("Use syntax highlighting Editor")
+    String useSyntaxHighlight();
+
+    @DefaultMessage("Show 'Save as Approved' warning")
+    String showSaveApproveWarning();
+
+    @DefaultMessage("Enable Spell Check")
+    String enabledSpellCheck();
 }
diff --git a/zanata-war/src/main/java/org/zanata/webtrans/client/ui/DocumentListTable.java b/zanata-war/src/main/java/org/zanata/webtrans/client/ui/DocumentListTable.java
index 47ea0986b1..4f4da3a5b5 100644
--- a/zanata-war/src/main/java/org/zanata/webtrans/client/ui/DocumentListTable.java
+++ b/zanata-war/src/main/java/org/zanata/webtrans/client/ui/DocumentListTable.java
@@ -24,6 +24,7 @@
 import java.util.List;
 import java.util.Map;
 
+import com.google.gwt.user.client.ui.HTMLPanel;
 import org.zanata.rest.dto.stats.ContainerTranslationStatistics;
 import org.zanata.rest.dto.stats.TranslationStatistics;
 import org.zanata.rest.dto.stats.TranslationStatistics.StatUnit;
@@ -402,20 +403,21 @@ private Widget getRemainingWidget(DocumentInfo docInfo) {
     }
 
     private Widget getActionWidget(final DocumentInfo docInfo) {
-        HorizontalPanel panel = new HorizontalPanel();
+        FlowPanel panel = new FlowPanel();
+
         for (Map.Entry<String, String> entry : docInfo.getDownloadExtensions()
                 .entrySet()) {
             Anchor anchor = new Anchor(entry.getKey());
+            anchor.addStyleName("l--push-right-half");
             anchor.setTitle(messages.downloadFileTitle(entry.getKey()));
-            anchor.setStyleName("downloadFileLink");
             anchor.setHref(Application.getFileDownloadURL(userWorkspaceContext
                     .getWorkspaceContext().getWorkspaceId(), entry.getValue()));
             anchor.setTarget("_blank");
             panel.add(anchor);
         }
-        InlineLabel upload = new InlineLabel();
+        Anchor upload = new Anchor();
         upload.setTitle(messages.uploadButtonTitle());
-        upload.setStyleName("icon-upload uploadButton");
+        upload.setStyleName("icon-upload txt--lead l--push-left-half");
         upload.addClickHandler(new ClickHandler() {
             @Override
             public void onClick(ClickEvent event) {
diff --git a/zanata-war/src/main/java/org/zanata/webtrans/client/ui/NotificationDetailsBox.ui.xml b/zanata-war/src/main/java/org/zanata/webtrans/client/ui/NotificationDetailsBox.ui.xml
index 0158868bc2..a39dcff803 100644
--- a/zanata-war/src/main/java/org/zanata/webtrans/client/ui/NotificationDetailsBox.ui.xml
+++ b/zanata-war/src/main/java/org/zanata/webtrans/client/ui/NotificationDetailsBox.ui.xml
@@ -28,11 +28,10 @@
     .container {
       min-width: 20em;
       max-height: 40em;
-      overflow: auto;
     }
   </ui:style>
 
-  <g:HTMLPanel styleName="new-zanata {style.container}">
+  <g:HTMLPanel styleName="new-zanata l--scroll-auto {style.container}">
     <z:DialogBoxCloseButton ui:field="closeButton" />
     <g:HTMLPanel styleName="l__wrapper l--pad-all-half" ui:field="messageWrapper">
       <g:HTMLPanel ui:field="message" styleName="l--push-bottom-half" />
diff --git a/zanata-war/src/main/java/org/zanata/webtrans/client/ui/Pager.ui.xml b/zanata-war/src/main/java/org/zanata/webtrans/client/ui/Pager.ui.xml
index 6cd0447dac..b7700ec539 100644
--- a/zanata-war/src/main/java/org/zanata/webtrans/client/ui/Pager.ui.xml
+++ b/zanata-war/src/main/java/org/zanata/webtrans/client/ui/Pager.ui.xml
@@ -15,7 +15,6 @@
       opacity: 0.5;
       cursor: default !important;
     }
-
   </ui:style>
 
   <g:HTMLPanel styleName="new-zanata">
@@ -30,7 +29,7 @@
       </li>
       <li>
         <g:TextBox ui:field="gotoPage" maxLength="8"
-          styleName="{style.textBox}" />
+          styleName="{style.textBox} l--push-bottom-0" />
       </li>
       <li>
         <g:InlineLabel ui:field="pageCountLabel" />
diff --git a/zanata-war/src/main/java/org/zanata/webtrans/client/ui/UserPanel.java b/zanata-war/src/main/java/org/zanata/webtrans/client/ui/UserPanel.java
index cd94df6ca8..31fd6d9845 100644
--- a/zanata-war/src/main/java/org/zanata/webtrans/client/ui/UserPanel.java
+++ b/zanata-war/src/main/java/org/zanata/webtrans/client/ui/UserPanel.java
@@ -1,29 +1,28 @@
 package org.zanata.webtrans.client.ui;
 
-import com.google.gwt.user.client.ui.HorizontalPanel;
 import com.google.gwt.user.client.ui.Image;
 import com.google.gwt.user.client.ui.Label;
 
-public class UserPanel extends HorizontalPanel implements HasManageUserPanel {
+public class UserPanel extends ListItemWidget implements HasManageUserPanel {
     private static final long serialVersionUID = 1L;
-    private Image userImage;
-    private Label personNameLabel;
-    private String personName;
-    private Label colorLabel;
+    private final Image userImage;
+    private final String personName;
+    private final ListItemWidget colorLabel = new ListItemWidget();
 
     public UserPanel(String personName, String imgUrl) {
         super();
-        this.personName = personName;
 
+        UnorderedListWidget container = new UnorderedListWidget();
+
+        container.setStyleName("list--horizontal");
+        this.personName = personName;
         userImage = new Image(imgUrl);
-        personNameLabel = new Label(personName);
-        colorLabel = new Label();
 
-        this.add(userImage);
-        this.add(colorLabel);
-        this.add(personNameLabel);
+        container.add(new ListItemWidget(userImage));
+        container.add(new ListItemWidget(colorLabel));
+        container.add(new ListItemWidget(personName));
 
-        this.setCellWidth(userImage, "16px");
+        add(container);
     }
 
     @Override
@@ -31,7 +30,7 @@ public void setColor(String color) {
         colorLabel.getElement().getStyle().setProperty("borderColor", color);
         colorLabel.getElement().getStyle().setProperty("borderWidth", "1px");
         colorLabel.getElement().getStyle().setProperty("borderStyle", "solid");
-        colorLabel.getElement().getStyle().setProperty("height", "16px");
+        colorLabel.getElement().getStyle().setProperty("height", "1.25em");
     }
 
     @Override
diff --git a/zanata-war/src/main/java/org/zanata/webtrans/client/view/AppView.java b/zanata-war/src/main/java/org/zanata/webtrans/client/view/AppView.java
index 5413fde780..f1ef0342e9 100644
--- a/zanata-war/src/main/java/org/zanata/webtrans/client/view/AppView.java
+++ b/zanata-war/src/main/java/org/zanata/webtrans/client/view/AppView.java
@@ -45,10 +45,10 @@
 import com.google.gwt.uibinder.client.UiField;
 import com.google.gwt.uibinder.client.UiHandler;
 import com.google.gwt.user.client.Window;
+import com.google.gwt.user.client.ui.Anchor;
 import com.google.gwt.user.client.ui.Composite;
 import com.google.gwt.user.client.ui.HTMLPanel;
 import com.google.gwt.user.client.ui.InlineLabel;
-import com.google.gwt.user.client.ui.Label;
 import com.google.gwt.user.client.ui.LayoutPanel;
 import com.google.gwt.user.client.ui.TabLayoutPanel;
 import com.google.gwt.user.client.ui.Widget;
@@ -74,7 +74,7 @@ interface Styles extends CssResource {
     TransUnitCountBar translationStatsBar;
 
     @UiField
-    InlineLabel readOnlyLabel, keyShortcuts;
+    InlineLabel readOnlyLabel;
 
     @UiField(provided = true)
     Breadcrumb selectedDocumentSpan;
@@ -101,7 +101,7 @@ interface Styles extends CssResource {
     Styles style;
 
     @UiField
-    Label editorTab, searchAndReplaceTab, documentListTab;
+    Anchor editorTab, searchAndReplaceTab, documentListTab, keyShortcuts;
 
     @UiField
     UnorderedListWidget notifications;
@@ -240,25 +240,25 @@ public void setReadOnlyVisible(boolean visible) {
         readOnlyLabel.setVisible(visible);
     }
 
-    private final static double MIN_MENU_WIDTH = 24.0;
-    private final static double EXPENDED_MENU_RIGHT = 304.0;
+    private final static double MIN_MENU_WIDTH = 2;
+    private final static double EXPENDED_MENU_RIGHT = 23;
 
-    private final static double MINIMISED_EDITOR_RIGHT = 280.0;
-    private final static int ANIMATE_DURATION = 300;
+    private final static double MINIMISED_EDITOR_RIGHT = 21.5;
+    private final static int ANIMATE_DURATION = 100;
 
     @Override
     public void showSideMenu(boolean isShowing) {
         rootContainer.forceLayout();
         if (isShowing) {
-            rootContainer.setWidgetLeftRight(contentContainer, 0.0, Unit.PX,
-                    MINIMISED_EDITOR_RIGHT, Unit.PX);
+            rootContainer.setWidgetLeftRight(contentContainer, 0.0, Unit.EM,
+                    MINIMISED_EDITOR_RIGHT, Unit.EM);
             rootContainer.setWidgetRightWidth(sideMenuContainer, 0.0, Unit.PX,
-                    EXPENDED_MENU_RIGHT, Unit.PX);
+                    EXPENDED_MENU_RIGHT, Unit.EM);
         } else {
-            rootContainer.setWidgetLeftRight(contentContainer, 0.0, Unit.PX,
-                    0.0, Unit.PX);
-            rootContainer.setWidgetRightWidth(sideMenuContainer, 0.0, Unit.PX,
-                    MIN_MENU_WIDTH, Unit.PX);
+            rootContainer.setWidgetLeftRight(contentContainer, 0.0, Unit.EM,
+                    0.0, Unit.EM);
+            rootContainer.setWidgetRightWidth(sideMenuContainer, 0.0, Unit.EM,
+                    MIN_MENU_WIDTH, Unit.EM);
         }
         rootContainer.animate(ANIMATE_DURATION);
     }
@@ -322,7 +322,8 @@ public void setKeyboardShorcutColor(boolean aliasKeyListening) {
 
     public void showNotification(NotificationEvent notification) {
         notifications.clear();
-        notifications.add(new NotificationItem(messages, notification, this, false));
+        notifications.add(new NotificationItem(messages, notification, this,
+                false));
     }
 
     @Override
diff --git a/zanata-war/src/main/java/org/zanata/webtrans/client/view/AppView.ui.xml b/zanata-war/src/main/java/org/zanata/webtrans/client/view/AppView.ui.xml
index 0cb97d8af9..7e85ec1e0b 100644
--- a/zanata-war/src/main/java/org/zanata/webtrans/client/view/AppView.ui.xml
+++ b/zanata-war/src/main/java/org/zanata/webtrans/client/view/AppView.ui.xml
@@ -33,20 +33,10 @@
       display: inline-block;
     }
 
-    .topMenuButton {
-      cursor: pointer;
-      font-size: 20px;
-      color: #4E4E4E;
-    }
-
     .highlightedTab {
       color: #FF4500;
     }
 
-    .topMenuButton:hover {
-      color: #0085CC;
-    }
-
     .readonly_label {
       font-size: 14px;
       font-weight: bold;
@@ -55,14 +45,13 @@
     }
 
     .selectedTab, .selectedTab:hover {
-      color: #0085CC;
-      opacity: 1;
+      color: #416988 !important;
     }
 
     .disableTab, .disableTab:hover {
-      color: #777;
-      cursor: default;
-      opacity: 0.5;
+      color: #777 !important;
+      cursor: default !important;
+      opacity: 0.5 !important;
     }
 
     .content {
@@ -89,14 +78,14 @@
           <li class="{style.right-nav}">
             <fui:TransUnitCountBar ui:field="translationStatsBar"
               styleName="{style.translationStats}" />
-            <g:InlineLabel styleName="icon-list {style.topMenuButton}"
+            <g:Anchor styleName="icon-list txt--hero"
               ui:field="documentListTab" />
-            <g:InlineLabel styleName="icon-edit {style.topMenuButton}"
+            <g:Anchor styleName="icon-edit txt--hero"
               ui:field="editorTab" />
-            <g:InlineLabel styleName="icon-search {style.topMenuButton}"
+            <g:Anchor styleName="icon-search txt--hero"
               ui:field="searchAndReplaceTab" />
-            <g:InlineLabel ui:field="keyShortcuts"
-              styleName="icon-keyboard {style.topMenuButton}" />
+            <g:Anchor ui:field="keyShortcuts"
+              styleName="icon-keyboard txt--hero" />
           </li>
         </ul>
       </g:HTMLPanel>
@@ -113,8 +102,8 @@
       </g:HTMLPanel>
     </g:layer>
 
-    <g:layer right="0" width="24px" top="25px" bottom="10px">
-      <g:LayoutPanel ui:field="sideMenuContainer" />
+    <g:layer right="0" width="2em" top="25px" bottom="10px">
+      <g:LayoutPanel ui:field="sideMenuContainer" styleName="new-zanata" />
     </g:layer>
 
   </g:LayoutPanel>
diff --git a/zanata-war/src/main/java/org/zanata/webtrans/client/view/DocumentListOptionsView.java b/zanata-war/src/main/java/org/zanata/webtrans/client/view/DocumentListOptionsView.java
index 2babd62d11..82a8a53cd8 100644
--- a/zanata-war/src/main/java/org/zanata/webtrans/client/view/DocumentListOptionsView.java
+++ b/zanata-war/src/main/java/org/zanata/webtrans/client/view/DocumentListOptionsView.java
@@ -25,49 +25,34 @@
 
 import com.google.gwt.core.client.GWT;
 import com.google.gwt.event.dom.client.ClickEvent;
-import com.google.gwt.resources.client.CssResource;
 import com.google.gwt.uibinder.client.UiBinder;
 import com.google.gwt.uibinder.client.UiField;
 import com.google.gwt.uibinder.client.UiHandler;
+import com.google.gwt.user.client.ui.Anchor;
 import com.google.gwt.user.client.ui.Composite;
-import com.google.gwt.user.client.ui.InlineLabel;
-import com.google.gwt.user.client.ui.Label;
-import com.google.gwt.user.client.ui.VerticalPanel;
 import com.google.gwt.user.client.ui.Widget;
 import com.google.inject.Inject;
 
 public class DocumentListOptionsView extends Composite implements
         DocumentListOptionsDisplay {
     interface DocumentListOptionsUiBinder extends
-            UiBinder<VerticalPanel, DocumentListOptionsView> {
+            UiBinder<Widget, DocumentListOptionsView> {
     }
 
     private static DocumentListOptionsUiBinder uiBinder = GWT
             .create(DocumentListOptionsUiBinder.class);
 
     @UiField
-    Label pageSizeHeader;
+    Anchor twentyFiveDoc, fiftyDoc, hundredDoc, twoHundredFiftyDoc;
 
     @UiField
-    InlineLabel twentyFiveDoc, fiftyDoc, hundredDoc, twoHundredFiftyDoc;
-
-    @UiField
-    Styles style;
+    WebTransMessages messages;
 
     private Listener listener;
 
-    interface Styles extends CssResource {
-        String selectedPageSize();
-    }
-
     @Inject
-    public DocumentListOptionsView(WebTransMessages messages) {
+    public DocumentListOptionsView() {
         initWidget(uiBinder.createAndBindUi(this));
-        pageSizeHeader.setText(messages.pageSize());
-        twentyFiveDoc.setText("25");
-        fiftyDoc.setText("50");
-        hundredDoc.setText("100");
-        twoHundredFiftyDoc.setText("250");
     }
 
     @Override
@@ -78,34 +63,34 @@ public Widget asWidget() {
     @UiHandler("twentyFiveDoc")
     public void onTwentyFiveDocClicked(ClickEvent event) {
         listener.onPageSizeClick(25);
-        onPageSizeChanged(twentyFiveDoc, 25);
+        onPageSizeChanged(twentyFiveDoc);
     }
 
     @UiHandler("fiftyDoc")
     public void onFiftyDocClicked(ClickEvent event) {
         listener.onPageSizeClick(50);
-        onPageSizeChanged(fiftyDoc, 50);
+        onPageSizeChanged(fiftyDoc);
     }
 
     @UiHandler("hundredDoc")
     public void onHundredDocClicked(ClickEvent event) {
         listener.onPageSizeClick(100);
-        onPageSizeChanged(hundredDoc, 100);
+        onPageSizeChanged(hundredDoc);
     }
 
     @UiHandler("twoHundredFiftyDoc")
     public void onTwoHundredFiftyDocClicked(ClickEvent event) {
         listener.onPageSizeClick(250);
-        onPageSizeChanged(twoHundredFiftyDoc, 250);
+        onPageSizeChanged(twoHundredFiftyDoc);
     }
 
-    private void onPageSizeChanged(InlineLabel selectedWidget, int pageSize) {
-        twentyFiveDoc.removeStyleName(style.selectedPageSize());
-        fiftyDoc.removeStyleName(style.selectedPageSize());
-        hundredDoc.removeStyleName(style.selectedPageSize());
-        twoHundredFiftyDoc.removeStyleName(style.selectedPageSize());
+    private void onPageSizeChanged(Anchor selectedWidget) {
+        twentyFiveDoc.addStyleName("txt--invert");
+        fiftyDoc.addStyleName("txt--invert");
+        hundredDoc.addStyleName("txt--invert");
+        twoHundredFiftyDoc.addStyleName("txt--invert");
 
-        selectedWidget.addStyleName(style.selectedPageSize());
+        selectedWidget.removeStyleName("txt--invert");
     }
 
     @Override
diff --git a/zanata-war/src/main/java/org/zanata/webtrans/client/view/DocumentListOptionsView.ui.xml b/zanata-war/src/main/java/org/zanata/webtrans/client/view/DocumentListOptionsView.ui.xml
index 196ee283b0..4261a454b5 100644
--- a/zanata-war/src/main/java/org/zanata/webtrans/client/view/DocumentListOptionsView.ui.xml
+++ b/zanata-war/src/main/java/org/zanata/webtrans/client/view/DocumentListOptionsView.ui.xml
@@ -3,53 +3,26 @@
   xmlns:g="urn:import:com.google.gwt.user.client.ui"
   xmlns:f="urn:import:org.zanata.webtrans.client">
 
-  <ui:style field="style"
-    type="org.zanata.webtrans.client.view.DocumentListOptionsView.Styles">
-    .mainPanel {
-      width: 100%;
-    }
+  <ui:with field="messages"
+    type="org.zanata.webtrans.client.resources.WebTransMessages" />
 
-    .mainPanel td {
-      padding-bottom: 10px;
-    }
-
-    .mainPanel table td {
-      font-size: 13px;
-      padding: 1px;
-      color: #FFFFFF;
-    }
-
-    .selectedPageSize {
-      background-color: #B62918;
-    }
-
-    .pageSizeContainer span {
-      padding: 3px;
-      border: 1px solid #808080;
-      cursor: pointer;
-      display: block;
-      height: 15px;
-      width: 25px;
-      text-align: center;
-      float: left;
-      margin-right: 3px;
-    }
+  <ui:style>
 
   </ui:style>
 
-  <g:VerticalPanel styleName="{style.mainPanel}">
-    <g:cell>
-      <g:Label ui:field="pageSizeHeader" styleName="gwt-sideMenu-header" />
-    </g:cell>
-    <g:cell>
-      <g:HTMLPanel styleName="{style.pageSizeContainer}">
-        <g:InlineLabel ui:field="twentyFiveDoc" />
-        <g:InlineLabel ui:field="fiftyDoc" />
-        <g:InlineLabel ui:field="hundredDoc" />
-        <g:InlineLabel ui:field="twoHundredFiftyDoc" />
-      </g:HTMLPanel>
-    </g:cell>
-  </g:VerticalPanel>
-
+  <g:HTMLPanel tag="ul" styleName="list--no-bullets">
+    <li>
+      <h5 class="txt--invert txt--align-center">
+        <ui:text from="{messages.pageSize}" />
+      </h5>
+    </li>
+    <li>
+      <g:Anchor ui:field="twentyFiveDoc" styleName="txt--lead txt--invert">25</g:Anchor>
+      <g:Anchor ui:field="fiftyDoc" styleName="txt--lead txt--invert">50</g:Anchor>
+      <g:Anchor ui:field="hundredDoc" styleName="txt--lead txt--invert">100</g:Anchor>
+      <g:Anchor ui:field="twoHundredFiftyDoc" styleName="txt--lead txt--invert">250
+      </g:Anchor>
+    </li>
+  </g:HTMLPanel>
 
 </ui:UiBinder>
diff --git a/zanata-war/src/main/java/org/zanata/webtrans/client/view/DocumentListView.ui.xml b/zanata-war/src/main/java/org/zanata/webtrans/client/view/DocumentListView.ui.xml
index 577bdb2c9d..551b6b9388 100644
--- a/zanata-war/src/main/java/org/zanata/webtrans/client/view/DocumentListView.ui.xml
+++ b/zanata-war/src/main/java/org/zanata/webtrans/client/view/DocumentListView.ui.xml
@@ -11,14 +11,10 @@
       right: 0;
     }
 
-    .scrollPanel {
-      overflow: auto;
-      width: 100%;
-    }
-
     .form-input input {
+      display: inline-block;
       vertical-align: middle;
-      margin-bottom: 0.15em;
+      margin-right: 0.3em;
     }
 
     .top>li {
@@ -66,7 +62,7 @@
       </fui:UnorderedListWidget>
     </g:layer>
     <g:layer top='3em' bottom="0">
-      <g:HTMLPanel styleName="{style.scrollPanel}">
+      <g:HTMLPanel styleName="l--scroll-auto">
         <g:FlowPanel ui:field="documentListContainer" />
         <fui:Pager ui:field="pager" />
       </g:HTMLPanel>
diff --git a/zanata-war/src/main/java/org/zanata/webtrans/client/view/EditorOptionsView.java b/zanata-war/src/main/java/org/zanata/webtrans/client/view/EditorOptionsView.java
index f05532b383..d796a80489 100644
--- a/zanata-war/src/main/java/org/zanata/webtrans/client/view/EditorOptionsView.java
+++ b/zanata-war/src/main/java/org/zanata/webtrans/client/view/EditorOptionsView.java
@@ -31,14 +31,12 @@
 import com.google.gwt.core.client.GWT;
 import com.google.gwt.event.dom.client.ClickEvent;
 import com.google.gwt.event.logical.shared.ValueChangeEvent;
-import com.google.gwt.resources.client.CssResource;
 import com.google.gwt.uibinder.client.UiBinder;
 import com.google.gwt.uibinder.client.UiField;
 import com.google.gwt.uibinder.client.UiHandler;
+import com.google.gwt.user.client.ui.Anchor;
 import com.google.gwt.user.client.ui.CheckBox;
 import com.google.gwt.user.client.ui.Composite;
-import com.google.gwt.user.client.ui.InlineLabel;
-import com.google.gwt.user.client.ui.Label;
 import com.google.gwt.user.client.ui.RadioButton;
 import com.google.gwt.user.client.ui.VerticalPanel;
 import com.google.gwt.user.client.ui.Widget;
@@ -46,67 +44,40 @@
 
 public class EditorOptionsView extends Composite implements
         EditorOptionsDisplay {
+
     private static EditorOptionsUiBinder uiBinder = GWT
             .create(EditorOptionsUiBinder.class);
+
     private final EnumRadioButtonGroup<NavOption> navOptionGroup;
 
     @UiField
-    CheckBox enterChk, editorButtonsChk;
+    VerticalPanel optionsContainer;
 
     @UiField
-    Label navOptionHeader, editorOptionHeader;
+    Anchor five, ten, twentyFive, fifty;
 
     @UiField
-    VerticalPanel optionsContainer;
-    @UiField
-    Label pageSizeHeader;
-    @UiField
-    InlineLabel five;
-    @UiField
-    InlineLabel ten;
-    @UiField
-    InlineLabel fifty;
-    @UiField
-    InlineLabel twentyFive;
-    @UiField
-    Styles style;
-    @UiField
-    CheckBox useCodeMirrorChk;
-    @UiField
-    CheckBox showSaveApprovedWarningChk;
-    @UiField
-    CheckBox spellCheckChk;
-    @UiField
-    Label transMemoryHeader;
-    @UiField
-    RadioButton diffModeDiff;
-    @UiField
-    RadioButton diffModeHighlight;
-    @UiField
-    Label displayHeader;
-    @UiField
-    CheckBox showTMChk;
+    RadioButton diffModeDiff, diffModeHighlight;
+
     @UiField
-    CheckBox showGlossaryChk;
+    CheckBox showTMChk, showGlossaryChk, showOptionalTransUnitDetailsChk,
+            useCodeMirrorChk, showSaveApprovedWarningChk, spellCheckChk,
+            enterChk, editorButtonsChk;
+
     @UiField
-    CheckBox showOptionalTransUnitDetailsChk;
+    WebTransMessages messages;
 
     private Listener listener;
 
     @Inject
-    public EditorOptionsView(WebTransMessages messages,
-            NavOptionRenderer navOptionRenderer, UiMessages uiMessages) {
+    public EditorOptionsView(NavOptionRenderer navOptionRenderer,
+            UiMessages uiMessages) {
         initWidget(uiBinder.createAndBindUi(this));
         navOptionGroup =
                 new EnumRadioButtonGroup<NavOption>("navOption",
                         NavOption.class, navOptionRenderer);
         navOptionGroup.addToContainer(optionsContainer);
 
-        editorOptionHeader.setText(messages.editorOptions());
-        navOptionHeader.setText(messages.navOption());
-        pageSizeHeader.setText(messages.pageSize());
-        transMemoryHeader.setText(messages.transMemoryOption());
-
         useCodeMirrorChk.setTitle(messages.useCodeMirrorEditorTooltip());
         showSaveApprovedWarningChk.setTitle(messages
                 .showSaveApprovedWarningTooltip());
@@ -118,8 +89,6 @@ public EditorOptionsView(WebTransMessages messages,
         diffModeHighlight.setText(uiMessages.diffModeAsHighlight());
         diffModeDiff.setValue(true);
 
-        displayHeader.setText(messages.displayConfiguration());
-        displayHeader.setTitle(messages.displayConfigurationTooltip());
         showTMChk.setText(messages.showTranslationMemoryPanel());
         showGlossaryChk.setText(messages.showGlossaryPanel());
         showOptionalTransUnitDetailsChk
@@ -135,54 +104,34 @@ public Widget asWidget() {
 
     @UiHandler("five")
     public void onPageSizeFiveClicked(ClickEvent event) {
-        selectFive();
+        selectPage(five);
         listener.onPageSizeClick(5);
     }
 
-    private void selectFive() {
-        five.setStyleName(style.selectedPageSize());
-        ten.removeStyleName(style.selectedPageSize());
-        twentyFive.removeStyleName(style.selectedPageSize());
-        fifty.removeStyleName(style.selectedPageSize());
-    }
-
     @UiHandler("ten")
     public void onPageSizeTenClicked(ClickEvent event) {
-        selectTen();
+        selectPage(ten);
         listener.onPageSizeClick(10);
     }
 
-    private void selectTen() {
-        five.removeStyleName(style.selectedPageSize());
-        ten.setStyleName(style.selectedPageSize());
-        twentyFive.removeStyleName(style.selectedPageSize());
-        fifty.removeStyleName(style.selectedPageSize());
-    }
-
     @UiHandler("twentyFive")
     public void onPageSizeTwentyFiveClicked(ClickEvent event) {
-        selectTwentyFive();
+        selectPage(twentyFive);
         listener.onPageSizeClick(25);
     }
 
-    private void selectTwentyFive() {
-        five.removeStyleName(style.selectedPageSize());
-        ten.removeStyleName(style.selectedPageSize());
-        twentyFive.setStyleName(style.selectedPageSize());
-        fifty.removeStyleName(style.selectedPageSize());
-    }
-
     @UiHandler("fifty")
     public void onPageSizeFiftyClicked(ClickEvent event) {
-        selectFifty();
+        selectPage(fifty);
         listener.onPageSizeClick(50);
     }
 
-    private void selectFifty() {
-        five.removeStyleName(style.selectedPageSize());
-        ten.removeStyleName(style.selectedPageSize());
-        twentyFive.removeStyleName(style.selectedPageSize());
-        fifty.setStyleName(style.selectedPageSize());
+    private void selectPage(Anchor selectedPage) {
+        five.addStyleName("txt--invert");
+        ten.addStyleName("txt--invert");
+        twentyFive.addStyleName("txt--invert");
+        fifty.addStyleName("txt--invert");
+        selectedPage.removeStyleName("txt--invert");
     }
 
     @UiHandler("editorButtonsChk")
@@ -266,25 +215,16 @@ public void setOptionsState(UserConfigHolder.ConfigurationState state) {
 
     private void selectPageSize(int pageSize) {
         if (pageSize == 5) {
-            selectFive();
+            selectPage(five);
         } else if (pageSize == 10) {
-            selectTen();
+            selectPage(ten);
         } else if (pageSize == 25) {
-            selectTwentyFive();
+            selectPage(twentyFive);
         } else if (pageSize == 50) {
-            selectFifty();
+            selectPage(fifty);
         }
     }
 
-    interface EditorOptionsUiBinder extends
-            UiBinder<VerticalPanel, EditorOptionsView> {
-    }
-
-    interface Styles extends CssResource {
-        String selectedPageSize();
-
-        String mainPanel();
-
-        String pageSizeContainer();
+    interface EditorOptionsUiBinder extends UiBinder<Widget, EditorOptionsView> {
     }
 }
diff --git a/zanata-war/src/main/java/org/zanata/webtrans/client/view/EditorOptionsView.ui.xml b/zanata-war/src/main/java/org/zanata/webtrans/client/view/EditorOptionsView.ui.xml
index 6cc1266684..c6d958a692 100644
--- a/zanata-war/src/main/java/org/zanata/webtrans/client/view/EditorOptionsView.ui.xml
+++ b/zanata-war/src/main/java/org/zanata/webtrans/client/view/EditorOptionsView.ui.xml
@@ -1,108 +1,98 @@
 <!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
 <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
   xmlns:g="urn:import:com.google.gwt.user.client.ui"
-  xmlns:f="urn:import:org.zanata.webtrans.client">
+  xmlns:f="urn:import:org.zanata.webtrans.client.ui">
 
-  <ui:style field="style"
-    type="org.zanata.webtrans.client.view.EditorOptionsView.Styles">
-    .mainPanel {
-      width: 100%;
-    }
-
-    .mainPanel td {
-      padding-bottom: 10px;
-    }
-
-    .mainPanel table td {
-      font-size: 13px;
-      color: #FFFFFF;
-    }
-
-    .selectedPageSize {
-      background-color: #B62918;
-    }
-
-    .pageSizeContainer {
-      margin-left: 8px;
-      margin-top: 8px;
-    }
+  <ui:with field="messages"
+    type="org.zanata.webtrans.client.resources.WebTransMessages" />
 
-    .pageSizeContainer span {
-      padding: 3px;
-      border: 1px solid #808080;
-      cursor: pointer;
-      display: block;
-      height: 15px;
-      width: 15px;
-      text-align: center;
-      float: left;
-      margin-right: 3px;
+  <ui:style>
+    table.nav-options td {
+      margin: 0;
+      padding: 0;
     }
-
   </ui:style>
 
-  <g:VerticalPanel styleName="{style.mainPanel}">
-    <g:cell>
-      <g:VerticalPanel width="100%">
-        <g:Label ui:field="editorOptionHeader"
-          styleName="gwt-sideMenu-header" />
-        <g:CheckBox ui:field="editorButtonsChk">
-          <ui:msg>Editor Buttons</ui:msg>
-        </g:CheckBox>
-        <g:CheckBox ui:field="enterChk">
-          <ui:msg>'Enter' key saves immediately</ui:msg>
-        </g:CheckBox>
-        <g:CheckBox ui:field="useCodeMirrorChk">
-          <ui:msg>Use syntax highlighting Editor</ui:msg>
-        </g:CheckBox>
-        <g:CheckBox ui:field="showSaveApprovedWarningChk">
-          <ui:msg>Show 'Save as Approved' warning</ui:msg>
-        </g:CheckBox>
-        <g:CheckBox ui:field="spellCheckChk">
-          <ui:msg>Enable Spell Check</ui:msg>
-        </g:CheckBox>
-      </g:VerticalPanel>
-    </g:cell>
-
-    <g:cell>
-      <g:VerticalPanel width="100%">
-        <g:Label ui:field="navOptionHeader" styleName="gwt-sideMenu-header" />
-        <g:VerticalPanel ui:field="optionsContainer" />
-      </g:VerticalPanel>
-    </g:cell>
-
-    <g:cell>
-      <g:VerticalPanel width="100%">
-        <g:Label ui:field="transMemoryHeader" styleName="gwt-sideMenu-header" />
-        <g:RadioButton name="transMemoryDisplayMode" ui:field="diffModeDiff" />
-        <g:RadioButton name="transMemoryDisplayMode"
-          ui:field="diffModeHighlight" />
-      </g:VerticalPanel>
-    </g:cell>
-
-
-    <g:cell>
-      <g:VerticalPanel width="100%">
-        <g:Label ui:field="pageSizeHeader" styleName="gwt-sideMenu-header" />
-        <g:HTMLPanel styleName="{style.pageSizeContainer}">
-          <g:InlineLabel ui:field="five">5</g:InlineLabel>
-          <g:InlineLabel ui:field="ten">10</g:InlineLabel>
-          <g:InlineLabel ui:field="twentyFive">25</g:InlineLabel>
-          <g:InlineLabel ui:field="fifty">50</g:InlineLabel>
-        </g:HTMLPanel>
-      </g:VerticalPanel>
-    </g:cell>
-
-    <g:cell>
-      <g:VerticalPanel width="100%">
-        <g:Label ui:field="displayHeader" styleName="gwt-sideMenu-header" />
-        <g:CheckBox ui:field="showTMChk" />
-        <g:CheckBox ui:field="showGlossaryChk" />
-        <g:CheckBox ui:field="showOptionalTransUnitDetailsChk" />
-      </g:VerticalPanel>
-    </g:cell>
-
-  </g:VerticalPanel>
-
+  <g:HTMLPanel tag="ul" styleName="list--no-bullets">
+    <li>
+      <h5 class="txt--invert txt--align-center">
+        <ui:text from="{messages.editorOptions}" />
+      </h5>
+    </li>
+    <li>
+      <g:CheckBox ui:field="editorButtonsChk">
+        <ui:text from="{messages.editorButtons}" />
+      </g:CheckBox>
+    </li>
+    <li>
+      <g:CheckBox ui:field="enterChk">
+        <ui:text from="{messages.enterKeySaves}" />
+      </g:CheckBox>
+    </li>
+    <li>
+      <g:CheckBox ui:field="useCodeMirrorChk">
+        <ui:text from="{messages.useSyntaxHighlight}" />
+      </g:CheckBox>
+    </li>
+    <li>
+      <g:CheckBox ui:field="showSaveApprovedWarningChk"
+        styleName="txt--invert">
+        <ui:text from="{messages.showSaveApproveWarning}" />
+      </g:CheckBox>
+    </li>
+    <li>
+      <g:CheckBox ui:field="spellCheckChk">
+        <ui:text from="{messages.enabledSpellCheck}" />
+      </g:CheckBox>
+    </li>
+
+    <li class="l--push-v-half">
+      <h5 class="txt--invert txt--align-center">
+        <ui:text from="{messages.navOption}" />
+      </h5>
+      <g:VerticalPanel ui:field="optionsContainer"
+        styleName="{style.nav-options}" />
+    </li>
+    <li class="l--push-v-half">
+      <h5 class="txt--invert txt--align-center">
+        <ui:text from="{messages.transMemoryOption}" />
+      </h5>
+    </li>
+    <li>
+      <g:RadioButton name="transMemoryDisplayMode" ui:field="diffModeDiff" />
+    </li>
+    <li>
+      <g:RadioButton name="transMemoryDisplayMode"
+        ui:field="diffModeHighlight" />
+    </li>
+
+    <li class="l--push-v-half">
+      <h5 class="txt--invert txt--align-center">
+        <ui:text from="{messages.pageSize}" />
+      </h5>
+    </li>
+    <li>
+      <g:Anchor ui:field="five" styleName="txt--lead txt--invert">5</g:Anchor>
+      <g:Anchor ui:field="ten" styleName="txt--lead txt--invert">10</g:Anchor>
+      <g:Anchor ui:field="twentyFive" styleName="txt--lead txt--invert">25</g:Anchor>
+      <g:Anchor ui:field="fifty" styleName="txt--lead txt--invert">50</g:Anchor>
+    </li>
+
+    <li class="l--push-v-half">
+      <h5 class="txt--invert txt--align-center"
+        title="{messages.displayConfigurationTooltip}">
+        <ui:text from="{messages.displayConfiguration}" />
+      </h5>
+    </li>
+    <li>
+      <g:CheckBox ui:field="showTMChk" />
+    </li>
+    <li>
+      <g:CheckBox ui:field="showGlossaryChk" />
+    </li>
+    <li>
+      <g:CheckBox ui:field="showOptionalTransUnitDetailsChk" />
+    </li>
+  </g:HTMLPanel>
 
 </ui:UiBinder>
diff --git a/zanata-war/src/main/java/org/zanata/webtrans/client/view/GlossaryView.ui.xml b/zanata-war/src/main/java/org/zanata/webtrans/client/view/GlossaryView.ui.xml
index 4f01fb97f3..a938b64799 100644
--- a/zanata-war/src/main/java/org/zanata/webtrans/client/view/GlossaryView.ui.xml
+++ b/zanata-war/src/main/java/org/zanata/webtrans/client/view/GlossaryView.ui.xml
@@ -6,18 +6,16 @@
     type="org.zanata.webtrans.client.resources.UiMessages" />
 
   <ui:style>
-    .container {
-      overflow: auto;
-    }
+
   </ui:style>
 
-  <g:HTMLPanel styleName="{style.container}">
-    <ul class="list--horizontal l--push-h-half">
+  <g:HTMLPanel styleName="l--scroll-auto">
+    <ul class="list--horizontal l--push-h-quarter">
       <li class="epsilon">
         <ui:text from="{messages.glossaryHeading}" />
       </li>
       <li>
-        <g:TextBox ui:field="glossaryTextBox" />
+        <g:TextBox ui:field="glossaryTextBox" styleName="l--push-bottom-0" />
       </li>
       <li>
         <g:ValueListBox ui:field="searchType" />
@@ -33,8 +31,6 @@
         </g:Button>
       </li>
     </ul>
-
     <g:HTMLPanel ui:field="data" styleName="txt--align-center" />
-
   </g:HTMLPanel>
 </ui:UiBinder>
diff --git a/zanata-war/src/main/java/org/zanata/webtrans/client/view/NotificationView.ui.xml b/zanata-war/src/main/java/org/zanata/webtrans/client/view/NotificationView.ui.xml
index 184fa5228a..34dfd1ee2f 100644
--- a/zanata-war/src/main/java/org/zanata/webtrans/client/view/NotificationView.ui.xml
+++ b/zanata-war/src/main/java/org/zanata/webtrans/client/view/NotificationView.ui.xml
@@ -7,18 +7,13 @@
     type="org.zanata.webtrans.client.resources.Resources" />
 
   <ui:style>
-    .container {
-      height: 100%;
-      overflow: auto;
-    }
-
     .messagePanel>li:hover {
       background-color: rgba(255, 255, 255, 0.05);
     }
 
   </ui:style>
 
-  <g:HTMLPanel styleName="new-zanata {style.container}">
+  <g:HTMLPanel styleName="l--push-all-quarter l--scroll-auto">
     <fui:UnorderedListWidget ui:field="messagePanel"
       styleName="list--no-bullets list--slat {style.messagePanel}" />
     <g:Anchor href="javascript:void(0)"
@@ -26,6 +21,5 @@
       ui:field="clearLink">
       <ui:msg>Clear</ui:msg>
     </g:Anchor>
-
   </g:HTMLPanel>
 </ui:UiBinder>
diff --git a/zanata-war/src/main/java/org/zanata/webtrans/client/view/OptionsView.java b/zanata-war/src/main/java/org/zanata/webtrans/client/view/OptionsView.java
index d99bc6dacb..fdb0d6820b 100644
--- a/zanata-war/src/main/java/org/zanata/webtrans/client/view/OptionsView.java
+++ b/zanata-war/src/main/java/org/zanata/webtrans/client/view/OptionsView.java
@@ -20,7 +20,6 @@
  */
 package org.zanata.webtrans.client.view;
 
-import org.zanata.webtrans.client.resources.WebTransMessages;
 import org.zanata.webtrans.shared.rpc.ThemesOption;
 
 import com.google.gwt.core.client.GWT;
@@ -30,28 +29,23 @@
 import com.google.gwt.uibinder.client.UiBinder;
 import com.google.gwt.uibinder.client.UiField;
 import com.google.gwt.uibinder.client.UiHandler;
+import com.google.gwt.user.client.ui.Button;
 import com.google.gwt.user.client.ui.CheckBox;
 import com.google.gwt.user.client.ui.Composite;
 import com.google.gwt.user.client.ui.HTMLPanel;
-import com.google.gwt.user.client.ui.Label;
 import com.google.gwt.user.client.ui.ListBox;
-import com.google.gwt.user.client.ui.PushButton;
-import com.google.gwt.user.client.ui.VerticalPanel;
 import com.google.gwt.user.client.ui.Widget;
 import com.google.inject.Inject;
 
 public class OptionsView extends Composite implements OptionsDisplay {
     private static OptionsUiBinder uiBinder = GWT.create(OptionsUiBinder.class);
 
-    interface OptionsUiBinder extends UiBinder<VerticalPanel, OptionsView> {
+    interface OptionsUiBinder extends UiBinder<Widget, OptionsView> {
     }
 
     @UiField
     HTMLPanel optionsContainer;
 
-    @UiField
-    Label advancedUserConfig;
-
     @UiField
     CheckBox showErrorChk;
 
@@ -59,31 +53,17 @@ interface OptionsUiBinder extends UiBinder<VerticalPanel, OptionsView> {
     ListBox themesList;
 
     @UiField
-    PushButton saveButton;
-
-    @UiField
-    PushButton loadButton;
-
-    @UiField
-    PushButton restoreToDefaultsButton;
+    Button saveButton, loadButton, restoreToDefaultsButton;
 
     private OptionsDisplay.Listener listener;
 
     @Inject
-    public OptionsView(WebTransMessages messages) {
+    public OptionsView() {
         initWidget(uiBinder.createAndBindUi(this));
 
         themesList.addItem("Compact", ThemesOption.THEMES_COMPACT.name());
         themesList.addItem("Default", ThemesOption.THEMES_DEFAULT.name());
         themesList.addItem("Loose", ThemesOption.THEMES_LOOSE.name());
-
-        advancedUserConfig.setText(messages.otherConfiguration());
-
-        showErrorChk.setTitle(messages.showErrorsTooltip());
-
-        saveButton.setText(messages.save());
-        loadButton.setText(messages.load());
-        restoreToDefaultsButton.setText(messages.restoreDefaults());
     }
 
     @Override
diff --git a/zanata-war/src/main/java/org/zanata/webtrans/client/view/OptionsView.ui.xml b/zanata-war/src/main/java/org/zanata/webtrans/client/view/OptionsView.ui.xml
index 4f3de69c0a..c22ddd4b24 100644
--- a/zanata-war/src/main/java/org/zanata/webtrans/client/view/OptionsView.ui.xml
+++ b/zanata-war/src/main/java/org/zanata/webtrans/client/view/OptionsView.ui.xml
@@ -3,64 +3,57 @@
   xmlns:g="urn:import:com.google.gwt.user.client.ui"
   xmlns:f="urn:import:org.zanata.webtrans.client">
 
-  <ui:style field="style">
-    .mainPanel {
-      width: 100%;
-      height: 100%;
-      padding: 5px;
-      color: #FFFFFF;
-    }
-
-    .mainPanel table td {
-      font-size: 13px;
-      padding: 1px;
-      color: #FFFFFF;
-    }
+  <ui:with field="messages"
+    type="org.zanata.webtrans.client.resources.WebTransMessages" />
 
-    .editorOptsButton {
-      float: right;
-      margin-right: 3px;
-      border-radius: 3px;
+  <ui:style field="style">
+    .container label {
+      color: #f0f2f4 !important;
+      font-weight: initial;
     }
 
-    .listBox {
-      color: #000000;
+    .container input {
+      display: inline-block;
+      vertical-align: middle;
+      margin-right: 0.3em;
     }
 
   </ui:style>
 
-  <g:VerticalPanel height="100%" width="100%" styleName="{style.mainPanel}">
-    <g:cell>
-      <g:HTMLPanel ui:field="optionsContainer" />
-    </g:cell>
-
-    <g:cell verticalAlignment="ALIGN_TOP" height="80px">
-      <g:VerticalPanel width="100%">
-        <g:Label ui:field="advancedUserConfig"
-          styleName="gwt-sideMenu-header" />
-        <g:cell>
-          <g:HTMLPanel>
-            <g:InlineLabel>
-              <ui:msg>Layout</ui:msg>
-            </g:InlineLabel>
-            <g:ListBox ui:field="themesList" styleName="{style.listBox}" />
-          </g:HTMLPanel>
-        </g:cell>
-        <g:CheckBox ui:field="showErrorChk">
-          <ui:msg>Show System Errors</ui:msg>
-        </g:CheckBox>
-      </g:VerticalPanel>
-    </g:cell>
-    <g:cell verticalAlignment="ALIGN_BOTTOM" height="30px">
-      <g:HTMLPanel>
-        <g:PushButton ui:field="saveButton"
-          addStyleNames="{style.editorOptsButton}" />
-        <g:PushButton ui:field="loadButton"
-          addStyleNames="{style.editorOptsButton}" title="" />
-        <g:PushButton ui:field="restoreToDefaultsButton"
-          addStyleNames="{style.editorOptsButton}" />
-      </g:HTMLPanel>
-    </g:cell>
-  </g:VerticalPanel>
-
+  <g:HTMLPanel tag="ul"
+    styleName="list--no-bullets l--push-all-quarter l--scroll-auto {style.container}">
+    <g:HTMLPanel tag="li" ui:field="optionsContainer" />
+    <li>
+      <h5 class="txt--invert txt--align-center">
+        <ui:text from="{messages.otherConfiguration}" />
+      </h5>
+    </li>
+    <li>
+      <ul class="list--horizontal">
+        <li>
+          <span>Layout</span>
+        </li>
+        <li>
+          <g:ListBox ui:field="themesList" styleName="txt--highlight"/>
+        </li>
+      </ul>
+    </li>
+    <li>
+      <g:CheckBox ui:field="showErrorChk"
+        title="{messages.showErrorsTooltip}">
+        <ui:text from="{messages.showSystemErrors}" />
+      </g:CheckBox>
+    </li>
+    <li>
+      <g:Button ui:field="saveButton">
+        <ui:text from="{messages.save}" />
+      </g:Button>
+      <g:Button ui:field="loadButton">
+        <ui:text from="{messages.load}" />
+      </g:Button>
+      <g:Button ui:field="restoreToDefaultsButton">
+        <ui:text from="{messages.restoreDefaults}" />
+      </g:Button>
+    </li>
+  </g:HTMLPanel>
 </ui:UiBinder>
diff --git a/zanata-war/src/main/java/org/zanata/webtrans/client/view/SideMenuView.java b/zanata-war/src/main/java/org/zanata/webtrans/client/view/SideMenuView.java
index dcda74aaf7..0be0b8010e 100644
--- a/zanata-war/src/main/java/org/zanata/webtrans/client/view/SideMenuView.java
+++ b/zanata-war/src/main/java/org/zanata/webtrans/client/view/SideMenuView.java
@@ -9,6 +9,7 @@
 import com.google.gwt.uibinder.client.UiBinder;
 import com.google.gwt.uibinder.client.UiField;
 import com.google.gwt.uibinder.client.UiHandler;
+import com.google.gwt.user.client.ui.Anchor;
 import com.google.gwt.user.client.ui.Composite;
 import com.google.gwt.user.client.ui.InlineLabel;
 import com.google.gwt.user.client.ui.TabLayoutPanel;
@@ -27,20 +28,16 @@ interface Styles extends CssResource {
         String selectedButton();
 
         String alertTab();
-
-        String notificationLabel();
-
-        String menuButton();
-
-        String mainPanel();
     }
 
     @UiField
     Styles style;
 
     @UiField
-    InlineLabel notificationTab, optionsTab, validationOptionsTab, chatTab,
-            notificationLabel;
+    Anchor notificationTab, optionsTab, validationOptionsTab, chatTab;
+
+    @UiField
+    InlineLabel notificationLabel;
 
     @UiField
     TabLayoutPanel container;
diff --git a/zanata-war/src/main/java/org/zanata/webtrans/client/view/SideMenuView.ui.xml b/zanata-war/src/main/java/org/zanata/webtrans/client/view/SideMenuView.ui.xml
index 71e3af4b76..eee4e652ff 100644
--- a/zanata-war/src/main/java/org/zanata/webtrans/client/view/SideMenuView.ui.xml
+++ b/zanata-war/src/main/java/org/zanata/webtrans/client/view/SideMenuView.ui.xml
@@ -4,32 +4,24 @@
   xmlns:f="urn:import:org.zanata.webtrans.client">
   <ui:style type="org.zanata.webtrans.client.view.SideMenuView.Styles">
     .mainPanel {
-      color: #FFFFFF;
-      width: 250px;
-      padding: 15px;
-      background-color: #444444;
+      color: #c4ccd4;
+      width: 21em;
+      background-color: #444c54;
       border-radius: 0 0 0 5px;
     }
 
     .menuButton {
-      cursor: pointer;
-      font-size: 18px;
-      color: #FFFFFF;
       background: #626262;
       border-top-left-radius: 5px;
       border-bottom-left-radius: 5px;
-      padding: 2px 0 3px 3px;
-      margin-bottom: 1px;
-      display: inline-block;
-    }
-
-    .menuButton:hover {
-      color: #96FFFF;
+      padding: 0.1em;
+      margin-bottom: 0.1em;
+      display: block;
     }
 
     .selectedButton {
-      color: #96FFFF;
-      background: #444444;
+      color: #96FFFF !important;
+      background: #444c54;
     }
 
     .alertTab {
@@ -38,38 +30,39 @@
 
     .notificationLabel {
       text-align: center;
-      font-size: 10px;
+      font-size: 0.8em;
       font-weight: bold;
       color: white;
       position: absolute;
       background: orange;
       border-radius: 2px;
       min-width: 10px;
-      right: 13px;
-      top: 0px;
+      padding: 0.1em;
+      top: 0;
     }
 
   </ui:style>
 
   <g:LayoutPanel>
-    <g:layer top="0" bottom="0" left="0" width="24px">
-      <g:FlowPanel>
-        <g:InlineLabel ui:field="notificationTab"
-          styleName="icon-bell {style.menuButton}" />
+    <g:layer top="0" bottom="0" left="0" width="2em">
+      <g:FlowPanel styleName="new-zanata">
+        <g:Anchor ui:field="notificationTab"
+          styleName="icon-bell txt--invert txt--hero {style.menuButton}" />
         <g:InlineLabel ui:field="notificationLabel"
-          addStyleNames="{style.notificationLabel}" />
-        <g:InlineLabel ui:field="chatTab"
-          styleName="icon-chat-1 {style.menuButton}" />
-        <g:InlineLabel ui:field="optionsTab"
-          styleName="icon-cog {style.menuButton}" />
-        <g:InlineLabel ui:field="validationOptionsTab"
-          styleName="icon-check {style.menuButton}" />
+          styleName="{style.notificationLabel}" />
+        <g:Anchor ui:field="chatTab"
+          styleName="icon-chat-1 {style.menuButton} txt--invert txt--hero " />
+        <g:Anchor ui:field="optionsTab"
+          styleName="icon-cog {style.menuButton} txt--invert txt--hero" />
+        <g:Anchor ui:field="validationOptionsTab"
+          styleName="icon-check {style.menuButton} txt--invert txt--hero" />
       </g:FlowPanel>
     </g:layer>
 
 
-    <g:layer top="0px" bottom="0" left="24px" right="0">
-      <g:TabLayoutPanel ui:field="container" styleName="{style.mainPanel}"
+    <g:layer top="0px" bottom="0" left="2em" right="0">
+      <g:TabLayoutPanel ui:field="container"
+        styleName="{style.mainPanel} new-zanata"
         barHeight="0" />
     </g:layer>
   </g:LayoutPanel>
diff --git a/zanata-war/src/main/java/org/zanata/webtrans/client/view/TransMemoryView.ui.xml b/zanata-war/src/main/java/org/zanata/webtrans/client/view/TransMemoryView.ui.xml
index b98c7c8612..9aed5d8c18 100644
--- a/zanata-war/src/main/java/org/zanata/webtrans/client/view/TransMemoryView.ui.xml
+++ b/zanata-war/src/main/java/org/zanata/webtrans/client/view/TransMemoryView.ui.xml
@@ -18,19 +18,15 @@
       border-right: 2px solid #4e9fdd;
     }
 
-    .container {
-      overflow: auto;
-    }
-
   </ui:style>
 
-  <g:HTMLPanel styleName="{style.container}">
-    <ul class="list--horizontal l--push-h-half">
+  <g:HTMLPanel styleName="l--scroll-auto">
+    <ul class="list--horizontal l--push-h-quarter">
       <li class="epsilon">
         <ui:text from="{messages.translationMemoryHeading}" />
       </li>
       <li>
-        <g:TextBox ui:field="tmTextBox" />
+        <g:TextBox ui:field="tmTextBox" styleName="l--push-bottom-0" />
       </li>
       <li>
         <g:ValueListBox ui:field="searchType" />
@@ -57,8 +53,6 @@
         <g:RadioButton name="diffMode" ui:field="diffModeHighlight" />
       </li>
     </ul>
-
     <g:HTMLPanel ui:field="container" styleName="txt--align-center" />
-
   </g:HTMLPanel>
 </ui:UiBinder>
diff --git a/zanata-war/src/main/java/org/zanata/webtrans/client/view/ValidationOptionsView.java b/zanata-war/src/main/java/org/zanata/webtrans/client/view/ValidationOptionsView.java
index 050169238b..e5b751b2e0 100644
--- a/zanata-war/src/main/java/org/zanata/webtrans/client/view/ValidationOptionsView.java
+++ b/zanata-war/src/main/java/org/zanata/webtrans/client/view/ValidationOptionsView.java
@@ -2,7 +2,11 @@
 
 import java.util.Date;
 
+import com.google.gwt.user.client.ui.HTMLPanel;
+import com.google.gwt.user.client.ui.InlineHTML;
 import org.zanata.webtrans.client.resources.WebTransMessages;
+import org.zanata.webtrans.client.ui.ListItemWidget;
+import org.zanata.webtrans.client.ui.UnorderedListWidget;
 import org.zanata.webtrans.client.util.DateUtil;
 
 import com.google.gwt.core.client.GWT;
@@ -11,12 +15,10 @@
 import com.google.gwt.uibinder.client.UiBinder;
 import com.google.gwt.uibinder.client.UiField;
 import com.google.gwt.uibinder.client.UiHandler;
+import com.google.gwt.user.client.ui.Button;
 import com.google.gwt.user.client.ui.CheckBox;
 import com.google.gwt.user.client.ui.Composite;
 import com.google.gwt.user.client.ui.InlineLabel;
-import com.google.gwt.user.client.ui.Label;
-import com.google.gwt.user.client.ui.PushButton;
-import com.google.gwt.user.client.ui.VerticalPanel;
 import com.google.gwt.user.client.ui.Widget;
 import com.google.inject.Inject;
 
@@ -30,29 +32,22 @@ interface ValidationOptionsViewUiBinder extends
     }
 
     @UiField
-    Label validationOptionsHeader;
+    UnorderedListWidget contentPanel;
 
     @UiField
-    VerticalPanel contentPanel;
-
-    @UiField
-    PushButton runValidation;
+    Button runValidation;
 
     @UiField
     InlineLabel lastValidationRun;
 
     private Listener listener;
 
-    private final WebTransMessages messages;
+    @UiField
+    WebTransMessages messages;
 
     @Inject
-    public ValidationOptionsView(WebTransMessages messages) {
+    public ValidationOptionsView() {
         initWidget(uiBinder.createAndBindUi(this));
-        this.messages = messages;
-
-        validationOptionsHeader.setText(messages.validationOptions());
-        runValidation.setText(messages.runValidation());
-        runValidation.setTitle(messages.documentValidationTitle());
     }
 
     @Override
@@ -62,7 +57,7 @@ public HasValueChangeHandlers<Boolean> addValidationSelector(String label,
         chk.setValue(enabled);
         chk.setTitle(tooltip);
         chk.setEnabled(!locked);
-        contentPanel.add(chk);
+        contentPanel.add(new ListItemWidget(chk));
 
         return chk;
     }
diff --git a/zanata-war/src/main/java/org/zanata/webtrans/client/view/ValidationOptionsView.ui.xml b/zanata-war/src/main/java/org/zanata/webtrans/client/view/ValidationOptionsView.ui.xml
index bc9f859ae7..2ac30cdc15 100644
--- a/zanata-war/src/main/java/org/zanata/webtrans/client/view/ValidationOptionsView.ui.xml
+++ b/zanata-war/src/main/java/org/zanata/webtrans/client/view/ValidationOptionsView.ui.xml
@@ -1,51 +1,36 @@
 <!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
 <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
   xmlns:g="urn:import:com.google.gwt.user.client.ui"
-  ui:generateFormat='com.google.gwt.i18n.rebind.format.PropertiesFormat'
-  ui:generateKeys="com.google.gwt.i18n.rebind.keygen.MD5KeyGenerator"
-  ui:generateLocales="en">
+  xmlns:z='urn:import:org.zanata.webtrans.client.ui'>
 
-  <ui:style>
-    .mainPanel {
-    }
+  <ui:with field="messages"
+    type="org.zanata.webtrans.client.resources.WebTransMessages" />
 
-    .mainPanel table td {
-      font-size: 13px;
-      padding: 2px;
-      border-radius: 5px;
-      color: #FFFFFF;
+  <ui:style>
+    .container ul label {
+      color: #f0f2f4 !important;
+      font-weight: initial;
     }
 
-    .runValidationButton {
-      border-radius: 3px;
-      width: 85px;
-      margin-top: 10px;
+    .container input {
       display: inline-block;
+      vertical-align: middle;
+      margin-right: 0.3em;
     }
-
-    .lastValidationRun {
-      color: #ffa500;
-    }
-
   </ui:style>
 
 
-  <g:LayoutPanel>
-    <g:layer top="5px" bottom="0" left="5px" right="5px">
-      <g:HTMLPanel>
-        <g:ScrollPanel styleName="{style.mainPanel}">
-          <g:VerticalPanel width="100%">
-            <g:Label ui:field="validationOptionsHeader"
-              styleName="gwt-sideMenu-header" />
-            <g:VerticalPanel ui:field="contentPanel" width="100%" />
-          </g:VerticalPanel>
-        </g:ScrollPanel>
-        <g:PushButton ui:field="runValidation"
-          addStyleNames="{style.runValidationButton}" />
-        <g:InlineLabel ui:field="lastValidationRun"
-          styleName="{style.lastValidationRun}" />
-      </g:HTMLPanel>
-    </g:layer>
-  </g:LayoutPanel>
+  <g:HTMLPanel styleName="l--push-all-quarter {style.container} l--scroll-auto">
+    <h5 class="txt--invert txt--align-center">
+      <ui:text from="{messages.validationOptions}" />
+    </h5>
+    <z:UnorderedListWidget ui:field="contentPanel"
+      styleName="list--no-bullets l--push-bottom-half" />
+    <g:Button ui:field="runValidation"
+      title="{messages.documentValidationTitle}">
+      <ui:text from="{messages.runValidation}" />
+    </g:Button>
+    <g:InlineLabel ui:field="lastValidationRun" />
+  </g:HTMLPanel>
 
 </ui:UiBinder>
diff --git a/zanata-war/src/main/java/org/zanata/webtrans/client/view/WorkspaceUsersView.java b/zanata-war/src/main/java/org/zanata/webtrans/client/view/WorkspaceUsersView.java
index 798dedb325..d1806e580c 100644
--- a/zanata-war/src/main/java/org/zanata/webtrans/client/view/WorkspaceUsersView.java
+++ b/zanata-war/src/main/java/org/zanata/webtrans/client/view/WorkspaceUsersView.java
@@ -2,6 +2,7 @@
 
 import org.zanata.webtrans.client.resources.UiMessages;
 import org.zanata.webtrans.client.ui.HasManageUserPanel;
+import org.zanata.webtrans.client.ui.UnorderedListWidget;
 import org.zanata.webtrans.client.ui.UserPanel;
 import org.zanata.webtrans.shared.model.Person;
 import org.zanata.webtrans.shared.rpc.HasWorkspaceChatData.MESSAGE_TYPE;
@@ -11,15 +12,13 @@
 import com.google.gwt.event.dom.client.BlurEvent;
 import com.google.gwt.event.dom.client.ClickEvent;
 import com.google.gwt.event.dom.client.FocusEvent;
-import com.google.gwt.resources.client.CssResource;
+import com.google.gwt.safehtml.shared.SafeHtmlBuilder;
 import com.google.gwt.uibinder.client.UiBinder;
 import com.google.gwt.uibinder.client.UiField;
 import com.google.gwt.uibinder.client.UiHandler;
+import com.google.gwt.user.client.ui.Button;
 import com.google.gwt.user.client.ui.Composite;
-import com.google.gwt.user.client.ui.FlowPanel;
-import com.google.gwt.user.client.ui.InlineLabel;
-import com.google.gwt.user.client.ui.PushButton;
-import com.google.gwt.user.client.ui.ScrollPanel;
+import com.google.gwt.user.client.ui.HTMLPanel;
 import com.google.gwt.user.client.ui.SplitLayoutPanel;
 import com.google.gwt.user.client.ui.TextBox;
 import com.google.gwt.user.client.ui.VerticalPanel;
@@ -33,25 +32,19 @@ public class WorkspaceUsersView extends Composite implements
     private Listener listener;
 
     @UiField
-    VerticalPanel userListPanel;
+    UnorderedListWidget userListPanel;
 
     @UiField(provided = true)
     SplitLayoutPanel mainPanel;
 
     @UiField
-    VerticalPanel chatRoom;
+    UnorderedListWidget chatRoom;
 
     @UiField
     TextBox chatInput;
 
     @UiField
-    PushButton sendButton;
-
-    @UiField
-    ScrollPanel chatRoomScrollPanel;
-
-    @UiField
-    Styles style;
+    Button sendButton;
 
     @Inject
     public WorkspaceUsersView(final UiMessages uiMessages) {
@@ -116,59 +109,41 @@ public void onChatInputBlur(BlurEvent event) {
     @Override
     public void appendChat(String user, String timestamp, String msg,
             MESSAGE_TYPE messageType) {
-        InlineLabel timestampLabel = new InlineLabel("[" + timestamp + "]");
-        timestampLabel.setStylePrimaryName(style.timeStamp());
-        InlineLabel msgLabel = new InlineLabel(msg);
-        if (messageType == MESSAGE_TYPE.SYSTEM_MSG) {
-            msgLabel.setStyleName(style.systemMsg());
-        } else if (messageType == MESSAGE_TYPE.SYSTEM_WARNING) {
-            msgLabel.setStyleName(style.systemWarn());
-        } else {
-            msgLabel.setStyleName(style.msg());
-        }
 
-        FlowPanel hp = new FlowPanel();
+        SafeHtmlBuilder safeHtmlBuilder = new SafeHtmlBuilder();
 
+        StringBuilder sb = new StringBuilder();
         if (!Strings.isNullOrEmpty(timestamp)) {
-            hp.add(timestampLabel);
+            sb.append("[").append(timestamp).append("] ");
         }
         if (!Strings.isNullOrEmpty(user)) {
-            InlineLabel userLabel = new InlineLabel(user + ":");
-            userLabel.setStyleName(style.userName());
-            hp.add(userLabel);
+            sb.append(user).append(":");
         }
-        hp.add(msgLabel);
 
-        chatRoom.add(hp);
+        if (!sb.toString().isEmpty()) {
+            safeHtmlBuilder.appendHtmlConstant("<span class='txt--meta'>");
+            safeHtmlBuilder.appendEscaped(sb.toString());
+            safeHtmlBuilder.appendHtmlConstant("</span>");
+        }
 
-        chatRoomScrollPanel.scrollToBottom();
-    }
+        safeHtmlBuilder.appendHtmlConstant("<span class='"
+                + getCssClass(messageType) + "'>");
+        safeHtmlBuilder.appendEscaped(msg);
+        safeHtmlBuilder.appendHtmlConstant("</span>");
 
-    interface WorkspaceUsersViewUiBinder extends
-            UiBinder<SplitLayoutPanel, WorkspaceUsersView> {
+        chatRoom.add(new HTMLPanel("li", safeHtmlBuilder.toSafeHtml()
+                .asString()));
     }
 
-    interface Styles extends CssResource {
-        String systemMsg();
-
-        String userName();
-
-        String systemWarn();
-
-        String msg();
-
-        String timeStamp();
-
-        String chatInput();
-
-        String chatRoom();
-
-        String userListTable();
-
-        String mainPanel();
-
-        String chatRoomScrollPanel();
+    private String getCssClass(MESSAGE_TYPE messageType) {
+        if (messageType == MESSAGE_TYPE.SYSTEM_MSG
+                || messageType == MESSAGE_TYPE.SYSTEM_WARNING) {
+            return "txt--warning";
+        }
+        return "txt--neutral";
+    }
 
-        String sendButton();
+    interface WorkspaceUsersViewUiBinder extends
+            UiBinder<SplitLayoutPanel, WorkspaceUsersView> {
     }
 }
diff --git a/zanata-war/src/main/java/org/zanata/webtrans/client/view/WorkspaceUsersView.ui.xml b/zanata-war/src/main/java/org/zanata/webtrans/client/view/WorkspaceUsersView.ui.xml
index 33a63672f3..32fb4f9036 100644
--- a/zanata-war/src/main/java/org/zanata/webtrans/client/view/WorkspaceUsersView.ui.xml
+++ b/zanata-war/src/main/java/org/zanata/webtrans/client/view/WorkspaceUsersView.ui.xml
@@ -1,79 +1,19 @@
 <!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
 <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
-  xmlns:g="urn:import:com.google.gwt.user.client.ui">
+  xmlns:g="urn:import:com.google.gwt.user.client.ui"
+  xmlns:f="urn:import:org.zanata.webtrans.client.ui">
 
   <ui:with field='resources'
     type="org.zanata.webtrans.client.resources.Resources" />
 
-  <ui:style type="org.zanata.webtrans.client.view.WorkspaceUsersView.Styles">
-    .mainPanel {
-      margin: 3px 5px;
-    }
-
-    .userListTable td {
-      padding: 2px;
-      color: #FFFFFF;
-    }
-
-    .chatRoomScrollPanel {
+  <ui:style>
+    .chatRoom {
       top: 0;
-      bottom: 25px;
+      bottom: 3em;
       width: 100%;
       position: absolute !important;
     }
 
-    .chatRoom {
-      width: 100%;
-    }
-
-    .chatInput {
-      border: none;
-      border-radius: 2px;
-      height: 1.4em;
-      width: 75%;
-    }
-
-    .sendButton {
-      font-size: 0.85em;
-      border-radius: 3px;
-      outline: none;
-      width: 40px;
-      text-align: center;
-      margin: 0 3px;
-      display: inline-block;
-    }
-
-    .timeStamp {
-      font-style: normal;
-      font-size: 11px;
-      color: #D3D3D3;
-    }
-
-    .systemMsg {
-      color: #FFA500;
-      font-style: italic;
-      font-size: 12px;
-    }
-
-    .msg {
-      font-size: 12px;
-      color: #FFFFFF;
-    }
-
-    .userName {
-      font-weight: bold;
-      padding: 0 3px;
-      font-size: 12px;
-      color: #FFFFFF;
-    }
-
-    .systemWarn {
-      color: #FFA500;
-      font-style: italic;
-      font-weight: bold;
-      font-size: 12px;
-    }
-
     .bottomPanel {
       position: absolute;
       bottom: 0;
@@ -81,24 +21,28 @@
     }
   </ui:style>
 
-  <g:SplitLayoutPanel ui:field="mainPanel" styleName="{style.mainPanel}">
+  <g:SplitLayoutPanel ui:field="mainPanel" styleName="l--push-all-quarter">
     <g:north size="200">
       <g:ScrollPanel>
-        <g:VerticalPanel ui:field='userListPanel'
-          styleName="{style.userListTable}" />
+        <f:UnorderedListWidget ui:field='userListPanel' styleName="list--no-bullets"/>
       </g:ScrollPanel>
     </g:north>
     <g:center>
-      <g:HTMLPanel>
-        <g:ScrollPanel styleName="{style.chatRoomScrollPanel}"
-          ui:field="chatRoomScrollPanel">
-          <g:VerticalPanel ui:field="chatRoom" styleName="{style.chatRoom}" />
-        </g:ScrollPanel>
-        <g:HTMLPanel styleName="{style.bottomPanel}">
-          <g:TextBox styleName="{style.chatInput}" ui:field="chatInput" />
-          <g:PushButton addStyleNames="{style.sendButton}"
-            ui:field="sendButton" />
-        </g:HTMLPanel>
+      <g:HTMLPanel tag="ul" styleName="list--no-bullets">
+        <li class="l--scroll-auto {style.chatRoom}">
+          <f:UnorderedListWidget ui:field="chatRoom"
+            styleName="list--no-bullets" />
+        </li>
+        <li class="{style.bottomPanel}">
+          <ul class="list--horizontal">
+            <li style="width: 16em;">
+              <g:TextBox ui:field="chatInput" />
+            </li>
+            <li class="l--float-right">
+              <g:Button ui:field="sendButton" />
+            </li>
+          </ul>
+        </li>
       </g:HTMLPanel>
     </g:center>
   </g:SplitLayoutPanel>