diff --git a/packages/frontend/core/src/components/affine/setting-modal/index.tsx b/packages/frontend/core/src/components/affine/setting-modal/index.tsx
index 7ed213a44e..c223e1891e 100644
--- a/packages/frontend/core/src/components/affine/setting-modal/index.tsx
+++ b/packages/frontend/core/src/components/affine/setting-modal/index.tsx
@@ -137,7 +137,7 @@ export const SettingModal = ({
               <AccountSetting />
             ) : null}
           </div>
-          <div className="footer">
+          <div className={style.footer}>
             <a
               href="https://community.affine.pro/home"
               target="_blank"
diff --git a/packages/frontend/core/src/components/affine/setting-modal/style.css.ts b/packages/frontend/core/src/components/affine/setting-modal/style.css.ts
index 786f42111e..3e49c0abb2 100644
--- a/packages/frontend/core/src/components/affine/setting-modal/style.css.ts
+++ b/packages/frontend/core/src/components/affine/setting-modal/style.css.ts
@@ -25,6 +25,7 @@ export const centerContainer = style({
 export const content = style({
   width: '100%',
   marginBottom: '24px',
+  minHeight: 'calc(100% - 48px)',
 });
 
 export const suggestionLink = style({
@@ -39,3 +40,10 @@ export const suggestionLinkIcon = style({
   marginRight: '12px',
   display: 'flex',
 });
+
+export const footer = style({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  paddingBottom: '20px',
+});