diff --git a/packages/bruno-app/src/utils/codemirror/brunoVarInfo.js b/packages/bruno-app/src/utils/codemirror/brunoVarInfo.js
index d37e10bb66..045c6acf7f 100644
--- a/packages/bruno-app/src/utils/codemirror/brunoVarInfo.js
+++ b/packages/bruno-app/src/utils/codemirror/brunoVarInfo.js
@@ -6,6 +6,11 @@
  *  LICENSE file at https://github.com/graphql/codemirror-graphql/tree/v0.8.3
  */
 
+// Todo: Fix this
+// import { interpolate } from '@usebruno/common';
+import brunoCommon from '@usebruno/common';
+const { interpolate } = brunoCommon;
+
 let CodeMirror;
 const SERVER_RENDERED = typeof navigator === 'undefined' || global['PREVENT_CODEMIRROR_RENDER'] === true;
 const { get } = require('lodash');
@@ -21,7 +26,7 @@ if (!SERVER_RENDERED) {
     // str is of format {{variableName}}, extract variableName
     // we are seeing that from the gql query editor, the token string is of format variableName
     const variableName = str.replace('{{', '').replace('}}', '').trim();
-    const variableValue = get(options.variables, variableName);
+    const variableValue = interpolate(get(options.variables, variableName), options.variables);
 
     const into = document.createElement('div');
     const descriptionDiv = document.createElement('div');
diff --git a/packages/bruno-common/package.json b/packages/bruno-common/package.json
index d8e598420e..cc25f2337c 100644
--- a/packages/bruno-common/package.json
+++ b/packages/bruno-common/package.json
@@ -13,6 +13,7 @@
   "scripts": {
     "clean": "rimraf dist",
     "test": "jest",
+    "test:watch": "jest --watch",
     "prebuild": "npm run clean",
     "build": "rollup -c",
     "prepack": "npm run test && npm run build"
diff --git a/packages/bruno-common/src/interpolate/index.spec.ts b/packages/bruno-common/src/interpolate/index.spec.ts
index 9779021ee8..3f0dbbf4d7 100644
--- a/packages/bruno-common/src/interpolate/index.spec.ts
+++ b/packages/bruno-common/src/interpolate/index.spec.ts
@@ -169,3 +169,95 @@ describe('interpolate - value edge cases', () => {
     expect(result).toBe(inputString);
   });
 });
+
+describe('interpolate - recursive', () => {
+  it('should replace placeholders with 1 level of recursion with values from the object', () => {
+    const inputString = '{{user.message}}';
+    const inputObject = {
+      'user.message': 'Hello, my name is {{user.name}} and I am {{user.age}} years old',
+      'user.name': 'Bruno',
+      user: {
+        age: 4
+      }
+    };
+
+    const result = interpolate(inputString, inputObject);
+
+    expect(result).toBe('Hello, my name is Bruno and I am 4 years old');
+  });
+
+  it('should replace placeholders with 2 level of recursion with values from the object', () => {
+    const inputString = '{{user.message}}';
+    const inputObject = {
+      'user.message': 'Hello, my name is {{user.name}} and I am {{user.age}} years old',
+      'user.name': 'Bruno {{user.lastName}}',
+      'user.lastName': 'Dog',
+      user: {
+        age: 4
+      }
+    };
+
+    const result = interpolate(inputString, inputObject);
+
+    expect(result).toBe('Hello, my name is Bruno Dog and I am 4 years old');
+  });
+
+  it('should replace placeholders with 3 level of recursion with values from the object', () => {
+    const inputString = '{{user.message}}';
+    const inputObject = {
+      'user.message': 'Hello, my name is {{user.full_name}} and I am {{user.age}} years old',
+      'user.full_name': '{{user.name}} {{user.lastName}}',
+      'user.name': 'Bruno',
+      'user.lastName': 'Dog',
+      user: {
+        age: 4
+      }
+    };
+
+    const result = interpolate(inputString, inputObject);
+
+    expect(result).toBe('Hello, my name is Bruno Dog and I am 4 years old');
+  });
+
+  it('should handle missing values with 1 level of recursion by leaving the placeholders unchanged using {{}} as delimiters', () => {
+    const inputString = '{{user.message}}';
+    const inputObject = {
+      'user.message': 'Hello, my name is {{user.name}} and I am {{user.age}} years old',
+      user: {
+        age: 4
+      }
+    };
+
+    const result = interpolate(inputString, inputObject);
+
+    expect(result).toBe('Hello, my name is {{user.name}} and I am 4 years old');
+  });
+
+  it('should handle all valid keys with 1 level of recursion', () => {
+    const message = `
+  Hi, I am {{user.full_name}},
+  I am {{user.age}} years old.
+  My favorite food is {{user.fav-food[0]}} and {{user.fav-food[1]}}.
+  I like attention: {{user.want.attention}}
+`;
+    const inputObject = {
+      user: {
+        message,
+        full_name: 'Bruno',
+        age: 4,
+        'fav-food': ['egg', 'meat'],
+        'want.attention': true
+      }
+    };
+
+    const inputStr = '{{user.message}}';
+    const expectedStr = `
+  Hi, I am Bruno,
+  I am 4 years old.
+  My favorite food is egg and meat.
+  I like attention: true
+`;
+    const result = interpolate(inputStr, inputObject);
+    expect(result).toBe(expectedStr);
+  });
+});
diff --git a/packages/bruno-common/src/interpolate/index.ts b/packages/bruno-common/src/interpolate/index.ts
index 8ad86c5b1b..94b3116a22 100644
--- a/packages/bruno-common/src/interpolate/index.ts
+++ b/packages/bruno-common/src/interpolate/index.ts
@@ -18,14 +18,21 @@ const interpolate = (str: string, obj: Record<string, any>): string => {
     return str;
   }
 
-  const patternRegex = /\{\{([^}]+)\}\}/g;
   const flattenedObj = flattenObject(obj);
-  const result = str.replace(patternRegex, (match, placeholder) => {
+
+  return replace(str, flattenedObj);
+};
+
+const replace = (str: string, flattenedObj: Record<string, any>): string => {
+  const patternRegex = /\{\{([^}]+)\}\}/g;
+
+  return str.replace(patternRegex, (match, placeholder) => {
     const replacement = flattenedObj[placeholder];
+    if (patternRegex.test(replacement)) {
+      return replace(replacement, flattenedObj);
+    }
     return replacement !== undefined ? replacement : match;
   });
-
-  return result;
 };
 
 export default interpolate;