diff --git a/web/app/components/offline-notice.tsx b/web/app/components/offline-notice.tsx
new file mode 100644
index 0000000000..3effb2aa8d
--- /dev/null
+++ b/web/app/components/offline-notice.tsx
@@ -0,0 +1,24 @@
+'use client'
+import { RiCloseLine } from '@remixicon/react'
+import { useBoolean } from 'ahooks'
+import type { PropsWithChildren } from 'react'
+import { useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+
+export default function OfflineNotice({ children }: PropsWithChildren) {
+  const { t } = useTranslation()
+  const [showOfflineNotice, { setFalse }] = useBoolean(true)
+
+  useEffect(() => {
+    const timer = setTimeout(setFalse, 60000)
+    return () => clearTimeout(timer)
+  }, [setFalse])
+  return <>
+    {showOfflineNotice && <div className='px-4 py-2 flex items-center justify-start gap-x-2 bg-[#FFFAEB] border-b-[0.5px] border-b-[#FEF0C7]'>
+      <div className='rounded-[12px] flex items-center justify-center px-2 py-0.5 h-[22px] bg-[#f79009] text-white text-[11px] not-italic font-medium leading[18px]'>{t('common.offlineNoticeTitle')}</div>
+      <div className='grow font-medium leading-[18px] text-[12px] not-italic text-[#344054]'>{t('common.offlineNotice')}</div>
+      <RiCloseLine className='size-4 text-[#667085] cursor-pointer' onClick={setFalse} />
+    </div>}
+    {children}
+  </>
+}
diff --git a/web/app/components/sentry-initor.tsx b/web/app/components/sentry-initor.tsx
index 76c17b0df5..6bf0abbec2 100644
--- a/web/app/components/sentry-initor.tsx
+++ b/web/app/components/sentry-initor.tsx
@@ -2,24 +2,12 @@
 
 import { useEffect } from 'react'
 import * as Sentry from '@sentry/react'
-import { useTranslation } from 'react-i18next'
-import Toast from './base/toast'
-import { useDebounceEffect } from 'ahooks'
 
 const isDevelopment = process.env.NODE_ENV === 'development'
 
 const SentryInit = ({
   children,
 }: { children: React.ReactElement }) => {
-  const { t } = useTranslation()
-  useDebounceEffect(() => {
-    Toast.notify({
-      type: 'warning',
-      message: t('common.offlineNotice'),
-      duration: 60000,
-      className: 'fixed left-1/2 -translate-x-1/2 !w-[520px]',
-    })
-  }, [t])
   useEffect(() => {
     const SENTRY_DSN = document?.body?.getAttribute('data-public-sentry-dsn')
     if (!isDevelopment && SENTRY_DSN) {
diff --git a/web/app/layout.tsx b/web/app/layout.tsx
index 2900a314eb..4e3c3d3ae3 100644
--- a/web/app/layout.tsx
+++ b/web/app/layout.tsx
@@ -7,6 +7,7 @@ import { TanstackQueryIniter } from '@/context/query-client'
 import { ThemeProvider } from 'next-themes'
 import './styles/globals.css'
 import './styles/markdown.scss'
+import OfflineNotice from './components/offline-notice'
 
 export const metadata = {
   title: 'Dify',
@@ -61,7 +62,9 @@ const LocaleLayout = ({
                 disableTransitionOnChange
               >
                 <I18nServer>
-                  {children}
+                  <OfflineNotice>
+                    {children}
+                  </OfflineNotice>
                 </I18nServer>
               </ThemeProvider>
             </TanstackQueryIniter>
diff --git a/web/i18n/en-US/common.ts b/web/i18n/en-US/common.ts
index bf6e7b3f98..732dec1ee0 100644
--- a/web/i18n/en-US/common.ts
+++ b/web/i18n/en-US/common.ts
@@ -1,4 +1,5 @@
 const translation = {
+  offlineNoticeTitle: 'Important Notice',
   offlineNotice: 'Dify v1.0.0 is now officially released. Effective February 24, 2025, the current environment will no longer be accessible, and all data will be permanently deleted. Please ensure that you back up any necessary data prior to this date to avoid any loss.',
   api: {
     success: 'Success',
diff --git a/web/i18n/zh-Hans/common.ts b/web/i18n/zh-Hans/common.ts
index 8445f009f8..5ac38d7618 100644
--- a/web/i18n/zh-Hans/common.ts
+++ b/web/i18n/zh-Hans/common.ts
@@ -1,4 +1,5 @@
 const translation = {
+  offlineNoticeTitle: '重要通知',
   offlineNotice: 'Dify v1.0.0 现已正式发布。自 2025年 2 月 24 日起，当前环境将不可访问，所有数据将被永久删除。请务必在此日期之前备份所有必要数据，以避免任何数据丢失。',
   api: {
     success: '成功',