diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx
index ede56aaa0..b16c36766 100644
--- a/src/frontend/src/App.tsx
+++ b/src/frontend/src/App.tsx
@@ -14,6 +14,7 @@ import { ErrorBoundary } from "react-error-boundary";
 import CrashErrorComponent from "./components/CrashErrorComponent";
 import { TabsContext } from "./contexts/tabsContext";
 import MainPage from "./pages/MainPage";
+import { getVersion } from "./controllers/API";
 
 export default function App() {
   let { setCurrent, setShowSideBar, setIsStackedOpen } =
@@ -49,7 +50,7 @@ export default function App() {
   // Initialize state variable for the version
   const [version, setVersion] = useState("");
   useEffect(() => {
-    fetch("/version")
+    getVersion()
       .then((res) => res.json())
       .then((data) => {
         setVersion(data.version);
diff --git a/src/frontend/src/controllers/API/index.ts b/src/frontend/src/controllers/API/index.ts
index 42038a89a..a7270a7a0 100644
--- a/src/frontend/src/controllers/API/index.ts
+++ b/src/frontend/src/controllers/API/index.ts
@@ -1,28 +1,56 @@
 import { PromptTypeAPI, errorsTypeAPI } from "./../../types/api/index";
 import { APIObjectType, sendAllProps } from "../../types/api/index";
 import axios, { AxiosResponse } from "axios";
-import { FlowType } from "../../types/flow";
+import { FlowStyleType, FlowType } from "../../types/flow";
 
+/**
+ * Fetches all objects from the API endpoint.
+ *
+ * @returns {Promise<AxiosResponse<APIObjectType>>} A promise that resolves to an AxiosResponse containing all the objects.
+ */
 export async function getAll(): Promise<AxiosResponse<APIObjectType>> {
   return await axios.get(`/all`);
 }
 
+/**
+ * Sends data to the API for prediction.
+ *
+ * @param {sendAllProps} data - The data to be sent to the API.
+ * @returns {AxiosResponse<any>} The API response.
+ */
 export async function sendAll(data: sendAllProps) {
   return await axios.post(`/predict`, data);
 }
 
+/**
+ * Validates code by sending it to an API endpoint.
+ *
+ * @param {string} code - The code to validate.
+ * @returns {Promise<AxiosResponse<errorsTypeAPI>>} A promise that resolves to an AxiosResponse containing the validation results.
+ */
 export async function checkCode(
   code: string
 ): Promise<AxiosResponse<errorsTypeAPI>> {
   return await axios.post("/validate/code", { code });
 }
 
+/**
+ * Checks the prompt for the code block by sending it to an API endpoint.
+ *
+ * @param {string} template - The template string of the prompt to check.
+ * @returns {Promise<AxiosResponse<PromptTypeAPI>>} A promise that resolves to an AxiosResponse containing the validation results.
+ */
 export async function checkPrompt(
   template: string
 ): Promise<AxiosResponse<PromptTypeAPI>> {
   return await axios.post("/validate/prompt", { template });
 }
 
+/**
+ * Fetches a list of JSON files from a GitHub repository and returns their contents as an array of FlowType objects.
+ *
+ * @returns {Promise<FlowType[]>} A promise that resolves to an array of FlowType objects.
+ */
 export async function getExamples(): Promise<FlowType[]> {
   const url =
     "https://api.github.com/repos/logspace-ai/langflow_examples/contents/examples";
@@ -40,6 +68,13 @@ export async function getExamples(): Promise<FlowType[]> {
   return await Promise.all(contentsPromises);
 }
 
+/**
+ * Saves a new flow to the database.
+ *
+ * @param {FlowType} newFlow - The flow data to save.
+ * @returns {Promise<any>} The saved flow data.
+ * @throws Will throw an error if saving fails.
+ */
 export async function saveFlowToDatabase(newFlow: FlowType) {
   try {
     const response = await fetch("/flows/", {
@@ -63,7 +98,13 @@ export async function saveFlowToDatabase(newFlow: FlowType) {
     throw error;
   }
 }
-
+/**
+ * Updates an existing flow in the database.
+ *
+ * @param {FlowType} updatedFlow - The updated flow data.
+ * @returns {Promise<any>} The updated flow data.
+ * @throws Will throw an error if the update fails.
+ */
 export async function updateFlowInDatabase(updatedFlow: FlowType) {
   try {
     const response = await fetch(`/flows/${updatedFlow.id}`, {
@@ -88,6 +129,12 @@ export async function updateFlowInDatabase(updatedFlow: FlowType) {
   }
 }
 
+/**
+ * Reads all flows from the database.
+ *
+ * @returns {Promise<any>} The flows data.
+ * @throws Will throw an error if reading fails.
+ */
 export async function readFlowsFromDatabase() {
   try {
     const response = await fetch("/flows/");
@@ -101,6 +148,13 @@ export async function readFlowsFromDatabase() {
   }
 }
 
+/**
+ * Deletes a flow from the database.
+ *
+ * @param {string} flowId - The ID of the flow to delete.
+ * @returns {Promise<any>} The deleted flow data.
+ * @throws Will throw an error if deletion fails.
+ */
 export async function deleteFlowFromDatabase(flowId: string) {
   try {
     const response = await fetch(`/flows/${flowId}`, {
@@ -116,6 +170,13 @@ export async function deleteFlowFromDatabase(flowId: string) {
   }
 }
 
+/**
+ * Fetches a flow from the database by ID.
+ *
+ * @param {number} flowId - The ID of the flow to fetch.
+ * @returns {Promise<any>} The flow data.
+ * @throws Will throw an error if fetching fails.
+ */
 export async function getFlowFromDatabase(flowId: number) {
   try {
     const response = await fetch(`/flows/${flowId}`);
@@ -129,6 +190,66 @@ export async function getFlowFromDatabase(flowId: number) {
   }
 }
 
+/**
+ * Fetches flow styles from the database.
+ *
+ * @returns {Promise<any>} The flow styles data.
+ * @throws Will throw an error if fetching fails.
+ */
+export async function getFlowStylesFromDatabase() {
+  try {
+    const response = await fetch("/flows_styles/");
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    return response.json();
+  } catch (error) {
+    console.error(error);
+    throw error;
+  }
+}
+
+/**
+ * Saves a new flow style to the database.
+ *
+ * @param {FlowStyleType} flowStyle - The flow style data to save.
+ * @returns {Promise<any>} The saved flow style data.
+ * @throws Will throw an error if saving fails.
+ */
+export async function saveFlowStyleToDatabase(flowStyle: FlowStyleType) {
+  try {
+    const response = await fetch("/flows_styles/", {
+      method: "POST",
+      headers: {
+        accept: "application/json",
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(flowStyle),
+    });
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    return response.json();
+  } catch (error) {
+    console.error(error);
+    throw error;
+  }
+}
+
+/**
+ * Fetches the version of the API.
+ *
+ * @returns {Promise<AxiosResponse<any>>} A promise that resolves to an AxiosResponse containing the version information.
+ */
+export async function getVersion() {
+  return await axios.get("/version");
+}
+
+/**
+ * Fetches the health status of the API.
+ *
+ * @returns {Promise<AxiosResponse<any>>} A promise that resolves to an AxiosResponse containing the health status.
+ */
 export async function getHealth() {
   return await axios.get("/health");
 }
diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/pages/MainPage/components/cardComponent/index.tsx
similarity index 91%
rename from src/frontend/src/components/cardComponent/index.tsx
rename to src/frontend/src/pages/MainPage/components/cardComponent/index.tsx
index b9c9bb46c..7871d18f3 100644
--- a/src/frontend/src/components/cardComponent/index.tsx
+++ b/src/frontend/src/pages/MainPage/components/cardComponent/index.tsx
@@ -3,17 +3,17 @@ import {
   ArrowTopRightOnSquareIcon,
   TrashIcon,
 } from "@heroicons/react/24/outline";
-import { OpenAiIcon } from "../../icons/OpenAi";
-import { Button } from "../../components/ui/button";
-import { Badge } from "../../components/ui/badge";
+import { OpenAiIcon } from "../../../../icons/OpenAi";
+import { Button } from "../../../../components/ui/button";
+import { Badge } from "../../../../components/ui/badge";
 import {
   Card,
   CardDescription,
   CardFooter,
   CardHeader,
   CardTitle,
-} from "../ui/card";
-import { FlowType } from "../../types/flow";
+} from "../../../../components/ui/card";
+import { FlowType } from "../../../../types/flow";
 export const CardComponent = ({
   flow,
   idx,
diff --git a/src/frontend/src/types/flow/index.ts b/src/frontend/src/types/flow/index.ts
index 3cfbee421..b1f86392b 100644
--- a/src/frontend/src/types/flow/index.ts
+++ b/src/frontend/src/types/flow/index.ts
@@ -26,4 +26,5 @@ export type NodeDataType = {
 export type FlowStyleType = {
   emoji: string;
   color: string;
+  flow_id: string;
 };