diff --git a/src/frontend/src/pages/GlobalVariablesPage/index.tsx b/src/frontend/src/pages/GlobalVariablesPage/index.tsx
index d02776c44..5d3b3a981 100644
--- a/src/frontend/src/pages/GlobalVariablesPage/index.tsx
+++ b/src/frontend/src/pages/GlobalVariablesPage/index.tsx
@@ -1,6 +1,7 @@
 import IconComponent from "../../components/genericIconComponent";
 import { Button } from "../../components/ui/button";
 
+import AddNewVariableButton from "../../components/addNewVariableButtonComponent/addNewVariableButton";
 import ForwardedIconComponent from "../../components/genericIconComponent";
 import TableComponent from "../../components/tableComponent";
 
@@ -11,7 +12,10 @@ export default function GlobalVariablesPage() {
         <div className="flex w-full flex-col">
           <h2 className="flex items-center text-lg font-semibold tracking-tight">
             Global Variables
-            <ForwardedIconComponent name="Globe" className="ml-2 w-5 h-5 text-primary"  />
+            <ForwardedIconComponent
+              name="Globe"
+              className="ml-2 h-5 w-5 text-primary"
+            />
           </h2>
           <p className="text-sm text-muted-foreground">
             Manage and assign global variables to default fields. You can add
@@ -19,10 +23,12 @@ export default function GlobalVariablesPage() {
           </p>
         </div>
         <div className="flex-shrink-0">
-          <Button data-testid="api-key-button-store" variant="primary">
-            <IconComponent name="Plus" className="mr-2 w-4" />
-            Add New
-          </Button>
+          <AddNewVariableButton>
+            <Button data-testid="api-key-button-store" variant="primary">
+              <IconComponent name="Plus" className="mr-2 w-4" />
+              Add New
+            </Button>
+          </AddNewVariableButton>
         </div>
       </div>