diff --git a/packages/onchaintrust-snap/images/icon-sm.svg b/packages/onchaintrust-snap/images/icon-sm.svg
new file mode 100644
index 0000000..0b864d2
--- /dev/null
+++ b/packages/onchaintrust-snap/images/icon-sm.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="16.000000pt" height="16.000000pt" viewBox="0 0 256.000000 256.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,256.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M1185 2433 c-230 -30 -448 -210 -531 -436 -34 -95 -44 -195 -44 -433
+0 -212 0 -214 21 -214 73 0 163 60 201 134 19 36 23 64 28 211 6 142 10 179
+29 228 61 157 201 257 372 265 179 9 324 -80 402 -246 29 -61 32 -75 32 -168
+0 -159 -15 -183 -349 -552 -174 -193 -280 -318 -290 -343 -34 -83 -12 -213 43
+-263 17 -15 36 4 357 360 363 403 387 432 427 522 48 105 60 174 55 307 -6
+133 -26 205 -89 312 -130 220 -404 350 -664 316z"/>
+<path d="M1143 1628 c-426 -473 -419 -464 -457 -542 -49 -100 -69 -184 -69
+-296 0 -116 19 -196 75 -310 77 -157 239 -288 418 -336 80 -21 243 -24 320 -5
+192 47 358 180 444 356 62 125 68 163 73 453 l5 262 -33 0 c-79 -1 -182 -85
+-207 -168 -7 -22 -12 -97 -12 -169 0 -144 -15 -221 -57 -293 -40 -68 -112
+-133 -188 -171 -66 -32 -75 -34 -175 -34 -97 0 -110 2 -170 31 -120 58 -203
+156 -235 279 -27 106 -14 203 39 301 15 27 149 184 298 349 175 193 278 316
+291 345 37 83 18 211 -40 263 -20 17 -26 10 -320 -315z"/>
+</g>
+</svg>
diff --git a/packages/onchaintrust-snap/snap.config.ts b/packages/onchaintrust-snap/snap.config.ts
index 6e6100b..b10d7b5 100644
--- a/packages/onchaintrust-snap/snap.config.ts
+++ b/packages/onchaintrust-snap/snap.config.ts
@@ -2,7 +2,7 @@ import type { SnapConfig } from '@metamask/snaps-cli';
 import { resolve } from 'path';
 
 const config: SnapConfig = {
-  input: resolve(__dirname, 'src/index.ts'),
+  input: resolve(__dirname, 'src/index.tsx'),
   server: {
     port: 8080,
   },
diff --git a/packages/onchaintrust-snap/snap.manifest.json b/packages/onchaintrust-snap/snap.manifest.json
index dd274b0..490c243 100644
--- a/packages/onchaintrust-snap/snap.manifest.json
+++ b/packages/onchaintrust-snap/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/OnChainTrust/onchaintrust-snap.git"
   },
   "source": {
-    "shasum": "+S9dM+erS0GOV1AWm2MxKJVJfvigx6knvyF15zGU3HM=",
+    "shasum": "E0NYWHnFys84r72pOYrCa2M3ZsyNVYYfyQMPAMJ0naI=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",
@@ -21,7 +21,8 @@
     "endowment:transaction-insight": {
       "allowTransactionOrigin": true
     },
-    "endowment:network-access": {}
+    "endowment:network-access": {},
+    "endowment:page-home": {}
   },
   "platformVersion": "9.2.0",
   "manifestVersion": "0.1"
diff --git a/packages/onchaintrust-snap/src/index.ts b/packages/onchaintrust-snap/src/index.ts
deleted file mode 100644
index 7c04f06..0000000
--- a/packages/onchaintrust-snap/src/index.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import type { OnTransactionHandler } from '@metamask/snaps-sdk';
-import { SeverityLevel } from '@metamask/snaps-sdk';
-
-import { requestUiDefinition } from './api';
-import { renderUI, errorElements } from './ui';
-
-export const onTransaction: OnTransactionHandler = async ({
-  transactionOrigin,
-  chainId,
-  transaction,
-}) => {
-  const result = await requestUiDefinition(
-    transaction.to ?? '',
-    transactionOrigin ?? '',
-    chainId,
-  );
-
-  const ui = result.ok
-    ? result.data.ui
-    : errorElements('Unable to load data. Please try again later.');
-
-  const content = renderUI(ui);
-
-  return result.ok && result.data.severity === 'critical'
-    ? { content, severity: SeverityLevel.Critical }
-    : { content };
-};
diff --git a/packages/onchaintrust-snap/src/index.tsx b/packages/onchaintrust-snap/src/index.tsx
new file mode 100644
index 0000000..6918fcf
--- /dev/null
+++ b/packages/onchaintrust-snap/src/index.tsx
@@ -0,0 +1,58 @@
+import type {
+  OnTransactionHandler,
+  OnHomePageHandler,
+} from '@metamask/snaps-sdk';
+import { SeverityLevel } from '@metamask/snaps-sdk';
+import { Box, Link, Text, Divider, Section } from '@metamask/snaps-sdk/jsx';
+
+import { requestUiDefinition } from './api';
+import { renderUI, errorElements } from './ui';
+
+export const onTransaction: OnTransactionHandler = async ({
+  transactionOrigin,
+  chainId,
+  transaction,
+}) => {
+  const result = await requestUiDefinition(
+    transaction.to ?? '',
+    transactionOrigin ?? '',
+    chainId,
+  );
+
+  const ui = result.ok
+    ? result.data.ui
+    : errorElements('Unable to load data. Please try again later.');
+
+  const content = renderUI(ui);
+
+  return result.ok && result.data.severity === 'critical'
+    ? { content, severity: SeverityLevel.Critical }
+    : { content };
+};
+
+export const onHomePage: OnHomePageHandler = async () => {
+  return {
+    content: (
+      <Box>
+        <Section>
+          <Text>Make your web3-interactions safer and more transparent.</Text>
+          <Text>
+            Protect your assets with advanced security checks and real-time
+            insights before every transaction.
+          </Text>
+          <Link href="https://onchaintrust.org">Learn more</Link>
+        </Section>
+        <Divider />
+        <Section>
+          <Text>
+            Do you run a Web3 application? Keep your users safe with
+            OnChainTrust.
+          </Text>
+          <Link href="https://app.onchaintrust.org/protection">
+            Verify your domain and enable protection
+          </Link>
+        </Section>
+      </Box>
+    ),
+  };
+};