diff --git a/resources/assets/js/components/base/modal/BaseModal.vue b/resources/assets/js/components/base/modal/BaseModal.vue
index 9bf6fb2b..ebcae76b 100644
--- a/resources/assets/js/components/base/modal/BaseModal.vue
+++ b/resources/assets/js/components/base/modal/BaseModal.vue
@@ -15,6 +15,7 @@
     </sw-modal>
   </div>
 </template>
+
 <script>
 import { XIcon } from '@vue-hero-icons/solid'
 import { mapActions, mapGetters } from 'vuex'
diff --git a/resources/assets/js/components/base/modal/EstimateTemplate.vue b/resources/assets/js/components/base/modal/EstimateTemplate.vue
index e104756c..eb64284f 100644
--- a/resources/assets/js/components/base/modal/EstimateTemplate.vue
+++ b/resources/assets/js/components/base/modal/EstimateTemplate.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="template-modal">
     <div class="px-8 py-8 sm:p-6">
-      <div class="flex flex-wrap justify-start p-1 overflow-x-auto sw-scroll">
+      <div class="grid grid-cols-3 gap-2 p-1 overflow-x-auto sw-scroll">
         <div
           v-for="(template, index) in modalData"
           :key="index"
@@ -9,21 +9,28 @@
             'border border-solid border-primary-500':
               selectedTemplate === template.id,
           }"
-          class="relative m-2 border border-gray-200 border-solid"
+          class="relative flex flex-col m-2 border border-gray-200 border-solid cursor-pointer hover:border-primary-300"
+          @click="selectedTemplate = template.id"
         >
-          <img
-            :src="template.path"
-            alt="template-image"
-            height="200"
-            width="140"
-            @click="selectedTemplate = template.id"
-          />
+          <img :src="template.path" alt="template-image" />
           <img
             v-if="selectedTemplate === template.id"
             class="absolute z-10 w-5 h-5 text-primary-500"
             style="top: -6px; right: -5px"
             src="/assets/img/tick.png"
           />
+          <span
+            :class="[
+              'w-full p-1 bg-gray-200 text-sm text-center absolute bottom-0 left-0',
+              {
+                'text-primary-500 bg-primary-100':
+                  selectedTemplate === template.id,
+                'text-gray-600': selectedTemplate != template.id,
+              },
+            ]"
+          >
+            {{ template.name }}
+          </span>
         </div>
       </div>
     </div>
diff --git a/resources/assets/js/components/base/modal/InvoiceTemplate.vue b/resources/assets/js/components/base/modal/InvoiceTemplate.vue
index b1a8640b..4cc8aaad 100644
--- a/resources/assets/js/components/base/modal/InvoiceTemplate.vue
+++ b/resources/assets/js/components/base/modal/InvoiceTemplate.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="template-modal">
     <div class="px-8 py-8 sm:p-6">
-      <div class="flex flex-wrap justify-start p-1 overflow-x-auto sw-scroll">
+      <div class="grid grid-cols-3 gap-2 p-1 overflow-x-auto sw-scroll">
         <div
           v-for="(template, index) in modalData"
           :key="index"
@@ -9,21 +9,28 @@
             'border border-solid border-primary-500':
               selectedTemplate === template.id,
           }"
-          class="relative m-2 border border-gray-200 border-solid"
+          class="relative flex flex-col m-2 border border-gray-200 border-solid cursor-pointer hover:border-primary-300"
+          @click="selectedTemplate = template.id"
         >
-          <img
-            :src="template.path"
-            alt="template-image"
-            height="200"
-            width="140"
-            @click="selectedTemplate = template.id"
-          />
+          <img :src="template.path" alt="template-image" />
           <img
             v-if="selectedTemplate === template.id"
             class="absolute z-10 w-5 h-5 text-primary-500"
             style="top: -6px; right: -5px"
             src="/assets/img/tick.png"
           />
+          <span
+            :class="[
+              'w-full p-1 bg-gray-200 text-sm text-center absolute bottom-0 left-0',
+              {
+                'text-primary-500 bg-primary-100':
+                  selectedTemplate === template.id,
+                'text-gray-600': selectedTemplate != template.id,
+              },
+            ]"
+          >
+            {{ template.name }}
+          </span>
         </div>
       </div>
     </div>