diff --git a/components/AccordionSummary/index.js b/components/AccordionSummary/index.js
index cfefcdb..d052608 100644
--- a/components/AccordionSummary/index.js
+++ b/components/AccordionSummary/index.js
@@ -1,9 +1,10 @@
 import {
-  AccordionSummary as MUIAccordionSummary, Grid, Typography, makeStyles,
+  AccordionSummary as MUIAccordionSummary, Grid, Typography, makeStyles, Tooltip, Button,
 } from '@material-ui/core';
 import PropTypes from 'prop-types';
+import { FaQuestionCircle } from 'react-icons/fa';
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles((theme) => ({
   root: {
     borderBottom: '1px solid rgba(0, 0, 0, .125)',
   },
@@ -13,9 +14,14 @@ const useStyles = makeStyles(() => ({
   subtitle: {
     color: '#a6a6a4',
   },
+  'ml-2': {
+    marginLeft: theme.spacing(2),
+  },
 }));
 
-function AccordionSummary({ title, subtitle, icon }) {
+function AccordionSummary({
+  title, subtitle, icon, tooltip = false, tooltipMessage,
+}) {
   const classes = useStyles();
 
   return (
@@ -23,10 +29,29 @@ function AccordionSummary({ title, subtitle, icon }) {
       expandIcon={icon}
       className={classes.root}
     >
-      <Grid container direction="column" align="left">
-        <Typography className={classes.heading}>{title}</Typography>
-        <Typography variant="subtitle1" className={classes.subtitle}>{subtitle}</Typography>
+      <Grid container>
+        <Grid item direction="column" align="left">
+          <Typography className={classes.heading}>
+            {title}
+          </Typography>
+          <Typography variant="subtitle1" className={classes.subtitle}>
+            {subtitle}
+          </Typography>
+        </Grid>
+
+        {tooltip
+          && (
+          <Grid item alignItems="center" style={{ display: 'flex' }}>
+            <Tooltip title={tooltipMessage} arrow>
+              <Button>
+                <FaQuestionCircle />
+              </Button>
+            </Tooltip>
+          </Grid>
+          )}
+
       </Grid>
+
     </MUIAccordionSummary>
   );
 }
@@ -40,4 +65,7 @@ AccordionSummary.propTypes = {
     PropTypes.arrayOf(PropTypes.node),
     PropTypes.node,
   ]).isRequired,
+  // TODO
+  tooltip: PropTypes.bool,
+  tooltipMessage: PropTypes.string,
 };
diff --git a/components/Editor/EnvironmentVariablesCard/index.js b/components/Editor/EnvironmentVariablesCard/index.js
index 871e82d..fc81038 100644
--- a/components/Editor/EnvironmentVariablesCard/index.js
+++ b/components/Editor/EnvironmentVariablesCard/index.js
@@ -57,6 +57,8 @@ function EnvironmentVariablesCard({ environmentVariables }) {
         icon={<ExpandMoreIcon />}
         title="Environment variables"
         subtitle="Keep Your Secrets Safe"
+        tooltip
+        tooltipMessage="Environment variables are encrypted for data protection. You will not be able to view the value after saving."
       />
       <AccordionDetails>
         <Grid container spacing={2}>
diff --git a/components/Editor/index.js b/components/Editor/index.js
index dee1315..eb7f3a3 100644
--- a/components/Editor/index.js
+++ b/components/Editor/index.js
@@ -80,6 +80,15 @@ function Editor({ bridge, isEditView }) {
     + '}',
   };
 
+  const cleanEnvironmentVariables = (values) => values.environmentVariables.map((envVar) => {
+    const cleanedEnvVar = { ...envVar };
+    if (envVar.id && envVar.value === 'XXXX-XXX-XXXX') {
+      delete cleanedEnvVar.value;
+    }
+
+    return cleanedEnvVar;
+  });
+
   const generatePayload = (values) => ({
     title: values.title,
     method: values.method,
@@ -87,7 +96,7 @@ function Editor({ bridge, isEditView }) {
     retries: values.retries,
     delay: values.delay,
     headers_attributes: values.headers,
-    environment_variables_attributes: values.environmentVariables,
+    environment_variables_attributes: cleanEnvironmentVariables(values),
     data: {
       payload: values.payloadCode,
       test_payload: values.testPayloadCode,
diff --git a/pages/bridge/[id].js b/pages/bridge/[id].js
index 11baaf0..5572bbd 100644
--- a/pages/bridge/[id].js
+++ b/pages/bridge/[id].js
@@ -22,9 +22,15 @@ export async function getServerSideProps(context) {
   const res = await fetchDataOrRedirect(context, `/bridges/${context.query.id}`);
   if (!res) return { props: {} }; // Redirecting to /users/login
 
+  const bridge = toCamel(res.data.bridge);
+  bridge.environmentVariables.forEach((envVar) => {
+    // If you change this 'XXXX-XXX-XXXX', make sure to update PayloadCard#generatePayload
+    envVar.value = 'XXXX-XXX-XXXX';
+  });
+
   return {
     props: {
-      bridge: toCamel(res.data.bridge),
+      bridge,
     },
   };
 }