diff --git a/webui/src/lib/components/navbar.jsx b/webui/src/lib/components/navbar.jsx
index 7421facbae5..e67643742df 100644
--- a/webui/src/lib/components/navbar.jsx
+++ b/webui/src/lib/components/navbar.jsx
@@ -64,39 +64,31 @@ const TopNavLink = ({ href, children }) => {
 };
 
 const TopNav = ({logged = true}) => {
-    if (!logged) {
+    if (logged) {
         return (
-            <Navbar variant="dark" bg="dark" expand="md">
-            <Container fluid={true}>
-                <Link component={Navbar.Brand} href="/">
-                    <img src="/logo.png" alt="lakeFS" className="logo"/>
-                </Link>
-            </Container>
+            <Navbar variant="dark" bg="dark" expand="md" className="border-bottom">
+                <Container fluid={true}>
+                    <Link component={Navbar.Brand} href="/">
+                        <img src="/logo.png" alt="lakeFS" className="logo"/>
+                    </Link>
+                    <Navbar.Toggle aria-controls="navbarScroll" />
+                    <Navbar.Collapse id="navbarScroll">
+
+                        <Nav className="me-auto my-2 my-lg-0"
+                             style={{ maxHeight: '100px' }}
+                             navbarScroll>
+                            <TopNavLink href="/repositories">Repositories</TopNavLink>
+                            <TopNavLink href="/auth">Administration</TopNavLink>
+                        </Nav>
+
+                        <DarkModeToggle/>
+                        <NavUserInfo/>
+                    </Navbar.Collapse>
+                </Container>
             </Navbar>
         );
     }
-    return (
-        <Navbar variant="dark" bg="dark" expand="md" className="border-bottom">
-            <Container fluid={true}>
-                <Link component={Navbar.Brand} href="/">
-                    <img src="/logo.png" alt="lakeFS" className="logo"/>
-                </Link>
-                <Navbar.Toggle aria-controls="navbarScroll" />
-                <Navbar.Collapse id="navbarScroll">
-
-                    <Nav className="me-auto my-2 my-lg-0"
-                         style={{ maxHeight: '100px' }}
-                         navbarScroll>
-                        <TopNavLink href="/repositories">Repositories</TopNavLink>
-                        <TopNavLink href="/auth">Administration</TopNavLink>
-                    </Nav>
-
-                    <DarkModeToggle/>
-                    <NavUserInfo/>
-                </Navbar.Collapse>
-            </Container>
-        </Navbar>
-    );
+    return null;
 };
 
 export default TopNav;
diff --git a/webui/src/pages/auth/login.tsx b/webui/src/pages/auth/login.tsx
index 3e1a574672c..f15e3e153aa 100644
--- a/webui/src/pages/auth/login.tsx
+++ b/webui/src/pages/auth/login.tsx
@@ -1,8 +1,6 @@
 import React, {useState} from "react";
-import Row from "react-bootstrap/Row";
 import Card from "react-bootstrap/Card";
 import Form from "react-bootstrap/Form";
-import Col from "react-bootstrap/Col";
 import Button from "react-bootstrap/Button";
 import {auth, AuthenticationError, setup, SETUP_STATE_INITIALIZED} from "../../lib/api";
 import {AlertError, Loading} from "../../lib/components/controls"
@@ -32,77 +30,88 @@ export interface LoginConfig {
 const LoginForm = ({loginConfig}: {loginConfig: LoginConfig}) => {
     const router = useRouter();
     const navigate = useNavigate();
-    const [loginError, setLoginError] = useState(null);
+    const [loginError, setLoginError] = useState<React.ReactNode>(null);
     const { next } = router.query;
     const usernamePlaceholder = loginConfig.username_ui_placeholder || "Access Key ID";
     const passwordPlaceholder = loginConfig.password_ui_placeholder || "Secret Access Key";
+
     return (
-        <Row>
-            <Col md={{offset: 4, span: 4}}>
-                <Card className="login-widget shadow-lg border-0">
-                    <Card.Header className="text">
-                        <h4 className="mb-0">Login</h4>
-                    </Card.Header>
-                    <Card.Body className="p-4">
-                        <Form onSubmit={async (e) => {
-                            e.preventDefault()
-                            try {
-                                setLoginError(null);
-                                await auth.login(e.target.username.value, e.target.password.value)
-                                router.push(next || '/');
-                                navigate(0);
-                            } catch(err) {
-                                if (err instanceof AuthenticationError && err.status === 401) {
-                                    const contents = {__html: `${loginConfig.login_failed_message}` ||
+        <div className="d-flex align-items-center justify-content-center">
+            <Card className="shadow-lg border-0 login-card">
+                <Card.Header className="text-center">
+                    <div className="mb-3">
+                        <img src="/logo.png" alt="lakeFS" className="login-logo" />
+                    </div>
+                </Card.Header>
+                <Card.Body className="p-4">
+                    <Form onSubmit={async (e) => {
+                        e.preventDefault()
+                        const form = e.target as HTMLFormElement;
+                        const formData = new FormData(form);
+                        try {
+                            setLoginError(null);
+                            const username = formData.get('username');
+                            const password = formData.get('password');
+                            if (typeof username === 'string' && typeof password === 'string') {
+                                await auth.login(username, password);
+                            }
+                            router.push(next || '/');
+                            navigate(0);
+                        } catch(err) {
+                            if (err instanceof AuthenticationError && err.status === 401) {
+                                const contents = {__html: `${loginConfig.login_failed_message}` ||
                                         "Credentials don't match."};
-                                    setLoginError(<span dangerouslySetInnerHTML={contents}/>);
-                                }
+                                setLoginError(<span dangerouslySetInnerHTML={contents}/>);
                             }
-                        }}>
-                            <Form.Group controlId="username" className="mb-3">
-                                <Form.Control 
-                                    type="text" 
-                                    placeholder={usernamePlaceholder} 
-                                    autoFocus
-                                    className="bg-light"
-                                />
-                            </Form.Group>
+                        }
+                    }}>
+                        <Form.Group controlId="username" className="mb-3">
+                            <Form.Control
+                                name="username"
+                                type="text"
+                                placeholder={usernamePlaceholder}
+                                autoFocus
+                                className="bg-light"
+                            />
+                        </Form.Group>
 
-                            <Form.Group controlId="password" className="mb-3">
-                                <Form.Control 
-                                    type="password" 
-                                    placeholder={passwordPlaceholder}
-                                    className="bg-light"
-                                />
-                            </Form.Group>
+                        <Form.Group controlId="password" className="mb-3">
+                            <Form.Control
+                                name="password"
+                                type="password"
+                                placeholder={passwordPlaceholder}
+                                className="bg-light"
+                            />
+                        </Form.Group>
 
-                            {(!!loginError) && <AlertError error={loginError}/>}
+                        {(!!loginError) && <AlertError error={loginError}/>}
 
-                            <Button 
-                                variant="primary" 
-                                type="submit" 
-                                className="w-100 mt-3 py-2"
-                            >
-                                Login
-                            </Button>
-                        </Form>
-                        <div className={"mt-2 mb-1"}>
-                            { loginConfig.fallback_login_url ?
-                                <Button variant="link" className="text-secondary mt-2" onClick={async ()=> {
-                                    loginConfig.login_cookie_names?.forEach(
-                                        cookie => {
-                                            document.cookie = `${cookie}=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;`;
-                                        }
-                                    );
-                                    window.location = loginConfig.fallback_login_url;
-                                }}>{loginConfig.fallback_login_label || 'Try another way to login'}</Button>
-                                : ""
-                            }
-                        </div>
-                    </Card.Body>
-                </Card>
-            </Col>
-        </Row>
+                        <Button
+                            variant="primary"
+                            type="submit"
+                            className="w-100 mt-3 py-2"
+                        >
+                            Login
+                        </Button>
+                    </Form>
+                    <div className={"mt-2 mb-1"}>
+                        { loginConfig.fallback_login_url ?
+                            <Button variant="link" className="text-secondary mt-2" onClick={async ()=> {
+                                loginConfig.login_cookie_names?.forEach(
+                                    cookie => {
+                                        document.cookie = `${cookie}=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;`;
+                                    }
+                                );
+                                if (loginConfig.fallback_login_url) {
+                                    window.location.href = loginConfig.fallback_login_url;
+                                }
+                            }}>{loginConfig.fallback_login_label || 'Try another way to login'}</Button>
+                            : ""
+                        }
+                    </div>
+                </Card.Body>
+            </Card>
+        </div>
     )
 }
 
@@ -151,4 +160,4 @@ const LoginPage = () => {
     );
 };
 
-export default LoginPage;
+export default LoginPage;
\ No newline at end of file
diff --git a/webui/src/styles/auth.css b/webui/src/styles/auth.css
index c27090fdf55..320ef1e2db4 100644
--- a/webui/src/styles/auth.css
+++ b/webui/src/styles/auth.css
@@ -92,3 +92,15 @@ body .auth-page .nav-pills .nav-link:hover {
 .auth-page .nav-pills .nav-link.active {
   background-color: var(--success) !important;
 }
+
+.login-card {
+  max-width: 600px;
+  width: 90%;
+  margin: 50px auto auto auto;
+}
+
+.login-logo {
+  width: 359px;
+  height: 82px;
+  filter: brightness(0) saturate(100%);
+}
\ No newline at end of file