diff --git a/entrypoints/popup/App.tsx b/entrypoints/popup/App.tsx
index 3e71281..bc5f22a 100644
--- a/entrypoints/popup/App.tsx
+++ b/entrypoints/popup/App.tsx
@@ -3,12 +3,10 @@ import TopBar from '@/components/TopBar';
 import RouterContainer from '@/components/RouterContainer';
 import ErrorBoundary from '@/components/ErrorBoundary';
 import { SnackbarProvider } from '@/components/GlobalSnackbar';
-import { Box } from '@mui/material';
 import { getEntryPointType } from '@/config/features';
 import { useMemo } from 'react';
 
 export default function App() {
-  // 打开Chrome扩展选项页面，需确保manifest中已配置options_page或options_ui
   const handleOpenOptions = () => {
     chrome.runtime.openOptionsPage().catch(console.error);
   };
@@ -37,33 +35,12 @@ export default function App() {
       pageOrderKey={routerConfig.pageOrderKey}
     >
       <SnackbarProvider initialOptions={{ autoHideDuration: 1500 }}>
-        <Box
-          className="app"
-          sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            width: '400px',
-            maxWidth: '400px',
-            minWidth: '400px',
-            height: '600px',
-            minHeight: '600px',
-            overflow: 'hidden',
-            backgroundColor: 'background.default',
-            // 仅在明确的大屏幕（如独立页面或侧边栏拉伸）下才允许扩展
-            '@media screen and (min-width: 600px)': {
-              width: '100vw',
-              maxWidth: 'none',
-              minWidth: 'none',
-              height: '100vh',
-              minHeight: 'none',
-            },
-          }}
-        >
+        <div className="app flex flex-col w-[400px] max-w-[400px] min-w-[400px] h-[600px] min-h-[600px] overflow-hidden bg-background sm:w-screen sm:max-w-none sm:min-w-0 sm:h-screen sm:min-h-0">
           <TopBar onOpenOptions={handleOpenOptions} />
           <ErrorBoundary>
             <RouterContainer />
           </ErrorBoundary>
-        </Box>
+        </div>
       </SnackbarProvider>
     </RouterProvider>
   );
diff --git a/entrypoints/sidepanel/App.tsx b/entrypoints/sidepanel/App.tsx
index 634ca13..ec3285a 100644
--- a/entrypoints/sidepanel/App.tsx
+++ b/entrypoints/sidepanel/App.tsx
@@ -5,7 +5,6 @@ import RouterContainer from '@/components/RouterContainer';
 import ErrorBoundary from '@/components/ErrorBoundary';
 import { SnackbarProvider } from '@/components/GlobalSnackbar';
 import { MessageAction, sendMessage } from '@/utils/messages';
-import { Box } from '@mui/material';
 
 export default function App() {
   const handleOpenOptions = () => {
@@ -14,11 +13,9 @@ export default function App() {
     });
   };
 
-  // 通知侧边栏已打开
   useEffect(() => {
     sendMessage(MessageAction.SIDE_PANEL_STATE_CHANGED, { isOpen: true });
     return () => {
-      // 尝试在关闭时通知，虽然在某些情况下可能无法成功发送
       sendMessage(MessageAction.SIDE_PANEL_STATE_CHANGED, { isOpen: false });
     };
   }, []);
@@ -26,21 +23,12 @@ export default function App() {
   return (
     <RouterProvider defaultRoute="dashboard" syncKey="app/sidepanelRoute">
       <SnackbarProvider initialOptions={{ autoHideDuration: 1500 }}>
-        <Box
-          className="app"
-          sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            height: '100vh',
-            width: '100%',
-            overflow: 'hidden',
-          }}
-        >
+        <div className="app flex flex-col h-screen w-full overflow-hidden">
           <TopBar onOpenOptions={handleOpenOptions} />
           <ErrorBoundary>
             <RouterContainer />
           </ErrorBoundary>
-        </Box>
+        </div>
       </SnackbarProvider>
     </RouterProvider>
   );
diff --git a/pages/StorageCleaner/DomainHeader.tsx b/pages/StorageCleaner/DomainHeader.tsx
index 7203936..42d82fc 100644
--- a/pages/StorageCleaner/DomainHeader.tsx
+++ b/pages/StorageCleaner/DomainHeader.tsx
@@ -1,46 +1,27 @@
-import { Box } from '@mui/material';
-import StorageIcon from '@mui/icons-material/Storage';
+import { Database } from 'lucide-react';
 import PageHeader from '@/components/PageHeader';
 import { formatSize } from '@/utils/storageCleaner';
 import { storageCleanerPageStyles } from '@/config/pageTheme';
 import { useLazyTranslation } from '@/utils/useLazyTranslation';
 
-/**
- * DomainHeader 组件属性接口
- */
 interface DomainHeaderProps {
-  /** 当前域名 */
   domain: string;
-  /** 已占用的存储大小（字节） */
   totalSize: number;
 }
 
-/**
- * DomainHeader - 存储清理页面标题栏组件
- *
- * 使用 PageHeader 组件构建，显示域名和已占用存储空间大小
- *
- * @example
- * ```tsx
- * <DomainHeader
- *   domain="example.com"
- *   totalSize={1048576}
- * />
- * ```
- */
 export default function DomainHeader({ domain, totalSize }: DomainHeaderProps) {
   const { t } = useLazyTranslation('storageCleaner');
   return (
     <PageHeader
-      icon={<StorageIcon sx={{ fontSize: 22 }} />}
+      icon={<Database size={22} />}
       iconColor={storageCleanerPageStyles.warningColor}
       title={t('storageCleaner:pageTitle')}
       subtitle={domain || t('storageCleaner:loading')}
       badge={
         totalSize > 0 ? (
-          <Box sx={storageCleanerPageStyles.DOMAIN_HEADER_BADGE}>
+          <span className="inline-block px-2 py-0.5 rounded-md font-extrabold text-[0.7rem] bg-amber-50 text-amber-600 shadow-sm transition-all hover:bg-amber-100">
             {t('storageCleaner:occupied', { size: formatSize(totalSize) })}
-          </Box>
+          </span>
         ) : null
       }
       iconSx={{