diff --git a/resources/scripts/components/base/BaseCustomerSelectPopup.vue b/resources/scripts/components/base/BaseCustomerSelectPopup.vue
index bc57c95d..0f5a8e27 100644
--- a/resources/scripts/components/base/BaseCustomerSelectPopup.vue
+++ b/resources/scripts/components/base/BaseCustomerSelectPopup.vue
@@ -23,9 +23,11 @@
       @click.stop
     >
       <div class="flex relative justify-between mb-2">
-        <label class="flex-1 text-base font-medium text-left text-gray-900">
-          {{ selectedCustomer.name }}
-        </label>
+        <BaseText
+          :text="selectedCustomer.name"
+          :length="30"
+          class="flex-1 text-base font-medium text-left text-gray-900"
+        />
         <div class="flex">
           <a
             class="
@@ -302,8 +304,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 +315,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 +327,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..2566382b 100644
--- a/resources/scripts/views/customers/Index.vue
+++ b/resources/scripts/views/customers/Index.vue
@@ -149,14 +149,19 @@
         </template>
 
         <template #cell-name="{ row }">
-          <router-link
-            :to="{ path: `customers/${row.data.id}/view` }"
-            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
-            >
+          <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"
+            />
+            <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 554ef09e..3854a4e0 100644
--- a/resources/scripts/views/estimates/Index.vue
+++ b/resources/scripts/views/estimates/Index.vue
@@ -197,9 +197,7 @@
         </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 e28dc741..5d487bd0 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 425e60bc..36110381 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 363c5400..2acf8e93 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 09c52713..050b0420 100644
--- a/resources/scripts/views/recurring-invoices/Index.vue
+++ b/resources/scripts/views/recurring-invoices/Index.vue
@@ -198,19 +198,24 @@
 
         <!-- Customer  -->
         <template #cell-customer="{ row }">
-          <router-link
-            :to="{ path: `recurring-invoices/${row.data.id}/view` }"
-            class="font-medium text-primary-500 flex flex-col"
-          >
-            {{ row.data.customer.name }}
+          <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"
+            />
 
-            <span class="text-xs text-gray-400">
-              {{
+            <BaseText
+              :text="
                 row.data.customer.contact_name
                   ? row.data.customer.contact_name
                   : ''
-              }}
-            </span>
+              "
+              :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