diff --git a/src/Container/README.md b/src/Container/README.md
index 8c2f6a4775..1069ca44d1 100644
--- a/src/Container/README.md
+++ b/src/Container/README.md
@@ -18,28 +18,28 @@ The base container to contain, pad, and center content in the viewport. This com
 
 ```jsx live
 <div style={{ overflowX: 'auto' }}>
-    <div style={{ width: '1500px', border: 'solid 3px red' }}>
-        <Container className="bg-danger-300 my-4">
+    <div style={{ width: '1500px', border: 'solid 3px var(--pgn-color-danger-700)' }}>
+        <Container className="bg-danger-700 text-white my-4">
           The content in this container doesn't have a max width
         </Container>
         
-        <Container size="xl" className="bg-danger-300 my-4">
+        <Container size="xl" className="bg-danger-700 text-white my-4">
           The content in this container won't exceed the extra large width.
         </Container>
         
-        <Container size="lg" className="bg-danger-300 mb-4">
+        <Container size="lg" className="bg-danger-700 text-white mb-4">
           The content in this container won't exceed the large width.
         </Container>
         
-        <Container size="md" className="bg-danger-300 mb-4">
+        <Container size="md" className="bg-danger-700 text-white mb-4">
           The content in this container won't exceed the medium width.
         </Container>
         
-        <Container size="sm" className="bg-danger-300 mb-4">
+        <Container size="sm" className="bg-danger-700 text-white mb-4">
           The content in this container won't exceed the small width.
         </Container>
         
-        <Container size="xs" className="bg-danger-300 mb-4">
+        <Container size="xs" className="bg-danger-700 text-white mb-4">
           The content in this container won't exceed the extra small width.
         </Container>
     </div>