diff --git a/src/components/BitteAiChat.tsx b/src/components/BitteAiChat.tsx
index d767a3d..ee886b6 100644
--- a/src/components/BitteAiChat.tsx
+++ b/src/components/BitteAiChat.tsx
@@ -13,6 +13,7 @@ export const BitteAiChat = ({
   historyApiUrl,
   agentId,
   options,
+  messageComponents
 }: BitteAiChatProps) => {
   const [loadedData, setLoadedData] = useState({
     agentIdLoaded: "",
@@ -61,6 +62,7 @@ export const BitteAiChat = ({
         agentId={agentId ?? agentIdLoaded}
         messages={uiMessages}
         options={optionsProps}
+        messageComponents={messageComponents}
       />
     </AccountProvider>
   );
diff --git a/src/components/chat/ChatContent.tsx b/src/components/chat/ChatContent.tsx
index 55bb307..0bc195d 100644
--- a/src/components/chat/ChatContent.tsx
+++ b/src/components/chat/ChatContent.tsx
@@ -32,6 +32,7 @@ export const ChatContent = ({
   apiKey,
   options,
   messages: initialMessages,
+  messageComponents
 }: BitteAiChatProps) => {
   const chatId = useRef(options?.chatId || generateId()).current;
   const [isAtBottom, setIsAtBottom] = useState(true);
@@ -243,6 +244,7 @@ export const ChatContent = ({
                     textColor={textColor!}
                     agentImage={options?.agentImage}
                     addToolResult={addToolResult}
+                    components={messageComponents}
                   />
                 );
               })}
diff --git a/src/components/chat/MessageGroup.tsx b/src/components/chat/MessageGroup.tsx
index dcb02d0..dbe31e4 100644
--- a/src/components/chat/MessageGroup.tsx
+++ b/src/components/chat/MessageGroup.tsx
@@ -1,18 +1,15 @@
-import { useEffect, useState } from "react";
-
 import { MessageSquare } from "lucide-react";
-
-import { NearSafe } from "near-safe";
-
-import { Wallet } from "@near-wallet-selector/core";
-import { Account } from "near-api-js";
-import { cn, safeStringify } from "../../lib/utils";
-
 import { formatAgentId, getAgentIdFromMessage } from "../../lib/chat";
 import { BittePrimitiveName, DEFAULT_AGENT_ID } from "../../lib/constants";
 import { BITTE_BLACK_IMG } from "../../lib/images";
 import { isDataString } from "../../lib/regex";
-import { BitteToolResult, SmartActionAiMessage } from "../../types/types";
+import {
+  BitteToolResult,
+  ChatCustomComponents,
+  MessageGroupComponentProps,
+  SmartActionAiMessage,
+  ToolResultComponentProps,
+} from "../../types/types";
 import {
   Accordion,
   AccordionContent,
@@ -29,9 +26,11 @@ import { SAMessage } from "./Message";
 import { EvmTxCard } from "./transactions/EvmTxCard";
 import { ReviewSignMessage } from "./transactions/ReviewSignMessage";
 import { ReviewTransaction } from "./transactions/ReviewTransaction";
+import { cn } from "../../lib/utils";
+import { useEffect, useState } from "react";
 
 interface MessageGroupProps {
-  chatId: string | undefined;
+  chatId?: string;
   groupKey: string;
   messages: SmartActionAiMessage[];
   accountId: string;
@@ -39,9 +38,6 @@ interface MessageGroupProps {
   isLoading?: boolean;
   agentImage?: string;
   agentName?: string;
-  evmAdapter?: NearSafe;
-  account?: Account;
-  wallet?: Wallet;
   messageBackgroundColor: string;
   borderColor: string;
   textColor: string;
@@ -49,22 +45,103 @@ interface MessageGroupProps {
     toolCallId: string;
     result: BitteToolResult;
   }) => void;
+  components?: ChatCustomComponents;
 }
 
+// Default components
+const DefaultMessageContainer = ({
+  message,
+  isUser,
+  userName,
+  children,
+  style,
+}: MessageGroupComponentProps) => (
+  <Card
+    className='bitte-p-6'
+    style={{
+      backgroundColor: style.backgroundColor,
+      borderColor: style.borderColor,
+      color: style.textColor,
+    }}
+  >
+    <Accordion type='single' collapsible className='bitte-w-full'>
+      <AccordionItem value={message.id} className='bitte-border-0'>
+        <AccordionTrigger className='bitte-p-0'>
+          <div className='bitte-flex bitte-items-center bitte-justify-center bitte-gap-2'>
+            {isUser ? (
+              <>
+                <MessageSquare className='bitte-h-[18px] bitte-w-[18px]' />
+                <p className='bitte-text-[14px]'>{userName}</p>
+              </>
+            ) : (
+              <>
+                <ImageWithFallback
+                  src={message.agentImage || "/placeholder.svg"}
+                  fallbackSrc={BITTE_BLACK_IMG}
+                  className={cn(
+                    "bitte-h-[18px] bitte-w-[18px] bitte-rounded",
+                    message.agentImage === BITTE_BLACK_IMG
+                      ? "bitte-invert-0 bitte-dark:invert"
+                      : "bitte-dark:bg-card-list"
+                  )}
+                  alt={`${message.agentId} icon`}
+                />
+                <p className='bitte-text-[14px]'>
+                  {formatAgentId(message.agentId ?? "Bitte Assistant")}
+                </p>
+              </>
+            )}
+          </div>
+        </AccordionTrigger>
+        <AccordionContent
+          className='bitte-mt-6 bitte-border-t bitte-pb-0'
+          style={{ borderColor: style.borderColor }}
+        >
+          {children}
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  </Card>
+);
+
+const DefaultToolResult = ({
+  toolName,
+  result,
+  style,
+}: ToolResultComponentProps) => (
+  <div>
+    <div className='bitte-flex bitte-w-full bitte-items-center bitte-justify-between bitte-text-[12px]'>
+      <div>Tool Call</div>
+      <div className='bitte-rounded bitte-bg-shad-white-10 bitte-px-2 bitte-py-1'>
+        <code>{toolName}</code>
+      </div>
+    </div>
+    <div className='bitte-p-4'>{/* Tool result rendering logic */}</div>
+    <div
+      className='bitte-mt-2 bitte-border-t'
+      style={{ borderColor: style.borderColor }}
+    />
+  </div>
+);
+
 export const MessageGroup = ({
   groupKey,
   messages,
   accountId,
   creator,
-  isLoading,
   agentImage,
   messageBackgroundColor,
   borderColor,
   textColor,
   chatId,
   addToolResult,
+  components = {},
 }: MessageGroupProps) => {
-  // State to track agentId for each message
+  const {
+    MessageContainer = DefaultMessageContainer,
+    ToolResult = DefaultToolResult,
+  } = components;
+
   const [messagesWithAgentId, setMessagesWithAgentId] = useState<
     SmartActionAiMessage[]
   >([]);
@@ -97,235 +174,42 @@ export const MessageGroup = ({
   return (
     <div style={{ color: textColor }}>
       {messagesWithAgentId?.map((message, index) => {
-        const uniqueKey = `${groupKey}-${index}`;
-
-        if (message.toolInvocations) {
-          for (const invocation of message.toolInvocations) {
-            const { toolName, toolCallId, state, args } = invocation;
-            const result =
-              invocation.state === "result" ? invocation.result : null;
-
-            if (state !== "result") {
-              if (toolName === BittePrimitiveName.SIGN_MESSAGE) {
-                const { message, nonce, recipient, callbackUrl } = args;
-
-                return (
-                  <ReviewSignMessage
-                    chatId={chatId}
-                    message={message}
-                    nonce={nonce}
-                    recipient={recipient}
-                    callbackUrl={callbackUrl}
-                    textColor={textColor}
-                    messageBackgroundColor={messageBackgroundColor}
-                    borderColor={borderColor}
-                    addToolResult={(result) =>
-                      addToolResult({
-                        toolCallId: toolCallId,
-                        result,
-                      })
-                    }
-                  />
-                );
-              }
-
-              continue;
-            }
-
-            if (
-              toolName === BittePrimitiveName.GENERATE_TRANSACTION ||
-              toolName === BittePrimitiveName.TRANSFER_FT ||
-              toolName === BittePrimitiveName.GENERATE_EVM_TX
-            ) {
-              const transactions = result?.data?.transactions || [];
-              const evmSignRequest = result?.data?.evmSignRequest;
-
-              return (
-                <ErrorBoundary key={`${groupKey}-${message.id}`}>
-                  {evmSignRequest ? (
-                    <div className='bitte-my-4'>
-                      <EvmTxCard
-                        evmData={evmSignRequest}
-                        borderColor={borderColor}
-                        messageBackgroundColor={messageBackgroundColor}
-                        textColor={textColor}
-                      />
-                    </div>
-                  ) : (
-                    <div className='bitte-my-4'>
-                      <ReviewTransaction
-                        chatId={chatId}
-                        creator={creator}
-                        transactions={transactions}
-                        warnings={result?.warnings || []}
-                        evmData={evmSignRequest}
-                        agentId={formatAgentId(
-                          message.agentId || "Bitte-Assistant"
-                        )}
-                        walletLoading={isLoading}
-                        borderColor={borderColor}
-                        messageBackgroundColor={messageBackgroundColor}
-                        textColor={textColor}
-                      />
-                    </div>
-                  )}
-                </ErrorBoundary>
-              );
-            }
-          }
-        }
+        const isUser = message.role === "user";
+        const userName = creator || accountId;
 
         return (
-          <Card
-            className='bitte-p-6'
+          <MessageContainer
+            key={`${message.id}-${index}`}
+            message={message}
+            isUser={isUser}
+            userName={userName}
             style={{
               backgroundColor: messageBackgroundColor,
               borderColor: borderColor,
+              textColor: textColor,
             }}
-            key={`${message.id}-${index}`}
           >
-            <Accordion
-              type='single'
-              collapsible
-              className='bitte-w-full'
-              defaultValue={uniqueKey}
-            >
-              <AccordionItem value={uniqueKey} className='bitte-border-0'>
-                <AccordionTrigger className='bitte-p-0'>
-                  <div className='bitte-flex bitte-items-center bitte-justify-center bitte-gap-2'>
-                    {message.role === "user" ? (
-                      <>
-                        <MessageSquare className='bitte-h-[18px] bitte-w-[18px]' />
-                        <p className='bitte-text-[14px]'>
-                          {creator || accountId}
-                        </p>
-                      </>
-                    ) : (
-                      <>
-                        <ImageWithFallback
-                          src={message.agentImage}
-                          fallbackSrc={BITTE_BLACK_IMG}
-                          className={cn(
-                            "bitte-h-[18px] bitte-w-[18px] bitte-rounded",
-                            message.agentImage === BITTE_BLACK_IMG
-                              ? "bitte-invert-0 bitte-dark:invert"
-                              : "bitte-dark:bg-card-list"
-                          )}
-                          alt={`${message?.agentId} icon`}
-                        />
-                        <p className='bitte-text-[14px]'>
-                          {formatAgentId(message?.agentId ?? "Bitte Assistant")}
-                        </p>
-                      </>
-                    )}
-                  </div>
-                </AccordionTrigger>
-
-                <AccordionContent
-                  className='bitte-mt-6 bitte-border-t bitte-pb-0'
-                  style={{ borderColor: borderColor }}
-                >
-                  <div className='bitte-mt-6 bitte-flex bitte-w-full bitte-flex-col bitte-gap-2'>
-                    {message.content && (
-                      <div className='bitte-flex bitte-flex-col bitte-gap-4'>
-                        <SAMessage content={message.content} />
-                      </div>
-                    )}
-
-                    {message.toolInvocations?.map((toolInvocation, index) => {
-                      const { toolName, toolCallId, state } = toolInvocation;
-                      const result =
-                        toolInvocation.state === "result"
-                          ? toolInvocation.result
-                          : null;
-
-                      return (
-                        <div key={`${toolCallId}-${index}`}>
-                          <div className='bitte-flex bitte-w-full bitte-items-center bitte-justify-between bitte-text-[12px]'>
-                            <div>Tool Call</div>
-                            <div className='bitte-rounded bitte-bg-shad-white-10 bitte-px-2 bitte-py-1'>
-                              <code>{toolName}</code>
-                            </div>
-                          </div>
-                          <div className='bitte-p-4'>
-                            {(() => {
-                              if (state === "result") {
-                                switch (toolName) {
-                                  case BittePrimitiveName.GENERATE_IMAGE: {
-                                    return (
-                                      <img
-                                        src={result?.data?.url}
-                                        className='bitte-w-full'
-                                      />
-                                    );
-                                  }
-                                  case BittePrimitiveName.CREATE_DROP: {
-                                    return (
-                                      <div className='bitte-flex bitte-items-center bitte-justify-center bitte-gap-2'>
-                                        <Button asChild variant='link'>
-                                          <a
-                                            href={`/claim/${result.data}`}
-                                            target='_blank'
-                                          >
-                                            View Drop
-                                          </a>
-                                        </Button>
-                                      </div>
-                                    );
-                                  }
-
-                                  case BittePrimitiveName.RENDER_CHART: {
-                                    const {
-                                      title,
-                                      description,
-                                      chartConfig,
-                                      chartData,
-                                      metricData,
-                                      metricLabels,
-                                      dataFormat,
-                                      chartType,
-                                    } = result.data;
-
-                                    return (
-                                      <ChartWrapper
-                                        title={title}
-                                        description={description}
-                                        chartData={chartData}
-                                        chartConfig={chartConfig}
-                                        dataFormat={dataFormat}
-                                        chartType={chartType}
-                                        metricLabels={metricLabels}
-                                        metricData={metricData}
-                                      />
-                                    );
-                                  }
-                                  default: {
-                                    const safeData = safeStringify(
-                                      result?.data
-                                    );
-                                    return isDataString(safeData) ? (
-                                      <CodeBlock content={safeData} />
-                                    ) : (
-                                      <div>{safeData}</div>
-                                    );
-                                  }
-                                }
-                              }
-                            })()}
-                          </div>
-
-                          <div
-                            className='bitte-mt-2 bitte-border-t'
-                            style={{ borderColor: borderColor }}
-                          />
-                        </div>
-                      );
-                    })}
-                  </div>
-                </AccordionContent>
-              </AccordionItem>
-            </Accordion>
-          </Card>
+            <div className='bitte-mt-6 bitte-flex bitte-w-full bitte-flex-col bitte-gap-2'>
+              {message.content && (
+                <div className='bitte-flex bitte-flex-col bitte-gap-4'>
+                  <SAMessage content={message.content} />
+                </div>
+              )}
+
+              {message.toolInvocations?.map((toolInvocation, index) => (
+                <ToolResult
+                  key={`${toolInvocation.toolCallId}-${index}`}
+                  toolName={toolInvocation.toolName}
+                  result={
+                    toolInvocation.state === "result"
+                      ? toolInvocation.result
+                      : null
+                  }
+                  style={{ borderColor }}
+                />
+              ))}
+            </div>
+          </MessageContainer>
         );
       })}
     </div>
diff --git a/src/types/types.ts b/src/types/types.ts
index be4ad8f..0606200 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -230,6 +230,7 @@ export interface BitteAiChatProps {
   messages?: Message[];
   wallet?: WalletOptions;
   options?: BitteAiChatOptions;
+  messageComponents?: ChatCustomComponents
 }
 
 
@@ -332,4 +333,30 @@ export interface AccountCreationData {
   accountId: string;
   isCreated: boolean;
   txnHash?: string; // TODO - I believe this field is unused.
+}
+
+export interface MessageGroupComponentProps {
+  message: SmartActionAiMessage
+  isUser: boolean
+  userName: string
+  children: React.ReactNode
+  style: {
+    backgroundColor: string
+    borderColor: string
+    textColor: string
+  }
+}
+
+export interface ToolResultComponentProps {
+  toolName: string
+  result: any
+  style: {
+    borderColor: string
+  }
+}
+
+export interface ChatCustomComponents {
+    MessageContainer?: React.ComponentType<MessageGroupComponentProps>
+    ToolResult?: React.ComponentType<ToolResultComponentProps>
+  
 }
\ No newline at end of file