diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index b3a936186..24eed002e 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -404,7 +404,7 @@
 
 .module-message__typing-container {
   height: 16px;
-
+  padding-bottom: 20px;
   display: flex;
   flex-direction: row;
   align-items: center;
diff --git a/ts/components/conversation/TypingBubble.tsx b/ts/components/conversation/TypingBubble.tsx
index 036a47e54..8c5cfdc9b 100644
--- a/ts/components/conversation/TypingBubble.tsx
+++ b/ts/components/conversation/TypingBubble.tsx
@@ -49,19 +49,10 @@ export const TypingBubble = (props: TypingBubbleProps) => {
 
   return (
     <TypingBubbleContainer {...props}>
-      <div className={classNames('module-message', 'module-message--incoming')}>
-        <div
-          className={classNames(
-            'module-message__container',
-            'module-message__container--incoming'
-          )}
-        >
-          <div className="module-message__typing-container">
-            <TypingAnimation i18n={window.i18n} />
-          </div>
-          {renderAvatar()}
-        </div>
+      <div className="module-message__typing-container">
+        <TypingAnimation i18n={window.i18n} />
       </div>
+      {renderAvatar()}
     </TypingBubbleContainer>
   );
 };