diff --git a/src/frontend/src/components/chatComponent/chatMessage/index.tsx b/src/frontend/src/components/chatComponent/chatMessage/index.tsx
index 53445e13f..55badac86 100644
--- a/src/frontend/src/components/chatComponent/chatMessage/index.tsx
+++ b/src/frontend/src/components/chatComponent/chatMessage/index.tsx
@@ -28,7 +28,7 @@ export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
               <div
                 onClick={() => setHidden((prev) => !prev)}
                 style={{ backgroundColor: nodeColors["thought"] }}
-                className="inline-block w-full cursor-pointer px-5 pb-3 pt-3 text-start"
+                className=" inline-block w-full cursor-pointer px-5 pb-3 pt-3 text-start"
                 dangerouslySetInnerHTML={{
                   __html: DOMPurify.sanitize(convert.toHtml(chat.thought)),
                 }}
diff --git a/src/frontend/src/components/codeAreaComponent/index.tsx b/src/frontend/src/components/codeAreaComponent/index.tsx
index 0365dc66e..0863277c6 100644
--- a/src/frontend/src/components/codeAreaComponent/index.tsx
+++ b/src/frontend/src/components/codeAreaComponent/index.tsx
@@ -3,7 +3,12 @@ import { PopUpContext } from "../../contexts/popUpContext";
 import CodeAreaModal from "../../modals/codeAreaModal";
 import TextAreaModal from "../../modals/textAreaModal";
 import { TextAreaComponentType } from "../../types/components";
-import { INPUT_STYLE } from "../../constants";
+import {
+  INPUT_DIALOG,
+  INPUT_DISABLE,
+  INPUT_EDIT_NODE,
+  INPUT_STYLE,
+} from "../../constants";
 import { ExternalLink } from "lucide-react";
 
 export default function CodeAreaComponent({
@@ -48,11 +53,8 @@ export default function CodeAreaComponent({
           }}
           className={
             editNode
-              ? "form-input block w-full cursor-pointer truncate rounded-md border border-ring bg-transparent pb-0.5 pt-0.5 text-sm text-ring shadow-sm placeholder:text-center sm:text-sm" +
-                INPUT_STYLE
-              : "block w-full truncate rounded-md border border-ring px-3 py-2 text-ring shadow-sm placeholder:text-muted-foreground sm:text-sm" +
-                INPUT_STYLE +
-                (disabled ? " bg-input" : "")
+              ? INPUT_EDIT_NODE + INPUT_DIALOG
+              : INPUT_STYLE + INPUT_DIALOG + (disabled ? INPUT_DISABLE : "")
           }
         >
           {myValue !== "" ? myValue : "Type something..."}
diff --git a/src/frontend/src/components/dropdownComponent/index.tsx b/src/frontend/src/components/dropdownComponent/index.tsx
index 4e8c06781..27d355cd2 100644
--- a/src/frontend/src/components/dropdownComponent/index.tsx
+++ b/src/frontend/src/components/dropdownComponent/index.tsx
@@ -2,7 +2,7 @@ import { Listbox, Transition } from "@headlessui/react";
 import { Fragment, useContext, useEffect, useState } from "react";
 import { DropDownComponentType } from "../../types/components";
 import { classNames } from "../../utils";
-import { INPUT_STYLE } from "../../constants";
+import { INPUT_EDIT_NODE, INPUT_STYLE } from "../../constants";
 import { ChevronsUpDown, Check } from "lucide-react";
 import { PopUpContext } from "../../contexts/popUpContext";
 import { TabsContext } from "../../contexts/tabsContext";
@@ -40,10 +40,8 @@ export default function Dropdown({
               <Listbox.Button
                 className={
                   editNode
-                    ? "form-input relative block w-full rounded-md border pb-0.5 pr-8 pt-0.5 shadow-sm placeholder:text-center sm:text-sm" +
-                      INPUT_STYLE
-                    : "w-full rounded-md border py-2 pl-3 pr-10 text-left shadow-sm placeholder:text-muted-foreground focus-visible:outline-none sm:text-sm" +
-                      INPUT_STYLE
+                    ? "border-1 relative pr-8" + INPUT_EDIT_NODE
+                    : "py-2 pl-3 pr-10 text-left" + INPUT_STYLE
                 }
               >
                 <span className="block w-full truncate bg-background">
diff --git a/src/frontend/src/components/floatComponent/index.tsx b/src/frontend/src/components/floatComponent/index.tsx
index 4b80a365f..b725c7490 100644
--- a/src/frontend/src/components/floatComponent/index.tsx
+++ b/src/frontend/src/components/floatComponent/index.tsx
@@ -1,7 +1,7 @@
 import { useContext, useEffect, useState } from "react";
 import { FloatComponentType } from "../../types/components";
 import { TabsContext } from "../../contexts/tabsContext";
-import { INPUT_STYLE } from "../../constants";
+import { INPUT_DISABLE, INPUT_EDIT_NODE, INPUT_STYLE } from "../../constants";
 import { PopUpContext } from "../../contexts/popUpContext";
 
 export default function FloatComponent({
@@ -58,11 +58,8 @@ export default function FloatComponent({
         value={myValue}
         className={
           editNode
-            ? "form-input block w-full rounded-md border border-border pb-0.5 pt-0.5 text-center shadow-sm placeholder:text-center placeholder:text-muted-foreground focus:placeholder-transparent sm:text-sm" +
-              INPUT_STYLE
-            : "form-input block w-full rounded-md border-border bg-background shadow-sm ring-offset-input placeholder:text-muted-foreground focus:placeholder-transparent sm:text-sm" +
-              INPUT_STYLE +
-              (disabled ? " bg-input" : "")
+            ? INPUT_EDIT_NODE
+            : INPUT_STYLE + (disabled ? INPUT_DISABLE : "")
         }
         placeholder={
           editNode ? "Number 0 to 1" : "Type a number from zero to one"
diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx
index 125f260ac..b8db68274 100644
--- a/src/frontend/src/components/inputComponent/index.tsx
+++ b/src/frontend/src/components/inputComponent/index.tsx
@@ -3,7 +3,7 @@ import { InputComponentType } from "../../types/components";
 import { classNames } from "../../utils";
 import { TabsContext } from "../../contexts/tabsContext";
 import { PopUpContext } from "../../contexts/popUpContext";
-import { INPUT_STYLE } from "../../constants";
+import { INPUT_DISABLE, INPUT_EDIT_NODE, INPUT_STYLE } from "../../constants";
 
 export default function InputComponent({
   value,
@@ -46,13 +46,10 @@ export default function InputComponent({
           if (disableCopyPaste) setDisableCopyPaste(false);
         }}
         className={classNames(
-          "form-input block w-full rounded-md border-ring bg-background pr-12 shadow-sm placeholder:text-muted-foreground focus:placeholder-transparent sm:text-sm",
-          disabled ? " bg-input" : "",
+          " pr-12 ",
+          disabled ? INPUT_DISABLE : "",
           password && !pwdVisible && myValue !== "" ? "password" : "",
-          editNode
-            ? "form-input block w-full rounded-md border border-ring pb-0.5 pt-0.5 text-center shadow-sm sm:text-sm" +
-                INPUT_STYLE
-            : "ring-offset-input" + INPUT_STYLE,
+          editNode ? INPUT_EDIT_NODE : INPUT_STYLE,
           password && editNode ? "pr-8" : "pr-3"
         )}
         placeholder={password && editNode ? "Key" : "Type something..."}
diff --git a/src/frontend/src/components/inputFileComponent/index.tsx b/src/frontend/src/components/inputFileComponent/index.tsx
index 9c0cf045a..7284d5265 100644
--- a/src/frontend/src/components/inputFileComponent/index.tsx
+++ b/src/frontend/src/components/inputFileComponent/index.tsx
@@ -2,7 +2,7 @@ import { useContext, useEffect, useState } from "react";
 import { alertContext } from "../../contexts/alertContext";
 import { FileComponentType } from "../../types/components";
 import { TabsContext } from "../../contexts/tabsContext";
-import { INPUT_STYLE } from "../../constants";
+import { INPUT_DISABLE, INPUT_EDIT_NODE, INPUT_STYLE } from "../../constants";
 import { FileSearch2 } from "lucide-react";
 import { uploadFile } from "../../controllers/API";
 
@@ -103,11 +103,8 @@ export default function InputFileComponent({
           onClick={handleButtonClick}
           className={
             editNode
-              ? "form-input block w-full truncate rounded-md border border-ring pb-0.5   pt-0.5 text-ring shadow-sm placeholder:text-center sm:text-sm" +
-                INPUT_STYLE
-              : "block w-full truncate rounded-md  border border-ring px-3 py-2 text-ring shadow-sm sm:text-sm" +
-                INPUT_STYLE +
-                (disabled ? " bg-input" : "")
+              ? INPUT_EDIT_NODE + INPUT_STYLE
+              : INPUT_STYLE + (disabled ? INPUT_DISABLE : "")
           }
         >
           {myValue !== "" ? myValue : "No file"}
diff --git a/src/frontend/src/components/inputListComponent/index.tsx b/src/frontend/src/components/inputListComponent/index.tsx
index db8731f35..0410a07d9 100644
--- a/src/frontend/src/components/inputListComponent/index.tsx
+++ b/src/frontend/src/components/inputListComponent/index.tsx
@@ -3,7 +3,7 @@ import { InputListComponentType } from "../../types/components";
 import { TabsContext } from "../../contexts/tabsContext";
 
 import _ from "lodash";
-import { INPUT_STYLE } from "../../constants";
+import { INPUT_DISABLE, INPUT_EDIT_NODE, INPUT_STYLE } from "../../constants";
 import { X, Plus } from "lucide-react";
 import { PopUpContext } from "../../contexts/popUpContext";
 
@@ -35,60 +35,57 @@ export default function InputListComponent({
         "flex flex-col gap-3 py-2"
       }
     >
-      {inputList.map((i, idx) => (
-        <div key={idx} className="flex w-full gap-3">
-          <input
-            type="text"
-            value={i}
-            className={
-              editNode
-                ? "form-input  block w-full cursor-pointer truncate rounded-md border-[1px] border-ring pb-0.5 pt-0.5 text-center text-ring shadow-sm placeholder:text-center sm:text-sm" +
-                  INPUT_STYLE
-                : "form-input block w-full rounded-md border-ring bg-background shadow-sm focus:border-ring focus:ring-ring sm:text-sm" +
-                  (disabled ? " bg-input" : "") +
-                  "focus:placeholder-transparent"
-            }
-            placeholder="Type something..."
-            onChange={(e) => {
-              setInputList((old) => {
-                let newInputList = _.cloneDeep(old);
-                newInputList[idx] = e.target.value;
-                onChange(newInputList);
-                return newInputList;
-              });
-            }}
-          />
-          {idx === inputList.length - 1 ? (
-            <button
-              onClick={() => {
+      {inputList.map((i, idx) => {
+        return (
+          <div key={idx} className="flex w-full gap-3">
+            <input
+              type="text"
+              value={i}
+              className={
+                editNode
+                  ? INPUT_EDIT_NODE
+                  : INPUT_STYLE + (disabled ? INPUT_DISABLE : "")
+              }
+              placeholder="Type something..."
+              onChange={(e) => {
                 setInputList((old) => {
                   let newInputList = _.cloneDeep(old);
-                  newInputList.push("");
-                  onAddInput(newInputList);
+                  newInputList[idx] = e.target.value;
                   return newInputList;
                 });
                 onChange(inputList);
               }}
-            >
-              <Plus className={"h-4 w-4 hover:text-ring"} />
-            </button>
-          ) : (
-            <button
-              onClick={() => {
-                setInputList((old) => {
-                  let newInputList = _.cloneDeep(old);
-                  newInputList.splice(idx, 1);
-                  onAddInput(newInputList);
-                  return newInputList;
-                });
-                onChange(inputList);
-              }}
-            >
-              <X className="h-4 w-4 hover:text-status-red" />
-            </button>
-          )}
-        </div>
-      ))}
+            />
+            {idx === inputList.length - 1 ? (
+              <button
+                onClick={() => {
+                  setInputList((old) => {
+                    let newInputList = _.cloneDeep(old);
+                    newInputList.push("");
+                    return newInputList;
+                  });
+                  onChange(inputList);
+                }}
+              >
+                <Plus className={"h-4 w-4 hover:text-ring"} />
+              </button>
+            ) : (
+              <button
+                onClick={() => {
+                  setInputList((old) => {
+                    let newInputList = _.cloneDeep(old);
+                    newInputList.splice(idx, 1);
+                    return newInputList;
+                  });
+                  onChange(inputList);
+                }}
+              >
+                <X className="h-4 w-4 hover:text-status-red" />
+              </button>
+            )}
+          </div>
+        );
+      })}
     </div>
   );
 }
diff --git a/src/frontend/src/components/intComponent/index.tsx b/src/frontend/src/components/intComponent/index.tsx
index 4d1a7a079..b4b863622 100644
--- a/src/frontend/src/components/intComponent/index.tsx
+++ b/src/frontend/src/components/intComponent/index.tsx
@@ -2,7 +2,7 @@ import { useContext, useEffect, useState } from "react";
 import { FloatComponentType } from "../../types/components";
 import { TabsContext } from "../../contexts/tabsContext";
 import { classNames } from "../../utils";
-import { INPUT_STYLE } from "../../constants";
+import { INPUT_DISABLE, INPUT_EDIT_NODE, INPUT_STYLE } from "../../constants";
 import { PopUpContext } from "../../contexts/popUpContext";
 
 export default function IntComponent({
@@ -72,11 +72,8 @@ export default function IntComponent({
         value={myValue}
         className={
           editNode
-            ? "form-input block w-full rounded-md border pb-0.5 pt-0.5 text-center shadow-sm placeholder:text-center placeholder:text-muted-foreground focus:placeholder-transparent sm:text-sm" +
-              INPUT_STYLE
-            : "form-input block w-full rounded-md bg-background shadow-sm ring-offset-background placeholder:text-muted-foreground focus:placeholder-transparent sm:text-sm" +
-              INPUT_STYLE +
-              (disabled ? " bg-input" : "")
+            ? INPUT_EDIT_NODE
+            : INPUT_STYLE + (disabled ? INPUT_DISABLE : "")
         }
         placeholder={editNode ? "Integer number" : "Type an integer number"}
         onChange={(e) => {
diff --git a/src/frontend/src/components/promptComponent/index.tsx b/src/frontend/src/components/promptComponent/index.tsx
index 370d3ca05..a7a6740b2 100644
--- a/src/frontend/src/components/promptComponent/index.tsx
+++ b/src/frontend/src/components/promptComponent/index.tsx
@@ -3,7 +3,12 @@ import { PopUpContext } from "../../contexts/popUpContext";
 import { TextAreaComponentType } from "../../types/components";
 import GenericModal from "../../modals/genericModal";
 import { TypeModal } from "../../utils";
-import { INPUT_STYLE } from "../../constants";
+import {
+  INPUT_DIALOG,
+  INPUT_DISABLE,
+  INPUT_EDIT_NODE,
+  INPUT_STYLE,
+} from "../../constants";
 import { ExternalLink } from "lucide-react";
 
 export default function PromptAreaComponent({
@@ -49,10 +54,8 @@ export default function PromptAreaComponent({
           }}
           className={
             editNode
-              ? "form-input block w-full cursor-pointer truncate rounded-md border border-ring pb-0.5 pt-0.5   text-ring shadow-sm placeholder:text-center sm:text-sm" +
-                INPUT_STYLE
-              : "block w-full truncate rounded-md border border-ring px-3 py-2 text-ring shadow-sm sm:text-sm" +
-                (disabled ? " bg-input" : "")
+              ? INPUT_EDIT_NODE + INPUT_DIALOG
+              : (disabled ? INPUT_DISABLE : "") + INPUT_STYLE + INPUT_DIALOG
           }
         >
           {myValue !== "" ? myValue : "Type your prompt here"}
diff --git a/src/frontend/src/components/textAreaComponent/index.tsx b/src/frontend/src/components/textAreaComponent/index.tsx
index d84e73a01..6c127005e 100644
--- a/src/frontend/src/components/textAreaComponent/index.tsx
+++ b/src/frontend/src/components/textAreaComponent/index.tsx
@@ -3,7 +3,12 @@ import { PopUpContext } from "../../contexts/popUpContext";
 import { TextAreaComponentType } from "../../types/components";
 import GenericModal from "../../modals/genericModal";
 import { TypeModal } from "../../utils";
-import { INPUT_STYLE } from "../../constants";
+import {
+  INPUT_DIALOG,
+  INPUT_DISABLE,
+  INPUT_EDIT_NODE,
+  INPUT_STYLE,
+} from "../../constants";
 import { ExternalLink } from "lucide-react";
 
 export default function TextAreaComponent({
@@ -52,10 +57,8 @@ export default function TextAreaComponent({
           }}
           className={
             editNode
-              ? "form-input block w-full cursor-pointer truncate rounded-md border border-ring bg-transparent pb-0.5   pt-0.5 text-ring shadow-sm placeholder:text-center sm:text-sm" +
-                INPUT_STYLE
-              : "block w-full truncate rounded-md border border-ring px-3 py-2 text-ring shadow-sm sm:text-sm" +
-                (disabled ? " bg-input" : "")
+              ? INPUT_EDIT_NODE + INPUT_DIALOG
+              : INPUT_DIALOG + "px-3 py-2" + (disabled ? INPUT_DISABLE : "")
           }
         >
           {myValue !== "" ? myValue : "Type something..."}
diff --git a/src/frontend/src/constants.tsx b/src/frontend/src/constants.tsx
index e855cdaa2..08b03787a 100644
--- a/src/frontend/src/constants.tsx
+++ b/src/frontend/src/constants.tsx
@@ -167,12 +167,36 @@ export const EXPORT_CODE_DIALOG =
   "Generate the code to integrate your flow into an external application.";
 
 /**
- * The base text for subtitle of code dialog
+ * The base input for clickable ones
+ * @constant
+ */
+export const INPUT_DIALOG = " text-ring cursor-pointer bg-transparent";
+
+/**
+ * The base input style
  * @constant
  */
 export const INPUT_STYLE =
-  " focus:tw-ring-none border-border focus-visible:outline-none focus:ring-ring focus:ring-1 bg-background focus:outline-none";
+  " bg-background block border-ring focus:placeholder-transparent focus:ring-ring focus:tw-ring-none form-input px-3 placeholder:text-muted-foreground rounded-md shadow-sm sm:text-sm truncate w-full ";
 
+/**
+ * The base input on edit node
+ * @constant
+ */
+export const INPUT_EDIT_NODE =
+  " placeholder:text-center pt-0.5 pb-0.5 text-center " + INPUT_STYLE;
+
+/**
+ * The base search input style
+ * @constant
+ */
+export const INPUT_SEARCH = INPUT_STYLE + " pr-7 mx-2 ";
+
+/**
+ * The base disable input style
+ * @constant
+ */
+export const INPUT_DISABLE = " bg-input ";
 /**
  * The base text for subtitle of code dialog
  * @constant
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index 66867a0d1..fc8b62767 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -15,7 +15,7 @@ import ExportModal from "../../../../modals/exportModal";
 import ApiModal from "../../../../modals/ApiModal";
 import { TabsContext } from "../../../../contexts/tabsContext";
 import { alertContext } from "../../../../contexts/alertContext";
-import { INPUT_STYLE } from "../../../../constants";
+import { INPUT_SEARCH, INPUT_STYLE } from "../../../../constants";
 import { Separator } from "../../../../components/ui/separator";
 import { Menu } from "lucide-react";
 
@@ -124,10 +124,7 @@ export default function ExtraSidebar() {
           name="search"
           id="search"
           placeholder="Search"
-          className={
-            INPUT_STYLE +
-            "w-full rounded-md border border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
-          }
+          className={INPUT_SEARCH}
           onChange={(e) => {
             handleSearchInput(e.target.value);
             setSearch(e.target.value);
@@ -183,7 +180,7 @@ export default function ExtraSidebar() {
                               );
                             }}
                           >
-                            <div className="flex w-full items-center justify-between rounded-md rounded-l-none border border-l-0 border-dashed border-ring  bg-background px-3 py-1 text-sm">
+                            <div className="flex w-full items-center justify-between rounded-md rounded-l-none border border-l-0 border-dashed border-ring  bg-white px-3 py-1 text-sm">
                               <span className="w-full  truncate pr-1 text-xs text-foreground">
                                 {data[d][t].display_name}
                               </span>