diff --git a/src/views/room/widgets/chat-input/style-selector/ChatInputStyleSelectorView.tsx b/src/views/room/widgets/chat-input/ChatInputStyleSelectorView.tsx
similarity index 56%
rename from src/views/room/widgets/chat-input/style-selector/ChatInputStyleSelectorView.tsx
rename to src/views/room/widgets/chat-input/ChatInputStyleSelectorView.tsx
index 04bcb68f..828f762a 100644
--- a/src/views/room/widgets/chat-input/style-selector/ChatInputStyleSelectorView.tsx
+++ b/src/views/room/widgets/chat-input/ChatInputStyleSelectorView.tsx
@@ -1,8 +1,15 @@
-import { FC, MouseEvent, useCallback, useEffect, useState } from 'react';
+import { FC, MouseEvent, useEffect, useState } from 'react';
 import { Overlay, Popover } from 'react-bootstrap';
-import { BatchUpdates } from '../../../../../hooks';
-import { NitroCardContentView, NitroCardGridItemView, NitroCardGridView } from '../../../../../layout';
-import { ChatInputStyleSelectorViewProps } from './ChatInputStyleSelectorView.types';
+import { Base, Flex, Grid } from '../../../../common';
+import { BatchUpdates } from '../../../../hooks';
+import { NitroCardContentView } from '../../../../layout';
+
+interface ChatInputStyleSelectorViewProps
+{
+    chatStyleId: number;
+    chatStyleIds: number[];
+    selectChatStyleId: (styleId: number) => void;
+}
 
 export const ChatInputStyleSelectorView: FC<ChatInputStyleSelectorViewProps> = props =>
 {
@@ -10,13 +17,6 @@ export const ChatInputStyleSelectorView: FC<ChatInputStyleSelectorViewProps> = p
     const [ target, setTarget ] = useState<(EventTarget & HTMLElement)>(null);
     const [ selectorVisible, setSelectorVisible ] = useState(false);
 
-    useEffect(() =>
-    {
-        if(selectorVisible) return;
-
-        setTarget(null);
-    }, [ selectorVisible ]);
-
     const selectStyle = (styleId: number) =>
     {
         BatchUpdates(() =>
@@ -26,7 +26,7 @@ export const ChatInputStyleSelectorView: FC<ChatInputStyleSelectorViewProps> = p
         });
     }
 
-    const toggleSelector = useCallback((event: MouseEvent<HTMLElement>) =>
+    const toggleSelector = (event: MouseEvent<HTMLElement>) =>
     {
         BatchUpdates(() =>
         {
@@ -41,26 +41,33 @@ export const ChatInputStyleSelectorView: FC<ChatInputStyleSelectorViewProps> = p
 
             if(visible) setTarget((event.target as (EventTarget & HTMLElement)));
         })
-    }, []);
+    }
+
+    useEffect(() =>
+    {
+        if(selectorVisible) return;
+
+        setTarget(null);
+    }, [ selectorVisible ]);
 
     return (
         <>
-            <i className="icon chatstyles-icon cursor-pointer" onClick={ toggleSelector } />
+            <Base pointer className="icon chatstyles-icon" onClick={ toggleSelector } />
             <Overlay show={ selectorVisible } target={ target } placement="top">
-                <Popover className="nitro-chat-style-selector-container" id="chat-style-selector">
-                    <NitroCardContentView className="bg-transparent overflow-hidden">
-                        <NitroCardGridView>
+                <Popover className="nitro-chat-style-selector-container">
+                    <NitroCardContentView overflow="hidden" className="bg-transparent">
+                        <Grid columnCount={ 3 } overflow="auto">
                             { chatStyleIds && (chatStyleIds.length > 0) && chatStyleIds.map((styleId) =>
                                 {
                                     return (
-                                        <NitroCardGridItemView key={ styleId } itemActive={ (chatStyleId === styleId) } onClick={ event => selectStyle(styleId) }>
-                                            <div className="bubble-container">
-                                                <div className={ 'w-100 chat-bubble bubble-' + styleId }>&nbsp;</div>
-                                            </div>
-                                        </NitroCardGridItemView>
+                                        <Flex center pointer key={ styleId } className="bubble-parent-container" onClick={ event => selectStyle(styleId) }>
+                                            <Base key={ styleId } className="bubble-container">
+                                                <Base className={ `chat-bubble bubble-${ styleId }` }>&nbsp;</Base>
+                                            </Base>
+                                        </Flex>
                                     );
                                 }) }
-                        </NitroCardGridView>
+                        </Grid>
                     </NitroCardContentView>
                 </Popover>
             </Overlay>
diff --git a/src/views/room/widgets/chat-input/ChatInputView.scss b/src/views/room/widgets/chat-input/ChatInputView.scss
index 734dbcd2..f650fa62 100644
--- a/src/views/room/widgets/chat-input/ChatInputView.scss
+++ b/src/views/room/widgets/chat-input/ChatInputView.scss
@@ -4,11 +4,12 @@
     align-items: center;
     position: relative;
     height: 40px;
-    border-radius: $border-radius;
+    border-radius: 8px;
     border: 2px solid rgb(0, 0, 0);
     background: #EDEDED;
     padding-right: 10px;
     width: 100%;
+    overflow: hidden;
 
     @include media-breakpoint-down(sm) {
         display: flex;
@@ -21,9 +22,8 @@
     &:before {
         content: "";
         position: absolute;
-        width: 98%;
+        width: 100%;
         height: 5px;
-        border-radius: $border-radius;
         top: 1px;
         left: 0;
         right: 0;
@@ -65,15 +65,6 @@
     }
 }
 
-.nitro-chat-style-selector-button {
-    position: absolute;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    right: 7px;
-}
-
 .nitro-chat-style-selector-container {
     width: $chat-input-style-selector-widget-width;
     max-height: $chat-input-style-selector-widget-height;
@@ -82,20 +73,12 @@
         max-height: $chat-input-style-selector-widget-height !important;
     }
 
-    .grid-item {
-        font-size: $font-size-sm;
-        height: 30px !important;
-        border-color: unset !important;
-        border: 0 !important;
-        padding: 1px 3px;
-
-        &:not(.active) {
-            background-color: unset !important;
-        }
+    .bubble-parent-container {
+        height: 30px;
 
         .bubble-container {
-            visibility: visible;
-            width: 75%;
+            position: relative;
+            width: 50px;
         }
     }
 }
diff --git a/src/views/room/widgets/chat-input/ChatInputView.tsx b/src/views/room/widgets/chat-input/ChatInputView.tsx
index ca2b54d7..ed1391cc 100644
--- a/src/views/room/widgets/chat-input/ChatInputView.tsx
+++ b/src/views/room/widgets/chat-input/ChatInputView.tsx
@@ -4,7 +4,7 @@ import { createPortal } from 'react-dom';
 import { GetConfiguration, GetSessionDataManager, LocalizeText, RoomWidgetChatMessage, RoomWidgetChatTypingMessage, RoomWidgetUpdateChatInputContentEvent, RoomWidgetUpdateInfostandUserEvent, RoomWidgetUpdateRoomObjectEvent } from '../../../../api';
 import { CreateEventDispatcherHook } from '../../../../hooks/events';
 import { useRoomContext } from '../../context/RoomContext';
-import { ChatInputStyleSelectorView } from './style-selector/ChatInputStyleSelectorView';
+import { ChatInputStyleSelectorView } from './ChatInputStyleSelectorView';
 
 export const ChatInputView: FC<{}> = props =>
 {
diff --git a/src/views/room/widgets/chat-input/style-selector/ChatInputStyleSelectorView.types.ts b/src/views/room/widgets/chat-input/style-selector/ChatInputStyleSelectorView.types.ts
deleted file mode 100644
index 9df829be..00000000
--- a/src/views/room/widgets/chat-input/style-selector/ChatInputStyleSelectorView.types.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export interface ChatInputStyleSelectorViewProps
-{
-    chatStyleId: number;
-    chatStyleIds: number[];
-    selectChatStyleId: (styleId: number) => void;
-}