diff --git a/app/assets/scripts/actions/index.js b/app/assets/scripts/actions/index.js
index cee3fd126..9bbeb590f 100644
--- a/app/assets/scripts/actions/index.js
+++ b/app/assets/scripts/actions/index.js
@@ -59,6 +59,40 @@ export const getMe = () => (
   fetchJSON('api/v2/user/me/', GET_ME, withToken())
 );
 
+export const GET_REGIONAL_PROJECTS = 'GET_REGIONAL_PROJECTS';
+export const getRegionalProjects = (regionId, filterValues) => {
+  const filters = {
+    region: regionId,
+    limit: 9999,
+    ...filterValues
+  };
+  const query = buildAPIQS(filters, { arrayFormat: 'comma' });
+  return fetchJSON(`api/v2/project/?${query}`, GET_REGIONAL_PROJECTS, withToken());
+};
+
+export const GET_REGIONAL_PROJECTS_OVERVIEW = 'GET_REGIONAL_PROJECTS_OVERVIEW';
+export function getRegionalProjectsOverview (regionId) {
+  return fetchJSON(`api/v2/region-project/${regionId}/overview/`, GET_REGIONAL_PROJECTS_OVERVIEW, withToken());
+}
+
+export const GET_REGIONAL_MOVEMENT_ACTIVITIES = 'GET_REGIONAL_MOVEMENT_ACTIVITIES';
+export function getRegionalMovementActivities (regionId, filters) {
+  const query = buildAPIQS(filters, { arrayFormat: 'comma' });
+  return fetchJSON(`api/v2/region-project/${regionId}/movement-activities/?${query}`, GET_REGIONAL_MOVEMENT_ACTIVITIES, withToken());
+}
+
+export const GET_NATIONAL_SOCIETY_ACTIVITIES = 'GET_NATIONAL_SOCIETY_ACTIVITIES';
+export function getNationalSocietyActivities (regionId, filters) {
+  const query = buildAPIQS(filters, { arrayFormat: 'comma' });
+
+  return fetchJSON(`api/v2/region-project/${regionId}/national-society-activities/?${query}`, GET_NATIONAL_SOCIETY_ACTIVITIES, withToken());
+}
+
+export const GET_NATIONAL_SOCIETY_ACTIVITIES_WO_FILTERS = 'GET_NATIONAL_SOCIETY_ACTIVITIES_WO_FILTERS';
+export function getNationalSocietyActivitiesWoFilters (regionId) {
+  return fetchJSON(`api/v2/region-project/${regionId}/national-society-activities/`, GET_NATIONAL_SOCIETY_ACTIVITIES_WO_FILTERS, withToken());
+}
+
 export const GET_PROJECTS = 'GET_PROJECTS';
 export function getProjects (countryId, filterValues) {
   const filters = {
@@ -66,7 +100,7 @@ export function getProjects (countryId, filterValues) {
     ...filterValues
   };
   const f = buildAPIQS(filters);
-  return fetchJSON(`api/v2/project/?${f}`, GET_PROJECTS, withToken());
+  return fetchJSON(`api/v2/project/?${f}`, GET_PROJECTS, withToken(), { countryId });
 }
 
 export const POST_PROJECT = 'POST_PROJECT';
diff --git a/app/assets/scripts/components/formatted-number.js b/app/assets/scripts/components/formatted-number.js
index c9f563d05..11c71bdbd 100644
--- a/app/assets/scripts/components/formatted-number.js
+++ b/app/assets/scripts/components/formatted-number.js
@@ -29,7 +29,8 @@ const FormattedNumber = ({
     if (addSeparator) {
       displayNumber = addCommaSeparator(displayNumber);
     } else if (fixedTo) {
-      displayNumber = Number.parseFloat(displayNumber).toFixed(fixedTo);
+      const shouldFix = (displayNumber - Math.floor(displayNumber)) !== 0;
+      displayNumber = Number.parseFloat(displayNumber).toFixed(shouldFix ? fixedTo : 0);
     }
   }
 
diff --git a/app/assets/scripts/components/text-output.js b/app/assets/scripts/components/text-output.js
index f3215b250..a5ad8598d 100644
--- a/app/assets/scripts/components/text-output.js
+++ b/app/assets/scripts/components/text-output.js
@@ -4,36 +4,54 @@ import _cs from 'classnames';
 import FormattedNumber from './formatted-number';
 import FormattedDate from './formatted-date';
 
-const TextOutput = ({
-  className,
-  label,
-  value,
-  addSeparatorToValue,
-  normalizeValue,
-  fixedTo,
-  type = 'string',
-}) => (
-  <div className={_cs('tc-text-output', className)}>
-    <div className='tc-label'>
-      {label}
-    </div>
-    <div className='tc-value'>
-      { type === 'string' && value }
-      { type === 'number' && (
-        <FormattedNumber
-          value={value}
-          addSeparator={addSeparatorToValue}
-          fixedTo={fixedTo}
-          normalize={normalizeValue}
-        />
-      )}
-      { type === 'date' && (
-        <FormattedDate
-          value={value}
-        />
-      )}
-    </div>
-  </div>
+const isValueEmpty = (value) => (
+  value === null || value === '' || value === undefined
 );
 
+function TextOutput (p) {
+  const {
+    className,
+    label,
+    value,
+    addSeparatorToValue,
+    normalizeValue,
+    fixedTo,
+    type = 'string',
+    reverseOrder,
+    hideEmptyValue,
+  } = p;
+
+  return (
+    (hideEmptyValue && isValueEmpty(value)) ? (
+      null
+    ) : (
+      <div className={_cs(
+        'tc-text-output',
+        reverseOrder && 'tc-text-output-reversed',
+        className,
+      )}>
+        <div className='tc-label'>
+          {label}
+        </div>
+        <div className='tc-value'>
+          { type === 'string' && value }
+          { type === 'number' && (
+            <FormattedNumber
+              value={value}
+              addSeparator={addSeparatorToValue}
+              fixedTo={fixedTo}
+              normalize={normalizeValue}
+            />
+          )}
+          { type === 'date' && (
+            <FormattedDate
+              value={value}
+            />
+          )}
+        </div>
+      </div>
+    )
+  );
+}
+
 export default TextOutput;
diff --git a/app/assets/scripts/reducers/index.js b/app/assets/scripts/reducers/index.js
index 27586cafe..62f43b0b5 100644
--- a/app/assets/scripts/reducers/index.js
+++ b/app/assets/scripts/reducers/index.js
@@ -2,6 +2,8 @@
 import { combineReducers } from 'redux';
 
 import { systemAlertsReducer } from '../components/system-alerts';
+import { createReducer } from '../utils/reducer-utils';
+
 import user from './user';
 import profile from './profile';
 import countries from './countries';
@@ -66,6 +68,11 @@ export const reducers = {
   projectForm,
   projectDelete,
   countryOverview,
+  regionalProjectsOverview: createReducer('GET_REGIONAL_PROJECTS_OVERVIEW'),
+  regionalMovementActivities: createReducer('GET_REGIONAL_MOVEMENT_ACTIVITIES'),
+  nationalSocietyActivities: createReducer('GET_NATIONAL_SOCIETY_ACTIVITIES'),
+  nationalSocietyActivitiesWoFilters: createReducer('GET_NATIONAL_SOCIETY_ACTIVITIES_WO_FILTERS'),
+  regionalProjects: createReducer('GET_REGIONAL_PROJECTS'),
   me,
 };
 
diff --git a/app/assets/scripts/reducers/projects.js b/app/assets/scripts/reducers/projects.js
index 8901019b4..062482ecd 100644
--- a/app/assets/scripts/reducers/projects.js
+++ b/app/assets/scripts/reducers/projects.js
@@ -5,33 +5,19 @@ import {
   stateSuccess,
 } from '../utils/reducer-utils';
 
-const initialState = {
-  fetching: false,
-  fetched: false,
-  receivedAt: null,
-  data: {}
-};
+const initialState = {};
 
 export default function reducer (state = initialState, action) {
   let newState = { ...state };
   switch (action.type) {
     case 'GET_PROJECTS_INFLIGHT':
-      newState = {
-        ...newState,
-        ...stateInflight(state, action),
-      };
+      newState[action.countryId] = stateInflight(state, action);
       break;
     case 'GET_PROJECTS_FAILED':
-      newState = {
-        ...newState,
-        ...stateError(state, action),
-      };
+      newState[action.countryId] = stateError(state, action);
       break;
     case 'GET_PROJECTS_SUCCESS':
-      newState = {
-        ...newState,
-        ...stateSuccess(state, action),
-      };
+      newState[action.countryId] = stateSuccess(state, action);
       break;
   }
 
diff --git a/app/assets/scripts/selectors/index.js b/app/assets/scripts/selectors/index.js
index 3d238d6bb..4466309b5 100644
--- a/app/assets/scripts/selectors/index.js
+++ b/app/assets/scripts/selectors/index.js
@@ -1,7 +1,38 @@
+const initialState = {
+  fetching: false,
+  fetched: false,
+  receivedAt: null,
+  data: {}
+};
+
 export const countryOverviewSelector = (state) => (
   state.countryOverview
 );
 
+export const countryProjectSelector = (state, id) => (
+  state.projects[id] || initialState
+);
+
 export const meSelector = (state) => (
   state.me
 );
+
+export const regionalMovementActivitiesSelector = (state) => (
+  state.regionalMovementActivities
+);
+
+export const regionalProjectsOverviewSelector = (state) => (
+  state.regionalProjectsOverview
+);
+
+export const nationalSocietyActivitiesSelector = (state) => (
+  state.nationalSocietyActivities
+);
+
+export const nationalSocietyActivitiesWoFiltersSelector = (state) => (
+  state.nationalSocietyActivitiesWoFilters
+);
+
+export const regionalProjectsSelector = (state) => (
+  state.regionalProjects
+);
diff --git a/app/assets/scripts/utils/constants.js b/app/assets/scripts/utils/constants.js
index 51865febf..ee9d44367 100644
--- a/app/assets/scripts/utils/constants.js
+++ b/app/assets/scripts/utils/constants.js
@@ -24,67 +24,67 @@ export const sectorList = [
     key: '0',
     title: 'WASH',
     color: '#66c2a5',
-    inputValue: 'Wash',
+    inputValue: '0',
   },
   {
     key: '1',
     title: 'PGI',
     color: '#fc8d62',
-    inputValue: 'Pgi',
+    inputValue: '1',
   },
   {
     key: '2',
     title: 'CEA',
     color: '#8da0cb',
-    inputValue: 'Cea',
+    inputValue: '2',
   },
   {
     key: '3',
     title: 'Migration',
     color: '#e78ac3',
-    inputValue: 'Migration',
+    inputValue: '3',
   },
   {
     key: '4',
     title: 'Health (public)',
     color: '#a6d854',
-    inputValue: 'Health Public',
+    inputValue: '4',
   },
   {
     key: '5',
     title: 'DRR',
     color: '#ffd92f',
-    inputValue: 'Drr',
+    inputValue: '5',
   },
   {
     key: '6',
     title: 'Shelter',
     color: '#e5c494',
-    inputValue: 'Shelter',
+    inputValue: '6',
   },
   {
     key: '7',
     title: 'NS Strengthening',
     color: '#b3b3b3',
-    inputValue: 'NS Strengthening',
+    inputValue: '7',
   },
   {
     key: '8',
     title: 'Education',
     color: '#b3b3b3',
-    inputValue: 'Education',
+    inputValue: '8',
   },
   {
     key: '9',
     title: 'Livelihoods and basic needs',
     color: '#b3b3b3',
-    inputValue: 'Livelihoods And Basic Needs',
+    inputValue: '9',
   },
   {
     key: '10',
     title: 'Health (clinical)',
     color: '#a6d854',
-    inputValue: 'Health Clinical',
+    inputValue: '10',
   },
 ];
 
@@ -93,79 +93,85 @@ export const secondarySectorList = [
     key: '0',
     title: 'WASH',
     color: '#66c2a5',
-    inputValue: 'Wash',
+    inputValue: '0',
   },
   {
     key: '1',
     title: 'PGI',
     color: '#fc8d62',
-    inputValue: 'Pgi',
+    inputValue: '1',
   },
   {
     key: '2',
     title: 'CEA',
     color: '#8da0cb',
-    inputValue: 'Cea',
+    inputValue: '2',
   },
   {
     key: '3',
     title: 'Migration',
     color: '#e78ac3',
-    inputValue: 'Migration',
+    inputValue: '3',
   },
   {
     key: '4',
     title: 'Health (public)',
     color: '#a6d854',
-    inputValue: 'Health Public',
+    inputValue: '4',
   },
   {
     key: '5',
     title: 'DRR',
     color: '#ffd92f',
-    inputValue: 'Drr',
+    inputValue: '5',
   },
   {
     key: '6',
     title: 'Shelter',
     color: '#e5c494',
-    inputValue: 'Shelter',
+    inputValue: '6',
   },
   {
     key: '7',
     title: 'NS Strengthening',
     color: '#b3b3b3',
-    inputValue: 'NS Strengthening',
+    inputValue: '7',
   },
   {
     key: '8',
     title: 'Education',
     color: '#b3b3b3',
-    inputValue: 'Education',
+    inputValue: '8',
   },
   {
     key: '9',
     title: 'Livelihoods and basic needs',
     color: '#b3b3b3',
-    inputValue: 'Livelihoods And Basic Needs',
+    inputValue: '9',
   },
   {
     key: '10',
     title: 'Recovery',
     color: '#b3b3b3',
-    inputValue: 'Recovery',
+    inputValue: '10',
   },
   {
     key: '11',
     title: 'Internal displacement',
     color: '#b3b3b3',
-    inputValue: 'Internal Displacement',
+    inputValue: '11',
   },
   {
     key: '12',
     title: 'Health (clinical)',
     color: '#a6d854',
-    inputValue: 'Health Clinical',
+    inputValue: '12',
+  },
+  {
+    key: '13',
+    title: 'COVID',
+    color: '#a6d854',
+    inputValue: '13',
   },
 ];
 
@@ -193,8 +199,8 @@ export const statusList = [
 export const statuses = listToMap(statusList, d => d.key, d => d.title);
 
 export const operationTypeList = [
-  { value: 'Programme', label: 'Programme' },
-  { value: 'Emergency Operation', label: 'Emergency operation' },
+  { value: '0', label: 'Programme' },
+  { value: '1', label: 'Emergency operation' },
 ];
 
 export const operationTypes = {
diff --git a/app/assets/scripts/utils/country-centroids.js b/app/assets/scripts/utils/country-centroids.js
index 585ecb5dc..e137e9a89 100644
--- a/app/assets/scripts/utils/country-centroids.js
+++ b/app/assets/scripts/utils/country-centroids.js
@@ -1,4 +1,6 @@
 'use strict';
+import { countryIsoMapById } from './field-report-constants';
+
 const centroids = {
   AD: [1.6261, 42.54203],
   AE: [54.33582, 23.89438],
@@ -203,4 +205,9 @@ export function getCentroid (iso) {
   return centroids[iso.toUpperCase()] || [0, 0];
 }
 
+export function getCentroidByCountryId (id) {
+  const iso2 = countryIsoMapById[id] || '';
+  return getCentroid(iso2);
+}
+
 export default centroids;
diff --git a/app/assets/scripts/utils/reducer-utils.js b/app/assets/scripts/utils/reducer-utils.js
index ae57697d3..de0e5902b 100644
--- a/app/assets/scripts/utils/reducer-utils.js
+++ b/app/assets/scripts/utils/reducer-utils.js
@@ -23,3 +23,34 @@ export const stateSuccess = (state, action) => {
     data: action.data
   });
 };
+
+const initialState = {
+  fetching: false,
+  fetched: false,
+  receivedAt: null,
+  data: {}
+};
+
+export function createReducer (actionName) {
+  const inflight = `${actionName}_INFLIGHT`;
+  const failed = `${actionName}_FAILED`;
+  const success = `${actionName}_SUCCESS`;
+
+  return (state = initialState, action) => {
+    let newState = state;
+
+    switch (action.type) {
+      case inflight:
+        newState = stateInflight(state, action);
+        break;
+      case failed:
+        newState = stateError(state, action);
+        break;
+      case success:
+        newState = stateSuccess(state, action);
+        break;
+    }
+
+    return newState;
+  };
+}
diff --git a/app/assets/scripts/utils/request.js b/app/assets/scripts/utils/request.js
index e13fc472c..4e7380070 100644
--- a/app/assets/scripts/utils/request.js
+++ b/app/assets/scripts/utils/request.js
@@ -1,6 +1,7 @@
 const emptyObject = {};
+const emptyList = [];
 
-export const getDataFromResponse = (response, defaultValue = emptyObject) => {
+export const getDataFromResponse = (response = emptyObject, defaultValue = emptyObject) => {
   if (!response) {
     return defaultValue;
   }
@@ -11,3 +12,10 @@ export const getDataFromResponse = (response, defaultValue = emptyObject) => {
 
   return response.data;
 };
+
+export const getResultsFromResponse = (response, defaultValue = emptyList) => {
+  const data = getDataFromResponse(response);
+  const { results = defaultValue } = data || emptyObject;
+
+  return results;
+};
diff --git a/app/assets/scripts/utils/utils.js b/app/assets/scripts/utils/utils.js
index 7d745c91b..4d64e922f 100644
--- a/app/assets/scripts/utils/utils.js
+++ b/app/assets/scripts/utils/utils.js
@@ -5,6 +5,7 @@ import _toNumber from 'lodash.tonumber';
 import _find from 'lodash.find';
 import _filter from 'lodash.filter';
 import { DateTime } from 'luxon';
+import { isNotDefined } from '@togglecorp/fujs';
 
 import { getCentroid } from './country-centroids';
 import { disasterType } from './field-report-constants';
@@ -294,3 +295,27 @@ export function getRecordsByType (types, records) {
 
   return sortedRecordsByType;
 }
+
+export const convertJsonToCsv = (data, columnDelimiter = ',', lineDelimiter = '\n', emptyValue = '') => {
+  if (!data || data.length <= 0) {
+    return undefined;
+  }
+
+  let result = '';
+
+  data.forEach((items) => {
+    result += items.map((str) => {
+      if (isNotDefined(str)) {
+        return emptyValue;
+      }
+      const val = String(str);
+      if (val.includes(columnDelimiter)) {
+        return `"${val}"`;
+      }
+      return val;
+    }).join(columnDelimiter);
+    result += lineDelimiter;
+  });
+
+  return result;
+};
diff --git a/app/assets/scripts/views/RegionalThreeW/activity-details.js b/app/assets/scripts/views/RegionalThreeW/activity-details.js
new file mode 100644
index 000000000..ede500c96
--- /dev/null
+++ b/app/assets/scripts/views/RegionalThreeW/activity-details.js
@@ -0,0 +1,146 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { Link } from 'react-router-dom';
+import {
+  listToGroupList as listToGroupMap,
+  mapToMap,
+} from '@togglecorp/fujs';
+import { MdChevronRight } from 'react-icons/md';
+
+import TextOutput from '../../components/text-output';
+import BlockLoading from '../../components/block-loading';
+
+import { getResultsFromResponse } from '../../utils/request';
+import { getProjects as getProjectsAction } from '../../actions';
+import { countryProjectSelector } from '../../selectors';
+import { sectors } from '../../utils/constants';
+
+const emptyObject = {};
+
+function NSDetails (props) {
+  const {
+    sectorList,
+    nsDetails,
+  } = props.data;
+
+  return (
+    <div className='ns-details'>
+      <h5 className='tc-heading'>
+        { nsDetails.society_name }
+      </h5>
+      <div className='tc-content'>
+        { Object.keys(sectorList).map(sectorId => (
+          <div className='tc-sector' key={sectorId}>
+            { sectors[sectorId] }[{ sectorList[sectorId] }]
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function ActivityDetails (props) {
+  const {
+    data,
+    projectsResponse,
+    getProjects,
+  } = props;
+
+  const {
+    completed_projects_count: completed,
+    id: countryId,
+    name,
+    ongoing_projects_count: ongoing,
+    planned_projects_count: planned,
+  } = data || emptyObject;
+
+  React.useEffect(() => {
+    if (countryId) {
+      getProjects(countryId);
+    }
+  }, [countryId]);
+
+  const [projectList, pending] = React.useMemo(() => ([
+    getResultsFromResponse(projectsResponse),
+    projectsResponse.fetching,
+  ]), [projectsResponse]);
+
+  const nsSectorList = React.useMemo(() => {
+    const projectsByNS = listToGroupMap(
+      projectList,
+      d => d.reporting_ns,
+      d => ({
+        sector: d.primary_sector,
+        nsDetails: d.reporting_ns_detail,
+      }));
+
+    const sectorGroupedProjectsByNS = Object.keys(projectsByNS).map(nsId => ({
+      sectorList: mapToMap(
+        listToGroupMap(projectsByNS[nsId], d => d.sector, d => true),
+        undefined,
+        d => d.length,
+      ),
+      nsDetails: projectsByNS[nsId][0].nsDetails,
+    }));
+
+    return sectorGroupedProjectsByNS;
+  }, [projectList]);
+
+  return (
+    <div className='regional-map-threew-activity-details'>
+      <h4 className='tc-heading'>
+        <Link to={`/countries/${countryId}`}>
+          { name } <MdChevronRight className='tc-icon' />
+        </Link>
+      </h4>
+      <div className='tc-content'>
+        <div className='status-counts'>
+          <TextOutput
+            label="planned"
+            value={planned}
+            reverseOrder
+          />
+          <TextOutput
+            label="ongoing"
+            value={ongoing}
+            reverseOrder
+          />
+          <TextOutput
+            label="completed"
+            value={completed}
+            reverseOrder
+          />
+        </div>
+        <div className='active-ns-count'>
+          <TextOutput
+            label="Active national societies"
+            value={nsSectorList.length}
+            reverseOrder
+          />
+        </div>
+        <div className='ns-sector-details'>
+          { pending ? (
+            <BlockLoading />
+          ) : (
+            nsSectorList.map(d => (
+              <NSDetails data={d} key={d.nsDetails.id} />
+            ))
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const mapStateToProps = (state, props) => ({
+  projectsResponse: countryProjectSelector(state, props.data.id),
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  getProjects: (...args) => dispatch(getProjectsAction(...args)),
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(React.memo(ActivityDetails));
diff --git a/app/assets/scripts/views/RegionalThreeW/budget-overview.js b/app/assets/scripts/views/RegionalThreeW/budget-overview.js
new file mode 100644
index 000000000..82fc4b66a
--- /dev/null
+++ b/app/assets/scripts/views/RegionalThreeW/budget-overview.js
@@ -0,0 +1,47 @@
+import React from 'react';
+import _cs from 'classnames';
+import FormattedNumber from '../../components/formatted-number';
+
+function TextOutput (p) {
+  const {
+    label,
+    value = 0,
+  } = p;
+
+  return (
+    <div className='bo-text-output'>
+      <FormattedNumber
+        className='tc-value'
+        value={value}
+        normalize
+        fixedTo={1}
+      />
+      <div className='tc-label'>
+        { label }
+      </div>
+    </div>
+  );
+}
+
+function BudgetOverview (p) {
+  const {
+    totalBudget,
+    nsCountWithOngoingActivity,
+    className,
+  } = p;
+
+  return (
+    <div className={_cs(className, 'budget-overview')}>
+      <TextOutput
+        label="NS with ongoing activities"
+        value={nsCountWithOngoingActivity}
+      />
+      <TextOutput
+        label="Total budget"
+        value={totalBudget}
+      />
+    </div>
+  );
+}
+
+export default BudgetOverview;
diff --git a/app/assets/scripts/views/RegionalThreeW/country-table.js b/app/assets/scripts/views/RegionalThreeW/country-table.js
new file mode 100644
index 000000000..7f5be505d
--- /dev/null
+++ b/app/assets/scripts/views/RegionalThreeW/country-table.js
@@ -0,0 +1,156 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { addSeparator } from '@togglecorp/fujs';
+import _cs from 'classnames';
+import {
+  MdChevronRight,
+  MdExpandLess,
+} from 'react-icons/md';
+
+import BlockLoading from '../../components/block-loading';
+import {
+  programmeTypes,
+  sectors,
+  statuses,
+} from '../../utils/constants';
+import { getResultsFromResponse } from '../../utils/request';
+import { getProjects as getProjectsAction } from '../../actions';
+import { countryProjectSelector } from '../../selectors';
+
+const tableHeaders = [
+  {
+    key: 'reporting_ns',
+    label: 'Supporting NS',
+    modifier: d => d.reporting_ns_detail.society_name,
+  },
+  {
+    key: 'primary_sector',
+    label: 'Activity sector',
+    modifier: d => sectors[d.primary_sector],
+  },
+  {
+    key: 'status',
+    label: 'Status',
+    modifier: d => statuses[d.status],
+  },
+  {
+    key: 'programme_type',
+    label: 'Type',
+    modifier: d => programmeTypes[d.programme_type],
+  },
+  {
+    key: 'target_total',
+    label: 'Total people targeted',
+    modifier: d => addSeparator(d.target_total),
+  },
+  {
+    key: 'reached_total',
+    label: 'Total people reached',
+    modifier: d => addSeparator(d.reached_total),
+  },
+  {
+    key: 'budget_amount',
+    label: 'Total budget',
+    modifier: d => addSeparator(d.budget_amount),
+  },
+];
+
+const emptyList = [];
+
+function CountryTable (p) {
+  const {
+    data,
+    isActive,
+    onHeaderClick,
+    projectsResponse,
+    getProjects,
+    filters,
+  } = p;
+
+  React.useEffect(() => {
+    if (isActive && data.id) {
+      getProjects(data.id, filters);
+    }
+  }, [data.id, isActive, filters]);
+
+  const [projectList, pending] = React.useMemo(() => ([
+    getResultsFromResponse(projectsResponse),
+    projectsResponse.fetching,
+  ]), [projectsResponse]);
+
+  const handleHeaderClick = React.useCallback(() => {
+    if (onHeaderClick) {
+      onHeaderClick(isActive ? undefined : data.id);
+    }
+  }, [onHeaderClick, data.id, isActive]);
+
+  const count = (data.projects_count || emptyList).length;
+
+  return (
+    <div className={_cs('country-table', isActive && 'tc-active')}>
+      <button
+        type="button"
+        onClick={handleHeaderClick}
+        className='tc-header-button'
+        disabled={count === 0}
+      >
+        <div className='tc-label'>
+          <div className='tc-name'>
+            { data.name }
+          </div>
+          <div className='tc-project-count'>
+            { data.projects_count } projects
+          </div>
+        </div>
+        { isActive ? (
+          <MdExpandLess className='tc-icon' />
+        ) : (
+          <MdChevronRight className='tc-icon' />
+        )}
+      </button>
+      { isActive && (
+        <div className='tc-content'>
+          { pending ? (
+            <BlockLoading />
+          ) : (
+            <table className='tc-table'>
+              <thead>
+                <tr>
+                  { tableHeaders.map(h => (
+                    <th key={h.key}>
+                      {h.label}
+                    </th>
+                  ))}
+                </tr>
+              </thead>
+              <tbody>
+                { projectList.map(p => (
+                  <tr key={p.id}>
+                    { tableHeaders.map(h => (
+                      <td key={h.key}>
+                        { h.modifier ? h.modifier(p) : (p[h.key] || '-') }
+                      </td>
+                    ))}
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+const mapStateToProps = (state, props) => ({
+  projectsResponse: countryProjectSelector(state, props.data.id),
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  getProjects: (...args) => dispatch(getProjectsAction(...args)),
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(CountryTable);
diff --git a/app/assets/scripts/views/RegionalThreeW/export-button.js b/app/assets/scripts/views/RegionalThreeW/export-button.js
new file mode 100644
index 000000000..727ee3f12
--- /dev/null
+++ b/app/assets/scripts/views/RegionalThreeW/export-button.js
@@ -0,0 +1,98 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { saveAs } from 'file-saver';
+import _cs from 'classnames';
+
+import { getResultsFromResponse } from '../../utils/request';
+import { convertJsonToCsv } from '../../utils/utils';
+import { getRegionalProjects as getRegionalProjectsAction } from '../../actions';
+import { regionalProjectsSelector } from '../../selectors';
+
+import exportHeaders from '../ThreeW/export-headers';
+
+function ExportButton (p) {
+  const {
+    regionId,
+    filters,
+    getRegionalProjects,
+    projectsResponse,
+  } = p;
+
+  const [shouldStartRequest, setShouldStartRequest] = React.useState(false);
+
+  React.useEffect(() => {
+    if (shouldStartRequest) {
+      getRegionalProjects(regionId, filters);
+      setShouldStartRequest(false);
+    }
+  }, [shouldStartRequest, regionId, filters]);
+
+  const [
+    pending,
+    requestComplete,
+    projectList,
+  ] = React.useMemo(() => [
+    projectsResponse.fetching,
+    projectsResponse.fetched,
+    getResultsFromResponse(projectsResponse),
+  ], [projectsResponse]);
+
+  React.useEffect(() => {
+    if (!pending && requestComplete && projectList.length > 0) {
+      const resolveToValues = (headers, data) => {
+        const resolvedValues = [];
+        headers.forEach(header => {
+          const el = header.modifier ? header.modifier(data) || '' : data[header.key] || '';
+          resolvedValues.push(el);
+        });
+        return resolvedValues;
+      };
+
+      const csvHeaders = exportHeaders.map(d => d.title);
+      const resolvedValueList = projectList.map(project => (
+        resolveToValues(exportHeaders, project)
+      ));
+
+      const csv = convertJsonToCsv([
+        csvHeaders,
+        ...resolvedValueList,
+      ]);
+
+      const blob = new Blob([csv], { type: 'text/csv' });
+      const timestamp = (new Date()).getTime();
+      const fileName = `projects-export-${timestamp}.csv`;
+
+      saveAs(blob, fileName);
+    }
+  }, [pending, requestComplete, projectList]);
+
+  const handleClick = React.useCallback(() => {
+    setShouldStartRequest(true);
+  }, [setShouldStartRequest]);
+
+  return (
+    <button
+      onClick={handleClick}
+      className={ _cs(
+        'regional-export-button button button--secondary-bounded',
+        pending && 'disabled',
+      )}
+      disabled={pending}
+    >
+      { pending ? 'Exporting...' : 'Export' }
+    </button>
+  );
+}
+
+const mapStateToProps = (state, props) => ({
+  projectsResponse: regionalProjectsSelector(state),
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  getRegionalProjects: (...args) => dispatch(getRegionalProjectsAction(...args)),
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(ExportButton);
diff --git a/app/assets/scripts/views/RegionalThreeW/index.js b/app/assets/scripts/views/RegionalThreeW/index.js
new file mode 100644
index 000000000..1aead7698
--- /dev/null
+++ b/app/assets/scripts/views/RegionalThreeW/index.js
@@ -0,0 +1,305 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import {
+  ResponsiveContainer,
+  Sankey,
+  Tooltip,
+  Layer,
+  Label,
+  Rectangle,
+} from 'recharts';
+import _cs from 'classnames';
+
+import BlockLoading from '../../components/block-loading';
+import {
+  getRegionalMovementActivities as getRegionalMovementActivitiesAction,
+  getRegionalProjectsOverview as getRegionalProjectsOverviewAction,
+  getNationalSocietyActivities as getNationalSocietyActivitiesAction,
+  getNationalSocietyActivitiesWoFilters as getNationalSocietyActivitiesWoFiltersAction,
+} from '../../actions';
+
+import {
+  regionalMovementActivitiesSelector,
+  regionalProjectsOverviewSelector,
+  nationalSocietyActivitiesSelector,
+  nationalSocietyActivitiesWoFiltersSelector,
+} from '../../selectors';
+
+import { statuses } from '../../utils/constants';
+import { getDataFromResponse } from '../../utils/request';
+
+import StatusOverview from './status-overview';
+import BudgetOverview from './budget-overview';
+import CountryTable from './country-table';
+import PeopleOverview from './people-overview';
+import MovementActivitiesFilters from './movement-activities-filters';
+import NSActivitiesFilters from './ns-activities-filters';
+import ExportButton from './export-button';
+import Map from './map';
+
+const emptyList = [];
+
+function SankeyNode (p) {
+  const { x, y, width, height, index, payload } = p;
+  if (payload.value === 0) {
+    return null;
+  }
+
+  const isOut = (x + width) > window.innerWidth / 2;
+
+  return (
+    <Layer key={`sankey-node-${index}`}>
+      <Rectangle
+        x={x}
+        y={y}
+        width={width}
+        height={height}
+        fill="#5192ca"
+        fillOpacity="1"
+      />
+      <text
+        textAnchor={isOut ? 'end' : 'start'}
+        x={isOut ? x - 6 : x + width + 6}
+        y={y + height / 2 + 4}
+        fontSize="12"
+        fill="#000"
+        strokeWidth={0}
+        pointerEvents="none"
+      >
+        {payload.name} ({payload.value})
+      </text>
+    </Layer>
+  );
+}
+
+function SankeyLink (p) {
+  const {
+    sourceX,
+    targetX,
+    sourceY,
+    targetY,
+    sourceControlX,
+    targetControlX,
+    linkWidth,
+    index,
+  } = p;
+
+  const isLeft = targetX < window.innerWidth / 2;
+
+  return (
+    <Layer key={`CustomLink${index}`}>
+      <path
+        className={_cs('sankey-link', isLeft && 'sankey-link-left')}
+        d={`
+            M${sourceX},${sourceY + linkWidth / 2}
+            C${sourceControlX},${sourceY + linkWidth / 2}
+              ${targetControlX},${targetY + linkWidth / 2}
+              ${targetX},${targetY + linkWidth / 2}
+            L${targetX},${targetY - linkWidth / 2}
+            C${targetControlX},${targetY - linkWidth / 2}
+              ${sourceControlX},${sourceY - linkWidth / 2}
+              ${sourceX},${sourceY - linkWidth / 2}
+            Z
+          `}
+        strokeWidth={0}
+      />
+    </Layer>
+  );
+}
+
+function RegionalThreeW (p) {
+  const {
+    regionId,
+    regionalMovementActivitiesResponse,
+    regionalProjectsOverviewResponse,
+    nationalSocietyActivitiesResponse,
+    nationalSocietyActivitiesWoFiltersResponse,
+    getRegionalMovementActivities,
+    getRegionalProjectsOverview,
+    getNationalSocietyActivities,
+    getNationalSocietyActivitiesWoFilters,
+  } = p;
+
+  const [activeCountryId, setActiveCountryId] = React.useState(undefined);
+  const [movementActivityFilters, setMovementActivityFilters] = React.useState({
+    operation_type: undefined,
+    programme_type: undefined,
+    primary_sector: undefined,
+    status: undefined,
+  });
+  const [nsActivityFilters, setNSActivityFilters] = React.useState({
+    reporting_ns: [],
+    primary_sector: [],
+    project_country: [],
+  });
+
+  React.useEffect(() => {
+    getRegionalMovementActivities(regionId, movementActivityFilters);
+  }, [
+    regionId,
+    getRegionalMovementActivities,
+    movementActivityFilters,
+  ]);
+
+  React.useEffect(() => {
+    getRegionalProjectsOverview(regionId);
+  }, [regionId, getRegionalProjectsOverview]);
+
+  React.useEffect(() => {
+    getNationalSocietyActivitiesWoFilters(regionId);
+  }, [regionId, getNationalSocietyActivitiesWoFilters]);
+
+  React.useEffect(() => {
+    getNationalSocietyActivities(regionId, nsActivityFilters);
+  }, [regionId, nsActivityFilters, getNationalSocietyActivities]);
+
+  const [
+    movementActivityList,
+    movementActivityListPending,
+  ] = React.useMemo(() => ([
+    (getDataFromResponse(regionalMovementActivitiesResponse).countries_count || emptyList)
+      .filter(d => d.projects_count > 0),
+    regionalMovementActivitiesResponse.fetching,
+  ]), [regionalMovementActivitiesResponse]);
+
+  const [
+    projectsOverview,
+    projectsOverviewPending,
+  ] = React.useMemo(() => [
+    getDataFromResponse(regionalProjectsOverviewResponse),
+    regionalProjectsOverviewResponse.fetching,
+  ], [regionalProjectsOverviewResponse]);
+
+  const [
+    nationalSocietyActivities,
+    nationalSocietyActivitiesPending,
+  ] = React.useMemo(() => ([
+    getDataFromResponse(nationalSocietyActivitiesResponse),
+    nationalSocietyActivitiesResponse.fetching,
+  ]), [nationalSocietyActivitiesResponse]);
+
+  const [
+    nationalSocietyActivitiesWoFilters,
+    nationalSocietyActivitiesWoFiltersPending,
+  ] = React.useMemo(() => ([
+    getDataFromResponse(nationalSocietyActivitiesWoFiltersResponse),
+    nationalSocietyActivitiesWoFiltersResponse.fetching,
+  ]), [nationalSocietyActivitiesWoFiltersResponse]);
+
+  const sectorActivityData = React.useMemo(() => (
+    (projectsOverview.projects_by_status || emptyList).map(
+      d => ({ label: statuses[d.status], value: d.count }),
+    ).sort((a, b) => a.label.localeCompare(b.label))
+  ), [projectsOverview]);
+
+  return (
+    <div className='regional-threew'>
+      { projectsOverviewPending ? (
+        <BlockLoading />
+      ) : (
+        <div className='regional-threew-overview'>
+          <BudgetOverview
+            totalBudget={projectsOverview.total_budget}
+            nsCountWithOngoingActivity={projectsOverview.ns_with_ongoing_activities}
+          />
+          <PeopleOverview
+            targeted={projectsOverview.target_total}
+            reached={projectsOverview.reached_total}
+          />
+          <StatusOverview
+            total={projectsOverview.total_projects}
+            data={sectorActivityData}
+          />
+        </div>
+      )}
+      <div className='regional-movement-activities'>
+        { movementActivityListPending && <BlockLoading /> }
+        <div className='tc-header'>
+          <div className='tc-top'>
+            <h2 className='tc-heading'>
+              Movement activities
+            </h2>
+            <ExportButton
+              regionId={regionId}
+              filters={movementActivityFilters}
+            />
+          </div>
+          <MovementActivitiesFilters
+            value={movementActivityFilters}
+            onChange={setMovementActivityFilters}
+          />
+        </div>
+        <div className='tc-content'>
+          <Map
+            regionId={regionId}
+            data={movementActivityList}
+          />
+          <div className='countries-threew-tables'>
+            { movementActivityList.map(c => (
+              <CountryTable
+                filters={movementActivityFilters}
+                key={c.id}
+                onHeaderClick={setActiveCountryId}
+                isActive={String(activeCountryId) === String(c.id)}
+                data={c}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+      <div className='regional-ns-activities'>
+        <div className='tc-header'>
+          <h2 className='tc-heading'>
+            National society activities
+          </h2>
+          <NSActivitiesFilters
+            value={nsActivityFilters}
+            onChange={setNSActivityFilters}
+            data={nationalSocietyActivitiesWoFilters}
+          />
+        </div>
+        <div className='ns-sankey-container'>
+          { nationalSocietyActivitiesPending || nationalSocietyActivitiesWoFiltersPending ? (
+            <BlockLoading />
+          ) : (
+            (nationalSocietyActivities.links || emptyList).length === 0 ? (
+              <div className='sankey-empty-message'>
+                Not enough data to show the chart
+              </div>
+            ) : (
+              <ResponsiveContainer>
+                <Sankey
+                  data={nationalSocietyActivities}
+                  link={SankeyLink}
+                  node={SankeyNode}
+                >
+                  <Tooltip />
+                  <Label />
+                </Sankey>
+              </ResponsiveContainer>
+            )
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const mapStateToProps = (state) => ({
+  regionalMovementActivitiesResponse: regionalMovementActivitiesSelector(state),
+  regionalProjectsOverviewResponse: regionalProjectsOverviewSelector(state),
+  nationalSocietyActivitiesResponse: nationalSocietyActivitiesSelector(state),
+  nationalSocietyActivitiesWoFiltersResponse: nationalSocietyActivitiesWoFiltersSelector(state),
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  getRegionalMovementActivities: (...args) => dispatch(getRegionalMovementActivitiesAction(...args)),
+  getRegionalProjectsOverview: (...args) => dispatch(getRegionalProjectsOverviewAction(...args)),
+  getNationalSocietyActivities: (...args) => dispatch(getNationalSocietyActivitiesAction(...args)),
+  getNationalSocietyActivitiesWoFilters: (...args) => dispatch(getNationalSocietyActivitiesWoFiltersAction(...args)),
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(React.memo(RegionalThreeW));
diff --git a/app/assets/scripts/views/RegionalThreeW/map.js b/app/assets/scripts/views/RegionalThreeW/map.js
new file mode 100644
index 000000000..f027396ca
--- /dev/null
+++ b/app/assets/scripts/views/RegionalThreeW/map.js
@@ -0,0 +1,197 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import { render } from 'react-dom';
+import { BrowserRouter, Link } from 'react-router-dom';
+import mapboxgl from 'mapbox-gl';
+
+import store from '../../utils/store';
+import newMap from '../../utils/get-new-map';
+import { getRegionBoundingBox } from '../../utils/region-bounding-box';
+import { getCentroidByCountryId } from '../../utils/country-centroids';
+
+import ActivityDetails from './activity-details';
+
+const emptyList = [];
+
+function getGeojsonFromMovementActivities (movementActivities = emptyList) {
+  const geojson = {
+    type: 'geojson',
+    data: {
+      type: 'FeatureCollection',
+      features: movementActivities.map(d => ({
+        type: 'Feature',
+        geometry: {
+          type: 'Point',
+          coordinates: getCentroidByCountryId(d.id),
+        },
+        properties: {
+          ...d,
+        }
+      })),
+    }
+  };
+
+  return geojson;
+}
+
+function ProgressBar (p) {
+  const {
+    value,
+    max,
+  } = p;
+  const width = 100 * value / max;
+
+  return (
+    <div className='three-w-region-progress-bar'>
+      <div
+        className='three-w-region-progress-bar-progress'
+        style={{ width: `${width}%` }}
+      />
+    </div>
+  );
+}
+
+const MAX_SCALE_STOPS = 6;
+
+function Scale (p) {
+  const { max } = p;
+  const numbers = [];
+
+  const diff = max / MAX_SCALE_STOPS;
+
+  for (let i = 0; i <= max; i += diff) {
+    numbers.push(i);
+  }
+
+  return (
+    <div className='three-w-region-scale'>
+      { numbers.map(n => <div key={n}>{n}</div>) }
+    </div>
+  );
+}
+
+function Map (props) {
+  const {
+    regionId,
+    data,
+  } = props;
+
+  const ref = React.useRef();
+  const [map, setMap] = React.useState();
+  const [mapLoaded, setMapLoaded] = React.useState(false);
+
+  React.useEffect(() => {
+    const { current: mapContainer } = ref;
+    setMap(newMap(mapContainer));
+  }, [setMap]);
+
+  React.useEffect(() => {
+    if (!map) {
+      return;
+    }
+
+    map.on('load', () => {
+      const bbox = getRegionBoundingBox(regionId);
+      map.fitBounds(bbox);
+      setMapLoaded(true);
+    });
+  }, [map, setMapLoaded]);
+
+  React.useEffect(() => {
+    if (!map || !mapLoaded) {
+      return;
+    }
+
+    const geojson = getGeojsonFromMovementActivities(data);
+
+    try {
+      if (map.getLayer('movement-activity-circles')) {
+        map.removeLayer('movement-activity-circles');
+      }
+      map.removeSource('movement-activity-markers');
+    } catch (err) {
+      // pass
+    }
+
+    map.addSource('movement-activity-markers', geojson);
+    map.addLayer({
+      id: 'movement-activity-circles',
+      source: 'movement-activity-markers',
+      type: 'circle',
+      paint: {
+        'circle-radius': 7,
+        'circle-color': '#f5333f',
+        'circle-opacity': 0.7,
+      },
+    });
+
+    map.on('click', 'movement-activity-circles', (e) => {
+      const properties = e.features[0].properties;
+      const popoverContent = document.createElement('div');
+
+      render(
+        (
+          <Provider store={store}>
+            <BrowserRouter>
+              <ActivityDetails data={properties} />
+            </BrowserRouter>
+          </Provider>
+        ),
+        popoverContent,
+      );
+
+      new mapboxgl.Popup({ closeButton: false })
+        .setLngLat(e.lngLat)
+        .setDOMContent(popoverContent.children[0])
+        .addTo(map);
+    });
+  }, [map, regionId, data, mapLoaded]);
+
+  const [supportingNSList, maxProjects] = React.useMemo(() => {
+    const maxProjects = Math.max(...data.map(d => d.projects_count));
+    const numBuckets = Math.ceil(maxProjects / MAX_SCALE_STOPS);
+    const max = numBuckets * MAX_SCALE_STOPS;
+
+    return [
+      data.map(d => ({
+        id: d.id,
+        name: d.name,
+        value: d.projects_count,
+      })),
+      max,
+    ];
+  }, [data]);
+
+  return (
+    <div className='regional-threew-map-wrapper'>
+      <div className='regional-threew-map' ref={ref} />
+      <div className='supporting-ns-list'>
+        <Scale
+          max={maxProjects}
+        />
+        <div className='supporting-ns-container'>
+          { supportingNSList.map(d => (
+            <div className='supporting-ns' key={d.name}>
+              <div className='tc-label'>
+                <div className='tc-name'>
+                  <Link to={`/countries/${d.id}`}>
+                    { d.name }
+                  </Link>
+                </div>
+                <div className='tc-value'>
+                  {d.value} projects
+                </div>
+              </div>
+              <ProgressBar
+                value={d.value}
+                max={maxProjects}
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default React.memo(Map);
diff --git a/app/assets/scripts/views/RegionalThreeW/movement-activities-filters.js b/app/assets/scripts/views/RegionalThreeW/movement-activities-filters.js
new file mode 100644
index 000000000..d44f98226
--- /dev/null
+++ b/app/assets/scripts/views/RegionalThreeW/movement-activities-filters.js
@@ -0,0 +1,90 @@
+import React from 'react';
+import _cs from 'classnames';
+import Faram from '@togglecorp/faram';
+
+import SelectInput from '../../components/form-elements/select-input';
+import {
+  statusList,
+  sectorList,
+  programmeTypeList,
+  operationTypeList,
+} from '../../utils/constants';
+
+const compareString = (a, b) => a.label.localeCompare(b.label);
+
+const programmeTypeOptions = programmeTypeList.map(p => ({
+  value: p.key,
+  label: p.title,
+})).sort(compareString);
+
+const sectorsOfActivityOptions = sectorList.map(p => ({
+  value: p.inputValue,
+  label: p.title,
+})).sort(compareString);
+
+const statusOptions = statusList.map(p => ({
+  value: p.key,
+  label: p.title,
+})).sort(compareString);
+
+const operationTypeOptions = operationTypeList.map(o => ({
+  value: o.value,
+  label: o.label,
+})).sort(compareString);
+
+const filterSchema = {
+  fields: {
+    operation_type: [],
+    programme_type: [],
+    primary_sector: [],
+    status: []
+  }
+};
+
+function MovementActivitiesFilters (p) {
+  const {
+    className,
+    value,
+    onChange,
+  } = p;
+
+  return (
+    <Faram
+      className={_cs('regional-movement-activity-filter', className)}
+      schema={filterSchema}
+      value={value}
+      onChange={onChange}
+    >
+      <SelectInput
+        faramElementName='operation_type'
+        label='Operation type'
+        placeholder='All operation types'
+        options={operationTypeOptions}
+        className='select-input'
+      />
+      <SelectInput
+        faramElementName='programme_type'
+        label='Programme type'
+        placeholder='All programme types'
+        options={programmeTypeOptions}
+        className='select-input'
+      />
+      <SelectInput
+        faramElementName='primary_sector'
+        label='Sectors of Activity'
+        placeholder='All sectors'
+        options={sectorsOfActivityOptions}
+        className='select-input'
+      />
+      <SelectInput
+        faramElementName='status'
+        label='Status'
+        placeholder='All status'
+        options={statusOptions}
+        className='select-input'
+      />
+    </Faram>
+  );
+}
+
+export default MovementActivitiesFilters;
diff --git a/app/assets/scripts/views/RegionalThreeW/ns-activities-filters.js b/app/assets/scripts/views/RegionalThreeW/ns-activities-filters.js
new file mode 100644
index 000000000..345146a3e
--- /dev/null
+++ b/app/assets/scripts/views/RegionalThreeW/ns-activities-filters.js
@@ -0,0 +1,79 @@
+import React from 'react';
+import Faram from '@togglecorp/faram';
+
+import SelectInput from '../../components/form-elements/select-input';
+
+const filterSchema = {
+  fields: {
+    reporting_ns: [],
+    project_country: [],
+    primary_sector: [],
+  }
+};
+
+const emptyData = {
+  nodes: [],
+};
+
+function toLabelValue (d) {
+  return {
+    label: d.name,
+    value: d.id,
+  };
+}
+
+const compareString = (a, b) => a.label.localeCompare(b.label);
+
+function NSActivitiesFilters (p) {
+  const {
+    value,
+    onChange,
+    data = emptyData,
+  } = p;
+
+  const [
+    supportingNSOptions,
+    activityOptions,
+    receivingNSOptions,
+  ] = React.useMemo(() => [
+    (data.nodes || []).filter(d => d.type === 'supporting_ns').map(toLabelValue).sort(compareString),
+    (data.nodes || []).filter(d => d.type === 'sector').map(toLabelValue).sort(compareString),
+    (data.nodes || []).filter(d => d.type === 'receiving_ns').map(toLabelValue).sort(compareString),
+  ], [data]);
+
+  return (
+    <Faram
+      className='regional-ns-activity-filter'
+      schema={filterSchema}
+      value={value}
+      onChange={onChange}
+    >
+      <SelectInput
+        faramElementName='reporting_ns'
+        label='Supporting NS'
+        placeholder='Select supporting NS'
+        options={supportingNSOptions}
+        className='select-input'
+        multi
+      />
+      <SelectInput
+        faramElementName='primary_sector'
+        label='Activity'
+        placeholder='Select activity'
+        options={activityOptions}
+        className='select-input'
+        multi
+      />
+      <SelectInput
+        faramElementName='project_country'
+        label='Receiving NS'
+        placeholder='Select receiving NS'
+        options={receivingNSOptions}
+        className='select-input'
+        multi
+      />
+    </Faram>
+  );
+}
+
+export default NSActivitiesFilters;
diff --git a/app/assets/scripts/views/RegionalThreeW/people-overview.js b/app/assets/scripts/views/RegionalThreeW/people-overview.js
new file mode 100644
index 000000000..2360751c3
--- /dev/null
+++ b/app/assets/scripts/views/RegionalThreeW/people-overview.js
@@ -0,0 +1,54 @@
+import React from 'react';
+import _cs from 'classnames';
+
+import FormattedNumber from '../../components/formatted-number';
+
+function PeopleOverview (props) {
+  const {
+    targeted = 0,
+    reached = 0,
+    className,
+  } = props;
+
+  const barStyle = React.useMemo(() => {
+    let progress = 0;
+
+    if (targeted && targeted !== 0) {
+      progress = Math.min(100, 100 * reached / targeted);
+    }
+
+    return { width: `${progress}%` };
+  }, [targeted, reached]);
+
+  return (
+    <div className={_cs(className, 'people-overview')}>
+      <h4 className='tc-heading'>
+        Total number of people reached
+      </h4 >
+      <div className='tc-content'>
+        <FormattedNumber
+          className='reached-people-count'
+          value={reached}
+          normalize
+          fixedTo={1}
+        />
+        <div className='targeted-people'>
+          <div className='tc-label'>
+            Targeted
+          </div>
+          <FormattedNumber
+            className='targeted-people-count'
+            value={targeted}
+            normalize
+            fixedTo={1}
+          />
+        </div>
+        <div className='tc-progress-bar'>
+          <div style={barStyle} className='tc-progress' />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default PeopleOverview;
diff --git a/app/assets/scripts/views/RegionalThreeW/status-overview.js b/app/assets/scripts/views/RegionalThreeW/status-overview.js
new file mode 100644
index 000000000..92f700a82
--- /dev/null
+++ b/app/assets/scripts/views/RegionalThreeW/status-overview.js
@@ -0,0 +1,78 @@
+import React from 'react';
+import _cs from 'classnames';
+
+import {
+  ResponsiveContainer,
+  PieChart,
+  Pie,
+  Legend,
+  Tooltip,
+  Cell,
+} from 'recharts';
+
+import FormattedNumber from '../../components/formatted-number';
+
+const colors = {
+  'Completed': '#f5333f',
+  'Ongoing': '#f7969c',
+  'Planned': '#f9e5e6',
+};
+
+function StatusOverview (p) {
+  const {
+    data,
+    total,
+    className,
+  } = p;
+
+  return (
+    <div className={_cs('status-activity', className)}>
+      <h4 className='tc-heading'>
+        Total activities by status
+      </h4>
+      <div className='tc-content'>
+        <div className='total-activity'>
+          <FormattedNumber
+            className='tc-value'
+            value={total}
+            normalize
+            fixedTo={1}
+          />
+          <div className='tc-label'>
+            Total activities
+          </div>
+        </div>
+        <div className='tc-chart-container'>
+          <ResponsiveContainer>
+            <PieChart>
+              <Pie
+                data={data}
+                dataKey='value'
+                nameKey='label'
+                legendType='circle'
+              >
+                { data.map((entry, index) => {
+                  return (
+                    <Cell
+                      key={entry.label}
+                      fill={colors[entry.label]}
+                    />
+                  );
+                })}
+              </Pie>
+              <Tooltip cursor={{ fill: 'transparent' }} />
+              <Legend
+                align='right'
+                iconSize={8}
+                layout='vertical'
+                verticalAlign='middle'
+              />
+            </PieChart>
+          </ResponsiveContainer>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default StatusOverview;
diff --git a/app/assets/scripts/views/ThreeW/export-headers.js b/app/assets/scripts/views/ThreeW/export-headers.js
index 51ac830ef..0715ffba3 100644
--- a/app/assets/scripts/views/ThreeW/export-headers.js
+++ b/app/assets/scripts/views/ThreeW/export-headers.js
@@ -28,12 +28,12 @@ const exportHeaders = [
     modifier: r => operationTypes[r.operation_type],
   },
   {
-    title: 'Programme Type',
+    title: 'Programme type',
     key: 'programme_type',
     modifier: r => programmeTypes[r.programme_type],
   },
   {
-    title: 'Project Name',
+    title: 'Activity name',
     key: 'name',
   },
   {
diff --git a/app/assets/scripts/views/ThreeW/filter.js b/app/assets/scripts/views/ThreeW/filter.js
index ca6d6be61..1ac714597 100644
--- a/app/assets/scripts/views/ThreeW/filter.js
+++ b/app/assets/scripts/views/ThreeW/filter.js
@@ -12,20 +12,22 @@ import {
   programmeTypeList,
 } from '../../utils/constants';
 
+const compareString = (a, b) => a.label.localeCompare(b.label);
+
 const programmeTypeOptions = programmeTypeList.map(p => ({
   value: p.title,
   label: p.title,
-}));
+})).sort(compareString);
 
 const sectorsOfActivityOptions = sectorList.map(p => ({
   value: p.inputValue,
   label: p.title,
-}));
+})).sort(compareString);
 
 const statusOptions = statusList.map(p => ({
   value: p.title,
   label: p.title,
-}));
+})).sort(compareString);
 
 export default class ThreeWFilter extends React.PureComponent {
   constructor (props) {
diff --git a/app/assets/scripts/views/ThreeW/index.js b/app/assets/scripts/views/ThreeW/index.js
index 0b2b8dd15..ba9e725e6 100644
--- a/app/assets/scripts/views/ThreeW/index.js
+++ b/app/assets/scripts/views/ThreeW/index.js
@@ -3,9 +3,9 @@ import React from 'react';
 import _cs from 'classnames';
 import memoize from 'memoize-one';
 import { saveAs } from 'file-saver';
-import { isNotDefined } from '@togglecorp/fujs';
 
 import { getDataFromResponse } from '../../utils/request';
+import { convertJsonToCsv } from '../../utils/utils';
 
 import Summary from './stats/summary';
 import SectorActivity from './stats/sector-activity';
@@ -16,29 +16,6 @@ import Table from './table';
 import Map from './map';
 
 import exportHeaders from './export-headers';
-const convertJsonToCsv = (data, columnDelimiter = ',', lineDelimiter = '\n', emptyValue = '') => {
-  if (!data || data.length <= 0) {
-    return undefined;
-  }
-
-  let result = '';
-
-  data.forEach((items) => {
-    result += items.map((str) => {
-      if (isNotDefined(str)) {
-        return emptyValue;
-      }
-      const val = String(str);
-      if (val.includes(columnDelimiter)) {
-        return `"${val}"`;
-      }
-      return val;
-    }).join(columnDelimiter);
-    result += lineDelimiter;
-  });
-
-  return result;
-};
 
 export default class ThreeW extends React.PureComponent {
   getIsCountryAdmin = memoize((user, countryId) => {
diff --git a/app/assets/scripts/views/ThreeW/map.js b/app/assets/scripts/views/ThreeW/map.js
index 7d409ee9f..7e63f66d8 100644
--- a/app/assets/scripts/views/ThreeW/map.js
+++ b/app/assets/scripts/views/ThreeW/map.js
@@ -179,7 +179,7 @@ class ThreeWMap extends React.PureComponent {
 
     this.resetBounds(countryId);
     const groupedProjects = listToGroupList(
-      projectList,
+      projectList.filter(d => d.project_district),
       project => project.project_district,
       project => project,
     );
diff --git a/app/assets/scripts/views/ThreeW/project-details.js b/app/assets/scripts/views/ThreeW/project-details.js
index f5c4a8439..9e65ab632 100644
--- a/app/assets/scripts/views/ThreeW/project-details.js
+++ b/app/assets/scripts/views/ThreeW/project-details.js
@@ -93,7 +93,7 @@ class ProjectDetails extends React.PureComponent {
             <div className='tc-section'>
               <TextOutput
                 className='tc-project-name'
-                label='Project name'
+                label='Activity name'
                 value={name}
               />
             </div>
@@ -109,7 +109,7 @@ class ProjectDetails extends React.PureComponent {
             </div>
             <div className='tc-section'>
               <TextOutput
-                label='Project district'
+                label='Activity district'
                 value={project_district ? project_district_detail.name : 'Countrywide' }
               />
             </div>
@@ -137,10 +137,12 @@ class ProjectDetails extends React.PureComponent {
               <TextOutput
                 label='Current IFRC operation'
                 value={currentEventDetails.name}
+                hideEmptyValue
               />
               <TextOutput
                 label='Disaster type'
                 value={dtype ? disasterTypes[dtype] : undefined}
+                hideEmptyValue
               />
             </div>
             <div className='tc-section'>
@@ -152,10 +154,13 @@ class ProjectDetails extends React.PureComponent {
                 label='Primary sector'
                 value={sectors[primary_sector]}
               />
-              <TextOutput
-                label='Tagging'
-                value={(secondary_sectors.map(d => secondarySectors[d])).join(', ')}
-              />
+              {secondary_sectors.length > 0 && (
+                <TextOutput
+                  label='Tagging'
+                  value={(secondary_sectors.map(d => secondarySectors[d])).join(', ')}
+                  hideEmptyValue
+                />
+              )}
             </div>
             <div className='tc-section'>
               <div className='tc-section-title'>
@@ -165,18 +170,26 @@ class ProjectDetails extends React.PureComponent {
                 <TextOutput
                   label='Male'
                   value={target_male}
+                  type='number'
+                  addSeparatorToValue
                 />
                 <TextOutput
                   label='Female'
                   value={target_female}
+                  type='number'
+                  addSeparatorToValue
                 />
                 <TextOutput
                   label='Other'
                   value={target_other}
+                  type='number'
+                  addSeparatorToValue
                 />
                 <TextOutput
-                  label='Other'
+                  label='Total'
                   value={target_total}
+                  type='number'
+                  addSeparatorToValue
                 />
               </div>
             </div>
@@ -188,18 +201,26 @@ class ProjectDetails extends React.PureComponent {
                 <TextOutput
                   label='Male'
                   value={reached_male}
+                  type='number'
+                  addSeparatorToValue
                 />
                 <TextOutput
                   label='Female'
                   value={reached_female}
+                  type='number'
+                  addSeparatorToValue
                 />
                 <TextOutput
                   label='Other'
                   value={reached_other}
+                  type='number'
+                  addSeparatorToValue
                 />
                 <TextOutput
-                  label='Other'
+                  label='Total'
                   value={reached_total}
+                  type='number'
+                  addSeparatorToValue
                 />
               </div>
             </div>
diff --git a/app/assets/scripts/views/ThreeW/project-form-modal.js b/app/assets/scripts/views/ThreeW/project-form-modal.js
index 4e58702d0..f9e0a86c8 100644
--- a/app/assets/scripts/views/ThreeW/project-form-modal.js
+++ b/app/assets/scripts/views/ThreeW/project-form-modal.js
@@ -4,13 +4,13 @@ import _cs from 'classnames';
 
 import ProjectForm from './project-form';
 
-function ProjectFormModal (props) {
+function ProjectFormModal (p) {
   const {
     projectData,
     countryId,
     onCloseButtonClick,
     pending,
-  } = props;
+  } = p;
 
   return (
     <Backdrop>
diff --git a/app/assets/scripts/views/ThreeW/project-form.js b/app/assets/scripts/views/ThreeW/project-form.js
index 8b781cb95..94167bbe8 100644
--- a/app/assets/scripts/views/ThreeW/project-form.js
+++ b/app/assets/scripts/views/ThreeW/project-form.js
@@ -16,6 +16,7 @@ import TextInput from '../../components/form-elements/text-input';
 import NumberInput from '../../components/form-elements/number-input';
 import DateInput from '../../components/form-elements/date-input';
 import Checkbox from '../../components/form-elements/faram-checkbox';
+import TextOutput from '../../components/text-output';
 
 import {
   getCountries,
@@ -29,16 +30,13 @@ import {
 } from '../../utils/field-report-constants';
 
 import {
-  statusList,
+  // statusList,
   statuses,
   sectorList,
   secondarySectorInputValues,
   secondarySectorList,
-  sectorInputValues,
   programmeTypeList,
-  programmeTypes,
   operationTypeList,
-  operationTypes,
   projectVisibilityList,
 } from '../../utils/constants';
 
@@ -52,10 +50,12 @@ const positiveIntegerCondition = (value) => {
 
 const compareString = (a, b) => a.label.localeCompare(b.label);
 
+/*
 const statusOptions = statusList.map(p => ({
-  value: p.title,
+  value: p.key,
   label: p.title,
 })).sort(compareString);
+*/
 
 const sectorOptions = sectorList.map(p => ({
   value: p.inputValue,
@@ -68,7 +68,7 @@ const secondarySectorOptions = secondarySectorList.map(p => ({
 })).sort(compareString);
 
 const programmeTypeOptions = programmeTypeList.map(p => ({
-  value: p.title,
+  value: p.key,
   label: p.title,
 })).sort(compareString);
 
@@ -170,9 +170,9 @@ class ProjectForm extends React.PureComponent {
         dtype: projectData.dtype,
         project_district: projectData.project_district ? projectData.project_district : 'all',
         name: projectData.name,
-        operation_type: operationTypes[projectData.operation_type],
-        primary_sector: sectorInputValues[projectData.primary_sector],
-        programme_type: programmeTypes[projectData.programme_type],
+        operation_type: projectData.operation_type,
+        primary_sector: projectData.primary_sector,
+        programme_type: projectData.programme_type,
         end_date: projectData.end_date,
         start_date: projectData.start_date,
         reached_other: projectData.reached_other || undefined,
@@ -182,7 +182,7 @@ class ProjectForm extends React.PureComponent {
         reporting_ns: projectData.reporting_ns,
         secondary_sectors: projectData.secondary_sectors ? projectData.secondary_sectors.map(d => secondarySectorInputValues[d]) : [],
         is_project_completed: projectData.status === 2,
-        status: statuses[projectData.status],
+        status: projectData.status,
         target_other: projectData.target_other || undefined,
         target_female: projectData.target_female || undefined,
         target_male: projectData.target_male || undefined,
@@ -280,7 +280,7 @@ class ProjectForm extends React.PureComponent {
     }));
 
     const operationToDisasterMap = {};
-    currentOperationList.forEach(d => { operationToDisasterMap[d.id] = d.dtype.id; });
+    currentOperationList.forEach(d => { operationToDisasterMap[d.id] = (d.dtype || {}).id; });
 
     const currentEmergencyOperationOptions = currentOperationList
       .filter(d => d.auto_generated_source === 'New field report')
@@ -298,21 +298,21 @@ class ProjectForm extends React.PureComponent {
 
   getProjectStatusFaramValue = memoize((start, isCompleted) => {
     if (isCompleted) {
-      return { status: 'Completed' };
+      return { status: '2' };
     }
 
     if (!start) {
-      return { status: 'Planned' };
+      return { status: '0' };
     }
 
     const startDate = new Date(start);
     const today = new Date();
 
     if (startDate.getTime() <= today.getTime()) {
-      return { status: 'Ongoing' };
+      return { status: '1' };
     }
 
-    return { status: 'Planned' };
+    return { status: '0' };
   })
 
   getTargetedTotalFaramValue = memoize((male, female, other) => {
@@ -452,6 +452,7 @@ class ProjectForm extends React.PureComponent {
 
     const fetchingCountries = countries && countries.fetching;
     const shouldDisableCountryInput = fetchingCountries;
+
     const fetchingDistricts = districts && districts[faramValues.project_country] && districts[faramValues.project_country].fetching;
     const shouldDisableDistrictInput = fetchingCountries || fetchingDistricts;
     const fetchingEvents = eventList && eventList.fetching;
@@ -584,9 +585,23 @@ class ProjectForm extends React.PureComponent {
             />
           </InputSection>
         )}
+        { shouldShowCurrentEmergencyOperation && (
+          <InputSection
+            title='Current emergency operation*'
+            tooltip='The list is populated from current emergency operations related to the selected country. If necessary, create the related emergency through a field report'
+          >
+            <SelectInput
+              faramElementName='event'
+              className='project-form-select'
+              options={currentEmergencyOperationOptions}
+              disabled={shouldDisableCurrentOperation}
+              placeholder={fetchingEvents ? 'Fetching events...' : undefined}
+            />
+          </InputSection>
+        )}
 
         <InputSection
-          title='Project name*'
+          title='Activity name*'
         >
           <TextInput
             faramElementName='name'
@@ -629,24 +644,21 @@ class ProjectForm extends React.PureComponent {
         <InputSection
           className='multi-input-section'
           title='Budget and status*'
-          helpText='"Project status" is automatically calculated based on the values from "Start and end dates" above and can be marked as complete from the "Completed" checkbox.'
+          helpText='"Activity status" is automatically calculated based on the values from "Start and end dates" above and can be marked as complete from the "Completed" checkbox.'
         >
           <NumberInput
-            label='Project budget (CHF)'
+            label='Activity budget (CHF)'
             faramElementName='budget_amount'
           />
           <div>
-            <SelectInput
-              disabled
-              faramElementName='status'
-              className='project-form-select'
-              label='Project status'
-              options={statusOptions}
-            />
             <Checkbox
               label="Completed"
               faramElementName="is_project_completed"
             />
+            <TextOutput
+              label='Activity status'
+              value={statuses[faramValues.status]}
+            />
           </div>
         </InputSection>
 
@@ -698,7 +710,7 @@ class ProjectForm extends React.PureComponent {
           />
         </InputSection>
         <InputSection
-          title='Project visibility*'
+          title='Activity visibility*'
         >
           <SelectInput
             faramElementName='visibility'
diff --git a/app/assets/scripts/views/ThreeW/stats/region-overview.js b/app/assets/scripts/views/ThreeW/stats/region-overview.js
index d9079a429..7bca7e458 100644
--- a/app/assets/scripts/views/ThreeW/stats/region-overview.js
+++ b/app/assets/scripts/views/ThreeW/stats/region-overview.js
@@ -5,10 +5,11 @@ import {
   listToGroupList,
 } from '@togglecorp/fujs';
 
-const ProgressBar = ({
-  value,
-  max,
-}) => {
+const ProgressBar = (p) => {
+  const {
+    value,
+    max,
+  } = p;
   const width = 100 * value / max;
 
   return (
@@ -21,9 +22,15 @@ const ProgressBar = ({
   );
 };
 
-const Scale = ({ max }) => {
+const MAX_SCALE_STOPS = 5;
+
+function Scale (p) {
+  const { max } = p;
   const numbers = [];
-  for (let i = 0; i <= max; i++) {
+
+  const diff = max / MAX_SCALE_STOPS;
+
+  for (let i = 0; i <= max; i += diff) {
     numbers.push(i);
   }
 
@@ -32,7 +39,7 @@ const Scale = ({ max }) => {
       { numbers.map(n => <div key={n}>{n}</div>) }
     </div>
   );
-};
+}
 
 export default class RegionOverview extends React.PureComponent {
   render () {
@@ -49,6 +56,8 @@ export default class RegionOverview extends React.PureComponent {
 
     const projectDistrictList = Object.keys(groupedProjectList);
     const maxProjects = Math.max(...projectDistrictList.map(d => groupedProjectList[d].length));
+    const numBuckets = Math.ceil(maxProjects / MAX_SCALE_STOPS);
+    const max = numBuckets * MAX_SCALE_STOPS;
 
     return (
       <div className={_cs(className, 'three-w-stats-region-overview')}>
@@ -56,7 +65,7 @@ export default class RegionOverview extends React.PureComponent {
           Regions
         </h4>
         <Scale
-          max={maxProjects}
+          max={max}
         />
         <div>
           { projectDistrictList.map(d => {
@@ -69,11 +78,11 @@ export default class RegionOverview extends React.PureComponent {
                 className='three-w-region-district'
               >
                 <div>
-                  {regionName} ({p.length} projects)
+                  {regionName} ({p.length} activities)
                 </div>
                 <ProgressBar
                   value={p.length}
-                  max={maxProjects}
+                  max={max}
                 />
               </div>
             );
diff --git a/app/assets/scripts/views/ThreeW/stats/sector-activity.js b/app/assets/scripts/views/ThreeW/stats/sector-activity.js
index 49815008f..dacee9cfd 100644
--- a/app/assets/scripts/views/ThreeW/stats/sector-activity.js
+++ b/app/assets/scripts/views/ThreeW/stats/sector-activity.js
@@ -11,6 +11,7 @@ import {
   Bar,
   XAxis,
   YAxis,
+  Tooltip,
 } from 'recharts';
 
 import { sectorList } from '../../../utils/constants';
@@ -51,7 +52,7 @@ export default class SectorActivity extends React.PureComponent {
     return (
       <div className={_cs(className, 'three-w-stats-sector-activity')}>
         <h4 className='tc-heading'>
-          Projects by sector of activity
+          Activities by sector
         </h4>
         <div className='tc-content'>
           <ResponsiveContainer>
@@ -72,6 +73,7 @@ export default class SectorActivity extends React.PureComponent {
                 fill='#c1cdd1'
                 dataKey='value'
               />
+              <Tooltip cursor={{ fill: 'transparent' }} />
             </BarChart>
           </ResponsiveContainer>
         </div>
diff --git a/app/assets/scripts/views/ThreeW/stats/status-overview.js b/app/assets/scripts/views/ThreeW/stats/status-overview.js
index 8bed1a71e..98f85b52d 100644
--- a/app/assets/scripts/views/ThreeW/stats/status-overview.js
+++ b/app/assets/scripts/views/ThreeW/stats/status-overview.js
@@ -54,7 +54,7 @@ export default class StatusOverview extends React.PureComponent {
     return (
       <div className={_cs(className, 'three-w-stats-status-overview')}>
         <h4 className='tc-heading'>
-          Project status overview
+          Activity status overview
         </h4>
         <div className='tc-content'>
           <ResponsiveContainer>
diff --git a/app/assets/scripts/views/ThreeW/table.js b/app/assets/scripts/views/ThreeW/table.js
index 898e68f97..f2d91ba57 100644
--- a/app/assets/scripts/views/ThreeW/table.js
+++ b/app/assets/scripts/views/ThreeW/table.js
@@ -6,6 +6,14 @@ import {
 } from '@togglecorp/fujs';
 import memoize from 'memoize-one';
 import url from 'url';
+import {
+  MdContentCopy,
+  MdSearch,
+  MdEdit,
+  MdDeleteForever,
+  MdHistory,
+  MdMoreHoriz,
+} from 'react-icons/md';
 
 import {
   programmeTypes,
@@ -34,7 +42,7 @@ export default class ProjectListTable extends React.PureComponent {
       },
       {
         key: 'name',
-        label: 'Project name',
+        label: 'Activity name',
       },
       {
         key: 'reporting_ns',
@@ -83,13 +91,13 @@ export default class ProjectListTable extends React.PureComponent {
           <DropdownMenu
             className='more-actions-dropdown-menu'
             dropdownContainerClassName='more-actions-dropdown-container'
-            label={<div className='ion-android-more-horizontal' />}
+            label={<MdMoreHoriz className='tc-icon' />}
           >
             <button
               className='button'
               onClick={() => this.props.onDetailsButtonClick(d)}
             >
-              <div className='tc-icon ion-android-search' />
+              <MdSearch className='tc-icon' />
               <div className='tc-label'>
                 View details
               </div>
@@ -100,7 +108,7 @@ export default class ProjectListTable extends React.PureComponent {
                   className='button'
                   onClick={() => this.props.onEditButtonClick(d)}
                 >
-                  <div className='tc-icon ion-edit' />
+                  <MdEdit className='tc-icon' />
                   <div className='tc-label'>
                     Edit
                   </div>
@@ -109,7 +117,7 @@ export default class ProjectListTable extends React.PureComponent {
                   className='button'
                   onClick={() => this.props.onCloneButtonClick(d)}
                 >
-                  <div className='tc-icon ion-ios-browsers-outline' />
+                  <MdContentCopy className='tc-icon' />
                   <div className='tc-label'>
                     Duplicate
                   </div>
@@ -118,7 +126,7 @@ export default class ProjectListTable extends React.PureComponent {
                   className='button'
                   href={url.resolve(api, `deployments/project/${d.id}/history/`)}
                 >
-                  <div className='tc-icon ion-android-time' />
+                  <MdHistory className='tc-icon' />
                   <div className='tc-label'>
                     History
                   </div>
@@ -128,7 +136,7 @@ export default class ProjectListTable extends React.PureComponent {
                   className='button delete-button'
                   onClick={() => this.props.onDeleteButtonClick(d)}
                 >
-                  <div className='tc-icon ion-ios-trash-outline' />
+                  <MdDeleteForever className='tc-icon' />
                   <div className='tc-label'>
                     Delete
                   </div>
diff --git a/app/assets/scripts/views/countries.js b/app/assets/scripts/views/countries.js
index ed933d10e..34ade83f4 100644
--- a/app/assets/scripts/views/countries.js
+++ b/app/assets/scripts/views/countries.js
@@ -145,7 +145,9 @@ class AdminArea extends SFPComponent {
     if (this.props.adminArea.fetching && !nextProps.adminArea.fetching) {
       hideGlobalLoading();
       if (nextProps.adminArea.error) {
-        this.props.history.push('/uhoh');
+        console.error(nextProps.adminArea.error);
+        // removed because redirect is highly misleading
+        // this.props.history.push('/uhoh');
       }
     }
 
@@ -875,9 +877,10 @@ if (environment !== 'production') {
 // Connect functions
 
 const selector = (state, ownProps) => ({
+  appState: state,
   me: meSelector(state),
   deleteProjectRequest: state.projectDelete,
-  projects: state.projects,
+  projects: state.projects[ownProps.match.params.id],
   projectForm: state.projectForm,
 
   adminArea: get(state.adminArea.aaData, getCountryId(ownProps.match.params.id), {
diff --git a/app/assets/scripts/views/region.js b/app/assets/scripts/views/region.js
index c4245339e..28faf5ba6 100644
--- a/app/assets/scripts/views/region.js
+++ b/app/assets/scripts/views/region.js
@@ -4,6 +4,7 @@ import c from 'classnames';
 import { PropTypes as T } from 'prop-types';
 import { connect } from 'react-redux';
 import { DateTime } from 'luxon';
+import memoize from 'memoize-one';
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
 import { Helmet } from 'react-helmet';
 import CountryList from '../components/country-list';
@@ -53,9 +54,11 @@ import {
 } from '../components/admin-area-elements';
 import { SFPComponent } from '../utils/extendables';
 import { NO_DATA } from '../utils/constants';
+import RegionalThreeW from './RegionalThreeW';
 
 const TAB_DETAILS = [
   { title: 'Operations', hash: '#operations' },
+  { title: '3w', hash: '#3w' },
   { title: 'Additional Information', hash: '#additional-info' }
 ];
 
@@ -83,7 +86,9 @@ class AdminArea extends SFPComponent {
     if (this.props.adminArea.fetching && !nextProps.adminArea.fetching) {
       hideGlobalLoading();
       if (nextProps.adminArea.error) {
-        this.props.history.push('/uhoh');
+        console.error(nextProps.adminArea.error);
+        // removed because redirect is highly misleading
+        // this.props.history.push('/uhoh');
       }
     }
   }
@@ -157,6 +162,10 @@ class AdminArea extends SFPComponent {
     this.props._getAdmAreaById(type, id);
   }
 
+  getRegionId = memoize((regionIdFromProps) => {
+    return getRegionId(regionIdFromProps);
+  })
+
   renderContent () {
     const {
       fetched,
@@ -259,6 +268,14 @@ class AdminArea extends SFPComponent {
 
                 </TabContent>
               </TabPanel>
+              <TabPanel>
+                <TabContent title="3W">
+                  <RegionalThreeW
+                    disabled={this.loading}
+                    regionId={this.getRegionId(this.props.match.params.id)}
+                  />
+                </TabContent>
+              </TabPanel>
               <TabPanel>
                 <TabContent isError={!get(this.props.keyFigures, 'data.results.length')} errorMessage={ NO_DATA } title="Key Figures">
                   <KeyFigures data={this.props.keyFigures} />
diff --git a/app/assets/styles/components/_common.scss b/app/assets/styles/components/_common.scss
index 3bed13ed3..9f5a4a68f 100644
--- a/app/assets/styles/components/_common.scss
+++ b/app/assets/styles/components/_common.scss
@@ -2,15 +2,16 @@
   width: 100%;
   height: 100%;
   background-color: #fff;
-  overflow: auto;
   display: flex;
   flex-direction: column;
   align-items: center;
+  overflow: auto;
 
   .tc-header {
     display: flex;
     align-items: center;
     max-width: 1260px;
+    padding: 1rem;
     width: 100%;
 
     .tc-heading {
@@ -26,6 +27,7 @@
 
   .project-form {
     max-width: 1260px;
+    padding: 1rem;
     width: 100%;
   }
 }
@@ -49,7 +51,8 @@
 
     .tc-select-label {
       padding: 0;
-      font-size: 12px;
+      font-size: $font-size-sm;
+      text-transform: uppercase;
     }
 
     .tc-select-input {
@@ -58,6 +61,20 @@
     }
   }
 
+  .tc-raw-input-label {
+    padding: 0;
+    font-size: $font-size-sm;
+    text-transform: uppercase;
+  }
+
+  .tc-faram-checkbox {
+    margin-top: 12px;
+  }
+
+  .tc-text-output {
+    padding: 3px;
+  }
+
   .budget-input-container {
     display: flex;
   }
@@ -95,7 +112,7 @@
 
     .tc-help-text {
       color: rgba(0, 0, 0, .48);
-      font-size: 0.7rem;
+      font-size: 0.8rem;
       margin-top: 1rem;
     }
   }
@@ -111,3 +128,25 @@
     }
   }
 }
+
+
+.three-w-region-progress-bar {
+  height: 10px;
+  background-color: rgba(0, 0, 0, .1);
+  overflow: hidden;
+  border-radius: 5px;
+
+  .three-w-region-progress-bar-progress {
+    height: 100%;
+    background-color: $primary-color;
+    border-radius: 5px;
+  }
+}
+
+.three-w-region-scale {
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid rgba(0, 0, 0, .1);
+  padding: 6px 0;
+}
+
diff --git a/app/assets/styles/country/_global.scss b/app/assets/styles/country/_global.scss
index 6788bfa6f..52f4a5ba1 100644
--- a/app/assets/styles/country/_global.scss
+++ b/app/assets/styles/country/_global.scss
@@ -461,17 +461,20 @@
     width: 100%;
     text-align: left;
     display: flex;
-    padding: 0;
+    align-items: center;
+    padding: 5px 0;
+    border-radius: 0;
 
     .tc-icon {
-      padding: 3px 6px;
+      padding: 0 6px;
       display: block;
+      font-size: 1.5rem;
       width: 32px;
     }
 
     .tc-label {
       display: block;
-      padding: 3px 6px;
+      padding: 0 6px;
     }
   }
 
@@ -540,27 +543,10 @@
   }
 }
 
-.three-w-region-progress-bar {
-  height: 15px;
-  border: 1px solid rgba(0, 0, 0, .1);
-
-  .three-w-region-progress-bar-progress {
-    height: 100%;
-    background-color: rgba(0, 0, 0, .5);
-  }
-}
-
 .three-w-region-district {
   padding: 10px 0;
 }
 
-.three-w-region-scale {
-  display: flex;
-  justify-content: space-between;
-  border-bottom: 1px solid rgba(0, 0, 0, .1);
-  padding: 6px 0;
-}
-
 .tc-project-details-modal {
   width: 100%;
   height: 100%;
@@ -582,12 +568,26 @@
       padding: 24px;
     }
   }
+}
+
+.tc-project-details-modal {
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  overflow: auto;
 
+  >header {
+    display: flex;
+    align-items: center;
+
+    >h2 {
+      margin: 0;
+      padding: 24px;
+    }
+  }
   .tc-project-details {
     max-width: 1420px;
     width: 100%;
-    flex-grow: 1;
-    overflow: auto;
 
     .tc-project-name {
       padding: 0 10px;
diff --git a/app/assets/styles/global/_text-output.scss b/app/assets/styles/global/_text-output.scss
index e153e71bd..8ae56e851 100644
--- a/app/assets/styles/global/_text-output.scss
+++ b/app/assets/styles/global/_text-output.scss
@@ -13,4 +13,18 @@
     padding: 3px 6px;
     font-weight: bold;
   }
+
+  &.tc-text-output-reversed {
+    .tc-label {
+      order: 2;
+
+      &:after {
+        content: unset;
+      }
+    }
+
+    .tc-value {
+      order: 1;
+    }
+  }
 }
diff --git a/app/assets/styles/region/_global.scss b/app/assets/styles/region/_global.scss
index 9442a075d..86bb68ad2 100644
--- a/app/assets/styles/region/_global.scss
+++ b/app/assets/styles/region/_global.scss
@@ -58,4 +58,588 @@
     font-size: 0.875rem;
     margin-top: $global-spacing/2;
   }
-}
\ No newline at end of file
+
+  .regional-threew {
+    background-color: #fff;
+    box-shadow: 1px 2px 6px 1px rgba(0, 0, 0, 0.1);
+    padding: 20px;
+
+    .Select-menu-outer {
+      z-index: 11;
+      left: 5px;
+      width: calc(100% - 10px);
+    }
+
+    .tc-select {
+      .tc-select-label {
+        display: none;
+      }
+
+      .tc-select-input {
+        .Select-control {
+          border: 0;
+          border-radius: 0;
+          background-color: $grey-mist;
+          border-bottom: 1px solid $primary-color;
+          font-size: $font-size-sm;
+        }
+
+        .Select-placeholder {
+          padding: 0 16px;
+          color: $base-color;
+          font-weight: $base-font-medium;
+        }
+
+        &:focus-within {
+          .Select-placeholder {
+            color: rgba($base-color, 0.3);
+          }
+        }
+
+        .Select-input {
+          height: auto;
+
+          input {
+            padding: 0;
+          }
+        }
+
+        .Select-multi-value-wrapper {
+          padding: 6px;
+        }
+
+        .Select-value {
+          background-color: $grey-cloud;
+          border-radius: 0;
+          margin: 1px;
+          vertical-align: middle;
+          font-size: $font-size-sm;
+
+          .Select-value-icon {
+            padding: 2px 3px;
+            font-size: $font-size-lg;
+          }
+
+          .Select-value-label {
+            padding: 2px 3px;
+            font-weight: $base-font-medium;
+          }
+        }
+      }
+    }
+
+    .regional-threew-overview {
+      display: flex;
+      padding: 10px;
+
+      >* {
+        flex-basis: 0;
+        flex-grow: 1;
+        padding: 10px 20px;
+        margin: 10px;
+        background-color: $grey-fog;
+      }
+
+      .status-activity {
+        .tc-heading {
+          font-weight: $base-font-light;
+          text-transform: uppercase;
+          font-size: $font-size-sm;
+        }
+
+        .tc-content {
+          display: flex;
+
+          .total-activity {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+
+            .tc-value {
+              font-size: 2rem;
+              color: $secondary-color;
+              font-weight: $base-font-bold;
+            }
+
+            .tc-label {
+              text-align: center;
+              text-transform: uppercase;
+            }
+          }
+
+          .tc-chart-container {
+            flex-grow: 1;
+            height: 120px;
+          }
+        }
+      }
+
+      .people-overview {
+        .tc-heading {
+          font-weight: $base-font-light;
+          text-transform: uppercase;
+          font-size: $font-size-sm;
+        }
+
+        .reached-people-count {
+          font-size: 2rem;
+          display: flex;
+          justify-content: center;
+          padding: 10px;
+          font-weight: $base-font-bold;
+          color: $secondary-color;
+        }
+
+        .targeted-people {
+          display: flex;
+          justify-content: flex-end;
+
+          .tc-label {
+            padding: 3px 5px;
+            text-transform: uppercase;
+          }
+
+          .targeted-people-count {
+            padding: 3px 5px;
+            font-weight: $base-font-semi-bold;
+            color: $secondary-color;
+          }
+        }
+
+        .tc-progress-bar {
+          height: 10px;
+          background-color: rgba(0, 0, 0, .1);
+          overflow: hidden;
+          border-radius: 5px;
+
+          .tc-progress {
+            background-color: $secondary-color;
+            height: 100%;
+            border-radius: 5px;
+          }
+        }
+      }
+
+      .budget-overview {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .bo-text-output {
+          flex-basis: 0;
+          flex-grow: 1;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          padding: 6px;
+
+          .tc-value {
+            font-size: 2rem;
+            color: $secondary-color;
+            font-weight: $base-font-bold;
+          }
+
+          .tc-label {
+            text-align: center;
+            text-transform: uppercase;
+          }
+        }
+      }
+    }
+
+    .regional-movement-activities {
+      position: relative;
+
+      >.block-loading {
+        position: absolute;
+        z-index: 111111;
+        left: 0;
+        top: 0;
+        margin: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(255, 255, 255, .7);
+      }
+
+      >.tc-header {
+        margin-top: 5rem;
+        padding: 0 10px;
+
+        .tc-top {
+          display: flex;
+          align-items: center;
+
+          .tc-heading {
+            flex-grow: 1;
+            padding: 0 10px;
+            margin: 0;
+            text-transform: uppercase;
+            padding: 10px;
+          }
+
+          .regional-export-button {
+            margin: 10px;
+            flex-shrink: 0;
+          }
+        }
+
+        .regional-movement-activity-filter {
+          display: flex;
+          align-items: flex-start;
+
+          >* {
+            flex-basis: 0;
+            flex-grow: 1;
+            flex-direction: column;
+
+            .tc-select-label {
+              font-size: 0.7rem;
+              padding-bottom: 0;
+            }
+
+            .tc-select-input {
+              align-self: stretch;
+              flex-grow: 1;
+            }
+          }
+        }
+      }
+
+      >.tc-content {
+        .regional-threew-map-wrapper {
+          padding: 20px;
+          display: flex;
+
+          $height-map: 500px;
+          $width-country-details: 360px;
+          $width-popup: 360px;
+          $height-popup: 240px;
+
+          .regional-threew-map {
+            height: $height-map;
+            flex-grow: 1;
+
+            .regional-map-threew-activity-details {
+              padding: 10px!important;
+              height: $height-popup;
+              width: $width-popup;
+              overflow: auto;
+              display: flex;
+              flex-direction: column;
+
+              >.tc-heading {
+                flex-shrink: 0;
+                padding: 3px 6px;
+                margin: 0;
+                color: $primary-color;
+
+                a {
+                  color: inherit;
+                  display: flex;
+                  align-items: center;
+                }
+
+                .tc-icon {
+                  color: inherit;
+                  font-size: $font-size-xxl;
+                  margin-left: 3px;
+                }
+              }
+
+              >.tc-content {
+                flex-grow: 1;
+                display: flex;
+                flex-direction: column;
+                overflow: auto;
+
+                .status-counts {
+                  display: flex;
+                  padding: 3px 0;
+                  flex-shrink: 0;
+
+                  .tc-text-output {
+                    padding: 0 5px;
+
+                    .tc-label {
+                      padding: 3px;
+                    }
+
+                    .tc-value {
+                      padding: 3px;
+                    }
+                  }
+                }
+
+                .active-ns-count {
+                  padding: 3px 0;
+                  border-top: 1px solid rgba(0, 0, 0, .1);
+                  flex-shrink: 0;
+                }
+
+                ::-webkit-scrollbar-track {
+                  background-color: #eee;
+                }
+
+                ::-webkit-scrollbar {
+                  background-color: #fff;
+                  width: 6px;
+                  height: 6px;
+                }
+
+                ::-webkit-scrollbar-thumb {
+                  border-radius: 3px;
+                  background-color: #aaa;
+                }
+
+
+                .ns-sector-details {
+                  flex-grow: 1;
+                  overflow: auto;
+
+                  .block-loading {
+                    height: 5rem;
+                    margin: 1rem;
+
+                    .spinner {
+                      display: flex;
+                    }
+                  }
+
+                  .ns-details {
+                    padding: 3px 3px;
+
+                    .tc-heading {
+                      margin: 0;
+                      font-size: 0.8rem;
+                      padding: 0 3px;
+                    }
+
+                    .tc-content {
+                      display: flex;
+                      flex-wrap: wrap;
+
+                      .tc-sector {
+                        padding: 0 3px;
+                        color: rgba(0, 0, 0, .7);
+
+                        &:not(:last-child) {
+                          &:after {
+                            content: ', ';
+                          }
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+
+          .supporting-ns-list {
+            height: $height-map;
+            flex-shrink: 0;
+            overflow: auto;
+            width: $width-country-details;
+            display: flex;
+            flex-direction: column;
+
+            .three-w-region-scale {
+              flex-shrink: 0;
+              padding: 0;
+              margin: 0 16px 0 10px;
+            }
+
+            .supporting-ns-container {
+              flex-grow: 1;
+              overflow: auto;
+              overflow-y: scroll;
+            }
+
+            ::-webkit-scrollbar-track {
+              background-color: #eee;
+            }
+
+            ::-webkit-scrollbar {
+              background-color: #fff;
+              width: 6px;
+              height: 6px;
+            }
+
+            ::-webkit-scrollbar-thumb {
+              border-radius: 3px;
+              background-color: #aaa;
+            }
+
+            .supporting-ns {
+              padding: 10px 0;
+              margin: 0 10px;
+              border-bottom: 1px solid rgba(0, 0, 0, .1);
+
+              .tc-label {
+                font-size: $font-size-sm;
+                display: flex;
+
+                .tc-name {
+                  flex-grow: 1;
+                  padding: 0 3px;
+                  overflow: hidden;
+                }
+
+                .tc-value {
+                  flex-shrink: 0;
+                  padding: 0 3px;
+                }
+              }
+            }
+          }
+        }
+
+        .countries-threew-tables {
+          padding: 10px 0;
+
+          .country-table {
+            margin: 10px;
+
+            .tc-header-button {
+              display: flex;
+              width: 100%;
+              background-color: $grey-fog;
+              border: 0;
+              padding: 10px;
+              text-align: left;
+              cursor: pointer;
+              outline: none;
+              font-weight: bold;
+
+              .tc-label {
+                display: flex;
+                flex-grow: 1;
+
+                .tc-project-count {
+                  font-weight: $base-font-light;
+                  margin-left: 10px;
+                  color: $grey-cement;
+                }
+              }
+
+              .tc-icon {
+                font-size: 1.4rem;
+                flex-shrink: 0;
+              }
+
+              &:hover {
+                background-color: rgba(0, 0, 0, .06);
+              }
+            }
+
+            .tc-content {
+              padding: 0 20px;
+
+              .tc-table {
+                width: 100%;
+
+                th {
+                  padding: 16px 10px;
+                  text-align: left;
+                }
+
+                td {
+                  padding: 10px;
+                }
+
+                tbody {
+                  tr {
+                    &:nth-child(odd) {
+                      background-color: $grey-mist;
+                    }
+                  }
+                }
+              }
+            }
+
+            &.tc-active {
+              .tc-header-button {
+                .tc-label {
+                  color: $primary-color;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .regional-ns-activities {
+      position: relative;
+
+      .tc-header {
+        margin-top: 5rem;
+
+        .tc-heading {
+          padding: 10px;
+          margin: 0;
+          text-transform: uppercase;
+        }
+      }
+
+      .regional-ns-activity-filter {
+        display: flex;
+        align-items: flex-start;
+
+        >* {
+          flex-basis: 0;
+          flex-grow: 1;
+          flex-direction: column;
+
+          .tc-select-label {
+            font-size: $font-size-sm;
+            padding-bottom: 0;
+          }
+
+          .tc-select-input {
+            align-self: stretch;
+            flex-grow: 1;
+          }
+        }
+      }
+
+      .ns-sankey-container {
+        height: 90vh;
+
+        .sankey-empty-message {
+          color: rgba(0, 0, 0, .3);
+          font-size: 1.2rem;
+          display: flex;
+          justify-content: center;
+          padding: 10vh 1rem;
+        }
+
+        >.block-loading {
+          position: absolute;
+          z-index: 111111;
+          left: 0;
+          top: 0;
+          margin: 0;
+          width: 100%;
+          height: 100%;
+          background-color: rgba(255, 255, 255, .7);
+        }
+
+        .sankey-link {
+          fill: $secondary-color;
+          fill-opacity: 0.1;
+
+          &.sankey-link-left {
+            fill: $primary-color;
+          }
+
+          &:hover {
+            fill-opacity: 0.4;
+          }
+        }
+      }
+    }
+  }
+}
+
diff --git a/app/index.html b/app/index.html
index a26a3ed16..76c43c966 100644
--- a/app/index.html
+++ b/app/index.html
@@ -58,7 +58,6 @@
     <script src="/assets/scripts/bundle.js"></script>
     <!-- endbuild -->
 
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.css" />
     <script async src="https://www.googletagmanager.com/gtag/js?id=UA-84297335-3"></script>
     <script>
       window.dataLayer = window.dataLayer || [];
diff --git a/package.json b/package.json
index 535f3b86c..e1ad88c57 100644
--- a/package.json
+++ b/package.json
@@ -167,6 +167,7 @@
     "react-device-detect": "^1.11.14",
     "react-dom": "^16.9.0",
     "react-helmet": "^5.2.0",
+    "react-icons": "^3.10.0",
     "react-markdown": "^3.3.4",
     "react-paginate": "^5.0.0",
     "react-redux": "^5.0.6",
diff --git a/yarn.lock b/yarn.lock
index a1a5c3f52..9ce29846b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2197,6 +2197,11 @@ camelcase@^3.0.0:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-3.0.0.tgz#32fc4b9fcdaf845fcdf7e73bb97cac2261f0ab0a"
   integrity sha1-MvxLn82vhF/N9+c7uXysImHwqwo=
 
+camelcase@^5.0.0:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
+  integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
+
 caniuse-lite@^1.0.30001015:
   version "1.0.30001016"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001016.tgz#16ea48d7d6e8caf3cad3295c2d746fe38c4e7f66"
@@ -8879,6 +8884,13 @@ react-helmet@^5.2.0:
     react-fast-compare "^2.0.2"
     react-side-effect "^1.1.0"
 
+react-icons@^3.10.0:
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-3.10.0.tgz#6c217a2dde2e8fa8d293210023914b123f317297"
+  integrity sha512-WsQ5n1JToG9VixWilSo1bHv842Cj5aZqTGiS3Ud47myF6aK7S/IUY2+dHcBdmkQcCFRuHsJ9OMUI0kTDfjyZXQ==
+  dependencies:
+    camelcase "^5.0.0"
+
 react-input-autosize@^2.1.2:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-2.2.2.tgz#fcaa7020568ec206bc04be36f4eb68e647c4d8c2"