diff --git a/app/assets/stylesheets/space-frontend.scss b/app/assets/stylesheets/space-frontend.scss
index e070390..389eee1 100644
--- a/app/assets/stylesheets/space-frontend.scss
+++ b/app/assets/stylesheets/space-frontend.scss
@@ -3,14 +3,30 @@
 // space-box
 .overlay {
   position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 .s-space.show-space .selection-box-label.absolute-center{
   display: none;
 }
+.fa.fa-map-marker{
+  font-size: 8vw;
+}
+.anchor{
+  position: absolute;
+  left: 20%;
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 1em 1em 0 1em;
+  border-color: #2196f3 transparent transparent transparent;
+}
 .s-space.show-space .selection-box-label.absolute-center.active{
   display: block;
   position: absolute;
   bottom: 110%;
+  bottom: calc(100% + 0.8em);
   left: 0%;
   background: #2196F3;
   color: white;
@@ -31,4 +47,28 @@
     // overflow: hidden;
     transform: translate(-50%, -50%);
   }
+}
+.w-ad-banner__pager-wrap.w-ad-banner__page--active .w-ad-banner__pager.external {
+  display: none;
+}
+.w-ad-banner__pager-wrap.w-ad-banner__page--active.active .w-ad-banner__pager.external {
+  display: table;
+  width: 100%;
+}
+.w-ad-banner__pager.external img {
+  display: inline-block;
+  width: 100%;
+}
+.bundle-button{
+  padding-bottom: 1em;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.fa.fa-times{
+  background: #e4225d;
+  color: white;
+  padding: 0.2em;
+  float: right;
+  cursor: pointer;
 }
\ No newline at end of file
diff --git a/app/assets/stylesheets/spaces.scss b/app/assets/stylesheets/spaces.scss
index 2012eb6..84cc434 100644
--- a/app/assets/stylesheets/spaces.scss
+++ b/app/assets/stylesheets/spaces.scss
@@ -360,15 +360,31 @@
   width: 2px;
   height: 2px;
   cursor: pointer;
-
-  .selection-box-label {
-    box-sizing: border-box;
-    font-family: $main-font;
-    min-width: calc(100% + 4px);
-    color: $white;
-    background-color: rgba($main-color, 0.9);
-    padding: 5px 8px;
-    white-space: nowrap;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .selection-box-label.absolute-center{
+    display: none;
+  }
+  .anchor{
+    position: absolute;
+    left: 20%;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 1em 1em 0 1em;
+    border-color: #2196f3 transparent transparent transparent;
+  }
+  .s-space.show-space .selection-box-label.absolute-center.active{
+    display: block;
+    position: absolute;
+    bottom: 110%;
+    bottom: calc(100% + 0.8em);
+    left: 0%;
+    background: #2196F3;
+    color: white;
+    width: 100%;
+    padding: 0.2em;
   }
 }
 
@@ -461,4 +477,28 @@ ul#layout-canvas {
 
 .floor-unit-title {
   text-align: center;
+}
+.w-ad-banner__pager-wrap.w-ad-banner__page--active .w-ad-banner__pager.external {
+  display: none;
+}
+.w-ad-banner__pager-wrap.w-ad-banner__page--active.active .w-ad-banner__pager.external {
+  display: table;
+  width: 100%;
+}
+.w-ad-banner__pager.external img {
+  display: inline-block;
+  width: 100%;
+}
+.bundle-button{
+  padding-bottom: 1em;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.fa.fa-times{
+  background: #e4225d;
+  color: white;
+  padding: 0.2em;
+  float: right;
+  cursor: pointer;
 }
\ No newline at end of file
diff --git a/app/controllers/spaces_controller.rb b/app/controllers/spaces_controller.rb
index 58208e2..5c84388 100644
--- a/app/controllers/spaces_controller.rb
+++ b/app/controllers/spaces_controller.rb
@@ -34,8 +34,11 @@ class SpacesController < ApplicationController
     floor = Floor.where(:uid => params[:uid]).first rescue nil
     thumb_image = (!floor.frontend_image.thumb.url.nil? ? floor.frontend_image.thumb.url : "/assets/default-floor.jpg")
     image = (!floor.frontend_image.mobile.url.nil? ? floor.frontend_image.mobile.url : "#")
-      page = Page.where(:page_id => params[:page_id]).first
-
+    page = Page.where(:page_id => params[:page_id]).first
+    site = Site.first
+    hover_color = (site.orbit_bar_submenu_background_color rescue nil) || 'null'
+    bg_color = (site.orbit_bar_background_color rescue nil) || 'null'
+    block_color = hex2rgba((site.orbit_bar_submenu_background_color rescue nil),0.3) || 'null'
     {
       "floor-title" => floor.title,
       "floor-frontend-image-thumb" => thumb_image,
@@ -44,7 +47,11 @@ class SpacesController < ApplicationController
       "building-back-link" => "/" + I18n.locale.to_s + page.url,
       "floor-layout" => floor.layout,
       "floor-id" => floor.id.to_s,
-      "page-id" => page.page_id
+      "page-id" => page.page_id,
+      "hover_color" => hover_color,
+      "bg_color" => bg_color,
+      "block_color" => block_color,
+      "style_label" => style_label(bg_color,site.orbit_bar_text_color)
     }
   end
 
@@ -88,12 +95,20 @@ class SpacesController < ApplicationController
     page = Page.where(:page_id => params[:page_id]).first
     layout = unit.layout.nil? ? "<div id='full-layout-canvas'><img href='<%= unit.layout_image.url %>' id='layout-image'></div>" : unit.layout
     backlink = unit.floor.layout.nil? ? "/" + I18n.locale.to_s + page.url : "/" + I18n.locale.to_s + page.url + "/#{unit.floor.to_param}"
+    site = Site.first
+    hover_color = (site.orbit_bar_submenu_background_color rescue nil) || 'null'
+    bg_color = (site.orbit_bar_background_color rescue nil) || 'null'
+    block_color = hex2rgba((site.orbit_bar_submenu_background_color rescue nil),0.3) || 'null'
     {
       "unit-title" => unit.title,
       "floor-back-link" => backlink,
       "unit-layout" => layout,
       "unit-id" => unit.id.to_s,
-      "page-id" => page.page_id
+      "page-id" => page.page_id,
+      "hover_color" => hover_color,
+      "bg_color" => bg_color,
+      "block_color" => block_color,
+      "style_label" => style_label(bg_color,site.orbit_bar_text_color)
     }
   end
 
@@ -111,10 +126,39 @@ class SpacesController < ApplicationController
     {
       "unit-images" => images,
       "extras" => {
-        "unit-title" => unit.title
+        "unit-title" => unit.title,
+        "content" => unit.content || ''
       }
     }
   end
+
+  private
+  def hex2rgba(my_hex,percent=1)
+    if my_hex
+      if my_hex[0] == '#'
+        my_hex = my_hex[1..-1]
+      end
+      rgb = my_hex.split(//).each_slice(my_hex.length/3).map{|v| v.join.to_i(16)}
+      "rgba(#{rgb[0]},#{rgb[1]},#{rgb[2]},#{percent})"
+    else
+      nil
+    end
+  end
+  def style_label(color1,color2)
+    if color1
+      "<style>
+        .s-space.show-space .selection-box-label.absolute-center.active{
+          background: #{color1} !important;
+          color: #{color2} !important;
+        }
+        .overlay .anchor{
+          border-color: #{color1} transparent transparent transparent !important;
+        }
+      </style>"
+    else
+      ""
+    end
+  end
 end
 
 
diff --git a/modules/space/show.html.erb b/modules/space/show.html.erb
index db27d77..c3ce324 100644
--- a/modules/space/show.html.erb
+++ b/modules/space/show.html.erb
@@ -17,11 +17,13 @@
   </div>
 </article>
 <div id="space-for-ad-banner"></div>
+{{style_label}}
 <script>
   (function() {
-    var canvas = $("#full-layout-canvas");
-    var layoutImage = $("#layout-image");
-    var cover = canvas.find(".image-cover");
+    var layout = $(".s-space__apartment-layout").eq(-1)
+    var canvas = layout.find("#full-layout-canvas");
+    var layoutImage =layout.find("#layout-image");
+    var cover = canvas.eq(-1).find(".image-cover");
     var pxToDeduct = (Modernizr.touch ? 157 : 257);
     var windowHeight = ($(window).height() - pxToDeduct);
     var coverImageHeight = (parseInt(windowHeight));
@@ -32,21 +34,22 @@
     var $closeBtn = $('<div class="s-space__close-btn btn-close"><i class="fa fa-times"></i></div>');
     var floorId = "{{floor-id}}";
     var pageId = "{{page-id}}";
-    var spaceForAdBanner = $("#space-for-ad-banner");
+    var spaceForAdBanner = layout.parents('.s-space.show-space').next('#space-for-ad-banner');
     var loading = $("div.loading-cover");
     var $controlBtn = null;
     var $controlIcon = null;
     var $collapse = null;
-    
-    canvas.height(windowHeight);
-    cover.height(coverImageHeight);
-    layoutImage.height(coverImageHeight);
+    var active_color = '{{hover_color}}' || '#e84c3d';
+    var map_color = '{{bg_color}}' || '#00a8f3';
+    var block_color = '{{block_color}}' || 'rgba(0,0,0,0.4)';
+    canvas.css('height','');
+    cover.css('height','');
+    cover.css('width','');
+    layoutImage.css('height','');
+    layoutImage.css('width','100%');
 
     tmpImg.src = layoutImage.attr('src') ;
-    tmpImg.onload = function() {
-      cover.width(layoutImage.width());
-    };
-
+    spaceForAdBanner.hide()
     $('.selection-box-btn-holder').remove();
 
     $.ajax({
@@ -65,23 +68,35 @@
           temp.find('.pulse').remove();
         }
         var text = $(this).find('.selection-box-label.absolute-center')
-        temp.prepend('<img src="/assets/space-p1.png">')
+        text.append('<div class="anchor"></div>')
+        temp.prepend('<i class="fa fa-map-marker"></i>')
+        temp.find('.fa-map-marker').css('color',map_color)
+        $(this).on('mouseover',function(){
+          $(this).css('background-color',block_color)
+        })
+        $(this).on('mouseleave',function(){
+          var pin_link = $(this).find('.s-space__pin-link')
+          if (!pin_link.is(':focus')){
+            $(this).find('.selection-box-label.absolute-center').removeClass('active')
+            inactive_map(pin_link)
+          }
+        })
         temp.on('focus',function(){
           $(this).parents('.selection-box.overlay').find('.selection-box-label.absolute-center').addClass('active')
-          $(this).find('img').attr('src','/assets/space-p2.png')
+          active_map(this)
         })
         temp.on('mouseover',function(){
           $(this).parents('.selection-box.overlay').find('.selection-box-label.absolute-center').addClass('active')
-          $(this).find('img').attr('src','/assets/space-p2.png')
+          active_map(this)
         })
         temp.on('blur',function(){
           $(this).parents('.selection-box.overlay').find('.selection-box-label.absolute-center').removeClass('active')
-          $(this).find('img').attr('src','/assets/space-p1.png')
+          inactive_map(this)
         })
         temp.on('mouseleave',function(){
           if (!$(this).is(':focus')){
             $(this).parents('.selection-box.overlay').find('.selection-box-label.absolute-center').removeClass('active')
-            $(this).find('img').attr('src','/assets/space-p1.png')
+            inactive_map(this)
           }
         })
         //temp.prepend($(this).find('.selection-box-label.absolute-center'))
@@ -99,10 +114,10 @@
           dataType : "html",
           type : "get"
         }).done(function(data){
-          var template = $(data).find('#main-content')
+          var template = $($(data).find('#main-content').html())
           template.find('.s-space__back-btn-wrap').hide()
           createAdbanner(template);
-          $("#space-for-ad-banner").show()
+          spaceForAdBanner.show()
           $closeBtn
             .on('click', destroyAdbanner)
             .prependTo(template);
@@ -188,9 +203,11 @@
     };
 
     function destroyAdbanner() {
-      $slideshow.cycle('destroy');
+      if ($slideshow){
+        $slideshow.cycle('destroy');
+      }
       $closeBtn.remove();
-      $('#space-for-ad-banner')
+      spaceForAdBanner
         .children()
         .remove()
         .end()
@@ -198,5 +215,13 @@
 
       $(document).off('keyup.adbanner');
     }
+    function active_map(ele){
+      $(ele).find('.fa-map-marker').css('color',active_color)
+      $(ele).parents('.selection-box.overlay').eq(0).css('background-color',block_color)
+    }
+    function inactive_map(ele){
+      $(ele).find('.fa-map-marker').css('color',map_color)
+      $(ele).parents('.selection-box.overlay').eq(0).css('background-color','')
+    }
   }());
 </script>
\ No newline at end of file
diff --git a/modules/space/showcase.html.erb b/modules/space/showcase.html.erb
index 7ddfb9b..d022198 100644
--- a/modules/space/showcase.html.erb
+++ b/modules/space/showcase.html.erb
@@ -1,29 +1,3 @@
-<style type="text/css">
-  .w-ad-banner__pager-wrap.w-ad-banner__page--active .w-ad-banner__pager.external {
-    display: none;
-  }
-  .w-ad-banner__pager-wrap.w-ad-banner__page--active.active .w-ad-banner__pager.external {
-    display: table;
-    width: 100%;
-  }
-  .w-ad-banner__pager.external img {
-    display: inline-block;
-    width: 100%;
-  }
-  .bundle-button{
-    padding-bottom: 1em;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-  }
-  .fa.fa-times{
-    background: #e4225d;
-    color: white;
-    padding: 0.2em;
-    float: right;
-    cursor: pointer;
-  }
-</style>
 <div class="w-ad-banner ad-banner-widget-1 s-showcase">
   <div class="w-ad-banner__pager-wrap w-ad-banner__page--active">
     <h2 class="w-ad-banner__widget-title">{{unit-title}}</h2>
@@ -57,4 +31,7 @@
         <img class="w-ad-banner__image banner-responsive" src="{{image-url}}" alt="{{alt-image}}">
     </div>
   </div>
+  <div class="content">
+    {{content}}
+  </div>
 </div>
\ No newline at end of file
diff --git a/modules/space/unit.html.erb b/modules/space/unit.html.erb
index d444b7e..9e9c230 100644
--- a/modules/space/unit.html.erb
+++ b/modules/space/unit.html.erb
@@ -12,12 +12,13 @@
   </div>
 </article>
 <div id="space-for-ad-banner"></div>
-
+{{style_label}}
 <script>
   (function() {
-    var canvas = $("#full-layout-canvas");
-    var layoutImage = $("#layout-image");
-    var cover = canvas.find(".image-cover");
+    var layout = $(".s-space__apartment-layout").eq(-1)
+    var canvas = layout.find("#full-layout-canvas");
+    var layoutImage = layout.find("#layout-image");
+    var cover = canvas.eq(-1).find(".image-cover");
     var pxToDeduct = (Modernizr.touch ? 157 : 257);
     var windowHeight = ($(window).height() - pxToDeduct);
     var coverImageHeight = (parseInt(windowHeight));
@@ -28,20 +29,23 @@
     var $closeBtn = $('<div class="s-space__close-btn btn-close"><i class="fa fa-times"></i></div>');
     var unitId = "{{unit-id}}";
     var pageId = "{{page-id}}";
-    var spaceForAdBanner = $("#space-for-ad-banner");
+    var spaceForAdBanner = layout.parents('.s-space.show-space').next('#space-for-ad-banner');
     var loading = $("div.loading-cover");
     var $controlBtn = null;
     var $controlIcon = null;
     var $collapse = null;
-    
+    var active_color = '{{hover_color}}' || '#e84c3d';
+    var map_color = '{{bg_color}}' || '#00a8f3';
+    var block_color = '{{block_color}}' || 'rgba(0,0,0,0.4)';
     canvas.css('height','');
-    cover.css('height','')
+    cover.css('height','');
+    cover.css('width','');
     layoutImage.css('height','');
     layoutImage.css('width','100%');
 
     tmpImg.src = layoutImage.attr('src') ;
     cover.css('width','');
-
+    spaceForAdBanner.hide()
     $('.selection-box-btn-holder').remove();
 
     $.ajax({
@@ -63,23 +67,36 @@
           temp.find('.pulse').remove();
         }
         var text = $(this).find('.selection-box-label.absolute-center')
-        temp.prepend('<img src="/assets/space-p1.png">')
+        text.append('<div class="anchor"></div>')
+        temp.prepend('<i class="fa fa-map-marker"></i>')
+        temp.find('.fa-map-marker').css('color',map_color)
+        $(this).find('.selection-box.overlay')
+        $(this).on('mouseover',function(){
+          $(this).css('background-color',block_color)
+        })
+        $(this).on('mouseleave',function(){
+          var pin_link = $(this).find('.s-space__pin-link')
+          if (!pin_link.is(':focus')){
+            $(this).find('.selection-box-label.absolute-center').removeClass('active')
+            inactive_map(pin_link)
+          }
+        })
         temp.on('focus',function(){
           $(this).parents('.selection-box.overlay').find('.selection-box-label.absolute-center').addClass('active')
-          $(this).find('img').attr('src','/assets/space-p2.png')
+          active_map(this)
         })
         temp.on('mouseover',function(){
           $(this).parents('.selection-box.overlay').find('.selection-box-label.absolute-center').addClass('active')
-          $(this).find('img').attr('src','/assets/space-p2.png')
+          active_map(this)
         })
         temp.on('blur',function(){
           $(this).parents('.selection-box.overlay').find('.selection-box-label.absolute-center').removeClass('active')
-          $(this).find('img').attr('src','/assets/space-p1.png')
+          inactive_map(this)
         })
         temp.on('mouseleave',function(){
           if (!$(this).is(':focus')){
             $(this).parents('.selection-box.overlay').find('.selection-box-label.absolute-center').removeClass('active')
-            $(this).find('img').attr('src','/assets/space-p1.png')
+            inactive_map(this)
           }
         })
         //temp.prepend($(this).find('.selection-box-label.absolute-center'))
@@ -99,7 +116,7 @@
         }).done(function(data){
           var template = $(data)
           createAdbanner(template);
-          $("#space-for-ad-banner").show()
+          spaceForAdBanner.show()
           $closeBtn
             .on('click', destroyAdbanner)
             .prependTo(template);
@@ -185,9 +202,11 @@
     };
 
     function destroyAdbanner() {
-      $slideshow.cycle('destroy');
+      if ($slideshow){
+        $slideshow.cycle('destroy');
+      }
       $closeBtn.remove();
-      $('#space-for-ad-banner')
+      spaceForAdBanner
         .children()
         .remove()
         .end()
@@ -195,5 +214,13 @@
 
       $(document).off('keyup.adbanner');
     }
+    function active_map(ele){
+      $(ele).find('.fa-map-marker').css('color',active_color)
+      $(ele).parents('.selection-box.overlay').eq(0).css('background-color',block_color)
+    }
+    function inactive_map(ele){
+      $(ele).find('.fa-map-marker').css('color',map_color)
+      $(ele).parents('.selection-box.overlay').eq(0).css('background-color','')
+    }
   }());
 </script>
\ No newline at end of file