diff --git a/src/App/Playbook/content/DesignVision/index.js b/src/App/Playbook/content/DesignVision/index.js
index 3814487e2c..c725012ed3 100644
--- a/src/App/Playbook/content/DesignVision/index.js
+++ b/src/App/Playbook/content/DesignVision/index.js
@@ -48,8 +48,7 @@ const VisionBoard = () => (
 
 		<div className="d-flex flex-column align-items-center">
 			<img
-				// src={`${basename}img/documentation/playbook/playbook-design-vision-vision-board.png`}
-				src={`${basename}designguide/assets/playbook/playbook-design-vision-vision-board.png`}
+				src={`${basename}img/documentation/playbook/playbook-design-vision-vision-board.png`}
 				className="w-100"
 				alt="Playbook illustration"
 			/>
@@ -71,24 +70,21 @@ const ChunkyFriendly = () => (
 			<div className="row">
 				<div className="col-sm">
 					<img
-						// src={`${basename}img/documentation/playbook/playbook-design-vision-chunky-friendly-1.png`}
-						src={`${basename}designguide/assets/playbook/playbook-design-vision-chunky-friendly-1.png`}
+						src={`${basename}img/documentation/playbook/playbook-design-vision-chunky-friendly-1.png`}
 						className=""
 						alt="Playbook illustration"
 					/>
 				</div>
 				<div className="col-sm">
 					<img
-						// src={`${basename}img/documentation/playbook/playbook-design-vision-chunky-friendly-2.png`}
-						src={`${basename}designguide/assets/playbook/playbook-design-vision-chunky-friendly-2.png`}
+						src={`${basename}img/documentation/playbook/playbook-design-vision-chunky-friendly-2.png`}
 						className=""
 						alt="Playbook illustration"
 					/>
 				</div>
 				<div className="col-sm">
 					<img
-						// src={`${basename}img/documentation/playbook/playbook-design-vision-chunky-friendly-3.png`}
-						src={`${basename}designguide/assets/playbook/playbook-design-vision-chunky-friendly-3.png`}
+						src={`${basename}img/documentation/playbook/playbook-design-vision-chunky-friendly-3.png`}
 						className=""
 						alt="Playbook illustration"
 					/>
@@ -113,26 +109,22 @@ const BoldTypography = () => (
 		<div className="container px-0 playbook-bold-typo-img-container">
 			<div className="row justify-content-between">
 				<img
-					// src={`${basename}img/documentation/playbook/playbook-design-vision-bold-typo-1.png`}
-					src={`${basename}designguide/assets/playbook/playbook-design-vision-bold-typo-1.png`}
+					src={`${basename}img/documentation/playbook/playbook-design-vision-bold-typo-1.png`}
 					className=""
 					alt="Playbook illustration"
 				/>
 				<img
-					// src={`${basename}img/documentation/playbook/playbook-design-vision-bold-typo-2.png`}
-					src={`${basename}designguide/assets/playbook/playbook-design-vision-bold-typo-2.png`}
+					src={`${basename}img/documentation/playbook/playbook-design-vision-bold-typo-2.png`}
 					className=""
 					alt="Playbook illustration"
 				/>
 				<img
-					// src={`${basename}img/documentation/playbook/playbook-design-vision-bold-typo-3.png`}
-					src={`${basename}designguide/assets/playbook/playbook-design-vision-bold-typo-3.png`}
+					src={`${basename}img/documentation/playbook/playbook-design-vision-bold-typo-3.png`}
 					className=""
 					alt="Playbook illustration"
 				/>
 				<img
-					// src={`${basename}img/documentation/playbook/playbook-design-vision-bold-typo-4.png`}
-					src={`${basename}designguide/assets/playbook/playbook-design-vision-bold-typo-4.png`}
+					src={`${basename}img/documentation/playbook/playbook-design-vision-bold-typo-4.png`}
 					className=""
 					alt="Playbook illustration"
 				/>
@@ -192,24 +184,21 @@ const Colors = () => (
 				<div className="col-sm px-0">
 					<img
 						className="w-100 shift-right-1"
-						// src={`${basename}img/documentation/playbook/playbook-design-vision-colors-1.png`}
-						src={`${basename}designguide/assets/playbook/playbook-design-vision-colors-1.png`}
+						src={`${basename}img/documentation/playbook/playbook-design-vision-colors-1.png`}
 						alt="illustration swedbankpay playbook colors"
 					/>
 				</div>
 				<div className="col-sm px-0">
 					<img
 						className="w-100"
-						// src={`${basename}img/documentation/playbook/playbook-design-vision-colors-2.png`}
-						src={`${basename}designguide/assets/playbook/playbook-design-vision-colors-2.png`}
+						src={`${basename}img/documentation/playbook/playbook-design-vision-colors-2.png`}
 						alt="illustration swedbankpay playbook colors"
 					/>
 				</div>
 				<div className="col-sm px-0">
 					<img
 						className="w-100"
-						// src={`${basename}img/documentation/playbook/playbook-design-vision-colors-3.png`}
-						src={`${basename}designguide/assets/playbook/playbook-design-vision-colors-3.png`}
+						src={`${basename}img/documentation/playbook/playbook-design-vision-colors-3.png`}
 						alt="illustration swedbankpay playbook colors"
 					/>
 				</div>
@@ -218,24 +207,21 @@ const Colors = () => (
 				<div className="col-sm px-0">
 					<img
 						className="w-100"
-						// src={`${basename}img/documentation/playbook/playbook-design-vision-colors-4.png`}
-						src={`${basename}designguide/assets/playbook/playbook-design-vision-colors-4.png`}
+						src={`${basename}img/documentation/playbook/playbook-design-vision-colors-4.png`}
 						alt="illustration swedbankpay playbook colors"
 					/>
 				</div>
 				<div className="col-sm px-0">
 					<img
 						className="w-100"
-						// src={`${basename}img/documentation/playbook/playbook-design-vision-colors-5.png`}
-						src={`${basename}designguide/assets/playbook/playbook-design-vision-colors-5.png`}
+						src={`${basename}img/documentation/playbook/playbook-design-vision-colors-5.png`}
 						alt="illustration swedbankpay playbook colors"
 					/>
 				</div>
 				<div className="col-sm px-0">
 					<img
 						className="w-100"
-						// src={`${basename}img/documentation/playbook/playbook-design-vision-colors-6.png`}
-						src={`${basename}designguide/assets/playbook/playbook-design-vision-colors-6.png`}
+						src={`${basename}img/documentation/playbook/playbook-design-vision-colors-6.png`}
 						alt="illustration swedbankpay playbook colors"
 					/>
 				</div>
@@ -244,24 +230,21 @@ const Colors = () => (
 				<div className="col-sm px-0">
 					<img
 						className="w-100"
-						// src={`${basename}img/documentation/playbook/playbook-design-vision-colors-7.png`}
-						src={`${basename}designguide/assets/playbook/playbook-design-vision-colors-7.png`}
+						src={`${basename}img/documentation/playbook/playbook-design-vision-colors-7.png`}
 						alt="illustration swedbankpay playbook colors"
 					/>
 				</div>
 				<div className="col-sm px-0">
 					<img
 						className="w-100"
-						// src={`${basename}img/documentation/playbook/playbook-design-vision-colors-8.png`}
-						src={`${basename}designguide/assets/playbook/playbook-design-vision-colors-8.png`}
+						src={`${basename}img/documentation/playbook/playbook-design-vision-colors-8.png`}
 						alt="illustration swedbankpay playbook colors"
 					/>
 				</div>
 				<div className="col-sm px-0">
 					<img
 						className="w-100"
-						// src={`${basename}img/documentation/playbook/playbook-design-vision-colors-9.png`}
-						src={`${basename}designguide/assets/playbook/playbook-design-vision-colors-9.png`}
+						src={`${basename}img/documentation/playbook/playbook-design-vision-colors-9.png`}
 						alt="illustration swedbankpay playbook colors"
 					/>
 				</div>
@@ -283,7 +266,7 @@ const DesignVision = () => (
 		<VisionBoard />
 		<ChunkyFriendly />
 		<BoldTypography />
-		{/* <DelicateLines /> */}
+		<DelicateLines />
 		<Rounded />
 		<Colors />
 	</DocContainer>
diff --git a/src/App/Playbook/content/Playbook/index.js b/src/App/Playbook/content/Playbook/index.js
index f94fc78c69..4dcda2066a 100644
--- a/src/App/Playbook/content/Playbook/index.js
+++ b/src/App/Playbook/content/Playbook/index.js
@@ -90,8 +90,7 @@ const Playbook = () => (
 		</p>
 		<div className="d-flex flex-column align-items-center my-5">
 			<img
-				// src={`${basename}img/documentation/playbook/playbook-illustration-intro-swedbankpay.jpg`}
-				src={`${basename}designguide/assets/playbook/playbook-illustration-intro-swedbankpay.jpg`}
+				src={`${basename}img/documentation/playbook/playbook-illustration-intro-swedbankpay.jpg`}
 				className="w-100"
 				alt="Playbook illustration with the Swedbankpay branding"
 			/>
diff --git a/src/App/Playbook/content/Principles/index.js b/src/App/Playbook/content/Principles/index.js
index 6f832037b9..1b8a5ce497 100644
--- a/src/App/Playbook/content/Principles/index.js
+++ b/src/App/Playbook/content/Principles/index.js
@@ -16,22 +16,21 @@ const Simplicity = () => (
 		</p>
 		<h3>Clarity and focus</h3>
 		<div className="container">
-			<div className="row">
-				<div className="col-sm-9 pl-0">
+			<div className="row align-items-center">
+				<div className="col-sm-8 px-0">
 					<p className="font-italic text-muted mb-2">
 						How many focus points are visible on screen?
 					</p>
-					<p>
+					<p className="mb-0">
 						Distill complex ideas into elegant solutions. Our goal is for the
 						user to find information easily and complete tasks with minimal
 						effort.
 					</p>
 				</div>
-				<div className="col-sm-3">
+				<div className="col-sm-4 px-0">
 					<img
 						className="w-100"
-						// src={`${basename}img/documentation/playbook/playbook-principles-simplicity-clarity.png`}
-						src={`${basename}designguide/assets/playbook/playbook-principles-simplicity-clarity.png`}
+						src={`${basename}img/documentation/playbook/playbook-principles-simplicity-clarity.png`}
 						alt="illustration swedbankpay playbook principles"
 					/>
 				</div>
@@ -39,22 +38,21 @@ const Simplicity = () => (
 		</div>
 		<h3>Consistency</h3>
 		<div className="container">
-			<div className="row">
-				<div className="col-sm-9 pl-0">
+			<div className="row align-items-center">
+				<div className="col-sm-8 px-0">
 					<p className="font-italic text-muted mb-2">
 						What components can be reused?
 					</p>
-					<p>
+					<p className="mb-0">
 						No need to reinvent the wheel – use existing components as often as
 						possible. Consistency enhances familiarity and allows users to
 						navigate our ecosystem confidently.
 					</p>
 				</div>
-				<div className="col-sm-3">
+				<div className="col-sm-4 px-0">
 					<img
 						className="w-100"
-						// src={`${basename}img/documentation/playbook/playbook-principles-simplicity-consistency.png`}
-						src={`${basename}designguide/assets/playbook/playbook-principles-simplicity-consistency.png`}
+						src={`${basename}img/documentation/playbook/playbook-principles-simplicity-consistency.png`}
 						alt="illustration swedbankpay playbook principles"
 					/>
 				</div>
@@ -62,23 +60,22 @@ const Simplicity = () => (
 		</div>
 		<h3>Deliberate reduction</h3>
 		<div className="container">
-			<div className="row">
-				<div className="col-sm-9 pl-0">
+			<div className="row align-items-center">
+				<div className="col-sm-8 px-0">
 					<p className="font-italic text-muted mb-2">
 						Does every element on screen add value?
 					</p>
-					<p>
+					<p className="mb-0">
 						Reduce unnecessary elements, features, and interactions that may
 						overwhelm or confuse. Keep the design streamlined and lightweight,
 						providing the user with precisely what they need, exactly when they
 						need it.
 					</p>
 				</div>
-				<div className="col-sm-3">
+				<div className="col-sm-4 px-0">
 					<img
 						className="w-100"
-						// src={`${basename}img/documentation/playbook/playbook-principles-simplicity-reduction.png`}
-						src={`${basename}designguide/assets/playbook/playbook-principles-simplicity-reduction.png`}
+						src={`${basename}img/documentation/playbook/playbook-principles-simplicity-reduction.png`}
 						alt="illustration swedbankpay playbook principles"
 					/>
 				</div>
@@ -97,21 +94,20 @@ const FriendlyGuide = () => (
 		</p>
 		<h3>Information order</h3>
 		<div className="container">
-			<div className="row">
-				<div className="col-sm-9 pl-0">
+			<div className="row align-items-center">
+				<div className="col-sm-8 px-0">
 					<p className="font-italic text-muted mb-2">
 						Is vital information and action well-organized?
 					</p>
-					<p>
+					<p className="mb-0">
 						Arrange content hierarchically and group it smartly. Simplify
 						complex data to foster visual clarity, aiding user comprehension.
 					</p>
 				</div>
-				<div className="col-sm-3">
+				<div className="col-sm-4 px-0">
 					<img
 						className="w-100"
-						// src={`${basename}img/documentation/playbook/playbook-principles-friendly-order.png`}
-						src={`${basename}designguide/assets/playbook/playbook-principles-friendly-order.png`}
+						src={`${basename}img/documentation/playbook/playbook-principles-friendly-order.png`}
 						alt="illustration swedbankpay playbook principles"
 					/>
 				</div>
@@ -119,22 +115,21 @@ const FriendlyGuide = () => (
 		</div>
 		<h3>Visual hierarchy</h3>
 		<div className="container">
-			<div className="row">
-				<div className="col-sm-9 pl-0">
+			<div className="row align-items-center">
+				<div className="col-sm-8 px-0">
 					<p className="font-italic text-muted mb-2">
 						Is the right element emphasized?
 					</p>
-					<p>
+					<p className="mb-0">
 						Use scale, placement and color based on their importance and
 						relevance. Create visual cues that guide users to prioritize and
 						understand information effortlessly.
 					</p>
 				</div>
-				<div className="col-sm-3">
+				<div className="col-sm-4 px-0">
 					<img
 						className="w-100"
-						// src={`${basename}img/documentation/playbook/playbook-principles-friendly-hierarchy.png`}
-						src={`${basename}designguide/assets/playbook/playbook-principles-friendly-hierarchy.png`}
+						src={`${basename}img/documentation/playbook/playbook-principles-friendly-hierarchy.png`}
 						alt="illustration swedbankpay playbook principles"
 					/>
 				</div>
@@ -142,21 +137,20 @@ const FriendlyGuide = () => (
 		</div>
 		<h3>Reveal as needed</h3>
 		<div className="container">
-			<div className="row">
-				<div className="col-sm-9 pl-0">
+			<div className="row align-items-center">
+				<div className="col-sm-8 px-0">
 					<p className="font-italic text-muted mb-2">
 						Do we really need this piece of info on this screen?
 					</p>
-					<p>
+					<p className="mb-0">
 						Use progressive disclosure to present core content, letting users
 						delve deeper as they wish, avoiding information overload.
 					</p>
 				</div>
-				<div className="col-sm-3">
+				<div className="col-sm-4 px-0">
 					<img
 						className="w-100"
-						// src={`${basename}img/documentation/playbook/playbook-principles-friendly-reveal.png`}
-						src={`${basename}designguide/assets/playbook/playbook-principles-friendly-reveal.png`}
+						src={`${basename}img/documentation/playbook/playbook-principles-friendly-reveal.png`}
 						alt="illustration swedbankpay playbook principles"
 					/>
 				</div>
@@ -176,20 +170,19 @@ const DelightUnexpected = () => (
 		</p>
 		<h3>Surprise and engage</h3>
 		<div className="container">
-			<div className="row">
-				<div className="col-sm-9 pl-0">
-					<p>
+			<div className="row align-items-center">
+				<div className="col-sm-8 px-0">
+					<p className="mb-0">
 						Dare to be different. Surprise users with unique design elements, be
 						it an animation or a splash of color. Balance visuals based on what
 						you want to convey. Asymmetry is dynamic and engaging, creating a
 						sense of energy and movement. Symmetry is quiet and static.
 					</p>
 				</div>
-				<div className="col-sm-3">
+				<div className="col-sm-4 px-0">
 					<img
 						className="w-100"
-						// src={`${basename}img/documentation/playbook/playbook-principles-unexpected-surprise.png`}
-						src={`${basename}designguide/assets/playbook/playbook-principles-unexpected-surprise.png`}
+						src={`${basename}img/documentation/playbook/playbook-principles-unexpected-surprise.png`}
 						alt="illustration swedbankpay playbook principles"
 					/>
 				</div>
@@ -197,20 +190,19 @@ const DelightUnexpected = () => (
 		</div>
 		<h3>Unified creative vision</h3>
 		<div className="container">
-			<div className="row">
-				<div className="col-sm-9 pl-0">
-					<p>
+			<div className="row align-items-center">
+				<div className="col-sm-8 px-0">
+					<p className="mb-0">
 						While our design system ensures brand consistency, individual
 						products can have their creative flair. That said, they should
 						always feel part of the Swedbank Pay family. Refer to our Vision
 						board for guidance.
 					</p>
 				</div>
-				<div className="col-sm-3">
+				<div className="col-sm-4 px-0">
 					<img
 						className="w-100"
-						// src={`${basename}img/documentation/playbook/playbook-principles-unexpected-unified.png`}
-						src={`${basename}designguide/assets/playbook/playbook-principles-unexpected-unified.png`}
+						src={`${basename}img/documentation/playbook/playbook-principles-unexpected-unified.png`}
 						alt="illustration swedbankpay playbook principles"
 					/>
 				</div>
@@ -218,19 +210,18 @@ const DelightUnexpected = () => (
 		</div>
 		<h3>Thoughtful motion design</h3>
 		<div className="container">
-			<div className="row">
-				<div className="col-sm-9 pl-0">
-					<p>
+			<div className="row align-items-center">
+				<div className="col-sm-8 px-0">
+					<p className="mb-0">
 						Integrate subtle, meaningful micro-interactions. These tiny,
 						animated touches can elevate user engagement, adding responsiveness
 						and character.
 					</p>
 				</div>
-				<div className="col-sm-3">
+				<div className="col-sm-4 px-0">
 					<img
 						className="w-100"
-						// src={`${basename}img/documentation/playbook/playbook-principles-unexpected-motion.png`}
-						src={`${basename}designguide/assets/playbook/playbook-principles-unexpected-motion.png`}
+						src={`${basename}img/documentation/playbook/playbook-principles-unexpected-motion.png`}
 						alt="illustration swedbankpay playbook principles"
 					/>
 				</div>
@@ -249,21 +240,20 @@ const Inclusive = () => (
 		</p>
 		<h3>Simplicity is key</h3>
 		<div className="container">
-			<div className="row">
-				<div className="col-sm-9 pl-0">
+			<div className="row align-items-center">
+				<div className="col-sm-8 px-0">
 					<p className="font-italic text-muted mb-2">
 						How quickly does the user understand a screen?
 					</p>
-					<p>
+					<p className="mb-0">
 						Less is more. Minimize clutter and cognitive effort, enabling users
 						to absorb and remember information effortlessly.
 					</p>
 				</div>
-				<div className="col-sm-3">
+				<div className="col-sm-4 px-0">
 					<img
 						className="w-100"
-						// src={`${basename}img/documentation/playbook/playbook-principles-inclusive-simplicity.png`}
-						src={`${basename}designguide/assets/playbook/playbook-principles-inclusive-simplicity.png`}
+						src={`${basename}img/documentation/playbook/playbook-principles-inclusive-simplicity.png`}
 						alt="illustration swedbankpay playbook principles"
 					/>
 				</div>
@@ -271,21 +261,20 @@ const Inclusive = () => (
 		</div>
 		<h3>Visual contrast and distinction</h3>
 		<div className="container">
-			<div className="row">
-				<div className="col-sm-9 pl-0">
+			<div className="row align-items-center">
+				<div className="col-sm-8 px-0">
 					<p className="font-italic text-muted mb-2">
 						Does the design meet accessibility standards?
 					</p>
-					<p>
+					<p className="mb-0">
 						Ensure elements are discernible, with strong color contrasts,
 						legible fonts, and a well-defined visual hierarchy.
 					</p>
 				</div>
-				<div className="col-sm-3">
+				<div className="col-sm-4 px-0">
 					<img
 						className="w-100"
-						// src={`${basename}img/documentation/playbook/playbook-principles-inclusive-contrast.png`}
-						src={`${basename}designguide/assets/playbook/playbook-principles-inclusive-contrast.png`}
+						src={`${basename}img/documentation/playbook/playbook-principles-inclusive-contrast.png`}
 						alt="illustration swedbankpay playbook principles"
 					/>
 				</div>
@@ -293,21 +282,20 @@ const Inclusive = () => (
 		</div>
 		<h3>Assistive tech-friendly</h3>
 		<div className="container">
-			<div className="row">
-				<div className="col-sm-9 pl-0">
+			<div className="row align-items-center">
+				<div className="col-sm-8 px-0">
 					<p className="font-italic text-muted mb-2">
 						Are interfaces compatible with assistive tools?
 					</p>
-					<p>
+					<p className="mb-0">
 						Make sure your interface can be easily used with screen readers,
 						voice commands, keyboard and other assistive devices.
 					</p>
 				</div>
-				<div className="col-sm-3">
+				<div className="col-sm-4 px-0">
 					<img
 						className="w-100"
-						// src={`${basename}img/documentation/playbook/playbook-principles-inclusive-assistive.png`}
-						src={`${basename}designguide/assets/playbook/playbook-principles-inclusive-assistive.png`}
+						src={`${basename}img/documentation/playbook/playbook-principles-inclusive-assistive.png`}
 						alt="illustration swedbankpay playbook principles"
 					/>
 				</div>
diff --git a/src/App/Playbook/content/Profiles/index.js b/src/App/Playbook/content/Profiles/index.js
index b83601ddbe..64d80ff024 100644
--- a/src/App/Playbook/content/Profiles/index.js
+++ b/src/App/Playbook/content/Profiles/index.js
@@ -52,24 +52,21 @@ const DesignProfiles = () => (
 				<div className="col">
 					<img
 						className="w-100"
-						// src={`${basename}img/documentation/playbook/playbook-profiles-profile-1.png`}
-						src={`${basename}designguide/assets/playbook/playbook-profiles-profile-1.png`}
+						src={`${basename}img/documentation/playbook/playbook-profiles-profile-1.png`}
 						alt="content"
 					/>
 				</div>
 				<div className="col">
 					<img
 						className="w-100"
-						// src={`${basename}img/documentation/playbook/playbook-profiles-profile-2.png`}
-						src={`${basename}designguide/assets/playbook/playbook-profiles-profile-2.png`}
+						src={`${basename}img/documentation/playbook/playbook-profiles-profile-2.png`}
 						alt="Light UI"
 					/>
 				</div>
 				<div className="col">
 					<img
 						className="w-100"
-						// src={`${basename}img/documentation/playbook/playbook-profiles-profile-3.png`}
-						src={`${basename}designguide/assets/playbook/playbook-profiles-profile-3.png`}
+						src={`${basename}img/documentation/playbook/playbook-profiles-profile-3.png`}
 						alt="Expert UI"
 					/>
 				</div>
@@ -102,16 +99,14 @@ const Content = () => (
 					<div className="col-sm px-0">
 						<img
 							className="w-100 shift-right-1"
-							// src={`${basename}img/documentation/playbook/playbook-profiles-content-1.png`}
-							src={`${basename}designguide/assets/playbook/playbook-profiles-content-1.png`}
+							src={`${basename}img/documentation/playbook/playbook-profiles-content-1.png`}
 							alt="illustration swedbankpay playbook profiles"
 						/>
 					</div>
 					<div className="col-sm px-0 d-flex flex-column">
 						<img
 							className="w-100 shift-left-1"
-							// src={`${basename}img/documentation/playbook/playbook-profiles-content-2.png`}
-							src={`${basename}designguide/assets/playbook/playbook-profiles-content-2.png`}
+							src={`${basename}img/documentation/playbook/playbook-profiles-content-2.png`}
 							alt="illustration swedbankpay playbook profiles"
 						/>
 					</div>
@@ -125,16 +120,14 @@ const Content = () => (
 					<div className="col-sm-8 pl-0">
 						<img
 							className="w-100"
-							// src={`${basename}img/documentation/playbook/playbook-profiles-content-3.png`}
-							src={`${basename}designguide/assets/playbook/playbook-profiles-content-3.png`}
+							src={`${basename}img/documentation/playbook/playbook-profiles-content-3.png`}
 							alt="illustration swedbankpay playbook profiles"
 						/>
 					</div>
 					<div className="col-sm-3 pr-0">
 						<img
 							className="w-100"
-							// src={`${basename}img/documentation/playbook/playbook-profiles-content-4.png`}
-							src={`${basename}designguide/assets/playbook/playbook-profiles-content-4.png`}
+							src={`${basename}img/documentation/playbook/playbook-profiles-content-4.png`}
 							alt="illustration swedbankpay playbook profiles"
 						/>
 					</div>
@@ -171,8 +164,7 @@ const LightUI = () => (
 					<div className="col-sm-3 px-0">
 						<img
 							className=""
-							// src={`${basename}img/documentation/playbook/playbook-profiles-lightui-1.png`}
-							src={`${basename}designguide/assets/playbook/playbook-profiles-lightui-1.png`}
+							src={`${basename}img/documentation/playbook/playbook-profiles-lightui-1.png`}
 							alt="illustration swedbankpay playbook profiles"
 						/>
 					</div>
@@ -186,32 +178,28 @@ const LightUI = () => (
 					<div className="col-sm-3">
 						<img
 							className="w-100"
-							// src={`${basename}img/documentation/playbook/playbook-profiles-lightui-2.png`}
-							src={`${basename}designguide/assets/playbook/playbook-profiles-lightui-2.png`}
+							src={`${basename}img/documentation/playbook/playbook-profiles-lightui-2.png`}
 							alt="illustration swedbankpay playbook profiles"
 						/>
 					</div>
 					<div className="col-sm-3">
 						<img
 							className="w-100"
-							// src={`${basename}img/documentation/playbook/playbook-profiles-lightui-3.png`}
-							src={`${basename}designguide/assets/playbook/playbook-profiles-lightui-3.png`}
+							src={`${basename}img/documentation/playbook/playbook-profiles-lightui-3.png`}
 							alt="illustration swedbankpay playbook profiles"
 						/>
 					</div>
 					<div className="col-sm-3">
 						<img
 							className="w-100"
-							// src={`${basename}img/documentation/playbook/playbook-profiles-lightui-4.png`}
-							src={`${basename}designguide/assets/playbook/playbook-profiles-lightui-4.png`}
+							src={`${basename}img/documentation/playbook/playbook-profiles-lightui-4.png`}
 							alt="illustration swedbankpay playbook profiles"
 						/>
 					</div>
 					<div className="col-sm-3">
 						<img
 							className="w-100"
-							// src={`${basename}img/documentation/playbook/playbook-profiles-lightui-5.png`}
-							src={`${basename}designguide/assets/playbook/playbook-profiles-lightui-5.png`}
+							src={`${basename}img/documentation/playbook/playbook-profiles-lightui-5.png`}
 							alt="illustration swedbankpay playbook profiles"
 						/>
 					</div>
@@ -248,8 +236,7 @@ const ExpertUI = () => (
 					<div className="col d-flex justify-content-center">
 						<img
 							className="w-100"
-							// src={`${basename}img/documentation/playbook/playbook-profiles-expert-1.png`}
-							src={`${basename}designguide/assets/playbook/playbook-profiles-expert-1.png`}
+							src={`${basename}img/documentation/playbook/playbook-profiles-expert-1.png`}
 							alt="illustration swedbankpay playbook profiles"
 						/>
 					</div>
@@ -272,8 +259,7 @@ const Profiles = () => (
 		</p>
 		<img
 			className=""
-			// src={`${basename}img/documentation/playbook/playbook-profiles-intro.png`}
-			src={`${basename}designguide/assets/playbook/playbook-profiles-intro.png`}
+			src={`${basename}img/documentation/playbook/playbook-profiles-intro.png`}
 			alt="illustration swedbankpay playbook profiles"
 		/>
 		<HowToUse />
diff --git a/src/App/Playbook/content/Showroom/index.js b/src/App/Playbook/content/Showroom/index.js
index 0372a228f3..7df122fbf7 100644
--- a/src/App/Playbook/content/Showroom/index.js
+++ b/src/App/Playbook/content/Showroom/index.js
@@ -10,8 +10,7 @@ const Showroom = () => (
 				<div className="col-sm">
 					<img
 						className=""
-						// src={`${basename}img/documentation/playbook/playbook-showroom-1.png`}
-						src={`${basename}designguide/assets/playbook/playbook-showroom-1.png`}
+						src={`${basename}img/documentation/playbook/playbook-showroom-1.png`}
 						alt="illustration swedbankpay playbook showroom"
 					/>
 				</div>
@@ -20,24 +19,21 @@ const Showroom = () => (
 				<div className="col-sm">
 					<img
 						className=""
-						// src={`${basename}img/documentation/playbook/playbook-showroom-2.png`}
-						src={`${basename}designguide/assets/playbook/playbook-showroom-2.png`}
+						src={`${basename}img/documentation/playbook/playbook-showroom-2.png`}
 						alt="illustration swedbankpay playbook showroom"
 					/>
 				</div>
 				<div className="col-sm">
 					<img
 						className=""
-						// src={`${basename}img/documentation/playbook/playbook-showroom-3.png`}
-						src={`${basename}designguide/assets/playbook/playbook-showroom-3.png`}
+						src={`${basename}img/documentation/playbook/playbook-showroom-3.png`}
 						alt="illustration swedbankpay playbook showroom"
 					/>
 				</div>
 				<div className="col-sm">
 					<img
 						className=""
-						// src={`${basename}img/documentation/playbook/playbook-showroom-4.png`}
-						src={`${basename}designguide/assets/playbook/playbook-showroom-4.png`}
+						src={`${basename}img/documentation/playbook/playbook-showroom-4.png`}
 						alt="illustration swedbankpay playbook showroom"
 					/>
 				</div>
@@ -46,8 +42,7 @@ const Showroom = () => (
 				<div className="col-sm">
 					<img
 						className=""
-						// src={`${basename}img/documentation/playbook/playbook-showroom-5.png`}
-						src={`${basename}designguide/assets/playbook/playbook-showroom-5.png`}
+						src={`${basename}img/documentation/playbook/playbook-showroom-5.png`}
 						alt="illustration swedbankpay playbook showroom"
 					/>
 				</div>
@@ -56,8 +51,7 @@ const Showroom = () => (
 				<div className="col-sm">
 					<img
 						className=""
-						// src={`${basename}img/documentation/playbook/playbook-showroom-6.png`}
-						src={`${basename}designguide/assets/playbook/playbook-showroom-6.png`}
+						src={`${basename}img/documentation/playbook/playbook-showroom-6.png`}
 						alt="illustration swedbankpay playbook showroom"
 					/>
 				</div>
@@ -66,16 +60,14 @@ const Showroom = () => (
 				<div className="col-sm">
 					<img
 						className=""
-						// src={`${basename}img/documentation/playbook/playbook-showroom-7.png`}
-						src={`${basename}designguide/assets/playbook/playbook-showroom-7.png`}
+						src={`${basename}img/documentation/playbook/playbook-showroom-7.png`}
 						alt="illustration swedbankpay playbook showroom"
 					/>
 				</div>
 				<div className="col-sm">
 					<img
 						className=""
-						// src={`${basename}img/documentation/playbook/playbook-showroom-8.png`}
-						src={`${basename}designguide/assets/playbook/playbook-showroom-8.png`}
+						src={`${basename}img/documentation/playbook/playbook-showroom-8.png`}
 						alt="illustration swedbankpay playbook showroom"
 					/>
 				</div>
@@ -84,32 +76,28 @@ const Showroom = () => (
 				<div className="col-sm">
 					<img
 						className=""
-						// src={`${basename}img/documentation/playbook/playbook-showroom-9.png`}
-						src={`${basename}designguide/assets/playbook/playbook-showroom-9.png`}
+						src={`${basename}img/documentation/playbook/playbook-showroom-9.png`}
 						alt="illustration swedbankpay playbook showroom"
 					/>
 				</div>
 				<div className="col-sm">
 					<img
 						className=""
-						// src={`${basename}img/documentation/playbook/playbook-showroom-10.png`}
-						src={`${basename}designguide/assets/playbook/playbook-showroom-10.png`}
+						src={`${basename}img/documentation/playbook/playbook-showroom-10.png`}
 						alt="illustration swedbankpay playbook showroom"
 					/>
 				</div>
 				<div className="col-sm">
 					<img
 						className=""
-						// src={`${basename}img/documentation/playbook/playbook-showroom-11.png`}
-						src={`${basename}designguide/assets/playbook/playbook-showroom-11.png`}
+						src={`${basename}img/documentation/playbook/playbook-showroom-11.png`}
 						alt="illustration swedbankpay playbook showroom"
 					/>
 				</div>
 				<div className="col-sm">
 					<img
 						className=""
-						// src={`${basename}img/documentation/playbook/playbook-showroom-12.png`}
-						src={`${basename}designguide/assets/playbook/playbook-showroom-12.png`}
+						src={`${basename}img/documentation/playbook/playbook-showroom-12.png`}
 						alt="illustration swedbankpay playbook showroom"
 					/>
 				</div>
@@ -118,24 +106,21 @@ const Showroom = () => (
 				<div className="col-sm">
 					<img
 						className=""
-						// src={`${basename}img/documentation/playbook/playbook-showroom-13.png`}
-						src={`${basename}designguide/assets/playbook/playbook-showroom-13.png`}
+						src={`${basename}img/documentation/playbook/playbook-showroom-13.png`}
 						alt="illustration swedbankpay playbook showroom"
 					/>
 				</div>
 				<div className="col-sm">
 					<img
 						className=""
-						// src={`${basename}img/documentation/playbook/playbook-showroom-14.png`}
-						src={`${basename}designguide/assets/playbook/playbook-showroom-14.png`}
+						src={`${basename}img/documentation/playbook/playbook-showroom-14.png`}
 						alt="illustration swedbankpay playbook showroom"
 					/>
 				</div>
 				<div className="col-sm">
 					<img
 						className=""
-						// src={`${basename}img/documentation/playbook/playbook-showroom-15.png`}
-						src={`${basename}designguide/assets/playbook/playbook-showroom-15.png`}
+						src={`${basename}img/documentation/playbook/playbook-showroom-15.png`}
 						alt="illustration swedbankpay playbook showroom"
 					/>
 				</div>
@@ -144,8 +129,7 @@ const Showroom = () => (
 				<div className="col-sm">
 					<img
 						className=""
-						// src={`${basename}img/documentation/playbook/playbook-showroom-16.png`}
-						src={`${basename}designguide/assets/playbook/playbook-showroom-16.png`}
+						src={`${basename}img/documentation/playbook/playbook-showroom-16.png`}
 						alt="illustration swedbankpay playbook showroom"
 					/>
 				</div>
@@ -154,16 +138,14 @@ const Showroom = () => (
 				<div className="col-sm-4">
 					<img
 						className=""
-						// src={`${basename}img/documentation/playbook/playbook-showroom-17.png`}
-						src={`${basename}designguide/assets/playbook/playbook-showroom-17.png`}
+						src={`${basename}img/documentation/playbook/playbook-showroom-17.png`}
 						alt="illustration swedbankpay playbook showroom"
 					/>
 				</div>
 				<div className="col-sm-8">
 					<img
 						className=""
-						// src={`${basename}img/documentation/playbook/playbook-showroom-18.png`}
-						src={`${basename}designguide/assets/playbook/playbook-showroom-18.png`}
+						src={`${basename}img/documentation/playbook/playbook-showroom-18.png`}
 						alt="illustration swedbankpay playbook showroom"
 					/>
 				</div>
@@ -172,8 +154,7 @@ const Showroom = () => (
 				<div className="col-sm">
 					<img
 						className=""
-						// src={`${basename}img/documentation/playbook/playbook-showroom-19.png`}
-						src={`${basename}designguide/assets/playbook/playbook-showroom-19.png`}
+						src={`${basename}img/documentation/playbook/playbook-showroom-19.png`}
 						alt="illustration swedbankpay playbook showroom"
 					/>
 				</div>
@@ -182,16 +163,14 @@ const Showroom = () => (
 				<div className="col-sm">
 					<img
 						className=""
-						// src={`${basename}img/documentation/playbook/playbook-showroom-20.png`}
-						src={`${basename}designguide/assets/playbook/playbook-showroom-20.png`}
+						src={`${basename}img/documentation/playbook/playbook-showroom-20.png`}
 						alt="illustration swedbankpay playbook showroom"
 					/>
 				</div>
 				<div className="col-sm">
 					<img
 						className=""
-						// src={`${basename}img/documentation/playbook/playbook-showroom-21.png`}
-						src={`${basename}designguide/assets/playbook/playbook-showroom-21.png`}
+						src={`${basename}img/documentation/playbook/playbook-showroom-21.png`}
 						alt="illustration swedbankpay playbook showroom"
 					/>
 				</div>
@@ -200,16 +179,14 @@ const Showroom = () => (
 				<div className="col-sm">
 					<img
 						className=""
-						// src={`${basename}img/documentation/playbook/playbook-showroom-22.png`}
-						src={`${basename}designguide/assets/playbook/playbook-showroom-22.png`}
+						src={`${basename}img/documentation/playbook/playbook-showroom-22.png`}
 						alt="illustration swedbankpay playbook showroom"
 					/>
 				</div>
 				<div className="col-sm">
 					<img
 						className=""
-						// src={`${basename}img/documentation/playbook/playbook-showroom-23.png`}
-						src={`${basename}designguide/assets/playbook/playbook-showroom-23.png`}
+						src={`${basename}img/documentation/playbook/playbook-showroom-23.png`}
 						alt="illustration swedbankpay playbook showroom"
 					/>
 				</div>
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-principles-friendly-hierarchy.png b/src/img/swedbankpay/documentation/playbook/playbook-principles-friendly-hierarchy.png
index 56b65b3984..04c2bcfe04 100644
Binary files a/src/img/swedbankpay/documentation/playbook/playbook-principles-friendly-hierarchy.png and b/src/img/swedbankpay/documentation/playbook/playbook-principles-friendly-hierarchy.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-principles-friendly-order.png b/src/img/swedbankpay/documentation/playbook/playbook-principles-friendly-order.png
index 09e1726cc6..0883b8f43c 100644
Binary files a/src/img/swedbankpay/documentation/playbook/playbook-principles-friendly-order.png and b/src/img/swedbankpay/documentation/playbook/playbook-principles-friendly-order.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-principles-friendly-reveal.png b/src/img/swedbankpay/documentation/playbook/playbook-principles-friendly-reveal.png
index d7cfd22515..17d58ff0f7 100644
Binary files a/src/img/swedbankpay/documentation/playbook/playbook-principles-friendly-reveal.png and b/src/img/swedbankpay/documentation/playbook/playbook-principles-friendly-reveal.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-principles-inclusive-assistive.png b/src/img/swedbankpay/documentation/playbook/playbook-principles-inclusive-assistive.png
index f7f93dc485..b4db79747c 100644
Binary files a/src/img/swedbankpay/documentation/playbook/playbook-principles-inclusive-assistive.png and b/src/img/swedbankpay/documentation/playbook/playbook-principles-inclusive-assistive.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-principles-inclusive-contrast.png b/src/img/swedbankpay/documentation/playbook/playbook-principles-inclusive-contrast.png
index 4a9f72a26e..06fcd30f93 100644
Binary files a/src/img/swedbankpay/documentation/playbook/playbook-principles-inclusive-contrast.png and b/src/img/swedbankpay/documentation/playbook/playbook-principles-inclusive-contrast.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-principles-inclusive-simplicity.png b/src/img/swedbankpay/documentation/playbook/playbook-principles-inclusive-simplicity.png
index a0fa1daaf7..2da7b37db7 100644
Binary files a/src/img/swedbankpay/documentation/playbook/playbook-principles-inclusive-simplicity.png and b/src/img/swedbankpay/documentation/playbook/playbook-principles-inclusive-simplicity.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-principles-simplicity-clarity.png b/src/img/swedbankpay/documentation/playbook/playbook-principles-simplicity-clarity.png
index 06492607f2..feba059115 100644
Binary files a/src/img/swedbankpay/documentation/playbook/playbook-principles-simplicity-clarity.png and b/src/img/swedbankpay/documentation/playbook/playbook-principles-simplicity-clarity.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-principles-simplicity-consistency.png b/src/img/swedbankpay/documentation/playbook/playbook-principles-simplicity-consistency.png
index ad4026fcda..6a30ac2ff8 100644
Binary files a/src/img/swedbankpay/documentation/playbook/playbook-principles-simplicity-consistency.png and b/src/img/swedbankpay/documentation/playbook/playbook-principles-simplicity-consistency.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-principles-simplicity-reduction.png b/src/img/swedbankpay/documentation/playbook/playbook-principles-simplicity-reduction.png
index 1a607c3856..d81c49bf5f 100644
Binary files a/src/img/swedbankpay/documentation/playbook/playbook-principles-simplicity-reduction.png and b/src/img/swedbankpay/documentation/playbook/playbook-principles-simplicity-reduction.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-principles-unexpected-motion.png b/src/img/swedbankpay/documentation/playbook/playbook-principles-unexpected-motion.png
index 103c083bc9..3fd075b6f2 100644
Binary files a/src/img/swedbankpay/documentation/playbook/playbook-principles-unexpected-motion.png and b/src/img/swedbankpay/documentation/playbook/playbook-principles-unexpected-motion.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-principles-unexpected-surprise.png b/src/img/swedbankpay/documentation/playbook/playbook-principles-unexpected-surprise.png
index 01b099b1ca..e1097177dd 100644
Binary files a/src/img/swedbankpay/documentation/playbook/playbook-principles-unexpected-surprise.png and b/src/img/swedbankpay/documentation/playbook/playbook-principles-unexpected-surprise.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-principles-unexpected-unified.png b/src/img/swedbankpay/documentation/playbook/playbook-principles-unexpected-unified.png
index 58488f486b..8164adb6fb 100644
Binary files a/src/img/swedbankpay/documentation/playbook/playbook-principles-unexpected-unified.png and b/src/img/swedbankpay/documentation/playbook/playbook-principles-unexpected-unified.png differ