diff --git a/src/assets/styles/icons.scss b/src/assets/styles/icons.scss
index 930c447d..78679240 100644
--- a/src/assets/styles/icons.scss
+++ b/src/assets/styles/icons.scss
@@ -10,11 +10,11 @@
     background-position: center;
 
     &.icon-nitro-light {
-        background-image: url('../images/nitro/nitro-n-light.svg');
+        background-image: url("../images/nitro/nitro-n-light.svg");
     }
 
     &.icon-nitro-dark {
-        background-image: url('../images/nitro/nitro-n-dark.svg');
+        background-image: url("../images/nitro/nitro-n-dark.svg");
     }
 
     &.icon-nitro-light,
@@ -24,693 +24,771 @@
     }
 
     &.icon-catalog {
-        background-image: url('../images/toolbar/icons/catalog.png');
+        background-image: url("../images/toolbar/icons/catalog.png");
         width: 37px;
         height: 36px;
     }
 
     &.icon-rooms {
-        background-image: url('../images/toolbar/icons/rooms.png');
+        background-image: url("../images/toolbar/icons/rooms.png");
         width: 44px;
         height: 30px;
     }
 
     &.icon-house {
-        background-image: url('../images/toolbar/icons/house.png');
+        background-image: url("../images/toolbar/icons/house.png");
         height: 30px;
         width: 32px;
     }
 
     &.icon-inventory {
-        background-image: url('../images/toolbar/icons/inventory.png');
+        background-image: url("../images/toolbar/icons/inventory.png");
         height: 41px;
         width: 44px;
     }
 
     &.icon-modtools {
-        background-image: url('../images/toolbar/icons/modtools.png');
+        background-image: url("../images/toolbar/icons/modtools.png");
         height: 34px;
         width: 29px;
     }
 
     &.icon-friendall {
-        background-image: url('../images/toolbar/icons/friend_all.png');
+        background-image: url("../images/toolbar/icons/friend_all.png");
         height: 33px;
         width: 32px;
     }
 
     &.icon-friendsearch {
-        background-image: url('../images/toolbar/icons/friend_search.png');
+        background-image: url("../images/toolbar/icons/friend_search.png");
         height: 33px;
         width: 29px;
     }
 
     &.icon-sendmessage {
-        background-image: url('../images/toolbar/icons/sendmessage.png');
+        background-image: url("../images/toolbar/icons/sendmessage.png");
         width: 20px;
         height: 21px;
     }
 
     &.icon-me-talents {
-        background-image: url('../images/toolbar/icons/me-menu/talents.png');
+        background-image: url("../images/toolbar/icons/me-menu/talents.png");
         width: 32px;
         height: 30px;
     }
 
     &.icon-me-helper-tool {
-        background-image: url('../images/toolbar/icons/me-menu/helper-tool.png');
+        background-image: url("../images/toolbar/icons/me-menu/helper-tool.png");
         width: 32px;
         height: 30px;
     }
 
     &.icon-me-profile {
-        background-image: url('../images/toolbar/icons/me-menu/profile.png');
+        background-image: url("../images/toolbar/icons/me-menu/profile.png");
         width: 32px;
         height: 30px;
     }
 
     &.icon-me-forums {
-        background-image: url('../images/toolbar/icons/me-menu/forums.png');
+        background-image: url("../images/toolbar/icons/me-menu/forums.png");
         width: 32px;
         height: 30px;
     }
 
     &.icon-me-rooms {
-        background-image: url('../images/toolbar/icons/me-menu/my-rooms.png');
+        background-image: url("../images/toolbar/icons/me-menu/my-rooms.png");
         width: 30px;
         height: 30px;
     }
 
     &.icon-me-achievements {
-        background-image: url('../images/toolbar/icons/me-menu/achievements.png');
+        background-image: url("../images/toolbar/icons/me-menu/achievements.png");
         width: 31px;
         height: 30px;
     }
 
     &.icon-me-clothing {
-        background-image: url('../images/toolbar/icons/me-menu/clothing.png');
+        background-image: url("../images/toolbar/icons/me-menu/clothing.png");
         width: 27px;
         height: 30px;
     }
 
     &.icon-me-settings {
-        background-image: url('../images/toolbar/icons/me-menu/cog.png');
+        background-image: url("../images/toolbar/icons/me-menu/cog.png");
         width: 28px;
         height: 34px;
     }
 
     &.icon-cog {
-        background: url('../images/icons/icon_cog.png');
+        background: url("../images/icons/icon_cog.png");
         width: 14px;
         height: 15px;
     }
 
     &.icon-help {
-        background: url('../images/icons/help.png');
+        background: url("../images/icons/help.png");
         width: 13px;
         height: 23px;
     }
 
     &.icon-joinroom {
-        background-image: url('../images/toolbar/icons/joinroom.png');
+        background-image: url("../images/toolbar/icons/joinroom.png");
         width: 21px;
         height: 21px;
     }
 
     &.icon-habbo {
-        background-image: url('../images/toolbar/icons/habbo.png');
+        background-image: url("../images/toolbar/icons/habbo.png");
         width: 28px;
         height: 28px;
     }
 
     &.icon-camera {
-        background-image: url('../images/toolbar/icons/camera.png');
+        background-image: url("../images/toolbar/icons/camera.png");
         width: 38px;
         height: 45px;
     }
 
     &.icon-message {
-        background-image: url('../images/toolbar/icons/message.png');
+        background-image: url("../images/toolbar/icons/message.png");
         width: 36px;
         height: 32px;
 
         &.is-unseen {
-            background-image: url('../images/toolbar/icons/message_unsee.gif');
+            background-image: url("../images/toolbar/icons/message_unsee.gif");
         }
     }
 
     &.icon-deny {
-        background: url('../images/icons/deny.png');
+        background: url("../images/icons/deny.png");
         width: 13px;
         height: 14px;
     }
 
     &.icon-accept {
-        background: url('../images/icons/accept.png');
+        background: url("../images/icons/accept.png");
         width: 13px;
         height: 14px;
     }
 
     &.icon-wired-trigger {
-        background-image: url('../images/wired/icon_trigger.png');
+        background-image: url("../images/wired/icon_trigger.png");
         width: 13px;
         height: 14px;
     }
 
     &.icon-wired-condition {
-        background-image: url('../images/wired/icon_condition.png');
+        background-image: url("../images/wired/icon_condition.png");
         width: 13px;
         height: 14px;
     }
 
     &.icon-wired-action {
-        background-image: url('../images/wired/icon_action.png');
+        background-image: url("../images/wired/icon_action.png");
         width: 13px;
         height: 14px;
     }
 
     &.arrow-left-icon {
-        background-image: url('../images/avatareditor/arrow-left-icon.png');
+        background-image: url("../images/avatareditor/arrow-left-icon.png");
         width: 28px;
         height: 21px;
     }
 
     &.arrow-right-icon {
-        background-image: url('../images/avatareditor/arrow-right-icon.png');
+        background-image: url("../images/avatareditor/arrow-right-icon.png");
         width: 28px;
         height: 21px;
     }
 
     &.clear-icon {
-        background-image: url('../images/avatareditor/clear-icon.png');
+        background-image: url("../images/avatareditor/clear-icon.png");
         width: 27px;
         height: 27px;
     }
 
     &.ca-icon {
-        background-image: url('../images/avatareditor/ca-icon.png');
+        background-image: url("../images/avatareditor/ca-icon.png");
         width: 25px;
         height: 25px;
 
         &.selected {
-            background-image: url('../images/avatareditor/ca-selected-icon.png');
+            background-image: url("../images/avatareditor/ca-selected-icon.png");
         }
     }
 
     &.cc-icon {
-        background-image: url('../images/avatareditor/cc-icon.png');
+        background-image: url("../images/avatareditor/cc-icon.png");
         width: 31px;
         height: 29px;
 
         &.selected {
-            background-image: url('../images/avatareditor/cc-selected-icon.png');
+            background-image: url("../images/avatareditor/cc-selected-icon.png");
         }
     }
 
     &.ch-icon {
-        background-image: url('../images/avatareditor/ch-icon.png');
+        background-image: url("../images/avatareditor/ch-icon.png");
         width: 29px;
         height: 24px;
 
         &.selected {
-            background-image: url('../images/avatareditor/ch-selected-icon.png');
+            background-image: url("../images/avatareditor/ch-selected-icon.png");
         }
     }
 
     &.cp-icon {
-        background-image: url('../images/avatareditor/cp-icon.png');
+        background-image: url("../images/avatareditor/cp-icon.png");
         width: 30px;
         height: 24px;
 
         &.selected {
-            background-image: url('../images/avatareditor/cp-selected-icon.png');
+            background-image: url("../images/avatareditor/cp-selected-icon.png");
         }
     }
 
     &.ea-icon {
-        background-image: url('../images/avatareditor/ea-icon.png');
+        background-image: url("../images/avatareditor/ea-icon.png");
         width: 35px;
         height: 16px;
 
         &.selected {
-            background-image: url('../images/avatareditor/ea-selected-icon.png');
+            background-image: url("../images/avatareditor/ea-selected-icon.png");
         }
     }
 
     &.fa-icon {
-        background-image: url('../images/avatareditor/fa-icon.png');
+        background-image: url("../images/avatareditor/fa-icon.png");
         width: 27px;
         height: 20px;
 
         &.selected {
-            background-image: url('../images/avatareditor/fa-selected-icon.png');
+            background-image: url("../images/avatareditor/fa-selected-icon.png");
         }
     }
 
     &.female-icon {
-        background-image: url('../images/avatareditor/female-icon.png');
+        background-image: url("../images/avatareditor/female-icon.png");
         width: 18px;
         height: 27px;
 
         &.selected {
-            background-image: url('../images/avatareditor/female-selected-icon.png');
+            background-image: url("../images/avatareditor/female-selected-icon.png");
         }
     }
 
     &.ha-icon {
-        background-image: url('../images/avatareditor/ha-icon.png');
+        background-image: url("../images/avatareditor/ha-icon.png");
         width: 25px;
         height: 22px;
 
         &.selected {
-            background-image: url('../images/avatareditor/ha-selected-icon.png');
+            background-image: url("../images/avatareditor/ha-selected-icon.png");
         }
     }
 
     &.he-icon {
-        background-image: url('../images/avatareditor/he-icon.png');
+        background-image: url("../images/avatareditor/he-icon.png");
         width: 31px;
         height: 27px;
 
         &.selected {
-            background-image: url('../images/avatareditor/he-selected-icon.png');
+            background-image: url("../images/avatareditor/he-selected-icon.png");
         }
     }
 
     &.hr-icon {
-        background-image: url('../images/avatareditor/hr-icon.png');
+        background-image: url("../images/avatareditor/hr-icon.png");
         width: 29px;
         height: 25px;
 
         &.selected {
-            background-image: url('../images/avatareditor/hr-selected-icon.png');
+            background-image: url("../images/avatareditor/hr-selected-icon.png");
         }
     }
 
     &.lg-icon {
-        background-image: url('../images/avatareditor/lg-icon.png');
+        background-image: url("../images/avatareditor/lg-icon.png");
         width: 19px;
         height: 20px;
 
         &.selected {
-            background-image: url('../images/avatareditor/lg-selected-icon.png');
+            background-image: url("../images/avatareditor/lg-selected-icon.png");
         }
     }
 
     &.loading-icon {
-        background-image: url('../images/icons/loading-icon.png');
+        background-image: url("../images/icons/loading-icon.png");
         width: 17px;
         height: 21px;
     }
 
     &.male-icon {
-        background-image: url('../images/avatareditor/male-icon.png');
+        background-image: url("../images/avatareditor/male-icon.png");
         width: 21px;
         height: 21px;
 
         &.selected {
-            background-image: url('../images/avatareditor/male-selected-icon.png');
+            background-image: url("../images/avatareditor/male-selected-icon.png");
         }
     }
 
     &.sh-icon {
-        background-image: url('../images/avatareditor/sh-icon.png');
+        background-image: url("../images/avatareditor/sh-icon.png");
         width: 37px;
         height: 10px;
 
         &.selected {
-            background-image: url('../images/avatareditor/sh-selected-icon.png');
+            background-image: url("../images/avatareditor/sh-selected-icon.png");
         }
     }
 
     &.wa-icon {
-        background-image: url('../images/avatareditor/wa-icon.png');
+        background-image: url("../images/avatareditor/wa-icon.png");
         width: 36px;
         height: 18px;
 
         &.selected {
-            background-image: url('../images/avatareditor/wa-selected-icon.png');
+            background-image: url("../images/avatareditor/wa-selected-icon.png");
         }
     }
 
     &.sellable-icon {
-        background-image: url('../images/avatareditor/sellable-icon.png');
+        background-image: url("../images/avatareditor/sellable-icon.png");
         width: 17px;
         height: 15px;
     }
 
     &.chatstyles-icon {
-        background-image: url('../images/chat/styles-icon.png');
+        background-image: url("../images/chat/styles-icon.png");
         width: 17px;
         height: 19px;
     }
 
     &.pencil-icon {
-        background-image: url('../images/infostand/pencil-icon.png');
+        background-image: url("../images/infostand/pencil-icon.png");
         width: 17px;
         height: 18px;
     }
 
     &.trade-locked-icon {
-        background-image: url('../images/inventory/trading/locked-icon.png');
+        background-image: url("../images/inventory/trading/locked-icon.png");
         width: 29px;
         height: 43px;
     }
 
     &.trade-unlocked-icon {
-        background-image: url('../images/inventory/trading/unlocked-icon.png');
+        background-image: url("../images/inventory/trading/unlocked-icon.png");
         width: 29px;
         height: 43px;
     }
 
     &.modtool-room-icon {
-        background-image: url('../images/modtool/room.png');
+        background-image: url("../images/modtool/room.png");
         width: 20px;
         height: 15px;
     }
 
     &.modtool-chatlog-icon {
-        background-image: url('../images/modtool/chatlog.gif');
+        background-image: url("../images/modtool/chatlog.gif");
         width: 20px;
         height: 15px;
     }
 
-    &.modtool-user-icon{
-        background-image: url('../images/modtool/user.gif');
+    &.modtool-user-icon {
+        background-image: url("../images/modtool/user.gif");
         width: 20px;
         height: 15px;
     }
 
     &.modtool-reports-icon {
-        background-image: url('../images/modtool/reports.png');
+        background-image: url("../images/modtool/reports.png");
         width: 20px;
         height: 15px;
     }
 
     &.modtool-wrench-icon {
-        background-image: url('../images/modtool/wrench.gif');
+        background-image: url("../images/modtool/wrench.gif");
         width: 20px;
         height: 15px;
     }
 
     &.modtool-key-icon {
-        background-image: url('../images/modtool/key.gif');
+        background-image: url("../images/modtool/key.gif");
         width: 20px;
         height: 15px;
     }
 
     &.icon-catalogue-hc_small {
-        background-image: url('../images/catalog/hc_small.png');
+        background-image: url("../images/catalog/hc_small.png");
         height: 17px;
         width: 31px;
     }
 
     &.icon-catalogue-hc_big {
-        background: url('../images/catalog/hc_big.png');
+        background: url("../images/catalog/hc_big.png");
         width: 68px;
         height: 40px;
     }
 
     &.icon-sign-exclamation {
-        background: url('../images/icons/sign-exclamation.png');
+        background: url("../images/icons/sign-exclamation.png");
         width: 7px;
         height: 17px;
     }
 
     &.icon-sign-heart {
-        background: url('../images/icons/sign-heart.png');
+        background: url("../images/icons/sign-heart.png");
         width: 15px;
         height: 13px;
     }
 
     &.icon-sign-red {
-        background: url('../images/icons/sign-red.png');
+        background: url("../images/icons/sign-red.png");
         width: 11px;
         height: 19px;
     }
 
     &.icon-sign-yellow {
-        background: url('../images/icons/sign-yellow.png');
+        background: url("../images/icons/sign-yellow.png");
         width: 11px;
         height: 19px;
     }
 
     &.icon-sign-skull {
-        background: url('../images/icons/sign-skull.png');
+        background: url("../images/icons/sign-skull.png");
         width: 12px;
         height: 12px;
     }
 
     &.icon-sign-smile {
-        background: url('../images/icons/sign-smile.png');
+        background: url("../images/icons/sign-smile.png");
         width: 7px;
         height: 14px;
     }
-    
+
     &.icon-sign-soccer {
-        background: url('../images/icons/sign-soccer.png');
+        background: url("../images/icons/sign-soccer.png");
         width: 20px;
         height: 20px;
     }
-    
+
     &.icon-house-small {
-        background: url('../images/icons/house-small.png');
+        background: url("../images/icons/house-small.png");
         width: 19px;
         height: 14px;
     }
 
     &.icon-camera-small {
-        background: url('../images/icons/camera-small.png');
+        background: url("../images/icons/camera-small.png");
         width: 17px;
         height: 15px;
     }
 
     &.icon-arrows {
-        background: url('../images/icons/arrows.png');
+        background: url("../images/icons/arrows.png");
         width: 17px;
         height: 15px;
     }
-    
+
     &.icon-fb-profile {
-        background: url('../images/toolbar/icons/friend-bar/profile.png');
+        background: url("../images/toolbar/icons/friend-bar/profile.png");
         width: 21px;
         height: 21px;
     }
 
     &.icon-camera-colormatrix {
-        background: url('../images/icons/camera-colormatrix.png');
+        background: url("../images/icons/camera-colormatrix.png");
         width: 32px;
         height: 21px;
     }
 
     &.icon-camera-composite {
-        background: url('../images/icons/camera-composite.png');
+        background: url("../images/icons/camera-composite.png");
         width: 32px;
         height: 21px;
     }
 
     &.icon-user-profile {
-        background: url('../images/icons/user-profile.png');
+        background: url("../images/icons/user-profile.png");
         width: 13px;
         height: 11px;
 
         &:hover {
-            background: url('../images/icons/user-profile-hover.png');
+            background: url("../images/icons/user-profile-hover.png");
         }
     }
 
     &.icon-fb-profile {
-        background: url('../images/toolbar/icons/friend-bar/profile.png');
+        background: url("../images/toolbar/icons/friend-bar/profile.png");
         width: 21px;
         height: 21px;
     }
 
     &.icon-fb-chat {
-        background: url('../images/toolbar/icons/friend-bar/chat.png');
+        background: url("../images/toolbar/icons/friend-bar/chat.png");
         width: 20px;
         height: 21px;
     }
 
     &.icon-fb-visit {
-        background: url('../images/toolbar/icons/friend-bar/visit.png');
+        background: url("../images/toolbar/icons/friend-bar/visit.png");
         width: 21px;
         height: 21px;
     }
 
     &.icon-pf-online {
-        background: url('../images/profile/icons/online.gif');
+        background: url("../images/profile/icons/online.gif");
         width: 40px;
         height: 16px;
     }
 
     &.icon-pf-offline {
-        background: url('../images/profile/icons/offline.png');
+        background: url("../images/profile/icons/offline.png");
         width: 39px;
         height: 16px;
     }
 
     &.icon-pf-tick {
-        background: url('../images/profile/icons/tick.png');
+        background: url("../images/profile/icons/tick.png");
         width: 11px;
         height: 10px;
     }
 
     &.icon-relationship-none {
-        background: url('../images/friendlist/icons/icon_relationship_none.png');
+        background: url("../images/friendlist/icons/icon_relationship_none.png");
         width: 16px;
         height: 14px;
     }
 
     &.icon-relationship-heart {
-        background: url('../images/profile/icons/heart.png');
+        background: url("../images/profile/icons/heart.png");
         width: 16px;
         height: 14px;
     }
 
     &.icon-relationship-bobba {
-        background: url('../images/profile/icons/bobba.png');
+        background: url("../images/profile/icons/bobba.png");
         width: 16px;
         height: 14px;
     }
 
     &.icon-relationship-smile {
-        background: url('../images/profile/icons/smile.png');
+        background: url("../images/profile/icons/smile.png");
         width: 16px;
         height: 14px;
     }
 
     &.icon-group-type-0 {
-        background: url('../images/groups/icons/grouptype_icon_0.png');
+        background: url("../images/groups/icons/grouptype_icon_0.png");
         width: 16px;
         height: 16px;
     }
 
     &.icon-group-type-1 {
-        background: url('../images/groups/icons/grouptype_icon_1.png');
+        background: url("../images/groups/icons/grouptype_icon_1.png");
         width: 16px;
         height: 16px;
     }
 
     &.icon-group-type-2 {
-        background: url('../images/groups/icons/grouptype_icon_2.png');
+        background: url("../images/groups/icons/grouptype_icon_2.png");
         width: 16px;
         height: 16px;
     }
 
     &.icon-group-decorate {
-        background: url('../images/groups/icons/group_decorate_icon.png');
+        background: url("../images/groups/icons/group_decorate_icon.png");
         width: 15px;
         height: 15px;
     }
 
     &.icon-group-member {
-        background: url('../images/groups/icons/group_icon_big_member.png');
+        background: url("../images/groups/icons/group_icon_big_member.png");
         width: 20px;
         height: 20px;
     }
 
     &.icon-group-admin {
-        background: url('../images/groups/icons/group_icon_big_admin.png');
+        background: url("../images/groups/icons/group_icon_big_admin.png");
         width: 20px;
         height: 20px;
     }
 
     &.icon-group-owner {
-        background: url('../images/groups/icons/group_icon_big_owner.png');
+        background: url("../images/groups/icons/group_icon_big_owner.png");
         width: 20px;
         height: 20px;
     }
 
     &.icon-group-favorite {
-        background: url('../images/groups/icons/group_favorite.png');
+        background: url("../images/groups/icons/group_favorite.png");
         width: 14px;
         height: 14px;
     }
 
     &.icon-group-not-favorite {
-        background: url('../images/groups/icons/group_notfavorite.png');
+        background: url("../images/groups/icons/group_notfavorite.png");
         width: 14px;
         height: 14px;
     }
 
     &.icon-group-small-admin {
-        background: url('../images/groups/icons/group_icon_admin.png');
+        background: url("../images/groups/icons/group_icon_admin.png");
         width: 11px;
         height: 13px;
     }
 
     &.icon-group-small-not-admin {
-        background: url('../images/groups/icons/group_icon_not_admin.png');
+        background: url("../images/groups/icons/group_icon_not_admin.png");
         width: 11px;
         height: 13px;
     }
 
     &.icon-group-small-owner {
-        background: url('../images/groups/icons/group_icon_small_owner.png');
+        background: url("../images/groups/icons/group_icon_small_owner.png");
         width: 13px;
         height: 13px;
     }
 
     &.icon-navigator-info {
-        background: url('../images/navigator/icons/info.png');
+        background: url("../images/navigator/icons/info.png");
         width: 18px;
         height: 18px;
     }
 
     &.icon-navigator-room-locked {
-        background: url('../images/navigator/icons/room_locked.png');
+        background: url("../images/navigator/icons/room_locked.png");
         width: 13px;
         height: 16px;
     }
 
     &.icon-navigator-room-password {
-        background: url('../images/navigator/icons/room_password.png');
+        background: url("../images/navigator/icons/room_password.png");
         width: 13px;
         height: 16px;
     }
 
     &.icon-navigator-room-invisible {
-        background: url('../images/navigator/icons/room_invisible.png');
+        background: url("../images/navigator/icons/room_invisible.png");
         width: 13px;
         height: 16px;
     }
 
     &.icon-navigator-room-group {
-        background: url('../images/navigator/icons/room_group.png');
+        background: url("../images/navigator/icons/room_group.png");
         width: 13px;
         height: 11px;
     }
 
     &.icon-friendlist-follow {
-        background: url('../images/friendlist/icons/icon_follow.png');
+        background: url("../images/friendlist/icons/icon_follow.png");
         width: 16px;
         height: 14px;
     }
 
     &.icon-friendlist-chat {
-        background: url('../images/friendlist/icons/icon_chat.png');
+        background: url("../images/friendlist/icons/icon_chat.png");
         width: 17px;
         height: 16px;
     }
 
     &.icon-friendlist-warning {
-        background: url('../images/friendlist/icons/icon_warning.png');
+        background: url("../images/friendlist/icons/icon_warning.png");
         width: 23px;
         height: 21px;
     }
 
     &.icon-friendlist-new-message {
-        background: url('../images/friendlist/icons/icon_new_message.png');
+        background: url("../images/friendlist/icons/icon_new_message.png");
         width: 14px;
         height: 16px;
     }
 
     &.icon-hc-banner {
-        background: url('../images/catalog/hc_big.png');
+        background: url("../images/catalog/hc_big.png");
         width: 68px;
         height: 40px;
     }
 
+    &.icon-set-tile {
+        background-image: url("../images/floorplaneditor/icon-tile-set.png");
+        width: 40px;
+        height: 40px;
+    }
+
+    &.icon-unset-tile {
+        background-image: url("../images/floorplaneditor/icon-tile-unset.png");
+        width: 40px;
+        height: 40px;
+    }
+
+    &.icon-increase-height {
+        background-image: url("../images/floorplaneditor/icon-tile-up.png");
+        width: 40px;
+        height: 40px;
+    }
+
+    &.icon-decrease-height {
+        background-image: url("../images/floorplaneditor/icon-tile-down.png");
+        width: 40px;
+        height: 40px;
+    }
+
+    &.icon-set-door {
+        background-image: url("../images/floorplaneditor/icon-door.png");
+        width: 40px;
+        height: 40px;
+    }
+
+    &.icon-door-direction-0 {
+        background-image: url("../images/floorplaneditor/door-direction-0.png");
+        width: 80px;
+        height: 45px;
+    }
+
+    &.icon-door-direction-1 {
+        background-image: url("../images/floorplaneditor/door-direction-1.png");
+        width: 80px;
+        height: 45px;
+    }
+
+    &.icon-door-direction-2 {
+        background-image: url("../images/floorplaneditor/door-direction-2.png");
+        width: 80px;
+        height: 45px;
+    }
+
+    &.icon-door-direction-3 {
+        background-image: url("../images/floorplaneditor/door-direction-3.png");
+        width: 80px;
+        height: 45px;
+    }
+
+    &.icon-door-direction-4 {
+        background-image: url("../images/floorplaneditor/door-direction-4.png");
+        width: 80px;
+        height: 45px;
+    }
+
+    &.icon-door-direction-5 {
+        background-image: url("../images/floorplaneditor/door-direction-5.png");
+        width: 80px;
+        height: 45px;
+    }
+
+    &.icon-door-direction-6 {
+        background-image: url("../images/floorplaneditor/door-direction-6.png");
+        width: 80px;
+        height: 45px;
+    }
+
+    &.icon-door-direction-7 {
+        background-image: url("../images/floorplaneditor/door-direction-7.png");
+        width: 80px;
+        height: 45px;
+    }
+
     &.spin {
         animation: rotating 1s linear infinite;
     }
diff --git a/src/layout/button/NitroLayoutButton.tsx b/src/layout/button/NitroLayoutButton.tsx
index 0b66a3d0..68ea060f 100644
--- a/src/layout/button/NitroLayoutButton.tsx
+++ b/src/layout/button/NitroLayoutButton.tsx
@@ -7,7 +7,7 @@ export const NitroLayoutButton: FC<NitroLayoutButtonProps> = props =>
 
     const getClassName = useMemo(() =>
     {
-        let newClassName = 'btn';
+        let newClassName = 'd-flex justify-content-center align-items-center btn';
 
         if(variant && variant.length) newClassName += ` btn-${ variant }`;
 
diff --git a/src/views/floorplan-editor/FloorplanEditorView.scss b/src/views/floorplan-editor/FloorplanEditorView.scss
index 8cacb9ff..356af6d1 100644
--- a/src/views/floorplan-editor/FloorplanEditorView.scss
+++ b/src/views/floorplan-editor/FloorplanEditorView.scss
@@ -7,64 +7,4 @@
         height: 300px;
         overflow-x: scroll;
     }
-
-    .tile-options {
-
-        .tile-option {
-            width: 50px;
-            height: 50px;
-
-            &.set-tile {
-                background-image: url("../../assets/images/floorplaneditor/icon-tile-set.png");
-            }
-    
-            &.unset-tile {
-                background-image: url("../../assets/images/floorplaneditor/icon-tile-unset.png");
-            }
-    
-            &.increase-height {
-                background-image: url("../../assets/images/floorplaneditor/icon-tile-up.png");
-            }
-    
-            &.decrease-height {
-                background-image: url("../../assets/images/floorplaneditor/icon-tile-down.png");
-            }
-    
-            &.set-door {
-                background-image: url("../../assets/images/floorplaneditor/icon-door.png");
-            }
-        }
-    }
-
-    .visualization-options {
-        .option {
-            width: 85px;
-            height: 50px;
-            
-            &.door-direction-0 {
-                background-image: url("../../assets/images/floorplaneditor/door-direction-0.png");
-            }
-            &.door-direction-1 {
-                background-image: url("../../assets/images/floorplaneditor/door-direction-1.png");
-            }
-            &.door-direction-2 {
-                background-image: url("../../assets/images/floorplaneditor/door-direction-2.png");
-            }
-            &.door-direction-3 {
-                background-image: url("../../assets/images/floorplaneditor/door-direction-3.png");
-            }
-            &.door-direction-4 {
-                background-image: url("../../assets/images/floorplaneditor/door-direction-4.png");
-            }
-            &.door-direction-5 {
-                background-image: url("../../assets/images/floorplaneditor/door-direction-5.png");
-            }
-            &.door-direction-6 {
-                background-image: url("../../assets/images/floorplaneditor/door-direction-6.png");
-            }
-            &.door-direction-7 {
-                background-image: url("../../assets/images/floorplaneditor/door-direction-7.png");
-            }
-        }
-    }
 }
diff --git a/src/views/floorplan-editor/FloorplanEditorView.tsx b/src/views/floorplan-editor/FloorplanEditorView.tsx
index 4e562b06..49c7dddd 100644
--- a/src/views/floorplan-editor/FloorplanEditorView.tsx
+++ b/src/views/floorplan-editor/FloorplanEditorView.tsx
@@ -3,7 +3,7 @@ import { FC, useCallback, useEffect, useState } from 'react';
 import { LocalizeText } from '../../api';
 import { FloorplanEditorEvent } from '../../events/floorplan-editor/FloorplanEditorEvent';
 import { CreateMessageHook, SendMessageHook, useUiEvent } from '../../hooks';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../layout';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView, NitroLayoutGrid, NitroLayoutGridColumn } from '../../layout';
 import { FloorplanEditor } from './common/FloorplanEditor';
 import { convertNumbersForSaving, convertSettingToNumber } from './common/Utils';
 import { FloorplanEditorContextProvider } from './context/FloorplanEditorContext';
@@ -89,14 +89,14 @@ export const FloorplanEditorView: FC<{}> = props =>
             {isVisible &&
                 <NitroCardView className="nitro-floorplan-editor">
                     <NitroCardHeaderView headerText={LocalizeText('floor.plan.editor.title')} onCloseClick={() => setIsVisible(false)} />
-                    <NitroCardContentView className="text-black">
-                        <FloorplanOptionsView />
-                        <div className="row">
-                            <div className="col">
+                    <NitroCardContentView>
+                        <NitroLayoutGrid>
+                            <NitroLayoutGridColumn size={ 12 }>
+                                <FloorplanOptionsView />
                                 <FloorplanCanvasView />
-                            </div>
-                        </div>
-                        <div className="row justify-content-between mt-2">
+                            </NitroLayoutGridColumn>
+                        </NitroLayoutGrid>
+                        {/* <div className="row justify-content-between mt-2">
                             <div className="btn-group col-auto">
                                 <button className="btn btn-primary">{LocalizeText('floor.plan.editor.reload')}</button>
                             </div>
@@ -105,7 +105,7 @@ export const FloorplanEditorView: FC<{}> = props =>
                                 <button className="btn btn-primary">{LocalizeText('floor.plan.editor.import.export')}</button>
                                 <button className="btn btn-primary" onClick={saveFloorChanges}>{LocalizeText('floor.plan.editor.save')}</button>
                             </div>
-                        </div>
+                        </div> */}
                     </NitroCardContentView>
                 </NitroCardView>
             }
diff --git a/src/views/floorplan-editor/views/FloorplanOptionsView.tsx b/src/views/floorplan-editor/views/FloorplanOptionsView.tsx
index 7c925e67..e15229cc 100644
--- a/src/views/floorplan-editor/views/FloorplanOptionsView.tsx
+++ b/src/views/floorplan-editor/views/FloorplanOptionsView.tsx
@@ -1,10 +1,14 @@
 import { FC, useCallback, useState } from 'react';
 import { LocalizeText } from '../../../api';
-import { NitroCardGridItemView, NitroCardGridView } from '../../../layout';
+import { NitroCardGridItemView, NitroCardGridView, NitroLayoutFlex, NitroLayoutFlexColumn, NitroLayoutGrid, NitroLayoutGridColumn } from '../../../layout';
+import { NitroLayoutBase } from '../../../layout/base';
 import { FloorAction } from '../common/Constants';
 import { FloorplanEditor } from '../common/FloorplanEditor';
 import { useFloorplanEditorContext } from '../context/FloorplanEditorContext';
 
+const MIN_WALL_HEIGHT: number = 0;
+const MAX_WALL_HEIGHT: number = 16;
+
 export const FloorplanOptionsView: FC<{}> = props =>
 {
     const { floorplanSettings = null, setFloorplanSettings = null } = useFloorplanEditorContext();
@@ -18,58 +22,127 @@ export const FloorplanOptionsView: FC<{}> = props =>
 
     const changeDoorDirection = useCallback(() =>
     {
-        const settings = Object.assign({}, floorplanSettings);
-        if(settings.entryPointDir < 7)
-        {
-            ++settings.entryPointDir;
-        }
-        else
-        {
-            settings.entryPointDir = 0;
-        }
+        setFloorplanSettings(prevValue =>
+            {
+                const newValue = Object.assign({}, prevValue);
 
-        setFloorplanSettings(settings);
-    }, [floorplanSettings, setFloorplanSettings]);
+                if(newValue.entryPointDir < 7)
+                {
+                    ++newValue.entryPointDir;
+                }
+                else
+                {
+                    newValue.entryPointDir = 0;
+                }
+
+                return newValue;
+            });
+    }, [ setFloorplanSettings ]);
 
     const onWallHeightChange = useCallback((value: number) =>
     {
-        if(value > 16) value = 16;
-        if(value < 0) value = 0;
+        if(isNaN(value) || (value <= 0)) value = MIN_WALL_HEIGHT;
 
-        const settings = Object.assign({}, floorplanSettings);
+        if(value > MAX_WALL_HEIGHT) value = MAX_WALL_HEIGHT;
 
-        settings.wallHeight = value;
+        setFloorplanSettings(prevValue =>
+            {
+                const newValue = Object.assign({}, prevValue);
 
-        setFloorplanSettings(settings);
-    }, [floorplanSettings, setFloorplanSettings]);
+                newValue.wallHeight = value;
+
+                return newValue;
+            });
+    }, [ setFloorplanSettings ]);
+
+    function increaseWallHeight(): void
+    {
+        let height = (floorplanSettings.wallHeight + 1);
+
+        if(height > MAX_WALL_HEIGHT) height = MAX_WALL_HEIGHT;
+
+        onWallHeightChange(height);
+    }
+
+    function decreaseWallHeight(): void
+    {
+        let height = (floorplanSettings.wallHeight - 1);
+
+        if(height <= 0) height = MIN_WALL_HEIGHT;
+
+        onWallHeightChange(height);
+    }
 
     return (
-        <>
-        <div className="row justify-content-between mb-1">
-            <div className="col-6">
-                <label>{LocalizeText('floor.plan.editor.draw.mode')}</label>
-                <NitroCardGridView className="tile-options">
-                    <NitroCardGridItemView itemActive={floorAction === FloorAction.SET} onClick={() => selectAction(FloorAction.SET)} className="tile-option set-tile" />
-                    <NitroCardGridItemView itemActive={floorAction === FloorAction.UNSET} onClick={() => selectAction(FloorAction.UNSET)} className="tile-option unset-tile" />
-                    <NitroCardGridItemView itemActive={floorAction === FloorAction.UP} onClick={() => selectAction(FloorAction.UP)} className="tile-option increase-height" />
-                    <NitroCardGridItemView itemActive={floorAction === FloorAction.DOWN} onClick={() => selectAction(FloorAction.DOWN)} className="tile-option decrease-height" />
-                    <NitroCardGridItemView itemActive={floorAction === FloorAction.DOOR} onClick={() => selectAction(FloorAction.DOOR)} className="tile-option set-door" />
-                </NitroCardGridView>
-            </div>
-            <div className="col-6">
-                <div className="d-flex w-100 gap-4">
-                    <label>{LocalizeText('floor.plan.editor.enter.direction')}</label>
-                    <label>{LocalizeText('floor.editor.wall.height')}</label>
-                </div>
-                <div className="d-flex w-100 gap-4 visualization-options">
-                    <NitroCardGridItemView className={`option door-direction-${floorplanSettings.entryPointDir}`} onClick={changeDoorDirection}/>
-                    <NitroCardGridItemView className="option"><input type="number" max={16} min={0} step={1} value={floorplanSettings.wallHeight} onChange={event => onWallHeightChange(event.target.valueAsNumber)} id="wallHeight"/></NitroCardGridItemView>
-                </div>
-            </div>
-        </div>
-        <div className="row justify-content-between mb-1">
+        <NitroLayoutGrid className="h-auto">
+            <NitroLayoutGridColumn size={ 5 }>
+                <NitroLayoutFlexColumn gap={ 2 } overflow="hidden">
+                    <NitroLayoutBase className="flex-shrink-0 fw-bold text-black text-truncate">{ LocalizeText('floor.plan.editor.draw.mode') }</NitroLayoutBase>
+                    <NitroCardGridView>
+                        <NitroCardGridItemView itemActive={ (floorAction === FloorAction.SET) } onClick={ event => selectAction(FloorAction.SET) }>
+                            <i className="icon icon-set-tile" />
+                        </NitroCardGridItemView>
+                        <NitroCardGridItemView itemActive={ (floorAction === FloorAction.UNSET) } onClick={ event => selectAction(FloorAction.UNSET) }>
+                            <i className="icon icon-unset-tile" />
+                        </NitroCardGridItemView>
+                        <NitroCardGridItemView itemActive={ (floorAction === FloorAction.UP) } onClick={ event => selectAction(FloorAction.UP) }>
+                            <i className="icon icon-increase-height" />
+                        </NitroCardGridItemView>
+                        <NitroCardGridItemView itemActive={ (floorAction === FloorAction.DOWN) } onClick={ event => selectAction(FloorAction.DOWN) }>
+                            <i className="icon icon-decrease-height" />
+                        </NitroCardGridItemView>
+                        <NitroCardGridItemView itemActive={ (floorAction === FloorAction.DOOR) } onClick={ event => selectAction(FloorAction.DOOR) }>
+                            <i className="icon icon-set-door" />
+                        </NitroCardGridItemView>
+                    </NitroCardGridView>
+                </NitroLayoutFlexColumn>
+            </NitroLayoutGridColumn>
+            <NitroLayoutGridColumn className="align-items-center" size={ 3 }>
+                <NitroLayoutFlexColumn gap={ 2 } overflow="hidden">
+                    <NitroLayoutBase className="flex-shrink-0 fw-bold text-black text-truncate">{ LocalizeText('floor.plan.editor.enter.direction') }</NitroLayoutBase>
+                    <i className={ `icon icon-door-direction-${ floorplanSettings.entryPointDir } cursor-pointer` } onClick={ changeDoorDirection } />
+                </NitroLayoutFlexColumn>
+            </NitroLayoutGridColumn>
+            <NitroLayoutGridColumn className="align-items-center" size={ 3 }>
+                <NitroLayoutFlexColumn gap={ 2 } overflow="hidden">
+                    <NitroLayoutBase className="flex-shrink-0 fw-bold text-black text-truncate">{ LocalizeText('floor.editor.wall.height') }</NitroLayoutBase>
+                    <NitroLayoutFlex className="align-items-center">
+                        <i className="fas fa-caret-left cursor-pointer me-1 text-black" onClick={ decreaseWallHeight } />
+                        <input type="number" className="form-control form-control-sm quantity-input" value={ floorplanSettings.wallHeight } onChange={ event => onWallHeightChange(event.target.valueAsNumber)} />
+                        <i className="fas fa-caret-right cursor-pointer ms-1 text-black" onClick={ increaseWallHeight } />
+                    </NitroLayoutFlex>
+                </NitroLayoutFlexColumn>
+            </NitroLayoutGridColumn>
+        </NitroLayoutGrid>
+    //     <NitroLayoutButton variant="primary" size="sm" onClick={ changeDoorDirection }>
+    //     <i className={ `icon icon-door-direction-${ floorplanSettings.entryPointDir }` } />
+    // </NitroLayoutButton>
+        // <>
+        // <div className="row justify-content-between mb-1">
+        //     <div className="col-6">
+        //         <label>{LocalizeText('floor.plan.editor.draw.mode')}</label>
+        //         <NitroCardGridView className="tile-options">
+        //             <NitroCardGridItemView itemActive={floorAction === FloorAction.SET} onClick={() => selectAction(FloorAction.SET)} className="tile-option set-tile" />
+        //             <NitroCardGridItemView itemActive={floorAction === FloorAction.UNSET} onClick={() => selectAction(FloorAction.UNSET)} className="tile-option unset-tile" />
+        //             <NitroCardGridItemView itemActive={floorAction === FloorAction.UP} onClick={() => selectAction(FloorAction.UP)} className="tile-option increase-height" />
+        //             <NitroCardGridItemView itemActive={floorAction === FloorAction.DOWN} onClick={() => selectAction(FloorAction.DOWN)} className="tile-option decrease-height" />
+        //             <NitroCardGridItemView itemActive={floorAction === FloorAction.DOOR} onClick={() => selectAction(FloorAction.DOOR)} className="tile-option set-door" />
+        //         </NitroCardGridView>
+        //     </div>
+        //     <div className="col-6">
+        //         <div className="d-flex w-100 gap-4">
+        //             <label>{LocalizeText('floor.plan.editor.enter.direction')}</label>
+        //             <label>{LocalizeText('floor.editor.wall.height')}</label>
+        //         </div>
+        //         <div className="d-flex w-100 gap-4 visualization-options">
+        //             <NitroCardGridItemView className={`option door-direction-${floorplanSettings.entryPointDir}`} onClick={changeDoorDirection}/>
+        //             <NitroCardGridItemView className="option"><input type="number" max={16} min={0} step={1} value={floorplanSettings.wallHeight} onChange={event => onWallHeightChange(event.target.valueAsNumber)} id="wallHeight"/></NitroCardGridItemView>
+        //         </div>
+        //     </div>
+        // </div>
+        // <div className="row justify-content-between mb-1">
 
-        </div>
-        </>
+        // </div>
+        // </>
     );
 }