diff --git a/components/http/Request.vue b/components/http/Request.vue
index 5bcf4705..b89ce77d 100644
--- a/components/http/Request.vue
+++ b/components/http/Request.vue
@@ -99,7 +99,7 @@
             icon="import_export"
             @click.native="
               showCurlImportModal = !showCurlImportModal
-              $refs.sendOptions.tippy().hide()
+              sendOptions.tippy().hide()
             "
           />
           <SmartItem
@@ -107,7 +107,7 @@
             icon="code"
             @click.native="
               showCodegenModal = !showCodegenModal
-              $refs.sendOptions.tippy().hide()
+              sendOptions.tippy().hide()
             "
           />
           <SmartItem
@@ -116,7 +116,7 @@
             icon="clear_all"
             @click.native="
               clearContent()
-              $refs.sendOptions.tippy().hide()
+              sendOptions.tippy().hide()
             "
           />
         </tippy>
@@ -158,7 +158,7 @@
             :icon="hasNavigatorShare ? 'share' : 'content_copy'"
             @click.native="
               copyRequest()
-              $refs.saveOptions.tippy().hide()
+              saveOptions.tippy().hide()
             "
           />
           <SmartItem
@@ -167,7 +167,7 @@
             icon="create_new_folder"
             @click.native="
               showSaveRequestModal = true
-              $refs.saveOptions.tippy().hide()
+              saveOptions.tippy().hide()
             "
           />
         </tippy>
@@ -240,7 +240,10 @@ export default defineComponent({
 
     const hasNavigatorShare = !!navigator.share
 
-    const options = ref<Vue | null>(null)
+    // Template refs
+    //
+    const options = ref<any | null>(null)
+    const saveOptions = ref<any | null>(null)
 
     const newSendRequest = () => {
       loading.value = true
@@ -276,7 +279,7 @@ export default defineComponent({
     const onSelectMethod = (method: string) => {
       updateMethod(method)
       // Vue-tippy has no typescript support yet
-      ;(options.value as any).tippy().hide()
+      options.value.tippy().hide()
     }
 
     const clearContent = () => {
@@ -365,7 +368,9 @@ export default defineComponent({
 
       EXPERIMENTAL_URL_BAR_ENABLED: useSetting("EXPERIMENTAL_URL_BAR_ENABLED"),
 
+      // Template refs
       options,
+      saveOptions,
     }
   },
 })
diff --git a/helpers/templating.js b/helpers/templating.js
deleted file mode 100644
index 19bbac27..00000000
--- a/helpers/templating.js
+++ /dev/null
@@ -1,10 +0,0 @@
-export default function parseTemplateString(string, variables) {
-  if (!variables || !string) {
-    return string
-  }
-  const searchTerm = /<<([^>]*)>>/g // "<<myVariable>>"
-  return decodeURI(encodeURI(string)).replace(
-    searchTerm,
-    (_, p1) => variables[p1] || ""
-  )
-}
diff --git a/helpers/templating.ts b/helpers/templating.ts
new file mode 100644
index 00000000..073a764f
--- /dev/null
+++ b/helpers/templating.ts
@@ -0,0 +1,15 @@
+import { Environment } from "~/newstore/environments"
+
+export default function parseTemplateString(
+  str: string,
+  variables: Environment["variables"]
+) {
+  if (!variables || !str) {
+    return str
+  }
+  const searchTerm = /<<([^>]*)>>/g // "<<myVariable>>"
+  return decodeURI(encodeURI(str)).replace(
+    searchTerm,
+    (_, p1) => variables.find((x) => x.key === p1)?.value || ""
+  )
+}
diff --git a/helpers/utils/EffectiveURL.ts b/helpers/utils/EffectiveURL.ts
index f7afa291..9c9a37b4 100644
--- a/helpers/utils/EffectiveURL.ts
+++ b/helpers/utils/EffectiveURL.ts
@@ -1,6 +1,7 @@
 import { combineLatest, Observable } from "rxjs"
 import { map } from "rxjs/operators"
 import { HoppRESTRequest } from "../types/HoppRESTRequest"
+import parseTemplateString from "../templating"
 import { Environment } from "~/newstore/environments"
 
 export interface EffectiveHoppRESTRequest extends HoppRESTRequest {
@@ -24,22 +25,37 @@ export interface EffectiveHoppRESTRequest extends HoppRESTRequest {
  */
 export function getEffectiveRESTRequest(
   request: HoppRESTRequest,
-  _environment: Environment
+  environment: Environment
 ): EffectiveHoppRESTRequest {
-  // TODO: Change this
   return {
     ...request,
-    effectiveFinalURL: request.endpoint,
-    effectiveFinalHeaders: request.headers.filter(
-      (x) =>
-        x.key !== "" && // Remove empty keys
-        x.active // Only active
-    ),
-    effectiveFinalParams: request.params.filter(
-      (x) =>
-        x.key !== "" && // Remove empty keys
-        x.active // Only active
+    effectiveFinalURL: parseTemplateString(
+      request.endpoint,
+      environment.variables
     ),
+    effectiveFinalHeaders: request.headers
+      .filter(
+        (x) =>
+          x.key !== "" && // Remove empty keys
+          x.active // Only active
+      )
+      .map((x) => ({
+        // Parse out environment template strings
+        active: true,
+        key: parseTemplateString(x.key, environment.variables),
+        value: parseTemplateString(x.value, environment.variables),
+      })),
+    effectiveFinalParams: request.params
+      .filter(
+        (x) =>
+          x.key !== "" && // Remove empty keys
+          x.active // Only active
+      )
+      .map((x) => ({
+        active: true,
+        key: parseTemplateString(x.key, environment.variables),
+        value: parseTemplateString(x.value, environment.variables),
+      })),
   }
 }