diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index fd1a29552..5c5e27df9 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -1084,7 +1084,7 @@ The cursor: default; property value restores the browser's default cursor style
   }
 
   .chat-message-highlight {
-    @apply my-1 rounded-md bg-indigo-100 dark:bg-indigo-900
+    @apply rounded-md bg-indigo-100 dark:bg-indigo-900
   }
 
 
diff --git a/src/frontend/src/modals/genericModal/index.tsx b/src/frontend/src/modals/genericModal/index.tsx
index 93590b423..b2cf02fdb 100644
--- a/src/frontend/src/modals/genericModal/index.tsx
+++ b/src/frontend/src/modals/genericModal/index.tsx
@@ -219,39 +219,46 @@ export default function GenericModal({
             )}
           </div>
 
-          <div className="mt-4 flex h-fit w-full items-end justify-between">
+          <div className="mt-6 flex h-fit w-full items-end justify-between">
             <div className="mb-auto flex-1">
               {type === TypeModal.PROMPT && (
-                <div className=" mr-2 max-h-20 overflow-y-auto custom-scroll">
-                  <div className="flex flex-wrap items-center">
-                    <Variable className=" -ml-px mr-1 flex h-4 w-4 text-primary"></Variable>
-                    <span className="text-md font-semibold text-primary">
-                      Input Variables:
-                    </span>
+                <div className=" mr-2">
+                  <div className="max-h-20 overflow-y-auto custom-scroll">
+                    <div className="flex flex-wrap items-center">
+                      <Variable className=" -ml-px mr-1 flex h-4 w-4 text-primary"></Variable>
+                      <span className="text-md font-semibold text-primary">
+                        Prompt Variables:
+                      </span>
 
-                    {wordsHighlight.map((word, index) => (
-                      <ShadTooltip
-                        key={getRandomKeyByssmm() + index}
-                        content={word.replace(/[{}]/g, "")}
-                        asChild={false}
-                      >
-                        <Badge
-                          key={index}
-                          variant="gray"
-                          size="md"
-                          className="m-1 max-w-[40vw] cursor-default truncate p-2.5 text-sm"
+                      {wordsHighlight.map((word, index) => (
+                        <ShadTooltip
+                          key={getRandomKeyByssmm() + index}
+                          content={word.replace(/[{}]/g, "")}
+                          asChild={false}
                         >
-                          <div className="relative bottom-[1px]">
-                            <span>
-                              {word.replace(/[{}]/g, "").length > 59
-                                ? word.replace(/[{}]/g, "").slice(0, 56) + "..."
-                                : word.replace(/[{}]/g, "")}
-                            </span>
-                          </div>
-                        </Badge>
-                      </ShadTooltip>
-                    ))}
+                          <Badge
+                            key={index}
+                            variant="gray"
+                            size="md"
+                            className="m-1 max-w-[40vw] cursor-default truncate p-2.5 text-sm"
+                          >
+                            <div className="relative bottom-[1px]">
+                              <span>
+                                {word.replace(/[{}]/g, "").length > 59
+                                  ? word.replace(/[{}]/g, "").slice(0, 56) +
+                                    "..."
+                                  : word.replace(/[{}]/g, "")}
+                              </span>
+                            </div>
+                          </Badge>
+                        </ShadTooltip>
+                      ))}
+                    </div>
                   </div>
+                  <span className="mt-1 text-xs text-muted-foreground">
+                    Prompt variables can be created with any chosen name inside
+                    curly brackets, e.g. {"{variable_name}"}
+                  </span>
                 </div>
               )}
             </div>
diff --git a/src/frontend/src/utils.ts b/src/frontend/src/utils.ts
index 4983edc60..5ae191c67 100644
--- a/src/frontend/src/utils.ts
+++ b/src/frontend/src/utils.ts
@@ -1038,10 +1038,6 @@ export const INVALID_CHARACTERS = [
 export const regexHighlight = /\{([^}]+)\}/g;
 
 export const varHighlightHTML = ({ name }: IVarHighlightType) => {
-  const html = `<div class="inline-flex items-center justify-center rounded-md font-medium text-primary bg-muted pb-1">
-  <span class='opacity-60 pl-1'>{</span>
-  <span>${name}</span>
-  <span class='opacity-60 pr-1'>}</span>
-</div>`;
+  const html = `<span class="font-semibold chat-message-highlight">{${name}}</span>`;
   return html;
 };