diff --git a/src/App.jsx b/src/App.jsx
index 3ded1e6..2be8595 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -26,6 +26,7 @@ import MainContent from './components/MainContent';
 import MobileNav from './components/MobileNav';
 import Settings from './components/Settings';
 import QuickSettingsPanel from './components/QuickSettingsPanel';
+import VersionUpgradeModal from './components/modals/VersionUpgradeModal';
 
 import { ThemeProvider } from './contexts/ThemeContext';
 import { AuthProvider } from './contexts/AuthContext';
@@ -580,202 +581,6 @@ function AppContent() {
     }
   }, []);
 
-  // Version Upgrade Modal Component
-  const VersionUpgradeModal = () => {
-    const { t } = useTranslation('common');
-    const [isUpdating, setIsUpdating] = useState(false);
-    const [updateOutput, setUpdateOutput] = useState('');
-    const [updateError, setUpdateError] = useState('');
-
-    if (!showVersionModal) return null;
-
-    // Clean up changelog by removing GitHub-specific metadata
-    const cleanChangelog = (body) => {
-      if (!body) return '';
-
-      return body
-        // Remove full commit hashes (40 character hex strings)
-        .replace(/\b[0-9a-f]{40}\b/gi, '')
-        // Remove short commit hashes (7-10 character hex strings at start of line or after dash/space)
-        .replace(/(?:^|\s|-)([0-9a-f]{7,10})\b/gi, '')
-        // Remove "Full Changelog" links
-        .replace(/\*\*Full Changelog\*\*:.*$/gim, '')
-        // Remove compare links (e.g., https://github.com/.../compare/v1.0.0...v1.0.1)
-        .replace(/https?:\/\/github\.com\/[^\/]+\/[^\/]+\/compare\/[^\s)]+/gi, '')
-        // Clean up multiple consecutive empty lines
-        .replace(/\n\s*\n\s*\n/g, '\n\n')
-        // Trim whitespace
-        .trim();
-    };
-
-    const handleUpdateNow = async () => {
-      setIsUpdating(true);
-      setUpdateOutput('Starting update...\n');
-      setUpdateError('');
-
-      try {
-        // Call the backend API to run the update command
-        const response = await authenticatedFetch('/api/system/update', {
-          method: 'POST',
-        });
-
-        const data = await response.json();
-
-        if (response.ok) {
-          setUpdateOutput(prev => prev + data.output + '\n');
-          setUpdateOutput(prev => prev + '\n✅ Update completed successfully!\n');
-          setUpdateOutput(prev => prev + 'Please restart the server to apply changes.\n');
-        } else {
-          setUpdateError(data.error || 'Update failed');
-          setUpdateOutput(prev => prev + '\n❌ Update failed: ' + (data.error || 'Unknown error') + '\n');
-        }
-      } catch (error) {
-        setUpdateError(error.message);
-        setUpdateOutput(prev => prev + '\n❌ Update failed: ' + error.message + '\n');
-      } finally {
-        setIsUpdating(false);
-      }
-    };
-
-    return (
-      <div className="fixed inset-0 z-50 flex items-center justify-center">
-        {/* Backdrop */}
-        <button
-          className="fixed inset-0 bg-black/50 backdrop-blur-sm"
-          onClick={() => setShowVersionModal(false)}
-          aria-label={t('versionUpdate.ariaLabels.closeModal')}
-        />
-
-        {/* Modal */}
-        <div className="relative bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 w-full max-w-2xl mx-4 p-6 space-y-4 max-h-[90vh] overflow-y-auto">
-          {/* Header */}
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-3">
-              <div className="w-10 h-10 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center">
-                <svg className="w-5 h-5 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10" />
-                </svg>
-              </div>
-              <div>
-                <h2 className="text-lg font-semibold text-gray-900 dark:text-white">{t('versionUpdate.title')}</h2>
-                <p className="text-sm text-gray-500 dark:text-gray-400">
-                  {releaseInfo?.title || t('versionUpdate.newVersionReady')}
-                </p>
-              </div>
-            </div>
-            <button
-              onClick={() => setShowVersionModal(false)}
-              className="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"
-            >
-              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-              </svg>
-            </button>
-          </div>
-
-          {/* Version Info */}
-          <div className="space-y-3">
-            <div className="flex justify-between items-center p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
-              <span className="text-sm font-medium text-gray-700 dark:text-gray-300">{t('versionUpdate.currentVersion')}</span>
-              <span className="text-sm text-gray-900 dark:text-white font-mono">{currentVersion}</span>
-            </div>
-            <div className="flex justify-between items-center p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-700">
-              <span className="text-sm font-medium text-blue-700 dark:text-blue-300">{t('versionUpdate.latestVersion')}</span>
-              <span className="text-sm text-blue-900 dark:text-blue-100 font-mono">{latestVersion}</span>
-            </div>
-          </div>
-
-          {/* Changelog */}
-          {releaseInfo?.body && (
-            <div className="space-y-3">
-              <div className="flex items-center justify-between">
-                <h3 className="text-sm font-medium text-gray-900 dark:text-white">{t('versionUpdate.whatsNew')}</h3>
-                {releaseInfo?.htmlUrl && (
-                  <a
-                    href={releaseInfo.htmlUrl}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="text-xs text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 hover:underline flex items-center gap-1"
-                  >
-                    {t('versionUpdate.viewFullRelease')}
-                    <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
-                    </svg>
-                  </a>
-                )}
-              </div>
-              <div className="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4 border border-gray-200 dark:border-gray-600 max-h-64 overflow-y-auto">
-                <div className="text-sm text-gray-700 dark:text-gray-300 whitespace-pre-wrap prose prose-sm dark:prose-invert max-w-none">
-                  {cleanChangelog(releaseInfo.body)}
-                </div>
-              </div>
-            </div>
-          )}
-
-          {/* Update Output */}
-          {updateOutput && (
-            <div className="space-y-2">
-              <h3 className="text-sm font-medium text-gray-900 dark:text-white">{t('versionUpdate.updateProgress')}</h3>
-              <div className="bg-gray-900 dark:bg-gray-950 rounded-lg p-4 border border-gray-700 max-h-48 overflow-y-auto">
-                <pre className="text-xs text-green-400 font-mono whitespace-pre-wrap">{updateOutput}</pre>
-              </div>
-            </div>
-          )}
-
-          {/* Upgrade Instructions */}
-          {!isUpdating && !updateOutput && (
-            <div className="space-y-3">
-              <h3 className="text-sm font-medium text-gray-900 dark:text-white">{t('versionUpdate.manualUpgrade')}</h3>
-              <div className="bg-gray-100 dark:bg-gray-800 rounded-lg p-3 border">
-                <code className="text-sm text-gray-800 dark:text-gray-200 font-mono">
-                  git checkout main && git pull && npm install
-                </code>
-              </div>
-              <p className="text-xs text-gray-600 dark:text-gray-400">
-                {t('versionUpdate.manualUpgradeHint')}
-              </p>
-            </div>
-          )}
-
-          {/* Actions */}
-          <div className="flex gap-2 pt-2">
-            <button
-              onClick={() => setShowVersionModal(false)}
-              className="flex-1 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-md transition-colors"
-            >
-              {updateOutput ? t('versionUpdate.buttons.close') : t('versionUpdate.buttons.later')}
-            </button>
-            {!updateOutput && (
-              <>
-                <button
-                  onClick={() => {
-                    navigator.clipboard.writeText('git checkout main && git pull && npm install');
-                  }}
-                  className="flex-1 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-md transition-colors"
-                >
-                  {t('versionUpdate.buttons.copyCommand')}
-                </button>
-                <button
-                  onClick={handleUpdateNow}
-                  disabled={isUpdating}
-                  className="flex-1 px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 disabled:cursor-not-allowed rounded-md transition-colors flex items-center justify-center gap-2"
-                >
-                  {isUpdating ? (
-                    <>
-                      <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
-                      {t('versionUpdate.buttons.updating')}
-                    </>
-                  ) : (
-                    t('versionUpdate.buttons.updateNow')
-                  )}
-                </button>
-              </>
-            )}
-          </div>
-        </div>
-      </div>
-    );
-  };
 
   return (
     <div className="fixed inset-0 flex bg-background">
@@ -977,7 +782,7 @@ function AppContent() {
       />
 
       {/* Version Upgrade Modal */}
-      <VersionUpgradeModal />
+      <VersionUpgradeModal showVersionModal={showVersionModal} setShowVersionModal={setShowVersionModal}/>
     </div>
   );
 }
diff --git a/src/components/modals/VersionUpgradeModal.tsx b/src/components/modals/VersionUpgradeModal.tsx
new file mode 100644
index 0000000..bb7e459
--- /dev/null
+++ b/src/components/modals/VersionUpgradeModal.tsx
@@ -0,0 +1,206 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { authenticatedFetch } from "../../utils/api";
+import { useVersionCheck } from "../../hooks/useVersionCheck";
+
+interface VersionUpgradeModalProps {
+    showVersionModal: boolean;
+    setShowVersionModal: (show: boolean) => void;
+}
+
+export default function VersionUpgradeModal({ showVersionModal, setShowVersionModal }: VersionUpgradeModalProps) {
+    const { t } = useTranslation('common');
+    const [isUpdating, setIsUpdating] = useState(false);
+    const [updateOutput, setUpdateOutput] = useState('');
+    const [updateError, setUpdateError] = useState('');
+    const { latestVersion, currentVersion, releaseInfo } = useVersionCheck('siteboon', 'claudecodeui');
+
+    if (!showVersionModal) return null;
+
+    const handleUpdateNow = async () => {
+        setIsUpdating(true);
+        setUpdateOutput('Starting update...\n');
+        setUpdateError('');
+
+        try {
+            // Call the backend API to run the update command
+            const response = await authenticatedFetch('/api/system/update', {
+                method: 'POST',
+            });
+
+            const data = await response.json();
+
+            if (response.ok) {
+                setUpdateOutput(prev => prev + data.output + '\n');
+                setUpdateOutput(prev => prev + '\n✅ Update completed successfully!\n');
+                setUpdateOutput(prev => prev + 'Please restart the server to apply changes.\n');
+            } else {
+                setUpdateError(data.error || 'Update failed');
+                setUpdateOutput(prev => prev + '\n❌ Update failed: ' + (data.error || 'Unknown error') + '\n');
+            }
+        } catch (error: any) {
+            setUpdateError(error.message);
+            setUpdateOutput(prev => prev + '\n❌ Update failed: ' + error.message + '\n');
+        } finally {
+            setIsUpdating(false);
+        }
+    };
+
+    return (
+        <div className="fixed inset-0 z-50 flex items-center justify-center">
+            {/* Backdrop */}
+            <button
+                className="fixed inset-0 bg-black/50 backdrop-blur-sm"
+                onClick={() => setShowVersionModal(false)}
+                aria-label={t('versionUpdate.ariaLabels.closeModal')}
+            />
+
+            {/* Modal */}
+            <div className="relative bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 w-full max-w-2xl mx-4 p-6 space-y-4 max-h-[90vh] overflow-y-auto">
+                {/* Header */}
+                <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-3">
+                        <div className="w-10 h-10 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center">
+                            <svg className="w-5 h-5 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10" />
+                            </svg>
+                        </div>
+                        <div>
+                            <h2 className="text-lg font-semibold text-gray-900 dark:text-white">{t('versionUpdate.title')}</h2>
+                            <p className="text-sm text-gray-500 dark:text-gray-400">
+                                {releaseInfo?.title || t('versionUpdate.newVersionReady')}
+                            </p>
+                        </div>
+                    </div>
+                    <button
+                        onClick={() => setShowVersionModal(false)}
+                        className="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"
+                    >
+                        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                        </svg>
+                    </button>
+                </div>
+
+                {/* Version Info */}
+                <div className="space-y-3">
+                    <div className="flex justify-between items-center p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+                        <span className="text-sm font-medium text-gray-700 dark:text-gray-300">{t('versionUpdate.currentVersion')}</span>
+                        <span className="text-sm text-gray-900 dark:text-white font-mono">{currentVersion}</span>
+                    </div>
+                    <div className="flex justify-between items-center p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-700">
+                        <span className="text-sm font-medium text-blue-700 dark:text-blue-300">{t('versionUpdate.latestVersion')}</span>
+                        <span className="text-sm text-blue-900 dark:text-blue-100 font-mono">{latestVersion}</span>
+                    </div>
+                </div>
+
+                {/* Changelog */}
+                {releaseInfo?.body && (
+                    <div className="space-y-3">
+                        <div className="flex items-center justify-between">
+                            <h3 className="text-sm font-medium text-gray-900 dark:text-white">{t('versionUpdate.whatsNew')}</h3>
+                            {releaseInfo?.htmlUrl && (
+                                <a
+                                    href={releaseInfo.htmlUrl}
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    className="text-xs text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 hover:underline flex items-center gap-1"
+                                >
+                                    {t('versionUpdate.viewFullRelease')}
+                                    <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+                                    </svg>
+                                </a>
+                            )}
+                        </div>
+                        <div className="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4 border border-gray-200 dark:border-gray-600 max-h-64 overflow-y-auto">
+                            <div className="text-sm text-gray-700 dark:text-gray-300 whitespace-pre-wrap prose prose-sm dark:prose-invert max-w-none">
+                                {cleanChangelog(releaseInfo.body)}
+                            </div>
+                        </div>
+                    </div>
+                )}
+
+                {/* Update Output */}
+                {updateOutput && (
+                    <div className="space-y-2">
+                        <h3 className="text-sm font-medium text-gray-900 dark:text-white">{t('versionUpdate.updateProgress')}</h3>
+                        <div className="bg-gray-900 dark:bg-gray-950 rounded-lg p-4 border border-gray-700 max-h-48 overflow-y-auto">
+                            <pre className="text-xs text-green-400 font-mono whitespace-pre-wrap">{updateOutput}</pre>
+                        </div>
+                    </div>
+                )}
+
+                {/* Upgrade Instructions */}
+                {!isUpdating && !updateOutput && (
+                    <div className="space-y-3">
+                        <h3 className="text-sm font-medium text-gray-900 dark:text-white">{t('versionUpdate.manualUpgrade')}</h3>
+                        <div className="bg-gray-100 dark:bg-gray-800 rounded-lg p-3 border">
+                            <code className="text-sm text-gray-800 dark:text-gray-200 font-mono">
+                                git checkout main && git pull && npm install
+                            </code>
+                        </div>
+                        <p className="text-xs text-gray-600 dark:text-gray-400">
+                            {t('versionUpdate.manualUpgradeHint')}
+                        </p>
+                    </div>
+                )}
+
+                {/* Actions */}
+                <div className="flex gap-2 pt-2">
+                    <button
+                        onClick={() => setShowVersionModal(false)}
+                        className="flex-1 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-md transition-colors"
+                    >
+                        {updateOutput ? t('versionUpdate.buttons.close') : t('versionUpdate.buttons.later')}
+                    </button>
+                    {!updateOutput && (
+                        <>
+                            <button
+                                onClick={() => {
+                                    navigator.clipboard.writeText('git checkout main && git pull && npm install');
+                                }}
+                                className="flex-1 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-md transition-colors"
+                            >
+                                {t('versionUpdate.buttons.copyCommand')}
+                            </button>
+                            <button
+                                onClick={handleUpdateNow}
+                                disabled={isUpdating}
+                                className="flex-1 px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 disabled:cursor-not-allowed rounded-md transition-colors flex items-center justify-center gap-2"
+                            >
+                                {isUpdating ? (
+                                    <>
+                                        <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
+                                        {t('versionUpdate.buttons.updating')}
+                                    </>
+                                ) : (
+                                    t('versionUpdate.buttons.updateNow')
+                                )}
+                            </button>
+                        </>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+// Clean up changelog by removing GitHub-specific metadata
+const cleanChangelog = (body: string) => {
+    if (!body) return '';
+
+    return body
+        // Remove full commit hashes (40 character hex strings)
+        .replace(/\b[0-9a-f]{40}\b/gi, '')
+        // Remove short commit hashes (7-10 character hex strings at start of line or after dash/space)
+        .replace(/(?:^|\s|-)([0-9a-f]{7,10})\b/gi, '')
+        // Remove "Full Changelog" links
+        .replace(/\*\*Full Changelog\*\*:.*$/gim, '')
+        // Remove compare links (e.g., https://github.com/.../compare/v1.0.0...v1.0.1)
+        .replace(/https?:\/\/github\.com\/[^\/]+\/[^\/]+\/compare\/[^\s)]+/gi, '')
+        // Clean up multiple consecutive empty lines
+        .replace(/\n\s*\n\s*\n/g, '\n\n')
+        // Trim whitespace
+        .trim();
+};
\ No newline at end of file