diff --git a/frontend/components/dashboard/DashboardInputField.js b/frontend/components/dashboard/DashboardInputField.js
index eb4934c08..bba626207 100644
--- a/frontend/components/dashboard/DashboardInputField.js
+++ b/frontend/components/dashboard/DashboardInputField.js
@@ -1,9 +1,11 @@
-import React from "react";
+import React, { useRef } from "react";
 import { faCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import guidGenerator from "../utilities/randomId";
 
+const REGEX = /([$]{.*?})/g;
+
 /**
  * This function splits the input of a dashboard field into the parts that are inside and outside of ${...}
  * @param {string} text - the value of the input in the Dashboard Input Field
@@ -73,55 +75,53 @@ const DashboardInputField = ({
       </div>
     );
   } else if (type === "value") {
+    const ref = useRef(null);
+  
+    const syncScroll = (e) => {
+      ref.current.scrollTop = e.target.scrollTop;
+      ref.current.scrollLeft = e.target.scrollLeft;
+    };
+
     return (
       <div className="flex-col w-full">
         <div
           className={`group relative flex flex-col justify-center w-full max-w-2xl border border-mineshaft-500 rounded-md`}
         >
           <input
-            onChange={(e) => onChangeHandler(e.target.value, index)}
-            type={type}
             value={value}
+            onChange={(e) => setValue(e.target.value)}
+            onScroll={syncScroll}
             className={`${
               blurred
                 ? "text-transparent group-hover:text-transparent focus:text-transparent active:text-transparent"
                 : ""
             } asolute z-10 peer font-mono ph-no-capture bg-transparent rounded-md caret-white text-transparent text-md px-2 py-1.5 w-full min-w-16 outline-none focus:ring-2 focus:ring-primary/50 duration-200`}
             spellCheck="false"
+            placeholder="This is a placeholder!"
           />
-          <div
+          <div 
+            ref={ref} 
             className={`${
               blurred
                 ? "text-bunker-800 group-hover:text-gray-400 peer-focus:text-gray-400 peer-active:text-gray-400"
                 : ""
-            } flex flex-row font-mono absolute z-0 ph-no-capture bg-bunker-800 h-9 rounded-md text-gray-400 text-md px-2 py-1.5 w-full min-w-16 outline-none focus:ring-2 focus:ring-primary/50 duration-100`}
+            } flex flex-row font-mono absolute z-0 ph-no-capture max-w-2xl overflow-x-scroll bg-bunker-800 h-9 rounded-md text-gray-400 text-md px-2 py-1.5 w-full min-w-16 outline-none focus:ring-2 focus:ring-primary/50 duration-100`}
           >
-            {findReferences(value).map((texts, id) => {
-              if (id % 2 == 0 || texts.length <= 2) {
-                return (
-                  <span className="ph-no-capture" key={id}>
-                    {texts}
-                  </span>
-                );
-              }
-              return (
-                <span className="ph-no-capture text-yellow" key={id}>
-                  {texts.slice(0, 2)}
-                  <span className="ph-no-capture text-yellow-200/80">
-                    {texts.slice(2, texts.length - 1)}
-                  </span>
-                  {texts.slice(texts.length - 1, texts.length) == "}" ? (
-                    <span className="ph-no-capture text-yellow">
-                      {texts.slice(texts.length - 1, texts.length)}{" "}
+            {
+              value
+              .split(REGEX)
+              .map((word, i) => {
+                if (word.match(REGEX) !== null) {
+                  return (
+                    <span key={i} className="text-yellow-400">
+                      {word}
                     </span>
-                  ) : (
-                    <span className="ph-no-capture text-yellow-400">
-                      {texts.slice(texts.length - 1, texts.length)}{" "}
-                    </span>
-                  )}
-                </span>
-              );
-            })}
+                  );
+                } else {
+                  return <span key={i}>{word}</span>;
+                }
+              })
+            }
           </div>
           {blurred && (
             <div className="z-20 peer pr-2 bg-bunker-800 group-hover:hidden peer-hover:hidden peer-focus:hidden peer-active:invisible absolute h-9 w-fit max-w-xl rounded-md flex items-center text-gray-400/50 text-clip overflow-hidden">
@@ -137,7 +137,7 @@ const DashboardInputField = ({
                   />
                 ))}
             </div>
-          )}
+          )} 
         </div>
       </div>
     );