diff --git a/packages/hoppscotch-app/components/http/Request.vue b/packages/hoppscotch-app/components/http/Request.vue
index d2d1b1385..f9600f608 100644
--- a/packages/hoppscotch-app/components/http/Request.vue
+++ b/packages/hoppscotch-app/components/http/Request.vue
@@ -348,7 +348,8 @@ const newSendRequest = async () => {
 const ensureMethodInEndpoint = () => {
   if (
     !/^http[s]?:\/\//.test(newEndpoint.value) &&
-    !newEndpoint.value.startsWith("<<")
+    !newEndpoint.value.startsWith("<<") &&
+    !newEndpoint.value.startsWith("{{")
   ) {
     const domain = newEndpoint.value.split(/[/:#?]+/)[0]
     if (domain === "localhost" || /([0-9]+\.)*[0-9]/.test(domain)) {
diff --git a/packages/hoppscotch-app/components/http/Variables.vue b/packages/hoppscotch-app/components/http/Variables.vue
index 0590a6a47..25fcb08da 100644
--- a/packages/hoppscotch-app/components/http/Variables.vue
+++ b/packages/hoppscotch-app/components/http/Variables.vue
@@ -3,7 +3,7 @@
     <div
       class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
     >
-      <label class="font-semibold text-secondaryLight"> Variables </label>
+      <label class="font-semibold text-secondaryLight"> My Variables </label>
       <div class="flex">
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
@@ -15,28 +15,28 @@
     </div>
     <div>
       <div
-        v-for="(vari, index) in workingVars"
-        :key="`vari-${vari.id}-${index}`"
+        v-for="(variable, index) in workingVars"
+        :key="`vari-${variable.id}-${index}`"
         class="flex border-b divide-x divide-dividerLight border-dividerLight draggable-content group"
       >
         <SmartEnvInput
-          v-model="vari.key"
+          v-model="variable.key"
           :placeholder="`${t('count.parameter', { count: index + 1 })}`"
           @change="
             updateVar(index, {
-              id: vari.id,
+              id: variable.id,
               key: $event,
-              value: vari.value,
+              value: variable.value,
             })
           "
         />
         <SmartEnvInput
-          v-model="vari.value"
+          v-model="variable.value"
           :placeholder="`${t('count.value', { count: index + 1 })}`"
           @change="
             updateVar(index, {
-              id: vari.id,
-              key: vari.key,
+              id: variable.id,
+              key: variable.key,
               value: $event,
             })
           "
diff --git a/packages/hoppscotch-app/helpers/RequestRunner.ts b/packages/hoppscotch-app/helpers/RequestRunner.ts
index 9d8722424..a6e38ce81 100644
--- a/packages/hoppscotch-app/helpers/RequestRunner.ts
+++ b/packages/hoppscotch-app/helpers/RequestRunner.ts
@@ -77,7 +77,6 @@ export const runRESTRequest$ = (): TaskEither<
         name: "Env",
         variables: combineEnvVariables(envs),
       })
-      console.log("effectiveRequest", effectiveRequest)
 
       const stream = createRESTNetworkRequestStream(effectiveRequest)
 
diff --git a/packages/hoppscotch-app/helpers/utils/EffectiveURL.ts b/packages/hoppscotch-app/helpers/utils/EffectiveURL.ts
index e8e8e08ff..32f10aa56 100644
--- a/packages/hoppscotch-app/helpers/utils/EffectiveURL.ts
+++ b/packages/hoppscotch-app/helpers/utils/EffectiveURL.ts
@@ -14,7 +14,7 @@ import {
   HoppRESTHeader,
   HoppRESTParam,
 } from "@hoppscotch/data"
-import { parseTemplateStringV } from "@hoppscotch/data/src/pathVariables"
+import { parseTemplateStringV } from "@hoppscotch/data/src/variables"
 import { arrayFlatMap, arraySort } from "../functional/array"
 import { toFormData } from "../functional/formData"
 import { tupleToRecord } from "../functional/record"
diff --git a/packages/hoppscotch-data/src/variables.ts b/packages/hoppscotch-data/src/variables.ts
new file mode 100644
index 000000000..239a8d2ac
--- /dev/null
+++ b/packages/hoppscotch-data/src/variables.ts
@@ -0,0 +1,78 @@
+import { pipe } from "fp-ts/function"
+import * as E from "fp-ts/Either"
+import {parseTemplateStringE} from "./environment";
+
+export type Environment = {
+  name: string
+  variables: {
+    key: string
+    value: string
+  }[]
+}
+
+export type Variables = {
+  key: string
+  value: string
+}[]
+
+const REGEX_ENV_VAR = /<<([^>]*)>>/g // "<<myVariable>>"
+const REGEX_MY_VAR = /{{([^}]*)}}/g // "{{myVariable}}"
+
+/**
+ * How much times can we expand environment variables
+ */
+const ENV_MAX_EXPAND_LIMIT = 10
+
+/**
+ * Error state when there is a suspected loop while
+ * recursively expanding variables
+ */
+const ENV_EXPAND_LOOP = "ENV_EXPAND_LOOP" as const
+
+export function parseTemplateStringEV(
+  str: string,
+  variables: Environment["variables"],
+  myVariables: Variables
+) {
+  if (!variables || !str || !myVariables) {
+    return E.right(str)
+  }
+
+  let result = str
+  let depth = 0
+
+  while (result.match(REGEX_ENV_VAR) != null && depth <= ENV_MAX_EXPAND_LIMIT) {
+    result = decodeURI(encodeURI(result)).replace(
+      REGEX_ENV_VAR,
+      (_, p1) => variables.find((x) => x.key === p1)?.value || ""
+    )
+    depth++
+  }
+
+  /**
+   * TODO: Create an error state when there is a suspected loop while recursively expanding these variables
+   */
+  while (result.match(REGEX_MY_VAR) != null && depth <= ENV_MAX_EXPAND_LIMIT) {
+    result = decodeURI(encodeURI(result)).replace(
+      REGEX_MY_VAR,
+      (_, p1) => myVariables.find((x) => x.key === p1)?.value || ""
+    )
+  }
+
+  return depth > ENV_MAX_EXPAND_LIMIT
+    ? E.left(ENV_EXPAND_LOOP)
+    : E.right(result)
+}
+
+/**
+ * @deprecated Use `parseTemplateStringEV` instead
+ */
+export const parseTemplateStringV = (
+  str: string,
+  variables: Environment["variables"],
+  myVariables: Variables
+) =>
+  pipe(
+    parseTemplateStringEV(str, variables, myVariables),
+    E.getOrElse(() => str)
+  )