diff --git a/cypress/support/actions/variables/VariablesAction.ts b/cypress/support/actions/variables/VariablesAction.ts
index 54ff2969..df5b8f16 100644
--- a/cypress/support/actions/variables/VariablesAction.ts
+++ b/cypress/support/actions/variables/VariablesAction.ts
@@ -16,7 +16,7 @@ export default class VariablesAction {
   }
 
   doAddVariable(name: string, value: string) {
-    environment.getAddButton().click();
+    environment.getAddButton().first().click();
 
     cy.get('.react-select__indicator').click({ force: true });
     cy.get('#react-select-2-option-1').click();
diff --git a/src/components/AddVariable/index.js b/src/components/AddVariable/index.js
index b0b8fea7..676de2c4 100644
--- a/src/components/AddVariable/index.js
+++ b/src/components/AddVariable/index.js
@@ -3,6 +3,7 @@ import { Mutation } from 'react-apollo';
 import ButtonBootstrap from 'react-bootstrap/Button';
 import ReactSelect from 'react-select';
 
+import { LoadingOutlined } from '@ant-design/icons';
 import { Popconfirm } from 'antd';
 import withLogic from 'components/AddVariable/logic';
 import Button from 'components/Button';
@@ -31,7 +32,6 @@ export const AddVariable = ({
   varEnvironment,
   varValues,
   varTarget,
-  noVars,
   varName,
   varValue,
   varScope,
@@ -50,6 +50,9 @@ export const AddVariable = ({
   setEnvironmentErrorAlert,
   setProjectErrorAlert,
   action,
+  loading,
+  prjEnvValues,
+  envValues,
 }) => {
   const [updateName, setUpdateName] = useState(varName);
   const [updateValue, setUpdateValue] = useState(varValue);
@@ -73,22 +76,36 @@ export const AddVariable = ({
     setProjectErrorAlert ? setProjectErrorAlert(true) : setEnvironmentErrorAlert(true);
   };
 
+  const handlePermissionCheck = () => {
+    let waitForGQL = setTimeout(() => {
+      openModal();
+    }, [1000]);
+    if (prjEnvValues || envValues) {
+      clearTimeout(waitForGQL);
+      openModal();
+    }
+  };
+
   return (
     <NewVariable>
       {icon ? (
         <Button variant="white" icon={icon} action={openModal}>
           Update
         </Button>
-      ) : (
-        <ButtonBootstrap data-cy="addVariable" onClick={openModal}>
+      ) : !loading ? (
+        <ButtonBootstrap data-cy="addVariable" onClick={handlePermissionCheck}>
           Add
         </ButtonBootstrap>
+      ) : (
+        <ButtonBootstrap className="add-variable">
+          <LoadingOutlined />
+        </ButtonBootstrap>
       )}
       <Modal isOpen={open} onRequestClose={closeModal} contentLabel={`Confirm`} variant={'large'}>
         <NewVariableModal>
           <div className="variable-target">
             <span className="variable-target">
-              {noVars || !updateName ? `Add ${varTarget} Variable` : `Update ${varTarget} Variable`}
+              {!updateName ? `Add ${varTarget} Variable` : `Update ${varTarget} Variable`}
             </span>
           </div>
           <div className="var-modal">
diff --git a/src/components/EnvironmentVariables/index.js b/src/components/EnvironmentVariables/index.js
index 81e34fe4..f1332e87 100644
--- a/src/components/EnvironmentVariables/index.js
+++ b/src/components/EnvironmentVariables/index.js
@@ -132,33 +132,115 @@ const EnvironmentVariables = ({ environment, onVariableAdded }) => {
     setUpdateVarScope(rowScope);
   };
 
-  const permissionCheck = (action, index = 0) => {
+  const permissionCheck = action => {
+    getEnvVarValues();
     setOpenEnvVars(false);
     setAction(action);
-    valuesShow(index);
-    getEnvVarValues();
+  };
+
+  const renderEnvValue = (envVar, index) => {
+    if (envVar.value.length >= 0 && !valueState[index]) {
+      return hashValue(envVar.value).substring(0, 25);
+    } else if (envVar.value.length >= 100 && valueState[index]) {
+      return envVar.value.substring(0, 25) + '..';
+    } else if (envVar.value.length === 0 && valueState[index]) {
+      return <Tag color="#4578e6">Empty</Tag>;
+    } else {
+      return envVar.value;
+    }
+  };
+
+  const renderPrjValue = (projEnvVar, index) => {
+    if (projEnvVar.value.length >= 0 && !prjValueState[index]) {
+      return hashValue(projEnvVar.value).substring(0, 25);
+    } else if (projEnvVar.value.length >= 100 && prjValueState[index]) {
+      return projEnvVar.value.substring(0, 25) + '..';
+    } else if (projEnvVar.value.length === 0 && prjValueState[index]) {
+      return <Tag color="#4578e6">Empty</Tag>;
+    } else {
+      return projEnvVar.value;
+    }
+  };
+
+  const renderEnvValues = (envVar, index) => {
+    if (envLoading) {
+      return <div className="loader"></div>;
+    }
+
+    if (envVar.value !== undefined) {
+      return (
+        <Collapse in={openEnvVars}>
+          <div className="varValue" id={index}>
+            <div className="showHideContainer">
+              {renderEnvValue(envVar, index)}
+              <span onClick={!valueState[index] ? () => valuesShow(index) : () => valuesHide(index)}>
+                <Image
+                  src={!valueState[index] ? show : hide}
+                  className="showHide"
+                  data-cy="showhide-toggle"
+                  style={{ all: 'unset' }}
+                  alt=""
+                />
+              </span>
+            </div>
+            {envVar.value.length >= 100 && valueState[index] && (
+              <ViewVariableValue variableName={envVar.name} variableValue={envVar.value} />
+            )}
+          </div>
+        </Collapse>
+      );
+    }
+  };
+
+  const renderPrjValues = (projEnvVar, index) => {
+    if (prjLoading) {
+      return <div className="loader"></div>;
+    }
+
+    if (projEnvVar.value !== undefined) {
+      return (
+        <Collapse in={openPrjVars}>
+          <div className="varValue" id={index}>
+            <div className="showHideContainer">
+              {renderPrjValue(projEnvVar, index)}
+              <span onClick={!prjValueState[index] ? () => prjValuesShow(index) : () => prjValuesHide(index)}>
+                <Image
+                  src={!prjValueState[index] ? show : hide}
+                  className="showHide"
+                  data-cy="showhide-toggle"
+                  style={{ all: 'unset' }}
+                  alt=""
+                />
+              </span>
+            </div>
+            {projEnvVar.value.length >= 100 && prjValueState[index] && (
+              <ViewVariableValue variableName={projEnvVar.name} variableValue={projEnvVar.value} />
+            )}
+          </div>
+        </Collapse>
+      );
+    }
   };
 
   return (
     <StyledEnvironmentVariableDetails className="details">
-      {environment.envVariables.length === 0 ? (
-        <>
-          {environmentErrorAlert && (
-            <Alert
-              type="error"
-              closeAlert={closeEnvironmentError}
-              header="Unauthorized:"
-              message={`You don't have permission to ${action} environment ${
-                action === 'view' ? ' variable values' : 'variables'
-              }. Contact your administrator to obtain the relevant permissions.`}
-            />
-          )}
-          <div className="header no-vars">
+      <>
+        {environmentErrorAlert && (
+          <Alert
+            type="error"
+            closeAlert={closeEnvironmentError}
+            header="Unauthorized:"
+            message={`You don't have permission to ${action} environment ${
+              action === 'view' ? ' variable values' : 'variables'
+            }. Contact your administrator to obtain the relevant permissions.`}
+          />
+        )}
+        <div className="header">
+          <label>Project Variables</label>
+          <div className="header-buttons">
             <Button onClick={() => permissionCheck('add')} style={{ all: 'unset' }}>
-              {envLoading && action === 'add' ? (
-                <Button className="add-variable">
-                  <LoadingOutlined />
-                </Button>
+              {environmentErrorAlert ? (
+                <Button className="add-variable">Add</Button>
               ) : (
                 <AddVariable
                   varProject={environment.project.name}
@@ -169,56 +251,33 @@ const EnvironmentVariables = ({ environment, onVariableAdded }) => {
                   refresh={onVariableAdded}
                   setEnvironmentErrorAlert={setEnvironmentErrorAlert}
                   action="add"
+                  loading={prjLoading && action === 'add'}
+                  envValues={envValues}
                 />
               )}
             </Button>
-          </div>
-          <hr style={{ margin: '30px 0' }} />
-          <div style={{ textAlign: 'center' }}>
-            <label>No Environment variables set</label>
-          </div>
-        </>
-      ) : (
-        <>
-          {environmentErrorAlert && (
-            <Alert
-              type="error"
-              closeAlert={closeEnvironmentError}
-              header="Unauthorized:"
-              message={`You don't have permission to ${action} environment ${
-                action === 'view' ? ' variable values' : 'variables'
-              }. Contact your administrator to obtain the relevant permissions.`}
-            />
-          )}
-          <div className="header">
-            <label>Environment Variables</label>
-            <div className="header-buttons">
-              <Button onClick={() => permissionCheck('add')} style={{ all: 'unset' }}>
-                {envLoading && action === 'add' ? (
-                  <Button className="add-variable">
-                    <LoadingOutlined />
-                  </Button>
-                ) : (
-                  <AddVariable
-                    varProject={environment.project.name}
-                    varEnvironment={environment.name}
-                    varValues={displayVars}
-                    varTarget="Environment"
-                    refresh={onVariableAdded}
-                    action="add"
-                  />
-                )}
-              </Button>
+            {displayVars.length > 0 && (
               <Button
                 onClick={() => showVarValue()}
                 aria-controls="example-collapse-text"
                 data-cy="hideShowValues"
-                aria-expanded={openEnvVars}
+                aria-expanded={openPrjVars}
               >
                 {!openEnvVars ? 'Show values' : 'Hide values'}
               </Button>
-            </div>
+            )}
           </div>
+        </div>
+        {!displayVars.length && (
+          <>
+            <hr style={{ margin: '30px 0' }} />
+            <div style={{ textAlign: 'center' }}>
+              <label>No Environment variables set</label>
+            </div>
+            <hr style={{ margin: '30px 0' }} />
+          </>
+        )}
+        {displayVars.length > 0 && (
           <div className="field-wrapper env-vars">
             <StyledVariableTable>
               <div className={openEnvVars ? 'values-present table-header' : 'table-header'}>
@@ -241,93 +300,7 @@ const EnvironmentVariables = ({ environment, onVariableAdded }) => {
                       <div className={openEnvVars ? 'values-present data-row' : 'data-row'} data-cy="environment-row">
                         <div className="varName">{envVar.name}</div>
                         <div className="varScope">{envVar.scope}</div>
-                        {envLoading ? (
-                          <Collapse in={openEnvVars}>
-                            <div className="varValue" id={index}>
-                              <div className="loader"></div>
-                            </div>
-                          </Collapse>
-                        ) : envVar.value !== undefined ? (
-                          <Collapse in={openEnvVars}>
-                            <div className="varValue" id={index}>
-                              {envVar.value.length === 0 && valueState[index] ? (
-                                <div className="showHideContainer">
-                                  <Tag color="#4578e6">Empty</Tag>
-                                  <span onClick={() => valuesHide(index)}>
-                                    <Image
-                                      src={hide}
-                                      className="showHide"
-                                      data-cy="showhide-toggle"
-                                      style={{ all: 'unset' }}
-                                      alt=""
-                                    />
-                                  </span>
-                                </div>
-                              ) : envVar.value.length <= 100 && !valueState[index] ? (
-                                <div className="showHideContainer">
-                                  {hashValue(envVar.value).substring(0, 25)}
-                                  <span onClick={() => valuesShow(index)}>
-                                    <Image
-                                      src={show}
-                                      className="showHide"
-                                      data-cy="showhide-toggle"
-                                      style={{ all: 'unset' }}
-                                      alt=""
-                                    />
-                                  </span>
-                                </div>
-                              ) : envVar.value.length <= 100 && valueState[index] ? (
-                                <div className="showHideContainer">
-                                  {envVar.value}
-                                  <span onClick={() => valuesHide(index)}>
-                                    <Image
-                                      src={hide}
-                                      className="showHide"
-                                      data-cy="showhide-toggle"
-                                      style={{ all: 'unset' }}
-                                      alt=""
-                                    />
-                                  </span>
-                                </div>
-                              ) : envVar.value.length >= 100 && !valueState[index] ? (
-                                <div className="showHideContainer">
-                                  {hashValue(envVar.value).substring(0, 25)}
-                                  <span onClick={() => valuesShow(index)}>
-                                    <Image
-                                      src={show}
-                                      className="showHide"
-                                      data-cy="showhide-toggle"
-                                      style={{ all: 'unset' }}
-                                      alt=""
-                                    />
-                                  </span>
-                                </div>
-                              ) : envVar.value.length >= 100 && valueState[index] ? (
-                                <div className="showHideContainer">
-                                  ${envVar.value.substring(0, 25)}..
-                                  <span onClick={() => valuesHide(index)}>
-                                    <Image
-                                      src={hide}
-                                      className="showHide"
-                                      data-cy="showhide-toggle"
-                                      style={{ all: 'unset' }}
-                                      alt=""
-                                    />
-                                  </span>
-                                </div>
-                              ) : (
-                                `${hashValue(envVar.value).substring(0, 25)}...`
-                              )}
-                              {envVar.value.length > 100 ? (
-                                <ViewVariableValue variableName={envVar.name} variableValue={envVar.value} />
-                              ) : (
-                                ''
-                              )}
-                            </div>
-                          </Collapse>
-                        ) : (
-                          ''
-                        )}
+                        {renderEnvValues(envVar, index)}
                         <div className="varActions">
                           <VariableActions>
                             <Collapse in={openEnvVars}>
@@ -385,43 +358,29 @@ const EnvironmentVariables = ({ environment, onVariableAdded }) => {
               </div>
             </StyledVariableTable>
           </div>
-        </>
-      )}
-      {displayProjectVars.length === 0 ? (
-        <>
-          <hr style={{ margin: '30px 0' }} />
-          <div className="header no-vars">
+        )}
+      </>
+      {displayVars.length !== 0 ? <hr style={{ margin: '30px 0' }} /> : ''}
+
+      <>
+        {projectErrorAlert && (
+          <Alert
+            type="error"
+            closeAlert={closeProjectError}
+            header="Unauthorized:"
+            message="You don't have permission to view project variable values. Contact your administrator to obtain the relevant permissions."
+          />
+        )}
+        <div className="header">
+          <label>Project Variables</label>
+          <div className="header-buttons">
             <Button data-cy="addVariable">
               <ProjectVariablesLink projectSlug={environment.project.name} className="deployLink hover-state">
-                Add
+                {displayProjectVars.length !== 0 ? 'Edit' : 'Add'}
               </ProjectVariablesLink>
             </Button>
-          </div>
-          <hr style={{ margin: '30px 0' }} />
-          <div style={{ textAlign: 'center' }}>
-            <label>No Project variables set</label>
-          </div>
-          <hr style={{ margin: '30px 0' }} />
-        </>
-      ) : (
-        <>
-          <hr style={{ margin: '30px 0' }} />
-          {projectErrorAlert && (
-            <Alert
-              type="error"
-              closeAlert={closeProjectError}
-              header="Unauthorized:"
-              message="You don't have permission to view project variable values. Contact your administrator to obtain the relevant permissions."
-            />
-          )}
-          <div className="header">
-            <label>Project Variables</label>
-            <div className="header-buttons">
-              <Button>
-                <ProjectVariablesLink projectSlug={environment.project.name} className="deployLink hover-state">
-                  Edit
-                </ProjectVariablesLink>
-              </Button>
+
+            {displayProjectVars.length > 0 && (
               <Button
                 onClick={() => showPrjVarValue()}
                 aria-controls="example-collapse-text"
@@ -429,8 +388,19 @@ const EnvironmentVariables = ({ environment, onVariableAdded }) => {
               >
                 {!openPrjVars ? 'Show values' : 'Hide values'}
               </Button>
-            </div>
+            )}
           </div>
+        </div>
+        {!displayProjectVars.length && (
+          <>
+            <hr style={{ margin: '30px 0' }} />
+            <div style={{ textAlign: 'center' }}>
+              <label>No Project variables set</label>
+            </div>
+            <hr style={{ margin: '30px 0' }} />
+          </>
+        )}
+        {displayProjectVars.length > 0 && (
           <div className="field-wrapper env-vars">
             <StyledProjectVariableTable>
               <div className={openPrjVars ? 'values-present table-header' : 'table-header'}>
@@ -453,93 +423,7 @@ const EnvironmentVariables = ({ environment, onVariableAdded }) => {
                       <div className={openPrjVars ? 'values-present data-row' : 'data-row'} data-cy="environment-row">
                         <div className="varName">{projEnvVar.name}</div>
                         <div className="varScope">{projEnvVar.scope}</div>
-                        {prjLoading ? (
-                          <Collapse in={openPrjVars}>
-                            <div className="varValue" id={index}>
-                              <div className="loader"></div>
-                            </div>
-                          </Collapse>
-                        ) : projEnvVar.value !== undefined ? (
-                          <Collapse in={openPrjVars}>
-                            <div className="varValue" id={index}>
-                              {projEnvVar.value.length == 0 && prjValueState[index] ? (
-                                <div className="showHideContainer">
-                                  <Tag color="#4578e6">Empty</Tag>
-                                  <span onClick={() => prjValuesHide(index)}>
-                                    <Image
-                                      src={hide}
-                                      className="showHide"
-                                      data-cy="showhide-toggle"
-                                      style={{ all: 'unset' }}
-                                      alt=""
-                                    />
-                                  </span>
-                                </div>
-                              ) : projEnvVar.value.length <= 100 && !prjValueState[index] ? (
-                                <div className="showHideContainer">
-                                  {hashValue(projEnvVar.value).substring(0, 25)}
-                                  <span onClick={() => prjValuesShow(index)}>
-                                    <Image
-                                      src={show}
-                                      className="showHide"
-                                      data-cy="showhide-toggle"
-                                      style={{ all: 'unset' }}
-                                      alt=""
-                                    />
-                                  </span>
-                                </div>
-                              ) : projEnvVar.value.length <= 100 && prjValueState[index] ? (
-                                <div className="showHideContainer">
-                                  {projEnvVar.value}
-                                  <span onClick={() => prjValuesHide(index)}>
-                                    <Image
-                                      src={hide}
-                                      className="showHide"
-                                      data-cy="showhide-toggle"
-                                      style={{ all: 'unset' }}
-                                      alt=""
-                                    />
-                                  </span>
-                                </div>
-                              ) : projEnvVar.value.length >= 100 && !prjValueState[index] ? (
-                                <div className="showHideContainer">
-                                  {hashValue(projEnvVar.value).substring(0, 25)}
-                                  <span onClick={() => prjValuesShow(index)}>
-                                    <Image
-                                      src={show}
-                                      className="showHide"
-                                      data-cy="showhide-toggle"
-                                      style={{ all: 'unset' }}
-                                      alt=""
-                                    />
-                                  </span>
-                                </div>
-                              ) : projEnvVar.value.length >= 100 && prjValueState[index] ? (
-                                <div className="showHideContainer">
-                                  ${projEnvVar.value.substring(0, 25)}..
-                                  <span onClick={() => prjValuesHide(index)}>
-                                    <Image
-                                      src={hide}
-                                      className="showHide"
-                                      data-cy="showhide-toggle"
-                                      style={{ all: 'unset' }}
-                                      alt=""
-                                    />
-                                  </span>
-                                </div>
-                              ) : (
-                                `${hashValue(projEnvVar.value).substring(0, 25)}...`
-                              )}
-                              {projEnvVar.value.length > 100 ? (
-                                <ViewVariableValue variableName={projEnvVar.name} variableValue={projEnvVar.value} />
-                              ) : (
-                                ''
-                              )}
-                            </div>
-                          </Collapse>
-                        ) : (
-                          ''
-                        )}
+                        {renderPrjValues(projEnvVar, index)}
                       </div>
                     </Fragment>
                   );
@@ -547,8 +431,8 @@ const EnvironmentVariables = ({ environment, onVariableAdded }) => {
               </div>
             </StyledProjectVariableTable>
           </div>
-        </>
-      )}
+        )}
+      </>
     </StyledEnvironmentVariableDetails>
   );
 };
diff --git a/src/components/ProjectVariables/index.js b/src/components/ProjectVariables/index.js
index 01ac8197..29db26fd 100644
--- a/src/components/ProjectVariables/index.js
+++ b/src/components/ProjectVariables/index.js
@@ -33,7 +33,7 @@ const hashValue = value => {
   return hashedVal;
 };
 
-const ProjectVariables = ({ project, onVariableAdded, closeModal }) => {
+const ProjectVariables = ({ project, onVariableAdded }) => {
   let displayVars = project.envVariables;
   let initValueState = new Array(displayVars.length).fill(false);
 
@@ -88,82 +88,88 @@ const ProjectVariables = ({ project, onVariableAdded, closeModal }) => {
     setUpdateVarScope(rowScope);
   };
 
-  const permissionCheck = (action, index = 0) => {
+  const permissionCheck = action => {
+    getPrjEnvVarValues();
     setOpenPrjVars(false);
     setAction(action);
-    valuesShow(index);
-    getPrjEnvVarValues();
+  };
+
+  const renderValue = (projEnvVar, index) => {
+    if (projEnvVar.value.length >= 0 && !valueState[index]) {
+      return hashValue(projEnvVar.value).substring(0, 25);
+    } else if (projEnvVar.value.length >= 100 && valueState[index]) {
+      return projEnvVar.value.substring(0, 25) + '..';
+    } else if (projEnvVar.value.length === 0 && valueState[index]) {
+      return <Tag color="#4578e6">Empty</Tag>;
+    } else {
+      return projEnvVar.value;
+    }
+  };
+
+  const renderValues = (projEnvVar, index) => {
+    if (prjLoading) {
+      return <div className="loader"></div>;
+    }
+
+    if (projEnvVar.value !== undefined) {
+      return (
+        <Collapse in={openPrjVars}>
+          <div className="varValue" id={index}>
+            <div className="showHideContainer">
+              {renderValue(projEnvVar, index)}
+              <span onClick={!valueState[index] ? () => valuesShow(index) : () => valuesHide(index)}>
+                <Image
+                  src={!valueState[index] ? show : hide}
+                  className="showHide"
+                  data-cy="showhide-toggle"
+                  style={{ all: 'unset' }}
+                  alt=""
+                />
+              </span>
+            </div>
+            {projEnvVar.value.length >= 100 && valueState[index] && (
+              <ViewVariableValue variableName={projEnvVar.name} variableValue={projEnvVar.value} />
+            )}
+          </div>
+        </Collapse>
+      );
+    }
   };
 
   return (
     <StyledProjectVariablesDetails className="details">
-      {displayVars.length === 0 ? (
-        <>
-          {projectErrorAlert && (
-            <Alert
-              type="error"
-              closeAlert={closeProjectError}
-              header="Unauthorized:"
-              message={`You don't have permission to ${action} project ${
-                action === 'view' ? ' variable values' : 'variables'
-              }. Contact your administrator to obtain the relevant permissions.`}
-            />
-          )}
-          <div className="header no-vars">
-            <Button onClick={() => permissionCheck('add')} style={{ all: 'unset' }}>
-              {prjLoading && action === 'add' ? (
-                <Button className="add-variable">
-                  <LoadingOutlined />
-                </Button>
+      <>
+        {projectErrorAlert && (
+          <Alert
+            type="error"
+            closeAlert={closeProjectError}
+            header="Unauthorized:"
+            message={`You don't have permission to ${action} project ${
+              action === 'view' ? ' variable values' : 'variables'
+            }. Contact your administrator to obtain the relevant permissions.`}
+          />
+        )}
+        <div className="header">
+          <label>Project Variables</label>
+          <div className="header-buttons">
+            <Button data-cy="addVariable" onClick={() => permissionCheck('add')} style={{ all: 'unset' }}>
+              {projectErrorAlert ? (
+                <Button className="add-variable">Add</Button>
               ) : (
                 <AddVariable
                   varProject={project.name}
                   varValues={displayVars}
                   varTarget="Project"
                   refresh={onVariableAdded}
-                  noVars="Add"
                   setProjectErrorAlert={setProjectErrorAlert}
                   action="add"
+                  loading={prjLoading && action === 'add'}
+                  prjEnvValues={prjEnvValues}
                 />
               )}
             </Button>
-          </div>
-          <hr style={{ margin: '30px 0' }} />
-          <div style={{ textAlign: 'center' }}>
-            <label>No Project variables set</label>
-          </div>
-          <hr style={{ margin: '30px 0' }} />
-        </>
-      ) : (
-        <>
-          {projectErrorAlert && (
-            <Alert
-              type="error"
-              closeAlert={closeProjectError}
-              header="Unauthorized:"
-              message={`You don't have permission to ${action} project ${
-                action === 'view' ? ' variable values' : 'variables'
-              }. Contact your administrator to obtain the relevant permissions.`}
-            />
-          )}
-          <div className="header">
-            <label>Project Variables</label>
-            <div className="header-buttons">
-              <Button data-cy="addVariable" onClick={() => permissionCheck('add')} style={{ all: 'unset' }}>
-                {prjLoading && action === 'add' ? (
-                  <Button className="add-variable">
-                    <LoadingOutlined />
-                  </Button>
-                ) : (
-                  <AddVariable
-                    varProject={project.name}
-                    varValues={displayVars}
-                    varTarget="Project"
-                    refresh={onVariableAdded}
-                    action="add"
-                  />
-                )}
-              </Button>
+
+            {displayVars.length > 0 && (
               <Button
                 onClick={() => showVarValue()}
                 aria-controls="example-collapse-text"
@@ -172,8 +178,19 @@ const ProjectVariables = ({ project, onVariableAdded, closeModal }) => {
               >
                 {!openPrjVars ? 'Show values' : 'Hide values'}
               </Button>
-            </div>
+            )}
           </div>
+        </div>
+        {!displayVars.length && (
+          <>
+            <hr style={{ margin: '30px 0' }} />
+            <div style={{ textAlign: 'center' }}>
+              <label>No Project variables set</label>
+            </div>
+            <hr style={{ margin: '30px 0' }} />
+          </>
+        )}
+        {displayVars.length > 0 && (
           <div className="field-wrapper env-vars">
             <StyledProjectVariableTable>
               <div className={openPrjVars ? 'values-present table-header' : 'table-header'}>
@@ -196,93 +213,7 @@ const ProjectVariables = ({ project, onVariableAdded, closeModal }) => {
                       <div className={openPrjVars ? 'values-present data-row' : 'data-row'} data-cy="environment-row">
                         <div className="varName">{projEnvVar.name}</div>
                         <div className="varScope">{projEnvVar.scope}</div>
-                        {prjLoading ? (
-                          <Collapse in={openPrjVars}>
-                            <div className="varValue" id={index}>
-                              <div className="loader"></div>
-                            </div>
-                          </Collapse>
-                        ) : projEnvVar.value !== undefined ? (
-                          <Collapse in={openPrjVars}>
-                            <div className="varValue" id={index}>
-                              {projEnvVar.value.length === 0 && valueState[index] ? (
-                                <div className="showHideContainer">
-                                  <Tag color="#4578e6">Empty</Tag>
-                                  <span onClick={() => valuesHide(index)}>
-                                    <Image
-                                      src={hide}
-                                      className="showHide"
-                                      data-cy="showhide-toggle"
-                                      style={{ all: 'unset' }}
-                                      alt=""
-                                    />
-                                  </span>
-                                </div>
-                              ) : projEnvVar.value.length <= 100 && !valueState[index] ? (
-                                <div className="showHideContainer">
-                                  {hashValue(projEnvVar.value).substring(0, 25)}
-                                  <span onClick={() => valuesShow(index)}>
-                                    <Image
-                                      src={show}
-                                      className="showHide"
-                                      data-cy="showhide-toggle"
-                                      style={{ all: 'unset' }}
-                                      alt=""
-                                    />
-                                  </span>
-                                </div>
-                              ) : projEnvVar.value.length <= 100 && valueState[index] ? (
-                                <div className="showHideContainer">
-                                  {projEnvVar.value}
-                                  <span onClick={() => valuesHide(index)}>
-                                    <Image
-                                      src={hide}
-                                      className="showHide"
-                                      data-cy="showhide-toggle"
-                                      style={{ all: 'unset' }}
-                                      alt=""
-                                    />
-                                  </span>
-                                </div>
-                              ) : projEnvVar.value.length >= 100 && !valueState[index] ? (
-                                <div className="showHideContainer">
-                                  {hashValue(projEnvVar.value).substring(0, 25)}
-                                  <span onClick={() => valuesShow(index)}>
-                                    <Image
-                                      src={show}
-                                      className="showHide"
-                                      data-cy="showhide-toggle"
-                                      style={{ all: 'unset' }}
-                                      alt=""
-                                    />
-                                  </span>
-                                </div>
-                              ) : projEnvVar.value.length >= 100 && valueState[index] ? (
-                                <div className="showHideContainer">
-                                  ${projEnvVar.value.substring(0, 25)}..
-                                  <span onClick={() => valuesHide(index)}>
-                                    <Image
-                                      src={hide}
-                                      className="showHide"
-                                      data-cy="showhide-toggle"
-                                      style={{ all: 'unset' }}
-                                      alt=""
-                                    />
-                                  </span>
-                                </div>
-                              ) : (
-                                `${hashValue(projEnvVar.value).substring(0, 25)}...`
-                              )}
-                              {projEnvVar.value.length > 100 ? (
-                                <ViewVariableValue variableName={projEnvVar.name} variableValue={projEnvVar.value} />
-                              ) : (
-                                ''
-                              )}
-                            </div>
-                          </Collapse>
-                        ) : (
-                          ''
-                        )}
+                        {renderValues(projEnvVar, index)}
                         <div className="varActions">
                           <VariableActions>
                             <Collapse in={openPrjVars}>
@@ -338,8 +269,8 @@ const ProjectVariables = ({ project, onVariableAdded, closeModal }) => {
               </div>
             </StyledProjectVariableTable>
           </div>
-        </>
-      )}
+        )}
+      </>
     </StyledProjectVariablesDetails>
   );
 };