diff --git a/packages/ui-components/Common/AlertBox/index.module.css b/packages/ui-components/Common/AlertBox/index.module.css
index 3c6cddc2bf0ed..6aa272d8ff19b 100644
--- a/packages/ui-components/Common/AlertBox/index.module.css
+++ b/packages/ui-components/Common/AlertBox/index.module.css
@@ -73,4 +73,11 @@
       @apply bg-danger-700;
     }
   }
+
+  code {
+    /* Ignore the styles from `markdown.css` */
+    all: unset;
+
+    @apply font-ibm-plex-mono;
+  }
 }
diff --git a/packages/ui-components/Common/AlertBox/index.stories.tsx b/packages/ui-components/Common/AlertBox/index.stories.tsx
index d26a407bdacc3..d900597de6e2f 100644
--- a/packages/ui-components/Common/AlertBox/index.stories.tsx
+++ b/packages/ui-components/Common/AlertBox/index.stories.tsx
@@ -6,6 +6,12 @@ import AlertBox from '#ui/Common/AlertBox';
 type Story = StoryObj<typeof AlertBox>;
 type Meta = MetaObj<typeof AlertBox>;
 
+const withMain = (args: React.ComponentProps<typeof AlertBox>) => (
+  <main>
+    <AlertBox {...args} />
+  </main>
+);
+
 export const Info: Story = {
   args: {
     level: 'info',
@@ -46,6 +52,23 @@ export const Danger: Story = {
   },
 };
 
+export const InMarkdown: Story = {
+  args: {
+    level: 'danger',
+    title: '0',
+    children: (
+      <>
+        In a markdown component, <code>Code renders correctly,</code>{' '}
+        <a href="#">
+          <code>even when in a link</code>
+        </a>
+      </>
+    ),
+    size: 'default',
+  },
+  render: withMain,
+};
+
 export const WithIcon: Story = {
   args: {
     level: 'info',