diff --git a/nms/app/packages/magmalte/app/components/GatewayUtils.js b/nms/app/packages/magmalte/app/components/GatewayUtils.js
index ba534741f3c0..33c0534d4967 100644
--- a/nms/app/packages/magmalte/app/components/GatewayUtils.js
+++ b/nms/app/packages/magmalte/app/components/GatewayUtils.js
@@ -187,3 +187,63 @@ export const DynamicServices = Object.freeze({
   EVENTD: 'eventd',
   TD_AGENT_BIT: 'td-agent-bit',
 });
+
+export const DEFAULT_GATEWAY_CONFIG = {
+  apn_resources: {},
+  cellular: {
+    epc: {
+      ip_block: '192.168.128.0/24',
+      nat_enabled: true,
+      dns_primary: '',
+      dns_secondary: '',
+      sgi_management_iface_gw: '',
+      sgi_management_iface_static_ip: '',
+      sgi_management_iface_vlan: '',
+    },
+    ran: {
+      pci: 260,
+      transmit_enabled: true,
+    },
+  },
+  connected_enodeb_serials: [],
+  description: '',
+  device: {
+    hardware_id: '',
+    key: {
+      key: '',
+      key_type: 'SOFTWARE_ECDSA_SHA256',
+    },
+  },
+  id: '',
+  magmad: {
+    autoupgrade_enabled: true,
+    autoupgrade_poll_interval: 60,
+    checkin_interval: 60,
+    checkin_timeout: 30,
+    dynamic_services: [DynamicServices.EVENTD, DynamicServices.TD_AGENT_BIT],
+  },
+  name: '',
+  status: {
+    platform_info: {
+      packages: [
+        {
+          version: '',
+        },
+      ],
+    },
+  },
+  tier: 'default',
+};
+export const DEFAULT_DNS_CONFIG = {
+  enable_caching: false,
+  local_ttl: 0,
+  records: [],
+};
+export const DEFAULT_HE_CONFIG = {
+  enable_encryption: false,
+  encryption_key: '',
+  enable_header_enrichment: false,
+  he_encoding_type: 'BASE64',
+  he_encryption_algorithm: 'RC4',
+  he_hash_function: 'MD5',
+};
diff --git a/nms/app/packages/magmalte/app/state/lte/EquipmentState.js b/nms/app/packages/magmalte/app/state/lte/EquipmentState.js
index 46307b2d6d12..8841b2d4664c 100644
--- a/nms/app/packages/magmalte/app/state/lte/EquipmentState.js
+++ b/nms/app/packages/magmalte/app/state/lte/EquipmentState.js
@@ -17,6 +17,7 @@ import type {EnodebInfo} from '../../components/lte/EnodebUtils';
 import type {EnodebState} from '../../components/context/EnodebContext';
 import type {
   enodeb_serials,
+  gateway_cellular_configs,
   gateway_dns_configs,
   gateway_epc_configs,
   gateway_id,
@@ -130,11 +131,11 @@ export async function FetchEnodebs(props: FetchProps) {
             enodebSerial: id,
           },
         );
-        const newEnb = {[id]: {enb_state: newEnbSt || {}, enb: enb}};
+        const newEnb = {[id]: {enb_state: newEnbSt, enb: enb}};
         return newEnb;
       }
     } catch (e) {
-      return {[id]: {enb_state: {} || {}, enb: enb}};
+      return {[id]: {enb_state: {}, enb: enb}};
     }
   } else {
     enb = await MagmaV1API.getLteByNetworkIdEnodebs({networkId});
@@ -318,6 +319,7 @@ export type UpdateGatewayProps = {
   epcConfigs?: gateway_epc_configs,
   ranConfigs?: gateway_ran_configs,
   dnsConfig?: gateway_dns_configs,
+  cellularConfigs?: gateway_cellular_configs,
   enbs?: enodeb_serials,
   networkId: network_id,
   setLteGateways: ({[string]: lte_gateway}) => void,
@@ -380,6 +382,16 @@ export async function UpdateGateway(props: UpdateGatewayProps) {
       }),
     );
   }
+
+  if (props.cellularConfigs) {
+    requests.push(
+      MagmaV1API.putLteByNetworkIdGatewaysByGatewayIdCellular({
+        networkId,
+        gatewayId: gatewayId,
+        config: props.cellularConfigs,
+      }),
+    );
+  }
   await Promise.all(requests);
   const gateways = await MagmaV1API.getLteByNetworkIdGateways({
     networkId,
diff --git a/nms/app/packages/magmalte/app/views/equipment/EnodebDetailConfigEdit.js b/nms/app/packages/magmalte/app/views/equipment/EnodebDetailConfigEdit.js
index 4099c128d6ca..91ea673b2824 100644
--- a/nms/app/packages/magmalte/app/views/equipment/EnodebDetailConfigEdit.js
+++ b/nms/app/packages/magmalte/app/views/equipment/EnodebDetailConfigEdit.js
@@ -47,7 +47,7 @@ import EnodeConfigEditTdd from './EnodebDetailConfigTdd';
 import {AltFormField} from '../../components/FormField';
 import {colors, typography} from '../../theme/default';
 import {makeStyles} from '@material-ui/styles';
-import {useContext, useState} from 'react';
+import {useContext, useEffect, useState} from 'react';
 import {useEnqueueSnackbar} from '@fbcnms/ui/hooks/useSnackbar';
 import {useRouter} from '@fbcnms/ui/hooks';
 
@@ -160,10 +160,14 @@ function EnodeEditDialog(props: DialogProps) {
 
   const onClose = () => {
     // clear existing state
-    setEnb({});
     props.onClose();
   };
 
+  useEffect(() => {
+    setTabPos(editProps ? EditTableType[editProps.editTable] : 0);
+    setEnb({});
+  }, [editProps, open]);
+
   return (
     <Dialog data-testid="editDialog" open={open} fullWidth={true} maxWidth="sm">
       <DialogTitle
diff --git a/nms/app/packages/magmalte/app/views/equipment/GatewayDetailConfig.js b/nms/app/packages/magmalte/app/views/equipment/GatewayDetailConfig.js
index ebcbd0621358..0d6df56aad3a 100644
--- a/nms/app/packages/magmalte/app/views/equipment/GatewayDetailConfig.js
+++ b/nms/app/packages/magmalte/app/views/equipment/GatewayDetailConfig.js
@@ -170,6 +170,13 @@ export default function GatewayConfig() {
                   />
                   <GatewayRAN gwInfo={gwInfo} />
                 </Grid>
+                <Grid item xs={12}>
+                  <CardTitleRow
+                    label="Header Enrichment"
+                    filter={() => editFilter({editTable: 'headerEnrichment'})}
+                  />
+                  <GatewayHE gwInfo={gwInfo} />
+                </Grid>
               </Grid>
             </Grid>
           </Grid>
@@ -405,3 +412,49 @@ function ApnResourcesTable({gwInfo}: {gwInfo: lte_gateway}) {
     />
   );
 }
+
+function GatewayHE({gwInfo}: {gwInfo: lte_gateway}) {
+  const heEnabled =
+    gwInfo.cellular.he_config?.enable_header_enrichment ?? false;
+  const encryptionEnabled =
+    gwInfo.cellular.he_config?.enable_encryption ?? false;
+  const EncryptionDetail = () => {
+    const encryptionConfig: DataRows[] = [
+      [
+        {
+          category: 'Encryption Key',
+          value: gwInfo.cellular.he_config?.encryption_key || '',
+          obscure: true,
+        },
+        {
+          category: 'Encoding Type',
+          value: gwInfo.cellular.he_config?.he_encoding_type || '',
+        },
+      ],
+      [
+        {
+          category: 'Encryption Algorithm',
+          value: gwInfo.cellular.he_config?.he_encryption_algorithm || '',
+        },
+        {
+          category: 'Hash Function',
+          value: gwInfo.cellular.he_config?.he_hash_function || '',
+        },
+      ],
+    ];
+    return <DataGrid data={encryptionConfig} />;
+  };
+
+  const heConfig: DataRows[] = [
+    [
+      {
+        statusCircle: true,
+        status: heEnabled,
+        category: 'Header Enrichment',
+        value: heEnabled ? 'Enabled' : 'Disabled',
+        collapse: encryptionEnabled ? <EncryptionDetail /> : <></>,
+      },
+    ],
+  ];
+  return <DataGrid data={heConfig} />;
+}
diff --git a/nms/app/packages/magmalte/app/views/equipment/GatewayDetailConfigEdit.js b/nms/app/packages/magmalte/app/views/equipment/GatewayDetailConfigEdit.js
index 41f2af9ccaf6..75bf3b013022 100644
--- a/nms/app/packages/magmalte/app/views/equipment/GatewayDetailConfigEdit.js
+++ b/nms/app/packages/magmalte/app/views/equipment/GatewayDetailConfigEdit.js
@@ -20,6 +20,7 @@ import type {
   gateway_device,
   gateway_dns_configs,
   gateway_epc_configs,
+  gateway_he_config,
   gateway_logging_configs,
   gateway_ran_configs,
   lte_gateway,
@@ -61,7 +62,12 @@ import Text from '@fbcnms/ui/components/design-system/Text';
 import nullthrows from '@fbcnms/util/nullthrows';
 
 import {AltFormField} from '../../components/FormField';
-import {DynamicServices} from '../../components/GatewayUtils';
+import {
+  DEFAULT_DNS_CONFIG,
+  DEFAULT_GATEWAY_CONFIG,
+  DEFAULT_HE_CONFIG,
+  DynamicServices,
+} from '../../components/GatewayUtils';
 import {colors, typography} from '../../theme/default';
 import {makeStyles} from '@material-ui/styles';
 import {useContext, useEffect, useState} from 'react';
@@ -73,52 +79,7 @@ const RAN_TITLE = 'Ran';
 const AGGREGATION_TITLE = 'Aggregation';
 const EPC_TITLE = 'Epc';
 const APN_RESOURCES_TITLE = 'APN Resources';
-const DEFAULT_GATEWAY_CONFIG = {
-  apn_resources: {},
-  cellular: {
-    epc: {
-      ip_block: '192.168.128.0/24',
-      nat_enabled: true,
-      dns_primary: '',
-      dns_secondary: '',
-      sgi_management_iface_gw: '',
-      sgi_management_iface_static_ip: '',
-      sgi_management_iface_vlan: '',
-    },
-    ran: {
-      pci: 260,
-      transmit_enabled: true,
-    },
-  },
-  connected_enodeb_serials: [],
-  description: '',
-  device: {
-    hardware_id: '',
-    key: {
-      key: '',
-      key_type: 'SOFTWARE_ECDSA_SHA256',
-    },
-  },
-  id: '',
-  magmad: {
-    autoupgrade_enabled: true,
-    autoupgrade_poll_interval: 60,
-    checkin_interval: 60,
-    checkin_timeout: 30,
-    dynamic_services: [DynamicServices.EVENTD, DynamicServices.TD_AGENT_BIT],
-  },
-  name: '',
-  status: {
-    platform_info: {
-      packages: [
-        {
-          version: '',
-        },
-      ],
-    },
-  },
-  tier: 'default',
-};
+const HEADER_ENRICHMENT_TITLE = 'Header Enrichment';
 
 const useStyles = makeStyles(_ => ({
   appBarBtn: {
@@ -161,6 +122,7 @@ const EditTableType = {
   epc: 2,
   ran: 3,
   apnResources: 4,
+  headerEnrichment: 5,
 };
 
 export type EditProps = {
@@ -222,17 +184,21 @@ function GatewayEditDialog(props: DialogProps) {
   const {open, editProps} = props;
   const classes = useStyles();
   const {match} = useRouter();
-  const [gateway, setGateway] = useState<lte_gateway>({});
+  const [gateway, setGateway] = useState<lte_gateway>(DEFAULT_GATEWAY_CONFIG);
   const gatewayId: string = match.params.gatewayId;
   const [tabPos, setTabPos] = useState(
     editProps ? EditTableType[editProps.editTable] : 0,
   );
   const ctx = useContext(GatewayContext);
   const onClose = () => {
-    setGateway({});
     props.onClose();
   };
 
+  useEffect(() => {
+    setTabPos(editProps ? EditTableType[editProps.editTable] : 0);
+    setGateway(DEFAULT_GATEWAY_CONFIG);
+  }, [editProps, open]);
+
   return (
     <Dialog data-testid="editDialog" open={open} fullWidth={true} maxWidth="md">
       <DialogTitle
@@ -269,14 +235,18 @@ function GatewayEditDialog(props: DialogProps) {
           disabled={editProps ? false : true}
           label={APN_RESOURCES_TITLE}
         />
+        <Tab
+          key="headerEnrichment"
+          data-testid="headerEnrichmentTab"
+          disabled={editProps ? false : true}
+          label={HEADER_ENRICHMENT_TITLE}
+        />
         ;
       </Tabs>
       {tabPos === 0 && (
         <ConfigEdit
           isAdd={!editProps}
-          gateway={
-            Object.keys(gateway).length != 0 ? gateway : ctx.state[gatewayId]
-          }
+          gateway={!editProps ? gateway : ctx.state[gatewayId]}
           onClose={onClose}
           onSave={(gateway: lte_gateway) => {
             setGateway(gateway);
@@ -291,9 +261,7 @@ function GatewayEditDialog(props: DialogProps) {
       {tabPos === 1 && (
         <DynamicServicesEdit
           isAdd={!editProps}
-          gateway={
-            Object.keys(gateway).length != 0 ? gateway : ctx.state[gatewayId]
-          }
+          gateway={ctx.state[gatewayId] || gateway}
           onClose={onClose}
           onSave={(gateway: lte_gateway) => {
             setGateway(gateway);
@@ -308,9 +276,7 @@ function GatewayEditDialog(props: DialogProps) {
       {tabPos === 2 && (
         <EPCEdit
           isAdd={!editProps}
-          gateway={
-            Object.keys(gateway).length != 0 ? gateway : ctx.state[gatewayId]
-          }
+          gateway={ctx.state[gatewayId] || gateway}
           onClose={onClose}
           onSave={(gateway: lte_gateway) => {
             setGateway(gateway);
@@ -325,9 +291,7 @@ function GatewayEditDialog(props: DialogProps) {
       {tabPos === 3 && (
         <RanEdit
           isAdd={!editProps}
-          gateway={
-            Object.keys(gateway).length != 0 ? gateway : ctx.state[gatewayId]
-          }
+          gateway={ctx.state[gatewayId] || gateway}
           onClose={onClose}
           onSave={(gateway: lte_gateway) => {
             setGateway(gateway);
@@ -342,9 +306,22 @@ function GatewayEditDialog(props: DialogProps) {
       {tabPos === 4 && (
         <ApnResourcesEdit
           isAdd={!editProps}
-          gateway={
-            Object.keys(gateway).length != 0 ? gateway : ctx.state[gatewayId]
-          }
+          gateway={ctx.state[gatewayId] || gateway}
+          onClose={onClose}
+          onSave={(gateway: lte_gateway) => {
+            setGateway(gateway);
+            if (editProps) {
+              onClose();
+            } else {
+              setTabPos(tabPos + 1);
+            }
+          }}
+        />
+      )}
+      {tabPos === 5 && (
+        <HeaderEnrichmentConfig
+          isAdd={!editProps}
+          gateway={ctx.state[gatewayId] || gateway}
           onClose={onClose}
           onSave={(gateway: lte_gateway) => {
             setGateway(gateway);
@@ -361,7 +338,7 @@ function GatewayEditDialog(props: DialogProps) {
 
 type Props = {
   isAdd: boolean,
-  gateway?: lte_gateway,
+  gateway: lte_gateway,
   onClose: () => void,
   onSave: lte_gateway => void,
 };
@@ -452,7 +429,7 @@ export function ConfigEdit(props: Props) {
               placeholder="Enter ID"
               fullWidth={true}
               value={gateway.id}
-              readOnly={props.gateway ? true : false}
+              readOnly={props.gateway.id !== '' ? true : false}
               onChange={({target}) =>
                 setGateway({...gateway, id: target.value})
               }
@@ -523,11 +500,10 @@ export function DynamicServicesEdit(props: Props) {
   const enqueueSnackbar = useEnqueueSnackbar();
   const ctx = useContext(GatewayContext);
   const {match} = useRouter();
-
   const gatewayId: string =
-    props.gateway?.id || nullthrows(match.params.gatewayId);
+    props.gateway.id || nullthrows(match.params.gatewayId);
   const [config, setConfig] = useState<magmad_gateway_configs>(
-    props.gateway?.magmad || DEFAULT_GATEWAY_CONFIG.magmad,
+    props.gateway.magmad,
   );
 
   const handleChange = (val: boolean, key: string) => {
@@ -569,7 +545,7 @@ export function DynamicServicesEdit(props: Props) {
       }
 
       const gateway = {
-        ...(props.gateway || DEFAULT_GATEWAY_CONFIG),
+        ...props.gateway,
         magmad: config,
       };
       await ctx.updateGateway({gatewayId, magmadConfigs: config});
@@ -648,22 +624,20 @@ export function EPCEdit(props: Props) {
   };
 
   const [EPCConfig, setEPCConfig] = useState<gateway_epc_configs>(
-    props.gateway?.cellular.epc || DEFAULT_GATEWAY_CONFIG.cellular.epc,
+    props.gateway.cellular.epc,
   );
 
   useEffect(() => {
-    setEPCConfig(
-      props.gateway?.cellular.epc || DEFAULT_GATEWAY_CONFIG.cellular.epc,
-    );
+    setEPCConfig(props.gateway.cellular.epc);
     setError('');
-  }, [props.gateway?.cellular.epc]);
+  }, [props.gateway.cellular.epc]);
 
   const onSave = async () => {
     try {
       const gateway = {
-        ...(props.gateway || DEFAULT_GATEWAY_CONFIG),
+        ...props.gateway,
         cellular: {
-          ...DEFAULT_GATEWAY_CONFIG.cellular,
+          ...props.gateway.cellular,
           epc: EPCConfig,
         },
       };
@@ -784,12 +758,6 @@ export function EPCEdit(props: Props) {
   );
 }
 
-const DEFAULT_DNS_CONFIG = {
-  enable_caching: false,
-  local_ttl: 0,
-  records: [],
-};
-
 export function RanEdit(props: Props) {
   const classes = useStyles();
   const enqueueSnackbar = useEnqueueSnackbar();
@@ -797,14 +765,13 @@ export function RanEdit(props: Props) {
   const ctx = useContext(GatewayContext);
   const enbsCtx = useContext(EnodebContext);
   const [ranConfig, setRanConfig] = useState<gateway_ran_configs>(
-    props.gateway?.cellular.ran || DEFAULT_GATEWAY_CONFIG.cellular.ran,
+    props.gateway.cellular.ran,
   );
   const [dnsConfig, setDnsConfig] = useState<gateway_dns_configs>(
-    props.gateway?.cellular.dns ?? {},
+    props.gateway.cellular.dns ?? {},
   );
   const [connectedEnodebs, setConnectedEnodebs] = useState<enodeb_serials>(
-    props.gateway?.connected_enodeb_serials ||
-      DEFAULT_GATEWAY_CONFIG.connected_enodeb_serials,
+    props.gateway.connected_enodeb_serials,
   );
   const handleRanChange = (key: string, val) => {
     setRanConfig({...ranConfig, [key]: val});
@@ -816,9 +783,9 @@ export function RanEdit(props: Props) {
   const onSave = async () => {
     try {
       const gateway = {
-        ...(props.gateway || DEFAULT_GATEWAY_CONFIG),
+        ...props.gateway,
         cellular: {
-          ...(props.gateway?.cellular || DEFAULT_GATEWAY_CONFIG.cellular),
+          ...props.gateway.cellular,
           ran: ranConfig,
           dns: {...DEFAULT_DNS_CONFIG, ...dnsConfig},
         },
@@ -941,8 +908,7 @@ export function ApnResourcesEdit(props: Props) {
   const ctx = useContext(GatewayContext);
   const apnCtx = useContext(ApnContext);
   const lteCtx = useContext(LteNetworkContext);
-  const apnResources: apn_resources =
-    props.gateway?.apn_resources || DEFAULT_GATEWAY_CONFIG.apn_resources;
+  const apnResources: apn_resources = props.gateway.apn_resources ?? {};
   const [apnResourcesRows, setApnResourcesRows] = useState(
     Object.keys(apnResources).map(apn => apnResources[apn]),
   );
@@ -970,7 +936,7 @@ export function ApnResourcesEdit(props: Props) {
         apn => (gatewayApnResources[apn.apn_name] = apn),
       );
       const gateway = {
-        ...(props.gateway || DEFAULT_GATEWAY_CONFIG),
+        ...props.gateway,
         apn_resources: gatewayApnResources,
       };
       await ctx.setState(gateway.id, gateway);
@@ -1090,6 +1056,174 @@ export function ApnResourcesEdit(props: Props) {
           ))}
         </List>
       </DialogContent>
+      <DialogActions>
+        <Button onClick={props.onClose} skin="regular">
+          Cancel
+        </Button>
+        <Button onClick={onSave} variant="contained" color="primary">
+          {props.isAdd ? 'Save And Continue' : 'Save'}
+        </Button>
+      </DialogActions>
+    </>
+  );
+}
+
+export function HeaderEnrichmentConfig(props: Props) {
+  const enqueueSnackbar = useEnqueueSnackbar();
+  const [error, setError] = useState('');
+  const ctx = useContext(GatewayContext);
+  const [heConfig, setHeConfig] = useState<gateway_he_config>(
+    props.gateway.cellular.he_config || DEFAULT_HE_CONFIG,
+  );
+
+  const handleHEChange = (key: string, val) => {
+    setHeConfig({...heConfig, [key]: val});
+  };
+  const heEncodingTypes = ['BASE64', 'HEX2BIN'];
+  const heEncryptionAlgorithmTypes = [
+    'RC4',
+    'AES256_CBC_HMAC_MD5',
+    'AES256_ECB_HMAC_MD5',
+    'GZIPPED_AES256_ECB_SHA1',
+  ];
+  const heHashFunctionTypes = ['MD5', 'HEX', 'SHA256'];
+
+  const onSave = async () => {
+    try {
+      const gateway = {
+        ...props.gateway,
+        cellular: {
+          ...props.gateway.cellular,
+          he_config: heConfig,
+        },
+      };
+      await ctx.updateGateway({
+        gatewayId: gateway.id,
+        cellularConfigs: {
+          ...props.gateway.cellular,
+          he_config: heConfig.enable_header_enrichment ? heConfig : undefined,
+        },
+      });
+      enqueueSnackbar('Gateway saved successfully', {
+        variant: 'success',
+      });
+      props.onSave(gateway);
+    } catch (e) {
+      setError(e.response?.data?.message ?? e.message);
+    }
+  };
+
+  return (
+    <>
+      <DialogContent data-testid="headerEnrichmentEdit">
+        <List>
+          {error !== '' && (
+            <AltFormField label={''}>
+              <FormLabel error>{error}</FormLabel>
+            </AltFormField>
+          )}
+          <AltFormField label={'Enable Header Enrichment'}>
+            <Switch
+              data-testid="enableHE"
+              onChange={() =>
+                handleHEChange(
+                  'enable_header_enrichment',
+                  !(heConfig?.enable_header_enrichment ?? false),
+                )
+              }
+              checked={heConfig?.enable_header_enrichment ?? false}
+            />
+          </AltFormField>
+
+          <AltFormField label={'Enable Encryption'}>
+            <Switch
+              data-testid="enableEncryption"
+              disabled={!heConfig.enable_header_enrichment}
+              onChange={() =>
+                handleHEChange(
+                  'enable_encryption',
+                  !(heConfig?.enable_encryption ?? false),
+                )
+              }
+              checked={heConfig?.enable_encryption ?? false}
+            />
+          </AltFormField>
+
+          <AltFormField label={'Encryption Key'}>
+            <OutlinedInput
+              disabled={!heConfig.enable_header_enrichment}
+              data-testid="encryptionKey"
+              type="string"
+              fullWidth={true}
+              value={
+                heConfig.encryption_key ?? DEFAULT_HE_CONFIG.encryption_key
+              }
+              onChange={({target}) =>
+                handleHEChange('encryption_key', target.value)
+              }
+            />
+          </AltFormField>
+
+          <AltFormField label={'Encoding Type'}>
+            <Select
+              disabled={!heConfig.enable_header_enrichment}
+              fullWidth={true}
+              variant={'outlined'}
+              value={
+                heConfig.he_encoding_type ?? DEFAULT_HE_CONFIG.he_encoding_type
+              }
+              onChange={({target}) => {
+                handleHEChange('he_encoding_type', target.value);
+              }}
+              input={<OutlinedInput id="encodingType" />}>
+              {heEncodingTypes.map(type => (
+                <MenuItem key={type} value={type}>
+                  <ListItemText primary={type} />
+                </MenuItem>
+              ))}
+            </Select>
+          </AltFormField>
+          <AltFormField label={'Encryption Algorithm'}>
+            <Select
+              disabled={!heConfig.enable_header_enrichment}
+              fullWidth={true}
+              variant={'outlined'}
+              value={
+                heConfig.he_encryption_algorithm ??
+                DEFAULT_HE_CONFIG.he_encoding_type
+              }
+              onChange={({target}) => {
+                handleHEChange('he_encryption_algorithm', target.value);
+              }}
+              input={<OutlinedInput id="encryptionAlgorithm" />}>
+              {heEncryptionAlgorithmTypes.map(type => (
+                <MenuItem key={type} value={type}>
+                  <ListItemText primary={type} />
+                </MenuItem>
+              ))}
+            </Select>
+          </AltFormField>
+          <AltFormField label={'Hash Function'}>
+            <Select
+              disabled={!heConfig.enable_header_enrichment}
+              fullWidth={true}
+              variant={'outlined'}
+              value={
+                heConfig.he_hash_function ?? DEFAULT_HE_CONFIG.he_encoding_type
+              }
+              onChange={({target}) => {
+                handleHEChange('he_hash_function', target.value);
+              }}
+              input={<OutlinedInput id="hashFunction" />}>
+              {heHashFunctionTypes.map(type => (
+                <MenuItem key={type} value={type}>
+                  <ListItemText primary={type} />
+                </MenuItem>
+              ))}
+            </Select>
+          </AltFormField>
+        </List>
+      </DialogContent>
       <DialogActions>
         <Button onClick={props.onClose} skin="regular">
           Cancel
diff --git a/nms/app/packages/magmalte/app/views/equipment/__tests__/GatewayConfigTest.js b/nms/app/packages/magmalte/app/views/equipment/__tests__/GatewayConfigTest.js
index d1a4d75f8f40..00d61766285d 100644
--- a/nms/app/packages/magmalte/app/views/equipment/__tests__/GatewayConfigTest.js
+++ b/nms/app/packages/magmalte/app/views/equipment/__tests__/GatewayConfigTest.js
@@ -557,7 +557,7 @@ describe('<AddEditGatewayButton />', () => {
       throw 'invalid type';
     }
 
-    fireEvent.click(getByText('Save And Close'));
+    fireEvent.click(getByText('Save And Continue'));
     await wait();
 
     expect(
@@ -625,6 +625,61 @@ describe('<AddEditGatewayButton />', () => {
       gatewayId: 'testGatewayID1',
       networkId: 'test',
     });
+    expect(queryByTestId('configEdit')).toBeNull();
+    expect(queryByTestId('dynamicServicesEdit')).toBeNull();
+    expect(queryByTestId('epcEdit')).toBeNull();
+    expect(queryByTestId('ranEdit')).toBeNull();
+    expect(queryByTestId('apnResourcesEdit')).toBeNull();
+    expect(queryByTestId('headerEnrichmentEdit')).not.toBeNull();
+    // Verify Header Enrichment Edit
+    const HeEnabled = getByTestId('enableHE').firstChild;
+    if (
+      HeEnabled instanceof HTMLElement &&
+      HeEnabled.firstChild instanceof HTMLElement
+    ) {
+      fireEvent.click(HeEnabled.firstChild);
+    } else {
+      throw 'invalid type';
+    }
+
+    fireEvent.click(getByText('Save And Close'));
+    await wait();
+
+    expect(
+      MagmaAPIBindings.putLteByNetworkIdGatewaysByGatewayIdCellular,
+    ).toHaveBeenCalledWith({
+      config: {
+        dns: {
+          dhcp_server_enabled: false,
+          enable_caching: false,
+          local_ttl: 0,
+          records: [],
+        },
+        epc: {
+          ip_block: '192.168.128.0/24',
+          nat_enabled: false,
+          dns_primary: '',
+          dns_secondary: '',
+          sgi_management_iface_gw: '',
+          sgi_management_iface_static_ip: '',
+          sgi_management_iface_vlan: '',
+        },
+        ran: {
+          pci: 260,
+          transmit_enabled: true,
+        },
+        he_config: {
+          enable_encryption: false,
+          enable_header_enrichment: true,
+          he_encoding_type: 'BASE64',
+          he_encryption_algorithm: 'RC4',
+          he_hash_function: 'MD5',
+          encryption_key: '',
+        },
+      },
+      gatewayId: 'testGatewayID1',
+      networkId: 'test',
+    });
   });
 
   it('Verify Gateway Ran Edit', async () => {
diff --git a/nms/app/packages/magmalte/app/views/traffic/PolicyEdit.js b/nms/app/packages/magmalte/app/views/traffic/PolicyEdit.js
index 72e8e05bf8b0..4a91b19c8662 100644
--- a/nms/app/packages/magmalte/app/views/traffic/PolicyEdit.js
+++ b/nms/app/packages/magmalte/app/views/traffic/PolicyEdit.js
@@ -27,6 +27,7 @@ import LteNetworkContext from '../../components/context/LteNetworkContext';
 import PolicyAppEdit from './PolicyApp';
 import PolicyContext from '../../components/context/PolicyContext';
 import PolicyFlowsEdit from './PolicyFlows';
+import PolicyHeaderEnrichmentEdit from './PolicyHeaderEnrichment';
 import PolicyInfoEdit from './PolicyInfo';
 import PolicyRedirectEdit from './PolicyRedirect';
 import PolicyTrackingEdit from './PolicyTracking';
@@ -39,7 +40,19 @@ import {colors} from '../../theme/default';
 import {makeStyles} from '@material-ui/styles';
 import {useContext, useEffect, useState} from 'react';
 import {useEnqueueSnackbar} from '@fbcnms/ui/hooks/useSnackbar';
-
+const DEFAULT_POLICY_RULE = {
+  qos_profile: undefined,
+  id: '',
+  priority: 1,
+  flow_list: [],
+  rating_group: 0,
+  redirect_information: {},
+  monitoring_key: '',
+  app_name: undefined,
+  app_service_type: undefined,
+  assigned_subscribers: undefined,
+  header_enrichment_targets: undefined,
+};
 const useStyles = makeStyles(() => ({
   tabBar: {
     backgroundColor: colors.primary.brightGray,
@@ -70,42 +83,22 @@ export default function PolicyRuleEditDialog(props: Props) {
   const enqueueSnackbar = useEnqueueSnackbar();
   const [error, setError] = useState('');
 
-  const [rule, setRule] = useState(
-    props.rule || {
-      qos_profile: undefined,
-      id: '',
-      priority: 1,
-      flow_list: [],
-      rating_group: 0,
-      redirect_information: {},
-      monitoring_key: '',
-      app_name: undefined,
-      app_service_type: undefined,
-      assigned_subscribers: undefined,
-    },
-  );
+  const [rule, setRule] = useState(props.rule || DEFAULT_POLICY_RULE);
 
   useEffect(() => {
-    setRule(
-      props.rule || {
-        qos_profile: undefined,
-        id: '',
-        priority: 1,
-        flow_list: [],
-        rating_group: 0,
-        redirect_information: {},
-        monitoring_key: '',
-        app_name: undefined,
-        app_service_type: undefined,
-        assigned_subscribers: undefined,
-      },
-    );
+    setRule(props.rule || DEFAULT_POLICY_RULE);
     setError('');
     setTabPos(0);
     setIsNetworkWide(false);
   }, [props.open, props.rule]);
 
-  const tabList = ['Policy', 'Flows', 'Tracking', 'Redirect'];
+  const tabList = [
+    'Policy',
+    'Flows',
+    'Tracking',
+    'Redirect',
+    'Header Enrichment',
+  ];
   if (lteNetwork?.cellular?.epc?.network_services?.includes('dpi')) {
     tabList.push('App');
   }
@@ -194,7 +187,8 @@ export default function PolicyRuleEditDialog(props: Props) {
           {tabPos === 1 && <PolicyFlowsEdit {...editProps} />}
           {tabPos === 2 && <PolicyTrackingEdit {...editProps} />}
           {tabPos === 3 && <PolicyRedirectEdit {...editProps} />}
-          {tabPos === 4 && <PolicyAppEdit {...editProps} />}
+          {tabPos === 4 && <PolicyHeaderEnrichmentEdit {...editProps} />}
+          {tabPos === 5 && <PolicyAppEdit {...editProps} />}
         </List>
       </DialogContent>
       <DialogActions>
diff --git a/nms/app/packages/magmalte/app/views/traffic/PolicyHeaderEnrichment.js b/nms/app/packages/magmalte/app/views/traffic/PolicyHeaderEnrichment.js
new file mode 100644
index 000000000000..d10e73d1a007
--- /dev/null
+++ b/nms/app/packages/magmalte/app/views/traffic/PolicyHeaderEnrichment.js
@@ -0,0 +1,109 @@
+/*
+ * Copyright 2020 The Magma Authors.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * @flow strict-local
+ * @format
+ */
+import type {policy_rule} from '@fbcnms/magma-api';
+
+import AddCircleOutline from '@material-ui/icons/AddCircleOutline';
+import DeleteIcon from '@material-ui/icons/Delete';
+import Grid from '@material-ui/core/Grid';
+import IconButton from '@material-ui/core/IconButton';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
+import ListItemText from '@material-ui/core/ListItemText';
+import OutlinedInput from '@material-ui/core/OutlinedInput';
+import Paper from '@material-ui/core/Paper';
+import React from 'react';
+import Text from '../../theme/design-system/Text';
+
+import {makeStyles} from '@material-ui/styles';
+import {policyStyles} from './PolicyStyles';
+import {useEffect, useState} from 'react';
+
+const useStyles = makeStyles(() => policyStyles);
+
+type Props = {
+  policyRule: policy_rule,
+  onChange: policy_rule => void,
+};
+
+export default function PolicyHeaderEnrichmentEdit(props: Props) {
+  const classes = useStyles();
+  const [newUrl, setNewUrl] = useState<string>('');
+  const [urlList, setUrlList] = useState<Array<string>>(
+    props.policyRule.header_enrichment_targets || [],
+  );
+
+  const addUrl = () => {
+    if (newUrl !== '' || urlList.includes(newUrl)) {
+      const newList = [...urlList, newUrl];
+      props.onChange({...props.policyRule, header_enrichment_targets: newList});
+      setNewUrl('');
+    }
+  };
+
+  const deleteUrl = (url: string) => {
+    const newList = urlList.filter(item => item !== url);
+    props.onChange({...props.policyRule, header_enrichment_targets: newList});
+  };
+
+  useEffect(
+    () => setUrlList(props.policyRule.header_enrichment_targets || []),
+    [props.policyRule],
+  );
+  return (
+    <div data-testid="headerEnrichmentEdit">
+      <Text weight="medium" variant="subtitle2" className={classes.description}>
+        {'List of URL targets for header enrichment'}
+      </Text>
+      <Grid container direction="column">
+        <Grid item xs={12} md={6}>
+          <ListItem dense disableGutters />
+          <OutlinedInput
+            data-testid="newUrl"
+            placeholder="E.g. http://example.com/"
+            value={newUrl}
+            onChange={({target}) => {
+              setNewUrl(target.value);
+            }}
+          />
+          <IconButton data-testid="addUrlButton" onClick={addUrl}>
+            <AddCircleOutline />
+          </IconButton>
+        </Grid>
+        <Grid item xs={12} md={6}>
+          {urlList.length > 0 && (
+            <List component={Paper} dense>
+              {urlList.map((url, i) => (
+                <ListItem key={i} button>
+                  <ListItemText primary={url} />
+                  <ListItemSecondaryAction>
+                    <IconButton
+                      edge="end"
+                      aria-label="delete"
+                      data-testid="deleteUrlButton"
+                      onClick={() => deleteUrl(url)}>
+                      <DeleteIcon />
+                    </IconButton>
+                  </ListItemSecondaryAction>
+                </ListItem>
+              ))}
+            </List>
+          )}
+        </Grid>
+      </Grid>
+    </div>
+  );
+}
diff --git a/nms/app/packages/magmalte/app/views/traffic/__tests__/PolicyAddEditTest.js b/nms/app/packages/magmalte/app/views/traffic/__tests__/PolicyAddEditTest.js
index c7debcafd0e9..5f312f39902e 100644
--- a/nms/app/packages/magmalte/app/views/traffic/__tests__/PolicyAddEditTest.js
+++ b/nms/app/packages/magmalte/app/views/traffic/__tests__/PolicyAddEditTest.js
@@ -255,6 +255,7 @@ describe('<TrafficDashboard />', () => {
     expect(queryByTestId('flowEdit')).toBeNull();
     expect(queryByTestId('redirectEdit')).toBeNull();
     expect(queryByTestId('trackingEdit')).toBeNull();
+    expect(queryByTestId('headerEnrichmentEdit')).toBeNull();
     expect(queryByTestId('appEdit')).toBeNull();
 
     const policyID = getByTestId('policyID').firstChild;
@@ -518,6 +519,7 @@ describe('<TrafficDashboard />', () => {
     expect(queryByTestId('flowEdit')).not.toBeNull();
     expect(queryByTestId('redirectEdit')).toBeNull();
     expect(queryByTestId('trackingEdit')).toBeNull();
+    expect(queryByTestId('headerEnrichmentEdit')).toBeNull();
     expect(queryByTestId('appEdit')).toBeNull();
 
     fireEvent.click(getByTestId('addFlowButton'));
@@ -571,6 +573,7 @@ describe('<TrafficDashboard />', () => {
     expect(queryByTestId('infoEdit')).toBeNull();
     expect(queryByTestId('flowEdit')).toBeNull();
     expect(queryByTestId('redirectEdit')).toBeNull();
+    expect(queryByTestId('headerEnrichmentEdit')).toBeNull();
 
     const ratingGroup = getByTestId('ratingGroup').firstChild;
 
@@ -599,6 +602,7 @@ describe('<TrafficDashboard />', () => {
     expect(queryByTestId('infoEdit')).toBeNull();
     expect(queryByTestId('flowEdit')).toBeNull();
     expect(queryByTestId('redirectEdit')).not.toBeNull();
+    expect(queryByTestId('headerEnrichmentEdit')).toBeNull();
 
     const serverAddress = getByTestId('serverAddress').firstChild;
 
@@ -622,6 +626,38 @@ describe('<TrafficDashboard />', () => {
       ruleId: 'test_policy_0',
       policyRule: newRule,
     });
+
+    // verify if we transition to header enrichment tab
+    expect(queryByTestId('trackingEdit')).toBeNull();
+    expect(queryByTestId('infoEdit')).toBeNull();
+    expect(queryByTestId('flowEdit')).toBeNull();
+    expect(queryByTestId('redirectEdit')).toBeNull();
+    expect(queryByTestId('headerEnrichmentEdit')).not.toBeNull();
+
+    const url = getByTestId('newUrl').firstChild;
+
+    if (url instanceof HTMLInputElement) {
+      fireEvent.change(url, {target: {value: 'http://example.com'}});
+    } else {
+      throw 'invalid type';
+    }
+    fireEvent.click(getByTestId('addUrlButton'));
+    await wait();
+
+    fireEvent.click(getByText('Save And Continue'));
+
+    await wait();
+
+    expect(
+      MagmaAPIBindings.putNetworksByNetworkIdPoliciesRulesByRuleId,
+    ).toHaveBeenCalledWith({
+      networkId,
+      ruleId: 'test_policy_0',
+      policyRule: {
+        ...newRule,
+        header_enrichment_targets: ['http://example.com'],
+      },
+    });
   });
 
   it('verify lte policy edit', async () => {
@@ -651,6 +687,7 @@ describe('<TrafficDashboard />', () => {
     expect(queryByTestId('flowEdit')).toBeNull();
     expect(queryByTestId('redirectEdit')).toBeNull();
     expect(queryByTestId('trackingEdit')).toBeNull();
+    expect(queryByTestId('headerEnrichmentEdit')).toBeNull();
     expect(queryByTestId('appEdit')).toBeNull();
 
     const prio = getByTestId('policyPriority').firstChild;