diff --git a/dapp/.eslintignore b/dapp/.eslintignore
index 1521c8b76..5884d86cb 100644
--- a/dapp/.eslintignore
+++ b/dapp/.eslintignore
@@ -1 +1,2 @@
 dist
+src/react-table.d.ts
diff --git a/dapp/src/components/TransactionHistory/Table/Cell/components/Status.tsx b/dapp/src/components/TransactionHistory/Table/Cell/components/Status.tsx
index c6dfb262d..f8a1857b9 100644
--- a/dapp/src/components/TransactionHistory/Table/Cell/components/Status.tsx
+++ b/dapp/src/components/TransactionHistory/Table/Cell/components/Status.tsx
@@ -1,16 +1,25 @@
 import React from "react"
 import { TransactionInfoStatus } from "#/types"
 import StatusInfo from "#/components/shared/StatusInfo"
+import { TextProps } from "@chakra-ui/react"
 import SimpleText from "./SimpleText"
 
-function Status({ status }: { status: TransactionInfoStatus }) {
+type StatusProps = {
+  status: TransactionInfoStatus
+} & TextProps
+
+function Status({ status, ...textProps }: StatusProps) {
   if (status === "syncing")
-    return <StatusInfo status={status} withDefaultColor />
+    return <StatusInfo status={status} withDefaultColor {...textProps} />
 
   if (status === "pending")
-    return <SimpleText color="grey.400">In queue</SimpleText>
+    return (
+      <SimpleText color="grey.400" {...textProps}>
+        In queue
+      </SimpleText>
+    )
 
-  return <StatusInfo status={status} />
+  return <StatusInfo status={status} {...textProps} />
 }
 
 export default Status
diff --git a/dapp/src/components/TransactionHistory/Table/Cell/utils/content.tsx b/dapp/src/components/TransactionHistory/Table/Cell/utils/content.tsx
index c32f38366..40cbe9c66 100644
--- a/dapp/src/components/TransactionHistory/Table/Cell/utils/content.tsx
+++ b/dapp/src/components/TransactionHistory/Table/Cell/utils/content.tsx
@@ -43,7 +43,7 @@ export const getCustomContent = (
       )
     }
     case "status": {
-      return <Status status={transaction.status} />
+      return <Status status={transaction.status} textAlign="right" />
     }
     default:
       // eslint-disable-next-line react/jsx-no-useless-fragment
diff --git a/dapp/src/components/TransactionHistory/Table/Header.tsx b/dapp/src/components/TransactionHistory/Table/Header.tsx
index 4c5631bb6..34dcf855d 100644
--- a/dapp/src/components/TransactionHistory/Table/Header.tsx
+++ b/dapp/src/components/TransactionHistory/Table/Header.tsx
@@ -8,12 +8,13 @@ function TableHeader({ table }: { table: UseTransactionHistoryTableResult }) {
     <Thead>
       {table.getHeaderGroups().map(({ id, headers }) => (
         <Tr key={id}>
-          {headers.map((header) => (
+          {headers.map(({ id: headerId, column, getContext }) => (
             <Th
-              key={header.id}
-              onClick={header.column.getToggleSortingHandler()}
+              key={headerId}
+              onClick={column.getToggleSortingHandler()}
+              textAlign={column.columnDef.meta?.style.textAlign}
             >
-              {flexRender(header.column.columnDef.header, header.getContext())}
+              {flexRender(column.columnDef.header, getContext())}
             </Th>
           ))}
         </Tr>
diff --git a/dapp/src/components/TransactionHistory/Table/utils/columns.tsx b/dapp/src/components/TransactionHistory/Table/utils/columns.tsx
index 4569c203c..f13ce364c 100644
--- a/dapp/src/components/TransactionHistory/Table/utils/columns.tsx
+++ b/dapp/src/components/TransactionHistory/Table/utils/columns.tsx
@@ -85,6 +85,9 @@ export const COLUMNS: ColumnDef<StakeHistory, any>[] = [
   }),
   columnHelper.display({
     header: "Status",
+    meta: {
+      style: { textAlign: "right" },
+    },
     cell: ({ row: { original } }) => (
       <CustomCell
         type="status"
diff --git a/dapp/src/components/shared/StatusInfo/index.tsx b/dapp/src/components/shared/StatusInfo/index.tsx
index abebfdaa5..d2f4f5726 100644
--- a/dapp/src/components/shared/StatusInfo/index.tsx
+++ b/dapp/src/components/shared/StatusInfo/index.tsx
@@ -1,6 +1,6 @@
 import React from "react"
 import { TransactionInfoStatus } from "#/types"
-import { Box, Icon, useMultiStyleConfig } from "@chakra-ui/react"
+import { Box, Icon, TextProps, useMultiStyleConfig } from "@chakra-ui/react"
 import { Complete, Pending, Syncing } from "#/static/icons"
 
 const DATA: Record<
@@ -14,16 +14,15 @@ const DATA: Record<
 
 type StatusInfoProps = {
   status: TransactionInfoStatus
-  color?: string
   withDefaultColor?: boolean
   withIcon?: boolean
-}
+} & TextProps
 
 export default function StatusInfo({
   status,
-  color,
   withDefaultColor,
   withIcon,
+  ...textProps
 }: StatusInfoProps) {
   const data = DATA[status]
   const styles = useMultiStyleConfig("StatusInfo", {
@@ -31,7 +30,7 @@ export default function StatusInfo({
   })
 
   return (
-    <Box __css={styles.container} color={color}>
+    <Box __css={styles.container} {...textProps}>
       {withIcon && <Icon as={data.icon} boxSize={5} />}
       <Box as="span" __css={styles.label}>
         {data.label}
diff --git a/dapp/src/react-table.d.ts b/dapp/src/react-table.d.ts
new file mode 100644
index 000000000..0134e5f4d
--- /dev/null
+++ b/dapp/src/react-table.d.ts
@@ -0,0 +1,9 @@
+import "@tanstack/react-table"
+
+declare module "@tanstack/react-table" {
+  interface ColumnMeta<TData extends RowData, TValue> {
+    style: {
+      textAlign: "left" | "center" | "right"
+    }
+  }
+}
diff --git a/dapp/src/theme/StatusInfo.tsx b/dapp/src/theme/StatusInfo.tsx
index 2a4d42a67..1bd1d2afc 100644
--- a/dapp/src/theme/StatusInfo.tsx
+++ b/dapp/src/theme/StatusInfo.tsx
@@ -21,6 +21,7 @@ const baseStyleLabel = defineStyle({
   fontWeight: "semibold",
   fontSize: "sm",
   lineHeight: "sm",
+  w: "100%",
 })
 
 const baseStyle = multiStyleConfig.definePartsStyle(