diff --git a/doc/datatable/edit/CellEditDoc.vue b/doc/datatable/edit/CellEditDoc.vue
index 94a367e8f..da5f45cbc 100644
--- a/doc/datatable/edit/CellEditDoc.vue
+++ b/doc/datatable/edit/CellEditDoc.vue
@@ -3,7 +3,19 @@
         <p>Cell editing is enabled by setting <i>editMode</i> as <i>cell</i>, defining input elements with <i>editor</i> templating of a Column and implementing <i>cell-edit-complete</i> to update the state.</p>
     </DocSectionText>
     <div class="card p-fluid">
-        <DataTable :value="products" editMode="cell" @cell-edit-complete="onCellEditComplete" tableClass="editable-cells-table" tableStyle="min-width: 50rem">
+        <DataTable
+            :value="products"
+            editMode="cell"
+            @cell-edit-complete="onCellEditComplete"
+            :pt="{
+                table: { style: 'min-width: 50rem' },
+                column: {
+                    bodycell: ({ state }) => ({
+                        class: [{ 'pt-0 pb-0': state['d_editing'] }]
+                    })
+                }
+            }"
+        >
             <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" style="width: 25%">
                 <template #body="{ data, field }">
                     {{ field === 'price' ? formatCurrency(data[field]) : data[field] }}
@@ -37,7 +49,19 @@ export default {
             ],
             code: {
                 basic: `
-<DataTable :value="products" editMode="cell" @cell-edit-complete="onCellEditComplete" tableClass="editable-cells-table" tableStyle="min-width: 50rem">
+<DataTable
+    :value="products"
+    editMode="cell"
+    @cell-edit-complete="onCellEditComplete"
+    :pt="{
+        table: { style: 'min-width: 50rem' },
+        column: {
+            bodycell: ({ state }) => ({
+                class: [{ 'pt-0 pb-0': state['d_editing'] }]
+            })
+        }
+    }"
+>
     <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" style="width: 25%">
         <template #body="{ data, field }">
             {{ field === 'price' ? formatCurrency(data[field]) : data[field] }}
@@ -56,7 +80,19 @@ export default {
                 options: `
 <template>
     <div class="card p-fluid">
-        <DataTable :value="products" editMode="cell" @cell-edit-complete="onCellEditComplete" tableClass="editable-cells-table" tableStyle="min-width: 50rem">
+        <DataTable
+            :value="products"
+            editMode="cell"
+            @cell-edit-complete="onCellEditComplete"
+            :pt="{
+                table: { style: 'min-width: 50rem' },
+                column: {
+                    bodycell: ({ state }) => ({
+                        class: [{ 'pt-0 pb-0': state['d_editing'] }]
+                    })
+                }
+            }"
+        >
             <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" style="width: 25%">
                 <template #body="{ data, field }">
                     {{ field === 'price' ? formatCurrency(data[field]) : data[field] }}
@@ -129,18 +165,23 @@ export default {
     }
 };
 <\/script>
-
-<style lang="scss" scoped>
-::v-deep(.editable-cells-table td.p-cell-editing) {
-    padding-top: 0;
-    padding-bottom: 0;
-}
-</style>
 `,
                 composition: `
 <template>
     <div class="card p-fluid">
-        <DataTable :value="products" editMode="cell" @cell-edit-complete="onCellEditComplete" tableClass="editable-cells-table" tableStyle="min-width: 50rem">
+        <DataTable
+            :value="products"
+            editMode="cell"
+            @cell-edit-complete="onCellEditComplete"
+            :pt="{
+                table: { style: 'min-width: 50rem' },
+                column: {
+                    bodycell: ({ state }) => ({
+                        class: [{ 'pt-0 pb-0': state['d_editing'] }]
+                    })
+                }
+            }"
+        >
             <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" style="width: 25%">
                 <template #body="{ data, field }">
                     {{ field === 'price' ? formatCurrency(data[field]) : data[field] }}
@@ -209,13 +250,7 @@ const formatCurrency = (value) => {
 }
 
 <\/script>
-
-<style lang="scss" scoped>
-::v-deep(.editable-cells-table td.p-cell-editing) {
-    padding-top: 0;
-    padding-bottom: 0;
-}
-</style>`,
+`,
                 data: `
 {
     id: '1000',
@@ -274,10 +309,3 @@ const formatCurrency = (value) => {
     }
 };
 </script>
-
-<style lang="scss" scoped>
-::v-deep(.editable-cells-table td.p-cell-editing) {
-    padding-top: 0;
-    padding-bottom: 0;
-}
-</style>
diff --git a/doc/datatable/edit/FilterSortEditDoc.vue b/doc/datatable/edit/FilterSortEditDoc.vue
index 0284845fd..0fd2cbc67 100644
--- a/doc/datatable/edit/FilterSortEditDoc.vue
+++ b/doc/datatable/edit/FilterSortEditDoc.vue
@@ -3,7 +3,21 @@
         <p>Cell Editing with Sorting and Filter</p>
     </DocSectionText>
     <div class="card p-fluid">
-        <DataTable v-model:filters="filters" :value="products" editMode="cell" @cell-edit-complete="onCellEditComplete" filterDisplay="row" tableClass="editable-cells-table" tableStyle="min-width: 50rem">
+        <DataTable
+            v-model:filters="filters"
+            :value="products"
+            editMode="cell"
+            @cell-edit-complete="onCellEditComplete"
+            filterDisplay="row"
+            :pt="{
+                table: { style: 'min-width: 50rem' },
+                column: {
+                    bodycell: ({ state }) => ({
+                        class: [{ 'pt-0 pb-0': state['d_editing'] }]
+                    })
+                }
+            }"
+        >
             <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" style="width: 25%" sortable filter>
                 <template #filter="{ filterModel, filterCallback }">
                     <InputText v-model="filterModel.value" v-tooltip.top.focus="'Hit enter key to filter'" type="text" @keydown.enter="filterCallback()" class="p-column-filter" />
@@ -34,8 +48,21 @@ export default {
             },
             code: {
                 basic: `
-<DataTable v-model:filters="filters" :value="products" editMode="cell" tableClass="editable-cells-table" 
-        @cell-edit-complete="onCellEditComplete" filterDisplay="row" tableStyle="min-width: 50rem">
+<DataTable
+    v-model:filters="filters"
+    :value="products"
+    editMode="cell"
+    @cell-edit-complete="onCellEditComplete"
+    filterDisplay="row"
+    :pt="{
+        table: { style: 'min-width: 50rem' },
+        column: {
+            bodycell: ({ state }) => ({
+                class: [{ 'pt-0 pb-0': state['d_editing'] }]
+            })
+        }
+    }"
+>
     <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" style="width: 25%" sortable filter>
         <template #filter="{ filterModel, filterCallback }">
             <InputText v-model="filterModel.value" v-tooltip.top.focus="'Hit enter key to filter'" type="text" @keydown.enter="filterCallback()" class="p-column-filter" />
@@ -49,8 +76,21 @@ export default {
                 options: `
 <template>
     <div class="card p-fluid">
-        <DataTable v-model:filters="filters" :value="products" editMode="cell" tableClass="editable-cells-table" 
-                @cell-edit-complete="onCellEditComplete" filterDisplay="row" tableStyle="min-width: 50rem">
+        <DataTable
+            v-model:filters="filters"
+            :value="products"
+            editMode="cell"
+            @cell-edit-complete="onCellEditComplete"
+            filterDisplay="row"
+            :pt="{
+                table: { style: 'min-width: 50rem' },
+                column: {
+                    bodycell: ({ state }) => ({
+                        class: [{ 'pt-0 pb-0': state['d_editing'] }]
+                    })
+                }
+            }"
+        >
             <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" style="width: 25%" sortable filter>
                 <template #filter="{ filterModel, filterCallback }">
                     <InputText v-model="filterModel.value" v-tooltip.top.focus="'Hit enter key to filter'" type="text" @keydown.enter="filterCallback()" class="p-column-filter" />
@@ -115,19 +155,25 @@ export default {
     }
 };
 <\/script>
-
-<style lang="scss" scoped>
-::v-deep(.editable-cells-table td.p-cell-editing) {
-    padding-top: 0;
-    padding-bottom: 0;
-}
-</style>
 `,
                 composition: `
 <template>
     <div class="card p-fluid">
-        <DataTable v-model:filters="filters" :value="products" editMode="cell" tableClass="editable-cells-table" 
-                @cell-edit-complete="onCellEditComplete" filterDisplay="row" tableStyle="min-width: 50rem">
+        <DataTable
+            v-model:filters="filters"
+            :value="products"
+            editMode="cell"
+            @cell-edit-complete="onCellEditComplete"
+            filterDisplay="row"
+            :pt="{
+                table: { style: 'min-width: 50rem' },
+                column: {
+                    bodycell: ({ state }) => ({
+                        class: [{ 'pt-0 pb-0': state['d_editing'] }]
+                    })
+                }
+            }"
+        >
             <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" style="width: 25%" sortable filter>
                 <template #filter="{ filterModel, filterCallback }">
                     <InputText v-model="filterModel.value" v-tooltip.top.focus="'Hit enter key to filter'" type="text" @keydown.enter="filterCallback()" class="p-column-filter" />
@@ -184,14 +230,7 @@ const onCellEditComplete = (event) => {
     }
 };
 
-<\/script>
-
-<style lang="scss" scoped>
-::v-deep(.editable-cells-table td.p-cell-editing) {
-    padding-top: 0;
-    padding-bottom: 0;
-}
-</style>`,
+<\/script>`,
                 data: `
 {
     id: '1000',
@@ -240,10 +279,3 @@ const onCellEditComplete = (event) => {
     }
 };
 </script>
-
-<style lang="scss" scoped>
-::v-deep(.editable-cells-table td.p-cell-editing) {
-    padding-top: 0;
-    padding-bottom: 0;
-}
-</style>
diff --git a/doc/datatable/scroll/FrozenRowsDoc.vue b/doc/datatable/scroll/FrozenRowsDoc.vue
index d4a57378a..a20314399 100644
--- a/doc/datatable/scroll/FrozenRowsDoc.vue
+++ b/doc/datatable/scroll/FrozenRowsDoc.vue
@@ -3,7 +3,18 @@
         <p>Rows can be fixed during scrolling by enabling the <i>frozenValue</i> property.</p>
     </DocSectionText>
     <div class="card">
-        <DataTable :value="customers" :frozenValue="lockedCustomers" scrollable scrollHeight="400px" tableStyle="min-width: 50rem">
+        <DataTable
+            :value="customers"
+            :frozenValue="lockedCustomers"
+            scrollable
+            scrollHeight="400px"
+            :pt="{
+                table: { style: 'min-width: 50rem' },
+                bodyrow: ({ props }) => ({
+                    class: [{ 'font-bold': props.frozenRow }]
+                })
+            }"
+        >
             <Column field="name" header="Name"></Column>
             <Column field="country.name" header="Country"></Column>
             <Column field="representative.name" header="Representative"></Column>
@@ -45,7 +56,18 @@ export default {
             ],
             code: {
                 basic: `
-<DataTable :value="customers" :frozenValue="lockedCustomers" scrollable scrollHeight="400px" tableStyle="min-width: 50rem">
+<DataTable
+    :value="customers"
+    :frozenValue="lockedCustomers"
+    scrollable
+    scrollHeight="400px"
+    :pt="{
+        table: { style: 'min-width: 50rem' },
+        bodyrow: ({ props }) => ({
+            class: [{ 'font-bold': props.frozenRow }]
+        })
+    }"
+>
     <Column field="name" header="Name"></Column>
     <Column field="country.name" header="Country"></Column>
     <Column field="representative.name" header="Representative"></Column>
@@ -60,7 +82,18 @@ export default {
                 options: `
 <template>
     <div class="card">
-        <DataTable :value="customers" :frozenValue="lockedCustomers" scrollable scrollHeight="400px" tableStyle="min-width: 50rem">
+        <DataTable
+            :value="customers"
+            :frozenValue="lockedCustomers"
+            scrollable
+            scrollHeight="400px"
+            :pt="{
+                table: { style: 'min-width: 50rem' },
+                bodyrow: ({ props }) => ({
+                    class: [{ 'font-bold': props.frozenRow }]
+                })
+            }"
+        >
             <Column field="name" header="Name"></Column>
             <Column field="country.name" header="Country"></Column>
             <Column field="representative.name" header="Representative"></Column>
@@ -127,7 +160,18 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <DataTable :value="customers" :frozenValue="lockedCustomers" scrollable scrollHeight="400px" tableStyle="min-width: 50rem">
+        <DataTable
+            :value="customers"
+            :frozenValue="lockedCustomers"
+            scrollable
+            scrollHeight="400px"
+            :pt="{
+                table: { style: 'min-width: 50rem' },
+                bodyrow: ({ props }) => ({
+                    class: [{ 'font-bold': props.frozenRow }]
+                })
+            }"
+        >
             <Column field="name" header="Name"></Column>
             <Column field="country.name" header="Country"></Column>
             <Column field="representative.name" header="Representative"></Column>
@@ -233,9 +277,3 @@ onMounted(() => {
     }
 };
 </script>
-
-<style lang="scss" scoped>
-::v-deep(.p-datatable-frozen-tbody > tr) {
-    font-weight: 700;
-}
-</style>
diff --git a/doc/progressspinner/CustomDoc.vue b/doc/progressspinner/CustomDoc.vue
index 079f59042..fc4b56204 100644
--- a/doc/progressspinner/CustomDoc.vue
+++ b/doc/progressspinner/CustomDoc.vue
@@ -44,16 +44,3 @@ export default {
     }
 };
 </script>
-
-<style scoped>
-::v-deep(.styled-box-green .p-ink) {
-    background: rgba(75, 175, 80, 0.3);
-}
-::v-deep(.styled-box-orange .p-ink) {
-    background: rgba(#ffc106, 0.3);
-}
-
-::v-deep(.styled-box-purple .p-ink) {
-    background: rgba(#9c27b0, 0.3);
-}
-</style>
diff --git a/doc/scrolltop/ElementDoc.vue b/doc/scrolltop/ElementDoc.vue
index dda166e36..b5db5e4ac 100644
--- a/doc/scrolltop/ElementDoc.vue
+++ b/doc/scrolltop/ElementDoc.vue
@@ -11,7 +11,18 @@
                 dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas. Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris. Eget egestas purus viverra accumsan in nisl nisi.
                 Suscipit adipiscing bibendum est ultricies integer. Mattis aliquam faucibus purus in massa tempor nec.
             </p>
-            <ScrollTop target="parent" :threshold="100" class="custom-scrolltop" icon="pi pi-arrow-up" />
+            <ScrollTop
+                target="parent"
+                :threshold="100"
+                icon="pi pi-arrow-up"
+                :pt="{
+                    root: 'w-2rem h-2rem border-round-sm bg-primary hover:bg-primary',
+                    icon: {
+                        class: 'text-base',
+                        style: 'color: var(--primary-color-text)'
+                    }
+                }"
+            />
         </ScrollPanel>
     </div>
     <DocSectionCode :code="code" />
@@ -23,7 +34,7 @@ export default {
         return {
             code: {
                 basic: `
-<ScrollTop target="parent" :threshold="100" class="custom-scrolltop" icon="pi pi-arrow-up" />
+<ScrollTop target="parent" :threshold="100" icon="pi pi-arrow-up" />
 `,
                 options: `
 <template>
@@ -36,31 +47,21 @@ export default {
                 dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas. Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris. Eget egestas purus viverra accumsan in nisl nisi.
                 Suscipit adipiscing bibendum est ultricies integer. Mattis aliquam faucibus purus in massa tempor nec.
             </p>
-            <ScrollTop target="parent" :threshold="100" class="custom-scrolltop" icon="pi pi-arrow-up" />
+            <ScrollTop
+                target="parent"
+                :threshold="100"
+                icon="pi pi-arrow-up"
+                :pt="{
+                    root: 'w-2rem h-2rem border-round-sm bg-primary hover:bg-primary',
+                    icon: {
+                        class: 'text-base',
+                        style: 'color: var(--primary-color-text)'
+                    }
+                }"
+            />
         </ScrollPanel>
     </div>
 </template>
-
-<script>
-<\/script>
-
-<style scoped>
-::v-deep(.custom-scrolltop) {
-    width: 2rem;
-    height: 2rem;
-    border-radius: 4px;
-    background-color: var(--primary-color);
-}
-
-::v-deep(.custom-scrolltop:hover) {
-    background-color: var(--primary-color);
-}
-
-::v-deep(.custom-scrolltop .p-scrolltop-icon) {
-    font-size: 1rem;
-    color: var(--primary-color-text);
-}
-</style>
 `,
                 composition: `
 <template>
@@ -73,51 +74,24 @@ export default {
                 dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas. Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris. Eget egestas purus viverra accumsan in nisl nisi.
                 Suscipit adipiscing bibendum est ultricies integer. Mattis aliquam faucibus purus in massa tempor nec.
             </p>
-            <ScrollTop target="parent" :threshold="100" class="custom-scrolltop" icon="pi pi-arrow-up" />
+            <ScrollTop
+                target="parent"
+                :threshold="100"
+                icon="pi pi-arrow-up"
+                :pt="{
+                    root: 'w-2rem h-2rem border-round-sm bg-primary hover:bg-primary',
+                    icon: {
+                        class: 'text-base',
+                        style: 'color: var(--primary-color-text)'
+                    }
+                }"
+            />
         </ScrollPanel>
     </div>
 </template>
-
-<script setup>
-<\/script>
-
-<style scoped>
-::v-deep(.custom-scrolltop) {
-    width: 2rem;
-    height: 2rem;
-    border-radius: 4px;
-    background-color: var(--primary-color);
-}
-
-::v-deep(.custom-scrolltop:hover) {
-    background-color: var(--primary-color);
-}
-
-::v-deep(.custom-scrolltop .p-scrolltop-icon) {
-    font-size: 1rem;
-    color: var(--primary-color-text);
-}
-</style>`
+`
             }
         };
     }
 };
 </script>
-
-<style scoped>
-::v-deep(.custom-scrolltop) {
-    width: 2rem;
-    height: 2rem;
-    border-radius: 4px;
-    background-color: var(--primary-color);
-}
-
-::v-deep(.custom-scrolltop:hover) {
-    background-color: var(--primary-color);
-}
-
-::v-deep(.custom-scrolltop .p-scrolltop-icon) {
-    font-size: 1rem;
-    color: var(--primary-color-text);
-}
-</style>
diff --git a/doc/steps/InteractiveDoc.vue b/doc/steps/InteractiveDoc.vue
index acd6c5239..108c2f46d 100644
--- a/doc/steps/InteractiveDoc.vue
+++ b/doc/steps/InteractiveDoc.vue
@@ -162,16 +162,6 @@ export default {
     }
 }
 <\/script>
-
-<style scoped>
-::v-deep(b) {
-    display: block;
-}
-
-::v-deep(.p-card-body) {
-    padding: 2rem;
-}
-</style>
 `,
                 composition: `
 <template>
@@ -251,16 +241,7 @@ const isActive = (item) => {
     return item.route ? router.resolve(item.route).path === route.path : false;
 };
 <\/script>
-
-<style scoped>
-::v-deep(b) {
-    display: block;
-}
-
-::v-deep(.p-card-body) {
-    padding: 2rem;
-}
-</style>`,
+`,
                 pages: [
                     {
                         tabName: 'PersonalDemo',
diff --git a/doc/timeline/TemplateDoc.vue b/doc/timeline/TemplateDoc.vue
index 5580e0f86..e1ed3e9b8 100644
--- a/doc/timeline/TemplateDoc.vue
+++ b/doc/timeline/TemplateDoc.vue
@@ -10,7 +10,7 @@
                 </span>
             </template>
             <template #content="slotProps">
-                <Card>
+                <Card class="mt-3">
                     <template #title>
                         {{ slotProps.item.status }}
                     </template>
@@ -51,7 +51,7 @@ export default {
         </span>
     </template>
     <template #content="slotProps">
-        <Card>
+        <Card class="mt-3">
             <template #title>
                 {{ slotProps.item.status }}
             </template>
@@ -80,7 +80,7 @@ export default {
                 </span>
             </template>
             <template #content="slotProps">
-                <Card>
+                <Card class="mt-3">
                     <template #title>
                         {{ slotProps.item.status }}
                     </template>
@@ -130,10 +130,6 @@ export default {
         .p-timeline-event-opposite {
             flex: 0;
         }
-
-        .p-card {
-            margin-top: 1rem;
-        }
     }
 }
 </style>
@@ -148,7 +144,7 @@ export default {
                 </span>
             </template>
             <template #content="slotProps">
-                <Card>
+                <Card class="mt-3">
                     <template #title>
                         {{ slotProps.item.status }}
                     </template>
@@ -195,10 +191,6 @@ const events = ref([
         .p-timeline-event-opposite {
             flex: 0;
         }
-
-        .p-card {
-            margin-top: 1rem;
-        }
     }
 }
 </style>`
@@ -207,3 +199,21 @@ const events = ref([
     }
 };
 </script>
+
+<style lang="scss" scoped>
+@media screen and (max-width: 960px) {
+    ::v-deep(.customized-timeline) {
+        .p-timeline-event:nth-child(even) {
+            flex-direction: row !important;
+
+            .p-timeline-event-content {
+                text-align: left !important;
+            }
+        }
+
+        .p-timeline-event-opposite {
+            flex: 0;
+        }
+    }
+}
+</style>