diff --git a/src/sections/Company/Brand/Brand-components/catalog.js b/src/sections/Company/Brand/Brand-components/catalog.js
index abad4d3ee11d..1a839917ad15 100644
--- a/src/sections/Company/Brand/Brand-components/catalog.js
+++ b/src/sections/Company/Brand/Brand-components/catalog.js
@@ -123,7 +123,9 @@ const Catalog = () => {
               white when using project colors as the background.
             </p>
           </Col>
-          <Row className="color-code-wrapper">
+          <Row style={{
+            flexWrap: "wrap"
+          }} className="color-code-wrapper">
             <ColorBox name="Keppel" R="0" G="179" B="159" colorCode="#00B39F" />
             <ColorBox
               name="Caribbean Green"
diff --git a/src/sections/Company/Brand/Brand-components/community.js b/src/sections/Company/Brand/Brand-components/community.js
index dea3e2b08c31..67106dae5dde 100644
--- a/src/sections/Company/Brand/Brand-components/community.js
+++ b/src/sections/Company/Brand/Brand-components/community.js
@@ -79,7 +79,9 @@ const CommunityBrand = () => {
             monochrome tonal when using a color background.
           </p>
         </Col>
-        <Row className="color-code-wrapper">
+        <Row style={{
+          flexWrap: "wrap"
+        }} className="color-code-wrapper">
           <ColorBox name="Keppel" R="0" G="179" B="159" colorCode="#00B39F" />
           <ColorBox name="Caribbean Green" R="0" G="211" B="169" colorCode="#00D3A9" />
           <ColorBox name="Casper" R="177" G="182" B="184" colorCode="#B1B6B8" />
diff --git a/src/sections/Company/Brand/Brand-components/layer5.js b/src/sections/Company/Brand/Brand-components/layer5.js
index 23ffc4730ba7..1d3562118057 100644
--- a/src/sections/Company/Brand/Brand-components/layer5.js
+++ b/src/sections/Company/Brand/Brand-components/layer5.js
@@ -85,7 +85,9 @@ const Layer5Brand = () => {
               when using project colors as the background.
             </p>
           </Col>
-          <Row className="color-code-wrapper">
+          <Row style={{
+            flexWrap: "wrap"
+          }} className="color-code-wrapper">
             <ColorBox name="Keppel" R="0" G="179" B="159" colorCode="#00B39F" />
             <ColorBox name="Caribbean Green" R="0" G="211" B="169" colorCode="#00D3A9" />
             <ColorBox name="Saffron" R="235" G="192" B="23" colorCode="#EBC017" />
diff --git a/src/sections/Company/Brand/Brand-components/meshery-operator.js b/src/sections/Company/Brand/Brand-components/meshery-operator.js
index 824e335d041f..7ebb4c05049f 100644
--- a/src/sections/Company/Brand/Brand-components/meshery-operator.js
+++ b/src/sections/Company/Brand/Brand-components/meshery-operator.js
@@ -78,7 +78,9 @@ const MesheryOperatorBrand = () => {
               monochrome tonal when using a color background.
             </p>
           </Col>
-          <Row className="color-code-wrapper">
+          <Row style={{
+            flexWrap: "wrap"
+          }} className="color-code-wrapper">
             <ColorBox name="Charcoal" R="60" G="73" B="79" colorCode="#3C494F" />
             <ColorBox name="Keppel" R="0" G="179" B="159" colorCode="#00B39F" />
             <ColorBox name="Caribbean Green" R="0" G="211" B="169" colorCode="#00D3A9" />
diff --git a/src/sections/Company/Brand/Brand-components/meshmark.js b/src/sections/Company/Brand/Brand-components/meshmark.js
index 02d3d4c4370d..65032c23f677 100644
--- a/src/sections/Company/Brand/Brand-components/meshmark.js
+++ b/src/sections/Company/Brand/Brand-components/meshmark.js
@@ -118,7 +118,9 @@ const MeshMarkBrand = () => {
               using project colors as the background.
             </p>
           </Col>
-          <Row className="color-code-wrapper">
+          <Row style={{
+            flexWrap: "wrap"
+          }} className="color-code-wrapper">
             <ColorBox name="Charcoal" R="60" G="73" B="79" colorCode="#3C494F" />
             <ColorBox name="Keppel" R="0" G="179" B="159" colorCode="#00B39F" />
             <ColorBox name="Caribbean Green" R="0" G="211" B="169" colorCode="#00D3A9" />
diff --git a/src/sections/Company/Brand/Brand-components/meshsync.js b/src/sections/Company/Brand/Brand-components/meshsync.js
index 54ebd4daa10f..a37f09e1f5f6 100644
--- a/src/sections/Company/Brand/Brand-components/meshsync.js
+++ b/src/sections/Company/Brand/Brand-components/meshsync.js
@@ -78,7 +78,9 @@ const MeshSyncBrand = () => {
               monochrome tonal when using a color background.
             </p>
           </Col>
-          <Row className="color-code-wrapper">
+          <Row style={{
+            flexWrap: "wrap"
+          }} className="color-code-wrapper">
             <ColorBox name="Keppel" R="0" G="179" B="159" colorCode="#00B39F" />
             <ColorBox name="Caribbean Green" R="0" G="211" B="169" colorCode="#00D3A9" />
             <ColorBox name="Casper" R="177" G="182" B="184" colorCode="#B1B6B8" />
diff --git a/src/sections/Company/Brand/Brand-components/servicemeshpatterns.js b/src/sections/Company/Brand/Brand-components/servicemeshpatterns.js
index 7e37c24b9587..a0b29c5fa7bb 100644
--- a/src/sections/Company/Brand/Brand-components/servicemeshpatterns.js
+++ b/src/sections/Company/Brand/Brand-components/servicemeshpatterns.js
@@ -78,7 +78,9 @@ const ServiceMeshPatterns = () => {
             using project colors as the background.
           </p>
         </Col>
-        <Row className="color-code-wrapper">
+        <Row style={{
+          flexWrap: "wrap"
+        }} className="color-code-wrapper">
           <ColorBox name="Charcoal" R="60" G="73" B="79" colorCode="#3C494F" />
           <ColorBox name="Keppel" R="0" G="179" B="159" colorCode="#00B39F" />
           <ColorBox name="Caribbean Green" R="0" G="211" B="169" colorCode="#00D3A9" />
diff --git a/src/sections/Company/Brand/Brand-components/smp.js b/src/sections/Company/Brand/Brand-components/smp.js
index eeac312a412c..2bc2ed53be15 100644
--- a/src/sections/Company/Brand/Brand-components/smp.js
+++ b/src/sections/Company/Brand/Brand-components/smp.js
@@ -104,7 +104,9 @@ const SMPBrand = () => {
               using project colors as the background.
             </p>
           </Col>
-          <Row className="color-code-wrapper">
+          <Row style={{
+            flexWrap: "wrap"
+          }} className="color-code-wrapper">
             <ColorBox name="Charcoal" R="60" G="73" B="79" colorCode="#3C494F" />
             <ColorBox name="Keppel" R="0" G="179" B="159" colorCode="#00B39F" />
             <ColorBox name="Caribbean Green" R="0" G="211" B="169" colorCode="#00D3A9" />