# FSM Citizen UI
There are two new updates introduced in FSM v1.2.1 while creating a new application - Stepper Information and Vehicle Capacity Selection in the Service Request Screen.
## **Stepper Information**
We are introducing stepper information in FSM while creating an application from the citizen side so that they have visibility on how many steps they need to go over to submit details regarding their tank.
#### Technical Implementations Details:
TLTimelineInFSM.js file is the common component and used for rendering the stepper information. The path of the file is:
**frontend/micro-ui/web/micro-ui-internals/packages/modules/fsm/src/components/TLTimelineInFSM.js**
The code snippets for defining the steps present in FSM application under case “APPLY”:
The code snippets to render the stepper information in each screen using the timeline component:
## **Service Request Screen**
Citizens can now select vehicle capacity along with the number of trips required while creating an application. If nothing is selected, we will proceed by taking the minimum vehicle capacity available with the number of trips.
#### Technical Implementation Details:
Code path: frontend/micro-ui/web/micro-ui-internals/packages/modules/fsm/src/pageComponents/SelectTripNo.js
The code snippet for rendering the Vehicle Capacity field in Service Request screen:
```
{t("ES_VEHICLE CAPACITY")}
({ ...vehicle, label: vehicle.capacity }))}
selectedOption={vehicleCapacity}
optionKey="capacity"
onSelect={selectVehicle}
optionCardStyles={{ zIndex: "60" }}
t={t}
isMandatory={config.isMandatory}isDropDown={true}
/>
```
The code snippet for fetching the vehicles available under all DSO:
```
const allVehicles = dsoData.reduce((acc, curr) => {
return curr.vehicles && curr.vehicles.length ? acc.concat(curr.vehicles) : acc;
}, []);
const cpacityMenu = Array.from(new Set(allVehicles.map((a) => a.capacity)))
.map((capacity) => allVehicles.find((a) => a.capacity === capacity));
```
The code snippet for setting the default vehicle capacity to minimum:
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.digit.org/sanitation/water-sanitation-product-suite/waste-management-system/faecal-sludge-management-fsm/fsm-functional-specification/fsm-ui-docs/fsm-citizen-ui.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.