diff --git a/packages/apps/esm-help-menu-app/src/help-menu/help.component.tsx b/packages/apps/esm-help-menu-app/src/help-menu/help.component.tsx
index 1fc153f89..6628ea3e3 100644
--- a/packages/apps/esm-help-menu-app/src/help-menu/help.component.tsx
+++ b/packages/apps/esm-help-menu-app/src/help-menu/help.component.tsx
@@ -1,10 +1,12 @@
 import React, { useState, useEffect, useRef } from 'react';
 import classNames from 'classnames';
 import { Help } from '@carbon/react/icons';
+import { useSession } from '@openmrs/esm-framework'
 import HelpMenuPopup from './help-popup.component';
 import styles from './help.styles.scss';
 
 export default function HelpMenu() {
+  const { user } = useSession();
   const [helpMenuOpen, setHelpMenuOpen] = useState(false);
   const helpMenuButtonRef = useRef(null);
   const popupRef = useRef(null);
@@ -35,15 +37,17 @@ export default function HelpMenu() {
 
   return (
     <>
-      <button
-        aria-expanded={helpMenuOpen}
-        aria-controls="help-menu-popup"
-        onClick={toggleHelpMenu}
-        ref={helpMenuButtonRef}
-        className={classNames(styles.helpMenuButton)}
-      >
-        <Help size={24} />
-      </button>
+      {user && (
+        <button
+          aria-expanded={helpMenuOpen}
+          aria-controls="help-menu-popup"
+          onClick={toggleHelpMenu}
+          ref={helpMenuButtonRef}
+          className={classNames(styles.helpMenuButton)}
+        >
+          <Help size={24} />
+        </button>
+      )}
       {helpMenuOpen && (
         <div id="help-menu-popup" ref={popupRef} className={styles.helpMenuPopup}>
           <HelpMenuPopup />
diff --git a/packages/apps/esm-login-app/src/footer.component.tsx b/packages/apps/esm-login-app/src/footer.component.tsx
index 130753f67..85540fffc 100644
--- a/packages/apps/esm-login-app/src/footer.component.tsx
+++ b/packages/apps/esm-login-app/src/footer.component.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import { interpolateUrl, useConfig } from '@openmrs/esm-framework';
+import { useConfig, ArrowRightIcon } from '@openmrs/esm-framework';
+import { Tile, Button } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
 import { type ConfigSchema } from './config-schema';
 import styles from './login/login.scss';
@@ -11,11 +12,28 @@ const Footer: React.FC = () => {
 
   return (
     <div className={styles.footer}>
-      <p className={styles.poweredByTxt}>{t('poweredBy', 'Powered by')}</p>
+      <Tile className={styles.poweredByTile}>
+        <div className={styles.poweredByContainer}>
+          <span className={styles.poweredByText}>{t('builtWith', 'Built with')}</span>
+            <svg role="img" className={styles.poweredByLogo}>
+              <use href="#omrs-logo-full-color"></use>
+            </svg>
+          <span className={styles.poweredByText}>
+            {t('poweredBySubtext', 'An open-source medical record system and global community')}
+          </span>
+          <Button
+            className={styles.learnMore}
+            iconDescription={t('learnMore', 'Learn More')}
+            kind="ghost"
+            onClick={() => window.open('https://openmrs.org', '_blank')}
+            renderIcon={(props) => <ArrowRightIcon {...props} size={20} className={styles.arrowRightIcon}/>}
+          >
+            <span>{t('learnMore', 'Learn More')}</span>
+          </Button>
+        </div>
+      </Tile>
+
       <div className={styles.logosContainer}>
-        <svg role="img" className={styles.poweredByLogo}>
-          <use href="#omrs-logo-partial-mono"></use>
-        </svg>
         {logos.map((logo, index) => (
           <img
             key={index}
diff --git a/packages/apps/esm-login-app/src/login/login.component.tsx b/packages/apps/esm-login-app/src/login/login.component.tsx
index 6213fcd94..e2abad854 100644
--- a/packages/apps/esm-login-app/src/login/login.component.tsx
+++ b/packages/apps/esm-login-app/src/login/login.component.tsx
@@ -1,13 +1,12 @@
 import React, { useState, useRef, useEffect, useCallback } from 'react';
-import { type To, useLocation, useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { Button, InlineLoading, InlineNotification, PasswordInput, TextInput, Tile } from '@carbon/react';
 import {
-  ArrowLeftIcon,
   ArrowRightIcon,
   getCoreTranslation,
-  navigate as openmrsNavigate,
   refetchCurrentUser,
+  navigate as openmrsNavigate,
   useConfig,
   useConnectivity,
   useSession,
@@ -21,13 +20,6 @@ export interface LoginReferrer {
   referrer?: string;
 }
 
-const hidden: React.CSSProperties = {
-  height: 0,
-  width: 0,
-  border: 0,
-  padding: 0,
-};
-
 const Login: React.FC = () => {
   const { showPasswordOnSeparateScreen, provider: loginProvider, links: loginLinks } = useConfig<ConfigSchema>();
   const isLoginEnabled = useConnectivity();
@@ -36,26 +28,16 @@ const Login: React.FC = () => {
   const location = useLocation() as unknown as Omit<Location, 'state'> & {
     state: LoginReferrer;
   };
-
-  const rawNavigate = useNavigate();
-  const navigate = useCallback(
-    (to: To) => {
-      rawNavigate(to, { state: location.state });
-    },
-    [rawNavigate, location.state],
-  );
+  const navigate = useNavigate();
 
   const [errorMessage, setErrorMessage] = useState('');
   const [isLoggingIn, setIsLoggingIn] = useState(false);
   const [password, setPassword] = useState('');
   const [username, setUsername] = useState('');
-  const formRef = useRef<HTMLFormElement>(null);
+  const [showPasswordField, setShowPasswordField] = useState(false);
   const passwordInputRef = useRef<HTMLInputElement>(null);
   const usernameInputRef = useRef<HTMLInputElement>(null);
 
-  const showUsername = location.pathname === '/login';
-  const showPassword = !showPasswordOnSeparateScreen || location.pathname === '/login/confirm';
-
   useEffect(() => {
     if (!user) {
       if (loginProvider.type === 'oauth2') {
@@ -67,24 +49,26 @@ const Login: React.FC = () => {
   }, [username, navigate, location, user, loginProvider]);
 
   useEffect(() => {
-    const fieldToFocus =
-      showPasswordOnSeparateScreen && showPassword ? passwordInputRef.current : usernameInputRef.current;
-
-    fieldToFocus?.focus();
-  }, [showPassword, showPasswordOnSeparateScreen]);
+    if (showPasswordOnSeparateScreen) {
+      if (showPasswordField) {
+        passwordInputRef.current?.focus(); 
+      } else {
+        usernameInputRef.current?.focus(); 
+      }
+    }
+  }, [showPasswordField, showPasswordOnSeparateScreen]);
 
   const continueLogin = useCallback(() => {
     const usernameField = usernameInputRef.current;
 
-    if (usernameField.value && usernameField.value.trim()) {
-      navigate('/login/confirm');
+    if (usernameField?.value.trim()) {
+      setShowPasswordField(true);
     } else {
-      usernameField.focus();
+      usernameField?.focus();
     }
-  }, [location.state, navigate]);
+  }, []);
 
   const changeUsername = useCallback((evt: React.ChangeEvent<HTMLInputElement>) => setUsername(evt.target.value), []);
-
   const changePassword = useCallback((evt: React.ChangeEvent<HTMLInputElement>) => setPassword(evt.target.value), []);
 
   const handleSubmit = useCallback(
@@ -92,20 +76,22 @@ const Login: React.FC = () => {
       evt.preventDefault();
       evt.stopPropagation();
 
-      if (!showPassword) {
+      if (showPasswordOnSeparateScreen && !showPasswordField) {
         continueLogin();
         return false;
-      } else if (!password || !password.trim()) {
-        passwordInputRef.current.focus();
+      }
+
+      if (!password || !password.trim()) {
+        passwordInputRef.current?.focus();
         return false;
       }
 
       try {
         setIsLoggingIn(true);
-
         const sessionStore = await refetchCurrentUser(username, password);
         const session = sessionStore.session;
         const authenticated = sessionStore?.session?.authenticated;
+
         if (authenticated) {
           if (session.sessionLocation) {
             let to = loginLinks?.loginSuccess || '/home';
@@ -125,9 +111,8 @@ const Login: React.FC = () => {
           setErrorMessage(t('invalidCredentials', 'Invalid username or password'));
           setUsername('');
           setPassword('');
-
           if (showPasswordOnSeparateScreen) {
-            navigate('/login');
+            setShowPasswordField(false);
           }
         }
 
@@ -138,117 +123,98 @@ const Login: React.FC = () => {
         } else {
           setErrorMessage(t('invalidCredentials', 'Invalid username or password'));
         }
-
         setUsername('');
         setPassword('');
-
         if (showPasswordOnSeparateScreen) {
-          navigate('/login');
+          setShowPasswordField(false);
         }
       } finally {
         setIsLoggingIn(false);
       }
-
-      return false;
     },
-
-    [showPassword, username, password, navigate],
+    [username, password, navigate, showPasswordOnSeparateScreen],
   );
 
-  if (!loginProvider || loginProvider.type === 'basic') {
-    return (
-      <div className={styles.container}>
-        <Tile className={styles.loginCard}>
-          {errorMessage && (
-            <div className={styles.errorMessage}>
-              <InlineNotification
-                kind="error"
-                subtitle={t(errorMessage)}
-                title={getCoreTranslation('error')}
-                onClick={() => setErrorMessage('')}
-              />
-            </div>
-          )}
-          {showPasswordOnSeparateScreen && showPassword ? (
-            <div className={styles.backButtonDiv}>
-              <Button
-                className={styles.backButton}
-                iconDescription={t('backToUserNameIconLabel', 'Back to username')}
-                kind="ghost"
-                onClick={() => navigate('/login')}
-                renderIcon={(props) => <ArrowLeftIcon {...props} size={24} />}
-              >
-                <span>{t('back', 'Back')}</span>
-              </Button>
-            </div>
-          ) : null}
-          <div className={styles.center}>
-            <Logo t={t} />
+  return (
+    <div className={styles.container}>
+      <Tile className={styles.loginCard}>
+        {errorMessage && (
+          <div className={styles.errorMessage}>
+            <InlineNotification
+              kind="error"
+              subtitle={t(errorMessage)}
+              title={getCoreTranslation('error')}
+              onClick={() => setErrorMessage('')}
+            />
           </div>
-          <form onSubmit={handleSubmit} ref={formRef}>
-            {showUsername && (
-              <div className={styles.inputGroup}>
-                <TextInput
-                  id="username"
-                  type="text"
-                  name="username"
-                  labelText={t('username', 'Username')}
-                  value={username}
-                  onChange={changeUsername}
-                  ref={usernameInputRef}
-                  autoFocus
-                  required
-                />
-                {/* For password managers */}
-                {showPasswordOnSeparateScreen && (
-                  <input
+        )}
+        <div className={styles.center}>
+          <Logo t={t} />
+        </div>
+        <form onSubmit={handleSubmit}>
+          <div className={styles.inputGroup}>
+            <TextInput
+              id="username"
+              type="text"
+              labelText={t('username', 'Username')}
+              value={username}
+              onChange={changeUsername}
+              ref={usernameInputRef}
+              required
+              autoFocus
+            />
+            {showPasswordOnSeparateScreen ? (
+              showPasswordField ? (
+                <>
+                  <PasswordInput
                     id="password"
-                    style={hidden}
-                    type="password"
+                    labelText={t('password', 'Password')}
                     name="password"
-                    value={password}
                     onChange={changePassword}
+                    ref={passwordInputRef}
+                    required
+                    value={password}
+                    showPasswordLabel={t('showPassword', 'Show password')}
+                    invalidText={t('validValueRequired', 'A valid value is required')}
                   />
-                )}
-                {showPasswordOnSeparateScreen && (
                   <Button
+                    type="submit"
                     className={styles.continueButton}
                     renderIcon={(props) => <ArrowRightIcon size={24} {...props} />}
-                    type="submit"
-                    iconDescription="Continue to login"
-                    onClick={continueLogin}
-                    disabled={!isLoginEnabled}
+                    iconDescription="Log in"
+                    disabled={!isLoginEnabled || isLoggingIn}
                   >
-                    {t('continue', 'Continue')}
+                    {isLoggingIn ? (
+                      <InlineLoading className={styles.loader} description={t('loggingIn', 'Logging in') + '...'} />
+                    ) : (
+                      t('login', 'Log in')
+                    )}
                   </Button>
-                )}
-              </div>
-            )}
-            {showPassword && (
-              <div className={styles.inputGroup}>
+                </>
+              ) : (
+                <Button
+                  className={styles.continueButton}
+                  renderIcon={(props) => <ArrowRightIcon size={24} {...props} />}
+                  iconDescription="Continue to password"
+                  onClick={continueLogin}
+                  disabled={!isLoginEnabled}
+                >
+                  {t('continue', 'Continue')}
+                </Button>
+              )
+            ) : (
+              <>
                 <PasswordInput
                   id="password"
-                  invalidText={t('validValueRequired', 'A valid value is required')}
                   labelText={t('password', 'Password')}
                   name="password"
                   onChange={changePassword}
                   ref={passwordInputRef}
                   required
-                  showPasswordLabel={t('showPassword', 'Show password')}
                   value={password}
+                  showPasswordLabel={t('showPassword', 'Show password')}
+                  invalidText={t('validValueRequired', 'A valid value is required')}
                 />
-                {/* For password managers */}
-                {showPasswordOnSeparateScreen && (
-                  <input
-                    id="username"
-                    type="text"
-                    name="username"
-                    style={hidden}
-                    value={username}
-                    onChange={changeUsername}
-                    required
-                  />
-                )}
                 <Button
                   type="submit"
                   className={styles.continueButton}
@@ -259,19 +225,17 @@ const Login: React.FC = () => {
                   {isLoggingIn ? (
                     <InlineLoading className={styles.loader} description={t('loggingIn', 'Logging in') + '...'} />
                   ) : (
-                    <span>{t('login', 'Log in')}</span>
+                    t('login', 'Log in')
                   )}
                 </Button>
-              </div>
+              </>
             )}
-          </form>
-        </Tile>
-       <Footer/>
-      </div>
-    );
-  }
-
-  return null;
+          </div>
+        </form>
+      </Tile>
+      <Footer />
+    </div>
+  );
 };
 
-export default Login;
+export default Login;
\ No newline at end of file
diff --git a/packages/apps/esm-login-app/src/login/login.scss b/packages/apps/esm-login-app/src/login/login.scss
index e8418be4a..c98b83276 100644
--- a/packages/apps/esm-login-app/src/login/login.scss
+++ b/packages/apps/esm-login-app/src/login/login.scss
@@ -52,29 +52,59 @@
 
 .footer {
   display: flex;
-  flex-direction: column;
+  justify-content: space-between; 
   align-items: center;
-  padding: 1.5rem;
+  padding: 1rem;
+  position: absolute; 
+  bottom: 0;
+  flex-wrap: wrap;
+  gap: 1rem; 
+  width: 100%;
+}
+
+.poweredByTile {
+  display: flex;
+  text-align: left;
+  max-width: fit-content;
+  min-height: fit-content;
+  font-size: smaller;
+  background-color: #ffffff;
+  padding: 0.5rem 1rem;
+  border: 1px solid #e0e0e0;
+  border-radius: 1rem;
+  flex-wrap: wrap;
 }
 
 .logosContainer {
-  margin-right: 0;
   display: flex;
-  justify-content: center;
+  max-height: 2rem;
+  justify-content: flex-end;
   flex-direction: row;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 2rem; 
+  gap: 0.5rem;
   filter: grayscale(100%);
-  opacity: 1;
+  opacity: 80%;
+}
+
+.poweredByContainer{
+  display: flex;
+  height: 1.5rem;
+  align-items: center;
+  gap: 0.5rem;
 }
 
 .poweredByLogo {
-  height: 3rem;
+  height: 2rem; 
   width: auto;
-  max-width: 8rem;  
+  max-width: 6rem;
+  border-collapse: collapse;
+  padding: 0;
   object-fit: contain;
-  display: block;
+  display: block; 
+  flex-shrink: 0;
+}
+
+.poweredByLogo + .poweredByText {
+  margin-left: 0.25rem;
 }
 
 .loginCard {
@@ -83,6 +113,7 @@
   background-color: $ui-02;
   width: 23rem;
   padding: 2.5rem;
+  border-radius: 0.5rem;
   position: relative;
   min-height: fit-content;
 }
@@ -93,6 +124,30 @@
   }
 }
 
+@media only screen and (max-width: 1024px) {
+  .footer {
+    flex-direction: row;
+    justify-content: center; 
+    padding: 1rem;
+  }
+
+  .poweredByTile {
+    padding: 1rem 0.5rem;
+    font-size: 0.8rem;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .logosContainer {
+    justify-content: center;
+    gap: 0.75rem;
+  }
+
+  .container{
+    height: 100vh;
+  }
+}
+
 @media only screen and (max-width: 480px) {
   .login-card {
     margin-top: 2.5%;
@@ -102,6 +157,25 @@
   .container {
     height: 100vh;
   }
+
+  .footer {
+    flex-direction: column;
+    align-items: center; 
+    justify-content: center;
+    gap: 0.5rem; 
+    padding: 1rem;
+  }
+
+  .poweredByTile {
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding: 1.2rem 1rem;
+    font-size: 0.7rem; 
+    height: auto; 
+    max-width: 100%;
+    border-radius: 0.75rem;
+  }
 }
 
 .inputGroup {
@@ -110,6 +184,7 @@
   flex-direction: column;
   align-items: center;
   width: 18rem;
+  gap: 1rem;
 
   :global(.cds--text-input) {
     height: 3rem;