diff --git a/package.json b/package.json
index afdb7a10d..caeab2773 100644
--- a/package.json
+++ b/package.json
@@ -68,8 +68,8 @@
   },
   "dependencies": {
     "@sendbird/chat": "^4.11.3",
-    "@sendbird/react-uikit-message-template-view": "0.0.1-alpha.65",
-    "@sendbird/uikit-tools": "0.0.1-alpha.65",
+    "@sendbird/react-uikit-message-template-view": "0.0.1-alpha.69",
+    "@sendbird/uikit-tools": "0.0.1-alpha.69",
     "css-vars-ponyfill": "^2.3.2",
     "date-fns": "^2.16.1",
     "dompurify": "^3.0.1"
diff --git a/rollup.module-exports.mjs b/rollup.module-exports.mjs
index 4acb682b8..eda8392dc 100644
--- a/rollup.module-exports.mjs
+++ b/rollup.module-exports.mjs
@@ -239,5 +239,4 @@ export default {
   'ui/Word': 'src/ui/Word/index.tsx',
   'ui/FeedbackIconButton': 'src/ui/FeedbackIconButton/index.tsx',
   'ui/MobileFeedbackMenu': 'src/ui/MobileFeedbackMenu/index.tsx',
-  'ui/Carousel': 'src/ui/Carousel/index.tsx',
 };
diff --git a/src/lib/dux/appInfo/initialState.ts b/src/lib/dux/appInfo/initialState.ts
index b3ccc7d81..54b99449b 100644
--- a/src/lib/dux/appInfo/initialState.ts
+++ b/src/lib/dux/appInfo/initialState.ts
@@ -1,4 +1,5 @@
 export type ProcessedMessageTemplate = {
+  version: number;
   uiTemplate: string; // This is stringified ui_template.body.items
   colorVariables?: Record<string, string>;
 };
diff --git a/src/lib/dux/appInfo/utils.ts b/src/lib/dux/appInfo/utils.ts
index 11159c462..cc568d5d2 100644
--- a/src/lib/dux/appInfo/utils.ts
+++ b/src/lib/dux/appInfo/utils.ts
@@ -6,6 +6,7 @@ import { SendbirdMessageTemplate } from '../../../ui/TemplateMessageItemBody/typ
  */
 export const getProcessedTemplate = (parsedTemplate: SendbirdMessageTemplate): ProcessedMessageTemplate => {
   return {
+    version: parsedTemplate.ui_template.version,
     uiTemplate: JSON.stringify(parsedTemplate.ui_template.body.items),
     colorVariables: parsedTemplate.color_variables,
   };
diff --git a/src/modules/GroupChannel/components/MessageList/index.scss b/src/modules/GroupChannel/components/MessageList/index.scss
index 202804d51..ec150d546 100644
--- a/src/modules/GroupChannel/components/MessageList/index.scss
+++ b/src/modules/GroupChannel/components/MessageList/index.scss
@@ -10,7 +10,6 @@
     position: relative;
     height: 100%;
     overflow-x: hidden;
-    overflow-y: scroll;
   }
   .sendbird-separator,
   .sendbird-admin-message {
diff --git a/src/modules/GroupChannel/components/MessageTemplateWrapper/index.tsx b/src/modules/GroupChannel/components/MessageTemplateWrapper/index.tsx
index 0a8989018..350b3c388 100644
--- a/src/modules/GroupChannel/components/MessageTemplateWrapper/index.tsx
+++ b/src/modules/GroupChannel/components/MessageTemplateWrapper/index.tsx
@@ -9,10 +9,11 @@ export interface MessageTemplateWrapperProps extends MessageTemplateProps {
 
 export const MessageTemplateWrapper = ({
   message,
+  templateVersion,
   templateItems,
 }: MessageTemplateWrapperProps): ReactElement => {
   return <MessageTemplateProvider message={message}>
-    <MessageTemplate templateItems={templateItems} />
+    <MessageTemplate templateVersion={templateVersion} templateItems={templateItems} />
   </MessageTemplateProvider>;
 };
 
diff --git a/src/ui/Carousel/index.scss b/src/ui/Carousel/index.scss
deleted file mode 100644
index 2b36c0334..000000000
--- a/src/ui/Carousel/index.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.sendbird-carousel-items-wrapper {
-  display: flex;
-  box-sizing: border-box;
-}
\ No newline at end of file
diff --git a/src/ui/Carousel/index.tsx b/src/ui/Carousel/index.tsx
deleted file mode 100644
index 8cd540f46..000000000
--- a/src/ui/Carousel/index.tsx
+++ /dev/null
@@ -1,334 +0,0 @@
-import './index.scss';
-import React, { ReactElement, useEffect, useRef, useState } from 'react';
-
-const PADDING_WIDTH = 24;
-const CONTENT_LEFT_WIDTH = 40;
-const SWIPE_THRESHOLD = 15;
-const LAST_ITEM_RIGHT_SNAP_THRESHOLD = 100;
-
-interface ItemPosition {
-  start: number;
-  end: number;
-}
-
-interface CarouselItemProps {
-  key: string;
-  item: ReactElement;
-  defaultWidth: string;
-}
-
-/**
- * fixed sized template items should use its child width.
- * Whereas flex sized template items should use its parent's width.
- * @param item
- */
-function shouldRenderAsFixed(item: ReactElement) {
-  return item.props.templateItems[0].width?.type === 'fixed';
-}
-
-function CarouselItem({
-  item,
-  defaultWidth,
-}: CarouselItemProps): ReactElement {
-  return <div style={shouldRenderAsFixed(item) ? { width: 'fit-content' } : { minWidth: defaultWidth }}>
-    {item}
-  </div>;
-}
-
-interface CarouselProps {
-  id: string;
-  items: ReactElement[];
-  gap?: number;
-  classNameWithTouchAction?: string;
-}
-
-interface Position {
-  x: number;
-  y: number;
-}
-
-interface DraggingInfo {
-  scrolling: boolean;
-  dragging: boolean;
-  startPos: Position | null;
-  offset: number;
-  translateX: number;
-  currentIndex: number;
-}
-
-export const Carousel = React.memo(({
-  id,
-  items,
-  gap = 8,
-  classNameWithTouchAction = 'sendbird-conversation__messages-padding',
-}: CarouselProps): ReactElement => {
-  const carouselRef = useRef<HTMLDivElement>(null);
-  const screenWidth = window.innerWidth;
-  const defaultItemWidth = carouselRef.current?.clientWidth ?? 0;
-  const itemWidths = items.map((item) => {
-    if (shouldRenderAsFixed(item)) {
-      return item.props.templateItems[0].width?.value;
-    }
-    return defaultItemWidth;
-  });
-  const allItemsWidth = itemWidths.reduce((prev, curr) => prev + gap + curr);
-  const lastItemWidth = itemWidths[itemWidths.length - 1];
-  const isLastItemNarrow = lastItemWidth <= LAST_ITEM_RIGHT_SNAP_THRESHOLD;
-  const isLastTwoItemsFitScreen = getIsLastTwoItemsFitScreen();
-  const itemPositions: ItemPosition[] = getEachItemPositions();
-  const [draggingInfo, setDraggingInfo] = useState<DraggingInfo>({
-    scrolling: false,
-    dragging: false,
-    startPos: null,
-    offset: 0,
-    translateX: 0,
-    currentIndex: 0,
-  });
-
-  const handleMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {
-    setDraggingInfo({
-      ...draggingInfo,
-      scrolling: false,
-      dragging: true,
-      startPos: {
-        x: event.clientX,
-        y: event.clientY,
-      },
-      offset: 0,
-    });
-  };
-
-  const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {
-    if (!draggingInfo.dragging) return;
-    const currentX = event.clientX;
-    const newOffset = currentX - draggingInfo.startPos.x;
-    setDraggingInfo({
-      ...draggingInfo,
-      offset: newOffset,
-    });
-  };
-
-  const handleMouseUp = () => {
-    if (!draggingInfo.dragging) return;
-    handleDragEnd();
-  };
-
-  const blockScroll = () => {
-    const parentElements = document.getElementsByClassName(classNameWithTouchAction);
-    const parentElement: HTMLElement = parentElements[0] as HTMLElement;
-    if (parentElement) {
-      parentElement.style.touchAction = 'pan-x';
-    }
-  };
-
-  const unblockScroll = () => {
-    const parentElements = document.getElementsByClassName(classNameWithTouchAction);
-    const parentElement: HTMLElement = parentElements[0] as HTMLElement;
-    if (parentElement) {
-      parentElement.style.touchAction = 'pan-y';
-    }
-  };
-
-  const handleTouchStart = (event: React.TouchEvent<HTMLDivElement>) => {
-    setDraggingInfo({
-      ...draggingInfo,
-      scrolling: false,
-      dragging: false,
-      startPos: {
-        x: event.touches[0].clientX,
-        y: event.touches[0].clientY,
-      },
-      offset: 0,
-    });
-  };
-
-  useEffect(() => {
-    if (draggingInfo.scrolling) {
-      unblockScroll();
-    }
-
-  }, [draggingInfo.scrolling]);
-
-  const handleTouchMove = (event: React.TouchEvent<HTMLDivElement>) => {
-    if (!draggingInfo.startPos || draggingInfo.scrolling) return;
-
-    const startPos = draggingInfo.startPos;
-    const touchMoveX = event.touches[0].clientX;
-    const touchMoveY = event.touches[0].clientY;
-    const deltaX = Math.abs(touchMoveX - startPos.x);
-    const deltaY = Math.abs(touchMoveY - startPos.y);
-    const newOffset = touchMoveX - startPos.x;
-
-    if (newOffset === draggingInfo.offset) return;
-    if (draggingInfo.dragging) {
-      setDraggingInfo({
-        ...draggingInfo,
-        offset: newOffset,
-      });
-      return;
-    }
-    if (deltaY > deltaX) {
-      setDraggingInfo({
-        ...draggingInfo,
-        scrolling: true,
-      });
-    } else {
-      blockScroll();
-      setDraggingInfo({
-        ...draggingInfo,
-        dragging: true,
-        offset: newOffset,
-      });
-    }
-  };
-
-  const getNewDraggingInfo = (props: { newTranslateX?: number, nextIndex?: number } = {}): DraggingInfo => {
-    const { newTranslateX, nextIndex } = props;
-    const { translateX, currentIndex } = draggingInfo;
-    return {
-      scrolling: false,
-      dragging: false,
-      startPos: null,
-      offset: 0,
-      translateX: newTranslateX ?? translateX,
-      currentIndex: nextIndex ?? currentIndex,
-    };
-  };
-
-  const handleDragEnd = () => {
-    const offset = draggingInfo.offset;
-    const absOffset = Math.abs(offset);
-    if (absOffset < SWIPE_THRESHOLD) {
-      setDraggingInfo(getNewDraggingInfo());
-      return;
-    }
-    // If dragged to left, next index should be to the right
-    const currentIndex = draggingInfo.currentIndex;
-    if (offset < 0 && currentIndex < items.length - 1) {
-      const nextIndex = currentIndex + 1;
-      setDraggingInfo(getNewDraggingInfo({
-        newTranslateX: itemPositions[nextIndex].start,
-        nextIndex,
-      }));
-      // If dragged to right, next index should be to the left
-    } else if (offset > 0 && currentIndex > 0) {
-      const nextIndex = currentIndex - 1;
-      setDraggingInfo(getNewDraggingInfo({
-        newTranslateX: itemPositions[nextIndex].start,
-        nextIndex,
-      }));
-    } else {
-      setDraggingInfo(getNewDraggingInfo());
-    }
-  };
-  const handleTouchEnd = () => {
-    const { offset, currentIndex } = draggingInfo;
-    const absOffset = Math.abs(offset);
-    if (absOffset < SWIPE_THRESHOLD) {
-      setDraggingInfo(getNewDraggingInfo());
-      return;
-    }
-    // If dragged to left, next index should be to the right
-    if (offset < 0 && currentIndex < items.length - 1) {
-      const nextIndex = currentIndex + 1;
-      /**
-       * This is special logic for "더 보기" button for Socar use-case.
-       * The button will have a small width (less than 50px).
-       * We want to include this button in the view and snap to right padding wall IFF !isLastTwoItemsFitScreen.
-       */
-      if (isLastItemNarrow) {
-        if (isLastTwoItemsFitScreen) {
-          if (nextIndex !== items.length - 1) {
-            setDraggingInfo(getNewDraggingInfo({
-              newTranslateX: itemPositions[nextIndex].start,
-              nextIndex,
-            }));
-          } else {
-            setDraggingInfo(getNewDraggingInfo());
-          }
-        } else if (nextIndex !== items.length - 1) {
-          setDraggingInfo(getNewDraggingInfo({
-            newTranslateX: itemPositions[nextIndex].start,
-            nextIndex,
-          }));
-        } else {
-          const translateWidth = itemPositions[nextIndex].start - lastItemWidth;
-          const rightEmptyWidth = screenWidth - (allItemsWidth + translateWidth + PADDING_WIDTH + CONTENT_LEFT_WIDTH);
-          setDraggingInfo(getNewDraggingInfo({
-            newTranslateX: translateWidth + rightEmptyWidth,
-            nextIndex,
-          }));
-        }
-      } else {
-        setDraggingInfo(getNewDraggingInfo({
-          newTranslateX: itemPositions[nextIndex].start,
-          nextIndex,
-        }));
-      }
-      // If dragged to right, next index should be to the left
-    } else if (offset > 0 && currentIndex > 0) {
-      const nextIndex = currentIndex - 1;
-      setDraggingInfo(getNewDraggingInfo({
-        newTranslateX: itemPositions[nextIndex].start,
-        nextIndex,
-      }));
-    } else {
-      setDraggingInfo(getNewDraggingInfo());
-    }
-    if (draggingInfo.dragging) {
-      unblockScroll();
-    }
-  };
-
-  function getCurrentTranslateX() {
-    return draggingInfo.translateX + draggingInfo.offset;
-  }
-
-  function getIsLastTwoItemsFitScreen() {
-    const restItemsWidth = itemWidths.slice(-2).reduce((prev, curr) => prev + gap + curr);
-    const restTotalWidth = PADDING_WIDTH + CONTENT_LEFT_WIDTH + restItemsWidth;
-    return restTotalWidth <= screenWidth;
-  }
-
-  function getEachItemPositions(): ItemPosition[] {
-    let accumulator = 0;
-    return itemWidths.map((itemWidth, i): ItemPosition => {
-      if (i > 0) {
-        accumulator -= gap;
-      }
-      const itemPosition = {
-        start: accumulator,
-        end: accumulator - itemWidth,
-      };
-      accumulator -= itemWidth;
-      return itemPosition;
-    });
-  }
-
-  return (
-    <div
-      id={id}
-      ref={carouselRef}
-      onMouseDown={handleMouseDown}
-      onMouseMove={handleMouseMove}
-      onMouseUp={handleMouseUp}
-      onMouseLeave={handleMouseUp}
-      onTouchStart={handleTouchStart}
-      onTouchMove={handleTouchMove}
-      onTouchEnd={handleTouchEnd}
-      className='sendbird-carousel-items-wrapper'
-      style={{
-        cursor: draggingInfo.dragging ? 'grabbing' : 'grab',
-        transition: draggingInfo.dragging ? 'none' : 'transform 0.5s ease',
-        transform: `translateX(${getCurrentTranslateX()}px)`,
-        gap: gap,
-      }}
-    >
-      {items.map((item, index) => (
-        <CarouselItem key={`${id}-${index}`} item={item} defaultWidth={defaultItemWidth + 'px'}/>
-      ))}
-    </div>
-  );
-});
-
-export default Carousel;
diff --git a/src/ui/MessageContent/index.tsx b/src/ui/MessageContent/index.tsx
index 8390a3f5c..24d1581e1 100644
--- a/src/ui/MessageContent/index.tsx
+++ b/src/ui/MessageContent/index.tsx
@@ -262,8 +262,7 @@ export default function MessageContent(props: MessageContentProps): ReactElement
       onMouseLeave={() => setMouseHover(false)}
     >
       {/* left */}
-      {uiContainerType !== UI_CONTAINER_TYPES.FULL
-        && <div className={getClassName(['sendbird-message-content__left', isReactionEnabledClassName, isByMeClassName, useReplyingClassName])}>
+      {<div className={getClassName(['sendbird-message-content__left', isReactionEnabledClassName, isByMeClassName, useReplyingClassName])}>
         {
           renderSenderProfile({
             ...props,
diff --git a/src/ui/MessageTemplate/index.tsx b/src/ui/MessageTemplate/index.tsx
index dfb1f2778..9ca3f58d9 100644
--- a/src/ui/MessageTemplate/index.tsx
+++ b/src/ui/MessageTemplate/index.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import { parser, renderer } from '@sendbird/react-uikit-message-template-view';
 import { type ComponentsUnion, createMessageTemplate } from '@sendbird/uikit-message-template';
-import { MessageTemplateItem } from '../TemplateMessageItemBody/types';
 import './index.scss';
 
 export interface MessageTemplateProps {
-  templateItems: MessageTemplateItem[];
+  templateVersion: number;
+  templateItems: ComponentsUnion['properties'][];
 }
 
 const { MessageTemplate: CustomTemplate } = createMessageTemplate({
@@ -25,8 +25,8 @@ const { MessageTemplate: CustomTemplate } = createMessageTemplate({
   },
 });
 
-export function MessageTemplate({ templateItems }: MessageTemplateProps) {
-  return <CustomTemplate templateItems={templateItems as ComponentsUnion['properties'][]}/>;
+export function MessageTemplate({ templateItems, templateVersion }: MessageTemplateProps) {
+  return <CustomTemplate templateItems={templateItems} templateVersion={templateVersion} />;
 }
 
 export default MessageTemplate;
diff --git a/src/ui/TemplateMessageItemBody/index.tsx b/src/ui/TemplateMessageItemBody/index.tsx
index 832e47c76..a242c1373 100644
--- a/src/ui/TemplateMessageItemBody/index.tsx
+++ b/src/ui/TemplateMessageItemBody/index.tsx
@@ -3,7 +3,7 @@ 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, MessageTemplateData, MessageTemplateItem, SimpleTemplateData } from './types';
+import { CarouselItem, CarouselType, MessageTemplateData, MessageTemplateItem, SimpleTemplateData } from './types';
 import restoreNumbersFromMessageTemplateObject from './utils/restoreNumbersFromMessageTemplateObject';
 import mapData from './utils/mapData';
 import selectColorVariablesByTheme from './utils/selectColorVariablesByTheme';
@@ -12,15 +12,14 @@ import useSendbirdStateContext from '../../hooks/useSendbirdStateContext';
 import { ProcessedMessageTemplate, WaitingTemplateKeyData } from '../../lib/dux/appInfo/initialState';
 import FallbackTemplateMessageItemBody from './FallbackTemplateMessageItemBody';
 import LoadingTemplateMessageItemBody from './LoadingTemplateMessageItemBody';
-import Carousel from '../Carousel';
 import MessageTemplateErrorBoundary from '../MessageTemplate/messageTemplateErrorBoundary';
 
 const TEMPLATE_FETCH_RETRY_BUFFER_TIME_IN_MILLIES = 500; // It takes about 450ms for isError update
 
 interface RenderData {
-  filledMessageTemplateItemsList: MessageTemplateItem[][];
-  carouselItem: CarouselItem;
+  filledMessageTemplateItemsList: MessageTemplateItem[];
   isErrored: boolean;
+  templateVersion?: number;
 }
 
 interface TemplateMessageItemBodyProps {
@@ -100,7 +99,7 @@ export function TemplateMessageItemBody({
       cachedSimpleTemplates.push(simpleCachedTemplate);
       simpleTemplatesVariables.push(simpleTemplateData.variables);
     });
-    const filledMessageTemplateItemsList = cachedSimpleTemplates
+    const filledMessageTemplateItemsList: MessageTemplateItem[][] = cachedSimpleTemplates
       .map((cachedSimpleTemplate, index) => {
         const templateItems: MessageTemplateItem[] = JSON.parse(cachedSimpleTemplate.uiTemplate);
         const filledMessageTemplateItems: MessageTemplateItem[] = getFilledMessageTemplateWithData(
@@ -117,20 +116,19 @@ export function TemplateMessageItemBody({
   function getFilledMessageTemplateItemsForSimpleTemplate(
     templateItems: MessageTemplateItem[],
     colorVariables: Record<string, string>,
-  ) {
+  ): MessageTemplateItem[] {
     const filledMessageTemplateItems: MessageTemplateItem[] = getFilledMessageTemplateWithData(
       templateItems,
       templateData.variables ?? {},
       colorVariables,
       theme,
     );
-    return [filledMessageTemplateItems];
+    return filledMessageTemplateItems;
   }
 
   function getFilledMessageTemplateItems(): RenderData {
-    const result = {
+    const result: RenderData = {
       filledMessageTemplateItemsList: [],
-      carouselItem: undefined,
       isErrored: false,
     };
 
@@ -165,7 +163,7 @@ export function TemplateMessageItemBody({
         }
         if (
           templateData.view_variables
-          || parsedUiTemplate[0].type === 'carouselView'
+          || parsedUiTemplate[0].type === CarouselType
           || typeof parsedUiTemplate[0]['items'] === 'string'
           || parsedUiTemplate[0]['spacing']
         ) {
@@ -173,8 +171,8 @@ export function TemplateMessageItemBody({
             logger.error('TemplateMessageItemBody | template key suggests composite template but template data is missing view_variables: ', templateKey, templateData);
             throw new Error();
           }
-          const carouselItem: CarouselItem = parsedUiTemplate[0] as CarouselItem;
-          if (carouselItem.type !== 'carouselView'
+          const carouselItem = parsedUiTemplate[0] as unknown as CarouselItem;
+          if (carouselItem.type !== CarouselType
             || typeof carouselItem.items !== 'string'
             || !startsWithAtAndEndsWithBraces(carouselItem.items)
             || !carouselItem.spacing
@@ -192,10 +190,14 @@ export function TemplateMessageItemBody({
             logger.error('TemplateMessageItemBody | no reservation key found in view_variables: ', reservationKey, templateData.view_variables);
             throw new Error();
           }
-          result.filledMessageTemplateItemsList = getFilledMessageTemplateItemsForCarouselTemplate(
-            simpleTemplateDataList,
-          );
-          result.carouselItem = carouselItem;
+          result.templateVersion = cachedTemplate.version;
+          result.filledMessageTemplateItemsList = [{
+            type: carouselItem.type as any,
+            spacing: carouselItem.spacing,
+            items: getFilledMessageTemplateItemsForCarouselTemplate(
+              simpleTemplateDataList,
+            ),
+          }];
         } else {
           result.filledMessageTemplateItemsList = getFilledMessageTemplateItemsForSimpleTemplate(
             parsedUiTemplate,
@@ -268,21 +270,13 @@ export function TemplateMessageItemBody({
         fallbackMessage={<FallbackTemplateMessageItemBody className={className} message={message} isByMe={isByMe}/>}
         logger={logger}
       >
-        {
-          !renderData.carouselItem
-            ? <MessageTemplateWrapper message={message} templateItems={renderData.filledMessageTemplateItemsList[0]}/>
-            : <Carousel
-              id={message.messageId + ''}
-              items={renderData.filledMessageTemplateItemsList.map((filledMessageTemplateItems, i) => (
-                <MessageTemplateWrapper
-                  key={`${message.messageId}-${i}`}
-                  message={message}
-                  templateItems={filledMessageTemplateItems}
-                />
-              ))}
-              gap={renderData.carouselItem.spacing}
-            />
-        }
+        <MessageTemplateWrapper
+          message={message}
+          templateVersion={renderData.templateVersion}
+          templateItems={
+            renderData.filledMessageTemplateItemsList as MessageTemplateItem[]
+          }
+        />
       </MessageTemplateErrorBoundary>
     </div>
   );
diff --git a/src/ui/TemplateMessageItemBody/types.ts b/src/ui/TemplateMessageItemBody/types.ts
index 851330e60..ab3425b13 100644
--- a/src/ui/TemplateMessageItemBody/types.ts
+++ b/src/ui/TemplateMessageItemBody/types.ts
@@ -1,5 +1,4 @@
 import type { ComponentsUnion } from '@sendbird/uikit-message-template';
-import type { ViewStyle } from '@sendbird/uikit-message-template/src/types/styles';
 
 type SendbirdFontWeight = 'bold' | 'normal';
 
@@ -80,12 +79,14 @@ export type MessageTemplateTheme = {
   };
 };
 
-export type MessageTemplateItem = ComponentsUnion['properties'] | CarouselItem;
+export type MessageTemplateItem = ComponentsUnion['properties'];
+
+export const CarouselType = 'carouselView';
+
 export interface CarouselItem {
   type: string;
-  viewStyle?: ViewStyle;
   spacing: number;
-  items: string; // Reservation key. ex. "@some_key"
+  items: string; // Reservation key. ex. "{@some_key}"
 }
 
 // FIXME: This needs to be updated in the future.
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 8508301ac..1d3d9a383 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -284,7 +284,6 @@ export const isCompositeTemplateMessage = (message: CoreMessageType): boolean =>
 export enum UI_CONTAINER_TYPES {
   DEFAULT = '',
   WIDE = 'ui_container_type__wide',
-  FULL = 'ui_container_type__full',
   DEFAULT_CAROUSEL = 'ui_container_type__default-carousel',
 }
 
@@ -307,9 +306,7 @@ export const getMessageContentMiddleClassNameByContainerType = ({
     return UI_CONTAINER_TYPES.DEFAULT_CAROUSEL;
   }
   if (!isMobile) return UI_CONTAINER_TYPES.DEFAULT;
-  if (isTemplateMessage(message) && containerType === MessageContentMiddleContainerType.FULL) {
-    return UI_CONTAINER_TYPES.FULL;
-  } else if (containerType === MessageContentMiddleContainerType.WIDE) {
+  if (containerType === MessageContentMiddleContainerType.WIDE) {
     return UI_CONTAINER_TYPES.WIDE;
   }
   return UI_CONTAINER_TYPES.DEFAULT;
diff --git a/yarn.lock b/yarn.lock
index 492d4b231..b0e177a2b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2659,25 +2659,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@sendbird/react-uikit-message-template-view@npm:0.0.1-alpha.65":
-  version: 0.0.1-alpha.65
-  resolution: "@sendbird/react-uikit-message-template-view@npm:0.0.1-alpha.65"
+"@sendbird/react-uikit-message-template-view@npm:0.0.1-alpha.69":
+  version: 0.0.1-alpha.69
+  resolution: "@sendbird/react-uikit-message-template-view@npm:0.0.1-alpha.69"
   dependencies:
-    "@sendbird/uikit-message-template": ^0.0.1-alpha.65
+    "@sendbird/uikit-message-template": ^0.0.1-alpha.69
   peerDependencies:
     "@sendbird/chat": ">=4.3.0 <5"
     react: ">=16.8.6"
     react-dom: ">=16.8.6"
-  checksum: d44cf69c677a2b2a2e0aa6e90ad2aa918133cb9cb5d1ccd42d62e76e6c4ff823366bde2652998db4decf183aca4b7c001d3276e226965f5b484a06145aae5351
+  checksum: f3e5c23b21fcfb751a4a93ff49e11f2c00863f621c18d6ca807f85f74ee81fe30cb686111f82ff4506677622981c86e626312a2e8092a62bb0f2ab1acd061d79
   languageName: node
   linkType: hard
 
-"@sendbird/uikit-message-template@npm:^0.0.1-alpha.65":
-  version: 0.0.1-alpha.65
-  resolution: "@sendbird/uikit-message-template@npm:0.0.1-alpha.65"
+"@sendbird/uikit-message-template@npm:^0.0.1-alpha.69":
+  version: 0.0.1-alpha.69
+  resolution: "@sendbird/uikit-message-template@npm:0.0.1-alpha.69"
   peerDependencies:
     react: ">=16.8.6"
-  checksum: 6a430a3b3f53353b8a121fd78c8aa637baf86f9992b70cde161e10fd72e7ff0e1c9f2b716c1e0aa328f7ed1c7f750483c8d14a02205baef39edb04bfc9baf571
+  checksum: fcea34576ee09b59b871fd9cec34eb121047925e6d0d03a2a72b9ff5b10421ae89959d1a693b001d87f47ffb781bfd7a49354e4a22f2cc99b4e637cfba8a57c5
   languageName: node
   linkType: hard
 
@@ -2700,8 +2700,8 @@ __metadata:
     "@rollup/plugin-replace": ^5.0.4
     "@rollup/plugin-typescript": ^11.1.5
     "@sendbird/chat": ^4.11.3
-    "@sendbird/react-uikit-message-template-view": 0.0.1-alpha.65
-    "@sendbird/uikit-tools": 0.0.1-alpha.65
+    "@sendbird/react-uikit-message-template-view": 0.0.1-alpha.69
+    "@sendbird/uikit-tools": 0.0.1-alpha.69
     "@storybook/addon-actions": ^6.5.10
     "@storybook/addon-docs": ^6.5.10
     "@storybook/addon-links": ^6.5.10
@@ -2766,13 +2766,13 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@sendbird/uikit-tools@npm:0.0.1-alpha.65":
-  version: 0.0.1-alpha.65
-  resolution: "@sendbird/uikit-tools@npm:0.0.1-alpha.65"
+"@sendbird/uikit-tools@npm:0.0.1-alpha.69":
+  version: 0.0.1-alpha.69
+  resolution: "@sendbird/uikit-tools@npm:0.0.1-alpha.69"
   peerDependencies:
     "@sendbird/chat": ">=4.10.5 <5"
     react: ">=16.8.6"
-  checksum: c6a7fecc7dbae40901e3f42988db85ca8c53a01e40522a3165fce780888e56b95bd858c233b23cf3368615593edf7691ce8ae62898695d28214b06e14268a653
+  checksum: b1eb04697cbeceae0c4bf4c971a086934429c7dd2d6b7298b94fcccea746e6fc93a168c483130bfdea583a50de7d632174cf49b8798fc2f5e7beb937d16a12b2
   languageName: node
   linkType: hard