From 6383918f7b7088be280c0880e8ea8a9fd75c43cc Mon Sep 17 00:00:00 2001
From: Antoine Dewez <44063631+Zewed@users.noreply.github.com>
Date: Wed, 14 Feb 2024 16:37:33 -0800
Subject: [PATCH] feat(frontend): new brain creation modal (#2192)

# Description

Please include a summary of the changes and the related issue. Please
also include relevant motivation and context.

## Checklist before requesting a review

Please delete options that are not relevant.

- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my code
- [ ] I have commented hard-to-understand areas
- [ ] I have ideally added tests that prove my fix is effective or that
my feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged

## Screenshots (if appropriate):
---
 frontend/app/App.tsx                          |   2 +-
 .../components/MentionsList/MentionsList.tsx  |   2 +-
 .../KnowledgeToFeed.module.scss               |   3 +
 .../KnowledgeToFeed/KnowledgeToFeed.tsx       |  32 +++---
 .../FromDocuments/FromDocuments.module.scss   |   5 +
 frontend/app/chat/[chatId]/page.tsx           |   2 +-
 frontend/app/search/page.tsx                  |   2 +-
 frontend/app/studio/page.tsx                  |   2 +-
 .../AddBrainModal/AddBrainModal.module.scss   |  21 ++++
 .../AddBrainModal/AddBrainModal.tsx           |  36 +++++-
 .../brainCreation-provider.tsx                |  12 +-
 .../AddBrainSteps/AddBrainSteps.tsx           |  44 --------
 .../BrainKnowledgeStep/BrainKnowledgeStep.tsx |  80 -------------
 .../components/KnowledgeToFeedInput.tsx       |  26 -----
 .../hooks/useBrainCreationHandler.ts          |  52 ---------
 .../hooks/useBrainKnowledgeStep.ts            |  24 ----
 .../BrainParamsStep/BrainParamsStep.tsx       |  96 ----------------
 .../PublicAccessConfirmationModal.tsx         |  42 -------
 .../hooks/useBrainParamsStep.ts               |  16 ---
 .../hooks/useBrainStatusOptions.ts            |  25 -----
 .../hooks/usePublicAccessConfirmationModal.ts |  43 -------
 .../BrainTypeSelectionStep.tsx                |  56 ----------
 .../hooks/useBrainTypeSelectionStep.ts        |  21 ----
 .../hooks/useKnowledgeSourceLabel.ts          |  35 ------
 .../components/Stepper/Stepper.tsx            |  31 ------
 .../components/Stepper/components/Step.tsx    |  39 -------
 .../components/AddBrainSteps/index.ts         |   1 -
 .../components/AddBrainSteps/types.ts         |   6 -
 .../BrainKnowledgeStep.module.scss            |  19 ++++
 .../BrainKnowledgeStep/BrainKnowledgeStep.tsx |  51 +++++++++
 .../ConnectableBrain/ConnectableBrain.tsx     |   0
 .../hooks/useConnectableBrain.ts              |   2 +-
 .../CompositeBrainConnections.tsx             |   0
 .../hooks/useBrainCreationApi.ts              |  22 ++--
 .../BrainMainInfosStep.module.scss            |  25 +++++
 .../BrainMainInfosStep/BrainMainInfosStep.tsx |  76 +++++++++++++
 .../BrainTypeSelection.module.scss            |  47 ++++++++
 .../BrainTypeSelection/BrainTypeSelection.tsx |  41 +++++++
 .../BrainTypeSelectionStep.module.scss        |  31 ++++++
 .../BrainTypeSelectionStep.tsx                |  69 ++++++++++++
 .../components/Stepper/Stepper.module.scss    | 105 ++++++++++++++++++
 .../components/Stepper/Stepper.tsx            |  58 ++++++++++
 .../AddBrainModal/components/index.ts         |   1 -
 .../hooks/useBrainCreationSteps.ts            |   7 +-
 .../AddBrainModal/{ => types}/types.ts        |  14 +++
 .../hooks/useParamsDefinitionDefaultValues.ts |   2 +-
 .../useSecretsDefinitionDefaultValues.ts      |   2 +-
 .../lib/components/ui/Modal/Modal.module.scss |   2 +-
 .../TextAreaInput/TextAreaInput.module.scss   |  35 ++++++
 .../ui/TextAreaInput/TextAreaInput.tsx        |  32 ++++++
 frontend/lib/helpers/iconList.ts              |   8 ++
 frontend/lib/hooks/useDropzone.ts             |   2 +-
 frontend/styles/_Colors.module.scss           |   3 +
 frontend/styles/_Radius.module.scss           |   1 +
 frontend/styles/_Typography.module.scss       |   1 +
 55 files changed, 729 insertions(+), 683 deletions(-)
 create mode 100644 frontend/lib/components/AddBrainModal/AddBrainModal.module.scss
 rename frontend/lib/components/AddBrainModal/{components/AddBrainSteps => }/brainCreation-provider.tsx (74%)
 delete mode 100644 frontend/lib/components/AddBrainModal/components/AddBrainSteps/AddBrainSteps.tsx
 delete mode 100644 frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/BrainKnowledgeStep/BrainKnowledgeStep.tsx
 delete mode 100644 frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/BrainKnowledgeStep/components/KnowledgeToFeedInput.tsx
 delete mode 100644 frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/BrainKnowledgeStep/hooks/useBrainCreationHandler.ts
 delete mode 100644 frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/BrainKnowledgeStep/hooks/useBrainKnowledgeStep.ts
 delete mode 100644 frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/BrainParamsStep/BrainParamsStep.tsx
 delete mode 100644 frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/BrainParamsStep/components/PublicAccessConfirmationModal.tsx
 delete mode 100644 frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/BrainParamsStep/hooks/useBrainParamsStep.ts
 delete mode 100644 frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/BrainParamsStep/hooks/useBrainStatusOptions.ts
 delete mode 100644 frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/BrainParamsStep/hooks/usePublicAccessConfirmationModal.ts
 delete mode 100644 frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/BrainTypeSelectionStep/BrainTypeSelectionStep.tsx
 delete mode 100644 frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/BrainTypeSelectionStep/hooks/useBrainTypeSelectionStep.ts
 delete mode 100644 frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/BrainTypeSelectionStep/hooks/useKnowledgeSourceLabel.ts
 delete mode 100644 frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/Stepper/Stepper.tsx
 delete mode 100644 frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/Stepper/components/Step.tsx
 delete mode 100644 frontend/lib/components/AddBrainModal/components/AddBrainSteps/index.ts
 delete mode 100644 frontend/lib/components/AddBrainModal/components/AddBrainSteps/types.ts
 create mode 100644 frontend/lib/components/AddBrainModal/components/BrainKnowledgeStep/BrainKnowledgeStep.module.scss
 create mode 100644 frontend/lib/components/AddBrainModal/components/BrainKnowledgeStep/BrainKnowledgeStep.tsx
 rename frontend/lib/components/AddBrainModal/components/{AddBrainSteps/components => }/BrainKnowledgeStep/components/CompositeBrainConnections/Components/ConnectableBrain/ConnectableBrain.tsx (100%)
 rename frontend/lib/components/AddBrainModal/components/{AddBrainSteps/components => }/BrainKnowledgeStep/components/CompositeBrainConnections/Components/ConnectableBrain/hooks/useConnectableBrain.ts (98%)
 rename frontend/lib/components/AddBrainModal/components/{AddBrainSteps/components => }/BrainKnowledgeStep/components/CompositeBrainConnections/CompositeBrainConnections.tsx (100%)
 rename frontend/lib/components/AddBrainModal/components/{AddBrainSteps/components => }/BrainKnowledgeStep/hooks/useBrainCreationApi.ts (88%)
 create mode 100644 frontend/lib/components/AddBrainModal/components/BrainMainInfosStep/BrainMainInfosStep.module.scss
 create mode 100644 frontend/lib/components/AddBrainModal/components/BrainMainInfosStep/BrainMainInfosStep.tsx
 create mode 100644 frontend/lib/components/AddBrainModal/components/BrainTypeSelectionStep/BrainTypeSelection/BrainTypeSelection.module.scss
 create mode 100644 frontend/lib/components/AddBrainModal/components/BrainTypeSelectionStep/BrainTypeSelection/BrainTypeSelection.tsx
 create mode 100644 frontend/lib/components/AddBrainModal/components/BrainTypeSelectionStep/BrainTypeSelectionStep.module.scss
 create mode 100644 frontend/lib/components/AddBrainModal/components/BrainTypeSelectionStep/BrainTypeSelectionStep.tsx
 create mode 100644 frontend/lib/components/AddBrainModal/components/Stepper/Stepper.module.scss
 create mode 100644 frontend/lib/components/AddBrainModal/components/Stepper/Stepper.tsx
 delete mode 100644 frontend/lib/components/AddBrainModal/components/index.ts
 rename frontend/lib/components/AddBrainModal/{components/AddBrainSteps => }/hooks/useBrainCreationSteps.ts (92%)
 rename frontend/lib/components/AddBrainModal/{ => types}/types.ts (54%)
 create mode 100644 frontend/lib/components/ui/TextAreaInput/TextAreaInput.module.scss
 create mode 100644 frontend/lib/components/ui/TextAreaInput/TextAreaInput.tsx

diff --git a/frontend/app/App.tsx b/frontend/app/App.tsx
index bad51005b..19b929595 100644
--- a/frontend/app/App.tsx
+++ b/frontend/app/App.tsx
@@ -5,7 +5,7 @@ import { posthog } from "posthog-js";
 import { PostHogProvider } from "posthog-js/react";
 import { PropsWithChildren, useEffect } from "react";
 
-import { BrainCreationProvider } from "@/lib/components/AddBrainModal/components/AddBrainSteps/brainCreation-provider";
+import { BrainCreationProvider } from "@/lib/components/AddBrainModal/brainCreation-provider";
 import { Menu } from "@/lib/components/Menu/Menu";
 import { useOutsideClickListener } from "@/lib/components/Menu/hooks/useOutsideClickListener";
 import SearchModal from "@/lib/components/SearchModal/SearchModal";
diff --git a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatEditor/components/Editor/components/MentionsList/MentionsList.tsx b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatEditor/components/Editor/components/MentionsList/MentionsList.tsx
index d15394afa..db77ab007 100644
--- a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatEditor/components/Editor/components/MentionsList/MentionsList.tsx
+++ b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatEditor/components/Editor/components/MentionsList/MentionsList.tsx
@@ -2,7 +2,7 @@ import { SuggestionKeyDownProps } from "@tiptap/suggestion";
 import { forwardRef } from "react";
 import { FaAngleDoubleDown } from "react-icons/fa";
 
-import { useBrainCreationContext } from "@/lib/components/AddBrainModal/components/AddBrainSteps/brainCreation-provider";
+import { useBrainCreationContext } from "@/lib/components/AddBrainModal/brainCreation-provider";
 import TextButton from "@/lib/components/ui/TextButton/TextButton";
 
 import { AddNewPromptButton } from "./components/AddNewPromptButton";
diff --git a/frontend/app/chat/[chatId]/components/ActionsBar/components/KnowledgeToFeed/KnowledgeToFeed.module.scss b/frontend/app/chat/[chatId]/components/ActionsBar/components/KnowledgeToFeed/KnowledgeToFeed.module.scss
index 7da93fdb2..db6d9ff01 100644
--- a/frontend/app/chat/[chatId]/components/ActionsBar/components/KnowledgeToFeed/KnowledgeToFeed.module.scss
+++ b/frontend/app/chat/[chatId]/components/ActionsBar/components/KnowledgeToFeed/KnowledgeToFeed.module.scss
@@ -9,6 +9,7 @@
   padding-block: Spacings.$spacing05;
   width: 100%;
   gap: Spacings.$spacing05;
+  overflow: hidden;
 
   .single_selector_wrapper {
     width: 30%;
@@ -37,6 +38,7 @@
     overflow: scroll;
     flex-direction: column;
     gap: Spacings.$spacing02;
+    flex-grow: 1;
     overflow: scroll;
 
     .uploaded_knowledge {
@@ -46,6 +48,7 @@
       justify-content: space-between;
       width: 100%;
       overflow: hidden;
+      font-size: Typography.$small;
 
       .left {
         display: flex;
diff --git a/frontend/app/chat/[chatId]/components/ActionsBar/components/KnowledgeToFeed/KnowledgeToFeed.tsx b/frontend/app/chat/[chatId]/components/ActionsBar/components/KnowledgeToFeed/KnowledgeToFeed.tsx
index b3fc9e6db..37477dbd0 100644
--- a/frontend/app/chat/[chatId]/components/ActionsBar/components/KnowledgeToFeed/KnowledgeToFeed.tsx
+++ b/frontend/app/chat/[chatId]/components/ActionsBar/components/KnowledgeToFeed/KnowledgeToFeed.tsx
@@ -13,7 +13,11 @@ import { FromDocuments } from "./components/FromDocuments/FromDocuments";
 import { FromWebsites } from "./components/FromWebsites/FromWebsites";
 import { formatMinimalBrainsToSelectComponentInput } from "./utils/formatMinimalBrainsToSelectComponentInput";
 
-export const KnowledgeToFeed = (): JSX.Element => {
+export const KnowledgeToFeed = ({
+  hideBrainSelector,
+}: {
+  hideBrainSelector?: boolean;
+}): JSX.Element => {
   const { allBrains, setCurrentBrainId, currentBrain } = useBrainContext();
   const [selectedTab, setSelectedTab] = useState("From documents");
   const { knowledgeToFeed, removeKnowledgeToFeed } =
@@ -46,18 +50,20 @@ export const KnowledgeToFeed = (): JSX.Element => {
 
   return (
     <div className={styles.knowledge_to_feed_wrapper}>
-      <div className={styles.single_selector_wrapper}>
-        <SingleSelector
-          options={brainsWithUploadRights}
-          onChange={setCurrentBrainId}
-          selectedOption={
-            currentBrain
-              ? { label: currentBrain.name, value: currentBrain.id }
-              : undefined
-          }
-          placeholder="Select a brain"
-        />
-      </div>
+      {!hideBrainSelector && (
+        <div className={styles.single_selector_wrapper}>
+          <SingleSelector
+            options={brainsWithUploadRights}
+            onChange={setCurrentBrainId}
+            selectedOption={
+              currentBrain
+                ? { label: currentBrain.name, value: currentBrain.id }
+                : undefined
+            }
+            placeholder="Select a brain"
+          />
+        </div>
+      )}
       <Tabs tabList={knowledgesTabs} />
       <div className={styles.tabs_content_wrapper}>
         {selectedTab === "From documents" && <FromDocuments />}
diff --git a/frontend/app/chat/[chatId]/components/ActionsBar/components/KnowledgeToFeed/components/FromDocuments/FromDocuments.module.scss b/frontend/app/chat/[chatId]/components/ActionsBar/components/KnowledgeToFeed/components/FromDocuments/FromDocuments.module.scss
index 9ed85a759..edf3dcce4 100644
--- a/frontend/app/chat/[chatId]/components/ActionsBar/components/KnowledgeToFeed/components/FromDocuments/FromDocuments.module.scss
+++ b/frontend/app/chat/[chatId]/components/ActionsBar/components/KnowledgeToFeed/components/FromDocuments/FromDocuments.module.scss
@@ -1,5 +1,6 @@
 @use "@/styles/Colors.module.scss";
 @use "@/styles/Radius.module.scss";
+@use "@/styles/ScreenSizes.module.scss";
 @use "@/styles/Spacings.module.scss";
 
 .from_document_wrapper {
@@ -24,6 +25,10 @@
     display: flex;
     gap: Spacings.$spacing02;
 
+    @media (max-width: ScreenSizes.$small) {
+      flex-direction: column;
+    }
+
     .clickable {
       cursor: pointer;
       font-weight: bold;
diff --git a/frontend/app/chat/[chatId]/page.tsx b/frontend/app/chat/[chatId]/page.tsx
index 12c79e4ef..3c7d1ce38 100644
--- a/frontend/app/chat/[chatId]/page.tsx
+++ b/frontend/app/chat/[chatId]/page.tsx
@@ -4,7 +4,7 @@ import { UUID } from "crypto";
 import { useEffect } from "react";
 
 import { AddBrainModal } from "@/lib/components/AddBrainModal";
-import { useBrainCreationContext } from "@/lib/components/AddBrainModal/components/AddBrainSteps/brainCreation-provider";
+import { useBrainCreationContext } from "@/lib/components/AddBrainModal/brainCreation-provider";
 import PageHeader from "@/lib/components/PageHeader/PageHeader";
 import { UploadDocumentModal } from "@/lib/components/UploadDocumentModal/UploadDocumentModal";
 import { useChatContext } from "@/lib/context";
diff --git a/frontend/app/search/page.tsx b/frontend/app/search/page.tsx
index c93694f9b..e3439ab70 100644
--- a/frontend/app/search/page.tsx
+++ b/frontend/app/search/page.tsx
@@ -4,7 +4,7 @@ import { useEffect } from "react";
 
 import { QuivrLogo } from "@/lib/assets/QuivrLogo";
 import { AddBrainModal } from "@/lib/components/AddBrainModal";
-import { useBrainCreationContext } from "@/lib/components/AddBrainModal/components/AddBrainSteps/brainCreation-provider";
+import { useBrainCreationContext } from "@/lib/components/AddBrainModal/brainCreation-provider";
 import PageHeader from "@/lib/components/PageHeader/PageHeader";
 import { UploadDocumentModal } from "@/lib/components/UploadDocumentModal/UploadDocumentModal";
 import { SearchBar } from "@/lib/components/ui/SearchBar/SearchBar";
diff --git a/frontend/app/studio/page.tsx b/frontend/app/studio/page.tsx
index 3b8b377b2..12aed219d 100644
--- a/frontend/app/studio/page.tsx
+++ b/frontend/app/studio/page.tsx
@@ -3,7 +3,7 @@
 import { useState } from "react";
 
 import { AddBrainModal } from "@/lib/components/AddBrainModal";
-import { useBrainCreationContext } from "@/lib/components/AddBrainModal/components/AddBrainSteps/brainCreation-provider";
+import { useBrainCreationContext } from "@/lib/components/AddBrainModal/brainCreation-provider";
 import PageHeader from "@/lib/components/PageHeader/PageHeader";
 import { UploadDocumentModal } from "@/lib/components/UploadDocumentModal/UploadDocumentModal";
 import { Tabs } from "@/lib/components/ui/Tabs/Tabs";
diff --git a/frontend/lib/components/AddBrainModal/AddBrainModal.module.scss b/frontend/lib/components/AddBrainModal/AddBrainModal.module.scss
new file mode 100644
index 000000000..4fabc95fd
--- /dev/null
+++ b/frontend/lib/components/AddBrainModal/AddBrainModal.module.scss
@@ -0,0 +1,21 @@
+@use "@/styles/Spacings.module.scss";
+
+.add_brain_modal_container {
+  display: flex;
+  padding-block: Spacings.$spacing05;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  gap: Spacings.$spacing08;
+
+  .stepper_container {
+    width: 100%;
+    padding-inline: Spacings.$spacing08;
+  }
+
+  .content_wrapper {
+    flex-grow: 1;
+    overflow: scroll;
+  }
+}
diff --git a/frontend/lib/components/AddBrainModal/AddBrainModal.tsx b/frontend/lib/components/AddBrainModal/AddBrainModal.tsx
index 70869b8a8..183321e83 100644
--- a/frontend/lib/components/AddBrainModal/AddBrainModal.tsx
+++ b/frontend/lib/components/AddBrainModal/AddBrainModal.tsx
@@ -1,11 +1,23 @@
 import { FormProvider, useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
 
+import { Modal } from "@/lib/components/ui/Modal/Modal";
 import { addBrainDefaultValues } from "@/lib/config/defaultBrainConfig";
 
-import { AddBrainSteps } from "./components/AddBrainSteps/AddBrainSteps";
-import { CreateBrainProps } from "./types";
+import styles from "./AddBrainModal.module.scss";
+import { useBrainCreationContext } from "./brainCreation-provider";
+import { BrainKnowledgeStep } from "./components/BrainKnowledgeStep/BrainKnowledgeStep";
+import { BrainMainInfosStep } from "./components/BrainMainInfosStep/BrainMainInfosStep";
+import { BrainTypeSelectionStep } from "./components/BrainTypeSelectionStep/BrainTypeSelectionStep";
+import { Stepper } from "./components/Stepper/Stepper";
+import { CreateBrainProps } from "./types/types";
 
 export const AddBrainModal = (): JSX.Element => {
+  const { t } = useTranslation(["translation", "brain", "config"]);
+
+  const { isBrainCreationModalOpened, setIsBrainCreationModalOpened } =
+    useBrainCreationContext();
+
   const defaultValues: CreateBrainProps = {
     ...addBrainDefaultValues,
     setDefault: true,
@@ -18,7 +30,25 @@ export const AddBrainModal = (): JSX.Element => {
 
   return (
     <FormProvider {...methods}>
-      <AddBrainSteps />
+      <Modal
+        title={t("newBrainTitle", { ns: "brain" })}
+        desc={t("newBrainSubtitle", { ns: "brain" })}
+        isOpen={isBrainCreationModalOpened}
+        setOpen={setIsBrainCreationModalOpened}
+        bigModal={true}
+        CloseTrigger={<div />}
+      >
+        <div className={styles.add_brain_modal_container}>
+          <div className={styles.stepper_container}>
+            <Stepper />
+          </div>
+          <div className={styles.content_wrapper}>
+            <BrainTypeSelectionStep />
+            <BrainMainInfosStep />
+            <BrainKnowledgeStep />
+          </div>
+        </div>
+      </Modal>
     </FormProvider>
   );
 };
diff --git a/frontend/lib/components/AddBrainModal/components/AddBrainSteps/brainCreation-provider.tsx b/frontend/lib/components/AddBrainModal/brainCreation-provider.tsx
similarity index 74%
rename from frontend/lib/components/AddBrainModal/components/AddBrainSteps/brainCreation-provider.tsx
rename to frontend/lib/components/AddBrainModal/brainCreation-provider.tsx
index 92e62d032..d19c2b5e5 100644
--- a/frontend/lib/components/AddBrainModal/components/AddBrainSteps/brainCreation-provider.tsx
+++ b/frontend/lib/components/AddBrainModal/brainCreation-provider.tsx
@@ -3,6 +3,8 @@ import { createContext, useContext, useState } from "react";
 interface BrainCreationContextProps {
   isBrainCreationModalOpened: boolean;
   setIsBrainCreationModalOpened: React.Dispatch<React.SetStateAction<boolean>>;
+  creating: boolean;
+  setCreating: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 export const BrainCreationContext = createContext<
@@ -15,11 +17,17 @@ export const BrainCreationProvider = ({
   children: React.ReactNode;
 }): JSX.Element => {
   const [isBrainCreationModalOpened, setIsBrainCreationModalOpened] =
-    useState(false);
+    useState<boolean>(false);
+  const [creating, setCreating] = useState<boolean>(false);
 
   return (
     <BrainCreationContext.Provider
-      value={{ isBrainCreationModalOpened, setIsBrainCreationModalOpened }}
+      value={{
+        isBrainCreationModalOpened,
+        setIsBrainCreationModalOpened,
+        creating,
+        setCreating,
+      }}
     >
       {children}
     </BrainCreationContext.Provider>
diff --git a/frontend/lib/components/AddBrainModal/components/AddBrainSteps/AddBrainSteps.tsx b/frontend/lib/components/AddBrainModal/components/AddBrainSteps/AddBrainSteps.tsx
deleted file mode 100644
index 24ed99b4f..000000000
--- a/frontend/lib/components/AddBrainModal/components/AddBrainSteps/AddBrainSteps.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { useTranslation } from "react-i18next";
-
-import { Modal } from "@/lib/components/ui/Modal/Modal";
-
-import { useBrainCreationContext } from "./brainCreation-provider";
-import { BrainKnowledgeStep } from "./components/BrainKnowledgeStep/BrainKnowledgeStep";
-import { BrainParamsStep } from "./components/BrainParamsStep/BrainParamsStep";
-import { BrainTypeSelectionStep } from "./components/BrainTypeSelectionStep/BrainTypeSelectionStep";
-import { Stepper } from "./components/Stepper/Stepper";
-
-export const AddBrainSteps = (): JSX.Element => {
-  const { t } = useTranslation(["translation", "brain", "config"]);
-
-  const { isBrainCreationModalOpened, setIsBrainCreationModalOpened } =
-    useBrainCreationContext();
-
-  return (
-    <Modal
-      title={t("newBrainTitle", { ns: "brain" })}
-      desc={t("newBrainSubtitle", { ns: "brain" })}
-      isOpen={isBrainCreationModalOpened}
-      setOpen={setIsBrainCreationModalOpened}
-      CloseTrigger={<div />}
-    >
-      <form
-        onSubmit={(e) => {
-          e.preventDefault();
-        }}
-        className="my-10 flex flex-col items-center gap-2 justify-center"
-      >
-        <Stepper />
-        <BrainTypeSelectionStep
-          onCancelBrainCreation={() => setIsBrainCreationModalOpened(false)}
-        />
-        <BrainParamsStep
-          onCancelBrainCreation={() => setIsBrainCreationModalOpened(false)}
-        />
-        <BrainKnowledgeStep
-          onCancelBrainCreation={() => setIsBrainCreationModalOpened(false)}
-        />
-      </form>
-    </Modal>
-  );
-};
diff --git a/frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/BrainKnowledgeStep/BrainKnowledgeStep.tsx b/frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/BrainKnowledgeStep/BrainKnowledgeStep.tsx
deleted file mode 100644
index 3ab1c161a..000000000
--- a/frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/BrainKnowledgeStep/BrainKnowledgeStep.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import { Fragment } from "react";
-import { useTranslation } from "react-i18next";
-import { FaArrowLeft } from "react-icons/fa";
-
-import { ApiRequestDefinition } from "@/lib/components/ApiRequestDefinition";
-import Button from "@/lib/components/ui/Button";
-import { BrainType } from "@/lib/types/BrainConfig";
-
-import { CompositeBrainConnections } from "./components/CompositeBrainConnections/CompositeBrainConnections";
-import { KnowledgeToFeedInput } from "./components/KnowledgeToFeedInput";
-import { useBrainCreationHandler } from "./hooks/useBrainCreationHandler";
-import { useBrainKnowledgeStep } from "./hooks/useBrainKnowledgeStep";
-
-import { useBrainCreationSteps } from "../../hooks/useBrainCreationSteps";
-
-type BrainKnowledgeStepProps = {
-  onCancelBrainCreation: () => void;
-};
-
-export const BrainKnowledgeStep = ({
-  onCancelBrainCreation,
-}: BrainKnowledgeStepProps): JSX.Element => {
-  const { brainType, isSubmitButtonDisabled } = useBrainKnowledgeStep();
-  const { t } = useTranslation(["translation"]);
-  const { goToPreviousStep, currentStep } = useBrainCreationSteps();
-  const { handleCreateBrain, isBrainCreationPending } = useBrainCreationHandler(
-    {
-      closeBrainCreationModal: onCancelBrainCreation,
-    }
-  );
-
-  const brainTypeToKnowledgeComponent: Record<BrainType, JSX.Element> = {
-    doc: <KnowledgeToFeedInput />,
-    api: <ApiRequestDefinition />,
-    composite: <CompositeBrainConnections />,
-  };
-
-  if (currentStep !== "KNOWLEDGE" || brainType === undefined) {
-    return <Fragment />;
-  }
-
-  return (
-    <>
-      {brainTypeToKnowledgeComponent[brainType]}
-      <div className="flex flex-row justify-between items-center flex-1 mt-10 w-full">
-        <Button
-          type="button"
-          variant="tertiary"
-          onClick={onCancelBrainCreation}
-          className="text-primary"
-          disabled={isBrainCreationPending}
-        >
-          {t("cancel", { ns: "translation" })}
-        </Button>
-        <div className="flex gap-4">
-          <Button
-            type="button"
-            variant="secondary"
-            onClick={goToPreviousStep}
-            className="py-2 border-primary text-primary"
-            disabled={isBrainCreationPending}
-          >
-            <FaArrowLeft className="text-xl" size={16} />
-            {t("previous", { ns: "translation" })}
-          </Button>
-
-          <Button
-            className="bg-primary text-white py-2 border-none"
-            type="button"
-            onClick={() => void handleCreateBrain()}
-            disabled={isSubmitButtonDisabled || isBrainCreationPending}
-            isLoading={isBrainCreationPending}
-          >
-            {t("createButton", { ns: "translation" })}
-          </Button>
-        </div>
-      </div>
-    </>
-  );
-};
diff --git a/frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/BrainKnowledgeStep/components/KnowledgeToFeedInput.tsx b/frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/BrainKnowledgeStep/components/KnowledgeToFeedInput.tsx
deleted file mode 100644
index 0c86360b1..000000000
--- a/frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/BrainKnowledgeStep/components/KnowledgeToFeedInput.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { useTranslation } from "react-i18next";
-
-import {
-  Crawler,
-  FeedItems,
-  FileUploader,
-} from "@/lib/components/KnowledgeToFeedInput/components";
-
-export const KnowledgeToFeedInput = (): JSX.Element => {
-  const { t } = useTranslation(["translation", "upload"]);
-
-  return (
-    <div>
-      <div className="flex flex-row gap-10 justify-between items-center mt-5">
-        <FileUploader />
-        <span className="whitespace-nowrap	">
-          {`${t("and", { ns: "translation" })} / ${t("or", {
-            ns: "translation",
-          })}`}
-        </span>
-        <Crawler />
-      </div>
-      <FeedItems />
-    </div>
-  );
-};
diff --git a/frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/BrainKnowledgeStep/hooks/useBrainCreationHandler.ts b/frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/BrainKnowledgeStep/hooks/useBrainCreationHandler.ts
deleted file mode 100644
index bb75bc272..000000000
--- a/frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/BrainKnowledgeStep/hooks/useBrainCreationHandler.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import { useFormContext } from "react-hook-form";
-import { useTranslation } from "react-i18next";
-
-import { CreateBrainProps } from "@/lib/components/AddBrainModal/types";
-import { useToast } from "@/lib/hooks";
-
-import { useBrainCreationApi } from "./useBrainCreationApi";
-
-type UseBrainCreationHandler = {
-  closeBrainCreationModal: () => void;
-};
-
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-export const useBrainCreationHandler = ({
-  closeBrainCreationModal,
-}: UseBrainCreationHandler) => {
-  const { getValues } = useFormContext<CreateBrainProps>();
-  const { publish } = useToast();
-  const { t } = useTranslation(["brain", "config"]);
-
-  const { isBrainCreationPending, createBrain } = useBrainCreationApi({
-    closeBrainCreationModal,
-  });
-
-  const handleCreateBrain = () => {
-    const { name, description } = getValues();
-
-    if (name.trim() === "" || isBrainCreationPending) {
-      publish({
-        variant: "danger",
-        text: t("nameRequired", { ns: "config" }),
-      });
-
-      return;
-    }
-
-    if (description.trim() === "") {
-      publish({
-        variant: "danger",
-        text: t("descriptionRequired", { ns: "config" }),
-      });
-
-      return;
-    }
-    createBrain();
-  };
-
-  return {
-    handleCreateBrain,
-    isBrainCreationPending,
-  };
-};
diff --git a/frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/BrainKnowledgeStep/hooks/useBrainKnowledgeStep.ts b/frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/BrainKnowledgeStep/hooks/useBrainKnowledgeStep.ts
deleted file mode 100644
index be2418cde..000000000
--- a/frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/BrainKnowledgeStep/hooks/useBrainKnowledgeStep.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { useFormContext } from "react-hook-form";
-
-import { CreateBrainProps } from "@/lib/components/AddBrainModal/types";
-
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-export const useBrainKnowledgeStep = () => {
-  const { watch } = useFormContext<CreateBrainProps>();
-  const brainType = watch("brain_type");
-  const url = watch("brain_definition.url");
-  const compositeBrainConnections = watch("connected_brains_ids") ?? [];
-  const isApiBrain = brainType === "api";
-  const isCompositeBrain = brainType === "composite";
-
-  const isApiBrainDefinitionsFilled = url !== "";
-
-  const isSubmitButtonDisabled =
-    (isCompositeBrain && compositeBrainConnections.length === 0) ||
-    (isApiBrain && !isApiBrainDefinitionsFilled);
-
-  return {
-    brainType,
-    isSubmitButtonDisabled,
-  };
-};
diff --git a/frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/BrainParamsStep/BrainParamsStep.tsx b/frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/BrainParamsStep/BrainParamsStep.tsx
deleted file mode 100644
index 601dd9fb9..000000000
--- a/frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/BrainParamsStep/BrainParamsStep.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import { Fragment } from "react";
-import { useTranslation } from "react-i18next";
-import { FaArrowLeft, FaArrowRight } from "react-icons/fa";
-
-import Button from "@/lib/components/ui/Button";
-import Field from "@/lib/components/ui/Field";
-import { TextArea } from "@/lib/components/ui/TextArea";
-
-import { PublicAccessConfirmationModal } from "./components/PublicAccessConfirmationModal";
-import { useBrainParamsStep } from "./hooks/useBrainParamsStep";
-import { usePublicAccessConfirmationModal } from "./hooks/usePublicAccessConfirmationModal";
-
-import { useBrainCreationSteps } from "../../hooks/useBrainCreationSteps";
-import { useBrainTypeSelectionStep } from "../BrainTypeSelectionStep/hooks/useBrainTypeSelectionStep";
-
-type BrainParamsStepProps = {
-  onCancelBrainCreation: () => void;
-};
-
-export const BrainParamsStep = ({
-  onCancelBrainCreation,
-}: BrainParamsStepProps): JSX.Element => {
-  const { goToNextStep, goToPreviousStep, currentStep } =
-    useBrainCreationSteps();
-  const { register } = useBrainTypeSelectionStep();
-  const { t } = useTranslation(["translation", "brain", "config"]);
-  const { isNextButtonDisabled } = useBrainParamsStep();
-  const {
-    isPublicAccessConfirmationModalOpened,
-    onCancelPublicAccess,
-    onConfirmPublicAccess,
-  } = usePublicAccessConfirmationModal();
-
-  if (currentStep !== "BRAIN_PARAMS") {
-    return <Fragment />;
-  }
-
-  return (
-    <>
-      <Field
-        label={t("brainName", { ns: "brain" })}
-        autoFocus
-        placeholder={t("brainNamePlaceholder", { ns: "brain" })}
-        autoComplete="off"
-        className="flex-1"
-        required
-        {...register("name")}
-      />
-      <TextArea
-        label={t("brainDescription", { ns: "brain" })}
-        placeholder={t("brainDescriptionPlaceholder", { ns: "brain" })}
-        autoComplete="off"
-        className="flex-1 m-3"
-        required
-        {...register("description")}
-      />
-      <div className="flex flex-row justify-between items-center flex-1 mt-10 w-full">
-        <Button
-          type="button"
-          variant="tertiary"
-          onClick={onCancelBrainCreation}
-          className="text-primary"
-        >
-          {t("cancel", { ns: "translation" })}
-        </Button>
-        <div className="flex gap-4">
-          <Button
-            type="button"
-            variant="secondary"
-            onClick={goToPreviousStep}
-            className="py-2 border-primary text-primary"
-          >
-            <FaArrowLeft className="text-xl" size={16} />
-            {t("previous", { ns: "translation" })}
-          </Button>
-
-          <Button
-            className="bg-primary text-white py-2 border-none"
-            type="button"
-            onClick={goToNextStep}
-            disabled={isNextButtonDisabled}
-          >
-            {t("next", { ns: "translation" })}
-            <FaArrowRight className="text-xl" size={16} />
-          </Button>
-        </div>
-      </div>
-      <PublicAccessConfirmationModal
-        opened={isPublicAccessConfirmationModalOpened}
-        onClose={onCancelPublicAccess}
-        onCancel={onCancelPublicAccess}
-        onConfirm={onConfirmPublicAccess}
-      />
-    </>
-  );
-};
diff --git a/frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/BrainParamsStep/components/PublicAccessConfirmationModal.tsx b/frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/BrainParamsStep/components/PublicAccessConfirmationModal.tsx
deleted file mode 100644
index fd9d931ec..000000000
--- a/frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/BrainParamsStep/components/PublicAccessConfirmationModal.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { useTranslation } from "react-i18next";
-
-import Button from "@/lib/components/ui/Button";
-import { Modal } from "@/lib/components/ui/Modal/Modal";
-
-type PublicAccessConfirmationModalProps = {
-  opened: boolean;
-  onClose: () => void;
-  onConfirm: () => void;
-  onCancel: () => void;
-};
-export const PublicAccessConfirmationModal = ({
-  opened,
-  onClose,
-  onConfirm,
-  onCancel,
-}: PublicAccessConfirmationModalProps): JSX.Element => {
-  const { t } = useTranslation(["brain"]);
-
-  return (
-    <Modal isOpen={opened} setOpen={onClose} CloseTrigger={<div />}>
-      <div
-        dangerouslySetInnerHTML={{
-          __html: t("set_brain_status_to_public_modal_title"),
-        }}
-      />
-      <div
-        dangerouslySetInnerHTML={{
-          __html: t("set_brain_status_to_public_modal_description"),
-        }}
-      />
-      <div className="flex flex-row justify-between pt-10 px-10 items-center">
-        <Button type="button" onClick={onConfirm} variant="secondary">
-          {t("confirm_set_brain_status_to_public")}
-        </Button>
-        <Button type="button" onClick={onCancel}>
-          {t("cancel_set_brain_status_to_public")}
-        </Button>
-      </div>
-    </Modal>
-  );
-};
diff --git a/frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/BrainParamsStep/hooks/useBrainParamsStep.ts b/frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/BrainParamsStep/hooks/useBrainParamsStep.ts
deleted file mode 100644
index b5de53a34..000000000
--- a/frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/BrainParamsStep/hooks/useBrainParamsStep.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { useFormContext } from "react-hook-form";
-
-import { CreateBrainProps } from "@/lib/components/AddBrainModal/types";
-
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-export const useBrainParamsStep = () => {
-  const { watch } = useFormContext<CreateBrainProps>();
-  const brainName = watch("name");
-  const description = watch("description");
-
-  const isNextButtonDisabled = brainName === "" || description === "";
-
-  return {
-    isNextButtonDisabled,
-  };
-};
diff --git a/frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/BrainParamsStep/hooks/useBrainStatusOptions.ts b/frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/BrainParamsStep/hooks/useBrainStatusOptions.ts
deleted file mode 100644
index a79478d3e..000000000
--- a/frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/BrainParamsStep/hooks/useBrainStatusOptions.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { useTranslation } from "react-i18next";
-
-import { BrainStatus } from "@/lib/types/BrainConfig";
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-export const useBrainStatusOptions = () => {
-  const { t } = useTranslation(["translation", "brain", "config"]);
-
-  const brainStatusOptions: {
-    label: string;
-    value: BrainStatus;
-  }[] = [
-    {
-      label: t("private_brain_label", { ns: "brain" }),
-      value: "private",
-    },
-    {
-      label: t("public_brain_label", { ns: "brain" }),
-      value: "public",
-    },
-  ];
-
-  return {
-    brainStatusOptions,
-  };
-};
diff --git a/frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/BrainParamsStep/hooks/usePublicAccessConfirmationModal.ts b/frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/BrainParamsStep/hooks/usePublicAccessConfirmationModal.ts
deleted file mode 100644
index d3ce93f17..000000000
--- a/frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/BrainParamsStep/hooks/usePublicAccessConfirmationModal.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { useEffect, useState } from "react";
-import { useFormContext } from "react-hook-form";
-
-import { CreateBrainProps } from "@/lib/components/AddBrainModal/types";
-
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-export const usePublicAccessConfirmationModal = () => {
-  const {
-    watch,
-    setValue,
-    formState: { dirtyFields },
-  } = useFormContext<CreateBrainProps>();
-
-  const [
-    isPublicAccessConfirmationModalOpened,
-    setIsPublicAccessConfirmationModalOpened,
-  ] = useState(false);
-
-  const status = watch("status");
-
-  useEffect(() => {
-    if (status === "public" && dirtyFields.status === true) {
-      setIsPublicAccessConfirmationModalOpened(true);
-    }
-  }, [dirtyFields.status, status]);
-
-  const onConfirmPublicAccess = () => {
-    setIsPublicAccessConfirmationModalOpened(false);
-  };
-
-  const onCancelPublicAccess = () => {
-    setValue("status", "private", {
-      shouldDirty: true,
-    });
-    setIsPublicAccessConfirmationModalOpened(false);
-  };
-
-  return {
-    isPublicAccessConfirmationModalOpened,
-    onConfirmPublicAccess,
-    onCancelPublicAccess,
-  };
-};
diff --git a/frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/BrainTypeSelectionStep/BrainTypeSelectionStep.tsx b/frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/BrainTypeSelectionStep/BrainTypeSelectionStep.tsx
deleted file mode 100644
index dd261d27e..000000000
--- a/frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/BrainTypeSelectionStep/BrainTypeSelectionStep.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { Fragment } from "react";
-import { useTranslation } from "react-i18next";
-import { FaArrowRight } from "react-icons/fa";
-
-import Button from "@/lib/components/ui/Button";
-import { Radio } from "@/lib/components/ui/Radio";
-
-import { useBrainTypeSelectionStep } from "./hooks/useBrainTypeSelectionStep";
-import { useKnowledgeSourceLabel } from "./hooks/useKnowledgeSourceLabel";
-
-import { useBrainCreationSteps } from "../../hooks/useBrainCreationSteps";
-
-type BrainTypeSelectionStepProps = {
-  onCancelBrainCreation: () => void;
-};
-
-export const BrainTypeSelectionStep = ({
-  onCancelBrainCreation,
-}: BrainTypeSelectionStepProps): JSX.Element => {
-  const { knowledgeSourceOptions } = useKnowledgeSourceLabel();
-  const { register } = useBrainTypeSelectionStep();
-  const { goToNextStep, currentStep } = useBrainCreationSteps();
-  const { t } = useTranslation(["translation"]);
-  if (currentStep !== "BRAIN_TYPE") {
-    return <Fragment />;
-  }
-
-  return (
-    <>
-      <Radio
-        items={knowledgeSourceOptions}
-        className="flex-1 justify-between"
-        {...register("brain_type")}
-      />
-      <div className="flex flex-row flex-1 justify-center w-full gap-48 mt-10">
-        <Button
-          type="button"
-          variant="tertiary"
-          onClick={onCancelBrainCreation}
-        >
-          {t("cancel")}
-        </Button>
-
-        <Button
-          className="bg-primary text-white py-2 border-none"
-          type="button"
-          data-testid="create-brain-submit-button"
-          onClick={goToNextStep}
-        >
-          {t("next")}
-          <FaArrowRight className="text-xl" size={16} />
-        </Button>
-      </div>
-    </>
-  );
-};
diff --git a/frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/BrainTypeSelectionStep/hooks/useBrainTypeSelectionStep.ts b/frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/BrainTypeSelectionStep/hooks/useBrainTypeSelectionStep.ts
deleted file mode 100644
index ef31ea772..000000000
--- a/frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/BrainTypeSelectionStep/hooks/useBrainTypeSelectionStep.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { useEffect } from "react";
-import { useFormContext } from "react-hook-form";
-
-import { CreateBrainProps } from "@/lib/components/AddBrainModal/types";
-
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-export const useBrainTypeSelectionStep = () => {
-  const { register, watch, reset, setValue } =
-    useFormContext<CreateBrainProps>();
-  const brainType = watch("brain_type");
-
-  useEffect(() => {
-    const currentBrainType = brainType;
-    reset();
-    setValue("brain_type", currentBrainType);
-  }, [brainType, reset, setValue]);
-
-  return {
-    register,
-  };
-};
diff --git a/frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/BrainTypeSelectionStep/hooks/useKnowledgeSourceLabel.ts b/frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/BrainTypeSelectionStep/hooks/useKnowledgeSourceLabel.ts
deleted file mode 100644
index 0d5e8f05f..000000000
--- a/frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/BrainTypeSelectionStep/hooks/useKnowledgeSourceLabel.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { useFeatureIsOn } from "@growthbook/growthbook-react";
-import { useTranslation } from "react-i18next";
-
-import { BrainType } from "@/lib/types/BrainConfig";
-
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-export const useKnowledgeSourceLabel = () => {
-  const { t } = useTranslation(["translation", "brain", "config"]);
-  const isCompositeBrainActivated = useFeatureIsOn("agent-brain");
-
-  const knowledgeSourceOptions: {
-    label: string;
-    value: BrainType;
-  }[] = [
-    {
-      label: t("knowledge_source_doc", { ns: "brain" }),
-      value: "doc",
-    },
-    {
-      label: t("knowledge_source_api", { ns: "brain" }),
-      value: "api",
-    },
-  ];
-
-  if (isCompositeBrainActivated) {
-    knowledgeSourceOptions.push({
-      label: t("knowledge_source_composite_brain", { ns: "brain" }),
-      value: "composite",
-    });
-  }
-
-  return {
-    knowledgeSourceOptions,
-  };
-};
diff --git a/frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/Stepper/Stepper.tsx b/frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/Stepper/Stepper.tsx
deleted file mode 100644
index 021cb63ed..000000000
--- a/frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/Stepper/Stepper.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { Fragment } from "react";
-
-import { cn } from "@/lib/utils";
-
-import { Step } from "./components/Step";
-
-import { useBrainCreationSteps } from "../../hooks/useBrainCreationSteps";
-
-export const Stepper = (): JSX.Element => {
-  const { currentStep, steps } = useBrainCreationSteps();
-
-  return (
-    <div className="flex flex-row justify-between w-full px-12 mb-12">
-      {steps.map((step, index) => (
-        <Fragment key={step.value}>
-          <Step index={index} step={step} />
-          {index < steps.length - 1 && ( // Add horizontal line for all but the last step
-            <hr
-              className={cn(
-                "flex-grow border-t-2 border-primary m-4",
-                step.value === currentStep
-                  ? "border-primary"
-                  : "border-gray-300"
-              )}
-            />
-          )}
-        </Fragment>
-      ))}
-    </div>
-  );
-};
diff --git a/frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/Stepper/components/Step.tsx b/frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/Stepper/components/Step.tsx
deleted file mode 100644
index 051c781dd..000000000
--- a/frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/Stepper/components/Step.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { FaCheckCircle } from "react-icons/fa";
-
-import { cn } from "@/lib/utils";
-
-import { useBrainCreationSteps } from "../../../hooks/useBrainCreationSteps";
-import { Step as StepType } from "../../../types";
-
-type StepProps = {
-  index: number;
-  step: StepType;
-};
-
-export const Step = ({ index, step }: StepProps): JSX.Element => {
-  const { currentStep, currentStepIndex } = useBrainCreationSteps();
-  const isStepDone = index < currentStepIndex;
-  const stepContent = isStepDone ? <FaCheckCircle /> : index + 1;
-
-  return (
-    <div
-      key={step.label}
-      className="flex flex-row justify-center items-center flex-1"
-    >
-      <div className="flex flex-col justify-center items-center">
-        <div
-          className={cn(
-            "h-[40px] w-[40px] border-solid rounded-full flex flex-row items-center justify-center mb-2 border-primary border-2 text-primary",
-            isStepDone ? "bg-primary text-white" : "",
-            step.value === currentStep ? "bg-primary text-white" : ""
-          )}
-        >
-          {stepContent}
-        </div>
-        <span key={step.label} className="text-xs text-center">
-          {step.label}
-        </span>
-      </div>
-    </div>
-  );
-};
diff --git a/frontend/lib/components/AddBrainModal/components/AddBrainSteps/index.ts b/frontend/lib/components/AddBrainModal/components/AddBrainSteps/index.ts
deleted file mode 100644
index b7f09eade..000000000
--- a/frontend/lib/components/AddBrainModal/components/AddBrainSteps/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./AddBrainSteps";
diff --git a/frontend/lib/components/AddBrainModal/components/AddBrainSteps/types.ts b/frontend/lib/components/AddBrainModal/components/AddBrainSteps/types.ts
deleted file mode 100644
index 90b5d2992..000000000
--- a/frontend/lib/components/AddBrainModal/components/AddBrainSteps/types.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { BrainCreationStep } from "../../types";
-
-export type Step = {
-  label: string;
-  value: BrainCreationStep;
-};
diff --git a/frontend/lib/components/AddBrainModal/components/BrainKnowledgeStep/BrainKnowledgeStep.module.scss b/frontend/lib/components/AddBrainModal/components/BrainKnowledgeStep/BrainKnowledgeStep.module.scss
new file mode 100644
index 000000000..dcf30ea03
--- /dev/null
+++ b/frontend/lib/components/AddBrainModal/components/BrainKnowledgeStep/BrainKnowledgeStep.module.scss
@@ -0,0 +1,19 @@
+@use "@/styles/Spacings.module.scss";
+@use "@/styles/Typography.module.scss";
+
+.brain_knowledge_wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding-inline: Spacings.$spacing08;
+  height: 100%;
+
+  .title {
+    @include Typography.H2;
+  }
+
+  .buttons_wrapper {
+    display: flex;
+    justify-content: space-between;
+  }
+}
diff --git a/frontend/lib/components/AddBrainModal/components/BrainKnowledgeStep/BrainKnowledgeStep.tsx b/frontend/lib/components/AddBrainModal/components/BrainKnowledgeStep/BrainKnowledgeStep.tsx
new file mode 100644
index 000000000..81c4e01e7
--- /dev/null
+++ b/frontend/lib/components/AddBrainModal/components/BrainKnowledgeStep/BrainKnowledgeStep.tsx
@@ -0,0 +1,51 @@
+import { KnowledgeToFeed } from "@/app/chat/[chatId]/components/ActionsBar/components";
+import QuivrButton from "@/lib/components/ui/QuivrButton/QuivrButton";
+
+import styles from "./BrainKnowledgeStep.module.scss";
+import { useBrainCreationApi } from "./hooks/useBrainCreationApi";
+
+import { useBrainCreationContext } from "../../brainCreation-provider";
+import { useBrainCreationSteps } from "../../hooks/useBrainCreationSteps";
+
+export const BrainKnowledgeStep = (): JSX.Element => {
+  const { currentStepIndex, goToPreviousStep } = useBrainCreationSteps();
+  const { createBrain } = useBrainCreationApi();
+  const { creating, setCreating } = useBrainCreationContext();
+
+  const previous = (): void => {
+    goToPreviousStep();
+  };
+
+  const feed = (): void => {
+    setCreating(true);
+    createBrain();
+  };
+
+  if (currentStepIndex !== 2) {
+    return <></>;
+  }
+
+  return (
+    <div className={styles.brain_knowledge_wrapper}>
+      <div>
+        <span className={styles.title}>Feed your brain</span>
+        <KnowledgeToFeed hideBrainSelector={true} />
+      </div>
+      <div className={styles.buttons_wrapper}>
+        <QuivrButton
+          label="Previous step"
+          color="primary"
+          iconName="chevronLeft"
+          onClick={previous}
+        />
+        <QuivrButton
+          label="Create brain"
+          color="primary"
+          iconName="add"
+          onClick={feed}
+          isLoading={creating}
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/BrainKnowledgeStep/components/CompositeBrainConnections/Components/ConnectableBrain/ConnectableBrain.tsx b/frontend/lib/components/AddBrainModal/components/BrainKnowledgeStep/components/CompositeBrainConnections/Components/ConnectableBrain/ConnectableBrain.tsx
similarity index 100%
rename from frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/BrainKnowledgeStep/components/CompositeBrainConnections/Components/ConnectableBrain/ConnectableBrain.tsx
rename to frontend/lib/components/AddBrainModal/components/BrainKnowledgeStep/components/CompositeBrainConnections/Components/ConnectableBrain/ConnectableBrain.tsx
diff --git a/frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/BrainKnowledgeStep/components/CompositeBrainConnections/Components/ConnectableBrain/hooks/useConnectableBrain.ts b/frontend/lib/components/AddBrainModal/components/BrainKnowledgeStep/components/CompositeBrainConnections/Components/ConnectableBrain/hooks/useConnectableBrain.ts
similarity index 98%
rename from frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/BrainKnowledgeStep/components/CompositeBrainConnections/Components/ConnectableBrain/hooks/useConnectableBrain.ts
rename to frontend/lib/components/AddBrainModal/components/BrainKnowledgeStep/components/CompositeBrainConnections/Components/ConnectableBrain/hooks/useConnectableBrain.ts
index 17ea322e1..9127038f1 100644
--- a/frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/BrainKnowledgeStep/components/CompositeBrainConnections/Components/ConnectableBrain/hooks/useConnectableBrain.ts
+++ b/frontend/lib/components/AddBrainModal/components/BrainKnowledgeStep/components/CompositeBrainConnections/Components/ConnectableBrain/hooks/useConnectableBrain.ts
@@ -2,7 +2,7 @@ import { CheckedState } from "@radix-ui/react-checkbox";
 import { UUID } from "crypto";
 import { useFormContext } from "react-hook-form";
 
-import { CreateBrainProps } from "@/lib/components/AddBrainModal/types";
+import { CreateBrainProps } from "@/lib/components/AddBrainModal/types/types";
 
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export const useConnectableBrain = () => {
diff --git a/frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/BrainKnowledgeStep/components/CompositeBrainConnections/CompositeBrainConnections.tsx b/frontend/lib/components/AddBrainModal/components/BrainKnowledgeStep/components/CompositeBrainConnections/CompositeBrainConnections.tsx
similarity index 100%
rename from frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/BrainKnowledgeStep/components/CompositeBrainConnections/CompositeBrainConnections.tsx
rename to frontend/lib/components/AddBrainModal/components/BrainKnowledgeStep/components/CompositeBrainConnections/CompositeBrainConnections.tsx
diff --git a/frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/BrainKnowledgeStep/hooks/useBrainCreationApi.ts b/frontend/lib/components/AddBrainModal/components/BrainKnowledgeStep/hooks/useBrainCreationApi.ts
similarity index 88%
rename from frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/BrainKnowledgeStep/hooks/useBrainCreationApi.ts
rename to frontend/lib/components/AddBrainModal/components/BrainKnowledgeStep/hooks/useBrainCreationApi.ts
index 1b3c9b891..9cd9ad127 100644
--- a/frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/BrainKnowledgeStep/hooks/useBrainCreationApi.ts
+++ b/frontend/lib/components/AddBrainModal/components/BrainKnowledgeStep/hooks/useBrainCreationApi.ts
@@ -4,22 +4,17 @@ import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 
 import { PUBLIC_BRAINS_KEY } from "@/lib/api/brain/config";
-import { useBrainApi } from "@/lib/api/brain/useBrainApi";
-import { CreateBrainProps } from "@/lib/components/AddBrainModal/types";
+import { CreateBrainProps } from "@/lib/components/AddBrainModal/types/types";
 import { useKnowledgeToFeedInput } from "@/lib/components/KnowledgeToFeedInput/hooks/useKnowledgeToFeedInput.ts";
 import { useBrainContext } from "@/lib/context/BrainProvider/hooks/useBrainContext";
 import { useKnowledgeToFeedContext } from "@/lib/context/KnowledgeToFeedProvider/hooks/useKnowledgeToFeedContext";
 import { useToast } from "@/lib/hooks";
 import { useKnowledgeToFeedFilesAndUrls } from "@/lib/hooks/useKnowledgeToFeed";
 
-type UseBrainCreationHandler = {
-  closeBrainCreationModal: () => void;
-};
+import { useBrainCreationContext } from "../../../brainCreation-provider";
 
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-export const useBrainCreationApi = ({
-  closeBrainCreationModal,
-}: UseBrainCreationHandler) => {
+export const useBrainCreationApi = () => {
   const queryClient = useQueryClient();
   const { publish } = useToast();
   const { t } = useTranslation(["brain", "config"]);
@@ -27,8 +22,9 @@ export const useBrainCreationApi = ({
   const { getValues, reset } = useFormContext<CreateBrainProps>();
   const { setKnowledgeToFeed } = useKnowledgeToFeedContext();
   const { createBrain: createBrainApi, setCurrentBrainId } = useBrainContext();
-  const { setAsDefaultBrain } = useBrainApi();
   const { crawlWebsiteHandler, uploadFileHandler } = useKnowledgeToFeedInput();
+  const { setIsBrainCreationModalOpened, setCreating } =
+    useBrainCreationContext();
 
   const handleFeedBrain = async (brainId: UUID): Promise<void> => {
     const uploadPromises = files.map((file) =>
@@ -44,7 +40,6 @@ export const useBrainCreationApi = ({
     const {
       name,
       description,
-      setDefault,
       brain_definition,
       brain_secrets_values,
       status,
@@ -76,12 +71,11 @@ export const useBrainCreationApi = ({
       void handleFeedBrain(createdBrainId);
     }
 
-    if (setDefault) {
-      await setAsDefaultBrain(createdBrainId);
-    }
     setCurrentBrainId(createdBrainId);
-    closeBrainCreationModal();
+    setIsBrainCreationModalOpened(false);
+    setCreating(false);
     reset();
+
     void queryClient.invalidateQueries({
       queryKey: [PUBLIC_BRAINS_KEY],
     });
diff --git a/frontend/lib/components/AddBrainModal/components/BrainMainInfosStep/BrainMainInfosStep.module.scss b/frontend/lib/components/AddBrainModal/components/BrainMainInfosStep/BrainMainInfosStep.module.scss
new file mode 100644
index 000000000..6e5a18bb8
--- /dev/null
+++ b/frontend/lib/components/AddBrainModal/components/BrainMainInfosStep/BrainMainInfosStep.module.scss
@@ -0,0 +1,25 @@
+@use "@/styles/Spacings.module.scss";
+@use "@/styles/Typography.module.scss";
+
+.brain_main_infos_wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+  padding-inline: Spacings.$spacing08;
+
+  .title {
+    @include Typography.H2;
+  }
+
+  .inputs_wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: Spacings.$spacing05;
+  }
+
+  .buttons_wrapper {
+    display: flex;
+    justify-content: space-between;
+  }
+}
diff --git a/frontend/lib/components/AddBrainModal/components/BrainMainInfosStep/BrainMainInfosStep.tsx b/frontend/lib/components/AddBrainModal/components/BrainMainInfosStep/BrainMainInfosStep.tsx
new file mode 100644
index 000000000..3b94cc30e
--- /dev/null
+++ b/frontend/lib/components/AddBrainModal/components/BrainMainInfosStep/BrainMainInfosStep.tsx
@@ -0,0 +1,76 @@
+import { Controller, useFormContext } from "react-hook-form";
+
+import { CreateBrainProps } from "@/lib/components/AddBrainModal/types/types";
+import QuivrButton from "@/lib/components/ui/QuivrButton/QuivrButton";
+import { TextAreaInput } from "@/lib/components/ui/TextAreaInput/TextAreaInput";
+import { TextInput } from "@/lib/components/ui/TextInput/TextInput";
+
+import styles from "./BrainMainInfosStep.module.scss";
+
+import { useBrainCreationSteps } from "../../hooks/useBrainCreationSteps";
+
+export const BrainMainInfosStep = (): JSX.Element => {
+  const { currentStepIndex, goToNextStep, goToPreviousStep } =
+    useBrainCreationSteps();
+
+  const { watch } = useFormContext<CreateBrainProps>();
+  const name = watch("name");
+  const description = watch("description");
+
+  const isDisabled = !name || !description;
+
+  const next = (): void => {
+    goToNextStep();
+  };
+
+  const previous = (): void => {
+    goToPreviousStep();
+  };
+
+  if (currentStepIndex !== 1) {
+    return <></>;
+  }
+
+  return (
+    <div className={styles.brain_main_infos_wrapper}>
+      <div className={styles.inputs_wrapper}>
+        <span className={styles.title}>Define brain identity</span>
+        <Controller
+          name="name"
+          render={({ field }) => (
+            <TextInput
+              label="Name"
+              inputValue={field.value as string} // Explicitly specify the type as string
+              setInputValue={field.onChange}
+            />
+          )}
+        />
+        <Controller
+          name="description"
+          render={({ field }) => (
+            <TextAreaInput
+              label="Description"
+              inputValue={field.value as string}
+              setInputValue={field.onChange}
+            />
+          )}
+        />
+      </div>
+      <div className={styles.buttons_wrapper}>
+        <QuivrButton
+          color="primary"
+          label="Previous Step"
+          onClick={() => previous()}
+          iconName="chevronLeft"
+        />
+        <QuivrButton
+          color="primary"
+          label="Next Step"
+          onClick={() => next()}
+          iconName="chevronRight"
+          disabled={isDisabled}
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/frontend/lib/components/AddBrainModal/components/BrainTypeSelectionStep/BrainTypeSelection/BrainTypeSelection.module.scss b/frontend/lib/components/AddBrainModal/components/BrainTypeSelectionStep/BrainTypeSelection/BrainTypeSelection.module.scss
new file mode 100644
index 000000000..f9bd8143d
--- /dev/null
+++ b/frontend/lib/components/AddBrainModal/components/BrainTypeSelectionStep/BrainTypeSelection/BrainTypeSelection.module.scss
@@ -0,0 +1,47 @@
+@use "@/styles/Colors.module.scss";
+@use "@/styles/Radius.module.scss";
+@use "@/styles/Spacings.module.scss";
+@use "@/styles/Typography.module.scss";
+
+.brain_type_wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: Spacings.$spacing05;
+  padding: Spacings.$spacing05;
+  border-radius: Radius.$big;
+  cursor: pointer;
+  border: 2px solid transparent;
+
+  &.disabled {
+    pointer-events: none;
+    background-color: Colors.$lightest-grey;
+    opacity: 0.6;
+  }
+
+  .first_line_wrapper {
+    display: flex;
+    gap: Spacings.$spacing03;
+    align-items: center;
+
+    .name {
+      @include Typography.H3;
+    }
+  }
+
+  .description {
+    color: Colors.$dark-grey;
+  }
+
+  &:hover,
+  &.selected {
+    border-color: Colors.$primary;
+
+    .name {
+      color: Colors.$primary;
+    }
+
+    .description {
+      color: Colors.$black;
+    }
+  }
+}
diff --git a/frontend/lib/components/AddBrainModal/components/BrainTypeSelectionStep/BrainTypeSelection/BrainTypeSelection.tsx b/frontend/lib/components/AddBrainModal/components/BrainTypeSelectionStep/BrainTypeSelection/BrainTypeSelection.tsx
new file mode 100644
index 000000000..2a85d8dfa
--- /dev/null
+++ b/frontend/lib/components/AddBrainModal/components/BrainTypeSelectionStep/BrainTypeSelection/BrainTypeSelection.tsx
@@ -0,0 +1,41 @@
+import { useState } from "react";
+
+import { BrainType } from "@/lib/components/AddBrainModal/types/types";
+import Icon from "@/lib/components/ui/Icon/Icon";
+
+import styles from "./BrainTypeSelection.module.scss";
+
+export const BrainTypeSelection = ({
+  brainType,
+  onClick,
+  selected,
+}: {
+  brainType: BrainType;
+  onClick: () => void;
+  selected: boolean;
+}): JSX.Element => {
+  const [isHovered, setIsHovered] = useState<boolean>(false);
+
+  return (
+    <div
+      className={`
+      ${styles.brain_type_wrapper} 
+      ${brainType.disabled && styles.disabled}
+      ${selected && styles.selected}
+      `}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      onClick={onClick}
+    >
+      <div className={styles.first_line_wrapper}>
+        <Icon
+          name={brainType.iconName}
+          size="normal"
+          color={isHovered || selected ? "primary" : "black"}
+        />
+        <span className={styles.name}>{brainType.name}</span>
+      </div>
+      <span className={styles.description}>{brainType.description}</span>
+    </div>
+  );
+};
diff --git a/frontend/lib/components/AddBrainModal/components/BrainTypeSelectionStep/BrainTypeSelectionStep.module.scss b/frontend/lib/components/AddBrainModal/components/BrainTypeSelectionStep/BrainTypeSelectionStep.module.scss
new file mode 100644
index 000000000..90cc0bdf1
--- /dev/null
+++ b/frontend/lib/components/AddBrainModal/components/BrainTypeSelectionStep/BrainTypeSelectionStep.module.scss
@@ -0,0 +1,31 @@
+@use "@/styles/ScreenSizes.module.scss";
+@use "@/styles/Spacings.module.scss";
+@use "@/styles/Typography.module.scss";
+
+.brain_types_wrapper {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  width: 100%;
+  padding-inline: Spacings.$spacing08;
+  height: 100%;
+  gap: Spacings.$spacing05;
+
+  @media (max-width: ScreenSizes.$small) {
+    padding-inline: 0;
+  }
+
+  .main_wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: Spacings.$spacing05;
+
+    .title {
+      @include Typography.H2;
+    }
+  }
+
+  .button {
+    align-self: flex-end;
+  }
+}
diff --git a/frontend/lib/components/AddBrainModal/components/BrainTypeSelectionStep/BrainTypeSelectionStep.tsx b/frontend/lib/components/AddBrainModal/components/BrainTypeSelectionStep/BrainTypeSelectionStep.tsx
new file mode 100644
index 000000000..114d8dbde
--- /dev/null
+++ b/frontend/lib/components/AddBrainModal/components/BrainTypeSelectionStep/BrainTypeSelectionStep.tsx
@@ -0,0 +1,69 @@
+import { useState } from "react";
+
+import { BrainType } from "@/lib/components/AddBrainModal/types/types";
+import QuivrButton from "@/lib/components/ui/QuivrButton/QuivrButton";
+
+import { BrainTypeSelection } from "./BrainTypeSelection/BrainTypeSelection";
+import styles from "./BrainTypeSelectionStep.module.scss";
+
+import { useBrainCreationSteps } from "../../hooks/useBrainCreationSteps";
+
+export const BrainTypeSelectionStep = (): JSX.Element => {
+  const [selectedIndex, setSelectedIndex] = useState<number>(0);
+  const { goToNextStep, currentStepIndex } = useBrainCreationSteps();
+
+  const brainTypes: BrainType[] = [
+    {
+      name: "Core Brain",
+      description: "Upload documents or website links to feed your brain.",
+      iconName: "feed",
+    },
+    {
+      name: "Sync Brain - Coming soon!",
+      description:
+        "Connect to your tools and applications to interact with your data.",
+      iconName: "software",
+      disabled: true,
+    },
+    {
+      name: "Custom Brain - Coming soon!",
+      description:
+        "Explore your databases, converse with your APIs, and much more!",
+      iconName: "custom",
+      disabled: true,
+    },
+  ];
+
+  const next = (): void => {
+    goToNextStep();
+  };
+
+  if (currentStepIndex !== 0) {
+    return <></>;
+  }
+
+  return (
+    <div className={styles.brain_types_wrapper}>
+      <div className={styles.main_wrapper}>
+        <span className={styles.title}>Choose a type of brain</span>
+        {brainTypes.map((brainType, index) => (
+          <div key={index}>
+            <BrainTypeSelection
+              brainType={brainType}
+              selected={index === selectedIndex}
+              onClick={() => setSelectedIndex(index)}
+            />
+          </div>
+        ))}
+      </div>
+      <div className={styles.button}>
+        <QuivrButton
+          label="Next Step"
+          iconName="chevronRight"
+          color="primary"
+          onClick={() => next()}
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/frontend/lib/components/AddBrainModal/components/Stepper/Stepper.module.scss b/frontend/lib/components/AddBrainModal/components/Stepper/Stepper.module.scss
new file mode 100644
index 000000000..370e01e8a
--- /dev/null
+++ b/frontend/lib/components/AddBrainModal/components/Stepper/Stepper.module.scss
@@ -0,0 +1,105 @@
+@use "@/styles/Colors.module.scss";
+@use "@/styles/Radius.module.scss";
+@use "@/styles/Spacings.module.scss";
+@use "@/styles/Typography.module.scss";
+
+.stepper_wrapper {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+
+  .step {
+    display: flex;
+    flex-direction: column;
+    border-radius: Radius.$circle;
+    position: relative;
+
+    .circle {
+      width: 2.5rem;
+      height: 2.5rem;
+      background-color: Colors.$primary;
+      border-radius: Radius.$circle;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      .inside_circle {
+        width: 100%;
+        height: 100%;
+        border-radius: Radius.$circle;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+
+    &.done_step {
+      .circle {
+        background-color: Colors.$success;
+      }
+
+      .step_info {
+        .step_status {
+          color: Colors.$success;
+        }
+      }
+    }
+
+    &.current_step {
+      .circle {
+        background-color: Colors.$white;
+        border: 1px solid Colors.$primary;
+      }
+
+      .inside_circle {
+        background-color: Colors.$primary;
+        width: 70%;
+        height: 70%;
+      }
+
+      .step_info {
+        .step_status {
+          color: Colors.$primary;
+        }
+      }
+    }
+
+    &.pending_step {
+      .circle {
+        background-color: Colors.$primary-light;
+      }
+
+      .step_info {
+        .step_status {
+          color: Colors.$normal-grey;
+        }
+      }
+    }
+
+    .step_info {
+      margin-top: Spacings.$spacing03;
+      display: flex;
+      flex-direction: column;
+      font-size: Typography.$tiny;
+      width: 2.5rem;
+
+      .step_index {
+        white-space: nowrap;
+        color: Colors.$normal-grey;
+      }
+    }
+  }
+
+  .bar {
+    flex-grow: 1;
+    height: 4px;
+    border-radius: Radius.$big;
+    background-color: Colors.$primary-light;
+    margin: 0 8px;
+    margin-top: Spacings.$spacing05;
+
+    &.done {
+      background-color: Colors.$success;
+    }
+  }
+}
diff --git a/frontend/lib/components/AddBrainModal/components/Stepper/Stepper.tsx b/frontend/lib/components/AddBrainModal/components/Stepper/Stepper.tsx
new file mode 100644
index 000000000..62e616768
--- /dev/null
+++ b/frontend/lib/components/AddBrainModal/components/Stepper/Stepper.tsx
@@ -0,0 +1,58 @@
+import { Icon } from "@/lib/components/ui/Icon/Icon";
+
+import styles from "./Stepper.module.scss";
+
+import { useBrainCreationSteps } from "../../hooks/useBrainCreationSteps";
+
+export const Stepper = (): JSX.Element => {
+  const { currentStep, steps } = useBrainCreationSteps();
+
+  const currentStepIndex = steps.findIndex(
+    (step) => step.value === currentStep
+  );
+
+  return (
+    <div className={styles.stepper_wrapper}>
+      {steps.map((step, index) => (
+        <>
+          <div
+            className={`${styles.step} ${
+              index === currentStepIndex
+                ? styles.current_step
+                : index < currentStepIndex
+                ? styles.done_step
+                : styles.pending_step
+            }`}
+            key={step.value}
+          >
+            <div className={styles.circle}>
+              <div className={styles.inside_circle}>
+                {index < currentStepIndex && (
+                  <Icon name="check" size="normal" color="white" />
+                )}
+              </div>
+            </div>
+            <div className={styles.step_info}>
+              <span className={styles.step_index}>STEP {index + 1}</span>
+              <span className={styles.step_status}>
+                {index === currentStepIndex
+                  ? "Progress"
+                  : index < currentStepIndex
+                  ? "Completed"
+                  : "Pending"}
+              </span>
+            </div>
+          </div>
+          {index < steps.length - 1 && (
+            <div
+              className={`
+              ${styles.bar} 
+              ${index < currentStepIndex ? styles.done : ""}
+              `}
+            ></div>
+          )}
+        </>
+      ))}
+    </div>
+  );
+};
diff --git a/frontend/lib/components/AddBrainModal/components/index.ts b/frontend/lib/components/AddBrainModal/components/index.ts
deleted file mode 100644
index b7f09eade..000000000
--- a/frontend/lib/components/AddBrainModal/components/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./AddBrainSteps";
diff --git a/frontend/lib/components/AddBrainModal/components/AddBrainSteps/hooks/useBrainCreationSteps.ts b/frontend/lib/components/AddBrainModal/hooks/useBrainCreationSteps.ts
similarity index 92%
rename from frontend/lib/components/AddBrainModal/components/AddBrainSteps/hooks/useBrainCreationSteps.ts
rename to frontend/lib/components/AddBrainModal/hooks/useBrainCreationSteps.ts
index 29074fa78..a2b179b01 100644
--- a/frontend/lib/components/AddBrainModal/components/AddBrainSteps/hooks/useBrainCreationSteps.ts
+++ b/frontend/lib/components/AddBrainModal/hooks/useBrainCreationSteps.ts
@@ -1,9 +1,10 @@
 import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 
-import { CreateBrainProps } from "@/lib/components/AddBrainModal/types";
-
-import { Step } from "../types";
+import {
+  CreateBrainProps,
+  Step,
+} from "@/lib/components/AddBrainModal/types/types";
 
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export const useBrainCreationSteps = () => {
diff --git a/frontend/lib/components/AddBrainModal/types.ts b/frontend/lib/components/AddBrainModal/types/types.ts
similarity index 54%
rename from frontend/lib/components/AddBrainModal/types.ts
rename to frontend/lib/components/AddBrainModal/types/types.ts
index fd5cd020a..6838c8bb9 100644
--- a/frontend/lib/components/AddBrainModal/types.ts
+++ b/frontend/lib/components/AddBrainModal/types/types.ts
@@ -1,4 +1,5 @@
 import { CreateBrainInput } from "@/lib/api/brain/types";
+import { iconList } from "@/lib/helpers/iconList";
 
 const brainCreationSteps = ["BRAIN_TYPE", "BRAIN_PARAMS", "KNOWLEDGE"] as const;
 
@@ -8,3 +9,16 @@ export type CreateBrainProps = CreateBrainInput & {
   setDefault: boolean;
   brainCreationStep: BrainCreationStep;
 };
+
+export interface BrainType {
+  name: string;
+  description: string;
+  iconName: keyof typeof iconList;
+  disabled?: boolean;
+  onClick?: () => void;
+}
+
+export type Step = {
+  label: string;
+  value: BrainCreationStep;
+};
diff --git a/frontend/lib/components/ApiRequestDefinition/components/ParamsDefinition/hooks/useParamsDefinitionDefaultValues.ts b/frontend/lib/components/ApiRequestDefinition/components/ParamsDefinition/hooks/useParamsDefinitionDefaultValues.ts
index 01ccd8cc5..92df35374 100644
--- a/frontend/lib/components/ApiRequestDefinition/components/ParamsDefinition/hooks/useParamsDefinitionDefaultValues.ts
+++ b/frontend/lib/components/ApiRequestDefinition/components/ParamsDefinition/hooks/useParamsDefinitionDefaultValues.ts
@@ -1,6 +1,6 @@
 import { useFormContext } from "react-hook-form";
 
-import { CreateBrainProps } from "@/lib/components/AddBrainModal/types";
+import { CreateBrainProps } from "@/lib/components/AddBrainModal/types/types";
 
 import { defaultParamDefinitionRow } from "../config";
 import { mapApiBrainDefinitionSchemaToParameterDefinition } from "../utils/mapApiBrainDefinitionSchemaToParameterDefinition";
diff --git a/frontend/lib/components/ApiRequestDefinition/components/SecretsDefinition/hooks/useSecretsDefinitionDefaultValues.ts b/frontend/lib/components/ApiRequestDefinition/components/SecretsDefinition/hooks/useSecretsDefinitionDefaultValues.ts
index 7de914b19..bc9e18cae 100644
--- a/frontend/lib/components/ApiRequestDefinition/components/SecretsDefinition/hooks/useSecretsDefinitionDefaultValues.ts
+++ b/frontend/lib/components/ApiRequestDefinition/components/SecretsDefinition/hooks/useSecretsDefinitionDefaultValues.ts
@@ -1,6 +1,6 @@
 import { useFormContext } from "react-hook-form";
 
-import { CreateBrainProps } from "@/lib/components/AddBrainModal/types";
+import { CreateBrainProps } from "@/lib/components/AddBrainModal/types/types";
 
 import {
   brainSecretsValueKeyInForm,
diff --git a/frontend/lib/components/ui/Modal/Modal.module.scss b/frontend/lib/components/ui/Modal/Modal.module.scss
index 0b042a100..84e482d3e 100644
--- a/frontend/lib/components/ui/Modal/Modal.module.scss
+++ b/frontend/lib/components/ui/Modal/Modal.module.scss
@@ -26,7 +26,7 @@
     overflow: scroll;
 
     &.big_modal {
-      width: 50vw;
+      width: 40vw;
       height: 90vh;
     }
 
diff --git a/frontend/lib/components/ui/TextAreaInput/TextAreaInput.module.scss b/frontend/lib/components/ui/TextAreaInput/TextAreaInput.module.scss
new file mode 100644
index 000000000..ac36d0df4
--- /dev/null
+++ b/frontend/lib/components/ui/TextAreaInput/TextAreaInput.module.scss
@@ -0,0 +1,35 @@
+@use "@/styles/Colors.module.scss";
+@use "@/styles/Radius.module.scss";
+@use "@/styles/Spacings.module.scss";
+
+.text_area_input_container {
+  display: flex;
+  border: 1px solid Colors.$lighter-grey;
+  gap: Spacings.$spacing03;
+  padding-block: Spacings.$spacing02;
+  padding-inline: Spacings.$spacing03;
+  border-radius: Radius.$big;
+  align-items: center;
+  width: 100%;
+
+  &.simple {
+    border: none;
+    padding: 0;
+
+    .text_input {
+      background-color: transparent;
+      width: 10px;
+    }
+  }
+
+  .text_area_input {
+    caret-color: Colors.$accent;
+    border: none;
+    flex: 1;
+    resize: none;
+
+    &:focus {
+      box-shadow: none;
+    }
+  }
+}
diff --git a/frontend/lib/components/ui/TextAreaInput/TextAreaInput.tsx b/frontend/lib/components/ui/TextAreaInput/TextAreaInput.tsx
new file mode 100644
index 000000000..563e37096
--- /dev/null
+++ b/frontend/lib/components/ui/TextAreaInput/TextAreaInput.tsx
@@ -0,0 +1,32 @@
+import styles from "./TextAreaInput.module.scss";
+
+type TextAreaInputProps = {
+  label: string;
+  inputValue: string;
+  setInputValue: (value: string) => void;
+  onSubmit?: () => void;
+};
+
+export const TextAreaInput = ({
+  label,
+  inputValue,
+  setInputValue,
+  onSubmit,
+}: TextAreaInputProps): JSX.Element => {
+  return (
+    <div className={styles.text_area_input_container}>
+      <textarea
+        className={styles.text_area_input}
+        value={inputValue}
+        rows={5}
+        onChange={(e) => setInputValue(e.target.value)}
+        placeholder={label}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" && onSubmit) {
+            onSubmit();
+          }
+        }}
+      />
+    </div>
+  );
+};
diff --git a/frontend/lib/helpers/iconList.ts b/frontend/lib/helpers/iconList.ts
index 58d3ee90b..aa03b4632 100644
--- a/frontend/lib/helpers/iconList.ts
+++ b/frontend/lib/helpers/iconList.ts
@@ -1,5 +1,6 @@
 import { AiOutlineLoading3Quarters } from "react-icons/ai";
 import { BsArrowRightShort, BsChatLeftText } from "react-icons/bs";
+import { CgSoftwareDownload } from "react-icons/cg";
 import { CiFlag1 } from "react-icons/ci";
 import {
   FaCheck,
@@ -21,6 +22,7 @@ import {
   LuBrain,
   LuBrainCircuit,
   LuChevronDown,
+  LuChevronLeft,
   LuChevronRight,
   LuCopy,
   LuFile,
@@ -29,7 +31,9 @@ import {
 } from "react-icons/lu";
 import {
   MdAlternateEmail,
+  MdDashboardCustomize,
   MdDeleteOutline,
+  MdDynamicFeed,
   MdHistory,
   MdOutlineModeEditOutline,
   MdUploadFile,
@@ -47,12 +51,15 @@ export const iconList: { [name: string]: IconType } = {
   check: FaCheck,
   checkCircle: FaCheckCircle,
   chevronDown: LuChevronDown,
+  chevronLeft: LuChevronLeft,
   chevronRight: LuChevronRight,
   close: IoMdClose,
   copy: LuCopy,
+  custom: MdDashboardCustomize,
   delete: MdDeleteOutline,
   edit: MdOutlineModeEditOutline,
   email: MdAlternateEmail,
+  feed: MdDynamicFeed,
   file: LuFile,
   flag: CiFlag1,
   followUp: IoArrowUpCircleOutline,
@@ -66,6 +73,7 @@ export const iconList: { [name: string]: IconType } = {
   redirection: BsArrowRightShort,
   search: LuSearch,
   settings: IoSettingsSharp,
+  software: CgSoftwareDownload,
   star: FaRegStar,
   unlock: FaUnlock,
   upload: FiUpload,
diff --git a/frontend/lib/hooks/useDropzone.ts b/frontend/lib/hooks/useDropzone.ts
index 23582d995..b0f59db87 100644
--- a/frontend/lib/hooks/useDropzone.ts
+++ b/frontend/lib/hooks/useDropzone.ts
@@ -8,7 +8,7 @@ import { useOnboarding } from "./useOnboarding";
 import { useOnboardingTracker } from "./useOnboardingTracker";
 import { useToast } from "./useToast";
 
-import { useBrainCreationContext } from "../components/AddBrainModal/components/AddBrainSteps/brainCreation-provider";
+import { useBrainCreationContext } from "../components/AddBrainModal/brainCreation-provider";
 import { useKnowledgeToFeedContext } from "../context/KnowledgeToFeedProvider/hooks/useKnowledgeToFeedContext";
 import { acceptedFormats } from "../helpers/acceptedFormats";
 import { cloneFileWithSanitizedName } from "../helpers/cloneFileWithSanitizedName";
diff --git a/frontend/styles/_Colors.module.scss b/frontend/styles/_Colors.module.scss
index b84e38d56..4ad917c60 100644
--- a/frontend/styles/_Colors.module.scss
+++ b/frontend/styles/_Colors.module.scss
@@ -30,3 +30,6 @@ $gold: #b8860b;
 // ERROR
 $dangerous-dark: #e30c17;
 $dangerous: #9b373c;
+
+// SUCCESS
+$success: #47a455;
diff --git a/frontend/styles/_Radius.module.scss b/frontend/styles/_Radius.module.scss
index 5155967ab..02019e524 100644
--- a/frontend/styles/_Radius.module.scss
+++ b/frontend/styles/_Radius.module.scss
@@ -1,3 +1,4 @@
+$circle: 50%;
 $big: 12px;
 $normal: 5px;
 $small: 2px;
diff --git a/frontend/styles/_Typography.module.scss b/frontend/styles/_Typography.module.scss
index eda7bcd9f..c5483fa1f 100644
--- a/frontend/styles/_Typography.module.scss
+++ b/frontend/styles/_Typography.module.scss
@@ -24,6 +24,7 @@
   text-overflow: ellipsis;
 }
 
+$tiny: 12px;
 $small: 14px;
 $medium: 16px;
 $large: 18px;