diff --git a/doc/drawer/SizeDoc.vue b/doc/drawer/SizeDoc.vue
index c6ab89bba..1053071ea 100644
--- a/doc/drawer/SizeDoc.vue
+++ b/doc/drawer/SizeDoc.vue
@@ -1,9 +1,9 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Drawer dimension can be defined with <i>style</i> or <i>class</i> properties which can also be responsive when used with a CSS utility library like PrimeFlex or Tailwind.</p>
+        <p>Drawer dimension can be defined with <i>style</i> or <i>class</i> properties, this responsive example utilizes Tailwind.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <Drawer v-model:visible="visible" header="Drawer" class="w-full md:w-80 lg:w-[30rem]">
+        <Drawer v-model:visible="visible" header="Drawer" class="!w-full md:!w-80 lg:!w-[30rem]">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
         </Drawer>
         <Button icon="pi pi-arrow-right" @click="visible = true" />
@@ -19,7 +19,7 @@ export default {
             code: {
                 basic: `
 <div class="card flex justify-center">
-    <Drawer v-model:visible="visible" header="Drawer" class="w-full md:w-80 lg:w-[30rem]">
+    <Drawer v-model:visible="visible" header="Drawer" class="!w-full md:!w-80 lg:!w-[30rem]">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
     </Drawer>
     <Button icon="pi pi-arrow-right" @click="visible = true" />
@@ -28,7 +28,7 @@ export default {
                 options: `
 <template>
     <div class="card flex justify-center">
-        <Drawer v-model:visible="visible" header="Drawer" class="w-full md:w-80 lg:w-[30rem]">
+        <Drawer v-model:visible="visible" header="Drawer" class="!w-full md:!w-80 lg:!w-[30rem]">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
         </Drawer>
         <Button icon="pi pi-arrow-right" @click="visible = true" />
@@ -48,7 +48,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-center">
-        <Drawer v-model:visible="visible" header="Drawer" class="w-full md:w-80 lg:w-[30rem]">
+        <Drawer v-model:visible="visible" header="Drawer" class="!w-full md:!w-80 lg:!w-[30rem]">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
         </Drawer>
         <Button icon="pi pi-arrow-right" @click="visible = true" />
diff --git a/doc/drawer/TemplateDoc.vue b/doc/drawer/TemplateDoc.vue
index 82487bb9d..e6ad80d30 100644
--- a/doc/drawer/TemplateDoc.vue
+++ b/doc/drawer/TemplateDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Additional content at the header section is provided using the <i>header</i> template.</p>
+        <p>Custom content at the header and footer sections is displayed with templating.</p>
     </DocSectionText>
     <div class="card flex justify-center">
         <Drawer v-model:visible="visible">
@@ -11,6 +11,12 @@
                 </div>
             </template>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+            <template #footer>
+                <div class="flex items-center gap-2">
+                    <Button label="Account" icon="pi pi-user" class="flex-auto" outlined></Button>
+                    <Button label="Logout" icon="pi pi-sign-out" class="flex-auto" severity="danger" text></Button>
+                </div>
+            </template>
         </Drawer>
         <Button icon="pi pi-plus" @click="visible = true" />
     </div>
@@ -32,6 +38,12 @@ export default {
         </div>
     </template>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+    <template #footer>
+        <div class="flex items-center gap-2">
+            <Button label="Account" icon="pi pi-user" class="flex-auto" outlined></Button>
+            <Button label="Logout" icon="pi pi-sign-out" class="flex-auto" severity="danger" text></Button>
+        </div>
+    </template>
 </Drawer>
 <Button icon="pi pi-plus" @click="visible = true" />
 `,
@@ -46,6 +58,12 @@ export default {
                 </div>
             </template>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+            <template #footer>
+                <div class="flex items-center gap-2">
+                    <Button label="Account" icon="pi pi-user" class="flex-auto" outlined></Button>
+                    <Button label="Logout" icon="pi pi-sign-out" class="flex-auto" severity="danger" text></Button>
+                </div>
+            </template>
         </Drawer>
         <Button icon="pi pi-plus" @click="visible = true" />
     </div>
@@ -72,6 +90,12 @@ export default {
                 </div>
             </template>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+            <template #footer>
+                <div class="flex items-center gap-2">
+                    <Button label="Account" icon="pi pi-user" class="flex-auto" outlined></Button>
+                    <Button label="Logout" icon="pi pi-sign-out" class="flex-auto" severity="danger" text></Button>
+                </div>
+            </template>
         </Drawer>
         <Button icon="pi pi-plus" @click="visible = true" />
     </div>