diff --git a/frontend/mono-ui/web/rainmaker/dev-packages/egov-firenoc-dev/src/ui-molecules-local/HowItWorks/index.js b/frontend/mono-ui/web/rainmaker/dev-packages/egov-firenoc-dev/src/ui-molecules-local/HowItWorks/index.js
index 5665a43478f..a18b3163806 100644
--- a/frontend/mono-ui/web/rainmaker/dev-packages/egov-firenoc-dev/src/ui-molecules-local/HowItWorks/index.js
+++ b/frontend/mono-ui/web/rainmaker/dev-packages/egov-firenoc-dev/src/ui-molecules-local/HowItWorks/index.js
@@ -1,25 +1,151 @@
-import React from "react";
+import React, { Component } from "react";
 import { withStyles } from "@material-ui/core/styles";
 import List from "@material-ui/core/List";
 import ListItem from "@material-ui/core/ListItem";
 import ListItemText from "@material-ui/core/ListItemText";
+import Collapse from "@material-ui/core/Collapse";
+import ExpandLess from "@material-ui/icons/ExpandLess";
+import ExpandMore from "@material-ui/icons/ExpandMore";
+import { Icon } from "components";
+import Label from "egov-ui-kit/utils/translationNode";
 
-const styles = theme => ({
+const styles = (theme) => ({
   root: {
     margin: "16px 8px",
-    backgroundColor: theme.palette.background.paper
-  }
+    backgroundColor: theme.palette.background.paper,
+    borderRadius: "4px",
+    boxShadow: "0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12)",
+  },
+  stepContainer: {
+    padding: "16px 24px",
+    borderBottom: "1px solid #e0e0e0",
+  },
+  stepIcon: {
+    height: "32px",
+    width: "32px",
+    borderRadius: "50%",
+    backgroundColor: "#f89a3f",
+    color: "#ffffff",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    marginRight: "16px",
+    fontSize: "14px",
+    fontWeight: "bold",
+  },
+  stepContent: {
+    flex: 1,
+  },
+  stepTitle: {
+    fontSize: "16px",
+    fontWeight: "500",
+    marginBottom: "4px",
+    color: "#484848",
+  },
+  stepDescription: {
+    fontSize: "14px",
+    color: "#767676",
+  },
+  expandIcon: {
+    color: "#f89a3f",
+  },
 });
 
-class HowItWorks extends React.Component {
+class HowItWorks extends Component {
+  state = {
+    open: false,
+  };
+
+  handleClick = () => {
+    this.setState((state) => ({ open: !state.open }));
+  };
+
   render() {
     const { classes } = this.props;
+    const { open } = this.state;
+
+    const steps = [
+      {
+        titleLabel: "Apply for Fire NOC",
+        titleKey: "FIRENOC_STEP_1_APPLY_TITLE",
+        descriptionLabel: "Submit your application with required documents and property details",
+        descriptionKey: "FIRENOC_STEP_1_APPLY_DESCRIPTION",
+      },
+      {
+        titleLabel: "Fee Payment",
+        titleKey: "FIRENOC_STEP_2_PAYMENT_TITLE",
+        descriptionLabel: "Pay the applicable Fire NOC fees for processing your application",
+        descriptionKey: "FIRENOC_STEP_2_PAYMENT_DESCRIPTION",
+      },
+      {
+        titleLabel: "Document Verification",
+        titleKey: "FIRENOC_STEP_3_VERIFICATION_TITLE",
+        descriptionLabel: "Fire department verifies your submitted documents and payment",
+        descriptionKey: "FIRENOC_STEP_3_VERIFICATION_DESCRIPTION",
+      },
+      {
+        titleLabel: "Site Inspection",
+        titleKey: "FIRENOC_STEP_4_INSPECTION_TITLE",
+        descriptionLabel: "Fire safety officer conducts on-site inspection of your property",
+        descriptionKey: "FIRENOC_STEP_4_INSPECTION_DESCRIPTION",
+      },
+      {
+        titleLabel: "NOC Approval",
+        titleKey: "FIRENOC_STEP_5_APPROVAL_TITLE",
+        descriptionLabel: "Receive your Fire NOC certificate after successful verification",
+        descriptionKey: "FIRENOC_STEP_5_APPROVAL_DESCRIPTION",
+      },
+    ];
+
     return (
       <div className={classes.root}>
         <List component="nav">
-          <ListItem button>
-            <ListItemText primary="How it Works?" />
+          <ListItem button onClick={this.handleClick}>
+            <ListItemText
+              primary={
+                <Label
+                  label="How it Works?"
+                  labelKey="COMMON_HOW_IT_WORKS"
+                  fontSize="16px"
+                  color="#484848"
+                  fontWeight="500"
+                />
+              }
+            />
+            {open ? (
+              <ExpandLess className={classes.expandIcon} />
+            ) : (
+              <ExpandMore className={classes.expandIcon} />
+            )}
           </ListItem>
+          <Collapse in={open} timeout="auto" unmountOnExit>
+            {steps.map((step, index) => (
+              <div key={index} className={classes.stepContainer}>
+                <div style={{ display: "flex", alignItems: "flex-start" }}>
+                  <div className={classes.stepIcon}>{index + 1}</div>
+                  <div className={classes.stepContent}>
+                    <div className={classes.stepTitle}>
+                      <Label
+                        label={step.titleLabel}
+                        labelKey={step.titleKey}
+                        fontSize="16px"
+                        color="#484848"
+                        fontWeight="500"
+                      />
+                    </div>
+                    <div className={classes.stepDescription}>
+                      <Label
+                        label={step.descriptionLabel}
+                        labelKey={step.descriptionKey}
+                        fontSize="14px"
+                        color="#767676"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </Collapse>
         </List>
       </div>
     );
diff --git a/frontend/mono-ui/web/rainmaker/dev-packages/egov-ui-kit-dev/src/common/common/Header/components/AppBar/index.js b/frontend/mono-ui/web/rainmaker/dev-packages/egov-ui-kit-dev/src/common/common/Header/components/AppBar/index.js
index b32ba9eac3c..a151bd388ff 100644
--- a/frontend/mono-ui/web/rainmaker/dev-packages/egov-ui-kit-dev/src/common/common/Header/components/AppBar/index.js
+++ b/frontend/mono-ui/web/rainmaker/dev-packages/egov-ui-kit-dev/src/common/common/Header/components/AppBar/index.js
@@ -28,7 +28,6 @@ const EgovAppBar = ({
   className,
   ulbName,
   defaultTitle,
-  ulbLogo,
   title,
   titleAddon,
   isHomeScreen,
@@ -57,9 +56,7 @@ const EgovAppBar = ({
         className={className || "header-with-drawer"}
         title={
           <div className="citizen-header-logo-label">
-            <div className="citizen-header-logo">
-              <img src={ulbLogo ? ulbLogo : pbLogo} onError={(event) => event.target.setAttribute("src", pbLogo)} />
-            </div>
+        
             <Label containerStyle={{ marginLeft: "0px" }} className="screenHeaderLabelStyle appbar-title-label" label={title} />
             {titleAddon && (
               <Label
@@ -106,7 +103,7 @@ const EgovAppBar = ({
         )}
 
         <div className="appbar-right-logo">
-          <img src={logoImage?logoImage:digitLogo} />
+          <img src={logoImage?logoImage:digitLogo}  width={"auto"} height={"30px"}/>
         </div>
         <div className="icon-button">
           {refreshButton && (
diff --git a/frontend/mono-ui/web/rainmaker/dev-packages/egov-ui-kit-dev/src/common/common/Header/index.js b/frontend/mono-ui/web/rainmaker/dev-packages/egov-ui-kit-dev/src/common/common/Header/index.js
index def714514b9..09a3fb4c151 100644
--- a/frontend/mono-ui/web/rainmaker/dev-packages/egov-ui-kit-dev/src/common/common/Header/index.js
+++ b/frontend/mono-ui/web/rainmaker/dev-packages/egov-ui-kit-dev/src/common/common/Header/index.js
@@ -22,7 +22,7 @@ class Header extends Component {
     sortPopOpen: false,
     right: false,
     left: false,
-    ulbLogo: "",
+    // ulbLogo: "",
   };
 
   componentDidMount = () => {
@@ -37,8 +37,8 @@ class Header extends Component {
     const permanentCity = get(nextProps, "userInfo.permanentCity");
     if (get(userInfo ,"permanentCity") !== get(nextProps, "userInfo.permanentCity")) {
       const tenantId = role.toLowerCase() === "citizen" ? (permanentCity?permanentCity:commonConfig.tenantId) : getTenantId();
-      const ulbLogo = `https://s3.ap-south-1.amazonaws.com/pb-egov-assets/${tenantId}/logo.png`;
-      this.setState({ ulbLogo });
+      // const ulbLogo = `https://s3.ap-south-1.amazonaws.com/pb-egov-assets/${tenantId}/logo.png`;
+      // this.setState({ ulbLogo });
     }
    
   }
@@ -171,8 +171,8 @@ class Header extends Component {
     } = this.props;
     const tenantId = role.toLowerCase() === "citizen" ? userInfo.permanentCity : getTenantId();
     const currentCity = cities.filter((item) => item.code === tenantId);
-    const ulbLogo =
-      currentCity.length > 0 ? get(currentCity[0], "logoId") : "https://s3.ap-south-1.amazonaws.com/pb-egov-assets/pb.amritsar/logo.png";
+    // const ulbLogo =
+    //   currentCity.length > 0 ? get(currentCity[0], "logoId") : "https://s3.ap-south-1.amazonaws.com/pb-egov-assets/pb.amritsar/logo.png";
     return (
       <div style={headerStyle}>
         <AppBar
@@ -182,7 +182,7 @@ class Header extends Component {
           defaultTitle={defaultTitle}
           titleAddon={titleAddon}
           role={role}
-          ulbLogo={isUserSetting === false ? msevaLogo : ulbLogo}
+          // ulbLogo={isUserSetting === false ? msevaLogo : ulbLogo}
           {...appBarProps}
           fetchLocalizationLabel={fetchLocalizationLabel}
           userInfo={userInfo}