diff --git a/casdoor b/casdoor
new file mode 100644
index 00000000..e9ad8a0b
Binary files /dev/null and b/casdoor differ
diff --git a/web/src/App.js b/web/src/App.js
index f8fc1737..6340c25c 100644
--- a/web/src/App.js
+++ b/web/src/App.js
@@ -697,8 +697,8 @@ class App extends Component {
   renderPage() {
     if (this.isDoorPages()) {
       return (
-        <div style={{position: "relative", minHeight: "100vh"}}>
-          <div id="content-wrap" style={{flexDirection: "column"}}>
+        <div style={{display: "flex", flexDirection: "column", height: "100%"}}>
+          <div id="login-content-wrap" style={{flexDirection: "column"}}>
             <Switch>
               <Route exact path="/signup" render={(props) => this.renderHomeIfLoggedIn(<SignupPage account={this.state.account} {...props} />)} />
               <Route exact path="/signup/:applicationName" render={(props) => this.renderHomeIfLoggedIn(<SignupPage account={this.state.account} {...props} onUpdateAccount={(account) => {this.onUpdateAccount(account);}} />)} />
diff --git a/web/src/App.less b/web/src/App.less
index 9d3496a3..be0f46d7 100644
--- a/web/src/App.less
+++ b/web/src/App.less
@@ -28,22 +28,32 @@
   color: #61dafb;
 }
 
+#root{
+  height: 100%;
+}
+
 #parent-area {
-  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
   min-height: 100vh;
   background-color: #f5f5f5;
-  display: flex;
 }
 
 #content-wrap {
-  padding-bottom: 70px; /* Footer height */
   display: flex;
+  flex: 1 1 0;
   align-items: stretch;
   width: 100%;
 }
 
+#login-content-wrap {
+  display: flex;
+  flex: 1 1 0;
+  width: 100%;
+}
+
 #footer {
-  position: absolute;
   bottom: 0;
   width: 100%;
   height: 70px; /* Footer height */
@@ -78,6 +88,8 @@
 }
 
 .loginBackground {
+  height: 100%;
   background: #ffffff no-repeat;
   background-size: 100% 100%;
+  background-attachment: fixed;
 }
diff --git a/web/src/auth/LoginPage.js b/web/src/auth/LoginPage.js
index cdb10ad1..7c1d7bb9 100644
--- a/web/src/auth/LoginPage.js
+++ b/web/src/auth/LoginPage.js
@@ -707,10 +707,10 @@ class LoginPage extends React.Component {
     const formStyle = Setting.inIframe() ? null : Setting.parseObject(application.formCss);
 
     return (
-      <div className="loginBackground" style={{backgroundImage: Setting.inIframe() ? null : `url(${application.formBackgroundUrl})`}}>
+      <div className="loginBackground" style={{backgroundImage: Setting.inIframe() || Setting.isMobile() ? null : `url(${application.formBackgroundUrl})`}}>
         <CustomGithubCorner />
-        <Row>
-          <Col span={8} offset={application.formOffset === 0 || Setting.inIframe() ? 8 : application.formOffset} style={{display: "flex", justifyContent: "center"}}>
+        <Row >
+          <Col span={8} offset={application.formOffset === 0 || Setting.inIframe() || Setting.isMobile() ? 8 : application.formOffset} style={{display: "flex", justifyContent: "center"}}>
             <div style={{marginTop: "80px", marginBottom: "50px", textAlign: "center", ...formStyle}}>
               <div>
                 {
diff --git a/web/src/auth/SignupPage.js b/web/src/auth/SignupPage.js
index 946f2e9b..3ae2e230 100644
--- a/web/src/auth/SignupPage.js
+++ b/web/src/auth/SignupPage.js
@@ -617,11 +617,11 @@ class SignupPage extends React.Component {
     const formStyle = Setting.inIframe() ? null : Setting.parseObject(application.formCss);
 
     return (
-      <div className="loginBackground" style={{backgroundImage: Setting.inIframe() ? null : `url(${application.formBackgroundUrl})`}}>
+      <div className="loginBackground" style={{backgroundImage: Setting.inIframe() || Setting.isMobile() ? null : `url(${application.formBackgroundUrl})`}}>
         <CustomGithubCorner />
         &nbsp;
         <Row>
-          <Col span={8} offset={application.formOffset === 0 || Setting.inIframe() ? 8 : application.formOffset} style={{display: "flex", justifyContent: "center"}} >
+          <Col span={8} offset={application.formOffset === 0 || Setting.inIframe() || Setting.isMobile() ? 8 : application.formOffset} style={{display: "flex", justifyContent: "center"}} >
             <div style={{marginBottom: "10px", textAlign: "center", ...formStyle}}>
               {
                 Setting.renderHelmet(application)