diff --git a/src/client/web/src/components/layers.tsx b/src/client/web/src/components/layers.tsx
index 1240684..a4056b2 100644
--- a/src/client/web/src/components/layers.tsx
+++ b/src/client/web/src/components/layers.tsx
@@ -82,15 +82,15 @@ export class Layers extends React.Component<Props, State, {}> {
         </div>
 
         <div id="login-layer" className={`layer ${loginPaneClass}`}>
-          <div id="root-container">
-            <AuthPane
-              login={this.props.login}
-              ui={this.props.ui}
-              update={this.props.update}
-              msg={this.props.msg}
-              enabled={!hideLogin}
-            />
-          </div>
+            {/* <div id="root-container"> */}
+              <AuthPane
+                login={this.props.login}
+                ui={this.props.ui}
+                update={this.props.update}
+                msg={this.props.msg}
+                enabled={!hideLogin}
+              />
+          {/* </div> */}
         </div>
 
         <div id="settings-layer" className={`layer ${showSettings}`}>
diff --git a/src/client/web/src/components/pane_login.tsx b/src/client/web/src/components/pane_login.tsx
index 893ee49..88ad5b2 100644
--- a/src/client/web/src/components/pane_login.tsx
+++ b/src/client/web/src/components/pane_login.tsx
@@ -69,7 +69,7 @@ export class AuthPane extends React.Component<Props, State, {}> {
     if (this.props.enabled) {
       this.hotkeyHandler.handle(ev);
     }
-  }
+  };
 
   changeUser = (ev: React.ChangeEvent<HTMLInputElement>) => {
     this.setState({ user: ev.target.value });
@@ -129,52 +129,47 @@ export class AuthPane extends React.Component<Props, State, {}> {
 
   render() {
     const row3 = this.props.ui.captchaEnabled ? (
-      <Flexbox
-        children={List([
-          <div className="input-wrap">
-            <input
-              id="captcha-input"
-              type="text"
-              onChange={this.changeCaptcha}
-              value={this.state.captchaInput}
-              placeholder={this.props.msg.pkg.get("login.captcha")}
-            />
-          </div>,
+      <div>
+        <div id="captcha-input" className="float-l">
+          <input
+            type="text"
+            onChange={this.changeCaptcha}
+            value={this.state.captchaInput}
+            placeholder={this.props.msg.pkg.get("login.captcha")}
+          />
+        </div>
 
-          <img
-            id="captcha"
-            src={`/v1/captchas/imgs?capid=${this.props.login.captchaID}`}
-            className={`captcha ${this.state.captchaLoaded ? "" : "hidden"}`}
-            onClick={this.refreshCaptcha}
-            onLoad={() => this.setState({ captchaLoaded: true })}
-          />,
-        ])}
-        childrenStyles={List([
-          { justifyContent: "flex-start" },
-          { justifyContent: "flex-end" },
-        ])}
-      />
+        <img
+          id="captcha"
+          src={`/v1/captchas/imgs?capid=${this.props.login.captchaID}`}
+          className={`captcha float-l ${
+            this.state.captchaLoaded ? "" : "hidden"
+          }`}
+          onClick={this.refreshCaptcha}
+          onLoad={() => this.setState({ captchaLoaded: true })}
+        />
+        <div className="fix"></div>
+      </div>
     ) : null;
 
     return (
       <div
         id="pane-login"
-        className="container"
-        style={{ display: this.props.login.authed ? "none" : "block" }}
+        style={{ display: this.props.login.authed ? "none" : "" }}
       >
         <div className="login-container">
-          <a
-            href="https://github.com/ihexxa/quickshare"
-            target="_blank"
-            className="h5"
-            id="title"
-          >
-            {this.props.ui.clientCfg.siteName}
-          </a>
+          <div className="padding-t-l padding-b-l margin-l-l margin-r-l">
+            <a
+              href="https://github.com/ihexxa/quickshare"
+              target="_blank"
+              className="h5 margin-t-m"
+              id="title"
+            >
+              {this.props.ui.clientCfg.siteName}
+            </a>
 
-          <div className="hr"></div>
+            <div className="hr"></div>
 
-          <div className="input-wrap">
             <input
               name="user"
               type="text"
@@ -182,9 +177,7 @@ export class AuthPane extends React.Component<Props, State, {}> {
               value={this.state.user}
               placeholder={this.props.msg.pkg.get("login.username")}
             />
-          </div>
 
-          <div className="input-wrap">
             <input
               name="pwd"
               type="password"
@@ -192,13 +185,13 @@ export class AuthPane extends React.Component<Props, State, {}> {
               value={this.state.pwd}
               placeholder={this.props.msg.pkg.get("login.pwd")}
             />
+
+            {row3}
+
+            <button id="btn-login" onClick={this.login} className="margin-b-l">
+              {this.props.msg.pkg.get("login.login")}
+            </button>
           </div>
-
-          {row3}
-
-          <button id="btn-login" onClick={this.login}>
-            {this.props.msg.pkg.get("login.login")}
-          </button>
         </div>
       </div>
     );
diff --git a/static/public/css/dark.css b/static/public/css/dark.css
index c6f206b..8e856c4 100644
--- a/static/public/css/dark.css
+++ b/static/public/css/dark.css
@@ -178,8 +178,8 @@
 }
 
 .theme-dark #pane-login {
-  max-width: 48rem;
-  padding: 2rem;
+  width: 100%;
+  margin: auto;
 }
 
 .theme-dark #pane-login #title {
@@ -188,26 +188,19 @@
 }
 
 .theme-dark #pane-login .login-container {
-  margin: 2rem;
-}
-
-.theme-dark #pane-login .input-wrap {
-  width: 100%;
-  background-color: #eaebf6;
-  margin: 2rem 0 0 0;
+  background-color: white;
+  margin: 4rem 1rem auto 1rem;
   border-radius: 0.6rem;
-  line-height: 4rem;
 }
 
 .theme-dark #pane-login #captcha-input {
-  width: calc(100% - 1rem);
+  width: calc(50% - 1rem);
 }
 
 .theme-dark #pane-login #captcha {
-  width: calc(100% - 1rem);
+  width: calc(50% - 1rem);
   background-color: #eaebf6;
-  border: solid 1px #eaebf6;
-  margin: 2rem 0 0 0;
+  margin: 0 0 0 2rem;
   border-radius: 0.6rem;
   height: 3.8rem;
 }
@@ -216,11 +209,12 @@
 .theme-dark #pane-login input:hover,
 .theme-dark #pane-login input:focus,
 .theme-dark #pane-login input:active {
-  width: 100%;
-  padding: 0;
+  width: calc(100% - 1.6rem);
+  background-color: #eaebf6;
+  border-radius: 0.6rem;
+  padding: 0.6rem 0.8rem;
+  margin: auto auto 2rem auto;
   border: none;
-  margin: 0 1rem;
-  background-color: transparent;
   outline: none;
   box-shadow: none;
 }
@@ -229,7 +223,6 @@
   background-color: #1abc9c;
   color: #fff;
   width: 100%;
-  margin-top: 2rem;
   height: 4rem;
 }
 
@@ -242,7 +235,7 @@
   max-width: 100rem;
   width: 96%;
   text-align: left;
-  margin: 3rem auto 8rem auto;
+  margin: 3rem auto auto auto;
 }
 
 .theme-dark .tabs button {
diff --git a/static/public/css/white.css b/static/public/css/white.css
index 103db17..f18e1d6 100644
--- a/static/public/css/white.css
+++ b/static/public/css/white.css
@@ -177,7 +177,8 @@
 
 .theme-default #pane-login {
   max-width: 48rem;
-  padding: 2rem;
+  width: 100%;
+  margin: auto;
 }
 
 .theme-default #pane-login #title {
@@ -186,26 +187,19 @@
 }
 
 .theme-default #pane-login .login-container {
-  margin: 2rem;
-}
-
-.theme-default #pane-login .input-wrap {
-  width: 100%;
-  background-color: #eaebf6;
-  margin: 2rem 0 0 0;
+  background-color: white;
+  margin: 4rem 1rem auto 1rem;
   border-radius: 0.6rem;
-  line-height: 4rem;
 }
 
 .theme-default #pane-login #captcha-input {
-  width: calc(100% - 1rem);
+  width: calc(50% - 1rem);
 }
 
 .theme-default #pane-login #captcha {
-  width: calc(100% - 1rem);
+  width: calc(50% - 1rem);
   background-color: #eaebf6;
-  border: solid 1px #eaebf6;
-  margin: 2rem 0 0 0;
+  margin: 0 0 0 2rem;
   border-radius: 0.6rem;
   height: 3.8rem;
 }
@@ -214,20 +208,22 @@
 .theme-default #pane-login input:hover,
 .theme-default #pane-login input:focus,
 .theme-default #pane-login input:active {
-  width: 100%;
-  padding: 0;
+  width: calc(100% - 1.6rem);
+  background-color: #eaebf6;
+  border-radius: 0.6rem;
+  padding: 0.6rem 0.8rem;
+  margin: auto auto 2rem auto;
   border: none;
-  margin: 0 1rem;
-  background-color: transparent;
   outline: none;
   box-shadow: none;
+  height: 2.6rem;
 }
 
+
 .theme-default #btn-login {
   background-color: #1abc9c;
   color: #fff;
   width: 100%;
-  margin-top: 2rem;
   height: 4rem;
 }
 
@@ -240,7 +236,7 @@
   max-width: 100rem;
   width: 96%;
   text-align: left;
-  margin: 3rem auto 8rem auto;
+  margin: 3rem auto auto auto;
 }
 
 .theme-default .tabs button {