diff --git a/.env.custom b/.env.custom
new file mode 100644
index 0000000..594ee18
--- /dev/null
+++ b/.env.custom
@@ -0,0 +1,3 @@
+NX_BASE_PLATZI_STORE_SERVICE_URL=https://api.escuelajs.co/api/v1
+NX_ACCESS_TOKEN_KEY=accessToken
+NX_REFRESH_TOKEN_KEY=refreshToken
\ No newline at end of file
diff --git a/.env.development b/.env.development
new file mode 100644
index 0000000..594ee18
--- /dev/null
+++ b/.env.development
@@ -0,0 +1,3 @@
+NX_BASE_PLATZI_STORE_SERVICE_URL=https://api.escuelajs.co/api/v1
+NX_ACCESS_TOKEN_KEY=accessToken
+NX_REFRESH_TOKEN_KEY=refreshToken
\ No newline at end of file
diff --git a/.env.production b/.env.production
new file mode 100644
index 0000000..594ee18
--- /dev/null
+++ b/.env.production
@@ -0,0 +1,3 @@
+NX_BASE_PLATZI_STORE_SERVICE_URL=https://api.escuelajs.co/api/v1
+NX_ACCESS_TOKEN_KEY=accessToken
+NX_REFRESH_TOKEN_KEY=refreshToken
\ No newline at end of file
diff --git a/SHADCN_UI_SETUP.md b/SHADCN_UI_SETUP.md
index d0ed7e6..3924136 100644
--- a/SHADCN_UI_SETUP.md
+++ b/SHADCN_UI_SETUP.md
@@ -1,13 +1,12 @@
-# Shared UI Setup For Micro Frontend Application (Module Federation with React) with Nx Workspace
+# Shared Data-Layer Setup For Micro Frontend Application with Nx Workspace
 
-This tutorial will guide you through setting up a shared `UI library` for a `Micro Frontend Application` using Nx Workspace, React, and Tailwind CSS. We will use `Shadcn UI` for the UI components.
+This tutorial will guide
 
 ## Link for Final Implementation
 
 The final implementation of the tutorial can be found in the following repository commits:
 
-- [Add UI package with Shadcn components and use them on apps](https://github.com/serifcolakel/mfe-tutorial/commit/5704168095b2c83b8b51823ed585a1cdf3210dbc)
-- [Add UI package with Button component and update dependencies](https://github.com/serifcolakel/mfe-tutorial/commit/cafa9a12f9c95a9a1536ff4e11c2a2008a3d89a5)
+-
 
 > Live Demo: [Micro Frontend Application with Nx Workspace](https://relaxed-mochi-7581fa.netlify.app/)
 
@@ -29,34 +28,37 @@ Before we begin, make sure you have the following things set up:
 
 ## Table of Contents
 
-- [Create UI Library](#create-ui-library)
-- [Add Tailwind CSS Setup](#add-tailwind-css-setup)
-- [Shadcn UI Setup](#shadcn-ui-setup)
-  - [Add Button Component](#add-button-component)
-  - [Add Shadcn UI Hover Card](#add-shadcn-ui-hover-card)
-  - [Add Shadcn UI Badge](#add-shadcn-ui-badge)
-- [Conclusion](#conclusion)
+- [Create React Library](#create-react-library)
 
-## Create UI Library
+## Create React Library
 
-First, we need to create a UI library using the Nx Workspace. We will use the `@nx/react:library` generator to create the UI library.
+First, we need to create a React library using the Nx Workspace. We will use the `@nx/react:library` generator to create the React library.
 
 > With Script
 
 ```bash
-pnpm exec nx generate @nx/react:library --name=ui --bundler=vite --directory=packages/ui --projectNameAndRootFormat=as-provided --no-interactive
+pnpm exec nx generate @nx/react:library --name=data --bundler=vite --directory=apps/data --projectNameAndRootFormat=as-provided --no-interactive --dry-run
 ```
 
+The Scripts are explained below:
+
+- **--name** : The name of the library. In this case, we are naming it `data`.
+- **--bundler** : The bundler to use for the library. In this case, we are using `vite`.
+- **--directory** : The directory where the library will be created. In this case, we are creating it in the `apps/data` directory.
+- **--projectNameAndRootFormat** : The format to use for the project name and root. In this case, we are using `as-provided`.
+- **--no-interactive** : Disable interactive prompts.
+- **--dry-run** : Show what will be generated without actually generating it.
+
 > With Nx Console
 
 ![Nx Console](https://i.hizliresim.com/przb27y.png)
 
-## Add Tailwind CSS Setup
+## Add Services For Data Layer
 
-Next, we need to add the Tailwind CSS setup to the UI library. We will use the `@nx/react:setup-tailwind` generator to add the Tailwind CSS setup.
+Next, we need to add the services for the data layer in the `data` library. We will create a `data` service that fetches data from an API.
 
 ```bash
-pnpm exec nx generate @nx/react:setup-tailwind --project=ui --no-interactive
+pnpm add axios
 ```
 
 - **Configure Tailwind Config** : Update the `packages/ui/tailwind.config.js` file with the following content:
diff --git a/SHARED_DATA_SERVICE_LAYER_SETUP.md b/SHARED_DATA_SERVICE_LAYER_SETUP.md
new file mode 100644
index 0000000..b4b1c59
--- /dev/null
+++ b/SHARED_DATA_SERVICE_LAYER_SETUP.md
@@ -0,0 +1,1742 @@
+# Shared Data-Layer Setup For Micro Frontend Application with Nx Workspace
+
+This tutorial will guide you through setting up a shared `data-layer` for a `Micro Frontend Application` using Nx Workspace, React, and Axios. We will create a shared `data-layer` in the Nx Workspace that will be used by all the projects in the workspace. The shared `data-layer` will contain the service layer for fetching data from the API using Axios.
+
+## Link for Final Implementation
+
+The final implementation of the tutorial can be found in the following repository commits:
+
+- [All Commits](https://github.com/serifcolakel/mfe-tutorial/pull/1/commits/83898b17ccbe6a72644a4989999d6d28d872075d)
+- [Pull Request Link](https://github.com/serifcolakel/mfe-tutorial/pull/1)
+
+> Live Demo: [Micro Frontend Application with Nx Workspace](https://relaxed-mochi-7581fa.netlify.app/)
+
+## Prerequisites
+
+Before we begin, make sure you have the following things set up:
+
+- [Base Repository](https://javascript.plainenglish.io/creating-nx-workspace-with-eslint-prettier-and-husky-configuration-b5f4d2fcb914) for creating Nx Workspace with ESLint, Prettier, and Husky Configuration.
+- [Building a Micro Frontend Architecture with Nx Workspace](https://medium.com/javascript-in-plain-english/building-a-micro-frontend-architecture-with-nx-workspace-c0fd9b6bf322) for creating a micro frontend architecture using Nx Workspace.
+- [Shared Tailwind Setup For Micro Frontend Application with Nx Workspace](https://medium.com/javascript-in-plain-english/shared-tailwind-setup-for-micro-frontend-application-with-nx-workspace-0c02a3ca097d)
+- [Shared UI Components For Micro Frontend Application with Nx Workspace](https://dev.to/serifcolakel/shared-ui-setup-for-micro-frontend-application-module-federation-with-react-with-nx-workspace-1p7c)
+- [Nx Workspace](https://nx.dev/nx-api/react): Nx is a set of extensible dev tools for monorepos, which helps you develop like Google, Facebook, and Microsoft.
+- [Nx Console](https://nx.dev/recipes/nx-console#nx-console): Nx Console is a Visual Studio Code extension that provides a UI for the Nx CLI.
+- [React](https://reactjs.org/): A JavaScript library for building user interfaces.
+- [Tailwind CSS](https://tailwindcss.com/): A utility-first CSS framework for rapidly building custom designs.
+- [ESLint](https://eslint.org/): A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript.
+- [Prettier](https://prettier.io/): An opinionated code formatter that enforces a consistent code style.
+- [Netlify](https://www.netlify.com/): A platform that provides continuous deployment, serverless functions, and more.
+- [Shadcn UI](https://ui.shadcn.com/docs): Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
+
+## Table of Contents
+
+- [Create React Library](#create-react-library)
+- [Add Environment Configuration For All Project With](#add-environment-configuration-for-all-project-with)
+- [Create Service API Layer with Axios](#create-service-api-layer-with-axios)
+- [Create Platzi Store Service](#create-platzi-store-service)
+- [Usage of Platzi Store Service](#usage-of-platzi-store-service)
+- [Create Product Page with Custom Hooks](#create-product-page-with-custom-hooks)
+
+## Create React Library
+
+First, we need to create a React library using the Nx Workspace. We will use the `@nx/react:library` generator to create the React library.
+
+> With Script
+
+```bash
+pnpm exec nx generate @nx/react:library --name=data --bundler=vite --directory=apps/data --projectNameAndRootFormat=as-provided --no-interactive --dry-run
+```
+
+The Scripts are explained below:
+
+- **--name** : The name of the library. In this case, we are naming it `data`.
+- **--bundler** : The bundler to use for the library. In this case, we are using `vite`.
+- **--directory** : The directory where the library will be created. In this case, we are creating it in the `apps/data` directory.
+- **--projectNameAndRootFormat** : The format to use for the project name and root. In this case, we are using `as-provided`.
+- **--no-interactive** : Disable interactive prompts.
+- **--dry-run** : Show what will be generated without actually generating it.
+
+> With Nx Console
+
+![Nx Console](https://i.hizliresim.com/msgusy5.png)
+
+> After creating the library, we can fix the all `eslint` and `prettier` issues in the `data` library.
+
+## Add Environment Configuration For All Project With
+
+https://nx.dev/recipes/react/use-environment-variables-in-react#using-environment-variables-in-react-applications
+https://nx.dev/recipes/tips-n-tricks/define-environment-variables
+Next, we need to add the environment configuration for all projects in the Nx Workspace. We will create following environment files in the root directory of the Nx Workspace:
+
+- `.env.development` : Development environment configuration.
+- `.env.production` : Production environment configuration.
+- `.env.custom` : Custom environment configuration for dynamic configuration example.
+
+You can follow the steps below to add the environment configuration:
+
+- **Create Environment Files** : Create the following environment files in the root directory of the Nx Workspace:
+
+```bash
+touch .env.development .env.production .env.custom
+```
+
+- **Add Environment Variables** : Add the environment variables to the environment files. You can define different variables for each environment.
+
+```bash
+# .env.development
+NX_BASE_PLATZI_STORE_SERVICE_URL=https://api.escuelajs.co/api/v1
+NX_ACCESS_TOKEN_KEY=accessToken
+NX_REFRESH_TOKEN_KEY=refreshToken
+```
+
+```bash
+# .env.production
+NX_BASE_PLATZI_STORE_SERVICE_URL=https://api.escuelajs.co/api/v1
+NX_ACCESS_TOKEN_KEY=accessToken
+NX_REFRESH_TOKEN_KEY=refreshToken
+```
+
+```bash
+# .env.custom
+NX_BASE_PLATZI_STORE_SERVICE_URL=https://api.escuelajs.co/api/v1
+NX_ACCESS_TOKEN_KEY=accessToken
+NX_REFRESH_TOKEN_KEY=refreshToken
+```
+
+By default, Nx will load any environment variables [Reference](https://nx.dev/recipes/tips-n-tricks/define-environment-variables).
+
+By assigning distinct names to both configuration and mode, you can eliminate any potential conflicts that may arise during environment variable loading. Additionally, consider defining custom configurations in your Nx workspace, each with a corresponding mode option [Reference](https://nx.dev/recipes/react/use-environment-variables-in-react#using-environment-variables-in-react-applications).For example, you can create configurations like `development`, `production`, and `custom`, each with its respective mode set, like this:
+
+```json
+// nx.json
+"configurations": {
+  "development": {
+    // ...rest of the configuration
+    "mode": "development"
+  },
+  "production": {
+    // ...rest of the configuration
+    "mode": "production"
+  },
+  "custom": {
+    // ...rest of the configuration
+    "mode": "custom"
+  }
+}
+```
+
+Then we can update the application to use the environment variables based on the configuration and mode. We can use the `process.env` object to access the environment variables in the application.
+
+```json
+// apps/container/project.json
+{
+  "name": "container",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "apps/container/src",
+  "projectType": "application",
+  "targets": {
+    "build": {
+      // ...rest of the configuration
+      "configurations": {
+        // ...rest of the configuration
+        "custom": {
+          "optimization": true,
+          "outputHashing": "all",
+          "sourceMap": false,
+          "namedChunks": false,
+          "extractLicenses": true,
+          "vendorChunk": false,
+          "webpackConfig": "apps/container/webpack.config.prod.ts" // Or You can create custom webpack config for custom "apps/container/webpack.config.custom.ts"
+        }
+      }
+    },
+    "serve": {
+      // ...rest of the configuration
+      "configurations": {
+        "development": {
+          "buildTarget": "container:build:development"
+        },
+        "production": {
+          "buildTarget": "container:build:production",
+          "hmr": false
+        },
+        "custom": {
+          "buildTarget": "container:build:custom",
+          "hmr": false
+        }
+      }
+    },
+    // ...rest of the configuration
+    "serve-static": {
+      // ...rest of the configuration
+      "configurations": {
+        "development": {
+          "buildTarget": "container:build:development"
+        },
+        "production": {
+          "buildTarget": "container:build:production"
+        },
+        "custom": {
+          "buildTarget": "container:build:custom"
+        }
+      }
+    }
+    // ...rest of the configuration
+  },
+  "tags": []
+}
+```
+
+Same approach applied to the `info` repository.
+
+```json
+{
+  "name": "info",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "apps/info/src",
+  "projectType": "application",
+  "targets": {
+    "build": {
+      // ...rest of the configuration
+      "configurations": {
+        // ...rest of the configuration
+        "custom": {
+          "optimization": true,
+          "outputHashing": "all",
+          "sourceMap": false,
+          "namedChunks": false,
+          "extractLicenses": true,
+          "vendorChunk": false,
+          "webpackConfig": "apps/info/webpack.config.prod.ts" // Or You can create custom webpack config for custom "apps/info/webpack.config.custom.ts"
+        }
+      }
+    },
+    "serve": {
+      // ...rest of the configuration
+      "configurations": {
+        "development": {
+          "buildTarget": "info:build:development"
+        },
+        "production": {
+          "buildTarget": "info:build:production",
+          "hmr": false
+        },
+        "custom": {
+          "buildTarget": "info:build:custom",
+          "hmr": false
+        }
+      }
+    },
+    // ...rest of the configuration
+    "serve-static": {
+      // ...rest of the configuration
+      "configurations": {
+        "development": {
+          "buildTarget": "info:build:development"
+        },
+        "production": {
+          "buildTarget": "info:build:production"
+        },
+        "custom": {
+          "buildTarget": "info:build:custom"
+        }
+      }
+    }
+    // ...rest of the configuration
+  },
+  "tags": []
+}
+```
+
+Last step we can access the `type-safe` and validate the environment variables in the `data` library. We can use `zod` for the validation.
+
+```ts
+// apps/data/src/common/enviroment.ts
+import { z } from 'zod';
+
+import { getEnvParams } from '../helpers/environment.helpers';
+
+/**
+ * @description The environment schema for the container app.
+ */
+const envSchema = z.object({
+  // INFO (serif) : NX_* Custom Environment variables
+  NX_BASE_PLATZI_STORE_SERVICE_URL: z.string(),
+  NX_ACCESS_TOKEN_KEY: z.string(),
+  NX_REFRESH_TOKEN_KEY: z.string(),
+
+  // INFO (serif) : NX_* Base environment variables
+  NX_CLI_SET: z.string(),
+  NX_LOAD_DOT_ENV_FILES: z.string(),
+  NX_WORKSPACE_ROOT: z.string(),
+  NX_TERMINAL_OUTPUT_PATH: z.string(),
+  NX_STREAM_OUTPUT: z.string(),
+  NX_TASK_TARGET_PROJECT: z.string(),
+  NX_TASK_TARGET_TARGET: z.string(),
+  NX_TASK_TARGET_CONFIGURATION: z.string(),
+  NX_TASK_HASH: z.string(),
+});
+
+function initEnvironment() {
+  const [errors, env] = getEnvParams(
+    process.env as Record<string, string>,
+    envSchema
+  );
+
+  if (errors) {
+    window.console.error(errors);
+
+    throw new Error('Environment variables are not valid');
+  }
+
+  return env as z.infer<typeof envSchema>;
+}
+
+export { initEnvironment };
+```
+
+- **Create Environment Helpers** : Create the `environment.helpers.ts` file in the `apps/data/src/helpers` directory with the following content:
+
+```ts
+/* eslint-disable no-restricted-syntax */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { z } from 'zod';
+
+/**
+ * @description Gets the parameters from the environment variables.
+ * @param {Record<string, string>} env The environment variables.
+ * @param {z.ZodObject<any, any>} schema The schema.
+ * @returns The errors and the data.
+ */
+export function getEnvParams(
+  env: Record<string, string>,
+  schema: z.ZodObject<any, any>
+): [Record<string, string> | null, z.infer<typeof schema> | null] {
+  const data: Record<string, unknown> = {};
+  const errors: Record<string, string> = {};
+
+  for (const key in schema.shape) {
+    if (Object.prototype.hasOwnProperty.call(schema.shape, key)) {
+      const value = env[key];
+
+      if (value === undefined) {
+        errors[key] = `ERROR (serif) : Missing required env var: ${key}`;
+      } else {
+        try {
+          data[key] = (schema.shape[key] as z.ZodTypeAny)?.parse(value);
+        } catch (error) {
+          let message = 'INFO (serif) : Invalid env var';
+
+          if (error instanceof z.ZodError) {
+            message = `ERROR (serif) : ${error.errors[0].message}`;
+          } else if (error instanceof Error) {
+            message = `ERROR (serif) : ${error.message}`;
+          }
+
+          errors[key] = message;
+        }
+      }
+    }
+  }
+
+  if (Object.keys(errors).length) {
+    return [errors, null];
+  }
+
+  return [null, data as z.infer<typeof schema>];
+}
+```
+
+- **Export the Environment Variables** : Export the environment variables from the `data` library.
+
+```tsx
+// apps/data/src/index.ts
+export * from './common';
+// ...rest of the code
+```
+
+- **Usage of Environment Variables** : Use the environment variables in the `data` library.
+
+```tsx
+// apps/data/src/common/index.ts
+import { initEnvironment } from './environments';
+
+export const ENV = initEnvironment();
+```
+
+🎉 Congirulations. You can use `ENV` object to all project. Example:
+
+```tsx
+import { ENV } from '@mfe-tutorial/data';
+
+console.log(ENV.NX_BASE_PLATZI_STORE_SERVICE_URL);
+```
+
+## Create Service API Layer with Axios
+
+Next, we need to create a service layer in the `data` library. The service layer will be responsible for fetching data from the API. We will create a `PlatziStoreService` class that will have methods to fetch data from the Platzi Store API.
+
+- **Install Axios** : Install the `axios` package in the `data` library.
+
+```bash
+pnpm add axios
+```
+
+- **Create Service Apis** : Create the `apis` folder in the `apps/data/src` directory. Then create the `base.api.ts` file in the `apis` folder with the following content:
+
+```ts
+import axios from 'axios';
+
+const api = axios;
+
+api.defaults.headers.post['Content-Type'] = 'application/json';
+api.defaults.headers.Accept = 'application/json';
+api.defaults.withCredentials = false;
+api.defaults.timeout = 1000 * 60 * 2; // Two minutes
+
+export { api };
+```
+
+- **Write Platzi Store Api** : Write the `platzi.store.api.ts` file in the `apis` folder with the following content:
+
+```ts
+import { ENV } from '../common';
+import {
+  errorInterceptor,
+  requestInterceptor,
+  responseInterceptor,
+} from '../lib/api.interceptors';
+import { api } from './base.api';
+
+export const platziStoreApi = api.create({
+  baseURL: ENV.NX_BASE_PLATZI_STORE_SERVICE_URL,
+});
+
+platziStoreApi.interceptors.request.use(requestInterceptor, (error) =>
+  Promise.reject(error)
+);
+
+platziStoreApi.interceptors.response.use(responseInterceptor, errorInterceptor);
+```
+
+- **Write Services/Apis Helpers** : Write the `helpers` folder in the `apps/data/src` directory. Then Write the `service.helpers.ts` file in the `helpers` folder with the following content:
+
+```ts
+import { AxiosError } from 'axios';
+import { ZodError } from 'zod';
+
+import { BaseServiceResponse } from '../types';
+
+/**
+ * @description Handles the error response.
+ * @param {unknown} error - Error
+ * @param {string | undefined} message - Message
+ * @returns {BaseServiceResponse<null>} The service response.
+ * @example
+ * const error = new Error('An error occurred.');
+ * const result = handleErrorResponse(error);
+ * console.log(result); // { data: null, message: 'An error occurred.', success: false }
+ * @example
+ * const error = new AxiosError('An error occurred.');
+ * const result = handleErrorResponse(error);
+ * console.log(result); // { data: null, message: 'An error occurred.', success: false }
+ */
+export const handleErrorResponse = <T>(
+  error: unknown,
+  message: string | undefined = 'Unknown error occurred.'
+): BaseServiceResponse<T> => {
+  let status: number | undefined;
+
+  if (error instanceof Error) {
+    message = error.message;
+    status = 500;
+  }
+
+  if (error instanceof AxiosError) {
+    message = error.message;
+    status = error.response?.status;
+  }
+
+  if (error instanceof ZodError) {
+    const paths = error.errors.map((err) => err.path[1]);
+    const uniquePaths = [...new Set(paths)];
+
+    message = `Error in fields: ${uniquePaths.join(', ')}`;
+
+    status = 400;
+  }
+
+  return {
+    data: null,
+    message,
+    success: false,
+    status,
+  };
+};
+
+/**
+ * @description Formats the message of a service response.
+ * @param {string} message The message to be formatted.
+ * @param {string[]} replacerValues The strings to replace the placeholders in message.
+ * @returns {string} The formatted message.
+ * @example
+ * const message = 'The {0} is {1}!';
+ * const replace = ['answer', '42'];
+ * const result = getServiceResponseMessage(message, replace);
+ * console.log(result); // The answer is 42!
+ */
+export const getServiceResponseMessage = (
+  message: string,
+  replacerValues?: string[]
+): string => {
+  let result = message;
+
+  if (replacerValues) {
+    replacerValues.forEach((item, index) => {
+      result = result.replace(`{${index}}`, item);
+    });
+  }
+
+  return result;
+};
+```
+
+- **Create Interceptors** : Create the `api.interceptors.ts` file in the `lib` folder with the following content:
+
+```ts
+import { AxiosError, AxiosResponse, InternalAxiosRequestConfig } from 'axios';
+
+import { ENV } from '../common';
+import { handleErrorResponse } from '../helpers';
+
+// TODO (serif) : handle request here
+export const requestInterceptor = (config: InternalAxiosRequestConfig) => {
+  const token = localStorage.getItem(ENV.NX_ACCESS_TOKEN_KEY);
+
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`;
+  }
+
+  return config;
+};
+
+// TODO (serif) : handle response here
+export const responseInterceptor = (response: AxiosResponse) => response;
+
+// TODO (serif) : handle error response here
+export const errorInterceptor = async (error: AxiosError) =>
+  Promise.reject(handleErrorResponse(error));
+```
+
+- **Export Apis** : Export the APIs from the `apis/index.ts` file.
+
+```ts
+export { platziStoreApi } from './platzi.store.api';
+
+export { api } from './base.api';
+```
+
+## Create Platzi Store Service
+
+Next, we need to create a `PlatziStoreService` in the `data` library. The `services/platzi` will have methods to fetch data from the Platzi Store API.
+
+- **Create Platzi Store Service Base Methods** : Create the `platzi` file in the `services` folder. Then write the following content in the `services/platzi/methods.ts` file:
+
+```ts
+import { AxiosRequestConfig, AxiosResponse } from 'axios';
+
+import { platziStoreApi } from '../../apis';
+
+/**
+ * @description Sends a GET request to the specified URL of postApi.
+ * @param {string} url The URL to send the request to.
+ * @param {AxiosRequestConfig} config The config specific for this request (merged with this.defaults).
+ * @returns {Promise<AxiosResponse<TResponse>>} A Promise that resolves to a AxiosResponse<TResponse>.
+ */
+async function get<TResponse>(
+  url: string,
+  config?: AxiosRequestConfig
+): Promise<AxiosResponse<TResponse>> {
+  const response = await platziStoreApi.get<TResponse>(url, config);
+
+  return response;
+}
+
+/**
+ * @description Sends a POST request to the specified URL of postApi.
+ * @param {string} url The URL to send the request to.
+ * @param {TRequest} data The data to be sent as the request body.
+ * @param {AxiosRequestConfig} config The config specific for this request (merged with this.defaults).
+ * @returns {Promise<AxiosResponse<TResponse>>} A Promise that resolves to a AxiosResponse<TResponse>.
+ */
+export const post = async <TRequest, TResponse>(
+  url: string,
+  data: TRequest,
+  config?: AxiosRequestConfig
+): Promise<AxiosResponse<TResponse>> => {
+  const response = await platziStoreApi.post<TResponse>(url, data, config);
+
+  return response;
+};
+
+/**
+ * @description Sends a PUT request to the specified URL of postApi.
+ * @param {string} url The URL to send the request to.
+ * @param {TRequest} data The data to be sent as the request body.
+ * @param {AxiosRequestConfig} config The config specific for this request (merged with this.defaults).
+ * @returns {Promise<AxiosResponse<TResponse>>} A Promise that resolves to a AxiosResponse<TResponse>.
+ */
+export const put = async <TRequest, TResponse>(
+  url: string,
+  data: TRequest,
+  config?: AxiosRequestConfig
+): Promise<AxiosResponse<TResponse>> => {
+  const response = await platziStoreApi.put<TResponse>(url, data, config);
+
+  return response;
+};
+
+/**
+ * @description Sends a PATCH request to the specified URL of postApi.
+ * @param {string} url The URL to send the request to.
+ * @param {TRequest} data The data to be sent as the request body.
+ * @param {AxiosRequestConfig} config The config specific for this request (merged with this.defaults).
+ * @returns {Promise<AxiosResponse<TResponse>>} A Promise that resolves to a AxiosResponse<TResponse>.
+ */
+export const patch = async <TRequest, TResponse>(
+  url: string,
+  data: TRequest,
+  config?: AxiosRequestConfig
+): Promise<AxiosResponse<TResponse>> => {
+  const response = await platziStoreApi.patch<TResponse>(url, data, config);
+
+  return response;
+};
+
+/**
+ * @description Sends a DELETE request to the specified URL of postApi.
+ * @param {string} url The URL to send the request to.
+ * @param {AxiosRequestConfig} config The config specific for this request (merged with this.defaults).
+ * @returns {Promise<AxiosResponse<TResponse>>} A Promise that resolves to a AxiosResponse<TResponse>.
+ */
+export const remove = async <TResponse>(
+  url: string,
+  config?: AxiosRequestConfig
+): Promise<AxiosResponse<TResponse>> => {
+  const response = await platziStoreApi.delete<TResponse>(url, config);
+
+  return response;
+};
+
+const platziStoreApiMethods = {
+  get,
+  post,
+  put,
+  patch,
+  remove,
+};
+
+export { platziStoreApiMethods };
+```
+
+This methods, base methods for the `PlatziStoreService`. We can use this methods in the other services.
+
+- **Add Platzi Store Constants** : Add the Platzi Store constants in the `services/platzi/constants.ts` file:
+
+```ts
+/**
+ * @description PRODUCTS paths for the PLATZI STORE API service
+ */
+export const PLATZI_STORE_PRODUCTS_PATHS = {
+  PRODUCT: {
+    GET_ALL: '/products',
+    GET_SINGLE: '/products/:id',
+    CREATE: '/products',
+    UPDATE: '/products/:id',
+    DELETE: '/products/:id',
+  },
+  AUTH: {
+    LOGIN: '/auth/login',
+    PROFILE: '/auth/profile',
+    REFRESH_TOKEN: '/auth/refresh-token',
+  },
+};
+```
+
+This constants, base constants for the `PlatziStoreService`. We can use this constants in the other services.
+
+- **Create Platzi Store Auth Services** : The `services/platzi/auth/` file with the following content:
+
+> - `services/platzi/auth/types.ts` file: The types for the Platzi Store Auth services.
+
+```ts
+import { z } from 'zod';
+
+import {
+  loginRequestSchema,
+  loginResponseSchema,
+  refreshTokenRequestSchema,
+  refreshTokenResponseSchema,
+  userProfileResponseSchema,
+} from './schemas';
+
+export type LoginRequest = z.infer<typeof loginRequestSchema>;
+
+export type LoginResponse = z.infer<typeof loginResponseSchema>;
+
+export type UserProfileResponse = z.infer<typeof userProfileResponseSchema>;
+
+export type RefreshTokenRequest = z.infer<typeof refreshTokenRequestSchema>;
+
+export type RefreshTokenResponse = z.infer<typeof refreshTokenResponseSchema>;
+```
+
+> - `services/platzi/auth/schemas.ts` file: The schemas for the Platzi Store Auth services.
+
+```ts
+import { z } from 'zod';
+
+export const loginRequestSchema = z.object({
+  email: z.string().email('Please enter a valid email'),
+  password: z.string().min(6, 'Password must be at least 6 characters'),
+});
+
+export const loginResponseSchema = z.object({
+  access_token: z.string(),
+  refresh_token: z.string(),
+});
+
+export const userProfileResponseSchema = z.object({
+  id: z.number(),
+  email: z.string(),
+  password: z.string(),
+  name: z.string(),
+  role: z.string(),
+  avatar: z.string(),
+});
+
+export const refreshTokenRequestSchema = z.object({ refreshToken: z.string() });
+
+export const refreshTokenResponseSchema = z.object({
+  access_token: z.string(),
+  refresh_token: z.string(),
+});
+```
+
+> - `services/platzi/auth/index.ts` file: The index file for the Platzi Store Auth services.
+
+```ts
+import { handleErrorResponse } from '../../../helpers';
+import { BaseServiceResponse } from '../../../types';
+import { PLATZI_STORE_PRODUCTS_PATHS } from '../contants';
+import { platziStoreApiMethods as methods } from '../methods';
+import {
+  loginRequestSchema,
+  loginResponseSchema,
+  refreshTokenRequestSchema,
+  refreshTokenResponseSchema,
+  userProfileResponseSchema,
+} from './schemas';
+import {
+  LoginRequest,
+  LoginResponse,
+  RefreshTokenRequest,
+  RefreshTokenResponse,
+  UserProfileResponse,
+} from './types';
+
+/**
+ * @description Logs a user in.
+ * @param {LoginRequest} info The user to log in.
+ * @returns {Promise<BaseServiceResponse<LoginResponse>>} A Promise that resolves to a LoginResponse.
+ */
+export const login = async (
+  info: LoginRequest
+): Promise<BaseServiceResponse<LoginResponse>> => {
+  try {
+    const infos = loginRequestSchema.parse(info);
+
+    const response = await methods.post<LoginRequest, LoginResponse>(
+      PLATZI_STORE_PRODUCTS_PATHS.AUTH.LOGIN,
+      infos
+    );
+
+    const data = loginResponseSchema.parse(response.data);
+
+    return {
+      data,
+      message: response.statusText,
+      success: true,
+    };
+  } catch (e) {
+    return handleErrorResponse(e);
+  }
+};
+
+/**
+ * @description Gets the user profile.
+ * @returns {Promise<BaseServiceResponse<UserProfileResponse>>} A Promise that resolves to a UserProfileResponse.
+ */
+export const getUserProfile = async (): Promise<
+  BaseServiceResponse<UserProfileResponse>
+> => {
+  try {
+    const response = await methods.get<UserProfileResponse>(
+      PLATZI_STORE_PRODUCTS_PATHS.AUTH.PROFILE
+    );
+
+    const data = userProfileResponseSchema.parse(response.data);
+
+    return {
+      data,
+      message: response.statusText,
+      success: true,
+    };
+  } catch (e) {
+    return handleErrorResponse(e);
+  }
+};
+
+/**
+ * @description Refreshes the token.
+ * @param {RefreshTokenRequest} refreshToken The refresh token.
+ * @returns {Promise<BaseServiceResponse<RefreshTokenResponse>>} A Promise that resolves to a RefreshTokenResponse.
+ */
+export const refreshToken = async (
+  token: RefreshTokenRequest
+): Promise<BaseServiceResponse<RefreshTokenResponse>> => {
+  try {
+    const values = refreshTokenRequestSchema.parse(token);
+
+    const response = await methods.post<
+      RefreshTokenRequest,
+      RefreshTokenResponse
+    >(PLATZI_STORE_PRODUCTS_PATHS.AUTH.REFRESH_TOKEN, values);
+
+    const data = refreshTokenResponseSchema.parse(response.data);
+
+    return {
+      data,
+      message: response.statusText,
+      success: true,
+    };
+  } catch (e) {
+    return handleErrorResponse(e);
+  }
+};
+
+export type {
+  LoginRequest,
+  LoginResponse,
+  UserProfileResponse,
+  RefreshTokenRequest,
+  RefreshTokenResponse,
+};
+
+export {
+  loginRequestSchema,
+  loginResponseSchema,
+  refreshTokenRequestSchema,
+  refreshTokenResponseSchema,
+  userProfileResponseSchema,
+};
+```
+
+- **Create Platzi Store Products Services** : The `services/platzi/products/` file with the following content:
+
+> - `services/platzi/products/types.ts` file: The types for the Platzi Store Products services.
+
+```ts
+import { z } from 'zod';
+
+import {
+  createProductRequestSchema,
+  createProductResponseSchema,
+  productSchema,
+  updateProductRequestSchema,
+  updateProductResponseSchema,
+} from './schemas';
+
+export type Product = z.infer<typeof productSchema>;
+
+export type CreateProductRequest = z.infer<typeof createProductRequestSchema>;
+
+export type CreateProductResponse = z.infer<typeof createProductResponseSchema>;
+
+export type UpdateProductRequest = z.infer<typeof updateProductRequestSchema>;
+
+export type UpdateProductResponse = z.infer<typeof updateProductResponseSchema>;
+
+export type DeleteProductResponse = boolean;
+```
+
+> - `services/platzi/products/schemas.ts` file: The schemas for the Platzi Store Products services.
+
+```ts
+import { z } from 'zod';
+
+export const productSchema = z.object({
+  id: z.number(),
+  title: z.string(),
+  price: z.number(),
+  description: z.string(),
+  category: z.object({ id: z.number(), name: z.string(), image: z.string() }),
+  images: z.array(z.string()),
+});
+
+export const allProductsResponseSchema = z.array(productSchema);
+
+export const createProductRequestSchema = z.object({
+  title: z.string(),
+  price: z.number(),
+  description: z.string(),
+  categoryId: z.number(),
+  images: z.array(z.string()),
+});
+
+export const createProductResponseSchema = z.object({
+  title: z.string(),
+  price: z.number(),
+  description: z.string(),
+  images: z.array(z.string()),
+  category: z.object({
+    id: z.number(),
+    name: z.string(),
+    image: z.string(),
+    creationAt: z.string(),
+    updatedAt: z.string(),
+  }),
+  id: z.number(),
+  creationAt: z.string(),
+  updatedAt: z.string(),
+});
+
+export const updateProductRequestSchema = z.object({
+  title: z.string(),
+  price: z.number(),
+});
+
+export const updateProductResponseSchema = z.object({
+  id: z.number(),
+  title: z.string(),
+  price: z.number(),
+  description: z.string(),
+  images: z.array(z.string()),
+  creationAt: z.string(),
+  updatedAt: z.string(),
+  category: z.object({
+    id: z.number(),
+    name: z.string(),
+    image: z.string(),
+    creationAt: z.string(),
+    updatedAt: z.string(),
+  }),
+});
+```
+
+> - `services/platzi/products/index.ts` file: The index file for the Platzi Store Products services.
+
+```ts
+import { handleErrorResponse } from '../../../helpers';
+import { BaseServiceResponse } from '../../../types';
+import { PLATZI_STORE_PRODUCTS_PATHS } from '../contants';
+import { platziStoreApiMethods as methods } from '../methods';
+import {
+  allProductsResponseSchema,
+  createProductRequestSchema,
+  createProductResponseSchema,
+  productSchema,
+  updateProductRequestSchema,
+  updateProductResponseSchema,
+} from './schemas';
+import {
+  CreateProductRequest,
+  CreateProductResponse,
+  Product,
+  UpdateProductRequest,
+  UpdateProductResponse,
+} from './types';
+
+/**
+ * @description Gets all products from the API.
+ * @returns {Promise<BaseServiceResponse<Product[]>>} A Promise that resolves to an array of Post.
+ */
+export const getProducts = async (): Promise<
+  BaseServiceResponse<Product[]>
+> => {
+  try {
+    const response = await methods.get<Product[]>(
+      PLATZI_STORE_PRODUCTS_PATHS.PRODUCT.GET_ALL,
+      {
+        params: {
+          limit: 10,
+          offset: 1,
+        },
+      }
+    );
+
+    const data = allProductsResponseSchema.parse(response.data);
+
+    return {
+      data,
+      message: response.statusText,
+      success: true,
+    };
+  } catch (e) {
+    return handleErrorResponse(e);
+  }
+};
+
+/**
+ * @description Gets a single product from the API.
+ * @param {string} id The product ID.
+ * @returns {Promise<BaseServiceResponse<Product>>} A Promise that resolves to a Product.
+ */
+export const getProduct = async (
+  id: string
+): Promise<BaseServiceResponse<Product>> => {
+  try {
+    const response = await methods.get<Product>(
+      PLATZI_STORE_PRODUCTS_PATHS.PRODUCT.GET_SINGLE.replace(':id', id)
+    );
+
+    const data = productSchema.parse(response.data);
+
+    return {
+      data,
+      message: response.statusText,
+      success: true,
+    };
+  } catch (e) {
+    return handleErrorResponse(e);
+  }
+};
+
+/**
+ * @description Creates a new product.
+ * @param {CreateProductRequest} product The product to create.
+ * @returns {Promise<BaseServiceResponse<CreateProductResponse>>} A Promise that resolves to a Product.
+ */
+export const createProduct = async (
+  product: CreateProductRequest
+): Promise<BaseServiceResponse<CreateProductResponse>> => {
+  try {
+    const values = createProductRequestSchema.parse(product);
+
+    const response = await methods.post<
+      CreateProductRequest,
+      CreateProductResponse
+    >(PLATZI_STORE_PRODUCTS_PATHS.PRODUCT.CREATE, values);
+
+    const data = createProductResponseSchema.parse(response.data);
+
+    return {
+      data,
+      message: response.statusText,
+      success: true,
+    };
+  } catch (e) {
+    return handleErrorResponse(e);
+  }
+};
+
+/**
+ * @description Updates a product.
+ * @param {string} id The product ID.
+ * @param {UpdateProductRequest} product The product to update.
+ * @returns {Promise<BaseServiceResponse<UpdateProductResponse>>} A Promise that resolves to a Product.
+ */
+export const updateProduct = async (
+  id: string,
+  product: UpdateProductRequest
+): Promise<BaseServiceResponse<UpdateProductResponse>> => {
+  try {
+    const values = updateProductRequestSchema.parse(product);
+
+    const response = await methods.put<
+      UpdateProductRequest,
+      UpdateProductResponse
+    >(PLATZI_STORE_PRODUCTS_PATHS.PRODUCT.UPDATE.replace(':id', id), values);
+
+    const data = updateProductResponseSchema.parse(response.data);
+
+    return {
+      data,
+      message: response.statusText,
+      success: true,
+    };
+  } catch (e) {
+    return handleErrorResponse(e);
+  }
+};
+
+/**
+ * @description Deletes a product.
+ * @param {string} id The product ID.
+ * @returns {Promise<BaseServiceResponse<boolean>>} A Promise that resolves to null.
+ */
+export const deleteProduct = async (
+  id: string
+): Promise<BaseServiceResponse<boolean>> => {
+  try {
+    const res = await methods.remove<boolean>(
+      PLATZI_STORE_PRODUCTS_PATHS.PRODUCT.DELETE.replace(':id', id)
+    );
+
+    return {
+      data: res.data,
+      message: 'Product deleted successfully.',
+      success: true,
+    };
+  } catch (e) {
+    return handleErrorResponse(e);
+  }
+};
+
+export type {
+  CreateProductRequest,
+  CreateProductResponse,
+  Product,
+  UpdateProductRequest,
+  UpdateProductResponse,
+};
+
+export {
+  allProductsResponseSchema,
+  createProductRequestSchema,
+  createProductResponseSchema,
+  productSchema,
+  updateProductRequestSchema,
+  updateProductResponseSchema,
+};
+```
+
+- **Export Platzi Store Services** : Export the services from the `services/platzi/index.ts` file.
+
+```ts
+export * from './products';
+export * from './auth';
+export * from './methods';
+export * from './constants';
+```
+
+- **Export Services** : Export the services from the `services/index.ts` file.
+
+```ts
+export * from './platzi';
+```
+
+- **Export Data** : Export the services from the `data` library in the `apps/data/src/index.ts` file.
+
+```ts
+// ...rest of the code
+export * from './services';
+```
+
+## Usage of Platzi Store Service
+
+You can use directly from the service function or you can create custom hook for services with `loading`, `error`, `data` states.
+
+- **Create Custom Hook for Auth Service** : Create the `usePlatziStoreAuth` hook in the `apps/container/src/hooks/use-platzi-store-auth/index.ts` directory with the following content:
+
+```ts
+import { useState } from 'react';
+
+import { ENV } from '../../common';
+import { login, LoginRequest, refreshToken } from '../../services';
+
+export function usePlatziStoreAuth() {
+  const [loading, setLoading] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleLogin = async (info: LoginRequest) => {
+    setLoading(true);
+
+    const response = await login(info);
+
+    const result = {
+      success: false,
+      message: 'Please check your email and password and try again.',
+      title: 'Login Failed',
+    };
+
+    if (response.success && response.data) {
+      localStorage.setItem(ENV.NX_ACCESS_TOKEN_KEY, response.data.access_token);
+      localStorage.setItem(
+        ENV.NX_REFRESH_TOKEN_KEY,
+        response.data.refresh_token
+      );
+
+      result.success = true;
+      result.message = 'You have successfully logged in!';
+      result.title = 'Login Success';
+    } else {
+      setError('Please check your email and password and try again.');
+    }
+
+    setLoading(false);
+
+    return result;
+  };
+
+  const handleRefreshToken = async () => {
+    const token = localStorage.getItem(ENV.NX_REFRESH_TOKEN_KEY);
+
+    if (token) {
+      const response = await refreshToken({ refreshToken: token });
+
+      if (response.success && response.data) {
+        localStorage.setItem(
+          ENV.NX_ACCESS_TOKEN_KEY,
+          response.data.access_token
+        );
+        localStorage.setItem(
+          ENV.NX_REFRESH_TOKEN_KEY,
+          response.data.refresh_token
+        );
+      } else {
+        setError(response.message);
+      }
+    }
+  };
+
+  const onResetError = () => setError(null);
+
+  return {
+    loading,
+    error,
+    handleRefreshToken,
+    handleLogin,
+    onResetError,
+  };
+}
+```
+
+- **Create Custom Hook for Products Service** : Create the `usePlatziStoreProducts` hook in the `apps/container/src/hooks/use-platzi-store-products/index.ts` directory with the following content:
+
+```ts
+import { useEffect, useState } from 'react';
+
+import {
+  createProduct,
+  CreateProductRequest,
+  deleteProduct,
+  getProduct,
+  getProducts,
+  Product,
+  updateProduct,
+  UpdateProductRequest,
+} from '../../services';
+
+export type ProductError = {
+  message: string;
+  title: string;
+};
+
+export type Data =
+  | { status: 'idle' }
+  | { status: 'loading' }
+  | { status: 'error'; error: ProductError }
+  | { status: 'hasData'; data: Product[]; message?: string }
+  | { status: 'hasSingleData'; data: Product };
+
+export default function usePlatziStoreProducts(fetchOnMount = true) {
+  const [data, setData] = useState<Data>({ status: 'idle' });
+
+  const fetchProducts = async (message?: string) => {
+    if (data.status !== 'loading') {
+      setData({ status: 'loading' });
+    }
+
+    const response = await getProducts();
+
+    if (response.success && response.data) {
+      setData({ status: 'hasData', data: response.data, message });
+    } else {
+      setData({
+        status: 'error',
+        error: {
+          message: response.message,
+          title: 'Products Fetch Failed',
+        },
+      });
+    }
+  };
+
+  const fetchProduct = async (id: string) => {
+    setData({ status: 'loading' });
+
+    const response = await getProduct(id);
+
+    if (response.success && response.data) {
+      setData({ status: 'hasSingleData', data: response.data });
+    } else {
+      setData({
+        status: 'error',
+        error: {
+          message: response.message,
+          title: 'Product Fetch Failed',
+        },
+      });
+    }
+  };
+
+  const create = async (
+    product: CreateProductRequest,
+    canGetProducts = true
+  ) => {
+    setData({ status: 'loading' });
+    const response = await createProduct(product);
+
+    if (response.success && response.data && canGetProducts) {
+      await fetchProducts('Product created successfully! 🎉');
+    } else {
+      setData({
+        status: 'error',
+        error: {
+          message: response.message,
+          title: 'Product Creation Failed',
+        },
+      });
+    }
+
+    if (response.success && data.status === 'loading') {
+      setData({ status: 'idle' });
+    }
+  };
+
+  const update = async (
+    id: string,
+    product: UpdateProductRequest,
+    canGetProducts = true
+  ) => {
+    setData({ status: 'loading' });
+    const response = await updateProduct(id, product);
+
+    if ((response.success && response.data, canGetProducts)) {
+      await fetchProducts('Product updated successfully! 🎉');
+    } else {
+      setData({
+        status: 'error',
+        error: {
+          message: response.message,
+          title: 'Product Update Failed',
+        },
+      });
+    }
+  };
+
+  const remove = async (id: string) => {
+    setData({ status: 'loading' });
+    const response = await deleteProduct(id);
+
+    if (response.success && response.data) {
+      await fetchProducts('Product deleted successfully! 🎉');
+    } else {
+      setData({
+        status: 'error',
+        error: {
+          message: response.message,
+          title: 'Product Deletion Failed',
+        },
+      });
+    }
+
+    if (response.success && data.status === 'loading') {
+      setData({ status: 'idle' });
+    }
+  };
+
+  const hasDataMessage = data.status === 'hasData' ? !!data.message : false;
+
+  useEffect(() => {
+    if (hasDataMessage) {
+      const timeout = setTimeout(() => {
+        setData((prev) => ({
+          ...prev,
+          message: undefined,
+        }));
+      }, 3000);
+
+      return () => clearTimeout(timeout);
+    }
+  }, [hasDataMessage]);
+
+  useEffect(() => {
+    if (fetchOnMount) {
+      fetchProducts();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fetchOnMount]);
+
+  return {
+    fetchProducts,
+    fetchProduct,
+    create,
+    update,
+    remove,
+    data,
+  };
+}
+```
+
+- **Export Custom Hooks** : Export the custom hooks from the `apps/data/src/hooks/index.ts` file.
+
+```ts
+// ...rest of the code
+export * from './use-platzi-store-auth';
+export * from './use-platzi-store-products';
+```
+
+- **Usage of Custom Hooks** :
+
+Use the custom hooks in the `apps/container/src/pages/login/hooks/use-login.ts` file.
+
+```ts
+import { zodResolver } from '@hookform/resolvers/zod';
+import {
+  LoginRequest,
+  loginRequestSchema,
+  paths,
+  usePlatziStoreAuth,
+} from '@mfe-tutorial/data';
+import { useToast } from '@mfe-tutorial/ui';
+import { useForm } from 'react-hook-form';
+import { useNavigate } from 'react-router-dom';
+
+export default function useLogin() {
+  const navigate = useNavigate();
+  const { toast } = useToast();
+  const { error, handleLogin, loading } = usePlatziStoreAuth();
+
+  const loginForm = useForm<LoginRequest>({
+    defaultValues: {
+      email: 'john@mail.com',
+      password: 'changeme',
+    },
+    resolver: zodResolver(loginRequestSchema),
+  });
+
+  async function onSubmit(data: LoginRequest) {
+    const result = await handleLogin(data);
+
+    toast({
+      title: result.title,
+      description: result.message,
+      variant: result.success ? 'default' : 'destructive',
+    });
+
+    if (result.success) {
+      navigate(paths.info);
+    }
+  }
+
+  return {
+    loginForm,
+    loading:
+      loading ||
+      loginForm.formState.isLoading ||
+      loginForm.formState.isSubmitting,
+    error,
+    onSubmit,
+  };
+}
+```
+
+Render the `useLogin` hook in the `apps/container/src/pages/login/index.tsx` file.
+
+```tsx
+import {
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Form,
+  InputField,
+} from '@mfe-tutorial/ui';
+
+import useLogin from './hooks/use-login';
+
+export default function LoginPage() {
+  const { loginForm, onSubmit, loading, error, onResetError } = useLogin();
+
+  if (error) {
+    return (
+      <div className="flex flex-col items-center justify-center h-screen gap-y-4">
+        <p className="text-2xl text-red-500">An error occurred!</p>
+        <p className="text-red-500">{error}</p>
+        <Button onClick={onResetError}>Retry</Button>
+      </div>
+    );
+  }
+
+  return (
+    <Form {...loginForm}>
+      <form
+        className="flex flex-col items-center justify-center h-screen p-4 md:mx-auto"
+        onSubmit={loginForm.handleSubmit(onSubmit)}
+      >
+        <Card className="w-[350px]">
+          <CardHeader>
+            <CardTitle>Login</CardTitle>
+            <CardDescription>
+              Please enter your email and password to login.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <InputField
+              control={loginForm.control}
+              label="Email"
+              name="email"
+              type="email"
+            />
+            <InputField
+              control={loginForm.control}
+              description="Must be at least 8 characters long."
+              label="Password"
+              name="password"
+              type="password"
+            />
+          </CardContent>
+          <CardFooter className="flex w-full">
+            <Button className="w-full" loading={loading} type="submit">
+              Login
+            </Button>
+          </CardFooter>
+        </Card>
+      </form>
+    </Form>
+  );
+}
+```
+
+## Create Product Page with Custom Hooks
+
+Create the `apps/info/src/app/app.tsx` file with the following content:
+
+```tsx
+import { Product } from '@mfe-tutorial/data';
+import {
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+  Label,
+} from '@mfe-tutorial/ui';
+import { Loader, Plus, RefreshCcwIcon, Trash } from 'lucide-react';
+import usePlatziStoreProducts from 'packages/data/src/hooks/use-platzi-store-products';
+
+const getFormattedAmount = (amount: number) =>
+  new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+  }).format(amount);
+
+function ProductCarousel({ images }: { images: Product['images'] }) {
+  return (
+    <Carousel className="items-center justify-center w-full h-full">
+      <CarouselContent>
+        {images.map((image) => (
+          <CarouselItem key={image}>
+            <img
+              alt={image}
+              className="object-cover w-full h-48 rounded-lg"
+              src={image.replace(/[\\[\]",]/g, '')}
+            />
+          </CarouselItem>
+        ))}
+      </CarouselContent>
+      <CarouselPrevious className="left-4" />
+      <CarouselNext className="right-4" />
+    </Carousel>
+  );
+}
+
+function ProductCard({
+  product,
+  children,
+}: {
+  product: Product;
+  children?: React.ReactNode;
+}) {
+  return (
+    <Card className="flex flex-col justify-between w-full h-full">
+      <CardHeader>
+        <ProductCarousel images={product.images} />
+        <CardTitle>{product.title}</CardTitle>
+        <CardDescription>{product.description}</CardDescription>
+      </CardHeader>
+      <CardContent className="space-x-4">
+        <Label>Price</Label>
+        <Label className="text-gray-500">
+          {getFormattedAmount(product.price)}
+        </Label>
+      </CardContent>
+      <CardFooter className="flex flex-col justify-between w-full gap-4 xl:flex-row">
+        <Badge variant="default">{product.category.name}</Badge>
+        {children}
+      </CardFooter>
+    </Card>
+  );
+}
+
+function CreateProductButton({ callback }: { callback: () => void }) {
+  return (
+    <Button onClick={callback} tooltip="Create Product" variant="icon">
+      <Plus className="text-white" />
+    </Button>
+  );
+}
+
+export function App() {
+  const { create, data, fetchProduct, fetchProducts, remove, update } =
+    usePlatziStoreProducts();
+
+  if (data.status === 'loading') {
+    return (
+      <main className="flex flex-col items-center justify-center w-full h-screen gap-y-4">
+        <Loader className="animate-spin" size="3rem" />
+        Loading...
+      </main>
+    );
+  }
+
+  if (data.status === 'error') {
+    return (
+      <main className="flex flex-col items-center justify-center w-full h-full">
+        <p className="text-red-500">An error occurred!</p>
+        <p className="text-red-500">{data.error.message}</p>
+        <Button onClick={() => fetchProducts()} variant="destructive">
+          <RefreshCcwIcon /> Retry
+        </Button>
+      </main>
+    );
+  }
+
+  const renderContent = () => {
+    if (data.status === 'hasData') {
+      const { data: products, message } = data;
+
+      return (
+        <main className="flex flex-col items-center justify-center w-full h-full p-4">
+          {message && (
+            <Badge
+              className="flex items-center justify-center w-full px-8 py-4 text-3xl"
+              variant="default"
+            >
+              {message}
+            </Badge>
+          )}
+          <ul className="grid grid-cols-1 gap-4 mt-4 sm:grid-cols-2 md:grid-cols-3">
+            {products.map((product) => (
+              <li key={product.id}>
+                <ProductCard product={product}>
+                  <div className="space-x-4">
+                    <Button
+                      onClick={() => fetchProduct(String(product.id))}
+                      variant="default"
+                    >
+                      <RefreshCcwIcon />
+                    </Button>
+                    <Button
+                      onClick={async () => {
+                        await remove(String(product.id));
+                      }}
+                      tooltip="Remove Product"
+                      variant="destructive"
+                    >
+                      <Trash />
+                    </Button>
+                    <Button
+                      onClick={async () => {
+                        const updatedProduct = {
+                          ...product,
+                          title: `${product.title} Updated`,
+                        };
+
+                        await update(String(product.id), updatedProduct);
+                      }}
+                      tooltip="Update Product"
+                      variant="icon"
+                    >
+                      <RefreshCcwIcon />
+                    </Button>
+                  </div>
+                </ProductCard>
+              </li>
+            ))}
+          </ul>
+        </main>
+      );
+    }
+
+    if (data.status === 'hasSingleData') {
+      const { data: product } = data;
+
+      return (
+        <main className="flex flex-col items-center justify-center w-full h-full p-4 mx-auto md:w-1/2">
+          <ProductCard product={product}>
+            <Button onClick={() => fetchProducts()} variant="default">
+              <RefreshCcwIcon /> Back
+            </Button>
+          </ProductCard>
+        </main>
+      );
+    }
+
+    return (
+      <main className="flex flex-col items-center justify-center w-full h-full">
+        <p className="text-red-500">No products found!</p>
+        <Button onClick={() => fetchProducts()}>
+          <RefreshCcwIcon /> Retry
+        </Button>
+      </main>
+    );
+  };
+
+  return (
+    <div className="relative">
+      <header className="sticky top-0 z-50 flex items-center justify-between p-4 bg-gray-300 border-b shadow-md">
+        <h1 className="text-3xl font-bold text-primary">Platzi Store</h1>
+        <CreateProductButton
+          callback={async () => {
+            const newProduct = {
+              title: 'New Product',
+              description: 'This is a new product.',
+              price: 100,
+              categoryId: 1,
+              images: ['https://via.placeholder.com/300'],
+            };
+
+            await create(newProduct);
+          }}
+        />
+      </header>
+      {renderContent()}
+    </div>
+  );
+}
+
+export default App;
+```
+
+## Conclusion
+
+In this tutorial, we learned how to set up a shared Data Layer for a Micro Frontend Application using Nx Workspace, React, and Tailwind CSS. We created a shared `services` library to manage the API services and a shared `hooks` library to manage the custom hooks for the services. We also created custom hooks for the `Platzi Store Auth` and `Platzi Store Products` services and used them in the `Login` and `Product` pages.
+
+The shared Data Layer allows us to manage the API services and custom hooks in a single place and reuse them across multiple applications. This helps to keep the codebase clean, maintainable, and scalable. By following this approach, we can easily add new services, custom hooks, and features to our applications without duplicating code.
+
+I hope you found this tutorial helpful and that you can now integrate Shadcn UI, a beautifully designed component library, into your projects. Happy coding! 🎉
diff --git a/apps/container/module-federation.config.ts b/apps/container/module-federation.config.ts
index 0c3d17e..c9c4ba6 100644
--- a/apps/container/module-federation.config.ts
+++ b/apps/container/module-federation.config.ts
@@ -3,6 +3,90 @@ import { ModuleFederationConfig } from '@nx/webpack';
 const config: ModuleFederationConfig = {
   name: 'container',
   remotes: ['info'],
+  shared: (name, defaultConfig) => {
+    // "react-hook-form": "^7.51.3"
+    if (name.includes('react-hook-form')) {
+      return {
+        singleton: true,
+        eager: true,
+        requiredVersion: '^7.51.3',
+      };
+    }
+
+    // "@hookform/resolvers": "^3.3.4"
+    if (name.includes('@hookform/resolvers')) {
+      return {
+        ...defaultConfig,
+        strictVersion: false,
+        requiredVersion: '^3.3.4',
+      };
+    }
+
+    // "zod": "^3.22.5"
+    if (name.includes('zod')) {
+      return {
+        singleton: true,
+        eager: true,
+        requiredVersion: '^3.22.5',
+      };
+    }
+
+    // react 18.2.0
+    if (name.includes('react')) {
+      return {
+        singleton: true,
+        eager: true,
+        requiredVersion: '^18.2.0',
+      };
+    }
+
+    // react-dom 18.2.0
+    if (name.includes('react-dom')) {
+      return {
+        singleton: true,
+        eager: true,
+        requiredVersion: '^18.2.0',
+      };
+    }
+
+    // "react-redux": "^9.1.1",
+    if (name.includes('react-redux')) {
+      return {
+        singleton: true,
+        eager: true,
+        requiredVersion: '^9.1.1',
+      };
+    }
+
+    // "@reduxjs/toolkit": "^2.2.3",
+    if (name.includes('@reduxjs/toolkit')) {
+      return {
+        singleton: true,
+        eager: true,
+        requiredVersion: '^2.2.3',
+      };
+    }
+
+    // @radix-ui/react-toast (required ^1.1.5)
+    if (name.includes('@radix-ui/react-toast')) {
+      return {
+        singleton: true,
+        eager: true,
+        requiredVersion: '^1.1.5',
+      };
+    }
+
+    // @radix-ui/react-slot (required ^1.0.2)
+    if (name.includes('@radix-ui/react-slot')) {
+      return {
+        singleton: true,
+        eager: true,
+        requiredVersion: '^1.0.2',
+      };
+    }
+
+    return false;
+  },
 };
 
 export default config;
diff --git a/apps/container/project.json b/apps/container/project.json
index 8e4c082..377d902 100644
--- a/apps/container/project.json
+++ b/apps/container/project.json
@@ -46,6 +46,15 @@
           "extractLicenses": true,
           "vendorChunk": false,
           "webpackConfig": "apps/container/webpack.config.prod.ts"
+        },
+        "custom": {
+          "optimization": true,
+          "outputHashing": "all",
+          "sourceMap": false,
+          "namedChunks": false,
+          "extractLicenses": true,
+          "vendorChunk": false,
+          "webpackConfig": "apps/container/webpack.config.custom.ts"
         }
       }
     },
@@ -64,6 +73,10 @@
         "production": {
           "buildTarget": "container:build:production",
           "hmr": false
+        },
+        "custom": {
+          "buildTarget": "container:build:custom",
+          "hmr": false
         }
       }
     },
@@ -88,6 +101,9 @@
         },
         "production": {
           "buildTarget": "container:build:production"
+        },
+        "custom": {
+          "buildTarget": "container:build:custom"
         }
       }
     },
diff --git a/apps/container/src/app/app.tsx b/apps/container/src/app/app.tsx
index 2178f19..d3cdd0e 100644
--- a/apps/container/src/app/app.tsx
+++ b/apps/container/src/app/app.tsx
@@ -1,55 +1,14 @@
-import { Button } from '@mfe-tutorial/ui';
-import * as React from 'react';
-import { NavLink, Route, Routes } from 'react-router-dom';
+import { Loader } from 'lucide-react';
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 
-const HomePage = React.lazy(() => import('../pages/home'));
-const Info = React.lazy(() => import('info/InfoContainer'));
+import { routes } from '../routes';
 
 export function App() {
   return (
-    <React.Suspense fallback={null}>
-      <nav
-        style={{
-          display: 'flex',
-          justifyContent: 'center',
-          flexDirection: 'row',
-          gap: '2rem',
-          margin: '1rem',
-        }}
-      >
-        <NavLink
-          style={({ isActive }) => ({
-            backgroundColor: isActive ? 'lightblue' : 'blue',
-            padding: '0.5rem',
-            borderRadius: '0.5rem',
-            textDecoration: 'none',
-            color: 'white',
-          })}
-          to="/"
-        >
-          Home
-        </NavLink>
-        <NavLink
-          style={({ isActive }) => ({
-            backgroundColor: isActive ? 'lightblue' : 'blue',
-            padding: '0.5rem',
-            borderRadius: '0.5rem',
-            textDecoration: 'none',
-            color: 'white',
-          })}
-          to="/info"
-        >
-          Info
-        </NavLink>
-        <Button>Click Me</Button>
-        <Button variant="destructive">Click Me</Button>
-        <Button variant="secondary">Click Me</Button>
-      </nav>
-      <Routes>
-        <Route element={<HomePage />} path="/" />
-        <Route element={<Info />} path="/info" />
-      </Routes>
-    </React.Suspense>
+    <RouterProvider
+      fallbackElement={<Loader className="animate-spin" size="4rem" />}
+      router={createBrowserRouter(routes)}
+    />
   );
 }
 
diff --git a/apps/container/src/bootstrap.tsx b/apps/container/src/bootstrap.tsx
index 6043c7d..1a7f731 100644
--- a/apps/container/src/bootstrap.tsx
+++ b/apps/container/src/bootstrap.tsx
@@ -1,6 +1,7 @@
+import { DataLayerProviders } from '@mfe-tutorial/data';
+import { Toaster } from '@mfe-tutorial/ui';
 import { StrictMode } from 'react';
 import * as ReactDOM from 'react-dom/client';
-import { BrowserRouter } from 'react-router-dom';
 
 import App from './app/app';
 
@@ -14,8 +15,9 @@ const root = ReactDOM.createRoot(element);
 
 root.render(
   <StrictMode>
-    <BrowserRouter>
+    <DataLayerProviders>
+      <Toaster />
       <App />
-    </BrowserRouter>
+    </DataLayerProviders>
   </StrictMode>
 );
diff --git a/apps/container/src/pages/home/index.tsx b/apps/container/src/pages/home/index.tsx
index 5c99cfd..75db848 100644
--- a/apps/container/src/pages/home/index.tsx
+++ b/apps/container/src/pages/home/index.tsx
@@ -1,3 +1,6 @@
+import { paths } from '@mfe-tutorial/data';
+import { NavLink } from 'react-router-dom';
+
 import { HoverCardDemo } from '../../components/hover-card';
 import SocialLinks from '../../components/social-links';
 
@@ -5,6 +8,9 @@ export default function HomePage() {
   return (
     <div className="h-[90vh] flex flex-col justify-center items-center bg-gray-100 gap-y-4 w-full">
       <p className="text-[200px] animate-wiggle">🌍</p>
+      <NavLink className="text-lg text-blue-500" to={paths.login}>
+        Go to the Login App
+      </NavLink>
       <h1 className="text-4xl font-bold text-primary">
         Welcome to the Container!
       </h1>
diff --git a/apps/container/src/pages/login/hooks/use-login.ts b/apps/container/src/pages/login/hooks/use-login.ts
new file mode 100644
index 0000000..89f9fcb
--- /dev/null
+++ b/apps/container/src/pages/login/hooks/use-login.ts
@@ -0,0 +1,49 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import {
+  LoginRequest,
+  loginRequestSchema,
+  paths,
+  usePlatziStoreAuth,
+} from '@mfe-tutorial/data';
+import { useToast } from '@mfe-tutorial/ui';
+import { useForm } from 'react-hook-form';
+import { useNavigate } from 'react-router-dom';
+
+export default function useLogin() {
+  const navigate = useNavigate();
+  const { toast } = useToast();
+  const { error, handleLogin, loading, onResetError } = usePlatziStoreAuth();
+
+  const loginForm = useForm<LoginRequest>({
+    defaultValues: {
+      email: 'john@mail.com',
+      password: 'changeme',
+    },
+    resolver: zodResolver(loginRequestSchema),
+  });
+
+  async function onSubmit(data: LoginRequest) {
+    const result = await handleLogin(data);
+
+    toast({
+      title: result.title,
+      description: result.message,
+      variant: result.success ? 'default' : 'destructive',
+    });
+
+    if (result.success) {
+      navigate(paths.info);
+    }
+  }
+
+  return {
+    loginForm,
+    loading:
+      loading ||
+      loginForm.formState.isLoading ||
+      loginForm.formState.isSubmitting,
+    error,
+    onSubmit,
+    onResetError,
+  };
+}
diff --git a/apps/container/src/pages/login/index.tsx b/apps/container/src/pages/login/index.tsx
new file mode 100644
index 0000000..ba739df
--- /dev/null
+++ b/apps/container/src/pages/login/index.tsx
@@ -0,0 +1,65 @@
+import {
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Form,
+  InputField,
+} from '@mfe-tutorial/ui';
+
+import useLogin from './hooks/use-login';
+
+export default function LoginPage() {
+  const { loginForm, onSubmit, loading, error, onResetError } = useLogin();
+
+  if (error) {
+    return (
+      <div className="flex flex-col items-center justify-center h-screen gap-y-4">
+        <p className="text-2xl text-red-500">An error occurred!</p>
+        <p className="text-red-500">{error}</p>
+        <Button onClick={onResetError}>Retry</Button>
+      </div>
+    );
+  }
+
+  return (
+    <Form {...loginForm}>
+      <form
+        className="flex flex-col items-center justify-center h-screen p-4 md:mx-auto"
+        onSubmit={loginForm.handleSubmit(onSubmit)}
+      >
+        <Card className="w-[350px]">
+          <CardHeader>
+            <CardTitle>Login</CardTitle>
+            <CardDescription>
+              Please enter your email and password to login.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <InputField
+              control={loginForm.control}
+              label="Email"
+              name="email"
+              type="email"
+            />
+            <InputField
+              control={loginForm.control}
+              description="Must be at least 8 characters long."
+              label="Password"
+              name="password"
+              type="password"
+            />
+          </CardContent>
+          <CardFooter className="flex w-full">
+            <Button className="w-full" loading={loading} type="submit">
+              Login
+            </Button>
+          </CardFooter>
+        </Card>
+      </form>
+    </Form>
+  );
+}
diff --git a/apps/container/src/routes/index.tsx b/apps/container/src/routes/index.tsx
new file mode 100644
index 0000000..7a04ad0
--- /dev/null
+++ b/apps/container/src/routes/index.tsx
@@ -0,0 +1,23 @@
+import { paths } from '@mfe-tutorial/data';
+import { withSuspense } from '@mfe-tutorial/ui';
+import { lazy } from 'react';
+import { RouteObject } from 'react-router-dom';
+
+const HomePage = withSuspense(lazy(() => import('../pages/home')));
+const LoginPage = withSuspense(lazy(() => import('../pages/login')));
+const Info = withSuspense(lazy(() => import('info/InfoContainer')));
+
+export const routes: RouteObject[] = [
+  {
+    path: paths.home,
+    element: <HomePage />,
+  },
+  {
+    path: paths.login,
+    element: <LoginPage />,
+  },
+  {
+    path: paths.info,
+    element: <Info />,
+  },
+];
diff --git a/apps/container/webpack.config.custom.ts b/apps/container/webpack.config.custom.ts
new file mode 100644
index 0000000..eb1885b
--- /dev/null
+++ b/apps/container/webpack.config.custom.ts
@@ -0,0 +1,34 @@
+import { withReact } from '@nx/react';
+import { withModuleFederation } from '@nx/react/module-federation';
+import { composePlugins, ModuleFederationConfig, withNx } from '@nx/webpack';
+
+import baseConfig from './module-federation.config';
+
+const prodConfig: ModuleFederationConfig = {
+  ...baseConfig,
+  /*
+   * Remote overrides for production.
+   * Each entry is a pair of a unique name and the URL where it is deployed.
+   *
+   * e.g.
+   * remotes: [
+   *   ['app1', 'http://app1.example.com'],
+   *   ['app2', 'http://app2.example.com'],
+   * ]
+   *
+   * You can also use a full path to the remoteEntry.js file if desired.
+   *
+   * remotes: [
+   *   ['app1', 'http://example.com/path/to/app1/remoteEntry.js'],
+   *   ['app2', 'http://example.com/path/to/app2/remoteEntry.js'],
+   * ]
+   */
+  remotes: [['info', 'https://animated-lollipop-8d4ee8.netlify.app/']],
+};
+
+// Nx plugins for webpack to build config object from Nx options and context.
+export default composePlugins(
+  withNx(),
+  withReact(),
+  withModuleFederation(prodConfig)
+);
diff --git a/apps/info/module-federation.config.ts b/apps/info/module-federation.config.ts
index 955bd86..3ff020e 100644
--- a/apps/info/module-federation.config.ts
+++ b/apps/info/module-federation.config.ts
@@ -5,6 +5,90 @@ const config: ModuleFederationConfig = {
   exposes: {
     './InfoContainer': './src/app/app',
   },
+  shared: (name, defaultConfig) => {
+    // "react-hook-form": "^7.51.3"
+    if (name.includes('react-hook-form')) {
+      return {
+        singleton: true,
+        eager: true,
+        requiredVersion: '^7.51.3',
+      };
+    }
+
+    // "@hookform/resolvers": "^3.3.4"
+    if (name.includes('@hookform/resolvers')) {
+      return {
+        ...defaultConfig,
+        strictVersion: false,
+        requiredVersion: '^3.3.4',
+      };
+    }
+
+    // "zod": "^3.22.5"
+    if (name.includes('zod')) {
+      return {
+        singleton: true,
+        eager: true,
+        requiredVersion: '^3.22.5',
+      };
+    }
+
+    // react 18.2.0
+    if (name.includes('react')) {
+      return {
+        singleton: true,
+        eager: true,
+        requiredVersion: '^18.2.0',
+      };
+    }
+
+    // react-dom 18.2.0
+    if (name.includes('react-dom')) {
+      return {
+        singleton: true,
+        eager: true,
+        requiredVersion: '^18.2.0',
+      };
+    }
+
+    // "react-redux": "^9.1.1",
+    if (name.includes('react-redux')) {
+      return {
+        singleton: true,
+        eager: true,
+        requiredVersion: '^9.1.1',
+      };
+    }
+
+    // "@reduxjs/toolkit": "^2.2.3",
+    if (name.includes('@reduxjs/toolkit')) {
+      return {
+        singleton: true,
+        eager: true,
+        requiredVersion: '^2.2.3',
+      };
+    }
+
+    // @radix-ui/react-toast (required ^1.1.5)
+    if (name.includes('@radix-ui/react-toast')) {
+      return {
+        singleton: true,
+        eager: true,
+        requiredVersion: '^1.1.5',
+      };
+    }
+
+    // @radix-ui/react-slot (required ^1.0.2)
+    if (name.includes('@radix-ui/react-slot')) {
+      return {
+        singleton: true,
+        eager: true,
+        requiredVersion: '^1.0.2',
+      };
+    }
+
+    return false;
+  },
 };
 
 export default config;
diff --git a/apps/info/project.json b/apps/info/project.json
index a48a235..b341af2 100644
--- a/apps/info/project.json
+++ b/apps/info/project.json
@@ -43,6 +43,15 @@
           "extractLicenses": true,
           "vendorChunk": false,
           "webpackConfig": "apps/info/webpack.config.prod.ts"
+        },
+        "custom": {
+          "optimization": true,
+          "outputHashing": "all",
+          "sourceMap": false,
+          "namedChunks": false,
+          "extractLicenses": true,
+          "vendorChunk": false,
+          "webpackConfig": "apps/info/webpack.config.custom.ts"
         }
       }
     },
@@ -61,6 +70,10 @@
         "production": {
           "buildTarget": "info:build:production",
           "hmr": false
+        },
+        "custom": {
+          "buildTarget": "info:build:custom",
+          "hmr": false
         }
       }
     },
@@ -85,6 +98,9 @@
         },
         "production": {
           "buildTarget": "info:build:production"
+        },
+        "custom": {
+          "buildTarget": "info:build:custom"
         }
       }
     },
diff --git a/apps/info/src/app/app.tsx b/apps/info/src/app/app.tsx
index 49a670a..5bbec27 100644
--- a/apps/info/src/app/app.tsx
+++ b/apps/info/src/app/app.tsx
@@ -1,20 +1,211 @@
-import { ContextMenuDemo } from '../components/context-menu';
+import { Product } from '@mfe-tutorial/data';
+import {
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+  Label,
+} from '@mfe-tutorial/ui';
+import { Loader, Plus, RefreshCcwIcon, Trash } from 'lucide-react';
+import usePlatziStoreProducts from 'packages/data/src/hooks/use-platzi-store-products';
+
+const getFormattedAmount = (amount: number) =>
+  new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+  }).format(amount);
+
+function ProductCarousel({ images }: { images: Product['images'] }) {
+  return (
+    <Carousel className="items-center justify-center w-full h-full">
+      <CarouselContent>
+        {images.map((image) => (
+          <CarouselItem key={image}>
+            <img
+              alt={image}
+              className="object-cover w-full h-48 rounded-lg"
+              src={image.replace(/[\\[\]",]/g, '')}
+            />
+          </CarouselItem>
+        ))}
+      </CarouselContent>
+      <CarouselPrevious className="left-4" />
+      <CarouselNext className="right-4" />
+    </Carousel>
+  );
+}
+
+function ProductCard({
+  product,
+  children,
+}: {
+  product: Product;
+  children?: React.ReactNode;
+}) {
+  return (
+    <Card className="flex flex-col justify-between w-full h-full">
+      <CardHeader>
+        <ProductCarousel images={product.images} />
+        <CardTitle>{product.title}</CardTitle>
+        <CardDescription>{product.description}</CardDescription>
+      </CardHeader>
+      <CardContent className="space-x-4">
+        <Label>Price</Label>
+        <Label className="text-gray-500">
+          {getFormattedAmount(product.price)}
+        </Label>
+      </CardContent>
+      <CardFooter className="flex flex-col justify-between w-full gap-4 xl:flex-row">
+        <Badge variant="default">{product.category.name}</Badge>
+        {children}
+      </CardFooter>
+    </Card>
+  );
+}
+
+function CreateProductButton({ callback }: { callback: () => void }) {
+  return (
+    <Button onClick={callback} tooltip="Create Product" variant="icon">
+      <Plus className="text-white" />
+    </Button>
+  );
+}
 
 export function App() {
+  const { create, data, fetchProduct, fetchProducts, remove, update } =
+    usePlatziStoreProducts();
+
+  if (data.status === 'loading') {
+    return (
+      <main className="flex flex-col items-center justify-center w-full h-screen gap-y-4">
+        <Loader className="animate-spin" size="3rem" />
+        Loading...
+      </main>
+    );
+  }
+
+  if (data.status === 'error') {
+    return (
+      <main className="flex flex-col items-center justify-center w-full h-full">
+        <p className="text-red-500">An error occurred!</p>
+        <p className="text-red-500">{data.error.message}</p>
+        <Button onClick={() => fetchProducts()} variant="destructive">
+          <RefreshCcwIcon /> Retry
+        </Button>
+      </main>
+    );
+  }
+
+  const renderContent = () => {
+    if (data.status === 'hasData') {
+      const { data: products, message } = data;
+
+      return (
+        <main className="flex flex-col items-center justify-center w-full h-full p-4">
+          {message && (
+            <Badge
+              className="flex items-center justify-center w-full px-8 py-4 text-3xl"
+              variant="default"
+            >
+              {message}
+            </Badge>
+          )}
+          <ul className="grid grid-cols-1 gap-4 mt-4 sm:grid-cols-2 md:grid-cols-3">
+            {products.map((product) => (
+              <li key={product.id}>
+                <ProductCard product={product}>
+                  <div className="space-x-4">
+                    <Button
+                      onClick={() => fetchProduct(String(product.id))}
+                      variant="default"
+                    >
+                      <RefreshCcwIcon />
+                    </Button>
+                    <Button
+                      onClick={async () => {
+                        await remove(String(product.id));
+                      }}
+                      tooltip="Remove Product"
+                      variant="destructive"
+                    >
+                      <Trash />
+                    </Button>
+                    <Button
+                      onClick={async () => {
+                        const updatedProduct = {
+                          ...product,
+                          title: `${product.title} Updated`,
+                        };
+
+                        await update(String(product.id), updatedProduct);
+                      }}
+                      tooltip="Update Product"
+                      variant="icon"
+                    >
+                      <RefreshCcwIcon />
+                    </Button>
+                  </div>
+                </ProductCard>
+              </li>
+            ))}
+          </ul>
+        </main>
+      );
+    }
+
+    if (data.status === 'hasSingleData') {
+      const { data: product } = data;
+
+      return (
+        <main className="flex flex-col items-center justify-center w-full h-full p-4 mx-auto md:w-1/2">
+          <ProductCard product={product}>
+            <Button onClick={() => fetchProducts()} variant="default">
+              <RefreshCcwIcon /> Back
+            </Button>
+          </ProductCard>
+        </main>
+      );
+    }
+
+    return (
+      <main className="flex flex-col items-center justify-center w-full h-full">
+        <p className="text-red-500">No products found!</p>
+        <Button onClick={() => fetchProducts()}>
+          <RefreshCcwIcon /> Retry
+        </Button>
+      </main>
+    );
+  };
+
   return (
-    <main>
-      <h1>Welcome to info!</h1>
-      <p>This is a remote app that is part of the Nx plugin for Webpack 5.</p>
-      <section className="p-4 rounded-lg shadow-sm bg-gray-50">
-        <h2 className="text-4xl font-bold text-center border-b-4 border-b-primary py-[41px]">
-          <p className="p-8 animate-wiggle text-primary-700">Info</p>
-        </h2>
-        <p className="text-lg text-center my-[41px]">
-          This app is a remote app that is part of the Nx plugin for Webpack 5.
-        </p>
-      </section>
-      <ContextMenuDemo />
-    </main>
+    <div className="relative">
+      <header className="sticky top-0 z-50 flex items-center justify-between p-4 bg-gray-300 border-b shadow-md">
+        <h1 className="text-3xl font-bold text-primary">Platzi Store</h1>
+        <CreateProductButton
+          callback={async () => {
+            const newProduct = {
+              title: 'New Product',
+              description: 'This is a new product.',
+              price: 100,
+              categoryId: 1,
+              images: ['https://via.placeholder.com/300'],
+            };
+
+            await create(newProduct);
+          }}
+        />
+      </header>
+      {renderContent()}
+    </div>
   );
 }
 
diff --git a/apps/info/src/components/counter-actions/index.tsx b/apps/info/src/components/counter-actions/index.tsx
new file mode 100644
index 0000000..7d72184
--- /dev/null
+++ b/apps/info/src/components/counter-actions/index.tsx
@@ -0,0 +1,21 @@
+import { useCounter } from '@mfe-tutorial/data';
+import { Button } from '@mfe-tutorial/ui';
+import React from 'react';
+
+export default function CounterActions() {
+  const {
+    counterValue,
+    handleDecrement,
+    handleIncrement,
+    handleIncrementByAmount,
+  } = useCounter();
+
+  return (
+    <div>
+      <h1>Counter: {counterValue}</h1>
+      <Button onClick={handleIncrement}>Increment</Button>
+      <Button onClick={handleDecrement}>Decrement</Button>
+      <Button onClick={() => handleIncrementByAmount(5)}>Increment by 5</Button>
+    </div>
+  );
+}
diff --git a/apps/info/webpack.config.custom.ts b/apps/info/webpack.config.custom.ts
new file mode 100644
index 0000000..de3e8aa
--- /dev/null
+++ b/apps/info/webpack.config.custom.ts
@@ -0,0 +1,3 @@
+import webPackConfig from './webpack.config';
+
+export default webPackConfig;
diff --git a/package.json b/package.json
index f968ce5..7f6d68e 100644
--- a/package.json
+++ b/package.json
@@ -12,18 +12,32 @@
   },
   "private": true,
   "dependencies": {
+    "@hookform/resolvers": "^3.3.4",
     "@radix-ui/react-context-menu": "^2.1.5",
     "@radix-ui/react-hover-card": "^1.0.7",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-toast": "^1.1.5",
+    "@radix-ui/react-tooltip": "^1.0.7",
+    "@reduxjs/toolkit": "^2.2.3",
+    "axios": "^1.6.8",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
+    "date-fns": "^3.6.0",
+    "embla-carousel-react": "^8.0.2",
     "lucide-react": "^0.365.0",
     "react": "18.2.0",
+    "react-day-picker": "^8.10.1",
     "react-dom": "18.2.0",
+    "react-hook-form": "^7.51.3",
+    "react-redux": "^9.1.1",
     "react-router-dom": "6.11.2",
     "tailwind-merge": "^2.2.2",
     "tailwindcss-animate": "^1.0.7",
-    "tslib": "^2.3.0"
+    "tslib": "^2.3.0",
+    "zod": "^3.22.5"
   },
   "devDependencies": {
     "@babel/core": "^7.14.5",
diff --git a/packages/data/.babelrc b/packages/data/.babelrc
new file mode 100644
index 0000000..1ea870e
--- /dev/null
+++ b/packages/data/.babelrc
@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}
diff --git a/packages/data/.eslintrc.json b/packages/data/.eslintrc.json
new file mode 100644
index 0000000..a39ac5d
--- /dev/null
+++ b/packages/data/.eslintrc.json
@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nx/react", "../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}
diff --git a/packages/data/README.md b/packages/data/README.md
new file mode 100644
index 0000000..0b472f6
--- /dev/null
+++ b/packages/data/README.md
@@ -0,0 +1,7 @@
+# data
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test data` to execute the unit tests via [Vitest](https://vitest.dev/).
diff --git a/packages/data/package.json b/packages/data/package.json
new file mode 100644
index 0000000..fd931ad
--- /dev/null
+++ b/packages/data/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@mfe-tutorial/data",
+  "version": "0.0.1",
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "require": "./index.js"
+    }
+  }
+}
diff --git a/packages/data/project.json b/packages/data/project.json
new file mode 100644
index 0000000..148b05b
--- /dev/null
+++ b/packages/data/project.json
@@ -0,0 +1,32 @@
+{
+  "name": "data",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/data/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["packages/data/**/*.{ts,tsx,js,jsx}"]
+      }
+    },
+    "build": {
+      "executor": "@nx/vite:build",
+      "outputs": ["{options.outputPath}"],
+      "defaultConfiguration": "production",
+      "options": {
+        "outputPath": "dist/packages/data"
+      },
+      "configurations": {
+        "development": {
+          "mode": "development"
+        },
+        "production": {
+          "mode": "production"
+        }
+      }
+    }
+  }
+}
diff --git a/packages/data/src/apis/base.api.ts b/packages/data/src/apis/base.api.ts
new file mode 100644
index 0000000..5b25b38
--- /dev/null
+++ b/packages/data/src/apis/base.api.ts
@@ -0,0 +1,10 @@
+import axios from 'axios';
+
+const api = axios;
+
+api.defaults.headers.post['Content-Type'] = 'application/json';
+api.defaults.headers.Accept = 'application/json';
+api.defaults.withCredentials = false;
+api.defaults.timeout = 1000 * 60 * 2; // Two minutes
+
+export { api };
diff --git a/packages/data/src/apis/index.ts b/packages/data/src/apis/index.ts
new file mode 100644
index 0000000..c6f14f2
--- /dev/null
+++ b/packages/data/src/apis/index.ts
@@ -0,0 +1,3 @@
+export { platziStoreApi } from './platzi.store.api';
+
+export { api } from './base.api';
diff --git a/packages/data/src/apis/platzi.store.api.ts b/packages/data/src/apis/platzi.store.api.ts
new file mode 100644
index 0000000..4c83efe
--- /dev/null
+++ b/packages/data/src/apis/platzi.store.api.ts
@@ -0,0 +1,17 @@
+import { ENV } from '../common';
+import {
+  errorInterceptor,
+  requestInterceptor,
+  responseInterceptor,
+} from '../lib/api.interceptors';
+import { api } from './base.api';
+
+export const platziStoreApi = api.create({
+  baseURL: ENV.NX_BASE_PLATZI_STORE_SERVICE_URL,
+});
+
+platziStoreApi.interceptors.request.use(requestInterceptor, (error) =>
+  Promise.reject(error)
+);
+
+platziStoreApi.interceptors.response.use(responseInterceptor, errorInterceptor);
diff --git a/packages/data/src/common/environments.ts b/packages/data/src/common/environments.ts
new file mode 100644
index 0000000..897b9a8
--- /dev/null
+++ b/packages/data/src/common/environments.ts
@@ -0,0 +1,41 @@
+import { z } from 'zod';
+
+import { getEnvParams } from '../helpers/environment.helpers';
+
+/**
+ * @description The environment schema for the container app.
+ */
+const envSchema = z.object({
+  // INFO (serif) : NX_* Custom Environment variables
+  NX_BASE_PLATZI_STORE_SERVICE_URL: z.string(),
+  NX_ACCESS_TOKEN_KEY: z.string(),
+  NX_REFRESH_TOKEN_KEY: z.string(),
+
+  // INFO (serif) : NX_* Base environment variables
+  NX_CLI_SET: z.string(),
+  NX_LOAD_DOT_ENV_FILES: z.string(),
+  NX_WORKSPACE_ROOT: z.string(),
+  NX_TERMINAL_OUTPUT_PATH: z.string(),
+  NX_STREAM_OUTPUT: z.string(),
+  NX_TASK_TARGET_PROJECT: z.string(),
+  NX_TASK_TARGET_TARGET: z.string(),
+  NX_TASK_TARGET_CONFIGURATION: z.string(),
+  NX_TASK_HASH: z.string(),
+});
+
+function initEnvironment() {
+  const [errors, env] = getEnvParams(
+    process.env as Record<string, string>,
+    envSchema
+  );
+
+  if (errors) {
+    window.console.error(errors);
+
+    throw new Error('Environment variables are not valid');
+  }
+
+  return env as z.infer<typeof envSchema>;
+}
+
+export { initEnvironment };
diff --git a/packages/data/src/common/index.ts b/packages/data/src/common/index.ts
new file mode 100644
index 0000000..e1ca609
--- /dev/null
+++ b/packages/data/src/common/index.ts
@@ -0,0 +1,5 @@
+import { initEnvironment } from './environments';
+
+export { default as paths } from './paths';
+
+export const ENV = initEnvironment();
diff --git a/packages/data/src/common/paths.ts b/packages/data/src/common/paths.ts
new file mode 100644
index 0000000..984db32
--- /dev/null
+++ b/packages/data/src/common/paths.ts
@@ -0,0 +1,5 @@
+export default {
+  home: '/',
+  login: '/login',
+  info: '/info',
+};
diff --git a/packages/data/src/features/counter/counterSlice.ts b/packages/data/src/features/counter/counterSlice.ts
new file mode 100644
index 0000000..7a28f42
--- /dev/null
+++ b/packages/data/src/features/counter/counterSlice.ts
@@ -0,0 +1,40 @@
+/* eslint-disable import/no-cycle */
+import type { PayloadAction } from '@reduxjs/toolkit';
+import { createSlice } from '@reduxjs/toolkit';
+
+import { RootState } from '../../store';
+
+// Define a type for the slice state
+interface CounterState {
+  value: number;
+}
+
+// Define the initial state using that type
+const initialState: CounterState = {
+  value: 0,
+};
+
+export const counterSlice = createSlice({
+  name: 'counter',
+  // `createSlice` will infer the state type from the `initialState` argument
+  initialState,
+  reducers: {
+    increment: (state) => {
+      state.value += 1;
+    },
+    decrement: (state) => {
+      state.value -= 1;
+    },
+    // Use the PayloadAction type to declare the contents of `action.payload`
+    incrementByAmount: (state, action: PayloadAction<number>) => {
+      state.value += action.payload;
+    },
+  },
+});
+
+export const { increment, decrement, incrementByAmount } = counterSlice.actions;
+
+// Other code such as selectors can use the imported `RootState` type
+export const selectCount = (state: RootState) => state.counter.value;
+
+export default counterSlice.reducer;
diff --git a/packages/data/src/helpers/environment.helpers.ts b/packages/data/src/helpers/environment.helpers.ts
new file mode 100644
index 0000000..e2417da
--- /dev/null
+++ b/packages/data/src/helpers/environment.helpers.ts
@@ -0,0 +1,48 @@
+/* eslint-disable no-restricted-syntax */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { z } from 'zod';
+
+/**
+ * @description Gets the parameters from the environment variables.
+ * @param {Record<string, string>} env The environment variables.
+ * @param {z.ZodObject<any, any>} schema The schema.
+ * @returns The errors and the data.
+ */
+export function getEnvParams(
+  env: Record<string, string>,
+  schema: z.ZodObject<any, any>
+): [Record<string, string> | null, z.infer<typeof schema> | null] {
+  const data: Record<string, unknown> = {};
+  const errors: Record<string, string> = {};
+
+  for (const key in schema.shape) {
+    if (Object.prototype.hasOwnProperty.call(schema.shape, key)) {
+      const value = env[key];
+
+      if (value === undefined) {
+        errors[key] = `ERROR (serif) : Missing required env var: ${key}`;
+      } else {
+        try {
+          data[key] = (schema.shape[key] as z.ZodTypeAny)?.parse(value);
+        } catch (error) {
+          let message = 'INFO (serif) : Invalid env var';
+
+          if (error instanceof z.ZodError) {
+            message = `ERROR (serif) : ${error.errors[0].message}`;
+          } else if (error instanceof Error) {
+            message = `ERROR (serif) : ${error.message}`;
+          }
+
+          errors[key] = message;
+        }
+      }
+    }
+  }
+
+  if (Object.keys(errors).length) {
+    return [errors, null];
+  }
+
+  return [null, data as z.infer<typeof schema>];
+}
diff --git a/packages/data/src/helpers/index.ts b/packages/data/src/helpers/index.ts
new file mode 100644
index 0000000..4907dba
--- /dev/null
+++ b/packages/data/src/helpers/index.ts
@@ -0,0 +1 @@
+export { handleErrorResponse } from './service.helpers';
diff --git a/packages/data/src/helpers/service.helpers.ts b/packages/data/src/helpers/service.helpers.ts
new file mode 100644
index 0000000..ccee7a3
--- /dev/null
+++ b/packages/data/src/helpers/service.helpers.ts
@@ -0,0 +1,77 @@
+import { AxiosError } from 'axios';
+import { ZodError } from 'zod';
+
+import { BaseServiceResponse } from '../types';
+
+/**
+ * @description Handles the error response.
+ * @param {unknown} error - Error
+ * @param {string | undefined} message - Message
+ * @returns {BaseServiceResponse<null>} The service response.
+ * @example
+ * const error = new Error('An error occurred.');
+ * const result = handleErrorResponse(error);
+ * console.log(result); // { data: null, message: 'An error occurred.', success: false }
+ * @example
+ * const error = new AxiosError('An error occurred.');
+ * const result = handleErrorResponse(error);
+ * console.log(result); // { data: null, message: 'An error occurred.', success: false }
+ */
+export const handleErrorResponse = <T>(
+  error: unknown,
+  message: string | undefined = 'Unknown error occurred.'
+): BaseServiceResponse<T> => {
+  let status: number | undefined;
+
+  if (error instanceof Error) {
+    message = error.message;
+    status = 500;
+  }
+
+  if (error instanceof AxiosError) {
+    message = error.message;
+    status = error.response?.status;
+  }
+
+  if (error instanceof ZodError) {
+    const paths = error.errors.map((err) => err.path[1]);
+    const uniquePaths = [...new Set(paths)];
+
+    message = `Error in fields: ${uniquePaths.join(', ')}`;
+
+    status = 400;
+  }
+
+  return {
+    data: null,
+    message,
+    success: false,
+    status,
+  };
+};
+
+/**
+ * @description Formats the message of a service response.
+ * @param {string} message The message to be formatted.
+ * @param {string[]} replacerValues The strings to replace the placeholders in message.
+ * @returns {string} The formatted message.
+ * @example
+ * const message = 'The {0} is {1}!';
+ * const replace = ['answer', '42'];
+ * const result = getServiceResponseMessage(message, replace);
+ * console.log(result); // The answer is 42!
+ */
+export const getServiceResponseMessage = (
+  message: string,
+  replacerValues?: string[]
+): string => {
+  let result = message;
+
+  if (replacerValues) {
+    replacerValues.forEach((item, index) => {
+      result = result.replace(`{${index}}`, item);
+    });
+  }
+
+  return result;
+};
diff --git a/packages/data/src/hooks/base-query/index.ts b/packages/data/src/hooks/base-query/index.ts
new file mode 100644
index 0000000..35764a0
--- /dev/null
+++ b/packages/data/src/hooks/base-query/index.ts
@@ -0,0 +1,44 @@
+import type { BaseQueryFn } from '@reduxjs/toolkit/query';
+import type { AxiosRequestConfig } from 'axios';
+import axios from 'axios';
+
+import { handleErrorResponse } from '../../helpers/service.helpers';
+
+const axiosBaseQuery =
+  <T>(
+    { baseUrl }: { baseUrl: string } = { baseUrl: '' }
+  ): BaseQueryFn<
+    {
+      url: string;
+      method?: AxiosRequestConfig<T>['method'];
+      data?: AxiosRequestConfig<T>['data'];
+      params?: AxiosRequestConfig<T>['params'];
+      headers?: AxiosRequestConfig<T>['headers'];
+    },
+    unknown,
+    unknown
+  > =>
+  async ({ url, method, data, params, headers }) => {
+    try {
+      const result = await axios({
+        url: baseUrl + url,
+        method,
+        data,
+        params: params as unknown as Record<string, string>,
+        headers,
+      });
+
+      return { data: result.data };
+    } catch (error) {
+      const result = handleErrorResponse(error);
+
+      return {
+        error: {
+          status: result.status,
+          data: result.message,
+        },
+      };
+    }
+  };
+
+export { axiosBaseQuery };
diff --git a/packages/data/src/hooks/index.ts b/packages/data/src/hooks/index.ts
new file mode 100644
index 0000000..300622d
--- /dev/null
+++ b/packages/data/src/hooks/index.ts
@@ -0,0 +1,4 @@
+export * from './use-random';
+export * from './use-counter';
+export * from './use-platzi-store-auth';
+export * from './use-platzi-store-products';
diff --git a/packages/data/src/hooks/use-counter/index.ts b/packages/data/src/hooks/use-counter/index.ts
new file mode 100644
index 0000000..e8b4886
--- /dev/null
+++ b/packages/data/src/hooks/use-counter/index.ts
@@ -0,0 +1,24 @@
+import {
+  decrement,
+  increment,
+  incrementByAmount,
+  selectCount,
+} from '../../features/counter/counterSlice';
+import { useAppDispatch, useAppSelector } from '../../store';
+
+export function useCounter() {
+  const counterValue = useAppSelector(selectCount);
+  const dispatch = useAppDispatch();
+  const handleIncrement = () => dispatch(increment());
+  const handleDecrement = () => dispatch(decrement());
+
+  const handleIncrementByAmount = (amount: number) =>
+    dispatch(incrementByAmount(amount));
+
+  return {
+    counterValue,
+    handleIncrement,
+    handleDecrement,
+    handleIncrementByAmount,
+  };
+}
diff --git a/packages/data/src/hooks/use-platzi-store-auth/index.tsx b/packages/data/src/hooks/use-platzi-store-auth/index.tsx
new file mode 100644
index 0000000..bea19af
--- /dev/null
+++ b/packages/data/src/hooks/use-platzi-store-auth/index.tsx
@@ -0,0 +1,70 @@
+import { useState } from 'react';
+
+import { ENV } from '../../common';
+import { login, LoginRequest, refreshToken } from '../../services';
+
+export function usePlatziStoreAuth() {
+  const [loading, setLoading] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleLogin = async (info: LoginRequest) => {
+    setLoading(true);
+
+    const response = await login(info);
+
+    const result = {
+      success: false,
+      message: 'Please check your email and password and try again.',
+      title: 'Login Failed',
+    };
+
+    if (response.success && response.data) {
+      localStorage.setItem(ENV.NX_ACCESS_TOKEN_KEY, response.data.access_token);
+      localStorage.setItem(
+        ENV.NX_REFRESH_TOKEN_KEY,
+        response.data.refresh_token
+      );
+
+      result.success = true;
+      result.message = 'You have successfully logged in!';
+      result.title = 'Login Success';
+    } else {
+      setError('Please check your email and password and try again.');
+    }
+
+    setLoading(false);
+
+    return result;
+  };
+
+  const handleRefreshToken = async () => {
+    const token = localStorage.getItem(ENV.NX_REFRESH_TOKEN_KEY);
+
+    if (token) {
+      const response = await refreshToken({ refreshToken: token });
+
+      if (response.success && response.data) {
+        localStorage.setItem(
+          ENV.NX_ACCESS_TOKEN_KEY,
+          response.data.access_token
+        );
+        localStorage.setItem(
+          ENV.NX_REFRESH_TOKEN_KEY,
+          response.data.refresh_token
+        );
+      } else {
+        setError(response.message);
+      }
+    }
+  };
+
+  const onResetError = () => setError(null);
+
+  return {
+    loading,
+    error,
+    handleRefreshToken,
+    handleLogin,
+    onResetError,
+  };
+}
diff --git a/packages/data/src/hooks/use-platzi-store-products/index.ts b/packages/data/src/hooks/use-platzi-store-products/index.ts
new file mode 100644
index 0000000..f15812b
--- /dev/null
+++ b/packages/data/src/hooks/use-platzi-store-products/index.ts
@@ -0,0 +1,163 @@
+import { useEffect, useState } from 'react';
+
+import {
+  createProduct,
+  CreateProductRequest,
+  deleteProduct,
+  getProduct,
+  getProducts,
+  Product,
+  updateProduct,
+  UpdateProductRequest,
+} from '../../services';
+
+export type ProductError = {
+  message: string;
+  title: string;
+};
+
+export type Data =
+  | { status: 'idle' }
+  | { status: 'loading' }
+  | { status: 'error'; error: ProductError }
+  | { status: 'hasData'; data: Product[]; message?: string }
+  | { status: 'hasSingleData'; data: Product };
+
+export default function usePlatziStoreProducts(fetchOnMount = true) {
+  const [data, setData] = useState<Data>({ status: 'idle' });
+
+  const fetchProducts = async (message?: string) => {
+    if (data.status !== 'loading') {
+      setData({ status: 'loading' });
+    }
+
+    const response = await getProducts();
+
+    if (response.success && response.data) {
+      setData({ status: 'hasData', data: response.data, message });
+    } else {
+      setData({
+        status: 'error',
+        error: {
+          message: response.message,
+          title: 'Products Fetch Failed',
+        },
+      });
+    }
+  };
+
+  const fetchProduct = async (id: string) => {
+    setData({ status: 'loading' });
+
+    const response = await getProduct(id);
+
+    if (response.success && response.data) {
+      setData({ status: 'hasSingleData', data: response.data });
+    } else {
+      setData({
+        status: 'error',
+        error: {
+          message: response.message,
+          title: 'Product Fetch Failed',
+        },
+      });
+    }
+  };
+
+  const create = async (
+    product: CreateProductRequest,
+    canGetProducts = true
+  ) => {
+    setData({ status: 'loading' });
+    const response = await createProduct(product);
+
+    if (response.success && response.data && canGetProducts) {
+      await fetchProducts('Product created successfully! 🎉');
+    } else {
+      setData({
+        status: 'error',
+        error: {
+          message: response.message,
+          title: 'Product Creation Failed',
+        },
+      });
+    }
+
+    if (response.success && data.status === 'loading') {
+      setData({ status: 'idle' });
+    }
+  };
+
+  const update = async (
+    id: string,
+    product: UpdateProductRequest,
+    canGetProducts = true
+  ) => {
+    setData({ status: 'loading' });
+    const response = await updateProduct(id, product);
+
+    if ((response.success && response.data, canGetProducts)) {
+      await fetchProducts('Product updated successfully! 🎉');
+    } else {
+      setData({
+        status: 'error',
+        error: {
+          message: response.message,
+          title: 'Product Update Failed',
+        },
+      });
+    }
+  };
+
+  const remove = async (id: string) => {
+    setData({ status: 'loading' });
+    const response = await deleteProduct(id);
+
+    if (response.success && response.data) {
+      await fetchProducts('Product deleted successfully! 🎉');
+    } else {
+      setData({
+        status: 'error',
+        error: {
+          message: response.message,
+          title: 'Product Deletion Failed',
+        },
+      });
+    }
+
+    if (response.success && data.status === 'loading') {
+      setData({ status: 'idle' });
+    }
+  };
+
+  const hasDataMessage = data.status === 'hasData' ? !!data.message : false;
+
+  useEffect(() => {
+    if (hasDataMessage) {
+      const timeout = setTimeout(() => {
+        setData((prev) => ({
+          ...prev,
+          message: undefined,
+        }));
+      }, 3000);
+
+      return () => clearTimeout(timeout);
+    }
+  }, [hasDataMessage]);
+
+  useEffect(() => {
+    if (fetchOnMount) {
+      fetchProducts();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fetchOnMount]);
+
+  return {
+    fetchProducts,
+    fetchProduct,
+    create,
+    update,
+    remove,
+    data,
+  };
+}
diff --git a/packages/data/src/hooks/use-random/index.ts b/packages/data/src/hooks/use-random/index.ts
new file mode 100644
index 0000000..2416436
--- /dev/null
+++ b/packages/data/src/hooks/use-random/index.ts
@@ -0,0 +1,9 @@
+export type UseRandomProps = {
+  multiplier: number;
+};
+
+export function useRandom({ multiplier }: UseRandomProps) {
+  return {
+    randomizedValue: Math.random() * multiplier,
+  };
+}
diff --git a/packages/data/src/index.ts b/packages/data/src/index.ts
new file mode 100644
index 0000000..bfe896d
--- /dev/null
+++ b/packages/data/src/index.ts
@@ -0,0 +1,8 @@
+export * from './hooks';
+export * from './types';
+export * from './apis';
+export * from './helpers';
+export * from './common';
+export * from './services';
+export * from './store';
+export { default as DataLayerProviders } from './providers';
diff --git a/packages/data/src/lib/api.interceptors.ts b/packages/data/src/lib/api.interceptors.ts
new file mode 100644
index 0000000..d303c62
--- /dev/null
+++ b/packages/data/src/lib/api.interceptors.ts
@@ -0,0 +1,22 @@
+import { AxiosError, AxiosResponse, InternalAxiosRequestConfig } from 'axios';
+
+import { ENV } from '../common';
+import { handleErrorResponse } from '../helpers';
+
+// TODO (serif) : handle request here
+export const requestInterceptor = (config: InternalAxiosRequestConfig) => {
+  const token = localStorage.getItem(ENV.NX_ACCESS_TOKEN_KEY);
+
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`;
+  }
+
+  return config;
+};
+
+// TODO (serif) : handle response here
+export const responseInterceptor = (response: AxiosResponse) => response;
+
+// TODO (serif) : handle error response here
+export const errorInterceptor = async (error: AxiosError) =>
+  Promise.reject(handleErrorResponse(error));
diff --git a/packages/data/src/providers/index.tsx b/packages/data/src/providers/index.tsx
new file mode 100644
index 0000000..4e039f2
--- /dev/null
+++ b/packages/data/src/providers/index.tsx
@@ -0,0 +1,8 @@
+import React, { PropsWithChildren } from 'react';
+import { Provider } from 'react-redux';
+
+import { store } from '../store';
+
+export default function DataLayerProviders({ children }: PropsWithChildren) {
+  return <Provider store={store}>{children}</Provider>;
+}
diff --git a/packages/data/src/services/index.ts b/packages/data/src/services/index.ts
new file mode 100644
index 0000000..b3e8627
--- /dev/null
+++ b/packages/data/src/services/index.ts
@@ -0,0 +1 @@
+export * from './platzi';
diff --git a/packages/data/src/services/platzi/auth/index.ts b/packages/data/src/services/platzi/auth/index.ts
new file mode 100644
index 0000000..f478ff7
--- /dev/null
+++ b/packages/data/src/services/platzi/auth/index.ts
@@ -0,0 +1,114 @@
+import { handleErrorResponse } from '../../../helpers';
+import { BaseServiceResponse } from '../../../types';
+import { PLATZI_STORE_PRODUCTS_PATHS } from '../contants';
+import { platziStoreApiMethods as methods } from '../methods';
+import {
+  loginRequestSchema,
+  loginResponseSchema,
+  refreshTokenRequestSchema,
+  refreshTokenResponseSchema,
+  userProfileResponseSchema,
+} from './schemas';
+import {
+  LoginRequest,
+  LoginResponse,
+  RefreshTokenRequest,
+  RefreshTokenResponse,
+  UserProfileResponse,
+} from './types';
+
+/**
+ * @description Logs a user in.
+ * @param {LoginRequest} info The user to log in.
+ * @returns {Promise<BaseServiceResponse<LoginResponse>>} A Promise that resolves to a LoginResponse.
+ */
+export const login = async (
+  info: LoginRequest
+): Promise<BaseServiceResponse<LoginResponse>> => {
+  try {
+    const infos = loginRequestSchema.parse(info);
+
+    const response = await methods.post<LoginRequest, LoginResponse>(
+      PLATZI_STORE_PRODUCTS_PATHS.AUTH.LOGIN,
+      infos
+    );
+
+    const data = loginResponseSchema.parse(response.data);
+
+    return {
+      data,
+      message: response.statusText,
+      success: true,
+    };
+  } catch (e) {
+    return handleErrorResponse(e);
+  }
+};
+
+/**
+ * @description Gets the user profile.
+ * @returns {Promise<BaseServiceResponse<UserProfileResponse>>} A Promise that resolves to a UserProfileResponse.
+ */
+export const getUserProfile = async (): Promise<
+  BaseServiceResponse<UserProfileResponse>
+> => {
+  try {
+    const response = await methods.get<UserProfileResponse>(
+      PLATZI_STORE_PRODUCTS_PATHS.AUTH.PROFILE
+    );
+
+    const data = userProfileResponseSchema.parse(response.data);
+
+    return {
+      data,
+      message: response.statusText,
+      success: true,
+    };
+  } catch (e) {
+    return handleErrorResponse(e);
+  }
+};
+
+/**
+ * @description Refreshes the token.
+ * @param {RefreshTokenRequest} refreshToken The refresh token.
+ * @returns {Promise<BaseServiceResponse<RefreshTokenResponse>>} A Promise that resolves to a RefreshTokenResponse.
+ */
+export const refreshToken = async (
+  token: RefreshTokenRequest
+): Promise<BaseServiceResponse<RefreshTokenResponse>> => {
+  try {
+    const values = refreshTokenRequestSchema.parse(token);
+
+    const response = await methods.post<
+      RefreshTokenRequest,
+      RefreshTokenResponse
+    >(PLATZI_STORE_PRODUCTS_PATHS.AUTH.REFRESH_TOKEN, values);
+
+    const data = refreshTokenResponseSchema.parse(response.data);
+
+    return {
+      data,
+      message: response.statusText,
+      success: true,
+    };
+  } catch (e) {
+    return handleErrorResponse(e);
+  }
+};
+
+export type {
+  LoginRequest,
+  LoginResponse,
+  UserProfileResponse,
+  RefreshTokenRequest,
+  RefreshTokenResponse,
+};
+
+export {
+  loginRequestSchema,
+  loginResponseSchema,
+  refreshTokenRequestSchema,
+  refreshTokenResponseSchema,
+  userProfileResponseSchema,
+};
diff --git a/packages/data/src/services/platzi/auth/schemas.ts b/packages/data/src/services/platzi/auth/schemas.ts
new file mode 100644
index 0000000..b1d5a62
--- /dev/null
+++ b/packages/data/src/services/platzi/auth/schemas.ts
@@ -0,0 +1,27 @@
+import { z } from 'zod';
+
+export const loginRequestSchema = z.object({
+  email: z.string().email('Please enter a valid email'),
+  password: z.string().min(6, 'Password must be at least 6 characters'),
+});
+
+export const loginResponseSchema = z.object({
+  access_token: z.string(),
+  refresh_token: z.string(),
+});
+
+export const userProfileResponseSchema = z.object({
+  id: z.number(),
+  email: z.string(),
+  password: z.string(),
+  name: z.string(),
+  role: z.string(),
+  avatar: z.string(),
+});
+
+export const refreshTokenRequestSchema = z.object({ refreshToken: z.string() });
+
+export const refreshTokenResponseSchema = z.object({
+  access_token: z.string(),
+  refresh_token: z.string(),
+});
diff --git a/packages/data/src/services/platzi/auth/types.ts b/packages/data/src/services/platzi/auth/types.ts
new file mode 100644
index 0000000..29dc603
--- /dev/null
+++ b/packages/data/src/services/platzi/auth/types.ts
@@ -0,0 +1,19 @@
+import { z } from 'zod';
+
+import {
+  loginRequestSchema,
+  loginResponseSchema,
+  refreshTokenRequestSchema,
+  refreshTokenResponseSchema,
+  userProfileResponseSchema,
+} from './schemas';
+
+export type LoginRequest = z.infer<typeof loginRequestSchema>;
+
+export type LoginResponse = z.infer<typeof loginResponseSchema>;
+
+export type UserProfileResponse = z.infer<typeof userProfileResponseSchema>;
+
+export type RefreshTokenRequest = z.infer<typeof refreshTokenRequestSchema>;
+
+export type RefreshTokenResponse = z.infer<typeof refreshTokenResponseSchema>;
diff --git a/packages/data/src/services/platzi/contants.ts b/packages/data/src/services/platzi/contants.ts
new file mode 100644
index 0000000..b2f4774
--- /dev/null
+++ b/packages/data/src/services/platzi/contants.ts
@@ -0,0 +1,17 @@
+/**
+ * @description PRODUCTS paths for the PLATZI STORE API service
+ */
+export const PLATZI_STORE_PRODUCTS_PATHS = {
+  PRODUCT: {
+    GET_ALL: '/products',
+    GET_SINGLE: '/products/:id',
+    CREATE: '/products',
+    UPDATE: '/products/:id',
+    DELETE: '/products/:id',
+  },
+  AUTH: {
+    LOGIN: '/auth/login',
+    PROFILE: '/auth/profile',
+    REFRESH_TOKEN: '/auth/refresh-token',
+  },
+};
diff --git a/packages/data/src/services/platzi/index.ts b/packages/data/src/services/platzi/index.ts
new file mode 100644
index 0000000..205ef67
--- /dev/null
+++ b/packages/data/src/services/platzi/index.ts
@@ -0,0 +1,4 @@
+export * from './products';
+export * from './auth';
+export * from './methods';
+export * from './contants';
diff --git a/packages/data/src/services/platzi/methods.ts b/packages/data/src/services/platzi/methods.ts
new file mode 100644
index 0000000..cc4b919
--- /dev/null
+++ b/packages/data/src/services/platzi/methods.ts
@@ -0,0 +1,94 @@
+import { AxiosRequestConfig, AxiosResponse } from 'axios';
+
+import { platziStoreApi } from '../../apis';
+
+/**
+ * @description Sends a GET request to the specified URL of postApi.
+ * @param {string} url The URL to send the request to.
+ * @param {AxiosRequestConfig} config The config specific for this request (merged with this.defaults).
+ * @returns {Promise<AxiosResponse<TResponse>>} A Promise that resolves to a AxiosResponse<TResponse>.
+ */
+async function get<TResponse>(
+  url: string,
+  config?: AxiosRequestConfig
+): Promise<AxiosResponse<TResponse>> {
+  const response = await platziStoreApi.get<TResponse>(url, config);
+
+  return response;
+}
+
+/**
+ * @description Sends a POST request to the specified URL of postApi.
+ * @param {string} url The URL to send the request to.
+ * @param {TRequest} data The data to be sent as the request body.
+ * @param {AxiosRequestConfig} config The config specific for this request (merged with this.defaults).
+ * @returns {Promise<AxiosResponse<TResponse>>} A Promise that resolves to a AxiosResponse<TResponse>.
+ */
+export const post = async <TRequest, TResponse>(
+  url: string,
+  data: TRequest,
+  config?: AxiosRequestConfig
+): Promise<AxiosResponse<TResponse>> => {
+  const response = await platziStoreApi.post<TResponse>(url, data, config);
+
+  return response;
+};
+
+/**
+ * @description Sends a PUT request to the specified URL of postApi.
+ * @param {string} url The URL to send the request to.
+ * @param {TRequest} data The data to be sent as the request body.
+ * @param {AxiosRequestConfig} config The config specific for this request (merged with this.defaults).
+ * @returns {Promise<AxiosResponse<TResponse>>} A Promise that resolves to a AxiosResponse<TResponse>.
+ */
+export const put = async <TRequest, TResponse>(
+  url: string,
+  data: TRequest,
+  config?: AxiosRequestConfig
+): Promise<AxiosResponse<TResponse>> => {
+  const response = await platziStoreApi.put<TResponse>(url, data, config);
+
+  return response;
+};
+
+/**
+ * @description Sends a PATCH request to the specified URL of postApi.
+ * @param {string} url The URL to send the request to.
+ * @param {TRequest} data The data to be sent as the request body.
+ * @param {AxiosRequestConfig} config The config specific for this request (merged with this.defaults).
+ * @returns {Promise<AxiosResponse<TResponse>>} A Promise that resolves to a AxiosResponse<TResponse>.
+ */
+export const patch = async <TRequest, TResponse>(
+  url: string,
+  data: TRequest,
+  config?: AxiosRequestConfig
+): Promise<AxiosResponse<TResponse>> => {
+  const response = await platziStoreApi.patch<TResponse>(url, data, config);
+
+  return response;
+};
+
+/**
+ * @description Sends a DELETE request to the specified URL of postApi.
+ * @param {string} url The URL to send the request to.
+ * @param {AxiosRequestConfig} config The config specific for this request (merged with this.defaults).
+ * @returns {Promise<AxiosResponse<TResponse>>} A Promise that resolves to a AxiosResponse<TResponse>.
+ */
+export const remove = async <TResponse>(
+  url: string,
+  config?: AxiosRequestConfig
+): Promise<AxiosResponse<TResponse>> => {
+  const response = await platziStoreApi.delete<TResponse>(url, config);
+
+  return response;
+};
+
+const platziStoreApiMethods = {
+  get,
+  post,
+  put,
+  patch,
+  remove,
+};
+
+export { platziStoreApiMethods };
diff --git a/packages/data/src/services/platzi/products/index.ts b/packages/data/src/services/platzi/products/index.ts
new file mode 100644
index 0000000..f423eda
--- /dev/null
+++ b/packages/data/src/services/platzi/products/index.ts
@@ -0,0 +1,172 @@
+import { handleErrorResponse } from '../../../helpers';
+import { BaseServiceResponse } from '../../../types';
+import { PLATZI_STORE_PRODUCTS_PATHS } from '../contants';
+import { platziStoreApiMethods as methods } from '../methods';
+import {
+  allProductsResponseSchema,
+  createProductRequestSchema,
+  createProductResponseSchema,
+  productSchema,
+  updateProductRequestSchema,
+  updateProductResponseSchema,
+} from './schemas';
+import {
+  CreateProductRequest,
+  CreateProductResponse,
+  Product,
+  UpdateProductRequest,
+  UpdateProductResponse,
+} from './types';
+
+/**
+ * @description Gets all products from the API.
+ * @returns {Promise<BaseServiceResponse<Product[]>>} A Promise that resolves to an array of Post.
+ */
+export const getProducts = async (): Promise<
+  BaseServiceResponse<Product[]>
+> => {
+  try {
+    const response = await methods.get<Product[]>(
+      PLATZI_STORE_PRODUCTS_PATHS.PRODUCT.GET_ALL,
+      {
+        params: {
+          limit: 10,
+          offset: 1,
+        },
+      }
+    );
+
+    const data = allProductsResponseSchema.parse(response.data);
+
+    return {
+      data,
+      message: response.statusText,
+      success: true,
+    };
+  } catch (e) {
+    return handleErrorResponse(e);
+  }
+};
+
+/**
+ * @description Gets a single product from the API.
+ * @param {string} id The product ID.
+ * @returns {Promise<BaseServiceResponse<Product>>} A Promise that resolves to a Product.
+ */
+export const getProduct = async (
+  id: string
+): Promise<BaseServiceResponse<Product>> => {
+  try {
+    const response = await methods.get<Product>(
+      PLATZI_STORE_PRODUCTS_PATHS.PRODUCT.GET_SINGLE.replace(':id', id)
+    );
+
+    const data = productSchema.parse(response.data);
+
+    return {
+      data,
+      message: response.statusText,
+      success: true,
+    };
+  } catch (e) {
+    return handleErrorResponse(e);
+  }
+};
+
+/**
+ * @description Creates a new product.
+ * @param {CreateProductRequest} product The product to create.
+ * @returns {Promise<BaseServiceResponse<CreateProductResponse>>} A Promise that resolves to a Product.
+ */
+export const createProduct = async (
+  product: CreateProductRequest
+): Promise<BaseServiceResponse<CreateProductResponse>> => {
+  try {
+    const values = createProductRequestSchema.parse(product);
+
+    const response = await methods.post<
+      CreateProductRequest,
+      CreateProductResponse
+    >(PLATZI_STORE_PRODUCTS_PATHS.PRODUCT.CREATE, values);
+
+    const data = createProductResponseSchema.parse(response.data);
+
+    return {
+      data,
+      message: response.statusText,
+      success: true,
+    };
+  } catch (e) {
+    return handleErrorResponse(e);
+  }
+};
+
+/**
+ * @description Updates a product.
+ * @param {string} id The product ID.
+ * @param {UpdateProductRequest} product The product to update.
+ * @returns {Promise<BaseServiceResponse<UpdateProductResponse>>} A Promise that resolves to a Product.
+ */
+export const updateProduct = async (
+  id: string,
+  product: UpdateProductRequest
+): Promise<BaseServiceResponse<UpdateProductResponse>> => {
+  try {
+    const values = updateProductRequestSchema.parse(product);
+
+    const response = await methods.put<
+      UpdateProductRequest,
+      UpdateProductResponse
+    >(PLATZI_STORE_PRODUCTS_PATHS.PRODUCT.UPDATE.replace(':id', id), values);
+
+    const data = updateProductResponseSchema.parse(response.data);
+
+    return {
+      data,
+      message: response.statusText,
+      success: true,
+    };
+  } catch (e) {
+    return handleErrorResponse(e);
+  }
+};
+
+/**
+ * @description Deletes a product.
+ * @param {string} id The product ID.
+ * @returns {Promise<BaseServiceResponse<boolean>>} A Promise that resolves to null.
+ */
+export const deleteProduct = async (
+  id: string
+): Promise<BaseServiceResponse<boolean>> => {
+  try {
+    const res = await methods.remove<boolean>(
+      PLATZI_STORE_PRODUCTS_PATHS.PRODUCT.DELETE.replace(':id', id)
+    );
+
+    return {
+      data: res.data,
+      message: 'Product deleted successfully.',
+      success: true,
+    };
+  } catch (e) {
+    return handleErrorResponse(e);
+  }
+};
+
+export type {
+  CreateProductRequest,
+  CreateProductResponse,
+  Product,
+  UpdateProductRequest,
+  UpdateProductResponse,
+};
+
+export {
+  allProductsResponseSchema,
+  createProductRequestSchema,
+  createProductResponseSchema,
+  productSchema,
+  updateProductRequestSchema,
+  updateProductResponseSchema,
+};
diff --git a/packages/data/src/services/platzi/products/schemas.ts b/packages/data/src/services/platzi/products/schemas.ts
new file mode 100644
index 0000000..5f96556
--- /dev/null
+++ b/packages/data/src/services/platzi/products/schemas.ts
@@ -0,0 +1,59 @@
+import { z } from 'zod';
+
+export const productSchema = z.object({
+  id: z.number(),
+  title: z.string(),
+  price: z.number(),
+  description: z.string(),
+  category: z.object({ id: z.number(), name: z.string(), image: z.string() }),
+  images: z.array(z.string()),
+});
+
+export const allProductsResponseSchema = z.array(productSchema);
+
+export const createProductRequestSchema = z.object({
+  title: z.string(),
+  price: z.number(),
+  description: z.string(),
+  categoryId: z.number(),
+  images: z.array(z.string()),
+});
+
+export const createProductResponseSchema = z.object({
+  title: z.string(),
+  price: z.number(),
+  description: z.string(),
+  images: z.array(z.string()),
+  category: z.object({
+    id: z.number(),
+    name: z.string(),
+    image: z.string(),
+    creationAt: z.string(),
+    updatedAt: z.string(),
+  }),
+  id: z.number(),
+  creationAt: z.string(),
+  updatedAt: z.string(),
+});
+
+export const updateProductRequestSchema = z.object({
+  title: z.string(),
+  price: z.number(),
+});
+
+export const updateProductResponseSchema = z.object({
+  id: z.number(),
+  title: z.string(),
+  price: z.number(),
+  description: z.string(),
+  images: z.array(z.string()),
+  creationAt: z.string(),
+  updatedAt: z.string(),
+  category: z.object({
+    id: z.number(),
+    name: z.string(),
+    image: z.string(),
+    creationAt: z.string(),
+    updatedAt: z.string(),
+  }),
+});
diff --git a/packages/data/src/services/platzi/products/types.ts b/packages/data/src/services/platzi/products/types.ts
new file mode 100644
index 0000000..3b1bc30
--- /dev/null
+++ b/packages/data/src/services/platzi/products/types.ts
@@ -0,0 +1,21 @@
+import { z } from 'zod';
+
+import {
+  createProductRequestSchema,
+  createProductResponseSchema,
+  productSchema,
+  updateProductRequestSchema,
+  updateProductResponseSchema,
+} from './schemas';
+
+export type Product = z.infer<typeof productSchema>;
+
+export type CreateProductRequest = z.infer<typeof createProductRequestSchema>;
+
+export type CreateProductResponse = z.infer<typeof createProductResponseSchema>;
+
+export type UpdateProductRequest = z.infer<typeof updateProductRequestSchema>;
+
+export type UpdateProductResponse = z.infer<typeof updateProductResponseSchema>;
+
+export type DeleteProductResponse = boolean;
diff --git a/packages/data/src/store/index.ts b/packages/data/src/store/index.ts
new file mode 100644
index 0000000..8e9c29d
--- /dev/null
+++ b/packages/data/src/store/index.ts
@@ -0,0 +1,19 @@
+/* eslint-disable import/no-cycle */
+import { configureStore } from '@reduxjs/toolkit';
+import { useDispatch, useSelector } from 'react-redux';
+
+import counterSlice from '../features/counter/counterSlice';
+
+export const store = configureStore({
+  reducer: {
+    counter: counterSlice,
+  },
+});
+
+export type RootState = ReturnType<typeof store.getState>;
+// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
+export type AppDispatch = typeof store.dispatch;
+
+// Use throughout your app instead of plain `useDispatch` and `useSelector`
+export const useAppDispatch = useDispatch.withTypes<AppDispatch>();
+export const useAppSelector = useSelector.withTypes<RootState>();
diff --git a/packages/data/src/types/index.ts b/packages/data/src/types/index.ts
new file mode 100644
index 0000000..a04a94b
--- /dev/null
+++ b/packages/data/src/types/index.ts
@@ -0,0 +1,15 @@
+/**
+ * @description Base service response interface
+ * @template T - Generic type for data
+ * @interface BaseServiceResponse
+ * @property {T | null} data - Data
+ * @property {string} message - Message
+ * @property {boolean} success - Success
+ * @property {number | undefined} status - Status
+ */
+export type BaseServiceResponse<T> = {
+  data: T | null;
+  message: string;
+  success: boolean;
+  status?: number;
+};
diff --git a/packages/data/tsconfig.json b/packages/data/tsconfig.json
new file mode 100644
index 0000000..6734c59
--- /dev/null
+++ b/packages/data/tsconfig.json
@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "types": ["vite/client"]
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ],
+  "extends": "../../tsconfig.base.json"
+}
diff --git a/packages/data/tsconfig.lib.json b/packages/data/tsconfig.lib.json
new file mode 100644
index 0000000..41c1f2f
--- /dev/null
+++ b/packages/data/tsconfig.lib.json
@@ -0,0 +1,30 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": [
+      "node",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts",
+      "vite/client"
+    ]
+  },
+  "exclude": [
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx"
+  ],
+  "include": [
+    "src/**/*.js",
+    "src/**/*.jsx",
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/helpers/index.ts",
+    "src/lib/api.interceptors.ts"
+  ]
+}
diff --git a/packages/data/vite.config.ts b/packages/data/vite.config.ts
new file mode 100644
index 0000000..819a3b2
--- /dev/null
+++ b/packages/data/vite.config.ts
@@ -0,0 +1,44 @@
+// eslint-disable-next-line spaced-comment
+/// <reference types='vitest' />
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import react from '@vitejs/plugin-react';
+import * as path from 'path';
+import { defineConfig } from 'vite';
+import dts from 'vite-plugin-dts';
+
+export default defineConfig({
+  cacheDir: '../../node_modules/.vite/data',
+
+  plugins: [
+    react(),
+    nxViteTsPaths(),
+    dts({
+      entryRoot: 'src',
+      tsConfigFilePath: path.join(__dirname, 'tsconfig.lib.json'),
+      skipDiagnostics: true,
+    }),
+  ],
+
+  // Uncomment this if you are using workers.
+  // worker: {
+  //  plugins: [ nxViteTsPaths() ],
+  // },
+
+  // Configuration for building your library.
+  // See: https://vitejs.dev/guide/build.html#library-mode
+  build: {
+    lib: {
+      // Could also be a dictionary or array of multiple entry points.
+      entry: 'src/index.ts',
+      name: 'data',
+      fileName: 'index',
+      // Change this to the formats you want to support.
+      // Don't forget to update your package.json as well.
+      formats: ['es', 'cjs'],
+    },
+    rollupOptions: {
+      // External packages that should not be bundled into your library.
+      external: ['react', 'react-dom', 'react/jsx-runtime'],
+    },
+  },
+});
diff --git a/packages/ui/src/components/form-fields/date-field.tsx b/packages/ui/src/components/form-fields/date-field.tsx
new file mode 100644
index 0000000..7575429
--- /dev/null
+++ b/packages/ui/src/components/form-fields/date-field.tsx
@@ -0,0 +1,75 @@
+import { format } from 'date-fns';
+import { CalendarIcon } from 'lucide-react';
+import { Control, FieldValues, Path } from 'react-hook-form';
+
+import { cn } from '../../lib';
+import { Button } from '../ui';
+import { Calendar } from '../ui/calendar';
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '../ui/form';
+import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
+
+type DateFieldProps<T extends FieldValues> = {
+  control: Control<T>;
+  label?: string;
+  name: Path<T>;
+  description?: string;
+};
+
+export function DateField<T extends FieldValues>({
+  control,
+  label,
+  name,
+  description,
+}: DateFieldProps<T>) {
+  return (
+    <FormField
+      control={control}
+      name={name}
+      render={({ field }) => (
+        <FormItem className="flex flex-col">
+          <FormLabel>{label}</FormLabel>
+          <Popover>
+            <PopoverTrigger asChild>
+              <FormControl>
+                <Button
+                  className={cn(
+                    'w-full pl-3 text-left font-normal',
+                    !field.value && 'text-muted-foreground'
+                  )}
+                  variant="outline"
+                >
+                  {field.value ? (
+                    format(field.value, 'yyyy-MM-dd')
+                  ) : (
+                    <span>Pick a date</span>
+                  )}
+                  <CalendarIcon className="w-4 h-4 ml-auto opacity-50" />
+                </Button>
+              </FormControl>
+            </PopoverTrigger>
+            <PopoverContent align="start" className="w-auto p-0">
+              <Calendar
+                initialFocus
+                disabled={(date) =>
+                  date > new Date() || date < new Date('1900-01-01')
+                }
+                mode="single"
+                onSelect={field.onChange}
+                selected={field.value}
+              />
+            </PopoverContent>
+          </Popover>
+          <FormDescription>{description}</FormDescription>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+}
diff --git a/packages/ui/src/components/form-fields/index.ts b/packages/ui/src/components/form-fields/index.ts
new file mode 100644
index 0000000..93cfde8
--- /dev/null
+++ b/packages/ui/src/components/form-fields/index.ts
@@ -0,0 +1,4 @@
+export * from './input-field';
+export * from './text-area-field';
+export * from './select-field';
+export * from './date-field';
diff --git a/packages/ui/src/components/form-fields/input-field.tsx b/packages/ui/src/components/form-fields/input-field.tsx
new file mode 100644
index 0000000..229007b
--- /dev/null
+++ b/packages/ui/src/components/form-fields/input-field.tsx
@@ -0,0 +1,43 @@
+import { Control, FieldValues, Path } from 'react-hook-form';
+
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '../ui/form';
+import { Input, InputProps } from '../ui/input';
+
+type InputFieldProps<T extends FieldValues> = {
+  control: Control<T>;
+  label?: string;
+  name: Path<T>;
+  description?: string;
+} & InputProps;
+
+export function InputField<T extends FieldValues>({
+  control,
+  label,
+  name,
+  description,
+  ...props
+}: InputFieldProps<T>) {
+  return (
+    <FormField
+      control={control}
+      name={name}
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel>{label}</FormLabel>
+          <FormControl>
+            <Input {...props} {...field} />
+          </FormControl>
+          <FormDescription>{description}</FormDescription>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+}
diff --git a/packages/ui/src/components/form-fields/select-field.tsx b/packages/ui/src/components/form-fields/select-field.tsx
new file mode 100644
index 0000000..6e7c25c
--- /dev/null
+++ b/packages/ui/src/components/form-fields/select-field.tsx
@@ -0,0 +1,61 @@
+import { Control, FieldValues, Path } from 'react-hook-form';
+
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '../ui/form';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../ui/select';
+
+type SelectFieldProps<T extends FieldValues> = {
+  control: Control<T>;
+  label?: string;
+  name: Path<T>;
+  description?: string;
+  options: { label: string; value: string }[];
+};
+
+export function SelectField<T extends FieldValues>({
+  control,
+  label,
+  name,
+  description,
+  options,
+}: SelectFieldProps<T>) {
+  return (
+    <FormField
+      control={control}
+      name={name}
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel>{label}</FormLabel>
+          <Select defaultValue={field.value} onValueChange={field.onChange}>
+            <FormControl>
+              <SelectTrigger>
+                <SelectValue placeholder="Select a value" />
+              </SelectTrigger>
+            </FormControl>
+            <SelectContent>
+              {options.map(({ label: itemLabel, value }) => (
+                <SelectItem key={value} value={value}>
+                  {itemLabel}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <FormDescription>{description}</FormDescription>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+}
diff --git a/packages/ui/src/components/form-fields/text-area-field.tsx b/packages/ui/src/components/form-fields/text-area-field.tsx
new file mode 100644
index 0000000..7a0ba48
--- /dev/null
+++ b/packages/ui/src/components/form-fields/text-area-field.tsx
@@ -0,0 +1,43 @@
+import { Control, FieldValues, Path } from 'react-hook-form';
+
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '../ui/form';
+import { Textarea, type TextareaProps } from '../ui/textarea';
+
+type TextAreaFieldProps<T extends FieldValues> = {
+  control: Control<T>;
+  label?: string;
+  name: Path<T>;
+  description?: string;
+} & TextareaProps;
+
+export function TextAreaField<T extends FieldValues>({
+  control,
+  label,
+  name,
+  description,
+  ...props
+}: TextAreaFieldProps<T>) {
+  return (
+    <FormField
+      control={control}
+      name={name}
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel>{label}</FormLabel>
+          <FormControl>
+            <Textarea {...props} {...field} />
+          </FormControl>
+          <FormDescription>{description}</FormDescription>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+}
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index 5ecdd1f..333bf6b 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -1 +1,2 @@
 export * from './ui';
+export * from './form-fields';
diff --git a/packages/ui/src/components/ui/button.tsx b/packages/ui/src/components/ui/button.tsx
index 3331012..9fbdf36 100644
--- a/packages/ui/src/components/ui/button.tsx
+++ b/packages/ui/src/components/ui/button.tsx
@@ -1,11 +1,20 @@
+/* eslint-disable max-len */
 import { Slot } from '@radix-ui/react-slot';
 import { cva, type VariantProps } from 'class-variance-authority';
+import { Loader } from 'lucide-react';
 import * as React from 'react';
 
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib';
+import {
+  Tooltip,
+  TooltipArrow,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from './tooltip';
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
   {
     variants: {
       variant: {
@@ -18,9 +27,12 @@ const buttonVariants = cva(
           'bg-secondary text-secondary-foreground hover:bg-secondary/80',
         ghost: 'hover:bg-accent hover:text-accent-foreground',
         link: 'text-primary underline-offset-4 hover:underline',
+        icon: 'hover:bg-accent hover:text-accent-foreground',
+        none: '',
       },
       size: {
         default: 'h-10 px-4 py-2',
+        xs: 'h-7 px-2.5 py-1.5',
         sm: 'h-9 rounded-md px-3',
         lg: 'h-11 rounded-md px-8',
         icon: 'h-10 w-10',
@@ -37,22 +49,104 @@ export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
   asChild?: boolean;
+  tooltip?: string;
+  loading?: boolean;
+  loadingContent?: React.ReactNode;
+}
+
+function ButtonLoadingIndicator({
+  icon,
+  className,
+  children,
+}: {
+  icon: React.ReactNode;
+  className?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <p className={cn('flex flex-row gap-x-2 items-center', className)}>
+      {icon}
+      {children}
+    </p>
+  );
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
+  (
+    {
+      className,
+      variant,
+      size,
+      asChild = false,
+      tooltip,
+      children,
+      loading,
+      loadingContent = 'Processing...',
+      ...props
+    },
+    ref
+  ) => {
     const Comp = asChild ? Slot : 'button';
 
+    const canShowTooltip =
+      tooltip && tooltip.length > 0 && !asChild && !props.disabled;
+
+    const isDisabled = props.disabled || loading;
+    const isIcon = variant === 'icon';
+
+    if (!canShowTooltip) {
+      return (
+        <Comp
+          className={cn(buttonVariants({ variant, size, className }))}
+          ref={ref}
+          {...props}
+          disabled={isDisabled}
+        >
+          {loading ? (
+            <ButtonLoadingIndicator
+              icon={<Loader className="w-4 h-4 animate-spin" />}
+            >
+              {!isIcon && loadingContent}
+            </ButtonLoadingIndicator>
+          ) : (
+            children
+          )}
+        </Comp>
+      );
+    }
+
     return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
+      <TooltipProvider key={tooltip}>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Comp
+              className={cn(buttonVariants({ variant, size, className }))}
+              ref={ref}
+              {...props}
+              disabled={isDisabled}
+            >
+              {loading ? (
+                <ButtonLoadingIndicator
+                  icon={<Loader className="w-4 h-4 animate-spin" />}
+                >
+                  {!isIcon && loadingContent}
+                </ButtonLoadingIndicator>
+              ) : (
+                children
+              )}
+            </Comp>
+          </TooltipTrigger>
+          <TooltipContent>
+            {tooltip}
+            <TooltipArrow />
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
     );
   }
 );
 
 Button.displayName = 'Button';
+ButtonLoadingIndicator.displayName = 'ButtonLoadingIndicator';
 
-export { Button, buttonVariants };
+export { Button, ButtonLoadingIndicator, buttonVariants };
diff --git a/packages/ui/src/components/ui/calendar.tsx b/packages/ui/src/components/ui/calendar.tsx
new file mode 100644
index 0000000..550142a
--- /dev/null
+++ b/packages/ui/src/components/ui/calendar.tsx
@@ -0,0 +1,66 @@
+/* eslint-disable react/no-unstable-nested-components */
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import * as React from 'react';
+import { DayPicker } from 'react-day-picker';
+
+import { cn } from '../../lib';
+import { buttonVariants } from './button';
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}: CalendarProps) {
+  return (
+    <DayPicker
+      className={cn('p-3', className)}
+      classNames={{
+        months: 'flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0',
+        month: 'space-y-4',
+        caption: 'flex justify-center pt-1 relative items-center',
+        caption_label: 'text-sm font-medium',
+        nav: 'space-x-1 flex items-center',
+        nav_button: cn(
+          buttonVariants({ variant: 'outline' }),
+          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100'
+        ),
+        nav_button_previous: 'absolute left-1',
+        nav_button_next: 'absolute right-1',
+        table: 'w-full border-collapse space-y-1',
+        head_row: 'flex',
+        head_cell:
+          'text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]',
+        row: 'flex w-full mt-2',
+        cell: 'h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20',
+        day: cn(
+          buttonVariants({ variant: 'ghost' }),
+          'h-9 w-9 p-0 font-normal aria-selected:opacity-100'
+        ),
+        day_range_end: 'day-range-end',
+        day_selected:
+          'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground',
+        day_today: 'bg-accent text-accent-foreground',
+        day_outside:
+          'day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30',
+        day_disabled: 'text-muted-foreground opacity-50',
+        day_range_middle:
+          'aria-selected:bg-accent aria-selected:text-accent-foreground',
+        day_hidden: 'invisible',
+        ...classNames,
+      }}
+      components={{
+        IconLeft: () => <ChevronLeft className="w-4 h-4" />,
+        IconRight: () => <ChevronRight className="w-4 h-4" />,
+      }}
+      showOutsideDays={showOutsideDays}
+      {...props}
+    />
+  );
+}
+
+Calendar.displayName = 'Calendar';
+
+export { Calendar };
diff --git a/packages/ui/src/components/ui/card.tsx b/packages/ui/src/components/ui/card.tsx
new file mode 100644
index 0000000..e8a01f6
--- /dev/null
+++ b/packages/ui/src/components/ui/card.tsx
@@ -0,0 +1,93 @@
+import * as React from 'react';
+
+import { cn } from '../../lib';
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    className={cn(
+      'rounded-lg border bg-card text-card-foreground shadow-sm',
+      className
+    )}
+    ref={ref}
+    {...props}
+  />
+));
+
+Card.displayName = 'Card';
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    className={cn('flex flex-col space-y-1.5 p-6', className)}
+    ref={ref}
+    {...props}
+  />
+));
+
+CardHeader.displayName = 'CardHeader';
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    aria-hidden
+    className={cn(
+      'text-2xl font-semibold leading-none tracking-tight',
+      className
+    )}
+    ref={ref}
+    {...props}
+  />
+));
+
+CardTitle.displayName = 'CardTitle';
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    className={cn('text-sm text-muted-foreground', className)}
+    ref={ref}
+    {...props}
+  />
+));
+
+CardDescription.displayName = 'CardDescription';
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div className={cn('p-6 pt-0', className)} ref={ref} {...props} />
+));
+
+CardContent.displayName = 'CardContent';
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    className={cn('flex items-center p-6 pt-0', className)}
+    ref={ref}
+    {...props}
+  />
+));
+
+CardFooter.displayName = 'CardFooter';
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+};
diff --git a/packages/ui/src/components/ui/carousel.tsx b/packages/ui/src/components/ui/carousel.tsx
new file mode 100644
index 0000000..f28c88e
--- /dev/null
+++ b/packages/ui/src/components/ui/carousel.tsx
@@ -0,0 +1,278 @@
+import useEmblaCarousel, {
+  type UseEmblaCarouselType,
+} from 'embla-carousel-react';
+import { ArrowLeft, ArrowRight } from 'lucide-react';
+import * as React from 'react';
+
+import { cn } from '../../lib';
+import { Button } from './button';
+
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
+
+type CarouselProps = {
+  opts?: CarouselOptions;
+  plugins?: CarouselPlugin;
+  orientation?: 'horizontal' | 'vertical';
+  setApi?: (api: CarouselApi) => void;
+};
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+  api: ReturnType<typeof useEmblaCarousel>[1];
+  scrollPrev: () => void;
+  scrollNext: () => void;
+  canScrollPrev: boolean;
+  canScrollNext: boolean;
+} & CarouselProps;
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null);
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext);
+
+  if (!context) {
+    throw new Error('useCarousel must be used within a <Carousel />');
+  }
+
+  return context;
+}
+
+const Carousel = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & CarouselProps
+>(
+  (
+    {
+      orientation = 'horizontal',
+      opts,
+      setApi,
+      plugins,
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const [carouselRef, api] = useEmblaCarousel(
+      {
+        ...opts,
+        axis: orientation === 'horizontal' ? 'x' : 'y',
+      },
+      plugins
+    );
+
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+    const [canScrollNext, setCanScrollNext] = React.useState(false);
+
+    const onSelect = React.useCallback((Api: CarouselApi) => {
+      if (!Api) {
+        return;
+      }
+
+      setCanScrollPrev(Api.canScrollPrev());
+      setCanScrollNext(Api.canScrollNext());
+    }, []);
+
+    const scrollPrev = React.useCallback(() => {
+      api?.scrollPrev();
+    }, [api]);
+
+    const scrollNext = React.useCallback(() => {
+      api?.scrollNext();
+    }, [api]);
+
+    const handleKeyDown = React.useCallback(
+      (event: React.KeyboardEvent<HTMLDivElement>) => {
+        if (event.key === 'ArrowLeft') {
+          event.preventDefault();
+          scrollPrev();
+        } else if (event.key === 'ArrowRight') {
+          event.preventDefault();
+          scrollNext();
+        }
+      },
+      [scrollPrev, scrollNext]
+    );
+
+    React.useEffect(() => {
+      if (!api || !setApi) {
+        return;
+      }
+
+      setApi(api);
+    }, [api, setApi]);
+
+    React.useEffect(() => {
+      if (!api) {
+        return;
+      }
+
+      onSelect(api);
+      api.on('reInit', onSelect);
+      api.on('select', onSelect);
+
+      return () => {
+        api?.off('select', onSelect);
+      };
+    }, [api, onSelect]);
+
+    const value = React.useMemo(
+      () => ({
+        carouselRef,
+        api,
+        opts,
+        orientation:
+          orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),
+        scrollPrev,
+        scrollNext,
+        canScrollPrev,
+        canScrollNext,
+      }),
+      [
+        carouselRef,
+        api,
+        opts,
+        orientation,
+        scrollPrev,
+        scrollNext,
+        canScrollPrev,
+        canScrollNext,
+      ]
+    );
+
+    return (
+      <CarouselContext.Provider value={value}>
+        <div
+          aria-roledescription="carousel"
+          className={cn('relative', className)}
+          onKeyDownCapture={handleKeyDown}
+          ref={ref}
+          role="region"
+          {...props}
+        >
+          {children}
+        </div>
+      </CarouselContext.Provider>
+    );
+  }
+);
+
+Carousel.displayName = 'Carousel';
+
+const CarouselContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { carouselRef, orientation } = useCarousel();
+
+  return (
+    <div className="overflow-hidden" ref={carouselRef}>
+      <div
+        className={cn(
+          'flex',
+          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    </div>
+  );
+});
+
+CarouselContent.displayName = 'CarouselContent';
+
+const CarouselItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { orientation } = useCarousel();
+
+  return (
+    <div
+      aria-roledescription="slide"
+      className={cn(
+        'min-w-0 shrink-0 grow-0 basis-full',
+        orientation === 'horizontal' ? 'pl-4' : 'pt-4',
+        className
+      )}
+      ref={ref}
+      role="group"
+      {...props}
+    />
+  );
+});
+
+CarouselItem.displayName = 'CarouselItem';
+
+const CarouselPrevious = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({ className, variant = 'outline', size = 'icon', ...props }, ref) => {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+
+  return (
+    <Button
+      className={cn(
+        'absolute  h-8 w-8 rounded-full',
+        orientation === 'horizontal'
+          ? '-left-12 top-1/2 -translate-y-1/2'
+          : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
+        className
+      )}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      ref={ref}
+      size={size}
+      variant={variant}
+      {...props}
+    >
+      <ArrowLeft className="w-4 h-4" />
+      <span className="sr-only">Previous slide</span>
+    </Button>
+  );
+});
+
+CarouselPrevious.displayName = 'CarouselPrevious';
+
+const CarouselNext = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({ className, variant = 'outline', size = 'icon', ...props }, ref) => {
+  const { orientation, scrollNext, canScrollNext } = useCarousel();
+
+  return (
+    <Button
+      className={cn(
+        'absolute h-8 w-8 rounded-full',
+        orientation === 'horizontal'
+          ? '-right-12 top-1/2 -translate-y-1/2'
+          : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
+        className
+      )}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      ref={ref}
+      size={size}
+      variant={variant}
+      {...props}
+    >
+      <ArrowRight className="w-4 h-4" />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  );
+});
+
+CarouselNext.displayName = 'CarouselNext';
+
+export {
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+};
diff --git a/packages/ui/src/components/ui/form.tsx b/packages/ui/src/components/ui/form.tsx
new file mode 100644
index 0000000..02f2573
--- /dev/null
+++ b/packages/ui/src/components/ui/form.tsx
@@ -0,0 +1,191 @@
+/* eslint-disable @typescript-eslint/no-use-before-define */
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { Slot } from '@radix-ui/react-slot';
+import { AlertCircle } from 'lucide-react';
+import * as React from 'react';
+import {
+  Controller,
+  ControllerProps,
+  FieldPath,
+  FieldValues,
+  FormProvider,
+  useFormContext,
+} from 'react-hook-form';
+
+import { cn } from '../../lib';
+import { Label } from './label';
+
+const Form = FormProvider;
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> = {
+  name: TName;
+};
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+);
+
+function FormField<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>({ ...props }: ControllerProps<TFieldValues, TName>) {
+  const value = React.useMemo(() => ({ name: props.name }), [props.name]);
+
+  return (
+    <FormFieldContext.Provider value={value}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  );
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
+  const fieldState = getFieldState(fieldContext.name, formState);
+
+  if (!fieldContext) {
+    throw new Error('useFormField should be used within <FormField>');
+  }
+
+  const { id } = itemContext;
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  };
+};
+
+type FormItemContextValue = {
+  id: string;
+};
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+);
+
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const id = React.useId();
+  const value = React.useMemo(() => ({ id }), [id]);
+
+  return (
+    <FormItemContext.Provider value={value}>
+      <div className={cn('space-y-2', className)} ref={ref} {...props} />
+    </FormItemContext.Provider>
+  );
+});
+
+FormItem.displayName = 'FormItem';
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField();
+
+  return (
+    <Label
+      className={cn(error && 'text-destructive', className)}
+      htmlFor={formItemId}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+FormLabel.displayName = 'FormLabel';
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } =
+    useFormField();
+
+  return (
+    <Slot
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      id={formItemId}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+FormControl.displayName = 'FormControl';
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField();
+
+  return (
+    <p
+      className={cn('text-sm text-muted-foreground', className)}
+      id={formDescriptionId}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+FormDescription.displayName = 'FormDescription';
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message) : children;
+
+  if (!body) {
+    return null;
+  }
+
+  return (
+    <div
+      aria-live="polite"
+      className="flex items-center space-x-2"
+      role="alert"
+    >
+      <AlertCircle className="w-5 h-5 text-destructive" />
+      <p
+        className={cn('text-sm font-medium text-destructive', className)}
+        id={formMessageId}
+        ref={ref}
+        {...props}
+      >
+        {body}
+      </p>
+    </div>
+  );
+});
+
+FormMessage.displayName = 'FormMessage';
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+};
diff --git a/packages/ui/src/components/ui/index.ts b/packages/ui/src/components/ui/index.ts
index 44c0442..c287914 100644
--- a/packages/ui/src/components/ui/index.ts
+++ b/packages/ui/src/components/ui/index.ts
@@ -2,3 +2,13 @@ export * from './context-menu';
 export * from './button';
 export * from './badge';
 export * from './hover-card';
+export * from './input';
+export * from './toast';
+export * from './toaster';
+export * from './use-toast';
+export * from './card';
+export * from './form';
+export * from './label';
+export * from './select';
+export * from './textarea';
+export * from './carousel';
diff --git a/packages/ui/src/components/ui/input.tsx b/packages/ui/src/components/ui/input.tsx
new file mode 100644
index 0000000..c9c2302
--- /dev/null
+++ b/packages/ui/src/components/ui/input.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+
+import { cn } from '../../lib';
+
+export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => (
+    <input
+      className={cn(
+        'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        className
+      )}
+      ref={ref}
+      type={type}
+      {...props}
+    />
+  )
+);
+
+Input.displayName = 'Input';
+
+export { Input };
diff --git a/packages/ui/src/components/ui/label.tsx b/packages/ui/src/components/ui/label.tsx
new file mode 100644
index 0000000..97f9f2e
--- /dev/null
+++ b/packages/ui/src/components/ui/label.tsx
@@ -0,0 +1,25 @@
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+import { cn } from '../../lib';
+
+const labelVariants = cva(
+  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
+);
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    className={cn(labelVariants(), className)}
+    ref={ref}
+    {...props}
+  />
+));
+
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };
diff --git a/packages/ui/src/components/ui/popover.tsx b/packages/ui/src/components/ui/popover.tsx
new file mode 100644
index 0000000..9457395
--- /dev/null
+++ b/packages/ui/src/components/ui/popover.tsx
@@ -0,0 +1,29 @@
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import * as React from 'react';
+
+import { cn } from '../../lib';
+
+const Popover = PopoverPrimitive.Root;
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      align={align}
+      className={cn(
+        'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        className
+      )}
+      ref={ref}
+      sideOffset={sideOffset}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+));
+
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent };
diff --git a/packages/ui/src/components/ui/select.tsx b/packages/ui/src/components/ui/select.tsx
new file mode 100644
index 0000000..0477696
--- /dev/null
+++ b/packages/ui/src/components/ui/select.tsx
@@ -0,0 +1,163 @@
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { Check, ChevronDown, ChevronUp } from 'lucide-react';
+import * as React from 'react';
+
+import { cn } from '../../lib';
+
+const Select = SelectPrimitive.Root;
+const SelectGroup = SelectPrimitive.Group;
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    className={cn(
+      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+      className
+    )}
+    ref={ref}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="w-4 h-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    className={cn(
+      'flex cursor-default items-center justify-center py-1',
+      className
+    )}
+    ref={ref}
+    {...props}
+  >
+    <ChevronUp className="w-4 h-4" />
+  </SelectPrimitive.ScrollUpButton>
+));
+
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    className={cn(
+      'flex cursor-default items-center justify-center py-1',
+      className
+    )}
+    ref={ref}
+    {...props}
+  >
+    <ChevronDown className="w-4 h-4" />
+  </SelectPrimitive.ScrollDownButton>
+));
+
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = 'popper', ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      className={cn(
+        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        position === 'popper' &&
+          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+        className
+      )}
+      position={position}
+      ref={ref}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          'p-1',
+          position === 'popper' &&
+            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)}
+    ref={ref}
+    {...props}
+  />
+));
+
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    className={cn(
+      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className
+    )}
+    ref={ref}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="w-4 h-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    className={cn('-mx-1 my-1 h-px bg-muted', className)}
+    ref={ref}
+    {...props}
+  />
+));
+
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+};
diff --git a/packages/ui/src/components/ui/textarea.tsx b/packages/ui/src/components/ui/textarea.tsx
new file mode 100644
index 0000000..7834c27
--- /dev/null
+++ b/packages/ui/src/components/ui/textarea.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+import { cn } from '../../lib';
+
+export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => (
+    <textarea
+      className={cn(
+        'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  )
+);
+
+Textarea.displayName = 'Textarea';
+
+export { Textarea };
diff --git a/packages/ui/src/components/ui/toast.tsx b/packages/ui/src/components/ui/toast.tsx
new file mode 100644
index 0000000..bd351ae
--- /dev/null
+++ b/packages/ui/src/components/ui/toast.tsx
@@ -0,0 +1,131 @@
+import * as ToastPrimitives from '@radix-ui/react-toast';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { X } from 'lucide-react';
+import * as React from 'react';
+
+import { cn } from '../../lib';
+
+const ToastProvider = ToastPrimitives.Provider;
+
+const ToastViewport = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Viewport
+    className={cn(
+      'fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',
+      className
+    )}
+    ref={ref}
+    {...props}
+  />
+));
+
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
+
+const toastVariants = cva(
+  'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
+  {
+    variants: {
+      variant: {
+        default: 'border bg-background text-foreground',
+        destructive:
+          'destructive group border-destructive bg-destructive text-destructive-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+    VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => (
+  <ToastPrimitives.Root
+    className={cn(toastVariants({ variant }), className)}
+    ref={ref}
+    {...props}
+  />
+));
+
+Toast.displayName = ToastPrimitives.Root.displayName;
+
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Action
+    className={cn(
+      'inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive',
+      className
+    )}
+    ref={ref}
+    {...props}
+  />
+));
+
+ToastAction.displayName = ToastPrimitives.Action.displayName;
+
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Close
+    className={cn(
+      'absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600',
+      className
+    )}
+    ref={ref}
+    toast-close=""
+    {...props}
+  >
+    <X className="w-4 h-4" />
+  </ToastPrimitives.Close>
+));
+
+ToastClose.displayName = ToastPrimitives.Close.displayName;
+
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Title>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Title
+    className={cn('text-sm font-semibold', className)}
+    ref={ref}
+    {...props}
+  />
+));
+
+ToastTitle.displayName = ToastPrimitives.Title.displayName;
+
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Description>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Description
+    className={cn('text-sm opacity-90', className)}
+    ref={ref}
+    {...props}
+  />
+));
+
+ToastDescription.displayName = ToastPrimitives.Description.displayName;
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>;
+
+export {
+  type ToastProps,
+  type ToastActionElement,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+};
diff --git a/packages/ui/src/components/ui/toaster.tsx b/packages/ui/src/components/ui/toaster.tsx
new file mode 100644
index 0000000..694ea01
--- /dev/null
+++ b/packages/ui/src/components/ui/toaster.tsx
@@ -0,0 +1,29 @@
+import {
+  Toast,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+} from './toast';
+import { useToast } from './use-toast';
+
+export function Toaster() {
+  const { toasts } = useToast();
+
+  return (
+    <ToastProvider>
+      {toasts.map(({ id, title, description, action, ...props }) => (
+        <Toast key={id} {...props}>
+          <div className="grid gap-1">
+            {title && <ToastTitle>{title}</ToastTitle>}
+            {description && <ToastDescription>{description}</ToastDescription>}
+          </div>
+          {action}
+          <ToastClose />
+        </Toast>
+      ))}
+      <ToastViewport />
+    </ToastProvider>
+  );
+}
diff --git a/packages/ui/src/components/ui/tooltip.tsx b/packages/ui/src/components/ui/tooltip.tsx
new file mode 100644
index 0000000..173d879
--- /dev/null
+++ b/packages/ui/src/components/ui/tooltip.tsx
@@ -0,0 +1,34 @@
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import * as React from 'react';
+
+import { cn } from '../../lib';
+
+const TooltipProvider = TooltipPrimitive.Provider;
+const Tooltip = TooltipPrimitive.Root;
+const TooltipTrigger = TooltipPrimitive.Trigger;
+const TooltipArrow = TooltipPrimitive.Arrow;
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    className={cn(
+      'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      className
+    )}
+    ref={ref}
+    sideOffset={sideOffset}
+    {...props}
+  />
+));
+
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+  TooltipProvider,
+  TooltipArrow,
+};
diff --git a/packages/ui/src/components/ui/use-toast.ts b/packages/ui/src/components/ui/use-toast.ts
new file mode 100644
index 0000000..a33ba1d
--- /dev/null
+++ b/packages/ui/src/components/ui/use-toast.ts
@@ -0,0 +1,194 @@
+import * as React from 'react';
+
+import { ToastActionElement, ToastProps } from './toast';
+
+const TOAST_LIMIT = 1;
+const TOAST_REMOVE_DELAY = 1000000;
+
+type ToasterToast = ToastProps & {
+  id: string;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  action?: ToastActionElement;
+};
+
+const actionTypes = {
+  ADD_TOAST: 'ADD_TOAST',
+  UPDATE_TOAST: 'UPDATE_TOAST',
+  DISMISS_TOAST: 'DISMISS_TOAST',
+  REMOVE_TOAST: 'REMOVE_TOAST',
+} as const;
+
+let count = 0;
+
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER;
+
+  return count.toString();
+}
+
+type ActionType = typeof actionTypes;
+
+type Action =
+  | {
+      type: ActionType['ADD_TOAST'];
+      toast: ToasterToast;
+    }
+  | {
+      type: ActionType['UPDATE_TOAST'];
+      toast: Partial<ToasterToast>;
+    }
+  | {
+      type: ActionType['DISMISS_TOAST'];
+      toastId?: ToasterToast['id'];
+    }
+  | {
+      type: ActionType['REMOVE_TOAST'];
+      toastId?: ToasterToast['id'];
+    };
+
+interface State {
+  toasts: ToasterToast[];
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return;
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId);
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    dispatch({
+      type: 'REMOVE_TOAST',
+      toastId,
+    });
+  }, TOAST_REMOVE_DELAY);
+
+  toastTimeouts.set(toastId, timeout);
+};
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case 'ADD_TOAST':
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      };
+    case 'UPDATE_TOAST':
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t
+        ),
+      };
+    case 'DISMISS_TOAST': {
+      const { toastId } = action;
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId);
+      } else {
+        state.toasts.forEach((t) => {
+          addToRemoveQueue(t.id);
+        });
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t
+        ),
+      };
+    }
+    case 'REMOVE_TOAST':
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        };
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      };
+
+    default:
+      return state;
+  }
+};
+
+const listeners: Array<(state: State) => void> = [];
+let memoryState: State = { toasts: [] };
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action);
+  listeners.forEach((listener) => {
+    listener(memoryState);
+  });
+}
+
+type Toast = Omit<ToasterToast, 'id'>;
+
+function toast({ ...props }: Toast) {
+  const id = genId();
+
+  const update = (updateProps: ToasterToast) =>
+    dispatch({
+      type: 'UPDATE_TOAST',
+      toast: { ...updateProps, id },
+    });
+
+  const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id });
+
+  dispatch({
+    type: 'ADD_TOAST',
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss();
+      },
+    },
+  });
+
+  return {
+    id,
+    dismiss,
+    update,
+  };
+}
+
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState);
+
+  React.useEffect(() => {
+    listeners.push(setState);
+
+    return () => {
+      const index = listeners.indexOf(setState);
+
+      if (index > -1) {
+        listeners.splice(index, 1);
+      }
+    };
+  }, [state]);
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId }),
+  };
+}
+
+export { useToast, toast };
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 719b9e9..65ce6dd 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -1,2 +1,3 @@
 export * from './components';
 export * from './lib';
+export * from './utils';
diff --git a/packages/ui/src/utils/index.ts b/packages/ui/src/utils/index.ts
new file mode 100644
index 0000000..258e041
--- /dev/null
+++ b/packages/ui/src/utils/index.ts
@@ -0,0 +1 @@
+export * from './lazy.utils';
diff --git a/packages/ui/src/utils/lazy.utils.tsx b/packages/ui/src/utils/lazy.utils.tsx
new file mode 100644
index 0000000..53a11d4
--- /dev/null
+++ b/packages/ui/src/utils/lazy.utils.tsx
@@ -0,0 +1,40 @@
+import { Loader } from 'lucide-react';
+import { ComponentType, Suspense } from 'react';
+
+/**
+ * @description A higher-order component that adds suspense to a component
+ * @param {ComponentType<P>} WrappedComponent - The component to wrap with suspense
+ * @param {NonNullable<React.ReactNode>} fallback - The fallback component to display while the wrapped component is loading
+ * @returns The wrapped component with suspense
+ */
+function withSuspense<P extends object>(
+  WrappedComponent: ComponentType<P>,
+  fallback?: NonNullable<React.ReactNode>
+) {
+  function WithSuspense(props: P) {
+    return (
+      <Suspense
+        fallback={
+          fallback ?? (
+            <div className="flex flex-col items-center justify-center w-full h-screen gap-y-4">
+              <Loader className="animate-spin" size="4rem" />
+              <span className="text-xl text-center text-primary-500">
+                Loading...
+              </span>
+            </div>
+          )
+        }
+      >
+        <WrappedComponent {...props} />
+      </Suspense>
+    );
+  }
+
+  WithSuspense.displayName = `WithSuspense(${
+    WrappedComponent.displayName || WrappedComponent.name || 'Component'
+  })`;
+
+  return WithSuspense;
+}
+
+export { withSuspense };
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0b05ef2..8b03e1c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -5,30 +5,69 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
+  '@hookform/resolvers':
+    specifier: ^3.3.4
+    version: 3.3.4(react-hook-form@7.51.3)
   '@radix-ui/react-context-menu':
     specifier: ^2.1.5
     version: 2.1.5(@types/react-dom@18.2.9)(@types/react@18.2.24)(react-dom@18.2.0)(react@18.2.0)
   '@radix-ui/react-hover-card':
     specifier: ^1.0.7
     version: 1.0.7(@types/react-dom@18.2.9)(@types/react@18.2.24)(react-dom@18.2.0)(react@18.2.0)
+  '@radix-ui/react-label':
+    specifier: ^2.0.2
+    version: 2.0.2(@types/react-dom@18.2.9)(@types/react@18.2.24)(react-dom@18.2.0)(react@18.2.0)
+  '@radix-ui/react-popover':
+    specifier: ^1.0.7
+    version: 1.0.7(@types/react-dom@18.2.9)(@types/react@18.2.24)(react-dom@18.2.0)(react@18.2.0)
+  '@radix-ui/react-select':
+    specifier: ^2.0.0
+    version: 2.0.0(@types/react-dom@18.2.9)(@types/react@18.2.24)(react-dom@18.2.0)(react@18.2.0)
   '@radix-ui/react-slot':
     specifier: ^1.0.2
     version: 1.0.2(@types/react@18.2.24)(react@18.2.0)
+  '@radix-ui/react-toast':
+    specifier: ^1.1.5
+    version: 1.1.5(@types/react-dom@18.2.9)(@types/react@18.2.24)(react-dom@18.2.0)(react@18.2.0)
+  '@radix-ui/react-tooltip':
+    specifier: ^1.0.7
+    version: 1.0.7(@types/react-dom@18.2.9)(@types/react@18.2.24)(react-dom@18.2.0)(react@18.2.0)
+  '@reduxjs/toolkit':
+    specifier: ^2.2.3
+    version: 2.2.3(react-redux@9.1.1)(react@18.2.0)
+  axios:
+    specifier: ^1.6.8
+    version: 1.6.8(debug@4.3.4)
   class-variance-authority:
     specifier: ^0.7.0
     version: 0.7.0
   clsx:
     specifier: ^2.1.0
     version: 2.1.0
+  date-fns:
+    specifier: ^3.6.0
+    version: 3.6.0
+  embla-carousel-react:
+    specifier: ^8.0.2
+    version: 8.0.2(react@18.2.0)
   lucide-react:
     specifier: ^0.365.0
     version: 0.365.0(react@18.2.0)
   react:
     specifier: 18.2.0
     version: 18.2.0
+  react-day-picker:
+    specifier: ^8.10.1
+    version: 8.10.1(date-fns@3.6.0)(react@18.2.0)
   react-dom:
     specifier: 18.2.0
     version: 18.2.0(react@18.2.0)
+  react-hook-form:
+    specifier: ^7.51.3
+    version: 7.51.3(react@18.2.0)
+  react-redux:
+    specifier: ^9.1.1
+    version: 9.1.1(@types/react@18.2.24)(react@18.2.0)(redux@5.0.1)
   react-router-dom:
     specifier: 6.11.2
     version: 6.11.2(react-dom@18.2.0)(react@18.2.0)
@@ -41,6 +80,9 @@ dependencies:
   tslib:
     specifier: ^2.3.0
     version: 2.3.0
+  zod:
+    specifier: ^3.22.5
+    version: 3.22.5
 
 devDependencies:
   '@babel/core':
@@ -2894,6 +2936,14 @@ packages:
       - supports-color
     dev: true
 
+  /@hookform/resolvers@3.3.4(react-hook-form@7.51.3):
+    resolution: {integrity: sha512-o5cgpGOuJYrd+iMKvkttOclgwRW86EsWJZZRC23prf0uU2i48Htq4PuT73AVb9ionFyZrwYEITuOFGF+BydEtQ==}
+    peerDependencies:
+      react-hook-form: ^7.0.0
+    dependencies:
+      react-hook-form: 7.51.3(react@18.2.0)
+    dev: false
+
   /@humanwhocodes/config-array@0.11.14:
     resolution: {integrity: sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==}
     engines: {node: '>=10.10.0'}
@@ -5265,6 +5315,12 @@ packages:
     resolution: {integrity: sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==}
     dev: true
 
+  /@radix-ui/number@1.0.1:
+    resolution: {integrity: sha512-T5gIdVO2mmPW3NNhjNgEP3cqMXjXL9UbO0BzWcXfvdBs+BohbQxvd/K5hSVKmn9/lbTdsQVKbUcP5WLCwvUbBg==}
+    dependencies:
+      '@babel/runtime': 7.24.1
+    dev: false
+
   /@radix-ui/primitive@1.0.1:
     resolution: {integrity: sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==}
     dependencies:
@@ -5490,6 +5546,27 @@ packages:
       react: 18.2.0
     dev: false
 
+  /@radix-ui/react-label@2.0.2(@types/react-dom@18.2.9)(@types/react@18.2.24)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-N5ehvlM7qoTLx7nWPodsPYPgMzA5WM8zZChQg8nyFJKnDO5WHdba1vv5/H6IO5LtJMfD2Q3wh1qHFGNtK0w3bQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.24.1
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.9)(@types/react@18.2.24)(react-dom@18.2.0)(react@18.2.0)
+      '@types/react': 18.2.24
+      '@types/react-dom': 18.2.9
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
   /@radix-ui/react-menu@2.0.6(@types/react-dom@18.2.9)(@types/react@18.2.24)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-BVkFLS+bUC8HcImkRKPSiVumA1VPOOEC5WBMiT+QAVsPzW1FJzI9KnqgGxVDPBcql5xXrHkD3JOVoXWEXD8SYA==}
     peerDependencies:
@@ -5528,6 +5605,41 @@ packages:
       react-remove-scroll: 2.5.5(@types/react@18.2.24)(react@18.2.0)
     dev: false
 
+  /@radix-ui/react-popover@1.0.7(@types/react-dom@18.2.9)(@types/react@18.2.24)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-shtvVnlsxT6faMnK/a7n0wptwBD23xc1Z5mdrtKLwVEfsEMXodS0r5s0/g5P0hX//EKYZS2sxUjqfzlg52ZSnQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.24.1
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.24)(react@18.2.0)
+      '@radix-ui/react-context': 1.0.1(@types/react@18.2.24)(react@18.2.0)
+      '@radix-ui/react-dismissable-layer': 1.0.5(@types/react-dom@18.2.9)(@types/react@18.2.24)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-focus-guards': 1.0.1(@types/react@18.2.24)(react@18.2.0)
+      '@radix-ui/react-focus-scope': 1.0.4(@types/react-dom@18.2.9)(@types/react@18.2.24)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-id': 1.0.1(@types/react@18.2.24)(react@18.2.0)
+      '@radix-ui/react-popper': 1.1.3(@types/react-dom@18.2.9)(@types/react@18.2.24)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-portal': 1.0.4(@types/react-dom@18.2.9)(@types/react@18.2.24)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.9)(@types/react@18.2.24)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.9)(@types/react@18.2.24)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.24)(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.24)(react@18.2.0)
+      '@types/react': 18.2.24
+      '@types/react-dom': 18.2.9
+      aria-hidden: 1.2.4
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-remove-scroll: 2.5.5(@types/react@18.2.24)(react@18.2.0)
+    dev: false
+
   /@radix-ui/react-popper@1.1.3(@types/react-dom@18.2.9)(@types/react@18.2.24)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-cKpopj/5RHZWjrbF2846jBNacjQVwkP068DfmgrNJXpvVWrOvlAmE9xSiy5OqeE+Gi8D9fP+oDhUnPqNMY8/5w==}
     peerDependencies:
@@ -5651,6 +5763,47 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
+  /@radix-ui/react-select@2.0.0(@types/react-dom@18.2.9)(@types/react@18.2.24)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-RH5b7af4oHtkcHS7pG6Sgv5rk5Wxa7XI8W5gvB1N/yiuDGZxko1ynvOiVhFM7Cis2A8zxF9bTOUVbRDzPepe6w==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.24.1
+      '@radix-ui/number': 1.0.1
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-collection': 1.0.3(@types/react-dom@18.2.9)(@types/react@18.2.24)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.24)(react@18.2.0)
+      '@radix-ui/react-context': 1.0.1(@types/react@18.2.24)(react@18.2.0)
+      '@radix-ui/react-direction': 1.0.1(@types/react@18.2.24)(react@18.2.0)
+      '@radix-ui/react-dismissable-layer': 1.0.5(@types/react-dom@18.2.9)(@types/react@18.2.24)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-focus-guards': 1.0.1(@types/react@18.2.24)(react@18.2.0)
+      '@radix-ui/react-focus-scope': 1.0.4(@types/react-dom@18.2.9)(@types/react@18.2.24)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-id': 1.0.1(@types/react@18.2.24)(react@18.2.0)
+      '@radix-ui/react-popper': 1.1.3(@types/react-dom@18.2.9)(@types/react@18.2.24)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-portal': 1.0.4(@types/react-dom@18.2.9)(@types/react@18.2.24)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.9)(@types/react@18.2.24)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.24)(react@18.2.0)
+      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.24)(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.24)(react@18.2.0)
+      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.24)(react@18.2.0)
+      '@radix-ui/react-use-previous': 1.0.1(@types/react@18.2.24)(react@18.2.0)
+      '@radix-ui/react-visually-hidden': 1.0.3(@types/react-dom@18.2.9)(@types/react@18.2.24)(react-dom@18.2.0)(react@18.2.0)
+      '@types/react': 18.2.24
+      '@types/react-dom': 18.2.9
+      aria-hidden: 1.2.4
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-remove-scroll: 2.5.5(@types/react@18.2.24)(react@18.2.0)
+    dev: false
+
   /@radix-ui/react-slot@1.0.2(@types/react@18.2.24)(react@18.2.0):
     resolution: {integrity: sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==}
     peerDependencies:
@@ -5666,6 +5819,70 @@ packages:
       react: 18.2.0
     dev: false
 
+  /@radix-ui/react-toast@1.1.5(@types/react-dom@18.2.9)(@types/react@18.2.24)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-fRLn227WHIBRSzuRzGJ8W+5YALxofH23y0MlPLddaIpLpCDqdE0NZlS2NRQDRiptfxDeeCjgFIpexB1/zkxDlw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.24.1
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-collection': 1.0.3(@types/react-dom@18.2.9)(@types/react@18.2.24)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.24)(react@18.2.0)
+      '@radix-ui/react-context': 1.0.1(@types/react@18.2.24)(react@18.2.0)
+      '@radix-ui/react-dismissable-layer': 1.0.5(@types/react-dom@18.2.9)(@types/react@18.2.24)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-portal': 1.0.4(@types/react-dom@18.2.9)(@types/react@18.2.24)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.9)(@types/react@18.2.24)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.9)(@types/react@18.2.24)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.24)(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.24)(react@18.2.0)
+      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.24)(react@18.2.0)
+      '@radix-ui/react-visually-hidden': 1.0.3(@types/react-dom@18.2.9)(@types/react@18.2.24)(react-dom@18.2.0)(react@18.2.0)
+      '@types/react': 18.2.24
+      '@types/react-dom': 18.2.9
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
+  /@radix-ui/react-tooltip@1.0.7(@types/react-dom@18.2.9)(@types/react@18.2.24)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-lPh5iKNFVQ/jav/j6ZrWq3blfDJ0OH9R6FlNUHPMqdLuQ9vwDgFsRxvl8b7Asuy5c8xmoojHUxKHQSOAvMHxyw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.24.1
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.24)(react@18.2.0)
+      '@radix-ui/react-context': 1.0.1(@types/react@18.2.24)(react@18.2.0)
+      '@radix-ui/react-dismissable-layer': 1.0.5(@types/react-dom@18.2.9)(@types/react@18.2.24)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-id': 1.0.1(@types/react@18.2.24)(react@18.2.0)
+      '@radix-ui/react-popper': 1.1.3(@types/react-dom@18.2.9)(@types/react@18.2.24)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-portal': 1.0.4(@types/react-dom@18.2.9)(@types/react@18.2.24)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.9)(@types/react@18.2.24)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.9)(@types/react@18.2.24)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.24)(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.24)(react@18.2.0)
+      '@radix-ui/react-visually-hidden': 1.0.3(@types/react-dom@18.2.9)(@types/react@18.2.24)(react-dom@18.2.0)(react@18.2.0)
+      '@types/react': 18.2.24
+      '@types/react-dom': 18.2.9
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
   /@radix-ui/react-use-callback-ref@1.0.1(@types/react@18.2.24)(react@18.2.0):
     resolution: {integrity: sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==}
     peerDependencies:
@@ -5724,6 +5941,20 @@ packages:
       react: 18.2.0
     dev: false
 
+  /@radix-ui/react-use-previous@1.0.1(@types/react@18.2.24)(react@18.2.0):
+    resolution: {integrity: sha512-cV5La9DPwiQ7S0gf/0qiD6YgNqM5Fk97Kdrlc5yBcrF3jyEZQwm7vYFqMo4IfeHgJXsRaMvLABFtd0OVEmZhDw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.24.1
+      '@types/react': 18.2.24
+      react: 18.2.0
+    dev: false
+
   /@radix-ui/react-use-rect@1.0.1(@types/react@18.2.24)(react@18.2.0):
     resolution: {integrity: sha512-Cq5DLuSiuYVKNU8orzJMbl15TXilTnJKUCltMVQg53BQOF1/C5toAaGrowkgksdBQ9H+SRL23g0HDmg9tvmxXw==}
     peerDependencies:
@@ -5754,12 +5985,52 @@ packages:
       react: 18.2.0
     dev: false
 
+  /@radix-ui/react-visually-hidden@1.0.3(@types/react-dom@18.2.9)(@types/react@18.2.24)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-D4w41yN5YRKtu464TLnByKzMDG/JlMPHtfZgQAu9v6mNakUqGUI9vUrfQKz8NK41VMm/xbZbh76NUTVtIYqOMA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.24.1
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.9)(@types/react@18.2.24)(react-dom@18.2.0)(react@18.2.0)
+      '@types/react': 18.2.24
+      '@types/react-dom': 18.2.9
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
   /@radix-ui/rect@1.0.1:
     resolution: {integrity: sha512-fyrgCaedtvMg9NK3en0pnOYJdtfwxUcNolezkNPUsoX57X8oQk+NkqcvzHXD2uKNij6GXmWU9NDru2IWjrO4BQ==}
     dependencies:
       '@babel/runtime': 7.24.1
     dev: false
 
+  /@reduxjs/toolkit@2.2.3(react-redux@9.1.1)(react@18.2.0):
+    resolution: {integrity: sha512-76dll9EnJXg4EVcI5YNxZA/9hSAmZsFqzMmNRHvIlzw2WS/twfcVX3ysYrWGJMClwEmChQFC4yRq74tn6fdzRA==}
+    peerDependencies:
+      react: ^16.9.0 || ^17.0.0 || ^18
+      react-redux: ^7.2.1 || ^8.1.3 || ^9.0.0
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-redux:
+        optional: true
+    dependencies:
+      immer: 10.0.4
+      react: 18.2.0
+      react-redux: 9.1.1(@types/react@18.2.24)(react@18.2.0)(redux@5.0.1)
+      redux: 5.0.1
+      redux-thunk: 3.1.0(redux@5.0.1)
+      reselect: 5.1.0
+    dev: false
+
   /@remix-run/router@1.6.2:
     resolution: {integrity: sha512-LzqpSrMK/3JBAVBI9u3NWtOhWNw5AMQfrUFYB0+bDHTSw17z++WJLsPsxAuK+oSddsxk4d7F/JcdDPM1M5YAhA==}
     engines: {node: '>=14'}
@@ -6632,6 +6903,10 @@ packages:
     resolution: {integrity: sha512-6WaYesThRMCl19iryMYP7/x2OVgCtbIVflDGFpWnb9irXI3UjYE4AzmYuiUKY1AJstGijoY+MgUszMgRxIYTYw==}
     dev: true
 
+  /@types/use-sync-external-store@0.0.3:
+    resolution: {integrity: sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==}
+    dev: false
+
   /@types/ws@8.5.10:
     resolution: {integrity: sha512-vmQSUcfalpIq0R9q7uTo2lXs6eGIpt9wtnLdMv9LVpIjCA/+ufZRozlVoVelIYixx1ugCBKDhn89vnsEGOCx9A==}
     dependencies:
@@ -7652,7 +7927,6 @@ packages:
 
   /asynckit@0.4.0:
     resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
-    dev: true
 
   /at-least-node@1.0.0:
     resolution: {integrity: sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==}
@@ -7725,7 +7999,6 @@ packages:
       proxy-from-env: 1.1.0
     transitivePeerDependencies:
       - debug
-    dev: true
 
   /axobject-query@3.2.1:
     resolution: {integrity: sha512-jsyHu61e6N4Vbz/v18DHwWYKK0bSWLqn47eeDSKPB7m8tqMHF9YJ+mhIk2lVteyZrY8tnSj/jHOv4YiTCuCJgg==}
@@ -8764,7 +9037,6 @@ packages:
     engines: {node: '>= 0.8'}
     dependencies:
       delayed-stream: 1.0.0
-    dev: true
 
   /commander@10.0.1:
     resolution: {integrity: sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==}
@@ -9446,6 +9718,10 @@ packages:
     resolution: {integrity: sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw==}
     dev: true
 
+  /date-fns@3.6.0:
+    resolution: {integrity: sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==}
+    dev: false
+
   /date-time@3.1.0:
     resolution: {integrity: sha512-uqCUKXE5q1PNBXjPqvwhwJf9SwMoAHBgWJ6DcrnS5o+W2JOiIILl0JEdVD8SGujrNS02GGxgwAg2PN2zONgtjg==}
     engines: {node: '>=6'}
@@ -9504,7 +9780,6 @@ packages:
     dependencies:
       ms: 2.1.2
       supports-color: 9.4.0
-    dev: true
 
   /decache@4.6.2:
     resolution: {integrity: sha512-2LPqkLeu8XWHU8qNCS3kcF6sCcb5zIzvWaAHYSvPfwhdd7mHuah29NssMzrTYyHN4F5oFy2ko9OBYxegtU0FEw==}
@@ -9651,7 +9926,6 @@ packages:
   /delayed-stream@1.0.0:
     resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
     engines: {node: '>=0.4.0'}
-    dev: true
 
   /delegates@1.0.0:
     resolution: {integrity: sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==}
@@ -9951,6 +10225,28 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /embla-carousel-react@8.0.2(react@18.2.0):
+    resolution: {integrity: sha512-RHe1GKLulOW8EDN+cJgbFbVVfRXcaLT2/89dyVw3ONGgVpZjD19wB87I1LUZ1aCzOSrTccx0PFSQanK4OOfGPA==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.1 || ^18.0.0
+    dependencies:
+      embla-carousel: 8.0.2
+      embla-carousel-reactive-utils: 8.0.2(embla-carousel@8.0.2)
+      react: 18.2.0
+    dev: false
+
+  /embla-carousel-reactive-utils@8.0.2(embla-carousel@8.0.2):
+    resolution: {integrity: sha512-nLZqDkQdO0hvOP49/dUwjkkepMnUXgIzhyRuDjwGqswpB4Ibnc5M+w7rSQQAM+uMj0cPaXnYOTlv8XD7I/zVNw==}
+    peerDependencies:
+      embla-carousel: 8.0.2
+    dependencies:
+      embla-carousel: 8.0.2
+    dev: false
+
+  /embla-carousel@8.0.2:
+    resolution: {integrity: sha512-bogsDO8xosuh/l3PxIvA5AMl3+BnRVAse9sDW/60amzj4MbGS5re4WH5eVEXiuH8G1/3G7QUAX2QNr3Yx8z5rA==}
+    dev: false
+
   /emittery@0.13.1:
     resolution: {integrity: sha512-DeWwawk6r5yR9jFgnDKYt4sLS0LmHJJi3ZOnb5/JdbYwj3nW+FxQnHIjhBKz8YLC7oRNPVM9NQ47I3CVx34eqQ==}
     engines: {node: '>=12'}
@@ -11397,7 +11693,6 @@ packages:
         optional: true
     dependencies:
       debug: 4.3.4(supports-color@9.4.0)
-    dev: true
 
   /for-each@0.3.3:
     resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==}
@@ -11470,7 +11765,6 @@ packages:
       asynckit: 0.4.0
       combined-stream: 1.0.8
       mime-types: 2.1.35
-    dev: true
 
   /formdata-polyfill@4.0.10:
     resolution: {integrity: sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==}
@@ -12328,6 +12622,10 @@ packages:
     dev: true
     optional: true
 
+  /immer@10.0.4:
+    resolution: {integrity: sha512-cuBuGK40P/sk5IzWa9QPUaAdvPHjkk1c+xYsd9oZw+YQQEV+10G0P5uMpGctZZKnyQ+ibRO08bD25nWLmYi2pw==}
+    dev: false
+
   /immutable@4.3.5:
     resolution: {integrity: sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw==}
     dev: true
@@ -14376,14 +14674,12 @@ packages:
   /mime-db@1.52.0:
     resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
     engines: {node: '>= 0.6'}
-    dev: true
 
   /mime-types@2.1.35:
     resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
     engines: {node: '>= 0.6'}
     dependencies:
       mime-db: 1.52.0
-    dev: true
 
   /mime@1.6.0:
     resolution: {integrity: sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==}
@@ -14582,7 +14878,6 @@ packages:
 
   /ms@2.1.2:
     resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
-    dev: true
 
   /ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
@@ -16332,7 +16627,6 @@ packages:
 
   /proxy-from-env@1.1.0:
     resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
-    dev: true
 
   /prr@1.0.1:
     resolution: {integrity: sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==}
@@ -16473,6 +16767,16 @@ packages:
       strip-json-comments: 2.0.1
     dev: true
 
+  /react-day-picker@8.10.1(date-fns@3.6.0)(react@18.2.0):
+    resolution: {integrity: sha512-TMx7fNbhLk15eqcMt+7Z7S2KF7mfTId/XJDjKE8f+IUcFn0l08/kI4FiYTL/0yuOLmEcbR4Fwe3GJf/NiiMnPA==}
+    peerDependencies:
+      date-fns: ^2.28.0 || ^3.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      date-fns: 3.6.0
+      react: 18.2.0
+    dev: false
+
   /react-dom@18.2.0(react@18.2.0):
     resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==}
     peerDependencies:
@@ -16482,6 +16786,15 @@ packages:
       react: 18.2.0
       scheduler: 0.23.0
 
+  /react-hook-form@7.51.3(react@18.2.0):
+    resolution: {integrity: sha512-cvJ/wbHdhYx8aviSWh28w9ImjmVsb5Y05n1+FW786vEZQJV5STNM0pW6ujS+oiBecb0ARBxJFyAnXj9+GHXACQ==}
+    engines: {node: '>=12.22.0'}
+    peerDependencies:
+      react: ^16.8.0 || ^17 || ^18
+    dependencies:
+      react: 18.2.0
+    dev: false
+
   /react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
     dev: true
@@ -16494,6 +16807,28 @@ packages:
     resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==}
     dev: true
 
+  /react-redux@9.1.1(@types/react@18.2.24)(react@18.2.0)(redux@5.0.1):
+    resolution: {integrity: sha512-5ynfGDzxxsoV73+4czQM56qF43vsmgJsO22rmAvU5tZT2z5Xow/A2uhhxwXuGTxgdReF3zcp7A80gma2onRs1A==}
+    peerDependencies:
+      '@types/react': ^18.2.25
+      react: ^18.0
+      react-native: '>=0.69'
+      redux: ^5.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      react-native:
+        optional: true
+      redux:
+        optional: true
+    dependencies:
+      '@types/react': 18.2.24
+      '@types/use-sync-external-store': 0.0.3
+      react: 18.2.0
+      redux: 5.0.1
+      use-sync-external-store: 1.2.0(react@18.2.0)
+    dev: false
+
   /react-refresh@0.10.0:
     resolution: {integrity: sha512-PgidR3wST3dDYKr6b4pJoqQFpPGNKDSCDx4cZoshjXipw3LzO7mG1My2pwEzz2JVkF+inx3xRpDeQLFQGH/hsQ==}
     engines: {node: '>=0.10.0'}
@@ -16676,6 +17011,18 @@ packages:
     engines: {node: '>= 12.13.0'}
     dev: true
 
+  /redux-thunk@3.1.0(redux@5.0.1):
+    resolution: {integrity: sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==}
+    peerDependencies:
+      redux: ^5.0.0
+    dependencies:
+      redux: 5.0.1
+    dev: false
+
+  /redux@5.0.1:
+    resolution: {integrity: sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==}
+    dev: false
+
   /regenerate-unicode-properties@10.1.1:
     resolution: {integrity: sha512-X007RyZLsCJVVrjgEFVpLUTZwyOZk3oiL75ZcuYjlIWd6rNJtOjkBwQc5AsRrpbKVkxN6sklw/k/9m2jJYOf8Q==}
     engines: {node: '>=4'}
@@ -16801,6 +17148,10 @@ packages:
     resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==}
     dev: true
 
+  /reselect@5.1.0:
+    resolution: {integrity: sha512-aw7jcGLDpSgNDyWBQLv2cedml85qd95/iszJjN988zX1t7AVRJi19d9kto5+W7oCfQ94gyo40dVbT6g2k4/kXg==}
+    dev: false
+
   /resolve-alpn@1.2.1:
     resolution: {integrity: sha512-0a1F4l73/ZFZOakJnQ3FvkJ2+gSTQWz/r2KE5OdDY0TxPm5h4GkqkWWfM47T7HsbnOtcJVEF4epCVy6u7Q3K+g==}
     dev: true
@@ -17945,7 +18296,6 @@ packages:
   /supports-color@9.4.0:
     resolution: {integrity: sha512-VL+lNrEoIXww1coLPOmiEmK/0sGigko5COxI09KzHc2VJXJsQ37UaQ+8quuxjDeA7+KnLGTWRyOXSLLR2Wb4jw==}
     engines: {node: '>=12'}
-    dev: true
 
   /supports-hyperlinks@2.3.0:
     resolution: {integrity: sha512-RpsAZlpWcDwOPQA22aCH4J0t7L8JmAvsCxfOSEwm7cQs3LshN36QaTkwd70DnBOXDWGssw2eUoc8CaRWT0XunA==}
@@ -18872,6 +19222,14 @@ packages:
       tslib: 2.6.2
     dev: false
 
+  /use-sync-external-store@1.2.0(react@18.2.0):
+    resolution: {integrity: sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      react: 18.2.0
+    dev: false
+
   /use@3.1.1:
     resolution: {integrity: sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==}
     engines: {node: '>=0.10.0'}
@@ -19658,3 +20016,7 @@ packages:
       compress-commons: 5.0.3
       readable-stream: 3.6.2
     dev: true
+
+  /zod@3.22.5:
+    resolution: {integrity: sha512-HqnGsCdVZ2xc0qWPLdO25WnseXThh0kEYKIdV5F/hTHO75hNZFp8thxSeHhiPrHZKrFTo1SOgkAj9po5bexZlw==}
+    dev: false
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 3172af6..5dafc6a 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -15,6 +15,7 @@
     "skipDefaultLibCheck": true,
     "baseUrl": ".",
     "paths": {
+      "@mfe-tutorial/data": ["packages/data/src/index.ts"],
       "@mfe-tutorial/ui": ["packages/ui/src/index.ts"],
       "info/InfoContainer": ["apps/info/src/app/app"]
     }