diff --git a/apps/ui-icons/src/Warning.tsx b/apps/ui-icons/src/Warning.tsx
new file mode 100644
index 00000000000..38ad107b18a
--- /dev/null
+++ b/apps/ui-icons/src/Warning.tsx
@@ -0,0 +1,24 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { SVGProps } from 'react';
+export default function SvgWarning(props: SVGProps<SVGSVGElement>) {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="1em"
+            height="1em"
+            fill="none"
+            viewBox="0 0 24 24"
+            {...props}
+        >
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M13.732 3C12.9622 1.66667 11.0377 1.66667 10.2679 3L1.6076 18C0.837803 19.3333 1.80005 21 3.33965 21H20.6602C22.1998 21 23.162 19.3333 22.3922 18L13.732 3ZM12.0003 17.8C12.663 17.8 13.2003 17.2627 13.2003 16.6C13.2003 15.9373 12.663 15.4 12.0003 15.4C11.3376 15.4 10.8003 15.9373 10.8003 16.6C10.8003 17.2627 11.3376 17.8 12.0003 17.8ZM10.8003 8.2C10.8003 7.53726 11.3376 7 12.0003 7C12.663 7 13.2003 7.53726 13.2003 8.2V11.8C13.2003 12.4627 12.663 13 12.0003 13C11.3376 13 10.8003 12.4627 10.8003 11.8V8.2Z"
+                fill="currentColor"
+            />
+            ;
+        </svg>
+    );
+}
diff --git a/apps/ui-icons/src/index.ts b/apps/ui-icons/src/index.ts
index 21ce449ee70..7737bbdf955 100644
--- a/apps/ui-icons/src/index.ts
+++ b/apps/ui-icons/src/index.ts
@@ -76,3 +76,4 @@ export { default as Unpined } from './Unpined';
 export { default as Vest } from './Vest';
 export { default as VisibilityOff } from './VisibilityOff';
 export { default as VisibilityOn } from './VisibilityOn';
+export { default as Warning } from './Warning';
diff --git a/apps/ui-icons/svgs/warning.svg b/apps/ui-icons/svgs/warning.svg
new file mode 100644
index 00000000000..b810b54f7bd
--- /dev/null
+++ b/apps/ui-icons/svgs/warning.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M13.732 3C12.9622 1.66667 11.0377 1.66667 10.2679 3L1.6076 18C0.837803 19.3333 1.80005 21 3.33965 21H20.6602C22.1998 21 23.162 19.3333 22.3922 18L13.732 3ZM12.0003 17.8C12.663 17.8 13.2003 17.2627 13.2003 16.6C13.2003 15.9373 12.663 15.4 12.0003 15.4C11.3376 15.4 10.8003 15.9373 10.8003 16.6C10.8003 17.2627 11.3376 17.8 12.0003 17.8ZM10.8003 8.2C10.8003 7.53726 11.3376 7 12.0003 7C12.663 7 13.2003 7.53726 13.2003 8.2V11.8C13.2003 12.4627 12.663 13 12.0003 13C11.3376 13 10.8003 12.4627 10.8003 11.8V8.2Z" fill="#171D26"/>
+</svg>
\ No newline at end of file
diff --git a/apps/wallet/src/ui/app/pages/site-connect/index.tsx b/apps/wallet/src/ui/app/pages/site-connect/index.tsx
index 8417fe77f48..62e1a615dae 100644
--- a/apps/wallet/src/ui/app/pages/site-connect/index.tsx
+++ b/apps/wallet/src/ui/app/pages/site-connect/index.tsx
@@ -17,11 +17,11 @@ import { type SerializedUIAccount } from '_src/background/accounts/Account';
 import { ampli } from '_src/shared/analytics/ampli';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useParams } from 'react-router-dom';
-
 import { useAccountGroups } from '../../hooks/useAccountGroups';
 import { useActiveAccount } from '../../hooks/useActiveAccount';
 import { PageMainLayoutTitle } from '../../shared/page-main-layout/PageMainLayoutTitle';
-import st from './SiteConnectPage.module.scss';
+import { InfoBox, InfoBoxStyle, InfoBoxType } from '@iota/apps-ui-kit';
+import { Warning } from '@iota/ui-icons';
 
 function SiteConnectPage() {
     const { requestID } = useParams();
@@ -107,16 +107,24 @@ function SiteConnectPage() {
                         blended
                     >
                         <PageMainLayoutTitle title="Insecure Website" />
-                        <div className={st.warningWrapper}>
-                            <h1 className={st.warningTitle}>Your Connection is Not Secure</h1>
-                        </div>
-
-                        <div className={st.warningMessage}>
-                            If you connect your wallet to this site your data could be exposed to
-                            attackers. Click **Reject** if you don't trust this site.
-                            <br />
-                            <br />
-                            Continue at your own risk.
+                        <div className="flex flex-col gap-lg">
+                            <InfoBox
+                                title="Your connection is insecure"
+                                supportingText="Proceed at your own risk."
+                                type={InfoBoxType.Default}
+                                style={InfoBoxStyle.Elevated}
+                                icon={<Warning />}
+                            />
+                            <div className="flex flex-col gap-xs">
+                                <span className="text-label-lg text-neutral-60">
+                                    Connecting your wallet to this site could expose your data to
+                                    attackers.
+                                </span>
+                                <span className="text-label-lg text-neutral-60">
+                                    If you don't have confidence in this site, reject the
+                                    connection.
+                                </span>
+                            </div>
                         </div>
                     </UserApproveContainer>
                 ) : (