diff --git a/functions/src/index.ts b/functions/src/index.ts
index f58da6c..20f9196 100644
--- a/functions/src/index.ts
+++ b/functions/src/index.ts
@@ -61,10 +61,12 @@ export const update = onRequest({ cors: true }, async (req, res) => {
     return;
   }
 
-  const { uid, signatures } = req.body;
+  const { uid, serializedSignedTx } = req.body;
 
-  if (!uid || !signatures) {
-    res.status(400).send('Invalid input, missing "uid" or "signatures"');
+  if (!uid || !serializedSignedTx) {
+    res
+      .status(400)
+      .send('Invalid input, missing "uid" or "serializedSignedTx"');
     return;
   }
 
@@ -82,7 +84,7 @@ export const update = onRequest({ cors: true }, async (req, res) => {
     const newDocRef = firestore.collection('signed').doc(uid);
     await newDocRef.set({
       ...data,
-      signatures,
+      serializedSignedTx,
       createdAt: admin.firestore.FieldValue.serverTimestamp(),
     });
 
@@ -110,11 +112,11 @@ const _load = async (
       return;
     }
 
-    const { chain, network, project, provenance, signatures } =
+    const { chain, network, project, provenance, serializedSignedTx } =
       doc.data() as DocData;
     if (collection === 'signed') {
       await docRef.delete();
-      res.status(200).json({ chain, network, signatures });
+      res.status(200).json({ chain, network, serializedSignedTx });
     } else {
       res.status(200).json({ chain, network, project, provenance });
     }
diff --git a/functions/src/types.ts b/functions/src/types.ts
index 31ca030..dd9b6eb 100644
--- a/functions/src/types.ts
+++ b/functions/src/types.ts
@@ -2,14 +2,14 @@ interface Provenance {
   name: string; // packageName
   summary: string; // build summary
   commit: string; // source commit
-  build: string; // build file
+  workflow: string; // build workflow
   ledger: string; // public ledger
 }
 
 export interface DocData {
-  chain: string;
+  chain: 'aptos' | 'sui';
   network: string;
   project: string;
   provenance: Provenance;
-  signatures?: string[];
+  serializedSignedTx?: string;
 }
diff --git a/src/App.tsx b/src/App.tsx
index 73c17bd..a62d5bf 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,12 +1,38 @@
+import { SuiClientProvider, WalletProvider } from '@mysten/dapp-kit';
+import { getFullnodeUrl } from '@mysten/sui/client';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { useRecoilState } from 'recoil';
 
 import { Loading } from './component/Loading';
+import { Sui } from './component/Sui';
 import { docDataState } from './recoil';
 
+const queryClient = new QueryClient();
+
 function App() {
-  const state = useRecoilState(docDataState);
+  const [state] = useRecoilState(docDataState);
 
-  return <>{!state && <Loading />}</>;
+  return (
+    <>
+      {!state && <Loading />}
+      {!!state && state.chain === 'sui' && (
+        <QueryClientProvider client={queryClient}>
+          <SuiClientProvider
+            defaultNetwork="mainnet"
+            networks={{
+              mainnet: { url: getFullnodeUrl('mainnet') },
+              testnet: { url: getFullnodeUrl('testnet') },
+              devnet: { url: getFullnodeUrl('devnet') },
+            }}
+          >
+            <WalletProvider>
+              <Sui />
+            </WalletProvider>
+          </SuiClientProvider>
+        </QueryClientProvider>
+      )}
+    </>
+  );
 }
 
 export default App;
diff --git a/src/component/Loading.tsx b/src/component/Loading.tsx
index f22c27b..1852b77 100644
--- a/src/component/Loading.tsx
+++ b/src/component/Loading.tsx
@@ -50,19 +50,17 @@ export const Loading = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   return (
-    <>
-      <Flex
-        gap="3"
-        direction="column"
-        align="center"
-        justify="center"
-        height="100vh"
-      >
-        <Box>{!error && <Spinner size="3" />}</Box>
-        <Box>
-          <Text>{state}</Text>
-        </Box>
-      </Flex>
-    </>
+    <Flex
+      gap="3"
+      direction="column"
+      align="center"
+      justify="center"
+      height="100vh"
+    >
+      <Box>{!error && <Spinner size="3" />}</Box>
+      <Box>
+        <Text>{state}</Text>
+      </Box>
+    </Flex>
   );
 };
diff --git a/src/component/Sui.tsx b/src/component/Sui.tsx
index 919af76..3904996 100644
--- a/src/component/Sui.tsx
+++ b/src/component/Sui.tsx
@@ -1,22 +1,64 @@
-import { SuiClientProvider, WalletProvider } from '@mysten/dapp-kit';
-import { getFullnodeUrl } from '@mysten/sui/client';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { useEffect } from 'react';
 
-const queryClient = new QueryClient();
+import { ConnectButton, useCurrentAccount } from '@mysten/dapp-kit';
+import { Button, Card, Flex, Link, Text } from '@radix-ui/themes';
+import { useRecoilState } from 'recoil';
+
+import { docDataState } from '../recoil';
+
+export const Sui = () => {
+  const currentAccount = useCurrentAccount();
+  const [state] = useRecoilState(docDataState);
+
+  useEffect(() => {
+    currentAccount && console.log(currentAccount.address);
+  }, [currentAccount]);
 
-export const Wallet = () => {
   return (
-    <QueryClientProvider client={queryClient}>
-      <SuiClientProvider
-        defaultNetwork="mainnet"
-        networks={{
-          mainnet: { url: getFullnodeUrl('mainnet') },
-          testnet: { url: getFullnodeUrl('testnet') },
-          devnet: { url: getFullnodeUrl('devnet') },
-        }}
-      >
-        <WalletProvider>Test</WalletProvider>
-      </SuiClientProvider>
-    </QueryClientProvider>
+    <Flex
+      gap="3"
+      direction="column"
+      align="center"
+      justify="center"
+      height="100vh"
+    >
+      {state && currentAccount && (
+        <Card>
+          <Flex gap="3" align="start" direction="column">
+            <Text as="div" size="4" weight="bold">
+              Built and signed on Github Actions
+            </Text>
+            <Flex direction="column">
+              <Flex gap="2">
+                <Text size="2">Build Summary</Text>
+                <Link color="gray" size="2" href={state.provenance.summary}>
+                  {state.provenance.summary}
+                </Link>
+              </Flex>
+              <Flex gap="2">
+                <Text size="2">Source Commit</Text>
+                <Link color="gray" size="2" href={state.provenance.commit}>
+                  {state.provenance.commit}
+                </Link>
+              </Flex>
+              <Flex gap="2">
+                <Text size="2">Build Workflow</Text>
+                <Link color="gray" size="2" href={state.provenance.workflow}>
+                  {state.provenance.workflow}
+                </Link>
+              </Flex>
+              <Flex gap="2">
+                <Text size="2">Public Ledger</Text>
+                <Link color="gray" size="2" href={state.provenance.ledger}>
+                  {state.provenance.ledger}
+                </Link>
+              </Flex>
+            </Flex>
+            <Button>Sign</Button>
+          </Flex>
+        </Card>
+      )}
+      {!currentAccount && <ConnectButton />}
+    </Flex>
   );
 };
diff --git a/src/index.tsx b/src/index.tsx
index ac33f49..bc91784 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -4,7 +4,9 @@ import { Theme } from '@radix-ui/themes';
 import { createRoot } from 'react-dom/client';
 import { RecoilRoot } from 'recoil';
 
+import '@mysten/dapp-kit/dist/index.css';
 import '@radix-ui/themes/styles.css';
+
 import App from './App';
 import reportWebVitals from './reportWebVitals';