diff --git a/modules/backend/assets/css/october.css b/modules/backend/assets/css/october.css
index efedd3774..23b2dcc4f 100644
--- a/modules/backend/assets/css/october.css
+++ b/modules/backend/assets/css/october.css
@@ -842,12 +842,9 @@ body.outer .layout > .layout-row.layout-head > .layout-cell h1.oc-logo{font:0/0
 body.outer .layout > .layout-row > .layout-cell{vertical-align:top}
 body.outer .layout > .layout-row > .layout-cell .outer-form-container{margin:0 auto;width:436px;padding:40px 0}
 body.outer .layout > .layout-row > .layout-cell .outer-form-container h2{font-size:18px;margin:20px 0;color:#feffff}
-body.outer .layout > .layout-row > .layout-cell .outer-form-container .horizontal-form{font-size:0}
+body.outer .layout > .layout-row > .layout-cell .outer-form-container .horizontal-form{font-size:0;display:-webkit-box;display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;display:-ms-flex;display:flex}
 body.outer .layout > .layout-row > .layout-cell .outer-form-container .horizontal-form input{vertical-align:top;margin-right:9px;display:inline-block;border:none;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}
-body.outer .layout > .layout-row > .layout-cell .outer-form-container .horizontal-form input.width-1{width:160px}
-body.outer .layout > .layout-row > .layout-cell .outer-form-container .horizontal-form input.width-2{width:323px}
 body.outer .layout > .layout-row > .layout-cell .outer-form-container .horizontal-form button{background:#0181b9;text-align:center;font-size:13px;font-weight:600;height:40px;vertical-align:top;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
-body.outer .layout > .layout-row > .layout-cell .outer-form-container .horizontal-form button.login-button{display:inline-block;width:98px}
 body.outer .layout > .layout-row > .layout-cell .outer-form-container .forgot-password{margin-top:30px;font-size:13px;top:8px}
 body.outer .layout > .layout-row > .layout-cell .outer-form-container .forgot-password a{color:rgba(255,255,255,0.44)}
 body.outer .layout > .layout-row > .layout-cell .outer-form-container .forgot-password:before{color:rgba(255,255,255,0.44);font-size:14px;position:relative;margin-right:5px}
@@ -855,6 +852,7 @@ html.csstransitions body.outer .outer-form-container{-webkit-transition:all 0.5s
 html.csstransitions body.outer.preload .outer-form-container{-webkit-transform:scale(0.2,0.2);-moz-transform:scale(0.2,0.2);-ms-transform:scale(0.2,0.2);-o-transform:scale(0.2,0.2);transform:scale(0.2,0.2)}
 @media (max-width:768px){body.outer .layout > .layout-row.layout-head > .layout-cell{padding:50px 20px}
 body.outer .layout > .layout-row > .layout-cell .outer-form-container{width:auto;padding:40px}
+body.outer .layout > .layout-row > .layout-cell .outer-form-container .horizontal-form{display:block}
 body.outer .layout > .layout-row > .layout-cell .outer-form-container .horizontal-form input{display:block;width:100% !important;margin-bottom:20px}
 }
 .fancy-layout .tab-collapse-icon{position:absolute;display:block;text-decoration:none;outline:none;opacity:0.6;filter:alpha(opacity=60);-webkit-transition:all 0.3s;transition:all 0.3s;font-size:12px;color:#ffffff;right:11px}
diff --git a/modules/backend/assets/less/layout/outerlayout.less b/modules/backend/assets/less/layout/outerlayout.less
index 61418e219..d733db351 100644
--- a/modules/backend/assets/less/layout/outerlayout.less
+++ b/modules/backend/assets/less/layout/outerlayout.less
@@ -53,6 +53,7 @@ body.outer {
 
                     .horizontal-form {
                         font-size: 0;
+                        .flex-display();
 
                         input {
                             vertical-align: top;
@@ -60,14 +61,6 @@ body.outer {
                             display: inline-block;
                             border: none;
                             .border-radius(2px);
-
-                            &.width-1 {
-                                width: 160px;
-                            }
-
-                            &.width-2 {
-                                width: 323px;
-                            }
                         }
 
                         button {
@@ -78,11 +71,6 @@ body.outer {
                             height: 40px;
                             vertical-align: top;
                             .box-sizing(border-box);
-
-                            &.login-button {
-                                display: inline-block;
-                                width: 98px;
-                            }
                         }
                     }
 
@@ -135,10 +123,14 @@ html.csstransitions {
             width: auto;
             padding: @padding-standard * 2;
 
-            .horizontal-form input {
+            .horizontal-form {
                 display: block;
-                width: 100% !important;
-                margin-bottom: @padding-standard;
+
+                input {
+                    display: block;
+                    width: 100% !important;
+                    margin-bottom: @padding-standard;
+                }
             }
         }
     }
diff --git a/modules/backend/controllers/auth/reset.htm b/modules/backend/controllers/auth/reset.htm
index 369a04288..039178ab4 100644
--- a/modules/backend/controllers/auth/reset.htm
+++ b/modules/backend/controllers/auth/reset.htm
@@ -13,7 +13,7 @@
                 type="password"
                 name="password"
                 value=""
-                class="form-control password width-2 icon lock"
+                class="form-control password icon lock"
                 placeholder="<?= e(trans('backend::lang.account.password_placeholder')) ?>"
                 autocomplete="off"
                 maxlength="255" />
diff --git a/modules/backend/controllers/auth/restore.htm b/modules/backend/controllers/auth/restore.htm
index 6dfe47573..41866b4b0 100644
--- a/modules/backend/controllers/auth/restore.htm
+++ b/modules/backend/controllers/auth/restore.htm
@@ -10,7 +10,7 @@
                 type="text"
                 name="login"
                 value="<?= e(post('login')) ?>"
-                class="form-control width-2 icon user"
+                class="form-control icon user"
                 placeholder="<?= e(trans('backend::lang.account.login_placeholder')) ?>"
                 autocomplete="off"
                 maxlength="255" />
diff --git a/modules/backend/controllers/auth/signin.htm b/modules/backend/controllers/auth/signin.htm
index 6f72956e7..b508a74fd 100644
--- a/modules/backend/controllers/auth/signin.htm
+++ b/modules/backend/controllers/auth/signin.htm
@@ -11,7 +11,7 @@
                 type="text"
                 name="login"
                 value="<?= e(post('login')) ?>"
-                class="form-control width-1 icon user"
+                class="form-control icon user"
                 placeholder="<?= e(trans('backend::lang.account.login_placeholder')) ?>"
                 autocomplete="off"
                 maxlength="255" />
@@ -21,7 +21,7 @@
                 type="password"
                 name="password"
                 value=""
-                class="form-control width-1 icon lock"
+                class="form-control icon lock"
                 placeholder="<?= e(trans('backend::lang.account.password_placeholder')) ?>"
                 autocomplete="off"
                 maxlength="255" />