diff --git a/public/demo/data/galleria.json b/public/demo/data/photos.json
similarity index 100%
rename from public/demo/data/galleria.json
rename to public/demo/data/photos.json
diff --git a/src/AppMenu.vue b/src/AppMenu.vue
index 26bf82378..f1ba841e5 100755
--- a/src/AppMenu.vue
+++ b/src/AppMenu.vue
@@ -215,14 +215,15 @@
                     <div class="p-toggleable-content" v-show="activeSubmenus['galleria']">
                          <ul>
                             <li><router-link to="/galleria">Documentation</router-link></li>
-                            <li><router-link to="/galleria/basic">Basic</router-link></li>
+                            <li><router-link to="/galleria/programmatic">Programmatic</router-link></li>
                             <li><router-link to="/galleria/indicator">Indicator</router-link></li>
                             <li><router-link to="/galleria/thumbnail">Thumbnail</router-link></li>
-                            <li><router-link to="/galleria/preview">Preview</router-link></li>
+                            <li><router-link to="/galleria/navigator">Navigator</router-link></li>
                             <li><router-link to="/galleria/responsive">Responsive</router-link></li>
                             <li><router-link to="/galleria/fullscreen">FullScreen</router-link></li>
-                            <li><router-link to="/galleria/circular">Circular</router-link></li>
+                            <li><router-link to="/galleria/autoplay">AutoPlay</router-link></li>
                             <li><router-link to="/galleria/caption">Caption</router-link></li>
+                            <li><router-link to="/galleria/advanced">Advanced</router-link></li>
                         </ul>
                     </div>
                 </transition>
diff --git a/src/assets/styles/app/_home.scss b/src/assets/styles/app/_home.scss
index 233aa1dcd..42aa6781a 100644
--- a/src/assets/styles/app/_home.scss
+++ b/src/assets/styles/app/_home.scss
@@ -9,7 +9,6 @@
     a {
         color: var(--primary-color);
         font-weight: 500;
-        transition: color .2s;
     }
 
     .introduction {
diff --git a/src/components/galleria/Galleria.d.ts b/src/components/galleria/Galleria.d.ts
index 59066d5e2..9c8ffe01a 100755
--- a/src/components/galleria/Galleria.d.ts
+++ b/src/components/galleria/Galleria.d.ts
@@ -8,10 +8,10 @@ export declare class Galleria extends Vue {
     visible?: boolean;
     numVisible?: number;
     responsiveOptions?: any[];
-    showPreviewNavButtons?: boolean;
-    showThumbnailNavButtons?: boolean;
-    showNavButtonsOnPreviewHover?: boolean;
-    changePreviewOnIndicatorHover?: boolean;
+    showItemNavigators?: boolean;
+    showThumbnailNavigators?: boolean;
+    showItemNavigatorsOnHover?: boolean;
+    changeItemOnIndicatorHover?: boolean;
     circular?: boolean;
     autoPlay?: boolean;
     transitionInterval?: number;
@@ -19,7 +19,7 @@ export declare class Galleria extends Vue {
     thumbnailsPosition?: string;
     verticalThumbnailViewPortHeight?: string;
     showIndicators?: boolean;
-    showIndicatorsOnPreview?: boolean;
+    showIndicatorsOnItem?: boolean;
     indicatorsPosition?: string;
     baseZIndex?: number;
     maskClass?: string;
diff --git a/src/router.js b/src/router.js
index 7386d41e7..807a63c22 100755
--- a/src/router.js
+++ b/src/router.js
@@ -636,9 +636,9 @@ export default new Router({
 			component: () => import('./views/galleria/GalleriaDemo.vue')
         },
         {
-			path: '/galleria/basic',
-			name: 'galleriabasic',
-			component: () => import('./views/galleria/GalleriaBasicDemo.vue')
+			path: '/galleria/programmatic',
+			name: 'galleriaprogrammatic',
+			component: () => import('./views/galleria/GalleriaProgrammaticDemo.vue')
         },
         {
 			path: '/galleria/indicator',
@@ -651,9 +651,9 @@ export default new Router({
 			component: () => import('./views/galleria/GalleriaThumbnailDemo.vue')
         },
         {
-			path: '/galleria/preview',
-			name: 'galleriapreview',
-			component: () => import('./views/galleria/GalleriaPreviewDemo.vue')
+			path: '/galleria/navigator',
+			name: 'gallerianavigator',
+			component: () => import('./views/galleria/GalleriaNavigatorDemo.vue')
         },
         {
 			path: '/galleria/responsive',
@@ -666,14 +666,19 @@ export default new Router({
 			component: () => import('./views/galleria/GalleriaFullScreenDemo.vue')
         },
         {
-			path: '/galleria/circular',
-			name: 'galleriacircular',
-			component: () => import('./views/galleria/GalleriaCircularDemo.vue')
+			path: '/galleria/autoplay',
+			name: 'galleriaautoplay',
+			component: () => import('./views/galleria/GalleriaAutoPlayDemo.vue')
         },
         {
 			path: '/galleria/caption',
 			name: 'galleriacaption',
 			component: () => import('./views/galleria/GalleriaCaptionDemo.vue')
+        },
+        {
+			path: '/galleria/advanced',
+			name: 'galleriaadvvanced',
+			component: () => import('./views/galleria/GalleriaAdvancedDemo.vue')
         }
 	]
 });
diff --git a/src/service/GalleriaService.js b/src/service/PhotoService.js
similarity index 51%
rename from src/service/GalleriaService.js
rename to src/service/PhotoService.js
index 998cb1dd8..1efbcc9a9 100755
--- a/src/service/GalleriaService.js
+++ b/src/service/PhotoService.js
@@ -1,9 +1,9 @@
 import axios from 'axios'
 
-export default class GalleriaService {
+export default class PhotoService {
 
 	getImages() {
-        return axios.get('demo/data/galleria.json')
+        return axios.get('demo/data/photos.json')
                 .then(res => res.data.data);
     }
 }
diff --git a/src/views/galleria/GalleriaAdvancedDemo.vue b/src/views/galleria/GalleriaAdvancedDemo.vue
new file mode 100644
index 000000000..19f4e11bc
--- /dev/null
+++ b/src/views/galleria/GalleriaAdvancedDemo.vue
@@ -0,0 +1,211 @@
+<template>
+    <div class="galleria-demo">
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>Galleria - Advanced</h1>
+                <p>Galleria can be extended further to implement complex requirements.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <Galleria ref="galleria" :value="images" :activeItemIndex.sync="activeItemIndex" :numVisible="5" style="max-width: 520px;" :class="galleriaClass"
+                :showThumbnails="showThumbnails" :showItemNavigators="true" :showItemNavigatorsOnHover="true"
+                :circular="true" :autoPlay="true" :transitionInterval="3000">
+                <template #item="slotProps">
+					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" :style="[{'width': !isPreviewFullScreen ? '100%' : '', 'display': !isPreviewFullScreen ? 'block' : ''}]" />
+				</template>
+				<template #thumbnail="slotProps">
+                    <div class="p-grid p-nogutter p-justify-center">
+                        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
+                    </div>
+				</template>
+                <template #footer>
+                    <div class="custom-galleria-footer">
+                        <Button icon="pi pi-list" @click="onThumbnailButtonClick" />
+                        <span v-if="images">
+                            <span>{{activeItemIndex + 1}}/{{images.length}}</span>
+                            <span class="title">{{images[activeItemIndex].title}}</span>
+                            <span>{{images[activeItemIndex].alt}}</span>
+                        </span>
+                        <Button :icon="fullScreenIcon" @click="toggleFullScreen" />
+                    </div>
+                </template>
+            </Galleria>
+        </div>
+    </div>
+</template>
+
+
+<script>
+import PhotoService from '../../service/PhotoService';
+
+export default {
+    data() {
+        return {
+            images: null,
+            activeItemIndex: 0,
+            showThumbnails: false,
+            isPreviewFullScreen: false
+        }
+    },
+    galleriaService: null,
+	created() {
+		this.galleriaService = new PhotoService();
+	},
+	mounted() {
+        this.galleriaService.getImages().then(data => this.images = data);
+        this.bindDocumentListeners();
+    },
+    methods: {
+        onThumbnailButtonClick() {
+            this.showThumbnails = !this.showThumbnails;
+        },
+        toggleFullScreen() {
+            if (this.isPreviewFullScreen) {
+                this.closePreviewFullScreen();
+            }
+            else {
+                this.openPreviewFullScreen();
+            }
+        },
+        onFullScreenChange() {
+            this.isPreviewFullScreen = !this.isPreviewFullScreen;
+        },
+        openPreviewFullScreen() {
+            let elem = this.$refs.galleria.$el;
+            if (elem.requestFullscreen) {
+                elem.requestFullscreen();
+            }
+            else if (elem.mozRequestFullScreen) { /* Firefox */
+                elem.mozRequestFullScreen();
+            }
+            else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
+                elem.webkitRequestFullscreen();
+            }
+            else if (elem.msRequestFullscreen) { /* IE/Edge */
+                elem.msRequestFullscreen();
+            }
+        },
+        closePreviewFullScreen() {
+            if (document.exitFullscreen) {
+                document.exitFullscreen();
+            }
+            else if (document.mozCancelFullScreen) {
+                document.mozCancelFullScreen();
+            }
+            else if (document.webkitExitFullscreen) {
+                document.webkitExitFullscreen();
+            }
+            else if (document.msExitFullscreen) {
+                document.msExitFullscreen();
+            }
+        },
+        bindDocumentListeners() {
+            document.addEventListener("fullscreenchange", this.onFullScreenChange);
+            document.addEventListener("mozfullscreenchange", this.onFullScreenChange);
+            document.addEventListener("webkitfullscreenchange", this.onFullScreenChange);
+            document.addEventListener("msfullscreenchange", this.onFullScreenChange);
+        },
+        unbindDocumentListeners() {
+            document.removeEventListener("fullscreenchange", this.onFullScreenChange);
+            document.removeEventListener("mozfullscreenchange", this.onFullScreenChange);
+            document.removeEventListener("webkitfullscreenchange", this.onFullScreenChange);
+            document.removeEventListener("msfullscreenchange", this.onFullScreenChange);
+        }
+    },
+    computed: {
+        galleriaClass() {
+            return ['custom-galleria', {'preview-fullscreen': this.isPreviewFullScreen}];
+        },
+        fullScreenIcon() {
+            return `pi ${this.isPreviewFullScreen ? 'pi-window-minimize' : 'pi-window-maximize'}`;
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep {
+    .custom-galleria {
+        &.p-galleria {
+            .p-galleria-content {
+                height: 95%;
+                overflow: hidden;
+                position: relative;
+
+                .p-galleria-thumbnail-content {
+                    position: absolute;
+                    width: 100%;
+                    bottom: 0;
+                    background-image: linear-gradient(180deg, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.50) 70%);
+
+                    .p-galleria-thumbnail-container {
+                        .p-galleria-thumbnail-items-content {
+                            .p-galleria-thumbnail-items-container {
+                                .p-galleria-thumbnail-item {
+                                    opacity: .6;
+
+                                    &.p-galleria-thumbnail-item-current {
+                                        opacity: 1;
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+
+            .p-galleria-footer {
+                padding: 0;
+                background-color: rgba(0, 0, 0, .9);
+                border: rgba(0, 0, 0, .9);
+
+                .custom-galleria-footer {
+                    width: 100%;
+                    display: flex;
+                    align-items: center;
+                    justify-content: stretch;
+                    color: #ffffff;
+
+                    > button {
+                        background-color: transparent;
+                        padding: .3rem;
+                        margin: .2rem;
+                        border: 0 none;
+                        border-radius: 0;
+                        color: #ffffff;
+
+                        &:hover {
+                            background-color: transparent;
+                        }
+                    }
+
+                    > span {
+                        flex-grow: 1;
+
+                        > span {
+                            font-size: .9rem;
+                            padding-left: .829rem;
+
+                            &.title {
+                                font-weight: bold;
+                            }
+                        }
+                    }
+                }
+            }
+
+            &.preview-fullscreen {
+                .p-galleria-preview-container {
+                    .p-galleria-preview-nav-button {
+                        top: 50%;
+                        height: 20rem;
+                        width: 4rem;
+                        margin-top: -10rem;
+                    }
+                }
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/galleria/GalleriaCircularDemo.vue b/src/views/galleria/GalleriaAutoPlayDemo.vue
similarity index 55%
rename from src/views/galleria/GalleriaCircularDemo.vue
rename to src/views/galleria/GalleriaAutoPlayDemo.vue
index 8ebd3b720..04256e8e8 100755
--- a/src/views/galleria/GalleriaCircularDemo.vue
+++ b/src/views/galleria/GalleriaAutoPlayDemo.vue
@@ -2,34 +2,19 @@
     <div>
         <div class="content-section introduction">
             <div class="feature-intro">
-                <h1 style="margin-bottom: 0px;">Galleria - Circular</h1>
-                <p></p>
+                <h1>Galleria - AutoPlay</h1>
+                <p>AutoPlay mode is used to implement slideshows.</p>
             </div>
         </div>
 
         <div class="content-section implementation">
-            <h3 class="first">Basic</h3>
-            <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px">
-                <template #item="slotProps">
-					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
-				</template>
-				<template #thumbnail="slotProps">
-                    <div class="p-grid p-nogutter p-justify-center">
-                        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
-                    </div>
-				</template>
-            </Galleria>
-
-            <h3>AutoPlay</h3>
             <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"
                 :circular="true" :autoPlay="true" :transitionInterval="2000">
                 <template #item="slotProps">
 					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
 				</template>
 				<template #thumbnail="slotProps">
-                    <div class="p-grid p-nogutter p-justify-center">
-                        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
-                    </div>
+                    <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
 				</template>
             </Galleria>
         </div>
@@ -39,35 +24,20 @@
                 <TabPanel header="Source">
 <CodeHighlight>
 <template v-pre>
-&lt;h3 class="first"&gt;Basic&lt;/h3&gt;
-&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px"&gt;
-    &lt;template #item="slotProps"&gt;
-        &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
-    &lt;/template&gt;
-    &lt;template #thumbnail="slotProps"&gt;
-        &lt;div class="p-grid p-nogutter p-justify-center"&gt;
-            &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
-        &lt;/div&gt;
-    &lt;/template&gt;
-&lt;/Galleria&gt;
-
-&lt;h3&gt;AutoPlay&lt;/h3&gt;
 &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"
     :circular="true" :autoPlay="true" :transitionInterval="2000"&gt;
     &lt;template #item="slotProps"&gt;
         &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
     &lt;/template&gt;
     &lt;template #thumbnail="slotProps"&gt;
-        &lt;div class="p-grid p-nogutter p-justify-center"&gt;
-            &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
-        &lt;/div&gt;
+        &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
     &lt;/template&gt;
 &lt;/Galleria&gt;
 </template>
 </CodeHighlight>
 
 <CodeHighlight lang="javascript">
-import GalleriaService from '../../service/GalleriaService';
+import PhotoService from '../../service/PhotoService';
 
 export default {
     data() {
@@ -91,7 +61,7 @@ export default {
     },
     galleriaService: null,
 	created() {
-		this.galleriaService = new GalleriaService();
+		this.galleriaService = new PhotoService();
 	},
 	mounted() {
 		this.galleriaService.getImages().then(data => this.images = data);
@@ -105,7 +75,7 @@ export default {
 </template>
 
 <script>
-import GalleriaService from '../../service/GalleriaService';
+import PhotoService from '../../service/PhotoService';
 
 export default {
     data() {
@@ -129,7 +99,7 @@ export default {
     },
     galleriaService: null,
 	created() {
-		this.galleriaService = new GalleriaService();
+		this.galleriaService = new PhotoService();
 	},
 	mounted() {
 		this.galleriaService.getImages().then(data => this.images = data);
diff --git a/src/views/galleria/GalleriaCaptionDemo.vue b/src/views/galleria/GalleriaCaptionDemo.vue
index 269112f84..3227f2c01 100755
--- a/src/views/galleria/GalleriaCaptionDemo.vue
+++ b/src/views/galleria/GalleriaCaptionDemo.vue
@@ -2,8 +2,8 @@
     <div>
         <div class="content-section introduction">
             <div class="feature-intro">
-                <h1 style="margin-bottom: 0px;">Galleria - Caption</h1>
-                <p></p>
+                <h1>Galleria - Caption</h1>
+                <p>Caption displays a description for an item.</p>
             </div>
         </div>
 
@@ -17,7 +17,7 @@
                         <img :src="item.thumbnailImageSrc" :alt="item.alt" style="display: block;" />
                     </div>
 				</template>
-                <template #itemCaption="{item}">
+                <template #caption="{item}">
                     <h4 style="margin-bottom: .5rem;">{{item.title}}</h4>
                     <p>{{item.alt}}</p>
                 </template>
@@ -38,7 +38,7 @@
             &lt;img :src="item.thumbnailImageSrc" :alt="item.alt" style="display: block;" /&gt;
         &lt;/div&gt;
     &lt;/template&gt;
-    &lt;template #itemCaption="{item}"&gt;
+    &lt;template #caption="{item}"&gt;
         &lt;h4 style="margin-bottom: .5rem;"&gt;{{item.title}}&lt;/h4&gt;
         &lt;p&gt;{{item.alt}}&lt;/p&gt;
     &lt;/template&gt;
@@ -47,7 +47,7 @@
 </CodeHighlight>
 
 <CodeHighlight lang="javascript">
-import GalleriaService from '../../service/GalleriaService';
+import PhotoService from '../../service/PhotoService';
 
 export default {
     data() {
@@ -71,10 +71,10 @@ export default {
     },
     galleriaService: null,
 	created() {
-		this.galleriaService = new GalleriaService();
+		this.galleriaService = new PhotoService();
 	},
 	mounted() {
-		this.galleriaService.getImages().then(data =&gt; this.images = data);
+		this.galleriaService.getImages().then(data => this.images = data);
     }
 }
 </CodeHighlight>
@@ -85,7 +85,7 @@ export default {
 </template>
 
 <script>
-import GalleriaService from '../../service/GalleriaService';
+import PhotoService from '../../service/PhotoService';
 
 export default {
     data() {
@@ -109,7 +109,7 @@ export default {
     },
     galleriaService: null,
 	created() {
-		this.galleriaService = new GalleriaService();
+		this.galleriaService = new PhotoService();
 	},
 	mounted() {
 		this.galleriaService.getImages().then(data => this.images = data);
diff --git a/src/views/galleria/GalleriaDemo.vue b/src/views/galleria/GalleriaDemo.vue
index 94f51e5fd..d9b980755 100755
--- a/src/views/galleria/GalleriaDemo.vue
+++ b/src/views/galleria/GalleriaDemo.vue
@@ -3,33 +3,18 @@
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>Galleria</h1>
-                <p>Galleria is a content gallery component.</p>
+                <p>Galleria is an advanced content gallery component.</p>
             </div>
         </div>
 
         <div class="content-section implementation">
-            <Galleria ref="galleria" :value="images" :activeItemIndex.sync="activeItemIndex" :numVisible="5" style="max-width: 520px;" :class="galleriaClass"
-                :showThumbnails="showThumbnails" :showItemNavigators="true" :showItemNavigatorsOnHover="true"
-                :circular="true" :autoPlay="true" :transitionInterval="3000">
+            <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px">
                 <template #item="slotProps">
-					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" :style="[{'width': !isPreviewFullScreen ? '100%' : '', 'display': !isPreviewFullScreen ? 'block' : ''}]" />
+					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
 				</template>
 				<template #thumbnail="slotProps">
-                    <div class="p-grid p-nogutter p-justify-center">
-                        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
-                    </div>
+                    <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
 				</template>
-                <template #footer>
-                    <div class="custom-galleria-footer">
-                        <Button icon="pi pi-list" @click="onThumbnailButtonClick" />
-                        <span v-if="images">
-                            <span>{{activeItemIndex + 1}}/{{images.length}}</span>
-                            <span class="title">{{images[activeItemIndex].title}}</span>
-                            <span>{{images[activeItemIndex].alt}}</span>
-                        </span>
-                        <Button :icon="fullScreenIcon" @click="toggleFullScreen" />
-                    </div>
-                </template>
             </Galleria>
         </div>
 
@@ -38,179 +23,38 @@
 </template>
 
 <script>
-import GalleriaService from '../../service/GalleriaService';
+import PhotoService from '../../service/PhotoService';
 import GalleriaDoc from './GalleriaDoc';
 
 export default {
     data() {
         return {
             images: null,
-            activeItemIndex: 0,
-            showThumbnails: false,
-            isPreviewFullScreen: false
+			responsiveOptions: [
+				{
+                    breakpoint: '1024px',
+                    numVisible: 5
+                },
+                {
+                    breakpoint: '768px',
+                    numVisible: 3
+                },
+                {
+                    breakpoint: '560px',
+                    numVisible: 1
+                }
+			]
         }
     },
     galleriaService: null,
 	created() {
-		this.galleriaService = new GalleriaService();
+		this.galleriaService = new PhotoService();
 	},
 	mounted() {
-        this.galleriaService.getImages().then(data => this.images = data);
-        this.bindDocumentListeners();
-    },
-    methods: {
-        onThumbnailButtonClick() {
-            this.showThumbnails = !this.showThumbnails;
-        },
-        toggleFullScreen() {
-            if (this.isPreviewFullScreen) {
-                this.closePreviewFullScreen();
-            }
-            else {
-                this.openPreviewFullScreen();
-            }
-        },
-        onFullScreenChange() {
-            this.isPreviewFullScreen = !this.isPreviewFullScreen;
-        },
-        openPreviewFullScreen() {
-            let elem = this.$refs.galleria.$el;
-            if (elem.requestFullscreen) {
-                elem.requestFullscreen();
-            }
-            else if (elem.mozRequestFullScreen) { /* Firefox */
-                elem.mozRequestFullScreen();
-            }
-            else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
-                elem.webkitRequestFullscreen();
-            }
-            else if (elem.msRequestFullscreen) { /* IE/Edge */
-                elem.msRequestFullscreen();
-            }
-        },
-        closePreviewFullScreen() {
-            if (document.exitFullscreen) {
-                document.exitFullscreen();
-            }
-            else if (document.mozCancelFullScreen) {
-                document.mozCancelFullScreen();
-            }
-            else if (document.webkitExitFullscreen) {
-                document.webkitExitFullscreen();
-            }
-            else if (document.msExitFullscreen) {
-                document.msExitFullscreen();
-            }
-        },
-        bindDocumentListeners() {
-            document.addEventListener("fullscreenchange", this.onFullScreenChange);
-            document.addEventListener("mozfullscreenchange", this.onFullScreenChange);
-            document.addEventListener("webkitfullscreenchange", this.onFullScreenChange);
-            document.addEventListener("msfullscreenchange", this.onFullScreenChange);
-        },
-        unbindDocumentListeners() {
-            document.removeEventListener("fullscreenchange", this.onFullScreenChange);
-            document.removeEventListener("mozfullscreenchange", this.onFullScreenChange);
-            document.removeEventListener("webkitfullscreenchange", this.onFullScreenChange);
-            document.removeEventListener("msfullscreenchange", this.onFullScreenChange);
-        }
-    },
-    computed: {
-        galleriaClass() {
-            return ['custom-galleria', {'preview-fullscreen': this.isPreviewFullScreen}];
-        },
-        fullScreenIcon() {
-            return `pi ${this.isPreviewFullScreen ? 'pi-window-minimize' : 'pi-window-maximize'}`;
-        }
+		this.galleriaService.getImages().then(data => this.images = data);
     },
     components: {
         'GalleriaDoc': GalleriaDoc
     }
 }
 </script>
-
-<style lang="scss" scoped>
-::v-deep {
-    .custom-galleria {
-        &.p-galleria {
-            .p-galleria-content {
-                height: 95%;
-                overflow: hidden;
-                position: relative;
-
-                .p-galleria-thumbnail-content {
-                    position: absolute;
-                    width: 100%;
-                    bottom: 0;
-                    background-image: linear-gradient(180deg, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.50) 70%);
-
-                    .p-galleria-thumbnail-container {
-                        .p-galleria-thumbnail-items-content {
-                            .p-galleria-thumbnail-items-container {
-                                .p-galleria-thumbnail-item {
-                                    opacity: .6;
-
-                                    &.p-galleria-thumbnail-item-current {
-                                        opacity: 1;
-                                    }
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-
-            .p-galleria-footer {
-                padding: 0;
-                background-color: rgba(0, 0, 0, .9);
-                border: rgba(0, 0, 0, .9);
-
-                .custom-galleria-footer {
-                    width: 100%;
-                    display: flex;
-                    align-items: center;
-                    justify-content: stretch;
-                    color: #ffffff;
-
-                    > button {
-                        background-color: transparent;
-                        padding: .3rem;
-                        margin: .2rem;
-                        border: 0 none;
-                        border-radius: 0;
-                        color: #ffffff;
-
-                        &:hover {
-                            background-color: transparent;
-                        }
-                    }
-
-                    > span {
-                        flex-grow: 1;
-
-                        > span {
-                            font-size: .9rem;
-                            padding-left: .829rem;
-
-                            &.title {
-                                font-weight: bold;
-                            }
-                        }
-                    }
-                }
-            }
-
-            &.preview-fullscreen {
-                .p-galleria-preview-container {
-                    .p-galleria-preview-nav-button {
-                        top: 50%;
-                        height: 20rem;
-                        width: 4rem;
-                        margin-top: -10rem;
-                    }
-                }
-            }
-        }
-    }
-}
-</style>
diff --git a/src/views/galleria/GalleriaDoc.vue b/src/views/galleria/GalleriaDoc.vue
index 86da2fc90..abf745333 100755
--- a/src/views/galleria/GalleriaDoc.vue
+++ b/src/views/galleria/GalleriaDoc.vue
@@ -15,6 +15,117 @@ import Galleria from 'primevue/galleria';
         &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" /&gt;
     &lt;/template&gt;
 &lt;/Galleria&gt;
+</CodeHighlight>
+
+                <p>For the rest of the documentation, sample data below would be return from an example service e.g. PhotoService.</p>
+<div style="overflow: auto; height: 400px">
+<CodeHighlight lang="js">
+{
+    "data":[
+        {
+            "previewImageSrc": "demo/images/galleria/galleria1.jpg",
+            "thumbnailImageSrc": "demo/images/galleria/galleria1s.jpg",
+            "alt": "Description for Image 1",
+            "title": "Title 1"
+        },
+        {
+            "previewImageSrc": "demo/images/galleria/galleria2.jpg",
+            "thumbnailImageSrc": "demo/images/galleria/galleria2s.jpg",
+            "alt": "Description for Image 2",
+            "title": "Title 2"
+        },
+        {
+            "previewImageSrc": "demo/images/galleria/galleria3.jpg",
+            "thumbnailImageSrc": "demo/images/galleria/galleria3s.jpg",
+            "alt": "Description for Image 3",
+            "title": "Title 3"
+        },
+        {
+            "previewImageSrc": "demo/images/galleria/galleria4.jpg",
+            "thumbnailImageSrc": "demo/images/galleria/galleria4s.jpg",
+            "alt": "Description for Image 4",
+            "title": "Title 4"
+        },
+        {
+            "previewImageSrc": "demo/images/galleria/galleria5.jpg",
+            "thumbnailImageSrc": "demo/images/galleria/galleria5s.jpg",
+            "alt": "Description for Image 5",
+            "title": "Title 5"
+        },
+        {
+            "previewImageSrc": "demo/images/galleria/galleria6.jpg",
+            "thumbnailImageSrc": "demo/images/galleria/galleria6s.jpg",
+            "alt": "Description for Image 6",
+            "title": "Title 6"
+        },
+        {
+            "previewImageSrc": "demo/images/galleria/galleria7.jpg",
+            "thumbnailImageSrc": "demo/images/galleria/galleria7s.jpg",
+            "alt": "Description for Image 7",
+            "title": "Title 7"
+        },
+        {
+            "previewImageSrc": "demo/images/galleria/galleria8.jpg",
+            "thumbnailImageSrc": "demo/images/galleria/galleria8s.jpg",
+            "alt": "Description for Image 8",
+            "title": "Title 8"
+        },
+        {
+            "previewImageSrc": "demo/images/galleria/galleria9.jpg",
+            "thumbnailImageSrc": "demo/images/galleria/galleria9s.jpg",
+            "alt": "Description for Image 9",
+            "title": "Title 9"
+        },
+        {
+            "previewImageSrc": "demo/images/galleria/galleria10.jpg",
+            "thumbnailImageSrc": "demo/images/galleria/galleria10s.jpg",
+            "alt": "Description for Image 10",
+            "title": "Title 10"
+        },
+        {
+            "previewImageSrc": "demo/images/galleria/galleria11.jpg",
+            "thumbnailImageSrc": "demo/images/galleria/galleria11s.jpg",
+            "alt": "Description for Image 11",
+            "title": "Title 11"
+        },
+        {
+            "previewImageSrc": "demo/images/galleria/galleria12.jpg",
+            "thumbnailImageSrc": "demo/images/galleria/galleria12s.jpg",
+            "alt": "Description for Image 12",
+            "title": "Title 12"
+        },
+        {
+            "previewImageSrc": "demo/images/galleria/galleria13.jpg",
+            "thumbnailImageSrc": "demo/images/galleria/galleria13s.jpg",
+            "alt": "Description for Image 13",
+            "title": "Title 13"
+        },
+        {
+            "previewImageSrc": "demo/images/galleria/galleria14.jpg",
+            "thumbnailImageSrc": "demo/images/galleria/galleria14s.jpg",
+            "alt": "Description for Image 14",
+            "title": "Title 14"
+        },
+        {
+            "previewImageSrc": "demo/images/galleria/galleria15.jpg",
+            "thumbnailImageSrc": "demo/images/galleria/galleria15s.jpg",
+            "alt": "Description for Image 15",
+            "title": "Title 15"
+        }
+    ]
+}
+</CodeHighlight>
+</div>
+
+<CodeHighlight lang="js">
+import axios from 'axios'
+
+export default class PhotoService {
+
+	getImages() {
+        return axios.get('demo/data/photos.json').then(res => res.data.data);
+    }
+}
 </CodeHighlight>
 
 <CodeHighlight lang="js">
@@ -26,7 +137,7 @@ export default {
     },
     galleriaService: null,
 	created() {
-		this.galleriaService = new GalleriaService();
+		this.galleriaService = new PhotoService();
 	},
 	mounted() {
         this.galleriaService.getImages().then(data => this.images = data);
@@ -43,15 +154,13 @@ export default {
         &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" /&gt;
     &lt;/template&gt;
     &lt;template #thumbnail="slotProps"&gt;
-        &lt;div class="p-grid p-nogutter p-justify-center"&gt;
-            &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /&gt;
-        &lt;/div&gt;
+        &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /&gt;
     &lt;/template&gt;
 &lt;/Galleria&gt;
 </CodeHighlight>
 
 				<h3>Responsive</h3>
-                <p>For responsive design, <i>numVisible</i> can be defined using the <i>responsiveOptions</i> property that should be an array of
+                <p>For responsive design, <i>numVisible</i> can be defined using the <i>responsiveOptions</i> property which references an array of
                 objects whose breakpoint defines the max-width to apply the settings.</p>
 
 <CodeHighlight>
@@ -60,9 +169,7 @@ export default {
         &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" /&gt;
     &lt;/template&gt;
     &lt;template #thumbnail="slotProps"&gt;
-        &lt;div class="p-grid p-nogutter p-justify-center"&gt;
-            &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /&gt;
-        &lt;/div&gt;
+        &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /&gt;
     &lt;/template&gt;
 &lt;/Galleria&gt;
 </CodeHighlight>
@@ -84,7 +191,6 @@ responsiveOptions: [
 ]
 </CodeHighlight>
 
-
 				<h3>Header and Footer</h3>
                 <p>Custom content projection is available using the <i>header</i> and <i>footer</i> properties.</p>
 <CodeHighlight>
@@ -95,15 +201,21 @@ responsiveOptions: [
     &lt;template #item="slotProps"&gt;
         &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" /&gt;
     &lt;/template&gt;
-    &lt;template #thumbnail="slotProps"&gt;
-        &lt;div class="p-grid p-nogutter p-justify-center"&gt;
-            &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /&gt;
-        &lt;/div&gt;
-    &lt;/template&gt;
     &lt;template #footer&gt;
         &lt;h1&gt;Footer&lt;/h1&gt;
     &lt;/template&gt;
 &lt;/Galleria&gt;
+</CodeHighlight>
+
+                <h3>Indicators</h3>
+                <p>Indicators allow quick navigation between the items. Set <i>showIndicators</i> to display indicators which can be customized further
+                with the <i>changeItemOnIndicatorHover</i>, <i>showIndicatorsOnItem</i> and <i>indicatorsPosition</i> properties.</p>
+<CodeHighlight>
+&lt;Galleria :value="images" :showIndicators="true"&gt;
+    &lt;template #item="slotProps"&gt;
+        &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" /&gt;
+    &lt;/template&gt;
+&lt;/Galleria&gt;
 </CodeHighlight>
 
 				<h3>Properties</h3>
@@ -162,28 +274,28 @@ responsiveOptions: [
                                 <td>An array of options for responsive design.</td>
                             </tr>
                             <tr>
-                                <td>showPreviewNavButtons</td>
+                                <td>showItemNavigators</td>
                                 <td>boolean</td>
                                 <td>false</td>
-                                <td>Whether to display navigation buttons in preview container.</td>
+                                <td>Whether to display navigation buttons in item section.</td>
                             </tr>
                             <tr>
-                                <td>showThumbnailNavButtons</td>
+                                <td>showThumbnailNavigators</td>
                                 <td>boolean</td>
                                 <td>true</td>
                                 <td>Whether to display navigation buttons in thumbnail container.</td>
                             </tr>
                             <tr>
-                                <td>showNavButtonsOnPreviewHover</td>
+                                <td>showItemNavigatorsOnHover</td>
                                 <td>boolean</td>
                                 <td>false</td>
-                                <td>Whether to display navigation buttons on preview container's hover.</td>
+                                <td>Whether to display navigation buttons on item hover.</td>
                             </tr>
                             <tr>
-                                <td>changePreviewOnIndicatorHover</td>
+                                <td>changeItemOnIndicatorHover</td>
                                 <td>boolean</td>
                                 <td>false</td>
-                                <td>When enabled, preview item is changed on indicator item's hover.</td>
+                                <td>When enabled, item is changed on indicator hover.</td>
                             </tr>
                             <tr>
                                 <td>circular</td>
@@ -228,10 +340,10 @@ responsiveOptions: [
                                 <td>Whether to display indicator container.</td>
                             </tr>
                             <tr>
-                                <td>showIndicatorsOnPreview</td>
+                                <td>showIndicatorsOnItem</td>
                                 <td>boolean</td>
                                 <td>false</td>
-                                <td>When enabled, indicator container is displayed on preview container.</td>
+                                <td>When enabled, indicator container is displayed on item container.</td>
                             </tr>
                             <tr>
                                 <td>indicatorsPosition</td>
@@ -328,206 +440,50 @@ responsiveOptions: [
 				</a>
 <CodeHighlight>
 <template v-pre>
-&lt;Galleria ref="galleria" :value="images" :activeItemIndex.sync="activeItemIndex" :numVisible="5" style="max-width: 520px;" :class="galleriaClass"
-    :showThumbnails="showThumbnails" :showPreviewNavButtons="true" :showNavButtonsOnPreviewHover="true"
-    :circular="true" :autoPlay="true" :transitionInterval="3000"&gt;
+&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"&gt;
     &lt;template #item="slotProps"&gt;
-        &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" :style="[{'width': !isPreviewFullScreen ? '100%' : '', 'display': !isPreviewFullScreen ? 'block' : ''}]" /&gt;
+        &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" /&gt;
     &lt;/template&gt;
     &lt;template #thumbnail="slotProps"&gt;
-        &lt;div class="p-grid p-nogutter p-justify-center"&gt;
-            &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
-        &lt;/div&gt;
-    &lt;/template&gt;
-    &lt;template #footer&gt;
-        &lt;div class="custom-galleria-footer"&gt;
-            &lt;Button icon="pi pi-list" @click="onThumbnailButtonClick" /&gt;
-            &lt;span v-if="images"&gt;
-                &lt;span&gt;{{activeItemIndex + 1}}/{{images.length}}&lt;/span&gt;
-                &lt;span class="title"&gt;{{images[activeItemIndex].title}}&lt;/span&gt;
-                &lt;span&gt;{{images[activeItemIndex].alt}}&lt;/span&gt;
-            &lt;/span&gt;
-            &lt;Button :icon="fullScreenIcon" @click="toggleFullScreen" /&gt;
-        &lt;/div&gt;
+        &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /&gt;
     &lt;/template&gt;
 &lt;/Galleria&gt;
 </template>
 </CodeHighlight>
 
 <CodeHighlight lang="javascript">
-import GalleriaService from '../../service/GalleriaService';
+import PhotoService from '../../service/PhotoService';
 
 export default {
     data() {
         return {
             images: null,
-            activeItemIndex: 0,
-            showThumbnails: false,
-            isPreviewFullScreen: false
+			responsiveOptions: [
+				{
+                    breakpoint: '1024px',
+                    numVisible: 5
+                },
+                {
+                    breakpoint: '768px',
+                    numVisible: 3
+                },
+                {
+                    breakpoint: '560px',
+                    numVisible: 1
+                }
+			]
         }
     },
     galleriaService: null,
 	created() {
-		this.galleriaService = new GalleriaService();
+		this.galleriaService = new PhotoService();
 	},
 	mounted() {
-        this.galleriaService.getImages().then(data => this.images = data);
-        this.bindDocumentListeners();
-    },
-    methods: {
-        onThumbnailButtonClick() {
-            this.showThumbnails = !this.showThumbnails;
-        },
-        toggleFullScreen() {
-            if (this.isPreviewFullScreen) {
-                this.closePreviewFullScreen();
-            }
-            else {
-                this.openPreviewFullScreen();
-            }
-        },
-        onFullScreenChange() {
-            this.isPreviewFullScreen = !this.isPreviewFullScreen;
-        },
-        openPreviewFullScreen() {
-            let elem = this.$refs.galleria.$el;
-            if (elem.requestFullscreen) {
-                elem.requestFullscreen();
-            }
-            else if (elem.mozRequestFullScreen) { /* Firefox */
-                elem.mozRequestFullScreen();
-            }
-            else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
-                elem.webkitRequestFullscreen();
-            }
-            else if (elem.msRequestFullscreen) { /* IE/Edge */
-                elem.msRequestFullscreen();
-            }
-        },
-        closePreviewFullScreen() {
-            if (document.exitFullscreen) {
-                document.exitFullscreen();
-            }
-            else if (document.mozCancelFullScreen) {
-                document.mozCancelFullScreen();
-            }
-            else if (document.webkitExitFullscreen) {
-                document.webkitExitFullscreen();
-            }
-            else if (document.msExitFullscreen) {
-                document.msExitFullscreen();
-            }
-        },
-        bindDocumentListeners() {
-            document.addEventListener("fullscreenchange", this.onFullScreenChange);
-            document.addEventListener("mozfullscreenchange", this.onFullScreenChange);
-            document.addEventListener("webkitfullscreenchange", this.onFullScreenChange);
-            document.addEventListener("msfullscreenchange", this.onFullScreenChange);
-        },
-        unbindDocumentListeners() {
-            document.removeEventListener("fullscreenchange", this.onFullScreenChange);
-            document.removeEventListener("mozfullscreenchange", this.onFullScreenChange);
-            document.removeEventListener("webkitfullscreenchange", this.onFullScreenChange);
-            document.removeEventListener("msfullscreenchange", this.onFullScreenChange);
-        }
-    },
-    computed: {
-        galleriaClass() {
-            return ['custom-galleria', {'preview-fullscreen': this.isPreviewFullScreen}];
-        },
-        fullScreenIcon() {
-            return `pi ${this.isPreviewFullScreen ? 'pi-window-minimize' : 'pi-window-maximize'}`;
-        }
+		this.galleriaService.getImages().then(data => this.images = data);
     }
 }
 </CodeHighlight>
 
-<CodeHighlight lang="css">
-//SCSS
-::v-deep {
-    .custom-galleria {
-        &.p-galleria {
-            .p-galleria-content {
-                height: 95%;
-                overflow: hidden;
-                position: relative;
-
-                .p-galleria-thumbnail-content {
-                    position: absolute;
-                    width: 100%;
-                    bottom: 0;
-                    background-image: linear-gradient(180deg, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.50) 70%);
-
-                    .p-galleria-thumbnail-container {
-                        .p-galleria-thumbnail-items-content {
-                            .p-galleria-thumbnail-items-container {
-                                .p-galleria-thumbnail-item {
-                                    opacity: .6;
-
-                                    &.p-galleria-thumbnail-item-current {
-                                        opacity: 1;
-                                    }
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-
-            .p-galleria-footer {
-                padding: 0;
-                background-color: rgba(0, 0, 0, .9);
-                border: rgba(0, 0, 0, .9);
-
-                .custom-galleria-footer {
-                    width: 100%;
-                    display: flex;
-                    align-items: center;
-                    justify-content: stretch;
-                    color: #ffffff;
-
-                    > button {
-                        background-color: transparent;
-                        padding: .3rem;
-                        margin: .2rem;
-                        border: 0 none;
-                        border-radius: 0;
-                        color: #ffffff;
-
-                        &:hover {
-                            background-color: transparent;
-                        }
-                    }
-
-                    > span {
-                        flex-grow: 1;
-
-                        > span {
-                            font-size: .9rem;
-                            padding-left: .829rem;
-
-                            &.title {
-                                font-weight: bold;
-                            }
-                        }
-                    }
-                }
-            }
-
-            &.preview-fullscreen {
-                .p-galleria-preview-container {
-                    .p-galleria-preview-nav-button {
-                        top: 50%;
-                        height: 20rem;
-                        width: 4rem;
-                        margin-top: -10rem;
-                    }
-                }
-            }
-        }
-    }
-}
-</CodeHighlight>
 			</TabPanel>
 		</TabView>
 	</div>
diff --git a/src/views/galleria/GalleriaFullScreenDemo.vue b/src/views/galleria/GalleriaFullScreenDemo.vue
index 54033cd19..e9954715a 100755
--- a/src/views/galleria/GalleriaFullScreenDemo.vue
+++ b/src/views/galleria/GalleriaFullScreenDemo.vue
@@ -2,22 +2,20 @@
     <div>
         <div class="content-section introduction">
             <div class="feature-intro">
-                <h1 style="margin-bottom: 0px;">Galleria - FullScreen</h1>
-                <p></p>
+                <h1>Galleria - FullScreen</h1>
+                <p>In fullscreen mode content covers the whole page over a mask..</p>
             </div>
         </div>
 
         <div class="content-section implementation">
-            <h3 class="first">Basic</h3>
+            <h3>With Thumbnails</h3>
             <Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="9" containerStyle="max-width: 50%"
                 :circular="true" :fullScreen="true" :showItemNavigators="true" :visible.sync="displayBasic">
                 <template #item="slotProps">
 					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
 				</template>
 				<template #thumbnail="slotProps">
-                    <div class="p-grid p-nogutter p-justify-center">
-                        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
-                    </div>
+                    <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
 				</template>
             </Galleria>
 
@@ -30,24 +28,20 @@
 					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
 				</template>
 				<template #thumbnail="slotProps">
-                    <div class="p-grid p-nogutter p-justify-center">
-                        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
-                    </div>
+                    <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
 				</template>
             </Galleria>
 
             <Button label="Show" icon="pi pi-external-link" @click="displayBasic2 = true" />
 
-            <h3>Custom Contents</h3>
+            <h3>Custom Content</h3>
             <Galleria :value="images" :activeItemIndex.sync="activeItemIndex" :responsiveOptions="responsiveOptions" :numVisible="7" containerStyle="max-width: 850px"
                 :circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false" :visible.sync="displayCustom">
                 <template #item="slotProps">
 					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
 				</template>
 				<template #thumbnail="slotProps">
-                    <div class="p-grid p-nogutter p-justify-center">
-                        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
-                    </div>
+                    <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
 				</template>
             </Galleria>
 
@@ -63,16 +57,14 @@
                 <TabPanel header="Source">
 <CodeHighlight>
 <template v-pre>
-&lt;h3 class="first"&gt;Basic&lt;/h3&gt;
+&lt;h3&gt;With Thumbnails&lt;/h3&gt;
 &lt;Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="9" containerStyle="max-width: 50%"
-    :circular="true" :fullScreen="true" :showPreviewNavButtons="true" :visible.sync="displayBasic"&gt;
+    :circular="true" :fullScreen="true" :showItemNavigators="true" :visible.sync="displayBasic"&gt;
     &lt;template #item="slotProps"&gt;
         &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
     &lt;/template&gt;
     &lt;template #thumbnail="slotProps"&gt;
-        &lt;div class="p-grid p-nogutter p-justify-center"&gt;
-            &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
-        &lt;/div&gt;
+        &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
     &lt;/template&gt;
 &lt;/Galleria&gt;
 
@@ -80,29 +72,25 @@
 
 &lt;h3&gt;Without Thumbnails&lt;/h3&gt;
 &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" containerStyle="max-width: 850px"
-    :circular="true" :fullScreen="true" :showPreviewNavButtons="true" :showThumbnails="false" :visible.sync="displayBasic2"&gt;
+    :circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false" :visible.sync="displayBasic2"&gt;
     &lt;template #item="slotProps"&gt;
         &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
     &lt;/template&gt;
     &lt;template #thumbnail="slotProps"&gt;
-        &lt;div class="p-grid p-nogutter p-justify-center"&gt;
-            &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
-        &lt;/div&gt;
+        &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
     &lt;/template&gt;
 &lt;/Galleria&gt;
 
 &lt;Button label="Show" icon="pi pi-external-link" @click="displayBasic2 = true" /&gt;
 
-&lt;h3&gt;Custom Contents&lt;/h3&gt;
+&lt;h3&gt;Custom Content&lt;/h3&gt;
 &lt;Galleria :value="images" :activeItemIndex.sync="activeItemIndex" :responsiveOptions="responsiveOptions" :numVisible="7" containerStyle="max-width: 850px"
-    :circular="true" :fullScreen="true" :showPreviewNavButtons="true" :showThumbnails="false" :visible.sync="displayCustom"&gt;
+    :circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false" :visible.sync="displayCustom"&gt;
     &lt;template #item="slotProps"&gt;
         &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
     &lt;/template&gt;
     &lt;template #thumbnail="slotProps"&gt;
-        &lt;div class="p-grid p-nogutter p-justify-center"&gt;
-            &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
-        &lt;/div&gt;
+        &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
     &lt;/template&gt;
 &lt;/Galleria&gt;
 
@@ -115,7 +103,7 @@
 </CodeHighlight>
 
 <CodeHighlight lang="javascript">
-import GalleriaService from '../../service/GalleriaService';
+import PhotoService from '../../service/PhotoService';
 
 export default {
     data() {
@@ -161,7 +149,7 @@ export default {
     },
     galleriaService: null,
 	created() {
-		this.galleriaService = new GalleriaService();
+		this.galleriaService = new PhotoService();
 	},
 	mounted() {
 		this.galleriaService.getImages().then(data => this.images = data);
@@ -181,7 +169,7 @@ export default {
 </template>
 
 <script>
-import GalleriaService from '../../service/GalleriaService';
+import PhotoService from '../../service/PhotoService';
 
 export default {
     data() {
@@ -227,7 +215,7 @@ export default {
     },
     galleriaService: null,
 	created() {
-		this.galleriaService = new GalleriaService();
+		this.galleriaService = new PhotoService();
 	},
 	mounted() {
 		this.galleriaService.getImages().then(data => this.images = data);
diff --git a/src/views/galleria/GalleriaIndicatorDemo.vue b/src/views/galleria/GalleriaIndicatorDemo.vue
index 8a6ddfcc0..8cda9635c 100755
--- a/src/views/galleria/GalleriaIndicatorDemo.vue
+++ b/src/views/galleria/GalleriaIndicatorDemo.vue
@@ -2,13 +2,13 @@
     <div>
         <div class="content-section introduction">
             <div class="feature-intro">
-                <h1 style="margin-bottom: 0px;">Galleria - Indicator</h1>
-                <p></p>
+                <h1>Galleria - Indicator</h1>
+                <p>Indicators allow quick navigation between the items.</p>
             </div>
         </div>
 
         <div class="content-section implementation">
-            <h3 class="first">Basic</h3>
+            <h3>Indicators with Click Event</h3>
             <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"
                 :showThumbnails="false" :showIndicators="true">
                 <template #item="slotProps">
@@ -16,7 +16,7 @@
 				</template>
             </Galleria>
 
-            <h3>Change Preview On Indicator Hover</h3>
+            <h3>Indicators with Hover Event</h3>
             <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"
                 :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true">
                 <template #item="slotProps">
@@ -24,7 +24,7 @@
 				</template>
             </Galleria>
 
-            <h3>Show Indicator On Preview</h3>
+            <h3>Inside Content</h3>
             <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"
                 :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true">
                 <template #item="slotProps">
@@ -32,57 +32,38 @@
 				</template>
             </Galleria>
 
-            <h3>Position</h3>
+            <h3>Positioned at Top</h3>
             <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"
-                :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="bottom">
-                <template #header>
-                    Bottom
-                </template>
-                <template #item="slotProps">
-					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
-				</template>
-            </Galleria>
-
-            <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px; margin-top: 2rem;"
                 :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="top">
-                <template #header>
-                    Top
-                </template>
                 <template #item="slotProps">
 					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
 				</template>
             </Galleria>
 
-            <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px; margin-top: 2rem;"
+            <h3>Positioned at Left</h3>
+            <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"
                 :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="left">
-                <template #header>
-                    Left
-                </template>
                 <template #item="slotProps">
 					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
 				</template>
             </Galleria>
 
-            <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px; margin-top: 2rem;"
+            <h3>Positioned at Right</h3>
+            <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"
                 :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="right">
-                <template #header>
-                    Right
-                </template>
                 <template #item="slotProps">
 					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
 				</template>
             </Galleria>
 
-            <hr />
-
-            <h3>Template</h3>
+            <h3>Indicator Template</h3>
             <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px;" class="custom-indicator-galleria"
                 :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="left">
                 <template #item="slotProps">
 					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
 				</template>
                 <template #indicator="{index}">
-                    <span style="color: #e9ecef">
+                    <span style="color: #e9ecef; cursor: pointer">
                         {{index + 1}}
                     </span>
 				</template>
@@ -94,170 +75,71 @@
                 <TabPanel header="Source">
 <CodeHighlight>
 <template v-pre>
-&lt;h3 class="first"&gt;Basic&lt;/h3&gt;
+&lt;h3&gt;Indicators with Click Event&lt;/h3&gt;
 &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"
     :showThumbnails="false" :showIndicators="true"&gt;
     &lt;template #item="slotProps"&gt;
         &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
     &lt;/template&gt;
-    &lt;template #thumbnail="slotProps"&gt;
-        &lt;div class="p-grid p-nogutter p-justify-center"&gt;
-            &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
-        &lt;/div&gt;
-    &lt;/template&gt;
 &lt;/Galleria&gt;
 
-&lt;hr /&gt;
-
-&lt;h3&gt;Change Preview On Indicator Hover&lt;/h3&gt;
+&lt;h3&gt;Indicators with Hover Event&lt;/h3&gt;
 &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"
-    :showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true"&gt;
+    :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true"&gt;
     &lt;template #item="slotProps"&gt;
         &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
     &lt;/template&gt;
-    &lt;template #thumbnail="slotProps"&gt;
-        &lt;div class="p-grid p-nogutter p-justify-center"&gt;
-            &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
-        &lt;/div&gt;
-    &lt;/template&gt;
 &lt;/Galleria&gt;
 
-&lt;hr /&gt;
-
-&lt;h3&gt;Show Indicator On Preview&lt;/h3&gt;
+&lt;h3&gt;Inside Content&lt;/h3&gt;
 &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"
-    :showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" :showIndicatorsOnPreview="true"&gt;
+    :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true"&gt;
     &lt;template #item="slotProps"&gt;
         &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
     &lt;/template&gt;
-    &lt;template #thumbnail="slotProps"&gt;
-        &lt;div class="p-grid p-nogutter p-justify-center"&gt;
-            &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
-        &lt;/div&gt;
-    &lt;/template&gt;
 &lt;/Galleria&gt;
 
-&lt;hr /&gt;
-
-&lt;h3&gt;Position&lt;/h3&gt;
+&lt;h3&gt;Positioned at Top&lt;/h3&gt;
 &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"
-    :showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" :showIndicatorsOnPreview="true" indicatorsPosition="bottom"&gt;
-    &lt;template #header&gt;
-        Bottom
-    &lt;/template&gt;
+    :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="top"&gt;
     &lt;template #item="slotProps"&gt;
         &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
     &lt;/template&gt;
-    &lt;template #thumbnail="slotProps"&gt;
-        &lt;div class="p-grid p-nogutter p-justify-center"&gt;
-            &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
-        &lt;/div&gt;
-    &lt;/template&gt;
 &lt;/Galleria&gt;
 
-&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px; margin-top: 2rem;"
-    :showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" :showIndicatorsOnPreview="true" indicatorsPosition="top"&gt;
-    &lt;template #header&gt;
-        Top
-    &lt;/template&gt;
+&lt;h3&gt;Positioned at Left&lt;/h3&gt;
+&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"
+    :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="left"&gt;
     &lt;template #item="slotProps"&gt;
         &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
     &lt;/template&gt;
-    &lt;template #thumbnail="slotProps"&gt;
-        &lt;div class="p-grid p-nogutter p-justify-center"&gt;
-            &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
-        &lt;/div&gt;
-    &lt;/template&gt;
 &lt;/Galleria&gt;
 
-&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px; margin-top: 2rem;"
-    :showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" :showIndicatorsOnPreview="true" indicatorsPosition="left"&gt;
-    &lt;template #header&gt;
-        Left
-    &lt;/template&gt;
+&lt;h3&gt;Positioned at Right&lt;/h3&gt;
+&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"
+    :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="right"&gt;
     &lt;template #item="slotProps"&gt;
         &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
     &lt;/template&gt;
-    &lt;template #thumbnail="slotProps"&gt;
-        &lt;div class="p-grid p-nogutter p-justify-center"&gt;
-            &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
-        &lt;/div&gt;
-    &lt;/template&gt;
 &lt;/Galleria&gt;
 
-&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px; margin-top: 2rem;"
-    :showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" :showIndicatorsOnPreview="true" indicatorsPosition="right"&gt;
-    &lt;template #header&gt;
-        Right
-    &lt;/template&gt;
-    &lt;template #item="slotProps"&gt;
-        &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
-    &lt;/template&gt;
-    &lt;template #thumbnail="slotProps"&gt;
-        &lt;div class="p-grid p-nogutter p-justify-center"&gt;
-            &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
-        &lt;/div&gt;
-    &lt;/template&gt;
-&lt;/Galleria&gt;
-
-&lt;hr /&gt;
-
-&lt;h3&gt;Template&lt;/h3&gt;
+&lt;h3&gt;Indicator Template&lt;/h3&gt;
 &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px;" class="custom-indicator-galleria"
-    :showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" :showIndicatorsOnPreview="true" indicatorsPosition="left"&gt;
+    :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="left"&gt;
     &lt;template #item="slotProps"&gt;
         &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
     &lt;/template&gt;
-    &lt;template #thumbnail="slotProps"&gt;
-        &lt;div class="p-grid p-nogutter p-justify-center"&gt;
-            &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
-        &lt;/div&gt;
-    &lt;/template&gt;
     &lt;template #indicator="{index}"&gt;
-        &lt;div&gt;
+        &lt;span style="color: #e9ecef; cursor: pointer"&gt;
             {{index + 1}}
-        &lt;/div&gt;
-    &lt;/template&gt;
-&lt;/Galleria&gt;
-
-&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px; margin-top: 2rem;" class="custom-indicator-galleria"
-    :showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" indicatorsPosition="left"&gt;
-    &lt;template #item="slotProps"&gt;
-        &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
-    &lt;/template&gt;
-    &lt;template #thumbnail="slotProps"&gt;
-        &lt;div class="p-grid p-nogutter p-justify-center"&gt;
-            &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
-        &lt;/div&gt;
-    &lt;/template&gt;
-    &lt;template #indicator="{index}"&gt;
-        &lt;div&gt;
-            {{index + 1}}
-        &lt;/div&gt;
-    &lt;/template&gt;
-&lt;/Galleria&gt;
-
-&lt;Galleria :value="images2" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px; margin-top: 2rem;" class="custom-indicator-galleria2"
-    :showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" indicatorsPosition="left"&gt;
-    &lt;template #item="slotProps"&gt;
-        &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
-    &lt;/template&gt;
-    &lt;template #thumbnail="slotProps"&gt;
-        &lt;div class="p-grid p-nogutter p-justify-center"&gt;
-            &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
-        &lt;/div&gt;
-    &lt;/template&gt;
-    &lt;template #indicator="{index}"&gt;
-        &lt;div style="padding: .2rem; cursor: pointer"&gt;
-            &lt;img :src="images2[index].thumbnailImageSrc" :alt="images2[index].alt" style="display: block"/&gt;
-        &lt;/div&gt;
+        &lt;/span&gt;
     &lt;/template&gt;
 &lt;/Galleria&gt;
 </template>
 </CodeHighlight>
 
 <CodeHighlight lang="javascript">
-import GalleriaService from '../../service/GalleriaService';
+import PhotoService from '../../service/PhotoService';
 
 export default {
     data() {
@@ -282,7 +164,7 @@ export default {
     },
     galleriaService: null,
 	created() {
-		this.galleriaService = new GalleriaService();
+		this.galleriaService = new PhotoService();
 	},
 	mounted() {
 		this.galleriaService.getImages().then(data => {
@@ -291,93 +173,6 @@ export default {
         });
     }
 }
-</CodeHighlight>
-
-<CodeHighlight lang="css">
-//SCSS
-::v-deep {
-    &.custom-indicator-galleria {
-        &.p-galleria-indicators-left {
-            .p-galleria-preview-content {
-                .p-galleria-indicators {
-                    display: flex;
-                    justify-content: space-between;
-                    padding: 0;
-
-                    .p-galleria-indicator-item {
-                        margin-left: 0;
-                        height: 100%;
-                        padding-left: .5em !important;
-                        padding-right: .5em !important;
-                        background-color: rgba(0, 0, 0, 0.6);
-                        color: #ffffff;
-                        border-top-width: 0 !important;
-                        border-radius: 0;
-                        min-width: 40px;
-                        display: flex;
-                        align-items: center;
-                        justify-content: center;
-                        cursor: pointer;
-                        transition: all .2s;
-
-                        &:first-child {
-                            border-top-width: 1px !important;
-                        }
-
-                        &.p-highlight {
-                            color: var(--primaryTextColor);
-                            background-color: var(--primaryColor);
-                            border-color: var(--primaryColor);
-                        }
-                    }
-                }
-            }
-        }
-
-        &:not(.p-galleria-indicator-onpreview) {
-            &.p-galleria-indicators-left {
-                .p-galleria-preview-content {
-                    align-items: stretch;
-
-                    .p-galleria-preview-container {
-                        border: 1px solid #c8c8c8; /* for IE */
-                        border: var(--panelContentBorder);
-                        border-left-width: 0;
-                    }
-
-                    .p-galleria-indicators {
-                        .p-galleria-indicator-item {
-                            background-color: #ffffff;
-                            border: 1px solid #c8c8c8; /* for IE */
-                            border: var(--panelContentBorder);
-                            color: #333333;
-
-                            &.p-highlight {
-                                color: var(--primaryTextColor);
-                                background-color: var(--primaryColor);
-                                border-color: var(--primaryColor);
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-    &.custom-indicator-galleria2 {
-        &.p-galleria-indicators-left {
-            .p-galleria-content {
-                .p-galleria-preview-content {
-                    .p-galleria-indicators {
-                        .p-galleria-indicator-item {
-                            padding-right: 0;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
 </CodeHighlight>
                 </TabPanel>
             </TabView>
@@ -386,7 +181,7 @@ export default {
 </template>
 
 <script>
-import GalleriaService from '../../service/GalleriaService';
+import PhotoService from '../../service/PhotoService';
 
 export default {
     data() {
@@ -411,7 +206,7 @@ export default {
     },
     galleriaService: null,
 	created() {
-		this.galleriaService = new GalleriaService();
+		this.galleriaService = new PhotoService();
 	},
 	mounted() {
 		this.galleriaService.getImages().then(data => {
@@ -420,8 +215,4 @@ export default {
         });
     }
 }
-</script>
-
-<style lang="scss" scoped>
-
-</style>
+</script>
\ No newline at end of file
diff --git a/src/views/galleria/GalleriaNavigatorDemo.vue b/src/views/galleria/GalleriaNavigatorDemo.vue
new file mode 100755
index 000000000..f003bb8b1
--- /dev/null
+++ b/src/views/galleria/GalleriaNavigatorDemo.vue
@@ -0,0 +1,176 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>Galleria - Navigator</h1>
+                <p>Combining item navigators, thumbnails and indicators provide various UI alternatives.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <h3>Item Navigators and Thumbnails</h3>
+            <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px"
+                :showItemNavigators="true">
+                <template #item="slotProps">
+					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
+				</template>
+				<template #thumbnail="slotProps">
+                    <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
+				</template>
+            </Galleria>
+
+            <h3>Item Navigators without Thumbnails</h3>
+            <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px"
+                :showItemNavigators="true" :showThumbnails="false">
+                <template #item="slotProps">
+					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
+				</template>
+				<template #thumbnail="slotProps">
+                    <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
+				</template>
+            </Galleria>
+
+            <h3>Item Navigators on Hover</h3>
+            <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px;"
+                :showItemNavigators="true" :showItemNavigatorsOnHover="true">
+                <template #item="slotProps">
+					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
+				</template>
+				<template #thumbnail="slotProps">
+                    <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
+				</template>
+            </Galleria>
+
+            <h3>Item Navigators and Indicators</h3>
+            <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px;"
+                :showItemNavigators="true" :showThumbnails="false" :showItemNavigatorsOnHover="true" :showIndicators="true">
+                <template #item="slotProps">
+					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
+				</template>
+				<template #thumbnail="slotProps">
+                     <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
+				</template>
+            </Galleria>
+        </div>
+
+        <div class="content-section documentation">
+            <TabView>
+                <TabPanel header="Source">
+<CodeHighlight>
+<template v-pre>
+&lt;h3&gt;Item Navigators and Thumbnails&lt;/h3&gt;
+&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px"
+    :showItemNavigators="true"&gt;
+    &lt;template #item="slotProps"&gt;
+        &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
+    &lt;/template&gt;
+    &lt;template #thumbnail="slotProps"&gt;
+        &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
+    &lt;/template&gt;
+&lt;/Galleria&gt;
+
+&lt;h3&gt;Item Navigators without Thumbnails&lt;/h3&gt;
+&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px"
+    :showItemNavigators="true" :showThumbnails="false"&gt;
+    &lt;template #item="slotProps"&gt;
+        &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
+    &lt;/template&gt;
+    &lt;template #thumbnail="slotProps"&gt;
+        &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
+    &lt;/template&gt;
+&lt;/Galleria&gt;
+
+&lt;h3&gt;Item Navigators on Hover&lt;/h3&gt;
+&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px;"
+    :showItemNavigators="true" :showItemNavigatorsOnHover="true"&gt;
+    &lt;template #item="slotProps"&gt;
+        &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
+    &lt;/template&gt;
+    &lt;template #thumbnail="slotProps"&gt;
+        &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
+    &lt;/template&gt;
+&lt;/Galleria&gt;
+
+&lt;h3&gt;Item Navigators and Indicators&lt;/h3&gt;
+&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px;"
+    :showItemNavigators="true" :showThumbnails="false" :showItemNavigatorsOnHover="true" :showIndicators="true"&gt;
+    &lt;template #item="slotProps"&gt;
+        &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
+    &lt;/template&gt;
+    &lt;template #thumbnail="slotProps"&gt;
+            &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
+    &lt;/template&gt;
+&lt;/Galleria&gt;
+</template>
+</CodeHighlight>
+
+<CodeHighlight lang="javascript">
+import PhotoService from '../../service/PhotoService';
+
+export default {
+    data() {
+        return {
+            images: null,
+			responsiveOptions: [
+				{
+                    breakpoint: '1024px',
+                    numVisible: 5
+                },
+                {
+                    breakpoint: '768px',
+                    numVisible: 3
+                },
+                {
+                    breakpoint: '560px',
+                    numVisible: 1
+                }
+			]
+        }
+    },
+    galleriaService: null,
+	created() {
+		this.galleriaService = new PhotoService();
+	},
+	mounted() {
+		this.galleriaService.getImages().then(data => this.images = data);
+    }
+}
+</CodeHighlight>
+                </TabPanel>
+            </TabView>
+        </div>
+    </div>
+</template>
+
+<script>
+import PhotoService from '../../service/PhotoService';
+
+export default {
+    data() {
+        return {
+            images: null,
+			responsiveOptions: [
+				{
+                    breakpoint: '1024px',
+                    numVisible: 5
+                },
+                {
+                    breakpoint: '768px',
+                    numVisible: 3
+                },
+                {
+                    breakpoint: '560px',
+                    numVisible: 1
+                }
+			]
+        }
+    },
+    galleriaService: null,
+	created() {
+		this.galleriaService = new PhotoService();
+	},
+	mounted() {
+		this.galleriaService.getImages().then(data => this.images = data);
+    }
+}
+</script>
diff --git a/src/views/galleria/GalleriaPreviewDemo.vue b/src/views/galleria/GalleriaPreviewDemo.vue
deleted file mode 100755
index 047e510c1..000000000
--- a/src/views/galleria/GalleriaPreviewDemo.vue
+++ /dev/null
@@ -1,264 +0,0 @@
-<template>
-    <div>
-        <div class="content-section introduction">
-            <div class="feature-intro">
-                <h1 style="margin-bottom: 0px;">Galleria - Preview</h1>
-                <p></p>
-            </div>
-        </div>
-
-        <div class="content-section implementation">
-            <h3 class="first">Basic</h3>
-            <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px">
-                <template #item="slotProps">
-					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
-				</template>
-				<template #thumbnail="slotProps">
-                    <div class="p-grid p-nogutter p-justify-center">
-                        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
-                    </div>
-				</template>
-            </Galleria>
-
-            <h3>Navigation Buttons</h3>
-            <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px"
-                :showItemNavigators="true">
-                <template #header>
-                    With Thumbnails
-                </template>
-                <template #item="slotProps">
-					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
-				</template>
-				<template #thumbnail="slotProps">
-                    <div class="p-grid p-nogutter p-justify-center">
-                        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
-                    </div>
-				</template>
-            </Galleria>
-
-            <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px; margin-top: 2em"
-                :showItemNavigators="true" :showThumbnails="false">
-                <template #header>
-                    Without Thumbnails
-                </template>
-                <template #item="slotProps">
-					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
-				</template>
-				<template #thumbnail="slotProps">
-                    <div class="p-grid p-nogutter p-justify-center">
-                        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
-                    </div>
-				</template>
-            </Galleria>
-
-            <h3>Show Navigation Buttons on Hover</h3>
-            <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px;"
-                :showItemNavigators="true" :showItemNavigatorsOnHover="true">
-                <template #header>
-                    With Thumbnails
-                </template>
-                <template #item="slotProps">
-					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
-				</template>
-				<template #thumbnail="slotProps">
-                    <div class="p-grid p-nogutter p-justify-center">
-                        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
-                    </div>
-				</template>
-            </Galleria>
-
-            <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px; margin-top: 2em"
-                :showItemNavigators="true" :showThumbnails="false" :showItemNavigatorsOnHover="true">
-                <template #header>
-                    Without Thumbnails
-                </template>
-                <template #item="slotProps">
-					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
-				</template>
-				<template #thumbnail="slotProps">
-                    <div class="p-grid p-nogutter p-justify-center">
-                        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
-                    </div>
-				</template>
-            </Galleria>
-
-            <h3>Advanced</h3>
-            <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px;"
-                :showItemNavigators="true" :showThumbnails="false" :showItemNavigatorsOnHover="true"
-                :showIndicators="true" :showIndicatorsOnPreview="true" :changePreviewOnIndicatorHover="true">
-                <template #item="slotProps">
-					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
-				</template>
-				<template #thumbnail="slotProps">
-                    <div class="p-grid p-nogutter p-justify-center">
-                        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
-                    </div>
-				</template>
-            </Galleria>
-        </div>
-
-        <div class="content-section documentation">
-            <TabView>
-                <TabPanel header="Source">
-<CodeHighlight>
-<template v-pre>
-&lt;h3 class="first"&gt;Basic&lt;/h3&gt;
-&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px"&gt;
-    &lt;template #item="slotProps"&gt;
-        &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
-    &lt;/template&gt;
-    &lt;template #thumbnail="slotProps"&gt;
-        &lt;div class="p-grid p-nogutter p-justify-center"&gt;
-            &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
-        &lt;/div&gt;
-    &lt;/template&gt;
-&lt;/Galleria&gt;
-
-&lt;h3&gt;Navigation Buttons&lt;/h3&gt;
-&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px"
-    :showPreviewNavButtons="true"&gt;
-    &lt;template #header&gt;
-        With Thumbnails
-    &lt;/template&gt;
-    &lt;template #item="slotProps"&gt;
-        &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
-    &lt;/template&gt;
-    &lt;template #thumbnail="slotProps"&gt;
-        &lt;div class="p-grid p-nogutter p-justify-center"&gt;
-            &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
-        &lt;/div&gt;
-    &lt;/template&gt;
-&lt;/Galleria&gt;
-
-&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px; margin-top: 2em"
-    :showPreviewNavButtons="true" :showThumbnails="false"&gt;
-    &lt;template #header&gt;
-        Without Thumbnails
-    &lt;/template&gt;
-    &lt;template #item="slotProps"&gt;
-        &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
-    &lt;/template&gt;
-    &lt;template #thumbnail="slotProps"&gt;
-        &lt;div class="p-grid p-nogutter p-justify-center"&gt;
-            &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
-        &lt;/div&gt;
-    &lt;/template&gt;
-&lt;/Galleria&gt;
-
-&lt;h3&gt;Show Navigation Buttons on Preview Hover&lt;/h3&gt;
-&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px;"
-    :showPreviewNavButtons="true" :showNavButtonsOnPreviewHover="true"&gt;
-    &lt;template #header&gt;
-        With Thumbnails
-    &lt;/template&gt;
-    &lt;template #item="slotProps"&gt;
-        &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
-    &lt;/template&gt;
-    &lt;template #thumbnail="slotProps"&gt;
-        &lt;div class="p-grid p-nogutter p-justify-center"&gt;
-            &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
-        &lt;/div&gt;
-    &lt;/template&gt;
-&lt;/Galleria&gt;
-
-&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px; margin-top: 2em"
-    :showPreviewNavButtons="true" :showThumbnails="false" :showNavButtonsOnPreviewHover="true"&gt;
-    &lt;template #header&gt;
-        Without Thumbnails
-    &lt;/template&gt;
-    &lt;template #item="slotProps"&gt;
-        &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
-    &lt;/template&gt;
-    &lt;template #thumbnail="slotProps"&gt;
-        &lt;div class="p-grid p-nogutter p-justify-center"&gt;
-            &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
-        &lt;/div&gt;
-    &lt;/template&gt;
-&lt;/Galleria&gt;
-
-&lt;h3&gt;Advanced&lt;/h3&gt;
-&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px;"
-    :showPreviewNavButtons="true" :showThumbnails="false" :showNavButtonsOnPreviewHover="true"
-    :showIndicators="true" :showIndicatorsOnPreview="true" :changePreviewOnIndicatorHover="true"&gt;
-    &lt;template #item="slotProps"&gt;
-        &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
-    &lt;/template&gt;
-    &lt;template #thumbnail="slotProps"&gt;
-        &lt;div class="p-grid p-nogutter p-justify-center"&gt;
-            &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
-        &lt;/div&gt;
-    &lt;/template&gt;
-&lt;/Galleria&gt;
-</template>
-</CodeHighlight>
-
-<CodeHighlight lang="javascript">
-import GalleriaService from '../../service/GalleriaService';
-
-export default {
-    data() {
-        return {
-            images: null,
-			responsiveOptions: [
-				{
-                    breakpoint: '1024px',
-                    numVisible: 5
-                },
-                {
-                    breakpoint: '768px',
-                    numVisible: 3
-                },
-                {
-                    breakpoint: '560px',
-                    numVisible: 1
-                }
-			]
-        }
-    },
-    galleriaService: null,
-	created() {
-		this.galleriaService = new GalleriaService();
-	},
-	mounted() {
-		this.galleriaService.getImages().then(data => this.images = data);
-    }
-}
-</CodeHighlight>
-                </TabPanel>
-            </TabView>
-        </div>
-    </div>
-</template>
-
-<script>
-import GalleriaService from '../../service/GalleriaService';
-
-export default {
-    data() {
-        return {
-            images: null,
-			responsiveOptions: [
-				{
-                    breakpoint: '1024px',
-                    numVisible: 5
-                },
-                {
-                    breakpoint: '768px',
-                    numVisible: 3
-                },
-                {
-                    breakpoint: '560px',
-                    numVisible: 1
-                }
-			]
-        }
-    },
-    galleriaService: null,
-	created() {
-		this.galleriaService = new GalleriaService();
-	},
-	mounted() {
-		this.galleriaService.getImages().then(data => this.images = data);
-    }
-}
-</script>
diff --git a/src/views/galleria/GalleriaBasicDemo.vue b/src/views/galleria/GalleriaProgrammaticDemo.vue
old mode 100755
new mode 100644
similarity index 61%
rename from src/views/galleria/GalleriaBasicDemo.vue
rename to src/views/galleria/GalleriaProgrammaticDemo.vue
index 489a9ec48..6586a65a9
--- a/src/views/galleria/GalleriaBasicDemo.vue
+++ b/src/views/galleria/GalleriaProgrammaticDemo.vue
@@ -1,29 +1,16 @@
 <template>
-    <div>
+    <div class="galleria-demo">
         <div class="content-section introduction">
             <div class="feature-intro">
-                <h1 style="margin-bottom: 0px;">Galleria - Basic</h1>
-                <p></p>
+                <h1>Galleria - Programmatic</h1>
+                <p>Galleria can be controlled programmatically using the <b>activeItemIndex</b> property.</p>
             </div>
         </div>
 
         <div class="content-section implementation">
-            <h3 class="first">Default</h3>
-            <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px">
-                <template #item="slotProps">
-					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
-				</template>
-				<template #thumbnail="slotProps">
-                    <div class="p-grid p-nogutter p-justify-center">
-                        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
-                    </div>
-				</template>
-            </Galleria>
-
-            <h3>Programmatic</h3>
-            <div style="padding: .5em 0">
+            <div style="padding: .5rem 0">
                 <Button icon="pi pi-minus" @click="activeIndex--" class="p-button-secondary" />
-                <Button icon="pi pi-plus" @click="activeIndex++" class="p-button-secondary" style="margin-left: .5em" />
+                <Button icon="pi pi-plus" @click="activeIndex++" class="p-button-secondary" style="margin-left: .5rem" />
             </div>
 
             <Galleria :value="images" :activeItemIndex.sync="activeIndex" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px">
@@ -31,9 +18,7 @@
 					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
 				</template>
 				<template #thumbnail="slotProps">
-                    <div class="p-grid p-nogutter p-justify-center">
-                        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
-                    </div>
+                    <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
 				</template>
             </Galleria>
         </div>
@@ -43,22 +28,9 @@
                 <TabPanel header="Source">
 <CodeHighlight>
 <template v-pre>
-&lt;h3 class="first"&gt;Default&lt;/h3&gt;
-&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"&gt;
-    &lt;template #item="slotProps"&gt;
-        &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" /&gt;
-    &lt;/template&gt;
-    &lt;template #thumbnail="slotProps"&gt;
-        &lt;div class="p-grid p-nogutter p-justify-center"&gt;
-            &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /&gt;
-        &lt;/div&gt;
-    &lt;/template&gt;
-&lt;/Galleria&gt;
-
-&lt;h3&gt;Programmatic&lt;/h3&gt;
-&lt;div style="padding: .5em 0"&gt;
+&lt;div style="padding: .5rem 0"&gt;
     &lt;Button icon="pi pi-minus" @click="activeIndex--" class="p-button-secondary" /&gt;
-    &lt;Button icon="pi pi-plus" @click="activeIndex++" class="p-button-secondary" style="margin-left: .5em" /&gt;
+    &lt;Button icon="pi pi-plus" @click="activeIndex++" class="p-button-secondary" style="margin-left: .5rem" /&gt;
 &lt;/div&gt;
 
 &lt;Galleria :value="images" :activeItemIndex.sync="activeIndex" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"&gt;
@@ -66,16 +38,14 @@
         &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" /&gt;
     &lt;/template&gt;
     &lt;template #thumbnail="slotProps"&gt;
-        &lt;div class="p-grid p-nogutter p-justify-center"&gt;
-            &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /&gt;
-        &lt;/div&gt;
+        &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /&gt;
     &lt;/template&gt;
 &lt;/Galleria&gt;
 </template>
 </CodeHighlight>
 
 <CodeHighlight lang="javascript">
-import GalleriaService from '../../service/GalleriaService';
+import PhotoService from '../../service/PhotoService';
 
 export default {
     data() {
@@ -100,10 +70,10 @@ export default {
     },
     galleriaService: null,
 	created() {
-		this.galleriaService = new GalleriaService();
+		this.galleriaService = new PhotoService();
 	},
 	mounted() {
-		this.galleriaService.getImages().then(data =&gt; this.images = data);
+		this.galleriaService.getImages().then(data => this.images = data);
     },
     computed: {
         activeIndex: {
@@ -126,7 +96,7 @@ export default {
 </template>
 
 <script>
-import GalleriaService from '../../service/GalleriaService';
+import PhotoService from '../../service/PhotoService';
 
 export default {
     data() {
@@ -151,7 +121,7 @@ export default {
     },
     galleriaService: null,
 	created() {
-		this.galleriaService = new GalleriaService();
+		this.galleriaService = new PhotoService();
 	},
 	mounted() {
 		this.galleriaService.getImages().then(data => this.images = data);
diff --git a/src/views/galleria/GalleriaResponsiveDemo.vue b/src/views/galleria/GalleriaResponsiveDemo.vue
index f98985a2c..42a322a24 100755
--- a/src/views/galleria/GalleriaResponsiveDemo.vue
+++ b/src/views/galleria/GalleriaResponsiveDemo.vue
@@ -2,8 +2,8 @@
     <div>
         <div class="content-section introduction">
             <div class="feature-intro">
-                <h1 style="margin-bottom: 0px;">Galleria - Responsive</h1>
-                <p></p>
+                <h1>Galleria - Responsive</h1>
+                <p>Galleria responsiveness is defined with the <b>responsiveOptions</b> property.</p>
             </div>
         </div>
 
@@ -13,9 +13,7 @@
 					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
 				</template>
 				<template #thumbnail="slotProps">
-                    <div class="p-grid p-nogutter p-justify-center">
-                        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
-                    </div>
+                    <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
 				</template>
             </Galleria>
         </div>
@@ -30,16 +28,14 @@
         &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
     &lt;/template&gt;
     &lt;template #thumbnail="slotProps"&gt;
-        &lt;div class="p-grid p-nogutter p-justify-center"&gt;
-            &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
-        &lt;/div&gt;
+        &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
     &lt;/template&gt;
 &lt;/Galleria&gt;
 </template>
 </CodeHighlight>
 
 <CodeHighlight lang="javascript">
-import GalleriaService from '../../service/GalleriaService';
+import PhotoService from '../../service/PhotoService';
 
 export default {
     data() {
@@ -67,7 +63,7 @@ export default {
     },
     galleriaService: null,
 	created() {
-		this.galleriaService = new GalleriaService();
+		this.galleriaService = new PhotoService();
 	},
 	mounted() {
 		this.galleriaService.getImages().then(data => this.images = data);
@@ -81,7 +77,7 @@ export default {
 </template>
 
 <script>
-import GalleriaService from '../../service/GalleriaService';
+import PhotoService from '../../service/PhotoService';
 
 export default {
     data() {
@@ -109,7 +105,7 @@ export default {
     },
     galleriaService: null,
 	created() {
-		this.galleriaService = new GalleriaService();
+		this.galleriaService = new PhotoService();
 	},
 	mounted() {
 		this.galleriaService.getImages().then(data => this.images = data);
diff --git a/src/views/galleria/GalleriaThumbnailDemo.vue b/src/views/galleria/GalleriaThumbnailDemo.vue
index f3232c465..ae4b3b4b4 100755
--- a/src/views/galleria/GalleriaThumbnailDemo.vue
+++ b/src/views/galleria/GalleriaThumbnailDemo.vue
@@ -2,29 +2,24 @@
     <div>
         <div class="content-section introduction">
             <div class="feature-intro">
-                <h1 style="margin-bottom: 0px;">Galleria - Thumbnail</h1>
-                <p></p>
+                <h1>Galleria - Thumbnail</h1>
+                <p>Thumbnails represent a smaller version of the actual content.</p>
             </div>
         </div>
 
         <div class="content-section implementation">
-            <h3 class="first">Basic</h3>
+            <h3>Positioned at Bottom</h3>
             <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px">
                 <template #item="slotProps">
 					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
 				</template>
 				<template #thumbnail="slotProps">
-                    <div class="p-grid p-nogutter p-justify-center">
-                        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
-                    </div>
+                    <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
 				</template>
             </Galleria>
 
-            <h3>Position</h3>
+            <h3>Positioned at Left</h3>
             <Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="4" thumbnailsPosition="left" style="max-width: 610px">
-                <template #header>
-                    Left
-                </template>
                 <template #item="slotProps">
 					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
 				</template>
@@ -35,10 +30,8 @@
 				</template>
             </Galleria>
 
-            <Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="4" thumbnailsPosition="right" style="max-width: 610px; margin-top: 2rem;">
-                <template #header>
-                    Right
-                </template>
+            <h3>Positioned at Right</h3>
+            <Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="4" thumbnailsPosition="right" style="max-width: 610px">
                 <template #item="slotProps">
 					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
 				</template>
@@ -49,31 +42,13 @@
 				</template>
             </Galleria>
 
-            <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" thumbnailsPosition="top" style="max-width: 520px; margin-top: 2rem;">
-                <template #header>
-                    Top
-                </template>
+            <h3>Positioned at Top</h3>
+            <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" thumbnailsPosition="top" style="max-width: 520px">
                 <template #item="slotProps">
 					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
 				</template>
 				<template #thumbnail="slotProps">
-                    <div class="p-grid p-nogutter p-justify-center">
-                        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
-                    </div>
-				</template>
-            </Galleria>
-
-            <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" thumbnailsPosition="bottom" style="max-width: 520px; margin-top: 2rem;">
-                <template #header>
-                    Bottom
-                </template>
-                <template #item="slotProps">
-					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
-				</template>
-				<template #thumbnail="slotProps">
-                    <div class="p-grid p-nogutter p-justify-center">
-                        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
-                    </div>
+                   <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
 				</template>
             </Galleria>
         </div>
@@ -83,23 +58,18 @@
                 <TabPanel header="Source">
 <CodeHighlight>
 <template v-pre>
-&lt;h3 class="first"&gt;Basic&lt;/h3&gt;
+&lt;h3&gt;Positioned at Bottom&lt;/h3&gt;
 &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"&gt;
     &lt;template #item="slotProps"&gt;
         &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
     &lt;/template&gt;
     &lt;template #thumbnail="slotProps"&gt;
-        &lt;div class="p-grid p-nogutter p-justify-center"&gt;
-            &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" /&gt;
-        &lt;/div&gt;
+        &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" /&gt;
     &lt;/template&gt;
 &lt;/Galleria&gt;
 
-&lt;h3&gt;Position&lt;/h3&gt;
+&lt;h3&gt;Positioned at Left&lt;/h3&gt;
 &lt;Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="4" thumbnailsPosition="left" style="max-width: 610px"&gt;
-    &lt;template #header&gt;
-        Left
-    &lt;/template&gt;
     &lt;template #item="slotProps"&gt;
         &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
     &lt;/template&gt;
@@ -110,10 +80,8 @@
     &lt;/template&gt;
 &lt;/Galleria&gt;
 
-&lt;Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="4" thumbnailsPosition="right" style="max-width: 610px; margin-top: 2rem;"&gt;
-    &lt;template #header&gt;
-        Right
-    &lt;/template&gt;
+&lt;h3&gt;Positioned at Right&lt;/h3&gt;
+&lt;Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="4" thumbnailsPosition="right" style="max-width: 610px"&gt;
     &lt;template #item="slotProps"&gt;
         &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
     &lt;/template&gt;
@@ -124,38 +92,20 @@
     &lt;/template&gt;
 &lt;/Galleria&gt;
 
-&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" thumbnailsPosition="top" style="max-width: 520px; margin-top: 2rem;"&gt;
-    &lt;template #header&gt;
-        Top
-    &lt;/template&gt;
+&lt;h3&gt;Positioned at Top&lt;/h3&gt;
+&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" thumbnailsPosition="top" style="max-width: 520px"&gt;
     &lt;template #item="slotProps"&gt;
         &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
     &lt;/template&gt;
     &lt;template #thumbnail="slotProps"&gt;
-        &lt;div class="p-grid p-nogutter p-justify-center"&gt;
-            &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" /&gt;
-        &lt;/div&gt;
-    &lt;/template&gt;
-&lt;/Galleria&gt;
-
-&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" thumbnailsPosition="bottom" style="max-width: 520px; margin-top: 2rem;"&gt;
-    &lt;template #header&gt;
-        Bottom
-    &lt;/template&gt;
-    &lt;template #item="slotProps"&gt;
-        &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
-    &lt;/template&gt;
-    &lt;template #thumbnail="slotProps"&gt;
-        &lt;div class="p-grid p-nogutter p-justify-center"&gt;
-            &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" /&gt;
-        &lt;/div&gt;
+        &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" /&gt;
     &lt;/template&gt;
 &lt;/Galleria&gt;
 </template>
 </CodeHighlight>
 
 <CodeHighlight lang="javascript">
-import GalleriaService from '../../service/GalleriaService';
+import PhotoService from '../../service/PhotoService';
 
 export default {
     data() {
@@ -189,7 +139,7 @@ export default {
     },
     galleriaService: null,
 	created() {
-		this.galleriaService = new GalleriaService();
+		this.galleriaService = new PhotoService();
 	},
 	mounted() {
 		this.galleriaService.getImages().then(data => this.images = data);
@@ -203,7 +153,7 @@ export default {
 </template>
 
 <script>
-import GalleriaService from '../../service/GalleriaService';
+import PhotoService from '../../service/PhotoService';
 
 export default {
     data() {
@@ -237,7 +187,7 @@ export default {
     },
     galleriaService: null,
 	created() {
-		this.galleriaService = new GalleriaService();
+		this.galleriaService = new PhotoService();
 	},
 	mounted() {
 		this.galleriaService.getImages().then(data => this.images = data);