diff --git a/app/assets/javascripts/admin/categories.js b/app/assets/javascripts/admin/categories.js
new file mode 100644
index 000000000..1e5958c7d
--- /dev/null
+++ b/app/assets/javascripts/admin/categories.js
@@ -0,0 +1 @@
+//= require lib/arrow-on-list-edit
\ No newline at end of file
diff --git a/app/assets/javascripts/basic/orbit_js_1.0.1.js b/app/assets/javascripts/basic/orbit_js_1.0.1.js
index 49b8a1417..904a319e8 100644
--- a/app/assets/javascripts/basic/orbit_js_1.0.1.js
+++ b/app/assets/javascripts/basic/orbit_js_1.0.1.js
@@ -496,25 +496,8 @@ var ini = function() {
 
 // Open Slide
 function openSlide() {
-    var $openSlide = $('.open-slide'),
-        $pageslideW;
-
-    $(window).width() > 1440 ? $pageslideW = 1024 : $pageslideW = 954;
-    $(window).resize(function() {
-        $(this).width() > 1440 ? $pageslideW = 1024 : $pageslideW = 954;
-    })
-    if($('.item-groups').length) {
-        $os = $openSlide.not('.view-page');
-        $vp = $openSlide.filter('.view-page.open-slide');
-        $os.pageslide({ W: 624 });
-        $vp.pageslide({ W: $pageslideW, iframe: true });
-    } else {
-         $openSlide.pageslide();
-    };
-    $('.bottomnav .open-slide').on('click', function() {
-        $('.table tr').removeClass('active');
-        $('.filter-item').removeClass('active')
-    });
+    var $openSlide = $('.open-slide');
+    typeof customOpenSlide === 'function' ? customOpenSlide($openSlide) : $openSlide.pageslide();
 }
 
 function formTip() {
diff --git a/app/assets/javascripts/lib/arrow-on-list-edit.js b/app/assets/javascripts/lib/arrow-on-list-edit.js
new file mode 100644
index 000000000..19ed8cb3b
--- /dev/null
+++ b/app/assets/javascripts/lib/arrow-on-list-edit.js
@@ -0,0 +1,9 @@
+$(function() {
+  $.pageslide.closeCallback(function(pageslide, item) {
+    $("tr").removeClass("active");
+  });
+  $.pageslide.loadComplete(function(pageslide, item) {
+    $("tr").removeClass("active");
+    item.closest('tr').addClass('active');
+  });
+})
\ No newline at end of file
diff --git a/app/assets/javascripts/lib/items/items.js.erb b/app/assets/javascripts/lib/items/items.js.erb
index b0af68131..5a687a549 100644
--- a/app/assets/javascripts/lib/items/items.js.erb
+++ b/app/assets/javascripts/lib/items/items.js.erb
@@ -32,8 +32,242 @@ function touchSupport() {
     })
   }
 }
+function customOpenSlide() {
+  var $openSlide = $('.open-slide'),
+      $pageslideW;
+
+  $(window).width() > 1440 ? $pageslideW = 1024 : $pageslideW = 954;
+  $(window).resize(function() {
+      $(this).width() > 1440 ? $pageslideW = 1024 : $pageslideW = 954;
+  });
+  $noiFrame = $openSlide.not('.view-page');
+  $iFrame = $openSlide.filter('.view-page.open-slide');
+
+  $noiFrame.pageslide({
+    W: 314,
+    openFn: function(pageslide, element) {
+      element.addClass('active')
+             .closest('.item-menu')
+             .css('display', 'inline-block')
+             .closest('.navbar-inner')
+             .addClass('active');
+    },
+    closeFn: function(pageslide, element) {
+      element.removeClass('active')
+             .closest('.navbar-inner')
+             .removeClass('active');
+    },
+    loadComplete: function(pageslide, element) {
+      $openSlide.removeClass('active');
+      $('.navbar-inner').removeClass('active');
+      element.addClass('active').closest('.navbar-inner').addClass('active');
+      var _id = element.data('id'),
+          _type = element.hasClass('page') ? 'page' : 'link',
+          _edit = element.hasClass('edit') ? true : false;
+
+      if(_id !== 'new') {
+        $('#pageslide form').attr({
+          'action': $('#pageslide form').attr('action') + '/' + _id,
+          'id': 'edit_' + _type + '_' + _id
+        });
+      };
+      _type == 'page' ? pageSetting(element.data('id'), _edit) : '';
+    }
+  });
+  $iFrame.pageslide({
+    W: $pageslideW,
+    iframe: true,
+    openFn: function(pageslide, element) {
+      element.addClass('active')
+             .closest('.item-menu')
+             .css('display', 'inline-block')
+             .closest('.navbar-inner')
+             .addClass('active');
+    },
+    closeFn: function(pageslide, element) {
+      element.removeClass('active')
+             .closest('.navbar-inner')
+             .removeClass('active');
+      $('#main-wrap').css('width', 'auto')
+    },
+    loadComplete: function(pageslide, element) {
+      $openSlide.removeClass('active');
+      $('.navbar-inner').removeClass('active');
+      element.addClass('active').closest('.navbar-inner').addClass('active');
+      pageslide.find('.content').css('padding', 0);
+    }
+  });
+}
+
+function pageSetting(id, edit) {
+  $pageModule = $('#page_module_app_id'),
+  $pageF2E = $('#page_app_frontend_url'),
+  $pageDesign = $('#page_design'),
+  $pageTheme = $('#page_theme_id'),
+  $pageCategory = $('#page-category'),
+  $pageTags = $('#page-tags');
+  if(edit) {
+    $.ajax({
+      url: 'page-setting.json',
+      type: 'POST',
+      contentType: "application/json; charset=utf-8",
+      dataType: 'json',
+      data: '{"id": ' + id + '}',
+      cache: false,
+    })
+    .done(function(data) {
+      _selectData = data;
+      $.each(_pageData.design, function(index, val) {
+        $pageDesign.append('<option value="' + val.main[1] + '" ' + (val.main[1] == _selectData.design.main ? 'selected="selected"' : '') + '>' + val.main[0] + '</option>');
+        if(val.main[1] == _selectData.design.main) {
+          $.each(val.sub, function(index, val) {
+            $pageTheme.append('<option value="' + $(this)[1] + '" ' + ($(this)[1] == _selectData.design.sub ? 'selected="selected"' : '') + '>' + $(this)[0]+ '</option>')
+          });
+        };
+      });
+      $.each(_pageData.module, function(index, val) {
+        $pageModule.append('<option value="' + val.main[1] + '" ' + (val.main[1] == _selectData.module.main ? 'selected="selected"' : '') + '>' + val.main[0] + '</option>');
+        if(val.main[1] == _selectData.module.main) {
+          $.each(val.sub, function(index, val) {
+            $pageF2E.append('<option value="' + $(this)[1] + '" ' + ($(this)[1] == _selectData.module.sub ? 'selected="selected"' : '') + '>' + $(this)[0]+ '</option>')
+          });
+          $.each(val.category, function(index, val) {
+            var _arr = $.inArray($(this)[1], _selectData.module.category[1]);
+            $pageCategory.append('<label class="checkbox"><input type="checkbox" name="page[category][]" value="'+ $(this)[1] + '">'+ $(this)[0] +'</label>');
+            if(!_selectData.module.category[0] && _arr !== -1) {
+              $pageCategory.find('input[type="checkbox"]').eq(index).prop('checked', true);
+            }
+            _selectData.module.category[0] ? $pageCategory.siblings('.checkbox').children('.select_all').prop('checked', true) : '';
+          });
+          $.each(val.tags, function(index, val) {
+            var _arr = $.inArray($(this)[1], _selectData.module.tags[1]);
+            $pageTags.append('<label class="checkbox"><input type="checkbox" name="page[tag][]" value="'+ $(this)[1] + '">'+ $(this)[0] +'</label>');
+            if(!_selectData.module.tags[0] && _arr !== -1) {
+              $pageTags.find('input[type="checkbox"]').eq(index).prop('checked', true);
+            }
+            _selectData.module.tags[0] ? $pageTags.siblings('.checkbox').children('.select_all').prop('checked', true) : '';
+          });
+        };
+      });
+      changeSetting(true);
+    })
+    .fail(function(jqXHR, textStatus) {
+      console.log(jqXHR.status, textStatus)
+      var $errorMsg = '<div class="error"><div class="msg"><i class="icons-warning"></i><p>Sorry! Something is wrong</p></div></div>'
+      $('#pageslide .view-page').append($errorMsg);
+    });
+  } else {
+    $.each(_pageData.design, function(index, val) {
+      $pageDesign.append('<option value="' + val.main[1] + '">' + val.main[0] + '</option>');
+      if(index == 0) {
+        $.each(val.sub, function(index, val) {
+          $pageTheme.append('<option value="' + $(this)[1] + '">' + $(this)[0]+ '</option>')
+        });
+      };
+    });
+    $.each(_pageData.module, function(index, val) {
+      $pageModule.append('<option value="' + val.main[1] + '">' + val.main[0] + '</option>');
+      if(index == 0) {
+        $.each(val.sub, function(index, val) {
+          $pageF2E.append('<option value="' + $(this)[1] + '">' + $(this)[0]+ '</option>')
+        });
+        $.each(val.category, function(index, val) {
+          $pageCategory.append('<label class="checkbox"><input type="checkbox" name="page[category][]" value="'+ $(this)[1] + '">'+ $(this)[0] +'</label>');
+        });
+        $.each(val.tags, function(index, val) {
+          $pageTags.append('<label class="checkbox"><input type="checkbox" name="page[tag][]" value="'+ $(this)[1] + '">'+ $(this)[0] +'</label>');
+        });
+      };
+    });
+    changeSetting(false);
+  };
+};
+
+function changeSetting(boolean) {
+  $('#pageslide').on('change', '.change', function(event) {
+    var _data, _select, _subData, $subSelete;
+
+    if(event.target.id == 'page_design') {
+      _data = _pageData.design;
+      _select = boolean ? _selectData.design : null;
+      _subData = 'template';
+      $subSelete = $('#page_theme_id');
+    } else {
+      _data = _pageData.module;
+      _select = boolean ? _selectData.module : null;
+      _subData = 'module';
+      $subSelete = $('#page_app_frontend_url');
+    };
+    $(this).children("option:selected").each(function () {
+      var _val = $(this).val();
+      $subSelete.empty();
+      $.each(_data, function(index, val) {
+        if(_val == val.main[1]) {
+          $.each(val.sub, function(index, val) {
+            var _selected = _select && $(this)[1] == _select.sub ? 'selected="selected"' : '';
+            $subSelete.append('<option value="' + $(this)[1] + '" ' + _selected + '>' + $(this)[0] + '</option>');
+          });
+          if(event.target.id == 'page_module_app_id') {
+            $pageCategory.empty();
+            $pageTags.empty();
+            $('.select_all').prop('checked', false)
+            $.each(val.category, function(index, val) {
+              if(val !== 0) {
+                $('#page-category-groups').slideDown(300);
+                var _arr = _select ? $.inArray($(this)[1], _select.category[1]) : '';
+                $pageCategory.append('<label class="checkbox"><input type="checkbox" name="page[category][]" value="'+ $(this)[1] + '">'+ $(this)[0] +'</label>');
+                if(_select && !_select.category[0] && _arr !== -1) {
+                  $pageCategory.find('input[type="checkbox"]').eq(index).prop('checked', true);
+                }
+                _select && _val == _select.main && _select.category[0] ? $pageCategory.siblings('.checkbox').children('.select_all').prop('checked', true) : '';
+              } else {
+                $('#page-category-groups').slideUp(300);
+              }
+            });
+            $.each(val.tags, function(index, val) {
+              if(val !== 0) {
+                $('#page-tags-groups').slideDown(300);
+                var _arr = _select ? $.inArray($(this)[1], _select.tags[1]) : '';
+                $pageTags.append('<label class="checkbox"><input type="checkbox" name="page[tag][]" value="'+ $(this)[1] + '">'+ $(this)[0] +'</label>');
+                if(_select && !_select.tags[0] && _arr !== -1) {
+                  $pageTags.find('input[type="checkbox"]').eq(index).prop('checked', true);
+                }
+                _select && _val == _select.main && _select.tags[0] ? $pageTags.siblings('.checkbox').children('.select_all').prop('checked', true) : '';
+              } else {
+                $('#page-tags-groups').slideUp(300);
+              }
+            });
+          }
+          return false;
+        };
+      });
+    });
+    event.preventDefault();
+  });
+  $('#pageslide').on('change', '.checkbox-groups input[type="checkbox"]', function(event) {
+    if($(this).hasClass('select_all') && $(this).prop('checked')) {
+      $(this).closest('.checkbox').siblings('.groups').find('input[type="checkbox"]').prop('checked', false);
+    } else if($(this).prop('checked')) {
+      $(this).closest('.groups').siblings('.checkbox').find('.select_all').prop('checked', false);
+    }
+    event.preventDefault();
+  });
+}
+function getPageData() {
+  $.getJSON('page-design-module.json').done(function(data) {
+    _pageData = data;
+  });
+}
 
 $(function(){
+  var $pageModule = null,
+      $pageF2E = null,
+      $pageDesign = null,
+      $pageTheme = null,
+      $pageCategory = null,
+      $pageTags = null;
+      _pageData = null;
+      _selectData = null;
   $('.sortable').nestedSortable({
     handle: '.brand',
     items: 'li',
@@ -69,11 +303,12 @@ $(function(){
   tip();
   touchSupport()
   itemsQuantity();
+  getPageData();
 });
 
 function reloadStructure(){
   $.pageslide.close();
-  openSlide();
+  customOpenSlide();
   tip();
   touchSupport()
   itemsQuantity();
diff --git a/app/assets/javascripts/lib/pageslide.js b/app/assets/javascripts/lib/pageslide.js
new file mode 100644
index 000000000..93f228279
--- /dev/null
+++ b/app/assets/javascripts/lib/pageslide.js
@@ -0,0 +1,286 @@
+!function ($) {
+  // Convenience vars for accessing elements
+  var _html = '<div id="pageslide"><div class="page-title clearfix"><a class="pull-right" href="javascript:$.pageslide.close()"><i class="icons-arrow-left-2"/></a><span/></div><div class="view-page"><div class="nano"><div class="content"/></div></div></div>',
+      $body = $('#main-wrap'),
+      $bottomNav = $('.bottomnav'),
+      $pageslide = $(_html).css('display', 'none').appendTo( $body ),
+      $element;
+
+  var _sliding = false,   // Mutex to assist closing only once
+      _lastCaller;        // Used to keep track of last element to trigger pageslide
+  // $(window).resize(function(event) {
+  //   if($pageslide.is(':visible')) {
+  //     console.log("ddd")
+  //     $pageslide.find('.nano').height($('body').height() - $('#orbit-bar').height() - $pageslide.find('.page-title').outerHeight(true));
+  //   }
+  // });
+
+  function _load(settings) {
+    // Are we loading an element from the page or a URL?
+    if ( settings.href.indexOf("#") === 0 ) {                
+      // Load a page element                
+      $(settings.href).clone(true).appendTo($pageslide.find('.content')).show();
+      if(settings.loadComplete)settings.loadComplete.call(this, $pageslide, $element);
+      $pageslide.find('.nano').nanoScroller({ scrollTop: 0, iOSNativeScrolling: true });
+    } else {
+      // Load a URL. Into an iframe?
+      if(settings.iframe) {
+        var iframe = $("<iframe />").attr({
+                                        src: settings.href,
+                                        frameborder: 0,
+                                        hspace: 0
+                                      })
+                                      .css({
+                                        width: "100%",
+                                        height: "100%"
+                                      });
+        $pageslide.find('.content').html(iframe).show();
+        if(settings.loadComplete)settings.loadComplete.call(this, $pageslide, $element);
+      } else {
+        $pageslide.find('.content').load(settings.href, function(response, status, xhr){
+          if(status == 'success') {
+            $pageslide.show();
+            if(settings.loadComplete)settings.loadComplete.call(this, $pageslide, $element);
+            $pageslide.find('.nano').nanoScroller({ scrollTop: 0, iOSNativeScrolling: true });
+          } else {
+            var msg = '<div style="text-align: center;"><i class="icons-warning" style="font-size: 5em;"></i><h4>Oops!</h4>System may be wrong<br/> or please try again later</div>'
+            $pageslide.find('.content').html(msg);
+          }
+        });
+      }
+      $pageslide.data( 'localEl', false );
+    }
+
+    if(settings.pageTitle) {
+      $pageslide.find('.page-title').show().children('span').text(settings.pageTitle);
+      $pageslide.find('.view-page').css('top', 48);
+    } else {
+      $pageslide.find('.page-title').hide();
+      $pageslide.find('.view-page').css('top', 0);
+    }
+  }
+
+
+  
+  // Function that controls opening of the pageslide
+  function _start(settings) {
+    var slideWidth = $pageslide.outerWidth(true),
+        bodyMove = $sidebarState && !$('.item-groups').length ? slideWidth - 241 : settings.direction == 'right' ? slideWidth - 61 : slideWidth,
+        bodyAnimateIn = {},
+        bottomnavAnimateIn = {},
+        slideAnimateIn = {};
+    
+    // If the slide is open or opening, just ignore the call
+    if($pageslide.is(':visible') || _sliding) return;         
+    _sliding = true;
+                                  
+    switch(settings.direction) {
+      case 'left':
+        $pageslide.css({left: 'auto', right: '-' + slideWidth + 'px'});
+        bodyAnimateIn['padding-right'] = '+=' + bodyMove;
+        slideAnimateIn['right'] = '+=' + slideWidth;
+        break;
+      default:
+        $pageslide.css({left: '-' + slideWidth + 'px', right: 'auto'});
+        bodyAnimateIn['margin-left'] = '+=' + bodyMove;
+        bottomnavAnimateIn['left'] = '+=' + bodyMove;
+        if($(window).width() <= 1440 && slideWidth > 963 ) {
+            bodyAnimateIn['width'] = $body.width();
+        }
+        slideAnimateIn['left'] = '+=' + slideWidth;
+        break;
+    }
+          
+    // Animate the slide, and attach this slide's settings to the element
+    $body.animate(bodyAnimateIn, settings.speed);
+    $bottomNav.animate(bottomnavAnimateIn, settings.speed);
+    $pageslide.show().animate(slideAnimateIn, settings.speed, function() {
+      _sliding = false;
+      if(typeof settings.openFn === "function") {
+        settings.openFn.call(this, $pageslide, $element);
+      };
+    });
+  }
+
+
+  $.fn.pageslide = function(options) {
+    var $elements = this;
+      
+    // On click
+    $elements.click( function(e) {
+      var $self = $(this),
+          settings = $.extend({href: $self.attr('href'), pageTitle: $self.data('title')}, options);
+
+      $element = $self;    
+      // Prevent the default behavior and stop propagation
+      e.preventDefault();
+      e.stopPropagation();
+          
+      if ($pageslide.is(':visible') && $self[0] == _lastCaller) {
+        // If we clicked the same element twice, toggle closed
+        $.pageslide.close();
+      } else {                 
+        // Open
+        $.pageslide(settings);
+        // Record the last element to trigger pageslide
+        _lastCaller = $self[0];
+      }
+    });                   
+  };
+  
+  /*
+   * Default settings 
+   */
+  $.fn.pageslide.defaults = {
+      speed:         300,        // Accepts standard jQuery effects speeds (i.e. fast, normal or milliseconds)
+      direction:     'right',    // Accepts 'left' or 'right'
+      modal:         false,      // If set to true, you must explicitly close pageslide using $.pageslide.close();
+      iframe:        false,      // By default, linked pages are loaded into an iframe. Set this to false if you don't want an iframe.
+      href:          null,       // Override the source of the content. Optional in most cases, but required when opening pageslide programmatically.
+      W:             264,
+      closeFn :      null,
+      openFn :       null,
+      loadComplete : null,
+      pageTitle: '',
+  };
+
+  /*
+   * Public methods 
+   */
+  
+  // Open the pageslide
+  $.pageslide = function(options) {     
+    // Extend the settings with those the user has provided
+    var settings = $.extend({}, $.fn.pageslide.defaults, options),
+        pageCss = {},
+        convertToFunction = function(fn){
+          var x = new Function();
+          x = fn;
+          return x;
+        };
+
+    pageCss['width'] = settings.W;
+    pageCss['margin-left'] = $sidebarState && !$('.item-groups').length ? 241 : settings.direction == 'right' ? 61 : 0;
+
+    // Change Object to Function
+    if(settings.openFn) {
+      $.fn.pageslide.defaults.openFn = convertToFunction(settings.openFn);
+    };
+    if(settings.closeFn) {
+      $.fn.pageslide.defaults.closeFn = convertToFunction(settings.closeFn);
+    };
+    if(settings.loadComplete) {
+      $.fn.pageslide.defaults.loadComplete = convertToFunction(settings.loadComplete);
+    };
+    
+    // Are we trying to open in different direction?
+    if(($pageslide.is(':visible') && $pageslide.data('W') != settings.W) || ($pageslide.is(':visible') && $pageslide.data('direction') != settings.direction)) {
+      $.pageslide.close(function(){
+        $pageslide.css(pageCss);
+        _load(settings);
+        _start(settings);
+      });
+    } else {                
+      _load(settings);
+      if($pageslide.is(':hidden')) {
+        $pageslide.css(pageCss);
+        _start(settings);
+      }
+    }
+    
+    $pageslide.data(settings);
+  }
+  
+  // Close the pageslide
+  $.pageslide.close = function(callback) {
+    var $pageslide = $('#pageslide'),
+        slideWidth = $pageslide.outerWidth(true),
+        bodyMove = $sidebarState && !$('.item-groups').length ? slideWidth - 241 : $.fn.pageslide.defaults.direction == 'right' ? slideWidth - 61 : slideWidth
+        speed = $pageslide.data('speed'),
+        bodyAnimateIn = {},
+        bottomnavAnimateIn = {},
+        slideAnimateIn = {}
+            
+    // If the slide isn't open, just ignore the call
+    if( $pageslide.is(':hidden') || _sliding ) return;          
+    _sliding = true;
+    
+    switch($pageslide.data('direction')) {
+      case 'left':
+        bodyAnimateIn['padding-right'] = '-=' + bodyMove;
+        slideAnimateIn['right'] = '-=' + slideWidth;
+        break;
+      default:
+        bodyAnimateIn['margin-left'] = '-=' + bodyMove;
+        bottomnavAnimateIn['left'] = '-=' + bodyMove;
+        slideAnimateIn['left'] = '-=' + slideWidth;
+        break;
+    }
+    
+    $pageslide.animate(slideAnimateIn, speed);
+    $bottomNav.animate(bottomnavAnimateIn, speed);
+    $body.animate(bodyAnimateIn, speed, function() {
+      $pageslide.attr('style', '')
+                .hide()
+                .find('.content')
+                .attr('style', '')
+                .empty()
+                .end()
+                .find('.view-page')
+                .attr('style', '')
+                .end()
+                .find('.pane')
+                .remove()
+                .end()
+                .find('.page-title')
+                .attr('style', '')
+                .children('span')
+                .empty();
+      _sliding = false;
+      if($pageslide.find('.error').length) $pageslide.find('.error').remove();
+      if(typeof callback != 'undefined') callback();
+      if(typeof $.fn.pageslide.defaults.closeFn === "function") {
+          $.fn.pageslide.defaults.closeFn.call(this, $pageslide, $element);
+      };
+    });
+  }
+
+  // Close Callback
+  $.pageslide.closeCallback = function( callback ) {
+    if(typeof callback === "function"){
+      $.fn.pageslide.defaults.closeFn = callback;
+    };
+  };
+  
+  // Open Callback
+  $.pageslide.openCallback = function( callback ) {
+    if(typeof callback === "function"){
+      $.fn.pageslide.defaults.openFn = callback;
+    };
+  };
+
+  //data load complete callback
+  $.pageslide.loadComplete = function( callback ) {
+    if(typeof callback === "function"){
+      $.fn.pageslide.defaults.loadComplete = callback;
+    };
+  };
+  
+  /* Events */
+  
+  // Don't let clicks to the pageslide close the window
+  $pageslide.click(function(e) {
+    e.stopPropagation();
+  });
+
+  // Close the pageslide if the document is clicked or the users presses the ESC key, unless the pageslide is modal
+  $(document).bind('click keyup', function(e) {
+    // If this is a keyup event, let's see if it's an ESC key
+    if( e.type == "keyup" && e.keyCode != 27) return;
+    
+    // Make sure it's visible, and we're not modal      
+    if( $pageslide.is( ':visible' ) && !$pageslide.data( 'modal' ) ) {          
+      $.pageslide.close();
+    }
+  });
+}(window.jQuery);
\ No newline at end of file
diff --git a/app/assets/javascripts/lib/tags.js.erb b/app/assets/javascripts/lib/tags.js.erb
index 1f1c6f3b4..98d5e3f9c 100644
--- a/app/assets/javascripts/lib/tags.js.erb
+++ b/app/assets/javascripts/lib/tags.js.erb
@@ -205,5 +205,18 @@ $(function() {
 	} else {
 		checkedLength();
 	};
-	// addTagsTab();
+	$.pageslide.closeCallback(function(pageslide, item) {
+	  $('.filter-item').removeClass("active");
+	});
+	$.pageslide.loadComplete(function(pageslide, item) {
+	  $('.filter-item').removeClass("active");
+	  item.closest('li').addClass('active');
+    if(item.hasClass('btn')) {
+      addTagsTab();
+      $('#filter-default-tag').fastLiveFilter('.add-default-tags-list', '.filter-item', '.tag');
+      $('.tags-groups').cardCheck({
+        item: '.card',
+      });
+    };
+	});
 });
diff --git a/app/assets/stylesheets/lib/pageslide.css b/app/assets/stylesheets/lib/pageslide.css
index f78411adb..22609df58 100644
--- a/app/assets/stylesheets/lib/pageslide.css
+++ b/app/assets/stylesheets/lib/pageslide.css
@@ -8,7 +8,7 @@
   overflow: auto;
   
   /* Specify the width of your pageslide here */
-  padding: 5px;
+  /*padding: 5px;*/
   
   /* These styles are optional, and describe how the pageslide will look */
   background-color: #333;
@@ -17,34 +17,29 @@
      -moz-box-shadow: inset 0 0 5px 5px #222;
           box-shadow: inset 0 0 5px 5px #222;
 }
+#pageslide .page-title {
+  padding: 10px;
+  background-color: #232323;
+  border-bottom: 1px solid #424242;
+  line-height: 2em;
+}
+#pageslide .page-title a {
+  color: #FFF;
+  text-decoration: none;
+  font-size: 1.6em;
+}
+#pageslide .page-title span {
+  font-size: 1.7em;
+}
+#pageslide .view-page {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+}
 #pageslide .content {
   padding: 15px;
-}
-#pageslide #view-page .content,
-#pageslide #view-page .pane {
   outline: none;
-  padding: 0px;
-  margin-top: 57px;
-}
-#pageslide #view-page .content {
-  padding-bottom: 10px;
-}
-#pageslide #view-page .page-info {
-  padding: 0 10px;
-  border-bottom: 1px solid #222222;
-  box-shadow: 0px 1px 0px #404040;
-  line-height: 50px;
-}
-#pageslide #view-page .page-info a {
-  color: #8f8f8f;
-  font-size: 2em;
-  text-decoration: none;
-}
-#pageslide #view-page .page-info a:hover {
-  color: #efefef;
-}
-#pageslide #view-page .page-info h3 {
-  margin: 5px 0;
 }
 #pageslide form {
   margin-bottom: 0;
@@ -89,4 +84,32 @@
   display: inline-block;
   height: 30px;
   padding: 0 2px 0 5px;
-}
\ No newline at end of file
+}
+#pageslide .groups {
+  margin-bottom: 10px;
+}
+#pageslide .error {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  text-align: center;
+  background-color: #333;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=95)";
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=95);
+  opacity: .95;
+}
+#pageslide .error .msg {
+  position: absolute;
+  top: 50%;
+  margin-top: -55px;
+  height: 110px;
+  width: 100%;
+}
+#pageslide .error i {
+  font-size: 6em;
+}
+#pageslide .error p {
+  font-size: 1.3em;
+}
diff --git a/app/views/admin/ad_banners/edit.js.erb b/app/views/admin/ad_banners/edit.js.erb
index 30d88e18a..1a636f389 100644
--- a/app/views/admin/ad_banners/edit.js.erb
+++ b/app/views/admin/ad_banners/edit.js.erb
@@ -1 +1 @@
-$('#view-page .content').html("<%= j render 'edit' %>");
\ No newline at end of file
+$('.view-page .content').html("<%= j render 'edit' %>");
\ No newline at end of file
diff --git a/app/views/admin/ad_banners/new.js.erb b/app/views/admin/ad_banners/new.js.erb
index 5ecf8f163..b9ed1e31c 100644
--- a/app/views/admin/ad_banners/new.js.erb
+++ b/app/views/admin/ad_banners/new.js.erb
@@ -1 +1 @@
-$('#view-page .content').html("<%= j render 'new' %>");
\ No newline at end of file
+$('.view-page .content').html("<%= j render 'new' %>");
\ No newline at end of file
diff --git a/app/views/admin/categories/_category.html.erb b/app/views/admin/categories/_category.html.erb
index de09e970d..d8f76baa5 100644
--- a/app/views/admin/categories/_category.html.erb
+++ b/app/views/admin/categories/_category.html.erb
@@ -6,7 +6,7 @@
 	      <div class="quick-edit">
           <ul class="nav nav-pills">
           	<% if is_admin?%>
-	            <li><%= link_to t(:edit), edit_admin_module_app_category_path(@module_app_id, category), class: "open-slide" %></li>
+	            <li><%= link_to t(:edit), edit_admin_module_app_category_path(@module_app_id, category), class: "open-slide", data: {title: t(:edit_category)} %></li>
 	            <li><%= link_to show_toggle_archive_btn(category) , toggle_admin_module_app_category_path(@module_app_id, category), method: :post, remote: true, class: "archive_toggle" %></li>
 	           <% end %>
             <% if is_manager? || is_admin? %>
diff --git a/app/views/admin/categories/_edit.html.erb b/app/views/admin/categories/_edit.html.erb
index b9542e57a..ba42df0a5 100644
--- a/app/views/admin/categories/_edit.html.erb
+++ b/app/views/admin/categories/_edit.html.erb
@@ -1,6 +1,5 @@
 <%= form_for @category, :url => admin_module_app_category_path(@module_app_id, @category), remote: true do |f| %>
   <fieldset>
-    <legend><%= t(:edit_category) %></legend>
     <%= render :partial => 'form', :locals => {:f => f} %>
   </fieldset>
   <div class="form-actions">
diff --git a/app/views/admin/categories/_index.html.erb b/app/views/admin/categories/_index.html.erb
index 98b2bca03..9dfc9d671 100644
--- a/app/views/admin/categories/_index.html.erb
+++ b/app/views/admin/categories/_index.html.erb
@@ -13,7 +13,7 @@
 
 <div class="bottomnav clearfix">
   <div class="action pull-right">
-    <%= link_to content_tag(:i, nil, class: "icons-plus") + " " + t(:add), new_admin_module_app_category_path(@module_app_id), class: "btn btn-primary open-slide" %>
+    <%= link_to content_tag(:i, nil, class: "icons-plus") + " " + t(:add), new_admin_module_app_category_path(@module_app_id), class: "btn btn-primary open-slide", data: {title: t(:add_category)} %>
   </div>
   <div class="pagination pagination-centered">
     <%= paginate @categories unless @categories.blank? %>
diff --git a/app/views/admin/categories/_new.html.erb b/app/views/admin/categories/_new.html.erb
index 3113d2c67..6e0a88617 100644
--- a/app/views/admin/categories/_new.html.erb
+++ b/app/views/admin/categories/_new.html.erb
@@ -1,6 +1,5 @@
 <%= form_for @category, :url => admin_module_app_categories_path(@module_app_id), remote: true do |f| %>
   <fieldset>
-    <legend><%= t(:add_category) %></legend>
     <%= render :partial => 'form', :locals => {:f => f} %>
   </fieldset>
   <div class="form-actions">
diff --git a/app/views/admin/categories/edit.js.erb b/app/views/admin/categories/edit.js.erb
index 30d88e18a..1a636f389 100644
--- a/app/views/admin/categories/edit.js.erb
+++ b/app/views/admin/categories/edit.js.erb
@@ -1 +1 @@
-$('#view-page .content').html("<%= j render 'edit' %>");
\ No newline at end of file
+$('.view-page .content').html("<%= j render 'edit' %>");
\ No newline at end of file
diff --git a/app/views/admin/categories/new.js.erb b/app/views/admin/categories/new.js.erb
index 5ecf8f163..b9ed1e31c 100644
--- a/app/views/admin/categories/new.js.erb
+++ b/app/views/admin/categories/new.js.erb
@@ -1 +1 @@
-$('#view-page .content').html("<%= j render 'new' %>");
\ No newline at end of file
+$('.view-page .content').html("<%= j render 'new' %>");
\ No newline at end of file
diff --git a/app/views/admin/items/_node.html.erb b/app/views/admin/items/_node.html.erb
index 431e1c1d0..fd5dcda97 100644
--- a/app/views/admin/items/_node.html.erb
+++ b/app/views/admin/items/_node.html.erb
@@ -17,10 +17,10 @@
         <%= link_to node.title, node.url %>
       <% end %>
       <div class="item-menu">
-        <%= link_to content_tag(:i, nil, class: "icon-eye-open"), eval("admin_#{node.class.to_s.downcase}_path(node)"), class: "view-page open-slide tip", title: t(:view), data: {title: t(:view)} if node.class.to_s.eql?('Page') %>
-        <%= link_to content_tag(:i, nil, class: "icon-edit"), eval("edit_admin_#{node.class.to_s.downcase}_path(node)"), class: "open-slide tip", title: t(:edit), data: {title: t(:edit)} %>
-        <%= link_to content_tag(:i, nil, class: "icons-newspaper"), new_admin_page_path(:parent_id => node.id), class: "open-slide tip", title: t(:add_page), data: {title: t(:add_page)} if node.class.to_s.eql?('Page') %>
-        <%= link_to content_tag(:i, nil, class: "icon-link"), new_admin_link_path(:parent_id => node.id), class: "open-slide tip", title: t(:add_link), data: {title: t(:add_link)} if node.class.to_s.eql?('Page') %>
+        <%= link_to content_tag(:i, nil, class: "icon-eye-open"), eval("admin_#{node.class.to_s.downcase}_path(node)"), class: "view-page open-slide tip", title: t(:view), data: {title: node.title} if node.class.to_s.eql?('Page') %>
+        <%= link_to content_tag(:i, nil, class: "icon-edit"), eval("edit_admin_#{node.class.to_s.downcase}_path(node)"), class: "open-slide tip #{node.class.to_s.downcase} edit", title: t(:edit), data: {title: t(:edit)} %>
+        <%= link_to content_tag(:i, nil, class: "icons-newspaper"), new_admin_page_path(:parent_id => node.id), class: "open-slide tip page", title: t(:add_page), data: {title: t(:add_page)} if node.class.to_s.eql?('Page') %>
+        <%= link_to content_tag(:i, nil, class: "icon-link"), new_admin_link_path(:parent_id => node.id), class: "open-slide tip link", title: t(:add_link), data: {title: t(:add_link)} if node.class.to_s.eql?('Page') %>
         <%= link_to content_tag(:i, nil, class: "icon-trash"), nil, rel: eval("admin_#{node.class.to_s.downcase}_path(node)"), class: "delete tip", title: t(:delete_), data: {title: t(:delete_)} unless node.root? %>
       </div>
     </div>
diff --git a/app/views/admin/items/index.html.erb b/app/views/admin/items/index.html.erb
index 1459b4ce1..8d9dbb691 100644
--- a/app/views/admin/items/index.html.erb
+++ b/app/views/admin/items/index.html.erb
@@ -5,3 +5,5 @@
 </ol>
 <% end %>
 <%= render 'layouts/delete_modal', delete_options: {remote: true} %>
+
+<%= javascript_include_tag "lib/pageslide.js" %>
diff --git a/app/views/admin/links/edit.js.erb b/app/views/admin/links/edit.js.erb
index 30d88e18a..1a636f389 100644
--- a/app/views/admin/links/edit.js.erb
+++ b/app/views/admin/links/edit.js.erb
@@ -1 +1 @@
-$('#view-page .content').html("<%= j render 'edit' %>");
\ No newline at end of file
+$('.view-page .content').html("<%= j render 'edit' %>");
\ No newline at end of file
diff --git a/app/views/admin/links/new.js.erb b/app/views/admin/links/new.js.erb
index 5ecf8f163..b9ed1e31c 100644
--- a/app/views/admin/links/new.js.erb
+++ b/app/views/admin/links/new.js.erb
@@ -1 +1 @@
-$('#view-page .content').html("<%= j render 'new' %>");
\ No newline at end of file
+$('.view-page .content').html("<%= j render 'new' %>");
\ No newline at end of file
diff --git a/app/views/admin/module_tags/_edit.html.erb b/app/views/admin/module_tags/_edit.html.erb
index 0725c75a3..be50a4cb8 100644
--- a/app/views/admin/module_tags/_edit.html.erb
+++ b/app/views/admin/module_tags/_edit.html.erb
@@ -1,6 +1,5 @@
 <%= form_for @tag, url: admin_module_tag_path(@tag, module_app_id: @module_app_id), remote: true do |f| %>
   <fieldset>
-    <legend><%= t('editing.tag') %></legend>
     <%= render partial: "admin/tags/form", :locals => { :f => f } %>
     <div class="form-actions">
       <a href="javascript:$.pageslide.close()" class="btn btn-small"><%= t(:cancel) %></a>
diff --git a/app/views/admin/module_tags/_index.html.erb b/app/views/admin/module_tags/_index.html.erb
index b639016ed..3ab77926b 100644
--- a/app/views/admin/module_tags/_index.html.erb
+++ b/app/views/admin/module_tags/_index.html.erb
@@ -8,7 +8,7 @@
     <%= link_to t(:delete), '#', id: "deleteTags", class: "btn btn-danger toggable hide", rel: '' %>
     <%= link_to t(:merge), '#', id: "mergerTags", class: "btn btn-success toggable hide", rel: merge_admin_module_tags_path(module_app_id: @module_app_id) %>
     <%= link_to t(:remove_default), '#', id: "removeDefaults", class: "btn btn-info toggable hide", rel: '' %>
-    <%= link_to content_tag(:i, nil, class: "icons-plus") + " " + t(:add), new_admin_module_tag_path(module_app_id: @module_app_id), class: "btn btn-primary open-slide" %>
+    <%= link_to content_tag(:i, nil, class: "icons-plus") + " " + t(:add), new_admin_module_tag_path(module_app_id: @module_app_id), class: "btn btn-primary open-slide", data: {title: t(:add_tags)} %>
   </div>
 </div>
 <!-- footer:end -->
diff --git a/app/views/admin/module_tags/_module_tag.html.erb b/app/views/admin/module_tags/_module_tag.html.erb
index 9b617ecab..e14a0bccd 100644
--- a/app/views/admin/module_tags/_module_tag.html.erb
+++ b/app/views/admin/module_tags/_module_tag.html.erb
@@ -9,7 +9,7 @@
       <%= show_names_slash(module_tag) %>
     </a>
   <% else %>
-    <%= link_to edit_admin_module_tag_path(module_tag, module_app_id: @module_app_id), class: "open-slide" do %>
+    <%= link_to edit_admin_module_tag_path(module_tag, module_app_id: @module_app_id), class: "open-slide", data: {title: t('editing.tag')} do %>
       <span class="amount"><%= get_tagging_count(module_tag) %></span>
       <%= show_names_slash(module_tag) %>
     <% end %>
diff --git a/app/views/admin/module_tags/_new.html.erb b/app/views/admin/module_tags/_new.html.erb
index f541725c3..d46eaf008 100644
--- a/app/views/admin/module_tags/_new.html.erb
+++ b/app/views/admin/module_tags/_new.html.erb
@@ -1,9 +1,8 @@
 <div id="add-tags">
 
-  <legend>Add Tags</legend>
   <ul class="nav nav-pills">
-    <li class="active"><a href=".set_new" data-toggle="tab">Create new</a></li>
-    <li><a href=".select_default" data-toggle="tab">Use Default</a></li>
+    <li class="active"><a href=".set_new" data-toggle="tab"><%= t(:create_) %></a></li>
+    <li><a href=".select_default" data-toggle="tab"><%= t(:use_default) %></a></li>
   </ul>
   <div class="tab-content">
 
diff --git a/app/views/admin/module_tags/edit.js.erb b/app/views/admin/module_tags/edit.js.erb
index 30d88e18a..1a636f389 100644
--- a/app/views/admin/module_tags/edit.js.erb
+++ b/app/views/admin/module_tags/edit.js.erb
@@ -1 +1 @@
-$('#view-page .content').html("<%= j render 'edit' %>");
\ No newline at end of file
+$('.view-page .content').html("<%= j render 'edit' %>");
\ No newline at end of file
diff --git a/app/views/admin/module_tags/new.js.erb b/app/views/admin/module_tags/new.js.erb
index 5ecf8f163..b9ed1e31c 100644
--- a/app/views/admin/module_tags/new.js.erb
+++ b/app/views/admin/module_tags/new.js.erb
@@ -1 +1 @@
-$('#view-page .content').html("<%= j render 'new' %>");
\ No newline at end of file
+$('.view-page .content').html("<%= j render 'new' %>");
\ No newline at end of file
diff --git a/app/views/admin/pages/edit.js.erb b/app/views/admin/pages/edit.js.erb
index 30d88e18a..1a636f389 100644
--- a/app/views/admin/pages/edit.js.erb
+++ b/app/views/admin/pages/edit.js.erb
@@ -1 +1 @@
-$('#view-page .content').html("<%= j render 'edit' %>");
\ No newline at end of file
+$('.view-page .content').html("<%= j render 'edit' %>");
\ No newline at end of file
diff --git a/app/views/admin/pages/new.js.erb b/app/views/admin/pages/new.js.erb
index 5ecf8f163..b9ed1e31c 100644
--- a/app/views/admin/pages/new.js.erb
+++ b/app/views/admin/pages/new.js.erb
@@ -1 +1 @@
-$('#view-page .content').html("<%= j render 'new' %>");
\ No newline at end of file
+$('.view-page .content').html("<%= j render 'new' %>");
\ No newline at end of file
diff --git a/app/views/admin/tags/_edit.html.erb b/app/views/admin/tags/_edit.html.erb
index 089d87fbc..239f494c0 100644
--- a/app/views/admin/tags/_edit.html.erb
+++ b/app/views/admin/tags/_edit.html.erb
@@ -1,6 +1,5 @@
 <%= form_for @tag, url: admin_tag_path(@tag), remote: true do |f| %>
   <fieldset>
-    <legend><%= t('editing.tag') %></legend>
     <%= render partial: "form", :locals => { :f => f } %>
     <div class="form-actions">
       <a href="javascript:$.pageslide.close()" class="btn btn-small"><%= t(:cancel) %></a>
diff --git a/app/views/admin/tags/_index.html.erb b/app/views/admin/tags/_index.html.erb
index 3b4f63a63..74c7fe112 100644
--- a/app/views/admin/tags/_index.html.erb
+++ b/app/views/admin/tags/_index.html.erb
@@ -6,7 +6,7 @@
     <%= link_to t(:delete), '#', id: "deleteTags", class: "btn btn-danger toggable hide", rel: '' %>
     <%= link_to t(:merge), '#', id: "mergerTags", class: "btn btn-success toggable hide", rel: merge_admin_tags_path %>
     <%= link_to t(:add_to_default), add_to_default_admin_tags_path, id: "addDefault", class: "btn btn-info toggable hide", method: :post, remote: true %>
-    <%= link_to content_tag(:i, nil, class: "icons-plus") + " " + t(:add), new_admin_tag_path, class: "btn btn-primary open-slide" %>
+    <%= link_to content_tag(:i, nil, class: "icons-plus") + " " + t(:add), new_admin_tag_path, class: "btn btn-primary open-slide", data: {title: t('new.tag')} %>
   </div>
 </div>
 <!-- footer:end -->
diff --git a/app/views/admin/tags/_new.html.erb b/app/views/admin/tags/_new.html.erb
index de1d96650..acfca881b 100644
--- a/app/views/admin/tags/_new.html.erb
+++ b/app/views/admin/tags/_new.html.erb
@@ -1,6 +1,5 @@
 <%= form_for @tag, url: admin_tags_path, remote: true do |f| %>
   <fieldset>
-    <legend><%= t('new.tag') %></legend>
     <%= render partial: "form", :locals => { :f => f } %>
     <div class="form-actions">
       <a href="javascript:$.pageslide.close()" class="btn btn-small"><%= t(:cancel) %></a>
diff --git a/app/views/admin/tags/edit.js.erb b/app/views/admin/tags/edit.js.erb
index 30d88e18a..1a636f389 100644
--- a/app/views/admin/tags/edit.js.erb
+++ b/app/views/admin/tags/edit.js.erb
@@ -1 +1 @@
-$('#view-page .content').html("<%= j render 'edit' %>");
\ No newline at end of file
+$('.view-page .content').html("<%= j render 'edit' %>");
\ No newline at end of file
diff --git a/app/views/admin/tags/new.js.erb b/app/views/admin/tags/new.js.erb
index 5ecf8f163..b9ed1e31c 100644
--- a/app/views/admin/tags/new.js.erb
+++ b/app/views/admin/tags/new.js.erb
@@ -1 +1 @@
-$('#view-page .content').html("<%= j render 'new' %>");
\ No newline at end of file
+$('.view-page .content').html("<%= j render 'new' %>");
\ No newline at end of file
diff --git a/app/views/layouts/back_end.html.erb b/app/views/layouts/back_end.html.erb
index 819e8a2c8..b4d7ee5a4 100644
--- a/app/views/layouts/back_end.html.erb
+++ b/app/views/layouts/back_end.html.erb
@@ -32,13 +32,7 @@
         <%= yield :right_nav %>
       </div>
     	<%= yield %>
-      <div id="pageslide">
-      	<div id="view-page" class="nano" style="display:none">
-  			  <div class="content">
-  			  </div>
-  			</div>
-      </div>
-			<%= javascript_include_tag "lib/jquery.pageslide.js" %>
+			<%= javascript_include_tag "lib/pageslide.js" %>
     </div>
   </section>
 </body>
diff --git a/app/views/layouts/member.html.erb b/app/views/layouts/member.html.erb
index e3936b194..9c001efdc 100644
--- a/app/views/layouts/member.html.erb
+++ b/app/views/layouts/member.html.erb
@@ -30,13 +30,7 @@
         <%= yield :right_nav %>
       </div>
     	<%= yield %>
-      <div id="pageslide">
-      	<div id="view-page" class="nano" style="display:none">
-  			  <div class="content">
-  			  </div>
-  			</div>
-      </div>
-			<%= javascript_include_tag "lib/jquery.pageslide.js" %>
+			<%= javascript_include_tag "lib/pageslide.js" %>
     </div>
   </section>
 </body>
diff --git a/app/views/layouts/structure.html.erb b/app/views/layouts/structure.html.erb
index 302cab49e..5aa499f43 100644
--- a/app/views/layouts/structure.html.erb
+++ b/app/views/layouts/structure.html.erb
@@ -24,13 +24,6 @@
         </div>
       <% end %>
     	<%= yield %>
-      <div id="pageslide">
-      	<div id="view-page" class="nano" style="display:none">
-  			  <div class="content">
-  			  </div>
-  			</div>
-      </div>
-			<%= javascript_include_tag "lib/jquery.pageslide.js" %>
     </div>
   </section>
 </body>