diff --git a/__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-codeblock-1-snap.png b/__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-codeblock-1-snap.png
index 0b6193e6fb..3f50b80bdd 100644
Binary files a/__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-codeblock-1-snap.png and b/__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-codeblock-1-snap.png differ
diff --git a/__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-codeblock-2-snap.png b/__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-codeblock-2-snap.png
index 96fc77ff62..1c25d1ef3d 100644
Binary files a/__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-codeblock-2-snap.png and b/__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-codeblock-2-snap.png differ
diff --git a/__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-codeblock-3-snap.png b/__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-codeblock-3-snap.png
index 7c461b37f6..c46901e686 100644
Binary files a/__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-codeblock-3-snap.png and b/__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-codeblock-3-snap.png differ
diff --git a/__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-codeblock-4-snap.png b/__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-codeblock-4-snap.png
index 8f96e8baf7..e9e18b9c9a 100644
Binary files a/__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-codeblock-4-snap.png and b/__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-codeblock-4-snap.png differ
diff --git a/__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-codeblock-5-snap.png b/__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-codeblock-5-snap.png
new file mode 100644
index 0000000000..298d6855f9
Binary files /dev/null and b/__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-codeblock-5-snap.png differ
diff --git a/__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-codeblock-dark-1-snap.png b/__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-codeblock-dark-1-snap.png
index 0b6193e6fb..a882fc641d 100644
Binary files a/__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-codeblock-dark-1-snap.png and b/__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-codeblock-dark-1-snap.png differ
diff --git a/__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-codeblock-dark-2-snap.png b/__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-codeblock-dark-2-snap.png
index 96fc77ff62..1f44b4a9c7 100644
Binary files a/__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-codeblock-dark-2-snap.png and b/__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-codeblock-dark-2-snap.png differ
diff --git a/__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-codeblock-dark-3-snap.png b/__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-codeblock-dark-3-snap.png
index 7a46b985cb..f56e4904b4 100644
Binary files a/__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-codeblock-dark-3-snap.png and b/__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-codeblock-dark-3-snap.png differ
diff --git a/__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-codeblock-dark-4-snap.png b/__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-codeblock-dark-4-snap.png
index 8f96e8baf7..91fdc5b88f 100644
Binary files a/__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-codeblock-dark-4-snap.png and b/__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-codeblock-dark-4-snap.png differ
diff --git a/__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-codeblock-dark-5-snap.png b/__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-codeblock-dark-5-snap.png
new file mode 100644
index 0000000000..475bd2bd26
Binary files /dev/null and b/__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-codeblock-dark-5-snap.png differ
diff --git a/__tests__/__image_snapshots__/html/side-by-side-wide-js-fluent-theme-applied-side-by-side-left-transcript-right-codeblock-1-snap.png b/__tests__/__image_snapshots__/html/side-by-side-wide-js-fluent-theme-applied-side-by-side-left-transcript-right-codeblock-1-snap.png
index 4668432512..629baa42da 100644
Binary files a/__tests__/__image_snapshots__/html/side-by-side-wide-js-fluent-theme-applied-side-by-side-left-transcript-right-codeblock-1-snap.png and b/__tests__/__image_snapshots__/html/side-by-side-wide-js-fluent-theme-applied-side-by-side-left-transcript-right-codeblock-1-snap.png differ
diff --git a/__tests__/__image_snapshots__/html/side-by-side-wide-js-fluent-theme-applied-side-by-side-left-transcript-right-codeblock-2-snap.png b/__tests__/__image_snapshots__/html/side-by-side-wide-js-fluent-theme-applied-side-by-side-left-transcript-right-codeblock-2-snap.png
index cf31297d70..04fa7f1585 100644
Binary files a/__tests__/__image_snapshots__/html/side-by-side-wide-js-fluent-theme-applied-side-by-side-left-transcript-right-codeblock-2-snap.png and b/__tests__/__image_snapshots__/html/side-by-side-wide-js-fluent-theme-applied-side-by-side-left-transcript-right-codeblock-2-snap.png differ
diff --git a/__tests__/__image_snapshots__/html/side-by-side-wide-js-fluent-theme-applied-side-by-side-left-transcript-right-codeblock-3-snap.png b/__tests__/__image_snapshots__/html/side-by-side-wide-js-fluent-theme-applied-side-by-side-left-transcript-right-codeblock-3-snap.png
index dc4d8c6e49..4228ce50d0 100644
Binary files a/__tests__/__image_snapshots__/html/side-by-side-wide-js-fluent-theme-applied-side-by-side-left-transcript-right-codeblock-3-snap.png and b/__tests__/__image_snapshots__/html/side-by-side-wide-js-fluent-theme-applied-side-by-side-left-transcript-right-codeblock-3-snap.png differ
diff --git a/__tests__/__image_snapshots__/html/side-by-side-wide-js-fluent-theme-applied-side-by-side-left-transcript-right-codeblock-4-snap.png b/__tests__/__image_snapshots__/html/side-by-side-wide-js-fluent-theme-applied-side-by-side-left-transcript-right-codeblock-4-snap.png
index 1cf411ee19..f4fd8a7605 100644
Binary files a/__tests__/__image_snapshots__/html/side-by-side-wide-js-fluent-theme-applied-side-by-side-left-transcript-right-codeblock-4-snap.png and b/__tests__/__image_snapshots__/html/side-by-side-wide-js-fluent-theme-applied-side-by-side-left-transcript-right-codeblock-4-snap.png differ
diff --git a/__tests__/__image_snapshots__/html/side-by-side-wide-js-fluent-theme-applied-side-by-side-left-transcript-right-codeblock-5-snap.png b/__tests__/__image_snapshots__/html/side-by-side-wide-js-fluent-theme-applied-side-by-side-left-transcript-right-codeblock-5-snap.png
new file mode 100644
index 0000000000..f871fae40e
Binary files /dev/null and b/__tests__/__image_snapshots__/html/side-by-side-wide-js-fluent-theme-applied-side-by-side-left-transcript-right-codeblock-5-snap.png differ
diff --git a/__tests__/__image_snapshots__/html/side-by-side-wide-js-fluent-theme-applied-side-by-side-left-transcript-right-codeblock-dark-1-snap.png b/__tests__/__image_snapshots__/html/side-by-side-wide-js-fluent-theme-applied-side-by-side-left-transcript-right-codeblock-dark-1-snap.png
index 4668432512..e71622b766 100644
Binary files a/__tests__/__image_snapshots__/html/side-by-side-wide-js-fluent-theme-applied-side-by-side-left-transcript-right-codeblock-dark-1-snap.png and b/__tests__/__image_snapshots__/html/side-by-side-wide-js-fluent-theme-applied-side-by-side-left-transcript-right-codeblock-dark-1-snap.png differ
diff --git a/__tests__/__image_snapshots__/html/side-by-side-wide-js-fluent-theme-applied-side-by-side-left-transcript-right-codeblock-dark-2-snap.png b/__tests__/__image_snapshots__/html/side-by-side-wide-js-fluent-theme-applied-side-by-side-left-transcript-right-codeblock-dark-2-snap.png
index cf31297d70..e14e386f91 100644
Binary files a/__tests__/__image_snapshots__/html/side-by-side-wide-js-fluent-theme-applied-side-by-side-left-transcript-right-codeblock-dark-2-snap.png and b/__tests__/__image_snapshots__/html/side-by-side-wide-js-fluent-theme-applied-side-by-side-left-transcript-right-codeblock-dark-2-snap.png differ
diff --git a/__tests__/__image_snapshots__/html/side-by-side-wide-js-fluent-theme-applied-side-by-side-left-transcript-right-codeblock-dark-3-snap.png b/__tests__/__image_snapshots__/html/side-by-side-wide-js-fluent-theme-applied-side-by-side-left-transcript-right-codeblock-dark-3-snap.png
index 30f3e7983a..bb40e8fda8 100644
Binary files a/__tests__/__image_snapshots__/html/side-by-side-wide-js-fluent-theme-applied-side-by-side-left-transcript-right-codeblock-dark-3-snap.png and b/__tests__/__image_snapshots__/html/side-by-side-wide-js-fluent-theme-applied-side-by-side-left-transcript-right-codeblock-dark-3-snap.png differ
diff --git a/__tests__/__image_snapshots__/html/side-by-side-wide-js-fluent-theme-applied-side-by-side-left-transcript-right-codeblock-dark-4-snap.png b/__tests__/__image_snapshots__/html/side-by-side-wide-js-fluent-theme-applied-side-by-side-left-transcript-right-codeblock-dark-4-snap.png
index 1cf411ee19..f039feb03a 100644
Binary files a/__tests__/__image_snapshots__/html/side-by-side-wide-js-fluent-theme-applied-side-by-side-left-transcript-right-codeblock-dark-4-snap.png and b/__tests__/__image_snapshots__/html/side-by-side-wide-js-fluent-theme-applied-side-by-side-left-transcript-right-codeblock-dark-4-snap.png differ
diff --git a/__tests__/__image_snapshots__/html/side-by-side-wide-js-fluent-theme-applied-side-by-side-left-transcript-right-codeblock-dark-5-snap.png b/__tests__/__image_snapshots__/html/side-by-side-wide-js-fluent-theme-applied-side-by-side-left-transcript-right-codeblock-dark-5-snap.png
new file mode 100644
index 0000000000..c5320c26eb
Binary files /dev/null and b/__tests__/__image_snapshots__/html/side-by-side-wide-js-fluent-theme-applied-side-by-side-left-transcript-right-codeblock-dark-5-snap.png differ
diff --git a/__tests__/html/activityGrouping.disableAbsoluteTimestamp.html b/__tests__/html/activityGrouping.disableAbsoluteTimestamp.html
new file mode 100644
index 0000000000..bb4fb833b0
--- /dev/null
+++ b/__tests__/html/activityGrouping.disableAbsoluteTimestamp.html
@@ -0,0 +1,130 @@
+<!doctype html>
+<html lang="en-US">
+
+<head>
+  <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  <script crossorigin="anonymous" src="/test-harness.js"></script>
+  <script crossorigin="anonymous" src="/test-page-object.js"></script>
+  <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+  <!-- <script crossorigin="anonymous" src="https://unpkg.com/botframework-webchat@main/dist/webchat.js"></script> -->
+  <!-- <script crossorigin="anonymous" src="https://unpkg.com/botframework-webchat@4.18/dist/webchat.js"></script> -->
+</head>
+
+<body>
+  <main id="webchat"></main>
+  <script>
+    run = fn => fn();
+    run(async function () {
+      const clock = lolex.createClock();
+
+      const { directLine, store } = testHelpers.createDirectLineEmulator({ ponyfill: clock });
+
+      WebChat.renderWebChat(
+        {
+          directLine,
+          ponyfill: clock,
+          store,
+          styleOptions: {
+            "autoScrollSnapOnPage": true,
+            "avatarBorderRadius": 0,
+            "botAvatarBackgroundColor": "green",
+            "botAvatarImage": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABABAMAAABYR2ztAAAAHlBMVEUNirz////J5fDC4e5br9FVrdBAoso4n8gtmcQllcLl2pCDAAAAMElEQVR42mMYBaNgeANDQTAQIl/BjI6OQJGOjk58thSKAYlRBaMKiFcwmjVHwVAHAFOkDndKDHQVAAAAAElFTkSuQmCC",
+            "botAvatarInitials": "VA",
+            "bubbleBackground": "rgba(232, 232, 232, 1)",
+            "bubbleBorderWidth": 0,
+            "bubbleFromUserBackground": "rgba(219, 241, 251, 1)",
+            "bubbleFromUserBorderWidth": 0,
+            "bubbleFromUserNubOffset": "top",
+            "bubbleFromUserNubSize": 8,
+            "bubbleNubOffset": "bottom",
+            "bubbleNubSize": 8,
+            "groupTimestamp": 0,
+            "hideUploadButton": true,
+            "markdownRenderHTML": false,
+            "suggestedActionBorder": "solid",
+            "suggestedActionBorderColor": "rgba(0,150,214,1)",
+            "suggestedActionBorderRadius": 3,
+            "suggestedActionBorderStyle": "solid",
+            "suggestedActionBorderWidth": 1,
+            "suggestedActionLayout": "stacked",
+            "suggestedActionsStackedLayoutButtonTextWrap": true,
+            "suggestedActionTextColor": "#00679a",
+            "timestampFormat": "absolute"
+          }
+        },
+        document.getElementById('webchat')
+      );
+
+      await pageConditions.webChatRendered();
+
+      clock.tick(1000);
+
+      await (
+        await directLine.emulateOutgoingActivity(
+          'Culpa qui non id occaecat consectetur veniam laborum Lorem nulla commodo.'
+        )
+      ).resolveAll();
+
+      await directLine.emulateIncomingActivity(
+        'Est labore mollit do cillum cillum est amet tempor quis reprehenderit veniam sunt.'
+      )
+
+      await directLine.emulateIncomingActivity(
+        'Elit adipisicing laborum sit anim.'
+      );
+
+      clock.tick(2000);
+
+      await directLine.emulateIncomingActivity({
+        type: 'message',
+        from: { role: 'bot1', name: 'Bot' },
+        text: 'Another custom.',
+      });
+
+      await directLine.emulateIncomingActivity({
+        type: 'message',
+        text: '',
+        attachments: [{
+          "contentType": "application/vnd.microsoft.card.adaptive",
+          "content": {
+            "type": "AdaptiveCard",
+            "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
+            "version": "1.2",
+            "body": [
+              {
+                "type": "TextBlock",
+                "text": "Did this solve the problem?",
+                "wrap": true
+              },
+              {
+                "type": "ActionSet",
+                "actions": [
+                  {
+                    "type": "Action.Submit",
+                    "title": "Yes",
+                    "data": {
+                      "value": "Yes"
+                    }
+                  },
+                  {
+                    "type": "Action.Submit",
+                    "title": "No",
+                    "data": {
+                      "value": "No"
+                    }
+                  }
+                ]
+              }
+            ]
+          }
+        }]
+      });
+
+      clock.tick(5000);
+
+      await host.snapshot();
+    });
+  </script>
+</body>
+
+</html>
diff --git a/__tests__/html/fluentTheme/side-by-side.wide.dark.html b/__tests__/html/fluentTheme/side-by-side.wide.dark.html
index 2485974b95..77e8176886 100644
--- a/__tests__/html/fluentTheme/side-by-side.wide.dark.html
+++ b/__tests__/html/fluentTheme/side-by-side.wide.dark.html
@@ -102,7 +102,7 @@
       };
 
       const waveSvg = `data:image/svg+xml;utf8,${encodeURIComponent(`
-<svg width="400" height="200" viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 50 400 100" xmlns="http://www.w3.org/2000/svg">
   <!-- Primary Wave -->
   <path d="M0,100 C50,50 100,150 150,100 C200,50 250,150 300,100 C350,50 400,150 400,100" 
         stroke="#3B82F6" fill="none" stroke-width="2" opacity="0.5"/>
@@ -540,6 +540,17 @@
           }
         }
       ], [
+        {
+          timestamp: timestamp(),
+          from: { "role": "user" },
+          id: "6.0",
+          text: `Help me to create a beautiful visualization of harmonic waves using Python, complete the following code:
+\`\`\`python
+def plot_sine_waves():
+    t = np.linspace(0, 10, 1000)
+\`\`\``,
+          type: "message"
+        },
         {
           timestamp: timestamp(),
           from: { role: 'bot' },
@@ -594,7 +605,12 @@
           }],
           id: "a4c0c01d-c06e-4dde-9278-265c607b545b-82",
           type: "message",
-          text: `This example demonstrates creating a beautiful visualization of harmonic waves using Python's Matplotlib library. The code generates three sine waves with different frequencies and phases, then combines them to show wave interference patterns.\n<img alt="wave plot" src="${waveSvg}">`,
+          text: `This example demonstrates creating a visualization of harmonic waves using Python's Matplotlib library. The code generates three sine waves with different frequencies and phases, then combines them to show wave interference patterns.
+<img alt="wave plot" src="${waveSvg}">
+
+Use the command to install required dependencies:
+
+    $ pip install numpy matplotlib`
         }
       ]];
 
@@ -704,6 +720,8 @@
           await host.sendKeys('ARROW_UP');
           await host.sendKeys('ENTER');
           await host.snapshot();
+          await host.sendKeys('TAB');
+          await host.snapshot();
           await host.sendKeys('ENTER');
           await host.snapshot();
           await host.sendKeys('ENTER');
diff --git a/__tests__/html/fluentTheme/side-by-side.wide.html b/__tests__/html/fluentTheme/side-by-side.wide.html
index b1a165a264..9b907e4f81 100644
--- a/__tests__/html/fluentTheme/side-by-side.wide.html
+++ b/__tests__/html/fluentTheme/side-by-side.wide.html
@@ -112,7 +112,7 @@
       };
 
       const waveSvg = `data:image/svg+xml;utf8,${encodeURIComponent(`
-<svg width="400" height="200" viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 50 400 100" xmlns="http://www.w3.org/2000/svg">
   <!-- Primary Wave -->
   <path d="M0,100 C50,50 100,150 150,100 C200,50 250,150 300,100 C350,50 400,150 400,100" 
         stroke="#3B82F6" fill="none" stroke-width="2" opacity="0.5"/>
@@ -550,6 +550,17 @@
           }
         }
       ], [
+        {
+          timestamp: timestamp(),
+          from: { "role": "user" },
+          id: "6.0",
+          text: `Help me to create a beautiful visualization of harmonic waves using Python, complete the following code:
+\`\`\`python
+def plot_sine_waves():
+    t = np.linspace(0, 10, 1000)
+\`\`\``,
+          type: "message"
+        },
         {
           timestamp: timestamp(),
           from: { role: 'bot' },
@@ -604,7 +615,12 @@
           }],
           id: "a4c0c01d-c06e-4dde-9278-265c607b545b-82",
           type: "message",
-          text: `This example demonstrates creating a beautiful visualization of harmonic waves using Python's Matplotlib library. The code generates three sine waves with different frequencies and phases, then combines them to show wave interference patterns.\n<img alt="wave plot" src="${waveSvg}">`,
+          text: `This example demonstrates creating a visualization of harmonic waves using Python's Matplotlib library. The code generates three sine waves with different frequencies and phases, then combines them to show wave interference patterns.
+<img alt="wave plot" src="${waveSvg}">
+
+Use the command to install required dependencies:
+
+    $ pip install numpy matplotlib`
         }
       ]];
 
@@ -687,6 +703,8 @@
           await host.sendKeys('ARROW_UP');
           await host.sendKeys('ENTER');
           await host.snapshot();
+          await host.sendKeys('TAB');
+          await host.snapshot();
           await host.sendKeys('ENTER');
           await host.snapshot();
           await host.sendKeys('ENTER');
diff --git a/__tests__/html/transcript.activityGrouping.html b/__tests__/html/transcript.activityGrouping.html
index 56837f1246..0b8dba37e1 100644
--- a/__tests__/html/transcript.activityGrouping.html
+++ b/__tests__/html/transcript.activityGrouping.html
@@ -36,13 +36,14 @@
         }
       } = window;
 
+      run = fn => fn();
       run(async function () {
         const params = new URLSearchParams(location.hash.replace(/^#/u, ''));
 
         const height = params.get('ch');
         const width = params.get('cw');
 
-        await host.windowSize(width, height, document.getElementById('webchat'));
+        // await host.windowSize(width, height, document.getElementById('webchat'));
 
         const TestHarness = () => {
           const { activityMiddleware, directLine, rtl, styleOptions, wide } = useContext(ActivityGroupingContext);
@@ -75,11 +76,11 @@
           document.getElementById('webchat')
         );
 
-        await pageConditions.uiConnected();
-        await pageConditions.allImagesLoaded();
-        await pageConditions.scrollToBottomCompleted();
+      //   await pageConditions.uiConnected();
+      //   await pageConditions.allImagesLoaded();
+      //   await pageConditions.scrollToBottomCompleted();
 
-        await host.snapshot();
+      //   await host.snapshot();
       });
     </script>
   </body>
diff --git a/__tests__/html2/markdown/codeBlock/layout.code-block-dark.html b/__tests__/html2/markdown/codeBlock/layout.code-block-dark.html
new file mode 100644
index 0000000000..c8a9cbe861
--- /dev/null
+++ b/__tests__/html2/markdown/codeBlock/layout.code-block-dark.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<html>
+  <head>
+    <script>
+      location = './layout?code-block-theme=github-dark-default';
+    </script>
+  </head>
+  <body></body>
+</html>
diff --git a/__tests__/html2/markdown/codeBlock/layout.code-block-dark.html.snap-1.png b/__tests__/html2/markdown/codeBlock/layout.code-block-dark.html.snap-1.png
new file mode 100644
index 0000000000..be71b4cab0
Binary files /dev/null and b/__tests__/html2/markdown/codeBlock/layout.code-block-dark.html.snap-1.png differ
diff --git a/__tests__/html2/markdown/codeBlock/layout.html b/__tests__/html2/markdown/codeBlock/layout.html
index 5c8912042c..6c971eeef9 100644
--- a/__tests__/html2/markdown/codeBlock/layout.html
+++ b/__tests__/html2/markdown/codeBlock/layout.html
@@ -9,15 +9,25 @@
 
   <body>
     <template id="messages">
-      <x-message>
+      <x-message snapshot-ignore>
 ```javascript
 console.log('JavaScript code block using tripple ` delimiters');
 ```
 ----
     Code block using indent
     also has copy button
-    but no highlighting
-      </x-message>
+    but no highlighting</x-message>
+    <x-message>
+```javascript
+export default function JavaScript(is, supported) { using shiki; }
+```
+```typescript
+export default type TypeScript = (is, supported): { using: shiki; }
+```
+```python
+def Python(is_supported): return {'using': 'shiki'}
+```
+    </x-message>
     </template>
     <main id="webchat"></main>
     <script>
@@ -28,7 +38,15 @@
 
         const { directLine, store } = testHelpers.createDirectLineEmulator();
 
-        renderWebChat({ directLine, store }, document.getElementById('webchat'));
+        const params = new URLSearchParams(location.search);
+
+        renderWebChat({
+          directLine, 
+          store,
+          styleOptions: {
+            codeBlockTheme: params.get('code-block-theme') ?? 'github-light-default'
+          }
+        }, document.getElementById('webchat'));
 
         await pageConditions.uiConnected();
 
diff --git a/__tests__/html2/markdown/codeBlock/layout.html.snap-1.png b/__tests__/html2/markdown/codeBlock/layout.html.snap-1.png
index 09e435b174..da1d106706 100644
Binary files a/__tests__/html2/markdown/codeBlock/layout.html.snap-1.png and b/__tests__/html2/markdown/codeBlock/layout.html.snap-1.png differ
diff --git a/packages/bundle/src/AddFullBundle.tsx b/packages/bundle/src/AddFullBundle.tsx
index 7f45fa2ce7..c273bc0426 100644
--- a/packages/bundle/src/AddFullBundle.tsx
+++ b/packages/bundle/src/AddFullBundle.tsx
@@ -9,10 +9,10 @@ import React, { memo, type ReactNode } from 'react';
 
 import AdaptiveCardsComposer from './adaptiveCards/AdaptiveCardsComposer';
 import { type AdaptiveCardsStyleOptions } from './adaptiveCards/AdaptiveCardsStyleOptions';
+import ShikiComposer from './codeHighlighter/ShikiComposer';
 import { type AdaptiveCardsPackage } from './types/AdaptiveCardsPackage';
 import { type StrictFullBundleStyleOptions } from './types/FullBundleStyleOptions';
 import useComposerProps from './useComposerProps';
-import ShikiComposer from './codeHighlighter/ShikiComposer';
 
 type AddFullBundleProps = Readonly<{
   adaptiveCardsHostConfig?: any;
diff --git a/packages/bundle/src/codeHighlighter/shiki.ts b/packages/bundle/src/codeHighlighter/shiki.ts
index 51da75ac95..b4cd2c0f0a 100644
--- a/packages/bundle/src/codeHighlighter/shiki.ts
+++ b/packages/bundle/src/codeHighlighter/shiki.ts
@@ -15,7 +15,7 @@ function addjustTheme(theme: ThemeRegistrationRaw): ThemeRegistrationRaw {
     ...theme,
     colors: {
       ...theme.colors,
-      'editor.background': `var(--webchat__code-block--background, ${theme.colors['editor.background']})`
+      'editor.background': `transparent`
     }
   };
 }
diff --git a/packages/bundle/src/markdown/createHTMLContentTransformMiddleware.ts b/packages/bundle/src/markdown/createHTMLContentTransformMiddleware.ts
index 6b16d5e7aa..0af941051a 100644
--- a/packages/bundle/src/markdown/createHTMLContentTransformMiddleware.ts
+++ b/packages/bundle/src/markdown/createHTMLContentTransformMiddleware.ts
@@ -1,7 +1,7 @@
 import { type HTMLContentTransformMiddleware } from 'botframework-webchat-component';
 
-import createSanitizeMiddleware from './middleware/createSanitizeMiddleware';
 import createCodeBlockMiddleware from './middleware/createCodeBlockMiddleware';
+import createSanitizeMiddleware from './middleware/createSanitizeMiddleware';
 
 export default function createHTMLContentTransformMiddleware(): readonly HTMLContentTransformMiddleware[] {
   return Object.freeze([createCodeBlockMiddleware(), createSanitizeMiddleware()]);
diff --git a/packages/bundle/src/markdown/middleware/createCodeBlockMiddleware.ts b/packages/bundle/src/markdown/middleware/createCodeBlockMiddleware.ts
index 8f397d4eed..8f23b51863 100644
--- a/packages/bundle/src/markdown/middleware/createCodeBlockMiddleware.ts
+++ b/packages/bundle/src/markdown/middleware/createCodeBlockMiddleware.ts
@@ -15,11 +15,7 @@ export default function createCodeBlockMiddleware(): HTMLContentTransformMiddlew
             })
           )
         ),
-        documentFragment: codeBlockDocumentMod(
-          request.documentFragment,
-          request.codeBlockTagName,
-          request.codeBlockTheme
-        )
+        documentFragment: codeBlockDocumentMod(request.documentFragment, request.codeBlockTagName)
       })
     );
 }
diff --git a/packages/bundle/src/markdown/private/codeBlockDocumentMod.ts b/packages/bundle/src/markdown/private/codeBlockDocumentMod.ts
index 334420f5fc..c204b6bb7e 100644
--- a/packages/bundle/src/markdown/private/codeBlockDocumentMod.ts
+++ b/packages/bundle/src/markdown/private/codeBlockDocumentMod.ts
@@ -2,8 +2,7 @@ const languageClassPrefix = 'language-';
 
 export default function codeBlockDocumentMod<T extends Document | DocumentFragment>(
   documentFragment: T,
-  codeBlockTagName: string,
-  codeBlockTheme: string
+  codeBlockTagName: string
 ): T {
   for (const preElement of [...documentFragment.querySelectorAll('pre:has(code:only-child)')]) {
     const [codeElement] = preElement.children;
@@ -14,7 +13,6 @@ export default function codeBlockDocumentMod<T extends Document | DocumentFragme
 
     const codeBlockRoot = document.createElement(codeBlockTagName);
 
-    codeBlockTheme && codeBlockRoot.setAttribute('theme', codeBlockTheme);
     language && codeBlockRoot.setAttribute('language', language);
 
     codeBlockRoot.append(codeElement);
diff --git a/packages/component/src/Attachment/Text/private/ActivityViewCodeButton.tsx b/packages/component/src/Attachment/Text/private/ActivityViewCodeButton.tsx
index aefcdfe0cd..baf18f9608 100644
--- a/packages/component/src/Attachment/Text/private/ActivityViewCodeButton.tsx
+++ b/packages/component/src/Attachment/Text/private/ActivityViewCodeButton.tsx
@@ -10,7 +10,7 @@ import CodeContent from './CodeContent';
 
 const CODE_ICON_URL = `data:image/svg+xml;utf8,${encodeURIComponent('<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M12.94 4.05a.75.75 0 0 0-1.38-.6l-5.5 12.5a.75.75 0 1 0 1.38.6l5.5-12.5Zm1.35 9.8a.75.75 0 0 1-.13-1.06L16.3 10l-2.14-2.8a.75.75 0 0 1 1.18-.9l2.5 3.24c.21.27.21.65 0 .92l-2.5 3.25a.75.75 0 0 1-1.05.13Zm-8.58-7.7c.33.26.39.73.13 1.06L3.7 10l2.14 2.8a.75.75 0 1 1-1.18.9l-2.5-3.24a.75.75 0 0 1 0-.92l2.5-3.25a.75.75 0 0 1 1.05-.13Z" fill="currentColor"></path></svg>')}`;
 
-const { useLocalizer, useStyleOptions } = hooks;
+const { useLocalizer } = hooks;
 
 type Props = Readonly<{
   className?: string | undefined;
@@ -21,7 +21,6 @@ type Props = Readonly<{
 }>;
 
 const ViewCodeButton = ({ className, code, language, title = '', isAIGenerated = false }: Props) => {
-  const [{ codeBlockTheme }] = useStyleOptions();
   const [{ activityButton, viewCodeDialog }] = useStyleSet();
   const showModal = useShowModal();
   const localize = useLocalizer();
@@ -29,7 +28,7 @@ const ViewCodeButton = ({ className, code, language, title = '', isAIGenerated =
   const showCodeModal = useCallback(() => {
     showModal(
       () => (
-        <CodeContent code={code} language={language} theme={codeBlockTheme} title={title}>
+        <CodeContent code={code} language={language} title={title}>
           {isAIGenerated && (
             <div className={'webchat__view-code-dialog__footer'}>
               <LocalizedString linkClassName={'webchat__view-code-dialog__link'} stringIds="ACTIVITY_CODE_CAUTION" />
@@ -42,7 +41,7 @@ const ViewCodeButton = ({ className, code, language, title = '', isAIGenerated =
         'aria-label': localize('ACTIVITY_CODE_ALT', title ?? '')
       }
     );
-  }, [showModal, viewCodeDialog, localize, title, code, language, codeBlockTheme, isAIGenerated]);
+  }, [showModal, viewCodeDialog, localize, title, code, language, isAIGenerated]);
 
   return (
     <ActivityButton
diff --git a/packages/component/src/Attachment/Text/private/CodeContent.tsx b/packages/component/src/Attachment/Text/private/CodeContent.tsx
index 1ea16541f1..016de50a24 100644
--- a/packages/component/src/Attachment/Text/private/CodeContent.tsx
+++ b/packages/component/src/Attachment/Text/private/CodeContent.tsx
@@ -5,20 +5,19 @@ import useCodeBlockTag from '../../../providers/CustomElements/useCodeBlockTagNa
 type Props = Readonly<{
   children?: ReactNode | undefined;
   className?: string | undefined;
-  theme: string;
-  language: string;
   code: string;
+  language: string;
   title: string;
 }>;
 
-const CodeContent = memo(({ children, className, code, language, theme, title }: Props) => {
+const CodeContent = memo(({ children, className, code, language, title }: Props) => {
   const [, CodeBlock] = useCodeBlockTag();
   return (
     <Fragment>
       <div className={'webchat__view-code-dialog__header'}>
         <h2 className={'webchat__view-code-dialog__title'}>{title}</h2>
       </div>
-      <CodeBlock className={classNames('webchat__view-code-dialog__body', className)} language={language} theme={theme}>
+      <CodeBlock className={classNames('webchat__view-code-dialog__body', className)} language={language}>
         <code>{code}</code>
       </CodeBlock>
       {children}
diff --git a/packages/component/src/Styles/StyleSet/CodeBlock.ts b/packages/component/src/Styles/StyleSet/CodeBlock.ts
index cdb22c935e..64fd5d6eb9 100644
--- a/packages/component/src/Styles/StyleSet/CodeBlock.ts
+++ b/packages/component/src/Styles/StyleSet/CodeBlock.ts
@@ -4,9 +4,30 @@ export default function createCodeBlockStyle() {
       margin: '16px 0',
       display: 'block',
       overflow: 'hidden',
+      padding: '4px',
+      borderRadius: '4px',
+      border: '1px solid #d1d1d1',
+
+      ':has(> .github-dark-default)': {
+        backgroundColor: 'var(--webchat__code-block--background, #0d1117)',
+        color: 'var(--webchat__code-block--color, #e6edf3)'
+      },
+
+      ':has(> .github-light-default)': {
+        backgroundColor: 'var(--webchat__code-block--background, inherit)',
+        color: 'var(--webchat__code-block--color, currentColor)'
+      },
+
+      ':has(.webchat__code-block__body:focus-visible):focus-within': {
+        outline: '2px solid #000',
+        outlineOffset: '-2px'
+      },
+
       '.webchat__code-block__body': {
-        display: 'contents',
-        whiteSpace: 'pre-wrap'
+        margin: '0 0 0 4px',
+        whiteSpace: 'pre-wrap',
+        lineHeight: 'normal',
+        outline: 'none'
       }
     }
   };
diff --git a/packages/component/src/Styles/StyleSet/ViewCodeDialog.ts b/packages/component/src/Styles/StyleSet/ViewCodeDialog.ts
index 859044044c..c3ac078932 100644
--- a/packages/component/src/Styles/StyleSet/ViewCodeDialog.ts
+++ b/packages/component/src/Styles/StyleSet/ViewCodeDialog.ts
@@ -27,8 +27,8 @@ export default function createViewCodeDialogStyle() {
       '& .webchat__modal-dialog__body': {
         display: 'flex',
         flexDirection: 'column',
-        overflow: 'hidden',
-        gap: CSSTokens.PaddingRegular
+        gap: CSSTokens.PaddingRegular,
+        overflow: 'hidden'
       },
 
       '& .webchat__view-code-dialog__header': {
@@ -43,13 +43,16 @@ export default function createViewCodeDialogStyle() {
       },
 
       '& .webchat__view-code-dialog__body': {
+        border: 'none',
+        borderRadius: 0,
         display: 'flex',
-        overflow: 'auto'
-      },
+        overflow: 'auto',
+        height: '100%',
 
-      '& .webchat__view-code-dialog__code-body': {
-        lineHeight: '20px',
-        overflow: 'auto'
+        '.webchat__code-block__body': {
+          margin: 0,
+          padding: '16px 0'
+        }
       },
 
       '& .webchat__view-code-dialog__footer': {
diff --git a/packages/component/src/hooks/internal/codeHighlighter/private/CodeHighlighterComposer.tsx b/packages/component/src/hooks/internal/codeHighlighter/private/CodeHighlighterComposer.tsx
index cc2dc0563a..3393890021 100644
--- a/packages/component/src/hooks/internal/codeHighlighter/private/CodeHighlighterComposer.tsx
+++ b/packages/component/src/hooks/internal/codeHighlighter/private/CodeHighlighterComposer.tsx
@@ -1,4 +1,5 @@
 import { createContext, useContext, memo } from 'react';
+
 import createCodeHighlighterComposer from './createCodeHighlighterComposer';
 import { defaultHighlightCode } from './defaultHighlightCode';
 
diff --git a/packages/component/src/hooks/internal/codeHighlighter/private/createCodeHighlighterComposer.tsx b/packages/component/src/hooks/internal/codeHighlighter/private/createCodeHighlighterComposer.tsx
index acd93cb6a2..49a358bd8b 100644
--- a/packages/component/src/hooks/internal/codeHighlighter/private/createCodeHighlighterComposer.tsx
+++ b/packages/component/src/hooks/internal/codeHighlighter/private/createCodeHighlighterComposer.tsx
@@ -1,4 +1,5 @@
 import React, { type ReactNode, useCallback, useMemo } from 'react';
+
 import { useCodeHighlighter, type CodeHighlighterContextType, type HighlightCodeFn } from './CodeHighlighterComposer';
 
 const createCodeHighlighterComposer =
diff --git a/packages/component/src/providers/CustomElements/customElements/CodeBlock.ts b/packages/component/src/providers/CustomElements/customElements/CodeBlock.ts
index fc7d545c0d..63a02b900c 100644
--- a/packages/component/src/providers/CustomElements/customElements/CodeBlock.ts
+++ b/packages/component/src/providers/CustomElements/customElements/CodeBlock.ts
@@ -3,20 +3,19 @@ import { StyleOptions, hooks } from 'botframework-webchat-api';
 import { ReactNode, RefObject, useMemo } from 'react';
 
 import { defaultHighlightCode } from '../../../hooks/internal/codeHighlighter';
+import { useStyleSet } from '../../../hooks';
 import { HighlightCodeFn, parseDocumentFragmentFromString, useCodeHighlighter } from '../../../internal';
 import { OnTrackFn, useUpdater } from '../private/useUpdater';
-import { useStyleSet } from '../../../hooks';
 
 class CodeBlock extends HTMLElement {
   static observedAttributes = Object.freeze(['theme', 'language']);
 
+  connected = false;
   copyButtonElement = null;
   highlightedCodeFragment: DocumentFragment = null;
 
   #originalFragment: DocumentFragment = null;
 
-  connected = false;
-
   get code() {
     return this.querySelector('code')?.textContent ?? '';
   }
@@ -68,6 +67,7 @@ class CodeBlock extends HTMLElement {
       this.highlightedCodeFragment = highlightCodeFragment;
       const body = highlightCodeFragment.querySelector('pre');
       body?.classList.add('webchat__code-block__body');
+      options.theme && body?.classList.add(options.theme);
     }
 
     if (!this.#originalFragment) {
diff --git a/packages/component/src/providers/CustomElements/customElements/CodeBlockCopyButton.tsx b/packages/component/src/providers/CustomElements/customElements/CodeBlockCopyButton.tsx
index 9bc3136217..7322fdb4e9 100644
--- a/packages/component/src/providers/CustomElements/customElements/CodeBlockCopyButton.tsx
+++ b/packages/component/src/providers/CustomElements/customElements/CodeBlockCopyButton.tsx
@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { memo, MouseEventHandler, useCallback, useState } from 'react';
+import React, { memo, useCallback, useState, type MouseEventHandler } from 'react';
 import { useRefFrom } from 'use-ref-from';
 import { useStateWithRef } from 'use-state-with-ref';
 import testIds from '../../../testIds';
diff --git a/packages/component/src/providers/CustomElements/private/useUpdater.tsx b/packages/component/src/providers/CustomElements/private/useUpdater.tsx
index d4f98cc374..3c42aa9350 100644
--- a/packages/component/src/providers/CustomElements/private/useUpdater.tsx
+++ b/packages/component/src/providers/CustomElements/private/useUpdater.tsx
@@ -1,4 +1,4 @@
-import { useMemo, RefObject, useRef, useCallback, DependencyList } from 'react';
+import { useMemo, useRef, useCallback, type DependencyList, type RefObject } from 'react';
 
 export type UpdateFn = () => any;
 export type OnTrackFn = (cb: UpdateFn, signal: AbortSignal) => void;
diff --git a/packages/component/src/providers/CustomElements/useCodeBlockTagName.ts b/packages/component/src/providers/CustomElements/useCodeBlockTagName.ts
index f4096720b6..3313272d3a 100644
--- a/packages/component/src/providers/CustomElements/useCodeBlockTagName.ts
+++ b/packages/component/src/providers/CustomElements/useCodeBlockTagName.ts
@@ -1,6 +1,7 @@
 import { createElement, memo, useMemo } from 'react';
-import useCustomElementsContext from './private/useCustomElementsContext';
+
 import { CodeBlockProps } from './customElements/CodeBlock';
+import useCustomElementsContext from './private/useCustomElementsContext';
 
 export default function useCodeBlockTag() {
   const { codeBlockTagName } = useCustomElementsContext();
diff --git a/packages/component/src/providers/HTMLContentTransformCOR/private/HTMLContentTransformContext.ts b/packages/component/src/providers/HTMLContentTransformCOR/private/HTMLContentTransformContext.ts
index a8040c8a1e..184c0cc578 100644
--- a/packages/component/src/providers/HTMLContentTransformCOR/private/HTMLContentTransformContext.ts
+++ b/packages/component/src/providers/HTMLContentTransformCOR/private/HTMLContentTransformContext.ts
@@ -9,7 +9,6 @@ export type HTMLContentTransformRequest = Readonly<{
     }>
   >;
   codeBlockTagName: string;
-  codeBlockTheme: string;
   documentFragment: DocumentFragment;
   externalLinkAlt: string;
 }>;
diff --git a/packages/component/src/providers/HTMLContentTransformCOR/useTransformHTMLContent.ts b/packages/component/src/providers/HTMLContentTransformCOR/useTransformHTMLContent.ts
index cc38cc877b..d518693549 100644
--- a/packages/component/src/providers/HTMLContentTransformCOR/useTransformHTMLContent.ts
+++ b/packages/component/src/providers/HTMLContentTransformCOR/useTransformHTMLContent.ts
@@ -4,7 +4,7 @@ import { useCallback } from 'react';
 import useCodeBlockTag from '../CustomElements/useCodeBlockTagName';
 import useHTMLContentTransformContext from './private/useHTMLContentTransformContext';
 
-const { useLocalizer, useStyleOptions } = hooks;
+const { useLocalizer } = hooks;
 
 const DEFAULT_ALLOWED_TAGS: ReadonlyMap<string, Readonly<{ attributes: ReadonlySet<string> }>> = Object.freeze(
   new Map(
@@ -168,7 +168,6 @@ const DEFAULT_ALLOWED_TAGS: ReadonlyMap<string, Readonly<{ attributes: ReadonlyS
 );
 
 export default function useTransformHTMLContent(): (documentFragment: DocumentFragment) => DocumentFragment {
-  const [{ codeBlockTheme }] = useStyleOptions();
   const [codeBlockTagName] = useCodeBlockTag();
   const { transform } = useHTMLContentTransformContext();
 
@@ -180,10 +179,9 @@ export default function useTransformHTMLContent(): (documentFragment: DocumentFr
       transform({
         allowedTags: DEFAULT_ALLOWED_TAGS,
         codeBlockTagName,
-        codeBlockTheme,
         documentFragment,
         externalLinkAlt
       }),
-    [codeBlockTagName, codeBlockTheme, externalLinkAlt, transform]
+    [codeBlockTagName, externalLinkAlt, transform]
   );
 }
diff --git a/packages/fluent-theme/src/components/theme/Theme.module.css b/packages/fluent-theme/src/components/theme/Theme.module.css
index 956cf15dac..a181465254 100644
--- a/packages/fluent-theme/src/components/theme/Theme.module.css
+++ b/packages/fluent-theme/src/components/theme/Theme.module.css
@@ -74,6 +74,8 @@
 
   /* New greys from the link above not exposed by Fluent */
   --webchat-colorGrey8: #141414;
+  --webchat-colorGrey14: #242424;
+  --webchat-colorGrey92: #ebebeb;
   --webchat-colorGrey98: #fafafa;
 
   /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/utils/shadows.ts */
@@ -392,6 +394,72 @@
   }
 }
 
+/* Code block */
+:global(.webchat-fluent).theme :global(.webchat__code-block) {
+  border: none;
+  font-family: var(--webchat-fontFamilyMonospace);
+  font-size: var(--webchat-fontSizeBase300);
+
+  --webchat__code-block__copy-button--color: var(--webchat-colorNeutralForeground1);
+  --webchat__code-block__copy-button--background: var(--webchat-colorNeutralBackground3);
+
+  :global(.webchat__code-block-copy-button) {
+    background: transparent;
+    border: none;
+    color: var(--webchat__code-block__copy-button--color);
+    height: 20px;
+    margin-inline-start: var(--webchat-spacingHorizontalS);
+    padding: 0;
+    width: 20px;
+    transition: background-color var(--webchat-durationNormal) var(--webchat-curveDecelerateMid);
+
+    :global(.webchat__code-block-copy-button__icon) {
+      background-color: currentColor;
+    }
+
+    &:hover {
+      background: var(--webchat__code-block__copy-button--background);
+      color: var(--webchat__code-block__copy-button--color);
+    }
+
+    &:active {
+      background: var(--webchat__code-block__copy-button--background);
+      color: var(--webchat__code-block__copy-button--color);
+    }
+
+    &:focus {
+      color: var(--webchat__code-block__copy-button--color);
+      outline-color: currentColor;
+    }
+  }
+
+  &:global(:has(.webchat__code-block__body:focus-visible)):focus-within {
+    outline: var(--webchat-strokeWidthThick) solid var(--webchat-colorStrokeFocus2);
+    outline-offset: calc(var(--webchat-strokeWidthThick) * -1);
+
+    :global(.webchat__code-block__body) {
+      outline: none;
+    }
+  }
+
+  &:global(:has(> .github-dark-default)) {
+    --webchat__code-block__copy-button--background: var(
+      --codeBlockCopyButtonBackgroundPressed,
+      var(--webchat-colorGrey14)
+    );
+    --webchat__code-block__copy-button--color: var(--codeBlockCopyButtonColor, var(--webchat__code-block--color));
+    --webchat__code-block--background: var(--codeBlockBackground, var(--webchat-colorGrey8));
+    --webchat__code-block--color: var(--codeBlockColor, var(--webchat-colorGrey98));
+  }
+
+  &:global(:has(> .github-light-default)) {
+    --webchat__code-block__copy-button--background: var(--codeBlockBackgroundPressed, var(--webchat-colorGrey92));
+    --webchat__code-block__copy-button--color: var(--codeBlockCopyButtonColor, var(--webchat__code-block--color));
+    --webchat__code-block--background: var(--codeBlockBackground, var(--webchat-colorGrey98));
+    --webchat__code-block--color: var(--codeBlockColor, var(--webchat-colorGrey8));
+  }
+}
+
 /* View Code dialog */
 :global(.webchat-fluent).theme :global(.webchat__modal-dialog.webchat__view-code-dialog) {
   :global(.webchat__modal-dialog__close-button-layout) {
@@ -410,33 +478,14 @@
   }
 
   :global(.webchat__code-block-copy-button) {
-    background: transparent;
-    border: none;
-    color: var(--webchat-colorNeutralForeground1);
-    height: 20px;
+    --webchat__code-block__copy-button--color: var(--webchat-colorNeutralForeground1);
+    --webchat__code-block__copy-button--background: var(--webchat-colorNeutralBackground3);
+
     margin-block-start: var(--webchat-spacingVerticalS);
-    padding: 0;
+    opacity: 1;
     position: absolute;
     right: 32px;
     top: 0;
-    transition: background-color var(--webchat-durationNormal) var(--webchat-curveDecelerateMid);
-    width: 20px;
-
-    :global(.webchat__code-block-copy-button__icon) {
-      background-color: currentColor;
-    }
-
-    &:hover {
-      background: var(--webchat-colorNeutralBackground3);
-    }
-
-    &:active {
-      background: var(--webchat-colorNeutralBackground3);
-    }
-
-    &:focus {
-      outline-color: var(--webchat-colorStrokeFocus2);
-    }
   }
 
   :global(.webchat__modal-dialog__box) {
@@ -455,35 +504,12 @@
   }
 
   :global(.webchat__view-code-dialog__body) {
-    background: var(--webchat__code-block--background);
     font-family: var(--webchat-fontFamilyMonospace);
     font-size: var(--webchat-fontSizeBase300);
-    line-height: var(--webchat-fontSizeBase300);
     margin: 0 calc(var(--webchat-spacingHorizontalM) * -1);
     padding: 0 var(--webchat-spacingHorizontalM);
   }
 
-  :global(.webchat__code-block__body) {
-    display: block;
-  }
-
-  :global(.webchat__view-code-dialog__body:has(.webchat__code-block__body:focus-visible)):focus-within {
-    outline: var(--webchat-strokeWidthThick) solid var(--webchat-colorStrokeFocus2);
-    outline-offset: calc(var(--webchat-strokeWidthThick) * -1);
-
-    :global(.webchat__code-block__body) {
-      outline: none;
-    }
-  }
-
-  :global(.webchat__view-code-dialog__body[theme='github-light-default']) {
-    --webchat__code-block--background: var(--codeBlockBackground, var(--webchat-colorGrey98));
-  }
-
-  :global(.webchat__view-code-dialog__body[theme='github-dark-default']) {
-    --webchat__code-block--background: var(--codeBlockBackground, var(--webchat-colorGrey8));
-  }
-
   :global(.webchat__view-code-dialog__footer) {
     color: var(--webchat-colorNeutralForeground4);
     font-size: var(--webchat-fontSizeBase100);