diff --git a/doc/overlaypanel/BasicDoc.vue b/doc/overlaypanel/BasicDoc.vue
index 6e272bde2..964761683 100644
--- a/doc/overlaypanel/BasicDoc.vue
+++ b/doc/overlaypanel/BasicDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>OverlayPanel is accessed via its reference and visibility is controlled using <i>toggle</i>, <i>show</i> and <i>hide</i> methods with an event of the target.</p>
+        <p>OverlayPanel is accessed via its ref and visibility is controlled using <i>toggle</i>, <i>show</i> and <i>hide</i> functions with an event of the target.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
         <Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
@@ -21,7 +21,7 @@ export default {
 <Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
 
 <OverlayPanel ref="op">
-    <img src="https://primefaces.org/cdn/primevue/images/product/bamboo-watch.jpg" alt="Bamboo Watch" />
+    <img src="/images/product/bamboo-watch.jpg" alt="Bamboo Watch" />
 </OverlayPanel>
 `,
                 options: `
@@ -60,6 +60,7 @@ export default {
 import { ref } from "vue";
 
 const op = ref();
+
 const toggle = (event) => {
     op.value.toggle(event);
 }
diff --git a/doc/overlaypanel/DataTableDoc.vue b/doc/overlaypanel/DataTableDoc.vue
index e77005fc3..1faa181e3 100644
--- a/doc/overlaypanel/DataTableDoc.vue
+++ b/doc/overlaypanel/DataTableDoc.vue
@@ -8,16 +8,16 @@
 
         <div v-if="selectedProduct" class="p-5 surface-card shadow-2 border-round">
             <div class="relative">
-                <img :src="`https://primefaces.org/cdn/primevue/images/product/${selectedProduct.image}`" :alt="selectedProduct.name" />
+                <img :src="`https://primefaces.org/cdn/primevue/images/product/${selectedProduct.image}`" :alt="selectedProduct.name" class="w-full sm:w-20rem" />
             </div>
             <div class="flex align-items-center justify-content-between mt-3 mb-2">
-                <span class="text-900 font-medium text-xl">{{ selectedProduct.name }}</span>
+                <span class="text-900 font-semibold text-xl">{{ selectedProduct.name }}</span>
                 <span class="text-900 text-xl ml-3">{{ '$' + selectedProduct.price }}</span>
             </div>
             <span class="text-600">{{ selectedProduct.category }}</span>
         </div>
 
-        <OverlayPanel ref="op" appendTo="body">
+        <OverlayPanel ref="op" appendTo="body" showCloseIcon>
             <DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect">
                 <Column field="name" header="Name" sortable style="min-width: 12rem"></Column>
                 <Column header="Image">
@@ -26,9 +26,7 @@
                     </template>
                 </Column>
                 <Column field="price" header="Price" sortable style="min-width: 8rem">
-                    <template #body="slotProps">
-                        {{ slotProps.data.price }}
-                    </template>
+                    <template #body="slotProps"> $ {{ slotProps.data.price }} </template>
                 </Column>
             </DataTable>
         </OverlayPanel>
@@ -50,26 +48,26 @@ export default {
 
 <div v-if="selectedProduct" class="p-5 surface-card shadow-2 border-round">
     <div class="relative">
-        <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${selectedProduct.image}\`" :alt="selectedProduct.name" class="w-4rem shadow-1" />
+        <img :src="\`/images/product/\${selectedProduct.image}\`" :alt="selectedProduct.name" class="w-4rem shadow-1" class="w-full sm:w-20rem" />
     </div>
     <div class="flex align-items-center justify-content-between mt-3 mb-2">
-        <span class="text-900 font-medium text-xl">{{ selectedProduct.name }}</span>
+        <span class="text-900 font-semibold text-xl">{{ selectedProduct.name }}</span>
         <span class="text-900 text-xl ml-3">{{ '$' + selectedProduct.price }}</span>
     </div>
     <span class="text-600">{{ selectedProduct.category }}</span>
 </div>
 
-<OverlayPanel ref="op" appendTo="body">
+<OverlayPanel ref="op" appendTo="body" showCloseIcon>
     <DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect">
         <Column field="name" header="Name" sortable style="width: 50%"></Column>
         <Column header="Image" style="width: 20%">
             <template #body="slotProps">
-                <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${selectedProduct.image}\`" :alt="slotProps.data.image" class="w-4rem shadow-1" />
+                <img :src="\`/images/product/\${selectedProduct.image}\`" :alt="slotProps.data.image" class="w-4rem shadow-1" />
             </template>
         </Column>
         <Column field="price" header="Price" sortable style="width: 30%">
             <template #body="slotProps">
-                {{ slotProps.data.price }}
+                $ {{ slotProps.data.price }}
             </template>
         </Column>
     </DataTable>
@@ -83,16 +81,16 @@ export default {
 
         <div v-if="selectedProduct" class="p-5 surface-card shadow-2 border-round">
             <div class="relative">
-                <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${selectedProduct.image}\`" :alt="selectedProduct.name" />
+                <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${selectedProduct.image}\`" :alt="selectedProduct.name" class="w-full sm:w-20rem" />
             </div>
             <div class="flex align-items-center justify-content-between mt-3 mb-2">
-                <span class="text-900 font-medium text-xl">{{ selectedProduct.name }}</span>
+                <span class="text-900 font-semibold text-xl">{{ selectedProduct.name }}</span>
                 <span class="text-900 text-xl ml-3">{{ '$' + selectedProduct.price }}</span>
             </div>
             <span class="text-600">{{ selectedProduct.category }}</span>
         </div>
 
-        <OverlayPanel ref="op" appendTo="body">
+        <OverlayPanel ref="op" appendTo="body" showCloseIcon>
             <DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect">
                 <Column field="name" header="Name" sortable style="min-width: 12rem"></Column>
                 <Column header="Image">
@@ -102,7 +100,7 @@ export default {
                 </Column>
                 <Column field="price" header="Price" sortable style="min-width: 8rem">
                     <template #body="slotProps">
-                        {{ slotProps.data.price }}
+                        $ {{ slotProps.data.price }}
                     </template>
                 </Column>
             </DataTable>
@@ -145,16 +143,16 @@ export default {
 
         <div v-if="selectedProduct" class="p-5 surface-card shadow-2 border-round">
             <div class="relative">
-                <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${selectedProduct.image}\`" :alt="selectedProduct.name" />
+                <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${selectedProduct.image}\`" :alt="selectedProduct.name" class="w-full sm:w-20rem" />
             </div>
             <div class="flex align-items-center justify-content-between mt-3 mb-2">
-                <span class="text-900 font-medium text-xl">{{ selectedProduct.name }}</span>
+                <span class="text-900 font-semibold text-xl">{{ selectedProduct.name }}</span>
                 <span class="text-900 text-xl ml-3">{{ '$' + selectedProduct.price }}</span>
             </div>
             <span class="text-600">{{ selectedProduct.category }}</span>
         </div>
 
-        <OverlayPanel ref="op" appendTo="body">
+        <OverlayPanel ref="op" appendTo="body" showCloseIcon>
             <DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect">
                 <Column field="name" header="Name" sortable style="min-width: 12rem"></Column>
                 <Column header="Image">
@@ -164,7 +162,7 @@ export default {
                 </Column>
                 <Column field="price" header="Price" sortable style="min-width: 8rem">
                     <template #body="slotProps">
-                        {{ slotProps.data.price }}
+                        $ {{ slotProps.data.price }}
                     </template>
                 </Column>
             </DataTable>
diff --git a/pages/overlaypanel/index.vue b/pages/overlaypanel/index.vue
index bc2417ab4..1243cc65d 100755
--- a/pages/overlaypanel/index.vue
+++ b/pages/overlaypanel/index.vue
@@ -33,7 +33,7 @@ export default {
                     component: BasicDoc
                 },
                 {
-                    id: 'dataTable',
+                    id: 'datatable',
                     label: 'DataTable',
                     component: DataTableDoc
                 },