diff --git a/packages/apps/dev-wallet/src/Components/BackupMnemonic/BackupMnemonic.tsx b/packages/apps/dev-wallet/src/Components/BackupMnemonic/BackupMnemonic.tsx
index efb5fbf5fc..1dd8820363 100644
--- a/packages/apps/dev-wallet/src/Components/BackupMnemonic/BackupMnemonic.tsx
+++ b/packages/apps/dev-wallet/src/Components/BackupMnemonic/BackupMnemonic.tsx
@@ -30,9 +30,9 @@ export function BackupMnemonic({
   return (
     <>
       {step === 'start' && (
-        <Stack flexDirection={'column'} gap={'lg'}>
-          <Stack flexDirection={'column'} gap={'sm'}>
-            <Heading variant="h5">Write your recovery phrase down</Heading>
+        <Stack flexDirection={'column'} gap="md">
+          <Stack flexDirection={'column'}>
+            <Heading as="h4">Write your recovery phrase down</Heading>
             <Text>
               Make sure no one is watching you; consider some malware might take
               screenshot of your screen
@@ -59,7 +59,7 @@ export function BackupMnemonic({
         </Stack>
       )}
       {step === 'view' && (
-        <Stack flexDirection={'column'} gap={'sm'}>
+        <Stack flexDirection={'column'} gap={'md'}>
           <Heading variant="h5">Write down your recovery phrase</Heading>
           <Text size="small">
             Your recovery phrase is the key to your account. Write it down and
diff --git a/packages/apps/dev-wallet/src/Components/Table/FormatCreationDateWrapper.tsx b/packages/apps/dev-wallet/src/Components/Table/FormatCreationDateWrapper.tsx
new file mode 100644
index 0000000000..d7b2d4945b
--- /dev/null
+++ b/packages/apps/dev-wallet/src/Components/Table/FormatCreationDateWrapper.tsx
@@ -0,0 +1,13 @@
+import { IPactCommand } from '@kadena/client';
+import { ICompactTableFormatterProps } from '@kadena/kode-ui/patterns';
+import type { FC } from 'react';
+
+export const FormatCreationDateWrapper: () => FC<ICompactTableFormatterProps> =
+  () =>
+  ({ value }) => {
+    const date = new Date(
+      ((JSON.parse(value) as IPactCommand).meta.creationTime || 0) * 1000,
+    ).toLocaleString();
+
+    return date;
+  };
diff --git a/packages/apps/dev-wallet/src/Components/Table/FormatHash.tsx b/packages/apps/dev-wallet/src/Components/Table/FormatHash.tsx
new file mode 100644
index 0000000000..de43c1bb86
--- /dev/null
+++ b/packages/apps/dev-wallet/src/Components/Table/FormatHash.tsx
@@ -0,0 +1,8 @@
+import { shorten } from '@/utils/helpers';
+import { ICompactTableFormatterProps } from '@kadena/kode-ui/patterns';
+import type { FC } from 'react';
+
+export const FormatHash: () => FC<ICompactTableFormatterProps> =
+  () =>
+  ({ value }) =>
+    shorten(value);
diff --git a/packages/apps/dev-wallet/src/Components/Table/FormatKeys.tsx b/packages/apps/dev-wallet/src/Components/Table/FormatKeys.tsx
new file mode 100644
index 0000000000..627e13b8e0
--- /dev/null
+++ b/packages/apps/dev-wallet/src/Components/Table/FormatKeys.tsx
@@ -0,0 +1,28 @@
+import { IKeySet } from '@/modules/account/account.repository';
+import { shorten } from '@/utils/helpers';
+import { MonoKey } from '@kadena/kode-icons/system';
+import { Stack, Text } from '@kadena/kode-ui';
+import { ICompactTableFormatterProps } from '@kadena/kode-ui/patterns';
+import type { FC } from 'react';
+
+export const FormatKeys: () => FC<ICompactTableFormatterProps> =
+  () =>
+  ({ value }) => {
+    console.log(1111, value);
+    const keyset: string[] = value.length > 1 ? (value[1] as string) : [];
+
+    console.log(keyset);
+    return (
+      <Stack gap={'sm'} alignItems={'center'}>
+        {value[0]}:
+        {keyset.map((key) => (
+          <Stack gap={'sm'} alignItems={'center'}>
+            <Text variant="code">
+              <MonoKey />
+            </Text>
+            <Text variant="code">{shorten(key)}</Text>{' '}
+          </Stack>
+        ))}
+      </Stack>
+    );
+  };
diff --git a/packages/apps/dev-wallet/src/pages/backup-recovery-phrase/write-down/confirm-recovery-phrase.tsx b/packages/apps/dev-wallet/src/pages/backup-recovery-phrase/write-down/confirm-recovery-phrase.tsx
index ef3fd0431e..315b4fbbd8 100644
--- a/packages/apps/dev-wallet/src/pages/backup-recovery-phrase/write-down/confirm-recovery-phrase.tsx
+++ b/packages/apps/dev-wallet/src/pages/backup-recovery-phrase/write-down/confirm-recovery-phrase.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, Heading, Text, TextField } from '@kadena/kode-ui';
+import { Button, Heading, Stack, Text, TextField } from '@kadena/kode-ui';
 import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 
@@ -21,15 +21,15 @@ export function ConfirmRecoveryPhrase({
 
   return (
     <>
-      <Box margin="md">
-        <Heading variant="h5">Confirm you wrote it down</Heading>
+      <Stack width="100%" gap="md">
+        <Heading as="h4">Confirm you wrote it down</Heading>
         <form onSubmit={handleSubmit(confirm)}>
           <label htmlFor="phrase">Enter phrase in the same order</label>
           <TextField type="password" id="phrase" {...register('phrase')} />
           <Button type="submit">Confirm</Button>
         </form>
         {error && <Text>{error}</Text>}
-      </Box>
+      </Stack>
     </>
   );
 }
diff --git a/packages/apps/dev-wallet/src/pages/keys/Components/KeySets.tsx b/packages/apps/dev-wallet/src/pages/keys/Components/KeySets.tsx
index 15fb42863d..6efe732aed 100644
--- a/packages/apps/dev-wallet/src/pages/keys/Components/KeySets.tsx
+++ b/packages/apps/dev-wallet/src/pages/keys/Components/KeySets.tsx
@@ -1,9 +1,10 @@
 import { ListItem } from '@/Components/ListItem/ListItem';
+import { FormatKeys } from '@/Components/Table/FormatKeys';
 import { useWallet } from '@/modules/wallet/wallet.hook';
 import { shorten } from '@/utils/helpers';
 import { MonoKey } from '@kadena/kode-icons/system';
 import { Button, Heading, Stack, Text } from '@kadena/kode-ui';
-import { useLayout } from '@kadena/kode-ui/patterns';
+import { CompactTable, useLayout } from '@kadena/kode-ui/patterns';
 import { CreateKeySetForm } from './CreateKeySetForm';
 
 export function KeySets() {
@@ -17,7 +18,7 @@ export function KeySets() {
       />
       <Stack flexDirection={'column'}>
         <Stack marginBlock={'md'} justifyContent={'space-between'}>
-          <Heading variant="h3">Key Sets</Heading>
+          <Heading variant="h5">Key Sets</Heading>
           <Button
             onPress={() => setIsRightAsideExpanded(true)}
             variant="outlined"
@@ -26,31 +27,28 @@ export function KeySets() {
             Create Key Set
           </Button>
         </Stack>
-        <Stack flexDirection={'column'}>
-          {keysets
-            .filter(({ guard }) => guard.keys.length >= 2)
-            .map((keySet) => (
-              <ListItem key={keySet.uuid}>
-                <Stack justifyContent={'space-between'}>
-                  <Stack key={keySet.uuid} gap={'sm'}>
-                    <Text>{keySet.alias}</Text>
-                    <Text>{keySet.principal}</Text>
-                  </Stack>
-                </Stack>
-                <Stack gap={'md'}>
-                  <Text>{keySet.guard.pred}:</Text>
-                  {keySet.guard.keys.map((key) => (
-                    <Stack gap={'xs'} alignItems={'center'}>
-                      <Text>
-                        <MonoKey />
-                      </Text>
-                      <Text variant="code">{shorten(key)}</Text>{' '}
-                    </Stack>
-                  ))}
-                </Stack>
-              </ListItem>
-            ))}
-        </Stack>
+        <CompactTable
+          fields={[
+            {
+              label: 'Alias',
+              key: 'alias',
+              width: '10%',
+            },
+            {
+              label: 'Principal',
+              key: 'principal',
+              width: '45%',
+            },
+            {
+              label: 'Keys',
+              key: ['guard.pred', 'guard.keys'],
+              variant: 'code',
+              width: '45%',
+              render: FormatKeys(),
+            },
+          ]}
+          data={keysets.filter(({ guard }) => guard.keys.length >= 2)}
+        />
       </Stack>
     </>
   );
diff --git a/packages/apps/dev-wallet/src/pages/signature-builder/signature-builder.tsx b/packages/apps/dev-wallet/src/pages/signature-builder/signature-builder.tsx
index 6a9aaec3ce..6688e68227 100644
--- a/packages/apps/dev-wallet/src/pages/signature-builder/signature-builder.tsx
+++ b/packages/apps/dev-wallet/src/pages/signature-builder/signature-builder.tsx
@@ -199,10 +199,8 @@ export function SignatureBuilder() {
         </SideBarBreadcrumbsItem>
       </SideBarBreadcrumbs>
 
-      <Stack flexDirection={'column'} gap={'md'}>
-        <Heading variant="h5">
-          Paste SigData, CommandSigData, or Payload
-        </Heading>
+      <Stack flexDirection={'column'} gap={'md'} width="100%">
+        <Heading as="h4">Paste SigData, CommandSigData, or Payload</Heading>
         <textarea
           value={input}
           className={classNames(codeArea)}
diff --git a/packages/apps/dev-wallet/src/pages/transactions/transactions.tsx b/packages/apps/dev-wallet/src/pages/transactions/transactions.tsx
index 7d4fe23d7c..c1f1c40a8d 100644
--- a/packages/apps/dev-wallet/src/pages/transactions/transactions.tsx
+++ b/packages/apps/dev-wallet/src/pages/transactions/transactions.tsx
@@ -1,18 +1,21 @@
 import { SideBarBreadcrumbs } from '@/Components/SideBarBreadcrumbs/SideBarBreadcrumbs';
+import { FormatCreationDateWrapper } from '@/Components/Table/FormatCreationDateWrapper';
+import { FormatHash } from '@/Components/Table/FormatHash';
 import {
   ITransaction,
   transactionRepository,
 } from '@/modules/transaction/transaction.repository';
 import { useWallet } from '@/modules/wallet/wallet.hook';
-import { shorten } from '@/utils/helpers';
 import { IPactCommand } from '@kadena/client';
-import { MonoOpenInNew, MonoSwapHoriz } from '@kadena/kode-icons/system';
-import { Box, Heading, Stack, Text } from '@kadena/kode-ui';
-import { SideBarBreadcrumbsItem } from '@kadena/kode-ui/patterns';
+import { MonoSwapHoriz } from '@kadena/kode-icons/system';
+import { Heading, Stack } from '@kadena/kode-ui';
+import {
+  CompactTable,
+  CompactTableFormatters,
+  SideBarBreadcrumbsItem,
+} from '@kadena/kode-ui/patterns';
 import { useEffect, useMemo, useState } from 'react';
 import { Link } from 'react-router-dom';
-import { listClass, listItemClass, panelClass } from '../home/style.css';
-import { hashStyle } from './style.css';
 
 export function Transactions() {
   const { profile, activeNetwork } = useWallet();
@@ -50,10 +53,11 @@ export function Transactions() {
           Transactions
         </SideBarBreadcrumbsItem>
       </SideBarBreadcrumbs>
-      <Box className={panelClass} marginBlockStart="xs">
+
+      <Stack width="100%" flexDirection="column" gap="md">
         <Heading as="h4">Transactions</Heading>
         <TransactionList transactions={transactions} />
-      </Box>
+      </Stack>
     </>
   );
 }
@@ -84,47 +88,41 @@ export const TransactionList = ({
     [transactions],
   );
   return (
-    <>
-      <Box marginBlockStart="md">
-        {txs.length ? (
-          <ul className={listClass}>
-            {txs.map((tx) => (
-              <li key={tx.uuid}>
-                <Stack
-                  justifyContent="space-between"
-                  alignItems={'center'}
-                  className={listItemClass}
-                  gap={'lg'}
-                >
-                  <Link to={`/transaction/${tx.groupId}`}>
-                    <Text>
-                      <MonoOpenInNew />
-                    </Text>
-                  </Link>
-                  <Text>{shorten(tx.hash)}</Text>
-
-                  <Text className={hashStyle}>
-                    <span
-                      title={tx.type === 'exec' ? tx.code : `cont: ${tx.code}`}
-                    >
-                      {tx.type === 'exec' ? tx.code : `cont: ${tx.code}`}
-                    </span>
-                  </Text>
-
-                  <Text>{tx.status}</Text>
-
-                  <Text>
-                    {new Date(
-                      ((JSON.parse(tx.cmd) as IPactCommand).meta.creationTime ||
-                        0) * 1000,
-                    ).toLocaleString()}
-                  </Text>
-                </Stack>
-              </li>
-            ))}
-          </ul>
-        ) : null}
-      </Box>
-    </>
+    <CompactTable
+      fields={[
+        {
+          label: 'Status',
+          key: 'status',
+          variant: 'code',
+          width: '10%',
+          render: CompactTableFormatters.FormatStatus(),
+        },
+        {
+          label: 'GroupId',
+          key: 'groupId',
+          variant: 'code',
+          width: '30%',
+          render: CompactTableFormatters.FormatLinkWrapper({
+            url: '/transaction/:value',
+            linkComponent: Link,
+          }),
+        },
+        {
+          label: 'Hash',
+          key: 'hash',
+          variant: 'code',
+          width: '20%',
+          render: FormatHash(),
+        },
+        {
+          label: 'Date',
+          key: 'cmd',
+          variant: 'code',
+          width: '40%',
+          render: FormatCreationDateWrapper(),
+        },
+      ]}
+      data={txs}
+    />
   );
 };
diff --git a/packages/libs/kode-ui/src/components/Typography/Text/Text.tsx b/packages/libs/kode-ui/src/components/Typography/Text/Text.tsx
index aef5927511..ce541c5582 100644
--- a/packages/libs/kode-ui/src/components/Typography/Text/Text.tsx
+++ b/packages/libs/kode-ui/src/components/Typography/Text/Text.tsx
@@ -16,7 +16,6 @@ export interface ITextProps {
   transform?: keyof typeof transformVariants;
   variant?: 'body' | 'code' | 'ui';
   ariaLabel?: HTMLAttributes<HTMLSpanElement>['aria-label'];
-  style?: HTMLAttributes<HTMLSpanElement>['style'];
   id?: HTMLAttributes<HTMLSpanElement>['id'];
 }
 
@@ -43,7 +42,6 @@ export const Text = ({
   ariaLabel,
   bold,
   id,
-  style,
 }: ITextProps) => {
   let isInheritedSize = false;
 
@@ -64,7 +62,7 @@ export const Text = ({
   const Element = as ? as : variant === 'code' ? 'code' : 'span';
 
   return (
-    <Element className={classList} aria-label={ariaLabel} id={id} style={style}>
+    <Element className={classList} aria-label={ariaLabel} id={id}>
       {children}
     </Element>
   );
diff --git a/packages/libs/kode-ui/src/patterns/CompactTable/CompactTable.stories.tsx b/packages/libs/kode-ui/src/patterns/CompactTable/CompactTable.stories.tsx
index 7927202559..ca5bea9d9d 100644
--- a/packages/libs/kode-ui/src/patterns/CompactTable/CompactTable.stories.tsx
+++ b/packages/libs/kode-ui/src/patterns/CompactTable/CompactTable.stories.tsx
@@ -266,3 +266,40 @@ export const FormatAmount: Story = {
     );
   },
 };
+
+export const FormatWithkeyArray: Story = {
+  name: 'Format Array Key',
+  args: {
+    isLoading: false,
+  },
+  render: ({ isLoading }) => {
+    return (
+      <MediaContextProvider>
+        <CompactTable
+          isLoading={isLoading}
+          fields={[
+            {
+              label: 'Height',
+              key: 'node.block.height',
+              width: '15%',
+            },
+            {
+              label: 'RequestKey',
+              key: 'node.requestKey',
+              width: '30%',
+              render: CompactTableFormatters.FormatLink({
+                url: `https://kadena.io`,
+              }),
+            },
+            {
+              label: 'Parameters',
+              key: ['node.parameters', 'node.balance.balance'],
+              width: '55%',
+            },
+          ]}
+          data={data}
+        />
+      </MediaContextProvider>
+    );
+  },
+};
diff --git a/packages/libs/kode-ui/src/patterns/CompactTable/FieldCell.tsx b/packages/libs/kode-ui/src/patterns/CompactTable/FieldCell.tsx
index 7806c0d8f7..59d2fe5007 100644
--- a/packages/libs/kode-ui/src/patterns/CompactTable/FieldCell.tsx
+++ b/packages/libs/kode-ui/src/patterns/CompactTable/FieldCell.tsx
@@ -20,7 +20,7 @@ export const FieldCell: FC<IFieldCellProps> = ({
   isMobile = false,
 }) => {
   if (
-    typeof field.key === 'string' &&
+    (typeof field.key === 'string' || typeof field.key === 'object') &&
     (typeof field.render === 'function' || !field.render)
   ) {
     const Render = field.render ? field.render : FormatDefault();
diff --git a/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatDefault.tsx b/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatDefault.tsx
index fa30548389..20e7483c6e 100644
--- a/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatDefault.tsx
+++ b/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatDefault.tsx
@@ -3,8 +3,15 @@ import React from 'react';
 import type { ICompactTableFormatterProps } from './types';
 
 export const FormatDefault = (): FC<ICompactTableFormatterProps> => {
-  const Component: FC<ICompactTableFormatterProps> = ({ value }) => (
-    <>{value}</>
-  );
+  const Component: FC<ICompactTableFormatterProps> = ({ value }) => {
+    if (typeof value === 'object') {
+      return value.reduce((acc, val) => {
+        if (!val) return acc;
+        return `${acc}${val} `;
+      }, '');
+    }
+
+    return <>{value}</>;
+  };
   return Component;
 };
diff --git a/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatLinkWrapper.tsx b/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatLinkWrapper.tsx
new file mode 100644
index 0000000000..b283726436
--- /dev/null
+++ b/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatLinkWrapper.tsx
@@ -0,0 +1,65 @@
+import { MonoArrowOutward } from '@kadena/kode-icons/system';
+import type { FC } from 'react';
+import React, { forwardRef } from 'react';
+import {
+  dataFieldClass,
+  linkClass,
+  linkIconClass,
+  linkWrapperClass,
+} from '../styles.css';
+import type { ILinkProps } from './../../../components';
+import { Stack, Text } from './../../../components';
+import type {
+  ICompactTableFormatterLinkProps,
+  ICompactTableFormatterProps,
+} from './types';
+
+const formatURL = (url: string, value: string): string => {
+  if (url.includes(':value')) {
+    return url.replace(/:value/g, value);
+  }
+  return url;
+};
+
+const InnerAnchor = forwardRef<HTMLAnchorElement, ILinkProps>(
+  ({ children, ...props }, ref) => (
+    <a {...props} ref={ref}>
+      {children}
+    </a>
+  ),
+);
+InnerAnchor.displayName = 'Anchor';
+
+export const FormatLinkWrapper = ({
+  url,
+  linkComponent,
+}: ICompactTableFormatterLinkProps): FC<ICompactTableFormatterProps> => {
+  const LinkWrapper = linkComponent ?? InnerAnchor;
+
+  const Component: FC<ICompactTableFormatterProps> = ({ value }) => (
+    <Stack alignItems="center" className={linkWrapperClass}>
+      <LinkWrapper
+        href={formatURL(url, value)}
+        to={formatURL(url, value)}
+        passHref
+        legacyBehavior
+        className={linkClass}
+      >
+        <Text variant="code" className={dataFieldClass}>
+          {value}
+        </Text>
+      </LinkWrapper>
+
+      <LinkWrapper
+        href={formatURL(url, value)}
+        to={formatURL(url, value)}
+        passHref
+        legacyBehavior
+      >
+        <MonoArrowOutward className={linkIconClass} />
+      </LinkWrapper>
+    </Stack>
+  );
+
+  return Component;
+};
diff --git a/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/index.tsx b/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/index.tsx
index cc04957507..b2b62e8cf6 100644
--- a/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/index.tsx
+++ b/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/index.tsx
@@ -3,6 +3,7 @@ import { FormatAmount } from './FormatAmount';
 import { FormatDefault } from './FormatDefault';
 import { FormatJsonParse } from './FormatJsonParse';
 import { FormatLink } from './FormatLink';
+import { FormatLinkWrapper } from './FormatLinkWrapper';
 import { FormatMultiStepTx } from './FormatMultiStepTx';
 import { FormatStatus } from './FormatStatus';
 import type {
@@ -18,6 +19,7 @@ export const CompactTableFormatters = {
   FormatMultiStepTx,
   FormatJsonParse,
   FormatStatus,
+  FormatLinkWrapper,
 } as const;
 
 export { ICompactTableFormatterLinkProps, ICompactTableFormatterProps };
diff --git a/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/types.ts b/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/types.ts
index 695021af8c..364d16dfca 100644
--- a/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/types.ts
+++ b/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/types.ts
@@ -1,7 +1,8 @@
 export interface ICompactTableFormatterProps {
-  value: string;
+  value: string | string[];
 }
 
 export interface ICompactTableFormatterLinkProps {
   url: string;
+  linkComponent?: any;
 }
diff --git a/packages/libs/kode-ui/src/patterns/CompactTable/utils/getItem.ts b/packages/libs/kode-ui/src/patterns/CompactTable/utils/getItem.ts
index 7316b67219..7648ac081c 100644
--- a/packages/libs/kode-ui/src/patterns/CompactTable/utils/getItem.ts
+++ b/packages/libs/kode-ui/src/patterns/CompactTable/utils/getItem.ts
@@ -20,15 +20,24 @@ export interface IFieldCellProps {
  * @param key
  * @returns
  */
-export const getItem = (item: IFieldCellProps['item'], key: string) => {
-  const keyArr = key.split('.');
-  const value = keyArr.reduce((acc, val) => {
-    if (!acc) return;
-    const newItem = acc[val];
-    if (newItem === undefined || newItem === null) return;
+export const getItem = (
+  item: IFieldCellProps['item'],
+  key: string | [],
+): any => {
+  if (typeof key === 'string') {
+    const keyArr = key.split('.');
+    const value = keyArr.reduce((acc, val) => {
+      if (!acc) return;
+      const newItem = acc[val];
+      if (newItem === undefined || newItem === null) return;
 
-    return newItem;
-  }, item);
+      return newItem;
+    }, item);
 
-  return value;
+    return value;
+  }
+
+  if (typeof key === 'object') {
+    return key.map((k) => getItem(item, k));
+  }
 };