diff --git a/web/src/auth/SignupPage.js b/web/src/auth/SignupPage.js
index 8d6b3d8c..13f35917 100644
--- a/web/src/auth/SignupPage.js
+++ b/web/src/auth/SignupPage.js
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import React from "react";
-import {Button, Form, Input, Radio, Result, Row, message} from "antd";
+import {Button, Form, Input, Radio, Result, Row, Select, message} from "antd";
 import * as Setting from "../Setting";
 import * as AuthBackend from "./AuthBackend";
 import * as ProviderButton from "./ProviderButton";
@@ -198,6 +198,10 @@ class SignupPage extends React.Component {
   onFinish(values) {
     const application = this.getApplicationObj();
 
+    if (Array.isArray(values.gender)) {
+      values.gender = values.gender.join(", ");
+    }
+
     const params = new URLSearchParams(window.location.search);
     values.plan = params.get("plan");
     values.pricing = params.get("pricing");
@@ -366,7 +370,9 @@ class SignupPage extends React.Component {
             },
           ]}
         >
-          <RegionSelect className="signup-region-select" onChange={(value) => {this.setState({region: value});}} />
+          <RegionSelect className="signup-region-select" onChange={(value) => {
+            this.setState({region: value});
+          }} />
         </Form.Item>
       );
     } else if (signupItem.name === "Email" || signupItem.name === "Phone" || signupItem.name === "Email or Phone" || signupItem.name === "Phone or Email") {
@@ -403,27 +409,29 @@ class SignupPage extends React.Component {
                 },
               ]}
             >
-              <Input className="signup-email-input" placeholder={signupItem.placeholder} disabled={this.state.invitation !== undefined && this.state.invitation.email !== ""} onChange={e => this.setState({email: e.target.value})} />
+              <Input className="signup-email-input" placeholder={signupItem.placeholder}
+                disabled={this.state.invitation !== undefined && this.state.invitation.email !== ""}
+                onChange={e => this.setState({email: e.target.value})} />
             </Form.Item>
             {
               signupItem.rule !== "No verification" &&
-              <Form.Item
-                name="emailCode"
-                className="signup-email-code"
-                label={signupItem.label ? signupItem.label : i18next.t("code:Email code")}
-                rules={[{
-                  required: required,
-                  message: i18next.t("code:Please input your verification code!"),
-                }]}
-              >
-                <SendCodeInput
-                  className="signup-email-code-input"
-                  disabled={!this.state.validEmail}
-                  method={"signup"}
-                  onButtonClickArgs={[this.state.email, "email", Setting.getApplicationName(application)]}
-                  application={application}
-                />
-              </Form.Item>
+                  <Form.Item
+                    name="emailCode"
+                    className="signup-email-code"
+                    label={signupItem.label ? signupItem.label : i18next.t("code:Email code")}
+                    rules={[{
+                      required: required,
+                      message: i18next.t("code:Please input your verification code!"),
+                    }]}
+                  >
+                    <SendCodeInput
+                      className="signup-email-code-input"
+                      disabled={!this.state.validEmail}
+                      method={"signup"}
+                      onButtonClickArgs={[this.state.email, "email", Setting.getApplicationName(application)]}
+                      application={application}
+                    />
+                  </Form.Item>
             }
           </React.Fragment>
         );
@@ -432,7 +440,8 @@ class SignupPage extends React.Component {
       const renderPhoneItem = () => {
         return (
           <React.Fragment>
-            <Form.Item className="signup-phone" label={signupItem.label ? signupItem.label : i18next.t("general:Phone")} required={required}>
+            <Form.Item className="signup-phone"
+              label={signupItem.label ? signupItem.label : i18next.t("general:Phone")} required={required}>
               <Input.Group compact>
                 <Form.Item
                   name="countryCode"
@@ -487,26 +496,26 @@ class SignupPage extends React.Component {
             </Form.Item>
             {
               signupItem.rule !== "No verification" &&
-              <Form.Item
-                name="phoneCode"
-                className="phone-code"
-                label={signupItem.label ? signupItem.label : i18next.t("code:Phone code")}
-                rules={[
-                  {
-                    required: required,
-                    message: i18next.t("code:Please input your phone verification code!"),
-                  },
-                ]}
-              >
-                <SendCodeInput
-                  className="signup-phone-code-input"
-                  disabled={!this.state.validPhone}
-                  method={"signup"}
-                  onButtonClickArgs={[this.state.phone, "phone", Setting.getApplicationName(application)]}
-                  application={application}
-                  countryCode={this.form.current?.getFieldValue("countryCode")}
-                />
-              </Form.Item>
+                  <Form.Item
+                    name="phoneCode"
+                    className="phone-code"
+                    label={signupItem.label ? signupItem.label : i18next.t("code:Phone code")}
+                    rules={[
+                      {
+                        required: required,
+                        message: i18next.t("code:Please input your phone verification code!"),
+                      },
+                    ]}
+                  >
+                    <SendCodeInput
+                      className="signup-phone-code-input"
+                      disabled={!this.state.validPhone}
+                      method={"signup"}
+                      onButtonClickArgs={[this.state.phone, "phone", Setting.getApplicationName(application)]}
+                      application={application}
+                      countryCode={this.form.current?.getFieldValue("countryCode")}
+                    />
+                  </Form.Item>
             }
           </React.Fragment>
         );
@@ -524,7 +533,7 @@ class SignupPage extends React.Component {
 
         return (
           <React.Fragment>
-            <Row style={{marginTop: "30px", marginBottom: "20px"}} >
+            <Row style={{marginTop: "30px", marginBottom: "20px"}}>
               <Radio.Group style={{width: "400px"}} buttonStyle="solid" onChange={e => {
                 this.setState({
                   emailOrPhoneMode: e.target.value,
@@ -618,7 +627,8 @@ class SignupPage extends React.Component {
             },
           ]}
         >
-          <Input className="signup-invitation-code-input" placeholder={signupItem.placeholder} disabled={this.state.invitation !== undefined && this.state.invitation !== ""} />
+          <Input className="signup-invitation-code-input" placeholder={signupItem.placeholder}
+            disabled={this.state.invitation !== undefined && this.state.invitation !== ""} />
         </Form.Item>
       );
     } else if (signupItem.name === "Agreement") {
@@ -633,7 +643,7 @@ class SignupPage extends React.Component {
           <Button type="primary" htmlType="submit" className="signup-button">
             {i18next.t("account:Sign Up")}
           </Button>
-          &nbsp;&nbsp;{i18next.t("signup:Have account?")}&nbsp;
+            &nbsp;&nbsp;{i18next.t("signup:Have account?")}&nbsp;
           <a className="signup-link" onClick={() => {
             const linkInStorage = sessionStorage.getItem("signinUrl");
             if (linkInStorage !== null && linkInStorage !== "") {
@@ -671,6 +681,59 @@ class SignupPage extends React.Component {
         })
 
       );
+    } else if (signupItem.name === "Gender") {
+      if (!signupItem.type) {
+        return (
+          <Form.Item
+            name={signupItem.name.toLowerCase()}
+            label={signupItem.label ? signupItem.label : signupItem.name}
+            rules={[
+              {
+                required: signupItem.required,
+                message: i18next.t(`signup:Please input your ${signupItem.label || signupItem.name}!`),
+              },
+            ]}
+          >
+            <Input placeholder={signupItem.placeholder} />
+          </Form.Item>
+        );
+      }
+      if (!signupItem.type || signupItem.type === "Input") {
+        return (
+          <Form.Item
+            name={signupItem.name.toLowerCase()}
+            label={signupItem.label ? signupItem.label : signupItem.name}
+            rules={[
+              {
+                required: signupItem.required,
+                message: i18next.t(`signup:Please input your ${signupItem.label}!`),
+              },
+            ]}
+          >
+            <Input placeholder={signupItem.placeholder} />
+          </Form.Item>
+        );
+      } else if (signupItem.type === "Single Choice" || signupItem.type === "Multiple Choices") {
+        return (
+          <Form.Item
+            name={signupItem.name.toLowerCase()}
+            label={signupItem.label ? signupItem.label : signupItem.name}
+            rules={[
+              {
+                required: signupItem.required,
+                message: i18next.t(`Please select your ${signupItem.label || signupItem.name}!`),
+              },
+            ]}
+          >
+            <Select
+              mode={signupItem.type === "Multiple Choices" ? "multiple" : "single"}
+              placeholder={signupItem.placeholder}
+              showSearch={false}
+              options={signupItem.options.map(option => ({label: option, value: option}))}
+            />
+          </Form.Item>
+        );
+      }
     }
   }
 
diff --git a/web/src/table/SignupTable.js b/web/src/table/SignupTable.js
index 16aa8779..3c7ce99f 100644
--- a/web/src/table/SignupTable.js
+++ b/web/src/table/SignupTable.js
@@ -100,6 +100,7 @@ class SignupTable extends React.Component {
             {name: "ID", displayName: i18next.t("general:ID")},
             {name: "Display name", displayName: i18next.t("general:Display name")},
             {name: "Affiliation", displayName: i18next.t("user:Affiliation")},
+            {name: "Gender", displayName: i18next.t("user:Gender")},
             {name: "Country/Region", displayName: i18next.t("user:Country/Region")},
             {name: "ID card", displayName: i18next.t("user:ID card")},
             {name: "Password", displayName: i18next.t("general:Password")},