diff --git a/src/App/ComponentsDocumentation/components/Card/constantspayex.js b/src/App/ComponentsDocumentation/components/Card/constantspayex.js
index e58bc16760..e21cb7733b 100644
--- a/src/App/ComponentsDocumentation/components/Card/constantspayex.js
+++ b/src/App/ComponentsDocumentation/components/Card/constantspayex.js
@@ -301,80 +301,4 @@ export const overviewCards = {
 				"The wide card component can be customized either icon or picture in order to make it easier for users to scan the content. Try to avoid mixing different card setups with each other as it could be confusing for the users to understand. Try to keep the title concise and to the point, to make it simple to understand and the design aligned with the cards as a group.",
 		},
 	],
-};
-
-
-// DO and DONT'S image 
-
-
-const Overview = () => (
-	<>
-		<h2 id="overview">Overview</h2>
-		<p>
-			The card component should be used to direct to pages on our site and not
-			to external sites, in that case use{" "}
-			<Link to="/components/links">Links</Link> instead.
-		</p>
-		<ComponentPreview
-			language="html"
-			showCasePanel
-			showCasePanelAdvanced={overviewCards}
-			codeFigure
-		/>
-
-		<h3>{"Dos and dont's"}</h3>
-		<div className="row">
-			<div className="col-xl-6 mb-4">
-				<div className="slab slab-plain slab-border-success h-100">
-					<h4>Do</h4>
-					When presenting a group of cards, make sure their color match and have
-					the same size and text length
-					<img
-						alt="Three cards in a horizontal line that all have the same icon color and text length."
-						src={`${basename}img/documentation/cards/Do-Cards.png`}
-						className="w-100 mt-4 mb-4"
-					/>
-				</div>
-			</div>
-			<div className="col-xl-6 mb-4">
-				<div className="slab slab-plain slab-border-error h-100">
-					<h4>{"Don't"}</h4>
-					Avoid miss-match colors, different sizes and length on text in order
-					to present a clean view
-					<img
-						alt="Three cards in a horizontal line that have different icon colors and text lengths."
-						src={`${basename}img/documentation/cards/Dont-Cards.png`}
-						className="w-100 mt-4 mb-4"
-					/>
-				</div>
-			</div>
-		</div>
-		<div className="row">
-			<div className="col-xl-6 mb-4">
-				<div className="slab slab-plain slab-border-success h-100">
-					<h4>Do</h4>
-					When presenting a group of cards, make sure they match visually. Try
-					keeping it the same text length and to one row when possible.
-					<img
-						alt="Three wide cards in a vertical line that have the same icon color and text length."
-						src={`${basename}img/documentation/cards/Do-wide-cards.png`}
-						className="w-100 mt-4 mb-4"
-					/>
-				</div>
-			</div>
-			<div className="col-xl-6 mb-4">
-				<div className="slab slab-plain slab-border-error h-100">
-					<h4>{"Don't"}</h4>
-					Avoid miss-match colors, different sizes and length on text in order
-					to present a clean view. When using numbers make sure the numbering is
-					sequenced and follows the correct order.
-					<img
-						alt="Three wide cards in a vertical line that have inconsistent iconography, different colors and varied text lengths."
-						src={`${basename}img/documentation/cards/Dont-wide-cards.png`}
-						className="w-100 mt-4 mb-4"
-					/>
-				</div>
-			</div>
-		</div>
-	</>
-);
+};
\ No newline at end of file
diff --git a/src/App/ComponentsDocumentation/components/Card/index.js b/src/App/ComponentsDocumentation/components/Card/index.js
index 845850c9b9..fad17cad99 100644
--- a/src/App/ComponentsDocumentation/components/Card/index.js
+++ b/src/App/ComponentsDocumentation/components/Card/index.js
@@ -21,8 +21,6 @@ const basename = process.env.basename;
 const brand = process.env.brand;
 
 const Overview = () => {
-	console.log("Brand:", brand); // Log the brand variable
-
 	return (
 		<>
 			<h2 id="overview">Overview</h2>