diff --git a/packages/bruno-app/src/components/EnvironmentVariablesTable/StyledWrapper.js b/packages/bruno-app/src/components/EnvironmentVariablesTable/StyledWrapper.js
index f2e058c2f1..857909527d 100644
--- a/packages/bruno-app/src/components/EnvironmentVariablesTable/StyledWrapper.js
+++ b/packages/bruno-app/src/components/EnvironmentVariablesTable/StyledWrapper.js
@@ -15,6 +15,7 @@ const Wrapper = styled.div`
     overflow-y: auto;
     border-radius: 8px;
     border: solid 1px ${(props) => props.theme.border.border0};
+    transition: height 0.15s ease;
   }
 
   table {
diff --git a/packages/bruno-app/src/components/EnvironmentVariablesTable/index.js b/packages/bruno-app/src/components/EnvironmentVariablesTable/index.js
index 7a88aefaa6..dd3a955028 100644
--- a/packages/bruno-app/src/components/EnvironmentVariablesTable/index.js
+++ b/packages/bruno-app/src/components/EnvironmentVariablesTable/index.js
@@ -20,8 +20,8 @@ const MIN_H = 35 * 2;
 const MIN_COLUMN_WIDTH = 80;
 
 const TableRow = React.memo(
-  ({ children, item }) => (
-    <tr key={item.uid} data-testid={`env-var-row-${item.name}`}>
+  ({ children, item, style, ...rest }) => (
+    <tr key={item.uid} style={style} {...rest} data-testid={`env-var-row-${item?.name}`}>
       {children}
     </tr>
   ),
@@ -56,7 +56,8 @@ const EnvironmentVariablesTable = ({
 
   const hasDraftForThisEnv = draft?.environmentUid === environment.uid;
 
-  const [tableHeight, setTableHeight] = useState(MIN_H);
+  const rowCount = (environment.variables?.length || 0) + 1;
+  const [tableHeight, setTableHeight] = useState(rowCount * 35);
 
   // Use environment UID as part of tableId so each environment has its own column widths
   const tableId = `env-vars-table-${environment.uid}`;
@@ -483,6 +484,7 @@ const EnvironmentVariablesTable = ({
         <TableVirtuoso
           className="table-container"
           style={{ height: tableHeight }}
+          overscan={200}
           components={{ TableRow }}
           data={filteredVariables}
           totalListHeightChanged={handleTotalHeightChanged}
@@ -502,7 +504,6 @@ const EnvironmentVariablesTable = ({
               <td></td>
             </tr>
           )}
-          fixedItemHeight={35}
           computeItemKey={(virtualIndex, item) => `${environment.uid}-${item.index}`}
           itemContent={(virtualIndex, { variable, index: actualIndex }) => {
             const isLastRow = actualIndex === formik.values.length - 1;
@@ -535,7 +536,7 @@ const EnvironmentVariablesTable = ({
                         id={`${actualIndex}.name`}
                         name={`${actualIndex}.name`}
                         value={variable.name}
-                        placeholder={!variable.value || (typeof variable.value === 'string' && variable.value.trim() === '') ? 'Name' : ''}
+                        placeholder={!variable.name || (typeof variable.name === 'string' && variable.name.trim() === '') ? 'Name' : ''}
                         onChange={(e) => handleNameChange(actualIndex, e)}
                         onFocus={() => handleRowFocus(variable.uid)}
                         onBlur={() => {
@@ -560,7 +561,7 @@ const EnvironmentVariablesTable = ({
                       collection={_collection}
                       name={`${actualIndex}.value`}
                       value={variable.value}
-                      placeholder={isLastEmptyRow ? 'Value' : ''}
+                      placeholder={!variable.value || (typeof variable.value === 'string' && variable.value.trim() === '') ? 'Value' : ''}
                       isSecret={variable.secret}
                       readOnly={typeof variable.value !== 'string'}
                       onChange={(newValue) => {
@@ -570,6 +571,19 @@ const EnvironmentVariablesTable = ({
                           formik.setFieldValue(`${actualIndex}.ephemeral`, undefined, false);
                           formik.setFieldValue(`${actualIndex}.persistedValue`, undefined, false);
                         }
+                        // Append a new empty row when editing value on the last row
+                        if (isLastRow) {
+                          setTimeout(() => {
+                            formik.setFieldValue(formik.values.length, {
+                              uid: uuid(),
+                              name: '',
+                              value: '',
+                              type: 'text',
+                              secret: false,
+                              enabled: true
+                            }, false);
+                          }, 0);
+                        }
                       }}
                       onSave={handleSave}
                     />
@@ -610,6 +624,8 @@ const EnvironmentVariablesTable = ({
         />
       )}
 
+      {/* We should re-think of these buttons placement in component as we use TableVirtuoso which because of
+      these buttons renders at some transition: height 0.1s ease` */}
       <div className="button-container">
         <div className="flex items-center">
           <button type="button" className="submit" onClick={handleSave} data-testid="save-env">