diff --git a/src/common/card/NitroCardView.scss b/src/common/card/NitroCardView.scss
index 3899272..91b3525 100644
--- a/src/common/card/NitroCardView.scss
+++ b/src/common/card/NitroCardView.scss
@@ -84,7 +84,7 @@ $nitro-card-tabs-height: 42px;
             background-color: #ededed;
 
             .nav-item {
-                padding: 0.2rem 0.8rem;
+                padding: 0.2rem 0.4rem;
                 background-color: #dedede;
                 color: #000;
                 z-index: 1;
@@ -95,7 +95,7 @@ $nitro-card-tabs-height: 42px;
                 border-top-right-radius: 0.5rem !important;
 
                 &.active {
-                    background-color: #ededed;
+                    background-color: #e1e5ff;
 
                     &:before {
                         background: $white;
diff --git a/src/components/room/widgets/chat-input/ChatInputColorSelectorView.tsx b/src/components/room/widgets/chat-input/ChatInputColorSelectorView.tsx
index b6d54a3..e407d9f 100644
--- a/src/components/room/widgets/chat-input/ChatInputColorSelectorView.tsx
+++ b/src/components/room/widgets/chat-input/ChatInputColorSelectorView.tsx
@@ -49,7 +49,7 @@ export const ChatInputColorSelectorView: FC<ChatInputColorSelectorViewProps> = p
             </Base>
             <Overlay show={ selectorVisible } target={ iconRef } placement="top">
                 <Popover className="nitro-chat-style-selector-container">
-                    <NitroCardContentView overflow="hidden" className="bg-transparent">
+                    <NitroCardContentView overflow="hidden" className="bg-transparent colour-container image-rendering-pixelated">
                         <AutoGrid gap={ 1 } columnCount={ 6 } columnMinWidth={ 20 } columnMinHeight={ 20 }>
                             { colours && (colours.size > 0) && Array.from(colours).map(([ color, hex ]) =>
                             {
diff --git a/src/components/room/widgets/chat-input/ChatInputEmojiSelectorView.tsx b/src/components/room/widgets/chat-input/ChatInputEmojiSelectorView.tsx
index 8eb09bc..8690f76 100644
--- a/src/components/room/widgets/chat-input/ChatInputEmojiSelectorView.tsx
+++ b/src/components/room/widgets/chat-input/ChatInputEmojiSelectorView.tsx
@@ -51,7 +51,7 @@ export const ChatInputEmojiSelectorView: FC<ChatInputEmojiSelectorViewProps> = p
         <Overlay show={selectorVisible} target={iconRef} placement="top">
             <Popover className="nitro-chat-style-selector-container">
                 <NitroCardContentView overflow="hidden" className="bg-transparent">
-                    <Grid columnCount={4} overflow="auto">
+                    <Grid columnCount={3} overflow="auto">
                         {emojiList && emojiList.length > 0 && emojiList.map((emojiId) => {
                             return (
                                 <Flex center pointer key={emojiId} onClick={(event) => selectEmoji(emojiId)}>
diff --git a/src/components/room/widgets/chat-input/ChatInputStyleSelectorView.tsx b/src/components/room/widgets/chat-input/ChatInputStyleSelectorView.tsx
index a597cf0..640e985 100644
--- a/src/components/room/widgets/chat-input/ChatInputStyleSelectorView.tsx
+++ b/src/components/room/widgets/chat-input/ChatInputStyleSelectorView.tsx
@@ -44,11 +44,11 @@ export const ChatInputStyleSelectorView: FC<ChatInputStyleSelectorViewProps> = p
 
     return (
         <>
-            <Base pointer className="icon chatstyles-icon nitro-chat-style-box" onClick={ toggleSelector } />
+            <Base pointer className="icon chatstyles-icon" onClick={ toggleSelector } />
             <Overlay show={ selectorVisible } target={ target } placement="top">
-                <Popover className="nitro-chat-style-selector-container image-rendering-pixelated">
-                    <NitroCardContentView overflow="hidden" className="bg-transparent">
-                        <Grid columnCount={ 3 } overflow="auto">
+                <Popover className="nitro-chat-style-selector-container">
+                    <NitroCardContentView overflow="hidden" className="bg-transparent bubble-window image-rendering-pixelated">
+                        <Grid gap={ 1 } columnCount={ 3 } overflow="auto">
                             { chatStyleIds && (chatStyleIds.length > 0) && chatStyleIds.map((styleId) =>
                             {
                                 return (
diff --git a/src/components/room/widgets/chat-input/ChatInputView.scss b/src/components/room/widgets/chat-input/ChatInputView.scss
index 520c523..25ed44d 100644
--- a/src/components/room/widgets/chat-input/ChatInputView.scss
+++ b/src/components/room/widgets/chat-input/ChatInputView.scss
@@ -1,5 +1,6 @@
 .nitro-chat-input-container {
     display: flex;
+	justify-content: space-between;
     align-items: center;
     position: relative;
     height: 40px;
@@ -11,12 +12,13 @@
     overflow: hidden;
     width: -webkit-fill-available;
 
-    @include media-breakpoint-down(sm) {
+    @include media-breakpoint-down(xxl) {
         display: flex;
         position: absolute;
         bottom: 70px;
-        left: calc(100% / 3);
-        width: 200px!important;
+        left: 50%;
+        transform: translateX(-50%);
+        width: auto;
     }
 
     &:before {
@@ -53,6 +55,11 @@
             outline: none;
         }
     
+    }
+	
+	.colour-container {
+        visibility: visible;
+        width: 100%;
     }
 
     .bubble-container {
@@ -74,26 +81,8 @@
     width: calc(100% - 80px)!important;
 }
 
-.info-habbopages {
-    cursor: pointer;
-    background-image: url("@/assets/images/boxes/card/questionmark.png");
-    background-size: contain;
-    background-repeat: no-repeat;
-    width: 19px;
-    height: 20px;
-    position: relative;
-
-    &:hover {
-        background-image: url("@/assets/images/boxes/card/questionmark_hover.png");
-    }
-
-    &:active {
-        background-image: url("@/assets/images/boxes/card/questionmark_click.png");
-    }
-}
-
 .nitro-chat-style-selector-container {
-    width: auto;
+    width: $chat-input-style-selector-widget-width;
     max-height: $chat-input-style-selector-widget-height;
 
     .content-area {
@@ -136,4 +125,21 @@
             width: 50px;
         }
     }
+}
+
+.info-habbopages {
+    cursor: pointer;
+    background-image: url("@/assets/images/boxes/card/questionmark.png");
+    width: 19px;
+    height: 20px;
+    right: -2px;
+    position: relative;
+
+        &:hover {
+            background-image: url("@/assets/images/boxes/card/questionmark_hover.png");
+
+        &:active {
+            background-image: url("@/assets/images/boxes/card/questionmark_click.png");
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/components/room/widgets/chat-input/ChatInputView.tsx b/src/components/room/widgets/chat-input/ChatInputView.tsx
index 6a49b4a..0874f77 100644
--- a/src/components/room/widgets/chat-input/ChatInputView.tsx
+++ b/src/components/room/widgets/chat-input/ChatInputView.tsx
@@ -251,12 +251,14 @@ export const ChatInputView: FC<{}> = props =>
                     { floodBlocked &&
                     <Text variant="danger">{ LocalizeText('chat.input.alert.flood', [ 'time' ], [ floodBlockedSeconds.toString() ]) } </Text> }
                 </div>
-				<ChatInputEmojiSelectorView addChatEmoji={ addEmojiToChat } />												  
-				<ChatInputColorSelectorView chatColour={ chatColour } selectColour={ updateChatColour } />
-                <ChatInputStyleSelectorView chatStyleId={ chatStyleId } chatStyleIds={ chatStyleIds } selectChatStyleId={ updateChatStyleId } />
-				{ (showInfoHabboPages) &&
-                    <Base className="info-habbopages" onClick={ () => CreateLinkEvent('habbopages/chat/chatting') }></Base>
-                }
+				<Flex>
+					<ChatInputEmojiSelectorView addChatEmoji={ addEmojiToChat } />
+					<ChatInputColorSelectorView chatColour={ chatColour } selectColour={ updateChatColour } />
+					<ChatInputStyleSelectorView chatStyleId={ chatStyleId } chatStyleIds={ chatStyleIds } selectChatStyleId={ updateChatStyleId } />
+					{
+						(showInfoHabboPages) && <Base className="info-habbopages" onClick={ () => CreateLinkEvent('habbopages/chat/chatting') }></Base>
+					}
+				</Flex>
 				</div>, document.getElementById('toolbar-chat-input-container'))
     );
 }
\ No newline at end of file