diff --git a/BitFun-Installer/src-tauri/tauri.conf.json b/BitFun-Installer/src-tauri/tauri.conf.json
index 5a25428a..f57357c9 100644
--- a/BitFun-Installer/src-tauri/tauri.conf.json
+++ b/BitFun-Installer/src-tauri/tauri.conf.json
@@ -32,9 +32,11 @@
       {
         "label": "installer",
         "title": "Install BitFun",
-        "width": 700,
-        "height": 480,
-        "resizable": false,
+        "width": 760,
+        "height": 560,
+        "minWidth": 700,
+        "minHeight": 480,
+        "resizable": true,
         "maximizable": false,
         "decorations": false,
         "center": true
diff --git a/BitFun-Installer/src/pages/LanguageSelect.tsx b/BitFun-Installer/src/pages/LanguageSelect.tsx
index 491e4a74..6a863676 100644
--- a/BitFun-Installer/src/pages/LanguageSelect.tsx
+++ b/BitFun-Installer/src/pages/LanguageSelect.tsx
@@ -8,7 +8,7 @@ interface LanguageSelectProps {
 
 const LANGUAGES = [
   { code: 'en', label: 'English', native: 'English' },
-  { code: 'zh', label: 'Chinese', native: '简体中文' },
+  { code: 'zh', label: 'Chinese', native: '\u7b80\u4f53\u4e2d\u6587' },
 ];
 
 export function LanguageSelect({ onSelect }: LanguageSelectProps) {
@@ -26,7 +26,7 @@ export function LanguageSelect({ onSelect }: LanguageSelectProps) {
 
   return (
     <div style={{
-      flex: 1, display: 'flex', flexDirection: 'row', overflow: 'hidden',
+      flex: 1, minHeight: 0, display: 'flex', flexDirection: 'row', overflow: 'hidden',
     }}>
       <div style={{
         flex: '0 0 42%',
@@ -82,81 +82,84 @@ export function LanguageSelect({ onSelect }: LanguageSelectProps) {
       </div>
 
       <div style={{
-        flex: 1, display: 'flex', flexDirection: 'column',
-        alignItems: 'center', justifyContent: 'center',
-        padding: '24px 32px',
+        flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column',
       }}>
-        <div style={{
-          display: 'flex', flexDirection: 'column', gap: 16,
-          width: '100%', maxWidth: 320,
-          animation: 'fadeIn 0.5s ease-out',
-        }}>
-          <div className="section-label">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <circle cx="12" cy="12" r="10" />
-              <line x1="2" y1="12" x2="22" y2="12" />
-              <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
-            </svg>
-            Select Language / 选择语言
-          </div>
+        <div className="page-scroll" style={{ padding: '24px 32px 18px' }}>
+          <div className="page-container page-container--center" style={{ maxWidth: 320 }}>
+            <div style={{
+              display: 'flex', flexDirection: 'column', gap: 16,
+              width: '100%',
+              animation: 'fadeIn 0.5s ease-out',
+            }}>
+              <div className="section-label">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <circle cx="12" cy="12" r="10" />
+                  <line x1="2" y1="12" x2="22" y2="12" />
+                  <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
+                </svg>
+                Select Language / {'\u9009\u62e9\u8bed\u8a00'}
+              </div>
 
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-            {LANGUAGES.map((lang) => {
-              const isSelected = selected === lang.code;
-              return (
-                <button
-                  key={lang.code}
-                  onClick={() => handleSelect(lang.code)}
-                  style={{
-                    display: 'flex', alignItems: 'center', gap: 12,
-                    padding: '14px 16px', width: '100%',
-                    background: isSelected ? 'rgba(96, 165, 250, 0.14)' : 'rgba(148, 163, 184, 0.08)',
-                    border: 'none',
-                    borderRadius: 'var(--radius-sm)',
-                    cursor: 'pointer', textAlign: 'left',
-                    transition: 'all 0.25s ease',
-                    outline: 'none',
-                    fontFamily: 'var(--font-sans)',
-                    boxShadow: 'none',
-                  }}
-                  onMouseEnter={(e) => {
-                    if (!isSelected) {
-                      e.currentTarget.style.background = 'rgba(148, 163, 184, 0.14)';
-                    }
-                  }}
-                  onMouseLeave={(e) => {
-                    if (!isSelected) {
-                      e.currentTarget.style.background = 'rgba(148, 163, 184, 0.08)';
-                    }
-                  }}
-                >
-                  <div style={{ flex: 1 }}>
-                    <div style={{
-                      fontSize: 14, fontWeight: 500,
-                      color: isSelected ? 'var(--color-text-primary)' : 'var(--color-text-secondary)',
-                      transition: 'color 0.2s ease',
-                    }}>{lang.native}</div>
-                    <div style={{
-                      fontSize: 11,
-                      color: 'var(--color-text-muted)', opacity: 0.7,
-                      marginTop: 2,
-                    }}>{lang.label}</div>
-                  </div>
-                </button>
-              );
-            })}
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+                {LANGUAGES.map((lang) => {
+                  const isSelected = selected === lang.code;
+                  return (
+                    <button
+                      key={lang.code}
+                      onClick={() => handleSelect(lang.code)}
+                      style={{
+                        display: 'flex', alignItems: 'center', gap: 12,
+                        padding: '14px 16px', width: '100%',
+                        background: isSelected ? 'rgba(96, 165, 250, 0.14)' : 'rgba(148, 163, 184, 0.08)',
+                        border: 'none',
+                        borderRadius: 'var(--radius-sm)',
+                        cursor: 'pointer', textAlign: 'left',
+                        transition: 'all 0.25s ease',
+                        outline: 'none',
+                        fontFamily: 'var(--font-sans)',
+                        boxShadow: 'none',
+                      }}
+                      onMouseEnter={(e) => {
+                        if (!isSelected) {
+                          e.currentTarget.style.background = 'rgba(148, 163, 184, 0.14)';
+                        }
+                      }}
+                      onMouseLeave={(e) => {
+                        if (!isSelected) {
+                          e.currentTarget.style.background = 'rgba(148, 163, 184, 0.08)';
+                        }
+                      }}
+                    >
+                      <div style={{ flex: 1 }}>
+                        <div style={{
+                          fontSize: 14, fontWeight: 500,
+                          color: isSelected ? 'var(--color-text-primary)' : 'var(--color-text-secondary)',
+                          transition: 'color 0.2s ease',
+                        }}>{lang.native}</div>
+                        <div style={{
+                          fontSize: 11,
+                          color: 'var(--color-text-muted)', opacity: 0.7,
+                          marginTop: 2,
+                        }}>{lang.label}</div>
+                      </div>
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
           </div>
+        </div>
 
+        <div className="page-footer page-footer--center">
           <button
             className={`btn ${selected ? 'btn-primary' : ''}`}
             onClick={handleContinue}
             disabled={!selected}
             style={{
               justifyContent: 'center',
-              marginTop: 8,
             }}
           >
-            {selected === 'zh' ? '继续' : 'Continue'}
+            {selected === 'zh' ? '\u7ee7\u7eed' : 'Continue'}
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
               <polyline points="9 18 15 12 9 6" />
             </svg>
diff --git a/BitFun-Installer/src/pages/Options.tsx b/BitFun-Installer/src/pages/Options.tsx
index 8b28fcc0..ad07aeef 100644
--- a/BitFun-Installer/src/pages/Options.tsx
+++ b/BitFun-Installer/src/pages/Options.tsx
@@ -61,128 +61,113 @@ export function Options({
   };
 
   return (
-    <div
-      style={{
-        flex: 1,
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'center',
-        padding: '22px 42px 24px',
-        maxWidth: 560,
-        margin: '0 auto',
-        width: '100%',
-        animation: 'fadeIn 0.4s ease-out',
-      }}
-    >
-      <div style={{ marginBottom: 8, fontSize: 12, color: 'var(--color-text-muted)' }}>
-        {t('options.subtitle')}
-      </div>
-      <div style={{ marginBottom: 20 }}>
-        <div className="section-label">
-          <svg
-            width="14"
-            height="14"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          >
-            <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
-          </svg>
-          {t('options.pathLabel')}
-        </div>
-        <div className="input-group">
-          <input
-            className="input"
-            type="text"
-            value={options.installPath}
-            onChange={(e) => setOptions((prev) => ({ ...prev, installPath: e.target.value }))}
-            placeholder={t('options.pathPlaceholder')}
-          />
-          <button
-            className="btn"
-            onClick={handleBrowse}
-            style={{ padding: '10px 14px', flexShrink: 0 }}
-          >
-            {t('options.browse')}
-          </button>
-        </div>
-        {diskSpace && (
-          <div
-            style={{
-              display: 'flex',
-              gap: 16,
-              marginTop: 8,
-              fontSize: 11,
-              color: 'var(--color-text-muted)',
-              opacity: 0.7,
-            }}
-          >
-            <span>{t('options.required')}: {formatBytes(diskSpace.required)}</span>
-            <span>
-              {t('options.available')}:{' '}
-              {diskSpace.available < Number.MAX_SAFE_INTEGER ? formatBytes(diskSpace.available) : '-'}
-            </span>
-            {!diskSpace.sufficient && (
-              <span style={{ color: 'var(--color-error)' }}>{t('options.insufficientSpace')}</span>
-            )}
+    <div className="page-shell">
+      <div className="page-scroll">
+        <div className="page-container page-container--center" style={{ maxWidth: 560 }}>
+          <div style={{ marginBottom: 8, fontSize: 12, color: 'var(--color-text-muted)' }}>
+            {t('options.subtitle')}
           </div>
-        )}
-        {error && (
-          <div
-            style={{
-              marginTop: 10,
-              padding: '10px 12px',
-              borderRadius: 10,
-              border: '1px solid color-mix(in srgb, var(--color-error) 55%, transparent)',
-              background: 'color-mix(in srgb, var(--color-error) 10%, transparent)',
-              color: 'var(--color-text-primary)',
-              fontSize: 12,
-              lineHeight: 1.5,
-            }}
-          >
-            {error}
+          <div style={{ marginBottom: 20 }}>
+            <div className="section-label">
+              <svg
+                width="14"
+                height="14"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
+              </svg>
+              {t('options.pathLabel')}
+            </div>
+            <div className="input-group">
+              <input
+                className="input"
+                type="text"
+                value={options.installPath}
+                onChange={(e) => setOptions((prev) => ({ ...prev, installPath: e.target.value }))}
+                placeholder={t('options.pathPlaceholder')}
+              />
+              <button
+                className="btn"
+                onClick={handleBrowse}
+                style={{ padding: '10px 14px', flexShrink: 0 }}
+              >
+                {t('options.browse')}
+              </button>
+            </div>
+            {diskSpace && (
+              <div
+                style={{
+                  display: 'flex',
+                  gap: 16,
+                  marginTop: 8,
+                  fontSize: 11,
+                  color: 'var(--color-text-muted)',
+                  opacity: 0.7,
+                  flexWrap: 'wrap',
+                }}
+              >
+                <span>{t('options.required')}: {formatBytes(diskSpace.required)}</span>
+                <span>
+                  {t('options.available')}:{' '}
+                  {diskSpace.available < Number.MAX_SAFE_INTEGER ? formatBytes(diskSpace.available) : '-'}
+                </span>
+                {!diskSpace.sufficient && (
+                  <span style={{ color: 'var(--color-error)' }}>{t('options.insufficientSpace')}</span>
+                )}
+              </div>
+            )}
+            {error && (
+              <div
+                style={{
+                  marginTop: 10,
+                  padding: '10px 12px',
+                  borderRadius: 10,
+                  border: '1px solid color-mix(in srgb, var(--color-error) 55%, transparent)',
+                  background: 'color-mix(in srgb, var(--color-error) 10%, transparent)',
+                  color: 'var(--color-text-primary)',
+                  fontSize: 12,
+                  lineHeight: 1.5,
+                }}
+              >
+                {error}
+              </div>
+            )}
           </div>
-        )}
-      </div>
 
-      <div>
-        <div className="section-label">{t('options.optionsLabel')}</div>
-        <div className="checkbox-group stagger-children">
-          <Checkbox
-            checked={options.desktopShortcut}
-            onChange={(value) => update('desktopShortcut', value)}
-            label={t('options.desktopShortcut')}
-          />
-          <Checkbox
-            checked={options.startMenu}
-            onChange={(value) => update('startMenu', value)}
-            label={t('options.startMenu')}
-          />
-          <Checkbox
-            checked={options.contextMenu}
-            onChange={(value) => update('contextMenu', value)}
-            label={t('options.contextMenu')}
-          />
-          <Checkbox
-            checked={options.addToPath}
-            onChange={(value) => update('addToPath', value)}
-            label={t('options.addToPath')}
-          />
+          <div>
+            <div className="section-label">{t('options.optionsLabel')}</div>
+            <div className="checkbox-group stagger-children">
+              <Checkbox
+                checked={options.desktopShortcut}
+                onChange={(value) => update('desktopShortcut', value)}
+                label={t('options.desktopShortcut')}
+              />
+              <Checkbox
+                checked={options.startMenu}
+                onChange={(value) => update('startMenu', value)}
+                label={t('options.startMenu')}
+              />
+              <Checkbox
+                checked={options.contextMenu}
+                onChange={(value) => update('contextMenu', value)}
+                label={t('options.contextMenu')}
+              />
+              <Checkbox
+                checked={options.addToPath}
+                onChange={(value) => update('addToPath', value)}
+                label={t('options.addToPath')}
+              />
+            </div>
+          </div>
         </div>
       </div>
 
-      <div
-        style={{
-          display: 'flex',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          paddingTop: 20,
-          marginTop: 'auto',
-        }}
-      >
+      <div className="page-footer page-footer--split">
         <button className="btn btn-ghost" onClick={onBack}>
           <svg
             width="14"
diff --git a/BitFun-Installer/src/pages/Progress.tsx b/BitFun-Installer/src/pages/Progress.tsx
index 6112df16..b5722e6a 100644
--- a/BitFun-Installer/src/pages/Progress.tsx
+++ b/BitFun-Installer/src/pages/Progress.tsx
@@ -36,65 +36,84 @@ export function ProgressPage({
   const stepLabel = STEP_LABELS[progress.step] || progress.step || t('progress.starting');
 
   return (
-    <div style={{
-      flex: 1, display: 'flex', flexDirection: 'column',
-      alignItems: 'center', justifyContent: 'center', padding: '0 32px',
-    }}>
-      {!error ? (
-        <>
-          <p style={{ fontSize: 16, fontWeight: 600, color: 'var(--color-text-primary)', marginBottom: 6 }}>
-            {t('progress.title')}
-          </p>
-          <p style={{ fontSize: 12, color: 'var(--color-text-muted)', marginBottom: 22 }}>
-            {stepLabel}
-          </p>
-          <div style={{ width: '100%', maxWidth: 320 }}>
-            <ProgressBar percent={progress.percent} completed={isCompleted} />
-            <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 8, fontSize: 11, color: 'var(--color-text-muted)', opacity: 0.7 }}>
-              <span>{stepLabel}</span>
-              <span>{progress.percent}%</span>
-            </div>
-            <div style={{ display: 'flex', justifyContent: 'center', marginTop: 16, minHeight: 28 }}>
-              <button
-                className="btn btn-primary"
-                onClick={onConfirmProgress}
-                disabled={!canConfirmProgress}
-                style={{
-                  justifyContent: 'center',
-                  visibility: canConfirmProgress ? 'visible' : 'hidden',
-                }}
+    <div className="page-shell">
+      <div className="page-scroll">
+        <div
+          className="page-container page-container--center"
+          style={{ maxWidth: 420, alignItems: 'center', textAlign: 'center' }}
+        >
+          {!error ? (
+            <>
+              <p style={{ fontSize: 16, fontWeight: 600, color: 'var(--color-text-primary)', marginBottom: 6 }}>
+                {t('progress.title')}
+              </p>
+              <p style={{ fontSize: 12, color: 'var(--color-text-muted)', marginBottom: 22 }}>
+                {stepLabel}
+              </p>
+              <div style={{ width: '100%', maxWidth: 320 }}>
+                <ProgressBar percent={progress.percent} completed={isCompleted} />
+                <div
+                  style={{
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    gap: 8,
+                    marginTop: 8,
+                    fontSize: 11,
+                    color: 'var(--color-text-muted)',
+                    opacity: 0.7,
+                    flexWrap: 'wrap',
+                  }}
+                >
+                  <span>{stepLabel}</span>
+                  <span>{progress.percent}%</span>
+                </div>
+              </div>
+            </>
+          ) : (
+            <>
+              <svg
+                width="18"
+                height="18"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="var(--color-error)"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                style={{ marginBottom: 14, animation: 'scaleIn 350ms ease forwards' }}
               >
-                {t('progress.confirmContinue')}
-              </button>
-            </div>
-          </div>
-        </>
-      ) : (
-        <>
-          <svg
-            width="18"
-            height="18"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="var(--color-error)"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            style={{ marginBottom: 14, animation: 'scaleIn 350ms ease forwards' }}
+                <circle cx="12" cy="12" r="10" /><line x1="15" y1="9" x2="9" y2="15" /><line x1="9" y1="9" x2="15" y2="15" />
+              </svg>
+              <p style={{ fontSize: 14, fontWeight: 500, color: 'var(--color-text-primary)', marginBottom: 8 }}>{t('progress.failed')}</p>
+              <p style={{ fontSize: 12, color: 'var(--color-text-muted)', textAlign: 'center', maxWidth: 320, lineHeight: 1.6 }}>{error}</p>
+            </>
+          )}
+        </div>
+      </div>
+
+      {!error ? (
+        <div className="page-footer page-footer--center">
+          <button
+            className="btn btn-primary"
+            onClick={onConfirmProgress}
+            disabled={!canConfirmProgress}
+            style={{
+              justifyContent: 'center',
+              visibility: canConfirmProgress ? 'visible' : 'hidden',
+            }}
           >
-            <circle cx="12" cy="12" r="10" /><line x1="15" y1="9" x2="9" y2="15" /><line x1="9" y1="9" x2="15" y2="15" />
-          </svg>
-          <p style={{ fontSize: 14, fontWeight: 500, color: 'var(--color-text-primary)', marginBottom: 8 }}>{t('progress.failed')}</p>
-          <p style={{ fontSize: 12, color: 'var(--color-text-muted)', textAlign: 'center', maxWidth: 320, lineHeight: 1.6 }}>{error}</p>
-          <div style={{ display: 'flex', gap: 10, marginTop: 16 }}>
-            <button className="btn btn-ghost" onClick={onBackToOptions}>
-              {t('options.title')}
-            </button>
-            <button className="btn btn-primary" onClick={() => { void onRetry(); }}>
-              {t('options.install')}
-            </button>
-          </div>
-        </>
+            {t('progress.confirmContinue')}
+          </button>
+        </div>
+      ) : (
+        <div className="page-footer page-footer--center">
+          <button className="btn btn-ghost" onClick={onBackToOptions}>
+            {t('options.title')}
+          </button>
+          <button className="btn btn-primary" onClick={() => { void onRetry(); }}>
+            {t('options.install')}
+          </button>
+        </div>
       )}
     </div>
   );
diff --git a/BitFun-Installer/src/pages/ThemeSetup.tsx b/BitFun-Installer/src/pages/ThemeSetup.tsx
index 19e56cb2..200ffc25 100644
--- a/BitFun-Installer/src/pages/ThemeSetup.tsx
+++ b/BitFun-Installer/src/pages/ThemeSetup.tsx
@@ -67,78 +67,81 @@ export function ThemeSetup({ options, setOptions, onLaunch, onClose }: ThemeSetu
   };
 
   return (
-    <div style={{
-      flex: 1,
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
-      justifyContent: 'center',
-      padding: '0 24px',
-      animation: 'fadeIn 0.4s ease-out',
-    }}>
-      <p style={{
-        fontSize: 14,
-        color: 'var(--color-text-secondary)',
-        marginBottom: 12,
-      }}>
-        {t('themeSetup.subtitle')}
-      </p>
+    <div className="page-shell">
+      <div className="page-scroll">
+        <div className="page-container page-container--center" style={{ maxWidth: 760 }}>
+          <p style={{
+            fontSize: 14,
+            color: 'var(--color-text-secondary)',
+            marginBottom: 12,
+          }}>
+            {t('themeSetup.subtitle')}
+          </p>
 
-      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 1fr))', gap: 8, marginBottom: 16, width: '100%', maxWidth: 760 }}>
-        <button
-          type="button"
-          style={cardStyle(options.themePreference === SYSTEM_THEME_ID)}
-          onClick={() => selectTheme(SYSTEM_THEME_ID)}
-        >
-          <div style={{ ...previewBaseStyle, display: 'flex' }}>
-            <div style={{ flex: 1, background: lightPreview.colors.background.primary }} />
-            <div style={{ flex: 1, background: darkPreview.colors.background.primary }} />
-          </div>
-          <div style={{ fontSize: 11, color: 'var(--color-text-primary)' }}>
-            {t('themeSetup.followSystem')}
-          </div>
-        </button>
+          <div
+            style={{
+              display: 'grid',
+              gridTemplateColumns: 'repeat(auto-fit, minmax(132px, 1fr))',
+              gap: 8,
+              marginBottom: 16,
+              width: '100%',
+            }}
+          >
+            <button
+              type="button"
+              style={cardStyle(options.themePreference === SYSTEM_THEME_ID)}
+              onClick={() => selectTheme(SYSTEM_THEME_ID)}
+            >
+              <div style={{ ...previewBaseStyle, display: 'flex' }}>
+                <div style={{ flex: 1, background: lightPreview.colors.background.primary }} />
+                <div style={{ flex: 1, background: darkPreview.colors.background.primary }} />
+              </div>
+              <div style={{ fontSize: 11, color: 'var(--color-text-primary)' }}>
+                {t('themeSetup.followSystem')}
+              </div>
+            </button>
 
-        {orderedThemes.map((theme) => (
-          <button key={theme.id} type="button" style={cardStyle(options.themePreference === theme.id)} onClick={() => selectTheme(theme.id as ThemeId)}>
-            <div style={{ ...previewBaseStyle, background: theme.colors.background.primary }}>
-              <div style={{ height: 16, background: theme.colors.background.secondary, opacity: 0.9 }} />
-              <div style={{ display: 'flex', gap: 6, padding: 8 }}>
-                <div style={{ width: 22, height: 22, borderRadius: 5, background: theme.colors.element.base, opacity: 0.9 }} />
-                <div style={{ flex: 1 }}>
-                  <div style={{ height: 5, width: '62%', background: theme.colors.text.muted, opacity: 0.5, borderRadius: 3, marginBottom: 5 }} />
-                  <div style={{ height: 5, width: '78%', background: theme.colors.accent['500'], borderRadius: 3 }} />
+            {orderedThemes.map((theme) => (
+              <button key={theme.id} type="button" style={cardStyle(options.themePreference === theme.id)} onClick={() => selectTheme(theme.id as ThemeId)}>
+                <div style={{ ...previewBaseStyle, background: theme.colors.background.primary }}>
+                  <div style={{ height: 16, background: theme.colors.background.secondary, opacity: 0.9 }} />
+                  <div style={{ display: 'flex', gap: 6, padding: 8 }}>
+                    <div style={{ width: 22, height: 22, borderRadius: 5, background: theme.colors.element.base, opacity: 0.9 }} />
+                    <div style={{ flex: 1 }}>
+                      <div style={{ height: 5, width: '62%', background: theme.colors.text.muted, opacity: 0.5, borderRadius: 3, marginBottom: 5 }} />
+                      <div style={{ height: 5, width: '78%', background: theme.colors.accent['500'], borderRadius: 3 }} />
+                    </div>
+                  </div>
                 </div>
-              </div>
-            </div>
-            <div style={{ fontSize: 11, color: 'var(--color-text-primary)' }}>
-              {t(`themeSetup.themeNames.${theme.id}`, { defaultValue: theme.name })}
-            </div>
-          </button>
-        ))}
-      </div>
+                <div style={{ fontSize: 11, color: 'var(--color-text-primary)' }}>
+                  {t(`themeSetup.themeNames.${theme.id}`, { defaultValue: theme.name })}
+                </div>
+              </button>
+            ))}
+          </div>
 
-      <div style={{ width: '100%', maxWidth: 760, marginBottom: 14 }}>
-        <Checkbox
-          checked={options.launchAfterInstall}
-          onChange={(checked) => setOptions((prev) => ({ ...prev, launchAfterInstall: checked }))}
-          label={t('options.launchAfterInstall')}
-        />
-      </div>
+          <div style={{ width: '100%', marginBottom: 14 }}>
+            <Checkbox
+              checked={options.launchAfterInstall}
+              onChange={(checked) => setOptions((prev) => ({ ...prev, launchAfterInstall: checked }))}
+              label={t('options.launchAfterInstall')}
+            />
+          </div>
 
-      {finishError && (
-        <div style={{
-          color: 'var(--color-error)',
-          marginBottom: 12,
-          fontSize: 12,
-          maxWidth: 760,
-          width: '100%',
-        }}>
-          {finishError}
+          {finishError && (
+            <div style={{
+              color: 'var(--color-error)',
+              marginBottom: 12,
+              fontSize: 12,
+              width: '100%',
+            }}>
+              {finishError}
+            </div>
+          )}
         </div>
-      )}
+      </div>
 
-      <div style={{ display: 'flex', gap: 10 }}>
+      <div className="page-footer page-footer--center">
         <button
           className="btn btn-success"
           onClick={handleFinish}
diff --git a/BitFun-Installer/src/pages/Uninstall.tsx b/BitFun-Installer/src/pages/Uninstall.tsx
index 64bd619a..a3d42cc3 100644
--- a/BitFun-Installer/src/pages/Uninstall.tsx
+++ b/BitFun-Installer/src/pages/Uninstall.tsx
@@ -24,39 +24,45 @@ export function UninstallPage({
 
   return (
     <div className="uninstall-page">
-      <div className="uninstall-card">
-        <div className="uninstall-title">
-          {t('uninstall.title')}
-        </div>
-        <div className="uninstall-subtitle">
-          {t('uninstall.subtitle')}
-        </div>
+      <div className="page-scroll">
+        <div className="page-container page-container--center">
+          <div className="uninstall-card">
+            <div className="uninstall-title">
+              {t('uninstall.title')}
+            </div>
+            <div className="uninstall-subtitle">
+              {t('uninstall.subtitle')}
+            </div>
 
-        <div className="uninstall-inline-meta" title={installPath || t('uninstall.pathUnknown')}>
-          <span className="uninstall-inline-label">{t('uninstall.installPath')}:</span>
-          <span className="uninstall-inline-path">{installPath || t('uninstall.pathUnknown')}</span>
-        </div>
+            <div className="uninstall-inline-meta" title={installPath || t('uninstall.pathUnknown')}>
+              <span className="uninstall-inline-label">{t('uninstall.installPath')}:</span>
+              <span className="uninstall-inline-path">{installPath || t('uninstall.pathUnknown')}</span>
+            </div>
 
-        {uninstallError && (
-          <div className="uninstall-error">
-            {uninstallError}
-          </div>
-        )}
+            {uninstallError && (
+              <div className="uninstall-error">
+                {uninstallError}
+              </div>
+            )}
 
-        {uninstallCompleted && (
-          <div className="uninstall-success">
-            {t('uninstall.completed')}
-          </div>
-        )}
+            {uninstallCompleted && (
+              <div className="uninstall-success">
+                {t('uninstall.completed')}
+              </div>
+            )}
 
-        {(isUninstalling || uninstallCompleted) && (
-          <div className="uninstall-progress-wrap">
-            <ProgressBar percent={uninstallProgress} completed={uninstallCompleted} />
-            <span className="uninstall-progress-text">{uninstallProgress}%</span>
+            {(isUninstalling || uninstallCompleted) && (
+              <div className="uninstall-progress-wrap">
+                <ProgressBar percent={uninstallProgress} completed={uninstallCompleted} />
+                <span className="uninstall-progress-text">{uninstallProgress}%</span>
+              </div>
+            )}
           </div>
-        )}
+        </div>
+      </div>
 
-        <div className="uninstall-actions">
+      <div className="page-footer">
+        <div className="uninstall-actions" style={{ width: '100%' }}>
           <button className="btn btn-ghost" onClick={onClose}>
             {t(uninstallCompleted ? 'uninstall.close' : 'uninstall.cancel')}
           </button>
diff --git a/BitFun-Installer/src/styles/global.css b/BitFun-Installer/src/styles/global.css
index 9f12c32d..86ba0d02 100644
--- a/BitFun-Installer/src/styles/global.css
+++ b/BitFun-Installer/src/styles/global.css
@@ -76,9 +76,58 @@ html, body, #root {
 
 .installer-content {
   flex: 1; display: flex; flex-direction: column;
+  min-height: 0;
   overflow: hidden; position: relative;
 }
 
+.page-shell {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.page-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 24px 32px 18px;
+}
+
+.page-container {
+  width: 100%;
+  max-width: 620px;
+  margin: 0 auto;
+  animation: fadeIn 0.4s ease-out;
+}
+
+.page-container--center {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.page-footer {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  padding: 10px 22px 12px;
+  border-top: 1px solid rgba(148, 163, 184, 0.12);
+  background: var(--color-bg-primary);
+  flex-shrink: 0;
+}
+
+.page-footer--split {
+  justify-content: space-between;
+}
+
+.page-footer--center {
+  justify-content: center;
+}
+
 .btn {
   display: inline-flex; align-items: center; justify-content: center;
   gap: 8px;
@@ -487,6 +536,7 @@ html, body, #root {
   justify-content: flex-end;
   align-items: center;
   gap: 10px;
+  flex-wrap: wrap;
   padding: 10px 22px 12px;
   border-top: 1px solid rgba(148, 163, 184, 0.12);
   background: var(--color-bg-primary);
@@ -584,11 +634,8 @@ html, body, #root {
 .uninstall-page {
   flex: 1;
   display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 28px 42px 92px;
-  animation: fadeIn 0.4s ease-out;
-  position: relative;
+  min-height: 0;
+  flex-direction: column;
 }
 
 .uninstall-card {
@@ -602,8 +649,7 @@ html, body, #root {
 }
 
 .uninstall-title {
-  margin-top: -34px;
-  margin-bottom: 30px;
+  margin-bottom: 22px;
   font-size: 24px;
   font-weight: 600;
   color: var(--color-text-primary);
@@ -684,7 +730,27 @@ html, body, #root {
 .uninstall-actions {
   display: flex;
   gap: 10px;
-  position: absolute;
-  right: 24px;
-  bottom: 18px;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+}
+
+@media (max-width: 760px) {
+  .page-scroll {
+    padding: 18px 18px 12px;
+  }
+
+  .page-footer {
+    padding: 8px 14px 10px;
+  }
+}
+
+@media (max-width: 520px) {
+  .page-container--center {
+    justify-content: flex-start;
+  }
+
+  .page-footer,
+  .page-footer--split {
+    justify-content: center;
+  }
 }