diff --git a/ui/components/DAppConnection/DAppConnection.tsx b/ui/components/DAppConnection/DAppConnection.tsx
index 2edf23079..08b10a0a3 100644
--- a/ui/components/DAppConnection/DAppConnection.tsx
+++ b/ui/components/DAppConnection/DAppConnection.tsx
@@ -1,52 +1,15 @@
-import { PermissionRequest } from "@tallyho/provider-bridge-shared"
-import { selectAllowedPages } from "@tallyho/tally-background/redux-slices/selectors"
-import { browser } from "@tallyho/tally-background"
-import React, { ReactElement, useCallback, useEffect, useState } from "react"
-import { useBackgroundSelector } from "../../hooks"
+import React, { ReactElement } from "react"
 import ActiveDAppConnection from "./ActiveDAppConnection"
 import DAppConnectionDefaultToggle from "./DAppConnectionDefaultToggle"
+import { useDappPermission } from "../../hooks/dapp-hooks"
 
 export default function DAppConnection(): ReactElement {
-  const [isConnectedToDApp, setIsConnectedToDApp] = useState(false)
-  const [currentPermission, setCurrentPermission] = useState<
-    PermissionRequest | undefined
-  >(undefined)
-
-  const allowedPages = useBackgroundSelector(selectAllowedPages)
-
-  const initPermissionAndOrigin = useCallback(async () => {
-    const { url } = await browser.tabs
-      .query({
-        active: true,
-        lastFocusedWindow: true,
-      })
-      .then((tabs) =>
-        tabs[0] ? tabs[0] : { url: "", favIconUrl: "", title: "" },
-      )
-    if (!url) return
-
-    const { origin } = new URL(url)
-
-    const allowPermission = allowedPages.find(
-      (permission) => permission.origin === origin,
-    )
-
-    if (allowPermission) {
-      setCurrentPermission(allowPermission)
-      setIsConnectedToDApp(true)
-    } else {
-      setIsConnectedToDApp(false)
-    }
-  }, [allowedPages, setCurrentPermission])
-
-  useEffect(() => {
-    initPermissionAndOrigin()
-  }, [initPermissionAndOrigin])
+  const { isConnected, currentPermission, allowedPages } = useDappPermission()
 
   return (
     <section>
       <ActiveDAppConnection
-        isConnectedToDApp={isConnectedToDApp}
+        isConnectedToDApp={isConnected}
         currentPermission={currentPermission}
         allowedPages={allowedPages}
       />
diff --git a/ui/components/Signing/SignatureDetails/TransactionSignatureDetails/TransactionSignatureSummary/SpendApprovalSummary.tsx b/ui/components/Signing/SignatureDetails/TransactionSignatureDetails/TransactionSignatureSummary/SpendApprovalSummary.tsx
index 5d1c3fe05..da11c65d3 100644
--- a/ui/components/Signing/SignatureDetails/TransactionSignatureDetails/TransactionSignatureSummary/SpendApprovalSummary.tsx
+++ b/ui/components/Signing/SignatureDetails/TransactionSignatureDetails/TransactionSignatureSummary/SpendApprovalSummary.tsx
@@ -25,11 +25,15 @@ import SharedAddress from "../../../../Shared/SharedAddress"
 import { TransactionSignatureSummaryProps } from "./TransactionSignatureSummaryProps"
 import TransactionSignatureSummaryBody from "./TransactionSignatureSummaryBody"
 import SharedSkeletonLoader from "../../../../Shared/SharedSkeletonLoader"
+import { useDappPermission } from "../../../../../hooks/dapp-hooks"
 
 export default function SpendApprovalSummary({
   transactionRequest,
   annotation,
 }: TransactionSignatureSummaryProps<AssetApproval>): ReactElement {
+  const { currentPermission } = useDappPermission()
+  const dappFavicon = currentPermission?.faviconUrl
+
   const { t } = useTranslation("translation", {
     keyPrefix: "signTransaction.spendApproval",
   })
@@ -240,7 +244,8 @@ export default function SpendApprovalSummary({
       <style jsx>
         {`
           .site_icon {
-            background: url("./images/dapp_favicon_default@2x.png");
+            background: url(${dappFavicon ??
+            "./images/dapp_favicon_default@2x.png"});
             background-size: cover;
             width: 48px;
             height: 48px;
diff --git a/ui/hooks/dapp-hooks.ts b/ui/hooks/dapp-hooks.ts
new file mode 100644
index 000000000..2f635816a
--- /dev/null
+++ b/ui/hooks/dapp-hooks.ts
@@ -0,0 +1,54 @@
+import { PermissionRequest } from "@tallyho/provider-bridge-shared"
+import { useCallback, useEffect, useState } from "react"
+import { browser } from "@tallyho/tally-background"
+import { selectAllowedPages } from "@tallyho/tally-background/redux-slices/selectors"
+import { useBackgroundSelector } from "./redux-hooks"
+
+// eslint-disable-next-line import/prefer-default-export
+export function useDappPermission(): {
+  isConnected: boolean
+  currentPermission: PermissionRequest | undefined
+  allowedPages: PermissionRequest[]
+} {
+  const [isConnected, setisConnected] = useState(false)
+  const [currentPermission, setCurrentPermission] = useState<
+    PermissionRequest | undefined
+  >(undefined)
+
+  const allowedPages = useBackgroundSelector(selectAllowedPages)
+
+  const initPermissionAndOrigin = useCallback(async () => {
+    const { url } = await browser.tabs
+      .query({
+        active: true,
+      })
+      .then((tabs) =>
+        tabs[0] ? tabs[0] : { url: "", favIconUrl: "", title: "" },
+      )
+
+    if (!url) return
+
+    const { origin } = new URL(url)
+
+    const allowPermission = allowedPages.find(
+      (permission) => permission.origin === origin,
+    )
+
+    if (allowPermission) {
+      setCurrentPermission(allowPermission)
+      setisConnected(true)
+    } else {
+      setisConnected(false)
+    }
+  }, [allowedPages, setCurrentPermission])
+
+  useEffect(() => {
+    initPermissionAndOrigin()
+  }, [initPermissionAndOrigin])
+
+  return {
+    isConnected,
+    currentPermission,
+    allowedPages,
+  }
+}