diff --git a/public/static/css/white.css b/public/static/css/white.css
index 56dfc52..84cded2 100644
--- a/public/static/css/white.css
+++ b/public/static/css/white.css
@@ -81,7 +81,7 @@
 }
 
 .theme-default .float-input:last-child {
-  margin: auto 1rem auto auto;
+  margin: auto auto auto auto;
 }
 
 .theme-default .float-input .label {
@@ -95,6 +95,37 @@
   color: #fff;
 }
 
+.theme-default .pane-title {
+  color: black;
+}
+
+.theme-default #pane-settings {
+  padding: 2rem;
+}
+
+.theme-default #pane-settings #profile {
+  color: #95a5a6;
+  font-size: 1.2rem;
+  line-height: 1.8rem;
+}
+
+.theme-default .wide-input {
+  width: 20rem;
+}
+
+.theme-default .hr {
+  margin: 1rem 0;
+  background-color: #ecf0f1;
+}
+
+.theme-default .key-value {
+  margin-top: 0.5rem;
+}
+
+.theme-default .value {
+  color: #697384;
+}
+
 .theme-default #tail {
   color: #34495e;
 }
diff --git a/src/client/web/src/components/pane_settings.tsx b/src/client/web/src/components/pane_settings.tsx
index a2d720d..a683be8 100644
--- a/src/client/web/src/components/pane_settings.tsx
+++ b/src/client/web/src/components/pane_settings.tsx
@@ -5,7 +5,6 @@ import { List } from "immutable";
 import { ICoreState, UIProps, MsgProps } from "./core_state";
 import { LoginProps } from "./pane_login";
 import { Flexbox } from "./layout/flexbox";
-import { Flowgrid } from "./layout/flowgrid";
 import { updater } from "./state_updater";
 import { alertMsg } from "../common/env";
 export interface Props {
@@ -139,259 +138,236 @@ export class PaneSettings extends React.Component<Props, State, {}> {
 
   render() {
     return (
-      <div className="container">
-        <div className="padding-l">
-          <div className="grey3-font">
-            <h5 className="black-font">
-              {this.props.msg.pkg.get("user.profile")}
-            </h5>
+      <div id="pane-settings" className="container">
+        <div id="profile">
+          <h5 className="pane-title">
+            {this.props.msg.pkg.get("user.profile")}
+          </h5>
 
-            <div className="font-size-s margin-t-s">
-              <span className="grey0-font">
-                {`${this.props.msg.pkg.get("user.name")}:`}{" "}
-              </span>
-              <span>{`${this.props.login.userName}`}</span>
-            </div>
-            <div className="font-size-s margin-t-s">
-              <span className="grey0-font">
-                {`${this.props.msg.pkg.get("user.role")}:`}{" "}
-              </span>
-              <span>{`${this.props.login.userRole}`}</span>
-            </div>
-            <div className="font-size-s margin-t-s">
-              <span className="grey0-font">
-                {`${this.props.msg.pkg.get("user.spaceLimit")}:`}{" "}
-              </span>
-              <span>
-                {" "}
-                {`${FileSize(parseInt(this.props.login.quota.spaceLimit, 10), {
-                  round: 0,
-                })}`}
-              </span>
-            </div>
-            <div className="font-size-s margin-t-s">
-              <span className="grey0-font">
-                {`${this.props.msg.pkg.get("user.upLimit")}:`}{" "}
-              </span>
-              <span>
-                {" "}
-                {`${FileSize(this.props.login.quota.uploadSpeedLimit, {
-                  round: 0,
-                })}`}
-              </span>
-            </div>
-            <div className="font-size-s margin-t-s">
-              <span className="grey0-font">
-                {`${this.props.msg.pkg.get("user.downLimit")}:`}{" "}
-              </span>
-              <span>
-                {" "}
-                {`${FileSize(this.props.login.quota.downloadSpeedLimit, {
-                  round: 0,
-                })}`}
-              </span>
-            </div>
+          <div className="key-value">
+            {`${this.props.msg.pkg.get("user.name")}: `}
+            <span className="value">{`${this.props.login.userName}`}</span>
           </div>
-          <div className="hr white0-bg margin-t-m margin-b-m"></div>
-          <div>
-            <Flexbox
-              children={List([
-                <h5 className="black-font">
-                  {this.props.msg.pkg.get("settings.pwd.update")}
-                </h5>,
-                <button onClick={this.setPwd}>
+          <div className="key-value">
+            {`${this.props.msg.pkg.get("user.role")}: `}
+            <span className="value">{`${this.props.login.userRole}`}</span>
+          </div>
+          <div className="key-value">
+            {`${this.props.msg.pkg.get("user.spaceLimit")}: `}
+            <span className="value">
+              {`${FileSize(parseInt(this.props.login.quota.spaceLimit, 10), {
+                round: 0,
+              })}`}
+            </span>
+          </div>
+          <div className="key-value">
+            {`${this.props.msg.pkg.get("user.upLimit")}: `}
+            <span className="value">
+              {`${FileSize(this.props.login.quota.uploadSpeedLimit, {
+                round: 0,
+              })}`}
+            </span>
+          </div>
+          <div className="key-value">
+            {`${this.props.msg.pkg.get("user.downLimit")}: `}
+            <span className="value">
+              {`${FileSize(this.props.login.quota.downloadSpeedLimit, {
+                round: 0,
+              })}`}
+            </span>
+          </div>
+        </div>
+
+        <div className="hr"></div>
+
+        <div>
+          <Flexbox
+            children={List([
+              <h5 className="pane-title">
+                {this.props.msg.pkg.get("settings.pwd.update")}
+              </h5>,
+              <button onClick={this.setPwd}>
+                {this.props.msg.pkg.get("update")}
+              </button>,
+            ])}
+            childrenStyles={List([{}, { justifyContent: "flex-end" }])}
+          />
+
+          <span className="float-input">
+            <div className="label">
+              {this.props.msg.pkg.get("settings.pwd.old")}
+            </div>
+            <input
+              name="old_pwd"
+              type="password"
+              onChange={this.changeOldPwd}
+              value={this.state.oldPwd}
+              placeholder={this.props.msg.pkg.get("settings.pwd.old")}
+            />
+          </span>
+
+          <span className="float-input">
+            <div className="label">
+              {this.props.msg.pkg.get("settings.pwd.new1")}
+            </div>
+            <input
+              name="new_pwd1"
+              type="password"
+              onChange={this.changeNewPwd1}
+              value={this.state.newPwd1}
+              placeholder={this.props.msg.pkg.get("settings.pwd.new1")}
+            />
+          </span>
+
+          <span className="float-input">
+            <div className="label">
+              {this.props.msg.pkg.get("settings.pwd.new2")}
+            </div>
+            <input
+              name="new_pwd2"
+              type="password"
+              onChange={this.changeNewPwd2}
+              value={this.state.newPwd2}
+              placeholder={this.props.msg.pkg.get("settings.pwd.new2")}
+            />
+          </span>
+        </div>
+
+        <div className="hr"></div>
+
+        <div>
+          <Flexbox
+            children={List([
+              <h5 className="title">
+                {this.props.msg.pkg.get("settings.chooseLan")}
+              </h5>,
+
+              <span>
+                <button
+                  onClick={() => {
+                    this.setLan("en_US");
+                  }}
+                  className="float-input"
+                >
+                  {this.props.msg.pkg.get("enUS")}
+                </button>
+                <button
+                  onClick={() => {
+                    this.setLan("zh_CN");
+                  }}
+                  className="float-input"
+                >
+                  {this.props.msg.pkg.get("zhCN")}
+                </button>
+              </span>,
+            ])}
+            childrenStyles={List([{}, { justifyContent: "flex-end" }])}
+          />
+        </div>
+
+        <div className="hr"></div>
+
+        <div>
+          <Flexbox
+            children={List([
+              <h5 className="title">
+                {this.props.msg.pkg.get("settings.customLan")}
+              </h5>,
+
+              <span>
+                <button onClick={this.syncPreferences}>
                   {this.props.msg.pkg.get("update")}
-                </button>,
-              ])}
-              childrenStyles={List([{}, { justifyContent: "flex-end" }])}
-            />
+                </button>
+              </span>,
+            ])}
+            childrenStyles={List([{}, { justifyContent: "flex-end" }])}
+          />
 
-            <span className="inline-block margin-r-m margin-b-m">
-              <div className="font-size-s grey1-font">
-                {this.props.msg.pkg.get("settings.pwd.old")}
-              </div>
-              <input
-                name="old_pwd"
-                type="password"
-                onChange={this.changeOldPwd}
-                value={this.state.oldPwd}
-                className="black0-font"
-                placeholder={this.props.msg.pkg.get("settings.pwd.old")}
-              />
-            </span>
-
-            <span className="inline-block margin-r-m  margin-b-m">
-              <div className="font-size-s grey1-font">
-                {this.props.msg.pkg.get("settings.pwd.new1")}
-              </div>
-              <input
-                name="new_pwd1"
-                type="password"
-                onChange={this.changeNewPwd1}
-                value={this.state.newPwd1}
-                className="black0-font"
-                placeholder={this.props.msg.pkg.get("settings.pwd.new1")}
-              />
-            </span>
-
-            <span className="inline-block margin-r-m margin-b-m">
-              <div className="font-size-s grey1-font">
-                {this.props.msg.pkg.get("settings.pwd.new2")}
-              </div>
-              <input
-                name="new_pwd2"
-                type="password"
-                onChange={this.changeNewPwd2}
-                value={this.state.newPwd2}
-                className="black0-font"
-                placeholder={this.props.msg.pkg.get("settings.pwd.new2")}
-              />
-            </span>
-          </div>
-
-          <div className="hr white0-bg margin-t-m margin-b-m"></div>
-          <div className="margin-b-m">
-            <Flexbox
-              children={List([
-                <h5 className="black-font">
-                  {this.props.msg.pkg.get("settings.chooseLan")}
-                </h5>,
-                <span>
-                  <button
-                    onClick={() => {
-                      this.setLan("en_US");
-                    }}
-                    className="margin-r-m"
-                  >
-                    {this.props.msg.pkg.get("enUS")}
-                  </button>
-                  <button
-                    onClick={() => {
-                      this.setLan("zh_CN");
-                    }}
-                  >
-                    {this.props.msg.pkg.get("zhCN")}
-                  </button>
-                </span>,
-              ])}
-              childrenStyles={List([{}, { justifyContent: "flex-end" }])}
+          <div className="float-input">
+            <div className="label">
+              {this.props.msg.pkg.get("settings.lanPackURL")}
+            </div>
+            <input
+              type="text"
+              onChange={this.changeLanPackURL}
+              value={this.props.login.preferences.lanPackURL}
+              className="black0-font"
+              style={{ width: "20rem" }}
+              placeholder={this.props.msg.pkg.get("settings.lanPackURL")}
             />
           </div>
+        </div>
+
+        <div className="hr"></div>
+
+        <div>
+          <Flexbox
+            children={List([
+              <h5 className="title">{this.props.msg.pkg.get("cfg.bg")}</h5>,
+
+              <button onClick={this.syncPreferences}>
+                {this.props.msg.pkg.get("update")}
+              </button>,
+            ])}
+            childrenStyles={List([{}, { justifyContent: "flex-end" }])}
+          />
 
-          <div className="hr white0-bg margin-t-m margin-b-m"></div>
           <div>
-            <Flexbox
-              children={List([
-                <span className="title-m bold">
-                  {this.props.msg.pkg.get("settings.customLan")}
-                </span>,
+            <div className="float-input">
+              <div className="label">
+                {this.props.msg.pkg.get("cfg.bg.url")}
+              </div>
+              <input
+                name="bg_url"
+                type="text"
+                onChange={this.changeBgUrl}
+                value={this.props.login.preferences.bg.url}
+                placeholder={this.props.msg.pkg.get("cfg.bg.url")}
+              />
+            </div>
 
-                <span>
-                  <button onClick={this.syncPreferences}>
-                    {this.props.msg.pkg.get("update")}
-                  </button>
-                </span>,
-              ])}
-              childrenStyles={List([{}, { justifyContent: "flex-end" }])}
-            />
-            <Flowgrid
-              grids={List([
-                <div className="padding-t-m padding-b-m padding-r-m">
-                  <div className="font-size-s grey1-font">
-                    {this.props.msg.pkg.get("settings.lanPackURL")}
-                  </div>
-                  <input
-                    type="text"
-                    onChange={this.changeLanPackURL}
-                    value={this.props.login.preferences.lanPackURL}
-                    className="black0-font"
-                    style={{ width: "20rem" }}
-                    placeholder={this.props.msg.pkg.get("settings.lanPackURL")}
-                  />
-                </div>,
-              ])}
-            />
+            <div className="float-input">
+              <div className="label">
+                {this.props.msg.pkg.get("cfg.bg.repeat")}
+              </div>
+              <input
+                name="bg_repeat"
+                type="text"
+                onChange={this.changeBgRepeat}
+                value={this.props.login.preferences.bg.repeat}
+                placeholder={this.props.msg.pkg.get("cfg.bg.repeat")}
+              />
+            </div>
+
+            <div className="float-input">
+              <div className="label">
+                {this.props.msg.pkg.get("cfg.bg.pos")}
+              </div>
+              <input
+                name="bg_pos"
+                type="text"
+                onChange={this.changeBgPos}
+                value={this.props.login.preferences.bg.position}
+                placeholder={this.props.msg.pkg.get("cfg.bg.pos")}
+              />
+            </div>
+
+            <div className="float-input">
+              <div className="label">
+                {this.props.msg.pkg.get("cfg.bg.align")}
+              </div>
+              <input
+                name="bg_align"
+                type="text"
+                onChange={this.changeBgAlign}
+                value={this.props.login.preferences.bg.align}
+                placeholder={this.props.msg.pkg.get("cfg.bg.align")}
+              />
+            </div>
           </div>
+        </div>
 
-          <div className="hr white0-bg margin-t-m margin-b-m"></div>
-          <div>
-            <Flexbox
-              children={List([
-                <span className="title-m bold">
-                  {this.props.msg.pkg.get("cfg.bg")}
-                </span>,
-
-                <span>
-                  <button onClick={this.syncPreferences}>
-                    {this.props.msg.pkg.get("update")}
-                  </button>
-                </span>,
-              ])}
-              childrenStyles={List([{}, { justifyContent: "flex-end" }])}
-            />
-            <Flowgrid
-              grids={List([
-                <div className="padding-t-m padding-b-m padding-r-m">
-                  <div className="font-size-s grey1-font">
-                    {this.props.msg.pkg.get("cfg.bg.url")}
-                  </div>
-                  <input
-                    name="bg_url"
-                    type="text"
-                    onChange={this.changeBgUrl}
-                    value={this.props.login.preferences.bg.url}
-                    className="black0-font"
-                    style={{ width: "20rem" }}
-                    placeholder={this.props.msg.pkg.get("cfg.bg.url")}
-                  />
-                </div>,
-
-                <div className="padding-t-m padding-b-m padding-r-m">
-                  <div className="font-size-s grey1-font">
-                    {this.props.msg.pkg.get("cfg.bg.repeat")}
-                  </div>
-                  <input
-                    name="bg_repeat"
-                    type="text"
-                    onChange={this.changeBgRepeat}
-                    value={this.props.login.preferences.bg.repeat}
-                    className="black0-font"
-                    placeholder={this.props.msg.pkg.get("cfg.bg.repeat")}
-                  />
-                </div>,
-
-                <div className="padding-t-m padding-b-m padding-r-m">
-                  <div className="font-size-s grey1-font">
-                    {this.props.msg.pkg.get("cfg.bg.pos")}
-                  </div>
-                  <input
-                    name="bg_pos"
-                    type="text"
-                    onChange={this.changeBgPos}
-                    value={this.props.login.preferences.bg.position}
-                    className="black0-font"
-                    placeholder={this.props.msg.pkg.get("cfg.bg.pos")}
-                  />
-                </div>,
-
-                <div className="padding-t-m padding-b-m padding-r-m">
-                  <div className="font-size-s grey1-font">
-                    {this.props.msg.pkg.get("cfg.bg.align")}
-                  </div>
-                  <input
-                    name="bg_align"
-                    type="text"
-                    onChange={this.changeBgAlign}
-                    value={this.props.login.preferences.bg.align}
-                    className="black0-font"
-                    placeholder={this.props.msg.pkg.get("cfg.bg.align")}
-                  />
-                </div>,
-              ])}
-            />
-          </div>
-
-          {/* <div className="hr white0-bg margin-t-m margin-b-m"></div>
+        {/* <div className="hr"></div>
           <div>
             <Flexbox
               children={List([
@@ -425,8 +401,6 @@ export class PaneSettings extends React.Component<Props, State, {}> {
               ])}
             />
           </div> */}
-
-        </div>
       </div>
     );
   }