diff --git a/resources/scripts/components/base/BaseCustomerSelectPopup.vue b/resources/scripts/components/base/BaseCustomerSelectPopup.vue
index bc57c95d..4a24a69e 100644
--- a/resources/scripts/components/base/BaseCustomerSelectPopup.vue
+++ b/resources/scripts/components/base/BaseCustomerSelectPopup.vue
@@ -302,8 +302,10 @@
                   </span>
 
                   <div class="flex flex-col justify-center text-left">
-                    <label
+                    <BaseText
                       v-if="customer.name"
+                      :text="customer.name"
+                      :length="30"
                       class="
                         m-0
                         text-base
@@ -311,12 +313,11 @@
                         leading-tight
                         cursor-pointer
                       "
-                    >
-                      {{ customer.name }}
-                    </label>
-
-                    <label
+                    />
+                    <BaseText
                       v-if="customer.contact_name"
+                      :text="customer.contact_name"
+                      :length="30"
                       class="
                         m-0
                         text-sm
@@ -324,9 +325,7 @@
                         text-gray-400
                         cursor-pointer
                       "
-                    >
-                      {{ customer.contact_name }}
-                    </label>
+                    />
                   </div>
                 </li>
                 <div
diff --git a/resources/scripts/components/base/BaseText.vue b/resources/scripts/components/base/BaseText.vue
new file mode 100644
index 00000000..72b71298
--- /dev/null
+++ b/resources/scripts/components/base/BaseText.vue
@@ -0,0 +1,31 @@
+<template>
+  <BaseCustomTag :tag="tag" :title="text">
+    {{ displayText }}
+  </BaseCustomTag>
+</template>
+
+<script setup>
+import { computed } from "vue"
+
+const props = defineProps({
+  tag: {
+    type: String,
+    default: 'div',
+  },
+
+  text: {
+    type: String,
+    default: '',
+  },
+
+  length: {
+    type: Number,
+    default: 0,
+  }
+})
+
+const displayText = computed(() => {
+
+  return props.text.length < props.length ?  props.text : `${props.text.substring(0 , props.length)}...`
+})
+</script>
diff --git a/resources/scripts/views/customers/Index.vue b/resources/scripts/views/customers/Index.vue
index e441750c..2829a988 100644
--- a/resources/scripts/views/customers/Index.vue
+++ b/resources/scripts/views/customers/Index.vue
@@ -151,12 +151,21 @@
         <template #cell-name="{ row }">
           <router-link
             :to="{ path: `customers/${row.data.id}/view` }"
+          >
+          <BaseText
+            :text="row.data.name"
+            :length="30"
+            tag="span"
             class="font-medium text-primary-500 flex flex-col"
           >
             {{ row.data.name }}
-            <span class="text-xs text-gray-400">
-              {{ row.data.contact_name ? row.data.contact_name : '' }}</span
-            >
+          </BaseText>
+          <BaseText
+            :text="row.data.contact_name ? row.data.contact_name : ''"
+            :length="30"
+            tag="span"
+            class="text-xs text-gray-400"
+          />
           </router-link>
         </template>
 
diff --git a/resources/scripts/views/customers/partials/CustomerViewSidebar.vue b/resources/scripts/views/customers/partials/CustomerViewSidebar.vue
index 7f7983b7..f57a085f 100644
--- a/resources/scripts/views/customers/partials/CustomerViewSidebar.vue
+++ b/resources/scripts/views/customers/partials/CustomerViewSidebar.vue
@@ -131,7 +131,9 @@
           style="border-top: 1px solid rgba(185, 193, 209, 0.41)"
         >
           <div>
-            <div
+            <BaseText
+              :text="customer.name"
+              :length="30"
               class="
                 pr-2
                 text-sm
@@ -142,11 +144,12 @@
                 capitalize
                 truncate
               "
-            >
-              {{ customer.name }}
-            </div>
-            <div
+            />
+            
+            <BaseText
               v-if="customer.contact_name"
+              :text="customer.contact_name"
+              :length="30"
               class="
                 mt-1
                 text-xs
@@ -155,9 +158,7 @@
                 leading-5
                 text-gray-600
               "
-            >
-              {{ customer.contact_name }}
-            </div>
+            />
           </div>
           <div class="flex-1 font-bold text-right whitespace-nowrap">
             <BaseFormatMoney
diff --git a/resources/scripts/views/estimates/Index.vue b/resources/scripts/views/estimates/Index.vue
index b61d7b90..94709eeb 100644
--- a/resources/scripts/views/estimates/Index.vue
+++ b/resources/scripts/views/estimates/Index.vue
@@ -197,9 +197,10 @@
         </template>
 
         <template #cell-name="{ row }">
-          <div>
-            {{ row.data.customer.name }}
-          </div>
+          <BaseText
+            :text="row.data.customer.name"
+            :length="30"
+          />
         </template>
 
         <template #cell-status="{ row }">
diff --git a/resources/scripts/views/estimates/View.vue b/resources/scripts/views/estimates/View.vue
index 9b0da41a..284da769 100644
--- a/resources/scripts/views/estimates/View.vue
+++ b/resources/scripts/views/estimates/View.vue
@@ -180,7 +180,9 @@
             style="border-bottom: 1px solid rgba(185, 193, 209, 0.41)"
           >
             <div class="flex-2">
-              <div
+              <BaseText
+                :text="estimate.customer.name"
+                :length="30"
                 class="
                   pr-2
                   mb-2
@@ -192,10 +194,8 @@
                   capitalize
                   truncate
                 "
-              >
-                {{ estimate.customer.name }}
-              </div>
-
+              />
+              
               <div
                 class="
                   mt-1
diff --git a/resources/scripts/views/expenses/Index.vue b/resources/scripts/views/expenses/Index.vue
index 4d27a5ac..a93808ee 100644
--- a/resources/scripts/views/expenses/Index.vue
+++ b/resources/scripts/views/expenses/Index.vue
@@ -186,7 +186,10 @@
         </template>
 
         <template #cell-user_name="{ row }">
-          {{ row.data.customer ? row.data.customer.name : '-' }}
+          <BaseText
+            :text="row.data.customer ? row.data.customer.name : '-' "
+            :length="30"
+          />
         </template>
 
         <template #cell-notes="{ row }">
diff --git a/resources/scripts/views/invoices/Index.vue b/resources/scripts/views/invoices/Index.vue
index b8aae418..30881862 100644
--- a/resources/scripts/views/invoices/Index.vue
+++ b/resources/scripts/views/invoices/Index.vue
@@ -179,7 +179,10 @@
         </template>
 
         <template #cell-name="{ row }">
-          {{ row.data.customer.name }}
+         <BaseText
+            :text="row.data.customer.name"
+            :length="30"
+          />
         </template>
 
         <!-- Invoice Number  -->
diff --git a/resources/scripts/views/invoices/View.vue b/resources/scripts/views/invoices/View.vue
index e291667f..b445e02d 100644
--- a/resources/scripts/views/invoices/View.vue
+++ b/resources/scripts/views/invoices/View.vue
@@ -381,7 +381,9 @@ onSearched = debounce(onSearched, 500)
             style="border-bottom: 1px solid rgba(185, 193, 209, 0.41)"
           >
             <div class="flex-2">
-              <div
+              <BaseText
+                :text="invoice.customer.name"
+                :length="30"
                 class="
                   pr-2
                   mb-2
@@ -393,9 +395,7 @@ onSearched = debounce(onSearched, 500)
                   capitalize
                   truncate
                 "
-              >
-                {{ invoice.customer.name }}
-              </div>
+              />
 
               <div
                 class="
diff --git a/resources/scripts/views/payments/Index.vue b/resources/scripts/views/payments/Index.vue
index 906d44a3..ed04ff8e 100644
--- a/resources/scripts/views/payments/Index.vue
+++ b/resources/scripts/views/payments/Index.vue
@@ -161,9 +161,11 @@
         </template>
 
         <template #cell-name="{ row }">
-          <span>
-            {{ row.data.customer.name }}
-          </span>
+          <BaseText
+            :text="row.data.customer.name"
+            :length="30"
+            tag="span"
+          />
         </template>
 
         <template #cell-payment_mode="{ row }">
diff --git a/resources/scripts/views/payments/View.vue b/resources/scripts/views/payments/View.vue
index 1e1ec345..f7a8eae9 100644
--- a/resources/scripts/views/payments/View.vue
+++ b/resources/scripts/views/payments/View.vue
@@ -162,7 +162,9 @@
             style="border-bottom: 1px solid rgba(185, 193, 209, 0.41)"
           >
             <div class="flex-2">
-              <div
+              <BaseText
+                :text="payment?.customer?.name "
+                :length="30"
                 class="
                   pr-2
                   mb-2
@@ -174,9 +176,7 @@
                   capitalize
                   truncate
                 "
-              >
-                {{ payment?.customer?.name }}
-              </div>
+              />
 
               <div
                 class="
diff --git a/resources/scripts/views/recurring-invoices/Index.vue b/resources/scripts/views/recurring-invoices/Index.vue
index 5739f003..78fb16dc 100644
--- a/resources/scripts/views/recurring-invoices/Index.vue
+++ b/resources/scripts/views/recurring-invoices/Index.vue
@@ -196,17 +196,22 @@
         <template #cell-customer="{ row }">
           <router-link
             :to="{ path: `recurring-invoices/${row.data.id}/view` }"
+          >
+          <BaseText
+            :text="row.data.customer.name"
+            :length="30"
+            tag="span"
             class="font-medium text-primary-500 flex flex-col"
           >
             {{ row.data.customer.name }}
-
-            <span class="text-xs text-gray-400">
-              {{
-                row.data.customer.contact_name
-                  ? row.data.customer.contact_name
-                  : ''
-              }}
-            </span>
+          </BaseText>
+          
+          <BaseText
+            :text="row.data.customer.contact_name ? row.data.customer.contact_name: ''"
+            :length="30"
+            tag="span"
+            class="text-xs text-gray-400"
+          />
           </router-link>
         </template>
 
diff --git a/resources/scripts/views/recurring-invoices/partials/RecurringInvoiceViewSidebar.vue b/resources/scripts/views/recurring-invoices/partials/RecurringInvoiceViewSidebar.vue
index e1fa9290..25d9ee84 100644
--- a/resources/scripts/views/recurring-invoices/partials/RecurringInvoiceViewSidebar.vue
+++ b/resources/scripts/views/recurring-invoices/partials/RecurringInvoiceViewSidebar.vue
@@ -238,7 +238,9 @@ onSearched = debounce(onSearched, 500)
           style="border-bottom: 1px solid rgba(185, 193, 209, 0.41)"
         >
           <div class="flex-2">
-            <div
+            <BaseText
+              :text="invoice.customer.name"
+              :length="30"
               class="
                 pr-2
                 mb-2
@@ -250,10 +252,8 @@ onSearched = debounce(onSearched, 500)
                 capitalize
                 truncate
               "
-            >
-              {{ invoice.customer.name }}
-            </div>
-
+            />
+            
             <div
               class="
                 mt-1