diff --git a/frontend/resources/images/icons/shape-halign-center.svg b/frontend/resources/images/icons/shape-halign-center.svg
new file mode 100644
index 000000000..b861539f2
--- /dev/null
+++ b/frontend/resources/images/icons/shape-halign-center.svg
@@ -0,0 +1 @@
+
diff --git a/frontend/resources/images/icons/shape-halign-left.svg b/frontend/resources/images/icons/shape-halign-left.svg
new file mode 100644
index 000000000..ded065048
--- /dev/null
+++ b/frontend/resources/images/icons/shape-halign-left.svg
@@ -0,0 +1 @@
+
diff --git a/frontend/resources/images/icons/shape-halign-right.svg b/frontend/resources/images/icons/shape-halign-right.svg
new file mode 100644
index 000000000..fc1ed648f
--- /dev/null
+++ b/frontend/resources/images/icons/shape-halign-right.svg
@@ -0,0 +1 @@
+
diff --git a/frontend/resources/images/icons/shape-valign-bottom.svg b/frontend/resources/images/icons/shape-valign-bottom.svg
new file mode 100644
index 000000000..7b0911188
--- /dev/null
+++ b/frontend/resources/images/icons/shape-valign-bottom.svg
@@ -0,0 +1 @@
+
diff --git a/frontend/resources/images/icons/shape-valign-center.svg b/frontend/resources/images/icons/shape-valign-center.svg
new file mode 100644
index 000000000..0c6dae309
--- /dev/null
+++ b/frontend/resources/images/icons/shape-valign-center.svg
@@ -0,0 +1 @@
+
diff --git a/frontend/resources/images/icons/shape-valign-top.svg b/frontend/resources/images/icons/shape-valign-top.svg
new file mode 100644
index 000000000..2f091c9c3
--- /dev/null
+++ b/frontend/resources/images/icons/shape-valign-top.svg
@@ -0,0 +1 @@
+
diff --git a/frontend/resources/styles/common/dependencies/colors.scss b/frontend/resources/styles/common/dependencies/colors.scss
index 8c92847b7..1e61ede39 100644
--- a/frontend/resources/styles/common/dependencies/colors.scss
+++ b/frontend/resources/styles/common/dependencies/colors.scss
@@ -21,7 +21,7 @@ $color-warning: #e6a16f;
$color-danger: #de4762;
$color-info: #59b9e2;
-// Mixing Color varriable for creating both light and dark colors
+// Mixing Color variable for creating both light and dark colors
$mix-percentage-dark: 81%;
$mix-percentage-darker: 60%;
$mix-percentage-light: 80%;
diff --git a/frontend/resources/styles/main.scss b/frontend/resources/styles/main.scss
index 57c2bafe1..49156057c 100644
--- a/frontend/resources/styles/main.scss
+++ b/frontend/resources/styles/main.scss
@@ -51,6 +51,7 @@
@import 'main/partials/project-bar';
@import 'main/partials/sidebar';
@import 'main/partials/sidebar-tools';
+@import 'main/partials/sidebar-align-options';
@import 'main/partials/sidebar-element-options';
@import 'main/partials/sidebar-icons';
@import 'main/partials/sidebar-layers';
diff --git a/frontend/resources/styles/main/partials/sidebar-align-options.scss b/frontend/resources/styles/main/partials/sidebar-align-options.scss
new file mode 100644
index 000000000..132b09781
--- /dev/null
+++ b/frontend/resources/styles/main/partials/sidebar-align-options.scss
@@ -0,0 +1,38 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) 2015-2016 Andrey Antukh
+// Copyright (c) 2015-2016 Juan de la Cruz
+
+.align-options {
+ display: flex;
+ width: 100%;
+ justify-content: space-evenly;
+ border-bottom: solid 1px $color-gray-60;
+
+ .align-button {
+ cursor: pointer;
+ padding: $small;
+ svg {
+ height: 16px;
+ width: 16px;
+ fill: $color-gray-light;
+ }
+
+ &:hover {
+ background-color: $color-primary;
+ svg {
+ fill: $color-gray-50;
+ }
+ }
+
+ &.disabled {
+ background-color: transparent;
+ cursor: default;
+ svg {
+ fill: $color-gray-dark;
+ }
+ }
+ }
+}
diff --git a/frontend/src/uxbox/builtins/icons.cljs b/frontend/src/uxbox/builtins/icons.cljs
index aa209a29b..08f6d4b97 100644
--- a/frontend/src/uxbox/builtins/icons.cljs
+++ b/frontend/src/uxbox/builtins/icons.cljs
@@ -69,6 +69,12 @@
(def ruler-tool (icon-xref :ruler-tool))
(def save (icon-xref :save))
(def search (icon-xref :search))
+(def shape-halign-left (icon-xref :shape-halign-left))
+(def shape-halign-center (icon-xref :shape-halign-center))
+(def shape-halign-right (icon-xref :shape-halign-right))
+(def shape-valign-top (icon-xref :shape-valign-top))
+(def shape-valign-center (icon-xref :shape-valign-center))
+(def shape-valign-bottom (icon-xref :shape-valign-bottom))
(def size-horiz (icon-xref :size-horiz))
(def size-vert (icon-xref :size-vert))
(def stroke (icon-xref :stroke))
diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/align.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/align.cljs
new file mode 100644
index 000000000..98543b2ea
--- /dev/null
+++ b/frontend/src/uxbox/main/ui/workspace/sidebar/align.cljs
@@ -0,0 +1,49 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) 2015-2016 Andrey Antukh
+;; Copyright (c) 2015-2016 Juan de la Cruz
+
+(ns uxbox.main.ui.workspace.sidebar.align
+ (:require
+ [rumext.alpha :as mf]
+ [uxbox.builtins.icons :as i]
+ [uxbox.main.refs :as refs]
+ [uxbox.util.uuid :as uuid]))
+
+(mf/defc align-options
+ []
+ (let [data (mf/deref refs/workspace-data)
+ objects (:objects data)
+ selected (mf/deref refs/selected-shapes)
+
+ disabled (cond
+ (empty? selected) true
+ (> (count selected) 1) false
+ :else
+ (= uuid/zero (:frame-id (get objects (first selected)))))
+
+ on-align-button-clicked
+ (fn [axis] (when-not disabled (println axis)))]
+
+ [:div.align-options
+ [:div.align-button {:class (when disabled "disabled")
+ :on-click #(on-align-button-clicked :hleft)}
+ i/shape-halign-left]
+ [:div.align-button {:class (when disabled "disabled")
+ :on-click #(on-align-button-clicked :hcenter)}
+ i/shape-halign-center]
+ [:div.align-button {:class (when disabled "disabled")
+ :on-click #(on-align-button-clicked :hright)}
+ i/shape-halign-right]
+ [:div.align-button {:class (when disabled "disabled")
+ :on-click #(on-align-button-clicked :vtop)}
+ i/shape-valign-top]
+ [:div.align-button {:class (when disabled "disabled")
+ :on-click #(on-align-button-clicked :vcenter)}
+ i/shape-valign-center]
+ [:div.align-button {:class (when disabled "disabled")
+ :on-click #(on-align-button-clicked :vbottom)}
+ i/shape-valign-bottom]]))
+
diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/options.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/options.cljs
index 09f08a852..e821c5f5e 100644
--- a/frontend/src/uxbox/main/ui/workspace/sidebar/options.cljs
+++ b/frontend/src/uxbox/main/ui/workspace/sidebar/options.cljs
@@ -13,6 +13,7 @@
[uxbox.main.data.workspace :as udw]
[uxbox.main.store :as st]
[uxbox.main.refs :as refs]
+ [uxbox.main.ui.workspace.sidebar.align :refer [align-options]]
[uxbox.main.ui.workspace.sidebar.options.frame :as frame]
[uxbox.main.ui.workspace.sidebar.options.group :as group]
[uxbox.main.ui.workspace.sidebar.options.rect :as rect]
@@ -55,11 +56,12 @@
[{:keys [page selected] :as props}]
(let [close #(st/emit! (udw/toggle-layout-flag :element-options))
selected (mf/deref refs/selected-shapes)]
- [:div.elementa-options.tool-window
+ [:div.element-options.tool-window
;; [:div.tool-window-bar
;; [:div.tool-window-icon i/options]
;; [:span (tr "ds.settings.element-options")]
;; [:div.tool-window-close {:on-click close} i/close]]
+ [:& align-options]
[:div.tool-window-content
[:div.element-options
(if (= (count selected) 1)