diff --git a/web/src/pages/ExecutionList/ExecutionList.module.scss b/web/src/pages/ExecutionList/ExecutionList.module.scss
index 0125cfe4e..069671835 100644
--- a/web/src/pages/ExecutionList/ExecutionList.module.scss
+++ b/web/src/pages/ExecutionList/ExecutionList.module.scss
@@ -68,9 +68,4 @@
   .triggerLayout {
     align-items: center !important;
   }
-
-  .divider {
-    color: var(--grey-300) !important;
-    font-size: 4px !important;
-  }
 }
diff --git a/web/src/pages/ExecutionList/ExecutionList.module.scss.d.ts b/web/src/pages/ExecutionList/ExecutionList.module.scss.d.ts
index 6f124d0b5..0fd6a5b97 100644
--- a/web/src/pages/ExecutionList/ExecutionList.module.scss.d.ts
+++ b/web/src/pages/ExecutionList/ExecutionList.module.scss.d.ts
@@ -12,6 +12,5 @@ declare const styles: {
   readonly author: string
   readonly hash: string
   readonly triggerLayout: string
-  readonly divider: string
 }
 export default styles
diff --git a/web/src/pages/ExecutionList/ExecutionList.tsx b/web/src/pages/ExecutionList/ExecutionList.tsx
index 925f0ba80..31ad3f3b6 100644
--- a/web/src/pages/ExecutionList/ExecutionList.tsx
+++ b/web/src/pages/ExecutionList/ExecutionList.tsx
@@ -31,6 +31,7 @@ import { useGetRepositoryMetadata } from 'hooks/useGetRepositoryMetadata'
 import { RepositoryPageHeader } from 'components/RepositoryPageHeader/RepositoryPageHeader'
 import { ExecutionState, ExecutionStatus } from 'components/ExecutionStatus/ExecutionStatus'
 import { getStatus } from 'utils/PipelineUtils'
+import { PipeSeparator } from 'components/PipeSeparator/PipeSeparator'
 import noExecutionImage from '../RepositoriesListing/no-repo.svg'
 import css from './ExecutionList.module.scss'
 
@@ -87,7 +88,7 @@ const ExecutionList = () => {
                 <Avatar email={record.author_email} name={record.author_name} size="small" hoverCard={false} />
                 {/* TODO need logic here for different trigger types */}
                 <Text className={css.author}>{`${record.author_name} triggered manually`}</Text>
-                <Text className={css.divider}>{`|`}</Text>
+                <PipeSeparator height={7} />
                 {/* TODO Will need to replace this with commit component - wont match Yifan designs */}
                 <a rel="noreferrer noopener" className={css.hash}>
                   {record.after}
diff --git a/web/src/pages/PipelineList/PipelineList.module.scss b/web/src/pages/PipelineList/PipelineList.module.scss
index cc215737f..9369446d0 100644
--- a/web/src/pages/PipelineList/PipelineList.module.scss
+++ b/web/src/pages/PipelineList/PipelineList.module.scss
@@ -54,11 +54,6 @@
   width: 180px;
 }
 
-.divider {
-  color: var(--grey-300) !important;
-  font-size: 8px !important;
-}
-
 .statusIcon {
   align-self: center !important;
 }
diff --git a/web/src/pages/PipelineList/PipelineList.module.scss.d.ts b/web/src/pages/PipelineList/PipelineList.module.scss.d.ts
index e108e3e1d..287329376 100644
--- a/web/src/pages/PipelineList/PipelineList.module.scss.d.ts
+++ b/web/src/pages/PipelineList/PipelineList.module.scss.d.ts
@@ -12,7 +12,6 @@ declare const styles: {
   readonly hash: string
   readonly triggerLayout: string
   readonly spacer: string
-  readonly divider: string
   readonly statusIcon: string
 }
 export default styles
diff --git a/web/src/pages/PipelineList/PipelineList.tsx b/web/src/pages/PipelineList/PipelineList.tsx
index 40fe4476b..d64f4ebe1 100644
--- a/web/src/pages/PipelineList/PipelineList.tsx
+++ b/web/src/pages/PipelineList/PipelineList.tsx
@@ -32,6 +32,7 @@ import { useGetRepositoryMetadata } from 'hooks/useGetRepositoryMetadata'
 import { RepositoryPageHeader } from 'components/RepositoryPageHeader/RepositoryPageHeader'
 import { ExecutionStatus, ExecutionState } from 'components/ExecutionStatus/ExecutionStatus'
 import { getStatus } from 'utils/PipelineUtils'
+import { PipeSeparator } from 'components/PipeSeparator/PipeSeparator'
 import noPipelineImage from '../RepositoriesListing/no-repo.svg'
 import css from './PipelineList.module.scss'
 
@@ -100,9 +101,8 @@ const PipelineList = () => {
           return record ? (
             <Layout.Vertical spacing={'small'}>
               <Layout.Horizontal spacing={'small'} style={{ alignItems: 'center' }}>
-                {/* TODO this icon need to depend on the status */}
                 <Text className={css.desc}>{`#${record.number}`}</Text>
-                <Text className={css.divider}>{`|`}</Text>
+                <PipeSeparator height={7} />
                 <Text className={css.desc}>{record.title}</Text>
               </Layout.Horizontal>
               <Layout.Horizontal spacing={'xsmall'} style={{ alignItems: 'center' }}>
@@ -115,10 +115,10 @@ const PipelineList = () => {
                 />
                 {/* TODO need logic here for different trigger types */}
                 <Text className={css.author}>{record.author_name}</Text>
-                <Text className={css.divider}>{`|`}</Text>
+                <PipeSeparator height={7} />
                 <GitFork height={12} width={12} color={Utils.getRealCSSColor(Color.GREY_500)} />
                 <Text className={css.author}>{record.source}</Text>
-                <Text className={css.divider}>{`|`}</Text>
+                <PipeSeparator height={7} />
                 {/* TODO Will need to replace this with commit component - wont match Yifan designs */}
                 <a rel="noreferrer noopener" className={css.hash}>
                   {/* {record.after} */}