diff --git a/doc/fileupload/TemplateDoc.vue b/doc/fileupload/TemplateDoc.vue
index fdb690a2a..dd35fc10b 100644
--- a/doc/fileupload/TemplateDoc.vue
+++ b/doc/fileupload/TemplateDoc.vue
@@ -5,51 +5,53 @@
     <div class="card">
         <FileUpload name="demo[]" url="/api/upload" @upload="onTemplatedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000" @select="onSelectedFiles">
             <template #header="{ chooseCallback, uploadCallback, clearCallback, files }">
-                <div class="flex flex-wrap justify-between items-center flex-1 gap-2">
+                <div class="flex flex-wrap justify-between items-center flex-1 gap-4">
                     <div class="flex gap-2">
-                        <Button @click="chooseCallback()" icon="pi pi-images" rounded outlined></Button>
+                        <Button @click="chooseCallback()" icon="pi pi-images" rounded outlined severity="secondary"></Button>
                         <Button @click="uploadEvent(uploadCallback)" icon="pi pi-cloud-upload" rounded outlined severity="success" :disabled="!files || files.length === 0"></Button>
                         <Button @click="clearCallback()" icon="pi pi-times" rounded outlined severity="danger" :disabled="!files || files.length === 0"></Button>
                     </div>
-                    <ProgressBar :value="totalSizePercent" :showValue="false" :class="['md:w-20rem h-4 w-full md:ml-auto', { 'exceeded-progress-bar': totalSizePercent > 100 }]">
+                    <ProgressBar :value="totalSizePercent" :showValue="false" class="md:w-20rem h-1 w-full md:ml-auto">
                         <span class="whitespace-nowrap">{{ totalSize }}B / 1Mb</span>
                     </ProgressBar>
                 </div>
             </template>
             <template #content="{ files, uploadedFiles, removeUploadedFileCallback, removeFileCallback }">
-                <div v-if="files.length > 0">
-                    <h5>Pending</h5>
-                    <div class="flex flex-wrap p-0 sm:p-8 gap-8">
-                        <div v-for="(file, index) of files" :key="file.name + file.type + file.size" class="card m-0 px-12 flex flex-col border border-surface-200 dark:border-surface-700 items-center gap-4">
-                            <div>
-                                <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" />
+                <div class="flex flex-col gap-8 pt-4">
+                    <div v-if="files.length > 0">
+                        <h5>Pending</h5>
+                        <div class="flex flex-wrap gap-4">
+                            <div v-for="(file, index) of files" :key="file.name + file.type + file.size" class="p-8 rounded-border flex flex-col border border-surface items-center gap-4">
+                                <div>
+                                    <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" />
+                                </div>
+                                <span class="font-semibold text-ellipsis max-w-60 whitespace-nowrap overflow-hidden">{{ file.name }}</span>
+                                <div>{{ formatSize(file.size) }}</div>
+                                <Badge value="Pending" severity="warn" />
+                                <Button icon="pi pi-times" @click="onRemoveTemplatingFile(file, removeFileCallback, index)" outlined rounded severity="danger" />
                             </div>
-                            <span class="font-semibold">{{ file.name }}</span>
-                            <div>{{ formatSize(file.size) }}</div>
-                            <Badge value="Pending" severity="warn" />
-                            <Button icon="pi pi-times" @click="onRemoveTemplatingFile(file, removeFileCallback, index)" outlined rounded severity="danger" />
                         </div>
                     </div>
-                </div>
 
-                <div v-if="uploadedFiles.length > 0">
-                    <h5>Completed</h5>
-                    <div class="flex flex-wrap p-0 sm:p-8 gap-8">
-                        <div v-for="(file, index) of uploadedFiles" :key="file.name + file.type + file.size" class="card m-0 px-12 flex flex-col border border-surface-200 dark:border-surface-700 items-center gap-4">
-                            <div>
-                                <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" />
+                    <div v-if="uploadedFiles.length > 0">
+                        <h5>Completed</h5>
+                        <div class="flex flex-wrap gap-4">
+                            <div v-for="(file, index) of uploadedFiles" :key="file.name + file.type + file.size" class="p-8 rounded-border flex flex-col border border-surface items-center gap-4">
+                                <div>
+                                    <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" />
+                                </div>
+                                <span class="font-semibold text-ellipsis max-w-60 whitespace-nowrap overflow-hidden">{{ file.name }}</span>
+                                <div>{{ formatSize(file.size) }}</div>
+                                <Badge value="Completed" class="mt-4" severity="success" />
+                                <Button icon="pi pi-times" @click="removeUploadedFileCallback(index)" outlined rounded severity="danger" />
                             </div>
-                            <span class="font-semibold">{{ file.name }}</span>
-                            <div>{{ formatSize(file.size) }}</div>
-                            <Badge value="Completed" class="mt-4" severity="success" />
-                            <Button icon="pi pi-times" @click="removeUploadedFileCallback(index)" outlined rounded severity="danger" />
                         </div>
                     </div>
                 </div>
             </template>
             <template #empty>
                 <div class="flex items-center justify-center flex-col">
-                    <i class="pi pi-cloud-upload border-2 rounded-full p-8 text-8xl text-surface-400 border-surface-400" />
+                    <i class="pi pi-cloud-upload border-2 rounded-full p-8 text-4xl text-muted-color" />
                     <p class="mt-6 mb-0">Drag and drop files to here to upload.</p>
                 </div>
             </template>
@@ -69,51 +71,53 @@ export default {
                 basic: `
 <FileUpload name="demo[]" url="/api/upload" @upload="onTemplatedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000" @select="onSelectedFiles">
     <template #header="{ chooseCallback, uploadCallback, clearCallback, files }">
-        <div class="flex flex-wrap justify-between items-center flex-1 gap-2">
+        <div class="flex flex-wrap justify-between items-center flex-1 gap-4">
             <div class="flex gap-2">
-                <Button @click="chooseCallback()" icon="pi pi-images" rounded outlined></Button>
+                <Button @click="chooseCallback()" icon="pi pi-images" rounded outlined severity="secondary"></Button>
                 <Button @click="uploadEvent(uploadCallback)" icon="pi pi-cloud-upload" rounded outlined severity="success" :disabled="!files || files.length === 0"></Button>
                 <Button @click="clearCallback()" icon="pi pi-times" rounded outlined severity="danger" :disabled="!files || files.length === 0"></Button>
             </div>
-            <ProgressBar :value="totalSizePercent" :showValue="false" :class="['md:w-20rem h-4 w-full md:ml-auto', { 'exceeded-progress-bar': totalSizePercent > 100 }]"
-                ><span class="whitespace-nowrap">{{ totalSize }}B / 1Mb</span></ProgressBar
-            >
+            <ProgressBar :value="totalSizePercent" :showValue="false" class="md:w-20rem h-1 w-full md:ml-auto">
+                <span class="whitespace-nowrap">{{ totalSize }}B / 1Mb</span>
+            </ProgressBar>
         </div>
     </template>
     <template #content="{ files, uploadedFiles, removeUploadedFileCallback, removeFileCallback }">
-        <div v-if="files.length > 0">
-            <h5>Pending</h5>
-            <div class="flex flex-wrap p-0 sm:p-8 gap-8">
-                <div v-for="(file, index) of files" :key="file.name + file.type + file.size" class="card m-0 px-12 flex flex-col border border-surface-200 dark:border-surface-700 items-center gap-4">
-                    <div>
-                        <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" />
+        <div class="flex flex-col gap-8 pt-4">
+            <div v-if="files.length > 0">
+                <h5>Pending</h5>
+                <div class="flex flex-wrap gap-4">
+                    <div v-for="(file, index) of files" :key="file.name + file.type + file.size" class="p-8 rounded-border flex flex-col border border-surface items-center gap-4">
+                        <div>
+                            <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" />
+                        </div>
+                        <span class="font-semibold text-ellipsis max-w-60 whitespace-nowrap overflow-hidden">{{ file.name }}</span>
+                        <div>{{ formatSize(file.size) }}</div>
+                        <Badge value="Pending" severity="warn" />
+                        <Button icon="pi pi-times" @click="onRemoveTemplatingFile(file, removeFileCallback, index)" outlined rounded severity="danger" />
                     </div>
-                    <span class="font-semibold">{{ file.name }}</span>
-                    <div>{{ formatSize(file.size) }}</div>
-                    <Badge value="Pending" severity="warn" />
-                    <Button icon="pi pi-times" @click="onRemoveTemplatingFile(file, removeFileCallback, index)" outlined rounded  severity="danger" />
                 </div>
             </div>
-        </div>
 
-        <div v-if="uploadedFiles.length > 0">
-            <h5>Completed</h5>
-            <div class="flex flex-wrap p-0 sm:p-8 gap-8">
-                <div v-for="(file, index) of uploadedFiles" :key="file.name + file.type + file.size" class="card m-0 px-12 flex flex-col border border-surface-200 dark:border-surface-700 items-center gap-4">
-                    <div>
-                        <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" />
+            <div v-if="uploadedFiles.length > 0">
+                <h5>Completed</h5>
+                <div class="flex flex-wrap gap-4">
+                    <div v-for="(file, index) of uploadedFiles" :key="file.name + file.type + file.size" class="p-8 rounded-border flex flex-col border border-surface items-center gap-4">
+                        <div>
+                            <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" />
+                        </div>
+                        <span class="font-semibold text-ellipsis max-w-60 whitespace-nowrap overflow-hidden">{{ file.name }}</span>
+                        <div>{{ formatSize(file.size) }}</div>
+                        <Badge value="Completed" class="mt-4" severity="success" />
+                        <Button icon="pi pi-times" @click="removeUploadedFileCallback(index)" outlined rounded severity="danger" />
                     </div>
-                    <span class="font-semibold">{{ file.name }}</span>
-                    <div>{{ formatSize(file.size) }}</div>
-                    <Badge value="Completed" class="mt-4" severity="success" />
-                    <Button icon="pi pi-times" @click="removeUploadedFileCallback(index)" outlined rounded  severity="danger" />
                 </div>
             </div>
         </div>
     </template>
     <template #empty>
         <div class="flex items-center justify-center flex-col">
-            <i class="pi pi-cloud-upload border-2 rounded-full p-8 text-8xl text-surface-400 border-surface-400" />
+            <i class="pi pi-cloud-upload border-2 rounded-full p-8 text-4xl text-muted-color" />
             <p class="mt-6 mb-0">Drag and drop files to here to upload.</p>
         </div>
     </template>
@@ -125,51 +129,53 @@ export default {
         <Toast />
         <FileUpload name="demo[]" url="/api/upload" @upload="onTemplatedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000" @select="onSelectedFiles">
             <template #header="{ chooseCallback, uploadCallback, clearCallback, files }">
-                <div class="flex flex-wrap justify-between items-center flex-1 gap-2">
+                <div class="flex flex-wrap justify-between items-center flex-1 gap-4">
                     <div class="flex gap-2">
-                        <Button @click="chooseCallback()" icon="pi pi-images" rounded outlined></Button>
+                        <Button @click="chooseCallback()" icon="pi pi-images" rounded outlined severity="secondary"></Button>
                         <Button @click="uploadEvent(uploadCallback)" icon="pi pi-cloud-upload" rounded outlined severity="success" :disabled="!files || files.length === 0"></Button>
                         <Button @click="clearCallback()" icon="pi pi-times" rounded outlined severity="danger" :disabled="!files || files.length === 0"></Button>
                     </div>
-                    <ProgressBar :value="totalSizePercent" :showValue="false" :class="['md:w-20rem h-4 w-full md:ml-auto', { 'exceeded-progress-bar': totalSizePercent > 100 }]"
-                        ><span class="whitespace-nowrap">{{ totalSize }}B / 1Mb</span></ProgressBar
-                    >
+                    <ProgressBar :value="totalSizePercent" :showValue="false" class="md:w-20rem h-1 w-full md:ml-auto">
+                        <span class="whitespace-nowrap">{{ totalSize }}B / 1Mb</span>
+                    </ProgressBar>
                 </div>
             </template>
             <template #content="{ files, uploadedFiles, removeUploadedFileCallback, removeFileCallback }">
-                <div v-if="files.length > 0">
-                    <h5>Pending</h5>
-                    <div class="flex flex-wrap p-0 sm:p-8 gap-8">
-                        <div v-for="(file, index) of files" :key="file.name + file.type + file.size" class="card m-0 px-12 flex flex-col border border-surface-200 dark:border-surface-700 items-center gap-4">
-                            <div>
-                                <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" />
+                <div class="flex flex-col gap-8 pt-4">
+                    <div v-if="files.length > 0">
+                        <h5>Pending</h5>
+                        <div class="flex flex-wrap gap-4">
+                            <div v-for="(file, index) of files" :key="file.name + file.type + file.size" class="p-8 rounded-border flex flex-col border border-surface items-center gap-4">
+                                <div>
+                                    <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" />
+                                </div>
+                                <span class="font-semibold text-ellipsis max-w-60 whitespace-nowrap overflow-hidden">{{ file.name }}</span>
+                                <div>{{ formatSize(file.size) }}</div>
+                                <Badge value="Pending" severity="warn" />
+                                <Button icon="pi pi-times" @click="onRemoveTemplatingFile(file, removeFileCallback, index)" outlined rounded severity="danger" />
                             </div>
-                            <span class="font-semibold">{{ file.name }}</span>
-                            <div>{{ formatSize(file.size) }}</div>
-                            <Badge value="Pending" severity="warn" />
-                            <Button icon="pi pi-times" @click="onRemoveTemplatingFile(file, removeFileCallback, index)" outlined rounded  severity="danger" />
                         </div>
                     </div>
-                </div>
 
-                <div v-if="uploadedFiles.length > 0">
-                    <h5>Completed</h5>
-                    <div class="flex flex-wrap p-0 sm:p-8 gap-8">
-                        <div v-for="(file, index) of uploadedFiles" :key="file.name + file.type + file.size" class="card m-0 px-12 flex flex-col border border-surface-200 dark:border-surface-700 items-center gap-4">
-                            <div>
-                                <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" />
+                    <div v-if="uploadedFiles.length > 0">
+                        <h5>Completed</h5>
+                        <div class="flex flex-wrap gap-4">
+                            <div v-for="(file, index) of uploadedFiles" :key="file.name + file.type + file.size" class="p-8 rounded-border flex flex-col border border-surface items-center gap-4">
+                                <div>
+                                    <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" />
+                                </div>
+                                <span class="font-semibold text-ellipsis max-w-60 whitespace-nowrap overflow-hidden">{{ file.name }}</span>
+                                <div>{{ formatSize(file.size) }}</div>
+                                <Badge value="Completed" class="mt-4" severity="success" />
+                                <Button icon="pi pi-times" @click="removeUploadedFileCallback(index)" outlined rounded severity="danger" />
                             </div>
-                            <span class="font-semibold">{{ file.name }}</span>
-                            <div>{{ formatSize(file.size) }}</div>
-                            <Badge value="Completed" class="mt-4" severity="success" />
-                            <Button icon="pi pi-times" @click="removeUploadedFileCallback(index)" outlined rounded  severity="danger" />
                         </div>
                     </div>
                 </div>
             </template>
             <template #empty>
                 <div class="flex items-center justify-center flex-col">
-                    <i class="pi pi-cloud-upload border-2 rounded-full p-8 text-8xl text-surface-400 border-surface-400" />
+                    <i class="pi pi-cloud-upload border-2 rounded-full p-8 text-4xl text-muted-color" />
                     <p class="mt-6 mb-0">Drag and drop files to here to upload.</p>
                 </div>
             </template>
@@ -234,51 +240,53 @@ export default {
         <Toast />
         <FileUpload name="demo[]" url="/api/upload" @upload="onTemplatedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000" @select="onSelectedFiles">
             <template #header="{ chooseCallback, uploadCallback, clearCallback, files }">
-                <div class="flex flex-wrap justify-between items-center flex-1 gap-2">
+                <div class="flex flex-wrap justify-between items-center flex-1 gap-4">
                     <div class="flex gap-2">
-                        <Button @click="chooseCallback()" icon="pi pi-images" rounded outlined></Button>
+                        <Button @click="chooseCallback()" icon="pi pi-images" rounded outlined severity="secondary"></Button>
                         <Button @click="uploadEvent(uploadCallback)" icon="pi pi-cloud-upload" rounded outlined severity="success" :disabled="!files || files.length === 0"></Button>
                         <Button @click="clearCallback()" icon="pi pi-times" rounded outlined severity="danger" :disabled="!files || files.length === 0"></Button>
                     </div>
-                    <ProgressBar :value="totalSizePercent" :showValue="false" :class="['md:w-20rem h-4 w-full md:ml-auto', { 'exceeded-progress-bar': totalSizePercent > 100 }]"
-                        ><span class="whitespace-nowrap">{{ totalSize }}B / 1Mb</span></ProgressBar
-                    >
+                    <ProgressBar :value="totalSizePercent" :showValue="false" class="md:w-20rem h-1 w-full md:ml-auto">
+                        <span class="whitespace-nowrap">{{ totalSize }}B / 1Mb</span>
+                    </ProgressBar>
                 </div>
             </template>
             <template #content="{ files, uploadedFiles, removeUploadedFileCallback, removeFileCallback }">
-                <div v-if="files.length > 0">
-                    <h5>Pending</h5>
-                    <div class="flex flex-wrap p-0 sm:p-8 gap-8">
-                        <div v-for="(file, index) of files" :key="file.name + file.type + file.size" class="card m-0 px-12 flex flex-col border border-surface-200 dark:border-surface-700 items-center gap-4">
-                            <div>
-                                <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" />
+                <div class="flex flex-col gap-8 pt-4">
+                    <div v-if="files.length > 0">
+                        <h5>Pending</h5>
+                        <div class="flex flex-wrap gap-4">
+                            <div v-for="(file, index) of files" :key="file.name + file.type + file.size" class="p-8 rounded-border flex flex-col border border-surface items-center gap-4">
+                                <div>
+                                    <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" />
+                                </div>
+                                <span class="font-semibold text-ellipsis max-w-60 whitespace-nowrap overflow-hidden">{{ file.name }}</span>
+                                <div>{{ formatSize(file.size) }}</div>
+                                <Badge value="Pending" severity="warn" />
+                                <Button icon="pi pi-times" @click="onRemoveTemplatingFile(file, removeFileCallback, index)" outlined rounded severity="danger" />
                             </div>
-                            <span class="font-semibold">{{ file.name }}</span>
-                            <div>{{ formatSize(file.size) }}</div>
-                            <Badge value="Pending" severity="warn" />
-                            <Button icon="pi pi-times" @click="onRemoveTemplatingFile(file, removeFileCallback, index)" outlined rounded  severity="danger" />
                         </div>
                     </div>
-                </div>
 
-                <div v-if="uploadedFiles.length > 0">
-                    <h5>Completed</h5>
-                    <div class="flex flex-wrap p-0 sm:p-8 gap-8">
-                        <div v-for="(file, index) of uploadedFiles" :key="file.name + file.type + file.size" class="card m-0 px-12 flex flex-col border border-surface-200 dark:border-surface-700 items-center gap-4">
-                            <div>
-                                <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" />
+                    <div v-if="uploadedFiles.length > 0">
+                        <h5>Completed</h5>
+                        <div class="flex flex-wrap gap-4">
+                            <div v-for="(file, index) of uploadedFiles" :key="file.name + file.type + file.size" class="p-8 rounded-border flex flex-col border border-surface items-center gap-4">
+                                <div>
+                                    <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" />
+                                </div>
+                                <span class="font-semibold text-ellipsis max-w-60 whitespace-nowrap overflow-hidden">{{ file.name }}</span>
+                                <div>{{ formatSize(file.size) }}</div>
+                                <Badge value="Completed" class="mt-4" severity="success" />
+                                <Button icon="pi pi-times" @click="removeUploadedFileCallback(index)" outlined rounded severity="danger" />
                             </div>
-                            <span class="font-semibold">{{ file.name }}</span>
-                            <div>{{ formatSize(file.size) }}</div>
-                            <Badge value="Completed" class="mt-4" severity="success" />
-                            <Button icon="pi pi-times" @click="removeUploadedFileCallback(index)" outlined rounded  severity="danger" />
                         </div>
                     </div>
                 </div>
             </template>
             <template #empty>
                 <div class="flex items-center justify-center flex-col">
-                    <i class="pi pi-cloud-upload border-2 rounded-full p-8 text-8xl text-surface-400 border-surface-400" />
+                    <i class="pi pi-cloud-upload border-2 rounded-full p-8 text-4xl text-muted-color" />
                     <p class="mt-6 mb-0">Drag and drop files to here to upload.</p>
                 </div>
             </template>