diff --git a/app/components/AdditionalLinkList/index.tsx b/app/components/AdditionalLinkList/index.tsx
index 2e3f821..3ef20ac 100644
--- a/app/components/AdditionalLinkList/index.tsx
+++ b/app/components/AdditionalLinkList/index.tsx
@@ -16,13 +16,12 @@ import useFilterState from '#hooks/useFilterState';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const PUBLIC_LINKS_QUERY = gql`
     query PublicLinks(
-        $limit: Int = 10
-        $offset: Int = 0
-        $linkType: LinkTypeEnum
+        $pagination: OffsetPaginationInput,
+        $filters: LinkFilter
     ) {
         publicLinks(
-            pagination: { limit: $limit, offset: $offset }
-            filters: { linkType: $linkType }
+            filters: $filters
+            pagination: $pagination
         ) {
             totalCount
             results {
@@ -54,9 +53,13 @@ function AdditionalLinkList({ linkType }: LinkListProps) {
 
     const [{ data, fetching }] = usePublicLinksQuery({
         variables: {
-            linkType,
-            limit,
-            offset,
+            filters: {
+                linkType,
+            },
+            pagination: {
+                limit,
+                offset,
+            },
         },
     });
 
diff --git a/app/components/DocumentList/index.tsx b/app/components/DocumentList/index.tsx
index 5e990c7..86a6299 100644
--- a/app/components/DocumentList/index.tsx
+++ b/app/components/DocumentList/index.tsx
@@ -15,13 +15,12 @@ import {
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const DOCUMENT_LIST_QUERY = gql`
     query DocumentList(
-        $reportType: ReportTypeEnum
-        $limit: Int = 10
-        $offset: Int = 0
+        $pagination: OffsetPaginationInput,
+        $filters: ReportFilter
     ) {
         reports(
-            filters: { reportType: $reportType }
-            pagination: { limit: $limit, offset: $offset }
+            filters: $filters
+            pagination: $pagination
         ) {
             totalCount
             results {
@@ -55,7 +54,9 @@ function DocumentList(props: Props) {
 
     const [{ data, fetching }] = useDocumentListQuery({
         variables: {
-            reportType,
+            filters: {
+                reportType,
+            },
         },
     });
 
diff --git a/app/components/GoMapContainer/index.tsx b/app/components/GoMapContainer/index.tsx
index c39268f..ff97680 100644
--- a/app/components/GoMapContainer/index.tsx
+++ b/app/components/GoMapContainer/index.tsx
@@ -26,12 +26,13 @@ import {
     isDefined,
 } from '@togglecorp/fujs';
 import { MapContainer } from '@togglecorp/re-map';
+import FileSaver from 'file-saver';
+import { toPng } from 'html-to-image';
 
 import Link from '#components/Link';
+import useAlert from '#hooks/useAlert';
 import goLogo from '#resources/image/logo.png';
 
-// import FileSaver from 'file-saver';
-// import { toPng } from 'html-to-image';
 import styles from './styles.module.css';
 
 interface Props {
@@ -128,20 +129,20 @@ function GoMapContainer(props: Props) {
         }
     }, [presentationMode, onPresentationModeChange]);
 
-    // const alert = useAlert();
-    // const handleDownloadClick = useCallback(() => {
-    //     if (!containerRef?.current) {
-    //         alert.show(
-    //             "Failed to download map. Try again.",
-    //             { variant: 'danger' },
-    //         );
-    //         exitPrintMode();
-    //         return;
-    //     }
-    //     toPng(containerRef.current, { skipAutoScale: false })
-    //         .then((data) => FileSaver.saveAs(data, title))
-    //         .finally(exitPrintMode);
-    // }, [exitPrintMode, title, alert]);
+    const alert = useAlert();
+    const handleDownloadClick = useCallback(() => {
+        if (!containerRef?.current) {
+            alert.show(
+                'Failed to download map. Try again.',
+                { variant: 'danger' },
+            );
+            exitPrintMode();
+            return;
+        }
+        toPng(containerRef.current, { skipAutoScale: false })
+            .then((data) => FileSaver.saveAs(data, title))
+            .finally(exitPrintMode);
+    }, [exitPrintMode, title, alert]);
 
     return (
         <Container
@@ -181,7 +182,7 @@ function GoMapContainer(props: Props) {
                             <ListView>
                                 <Button
                                     name={undefined}
-                                    onClick={() => {}}
+                                    onClick={handleDownloadClick}
                                     before={(
                                         <DownloadTwoLineIcon />
                                     )}
diff --git a/app/components/RegionSelectInput/index.tsx b/app/components/RegionSelectInput/index.tsx
index 5916238..87b8787 100644
--- a/app/components/RegionSelectInput/index.tsx
+++ b/app/components/RegionSelectInput/index.tsx
@@ -1,45 +1,90 @@
-import { SelectInput } from '@ifrc-go/ui';
+import {
+    SelectInput,
+    type SelectInputProps,
+} from '@ifrc-go/ui';
+import { gql } from 'urql';
 
 import {
-    keySelector,
-    labelSelector,
-    type Selector,
+    AdminAreaLevel,
+    type AdminAreasQuery,
+    useAdminAreasQuery,
+} from '#generated/types/graphql';
+import {
+    idSelector,
+    nameSelector,
 } from '#utils/utils';
 
-// Note: This will dynamically fetch from server
-const ethiopiaRegions: Selector[] = [
-    { key: 'AA', label: 'Addis Ababa' },
-    { key: 'AF', label: 'Afar' },
-    { key: 'AM', label: 'Amhara' },
-    { key: 'BE', label: 'Benishangul-Gumuz' },
-    { key: 'CERS', label: 'Central Ethiopia Regional State' },
-    { key: 'DR', label: 'Dire Dawa' },
-    { key: 'GA', label: 'Gambela' },
-    { key: 'HA', label: 'Harari' },
-    { key: 'OR', label: 'Oromia' },
-    { key: 'SI', label: 'Sidama' },
-    { key: 'SO', label: 'Somali' },
-    { key: 'SW', label: 'South West Ethiopia' },
-    { key: 'SNNP', label: 'SNNPR' },
-    { key: 'TI', label: 'Tigray' },
-];
-
-type Props = {
-  name: string;
-  value: string | undefined;
-  onChange: (value: string | undefined, name: string) => void;
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const REGION_QUERY = gql`
+    query AdminAreas($filters: AdminAreaFilter) {
+        adminAreas(filters: $filters) {
+            results {
+                centroidLat
+                centroidLon
+                id
+                level
+                levelDisplay
+                name
+                parentId
+                pcode
+            }
+            totalCount
+        }
+    }
+`;
+
+export type RegionItem = NonNullable<AdminAreasQuery['adminAreas']['results']>[number];
+
+type Props<NAME> = SelectInputProps<
+    string,
+    NAME,
+    RegionItem,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    any,
+    'value' | 'name' | 'options' | 'keySelector' | 'labelSelector'
+> & {
+    className?: string;
+    name: NAME;
+    value: string | undefined | null;
+    onChange: (
+        newValue: string | undefined,
+        name: NAME,
+        option: RegionItem | undefined,
+    ) => void;
 };
 
-function RegionSelectInput(props: Props) {
-    const { name, value, onChange } = props;
+function RegionSelectInput<const NAME>(props: Props<NAME>) {
+    const {
+        className,
+        name,
+        value,
+        onChange,
+        disabled,
+        ...otherProps
+    } = props;
+
+    const [{ data, fetching }] = useAdminAreasQuery({
+        variables: {
+            filters: {
+                level: AdminAreaLevel.Region,
+            },
+        },
+    });
+
+    const regions = data?.adminAreas.results;
+
     return (
         <SelectInput
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...otherProps}
+            className={className}
             name={name}
-            options={ethiopiaRegions}
-            keySelector={keySelector}
-            labelSelector={labelSelector}
+            options={regions}
+            keySelector={idSelector}
+            labelSelector={nameSelector}
             value={value}
             onChange={onChange}
+            disabled={disabled || fetching}
             placeholder="Select region"
         />
     );
diff --git a/app/utils/utils.ts b/app/utils/utils.ts
index 7a45fd3..8e2639c 100644
--- a/app/utils/utils.ts
+++ b/app/utils/utils.ts
@@ -123,19 +123,22 @@ export interface ClickedPoint {
     lngLat: mapboxgl.LngLatLike;
 }
 
-export type Selector = {
-    key?: string;
-    id?: string;
-    label: string | null | undefined;
+export function labelSelector<T>(item: { label: T }) {
+    return item.label;
 }
 
-export function keySelector(type: Selector) {
-    return type.key ?? '';
+export function keySelector<T>(item: { key: T }) {
+    return item.key;
 }
-export function labelSelector(type: Selector) {
-    return type.label ?? '?';
+
+export function idSelector<T>(item: { id: T }) {
+    return item.id;
+}
+
+export function nameSelector<T>(item: { name: T }) {
+    return item.name;
 }
 
-export function idSelector(type: Selector) {
-    return type.id ?? '';
+export function valueSelector<T>(item: { value: T }) {
+    return item.value;
 }
diff --git a/app/views/CapacityAndResources/index.tsx b/app/views/CapacityAndResources/index.tsx
index 259b66f..381f494 100644
--- a/app/views/CapacityAndResources/index.tsx
+++ b/app/views/CapacityAndResources/index.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { SearchLineIcon } from '@ifrc-go/icons';
 import {
     Container,
@@ -23,15 +24,12 @@ import useFilterState from '#hooks/useFilterState';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const CAPACITY_AND_RESOURCES_QUERY = gql`
     query CapacityAndResources(
-        $limit: Int = 10
-        $offset: Int = 0
-        $search: String = ""
-        $regions: [ID!]
-        $isActive: Boolean 
+        $pagination: OffsetPaginationInput,
+        $filters: CapacityAndResourceFilter
     ) {
         capacityAndResources(
-            pagination: { limit: $limit, offset: $offset }
-            filters: { search: $search, regions: $regions, isActive: $isActive }
+            filters: $filters
+            pagination: $pagination
         ) {
             totalCount
             results {
@@ -58,6 +56,8 @@ function ResourcesActions({ id }: {id: string}) {
 }
 
 function CapacityAndResourcesList() {
+    const [regionId, setRegionId] = useState<string | undefined>(undefined);
+
     const {
         limit,
         page,
@@ -75,11 +75,15 @@ function CapacityAndResourcesList() {
     });
     const [{ data, fetching }] = useCapacityAndResourcesQuery({
         variables: {
-            // regionId: '',
-            isActive: true,
-            search: filter.searchText,
-            limit,
-            offset,
+            filters: {
+                regions: [regionId ?? ''],
+                isActive: true,
+                search: filter.searchText,
+            },
+            pagination: {
+                limit,
+                offset,
+            },
         },
     });
     const capacityAndResourcesData = data?.capacityAndResources.results ?? [];
@@ -107,11 +111,10 @@ function CapacityAndResourcesList() {
     return (
         <Page
             actions={(
-                // TODO: add region filter
                 <RegionSelectInput
                     name="region"
-                    value={undefined}
-                    onChange={() => {}}
+                    value={regionId}
+                    onChange={setRegionId}
                 />
             )}
             heading="Capacity and Resources"
diff --git a/app/views/DataAndReport/index.tsx b/app/views/DataAndReport/index.tsx
index e00e325..eb2d809 100644
--- a/app/views/DataAndReport/index.tsx
+++ b/app/views/DataAndReport/index.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { SearchLineIcon } from '@ifrc-go/icons';
 import {
     Container,
@@ -36,14 +37,12 @@ const ThematicAreas_QUERY = gql`
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const Reports_QUERY = gql`
     query Reports(
-        $thematicAreaId: ID
-        $limit: Int = 10
-        $offset: Int = 0
-        $reportType: ReportTypeEnum
+        $pagination: OffsetPaginationInput,
+        $filters: ReportFilter
     ) {
         reports(
-            filters: { thematicAreaId: $thematicAreaId, reportType: $reportType }
-            pagination: { limit: $limit, offset: $offset }
+            filters: $filters
+            pagination: $pagination
         ) {
             totalCount
             results {
@@ -84,6 +83,7 @@ const labelSelector = (item: ThematicArea) => item.name;
 
 function DataAndReport() {
     const [{ data }] = useThematicAreasQuery();
+    const [regionId, setRegionId] = useState<string | undefined>(undefined);
 
     const {
         limit,
@@ -102,14 +102,17 @@ function DataAndReport() {
 
     const [{ data: reportsData, fetching }] = useReportsQuery({
         variables: {
-            thematicAreaId: rawFilter.thematicAreaId,
-            // TODO: add search filter in backend and uncomment below line
-            // search: rawFilter.search,
-
-            // NOTE: Report Type variable value based on Report Type enum where 10 is Report
-            reportType: ReportTypeEnum.Report,
-            limit,
-            offset,
+            filters: {
+                thematicAreaId: rawFilter.thematicAreaId,
+                reportType: ReportTypeEnum.Report,
+                // TODO: add search filter in backend and uncomment below line
+                // search: rawFilter.search,
+                regions: [regionId ?? ''],
+            },
+            pagination: {
+                limit,
+                offset,
+            },
         },
     });
     const thematicAreaOptions = data?.thematicAreas?.results ?? [];
@@ -118,11 +121,10 @@ function DataAndReport() {
     return (
         <Page
             actions={(
-                // TODO: add region filter
                 <RegionSelectInput
                     name="region"
-                    value={undefined}
-                    onChange={() => {}}
+                    value={regionId}
+                    onChange={setRegionId}
                 />
             )}
             heading="Dataset Overview"
@@ -173,18 +175,22 @@ function DataAndReport() {
                     )}
                     empty={reportDetails.length === 0}
                 >
-                    {reportDetails.map((report) => (
-                        <Link
-                            to="reportDetail"
-                            withFullWidth
-                            attrs={{ id: report.id }}
-                        >
-                            <ReportCard
-                                key={report.id}
-                                report={report}
-                            />
-                        </Link>
-                    ))}
+                    <ListView
+                        layout="block"
+                    >
+                        {reportDetails.map((report) => (
+                            <Link
+                                to="reportDetail"
+                                withFullWidth
+                                attrs={{ id: report.id }}
+                            >
+                                <ReportCard
+                                    key={report.id}
+                                    report={report}
+                                />
+                            </Link>
+                        ))}
+                    </ListView>
                 </Container>
             </ListView>
         </Page>
diff --git a/app/views/Galleries/Photos/index.tsx b/app/views/Galleries/Photos/index.tsx
index 81d482e..d77dbba 100644
--- a/app/views/Galleries/Photos/index.tsx
+++ b/app/views/Galleries/Photos/index.tsx
@@ -10,6 +10,7 @@ import {
     ListView,
     Pager,
 } from '@ifrc-go/ui';
+import { saveAs } from 'file-saver';
 import { gql } from 'urql';
 
 import { useGalleryQuery } from '#generated/types/graphql';
@@ -19,10 +20,13 @@ import styles from './styles.module.css';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const IMAGES_QUERY = gql`
-    query Gallery($offset: Int, $limit: Int, $albumId: ID) {
+    query Gallery(
+        $pagination: OffsetPaginationInput,
+        $filters: GalleryImageFilter
+    ) {
         galleryImages(
-            pagination: { limit: $limit, offset: $offset }
-            filters: { albumId: $albumId }
+            filters: $filters
+            pagination: $pagination
         ) {
             totalCount
             results {
@@ -56,6 +60,10 @@ function ImageComponent(props: ImageComponentProps) {
     } = props;
     const safeSrc = toSafeSrc(src);
 
+    const handleDownloadClick = () => {
+        saveAs(safeSrc, name);
+    };
+
     return (
         <div className={styles.imgContainer}>
             <Image src={safeSrc} size="md" />
@@ -64,17 +72,16 @@ function ImageComponent(props: ImageComponentProps) {
                 className={styles.actionButton}
                 withPadding
             >
-                <a href={safeSrc} download={name}>
-                    <IconButton
-                        name="download"
-                        ariaLabel="download"
-                        title="download"
-                        round={false}
-                        variant="secondary"
-                    >
-                        <DownloadTwoFillIcon />
-                    </IconButton>
-                </a>
+                <IconButton
+                    name="download"
+                    ariaLabel="download"
+                    title="download"
+                    round={false}
+                    variant="secondary"
+                    onClick={handleDownloadClick}
+                >
+                    <DownloadTwoFillIcon />
+                </IconButton>
                 <IconButton
                     name={safeSrc}
                     ariaLabel="open"
@@ -104,10 +111,15 @@ function Photos(props: {albumId: string, handleView: (src:string) => void}) {
 
     const [{ fetching: imageLoading, data: imageData }] = useGalleryQuery({
         variables: {
-            albumId,
-            limit,
-            offset,
+            filters: {
+                albumId,
+            },
+            pagination: {
+                limit,
+                offset,
+            },
         },
+        pause: !albumId,
     });
     return (
         <Container
diff --git a/app/views/Galleries/index.tsx b/app/views/Galleries/index.tsx
index 1abc5b9..97fcdac 100644
--- a/app/views/Galleries/index.tsx
+++ b/app/views/Galleries/index.tsx
@@ -31,10 +31,13 @@ import styles from './styles.module.css';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const ALBUM_QUERY = gql`
-    query Albums($offset: Int, $limit: Int, $search: String) {
+    query Albums(
+        $pagination: OffsetPaginationInput,
+        $filters: GalleryAlbumFilter
+    ) {
         galleryAlbums(
-            pagination: { limit: $limit, offset: $offset }
-            filters: { search: $search }
+            filters: $filters
+            pagination: $pagination
         ) {
             results {
                 title
@@ -97,9 +100,13 @@ function Galleries() {
 
     const [{ data, fetching }] = useAlbumsQuery(({
         variables: {
-            search: filter.searchText,
-            limit,
-            offset,
+            filters: {
+                search: filter.searchText,
+            },
+            pagination: {
+                limit,
+                offset,
+            },
         },
     }));
     const handleView = (src: string) => {
@@ -203,6 +210,7 @@ function Galleries() {
                         )}
                     </ListView>
                     <Photos
+                        key={albumId}
                         albumId={albumId}
                         handleView={handleView}
                     />
diff --git a/app/views/Home/ActiveOperation/index.tsx b/app/views/Home/ActiveOperation/index.tsx
index 27c5ae5..48a57af 100644
--- a/app/views/Home/ActiveOperation/index.tsx
+++ b/app/views/Home/ActiveOperation/index.tsx
@@ -303,7 +303,7 @@ function ActiveOperation() {
         ),
         createEventColumn<AppealListItem, string>(
             'operation',
-            'operation',
+            'Operation',
             (item) => item.name,
             (item) => ({
                 href: `${goUrl}/emergencies/${item.event}/details`,
@@ -407,7 +407,7 @@ function ActiveOperation() {
                 onAdminZeroFillClick={handleCountryClick}
             >
                 <GoMapContainer
-                    title="Global Emergency Map"
+                    title="Ethiopia Active Operation"
                     withPresentationMode
                     onPresentationModeChange={setPresentationMode}
                     footer={(
diff --git a/app/views/OurWork/EmergencyResponse/index.tsx b/app/views/OurWork/EmergencyResponse/index.tsx
index 4519992..ee60ed1 100644
--- a/app/views/OurWork/EmergencyResponse/index.tsx
+++ b/app/views/OurWork/EmergencyResponse/index.tsx
@@ -1,47 +1,61 @@
+import { useState } from 'react';
 import { AlertLineIcon } from '@ifrc-go/icons';
 import {
     Container,
+    InlineLayout,
     ListView,
 } from '@ifrc-go/ui';
 
 import InfoCard from '#components/InfoCard';
 import PowerBIEmbed from '#components/PowerBiEmbed';
+import RegionSelectInput from '#components/RegionSelectInput';
 import {
     DashboardPage,
     useExternalDashboardsQuery,
 } from '#generated/types/graphql';
 
 function EmergencyResponse() {
-    //  Todo: Region filter
+    const [regionId, setRegionId] = useState<string | undefined>(undefined);
+
     const [{ data: emergencyResponse, fetching }] = useExternalDashboardsQuery({
         variables: {
-            page: DashboardPage.EmergencyResponse,
-            isActive: true,
+            filters: {
+                page: DashboardPage.EmergencyResponse,
+                isActive: true,
+                regions: [regionId ?? ''],
+            },
         },
-
     });
+
     return (
-        <Container
-            pending={fetching}
-            empty={emergencyResponse?.externalDashboards.results.length === 0}
+        <ListView
+            layout="block"
         >
-            <ListView
-                layout="block"
-                spacing="2xl"
-            >
-                <InfoCard
-                    icon={<AlertLineIcon />}
-                    title="Emergency Response Overview Dashboard"
-                    description="Real-time emergency alerts and early warning system monitoring across regions"
+            <InlineLayout after={(
+                <RegionSelectInput
+                    name="region"
+                    value={regionId}
+                    onChange={setRegionId}
                 />
+            )}
+            />
+            <InfoCard
+                icon={<AlertLineIcon />}
+                title="Emergency Response Overview Dashboard"
+                description="Real-time emergency alerts and early warning system monitoring across regions"
+            />
+            <Container
+                pending={fetching}
+                empty={!emergencyResponse?.externalDashboards.results.length}
+            >
                 {emergencyResponse?.externalDashboards.results.map((report) => (
                     <PowerBIEmbed
                         key={report.id}
                         embedUrl={report.url}
                     />
                 ))}
-            </ListView>
-        </Container>
+            </Container>
+        </ListView>
     );
 }
 
diff --git a/app/views/OurWork/ProjectMapping/index.tsx b/app/views/OurWork/ProjectMapping/index.tsx
index d49c78d..e434ffc 100644
--- a/app/views/OurWork/ProjectMapping/index.tsx
+++ b/app/views/OurWork/ProjectMapping/index.tsx
@@ -12,11 +12,12 @@ import {
 } from '#generated/types/graphql';
 
 function ProjectMapping() {
-    //  Todo: Region filter
     const [{ data: projectMappingData, fetching }] = useExternalDashboardsQuery({
         variables: {
-            page: DashboardPage.ProjectMapping,
-            isActive: true,
+            filters: {
+                page: DashboardPage.ProjectMapping,
+                isActive: true,
+            },
         },
 
     });
diff --git a/app/views/OurWork/index.tsx b/app/views/OurWork/index.tsx
index 3588e80..7a2e301 100644
--- a/app/views/OurWork/index.tsx
+++ b/app/views/OurWork/index.tsx
@@ -2,6 +2,8 @@ import { Outlet } from 'react-router';
 import {
     AlertLineIcon,
     HeartAddLineIcon,
+    InspectIcon,
+    MapIcon,
     ShieldUserLineIcon,
 } from '@ifrc-go/icons';
 import {
@@ -14,7 +16,6 @@ import { gql } from 'urql';
 import KeyCard from '#components/KeyCard';
 import NavigationTab from '#components/NavigationTab';
 import Page from '#components/Page';
-import RegionSelectInput from '#components/RegionSelectInput';
 
 // NOTE: There is limit of 20 dashboards for now, as we don't have more than that.
 // We can add pagination if needed in the future
@@ -22,14 +23,12 @@ import RegionSelectInput from '#components/RegionSelectInput';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const EXTERNAL_DASHBOARDS_QUERY = gql`
     query ExternalDashboards(
-        $page: DashboardPage
-        $isActive: Boolean = true
-        $limit: Int = 20
-        $offset: Int = 0
+        $pagination: OffsetPaginationInput,
+        $filters: ExternalDashboardFilter
     ) {
         externalDashboards(
-            filters: { page: $page, isActive: $isActive }
-            pagination: { limit: $limit, offset: $offset }
+            filters: $filters
+            pagination: $pagination
         ) {
             results {
                 title
@@ -98,14 +97,6 @@ function OurWork() {
                     {keyFigures}
                 </Container>
             )}
-            actions={(
-                // TODO: add region filter
-                <RegionSelectInput
-                    name="region"
-                    value={undefined}
-                    onChange={() => {}}
-                />
-            )}
         >
             <ListView
                 layout="block"
@@ -115,12 +106,28 @@ function OurWork() {
                     <NavigationTab
                         to="emergencyResponse"
                     >
-                        Emergency Response
+                        <ListView
+                            spacing="2xs"
+                            withCenteredContents
+                        >
+                            <InspectIcon fontSize={18} />
+                            <span>
+                                Emergency Response
+                            </span>
+                        </ListView>
                     </NavigationTab>
                     <NavigationTab
                         to="projectMapping"
                     >
-                        Project Mapping
+                        <ListView
+                            spacing="2xs"
+                            withCenteredContents
+                        >
+                            <MapIcon fontSize={18} />
+                            <span>
+                                Project Mapping
+                            </span>
+                        </ListView>
                     </NavigationTab>
 
                 </NavigationTabList>
diff --git a/app/views/Preparedness/DisasterResponse/index.tsx b/app/views/Preparedness/DisasterResponse/index.tsx
index 42f8266..3670668 100644
--- a/app/views/Preparedness/DisasterResponse/index.tsx
+++ b/app/views/Preparedness/DisasterResponse/index.tsx
@@ -1,47 +1,60 @@
+import { useState } from 'react';
 import { AlertLineIcon } from '@ifrc-go/icons';
 import {
     Container,
+    InlineLayout,
     ListView,
 } from '@ifrc-go/ui';
 
 import InfoCard from '#components/InfoCard';
 import PowerBIEmbed from '#components/PowerBiEmbed';
+import RegionSelectInput from '#components/RegionSelectInput';
 import {
     DashboardPage,
     useExternalDashboardsQuery,
 } from '#generated/types/graphql';
 
 function DisasterResponse() {
-    //  Todo: Region filter
+    const [regionId, setRegionId] = useState<string | undefined>(undefined);
     const [{ data: disasterResponse, fetching }] = useExternalDashboardsQuery({
         variables: {
-            page: DashboardPage.DisasterResponse,
-            isActive: true,
+            filters: {
+                page: DashboardPage.DisasterResponse,
+                isActive: true,
+                regions: [regionId ?? ''],
+            },
         },
-
     });
     return (
-        <Container
-            pending={fetching}
-            empty={disasterResponse?.externalDashboards.results.length === 0}
+        <ListView
+            layout="block"
         >
-            <ListView
-                layout="block"
-                spacing="2xl"
+            <InlineLayout
+                after={(
+                    <RegionSelectInput
+                        name="region"
+                        value={regionId}
+                        onChange={setRegionId}
+                    />
+                )}
+            />
+            <InfoCard
+                icon={<AlertLineIcon />}
+                title="Alerts Dashboard"
+                description="Real-time emergency alerts and early warning system monitoring across regions"
+            />
+            <Container
+                pending={fetching}
+                empty={disasterResponse?.externalDashboards.results.length === 0}
             >
-                <InfoCard
-                    icon={<AlertLineIcon />}
-                    title="Alerts Dashboard"
-                    description="Real-time emergency alerts and early warning system monitoring across regions"
-                />
                 {disasterResponse?.externalDashboards.results.map((report) => (
                     <PowerBIEmbed
                         key={report.id}
                         embedUrl={report.url}
                     />
                 ))}
-            </ListView>
-        </Container>
+            </Container>
+        </ListView>
     );
 }
 export default DisasterResponse;
diff --git a/app/views/Preparedness/EmergencyAlert/index.tsx b/app/views/Preparedness/EmergencyAlert/index.tsx
index 559899c..b4c9cca 100644
--- a/app/views/Preparedness/EmergencyAlert/index.tsx
+++ b/app/views/Preparedness/EmergencyAlert/index.tsx
@@ -1,47 +1,62 @@
+import { useState } from 'react';
 import { AlertLineIcon } from '@ifrc-go/icons';
 import {
     Container,
+    InlineLayout,
     ListView,
 } from '@ifrc-go/ui';
 
 import InfoCard from '#components/InfoCard';
 import PowerBIEmbed from '#components/PowerBiEmbed';
+import RegionSelectInput from '#components/RegionSelectInput';
 import {
     DashboardPage,
     useExternalDashboardsQuery,
 } from '#generated/types/graphql';
 
 function EmergencyAlert() {
-    //  Todo: Region filter
+    const [regionId, setRegionId] = useState<string | undefined>(undefined);
+
     const [{ data: emergencyAlert, fetching }] = useExternalDashboardsQuery({
         variables: {
-            page: DashboardPage.EmergencyAlerts,
-            isActive: true,
+            filters: {
+                page: DashboardPage.EmergencyAlerts,
+                isActive: true,
+                regions: [regionId ?? ''],
+            },
         },
-
     });
+
     return (
-        <Container
-            pending={fetching}
-            empty={emergencyAlert?.externalDashboards.results.length === 0}
+        <ListView
+            layout="block"
         >
-            <ListView
-                layout="block"
-                spacing="2xl"
+            <InlineLayout
+                after={(
+                    <RegionSelectInput
+                        name="region"
+                        value={regionId}
+                        onChange={setRegionId}
+                    />
+                )}
+            />
+            <InfoCard
+                icon={<AlertLineIcon />}
+                title="Alerts Dashboard"
+                description="Real-time emergency alerts and early warning system monitoring across regions"
+            />
+            <Container
+                pending={fetching}
+                empty={emergencyAlert?.externalDashboards.results.length === 0}
             >
-                <InfoCard
-                    icon={<AlertLineIcon />}
-                    title="Alerts Dashboard"
-                    description="Real-time emergency alerts and early warning system monitoring across regions"
-                />
                 {emergencyAlert?.externalDashboards.results.map((report) => (
                     <PowerBIEmbed
                         key={report.id}
                         embedUrl={report.url}
                     />
                 ))}
-            </ListView>
-        </Container>
+            </Container>
+        </ListView>
     );
 }
 export default EmergencyAlert;
diff --git a/app/views/Preparedness/index.tsx b/app/views/Preparedness/index.tsx
index 2071406..d68b70b 100644
--- a/app/views/Preparedness/index.tsx
+++ b/app/views/Preparedness/index.tsx
@@ -1,4 +1,10 @@
 import { Outlet } from 'react-router';
+import {
+    AlertLineIcon,
+    AnalyzingIcon,
+    EmergencyResponseUnitIcon,
+    InspectIcon,
+} from '@ifrc-go/icons';
 import {
     ListView,
     NavigationTabList,
@@ -24,23 +30,50 @@ function Preparedness() {
                     <NavigationTab
                         to="emergencyAlert"
                     >
-                        Emergency Alert
+                        <ListView
+                            spacing="2xs"
+                        >
+                            <AlertLineIcon fontSize={18} />
+                            <span>
+                                Emergency Alert
+                            </span>
+                        </ListView>
                     </NavigationTab>
                     <NavigationTab
                         to="disasterResponse"
                     >
-                        Disaster Response
-                        {' '}
+                        <ListView
+                            spacing="2xs"
+                        >
+                            <EmergencyResponseUnitIcon fontSize={18} />
+                            <span>
+                                Disaster Response
+                            </span>
+                        </ListView>
                     </NavigationTab>
                     <NavigationTab
                         to="pmer"
                     >
-                        PMER
+                        <ListView
+                            spacing="2xs"
+                        >
+                            <InspectIcon fontSize={18} />
+                            <span>
+                                PMER
+                            </span>
+                        </ListView>
                     </NavigationTab>
                     <NavigationTab
                         to="riskAnalysis"
                     >
-                        Risk Analysis
+                        <ListView
+                            spacing="2xs"
+                        >
+                            <AnalyzingIcon fontSize={18} />
+                            <span>
+                                Risk Analysis
+                            </span>
+                        </ListView>
                     </NavigationTab>
                 </NavigationTabList>
                 <Outlet />
diff --git a/app/views/TeamList/Members/index.tsx b/app/views/TeamList/Members/index.tsx
index c2e0ee8..105ebba 100644
--- a/app/views/TeamList/Members/index.tsx
+++ b/app/views/TeamList/Members/index.tsx
@@ -12,6 +12,10 @@ import {
     createElementColumn,
     createStringColumn,
 } from '@ifrc-go/ui/utils';
+import {
+    decodeDate,
+    formatDateToString,
+} from '@togglecorp/fujs';
 import { gql } from 'urql';
 
 import ExportButton from '#components/ExportButton';
@@ -28,12 +32,9 @@ import useGraphQLToCSV from '#hooks/useGraphqlToCsv';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const TEAM_MEMBERS_QUERY = gql`
     query TeamMembers(
-        $offset: Int
-        $limit: Int
-        $search: String
-        $woredas: [ID!]
+        $pagination: OffsetPaginationInput,
+        $filters: TeamMemberFilter
         $teamId: ID!
-        $regions: [ID!]
     ) {
         team(id: $teamId) {
             id
@@ -41,13 +42,8 @@ const TEAM_MEMBERS_QUERY = gql`
             description
         }
         teamMembers(
-            pagination: { limit: $limit, offset: $offset }
-            filters: {
-                search: $search
-                woredas: $woredas
-                teamId: $teamId
-                regions: $regions
-            }
+            filters: $filters
+            pagination: $pagination
         ) {
             totalCount
             results {
@@ -72,18 +68,10 @@ const TEAM_MEMBERS_QUERY = gql`
 
 const TEAM_MEMBERS_EXPORT_QUERY = gql`
     query TeamMembersExport(
-        $search: String
-        $woredas: [ID!]
-        $teamId: ID!
-        $regions: [ID!]
+        $filters: TeamMemberFilter
     ) {
         teamMembers(
-            filters: {
-                search: $search
-                woredas: $woredas
-                teamId: $teamId
-                regions: $regions
-            }
+            filters: $filters
         ) {
             results {
                 id
@@ -146,9 +134,13 @@ function Members() {
     const [{ fetching, data }] = useTeamMembersQuery({
         variables: {
             teamId: id!,
-            offset,
-            limit,
-            search: filter.searchText,
+            filters: {
+                search: filter.searchText,
+            },
+            pagination: {
+                offset,
+                limit,
+            },
         },
         pause: !id,
     });
@@ -163,18 +155,22 @@ function Members() {
         filename: `team-${data?.team.id ? data?.team.name.toLowerCase() : id}-members.csv`,
         transform: (responseData) => (
             responseData.teamMembers.results ?? []
-        ).map((member) => ({
-            ID: member.id,
-            Name: member.name,
-            Email: member.email,
-            Gender: member.sex,
-            'Phone Number': member.phoneNumber,
-            Position: member.position,
-            Training: member.training,
-            'Field of Study': member.fieldOfStudy,
-            'Created At': member.createdAt,
-            'Updated At': member.updatedAt,
-        })),
+        ).map((member) => {
+            const createdAt = member.createdAt ? formatDateToString(decodeDate(member.createdAt as string), 'yyyy-dd-MM') : '';
+            const updatedAt = member.updatedAt ? formatDateToString(decodeDate(member.createdAt as string), 'yyyy-dd-MM') : '';
+            return {
+                ID: member.id,
+                Name: member.name,
+                Email: member.email,
+                Gender: member.sex,
+                'Phone Number': member.phoneNumber,
+                Position: member.position,
+                Training: member.training,
+                'Field of Study': member.fieldOfStudy,
+                'Created At': createdAt,
+                'Updated At': updatedAt,
+            };
+        }),
     });
 
     const handleExport = () => {
@@ -248,6 +244,7 @@ function Members() {
             >
                 <ListView
                     withSpaceBetweenContents
+                    withWrap
                 >
                     <TextInput
                         name="searchText"
diff --git a/app/views/TeamList/index.tsx b/app/views/TeamList/index.tsx
index fd9ec1b..c10bc80 100644
--- a/app/views/TeamList/index.tsx
+++ b/app/views/TeamList/index.tsx
@@ -22,13 +22,12 @@ import useFilterState from '#hooks/useFilterState';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const TEAMS_QUERY = gql`
     query Teams(
-        $limit: Int = 10
-        $offset: Int = 0
-        $search: String = ""
+        $pagination: OffsetPaginationInput,
+        $filters: TeamFilter
     ) {
         teams(
-            pagination: { limit: $limit, offset: $offset }
-            filters: { search: $search }
+            filters: $filters
+            pagination: $pagination
         ) {
             totalCount
             results {
@@ -71,9 +70,13 @@ function TeamList() {
     });
     const [{ data, fetching }] = useTeamsQuery(({
         variables: {
-            search: filter.searchText,
-            limit,
-            offset,
+            filters: {
+                search: filter.searchText,
+            },
+            pagination: {
+                limit,
+                offset,
+            },
         },
     }));
     const teams = data?.teams.results ?? [];
diff --git a/backend b/backend
index a836282..60042c6 160000
--- a/backend
+++ b/backend
@@ -1 +1 @@
-Subproject commit a836282060935772cec6f9fe046b6a6da75631fa
+Subproject commit 60042c6d8854426c0b5557fd1ee1f786ec7d7f95
diff --git a/package.json b/package.json
index fa7037e..9075c35 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "@urql/exchange-graphcache": "^9.0.0",
     "file-saver": "^2.0.5",
     "graphql": "^16.13.2",
+    "html-to-image": "^1.11.13",
     "knip": "^6.3.0",
     "lint": "^0.8.19",
     "mapbox-gl": "^1.13.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 46d00db..e44fec3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -50,6 +50,9 @@ importers:
       graphql:
         specifier: ^16.13.2
         version: 16.13.2
+      html-to-image:
+        specifier: ^1.11.13
+        version: 1.11.13
       knip:
         specifier: ^6.3.0
         version: 6.3.0(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)
@@ -3366,6 +3369,9 @@ packages:
     resolution: {integrity: sha512-n6l5uca7/y5joxZ3LUePhzmBFUJ+U2YWzhMa8XUTecSeSlQiZdF5XAd/Q3/WUl0VsXgUwWi8I7CNIwdI5WN1SQ==}
     engines: {node: '>=20.10'}
 
+  html-to-image@1.11.13:
+    resolution: {integrity: sha512-cuOPoI7WApyhBElTTb9oqsawRvZ0rHhaHwghRLlTuffoD1B2aDemlCruLeZrUIIdvG7gs9xeELEPm6PhuASqrg==}
+
   htmlparser2@10.1.0:
     resolution: {integrity: sha512-VTZkM9GWRAtEpveh7MSF6SjjrpNVNNVJfFup7xTY3UpFtm67foy9HDVXneLtFVt4pMz5kZtgNcvCniNFb1hlEQ==}
 
@@ -8919,6 +8925,8 @@ snapshots:
 
   html-tags@5.1.0: {}
 
+  html-to-image@1.11.13: {}
+
   htmlparser2@10.1.0:
     dependencies:
       domelementtype: 2.3.0