diff --git a/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx b/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
index 8786cdac6..2745ba1bf 100644
--- a/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
+++ b/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
@@ -106,14 +106,26 @@ export default function AddNewVariableButton({ children }): JSX.Element {
             id={"type-global-variables"}
           ></InputComponent>
           <Label>Value</Label>
-          <Textarea
-            value={value}
-            onChange={(e) => {
-              setValue(e.target.value);
-            }}
-            placeholder="Insert a value for the variable..."
-            className="w-full resize-none custom-scroll"
-          />
+          {type === "Credential" ? (
+            <InputComponent
+              password
+              value={value}
+              onChange={(e) => {
+                setValue(e);
+              }}
+              placeholder="Insert a value for the variable..."
+            />
+          ) : (
+            <Textarea
+              value={value}
+              onChange={(e) => {
+                setValue(e.target.value);
+              }}
+              placeholder="Insert a value for the variable..."
+              className="w-full resize-none custom-scroll"
+            />
+          )}
+
           <Label>Apply To Fields (optional)</Label>
           <InputComponent
             setSelectedOptions={(value) => setFields(value)}
diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx
index 7b178a4d7..b1b4b9ef9 100644
--- a/src/frontend/src/components/inputComponent/index.tsx
+++ b/src/frontend/src/components/inputComponent/index.tsx
@@ -76,7 +76,7 @@ export default function InputComponent({
               editNode ? " input-edit-node " : "",
               password && editNode ? "pr-8" : "",
               password && !editNode ? "pr-10" : "",
-              className!
+              className!,
             )}
             placeholder={password && editNode ? "Key" : placeholder}
             onChange={(e) => {
@@ -104,9 +104,9 @@ export default function InputComponent({
                   (selectedOption !== "" || !onChange) && setSelectedOption
                     ? selectedOption
                     : (selectedOptions?.length !== 0 || !onChange) &&
-                      setSelectedOptions
-                    ? selectedOptions?.join(", ")
-                    : value
+                        setSelectedOptions
+                      ? selectedOptions?.join(", ")
+                      : value
                 }
                 autoFocus={autoFocus}
                 disabled={disabled}
@@ -120,7 +120,7 @@ export default function InputComponent({
                 required={required}
                 className={classNames(
                   password &&
-                    selectedOption === "" &&
+                    (!setSelectedOption || selectedOption === "") &&
                     !pwdVisible &&
                     value !== ""
                     ? " text-clip password "
@@ -134,7 +134,7 @@ export default function InputComponent({
                     ? "pr-8"
                     : "",
 
-                  className!
+                  className!,
                 )}
                 placeholder={password && editNode ? "Key" : placeholder}
                 onChange={(e) => {
@@ -194,15 +194,15 @@ export default function InputComponent({
                             setSelectedOption(
                               currentValue === selectedOption
                                 ? ""
-                                : currentValue
+                                : currentValue,
                             );
                           setSelectedOptions &&
                             setSelectedOptions(
                               selectedOptions?.includes(currentValue)
                                 ? selectedOptions.filter(
-                                    (item) => item !== currentValue
+                                    (item) => item !== currentValue,
                                   )
-                                : [...selectedOptions, currentValue]
+                                : [...selectedOptions, currentValue],
                             );
                           !setSelectedOptions && setShowOptions(false);
                         }}
@@ -215,7 +215,7 @@ export default function InputComponent({
                                 selectedOption === option ||
                                   selectedOptions?.includes(option)
                                   ? "opacity-100"
-                                  : "opacity-0"
+                                  : "opacity-0",
                               )}
                             >
                               <div className="absolute opacity-100 transition-all group-hover:opacity-0">
@@ -254,7 +254,7 @@ export default function InputComponent({
                 ((selectedOptions?.length !== 0 || !onChange) &&
                   setSelectedOptions)
                 ? ""
-                : "hidden"
+                : "hidden",
             )}
             onClick={
               ((selectedOption !== "" || !onChange) && setSelectedOption) ||
@@ -275,7 +275,7 @@ export default function InputComponent({
         <span
           className={cn(
             password && selectedOption === "" ? "right-8" : "right-0",
-            "absolute inset-y-0 flex items-center pr-2.5"
+            "absolute inset-y-0 flex items-center pr-2.5",
           )}
         >
           <button
@@ -286,7 +286,7 @@ export default function InputComponent({
               selectedOption !== ""
                 ? "text-medium-indigo"
                 : "text-muted-foreground",
-              "hover:text-accent-foreground"
+              "hover:text-accent-foreground",
             )}
           >
             <ForwardedIconComponent
@@ -298,7 +298,7 @@ export default function InputComponent({
         </span>
       )}
 
-      {password && selectedOption === "" && (
+      {password && (!setSelectedOption || selectedOption === "") && (
         <button
           type="button"
           tabIndex={-1}
@@ -306,59 +306,57 @@ export default function InputComponent({
             "mb-px",
             editNode
               ? "input-component-true-button"
-              : "input-component-false-button"
+              : "input-component-false-button",
           )}
           onClick={(event) => {
             event.preventDefault();
             setPwdVisible(!pwdVisible);
           }}
         >
-          {password &&
-            selectedOption === "" &&
-            (pwdVisible ? (
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-                strokeWidth={1.5}
-                stroke="currentColor"
-                className={classNames(
-                  editNode
-                    ? "input-component-true-svg"
-                    : "input-component-false-svg"
-                )}
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"
-                />
-              </svg>
-            ) : (
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-                strokeWidth={1.5}
-                stroke="currentColor"
-                className={classNames(
-                  editNode
-                    ? "input-component-true-svg"
-                    : "input-component-false-svg"
-                )}
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"
-                />
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-                />
-              </svg>
-            ))}
+          {pwdVisible ? (
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              strokeWidth={1.5}
+              stroke="currentColor"
+              className={classNames(
+                editNode
+                  ? "input-component-true-svg"
+                  : "input-component-false-svg",
+              )}
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"
+              />
+            </svg>
+          ) : (
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              strokeWidth={1.5}
+              stroke="currentColor"
+              className={classNames(
+                editNode
+                  ? "input-component-true-svg"
+                  : "input-component-false-svg",
+              )}
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"
+              />
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+              />
+            </svg>
+          )}
         </button>
       )}
     </div>
diff --git a/src/frontend/src/components/tableComponent/index.tsx b/src/frontend/src/components/tableComponent/index.tsx
index 3404444c5..236f98067 100644
--- a/src/frontend/src/components/tableComponent/index.tsx
+++ b/src/frontend/src/components/tableComponent/index.tsx
@@ -5,32 +5,21 @@ import { ComponentPropsWithoutRef, ElementRef, forwardRef } from "react";
 import { useDarkStore } from "../../stores/darkStore";
 import "../../style/ag-theme-shadcn.css"; // Custom CSS applied to the grid
 import { cn } from "../../utils/utils";
-import { Card, CardContent } from "../ui/card";
 
 const TableComponent = forwardRef<
   ElementRef<typeof AgGridReact>,
   ComponentPropsWithoutRef<typeof AgGridReact>
->(({ pagination = true, ...props }, ref) => {
+>(({ ...props }, ref) => {
   const dark = useDarkStore((state) => state.dark);
 
   return (
-    <div className="flex h-full flex-col">
-      <div
-        className={cn(
-          dark ? "ag-theme-quartz-dark" : "ag-theme-quartz",
-          "ag-theme-shadcn flex h-full flex-col",
-        )} // applying the grid theme
-      >
-        <Card x-chunk="dashboard-04-chunk-2" className="pt-4">
-          <CardContent>
-            <AgGridReact
-              overlayNoRowsTemplate="No data available"
-              ref={ref}
-              {...props}
-            />
-          </CardContent>
-        </Card>
-      </div>
+    <div
+      className={cn(
+        dark ? "ag-theme-quartz-dark" : "ag-theme-quartz",
+        "ag-theme-shadcn flex h-full flex-col",
+      )} // applying the grid theme
+    >
+      <AgGridReact ref={ref} {...props} />
     </div>
   );
 });
diff --git a/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
index 2ca48050b..0ecdd588b 100644
--- a/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
@@ -8,6 +8,7 @@ import Dropdown from "../../../../components/dropdownComponent";
 import ForwardedIconComponent from "../../../../components/genericIconComponent";
 import TableComponent from "../../../../components/tableComponent";
 import { Badge } from "../../../../components/ui/badge";
+import { Card, CardContent } from "../../../../components/ui/card";
 import { deleteGlobalVariable } from "../../../../controllers/API";
 import useAlertStore from "../../../../stores/alertStore";
 import { useGlobalVariablesStore } from "../../../../stores/globalVariables";
@@ -81,7 +82,7 @@ export default function GlobalVariablesPage() {
       showDisabledCheckboxes: true,
       headerName: "Variable Name",
       field: "name",
-      flex: 1,
+      flex: 2,
     }, //This column will be twice as wide as the others
     {
       field: "type",
@@ -104,6 +105,7 @@ export default function GlobalVariablesPage() {
       field: "default_fields",
       flex: 1,
       editable: false,
+      resizable: false,
     },
   ]);
 
@@ -168,17 +170,23 @@ export default function GlobalVariablesPage() {
       </div>
 
       <div className="flex h-full w-full flex-col justify-between pb-8">
-        <TableComponent
-          onSelectionChanged={(event: SelectionChangedEvent) => {
-            setSelectedRows(event.api.getSelectedRows().map((row) => row.name));
-          }}
-          rowSelection="multiple"
-          suppressRowClickSelection={true}
-          domLayout="autoHeight"
-          pagination={false}
-          columnDefs={colDefs}
-          rowData={rowData}
-        />
+        <Card x-chunk="dashboard-04-chunk-2" className="h-full pt-4">
+          <CardContent className="h-full">
+            <TableComponent
+              overlayNoRowsTemplate="No data available"
+              onSelectionChanged={(event: SelectionChangedEvent) => {
+                setSelectedRows(
+                  event.api.getSelectedRows().map((row) => row.name),
+                );
+              }}
+              rowSelection="multiple"
+              suppressRowClickSelection={true}
+              pagination={true}
+              columnDefs={colDefs}
+              rowData={rowData}
+            />
+          </CardContent>
+        </Card>
       </div>
     </div>
   );
diff --git a/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx
index 65bb3387f..158bf2394 100644
--- a/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx
@@ -2,6 +2,7 @@ import { ColDef, ColGroupDef } from "ag-grid-community";
 import { useState } from "react";
 import ForwardedIconComponent from "../../../../components/genericIconComponent";
 import TableComponent from "../../../../components/tableComponent";
+import { Card, CardContent } from "../../../../components/ui/card";
 
 export default function ShortcutsPage() {
   const advancedShortcut = "Ctrl + Shift + A";
@@ -95,12 +96,16 @@ export default function ShortcutsPage() {
         </div>
       </div>
       <div className="grid gap-6 pb-8">
-        <TableComponent
-          domLayout="autoHeight"
-          pagination={false}
-          columnDefs={colDefs}
-          rowData={nodesRowData}
-        />
+        <Card x-chunk="dashboard-04-chunk-2" className="h-full pt-4">
+          <CardContent className="h-full">
+            <TableComponent
+              domLayout="autoHeight"
+              pagination={false}
+              columnDefs={colDefs}
+              rowData={nodesRowData}
+            />
+          </CardContent>
+        </Card>
       </div>
     </div>
   );