diff --git a/src/WguAppTemplate.vue b/src/WguAppTemplate.vue
index 5570dc78..c3bdd1b6 100644
--- a/src/WguAppTemplate.vue
+++ b/src/WguAppTemplate.vue
@@ -33,6 +33,9 @@
         :color="baseColor"
         :draggable="moduleWin.draggable"
         :initPos="moduleWin.initPos"
+        :width="moduleWin.width"
+        :title="moduleWin.title"
+        :icon="moduleWin.icon"
       />
     </template>
 
@@ -63,6 +66,7 @@
   import LayerListWin from './components/layerlist/LayerListWin'
   import InfoClickWin from './components/infoclick/InfoClickWin'
   import MapLoadingStatus from './components/progress/MapLoadingStatus'
+  import FeatureInfoWindow from './components/FeatureInfoWindow'
 
   export default {
     name: 'wgu-app-tpl',
@@ -74,7 +78,8 @@
       'wgu-measuretool-win': MeasureWin,
       'wgu-layerlist-win': LayerListWin,
       'wgu-infoclick-win': InfoClickWin,
-      'wgu-maploading-status': MapLoadingStatus
+      'wgu-maploading-status': MapLoadingStatus,
+      'wgu-feature-info-window-win': FeatureInfoWindow
     },
     data () {
       return {
@@ -121,7 +126,10 @@
             moduleWins.push({
               type: key + '-win',
               draggable: moduleOpts.draggable,
-              initPos: moduleOpts.initPos
+              initPos: moduleOpts.initPos,
+              title: moduleOpts.title,
+              width: moduleOpts.width,
+              icon: moduleOpts.icon
             });
           }
         }
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index bb5f2520..0bee9ba6 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -10,7 +10,7 @@
     <!-- slot to inject components at the beginning (before title) -->
     <slot name="wgu-tb-start"></slot>
 
-    <v-toolbar-title>{{title}}</v-toolbar-title>
+    <v-toolbar-title><span v-html="title"/></v-toolbar-title>
 
     <!-- slot to inject components after the title text -->
     <slot name="wgu-tb-after-title"></slot>
diff --git a/src/components/AppLogo.vue b/src/components/AppLogo.vue
index a42e2cb9..9399c8a0 100644
--- a/src/components/AppLogo.vue
+++ b/src/components/AppLogo.vue
@@ -1,13 +1,22 @@
 <template>
+  <div>
+    <!-- Logo content maybe either avatar and/or text -->
+    <v-avatar
+       v-if="logoSrc"
+       :size="logoSize"
+       :tile="true"
+       class="wgu-app-logo"
+      >
+      <img :src="logoSrc" alt="App Logo">
+    </v-avatar>
 
-  <v-avatar
-     v-if="!!logoSrc"
-     :size="logoSize"
-     :tile="true"
-     class="wgu-app-logo"
-    >
-    <img :src="logoSrc" alt="App Logo">
-  </v-avatar>
+    <div
+       v-if="logoText"
+       class="wgu-app-logo"
+      >
+      <span v-html="logoText"/>
+    </div>
+  </div>
 
 </template>
 
@@ -18,7 +27,8 @@ export default {
   data () {
     return {
       logoSrc: this.$appConfig.logo,
-      logoSize: this.$appConfig.logoSize
+      logoSize: this.$appConfig.logoSize,
+      logoText: this.$appConfig.logoText
     }
   }
 }
@@ -27,7 +37,7 @@ export default {
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style>
 
-  .v-avatar.v-avatar--tile.wgu-app-logo {
+  .v-avatar.v-avatar--tile.wgu-app-logo, div.wgu-app-logo {
     position: absolute;
     z-index: 2;
   }
diff --git a/src/components/FeatureInfoWindow.vue b/src/components/FeatureInfoWindow.vue
index 4d458ce9..19cf4c92 100644
--- a/src/components/FeatureInfoWindow.vue
+++ b/src/components/FeatureInfoWindow.vue
@@ -2,24 +2,24 @@
 
     <v-card
       class="wgu-feature-infowindow info-card"
-      v-draggable-win
+      v-draggable-win="draggable"
       v-if="this.feature !== null"
-      v-bind:style="{ left: left, top: top }" >
+      v-bind:style="{ left: left, top: top, width: width }" >
 
-        <v-toolbar class="red darken-3 white--text" dark>
+      <v-toolbar :color="color" class="" dark>
           <v-toolbar-side-icon><v-icon>{{icon}}</v-icon></v-toolbar-side-icon>
           <v-toolbar-title>{{title}}</v-toolbar-title>
           <v-spacer></v-spacer>
+          <v-toolbar-side-icon @click="onWinXClose"><v-icon>close</v-icon></v-toolbar-side-icon>
         </v-toolbar>
 
-        <v-card-media v-if="attributes[imageProp]" :src="attributes[imageProp]" height="200px" />
-        <v-card-title primary-title>
-          <div>
-            <h3 v-if="attributes[titleProp]" class="headline mb-0">{{attributes[titleProp]}}</h3>
-          </div>
+        <v-img v-if="attributes[imageProp]" :src="attributes[imageProp]" :width="imageWidth" :height="imageHeight" />
+        <v-card-title v-if="attributes[titleProp]" primary-title>
+            <h3 class="headline mb-0">{{attributes[titleProp]}}</h3>
         </v-card-title>
+        <v-card-text v-if="attributes[descProp]">{{attributes[descProp]}}</v-card-text>
         <v-card-actions>
-          <v-btn flat class="orange--text">More info...</v-btn>
+          <v-btn v-if="attributes[infoUrlProp]" flat color="blue" :href="attributes[infoUrlProp]" target="_blank">{{infoUrlText}}</v-btn>
         </v-card-actions>
     </v-card>
 
@@ -31,34 +31,66 @@ import { WguEventBus } from '../WguEventBus.js';
 import { DraggableWin } from '../directives/DraggableWin.js';
 
 export default {
-  name: 'wgu-feature-info-window',
+  name: 'wgu-feature-info-window-win',
   directives: {
     DraggableWin
   },
   props: {
-    layerId: {type: String, required: true},
-    imageProp: {type: String, required: false},
-    titleProp: {type: String, required: false},
-    icon: {type: String, required: false},
-    title: {type: String, required: false}
+    icon: {type: String, required: false, default: 'info'},
+    color: {type: String, required: false, default: 'red darken-3'},
+    draggable: {type: Boolean, required: false, default: true}
   },
   data () {
     return {
-      // will be filled in mounted
+      // will be filled in when mounted and when feature clicked
+      layers: null,
       feature: null,
       attributes: null,
-      left: '300px',
-      top: '200px'
+      width: null,
+      left: null,
+      top: null,
+      title: 'Feature Info',
+      titleProp: null,
+      imageProp: null,
+      descProp: null,
+      infoUrlProp: null,
+      infoUrlText: null,
+      imageHeight: null,
+      imageWidth: null
     }
   },
   mounted () {
-    var me = this;
+    const config = this.$appConfig.modules['wgu-feature-info-window'] || {};
+    this.layers = config.layers;
+    if (this.layers) {
+      // Using a regular expression to Match layers
+      this.layers.forEach(layer => { layer.layerId = new RegExp(layer.layerId) });
+    }
+    this.left = config.initPos ? this.initPos.left + 'px' : '300px';
+    this.top = config.initPos ? this.initPos.top + 'px' : '200px';
+    this.width = config.width ? config.width + 'px' : '350px';
 
     // listen to selection events of connected layer and apply attributes
-    WguEventBus.$on('map-selectionchange', function (layerId, selected, deselected) {
-      if (me.layerId === layerId) {
-        me.setFeature(selected[0]);
+    WguEventBus.$on('map-selectionchange', (layerId, selected, deselected) => {
+      if (selected.length === 0) {
+        return;
+      }
+      const layer = this.findLayer(layerId);
+      if (!layer) {
+        return;
       }
+      // {...layer}; TODO How to use Object Spread
+      this.layerId = layer.layerId;
+      this.title = layer.title || layer.titleProp || 'Feature Info';
+      this.titleProp = layer.titleProp;
+      this.descProp = layer.descProp;
+      this.imageProp = layer.imageProp;
+      this.imageHeight = layer.imageHeight;
+      this.imageWidth = layer.imageWidth;
+      this.infoUrlProp = layer.infoUrlProp;
+      this.infoUrlText = layer.infoUrlText || 'More info...';
+
+      this.setFeature(selected[0]);
     });
   },
   methods: {
@@ -67,16 +99,22 @@ export default {
      * @param {ol.Feature} feature The new feature
      */
     setFeature (feature) {
-      if (feature) {
-        this.feature = feature;
-        this.attributes = feature.getProperties();
-      } else {
-        this.feature = null;
-        this.attributes = null;
-      }
+      this.feature = feature;
+      this.attributes = this.feature ? this.feature.getProperties() : null;
+    },
+    /**
+     * Find a layer in our target Layer collection by layer name (layerId).
+     * @param {layerId} layerId layer name
+     */
+    findLayer (layerId) {
+      const targetLayerArr = this.layers.filter(layer => layerId.match(layer.layerId));
+      return targetLayerArr.length > 0 ? targetLayerArr[0] : null;
+    },
+    onWinXClose: function () {
+      // this.feature.deselected; TODO: how to deselect Feature on Map?
+      this.setFeature(null);
     }
   }
-
 }
 </script>
 
@@ -85,7 +123,6 @@ export default {
 
   .wgu-feature-infowindow.info-card {
     position: absolute;
-    width: 300px;
     background-color: white;
   }
 
diff --git a/src/components/ol/Map.vue b/src/components/ol/Map.vue
index 0f778465..41067a3f 100644
--- a/src/components/ol/Map.vue
+++ b/src/components/ol/Map.vue
@@ -120,7 +120,8 @@ export default {
         // if layer is selectable register a select interaction
         if (lConf.selectable) {
           const selectClick = new SelectInteraction({
-            layers: [layer]
+            layers: [layer],
+            style: layer.get('styleSelected') || undefined
           });
           // forward an event if feature selection changes
           selectClick.on('select', function (evt) {
diff --git a/src/factory/Layer.js b/src/factory/Layer.js
index bb702aed..0f1c82d0 100644
--- a/src/factory/Layer.js
+++ b/src/factory/Layer.js
@@ -147,6 +147,7 @@ export const LayerFactory = {
         attributions: lConf.attributions
       }),
       style: OlStyleFactory.getInstance(lConf.style),
+      styleSelected: OlStyleFactory.getInstance(lConf.styleSelected),
       hoverable: lConf.hoverable,
       hoverAttribute: lConf.hoverAttribute
     });
diff --git a/static/app-conf-projected.json b/static/app-conf-projected.json
index 9b4b706c..4cc5a497 100644
--- a/static/app-conf-projected.json
+++ b/static/app-conf-projected.json
@@ -28,6 +28,54 @@
   ],
 
   "mapLayers": [
+    {
+      "type": "VECTOR",
+      "lid": "dutch_windmills",
+      "name": "Dutch Windmills",
+      "url": "https://demo.pygeoapi.io/master/collections/dutch_windmills/items",
+      "formatConfig": {
+        "dataProjection": "EPSG:4326"
+       },
+      "format": "GeoJSON",
+      "visible": true,
+      "selectable": true,
+      "style": {
+        "iconUrl": "./static/icon/windmill2.png",
+        "anchor": [0.5, 37],
+        "anchorXUnits": "fraction",
+        "anchorYUnits": "pixels"
+      },
+      "styleSelected": {
+        "iconUrl": "./static/icon/windmill2-select.png",
+        "anchor": [0.5, 37],
+        "anchorXUnits": "fraction",
+        "anchorYUnits": "pixels"
+      }
+    },
+    {
+      "type": "VECTOR",
+      "lid": "dutch_castles",
+      "name": "Dutch Castles",
+      "url": "https://demo.pygeoapi.io/master/collections/dutch_castles/items",
+      "formatConfig": {
+        "dataProjection": "EPSG:4326"
+       },
+      "format": "GeoJSON",
+      "visible": true,
+      "selectable": true,
+      "style": {
+        "iconUrl": "./static/icon/castle2.png",
+        "anchor": [0.5, 37],
+        "anchorXUnits": "fraction",
+        "anchorYUnits": "pixels"
+      },
+      "styleSelected": {
+        "iconUrl": "./static/icon/castle2-select.png",
+        "anchor": [0.5, 37],
+        "anchorXUnits": "fraction",
+        "anchorYUnits": "pixels"
+      }
+    },
     {
       "type": "WMS",
       "lid": "pdok-natura2000-wms",
@@ -109,6 +157,28 @@
     "wgu-helpwin": {
       "target": "toolbar",
       "darkLayout": true
+    },
+    "wgu-feature-info-window": {
+      "win": true,
+      "draggable": true,
+      "width": 360,
+      "icon": "info",
+      "layers": [
+        {
+          "layerId": "dutch_windmills",
+          "title": "Dutch Windmills",
+          "titleProp": "NAAM",
+          "imageProp": "FOTO_GROOT",
+          "infoUrlProp": "INFOLINK"
+        },
+        {
+          "layerId": "dutch_castles",
+          "title": "Dutch Castles",
+          "titleProp": "naam",
+          "imageProp": "foto_groot",
+          "infoUrlProp": "info_link"
+        }
+      ]
     }
   }
 
diff --git a/static/app-conf.json b/static/app-conf.json
index 7cb85f2f..9bffc77c 100644
--- a/static/app-conf.json
+++ b/static/app-conf.json
@@ -1,11 +1,12 @@
 {
 
-  "title": "Vue.js / OpenLayers WebGIS",
+  "title": "<a href='https://github.com/meggsimum/wegue' target='_blank' style='text-decoration: none; color: white'>Vue.js / OpenLayers WebGIS</a>",
 
   "baseColor": "red darken-3",
 
-  "logo": "https://dummyimage.com/100x100/aaa/fff&text=Wegue",
-  "logoSize": "100",
+  "logo": "https://dummyimage.com/92x92/aaa/fff&text=Wegue",
+  "logoSize": "92",
+  "logoText": "<a href='https://meggsimum.de/wegue/' target='_blank' style='text-decoration: none; color: white; background: grey; '>Vue.js WebGIS</a>",
 
   "footerTextLeft": "Powered by <a href='https://meggsimum.de/wegue/' target='_blank'>Wegue WebGIS</a>",
   "footerTextRight": "meggsimum",
@@ -55,7 +56,52 @@
         "fillColor": "rgba(207, 16, 32, 0.6)"
       }
     },
-
+    {
+      "type": "VECTOR",
+      "lid": "dutch_windmills",
+      "name": "Dutch Windmills",
+      "url": "https://demo.pygeoapi.io/master/collections/dutch_windmills/items",
+      "formatConfig": {
+      },
+      "format": "GeoJSON",
+      "visible": true,
+      "selectable": true,
+      "style": {
+        "iconUrl": "./static/icon/windmill2.png",
+        "anchor": [0.5, 37],
+        "anchorXUnits": "fraction",
+        "anchorYUnits": "pixels"
+      },
+      "styleSelected": {
+        "iconUrl": "./static/icon/windmill2-select.png",
+        "anchor": [0.5, 37],
+        "anchorXUnits": "fraction",
+        "anchorYUnits": "pixels"
+      }
+    },
+    {
+      "type": "VECTOR",
+      "lid": "dutch_castles",
+      "name": "Dutch Castles",
+      "url": "https://demo.pygeoapi.io/master/collections/dutch_castles/items",
+      "formatConfig": {
+      },
+      "format": "GeoJSON",
+      "visible": true,
+      "selectable": true,
+      "style": {
+        "iconUrl": "./static/icon/castle2.png",
+        "anchor": [0.5, 37],
+        "anchorXUnits": "fraction",
+        "anchorYUnits": "pixels"
+      },
+      "styleSelected": {
+        "iconUrl": "./static/icon/castle2-select.png",
+        "anchor": [0.5, 37],
+        "anchorXUnits": "fraction",
+        "anchorYUnits": "pixels"
+      }
+    },
     {
       "type": "WMS",
       "lid": "ahocevar-wms",
@@ -71,7 +117,6 @@
       "visible": false,
       "displayInLayerList": true
     },
-
     {
       "type": "VECTORTILE",
       "name": "Vector Tile Layer",
@@ -84,7 +129,6 @@
         "fillColor": "rgba(20,20,20,0.1)"
       }
     },
-
     {
       "type": "XYZ",
       "name": "OpenTopoMap",
@@ -103,7 +147,6 @@
       "visible": true,
       "displayInLayerList": true
     }
-
   ],
 
   "modules": {
@@ -154,6 +197,35 @@
     "wgu-helpwin": {
       "target": "toolbar",
       "darkLayout": true
+    },
+    "wgu-feature-info-window": {
+      "win": true,
+      "draggable": true,
+      "width": 360,
+      "icon": "info",
+      "layers": [
+        {
+          "layerId": "dutch_windmills",
+          "title": "Dutch Windmills",
+          "titleProp": "NAAM",
+          "imageProp": "FOTO_GROOT",
+          "infoUrlProp": "INFOLINK",
+          "imageWidth": 360
+        },
+        {
+          "layerId": "dutch_castles",
+          "title": "Dutch Castles",
+          "titleProp": "naam",
+          "imageProp": "foto_groot",
+          "infoUrlProp": "info_link"
+        },
+        {
+          "layerId": "Shops",
+          "title": "Shops Dannstadt",
+          "titleProp": "name",
+          "descProp": "shop"
+        }
+      ]
     }
   }
 }
diff --git a/static/icon/README.md b/static/icon/README.md
new file mode 100644
index 00000000..6ea13dc7
--- /dev/null
+++ b/static/icon/README.md
@@ -0,0 +1,8 @@
+# Icons
+
+* castle.png from: https://openlayers.org/en/latest/examples/data/icon.png
+
+Main source and credits: https://mapicons.mapsmarker.com/
+
+* castle2.png by: https://mapicons.mapsmarker.com/author/matthias.stasiak
+* windmill2.png by: https://mapicons.mapsmarker.com/author/matthias.stasiak
diff --git a/static/icon/castle.png b/static/icon/castle.png
new file mode 100644
index 00000000..ed886623
Binary files /dev/null and b/static/icon/castle.png differ
diff --git a/static/icon/castle2-select.png b/static/icon/castle2-select.png
new file mode 100644
index 00000000..ee926177
Binary files /dev/null and b/static/icon/castle2-select.png differ
diff --git a/static/icon/castle2.png b/static/icon/castle2.png
new file mode 100644
index 00000000..0c26b8c8
Binary files /dev/null and b/static/icon/castle2.png differ
diff --git a/static/icon/windmill2-select.png b/static/icon/windmill2-select.png
new file mode 100644
index 00000000..3c413638
Binary files /dev/null and b/static/icon/windmill2-select.png differ
diff --git a/static/icon/windmill2.png b/static/icon/windmill2.png
new file mode 100644
index 00000000..957a03e9
Binary files /dev/null and b/static/icon/windmill2.png differ
diff --git a/test/unit/specs/components/FeatureInfoWindow.spec.js b/test/unit/specs/components/FeatureInfoWindow.spec.js
index 2e6d034a..57a31152 100644
--- a/test/unit/specs/components/FeatureInfoWindow.spec.js
+++ b/test/unit/specs/components/FeatureInfoWindow.spec.js
@@ -17,11 +17,8 @@ describe('InfoWindow.vue', () => {
     });
 
     it('has correct default props', () => {
-      expect(vm.layerId).to.equal(undefined);
-      expect(vm.imageProp).to.equal(undefined);
-      expect(vm.titleProp).to.equal(undefined);
-      expect(vm.icon).to.equal(undefined);
-      expect(vm.title).to.equal(undefined);
+      expect(vm.icon).to.equal('info');
+      expect(vm.title).to.equal('Feature Info');
     });
   });
 
@@ -51,7 +48,7 @@ describe('InfoWindow.vue', () => {
 
     it('setFeature resets if no feature passed', () => {
       vm.setFeature();
-      expect(vm.feature).to.equal(null);
+      expect(vm.feature).to.equal(undefined);
       expect(vm.attributes).to.equal(null);
     });