diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index b688fdb7b..06f9d0b0a 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -300,7 +300,7 @@ export default function ParameterComponent({
   ) : (
     <div
       ref={ref}
-      className="mt-1 flex w-full flex-wrap items-center justify-between relative bg-muted px-5 py-2"
+      className="relative mt-1 flex w-full flex-wrap items-center justify-between bg-muted px-5 py-2"
     >
       <>
         <div
diff --git a/src/frontend/src/components/authAdminGuard/index.tsx b/src/frontend/src/components/authAdminGuard/index.tsx
index e0edab387..003756561 100644
--- a/src/frontend/src/components/authAdminGuard/index.tsx
+++ b/src/frontend/src/components/authAdminGuard/index.tsx
@@ -1,15 +1,10 @@
-import { useContext, useEffect } from "react";
+import { useContext } from "react";
 import { Navigate } from "react-router-dom";
 import { AuthContext } from "../../contexts/authContext";
 
 export const ProtectedAdminRoute = ({ children }) => {
-  const {
-    isAdmin,
-    isAuthenticated,
-    logout,
-    userData,
-    autoLogin,
-  } = useContext(AuthContext);
+  const { isAdmin, isAuthenticated, logout, userData, autoLogin } =
+    useContext(AuthContext);
 
   if (!isAuthenticated) {
     logout();
diff --git a/src/frontend/src/components/authGuard/index.tsx b/src/frontend/src/components/authGuard/index.tsx
index 713862e00..93735e977 100644
--- a/src/frontend/src/components/authGuard/index.tsx
+++ b/src/frontend/src/components/authGuard/index.tsx
@@ -3,8 +3,7 @@ import { Navigate } from "react-router-dom";
 import { AuthContext } from "../../contexts/authContext";
 
 export const ProtectedRoute = ({ children }) => {
-  const { isAuthenticated, logout} =
-    useContext(AuthContext);
+  const { isAuthenticated, logout } = useContext(AuthContext);
   if (!isAuthenticated) {
     logout();
     return <Navigate to="/login" replace />;
diff --git a/src/frontend/src/contexts/authContext.tsx b/src/frontend/src/contexts/authContext.tsx
index e00ac93b6..74969d9f2 100644
--- a/src/frontend/src/contexts/authContext.tsx
+++ b/src/frontend/src/contexts/authContext.tsx
@@ -81,7 +81,7 @@ export function AuthProvider({ children }): React.ReactElement {
       });
   }, [setUserData, setLoading, autoLogin, setIsAdmin]);
 
-  function getUser(){
+  function getUser() {
     getLoggedUser()
       .then((user) => {
         setUserData(user);
@@ -101,8 +101,9 @@ export function AuthProvider({ children }): React.ReactElement {
     setAccessToken(newAccessToken);
     setRefreshToken(refreshToken);
     setIsAuthenticated(true);
-    setTimeout(() => {getUser();}, 500)
-    
+    setTimeout(() => {
+      getUser();
+    }, 500);
   }
 
   function logout() {
diff --git a/src/frontend/src/contexts/typesContext.tsx b/src/frontend/src/contexts/typesContext.tsx
new file mode 100644
index 000000000..c785495aa
--- /dev/null
+++ b/src/frontend/src/contexts/typesContext.tsx
@@ -0,0 +1,98 @@
+import _ from "lodash";
+import { createContext, ReactNode, useState } from "react";
+import { getAll, getHealth } from "../controllers/API";
+import useAlertStore from "../stores/alertStore";
+import { APIKindType } from "../types/api";
+import { typesContextType } from "../types/typesContext";
+
+//context to share types adn functions from nodes to flow
+
+const initialValue: typesContextType = {
+  types: {},
+  setTypes: () => {},
+  templates: {},
+  setTemplates: () => {},
+  data: {},
+  setData: () => {},
+  getTypes: () => {},
+  setFetchError: () => {},
+  fetchError: false,
+  setFilterEdge: (filter) => {},
+  getFilterEdge: [],
+};
+
+export const typesContext = createContext<typesContextType>(initialValue);
+
+export function TypesProvider({ children }: { children: ReactNode }) {
+  const [types, setTypes] = useState({});
+  const [templates, setTemplates] = useState({});
+  const [data, setData] = useState({});
+  const [fetchError, setFetchError] = useState(false);
+  const setLoading = useAlertStore((state) => state.setLoading);
+  const [getFilterEdge, setFilterEdge] = useState([]);
+
+  async function getTypes(): Promise<void> {
+    // We will keep a flag to handle the case where the component is unmounted before the API call resolves.
+    let isMounted = true;
+    try {
+      const result = await getAll();
+      // Make sure to only update the state if the component is still mounted.
+      if (isMounted && result?.status === 200) {
+        setLoading(false);
+        let { data } = _.cloneDeep(result);
+        setData((old) => ({ ...old, ...data }));
+        setTemplates(
+          Object.keys(data).reduce((acc, curr) => {
+            Object.keys(data[curr]).forEach((c: keyof APIKindType) => {
+              //prevent wrong overwriting of the component template by a group of the same type
+              if (!data[curr][c].flow) acc[c] = data[curr][c];
+            });
+            return acc;
+          }, {})
+        );
+        // Set the types by reducing over the keys of the result data and updating the accumulator.
+        setTypes(
+          // Reverse the keys so the tool world does not overlap
+          Object.keys(data)
+            .reverse()
+            .reduce((acc, curr) => {
+              Object.keys(data[curr]).forEach((c: keyof APIKindType) => {
+                acc[c] = curr;
+                // Add the base classes to the accumulator as well.
+                data[curr][c].base_classes?.forEach((b) => {
+                  acc[b] = curr;
+                });
+              });
+              return acc;
+            }, {})
+        );
+      }
+    } catch (error) {
+      console.error("An error has occurred while fetching types.");
+      console.log(error);
+      await getHealth().catch((e) => {
+        setFetchError(true);
+      });
+    }
+  }
+
+  return (
+    <typesContext.Provider
+      value={{
+        types,
+        setTypes,
+        setTemplates,
+        templates,
+        data,
+        setData,
+        getTypes,
+        fetchError,
+        setFetchError,
+        setFilterEdge,
+        getFilterEdge,
+      }}
+    >
+      {children}
+    </typesContext.Provider>
+  );
+}
diff --git a/src/frontend/src/pages/AdminPage/LoginPage/index.tsx b/src/frontend/src/pages/AdminPage/LoginPage/index.tsx
index 3d0530932..765567ca9 100644
--- a/src/frontend/src/pages/AdminPage/LoginPage/index.tsx
+++ b/src/frontend/src/pages/AdminPage/LoginPage/index.tsx
@@ -4,7 +4,7 @@ import { Button } from "../../../components/ui/button";
 import { Input } from "../../../components/ui/input";
 import { CONTROL_LOGIN_STATE } from "../../../constants/constants";
 import { AuthContext } from "../../../contexts/authContext";
-import { getLoggedUser, onLogin } from "../../../controllers/API";
+import { onLogin } from "../../../controllers/API";
 import useAlertStore from "../../../stores/alertStore";
 import { LoginType } from "../../../types/api";
 import {
diff --git a/src/frontend/src/pages/loginPage/index.tsx b/src/frontend/src/pages/loginPage/index.tsx
index c8dc0815c..1c005da58 100644
--- a/src/frontend/src/pages/loginPage/index.tsx
+++ b/src/frontend/src/pages/loginPage/index.tsx
@@ -6,7 +6,7 @@ import { Button } from "../../components/ui/button";
 import { Input } from "../../components/ui/input";
 import { CONTROL_LOGIN_STATE } from "../../constants/constants";
 import { AuthContext } from "../../contexts/authContext";
-import { getLoggedUser, onLogin } from "../../controllers/API";
+import { onLogin } from "../../controllers/API";
 import useAlertStore from "../../stores/alertStore";
 import { LoginType } from "../../types/api";
 import {