diff --git a/web/src/modules/Jobs/Helper.tsx b/web/src/modules/Jobs/Helper.tsx
index 328a2bda..b1c5698a 100644
--- a/web/src/modules/Jobs/Helper.tsx
+++ b/web/src/modules/Jobs/Helper.tsx
@@ -6,6 +6,7 @@ import {
   Tag,
   TagProps,
   SortByProps,
+  TrimText,
 } from '@patterninc/react-ui'
 import Link from 'next/link'
 import { formatDateWithTimeZone, myTimezone } from '@/common/Services'
@@ -101,7 +102,13 @@ export const useJobConfig = ({
           children: (row: JobType) => {
             return (
               <div className={sortBy.prop === 'name' ? 'fw-semi-bold' : ''}>
-                <MdashCheck check={!!row.name}>{row.name}</MdashCheck>
+                <MdashCheck check={!!row.name}>
+                  <TrimText
+                    text={row.name}
+                    limit={60}
+                    customClass='whitespace-nowrap'
+                  />
+                </MdashCheck>
               </div>
             )
           },
diff --git a/web/src/modules/Jobs/JobDetails/JobInformationPane.tsx b/web/src/modules/Jobs/JobDetails/JobInformationPane.tsx
index e42bf28b..55608078 100644
--- a/web/src/modules/Jobs/JobDetails/JobInformationPane.tsx
+++ b/web/src/modules/Jobs/JobDetails/JobInformationPane.tsx
@@ -3,6 +3,7 @@ import {
   Icon,
   InformationPane,
   ListLoading,
+  TrimText,
 } from '@patterninc/react-ui'
 import { getStatusColor, JobDataTypesProps } from '../Helper'
 import { formatDateWithTimeZone, myTimezone } from '@/common/Services'
@@ -60,7 +61,13 @@ const JobInformationPane = ({
         header={{
           labelAndData: {
             label: 'Job Name',
-            data: <span>{jobData?.name}</span>,
+            data: (
+              <TrimText
+                text={jobData?.name ?? ''}
+                limit={25}
+                customClass='whitespace-nowrap'
+              />
+            ),
             check: !!jobData?.name,
           },
           tag: {