diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index f3e715558..e9caf7cc1 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -86,7 +86,7 @@ export default function GenericNode({
         )}
       >
         <div className="flex w-full items-center justify-between gap-8 rounded-t-lg border-b bg-muted p-4  ">
-          <div className="flex w-full items-center gap-2 truncate text-lg">
+          <div className="flex w-full items-center truncate">
             <Icon
               strokeWidth={1.5}
               className="h-10 w-10 rounded p-1"
@@ -134,25 +134,25 @@ export default function GenericNode({
                   <div
                     className={classNames(
                       validationStatus && validationStatus.valid
-                        ? "h-4 w-4 rounded-full bg-status-green opacity-100"
-                        : "hidden h-4 w-4 animate-spin rounded-full bg-ring opacity-0",
-                      "hover: absolute w-4 transition-all duration-200 ease-in-out hover:text-ring"
+                        ? "w-4 h-4 rounded-full bg-status-red opacity-100"
+                        : "w-4 h-4 rounded-full bg-ring opacity-0 hidden animate-spin",
+                      "absolute w-4 hover:text-accent-foreground hover:transition-all ease-in-out duration-200"
                     )}
                   ></div>
                   <div
                     className={classNames(
                       validationStatus && !validationStatus.valid
-                        ? "h-4 w-4 rounded-full  bg-status-red opacity-100"
-                        : "hidden h-4 w-4 animate-spin rounded-full bg-ring opacity-0",
-                      "hover: absolute w-4 transition-all duration-200 ease-in-out hover:text-ring"
+                        ? "w-4 h-4 rounded-full  bg-status-red opacity-100"
+                        : "w-4 h-4 rounded-full bg-ring opacity-0 hidden animate-spin",
+                      "absolute w-4 hover:text-accent-foreground hover:transition-all ease-in-out duration-200"
                     )}
                   ></div>
                   <div
                     className={classNames(
                       !validationStatus || isBuilding
-                        ? "h-4 w-4 rounded-full  bg-status-yellow opacity-100"
-                        : "hidden h-4 w-4 animate-spin rounded-full bg-ring opacity-0",
-                      "absolute w-4 transition-all duration-200 ease-in-out hover:text-ring"
+                        ? "w-4 h-4 rounded-full  bg-status-yellow opacity-100"
+                        : "w-4 h-4 rounded-full bg-ring opacity-0 hidden animate-spin",
+                      "absolute w-4 hover:text-accent-foreground hover:transition-all ease-in-out duration-200"
                     )}
                   ></div>
                 </div>
diff --git a/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx b/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
index 5a16390bb..857bf0fb4 100644
--- a/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
+++ b/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
@@ -86,7 +86,7 @@ export default function SingleAlert({
               {dropItem.link ? (
                 <Link
                   to={dropItem.link}
-                  className="whitespace-nowrap font-medium text-info-foreground hover:text-ring"
+                  className="whitespace-nowrap font-medium text-info-foreground hover:text-accent-foreground"
                 >
                   Details
                 </Link>
diff --git a/src/frontend/src/alerts/notice/index.tsx b/src/frontend/src/alerts/notice/index.tsx
index 9af51a531..eeb00cd42 100644
--- a/src/frontend/src/alerts/notice/index.tsx
+++ b/src/frontend/src/alerts/notice/index.tsx
@@ -48,7 +48,7 @@ export default function NoticeAlert({
               {link !== "" ? (
                 <Link
                   to={link}
-                  className="whitespace-nowrap font-medium text-info-foreground hover:text-ring"
+                  className="whitespace-nowrap font-medium text-info-foreground hover:text-accent-foreground"
                 >
                   Details
                 </Link>
diff --git a/src/frontend/src/components/ExtraSidebarComponent/index.tsx b/src/frontend/src/components/ExtraSidebarComponent/index.tsx
index 6bc95cde7..7efef4ec0 100644
--- a/src/frontend/src/components/ExtraSidebarComponent/index.tsx
+++ b/src/frontend/src/components/ExtraSidebarComponent/index.tsx
@@ -41,8 +41,8 @@ export default function ExtraSidebar() {
                             className={classNames(
                               item.href.split("/")[2] === current[4]
                                 ? "text-ring"
-                                : "text-ring group-hover:text-ring",
-                              "mr-3 h-6 w-6 flex-shrink-0"
+                                : "text-ring group-hover:text-accent-foreground",
+                              "mr-3 flex-shrink-0 h-6 w-6"
                             )}
                           />
                           {item.name}
@@ -65,14 +65,14 @@ export default function ExtraSidebar() {
                               )}
                             >
                               <item.icon
-                                className="mr-3 h-6 w-6 flex-shrink-0 text-ring group-hover:text-ring"
+                                className="mr-3 h-6 w-6 flex-shrink-0 text-ring group-hover:text-accent-foreground"
                                 aria-hidden="true"
                               />
                               <span className="flex-1">{item.name}</span>
                               <svg
                                 className={classNames(
-                                  open ? "rotate-90 text-ring" : "text-ring",
-                                  "transition-rotate ml-3 h-5 w-5 flex-shrink-0 duration-150 ease-in-out group-hover:text-ring"
+                                  open ? "text-ring rotate-90" : "text-ring",
+                                  "ml-3 h-5 w-5 flex-shrink-0 transition-rotate duration-150 ease-in-out group-hover:text-accent-foreground"
                                 )}
                                 viewBox="0 0 20 20"
                                 aria-hidden="true"
diff --git a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
index 15c885cbc..41a9f4164 100644
--- a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
+++ b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
@@ -177,7 +177,7 @@ export default function BuildTrigger({
               ) : isBuilding ? (
                 <Loading strokeWidth={1.5} className="stroke-build-trigger" />
               ) : (
-                <Zap className="sh-6 w-6 fill-build-trigger stroke-build-trigger stroke-1" />
+                <Zap strokeWidth={1.5} className="sh-6 w-6 fill-build-trigger stroke-1 stroke-build-trigger" />
               )}
             </div>
           </button>
diff --git a/src/frontend/src/components/codeAreaComponent/index.tsx b/src/frontend/src/components/codeAreaComponent/index.tsx
index 0863277c6..dab3d9699 100644
--- a/src/frontend/src/components/codeAreaComponent/index.tsx
+++ b/src/frontend/src/components/codeAreaComponent/index.tsx
@@ -73,7 +73,7 @@ export default function CodeAreaComponent({
           }}
         >
           {!editNode && (
-            <ExternalLink className="ml-3 h-6 w-6  hover:text-ring" />
+            <ExternalLink strokeWidth={1.5} className="w-6 h-6 hover:text-accent-foreground  ml-3" />
           )}
         </button>
       </div>
diff --git a/src/frontend/src/components/headerComponent/index.tsx b/src/frontend/src/components/headerComponent/index.tsx
index 9ce87a43c..342054b10 100644
--- a/src/frontend/src/components/headerComponent/index.tsx
+++ b/src/frontend/src/components/headerComponent/index.tsx
@@ -75,7 +75,7 @@ export default function Header() {
             href="https://github.com/logspace-ai/langflow"
             target="_blank"
             rel="noreferrer"
-            className="inline-flex h-9 items-center justify-center rounded-md border border-input px-3 pr-0 text-sm font-medium text-muted-foreground shadow-sm ring-offset-background transition-colors  hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+            className="inline-flex shadow-sm items-center justify-center text-sm font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background text-muted-foreground  border border-input hover:bg-accent hover:text-accent-foreground h-9 px-3 pr-0 rounded-md"
           >
             <FaGithub className="mr-2 h-5 w-5" />
             Star
@@ -89,7 +89,7 @@ export default function Header() {
             rel="noreferrer"
             className="text-muted-foreground"
           >
-            <FaTwitter className="h-5 w-5" />
+            <FaTwitter className="h-5 w-5 hover:text-accent-foreground" />
           </a>
           <a
             href="https://discord.gg/EqksyE2EX9"
@@ -97,12 +97,12 @@ export default function Header() {
             rel="noreferrer"
             className="text-muted-foreground"
           >
-            <FaDiscord className="h-5 w-5" />
+            <FaDiscord className="h-5 w-5 hover:text-accent-foreground" />
           </a>
 
           <Separator orientation="vertical" />
           <button
-            className="text-muted-foreground hover:text-ring "
+            className="text-muted-foreground hover:text-accent-foreground "
             onClick={() => {
               setDark(!dark);
             }}
@@ -114,7 +114,7 @@ export default function Header() {
             )}
           </button>
           <button
-            className="relative text-muted-foreground hover:text-ring"
+            className="text-muted-foreground hover:text-accent-foreground relative"
             onClick={(event: React.MouseEvent<HTMLElement>) => {
               setNotificationCenter(false);
               const { top, left } = (
diff --git a/src/frontend/src/components/inputFileComponent/index.tsx b/src/frontend/src/components/inputFileComponent/index.tsx
index 7284d5265..30e3d729e 100644
--- a/src/frontend/src/components/inputFileComponent/index.tsx
+++ b/src/frontend/src/components/inputFileComponent/index.tsx
@@ -111,7 +111,7 @@ export default function InputFileComponent({
         </span>
         <button onClick={handleButtonClick}>
           {!editNode && !loading && (
-            <FileSearch2 className="ml-3 h-6 w-6 hover:text-ring" />
+            <FileSearch2 strokeWidth={1.5} className="w-6 h-6 hover:text-accent-foreground" />
           )}
           {!editNode && loading && (
             <span className="loading loading-spinner loading-sm pointer-events-none h-8 pl-3"></span>
diff --git a/src/frontend/src/components/inputListComponent/index.tsx b/src/frontend/src/components/inputListComponent/index.tsx
index 0410a07d9..8e2321f1f 100644
--- a/src/frontend/src/components/inputListComponent/index.tsx
+++ b/src/frontend/src/components/inputListComponent/index.tsx
@@ -32,7 +32,7 @@ export default function InputListComponent({
     <div
       className={
         (disabled ? "pointer-events-none cursor-not-allowed" : "") +
-        "flex flex-col gap-3 py-2"
+        "flex flex-col gap-3"
       }
     >
       {inputList.map((i, idx) => {
@@ -67,7 +67,7 @@ export default function InputListComponent({
                   onChange(inputList);
                 }}
               >
-                <Plus className={"h-4 w-4 hover:text-ring"} />
+                <Plus className={"h-4 w-4 hover:text-accent-foreground"} />
               </button>
             ) : (
               <button
diff --git a/src/frontend/src/components/promptComponent/index.tsx b/src/frontend/src/components/promptComponent/index.tsx
index a7a6740b2..16a06b71d 100644
--- a/src/frontend/src/components/promptComponent/index.tsx
+++ b/src/frontend/src/components/promptComponent/index.tsx
@@ -36,7 +36,7 @@ export default function PromptAreaComponent({
         disabled ? "pointer-events-none w-full cursor-not-allowed" : " w-full"
       }
     >
-      <div className="flex w-full items-center">
+      <div className="w-full flex items-center">
         <span
           onClick={() => {
             openPopUp(
@@ -76,7 +76,7 @@ export default function PromptAreaComponent({
             );
           }}
         >
-          {!editNode && <ExternalLink className="h-6 w-6 hover:text-ring " />}
+          {!editNode && <ExternalLink strokeWidth={1.5} className="w-6 h-6 hover:text-accent-foreground " />}
         </button>
       </div>
     </div>
diff --git a/src/frontend/src/components/textAreaComponent/index.tsx b/src/frontend/src/components/textAreaComponent/index.tsx
index 6c127005e..66bcf72bd 100644
--- a/src/frontend/src/components/textAreaComponent/index.tsx
+++ b/src/frontend/src/components/textAreaComponent/index.tsx
@@ -36,8 +36,8 @@ export default function TextAreaComponent({
       <div
         className={
           editNode
-            ? "flex w-full items-center"
-            : "flex w-full items-center gap-3"
+            ? "w-full items-center"
+            : "w-full flex items-center gap-3"
         }
       >
         <span
@@ -79,7 +79,7 @@ export default function TextAreaComponent({
             );
           }}
         >
-          {!editNode && <ExternalLink className="h-6 w-6 hover:text-ring " />}
+          {!editNode && <ExternalLink strokeWidth={1.5} className="w-6 h-6 hover:text-accent-foreground " />}
         </button>
       </div>
     </div>
diff --git a/src/frontend/src/components/ui/button.tsx b/src/frontend/src/components/ui/button.tsx
index 635da79b4..648ce43c9 100644
--- a/src/frontend/src/components/ui/button.tsx
+++ b/src/frontend/src/components/ui/button.tsx
@@ -14,7 +14,7 @@ const buttonVariants = cva(
         outline:
           "border border-input hover:bg-accent hover:text-accent-foreground",
         primary:
-          "border bg-background text-secondary-foreground hover:bg-background/80 hover:shadow-sm",
+          "border bg-background text-secondary-foreground hover:bg-background/80 dark:hover:bg-background/10 hover:shadow-sm",
         secondary:
           "border border-muted bg-muted text-secondary-foreground hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
diff --git a/src/frontend/src/components/ui/dialog.tsx b/src/frontend/src/components/ui/dialog.tsx
index 4df519490..f17576064 100644
--- a/src/frontend/src/components/ui/dialog.tsx
+++ b/src/frontend/src/components/ui/dialog.tsx
@@ -44,7 +44,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed z-50 grid w-full gap-4 rounded-b-lg border bg-background p-6 shadow-lg animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:max-w-lg sm:rounded-lg sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0",
+        "fixed gap-3 z-50 grid w-full rounded-b-lg border bg-background p-6 shadow-lg animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:max-w-lg sm:rounded-lg sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0",
         className
       )}
       {...props}
diff --git a/src/frontend/src/contexts/tabsContext.tsx b/src/frontend/src/contexts/tabsContext.tsx
index 3455283d6..be8afddb2 100644
--- a/src/frontend/src/contexts/tabsContext.tsx
+++ b/src/frontend/src/contexts/tabsContext.tsx
@@ -288,7 +288,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
     // create a link element and set its properties
     const link = document.createElement("a");
     link.href = jsonString;
-    link.download = `${flowName}.json`;
+    link.download = `${flowName && flowName != "" ? flowName : flows.find((f) => f.id === tabId).name}.json`;
 
     // simulate a click on the link element to trigger the download
     link.click();
diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx
index 664e99e05..dedcbf332 100644
--- a/src/frontend/src/modals/ApiModal/index.tsx
+++ b/src/frontend/src/modals/ApiModal/index.tsx
@@ -266,7 +266,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
         <DialogHeader>
           <DialogTitle className="flex items-center">
             <span className="pr-2">Code</span>
-            <Code2 className="h-6 w-6 pl-1 text-primary " aria-hidden="true" />
+            <Code2 strokeWidth={1.5} className="h-6 w-6 text-primary pl-1 " aria-hidden="true" />
           </DialogTitle>
           <DialogDescription>{EXPORT_CODE_DIALOG}</DialogDescription>
         </DialogHeader>
@@ -291,7 +291,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
             </TabsList>
             <div className="float-right">
               <button
-                className="flex items-center gap-1.5 rounded bg-none p-1 text-xs text-ring "
+                className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-ring hover:text-foreground"
                 onClick={copyToClipboard}
               >
                 {isCopied ? <Check size={18} /> : <Clipboard size={15} />}
diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx
index 2cada903b..1d0d912eb 100644
--- a/src/frontend/src/modals/EditNodeModal/index.tsx
+++ b/src/frontend/src/modals/EditNodeModal/index.tsx
@@ -81,7 +81,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
   return (
     <Dialog open={true} onOpenChange={setModalOpen}>
       <DialogTrigger asChild></DialogTrigger>
-      <DialogContent className="lg:max-w-[700px] ">
+      <DialogContent className="lg:max-w-[700px] sm:max-w-[600px]">
         <DialogHeader>
           <DialogTitle className="flex items-center">
             <span className="pr-2">{data.type}</span>
@@ -89,16 +89,16 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
           </DialogTitle>
           <DialogDescription>
             {data.node?.description}
-            <div className="flex pt-4">
+            <div className="flex pt-3">
               <Variable className="h-5 w-5 stroke-2 pe-1 text-muted-foreground "></Variable>
-              <span className="text-sm font-semibold text-primary ">
+              <span className="text-sm font-semibold text-primary">
                 Parameters
               </span>
             </div>
           </DialogDescription>
         </DialogHeader>
 
-        <div className="flex h-fit max-h-[350px] w-full">
+        <div className="flex h-fit max-h-[400px] w-full">
           <div
             className={classNames(
               "w-full rounded-lg border-[1px] border-input bg-background",
@@ -134,8 +134,8 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
                             data.node.template[t].type === "int")
                       )
                       .map((n, i) => (
-                        <TableRow key={i} className="h-10 ">
-                          <TableCell className="p-0 text-center text-sm  text-foreground">
+                        <TableRow key={i} className="h-10">
+                          <TableCell className="p-0 text-center text-sm text-foreground truncate sm:px-3">
                             {data.node.template[n].name
                               ? data.node.template[n].name
                               : data.node.template[n].display_name}
diff --git a/src/frontend/src/modals/NodeModal/index.tsx b/src/frontend/src/modals/NodeModal/index.tsx
index 364712078..83b672adf 100644
--- a/src/frontend/src/modals/NodeModal/index.tsx
+++ b/src/frontend/src/modals/NodeModal/index.tsx
@@ -63,7 +63,7 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
                 <div className=" absolute right-0 top-0 z-50 hidden pr-4 pt-4 sm:block">
                   <button
                     type="button"
-                    className="rounded-md text-ring hover:text-ring"
+                    className="rounded-md text-ring hover:text-accent-foreground"
                     onClick={() => {
                       setModalOpen(false);
                     }}
diff --git a/src/frontend/src/modals/codeAreaModal/index.tsx b/src/frontend/src/modals/codeAreaModal/index.tsx
index 2121da963..be6e2e1fb 100644
--- a/src/frontend/src/modals/codeAreaModal/index.tsx
+++ b/src/frontend/src/modals/codeAreaModal/index.tsx
@@ -53,7 +53,8 @@ export default function CodeAreaModal({
           <DialogTitle className="flex items-center">
             <span className="pr-2">Edit Code</span>
             <TerminalSquare
-              className="h-6 w-6 pl-1 text-primary "
+            strokeWidth={1.5}
+              className="h-6 w-6 text-primary pl-1 "
               aria-hidden="true"
             />
           </DialogTitle>
diff --git a/src/frontend/src/modals/exportModal/index.tsx b/src/frontend/src/modals/exportModal/index.tsx
index ab65129ec..e65eb537e 100644
--- a/src/frontend/src/modals/exportModal/index.tsx
+++ b/src/frontend/src/modals/exportModal/index.tsx
@@ -47,7 +47,8 @@ export default function ExportModal() {
           <DialogTitle className="flex items-center">
             <span className="pr-2">Export</span>
             <Download
-              className="h-6 w-6 pl-1 text-foreground"
+            strokeWidth={1.5}
+              className="h-6 w-6 text-foreground pl-1"
               aria-hidden="true"
             />
           </DialogTitle>
diff --git a/src/frontend/src/modals/genericModal/index.tsx b/src/frontend/src/modals/genericModal/index.tsx
index fa4b20408..e3894e00b 100644
--- a/src/frontend/src/modals/genericModal/index.tsx
+++ b/src/frontend/src/modals/genericModal/index.tsx
@@ -56,7 +56,8 @@ export default function GenericModal({
           <DialogTitle className="flex items-center">
             <span className="pr-2">{myModalTitle}</span>
             <FileText
-              className="h-6 w-6 pl-1 text-primary "
+            strokeWidth={1.5}
+              className="h-6 w-6 text-primary pl-1 "
               aria-hidden="true"
             />
           </DialogTitle>
diff --git a/src/frontend/src/modals/importModal/index.tsx b/src/frontend/src/modals/importModal/index.tsx
index 31a344808..ffd51c8d0 100644
--- a/src/frontend/src/modals/importModal/index.tsx
+++ b/src/frontend/src/modals/importModal/index.tsx
@@ -160,7 +160,7 @@ export default function ImportModal() {
                     bgColor="bg-medium-emerald "
                     description={example.description ?? "Prebuilt Examples"}
                     icon={
-                      <DocumentDuplicateIcon className="h-6 w-6 flex-shrink-0" />
+                      <DocumentDuplicateIcon strokeWidth={1.5} className="h-6 w-6 flex-shrink-0" />
                     }
                     onClick={() => {
                       addFlow(example, false);
diff --git a/src/frontend/src/modals/promptModal/index.tsx b/src/frontend/src/modals/promptModal/index.tsx
index 203e4bbfd..600750072 100644
--- a/src/frontend/src/modals/promptModal/index.tsx
+++ b/src/frontend/src/modals/promptModal/index.tsx
@@ -62,7 +62,7 @@ export default function PromptAreaModal({
                 <div className=" absolute right-0 top-0 z-50 hidden pr-4 pt-4 sm:block">
                   <button
                     type="button"
-                    className="rounded-md text-ring hover:text-ring"
+                    className="rounded-md text-ring hover:text-accent-foreground"
                     onClick={() => {
                       setModalOpen(false);
                     }}
diff --git a/src/frontend/src/modals/textAreaModal/index.tsx b/src/frontend/src/modals/textAreaModal/index.tsx
index b7528651d..84e4044ff 100644
--- a/src/frontend/src/modals/textAreaModal/index.tsx
+++ b/src/frontend/src/modals/textAreaModal/index.tsx
@@ -61,7 +61,7 @@ export default function TextAreaModal({
                 <div className=" absolute right-0 top-0 z-50 hidden pr-4 pt-4 sm:block">
                   <button
                     type="button"
-                    className="rounded-md text-ring hover:text-ring"
+                    className="rounded-md text-ring hover:text-accent-foreground"
                     onClick={() => {
                       setModalOpen(false);
                     }}