diff --git a/backend/src/bundles/chat/chat.controller.ts b/backend/src/bundles/chat/chat.controller.ts
index 915f5376b..768365b7f 100644
--- a/backend/src/bundles/chat/chat.controller.ts
+++ b/backend/src/bundles/chat/chat.controller.ts
@@ -10,7 +10,7 @@ import { HttpCode, HTTPMethod } from '~/common/http/http.js';
 import { type Logger } from '~/common/logger/logger.js';
 import { MAX_TOKEN } from '~/common/services/open-ai/libs/constants/constants.js';
 import {
-    ChatPath,
+    ChatApiPath,
     OpenAIRole,
 } from '~/common/services/open-ai/libs/enums/enums.js';
 import { type OpenAIService } from '~/common/services/open-ai/open-ai.service.js';
@@ -34,7 +34,7 @@ class ChatController extends BaseController {
         this.chatService = chatService;
 
         this.addRoute({
-            path: ChatPath.ROOT,
+            path: ChatApiPath.ROOT,
             method: HTTPMethod.POST,
             validation: {
                 body: textGenerationValidationSchema,
@@ -49,7 +49,7 @@ class ChatController extends BaseController {
         });
 
         this.addRoute({
-            path: ChatPath.ROOT,
+            path: ChatApiPath.ROOT,
             method: HTTPMethod.DELETE,
             handler: (options) =>
                 this.deleteSession(
diff --git a/backend/src/common/http/base-http-api.ts b/backend/src/common/http/base-http-api.ts
index 725b38d49..0836141a7 100644
--- a/backend/src/common/http/base-http-api.ts
+++ b/backend/src/common/http/base-http-api.ts
@@ -40,6 +40,8 @@ class BaseHttpApi implements HttpApi {
             contentType,
             payload = null,
             headers: customHeaders,
+            credentials = 'same-origin',
+            keepAlive = false,
         } = options;
 
         const baseHeaders = [
@@ -55,6 +57,8 @@ class BaseHttpApi implements HttpApi {
             method,
             headers,
             payload,
+            credentials,
+            keepAlive,
         });
 
         return this.checkResponse(response) as HttpApiResponse;
diff --git a/backend/src/common/http/types/http-api-options.type.ts b/backend/src/common/http/types/http-api-options.type.ts
index ff81f938b..841310a75 100644
--- a/backend/src/common/http/types/http-api-options.type.ts
+++ b/backend/src/common/http/types/http-api-options.type.ts
@@ -2,10 +2,15 @@ import { type ContentType, type ValueOf } from 'shared';
 
 import { type CustomHeader, type HttpOptions } from './types.js';
 
-type HttpApiOptions = Omit<HttpOptions, 'headers' | 'payload'> & {
+type HttpApiOptions = Omit<
+    HttpOptions,
+    'headers' | 'payload' | 'credentials' | 'keepAlive'
+> & {
     contentType: ValueOf<typeof ContentType>;
     headers?: CustomHeader;
     payload?: HttpOptions['payload'];
+    credentials?: HttpOptions['credentials'];
+    keepAlive?: HttpOptions['keepAlive'];
 };
 
 export { type HttpApiOptions };
diff --git a/backend/src/common/services/open-ai/libs/enums/enums.ts b/backend/src/common/services/open-ai/libs/enums/enums.ts
index b111ba763..034de1407 100644
--- a/backend/src/common/services/open-ai/libs/enums/enums.ts
+++ b/backend/src/common/services/open-ai/libs/enums/enums.ts
@@ -1,2 +1,2 @@
 export { OpenAIRole } from './open-ai-role.enum.js';
-export { ChatPath } from 'shared';
+export { ChatApiPath } from 'shared';
diff --git a/frontend/src/bundles/chat/chat-api.ts b/frontend/src/bundles/chat/chat-api.ts
new file mode 100644
index 000000000..5292d9167
--- /dev/null
+++ b/frontend/src/bundles/chat/chat-api.ts
@@ -0,0 +1,58 @@
+import { ApiPath, ContentType } from '~/bundles/common/enums/enums.js';
+import { type Http, HTTPMethod } from '~/framework/http/http.js';
+import { BaseHttpApi } from '~/framework/http-api/http-api.js';
+import { type Storage } from '~/framework/storage/storage.js';
+
+import { ChatApiPath } from './enums/enums.js';
+import {
+    type DeleteChatResponseDto,
+    type GenerateTextRequestDto,
+    type GenerateTextResponseDto,
+} from './types/types.js';
+
+type Constructor = {
+    baseUrl: string;
+    http: Http;
+    storage: Storage;
+};
+
+class ChatApi extends BaseHttpApi {
+    public constructor({ baseUrl, http, storage }: Constructor) {
+        super({ path: ApiPath.CHAT, baseUrl, http, storage });
+    }
+
+    public async sendMessage(
+        payload: GenerateTextRequestDto,
+    ): Promise<GenerateTextResponseDto> {
+        const response = await this.load(
+            this.getFullEndpoint(ChatApiPath.ROOT, {}),
+            {
+                method: HTTPMethod.POST,
+                contentType: ContentType.JSON,
+                payload: JSON.stringify(payload),
+                credentials: 'include',
+                hasAuth: true,
+            },
+        );
+
+        return await response.json<GenerateTextResponseDto>();
+    }
+
+    public async deleteChat(): Promise<DeleteChatResponseDto> {
+        const response = await this.load(
+            this.getFullEndpoint(ChatApiPath.ROOT, {}),
+            {
+                method: HTTPMethod.DELETE,
+                contentType: ContentType.JSON,
+                payload: JSON.stringify({}),
+                credentials: 'include',
+                keepAlive: true,
+                hasAuth: true,
+            },
+        );
+
+        return await response.json<DeleteChatResponseDto>();
+    }
+}
+
+export { ChatApi };
diff --git a/frontend/src/bundles/chat/chat.ts b/frontend/src/bundles/chat/chat.ts
new file mode 100644
index 000000000..b8eab0750
--- /dev/null
+++ b/frontend/src/bundles/chat/chat.ts
@@ -0,0 +1,15 @@
+import { config } from '~/framework/config/config.js';
+import { http } from '~/framework/http/http.js';
+import { storage } from '~/framework/storage/storage.js';
+
+import { ChatApi } from './chat-api.js';
+
+const chatApi = new ChatApi({
+    baseUrl: config.ENV.API.ORIGIN_URL,
+    storage,
+    http,
+});
+
+export { chatApi };
+export { type GenerateTextRequestDto } from './types/types.js';
+export { textGenerationValidationSchema } from './validation-schemas/validation-schemas.js';
diff --git a/frontend/src/bundles/chat/components/chat-body/chat-body.tsx b/frontend/src/bundles/chat/components/chat-body/chat-body.tsx
new file mode 100644
index 000000000..bb4c00dde
--- /dev/null
+++ b/frontend/src/bundles/chat/components/chat-body/chat-body.tsx
@@ -0,0 +1,27 @@
+import { MessageList } from '~/bundles/chat/components/message-list/message-list.js';
+import { type Message } from '~/bundles/chat/types/types.js';
+import { Box, Loader } from '~/bundles/common/components/components.js';
+import { DataStatus } from '~/bundles/common/enums/enums.js';
+import { useAppSelector } from '~/bundles/common/hooks/hooks.js';
+
+type Properties = {
+    messages: Message[];
+};
+
+const ChatBody: React.FC<Properties> = ({ messages }) => {
+    const { dataStatus } = useAppSelector(({ chat }) => ({
+        dataStatus: chat.dataStatus,
+    }));
+
+    return (
+        <Box minHeight="400px" maxHeight="400px" overflowY="auto" mb="2">
+            {dataStatus === DataStatus.PENDING ? (
+                <Loader />
+            ) : (
+                <MessageList messages={messages} />
+            )}
+        </Box>
+    );
+};
+
+export { ChatBody };
diff --git a/frontend/src/bundles/chat/components/chat-footer/chat-footer.tsx b/frontend/src/bundles/chat/components/chat-footer/chat-footer.tsx
new file mode 100644
index 000000000..11d6068f6
--- /dev/null
+++ b/frontend/src/bundles/chat/components/chat-footer/chat-footer.tsx
@@ -0,0 +1,56 @@
+import {
+    type GenerateTextRequestDto,
+    textGenerationValidationSchema,
+} from '~/bundles/chat/chat.js';
+import {
+    Button,
+    Flex,
+    FormProvider,
+    Input,
+} from '~/bundles/common/components/components.js';
+import { useAppForm } from '~/bundles/common/hooks/hooks.js';
+
+import { DEFAULT_CHAT_FORM_PAYLOAD } from './constants/constants.js';
+
+type Properties = {
+    onSendMessage: (payload: GenerateTextRequestDto) => void;
+};
+
+const ChatFooter: React.FC<Properties> = ({ onSendMessage }) => {
+    const form = useAppForm<GenerateTextRequestDto>({
+        initialValues: DEFAULT_CHAT_FORM_PAYLOAD,
+        validationSchema: textGenerationValidationSchema,
+        onSubmit: (data: GenerateTextRequestDto, { resetForm }) => {
+            onSendMessage(data);
+            resetForm();
+        },
+    });
+
+    const { handleSubmit, values } = form;
+
+    return (
+        <FormProvider value={form}>
+            <form onSubmit={handleSubmit}>
+                <Flex alignItems={'flex-start'} w={'100%'} gap={5}>
+                    <Input
+                        type="text"
+                        label=""
+                        placeholder="Send a message"
+                        name="message"
+                        value={values.message}
+                        width="100%"
+                    />
+                    <Button
+                        type="submit"
+                        label="Send"
+                        size="md"
+                        isDisabled={values.message.trim().length === 0}
+                        width="100px"
+                    />
+                </Flex>
+            </form>
+        </FormProvider>
+    );
+};
+
+export { ChatFooter };
diff --git a/frontend/src/bundles/chat/components/chat-footer/constants/constants.ts b/frontend/src/bundles/chat/components/chat-footer/constants/constants.ts
new file mode 100644
index 000000000..91301675a
--- /dev/null
+++ b/frontend/src/bundles/chat/components/chat-footer/constants/constants.ts
@@ -0,0 +1,7 @@
+import { type GenerateTextRequestDto } from '~/bundles/chat/types/types.js';
+
+const DEFAULT_CHAT_FORM_PAYLOAD: GenerateTextRequestDto = {
+    message: '',
+};
+
+export { DEFAULT_CHAT_FORM_PAYLOAD };
diff --git a/frontend/src/bundles/chat/components/chat-header/chat-header.tsx b/frontend/src/bundles/chat/components/chat-header/chat-header.tsx
new file mode 100644
index 000000000..2a38cd917
--- /dev/null
+++ b/frontend/src/bundles/chat/components/chat-header/chat-header.tsx
@@ -0,0 +1,25 @@
+import { Box, Heading, Text } from '~/bundles/common/components/components.js';
+
+type Properties = {
+    title: string;
+    comment: string;
+};
+
+const ChatHeader: React.FC<Properties> = ({ title, comment }) => {
+    return (
+        <Box
+            bg="background.600"
+            p="20px"
+            color="white"
+            borderTopLeftRadius="xl"
+            borderTopRightRadius="xl"
+        >
+            <Heading variant="H2" mb={2}>
+                {title}
+            </Heading>
+            <Text variant="bodySmall">{comment}</Text>
+        </Box>
+    );
+};
+
+export { ChatHeader };
diff --git a/frontend/src/bundles/chat/components/chat/chat.tsx b/frontend/src/bundles/chat/components/chat/chat.tsx
new file mode 100644
index 000000000..fd6e81914
--- /dev/null
+++ b/frontend/src/bundles/chat/components/chat/chat.tsx
@@ -0,0 +1,34 @@
+import { ChatBody } from '~/bundles/chat/components/chat-body/chat-body.js';
+import { ChatFooter } from '~/bundles/chat/components/chat-footer/chat-footer.js';
+import { ChatHeader } from '~/bundles/chat/components/chat-header/chat-header.js';
+import {
+    type GenerateTextRequestDto,
+    type Message,
+} from '~/bundles/chat/types/types.js';
+import { Box } from '~/bundles/common/components/components.js';
+
+type Properties = {
+    messages: Message[];
+    onSendMessage: (payload: GenerateTextRequestDto) => void;
+    headerTitle: string;
+    headerComment: string;
+};
+
+const Chat: React.FC<Properties> = ({
+    messages,
+    onSendMessage,
+    headerTitle,
+    headerComment,
+}) => {
+    return (
+        <Box>
+            <ChatHeader title={headerTitle} comment={headerComment} />
+            <Box p="10">
+                <ChatBody messages={messages} />
+                <ChatFooter onSendMessage={onSendMessage} />
+            </Box>
+        </Box>
+    );
+};
+
+export { Chat };
diff --git a/frontend/src/bundles/chat/components/components.ts b/frontend/src/bundles/chat/components/components.ts
new file mode 100644
index 000000000..a0466bb29
--- /dev/null
+++ b/frontend/src/bundles/chat/components/components.ts
@@ -0,0 +1 @@
+export { Chat } from './chat/chat.js';
diff --git a/frontend/src/bundles/chat/components/message-box/message-box.tsx b/frontend/src/bundles/chat/components/message-box/message-box.tsx
new file mode 100644
index 000000000..682c9333e
--- /dev/null
+++ b/frontend/src/bundles/chat/components/message-box/message-box.tsx
@@ -0,0 +1,29 @@
+import { MessageSender } from '~/bundles/chat/enums/enums.js';
+import { type Message } from '~/bundles/chat/types/types.js';
+import { Box, Flex, Text } from '~/bundles/common/components/components.js';
+
+import styles from './styles.module.css';
+
+type Properties = {
+    message: Message;
+};
+
+const MessageBox: React.FC<Properties> = ({ message }) => {
+    const { sender, text } = message;
+
+    return (
+        <Box
+            className={`${styles['message-box__container']} ${styles[sender === MessageSender.USER ? 'message-box__container--user' : 'message-box__container--ai']}`}
+        >
+            <Flex
+                className={`${styles['message-box']} ${styles[sender === MessageSender.USER ? 'message-box--user' : 'message-box--ai']}`}
+            >
+                <Text color="black" bg="background.50" p={3} borderRadius="md">
+                    {text}
+                </Text>
+            </Flex>
+        </Box>
+    );
+};
+
+export { MessageBox };
diff --git a/frontend/src/bundles/chat/components/message-box/styles.module.css b/frontend/src/bundles/chat/components/message-box/styles.module.css
new file mode 100644
index 000000000..48d60297e
--- /dev/null
+++ b/frontend/src/bundles/chat/components/message-box/styles.module.css
@@ -0,0 +1,22 @@
+.message-box__container {
+    width: 100%;
+}
+.message-box__container--user {
+    align-self: flex-start;
+}
+.message-box__container--ai {
+    align-self: flex-end;
+}
+.message-box {
+    flex-direction: column;
+}
+.message-box--user {
+    align-items: flex-end;
+    margin-left: 50px;
+    margin-right: 10px;
+}
+.message-box--ai {
+    align-items: flex-start;
+    margin-left: 10px;
+    margin-right: 50px;
+}
diff --git a/frontend/src/bundles/chat/components/message-list/message-list.tsx b/frontend/src/bundles/chat/components/message-list/message-list.tsx
new file mode 100644
index 000000000..b880f88b4
--- /dev/null
+++ b/frontend/src/bundles/chat/components/message-list/message-list.tsx
@@ -0,0 +1,70 @@
+import { MessageBox } from '~/bundles/chat/components/message-box/message-box.js';
+import { MessageSender } from '~/bundles/chat/enums/enums.js';
+import { type Message, type MessageGroup } from '~/bundles/chat/types/types.js';
+import { Flex, VStack } from '~/bundles/common/components/components.js';
+import { useAppSelector, useMemo } from '~/bundles/common/hooks/hooks.js';
+import { UserAvatar } from '~/bundles/users/components/components.js';
+
+import styles from './styles.module.css';
+
+type Properties = {
+    messages: Message[];
+};
+
+const MessageList: React.FC<Properties> = ({ messages }) => {
+    const user = useAppSelector(({ auth }) => auth.user);
+    const groupedMessages = useMemo(() => {
+        const groupedMessages: MessageGroup[] = [];
+        let currentGroup: MessageGroup | null = null;
+
+        for (const message of messages) {
+            const { sender } = message;
+            if (!currentGroup || currentGroup.sender !== sender) {
+                currentGroup = { sender, messages: [message] };
+                groupedMessages.push(currentGroup);
+            } else {
+                currentGroup.messages.push(message);
+            }
+        }
+
+        return groupedMessages;
+    }, [messages]);
+
+    return (
+        <VStack spacing={4} align="stretch" p={4} h="400px" overflowY="auto">
+            {groupedMessages.map(
+                ({ sender, messages }: MessageGroup, groupIndex: number) => {
+                    return (
+                        <Flex
+                            key={groupIndex}
+                            className={`${styles['message-list']} ${styles[sender === MessageSender.USER ? 'message-list--user' : 'message-list--ai']}`}
+                        >
+                            <UserAvatar
+                                username={
+                                    sender === MessageSender.USER
+                                        ? user?.fullName
+                                        : 'Artificial Intelligence'
+                                }
+                            />
+                            <VStack
+                                spacing={2}
+                                className={`${styles['message-group-list']} ${styles[sender === MessageSender.USER ? 'message-group-list--user' : 'message-group-list--ai']}`}
+                            >
+                                {messages.map(
+                                    (message: Message, index: number) => (
+                                        <MessageBox
+                                            key={index}
+                                            message={message}
+                                        />
+                                    ),
+                                )}
+                            </VStack>
+                        </Flex>
+                    );
+                },
+            )}
+        </VStack>
+    );
+};
+
+export { MessageList };
diff --git a/frontend/src/bundles/chat/components/message-list/styles.module.css b/frontend/src/bundles/chat/components/message-list/styles.module.css
new file mode 100644
index 000000000..bedc0c836
--- /dev/null
+++ b/frontend/src/bundles/chat/components/message-list/styles.module.css
@@ -0,0 +1,18 @@
+.message-list {
+    align-items: flex-start;
+}
+.message-list--user {
+    flex-direction: row-reverse;
+}
+.message-list--ai {
+    flex-direction: row;
+}
+.message-group-list {
+    width: max-content;
+}
+.message-group-list--user {
+    align-items: flex-end;
+}
+.message-group-list--ai {
+    align-items: flex-start;
+}
diff --git a/frontend/src/bundles/chat/enums/enums.ts b/frontend/src/bundles/chat/enums/enums.ts
new file mode 100644
index 000000000..be1954c1b
--- /dev/null
+++ b/frontend/src/bundles/chat/enums/enums.ts
@@ -0,0 +1,2 @@
+export { MessageSender } from './message-sender.js';
+export { ChatApiPath } from 'shared';
diff --git a/frontend/src/bundles/chat/enums/message-sender.ts b/frontend/src/bundles/chat/enums/message-sender.ts
new file mode 100644
index 000000000..c46885141
--- /dev/null
+++ b/frontend/src/bundles/chat/enums/message-sender.ts
@@ -0,0 +1,6 @@
+const MessageSender = {
+    USER: 'USER',
+    AI: 'AI',
+} as const;
+
+export { MessageSender };
diff --git a/frontend/src/bundles/chat/hooks/hooks.ts b/frontend/src/bundles/chat/hooks/hooks.ts
new file mode 100644
index 000000000..7fd5500d3
--- /dev/null
+++ b/frontend/src/bundles/chat/hooks/hooks.ts
@@ -0,0 +1 @@
+export { useChatCleanup } from './use-chat-cleanup/use-chat-cleanup.hook.js';
diff --git a/frontend/src/bundles/chat/hooks/use-chat-cleanup/use-chat-cleanup.hook.ts b/frontend/src/bundles/chat/hooks/use-chat-cleanup/use-chat-cleanup.hook.ts
new file mode 100644
index 000000000..3ae332133
--- /dev/null
+++ b/frontend/src/bundles/chat/hooks/use-chat-cleanup/use-chat-cleanup.hook.ts
@@ -0,0 +1,39 @@
+import { actions as chatActions } from '~/bundles/chat/store/chat.js';
+import {
+    useAppDispatch,
+    useCallback,
+    useEffect,
+} from '~/bundles/common/hooks/hooks.js';
+
+type Properties = {
+    onModalChatClose: () => void;
+};
+
+type ReturnValue = {
+    handleCloseChat: () => void;
+};
+
+const useChatCleanup = ({ onModalChatClose }: Properties): ReturnValue => {
+    const dispatch = useAppDispatch();
+
+    const handleDeleteChat = useCallback(() => {
+        void dispatch(chatActions.deleteChat());
+    }, [dispatch]);
+
+    const handleCloseChat = useCallback(() => {
+        onModalChatClose();
+        handleDeleteChat();
+    }, [handleDeleteChat, onModalChatClose]);
+
+    useEffect(() => {
+        window.addEventListener('beforeunload', handleDeleteChat);
+
+        return () => {
+            window.removeEventListener('beforeunload', handleDeleteChat);
+        };
+    }, [handleDeleteChat]);
+
+    return { handleCloseChat };
+};
+
+export { useChatCleanup };
diff --git a/frontend/src/bundles/chat/pages/chat-modal.tsx b/frontend/src/bundles/chat/pages/chat-modal.tsx
new file mode 100644
index 000000000..7001cfcd9
--- /dev/null
+++ b/frontend/src/bundles/chat/pages/chat-modal.tsx
@@ -0,0 +1,60 @@
+import { Chat } from '~/bundles/chat/components/components.js';
+import { useChatCleanup } from '~/bundles/chat/hooks/hooks.js';
+import { actions as chatActions } from '~/bundles/chat/store/chat.js';
+import { type GenerateTextRequestDto } from '~/bundles/chat/types/types.js';
+import {
+    Modal,
+    ModalCloseButton,
+    ModalContent,
+    ModalOverlay,
+} from '~/bundles/common/components/components.js';
+import {
+    useAppDispatch,
+    useAppSelector,
+    useCallback,
+} from '~/bundles/common/hooks/hooks.js';
+
+type Properties = {
+    isChatOpen: boolean;
+    onModalChatClose: () => void;
+};
+
+const ChatModal: React.FC<Properties> = ({ isChatOpen, onModalChatClose }) => {
+    const dispatch = useAppDispatch();
+    const { messages } = useAppSelector(({ chat }) => ({
+        messages: chat.messages,
+    }));
+
+    const handleSendMessage = useCallback(
+        (payload: GenerateTextRequestDto) => {
+            void dispatch(chatActions.sendMessage(payload));
+        },
+        [dispatch],
+    );
+
+    const { handleCloseChat } = useChatCleanup({ onModalChatClose });
+
+    return (
+        <>
+            <Modal
+                closeOnOverlayClick={false}
+                isOpen={isChatOpen}
+                onClose={handleCloseChat}
+                size={'5xl'}
+            >
+                <ModalOverlay />
+                <ModalContent borderRadius={'xl'}>
+                    <ModalCloseButton color="white" />
+                    <Chat
+                        messages={messages}
+                        onSendMessage={handleSendMessage}
+                        headerTitle="GPT4 Script Writer"
+                        headerComment="Your secret to crafting compelling scripts effortlessly!"
+                    />
+                </ModalContent>
+            </Modal>
+        </>
+    );
+};
+
+export { ChatModal };
diff --git a/frontend/src/bundles/chat/store/actions.ts b/frontend/src/bundles/chat/store/actions.ts
new file mode 100644
index 000000000..b935b1eeb
--- /dev/null
+++ b/frontend/src/bundles/chat/store/actions.ts
@@ -0,0 +1,32 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+
+import {
+    type DeleteChatResponseDto,
+    type GenerateTextRequestDto,
+    type GenerateTextResponseDto,
+} from '~/bundles/chat/types/types.js';
+import { type AsyncThunkConfig } from '~/bundles/common/types/types.js';
+
+import { name as sliceName } from './slice.js';
+
+const sendMessage = createAsyncThunk<
+    GenerateTextResponseDto,
+    GenerateTextRequestDto,
+    AsyncThunkConfig
+>(`${sliceName}/send-message`, (sendMessagePayload, { extra }) => {
+    const { chatApi } = extra;
+
+    return chatApi.sendMessage(sendMessagePayload);
+});
+
+const deleteChat = createAsyncThunk<
+    DeleteChatResponseDto,
+    undefined,
+    AsyncThunkConfig
+>(`${sliceName}/delete-chat`, (_, { extra }) => {
+    const { chatApi } = extra;
+
+    return chatApi.deleteChat();
+});
+
+export { deleteChat, sendMessage };
diff --git a/frontend/src/bundles/chat/store/chat.ts b/frontend/src/bundles/chat/store/chat.ts
new file mode 100644
index 000000000..04bbff815
--- /dev/null
+++ b/frontend/src/bundles/chat/store/chat.ts
@@ -0,0 +1,11 @@
+import { deleteChat, sendMessage } from './actions.js';
+import { actions } from './slice.js';
+
+const allActions = {
+    ...actions,
+    sendMessage,
+    deleteChat,
+};
+
+export { allActions as actions };
+export { reducer } from './slice.js';
diff --git a/frontend/src/bundles/chat/store/slice.ts b/frontend/src/bundles/chat/store/slice.ts
new file mode 100644
index 000000000..937b925d6
--- /dev/null
+++ b/frontend/src/bundles/chat/store/slice.ts
@@ -0,0 +1,71 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+import { MessageSender } from '~/bundles/chat/enums/enums.js';
+import {
+    type GenerateTextRequestDto,
+    type Message,
+} from '~/bundles/chat/types/types.js';
+import { DataStatus } from '~/bundles/common/enums/enums.js';
+import { type ValueOf } from '~/bundles/common/types/types.js';
+
+import { deleteChat, sendMessage } from './actions.js';
+
+type State = {
+    messages: Message[];
+    dataStatus: ValueOf<typeof DataStatus>;
+};
+
+const initialState: State = {
+    messages: [],
+    dataStatus: DataStatus.IDLE,
+};
+
+const { reducer, actions, name } = createSlice({
+    initialState,
+    name: 'chat',
+    reducers: {},
+    extraReducers(builder) {
+        builder.addCase(sendMessage.pending, (state) => {
+            state.dataStatus = DataStatus.PENDING;
+        });
+        builder.addCase(
+            sendMessage.fulfilled,
+            (state, { payload, meta: { arg } }) => {
+                const requestPayload: GenerateTextRequestDto = arg;
+
+                state.messages.push(
+                    {
+                        sender: MessageSender.USER,
+                        text: requestPayload.message,
+                    },
+                    {
+                        sender: MessageSender.AI,
+                        text: payload.generatedText,
+                    },
+                );
+                state.dataStatus = DataStatus.FULFILLED;
+            },
+        );
+        builder.addCase(sendMessage.rejected, (state, { meta: { arg } }) => {
+            const requestPayload: GenerateTextRequestDto = arg;
+
+            state.messages.push({
+                sender: MessageSender.USER,
+                text: requestPayload.message,
+            });
+            state.dataStatus = DataStatus.REJECTED;
+        });
+        builder.addCase(deleteChat.pending, (state) => {
+            state.dataStatus = DataStatus.PENDING;
+        });
+        builder.addCase(deleteChat.fulfilled, (state) => {
+            state.messages = [];
+            state.dataStatus = DataStatus.FULFILLED;
+        });
+        builder.addCase(deleteChat.rejected, (state) => {
+            state.dataStatus = DataStatus.REJECTED;
+        });
+    },
+});
+
+export { actions, name, reducer };
diff --git a/frontend/src/bundles/chat/types/message-group.ts b/frontend/src/bundles/chat/types/message-group.ts
new file mode 100644
index 000000000..ff6e61d91
--- /dev/null
+++ b/frontend/src/bundles/chat/types/message-group.ts
@@ -0,0 +1,11 @@
+import { type MessageSender } from '~/bundles/chat/enums/message-sender.js';
+import { type ValueOf } from '~/bundles/common/types/types.js';
+
+import { type Message } from './message.js';
+
+type MessageGroup = {
+    sender: ValueOf<typeof MessageSender>;
+    messages: Message[];
+};
+
+export { type MessageGroup };
diff --git a/frontend/src/bundles/chat/types/message.ts b/frontend/src/bundles/chat/types/message.ts
new file mode 100644
index 000000000..cdc8abc6b
--- /dev/null
+++ b/frontend/src/bundles/chat/types/message.ts
@@ -0,0 +1,9 @@
+import { type MessageSender } from '~/bundles/chat/enums/enums.js';
+import { type ValueOf } from '~/bundles/common/types/types.js';
+
+type Message = {
+    sender: ValueOf<typeof MessageSender>;
+    text: string;
+};
+
+export { type Message };
diff --git a/frontend/src/bundles/chat/types/types.ts b/frontend/src/bundles/chat/types/types.ts
new file mode 100644
index 000000000..0b37a5246
--- /dev/null
+++ b/frontend/src/bundles/chat/types/types.ts
@@ -0,0 +1,7 @@
+export { type Message } from './message.js';
+export { type MessageGroup } from './message-group.js';
+export {
+    type DeleteChatResponseDto,
+    type GenerateTextRequestDto,
+    type GenerateTextResponseDto,
+} from 'shared';
diff --git a/frontend/src/bundles/chat/validation-schemas/validation-schemas.ts b/frontend/src/bundles/chat/validation-schemas/validation-schemas.ts
new file mode 100644
index 000000000..b7a3ade52
--- /dev/null
+++ b/frontend/src/bundles/chat/validation-schemas/validation-schemas.ts
@@ -0,0 +1 @@
+export { textGenerationValidationSchema } from 'shared';
diff --git a/frontend/src/bundles/common/components/components.ts b/frontend/src/bundles/common/components/components.ts
index 77ff7d3c6..bfad19c75 100644
--- a/frontend/src/bundles/common/components/components.ts
+++ b/frontend/src/bundles/common/components/components.ts
@@ -40,6 +40,10 @@ export {
     MenuButton,
     MenuItem,
     MenuList,
+    Modal,
+    ModalCloseButton,
+    ModalContent,
+    ModalOverlay,
     SimpleGrid,
     Slider,
     SliderFilledTrack,
@@ -49,6 +53,10 @@ export {
     Spinner,
     Stack,
     Tab,
+    TabList,
+    TabPanel,
+    TabPanels,
+    Tabs,
     Text,
     Tooltip,
     VStack,
diff --git a/frontend/src/bundles/common/components/input/input.tsx b/frontend/src/bundles/common/components/input/input.tsx
index 4e986ab8a..a434fb9e6 100644
--- a/frontend/src/bundles/common/components/input/input.tsx
+++ b/frontend/src/bundles/common/components/input/input.tsx
@@ -1,4 +1,5 @@
 import {
+    type ChakraProps as ChakraProperties,
     FormControl,
     FormErrorMessage,
     FormLabel,
@@ -19,7 +20,8 @@ type Properties<T extends FormValues> = {
     required?: boolean;
     placeholder?: string;
     icon?: 'right' | 'none';
-};
+    value?: string | number | undefined;
+} & ChakraProperties;
 
 const Input = <T extends FormValues>({
     label,
@@ -28,20 +30,24 @@ const Input = <T extends FormValues>({
     required = false,
     placeholder = '',
     icon = 'none',
+    value = undefined,
+    ...ChakraProperties
 }: Properties<T>): JSX.Element => {
     const { field, error, isValid } = useFormField({ name });
 
     return (
         <FormControl isInvalid={!isValid} isRequired={required}>
-            <FormLabel htmlFor={name}>{label}</FormLabel>
+            {label && <FormLabel htmlFor={name}>{label}</FormLabel>}
             <Field
                 {...field}
                 id={name}
                 type={type}
                 placeholder={placeholder}
                 error={error}
+                value={value}
                 style={{ paddingRight: icon === 'right' ? '40px' : 0 }}
                 as={LibraryInput}
+                {...ChakraProperties}
             />
             <FormErrorMessage>{error}</FormErrorMessage>
         </FormControl>
diff --git a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-form/generate-script-form.tsx b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-form/generate-script-form.tsx
index 2a5c3660d..2eb7cbbb4 100644
--- a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-form/generate-script-form.tsx
+++ b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-form/generate-script-form.tsx
@@ -1,3 +1,4 @@
+import { MessageSender } from '~/bundles/chat/enums/enums.js';
 import {
     Button,
     FormProvider,
@@ -6,7 +7,12 @@ import {
     Textarea,
     VStack,
 } from '~/bundles/common/components/components.js';
-import { useAppForm } from '~/bundles/common/hooks/hooks.js';
+import { DataStatus } from '~/bundles/common/enums/enums.js';
+import {
+    useAppForm,
+    useAppSelector,
+    useCallback,
+} from '~/bundles/common/hooks/hooks.js';
 import {
     type GenerateVideoScriptRequestDto,
     generateVideoScriptValidationSchema,
@@ -20,6 +26,12 @@ type Properties = {
 };
 
 const GenerateScriptForm: React.FC<Properties> = ({ onSubmit }) => {
+    const { messages, dataStatus } = useAppSelector(({ chat }) => ({
+        messages: chat.messages.filter(
+            (message) => message.sender === MessageSender.AI,
+        ),
+        dataStatus: chat.dataStatus,
+    }));
     const form = useAppForm<GenerateVideoScriptRequestDto>({
         initialValues: DEFAULT_GENERATE_SCRIPT_PAYLOAD,
         validationSchema: generateVideoScriptValidationSchema,
@@ -28,6 +40,21 @@ const GenerateScriptForm: React.FC<Properties> = ({ onSubmit }) => {
 
     const { handleSubmit, values } = form;
 
+    const getButtonLabel = useCallback(() => {
+        if (dataStatus === DataStatus.PENDING) {
+            return 'Stop';
+        }
+
+        return messages?.length > 0 ? 'Re-Generate' : 'Generate script';
+    }, [dataStatus, messages]);
+
+    const isSubmitButtonDisabled = useCallback(() => {
+        return (
+            dataStatus === DataStatus.PENDING ||
+            values.topic.trim().length === 0
+        );
+    }, [dataStatus, values]);
+
     return (
         <FormProvider value={form}>
             <form onSubmit={handleSubmit}>
@@ -61,9 +88,9 @@ const GenerateScriptForm: React.FC<Properties> = ({ onSubmit }) => {
                     />
                     <Button
                         type="submit"
-                        label="Generate script"
+                        label={getButtonLabel()}
                         margin-top="50px"
-                        isDisabled={values.topic.trim().length === 0}
+                        isDisabled={isSubmitButtonDisabled()}
                     />
                 </VStack>
             </form>
diff --git a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder-content/generate-script-placeholder-content.tsx b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder-content/generate-script-placeholder-content.tsx
new file mode 100644
index 000000000..ede63c219
--- /dev/null
+++ b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder-content/generate-script-placeholder-content.tsx
@@ -0,0 +1,29 @@
+import { type ComponentWithAs, type IconProps } from '@chakra-ui/react';
+
+import { Flex, Icon, Text } from '~/bundles/common/components/components.js';
+
+import styles from './styles.module.css';
+
+type Properties = {
+    message: string;
+    icon?: ComponentWithAs<'svg', IconProps>;
+};
+
+const GenerateScriptPlaceholderContent: React.FC<Properties> = ({
+    message,
+    icon,
+}) => (
+    <Flex className={styles['scriptPlaceholderContentContainer']}>
+        {icon && (
+            <Icon
+                as={icon}
+                className={styles['scriptPlaceholderContentIcon']}
+            />
+        )}
+        <Text className={styles['scriptPlaceholderContentText']} variant="H3">
+            {message}
+        </Text>
+    </Flex>
+);
+
+export { GenerateScriptPlaceholderContent };
diff --git a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder-content/styles.module.css b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder-content/styles.module.css
new file mode 100644
index 000000000..ebe749999
--- /dev/null
+++ b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder-content/styles.module.css
@@ -0,0 +1,20 @@
+.scriptPlaceholderContentContainer {
+    gap: 10px;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+}
+.scriptPlaceholderContentIcon {
+    color: var(--chakra-colors-brand-secondary-300);
+    opacity: 0.5;
+    font-size: 2rem;
+}
+.scriptPlaceholderContentText {
+    color: var(--chakra-colors-gray-400);
+    width: 40%;
+    min-width: 175px;
+    text-align: center;
+    font-style: italic;
+}
diff --git a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder/generate-script-placeholder.tsx b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder/generate-script-placeholder.tsx
index 621cc6e3c..8a11392e3 100644
--- a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder/generate-script-placeholder.tsx
+++ b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder/generate-script-placeholder.tsx
@@ -1,20 +1,56 @@
-import { Icon, Text, VStack } from '@chakra-ui/react';
-
+import { Box, Loader, VStack } from '~/bundles/common/components/components.js';
+import { DataStatus } from '~/bundles/common/enums/data-status.enum.js';
+import { useAppSelector } from '~/bundles/common/hooks/hooks.js';
 import { IconName } from '~/bundles/common/icons/icons.js';
+import { type VideoScript } from '~/bundles/common/types/types.js';
 
+import { GenerateScriptPlaceholderContent } from '../generate-script-placeholder-content/generate-script-placeholder-content.js';
+import { GenerateScriptScene } from '../generate-script-scene/generate-script-scene.js';
 import styles from './styles.module.css';
 
-const GenerateScriptPlaceholder: React.FC = () => {
+type Properties = {
+    videoScripts: VideoScript[];
+};
+
+const GenerateScriptPlaceholder: React.FC<Properties> = ({ videoScripts }) => {
+    const { dataStatus } = useAppSelector(({ chat }) => ({
+        dataStatus: chat.dataStatus,
+    }));
+
+    const renderLoadingState = (): React.ReactNode => (
+        <Box mt="100px">
+            <Loader />
+        </Box>
+    );
+
+    const renderEmptyState = (): React.ReactNode => (
+        <GenerateScriptPlaceholderContent
+            message="Here you will see your generated script"
+            icon={IconName.SCROLL}
+        />
+    );
+
+    const renderScripts = (): React.ReactNode => (
+        <>
+            {videoScripts.map((videoScript, index) => (
+                <GenerateScriptScene key={index} videoScript={videoScript} />
+            ))}
+        </>
+    );
+
+    const getContent = (): React.ReactNode => {
+        if (dataStatus === DataStatus.PENDING) {
+            return renderLoadingState();
+        }
+        if (videoScripts.length === 0) {
+            return renderEmptyState();
+        }
+        return renderScripts();
+    };
+
     return (
         <VStack className={styles['scriptPlaceholderContainer']}>
-            <Icon
-                as={IconName.SCROLL}
-                className={styles['scriptPlaceholderIcon']}
-                boxSize={10}
-            />
-            <Text className={styles['scriptPlaceholderText']} variant="H3">
-                Here you will see your generated script
-            </Text>
+            {getContent()}
         </VStack>
     );
 };
diff --git a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder/styles.module.css b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder/styles.module.css
index e7717db29..81193edfb 100644
--- a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder/styles.module.css
+++ b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder/styles.module.css
@@ -1,19 +1,9 @@
 .scriptPlaceholderContainer {
     width: 100%;
+    height: 100vh;
+    min-height: 480px;
+    max-height: 480px;
+    overflow-y: auto;
     padding: 40px;
     gap: 10px;
 }
-
-.scriptPlaceholderIcon {
-    color: var(--chakra-colors-brand-secondary-300);
-    opacity: 0.5;
-    font-size: 2rem;
-}
-
-.scriptPlaceholderText {
-    color: var(--chakra-colors-gray-400);
-    width: 40%;
-    min-width: 175px;
-    text-align: center;
-    font-style: italic;
-}
diff --git a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-scene/generate-script-scene.tsx b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-scene/generate-script-scene.tsx
new file mode 100644
index 000000000..545875b85
--- /dev/null
+++ b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-scene/generate-script-scene.tsx
@@ -0,0 +1,39 @@
+import { Box, Heading } from '~/bundles/common/components/components.js';
+import { useCallback, useState } from '~/bundles/common/hooks/hooks.js';
+import { type VideoScript } from '~/bundles/common/types/types.js';
+
+import styles from './styles.module.css';
+
+type Properties = {
+    videoScript: VideoScript;
+};
+
+const GenerateScriptScene: React.FC<Properties> = ({ videoScript }) => {
+    const { title, description } = videoScript;
+    const [animationDone, setAnimationDone] = useState(false);
+
+    const handleAnimationEnd = useCallback(() => {
+        setAnimationDone(true);
+    }, [setAnimationDone]);
+
+    return (
+        <Box mb="10" width="100%">
+            <Heading as="h4" variant="H4" color="typography.600">
+                {title}
+            </Heading>
+            <Box
+                as="p"
+                className={
+                    animationDone
+                        ? styles['typing-effect--done']
+                        : styles['typing-effect']
+                }
+                onAnimationEnd={handleAnimationEnd}
+            >
+                {description}
+            </Box>
+        </Box>
+    );
+};
+
+export { GenerateScriptScene };
diff --git a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-scene/styles.module.css b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-scene/styles.module.css
new file mode 100644
index 000000000..d127cf474
--- /dev/null
+++ b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-scene/styles.module.css
@@ -0,0 +1,32 @@
+.typing-effect {
+    overflow: hidden;
+    border-right: 2px solid black;
+    width: 0;
+    animation:
+        typing 3s steps(30, end) forwards,
+        blink-caret 0.75s step-end infinite;
+}
+.typing-effect--done {
+    white-space: normal;
+    overflow: visible;
+    border-right: none;
+}
+
+@keyframes typing {
+    from {
+        width: 0;
+    }
+    to {
+        width: 100%;
+    }
+}
+
+@keyframes blink-caret {
+    from,
+    to {
+        border-color: transparent;
+    }
+    50% {
+        border-color: black;
+    }
+}
diff --git a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-view/generate-script-view.tsx b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-view/generate-script-view.tsx
index 28d1d04b6..9a651bf99 100644
--- a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-view/generate-script-view.tsx
+++ b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-view/generate-script-view.tsx
@@ -1,3 +1,6 @@
+import { type GenerateTextRequestDto } from '~/bundles/chat/chat.js';
+import { MessageSender } from '~/bundles/chat/enums/message-sender.js';
+import { actions as chatActions } from '~/bundles/chat/store/chat.js';
 import {
     Heading,
     HStack,
@@ -6,9 +9,18 @@ import {
     TabPanel,
     TabPanels,
     Tabs,
-} from '@chakra-ui/react';
-
-import { useCallback } from '~/bundles/common/hooks/hooks.js';
+} from '~/bundles/common/components/components.js';
+import {
+    getVideoScriptMessageFromPayload,
+    sanitizeJsonString,
+} from '~/bundles/common/components/video-modal/components/video-modal-content/helpers/helpers.js';
+import {
+    useAppDispatch,
+    useAppSelector,
+    useCallback,
+    useMemo,
+} from '~/bundles/common/hooks/hooks.js';
+import { type VideoScript } from '~/bundles/common/types/video-script.type.js';
 import { type GenerateVideoScriptRequestDto } from '~/bundles/video-scripts/video-scripts.js';
 
 import { GenerateScriptForm } from '../generate-script-form/generate-script-form.js';
@@ -16,14 +28,47 @@ import { GenerateScriptPlaceholder } from '../generate-script-placeholder/genera
 import styles from './styles.module.css';
 
 const GenerateScriptView: React.FC = () => {
+    const dispatch = useAppDispatch();
+    const { messages } = useAppSelector(({ chat }) => ({
+        messages: chat.messages.filter(
+            (message) => message.sender === MessageSender.AI,
+        ),
+    }));
+
     const handleGenerateVideoScriptSubmit = useCallback(
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         (payload: GenerateVideoScriptRequestDto): void => {
-            // TODO dispatch video script generation action
+            const sendMessageRequest: GenerateTextRequestDto = {
+                message: getVideoScriptMessageFromPayload(payload, messages),
+            };
+            void dispatch(chatActions.sendMessage(sendMessageRequest));
         },
-        [],
+        [messages, dispatch],
     );
 
+    const lastGeneratedScript: VideoScript[] = useMemo(() => {
+        if (!messages || messages.length === 0) {
+            return [];
+        }
+
+        const lastMessage = messages.at(-1);
+        if (!lastMessage) {
+            return [];
+        }
+
+        try {
+            const sanitizedJson = sanitizeJsonString(lastMessage.text);
+            const videoScripts: VideoScript[] = JSON.parse(sanitizedJson);
+            return videoScripts;
+        } catch {
+            return [
+                {
+                    title: 'Scene',
+                    description: lastMessage.text,
+                },
+            ];
+        }
+    }, [messages]);
+
     return (
         <>
             <Heading className={styles['scriptViewHeading']} variant="H3">
@@ -48,7 +93,9 @@ const GenerateScriptView: React.FC = () => {
                             <GenerateScriptForm
                                 onSubmit={handleGenerateVideoScriptSubmit}
                             />
-                            <GenerateScriptPlaceholder />
+                            <GenerateScriptPlaceholder
+                                videoScripts={lastGeneratedScript}
+                            />
                         </HStack>
                     </TabPanel>
                 </TabPanels>
diff --git a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-view/styles.module.css b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-view/styles.module.css
index ea217e6e1..a9a0ecd98 100644
--- a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-view/styles.module.css
+++ b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-view/styles.module.css
@@ -26,4 +26,5 @@
 
 .scriptViewHStack {
     justify-content: space-between;
+    align-items: flex-start;
 }
diff --git a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/helpers/generate-script-message-template/generate-script-message-template.ts b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/helpers/generate-script-message-template/generate-script-message-template.ts
new file mode 100644
index 000000000..ea64767ca
--- /dev/null
+++ b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/helpers/generate-script-message-template/generate-script-message-template.ts
@@ -0,0 +1,37 @@
+import { type Message } from '~/bundles/chat/types/types.js';
+import { type GenerateVideoScriptRequestDto } from '~/bundles/video-scripts/video-scripts.js';
+
+const generateMessageTemplate = (
+    payload: GenerateVideoScriptRequestDto,
+): string => {
+    const { language, topic, tone, additionalInfo } = payload;
+    const toneMessage = tone.length > 0 ? `, using a '${tone}' tone '` : '';
+    const additionalInfoMessage =
+        additionalInfo.length > 0
+            ? `, to make a better script use this additional information: '${additionalInfo}'`
+            : '';
+
+    return `Create the script narration for a video,
+        divided in scene, generate script on topic '${topic}'
+        in '${language}' ${toneMessage} ${additionalInfoMessage}
+
+        The response must be valid a JSON that has an array of objects with title for the corresponding scene and
+        the description, dont return any other text, just the JSON.
+    `;
+};
+
+const getVideoScriptMessageFromPayload = (
+    payload: GenerateVideoScriptRequestDto,
+    messages: Message[],
+): string => {
+    return messages.length === 0
+        ? generateMessageTemplate(payload)
+        : `Please, generate another script:
+
+            ${generateMessageTemplate(payload)}
+
+            The response must be valid a JSON that has an array of objects with title for the corresponding scene and
+            the description, dont return any other text, just the JSON.`;
+};
+
+export { getVideoScriptMessageFromPayload };
diff --git a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/helpers/helpers.ts b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/helpers/helpers.ts
new file mode 100644
index 000000000..f35afb2a4
--- /dev/null
+++ b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/helpers/helpers.ts
@@ -0,0 +1,2 @@
+export { getVideoScriptMessageFromPayload } from './generate-script-message-template/generate-script-message-template.js';
+export { sanitizeJsonString } from './sanitize-json-string/sanitize-json-string.js';
diff --git a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/helpers/sanitize-json-string/sanitize-json-string.ts b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/helpers/sanitize-json-string/sanitize-json-string.ts
new file mode 100644
index 000000000..3695afce1
--- /dev/null
+++ b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/helpers/sanitize-json-string/sanitize-json-string.ts
@@ -0,0 +1,6 @@
+const sanitizeJsonString = (input: string): string => {
+    const sanitized = input.replaceAll('`', '').replaceAll('json', '');
+    return sanitized.trim();
+};
+
+export { sanitizeJsonString };
diff --git a/frontend/src/bundles/common/components/video-modal/video-modal.tsx b/frontend/src/bundles/common/components/video-modal/video-modal.tsx
index f58897251..7ddbefc10 100644
--- a/frontend/src/bundles/common/components/video-modal/video-modal.tsx
+++ b/frontend/src/bundles/common/components/video-modal/video-modal.tsx
@@ -6,6 +6,8 @@ import {
     ModalOverlay,
 } from '@chakra-ui/react';
 
+import { useChatCleanup } from '~/bundles/chat/hooks/hooks.js';
+
 import { VideoModalContent } from './components/components.js';
 
 type Properties = {
@@ -14,8 +16,12 @@ type Properties = {
 };
 
 const VideoModal: React.FC<Properties> = ({ isOpen, onModalClose }) => {
+    const { handleCloseChat } = useChatCleanup({
+        onModalChatClose: onModalClose,
+    });
+
     return (
-        <Modal isOpen={isOpen} onClose={onModalClose} isCentered>
+        <Modal isOpen={isOpen} onClose={handleCloseChat} isCentered>
             <ModalOverlay />
             <ModalContent
                 borderRadius="17px"
diff --git a/frontend/src/bundles/common/icons/custom-icons/custom-icons.ts b/frontend/src/bundles/common/icons/custom-icons/custom-icons.ts
new file mode 100644
index 000000000..028aeacb2
--- /dev/null
+++ b/frontend/src/bundles/common/icons/custom-icons/custom-icons.ts
@@ -0,0 +1 @@
+export { OpenAi } from './open-ai.js';
diff --git a/frontend/src/bundles/common/icons/custom-icons/open-ai.tsx b/frontend/src/bundles/common/icons/custom-icons/open-ai.tsx
new file mode 100644
index 000000000..aeaee519f
--- /dev/null
+++ b/frontend/src/bundles/common/icons/custom-icons/open-ai.tsx
@@ -0,0 +1,36 @@
+import { createIcon } from '@chakra-ui/react';
+
+const OpenAi = createIcon({
+    displayName: 'OpenAi',
+    viewBox: '0 0 24 20',
+    path: (
+        <>
+            <path
+                d="M11.003 19.7191C8.94032 19.7191 7.10782 18.3929 6.46922 16.4343L6.23898 15.0894V10.6317C6.23898 10.4087 6.35358 10.2108 6.54527 10.0962L10.1342 8.0281V14.1539H10.1352V14.4446L13.7679 16.5427C14.1191 16.746 14.5017 16.885 14.8979 16.9576L14.5482 18.1439C13.646 19.1523 12.3553 19.7253 11.003 19.7191ZM11.003 18.495L10.9968 18.4887C11.8271 18.4887 12.6251 18.2022 13.2637 17.672C13.2376 17.6595 13.1866 17.6272 13.1491 17.6084L9.39348 15.4457C9.20179 15.3374 9.0872 15.1332 9.0872 14.9102V9.83365L7.4714 10.765V14.9613C7.47036 16.9104 9.05075 18.4919 11.003 18.495Z"
+                fill="currentColor"
+            />
+            <path
+                d="M19.6565 15.8742C18.6252 17.6605 16.5604 18.5844 14.545 18.1582L13.2651 17.6851L9.40459 15.4563C9.21152 15.3448 9.0974 15.1466 9.094 14.9233L9.09745 10.7811L14.4025 13.844L14.4031 13.8431L14.6548 13.9885L18.2882 11.8916C18.6399 11.6891 18.9515 11.4272 19.2125 11.1204L20.065 12.0164C20.4872 13.3019 20.3381 14.7063 19.6565 15.8742ZM18.5965 15.2621L18.5879 15.2644C19.0031 14.5454 19.154 13.711 19.014 12.8929C18.9902 12.9092 18.9367 12.9372 18.9017 12.9603L15.1509 15.1314C14.9613 15.2432 14.7271 15.2404 14.5341 15.1289L10.1376 12.5906L10.1363 14.4556L13.7704 16.5538C15.4579 17.5292 17.6176 16.9513 18.5965 15.2621Z"
+                fill="currentColor"
+            />
+            <path
+                d="M20.6535 6.45762C21.6849 8.24397 21.4526 10.4941 20.0758 12.0264L19.0261 12.8982L15.1656 15.1271C14.9725 15.2386 14.7438 15.2383 14.5487 15.1296L10.9633 13.0555L16.2684 9.99264L16.2678 9.99174L16.5196 9.84641L16.5203 5.65135C16.5208 5.2455 16.4498 4.84469 16.3146 4.46527L17.5168 4.175C18.8412 4.45209 19.9828 5.28343 20.6535 6.45762ZM19.5934 7.06966L19.5911 7.0782C19.176 6.35915 18.5289 5.8113 17.7504 5.52338C17.7526 5.55218 17.7501 5.61254 17.7526 5.65439L17.7574 9.98821C17.7595 10.2084 17.6399 10.4097 17.4469 10.5212L13.0504 13.0595L14.6649 13.9931L18.299 11.895C19.9875 10.9213 20.5669 8.76195 19.5934 7.06966Z"
+                fill="currentColor"
+            />
+            <path
+                d="M12.997 0.885793C15.0597 0.885793 16.8922 2.21197 17.5308 4.17051L17.761 5.51545V9.97321C17.761 10.1961 17.6464 10.3941 17.4547 10.5087L13.8658 12.5768L13.8658 6.45096H13.8648V6.16031L10.2321 4.06217C9.88087 3.85881 9.49827 3.71987 9.10209 3.64725L9.45181 2.46096C10.354 1.45252 11.6447 0.879542 12.997 0.885793ZM12.997 2.10988L13.0032 2.11613C12.1729 2.11613 11.3749 2.40262 10.7363 2.93288C10.7624 2.94538 10.8134 2.97768 10.8509 2.99643L14.6065 5.15916C14.7982 5.2675 14.9128 5.47169 14.9128 5.69463L14.9128 10.7712L16.5286 9.83986V5.64359C16.5296 3.69443 14.9493 2.11301 12.997 2.10988Z"
+                fill="currentColor"
+            />
+            <path
+                d="M4.34346 4.73079C5.37481 2.94443 7.43956 2.02053 9.45501 2.44675L10.7349 2.91983L14.5954 5.14871C14.7885 5.26018 14.9026 5.4584 14.906 5.6817L14.9026 9.82383L9.59745 6.76093L9.59693 6.76184L9.34522 6.61651L5.71184 8.71343C5.36011 8.91593 5.04849 9.17779 4.7875 9.48459L3.93501 8.58857C3.51276 7.30304 3.66193 5.89872 4.34346 4.73079ZM5.40355 5.34283L5.41209 5.34054C4.99694 6.05959 4.84604 6.89393 4.98596 7.71212C5.00981 7.69581 5.0633 7.66775 5.09829 7.64465L8.84907 5.47356C9.03874 5.36173 9.27287 5.36458 9.46595 5.47605L13.8624 8.01434L13.8637 6.14935L10.2296 4.05121C8.54214 3.07573 6.38239 3.65367 5.40355 5.34283Z"
+                fill="currentColor"
+            />
+            <path
+                d="M3.34648 14.1474C2.31513 12.361 2.54739 10.1109 3.92423 8.57861L4.97386 7.70675L8.83439 5.47787C9.02746 5.3664 9.25618 5.36668 9.45127 5.47539L13.0367 7.54944L7.73164 10.6123L7.73216 10.6132L7.48044 10.7586L7.47974 14.9536C7.47925 15.3595 7.55022 15.7603 7.68542 16.1397L6.4832 16.43C5.15877 16.1529 4.01718 15.3216 3.34648 14.1474ZM4.40657 13.5353L4.40886 13.5268C4.824 14.2458 5.47111 14.7937 6.24964 15.0816C6.24745 15.0528 6.24989 14.9924 6.24738 14.9506L6.24255 10.6168C6.24054 10.3966 6.36007 10.1953 6.55315 10.0838L10.9496 7.5455L9.33512 6.61186L5.70104 8.70999C4.0125 9.68367 3.43314 11.843 4.40657 13.5353Z"
+                fill="currentColor"
+            />
+        </>
+    ),
+});
+
+export { OpenAi };
diff --git a/frontend/src/bundles/common/icons/icon-name.ts b/frontend/src/bundles/common/icons/icon-name.ts
index a720dd97f..b42fa4f2e 100644
--- a/frontend/src/bundles/common/icons/icon-name.ts
+++ b/frontend/src/bundles/common/icons/icon-name.ts
@@ -8,6 +8,7 @@ import {
     ViewOffIcon,
 } from '@chakra-ui/icons';
 
+import { OpenAi } from './custom-icons/custom-icons.js';
 import {
     BackwardStep,
     CircleUser,
@@ -57,6 +58,7 @@ const IconName = {
     TEXT: T,
     ADD: AddIcon,
     CLOSE: CloseIcon,
+    OPEN_AI: OpenAi,
 } as const;
 
 export { IconName };
diff --git a/frontend/src/bundles/common/types/types.ts b/frontend/src/bundles/common/types/types.ts
index 89d8f9369..0518e0d3e 100644
--- a/frontend/src/bundles/common/types/types.ts
+++ b/frontend/src/bundles/common/types/types.ts
@@ -1,6 +1,7 @@
 export { type AsyncThunkConfig } from './async-thunk-config.type.js';
 export { type RootState } from './root-state.type.js';
 export { type VideoPreview } from './video-preview.type.js';
+export { type VideoScript } from './video-script.type.js';
 export {
     type ServerErrorDetail,
     type ServerErrorResponse,
diff --git a/frontend/src/bundles/common/types/video-script.type.ts b/frontend/src/bundles/common/types/video-script.type.ts
new file mode 100644
index 000000000..8300b5dcd
--- /dev/null
+++ b/frontend/src/bundles/common/types/video-script.type.ts
@@ -0,0 +1,6 @@
+type VideoScript = {
+    title: string;
+    description: string;
+};
+
+export { type VideoScript };
diff --git a/frontend/src/bundles/studio/components/video-menu/components/menu-body/menu-body.tsx b/frontend/src/bundles/studio/components/video-menu/components/menu-body/menu-body.tsx
index 3c1d70dc9..b3e39039d 100644
--- a/frontend/src/bundles/studio/components/video-menu/components/menu-body/menu-body.tsx
+++ b/frontend/src/bundles/studio/components/video-menu/components/menu-body/menu-body.tsx
@@ -3,7 +3,10 @@ import {
     CloseButton,
     Flex,
     Heading,
+    Icon,
+    IconButton,
 } from '~/bundles/common/components/components.js';
+import { IconName } from '~/bundles/common/icons/icons.js';
 
 import styles from './styles.module.css';
 
@@ -12,6 +15,7 @@ type Properties = {
     children: React.ReactNode;
     isOpen: boolean;
     onClose: () => void;
+    onChatOpen?: () => void;
 };
 
 const MenuBody: React.FC<Properties> = ({
@@ -19,6 +23,7 @@ const MenuBody: React.FC<Properties> = ({
     children,
     isOpen,
     onClose,
+    onChatOpen,
 }) => {
     return (
         <>
@@ -30,7 +35,26 @@ const MenuBody: React.FC<Properties> = ({
                         marginBottom="30px"
                     >
                         <Heading variant="H3">{title}</Heading>
-                        <CloseButton onClick={onClose} color="background.600" />
+                        <Flex align="center">
+                            {title === 'Script' && (
+                                <IconButton
+                                    aria-label="OpenAI icon button"
+                                    icon={
+                                        <Icon
+                                            as={IconName.OPEN_AI}
+                                            boxSize={6}
+                                        />
+                                    }
+                                    variant="icon"
+                                    onClick={onChatOpen}
+                                />
+                            )}
+
+                            <CloseButton
+                                onClick={onClose}
+                                color="background.600"
+                            />
+                        </Flex>
                     </Flex>
                     <Box className={styles['menu-body-content']}>
                         {children}
diff --git a/frontend/src/bundles/studio/components/video-menu/video-menu.tsx b/frontend/src/bundles/studio/components/video-menu/video-menu.tsx
index 62bdf10e6..23d21075e 100644
--- a/frontend/src/bundles/studio/components/video-menu/video-menu.tsx
+++ b/frontend/src/bundles/studio/components/video-menu/video-menu.tsx
@@ -1,3 +1,4 @@
+import { ChatModal } from '~/bundles/chat/pages/chat-modal.js';
 import { Icon } from '~/bundles/common/components/components.js';
 import { useCallback, useState } from '~/bundles/common/hooks/hooks.js';
 import { IconName } from '~/bundles/common/icons/icons.js';
@@ -21,6 +22,7 @@ const VideoMenu: React.FC = () => {
         content: null,
     });
     const [isOpen, setIsOpen] = useState(false);
+    const [isChatOpen, setIsChatOpen] = useState(false);
 
     const handleMenuClick = useCallback(
         (header: string, content: React.ReactNode): void => {
@@ -35,6 +37,14 @@ const VideoMenu: React.FC = () => {
         setActiveIndex(null);
     }, []);
 
+    const handleChatOpen = useCallback(() => {
+        setIsChatOpen(true);
+    }, []);
+
+    const handleChatClose = useCallback(() => {
+        setIsChatOpen(false);
+    }, []);
+
     const menuItems: MenuItem[] = [
         {
             label: 'Templates',
@@ -74,9 +84,14 @@ const VideoMenu: React.FC = () => {
                 title={activeItem.title}
                 isOpen={isOpen}
                 onClose={handleActiveItemReset}
+                onChatOpen={handleChatOpen}
             >
                 {activeItem.content}
             </MenuBody>
+            <ChatModal
+                isChatOpen={isChatOpen}
+                onModalChatClose={handleChatClose}
+            />
         </>
     );
 };
diff --git a/frontend/src/bundles/users/components/user-card/components/user-avatar.tsx b/frontend/src/bundles/users/components/user-card/components/user-avatar.tsx
index 554acb29d..951c74be6 100644
--- a/frontend/src/bundles/users/components/user-card/components/user-avatar.tsx
+++ b/frontend/src/bundles/users/components/user-card/components/user-avatar.tsx
@@ -1,12 +1,13 @@
-import { Circle } from '~/bundles/common/components/components.js';
+import { Circle, Image } from '~/bundles/common/components/components.js';
 
 import { getInitials } from '../helpers/helpers.js';
 
 type Properties = {
     username: string | undefined;
+    imageUrl?: string;
 };
 
-const UserAvatar: React.FC<Properties> = ({ username }) => {
+const UserAvatar: React.FC<Properties> = ({ username, imageUrl }) => {
     const initials = getInitials(username);
     return (
         <Circle
@@ -15,7 +16,17 @@ const UserAvatar: React.FC<Properties> = ({ username }) => {
             borderColor="brand.secondary.900"
             color="brand.secondary.900"
         >
-            {initials}
+            {imageUrl ? (
+                <Image
+                    src={imageUrl}
+                    alt={initials}
+                    h={'100%'}
+                    w={'100%'}
+                    borderRadius={'50%'}
+                />
+            ) : (
+                <>{initials}</>
+            )}
         </Circle>
     );
 };
diff --git a/frontend/src/framework/http-api/base-http-api.package.ts b/frontend/src/framework/http-api/base-http-api.package.ts
index 160c5c0ec..16bb934b9 100644
--- a/frontend/src/framework/http-api/base-http-api.package.ts
+++ b/frontend/src/framework/http-api/base-http-api.package.ts
@@ -44,7 +44,14 @@ class BaseHttpApi implements HttpApi {
         path: string,
         options: HttpApiOptions,
     ): Promise<HttpApiResponse> {
-        const { method, contentType, payload = null, hasAuth } = options;
+        const {
+            method,
+            contentType,
+            payload = null,
+            hasAuth,
+            credentials = 'same-origin',
+            keepAlive = false,
+        } = options;
 
         const headers = await this.getHeaders(contentType, hasAuth);
 
@@ -52,6 +59,8 @@ class BaseHttpApi implements HttpApi {
             method,
             headers,
             payload,
+            credentials,
+            keepAlive,
         });
 
         return (await this.checkResponse(response)) as HttpApiResponse;
diff --git a/frontend/src/framework/http-api/types/http-api-options.type.ts b/frontend/src/framework/http-api/types/http-api-options.type.ts
index ba7f07184..3f68d34a4 100644
--- a/frontend/src/framework/http-api/types/http-api-options.type.ts
+++ b/frontend/src/framework/http-api/types/http-api-options.type.ts
@@ -2,10 +2,15 @@ import { type ContentType } from '~/bundles/common/enums/enums.js';
 import { type ValueOf } from '~/bundles/common/types/types.js';
 import { type HttpOptions } from '~/framework/http/http.js';
 
-type HttpApiOptions = Omit<HttpOptions, 'headers' | 'payload'> & {
+type HttpApiOptions = Omit<
+    HttpOptions,
+    'headers' | 'payload' | 'credentials' | 'keepAlive'
+> & {
     hasAuth: boolean;
     contentType: ValueOf<typeof ContentType>;
     payload?: HttpOptions['payload'];
+    credentials?: HttpOptions['credentials'];
+    keepAlive?: HttpOptions['keepAlive'];
 };
 
 export { type HttpApiOptions };
diff --git a/frontend/src/framework/http/base-http.package.ts b/frontend/src/framework/http/base-http.package.ts
index 039fa4b85..795cd2901 100644
--- a/frontend/src/framework/http/base-http.package.ts
+++ b/frontend/src/framework/http/base-http.package.ts
@@ -2,12 +2,14 @@ import { type Http, type HttpOptions } from './types/types.js';
 
 class BaseHttp implements Http {
     public load(path: string, options: HttpOptions): Promise<Response> {
-        const { headers, method, payload } = options;
+        const { headers, method, payload, credentials, keepAlive } = options;
 
         return fetch(path, {
             body: payload,
             headers,
             method,
+            credentials,
+            keepalive: keepAlive,
         });
     }
 }
diff --git a/frontend/src/framework/store/store.package.ts b/frontend/src/framework/store/store.package.ts
index 9137a5e82..401e2fdc5 100644
--- a/frontend/src/framework/store/store.package.ts
+++ b/frontend/src/framework/store/store.package.ts
@@ -7,6 +7,8 @@ import { configureStore } from '@reduxjs/toolkit';
 
 import { authApi } from '~/bundles/auth/auth.js';
 import { reducer as authReducer } from '~/bundles/auth/store/auth.js';
+import { chatApi } from '~/bundles/chat/chat.js';
+import { reducer as chatReducer } from '~/bundles/chat/store/chat.js';
 import { AppEnvironment } from '~/bundles/common/enums/enums.js';
 import { reducer as studioReducer } from '~/bundles/studio/store/studio.js';
 import {
@@ -23,6 +25,7 @@ import { errorMiddleware } from '../../bundles/common/middlewares/error-handling
 type RootReducer = {
     auth: ReturnType<typeof authReducer>;
     studio: ReturnType<typeof studioReducer>;
+    chat: ReturnType<typeof chatReducer>;
 };
 
 type ExtraArguments = {
@@ -31,6 +34,7 @@ type ExtraArguments = {
     avatarsApi: typeof avatarsApi;
     speechApi: typeof speechApi;
     avatarVideosApi: typeof avatarVideosApi;
+    chatApi: typeof chatApi;
     storage: typeof storage;
 };
 
@@ -49,6 +53,7 @@ class Store {
             reducer: {
                 auth: authReducer,
                 studio: studioReducer,
+                chat: chatReducer,
             },
             middleware: (getDefaultMiddleware) => {
                 const middlewares = getDefaultMiddleware({
@@ -68,6 +73,7 @@ class Store {
             avatarsApi,
             speechApi,
             avatarVideosApi,
+            chatApi,
             storage,
         };
     }
diff --git a/frontend/src/framework/theme/styles/colors.styles.ts b/frontend/src/framework/theme/styles/colors.styles.ts
index 5deda10ee..e9194e5cb 100644
--- a/frontend/src/framework/theme/styles/colors.styles.ts
+++ b/frontend/src/framework/theme/styles/colors.styles.ts
@@ -1,5 +1,6 @@
 const colors = {
     white: '#ffffff',
+    black: '#000000',
     background: {
         900: '#0a0049',
         700: '#231B59',
diff --git a/frontend/src/framework/theme/styles/components.styles.ts b/frontend/src/framework/theme/styles/components.styles.ts
index b9be1c43f..f6394d7e7 100644
--- a/frontend/src/framework/theme/styles/components.styles.ts
+++ b/frontend/src/framework/theme/styles/components.styles.ts
@@ -23,6 +23,11 @@ const components = {
                 fontWeight: '700',
                 lineHeight: '27px',
             },
+            H4: {
+                fontSize: '16px',
+                fontWeight: '700',
+                lineHeight: '24px',
+            },
         },
     },
     Text: {
diff --git a/shared/src/bundles/chat/chat.ts b/shared/src/bundles/chat/chat.ts
index 8aaa42161..352784e12 100644
--- a/shared/src/bundles/chat/chat.ts
+++ b/shared/src/bundles/chat/chat.ts
@@ -1,3 +1,7 @@
-export { ChatPath } from './enums/enums.js';
-export { type GenerateTextRequestDto } from './types/types.js';
+export { ChatApiPath } from './enums/enums.js';
+export {
+    type DeleteChatResponseDto,
+    type GenerateTextRequestDto,
+    type GenerateTextResponseDto,
+} from './types/types.js';
 export { textGeneration as textGenerationValidationSchema } from './validation-schemas/validation-schemas.js';
diff --git a/shared/src/bundles/chat/enums/chat-api-path.enum.ts b/shared/src/bundles/chat/enums/chat-api-path.enum.ts
new file mode 100644
index 000000000..14da2515d
--- /dev/null
+++ b/shared/src/bundles/chat/enums/chat-api-path.enum.ts
@@ -0,0 +1,5 @@
+const ChatApiPath = {
+    ROOT: '/',
+} as const;
+
+export { ChatApiPath };
diff --git a/shared/src/bundles/chat/enums/chat.enum.ts b/shared/src/bundles/chat/enums/chat.enum.ts
deleted file mode 100644
index 5580c6237..000000000
--- a/shared/src/bundles/chat/enums/chat.enum.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-const ChatPath = {
-    ROOT: '/',
-} as const;
-
-export { ChatPath };
diff --git a/shared/src/bundles/chat/enums/enums.ts b/shared/src/bundles/chat/enums/enums.ts
index a70bbdbd4..ab89fcab7 100644
--- a/shared/src/bundles/chat/enums/enums.ts
+++ b/shared/src/bundles/chat/enums/enums.ts
@@ -1,3 +1,3 @@
-export { ChatPath } from './chat.enum.js';
+export { ChatApiPath } from './chat-api-path.enum.js';
 export { TextGenerationValidationRule } from './text-generation-rule.enum.js';
 export { TextGenerationValidationMessage } from './text-generation-validation-message.enum.js';
diff --git a/shared/src/bundles/chat/types/delete-chat-response-dto-type.ts b/shared/src/bundles/chat/types/delete-chat-response-dto-type.ts
new file mode 100644
index 000000000..9f155ae1c
--- /dev/null
+++ b/shared/src/bundles/chat/types/delete-chat-response-dto-type.ts
@@ -0,0 +1,5 @@
+type DeleteChatResponseDto = {
+    isDeleted: boolean;
+};
+
+export { type DeleteChatResponseDto };
diff --git a/shared/src/bundles/chat/types/generate-text-response-dto.ts b/shared/src/bundles/chat/types/generate-text-response-dto.ts
new file mode 100644
index 000000000..7a3275656
--- /dev/null
+++ b/shared/src/bundles/chat/types/generate-text-response-dto.ts
@@ -0,0 +1,5 @@
+type GenerateTextResponseDto = {
+    generatedText: string;
+};
+
+export { type GenerateTextResponseDto };
diff --git a/shared/src/bundles/chat/types/types.ts b/shared/src/bundles/chat/types/types.ts
index 2fee7e222..b0c9de7c3 100644
--- a/shared/src/bundles/chat/types/types.ts
+++ b/shared/src/bundles/chat/types/types.ts
@@ -1 +1,3 @@
+export { type DeleteChatResponseDto } from './delete-chat-response-dto-type.js';
 export { type GenerateTextRequestDto } from './generate-text-request-dto.js';
+export { type GenerateTextResponseDto } from './generate-text-response-dto.js';
diff --git a/shared/src/framework/http/types/http-options.type.ts b/shared/src/framework/http/types/http-options.type.ts
index 6a8399ade..cc4d3c9e5 100644
--- a/shared/src/framework/http/types/http-options.type.ts
+++ b/shared/src/framework/http/types/http-options.type.ts
@@ -4,6 +4,8 @@ type HttpOptions = {
     method: HttpMethod;
     payload: BodyInit | null;
     headers: Headers;
+    credentials: RequestCredentials;
+    keepAlive: boolean;
 };
 
 export { type HttpOptions };
diff --git a/shared/src/index.ts b/shared/src/index.ts
index db922d01a..ff6ef4e66 100644
--- a/shared/src/index.ts
+++ b/shared/src/index.ts
@@ -17,8 +17,10 @@ export {
     AvatarValidationMessage,
 } from './bundles/avatars/avatars.js';
 export {
+    type DeleteChatResponseDto,
     type GenerateTextRequestDto,
-    ChatPath,
+    type GenerateTextResponseDto,
+    ChatApiPath,
     textGenerationValidationSchema,
 } from './bundles/chat/chat.js';
 export {