diff --git a/packages/frontend/src/app/block/[hash]/Block.js b/packages/frontend/src/app/block/[hash]/Block.js
index 8cc25b0da..dae44d3c3 100644
--- a/packages/frontend/src/app/block/[hash]/Block.js
+++ b/packages/frontend/src/app/block/[hash]/Block.js
@@ -15,6 +15,7 @@ import {
 
 function Block ({ hash }) {
   const [block, setBlock] = useState({ data: {}, loading: true, error: false })
+  const [rate, setRate] = useState({ data: {}, loading: true, error: false })
   const txHashes = block.data?.txs || []
   const tdTitleWidth = 250
 
@@ -24,6 +25,10 @@ function Block ({ hash }) {
     Api.getBlockByHash(hash)
       .then(res => fetchHandlerSuccess(setBlock, res))
       .catch(err => fetchHandlerError(setBlock, err))
+
+    Api.getRate()
+      .then(res => fetchHandlerSuccess(setRate, res))
+      .catch(err => fetchHandlerError(setRate, err))
   }
 
   useEffect(fetchData, [hash])
@@ -117,6 +122,7 @@ function Block ({ hash }) {
               <TransactionsList
                 transactions={txHashes.map(hash => ({ hash }))}
                 type={'hashes'}
+                rate={rate.data}
               />
             </Container>
           : null}
diff --git a/packages/frontend/src/app/home/Home.js b/packages/frontend/src/app/home/Home.js
index 75595a433..55898c67a 100644
--- a/packages/frontend/src/app/home/Home.js
+++ b/packages/frontend/src/app/home/Home.js
@@ -162,7 +162,7 @@ function Home () {
             <Heading className={'InfoBlock__Title'} as={'h2'}>Transactions</Heading>
             {!transactions.loading
               ? !transactions.error
-                  ? <TransactionsList transactions={transactions.data.resultSet} showMoreLink={'/transactions'}/>
+                  ? <TransactionsList transactions={transactions.data.resultSet} showMoreLink={'/transactions'} rate={rate.data}/>
                   : <ErrorMessageBlock/>
               : <LoadingList itemsCount={Math.round(transactions.props.printCount * 1.5)}/>}
           </Flex>
diff --git a/packages/frontend/src/app/identity/[identifier]/Identity.js b/packages/frontend/src/app/identity/[identifier]/Identity.js
index 52d75d79a..049ae12bb 100644
--- a/packages/frontend/src/app/identity/[identifier]/Identity.js
+++ b/packages/frontend/src/app/identity/[identifier]/Identity.js
@@ -252,7 +252,7 @@ function Identity ({ identifier }) {
                             <TabPanel px={0} h={'100%'}>
                               {!transactions.error
                                 ? !transactions.loading
-                                    ? <TransactionsList transactions={transactions.data.resultSet}/>
+                                    ? <TransactionsList transactions={transactions.data.resultSet} rate={rate.data}/>
                                     : <LoadingList itemsCount={9}/>
                                 : <ErrorMessageBlock/>}
                             </TabPanel>
diff --git a/packages/frontend/src/app/transactions/Transactions.js b/packages/frontend/src/app/transactions/Transactions.js
index 8914a986d..4417770f2 100644
--- a/packages/frontend/src/app/transactions/Transactions.js
+++ b/packages/frontend/src/app/transactions/Transactions.js
@@ -21,6 +21,7 @@ const paginateConfig = {
 
 function Transactions ({ defaultPage = 1, defaultPageSize }) {
   const [transactions, setTransactions] = useState({ data: {}, loading: true, error: false })
+  const [rate, setRate] = useState({ data: {}, loading: true, error: false })
   const [total, setTotal] = useState(1)
   const [pageSize, setPageSize] = useState(defaultPageSize || paginateConfig.pageSize.default)
   const [currentPage, setCurrentPage] = useState(defaultPage ? defaultPage - 1 : 0)
@@ -41,6 +42,10 @@ function Transactions ({ defaultPage = 1, defaultPageSize }) {
         setTotal(res.pagination.total)
       })
       .catch(err => fetchHandlerError(setTransactions, err))
+
+    Api.getRate()
+      .then(res => fetchHandlerSuccess(setRate, res))
+      .catch(err => fetchHandlerError(setRate, err))
   }
 
   useEffect(() => fetchData(currentPage + 1, pageSize), [pageSize, currentPage])
@@ -72,30 +77,30 @@ function Transactions ({ defaultPage = 1, defaultPageSize }) {
       className={'Transactions'}
     >
         <Container maxW={'container.xl'} className={'InfoBlock'}>
-            <Heading className={'InfoBlock__Title'} as={'h1'}>Transactions</Heading>
+          <Heading className={'InfoBlock__Title'} as={'h1'}>Transactions</Heading>
 
-            {!transactions.error
-              ? !transactions.loading
-                  ? <TransactionsList transactions={transactions.data.resultSet}/>
-                  : <LoadingList itemsCount={pageSize}/>
-              : <Container h={20}><ErrorMessageBlock/></Container>
-            }
+          {!transactions.error
+            ? !transactions.loading
+                ? <TransactionsList transactions={transactions.data.resultSet} rate={rate.data}/>
+                : <LoadingList itemsCount={pageSize}/>
+            : <Container h={20}><ErrorMessageBlock/></Container>
+          }
 
-            {transactions.data?.resultSet?.length > 0 &&
-              <div className={'ListNavigation'}>
-                <Box display={['none', 'none', 'block']} width={'155px'}/>
-                <Pagination
-                    onPageChange={({ selected }) => setCurrentPage(selected)}
-                    pageCount={pageCount}
-                    forcePage={currentPage}
-                />
-                <PageSizeSelector
-                    PageSizeSelectHandler={(e) => setPageSize(Number(e.target.value))}
-                    value={pageSize}
-                    items={paginateConfig.pageSize.values}
-                />
-              </div>
-            }
+          {transactions.data?.resultSet?.length > 0 &&
+            <div className={'ListNavigation'}>
+              <Box display={['none', 'none', 'block']} width={'155px'}/>
+              <Pagination
+                onPageChange={({ selected }) => setCurrentPage(selected)}
+                pageCount={pageCount}
+                forcePage={currentPage}
+              />
+              <PageSizeSelector
+                PageSizeSelectHandler={(e) => setPageSize(Number(e.target.value))}
+                value={pageSize}
+                items={paginateConfig.pageSize.values}
+              />
+            </div>
+          }
         </Container>
     </Container>
   )
diff --git a/packages/frontend/src/components/transactions/StatusIcon.js b/packages/frontend/src/components/transactions/StatusIcon.js
new file mode 100644
index 000000000..2455f52c5
--- /dev/null
+++ b/packages/frontend/src/components/transactions/StatusIcon.js
@@ -0,0 +1,15 @@
+import { SuccessIcon, ErrorIcon, QueuedIcon, PooledIcon, BroadcastedIcon } from '../ui/icons'
+
+function StatusIcon ({ status, ...props }) {
+  const StatusIcons = {
+    SUCCESS: <SuccessIcon {...props}/>,
+    FAIL: <ErrorIcon {...props}/>,
+    QUEUED: <QueuedIcon {...props}/>,
+    POOLED: <PooledIcon {...props}/>,
+    BROADCASTED: <BroadcastedIcon {...props}/>
+  }
+
+  return StatusIcons[status] || <></>
+}
+
+export default StatusIcon
diff --git a/packages/frontend/src/components/transactions/TransactionsList.js b/packages/frontend/src/components/transactions/TransactionsList.js
index e5f6f50c7..426ce4bdd 100644
--- a/packages/frontend/src/components/transactions/TransactionsList.js
+++ b/packages/frontend/src/components/transactions/TransactionsList.js
@@ -4,7 +4,7 @@ import { EmptyListMessage } from '../ui/lists'
 import { Grid, GridItem } from '@chakra-ui/react'
 import './TransactionsList.scss'
 
-export default function TransactionsList ({ transactions = [], showMoreLink, type = 'full', headerStyles = 'default' }) {
+export default function TransactionsList ({ transactions = [], showMoreLink, type = 'full', headerStyles = 'default', rate }) {
   const headerExtraClass = {
     default: '',
     light: 'BlocksList__ColumnTitles--Light'
@@ -14,11 +14,17 @@ export default function TransactionsList ({ transactions = [], showMoreLink, typ
     <div className={'TransactionsList'}>
       {type === 'full' &&
         <Grid className={`TransactionsList__ColumnTitles ${headerExtraClass[headerStyles] || ''}`}>
-          <GridItem className={'TransactionsList__ColumnTitle'}>
+          <GridItem className={'TransactionsList__ColumnTitle TransactionsList__ColumnTitle--Timestamp'}>
             Time
           </GridItem>
           <GridItem className={'TransactionsList__ColumnTitle TransactionsList__ColumnTitle--Hash'}>
-            Transaction Hash
+            Hash
+          </GridItem>
+          <GridItem className={'TransactionsList__ColumnTitle TransactionsList__ColumnTitle--GasUsed'}>
+            Gas used
+          </GridItem>
+          <GridItem className={'TransactionsList__ColumnTitle TransactionsList__ColumnTitle--Sender'}>
+            Sender
           </GridItem>
           <GridItem className={'TransactionsList__ColumnTitle'}>
             Type
@@ -31,6 +37,7 @@ export default function TransactionsList ({ transactions = [], showMoreLink, typ
             <TransactionsListItem
               key={key}
               transaction={transaction}
+              rate={rate}
             />
         ))
         : <EmptyListMessage>There are no transactions yet.</EmptyListMessage>
diff --git a/packages/frontend/src/components/transactions/TransactionsList.scss b/packages/frontend/src/components/transactions/TransactionsList.scss
index b801e5c88..2fc1b1704 100644
--- a/packages/frontend/src/components/transactions/TransactionsList.scss
+++ b/packages/frontend/src/components/transactions/TransactionsList.scss
@@ -1,13 +1,19 @@
 @use '../../styles/mixins.scss';
+@use './variables' as txs;
 @import '../../styles/variables.scss';
 
 .TransactionsList {
+  container-type: inline-size;
+
   &__ColumnTitles {
     @include mixins.defListTitles;
-    grid-template-columns: 100px calc(100% - 270px) 170px;
+    @include txs.Columns();
   }
 
   &__ColumnTitle {
+    @include txs.Column();
+    width: 100%;
+    display: block;
     word-break: normal;
     white-space: normal;
     overflow-wrap: break-word;
@@ -21,15 +27,13 @@
     }
   }
 
-  @media screen and (max-width: $breakpoint-sm) {
-    &__ColumnTitles {
-      grid-template-columns: 1fr 1fr;
-    }
-
+  @container (max-width: 660px) {
     &__ColumnTitle {
-      &--Hash {
-        display: none;
+      &--Sender {
+        width: 0;
+        height: 0;
+        visibility: hidden;
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/packages/frontend/src/components/transactions/TransactionsListItem.js b/packages/frontend/src/components/transactions/TransactionsListItem.js
index b3bf6dcfb..ab8d47bd6 100644
--- a/packages/frontend/src/components/transactions/TransactionsListItem.js
+++ b/packages/frontend/src/components/transactions/TransactionsListItem.js
@@ -4,10 +4,12 @@ import Link from 'next/link'
 import { getTimeDelta } from '../../util/index'
 import { Grid, GridItem } from '@chakra-ui/react'
 import TypeBadge from './TypeBadge'
-import { Identifier } from '../data'
+import { Identifier, Credits } from '../data'
+import StatusIcon from './StatusIcon'
+import { RateTooltip } from '../ui/Tooltips'
 import './TransactionsListItem.scss'
 
-function TransactionsListItem ({ transaction }) {
+function TransactionsListItem ({ transaction, rate }) {
   return (
     <Link
       href={`/transaction/${transaction?.hash}`}
@@ -16,17 +18,34 @@ function TransactionsListItem ({ transaction }) {
       <Grid className={`TransactionsListItem__Content ${!transaction?.timestamp && !transaction?.type ? 'TransactionsListItem__Content--Inline' : ''}`}>
         {transaction?.timestamp &&
           <GridItem className={'TransactionsListItem__Column TransactionsListItem__Column--Timestamp'}>
+            <StatusIcon className={'TransactionsListItem__StatusIcon'} status={transaction.status} w={'18px'} h={'18px'} mr={'8px'}/>
             {getTimeDelta(new Date(), new Date(transaction.timestamp))}
           </GridItem>
         }
         {transaction?.hash &&
-          <GridItem className={'TransactionsListItem__Column TransactionsListItem__Column--Identifier'}>
-            <Identifier copyButton={true} styles={['highlight-both']}>{transaction.hash}</Identifier>
+          <GridItem className={'TransactionsListItem__Column TransactionsListItem__Column--Hash'}>
+            <Identifier styles={['highlight-both']}>{transaction.hash}</Identifier>
+          </GridItem>
+        }
+        {transaction?.gasUsed &&
+          <GridItem className={'TransactionsListItem__Column TransactionsListItem__Column--GasUsed'}>
+            <RateTooltip
+              credits={transaction.gasUsed}
+              rate={rate}
+              placement={'top'}
+            >
+              <span><Credits>{transaction.gasUsed}</Credits> Credits</span>
+            </RateTooltip>
+          </GridItem>
+        }
+        {(transaction?.sender || true) &&
+          <GridItem className={'TransactionsListItem__Column TransactionsListItem__Column--Sender'}>
+            <Identifier avatar={true} styles={['highlight-both']}>3TfBxpwdmiHsrajx7EmErGnV597uYdH3JGhvwpVDcdAT</Identifier>
           </GridItem>
         }
         {transaction?.type !== undefined &&
           <GridItem className={'TransactionsListItem__Column TransactionsListItem__Column--Type'}>
-            <TypeBadge typeId={transaction.type}/>
+            <TypeBadge className={'TransactionsListItem__TypeBadge'} typeId={transaction.type}/>
           </GridItem>
         }
       </Grid>
diff --git a/packages/frontend/src/components/transactions/TransactionsListItem.scss b/packages/frontend/src/components/transactions/TransactionsListItem.scss
index 64532b333..dae5d4721 100644
--- a/packages/frontend/src/components/transactions/TransactionsListItem.scss
+++ b/packages/frontend/src/components/transactions/TransactionsListItem.scss
@@ -1,4 +1,5 @@
 @use '../../styles/mixins.scss';
+@use './variables' as txs;
 @import '../../styles/variables.scss';
 
 .TransactionsListItem {
@@ -6,8 +7,7 @@
   display: block;
 
   &__Content {
-    display: grid;
-    grid-template-columns: 100px 1fr auto;
+    @include txs.Columns();
 
     &--Inline {
       display: inline !important;
@@ -15,24 +15,20 @@
   }
 
   &__Column {
-    display: flex;
-    align-items: center;
+    @include txs.Column();
 
     &--Timestamp {
       font-family: $font-mono;
-      font-size: 12px;
-      margin-right: 16px;
+      font-size: 0.75rem;
       white-space: nowrap;
       color: #fff;
     }
 
-    &--Identifier {
+    &--Hash, &--Sender {
       color: var(--chakra-colors-gray-250);
       font-family: $font-mono;
       flex-grow: 1;
-      margin-right: 16px;
-      font-size: 12px;
-      
+      font-size: 0.75rem;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
@@ -48,28 +44,46 @@
       justify-content: flex-end;
       white-space: nowrap;
     }
-  }
 
-  @media screen and (max-width: $breakpoint-sm) {
-      &__Column {
-        &--Timestamp {
-          grid-column: 1 / 1;
-        }
+    &--GasUsed {
+      font-size: 0.75rem;
+      text-transform: uppercase;
+      color: #fff;
+      white-space: nowrap;
+      text-align: left;
+    }
+  }
 
-        &--Identifier {
-          order: 3;
-          grid-column: 1 / -1;
-          margin-right: 0;
-          margin-top: 12px;
+  @container (max-width: 660px) {
+    &__Column {
+      &--Sender {
+        .Identifier__SymbolsContainer {
+          display: none;
         }
 
-        &--Type {
-          grid-column: 0 / 1;
+        .Identifier__Avatar {
+          margin: 0;
         }
       }
+    }
+  }
+
+  @container (max-width: 400px) {
+    padding: 5px 8px;
 
-      &__Content {
-        grid-template-columns: 1fr 1fr;
+    &__Column {
+      &, .Identifier {
+        font-size: 0.563rem;
       }
+    }
+
+    &__TypeBadge {
+      font-size: 0.438rem !important;
+      line-height: 15px;
+    }
+
+    &__StatusIcon {
+      display: none !important;
+    }
   }
 }
\ No newline at end of file
diff --git a/packages/frontend/src/components/transactions/TypeBadge.js b/packages/frontend/src/components/transactions/TypeBadge.js
index 9478ae22b..1556db1fc 100644
--- a/packages/frontend/src/components/transactions/TypeBadge.js
+++ b/packages/frontend/src/components/transactions/TypeBadge.js
@@ -3,7 +3,7 @@ import { getTransitionTypeKeyById } from '../../util/index'
 import { TransactionTypesEnum, TransactionTypesColors } from '../../enums/state.transition.type'
 import { Tooltip } from '../ui/Tooltips'
 
-function TypeBadge ({ typeId }) {
+function TypeBadge ({ typeId, ...props }) {
   const TransitionTypeKey = getTransitionTypeKeyById(typeId)
 
   const descriptions = {
@@ -24,7 +24,10 @@ function TypeBadge ({ typeId }) {
       content={descriptions[TransitionTypeKey]}
       placement={'top'}
     >
-      <Badge colorScheme={TransactionTypesColors[TransitionTypeKey]}>
+      <Badge
+        colorScheme={TransactionTypesColors[TransitionTypeKey]}
+        {...props}
+      >
         {TransactionTypesEnum[TransitionTypeKey]}
       </Badge>
     </Tooltip>
diff --git a/packages/frontend/src/components/transactions/_variables.scss b/packages/frontend/src/components/transactions/_variables.scss
new file mode 100644
index 000000000..79a8e465c
--- /dev/null
+++ b/packages/frontend/src/components/transactions/_variables.scss
@@ -0,0 +1,77 @@
+@mixin Columns () {
+  display: grid;
+  gap: 16px;
+
+  grid-template-columns: 
+    minmax(120px, 120px)
+    minmax(0, 600px)
+    minmax(0, 150px)
+    minmax(0, 400px)
+    150px;
+
+  @container (max-width: 810px) {
+    grid-template-columns: 
+      minmax(120px, 120px)
+      minmax(0, 240px)
+      minmax(0, 1fr)
+      auto;
+  }
+
+  @container (max-width: 660px) {
+    grid-template-columns: 
+      minmax(120px, 120px)
+      minmax(0, 600px)
+      20px
+      auto;
+  }
+
+  @container (max-width: 430px) {
+    gap: 12px;
+    grid-template-columns: 
+      minmax(120px, 120px)
+      minmax(0, 600px)
+      auto;
+  }
+
+  @container (max-width: 400px) {
+    grid-template-columns: 
+      minmax(80px, 80px)
+      minmax(0, 600px)
+      auto;
+  }
+}
+
+@mixin Column () {
+  display: flex;
+  align-items: center;
+
+  &--Hash {
+    max-width: 600px;
+  }
+
+  &--Sender {
+    max-width: 400px;
+    width: 100%;
+  }
+
+  &--Type {
+    justify-content: flex-end;
+    white-space: nowrap;
+  }
+
+  &--GasUsed {
+    width: 150px;
+  }
+
+  @container (max-width: 810px) {
+    &--GasUsed {
+      display: none;
+    }
+  }
+
+  @container (max-width: 430px) {
+    &--Sender {
+      display: none;
+    }
+  }
+}
diff --git a/packages/frontend/src/components/ui/Tooltips/RateTooltip.js b/packages/frontend/src/components/ui/Tooltips/RateTooltip.js
index f0266b80d..9adfa201c 100644
--- a/packages/frontend/src/components/ui/Tooltips/RateTooltip.js
+++ b/packages/frontend/src/components/ui/Tooltips/RateTooltip.js
@@ -2,7 +2,7 @@ import Tooltip from './Tooltip'
 import { roundUsd, creditsToDash } from '../../../util'
 import './RateTooltip.scss'
 
-export default function RateTooltip ({ credits, dash, usd, rate, children }) {
+export default function RateTooltip ({ credits, dash, usd, rate, children, placement }) {
   if (!dash && typeof credits === 'number') dash = creditsToDash(credits)
   if (!usd && typeof dash === 'number' && rate?.usd) usd = dash * rate?.usd
 
@@ -14,7 +14,7 @@ export default function RateTooltip ({ credits, dash, usd, rate, children }) {
           {typeof usd === 'number' && <div className={'RateTooltip__Usd'}>~{roundUsd(Number(usd))}$</div>}
         </div>
       )}
-      placement={'right'}
+      placement={placement || 'right'}
     >
       {children}
     </Tooltip>
diff --git a/packages/frontend/src/components/ui/icons/index.js b/packages/frontend/src/components/ui/icons/index.js
index 49b8c2d01..fe24b1ae4 100644
--- a/packages/frontend/src/components/ui/icons/index.js
+++ b/packages/frontend/src/components/ui/icons/index.js
@@ -24,8 +24,61 @@ const ArrowCornerIcon = (props) => (
   </Icon>
 )
 
+const SuccessIcon = (props) => (
+  <Icon viewBox='0 0 18 18' {...props}>
+    <svg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'>
+      <circle cx='9' cy='9' r='9' fill='#1CC400' fillOpacity='0.2'/>
+      <path d='M5 8.5L8 11.5L13.5 6' stroke='#1CC400' strokeWidth='2' strokeLinecap='round'/>
+    </svg>
+  </Icon>
+)
+
+const ErrorIcon = (props) => (
+  <Icon viewBox='0 0 18 18' {...props}>
+    <svg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'>
+      <rect width='18' height='18' rx='4' fill='#F45858' fillOpacity='0.2'/>
+      <path d='M9.06951 10L9.0695 4.86092' stroke='#F45858' strokeWidth='2' strokeLinecap='round'/>
+      <path d='M9.06951 13L9.06951 13.0102' stroke='#F45858' strokeWidth='2' strokeLinecap='round'/>
+    </svg>
+  </Icon>
+)
+
+const QueuedIcon = (props) => (
+  <Icon viewBox='0 0 18 18' {...props}>
+    <svg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'>
+      <rect width='18' height='18' rx='4' fill='#F4A358' fillOpacity='0.2'/>
+      <path d='M11.6756 12.6482C11.8311 12.8601 12.1306 12.9075 12.3268 12.7326C13.1311 12.0158 13.6857 11.055 13.9009 9.99071C14.1476 8.77034 13.9301 7.50182 13.2909 6.43333C12.6518 5.36484 11.637 4.57324 10.4451 4.2134C9.25315 3.85356 7.96985 3.95136 6.84622 4.48768C5.72259 5.024 4.83949 5.96024 4.36966 7.11325C3.89983 8.26626 3.87708 9.55308 4.30587 10.722C4.73466 11.8909 5.58412 12.8577 6.6881 13.4334C7.65084 13.9355 8.74673 14.1085 9.80981 13.934C10.0691 13.8914 10.2207 13.6287 10.1537 13.3746C10.0867 13.1205 9.82636 12.9718 9.56614 13.0086C8.7336 13.1262 7.88063 12.982 7.12813 12.5896C6.23429 12.1235 5.5465 11.3406 5.19933 10.3942C4.85216 9.44781 4.87057 8.40592 5.25098 7.47237C5.63138 6.53882 6.3464 5.78078 7.25616 5.34654C8.16592 4.91231 9.20497 4.83312 10.17 5.12447C11.1351 5.41582 11.9567 6.05674 12.4742 6.92186C12.9917 7.78698 13.1678 8.81405 12.9681 9.80215C12.7999 10.634 12.3756 11.3878 11.7605 11.9612C11.5683 12.1404 11.5202 12.4362 11.6756 12.6482Z' fill='#F49A58'/>
+    </svg>
+  </Icon>
+)
+
+const PooledIcon = (props) => (
+  <Icon viewBox='0 0 18 18' {...props}>
+    <svg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'>
+      <rect width='18' height='18' rx='4' fill='#008DE4' fillOpacity='0.2'/>
+      <path d='M14 7L12.4328 6.01491C11.4484 5.39611 10.1941 5.40565 9.21918 6.03935V6.03935C8.30752 6.63193 7.14565 6.6816 6.18674 6.16899L4 5' stroke='#2CBBFF' strokeLinecap='round'/>
+      <path d='M14 10L12.4328 9.01491C11.4484 8.39611 10.1941 8.40565 9.21918 9.03935V9.03935C8.30752 9.63193 7.14565 9.6816 6.18674 9.16899L4 8' stroke='#2CBBFF' strokeLinecap='round'/>
+      <path d='M14 13L12.4328 12.0149C11.4484 11.3961 10.1941 11.4057 9.21918 12.0393V12.0393C8.30752 12.6319 7.14565 12.6816 6.18674 12.169L4 11' stroke='#2CBBFF' strokeLinecap='round'/>
+    </svg>
+  </Icon>
+)
+
+const BroadcastedIcon = (props) => (
+  <Icon viewBox='0 0 18 18' {...props}>
+    <svg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'>
+      <rect width='18' height='18' rx='4' fill='#008DE4' fillOpacity='0.2'/>
+      <path d='M4.86093 8.74967L12.5 8.74993M12.5 8.74993L9.5 5.74993M12.5 8.74993L9.5 11.7499' stroke='#2CBBFF' strokeWidth='2' strokeLinecap='round' stroke-linejoin='round'/>
+    </svg>
+  </Icon>
+)
+
 export {
   CalendarIcon,
   CircleIcon,
-  ArrowCornerIcon
+  ArrowCornerIcon,
+  SuccessIcon,
+  ErrorIcon,
+  QueuedIcon,
+  PooledIcon,
+  BroadcastedIcon
 }
diff --git a/packages/frontend/src/util/index.js b/packages/frontend/src/util/index.js
index f1b8fed63..fb964016b 100644
--- a/packages/frontend/src/util/index.js
+++ b/packages/frontend/src/util/index.js
@@ -62,9 +62,9 @@ function getTimeDelta (startDate, endDate, format) {
     } else if (hours > 0) {
       return `${hours}h ${isFuture ? 'left' : 'ago'}`
     } else if (minutes > 0) {
-      return `${minutes} min. ${isFuture ? 'left' : 'ago'}`
+      return `${minutes} min ${isFuture ? 'left' : 'ago'}`
     } else {
-      return `${seconds} sec. ${isFuture ? 'left' : 'ago'}`
+      return `${seconds} sec ${isFuture ? 'left' : 'ago'}`
     }
   }