diff --git a/submodules/moragents_dockers/frontend/components/Chat/index.tsx b/submodules/moragents_dockers/frontend/components/Chat/index.tsx
index e7dd39b..cac05ee 100644
--- a/submodules/moragents_dockers/frontend/components/Chat/index.tsx
+++ b/submodules/moragents_dockers/frontend/components/Chat/index.tsx
@@ -2,18 +2,19 @@ import React, { FC, useEffect, useState } from "react";
 import { Flex, Box } from "@chakra-ui/react";
 import { ChatMessage } from "@/services/types";
 import { useTransactionConfirmations } from "wagmi";
-import { MessageList } from "../MessageList";
-import { ChatInput } from "../ChatInput";
-import { LoadingIndicator } from "../LoadingIndicator";
-import { Widgets, shouldOpenWidget } from "../Widgets";
-import { ChatProps } from "./types";
-import { useChat } from "./hooks";
+import { MessageList } from "@/components/MessageList";
+import { ChatInput } from "@/components/ChatInput";
+import { LoadingIndicator } from "@/components/LoadingIndicator";
+import { Widgets, shouldOpenWidget } from "@/components/Widgets";
+import { ChatProps } from "@/components/Chat/types";
+import { useChat } from "@/components/Chat/hooks";
 
 export const Chat: FC<ChatProps> = ({
   onSubmitMessage,
   onCancelSwap,
   messages,
   onBackendError,
+  isSidebarOpen = false,
 }) => {
   const [messagesData, setMessagesData] = useState<ChatMessage[]>(messages);
   const [activeWidget, setActiveWidget] = useState<ChatMessage | null>(null);
@@ -86,6 +87,7 @@ export const Chat: FC<ChatProps> = ({
             showSpinner ||
             messagesData[messagesData.length - 1]?.role === "swap"
           }
+          isSidebarOpen={isSidebarOpen}
         />
       </Flex>
       <Box
diff --git a/submodules/moragents_dockers/frontend/components/Chat/types.ts b/submodules/moragents_dockers/frontend/components/Chat/types.ts
index 9ee3b0e..a5b3257 100644
--- a/submodules/moragents_dockers/frontend/components/Chat/types.ts
+++ b/submodules/moragents_dockers/frontend/components/Chat/types.ts
@@ -5,6 +5,7 @@ export type ChatProps = {
   onCancelSwap: (fromAction: number) => void;
   messages: ChatMessage[];
   onBackendError: () => void;
+  isSidebarOpen?: boolean;
 };
 
 export type SwapTransaction = {
diff --git a/submodules/moragents_dockers/frontend/components/ChatInput/PrefilledOptions.tsx b/submodules/moragents_dockers/frontend/components/ChatInput/PrefilledOptions.tsx
index 4db802e..cbdda4b 100644
--- a/submodules/moragents_dockers/frontend/components/ChatInput/PrefilledOptions.tsx
+++ b/submodules/moragents_dockers/frontend/components/ChatInput/PrefilledOptions.tsx
@@ -26,11 +26,6 @@ type PrefilledOption = {
   }>;
 };
 
-type PrefilledOptionsProps = {
-  onSelect: (message: string) => void;
-  isWidgetOpen?: boolean;
-};
-
 const prefilledOptionsMap: Record<string, PrefilledOption> = {
   [AGENT_TYPES.DEFAULT]: {
     title: "Default Agent 🔄",
@@ -143,13 +138,22 @@ const prefilledOptionsMap: Record<string, PrefilledOption> = {
   },
 };
 
-const PrefilledOptions: React.FC<PrefilledOptionsProps> = ({
+const PrefilledOptions = ({
   onSelect,
   isWidgetOpen = false,
+  isSidebarOpen = true,
+}: {
+  onSelect: (message: string) => void;
+  isWidgetOpen?: boolean;
+  isSidebarOpen?: boolean;
 }) => {
   const [selectedAgents, setSelectedAgents] = useState<string[]>([]);
   const containerStyle = {
-    paddingLeft: isWidgetOpen ? "5%" : "20%",
+    paddingLeft: isWidgetOpen
+      ? "5%"
+      : isSidebarOpen
+      ? "calc(260px + 20%)" // Sidebar width first, then percentage
+      : "20%",
     paddingRight: isWidgetOpen ? "35%" : "20%",
   };
 
diff --git a/submodules/moragents_dockers/frontend/components/ChatInput/index.tsx b/submodules/moragents_dockers/frontend/components/ChatInput/index.tsx
index 3b75829..8f95e57 100644
--- a/submodules/moragents_dockers/frontend/components/ChatInput/index.tsx
+++ b/submodules/moragents_dockers/frontend/components/ChatInput/index.tsx
@@ -24,12 +24,14 @@ type ChatInputProps = {
   onSubmit: (message: string, file: File | null) => Promise<void>;
   disabled: boolean;
   hasMessages?: boolean;
+  isSidebarOpen?: boolean;
 };
 
 export const ChatInput: FC<ChatInputProps> = ({
   onSubmit,
   disabled,
   hasMessages = false,
+  isSidebarOpen = false,
 }) => {
   const [message, setMessage] = useState("");
   const [file, setFile] = useState<File | null>(null);
@@ -194,7 +196,12 @@ export const ChatInput: FC<ChatInputProps> = ({
       )}
 
       <div className={styles.container}>
-        {!hasMessages && <PrefilledOptions onSelect={handlePrefilledSelect} />}
+        {!hasMessages && (
+          <PrefilledOptions
+            onSelect={handlePrefilledSelect}
+            isSidebarOpen={isSidebarOpen}
+          />
+        )}
         <div className={styles.flexContainer}>
           <InputGroup ref={inputGroupRef} className={styles.inputGroup}>
             {agentSupportsFileUploads && (
diff --git a/submodules/moragents_dockers/frontend/components/HeaderBar/CDPWallets.tsx b/submodules/moragents_dockers/frontend/components/HeaderBar/CDPWallets.tsx
index 3273d26..3f5d80e 100644
--- a/submodules/moragents_dockers/frontend/components/HeaderBar/CDPWallets.tsx
+++ b/submodules/moragents_dockers/frontend/components/HeaderBar/CDPWallets.tsx
@@ -69,6 +69,11 @@ export const CDPWallets: React.FC = () => {
   const [confirmWalletId, setConfirmWalletId] = useState("");
   const cancelRef = React.useRef<HTMLButtonElement>(null);
   const toast = useToast();
+  const {
+    isOpen: isMenuOpen,
+    onClose: closeMenu,
+    onOpen: openMenu,
+  } = useDisclosure();
 
   const fetchWallets = useCallback(async () => {
     try {
@@ -327,13 +332,21 @@ export const CDPWallets: React.FC = () => {
 
   return (
     <>
-      <Menu>
+      <Menu isOpen={isMenuOpen} onClose={closeMenu} onOpen={openMenu}>
         <MenuButton as={Button} rightIcon={<ChevronDownIcon />}>
           CDP Wallets
         </MenuButton>
         <MenuList minWidth="300px">
           <Box p={4}>
-            <Button colorScheme="green" size="sm" width="full" onClick={onOpen}>
+            <Button
+              colorScheme="green"
+              size="sm"
+              width="full"
+              onClick={() => {
+                closeMenu();
+                onOpen();
+              }}
+            >
               Create New Wallet
             </Button>
           </Box>
diff --git a/submodules/moragents_dockers/frontend/components/LeftSidebar/index.module.css b/submodules/moragents_dockers/frontend/components/LeftSidebar/index.module.css
new file mode 100644
index 0000000..563c47b
--- /dev/null
+++ b/submodules/moragents_dockers/frontend/components/LeftSidebar/index.module.css
@@ -0,0 +1,118 @@
+.sidebar {
+  background: #0d0d0d;
+  height: calc(100vh);
+  position: relative;
+  transition: all 0.2s ease;
+  border-right: 1px solid #262626;
+}
+
+.sidebarExpanded {
+  width: 260px;
+}
+
+.sidebarCollapsed {
+  width: 0;
+}
+
+.toggleButton {
+  position: fixed;
+  left: 10px;
+  top: 65px; /* Position below header */
+  z-index: 100;
+  background-color: transparent;
+  color: #808080;
+  border: none;
+  width: 32px;
+  height: 32px;
+  border-radius: 4px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.2s;
+}
+
+.toggleButton:hover {
+  background-color: #262626;
+  color: white;
+}
+
+.container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 48px 8px 8px 8px;
+  overflow: hidden;
+}
+
+.newChatButton {
+  width: 100%;
+  background-color: transparent;
+  color: #808080;
+  border: 1px solid #262626;
+  padding: 8px 12px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.newChatButton:hover {
+  background-color: #262626;
+  color: white;
+}
+
+.conversationItem {
+  padding: 8px 12px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: #808080;
+  min-height: 40px;
+}
+
+.conversationItem:hover {
+  background-color: #262626;
+  color: white;
+}
+
+.conversationActive {
+  background-color: #262626;
+  color: white;
+}
+
+.conversationName {
+  font-size: 14px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.deleteButton {
+  opacity: 0;
+  background-color: transparent;
+  color: #808080;
+  border: none;
+  padding: 4px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.conversationItem:hover .deleteButton {
+  opacity: 1;
+}
+
+.deleteButton:hover {
+  background-color: #404040;
+  color: white;
+}
diff --git a/submodules/moragents_dockers/frontend/components/LeftSidebar/index.tsx b/submodules/moragents_dockers/frontend/components/LeftSidebar/index.tsx
index 61e19be..8fd90e5 100644
--- a/submodules/moragents_dockers/frontend/components/LeftSidebar/index.tsx
+++ b/submodules/moragents_dockers/frontend/components/LeftSidebar/index.tsx
@@ -1,24 +1,22 @@
 import React, { FC, useEffect, useState } from "react";
-import { Box, VStack, Text, Button, useToast } from "@chakra-ui/react";
-import {
-  IconChevronLeft,
-  IconChevronRight,
-  IconPlus,
-  IconTrash,
-} from "@tabler/icons-react";
+import { useToast } from "@chakra-ui/react";
+import { IconMenu2, IconPencilPlus, IconTrash } from "@tabler/icons-react";
 import { getHttpClient } from "@/services/constants";
 import { createNewConversation } from "@/services/apiHooks";
+import styles from "./index.module.css";
 
 export type LeftSidebarProps = {
   currentConversationId: string;
   onConversationSelect: (conversationId: string) => void;
   onDeleteConversation: (conversationId: string) => void;
+  setCurrentConversationId: (conversationId: string) => void;
 };
 
 export const LeftSidebar: FC<LeftSidebarProps> = ({
   currentConversationId,
   onConversationSelect,
   onDeleteConversation,
+  setCurrentConversationId,
 }) => {
   const [conversations, setConversations] = useState<string[]>([]);
   const [isLoading, setIsLoading] = useState(false);
@@ -47,6 +45,7 @@ export const LeftSidebar: FC<LeftSidebarProps> = ({
       const response = await createNewConversation(getHttpClient());
       await fetchConversations();
       onConversationSelect(response);
+      setCurrentConversationId(response);
       toast({
         title: "Success",
         description: "New conversation created",
@@ -74,6 +73,7 @@ export const LeftSidebar: FC<LeftSidebarProps> = ({
       await fetchConversations();
       if (conversationId === currentConversationId) {
         onConversationSelect("default");
+        setCurrentConversationId("default");
       }
       toast({
         title: "Success",
@@ -105,82 +105,61 @@ export const LeftSidebar: FC<LeftSidebarProps> = ({
   };
 
   return (
-    <Box
-      bg="#020804"
-      height="100vh"
-      width={isCollapsed ? "60px" : "240px"}
-      transition="width 0.2s"
-      position="relative"
-    >
-      <Button
-        position="absolute"
-        right="-12px"
-        top="20px"
-        size="sm"
-        zIndex={2}
+    <>
+      <button
+        className={styles.toggleButton}
         onClick={() => setIsCollapsed(!isCollapsed)}
-        bg="#2D3748"
-        color="white"
-        _hover={{ bg: "#4A5568" }}
+        aria-label="Toggle sidebar"
       >
-        {isCollapsed ? (
-          <IconChevronRight size={16} />
-        ) : (
-          <IconChevronLeft size={16} />
-        )}
-      </Button>
+        <IconMenu2 size={20} />
+      </button>
 
-      <VStack align="stretch" p={4} height="100%" spacing={4}>
-        <Button
-          onClick={handleCreateNewConversation}
-          isLoading={isLoading}
-          bg="#2D3748"
-          color="white"
-          _hover={{ bg: "#4A5568" }}
-          w="100%"
-        >
-          {isCollapsed ? <IconPlus size={20} /> : "New Chat"}
-        </Button>
-
-        {conversations.map((conversationId) => (
-          <Box
-            key={conversationId}
-            p={3}
-            bg={
-              currentConversationId === conversationId ? "#2D3748" : "#1A1A1A"
-            }
-            borderRadius="md"
-            cursor="pointer"
-            transition="all 0.2s"
-            _hover={{ bg: "#2D3748" }}
-            onClick={() => onConversationSelect(conversationId)}
-            display="flex"
-            justifyContent="space-between"
-            alignItems="center"
-            overflow="hidden"
+      <div
+        className={`${styles.sidebar} ${
+          isCollapsed ? styles.sidebarCollapsed : styles.sidebarExpanded
+        }`}
+      >
+        <div className={styles.container}>
+          <button
+            className={styles.newChatButton}
+            onClick={handleCreateNewConversation}
+            disabled={isLoading}
           >
-            {!isCollapsed && (
-              <Text color="white" fontSize="sm" isTruncated>
+            <IconPencilPlus size={16} />
+            <span>New chat</span>
+          </button>
+
+          {conversations.map((conversationId) => (
+            <div
+              key={conversationId}
+              className={`${styles.conversationItem} ${
+                currentConversationId === conversationId
+                  ? styles.conversationActive
+                  : ""
+              }`}
+              onClick={() => {
+                onConversationSelect(conversationId);
+                setCurrentConversationId(conversationId);
+              }}
+            >
+              <span className={styles.conversationName}>
                 {formatConversationName(conversationId)}
-              </Text>
-            )}
-            {conversationId !== "default" && (
-              <Button
-                size="sm"
-                colorScheme="red"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  handleDeleteConversation(conversationId);
-                }}
-                opacity={0.8}
-                _hover={{ opacity: 1 }}
-              >
-                {isCollapsed ? <IconTrash size={16} /> : "Delete"}
-              </Button>
-            )}
-          </Box>
-        ))}
-      </VStack>
-    </Box>
+              </span>
+              {conversationId !== "default" && (
+                <button
+                  className={styles.deleteButton}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleDeleteConversation(conversationId);
+                  }}
+                >
+                  <IconTrash size={16} />
+                </button>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+    </>
   );
 };
diff --git a/submodules/moragents_dockers/frontend/components/LoadingIndicator/index.tsx b/submodules/moragents_dockers/frontend/components/LoadingIndicator/index.tsx
index 91b5a61..9d9005f 100644
--- a/submodules/moragents_dockers/frontend/components/LoadingIndicator/index.tsx
+++ b/submodules/moragents_dockers/frontend/components/LoadingIndicator/index.tsx
@@ -2,19 +2,9 @@ import React, { FC } from "react";
 import { Grid, GridItem, Text, Box } from "@chakra-ui/react";
 import { Avatar } from "../Avatar";
 import { Loader } from "../Loader";
-import { availableAgents } from "../../config";
 import styles from "./index.module.css";
 
-type LoadingIndicatorProps = {
-  selectedAgent: string;
-};
-
-export const LoadingIndicator: FC<LoadingIndicatorProps> = ({
-  selectedAgent,
-}) => {
-  const agentName =
-    availableAgents[selectedAgent]?.name || "Finding the best agent";
-
+export const LoadingIndicator: FC = () => {
   return (
     <Grid
       templateAreas={`"avatar name" "avatar message"`}
@@ -22,10 +12,10 @@ export const LoadingIndicator: FC<LoadingIndicatorProps> = ({
       className={styles.messageGrid}
     >
       <GridItem area="avatar">
-        <Avatar isAgent={true} agentName={agentName} />
+        <Avatar isAgent={true} agentName="Finding the best agent" />
       </GridItem>
       <GridItem area="name">
-        <Text className={styles.nameText}>{agentName}</Text>
+        <Text className={styles.nameText}>Finding the best agent</Text>
       </GridItem>
       <GridItem area="message">
         <Box className={styles.messageText}>
diff --git a/submodules/moragents_dockers/frontend/components/Settings/AgentSelection.tsx b/submodules/moragents_dockers/frontend/components/Settings/AgentSelection.tsx
index 99b5418..b812c26 100644
--- a/submodules/moragents_dockers/frontend/components/Settings/AgentSelection.tsx
+++ b/submodules/moragents_dockers/frontend/components/Settings/AgentSelection.tsx
@@ -91,8 +91,14 @@ export const AgentSelection: React.FC<AgentSelectionProps> = ({ onSave }) => {
   };
 
   return (
-    <Container maxW="container.md">
-      <VStack align="stretch" spacing={6}>
+    <Container
+      maxW="container.md"
+      h="100vh"
+      py={4}
+      display="flex"
+      flexDirection="column"
+    >
+      <VStack align="stretch" spacing={6} flex={1}>
         <Box>
           <Heading size="md" mb={3}>
             Agent Configuration
@@ -103,45 +109,41 @@ export const AgentSelection: React.FC<AgentSelectionProps> = ({ onSave }) => {
           </Text>
         </Box>
 
-        <VStack
-          align="stretch"
-          spacing={2}
-          maxH="500px"
-          overflowY="auto"
-          px={2}
-        >
-          {availableAgents.map((agent) => (
-            <Box
-              key={agent.name}
-              p={4}
-              borderWidth="1px"
-              borderColor={borderColor}
-              borderRadius="md"
-              width="100%"
-            >
-              <Checkbox
-                isChecked={selectedAgents.includes(agent.name)}
-                onChange={() => handleAgentToggle(agent.name)}
+        <Box flex={1} minH={0}>
+          <VStack align="stretch" spacing={2} h="100%" overflowY="auto" px={2}>
+            {availableAgents.map((agent) => (
+              <Box
+                key={agent.name}
+                p={4}
+                borderWidth="1px"
+                borderColor={borderColor}
+                borderRadius="md"
                 width="100%"
-                isDisabled={
-                  !selectedAgents.includes(agent.name) &&
-                  selectedAgents.length >= 6
-                }
               >
-                <Box ml={4}>
-                  <VStack align="start" width="100%">
-                    <Text fontWeight="medium" textAlign="left">
-                      {agent.human_readable_name}
-                    </Text>
-                    <Text fontSize="sm" color={textColor} textAlign="left">
-                      {agent.description}
-                    </Text>
-                  </VStack>
-                </Box>
-              </Checkbox>
-            </Box>
-          ))}
-        </VStack>
+                <Checkbox
+                  isChecked={selectedAgents.includes(agent.name)}
+                  onChange={() => handleAgentToggle(agent.name)}
+                  width="100%"
+                  isDisabled={
+                    !selectedAgents.includes(agent.name) &&
+                    selectedAgents.length >= 6
+                  }
+                >
+                  <Box ml={4}>
+                    <VStack align="start" width="100%">
+                      <Text fontWeight="medium" textAlign="left">
+                        {agent.human_readable_name}
+                      </Text>
+                      <Text fontSize="sm" color={textColor} textAlign="left">
+                        {agent.description}
+                      </Text>
+                    </VStack>
+                  </Box>
+                </Checkbox>
+              </Box>
+            ))}
+          </VStack>
+        </Box>
 
         <Button colorScheme="green" onClick={handleSave} size="md" width="100%">
           Save Configuration
diff --git a/submodules/moragents_dockers/frontend/next-env.d.ts b/submodules/moragents_dockers/frontend/next-env.d.ts
index fd36f94..725dd6f 100644
--- a/submodules/moragents_dockers/frontend/next-env.d.ts
+++ b/submodules/moragents_dockers/frontend/next-env.d.ts
@@ -3,4 +3,4 @@
 /// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
diff --git a/submodules/moragents_dockers/frontend/pages/index.tsx b/submodules/moragents_dockers/frontend/pages/index.tsx
index c079d77..43856c7 100644
--- a/submodules/moragents_dockers/frontend/pages/index.tsx
+++ b/submodules/moragents_dockers/frontend/pages/index.tsx
@@ -7,8 +7,6 @@ import {
   getMessagesHistory,
   sendSwapStatus,
   uploadFile,
-  setCoinbaseApiKeys,
-  setXApiKeys,
   createNewConversation,
   deleteConversation,
 } from "@/services/apiHooks";
@@ -28,44 +26,6 @@ const Home: NextPage = () => {
   const [showBackendError, setShowBackendError] = useState<boolean>(false);
 
   useEffect(() => {
-    // Set Coinbase API keys from localStorage if they exist
-    const cdpApiKey = localStorage.getItem("cdpApiKey");
-    const cdpApiSecret = localStorage.getItem("cdpApiSecret");
-
-    if (cdpApiKey && cdpApiSecret) {
-      setCoinbaseApiKeys(getHttpClient(), {
-        cdp_api_key: cdpApiKey,
-        cdp_api_secret: cdpApiSecret,
-      }).catch((error) => {
-        console.error("Failed to set initial Coinbase credentials:", error);
-      });
-    }
-
-    // Set Twitter API keys from localStorage if they exist
-    const apiKey = localStorage.getItem("apiKey");
-    const apiSecret = localStorage.getItem("apiSecret");
-    const accessToken = localStorage.getItem("accessToken");
-    const accessTokenSecret = localStorage.getItem("accessTokenSecret");
-    const bearerToken = localStorage.getItem("bearerToken");
-
-    if (
-      apiKey &&
-      apiSecret &&
-      accessToken &&
-      accessTokenSecret &&
-      bearerToken
-    ) {
-      setXApiKeys(getHttpClient(), {
-        api_key: apiKey,
-        api_secret: apiSecret,
-        access_token: accessToken,
-        access_token_secret: accessTokenSecret,
-        bearer_token: bearerToken,
-      }).catch((error) => {
-        console.error("Failed to set initial Twitter credentials:", error);
-      });
-    }
-
     getMessagesHistory(getHttpClient(), currentConversationId)
       .then((messages: ChatMessage[]) => {
         setChatHistory([...messages]);
@@ -115,16 +75,6 @@ const Home: NextPage = () => {
     return true;
   };
 
-  const handleNewConversation = async () => {
-    try {
-      const newConversationId = await createNewConversation(getHttpClient());
-      setCurrentConversationId(newConversationId);
-    } catch (e) {
-      console.error(`Failed to create new conversation. Error: ${e}`);
-      setShowBackendError(true);
-    }
-  };
-
   const handleDeleteConversation = async (conversationId: string) => {
     try {
       await deleteConversation(getHttpClient(), conversationId);
@@ -136,6 +86,7 @@ const Home: NextPage = () => {
       setShowBackendError(true);
     }
   };
+
   const handleCancelSwap = async (fromAction: number) => {
     if (!address) {
       return;
@@ -172,11 +123,12 @@ const Home: NextPage = () => {
         flexDirection: "column",
       }}
     >
-      <HeaderBar onNewConversation={handleNewConversation} />
+      <HeaderBar />
       <Flex flex="1" overflow="hidden">
         <Box>
           <LeftSidebar
             currentConversationId={currentConversationId}
+            setCurrentConversationId={setCurrentConversationId}
             onConversationSelect={setCurrentConversationId}
             onDeleteConversation={handleDeleteConversation}
           />
@@ -187,7 +139,6 @@ const Home: NextPage = () => {
             onCancelSwap={handleCancelSwap}
             onSubmitMessage={handleSubmitMessage}
             onBackendError={handleBackendError}
-            conversationId={currentConversationId}
           />
         </Box>
       </Flex>
diff --git a/submodules/moragents_dockers/frontend/services/apiHooks.ts b/submodules/moragents_dockers/frontend/services/apiHooks.ts
index b34e672..0365426 100644
--- a/submodules/moragents_dockers/frontend/services/apiHooks.ts
+++ b/submodules/moragents_dockers/frontend/services/apiHooks.ts
@@ -149,22 +149,15 @@ export const writeMessage = async (
   history.push(newMessage);
   let resp;
   try {
-    resp = await backendClient.post(
-      "/chat",
-      {
-        prompt: {
-          role: "user",
-          content: message,
-        },
-        chain_id: String(chainId),
-        wallet_address: address,
+    resp = await backendClient.post("/chat", {
+      prompt: {
+        role: "user",
+        content: message,
       },
-      {
-        params: {
-          conversation_id: conversationId,
-        },
-      }
-    );
+      chain_id: String(chainId),
+      wallet_address: address,
+      conversation_id: conversationId,
+    });
   } catch (e) {
     console.error(e);
   }