diff --git a/src/Common/hooks/useConfig.ts b/src/Common/hooks/useConfig.ts
index 4e1cb806e3f..03d9dada9b9 100644
--- a/src/Common/hooks/useConfig.ts
+++ b/src/Common/hooks/useConfig.ts
@@ -14,14 +14,23 @@ export interface IConfig {
   site_url: string;
   analytics_server_url: string;
 
-  header_logo: ILogo;
+  /**
+   * The main logo of the app displayed on login and sidebar header.
+   */
   main_logo: ILogo;
-
   /**
-   * Logo and description for custom deployment. (This overrides the state logo)
+   * If present, the image will be displayed on the login page before the main logo.
+   */
+  state_logo?: ILogo;
+  /**
+   * if present, this replaces the state logo on the login page only.
    */
   custom_logo?: ILogo;
+  /**
+   * if present, this replaces the main logo on the login page only.
+   */
   custom_logo_alt?: ILogo;
+
   custom_description?: string;
 
   /**
@@ -41,13 +50,15 @@ export interface IConfig {
    * SENTRY_ENVIRONMENT
    */
   sentry_environment: string;
+
+  /**
+   * The header banner is displayed on the top of
+   * the shift print form if the facility is kasp.
+   */
+  header_logo: ILogo;
   kasp_enabled: boolean;
   kasp_string: string;
   kasp_full_string: string;
-  /**
-   * If present, the image will be displayed in the login page.
-   */
-  state_logo?: ILogo;
   /**
    * URL of the sample format for asset import.
    */
diff --git a/src/Components/Auth/Login.tsx b/src/Components/Auth/Login.tsx
index 8dcae9bafc0..62c9d632769 100644
--- a/src/Components/Auth/Login.tsx
+++ b/src/Components/Auth/Login.tsx
@@ -252,160 +252,161 @@ export const Login = (props: { forgot?: boolean }) => {
       </div>
 
       <div className="login-hero-form my-4 w-full md:mt-0 md:h-full md:w-1/2">
-        <div className="relative flex h-full items-center justify-center">
-          <div
-            className={
-              "w-full p-8 transition-all md:w-4/5 md:p-0 lg:w-[400px] " +
-              (forgotPassword
-                ? "invisible -translate-x-5 opacity-0"
-                : "visible -translate-x-0 opacity-100")
-            }
-          >
-            <div className="flex items-center gap-1">
+        <div className="relative h-full items-center justify-center md:flex">
+          <div className="p-8 md:w-4/5 md:p-0 lg:w-[400px]">
+            <div className="flex items-center gap-1 md:hidden">
               {(custom_logo || state_logo) && (
                 <>
                   <img
                     src={custom_logo?.dark ?? state_logo?.dark}
-                    className="h-14 rounded-lg py-3 md:hidden"
+                    className="h-14 rounded-lg py-3"
                     alt="state logo"
                   />
-                  <div className="mx-4 h-8 w-[1px] rounded-full bg-gray-600 md:hidden" />
+                  <div className="mx-4 h-8 w-[1px] rounded-full bg-gray-600" />
                 </>
               )}
               <img
                 src={custom_logo_alt?.dark ?? main_logo.dark}
-                className="h-8 w-auto md:hidden"
+                className="h-8 w-auto"
                 alt="care logo"
               />
-            </div>{" "}
-            <div className="mb-8 w-[300px] text-4xl font-black text-primary-600">
-              {t("auth_login_title")}
             </div>
-            <form onSubmit={handleSubmit}>
-              <div>
-                <LegendInput
-                  name="username"
-                  id="username"
-                  type="TEXT"
-                  legend={t("username")}
-                  value={form.username}
-                  onChange={handleChange}
-                  error={errors.username}
-                  outerClassName="mb-4"
-                  size="large"
-                  className="font-extrabold"
-                />
-                <LegendInput
-                  type="PASSWORD"
-                  name="password"
-                  id="password"
-                  legend={t("password")}
-                  value={form.password}
-                  onChange={handleChange}
-                  error={errors.password}
-                  size="large"
-                  className="font-extrabold"
-                />
-                <div className="justify-start">
-                  {isCaptchaEnabled && (
-                    <div className="grid px-8 py-4">
-                      <ReCaptcha
-                        sitekey={recaptcha_site_key}
-                        onChange={onCaptchaChange}
-                      />
-                      <span className="text-red-500">{errors.captcha}</span>
-                    </div>
-                  )}
 
-                  <div className="flex w-full items-center justify-between py-4">
-                    <button
-                      onClick={() => {
-                        setForgotPassword(true);
-                      }}
-                      type="button"
-                      className="text-sm text-primary-400 hover:text-primary-500"
-                    >
-                      {t("forget_password")}
-                    </button>
-                  </div>
+            <div className="relative flex h-full w-full items-center">
+              <div
+                className={
+                  "w-full transition-all " +
+                  (!forgotPassword
+                    ? "visible -translate-x-0 opacity-100"
+                    : "invisible -translate-x-5 opacity-0")
+                }
+              >
+                <div className="mb-8 w-[300px] text-4xl font-black text-primary-600">
+                  {t("auth_login_title")}
+                </div>
+                <form onSubmit={handleSubmit}>
+                  <div>
+                    <LegendInput
+                      name="username"
+                      id="username"
+                      type="TEXT"
+                      legend={t("username")}
+                      value={form.username}
+                      onChange={handleChange}
+                      error={errors.username}
+                      outerClassName="mb-4"
+                      size="large"
+                      className="font-extrabold"
+                    />
+                    <LegendInput
+                      type="PASSWORD"
+                      name="password"
+                      id="password"
+                      legend={t("password")}
+                      value={form.password}
+                      onChange={handleChange}
+                      error={errors.password}
+                      size="large"
+                      className="font-extrabold"
+                    />
+                    <div className="justify-start">
+                      {isCaptchaEnabled && (
+                        <div className="grid px-8 py-4">
+                          <ReCaptcha
+                            sitekey={recaptcha_site_key}
+                            onChange={onCaptchaChange}
+                          />
+                          <span className="text-red-500">{errors.captcha}</span>
+                        </div>
+                      )}
 
-                  {loading ? (
-                    <div className="flex items-center justify-center">
-                      <CircularProgress className="text-primary-500" />
+                      <div className="flex w-full items-center justify-between py-4">
+                        <button
+                          onClick={() => {
+                            setForgotPassword(true);
+                          }}
+                          type="button"
+                          className="text-sm text-primary-400 hover:text-primary-500"
+                        >
+                          {t("forget_password")}
+                        </button>
+                      </div>
+
+                      {loading ? (
+                        <div className="flex items-center justify-center">
+                          <CircularProgress className="text-primary-500" />
+                        </div>
+                      ) : (
+                        <button
+                          type="submit"
+                          className="inline-flex w-full cursor-pointer items-center justify-center rounded bg-primary-500 px-4 py-2 text-sm font-semibold text-white"
+                        >
+                          {t("login")}
+                        </button>
+                      )}
                     </div>
-                  ) : (
-                    <button
-                      type="submit"
-                      className="inline-flex w-full cursor-pointer items-center justify-center rounded bg-primary-500 px-4 py-2 text-sm font-semibold text-white"
-                    >
-                      {t("login")}
-                    </button>
-                  )}
-                </div>
-              </div>
-            </form>
-            <LanguageSelectorLogin />
-          </div>
-          <div
-            className={
-              "absolute w-full p-8 transition-all md:w-4/5 md:p-0 lg:w-[400px] " +
-              (!forgotPassword
-                ? "invisible translate-x-5 opacity-0"
-                : "visible translate-x-0 opacity-100")
-            }
-          >
-            <img
-              src={main_logo.dark}
-              className="mb-4 h-8 w-auto md:hidden"
-              alt="care logo"
-            />{" "}
-            <button
-              onClick={() => {
-                setForgotPassword(false);
-              }}
-              type="button"
-              className="mb-4 text-sm text-primary-400 hover:text-primary-500"
-            >
-              <div className="flex justify-center">
-                <CareIcon className="care-l-arrow-left text-lg" />
-                <span>{t("back_to_login")}</span>
+                  </div>
+                </form>
+                <LanguageSelectorLogin />
               </div>
-            </button>
-            <div className="mb-8 w-[300px] text-4xl font-black text-primary-600">
-              {t("forget_password")}
-            </div>
-            <form onSubmit={handleForgetSubmit}>
-              <div>
-                {t("forget_password_instruction")}
-                <LegendInput
-                  id="forgot_username"
-                  name="username"
-                  type="TEXT"
-                  legend={t("username")}
-                  value={form.username}
-                  onChange={handleChange}
-                  error={errors.username}
-                  outerClassName="my-4"
-                  size="large"
-                  className="font-extrabold"
-                />
-                <div className="justify-start">
-                  {loading ? (
-                    <div className="flex items-center justify-center">
-                      <CircularProgress className="text-primary-500" />
-                    </div>
-                  ) : (
-                    <button
-                      type="submit"
-                      className="inline-flex w-full cursor-pointer items-center justify-center rounded bg-primary-500 px-4 py-2 text-sm font-semibold text-white"
-                    >
-                      {t("send_reset_link")}
-                    </button>
-                  )}
+
+              <div
+                className={
+                  "absolute w-full transition-all " +
+                  (forgotPassword
+                    ? "visible translate-x-0 opacity-100"
+                    : "invisible translate-x-5 opacity-0")
+                }
+              >
+                <button
+                  onClick={() => {
+                    setForgotPassword(false);
+                  }}
+                  type="button"
+                  className="mb-4 text-sm text-primary-400 hover:text-primary-500"
+                >
+                  <div className="flex justify-center">
+                    <CareIcon className="care-l-arrow-left text-lg" />
+                    <span>{t("back_to_login")}</span>
+                  </div>
+                </button>
+                <div className="mb-8 w-[300px] text-4xl font-black text-primary-600">
+                  {t("forget_password")}
                 </div>
+                <form onSubmit={handleForgetSubmit}>
+                  <div>
+                    {t("forget_password_instruction")}
+                    <LegendInput
+                      id="forgot_username"
+                      name="username"
+                      type="TEXT"
+                      legend={t("username")}
+                      value={form.username}
+                      onChange={handleChange}
+                      error={errors.username}
+                      outerClassName="my-4"
+                      size="large"
+                      className="font-extrabold"
+                    />
+                    <div className="justify-start">
+                      {loading ? (
+                        <div className="flex items-center justify-center">
+                          <CircularProgress className="text-primary-500" />
+                        </div>
+                      ) : (
+                        <button
+                          type="submit"
+                          className="inline-flex w-full cursor-pointer items-center justify-center rounded bg-primary-500 px-4 py-2 text-sm font-semibold text-white"
+                        >
+                          {t("send_reset_link")}
+                        </button>
+                      )}
+                    </div>
+                  </div>
+                </form>
+                <LanguageSelectorLogin />
               </div>
-            </form>
-            <LanguageSelectorLogin />
+            </div>
           </div>
         </div>
       </div>
diff --git a/src/Components/Common/TopBar.tsx b/src/Components/Common/TopBar.tsx
deleted file mode 100644
index 2dd9c55609d..00000000000
--- a/src/Components/Common/TopBar.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import useConfig from "../../Common/hooks/useConfig";
-import LanguageSelector from "./LanguageSelector";
-
-const TopBar = () => {
-  const { main_logo } = useConfig();
-  return (
-    <div className="bg-white shadow-md">
-      <div className="mx-auto flex max-w-6xl items-center justify-between px-2 py-4">
-        <div>
-          <a href={"/"}>
-            <img
-              src={main_logo.dark}
-              style={{ height: "25px" }}
-              alt="care logo"
-            />
-          </a>
-        </div>
-        <div>
-          <LanguageSelector className="bg-primary-500 text-white" />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default TopBar;
diff --git a/src/Routers/SessionRouter.tsx b/src/Routers/SessionRouter.tsx
index 8a4f2c2dd68..4e546d51b6c 100644
--- a/src/Routers/SessionRouter.tsx
+++ b/src/Routers/SessionRouter.tsx
@@ -2,7 +2,6 @@ import { Login, ResetPassword } from "../Components/Auth";
 import { useRoutes } from "raviger";
 import SessionExpired from "../Components/ErrorPages/SessionExpired";
 import InvalidReset from "../Components/ErrorPages/InvalidReset";
-import TopBar from "../Components/Common/TopBar";
 
 const routes = {
   "/": () => <Login />,
@@ -14,21 +13,5 @@ const routes = {
 };
 
 export default function SessionRouter() {
-  const content = useRoutes(routes) || <Login />;
-  const path =
-    content &&
-    content.props &&
-    content.props.children &&
-    content.props.children.props &&
-    content.props.children.props.value;
-  const login =
-    !path || path === "/" || path === "/login" || path === "/login/";
-  return (
-    <div className={!login ? "bg-primary-100" : ""}>
-      {!login && <TopBar />}
-      <div className={!login ? "container mx-auto max-w-5xl p-4" : ""}>
-        {content}
-      </div>
-    </div>
-  );
+  return useRoutes(routes) || <Login />;
 }