diff --git a/public/demo/images/car/Audi.png b/public/demo/images/car/Audi.png
new file mode 100644
index 000000000..a5a5d5d1f
Binary files /dev/null and b/public/demo/images/car/Audi.png differ
diff --git a/public/demo/images/car/Bmw.png b/public/demo/images/car/Bmw.png
new file mode 100644
index 000000000..6779a37d1
Binary files /dev/null and b/public/demo/images/car/Bmw.png differ
diff --git a/public/demo/images/car/Fiat.png b/public/demo/images/car/Fiat.png
new file mode 100644
index 000000000..5e4c7073d
Binary files /dev/null and b/public/demo/images/car/Fiat.png differ
diff --git a/public/demo/images/car/Ford.png b/public/demo/images/car/Ford.png
new file mode 100644
index 000000000..6e9b964cf
Binary files /dev/null and b/public/demo/images/car/Ford.png differ
diff --git a/public/demo/images/car/Honda.png b/public/demo/images/car/Honda.png
new file mode 100644
index 000000000..7352d48a4
Binary files /dev/null and b/public/demo/images/car/Honda.png differ
diff --git a/public/demo/images/car/Jaguar.png b/public/demo/images/car/Jaguar.png
new file mode 100644
index 000000000..9c6097dc6
Binary files /dev/null and b/public/demo/images/car/Jaguar.png differ
diff --git a/public/demo/images/car/Mercedes.png b/public/demo/images/car/Mercedes.png
new file mode 100644
index 000000000..d2e6df6fe
Binary files /dev/null and b/public/demo/images/car/Mercedes.png differ
diff --git a/public/demo/images/car/Renault.png b/public/demo/images/car/Renault.png
new file mode 100644
index 000000000..83b174e95
Binary files /dev/null and b/public/demo/images/car/Renault.png differ
diff --git a/public/demo/images/car/Volkswagen.png b/public/demo/images/car/Volkswagen.png
new file mode 100644
index 000000000..cd6ce0197
Binary files /dev/null and b/public/demo/images/car/Volkswagen.png differ
diff --git a/public/demo/images/car/Volvo.png b/public/demo/images/car/Volvo.png
new file mode 100644
index 000000000..48c4410a6
Binary files /dev/null and b/public/demo/images/car/Volvo.png differ
diff --git a/src/assets/images/primevue-introduction.jpg b/src/assets/images/home/primevue-introduction.jpg
similarity index 100%
rename from src/assets/images/primevue-introduction.jpg
rename to src/assets/images/home/primevue-introduction.jpg
diff --git a/src/assets/styles/app.scss b/src/assets/styles/app.scss
index 00b2ba48d..b5ece541a 100644
--- a/src/assets/styles/app.scss
+++ b/src/assets/styles/app.scss
@@ -741,7 +741,7 @@ body {
     /* Introduction */
     .introduction {
         background-color: #1976d2;
-        background: url('./assets/images/primevue-introduction.jpg');
+        background: url('./assets/images/home/primevue-introduction.jpg');
         background-repeat: no-repeat;
         background-size: cover;
         color: #222222;
diff --git a/src/components/listbox/ListBox.vue b/src/components/listbox/ListBox.vue
index 1a4862b44..d256b6a5a 100644
--- a/src/components/listbox/ListBox.vue
+++ b/src/components/listbox/ListBox.vue
@@ -1,10 +1,12 @@
 <template>
     <div class="p-listbox p-inputtext p-component">
-        <div class="p-listbox-list-wrapper">
+        <div class="p-listbox-list-wrapper" :style="listStyle">
             <ul class="p-listbox-list">
-                <li v-for="option of options" tabindex="0" :class="['p-listbox-item', {'p-highlight': isSelected(option)}]" 
+                <li v-for="(option, i) of options" tabindex="0" :class="['p-listbox-item', {'p-highlight': isSelected(option)}]" 
                     :key="getOptionLabel(option)" @click="onOptionClick($event, option)" @touchend="onOptionTouchEnd()">
-                    {{getOptionLabel(option)}}
+                    <slot :option="option" :index="i">  
+                        {{getOptionLabel(option)}}
+                    </slot>
                 </li>
             </ul>
         </div>
@@ -20,6 +22,7 @@ export default {
         options: Array,
         disabled: Boolean,
         dataKey: null,
+        listStyle: name,
         multiple: Boolean,
         metaKeySelection: Boolean,
         filter: Boolean,
diff --git a/src/views/listbox/ListBoxDemo.vue b/src/views/listbox/ListBoxDemo.vue
index 3e13ccab6..9fddeee46 100644
--- a/src/views/listbox/ListBoxDemo.vue
+++ b/src/views/listbox/ListBoxDemo.vue
@@ -13,6 +13,16 @@
 
             <h3>Multiple</h3>
             <p-listBox :multiple="true" v-model="selectedCities" :options="cities" optionLabel="name" />
+
+            <h3>Advanced with Templating and Filtering</h3>
+            <p-listBox v-model="selectedCar" :options="cars" listStyle="max-height:250px" style="width:15em">
+                <template slot-scope="{option, index}">
+                    <div className="p-clearfix">
+                        <img :alt="option.brand" :src="'/demo/images/car/' + option.brand + '.png'" style="display:inline-block;margin:5px 0 0 5px;width:48px" />
+                        <span style="float:right;margin:1.25em .5em 0 0">{{option.brand}}</span>
+                    </div>
+                </template>
+            </p-listBox>
         </div>
     </div>
 </template>
@@ -23,12 +33,24 @@ export default {
         return {
             selectedCity: null,
             selectedCities: null,
+            selectedCar: null,
             cities: [
                 {name: 'New York', code: 'NY'},
                 {name: 'Rome', code: 'RM'},
                 {name: 'London', code: 'LDN'},
                 {name: 'Istanbul', code: 'IST'},
                 {name: 'Paris', code: 'PRS'}
+            ],
+            cars: [
+                {brand: 'Audi', value: 'Audi'},
+                {brand: 'Bmw', value: 'Bmw'},
+                {brand: 'Fiat', value: 'Fiat'},
+                {brand: 'Honda', value: 'Honda'},
+                {brand: 'Jaguar', value: 'Jaguar'},
+                {brand: 'Mercedes', value: 'Mercedes'},
+                {brand: 'Renault', value: 'Renault'},
+                {brand: 'Volkswagen', value: 'Volkswagen'},
+                {brand: 'Volvo', value: 'Volvo'}
             ]
         }
     }