diff --git a/src/lib/dux/appInfo/utils.ts b/src/lib/dux/appInfo/utils.ts
index cc568d5d2..ea1ce6f4c 100644
--- a/src/lib/dux/appInfo/utils.ts
+++ b/src/lib/dux/appInfo/utils.ts
@@ -6,7 +6,7 @@ import { SendbirdMessageTemplate } from '../../../ui/TemplateMessageItemBody/typ
  */
 export const getProcessedTemplate = (parsedTemplate: SendbirdMessageTemplate): ProcessedMessageTemplate => {
   return {
-    version: parsedTemplate.ui_template.version,
+    version: Number(parsedTemplate.ui_template.version),
     uiTemplate: JSON.stringify(parsedTemplate.ui_template.body.items),
     colorVariables: parsedTemplate.color_variables,
   };
diff --git a/src/ui/MessageContent/MessageBody/index.tsx b/src/ui/MessageContent/MessageBody/index.tsx
index 3a9e370ca..07b1537c7 100644
--- a/src/ui/MessageContent/MessageBody/index.tsx
+++ b/src/ui/MessageContent/MessageBody/index.tsx
@@ -23,12 +23,14 @@ import { match } from 'ts-pattern';
 import TemplateMessageItemBody from '../../TemplateMessageItemBody';
 
 const MESSAGE_ITEM_BODY_CLASSNAME = 'sendbird-message-content__middle__message-item-body';
+export type RenderedTemplateBodyType = 'failed' | 'composite' | 'simple';
 
 export interface MessageBodyProps {
   channel: Nullable<GroupChannel>;
   message: CoreMessageType;
   showFileViewer?: (bool: boolean) => void;
   onMessageHeightChange?: (isBottomMessageAffected?: boolean) => void;
+  onTemplateMessageRenderedCallback?: (renderedTemplateBodyType: RenderedTemplateBodyType) => void;
 
   mouseHover: boolean;
   isMobile: boolean;
@@ -43,6 +45,7 @@ export default function MessageBody(props: MessageBodyProps): ReactElement {
     channel,
     showFileViewer,
     onMessageHeightChange,
+    onTemplateMessageRenderedCallback,
 
     mouseHover,
     isMobile,
@@ -66,6 +69,7 @@ export default function MessageBody(props: MessageBodyProps): ReactElement {
         message={message as BaseMessage}
         isByMe={isByMe}
         theme={config?.theme as SendbirdTheme}
+        onTemplateMessageRenderedCallback={onTemplateMessageRenderedCallback}
       />
     ))
     .when((message) => isOgMessageEnabledInGroupChannel
diff --git a/src/ui/MessageContent/index.tsx b/src/ui/MessageContent/index.tsx
index 24d1581e1..b9fd33bf2 100644
--- a/src/ui/MessageContent/index.tsx
+++ b/src/ui/MessageContent/index.tsx
@@ -1,4 +1,4 @@
-import React, { ReactElement, ReactNode, useContext, useEffect, useRef, useState } from 'react';
+import React, { ReactElement, ReactNode, useContext, useMemo, useRef, useState } from 'react';
 import format from 'date-fns/format';
 import './index.scss';
 
@@ -151,12 +151,21 @@ export default function MessageContent(props: MessageContentProps): ReactElement
   const [showFeedbackOptionsMenu, setShowFeedbackOptionsMenu] = useState(false);
   const [showFeedbackModal, setShowFeedbackModal] = useState(false);
   const [feedbackFailedText, setFeedbackFailedText] = useState('');
-  const [totalBottom, setTotalBottom] = useState<number>(0);
-
-  const uiContainerType: UI_CONTAINER_TYPES = getMessageContentMiddleClassNameByContainerType({
+  const [uiContainerType, setUiContainerType] = useState<UI_CONTAINER_TYPES>(getMessageContentMiddleClassNameByContainerType({
     message,
     isMobile,
-  });
+  }));
+
+  const onTemplateMessageRenderedCallback = (renderedTemplateType: 'failed' | 'composite' | 'simple') => {
+    if (renderedTemplateType === 'failed') {
+      setUiContainerType(UI_CONTAINER_TYPES.DEFAULT);
+    } else if (renderedTemplateType === 'composite') {
+      /**
+       * Composite templates must have default carousel view irregardless of given containerType.
+       */
+      setUiContainerType(UI_CONTAINER_TYPES.DEFAULT_CAROUSEL);
+    }
+  };
 
   const { stringSet } = useContext(LocalizationContext);
 
@@ -200,6 +209,22 @@ export default function MessageContent(props: MessageContentProps): ReactElement
 
   const isTimestampBottom = !!uiContainerType;
 
+  const getTotalBottom = (): number => {
+    let sum = 2;
+    if (timestampRef.current && isTimestampBottom) {
+      sum += 4 + timestampRef.current.clientHeight;
+    }
+    if (threadRepliesRef.current) {
+      sum += 4 + threadRepliesRef.current.clientHeight;
+    }
+    if (feedbackButtonsRef.current) {
+      sum += 4 + feedbackButtonsRef.current.clientHeight;
+    }
+    return sum;
+  };
+
+  const totalBottom = useMemo(() => getTotalBottom(), [isTimestampBottom]);
+
   const onCloseFeedbackForm = () => {
     setShowFeedbackModal(false);
   };
@@ -233,23 +258,6 @@ export default function MessageContent(props: MessageContentProps): ReactElement
     return (<ClientAdminMessage message={message as AdminMessage} />);
   }
 
-  useEffect(() => {
-    const getTotalBottom = (): number => {
-      let sum = 2;
-      if (timestampRef.current && isTimestampBottom) {
-        sum += 4 + timestampRef.current.clientHeight;
-      }
-      if (threadRepliesRef.current) {
-        sum += 4 + threadRepliesRef.current.clientHeight;
-      }
-      if (feedbackButtonsRef.current) {
-        sum += 4 + feedbackButtonsRef.current.clientHeight;
-      }
-      return sum;
-    };
-    setTotalBottom(getTotalBottom());
-  }, [isTimestampBottom]);
-
   return (
     <div
       className={getClassName([
@@ -382,6 +390,7 @@ export default function MessageContent(props: MessageContentProps): ReactElement
               config,
               isReactionEnabledInChannel,
               isByMe,
+              onTemplateMessageRenderedCallback,
             })
           }
           {/* reactions */}
diff --git a/src/ui/MessageTemplate/messageTemplateErrorBoundary.tsx b/src/ui/MessageTemplate/messageTemplateErrorBoundary.tsx
index cae0522d6..5394c77de 100644
--- a/src/ui/MessageTemplate/messageTemplateErrorBoundary.tsx
+++ b/src/ui/MessageTemplate/messageTemplateErrorBoundary.tsx
@@ -1,9 +1,12 @@
 import { Component, ErrorInfo, ReactNode } from 'react';
 import { LoggerInterface } from '../../lib/Logger';
+import { RenderedTemplateBodyType } from '../MessageContent/MessageBody';
 
 interface ErrorBoundaryProps {
   children: ReactNode;
   fallbackMessage: ReactNode;
+  onTemplateMessageRenderedCallback: (renderedTemplateBodyType: RenderedTemplateBodyType) => void;
+  isComposite?: boolean;
   logger?: LoggerInterface;
 }
 
@@ -27,8 +30,10 @@ export class MessageTemplateErrorBoundary extends Component<ErrorBoundaryProps,
 
   render() {
     if (this.state.hasError) {
+      this.props.onTemplateMessageRenderedCallback('failed');
       return this.props.fallbackMessage;
     }
+    this.props.onTemplateMessageRenderedCallback(this.props.isComposite ? 'composite' : 'simple');
     return this.props.children;
   }
 }
diff --git a/src/ui/TemplateMessageItemBody/index.tsx b/src/ui/TemplateMessageItemBody/index.tsx
index f5adc9852..7b381fa0c 100644
--- a/src/ui/TemplateMessageItemBody/index.tsx
+++ b/src/ui/TemplateMessageItemBody/index.tsx
@@ -3,7 +3,13 @@ import React, { ReactElement, useEffect, useState } from 'react';
 import type { BaseMessage } from '@sendbird/chat/message';
 import { getClassName, removeAtAndBraces, startsWithAtAndEndsWithBraces } from '../../utils';
 import MessageTemplateWrapper from '../../modules/GroupChannel/components/MessageTemplateWrapper';
-import { CarouselItem, CarouselType, MessageTemplateData, MessageTemplateItem, SimpleTemplateData } from './types';
+import {
+  CarouselItem,
+  MessageTemplateData,
+  MessageTemplateItem,
+  SendbirdUiTemplate,
+  SimpleTemplateData,
+} from './types';
 import restoreNumbersFromMessageTemplateObject from './utils/restoreNumbersFromMessageTemplateObject';
 import mapData from './utils/mapData';
 import selectColorVariablesByTheme from './utils/selectColorVariablesByTheme';
@@ -13,12 +19,15 @@ import { ProcessedMessageTemplate, WaitingTemplateKeyData } from '../../lib/dux/
 import FallbackTemplateMessageItemBody from './FallbackTemplateMessageItemBody';
 import LoadingTemplateMessageItemBody from './LoadingTemplateMessageItemBody';
 import MessageTemplateErrorBoundary from '../MessageTemplate/messageTemplateErrorBoundary';
+import { RenderedTemplateBodyType } from '../MessageContent/MessageBody';
+import { CompositeComponentType } from '@sendbird/uikit-message-template';
 
 const TEMPLATE_FETCH_RETRY_BUFFER_TIME_IN_MILLIES = 500; // It takes about 450ms for isError update
 
 interface RenderData {
   filledMessageTemplateItemsList: MessageTemplateItem[];
   isErrored: boolean;
+  isComposite?: boolean;
   templateVersion?: number;
 }
 
@@ -27,25 +36,34 @@ interface TemplateMessageItemBodyProps {
   message: BaseMessage;
   isByMe?: boolean;
   theme?: SendbirdTheme;
-  onLoad?: () => void;
+  onTemplateMessageRenderedCallback?: (renderedTemplateBodyType: RenderedTemplateBodyType) => void;
 }
 
 /**
  * Returns copied message template object filled with given template data and color variables.
  */
-const getFilledMessageTemplateWithData = (
+const getFilledMessageTemplateWithData = ({
+  template,
+  templateData = {},
+  colorVariables,
+  theme,
+}: {
   template: MessageTemplateItem[],
-  templateData: Record<string, any>,
-  colorVariables: Record<string, string>,
-  theme: SendbirdTheme,
-): MessageTemplateItem[] => {
-  const selectedThemeColorVariables = selectColorVariablesByTheme({
-    colorVariables,
-    theme,
-  });
+  templateData?: Record<string, any>,
+  colorVariables?: Record<string, string>,
+  theme?: SendbirdTheme,
+}): MessageTemplateItem[] => {
+  let selectedThemeColorVariables = {};
+  if (colorVariables && theme) {
+    selectedThemeColorVariables = selectColorVariablesByTheme({
+      colorVariables,
+      theme,
+    });
+  }
+  const source = { ...templateData, ...selectedThemeColorVariables };
   const parsedTemplate: MessageTemplateItem[] = mapData({
     template: restoreNumbersFromMessageTemplateObject(template) as any,
-    source: { ...templateData, ...selectedThemeColorVariables },
+    source,
   }) as any;
   return parsedTemplate;
 };
@@ -55,16 +73,27 @@ export function TemplateMessageItemBody({
   message,
   isByMe = false,
   theme = 'light',
+  onTemplateMessageRenderedCallback = () => { /* noop */ },
 }: TemplateMessageItemBodyProps): ReactElement {
   const templateData: MessageTemplateData | undefined = message.extendedMessagePayload?.['template'] as MessageTemplateData;
+
+  const getFailedBody = () => {
+    onTemplateMessageRenderedCallback('failed');
+    return <FallbackTemplateMessageItemBody
+      className={className}
+      message={message}
+      isByMe={isByMe}
+    />;
+  };
+
   if (!templateData?.key) {
-    return <FallbackTemplateMessageItemBody className={className} message={message} isByMe={isByMe} />;
+    return getFailedBody();
   }
   const templateKey = templateData.key;
 
   const globalState = useSendbirdStateContext();
   if (!globalState) {
-    return <FallbackTemplateMessageItemBody className={className} message={message} isByMe={isByMe} />;
+    return getFailedBody();
   }
 
   const {
@@ -86,43 +115,67 @@ export function TemplateMessageItemBody({
     setRenderData,
   ] = useState<RenderData>(getFilledMessageTemplateItems());
 
-  function getFilledMessageTemplateItemsForCarouselTemplate(simpleTemplateDataList: SimpleTemplateData[]) {
+  function getFilledMessageTemplateItemsForCarouselTemplateByMessagePayload(simpleTemplateDataList: SimpleTemplateData[]): {
+    maxVersion: number,
+    filledTemplates: MessageTemplateItem[][],
+  } {
     const cachedSimpleTemplates: ProcessedMessageTemplate[] = [];
     const simpleTemplatesVariables: Array<Record<string, any> | undefined> = [];
+    let maxVersion = 0;
     simpleTemplateDataList.forEach((simpleTemplateData: SimpleTemplateData) => {
       const simpleTemplateKey = simpleTemplateData.key;
       if (!simpleTemplateKey) {
         logger.error('TemplateMessageItemBody | simple template keys are not found in view_variables: ', simpleTemplateDataList);
-        throw new Error();
+        throw new Error('TemplateMessageItemBody | simple template keys are not found in view_variables.');
       }
       const simpleCachedTemplate = getCachedTemplate(simpleTemplateKey);
       cachedSimpleTemplates.push(simpleCachedTemplate);
       simpleTemplatesVariables.push(simpleTemplateData.variables);
+      maxVersion = Math.max(maxVersion, simpleCachedTemplate.version);
     });
     const filledMessageTemplateItemsList: MessageTemplateItem[][] = cachedSimpleTemplates
       .map((cachedSimpleTemplate, index) => {
         const templateItems: MessageTemplateItem[] = JSON.parse(cachedSimpleTemplate.uiTemplate);
-        const filledMessageTemplateItems: MessageTemplateItem[] = getFilledMessageTemplateWithData(
-          templateItems,
-          simpleTemplatesVariables[index] ?? {},
-          cachedSimpleTemplate.colorVariables,
+        const filledMessageTemplateItems: MessageTemplateItem[] = getFilledMessageTemplateWithData({
+          template: templateItems,
+          templateData: simpleTemplatesVariables[index],
+          colorVariables: cachedSimpleTemplate.colorVariables,
           theme,
-        );
+        });
         return filledMessageTemplateItems;
       });
-    return filledMessageTemplateItemsList;
+    return {
+      maxVersion,
+      filledTemplates: filledMessageTemplateItemsList,
+    };
+  }
+
+  function getFilledMessageTemplateItemsForCarouselTemplate(uiTemplates: SendbirdUiTemplate[]): {
+    maxVersion: number,
+    filledTemplates: MessageTemplateItem[][],
+  } {
+    let maxVersion = 0;
+    const filledTemplates: MessageTemplateItem[][] = [];
+    uiTemplates.forEach((uiTemplate: SendbirdUiTemplate) => {
+      maxVersion = Math.max(maxVersion, uiTemplate.version);
+      filledTemplates.push(uiTemplate.body.items);
+    });
+    return {
+      maxVersion,
+      filledTemplates,
+    };
   }
 
   function getFilledMessageTemplateItemsForSimpleTemplate(
     templateItems: MessageTemplateItem[],
-    colorVariables: Record<string, string>,
+    colorVariables?: Record<string, string>,
   ): MessageTemplateItem[] {
-    const filledMessageTemplateItems: MessageTemplateItem[] = getFilledMessageTemplateWithData(
-      templateItems,
-      templateData.variables ?? {},
+    const filledMessageTemplateItems: MessageTemplateItem[] = getFilledMessageTemplateWithData({
+      template: templateItems,
+      templateData: templateData?.variables ?? {},
       colorVariables,
       theme,
-    );
+    });
     return filledMessageTemplateItems;
   }
 
@@ -165,46 +218,59 @@ export function TemplateMessageItemBody({
         const parsedUiTemplate: MessageTemplateItem[] = JSON.parse(cachedTemplate.uiTemplate);
         if (!Array.isArray(parsedUiTemplate) || parsedUiTemplate.length === 0) {
           logger.error('TemplateMessageItemBody | parsed template is missing ui_template: ', parsedUiTemplate);
-          throw new Error();
+          throw new Error('TemplateMessageItemBody | parsed template is missing ui_template. See error log in console for details');
         }
-        if (
-          templateData.view_variables
-          || parsedUiTemplate[0].type === CarouselType
-          || typeof parsedUiTemplate[0]['items'] === 'string'
-          || parsedUiTemplate[0]['spacing']
-        ) {
-          if (!templateData.view_variables) {
-            logger.error('TemplateMessageItemBody | template key suggests composite template but template data is missing view_variables: ', templateKey, templateData);
-            throw new Error();
-          }
+        /**
+         * Composite template validation
+         */
+        if (parsedUiTemplate[0].type === CompositeComponentType.Carousel) {
           const carouselItem = parsedUiTemplate[0] as unknown as CarouselItem;
-          if (carouselItem.type !== CarouselType
-            || typeof carouselItem.items !== 'string'
-            || !startsWithAtAndEndsWithBraces(carouselItem.items)
-            || !carouselItem.spacing
-          ) {
-            logger.error('TemplateMessageItemBody | composite template is malformed: ', templateKey, carouselItem);
-            throw new Error();
-          }
           if (parsedUiTemplate.length > 1) { // TODO: in future, support multiple templates
             logger.error('TemplateMessageItemBody | composite template currently does not support multiple items: ', parsedUiTemplate);
-            throw new Error();
+            throw new Error('TemplateMessageItemBody | composite template currently does not support multiple items. See error log in console for details');
           }
-          const reservationKey = removeAtAndBraces(carouselItem.items);
-          const simpleTemplateDataList: SimpleTemplateData[] | undefined = templateData.view_variables[reservationKey];
-          if (!simpleTemplateDataList) {
-            logger.error('TemplateMessageItemBody | no reservation key found in view_variables: ', reservationKey, templateData.view_variables);
-            throw new Error();
-          }
-          result.templateVersion = cachedTemplate.version;
-          result.filledMessageTemplateItemsList = [{
-            type: carouselItem.type as any,
-            spacing: carouselItem.spacing,
-            items: getFilledMessageTemplateItemsForCarouselTemplate(
+          if (typeof carouselItem.items === 'string') {
+            if (!startsWithAtAndEndsWithBraces(carouselItem.items)) {
+              logger.error('TemplateMessageItemBody | composite template with reservation key must follow the following string format "{@your-reservation-key}": ', templateKey, carouselItem);
+              throw new Error('TemplateMessageItemBody | composite template with reservation key must follow the following string format "{@your-reservation-key}". See error log in console for details');
+            }
+            if (!templateData.view_variables) {
+              logger.error('TemplateMessageItemBody | template key suggests composite template but template data is missing view_variables: ', templateKey, templateData);
+              throw new Error('TemplateMessageItemBody | template key suggests composite template but template data is missing view_variables. See error log in console for details');
+            }
+            const reservationKey = removeAtAndBraces(carouselItem.items);
+            const simpleTemplateDataList: SimpleTemplateData[] | undefined = templateData.view_variables[reservationKey];
+            if (!simpleTemplateDataList) {
+              logger.error('TemplateMessageItemBody | no reservation key found in view_variables: ', reservationKey, templateData.view_variables);
+              throw new Error('TemplateMessageItemBody | no reservation key found in view_variables. See error log in console for details');
+            }
+            const { maxVersion, filledTemplates } = getFilledMessageTemplateItemsForCarouselTemplateByMessagePayload(
               simpleTemplateDataList,
-            ),
-          }];
+            );
+            result.isComposite = true;
+            result.templateVersion = Math.max(cachedTemplate.version, maxVersion);
+            result.filledMessageTemplateItemsList = [{
+              type: carouselItem.type as CompositeComponentType,
+              spacing: carouselItem.spacing,
+              items: filledTemplates,
+            }];
+          } else if (Array.isArray(carouselItem.items)) {
+            const { maxVersion, filledTemplates } = getFilledMessageTemplateItemsForCarouselTemplate(
+              carouselItem.items,
+            );
+            result.isComposite = true;
+            result.templateVersion = Math.max(cachedTemplate.version, maxVersion);
+            result.filledMessageTemplateItemsList = [{
+              type: carouselItem.type as CompositeComponentType,
+              spacing: carouselItem.spacing,
+              items: filledTemplates,
+            }];
+          } else {
+            logger.error('TemplateMessageItemBody | composite template is malformed: ', templateKey, carouselItem);
+            throw new Error('TemplateMessageItemBody | composite template is malformed. See error log in console for details');
+          }
         } else {
+          result.templateVersion = cachedTemplate.version;
           result.filledMessageTemplateItemsList = getFilledMessageTemplateItemsForSimpleTemplate(
             parsedUiTemplate,
             cachedTemplate.colorVariables,
@@ -249,7 +315,7 @@ export function TemplateMessageItemBody({
         ) {
           keysToUpdate.push(templateKey);
         } else if (waitingTemplateKeyData.erroredMessageIds.indexOf(message.messageId) > -1) {
-          throw new Error();
+          throw new Error(`TemplateMessageItemBody | fetching template key ${templateKey} for messageId: ${message.messageId} has failed.`);
         }
       });
       if (keysToUpdate.length > 0) {
@@ -259,13 +325,12 @@ export function TemplateMessageItemBody({
   }
 
   if (renderData.isErrored) {
-    return <FallbackTemplateMessageItemBody className={className} message={message} isByMe={isByMe} />;
+    return getFailedBody();
   }
 
   if (renderData.filledMessageTemplateItemsList.length === 0) {
     return <LoadingTemplateMessageItemBody className={className} isByMe={isByMe} />;
   }
-
   return (
     <div className={getClassName([
       className,
@@ -273,7 +338,15 @@ export function TemplateMessageItemBody({
       'sendbird-template-message-item-body',
     ])}>
       <MessageTemplateErrorBoundary
-        fallbackMessage={<FallbackTemplateMessageItemBody className={className} message={message} isByMe={isByMe}/>}
+        fallbackMessage={
+          <FallbackTemplateMessageItemBody
+            className={className}
+            message={message}
+            isByMe={isByMe}
+          />
+        }
+        onTemplateMessageRenderedCallback={onTemplateMessageRenderedCallback}
+        isComposite={renderData.isComposite}
         logger={logger}
       >
         <MessageTemplateWrapper
diff --git a/src/ui/TemplateMessageItemBody/types.ts b/src/ui/TemplateMessageItemBody/types.ts
index ab3425b13..4a8dbce9d 100644
--- a/src/ui/TemplateMessageItemBody/types.ts
+++ b/src/ui/TemplateMessageItemBody/types.ts
@@ -1,4 +1,4 @@
-import type { ComponentsUnion } from '@sendbird/uikit-message-template';
+import { ComponentsUnion, CompositeComponentType } from '@sendbird/uikit-message-template';
 
 type SendbirdFontWeight = 'bold' | 'normal';
 
@@ -81,12 +81,10 @@ export type MessageTemplateTheme = {
 
 export type MessageTemplateItem = ComponentsUnion['properties'];
 
-export const CarouselType = 'carouselView';
-
 export interface CarouselItem {
-  type: string;
+  type: CompositeComponentType.Carousel;
   spacing: number;
-  items: string; // Reservation key. ex. "{@some_key}"
+  items: string | SendbirdUiTemplate[]; // Reservation key. ex. "{@some_key}"
 }
 
 // FIXME: This needs to be updated in the future.
@@ -99,16 +97,18 @@ export type SimpleTemplateData = {
   variables?: Record<string, any>;
 };
 
+export interface SendbirdUiTemplate {
+  version: number;
+  body: {
+    items: MessageTemplateItem[];
+  };
+}
+
 export type SendbirdMessageTemplate = {
   key: string;
   created_at: number;
   updated_at: number;
-  ui_template: {
-    version: number;
-    body: {
-      items: MessageTemplateItem[];
-    };
-  };
+  ui_template: SendbirdUiTemplate;
   name?: string;
   color_variables?: Record<string, string>;
 };
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 1d3d9a383..0dbb6a914 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -276,11 +276,6 @@ export const isThreadMessage = (message: CoreMessageType): boolean => (
 export const isTemplateMessage = (message: CoreMessageType): boolean => !!(
   message && message.extendedMessagePayload?.['template']
 );
-
-export const isCompositeTemplateMessage = (message: CoreMessageType): boolean => !!(
-  message && message.extendedMessagePayload?.['template']?.['view_variables']
-);
-
 export enum UI_CONTAINER_TYPES {
   DEFAULT = '',
   WIDE = 'ui_container_type__wide',
@@ -299,12 +294,6 @@ export const getMessageContentMiddleClassNameByContainerType = ({
    * WIDE: all message types.
    */
   const containerType: string | undefined = message.extendedMessagePayload?.['ui']?.['container_type'];
-  if (isCompositeTemplateMessage(message)) {
-    /**
-     * Composite templates must have default carousel view irregardless of given containerType.
-     */
-    return UI_CONTAINER_TYPES.DEFAULT_CAROUSEL;
-  }
   if (!isMobile) return UI_CONTAINER_TYPES.DEFAULT;
   if (containerType === MessageContentMiddleContainerType.WIDE) {
     return UI_CONTAINER_TYPES.WIDE;