diff --git a/src/views/galleria/GalleriaIndicatorDemo.vue b/src/views/galleria/GalleriaIndicatorDemo.vue
index 82b0ad927..6b43231d5 100755
--- a/src/views/galleria/GalleriaIndicatorDemo.vue
+++ b/src/views/galleria/GalleriaIndicatorDemo.vue
@@ -63,7 +63,7 @@
 					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
 				</template>
                 <template #indicator="{index}">
-                    <span style="color: #e9ecef; cursor: pointer">
+                    <span class="indicator-text">
                         {{index + 1}}
                     </span>
 				</template>
@@ -173,6 +173,23 @@ export default {
         });
     }
 }
+</CodeHighlight>
+
+<CodeHighlight lang="css">
+::v-deep {
+    .custom-indicator-galleria {
+        .indicator-text {
+            color: #e9ecef;
+            cursor: pointer;
+        }
+
+        .p-highlight {
+            .indicator-text {
+                color: var(--primary-color);
+            }
+        }
+    }
+}
 </CodeHighlight>
                 </TabPanel>
             </TabView>
@@ -215,4 +232,21 @@ export default {
         });
     }
 }
-</script>
\ No newline at end of file
+</script>
+
+<style lang="scss" scoped>
+::v-deep {
+    .custom-indicator-galleria {
+        .indicator-text {
+            color: #e9ecef;
+            cursor: pointer;
+        }
+
+        .p-highlight {
+            .indicator-text {
+                color: var(--primary-color);
+            }
+        }
+    }
+}
+</style>
diff --git a/src/views/galleria/GalleriaThumbnailDemo.vue b/src/views/galleria/GalleriaThumbnailDemo.vue
index 8a3abd40e..fd83c11d1 100755
--- a/src/views/galleria/GalleriaThumbnailDemo.vue
+++ b/src/views/galleria/GalleriaThumbnailDemo.vue
@@ -19,7 +19,7 @@
             </Galleria>
 
             <h3>Positioned at Left</h3>
-            <Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="4" thumbnailsPosition="left" style="max-width: 610px">
+            <Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="4" thumbnailsPosition="left" style="max-width: 640px">
                 <template #item="slotProps">
 					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
 				</template>
@@ -31,7 +31,7 @@
             </Galleria>
 
             <h3>Positioned at Right</h3>
-            <Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="4" thumbnailsPosition="right" style="max-width: 610px">
+            <Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="4" thumbnailsPosition="right" style="max-width: 640px">
                 <template #item="slotProps">
 					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
 				</template>
@@ -69,7 +69,7 @@
 &lt;/Galleria&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;Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="4" thumbnailsPosition="left" style="max-width: 640px"&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;
@@ -81,7 +81,7 @@
 &lt;/Galleria&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;Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="4" thumbnailsPosition="right" style="max-width: 640px"&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;