diff --git a/.changeset/afraid-tools-arrive.md b/.changeset/afraid-tools-arrive.md
new file mode 100644
index 0000000000..40c59b8bc5
--- /dev/null
+++ b/.changeset/afraid-tools-arrive.md
@@ -0,0 +1,5 @@
+---
+"@ifrc-go/ui": patch
+---
+
+Add DismissableListOutput, DismissableMultListOutput and DismissableTextOutput components
diff --git a/.changeset/chatty-poets-divide.md b/.changeset/chatty-poets-divide.md
new file mode 100644
index 0000000000..81c02976c6
--- /dev/null
+++ b/.changeset/chatty-poets-divide.md
@@ -0,0 +1,5 @@
+---
+"go-web-app": patch
+---
+
+Create Operational Learning Page and integrate LLM summary generation
diff --git a/.changeset/five-elephants-check.md b/.changeset/five-elephants-check.md
new file mode 100644
index 0000000000..9d4bc2b93d
--- /dev/null
+++ b/.changeset/five-elephants-check.md
@@ -0,0 +1,5 @@
+---
+"go-web-app": patch
+---
+
+Integrate multi-select functionality in operational learning filters to allow selection of multiple filter items.
diff --git a/.changeset/rude-shoes-hug.md b/.changeset/rude-shoes-hug.md
new file mode 100644
index 0000000000..df4ed15d55
--- /dev/null
+++ b/.changeset/rude-shoes-hug.md
@@ -0,0 +1,5 @@
+---
+"@ifrc-go/ui": minor
+---
+
+Add Chip component
diff --git a/app/src/App/routes/index.tsx b/app/src/App/routes/index.tsx
index 9540ea91b7..56bb7961ab 100644
--- a/app/src/App/routes/index.tsx
+++ b/app/src/App/routes/index.tsx
@@ -727,6 +727,19 @@ const resources = customWrapRoute({
         visibility: 'anything',
     },
 });
+const operationalLearning = customWrapRoute({
+    parent: rootLayout,
+    path: 'operational-learning',
+    component: {
+        render: () => import('#views/OperationalLearning'),
+        props: {},
+    },
+    wrapperComponent: Auth,
+    context: {
+        title: 'Operational Learning',
+        visibility: 'anything',
+    },
+});
 
 const search = customWrapRoute({
     parent: rootLayout,
@@ -1227,6 +1240,7 @@ const wrappedRoutes = {
     perPrioritizationForm,
     perWorkPlanForm,
     threeWProjectDetail,
+    operationalLearning,
     ...regionRoutes,
     ...countryRoutes,
     ...surgeRoutes,
diff --git a/app/src/components/Navbar/i18n.json b/app/src/components/Navbar/i18n.json
index 752f1e1cf6..74a05e9300 100644
--- a/app/src/components/Navbar/i18n.json
+++ b/app/src/components/Navbar/i18n.json
@@ -57,9 +57,11 @@
         "userMenuOperationalToolbox":"Operational Toolbox",
         "userMenuCatalogueSurgeServices":"Catalogue of Surge services",
         "userMenuLearnLabel":"Learn",
+        "userMenuOperationalLearning":"Operational Learning",
         "userMenuTools":"Tools",
         "userMenuResources":"Resources",
         "userMenuGoBlog":"GO Blog",
+        "userMenuOperationalLearningDescription":"Operational learning in emergencies is the lesson learned from managing and dealing with crises, refining protocols for resource allocation, decision-making, communication strategies, and others.",
         "userMenuOperationalToolboxItem":"Operational Toolbox",
         "userMenuOperationalToolboxItemDescription":"This operational toolbox is a central repository with key operational document helpful for your mission like templates, checklists, guidance and examples.",
         "userMenuCatalogueSurgeServicesItem": "Catalogue of Surge services",
diff --git a/app/src/components/Navbar/index.tsx b/app/src/components/Navbar/index.tsx
index 550f34e77a..7914d606d9 100644
--- a/app/src/components/Navbar/index.tsx
+++ b/app/src/components/Navbar/index.tsx
@@ -44,8 +44,8 @@ function Navbar(props: Props) {
     type RespondOptionKey = 'emergencies' | 'early-warning' | 'dref-process' | 'surge';
     const [activeRespondOption, setActiveRespondOption] = useState<RespondOptionKey>('emergencies');
 
-    type LearnOptionKey = 'tools' | 'resources';
-    const [activeLearnOption, setActiveLearnOption] = useState<LearnOptionKey>('tools');
+    type LearnOptionKey = 'tools' | 'resources' | 'operational-learning';
+    const [activeLearnOption, setActiveLearnOption] = useState<LearnOptionKey>('operational-learning');
 
     return (
         <nav className={_cs(styles.navbar, className)}>
@@ -414,6 +414,12 @@ function Navbar(props: Props) {
                                 className={styles.optionList}
                                 contentClassName={styles.optionListContent}
                             >
+                                <Tab
+                                    name="operational-learning"
+                                    className={styles.option}
+                                >
+                                    {strings.userMenuOperationalLearning}
+                                </Tab>
                                 <Tab
                                     name="tools"
                                     className={styles.option}
@@ -438,6 +444,21 @@ function Navbar(props: Props) {
                                 </DropdownMenuItem>
                             </TabList>
                             <div className={styles.optionBorder} />
+                            <TabPanel
+                                name="operational-learning"
+                                className={styles.optionDetail}
+                            >
+                                <DropdownMenuItem
+                                    type="link"
+                                    to="operationalLearning"
+                                    variant="tertiary"
+                                >
+                                    {strings.userMenuOperationalLearning}
+                                </DropdownMenuItem>
+                                <div className={styles.description}>
+                                    {strings.userMenuOperationalLearningDescription}
+                                </div>
+                            </TabPanel>
                             <TabPanel
                                 name="tools"
                                 className={styles.optionDetail}
diff --git a/app/src/components/domain/CountryMultiSelectInput.tsx b/app/src/components/domain/CountryMultiSelectInput.tsx
index dad4662cc9..0ce72277b5 100644
--- a/app/src/components/domain/CountryMultiSelectInput.tsx
+++ b/app/src/components/domain/CountryMultiSelectInput.tsx
@@ -23,6 +23,7 @@ type Props<NAME> = MultiSelectInputProps<
     name: NAME;
     onChange: (newValue: number[], name: NAME) => void;
     value: number[] | undefined | null;
+    filterByRegion?: number | undefined;
 }
 
 function CountrySelectInput<const NAME>(props: Props<NAME>) {
@@ -31,10 +32,11 @@ function CountrySelectInput<const NAME>(props: Props<NAME>) {
         name,
         onChange,
         value,
+        filterByRegion,
         ...otherProps
     } = props;
 
-    const countries = useCountry();
+    const countries = useCountry({ region: filterByRegion });
 
     return (
         <MultiSelectInput
diff --git a/app/src/components/domain/CountrySelectInput.tsx b/app/src/components/domain/CountrySelectInput.tsx
index 3ffbc11730..afdf6a0827 100644
--- a/app/src/components/domain/CountrySelectInput.tsx
+++ b/app/src/components/domain/CountrySelectInput.tsx
@@ -21,8 +21,9 @@ type Props<NAME> = SelectInputProps<
 > & {
     className?: string;
     name: NAME;
-    onChange: (newValue: number | undefined, name: NAME) => void;
+    onChange: (newValue: number | undefined, name: NAME, option: Country | undefined) => void;
     value: number | undefined | null;
+    regionId?: number;
 }
 
 function CountrySelectInput<const NAME>(props: Props<NAME>) {
@@ -31,10 +32,11 @@ function CountrySelectInput<const NAME>(props: Props<NAME>) {
         name,
         onChange,
         value,
+        regionId,
         ...otherProps
     } = props;
 
-    const countries = useCountry();
+    const countries = useCountry({ region: regionId });
 
     return (
         <SelectInput
diff --git a/app/src/components/domain/DisasterTypeSelectInput.tsx b/app/src/components/domain/DisasterTypeSelectInput.tsx
index 14fe14d43e..9a4999b7ee 100644
--- a/app/src/components/domain/DisasterTypeSelectInput.tsx
+++ b/app/src/components/domain/DisasterTypeSelectInput.tsx
@@ -25,7 +25,11 @@ type Props<NAME> = SelectInputProps<
 > & {
     className?: string;
     name: NAME;
-    onChange: (newValue: number | undefined, name: NAME) => void;
+    onChange: (
+        newValue: number | undefined,
+        name: NAME,
+        option: DisasterTypeItem | undefined,
+    ) => void;
     value: number | undefined | null;
     optionsFilter?: (item: DisasterTypeItem) => boolean;
 }
diff --git a/app/src/components/domain/ExportButton/i18n.json b/app/src/components/domain/ExportButton/i18n.json
index 3a2bb1a950..59505eeee2 100644
--- a/app/src/components/domain/ExportButton/i18n.json
+++ b/app/src/components/domain/ExportButton/i18n.json
@@ -2,6 +2,7 @@
     "namespace": "common",
     "strings": {
         "exportTableButtonLabel": "Export",
-        "exportTableDownloadingButtonLabel": "Downloading... ({progress}%)"
+        "exportTableDownloadingButtonLabel": "Downloading... ({progress}%)",
+        "pendingExportLabel": "Downloading..."
     }
 }
diff --git a/app/src/components/domain/ExportButton/index.tsx b/app/src/components/domain/ExportButton/index.tsx
index 87d0e7444b..5d21be37f7 100644
--- a/app/src/components/domain/ExportButton/index.tsx
+++ b/app/src/components/domain/ExportButton/index.tsx
@@ -12,7 +12,7 @@ import i18n from './i18n.json';
 interface Props {
     onClick: () => void;
     disabled?: boolean;
-    progress: number;
+    progress?: number;
     pendingExport: boolean;
     totalCount: number | undefined;
 }
@@ -31,20 +31,24 @@ function ExportButton(props: Props) {
         if (!pendingExport) {
             return strings.exportTableButtonLabel;
         }
-        return resolveToComponent(
-            strings.exportTableDownloadingButtonLabel,
-            {
-                progress: (
-                    <NumberOutput
-                        value={progress * 100}
-                        maximumFractionDigits={0}
-                    />
-                ),
-            },
-        );
+        if (progress) {
+            return resolveToComponent(
+                strings.exportTableDownloadingButtonLabel,
+                {
+                    progress: (
+                        <NumberOutput
+                            value={progress * 100}
+                            maximumFractionDigits={0}
+                        />
+                    ),
+                },
+            );
+        }
+        return strings.pendingExportLabel;
     }, [
         strings.exportTableButtonLabel,
         strings.exportTableDownloadingButtonLabel,
+        strings.pendingExportLabel,
         progress,
         pendingExport,
     ]);
diff --git a/app/src/components/domain/RegionSelectInput.tsx b/app/src/components/domain/RegionSelectInput.tsx
index 5d845a8cea..7c5e254a3a 100644
--- a/app/src/components/domain/RegionSelectInput.tsx
+++ b/app/src/components/domain/RegionSelectInput.tsx
@@ -22,7 +22,7 @@ type Props<NAME> = SelectInputProps<
 > & {
     className?: string;
     name: NAME;
-    onChange: (newValue: RegionOption['key'] | undefined, name: NAME) => void;
+    onChange: (newValue: RegionOption['key'] | undefined, name: NAME, value: RegionOption | undefined) => void;
     value: RegionOption['key'] | undefined | null;
 }
 
diff --git a/app/src/contexts/domain.tsx b/app/src/contexts/domain.tsx
index b05d9022ed..6ab9d57702 100644
--- a/app/src/contexts/domain.tsx
+++ b/app/src/contexts/domain.tsx
@@ -2,13 +2,15 @@ import { createContext } from 'react';
 
 import { type GoApiResponse } from '#utils/restRequest';
 
-export type CacheKey = 'country' | 'global-enums' | 'disaster-type' | 'user-me' | 'region';
+export type CacheKey = 'country' | 'global-enums' | 'disaster-type' | 'user-me' | 'region' | 'secondary-sector' | 'per-components';
 
 export type GlobalEnums = Partial<GoApiResponse<'/api/v2/global-enums/'>>;
 export type Countries = GoApiResponse<'/api/v2/country/'>;
 export type DisasterTypes = GoApiResponse<'/api/v2/disaster_type/'>;
 export type UserMe = GoApiResponse<'/api/v2/user/me/'>;
 export type Regions = GoApiResponse<'/api/v2/region/'>;
+export type SecondarySectors = GoApiResponse<'/api/v2/secondarysector'>;
+export type PerComponents = GoApiResponse<'/api/v2/per-formcomponent/'>;
 
 export interface Domain {
     register: (name: CacheKey) => void;
@@ -28,6 +30,12 @@ export interface Domain {
 
     globalEnums?: GlobalEnums;
     globalEnumsPending?: boolean;
+
+    secondarySectors?: SecondarySectors;
+    secondarySectorsPending?: boolean;
+
+    perComponents?: PerComponents;
+    perComponentsPending?: boolean;
 }
 
 const DomainContext = createContext<Domain>({
diff --git a/app/src/hooks/domain/usePerComponent.ts b/app/src/hooks/domain/usePerComponent.ts
new file mode 100644
index 0000000000..a9372b61d1
--- /dev/null
+++ b/app/src/hooks/domain/usePerComponent.ts
@@ -0,0 +1,56 @@
+import {
+    useContext,
+    useEffect,
+    useMemo,
+} from 'react';
+import { isDefined } from '@togglecorp/fujs';
+
+import DomainContext, { PerComponents } from '#contexts/domain';
+
+export type PerComponent = NonNullable<PerComponents['results']>[number];
+
+type ListProps = {
+    id?: never;
+}
+
+type PropsForId = {
+    id: number;
+}
+
+function usePerComponent(props?: ListProps): Array<PerComponent> | undefined
+function usePerComponent(props: PropsForId): PerComponent | undefined
+function usePerComponent(
+    props?: ListProps | PropsForId,
+): PerComponent | undefined | Array<PerComponent> | undefined {
+    const {
+        register,
+        perComponents,
+    } = useContext(DomainContext);
+
+    useEffect(
+        () => {
+            register('per-components');
+        },
+        [register],
+    );
+
+    const returnValue = useMemo(
+        () => {
+            const id = props?.id;
+            if (isDefined(id)) {
+                return perComponents
+                    ?.results?.find((perComponent) => perComponent.id === id);
+            }
+
+            // NOTE: we need to filter out parent components
+            return perComponents?.results?.filter(
+                (perComponent) => !perComponent.is_parent,
+            );
+        },
+        [perComponents, props?.id],
+    );
+
+    return returnValue;
+}
+
+export default usePerComponent;
diff --git a/app/src/hooks/domain/useSecondarySector.ts b/app/src/hooks/domain/useSecondarySector.ts
new file mode 100644
index 0000000000..c4ae791e06
--- /dev/null
+++ b/app/src/hooks/domain/useSecondarySector.ts
@@ -0,0 +1,52 @@
+import {
+    useContext,
+    useEffect,
+    useMemo,
+} from 'react';
+import { isDefined } from '@togglecorp/fujs';
+
+import DomainContext, { type SecondarySectors } from '#contexts/domain';
+
+export type SecondarySector = NonNullable<SecondarySectors>[number];
+
+type ListProps = {
+    id?: never;
+}
+
+type PropsForId = {
+    id: number;
+}
+
+function useSecondarySector(props?: ListProps): Array<SecondarySector> | undefined
+function useSecondarySector(props: PropsForId): SecondarySector | undefined
+function useSecondarySector(
+    props?: ListProps | PropsForId,
+): SecondarySector | undefined | Array<SecondarySector> | undefined {
+    const {
+        register,
+        secondarySectors,
+    } = useContext(DomainContext);
+
+    useEffect(
+        () => {
+            register('secondary-sector');
+        },
+        [register],
+    );
+
+    const returnValue = useMemo(
+        () => {
+            const id = props?.id;
+            if (isDefined(id)) {
+                return secondarySectors?.find((secondaryTag) => secondaryTag.key === id);
+            }
+
+            return secondarySectors;
+        },
+        [secondarySectors, props?.id],
+    );
+
+    return returnValue;
+}
+
+export default useSecondarySector;
diff --git a/app/src/hooks/useFilterState.ts b/app/src/hooks/useFilterState.ts
index ac3e1c9d18..b11ef1937e 100644
--- a/app/src/hooks/useFilterState.ts
+++ b/app/src/hooks/useFilterState.ts
@@ -188,9 +188,14 @@ function useFilterState<FILTER extends object>(options: {
         () => hasSomeDefinedValue(debouncedState.filter),
         [debouncedState.filter],
     );
+    const rawFiltered = useMemo(
+        () => hasSomeDefinedValue(state.filter),
+        [state.filter],
+    );
 
     return {
         rawFilter: state.filter,
+        rawFiltered,
 
         filter: debouncedState.filter,
         filtered,
diff --git a/app/src/hooks/useRecursiveCsvRequest.ts b/app/src/hooks/useRecursiveCsvRequest.ts
index d1af0c4f73..c3391db9d4 100644
--- a/app/src/hooks/useRecursiveCsvRequest.ts
+++ b/app/src/hooks/useRecursiveCsvRequest.ts
@@ -183,9 +183,11 @@ async function fetchRecursive({
 function useRecursiveCSVRequest<D>({
     onFailure,
     onSuccess,
+    disableProgress,
 } : {
     onFailure: (error: unknown) => void;
     onSuccess: (data: D[], total: number) => void;
+    disableProgress?: boolean,
 }) {
     const [pending, setPending] = useState(false);
     const [progress, setProgress] = useState(0);
@@ -213,14 +215,14 @@ function useRecursiveCSVRequest<D>({
         setPending(false);
         setProgress(0);
 
-        if (total !== data.length - 1) {
+        if (total !== data.length - 1 && !disableProgress) {
             // eslint-disable-next-line no-console
             console.error(`Length mismatch. Expected ${total} but got ${data.length - 1}`);
             onFailure(undefined);
         } else {
             onSuccess(data, total);
         }
-    }, [onSuccess, onFailure, setPending, setProgress]);
+    }, [onSuccess, onFailure, setPending, setProgress, disableProgress]);
 
     const handlePartialSuccess = useCallback((newResponse: string) => {
         Papa.parse(
@@ -243,6 +245,8 @@ function useRecursiveCSVRequest<D>({
 
                     if (totalRef.current === 0 || dataRef.current.length === 0) {
                         setProgress(0);
+                    } else if (disableProgress) {
+                        setProgress(0);
                     } else {
                         // NOTE: we are negating one because we have a header as well
                         setProgress((dataRef.current.length - 1) / totalRef.current);
@@ -250,7 +254,7 @@ function useRecursiveCSVRequest<D>({
                 },
             },
         );
-    }, []);
+    }, [disableProgress]);
 
     const trigger = useCallback((url: string, total: number, newUrlParams: UrlParams) => {
         dataRef.current = [];
diff --git a/app/src/views/OperationalLearning/Filters/i18n.json b/app/src/views/OperationalLearning/Filters/i18n.json
new file mode 100644
index 0000000000..995437fa69
--- /dev/null
+++ b/app/src/views/OperationalLearning/Filters/i18n.json
@@ -0,0 +1,19 @@
+{
+    "namespace": "operationalLearningFilters",
+    "strings": {
+        "filterRegionLabel": "Region",
+        "filterRegionPlaceholder": "All Regions",
+        "filterCountryLabel": "Country",
+        "filterCountryPlaceholder": "All Countries",
+        "filterDisasterTypeLabel": "Disaster Type",
+        "filterDisasterTypePlaceholder": "All Disaster Types",
+        "filterSectorLabel": "Sector",
+        "filterSectorPlaceholder": "All Sectors",
+        "filterComponentLabel": "Component",
+        "filterComponentPlaceholder": "All Components",
+        "filterOpsLearningSearchLabel": "Search",
+        "filterOpsLearningSearchPlaceholder": "Search",
+        "appealStartDate": "Appeal Start Date",
+        "appealEndDate": "Appeal End Date"
+    }
+}
diff --git a/app/src/views/OperationalLearning/Filters/index.tsx b/app/src/views/OperationalLearning/Filters/index.tsx
new file mode 100644
index 0000000000..b7d962204a
--- /dev/null
+++ b/app/src/views/OperationalLearning/Filters/index.tsx
@@ -0,0 +1,154 @@
+import { useCallback } from 'react';
+import { SearchLineIcon } from '@ifrc-go/icons';
+import {
+    DateInput,
+    MultiSelectInput,
+    TextInput,
+} from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+import { EntriesAsList } from '@togglecorp/toggle-form';
+
+import CountryMultiSelectInput, { type CountryOption } from '#components/domain/CountryMultiSelectInput';
+import RegionSelectInput, { type RegionOption } from '#components/domain/RegionSelectInput';
+import { DisasterType } from '#hooks/domain/useDisasterType';
+import { type PerComponent } from '#hooks/domain/usePerComponent';
+import { type SecondarySector } from '#hooks/domain/useSecondarySector';
+import { getFormattedComponentName } from '#utils/domain/per';
+
+import i18n from './i18n.json';
+
+const sectorKeySelector = (d: SecondarySector) => d.key;
+const sectorLabelSelector = (d: SecondarySector) => d.label;
+const perComponentKeySelector = (option: PerComponent) => option.id;
+const disasterTypeKeySelector = (type: DisasterType) => type.id;
+const disasterTypeLabelSelector = (type: DisasterType) => type.name ?? '?';
+
+export type FilterValue = Partial<{
+    region: RegionOption['key'],
+    countries: CountryOption['id'][],
+    disasterTypes: DisasterType['id'][],
+    secondarySectors: SecondarySector['key'][],
+    perComponents: PerComponent['id'][],
+    appealStartDateAfter: string,
+    appealStartDateBefore: string,
+    appealSearchText: string;
+}>
+
+export type FilterLabel = Partial<{
+    [key in keyof FilterValue]: string;
+}>
+
+interface Props {
+    value: FilterValue;
+    onChange: (...value: EntriesAsList<FilterValue>) => void;
+    disasterTypeOptions: DisasterType[] | undefined;
+    secondarySectorOptions: SecondarySector[] | undefined;
+    perComponentOptions: PerComponent[] | undefined;
+    disabled?: boolean;
+}
+function Filters(props: Props) {
+    const {
+        value,
+        onChange,
+        disasterTypeOptions,
+        secondarySectorOptions,
+        perComponentOptions,
+        disabled,
+    } = props;
+
+    const strings = useTranslation(i18n);
+
+    const handleRegionSelect = useCallback((
+        newValue: RegionOption['key'] | undefined,
+        key: 'region',
+        selectedRegion: RegionOption | undefined,
+    ) => {
+        onChange(newValue, key, selectedRegion?.value);
+
+        if (value.region !== newValue) {
+            onChange(undefined, 'countries', undefined);
+        }
+    }, [onChange, value.region]);
+
+    return (
+        <>
+            <RegionSelectInput
+                name="region"
+                label={strings.filterRegionLabel}
+                placeholder={strings.filterRegionPlaceholder}
+                value={value.region}
+                onChange={handleRegionSelect}
+                disabled={disabled}
+            />
+            <CountryMultiSelectInput
+                name="countries"
+                label={strings.filterCountryLabel}
+                placeholder={strings.filterCountryPlaceholder}
+                value={value.countries}
+                onChange={onChange}
+                filterByRegion={value.region}
+                withSelectAll
+            />
+            <MultiSelectInput
+                name="disasterTypes"
+                label={strings.filterDisasterTypeLabel}
+                placeholder={strings.filterDisasterTypePlaceholder}
+                options={disasterTypeOptions}
+                keySelector={disasterTypeKeySelector}
+                labelSelector={disasterTypeLabelSelector}
+                value={value.disasterTypes}
+                onChange={onChange}
+                withSelectAll
+            />
+            <MultiSelectInput
+                name="secondarySectors"
+                label={strings.filterSectorLabel}
+                placeholder={strings.filterSectorPlaceholder}
+                options={secondarySectorOptions}
+                keySelector={sectorKeySelector}
+                labelSelector={sectorLabelSelector}
+                disabled={disabled}
+                value={value.secondarySectors}
+                onChange={onChange}
+                withSelectAll
+            />
+            <MultiSelectInput
+                name="perComponents"
+                label={strings.filterComponentLabel}
+                placeholder={strings.filterComponentPlaceholder}
+                options={perComponentOptions}
+                keySelector={perComponentKeySelector}
+                labelSelector={getFormattedComponentName}
+                disabled={disabled}
+                value={value.perComponents}
+                onChange={onChange}
+                withSelectAll
+            />
+            <DateInput
+                name="appealStartDateAfter"
+                label={strings.appealStartDate}
+                onChange={onChange}
+                value={value.appealStartDateAfter}
+                disabled={disabled}
+            />
+            <DateInput
+                name="appealStartDateBefore"
+                label={strings.appealEndDate}
+                onChange={onChange}
+                value={value.appealStartDateBefore}
+                disabled={disabled}
+            />
+            <TextInput
+                name="appealSearchText"
+                label={strings.filterOpsLearningSearchLabel}
+                placeholder={strings.filterOpsLearningSearchPlaceholder}
+                value={value.appealSearchText}
+                onChange={onChange}
+                icons={<SearchLineIcon />}
+                disabled={disabled}
+            />
+        </>
+    );
+}
+
+export default Filters;
diff --git a/app/src/views/OperationalLearning/KeyInsights/i18n.json b/app/src/views/OperationalLearning/KeyInsights/i18n.json
new file mode 100644
index 0000000000..e1f689433a
--- /dev/null
+++ b/app/src/views/OperationalLearning/KeyInsights/i18n.json
@@ -0,0 +1,11 @@
+{
+    "namespace": "keyInsights",
+    "strings": {
+    "opsLearningSummariesHeading": "Summary of learnings",
+    "keyInsightsDisclaimer": "THESE SUMMARIES WERE GENERATED USING AI AND LARGE LANGUAGE MODELS. THEY REPRESENT {numOfExtractsUsed} PRIORITISED EXTRACTS OUT OF {totalNumberOfExtracts} FROM THE DREF AND EA DOCUMENTS BETWEEN {appealsFromDate} - {appealsToDate}. TO SEE THE METHODOLOGY BEHIND THE PRIORITISATION ",
+    "keyInsightsDisclaimerClickHere": "CLICK HERE.",
+    "keyInsightsReportIssue": "Report an issue",
+    "closeSources": "Close Sources",
+    "seeSources": "Show Sources"
+    }
+}
diff --git a/app/src/views/OperationalLearning/KeyInsights/index.tsx b/app/src/views/OperationalLearning/KeyInsights/index.tsx
new file mode 100644
index 0000000000..0dc079af07
--- /dev/null
+++ b/app/src/views/OperationalLearning/KeyInsights/index.tsx
@@ -0,0 +1,130 @@
+import {
+    AlertFillIcon,
+    ArrowDownSmallFillIcon,
+    ArrowUpSmallFillIcon,
+} from '@ifrc-go/icons';
+import {
+    Button,
+    Container,
+} from '@ifrc-go/ui';
+import {
+    useBooleanState,
+    useTranslation,
+} from '@ifrc-go/ui/hooks';
+import {
+    formatDate,
+    resolveToString,
+} from '@ifrc-go/ui/utils';
+import { isDefined } from '@togglecorp/fujs';
+
+import Link from '#components/Link';
+import { type GoApiResponse } from '#utils/restRequest';
+
+import Sources from '../Sources';
+
+import i18n from './i18n.json';
+import styles from './styles.module.css';
+
+type OpsLearningSummaryResponse = GoApiResponse<'/api/v2/ops-learning/summary/'>;
+
+interface Props {
+    opsLearningSummaryResponse: OpsLearningSummaryResponse;
+}
+
+function KeyInsights(props: Props) {
+    const {
+        opsLearningSummaryResponse,
+    } = props;
+
+    const strings = useTranslation(i18n);
+
+    const [
+        isExpanded,
+        {
+            toggle: toggleExpansion,
+        },
+    ] = useBooleanState(false);
+
+    return (
+        <Container
+            className={styles.keyInsights}
+            heading={strings.opsLearningSummariesHeading}
+            withInternalPadding
+            withOverflowInContent
+            footerActions={(
+                <Button
+                    name={opsLearningSummaryResponse.id}
+                    variant="tertiary"
+                    onClick={toggleExpansion}
+                    actions={(isExpanded
+                        ? <ArrowUpSmallFillIcon />
+                        : <ArrowDownSmallFillIcon />
+                    )}
+                >
+                    {isExpanded ? strings.closeSources : strings.seeSources}
+                </Button>
+            )}
+            childrenContainerClassName={styles.insights}
+        >
+            <div className={styles.insightTexts}>
+                {isDefined(opsLearningSummaryResponse?.insights1_title) && (
+                    <Container
+                        heading={opsLearningSummaryResponse.insights1_title}
+                        headerDescription={opsLearningSummaryResponse.insights1_content}
+                    />
+                )}
+                {isDefined(opsLearningSummaryResponse?.insights2_title) && (
+                    <Container
+                        heading={opsLearningSummaryResponse.insights2_title}
+                        headerDescription={opsLearningSummaryResponse.insights2_content}
+                    />
+                )}
+                {isDefined(opsLearningSummaryResponse?.insights3_title) && (
+                    <Container
+                        heading={opsLearningSummaryResponse.insights3_title}
+                        headerDescription={opsLearningSummaryResponse.insights3_content}
+                    />
+                )}
+            </div>
+            <div className={styles.summaries}>
+                <span className={styles.text}>
+                    {resolveToString(strings.keyInsightsDisclaimer, {
+                        numOfExtractsUsed: opsLearningSummaryResponse.used_extracts_count,
+                        totalNumberOfExtracts: opsLearningSummaryResponse.total_extracts_count,
+                        appealsFromDate: formatDate(
+                            opsLearningSummaryResponse.earliest_appeal_date,
+                            'MMM-yyyy',
+                        ),
+                        appealsToDate: formatDate(
+                            opsLearningSummaryResponse.latest_appeal_date,
+                            'MMM-yyyy',
+                        ),
+                    })}
+                    <Link
+                        href="https://go-wiki.ifrc.org/en/user_guide/ops_learning"
+                        external
+                        withUnderline
+                    >
+                        {strings.keyInsightsDisclaimerClickHere}
+                    </Link>
+                </span>
+                <Link
+                    className={styles.reportIssue}
+                    href="https://forms.office.com/pages/responsepage.aspx?id=5Tu1ok5zbE6rDdGE9g_ZF4KwLxGrbflAt2rbQ7DtFG5UQU1CTEZTSldLQ0ZTVEtPSVdQQklOVzBDVi4u"
+                    actions={<AlertFillIcon />}
+                    external
+                >
+                    {strings.keyInsightsReportIssue}
+                </Link>
+            </div>
+            {isExpanded && (
+                <Sources
+                    summaryId={opsLearningSummaryResponse.id}
+                    summaryType="insight"
+                />
+            )}
+        </Container>
+    );
+}
+
+export default KeyInsights;
diff --git a/app/src/views/OperationalLearning/KeyInsights/styles.module.css b/app/src/views/OperationalLearning/KeyInsights/styles.module.css
new file mode 100644
index 0000000000..91ee6c97d7
--- /dev/null
+++ b/app/src/views/OperationalLearning/KeyInsights/styles.module.css
@@ -0,0 +1,31 @@
+.key-insights {
+    background-color: var(--go-ui-color-background);
+
+    .summaries {
+        display: flex;
+        align-items: baseline;
+        justify-content: flex-end;
+        gap: var(--go-ui-spacing-md);
+
+        .text {
+            color: var(--go-ui-color-text-light);
+        }
+
+        .report-issue {
+            flex-shrink: 0;
+            color: var(--go-ui-color-negative);
+        }
+    }
+
+    .insights {
+        display: flex;
+        flex-direction: column;
+        gap: var(--go-ui-spacing-lg);
+
+        .insight-texts {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
+            gap: var(--go-ui-spacing-md);
+        }
+    }
+}
diff --git a/app/src/views/OperationalLearning/Sources/AllExtractsModal/Extract/i18n.json b/app/src/views/OperationalLearning/Sources/AllExtractsModal/Extract/i18n.json
new file mode 100644
index 0000000000..dbd2d7d184
--- /dev/null
+++ b/app/src/views/OperationalLearning/Sources/AllExtractsModal/Extract/i18n.json
@@ -0,0 +1,7 @@
+{
+    "namespace": "extracts",
+    "strings": {
+        "source": "Source",
+        "dateOfLearning": "Date of Learning"
+    }
+}
diff --git a/app/src/views/OperationalLearning/Sources/AllExtractsModal/Extract/index.tsx b/app/src/views/OperationalLearning/Sources/AllExtractsModal/Extract/index.tsx
new file mode 100644
index 0000000000..bba6abc400
--- /dev/null
+++ b/app/src/views/OperationalLearning/Sources/AllExtractsModal/Extract/index.tsx
@@ -0,0 +1,73 @@
+import {
+    Container,
+    TextOutput,
+} from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+
+import Link from '#components/Link';
+
+import i18n from './i18n.json';
+import styles from './styles.module.css';
+
+interface Props {
+    countryName?: string;
+    emergencyId?: number;
+    emergencyName: string | null | undefined;
+    appealDocumentURL: string;
+    extract: string | null | undefined;
+    extractCreatedAt: string;
+}
+function Extract(props: Props) {
+    const {
+        countryName,
+        emergencyId,
+        emergencyName,
+        appealDocumentURL,
+        extract,
+        extractCreatedAt,
+    } = props;
+
+    const strings = useTranslation(i18n);
+
+    return (
+        <Container
+            className={styles.extract}
+            headingContainerClassName={styles.extractHeadingContainer}
+            heading={countryName}
+            headingDescription={(
+                <Link
+                    to="emergencyDetails"
+                    urlParams={{
+                        emergencyId,
+                    }}
+                    withUnderline
+                >
+                    {emergencyName}
+                </Link>
+            )}
+            actions={(
+                <Link
+                    variant="primary"
+                    href={appealDocumentURL}
+                    withLinkIcon
+                    external
+                >
+                    {strings.source}
+                </Link>
+            )}
+            footerContent={(
+                <TextOutput
+                    label={strings.dateOfLearning}
+                    value={extractCreatedAt}
+                    strongValue
+                    valueType="date"
+                />
+            )}
+            withInternalPadding
+        >
+            {extract}
+        </Container>
+    );
+}
+
+export default Extract;
diff --git a/app/src/views/OperationalLearning/Sources/AllExtractsModal/Extract/styles.module.css b/app/src/views/OperationalLearning/Sources/AllExtractsModal/Extract/styles.module.css
new file mode 100644
index 0000000000..ce8e5ada89
--- /dev/null
+++ b/app/src/views/OperationalLearning/Sources/AllExtractsModal/Extract/styles.module.css
@@ -0,0 +1,9 @@
+.extract {
+    background-color: var(--go-ui-color-background);
+
+    .extract-heading-container {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+    }
+}
diff --git a/app/src/views/OperationalLearning/Sources/AllExtractsModal/i18n.json b/app/src/views/OperationalLearning/Sources/AllExtractsModal/i18n.json
new file mode 100644
index 0000000000..f2c052746a
--- /dev/null
+++ b/app/src/views/OperationalLearning/Sources/AllExtractsModal/i18n.json
@@ -0,0 +1,8 @@
+{
+    "namespace": "viewAllExtracts",
+    "strings": {
+        "heading": "Operational Learning Extracts",
+        "extractCount": "{count} extract",
+        "extractsCount": "{count} extracts"
+    }
+}
diff --git a/app/src/views/OperationalLearning/Sources/AllExtractsModal/index.tsx b/app/src/views/OperationalLearning/Sources/AllExtractsModal/index.tsx
new file mode 100644
index 0000000000..4da8766762
--- /dev/null
+++ b/app/src/views/OperationalLearning/Sources/AllExtractsModal/index.tsx
@@ -0,0 +1,136 @@
+import {
+    Chip,
+    List,
+    Modal,
+    Pager,
+} from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+import {
+    numericIdSelector,
+    resolveToString,
+} from '@ifrc-go/ui/utils';
+import { isDefined } from '@togglecorp/fujs';
+
+import useCountry from '#hooks/domain/useCountry';
+import useFilterState from '#hooks/useFilterState';
+import {
+    type GoApiResponse,
+    useRequest,
+} from '#utils/restRequest';
+
+import Extract from './Extract';
+
+import i18n from './i18n.json';
+import styles from './styles.module.css';
+
+type OpsLearningResponse = GoApiResponse<'/api/v2/ops-learning/'>;
+type OpsLearning = NonNullable<OpsLearningResponse['results']>[number];
+
+interface Props {
+    summaryType: 'sector' | 'component' | 'insight';
+    summaryId: number;
+    onCancel: () => void;
+}
+
+const PAGE_SIZE = 25;
+
+function AllExtractsModal(props: Props) {
+    const {
+        summaryType,
+        summaryId,
+        onCancel,
+    } = props;
+
+    const countries = useCountry();
+
+    const strings = useTranslation(i18n);
+
+    const {
+        page: opsLearningActivePage,
+        setPage: setOpsLearningActivePage,
+        limit: opsLearningLimit,
+        offset: opsLearningOffset,
+    } = useFilterState<object>({
+        filter: {},
+        pageSize: PAGE_SIZE,
+    });
+
+    const {
+        pending: opsLearningPending,
+        response: opsLearningResponse,
+        error: opsLearningError,
+    } = useRequest({
+        url: '/api/v2/ops-learning/',
+        query: {
+            insight_component_id: summaryType === 'component' ? summaryId : undefined,
+            insight_sector_id: summaryType === 'sector' ? summaryId : undefined,
+            insight_id: summaryType === 'insight' ? summaryId : undefined,
+            limit: opsLearningLimit,
+            offset: opsLearningOffset,
+        },
+        preserveResponse: true,
+    });
+
+    const extractsRendererParams = (_: number, learning: OpsLearning) => ({
+        countryName: countries.find((country) => country.id === learning.appeal?.country)?.name,
+        emergencyId: learning.appeal?.event_details.id,
+        emergencyName: learning.appeal?.event_details.name,
+        appealDocumentURL: learning.document_url,
+        extract: learning.learning_validated,
+        extractCreatedAt: learning.created_at,
+    });
+
+    const opsLearningCount = opsLearningResponse?.count ?? 0;
+
+    return (
+        <Modal
+            className={styles.modal}
+            heading={strings.heading}
+            onClose={onCancel}
+            pending={opsLearningPending}
+            size="xl"
+            headerDescriptionContainerClassName={styles.headerDescription}
+            headerDescription={(
+                <Chip
+                    name="extractsCount"
+                    label={(opsLearningCount > 1) ? (
+                        resolveToString(
+                            strings.extractsCount,
+                            { count: opsLearningCount },
+                        )
+                    ) : (
+                        resolveToString(
+                            strings.extractCount,
+                            { count: opsLearningCount },
+                        )
+                    )}
+                    variant="tertiary"
+                />
+            )}
+            footerContent={(
+                <Pager
+                    activePage={opsLearningActivePage}
+                    onActivePageChange={setOpsLearningActivePage}
+                    itemsCount={opsLearningCount}
+                    maxItemsPerPage={opsLearningLimit}
+                />
+            )}
+            childrenContainerClassName={styles.extractListContainer}
+        >
+            <List
+                className={styles.extractList}
+                data={opsLearningResponse?.results}
+                renderer={Extract}
+                keySelector={numericIdSelector}
+                rendererParams={extractsRendererParams}
+                emptyMessage="No extracts"
+                errored={isDefined(opsLearningError)}
+                pending={false}
+                filtered={false}
+                compact
+            />
+        </Modal>
+    );
+}
+
+export default AllExtractsModal;
diff --git a/app/src/views/OperationalLearning/Sources/AllExtractsModal/styles.module.css b/app/src/views/OperationalLearning/Sources/AllExtractsModal/styles.module.css
new file mode 100644
index 0000000000..a573f21890
--- /dev/null
+++ b/app/src/views/OperationalLearning/Sources/AllExtractsModal/styles.module.css
@@ -0,0 +1,17 @@
+.modal {
+    max-height: 90vh;
+
+    .header-description {
+        display: flex;
+    }
+
+    .extract-list-container {
+        overflow: auto;
+
+        .extract-list {
+            display: flex;
+            flex-direction: column;
+            gap: var(--go-ui-spacing-md);
+        }
+    }
+}
diff --git a/app/src/views/OperationalLearning/Sources/Emergency/index.tsx b/app/src/views/OperationalLearning/Sources/Emergency/index.tsx
new file mode 100644
index 0000000000..dd63b51a1c
--- /dev/null
+++ b/app/src/views/OperationalLearning/Sources/Emergency/index.tsx
@@ -0,0 +1,49 @@
+import { Container } from '@ifrc-go/ui';
+import { isDefined } from '@togglecorp/fujs';
+
+import Link from '#components/Link';
+
+import styles from './styles.module.css';
+
+interface Props {
+    emergencyId?: number;
+    emergencyName: string | null | undefined;
+    appealDocumentURL?: string;
+    appealDocumentName: string | null | undefined;
+}
+function Emergency(props: Props) {
+    const {
+        emergencyId,
+        emergencyName,
+        appealDocumentURL,
+        appealDocumentName,
+    } = props;
+
+    return (
+        <Container
+            className={styles.emergency}
+            childrenContainerClassName={styles.content}
+        >
+            <Link
+                to="emergencyDetails"
+                urlParams={{
+                    emergencyId,
+                }}
+                withUnderline
+            >
+                {emergencyName}
+            </Link>
+            {isDefined(appealDocumentURL) && (
+                <Link
+                    href={appealDocumentURL}
+                    withLinkIcon
+                    external
+                >
+                    {appealDocumentName}
+                </Link>
+            )}
+        </Container>
+    );
+}
+
+export default Emergency;
diff --git a/app/src/views/OperationalLearning/Sources/Emergency/styles.module.css b/app/src/views/OperationalLearning/Sources/Emergency/styles.module.css
new file mode 100644
index 0000000000..e953844318
--- /dev/null
+++ b/app/src/views/OperationalLearning/Sources/Emergency/styles.module.css
@@ -0,0 +1,7 @@
+.emergency {
+    .content {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: var(--go-ui-spacing-md);
+    }
+}
diff --git a/app/src/views/OperationalLearning/Sources/i18n.json b/app/src/views/OperationalLearning/Sources/i18n.json
new file mode 100644
index 0000000000..75be00ccdd
--- /dev/null
+++ b/app/src/views/OperationalLearning/Sources/i18n.json
@@ -0,0 +1,7 @@
+{
+    "namespace": "sources",
+    "strings": {
+        "noSources": "The extract doesn't have any source.",
+        "viewAllExtracts": "View All Extracts"
+    }
+}
diff --git a/app/src/views/OperationalLearning/Sources/index.tsx b/app/src/views/OperationalLearning/Sources/index.tsx
new file mode 100644
index 0000000000..0c2634ab6a
--- /dev/null
+++ b/app/src/views/OperationalLearning/Sources/index.tsx
@@ -0,0 +1,137 @@
+import ReactDOMServer from 'react-dom/server';
+import { CopyLineIcon } from '@ifrc-go/icons';
+import {
+    Button,
+    Container,
+    List,
+    Pager,
+} from '@ifrc-go/ui';
+import {
+    useBooleanState,
+    useTranslation,
+} from '@ifrc-go/ui/hooks';
+import { numericIdSelector } from '@ifrc-go/ui/utils';
+import { isDefined } from '@togglecorp/fujs';
+
+import useFilterState from '#hooks/useFilterState';
+import {
+    type GoApiResponse,
+    useRequest,
+} from '#utils/restRequest';
+
+import AllExtractsModal from './AllExtractsModal';
+import Emergency from './Emergency';
+
+import i18n from './i18n.json';
+import styles from './styles.module.css';
+
+// FIXME: move this to utils
+// NOTE: this may be slower on the long run
+// eslint-disable-next-line @typescript-eslint/no-explicit-any, react-refresh/only-export-components
+export function isChildNull(children: any) {
+    return !ReactDOMServer.renderToStaticMarkup(children);
+}
+
+type AppealDocumentResponse = GoApiResponse<'/api/v2/appeal_document/'>;
+type AppealDocument = NonNullable<AppealDocumentResponse['results']>[number];
+
+type Props = {
+    summaryType: 'sector' | 'component' | 'insight';
+    summaryId: number;
+}
+
+const PAGE_SIZE = 10;
+
+function Sources(props: Props) {
+    const {
+        summaryId,
+        summaryType,
+    } = props;
+
+    const strings = useTranslation(i18n);
+
+    const [showExtractsModal, {
+        setTrue: setShowExtractsModalTrue,
+        setFalse: setShowExtractsModalFalse,
+    }] = useBooleanState(false);
+
+    const {
+        page: appealDocumentActivePage,
+        setPage: setAppealDocumentActivePage,
+        limit: appealDocumentLimit,
+        offset: appealDocumentOffset,
+    } = useFilterState<object>({
+        filter: {},
+        pageSize: PAGE_SIZE,
+    });
+
+    const {
+        pending: appealDocumentPending,
+        response: appealDocumentResponse,
+        error: appealDocumentError,
+    } = useRequest({
+        url: '/api/v2/appeal_document/',
+        query: {
+            insight_component_id: summaryType === 'component' ? summaryId : undefined,
+            insight_sector_id: summaryType === 'sector' ? summaryId : undefined,
+            insight_id: summaryType === 'insight' ? summaryId : undefined,
+            limit: appealDocumentLimit,
+            offset: appealDocumentOffset,
+        },
+        preserveResponse: true,
+    });
+
+    const appealRendererParams = (_: number, appealDocument: AppealDocument) => ({
+        emergencyId: appealDocument.appeal.event.id,
+        emergencyName: appealDocument.appeal.event.name,
+        appealDocumentURL: appealDocument.document_url,
+        appealDocumentName: appealDocument.name,
+    });
+
+    const pager = (
+        <Pager
+            activePage={appealDocumentActivePage}
+            onActivePageChange={setAppealDocumentActivePage}
+            itemsCount={appealDocumentResponse?.count ?? 0}
+            maxItemsPerPage={appealDocumentLimit}
+        />
+    );
+
+    return (
+        <Container
+            className={styles.sources}
+            footerContent={isChildNull(pager) ? undefined : pager}
+            childrenContainerClassName={styles.content}
+        >
+            <List
+                className={styles.appealList}
+                data={appealDocumentResponse?.results}
+                renderer={Emergency}
+                keySelector={numericIdSelector}
+                rendererParams={appealRendererParams}
+                emptyMessage={strings.noSources}
+                errored={isDefined(appealDocumentError)}
+                pending={appealDocumentPending}
+                filtered={false}
+                compact
+            />
+            <Button
+                name="viewAll"
+                variant="secondary"
+                icons={<CopyLineIcon />}
+                onClick={setShowExtractsModalTrue}
+            >
+                {strings.viewAllExtracts}
+            </Button>
+            {showExtractsModal && (
+                <AllExtractsModal
+                    summaryType={summaryType}
+                    summaryId={summaryId}
+                    onCancel={setShowExtractsModalFalse}
+                />
+            )}
+        </Container>
+    );
+}
+
+export default Sources;
diff --git a/app/src/views/OperationalLearning/Sources/styles.module.css b/app/src/views/OperationalLearning/Sources/styles.module.css
new file mode 100644
index 0000000000..c4fb275b31
--- /dev/null
+++ b/app/src/views/OperationalLearning/Sources/styles.module.css
@@ -0,0 +1,16 @@
+.sources {
+    display: flex;
+    flex-grow: 1;
+
+    .content {
+        display: flex;
+        flex-direction: column;
+        gap: var(--go-ui-spacing-lg);
+
+        .appeal-list {
+            display: flex;
+            flex-direction: column;
+            gap: var(--go-ui-spacing-lg);
+        }
+    }
+}
diff --git a/app/src/views/OperationalLearning/Summary/i18n.json b/app/src/views/OperationalLearning/Summary/i18n.json
new file mode 100644
index 0000000000..dda67b8c7c
--- /dev/null
+++ b/app/src/views/OperationalLearning/Summary/i18n.json
@@ -0,0 +1,9 @@
+{
+    "namespace": "operationalLearningSummary",
+    "strings": {
+    "extractsCount":"({count} extracts)",
+    "extractCount": "({count} extract)",
+    "closeSources": "Close Sources",
+    "seeSources": "Show Sources"
+    }
+}
diff --git a/app/src/views/OperationalLearning/Summary/index.tsx b/app/src/views/OperationalLearning/Summary/index.tsx
new file mode 100644
index 0000000000..1472b65be7
--- /dev/null
+++ b/app/src/views/OperationalLearning/Summary/index.tsx
@@ -0,0 +1,87 @@
+import {
+    ArrowDownSmallFillIcon,
+    ArrowUpSmallFillIcon,
+} from '@ifrc-go/icons';
+import {
+    Button,
+    Container,
+} from '@ifrc-go/ui';
+import {
+    useBooleanState,
+    useTranslation,
+} from '@ifrc-go/ui/hooks';
+import { resolveToString } from '@ifrc-go/ui/utils';
+
+import Sources from '../Sources';
+
+import i18n from './i18n.json';
+import styles from './styles.module.css';
+
+export interface Props {
+    id: number;
+    summaryType: 'sector' | 'component';
+    summaryTitle: string;
+    extractsCount: number;
+    summaryContent: string | null | undefined;
+}
+
+function Summary(props: Props) {
+    const {
+        id,
+        summaryType,
+        summaryTitle,
+        extractsCount,
+        summaryContent,
+    } = props;
+
+    const strings = useTranslation(i18n);
+
+    const [
+        isExpanded,
+        {
+            toggle: toggleExpansion,
+        },
+    ] = useBooleanState(false);
+
+    return (
+        <Container
+            className={styles.summary}
+            headingContainerClassName={styles.heading}
+            heading={summaryTitle}
+            headingDescription={(extractsCount > 1) ? (
+                resolveToString(
+                    strings.extractsCount,
+                    { count: extractsCount },
+                )
+            ) : (
+                resolveToString(
+                    strings.extractCount,
+                    { count: extractsCount },
+                )
+            )}
+            withInternalPadding
+            childrenContainerClassName={styles.content}
+            footerClassName={styles.footer}
+            footerActions={(
+                <Button
+                    name={id}
+                    variant="tertiary"
+                    onClick={toggleExpansion}
+                    actions={(isExpanded
+                        ? <ArrowUpSmallFillIcon />
+                        : <ArrowDownSmallFillIcon />
+                    )}
+                >
+                    {isExpanded ? strings.closeSources : strings.seeSources}
+                </Button>
+            )}
+        >
+            {summaryContent}
+            {isExpanded && (
+                <Sources summaryId={id} summaryType={summaryType} />
+            )}
+        </Container>
+    );
+}
+
+export default Summary;
diff --git a/app/src/views/OperationalLearning/Summary/styles.module.css b/app/src/views/OperationalLearning/Summary/styles.module.css
new file mode 100644
index 0000000000..e5c3df17c2
--- /dev/null
+++ b/app/src/views/OperationalLearning/Summary/styles.module.css
@@ -0,0 +1,20 @@
+.summary {
+    background-color: var(--go-ui-color-background);
+
+    .heading {
+        display: flex;
+        flex-wrap: wrap;
+    }
+
+    .content {
+        display: flex;
+        flex-direction: column;
+        gap: var(--go-ui-spacing-lg);
+    }
+
+    .footer {
+        display: flex;
+        align-items: flex-end;
+        justify-content: flex-end;
+    }
+}
diff --git a/app/src/views/OperationalLearning/i18n.json b/app/src/views/OperationalLearning/i18n.json
new file mode 100644
index 0000000000..cf59bd9b7a
--- /dev/null
+++ b/app/src/views/OperationalLearning/i18n.json
@@ -0,0 +1,22 @@
+{
+    "namespace": "operationalLearning",
+    "strings": {
+        "operationalLearningHeading":"Operational Learning",
+        "operationalLearningHeadingDescription":"Operational learning in emergencies is the lesson learned from managing and dealing with crises, refining protocols for resource allocation, decision-making, communication strategies, and others.  The summaries are generated using AI and Large Language Models, based on data coming from Final DREF Reports, Emergency Appeal reports and others.",
+        "byComponentTitle": "Component",
+        "bySectorTitle": "Sector",
+        "pendingMessage": "Request for generating operational learning summary is currently pending. Please wait a moment.",
+        "startedMessage": "Process of generating operational learning summary has started. This may take a few moments.",
+        "errorMessage": "Encountered an error while attempting to generate operational learning summary. Please try again later. If the issue continues, please contact the IFRC team.",
+        "emptyMessage": "There are no summaries available at the moment. Please adjust your filters or try again later.",
+        "filteredEmptyMessage": "Current filters did not return any operational learning summaries. Please try adjusting or clearing your filters to check for available operational learning summaries.",
+        "selectedFilters": "Selected Filters",
+        "clearFilters": "Clear Filters",
+        "applyFilters": "Apply Filters",
+        "noSummariesAvailableForSector": "No summaries available for sectors.",
+        "noSummariesAvailableForComponent": "No summaries available for components.",
+        "extractCount": "{count} extract",
+        "extractsCount": "{count} extracts",
+        "failedToCreateExport": "Failed to generate export."
+    }
+}
diff --git a/app/src/views/OperationalLearning/index.tsx b/app/src/views/OperationalLearning/index.tsx
new file mode 100644
index 0000000000..565d001264
--- /dev/null
+++ b/app/src/views/OperationalLearning/index.tsx
@@ -0,0 +1,493 @@
+import {
+    useCallback,
+    useMemo,
+    useState,
+} from 'react';
+import {
+    Button,
+    Chip,
+    Container,
+    DismissableListOutput,
+    DismissableMultiListOutput,
+    DismissableTextOutput,
+    List,
+    Tab,
+    TabList,
+    TabPanel,
+    Tabs,
+    TextOutput,
+} from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+import {
+    hasSomeDefinedValue,
+    numericIdSelector,
+    resolveToString,
+    stringNameSelector,
+    stringValueSelector,
+} from '@ifrc-go/ui/utils';
+import {
+    isDefined,
+    isTruthyString,
+    sum,
+} from '@togglecorp/fujs';
+import { EntriesAsList } from '@togglecorp/toggle-form';
+import { saveAs } from 'file-saver';
+import Papa from 'papaparse';
+
+import ExportButton from '#components/domain/ExportButton';
+import { type RegionOption } from '#components/domain/RegionSelectInput';
+import Page from '#components/Page';
+import { type components } from '#generated/types';
+import useCountry, { Country } from '#hooks/domain/useCountry';
+import useDisasterTypes, { DisasterType } from '#hooks/domain/useDisasterType';
+import useGlobalEnums from '#hooks/domain/useGlobalEnums';
+import usePerComponent, { type PerComponent } from '#hooks/domain/usePerComponent';
+import useSecondarySector, { type SecondarySector } from '#hooks/domain/useSecondarySector';
+import useAlert from '#hooks/useAlert';
+import useFilterState from '#hooks/useFilterState';
+import useRecursiveCsvExport from '#hooks/useRecursiveCsvRequest';
+import { getFormattedComponentName } from '#utils/domain/per';
+import {
+    type GoApiResponse,
+    GoApiUrlQuery,
+    useRequest,
+} from '#utils/restRequest';
+
+import Filters, { type FilterValue } from './Filters';
+import KeyInsights from './KeyInsights';
+import Summary, { type Props as SummaryProps } from './Summary';
+
+import i18n from './i18n.json';
+import styles from './styles.module.css';
+
+type SummaryStatusEnum = components<'read'>['schemas']['OpsLearningSummaryStatusEnum'];
+
+const SUMMARY_STATUS_PENDING = 1 satisfies SummaryStatusEnum;
+const SUMMARY_STATUS_STARTED = 2 satisfies SummaryStatusEnum;
+const SUMMARY_STATUS_SUCCESS = 3 satisfies SummaryStatusEnum;
+const SUMMARY_NO_EXTRACT_AVAILABLE = 4 satisfies SummaryStatusEnum;
+const SUMMARY_STATUS_FAILED = 5 satisfies SummaryStatusEnum;
+
+type OpsLearningSummaryResponse = GoApiResponse<'/api/v2/ops-learning/summary/'>;
+type OpsLearningSectorSummary = OpsLearningSummaryResponse['sectors'][number];
+type OpsLearningComponentSummary = OpsLearningSummaryResponse['components'][number];
+
+type OpsLearningQuery = GoApiUrlQuery<'/api/v2/ops-learning/'>;
+type QueryType = Pick<
+    OpsLearningQuery,
+    | 'appeal_code__region'
+    | 'appeal_code__country__in'
+    | 'appeal_code__dtype__in'
+    | 'appeal_code__start_date__gte'
+    | 'appeal_code__start_date__lte'
+    | 'sector_validated__in'
+    | 'per_component_validated__in'
+    | 'search_extracts'
+>;
+
+const regionKeySelector = (region: RegionOption) => region.key;
+const countryKeySelector = (country: Country) => country.id;
+const sectorKeySelector = (d: SecondarySector) => d.key;
+const sectorLabelSelector = (d: SecondarySector) => d.label;
+const perComponentKeySelector = (option: PerComponent) => option.id;
+const disasterTypeKeySelector = (type: DisasterType) => type.id;
+const disasterTypeLabelSelector = (type: DisasterType) => type.name ?? '?';
+
+// eslint-disable-next-line import/prefer-default-export
+export function Component() {
+    const strings = useTranslation(i18n);
+    const [activeTab, setActiveTab] = useState<'sector' | 'component'>('sector');
+    const [query, setQuery] = useState<QueryType>();
+    const [filterPristine, setFilterPristine] = useState(true);
+
+    const {
+        rawFilter,
+        filter,
+        rawFiltered,
+        filtered,
+        setFilterField,
+        resetFilter,
+    } = useFilterState<FilterValue>({
+        debounceTime: 300,
+        filter: {},
+    });
+
+    const onFilterChange = useCallback((...args: EntriesAsList<FilterValue>) => {
+        setFilterPristine(false);
+        setFilterField(...args);
+    }, [setFilterField]);
+
+    const alert = useAlert();
+
+    const { api_region_name: regionList } = useGlobalEnums();
+    const countryList = useCountry({ region: rawFilter.region });
+    const disasterTypeOptions = useDisasterTypes();
+    const secondarySectorOptions = useSecondarySector();
+    const perComponentOptions = usePerComponent();
+
+    const {
+        pending: opsLearningSummaryPending,
+        response: opsLearningSummaryResponse,
+        error: opsLearningSummaryError,
+    } = useRequest({
+        url: '/api/v2/ops-learning/summary/',
+        query,
+        shouldPoll: (poll) => {
+            const { errored, value } = poll;
+
+            const stopPolling = errored
+                || value?.status === SUMMARY_STATUS_FAILED
+                || value?.status === SUMMARY_STATUS_SUCCESS
+                || value?.status === SUMMARY_NO_EXTRACT_AVAILABLE;
+
+            if (stopPolling) {
+                return -1;
+            }
+
+            return 5000;
+        },
+        preserveResponse: true,
+    });
+
+    const sectorSummaryRendererParams = (
+        summaryId: number,
+        summary: OpsLearningSectorSummary,
+    ): SummaryProps => ({
+        id: summaryId,
+        summaryType: 'sector',
+        summaryTitle: summary.title,
+        extractsCount: summary.extracts_count,
+        summaryContent: summary.content,
+    });
+
+    const componentSummaryRendererParams = (
+        summaryId: number,
+        summary: OpsLearningComponentSummary,
+    ): SummaryProps => ({
+        id: summaryId,
+        summaryType: 'component',
+        summaryTitle: summary.title,
+        extractsCount: summary.extracts_count,
+        summaryContent: summary.content,
+    });
+
+    const showKeyInsights = !opsLearningSummaryPending
+        && isDefined(opsLearningSummaryResponse)
+        && (
+            isDefined(opsLearningSummaryResponse?.insights1_title)
+            || isDefined(opsLearningSummaryResponse?.insights2_title)
+            || isDefined(opsLearningSummaryResponse?.insights3_title)
+        );
+
+    const pendingMessage = opsLearningSummaryPending
+        || (opsLearningSummaryResponse?.status === SUMMARY_STATUS_PENDING)
+        ? strings.pendingMessage : strings.startedMessage;
+
+    const extractsCount = useMemo(() => {
+        if (activeTab === 'sector') {
+            return sum(
+                opsLearningSummaryResponse?.sectors.map((summary) => summary.extracts_count)
+                ?? [],
+            );
+        }
+        return sum(
+            opsLearningSummaryResponse?.components.map((summary) => summary.extracts_count)
+            ?? [],
+        );
+    }, [opsLearningSummaryResponse?.sectors, opsLearningSummaryResponse?.components, activeTab]);
+
+    const {
+        pending: opsLearningPending,
+        response: opsLearningResponse,
+    } = useRequest({
+        url: '/api/v2/ops-learning/',
+        query: {
+            ...query,
+            format: 'json',
+            is_validated: true,
+        },
+        preserveResponse: true,
+    });
+
+    const [
+        pendingExport,,
+        triggerExportStart,
+    ] = useRecursiveCsvExport({
+        disableProgress: true,
+        onFailure: () => {
+            alert.show(
+                strings.failedToCreateExport,
+                { variant: 'danger' },
+            );
+        },
+        onSuccess: (data) => {
+            const unparseData = Papa.unparse(data);
+            const blob = new Blob(
+                [unparseData],
+                { type: 'text/csv' },
+            );
+            saveAs(blob, 'operational-learning.csv');
+        },
+    });
+
+    const handleExportClick = useCallback(() => {
+        if (!opsLearningResponse?.count) {
+            return;
+        }
+        triggerExportStart(
+            '/api/v2/ops-learning/',
+            opsLearningResponse?.count,
+            {
+                ...query,
+                format: 'json',
+                is_validated: true,
+            },
+        );
+    }, [
+        triggerExportStart,
+        opsLearningResponse?.count,
+        query,
+    ]);
+
+    const handleApplyFilters = useCallback(() => {
+        const newQuery = {
+            appeal_code__region: hasSomeDefinedValue(filter.region) ? filter.region : undefined,
+            appeal_code__country__in: hasSomeDefinedValue(filter.countries)
+                ? filter.countries : undefined,
+            appeal_code__dtype__in: hasSomeDefinedValue(filter.disasterTypes)
+                ? filter.disasterTypes : undefined,
+            appeal_code__start_date__gte: hasSomeDefinedValue(filter.appealStartDateAfter)
+                ? filter.appealStartDateAfter : undefined,
+            appeal_code__start_date__lte: hasSomeDefinedValue(filter.appealStartDateBefore)
+                ? filter.appealStartDateBefore : undefined,
+            sector_validated__in: hasSomeDefinedValue(filter.secondarySectors)
+                ? filter.secondarySectors : undefined,
+            per_component_validated__in: hasSomeDefinedValue(filter.perComponents)
+                ? filter.perComponents : undefined,
+            search_extracts: isTruthyString(filter.appealSearchText)
+                ? (filter.appealSearchText) : undefined,
+        };
+        setFilterPristine(true);
+        setQuery(newQuery);
+    }, [filter]);
+
+    const handleResetFilters = useCallback(() => {
+        resetFilter();
+        setFilterPristine(true);
+        setQuery(undefined);
+    }, [resetFilter]);
+
+    return (
+        <Page
+            heading={strings.operationalLearningHeading}
+            description={strings.operationalLearningHeadingDescription}
+            mainSectionClassName={styles.mainSection}
+        >
+            <Container
+                footerClassName={styles.footer}
+                footerContentClassName={styles.footerContent}
+                // withGridViewInFilter
+                filters={(
+                    <Filters
+                        value={rawFilter}
+                        onChange={onFilterChange}
+                        disasterTypeOptions={disasterTypeOptions}
+                        secondarySectorOptions={secondarySectorOptions}
+                        perComponentOptions={perComponentOptions}
+                    />
+                )}
+                footerContent={(
+                    <>
+                        <div className={styles.filterChips}>
+                            {isDefined(rawFilter) && hasSomeDefinedValue(rawFilter) && (
+                                <TextOutput
+                                    className={styles.selectedFilters}
+                                    valueClassName={styles.options}
+                                    withoutLabelColon
+                                    strongLabel
+                                    label={strings.selectedFilters}
+                                    value={(
+                                        <>
+                                            <DismissableListOutput
+                                                name="region"
+                                                value={rawFilter.region}
+                                                onDismiss={onFilterChange}
+                                                options={regionList}
+                                                labelSelector={stringValueSelector}
+                                                keySelector={regionKeySelector}
+                                            />
+                                            <DismissableMultiListOutput
+                                                name="countries"
+                                                onDismiss={onFilterChange}
+                                                value={rawFilter.countries}
+                                                options={countryList}
+                                                labelSelector={stringNameSelector}
+                                                keySelector={countryKeySelector}
+                                            />
+                                            <DismissableMultiListOutput
+                                                name="disasterTypes"
+                                                onDismiss={onFilterChange}
+                                                value={rawFilter.disasterTypes}
+                                                options={disasterTypeOptions}
+                                                labelSelector={disasterTypeLabelSelector}
+                                                keySelector={disasterTypeKeySelector}
+                                            />
+                                            <DismissableMultiListOutput
+                                                name="secondarySectors"
+                                                onDismiss={onFilterChange}
+                                                value={rawFilter.secondarySectors}
+                                                options={secondarySectorOptions}
+                                                labelSelector={sectorLabelSelector}
+                                                keySelector={sectorKeySelector}
+                                            />
+                                            <DismissableMultiListOutput
+                                                name="perComponents"
+                                                onDismiss={onFilterChange}
+                                                value={rawFilter.perComponents}
+                                                options={perComponentOptions}
+                                                labelSelector={getFormattedComponentName}
+                                                keySelector={perComponentKeySelector}
+                                            />
+                                            <DismissableTextOutput
+                                                name="appealStartDateAfter"
+                                                value={rawFilter.appealStartDateAfter}
+                                                onDismiss={onFilterChange}
+                                            />
+                                            <DismissableTextOutput
+                                                name="appealStartDateBefore"
+                                                value={rawFilter.appealStartDateBefore}
+                                                onDismiss={onFilterChange}
+                                            />
+                                            <DismissableTextOutput
+                                                name="appealSearchText"
+                                                value={rawFilter.appealSearchText}
+                                                onDismiss={onFilterChange}
+                                            />
+                                        </>
+                                    )}
+                                />
+                            )}
+                        </div>
+                        <div className={styles.actionButtons}>
+                            {!filterPristine && (
+                                <Button
+                                    name="apply"
+                                    onClick={handleApplyFilters}
+                                    disabled={filterPristine}
+                                    variant="primary"
+                                >
+                                    {strings.applyFilters}
+                                </Button>
+                            )}
+                            {rawFiltered && (
+                                <Button
+                                    name={undefined}
+                                    onClick={handleResetFilters}
+                                    variant="secondary"
+                                >
+                                    {strings.clearFilters}
+                                </Button>
+                            )}
+                            <ExportButton
+                                onClick={handleExportClick}
+                                pendingExport={pendingExport}
+                                totalCount={opsLearningResponse?.count}
+                                disabled={(
+                                    opsLearningSummaryResponse?.status !== SUMMARY_STATUS_SUCCESS
+                                    || opsLearningPending
+                                )}
+                            />
+                        </div>
+                    </>
+                )}
+            />
+            {showKeyInsights && (
+                <KeyInsights
+                    opsLearningSummaryResponse={opsLearningSummaryResponse}
+                />
+            )}
+            <Container
+                pending={opsLearningSummaryPending
+                    || opsLearningSummaryResponse?.status === SUMMARY_STATUS_PENDING
+                    || opsLearningSummaryResponse?.status === SUMMARY_STATUS_STARTED}
+                pendingMessage={pendingMessage}
+                errored={isDefined(opsLearningSummaryError)
+                    || opsLearningSummaryResponse?.status === SUMMARY_STATUS_FAILED}
+                errorMessage={strings.errorMessage}
+                filtered={filtered}
+                empty={isDefined(opsLearningSummaryResponse) && ((
+                    opsLearningSummaryResponse?.components.length < 1
+                    && opsLearningSummaryResponse?.sectors.length < 1
+                ) || opsLearningSummaryResponse?.status === SUMMARY_NO_EXTRACT_AVAILABLE)}
+                emptyMessage={strings.emptyMessage}
+                filteredEmptyMessage={strings.filteredEmptyMessage}
+            >
+                <Tabs
+                    onChange={setActiveTab}
+                    value={activeTab}
+                    variant="tertiary"
+                >
+                    <Container
+                        heading={(
+                            <TabList>
+                                <Tab name="sector">{strings.bySectorTitle}</Tab>
+                                <Tab name="component">{strings.byComponentTitle}</Tab>
+                            </TabList>
+                        )}
+                        headingContainerClassName={styles.summaryHeading}
+                        headingDescription={extractsCount > 0 && (
+                            <Chip
+                                name="extractsCount"
+                                label={((extractsCount) > 1) ? (
+                                    resolveToString(
+                                        strings.extractsCount,
+                                        { count: extractsCount },
+                                    )
+                                ) : (
+                                    resolveToString(
+                                        strings.extractCount,
+                                        { count: extractsCount },
+                                    )
+                                )}
+                                variant="tertiary"
+                            />
+                        )}
+                    >
+                        <TabPanel
+                            name="sector"
+                        >
+                            <List
+                                className={styles.summaryList}
+                                data={opsLearningSummaryResponse?.sectors}
+                                renderer={Summary}
+                                keySelector={numericIdSelector}
+                                rendererParams={sectorSummaryRendererParams}
+                                emptyMessage={strings.noSummariesAvailableForSector}
+                                errored={isDefined(opsLearningSummaryError)}
+                                pending={opsLearningSummaryPending}
+                                filtered={false}
+                            />
+                        </TabPanel>
+                        <TabPanel
+                            name="component"
+                        >
+                            <List
+                                className={styles.summaryList}
+                                data={opsLearningSummaryResponse?.components}
+                                renderer={Summary}
+                                keySelector={numericIdSelector}
+                                rendererParams={componentSummaryRendererParams}
+                                emptyMessage={strings.noSummariesAvailableForComponent}
+                                errored={isDefined(opsLearningSummaryError)}
+                                pending={opsLearningSummaryPending}
+                                filtered={false}
+                            />
+                        </TabPanel>
+                    </Container>
+                </Tabs>
+            </Container>
+        </Page>
+    );
+}
+
+Component.displayName = 'OperationalLearning';
diff --git a/app/src/views/OperationalLearning/styles.module.css b/app/src/views/OperationalLearning/styles.module.css
new file mode 100644
index 0000000000..95a9973730
--- /dev/null
+++ b/app/src/views/OperationalLearning/styles.module.css
@@ -0,0 +1,55 @@
+.mainSection {
+    display: flex;
+    flex-direction: column;
+    gap: var(--go-ui-spacing-xl);
+
+    .selected-filters {
+        display: flex;
+        padding: var(--go-ui-spacing-sm) 0;
+        gap: var(--go-ui-spacing-sm);
+
+        .options {
+            display: flex;
+            flex-wrap: wrap;
+            gap: var(--go-ui-spacing-sm);
+        }
+    }
+
+    .summary-heading {
+        gap: var(--go-ui-spacing-xl);
+    }
+
+    .summary-list {
+        display: flex;
+        flex-direction: column;
+        gap: var(--go-ui-spacing-md);
+    }
+
+    .action-buttons {
+        display: flex;
+        align-items: flex-end;
+        gap: var(--go-ui-spacing-sm);
+    }
+
+    .footer {
+        display: flex;
+        justify-content: space-between;
+    }
+
+    .filter-chips {
+        width: 100%;
+    }
+
+    .footer-content {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 0;
+        width: 100%;
+
+        .action-buttons {
+            align-self: flex-end;
+        }
+    }
+}
+
+
diff --git a/app/src/views/RootLayout/index.tsx b/app/src/views/RootLayout/index.tsx
index 8215638c9a..b20096553f 100644
--- a/app/src/views/RootLayout/index.tsx
+++ b/app/src/views/RootLayout/index.tsx
@@ -261,6 +261,25 @@ export function Component() {
         preserveResponse: true,
     });
 
+    const {
+        pending: secondarySectorsPending,
+        response: secondarySectors,
+        retrigger: secondarySectorsTrigger,
+    } = useRequest({
+        skip: !fetchDomainData['secondary-sector'],
+        url: '/api/v2/secondarysector',
+        preserveResponse: true,
+    });
+
+    const {
+        pending: perComponentsPending,
+        response: perComponents,
+        retrigger: perFormComponentsTrigger,
+    } = useRequest({
+        skip: !fetchDomainData['per-components'],
+        url: '/api/v2/per-formcomponent/',
+        preserveResponse: true,
+    });
     // NOTE: Always calling /api/v2/user/me to check validity of logged-in user
     const userSkip = !isAuthenticated;
     // const userSkip = !fetchDomainData['user-me'] || !isAuthenticated;
@@ -302,6 +321,12 @@ export function Component() {
                 case 'region':
                     regionsTrigger();
                     break;
+                case 'secondary-sector':
+                    secondarySectorsTrigger();
+                    break;
+                case 'per-components':
+                    perFormComponentsTrigger();
+                    break;
                 default:
                     // eslint-disable-next-line no-console
                     console.error(`Cannot call invalidate on '${name}'`);
@@ -312,6 +337,8 @@ export function Component() {
             regionsTrigger,
             globalEnumsTrigger,
             disasterTypesTrigger,
+            secondarySectorsTrigger,
+            perFormComponentsTrigger,
             userMeTrigger,
         ],
     );
@@ -335,6 +362,12 @@ export function Component() {
 
             regionsPending,
             regions,
+
+            secondarySectors,
+            secondarySectorsPending,
+
+            perComponents,
+            perComponentsPending,
         }),
         [
             userMe,
@@ -347,6 +380,10 @@ export function Component() {
             globalEnumsPending,
             regions,
             regionsPending,
+            secondarySectors,
+            secondarySectorsPending,
+            perComponents,
+            perComponentsPending,
             registerDomainData,
             invalidateDomainData,
         ],
diff --git a/packages/ui/src/components/Chip/i18n.json b/packages/ui/src/components/Chip/i18n.json
new file mode 100644
index 0000000000..f25c590899
--- /dev/null
+++ b/packages/ui/src/components/Chip/i18n.json
@@ -0,0 +1,6 @@
+{
+    "namespace": "common",
+    "strings": {
+        "deleteButtonLabel": "Close"
+    }
+}
diff --git a/packages/ui/src/components/Chip/index.tsx b/packages/ui/src/components/Chip/index.tsx
new file mode 100644
index 0000000000..e136a938a6
--- /dev/null
+++ b/packages/ui/src/components/Chip/index.tsx
@@ -0,0 +1,75 @@
+import { useCallback } from 'react';
+import { CloseFillIcon } from '@ifrc-go/icons';
+import {
+    _cs,
+    isDefined,
+    isNotDefined,
+} from '@togglecorp/fujs';
+
+import IconButton from '#components/IconButton';
+import useTranslation from '#hooks/useTranslation';
+
+import i18n from './i18n.json';
+import styles from './styles.module.css';
+
+export type ChipVariant = 'primary' | 'secondary' | 'tertiary';
+
+const chipVariantToClassNameMap: Record<ChipVariant, string> = {
+    primary: styles.primary,
+    secondary: styles.secondary,
+    tertiary: styles.tertiary,
+};
+export interface Props<N> {
+    className?: string;
+    name: N;
+    label: string;
+    variant?: ChipVariant;
+    onDelete?: (name: N, e: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+function Chip<const N>(props: Props<N>) {
+    const {
+        className,
+        name,
+        label,
+        variant = 'primary',
+        onDelete,
+    } = props;
+
+    const strings = useTranslation(i18n);
+
+    const handleDeleteButtonClick = useCallback((n: N, e: React.MouseEvent<HTMLButtonElement>) => {
+        if (onDelete) {
+            onDelete(n, e);
+        }
+    }, [onDelete]);
+
+    return (
+        <div className={_cs(
+            styles.chip,
+            chipVariantToClassNameMap[variant],
+            isNotDefined(onDelete) && styles.noDeleteIcon,
+            className,
+        )}
+        >
+            <span>
+                {label}
+            </span>
+            {isDefined(onDelete) && (
+                <IconButton
+                    className={styles.closeIcon}
+                    spacing="none"
+                    name={name}
+                    title={strings.deleteButtonLabel}
+                    ariaLabel={strings.deleteButtonLabel}
+                    onClick={handleDeleteButtonClick}
+                    variant={variant}
+                >
+                    <CloseFillIcon />
+                </IconButton>
+            )}
+        </div>
+    );
+}
+
+export default Chip;
diff --git a/packages/ui/src/components/Chip/styles.module.css b/packages/ui/src/components/Chip/styles.module.css
new file mode 100644
index 0000000000..3c6d34e45b
--- /dev/null
+++ b/packages/ui/src/components/Chip/styles.module.css
@@ -0,0 +1,42 @@
+.chip {
+    --color-border: transparent;
+    --color-text: inherit;
+    --color-background: transparent;
+    --border-radius: var(--go-ui-border-radius-full);
+    --padding: var(--go-ui-spacing-4xs) var(--go-ui-spacing-4xs) var(--go-ui-spacing-4xs) var(--go-ui-spacing-sm);
+
+    display: flex;
+    align-items: center;
+    border: var(--go-ui-width-separator-sm) solid var(--color-border);
+    border-radius: var(--border-radius);
+    background-color: var(--color-background);
+    padding: var(--padding);
+    color: var(--color-text);
+    gap: var(--go-ui-spacing-3xs);
+
+    &.no-delete-icon {
+        --padding: var(--go-ui-spacing-4xs) var(--go-ui-spacing-sm);
+    }
+
+    &.primary {
+        --color-border: var(--go-ui-color-primary-red);
+        --color-background: var(--go-ui-color-primary-red);
+        --color-text: var(--go-ui-color-white);
+    }
+
+    &.secondary {
+        --color-border: var(--go-ui-color-primary-red);
+        --color-background: var(--go-ui-color-white);
+        --color-text: var(--go-ui-color-primary-red);
+    }
+
+    &.tertiary {
+        --color-border: var(--go-ui-color-gray-40);
+        --color-background: var(--go-ui-color-gray-30);
+        --color-text: inherit;
+    }
+
+    .close-icon {
+        font-size: var(--go-ui-font-size-sm);
+    }
+}
diff --git a/packages/ui/src/components/DismissableListOutput/index.tsx b/packages/ui/src/components/DismissableListOutput/index.tsx
new file mode 100644
index 0000000000..8de24998d1
--- /dev/null
+++ b/packages/ui/src/components/DismissableListOutput/index.tsx
@@ -0,0 +1,65 @@
+import {
+    useCallback,
+    useMemo,
+} from 'react';
+import { isNotDefined } from '@togglecorp/fujs';
+
+import Chip from '#components/Chip';
+
+export interface Props<
+    O,
+    V extends string | number,
+    N extends string | number
+> {
+    value: V | undefined;
+    name: N;
+    onDismiss: (value: V | undefined, name: N) => void;
+    keySelector: (value: O) => V;
+    labelSelector: (value: O) => string;
+    options: O[] | undefined | null;
+}
+
+function DismissableListOutput<
+    O,
+    V extends string | number,
+    N extends string | number
+>(
+    props: Props<O, V, N>,
+) {
+    const {
+        name,
+        value,
+        onDismiss,
+        labelSelector,
+        keySelector,
+        options,
+    } = props;
+
+    const item = useMemo(() => {
+        if (isNotDefined(options) || isNotDefined(value)) {
+            return undefined;
+        }
+        return options?.find((option) => keySelector(option) === value);
+    }, [value, options, keySelector]);
+
+    const handleDismiss = useCallback(() => {
+        onDismiss(undefined, name);
+    }, [name, onDismiss]);
+
+    if (isNotDefined(value) || isNotDefined(item)) {
+        return null;
+    }
+
+    const itemName = labelSelector(item);
+
+    return (
+        <Chip
+            label={itemName}
+            name={value}
+            onDelete={handleDismiss}
+            variant="tertiary"
+        />
+    );
+}
+
+export default DismissableListOutput;
diff --git a/packages/ui/src/components/DismissableMultiListOutput/index.tsx b/packages/ui/src/components/DismissableMultiListOutput/index.tsx
new file mode 100644
index 0000000000..f230abf7fd
--- /dev/null
+++ b/packages/ui/src/components/DismissableMultiListOutput/index.tsx
@@ -0,0 +1,72 @@
+import {
+    useCallback,
+    useMemo,
+} from 'react';
+import { isNotDefined } from '@togglecorp/fujs';
+
+import Chip, { type Props as ChipProps } from '#components/Chip';
+import RawList from '#components/RawList';
+
+export interface Props<
+    O,
+    V extends string | number,
+    N extends string | number
+> {
+    value: V[] | undefined;
+    name: N;
+    onDismiss: (value: V[] | undefined, name: N) => void;
+    keySelector: (value: O) => V;
+    labelSelector: (value: O) => string;
+    options: O[] | undefined | null;
+}
+
+function DismissableMultiListOutput<
+    O,
+    V extends string | number,
+    N extends string | number
+>(
+    props: Props<O, V, N>,
+) {
+    const {
+        name,
+        value,
+        onDismiss,
+        labelSelector,
+        keySelector,
+        options,
+    } = props;
+
+    const values = useMemo(() => {
+        if (isNotDefined(options) || !Array.isArray(value)) {
+            return undefined;
+        }
+        return options?.filter((option) => value?.includes(keySelector(option)));
+    }, [value, options, keySelector]);
+
+    const handleDismiss = useCallback((val: V) => {
+        const updatedValue = value?.filter((item) => item !== val);
+        onDismiss(updatedValue, name);
+    }, [name, onDismiss, value]);
+
+    const chipRendererParams = useCallback((key: V, item: O): ChipProps<V> => ({
+        label: labelSelector(item),
+        name: key,
+        onDelete: handleDismiss,
+        variant: 'tertiary',
+    }), [handleDismiss, labelSelector]);
+
+    if (isNotDefined(value) || value.length < 1) {
+        return null;
+    }
+
+    return (
+        <RawList
+            data={values}
+            renderer={Chip<V>}
+            rendererParams={chipRendererParams}
+            keySelector={keySelector}
+        />
+    );
+}
+
+export default DismissableMultiListOutput;
diff --git a/packages/ui/src/components/DismissableTextOutput/index.tsx b/packages/ui/src/components/DismissableTextOutput/index.tsx
new file mode 100644
index 0000000000..f2b4f12c13
--- /dev/null
+++ b/packages/ui/src/components/DismissableTextOutput/index.tsx
@@ -0,0 +1,39 @@
+import { useCallback } from 'react';
+import { isNotDefined } from '@togglecorp/fujs';
+
+import Chip from '#components/Chip';
+
+export interface Props<T extends string | number> {
+    value: string | undefined;
+    name: T;
+    onDismiss: (value: undefined, name: T) => void;
+}
+
+function DismissableTextOutput<T extends string | number>(
+    props: Props<T>,
+) {
+    const {
+        value,
+        name,
+        onDismiss,
+    } = props;
+
+    const handleDismiss = useCallback(() => {
+        onDismiss(undefined, name);
+    }, [name, onDismiss]);
+
+    if (isNotDefined(value)) {
+        return null;
+    }
+
+    return (
+        <Chip
+            label={value}
+            name={name}
+            onDelete={handleDismiss}
+            variant="tertiary"
+        />
+    );
+}
+
+export default DismissableTextOutput;
diff --git a/packages/ui/src/index.tsx b/packages/ui/src/index.tsx
index bb293599e7..222a388200 100644
--- a/packages/ui/src/index.tsx
+++ b/packages/ui/src/index.tsx
@@ -37,6 +37,8 @@ export { default as Breadcrumbs } from './components/Breadcrumbs';
 export type { BreadcrumbsProps } from './components/Breadcrumbs';
 export { default as ChartAxes } from './components/ChartAxes';
 export { default as ChartContainer } from './components/ChartContainer';
+export type { Props as ChipProps } from './components/Chip';
+export { default as Chip } from './components/Chip';
 export type { Props as CheckboxProps } from './components/Checkbox';
 export { default as Checkbox } from './components/Checkbox';
 export type { Props as ChecklistProps } from './components/Checklist';
@@ -51,6 +53,12 @@ export type { Props as DateOutputProps } from './components/DateOutput';
 export { default as DateOutput } from './components/DateOutput';
 export type { Props as DateRangeOutputProps } from './components/DateRangeOutput';
 export { default as DateRangeOutput } from './components/DateRangeOutput';
+export type { Props as DismissableListOutputProps } from './components/DismissableListOutput';
+export { default as DismissableListOutput } from './components/DismissableListOutput';
+export type { Props as DismissableMultiListOutputProps } from './components/DismissableMultiListOutput';
+export { default as DismissableMultiListOutput } from './components/DismissableMultiListOutput';
+export type { Props as DismissableTextOutputProps } from './components/DismissableTextOutput';
+export { default as DismissableTextOutput } from './components/DismissableTextOutput';
 export type { Props as DropdownMenuProps } from './components/DropdownMenu';
 export { default as DropdownMenu } from './components/DropdownMenu';
 export type { Props as ExpandableContainerProps } from './components/ExpandableContainer';