diff --git a/autogpt_platform/frontend/src/components/NodeHandle.tsx b/autogpt_platform/frontend/src/components/NodeHandle.tsx
index e42b740d3b0a..b489cccd5569 100644
--- a/autogpt_platform/frontend/src/components/NodeHandle.tsx
+++ b/autogpt_platform/frontend/src/components/NodeHandle.tsx
@@ -22,6 +22,7 @@ const NodeHandle: FC<HandleProps> = ({
   const typeName: Record<string, string> = {
     string: "text",
     number: "number",
+    integer: "integer",
     boolean: "true/false",
     object: "object",
     array: "list",
diff --git a/autogpt_platform/frontend/src/lib/utils.ts b/autogpt_platform/frontend/src/lib/utils.ts
index 029901cd8115..b4b7747d87a2 100644
--- a/autogpt_platform/frontend/src/lib/utils.ts
+++ b/autogpt_platform/frontend/src/lib/utils.ts
@@ -41,6 +41,7 @@ export function getTypeTextColor(type: string | null): string {
     {
       string: "text-green-500",
       number: "text-blue-500",
+      integer: "text-blue-500",
       boolean: "text-yellow-500",
       object: "text-purple-500",
       array: "text-indigo-500",
@@ -58,6 +59,7 @@ export function getTypeBgColor(type: string | null): string {
     {
       string: "border-green-500",
       number: "border-blue-500",
+      integer: "border-blue-500",
       boolean: "border-yellow-500",
       object: "border-purple-500",
       array: "border-indigo-500",
@@ -74,6 +76,7 @@ export function getTypeColor(type: string | null): string {
     {
       string: "#22c55e",
       number: "#3b82f6",
+      integer: "#3b82f6",
       boolean: "#eab308",
       object: "#a855f7",
       array: "#6366f1",