diff --git a/web/client/components/TOC/TOC.jsx b/web/client/components/TOC/TOC.jsx
index c404dc1df2..70d6a6c00e 100644
--- a/web/client/components/TOC/TOC.jsx
+++ b/web/client/components/TOC/TOC.jsx
@@ -8,8 +8,8 @@
 
 var React = require('react');
 var Sortable = require('react-sortable-items');
-
-var TOC = React.createClass({
+require('./css/toc.css');
+const TOC = React.createClass({
     propTypes: {
         filter: React.PropTypes.func,
         nodes: React.PropTypes.array,
diff --git a/web/client/components/TOC/css/toc.css b/web/client/components/TOC/css/toc.css
new file mode 100644
index 0000000000..952847a259
--- /dev/null
+++ b/web/client/components/TOC/css/toc.css
@@ -0,0 +1,31 @@
+.Sortable {
+  position: relative;
+  display: block;
+  overflow: visible;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
+
+.SortableItem {
+  cursor: -webkit-grab; cursor:-moz-grab; cursor: grab;
+}
+
+.SortableItem.is-dragging {
+  cursor: move;
+  position: absolute;
+  z-index: 1688;
+  background-color: rgba(218, 218, 218, 0.8);;
+  border: 1px dashed #8E8E8E;
+  border-radius: 5px;
+  box-shadow: 4px 4px 9px rgba(0, 0, 0, 0.28);
+}
+
+.SortableItem.is-placeholder {
+  border: 1px dashed #8E8E8E;
+  border-radius: 5px;
+}
+
+.SortableItem.is-undraggable {
+  cursor: not-allowed;
+}
diff --git a/web/client/components/TOC/fragments/SettingsModal.jsx b/web/client/components/TOC/fragments/SettingsModal.jsx
index e74da2f912..9a64b01bad 100644
--- a/web/client/components/TOC/fragments/SettingsModal.jsx
+++ b/web/client/components/TOC/fragments/SettingsModal.jsx
@@ -9,7 +9,7 @@
 const React = require('react');
 const {Modal, Button, Glyphicon, Tabs, Tab} = require('react-bootstrap');
 
-require("./settingsModal.css");
+require("./css/settingsModal.css");
 
 const Dialog = require('../../misc/Dialog');
 const ConfirmButton = require('../../buttons/ConfirmButton');
diff --git a/web/client/components/TOC/fragments/css/groupchildren.css b/web/client/components/TOC/fragments/css/groupchildren.css
index 2c27c492ff..ce9db5d71f 100644
--- a/web/client/components/TOC/fragments/css/groupchildren.css
+++ b/web/client/components/TOC/fragments/css/groupchildren.css
@@ -1,3 +1,35 @@
 .toc-group-children {
     margin-left: 15px;
 }
+
+.Sortable {
+  position: relative;
+  display: block;
+  overflow: visible;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
+
+.SortableItem {
+  cursor: -webkit-grab; cursor:-moz-grab; cursor: grab;
+}
+
+.SortableItem.is-dragging {
+  cursor: move;
+  position: absolute;
+  z-index: 1688;
+  background-color: rgba(218, 218, 218, 0.8);;
+  border: 1px dashed #8E8E8E;
+  border-radius: 5px;
+  box-shadow: 4px 4px 9px rgba(0, 0, 0, 0.28);
+}
+
+.SortableItem.is-placeholder {
+  border: 1px dashed #8E8E8E;
+  border-radius: 5px;
+}
+
+.SortableItem.is-undraggable {
+  cursor: not-allowed;
+}
diff --git a/web/client/components/TOC/fragments/settingsModal.css b/web/client/components/TOC/fragments/css/settingsModal.css
similarity index 77%
rename from web/client/components/TOC/fragments/settingsModal.css
rename to web/client/components/TOC/fragments/css/settingsModal.css
index 124f178da4..a9eba0fdbd 100644
--- a/web/client/components/TOC/fragments/settingsModal.css
+++ b/web/client/components/TOC/fragments/css/settingsModal.css
@@ -274,3 +274,71 @@
 .noUi-marker-vertical.noUi-marker-large {
   width: 15px;
 }
+
+
+
+#mapstore-layer-settings {
+    min-width: 400px;
+}
+
+#mapstore-layer-settings .noUi-background {
+    background:#CCC;
+}
+
+#mapstore-layer-settings .noUi-horizontal {
+    height: 2px;
+	width: 260px;
+	margin:auto;
+}
+#mapstore-layer-settings .noUi-target {
+    position: relative;
+    direction: ltr;
+}
+
+#mapstore-layer-settings .noUi-base {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    z-index: 1;
+}
+
+#mapstore-layer-settings .noUi-horizontal .noUi-handle {
+    width: 23px;
+    height: 23px;
+    top: -10px;
+}
+
+#mapstore-layer-settings .noUi-handle {
+    background: #078AA3;
+    cursor: default;
+	border-radius:50px;
+}
+
+#mapstore-layer-settings .noUi-handle {
+    position: relative;
+    z-index: 1;
+}
+#mapstore-layer-settings .noUi-target, .noUi-target * {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -ms-touch-action: none;
+    touch-action: none;
+    -ms-user-select: none;
+    -moz-user-select: none;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+#mapstore-layer-settings .noUi-target {
+    position: relative;
+    direction: ltr;
+}
+
+#mapstore-layer-settings .noUi-target {
+    width: 94%;
+    margin-bottom: 10px;
+}
+
+#mapstore-layer-settings .noUi-handle:before, #mapstore-layer-settings .noUi-handle:after {
+    background: none;
+}
diff --git a/web/client/components/buttons/InfoButton.jsx b/web/client/components/buttons/InfoButton.jsx
index e7228e4714..f8526585b4 100644
--- a/web/client/components/buttons/InfoButton.jsx
+++ b/web/client/components/buttons/InfoButton.jsx
@@ -12,7 +12,7 @@ var Button = BootstrapReact.Button;
 var Glyphicon = BootstrapReact.Glyphicon;
 var ImageButton = require('./ImageButton');
 const Dialog = require('../misc/Dialog');
-
+require('./css/infoButton.css');
 const assign = require('object-assign');
 /**
  * A button to show a simple information window.
@@ -29,7 +29,7 @@ const assign = require('object-assign');
  *
  * Note: the button will not be never empty, it will show at least the text (default or custom)
  */
-var InfoButton = React.createClass({
+const InfoButton = React.createClass({
     propTypes: {
         id: React.PropTypes.string,
         image: React.PropTypes.string,
diff --git a/web/client/components/buttons/css/infoButton.css b/web/client/components/buttons/css/infoButton.css
new file mode 100644
index 0000000000..039ab257fa
--- /dev/null
+++ b/web/client/components/buttons/css/infoButton.css
@@ -0,0 +1,6 @@
+#mapstore-about {
+    position: fixed;
+    top: 0;
+    left: calc(50% - 500px);
+    width: 500px;
+}
diff --git a/web/client/components/data/identify/Identify.jsx b/web/client/components/data/identify/Identify.jsx
index 210311f539..e5faae0e43 100644
--- a/web/client/components/data/identify/Identify.jsx
+++ b/web/client/components/data/identify/Identify.jsx
@@ -9,6 +9,8 @@
 const React = require('react');
 const {Panel, Glyphicon} = require('react-bootstrap');
 
+require('./css/identify.css');
+
 const Draggable = require('react-draggable');
 
 const MapInfoUtils = require('../../../utils/MapInfoUtils');
diff --git a/web/client/components/data/identify/SwipeHeader.jsx b/web/client/components/data/identify/SwipeHeader.jsx
index dbd0a50b17..90275cf912 100644
--- a/web/client/components/data/identify/SwipeHeader.jsx
+++ b/web/client/components/data/identify/SwipeHeader.jsx
@@ -9,6 +9,7 @@
 const React = require('react');
 
 const {Glyphicon, Button} = require('react-bootstrap');
+require('./css/swipeHeader.css');
 
 const SwipeHeader = React.createClass({
     propTypes: {
diff --git a/web/client/components/data/identify/css/identify.css b/web/client/components/data/identify/css/identify.css
new file mode 100644
index 0000000000..de96abc89e
--- /dev/null
+++ b/web/client/components/data/identify/css/identify.css
@@ -0,0 +1,45 @@
+
+#mapstore-identify-revgeocoder {
+    min-height: 40px;
+    margin-bottom: 10px;
+    border-bottom: solid 1px #BBB;
+}
+
+
+#mapstore-getfeatureinfo {
+    max-width: 100%;
+}
+
+@media (min-width: 500px) {
+    #mapstore-getfeatureinfo {
+        min-width: 500px !important;
+    }
+}
+
+#mapstore-getfeatureinfo .swipeable-view .panel-heading {
+    background-color: white;
+    border: none;
+    height: 60px;
+    padding: 0;
+}
+
+#mapstore-getfeatureinfo .swipeable-view .panel {
+    border: none;
+}
+
+#mapstore-getfeatureinfo .modal-body .panel-body {
+    padding: 0;
+}
+
+#mapstore-getfeatureinfo .swipeable-view .panel-heading .swipe-header-left-button {
+    right: 55px;
+    top: 0;
+}
+
+#mapstore-getfeatureinfo .swipeable-view .panel-heading .swipe-header-right-button {
+    top: 0;
+}
+
+#mapstore-getfeatureinfo .swipeable-view .panel-title {
+    font-weight: bold;
+}
diff --git a/web/client/components/data/identify/css/swipeHeader.css b/web/client/components/data/identify/css/swipeHeader.css
new file mode 100644
index 0000000000..78461de21b
--- /dev/null
+++ b/web/client/components/data/identify/css/swipeHeader.css
@@ -0,0 +1,14 @@
+
+.swipe-header-left-button {
+    float: none !important;
+    right: 45px;
+    top: 4px;
+    position: absolute;
+}
+
+.swipe-header-right-button {
+    float: none !important;
+    position: absolute;
+    top: 4px;
+    right: 5px;
+}
diff --git a/web/client/components/help/help.css b/web/client/components/help/help.css
index b95a957c1f..cb3f132d47 100644
--- a/web/client/components/help/help.css
+++ b/web/client/components/help/help.css
@@ -31,3 +31,34 @@
     top: 10px;
     z-index: 100000
 }
+
+
+.btn .badge {
+    position: absolute;
+    top: -10px;
+    left: -10px;
+}
+
+.themed .btn .badge {
+    top: -35px;
+    left: -50px;
+}
+
+.badge {
+    cursor: pointer;
+}
+
+#helpbadge-scaleBox {
+    left: 0 !important;
+    background-color: #078aa3;
+    color: #ffffff;
+}
+
+#mapstore-navbar #helpbadge-search-help {
+    position: absolute;
+    left: -10px;
+    bottom: -8px;
+    z-index: 1;
+    background-color: #078aa3;
+    color: #ffffff;
+}
diff --git a/web/client/components/mapcontrols/Snapshot/SnapshotPanel.jsx b/web/client/components/mapcontrols/Snapshot/SnapshotPanel.jsx
index 59ba778f9b..6a03ffa27e 100644
--- a/web/client/components/mapcontrols/Snapshot/SnapshotPanel.jsx
+++ b/web/client/components/mapcontrols/Snapshot/SnapshotPanel.jsx
@@ -9,7 +9,8 @@
 const React = require('react');
 const {Button, Col, Grid, Row, Image, Glyphicon, Table, Panel} = require('react-bootstrap');
 const {DateFormat} = require('../../I18N/I18N');
-require("./style.css");
+require("./css/snapshot.css");
+
 const ConfigUtils = require('../../../utils/ConfigUtils');
 const shotingImg = require('./shoting.gif');
 const notAvailable = require('./not-available.png');
diff --git a/web/client/components/mapcontrols/Snapshot/SnapshotQueue.jsx b/web/client/components/mapcontrols/Snapshot/SnapshotQueue.jsx
index 3b5ab00188..a1bf27cfc1 100644
--- a/web/client/components/mapcontrols/Snapshot/SnapshotQueue.jsx
+++ b/web/client/components/mapcontrols/Snapshot/SnapshotQueue.jsx
@@ -8,7 +8,7 @@
 
 const React = require('react');
 
-require("./style.css");
+require("./css/snapshot.css");
 
 
 let SnapshotSupport;
diff --git a/web/client/components/mapcontrols/Snapshot/style.css b/web/client/components/mapcontrols/Snapshot/css/snapshot.css
similarity index 52%
rename from web/client/components/mapcontrols/Snapshot/style.css
rename to web/client/components/mapcontrols/Snapshot/css/snapshot.css
index 99b5434848..36a4909ae9 100644
--- a/web/client/components/mapcontrols/Snapshot/style.css
+++ b/web/client/components/mapcontrols/Snapshot/css/snapshot.css
@@ -5,3 +5,9 @@
     list-style:none;
     padding-left:0;
 }
+
+#mapstore-snapshot-panel {
+    position: absolute;
+    right: 200px;
+    min-width: 725px;
+}
diff --git a/web/client/components/mapcontrols/locate/LocateBtn.jsx b/web/client/components/mapcontrols/locate/LocateBtn.jsx
index a183402a24..c86505cc1d 100644
--- a/web/client/components/mapcontrols/locate/LocateBtn.jsx
+++ b/web/client/components/mapcontrols/locate/LocateBtn.jsx
@@ -9,11 +9,11 @@
 var React = require('react');
 var {Button, Glyphicon, OverlayTrigger, Tooltip} = require('react-bootstrap');
 const defaultIcon = require('../../misc/spinners/InlineSpinner/img/spinner.gif');
-
+require('./css/locate.css');
 let checkingGeoLocation = false;
 let geoLocationAllowed = false;
 
-var LocateBtn = React.createClass({
+const LocateBtn = React.createClass({
     propTypes: {
         id: React.PropTypes.string,
         btnConfig: React.PropTypes.object,
diff --git a/web/client/components/mapcontrols/locate/css/locate.css b/web/client/components/mapcontrols/locate/css/locate.css
new file mode 100644
index 0000000000..febeb133ed
--- /dev/null
+++ b/web/client/components/mapcontrols/locate/css/locate.css
@@ -0,0 +1,3 @@
+#navigationBar #locate-btn {
+    position: static;
+}
diff --git a/web/client/components/mapcontrols/mouseposition/mousePosition.css b/web/client/components/mapcontrols/mouseposition/mousePosition.css
index 6ca8d78a9f..322e6a7979 100644
--- a/web/client/components/mapcontrols/mouseposition/mousePosition.css
+++ b/web/client/components/mapcontrols/mouseposition/mousePosition.css
@@ -29,3 +29,71 @@
 #mapstore-mouseposition h5 {
     display: inline-block;
 }
+
+
+#mapstore-mousepositionsettings .form-group {
+    margin-bottom: 0 !important;
+}
+
+#mapstore-mousepositionsettings select, #mapstore-mousepositionsettings button {
+    width: 60% !important;
+    float: right;
+    height: 35px;
+}
+
+#mapstore-mousepositionsettings label {
+    width: 100% !important;
+}
+
+
+#mapstore-mouseposition .label-info {
+    white-space: normal !important;
+    color: black !important;
+    font-size: 110%;
+    padding: 0 !important;
+}
+
+#mapstore-mouseposition {
+    bottom: 5px !important;
+    right: 264px !important;
+    top: auto !important;
+    margin: 0 !important;
+    text-shadow: none !important;
+    background-color: white !important;
+    width: 160px !important;
+    height: 46px !important;
+    padding-left: 5px;
+    padding-top: 2px;
+}
+
+#mapstore-mouseposition h5 {
+    margin-top: 5px !important;
+}
+
+.mouseposition-separator {
+    display: block;
+}
+
+#mapstore-mouseposition-mobile {
+        bottom: 25px;
+        right: 30px;
+        z-index: 10;
+        position: absolute;
+        text-shadow: -1px -1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000, 1px 1px 1px #000;
+    }
+
+#mapstore-mouseposition-mobile .label {
+        display: inline-block;
+        max-width: 280px;
+        min-width: 200px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        vertical-align: middle;
+}
+
+#mapstore-mouseposition-mobile .label-info {
+        background-color:rgba(91,192,222,0);
+        color: white;
+        font-size: 90%;
+}
diff --git a/web/client/components/misc/spinners/GlobalSpinner/GlobalSpinner.jsx b/web/client/components/misc/spinners/GlobalSpinner/GlobalSpinner.jsx
index 5179a8279e..4aff0b587a 100644
--- a/web/client/components/misc/spinners/GlobalSpinner/GlobalSpinner.jsx
+++ b/web/client/components/misc/spinners/GlobalSpinner/GlobalSpinner.jsx
@@ -7,6 +7,7 @@
  */
 const React = require('react');
 const Spinner = require('react-spinkit');
+require('./css/GlobalSpinner.css');
 
 const GlobalSpinner = React.createClass({
     propTypes: {
diff --git a/web/client/components/misc/spinners/GlobalSpinner/css/GlobalSpinner.css b/web/client/components/misc/spinners/GlobalSpinner/css/GlobalSpinner.css
new file mode 100644
index 0000000000..02544671b1
--- /dev/null
+++ b/web/client/components/misc/spinners/GlobalSpinner/css/GlobalSpinner.css
@@ -0,0 +1,6 @@
+#mapstore-globalspinner  {
+    margin: 0 !important;
+    width: 40px !important;
+    position:static !important;
+    border-radius: 0 !important;
+}
diff --git a/web/client/components/security/css/security.css b/web/client/components/security/css/security.css
new file mode 100644
index 0000000000..b35deaec57
--- /dev/null
+++ b/web/client/components/security/css/security.css
@@ -0,0 +1,6 @@
+#mapstore-login-panel {
+    width: 300px;
+}
+#mapstore-login-panel button {
+    float: right !important;
+}
diff --git a/web/client/components/security/modals/LoginModal.jsx b/web/client/components/security/modals/LoginModal.jsx
index 841cbae86e..5300deb6d7 100644
--- a/web/client/components/security/modals/LoginModal.jsx
+++ b/web/client/components/security/modals/LoginModal.jsx
@@ -13,6 +13,7 @@ const Message = require('../../../components/I18N/Message');
 const Dialog = require('../../misc/Dialog');
 const LocaleUtils = require('../../../utils/LocaleUtils');
 
+require('../css/security.css');
 const assign = require('object-assign');
 
   /**
diff --git a/web/client/components/share/SharePanel.jsx b/web/client/components/share/SharePanel.jsx
index 39b0d8eaf4..febdb23df4 100644
--- a/web/client/components/share/SharePanel.jsx
+++ b/web/client/components/share/SharePanel.jsx
@@ -62,7 +62,7 @@ let SharePanel = React.createClass({
                     <span className="share-panel-title">
                         <Message msgId="share.title"/>
                     </span>
-                    <button onClick={this.props.onClose} className="print-panel-close close">
+                    <button onClick={this.props.onClose} className="share-panel-close close">
                         {this.props.closeGlyph ? <Glyphicon glyph={this.props.closeGlyph}/> : <span>×</span>}
                     </button>
                 </span>
diff --git a/web/client/plugins/Map.jsx b/web/client/plugins/Map.jsx
index 6644f214e0..950b01e5c4 100644
--- a/web/client/plugins/Map.jsx
+++ b/web/client/plugins/Map.jsx
@@ -11,7 +11,7 @@ const {connect} = require('react-redux');
 const {createSelector} = require('reselect');
 
 var Spinner = require('react-spinkit');
-
+require('./map/css/map.css');
 
 const Message = require('../components/I18N/Message');
 
diff --git a/web/client/plugins/Settings.jsx b/web/client/plugins/Settings.jsx
index d242a651ad..563830d6b4 100644
--- a/web/client/plugins/Settings.jsx
+++ b/web/client/plugins/Settings.jsx
@@ -18,6 +18,7 @@ const LangBar = connect((state) => ({
     onLanguageChange: loadLocale.bind(null, null)
 })(require('../components/I18N/LangBar'));
 
+require('./settings/css/settings.css');
 
 const HistoryBar = require('../components/mapcontrols/navigationhistory/HistoryBar');
 const { ActionCreators } = require('redux-undo');
diff --git a/web/client/plugins/drawer/drawer.css b/web/client/plugins/drawer/drawer.css
index 067208ff88..4104bc4dbc 100644
--- a/web/client/plugins/drawer/drawer.css
+++ b/web/client/plugins/drawer/drawer.css
@@ -116,7 +116,10 @@ div.nav-menu {
     padding: 5px;
 }
 
-
 .navButtons {
     float: right;
 }
+
+#drawer-menu-button {
+     position: absolute;
+}
diff --git a/web/client/plugins/map/css/map.css b/web/client/plugins/map/css/map.css
new file mode 100644
index 0000000000..7a5e974452
--- /dev/null
+++ b/web/client/plugins/map/css/map.css
@@ -0,0 +1,4 @@
+.mapErrorMessage {
+    font-size: 16px;
+    color: red;
+}
diff --git a/web/client/plugins/maploading/maploading.css b/web/client/plugins/maploading/maploading.css
index 7f81a08a4e..73efdb78f4 100644
--- a/web/client/plugins/maploading/maploading.css
+++ b/web/client/plugins/maploading/maploading.css
@@ -29,3 +29,20 @@
     padding-top: 4px;
     box-shadow: none;
 }
+
+
+.ms2-loading {
+    background-color: #078aa3 !important;
+    border-bottom: 2px solid #5C9FB4 !important;
+}
+
+.ms2-loading .circle-wrapper {
+    width: 30px;
+    height: 30px;
+    margin-left: 10px !important;
+    margin-top: 10px !important;
+}
+
+.ms2-loading .circle-wrapper .circle:before {
+    background-color: white !important;
+}
diff --git a/web/client/plugins/metadataexplorer/css/style.css b/web/client/plugins/metadataexplorer/css/style.css
index d9cd604675..ed95b5e246 100644
--- a/web/client/plugins/metadataexplorer/css/style.css
+++ b/web/client/plugins/metadataexplorer/css/style.css
@@ -44,3 +44,7 @@ div.record-grid .record-item .record-buttons {
     width: 98%;
     margin-top: 10px;
 }
+
+#mapstore-catalog-panel .record-item {
+    min-height: 150px;
+}
diff --git a/web/client/plugins/print/print.css b/web/client/plugins/print/print.css
index 72a9bba6f0..4b2661ce8b 100644
--- a/web/client/plugins/print/print.css
+++ b/web/client/plugins/print/print.css
@@ -91,3 +91,76 @@
 .print-legend-options .panel-title a:hover{
     color: #d6d6d6;
 }
+
+
+@media (min-width: 992px) {
+    #mapstore-print-panel {
+        width: 825px;
+    }
+}
+
+@media (max-width: 991px) {
+    #mapstore-print-panel {
+        width: 700px;
+    }
+}
+
+@media (max-width: 767px) {
+    #mapstore-print-panel {
+        width: 98%;
+    }
+}
+
+#mapstore-print-panel .modal-body .print-mappreview-refresh {
+    top: -96px;
+}
+
+#mapstore-print-panel .print-submit {
+    float: right;
+}
+
+@media (min-width: 768px) {
+    #mapstore-print-panel input[type=radio] {
+        margin: 0 8px 0 20px;
+    }
+}
+
+#mapstore-print-panel .print-map-preview {
+    margin-bottom: 15px;
+}
+
+#mapstore-print-panel .panel-default {
+    border: none;
+}
+
+#mapstore-print-panel .panel-heading .panel-title {
+    font-weight: bold;
+}
+
+#mapstore-print-panel .panel-heading {
+    padding-left: 0;
+    background-color: transparent;
+}
+
+#mapstore-print-panel .panel-body {
+    padding: 10px;
+    border: solid 1px #078AA3;
+}
+
+#mapstore-print-panel .form-control {
+    padding: 0 10px;
+    height: 25px;
+}
+
+#mapstore-print-panel .print-download {
+    margin-right: 10px;
+}
+
+#mapstore-print-panel .print-download a {
+    color: white;
+}
+
+#mapstore-print-panel .print-legend-options .container-fluid {
+    padding-left: 0;
+    padding-right: 0;
+}
diff --git a/web/client/plugins/scalebox/scalebox.css b/web/client/plugins/scalebox/scalebox.css
index 387fe45021..d9c72d4e49 100644
--- a/web/client/plugins/scalebox/scalebox.css
+++ b/web/client/plugins/scalebox/scalebox.css
@@ -4,4 +4,15 @@
     left: -2px;
     position: absolute;
     margin: 8px;
+    width: 148px;
+}
+
+#mapstore-scalebox-container {
+    z-index: 10;
+    bottom: -16px !important;
+    right: 55px;
+    left: auto !important;
+    position: absolute;
+    margin: 8px;
+    width: 148px;
 }
diff --git a/web/client/plugins/settings/css/settings.css b/web/client/plugins/settings/css/settings.css
new file mode 100644
index 0000000000..44e76f469c
--- /dev/null
+++ b/web/client/plugins/settings/css/settings.css
@@ -0,0 +1,21 @@
+
+#mapstore-settings .btn-group {
+    width: auto;
+    float: right;
+}
+
+#mapstore-settings .modal-body #mapstore-mousepositionsettings button {
+    float: none;
+    margin-left: 40%;
+}
+
+#mapstore-settings .modal-body #mapstore-mousepositionsettings select {
+    float: none;
+    margin-left: 40%;
+}
+
+#mapstore-settings .modal-body .form-group {
+    margin-top: 15px;
+    border-top: solid 1px #EEE;
+    padding-top: 10px;
+}
diff --git a/web/client/plugins/shapefile/ShapeFile.jsx b/web/client/plugins/shapefile/ShapeFile.jsx
index f6abbc8a0a..9c020c7971 100644
--- a/web/client/plugins/shapefile/ShapeFile.jsx
+++ b/web/client/plugins/shapefile/ShapeFile.jsx
@@ -16,6 +16,7 @@ const {Glyphicon, Panel} = require('react-bootstrap');
 
 const Dialog = require('../../components/misc/Dialog');
 
+require('./css/shapeFile.css');
 const ShapeFile = React.createClass({
     propTypes: {
         id: React.PropTypes.string,
diff --git a/web/client/plugins/shapefile/css/shapeFile.css b/web/client/plugins/shapefile/css/shapeFile.css
new file mode 100644
index 0000000000..57eea8c1a5
--- /dev/null
+++ b/web/client/plugins/shapefile/css/shapeFile.css
@@ -0,0 +1,7 @@
+#mapstore-shapefile-upload {
+    width: 300px;
+}
+
+#mapstore-shapefile-upload button {
+    float: right;
+}
diff --git a/web/client/plugins/toolbar/assets/css/toolbar.css b/web/client/plugins/toolbar/assets/css/toolbar.css
index c71180c69c..a7f7fac521 100644
--- a/web/client/plugins/toolbar/assets/css/toolbar.css
+++ b/web/client/plugins/toolbar/assets/css/toolbar.css
@@ -22,3 +22,19 @@
   opacity: 0.01;
   transition: opacity 300ms ease-in;
 }
+
+#navigationBar .mapToolbar {
+    top: auto !important;
+    bottom: 5px;
+    right: 0 !important;
+}
+
+#navigationBar .toolbar-panel {
+    bottom: 80px !important;
+}
+
+#identifyBar .mapToolbar {
+    top: auto !important;
+    bottom: 5px;
+    right: 212px !important;
+}
diff --git a/web/client/product/assets/css/manager.css b/web/client/product/assets/css/manager.css
index 51fed01c08..93e835d122 100644
--- a/web/client/product/assets/css/manager.css
+++ b/web/client/product/assets/css/manager.css
@@ -22,3 +22,7 @@
 #page-manager .Manager-Container {
     margin: 0;
 }
+
+#page-manager #home-button {
+    float: right;
+}
diff --git a/web/client/product/assets/css/viewer.css b/web/client/product/assets/css/viewer.css
index c2e59146f4..e1559fda4d 100644
--- a/web/client/product/assets/css/viewer.css
+++ b/web/client/product/assets/css/viewer.css
@@ -14,62 +14,15 @@ html, body, #container, .fill {
     padding: 0;
     overflow: hidden;
 }
+
 #home-button {
     float: left;
 }
-#page-manager #home-button {
-    float: right;
-}
-.hidden {
-    display: none !important;
-}
 
-.react-draggable .panel-heading {
-    cursor: move;
-}
-
-.btn-xs {
-    font-size: 15px;
-}
-.ol-attribution li:first-child{
-    display:none;
+.ol-attribution li:first-child, .leaflet-control-attribution a:first-child{
+    display: none;
     visibility: hidden;
 }
-.leaflet-control-attribution a:first-child{
-    display:none;
-    visibility: hidden;
-}
-.Sortable {
-  position: relative;
-  display: block;
-  overflow: visible;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-}
-
-.SortableItem {
-  cursor: -webkit-grab; cursor:-moz-grab; cursor: grab;
-}
-
-.SortableItem.is-dragging {
-  cursor: move;
-  position: absolute;
-  z-index: 1688;
-  background-color: rgba(218, 218, 218, 0.8);;
-  border: 1px dashed #8E8E8E;
-  border-radius: 5px;
-  box-shadow: 4px 4px 9px rgba(0, 0, 0, 0.28);
-}
-
-.SortableItem.is-placeholder {
-  border: 1px dashed #8E8E8E;
-  border-radius: 5px;
-}
-
-.SortableItem.is-undraggable {
-  cursor: not-allowed;
-}
 
 .map-logo{
 	position:absolute;
@@ -102,20 +55,6 @@ html, body, #container, .fill {
 	background-size:contain;
 }
 
-#mapstore-scalebox-container {
-    z-index: 10;
-    bottom: -16px !important;
-    right: 55px;
-    left: auto !important;
-    position: absolute;
-    margin: 8px;
-    width: 148px;
-}
-
-#mapstore-scalebox {
-    width: 148px;
-}
-
 .leafletbottom.leafletright, .leaflet-control-minimap{
     bottom: 47px !important;
     right: 49px !important;
@@ -150,441 +89,3 @@ html, body, #container, .fill {
     left: auto;
     bottom: 3px;
 }
-
-#navigationBar .mapToolbar {
-    top: auto !important;
-    bottom: 5px;
-    right: 0 !important;
-}
-
-#navigationBar .toolbar-panel {
-    bottom: 80px !important;
-}
-
-#identifyBar .mapToolbar {
-    top: auto !important;
-    bottom: 5px;
-    right: 212px !important;
-}
-
-.panel-close {
-    float: right;
-    width: 10px;
-    cursor: pointer;
-}
-
-#mapstore-mousepositionsettings .form-group {
-    margin-bottom: 0 !important;
-}
-
-#mapstore-mousepositionsettings select, #mapstore-mousepositionsettings button {
-    width: 60% !important;
-    float: right;
-    height: 35px;
-}
-
-#mapstore-mousepositionsettings label {
-    width: 100% !important;
-}
-
-#mapstore-globalspinner  {
-    margin: 0 !important;
-    width: 40px !important;
-    position:static !important;
-    border-radius: 0 !important;
-}
-
-#mapstore-mouseposition .label-info {
-    white-space: normal !important;
-    color: black !important;
-    font-size: 110%;
-    padding: 0 !important;
-}
-
-#mapstore-mouseposition {
-    bottom: 5px !important;
-    right: 264px !important;
-    top: auto !important;
-    margin: 0 !important;
-    text-shadow: none !important;
-    background-color: white !important;
-    width: 160px !important;
-    height: 46px !important;
-    padding-left: 5px;
-    padding-top: 2px;
-}
-
-#mapstore-mouseposition h5 {
-    margin-top: 5px !important;
-}
-
-.mouseposition-separator {
-    display: block;
-}
-
-#drawer-menu-button {
-     position: absolute;
-}
-
-
-.swipe-header-left-button {
-    float: none !important;
-    right: 45px;
-    top: 4px;
-    position: absolute;
-}
-
-.swipe-header-right-button {
-    float: none !important;
-    position: absolute;
-    top: 4px;
-    right: 5px;
-}
-
-#mapstore-identify-revgeocoder {
-    min-height: 40px;
-    margin-bottom: 10px;
-    border-bottom: solid 1px #BBB;
-}
-
-#mapstore-getfeatureinfo {
-    max-width: 100%;
-}
-
-@media (min-width: 500px) {
-    #mapstore-getfeatureinfo {
-        min-width: 500px !important;
-    }
-}
-
-#mapstore-getfeatureinfo .swipeable-view .panel-heading {
-    background-color: white;
-    border: none;
-    height: 60px;
-    padding: 0;
-}
-
-#mapstore-getfeatureinfo .swipeable-view .panel {
-    border: none;
-}
-
-#mapstore-getfeatureinfo .modal-body .panel-body {
-    padding: 0;
-}
-
-#mapstore-getfeatureinfo .swipeable-view .panel-heading .swipe-header-left-button {
-    right: 55px;
-    top: 0;
-}
-
-#mapstore-getfeatureinfo .swipeable-view .panel-heading .swipe-header-right-button {
-    top: 0;
-}
-
-#mapstore-getfeatureinfo .swipeable-view .panel-title {
-    font-weight: bold;
-}
-
-#mapstore-settings .btn-group {
-    width: auto;
-    float: right;
-}
-
-#mapstore-settings .modal-body #mapstore-mousepositionsettings button {
-    float: none;
-    margin-left: 40%;
-}
-
-#mapstore-settings .modal-body #mapstore-mousepositionsettings select {
-    float: none;
-    margin-left: 40%;
-}
-
-#mapstore-settings .modal-body .form-group {
-    margin-top: 15px;
-    border-top: solid 1px #EEE;
-    padding-top: 10px;
-}
-
-.modal-header button.close {
-    margin-top: -7px;
-    opacity: 1;
-}
-
-.modal-header button.close:hover {
-    opacity: 0.5;
-    color: white;
-}
-
-.modal-header button.close:focus {
-    opacity: 0.5;
-    color: white;
-}
-
-@media (min-width: 992px) {
-    #mapstore-print-panel {
-        width: 825px;
-    }
-}
-
-@media (max-width: 991px) {
-    #mapstore-print-panel {
-        width: 700px;
-    }
-}
-
-@media (max-width: 767px) {
-    #mapstore-print-panel {
-        width: 98%;
-    }
-}
-
-.panel-close:after {
-    content: 'x';
-}
-
-#mapstore-print-panel .modal-body .print-mappreview-refresh {
-    top: -96px;
-}
-
-#mapstore-print-panel .print-submit {
-    float: right;
-}
-
-@media (min-width: 768px) {
-    #mapstore-print-panel input[type=radio] {
-        margin: 0 8px 0 20px;
-    }
-}
-
-#mapstore-print-panel .print-map-preview {
-    margin-bottom: 15px;
-}
-
-#mapstore-print-panel .panel-default {
-    border: none;
-}
-
-#mapstore-print-panel .panel-heading .panel-title {
-    font-weight: bold;
-}
-
-#mapstore-print-panel .panel-heading {
-    padding-left: 0;
-    background-color: transparent;
-}
-
-#mapstore-print-panel .panel-body {
-    padding: 10px;
-    border: solid 1px #078AA3;
-}
-
-#mapstore-print-panel .form-control {
-    padding: 0 10px;
-    height: 25px;
-}
-
-#mapstore-print-panel .print-download {
-    margin-right: 10px;
-}
-
-#mapstore-print-panel .print-download a {
-    color: white;
-}
-
-#mapstore-print-panel .print-legend-options .container-fluid {
-    padding-left: 0;
-    padding-right: 0;
-}
-
-#mapstore-snapshot-panel {
-    position: absolute;
-    right: 200px;
-    min-width: 725px;
-}
-
-#mapstore-catalog-panel .record-item {
-    min-height: 150px;
-}
-
-#mapstore-about {
-    position: fixed;
-    top: 0;
-    left: calc(50% - 500px);
-    width: 500px;
-}
-
-#mapstore-login-panel {
-    width: 300px;
-}
-#mapstore-login-panel button {
-    float: right !important;
-}
-
-.modal {
-    overflow-y: auto !important;
-}
-
-.draggable-header {
-    cursor: move;
-}
-
-.ms2-loading {
-    background-color: #078aa3 !important;
-    border-bottom: 2px solid #5C9FB4 !important;
-}
-
-.ms2-loading .circle-wrapper {
-    width: 30px;
-    height: 30px;
-    margin-left: 10px !important;
-    margin-top: 10px !important;
-}
-
-.ms2-loading .circle-wrapper .circle:before {
-    background-color: white !important;
-}
-
-.modal-body {
-    background-color: white;
-}
- #mapstore-print-panel .modal-body {
-    max-height: calc(100vh - 190px);
-    overflow-y: auto;
-}
-
-#mapstore-shapefile-upload {
-    width: 300px;
-}
-
-#mapstore-shapefile-upload button {
-    float: right;
-}
-
-#mapstore-layer-settings {
-    min-width: 400px;
-}
-
-#mapstore-layer-settings .noUi-background {
-    background:#CCC;
-}
-
-#mapstore-layer-settings .noUi-horizontal {
-    height: 2px;
-	width: 260px;
-	margin:auto;
-}
-#mapstore-layer-settings .noUi-target {
-    position: relative;
-    direction: ltr;
-}
-
-#mapstore-layer-settings .noUi-base {
-    width: 100%;
-    height: 100%;
-    position: relative;
-    z-index: 1;
-}
-
-#mapstore-layer-settings .noUi-horizontal .noUi-handle {
-    width: 23px;
-    height: 23px;
-    top: -10px;
-}
-
-#mapstore-layer-settings .noUi-handle {
-    background: #078AA3;
-    cursor: default;
-	border-radius:50px;
-}
-
-#mapstore-layer-settings .noUi-handle {
-    position: relative;
-    z-index: 1;
-}
-#mapstore-layer-settings .noUi-target, .noUi-target * {
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -ms-touch-action: none;
-    touch-action: none;
-    -ms-user-select: none;
-    -moz-user-select: none;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-}
-
-#mapstore-layer-settings .noUi-target {
-    position: relative;
-    direction: ltr;
-}
-
-#mapstore-layer-settings .noUi-target {
-    width: 94%;
-    margin-bottom: 10px;
-}
-
-#mapstore-layer-settings .noUi-handle:before, #mapstore-layer-settings .noUi-handle:after {
-    background: none;
-}
-
-.btn .badge {
-    position: absolute;
-    top: -10px;
-    left: -10px;
-}
-
-.themed .btn .badge {
-    top: -35px;
-    left: -50px;
-}
-
-#helpbadge-scaleBox {
-    left: 0 !important;
-    background-color: #078aa3;
-    color: #ffffff;
-}
-
-#mapstore-navbar #helpbadge-search-help {
-    position: absolute;
-    left: -10px;
-    bottom: -8px;
-    z-index: 1;
-    background-color: #078aa3;
-    color: #ffffff;
-}
-
-.badge {
-    cursor: pointer;
-}
-
-#navigationBar #locate-btn {
-    position: static;
-}
-#mapstore-mouseposition-mobile {
-        bottom: 25px;
-        right: 30px;
-        z-index: 10;
-        position: absolute;
-        text-shadow: -1px -1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000, 1px 1px 1px #000;
-    }
-
-#mapstore-mouseposition-mobile .label {
-        display: inline-block;
-        max-width: 280px;
-        min-width: 200px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        vertical-align: middle;
-}
-
-#mapstore-mouseposition-mobile .label-info {
-        background-color:rgba(91,192,222,0);
-        color: white;
-        font-size: 90%;
-}
-
-.mapErrorMessage {
-    font-size: 16px;
-    color: red;
-}
diff --git a/web/client/product/pages/Maps.jsx b/web/client/product/pages/Maps.jsx
index f5ad95a999..b1bccede11 100644
--- a/web/client/product/pages/Maps.jsx
+++ b/web/client/product/pages/Maps.jsx
@@ -7,7 +7,7 @@
  */
 const React = require('react');
 
-require('../assets/css/viewer.css');
+require("../assets/css/maps.css");
 
 const {connect} = require('react-redux');
 
@@ -20,7 +20,6 @@ const {loadMapConfig} = require('../../actions/config');
 const {resetControls} = require('../../actions/controls');
 
 const Page = require('../../containers/Page');
-require("../assets/css/maps.css");
 
 const MapsPage = React.createClass({
     propTypes: {