diff --git a/forms-flow-nav/src/Navbar.css b/forms-flow-nav/src/Navbar.css
index 5a0ce59ca..16a7afed3 100644
--- a/forms-flow-nav/src/Navbar.css
+++ b/forms-flow-nav/src/Navbar.css
@@ -1,95 +1,26 @@
-.btn-primary {
-  background-color: var(--button-primary-background);
-}
 
-.logo {
-  height: 1.9em;
-}
-h4 {
-  font-size: 1.2rem;
-}
-body {
-  font-size: var(--navbar-items-font-size);
-  font-family: Nunito Sans, SemiBold;
-}
-h5,
-.h5 {
-  font-size: 16px !important;
-}
-
-.navbar {
+.navbar-background{
   background-color: var(--navbar-background);
 }
-.nav-dropdown .dropdown-menu {
-  width: 15rem;
-  height: 14rem;
-  padding: 15px 20px 0 20px;
-  right: 0;
-  top: 2rem;
-  left: auto;
-  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
-}
-
-.nav-dropdown :hover {
-  text-decoration: none !important;
-}
-.nav-custom-tab {
-  padding-left: 60px !important;
-}
-.main-nav {
-  text-decoration: none !important;
-  /* font-size: var(--navbar-items-font-size) !important; */
+.nav-menu-item{
+  font-size: var(--navbar-items-font-size);
   font-weight: var(--navbar-items-font-weight);
+  transition: 0.2s ease-in-out;
+  position: relative;
 }
-.inactive-tab {
-  color: var(--navbar-items) !important;
-}
-.active-tab {
-  color: var(--navbar-active) !important;
-}
-
-.active-tab-dropdown > #dashboard-dropdown {
-  background-color: transparent;
-  filter: invert(36%) sepia(38%) saturate(7152%) hue-rotate(227deg)
-    brightness(101%) contrast(98%);
-}
-.active-tab-dropdown > #task-dropdown {
-  background-color: transparent;
-  filter: invert(36%) sepia(38%) saturate(7152%) hue-rotate(227deg)
-    brightness(101%) contrast(98%);
-}
-
-.nav-dropdown .dropdown-menu {
-  height: auto !important;
-}
-.navbar-dark .navbar-toggler {
-  border-color: white;
-}
-.navbar-brand {
-  align-items: center;
-}
-
-.navbar-brand .img-fluid,
-.navbar-brand .img-thumbnail {
-  max-width: 100%;
-  height: 100%;
-}
-
-header nav {
-  border-bottom: var(--color-white);
-}
-
-.topheading-border-bottom {
-  z-index: 2000;
-  border-bottom: 2px solid var(--color-primary) !important;
-  padding: 0 0.5rem !important;
-  box-shadow: 0 3px 3px -2px rgba(0, 0, 0, 0.2),
-    0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);
+ 
+.nav-menu-item.active {
+  font-size: 18px !important;
+  border-bottom: 3px solid var(--color-primary) !important;
+  color: var(--color-primary) !important;
+  font-weight: calc(var(--navbar-items-font-weight) + 100) !important;
 }
+ 
+ 
 
 .custom-app-name {
   font-size: 30px;
-  font-weight: 600;
+  font-weight: 700;
   color: var(--navbar-app-name);
   margin-left: var(--appname-margin-left);
   margin-right: var(--appname-margin-right);
@@ -97,46 +28,6 @@ header nav {
   margin-bottom: var(--appname-margin-bottom);
 }
 
-.navbar-light .navbar-nav .nav-link {
-  color: var(--navbar-items);
-}
-
-.navbar-collapse{
-  justify-content: space-evenly !important;
-
-}
-.nav-user {
-  margin-left: auto;
-}
-
-.navbar-nav .nav-link:hover,
-.navbar-nav .nav-link:focus {
-  text-decoration: none !important;
-}
 .custom-logo{
   width: var(--navbar-logo-width);
-}
-@media (max-width: 768px) {
-  .head-item {
-    padding-bottom: 0rem;
-  }
-  .padding-left-60 {
-    margin-left: 0px;
-  }
-  .main-header {
-    flex-wrap: nowrap;
-  }
-  .admin-container > .header-container {
-    margin-left: -1rem;
-  }
-  .head-rule {
-    margin-top: -25px;
-    margin-left: -15px;
-    margin-right: -86px;
-}
-} 
-@media (max-width: 992px) and (max-height: 590px) {
-  .nav-user {
-    margin-left: inherit;
-  }
 }
\ No newline at end of file
diff --git a/forms-flow-nav/src/Navbar.jsx b/forms-flow-nav/src/Navbar.jsx
index 4b160e027..0224b112a 100644
--- a/forms-flow-nav/src/Navbar.jsx
+++ b/forms-flow-nav/src/Navbar.jsx
@@ -34,16 +34,18 @@ const NavBar = React.memo(({ props }) => {
   const [selectLanguages, setSelectLanguages] = React.useState([]);
   const [applicationTitle, setApplicationTitle] = React.useState("");
   const [tenantLogo, setTenantLogo] = React.useState("/logo_skeleton.svg");
-  const defaultLogoPath = document.documentElement.style.getPropertyValue("--navbar-logo-path") || "/logo.svg";
+  const defaultLogoPath =
+    document.documentElement.style.getPropertyValue("--navbar-logo-path") ||
+    "/logo.svg";
   React.useEffect(() => {
     props.subscribe("FF_AUTH", (msg, data) => {
       setInstance(data);
     });
 
     props.subscribe("FF_PUBLIC", () => {
-      if(MULTITENANCY_ENABLED){
-        setApplicationTitle(APPLICATION_NAME)
-        setTenantLogo(defaultLogoPath)
+      if (MULTITENANCY_ENABLED) {
+        setApplicationTitle(APPLICATION_NAME);
+        setTenantLogo(defaultLogoPath);
       }
     });
 
@@ -86,6 +88,7 @@ const NavBar = React.memo(({ props }) => {
   const [userDetail, setUserDetail] = React.useState({});
 
   const [lang, setLang] = React.useState(userDetail?.locale);
+  const [selectedLanguage, setSelectedLanguage] = useState({});
   const userRoles = JSON.parse(
     StorageService.get(StorageService.User.USER_ROLE)
   );
@@ -102,9 +105,7 @@ const NavBar = React.memo(({ props }) => {
 
   const [loginUrl, setLoginUrl] = useState(baseUrl);
 
-  const logoPath = MULTITENANCY_ENABLED
-    ? tenantLogo
-    : defaultLogoPath;
+  const logoPath = MULTITENANCY_ENABLED ? tenantLogo : defaultLogoPath;
   const getAppName = useMemo(
     () => () => {
       if (!MULTITENANCY_ENABLED) {
@@ -137,6 +138,11 @@ const NavBar = React.memo(({ props }) => {
     localStorage.setItem("lang", language);
   }, [lang]);
 
+  useEffect(()=>{
+    const language = selectLanguages?.find((item)=> item.name === lang);
+    setSelectedLanguage(language || {})
+  },[lang,selectLanguages])
+
   React.useEffect(() => {
     setUserDetail(
       JSON.parse(StorageService.get(StorageService.User.USER_DETAILS))
@@ -160,59 +166,59 @@ const NavBar = React.memo(({ props }) => {
     instance.userLogout();
   };
 
+  console.log(lang,"lang")
+
   return (
     <BrowserRouter>
-      <header>
-        <Navbar expand="lg" className="topheading-border-bottom position-relative" fixed="top">
-          <Container fluid>
-            <Navbar.Brand className="d-flex">
-              <Link to={`${baseUrl}`}>
-                <img
-                  className="img-fluid custom-logo mr-2"
-                  src={logoPath}
-                  width="50"
-                  height="55"
-                  alt="Logo"
-                />
-              </Link>
+      <header className="navbar-background shadow">
+        <Container>
+          <Navbar collapseOnSelect expand="lg" className={`navbar-background py-0 ${!isAuthenticated ? 'justify-content-between':''}`}>
+            <Navbar.Brand href={`${baseUrl}`} className="d-flex col-3">
+              <img
+                className="custom-logo"
+                src={logoPath}
+                alt="Logo"
+              />
               <div className="custom-app-name">{appName}</div>
             </Navbar.Brand>
-            <Navbar.Toggle aria-controls="responsive-navbar-nav " />
+            {isAuthenticated && <Navbar.Toggle aria-controls="responsive-navbar-nav" />}
+             
             {isAuthenticated ? (
               <Navbar.Collapse
                 id="responsive-navbar-nav"
-                className="navbar-nav"
+                className="d-lg-flex justify-content-between h-100"
               >
-                <Nav
+                <Nav 
                   id="main-menu-nav"
-                  className="active align-items-lg-center"
+                  className="align-items-lg-center justify-content-start w-100"
                 >
                   {ENABLE_FORMS_MODULE && (
                     <Nav.Link
                       as={Link}
                       to={`${baseUrl}form`}
-                      className={`main-nav nav-item ${
+                      className={`nav-menu-item py-md-3 px-0 mx-2 ${
                         pathname.match(createURLPathMatchExp("form", baseUrl))
-                          ? "active-tab"
-                          : "inactive-tab"
+                          ? "active"
+                          : ""
                       }`}
                     >
-                      <i className="fa fa-wpforms fa-fw fa-lg mr-2" />
+                      <i className="fa-solid fa-file-lines mr-2" />
                       {t("Forms")}
                     </Nav.Link>
                   )}
 
+
                   {getUserRolePermission(userRoles, ADMIN_ROLE) ? (
-                    <Nav.Link
+                    <Nav.Link 
                       as={Link}
                       to={`${baseUrl}admin/dashboard`}
-                      className={`main-nav nav-item ${
+                      className={`nav-menu-item py-md-3 px-0 mx-2 ${
                         pathname.match(createURLPathMatchExp("admin", baseUrl))
-                          ? "active-tab"
-                          : "inactive-tab"
+                          ? "active"
+                          : ""
                       }`}
                     >
-                      <i className="fa fa-user-circle-o fa-lg mr-2" />
+                      <i className="fa-solid fa-user-check mr-2" />
                       {t("Admin")}
                     </Nav.Link>
                   ) : null}
@@ -222,12 +228,12 @@ const NavBar = React.memo(({ props }) => {
                         <Nav.Link
                           as={Link}
                           to={`${baseUrl}processes`}
-                          className={`main-nav nav-item ${
+                          className={`nav-menu-item py-md-3 px-0 mx-2 ${
                             pathname.match(
                               createURLPathMatchExp("processes", baseUrl)
                             )
-                              ? "active-tab"
-                              : "inactive-tab"
+                              ? "active"
+                              : ""
                           }`}
                         >
                           <i className="fa fa-cogs fa-lg fa-fw mr-2" />
@@ -243,20 +249,20 @@ const NavBar = React.memo(({ props }) => {
                           <Nav.Link
                             as={Link}
                             to={`${baseUrl}application`}
-                            className={`main-nav nav-item ${
+                            className={`nav-menu-item py-md-3 px-0 mx-2 ${
                               pathname.match(
                                 createURLPathMatchExp("application", baseUrl)
                               )
-                                ? "active-tab"
+                                ? "active"
                                 : pathname.match(
                                     createURLPathMatchExp("draft", baseUrl)
                                   )
-                                ? "active-tab"
-                                : "inactive-tab"
+                                ? "active"
+                                : ""
                             }`}
                           >
                             {" "}
-                            <i className="fa fa-list-alt fa-fw fa-lg mr-2" />
+                            <i className="fa-solid fa-rectangle-list mr-2" />
                             {t("Applications")}
                           </Nav.Link>
                         )
@@ -267,16 +273,16 @@ const NavBar = React.memo(({ props }) => {
                         <Nav.Link
                           as={Link}
                           to={`${baseUrl}task`}
-                          className={`main-nav nav-item taskDropdown ${
+                          className={`nav-menu-item py-md-3 px-0 mx-2 ${
                             pathname.match(
                               createURLPathMatchExp("task", baseUrl)
                             )
-                              ? "active-tab"
-                              : "inactive-tab"
+                              ? "active"
+                              : ""
                           }`}
                         >
                           {" "}
-                          <i className="fa fa-list fa-lg fa-fw mr-2" />
+                          <i className="fa-solid fa-list-check mr-2" />
                           {t("Tasks")}
                         </Nav.Link>
                       )
@@ -288,19 +294,19 @@ const NavBar = React.memo(({ props }) => {
                           as={Link}
                           to={`${baseUrl}metrics`}
                           data-testid="Dashboards"
-                          className={`main-nav nav-item ${
+                          className={`nav-menu-item py-md-3 px-0 mx-2 ${
                             pathname.match(
                               createURLPathMatchExp("metrics", baseUrl)
                             ) ||
                             pathname.match(
                               createURLPathMatchExp("insights", baseUrl)
                             )
-                              ? "active-tab"
-                              : "inactive-tab"
+                              ? "active"
+                              : ""
                           }`}
                         >
                           {" "}
-                          <i className="fa fa-tachometer fa-lg fa-fw mr-2" />
+                          <i className="fa-solid fa-gauge-high mr-2" />
                           {t("Dashboards")}
                         </Nav.Link>
                       )
@@ -312,8 +318,8 @@ const NavBar = React.memo(({ props }) => {
                     selectLanguages.map((e, i) => {
                       return (
                         <>
-                          <i className="fa fa-globe fa-lg mr-1 mt-1" />
-                          <h4 key={i}>{e.name}</h4>
+                          <i className="fa fa-globe mr-2" />
+                           {e.name}
                         </>
                       );
                     })
@@ -321,8 +327,9 @@ const NavBar = React.memo(({ props }) => {
                     <NavDropdown
                       title={
                         <>
-                          <i className="fa fa-globe fa-lg mr-2" />
-                          {lang ? lang : "LANGUAGE"}
+                          <i className="fa fa-globe  mr-2" />
+                          {selectedLanguage?.value}
+                          ({lang ? lang : "LANGUAGE"})
                         </>
                       }
                       id="basic-nav-dropdown"
@@ -339,13 +346,10 @@ const NavBar = React.memo(({ props }) => {
                       ))}
                     </NavDropdown>
                   )}
-                </Nav>
-
-                <Nav className="nav-user">
-                  <NavDropdown
+                     <NavDropdown
                     title={
                       <>
-                        <i className="fa fa-user fa-lg mr-1" />
+                        <i className="fa-solid fa-user mr-2" />
                         {userDetail?.name ||
                           userDetail?.preferred_username ||
                           ""}
@@ -356,7 +360,7 @@ const NavBar = React.memo(({ props }) => {
                       {" "}
                       {userDetail?.name || userDetail?.preferred_username}
                       <br />
-                      <i className="fa fa-users fa-lg fa-fw" />
+                      <i className="fa fa-users fa-fw" />
                       <b>{getUserRoleName(userRoles)}</b>
                     </NavDropdown.Item>
                     <NavDropdown.Divider />
@@ -365,14 +369,17 @@ const NavBar = React.memo(({ props }) => {
                     </NavDropdown.Item>
                   </NavDropdown>
                 </Nav>
+
               </Navbar.Collapse>
             ) : (
-            !MULTITENANCY_ENABLED && <Link to={loginUrl} className="btn btn-primary">
-              Login
-            </Link>
+              !MULTITENANCY_ENABLED && (
+                <Link to={loginUrl} className="btn btn-primary">
+                  Login
+                </Link>
+              )
             )}
-          </Container>
-        </Navbar>
+          </Navbar>
+        </Container>
       </header>
     </BrowserRouter>
   );