diff --git a/src/App.tsx b/src/App.tsx
index a0c44478db3..3084755f749 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -8,14 +8,11 @@ import {
 import ThemedFavicon from "./CAREUI/misc/ThemedFavicon";
 import Intergrations from "./Integrations";
 import Loading from "./Components/Common/Loading";
-import BrowserWarning from "./Components/ErrorPages/BrowserWarning";
+
 const App = () => {
 
   return (
-    <>
-    <BrowserWarning/>
     <Suspense fallback={<Loading />}>
-      <BrowserWarning/>
       <ThemedFavicon />
       <HistoryAPIProvider>
         <AppConfigProvider>
@@ -28,7 +25,6 @@ const App = () => {
         </AppConfigProvider>
       </HistoryAPIProvider>
     </Suspense>
-    </>
   );
 };
 
diff --git a/src/Components/Auth/Login.tsx b/src/Components/Auth/Login.tsx
index 4d49c4458ed..d0114e8bd11 100644
--- a/src/Components/Auth/Login.tsx
+++ b/src/Components/Auth/Login.tsx
@@ -14,7 +14,7 @@ import rehypeRaw from "rehype-raw";
 import { useAuthContext } from "../../Common/hooks/useAuthUser";
 import FiltersCache from "../../Utils/FiltersCache";
 import { classNames } from "../../Utils/utils";
-
+import BrowserWarning from "../ErrorPages/BrowserWarning";
 export const Login = (props: { forgot?: boolean }) => {
   const { signIn } = useAuthContext();
   const {
@@ -158,6 +158,7 @@ export const Login = (props: { forgot?: boolean }) => {
 
   return (
     <div className="relative flex flex-col-reverse overflow-hidden md:h-screen md:flex-row">
+      {!forgotPassword && <BrowserWarning />}
       <div className="login-hero relative flex flex-auto flex-col justify-between p-6 md:h-full md:w-[calc(50%+130px)] md:flex-none md:p-0 md:px-16 md:pr-[calc(4rem+130px)]">
         <div></div>
         <div className="mt-4 flex flex-col items-start rounded-lg py-4 md:mt-12">
diff --git a/src/Components/ErrorPages/BrowserWarning.tsx b/src/Components/ErrorPages/BrowserWarning.tsx
index 0e427bfc92f..5622e85465c 100644
--- a/src/Components/ErrorPages/BrowserWarning.tsx
+++ b/src/Components/ErrorPages/BrowserWarning.tsx
@@ -1,10 +1,10 @@
-import React, { useEffect, useState } from "react";
+import  { useEffect, useState } from "react";
 import browserslist from "browserslist";
 import { getUserAgentRegex } from "browserslist-useragent-regexp";
 import packageJson from "../../../package.json";
 
 const BrowserWarning = () => {
-  const [isSupported, setIsSupported] = useState(true);
+  const [isSupported, setIsSupported] = useState<boolean>(true);
 
   useEffect(() => {
     const userAgent = window.navigator.userAgent;
@@ -28,15 +28,15 @@ const BrowserWarning = () => {
   }
 
   return (
-    <div className="fixed left-0 top-0 z-50 w-full bg-red-500 p-2 text-center text-white">
-      <h2>Unsupported Browser</h2>
-      <p>
-        You are using an unsupported browser. Please switch to a supported
-        browser for the best experience.
+    <div className="fixed left-0 top-0 z-50 w-full h-20 bg-gray-800 bg-opacity-60 flex items-center justify-center text-center text-gray-300">
+    <div>
+      <h2 className="text-lg font-medium">Unsupported Browser</h2>
+      <p className="text-sm">
+        You are using an unsupported browser. Please switch to a supported browser for the best experience.
       </p>
     </div>
+  </div>
   );
 };
 
-
 export default BrowserWarning;