diff --git a/client/web/plugins/com.msgbyte.webview/src/group/GroupWebPanelRender.tsx b/client/web/plugins/com.msgbyte.webview/src/group/GroupWebPanelRender.tsx
index fa99bb8b..5336cc3e 100644
--- a/client/web/plugins/com.msgbyte.webview/src/group/GroupWebPanelRender.tsx
+++ b/client/web/plugins/com.msgbyte.webview/src/group/GroupWebPanelRender.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Translate } from '../translate';
+import { Webview } from '@capital/component';
 
 const GroupWebPanelRender: React.FC<{ panelInfo: any }> = (props) => {
   const panelInfo = props.panelInfo;
@@ -11,7 +12,7 @@ const GroupWebPanelRender: React.FC<{ panelInfo: any }> = (props) => {
   const url = panelInfo?.meta?.url;
 
   return (
-    <iframe key={String(url)} className="w-full h-full bg-white" src={url} />
+    <Webview key={String(url)} className="w-full h-full bg-white" url={url} />
   );
 };
 GroupWebPanelRender.displayName = 'GroupWebPanelRender';
diff --git a/client/web/src/components/Webview.tsx b/client/web/src/components/Webview.tsx
new file mode 100644
index 00000000..002e8a02
--- /dev/null
+++ b/client/web/src/components/Webview.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+interface WebviewProps {
+  url: string;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+/**
+ * 网页渲染容器
+ */
+export const Webview: React.FC<WebviewProps> = React.memo((props) => {
+  return (
+    <iframe className={props.className} style={props.style} src={props.url} />
+  );
+});
+Webview.displayName = 'Webview';
diff --git a/client/web/src/plugin/component/index.tsx b/client/web/src/plugin/component/index.tsx
index 389204da..5cca67f7 100644
--- a/client/web/src/plugin/component/index.tsx
+++ b/client/web/src/plugin/component/index.tsx
@@ -56,3 +56,4 @@ export { ErrorBoundary } from '@/components/ErrorBoundary';
 export { UserAvatar } from '@/components/UserAvatar';
 export { UserName } from '@/components/UserName';
 export { Markdown } from '@/components/Markdown';
+export { Webview } from '@/components/Webview';