diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index dcf45b3d9..ae2c144a0 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -24,6 +24,7 @@ import { nodeNames, nodeIcons } from "../../../../utils";
 import React from "react";
 import { nodeColors } from "../../../../utils";
 import ShadTooltip from "../../../../components/ShadTooltipComponent";
+import { PopUpContext } from "../../../../contexts/popUpContext";
 
 export default function ParameterComponent({
   left,
@@ -40,6 +41,8 @@ export default function ParameterComponent({
   const refHtml = useRef(null);
   const updateNodeInternals = useUpdateNodeInternals();
   const [position, setPosition] = useState(0);
+  const { closePopUp } = useContext(PopUpContext);
+
   useEffect(() => {
     if (ref.current && ref.current.offsetTop && ref.current.clientHeight) {
       setPosition(ref.current.offsetTop + ref.current.clientHeight / 2);
@@ -54,6 +57,9 @@ export default function ParameterComponent({
   const [enabled, setEnabled] = useState(
     data.node.template[name]?.value ?? false
   );
+
+  useEffect(() => {}, [closePopUp, data.node.template]);
+
   const { reactFlowInstance } = useContext(typesContext);
   let disabled =
     reactFlowInstance?.getEdges().some((e) => e.targetHandle === id) ?? false;
@@ -103,7 +109,7 @@ export default function ParameterComponent({
   return (
     <div
       ref={ref}
-      className="w-full flex flex-wrap justify-between items-center bg-gray-50 dark:bg-gray-800 dark:text-white mt-1 px-5 py-2"
+      className="w-full flex flex-wrap justify-between items-center bg-muted dark:bg-gray-800 dark:text-white mt-1 px-5 py-2"
     >
       <>
         <div className={"text-sm truncate w-full " + (left ? "" : "text-end")}>
@@ -124,6 +130,7 @@ export default function ParameterComponent({
             delayDuration={0}
             content={refHtml.current}
             side={left ? "left" : "right"}
+            open={refHtml?.current?.length > 0}
           >
             <Handle
               type={left ? "target" : "source"}
@@ -197,22 +204,28 @@ export default function ParameterComponent({
             />
           </div>
         ) : left === true && type === "float" ? (
-          <FloatComponent
-            disabled={disabled}
-            disableCopyPaste={true}
-            value={data.node.template[name].value ?? ""}
-            onChange={(t) => {
-              data.node.template[name].value = t;
-            }}
-          />
+          <div className="mt-2 w-full">
+            <FloatComponent
+              disabled={disabled}
+              disableCopyPaste={true}
+              value={data.node.template[name].value ?? ""}
+              onChange={(t) => {
+                data.node.template[name].value = t;
+                }}
+            />
+          </div>
         ) : left === true &&
           type === "str" &&
           data.node.template[name].options ? (
-          <Dropdown
-            options={data.node.template[name].options}
-            onSelect={(newValue) => (data.node.template[name].value = newValue)}
-            value={data.node.template[name].value ?? "Choose an option"}
-          ></Dropdown>
+          <div className="w-full">
+            <Dropdown
+              options={data.node.template[name].options}
+              onSelect={(newValue) =>
+                (data.node.template[name].value = newValue)
+              }
+              value={data.node.template[name].value ?? "Choose an option"}
+            ></Dropdown>
+          </div>
         ) : left === true && type === "code" ? (
           <CodeAreaComponent
             disabled={disabled}
@@ -237,15 +250,17 @@ export default function ParameterComponent({
             }}
           ></InputFileComponent>
         ) : left === true && type === "int" ? (
-          <IntComponent
-            disabled={disabled}
-            disableCopyPaste={true}
-            value={data.node.template[name].value ?? ""}
-            onChange={(t) => {
-              data.node.template[name].value = t;
-              
-            }}
-          />
+          <div className="mt-2 w-full">
+            <IntComponent
+              disabled={disabled}
+              disableCopyPaste={true}
+              value={data.node.template[name].value ?? ""}
+              onChange={(t) => {
+                data.node.template[name].value = t;
+                
+              }}
+            />
+          </div>
         ) : left === true && type === "prompt" ? (
           <PromptAreaComponent
             disabled={disabled}
diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index 168069f55..83d287101 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -44,6 +44,7 @@ export default function GenericNode({
   const showError = useRef(true);
   const { types, deleteNode } = useContext(typesContext);
   const { openPopUp } = useContext(PopUpContext);
+  const { closePopUp } = useContext(PopUpContext);
 
   const Icon = nodeIcons[data.type] || nodeIcons[types[data.type]];
   const [validationStatus, setValidationStatus] = useState(null);
@@ -58,6 +59,8 @@ export default function GenericNode({
     }
   }, []);
 
+  useEffect(() => {}, [closePopUp]);
+
   const validateNode = useCallback(
     debounce(async () => {
       try {
@@ -112,11 +115,11 @@ export default function GenericNode({
 
       <div
         className={classNames(
-          selected ? "border border-blue-500" : "border dark:border-gray-700",
+          selected ? "border border-ring" : "border dark:border-gray-700",
           "prompt-node relative flex w-96 flex-col justify-center rounded-lg bg-white dark:bg-gray-900"
         )}
       >
-        <div className="flex w-full items-center justify-between gap-8 rounded-t-lg border-b bg-gray-50 p-4 dark:border-b-gray-700 dark:bg-gray-800 dark:text-white ">
+        <div className="flex w-full items-center justify-between gap-8 rounded-t-lg border-b bg-muted p-4 dark:border-b-gray-700 dark:bg-gray-800 dark:text-white ">
           <div className="flex w-full items-center gap-2 truncate text-lg">
             <Icon
               className="h-10 w-10 rounded p-1"
@@ -126,7 +129,7 @@ export default function GenericNode({
             />
             <div className="ml-2 truncate">
               <ShadTooltip delayDuration={1500} content={data.type}>
-                <div className="ml-2 truncate">{data.type}</div>
+                <div className="ml-2 truncate text-gray-800">{data.type}</div>
               </ShadTooltip>
             </div>
           </div>
@@ -187,7 +190,7 @@ export default function GenericNode({
           </div>
         </div>
 
-        <div className="h-full w-full py-5">
+        <div className="h-full w-full py-5 text-gray-800">
           <div className="w-full px-5 pb-3 text-sm text-gray-500 dark:text-gray-300">
             {data.node.description}
           </div>
diff --git a/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx b/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
index ace9b5a0b..ad505e23e 100644
--- a/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
+++ b/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
@@ -94,7 +94,7 @@ export default function SingleAlert({
               {dropItem.link ? (
                 <Link
                   to={dropItem.link}
-                  className="whitespace-nowrap font-medium text-blue-700 dark:text-blue-50 dark:hover:text-blue-100 hover:text-blue-600"
+                  className="whitespace-nowrap font-medium text-blue-700 dark:text-blue-50 dark:hover:text-blue-100 hover:text-ring"
                 >
                   Details
                 </Link>
diff --git a/src/frontend/src/alerts/notice/index.tsx b/src/frontend/src/alerts/notice/index.tsx
index 1b2fb1514..81dce8ca0 100644
--- a/src/frontend/src/alerts/notice/index.tsx
+++ b/src/frontend/src/alerts/notice/index.tsx
@@ -51,7 +51,7 @@ export default function NoticeAlert({
               {link !== "" ? (
                 <Link
                   to={link}
-                  className="whitespace-nowrap font-medium text-blue-700 dark:text-blue-50 hover:dark:text-blue-10 hover:text-blue-600"
+                  className="whitespace-nowrap font-medium text-blue-700 dark:text-blue-50 hover:dark:text-blue-10 hover:text-ring"
                 >
                   Details
                 </Link>
diff --git a/src/frontend/src/components/ExtraSidebarComponent/index.tsx b/src/frontend/src/components/ExtraSidebarComponent/index.tsx
index b06a58d9c..e03db68c8 100644
--- a/src/frontend/src/components/ExtraSidebarComponent/index.tsx
+++ b/src/frontend/src/components/ExtraSidebarComponent/index.tsx
@@ -21,10 +21,7 @@ export default function ExtraSidebar() {
           isStackedOpen ? "w-52" : "w-0 "
         } flex-shrink-0 flex overflow-hidden flex-col border-r dark:border-r-gray-700 transition-all duration-500`}
       >
-        <div className="w-52 dark:bg-gray-800 border dark:border-gray-700  overflow-y-auto scrollbar-hide h-full flex flex-col items-start">
-          <div className="flex px-4 justify-between align-middle w-full">
-            <span className="text-gray-900 dark:text-white py-[2px] font-medium "></span>
-          </div>
+        <div className="w-52 dark:bg-gray-800 border dark:border-gray-700  overflow-y-auto scrollbar-hide h-full flex flex-col items-start bg-white">
           <div className="flex flex-grow flex-col w-full">
             {extraNavigation.options ? (
               <div className="p-4">
@@ -36,8 +33,8 @@ export default function ExtraSidebar() {
                           to={item.href}
                           className={classNames(
                             item.href.split("/")[2] === current[4]
-                              ? "bg-gray-100 text-gray-900"
-                              : "bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-900",
+                              ? "bg-muted text-gray-900"
+                              : "bg-white text-gray-600 hover:bg-muted hover:text-gray-900",
                             "group w-full flex items-center pl-2 py-2 text-sm font-medium rounded-md"
                           )}
                         >
@@ -63,9 +60,9 @@ export default function ExtraSidebar() {
                             <Disclosure.Button
                               className={classNames(
                                 item.href.split("/")[2] === current[4]
-                                  ? "bg-gray-100 text-gray-900"
-                                  : "bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-900",
-                                "group w-full flex items-center pl-2 pr-1 py-2 text-left text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                                  ? "bg-muted text-gray-900"
+                                  : "bg-white text-gray-600 hover:bg-muted hover:text-gray-900",
+                                "group w-full flex items-center pl-2 pr-1 py-2 text-left text-sm font-medium rounded-md focus:outline-none focus:ring-1 focus:ring-indigo-500"
                               )}
                             >
                               <item.icon
@@ -96,8 +93,8 @@ export default function ExtraSidebar() {
                                   to={subItem.href}
                                   className={classNames(
                                     subItem.href.split("/")[3] === current[5]
-                                      ? "bg-gray-100 text-gray-900"
-                                      : "bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-900",
+                                      ? "bg-muted text-gray-900"
+                                      : "bg-white text-gray-600 hover:bg-muted hover:text-gray-900",
                                     "group flex w-full items-center rounded-md py-2 pl-11 pr-2 text-sm font-medium"
                                   )}
                                 >
diff --git a/src/frontend/src/components/ShadTooltipComponent/index.tsx b/src/frontend/src/components/ShadTooltipComponent/index.tsx
index a360f3ff0..6dfde8f8f 100644
--- a/src/frontend/src/components/ShadTooltipComponent/index.tsx
+++ b/src/frontend/src/components/ShadTooltipComponent/index.tsx
@@ -10,13 +10,15 @@ const ShadTooltip = (props) => {
     <TooltipProvider>
       <Tooltip delayDuration={props.delayDuration}>
         <TooltipTrigger asChild>{props.children}</TooltipTrigger>
-        <TooltipContent
-          side={props.side}
-          avoidCollisions={false}
-          sticky="always"
-        >
-          {props.content}
-        </TooltipContent>
+        {props.open && (
+          <TooltipContent
+            side={props.side}
+            avoidCollisions={false}
+            sticky="always"
+          >
+            {props.content}
+          </TooltipContent>
+        )}
       </Tooltip>
     </TooltipProvider>
   );
diff --git a/src/frontend/src/pages/MainPage/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx
similarity index 69%
rename from src/frontend/src/pages/MainPage/components/cardComponent/index.tsx
rename to src/frontend/src/components/cardComponent/index.tsx
index 88dad5ff1..5688eefaa 100644
--- a/src/frontend/src/pages/MainPage/components/cardComponent/index.tsx
+++ b/src/frontend/src/components/cardComponent/index.tsx
@@ -1,13 +1,13 @@
 import { Trash2, ExternalLink } from "lucide-react";
 import { useContext } from "react";
 import { Link } from "react-router-dom";
-import { TabsContext } from "../../../../contexts/tabsContext";
-import { FlowType } from "../../../../types/flow";
-import { gradients } from "../../../../utils";
-import { CardTitle, CardDescription, CardFooter, Card, CardHeader } from "../../../../components/ui/card";
-import { Button } from "../../../../components/ui/button";
+import { TabsContext } from "../../contexts/tabsContext";
+import { FlowType } from "../../types/flow";
+import { gradients } from "../../utils";
+import { CardTitle, CardDescription, CardFooter, Card, CardHeader } from "../ui/card";
 
-export const CardComponent = ({ flow, id }: { flow: FlowType; id: string }) => {
+
+export const CardComponent = ({ flow, id, onDelete, button }: { flow: FlowType; id: string, onDelete?: () => void, button?: JSX.Element }) => {
   const { removeFlow } = useContext(TabsContext);
 
   return (
@@ -26,13 +26,13 @@ export const CardComponent = ({ flow, id }: { flow: FlowType; id: string }) => {
               {flow.name}
             </span>
           </div>
+          {onDelete &&
           <button
-            onClick={() => {
-              removeFlow(flow.id);
-            }}
+            onClick={onDelete}
           >
             <Trash2 className="w-5 text-primary opacity-0 group-hover:opacity-100 transition-all" />
           </button>
+          }
         </CardTitle>
         <CardDescription className="pt-2 pb-2">
           <div className="truncate-doubleline">
@@ -53,17 +53,10 @@ export const CardComponent = ({ flow, id }: { flow: FlowType; id: string }) => {
               <span className="text-base">&nbsp;</span>OpenAI+
             </Badge> */}
           </div>
-          <Link to={"/flow/" + id}>
-            <Button
-              variant="outline"
-              size="sm"
-              className="whitespace-nowrap "
-              
-            >
-              <ExternalLink className="w-4 mr-2" />
-              Edit Flow
-            </Button>
-          </Link>
+          {button &&
+            button
+          }
+          
         </div>
       </CardFooter>
     </Card>
diff --git a/src/frontend/src/components/codeAreaComponent/index.tsx b/src/frontend/src/components/codeAreaComponent/index.tsx
index 7ba38918b..137e0917e 100644
--- a/src/frontend/src/components/codeAreaComponent/index.tsx
+++ b/src/frontend/src/components/codeAreaComponent/index.tsx
@@ -4,6 +4,7 @@ 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";
 
 export default function CodeAreaComponent({
   value,
@@ -40,12 +41,14 @@ export default function CodeAreaComponent({
           }}
           className={
             editNode
-              ? "h-7 truncate placeholder:text-center text-gray-500 border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
-              : "truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
+              ? "truncate cursor-pointer placeholder:text-center text-gray-500 border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm" +
+                INPUT_STYLE
+              : "truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm sm:text-sm" +
+                INPUT_STYLE +
                 (disabled ? " bg-gray-200" : "")
           }
         >
-          {myValue !== "" ? myValue : "Text empty"}
+          {myValue !== "" ? myValue : "Type something..."}
         </span>
         <button
           onClick={() => {
@@ -61,7 +64,7 @@ export default function CodeAreaComponent({
           }}
         >
           {!editNode && (
-            <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600 dark:text-gray-300" />
+            <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-ring dark:text-gray-300" />
           )}
         </button>
       </div>
diff --git a/src/frontend/src/components/dropdownComponent/index.tsx b/src/frontend/src/components/dropdownComponent/index.tsx
index 48c41d118..6e4325a1b 100644
--- a/src/frontend/src/components/dropdownComponent/index.tsx
+++ b/src/frontend/src/components/dropdownComponent/index.tsx
@@ -3,12 +3,14 @@ import { ChevronUpDownIcon, CheckIcon } from "@heroicons/react/24/outline";
 import { Fragment, useState } from "react";
 import { DropDownComponentType } from "../../types/components";
 import { classNames } from "../../utils";
+import { INPUT_STYLE } from "../../constants";
 
 export default function Dropdown({
   value,
   options,
   onSelect,
   editNode = false,
+  numberOfOptions = 0,
 }: DropDownComponentType) {
   let [internalValue, setInternalValue] = useState(
     value === "" || !value ? "Choose an option" : value
@@ -25,16 +27,14 @@ export default function Dropdown({
       >
         {({ open }) => (
           <>
-            <div
-              className={
-                editNode ? "relative mt-0 w-full" : "relative mt-1 w-full"
-              }
-            >
+            <div className={editNode ? "mt-1" : "relative mt-1"}>
               <Listbox.Button
                 className={
                   editNode
-                    ? "pr-9 arrow-hide placeholder:text-center border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
-                    : "relative w-full cursor-default rounded-md border border-gray-300 bg-white dark:bg-gray-900 py-2 pl-3 pr-10 text-left shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm"
+                    ? "relative pr-9 arrow-hide placeholder:text-center block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md shadow-sm sm:text-sm border-gray-300 border-1" +
+                      INPUT_STYLE
+                    : "ring-1 ring-slate-300 dark:ring-slate-600 w-full py-2 pl-3 pr-10 text-left dark:focus:ring-offset-2 dark:focus:ring-offset-gray-900 dark:focus:ring-1 dark:focus:ring-gray-600 dark:focus-visible:ring-gray-900 dark:focus-visible:ring-offset-2 focus-visible:outline-none dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm" +
+                      INPUT_STYLE
                 }
               >
                 <span className="block truncate w-full">{internalValue}</span>
@@ -62,8 +62,8 @@ export default function Dropdown({
                 <Listbox.Options
                   className={
                     editNode
-                      ? "arrow-hide"
-                      : "absolute z-50 mt-1 max-h-60 w-full dark:bg-gray-800 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
+                      ? "arrow-hide absolute z-10 mt-1 max-h-60 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm w-[215px]"
+                      : "absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm "
                   }
                 >
                   {options.map((option, id) => (
@@ -71,11 +71,8 @@ export default function Dropdown({
                       key={id}
                       className={({ active }) =>
                         classNames(
-                          active && !editNode
-                            ? "text-white bg-indigo-600 dark:bg-indigo-500"
-                            : "text-gray-900",
-                          active && editNode
-                            ? "text-white bg-gray-400 dark:bg-gray-500"
+                          active
+                            ? "text-white bg-slate-400 dark:bg-white dark:text-gray-500"
                             : "",
                           editNode
                             ? "relative cursor-default select-none py-0.5 pl-3 pr-12 dark:text-gray-300 dark:bg-gray-800"
@@ -89,7 +86,7 @@ export default function Dropdown({
                           <span
                             className={classNames(
                               selected ? "font-semibold" : "font-normal",
-                              "block truncate"
+                              "block truncate "
                             )}
                           >
                             {option}
@@ -98,13 +95,16 @@ export default function Dropdown({
                           {selected ? (
                             <span
                               className={classNames(
-                                editNode ? "text-gray-600" : "text-indigo-600",
-                                active ? "text-white" : "",
+                                active ? "text-white dark:text-black" : "",
                                 "absolute inset-y-0 right-0 flex items-center pr-4"
                               )}
                             >
                               <CheckIcon
-                                className="h-5 w-5"
+                                className={
+                                  active
+                                    ? "h-5 w-5 dark:text-black text-black"
+                                    : "h-5 w-5 dark:text-white text-black"
+                                }
                                 aria-hidden="true"
                               />
                             </span>
diff --git a/src/frontend/src/components/floatComponent/index.tsx b/src/frontend/src/components/floatComponent/index.tsx
index a7cf9b2e4..8fef867ab 100644
--- a/src/frontend/src/components/floatComponent/index.tsx
+++ b/src/frontend/src/components/floatComponent/index.tsx
@@ -1,6 +1,7 @@
 import { useContext, useEffect, useState } from "react";
 import { FloatComponentType } from "../../types/components";
 import { TabsContext } from "../../contexts/tabsContext";
+import { INPUT_STYLE } from "../../constants";
 
 export default function FloatComponent({
   value,
@@ -12,6 +13,10 @@ export default function FloatComponent({
   const [myValue, setMyValue] = useState(value ?? "");
   const { setDisableCopyPaste } = useContext(TabsContext);
 
+  const step = 0.1;
+  const min = 0;
+  const max = 1;
+
   useEffect(() => {
     if (disabled) {
       setMyValue("");
@@ -32,11 +37,24 @@ export default function FloatComponent({
           if (disableCopyPaste) setDisableCopyPaste(false);
         }}
         type="number"
+        step={step}
+        min={min}
+        onInput={(e: React.ChangeEvent<HTMLInputElement>) => {
+          if (e.target.value < min.toString()) {
+            e.target.value = min.toString();
+          }
+          if (e.target.value > max.toString()) {
+            e.target.value = max.toString();
+          }
+        }}
+        max={max}
         value={myValue}
         className={
           editNode
-            ? "text-center arrow-hide placeholder:text-center border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
-            : "block w-full form-input dark:bg-gray-900 arrow-hide dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
+            ? "focus:placeholder-transparent text-center placeholder:text-center border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm" +
+              INPUT_STYLE
+            : "focus:placeholder-transparent block w-full form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm ring-offset-gray-200 sm:text-sm" +
+              INPUT_STYLE +
               (disabled ? " bg-gray-200 dark:bg-gray-700" : "")
         }
         placeholder={
diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx
index a4072e9c1..98e643871 100644
--- a/src/frontend/src/components/inputComponent/index.tsx
+++ b/src/frontend/src/components/inputComponent/index.tsx
@@ -2,6 +2,8 @@ import { useContext, useEffect, useState } from "react";
 import { InputComponentType } from "../../types/components";
 import { classNames } from "../../utils";
 import { TabsContext } from "../../contexts/tabsContext";
+import { PopUpContext } from "../../contexts/popUpContext";
+import { INPUT_STYLE } from "../../constants";
 
 export default function InputComponent({
   value,
@@ -14,6 +16,8 @@ export default function InputComponent({
   const [myValue, setMyValue] = useState(value ?? "");
   const [pwdVisible, setPwdVisible] = useState(false);
   const { setDisableCopyPaste } = useContext(TabsContext);
+  const { closePopUp } = useContext(PopUpContext);
+
   useEffect(() => {
     if (disabled) {
       setMyValue("");
@@ -21,6 +25,10 @@ export default function InputComponent({
     }
   }, [disabled, onChange]);
 
+  useEffect(() => {
+    setMyValue(value ?? "");
+  }, [closePopUp]);
+
   return (
     <div
       className={
@@ -38,12 +46,13 @@ export default function InputComponent({
           if (disableCopyPaste) setDisableCopyPaste(false);
         }}
         className={classNames(
-          "block w-full pr-12 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm  sm:text-sm",
+          "block w-full pr-12 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:placeholder-transparent",
           disabled ? " bg-gray-200 dark:bg-gray-700" : "",
           password && !pwdVisible && myValue !== "" ? "password" : "",
           editNode
-            ? "placeholder:text-center border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200 text-center"
-            : "focus:border-indigo-500 focus:ring-indigo-500",
+            ? "border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm text-center" +
+                INPUT_STYLE
+            : "ring-offset-gray-200" + INPUT_STYLE,
           password && editNode ? "pr-8" : "pr-3"
         )}
         placeholder={password && editNode ? "Key" : "Type something..."}
@@ -71,7 +80,11 @@ export default function InputComponent({
                 viewBox="0 0 24 24"
                 strokeWidth={1.5}
                 stroke="currentColor"
-                className="w-5 h-5"
+                className={classNames(
+                  editNode
+                    ? "w-5 h-5 absolute bottom-0.5 right-2"
+                    : "w-5 h-5 absolute bottom-2 right-3"
+                )}
               >
                 <path
                   strokeLinecap="round"
@@ -86,7 +99,11 @@ export default function InputComponent({
                 viewBox="0 0 24 24"
                 strokeWidth={1.5}
                 stroke="currentColor"
-                className="w-5 h-5"
+                className={classNames(
+                  editNode
+                    ? "w-5 h-5 absolute bottom-0.5 right-2"
+                    : "w-5 h-5 absolute bottom-2 right-3"
+                )}
               >
                 <path
                   strokeLinecap="round"
diff --git a/src/frontend/src/components/inputFileComponent/index.tsx b/src/frontend/src/components/inputFileComponent/index.tsx
index 4dd32b1da..01613d28e 100644
--- a/src/frontend/src/components/inputFileComponent/index.tsx
+++ b/src/frontend/src/components/inputFileComponent/index.tsx
@@ -2,6 +2,7 @@ import { DocumentMagnifyingGlassIcon } from "@heroicons/react/24/outline";
 import { useContext, useEffect, useState } from "react";
 import { alertContext } from "../../contexts/alertContext";
 import { FileComponentType } from "../../types/components";
+import { INPUT_STYLE } from "../../constants";
 
 export default function InputFileComponent({
   value,
@@ -37,6 +38,10 @@ export default function InputFileComponent({
     return false;
   }
 
+  useEffect(() => {
+    setMyValue(value);
+  }, [value]);
+
   const handleButtonClick = () => {
     const input = document.createElement("input");
     input.type = "file";
@@ -73,8 +78,10 @@ export default function InputFileComponent({
           onClick={handleButtonClick}
           className={
             editNode
-              ? "placeholder:text-center text-gray-500 border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
-              : "truncate block w-full text-gray-500 dark:text-gray-300 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
+              ? "truncate placeholder:text-center text-gray-500 border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm" +
+                INPUT_STYLE
+              : "truncate block w-full text-gray-500 dark:text-gray-300 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm sm:text-sm" +
+                INPUT_STYLE +
                 (disabled ? " bg-gray-200" : "")
           }
         >
@@ -82,7 +89,7 @@ export default function InputFileComponent({
         </span>
         <button onClick={handleButtonClick}>
           {!editNode && (
-            <DocumentMagnifyingGlassIcon className="w-8 h-8  hover:text-blue-600" />
+            <DocumentMagnifyingGlassIcon className="w-8 h-8  hover:text-ring" />
           )}
         </button>
       </div>
diff --git a/src/frontend/src/components/inputListComponent/index.tsx b/src/frontend/src/components/inputListComponent/index.tsx
index 49b0a1a5a..4bb82147f 100644
--- a/src/frontend/src/components/inputListComponent/index.tsx
+++ b/src/frontend/src/components/inputListComponent/index.tsx
@@ -4,11 +4,12 @@ import { InputListComponentType } from "../../types/components";
 import { TabsContext } from "../../contexts/tabsContext";
 
 import _ from "lodash";
-
+import { INPUT_STYLE } from "../../constants";
 export default function InputListComponent({
   value,
   onChange,
   disabled,
+  editNode = false,
 }: InputListComponentType) {
   const [inputList, setInputList] = useState(value ?? [""]);
   useEffect(() => {
@@ -21,7 +22,7 @@ export default function InputListComponent({
     <div
       className={
         (disabled ? "pointer-events-none cursor-not-allowed" : "") +
-        "flex flex-col gap-3"
+        "flex flex-col gap-3 py-2"
       }
     >
       {inputList.map((i, idx) => (
@@ -30,8 +31,12 @@ export default function InputListComponent({
             type="text"
             value={i}
             className={
-              "block w-full form-input rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
-              (disabled ? " bg-gray-200" : "")
+              editNode
+                ? "border-[1px]  truncate cursor-pointer text-center placeholder:text-center text-gray-500 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm" +
+                  INPUT_STYLE
+                : "block w-full form-input rounded-md border-gray-300 shadow-sm focus:border-gray-500 focus:ring-gray-500 sm:text-sm" +
+                  (disabled ? " bg-gray-200" : "") +
+                  "focus:placeholder-transparent"
             }
             placeholder="Type something..."
             onChange={(e) => {
@@ -54,7 +59,7 @@ export default function InputListComponent({
                 onChange(inputList);
               }}
             >
-              <PlusIcon className="w-4 h-4 hover:text-blue-600" />
+              <PlusIcon className={"w-4 h-4 hover:text-ring"} />
             </button>
           ) : (
             <button
diff --git a/src/frontend/src/components/intComponent/index.tsx b/src/frontend/src/components/intComponent/index.tsx
index e643eb5e9..541e5de5d 100644
--- a/src/frontend/src/components/intComponent/index.tsx
+++ b/src/frontend/src/components/intComponent/index.tsx
@@ -2,6 +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";
 
 export default function IntComponent({
   value,
@@ -12,6 +13,7 @@ export default function IntComponent({
 }: FloatComponentType) {
   const [myValue, setMyValue] = useState(value ?? "");
   const { setDisableCopyPaste } = useContext(TabsContext);
+  const min = 0;
 
   useEffect(() => {
     if (disabled) {
@@ -53,11 +55,20 @@ export default function IntComponent({
           }
         }}
         type="number"
+        step="1"
+        min={min}
+        onInput={(e: React.ChangeEvent<HTMLInputElement>) => {
+          if (e.target.value < min.toString()) {
+            e.target.value = min.toString();
+          }
+        }}
         value={myValue}
         className={
           editNode
-            ? "text-center arrow-hide placeholder:text-center border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
-            : "block w-full form-input dark:bg-gray-900 arrow-hide dark:border-gray-600 dark:text-gray-300 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
+            ? "focus:placeholder-transparent text-center placeholder:text-center border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm" +
+              INPUT_STYLE
+            : "focus:placeholder-transparent block w-full form-input dark:bg-gray-900 dark:border-gray-600 dark:text-gray-300 rounded-md border-gray-300 shadow-sm ring-offset-background sm:text-sm" +
+              INPUT_STYLE +
               (disabled ? " bg-gray-200 dark:bg-gray-700" : "")
         }
         placeholder={editNode ? "Integer number" : "Type a integer number"}
diff --git a/src/frontend/src/components/loadingComponent/index.tsx b/src/frontend/src/components/loadingComponent/index.tsx
index 42ad18c1e..640482950 100644
--- a/src/frontend/src/components/loadingComponent/index.tsx
+++ b/src/frontend/src/components/loadingComponent/index.tsx
@@ -7,7 +7,7 @@ export default function LoadingComponent({ remSize }: LoadingComponentProps) {
     <div role="status" className="w-min m-auto">
       <svg
         aria-hidden="true"
-        className={`w-${remSize} h-${remSize} mr-2 text-gray-200 animate-spin dark:text-gray-600 fill-blue-600`}
+        className={`w-${remSize} h-${remSize} mr-2 text-muted animate-spin dark:text-gray-600 fill-blue-600`}
         viewBox="0 0 100 101"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
diff --git a/src/frontend/src/components/nameInputComponent/index.tsx b/src/frontend/src/components/nameInputComponent/index.tsx
index 126a99645..75aa451af 100644
--- a/src/frontend/src/components/nameInputComponent/index.tsx
+++ b/src/frontend/src/components/nameInputComponent/index.tsx
@@ -51,7 +51,7 @@ export const EditFlowSettings: React.FC<InputProps> = ({
   };
 
   return (
-    <div>
+    <>
       <Label>
         <div className="flex justify-between">
           <span className="font-medium">Name</span>{" "}
@@ -84,7 +84,7 @@ export const EditFlowSettings: React.FC<InputProps> = ({
           rows={3}
         />
       </Label>
-    </div>
+    </>
   );
 };
 
diff --git a/src/frontend/src/components/promptComponent/index.tsx b/src/frontend/src/components/promptComponent/index.tsx
index a1729ef99..df8070a2a 100644
--- a/src/frontend/src/components/promptComponent/index.tsx
+++ b/src/frontend/src/components/promptComponent/index.tsx
@@ -6,6 +6,7 @@ import TextAreaModal from "../../modals/textAreaModal";
 import { TextAreaComponentType } from "../../types/components";
 import GenericModal from "../../modals/genericModal";
 import { TypeModal } from "../../utils";
+import { INPUT_STYLE } from "../../constants";
 
 export default function PromptAreaComponent({
   value,
@@ -45,12 +46,13 @@ export default function PromptAreaComponent({
           }}
           className={
             editNode
-              ? "h-7 truncate placeholder:text-center text-gray-500 border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
-              : "truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
+              ? "cursor-pointer truncate placeholder:text-center text-gray-500 border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm" +
+                INPUT_STYLE
+              : "truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm sm:text-sm" +
                 (disabled ? " bg-gray-200" : "")
           }
         >
-          {myValue !== "" ? myValue : "-"}
+          {myValue !== "" ? myValue : "Type your prompt here"}
         </span>
         <button
           onClick={() => {
@@ -69,7 +71,7 @@ export default function PromptAreaComponent({
           }}
         >
           {!editNode && (
-            <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600 dark:text-gray-300" />
+            <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-ring dark:text-gray-300" />
           )}
         </button>
       </div>
diff --git a/src/frontend/src/components/textAreaComponent/index.tsx b/src/frontend/src/components/textAreaComponent/index.tsx
index 0693411bf..4c0412994 100644
--- a/src/frontend/src/components/textAreaComponent/index.tsx
+++ b/src/frontend/src/components/textAreaComponent/index.tsx
@@ -4,7 +4,7 @@ import { PopUpContext } from "../../contexts/popUpContext";
 import { TextAreaComponentType } from "../../types/components";
 import GenericModal from "../../modals/genericModal";
 import { TypeModal } from "../../utils";
-
+import { INPUT_STYLE } from "../../constants";
 export default function TextAreaComponent({
   value,
   onChange,
@@ -12,16 +12,28 @@ export default function TextAreaComponent({
   editNode = false,
 }: TextAreaComponentType) {
   const [myValue, setMyValue] = useState(value);
-  const { openPopUp } = useContext(PopUpContext);
+  const { openPopUp, closePopUp } = useContext(PopUpContext);
+
   useEffect(() => {
     if (disabled) {
       setMyValue("");
       onChange("");
     }
   }, [disabled, onChange]);
+
+  useEffect(() => {
+    setMyValue(value);
+  }, [closePopUp]);
+
   return (
     <div className={disabled ? "pointer-events-none cursor-not-allowed" : ""}>
-      <div className="w-full flex items-center gap-3">
+      <div
+        className={
+          editNode
+            ? "w-full flex items-center"
+            : "w-full flex items-center gap-3"
+        }
+      >
         <span
           onClick={() => {
             openPopUp(
@@ -39,12 +51,13 @@ export default function TextAreaComponent({
           }}
           className={
             editNode
-              ? "h-7 truncate placeholder:text-center text-gray-500 border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
-              : "truncate block w-full text-gray-500 dark:text-gray-100 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
+              ? "truncate cursor-pointer placeholder:text-center text-gray-500 border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm" +
+                INPUT_STYLE
+              : "truncate block w-full text-gray-500 dark:text-muted px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm sm:text-sm" +
                 (disabled ? " bg-gray-200" : "")
           }
         >
-          {myValue !== "" ? myValue : "Text empty"}
+          {myValue !== "" ? myValue : "Type something..."}
         </span>
         <button
           onClick={() => {
@@ -63,7 +76,7 @@ export default function TextAreaComponent({
           }}
         >
           {!editNode && (
-            <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600 dark:text-gray-300" />
+            <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-ring dark:text-gray-300" />
           )}
         </button>
       </div>
diff --git a/src/frontend/src/components/toggleComponent/index.tsx b/src/frontend/src/components/toggleComponent/index.tsx
index f7140bdee..9481f6760 100644
--- a/src/frontend/src/components/toggleComponent/index.tsx
+++ b/src/frontend/src/components/toggleComponent/index.tsx
@@ -21,8 +21,8 @@ export default function ToggleComponent({
           setEnabled(x);
         }}
         className={classNames(
-          enabled ? "bg-indigo-600" : "bg-gray-200",
-          "relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2"
+          enabled ? "bg-primary" : "bg-gray-200",
+          "relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-1 focus:ring-primary focus:ring-offset-1"
         )}
       >
         <span className="sr-only">Use setting</span>
diff --git a/src/frontend/src/components/toggleShadComponent/index.tsx b/src/frontend/src/components/toggleShadComponent/index.tsx
index 188ddccf9..632ee1bad 100644
--- a/src/frontend/src/components/toggleShadComponent/index.tsx
+++ b/src/frontend/src/components/toggleShadComponent/index.tsx
@@ -19,6 +19,7 @@ export default function ToggleShadComponent({
         style={{
           transform: "scaleX(0.6) scaleY(0.6)",
         }}
+        className="data-[state=unchecked]:bg-slate-500"
         checked={enabled}
         onCheckedChange={(x: boolean) => {
           setEnabled(x);
diff --git a/src/frontend/src/constants.tsx b/src/frontend/src/constants.tsx
index d08aa75e7..285da5277 100644
--- a/src/frontend/src/constants.tsx
+++ b/src/frontend/src/constants.tsx
@@ -4,7 +4,7 @@
  * The base text for subtitle of Export Dialog (Toolbar)
  * @constant
  */
-export const EXPORT_DIALOG_SUBTITLE = "Export your models.";
+export const EXPORT_DIALOG_SUBTITLE = "Export flow as JSON file.";
 
 /**
  * The base text for subtitle of Flow Settings (Menubar)
@@ -24,25 +24,27 @@ export const CODE_DIALOG_SUBTITLE =
  * @constant
  */
 export const EDIT_DIALOG_SUBTITLE =
-  "Make configurations changes to your nodes. Click save when you're done.";
+  "Adjust the configurations of your component. Define parameter visibility for the canvas view. Remember to save once you’re finished.";
 
 /**
  * The base text for subtitle of Code Dialog
  * @constant
  */
-export const CODE_PROMPT_DIALOG_SUBTITLE = "Edit you python code.";
+export const CODE_PROMPT_DIALOG_SUBTITLE =
+  "Edit your Python code. This code snippet accepts module import and a single function definition. Make sure that your function returns a string.";
 
 /**
  * The base text for subtitle of Prompt Dialog
  * @constant
  */
-export const PROMPT_DIALOG_SUBTITLE = "Edit you prompt.";
+export const PROMPT_DIALOG_SUBTITLE =
+  "Create your prompt. Prompts can help guide the behavior of a Language Model.";
 
 /**
  * The base text for subtitle of Text Dialog
  * @constant
  */
-export const TEXT_DIALOG_SUBTITLE = "Edit you text.";
+export const TEXT_DIALOG_SUBTITLE = "Edit your text.";
 
 /**
  * Function to get the python code for the API
@@ -103,3 +105,25 @@ export const getPythonCode = (flowName: string): string => {
     # Now you can use it like any chain
     flow("Hey, have you heard of LangFlow?")`;
 };
+
+/**
+ * The base text for subtitle of Import Dialog
+ * @constant
+ */
+export const IMPORT_DIALOG_SUBTITLE =
+  "Upload a JSON file or select from the available community examples.";
+
+/**
+ * The base text for subtitle of code dialog
+ * @constant
+ */
+export const EXPORT_CODE_DIALOG =
+  "Generate the code to integrate your flow into an external application.";
+
+/**
+ * The base text for subtitle of code dialog
+ * @constant
+ */
+export const INPUT_STYLE =
+  " focus:ring-1 focus:ring-offset-1 focus:ring-ring focus:outline-none ";
+
diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index f6bad16a2..2c00dbc22 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -70,16 +70,63 @@
 	}
   }
 
-  @layer base {
-	* {
-	  @apply border-border;
-	}
-	body {
-	  @apply bg-background text-foreground;
-	  font-feature-settings: "rlig" 1, "calt" 1;
-	}
+:root {
+  --background: 0 0% 100%;
+  --foreground: 222.2 47.4% 11.2%;
+  --muted: 210 40% 98%;
+  --muted-foreground: 215.4 16.3% 46.9%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 222.2 47.4% 11.2%;
+  --card: 0 0% 100%;
+  --card-foreground: 222.2 47.4% 11.2%;
+  --border: 214.3 31.8% 91.4%;
+  --input: 214.3 31.8% 91.4%;
+  --primary: 222.2 47.4% 18%;
+  --primary-foreground: 210 40% 98%;
+  --secondary: 210 40% 96.1%;
+  --secondary-foreground: 222.2 47.4% 11.2%;
+  --accent: 210 40% 96.1%;
+  --accent-foreground: 222.2 47.4% 11.2%;
+  --destructive: 0 100% 50%;
+  --destructive-foreground: 210 40% 98%;
+  --ring: 215 20.2% 65.1%;
+  --radius: 0.5rem;
+}
+
+.dark {
+  -background: 224 71% 4%;
+  -foreground: 213 31% 91%;
+  -muted: 223 47% 11%;
+  -muted-foreground: 215.4 16.3% 56.9%;
+  -popover: 224 71% 4%;
+  -popover-foreground: 215 20.2% 65.1%;
+  -card: 224 71% 4%;
+  -card-foreground: 213 31% 91%;
+  -border: 216 34% 17%;
+  -input: 216 34% 17%;
+  -primary: 210 40% 98%;
+  -primary-foreground: 222.2 47.4% 1.2%;
+  -secondary: 222.2 47.4% 11.2%;
+  -secondary-foreground: 210 40% 98%;
+  -accent: 216 34% 17%;
+  -accent-foreground: 210 40% 98%;
+  -destructive: 0 63% 31%;
+  -destructive-foreground: 210 40% 98%;
+  -ring: 216 34% 17%;
+  -radius: 0.5rem;
+}
+
+@layer base {
+  * {
+    @apply border-border;
   }
 
+  body {
+    @apply bg-background text-foreground;
+    font-feature-settings: "rlig" 1, "calt" 1;
+  }
+}
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
@@ -98,4 +145,4 @@ code {
 The cursor: default; property value restores the browser's default cursor style for the targeted element. By applying this style, the element will no longer have a custom cursor appearance such as "grab" or any other custom cursor defined elsewhere in the application. Instead, it will revert to the default cursor style determined by the browser, typically an arrow-shaped cursor. */
 .react-flow__pane {
   cursor: default;
-}
+}
\ No newline at end of file
diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx
index 6a58d467a..c34cb4afb 100644
--- a/src/frontend/src/modals/ApiModal/index.tsx
+++ b/src/frontend/src/modals/ApiModal/index.tsx
@@ -26,6 +26,7 @@ import {
 import { Button } from "../../components/ui/button";
 import { FlowType } from "src/types/flow";
 import { getCurlCode, getPythonApiCode, getPythonCode } from "../../constants";
+import { EXPORT_CODE_DIALOG } from "../../constants";
 
 export default function ApiModal({ flow }: { flow: FlowType }) {
   const [open, setOpen] = useState(true);
@@ -83,7 +84,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
   return (
     <Dialog open={true} onOpenChange={setModalOpen}>
       <DialogTrigger></DialogTrigger>
-      <DialogContent className="lg:max-w-[800px] sm:max-w-[600px] h-[550px]">
+      <DialogContent className="lg:max-w-[800px] sm:max-w-[600px] h-[580px]">
         <DialogHeader>
           <DialogTitle className="flex items-center">
             <span className="pr-2">Code</span>
@@ -92,9 +93,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
               aria-hidden="true"
             />
           </DialogTitle>
-          <DialogDescription>
-            Export your flow to use it with this code.
-          </DialogDescription>
+          <DialogDescription>{EXPORT_CODE_DIALOG}</DialogDescription>
         </DialogHeader>
 
         <div className="flex flex-col h-full w-full ">
@@ -106,18 +105,18 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                   setActiveTab(index);
                 }}
                 className={
-                  "p-2 rounded-t-lg w-44 border border-b-0 border-gray-300 dark:border-gray-700 dark:text-gray-300 -mr-px flex justify-center items-center gap-4 " +
+                  "p-1.5 rounded-t-lg w-44 border border-b-0 border-gray-300 dark:border-gray-700 dark:text-gray-300 -mr-px flex justify-center items-center gap-4 " +
                   (activeTab === index
                     ? " bg-white dark:bg-gray-800"
-                    : "bg-gray-100 dark:bg-gray-900")
+                    : "bg-muted dark:bg-gray-900")
                 }
               >
                 {tab.name}
-                <img src={tab.image} className="w-6" />
+                <img src={tab.image} className="w-[23px]" />
               </button>
             ))}
           </div>
-          <div className="overflow-hidden px-4 sm:p-4 sm:pb-0 sm:pt-0 w-full h-full rounded-lg shadow bg-white dark:bg-gray-800">
+          <div className=" overflow-hidden px-4 sm:p-4 sm:pb-0 sm:pt-0 w-full h-full rounded-lg border-gray-200 border-[1px] bg-muted dark:bg-gray-800">
             <div className="items-center mb-2">
               <div className="float-right">
                 <button
@@ -134,7 +133,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
               </div>
             </div>
             <SyntaxHighlighter
-              className="h-[370px] w-full"
+              className="h-[350px] w-full"
               language={tabs[activeTab].mode}
               style={oneDark}
               customStyle={{ margin: 0 }}
diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx
index f6f4d9111..d0f4c368d 100644
--- a/src/frontend/src/modals/EditNodeModal/index.tsx
+++ b/src/frontend/src/modals/EditNodeModal/index.tsx
@@ -60,12 +60,12 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
           data.node.template[t].type === "int")
     ).length
   );
-  const [nodeValue, setNodeValue] = useState(true);
+  const [nodeValue, setNodeValue] = useState(null);
   const { closePopUp } = useContext(PopUpContext);
   const { types } = useContext(typesContext);
   const ref = useRef();
   const { save } = useContext(TabsContext);
-  const [enabled, setEnabled] = useState(false);
+  const [enabled, setEnabled] = useState(null);
   if (nodeLength == 0) {
     closePopUp();
   }
@@ -77,6 +77,8 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
     }
   }
 
+  useEffect(() => {}, [closePopUp, data.node.template]);
+
   function changeAdvanced(node): void {
     Object.keys(data.node.template).filter((n, i) => {
       if (n === node.name) {
@@ -87,12 +89,10 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
     setNodeValue(!nodeValue);
   }
 
-  console.log(data.node.template);
-
   return (
     <Dialog open={true} onOpenChange={setModalOpen}>
       <DialogTrigger></DialogTrigger>
-      <DialogContent className="lg:max-w-[700px]">
+      <DialogContent className="lg:max-w-[700px] ">
         <DialogHeader>
           <DialogTitle className="flex items-center">
             <span className="pr-2">Edit Node</span>
@@ -103,21 +103,21 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
           </DialogTitle>
           <DialogDescription>
             {EDIT_DIALOG_SUBTITLE}
-            <div className="flex pt-3">
-              <VariableIcon className="w-5 h-5 pe-1 text-gray-700 stroke-2">
+            <div className="flex pt-4">
+              <VariableIcon className="w-5 h-5 pe-1 text-gray-700 stroke-2 dark:text-slate-200">
                 &nbsp;
               </VariableIcon>
-              <span className="text-sm font-semibold text-gray-800">
+              <span className="text-sm font-semibold text-gray-800 dark:text-white">
                 Parameters
               </span>
             </div>
           </DialogDescription>
         </DialogHeader>
 
-        <div className="flex w-full h-fit max-h-[415px]">
+        <div className="flex w-full max-h-[350px] h-fit">
           <div
             className={classNames(
-              "w-full rounded-lg bg-white dark:bg-gray-800 shadow",
+              "w-full rounded-lg bg-white dark:bg-gray-800 border-[1px] border-gray-200",
               nodeLength > limitScrollFieldsModal
                 ? "overflow-scroll overflow-x-hidden custom-scroll"
                 : "overflow-hidden"
@@ -125,9 +125,9 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
           >
             {nodeLength > 0 && (
               <div className="flex flex-col gap-5 h-fit">
-                <Table className="table-fixed">
-                  <TableHeader className="border-gray-200 text-gray-500 text-xs font-medium">
-                    <TableRow>
+                <Table className="table-fixed bg-muted outline-1">
+                  <TableHeader className="border-gray-200 text-gray-500 text-xs font-medium h-10">
+                    <TableRow className="dark:border-b-muted">
                       <TableHead className="h-7 text-center">PARAM</TableHead>
                       <TableHead className="p-0 h-7 text-center">
                         VALUE
@@ -150,8 +150,8 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
                             data.node.template[t].type === "int")
                       )
                       .map((n, i) => (
-                        <TableRow key={i} className="h-8">
-                          <TableCell className="p-0 text-center text-gray-900 text-xs dark:text-gray-300">
+                        <TableRow key={i} className="h-10 dark:border-b-muted">
+                          <TableCell className="p-0 text-center text-gray-900 text-xs dark:text-gray-300 text-sm">
                             {data.node.template[n].name
                               ? data.node.template[n].name
                               : data.node.template[n].display_name}
@@ -162,6 +162,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
                               <div className="mx-auto">
                                 {data.node.template[n].list ? (
                                   <InputListComponent
+                                    editNode={true}
                                     disabled={false}
                                     value={
                                       !data.node.template[n].value ||
@@ -228,6 +229,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
                               data.node.template[n].options ? (
                               <div className="mx-auto">
                                 <Dropdown
+                                  numberOfOptions={nodeLength}
                                   editNode={true}
                                   options={data.node.template[n].options}
                                   onSelect={(newValue) =>
diff --git a/src/frontend/src/modals/NodeModal/index.tsx b/src/frontend/src/modals/NodeModal/index.tsx
index b44dd5bf3..6ceba62bf 100644
--- a/src/frontend/src/modals/NodeModal/index.tsx
+++ b/src/frontend/src/modals/NodeModal/index.tsx
@@ -146,7 +146,7 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
                   <div className="bg-gray-200 dark:bg-gray-900 w-full pb-3 flex flex-row-reverse px-4">
                     <button
                       type="button"
-                      className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm"
+                      className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:ring-offset-1 sm:ml-3 sm:w-auto sm:text-sm"
                       onClick={() => {
                         setModalOpen(false);
                       }}
diff --git a/src/frontend/src/modals/chatModal/chatInput/index.tsx b/src/frontend/src/modals/chatModal/chatInput/index.tsx
index 5a979499a..932a23a45 100644
--- a/src/frontend/src/modals/chatModal/chatInput/index.tsx
+++ b/src/frontend/src/modals/chatModal/chatInput/index.tsx
@@ -2,7 +2,7 @@ import { LockClosedIcon, PaperAirplaneIcon } from "@heroicons/react/24/outline";
 import { classNames } from "../../../utils";
 import { useContext, useEffect, useRef, useState } from "react";
 import { TabsContext } from "../../../contexts/tabsContext";
-
+import { INPUT_STYLE } from "../../../constants";
 export default function ChatInput({
   lockChat,
   chatValue,
@@ -46,7 +46,8 @@ export default function ChatInput({
           lockChat
             ? " bg-gray-300 text-black dark:bg-gray-700 dark:text-gray-300"
             : "  bg-white-200 text-black dark:bg-gray-900 dark:text-gray-300",
-          "form-input block w-full custom-scroll rounded-md border-gray-300 dark:border-gray-600 pr-10 sm:text-sm"
+          "form-input block w-full custom-scroll rounded-md border-gray-300 dark:border-gray-600 pr-10 sm:text-sm" +
+            INPUT_STYLE
         )}
         placeholder={"Send a message..."}
       />
diff --git a/src/frontend/src/modals/chatModal/chatMessage/index.tsx b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
index 003c21694..85c745771 100644
--- a/src/frontend/src/modals/chatModal/chatMessage/index.tsx
+++ b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
@@ -80,7 +80,7 @@ export default function ChatMessage({
               <div
                 onClick={() => setHidden((prev) => !prev)}
                 className=" text-start inline-block rounded-md text-gray-600 dark:text-gray-200 h-full border border-gray-300 dark:border-gray-500
-								bg-gray-100 dark:bg-gray-800 w-[95%] pb-3 pt-3 px-2 ml-3 cursor-pointer scrollbar-hide overflow-scroll"
+								bg-muted dark:bg-gray-800 w-[95%] pb-3 pt-3 px-2 ml-3 cursor-pointer scrollbar-hide overflow-scroll"
                 dangerouslySetInnerHTML={{
                   __html: convert.toHtml(chat.thought),
                 }}
diff --git a/src/frontend/src/modals/chatModal/fileComponent/index.tsx b/src/frontend/src/modals/chatModal/fileComponent/index.tsx
index 3d4feb1d5..2b5d97ae9 100644
--- a/src/frontend/src/modals/chatModal/fileComponent/index.tsx
+++ b/src/frontend/src/modals/chatModal/fileComponent/index.tsx
@@ -37,7 +37,7 @@ export default function FileCard({ fileName, content, fileType }) {
         />
         {isHovered && (
           <div
-            className={`absolute top-0 right-0 bg-gray-100 text-gray-700 rounded-bl-lg px-1 text-sm font-bold dark:bg-gray-700 dark:text-gray-300`}
+            className={`absolute top-0 right-0 bg-muted text-gray-700 rounded-bl-lg px-1 text-sm font-bold dark:bg-gray-700 dark:text-gray-300`}
           >
             <button
               className="text-gray-500 py-1 px-2 dark:bg-gray-700 dark:text-gray-300"
@@ -54,7 +54,7 @@ export default function FileCard({ fileName, content, fileType }) {
   return (
     <button
       onClick={handleDownload}
-      className="bg-gray-100 shadow rounded w-1/2 text-gray-700 hover:drop-shadow-lg px-2 py-2 flex justify-between items-center border border-gray-300"
+      className="bg-muted shadow rounded w-1/2 text-gray-700 hover:drop-shadow-lg px-2 py-2 flex justify-between items-center border border-gray-300"
     >
       <div className="flex gap-2 text-current items-center w-full mr-2">
         {" "}
diff --git a/src/frontend/src/modals/chatModal/index.tsx b/src/frontend/src/modals/chatModal/index.tsx
index bf2de6718..8cdff93b8 100644
--- a/src/frontend/src/modals/chatModal/index.tsx
+++ b/src/frontend/src/modals/chatModal/index.tsx
@@ -430,7 +430,7 @@ export default function ChatModal({
                         </span>
                       </span>
                       <br />
-                      <div className="bg-gray-100 dark:bg-gray-900 rounded-md w-2/4 px-6 py-8 border border-gray-200 dark:border-gray-700">
+                      <div className="bg-muted dark:bg-gray-900 rounded-md w-2/4 px-6 py-8 border border-gray-200 dark:border-gray-700">
                         <span className="text-base text-gray-500">
                           Start a conversation and click the agent’s thoughts{" "}
                           <span>
diff --git a/src/frontend/src/modals/codeAreaModal/index.tsx b/src/frontend/src/modals/codeAreaModal/index.tsx
index 405187647..aa51c50f8 100644
--- a/src/frontend/src/modals/codeAreaModal/index.tsx
+++ b/src/frontend/src/modals/codeAreaModal/index.tsx
@@ -73,7 +73,7 @@ export default function CodeAreaModal({
             onChange={(value) => {
               setCode(value);
             }}
-            className="w-full rounded-lg h-[300px] custom-scroll"
+            className="w-full rounded-lg h-[300px] custom-scroll border-[1px] border-gray-300 dark:border-gray-600"
           />
         </div>
 
diff --git a/src/frontend/src/modals/exportModal/index.tsx b/src/frontend/src/modals/exportModal/index.tsx
index dc14573e9..a5771dd92 100644
--- a/src/frontend/src/modals/exportModal/index.tsx
+++ b/src/frontend/src/modals/exportModal/index.tsx
@@ -17,6 +17,9 @@ import { Button } from "../../components/ui/button";
 import { Checkbox } from "../../components/ui/checkbox";
 import { EXPORT_DIALOG_SUBTITLE } from "../../constants";
 import EditFlowSettings from "../../components/nameInputComponent";
+import { Label } from "../../components/ui/label";
+import { Input } from "../../components/ui/input";
+import { Textarea } from "../../components/ui/textarea";
 
 export default function ExportModal() {
   const [open, setOpen] = useState(true);
@@ -41,7 +44,7 @@ export default function ExportModal() {
   return (
     <Dialog open={true} onOpenChange={setModalOpen}>
       <DialogTrigger asChild></DialogTrigger>
-      <DialogContent className="lg:max-w-[600px] h-[420px]">
+      <DialogContent className="lg:max-w-[600px] h-[420px] ">
         <DialogHeader>
           <DialogTitle className="flex items-center">
             <span className="pr-2">Export</span>
@@ -53,16 +56,29 @@ export default function ExportModal() {
           <DialogDescription>{EXPORT_DIALOG_SUBTITLE}</DialogDescription>
         </DialogHeader>
 
-        <EditFlowSettings
-          name={name}
-          description={description}
-          flows={flows}
-          tabId={tabId}
-          setName={setName}
-          setDescription={setDescription}
-          updateFlow={updateFlow}
-        />
-        {/* <Label>
+        <Label>
+          <span className="font-medium">Name</span>
+
+          <Input
+            className="mt-2 focus-visible:ring-1"
+            onChange={(event) => {
+              if (event.target.value != "") {
+                let newFlow = flows.find((f) => f.id === tabId);
+                newFlow.name = event.target.value;
+                setName(event.target.value);
+                updateFlow(newFlow);
+              } else {
+                setName(event.target.value);
+              }
+            }}
+            type="text"
+            name="name"
+            value={name ?? null}
+            placeholder="File name"
+            id="name"
+          />
+        </Label>
+        <Label>
           <span className="font-medium">Description (optional)</span>
           <Textarea
             name="description"
@@ -74,10 +90,10 @@ export default function ExportModal() {
             }}
             value={flows.find((f) => f.id === tabId).description ?? null}
             placeholder="Flow description"
-            className="max-h-[100px] mt-2"
+            className="max-h-[100px] mt-2 focus-visible:ring-1"
             rows={3}
           />
-        </Label> */}
+        </Label>
         <div className="flex items-center space-x-2">
           <Checkbox
             id="terms"
diff --git a/src/frontend/src/modals/genericModal/index.tsx b/src/frontend/src/modals/genericModal/index.tsx
index 868a61913..d241e7c04 100644
--- a/src/frontend/src/modals/genericModal/index.tsx
+++ b/src/frontend/src/modals/genericModal/index.tsx
@@ -18,7 +18,7 @@ import { Button } from "../../components/ui/button";
 import { Textarea } from "../../components/ui/textarea";
 import { PROMPT_DIALOG_SUBTITLE, TEXT_DIALOG_SUBTITLE } from "../../constants";
 
-export default function PromptAreaModal({
+export default function GenericModal({
   value,
   setValue,
   buttonText,
@@ -78,7 +78,7 @@ export default function PromptAreaModal({
         <div className="flex h-full w-full mt-2">
           <Textarea
             ref={ref}
-            className="form-input h-[300px] w-full rounded-lg border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white"
+            className="form-input h-[300px] w-full rounded-lg border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white focus-visible:ring-1"
             value={myValue}
             onChange={(e) => {
               setMyValue(e.target.value);
diff --git a/src/frontend/src/modals/importModal/index.tsx b/src/frontend/src/modals/importModal/index.tsx
index 72b44e671..b95b84d4e 100644
--- a/src/frontend/src/modals/importModal/index.tsx
+++ b/src/frontend/src/modals/importModal/index.tsx
@@ -1,4 +1,3 @@
-import { Dialog, Transition } from "@headlessui/react";
 import {
   XMarkIcon,
   ArrowDownTrayIcon,
@@ -6,6 +5,7 @@ import {
   ComputerDesktopIcon,
   ArrowUpTrayIcon,
   ArrowLeftIcon,
+  CommandLineIcon,
 } from "@heroicons/react/24/outline";
 import { Fragment, useContext, useRef, useState } from "react";
 import { PopUpContext } from "../../contexts/popUpContext";
@@ -17,6 +17,17 @@ import { alertContext } from "../../contexts/alertContext";
 import LoadingComponent from "../../components/loadingComponent";
 import { FlowType } from "../../types/flow";
 import { classNames, snakeToSpaces, toNormalCase } from "../../utils";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../../components/ui/dialog";
+import { Button } from "../../components/ui/button";
+import { IMPORT_DIALOG_SUBTITLE } from "../../constants";
 
 export default function ImportModal() {
   const [open, setOpen] = useState(true);
@@ -52,181 +63,143 @@ export default function ImportModal() {
   }
 
   return (
-    <Transition.Root show={open} appear={true} as={Fragment}>
-      <Dialog
-        as="div"
-        className="relative z-10"
-        onClose={setModalOpen}
-        initialFocus={ref}
+    <Dialog open={true} onOpenChange={setModalOpen}>
+      <DialogTrigger></DialogTrigger>
+      <DialogContent
+        className={classNames(
+          showExamples
+            ? "lg:max-w-[650px] h-[600px]"
+            : "lg:max-w-[650px] h-[450px]"
+        )}
       >
-        <Transition.Child
-          as={Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-10 overflow-y-auto">
-          <div className="flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[776px]">
-                <div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
+        <DialogHeader>
+          <DialogTitle className="flex items-center">
+            {showExamples && (
+              <>
+                <div className="z-50 absolute top-2 left-0 hidden pt-4 pl-4 sm:block">
                   <button
                     type="button"
-                    className="rounded-md text-gray-400 hover:text-gray-500"
+                    className="rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-1 focus:ring-gray-500 focus:ring-offset-1"
                     onClick={() => {
-                      setModalOpen(false);
+                      setShowExamples(false);
                     }}
                   >
                     <span className="sr-only">Close</span>
-                    <XMarkIcon className="h-6 w-6" aria-hidden="true" />
+                    <ArrowLeftIcon
+                      className="h-6 w-6 text-gray-800 ml-1 dark:text-white"
+                      aria-hidden="true"
+                    />
                   </button>
                 </div>
-                {showExamples && (
-                  <>
-                    <div className="z-50 absolute top-2 left-0 hidden pt-4 pl-4 sm:block">
-                      <button
-                        type="button"
-                        className="rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-                        onClick={() => {
-                          setShowExamples(false);
-                        }}
-                      >
-                        <span className="sr-only">Close</span>
-                        <ArrowLeftIcon className="h-6 w-6" aria-hidden="true" />
-                      </button>
-                    </div>
-                  </>
-                )}
-                <div className="h-full w-full flex flex-col justify-center items-center">
-                  <div className="flex w-full pb-4 z-10 justify-center shadow-sm">
-                    <div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-gray-900 sm:mx-0 sm:h-10 sm:w-10">
-                      <ArrowUpTrayIcon
-                        className="h-6 w-6 text-blue-600"
-                        aria-hidden="true"
-                      />
-                    </div>
-                    <div className="mt-4 text-center sm:ml-4 sm:text-left">
-                      <Dialog.Title
-                        as="h3"
-                        className="text-lg font-medium dark:text-white leading-10 text-gray-900"
-                      >
-                        {showExamples ? "Select an example" : "Import"}
-                      </Dialog.Title>
-                    </div>
-                  </div>
-                  <div
-                    className={classNames(
-                      "h-full w-full bg-gray-200 dark:bg-gray-900 gap-4 overflow-y-auto scrollbar-hide",
-                      showExamples && !loadingExamples
-                        ? "flex flex-row start justify-start items-start p-9 flex-wrap overflow-auto"
-                        : "flex flex-row justify-center items-center p-4"
-                    )}
-                  >
-                    {!showExamples && (
-                      <div className="flex h-full w-full justify-evenly items-center">
-                        <ButtonBox
-                          size="big"
-                          bgColor="bg-emerald-500 dark:bg-emerald-500/75"
-                          description="Prebuilt Examples"
-                          icon={
-                            <DocumentDuplicateIcon className="h-10 w-10 flex-shrink-0" />
-                          }
-                          onClick={() => {
-                            setShowExamples(true);
-                            handleExamples();
-                          }}
-                          textColor="text-emerald-500 dark:text-emerald-500/75"
-                          title="Examples"
-                        ></ButtonBox>
-                        <ButtonBox
-                          size="big"
-                          bgColor="bg-blue-500 dark:bg-blue-500/75"
-                          description="Import from Local"
-                          icon={
-                            <ComputerDesktopIcon className="h-10 w-10 flex-shrink-0" />
-                          }
-                          onClick={() => {
-                            uploadFlow(false);
-                            setModalOpen(false);
-                          }}
-                          textColor="text-blue-500 dark:text-blue-500/75"
-                          title="Local File"
-                        ></ButtonBox>
-                      </div>
-                    )}
-                    {showExamples && loadingExamples && (
-                      <div className="flex align-middle justify-center items-center">
-                        <LoadingComponent remSize={30} />
-                      </div>
-                    )}
-                    {showExamples &&
-                      !loadingExamples &&
-                      examples.map((example, index) => {
-                        return (
-                          <div key={index}>
-                            {" "}
-                            <ButtonBox
-                              size="small"
-                              bgColor="bg-emerald-500 dark:bg-emerald-500/75"
-                              description={
-                                example.description ?? "Prebuilt Examples"
-                              }
-                              icon={
-                                <DocumentDuplicateIcon className="h-6 w-6 flex-shrink-0" />
-                              }
-                              onClick={() => {
-                                addFlow(example, false);
-                                setModalOpen(false);
-                              }}
-                              textColor="text-emerald-500 dark:text-emerald-500/75"
-                              title={example.name}
-                            ></ButtonBox>
-                          </div>
-                        );
-                      })}
-                  </div>
-                  <div className="bg-white dark:bg-gray-800 w-full h-20 flex items-center justify-center">
-                    <a
-                      href="https://github.com/logspace-ai/langflow_examples"
-                      target="_blank"
-                      className="flex items-center justify-center text-gray-600 dark:text-gray-300"
-                      rel="noreferrer"
-                    >
-                      <svg
-                        width="24"
-                        viewBox="0 0 98 96"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          fill-rule="evenodd"
-                          clip-rule="evenodd"
-                          d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
-                          fill="currentColor"
-                        />
-                      </svg>
-                      <span className="ml-2 ">LangFlow Examples</span>
-                    </a>
-                  </div>
+              </>
+            )}
+
+            <span className={classNames(showExamples ? "pl-8 pr-2" : "pr-2")}>
+              {showExamples ? "Select an example" : "Import"}
+            </span>
+            <ArrowUpTrayIcon
+              className="h-6 w-6 text-gray-800 ml-1 dark:text-white"
+              aria-hidden="true"
+            />
+          </DialogTitle>
+          <DialogDescription>{IMPORT_DIALOG_SUBTITLE}</DialogDescription>
+        </DialogHeader>
+
+        <div
+          className={classNames(
+            "h-full w-full dark:bg-gray-900 overflow-y-auto scrollbar-hide",
+            showExamples && !loadingExamples
+              ? "flex flex-row start justify-center items-start flex-wrap overflow-auto mx-auto"
+              : "flex flex-row justify-center items-center"
+          )}
+        >
+          {!showExamples && (
+            <div className="flex h-full w-full justify-evenly items-center">
+              <ButtonBox
+                size="big"
+                bgColor="bg-emerald-500 dark:bg-emerald-500/75"
+                description="Prebuilt Examples"
+                icon={
+                  <DocumentDuplicateIcon className="h-10 w-10 flex-shrink-0" />
+                }
+                onClick={() => {
+                  setShowExamples(true);
+                  handleExamples();
+                }}
+                textColor="text-emerald-500 dark:text-emerald-500/75"
+                title="Examples"
+              ></ButtonBox>
+              <ButtonBox
+                size="big"
+                bgColor="bg-blue-500 dark:bg-blue-500/75"
+                description="Import from Local"
+                icon={
+                  <ComputerDesktopIcon className="h-10 w-10 flex-shrink-0" />
+                }
+                onClick={() => {
+                  uploadFlow();
+                  setModalOpen(false);
+                }}
+                textColor="text-blue-500 dark:text-blue-500/75"
+                title="Local File"
+              ></ButtonBox>
+            </div>
+          )}
+          {showExamples && loadingExamples && (
+            <div className="flex align-middle justify-center items-center">
+              <LoadingComponent remSize={30} />
+            </div>
+          )}
+          {showExamples &&
+            !loadingExamples &&
+            examples.map((example, index) => {
+              return (
+                <div key={example.name} className="m-2">
+                  {" "}
+                  <ButtonBox
+                    size="small"
+                    bgColor="bg-emerald-500 dark:bg-emerald-500/75"
+                    description={example.description ?? "Prebuilt Examples"}
+                    icon={
+                      <DocumentDuplicateIcon className="h-6 w-6 flex-shrink-0" />
+                    }
+                    onClick={() => {
+                      addFlow(example, false);
+                      setModalOpen(false);
+                    }}
+                    textColor="text-emerald-500 dark:text-emerald-500/75"
+                    title={example.name}
+                  ></ButtonBox>
                 </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
+              );
+            })}
         </div>
-      </Dialog>
-    </Transition.Root>
+
+        <DialogFooter>
+          <div className="w-full flex items-center justify-center mt-2">
+            <a
+              href="https://github.com/logspace-ai/langflow_examples"
+              target="_blank"
+              className="flex items-center justify-center text-gray-600 dark:text-gray-300"
+              rel="noreferrer"
+            >
+              <svg
+                width="24"
+                viewBox="0 0 98 96"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
+                  fill="currentColor"
+                />
+              </svg>
+              <span className="ml-2 ">LangFlow Examples</span>
+            </a>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   );
 }
diff --git a/src/frontend/src/modals/promptModal/index.tsx b/src/frontend/src/modals/promptModal/index.tsx
index 508042a1c..e2dbef1c8 100644
--- a/src/frontend/src/modals/promptModal/index.tsx
+++ b/src/frontend/src/modals/promptModal/index.tsx
@@ -105,7 +105,7 @@ export default function PromptAreaModal({
                   <div className="bg-gray-200 dark:bg-gray-900 w-full pb-3 flex flex-row-reverse px-4">
                     <button
                       type="button"
-                      className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm"
+                      className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-ring focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:ring-offset-1 sm:ml-3 sm:w-auto sm:text-sm"
                       onClick={() => {
                         checkPrompt(myValue)
                           .then((apiReturn) => {
diff --git a/src/frontend/src/modals/textAreaModal/index.tsx b/src/frontend/src/modals/textAreaModal/index.tsx
index 0a13413ff..a72f74643 100644
--- a/src/frontend/src/modals/textAreaModal/index.tsx
+++ b/src/frontend/src/modals/textAreaModal/index.tsx
@@ -104,7 +104,7 @@ export default function TextAreaModal({
                   <div className="bg-gray-200 dark:bg-gray-900 w-full pb-3 flex flex-row-reverse px-4">
                     <button
                       type="button"
-                      className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm"
+                      className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:ring-offset-1 sm:ml-3 sm:w-auto sm:text-sm"
                       onClick={() => {
                         setModalOpen(false);
                       }}
diff --git a/src/frontend/src/pages/CommunityPage/components/cardComponent/index.tsx b/src/frontend/src/pages/CommunityPage/components/cardComponent/index.tsx
deleted file mode 100644
index 9985ea956..000000000
--- a/src/frontend/src/pages/CommunityPage/components/cardComponent/index.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import { GitFork } from "lucide-react";
-import { useContext } from "react";
-import { useNavigate } from "react-router-dom";
-import { TabsContext } from "../../../../contexts/tabsContext";
-import { FlowType } from "../../../../types/flow";
-import { gradients } from "../../../../utils";
-import {
-  CardTitle,
-  CardDescription,
-  CardFooter,
-  Card,
-  CardHeader,
-} from "../../../../components/ui/card";
-import { Button } from "../../../../components/ui/button";
-
-export const CardComponent = ({ flow, id }: { flow: FlowType; id: string }) => {
-  const { addFlow } = useContext(TabsContext);
-  const navigate = useNavigate();
-
-  return (
-    <Card className="group">
-      <CardHeader>
-        <CardTitle className="flex justify-between items-start">
-          <div className="flex gap-4 items-center">
-            <span
-              className={
-                "rounded-full w-8 h-8 flex items-center justify-center text-2xl " +
-                gradients[parseInt(flow.id.slice(0, 6), 16) % gradients.length]
-              }
-            ></span>
-            <span className="flex-1 truncate-doubleline">{flow.name}</span>
-          </div>
-        </CardTitle>
-        <CardDescription className="pt-2 pb-2">
-          <div className="truncate-doubleline">
-            {flow.description}
-            {/* {flow.description} */}
-          </div>
-        </CardDescription>
-      </CardHeader>
-
-      <CardFooter>
-        <div className="flex gap-2 w-full justify-between items-end">
-          <div className="flex flex-wrap gap-2">
-            {/* <Badge variant="secondary">Agent</Badge>
-            <Badge variant="secondary">
-              <div className="w-3">
-                <OpenAiIcon />
-              </div>
-              <span className="text-base">&nbsp;</span>OpenAI+
-            </Badge> */}
-          </div>
-          <Button
-            variant="outline"
-            size="sm"
-            className="whitespace-nowrap "
-            onClick={() => {
-              addFlow(flow, true).then((id) => {
-                navigate("/flow/" + id);
-              });
-            }}
-          >
-            <GitFork className="w-4 mr-2" />
-            Fork Example
-          </Button>
-        </div>
-      </CardFooter>
-    </Card>
-  );
-};
diff --git a/src/frontend/src/pages/CommunityPage/index.tsx b/src/frontend/src/pages/CommunityPage/index.tsx
index 92e5e253c..6b8322531 100644
--- a/src/frontend/src/pages/CommunityPage/index.tsx
+++ b/src/frontend/src/pages/CommunityPage/index.tsx
@@ -18,6 +18,7 @@ import {
   Plus,
   Home,
   Users2,
+  GitFork,
 } from "lucide-react";
 import { TabsContext } from "../../contexts/tabsContext";
 import AlertDropdown from "../../alerts/alertDropDown";
@@ -37,7 +38,8 @@ import {
 } from "../../controllers/API";
 import { MenuBar } from "../../components/headerComponent/components/menuBar";
 import { FlowType } from "../../types/flow";
-import { CardComponent } from "./components/cardComponent";
+import { CardComponent } from "../../components/cardComponent";
+import { useNavigate } from "react-router-dom";
 export default function CommunityPage() {
   const { flows, setTabId, downloadFlows, uploadFlows, addFlow } =
     useContext(TabsContext);
@@ -61,6 +63,7 @@ export default function CommunityPage() {
         })
       );
   }
+  const navigate = useNavigate();
 
   useEffect(() => {
     handleExamples();
@@ -87,7 +90,19 @@ export default function CommunityPage() {
       <div className="w-full p-4 grid gap-4 md:grid-cols-2 lg:grid-cols-4">
         {!loadingExamples &&
           examples.map((flow, idx) => (
-            <CardComponent key={idx} flow={flow} id={flow.id} />
+            <CardComponent key={idx} flow={flow} id={flow.id} button={<Button
+              variant="outline"
+              size="sm"
+              className="whitespace-nowrap "
+              onClick={() => {
+                addFlow(flow, true).then((id) => {
+                  navigate("/flow/" + id);
+                });
+              }}
+            >
+              <GitFork className="w-4 mr-2" />
+              Fork Example
+            </Button>}/>
           ))}
       </div>
     </div>
diff --git a/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
index 6878ad3c4..7b80e1cff 100644
--- a/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
@@ -12,7 +12,7 @@ export default function DisclosureComponent({
       {({ open }) => (
         <>
           <div>
-            <Disclosure.Button className="select-none bg-gray-50 dark:bg-gray-700/60 dark:border-y-gray-600 w-full flex justify-between items-center -mt-px px-3 py-2 border-y border-y-gray-200">
+            <Disclosure.Button className="select-none bg-muted dark:bg-gray-700/60 dark:border-y-gray-600 w-full flex justify-between items-center -mt-px px-3 py-2 border-y border-y-gray-200">
               <div className="flex gap-4">
                 <Icon className="w-6 text-gray-800 dark:text-white/80" />
                 <span className="flex items-center text-sm text-gray-800 dark:text-white/80 font-medium">
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index 9a153bac9..fd8f23dbd 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -25,6 +25,7 @@ import { TabsContext } from "../../../../contexts/tabsContext";
 import { Separator } from "../../../../components/ui/separator";
 import { alertContext } from "../../../../contexts/alertContext";
 import { updateFlowInDatabase } from "../../../../controllers/API";
+import { INPUT_STYLE } from "../../../../constants";
 
 export default function ExtraSidebar() {
   const { data } = useContext(typesContext);
@@ -132,7 +133,10 @@ export default function ExtraSidebar() {
           name="search"
           id="search"
           placeholder="Search nodes"
-          className="dark:text-white focus:outline-none block w-full rounded-md py-1.5 ps-3 pr-9 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 sm:text-sm sm:leading-6 dark:ring-0 dark:bg-[#2d3747] dark:focus:outline-none"
+          className={
+            INPUT_STYLE +
+            "border-1 dark:border-slate-600 dark:border-0.5 dark:ring-0 focus-visible:dark:ring-0 focus-visible:dark:ring-offset-1 rounded-md 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"
+          }
           onChange={(e) => {
             handleSearchInput(e.target.value);
             setSearch(e.target.value);
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index 068bdf27f..95e539d18 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -43,7 +43,7 @@ const NodeToolbarComponent = (props) => {
         <span className="isolate inline-flex rounded-md shadow-sm">
           <ShadTooltip delayDuration={1000} content="Delete" side="top">
             <button
-              className="hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative inline-flex items-center rounded-l-md bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
+              className="hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative inline-flex items-center rounded-l-md bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10"
               onClick={() => {
                 props.deleteNode(props.data.id);
               }}
@@ -56,8 +56,8 @@ const NodeToolbarComponent = (props) => {
             <button
               className={classNames(
                 nodeLength > 0
-                  ? "hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
-                  : "hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10 rounded-r-md"
+                  ? "hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10"
+                  : "hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10 rounded-r-md"
               )}
               onClick={(event) => {
                 event.preventDefault();
@@ -83,7 +83,7 @@ const NodeToolbarComponent = (props) => {
           {nodeLength > 0 && (
             <ShadTooltip delayDuration={1000} content="Edit" side="top">
               <button
-                className="hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10 rounded-r-md"
+                className="hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10 rounded-r-md"
                 onClick={(event) => {
                   event.preventDefault();
                   props.openPopUp(<EditNodeModal data={props.data} />);
@@ -96,7 +96,7 @@ const NodeToolbarComponent = (props) => {
 
           {/* 
           <Menu as="div" className="relative inline-block text-left z-100">
-            <button className="hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10 rounded-r-md">
+            <button className="hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10 rounded-r-md">
               <div>
                 <Menu.Button className="flex items-center">
                   <EllipsisVerticalIcon
@@ -128,7 +128,7 @@ const NodeToolbarComponent = (props) => {
                           }}
                           className={classNames(
                             active
-                              ? "bg-gray-100 text-gray-900"
+                              ? "bg-muted text-gray-900"
                               : "text-gray-700",
                             "w-full group flex items-center px-4 py-2 text-sm"
                           )}
@@ -168,7 +168,7 @@ const NodeToolbarComponent = (props) => {
                           }}
                           className={classNames(
                             active
-                              ? "bg-gray-100 text-gray-900"
+                              ? "bg-muted text-gray-900"
                               : "text-gray-700",
                             "w-full group flex items-center px-4 py-2 text-sm"
                           )}
diff --git a/src/frontend/src/pages/MainPage/index.tsx b/src/frontend/src/pages/MainPage/index.tsx
index 98d8c1a0d..ea064dadf 100644
--- a/src/frontend/src/pages/MainPage/index.tsx
+++ b/src/frontend/src/pages/MainPage/index.tsx
@@ -1,11 +1,11 @@
 import { useContext, useEffect } from "react";
-import { Download, Upload, Plus, Home } from "lucide-react";
+import { Download, Upload, Plus, Home, ExternalLink } from "lucide-react";
 import { TabsContext } from "../../contexts/tabsContext";
 import { Button } from "../../components/ui/button";
-import { CardComponent } from "./components/cardComponent";
-import { useNavigate } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
+import { CardComponent } from "../../components/cardComponent";
 export default function HomePage() {
-  const { flows, setTabId, downloadFlows, uploadFlows, addFlow } =
+  const { flows, setTabId, downloadFlows, uploadFlows, addFlow, removeFlow } =
     useContext(TabsContext);
   useEffect(() => {
     setTabId("");
@@ -50,13 +50,32 @@ export default function HomePage() {
           </Button>
         </div>
       </div>
-      <span className="flex pb-8 px-6 text-muted-foreground w-[60%]">
+      <span className="flex pb-14 px-6 text-muted-foreground w-[60%]">
         Manage your personal projects. Download or upload your complete project
         collection.
       </span>
       <div className="w-full p-4 grid gap-4 md:grid-cols-2 lg:grid-cols-4">
         {flows.map((flow, idx) => (
-          <CardComponent key={idx} flow={flow} id={flow.id} />
+          <CardComponent
+            key={idx}
+            flow={flow}
+            id={flow.id}
+            button={
+              <Link to={"/flow/" + flow.id}>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="whitespace-nowrap "
+                >
+                  <ExternalLink className="w-4 mr-2" />
+                  Edit Flow
+                </Button>
+              </Link>
+            }
+            onDelete={() => {
+              removeFlow(flow.id);
+            }}
+          />
         ))}
       </div>
     </div>
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index 419710cfe..060bd6d05 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@@ -13,6 +13,8 @@ export type InputComponentType = {
   password: boolean;
   disableCopyPaste?: boolean;
   editNode?: boolean;
+  onChangePass?: (value: boolean | boolean) => void;
+  showPass?: boolean;
 };
 export type ToggleComponentType = {
   enabled: boolean;
@@ -24,6 +26,7 @@ export type DropDownComponentType = {
   options: string[];
   onSelect: (value: string) => void;
   editNode?: boolean;
+  numberOfOptions?: number;
 };
 export type ParameterComponentType = {
   data: NodeDataType;
@@ -40,6 +43,7 @@ export type InputListComponentType = {
   value: string[];
   onChange: (value: string[]) => void;
   disabled: boolean;
+  editNode?: boolean;
 };
 
 export type TextAreaComponentType = {
diff --git a/src/frontend/src/utils.ts b/src/frontend/src/utils.ts
index f96ff0780..b942f9d53 100644
--- a/src/frontend/src/utils.ts
+++ b/src/frontend/src/utils.ts
@@ -55,7 +55,7 @@ export function classNames(...classes: Array<string>) {
   return classes.filter(Boolean).join(" ");
 }
 
-export const limitScrollFieldsModal = 7;
+export const limitScrollFieldsModal = 10;
 
 export enum TypeModal {
   TEXT = 1,