diff --git a/src/App/ComponentsDocumentation/components/Card/index.js b/src/App/ComponentsDocumentation/components/Card/index.js
index 7cd51b315e..5009282d1d 100644
--- a/src/App/ComponentsDocumentation/components/Card/index.js
+++ b/src/App/ComponentsDocumentation/components/Card/index.js
@@ -11,39 +11,69 @@ import CodeTags from "@components/CodeTags";
 import { overviewCards } from "./constants";
 
 const textArr = [
-	"This is a lot of text",
-	"With some more text",
-	"And then even some more",
-	"Is it really possible to have this much text in one card?",
-	"Yes!",
+    "This is a lot of text",
+    "With some more text",
+    "And then even some more",
+    "Is it really possible to have this much text in one card?",
+    "Yes!",
 ];
 const basename = process.env.basename;
+const brand = process.env.brand;
 
-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
-		/>
+const Overview = () => {
+    console.log("Brand:", brand); // Log the brand variable
 
-		<h3>{"Dos and dont's"}</h3>
-		<div className="row">
+    return (
+        <>
+            <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>
+            {brand === "swedbankpay" && (
+                <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 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
+					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 cards in a horizontal line that all have the same icon color and text length."
-						src={`${basename}img/documentation/cards/do-cards.png`}
+						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>
@@ -52,16 +82,46 @@ const Overview = () => (
 				<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
+					to present a clean view. When using numbers make sure the numbering is
+					sequenced and follows the correct order.
 					<img
-						alt="Three cards in a horizontal line that have different icon colors and text lengths."
-						src={`${basename}img/documentation/cards/dont-cards.png`}
+						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>
-		<div className="row">
+                </div>
+				
+            )}
+            {brand === "payex" && (
+                <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/payex/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/payex/documentation/cards/dont-cards.png`}
+                                className="w-100 mt-4 mb-4"
+                            />
+                        </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>
@@ -69,7 +129,7 @@ const Overview = () => (
 					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`}
+						src={`${basename}img/payex/documentation/cards/do-wide-cards.png`}
 						className="w-100 mt-4 mb-4"
 					/>
 				</div>
@@ -82,168 +142,171 @@ const Overview = () => (
 					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`}
+						src={`${basename}img/payex/documentation/cards/dont-wide-cards.png`}
 						className="w-100 mt-4 mb-4"
 					/>
 				</div>
 			</div>
 		</div>
-	</>
-);
+                </div>
+            )}
+        </>
+    );
+};
 
 // TODO: remove during next major release, not offered for a long time now
 const OldCard = () => (
-	<>
-		<h2 id="old-card">Old card</h2>
-		<StatusBadge type="remove" />
-		<p>
-			Cards support a wide variety of content, including images, text, list
-			groups, links, and more. Make sure to restrain the width of your card
-			unless you wish for it to fill the wrapping component.
-		</p>
-		<ComponentPreview language="html" showCasePanel showCasePanelSm codeFigure>
-			<CardComponent
-				titleTxt="Card title"
-				type="primary"
-				imgSrc="https://picsum.photos/300/?random"
-				text="This paragraph contains some text related to this card."
-				footerTxt="Footer text"
-			/>
-		</ComponentPreview>
-		<h3>Card with grid</h3>
-		<p>
-			Use our grid along with cards to control their size and how they are
-			displayed on different screen resolutions. Make sure to add{" "}
-			<CodeTags type="secondary" code=".d-flex" /> to the wrapper if you want
-			the cards to be of equal height when next to each other.
-		</p>
-		<ComponentPreview language="html" showCasePanel codeFigure>
-			<div className="row">
-				<div className="col-12 col-lg-6 col-xl-4 d-flex">
-					<CardComponent
-						type="primary"
-						titleTxt="My grid card"
-						text="Card text"
-						smallText="Small card text"
-						btn
-						btnText="Button"
-						btnClass="btn-block mt-auto"
-						bodyClass="d-flex flex-column"
-					>
-						<MediaObject
-							size="sm"
-							icon="at-check-shield"
-							heading="75%"
-							text="Complete"
-							textSmall
-							muted
-						/>
-					</CardComponent>
-				</div>
+    <>
+        <h2 id="old-card">Old card</h2>
+        <StatusBadge type="remove" />
+        <p>
+            Cards support a wide variety of content, including images, text, list
+            groups, links, and more. Make sure to restrain the width of your card
+            unless you wish for it to fill the wrapping component.
+        </p>
+        <ComponentPreview language="html" showCasePanel showCasePanelSm codeFigure>
+            <CardComponent
+                titleTxt="Card title"
+                type="primary"
+                imgSrc="https://picsum.photos/300/?random"
+                text="This paragraph contains some text related to this card."
+                footerTxt="Footer text"
+            />
+        </ComponentPreview>
+        <h3>Card with grid</h3>
+        <p>
+            Use our grid along with cards to control their size and how they are
+            displayed on different screen resolutions. Make sure to add{" "}
+            <CodeTags type="secondary" code=".d-flex" /> to the wrapper if you want
+            the cards to be of equal height when next to each other.
+        </p>
+        <ComponentPreview language="html" showCasePanel codeFigure>
+            <div className="row">
+                <div className="col-12 col-lg-6 col-xl-4 d-flex">
+                    <CardComponent
+                        type="primary"
+                        titleTxt="My grid card"
+                        text="Card text"
+                        smallText="Small card text"
+                        btn
+                        btnText="Button"
+                        btnClass="btn-block mt-auto"
+                        bodyClass="d-flex flex-column"
+                    >
+                        <MediaObject
+                            size="sm"
+                            icon="at-check-shield"
+                            heading="75%"
+                            text="Complete"
+                            textSmall
+                            muted
+                        />
+                    </CardComponent>
+                </div>
 
-				<div className="col-12 col-lg-6 col-xl-4 d-flex">
-					<CardComponent
-						type="primary"
-						titleTxt="My grid card"
-						textSection={textArr}
-						smallText="This is some small text"
-						btn
-						btnText="Button"
-						btnClass="btn-block mt-auto"
-						bodyClass="d-flex flex-column"
-					/>
-				</div>
+                <div className="col-12 col-lg-6 col-xl-4 d-flex">
+                    <CardComponent
+                        type="primary"
+                        titleTxt="My grid card"
+                        textSection={textArr}
+                        smallText="This is some small text"
+                        btn
+                        btnText="Button"
+                        btnClass="btn-block mt-auto"
+                        bodyClass="d-flex flex-column"
+                    />
+                </div>
 
-				<div className="col-12 col-lg-6 col-xl-4 d-flex">
-					<CardComponent
-						type="primary"
-						titleTxt="My grid card"
-						imgSrc="https://picsum.photos/300/?random"
-						text="This is a card with an image and body"
-						footerLinkTxt="Footer link"
-					/>
-				</div>
-			</div>
-		</ComponentPreview>
-		<h3>Card Types</h3>
-		<p>
-			We offer three different card types;{" "}
-			<CodeTags type="secondary" code=".card-primary" />,{" "}
-			<CodeTags type="secondary" code=".card-secondary" /> and{" "}
-			<CodeTags type="secondary" code=".card-plain" />.
-		</p>
-		<ComponentPreview language="html" showCasePanel codeFigure>
-			<div className="row">
-				<div className="col-12 col-lg-6 col-xl-4 d-flex">
-					<CardComponent
-						type="primary"
-						titleTxt="Card Primary"
-						imgSrc="https://picsum.photos/300/?random"
-						text="This paragraph contains some text about the person displayed above."
-					>
-						<ul className="list">
-							<li>
-								<span className="font-weight-bold">Card number:</span> 4563 5648
-								5642
-							</li>
-							<li>
-								<span className="font-weight-bold">Balance:</span> 2500,-{" "}
-							</li>
-						</ul>
-					</CardComponent>
-				</div>
-				<div className="col-12 col-lg-6 col-xl-4 d-flex">
-					<CardComponent
-						type="secondary"
-						titleTxt="Card Secondary"
-						text="Descriptive text to put inside the card, could contain a lot."
-						footerLinkTxt="Footer link"
-					>
-						<MediaObject
-							size="sm"
-							icon="at-building-column"
-							heading="725 NOK"
-							text="Outstanding balance"
-							textSmall
-							muted
-						/>
-					</CardComponent>
-				</div>
-				<div className="col-12 col-lg-6 col-xl-4 d-flex">
-					<CardComponent
-						type="plain"
-						titleTxt="Card Plain"
-						imgSrc="https://picsum.photos/300/?random"
-						text="Descriptive text to put inside the card, could contain a lot."
-						footerLinkTxt="Footer link"
-					>
-						<MediaObject
-							size="sm"
-							icon="at-check-shield"
-							heading="75%"
-							text="Complete"
-							textSmall
-							muted
-						/>
-					</CardComponent>
-				</div>
-			</div>
-		</ComponentPreview>
-	</>
+                <div className="col-12 col-lg-6 col-xl-4 d-flex">
+                    <CardComponent
+                        type="primary"
+                        titleTxt="My grid card"
+                        imgSrc="https://picsum.photos/300/?random"
+                        text="This is a card with an image and body"
+                        footerLinkTxt="Footer link"
+                    />
+                </div>
+            </div>
+        </ComponentPreview>
+        <h3>Card Types</h3>
+        <p>
+            We offer three different card types;{" "}
+            <CodeTags type="secondary" code=".card-primary" />,{" "}
+            <CodeTags type="secondary" code=".card-secondary" /> and{" "}
+            <CodeTags type="secondary" code=".card-plain" />.
+        </p>
+        <ComponentPreview language="html" showCasePanel codeFigure>
+            <div className="row">
+                <div className="col-12 col-lg-6 col-xl-4 d-flex">
+                    <CardComponent
+                        type="primary"
+                        titleTxt="Card Primary"
+                        imgSrc="https://picsum.photos/300/?random"
+                        text="This paragraph contains some text about the person displayed above."
+                    >
+                        <ul className="list">
+                            <li>
+                                <span className="font-weight-bold">Card number:</span> 4563 5648
+                                5642
+                            </li>
+                            <li>
+                                <span className="font-weight-bold">Balance:</span> 2500,-{" "}
+                            </li>
+                        </ul>
+                    </CardComponent>
+                </div>
+                <div className="col-12 col-lg-6 col-xl-4 d-flex">
+                    <CardComponent
+                        type="secondary"
+                        titleTxt="Card Secondary"
+                        text="Descriptive text to put inside the card, could contain a lot."
+                        footerLinkTxt="Footer link"
+                    >
+                        <MediaObject
+                            size="sm"
+                            icon="at-building-column"
+                            heading="725 NOK"
+                            text="Outstanding balance"
+                            textSmall
+                            muted
+                        />
+                    </CardComponent>
+                </div>
+                <div className="col-12 col-lg-6 col-xl-4 d-flex">
+                    <CardComponent
+                        type="plain"
+                        titleTxt="Card Plain"
+                        imgSrc="https://picsum.photos/300/?random"
+                        text="Descriptive text to put inside the card, could contain a lot."
+                        footerLinkTxt="Footer link"
+                    >
+                        <MediaObject
+                            size="sm"
+                            icon="at-check-shield"
+                            heading="75%"
+                            text="Complete"
+                            textSmall
+                            muted
+                        />
+                    </CardComponent>
+                </div>
+            </div>
+        </ComponentPreview>
+    </>
 );
 
 const Card = () => (
-	<DocContainer>
-		<p className="lead">
-			The card component is a flexible container that groups and informs about
-			the content and action. The information presented should be concise, to
-			the point and easy to understand.
-		</p>
-		<Overview />
-	</DocContainer>
+    <DocContainer>
+        <p className="lead">
+            The card component is a flexible container that groups and informs about
+            the content and action. The information presented should be concise, to
+            the point and easy to understand.
+        </p>
+        <Overview />
+    </DocContainer>
 );
 
 export default Card;
 
 /* For testing */
-export { Overview, OldCard };
+export { Overview, OldCard };
\ No newline at end of file