diff --git a/src/App.tsx b/src/App.tsx
index 6e1f8717..36016a72 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -51,11 +51,12 @@ const SettingsView = React.memo(() => <SettingsPanel />);
 SettingsView.displayName = 'SettingsView';
 
 function App() {
-  const { 
-    isAuthenticated, 
-    currentView, 
+  const {
+    isAuthenticated,
+    currentView,
     selectedCategory,
     theme,
+    hasHydrated,
     searchResults,
     repositories,
     setSelectedCategory,
@@ -107,7 +108,7 @@ function App() {
     switch (currentView) {
       case 'repositories':
         return (
-          <RepositoriesView 
+          <RepositoriesView
             repositories={repositories}
             searchResults={searchResults}
             selectedCategory={selectedCategory}
@@ -129,6 +130,17 @@ function App() {
     }
   }, [currentView, repositories, searchResults, selectedCategory, handleCategorySelect]);
 
+  // Show loading state while store is hydrating to ensure correct theme is applied
+  if (!hasHydrated) {
+    return (
+      <div className="min-h-screen bg-light-bg dark:bg-marketing-black flex items-center justify-center">
+        <div className="text-gray-900 dark:text-text-primary text-lg font-medium animate-pulse">
+          Loading...
+        </div>
+      </div>
+    );
+  }
+
   if (!isAuthenticated) {
     return <LoginScreen />;
   }
diff --git a/src/components/MarkdownRenderer.tsx b/src/components/MarkdownRenderer.tsx
index 00f8e3c2..4c287405 100644
--- a/src/components/MarkdownRenderer.tsx
+++ b/src/components/MarkdownRenderer.tsx
@@ -18,6 +18,7 @@ interface MarkdownRendererProps {
   enableHtml?: boolean;
   baseUrl?: string;
   headingIds?: Map<string, string>;
+  fontSize?: 'small' | 'medium' | 'large';
 }
 
 const REMARK_PLUGINS = [remarkGfm, remarkBreaks];
@@ -92,10 +93,6 @@ const CodeBlock: React.FC<{
     }
   }, [codeText, uiLanguage]);
 
-  const codeLines = codeText.split('\n');
-  const lineCount = codeLines.length;
-  const showLineNumbers = lineCount > 3;
-
   const isBashLike = ['bash', 'sh', 'shell', 'zsh'].includes(normalizedLanguage);
   const isPowerShell = ['powershell', 'ps1'].includes(normalizedLanguage);
   const isCmdLike = ['cmd', 'bat'].includes(normalizedLanguage);
@@ -141,11 +138,6 @@ const CodeBlock: React.FC<{
           )}
         </div>
         <div className="flex items-center gap-2">
-          {showLineNumbers && (
-            <span className="text-xs text-gray-400 dark:text-text-tertiary font-mono">
-              {lineCount} {uiLanguage === 'zh' ? '行' : 'lines'}
-            </span>
-          )}
           <button
             onClick={handleCopy}
             className={`flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-xs font-medium transition-all ${
@@ -187,36 +179,11 @@ const CodeBlock: React.FC<{
               ? 'bg-gradient-to-br from-cyan-50/40 to-slate-100/20 dark:from-[#0d1117] dark:to-[#161b22]'
               : 'bg-light-bg dark:bg-[#0d1117]'
       }`}>
-        {showLineNumbers ? (
-          <div className="flex">
-            <div className={`flex-shrink-0 py-3 px-3 text-right select-none border-r ${
-              isBashLike
-                ? 'border-black/[0.06] dark:border-[#30363d] bg-status-emerald/10 dark:bg-[#161b22]'
-                : isPowerShell
-                  ? 'border-black/[0.06] dark:border-[#30363d] bg-gray-100 dark:bg-[#161b22]'
-                  : isCmdLike
-                    ? 'border-cyan-200 dark:border-[#30363d] bg-cyan-50/20 dark:bg-[#161b22]'
-                    : 'border-black/[0.06] dark:border-[#30363d] bg-light-surface/50 dark:bg-[#161b22]'
-            }`}>
-              {codeLines.map((_, i) => (
-                <div key={i} className="text-xs leading-6 text-gray-400 dark:text-[#6e7681] font-mono tabular-nums">
-                  {i + 1}
-                </div>
-              ))}
-            </div>
-            <pre className={`flex-1 p-4 overflow-x-auto ${className || ''}`}>
-              <code ref={codeRef} className={`text-sm font-mono leading-6 text-gray-800 dark:text-[#e6edf3] ${normalizedLanguage ? `language-${normalizedLanguage}` : ''}`}>
-                {codeText}
-              </code>
-            </pre>
-          </div>
-        ) : (
-          <pre className={`p-4 overflow-x-auto ${className || ''}`}>
-            <code ref={codeRef} className={`text-sm font-mono leading-6 text-gray-800 dark:text-[#e6edf3] ${normalizedLanguage ? `language-${normalizedLanguage}` : ''}`}>
-              {codeText}
-            </code>
-          </pre>
-        )}
+        <pre className={`p-4 overflow-x-auto ${className || ''}`}>
+          <code ref={codeRef} className={`text-sm font-mono leading-6 text-gray-800 dark:text-[#e6edf3] ${normalizedLanguage ? `language-${normalizedLanguage}` : ''}`}>
+            {codeText}
+          </code>
+        </pre>
       </div>
     </div>
   );
@@ -481,7 +448,9 @@ const MarkdownImage: React.FC<{ src?: string; alt?: string; baseUrl?: string }>
     setIsLoading(false);
   }, []);
 
-  const handleRetry = useCallback(() => {
+  const handleRetry = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
     setHasError(false);
     setIsLoading(true);
     setImageSizeKnown(false);
@@ -784,7 +753,8 @@ const MarkdownRenderer: React.FC<MarkdownRendererProps> = memo(({
   shouldRender = true,
   enableHtml = false,
   baseUrl,
-  headingIds
+  headingIds,
+  fontSize = 'medium'
 }) => {
   const headingCounterRef = useRef(headingIds?.size ?? 0);
   const headingTextCountMapRef = useRef(new Map<string, number>());
@@ -796,6 +766,18 @@ const MarkdownRenderer: React.FC<MarkdownRendererProps> = memo(({
 
   const rehypePlugins = enableHtml ? REHYPE_PLUGINS_WITH_HTML : REHYPE_PLUGINS_NO_HTML;
 
+  const getProseClass = useCallback(() => {
+    switch (fontSize) {
+      case 'small':
+        return 'prose prose-sm dark:prose-invert';
+      case 'large':
+        return 'prose prose-lg dark:prose-invert';
+      case 'medium':
+      default:
+        return 'prose dark:prose-invert';
+    }
+  }, [fontSize]);
+
   const getHeadingId = useCallback((children: React.ReactNode): string | undefined => {
     if (headingIds && headingIds.size > 0) {
       const text = extractTextFromChildren(children);
@@ -933,7 +915,7 @@ const MarkdownRenderer: React.FC<MarkdownRendererProps> = memo(({
   }
 
   return (
-    <div className={`prose prose-sm dark:prose-invert max-w-none ${className}`}>
+    <div className={`${getProseClass()} max-w-none ${className}`}>
       <ReactMarkdown
         remarkPlugins={REMARK_PLUGINS}
         rehypePlugins={rehypePlugins}
diff --git a/src/components/ReadmeModal.tsx b/src/components/ReadmeModal.tsx
index 71726cc6..ea20043a 100644
--- a/src/components/ReadmeModal.tsx
+++ b/src/components/ReadmeModal.tsx
@@ -51,6 +51,18 @@ export const ReadmeModal: React.FC<ReadmeModalProps> = ({
 
   const currentFontSize = FONT_SIZES[fontSizeIndex].value;
 
+  const getFontSizeType = useCallback((): 'small' | 'medium' | 'large' => {
+    switch (fontSizeIndex) {
+      case 0:
+        return 'small';
+      case 2:
+        return 'large';
+      case 1:
+      default:
+        return 'medium';
+    }
+  }, [fontSizeIndex]);
+
   const extractToc = useCallback((content: string): { items: TocItem[], idMap: Map<string, string> } => {
     const items: TocItem[] = [];
     const idMap = new Map<string, string>();
@@ -477,6 +489,7 @@ export const ReadmeModal: React.FC<ReadmeModalProps> = ({
                 enableHtml={true}
                 baseUrl={repository?.html_url}
                 headingIds={headingIdMap}
+                fontSize={getFontSizeType()}
               />
             ) : (
               <div className="flex flex-col items-center justify-center py-12">
diff --git a/src/components/RepositoryCard.tsx b/src/components/RepositoryCard.tsx
index 71ce7297..f02243c4 100644
--- a/src/components/RepositoryCard.tsx
+++ b/src/components/RepositoryCard.tsx
@@ -873,28 +873,28 @@ const RepositoryCardComponent: React.FC<RepositoryCardProps> = ({
         </div>
       </div>
 
-      {/* Description with Tooltip */}
+      {/* Description with Tooltip - Enhanced for Light Mode */}
       <div className="mb-4 flex-1">
         <div
-          className="relative"
+          className="relative group"
           onMouseEnter={() => isTextTruncated && setShowTooltip(true)}
           onMouseLeave={() => setShowTooltip(false)}
         >
           <p
             ref={descriptionRef}
-            className="text-gray-900 dark:text-text-secondary text-sm leading-relaxed line-clamp-3 mb-2"
+            className="text-gray-800 dark:text-text-secondary text-[13px] leading-[1.625] line-clamp-3 mb-2 transition-colors duration-200 hover:text-gray-900 dark:hover:text-text-primary rounded px-1 -mx-1 hover:bg-gray-50/50 dark:hover:bg-white/[0.02]"
           >
             {highlightSearchTerm(displayContent.content, searchQuery)}
           </p>
 
-          {/* Tooltip - Only show when text is actually truncated */}
+          {/* Enhanced Tooltip - Optimized for Light Mode Readability */}
           {isTextTruncated && showTooltip && (
-            <div className="absolute z-50 bottom-full left-0 right-0 mb-2 p-3 bg-gray-900 dark:bg-surface-3 text-white dark:text-text-primary text-sm rounded-lg shadow-dialog border border-black/[0.06] dark:border-white/[0.04]">
-              <div className="whitespace-pre-wrap break-words">
+            <div className="absolute z-50 bottom-full left-0 right-0 mb-2 p-4 bg-white dark:bg-surface-3 text-gray-900 dark:text-text-primary text-[13px] leading-[1.625] rounded-xl shadow-dialog border border-gray-200/80 dark:border-white/[0.04] animate-fade-in max-h-[280px] overflow-y-auto scrollbar-auto">
+              <div className="whitespace-pre-wrap break-words pr-2">
                 {highlightSearchTerm(displayContent.content, searchQuery)}
               </div>
-              {/* Arrow */}
-              <div className="absolute top-full left-4 w-0 h-0 border-l-4 border-r-4 border-t-4 border-l-transparent border-r-transparent border-t-gray-900 dark:border-t-surface-3"></div>
+              {/* Arrow with Light Mode Optimization */}
+              <div className="absolute top-full left-4 w-0 h-0 border-l-[6px] border-l-transparent border-r-[6px] border-r-transparent border-t-[6px] border-t-white dark:border-t-surface-3 drop-shadow-sm"></div>
             </div>
           )}
         </div>
diff --git a/src/components/RepositoryEditModal.tsx b/src/components/RepositoryEditModal.tsx
index 4e78de2f..cd6e56ec 100644
--- a/src/components/RepositoryEditModal.tsx
+++ b/src/components/RepositoryEditModal.tsx
@@ -54,7 +54,7 @@ export const RepositoryEditModal: React.FC<RepositoryEditModalProps> = ({
   onClose,
   repository
 }) => {
-  const { updateRepository, language, customCategories, hiddenDefaultCategoryIds, defaultCategoryOverrides } = useAppStore();
+  const { updateRepository, language, customCategories, hiddenDefaultCategoryIds, defaultCategoryOverrides, theme } = useAppStore();
 
   const [formData, setFormData] = useState({
     description: '',
@@ -589,12 +589,15 @@ export const RepositoryEditModal: React.FC<RepositoryEditModalProps> = ({
 
   if (!repository) return null;
 
-  // 统一的卡片样式
-  const sectionClass = "p-5 bg-white dark:bg-panel-dark rounded-xl border border-black/[0.06] dark:border-white/[0.04]";
-  const labelClass = "flex items-center space-x-2 text-sm font-medium text-gray-900 dark:text-text-primary mb-3";
-  const inputClass = "w-full px-3 py-2 bg-light-bg dark:bg-white/[0.04] border border-black/[0.06] dark:border-white/[0.04] rounded-lg text-gray-900 dark:text-text-primary placeholder-gray-400 dark:placeholder-text-tertiary focus:outline-none focus:ring-2 focus:ring-brand-violet focus:border-transparent transition-all";
-  const buttonSecondaryClass = "flex items-center space-x-1.5 px-3 py-1.5 text-xs font-medium rounded-lg border transition-all";
-  const tagClass = "inline-flex items-center px-2.5 py-1 bg-gray-100 text-gray-700 dark:bg-white/[0.04] dark:text-text-secondary border-transparent rounded-md text-sm border border-black/[0.06] dark:border-white/[0.04] dark:border-white/[0.04]";
+  // Unified card styles with enhanced light mode optimization
+  const sectionClass = "p-5 bg-white dark:bg-panel-dark rounded-xl border border-gray-200/80 dark:border-white/[0.04] shadow-sm";
+  const labelClass = "flex items-center space-x-2 text-[13px] font-medium text-gray-900 dark:text-text-primary mb-3";
+  const inputClass = "w-full px-4 py-3 bg-gray-50/50 dark:bg-white/[0.04] border border-gray-200 dark:border-white/[0.04] rounded-xl text-gray-900 dark:text-text-primary placeholder-gray-400 dark:placeholder-text-tertiary focus:outline-none focus:ring-2 focus:ring-brand-violet/30 focus:border-brand-violet dark:focus:ring-brand-violet/50 dark:focus:border-brand-violet transition-all duration-200 hover:bg-gray-100/50 dark:hover:bg-white/[0.06] hover:border-gray-300 dark:hover:border-white/[0.08] text-[13px] leading-[1.625]";
+  const textareaClass = `${inputClass} resize-y min-h-[120px] max-h-[400px] overflow-y-auto scrollbar-auto`;
+  const buttonSecondaryClass = "flex items-center space-x-1.5 px-3 py-1.5 text-xs font-medium rounded-lg border transition-all duration-200";
+  const tagClass = "inline-flex items-center px-2.5 py-1 bg-gray-100 text-gray-700 dark:bg-white/[0.04] dark:text-text-secondary rounded-md text-sm border border-gray-200/80 dark:border-white/[0.04]";
+  const infoBoxClass = "mt-3 p-3.5 bg-gradient-to-br from-gray-50 to-white dark:from-white/[0.02] dark:to-white/[0.04] border border-gray-200/80 dark:border-white/[0.04] rounded-xl text-[12px] leading-[1.5] transition-all duration-200";
+  const infoTextClass = "text-gray-700 dark:text-text-secondary flex items-start";
 
   return (
     <Modal
@@ -678,16 +681,16 @@ export const RepositoryEditModal: React.FC<RepositoryEditModalProps> = ({
               setFormData(prev => ({ ...prev, description: e.target.value }));
               setEditIntent(prev => ({ ...prev, description: 'keep-custom' }));
             }}
-            className={`${inputClass} resize-none`}
-            rows={3}
+            className={textareaClass}
+            rows={5}
             placeholder={t('输入自定义描述...', 'Enter custom description...')}
           />
 
-          {/* Save Effect Info - always visible */}
+          {/* Save Effect Info - Enhanced for Light Mode */}
           {editIntent.description === 'clear' ? (
-            <div className="mt-3 p-3 bg-light-surface dark:bg-white/[0.04] border border-black/[0.06] dark:border-white/[0.04] rounded-lg">
-              <p className="text-xs text-gray-700 dark:text-text-secondary dark:text-status-red flex items-start">
-                <AlertTriangle className="w-4 h-4 mr-1.5 mt-0.5 flex-shrink-0" />
+            <div className={infoBoxClass}>
+              <p className={`${infoTextClass} text-status-red`}>
+                <AlertTriangle className="w-4 h-4 mr-2 mt-0.5 flex-shrink-0" />
                 <span>
                   {t(
                     '描述已清空，保存后将显示"（无描述）"。即使有AI总结或原始描述也不会显示。',
@@ -697,9 +700,9 @@ export const RepositoryEditModal: React.FC<RepositoryEditModalProps> = ({
               </p>
             </div>
           ) : editIntent.description === 'reset-to-ai' ? (
-            <div className="mt-3 p-3 bg-light-surface dark:bg-white/[0.04] border border-black/[0.06] dark:border-white/[0.04] rounded-lg">
-              <p className="text-xs text-gray-700 dark:text-text-secondary dark:text-brand-violet flex items-start">
-                <Bot className="w-4 h-4 mr-1.5 mt-0.5 flex-shrink-0" />
+            <div className={infoBoxClass}>
+              <p className={`${infoTextClass} text-brand-violet`}>
+                <Bot className="w-4 h-4 mr-2 mt-0.5 flex-shrink-0" />
                 <span>
                   {t(
                     '保存后将清除自定义描述，显示AI总结。如果AI重新分析，描述可能随之变化。',
@@ -709,9 +712,9 @@ export const RepositoryEditModal: React.FC<RepositoryEditModalProps> = ({
               </p>
             </div>
           ) : editIntent.description === 'reset-to-original' ? (
-            <div className="mt-3 p-3 bg-light-bg dark:bg-white/[0.04] border border-black/[0.06] dark:border-white/[0.04] rounded-lg">
-              <p className="text-xs text-gray-700 dark:text-text-secondary flex items-start">
-                <FileText className="w-4 h-4 mr-1.5 mt-0.5 flex-shrink-0" />
+            <div className={infoBoxClass}>
+              <p className={infoTextClass}>
+                <FileText className="w-4 h-4 mr-2 mt-0.5 flex-shrink-0" />
                 <span>
                   {t(
                     '保存后将清除自定义描述，显示GitHub原始描述。',
@@ -721,9 +724,9 @@ export const RepositoryEditModal: React.FC<RepositoryEditModalProps> = ({
               </p>
             </div>
           ) : editIntent.description === 'keep-custom' && (formData.description || '').trim() === '' ? (
-            <div className="mt-3 p-3 bg-light-surface dark:bg-white/[0.04] border border-black/[0.06] dark:border-white/[0.04] rounded-lg">
-              <p className="text-xs text-gray-700 dark:text-text-secondary dark:text-status-amber flex items-start">
-                <AlertTriangle className="w-4 h-4 mr-1.5 mt-0.5 flex-shrink-0" />
+            <div className={infoBoxClass}>
+              <p className={`${infoTextClass} text-status-amber`}>
+                <AlertTriangle className="w-4 h-4 mr-2 mt-0.5 flex-shrink-0" />
                 <span>
                   {repository?.ai_summary
                     ? t('当前编辑为空，保存后将显示AI总结。如需清空请点击"清除描述"。', 'Currently empty. AI summary will be shown after saving. Click "Clear" to explicitly clear.')
@@ -734,9 +737,9 @@ export const RepositoryEditModal: React.FC<RepositoryEditModalProps> = ({
               </p>
             </div>
           ) : editIntent.description === 'keep-custom' && customStatus.description ? (
-            <div className="mt-3 p-3 bg-light-surface dark:bg-white/[0.04] border border-black/[0.06] dark:border-white/[0.04] rounded-lg">
-              <p className="text-xs text-gray-700 dark:text-text-secondary dark:text-brand-violet flex items-start">
-                <Info className="w-4 h-4 mr-1.5 mt-0.5 flex-shrink-0" />
+            <div className={infoBoxClass}>
+              <p className={`${infoTextClass} text-brand-violet`}>
+                <Info className="w-4 h-4 mr-2 mt-0.5 flex-shrink-0" />
                 <span>
                   {t(
                     '保存后将使用此自定义描述，优先级高于AI总结和原始描述。',
@@ -746,9 +749,9 @@ export const RepositoryEditModal: React.FC<RepositoryEditModalProps> = ({
               </p>
             </div>
           ) : editIntent.description === 'keep-custom' && formData.description.trim() !== '' && !customStatus.description ? (
-            <div className="mt-3 p-3 bg-light-bg dark:bg-white/[0.04] border border-black/[0.06] dark:border-white/[0.04] rounded-lg">
-              <p className="text-xs text-gray-700 dark:text-text-secondary flex items-start">
-                <Info className="w-4 h-4 mr-1.5 mt-0.5 flex-shrink-0" />
+            <div className={infoBoxClass}>
+              <p className={infoTextClass}>
+                <Info className="w-4 h-4 mr-2 mt-0.5 flex-shrink-0" />
                 <span>
                   {t(
                     '当前内容与AI总结或原始描述一致，保存后将使用自动推断的来源。',
@@ -809,10 +812,10 @@ export const RepositoryEditModal: React.FC<RepositoryEditModalProps> = ({
             </button>
           </div>
 
-          {/* Feature Tip */}
-          <div className="mt-3 p-3 bg-light-bg dark:bg-white/[0.04] border border-black/[0.04] dark:border-white/[0.04] rounded-lg">
-            <p className="text-[11px] text-gray-500 dark:text-text-secondary flex items-start">
-              <Info className="w-3.5 h-3.5 mr-1.5 mt-0.5 flex-shrink-0 text-gray-400 dark:text-text-tertiary" />
+          {/* Feature Tip - Enhanced */}
+          <div className={`${infoBoxClass} bg-gradient-to-br from-blue-50/30 to-indigo-50/20 dark:from-transparent dark:to-transparent`}>
+            <p className="text-[11px] text-gray-600 dark:text-text-secondary flex items-start">
+              <Info className="w-3.5 h-3.5 mr-2 mt-0.5 flex-shrink-0 text-gray-400 dark:text-text-tertiary" />
               <span>
                 {t(
                   '描述优先级：自定义描述 > AI总结 > 原始描述。"重置"会清除自定义并回退到对应来源，"清除"会明确清空描述（不显示任何来源）。',
@@ -906,11 +909,11 @@ export const RepositoryEditModal: React.FC<RepositoryEditModalProps> = ({
             </button>
           </div>
 
-          {/* Custom Category Selection Info */}
+          {/* Custom Category Selection Info - Enhanced */}
           {editIntent.category === 'keep-custom' && formData.category && (
-            <div className="mt-3 p-3 bg-light-surface dark:bg-white/[0.04] border border-black/[0.06] dark:border-white/[0.04] rounded-lg">
-              <p className="text-xs text-gray-700 dark:text-text-secondary dark:text-brand-violet flex items-start">
-                <Info className="w-4 h-4 mr-1.5 mt-0.5 flex-shrink-0" />
+            <div className={infoBoxClass}>
+              <p className={`${infoTextClass} text-brand-violet`}>
+                <Info className="w-4 h-4 mr-2 mt-0.5 flex-shrink-0" />
                 <span>
                   {t(
                     '已选择自定义分类。保存后仓库将固定显示在此分类中，不会随AI分析结果自动变化。建议同时开启分类锁定以防止同步时被覆盖。',
@@ -921,11 +924,11 @@ export const RepositoryEditModal: React.FC<RepositoryEditModalProps> = ({
             </div>
           )}
 
-          {/* Reset Category Info */}
+          {/* Reset Category Info - Enhanced */}
           {editIntent.category === 'reset-to-ai' && (
-            <div className="mt-3 p-3 bg-light-surface dark:bg-white/[0.04] border border-black/[0.06] dark:border-white/[0.04] rounded-lg">
-              <p className="text-xs text-gray-700 dark:text-text-secondary dark:text-brand-violet flex items-start">
-                <Info className="w-4 h-4 mr-1.5 mt-0.5 flex-shrink-0" />
+            <div className={infoBoxClass}>
+              <p className={`${infoTextClass} text-brand-violet`}>
+                <Info className="w-4 h-4 mr-2 mt-0.5 flex-shrink-0" />
                 <span>
                   {t(
                     '重置为AI分类将清除自定义分类设置，系统会根据AI标签自动推断分类。如果AI标签变化，分类可能会随之改变。',
@@ -937,9 +940,9 @@ export const RepositoryEditModal: React.FC<RepositoryEditModalProps> = ({
           )}
 
           {editIntent.category === 'reset-to-original' && (
-            <div className="mt-3 p-3 bg-light-bg dark:bg-white/[0.04] border border-black/[0.06] dark:border-white/[0.04] rounded-lg">
-              <p className="text-xs text-gray-700 dark:text-text-secondary flex items-start">
-                <Info className="w-4 h-4 mr-1.5 mt-0.5 flex-shrink-0" />
+            <div className={infoBoxClass}>
+              <p className={infoTextClass}>
+                <Info className="w-4 h-4 mr-2 mt-0.5 flex-shrink-0" />
                 <span>
                   {t(
                     '重置为默认分类将清除自定义分类设置，系统会根据仓库信息（名称、描述、语言等）自动匹配分类。',
@@ -950,11 +953,11 @@ export const RepositoryEditModal: React.FC<RepositoryEditModalProps> = ({
             </div>
           )}
 
-          {/* Clear Category Warning */}
+          {/* Clear Category Warning - Enhanced */}
           {editIntent.category === 'clear' && (
-            <div className="mt-3 p-3 bg-light-surface dark:bg-white/[0.04] border border-black/[0.06] dark:border-white/[0.04] rounded-lg">
-              <p className="text-xs text-gray-700 dark:text-text-secondary dark:text-status-red flex items-start">
-                <AlertTriangle className="w-4 h-4 mr-1.5 mt-0.5 flex-shrink-0" />
+            <div className={infoBoxClass}>
+              <p className={`${infoTextClass} text-status-red`}>
+                <AlertTriangle className="w-4 h-4 mr-2 mt-0.5 flex-shrink-0" />
                 <span>
                   {t(
                     '清除分类后，仓库将不再有明确的分类归属。系统会尝试根据AI标签自动匹配分类，如果没有匹配到则可能显示在默认分类中。',
@@ -965,8 +968,8 @@ export const RepositoryEditModal: React.FC<RepositoryEditModalProps> = ({
             </div>
           )}
 
-          {/* Category Lock */}
-          <div className="mt-4 p-4 bg-gray-100 dark:bg-white/[0.04] dark:bg-status-amber/10 rounded-lg border border-black/[0.06] dark:border-white/[0.04] dark:border-status-amber/20">
+          {/* Category Lock - Enhanced */}
+          <div className="mt-4 p-4 bg-gradient-to-br from-gray-50 to-gray-100/50 dark:from-white/[0.04] dark:to-status-amber/10 rounded-xl border border-gray-200/80 dark:border-white/[0.04] dark:border-status-amber/20 shadow-sm">
             <div className="flex items-start space-x-3">
               <div className="flex-shrink-0 mt-0.5">
                 {formData.categoryLocked && formData.category ? (
@@ -1097,38 +1100,38 @@ export const RepositoryEditModal: React.FC<RepositoryEditModalProps> = ({
             </button>
           </div>
 
-          {/* Status Alert */}
+          {/* Status Alert - Enhanced */}
           {formData.tags.length === 0 && (
-            <div className="mb-4 p-3 bg-light-surface dark:bg-white/[0.04] border border-black/[0.06] dark:border-white/[0.04] rounded-lg">
-              <p className="text-xs text-gray-700 dark:text-text-secondary dark:text-status-amber flex items-center">
+            <div className={`${infoBoxClass} mb-4`}>
+              <p className={`${infoTextClass} flex items-center`}>
                 {editIntent.tags === 'clear' ? (
                   <>
-                    <span className="mr-1">⚠️</span>
+                    <span className="mr-2">⚠️</span>
                     {t('标签已清空。保存后将不显示任何标签。', 'Tags cleared. No tags will be shown after saving.')}
                   </>
                 ) : editIntent.tags === 'reset-to-ai' ? (
                   <>
-                    <span className="mr-1 text-status-emerald">✓</span>
+                    <span className="mr-2 text-status-emerald">✓</span>
                     {t('将显示AI标签。', 'AI tags will be shown.')}
                   </>
                 ) : editIntent.tags === 'reset-to-original' ? (
                   <>
-                    <span className="mr-1 text-status-emerald">✓</span>
+                    <span className="mr-2 text-status-emerald">✓</span>
                     {t('将显示GitHub Topics。', 'GitHub Topics will be shown.')}
                   </>
                 ) : repository?.ai_tags && repository.ai_tags.length > 0 ? (
                   <>
-                    <span className="mr-1">⚠️</span>
+                    <span className="mr-2">⚠️</span>
                     {t('当前无自定义标签。保存后将显示AI标签。', 'No custom tags. AI tags will be shown after saving.')}
                   </>
                 ) : repository?.topics && repository.topics.length > 0 ? (
                   <>
-                    <span className="mr-1">⚠️</span>
+                    <span className="mr-2">⚠️</span>
                     {t('当前无自定义标签。保存后将显示GitHub Topics。', 'No custom tags. GitHub Topics will be shown after saving.')}
                   </>
                 ) : (
                   <>
-                    <span className="mr-1">⚠️</span>
+                    <span className="mr-2">⚠️</span>
                     {t('无可用标签。', 'No tags available.')}
                   </>
                 )}
@@ -1160,17 +1163,17 @@ export const RepositoryEditModal: React.FC<RepositoryEditModalProps> = ({
 
         </div>
 
-        {/* Action Buttons */}
-        <div className="flex justify-end space-x-3 pt-4 border-t border-black/[0.06] dark:border-white/[0.04]">
+        {/* Action Buttons - Enhanced */}
+        <div className="flex justify-end space-x-3 pt-4 border-t border-gray-200/80 dark:border-white/[0.04]">
           <button
             onClick={(e) => {
               e.stopPropagation();
               handleCloseWithConfirm();
             }}
-            className="flex items-center space-x-2 px-4 py-2 text-gray-900 dark:text-text-primary bg-light-surface dark:bg-white/[0.04] rounded-lg hover:bg-gray-200 dark:hover:bg-white/10 dark:border dark:border-white/[0.04] transition-colors"
+            className="flex items-center space-x-2 px-4 py-2.5 text-gray-700 dark:text-text-primary bg-white dark:bg-white/[0.04] rounded-xl hover:bg-gray-100 dark:hover:bg-white/10 border border-gray-200 dark:border-white/[0.04] transition-all duration-200 shadow-sm"
           >
             <X className="w-4 h-4" />
-            <span>{t('取消', 'Cancel')}</span>
+            <span className="font-medium">{t('取消', 'Cancel')}</span>
           </button>
           <button
             onClick={(e) => {
@@ -1178,7 +1181,7 @@ export const RepositoryEditModal: React.FC<RepositoryEditModalProps> = ({
               void handleSave();
             }}
             disabled={!hasChanges}
-            className="flex items-center space-x-2 px-4 py-2 bg-brand-indigo text-white rounded-lg hover:bg-brand-hover  disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+            className="flex items-center space-x-2 px-5 py-2.5 bg-brand-indigo text-white rounded-xl hover:bg-brand-hover disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 shadow-sm font-medium"
           >
             <Save className="w-4 h-4" />
             <span>{t('保存', 'Save')}</span>
diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx
index 4711065d..21985539 100644
--- a/src/components/SearchBar.tsx
+++ b/src/components/SearchBar.tsx
@@ -50,7 +50,7 @@ const SortByDropdown: React.FC<SortByDropdownProps> = ({ value, onChange, t }) =
       </button>
 
       {isOpen && (
-        <div className="absolute left-0 top-full mt-1 w-48 bg-white dark:bg-panel-dark rounded-xl border border-black/[0.06] dark:border-white/[0.04] shadow-lg py-1 z-50 overflow-hidden">
+        <div className="absolute left-0 top-full mt-1 w-48 bg-white dark:bg-panel-dark rounded-xl border border-black/[0.06] dark:border-white/[0.04] shadow-lg py-1 z-40 overflow-hidden">
           {sortOptions.map((option) => (
             <button
               key={option.value}
@@ -802,7 +802,7 @@ export const SearchBar: React.FC = () => {
   return (
     <div className="bg-white dark:bg-panel-dark rounded-xl border border-black/[0.06] dark:border-white/[0.04] p-4 sm:p-6 mb-6">
       {/* Search Input */}
-      <div className="relative mb-4">
+      <div className="relative mb-4 z-40">
         <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-text-quaternary w-5 h-5" />
         <input
           ref={searchInputRef}
@@ -899,20 +899,20 @@ export const SearchBar: React.FC = () => {
           </button>
           <div className="group relative">
             <AlertCircle className="w-4 h-4 text-gray-400 dark:text-text-quaternary cursor-help" />
-            <div className="absolute right-0 top-full mt-2 w-64 p-3 bg-gray-800 text-white text-xs rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all z-50">
-              <p className="font-medium mb-1">{t('关于AI搜索', 'About AI Search')}</p>
-              <p className="text-gray-300">
-                {activeAIConfig
-                  ? t(
-                      '已配置AI服务时，将调用AI进行语义搜索和智能重排序。未配置时使用本地算法根据仓库名称、描述、标签等多维度进行匹配和排序。',
-                      'When AI service is configured, it will be called for semantic search and intelligent reranking. Otherwise, local algorithms are used to match and rank based on repository name, description, tags, and other dimensions.'
-                    )
-                  : t(
-                      '此功能使用本地算法进行智能排序。配置AI服务后可启用语义搜索功能，获得更精准的搜索结果。',
-                      'This feature uses local algorithms for intelligent ranking. Configure an AI service to enable semantic search for more accurate results.'
-                    )}
+            <div className="absolute right-0 top-full mt-2 w-80 max-w-xs p-3 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 text-gray-900 dark:text-white text-xs rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all z-[9999] whitespace-normal break-words">
+              <p className="font-medium mb-1 text-gray-900 dark:text-white">
+                {t('关于AI搜索', 'About AI Search')}
               </p>
-              <div className="absolute bottom-full right-2 w-2 h-2 bg-gray-800 transform rotate-45"></div>
+              <p className="text-gray-600 dark:text-gray-300 leading-relaxed">
+                {activeAIConfig ? t(
+                  'AI语义搜索模式：使用配置的AI服务进行智能语义理解和重排序。AI将分析查询意图，理解上下文关系，并提供语义相关的搜索结果。支持自然语言查询和概念匹配。',
+                  'AI semantic search mode: Uses configured AI service for intelligent semantic understanding and reranking. AI analyzes query intent, understands context, and provides semantically relevant results. Supports natural language queries and concept matching.'
+                ) : t(
+                  '回退模式：基础文本搜索与默认排序。当未配置AI服务时，系统将使用基础文本匹配进行搜索（支持名称、描述、标签、语言等字段），并应用标准的排序和过滤控制。此为轻量级搜索方案，无语义理解能力。',
+                  'Fallback mode: Basic text search with default sorting. When no AI service is configured, the system uses basic text matching for search (supports name, description, tags, language, etc.) and applies standard sort and filter controls. This is a lightweight search solution without semantic understanding capabilities.'
+                )}
+              </p>
+              <div className="absolute bottom-full right-4 w-2 h-2 bg-white dark:bg-gray-800 border-l border-t border-gray-200 dark:border-gray-700 transform rotate-45"></div>
             </div>
           </div>
         </div>
@@ -975,7 +975,7 @@ export const SearchBar: React.FC = () => {
         </div>
 
         {/* Sort Controls */}
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-2 relative z-30">
           <SortByDropdown
             value={searchFilters.sortBy}
             onChange={(value) => setSearchFilters({ sortBy: value as 'stars' | 'updated' | 'name' | 'starred' })}
diff --git a/src/index.css b/src/index.css
index e6e93b22..72f785bf 100644
--- a/src/index.css
+++ b/src/index.css
@@ -855,3 +855,106 @@
 option {
   @apply bg-white dark:bg-panel-dark text-gray-900 dark:text-text-primary;
 }
+
+/* ========== Enhanced Text Area & Input Styles for Light Mode ========== */
+
+/* Optimized text selection colors for better readability */
+::selection {
+  background-color: rgba(94, 106, 210, 0.2);
+  color: inherit;
+}
+
+.dark ::selection {
+  background-color: rgba(113, 112, 255, 0.3);
+}
+
+/* Enhanced focus states for form elements */
+textarea:focus,
+input:focus,
+select:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(94, 106, 210, 0.1);
+}
+
+.dark textarea:focus,
+.dark input:focus,
+.dark select:focus {
+  box-shadow: 0 0 0 3px rgba(113, 112, 255, 0.15);
+}
+
+/* Smooth scrolling for text areas */
+textarea {
+  scroll-behavior: smooth;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* Enhanced scrollbar styling for WebKit browsers */
+textarea::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+textarea::-webkit-scrollbar-track {
+  background: transparent;
+  border-radius: 4px;
+  margin: 4px 0;
+}
+
+textarea::-webkit-scrollbar-thumb {
+  background: rgba(156, 163, 175, 0.4);
+  border-radius: 4px;
+  border: 2px solid transparent;
+  background-clip: padding-box;
+  transition: background-color 0.2s ease;
+}
+
+textarea::-webkit-scrollbar-thumb:hover {
+  background: rgba(156, 163, 175, 0.6);
+}
+
+.dark textarea::-webkit-scrollbar-thumb {
+  background: rgba(75, 85, 99, 0.4);
+}
+
+.dark textarea::-webkit-scrollbar-thumb:hover {
+  background: rgba(75, 85, 99, 0.6);
+}
+
+/* Textarea resize handle styling */
+textarea::-webkit-resizer {
+  background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 1L1 9M9 5L5 9M9 9L9 9' stroke='%239CA3AF' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right bottom;
+  cursor: se-resize;
+}
+
+.dark textarea::-webkit-resizer {
+  background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 1L1 9M9 5L5 9M9 9L9 9' stroke='%234B5563' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
+}
+
+/* Enhanced placeholder styling */
+::placeholder {
+  color: #9ca3af;
+  opacity: 1;
+}
+
+.dark ::placeholder {
+  color: #8a8f98;
+}
+
+/* Responsive text sizing for better readability */
+@media (max-width: 768px) {
+  textarea,
+  input[type="text"] {
+    font-size: 16px; /* Prevent iOS zoom */
+  }
+}
+
+/* Print-friendly styles */
+@media print {
+  textarea,
+  input {
+    border: 1px solid #000;
+    box-shadow: none;
+  }
+}
diff --git a/src/store/useAppStore.ts b/src/store/useAppStore.ts
index 9912a231..e06afd63 100644
--- a/src/store/useAppStore.ts
+++ b/src/store/useAppStore.ts
@@ -145,6 +145,9 @@ interface AppActions {
   setLanguage: (language: 'zh' | 'en') => void;
   setSidebarCollapsed: (collapsed: boolean) => void;
   setReadmeModalOpen: (open: boolean) => void;
+
+  // Hydration state
+  setHasHydrated: (hydrated: boolean) => void;
   
   // Update actions
   setUpdateNotification: (notification: UpdateNotification | null) => void;
@@ -643,6 +646,7 @@ export const useAppStore = create<AppState & AppActions>()(
       collapsedSidebarCategoryCount: 20,
       assetFilters: defaultPresetFilters,
       theme: 'dark',
+      hasHydrated: false,
       currentView: 'repositories',
       selectedCategory: 'all',
       language: 'zh',
@@ -1150,6 +1154,9 @@ export const useAppStore = create<AppState & AppActions>()(
       setLanguage: (language) => set({ language }),
       setSidebarCollapsed: (isSidebarCollapsed) => set({ isSidebarCollapsed }),
       setReadmeModalOpen: (readmeModalOpen) => set({ readmeModalOpen }),
+
+      // Hydration state
+      setHasHydrated: (hasHydrated) => set({ hasHydrated }),
       
       // Update actions
       setUpdateNotification: (notification) => set({ updateNotification: notification }),
@@ -1488,6 +1495,14 @@ export const useAppStore = create<AppState & AppActions>()(
           ...normalized,
         };
       },
+      onRehydrateStorage: (state) => (_rehydratedState, error) => {
+        if (error) {
+          console.error('Store hydration failed', error);
+        } else {
+          console.log('Store hydration complete');
+        }
+        state.setHasHydrated(true);
+      },
     }
   )
 );