From a09652ca5f6c2fc808e763b1698c025155782498 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <62335616+lucaseduoli@users.noreply.github.com>
Date: Fri, 8 Nov 2024 14:33:52 -0300
Subject: [PATCH] fix: refactor loading of main page, use new Sidebar in main
 page, fix small UI bugs (#4451)

* Tighten space between main page sidebar buttons

* Fixed skeleton size

* Added playground button back

* Updated no components and flows state

* Update default icon to Workflow

* Fixed size of list cards

* Removed browse store

* Removed playground button

* Removed black background from empty folder state

* Update empty state color

* Fix color of empty state

* fix text not selectable

* updated border color

* added shadow only on hover

* Remove JSON from Download JSON

* Fixed colors and weight of tabs on home page

* Fixed padding on list and grid components

* Update icons that take long to load

* Fixed icon and bg color for home tiles

* Removed unused code

* removed placeholder data for skeleton to not appear on first load

* Make onSuccess refetch the queries so that the loading waits for it

* Removed unused divs on foldersidebarnav

* Refactor sidebar buttons to use new shadcn sidebar

* Created skeletons for folder, grid and list

* Added new sidebar size

* Use new sidebar button on header and implemented animation

* Changed icon to getIcon

* Added sidebar provider and fixed loading states of the main page

* Removed folder buttons on emptyPage

* Fixed foldername to appear immediatly, and fixed loading states for the folders

* Removed unused state from folders store

* Removed unused states from folders store type

* Added new icon

* fixed modals component to not show a trash icon

* Changed icons to load immediatly

* Added empty folder condition to not display header info

* Added conditions to show loading state until everything loads

* Created empty folder state

* Changed empty page to correct colors

* Added skeletons while flows of the folder are loading

* Removed shadow from text

* Fixed font chivo taking long time to load

* Fix adding new folder not redirecting

* [autofix.ci] apply automated fixes

* Fixed colors and paddings on list and grid components

* Re added tooltips to upload and create folders

* fix input for name editing

* Fix tests

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
---
 src/frontend/index.html                       |   6 +-
 .../components/sideBarFolderButtons/index.tsx | 396 +++++++++---------
 .../sidebarFolderSkeleton/index.tsx           |   3 +-
 .../folderSidebarComponent/index.tsx          |  18 +-
 src/frontend/src/components/ui/sidebar.tsx    |   1 +
 .../API/queries/flows/use-post-add-flow.ts    |   2 +
 .../API/queries/folders/use-get-folder.ts     |   1 -
 .../API/queries/folders/use-post-folders.ts   |   4 +-
 .../TemplateCardComponent/index.tsx           |  17 +-
 .../MainPage/components/dropdown/index.tsx    |  10 +-
 .../pages/MainPage/components/grid/index.tsx  |  44 +-
 .../components/gridSkeleton/index.tsx         |  34 ++
 .../MainPage/components/header/index.tsx      | 179 ++++----
 .../pages/MainPage/components/list/index.tsx  |  90 ++--
 .../components/listSkeleton/index.tsx         |  33 ++
 .../components/modalsComponent/index.tsx      |  41 ++
 .../oldComponents/modalsComponent/index.tsx   |  11 +-
 .../MainPage/pages/emptyFolder/index.tsx      |  45 ++
 .../pages/MainPage/pages/emptyPage/index.tsx  | 137 ++----
 .../pages/MainPage/pages/homePage/index.tsx   |  82 ++--
 .../src/pages/MainPage/pages/index.tsx        | 103 ++---
 .../MainPage/utils/get-template-style.ts      |  29 +-
 src/frontend/src/stores/foldersStore.tsx      |   3 -
 src/frontend/src/style/applies.css            |   4 +-
 src/frontend/src/style/index.css              |   1 +
 .../src/types/zustand/folders/index.ts        |   2 -
 src/frontend/src/utils/reactflowUtils.ts      |   1 +
 src/frontend/src/utils/styleUtils.ts          |   6 +
 src/frontend/tailwind.config.mjs              |   1 +
 .../tests/core/features/folders.spec.ts       |  24 +-
 30 files changed, 697 insertions(+), 631 deletions(-)
 create mode 100644 src/frontend/src/pages/MainPage/components/gridSkeleton/index.tsx
 create mode 100644 src/frontend/src/pages/MainPage/components/listSkeleton/index.tsx
 create mode 100644 src/frontend/src/pages/MainPage/components/modalsComponent/index.tsx
 create mode 100644 src/frontend/src/pages/MainPage/pages/emptyFolder/index.tsx

diff --git a/src/frontend/index.html b/src/frontend/index.html
index ff9e78430..eb32a45fd 100644
--- a/src/frontend/index.html
+++ b/src/frontend/index.html
@@ -9,11 +9,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Chivo:ital,wght@0,100..900;1,100..900&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Chivo:ital,wght@0,100..900;1,100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap"
       rel="stylesheet"
     />
     <script
diff --git a/src/frontend/src/components/folderSidebarComponent/components/sideBarFolderButtons/index.tsx b/src/frontend/src/components/folderSidebarComponent/components/sideBarFolderButtons/index.tsx
index 32e229a38..06988134e 100644
--- a/src/frontend/src/components/folderSidebarComponent/components/sideBarFolderButtons/index.tsx
+++ b/src/frontend/src/components/folderSidebarComponent/components/sideBarFolderButtons/index.tsx
@@ -5,6 +5,17 @@ import {
   SelectItem,
   SelectTrigger,
 } from "@/components/ui/select-custom";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarTrigger,
+} from "@/components/ui/sidebar";
 import {
   usePatchFolders,
   usePostFolders,
@@ -18,7 +29,7 @@ import { getObjectsFromFilelist } from "@/helpers/get-objects-from-filelist";
 import useUploadFlow from "@/hooks/flows/use-upload-flow";
 import { useIsFetching, useIsMutating } from "@tanstack/react-query";
 import { useEffect, useRef, useState } from "react";
-import { useParams } from "react-router-dom";
+import { useLocation, useParams } from "react-router-dom";
 import { FolderType } from "../../../../pages/MainPage/entities";
 import useAlertStore from "../../../../stores/alertStore";
 import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
@@ -26,25 +37,28 @@ import { useFolderStore } from "../../../../stores/foldersStore";
 import { handleKeyDown } from "../../../../utils/reactflowUtils";
 import { cn } from "../../../../utils/utils";
 import IconComponent from "../../../genericIconComponent";
-import { Button, buttonVariants } from "../../../ui/button";
+import { Button } from "../../../ui/button";
 import { Input } from "../../../ui/input";
 import useFileDrop from "../../hooks/use-on-file-drop";
 import { SidebarFolderSkeleton } from "../sidebarFolderSkeleton";
 
 type SideBarFoldersButtonsComponentProps = {
-  pathname: string;
   handleChangeFolder?: (id: string) => void;
   handleDeleteFolder?: (item: FolderType) => void;
-  folders: FolderType[] | undefined;
-  loading?: boolean;
 };
 const SideBarFoldersButtonsComponent = ({
-  pathname,
   handleChangeFolder,
   handleDeleteFolder,
-  folders = [],
-  loading,
 }: SideBarFoldersButtonsComponentProps) => {
+  const location = useLocation();
+  const pathname = location.pathname;
+  const folders = useFolderStore((state) => state.folders);
+
+  const isFetchingFolders = !!useIsFetching({
+    queryKey: ["useGetFolders"],
+    exact: false,
+  });
+  const loading = !folders;
   const refInput = useRef<HTMLInputElement>(null);
   const [foldersNames, setFoldersNames] = useState({});
   const takeSnapshot = useFlowsManagerStore((state) => state.takeSnapshot);
@@ -56,10 +70,6 @@ const SideBarFoldersButtonsComponent = ({
     pathname.split("/").length < (ENABLE_CUSTOM_PARAM ? 5 : 4);
   const myCollectionId = useFolderStore((state) => state.myCollectionId);
   const folderIdDragging = useFolderStore((state) => state.folderIdDragging);
-  const showFolderModal = useFolderStore((state) => state.showFolderModal);
-  const setShowFolderModal = useFolderStore(
-    (state) => state.setShowFolderModal,
-  );
 
   const checkPathName = (itemId: string) => {
     if (urlWithoutPath && itemId === myCollectionId) {
@@ -152,14 +162,21 @@ const SideBarFoldersButtonsComponent = ({
   const { mutate: mutateUpdateFolder } = usePatchFolders();
 
   function addNewFolder() {
-    mutateAddFolder({
-      data: {
-        name: "New Folder",
-        parent_id: null,
-        description: "",
+    mutateAddFolder(
+      {
+        data: {
+          name: "New Folder",
+          parent_id: null,
+          description: "",
+        },
       },
-    });
-    track("Create New Folder");
+      {
+        onSuccess: (folder) => {
+          track("Create New Folder");
+          handleChangeFolder!(folder.id);
+        },
+      },
+    );
   }
 
   function handleEditFolderName(e, name): void {
@@ -232,11 +249,6 @@ const SideBarFoldersButtonsComponent = ({
     }
   };
 
-  const isFetchingFolders = !!useIsFetching({
-    queryKey: ["useGetFolders"],
-    exact: false,
-  });
-
   const isFetchingFolder = !!useIsFetching({
     queryKey: ["useGetFolder"],
     exact: false,
@@ -254,27 +266,28 @@ const SideBarFoldersButtonsComponent = ({
     isDeletingFolder;
 
   const HeaderButtons = () => (
-    <div className="my-4 flex shrink-0 items-center justify-between gap-1">
-      <Button
-        variant="ghost"
-        className="h-7 w-7 border-0 text-zinc-500 hover:bg-zinc-200 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-white lg:hidden"
-        size="icon"
-        onClick={() => setShowFolderModal(!showFolderModal)}
-        data-testid="upload-folder-button"
-      >
-        <IconComponent name="panel-right-open" className="h-4 w-4" />
-      </Button>
+    <div className="flex shrink-0 items-center justify-between gap-2">
+      <SidebarTrigger className="lg:hidden">
+        <IconComponent name="PanelLeftClose" className="h-4 w-4" />
+      </SidebarTrigger>
+
       <div className="flex-1 text-sm font-semibold">Folders</div>
-      <UploadFolderButton
-        onClick={handleUploadFlowsToFolder}
-        disabled={isUpdatingFolder}
-      />
-      <AddFolderButton onClick={addNewFolder} disabled={isUpdatingFolder} />
+      <div className="flex items-center gap-1">
+        <UploadFolderButton
+          onClick={handleUploadFlowsToFolder}
+          disabled={isUpdatingFolder}
+        />
+        <AddFolderButton
+          onClick={addNewFolder}
+          disabled={isUpdatingFolder}
+          loading={isPending}
+        />
+      </div>
     </div>
   );
 
-  const AddFolderButton = ({ onClick, disabled }) => (
-    <ShadTooltip content="Create new folder" styleClasses="z-10">
+  const AddFolderButton = ({ onClick, disabled, loading }) => (
+    <ShadTooltip content="Create new folder" styleClasses="z-50">
       <Button
         variant="ghost"
         size="icon"
@@ -282,6 +295,7 @@ const SideBarFoldersButtonsComponent = ({
         onClick={onClick}
         data-testid="add-folder-button"
         disabled={disabled}
+        loading={loading}
       >
         <IconComponent name="Plus" className="h-4 w-4" />
       </Button>
@@ -289,12 +303,11 @@ const SideBarFoldersButtonsComponent = ({
   );
 
   const UploadFolderButton = ({ onClick, disabled }) => (
-    /* Todo: change this back to being a folder upload */
-    <ShadTooltip content="Upload a flow" styleClasses="z-10">
+    <ShadTooltip content="Upload a flow" styleClasses="z-50">
       <Button
         variant="ghost"
-        className="h-7 w-7 border-0 text-zinc-500 hover:bg-zinc-200 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-white"
         size="icon"
+        className="h-7 w-7 border-0 text-zinc-500 hover:bg-zinc-200 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-white"
         onClick={onClick}
         data-testid="upload-folder-button"
         disabled={disabled}
@@ -389,153 +402,158 @@ const SideBarFoldersButtonsComponent = ({
   };
 
   return (
-    <>
-      <HeaderButtons />
+    <Sidebar collapsible="offcanvas" data-testid="folder-sidebar">
+      <SidebarHeader className="p-4">
+        <HeaderButtons />
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarGroup className="p-4 py-2">
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {!loading ? (
+                folders.map((item, index) => {
+                  const editFolderName = editFolders?.filter(
+                    (folder) => folder.name === item.name,
+                  )[0];
+                  return (
+                    <SidebarMenuItem>
+                      <SidebarMenuButton
+                        size="md"
+                        onDragOver={(e) => dragOver(e, item.id!)}
+                        onDragEnter={(e) => dragEnter(e, item.id!)}
+                        onDragLeave={dragLeave}
+                        onDrop={(e) => onDrop(e, item.id!)}
+                        key={item.id}
+                        data-testid={`sidebar-nav-${item.name}`}
+                        isActive={checkPathName(item.id!)}
+                        onClick={() => handleChangeFolder!(item.id!)}
+                        className="group/menu-button"
+                      >
+                        <div
+                          onDoubleClick={(event) => {
+                            handleDoubleClick(event, item);
+                          }}
+                          className="flex w-full items-center justify-between gap-2"
+                        >
+                          <div className="flex flex-1 items-center gap-2">
+                            {editFolderName?.edit && !isUpdatingFolder ? (
+                              <Input
+                                className="h-6 flex-1 focus:border-0"
+                                onChange={(e) => {
+                                  handleEditFolderName(e, item.name);
+                                }}
+                                ref={refInput}
+                                onKeyDown={(e) => {
+                                  handleKeyDownFn(e, item);
+                                  handleKeyDown(e, e.key, "");
+                                }}
+                                autoFocus={true}
+                                onBlur={(e) => {
+                                  // fixes autofocus problem where cursor isn't present
+                                  if (
+                                    e.relatedTarget?.id ===
+                                    `options-trigger-${item.name}`
+                                  ) {
+                                    refInput.current?.focus();
+                                    return;
+                                  }
 
-      <div className="flex h-[70vh] flex-col gap-2 overflow-auto">
-        <>
-          {!loading ? (
-            folders.map((item, index) => {
-              const editFolderName = editFolders?.filter(
-                (folder) => folder.name === item.name,
-              )[0];
-              return (
-                <div
-                  onDragOver={(e) => dragOver(e, item.id!)}
-                  onDragEnter={(e) => dragEnter(e, item.id!)}
-                  onDragLeave={dragLeave}
-                  onDrop={(e) => onDrop(e, item.id!)}
-                  key={item.id}
-                  data-testid={`sidebar-nav-${item.name}`}
-                  className={cn(
-                    buttonVariants({ variant: "ghost" }),
-                    checkPathName(item.id!)
-                      ? "bg-zinc-200 hover:bg-zinc-200 dark:bg-zinc-800"
-                      : "hover:bg-transparent hover:bg-zinc-200 dark:hover:bg-zinc-800 lg:border-transparent",
-                    "group flex w-full shrink-0 cursor-pointer gap-2 opacity-100 lg:min-w-full",
-                    folderIdDragging === item.id! ? "bg-border" : "",
-                  )}
-                  onClick={() => handleChangeFolder!(item.id!)}
-                >
-                  <div
-                    onDoubleClick={(event) => {
-                      handleDoubleClick(event, item);
-                    }}
-                    className="flex w-full items-center justify-between"
-                  >
-                    <div className="flex items-center gap-2">
-                      {editFolderName?.edit && !isUpdatingFolder ? (
-                        <div>
-                          <Input
-                            className="w-36"
-                            onChange={(e) => {
-                              handleEditFolderName(e, item.name);
-                            }}
-                            ref={refInput}
-                            onKeyDown={(e) => {
-                              handleKeyDownFn(e, item);
-                              handleKeyDown(e, e.key, "");
-                            }}
-                            autoFocus={true}
-                            onBlur={(e) => {
-                              // fixes autofocus problem where cursor isn't present
-                              if (
-                                e.relatedTarget?.id ===
-                                `options-trigger-${item.name}`
-                              ) {
-                                refInput.current?.focus();
-                                return;
-                              }
-
-                              if (refInput.current?.value !== item.name) {
-                                handleEditNameFolder(item);
-                              } else {
-                                editFolderName.edit = false;
-                              }
-                              refInput.current?.blur();
-                            }}
-                            value={foldersNames[item.name]}
-                            id={`input-folder-${item.name}`}
-                            data-testid={`input-folder`}
-                          />
+                                  if (refInput.current?.value !== item.name) {
+                                    handleEditNameFolder(item);
+                                  } else {
+                                    editFolderName.edit = false;
+                                  }
+                                  refInput.current?.blur();
+                                }}
+                                value={foldersNames[item.name]}
+                                id={`input-folder-${item.name}`}
+                                data-testid={`input-folder`}
+                              />
+                            ) : (
+                              <span className="block w-full grow truncate text-[13px] opacity-100">
+                                {item.name}
+                              </span>
+                            )}
+                          </div>
+                          <Select
+                            onValueChange={(value) =>
+                              handleSelectChange(value, item)
+                            }
+                            value=""
+                          >
+                            <ShadTooltip
+                              content="Options"
+                              side="right"
+                              styleClasses="z-50"
+                            >
+                              <SelectTrigger
+                                className="w-fit"
+                                id={`options-trigger-${item.name}`}
+                                data-testid="more-options-button"
+                              >
+                                <IconComponent
+                                  name={"MoreHorizontal"}
+                                  className={`w-4 stroke-[1.5] px-0 text-muted-foreground group-hover/menu-button:block group-hover/menu-button:text-foreground ${
+                                    checkPathName(item.id!) ? "block" : "hidden"
+                                  }`}
+                                />
+                              </SelectTrigger>
+                            </ShadTooltip>
+                            <SelectContent
+                              align="end"
+                              alignOffset={-16}
+                              position="popper"
+                            >
+                              {item.name !== "My Projects" && (
+                                <SelectItem
+                                  id="rename-button"
+                                  value="rename"
+                                  data-testid="btn-rename-folder"
+                                >
+                                  <FolderSelectItem
+                                    name="Rename"
+                                    iconName="SquarePen"
+                                  />
+                                </SelectItem>
+                              )}
+                              <SelectItem
+                                value="download"
+                                data-testid="btn-download-folder"
+                              >
+                                <FolderSelectItem
+                                  name="Download Content"
+                                  iconName="Download"
+                                />
+                              </SelectItem>
+                              {index > 0 && (
+                                <SelectItem
+                                  value="delete"
+                                  data-testid="btn-delete-folder"
+                                >
+                                  <FolderSelectItem
+                                    name="Delete"
+                                    iconName="Trash2"
+                                  />
+                                </SelectItem>
+                              )}
+                            </SelectContent>
+                          </Select>
                         </div>
-                      ) : (
-                        <span className="block w-full grow truncate text-[13px] opacity-100">
-                          {item.name}
-                        </span>
-                      )}
-                    </div>
-                    <Select
-                      onValueChange={(value) => handleSelectChange(value, item)}
-                      value=""
-                    >
-                      <ShadTooltip
-                        content="Options"
-                        side="right"
-                        styleClasses="z-10"
-                      >
-                        <SelectTrigger
-                          className="w-fit"
-                          id={`options-trigger-${item.name}`}
-                          data-testid="more-options-button"
-                        >
-                          <IconComponent
-                            name={"MoreHorizontal"}
-                            className={`w-4 stroke-[1.5] px-0 text-zinc-500 group-hover:block group-hover:text-black dark:text-zinc-400 dark:group-hover:text-white ${
-                              checkPathName(item.id!) ? "block" : "hidden"
-                            }`}
-                          />
-                        </SelectTrigger>
-                      </ShadTooltip>
-                      <SelectContent
-                        align="end"
-                        alignOffset={-16}
-                        position="popper"
-                      >
-                        {item.name !== "My Projects" && (
-                          <SelectItem
-                            id="rename-button"
-                            value="rename"
-                            data-testid="btn-rename-folder"
-                          >
-                            <FolderSelectItem
-                              name="Rename"
-                              iconName="square-pen"
-                            />
-                          </SelectItem>
-                        )}
-                        <SelectItem
-                          value="download"
-                          data-testid="btn-download-folder"
-                        >
-                          <FolderSelectItem
-                            name="Download Content"
-                            iconName="download"
-                          />
-                        </SelectItem>
-                        {index > 0 && (
-                          <SelectItem
-                            value="delete"
-                            data-testid="btn-delete-folder"
-                          >
-                            <FolderSelectItem name="Delete" iconName="trash" />
-                          </SelectItem>
-                        )}
-                      </SelectContent>
-                    </Select>
-                  </div>
-                </div>
-              );
-            })
-          ) : (
-            <>
-              <SidebarFolderSkeleton />
-              <SidebarFolderSkeleton />
-            </>
-          )}
-        </>
-      </div>
-    </>
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                  );
+                })
+              ) : (
+                <>
+                  <SidebarFolderSkeleton />
+                  <SidebarFolderSkeleton />
+                </>
+              )}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
   );
 };
 export default SideBarFoldersButtonsComponent;
diff --git a/src/frontend/src/components/folderSidebarComponent/components/sidebarFolderSkeleton/index.tsx b/src/frontend/src/components/folderSidebarComponent/components/sidebarFolderSkeleton/index.tsx
index 7f9ea28a6..d2dd94705 100644
--- a/src/frontend/src/components/folderSidebarComponent/components/sidebarFolderSkeleton/index.tsx
+++ b/src/frontend/src/components/folderSidebarComponent/components/sidebarFolderSkeleton/index.tsx
@@ -2,8 +2,7 @@ import { Skeleton } from "@/components/ui/skeleton";
 
 export function SidebarFolderSkeleton() {
   return (
-    <div className="flex h-10 w-full shrink-0 animate-pulse cursor-pointer items-center gap-4 rounded-md border bg-background px-4 opacity-100 lg:min-w-full">
-      <Skeleton className="h-3 w-4 rounded-full" />
+    <div className="flex h-9 w-full shrink-0 animate-pulse cursor-pointer items-center gap-4 rounded-md border bg-background px-2 opacity-100 lg:min-w-full">
       <Skeleton className="h-3 w-[40%]" />
     </div>
   );
diff --git a/src/frontend/src/components/folderSidebarComponent/index.tsx b/src/frontend/src/components/folderSidebarComponent/index.tsx
index 499d625aa..51feb3196 100644
--- a/src/frontend/src/components/folderSidebarComponent/index.tsx
+++ b/src/frontend/src/components/folderSidebarComponent/index.tsx
@@ -1,10 +1,7 @@
-import { useGetFoldersQuery } from "@/controllers/API/queries/folders/use-get-folders";
 import { useFolderStore } from "@/stores/foldersStore";
 import { useIsFetching } from "@tanstack/react-query";
 import { useLocation } from "react-router-dom";
 import { FolderType } from "../../pages/MainPage/entities";
-import { cn } from "../../utils/utils";
-import HorizontalScrollFadeComponent from "../horizontalScrollFadeComponent";
 import SideBarFoldersButtonsComponent from "./components/sideBarFolderButtons";
 
 type SidebarNavProps = {
@@ -29,16 +26,9 @@ export default function FolderSidebarNav({
   });
 
   return (
-    <nav className={cn(className)} {...props}>
-      <HorizontalScrollFadeComponent>
-        <SideBarFoldersButtonsComponent
-          loading={isPending || !folders}
-          pathname={pathname}
-          handleChangeFolder={handleChangeFolder}
-          handleDeleteFolder={handleDeleteFolder}
-          folders={folders}
-        />
-      </HorizontalScrollFadeComponent>
-    </nav>
+    <SideBarFoldersButtonsComponent
+      handleChangeFolder={handleChangeFolder}
+      handleDeleteFolder={handleDeleteFolder}
+    />
   );
 }
diff --git a/src/frontend/src/components/ui/sidebar.tsx b/src/frontend/src/components/ui/sidebar.tsx
index 3c0d3d1a1..bae3f9a51 100644
--- a/src/frontend/src/components/ui/sidebar.tsx
+++ b/src/frontend/src/components/ui/sidebar.tsx
@@ -518,6 +518,7 @@ const sidebarMenuButtonVariants = cva(
       },
       size: {
         default: "h-8 text-sm",
+        md: "h-9 text-sm",
         sm: "h-7 text-xs",
         lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
       },
diff --git a/src/frontend/src/controllers/API/queries/flows/use-post-add-flow.ts b/src/frontend/src/controllers/API/queries/flows/use-post-add-flow.ts
index df744f60b..d3a7dbfa7 100644
--- a/src/frontend/src/controllers/API/queries/flows/use-post-add-flow.ts
+++ b/src/frontend/src/controllers/API/queries/flows/use-post-add-flow.ts
@@ -13,6 +13,7 @@ interface IPostAddFlow {
   is_component: boolean;
   folder_id: string;
   endpoint_name: string | undefined;
+  icon: string | undefined;
 }
 
 export const usePostAddFlow: useMutationFunctionType<
@@ -29,6 +30,7 @@ export const usePostAddFlow: useMutationFunctionType<
       description: payload.description,
       is_component: payload.is_component,
       folder_id: payload.folder_id || null,
+      icon: payload.icon || null,
       endpoint_name: payload.endpoint_name || null,
     });
 
diff --git a/src/frontend/src/controllers/API/queries/folders/use-get-folder.ts b/src/frontend/src/controllers/API/queries/folders/use-get-folder.ts
index a92aa69da..23a1dc889 100644
--- a/src/frontend/src/controllers/API/queries/folders/use-get-folder.ts
+++ b/src/frontend/src/controllers/API/queries/folders/use-get-folder.ts
@@ -72,7 +72,6 @@ export const useGetFolderQuery: useQueryFunctionType<
     () => getFolderFn(params),
     {
       refetchOnWindowFocus: false,
-      placeholderData: true,
       ...options,
     },
   );
diff --git a/src/frontend/src/controllers/API/queries/folders/use-post-folders.ts b/src/frontend/src/controllers/API/queries/folders/use-post-folders.ts
index f4cee3910..6e3a86087 100644
--- a/src/frontend/src/controllers/API/queries/folders/use-post-folders.ts
+++ b/src/frontend/src/controllers/API/queries/folders/use-post-folders.ts
@@ -28,8 +28,8 @@ export const usePostFolders: useMutationFunctionType<
 
   const mutation = mutate(["usePostFolders"], addFoldersFn, {
     ...options,
-    onSettled: () => {
-      queryClient.refetchQueries({ queryKey: ["useGetFolders"] });
+    onSuccess: () => {
+      return queryClient.refetchQueries({ queryKey: ["useGetFolders"] });
     },
   });
 
diff --git a/src/frontend/src/modals/templatesModal/components/TemplateCardComponent/index.tsx b/src/frontend/src/modals/templatesModal/components/TemplateCardComponent/index.tsx
index b3008d09d..93b5bfa2f 100644
--- a/src/frontend/src/modals/templatesModal/components/TemplateCardComponent/index.tsx
+++ b/src/frontend/src/modals/templatesModal/components/TemplateCardComponent/index.tsx
@@ -35,23 +35,10 @@ export default function TemplateCardComponent({
       onKeyDown={handleKeyDown}
       onClick={onClick}
     >
-      <div
-        className="relative h-20 w-20 shrink-0 overflow-hidden rounded-md p-4 outline-none ring-ring"
-        style={{
-          backgroundImage: bgGradient,
-          transform: "scale(1)",
-          transition: "transform 0.3s ease-in-out",
-        }}
-      >
-        <div
-          className="absolute inset-0 transition-transform duration-300 group-hover:scale-125 group-focus-visible:scale-125"
-          style={{
-            backgroundImage: bgGradient,
-          }}
-        />
+      <div className="relative h-20 w-20 shrink-0 overflow-hidden rounded-md bg-muted p-4 outline-none ring-ring group-hover:bg-border group-focus-visible:bg-border">
         <IconComponent
           name={example.icon || "FileText"}
-          className="absolute left-1/2 top-1/2 h-10 w-10 -translate-x-1/2 -translate-y-1/2 text-white duration-300 group-hover:scale-105 group-focus-visible:scale-105"
+          className="absolute left-1/2 top-1/2 h-10 w-10 -translate-x-1/2 -translate-y-1/2 text-muted-foreground duration-300 group-hover:scale-105 group-hover:text-foreground group-focus-visible:scale-105 group-focus-visible:text-foreground"
         />
       </div>
       <div className="flex flex-1 flex-col justify-between">
diff --git a/src/frontend/src/pages/MainPage/components/dropdown/index.tsx b/src/frontend/src/pages/MainPage/components/dropdown/index.tsx
index 2c2981b69..843854224 100644
--- a/src/frontend/src/pages/MainPage/components/dropdown/index.tsx
+++ b/src/frontend/src/pages/MainPage/components/dropdown/index.tsx
@@ -78,11 +78,11 @@ const DropdownComponent = ({
         data-testid="btn-download-json"
       >
         <ForwardedIconComponent
-          name="download"
+          name="Download"
           aria-hidden="true"
           className="mr-2 h-4 w-4"
         />
-        Download JSON
+        Download
       </DropdownMenuItem>
       <DropdownMenuItem
         onClick={(e) => {
@@ -93,7 +93,7 @@ const DropdownComponent = ({
         data-testid="btn-duplicate-flow"
       >
         <ForwardedIconComponent
-          name="copy-plus"
+          name="CopyPlus"
           aria-hidden="true"
           className="mr-2 h-4 w-4"
         />
@@ -104,10 +104,10 @@ const DropdownComponent = ({
           e.stopPropagation();
           setOpenDelete(true);
         }}
-        className="cursor-pointer text-red-500 focus:text-red-500 dark:text-red-500 dark:focus:text-red-500"
+        className="cursor-pointer text-destructive"
       >
         <ForwardedIconComponent
-          name="trash"
+          name="Trash2"
           aria-hidden="true"
           className="mr-2 h-4 w-4"
         />
diff --git a/src/frontend/src/pages/MainPage/components/grid/index.tsx b/src/frontend/src/pages/MainPage/components/grid/index.tsx
index b1acab07e..84d938280 100644
--- a/src/frontend/src/pages/MainPage/components/grid/index.tsx
+++ b/src/frontend/src/pages/MainPage/components/grid/index.tsx
@@ -8,10 +8,8 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { useCustomNavigate } from "@/customization/hooks/use-custom-navigate";
-import { track } from "@/customization/utils/analytics";
 import useDeleteFlow from "@/hooks/flows/use-delete-flow";
 import DeleteConfirmationModal from "@/modals/deleteConfirmationModal";
-import IOModal from "@/modals/IOModal";
 import useAlertStore from "@/stores/alertStore";
 import useFlowsManagerStore from "@/stores/flowsManagerStore";
 import { FlowType } from "@/types/flow";
@@ -19,27 +17,27 @@ import { getInputsAndOutputs } from "@/utils/storeUtils";
 import { useState } from "react";
 import { useParams } from "react-router-dom";
 import useDescriptionModal from "../../oldComponents/componentsComponent/hooks/use-description-modal";
-import { getTemplateStyle } from "../../utils/get-template-style";
+import { useGetTemplateStyle } from "../../utils/get-template-style";
 import { timeElapsed } from "../../utils/time-elapse";
 import DropdownComponent from "../dropdown";
 
 const GridComponent = ({ flowData }: { flowData: FlowType }) => {
   const navigate = useCustomNavigate();
-  // const [openPlayground, setOpenPlayground] = useState(false);
-  const [loadingPlayground, setLoadingPlayground] = useState(false);
+  /* const [openPlayground, setOpenPlayground] = useState(false);
+  const [loadingPlayground, setLoadingPlayground] = useState(false); */
   const [openDelete, setOpenDelete] = useState(false);
   const setSuccessData = useAlertStore((state) => state.setSuccessData);
   const { deleteFlow } = useDeleteFlow();
 
   const setErrorData = useAlertStore((state) => state.setErrorData);
-  const setCurrentFlow = useFlowsManagerStore((state) => state.setCurrentFlow);
+  /* const setCurrentFlow = useFlowsManagerStore((state) => state.setCurrentFlow); */
   const { folderId } = useParams();
   const isComponent = flowData.is_component ?? false;
   const setFlowToCanvas = useFlowsManagerStore(
     (state) => state.setFlowToCanvas,
   );
 
-  const { icon, icon_bg_color } = getTemplateStyle(flowData);
+  const { getIcon } = useGetTemplateStyle(flowData);
 
   const editFlowLink = `/flow/${flowData.id}${folderId ? `/folder/${folderId}` : ""}`;
 
@@ -51,7 +49,7 @@ const GridComponent = ({ flowData }: { flowData: FlowType }) => {
     return inputs.length > 0 || outputs.length > 0;
   }
 
-  const handlePlaygroundClick = () => {
+  /* const handlePlaygroundClick = () => {
     track("Playground Button Clicked", { flowId: flowData.id });
     setLoadingPlayground(true);
 
@@ -73,7 +71,7 @@ const GridComponent = ({ flowData }: { flowData: FlowType }) => {
         list: ["Error getting flow data."],
       });
     }
-  };
+  }; */
 
   const handleClick = async () => {
     if (!isComponent) {
@@ -108,18 +106,16 @@ const GridComponent = ({ flowData }: { flowData: FlowType }) => {
         draggable
         onDragStart={onDragStart}
         onClick={handleClick}
-        className={`my-1 flex flex-col rounded-lg border border-zinc-100 bg-background p-5 shadow-sm hover:border-border dark:border-zinc-800 dark:hover:border-muted-foreground ${
+        className={`my-1 flex flex-col rounded-lg border border-border bg-background p-4 hover:border-placeholder-foreground hover:shadow-sm ${
           isComponent ? "cursor-default" : "cursor-pointer"
         }`}
       >
-        <div className="flex w-full items-center gap-2">
-          <div
-            className={`mr-3 flex rounded-lg border ${flowData?.icon_bg_color || icon_bg_color} p-3`}
-          >
+        <div className="flex w-full items-center gap-4">
+          <div className={`flex rounded-lg bg-muted p-3`}>
             <ForwardedIconComponent
-              name={flowData?.icon || icon}
+              name={getIcon()}
               aria-hidden="true"
-              className="h-5 w-5 dark:text-black"
+              className="h-5 w-5 text-foreground"
             />
           </div>
           <div className="flex w-full min-w-0 items-center justify-between">
@@ -127,27 +123,27 @@ const GridComponent = ({ flowData }: { flowData: FlowType }) => {
               <div className="text-md truncate font-semibold">
                 {flowData.name}
               </div>
-              <div className="truncate text-xs text-zinc-500 dark:text-zinc-400">
+              <div className="truncate text-xs text-muted-foreground">
                 Edited {timeElapsed(flowData.updated_at)} ago
               </div>
             </div>
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
                 <Button
-                  variant="outline"
+                  variant="ghost"
                   data-testid="home-dropdown-menu"
-                  size="icon"
-                  className="group ml-2 h-10 w-10 border-none dark:hover:bg-zinc-700"
+                  size="iconMd"
+                  className="group"
                 >
                   <ForwardedIconComponent
-                    name="ellipsis"
+                    name="Ellipsis"
                     aria-hidden="true"
-                    className="h-5 w-5 dark:text-zinc-400 dark:group-hover:text-white"
+                    className="h-5 w-5 text-muted-foreground group-hover:text-foreground"
                   />
                 </Button>
               </DropdownMenuTrigger>
               <DropdownMenuContent
-                className="mr-[30px] w-[185px] bg-white dark:bg-black"
+                className="w-[185px]"
                 sideOffset={5}
                 side="bottom"
               >
@@ -160,7 +156,7 @@ const GridComponent = ({ flowData }: { flowData: FlowType }) => {
           </div>
         </div>
 
-        <div className="line-clamp-2 h-full pt-5 text-sm text-zinc-800 dark:text-white">
+        <div className="line-clamp-2 h-full pt-5 text-sm text-primary">
           {flowData.description}
         </div>
 
diff --git a/src/frontend/src/pages/MainPage/components/gridSkeleton/index.tsx b/src/frontend/src/pages/MainPage/components/gridSkeleton/index.tsx
new file mode 100644
index 000000000..557dbdc8d
--- /dev/null
+++ b/src/frontend/src/pages/MainPage/components/gridSkeleton/index.tsx
@@ -0,0 +1,34 @@
+import { Card } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+
+const GridSkeleton = () => {
+  return (
+    <Card className="my-1 flex flex-col rounded-lg border border-border bg-background p-4">
+      <div className="flex w-full items-center gap-4">
+        {/* Icon skeleton */}
+        <div className="flex rounded-lg">
+          <Skeleton className="h-[44px] w-[44px] rounded-lg" />
+        </div>
+
+        <div className="flex w-full min-w-0 items-center justify-between">
+          <div className="flex min-w-0 flex-col gap-2">
+            {/* Title skeleton */}
+            <Skeleton className="h-5 w-[120px]" />
+            {/* Time skeleton */}
+            <Skeleton className="h-4 w-[150px]" />
+          </div>
+          {/* Dropdown button skeleton */}
+          <Skeleton className="ml-2 h-10 w-10 rounded-md" />
+        </div>
+      </div>
+
+      {/* Description skeleton */}
+      <div className="pt-5">
+        <Skeleton className="h-4 w-full" />
+        <Skeleton className="mt-2 h-4 w-3/4" />
+      </div>
+    </Card>
+  );
+};
+
+export default GridSkeleton;
diff --git a/src/frontend/src/pages/MainPage/components/header/index.tsx b/src/frontend/src/pages/MainPage/components/header/index.tsx
index 3e8344461..1306d26aa 100644
--- a/src/frontend/src/pages/MainPage/components/header/index.tsx
+++ b/src/frontend/src/pages/MainPage/components/header/index.tsx
@@ -2,8 +2,8 @@ import ForwardedIconComponent from "@/components/genericIconComponent";
 import ShadTooltip from "@/components/shadTooltipComponent";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { useCustomNavigate } from "@/customization/hooks/use-custom-navigate";
-import { useFolderStore } from "@/stores/foldersStore";
+import { SidebarTrigger, useSidebar } from "@/components/ui/sidebar";
+import { cn } from "@/utils/utils";
 import { debounce } from "lodash";
 import { useCallback, useEffect, useState } from "react";
 
@@ -15,6 +15,7 @@ interface HeaderComponentProps {
   setNewProjectModal: (newProjectModal: boolean) => void;
   folderName?: string;
   setSearch: (search: string) => void;
+  isEmptyFolder: boolean;
 }
 
 const HeaderComponent = ({
@@ -25,10 +26,10 @@ const HeaderComponent = ({
   setView,
   setNewProjectModal,
   setSearch,
+  isEmptyFolder,
 }: HeaderComponentProps) => {
-  const navigate = useCustomNavigate();
   const [debouncedSearch, setDebouncedSearch] = useState("");
-  const { showFolderModal, setShowFolderModal } = useFolderStore();
+  const { open } = useSidebar();
 
   // Debounce the setSearch function from the parent
   const debouncedSetSearch = useCallback(
@@ -56,75 +57,83 @@ const HeaderComponent = ({
         className="flex items-center pb-8 text-xl font-semibold"
         data-testid="mainpage_title"
       >
-        <Button
-          variant="ghost"
-          className="mr-2 lg:hidden"
-          size="icon"
-          onClick={() => setShowFolderModal(!showFolderModal)}
-        >
-          <ForwardedIconComponent
-            name={showFolderModal ? "panel-right-open" : "panel-right-close"}
-            aria-hidden="true"
-            className="h-5 w-5 text-zinc-500 dark:text-zinc-400"
-          />
-        </Button>
+        <div className={cn("w-10 transition-all lg:hidden", open && "md:w-0")}>
+          <div
+            className={cn(
+              "relative left-0 opacity-100 transition-all",
+              open ? "md:opacity-0" : "",
+            )}
+          >
+            <SidebarTrigger>
+              <ForwardedIconComponent
+                name="PanelLeftOpen"
+                aria-hidden="true"
+                className="text-zinc-500 dark:text-zinc-400"
+              />
+            </SidebarTrigger>
+          </div>
+        </div>
         {folderName}
       </div>
-      <div className="flex flex-row-reverse pb-8">
-        <div className="w-full border-b dark:border-border" />
-        {["components", "flows"].map((type) => (
-          <Button
-            key={type}
-            unstyled
-            id={`${type}-btn`}
-            data-testid={`${type}-btn`}
-            onClick={() => setFlowType(type as "flows" | "components")}
-            className={`border-b ${
-              flowType === type
-                ? "border-b-2 border-black font-semibold dark:border-white dark:text-white"
-                : "border-border text-zinc-400 hover:text-black dark:hover:text-white"
-            } px-3 pb-2`}
-          >
-            {type.charAt(0).toUpperCase() + type.slice(1)}
-          </Button>
-        ))}
-      </div>
-      {/* Search and filters */}
-      <div className="flex justify-between">
-        <div className="flex w-full xl:w-5/12">
-          <Input
-            icon="search"
-            data-testid="search-store-input"
-            type="text"
-            placeholder={`Search ${flowType}...`}
-            className="mr-2"
-            value={debouncedSearch}
-            onChange={handleSearch}
-          />
-          <div className="px-py mr-2 flex rounded-lg border border-zinc-100 bg-zinc-100 dark:border-zinc-800 dark:bg-zinc-800">
-            {["list", "grid"].map((viewType) => (
+      {!isEmptyFolder && (
+        <>
+          <div className="flex flex-row-reverse pb-8">
+            <div className="w-full border-b dark:border-border" />
+            {["components", "flows"].map((type) => (
               <Button
-                key={viewType}
+                key={type}
                 unstyled
-                size="icon"
-                className={`group mx-[2px] my-[2px] rounded-lg p-2 ${
-                  view === viewType
-                    ? "bg-white text-black shadow-md dark:bg-black dark:text-white"
-                    : "bg-zinc-100 text-zinc-500 dark:bg-zinc-800 dark:hover:bg-zinc-800"
-                }`}
-                onClick={() => setView(viewType as "list" | "grid")}
+                id={`${type}-btn`}
+                data-testid={`${type}-btn`}
+                onClick={() => setFlowType(type as "flows" | "components")}
+                className={`border-b ${
+                  flowType === type
+                    ? "border-b-2 border-foreground text-foreground"
+                    : "border-border text-muted-foreground hover:text-foreground"
+                } px-3 pb-2 text-sm`}
               >
-                <ForwardedIconComponent
-                  name={viewType === "list" ? "menu" : "layout-grid"}
-                  aria-hidden="true"
-                  className="h-4 w-4 group-hover:text-black dark:group-hover:text-white"
-                />
+                <div className={flowType === type ? "-mb-px" : ""}>
+                  {type.charAt(0).toUpperCase() + type.slice(1)}
+                </div>
               </Button>
             ))}
           </div>
-        </div>
-        <div className="flex gap-2">
-          <ShadTooltip content="Store" side="bottom">
+          {/* Search and filters */}
+          <div className="flex justify-between">
+            <div className="flex w-full xl:w-5/12">
+              <Input
+                icon="Search"
+                data-testid="search-store-input"
+                type="text"
+                placeholder={`Search ${flowType}...`}
+                className="mr-2"
+                value={debouncedSearch}
+                onChange={handleSearch}
+              />
+              <div className="px-py mr-2 flex rounded-lg border border-zinc-100 bg-zinc-100 dark:border-zinc-800 dark:bg-zinc-800">
+                {["list", "grid"].map((viewType) => (
+                  <Button
+                    key={viewType}
+                    unstyled
+                    size="icon"
+                    className={`group mx-[2px] my-[2px] rounded-lg p-2 ${
+                      view === viewType
+                        ? "bg-white text-black shadow-md dark:bg-black dark:text-white"
+                        : "bg-zinc-100 text-zinc-500 dark:bg-zinc-800 dark:hover:bg-zinc-800"
+                    }`}
+                    onClick={() => setView(viewType as "list" | "grid")}
+                  >
+                    <ForwardedIconComponent
+                      name={viewType === "list" ? "Menu" : "LayoutGrid"}
+                      aria-hidden="true"
+                      className="h-4 w-4 group-hover:text-black dark:group-hover:text-white"
+                    />
+                  </Button>
+                ))}
+              </div>
+            </div>
+            <div className="flex gap-2">
+              {/* <ShadTooltip content="Store" side="bottom">
             <Button variant="outline" onClick={() => navigate("/store")}>
               <ForwardedIconComponent
                 name="store"
@@ -135,25 +144,27 @@ const HeaderComponent = ({
                 Browse Store
               </span>
             </Button>
-          </ShadTooltip>
-          <ShadTooltip content="New Flow" side="bottom">
-            <Button
-              variant="default"
-              onClick={() => setNewProjectModal(true)}
-              id="new-project-btn"
-            >
-              <ForwardedIconComponent
-                name="plus"
-                aria-hidden="true"
-                className="h-4 w-4"
-              />
-              <span className="hidden whitespace-nowrap font-semibold md:inline">
-                New Flow
-              </span>
-            </Button>
-          </ShadTooltip>
-        </div>
-      </div>
+          </ShadTooltip> */}
+              <ShadTooltip content="New Flow" side="bottom">
+                <Button
+                  variant="default"
+                  onClick={() => setNewProjectModal(true)}
+                  id="new-project-btn"
+                >
+                  <ForwardedIconComponent
+                    name="Plus"
+                    aria-hidden="true"
+                    className="h-4 w-4"
+                  />
+                  <span className="hidden whitespace-nowrap font-semibold md:inline">
+                    New Flow
+                  </span>
+                </Button>
+              </ShadTooltip>
+            </div>
+          </div>
+        </>
+      )}
     </>
   );
 };
diff --git a/src/frontend/src/pages/MainPage/components/list/index.tsx b/src/frontend/src/pages/MainPage/components/list/index.tsx
index 1703d21fc..e4900c7de 100644
--- a/src/frontend/src/pages/MainPage/components/list/index.tsx
+++ b/src/frontend/src/pages/MainPage/components/list/index.tsx
@@ -5,74 +5,70 @@ import { Card } from "@/components/ui/card";
 import {
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { useCustomNavigate } from "@/customization/hooks/use-custom-navigate";
-import { track } from "@/customization/utils/analytics";
 import useDeleteFlow from "@/hooks/flows/use-delete-flow";
 import DeleteConfirmationModal from "@/modals/deleteConfirmationModal";
-import IOModal from "@/modals/IOModal";
 import useAlertStore from "@/stores/alertStore";
 import useFlowsManagerStore from "@/stores/flowsManagerStore";
 import { FlowType } from "@/types/flow";
-import { getInputsAndOutputs } from "@/utils/storeUtils";
 import { useState } from "react";
 import { useParams } from "react-router-dom";
 import useDescriptionModal from "../../oldComponents/componentsComponent/hooks/use-description-modal";
-import { getTemplateStyle } from "../../utils/get-template-style";
+import { useGetTemplateStyle } from "../../utils/get-template-style";
 import { timeElapsed } from "../../utils/time-elapse";
 import DropdownComponent from "../dropdown";
 
 const ListComponent = ({ flowData }: { flowData: FlowType }) => {
   const navigate = useCustomNavigate();
-  // const [openPlayground, setOpenPlayground] = useState(false);
-  // const [loadingPlayground, setLoadingPlayground] = useState(false);
+  /* const [openPlayground, setOpenPlayground] = useState(false);
+  const [loadingPlayground, setLoadingPlayground] = useState(false); */
   const [openDelete, setOpenDelete] = useState(false);
   const setSuccessData = useAlertStore((state) => state.setSuccessData);
   const { deleteFlow } = useDeleteFlow();
   const setErrorData = useAlertStore((state) => state.setErrorData);
-  const setCurrentFlow = useFlowsManagerStore((state) => state.setCurrentFlow);
+  /* const setCurrentFlow = useFlowsManagerStore((state) => state.setCurrentFlow); */
   const { folderId } = useParams();
   const isComponent = flowData.is_component ?? false;
   const setFlowToCanvas = useFlowsManagerStore(
     (state) => state.setFlowToCanvas,
   );
-  const { icon, icon_bg_color } = getTemplateStyle(flowData);
+  const { getIcon } = useGetTemplateStyle(flowData);
 
   const editFlowLink = `/flow/${flowData.id}${folderId ? `/folder/${folderId}` : ""}`;
 
-  function hasPlayground(flow?: FlowType) {
+  /* function hasPlayground(flow?: FlowType) {
     if (!flow) {
       return false;
     }
     const { inputs, outputs } = getInputsAndOutputs(flow?.data?.nodes ?? []);
     return inputs.length > 0 || outputs.length > 0;
-  }
+  } */
 
-  // const handlePlaygroundClick = () => {
-  //   track("Playground Button Clicked", { flowId: flowData.id });
-  //   setLoadingPlayground(true);
+  /* const handlePlaygroundClick = () => {
+    track("Playground Button Clicked", { flowId: flowData.id });
+    setLoadingPlayground(true);
 
-  //   if (flowData) {
-  //     if (!hasPlayground(flowData)) {
-  //       setErrorData({
-  //         title: "Error",
-  //         list: ["This flow doesn't have a playground."],
-  //       });
-  //       setLoadingPlayground(false);
-  //       return;
-  //     }
-  //     setCurrentFlow(flowData);
-  //     setOpenPlayground(true);
-  //     setLoadingPlayground(false);
-  //   } else {
-  //     setErrorData({
-  //       title: "Error",
-  //       list: ["Error getting flow data."],
-  //     });
-  //   }
-  // };
+    if (flowData) {
+      if (!hasPlayground(flowData)) {
+        setErrorData({
+          title: "Error",
+          list: ["This flow doesn't have a playground."],
+        });
+        setLoadingPlayground(false);
+        return;
+      }
+      setCurrentFlow(flowData);
+      setOpenPlayground(true);
+      setLoadingPlayground(false);
+    } else {
+      setErrorData({
+        title: "Error",
+        list: ["Error getting flow data."],
+      });
+    }
+  }; */
 
   const handleClick = async () => {
     if (!isComponent) {
@@ -107,24 +103,24 @@ const ListComponent = ({ flowData }: { flowData: FlowType }) => {
         draggable
         onDragStart={onDragStart}
         onClick={handleClick}
-        className={`my-2 flex h-[110px] flex-row bg-background ${
+        className={`my-2 flex flex-row bg-background ${
           isComponent ? "cursor-default" : "cursor-pointer"
-        } justify-between rounded-lg border border-zinc-100 p-5 shadow-sm hover:border-border dark:border-zinc-800 dark:hover:border-muted-foreground`}
+        } group justify-between rounded-lg border border-border p-4 hover:border-placeholder-foreground hover:shadow-sm`}
       >
         {/* left side */}
         <div
           className={`flex min-w-0 ${
             isComponent ? "cursor-default" : "cursor-pointer"
-          } items-center gap-2`}
+          } items-center gap-4`}
         >
           {/* Icon */}
           <div
-            className={`item-center mr-3 flex justify-center rounded-lg border ${flowData?.icon_bg_color || icon_bg_color} p-3`}
+            className={`item-center flex justify-center rounded-lg bg-muted p-3`}
           >
             <ForwardedIconComponent
-              name={flowData?.icon || icon}
+              name={flowData?.icon || getIcon()}
               aria-hidden="true"
-              className="flex h-5 w-5 items-center justify-center dark:text-black"
+              className="flex h-5 w-5 items-center justify-center text-foreground"
             />
           </div>
 
@@ -133,11 +129,11 @@ const ListComponent = ({ flowData }: { flowData: FlowType }) => {
               <div className="text-md flex truncate pr-2 font-semibold max-md:w-full">
                 <span className="truncate">{flowData.name}</span>
               </div>
-              <div className="item-baseline flex text-xs text-zinc-500 dark:text-zinc-400">
+              <div className="item-baseline flex text-xs text-muted-foreground">
                 Edited {timeElapsed(flowData.updated_at)} ago
               </div>
             </div>
-            <div className="line-clamp-2 flex text-sm text-zinc-800 truncate-doubleline dark:text-white">
+            <div className="overflow-hidden truncate text-sm text-primary">
               {flowData.description}
             </div>
           </div>
@@ -164,20 +160,20 @@ const ListComponent = ({ flowData }: { flowData: FlowType }) => {
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <Button
-                variant="outline"
-                size="icon"
+                variant="ghost"
+                size="iconMd"
                 data-testid="home-dropdown-menu"
-                className="group h-10 w-10 border-none dark:hover:bg-zinc-700"
+                className="group"
               >
                 <ForwardedIconComponent
-                  name="ellipsis"
+                  name="Ellipsis"
                   aria-hidden="true"
-                  className="h-5 w-5 dark:text-zinc-400 dark:group-hover:text-white"
+                  className="h-5 w-5 text-muted-foreground group-hover:text-foreground"
                 />
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent
-              className="mr-[30px] w-[185px] bg-white dark:bg-black"
+              className="w-[185px]"
               sideOffset={5}
               side="bottom"
             >
diff --git a/src/frontend/src/pages/MainPage/components/listSkeleton/index.tsx b/src/frontend/src/pages/MainPage/components/listSkeleton/index.tsx
new file mode 100644
index 000000000..63f7d7048
--- /dev/null
+++ b/src/frontend/src/pages/MainPage/components/listSkeleton/index.tsx
@@ -0,0 +1,33 @@
+import { Card } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+
+const ListSkeleton = () => {
+  return (
+    <Card className="my-2 flex flex-row justify-between rounded-lg border border-border bg-background p-4">
+      {/* left side */}
+      <div className="flex min-w-0 items-center gap-4">
+        {/* Icon skeleton */}
+        <div className="flex h-[52px] w-[52px] items-center justify-center rounded-lg">
+          <Skeleton className="h-full w-full rounded-lg" />
+        </div>
+
+        <div className="flex min-w-0 flex-col justify-start gap-2">
+          {/* Title and time skeleton */}
+          <div className="flex min-w-0 items-baseline max-md:flex-col">
+            <Skeleton className="h-5 w-[150px]" />
+            <Skeleton className="ml-2 h-4 w-[180px]" />
+          </div>
+          {/* Description skeleton */}
+          <Skeleton className="h-4 w-[250px]" />
+        </div>
+      </div>
+
+      {/* right side */}
+      <div className="ml-5 flex items-center gap-2">
+        <Skeleton className="h-10 w-10 rounded-md" />
+      </div>
+    </Card>
+  );
+};
+
+export default ListSkeleton;
diff --git a/src/frontend/src/pages/MainPage/components/modalsComponent/index.tsx b/src/frontend/src/pages/MainPage/components/modalsComponent/index.tsx
new file mode 100644
index 000000000..e1203f28a
--- /dev/null
+++ b/src/frontend/src/pages/MainPage/components/modalsComponent/index.tsx
@@ -0,0 +1,41 @@
+// Modals.tsx
+import TemplatesModal from "@/modals/templatesModal";
+import DeleteConfirmationModal from "../../../../modals/deleteConfirmationModal";
+
+interface ModalsProps {
+  openModal: boolean;
+  setOpenModal: (value: boolean) => void;
+  openDeleteFolderModal: boolean;
+  setOpenDeleteFolderModal: (value: boolean) => void;
+  handleDeleteFolder: () => void;
+}
+
+const ModalsComponent = ({
+  openModal = false,
+  setOpenModal = () => {},
+  openDeleteFolderModal = false,
+  setOpenDeleteFolderModal = () => {},
+  handleDeleteFolder = () => {},
+}: ModalsProps) => (
+  <>
+    {openModal && <TemplatesModal open={openModal} setOpen={setOpenModal} />}
+    {openDeleteFolderModal && (
+      <DeleteConfirmationModal
+        open={openDeleteFolderModal}
+        setOpen={setOpenDeleteFolderModal}
+        onConfirm={() => {
+          handleDeleteFolder();
+          setOpenDeleteFolderModal(false);
+        }}
+        description="folder"
+        note={
+          "Deleting the selected folder will remove all associated flows and components."
+        }
+      >
+        <></>
+      </DeleteConfirmationModal>
+    )}
+  </>
+);
+
+export default ModalsComponent;
diff --git a/src/frontend/src/pages/MainPage/oldComponents/modalsComponent/index.tsx b/src/frontend/src/pages/MainPage/oldComponents/modalsComponent/index.tsx
index c78e825a9..e1203f28a 100644
--- a/src/frontend/src/pages/MainPage/oldComponents/modalsComponent/index.tsx
+++ b/src/frontend/src/pages/MainPage/oldComponents/modalsComponent/index.tsx
@@ -1,9 +1,6 @@
 // Modals.tsx
 import TemplatesModal from "@/modals/templatesModal";
-import IconComponent from "../../../../components/genericIconComponent";
-import { Button } from "../../../../components/ui/button";
 import DeleteConfirmationModal from "../../../../modals/deleteConfirmationModal";
-import { cn } from "../../../../utils/utils";
 
 interface ModalsProps {
   openModal: boolean;
@@ -35,13 +32,7 @@ const ModalsComponent = ({
           "Deleting the selected folder will remove all associated flows and components."
         }
       >
-        <Button variant="ghost" size="icon" className={"whitespace-nowrap"}>
-          <IconComponent
-            data-testid={`delete-folder`}
-            name="Trash2"
-            className={cn("h-5 w-5")}
-          />
-        </Button>
+        <></>
       </DeleteConfirmationModal>
     )}
   </>
diff --git a/src/frontend/src/pages/MainPage/pages/emptyFolder/index.tsx b/src/frontend/src/pages/MainPage/pages/emptyFolder/index.tsx
new file mode 100644
index 000000000..a80181a99
--- /dev/null
+++ b/src/frontend/src/pages/MainPage/pages/emptyFolder/index.tsx
@@ -0,0 +1,45 @@
+import ForwardedIconComponent from "@/components/genericIconComponent";
+import { Button } from "@/components/ui/button";
+import { useFolderStore } from "@/stores/foldersStore";
+
+type EmptyFolderProps = {
+  setOpenModal: (open: boolean) => void;
+};
+
+export const EmptyFolder = ({ setOpenModal }: EmptyFolderProps) => {
+  const folders = useFolderStore((state) => state.folders);
+
+  return (
+    <div className="m-0 h-full w-full bg-secondary p-0">
+      <div className="text-container">
+        <div className="relative z-20 flex w-full flex-col items-center justify-center gap-2">
+          <h3
+            className="pt-5 font-chivo text-2xl font-semibold"
+            data-testid="mainpage_title"
+          >
+            {folders?.length > 1 ? "Empty folder" : "Start building"}
+          </h3>
+          <p className="pb-5 text-sm text-secondary-foreground">
+            Begin with a template, or start from scratch.
+          </p>
+          <Button
+            variant="default"
+            onClick={() => setOpenModal(true)}
+            id="new-project-btn"
+          >
+            <ForwardedIconComponent
+              name="plus"
+              aria-hidden="true"
+              className="h-4 w-4"
+            />
+            <span className="hidden whitespace-nowrap font-semibold md:inline">
+              New Flow
+            </span>
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default EmptyFolder;
diff --git a/src/frontend/src/pages/MainPage/pages/emptyPage/index.tsx b/src/frontend/src/pages/MainPage/pages/emptyPage/index.tsx
index 6d528e75a..52f18adf8 100644
--- a/src/frontend/src/pages/MainPage/pages/emptyPage/index.tsx
+++ b/src/frontend/src/pages/MainPage/pages/emptyPage/index.tsx
@@ -1,61 +1,32 @@
 import ShortLangFlowIcon from "@/components/appHeaderComponent/assets//ShortLangFlowIcon.svg?react";
-import CardsWrapComponent from "@/components/cardsWrapComponent";
 import ForwardedIconComponent from "@/components/genericIconComponent";
 import { Button } from "@/components/ui/button";
 import { ENABLE_NEW_LOGO } from "@/customization/feature-flags";
 import { useFolderStore } from "@/stores/foldersStore";
-import { PaginatedFolderType } from "../../entities";
 
 type EmptyPageProps = {
   setOpenModal: (open: boolean) => void;
-  setShowFolderModal: (open: boolean) => void;
-  folderData: PaginatedFolderType | null;
 };
 
-export const EmptyPage = ({
-  setOpenModal,
-  setShowFolderModal,
-  folderData,
-}: EmptyPageProps) => {
+export const EmptyPage = ({ setOpenModal }: EmptyPageProps) => {
   const folders = useFolderStore((state) => state.folders);
 
   return (
-    <div className="m-0 p-0">
+    <div className="m-0 h-full w-full bg-secondary p-0">
       <div className="text-container">
-        {(folderData?.folder?.name && folderData?.flows?.items?.length !== 0) ||
-          (folders?.length > 1 && (
-            <div className="absolute left-10 top-10 flex items-center text-2xl font-semibold dark:text-white">
-              <Button
-                variant="ghost"
-                size="icon"
-                onClick={() => setShowFolderModal(true)}
-                className="mr-2 bg-transparent lg:hidden"
-              >
-                <ForwardedIconComponent
-                  name="panel-left-open"
-                  aria-hidden="true"
-                  className="h-5 w-5 text-zinc-500 dark:text-zinc-400"
-                />
-              </Button>
-              {folderData?.folder?.name}
-            </div>
-          ))}
         <div className="relative z-20 flex w-full flex-col items-center justify-center gap-2">
           {ENABLE_NEW_LOGO ? (
-            <ShortLangFlowIcon className="h-7 w-7 fill-black dark:fill-[white]" />
+            <ShortLangFlowIcon className="h-7 w-7 fill-foreground" />
           ) : (
-            <span className="fill-black text-4xl dark:fill-white">⛓️</span>
+            <span className="fill-foreground text-4xl">⛓️</span>
           )}
           <h3
-            className="pt-5 text-2xl font-semibold dark:text-white"
-            style={{
-              fontFamily: "Chivo",
-            }}
+            className="pt-5 font-chivo text-2xl font-semibold text-foreground"
             data-testid="mainpage_title"
           >
             {folders?.length > 1 ? "Empty folder" : "Start building"}
           </h3>
-          <p className="pb-5 text-sm dark:text-white">
+          <p className="pb-5 text-sm text-secondary-foreground">
             Begin with a template, or start from scratch.
           </p>
           <Button
@@ -64,7 +35,7 @@ export const EmptyPage = ({
             id="new-project-btn"
           >
             <ForwardedIconComponent
-              name="plus"
+              name="Plus"
               aria-hidden="true"
               className="h-4 w-4"
             />
@@ -74,79 +45,37 @@ export const EmptyPage = ({
           </Button>
         </div>
       </div>
-      {folders?.length > 1 ? (
-        <svg
-          width="100vw"
-          height="calc(99vh - 62px)"
-          style={{ backgroundColor: "var(--color-bg1)" }}
-          xmlns="http://www.w3.org/2000/svg"
-          xmlnsXlink="http://www.w3.org/1999/xlink"
-        >
-          <g opacity="0.4">
-            <rect
-              width="100%"
-              height="100%"
-              fill="url(#pattern0_5875_59136)"
-              fill-opacity="0.7"
-            />
-          </g>
+      <div className="gradient-bg">
+        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
           <defs>
-            <pattern
-              id="pattern0_5875_59136"
-              patternContentUnits="objectBoundingBox"
-              width="0.54"
-              height="0.737062"
-            >
-              <use
-                xlinkHref="#image0_5875_59136"
-                transform="scale(0.000555556 0.000758294)"
+            <filter id="lf-balls">
+              <feGaussianBlur in="turbulence" stdDeviation="10" result="blur" />
+              <feColorMatrix
+                in="blur"
+                type="matrix"
+                values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -8"
+                result="color-matrix"
               />
-            </pattern>
-            <image
-              id="image0_5875_59136"
-              width="972"
-              height="972"
-              xlinkHref="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA8wAAAPMCAYAAACXKDBuAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAACLVSURBVHgB7dtBUhzJlqjh4xhD2AAruvHM0C7EHPbBCmAT9TSIHql3I+Zint4eyuxLFWZxpNuRkR4k32fmFpGz3yhxsoKTGQEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMB/osRCwzDc1hoPpZTXiPo0juO36EiPHj169Gyvp7VMFz169HyCnkOTHj16VmD+nL7nIhba7eKuPXdft6ibKSw606NHjx492+tpLeVdz310pEfPmfeYP3r0nGmPeXj6nstYqJS4erufnuL70pPTk9OT05PTM6/sP8+kZ4aenJ7c1nr2DXoyenJ65pk/uTV6jrBhLo+11pe27v618o7O9OjRo0fP9npaS33X8xwd6dFz5j3mjx49Z9pjHn6sHgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA4B9KAAAAwJn417+G0rS7WsdxjCUuY6FhGG5rjYcW9NqCnlrQt+hIjx49evRsr6e1TBc9evR8gp5Dkx49etZpmS568p4vree+XVtPPLWzqOciFtrt4q4tqq9b1M30g4rO9OjRo0fP9npaS3nXcx8d6dFz5j3mjx49Z9pjHv5Rz9dj9izeMLdN99Xb/fRXhb705PTk9OT05PTMK/svAOmZoSenJ7e1nn2DnoyenJ555k9ujZ4jbJjLY631pa3ff63gozM9evTo0bO9ntZS3/U8R0d69Jx5j/mjR8+Z9piHf9zzo7X83MK/HwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA4N9KAAAAwBkYhiFqjdK0V7WO4xhLXMZCLei2BT20oNcW9NSCvkVHevTo0aNnez3Tm1ejR4+eT9BzaNKjR886LdNFT97zpZ37dlpPPLWzqOciFtrt4q4tqq/bD+lm+kFFZ3r06NGjZ3s9raW867mPjvToOfMe80ePnjPtMQ//qOfrMXsWb5jbpvvq7X76q0JfenJ6cnpyenJ65pX9F4D0zNCT05PbWs++QU9GT07PPPMnt0bPETbM5bHW+tLW779W8NGZHj169OjZXk9rqe96nqMjPXrOvMf80aPnTHvMwz/u+dFafm7h3w8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPBvJQAAAOD/YBiGqDVK017VOo5j9HTsnstYqAXdtqCHFvTagp5a0LfoSI8ePXr0bK9nevNq9OjR8wl6Dk169OhZp2W6bK3nSzv37bSeeGrnrHouYqHdLu7aovq6/Ue7mf7DRWd69OjRo2d7Pa2lvOu5j4706DnzHvNHj54z7dno/Pl6zj2LN8xt0331dj/9laMvPTk9OT05PTk988r+C0B6ZujJ6cltrWffoCejJ6dnnvmTW6PnCBvm8lhrfYmovz4SEJ3p0aNHj57t9bSW+q7nOTrSo+fMe8wfPXrOtGfD8+dHa/m5oZ/PJnoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADgd0osNAzDba3xUEp5jahP4zh+i4706NGjR8/2elrLdNGjR88n6Dk06dGjZ52W6aLnhD0XsdBuF3ftufu6Rd1MYdGZHj169OjZXk9rKe967qMjPXr0rN5kHurRs06L+XPinstYqJS4erufnuL70pPTk9OT05PTM6/sP8+kZ4aenJ7c1nr2DXoyenJ65pk/uTV6jrBhLo+11pe27v618o7O9OjRo0fP9npaS33X8xwd6dGjZ/Um81CPnnVazJ8P1AMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC/U2KhYRhua42HUsprRH0ax/FbdKRHjx49erbX01qmix49ej5Bz6FJjx4967RMFz0n7LmIhXa7uGvP3dct6mYKi8706NGjR8/2elpLeddzHx3p0aNn9SbzUI+edVrMnxP3XMZCpcTV2/30FN+XnpyenJ6cnpyeeWX/eSY9M/Tk9OS21rNv0JPRk9Mzz/zJrdFzhA1zeay1vrR196+Vd3SmR48ePXq219Na6rue5+hIjx49qzeZh3r0rNNi/nygHgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPidEgsNw3BbazyUUl4j6tM4jt+iIz169OjRs72e1jJd9OjR8wl6Dk169OhZp2W66Dlhz0UstNvFXXvuvm5RN1NYdKZHjx49erbX01rKu5776EiPHj2rN5mHevSs02L+nLjnMhYqJa7e7qen+L705PTk9OT05PTMK/vPM+mZoSenJ7e1nn2DnoyenJ555k9ujZ4jbJjLY631pa27f628ozM9evTo0bO9ntZS3/U8R0d69OhZvck81KNnnRbz5wP1AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwO+UWGgYhtta46GU8hpRn8Zx/BYd6dGjR4+e7fW0lumiR4+eT9BzaNKjR886LdNFzwl7LmKh3S7u2nP3dYu6mcKiMz169OjRs72e1lLe9dxHR3r06FmXeahHz2ot5s+Jey5joVLi6u1+eorvS09OT05PTk9Oz7yy/zyTnhl6cnpyW+vZN+jJ6MnpmWf+5NboOcKGuTzWWl/auvvXyjs606NHjx492+tpLfVdz3N0pEePntWbzEM9etZpMX8+UA8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD8TomFhmG4rTUeSimvEfVpHMdv0ZEePXr06NleT2uZLnr06PkEPYcmPXr0rNMyXfScsOciFtrt4q49d1+3qJspLDrTo0ePHj3b62kt5V3PfXSkR4+e1ZvMQz161mkxf07ccxkLlRJXb/fTU3xfenJ6cnpyenJ65pX955n0zNCT05PbWs++QU9GT07PPPMnt0bPETbM5bHW+tLW3b9W3tGZHj169OjZXk9rqe96nqMjPXr0rN5kHurRs06L+fNnPT9ay88t/PsBAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD+rQQAAACcgWEYotYoTXtV6ziOscRlLNSCblvQQwt6bUFPLehbdKRHjx49erbXM715NXr06PkEPYcmPXr0rNMyXfTkPV/auW+n9cRTO4t6LmKh3S7u2qL6uv2QbqYfVHSmR48ePXq219Nayrue++hIjx49qzeZh3r0rNNi/vy+5+sxexZvmNum++rtfvqrQl96cnpyenJ6cnrmlf0XgPTM0JPTk9taz75BT0ZPTs888ye3Rs8RNszlsdb60tbvv1bw0ZkePXr06NleT2up73qeoyM9evSs3mQe6tGzTov582c9P1rLzy38+wEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP6tBAAAAPwfDMMQtUZp2qtax3GMno7dcxkLtaDbFvTQgl5b0FML+hYd6dGjR4+e7fVMb16NHj16PkHPoUmPHj3rtEyXrfV8aee+ndYTT+2cVc9FLLTbxV1bVF+3/2g303+46EyPHj169Gyvp7WUdz330ZEePXpWbzIP9ehZp2WL8+frOfcs3jC3TffV2/30V46+9OT05PTk9OT0zCv7LwDpmaEnpye3tZ59g56MnpyeeeZPbo2eI2yYy2Ot9SWi/vpIQHSmR48ePXq219Na6rue5+hIjx49qzeZh3r0rNOy1fnzo7X83NDPZxM9AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA8DslFhqG4bbWeCilvEbUp3Ecv0VHevTo0aNnez2tZbro0aPnE/QcmvTo0bNOy3TRc8Kei1hot4u79tx93aJuprDoTI8ePXr0bK+ntZR3PffRkR49elZvMg/16Fmnxfw5cc9lLFRKXL3dT0/xfenJ6cnpyenJ6ZlX9p9n0jNDT05Pbms9+wY9GT05PfPMn9waPUfYMJfHWutLW3f/WnlHZ3r06NGjZ3s9raW+63mOjvTo0bN6k3moR88K/uu/RvPnA/UAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADA75RYaBiG21rjoZTyGlGfxnH8Fh3p0aNHj57t9bSW6aJHj55P0HNo0qNHzzot00XPCXsuYqHdLu7ac/d1i7qZwqIzPXr06NGzvZ7WUt713EdHevToWb3JPNSjZ50W8+fEPZexUClx9XY/PcX3pSenJ6cnpyenZ17Zf55Jzww9OT25rfXsG/Rk9OT0zDN/cmv0HGHDXB5rrS9t3f1r5R2d6dGjR4+e7fW0lvqu5zk60qNHz+pN5qEePeu0mD8fqAcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB+p8RCwzDc1hoPpZTXiPo0juO36EiPHj169Gyvp7VMFz169HyCnkOTHj161mmZLnpO2HMRC+12cdeeu69b1M0UFp3p0aNHj57t9bSW8q7nPjrSo0fP6k3moR4967SYPyfuuYyFSomrt/vpKb4vPTk9OT05PTk988r+80x6ZujJ6cltrWffoCejJ6dnnvmTW6PnCBvm8lhrfWnr7l8r7+hMjx49evRsr6e11Hc9z9GRHj16Vm8yD/XoWafF/PlAPQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPA7JRYahuG21ngopbxG1KdxHL9FR3r06NGjZ3s9rWW66NGj5xP0HJr06NGzTst00XPCnotYaLeLu/bcfd2ibqaw6EyPHj169Gyvp7WUdz330ZEePWfeY/7o0XOmPebh6XsuY6FS4urtfnqK70tPTk9OT05PTs+8sv88k54ZenJ6clvr2TfoyejJ6Zln/uTW6DnChrk81lpf2rr718o7OtOjR48ePdvraS31Xc9zdKRHz5n3mD969Jxpj3n4sXoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADgd0osNAzDba3xUEp5jahP4zh+i4705PTo0aOnU8t00aNHzyfoOTTp0aNnnZbpoueEPRex0G4Xd+25+7pF3Uxh0ZkePXr06NleT2sp73ruoyM9es68x/zRo+dMe8zD0/dcxkKlxNXb/fQU35eenJ6cnpyenJ55Zf95Jj0z9OT05LbWs2/Qk9GT0zPP/Mmt0XOEDXN5rLW+tHX3r5V3dKZHjx49erbX01rqu57n6EiPnjPvMX/06DnTHvPwY/UAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADA75RYaBiG21rjoZTyGlGfxnH8Fh3p0aNHj57t9bSW6aJHj55P0HNo0qNHzzot00XPCXsuYqHdLu7ac/d1i7qZwqIzPXr06NGzvZ7WUt713EdHevSceY/5o0fPmfaYh6fvuYyFSomrt/vpKb4vPTk9OT05PTk988r+80x6ZujJ6cltrWffoCejJ6dnnvmTW6PnCBvm8lhrfWnr7l8r7+hMjx49evRsr6e11Hc9z9GRHj1n3mP+6NFzpj3m4cfqAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgN8psdAwDLe1xkMp5TWiPo3j+C060qNHjx492+tpLdNFjx49n6Dn0KRHj551WqaLnhP2XMRCu13ctefu6xZ1M4VFZ3r06NGjZ3s9raW867mPjvToOfMe80ePnjPtMQ9P33MZC5USV2/301N8X3pyenJ6cnpyeuaV/eeZ9MzQk9OT21rPvkFPRk9OzzzzJ7dGzxE2zOWx1vrS1t2/Vt7RmR49evTo2V5Pa6nvep6jIz16zrzH/NGj50x7zMOP1QMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPxDiYWGYYhaozTtVa3jOEZPevTo0aNHjx49evTo0XOuPZzWRSx32873dv463PemJ6cnpyenJ6dnxvQ/G80XPXr0nH/PgXmY05PTM2P6fW/n9l//Gv57GP7f/5/uo6PP0LP4gXm3i7u2qL5uf3W5aechOtOjR48ePdvraS2lna9/67mPjvTo0bN6k3moR886LeVdzxbmz1n3XMZCpcTV2315jc705PTk9OT05PTMK/svAOmZoSenJ7e1nn2DnoyenJ555k9ujZ4jbJjLY631R0T92c5TdKZHjx49erbX01qqHj16PkfPoUmPHj3rtPzv7/tLa2kPg/U5OtIDAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD8B0osNAxD1Bqlaa9qHccxetKjR48ePXr06NGjR48ePXqO0XMRy922872dvw73venJ6cnpyenJ6ZkxvXk1X/To0XP+PQfmYU5PTs8M8+f0PYsfmHe7uGuL6uv2FH/TzkN0pkePHj16ttfTWko7X//Wcx8d6dGjZ/Um81CPnnVazJ8T91zGQm3TffV2X16jMz05PTk9OT05PfPK/gtAemboyenJba1n36AnoyenZ575k1uj5wgb5vJYa/0RUX+28xSd6dGjR4+e7fW0lqpHj57P0XNo0qNHzzot5s8H6gEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP6hxELDMEStUZr2qtZxHKMnPXr06NGjR48ePXr06NGj5xg9F7HcbTvf2/nrcN+bnpyenJ6cnpyeGdObV/NFjx49599zYB7m9OT0zDB/Tt+z+IF5t4u7tqi+bk/xN+08RGd69OjRo2d7Pa2ltPP1bz330ZEePXpWbzIP9ehZp8X8OXHPZSzUNt1Xb/flNTrTk9OT05PTk9Mzr+y/AKRnhp6cntzWevYNejJ6cnrmmT+5NXqOsGEuj7XWHxH1ZztP0ZkePXr06NleT2upevTo+Rw9hyY9evSs02L+fKAeAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADgH0osNAxD1Bqlaa9qHccxetKjR48ePXr06NGjR48ePXqO0XMRy922872dvw73venJ6cnpyenJ6ZkxvXk1X/To0XP+PQfmYU5PTs8M8+f0PYsfmHe7uGuL6uv2FH/TzkN0pkePHj16ttfTWko7X//Wcx8d6dGjZ/Um81CPnnVazJ8T91zGQm3TffV2X16jMz05PTk9OT05PfPK/gtAemboyenJba1n36AnoyenZ575k1uj5wgb5vJYa/0RUX+28xSd6dGzhB49elZrqXr06PkcPYcmPXr0rNNi/nygHgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA4B9KLDQMQ9QapWmvah3HMXrSo0ePHj169OjRo0ePHj16jtFzEcvdtvO9nb8O973pyenJ6cnpyemZMb15NV/06NFz/j0H5mFOT07PDPPn9D2LH5h3u7hri+rr9hR/085DdKZHjx49erbX01pKO1//1nMfHenRo2f1JvNQj551WsyfE/dcxkJt0331dl9eozM9OT05PTk9OT3zyv4LQHpm6MnpyW2tZ9+gJ6Mnp2ee+ZNbo+cIG+byWGv9EVF/tvMUnenRo0ePnu31tJaqR4+ez9FzaNKjR886LebPB+oBAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD+ocRCwzBErVGa9qrWcRyjJz169OjRo0ePHj169OjRo+cYPRex3G0739v563Dfm56cnpyenJ6cnhnTm1fzRY8ePeffc2Ae5vTk9Mwwf07fs/iBebeLu7aovm5P8TftPERnevTo0aNnez2tpbTz9W8999GRHj16Vm8yD/XoWafF/Dlxz2Us1DbdV2/35TU605PTk9OT05PTM6/svwCkZ4aenJ7c1nr2DXoyenJ65pk/uTV6jrBhLo+11h8R9Wc7T9GZHj169OjZXk9rqXr06PkcPYcmPXr0rNNi/nygHgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA4B9KLDQMQ9QapWmvah3HMXrSo0ePHj169OjRo0ePHj16jtFzEcvdtvO9nb8O973pyenJ6cnpyenJbaZnejNtvujRo2c15k9OT07PDPPn9D2LH5h3u7hri+rr9hR/085DdKZHjx49ej5Ez3101FpKO1/16NGzWpN5qEfPOi3mz4l7LmOhtum+ersvr9GZnpyenJ6cnpye3JZ6yv4LSXpm6Mnp+T3zJ6cnp2ee+ZNbo+cIG+byWGv9EVF/tvMUnenRo0ePHj1/0FL16NGzapMePXrWaTF/PlAPAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADwDyUWGoYhao3StFe1juMYPenRo0ePHj169OjRo0ePHj3H6LmI5W7b+d7OX4f73vTk9OT05PTk9OQ20zO9mTZf9OjRsxrzJ6cn5/1Cz2Z6Fj8w73Zx1xbV1+0p/qadh+hMjx49evR8iJ776Ki1lHa+6tGjZ7Um81DPWfT4fddzGQu1TffV2315jc705PTk9OT05PTkttRT9l9I0jNDT07P75k/OT057xfz9OTW6DnChrk81lp/RNSf7TxFZ3r06NGjR88ftFQ9evSs2qRHz1n0+H3XAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHE2JhYZhiFqjNO1VreM4Rk969OjRo0ePHj169OjRo0fPMXouYrnbdr6389fhvjc9OT05PTk9OT25zfRMb6bNFz169KzG/MnpyXm/0LOZnsUPzLtd3LVF9XV7ir9p5yE606NHjx49H6LnPjpqLaWdr3r06FmtyTzUc6wev196uvZcxkJt0331dl9eozM9OT05PTk9OT25LfWU/ReS9MzQk9Pze+ZPTk/O+8U8Pbk1eo6wYS6PtdYfEfVnO0/RmR49evTo0fMHLVWPHj2rNunRcxY9ft/1AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA8J/5H+5NWtTiRrvtAAAAAElFTkSuQmCC"
-            />
+              <feBlend in="SourceGraphic" in2="color-matrix" mode="normal" />
+            </filter>
+            <filter id="lf-noise">
+              <feTurbulence
+                type="fractalNoise"
+                baseFrequency="0.65"
+                stitchTiles="stitch"
+              />
+            </filter>
           </defs>
         </svg>
-      ) : (
-        <div className="gradient-bg">
-          <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
-            <defs>
-              <filter id="lf-balls">
-                <feGaussianBlur
-                  in="turbulence"
-                  stdDeviation="10"
-                  result="blur"
-                />
-                <feColorMatrix
-                  in="blur"
-                  type="matrix"
-                  values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -8"
-                  result="color-matrix"
-                />
-                <feBlend in="SourceGraphic" in2="color-matrix" mode="normal" />
-              </filter>
-              <filter id="lf-noise">
-                <feTurbulence
-                  type="fractalNoise"
-                  baseFrequency="0.65"
-                  stitchTiles="stitch"
-                />
-              </filter>
-            </defs>
-          </svg>
-          <div className="gradients-container">
-            <div className="g1" />
-            <div className="g2" />
-            <div className="g3" />
-            <div className="g4" />
-            <div className="g5" />
-            <div className="g6" />
-          </div>
+        <div className="gradients-container">
+          <div className="g1" />
+          <div className="g2" />
+          <div className="g3" />
+          <div className="g4" />
+          <div className="g5" />
+          <div className="g6" />
         </div>
-      )}
+      </div>
     </div>
   );
 };
diff --git a/src/frontend/src/pages/MainPage/pages/homePage/index.tsx b/src/frontend/src/pages/MainPage/pages/homePage/index.tsx
index c6832e32b..477c6c76a 100644
--- a/src/frontend/src/pages/MainPage/pages/homePage/index.tsx
+++ b/src/frontend/src/pages/MainPage/pages/homePage/index.tsx
@@ -1,16 +1,18 @@
 import CardsWrapComponent from "@/components/cardsWrapComponent";
-import ForwardedIconComponent from "@/components/genericIconComponent";
 import PaginatorComponent from "@/components/paginatorComponent";
 import { useGetFolderQuery } from "@/controllers/API/queries/folders/use-get-folder";
-import { ENABLE_DATASTAX_LANGFLOW } from "@/customization/feature-flags";
+import useFlowsManagerStore from "@/stores/flowsManagerStore";
 import { useFolderStore } from "@/stores/foldersStore";
 import { useCallback, useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import GridComponent from "../../components/grid";
+import GridSkeleton from "../../components/gridSkeleton";
 import HeaderComponent from "../../components/header";
 import ListComponent from "../../components/list";
+import ListSkeleton from "../../components/listSkeleton";
 import useFileDrop from "../../hooks/use-on-file-drop";
 import ModalsComponent from "../../oldComponents/modalsComponent";
+import EmptyFolder from "../emptyFolder";
 
 const HomePage = ({ type }) => {
   const [view, setView] = useState<"grid" | "list">(() => {
@@ -25,9 +27,14 @@ const HomePage = ({ type }) => {
   const handleFileDrop = useFileDrop("flows");
   const [flowType, setFlowType] = useState<"flows" | "components">(type);
   const myCollectionId = useFolderStore((state) => state.myCollectionId);
-  const [folderName, setFolderName] = useState("");
+  const folders = useFolderStore((state) => state.folders);
+  const folderName =
+    folders.find((folder) => folder.id === folderId)?.name ??
+    folders[0]?.name ??
+    "";
+  const flows = useFlowsManagerStore((state) => state.flows);
 
-  const { data: folderData, isFetching } = useGetFolderQuery({
+  const { data: folderData, isLoading } = useGetFolderQuery({
     id: folderId ?? myCollectionId!,
     page: pageIndex,
     size: pageSize,
@@ -50,12 +57,6 @@ const HomePage = ({ type }) => {
     },
   };
 
-  useEffect(() => {
-    if (folderData && folderData?.folder?.name) {
-      setFolderName(folderData.folder.name);
-    }
-  }, [folderData, folderData?.folder?.name]);
-
   useEffect(() => {
     localStorage.setItem("view", view);
   }, [view]);
@@ -70,6 +71,10 @@ const HomePage = ({ type }) => {
     setPageIndex(1);
   }, []);
 
+  const isEmptyFolder =
+    flows?.find((flow) => flow.folder_id === (folderId ?? myCollectionId)) ===
+    undefined;
+
   return (
     <CardsWrapComponent
       onFileDrop={handleFileDrop}
@@ -110,11 +115,25 @@ const HomePage = ({ type }) => {
             setView={setView}
             setNewProjectModal={setNewProjectModal}
             setSearch={onSearch}
+            isEmptyFolder={isEmptyFolder}
           />
-
-          {flowType === "flows" ? (
+          {isEmptyFolder ? (
+            <EmptyFolder setOpenModal={setNewProjectModal} />
+          ) : (
             <div className="mt-6">
-              {data && data.pagination.total > 0 ? (
+              {isLoading ? (
+                view === "grid" ? (
+                  <div className="mt-1 grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3">
+                    <GridSkeleton />
+                    <GridSkeleton />
+                  </div>
+                ) : (
+                  <div className="flex flex-col">
+                    <ListSkeleton />
+                    <ListSkeleton />
+                  </div>
+                )
+              ) : data && data.pagination.total > 0 ? (
                 view === "grid" ? (
                   <div className="mt-1 grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3">
                     {data.flows.map((flow) => (
@@ -128,39 +147,19 @@ const HomePage = ({ type }) => {
                     ))}
                   </div>
                 )
-              ) : (
-                <div className="pt-2 text-center">
-                  No saved or custom components. Learn more about{" "}
+              ) : flowType === "flows" ? (
+                <div className="pt-2 text-center text-sm text-secondary-foreground">
+                  No flows in this folder.{" "}
                   <a
-                    href="https://docs.langflow.org/components-custom-components"
-                    target="_blank"
-                    rel="noreferrer"
-                    className="underline"
+                    onClick={() => setNewProjectModal(true)}
+                    className="cursor-pointer underline"
                   >
-                    creating custom components
+                    Create a new flow
                   </a>
                   , or browse the store.
                 </div>
-              )}
-            </div>
-          ) : (
-            <div className="mt-6">
-              {data && data.pagination.total > 0 ? (
-                view === "grid" ? (
-                  <div className="mt-1 grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3">
-                    {data.flows.map((flow) => (
-                      <GridComponent key={flow.id} flowData={flow} />
-                    ))}
-                  </div>
-                ) : (
-                  <div className="flex flex-col">
-                    {data.flows.map((flow) => (
-                      <ListComponent key={flow.id} flowData={flow} />
-                    ))}
-                  </div>
-                )
               ) : (
-                <div className="pt-2 text-center">
+                <div className="pt-2 text-center text-sm text-secondary-foreground">
                   No saved or custom components. Learn more about{" "}
                   <a
                     href="https://docs.langflow.org/components-custom-components"
@@ -177,7 +176,7 @@ const HomePage = ({ type }) => {
           )}
         </div>
 
-        {!isFetching && data.pagination.total >= 10 && (
+        {!isLoading && !isEmptyFolder && data.pagination.total >= 10 && (
           <div className="relative flex justify-end px-3 py-6">
             <PaginatorComponent
               storeComponent={true}
@@ -191,6 +190,7 @@ const HomePage = ({ type }) => {
           </div>
         )}
       </div>
+
       <ModalsComponent
         openModal={newProjectModal}
         setOpenModal={setNewProjectModal}
diff --git a/src/frontend/src/pages/MainPage/pages/index.tsx b/src/frontend/src/pages/MainPage/pages/index.tsx
index 4259107ea..7cf6e58dc 100644
--- a/src/frontend/src/pages/MainPage/pages/index.tsx
+++ b/src/frontend/src/pages/MainPage/pages/index.tsx
@@ -1,15 +1,15 @@
 import CardsWrapComponent from "@/components/cardsWrapComponent";
-import FolderSidebarNav from "@/components/folderSidebarComponent";
+import SideBarFoldersButtonsComponent from "@/components/folderSidebarComponent/components/sideBarFolderButtons";
+import LoadingComponent from "@/components/loadingComponent";
+import { SidebarProvider } from "@/components/ui/sidebar";
 import { useDeleteFolders } from "@/controllers/API/queries/folders";
-import { useGetFolderQuery } from "@/controllers/API/queries/folders/use-get-folder";
 import { useCustomNavigate } from "@/customization/hooks/use-custom-navigate";
-import { LoadingPage } from "@/pages/LoadingPage";
 import useAlertStore from "@/stores/alertStore";
+import useFlowsManagerStore from "@/stores/flowsManagerStore";
 import { useFolderStore } from "@/stores/foldersStore";
 import { useQueryClient } from "@tanstack/react-query";
 import { useEffect, useState } from "react";
-import { Outlet, useParams } from "react-router-dom";
-import { PaginatedFolderType } from "../entities";
+import { Outlet } from "react-router-dom";
 import useFileDrop from "../hooks/use-on-file-drop";
 import ModalsComponent from "../oldComponents/modalsComponent";
 import EmptyPage from "./emptyPage";
@@ -19,35 +19,19 @@ export default function CollectionPage(): JSX.Element {
   const [openDeleteFolderModal, setOpenDeleteFolderModal] = useState(false);
   const setFolderToEdit = useFolderStore((state) => state.setFolderToEdit);
   const navigate = useCustomNavigate();
-  const { folderId } = useParams();
-  const myCollectionId = useFolderStore((state) => state.myCollectionId);
+  const flows = useFlowsManagerStore((state) => state.flows);
+  const examples = useFlowsManagerStore((state) => state.examples);
   const handleFileDrop = useFileDrop("flow");
   const setSuccessData = useAlertStore((state) => state.setSuccessData);
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const folderToEdit = useFolderStore((state) => state.folderToEdit);
-  const showFolderModal = useFolderStore((state) => state.showFolderModal);
   const folders = useFolderStore((state) => state.folders);
-  const setShowFolderModal = useFolderStore(
-    (state) => state.setShowFolderModal,
-  );
   const queryClient = useQueryClient();
 
   useEffect(() => {
     return () => queryClient.removeQueries({ queryKey: ["useGetFolder"] });
   }, []);
 
-  const { isFetching, data } = useGetFolderQuery({
-    id: folderId ?? myCollectionId!,
-  });
-
-  const [folderData, setFolderData] = useState<PaginatedFolderType | null>(
-    null,
-  );
-
-  useEffect(() => {
-    setFolderData(data ?? null);
-  }, [data]);
-
   const { mutate } = useDeleteFolders();
 
   const handleDeleteFolder = () => {
@@ -73,58 +57,41 @@ export default function CollectionPage(): JSX.Element {
   };
 
   return (
-    <>
-      {(folderData?.flows?.items?.length !== 0 || folders?.length > 1) && (
-        <aside
-          className={`flex w-2/6 min-w-[220px] max-w-[20rem] flex-col border-r bg-background px-4 lg:inline ${
-            showFolderModal ? "" : "hidden"
-          }`}
-        >
-          <FolderSidebarNav
+    <SidebarProvider>
+      {flows &&
+        examples &&
+        folders &&
+        (flows?.length !== examples?.length || folders?.length > 1) && (
+          <SideBarFoldersButtonsComponent
             handleChangeFolder={(id: string) => {
               navigate(`all/folder/${id}`);
-              setShowFolderModal(false);
             }}
             handleDeleteFolder={(item) => {
               setFolderToEdit(item);
               setOpenDeleteFolderModal(true);
             }}
           />
-        </aside>
-      )}
-
-      {!isFetching && folderData ? (
-        <div
-          className={`relative mx-auto h-full w-full overflow-y-scroll ${
-            showFolderModal ? "opacity-80 blur-[2px]" : ""
-          }`}
-          onClick={(e) => {
-            e.stopPropagation();
-
-            if (showFolderModal) {
-              setShowFolderModal(false);
-            }
-          }}
-        >
-          <CardsWrapComponent
-            onFileDrop={handleFileDrop}
-            dragMessage={`Drop your file(s) here`}
-          >
-            {folderData && folderData?.flows?.items?.length !== 0 ? (
-              <Outlet />
-            ) : (
-              <EmptyPage
-                setOpenModal={setOpenModal}
-                setShowFolderModal={setShowFolderModal}
-                folderData={folderData}
-              />
-            )}
-          </CardsWrapComponent>
-        </div>
-      ) : (
-        <LoadingPage />
-      )}
-
+        )}
+      <main className="flex flex-1">
+        {flows && examples && folders ? (
+          <div className={`relative mx-auto h-full w-full overflow-y-scroll`}>
+            <CardsWrapComponent
+              onFileDrop={handleFileDrop}
+              dragMessage={`Drop your file(s) here`}
+            >
+              {flows?.length !== examples?.length || folders?.length > 1 ? (
+                <Outlet />
+              ) : (
+                <EmptyPage setOpenModal={setOpenModal} />
+              )}
+            </CardsWrapComponent>
+          </div>
+        ) : (
+          <div className="flex h-full w-full items-center justify-center">
+            <LoadingComponent remSize={30} />
+          </div>
+        )}
+      </main>
       <ModalsComponent
         openModal={openModal}
         setOpenModal={setOpenModal}
@@ -132,6 +99,6 @@ export default function CollectionPage(): JSX.Element {
         setOpenDeleteFolderModal={setOpenDeleteFolderModal}
         handleDeleteFolder={handleDeleteFolder}
       />
-    </>
+    </SidebarProvider>
   );
 }
diff --git a/src/frontend/src/pages/MainPage/utils/get-template-style.ts b/src/frontend/src/pages/MainPage/utils/get-template-style.ts
index 40e4cf09c..21523216d 100644
--- a/src/frontend/src/pages/MainPage/utils/get-template-style.ts
+++ b/src/frontend/src/pages/MainPage/utils/get-template-style.ts
@@ -1,10 +1,23 @@
-import { TEMPLATES_DATA } from "../constants";
+import { useTypesStore } from "@/stores/typesStore";
+import { FlowType } from "@/types/flow";
+import { nodeIconsLucide } from "@/utils/styleUtils";
 
-export const getTemplateStyle = (flowData: {
-  name: string;
-}): { icon: string; icon_bg_color: string } => {
-  const { icon, icon_bg_color } = TEMPLATES_DATA.examples.find((example) =>
-    flowData.name.includes(example.name),
-  ) ?? { icon: "circle-help", icon_bg_color: "bg-purple-300" };
-  return { icon, icon_bg_color };
+export const useGetTemplateStyle = (
+  flowData: FlowType,
+): { getIcon: () => string } => {
+  const getIcon = () => {
+    if (flowData.is_component) {
+      const dataType = flowData.data?.nodes[0].data.type;
+      const isGroup = !!flowData.data?.nodes[0].data.node?.flow;
+      const icon = flowData.data?.nodes[0].data.node?.icon;
+      const types = useTypesStore((state) => state.types);
+      const name = nodeIconsLucide[dataType] ? dataType : types[dataType];
+      const iconName = icon || (isGroup ? "group_components" : name);
+      return iconName;
+    } else {
+      return flowData.icon ?? "Workflow";
+    }
+  };
+
+  return { getIcon };
 };
diff --git a/src/frontend/src/stores/foldersStore.tsx b/src/frontend/src/stores/foldersStore.tsx
index 66234dba6..9e8ba36d7 100644
--- a/src/frontend/src/stores/foldersStore.tsx
+++ b/src/frontend/src/stores/foldersStore.tsx
@@ -17,7 +17,4 @@ export const useFolderStore = create<FoldersStoreType>((set, get) => ({
   setStarterProjectId: (id) => set(() => ({ starterProjectId: id })),
   folders: [],
   setFolders: (folders) => set(() => ({ folders: folders })),
-  showFolderModal: false,
-  setShowFolderModal: (showFolderModal) =>
-    set(() => ({ showFolderModal: showFolderModal })),
 }));
diff --git a/src/frontend/src/style/applies.css b/src/frontend/src/style/applies.css
index 862b18b56..42d8e5d52 100644
--- a/src/frontend/src/style/applies.css
+++ b/src/frontend/src/style/applies.css
@@ -1281,8 +1281,6 @@
   left: 0;
   justify-content: center;
   align-items: center;
-  user-select: none;
-  text-shadow: 1px 1px rgba(0, 0, 0, 0.1);
 }
 
 :root {
@@ -1326,7 +1324,7 @@
     var(--color-bg1);
   top: 0;
   left: 0;
-  opacity: 0.6;
+  background-blend-mode: overlay;
 
   svg {
     display: none;
diff --git a/src/frontend/src/style/index.css b/src/frontend/src/style/index.css
index 8e8200fff..23fe1b71a 100644
--- a/src/frontend/src/style/index.css
+++ b/src/frontend/src/style/index.css
@@ -8,6 +8,7 @@
   :root {
     --font-sans: "Inter", sans-serif;
     --font-mono: "JetBrains Mono", monospace;
+    --font-chivo: "Chivo", sans-serif;
 
     --foreground: 0 0% 0%; /* hsl(0, 0%, 0%) */
     --background: 0 0% 100%; /* hsl(0, 0%, 100%) */
diff --git a/src/frontend/src/types/zustand/folders/index.ts b/src/frontend/src/types/zustand/folders/index.ts
index 3bb546552..deab29874 100644
--- a/src/frontend/src/types/zustand/folders/index.ts
+++ b/src/frontend/src/types/zustand/folders/index.ts
@@ -13,6 +13,4 @@ export type FoldersStoreType = {
   setStarterProjectId: (id: string) => void;
   folders: FolderType[];
   setFolders: (folders: FolderType[]) => void;
-  showFolderModal: boolean;
-  setShowFolderModal: (show: boolean) => void;
 };
diff --git a/src/frontend/src/utils/reactflowUtils.ts b/src/frontend/src/utils/reactflowUtils.ts
index c791d300b..d363935d6 100644
--- a/src/frontend/src/utils/reactflowUtils.ts
+++ b/src/frontend/src/utils/reactflowUtils.ts
@@ -1596,6 +1596,7 @@ export const createNewFlow = (
     name: flow?.name ? flow.name : "Untitled document",
     data: flowData,
     id: "",
+    icon: flow?.icon ?? undefined,
     is_component: flow?.is_component ?? false,
     folder_id: folderId,
     endpoint_name: flow?.endpoint_name ?? undefined,
diff --git a/src/frontend/src/utils/styleUtils.ts b/src/frontend/src/utils/styleUtils.ts
index add40f5a4..55f629a0c 100644
--- a/src/frontend/src/utils/styleUtils.ts
+++ b/src/frontend/src/utils/styleUtils.ts
@@ -48,6 +48,7 @@ import {
   Command,
   Compass,
   Copy,
+  CopyPlus,
   CornerDownLeft,
   Cpu,
   CpuIcon,
@@ -96,6 +97,7 @@ import {
   Keyboard,
   Laptop2,
   Layers,
+  LayoutGrid,
   LayoutPanelTop,
   Link,
   Link2,
@@ -127,6 +129,7 @@ import {
   PanelLeftClose,
   PanelLeftOpen,
   PanelRightClose,
+  PanelRightOpen,
   Paperclip,
   PaperclipIcon,
   Pen,
@@ -792,6 +795,7 @@ export const nodeIconsLucide: iconsType = {
   ArrowBigUp,
   PanelRightClose,
   Dot,
+  LayoutGrid,
   StickyNote,
   note: StickyNote,
   RotateCcw,
@@ -808,7 +812,9 @@ export const nodeIconsLucide: iconsType = {
   ArrowUpRight,
   Scroll,
   Image,
+  CopyPlus,
   Pen,
+  PanelRightOpen,
   CornerDownLeft,
   ChevronsDownUp,
   OptionIcon,
diff --git a/src/frontend/tailwind.config.mjs b/src/frontend/tailwind.config.mjs
index 0748bfd6e..3c5d79c1a 100644
--- a/src/frontend/tailwind.config.mjs
+++ b/src/frontend/tailwind.config.mjs
@@ -258,6 +258,7 @@ const config = {
       fontFamily: {
         sans: ["var(--font-sans)", ...fontFamily.sans],
         mono: ["var(--font-mono)", ...fontFamily.mono],
+        chivo: ["var(--font-chivo)", ...fontFamily.sans],
       },
       boxShadow: {
         "frozen-ring": "0 0 10px 2px rgba(128, 190, 230, 0.5)",
diff --git a/src/frontend/tests/core/features/folders.spec.ts b/src/frontend/tests/core/features/folders.spec.ts
index 2d939f065..a7ebf28f5 100644
--- a/src/frontend/tests/core/features/folders.spec.ts
+++ b/src/frontend/tests/core/features/folders.spec.ts
@@ -41,9 +41,17 @@ test("CRUD folders", async ({ page }) => {
   await page.getByText("Select All").first().isVisible();
 
   await page.getByTestId("add-folder-button").click();
-  await page.getByText("New Folder").last().isVisible();
+  await page
+    .locator("[data-testid='folder-sidebar']")
+    .getByText("New Folder")
+    .last()
+    .isVisible();
   await page.waitForTimeout(1000);
-  await page.getByText("New Folder").last().dblclick();
+  await page
+    .locator("[data-testid='folder-sidebar']")
+    .getByText("New Folder")
+    .last()
+    .dblclick();
 
   const element = await page.getByTestId("input-folder");
   await element.fill("new folder test name");
@@ -172,9 +180,17 @@ test("change flow folder", async ({ page }) => {
   await page.getByText("Select All").first().isVisible();
 
   await page.getByTestId("add-folder-button").click();
-  await page.getByText("New Folder").last().isVisible();
+  await page
+    .locator("[data-testid='folder-sidebar']")
+    .getByText("New Folder")
+    .last()
+    .isVisible();
   await page.waitForTimeout(1000);
-  await page.getByText("New Folder").last().dblclick();
+  await page
+    .locator("[data-testid='folder-sidebar']")
+    .getByText("New Folder")
+    .last()
+    .dblclick();
   await page.getByTestId("input-folder").fill("new folder test name");
   await page.keyboard.press("Enter");
   await page.getByText("new folder test name").last().isVisible();