diff --git a/packages/component/src/Activity/CarouselFilmStrip.js b/packages/component/src/Activity/CarouselFilmStrip.js
index 5168e21b1c..9b77999f36 100644
--- a/packages/component/src/Activity/CarouselFilmStrip.js
+++ b/packages/component/src/Activity/CarouselFilmStrip.js
@@ -157,7 +157,7 @@ const ConnectedCarouselFilmStrip = connectCarouselFilmStrip(
           </ul>
           <div
             aria-hidden={ true }
-            className="webchat-row"
+            className="webchat__row"
           >
             {(
               activity.channelData
diff --git a/packages/component/src/Activity/StackedLayout.js b/packages/component/src/Activity/StackedLayout.js
index e6568888ac..b5c45e823a 100644
--- a/packages/component/src/Activity/StackedLayout.js
+++ b/packages/component/src/Activity/StackedLayout.js
@@ -25,7 +25,7 @@ const ROOT_CSS = css({
     flexGrow: 1,
     overflow: 'hidden',
 
-    '& > .webchat-row': {
+    '& > .webchat__row': {
       display: 'flex',
 
       '& > .bubble, & > .timestamp': {
@@ -47,7 +47,7 @@ const ROOT_CSS = css({
   '&.from-user': {
     flexDirection: 'row-reverse',
 
-    '& > .content > .webchat-row': {
+    '& > .content > .webchat__row': {
       flexDirection: 'row-reverse'
     }
   }
@@ -119,7 +119,7 @@ export default connectStackedLayout(
         <div className="content">
           {
             activity.type === 'typing' ?
-              <div className="webchat-row typing">
+              <div className="webchat__row typing">
                 {
                   children({
                     activity,
@@ -129,7 +129,7 @@ export default connectStackedLayout(
                 <div className="filler" />
               </div>
             : !!activityDisplayText &&
-              <div className="webchat-row message">
+              <div className="webchat__row message">
                 <Bubble
                   aria-label={ ariaLabel }
                   className="bubble"
@@ -150,7 +150,7 @@ export default connectStackedLayout(
           }
           {
             (activity.attachments || []).map((attachment, index) =>
-              <div className="webchat-row attachment" key={ index }>
+              <div className="webchat__row attachment" key={ index }>
                 <Bubble
                   className="attachment bubble"
                   fromUser={ fromUser }
@@ -163,7 +163,7 @@ export default connectStackedLayout(
           }
           <div
             aria-hidden={ true }
-            className="webchat-row"
+            className="webchat__row"
           >
             { showSendStatus ?
                 <SendStatus activity={ activity } className="timestamp" />
diff --git a/packages/component/src/Styles/StyleSet/CarouselFilmStrip.js b/packages/component/src/Styles/StyleSet/CarouselFilmStrip.js
index c346e6be42..9c3b5ed031 100644
--- a/packages/component/src/Styles/StyleSet/CarouselFilmStrip.js
+++ b/packages/component/src/Styles/StyleSet/CarouselFilmStrip.js
@@ -37,7 +37,7 @@ export default function ({
         }
       },
 
-      '& > .webchat-row': {
+      '& > .webchat__row': {
         marginLeft: paddingRegular
       }
     }
diff --git a/packages/component/src/Styles/StyleSet/StackedLayout.js b/packages/component/src/Styles/StyleSet/StackedLayout.js
index 815afa61b6..8115837f9e 100644
--- a/packages/component/src/Styles/StyleSet/StackedLayout.js
+++ b/packages/component/src/Styles/StyleSet/StackedLayout.js
@@ -8,7 +8,7 @@ export default function ({
     marginRight: paddingRegular,
 
     '& > .content': {
-      '& > .webchat-row': {
+      '& > .webchat__row': {
         '& > .bubble, & > .timestamp': {
           maxWidth: bubbleMaxWidth
         },