diff --git a/src/controls/legend/overlayproperties.js b/src/controls/legend/overlayproperties.js
index bc66825bd..91c4ba052 100644
--- a/src/controls/legend/overlayproperties.js
+++ b/src/controls/legend/overlayproperties.js
@@ -65,7 +65,7 @@ const OverlayProperties = function OverlayProperties(options = {}) {
   function getStyleDisplayName(styleName) {
     let altStyle = stylePicker.find(s => s.style === styleName);
     if (!altStyle) {
-      altStyle = stylePicker.find(s => s.default);
+      altStyle = stylePicker.find(s => s.defaultWMSServerStyle);
     }
     return (altStyle && altStyle.title) || styleName;
   }
@@ -75,27 +75,33 @@ const OverlayProperties = function OverlayProperties(options = {}) {
     const altStyle = stylePicker[altStyleIndex];
     styleSelection.setButtonText(styleTitle);
     const legendCmp = document.getElementById(legendComponent.getId());
-    if (!layer.get('defaultStyle')) layer.setProperties({ defaultStyle: layer.get('styleName') });
+    if (!layer.get('defaultStyle')) {
+      layer.setProperties({ defaultStyle: layer.get('styleName') });
+    }
     layer.setProperties({ altStyleIndex });
+
     if (layer.get('type') === 'WMS') {
       const layerSource = layer.get('source');
       const sourceParams = layerSource.getParams();
       let styleToSet = altStyle.style;
-      if (altStyle.default) {
-        sourceParams.STYLES = altStyle.style;
+
+      if (altStyle.initialStyle) {
         styleToSet = layer.get('defaultStyle');
-      } else {
-        sourceParams.STYLES = styleToSet;
+      } else if (altStyle.defaultWMSServerStyle) {
+        styleToSet = `${layer.get('name')}_WMSServerDefault`;
       }
+
+      sourceParams.STYLES = altStyle.defaultWMSServerStyle ? '' : styleToSet;
       layerSource.refresh();
       layer.set('styleName', styleToSet);
       let maxResolution;
       if (!(altStyle.legendParams) || !(Object.keys(altStyle.legendParams).find(key => key.toUpperCase() === 'SCALE'))) {
         maxResolution = viewer.getResolutions()[viewer.getResolutions().length - 1];
       }
-
+      let styleNameParam = styleToSet;
+      if (altStyle.defaultWMSServerStyle) styleNameParam = '';
       const getLegendString = layerSource.getLegendUrl(maxResolution, {
-        STYLE: styleToSet,
+        STYLE: styleNameParam,
         ...altStyle.legendParams
       });
       const newWmsStyle = [[{
@@ -110,6 +116,7 @@ const OverlayProperties = function OverlayProperties(options = {}) {
       layer.dispatchEvent('change:style');
       return;
     }
+
     layer.set('styleName', altStyle.style);
     legendCmp.innerHTML = Legend(viewer.getStyle(altStyle.style), opacity);
     const newStyle = Style.createStyle({ style: altStyle.style, clusterStyleName: altStyle.clusterStyle, viewer });
diff --git a/src/layer/wms.js b/src/layer/wms.js
index d5f2e1d9f..a925c03d3 100644
--- a/src/layer/wms.js
+++ b/src/layer/wms.js
@@ -37,30 +37,45 @@ function createImageSource(options) {
   }));
 }
 
-function createWmsStyle(wmsOptions, source, viewer, defaultStyle = true) {
-  let altStyleLegendParams;
+function createWmsStyle({ wmsOptions, source, viewer, initialStyle = false }) {
   let maxResolution = viewer.getResolutions()[viewer.getResolutions().length - 1];
+  let newStyle;
 
-  if (!(defaultStyle) && (wmsOptions.stylePicker)) {
-    const altStyle = wmsOptions.stylePicker.find(style => style.style === wmsOptions.styleName);
-    if (altStyle.legendParams) {
-      altStyleLegendParams = altStyle.legendParams;
-      if (Object.keys(altStyle.legendParams).find(key => key.toUpperCase() === 'SCALE')) {
-        maxResolution = null;
-      }
+  if (initialStyle) {
+    if (wmsOptions.stylePicker) {
+      newStyle = wmsOptions.stylePicker.find(style => style.initialStyle);
+    } else {
+      newStyle = {
+        defaultWMSServerStyle: true,
+        hasThemeLegend: wmsOptions.hasThemeLegend || false,
+        legendParams: wmsOptions.legendParams || false
+      };
     }
+  } else {
+    newStyle = wmsOptions.stylePicker[wmsOptions.altStyleIndex];
   }
 
-  const styleName = defaultStyle ? `${wmsOptions.name}_WMSDefault` : wmsOptions.styleName;
-  const getLegendString = defaultStyle ? source.getLegendUrl(maxResolution, wmsOptions.legendParams) : source.getLegendUrl(maxResolution, {
-    STYLE: styleName,
-    ...altStyleLegendParams
-  });
-  let hasThemeLegend = wmsOptions.hasThemeLegend || false;
-  if (!defaultStyle) {
-    hasThemeLegend = wmsOptions.stylePicker[wmsOptions.altStyleIndex].hasThemeLegend || false;
+  const legendParams = wmsOptions.stylePicker ? newStyle.legendParams : wmsOptions.legendParams;
+
+  if ((legendParams) && (Object.keys(legendParams).find(key => key.toUpperCase() === 'SCALE'))) {
+    maxResolution = null;
   }
 
+  let getLegendString;
+  let styleName;
+
+  if (newStyle.defaultWMSServerStyle) {
+    getLegendString = source.getLegendUrl(maxResolution, legendParams);
+    styleName = `${wmsOptions.name}_WMSServerDefault`;
+  } else {
+    getLegendString = source.getLegendUrl(maxResolution, {
+      STYLE: newStyle.style,
+      ...legendParams
+    });
+    styleName = newStyle.style;
+  }
+
+  const hasThemeLegend = newStyle.hasThemeLegend || false;
   const style = [[{
     icon: {
       src: `${getLegendString}`
@@ -74,14 +89,33 @@ function createWmsStyle(wmsOptions, source, viewer, defaultStyle = true) {
 function createWmsLayer(wmsOptions, source, viewer) {
   const wmsOpts = wmsOptions;
   const wmsSource = source;
-  if (wmsOpts.styleName === 'default') {
-    wmsOpts.styleName = createWmsStyle(wmsOptions, source, viewer);
-    wmsOpts.style = wmsOptions.styleName;
-  } else if (wmsOptions.altStyleIndex > -1) {
-    wmsOpts.defaultStyle = createWmsStyle(wmsOptions, source, viewer);
-    wmsOpts.styleName = createWmsStyle(wmsOptions, source, viewer, false);
+
+  function setInitialStyle() {
+    if (!(wmsOpts.stylePicker.some(style => style.initialStyle === true))) {
+      wmsOpts.stylePicker[0].initialStyle = true;
+    }
+  }
+
+  if (wmsOptions.stylePicker) {
+    setInitialStyle();
+    let pickedStyle;
+    if (wmsOptions.altStyleIndex > -1) {
+      wmsOpts.defaultStyle = createWmsStyle({ wmsOptions, source, viewer, initialStyle: true });
+      wmsOpts.styleName = createWmsStyle({ wmsOptions, source, viewer });
+      wmsOpts.style = wmsOptions.styleName;
+      pickedStyle = wmsOptions.stylePicker[wmsOptions.altStyleIndex];
+    } else {
+      wmsOpts.styleName = createWmsStyle({ wmsOptions, source, viewer, initialStyle: true });
+      wmsOpts.defaultStyle = wmsOpts.styleName;
+      wmsOpts.style = wmsOptions.styleName;
+      pickedStyle = wmsOpts.stylePicker.find(style => style.initialStyle === true);
+    }
+    if (!(pickedStyle.defaultWMSServerStyle)) {
+      wmsSource.getParams().STYLES = wmsOptions.styleName;
+    }
+  } else if (wmsOpts.styleName === 'default') {
+    wmsOpts.styleName = createWmsStyle({ wmsOptions, source, viewer, initialStyle: true });
     wmsOpts.style = wmsOptions.styleName;
-    wmsSource.getParams().STYLES = wmsOptions.styleName;
   }
 }
 
@@ -104,9 +138,11 @@ const wms = function wms(layerOptions, viewer) {
   sourceOptions.projection = viewer.getProjection();
   sourceOptions.id = wmsOptions.id;
   sourceOptions.format = wmsOptions.format ? wmsOptions.format : sourceOptions.format;
-  const styleSettings = viewer.getStyle(wmsOptions.styleName);
-  const wmsStyleObject = styleSettings ? styleSettings[0].find(s => s.wmsStyle) : undefined;
-  sourceOptions.style = wmsStyleObject ? wmsStyleObject.wmsStyle : '';
+  if (!wmsOptions.stylePicker) {
+    const styleSettings = viewer.getStyle(wmsOptions.styleName);
+    const wmsStyleObject = styleSettings ? styleSettings[0].find(s => s.wmsStyle) : undefined;
+    sourceOptions.style = wmsStyleObject ? wmsStyleObject.wmsStyle : '';
+  }
 
   if (wmsOptions.tileGrid) {
     sourceOptions.tileGrid = maputils.tileGrid(wmsOptions.tileGrid);
diff --git a/src/viewer.js b/src/viewer.js
index 710ccc59b..e8442369f 100644
--- a/src/viewer.js
+++ b/src/viewer.js
@@ -343,7 +343,14 @@ const Viewer = function Viewer(targetOption, options = {}) {
             const altStyle = initialProps.stylePicker[savedLayerProps[layerName].altStyleIndex];
             savedProps.clusterStyle = altStyle.clusterStyle;
             savedProps.style = altStyle.style;
-            savedProps.defaultStyle = initialProps.style;
+            if (initialProps.type === 'WMS') {
+              let WMSStylePickerInitialStyle = initialProps.stylePicker.find(style => style.initialStyle);
+              if (WMSStylePickerInitialStyle === undefined) {
+                WMSStylePickerInitialStyle = initialProps.stylePicker[0];
+                WMSStylePickerInitialStyle.initialStyle = true;
+              }
+              savedProps.defaultStyle = WMSStylePickerInitialStyle;
+            } else savedProps.defaultStyle = initialProps.style;
           }
           savedProps.name = initialProps.name;
           const mergedProps = Object.assign({}, initialProps, savedProps);