diff --git a/lib/components/Footer/Footer.tsx b/lib/components/Footer/Footer.tsx
index e632734..3e2ebf7 100644
--- a/lib/components/Footer/Footer.tsx
+++ b/lib/components/Footer/Footer.tsx
@@ -41,56 +41,56 @@ export const Footer = forwardRef<HTMLDivElement, FooterProps>(function Footer(
     switch (language) {
       case 'sv':
         return [
-          <div key="LogoEuSv" className="flex">
-            <LogoEuSv className="h-10 max-w-full" />
+          <div key="LogoEuSv" className="ds-flex">
+            <LogoEuSv className="ds-h-10 ds-max-w-full" />
           </div>,
-          <div key="LogoOkmFiSv" className="flex">
-            <LogoOkmFiSv className="h-10 max-w-full" />
+          <div key="LogoOkmFiSv" className="ds-flex">
+            <LogoOkmFiSv className="ds-h-10 ds-max-w-full" />
           </div>,
-          <div key="LogoTemFiSv" className="flex">
-            <LogoTemFiSv className="h-10 max-w-full" />
+          <div key="LogoTemFiSv" className="ds-flex">
+            <LogoTemFiSv className="ds-h-10 ds-max-w-full" />
           </div>,
-          <div key="LogoKehaSv" className="flex">
-            <LogoKehaSv className="h-10 max-w-full" />
+          <div key="LogoKehaSv" className="ds-flex">
+            <LogoKehaSv className="ds-h-10 ds-max-w-full" />
           </div>,
-          <div key="LogoOphFiSv" className="flex">
-            <LogoOphFiSv className="h-10 max-w-full" />
+          <div key="LogoOphFiSv" className="ds-flex">
+            <LogoOphFiSv className="ds-h-10 ds-max-w-full" />
           </div>,
         ];
       case 'en':
         return [
-          <div key="LogoEuEn" className="flex">
-            <LogoEuEn className="h-10 max-w-full" />
+          <div key="LogoEuEn" className="ds-flex">
+            <LogoEuEn className="ds-h-10 ds-max-w-full" />
           </div>,
-          <div key="LogoOkmEn" className="flex">
-            <LogoOkmEn className="h-10 max-w-full" />
+          <div key="LogoOkmEn" className="ds-flex">
+            <LogoOkmEn className="ds-h-10 ds-max-w-full" />
           </div>,
-          <div key="LogoTemEn" className="flex">
-            <LogoTemEn className="h-10 max-w-full" />
+          <div key="LogoTemEn" className="ds-flex">
+            <LogoTemEn className="ds-h-10 ds-max-w-full" />
           </div>,
-          <div key="LogoKehaEn" className="flex">
-            <LogoKehaEn className="h-10 max-w-full" />
+          <div key="LogoKehaEn" className="ds-flex">
+            <LogoKehaEn className="ds-h-10 ds-max-w-full" />
           </div>,
-          <div key="LogoOphEn" className="flex">
-            <LogoOphEn className="h-10 max-w-full" />
+          <div key="LogoOphEn" className="ds-flex">
+            <LogoOphEn className="ds-h-10 ds-max-w-full" />
           </div>,
         ];
       default:
         return [
-          <div key="LogoEuFi" className="flex">
-            <LogoEuFi className="h-10 max-w-full" />
+          <div key="LogoEuFi" className="ds-flex">
+            <LogoEuFi className="ds-h-10 ds-max-w-full" />
           </div>,
-          <div key="LogoOkmFiSv" className="flex">
-            <LogoOkmFiSv className="h-10 max-w-full" />
+          <div key="LogoOkmFiSv" className="ds-flex">
+            <LogoOkmFiSv className="ds-h-10 ds-max-w-full" />
           </div>,
-          <div key="LogoTemFiSv" className="flex">
-            <LogoTemFiSv className="h-10 max-w-full" />
+          <div key="LogoTemFiSv" className="ds-flex">
+            <LogoTemFiSv className="ds-h-10 ds-max-w-full" />
           </div>,
-          <div key="LogoKehaFi" className="flex">
-            <LogoKehaFi className="h-10 max-w-full" />
+          <div key="LogoKehaFi" className="ds-flex">
+            <LogoKehaFi className="ds-h-10 ds-max-w-full" />
           </div>,
-          <div key="LogoOphFiSv" className="flex">
-            <LogoOphFiSv className="h-10 max-w-full" />
+          <div key="LogoOphFiSv" className="ds-flex">
+            <LogoOphFiSv className="ds-h-10 ds-max-w-full" />
           </div>,
         ];
     }
diff --git a/lib/components/Footer/__snapshots__/Footer.test.tsx.snap b/lib/components/Footer/__snapshots__/Footer.test.tsx.snap
index 7904e95..5ba8ace 100644
--- a/lib/components/Footer/__snapshots__/Footer.test.tsx.snap
+++ b/lib/components/Footer/__snapshots__/Footer.test.tsx.snap
@@ -11,10 +11,10 @@ exports[`Footer > renders copyright 1`] = `
       class="ds-px-5 sm:ds-px-0 ds-grid sm:ds-grid-cols-3 ds-gap-6 sm:ds-gap-9 ds-items-center"
     >
       <div
-        class="flex"
+        class="ds-flex"
       >
         <svg
-          class="h-10 max-w-full"
+          class="ds-h-10 ds-max-w-full"
           fill="#100f0d"
           viewBox="0 0 1169.535 267.045"
           xmlns="http://www.w3.org/2000/svg"
@@ -31,10 +31,10 @@ exports[`Footer > renders copyright 1`] = `
         </svg>
       </div>
       <div
-        class="flex"
+        class="ds-flex"
       >
         <svg
-          class="h-10 max-w-full"
+          class="ds-h-10 ds-max-w-full"
           viewBox="0 0 264.695 40.8"
           xmlns="http://www.w3.org/2000/svg"
         >
@@ -46,10 +46,10 @@ exports[`Footer > renders copyright 1`] = `
         </svg>
       </div>
       <div
-        class="flex"
+        class="ds-flex"
       >
         <svg
-          class="h-10 max-w-full"
+          class="ds-h-10 ds-max-w-full"
           viewBox="0 0 33.077 7.316"
           xmlns="http://www.w3.org/2000/svg"
         >
@@ -66,10 +66,10 @@ exports[`Footer > renders copyright 1`] = `
         </svg>
       </div>
       <div
-        class="flex"
+        class="ds-flex"
       >
         <svg
-          class="h-10 max-w-full"
+          class="ds-h-10 ds-max-w-full"
           viewBox="0 0 44.278 15.648"
           xmlns="http://www.w3.org/2000/svg"
         >
@@ -92,10 +92,10 @@ exports[`Footer > renders copyright 1`] = `
         </svg>
       </div>
       <div
-        class="flex"
+        class="ds-flex"
       >
         <svg
-          class="h-10 max-w-full"
+          class="ds-h-10 ds-max-w-full"
           viewBox="0 0 321.294 90.723"
           xmlns="http://www.w3.org/2000/svg"
         >
@@ -159,10 +159,10 @@ exports[`Footer > renders footer with dark variant 1`] = `
       class="ds-px-5 sm:ds-px-0 ds-grid sm:ds-grid-cols-3 ds-gap-6 sm:ds-gap-9 ds-items-center"
     >
       <div
-        class="flex"
+        class="ds-flex"
       >
         <svg
-          class="h-10 max-w-full"
+          class="ds-h-10 ds-max-w-full"
           fill="#100f0d"
           viewBox="0 0 1169.535 267.045"
           xmlns="http://www.w3.org/2000/svg"
@@ -179,10 +179,10 @@ exports[`Footer > renders footer with dark variant 1`] = `
         </svg>
       </div>
       <div
-        class="flex"
+        class="ds-flex"
       >
         <svg
-          class="h-10 max-w-full"
+          class="ds-h-10 ds-max-w-full"
           viewBox="0 0 264.695 40.8"
           xmlns="http://www.w3.org/2000/svg"
         >
@@ -194,10 +194,10 @@ exports[`Footer > renders footer with dark variant 1`] = `
         </svg>
       </div>
       <div
-        class="flex"
+        class="ds-flex"
       >
         <svg
-          class="h-10 max-w-full"
+          class="ds-h-10 ds-max-w-full"
           viewBox="0 0 33.077 7.316"
           xmlns="http://www.w3.org/2000/svg"
         >
@@ -214,10 +214,10 @@ exports[`Footer > renders footer with dark variant 1`] = `
         </svg>
       </div>
       <div
-        class="flex"
+        class="ds-flex"
       >
         <svg
-          class="h-10 max-w-full"
+          class="ds-h-10 ds-max-w-full"
           viewBox="0 0 44.278 15.648"
           xmlns="http://www.w3.org/2000/svg"
         >
@@ -240,10 +240,10 @@ exports[`Footer > renders footer with dark variant 1`] = `
         </svg>
       </div>
       <div
-        class="flex"
+        class="ds-flex"
       >
         <svg
-          class="h-10 max-w-full"
+          class="ds-h-10 ds-max-w-full"
           viewBox="0 0 321.294 90.723"
           xmlns="http://www.w3.org/2000/svg"
         >
@@ -307,10 +307,10 @@ exports[`Footer > renders footer with light variant 1`] = `
       class="ds-px-5 sm:ds-px-0 ds-grid sm:ds-grid-cols-3 ds-gap-6 sm:ds-gap-9 ds-items-center"
     >
       <div
-        class="flex"
+        class="ds-flex"
       >
         <svg
-          class="h-10 max-w-full"
+          class="ds-h-10 ds-max-w-full"
           fill="#100f0d"
           viewBox="0 0 1169.535 267.045"
           xmlns="http://www.w3.org/2000/svg"
@@ -327,10 +327,10 @@ exports[`Footer > renders footer with light variant 1`] = `
         </svg>
       </div>
       <div
-        class="flex"
+        class="ds-flex"
       >
         <svg
-          class="h-10 max-w-full"
+          class="ds-h-10 ds-max-w-full"
           viewBox="0 0 264.695 40.8"
           xmlns="http://www.w3.org/2000/svg"
         >
@@ -342,10 +342,10 @@ exports[`Footer > renders footer with light variant 1`] = `
         </svg>
       </div>
       <div
-        class="flex"
+        class="ds-flex"
       >
         <svg
-          class="h-10 max-w-full"
+          class="ds-h-10 ds-max-w-full"
           viewBox="0 0 33.077 7.316"
           xmlns="http://www.w3.org/2000/svg"
         >
@@ -362,10 +362,10 @@ exports[`Footer > renders footer with light variant 1`] = `
         </svg>
       </div>
       <div
-        class="flex"
+        class="ds-flex"
       >
         <svg
-          class="h-10 max-w-full"
+          class="ds-h-10 ds-max-w-full"
           viewBox="0 0 44.278 15.648"
           xmlns="http://www.w3.org/2000/svg"
         >
@@ -388,10 +388,10 @@ exports[`Footer > renders footer with light variant 1`] = `
         </svg>
       </div>
       <div
-        class="flex"
+        class="ds-flex"
       >
         <svg
-          class="h-10 max-w-full"
+          class="ds-h-10 ds-max-w-full"
           viewBox="0 0 321.294 90.723"
           xmlns="http://www.w3.org/2000/svg"
         >
@@ -455,10 +455,10 @@ exports[`Footer > renders items 1`] = `
       class="ds-px-5 sm:ds-px-0 ds-grid sm:ds-grid-cols-3 ds-gap-6 sm:ds-gap-9 ds-items-center"
     >
       <div
-        class="flex"
+        class="ds-flex"
       >
         <svg
-          class="h-10 max-w-full"
+          class="ds-h-10 ds-max-w-full"
           fill="#100f0d"
           viewBox="0 0 1169.535 267.045"
           xmlns="http://www.w3.org/2000/svg"
@@ -475,10 +475,10 @@ exports[`Footer > renders items 1`] = `
         </svg>
       </div>
       <div
-        class="flex"
+        class="ds-flex"
       >
         <svg
-          class="h-10 max-w-full"
+          class="ds-h-10 ds-max-w-full"
           viewBox="0 0 264.695 40.8"
           xmlns="http://www.w3.org/2000/svg"
         >
@@ -490,10 +490,10 @@ exports[`Footer > renders items 1`] = `
         </svg>
       </div>
       <div
-        class="flex"
+        class="ds-flex"
       >
         <svg
-          class="h-10 max-w-full"
+          class="ds-h-10 ds-max-w-full"
           viewBox="0 0 33.077 7.316"
           xmlns="http://www.w3.org/2000/svg"
         >
@@ -510,10 +510,10 @@ exports[`Footer > renders items 1`] = `
         </svg>
       </div>
       <div
-        class="flex"
+        class="ds-flex"
       >
         <svg
-          class="h-10 max-w-full"
+          class="ds-h-10 ds-max-w-full"
           viewBox="0 0 44.278 15.648"
           xmlns="http://www.w3.org/2000/svg"
         >
@@ -536,10 +536,10 @@ exports[`Footer > renders items 1`] = `
         </svg>
       </div>
       <div
-        class="flex"
+        class="ds-flex"
       >
         <svg
-          class="h-10 max-w-full"
+          class="ds-h-10 ds-max-w-full"
           viewBox="0 0 321.294 90.723"
           xmlns="http://www.w3.org/2000/svg"
         >