diff --git a/src/components/element-separator/element-separator.tsx b/src/components/element-separator/element-separator.tsx
index f9cb33021..14d065d75 100644
--- a/src/components/element-separator/element-separator.tsx
+++ b/src/components/element-separator/element-separator.tsx
@@ -8,13 +8,18 @@ export const ElementSeparator: React.FC<ElementSeparatorProps> = ({children, sep
     return (
         <Fragment>
             {
-                React.Children.map(children, (child, index) => {
-                    return <Fragment>
-                        {
-                            (index > 0) ? separator : null
-                        }
-                        {child}
-                    </Fragment>
+                React.Children
+                    .toArray(children)
+                    .filter(child => child !== null)
+                    .map((child, index) => {
+                        return (
+                            <Fragment>
+                                {
+                                    (index > 0 ) ? separator : null
+                                }
+                                {child}
+                            </Fragment>
+                        )
                 })
             }
         </Fragment>
diff --git a/src/components/landing/pages/login/login.tsx b/src/components/landing/pages/login/login.tsx
index 66a0d8be3..5c3671553 100644
--- a/src/components/landing/pages/login/login.tsx
+++ b/src/components/landing/pages/login/login.tsx
@@ -8,6 +8,7 @@ import {useSelector} from "react-redux";
 import {ApplicationState} from "../../../../redux";
 import {ViaOpenId} from "./auth/via-open id";
 import "./login.scss";
+import {ElementSeparator} from "../../../element-separator/element-separator";
 
 const Login: React.FC = () => {
     useTranslation();
@@ -16,8 +17,6 @@ const Login: React.FC = () => {
     const emailForm = authProviders.email ? <ViaEMail/> : null
     const ldapForm = authProviders.ldap ? <ViaLdap/> : null
     const openIdForm = authProviders.openid ? <ViaOpenId/> : null
-    const emailLdapSeparator = authProviders.email && authProviders.ldap ? <hr className="w-100 bg-white"/> : null
-    const ldapOpenIdSeparator = authProviders.ldap && authProviders.openid ? <hr className="w-100 bg-white"/> : null
 
     const oneClickCustomName: (type: OneClickType) => string | undefined = (type) => {
         switch (type) {
@@ -35,13 +34,13 @@ const Login: React.FC = () => {
             <div className="my-3">
                 <Row className="h-100 flex justify-content-center">
                     {
-                        authProviders.email || authProviders.ldap ?
+                        authProviders.email || authProviders.ldap || authProviders.openid ?
                             <Col xs={12} sm={10} lg={3}>
-                                {emailForm}
-                                {emailLdapSeparator}
-                                {ldapForm}
-                                {ldapOpenIdSeparator}
-                                {openIdForm}
+                                <ElementSeparator separator={<hr className="w-100 bg-white"/>}>
+                                    {emailForm}
+                                    {ldapForm}
+                                    {openIdForm}
+                                </ElementSeparator>
                                 <hr className="w-100 d-lg-none d-block bg-white"/>
                             </Col>
                             : null